/* =========================================================
   CANAL+ — LE JEU VENU D'AILLEURS
   Feuille de style unique — mobile (QR code) + borne tablette
   ========================================================= */

/* ---------- Polices de marque ---------- */
@font-face{
  font-family:"Canalp";
  src:url("assets/fonts/Canalp-Regu.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Canalp";
  src:url("assets/fonts/Canalp-ReguItal.otf") format("opentype");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Canalp";
  src:url("assets/fonts/Canalp-Bold.otf") format("opentype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Canalp";
  src:url("assets/fonts/Canalp-BoldItal.otf") format("opentype");
  font-weight:700; font-style:italic; font-display:swap;
}

/* ---------- Variables ---------- */
:root{
  --noir:#000000;
  --cyan:#7ACFE5;
  --blanc:#FFFFFF;
  --rouge:#FF3B30;
  --vert:#2FD07B;

  /* Échelle typographique fluide : suit la largeur du cadre, pas de l'écran.
     Résultat : rendu identique sur mobile 360px et sur tablette 1024px. */
  --u:calc(var(--frame-w) / 100);

  --frame-max:560px;      /* largeur max du cadre sur tablette / desktop */
  --pad:6.5vw;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:"Canalp","Helvetica Neue",Arial,sans-serif;
  background:var(--noir);
  color:var(--blanc);
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* pas de sélection de texte ni de zoom accidentel sur borne */
  -webkit-tap-highlight-color:transparent;
}
body.is-borne{user-select:none;-webkit-user-select:none;touch-action:manipulation;}
img{display:block;max-width:100%;height:auto;}
button,input,select,textarea{font:inherit;color:inherit;}
sup{font-size:.55em;vertical-align:super;}

/* ---------- Structure ---------- */
.app{
  min-height:100dvh;
  display:flex;
  justify-content:center;
  background:
    /* halo « glitch » en haut à droite, rappel de la maquette */
    radial-gradient(120% 60% at 100% 0%, rgba(122,207,229,.16) 0%, rgba(122,207,229,0) 60%),
    repeating-linear-gradient(90deg, rgba(122,207,229,.05) 0 1px, transparent 1px 9px) top right/55% 34% no-repeat,
    var(--noir);
}

.screen{display:none;width:100%;}
.screen.is-active{display:block;}

.frame{
  width:100%;
  max-width:var(--frame-max);
  margin-inline:auto;
  padding:calc(env(safe-area-inset-top) + 6vw) var(--pad) calc(env(safe-area-inset-bottom) + 8vw);
  display:flex;
  flex-direction:column;
}

/* Les colonnes n'existent qu'en écran large : ici elles s'effacent
   et leurs enfants redeviennent les éléments de la colonne unique. */
.col{display:contents;}
.link-rules--col{order:2;}      /* renvoyé en bas de page sur mobile */

/* ---------- Animations d'entrée ----------
   L'ordre d'apparition est piloté par --i, posé par app.js sur chaque
   élément de l'écran affiché. */
.screen.is-active .anim{
  animation:apparait .45s cubic-bezier(.22,.9,.3,1) backwards;
  animation-delay:calc(var(--i, 0) * 55ms);
}
@keyframes apparait{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:none;}
}

/* ---------- Éléments communs ---------- */
.brand{margin-bottom:calc(var(--u)*7);}
/* Logotype provisoire composé en Canalp Bold.
   À remplacer par le fichier vectoriel officiel dès réception. */
.logo{
  display:inline-block;
  font-weight:700;
  font-size:calc(var(--u)*9);
  letter-spacing:-.02em;
  line-height:1;
}

.kicker{
  font-style:italic;font-weight:700;
  color:var(--cyan);
  font-size:calc(var(--u)*7.4);
  line-height:1.05;
  letter-spacing:-.01em;
}
.dates{
  font-style:italic;font-weight:700;
  font-size:calc(var(--u)*3.3);
  letter-spacing:.02em;
  margin-top:calc(var(--u)*2);
}

.headline{
  font-style:italic;font-weight:700;
  font-size:calc(var(--u)*9);
  line-height:1.02;
  margin-top:calc(var(--u)*1.5);
}
.headline--xl{font-size:calc(var(--u)*15.5);display:inline-block;line-height:.98;}
.headline--form,.headline--quiz{font-size:calc(var(--u)*6.1);margin-top:calc(var(--u)*8);}
.accent{color:var(--cyan);}

.visual{margin-top:calc(var(--u)*4);border-bottom:calc(var(--u)*1.4) solid var(--cyan);}
.visual img{width:100%;}

.lead{
  color:var(--cyan);
  font-style:italic;font-weight:700;
  font-size:calc(var(--u)*3.4);
  line-height:1.25;
  margin-top:calc(var(--u)*7);
}
.lead--sm{color:var(--blanc);font-size:calc(var(--u)*2.6);margin-top:calc(var(--u)*3);}

/* Césures conditionnelles : une seule des deux s'applique à la fois. */
.br-paysage{display:none;}

/* L'export du message codé porte déjà son propre encadré :
   aucune bordure ni fond ajoutés ici, sinon le cadre est doublé. */
.cipher{margin-top:calc(var(--u)*4);}
.cipher img{width:100%;}

/* ---------- Boutons ---------- */
.btn{
  display:block;width:100%;
  margin-top:calc(var(--u)*7);
  padding:calc(var(--u)*4.5) calc(var(--u)*3);
  min-height:56px;                 /* cible tactile confortable */
  border:0;background:var(--blanc);color:var(--noir);
  font-weight:700;font-size:calc(var(--u)*4.6);
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform .12s ease, opacity .12s ease;
}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.4;cursor:default;transform:none;}
/* léger relief au survol, uniquement là où il y a une souris */
@media (hover:hover){
  .btn:not(:disabled):hover{transform:scale(1.02);box-shadow:0 0 26px rgba(122,207,229,.35);}
  .answer:hover{border-color:var(--cyan);}
  .link-rules:hover{color:var(--cyan);}
}
/* respiration discrète sur le bouton principal une fois qu'il devient actif */
.btn--primary:not(:disabled){animation:respire 3.4s ease-in-out 1.2s infinite;}
@keyframes respire{
  0%,92%,100%{box-shadow:0 0 0 0 rgba(122,207,229,0);}
  96%{box-shadow:0 0 0 10px rgba(122,207,229,.14);}
}
.btn:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;}
.btn__note{font-weight:400;font-size:.8em;}

/* =========================================================
   MODE BORNE — bouton Quitter, confirmation, veille
   Affichés uniquement sur tablette et ordinateur (voir plus bas) :
   sur mobile, le visiteur ferme simplement son onglet.
   ========================================================= */
/* Le bouton occupe une bande réservée en haut de page (--quit-bande) :
   le contenu commence en dessous, aucun risque de superposition. */
:root{--quit-bande:40px;}
.quit{
  position:fixed; top:8px; left:8px; z-index:40;
  display:none;                      /* activé par la media query tablette/ordi */
  padding:5px 14px; min-height:28px;
  border:1px solid rgba(255,255,255,.3); background:transparent;
  color:rgba(255,255,255,.62);
  font-weight:700; font-style:italic; font-size:12px; letter-spacing:.04em;
  cursor:pointer;
  transition:border-color .12s ease, color .12s ease, transform .12s ease;
}
/* L'accueil est déjà le point de départ : rien à quitter. */
body[data-ecran="accueil"] .quit{display:none;}
.quit:active{transform:scale(.96);}
.quit:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;}
@media (hover:hover){
  .quit:hover{border-color:var(--cyan);color:var(--cyan);}
}

/* Confirmation avant de quitter — le seul point de sortie destructif. */
.modal{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(0,0,0,.78);
}
.modal[hidden]{display:none;}
.modal__box{
  width:100%; max-width:460px;
  padding:28px; border:2px solid var(--cyan); background:var(--noir);
  text-align:center;
}
.modal__title{font-style:italic;font-weight:700;font-size:24px;line-height:1.1;}
.modal__actions{display:flex;gap:12px;margin-top:24px;}
.modal__actions .btn{margin-top:0;font-size:16px;min-height:50px;padding:14px 12px;animation:none;}
.btn--ghost{background:transparent;color:var(--blanc);border:2px solid rgba(255,255,255,.5);}

/* Dernières secondes avant le retour automatique : un simple avertissement,
   n'importe quelle interaction relance le compteur. */
.idle{
  /* Au-dessus de la confirmation : le décompte reste lisible même
     si le visiteur a laissé la pop-up ouverte. */
  position:fixed; left:50%; bottom:20px; z-index:60;
  transform:translateX(-50%);
  padding:12px 22px; border:2px solid var(--cyan); background:rgba(0,0,0,.85);
  font-weight:700; font-size:15px; text-align:center;
}
.idle[hidden]{display:none;}

.link-rules{
  display:block;text-align:center;
  margin-top:calc(var(--u)*4);
  color:var(--blanc);text-decoration:none;
  font-style:italic;font-weight:700;
  font-size:calc(var(--u)*3.6);
  padding:calc(var(--u)*2);
}

.legal{
  margin-top:calc(var(--u)*8);
  font-size:calc(var(--u)*2.1);
  line-height:1.45;
  color:rgba(255,255,255,.8);
}
.legal p + p{margin-top:calc(var(--u)*2);}

/* ---------- Formulaire ---------- */
.form{display:block;}
.field{margin-top:calc(var(--u)*3);}
.field:first-child{margin-top:calc(var(--u)*6);}

.input{
  width:100%;
  min-height:60px;
  padding:calc(var(--u)*4) calc(var(--u)*4);
  border:2px solid transparent;border-radius:0;
  background:var(--blanc);color:var(--noir);
  font-size:16px;                  /* ≥16px : empêche le zoom auto iOS */
  font-size:max(16px, calc(var(--u)*4.4));
}
.input::placeholder{color:#111;opacity:1;}
.input:focus{outline:0;border-color:var(--cyan);}
.input--select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M0 0h12L6 8z' fill='%23000'/></svg>");
  background-repeat:no-repeat;
  background-position:right calc(var(--u)*4) center;
  background-size:calc(var(--u)*4) auto;
  padding-right:calc(var(--u)*11);
}
.input--select:invalid{color:#111;}   /* le placeholder reste lisible */

.input.has-error{border-color:var(--rouge);}
.error{
  display:none;
  color:var(--rouge);
  font-size:calc(var(--u)*3);
  margin-top:calc(var(--u)*1.5);
}
.error.is-visible{display:block;}

.consent{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:calc(var(--u)*3);
  margin-top:calc(var(--u)*5);
}
.checkbox{
  appearance:none;-webkit-appearance:none;
  width:calc(var(--u)*7);height:calc(var(--u)*7);
  min-width:28px;min-height:28px;
  background:var(--blanc);border:2px solid var(--blanc);
  cursor:pointer;
}
.checkbox:checked{
  background:var(--cyan);
  box-shadow:inset 0 0 0 4px var(--blanc);
}
.checkbox:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;}
.checkbox.has-error{border-color:var(--rouge);}
.consent__text{display:block;cursor:pointer;}
.consent__title{
  display:block;
  font-style:italic;font-weight:700;
  font-size:calc(var(--u)*3.4);
  margin-bottom:calc(var(--u)*1.5);
}
.consent__body{
  display:block;
  font-size:calc(var(--u)*2.2);
  line-height:1.4;
  color:rgba(255,255,255,.85);
}
.todo{color:var(--rouge);}
.consent .error{grid-column:1 / -1;}

/* ---------- Quiz ---------- */
.answers{margin-top:calc(var(--u)*5);}
.answer{
  display:block;width:100%;text-align:left;
  margin-top:calc(var(--u)*3);
  padding:calc(var(--u)*5) calc(var(--u)*4);
  min-height:64px;
  border:3px solid var(--blanc);
  background:var(--blanc);color:var(--noir);
  font-size:calc(var(--u)*4.4);
  cursor:pointer;
  transition:background .12s ease, color .12s ease, transform .12s ease;
}
.answer:active{transform:scale(.99);}
.answer[aria-checked="true"]{
  background:var(--cyan);
  border-color:var(--cyan);
  transform:scale(1.015);
}
.answer:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;}
.answers.is-locked .answer{pointer-events:none;}

/* --- Révélation du résultat, avant le passage à l'écran de fin --- */
.answer.est-juste{
  background:var(--vert);border-color:var(--vert);color:#04220f;
  animation:pulse-juste .5s ease-out;
}
.answer.est-faux{
  background:var(--rouge);border-color:var(--rouge);color:#fff;
  animation:secousse .45s ease-out;
}
/* les propositions non choisies s'effacent pour isoler le résultat */
.answers.is-locked .answer:not(.est-juste):not(.est-faux){opacity:.3;}

@keyframes pulse-juste{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(47,208,123,.55);}
  55%{transform:scale(1.04);box-shadow:0 0 0 14px rgba(47,208,123,0);}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(47,208,123,0);}
}
@keyframes secousse{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-7px);}
  40%{transform:translateX(6px);}
  60%{transform:translateX(-4px);}
  80%{transform:translateX(2px);}
}

/* ---------- Écrans de fin ---------- */
.glyph{margin:calc(var(--u)*10) auto calc(var(--u)*4);width:calc(var(--u)*22);}
.glyph svg{width:100%;height:auto;fill:var(--cyan);}
.result-title{
  text-align:center;
  font-style:italic;font-weight:700;
  font-size:calc(var(--u)*11.5);
  line-height:1;
}
.result-text{
  margin-top:calc(var(--u)*8);
  font-style:italic;font-weight:700;
  font-size:calc(var(--u)*3.7);
  line-height:1.35;
}
.result-text p + p{margin-top:calc(var(--u)*4);}

/* Même principe : le visuel de l'offre a déjà son encadré lumineux. */
.offer{
  margin-top:calc(var(--u)*8);
  text-align:center;
}
.offer__title{
  font-style:italic;font-weight:700;
  font-size:calc(var(--u)*6.6);
  line-height:1.05;
}
.offer img{margin:calc(var(--u)*4) auto;}
.offer__foot{
  font-style:italic;font-weight:700;
  font-size:calc(var(--u)*3.4);
}

/* ---------- Adaptation borne / tablette / paysage ---------- */
@media (min-width:600px){
  :root{--pad:36px;}
}
/* Tablette en portrait (borne) : cadre plus large, plus confortable */
@media (min-width:768px){
  :root{--frame-max:680px;}
  /* Tablette et ordinateur : le bouton Quitter est disponible partout,
     et la page démarre sous sa bande pour ne jamais passer dessous. */
  .quit{display:block;}
  .app{padding-top:var(--quit-bande);}
}
/* =========================================================
   ÉCRANS LARGES — ordinateur et tablette en paysage
   Le contenu tient dans la hauteur de la fenêtre : le cadre
   devient une carte centrée avec son propre défilement interne.
   Mobile et tablette portrait : aucun changement (page classique).
   ========================================================= */
@media (min-width:900px) and (orientation:landscape){
  :root{--pad:clamp(28px, 3.4vw, 64px); --frame-max:1320px;}

  .app{
    height:100dvh;
    align-items:center;
    padding:clamp(16px, 2.4vh, 36px);
    padding-top:max(clamp(16px, 2.4vh, 36px), var(--quit-bande));
    overflow:hidden;
  }

  .screen.is-active{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
  }

  /* Deux colonnes, comme la maquette large */
  .frame{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:clamp(32px, 4.5vw, 88px);
    align-items:stretch;   /* les deux colonnes ont la même hauteur :
                              indispensable pour caler un élément en bas */
    max-height:100%;
    overflow-y:auto;
    overscroll-behavior:contain;          /* le défilement ne « fuit » pas vers la page */
    -webkit-overflow-scrolling:touch;
    padding-block:calc(var(--u)*7);
    scrollbar-width:thin;
    scrollbar-color:rgba(122,207,229,.5) transparent;
  }
  .frame::-webkit-scrollbar{width:8px;}
  .frame::-webkit-scrollbar-thumb{background:rgba(122,207,229,.5);border-radius:4px;}
  .frame::-webkit-scrollbar-track{background:transparent;}

  .col{
    display:flex;
    flex-direction:column;
    min-width:0;
  }

  /* La colonne de droite est le bloc d'action : elle se cale verticalement. */
  #screen-formulaire .col--b{justify-content:center;}

  /* Quiz : le contenu occupe toute la hauteur utile, comme la maquette —
     message codé en haut, propositions au centre, validation en bas. */
  #screen-quiz .frame{min-height:100%; padding-block:calc(var(--u)*3);}
  #screen-quiz .col--b{justify-content:space-between;}
  /* Les trois propositions se répartissent dans la hauteur restante. */
  #screen-quiz .answers{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    margin-block:calc(var(--u)*3);
  }
  #screen-quiz .answer{margin-top:0;}

  /* Le règlement se plaque en bas de la colonne de gauche. */
  .link-rules--col{margin-top:auto;text-align:left;}

  /* ---------- Écran quiz : calage sur la maquette large ----------
     Colonne de gauche : logo en haut, discours au centre, règlement en bas. */
  /* Les deux marges « auto » encadrent le groupe logo + titre + consigne :
     il se centre verticalement, le règlement reste collé en bas. */
  #screen-quiz .col--a .brand{margin-top:auto; margin-bottom:calc(var(--u)*18);}
  #screen-quiz .headline--quiz{margin-top:0;}
  #screen-quiz .lead--sm{margin-top:calc(var(--u)*3); margin-bottom:auto;}
  #screen-quiz .link-rules--col{margin-top:calc(var(--u)*4);}

  /* En paysage, la consigne se coupe après « EN BOUTIQUE ». */
  .br-paysage{display:inline;}
  .br-colonne{display:none;}

  /* La colonne de gauche gagne en présence : elle a la place. */
  #screen-quiz .logo{font-size:min(calc(var(--u)*11), 46px);}
  #screen-quiz .headline--quiz{font-size:min(calc(var(--u)*7.4), 46px);}
  #screen-quiz .lead--sm{font-size:min(calc(var(--u)*3.2), 17px); line-height:1.3;}
  #screen-quiz .link-rules--col{font-size:min(calc(var(--u)*4), 17px);}

  /* Le message codé prend exactement la largeur des propositions. */
  #screen-quiz .cipher{margin-top:0;}
  #screen-quiz .cipher img{width:100%; height:auto; max-height:none;}

  /* Sur cette largeur, le premier élément d'une colonne ne doit pas
     hériter des marges hautes pensées pour la lecture en colonne unique. */
  .col--b > *:first-child{margin-top:0;}
  .headline--form,.headline--quiz{margin-top:calc(var(--u)*6);}
  .field:first-child{margin-top:0;}
  .lead{margin-top:0;}
  .legal{margin-top:calc(var(--u)*6);}

  /* Visuel du lot : il termine la colonne de gauche de l'accueil. */
  #screen-accueil .visual{margin-top:calc(var(--u)*5);}

  /* Écrans de fin : l'encart offre n'a plus besoin d'être pleine largeur. */
  .offer{margin-top:0;}

  /* Les titres suivent la largeur de colonne, mais les éléments d'interface
     ne doivent pas grossir indéfiniment : on les plafonne en pixels. */
  .btn         {font-size:min(calc(var(--u)*4.6), 21px); min-height:52px;
                padding-block:calc(var(--u)*3.4);}
  .input       {font-size:min(calc(var(--u)*4.4), 18px); min-height:54px;
                padding-block:calc(var(--u)*3);}
  .answer      {font-size:min(calc(var(--u)*4.4), 19px); min-height:56px;
                padding-block:calc(var(--u)*3.6);}
  .link-rules  {font-size:min(calc(var(--u)*3.6), 15px);}
  .lead        {font-size:min(calc(var(--u)*3.4), 20px);}
  .lead--sm    {font-size:min(calc(var(--u)*2.6), 14px);}
  .result-text {font-size:min(calc(var(--u)*3.7), 19px);}
  .dates       {font-size:min(calc(var(--u)*3.3), 17px);}
  .consent__title{font-size:min(calc(var(--u)*3.4), 15px);}
  .consent__body {font-size:min(calc(var(--u)*2.2), 11px);}
  .legal       {font-size:min(calc(var(--u)*2.1), 11px);}
  .offer__foot {font-size:min(calc(var(--u)*3.4), 16px);}
  .error       {font-size:min(calc(var(--u)*3), 14px);}
  .checkbox    {width:26px;height:26px;min-width:26px;min-height:26px;}

  /* ---------- Tenir dans la hauteur de la fenêtre ----------
     Les visuels se plient à la place disponible plutôt que d'imposer
     un défilement. Le défilement du cadre reste là en dernier recours,
     pour les très faibles hauteurs. */
  .visual img{max-height:26dvh; width:100%; object-fit:cover;}
  .cipher  img{max-height:30dvh; object-fit:contain; margin-inline:auto;}
  .offer   img{max-height:32dvh; object-fit:contain;}

  .brand{margin-bottom:calc(var(--u)*4);}
  .headline{margin-top:calc(var(--u)*2);}
  .btn{margin-top:calc(var(--u)*4);}
  .link-rules{margin-top:calc(var(--u)*2.5);}
  .field{margin-top:calc(var(--u)*2.2);}
  .consent{margin-top:calc(var(--u)*3);}
  .consent__body{line-height:1.35;}
  .answers{margin-top:calc(var(--u)*3);}
  .answer{margin-top:calc(var(--u)*2.2);}
  .result-text{margin-top:calc(var(--u)*5);}
  .result-text p + p{margin-top:calc(var(--u)*2.5);}
  .glyph{margin:calc(var(--u)*4) 0 calc(var(--u)*3);}
  .legal p + p{margin-top:calc(var(--u)*1.4);}

  /* Accueil : le message codé est l'élément à décrypter, il gagne
     un peu de présence dans la colonne de droite. */
  #screen-accueil .cipher img{max-height:36dvh;}

  /* Écrans de fin : le titre s'aligne à gauche, comme le logo,
     le glyphe et le texte de la colonne. */
  .result-title{text-align:left;}
}

/* Paysage peu haut (portable 1366×768, tablette 1024×768) : on resserre. */
@media (min-width:900px) and (orientation:landscape) and (max-height:820px){
  .visual img{max-height:22dvh;}
  .cipher  img{max-height:26dvh;}
  #screen-accueil .cipher img{max-height:31dvh;}
  .offer   img{max-height:27dvh;}
  .legal{font-size:min(calc(var(--u)*2.1), 10px);}
  .consent__body{font-size:min(calc(var(--u)*2.2), 10px);}
}

/* Écrans très plats (1024×600 des tablettes Android) : dernier cran,
   c'est le formulaire qui demande le plus de hauteur. */
@media (min-width:900px) and (orientation:landscape) and (max-height:660px){
  /* Hauteur très réduite : la bande du bouton se resserre elle aussi. */
  :root{--quit-bande:32px;}
  .quit{top:5px; min-height:24px; padding:3px 12px; font-size:11px;}
  .input{min-height:44px; padding-block:calc(var(--u)*2);}
  .btn{min-height:44px; padding-block:calc(var(--u)*2.6);}
  .answer{min-height:46px; padding-block:calc(var(--u)*2.6);}
  .field{margin-top:calc(var(--u)*1.6);}
  .consent{margin-top:calc(var(--u)*2);}
  .consent__body{font-size:9px; line-height:1.3;}
  .checkbox{width:22px;height:22px;min-width:22px;min-height:22px;}
  .visual img{max-height:20dvh;}
  .cipher  img{max-height:24dvh;}
  #screen-accueil .cipher img{max-height:29dvh;}
  .offer   img{max-height:24dvh;}
}

/* ---------- Accessibilité : mouvement réduit ----------
   On garde les couleurs vert / rouge, on supprime les déplacements. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .btn:not(:disabled):hover,.answer[aria-checked="true"]{transform:none;}
}

/* Très grands écrans : on cesse d'élargir, on centre. */
@media (min-width:1600px) and (orientation:landscape){
  :root{--frame-max:1440px;}
}

/* Paysage sur petite hauteur (tablette 600px de haut, mobile couché) :
   marges verticales compactées. */
@media (orientation:landscape) and (max-height:620px){
  .frame{padding-block:calc(var(--u)*4);}
  .brand{margin-bottom:calc(var(--u)*4);}
  .btn{margin-top:calc(var(--u)*4);}
  .legal{margin-top:calc(var(--u)*5);}
}