/* =============================================================
   L'AGENCE DU SUD, feuille de style unique
   -------------------------------------------------------------
   Sommaire
   01. Polices
   02. Jetons (couleurs, espacement, typo, mouvement, mesures)
   03. Réinitialisation & base
   04. Mise en page : conteneur unique, sections, rythme
   05. Typographie
   06. Boutons
   07. Chrome : annonce, en-tête, navigation, progression
   08. Hero
   09. Bandeau défilant
   10. Bande de preuve (clients + faits)
   11. Services
   12. Offre
   13. Process
   14. Bannière d'appel
   15. L'agence & la carte de France
   16. Réalisations & démos
   17. Engagements
   18. FAQ
   19. Contact
   20. Pied de page
   21. Éléments flottants (CTA mobile, retour en haut)
   22. Pages internes (cas client, service, légal, 404)
   23. Mouvement : apparition au défilement
   24. Adaptatif
   ============================================================= */

/* ====================== 01. POLICES ====================== *
 * Auto-hébergées : plus de requête bloquante vers Google, plus
 * de préconnexion à deux domaines tiers. `unicode-range` fait
 * que le navigateur ne télécharge que le sous-ensemble utile.  */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/instrument-serif-400-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/instrument-serif-400-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("assets/fonts/instrument-serif-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("assets/fonts/instrument-serif-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/space-grotesk-400-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/space-grotesk-400-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/space-grotesk-500-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/space-grotesk-500-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("assets/fonts/space-grotesk-700-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("assets/fonts/space-grotesk-700-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Polices de repli calées sur les métriques des polices réelles :
   le texte ne saute plus quand la vraie police arrive (CLS ≈ 0). */
@font-face {
  font-family: "Grotesk repli";
  src: local("Helvetica Neue"), local("Arial"), local("Liberation Sans");
  size-adjust: 97%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: "Serif repli";
  src: local("Georgia"), local("Times New Roman"), local("Liberation Serif");
  size-adjust: 92%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}

/* ====================== 02. JETONS ====================== */

:root {
  /* --- Couleurs de marque --- */
  --creme:        #FAF5EC;
  --creme-creuse: #F4EDE1;
  --sable:        #F0E6D4;
  --encre:        #17130E;
  --encre-douce:  #221D17;
  --soleil:       #FF4D00;
  --bleu:         #1B3BFF;

  /* --- Couleurs de texte, opaques : le contraste est décidé une
         fois pour toutes plutôt que subi via des alpha empilés. --- */
  --txt:      #17130E;             /* 15.9:1 sur crème */
  --txt-2:    #554C42;             /*  7.3:1 sur crème */
  --txt-3:    #6E6459;             /*  5.0:1 sur crème */
  --txt-inv:  #FAF5EC;
  --txt-inv-2:#C9C0B4;             /*  8.4:1 sur encre  */
  --accent-txt: #B03500;           /*  4.9:1 sur crème, orange lisible */
  --accent-txt-sable: #A83200;     /*  4.6:1 sur sable  */
  --bleu-txt: #1730D6;             /*  6.4:1 sur crème */

  /* --- Traits & surfaces --- */
  --trait:      #17130E1F;
  --trait-fort: #17130E33;
  --trait-inv:  #FAF5EC29;
  --surface:    #FFFFFF;

  /* --- Espacement : échelle de 8. Rien en dehors. --- */
  --sp-1: .25rem;  /*  4 */
  --sp-2: .5rem;   /*  8 */
  --sp-3: .75rem;  /* 12 */
  --sp-4: 1rem;    /* 16 */
  --sp-5: 1.5rem;  /* 24 */
  --sp-6: 2rem;    /* 32 */
  --sp-7: 3rem;    /* 48 */
  --sp-8: 4rem;    /* 64 */
  --sp-9: 6rem;    /* 96 */
  --sp-10: 8rem;   /* 128 */
  --sp-11: 10rem;  /* 160 */

  /* --- Typographie : échelle modulaire, ratio 1.25 --- */
  --fs-xs:   .8125rem;  /* 13 */
  --fs-s:    .875rem;   /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-m:    1.125rem;  /* 18 */
  --fs-l:    1.375rem;  /* 22 */
  --fs-xl:   1.75rem;   /* 28 */
  --fs-2xl:  2.25rem;   /* 36 */
  --fs-3xl:  3rem;      /* 48 */
  --fs-4xl:  3.75rem;   /* 60 */

  /* Trois crans fluides seulement, pour les titres */
  --fs-titre-hero:    clamp(2.75rem, 1.6rem + 5.2vw, 5rem);
  --fs-titre-section: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --fs-titre-bloc:    clamp(1.5rem, 1.2rem + 1.2vw, 2rem);

  --font-display: "Instrument Serif", "Serif repli", Georgia, serif;
  --font-body:    "Space Grotesk", "Grotesk repli", system-ui, -apple-system, sans-serif;

  /* --- Mouvement : trois durées, deux courbes. --- */
  --t-vif:  120ms;
  --t:      220ms;
  --t-long: 420ms;
  --ease:      cubic-bezier(.2, .8, .2, 1);
  --ease-doux: cubic-bezier(.4, 0, .2, 1);

  /* --- Largeurs de lecture --- */
  --mesure:        64ch;
  --mesure-etroite:46ch;
  --mesure-large:  74ch;

  /* --- Conteneur unique : un seul cadrage pour toute la page --- */
  --page:   1240px;
  --gouttiere: clamp(1.25rem, 4vw, 4.5rem);

  /* --- Rythme vertical, hiérarchisé par nature de section --- */
  --section-y: clamp(4rem, 8vw, 7rem);

  /* --- Formes --- */
  --r-s:  8px;
  --r:    14px;
  --r-l:  22px;
  --r-pilule: 100px;
  --ombre-dure: 6px 6px 0;
  --entete-h: 4.5rem;
}

/* ====================== 03. RÉINITIALISATION & BASE ====================== */

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

html {
  /* Les ancres ne passent plus sous l'en-tête collant : c'est déclaré,
     plus laissé au hasard du padding des sections. */
  scroll-padding-top: calc(var(--entete-h) + var(--sp-5));
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--txt);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; }

/* Grain photo : une seule couche fixe, non interactive. */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--soleil); color: #fff; }

/* Accessibilité : cible visible, unique, sur tout l'interactif. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 3px;
  border-radius: var(--r-s);
}
.sur-fond-sombre :focus-visible { outline-color: #fff; }

.saut-lien {
  position: absolute; left: var(--sp-4); top: var(--sp-4);
  z-index: 300;
  translate: 0 -200%;
  background: var(--encre); color: var(--txt-inv);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pilule);
  text-decoration: none; font-weight: 500;
  transition: translate var(--t) var(--ease);
}
.saut-lien:focus-visible { translate: 0 0; }

.lecteur-seul {
  position: absolute; width: 1px; height: 1px;
  padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ====================== 04. MISE EN PAGE ====================== *
 * Un seul conteneur, utilisé par TOUTES les sections, colorées ou
 * non. Le fond va sur la <section>, le cadrage sur .wrap à
 * l'intérieur. Conséquence : le bord gauche du contenu ne bouge
 * jamais d'une section à l'autre.                                */

.wrap {
  width: min(100% - 2 * var(--gouttiere), var(--page));
  margin-inline: auto;
}

.section { padding-block: var(--section-y); }
.section--majeure { --section-y: clamp(5rem, 10vw, 9rem); }
.section--bande   { --section-y: clamp(2.25rem, 4vw, 3.5rem); }
.section--serree  { --section-y: clamp(3rem, 6vw, 5rem); }

.section--encre  { background: var(--encre); color: var(--txt-inv); }
.section--sable  { background: var(--sable); }
.section--creuse { background: var(--creme-creuse); }
.section--bleu   { background: var(--bleu); color: #fff; }

/* En-tête de section : un seul composant, partout. */
.entete-section { margin-bottom: var(--sp-7); }
.entete-section--large { max-width: var(--mesure-large); }

.surtitre {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: none; letter-spacing: .005em;
  color: var(--accent-txt);
  margin-bottom: var(--sp-4);
}
.surtitre::before {
  content: ""; width: 1.75rem; height: 2px;
  background: currentColor; flex: none;
}
.section--encre .surtitre,
.section--bleu .surtitre { color: #FFA574; }
.section--bleu .surtitre { color: #fff; }
.section--sable .surtitre { color: var(--accent-txt-sable); }

.titre-section {
  font-size: var(--fs-titre-section);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.titre-section em { color: var(--bleu-txt); }
.section--encre .titre-section em { color: var(--soleil); }
.section--bleu .titre-section em,
.section--bleu .titre-section { color: #fff; }

.intro-section {
  max-width: var(--mesure);
  font-size: var(--fs-m);
  color: var(--txt-2);
  margin-top: var(--sp-5);
}
.section--encre .intro-section { color: var(--txt-inv-2); }
.section--bleu .intro-section { color: #ffffffe6; }

/* ====================== 05. TYPOGRAPHIE ====================== */

h1, h2, h3 { font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
em { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: 0; }
strong { font-weight: 700; }

p { text-wrap: pretty; }

/* Liste à puce ronde, le seul endroit où la puce est dessinée en CSS. */
.liste-etoile > li {
  position: relative;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
  max-width: var(--mesure);
}
.liste-etoile > li::before {
  content: "•";
  position: absolute; left: 0; top: var(--sp-2);
  font-size: .75em; line-height: 1.9;
  color: var(--accent-txt);
}
.section--encre .liste-etoile > li::before { color: var(--soleil); }
.section--sable .liste-etoile > li::before { color: var(--accent-txt-sable); }

/* ====================== 06. BOUTONS ====================== */

.btn {
  --btn-fond: var(--encre);
  --btn-txt: var(--creme);
  --btn-bord: var(--encre);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: .8125rem 1.625rem;
  background: var(--btn-fond); color: var(--btn-txt);
  border: 2px solid var(--btn-bord);
  border-radius: var(--r-pilule);
  font-size: var(--fs-base); font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
              translate var(--t) var(--ease);
}
.btn:hover {
  --btn-fond: #A83200; --btn-bord: #A83200; --btn-txt: #fff;
  translate: 0 -2px;
  box-shadow: 0 6px 18px #17130E1F;
}
.btn--fantome { --btn-fond: transparent; --btn-txt: var(--encre); }
.btn--fantome:hover { --btn-fond: var(--encre); --btn-bord: var(--encre); --btn-txt: var(--creme); }
.btn--soleil { --btn-fond: var(--soleil); --btn-bord: var(--soleil); --btn-txt: var(--encre); font-weight: 700; }
.btn--soleil:hover { --btn-fond: var(--creme); --btn-bord: var(--creme); --btn-txt: var(--encre); }
.btn--clair { --btn-fond: var(--creme); --btn-bord: var(--creme); --btn-txt: var(--encre); }
.btn--clair:hover { --btn-fond: var(--soleil); --btn-bord: var(--soleil); --btn-txt: var(--encre); }
.btn--contour-clair { --btn-fond: transparent; --btn-txt: #fff; --btn-bord: #ffffff8f; }
.btn--contour-clair:hover { --btn-fond: #fff; --btn-bord: #fff; --btn-txt: var(--bleu); }
.btn--petit { padding: .5rem 1.125rem; font-size: var(--fs-s); }
.btn--grand { padding: 1rem 2rem; font-size: var(--fs-m); }
.btn--pleine { width: 100%; }

/* Lien texte avec soulignement qui se dessine. */
.lien-souligne {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px; background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t) var(--ease), color var(--t) var(--ease);
  padding-bottom: 2px;
}
.lien-souligne:hover { background-size: 100% 1.5px; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: 500; text-decoration: none;
  color: var(--accent-txt);
}
.lien-fleche svg { transition: translate var(--t) var(--ease); }
.lien-fleche:hover svg { translate: 4px 0; }

/* ====================== 07. CHROME ====================== */

.progression {
  position: fixed; inset: 0 auto auto 0;
  height: 3px; width: 0;
  background: var(--soleil);
  z-index: 120;
}

.annonce {
  background: var(--encre); color: var(--txt-inv);
  font-size: var(--fs-s);
  text-align: center;
  padding: var(--sp-2) var(--gouttiere);
}
.annonce a { color: #FFB08A; font-weight: 500; }

.entete {
  position: sticky; top: 0; z-index: 100;
  min-height: var(--entete-h);
  display: flex; align-items: center; gap: var(--sp-5);
  padding-inline: var(--gouttiere);
  background: color-mix(in srgb, var(--creme) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.entete[data-defile] {
  border-bottom-color: var(--trait);
  box-shadow: 0 10px 30px -18px #17130E4D;
}

.logo {
  font-family: var(--font-display);
  font-size: var(--fs-l);
  line-height: 1;
  text-decoration: none;
  letter-spacing: -.01em;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: .42em;
}
.logo__mark { height: 1.35em; width: auto; display: block; flex: none; }
.logo sup { color: var(--soleil); font-size: .7em; }

.nav { display: flex; align-items: center; gap: var(--sp-6); }
.nav a {
  position: relative;
  font-size: var(--fs-s); font-weight: 500;
  text-decoration: none;
  padding-block: var(--sp-2);
}
.nav a::after {
  content: ""; position: absolute; inset: auto 0 0 0;
  height: 2px; background: var(--soleil);
  scale: 0 1; transform-origin: left;
  transition: scale var(--t) var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { scale: 1 1; }

.burger {
  display: none;
  width: 2.75rem; height: 2.75rem;
  padding: .75rem;
  flex-direction: column; justify-content: space-between;
  background: none; border: none; cursor: pointer;
}
.burger span {
  display: block; height: 2px; width: 100%;
  background: var(--encre);
  transition: translate var(--t) var(--ease), rotate var(--t) var(--ease), opacity var(--t-vif) var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { translate: 0 7px; rotate: 45deg; }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { translate: 0 -7px; rotate: -45deg; }

/* ====================== 08. HERO ====================== */

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4.5rem);
  overflow: clip;                 /* remplace overflow-x:hidden sur body */
}

.hero__grille {
  display: grid;
  grid-template-columns: 7fr 5fr;  /* asymétrie franche, pas un 50/50 déguisé */
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* Trame de fond, une seule, immobile. */
.hero::before {
  content: "";
  position: absolute; inset: -10% -5%;
  z-index: -1;
  background-image:
    linear-gradient(#17130E0D 1px, transparent 1px),
    linear-gradient(90deg, #17130E0D 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 65% 55% at 62% 42%, #000 25%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 65% 55% at 62% 42%, #000 25%, transparent 72%);
  pointer-events: none;
}

.hero__etiquette {
  display: inline-block;
  text-wrap: balance;
  background: var(--sable);
  border: 1px solid var(--trait);
  border-radius: var(--r-pilule);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-s); font-weight: 500;
  margin-bottom: var(--sp-5);
}
.hero__etiquette b { color: var(--accent-txt-sable); font-weight: 700; }

.hero__titre {
  font-size: var(--fs-titre-hero);
  line-height: .96;
  letter-spacing: -.035em;
  margin-bottom: var(--sp-5);
}
.hero__titre em { color: var(--soleil); }

/* Mot qui alterne : les mots sont empilés dans une grille, donc la
   largeur réservée est celle du plus long, la ligne du titre ne
   change jamais de longueur ni de hauteur. */
.mot-tournant {
  display: inline-grid;
  vertical-align: top;
  justify-items: start;
}
.mot-tournant > em {
  grid-area: 1 / 1;
  transition: translate var(--t-long) var(--ease), opacity var(--t) var(--ease);
}
.mot-tournant > em[data-sort] { translate: 0 -.45em; opacity: 0; }

/* Soulignement manuscrit */
.griffe {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8Q15 2 30 7T60 7T90 7T118 6' fill='none' stroke='%23FF4D00' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat bottom .06em left / 100% .13em;
  padding-bottom: .08em;
}

.hero__sous-titre {
  max-width: 38rem;
  font-size: var(--fs-m);
  color: var(--txt-2);
  margin-bottom: var(--sp-6);
}
.hero__sous-titre strong { color: var(--txt); }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.hero__gages {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-5);
  font-size: var(--fs-s);
  color: var(--txt-3);
}
.hero__gages li { display: flex; align-items: center; gap: var(--sp-2); }
.hero__gages svg { flex: none; color: var(--accent-txt); }

/* --- Fenêtre navigateur --- */
.hero__visuel { position: relative; }

.fenetre {
  border-radius: var(--r);
  overflow: clip;
  background: #fff;
  border: 1px solid var(--trait-fort);
  box-shadow: 0 2px 6px #17130E0D, 0 32px 64px -28px #17130E59;
}
.fenetre__barre {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--sable);
  border-bottom: 1px solid var(--trait);
}
.fenetre__pastilles { display: flex; gap: 5px; flex: none; }
.fenetre__pastilles i { width: 9px; height: 9px; border-radius: 50%; background: #17130E2E; }
.fenetre__pastilles i:first-child { background: var(--soleil); }
.fenetre__url {
  flex: 1; min-width: 0;
  background: var(--creme);
  border-radius: var(--r-pilule);
  padding: 2px var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--txt-3);
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fenetre__ecran {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--sable);
}
.fenetre__ecran img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  opacity: 0;
  transition: opacity var(--t-long) var(--ease-doux);
}
.fenetre__ecran img[data-actif] { opacity: 1; }
.fenetre__badge-demo {
  position: absolute; right: var(--sp-3); bottom: var(--sp-3);
  z-index: 3;
  background: var(--creme); color: var(--encre);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-pilule);
  padding: 2px var(--sp-3);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  opacity: 0; translate: 0 4px;
  transition: opacity var(--t) var(--ease), translate var(--t) var(--ease);
  pointer-events: none;
}
.fenetre__badge-demo[data-visible] { opacity: 1; translate: 0 0; }

/* Carte de preuve, posée en bas à gauche */
.carte-preuve {
  position: absolute; left: calc(var(--sp-7) * -1); bottom: calc(var(--sp-7) * -1);
  z-index: 3;
  background: var(--creme);
  border: 2px solid var(--encre);
  border-radius: var(--r);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: 5px 5px 0 var(--encre);
  width: max-content; max-width: 13.5rem;
}
.carte-preuve__etoiles { color: var(--soleil); letter-spacing: .1em; font-size: var(--fs-s); }
.carte-preuve__txt { font-size: var(--fs-xs); color: var(--txt-2); }
.carte-preuve__txt b { color: var(--txt); }

/* Badge prix : ne tourne qu'au survol, plus en boucle. */
.badge-prix {
  position: absolute; right: -1.5rem; top: -2.25rem;
  z-index: 4;
  width: 8.25rem; aspect-ratio: 1;
  display: grid; place-items: center;
  background: var(--soleil);
  border-radius: 50%;
  rotate: -8deg;
  box-shadow: 0 14px 32px #FF4D0059;
  text-decoration: none;
  transition: rotate var(--t-long) var(--ease), scale var(--t) var(--ease);
}
.badge-prix:hover { scale: 1.06; }
.badge-prix svg { grid-area: 1 / 1; width: 100%; height: 100%; }
.badge-prix text { font-family: var(--font-body); font-size: 14.5px; font-weight: 700; letter-spacing: .5px; fill: var(--creme); }
.badge-prix__centre {
  grid-area: 1 / 1;
  font-family: var(--font-display);
  font-size: 2.5rem; line-height: 1;
  color: #fff;
  letter-spacing: -.02em;
}
.badge-prix__anneau { transform-origin: center; transition: rotate 1.2s var(--ease); }
.badge-prix:hover .badge-prix__anneau { rotate: 40deg; }

/* ====================== 09. BANDE D'EXPERTISES ====================== *
 * Rangée statique, centrée, en display serif : les métiers se lisent d'un
 * coup d'oeil, sans mouvement ni inclinaison. Les separateurs sont posés
 * en ::after pour qu'aucun ne traîne en fin de ligne au retour à la ligne. */

/* Le point précède l'élément : aucun ne reste orphelin en fin de ligne. */
/* Pastilles de la fenêtre : le visiteur choisit la réalisation affichée.
   Rien ne défile tout seul à côté du texte d'accroche. */
.fenetre__puces {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding-right: var(--sp-2);
}
/* La carte de preuve déborde sous la fenêtre à gauche : les pastilles
   restent à droite pour ne jamais la croiser. */
@media (max-width: 940px) {
  .fenetre__puces { justify-content: center; padding-right: 0; }
}
.fenetre__puces button {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--trait-fort); opacity: .22;
  cursor: pointer;
  transition: opacity var(--t) var(--ease), background var(--t) var(--ease), scale var(--t) var(--ease);
}
.fenetre__puces button:hover { opacity: .5; }
.fenetre__puces button[aria-selected="true"] {
  background: var(--soleil); opacity: 1; scale: 1.25;
}
.fenetre__puces button:focus-visible {
  outline: 2px solid var(--soleil); outline-offset: 3px; opacity: 1;
}

/* ====================== 10. BANDE DE PREUVE ====================== */

.preuve__clients {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-3) var(--sp-7);
}
.preuve__label {
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: none; letter-spacing: .005em;
  color: var(--txt-3);
  flex: none;
}
/* Bande de logos clients. Les trois marques n'ont pas la même couleur
   d'origine (une claire, une sombre, une verte) : on les ramène toutes à
   l'encre du site pour que la bande se lise comme une seule ligne, et la
   couleur revient au survol. */
.preuve__logos {
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-4) var(--sp-7);
}
.preuve__logos li { display: flex; }
.preuve__logos a {
  display: flex; align-items: center;
  text-decoration: none;
  color: var(--txt-2);
}
.preuve__logos img {
  height: clamp(2.1rem, 3.6vw, 3rem); width: auto;
  filter: brightness(0);
  opacity: .55;
  transition: opacity var(--t) var(--ease), filter var(--t) var(--ease);
}
.preuve__logos a:hover img,
.preuve__logos a:focus-visible img { opacity: 1; }
.logo-iksee {
  gap: .45em;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.9vw, 2.35rem);
  line-height: 1;
  color: var(--encre);
  opacity: .55;
  transition: opacity var(--t) var(--ease), color var(--t) var(--ease);
}
.logo-iksee svg { height: .72em; width: auto; }
.logo-iksee:hover, .logo-iksee:focus-visible { opacity: 1; }

.faits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-7);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--trait);
}
.fait__valeur {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fait__valeur sup { font-size: .45em; color: var(--accent-txt); top: -.7em; }
.fait__libelle {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-s);
  color: var(--txt-2);
  max-width: 16rem;
}

/* ====================== 11. SERVICES ====================== */

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: var(--sp-5);
}

.carte {
  background: var(--surface);
  border: 2px solid var(--encre);
  border-radius: var(--r-l);
  padding: var(--sp-6);
  transition: box-shadow var(--t) var(--ease), translate var(--t) var(--ease);
}
/* Un seul langage au survol : l'ombre dure se pose. Pas de 3D. */
.carte:hover { box-shadow: var(--ombre-dure) var(--bleu); translate: -2px -2px; }

.service__num {
  display: block;
  font-family: var(--font-display); font-style: italic;
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--accent-txt);
  margin-bottom: var(--sp-4);
}
.service h3 { font-size: var(--fs-l); margin-bottom: var(--sp-2); }
.service > p { font-size: var(--fs-s); color: var(--txt-2); margin-bottom: var(--sp-4); }
.service ul { display: grid; gap: var(--sp-1); border-top: 1px solid var(--trait); padding-top: var(--sp-3); }
.service li { font-size: var(--fs-s); position: relative; padding-left: var(--sp-5); }
.service li::before {
  content: ""; position: absolute; left: 0; top: .65em;
  width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid var(--bleu);
}
.service__lien { margin-top: var(--sp-4); font-size: var(--fs-s); }

/* ====================== 12. OFFRE ====================== */

.offres {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--sp-6);
  align-items: stretch;          /* les deux cartes font la même hauteur */
}

.offre {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 2px solid var(--encre);
  border-radius: var(--r-l);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  transition: box-shadow var(--t) var(--ease), translate var(--t) var(--ease);
}
.offre:hover { box-shadow: 8px 8px 0 var(--encre); translate: -2px -2px; }
.offre--vedette { background: var(--encre); color: var(--txt-inv); }
.offre--vedette:hover { box-shadow: 8px 8px 0 var(--soleil); }

/* Le drapeau vit à l'intérieur de la carte : il ne flotte plus
   dans la gouttière entre les deux. */
.offre__drapeau {
  align-self: flex-start;
  background: var(--soleil); color: var(--encre);
  /* Bordure transparente : les deux drapeaux ont la même hauteur, donc
     les noms et les prix des deux cartes partagent la même ligne de base. */
  border: 1.5px solid transparent;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pilule);
  margin-bottom: var(--sp-4);
}
.offre__drapeau--neutre {
  background: transparent; color: var(--txt-3);
  border: 1.5px solid var(--trait-fort);
}
.offre__nom { font-size: var(--fs-l); }
.offre__prix {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.25rem);
  line-height: 1;
  margin-top: var(--sp-3);
  min-height: 1em;               /* les deux prix partagent la même ligne de base */
}
.offre__prix sup { font-size: .4em; color: var(--soleil); top: -.85em; }
.offre__prix .devis { font-style: italic; font-size: .68em; }
.offre__paiement { font-size: var(--fs-s); color: var(--txt-3); margin-top: var(--sp-2); }
.offre--vedette .offre__paiement { color: var(--txt-inv-2); }
.offre__desc { margin-top: var(--sp-4); color: var(--txt-2); }
.offre--vedette .offre__desc { color: var(--txt-inv-2); }

.offre__liste { margin-top: var(--sp-5); display: grid; }
.offre__liste li {
  display: flex; gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-top: 1px solid var(--trait);
  font-size: var(--fs-s);
}
.offre--vedette .offre__liste li { border-color: var(--trait-inv); }
.offre__liste li::before {
  content: "•"; flex: none;
  color: var(--accent-txt); font-size: .8em; line-height: 1.8;
}
.offre--vedette .offre__liste li::before { color: var(--soleil); }

/* Ce qui n'est pas inclus : désarmer l'objection soi-même. */
.offre__exclus {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--trait-fort);
}
.offre--vedette .offre__exclus { border-color: var(--trait-inv); }
.offre__exclus > p {
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: none; letter-spacing: .005em;
  color: var(--txt-3);
  margin-bottom: var(--sp-2);
}
.offre--vedette .offre__exclus > p { color: var(--txt-inv-2); }
.offre__exclus li {
  font-size: var(--fs-s); color: var(--txt-3);
  padding-block: 2px;
  display: flex; gap: var(--sp-3);
}
.offre--vedette .offre__exclus li { color: var(--txt-inv-2); }
.offre__exclus li::before { content: "×"; flex: none; opacity: .6; }

.offre .btn { margin-top: auto; }         /* bouton collé en bas, toujours aligné */
.offre__exclus { margin-bottom: var(--sp-6); }

.options {
  margin-top: var(--sp-6);
  background: var(--sable);
  border: 1px solid var(--trait);
  border-radius: var(--r-l);
  padding: var(--sp-5) var(--sp-6);
}
.options > p { font-weight: 500; margin-bottom: var(--sp-4); }
.options ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.options li {
  background: var(--creme);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-pilule);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-s);
}
.options b { color: var(--accent-txt-sable); }

/* ====================== 13. PROCESS ====================== *
 * Cinq colonnes horizontales : le titre et le contenu partagent
 * enfin le même bord gauche, et la section passe de 1370 à ~500px. */

.etapes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-5);
  counter-reset: etape;
}
.etape {
  position: relative;
  counter-increment: etape;
  padding-top: var(--sp-7);
}
.etape::before {                        /* le filet de liaison */
  content: "";
  position: absolute; left: 0; right: calc(var(--sp-5) * -1); top: 1.0625rem;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--trait-fort) 0 6px, transparent 6px 12px);
}
.etape:last-child::before { display: none; }
.etape::after {                         /* la pastille numérotée */
  content: counter(etape, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  width: 2.125rem; height: 2.125rem;
  display: grid; place-items: center;
  background: var(--encre); color: var(--creme);
  border-radius: 50%;
  font-size: var(--fs-xs); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.etape--cle::after { background: var(--soleil); color: var(--encre); }
.etape h3 { font-size: var(--fs-m); margin-bottom: var(--sp-2); }
.etape p { font-size: var(--fs-s); color: var(--txt-2); }
.etape__note {
  display: inline-block;
  margin-top: var(--sp-3);
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: none; letter-spacing: .005em;
  color: var(--accent-txt-sable);
}

/* ====================== 14. BANNIÈRE D'APPEL ====================== */

.appel { text-align: center; }
.appel .titre-section { margin-inline: auto; max-width: 22ch; }
.appel__sous-titre {
  max-width: 40ch; margin: var(--sp-5) auto 0;
  font-size: var(--fs-m); color: #ffffffe6;
}
.appel__actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.appel .surtitre { justify-content: center; }

/* ====================== 15. AGENCE & CARTE ====================== */

.agence__grille {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.agence__texte > p { color: var(--txt-2); max-width: var(--mesure); }
.agence__texte > p + p { margin-top: var(--sp-4); }
.agence__signature {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--trait);
  font-family: var(--font-display); font-style: italic;
  font-size: var(--fs-l);
  color: var(--txt);           /* explicite : ne dépend pas de .agence__texte > p */
}
.agence__signature span { font-family: var(--font-body); font-style: normal; font-size: var(--fs-s); color: var(--txt-3); }

.carte-france { width: 100%; height: auto; }
.carte-france__terre { fill: #17130E12; stroke: #17130E5C; stroke-width: 1.2; stroke-linejoin: round; }
.carte-france__ville circle { fill: var(--encre); }
.carte-france__ville text {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  fill: var(--txt-2);
}
.carte-france__base circle { fill: var(--soleil); }
.carte-france__base text { font-family: var(--font-body); font-size: 12px; font-weight: 700; fill: var(--txt); }
.carte-france__halo { fill: var(--soleil); opacity: .25; }

/* ====================== 16. RÉALISATIONS & DÉMOS ====================== */

.travaux {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--sp-5);
}
.travail {
  display: flex; flex-direction: column;
  text-decoration: none;
  border-radius: var(--r-l);
}
.travail__visuel {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: var(--r);
  overflow: clip;
  border: 1px solid var(--trait-inv);
  background: var(--encre-douce);
}
.section:not(.section--encre) .travail__visuel { border-color: var(--trait); background: var(--sable); }
.travail__visuel img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: scale var(--t-long) var(--ease);
}
.travail:hover .travail__visuel img { scale: 1.04; }
.travail__etiquette {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  z-index: 2;
  background: var(--creme); color: var(--encre);
  border-radius: var(--r-pilule);
  padding: 2px var(--sp-3);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.travail__meta { padding-top: var(--sp-4); }
.travail__meta h3 { font-size: var(--fs-m); }
.travail__meta p { font-size: var(--fs-s); color: var(--txt-inv-2); margin-top: 2px; }
.section:not(.section--encre) .travail__meta p { color: var(--txt-3); }
.travail__voir {
  margin-top: var(--sp-3);
  font-size: var(--fs-s); font-weight: 500;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--soleil);
}
.travail__voir svg { transition: translate var(--t) var(--ease); }
.travail:hover .travail__voir svg { translate: 4px 0; }

/* Démos : cinq tuiles sur une ligne, plus d'orphelin. */
.demos { grid-template-columns: repeat(5, 1fr); }
.demos .travail__visuel { aspect-ratio: 4 / 3; }
.demos .travail__meta h3 { font-size: var(--fs-base); }

/* ====================== 17. ENGAGEMENTS ====================== */

.engagements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--sp-5);
}
.engagement {
  padding-top: var(--sp-5);
  border-top: 2px solid var(--trait-fort);
}
.engagement h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-xl);
  line-height: 1.1;
  margin-bottom: var(--sp-3);
}
.engagement p { font-size: var(--fs-s); color: var(--txt-2); }

/* ====================== 18. FAQ ====================== */

.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: 0 var(--sp-8);
  align-items: start;
}
.faq details { break-inside: avoid; }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
  font-size: var(--fs-m); font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: color var(--t) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-txt); }
.faq__signe {
  flex: none;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border: 2px solid var(--encre);
  border-radius: 50%;
  transition: rotate var(--t) var(--ease), background var(--t) var(--ease),
              border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.faq__signe::before { content: "+"; font-size: var(--fs-m); line-height: 1; }
.faq details[open] .faq__signe {
  rotate: 45deg;
  background: var(--soleil); border-color: var(--soleil); color: #fff;
}
.faq details > div {
  padding-bottom: var(--sp-5);
  color: var(--txt-2);
  max-width: var(--mesure);
}

/* ====================== 19. CONTACT ====================== */

.contact__grille {
  display: grid;
  grid-template-columns: 4fr 5fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact__accroche { font-size: var(--fs-m); color: var(--txt-2); max-width: var(--mesure-etroite); }
.contact__liste { margin-top: var(--sp-6); }
.contact__liste > div {
  display: flex; flex-direction: column; gap: 2px;
  padding-block: var(--sp-4);
  border-bottom: 1px dashed var(--trait-fort);
}
.contact__liste dt {
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: none; letter-spacing: .005em;
  color: var(--txt-3);
}
.contact__liste a, .contact__liste .val { font-size: var(--fs-m); font-weight: 500; text-decoration: none; }
.contact__liste a:hover { color: var(--accent-txt); }

.formulaire {
  background: var(--surface);
  border: 2px solid var(--encre);
  border-radius: var(--r-l);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 8px 8px 0 var(--encre);
  display: grid; gap: var(--sp-4);
}
.formulaire__duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.formulaire label { display: grid; gap: var(--sp-2); font-size: var(--fs-s); font-weight: 500; }
.formulaire label small { color: var(--txt-3); font-weight: 400; }
.formulaire :is(input, select, textarea) {
  background: var(--creme);
  border: 2px solid var(--trait-fort);
  border-radius: var(--r-s);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-base);
  width: 100%;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.formulaire :is(input, select, textarea):hover { border-color: #17130E52; }
.formulaire :is(input, select, textarea):focus { border-color: var(--soleil); outline: none; background: #fff; }
.formulaire :is(input, select, textarea):focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
.formulaire textarea { resize: vertical; min-height: 7rem; }
.formulaire ::placeholder { color: #8A8077; }
/* Ne rougit qu'après une tentative d'envoi, pas pendant la frappe. */
.formulaire[data-touche] :is(input, textarea):invalid { border-color: #C0392B; }
.formulaire__pot { position: absolute; left: -9999px; }
.formulaire__note { font-size: var(--fs-xs); color: var(--txt-3); }
.formulaire__etat { font-size: var(--fs-s); font-weight: 500; min-height: 1.5rem; }
.formulaire__etat[data-ton="ok"]  { color: #1E7A46; }
.formulaire__etat[data-ton="ko"]  { color: #C0392B; }
.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* ====================== 20. PIED DE PAGE ====================== */

.pied { border-top: 1px solid var(--trait); padding-top: var(--sp-8); overflow: clip; }
.pied__filigrane {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(4rem, 15vw, 11rem);
  line-height: .9;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1.5px #17130E24;
  user-select: none;
  margin-bottom: var(--sp-7);
}
.pied__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-6);
  padding-bottom: var(--sp-7);
}
.pied h2 {
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: none; letter-spacing: .005em;
  color: var(--txt-3);
  margin-bottom: var(--sp-4);
}
.pied__marque { font-family: var(--font-display); font-size: var(--fs-l); display: inline-flex; align-items: center; gap: .42em; }
.pied__marque .logo__mark { height: 1.3em; }
.pied__marque sup { color: var(--soleil); font-size: .7em; }
.pied__baseline { margin-top: var(--sp-2); font-size: var(--fs-s); color: var(--txt-3); max-width: 22ch; }
.pied nav { display: grid; gap: var(--sp-2); justify-items: start; }
.pied nav a, .pied__coord a { font-size: var(--fs-s); text-decoration: none; }
.pied nav a:hover, .pied__coord a:hover { color: var(--accent-txt); }
.pied__coord { display: grid; gap: var(--sp-2); justify-items: start; }
.pied__coord p { font-size: var(--fs-s); color: var(--txt-3); }
.pied__bas {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  align-items: center;
  padding-block: var(--sp-5);
  border-top: 1px solid var(--trait);
  font-size: var(--fs-xs); color: var(--txt-3);
}
.pied__bas nav { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.pied__bas a { font-size: var(--fs-xs); }
.pied__bas .pied__cocarde { margin-left: auto; }

/* ====================== 21. ÉLÉMENTS FLOTTANTS ====================== */

.cta-mobile {
  display: none;
  position: fixed; inset: auto 0 0 0;
  z-index: 90;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--creme) 94%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--trait);
}
.cta-mobile .btn { flex: 1; padding-block: var(--sp-3); }
.cta-mobile .btn:first-child { flex: .8; }

.haut {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5);
  z-index: 80;
  width: 2.875rem; height: 2.875rem;
  display: grid; place-items: center;
  border: 2px solid var(--encre);
  border-radius: 50%;
  background: var(--creme); color: var(--encre);
  cursor: pointer;
  opacity: 0; translate: 0 10px; pointer-events: none;
  transition: opacity var(--t) var(--ease), translate var(--t) var(--ease),
              background var(--t) var(--ease), color var(--t) var(--ease);
}
.haut[data-visible] { opacity: 1; translate: 0 0; pointer-events: auto; }
.haut:hover { background: var(--encre); color: var(--creme); }

/* ====================== 22. PAGES INTERNES ====================== */

/* Fil d'Ariane */
.ariane {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--txt-3);
  padding-top: var(--sp-6);
}
.ariane a { text-decoration: none; }
.ariane a:hover { color: var(--accent-txt); }
.ariane li:not(:last-child)::after { content: " ›"; padding-left: var(--sp-2); }
.ariane ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* En-tête de page interne */
.page-tete { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem); }
.page-tete h1 {
  font-size: var(--fs-titre-section);
  letter-spacing: -.025em;
  max-width: 26ch;
  text-wrap: balance;
}
.page-tete h1 em { color: var(--bleu-txt); }
.page-tete__chapeau {
  margin-top: var(--sp-5);
  font-size: var(--fs-m);
  color: var(--txt-2);
  max-width: var(--mesure);
}

/* La première section d'une page interne suit directement le chapeau :
   son padding haut ferait doublon avec celui de .page-tete. */
.page-tete + .section { padding-top: 0; }

/* Corps rédactionnel : une seule mesure, partout. */
.prose { max-width: var(--mesure); }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 {
  font-size: var(--fs-xl);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--trait);
  text-wrap: balance;
}
/* Le premier titre n'a rien à séparer de ce qui le précède. */
.prose > :first-child { margin-top: 0; }
.prose > h2:first-child { padding-top: 0; border-top: none; }
.prose h3 { font-size: var(--fs-l); margin-top: var(--sp-6); }
.prose p, .prose li { color: var(--txt-2); }
.prose strong { color: var(--txt); }
.prose a { color: var(--accent-txt); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { display: grid; gap: var(--sp-2); }
.prose ul > li { position: relative; padding-left: var(--sp-5); }
.prose ul > li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--soleil);
}
.prose ol { display: grid; gap: var(--sp-2); counter-reset: n; }
.prose ol > li { position: relative; padding-left: var(--sp-6); counter-increment: n; }
.prose ol > li::before {
  content: counter(n) "."; position: absolute; left: 0;
  font-weight: 700; color: var(--accent-txt);
}
.prose dl { display: grid; gap: 0; }
.prose dt {
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: none; letter-spacing: .005em;
  color: var(--txt-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--trait-fort);
}
.prose dd { color: var(--txt-2); padding-bottom: var(--sp-3); }

/* Cas client */
.cas__resume {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-block: 1px solid var(--trait);
}
.cas__resume dt {
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: none; letter-spacing: .005em;
  color: var(--txt-3);
  margin-bottom: var(--sp-1);
}
.cas__resume dd { font-size: var(--fs-base); font-weight: 500; }
.cas__visuel {
  margin-top: var(--sp-7);
  border: 2px solid var(--encre);
  border-radius: var(--r-l);
  overflow: clip;
  box-shadow: 8px 8px 0 var(--encre);
}
.cas__visuel img { width: 100%; }
.cas__legende { font-size: var(--fs-xs); color: var(--txt-3); margin-top: var(--sp-3); }

/* Grille « autres pages » en bas des pages internes */
.suite {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--sp-5);
}
.suite a {
  display: block;
  padding: var(--sp-5);
  border: 2px solid var(--encre);
  border-radius: var(--r-l);
  background: var(--surface);
  text-decoration: none;
  transition: box-shadow var(--t) var(--ease), translate var(--t) var(--ease);
}
.suite a:hover { box-shadow: var(--ombre-dure) var(--soleil); translate: -2px -2px; }
.suite h3 { font-size: var(--fs-m); }
.suite p { font-size: var(--fs-s); color: var(--txt-3); margin-top: var(--sp-1); }

/* 404 */
.erreur { text-align: center; padding-block: clamp(4rem, 12vw, 9rem); }
.erreur__code {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(5rem, 20vw, 12rem);
  line-height: .85;
  color: var(--soleil);
}
.erreur h1 { font-size: var(--fs-titre-section); margin-top: var(--sp-4); }
.erreur__texte { margin: var(--sp-5) auto 0; max-width: 44ch; color: var(--txt-2); }
.erreur__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-6); }

/* Le bandeau « Démo » vit dans la feuille inline de chaque démo :
   les démos ne chargent pas cette feuille, elles sont autonomes. */

/* ====================== 23. APPARITION AU DÉFILEMENT ====================== *
 * Piloté par le défilement, sans JavaScript et sans classes posées à
 * la volée. Le contenu est visible par défaut : si le navigateur ne
 * connaît pas `animation-timeline`, il ne se passe simplement rien.   */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .apparait {
      animation: apparition linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }
    @keyframes apparition {
      from { opacity: 0; translate: 0 14px; }
      to   { opacity: 1; translate: 0 0; }
    }
  }
}

/* ====================== 24. ADAPTATIF ====================== */

@media (max-width: 1180px) {
  .demos { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1080px) {
  .etapes { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-5); }
  .etape::before { display: none; }
  .faits { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-5); }
  .pied__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 940px) {
  .hero__grille,
  .agence__grille,
  .contact__grille { grid-template-columns: 1fr; }
  .hero__grille { gap: var(--sp-9); }
  .hero__visuel { max-width: 32rem; }
  .agence__visuel { max-width: 26rem; margin-inline: auto; }
  .offres { grid-template-columns: 1fr; }
  .demos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 780px) {
  :root { --entete-h: 4rem; }

  .burger { display: flex; }
  .nav {
    position: absolute; inset: 100% 0 auto 0;
    display: grid; gap: 0;
    background: var(--creme);
    border-bottom: 1px solid var(--trait);
    box-shadow: 0 18px 34px -18px #17130E33;
    padding: var(--sp-2) var(--gouttiere) var(--sp-4);
    visibility: hidden;
    opacity: 0; translate: 0 -8px;
    transition: opacity var(--t) var(--ease), translate var(--t) var(--ease), visibility var(--t);
  }
  .nav[data-ouvert] { visibility: visible; opacity: 1; translate: 0 0; }
  .nav a { padding-block: var(--sp-4); font-size: var(--fs-m); border-bottom: 1px dashed var(--trait); }
  .nav a:last-child { border-bottom: none; }
  .nav a::after { display: none; }
  .entete .btn--petit { display: none; }

  .etapes { grid-template-columns: 1fr; gap: var(--sp-6); }
  .faits { grid-template-columns: 1fr 1fr; }
  .formulaire__duo { grid-template-columns: 1fr; }
  .cta-mobile { display: flex; }
  .pied { padding-bottom: 5.5rem; }
  .haut { bottom: 5rem; right: var(--sp-4); }
  .badge-prix { width: 6.5rem; right: -.5rem; top: -1.5rem; }
  .badge-prix text { font-size: 16px; letter-spacing: 0; }
  .badge-prix__centre { font-size: 1.625rem; }
  .carte-preuve { left: 0; bottom: -1.25rem; }
  .pied__bas .pied__cocarde { margin-left: 0; }
}

@media (max-width: 560px) {
  .travaux, .demos { grid-template-columns: 1fr; }
  .faits { grid-template-columns: 1fr; gap: var(--sp-5); }
  .fait__valeur { font-size: 2.5rem; }
  .pied__cols { grid-template-columns: 1fr; gap: var(--sp-6); }
  .preuve__clients { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .annonce, .entete, .cta-mobile, .haut, .progression, body::after { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
}