/* ==========================================================================
   ANO Gestion Web · jeu de plans
   Feuille blanche, encre marine, cotes graphite, une seule marque de révision.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("../assets/fonts/source-serif-4.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --navy: #00293f;         /* encre et feuilles bleues */
  --navy-deep: #001f30;    /* pied de page */
  --ink: #0f1f29;          /* texte principal */
  --text: #2a3a44;         /* texte courant */
  --graphite: #56646d;     /* cotes, légendes (5,9:1 sur blanc) */
  --rule: #c7d0d5;         /* traits fins */
  --rule-strong: #8e9ba3;
  --paper: #ffffff;
  --paper-tint: #f3f5f6;   /* feuille grise froide */
  --on-navy: #ffffff;
  --on-navy-soft: #c9d8e2; /* texte secondaire sur marine (9,6:1) */
  --construct: #6f98b8;    /* traits de construction sur marine */
  --redline: #b33a2b;      /* marque de révision uniquement */

  --font-draw: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-read: "Source Serif 4", Georgia, "Times New Roman", serif;

  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --space-section: clamp(4.5rem, 9vw, 8.5rem);
  --header-h: 76px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  scrollbar-color: var(--rule-strong) var(--paper-tint);
}

body {
  margin: 0;
  font-family: var(--font-read);
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  caret-color: var(--navy);
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
}

::selection { background: var(--navy); color: var(--on-navy); }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-draw);
  color: var(--ink);
  font-weight: 650;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 3.8vw, 3.4rem); line-height: 1.06; font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3.3vw, 2.9rem); line-height: 1.08; }
h3 { font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.25; font-weight: 620; letter-spacing: -0.01em; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 650; color: var(--ink); }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: 1rem; z-index: 300;
  padding: 0.8rem 1.2rem; background: var(--navy); color: var(--on-navy);
  font-family: var(--font-draw); font-weight: 600; text-decoration: none;
  transform: translateY(-180%); transition: transform 0.2s var(--ease);
}
.skip-link:focus, .skip-link:hover { transform: none; color: var(--on-navy); }
.skip-link:focus-visible { outline-color: var(--on-navy); outline-offset: -4px; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- Boutons ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0.85rem 1.6rem;
  border: 1px solid transparent; border-radius: 0;
  font-family: var(--font-draw); font-size: 1rem; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--ink { background: var(--navy); color: var(--on-navy); }
.btn--ink:hover { background: var(--ink); color: var(--on-navy); }
.btn--paper { background: var(--paper); color: var(--navy); }
.btn--paper:hover { background: var(--paper-tint); color: var(--navy); }
.btn--paper:focus-visible { outline-color: var(--on-navy); }

/* --- En-tête ------------------------------------------------------------ */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy);
  border-bottom: 1px solid rgb(201 216 226 / 0.2);
}
.site-header :focus-visible { outline-color: var(--on-navy); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: var(--header-h); }

.brand { display: inline-flex; align-items: flex-end; gap: 0.75rem; color: var(--on-navy); text-decoration: none; }
.brand__logo { width: auto; height: 56px; }
.brand__name {
  padding: 0 0 0.45rem 0.75rem; border-left: 1px solid rgb(201 216 226 / 0.45);
  font-family: var(--font-draw); font-stretch: 80%; font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.1; color: var(--on-navy);
}

.site-nav { display: flex; align-items: center; gap: 1.75rem; }
.site-nav__list { display: flex; gap: 1.4rem; }
.site-nav__list a {
  display: block; padding: 0.5rem 0;
  font-family: var(--font-draw); font-size: 0.95rem; font-weight: 500;
  color: var(--on-navy); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size 0.3s var(--ease);
}
.site-nav__list a:hover, .site-nav__list a[aria-current="true"] { background-size: 100% 1px; }
.site-nav__phone { font-family: var(--font-draw); font-weight: 600; font-size: 0.95rem; color: var(--on-navy); text-decoration: none; white-space: nowrap; }
.site-nav__phone:hover { text-decoration: underline; }
.site-nav__cta { min-height: 44px; padding: 0.6rem 1.2rem; font-size: 0.95rem; }

.nav-toggle {
  display: none; position: relative; width: 48px; height: 48px; margin-right: -0.6rem;
  border: 0; background: transparent; color: var(--on-navy); cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  position: absolute; left: 50%; width: 24px; height: 2px; margin-left: -12px; background: currentColor;
  transition: transform 0.25s var(--ease), background-color 0.2s;
}
.nav-toggle__bars { top: 50%; margin-top: -1px; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; left: 0; margin-left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

/* --- Feuille de garde (H1) --------------------------------------------- */

.cover { background: var(--navy); color: var(--on-navy-soft); }
.cover__sheet {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5.5rem);
  min-height: min(760px, calc(100svh - var(--header-h)));
}
/* cadre de la feuille */
.cover__sheet::before {
  content: ""; position: absolute; inset: clamp(0.9rem, 1.6vw, 1.4rem) calc(var(--gutter) * 0.5);
  border: 1px solid rgb(201 216 226 / 0.28); pointer-events: none;
}

.cover h1 { color: var(--on-navy); margin-bottom: 1.5rem; max-width: 16ch; }
.cover__tagline { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.5; color: var(--on-navy-soft); max-width: 30ch; }
.cover__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2.5rem; }
.cover__phone {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-draw); font-size: 1.15rem; font-weight: 600; color: var(--on-navy);
  text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.4);
}
.cover__phone:hover { color: var(--on-navy); text-decoration-color: var(--on-navy); }
.cover a:focus-visible { outline-color: var(--on-navy); }

.elevation { position: relative; margin: 0; }
.elevation__drawing { width: 100%; height: auto; overflow: visible; }

.elevation .ln { stroke: var(--on-navy); stroke-width: 1.4; fill: none; vector-effect: non-scaling-stroke; }
.elevation .ln--ground { stroke-width: 2; }
.elevation .ln--future { stroke: var(--construct); stroke-dasharray: 6 5; }
.elevation .win { fill: none; stroke: var(--construct); stroke-width: 1; vector-effect: non-scaling-stroke; }
.elevation .foundation { stroke: none; }
.elevation .hatch-line { stroke: var(--construct); stroke-width: 1; }
.elevation .leader { stroke: var(--on-navy-soft); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.elevation .dim, .elevation .dim-ext, .elevation .tick { stroke: var(--on-navy-soft); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.elevation .label {
  fill: var(--on-navy); font-family: var(--font-draw); font-stretch: 78%;
  font-size: 15px; font-weight: 560; letter-spacing: 0.06em; text-transform: uppercase;
}
.elevation .label--future { fill: var(--on-navy-soft); }

/* cartouche */
.titleblock {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  margin-top: 1.5rem; border: 1px solid rgb(201 216 226 / 0.45);
  font-family: var(--font-draw); font-size: 0.95rem; font-weight: 550; color: var(--on-navy);
}
.titleblock__cell { display: grid; gap: 0.2rem; padding: 0.7rem 0.9rem; }
.titleblock__cell + .titleblock__cell { border-left: 1px solid rgb(201 216 226 / 0.45); }
.titleblock__key {
  font-stretch: 78%; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--on-navy-soft);
}
.rev {
  display: inline-block; width: 0; height: 0; margin-right: 0.45rem; vertical-align: 0.05em;
  border-left: 0.42em solid transparent; border-right: 0.42em solid transparent;
  border-bottom: 0.72em solid #ef8b7c; /* marque de révision, version claire sur marine */
}

/* Dessin qui se construit une fois au chargement */
@media (prefers-reduced-motion: no-preference) {
  .elevation .draw { stroke-dasharray: 1200; stroke-dashoffset: 0; animation: draw 1.6s var(--ease) both; }
  .elevation .floor, .elevation .future, .elevation .notes {
    animation: rise 0.9s var(--ease) both;
    animation-delay: calc(0.5s + var(--i) * 0.28s);
  }
  .elevation .future { animation-name: appear; }
  .elevation .notes { animation-name: appear; }
  .titleblock { animation: appear 0.8s var(--ease) 2.1s both; }
}
@keyframes draw { from { stroke-dashoffset: 1200; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes appear { from { opacity: 0; } }

/* --- Sections ----------------------------------------------------------- */

.section { padding-block: var(--space-section); }
.section--sheet { position: relative; }
.section--sheet::before {
  content: ""; position: absolute; pointer-events: none;
  inset: clamp(0.5rem, 1vw, 0.9rem) max(calc(var(--gutter) * 0.5), calc((100% - var(--wrap)) / 2 - var(--gutter) * 0.5));
  border: 1px solid var(--rule-strong);
}
.section--intro { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--blueprint { background: var(--navy); color: var(--on-navy-soft); }
.section--blueprint h2, .section--blueprint h3, .section--blueprint strong { color: var(--on-navy); }
.section--blueprint a { color: var(--on-navy); }
.section--blueprint a:focus-visible { outline-color: var(--on-navy); }

.prose { color: var(--text); }
.prose--measure { max-width: 62ch; }
.prose__strong { color: var(--ink); font-weight: 600; }
.prose__lead { font-size: clamp(1.2rem, 1.7vw, 1.4rem); line-height: 1.5; color: var(--ink); }
.section--blueprint .prose, .section--blueprint p { color: var(--on-navy-soft); }
.section--blueprint .prose__lead, .section--blueprint .prose__strong { color: var(--on-navy); }

.stack { display: grid; gap: 1.5rem; max-width: 56rem; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.stack--narrow { max-width: 46rem; }

.split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 5vw, 5rem); align-items: start;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.split .prose { max-width: 40rem; }

/* Suite du H1 */
.intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.intro__lead {
  margin: 0; font-family: var(--font-draw); font-size: clamp(1.45rem, 2.3vw, 2rem);
  font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink);
}
.intro__body { color: var(--text); }

/* Actif d'acquisition */
.columns { column-count: 2; column-gap: clamp(2rem, 4vw, 3.5rem); max-width: none; }
.columns p { break-inside: avoid; }
#approche .stack { max-width: none; }
#approche h2 { max-width: 20ch; }

.question {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  border-top: 2px solid var(--navy);
}
.question__side { padding: 2rem clamp(1.5rem, 3vw, 2.5rem) 0 0; color: var(--text); }
.question__side h3 { margin-bottom: 1rem; }
.question__main { padding: 2rem 0 0 clamp(1.5rem, 3vw, 2.5rem); border-left: 1px solid var(--rule); }
.question__text {
  margin-bottom: 1.5rem; font-family: var(--font-draw); font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--navy); text-wrap: balance;
}
.question__lead { color: var(--graphite); font-weight: 500; }
.question__close { color: var(--text); }

/* Clientèle : un tableau de trois lignes égales */
.schedule__head, .schedule__row {
  display: grid; grid-template-columns: 4.5rem minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1rem, 3.5vw, 3.5rem);
}
.schedule__head {
  padding-bottom: 0.7rem; border-bottom: 2px solid var(--navy);
  font-family: var(--font-draw); font-stretch: 78%; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite);
}
.schedule__row { padding-block: clamp(1.75rem, 3vw, 2.5rem); border-bottom: 1px solid var(--rule); }
.schedule__key {
  align-self: start; justify-self: start; padding: 0.2rem 0.5rem; border: 1px solid var(--navy);
  font-family: var(--font-draw); font-stretch: 78%; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; color: var(--navy);
}
.schedule__row h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); }
.schedule__row p { max-width: 60ch; }

/* WordPress : coupe par couches */
.section-cut { border: 1px solid var(--rule-strong); }
.layer { display: grid; grid-template-columns: clamp(4.5rem, 12vw, 9rem) minmax(0, 1fr); }
.layer + .layer { border-top: 1px solid var(--rule-strong); }
.layer__material { border-right: 1px solid var(--rule-strong); background-color: var(--paper); }
/* hachures de matériaux, dessinées en SVG */
.layer--1 .layer__material {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M0 14L14 0' stroke='%238e9ba3' stroke-width='1'/%3E%3C/svg%3E");
}
.layer--2 .layer__material {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 16L16 0M0 0L16 16' stroke='%238e9ba3' stroke-width='0.8'/%3E%3C/svg%3E");
}
.layer--3 .layer__material {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12'%3E%3Ccircle cx='4' cy='4' r='1.2' fill='%238e9ba3'/%3E%3Ccircle cx='13' cy='9' r='1.2' fill='%238e9ba3'/%3E%3C/svg%3E");
}
.layer__text {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0.5rem clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.layer__text h3 { grid-row: span 4; }
.layer__text p { grid-column: 2; max-width: 58ch; }

/* SEO */
.seo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 5rem); margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.seo__big {
  font-family: var(--font-draw); font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 600;
  line-height: 1.12; letter-spacing: -0.02em; color: var(--navy);
}
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); }
.pair article { padding-top: 1.5rem; border-top: 2px solid var(--navy); }
.pair h3 { margin-bottom: 1rem; }
.pair p { max-width: 56ch; }

/* Gestion continue : tableau des révisions */
.revisions {
  width: 100%; border-collapse: collapse; margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  font-family: var(--font-draw); color: var(--on-navy);
}
.revisions th {
  padding: 0 0 0.75rem; text-align: left;
  font-stretch: 78%; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--on-navy-soft); border-bottom: 1px solid rgb(201 216 226 / 0.45);
}
.revisions th:first-child { width: 5.5rem; }
.revisions td {
  padding: 1.1rem 0; border-bottom: 1px solid rgb(201 216 226 / 0.25);
  font-size: clamp(1.15rem, 1.9vw, 1.55rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em;
  vertical-align: middle;
}
.rev-mark {
  position: relative; display: inline-grid; place-items: end center; width: 2.1rem; height: 1.85rem;
  padding-bottom: 0.18rem; font-size: 0.8rem; font-weight: 700; color: var(--navy); isolation: isolate;
}
.rev-mark::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  clip-path: polygon(50% 0, 100% 100%, 0 100%); background: #ef8b7c;
}
.blueprint__statement {
  max-width: 44rem; margin-bottom: clamp(3rem, 6vw, 4.5rem);
  font-size: clamp(1.2rem, 1.7vw, 1.4rem); line-height: 1.5; color: var(--on-navy);
}
.pair--blueprint article { border-top-color: var(--on-navy); }

/* IA */
.contrast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--rule-strong); }
.contrast__col { padding: clamp(1.75rem, 3.5vw, 3rem); }
.contrast__col + .contrast__col { border-left: 1px solid var(--rule-strong); }
.contrast__col h3 { margin-bottom: 1rem; }
.statement {
  max-width: 34ch; margin: clamp(3rem, 6vw, 5rem) 0 0;
  font-family: var(--font-draw); font-size: clamp(1.7rem, 3.4vw, 2.8rem); font-weight: 500;
  line-height: 1.12; letter-spacing: -0.02em; color: var(--graphite); text-wrap: balance;
}
.statement strong { display: block; font-weight: 650; color: var(--navy); }

/* Origine */
.origin { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 5rem); margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.origin__head { display: grid; gap: 1.25rem; align-content: start; }
.origin__quote {
  margin: 1.5rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--rule-strong);
}
.origin__quote p {
  font-family: var(--font-draw); font-size: clamp(1.45rem, 2.4vw, 2rem); font-weight: 560;
  line-height: 1.22; letter-spacing: -0.015em; color: var(--navy);
}
.path { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); position: relative; }
/* cote qui relie les deux étapes */
.path::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--rule-strong);
}
.path__step { position: relative; padding-top: 2rem; }
.path__step::before {
  content: ""; position: absolute; top: -6px; left: 0; width: 1px; height: 13px; background: var(--navy);
}
.path__step h3 { margin-bottom: 1rem; }
.path__step p { max-width: 56ch; }

/* Vision */
.chain {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 0;
  margin: 0 0 clamp(3rem, 6vw, 4.5rem);
  font-family: var(--font-draw); font-size: clamp(1.4rem, 2.3vw, 2.1rem); font-weight: 600;
  line-height: 1.15; letter-spacing: -0.02em; color: var(--navy);
}
/* chaque segment est coté : trait continu, traits de repère aux deux bouts */
.chain__seg { position: relative; padding: 0 1.1em 0.55em 0.35em; margin-right: -1px; }
.chain__seg::before, .chain__seg::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.chain__seg::before { bottom: 0.2em; height: 1px; background: var(--graphite); }
.chain__seg::after { bottom: 0; height: 0.6em; border-inline: 1px solid var(--graphite); }
.method { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 5vw, 5rem); }
.method__body { columns: 2; column-gap: 2.5rem; }
.method__body p { break-inside: avoid; }

/* Écosystème */
.ecosystem { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.ecosystem__text h2 { margin-bottom: 1.5rem; }
.siteplan { margin: 0; }
.siteplan svg { width: 100%; height: auto; overflow: visible; }
.siteplan .ln--soft { fill: none; stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 5 5; }
.siteplan .leader { stroke: var(--graphite); stroke-width: 1; }
.siteplan .core { fill: var(--navy); }
.siteplan .tag { fill: var(--paper); stroke: var(--rule-strong); stroke-width: 1; }
.siteplan .label {
  fill: var(--ink); font-family: var(--font-draw); font-stretch: 75%; font-size: 13px;
  font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
}
.siteplan .label--core { fill: var(--on-navy); font-size: 15px; }
.visibility { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 5vw, 5rem); padding-top: 2rem; border-top: 2px solid var(--navy); }
.visibility__body { max-width: 44rem; }

/* Contact : grand cartouche */
.contact__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.contact__text h2 { margin-bottom: 1.5rem; font-size: clamp(2.1rem, 4vw, 3.4rem); }
.contact__text > p:last-child { margin-top: 1.5rem; max-width: 40rem; }
.contact__block { border: 1px solid rgb(201 216 226 / 0.55); }
.contact__head { padding: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid rgb(201 216 226 / 0.55); }
.contact__head h3 { margin-bottom: 0.6rem; font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.contact__rows { margin: 0; }
.contact__row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: center; }
.contact__row + .contact__row { border-top: 1px solid rgb(201 216 226 / 0.55); }
.contact__row dt {
  align-self: stretch; display: flex; align-items: center; padding: 1.1rem clamp(1rem, 2vw, 1.5rem);
  border-right: 1px solid rgb(201 216 226 / 0.55);
  font-family: var(--font-draw); font-stretch: 78%; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-navy-soft);
}
.contact__row dd { margin: 0; }
.contact__row dd a {
  display: flex; align-items: center; min-height: 72px; padding: 0.9rem clamp(1rem, 2vw, 1.5rem);
  font-family: var(--font-draw); font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 600;
  color: var(--on-navy); text-decoration: none; overflow-wrap: anywhere;
  transition: background-color 0.2s var(--ease);
}
.contact__row dd a:hover { background: rgb(255 255 255 / 0.07); text-decoration: underline; text-decoration-thickness: 1px; }

/* --- Pied de page ------------------------------------------------------- */

.site-footer { background: var(--navy-deep); color: var(--on-navy-soft); font-family: var(--font-draw); font-size: 0.95rem; }
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem; padding-block: clamp(3rem, 6vw, 4rem) 2.5rem; }
.site-footer__brand { max-width: 24rem; }
.site-footer__logo { width: auto; height: 64px; margin-bottom: 1.25rem; }
.site-footer__brand p { color: var(--on-navy-soft); line-height: 1.5; }
.site-footer__brand .site-footer__name { margin-bottom: 0.35rem; color: var(--on-navy); font-weight: 600; }
.site-footer__nav { display: grid; grid-template-columns: repeat(2, auto); gap: 0 3rem; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-navy); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer :focus-visible { outline-color: var(--on-navy); }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem;
  padding-block: 0.75rem 1.5rem; border-top: 1px solid rgb(201 216 226 / 0.2); font-size: 0.85rem;
}
.site-footer__bottom p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Adaptatif
   ========================================================================== */

@media (max-width: 1180px) {
  .site-nav { gap: 1.25rem; }
  .site-nav__list { gap: 1rem; }
  .site-nav__list a, .site-nav__phone { font-size: 0.9rem; }
}

@media (max-width: 1040px) {
  :root { --header-h: 68px; }
  .brand__logo { height: 48px; }

  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .site-nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 1rem;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    padding: 0.75rem var(--gutter) 1.75rem;
    background: var(--paper); border-bottom: 1px solid var(--rule-strong);
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s linear 0.2s;
  }
  .site-nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }
  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__list li + li { border-top: 1px solid var(--rule); }
  .site-nav__list a { padding: 0.95rem 0; font-size: 1.05rem; background: none; color: var(--ink); }
  .site-nav :focus-visible { outline-color: var(--navy); }
  .site-nav .site-nav__cta { background: var(--navy); color: var(--on-navy); }
  .site-nav__phone { color: var(--navy); display: flex; align-items: center; min-height: 48px; font-size: 1.05rem; }
  .site-nav__cta { min-height: 52px; font-size: 1rem; }

  .cover__sheet { grid-template-columns: 1fr; min-height: 0; }
  .cover h1 { max-width: 18ch; }
  .elevation { max-width: 640px; }

  .intro, .split, .seo, .origin, .ecosystem, .contact__grid, .method, .visibility { grid-template-columns: 1fr; }
  .split, .seo, .origin { gap: 1.25rem; }
  .siteplan { max-width: 420px; }
  .question { grid-template-columns: 1fr; }
  .question__side { padding-right: 0; }
  .question__main { padding-left: 0; border-left: 0; margin-top: 2rem; border-top: 1px solid var(--rule); }
}

@media (max-width: 720px) {
  body { font-size: 1.0625rem; }
  .brand__logo { height: 44px; }
  .brand__name { font-size: 0.74rem; }

  .cover__actions .btn { width: 100%; }
  .elevation .label { font-size: 26px; font-stretch: 72%; letter-spacing: 0.03em; }
  .titleblock { grid-template-columns: 1fr 1fr; }
  .titleblock__cell--wide { grid-column: 1 / -1; }
  .titleblock__cell--wide + .titleblock__cell { border-left: 0; }
  .titleblock__cell:not(.titleblock__cell--wide) { border-top: 1px solid rgb(201 216 226 / 0.45); }

  .columns, .method__body { column-count: 1; columns: 1; }
  .schedule__head { display: none; }
  .schedule__row { grid-template-columns: 1fr; gap: 0.75rem; }
  .schedule__row:first-of-type { border-top: 2px solid var(--navy); }
  .section--sheet::before { inset: 0.5rem 0.4rem; }
  .layer { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .layer__text { grid-template-columns: 1fr; }
  .layer__text h3 { grid-row: auto; margin-bottom: 0.5rem; }
  .layer__text p { grid-column: 1; }
  .pair, .contrast, .path { grid-template-columns: 1fr; }
  .contrast__col + .contrast__col { border-left: 0; border-top: 1px solid var(--rule-strong); }
  .path { gap: 2.5rem; }
  .path::before { display: none; }
  .path__step { border-top: 1px solid var(--rule-strong); }
  .chain { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .revisions th:first-child { width: 3.75rem; }
  .contact__row { grid-template-columns: 1fr; }
  .contact__row dt { border-right: 0; padding-bottom: 0; }
  .contact__row dd a { min-height: 56px; padding-top: 0.4rem; }

  .site-footer__inner { flex-direction: column; }
  .site-footer__nav { grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
}