/* 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:18px;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:22px;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)}}
/* 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. */
/* Le premier ecran finit a --choix-bas : la carte commence a --carte-y (choix.css), la
   meme hauteur que le panneau du haut de LEA. */
.carte-debut{--chevauche:calc(var(--choix-bas,75svh) - var(--carte-y,51svh));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(2rem,3.5vw,2.75rem) clamp(1rem,2vw,1.5rem)}
.carte-debut #debut{padding-top:0}
.choix .choix-lensky{--lh:min(26%,34vw);left:auto;right:1.5%}
@media (max-width:760px){.carte-debut{max-width:calc(100% - 1.5rem)}}
/* ==========================================================================
   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 .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}}