/* ═══════════════════════════════════════════════════════════════
   TRANSCRIS — Système de design

   ┌───────────────────────────────────────────────────────────┐
   │  PALETTE — RÈGLE ABSOLUE, AUCUNE EXCEPTION                │
   │                                                           │
   │    BLEU    #143F7A   un seul, jamais décliné              │
   │    OR      #E0A82E   un seul, jamais décliné              │
   │    BLANC   #FFFFFF   fond de l'interface                  │
   │    ROUGE   #C62828   alerte uniquement                    │
   │    VERT    #2F7D32   alerte uniquement                    │
   │                                                           │
   │  Le reste est achromatique : noir pour le texte, gris     │
   │  pour le texte secondaire, gris clair pour les filets.    │
   │                                                           │
   │  Aucun autre bleu, aucun autre or. Pas de variante        │
   │  « plus foncée » ni « plus claire ». Quand il faut une    │
   │  nuance, on emploie LE MÊME bleu ou LE MÊME or en         │
   │  transparence (rgba) — jamais une autre valeur.           │
   │                                                           │
   │  Ce fichier est le SEUL à contenir des valeurs            │
   │  hexadécimales. Toutes les autres feuilles n'utilisent    │
   │  que des jetons.                                          │
   └───────────────────────────────────────────────────────────┘

   Emplois :
     • le BLEU  = identité, actions, blocs d'ancrage
     • l'OR     = l'argent (prix, paiement) — et rien d'autre
     • le FOND  = blanc

   ⚠️ L'or ne passe PAS le contraste en texte sur blanc (2,1:1).
      Il sert de FOND (avec texte foncé dessus) ou de pastille.
      Jamais de texte doré sur blanc.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── Les deux couleurs de marque ── */
  --bleu:#143F7A;
  --or:#E0A82E;

  /* ── Neutres ── */
  --blanc:#FFFFFF;         /* le blanc pur — ne bouge JAMAIS, même en nuit */
  --fond:#FFFFFF;          /* arrière-plan de la page */
  --surface:#FFFFFF;       /* cartes, champs, modales — posé sur le fond */
  --noir:#1A1A1A;          /* encre principale — 15,9:1 sur blanc */
  --gris:#6B6B6B;          /* encre secondaire — 5,7:1 sur blanc */
  --ligne:#E5E5E5;         /* filets et bordures */
  --ligne-forte:#CFCFCF;   /* bordures accentuées */
  --pose:#F6F6F6;          /* surface posée, survols */

  /* ── Jetons sémantiques ──
     Ils existent pour une seule raison : le mode nuit. En clair, la couleur
     d'accent est le bleu sur du blanc ; en nuit, c'est le blanc sur du bleu.
     La paire s'inverse, la palette ne change pas. */
  --titre:var(--bleu);        /* titres, liens, bordure de focus */
  --action:var(--bleu);       /* fond du bouton principal */
  --action-tx:var(--blanc);   /* texte du bouton principal */

  /* ── Alertes ── */
  --rouge:#C62828;         /* 5,7:1 sur blanc */
  --vert:#2F7D32;          /* 5,1:1 sur blanc */

  /* ── Transparences : LE MÊME bleu, LE MÊME or, en voile ── */
  --bleu-voile:rgba(20,63,122,.07);
  --bleu-voile-2:rgba(20,63,122,.14);
  --bleu-brd:rgba(20,63,122,.22);
  --or-voile:rgba(224,168,46,.16);
  --or-brd:rgba(224,168,46,.42);
  --rouge-voile:rgba(198,40,40,.08);
  --vert-voile:rgba(47,125,50,.09);
  /* Sur un bloc bleu plein */
  --sur-bleu:rgba(255,255,255,.78);
  --sur-bleu-brd:rgba(255,255,255,.18);
  --sur-bleu-pose:rgba(255,255,255,.10);
  --sur-bleu-mark:rgba(255,255,255,.16); /* fond du symbole du logo sur bleu */
  /* Encre posée SUR l'or. Volontairement fixe : l'or ne s'inverse pas en
     mode nuit, donc son texte ne doit pas s'inverser non plus. Employer
     --noir ici donnerait du blanc sur de l'or, soit 1,9:1. */
  --sur-or:#1A1A1A;
  /* Voile des modales et des tiroirs — le même partout, sans exception */
  --voile:rgba(20,63,122,.42);

  /* ── Rythme ── */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --sh-sm:0 1px 3px rgba(26,26,26,.06);
  --sh:0 4px 16px rgba(26,26,26,.08);
  --sh-lg:0 18px 44px rgba(26,26,26,.14);

  /* ── Typographie ── */
  --f-titre:'Space Grotesk', sans-serif;
  --f-texte:'Manrope', sans-serif;
  --f-logo:'Pacifico', cursive;
  --f-mono:'DM Mono', monospace;

  color-scheme:light;
}

/* ═══ MODE NUIT ═══════════════════════════════════════════════
   Aucune couleur nouvelle. Le bleu #143F7A passe du rôle d'encre
   à celui de fond, le blanc fait le chemin inverse. Les surfaces
   ne s'éclaircissent pas : elles se distinguent par leurs filets.
   C'est ce qui garantit qu'il n'y a toujours qu'UN SEUL bleu.
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"]{
  --fond:#143F7A;
  --surface:#143F7A;              /* le même bleu — les filets font la séparation */
  --noir:#FFFFFF;                 /* l'encre devient blanche — 10,3:1 */
  --gris:rgba(255,255,255,.72);   /* 5,9:1 sur le bleu */
  --ligne:rgba(255,255,255,.20);       /* filets décoratifs — 1,8:1, suffisant */
  --ligne-forte:rgba(255,255,255,.45); /* contours de composants — 3,4:1 */
  --pose:rgba(255,255,255,.09);

  --titre:#FFFFFF;
  --action:#FFFFFF;
  --action-tx:#143F7A;

  --bleu-voile:rgba(255,255,255,.09);
  --bleu-voile-2:rgba(255,255,255,.16);
  --bleu-brd:rgba(255,255,255,.28);
  --voile:rgba(10,31,61,.76);      /* le même bleu, assombri par l'opacité */

  --sh-sm:none; --sh:none;
  --sh-lg:0 18px 44px rgba(0,0,0,.34);

  color-scheme:dark;
}
/* Le bleu plein n'a plus de sens quand le fond EST déjà bleu :
   sur un bloc « sur-bleu », tout se comporte comme le reste. */
[data-theme="dark"] .sur-bleu{background:transparent}

/* ── Base ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ╔═══════════════════════════════════════════════════════════╗
   ║  RÈGLE : AUCUN DÉFILEMENT HORIZONTAL. JAMAIS.             ║
   ║                                                           ║
   ║  Quatre causes couvrent 95 % des débordements ; elles     ║
   ║  sont toutes neutralisées ici, à la racine :              ║
   ║                                                           ║
   ║   1. un enfant de grille ou de flex refuse de rétrécir    ║
   ║      en dessous de son contenu → min-width:0              ║
   ║   2. un mot insécable plus large que l'écran (URL,        ║
   ║      adresse e-mail, nom de fichier) → overflow-wrap      ║
   ║   3. un média sans limite de largeur → max-width:100%     ║
   ║   4. un élément décalé hors cadre → overflow-x:clip       ║
   ║                                                           ║
   ║  « clip » et non « hidden » : hidden sur <html> casse     ║
   ║  position:sticky et le défilement ancré.                  ║
   ╚═══════════════════════════════════════════════════════════╝ */
html{
  scroll-behavior:smooth;
  overflow-x:hidden;              /* repli pour les navigateurs anciens */
  overflow-x:clip;                /* la bonne valeur, si elle est comprise */
  -webkit-text-size-adjust:100%;  /* iOS ne grossit plus le texte en paysage */
}
body{
  font-family:var(--f-texte);
  background:var(--fond);color:var(--noir);
  line-height:1.6;-webkit-font-smoothing:antialiased;
  min-height:100vh;min-height:100dvh;
  width:100%;max-width:100%;
  overflow-x:hidden;overflow-x:clip;
}

/* 1 — Un enfant de grille ou de flex a min-width:auto par défaut : il ne
       descend jamais sous la largeur de son contenu. C'est LA cause
       numéro un du défilement horizontal. */
[class*="grille"] > *,
[class*="grid"]   > *,
.flex > *{min-width:0}

/* 2 — Les mots trop longs se coupent au lieu de pousser la page. */
p,li,dd,dt,td,th,figcaption,blockquote,label,summary,
.carte,.champ-lbl,.modale-bd{overflow-wrap:anywhere}

/* ╔═══════════════════════════════════════════════════════════╗
   ║  L'attribut hidden doit VRAIMENT cacher                   ║
   ╚═══════════════════════════════════════════════════════════╝
   Le navigateur applique `[hidden]{display:none}` — mais depuis sa
   feuille à lui. Or dans la cascade CSS, une déclaration d'auteur
   l'emporte TOUJOURS sur une déclaration du navigateur, quelle que
   soit la spécificité des sélecteurs.

   Résultat : tout élément à qui nous donnons un `display` — donc
   .btn, .essai, .astuce, .trad-barre, .compte-item, .ico-btn —
   ignorait purement et simplement son attribut hidden. Le bandeau
   d'essai restait affiché aux personnes connectées, l'astuce
   apparaissait avant paiement, et deux bandeaux de traduction vides
   flottaient au-dessus de chaque transcription.

   Le code JavaScript était juste. C'est la feuille de style qui
   n'écoutait pas. Une ligne répare les vingt-six endroits d'un coup.

   Le !important est ici légitime et non négociable : hidden veut dire
   « cet élément n'est pas pertinent ». Ce n'est pas une préférence
   d'apparence qu'un composant aurait le droit de discuter. */
[hidden]{display:none !important}

/* 3 — Rien ne dépasse son conteneur. */
img,svg,video,canvas,iframe,embed,object{max-width:100%}
img,video{height:auto}
pre,code,kbd,samp{overflow-wrap:anywhere;white-space:pre-wrap}
table{width:100%;max-width:100%;border-collapse:collapse;table-layout:fixed}
/* Un tableau qui a vraiment besoin de largeur défile DANS SON CADRE. */
.table-cadre{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Même raison que pour .btn : `anywhere` sur TOUS les liens ramenait
   leur largeur minimale à une lettre. Dans une rangée flex — barre de
   navigation, pied de page — ils pouvaient donc être écrasés jusqu'à
   se couper au milieu d'un mot. `break-word` coupe une URL trop longue
   quand il le faut vraiment, sans autoriser cet écrasement. */
a{color:inherit;text-decoration:none;overflow-wrap:break-word}
img,svg{display:block}
/* ── Crénage en em, jamais en pixels ──────────────────────────
   -.6px sur un titre de 44 px, c'est -1,4 % : un resserrement discret.
   Le même -.6px sur un h3 de 17 px devient -3,5 % — les lettres se
   touchent. Un titre en clamp() change de taille d'un écran à l'autre ;
   son crénage doit suivre, sinon il est juste à une seule largeur.
   L'unité em le fait toute seule. */
h1,h2,h3,h4{font-family:var(--f-titre);letter-spacing:-.018em;line-height:1.2;color:var(--titre);
            overflow-wrap:anywhere}

/* Filet de sécurité sur les icônes : un <svg> sans width/height
   mesure 300×150 px par défaut. Les règles précises priment. */
button svg,a svg,.badge svg,.puce svg,label svg{width:1em;height:1em;flex-shrink:0}

/* ── Identité ─────────────────────────────────────────────── */
/* Le logo est BLEU sur fond clair, BLANC sur fond bleu. Rien d'autre. */
.logo{display:flex;align-items:center;gap:9px}
.logo-mark{width:34px;height:34px;border-radius:10px;background:var(--bleu);
           display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-mark svg{width:19px;height:19px}
.logo-name{font-family:var(--f-logo);font-size:24px;color:var(--titre);line-height:1;
           white-space:nowrap}
.sur-bleu .logo-mark{background:var(--sur-bleu-mark)}
.sur-bleu .logo-name{color:var(--blanc)}
/* En nuit le fond est déjà bleu : le carré du logo se détache par un voile. */
[data-theme="dark"] .logo-mark{background:var(--sur-bleu-mark)}

/* ── Boutons ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-texte);font-size:14px;font-weight:600;
  padding:11px 20px;min-height:44px;border-radius:var(--r);
  border:1.5px solid transparent;cursor:pointer;line-height:1.2;
  /* ── break-word, et surtout PAS anywhere ────────────────────
     L'intention est bonne : à 320 px un libellé long doit se replier
     plutôt que pousser la page. Mais `anywhere` faisait deux choses,
     et la seconde n'était pas voulue.

     Les deux valeurs autorisent la coupure à l'intérieur d'un mot
     quand il ne rentre pas. La différence est ailleurs : `anywhere`
     fait AUSSI compter ces coupures dans le calcul de la largeur
     min-content. Autrement dit, la largeur minimale du bouton
     devenait UNE LETTRE. Dans une rangée flex, plus rien n'empêchait
     alors de l'écraser — et « Commencer » se cassait en
     « Commence » / « r ».

     `break-word` garde le repli de secours et rend au bouton sa vraie
     largeur minimale : celle de son mot le plus long. Le bouton ne
     peut plus être comprimé sous son libellé. */
  white-space:normal;text-align:center;overflow-wrap:break-word;max-width:100%;
  transition:background .15s,border-color .15s,opacity .15s,transform .15s;
}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn svg{width:15px;height:15px;flex-shrink:0}
/* Les survols n'introduisent aucune couleur : ils jouent sur l'opacité. */
/* L'or est le seul à ne pas s'inverser en nuit : l'argent reste l'argent. */
.btn-primaire{background:var(--action);color:var(--action-tx)}
.btn-primaire:hover:not(:disabled){opacity:.88;transform:translateY(-1px)}
.btn-argent{background:var(--or);color:var(--sur-or)}        /* paiement uniquement */
.btn-argent:hover:not(:disabled){opacity:.88;transform:translateY(-1px)}
.btn-neutre{background:var(--surface);color:var(--titre);border-color:var(--ligne)}
.btn-neutre:hover:not(:disabled){border-color:var(--titre)}
.btn-fantome{background:transparent;color:var(--gris)}
.btn-fantome:hover:not(:disabled){background:var(--pose);color:var(--noir)}
.btn-danger{background:var(--rouge);color:var(--blanc)}
.btn-danger:hover:not(:disabled){opacity:.88}
.btn-lg{padding:14px 26px;font-size:15px;border-radius:var(--r-lg)}
.btn-sm{padding:7px 13px;min-height:38px;font-size:13px;border-radius:var(--r-sm)}
.btn-bloc{width:100%}
/* Boutons posés sur un bloc bleu plein */
.sur-bleu .btn-neutre{background:transparent;color:var(--blanc);border-color:var(--sur-bleu-brd)}
.sur-bleu .btn-neutre:hover{background:var(--sur-bleu-pose);border-color:var(--blanc)}

/* ── Cartes ───────────────────────────────────────────────── */
.carte{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r-lg);
       min-width:0;overflow-wrap:anywhere}

/* ── Champs ───────────────────────────────────────────────── */
.champ{margin-bottom:15px}
.champ-lbl{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;
           text-transform:uppercase;color:var(--gris);margin-bottom:6px}
.champ-in,.champ-sel{
  width:100%;max-width:100%;padding:11px 13px;min-height:44px;border-radius:var(--r);
  border:1.5px solid var(--ligne);background:var(--surface);color:var(--noir);
  /* 16px : en dessous, iOS zoome automatiquement au focus et casse la mise en page. */
  font-family:var(--f-texte);font-size:16px;outline:none;transition:border-color .15s;
}
.champ-in:focus,.champ-sel:focus{border-color:var(--titre)}
.champ-in::placeholder{color:var(--gris);opacity:.7}
.champ-sel{appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
/* WCAG 1.4.11 exige 3:1 pour le CONTOUR d'un composant de saisie — pas
   seulement pour son texte. En nuit, --ligne ne plafonne qu'à 1,8:1 sur
   le bleu : les champs et les boutons neutres prennent donc le filet fort. */
[data-theme="dark"] .champ-in,
[data-theme="dark"] .champ-sel,
[data-theme="dark"] .btn-neutre{border-color:var(--ligne-forte)}
/* Le chevron du menu déroulant doit changer d'encre en nuit, sinon il disparaît. */
[data-theme="dark"] .champ-sel{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}
.champ-err{font-size:13.5px;color:var(--rouge);margin-top:8px;display:none;overflow-wrap:anywhere}
/* Le rouge #C62828 ne passe que 1,7:1 sur le bleu : en nuit, il devient
   un fond plein avec du texte blanc plutôt qu'un texte illisible. */
[data-theme="dark"] .champ-err{color:var(--blanc);background:var(--rouge);
  padding:7px 11px;border-radius:var(--r-sm)}

/* ── Pastilles ────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
       letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:6px;
       border:1px solid transparent}
.badge svg{width:12px;height:12px;stroke-width:3}
.badge-ok{color:var(--vert);background:var(--vert-voile);border-color:var(--vert)}
.badge-err{color:var(--rouge);background:var(--rouge-voile);border-color:var(--rouge)}
/* « À payer » : l'or est ici un FOND, le texte reste foncé. */
.badge-attente{color:var(--sur-or);background:var(--or);border-color:var(--or)}
.badge-neutre{color:var(--gris);background:var(--pose);border-color:var(--ligne)}
.puce{font-size:11px;font-weight:700;padding:4px 9px;border-radius:6px;
      background:var(--bleu-voile);border:1px solid transparent;color:var(--titre)}
/* En nuit, vert et rouge deviennent des fonds pleins : en texte sur le bleu
   ils tombent à 1,7:1 et 2,4:1, très en dessous du seuil lisible. */
[data-theme="dark"] .badge-ok{color:var(--blanc);background:var(--vert)}
[data-theme="dark"] .badge-err{color:var(--blanc);background:var(--rouge)}

/* ── Modales — un seul composant, partout ─────────────────── */
.modale{
  /* Au-dessus du menu de compte (1000), qui est lui-même au-dessus de
     tout le reste. Échelle d'empilement, du bas vers le haut :
     contenu 1 · barre du haut 60 · bandeau cookies 400 ·
     menu de compte 1000 · modales 1100 · notifications 1200. */
  position:fixed;inset:0;z-index:1100;
  background:var(--voile);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.modale.open{opacity:1;pointer-events:auto}
.modale-boite{
  background:var(--surface);border:1px solid var(--ligne);
  border-radius:var(--r-xl);box-shadow:var(--sh-lg);
  width:100%;max-width:480px;max-height:90dvh;overflow-y:auto;overflow-x:hidden;
  transform:translateY(10px) scale(.98);transition:transform .22s cubic-bezier(.34,1.4,.64,1);
}
.modale.open .modale-boite{transform:none}
.modale-hd{padding:20px 22px 14px;border-bottom:1px solid var(--ligne);
           display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.modale-titre{font-family:var(--f-titre);font-size:18px;color:var(--titre);
              min-width:0;overflow-wrap:anywhere}
.modale-sous{font-size:13.5px;color:var(--gris);margin-top:3px;overflow-wrap:anywhere}
.modale-bd{padding:20px 22px;min-width:0;overflow-wrap:anywhere}
.modale-ft{padding:14px 22px 20px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.modale-x{width:38px;height:38px;border-radius:var(--r-sm);background:none;border:none;
          cursor:pointer;color:var(--gris);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.modale-x:hover{background:var(--pose);color:var(--noir)}
.modale-x svg{width:16px;height:16px}
/* Mention d'acceptation : discrète mais lisible. Les liens sont
   soulignés — dans un paragraphe gris, un lien qui ne se distingue que
   par sa couleur n'est pas repéré, et une mention qu'on ne peut pas
   suivre ne vaut pas grand-chose. */
.mention-legale{font-size:12.5px;line-height:1.6;color:var(--gris);margin-top:4px}
.mention-legale a{color:var(--titre);font-weight:600;text-decoration:underline}
/* ── Modales sur téléphone ────────────────────────────────────
   Vingt pixels de voile plus vingt-deux de boîte, deux fois : sur un
   écran de 320 px, la modale n'en laissait que 236 pour son contenu.
   Le récapitulatif de paiement y devenait illisible. On resserre le
   cadre — pas le texte, qui garde ses 16 px contre le zoom d'iOS.

   Les boutons de pied partagent leur rangée tant qu'ils y tiennent,
   puis prennent chacun la leur. Même règle que l'écran de contrôle :
   deux boutons repliés en escalier sont plus difficiles à viser que
   deux boutons empilés. */
@media(max-width:420px){
  .modale{padding:12px}
  .modale-hd{padding:16px 16px 12px}
  .modale-bd{padding:16px}
  .modale-ft{padding:12px 16px 16px}
  .modale-ft .btn{flex:1 1 auto;min-width:0}
}

/* ── Notifications ────────────────────────────────────────── */
.toast-wrap{position:fixed;bottom:88px;right:20px;display:flex;flex-direction:column;
            gap:8px;z-index:1200;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r);
       background:var(--surface);border:1px solid var(--ligne);box-shadow:var(--sh);
       font-size:13.5px;color:var(--noir);pointer-events:auto;cursor:pointer;
       animation:toastIn .2s ease;max-width:340px;overflow-wrap:anywhere}
[data-theme="dark"] .toast{box-shadow:var(--sh-lg)}
.toast svg{width:15px;height:15px;flex-shrink:0}
.toast.ok svg{color:var(--vert)}
.toast.err svg{color:var(--rouge)}
@keyframes toastIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

/* ── Bandeau cookies — compact, ne bloque jamais ──────────── */
.cookie{
  /* 20 px de marge + 340 de large = 360 : le bandeau sortait de l'écran
     par la droite sur tout téléphone de 320 à 360 px. Il n'y avait ni
     `right`, ni limite liée à la fenêtre — seulement une largeur fixe
     posée à côté d'une marge fixe. */
  position:fixed;left:20px;bottom:20px;z-index:400;
  width:min(340px, calc(100vw - 40px));
  background:var(--surface);border:1px solid var(--ligne);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:16px 18px;
  font-size:13.5px;color:var(--gris);
  transform:translateY(calc(100% + 32px));opacity:0;
  transition:transform .3s ease,opacity .3s;
}
.cookie.show{transform:none;opacity:1}
.cookie a{color:var(--titre);text-decoration:underline}
.cookie-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.cookie-actions .btn{flex:1 1 auto;min-width:0}

/* ── Accessibilité ────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--titre);outline-offset:2px;border-radius:4px}
.sur-bleu :focus-visible{outline-color:var(--blanc)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Mobile ───────────────────────────────────────────────── */
@media(max-width:640px){
  /* La modale devient une feuille qui monte du bas : c'est le geste
     attendu sur téléphone, et cela supprime tout risque de débordement
     latéral puisqu'elle occupe exactement la largeur de l'écran. */
  .modale{padding:0;align-items:flex-end}
  .modale-boite{border-radius:var(--r-xl) var(--r-xl) 0 0;max-width:none;
                max-height:94dvh;
                padding-bottom:env(safe-area-inset-bottom,0px)}
  .modale-hd{padding:18px 16px 12px}
  .modale-bd{padding:16px}
  .modale-ft{padding:12px 16px 18px;flex-direction:column-reverse}
  .modale-ft .btn{width:100%}

  .cookie{left:12px;right:12px;max-width:none;
          bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .toast-wrap{left:12px;right:12px;
              bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .toast{max-width:none}
}

/* ── Très petits écrans (320 px) ──────────────────────────── */
@media(max-width:359px){
  .btn{padding:10px 14px;font-size:13.5px}
  .btn-lg{padding:13px 18px;font-size:14.5px}
  .logo-name{font-size:21px}
  .logo-mark{width:30px;height:30px}
}

/* ── Respect du réglage système « moins d'animations » ────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}