/* Habillage portail goservice, partage par les pages de /formation (accueil, FAQ).
   Charge APRES le <style> de chaque page : il gagne a specificite egale. */
  /* ==========================================================================
     HABILLAGE PORTAIL (2026-10-28, demande de Mika). La structure, les textes et
     les fonctions restent ceux d'au-dessus : ce bloc ne fait que repeindre la
     page comme le portail goservice. Un seul theme clair (fond creme, aurore
     vert et or dans le coin haut droit), police du systeme, titres serres,
     bandes en feuilles blanches arrondies, cartes creme sans bordure,
     etiquettes en pastilles, boutons en verre et Lensky a la place des
     pictogrammes dessines a la main. Place en dernier : il gagne a
     specificite egale sans !important.
     ========================================================================== */
  :root{
    color-scheme:only light;
    --bg:#FAF7F2; --fg:#1C1710; --muted:#4A443C; --fg-soft:#2A241B; --line:#E3DACB; --surface:#F2EBDF;
    --feuille:#FFFFFF; --carte:#F5F1EA; --pastille:#E8E1D5;
    --brand:#047857; --brand-on:#ffffff; --brand-ink:#05563F; --brand-soft:#E7F3E8; --band:#064e3b;
    --claude-ink:#8C3419; --claude-soft:#FDF3EF;
    --pastel-lavande:#DCDDF6; --pastel-jaune:#F3EAA9; --pastel-mauve:#D3C2EA; --pastel-menthe:#CDEBDB;
    --pastel-rose:#F7D9DF; --pastel-peche:#F8E0CC; --pastel-sauge:#DCE7D0;
    --font-display:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  /* Le portail refuse le rendu sombre : un visiteur ne voit jamais de fond brun. */
  @media (prefers-color-scheme:dark){
    :root{--bg:#FAF7F2; --fg:#1C1710; --muted:#4A443C; --fg-soft:#2A241B; --line:#E3DACB; --surface:#F2EBDF;
      --brand:#047857; --brand-on:#ffffff; --brand-ink:#05563F; --brand-soft:#E7F3E8; --band:#064e3b;
      --claude-ink:#8C3419; --claude-soft:#FDF3EF}
    .h1-hl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 9C30 4.5 62 3.5 117 6.5' fill='none' stroke='%23047857' stroke-width='4.5' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E")}
  }
  body{font-family:var(--font-display);isolation:isolate}

  /* L'aurore du portail : fixe, derriere tout, masquee au coin haut droit. */
  .aurora-fond{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
  .aurora{position:absolute;inset:0;overflow:hidden;
    -webkit-mask-image:radial-gradient(ellipse at 100% 0%,black 10%,transparent 70%);
    mask-image:radial-gradient(ellipse at 100% 0%,black 10%,transparent 70%)}
  .aurora::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-30%;width:calc(160% + 1400px);
    background-image:repeating-linear-gradient(90deg,
      rgb(52 211 153 / 0) 0px,rgb(52 211 153 / .3) 140px,rgb(243 217 139 / .4) 300px,
      rgb(255 255 255 / 0) 430px,rgb(5 150 105 / .2) 560px,rgb(167 232 205 / .38) 700px,
      rgb(255 255 255 / 0) 820px,rgb(243 217 139 / .3) 960px,rgb(246 214 220 / .3) 1080px,
      rgb(52 211 153 / .22) 1220px,rgb(52 211 153 / 0) 1400px);
    transform:translate3d(0,0,0) skewX(-10deg);will-change:transform;animation:aurora 240s linear infinite}
  @keyframes aurora{from{transform:translate3d(0,0,0) skewX(-10deg)}to{transform:translate3d(-1400px,0,0) skewX(-10deg)}}
  @media (prefers-reduced-motion:reduce){.aurora::after{animation:none}}

  /* Titres en police du systeme, serres comme au portail. */
  h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-0.035em}
  h1{letter-spacing:-0.05em;line-height:.98}
  /* Le grand titre porte deux soulignements dessines sous « 1 journee » et « 11 h » :
     plus d'air entre ses lignes pour qu'ils ne touchent jamais la ligne du dessous
     (Mika, 2026-10-29). */
  .hero h1{line-height:1.06;margin-bottom:1rem}
  @media (max-width:760px){.hero h1{line-height:1.14}}
  h2{letter-spacing:-0.045em;line-height:1}
  .brand-name{letter-spacing:-0.04em}
  .stat .n,.card .kpi,.proof-cell .n{letter-spacing:-0.05em}
  .uc-say,.uc-swap{letter-spacing:-0.03em}

  /* Les etiquettes de section : pastilles vert nuit, texte creme, assez grandes
     pour se lire d'un coup d'oeil (le gris pale de 12 px se perdait, Mika
     2026-10-28). Creme sur vert nuit = 11,6:1. */
  .eyebrow{display:inline-flex;align-items:center;width:fit-content;padding:.45rem 1.05rem;border-radius:999px;
    background:var(--nuit);color:#FFFDF6;font-size:clamp(.9rem,.85rem + .2vw,1rem);font-weight:600;
    letter-spacing:.01em;text-transform:none;line-height:1.3}
  .center .eyebrow{margin-inline:auto}
  /* Sur la carte de garantie, deja vert nuit : la pastille passe en creme. */
  .guarantee.dark .g-eyebrow{background:#FFFDF6;color:var(--nuit)}

  /* Les bandes : des feuilles blanches arrondies posees sur le creme. */
  .band{background:var(--feuille);border:0;border-radius:32px;
    margin-inline:clamp(.6rem,2vw,1.5rem);box-shadow:0 1px 2px rgb(28 23 16 / .04)}
  @media (max-width:720px){.band{border-radius:26px}}
  .band .card,.band .offer,.band .resv-form,.band .mfor,
  .band .guarantee:not(.dark),.band .faq details,.band .proof,.band .tl-step{background:var(--carte)}
  .band .uc-tab{background:var(--carte)}

  /* Cartes creme, sans bordure, coins genereux. */
  .card,.offer,.proof,.faq details,.resv-form,.mfor,.tl-step,.uc-box,.nudge,.modal-in{border-color:transparent}
  .card,.proof,.tl-step{background:var(--carte);border-radius:24px}
  .offer{background:var(--feuille);border-radius:32px}
  .band .offer{background:var(--carte)}
  /* L'offre n'a plus de bande : sa carte blanche se pose seule sur le degrade. */
  .sec-offre .offer{background:var(--feuille);box-shadow:0 1px 2px rgb(28 23 16 / .05),0 18px 50px rgb(28 23 16 / .06)}
  .proof-cell{border-color:rgb(28 23 16 / .08)}
  .resv-form,.mfor{background:var(--feuille);border-radius:24px;box-shadow:0 1px 2px rgb(28 23 16 / .05)}
  .faq details{background:var(--feuille);border-radius:18px}
  .uc-box{background:var(--feuille);border-radius:18px;box-shadow:inset 0 0 0 1px rgb(28 23 16 / .1)}
  .uc-out{border-radius:18px}
  /* p{max-width:60ch} retenait la phrase : la fleche flottait au milieu de la boite. */
  .uc-say{max-width:none}
  .field input,.field textarea,.seg label{background:var(--feuille);border-color:rgb(28 23 16 / .14)}
  .band .field input,.band .field textarea{background:var(--feuille)}
  .modal-in{background:var(--bg);border-radius:26px}
  .nudge{background:var(--feuille);border-radius:24px}
  .guarantee.dark{border-radius:32px}
  .video{border-radius:26px}
  .team-photo img{border-color:var(--feuille)}
  /* Le modele 4C, sous le deroulement : une carte blanche bien visible. */
  .modele-4c{max-width:56rem;text-wrap:balance;margin:2.5rem auto 0;padding:1.4rem 1.75rem;text-align:center;
    background:var(--feuille);border-radius:24px;box-shadow:0 1px 2px rgb(28 23 16 / .05),0 14px 36px rgb(28 23 16 / .06);
    font-size:clamp(1.1rem,1rem + .45vw,1.35rem);line-height:1.4;letter-spacing:-.015em;color:var(--fg-soft)}
  .modele-4c b{color:var(--fg)}
  /* Quatre tirages de meme hauteur, en rangee, rotations alternees. Sous 900 px
     ils passent en deux rangees de deux. */
  .team-photos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
    gap:clamp(1rem,2.5vw,2rem);margin-top:2.75rem}
  .team-photos .team-photo{margin:0;width:auto}
  .team-photos .team-photo img{width:auto;height:clamp(11rem,22vw,19rem)}
  .team-photos .team-photo:nth-child(2){transform:rotate(1.4deg)}
  .team-photos .team-photo:nth-child(3){transform:rotate(-1deg)}
  .team-photos .team-photo:nth-child(4){transform:rotate(1.8deg)}
  @media (max-width:900px){.team-photos .team-photo img{height:clamp(9rem,34vw,14rem)}}
  @media (max-width:560px){.team-photos .team-photo img{height:auto;max-width:100%}
    .team-photos .team-photo{width:min(22rem,86vw)}
    .team-photos .team-photo img{width:100%}}
  @media (prefers-reduced-motion:reduce){.team-photos .team-photo{transform:none}}
  .burger{background:var(--feuille)}
  header{background:color-mix(in srgb,var(--bg) 72%,transparent)}
  .menu{background:var(--bg)}

  /* Onglets des exemples : pastilles, l'active en encre comme au portail. */
  .uc-tab{border:0;background:var(--carte);color:var(--muted);font-weight:500}
  .uc-tab:hover{color:var(--fg);background:var(--pastille)}
  .uc-tab[aria-pressed="true"],.band .uc-tab[aria-pressed="true"]{background:var(--fg);color:var(--feuille)}
  .tl-when{background:var(--pastille);border:0;color:var(--muted);font-weight:500;letter-spacing:0}

  /* Boutons pleins, pas de verre liquide (Mika, 2026-10-28). Le vert est celui
     de la carte de garantie (--band, #064e3b), le meme pour les boutons et les
     pastilles de section. Creme sur ce vert = 9,9:1. */
  :root{--nuit:#064e3b; --nuit-hover:#0B6149}
  .btn{background:var(--nuit);color:#FFFDF6;border-color:var(--nuit);
    box-shadow:0 6px 16px rgb(6 78 59 / .18);transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
  .btn:hover{background:var(--nuit-hover);opacity:1;transform:translateY(-1px);box-shadow:0 10px 22px rgb(6 78 59 / .22)}
  .btn:focus-visible{outline-color:var(--nuit)}
  .btn-ghost{background:var(--feuille);color:var(--fg);border-color:rgb(28 23 16 / .14);box-shadow:none}
  .btn-ghost:hover{background:var(--feuille);color:var(--nuit);border-color:var(--nuit);box-shadow:none}
  .menu .btn{color:#FFFDF6}
  .guarantee.dark .cta-mid .btn{background:#FFFDF6;color:var(--nuit);border-color:#FFFDF6}
  .nudge-tab{background:var(--nuit);color:#FFFDF6}
  @media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

  /* Le menu du haut comme les onglets du portail (MenuPortail.tsx) : une pilule
     cerclee, et l'onglet de la section a l'ecran en blanc sureleve. */
  .nav-links{gap:.25rem;padding:.25rem;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
  .nav-links a{padding:.4rem 1rem;border-radius:999px;color:var(--fg-soft);font-size:.875rem;font-weight:400;
    transition:background .15s ease,color .15s ease}
  .nav-links a:hover{background:rgb(255 255 255 / .6);color:var(--fg)}
  .nav-links a[aria-current="true"]{background:#fff;color:var(--fg);font-weight:600;
    box-shadow:0 1px 2px rgb(28 23 16 / .08),0 1px 3px rgb(28 23 16 / .06)}

  /* Lensky remplace les pictogrammes du deroulement : une scene sur un pastel
     par etape, comme les cartes de la journee au portail. Aucun texte sur le pastel. */
  .tl-ico{width:100%;height:auto;aspect-ratio:170/120;border:0;border-radius:18px;margin-bottom:1rem;
    display:grid;place-items:end center;overflow:visible}
  .tl-ico img{display:block;width:88%;height:auto;margin-bottom:-2px}
  .tl-step:nth-child(1) .tl-ico{background:var(--pastel-lavande)}
  .tl-step:nth-child(2) .tl-ico{background:var(--pastel-jaune)}
  .tl-step:nth-child(3) .tl-ico{background:var(--pastel-menthe)}
  .tl-step:nth-child(4) .tl-ico{background:var(--pastel-rose)}
  .tl-step:nth-child(5) .tl-ico{background:var(--pastel-peche)}
  .tl-num{top:.6rem;right:.6rem;width:1.6rem;height:1.6rem;background:var(--fg);color:var(--feuille);
    font-family:var(--font-display);font-size:.78rem}
  .tl-step{background:var(--carte)}
  .tl-step:not(:last-child)::after{display:none}
  @media (hover:hover) and (pointer:fine){
    .tl-step{transition:transform .2s ease}
    .tl-step:hover{transform:translateY(-3px)}
  }
  @media (prefers-reduced-motion:reduce){.tl-step:hover{transform:none}}

  /* Lensky en tete de section, libre, sans cadre, comme les en-tetes du portail. */
  .lensky-tete{display:block;width:clamp(150px,18vw,190px);height:auto;margin:0 auto 1rem}
  .guarantee .lensky-garantie{display:block;width:clamp(140px,16vw,170px);height:auto;margin:0 auto 1.25rem}
  /* La marque du portail (PortalHeader.tsx) : « Groupe Lenoks | goservice.ai ».
     Le logo Groupe Lenoks porte la boussole et mene a lenoks.ai. */
  .marque{display:flex;align-items:center;gap:.65rem;min-width:0}
  .marque-gl{display:flex;flex:none;align-items:center;opacity:.9;transition:opacity .15s}
  .marque-gl:hover{opacity:1}
  .marque-gl img{display:block;height:1.125rem;width:auto}
  /* Separateur dessine en trait, pas le glyphe « | » : un glyphe reste sur la ligne
     de base du texte et ne se centre jamais sur le logo. */
  .marque-sep{display:block;flex:none;width:1px;height:1.375rem;background:var(--line);font-size:0;color:transparent;overflow:hidden}
  /* Le mot-symbole du pied de page (Goservice + .ai en vert), prefere par Mika. */
  .marque-gs{display:block;font-size:1.3rem;font-weight:600;letter-spacing:-.04em;text-decoration:none;white-space:nowrap;line-height:1;transform:translateY(-1px)}
  .marque-gs .dot{color:var(--brand)}
  @media (max-width:420px){.marque-gl img{height:14px}.marque-sep{height:18px}.marque-gs{font-size:1rem}}

/* En-tete : le bouton ne se coupe jamais, et la barre s'elargit assez pour
   loger marque, menu et bouton sur les pages a conteneur etroit (FAQ). */
.nav .btn-sm{white-space:nowrap}
@media (min-width:1200px){header .wrap{max-width:max(var(--maxw),80rem)}}
/* En-tete sur toute la largeur (Mika, 2026-11-10) : logo Groupe Lenoks plus gros et
   colle a gauche, Deroulement / Integrations / Securite au centre exact de l'ecran,
   Reserver + Connexion + FR/EN colles a droite. Grille 1fr auto 1fr : les deux
   colonnes de cote ont la meme largeur, donc le menu tombe pile au milieu. */
header .wrap.nav{max-width:none;padding-inline:clamp(1rem,2.5vw,2.5rem)}
.marque-gl img{height:1.5rem}
@media (min-width:960px){
  .nav{display:grid;grid-template-columns:1fr auto 1fr}
  .nav .marque{justify-self:start}
  .nav .nav-links{justify-self:center}
  .nav .nav-end{justify-self:end}
}
/* Titres equilibres : pas de mot seul sur la derniere ligne. */
h1,h2{text-wrap:balance}
/* La grande feuille blanche des pages du portail, pour les pages a contenu
   unique (FAQ) : posee sur le creme, coins genereux. Dedans, les cartes
   repassent en creme pour ressortir sur le blanc. */
.feuille-page{background:var(--feuille);border-radius:32px;box-shadow:0 1px 2px rgb(28 23 16 / .04);
  margin-block:clamp(1rem,2.5vw,1.75rem) clamp(2.5rem,6vw,4rem);
  padding:clamp(2rem,5vw,3.5rem) clamp(1.25rem,4vw,3rem)}
@media (max-width:720px){.feuille-page{border-radius:26px;margin-inline:.6rem}}
.feuille-page .faq details{background:var(--carte)}
/* Deroulement juste sous la video : on resserre l'espace entre les deux, et
   ses cartes passent en blanc sur le creme (Mika, 2026-10-28). */
.video-sec{padding-bottom:clamp(1rem,2.5vw,2rem)}
#deroulement{padding-top:clamp(1rem,2.5vw,2rem)}
#deroulement .tl-step{background:var(--feuille);box-shadow:0 1px 2px rgb(28 23 16 / .05),0 12px 30px rgb(28 23 16 / .05)}

/* Meme resserrement entre Securite et l'offre, puis entre l'offre et la
   reservation (Mika, 2026-10-28). */
#securite{padding-bottom:clamp(1rem,2.5vw,2rem)}
.sec-offre{padding-block:clamp(1rem,2.5vw,2rem)}
#reservation{padding-top:clamp(1rem,2.5vw,2rem)}

/* Le logo au complet (Groupe Lenoks | Goservice.ai) est un seul lien qui
   ramene en haut de l'accueil de la formation (Mika, 2026-10-28). */
a.marque{text-decoration:none;color:inherit}
a.marque:hover .marque-gl{opacity:1}
a.marque:focus-visible{outline:2px solid var(--nuit);outline-offset:4px;border-radius:8px}

/* Connexion au portail de formation, et choix de langue en pilule comme sur
   le site Lenoks. L'anglais n'existe pas encore : EN reste grise. */
.nav-connexion{background:var(--feuille)}
.lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface)}
.lang a,.lang .lang-off{padding:.28rem .6rem;border-radius:999px;font-size:.75rem;font-weight:600;
  line-height:1.2;text-decoration:none;color:var(--fg-soft)}
.lang a[aria-current="true"]{background:var(--nuit);color:#FFFDF6}
.lang .lang-off{color:var(--muted);opacity:.55;cursor:not-allowed}
.nav-end,.nav-right{gap:.5rem}
@media (max-width:1100px){.nav-connexion{display:none}}
/* Telephone : le choix FR/EN reste visible, comme sur le site de LEA (Mika,
   2026-10-29). Pilule et menu un peu plus petits pour que tout tienne sur une ligne. */
@media (max-width:420px){
  .nav-end,.nav-right{gap:.35rem}
  .lang{padding:2px}
  .lang a,.lang .lang-off{padding:.25rem .45rem;font-size:.7rem}
  .burger{width:40px;height:40px}
}
/* En-tete : Reserver et Connexion exactement de la meme taille (Mika, 2026-10-28). */
.nav-end .btn-sm,.nav-right .btn-sm{padding:.5rem 1.05rem;font-size:.875rem;line-height:1.2;border-width:1px}

/* Ecran de choix Formation / LEA sous l'en-tete (style dans choix.css). Ici,
   l'en-tete est dans le flux : l'ecran prend le reste de la hauteur. Les ancres
   tombent sous l'en-tete collant. */
html{scroll-padding-top:4.5rem}
.choix{--choix-entete:4.6rem}
/* Le haut de la page (surtitre, grand titre, appel) et la video remontent sur une carte
   blanc casse qui chevauche l'animation : on lit le titre des l'arrivee (Mika, 2026-10-28).
   Lensky court a droite, hors de la carte. */
/* Les mots Formation / Agent vocal ont ete retires (Rico, 2026-11-06), mais Mika garde
   l'animation de Lensky en fond du premier ecran (2026-11-06). Le haut de la carte
   s'arrete au milieu du Chateau Frontenac (Mika, 2026-11-06) : dans q-loin.webp, le
   milieu du chateau est a 55,6 % de la hauteur de la scene en partant du bas. La scene
   mesure max(hauteur du premier ecran, 56,25vw) et est ancree en bas (choix.css). */
/* Tout format d'ecran (Mika, 2026-11-10) : avant, la scene suivait la largeur seulement
   (56,25vw) et la carte remontait de 55,6 % de cette hauteur. Sur un ecran plus large
   que haut (portable 1366 x 657, ecran large et bas), la carte passait sous l'en-tete et
   coupait le titre ; sur un ecran tres haut, elle tombait trop bas. Maintenant le haut de
   la carte est toujours a --carte-haut sous l'en-tete (une part de la HAUTEUR de
   l'ecran), et c'est la scene qui se place pour que le milieu du chateau tombe pile
   la : elle mesure au moins 56,25vw (pour couvrir la largeur) et assez pour que le
   chateau (44,4 % depuis le haut) arrive a --carte-haut. L'ecran d'animation mesure
   --carte-haut + 55,6 % de la scene ; le surplus de ciel est rogne en haut. */
:root{--carte-haut:clamp(4rem,15svh,20rem);
  --scene-h:max(56.25vw,calc(var(--carte-haut) / .444));--chevauche:calc(.556 * var(--scene-h))}
/* .choix.choix : choix.css est charge apres ce fichier, il faut plus de poids. */
.choix.choix:not(.choix-lea){min-height:0;height:calc(var(--carte-haut) + var(--chevauche));padding:0}
.choix.choix:not(.choix-lea) .choix-scene{height:var(--scene-h)}
.carte-debut{position:relative;z-index:21;margin:calc(-1 * var(--chevauche)) auto 0;
  max-width:min(60rem,calc(100% - 2rem));background:#FFFDF8;border-radius:28px;
  box-shadow:0 -12px 40px rgba(0,0,0,.18);padding-block:clamp(1.25rem,min(3.5vw,4svh),2.75rem) clamp(1rem,2vw,1.5rem)}
.carte-debut #debut{padding-top:0}
/* Le titre, le sous-titre et les espaces de la carte suivent aussi la hauteur de
   l'ecran : sur un portable bas, le bouton reste visible sans defiler. */
@media (min-width:761px) and (max-width:899px){
  .carte-debut .hero h1{font-size:clamp(2.1rem,min(1.35rem + 3.6vw,7.4svh),4.6rem);margin-bottom:min(1rem,1.6svh)}
  .carte-debut .hero .lead{font-size:clamp(1.05rem,min(.97rem + .5vw,2.9svh),1.4rem);margin-bottom:min(2.25rem,1.5svh)}
  .carte-debut .hero .eyebrow{margin-bottom:min(1.25rem,2svh)}
}
.choix .choix-lensky{--lh:min(26%,34vw);left:auto;right:1.5%}
/* Telephone : on garde le reglage du 2026-10-29 (scene de 47svh, carte juste sous
   Lensky), qui fonctionnait. */
@media (max-width:760px){
  :root{--scene-h:calc(47svh - 4.6rem);--chevauche:calc(.556 * var(--scene-h))}
  .choix.choix:not(.choix-lea){height:auto;min-height:calc(var(--choix-bas) - var(--choix-entete,0px));
    padding:calc(var(--choix-y) - var(--choix-entete,0px)) clamp(1rem,3vw,2.5rem) clamp(1.5rem,4vw,3rem)}
  .choix.choix:not(.choix-lea) .choix-scene{height:max(100%,var(--scene-h))}
  .carte-debut{max-width:calc(100% - 1.5rem)}
}
/* ==========================================================================
   MEMES PROPORTIONS SUR TOUS LES ORDINATEURS ET TELES (Mika, 2026-11-10) : « je veux
   que ce soit les memes proportions partout ». La reference est l'ecran de Mika :
   Chrome a 1500 x 830 (ecran 3000 x 2000 a 200 %). Au-dessus de 1100 px de large, la
   page entiere est dessinee comme sur cet ecran puis agrandie ou reduite d'un bloc,
   comme une image : la taille de base (1rem) vaut 16 px a 1500 x 830 et suit la
   largeur, ou la hauteur si l'ecran est plus allonge que celui de Mika (sinon le haut
   de page deborderait en bas). Toutes les tailles sont en rem, donc tout suit.
   Les reglages qui changeaient selon la largeur (conteneur plus large a 1500 et 1800,
   titre a 24ch a 1600, Connexion cache sous 1100...) sont figes a leur valeur de
   l'ecran de Mika. Seuil abaisse de 1100 a 900 px le 2026-11-10 : un portable 1366 a
   125 % ne fait que 1093 px et la carte y prenait toute la largeur ; Mika veut que
   l'espace entre le texte et le bord du carre blanc reste le meme partout. Sous 900 px
   (tablette debout, telephone), rien ne change : en reduction, le texte deviendrait
   illisible.
   ========================================================================== */
@media (min-width:900px){
  html{font-size:max(10px,min(calc(100vw * 16 / 1500),calc(100svh * 16 / 830)))}
  /* Le menu du centre reste affiche (comme chez Mika), pas de bouton hamburger. */
  .nav-links{display:flex}
  .burger,.menu{display:none!important}
  .nav{display:grid;grid-template-columns:1fr auto 1fr}
  .nav .marque{justify-self:start}
  .nav .nav-links{justify-self:center}
  .nav .nav-end{justify-self:end}
  .marque-gl img{height:1.75rem}
  /* Valeurs de l'ecran de Mika (1vw = .9375rem a 1500 px). */
  :root{--maxw:88rem;--narrow:54rem;
    --h1:4.6rem;--h2:2.9rem;--h3:1.35rem;--lead:1.4rem;--body:1.11rem;--small:.93rem;--eyebrow:.775rem;--pad-sec:5.5rem;
    /* Haut de page : la carte commence 5rem sous l'en-tete, et la scene fait au moins
       52,73rem (sa hauteur chez Mika), ou plus si l'ecran est plus large. */
    --carte-haut:5rem;--scene-h:max(56.25vw,52.73rem)}
  .guarantee,.offer{max-width:min(64rem,100%)}
  .hero .narrow{max-width:none}
  .hero h1,.carte-debut .hero h1{max-width:20ch;font-size:var(--h1);margin-bottom:1rem}
  .hero .lead,.carte-debut .hero .lead{max-width:40ch;font-size:var(--lead);margin-bottom:2.25rem}
  .hero .eyebrow{margin-bottom:1.25rem}
  .carte-debut{border-radius:1.75rem;padding-block:2.75rem 1.5rem}
  .nav-connexion{display:inline-flex}
  /* Ce qui etait en pixels fixes (icones, Lensky, pastilles) suit le meme agrandissement :
     memes tailles que chez Mika, exprimees en rem (px / 16). */
  svg[width="18"]{width:1.125rem;height:1.125rem}
  svg[width="20"]{width:1.25rem;height:1.25rem}
  svg[width="26"]{width:1.625rem;height:1.625rem}
  .logo-item svg{width:1.875rem;height:1.875rem}
  .tl-ico svg{width:2.5rem;height:2.5rem}
  .guarantee .badge{width:3.5rem;height:3.5rem}
  .guarantee.dark .badge{width:4.375rem;height:4.375rem}
  .cert img{width:15.625rem}
  .lensky-tete{width:11.875rem}
  .guarantee .lensky-garantie{width:10.625rem}
  [style*="width:52px"]{width:3.25rem!important;height:3.25rem!important}
  .modal-x{width:2.5rem;height:2.5rem}
  .nudge-x{width:2.125rem;height:2.125rem}
}
/* ==========================================================================
   TELEPHONE COMPACT (Mika, 2026-10-29) : la page faisait 16 ecrans de haut. Meme
   structure et memes sections que sur l'ordinateur, mais ce qui est cote a cote sur
   l'ordinateur reste en blocs (grilles de 2 ou 3) au lieu de s'empiler un par un, et
   les petits textes de detail qu'on ne lit pas sur un telephone sont caches. Rien
   n'est retire du HTML : l'ordinateur ne change pas.
   ========================================================================== */
@media (max-width:760px){
  :root{--pad-sec:2.25rem}
  .choix .choix-lensky{--lh:48px;right:4%}
  .lensky-tete{width:96px;margin-bottom:.5rem}
  .statement{font-size:clamp(1.6rem,7vw,2rem)}

  /* Haut de page : les deux puces sont repetees plus bas dans l'offre. */
  .hero .trust-line{display:none}
  .hero .btn{margin-top:-.75rem}

  /* Deroulement : 5 etapes en grille de 2, sans le detail depliable. */
  #deroulement .tl{grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1.5rem}
  #deroulement .tl-step{padding:.6rem .6rem .8rem;border-radius:18px}
  #deroulement .tl-step:last-child{grid-column:1 / -1;display:grid;grid-template-columns:42% 1fr;column-gap:.75rem;align-items:center}
  #deroulement .tl-step:last-child .tl-ico{grid-row:1 / span 3;margin:0}
  #deroulement .tl-step:last-child .tl-when{justify-self:start}
  #deroulement .tl-ico{margin-bottom:.5rem;border-radius:14px}
  #deroulement .tl-num{top:.35rem;right:.35rem;width:1.3rem;height:1.3rem;font-size:.7rem}
  #deroulement .tl-when{font-size:.68rem;padding:.1rem .5rem;margin-bottom:.3rem}
  #deroulement .tl-step h3{font-size:.95rem;line-height:1.2;margin-bottom:.2rem}
  #deroulement .tl-step p{font-size:.8rem;line-height:1.35}
  #deroulement .tl-more,.modele-4c{display:none}

  /* Le format : les 3 chiffres sur une ligne, sans leur paragraphe. */
  #format .center > .muted{display:none}
  #format .stats{grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:1.25rem}
  #format .stat .n{font-size:1.75rem}
  #format .stat .n-txt{font-size:1.15rem;line-height:1.5}
  #format .stat .s{font-size:.78rem;margin-top:.35rem}
  #format .stat .l{display:none}
  #format .guarantee{margin-top:1.5rem !important;padding:1.5rem 1.25rem}
  #format .guarantee .lensky-garantie{width:96px;margin-bottom:.5rem}
  #format .guarantee h2{font-size:1.6rem}
  #format .guarantee > .muted{display:none}
  #format .cta-mid{margin-top:1.25rem}

  /* Integrations : un mur compact de 24 logos (6 x 4), sans la consigne de survol. */
  #integrations .center > .muted{display:none}
  #integrations .logo-grid{grid-template-columns:repeat(6,1fr);gap:.9rem .25rem;margin-top:1.25rem}
  #integrations .logo-item svg{width:24px;height:24px}
  #integrations .logo-item > span{font-size:.62rem}
  #integrations .logo-item:nth-child(n+25){display:none}
  #integrations .wrap > .muted{margin-top:1rem !important}

  /* Qui est derriere : 4 photos en bloc de 2 x 2, 4 chiffres en 2 x 2 sans paragraphe. */
  .band:has(.team-photos) .lead{display:none}
  .team-photos{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;align-items:center;margin-top:1.25rem}
  .team-photos .team-photo{width:auto}
  .team-photos .team-photo img{width:100%;height:9.5rem;object-fit:cover}
  .proof{display:grid;grid-template-columns:1fr 1fr;margin-top:1.25rem}
  .proof-cell{padding:1rem .9rem;border-top:0;border-left:0}
  .proof-cell:nth-child(n+3){border-top:1px solid rgb(28 23 16 / .08)}
  .proof-cell:nth-child(even){border-left:1px solid rgb(28 23 16 / .08)}
  .proof-cell:last-child:nth-child(odd){grid-column:1/-1}
  .proof-cell .n{font-size:1.45rem}
  .proof-cell h3{font-size:.82rem;line-height:1.3;margin:.35rem 0 0}
  .proof-cell p{display:none}

  /* Securite : les 3 cartes cote a cote comme sur l'ordinateur, sans le detail ni la
     consigne de survol. */
  #securite .center > .muted,#securite .wrap > .muted,#securite .card .more{display:none}
  #securite .grid{grid-template-columns:repeat(3,1fr) !important;gap:.4rem;margin-top:1.25rem;align-items:stretch}
  #securite .card{padding:.75rem .6rem;border-radius:16px}
  #securite .card h3{margin:0 0 .25rem;font-size:.8rem;line-height:1.2}
  #securite .card p{font-size:.7rem;line-height:1.35;margin:0}

  /* L'offre : seulement les titres des puces, en 2 colonnes, badge et texte cote a cote. */
  .sec-offre .lead,.offer li .d{display:none}
  .offer{padding:1.25rem 1rem}
  .offer h2{margin-bottom:0 !important}
  .offer ul{grid-template-columns:1fr 1fr;gap:.55rem .6rem;margin-top:.9rem;font-size:.78rem;line-height:1.3}
  .offer li{gap:.35rem}
  .offer li svg{width:15px;height:15px;margin-top:1px}
  .cert{flex-direction:row;gap:.75rem;margin-top:1rem;padding-top:1rem;text-align:left}
  .cert img{width:60px}
  .cert span{font-size:.75rem;text-align:left}
  .offer .center[style]{margin-top:1rem !important}

  /* Reservation : sans les deux puces de confiance. */
  #reservation .trust-line{display:none}
  #reservation .resv-form{margin-top:1.25rem}
  .mfor{font-size:.82rem;padding:.8rem 1rem}

  /* Pied de page : les deux listes cote a cote, la phrase de presentation sous le logo
     est deja dans la ligne du bas. */
  footer{padding-block:1.75rem}
  footer .foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 1rem}
  footer .foot-grid > div:first-child{grid-column:1 / -1}
  footer .foot-grid > div:first-child p{display:none}
  footer .foot-base{margin-top:1.25rem;padding-top:1rem;font-size:.8rem}
}
/* Bandeau des temoins : meme rendu que celui du site de LEA (ConsentBanner), gris et
   neutre, c'est un avis legal et non un appel a l'action. Au-dessus de la barre de
   reservation collee en bas sur telephone. */
.temoins{position:fixed;left:.75rem;right:.75rem;bottom:.75rem;z-index:60;margin:0 auto;max-width:42rem;
  display:flex;flex-direction:column;gap:.75rem;padding:1rem;border-radius:12px;
  border:1px solid rgb(82 82 91 / .4);background:rgb(39 39 42 / .95);box-shadow:0 10px 25px rgb(0 0 0 / .25);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.temoins[hidden]{display:none}
.temoins p{margin:0;max-width:none;font-size:.875rem;line-height:1.6;color:#d4d4d8}
.temoins a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.temoins a:hover{color:#f4f4f5}
.temoins-choix{display:flex;gap:.5rem;flex-shrink:0}
.temoins button{font:inherit;font-size:.875rem;font-weight:600;padding:.5rem 1rem;border-radius:999px;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.temoins button[data-choix="denied"]{background:transparent;border:1px solid rgb(113 113 122 / .6);color:#d4d4d8}
.temoins button[data-choix="denied"]:hover{border-color:#d4d4d8;color:#f4f4f5}
.temoins button[data-choix="granted"]{background:#e4e4e7;border:1px solid #e4e4e7;color:#18181b}
.temoins button[data-choix="granted"]:hover{background:#fff}
@media (min-width:640px){.temoins{flex-direction:row;align-items:center;bottom:1rem}.temoins p{flex:1}}