/* LIA — site vitrine liapharma.fr
   Charte « Direction 1 — Startup IA » (planche de Nicolas, retenue le 23/09) :
   moderne, colorée, dynamique. Remplace l'identité Eucalyptus sobre.

   Toujours AUCUNE dépendance externe : la police est hébergée ici, pas appelée
   chez Google. Un site qui affiche « Conforme RGPD » ne peut pas envoyer l'IP de
   ses visiteurs à un tiers pour afficher un titre (cf. assets/fonts/LICENCE.txt). */

/* Police VARIABLE : un seul fichier par sous-ensemble couvre tous les poids,
   au lieu de quatre. 49 Ko pour les deux latins. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-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;
}

:root {
  /* Le site reste clair quoi que demande le systeme (cf. bas de fichier). */
  color-scheme: light;

  /* Palette de la planche, valeurs exactes. */
  --vert:    #188889;
  --violet:  #7357FF;
  --jaune:   #FFD84D;
  --corail:  #FF7966;
  --encre:   #17243D;
  --creme:   #FAF9F4;

  /* Déclinaisons dérivées de la palette, pas d'autres teintes introduites. */
  --vert-fonce:  #0f6667;
  --vert-pale:   #e7f3f3;
  /* Menthe des grands panneaux de la maquette : hero, bandeau d'atouts,
     carte citation. Plus grise que --vert-pale, pour rester un fond. */
  --menthe:      #eaf2ee;
  --menthe-bord: #dbe8e1;
  --violet-pale: #efecff;
  --jaune-pale:  #fff7db;
  --corail-pale: #ffecea;

  --ink: var(--encre);
  --ink-soft: #5a6880;
  --line: #e4e2da;
  --bg: #ffffff;
  --bg-alt: var(--creme);
  --radius: 18px;
  --radius-sm: 12px;
  --wrap: 1120px;
  --ombre: 0 18px 44px rgba(23, 36, 61, .10);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

a { color: var(--vert); }
h1, h2, h3 { line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.12rem; font-weight: 700; }
p  { margin: 0 0 1em; }
.lead { font-size: 1.16rem; color: var(--ink-soft); }
/* Le second membre du titre passe en vert : c'est l'accent de la maquette. */
.accent { color: var(--vert); }

/* --- En-tête ------------------------------------------------------------ */
header.site {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
header.site .wrap { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand {
  display: flex; align-items: baseline; gap: 2px; text-decoration: none;
  font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; color: var(--vert);
}
.brand .spark { color: var(--jaune); font-size: .6em; vertical-align: super; }
nav.main { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.nav-toggle { display: none; }
.burger { display: none; margin-left: auto; cursor: pointer; padding: 10px; }
.burger span { display: block; width: 22px; height: 2px; background: var(--encre); margin: 5px 0; border-radius: 2px; }
nav.main a { color: var(--ink-soft); text-decoration: none; font-size: .95rem; font-weight: 500; }
nav.main a:hover { color: var(--vert); }
/* `nav.main a` (0,1,2) l'emporte sur `.btn-primary` (0,1,0) : sans cette règle,
   le bouton « Se connecter » héritait du gris des liens et devenait illisible
   sur son fond violet. Constaté en capture le 23/09. */
nav.main a.btn-primary, nav.main a.btn-primary:hover { color: #fff; }
nav.main a.btn-ghost { color: var(--encre); }

/* --- Boutons ------------------------------------------------------------ */
.btn {
  display: inline-block; padding: 13px 24px; border-radius: 999px;
  font-weight: 700; text-decoration: none; font-size: 1rem;
  border: 1px solid transparent; transition: transform .12s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
/* Le bouton principal est VIOLET : c'est ce qui distingue la Direction 1 des
   deux autres, où tout était vert. */
.btn-primary { background: var(--violet); color: #fff; }
.btn-primary:hover { background: #5f43e8; }
.btn-ghost { border-color: var(--line); color: var(--encre); background: #fff; }
.btn-ghost:hover { border-color: var(--violet); color: var(--violet); }
.btn-sm { padding: 10px 18px; font-size: .93rem; }
.btn .fleche { margin-left: 6px; }

/* --- Sections ----------------------------------------------------------- */
section { padding: 84px 0; }
section.alt { background: var(--bg-alt); }
/* Le bandeau d'atouts suit le panneau du hero de près dans la planche : les
   deux se lisent comme un seul bloc d'entrée. */
.hero + section { padding-top: 30px; }
.section-head { max-width: 700px; margin-bottom: 48px; }

/* Le hero de la maquette est un PANNEAU MENTHE ARRONDI pose sur du blanc, et
   non un fond pleine largeur. C'est ce qui lui donne son air de carte, et ce
   qui laisse respirer le blanc autour. */
.hero { padding: 28px 0 56px; background: var(--bg); }
.hero-panneau {
  position: relative; overflow: hidden;
  background: var(--menthe); border-radius: 28px; padding: 54px 48px 48px;
}
/* Trame de points en haut a droite, comme dans la planche. */
.hero-panneau::after {
  content: ""; position: absolute; top: 34px; right: 34px;
  width: 150px; height: 96px; pointer-events: none;
  background-image: radial-gradient(var(--vert) 1.6px, transparent 1.6px);
  background-size: 15px 15px; opacity: .22;
}
/* Etincelle jaune entre les deux colonnes. */
.etincelle { color: var(--jaune); font-size: 1.6rem; line-height: 1; }
/* Étincelle décorative, calée dans le blanc à DROITE de la première ligne du
   titre. Ses valeurs dépendent de la longueur de cette ligne : elle tombait sur
   le « é » de « réponse » quand l'accroche est passée sur deux lignes larges.
   À retoucher si le titre change — la vérification se fait à l'œil, ou avec
   tools/captures-site. */
.hero-etincelle { position: absolute; left: 50%; top: 58px; transform: translateX(-58px); }
.hero .lead { max-width: 600px; }
/* 1.2/.8 et non 1.05/.95 : l'accroche « Et si chaque question / trouvait votre
   réponse ? » se coupe en DEUX, et sa moitié la plus longue réclame la place.
   À l'ancien partage elle repassait à la ligne d'elle-même, et le titre tombait
   en quatre lignes — illisible, et l'effet de l'accroche perdu. */
.hero-cols { display: grid; grid-template-columns: 1.2fr .8fr; gap: 52px; align-items: center; }
/* Titre du hero plus mesuré que le h1 générique (jusqu'à 3.4rem) : ici il
   partage la largeur avec la capture, et doit tenir en deux lignes. */
.hero h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
/* Nuance du hero : la limite de périmètre, sous l'accroche.
   Volontairement plus discrète que le chapô — deux paragraphes de même poids
   dilueraient l'accroche, alors que c'est elle qu'on vient lire. */
.hero-nuance { font-size: 1rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-note { margin-top: 22px; font-size: .9rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 18px; }
.hero-note span { display: inline-flex; align-items: center; gap: 6px; }

/* --- Capture réelle de l'application (hero) ------------------------------
   Une vraie capture plutôt qu'une maquette dessinée : elle montre ce que LIA
   répond réellement, y compris quand elle met en garde. C'est plus convaincant
   qu'un écran idéalisé, et ça ne vieillit pas en mensonge. */
.app-capture { margin: 0; }
.app-capture img {
  display: block; width: 100%; height: auto;
  border-radius: 18px; box-shadow: var(--ombre);
  border: 1px solid var(--line); background: #fff;
}
.app-capture figcaption {
  margin-top: 10px; font-size: .78rem; color: var(--ink-soft); text-align: right;
}

/* --- Grilles et cartes --------------------------------------------------- */
.grid { display: grid; gap: 26px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px;
}
.card p:last-child { margin-bottom: 0; }

/* Bandeau des quatre arguments : panneau MENTHE, une pastille carree arrondie
   par argument, dans l'ordre vert / violet / jaune / corail de la planche. */
.atouts { background: var(--menthe); border-radius: 22px; padding: 30px; }
.atout { display: flex; gap: 14px; align-items: flex-start; }
.atout .puce {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; font-size: 1.2rem; background: #fff;
}
.atout:nth-child(1) .puce { background: var(--vert-pale); }
.atout:nth-child(2) .puce { background: var(--violet-pale); }
.atout:nth-child(3) .puce { background: var(--jaune-pale); }
.atout:nth-child(4) .puce { background: var(--corail-pale); }
.atout strong { display: block; font-weight: 700; margin-bottom: 2px; }
.atout p { margin: 0; font-size: .92rem; color: var(--ink-soft); }

/* Les quatre étapes de la maquette : une PASTILLE NUMEROTEE de couleur, une
   grande rondelle claire portant l'icone, et un FILET POINTILLE qui relie le
   tout — c'est lui qui dit « suite d'etapes » plutot que « quatre cartes ». */
.etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.etapes::before {
  content: ""; position: absolute; top: 46px; left: 12%; right: 12%;
  border-top: 2px dashed var(--menthe-bord); z-index: 0;
}
.etape { position: relative; z-index: 1; text-align: center; }
.etape .num {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  color: #fff; font-weight: 800; font-size: .78rem; margin: 0 auto 10px;
}
.etape .rondelle {
  width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 14px;
  display: grid; place-items: center; font-size: 1.6rem; background: var(--menthe);
  border: 6px solid var(--bg);
}
.etape h3 { font-size: 1rem; margin-bottom: .35em; }
.etape p { font-size: .88rem; color: var(--ink-soft); margin: 0; }
.etape:nth-child(1) .num { background: var(--vert); }
.etape:nth-child(2) .num { background: var(--violet); }
.etape:nth-child(3) .num { background: var(--jaune); color: var(--encre); }
.etape:nth-child(4) .num { background: var(--corail); }

/* Carte citation, à droite des étapes dans la maquette. */
.citation {
  background: var(--menthe); border-radius: 20px; padding: 26px;
  font-size: 1.02rem; position: relative;
}
.citation .guillemet { color: var(--vert); font-size: 1.8rem; line-height: 1; display: block; margin-bottom: 6px; }
.citation strong { color: var(--vert); display: block; margin-bottom: 8px; }
.demarche { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; }

/* Mascotte — bulle verte avec ses yeux et son point violet. */
.mascotte { display: block; }
.mascotte-hero { position: absolute; right: 22px; bottom: 18px; width: 92px; }

/* --- Tarifs -------------------------------------------------------------- */
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
.price {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; background: #fff;
  display: flex; flex-direction: column;
}
.price.featured { border: 2px solid var(--vert); box-shadow: var(--ombre); }
.price .tag { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--vert); font-weight: 800; }
.price.featured .tag { color: var(--violet); }
.price .amount { font-size: 2.4rem; font-weight: 800; color: var(--encre); line-height: 1.1; margin: 10px 0 2px; letter-spacing: -.03em; }
.price .amount span { font-size: .95rem; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }
.price .pitch { color: var(--ink-soft); font-size: .92rem; }
.price ul { list-style: none; padding: 0; margin: 16px 0 22px; }
.price li { padding-left: 24px; position: relative; margin-bottom: 9px; font-size: .93rem; }
.price li::before { content: "✓"; position: absolute; left: 0; color: var(--vert); font-weight: 800; }
.price .btn { margin-top: auto; text-align: center; }
.price-note { margin-top: 26px; font-size: .92rem; color: var(--ink-soft); }
/* Tableau des recharges. */
.recharges { width: 100%; border-collapse: collapse; margin-top: 30px; font-size: .94rem; background: #fff; border-radius: var(--radius); overflow: hidden; }
.recharges th, .recharges td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.recharges thead th { background: var(--vert); color: #fff; font-weight: 700; }
.recharges tbody tr:last-child td { border-bottom: 0; }

/* --- Divers -------------------------------------------------------------- */
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 1.03rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; color: var(--violet); font-weight: 800; margin-right: 12px; }
.faq details[open] summary::before { content: "−"; }
.faq details p { margin: 12px 0 0; color: var(--ink-soft); }

.callout {
  background: var(--encre); color: #c3ccdb; border-radius: 22px;
  padding: 48px 40px; text-align: center;
}
.callout h2 { color: #fff; }
.callout .btn-primary { background: var(--vert); }
.callout .btn-primary:hover { background: var(--vert-fonce); }

/* Bandeau de réassurance, juste au-dessus du pied de page. */
.reassurance { background: var(--encre); color: #c3ccdb; padding: 18px 0; font-size: .9rem; }
.reassurance .wrap { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; justify-content: center; }
.reassurance span { display: inline-flex; align-items: center; gap: 7px; }

footer.site { background: var(--encre); color: #97a3b8; padding: 48px 0 34px; font-size: .93rem; border-top: 1px solid rgba(255,255,255,.10); }
footer.site a { color: #d9e0ea; text-decoration: none; }
footer.site a:hover { text-decoration: underline; }
footer.site .cols { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; }
footer.site .legal { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); font-size: .86rem; }

/* Pages de contenu (mentions, CGV, confidentialité) */
.doc { padding: 56px 0 76px; max-width: 780px; }
.doc h2 { margin-top: 2em; }
.doc table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: .95rem; }
.doc th, .doc td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.doc th { background: var(--bg-alt); }
.todo {
  background: var(--jaune-pale); border: 1px solid #e8d9a8; border-left: 4px solid var(--jaune);
  padding: 14px 18px; border-radius: var(--radius-sm); margin: 1em 0; font-size: .95rem;
}

@media (max-width: 1000px) {
  .price-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .demarche { grid-template-columns: 1fr; }
  .etapes { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .etapes::before { display: none; }
}

@media (max-width: 860px) {
  .grid-3, .grid-2, .grid-4, .price-grid { grid-template-columns: 1fr; }
  .hero-panneau { padding: 34px 22px 30px; border-radius: 22px; }
  .hero-panneau::after, .hero-etincelle, .mascotte-hero { display: none; }
  section { padding: 56px 0; }
  .hero-cols { grid-template-columns: 1fr; gap: 36px; }
  /* Menu replié derrière un burger (case à cocher, sans JS obligatoire).
     Sous 860 px la navigation avait entièrement disparu avant le correctif
     15131 : ne pas réintroduire le défaut en retouchant ce bloc. */
  .burger { display: block; }
  nav.main {
    display: none; position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 8px 24px 16px;
  }
  nav.main a { padding: 12px 0; font-size: 1.05rem; }
  nav.main a.btn { margin-top: 8px; text-align: center; }
  .nav-toggle:checked ~ nav.main { display: flex; }
}

/* --- Pas de mode sombre ----------------------------------------------------
   VOULU, et c'est un changement par rapport a l'ancien site. Celui-ci suivait
   le theme du systeme, pour ne pas rompre avec l'application au passage de
   l'un a l'autre. Mais la charte Direction 1 est un design CLAIR : fond creme
   et blanc, panneaux menthe, accents colores. Le traduire en sombre donnait
   une autre identite — celle que Seb ne cessait de me signaler, trois fois de
   suite, pendant que je me contentais d'en corriger la nuance.

   Une vitrine se regarde quelques minutes et doit ressembler a sa charte ;
   l'application se regarde toute la journee et garde, elle, son mode sombre.
   `color-scheme: light` empeche en plus le navigateur d'assombrir de lui-meme
   les champs de formulaire des pages legales. */

/* --- Lecteur de démonstrations -------------------------------------------
   Les deux vidéos ne se chargent qu'au clic (cf. le script d'index.html) : la
   page d'accueil ne pèse que son GIF. Les onglets reprennent les pastilles du
   comptoir, pour que la démonstration ressemble à l'outil qu'elle montre. */

/* Le GIF devient un bouton : rien ne doit trahir qu'il l'est, sauf le voile
   de lecture qui apparaît au survol. */
.app-capture-declencheur {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: pointer; position: relative; border-radius: 18px; overflow: hidden;
  line-height: 0;
}
.app-capture-declencheur:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.app-capture-lecture {
  position: absolute; inset: 0; display: flex; gap: 10px;
  align-items: center; justify-content: center;
  background: rgba(23, 36, 61, .55); color: #fff;
  font-family: inherit; font-weight: 700; font-size: 1rem; line-height: 1.4;
  opacity: 0; transition: opacity .18s ease;
}
.app-capture-declencheur:hover .app-capture-lecture,
.app-capture-declencheur:focus-visible .app-capture-lecture { opacity: 1; }

.lecteur[hidden] { display: none; }
.lecteur { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; }
.lecteur-voile { position: absolute; inset: 0; background: rgba(23, 36, 61, .72); backdrop-filter: blur(3px); }
.lecteur-boite {
  position: relative; background: var(--bg); border-radius: 22px;
  padding: 16px; max-width: 860px; width: 100%;
  max-height: calc(100vh - 48px); overflow: auto;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}
.lecteur-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.lecteur-onglets { display: flex; flex-wrap: wrap; gap: 8px; }
.lecteur-onglet {
  font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-soft);
}
.lecteur-onglet em { font-style: normal; font-weight: 500; opacity: .7; margin-left: 6px; }
.lecteur-onglet:hover { border-color: var(--vert); color: var(--vert); }
.lecteur-onglet.actif { background: var(--menthe); border-color: var(--vert); color: var(--vert); }
.lecteur-fermer {
  margin-left: auto; font: inherit; font-size: 1.1rem; cursor: pointer;
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-soft);
}
.lecteur-fermer:hover { border-color: var(--corail); color: var(--corail); }
.lecteur video {
  display: block; width: 100%; height: auto; border-radius: 14px;
  background: #000; max-height: 68vh;
}
.lecteur-legende { margin: 12px 2px 0; font-size: .9rem; color: var(--ink-soft); }

@media (max-width: 620px) {
  .lecteur { padding: 12px; }
  .lecteur-boite { padding: 12px; border-radius: 16px; }
  .lecteur-onglet { font-size: .84rem; padding: 8px 13px; }
  .lecteur-onglet em { display: none; }
}

/* --- Bandeau de faits sous le hero ----------------------------------------
   Remplace les pastilles à emoji. Des faits vérifiables plutôt que des
   adjectifs : « 100 % sécurisé » ne se vérifie pas, « hébergement en France »
   se vérifie. Remarque de Nicolas, 25/09 — et il avait raison : le site
   affichait deux affirmations absolues que les mentions légales, encore
   marquées « à compléter », ne soutenaient pas. */
.faits {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin: 24px 0 0; padding: 0; list-style: none;
}
.faits li {
  font-size: .84rem; color: var(--vert-fonce); background: var(--bg);
  border: 1px solid var(--menthe-bord); border-radius: 999px; padding: 6px 14px;
}

/* --- [B] Les registres d'usage --------------------------------------------
   Chaque carte s'ouvre sur une phrase réellement entendue au comptoir : c'est
   la question qui identifie le besoin, pas le nom du module. */
.registres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.registre {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; background: var(--bg);
}
.registre .quoi {
  display: inline-block; font-size: .72rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--vert); margin-bottom: 14px;
}
.registre .dit {
  font-size: 1.1rem; line-height: 1.45; color: var(--encre);
  border-left: 2px solid var(--vert); padding-left: 16px; margin: 0 0 16px;
}
.registre p:last-of-type { margin-bottom: 0; color: var(--ink-soft); font-size: .95rem; }
/* Les registres pas encore livrés : même carte, tenue en retrait. Annoncer une
   feuille de route est plus solide que promettre. */
.registre.venir { background: var(--bg-alt); border-style: dashed; }
.registre.venir .quoi { color: var(--ink-soft); }
.registre.venir .dit { color: var(--ink-soft); border-left-color: var(--line); }
.registre .quand {
  display: block; margin-top: 14px; font-size: .82rem;
  color: var(--ink-soft); font-style: italic;
}
@media (max-width: 860px) { .registres { grid-template-columns: 1fr; } }

/* --- [C] L'argument d'autonomie -------------------------------------------
   Quatre profils dans une grille jointive : c'est UNE équipe, pas quatre
   cartes indépendantes. */
.profils {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--bg);
}
.profils > div { padding: 26px 28px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.profils > div:nth-child(-n+2) { border-top: 0; }
.profils > div:nth-child(odd) { border-left: 0; }
.profils h3 { color: var(--encre); }
.profils p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
/* La phrase qui borne l'autonomie. Elle est centrée et large : c'est la seule
   de la page qu'un titulaire doit lire en entier. */
.pivot {
  margin: 40px auto 0; max-width: 44rem; text-align: center;
  font-size: 1.16rem; line-height: 1.5; color: var(--encre);
}
.pivot strong { color: var(--vert); }
@media (max-width: 860px) {
  .profils { grid-template-columns: 1fr; }
  .profils > div { border-left: 0; border-top: 1px solid var(--line); }
  .profils > div:first-child { border-top: 0; }
}

/* --- [D] Le périmètre, en deux registres ----------------------------------
   Le volet « conseil » est visuellement plus contraint que le volet
   « documentation » : la différence de traitement dit la différence de
   périmètre avant même qu'on ait lu. */
.deux-perimetres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-bottom: 24px; }
.perim { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; background: var(--bg); }
.perim.strict { border-color: var(--vert); background: var(--menthe); }
.perim .pour {
  font-size: .72rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--vert); margin: 0 0 10px;
}
.perim ul { margin: 14px 0 0; padding-left: 18px; }
.perim li { margin-bottom: 9px; font-size: .95rem; color: var(--ink-soft); }
.perim li:last-child { margin-bottom: 0; }
.perim li b { color: var(--encre); font-weight: 700; }
/* Le garde-fou réglementaire : un filet vert à gauche, pour qu'on le lise
   comme une note de cadrage et non comme un paragraphe de plus. */
.garde {
  border: 1px solid var(--line); border-left: 3px solid var(--vert);
  border-radius: var(--radius); padding: 22px 26px; background: var(--bg);
}
.garde p { margin: 0; color: var(--ink-soft); }
.garde p + p { margin-top: 10px; }
.garde b { color: var(--encre); }
@media (max-width: 860px) { .deux-perimetres { grid-template-columns: 1fr; } }