/* ==========================================================================
   Drood — vitrine
   Palette de marque v1.3, recollationnée sur marque/04-couleur/drood-palette.css.
   Le logo est monochrome : encre sur fond clair, sable sur fond sombre. Le lagon
   sert aux surfaces et aux accents, jamais au logo — et JAMAIS sur fond sombre,
   où son contraste tombe à 3,1 : c'est le lagon clair qui y travaille (7,7).
   Aucune ressource distante : les polices sont auto-hébergées.
   ========================================================================== */

@font-face{font-family:Nunito;font-style:normal;font-weight:400;font-display:swap;
  src:url(/polices/nunito-400.woff2) format("woff2")}
@font-face{font-family:Nunito;font-style:normal;font-weight:800;font-display:swap;
  src:url(/polices/nunito-800.woff2) format("woff2")}

/* LES SIX VALEURS DE MARQUE, INCHANGÉES.
   Elles ne servent pas la page : elles servent les aperçus d'interface, qui
   reproduisent des écrans réels et gardent donc leurs couleurs à eux — le
   terminal sur le sable, le téléphone du convive, le tunnel. Y toucher pour
   habiller la page aurait repeint les captures avec. */
:root{
  --encre:#131C1B; --lagon:#0E6F62; --lagon-clair:#57B7A6;
  --ecume:#E1EDEA; --sable:#F2F2EE; --nuit:#0E1413;
  --encre-2:#3A4746; --encre-3:#6B7877; --trait:#D8D8D2;

  /* LES RÔLES DE LA PAGE : LE SITE EST EN NUIT.
     Le lagon ne peut pas y servir d'encre — 3,1 contre le fond nuit — donc
     l'accent est le lagon clair, qui vaut 7,7. C'est la même bascule que le
     tunnel opère dans « .tn--nuit », et pour la même raison. Le lagon plein
     reste employé, mais en APLAT : la bande « votre plage reste votre plage »
     est un aplat lagon, et du texte clair posé dessus est autorisé.
     Les quatre gris sont dérivés du nuit, pas empruntés : un gris neutre sur un
     fond légèrement vert se voit rose. */
  --fond:var(--nuit); --fond-2:#121A18; --fond-3:#101E1B; --surface:#17211F;
  --texte:var(--sable); --doux:#C4CECC; --faible:#95A29F;
  --accent:var(--lagon-clair); --accent-fond:#123029; --bord:#28352F;

  --ui:Nunito,-apple-system,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,Menlo,monospace;
  --mesure:34rem; --large:1140px;
}
*{box-sizing:border-box}
/* Le schéma de couleurs se DÉCLARE, il ne se déduit pas du fond qu'on peint.
   Sans cette ligne, la page est sombre et le navigateur dessine encore les
   barres de défilement, le curseur de saisie et les contrôles natifs habillés
   pour le clair : rien dans la feuille n'a l'air fautif, et pourtant une barre
   blanche borde une page noire. */
html{scroll-behavior:smooth;color-scheme:dark}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--fond);color:var(--texte);font-family:var(--ui);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.wrap{max-width:var(--large);margin:0 auto;padding:0 30px}
.mesure{max-width:var(--mesure)}
.sr{position:absolute;left:-9999px}
/* ET IL DOIT SE VOIR QUAND IL REÇOIT LE FOCUS.
   « Aller au contenu » est la PREMIÈRE tabulation de la page. Posé à
   -9999 px sans retour au focus, il envoie le premier geste clavier de chaque
   visiteur dans le vide : le focus est quelque part, rien ne bouge à l'écran,
   et la personne croit que la page ne répond pas. Le lien existait donc pour
   les lecteurs d'écran et contre tous les autres. */
.sr:focus{position:fixed;left:14px;top:14px;width:auto;height:auto;z-index:100;
  background:var(--accent);color:var(--nuit);padding:13px 20px;border-radius:6px;
  font-weight:800;text-decoration:none;
  box-shadow:0 10px 34px -12px rgba(0,0,0,.75)}
.oeil{font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--accent);
  font-weight:800;margin:0 0 16px}

/* ---------- verrou ---------- */
/* L'AIRE DE PROTECTION EST DANS LE DESSIN, ET C'EST NOUVEAU.
   Le cadrage employé est celui du fichier de marque en négatif — il porte les
   16,93 unités de garde sur les quatre côtés, soit 0,25 fois la hauteur du
   symbole. La hauteur CSS cadre donc la BOÎTE, pas le symbole : à 54 px de
   boîte, le symbole en fait 36, ce qu'il faisait avant. Le facteur est
   101,55 / 67,70 = 1,5 — toute nouvelle taille se calcule ainsi, sans quoi on
   croit poser un logo de 36 px et on en pose un de 24.

   CE QUI ÉTAIT CASSÉ. Le dessin vivait dans un « symbol » qui portait le même
   viewBox que les « svg » qui l'affichent. Un « use » sur un « symbol » crée un
   viewport de plus : le cadrage s'appliquait DEUX FOIS, une fois pour cadrer et
   une fois pour translater, et le dessin sortait de sa boîte par le haut. Les
   antennes étaient coupées et le « d » final rogné, sur fond clair comme sur
   fond sombre — cela ne s'est vu qu'en nuit, où la forme claire saute aux yeux.
   Le dessin est donc dans un « g » : un « use » sur un groupe ne crée aucun
   viewport, les coordonnées passent telles quelles, et le seul cadrage est
   celui de l'svg qui l'affiche.

   Aire de protection : 0,25 x la hauteur du symbole. Rien n'y entre.

   LA HAUTEUR N'EST PAS UN RÉGLAGE DE MISE EN PAGE. Dans le verrou, la hauteur
   du bloc EST celle du symbole. À 27 px, les antennes tombent à 2,1 px et la
   queue à 1,5 : le dessin se referme en tache, et Droody cesse d'être
   reconnaissable — c'est exactement ce que la charte prévient en posant un
   plancher de 24 px au symbole. 36 px donne 2,8 px d'antenne et 2,0 de queue :
   la silhouette tient. Ne descendez pas en dessous de 34 px sur fond clair.
   S'il faut plus petit, ce n'est plus le verrou qu'il faut : c'est l'icône
   (coupe petite taille), qui est le même dessin regraissé pour survivre. */
.verrou{display:inline-flex;align-items:center;color:var(--texte);text-decoration:none}
.verrou svg{height:54px;width:auto;display:block}   /* symbole 36 px */
footer.pied .verrou svg{height:51px}                /* symbole 34 px */
@media (max-width:520px){.verrou svg{height:48px}}  /* symbole 32 px */

/* ---------- en-tête ---------- */
header.haut{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--fond) 92%,transparent);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--bord)}
.bar{display:flex;align-items:center;gap:22px;min-height:72px}
nav.principale{margin-left:auto;display:flex;align-items:center;gap:24px}
nav.principale a.lien{font-size:14.5px;font-weight:800;color:var(--doux);text-decoration:none;
  padding:6px 0;white-space:nowrap}
nav.principale a.lien:hover{color:var(--accent)}
@media (max-width:860px){nav.principale a.lien{display:none}}
/* ---------- le menu « Découvrir » ---------- */
/* Le bandeau portait cinq liens plats pour douze pages : quatre pages de fond
   n'y figuraient pas du tout, et le sommaire de pastilles qui les portait est
   réservé au téléphone. Un panneau groupe les cinq pages de fond avec, pour
   chacune, la ligne qui dit ce qu'on y trouve. Les pages de référencement
   restent au pied : elles répondent à une question posée à un moteur, pas à une
   étape du parcours. */
.menu{position:relative;display:flex;align-items:center}
.menu-b{display:inline-flex;align-items:center;gap:7px;min-height:24px;
  padding:6px 0;border:0;background:none;cursor:pointer;
  font-family:var(--ui);font-size:14.5px;font-weight:800;color:var(--doux);
  white-space:nowrap}
.menu-b:hover,.menu-b[aria-expanded="true"]{color:var(--accent)}
/* Le chevron dit l'état ; il n'est pas décoratif, il tourne. */
.menu-b::after{content:"";width:6px;height:6px;margin-top:-3px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .15s ease}
.menu-b[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:2px}
.menu-p{position:absolute;top:calc(100% + 15px);right:-14px;z-index:60;
  width:min(88vw,392px);padding:9px;
  background:var(--fond-2);border:1px solid var(--bord);border-radius:12px;
  box-shadow:0 26px 64px -26px rgba(0,0,0,.9)}
.menu-p a{display:block;padding:11px 13px;border-radius:8px;
  text-decoration:none;color:var(--texte)}
.menu-p a:hover{background:var(--surface)}
.menu-p a[aria-current="page"]{background:var(--surface)}
.menu-p a[aria-current="page"] b{color:var(--accent)}
.menu-p b{display:block;font-size:15px;font-weight:800;line-height:1.25}
.menu-p span{display:block;margin-top:3px;font-size:13.5px;font-weight:400;
  line-height:1.4;color:var(--doux)}
/* Sous 860 px c'est le sommaire de pastilles qui navigue, et le bouton
   disparaît. La règle vient APRÈS la définition de « .menu » : à spécificité
   égale, la dernière l'emporte — posée avant, elle ne s'appliquait pas. */
@media (max-width:860px){.menu{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--ui);
  font-weight:800;font-size:15px;padding:11px 20px;border-radius:4px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;transition:transform .12s ease,background .15s ease}
/* Un bouton lagon sur fond nuit ne se détache pas : 3,1. Le bouton principal
   porte donc le lagon clair, avec l'encre nuit dessus — 7,7 dans les deux sens. */
.btn-p{background:var(--lagon-clair);color:var(--nuit)}
.btn-p:hover{background:#7CCBBC;transform:translateY(-1px)}
.btn-s{border-color:var(--bord);color:var(--texte);background:var(--surface)}
.btn-s:hover{border-color:var(--accent);color:var(--accent)}
.btn-h{border-color:rgba(242,242,238,.34);color:#F2F2EE;background:transparent}
.btn-h:hover{border-color:#F2F2EE;background:rgba(242,242,238,.06)}

/* barre d'action, téléphone seulement */
.cta-mobile{display:none}
@media (max-width:860px){
  .cta-mobile{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 16px;
    background:color-mix(in srgb,var(--fond) 95%,transparent);backdrop-filter:blur(8px);
    border-top:1px solid var(--bord);transform:translateY(115%);transition:transform .22s ease;
    pointer-events:none}
  .cta-mobile.on{transform:none;pointer-events:auto}
  .cta-mobile .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){.cta-mobile{transition:none}}

/* ---------- sections ---------- */
section{padding:76px 0}
.f2{background:var(--fond-2);border-top:1px solid var(--bord);border-bottom:1px solid var(--bord)}
.fe{background:var(--fond-3);border-top:1px solid var(--bord);border-bottom:1px solid var(--bord)}
h1,h2,h3,h4{text-wrap:balance}
h2{font-size:clamp(28px,3.5vw,39px);line-height:1.12;letter-spacing:-.022em;font-weight:800;
  margin:0 0 16px;max-width:24ch}
h2.l{max-width:31ch}
h1.l{max-width:31ch}
.intro{font-size:17.5px;color:var(--doux);max-width:var(--mesure);margin:0 0 8px}

/* ---------- hero ---------- */
.hero{padding:74px 0 6px}
.hero-g{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:52px;align-items:start}
h1{font-size:clamp(37px,4.4vw,54px);line-height:1.05;letter-spacing:-.028em;font-weight:800;margin:0 0 22px}
.brd{display:none}
@media (min-width:901px){.brd{display:inline}}
.def{font-size:19px;color:var(--doux);margin:0 0 18px;max-width:36rem}
.def b{color:var(--texte);font-weight:800}
.sous{font-size:17px;color:var(--faible);margin:0 0 30px;max-width:34rem}
.sous u{text-decoration-color:var(--accent);text-underline-offset:3px}
.actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- plan de plage (schéma) ---------- */
.plan{background:var(--surface);border:1px solid var(--bord);border-radius:6px;padding:20px 20px 16px;
  box-shadow:0 1px 2px rgba(19,28,27,.05),0 12px 34px -22px rgba(19,28,27,.35)}
.plan-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.plan-t .l{font-size:13px;font-weight:800}
.plan-t .h{font-family:var(--mono);font-size:12px;color:var(--faible)}
.rang{display:grid;grid-template-columns:16px repeat(14,1fr);gap:4px;align-items:center;margin-bottom:4px}
.rang .r{font-family:var(--mono);font-size:10.5px;color:var(--faible)}
.pl{aspect-ratio:1/1.3;border-radius:2px;border:1.25px solid var(--bord);position:relative;
  opacity:0;animation:pop .4s ease forwards}
@keyframes pop{to{opacity:1}}
.pl.occ{background:var(--accent-fond);border-color:var(--accent)}
.pl.cmd{background:var(--accent);border-color:var(--accent)}
.pl.cmd::after{content:"";position:absolute;inset:auto 0 2px 0;margin:auto;width:5px;height:5px;
  border-radius:50%;background:var(--surface)}
.pl.cible{border-color:var(--texte);border-width:2px;background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent)}
.plan-l{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--bord)}
.plan-l span{font-size:11.5px;color:var(--faible);display:flex;align-items:center;gap:6px}
.plan-l i{width:11px;height:13px;border-radius:2px;border:1.25px solid var(--bord);display:inline-block}
.plan-l i.o{background:var(--accent-fond);border-color:var(--accent)}
.plan-l i.c{background:var(--accent);border-color:var(--accent)}
.legende{font-size:12.5px;color:var(--faible);margin:10px 2px 0;line-height:1.5;max-width:44ch}
@media (prefers-reduced-motion:reduce){.pl{animation:none;opacity:1}}

/* ---------- frise ---------- */
.frise{display:grid;grid-template-columns:repeat(5,1fr);margin-top:40px;border-top:2px solid var(--texte)}
/* Deux marges à tenir, et ce sont deux choses différentes.
   En HAUT : la pastille déborde de 6 px sous le filet, donc l'heure se pose à
   36 px, pas à 22 — sinon elle se lit comme collée à la ligne.
   À GAUCHE : le séparateur porte le MÊME retrait des deux côtés. Il était posé
   en border-right sans retrait à gauche, et le texte de chaque colonne venait
   toucher le trait de la colonne précédente. */
.frise .mo{padding:36px 26px 30px 26px;border-left:1px solid var(--bord);position:relative}
.frise .mo:first-child{border-left:0;padding-left:0}
.frise .mo::before{content:"";position:absolute;top:-6px;left:26px;width:11px;height:11px;border-radius:50%;
  background:var(--accent);border:2px solid var(--fond-2)}
.frise .mo:first-child::before{left:0}
.frise .mo .h{font-family:var(--mono);font-size:13px;color:var(--accent);letter-spacing:.1em;display:block;margin-bottom:11px}
/* Pas de « balance » ici : sur une colonne étroite il coupe « A-14 » en deux
   lignes pour équilibrer, et un identifiant de place ne se coupe pas. */
.frise .mo h3{font-size:17.5px;font-weight:800;margin:0 0 9px;line-height:1.3;text-wrap:pretty}
.frise .mo p{margin:0;font-size:15.5px;color:var(--doux);line-height:1.55}
/* Trois titres tiennent sur deux lignes, deux sur une : sans plancher, les
   descriptions démarrent à cinq hauteurs différentes et la frise se déhanche. */
@media (min-width:901px){.frise .mo h3{min-height:2lh}}
/* En repli, le trait passe à l'horizontale : un séparateur vertical entre deux
   colonnes de deux lignes chacune ne sépare plus rien. */
@media (max-width:900px){
  .frise{grid-template-columns:1fr 1fr;column-gap:26px}
  .frise .mo{border-left:0;padding-left:0;border-bottom:1px solid var(--bord);padding-right:0}
  .frise .mo::before{left:0}
}
@media (max-width:520px){.frise{grid-template-columns:1fr}}

/* ---------- aveu, relances ---------- */
.aveu{margin-top:38px;border-left:3px solid var(--accent);padding:18px 22px;background:var(--surface);
  border-radius:0 4px 4px 0;max-width:52rem}
.aveu p{margin:0;font-size:17px;color:var(--doux)}
.aveu b{color:var(--texte)}
.relance{margin-top:40px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--bord);border-radius:6px;padding:20px 24px}
.relance p{margin:0;font-size:16.5px;color:var(--doux);flex:1 1 320px}
.relance b{color:var(--texte)}
.sombre .relance{background:rgba(0,0,0,.17);border-color:rgba(255,255,255,.30)}
.sombre .relance p{color:#EAF3F1}
.sombre .relance b{color:#FFFFFF}

/* ---------- emplacement d'image ---------- */
figure.shot{margin:0;border:1.5px dashed var(--bord);border-radius:6px;background:var(--surface);
  min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:30px 24px;gap:8px}
figure.shot .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
figure.shot .t{font-weight:800;font-size:15.5px}
figure.shot figcaption{font-size:13.5px;color:var(--faible);max-width:52ch;line-height:1.55}
.shots-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px}
@media (max-width:820px){.shots-2{grid-template-columns:1fr}}

/* ---------- cadre d'aperçu d'interface ---------- */
.apercu{margin-top:38px}
.apercu-t{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.apercu-t .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.apercu-t .t{font-weight:800;font-size:15.5px}
.apercu figcaption{font-size:13.5px;color:var(--faible);margin-top:12px;max-width:70ch;line-height:1.55}
.cadre{border:1px solid var(--bord);border-radius:8px;overflow:hidden;
  box-shadow:0 1px 2px rgba(19,28,27,.05),0 18px 46px -30px rgba(19,28,27,.5)}

/* ===== aperçu 2 : la carte sur le téléphone du client =====
   Couleurs par défaut de packages/ihm/src/convive.css. Sur une vraie plage,
   elles sont remplacées par celles de l'établissement. */
.tels{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
@media (max-width:900px){.tels{grid-template-columns:1fr;max-width:340px;margin-inline:auto}}
.tel-b{display:flex;flex-direction:column;gap:10px}
.tel-n{font-size:13px;font-weight:800;color:var(--texte)}
.tel-n span{font-weight:400;color:var(--faible)}
.tel{background:#F5F0E6;color:#16272E;border-radius:16px;border:1px solid var(--bord);
  overflow:hidden;font-size:14px;line-height:1.45}
.tel .entete{background:#16272E;color:#F5F0E6;padding:13px 15px}
.tel .entete .nom{font-weight:700;font-size:15px;display:block;
  font-family:Georgia,"Times New Roman",serif}
.tel .entete .lieu{font-size:12px;opacity:.72}
.tel .barre{background:#16272E;color:#F5F0E6;padding:9px 15px;display:flex;align-items:center;gap:10px;
  font-size:13px;border-top:1px solid rgba(245,240,230,.14)}
.tel .barre .t{font-weight:800;flex:1}
.tel .barre .ctx{font-family:var(--mono);opacity:.72}
.tel .page{padding:15px}
.tel h5{margin:0 0 6px;font-size:19px;font-weight:700;line-height:1.2;
  font-family:Georgia,"Times New Roman",serif}
.tel .lede{margin:0 0 14px;font-size:13px;color:#4E6067;line-height:1.5}
.tel .acte{display:flex;align-items:center;gap:10px;background:#FFF;border:1px solid #E1D8C8;
  border-radius:12px;padding:10px 12px;margin-bottom:8px}
.tel .acte.premier{background:#16272E;border-color:#16272E;color:#F5F0E6}
.tel .acte .ico{width:22px;height:22px;flex:none;color:var(--lagon)}
.tel .acte.premier .ico{color:#F5F0E6}
.tel .acte .txt{flex:1;min-width:0}
.tel .acte .n{font-size:13.5px;font-weight:800;display:block;line-height:1.25}
.tel .acte .d{font-size:11.5px;color:#7B8A8F;line-height:1.35}
.tel .acte.premier .d{color:rgba(245,240,230,.72)}
.tel .acte .fl{color:#7B8A8F;font-size:14px}
.tel .acte.premier .fl{color:rgba(245,240,230,.72)}
.tel .note{font-size:11px;color:#7B8A8F;line-height:1.45;margin:12px 0 0}
.tel .formule{display:flex;align-items:center;gap:10px;background:#FFF;border:1px solid #E1D8C8;
  border-radius:12px;padding:10px 12px;margin-bottom:8px}
.tel .formule[aria-pressed="true"]{border-color:var(--lagon);background:var(--ecume)}
.tel .formule .txt{flex:1;min-width:0}
.tel .formule .n{font-size:13.5px;font-weight:800;display:block;line-height:1.25}
.tel .formule .d{font-size:11.5px;color:#7B8A8F;display:block;line-height:1.35}
.tel .formule .p{font-family:var(--mono);font-weight:800;font-size:14px;white-space:nowrap}
.tel .cta{background:var(--lagon);color:#F5F0E6;border-radius:12px;padding:12px;text-align:center;
  font-weight:800;font-size:14px;margin-top:12px}
.tel .cta.second{background:transparent;color:#16272E;border:1px solid #E1D8C8;margin-top:8px}
.tel .sejour{background:#FFF;border:1px solid #E1D8C8;border-radius:12px;overflow:hidden;margin-bottom:12px}
.tel .sejour .h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;
  border-bottom:1px solid #E1D8C8}
.tel .sejour .id{font-family:var(--mono);font-size:28px;font-weight:800;letter-spacing:-.02em}
.tel .sejour .m{font-size:12px;color:#7B8A8F;text-align:right;line-height:1.35}
.tel .sejour .b{display:grid;grid-template-columns:1fr 1fr}
.tel .sejour .c{padding:11px 14px}
.tel .sejour .c+.c{border-left:1px solid #E1D8C8}
.tel .sejour .l{font-size:11px;color:#7B8A8F;display:block}
.tel .sejour .v{font-family:var(--mono);font-size:16px;font-weight:800}
.tel .inter{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7B8A8F;
  font-weight:800;margin:14px 0 8px}

/* ===== aperçu 3 : votre bureau ===== */
.bo{display:grid;grid-template-columns:190px 1fr;background:#EFF1F0;color:#141A1C;font-size:13.5px;
  min-height:430px}
.bo .rail{background:#FFF;border-right:1px solid #D8DDDC;padding:14px 10px}
.bo .grp{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#727F82;font-weight:800;
  padding:12px 10px 6px}
.bo .rail button{display:flex;width:100%;justify-content:space-between;gap:8px;align-items:center;
  background:transparent;border:0;text-align:left;font-family:var(--ui);font-size:13px;color:#4B5658;
  padding:7px 10px;border-radius:6px;cursor:default}
.bo .rail button[aria-current="true"]{background:var(--ecume);color:var(--lagon);font-weight:800}
.bo .flou{filter:blur(3.2px);opacity:.55;user-select:none;pointer-events:none}
.bo .corps{padding:16px 18px 18px;min-width:0}
.bo .entete{background:#141A1C;color:#EFF1F0;margin:-16px -18px 16px;padding:11px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.bo .entete .nom{font-weight:800;font-size:14px}
.bo .entete .sous{font-size:11.5px;opacity:.7}
.bo .entete .droite{display:flex;align-items:center;gap:12px;font-size:12px}
.bo .version{font-family:var(--mono);border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:3px 10px}
.bo h5{margin:0 0 4px;font-size:20px;font-weight:800}
.bo .lede{margin:0 0 16px;font-size:12.5px;color:#4B5658}
.bo .mesures{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.bo .mes{background:#FFF;border:1px solid #D8DDDC;border-radius:8px;padding:11px 12px}
.bo .mes .o{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#727F82;font-weight:800;display:block}
.bo .mes .v{font-family:var(--mono);font-size:21px;font-weight:800;margin-top:3px}
.bo .mes .d{font-size:10.5px;color:#727F82;margin-top:1px}
.bo .plaque{background:#FFF;border:1px solid #D8DDDC;border-radius:8px;padding:13px 14px}
.bo .plaque h6{margin:0 0 10px;font-size:12.5px;font-weight:800}
.bo .duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bo table{border-collapse:collapse;width:100%;font-size:12px}
.bo th{text-align:left;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#727F82;
  font-weight:800;padding:5px 7px;border-bottom:1px solid #D8DDDC;white-space:nowrap}
.bo td{padding:6px 7px;border-bottom:1px solid #EAEEED;white-space:nowrap}
.bo tr:last-child td{border-bottom:0}
.bo .num{text-align:right;font-family:var(--mono)}
.bo .puce{font-size:10.5px;font-weight:800;border-radius:4px;padding:2px 7px;display:inline-block}
.bo .pv{background:var(--ecume);color:var(--lagon)}.bo .pa{background:#F7E9D2;color:#8E5100}
.bo .pr{background:#F7E1DE;color:#9C2019}
.bo .barreau{display:grid;grid-template-columns:74px 1fr 54px;align-items:center;gap:8px;
  font-size:11.5px;margin-bottom:6px}
.bo .barreau .g{height:9px;background:#EAEEED;border-radius:99px;overflow:hidden}
.bo .barreau .g i{display:block;height:100%;background:var(--lagon);border-radius:99px}
.bo .barreau .m{font-family:var(--mono);text-align:right;font-weight:800}
.bo .brouillon{margin:14px -18px -18px;padding:10px 18px;background:#F7E9D2;border-top:1px solid #8E5100;
  display:flex;align-items:center;gap:12px;font-size:12px;flex-wrap:wrap}
.bo .brouillon .v{font-family:var(--mono);font-weight:800}
.bo .bouton{border:1px solid #B4BDBC;background:#FFF;border-radius:6px;padding:5px 11px;font-size:12px;
  font-family:var(--ui);font-weight:800}
.bo .bouton--fort{background:var(--lagon);border-color:var(--lagon);color:#FFF}
@media (max-width:820px){
  .bo{grid-template-columns:1fr}
  .bo .rail{border-right:0;border-bottom:1px solid #D8DDDC;display:flex;gap:6px;overflow-x:auto;padding:10px}
  .bo .rail .grp{display:none}
  .bo .rail button{width:auto;white-space:nowrap}
  .bo .mesures{grid-template-columns:1fr 1fr}
  .bo .duo{grid-template-columns:1fr}
}

/* ---------- quatre postes ---------- */
.postes{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:40px;background:var(--bord);
  border:1px solid var(--bord);border-radius:6px;overflow:hidden}
.poste{background:var(--surface);padding:22px 20px 24px}
.poste .q{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:10px}
.poste h3{font-size:17px;font-weight:800;margin:0 0 8px;line-height:1.25}
.poste p{margin:0;font-size:15px;color:var(--doux);line-height:1.5}
.poste ul{margin:12px 0 0;padding:10px 0 0;list-style:none;border-top:1px solid var(--bord)}
.poste li{font-size:12.5px;color:var(--faible);padding:2.5px 0}
@media (max-width:980px){.postes{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.postes{grid-template-columns:1fr}}

/* ---------- trois décisions ---------- */
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.dec{background:var(--surface);border:1px solid var(--bord);border-radius:6px;padding:26px 24px}
.dec .n{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.1em;display:block;margin-bottom:14px}
.dec h3{font-size:19px;font-weight:800;margin:0 0 12px;line-height:1.26}
.dec p{margin:0 0 12px;font-size:16px;color:var(--doux)}
.dec p:last-child{margin-bottom:0}
@media (max-width:880px){.trois{grid-template-columns:1fr}}

/* ---------- comparatif ---------- */
.cmp{overflow-x:auto;margin-top:38px;border:1px solid var(--bord);border-radius:6px;background:var(--surface)}
.cmp table{border-collapse:collapse;width:100%;min-width:760px;font-size:15.5px}
.cmp th{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faible);text-align:left;
  font-weight:800;padding:14px 16px;border-bottom:1px solid var(--bord)}
.cmp th.nous{color:var(--accent)}
.cmp td{padding:14px 16px;border-bottom:1px solid var(--bord);vertical-align:top;color:var(--doux);width:30%}
.cmp tr:last-child td{border-bottom:0}
.cmp td.suj{color:var(--texte);font-weight:800;font-size:14.5px;width:22%}
.cmp td.nous{color:var(--texte);background:var(--accent-fond)}
.cmp td.nous b{color:var(--accent)}

/* ---------- bande sombre ---------- */
/* LA SEULE BANDE EN APLAT LAGON, ET C'EST CE QUI LA FAIT EXISTER.
   Elle était nuit sur une page sable : elle tranchait. Sur une page nuit elle
   aurait disparu. Le lagon plein reprend ce rôle — c'est l'emploi que la charte
   lui donne, l'aplat, et du texte clair posé dessus est mesuré à 6,1. */
.sombre{background:var(--lagon);color:#F2F2EE;border:0}
.sombre .oeil{color:#DDEAE6}
.sombre h1,.sombre h2{color:#FFFFFF}
.sombre p{color:#DDEAE6}
.sombre b{color:#FFFFFF}
.sombre u{color:#FFFFFF;text-decoration-color:#9FD7CB;text-underline-offset:3px}
.sombre .deux{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:54px;align-items:start}
.sombre .deux p{margin:0 0 16px;font-size:17px}
@media (max-width:880px){.sombre .deux{grid-template-columns:1fr;gap:26px}}

/* ---------- paramétrage ---------- */
.etapes{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:38px;background:var(--bord);
  border:1px solid var(--bord);border-radius:6px;overflow:hidden}
.etapes .et{background:var(--surface);padding:16px}
.etapes .et .n{font-family:var(--mono);font-size:11.5px;color:var(--accent);display:block;margin-bottom:7px}
.etapes .et h4{font-size:14.5px;font-weight:800;margin:0 0 5px;line-height:1.25}
.etapes .et p{margin:0;font-size:13.5px;color:var(--faible);line-height:1.45}
@media (max-width:980px){.etapes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.etapes{grid-template-columns:1fr}}

/* ---------- prix ---------- */
.prix{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:start;margin-top:34px}
.prix .gros{font-size:76px;font-weight:800;letter-spacing:-.04em;color:var(--accent);line-height:.9;white-space:nowrap}
.prix .u{font-size:14.5px;color:var(--faible);display:block;margin-top:14px;white-space:nowrap}
.prix p{margin:0 0 16px;font-size:17px;color:var(--doux)}
.prix p:last-child{margin-bottom:0}
@media (max-width:700px){.prix{grid-template-columns:1fr;gap:18px}}

/* ---------- état du produit ---------- */
.etat{margin-top:38px;border-top:1px solid var(--bord)}
.li{display:grid;grid-template-columns:150px 1fr;gap:26px;padding:20px 0;border-bottom:1px solid var(--bord)}
.chip{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:3px;background:var(--accent-fond);color:var(--accent);white-space:nowrap}
.chip.futur{background:transparent;border:1px solid var(--bord);color:var(--faible)}
.li h3{margin:0 0 6px;font-size:17.5px;font-weight:800}
.li p{margin:0;font-size:16px;color:var(--doux)}
@media (max-width:640px){.li{grid-template-columns:1fr;gap:10px}}

/* ---------- questions ---------- */
.qs{margin-top:38px;border-top:1px solid var(--bord)}
details{border-bottom:1px solid var(--bord)}
summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font-weight:800;
  font-size:17.5px;line-height:1.35}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:8px;top:29px;width:9px;height:9px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);
  transition:transform .18s ease}
details[open] summary::after{transform:rotate(-135deg);top:32px}
details p{margin:0 0 20px;font-size:16.5px;color:var(--doux);max-width:64ch}

/* ---------- formulaire ---------- */
.form{margin-top:36px;max-width:720px}
.paire{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.paire{grid-template-columns:1fr}}
.champ{margin-bottom:18px}
.champ label{display:block;font-weight:800;font-size:14px;margin-bottom:6px}
.req{font-size:10px;letter-spacing:.1em;color:var(--accent);background:var(--accent-fond);
  padding:2px 7px;border-radius:3px;margin-left:8px;vertical-align:1px;text-transform:uppercase}
.champ .aide{font-size:12.5px;color:var(--faible);margin-top:5px}
input,textarea{width:100%;font-family:var(--ui);font-size:16px;color:var(--texte);background:var(--surface);
  border:1px solid var(--bord);border-radius:4px;padding:11px 13px}
input:focus,textarea:focus{border-color:var(--accent)}
textarea{min-height:118px;resize:vertical}
.piege{position:absolute;left:-9999px}
.rgpd{font-size:13px;color:var(--faible);margin-top:16px;max-width:62ch;line-height:1.6}
.rgpd a{color:var(--accent)}
.reponse{margin-top:22px;border-radius:6px;padding:18px 20px;font-size:16px;line-height:1.55;display:none}
.reponse.on{display:block}
.reponse.ok{background:var(--accent-fond);border:1px solid var(--accent);color:var(--texte)}
.reponse.ko{background:rgba(158,34,34,.18);border:1px solid #E3928B;color:#F7E1DE}
.reponse b{font-weight:800}
.reponse a{color:inherit}
.reponse .btn{margin-top:12px}
button[disabled]{opacity:.6;cursor:progress}

/* ---------- pied ---------- */
footer.pied{background:#090E0D;color:#EDEDE7;border-top:1px solid var(--bord);padding:52px 0 34px}
.pied-g{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.pied-g .verrou{color:#F2F2EE}
footer.pied p{margin:12px 0 0;font-size:15.5px;color:#AFB9B7;max-width:36ch}
footer.pied a{color:#D8E2E0}
.pied-l{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;padding-top:20px;
  border-top:1px solid rgba(242,242,238,.14);font-size:13px;color:#8E9997}
.pied-l a{color:#8E9997;text-decoration:none}
.pied-l a:hover{color:#F2F2EE}
@media (max-width:640px){.pied-g{grid-template-columns:1fr;gap:22px}}

@media (max-width:900px){
  .hero-g{grid-template-columns:1fr;gap:38px}
  .hero{padding:50px 0 4px}
  section{padding:56px 0}
  .wrap{padding:0 22px}
}

/* ---------- pages annexes ---------- */
.doc{max-width:var(--mesure);padding:56px 0 20px}
.doc h1{font-size:clamp(30px,4vw,42px);margin-bottom:10px}
.doc h2{font-size:22px;margin:38px 0 10px;max-width:none}
.doc h3{font-size:17px;margin:24px 0 6px;font-weight:800}
.doc p,.doc li{font-size:16.5px;color:var(--doux)}
.doc a{color:var(--accent)}
.doc .maj{font-size:13.5px;color:var(--faible);margin-bottom:30px}
.doc dl{margin:0}
.doc dt{font-weight:800;font-size:14px;margin-top:14px}
.doc dd{margin:2px 0 0;color:var(--doux)}
.doc .acompleter{background:var(--accent-fond);color:var(--accent);font-family:var(--mono);
  font-size:.86em;padding:2px 7px;border-radius:3px}


/* ---------- pictogrammes ----------
   Un seul jeu : 24 px, trait de 1,6, extrémités arrondies, aucun aplat.
   Ils prennent la couleur du texte ou de l'accent selon le bloc, et disparaissent
   des lecteurs d'écran : ils redisent le titre, ils ne l'augmentent pas. */
.pic{width:24px;height:24px;flex:none;display:block;color:var(--accent)}
.pic-l{width:28px;height:28px}
.frise .mo .pic{margin-bottom:12px}
.poste .pic{margin-bottom:12px;width:26px;height:26px}
.dec-h{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.dec-h .n{margin:0}
.cmp td.suj{white-space:normal}
.cmp .suj-i{display:flex;align-items:flex-start;gap:10px}
.cmp .suj-i .pic{width:20px;height:20px;margin-top:1px;color:var(--faible)}

/* ---------- aperçu : le plan de plage sur le sable ----------
   Couleurs relevées sur packages/ihm/src/ihm.css, ramenées au lagon de la
   charte : l'état « libre » y était vert, il est ici lagon. L'ambre de
   « à encaisser » reste — c'est une couleur d'état, pas un accent de marque. */
.ter{background:#E7E1D3;color:#141A1C;font-size:14px}
.ter .haut{background:#141A1C;color:#F2F2EE;padding:12px 16px;display:flex;
  align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ter .qui{font-weight:800;font-size:15px}
.ter .ou{font-size:12.5px;color:#A9B4B2}
.ter .jetons{display:flex;gap:8px}
.ter .jeton{border:1px solid rgba(242,242,238,.4);border-radius:99px;padding:5px 13px;
  font-size:12.5px;display:inline-flex;align-items:center;gap:7px}
.ter .jeton b{font-family:var(--mono);font-weight:800}
.ter .pt{width:7px;height:7px;border-radius:50%;background:var(--lagon-clair)}
.ter .corps{padding:14px 16px 16px}
.ter .onglets{display:flex;gap:9px;margin-bottom:12px}
.ter .ong{background:#FFF;border:1px solid #CAC2AF;border-radius:99px;padding:9px 18px;
  font-size:13.5px;font-weight:800}
.ter .ong[aria-current="true"]{background:#141A1C;border-color:#141A1C;color:#F2F2EE}
.ter .filtres{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.ter .flt{background:#FFF;border:1px solid #CAC2AF;border-radius:99px;padding:8px 15px;
  font-size:13px;font-weight:800;display:inline-flex;align-items:baseline;gap:8px}
.ter .flt span{font-family:var(--mono);font-weight:400;font-size:11.5px;color:#6E7A7C}
.ter .flt[aria-pressed="true"]{background:#141A1C;border-color:#141A1C;color:#F2F2EE}
.ter .flt[aria-pressed="true"] span{color:#B6C0BE}
.ter .parc{background:#DCD5C4;border-radius:12px;padding:12px 14px 14px}
.ter .mer{text-align:center;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#4B5658;background:linear-gradient(#CBD8D6,#DCD5C4);border-radius:8px;padding:5px;margin-bottom:12px}
.ter .rg{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;
  color:#4B5658;margin:0 0 6px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
/* L'attribut commercialisable se porte sur le rang, pas sur chaque place :
   c'est ce qui fait qu'une rangée se vend plus cher qu'une autre. */
.ter .attr{background:var(--ecume);color:var(--lagon);border:1px solid color-mix(in srgb,var(--lagon) 35%,transparent);
  border-radius:999px;padding:3px 11px;font-size:10px;letter-spacing:.11em}
/* La passerelle entre deux rangs, telle qu'elle est au plan. Purement
   visuelle : elle n'est pas une place et ne porte aucun libellé. */
.ter .passerelle{height:22px;width:58%;margin:2px 0 14px;border-radius:3px;
  background:repeating-linear-gradient(90deg,#FFFDF8 0 7px,#E3DCCB 7px 10px);
  border:1px solid #D6CFBD}
.ter .rg small{font-family:var(--mono);font-weight:400;letter-spacing:0;text-transform:none;color:#6E7A7C}
.ter .places{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:12px}
.ter .pc{background:#FFF;border:1.5px dashed color-mix(in srgb,var(--lagon) 45%,transparent);
  border-radius:9px;padding:9px 10px;min-height:62px}
.ter .pc .id{font-family:var(--mono);font-weight:800;font-size:13.5px;display:block}
.ter .pc .st{font-size:12px;color:var(--lagon);display:block;margin-top:3px}
.ter .pc.due{background:#F6E7CB;border:1.5px solid #8E5100}
.ter .pc.due .st{color:#8E5100;font-weight:800}
.ter .pc.reg{background:#FFF;border:1.5px solid #141A1C}
.ter .pc.reg .st{color:#141A1C}
.ter .pc.hs{background:repeating-linear-gradient(-45deg,#DDD9CE 0 6px,#D2CDC1 6px 12px);
  border:1.5px solid #A9A08A;color:#6E7A7C}
.ter .pc.hs .id,.ter .pc.hs .st{color:#6E7A7C}
.ter .bas{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.ter .act{background:#FFF;border:1.5px solid #141A1C;border-radius:12px;padding:15px;
  text-align:center;font-weight:800;font-size:15px}
.ter .act.eteint{background:#DCD5C4;border-color:transparent;color:#8A8578}
@media (max-width:760px){
  .ter .places{grid-template-columns:repeat(3,1fr)}
  .ter .bas{grid-template-columns:1fr}
}

/* ---------- aperçu : une offre dans le tunnel ----------
   Les jetons du tunnel sont déjà ceux de la marque : --tn-lagon vaut #0E6F62.
   On les reprend tels quels. */
.tn{background:var(--sable);color:var(--encre);padding:18px;font-size:14.5px}
.tn .bulle{background:var(--ecume);border-radius:14px 14px 14px 4px;padding:13px 16px;
  max-width:90%;margin-bottom:14px;line-height:1.55}
.tn .bulle b{font-weight:800}
.tn .refus{background:color-mix(in srgb,#9E2222 12%,transparent);border-left:4px solid #9E2222;
  color:#9E2222;border-radius:0 9px 9px 0;padding:11px 14px;margin-bottom:14px;font-size:13.5px}
.tn .saisie{background:var(--ecume);border-left:4px solid var(--lagon);border-radius:12px;
  padding:15px 17px}
.tn .saisie>b{display:block;font-size:15.5px;margin-bottom:12px}
.tn .lab{display:block;font-size:12.5px;font-weight:800;margin:12px 0 5px}
.tn .lab:first-of-type{margin-top:0}
.tn .champ{background:#FFF;border:1.5px solid color-mix(in srgb,var(--encre) 25%,transparent);
  border-radius:9px;padding:11px 12px;font-size:15px;min-height:44px}
.tn .champ.vide{color:#8A9694}
.tn .deux{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tn .qual{display:flex;gap:11px;align-items:flex-start;background:#FFF;border:1.5px solid #CBCFCD;
  border-radius:10px;padding:11px 13px;margin-top:10px}
.tn .qual[data-pris="oui"]{border-color:var(--lagon);background:var(--ecume)}
.tn .case{width:18px;height:18px;border:1.5px solid #8A9694;border-radius:4px;flex:none;margin-top:2px;
  display:grid;place-items:center;background:#FFF}
.tn .qual[data-pris="oui"] .case{background:var(--lagon);border-color:var(--lagon);color:#FFF}
.tn .qual .t{font-weight:800;font-size:13.5px;display:block}
.tn .qual .d{font-size:12px;color:#5C6866;line-height:1.45;display:block;margin-top:3px}
.tn .familles{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.tn .fam{border:1.5px solid #CBCFCD;background:var(--sable);border-radius:999px;padding:7px 14px;font-size:13px}
.tn .fam[data-pris="oui"]{background:color-mix(in srgb,var(--lagon) 12%,transparent);
  border-color:var(--lagon);font-weight:800}
.tn .lignes{margin-top:8px;display:grid;gap:6px}
.tn .lg{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:baseline;
  background:var(--sable);border-radius:9px;padding:9px 12px;font-size:13.5px}
.tn .lg .n{font-size:11.5px;color:#5C6866;display:block;font-family:var(--mono)}
.tn .lg .rt{font-size:11.5px;color:#9E2222}
.tn .bilan{background:color-mix(in srgb,var(--lagon) 10%,transparent);border-left:3px solid var(--lagon);
  border-radius:0 9px 9px 0;padding:11px 14px;margin-top:14px;font-size:13.5px;line-height:1.55}
.tn .double{background:color-mix(in srgb,#B0740B 12%,transparent);border-left:3px solid #B0740B;
  border-radius:0 9px 9px 0;padding:11px 14px;margin-top:10px;font-size:13px;line-height:1.5}
.tn .note{font-size:12.5px;color:#5C6866;line-height:1.5;margin:8px 0 0}
.tn .gestes{display:flex;gap:12px;flex-wrap:wrap;margin-top:15px}
.tn .bt{border:1.5px solid var(--lagon);color:var(--lagon);background:transparent;border-radius:10px;
  padding:11px 20px;font-weight:800;font-size:14px}
.tn .bt.premier{background:var(--lagon);color:#FFF}
.tn .bt.annuler{border-color:#9E2222;color:#9E2222}
.tn .pied{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;
  font-size:12.5px;color:#5C6866}
@media (max-width:640px){.tn .deux{grid-template-columns:1fr}}


/* Un écran de tunnel fait 1 700 px de haut : on en montre la moitié haute et on
   le dit. Couper sans le dire ferait croire que l'écran s'arrête là. */
.cadre.coupe{position:relative;max-height:640px;overflow:hidden}
.cadre.coupe::after{content:"";position:absolute;inset:auto 0 0 0;height:150px;pointer-events:none;
  background:linear-gradient(rgba(242,242,238,0),var(--sable))}


/* ---------- le téléphone du client, écrans détaillés ----------
   Palette de packages/ihm/src/convive.css, ramenée au lagon de la charte.
   Sur une vraie plage, ce sont les couleurs de l'établissement. */
.tel-solo{max-width:432px;margin:0 auto;border:1px solid var(--bord);border-radius:20px;overflow:hidden;
  background:#F5F0E6;color:#16272E;
  box-shadow:0 1px 2px rgba(19,28,27,.06),0 22px 50px -34px rgba(19,28,27,.5)}
.tel-solo .entete{background:#16272E;color:#F5F0E6;padding:16px 20px}
.tel-solo .entete .nom{font-size:23px;font-weight:700;display:block;letter-spacing:-.01em;
  font-family:Georgia,"Times New Roman",serif}
.tel-solo .entete .lieu{font-size:12.5px;opacity:.74;display:block;margin-top:2px}
.tel-solo .barre{background:#FFF;padding:12px 16px;display:flex;align-items:center;gap:12px;
  border-bottom:1px solid #E1D8C8}
.tel-solo .barre .rt{width:38px;height:38px;flex:none;border:1px solid #E1D8C8;border-radius:11px;
  display:grid;place-items:center;color:#16272E}
.tel-solo .barre .t{font-weight:800;font-size:14.5px;flex:1}
.tel-solo .barre .ctx{font-family:var(--mono);font-size:12.5px;color:var(--lagon)}
.tel-solo .page{padding:20px}
.tel-solo h5{margin:0 0 8px;font-size:26px;font-weight:700;line-height:1.15;letter-spacing:-.02em;
  font-family:Georgia,"Times New Roman",serif}
.tel-solo .lede{margin:0 0 16px;font-size:14px;color:#4E6067;line-height:1.5}
.tel-solo .note{font-size:12.5px;color:#7B8A8F;line-height:1.5;margin:14px 0 0}

.tel-solo .filtres{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.tel-solo .flt{background:#FFF;border:1px solid #E1D8C8;border-radius:999px;padding:9px 16px;
  font-size:13.5px;font-weight:800}
.tel-solo .flt[aria-pressed="true"]{background:#16272E;border-color:#16272E;color:#F5F0E6}

.tel-solo .parc{background:#E7E1D3;border-radius:12px;padding:12px}
.tel-solo .mer{text-align:center;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:#4E6067;background:#CBD8D6;border-radius:7px;padding:5px;margin-bottom:12px}
.tel-solo .rg{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;
  color:#7B8A8F;margin:0 0 7px;display:flex;gap:8px;align-items:baseline}
.tel-solo .rg small{font-family:var(--mono);font-weight:400;letter-spacing:0;text-transform:none}
.tel-solo .places{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-bottom:11px}
.tel-solo .pl2{background:#EFEADF;border:1.5px solid transparent;border-radius:10px;padding:7px 4px 5px;
  text-align:center;color:var(--lagon)}
.tel-solo .pl2 .num{display:block;font-family:var(--mono);font-size:10.5px;color:#4E6067;margin-top:2px}
.tel-solo .pl2 svg{width:100%;height:auto;max-width:30px;display:block;margin:0 auto}
.tel-solo .pl2[aria-pressed="true"]{border-color:#16272E;border-width:2px;background:#DDEAE6}
.tel-solo .pl2.hs{color:#9AA5A3;
  background:repeating-linear-gradient(-45deg,#E3DED2 0 5px,#DAD4C6 5px 10px)}
.tel-solo .pl2.hs .num{color:#9AA5A3}
.tel-solo .passerelle{height:16px;width:64%;margin:0 0 11px;border-radius:3px;
  background:repeating-linear-gradient(90deg,#FFFDF8 0 6px,#E3DCCB 6px 9px);border:1px solid #DCD5C4}
.tel-solo .barrescroll{height:9px;border-radius:99px;background:#DCD5C4;margin-top:4px;position:relative}
.tel-solo .barrescroll::after{content:"";position:absolute;inset:0 22% 0 0;border-radius:99px;background:#A9A08A}

.tel-solo .sejour{background:#FFF;border:1px solid #E1D8C8;border-radius:14px;overflow:hidden;margin-bottom:14px}
.tel-solo .sejour .h{display:flex;align-items:center;gap:14px;padding:15px 17px;border-bottom:1px dashed #E1D8C8}
.tel-solo .sejour .id{font-family:var(--mono);font-size:31px;font-weight:800;letter-spacing:-.03em}
.tel-solo .sejour .m{font-size:13px;color:var(--lagon);line-height:1.4}
.tel-solo .sejour .m span{color:#7B8A8F;display:block;font-size:12.5px}
.tel-solo .sejour .b{display:grid;grid-template-columns:1fr 1fr}
.tel-solo .sejour .c{padding:12px 17px}
.tel-solo .sejour .c+.c{border-left:1px dashed #E1D8C8}
.tel-solo .sejour .l{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#7B8A8F;display:block}
.tel-solo .sejour .v{font-family:var(--mono);font-size:17px;font-weight:800;margin-top:2px;display:block}
.tel-solo .bandeau{background:#DDEAE6;border-radius:11px;padding:12px 15px;font-size:13.5px;
  color:#16272E;margin-bottom:14px}
.tel-solo .acte{display:flex;align-items:center;gap:13px;background:#FFF;border:1px solid #E1D8C8;
  border-radius:13px;padding:13px 15px;margin-bottom:9px}
.tel-solo .acte.premier{background:#16272E;border-color:#16272E;color:#F5F0E6}
.tel-solo .acte.eteint{background:#EFEADF;border-color:transparent;color:#A6B0AE}
.tel-solo .acte .ico{width:22px;height:22px;flex:none;color:var(--lagon)}
.tel-solo .acte.premier .ico{color:#F5F0E6}
.tel-solo .acte.eteint .ico{color:#B4BDBC}
.tel-solo .acte .txt{flex:1;min-width:0}
.tel-solo .acte .n{font-size:15px;font-weight:800;display:block;line-height:1.25}
.tel-solo .acte .d{font-size:12.5px;color:#7B8A8F;display:block;margin-top:1px}
.tel-solo .acte.premier .d{color:rgba(245,240,230,.72)}
.tel-solo .acte.eteint .d{color:#B4BDBC}
.tel-solo .acte .fl{color:#7B8A8F;font-size:15px}
.tel-solo .acte.premier .fl{color:rgba(245,240,230,.8)}
.tel-solo .acte.eteint .fl{color:#C4CCCA}

/* deux colonnes : le téléphone d'un côté, ce qu'il faut y lire de l'autre */
.tel-duo{display:grid;grid-template-columns:minmax(0,432px) minmax(0,1fr);gap:46px;align-items:start;margin-top:38px}
.tel-duo .lire h3{font-size:20px;font-weight:800;margin:0 0 10px;line-height:1.25}
.tel-duo .lire p{margin:0 0 16px;font-size:16.5px;color:var(--doux);max-width:46ch}
.tel-duo .lire p:last-child{margin-bottom:0}
.tel-duo .lire b{color:var(--texte)}
@media (max-width:900px){.tel-duo{grid-template-columns:1fr;gap:28px}}

/* ---------- le chapitre sur l'assistance ---------- */
/* Cet encadré était nuit sur une page claire ; sur une page nuit il devient une
   surface bordée, sinon il n'a plus de bord du tout. */
.decl{background:var(--surface);color:var(--texte);border:1px solid var(--bord);
  border-left:3px solid var(--accent);border-radius:8px;padding:26px 28px;margin-top:36px;
  display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start}
.decl .pic{color:var(--accent);width:30px;height:30px}
.decl .q{font-size:19.5px;line-height:1.5;margin:0 0 12px;color:var(--texte)}
.decl .s{font-size:14px;color:var(--faible);margin:0}
.decl .s b{color:var(--accent);font-weight:800}
@media (max-width:640px){.decl{grid-template-columns:1fr;gap:14px;padding:22px}}

.etats{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:34px;background:var(--bord);
  border:1px solid var(--bord);border-radius:6px;overflow:hidden}
.eta{background:var(--surface);padding:16px 15px 18px}
.eta .mq{font-family:var(--mono);font-size:19px;font-weight:800;color:var(--accent);display:block;
  line-height:1;margin-bottom:9px}
.eta .lb{font-size:13.5px;font-weight:800;display:block;margin-bottom:7px}
.eta .ge{font-size:12px;color:var(--faible);line-height:1.5}
.eta[data-e="propose"]{background:var(--accent-fond)}
.eta[data-e="propose"] .ge{color:var(--accent);font-weight:800}
@media (max-width:900px){.etats{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.etats{grid-template-columns:1fr}}

.hors{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:32px}
@media (max-width:820px){.hors{grid-template-columns:1fr}}
.hors .b{background:var(--surface);border:1px solid var(--bord);border-radius:6px;padding:24px}
.hors .b h4{font-size:17px;font-weight:800;margin:0 0 12px;display:flex;align-items:center;gap:11px}
.hors .b ul{margin:0 0 14px;padding-left:20px}
.hors .b li{font-size:15.5px;color:var(--doux);margin-bottom:7px}
.hors .b p{margin:0;font-size:15.5px;color:var(--doux)}
.hors .b p+p{margin-top:12px}
.hors .b b{color:var(--texte)}

/* =============================================================================
   LE SITE PUBLIC DE L'ÉTABLISSEMENT — section « #vitrine »
   =============================================================================

   POURQUOI CE BLOC N'INTRODUIT AUCUNE COULEUR DE MARQUE DE PLUS.
   La charte du tunnel d'onboarding (packages/ihm/src/tunnel.css, portée « .tn »)
   et celle de cette vitrine sont la MÊME, valeur pour valeur : encre #131C1B,
   lagon #0E6F62, lagon clair #57B7A6, écume #E1EDEA, sable #F2F2EE, nuit
   #0E1413. Ce bloc ne consomme donc que les rôles déjà déclarés dans « :root ».

   LES TROIS MINIATURES SONT L'EXCEPTION, ET C'EST LE SUJET.
   Un site généré ne porte JAMAIS la charte de Drood : il porte celle de
   l'établissement, produite par le tunnel. Les trois vignettes
   sont donc peintes dans trois chartes étrangères à celle-ci — c'est
   précisément ce qu'elles doivent démontrer. Leurs six valeurs sont déclarées
   ci-dessous, en un seul endroit, comme le fait le générateur lui-même.
   ========================================================================== */

.gab-1{--g-fond:#FBF8F3;--g-encre:#12201E;--g-accent:#0E6F62}
.gab-2{--g-fond:#F8F5EF;--g-encre:#1B1915;--g-accent:#7A3B2E}
.gab-3{--g-fond:#161B25;--g-encre:#F2EFE7;--g-accent:#C9A227}

/* --- les six langues ------------------------------------------------------ */
/* Les pastilles sont devenues des ONGLETS : on clique une langue, les trois
   règles s'affichent dedans. Elles restent des pastilles à l'œil — ce qui
   change, c'est qu'elles se pressent, et donc qu'elles doivent en avoir la
   taille : 44 px de haut dès qu'un doigt s'en mêle. */
.langues{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.langues button{display:inline-flex;align-items:center;gap:7px;font-size:14px;
  font-family:var(--ui);line-height:1.2;
  padding:9px 15px;border:1px solid var(--bord);border-radius:99px;
  background:var(--surface);color:var(--doux);cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background .15s ease}
.langues button b{color:var(--texte);font-weight:700}
.langues button:hover{border-color:var(--accent)}
.langues .ref{border-color:color-mix(in srgb,var(--accent) 55%,var(--bord));color:var(--texte)}
.langues .marq{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);font-weight:800}
/* L'onglet choisi ne se signale pas par la seule couleur : il porte l'aplat.
   Une bordure qui change de teinte se perd sur un écran en plein soleil, et se
   perd tout court pour qui ne distingue pas le lagon du gris. */
.langues [aria-selected="true"]{background:var(--accent);border-color:var(--accent);
  color:var(--nuit)}
.langues [aria-selected="true"] b{color:var(--nuit)}
.langues [aria-selected="true"] .marq{color:color-mix(in srgb,var(--nuit) 72%,var(--accent))}
@media (max-width:900px),(pointer:coarse){.langues button{min-height:44px}}

.note-lg{font-size:13.5px;color:var(--faible);margin:12px 0 0;max-width:62ch;line-height:1.5}

/* La mention de traduction automatique, posée par la démonstration sur
   elle-même. Elle n'est pas un avertissement de défaut : c'est la règle en
   train de s'appliquer, et elle se lit comme telle — discrète, pas alarmante. */
.mention-trad{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--accent);
  border-left:2px solid var(--accent);padding:2px 0 2px 12px;max-width:62ch}
.trad:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:10px}

/* --- ce que la traduction ne fait pas ------------------------------------- */
.trad{display:grid;gap:14px;margin-top:30px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.trad>div{background:var(--surface);border:1px solid var(--bord);border-radius:8px;
  padding:18px 20px}
.trad h3{font-size:16.5px;margin:0 0 6px}
.trad p{margin:0;font-size:15px;color:var(--doux)}

/* --- les trois gabarits, en miniature ------------------------------------- */
.gabarits{display:grid;gap:16px;margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.gab{border:1px solid var(--bord);border-radius:8px;overflow:hidden;
  background:var(--g-fond);color:var(--g-encre);
  box-shadow:0 1px 2px rgba(19,28,27,.05),0 14px 34px -26px rgba(19,28,27,.5)}
.gab .chrome{display:flex;align-items:center;gap:5px;padding:8px 11px;
  background:var(--surface);border-bottom:1px solid var(--bord)}
.gab .chrome i{width:7px;height:7px;border-radius:50%;background:var(--bord);display:block}
.gab .chrome span{margin-left:6px;font-family:var(--mono);font-size:10.5px;color:var(--faible)}
.gab .photo{height:88px;display:flex;align-items:flex-end;padding:10px 12px;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--g-accent) 26%,var(--g-fond)) 0%,
    color-mix(in srgb,var(--g-encre) 62%,var(--g-fond)) 100%)}
.gab .photo b{font-size:13px;line-height:1.15;color:var(--g-fond);max-width:15ch;
  font-weight:800;letter-spacing:-.01em}
.gab .corps{padding:12px 13px 13px}
.gab .corps p{margin:0;font-size:12.5px;line-height:1.45;
  color:color-mix(in srgb,var(--g-encre) 70%,var(--g-fond))}
.gab .barre{display:flex;align-items:center;gap:7px;margin-top:12px;padding-top:11px;
  border-top:1px solid color-mix(in srgb,var(--g-encre) 16%,var(--g-fond))}
.gab .barre em{font-style:normal;font-size:10.5px;font-family:var(--mono);
  color:color-mix(in srgb,var(--g-encre) 70%,var(--g-fond));flex:1}
.gab .barre u{text-decoration:none;font-size:11px;font-weight:800;padding:6px 10px;
  border-radius:4px;background:var(--g-accent);
  color:color-mix(in srgb,var(--g-fond) 88%,#FFFFFF)}
.gab-3 .barre u{color:#14150F}
.gab .sit{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;padding:9px 13px 0;
  color:color-mix(in srgb,var(--g-encre) 72%,var(--g-fond))}

/* Le bandeau est collant sur 73 px : sans marge de défilement, « Votre site »
   amenait l'ancre pile sous le bandeau et l'œil de la section passait dessous.
   Le défaut existait sur toutes les entrées du menu ; il se corrige une fois,
   pour toutes les sections. */
section[id],div[id]{scroll-margin-top:85px}

/* --- le lien d'essai, au pied --------------------------------------------- */
.pied-g{grid-template-columns:1fr 1fr 1fr}
@media (max-width:900px){.pied-g{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.pied-g{grid-template-columns:1fr;gap:22px}}
.pied-essai h4{margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:#8E9997;font-weight:800}
.pied-essai .btn{margin-top:12px}

/* Les liens du pied faisaient 21 px de haut sur un téléphone : la hauteur du
   texte, rien de plus. On ne vise pas une ligne de texte avec un pouce. Ils
   deviennent donc des cibles de 44 px sans changer d'aspect — la boîte grandit,
   la lettre non. Mesuré à 390 px : le pied gagne 46 px de haut, et plus une
   seule cible sous la barre. La règle vaut aussi dès qu'un pointeur grossier
   est déclaré, sans quoi une tablette de 900 px garderait les cibles de 21 px
   que le téléphone vient de perdre. */
/* DEUX SEUILS, PARCE QU'IL Y A DEUX FAÇONS DE VISER. 44 px dès qu'un doigt est
   plausible ; 24 px au pointeur fin, qui est le minimum de WCAG 2.5.8 et que
   les 21 px du pied ne tenaient sur AUCUNE largeur. La première version de
   cette règle ne visait que le tactile : elle laissait donc le défaut entier
   sur l'écran où le site se consulte le plus.

   DEUX TECHNIQUES, AUSSI, et ce n'est pas un détail. Un lien court et isolé —
   le pied — grandit par « inline-flex » sans risque. Un lien DANS UNE PHRASE ne
   le peut pas : « inline-flex » l'empêche de se couper en fin de ligne, et une
   incise de six mots déborderait alors de la colonne. Ceux-là grandissent par
   « padding-block », qui agrandit la zone cliquable sans toucher à la hauteur
   de ligne ni au retour à la ligne. */
footer.pied a{display:inline-flex;align-items:center;min-height:24px}
.doc p a,.doc li a,.doc dd a,.rgpd a,.aveu p a{padding-block:.24rem}
@media (max-width:900px),(pointer:coarse){
  footer.pied a{min-height:44px}
  .doc p a,.doc li a,.doc dd a,.rgpd a,.aveu p a{padding-block:.85rem}
  .pied-l{gap:10px 22px;margin-top:24px}
}


/* =============================================================================
   L'ACCUEIL DÉCOUPÉ — cartes de renvoi et sommaire de téléphone
   =============================================================================

   L'accueil faisait 22 écrans sur un ordinateur et 43 sur un téléphone. Quatre
   sections sont parties dans leurs propres pages ; à leur place, une carte qui
   dit ce qu'on trouve derrière. Un lien nu aurait cassé le fil du discours et
   privé les moteurs du maillage — la carte garde les deux.
   ========================================================================== */

.renvoi-s{padding:52px 0}
.renvoi{display:block;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--bord);border-radius:10px;
  padding:30px 32px 26px;max-width:var(--large);
  transition:border-color .15s ease,transform .12s ease}
.renvoi:hover{border-color:var(--accent);transform:translateY(-1px)}
.renvoi h2{font-size:clamp(23px,2.6vw,30px);margin:0 0 12px;max-width:28ch}
.renvoi .intro{margin:0;max-width:60ch}
/* Le geste de la carte n'est pas un bouton : la carte ENTIÈRE est le lien, et
   un bouton dedans ferait croire à deux cibles là où il n'y en a qu'une. */
.renvoi-g{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-weight:800;font-size:15.5px;color:var(--accent)}
.renvoi-g::after{content:"→";font-weight:400}

/* DEUX CARTES QUI SE SUIVENT NE SONT PAS DEUX CHAPITRES : elles n'ont pas
   besoin de deux respirations. Bout à bout, quatre cartes coûtaient 208 px de
   vide pur. */
.renvoi-s + .renvoi-s{padding-top:0}

/* ET SUR UN GRAND ÉCRAN, LA CARTE TENAIT SUR UN TIERS DE LA LARGEUR. Le titre
   se limite à 28 caractères par ligne parce qu'un titre se lit mal en longues
   lignes — c'est juste, et cela laissait les deux tiers droits vides sur cinq
   cartes d'affilée. On met donc le titre à gauche et le texte à droite : même
   mesure de lecture, moitié moins de hauteur. */
.renvoi-t .oeil{margin:0 0 10px}
.renvoi-t h2{margin:0}
.renvoi-c .intro{margin:0;max-width:54ch}
@media (min-width:1000px){
  .renvoi{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);
    column-gap:46px;align-items:start;padding:30px 34px 28px}
  .renvoi-t h2{max-width:20ch}
  .renvoi-g{margin-top:14px}
}
.renvoi:hover .renvoi-g::after{transform:translateX(2px)}
@media (max-width:640px){.renvoi{padding:24px 22px 22px}.renvoi-s{padding:38px 0}}

/* LE SOMMAIRE DE TÉLÉPHONE, ET POURQUOI IL N'EST PAS COLLANT.
   Sous 860 px, les entrées du menu disparaissaient : il ne restait que « Nous
   parler ». Quarante-trois écrans sans un seul repère — le défaut n'était pas
   la longueur seule, c'était la longueur AVEUGLE.
   Le sommaire les rend, en une rangée qui défile. Il ne colle pas : le bandeau
   colle déjà, et une seconde barre permanente de 60 px mangerait un
   quatorzième d'un écran de 844. Il se lit en haut, il s'en va, et la barre
   d'action fixe garde le geste à portée. */
.sommaire{display:none}
@media (max-width:860px){
  .sommaire{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
    padding:12px 22px 14px;background:var(--fond-2);
    border-bottom:1px solid var(--bord);-webkit-overflow-scrolling:touch}
  .sommaire::-webkit-scrollbar{display:none}
  /* 44 px, comme partout où un doigt vise : la première version en posait 40,
     ce qui est la taille d'une pastille qu'on trouve jolie et qu'on rate. */
  .sommaire a{flex:none;display:inline-flex;align-items:center;min-height:44px;
    padding:0 14px;border:1px solid var(--bord);border-radius:99px;
    background:var(--surface);color:var(--doux);
    font-size:13.5px;font-weight:800;text-decoration:none;white-space:nowrap}
  .sommaire a:hover,.sommaire a:focus-visible{border-color:var(--accent);color:var(--texte)}
}