@charset "UTF-8";
/* ======
   XÉDRIA — feuille principale
   Agent B (design). Périmètre : assets/css/ et assets/fonts/ uniquement.
   Convention de classes : préfixe « xd- », BEM allégé (bloc__element--modificateur).
   Aucune ressource distante. Aucune dépendance. Zéro JavaScript requis.
   ====== */

/* == 1. POLICES — auto-hébergées, variables, chemins relatifs à CE fichier ==
   (donc insensibles à HE_BASE : le sous-répertoire de test ne les casse pas) */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/space-grotesk.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(../fonts/jetbrains-mono.woff2) format('woff2')}

/* == 2. TOKENS == */
:root{
  /* --- Palette (celle de Cédric, vérifiée : tout le texte est AAA) --- */
  --bg:#070a0c;              /* fond général */
  --bg-deep:#050708;         /* pied de page */
  --bg-soft:#0c1215;         /* cartes sur fond général */
  --bg-alt:#090e10;          /* section alternée */
  --panel:#111a1e;           /* sections en relief (fondateur, contact) */
  --panel-light:#162228;     /* survol de panneau */
  --ink:#f4f7f7;             /* texte principal */
  --ink-soft:#d5e0e3;        /* texte long, plus doux */
  --muted:#aebdc1;           /* texte secondaire */
  --ice:#d8f0f4;             /* accent clair : liens, boutons pleins */
  --blue:#80b6c4;            /* accent froid : sur-titres, numéros */
  --warm:#d6a66d;            /* accent chaud : signature, focus */
  --danger:#ffb4ab;
  --success:#a9e8c2;
  --on-light:#061014;        /* texte posé sur une surface claire */

  /* --- Trois niveaux, pas deux : une bordure porteuse d'information doit
         atteindre 3:1, ce que --line-strong (2,7:1) ne fait pas. --- */
  --line-tint:206,232,238;
  --line:rgba(var(--line-tint),.18);        /* séparation décorative */
  --line-strong:rgba(var(--line-tint),.34); /* cadre de bloc */
  --line-field:rgba(var(--line-tint),.42);  /* contour de contrôle — 3,4:1 */
  --line-hover:rgba(var(--line-tint),.62);

  /* --- Trame blueprint (parti pris n°1) --- */
  --grid-line:rgba(var(--line-tint),.055);
  --grid-step:46px;

  /* --- Échelle typographique fluide, un seul ratio du mobile au grand écran.
         Rapport h1/h3 : 2,19 à 320 px → 2,64 à 1440 px (au lieu de 2,28 → 4,31
         dans la version d'origine, où h3 était figé). --- */
  --fs-xs:clamp(0.75rem, 0.73rem + 0.10vw, 0.80rem);
  --fs-sm:clamp(0.875rem, 0.85rem + 0.15vw, 0.94rem);
  --fs-base:clamp(1rem, 0.96rem + 0.20vw, 1.09rem);
  --fs-md:clamp(1.08rem, 1.00rem + 0.42vw, 1.30rem);
  --fs-lg:clamp(1.28rem, 1.05rem + 1.15vw, 2.00rem);
  --fs-xl:clamp(1.55rem, 1.20rem + 1.75vw, 2.40rem);
  --fs-2xl:clamp(2.05rem, 1.50rem + 2.75vw, 3.50rem);
  --fs-3xl:clamp(2.80rem, 1.95rem + 4.25vw, 5.20rem);

  /* --- Familles --- */
  --font-title:'Space Grotesk', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;

  /* --- Espacements : une seule suite, pas d'improvisation --- */
  --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;   --sp-7:3rem;   --sp-8:4rem;
  --sp-section:clamp(4.5rem, 9vw, 9rem);

  /* --- Largeurs et gouttières --- */
  --max:1180px;
  --max-text:66ch;
  --gutter:clamp(1.25rem, 4vw, 3rem);
  --header-h:76px;
  --tap:44px;                 /* cible tactile minimale */

  /* --- Mouvement --- */
  --t:.24s;
  --t-slow:.55s;
  --ease:cubic-bezier(.22,.61,.36,1);

  color-scheme:dark;
}

/* == 3. RESET — court et moderne == */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 1.25rem);
}
body{
  min-height:100svh;
  background:var(--bg);
  color:var(--ink);
  font:400 var(--fs-base)/1.65 var(--font-body);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;      /* filet de sécurité ; aucun bloc ne doit déborder */
}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
p,li{text-wrap:pretty}
:is(h1,h2,h3,h4){text-wrap:balance;font-family:var(--font-title);font-weight:650;letter-spacing:-.03em;line-height:1.1}
ul[class],ol[class]{list-style:none;padding:0}
hr{border:0;border-top:1px solid var(--line)}

/* == 4. UTILITAIRES ET ACCESSIBILITÉ == */
.xd-wrap{width:min(var(--max), 100% - var(--gutter) * 2);margin-inline:auto}
.xd-sr-only{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Lien d'évitement : visible dès qu'il prend le focus */
.xd-skip{
  position:fixed;z-index:9999;top:.75rem;left:.75rem;
  padding:.7rem 1rem;border-radius:4px;
  background:var(--ice);color:var(--on-light);
  font-weight:700;
  transform:translateY(-200%);
  transition:transform var(--t) var(--ease);
}
.xd-skip:focus-visible{transform:none}

/* Un seul anneau de focus pour tout le site — ambré, 9:1 sur tous les fonds */
:focus-visible{outline:3px solid var(--warm);outline-offset:3px;border-radius:2px}
:focus:not(:focus-visible){outline:none}

/* Sur-titre : le repère « technique » du site, en mono capitales */
.xd-eyebrow{
  margin-bottom:var(--sp-3);
  color:var(--blue);
  font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
}
.xd-lead{max-width:62ch;color:var(--ink-soft);font-size:var(--fs-md);line-height:1.55}
.xd-note{color:var(--muted);font-size:var(--fs-sm)}

/* Trame blueprint — parti pris n°1. Deux dégradés, zéro image, zéro requête.
   Le masque l'estompe vers le bas pour qu'elle ne concurrence jamais le texte. */
.xd-grid{position:relative;isolation:isolate}
.xd-grid::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:var(--grid-step) var(--grid-step);
  -webkit-mask-image:radial-gradient(ellipse 120% 90% at 50% 0%, #000 25%, transparent 78%);
  mask-image:radial-gradient(ellipse 120% 90% at 50% 0%, #000 25%, transparent 78%);
}

/* Cadre à repères d'angle — parti pris n°2 : le vocabulaire du plan technique.
   Deux croix en coins opposés, tracées en pur CSS. */
.xd-frame{position:relative}
.xd-frame::before,.xd-frame::after{
  content:"";position:absolute;width:13px;height:13px;pointer-events:none;
  background:
    linear-gradient(var(--blue),var(--blue)) center/100% 1px no-repeat,
    linear-gradient(var(--blue),var(--blue)) center/1px 100% no-repeat;
  opacity:.55;
}
.xd-frame::before{top:-7px;left:-7px}
.xd-frame::after{right:-7px;bottom:-7px}


/* == 5. TYPOGRAPHIE == */
h1{font-size:var(--fs-3xl);font-weight:700;letter-spacing:-.045em;line-height:.96;max-width:16ch}
h2{font-size:var(--fs-2xl);font-weight:670;letter-spacing:-.038em;line-height:1.02;max-width:20ch}
h3{font-size:var(--fs-lg);font-weight:640;line-height:1.18}
h4{font-size:var(--fs-base);font-weight:650;line-height:1.3}
:is(h1,h2,h3,h4) + p{margin-top:var(--sp-4)}
p + p{margin-top:var(--sp-4)}

/* Lien de texte : le soulignement se trace au survol, il ne clignote pas */
.xd-link{
  color:var(--ice);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;
  text-decoration-color:rgba(var(--line-tint),.45);
  transition:text-decoration-color var(--t) var(--ease);
}
.xd-link:hover{text-decoration-color:var(--ice)}

/* == 6. EN-TÊTE ET NAVIGATION ==
   Aucun JavaScript : menu mobile en case à cocher, en-tête toujours lisible. */
.xd-header{
  position:fixed;z-index:100;inset:0 0 auto;
  border-bottom:1px solid var(--line);
  background:rgba(7,10,12,.86);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
}
.xd-header__inner{
  position:relative;
  min-height:var(--header-h);
  display:flex;align-items:center;gap:var(--sp-5);
}
.xd-brand{display:flex;align-items:center;width:126px;min-height:var(--tap);flex:0 0 auto}
.xd-brand img,.xd-brand svg{width:100%;height:44px;object-fit:contain;object-position:left center}
/* Repli tant qu'aucun logo n'est deposé (menu.php) : le nom, dessiné comme un logo */
.xd-brand__texte{
  font-family:var(--font-title);font-size:1.32rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
}
.xd-footer__brand .xd-brand__texte{color:var(--muted)}
/* .xd-page / .xd-page--<slug> sont posées sur <body> par le socle : crochets
   de ciblage par page, volontairement sans style propre. */

.xd-nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem);margin-left:auto}
.xd-nav__link{
  position:relative;
  display:inline-flex;align-items:center;min-height:var(--tap);
  padding-inline:2px;
  color:var(--muted);font-size:var(--fs-sm);
  transition:color var(--t) var(--ease);
}
.xd-nav__link::after{
  content:"";position:absolute;inset:auto 0 12px;height:1px;
  background:var(--ice);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t) var(--ease);
}
.xd-nav__link:is(:hover,:focus-visible){color:var(--ink)}
.xd-nav__link:hover::after{transform:scaleX(1)}
.xd-nav__link[aria-current="page"]{color:var(--ink)}
.xd-nav__link[aria-current="page"]::after{transform:scaleX(1);background:var(--blue)}
.xd-header__cta{flex:0 0 auto}

/* La case à cocher du menu : invisible mais réellement focusable et cliquable,
   superposée à l'icône. C'est elle qui porte le libellé accessible. */
.xd-burger__input{display:none}
.xd-burger{display:none}
.xd-scrim{display:none}

/* Repli pour Firefox et Safari, sans animation-timeline : xedria.js pose
   .is-solid. Là où l'animation existe, elle l'emporte. Pire cas si le script
   manque : 9,02:1 pour le texte secondaire. Voir notes-design.md §7 bis. */
html.js .xd-header:not(.is-solid){background:rgba(7,10,12,.28);border-bottom-color:transparent}
html.js .xd-header.is-solid{background:rgba(7,10,12,.94);border-bottom-color:var(--line)}

/* En-tête transparent en haut de page, opaque ensuite — sans une ligne de JS.
   Amélioration progressive : là où ce n'est pas supporté, l'en-tête reste opaque. */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    @keyframes xd-header-solid{
      from{background-color:rgba(7,10,12,.28);border-bottom-color:transparent}
      to{background-color:rgba(7,10,12,.94);border-bottom-color:rgba(var(--line-tint),.18)}
    }
    .xd-header{
      animation:xd-header-solid linear both;
      animation-timeline:scroll(root block);
      animation-range:0 120px;
    }
  }
}

/* == 7. BOUTONS — rayon 4 px, seule entorse au « rayon 0 » du site == */
.xd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:50px;padding:.75rem 1.4rem;
  border:1px solid var(--line-field);border-radius:4px;
  background:transparent;color:var(--ink);
  font-family:var(--font-title);font-weight:650;line-height:1.2;
  text-align:center;
  transition:transform var(--t) var(--ease),background-color var(--t) var(--ease),
             border-color var(--t) var(--ease),color var(--t) var(--ease);
}
.xd-btn:hover{transform:translateY(-2px);border-color:var(--ice)}
.xd-btn:active{transform:translateY(0)}
.xd-btn--primary{border-color:var(--ice);background:var(--ice);color:var(--on-light)}
.xd-btn--primary:hover{background:#fff;border-color:#fff}
.xd-btn--ghost{background:rgba(8,13,15,.55)}
.xd-btn--sm{min-height:var(--tap);padding:.55rem 1rem;font-size:var(--fs-sm)}
.xd-btn--block{width:100%}
.xd-btn[disabled],.xd-btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed;transform:none}

/* == 8. HERO ==
   Visuel : motif-donnees.svg (3,9 Ko, vectoriel) en couche de fond, aucun
   élément HTML requis ; son fondu interne démarre après la colonne de texte.
   Choix argumenté dans notes-design.md §9. */
.xd-hero{
  position:relative;
  min-height:calc(100svh - var(--header-h));
  display:grid;align-items:center;
  padding-top:calc(var(--header-h) + var(--sp-7));
  padding-bottom:var(--sp-8);
  overflow:hidden;
  --motif:url("../images/motif-donnees.svg");
  background:
    var(--motif) right center / cover no-repeat,
    radial-gradient(90ch 60ch at 82% 8%, rgba(128,182,196,.13), transparent 62%),
    radial-gradient(70ch 50ch at 8% 96%, rgba(214,166,109,.07), transparent 60%),
    var(--bg);
}
/* Photo fournie en HTML : elle se cadre ici et le motif s'efface. Retirer le
   <picture> fait revenir le motif, sans toucher au CSS. */
.xd-hero:has(.xd-hero__media){background-image:none}
.xd-hero__media{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.xd-hero__media img{width:100%;height:100%;object-fit:cover;object-position:right top;filter:saturate(.82) contrast(1.02)}
.xd-hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(5,8,10,.96) 0%, rgba(5,8,10,.82) 46%, rgba(5,8,10,.36) 78%, rgba(5,8,10,.56) 100%),
    linear-gradient(180deg, rgba(5,8,10,.42), transparent 42%, rgba(5,8,10,.64));
}
.xd-hero__inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);
  gap:clamp(2rem,5vw,5.5rem);align-items:end;
}
.xd-hero__copy{max-width:60ch}   /* assez large pour que les deux boutons tiennent sur une ligne */
.xd-hero__title{margin-bottom:var(--sp-5)}
.xd-hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
.xd-hero__note,.xd-hero__actions + p{margin-top:var(--sp-4);color:var(--muted);font-size:var(--fs-sm)}
.xd-hero__card{
  padding:var(--sp-6);
  border:1px solid var(--line-strong);
  background:rgba(10,16,19,.78);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 24px 70px rgba(0,0,0,.32);
}
.xd-hero__card-title{font-size:var(--fs-lg);font-weight:650;line-height:1.3}

/* Le filet vertical qui descend du hero : une ligne de fuite, rien de plus */
.xd-hero::after{
  content:"";position:absolute;z-index:1;left:var(--gutter);bottom:0;
  width:1px;height:clamp(3rem,9vh,7rem);
  background:linear-gradient(to bottom, transparent, var(--blue));
  opacity:.5;
}

/* Liste à coches — la coche est dessinée, pas un caractère */
.xd-check{margin-top:var(--sp-5);display:grid;gap:.2rem}
.xd-check li{position:relative;padding:.5rem 0 .5rem 1.7rem;color:var(--ink-soft)}
.xd-check li::before{
  content:"";position:absolute;left:0;top:1.05em;
  width:9px;height:5px;
  border:solid var(--blue);border-width:0 0 2px 2px;
  transform:rotate(-45deg);
}

/* == 9. SECTIONS == */
.xd-section{position:relative;padding-block:var(--sp-section);background:var(--bg)}
.xd-section + .xd-section{border-top:1px solid var(--line)}
.xd-section--soft{background:var(--bg-alt)}
.xd-section--panel{
  background:radial-gradient(60ch 40ch at 88% 22%, rgba(117,168,181,.12), transparent 60%), var(--panel);
}
.xd-section--panel-left{
  background:radial-gradient(60ch 40ch at 10% 12%, rgba(117,168,181,.12), transparent 58%), var(--panel);
}
.xd-section__head{max-width:56ch;margin-bottom:var(--sp-7)}
/* Descendant et non enfant direct : la variante --aside est une grille, son
   contenu vit donc dans un div d'enrobage et un « > » ne l'atteindrait pas. */
.xd-section__head p:not(.xd-eyebrow){max-width:var(--max-text);margin-top:var(--sp-4);color:var(--muted);font-size:var(--fs-md)}

/* Variante avec un visuel d'appoint à droite (l'illustration « Orion ») */
.xd-section__head--aside{
  max-width:none;
  display:grid;grid-template-columns:minmax(0,58ch) minmax(150px,1fr);
  gap:clamp(2rem,6vw,6rem);align-items:end;
}
.xd-section__aside{
  width:clamp(150px,15vw,200px);   /* la source ne fait que 239px de large */justify-self:end;align-self:end;margin-bottom:-1rem;
  filter:drop-shadow(0 24px 42px rgba(71,166,194,.18));
}

/* La séparation entre sections se trace à l'entrée dans le champ de vision.
   Parti pris n°3 — piloté par le navigateur, sans JavaScript ni observateur. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    @keyframes xd-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    .xd-section + .xd-section{border-top-color:transparent}
    .xd-section + .xd-section::before{
      content:"";position:absolute;inset:0 0 auto;height:1px;
      background:var(--line-strong);
      transform-origin:left;
      animation:xd-rule linear both;
      animation-timeline:view(block);
      animation-range:entry 0% entry 55%;
    }
  }
}

/* == 10. CARTES NUMÉROTÉES  (apports · offres · méthode) ==
   Le chiffre existe deux fois : en étiquette lisible, et en filigrane géant
   détouré au fond de la carte. C'est la signature visuelle du site. */
.xd-cards{display:grid;gap:0;border:1px solid var(--line)}
.xd-cards--4{grid-template-columns:repeat(4,1fr)}
.xd-cards--2{grid-template-columns:repeat(2,1fr);gap:1.125rem;border:0}

.xd-card{
  position:relative;overflow:hidden;isolation:isolate;
  container-type:inline-size;   /* le filigrane se dimensionne sur la carte, pas sur l'ecran */
  min-height:18rem;
  display:flex;flex-direction:column;align-items:flex-start;
  padding:var(--sp-6);
  background:var(--bg-soft);
  transition:background-color var(--t) var(--ease),transform var(--t) var(--ease),border-color var(--t) var(--ease);
}
.xd-cards--4 > .xd-card + .xd-card{border-left:1px solid var(--line)}
.xd-cards--2 > .xd-card{border:1px solid var(--line)}
.xd-cards--2 > .xd-card:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.xd-card:hover{background:var(--panel-light)}
.xd-card--featured{background:linear-gradient(135deg,#17252a,#0d1518)}

.xd-card__num{
  color:var(--blue);
  font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;
}
.xd-card__title{margin-top:auto;padding-top:var(--sp-7)}
.xd-card__text{margin-top:var(--sp-3);max-width:48ch;color:var(--muted)}
.xd-card__link{
  margin-top:var(--sp-5);
  display:inline-flex;align-items:center;gap:.5rem;min-height:var(--tap);
  color:var(--ice);font-weight:600;
}
.xd-card__link span{transition:transform var(--t) var(--ease)}
.xd-card__link:hover span{transform:translateX(5px)}
/* Toute la carte devient cliquable, sans perdre le focus sur le vrai lien */
.xd-card__link::before{content:"";position:absolute;inset:0;z-index:1}

/* Filigrane : le HTML porte data-num="01" sur .xd-card */
.xd-card[data-num]::after{
  content:attr(data-num);
  position:absolute;right:.14em;bottom:-.24em;z-index:-1;
  color:transparent;
  -webkit-text-stroke:1px rgba(var(--line-tint),.11);
  font:800 clamp(4rem,9vw,7rem)/1 var(--font-title);
  letter-spacing:-.05em;
  pointer-events:none;
  transition:-webkit-text-stroke-color var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);
}
.xd-card:hover::after{-webkit-text-stroke-color:rgba(128,182,196,.30);transform:translateY(-4px)}
/* Proportionnel a la carte : meme presence en grille de 2 ou de 4 colonnes */
@supports (container-type: inline-size){
  .xd-card[data-num]::after{font-size:30cqw}
}

/* Encart en marge — un aparté, pas une carte */
.xd-aside-note{
  display:grid;grid-template-columns:minmax(0,16rem) 1fr;gap:var(--sp-6);
  margin-top:var(--sp-6);
  border-left:2px solid var(--warm);
  padding:var(--sp-5) 0 var(--sp-5) var(--sp-6);
}
.xd-aside-note > p:last-child{max-width:var(--max-text);font-size:var(--fs-md)}

/* == 11. FONDATEUR == */
.xd-founder{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr);gap:clamp(2.5rem,7vw,6.5rem);align-items:center}
.xd-founder__copy > p:not(.xd-eyebrow){max-width:var(--max-text);color:var(--ink-soft)}

.xd-quote{
  position:relative;
  min-height:24rem;
  display:flex;flex-direction:column;justify-content:flex-end;gap:var(--sp-5);
  border:1px solid var(--line-strong);
  padding:clamp(1.5rem,3vw,2.4rem);
  background:linear-gradient(145deg, rgba(216,240,244,.06), rgba(8,12,14,.45));
}
.xd-quote::before,.xd-quote::after{z-index:1}
.xd-quote__text{
  position:relative;
  font-family:var(--font-title);font-size:var(--fs-xl);font-weight:500;
  line-height:1.16;letter-spacing:-.03em;
}
/* Le guillemet ouvrant, en très grand, derrière le texte */
.xd-quote__text::before{
  content:"“";
  position:absolute;top:-.62em;left:-.1em;z-index:-1;
  color:rgba(216,240,244,.14);
  font:400 4.6em/1 var(--font-title);
  pointer-events:none;
}
.xd-quote__sign{
  color:var(--warm);
  font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}

/* == 12. SITUATIONS — une liste de faits, pas des cartes de plus == */
.xd-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,7vw,7rem)}
.xd-facts{border-top:1px solid var(--line)}
.xd-facts li{
  display:flex;flex-wrap:wrap;gap:.1rem .7rem;
  border-bottom:1px solid var(--line);
  padding:1.05rem .6rem;
  color:var(--muted);font-size:var(--fs-base);
  transition:background-color var(--t) var(--ease),padding-left var(--t) var(--ease);
}
.xd-facts li:hover{background:rgba(var(--line-tint),.04);padding-left:1.1rem}
.xd-facts b{min-width:7.5rem;color:var(--ink);font-weight:650}

/* == 13. FORMULAIRE ==
   Sans JavaScript : les messages du serveur sont visibles dès qu'ils sont dans
   le DOM. Rien ici ne dépend d'un script pour s'afficher. */
.xd-contact{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(2.5rem,7vw,6.5rem);align-items:start}
.xd-contact__copy{position:sticky;top:calc(var(--header-h) + var(--sp-5))}
.xd-contact__copy > p:not(.xd-eyebrow){margin-top:var(--sp-4);color:var(--muted);font-size:var(--fs-md)}

.xd-form{
  border:1px solid var(--line-strong);
  padding:clamp(1.25rem,3.5vw,2.6rem);
  background:rgba(7,11,13,.74);
  box-shadow:0 30px 90px rgba(0,0,0,.26);
}
.xd-form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.xd-field{margin-bottom:var(--sp-4)}
.xd-field__label{display:block;margin-bottom:.45rem;color:var(--ink-soft);font-size:var(--fs-sm);font-weight:600}
.xd-field__req{color:var(--warm)}
.xd-field__hint{margin-top:.35rem;color:var(--muted);font-size:var(--fs-xs)}
.xd-field__error{margin-top:.4rem;color:var(--danger);font-size:var(--fs-xs);font-weight:600}

.xd-input,.xd-select,.xd-textarea{
  width:100%;min-height:var(--tap);
  border:1px solid var(--line-field);border-radius:3px;
  padding:.7rem .85rem;
  background:#080d0f;color:var(--ink);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.xd-textarea{min-height:7rem;resize:vertical}
:is(.xd-input,.xd-select,.xd-textarea):hover{border-color:var(--line-hover)}
:is(.xd-input,.xd-select,.xd-textarea):focus{border-color:var(--ice);outline:0;box-shadow:0 0 0 3px rgba(128,182,196,.24)}
:is(.xd-input,.xd-select,.xd-textarea)[aria-invalid="true"]{border-color:var(--danger)}
::placeholder{color:var(--muted);opacity:.7}

/* Chevron du select, dessiné en SVG inline — aucune requête réseau */
.xd-select{
  appearance:none;padding-right:2.4rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23aebdc1' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;
}
.xd-select option{background:#0c1215;color:var(--ink)}

/* Piège à robots : ni vu par l'œil, ni annoncé par le lecteur d'écran */
.xd-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.xd-form__legal{margin-block:var(--sp-4);color:var(--muted);font-size:var(--fs-xs);line-height:1.6}
.xd-form__legal a{color:var(--ice);text-decoration:underline;text-underline-offset:.2em}

/* Envoi en cours : classe posée par xedria.js. Sans JS, jamais atteint. */
.xd-form.is-envoi{cursor:progress}
.xd-form.is-envoi .xd-btn{opacity:.6;pointer-events:none}

/* Retour serveur — affiché par défaut, jamais caché par du script */
.xd-alert{
  margin-bottom:var(--sp-5);
  border:1px solid currentColor;border-left-width:3px;
  padding:.85rem 1rem;
  font-size:var(--fs-sm);line-height:1.55;
}
.xd-alert:empty{display:none}   /* conteneur en attente d'un message : invisible */
.xd-alert--ok{color:var(--success);background:rgba(76,167,112,.09)}
.xd-alert--ko{color:var(--danger);background:rgba(210,85,75,.09)}
.xd-alert p{color:inherit}
.xd-alert a{color:inherit;text-decoration:underline}

/* == 14. PIED DE PAGE == */
.xd-footer{border-top:1px solid var(--line);padding:var(--sp-8) 0 var(--sp-5);background:var(--bg-deep);color:var(--muted)}
.xd-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--sp-7)}
.xd-footer__brand{display:flex;align-items:center;width:150px;min-height:var(--tap);margin-bottom:var(--sp-4)}
.xd-footer__brand img,.xd-footer__brand svg{width:100%;height:56px;object-fit:contain;object-position:left center}
.xd-footer__title{margin-bottom:.4rem;color:var(--ink);font-family:var(--font-title);font-weight:650}
.xd-footer__nav{display:flex;flex-direction:column;align-items:flex-start}
.xd-footer__nav a{display:inline-flex;align-items:center;min-height:var(--tap);transition:color var(--t) var(--ease)}
.xd-footer__nav a:hover{color:var(--ink)}
.xd-footer__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-4);
  margin-top:var(--sp-7);border-top:1px solid var(--line);padding-top:var(--sp-5);
  font-size:var(--fs-xs);
}

/* == 15. PAGES LÉGALES == */
.xd-legal__hero{
  padding:calc(var(--header-h) + var(--sp-7)) 0 var(--sp-7);
  border-bottom:1px solid var(--line);
  background:radial-gradient(60ch 40ch at 78% 6%, rgba(128,182,196,.12), transparent 55%), var(--panel);
}
.xd-legal__hero p:last-child{max-width:var(--max-text);margin-top:var(--sp-4);color:var(--muted);font-size:var(--fs-md)}
.xd-legal__body{display:grid;grid-template-columns:minmax(180px,240px) minmax(0,72ch);gap:clamp(2rem,6vw,5rem);padding:var(--sp-8) 0 var(--sp-8)}
.xd-legal__toc{
  position:sticky;top:calc(var(--header-h) + var(--sp-5));align-self:start;
  display:flex;flex-direction:column;
  border-left:1px solid var(--line);padding-left:1.1rem;
  color:var(--muted);font-size:var(--fs-sm);
}
.xd-legal__toc a{display:inline-flex;align-items:center;min-height:var(--tap);transition:color var(--t) var(--ease)}
.xd-legal__toc a:hover{color:var(--ink)}
.xd-legal__article > section{margin-bottom:var(--sp-8);scroll-margin-top:calc(var(--header-h) + 2rem)}
/* Colonne deja bornee a 72ch : le max-width en ch des titres ferait doublon
   et les couperait en deux lignes sans raison. */
.xd-legal__hero h1,.xd-legal__article h2{max-width:none}
.xd-legal__article h2{margin-bottom:var(--sp-4);font-size:var(--fs-xl)}
.xd-legal__article h3{margin-top:var(--sp-5);margin-bottom:var(--sp-2);font-size:var(--fs-base)}
.xd-legal__article :is(p,li){color:#c5d0d3}
.xd-legal__article ul:not([class]){margin:var(--sp-4) 0;padding-left:1.2rem;list-style:disc}
.xd-legal__article ul:not([class]) li{margin-bottom:.4rem}
.xd-legal__article a{color:var(--ice);text-decoration:underline;text-underline-offset:.2em}
.xd-legal__meta{color:var(--muted);font-size:var(--fs-xs)}
/* Mention « en cours de finalisation » — signalée, pas cachée */
.xd-pending{
  border:1px solid rgba(214,166,109,.42);border-left-width:3px;
  padding:var(--sp-4) var(--sp-5);
  background:rgba(214,166,109,.06);
  color:#e8d3b7!important;
}

/* == 16. RÉVÉLATION AU DÉFILEMENT ==
   Contrat avec l'agent E : le socle pose html.js. Sans script, tout est visible. */
.xd-reveal{opacity:1;transform:none}
html.js .xd-reveal{opacity:0;transform:translateY(22px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
html.js .xd-reveal.is-visible{opacity:1;transform:none}

/* == 17. RESPONSIVE ==
   Trois ruptures, chacune motivée par une bascule de mise en page réelle. */

/* --- ≤ 1024 px : deux colonnes, la nav se resserre --- */
@media (max-width:1024px){
  :root{--header-h:68px;--grid-step:38px}
  .xd-nav{gap:1rem}
  .xd-nav__link{font-size:var(--fs-xs)}
  .xd-header__cta{display:none}
  .xd-hero__inner{grid-template-columns:1fr;gap:var(--sp-6)}
  .xd-hero__card{max-width:34rem;padding:var(--sp-5)}
  .xd-hero__card .xd-check{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
  .xd-section__head--aside{grid-template-columns:minmax(0,1fr) minmax(140px,190px);gap:var(--sp-6)}
  .xd-cards--4{grid-template-columns:repeat(2,1fr)}
  .xd-cards--4 > .xd-card:nth-child(2n+1){border-left:0}
  .xd-cards--4 > .xd-card:nth-child(n+3){border-top:1px solid var(--line)}
  .xd-founder,.xd-contact,.xd-split{grid-template-columns:1fr}
  .xd-quote{min-height:18rem}
  .xd-contact__copy{position:static}
}

/* --- ≤ 768 px : une colonne, le menu passe en burger --- */
@media (max-width:768px){
  .xd-brand{width:108px}   /* le lien garde 44px de haut, seule l'image se reduit */
  .xd-brand img,.xd-brand svg{height:38px}

  /* La case à cocher : 48×48, invisible, posée exactement sur l'icône.
     C'est elle qui reçoit le clic ET le focus clavier. */
  .xd-burger__input{
    display:block;
    position:absolute;z-index:6;right:-6px;top:50%;
    width:48px;height:48px;margin:0;
    transform:translateY(-50%);
    opacity:0;cursor:pointer;
    -webkit-appearance:none;appearance:none;
  }
  .xd-burger{
    position:absolute;z-index:5;right:-6px;top:50%;
    width:48px;height:48px;
    display:grid;align-content:center;justify-items:center;gap:6px;
    transform:translateY(-50%);
    border:1px solid var(--line-field);border-radius:3px;
    background:rgba(7,10,12,.72);
    pointer-events:none;
  }
  .xd-burger i{
    display:block;width:20px;height:1px;
    background:var(--ink);
    transition:transform var(--t) var(--ease),opacity var(--t) var(--ease);
  }
  .xd-burger__input:focus-visible ~ .xd-burger{outline:3px solid var(--warm);outline-offset:3px}
  .xd-burger__input:checked ~ .xd-burger i:first-child{transform:translateY(7px) rotate(45deg)}
  .xd-burger__input:checked ~ .xd-burger i:nth-child(2){opacity:0}
  .xd-burger__input:checked ~ .xd-burger i:last-child{transform:translateY(-7px) rotate(-45deg)}

  /* Le voile : ferme le menu au clic à côté, sans une ligne de script */
  .xd-scrim{
    /* hauteur explicite : le backdrop-filter de .xd-header en fait le bloc
       conteneur des enfants position:fixed, donc « bottom:0 » ne vaut rien ici */
    position:fixed;z-index:1;inset:var(--header-h) 0 auto 0;height:100svh;
    display:block;
    background:rgba(4,7,9,.6);
    opacity:0;pointer-events:none;
    transition:opacity var(--t) var(--ease);
  }
  .xd-burger__input:checked ~ .xd-scrim{opacity:1;pointer-events:auto}

  /* Le panneau : fermé, il sort aussi du parcours de tabulation */
  .xd-nav{
    position:fixed;z-index:2;inset:var(--header-h) 0 auto;
    display:grid;gap:0;margin-left:0;
    border-bottom:1px solid var(--line);
    padding:.5rem var(--gutter) 1.1rem;
    background:rgba(7,10,12,.98);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    transform:translateY(-110%);
    opacity:0;visibility:hidden;
    transition:transform var(--t) var(--ease),opacity var(--t) var(--ease),visibility var(--t) var(--ease);
  }
  .xd-burger__input:checked ~ .xd-nav{transform:none;opacity:1;visibility:visible}
  .xd-nav__link{
    justify-content:flex-start;min-height:52px;
    border-bottom:1px solid var(--line);
    padding-inline:.2rem;
    color:var(--ink);font-size:var(--fs-base);
  }
  .xd-nav__link:last-child{border-bottom:0}
  .xd-nav__link::after{display:none}

  /* Mise en page */
  .xd-hero{padding-top:calc(var(--header-h) + var(--sp-6));padding-bottom:var(--sp-7)}
  /* Le texte occupe toute la largeur : le motif le traverserait. On l'éteint —
     la trame, les halos et le filet suffisent. Le SVG n'est alors pas chargé. */
  .xd-hero{--motif:none}
  .xd-hero__media::after{background:linear-gradient(180deg, rgba(5,8,10,.62), rgba(5,8,10,.76) 42%, rgba(5,8,10,.97) 84%)}
  .xd-hero__card{display:none}     /* redondant avec le corps sur petit écran */
  .xd-section__head--aside{grid-template-columns:1fr;gap:var(--sp-4)}
  .xd-section__aside{width:9.5rem;justify-self:center;margin-block:-.5rem}
  .xd-aside-note{grid-template-columns:1fr;gap:var(--sp-2)}
  .xd-cards--2{grid-template-columns:1fr}
  .xd-footer__grid{grid-template-columns:1.3fr 1fr 1fr;gap:var(--sp-5)}
  .xd-legal__body{grid-template-columns:1fr;gap:var(--sp-6);padding-block:var(--sp-7)}
  .xd-legal__toc{position:static;display:grid;grid-template-columns:repeat(2,1fr)}
}

/* Verrouillage du défilement quand le menu est ouvert. Amélioration
   progressive : sans :has(), la page défile derrière, sans autre conséquence. */
@supports selector(:has(*)){
  @media (max-width:768px){
    html:has(.xd-burger__input:checked){overflow:hidden}
  }
}

/* --- ≤ 520 px : tout en une colonne, les boutons prennent la largeur --- */
@media (max-width:520px){
  :root{--grid-step:32px}
  h1{max-width:none;line-height:1.02}
  h2{max-width:none}
  .xd-hero__actions{gap:.6rem}
  .xd-hero__actions .xd-btn{width:100%}
  .xd-cards--4{grid-template-columns:1fr}
  .xd-cards--4 > .xd-card{border-left:0}
  .xd-cards--4 > .xd-card + .xd-card{border-top:1px solid var(--line)}
  .xd-card{min-height:15rem;padding:var(--sp-5)}
  .xd-card__title{padding-top:var(--sp-6)}
  .xd-form__row{grid-template-columns:1fr;gap:0}
  .xd-quote{min-height:16rem}
  .xd-facts b{min-width:100%}
  .xd-footer__grid{grid-template-columns:1fr}
  .xd-footer__bottom{flex-direction:column;gap:.4rem}
  .xd-legal__toc{grid-template-columns:1fr}
}

/* --- Très grands écrans : on plafonne, on ne dilate pas --- */
@media (min-width:1600px){
  :root{--max:1240px}
}

/* --- Écrans courts en paysage : le hero ne doit pas forcer un plein écran --- */
@media (max-height:560px) and (orientation:landscape){
  .xd-hero{min-height:0;padding-block:calc(var(--header-h) + var(--sp-5)) var(--sp-6)}
}

/* == 18. MOUVEMENT RÉDUIT · IMPRESSION == */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  html.js .xd-reveal{opacity:1;transform:none}
  .xd-btn:hover{transform:none}
  .xd-card:hover{transform:none}
}

@media print{
  .xd-header,.xd-scrim,.xd-burger,.xd-burger__input,.xd-skip,.xd-section__aside{display:none!important}
  body{background:#fff;color:#000}
  .xd-section,.xd-card,.xd-quote{background:#fff!important;color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}