/* =========================================================
   La Loutre Digitale - feuille de style de l'accueil, version 2
   ---------------------------------------------------------
   Direction : un voyage entre des escales peintes. Le fond est une
   illustration plein ecran qui se fond dans la suivante au defilement.
   Les couleurs restent celles des six decors de Sudoku Escale.

   Une seule police telechargee : Fraunces 700, licence SIL OFL,
   servie depuis le site lui-meme. Aucune requete vers un tiers.
   ========================================================= */

@font-face{
  font-family:"Fraunces";
  src:url("polices/fraunces-700.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Fonds - repris du decor Nebuleuse */
  --bg:#0B1026;
  --bg2:#141a37;
  --carte:rgba(22,29,61,.82);
  --carte-haut:#1d2650;

  /* Textes */
  --fg:#EDEBFF;
  --muted:#b9bee0;
  --line:#2a3161;

  /* Accents - les six decors du jeu */
  --nebuleuse:#8b6ce0;
  --lagon:#2fd4c8;
  --foret:#7fc45f;
  --neon:#ff56ab;
  --savane:#f2b441;
  --sakura:#f7b7ce;

  --acc:var(--lagon);
  --sur-acc:#04121a;
  --focus:#9fd7ff;

  --ombre:0 2px 6px rgba(0,0,0,.35), 0 18px 48px rgba(0,0,0,.45);
  --titre:"Fraunces",Georgia,"Times New Roman",serif;
  --texte:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--bg); color:var(--fg);
  font:17px/1.7 var(--texte);
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--lagon)}
a:focus-visible,button:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:6px}

.skip{position:absolute; left:-9999px}
.skip:focus{position:fixed; top:10px; left:10px; z-index:80; display:inline-block;
  padding:12px 18px; background:var(--acc); color:var(--sur-acc);
  border-radius:8px; text-decoration:none; font-weight:600}

/* min-width:0 est indispensable : .contenu est l'element flexible de
   section.escale. Sans lui, un element flex refuse de descendre sous la
   largeur minimale de son contenu, la grille imposait 742 px, et la page
   faisait 786 px de large sur un telephone de 390 px. */
.contenu{max-width:1080px; margin:0 auto; padding:0 22px; position:relative; z-index:2;
  min-width:0}
.etroit{max-width:760px}

/* =========================================================
   LE DECOR : couche fixe derriere toute la page
   ========================================================= */

#escales{
  position:fixed; inset:0; z-index:0;
  background:var(--bg);
  pointer-events:none;
}
#escales canvas{display:block; width:100%; height:100%}

/* Version de secours : les memes images, en fondu CSS.
   Sert quand WebGL est absent, sur petite machine, ou en mouvement reduit. */
.escale-img{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity .9s ease;
  will-change:opacity;
}
.escale-img.active{opacity:1}

/* Le voile : c'est lui qui garantit la lisibilite du texte par-dessus
   une illustration peinte. Ne pas l'alleger sans remesurer les contrastes. */
#voile{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    /* Bandeau haut. Il est fort, et c'est volontaire : la navigation passe
       au-dessus d'un ciel clair avant que l'en-tete ne se pose. Valeurs
       calees sur la mesure de contraste, ne pas les alleger sans remesurer. */
    linear-gradient(180deg, rgba(11,16,38,.94) 0%, rgba(11,16,38,.72) 70px, rgba(11,16,38,0) 190px),
    /* rideau lateral : c'est lui qui porte la lisibilite du texte, a gauche */
    linear-gradient(96deg, rgba(11,16,38,.93) 0%, rgba(11,16,38,.88) 34%,
                           rgba(11,16,38,.58) 66%, rgba(11,16,38,.34) 100%),
    /* assombrissement general, leger : la peinture doit rester visible */
    linear-gradient(180deg, rgba(11,16,38,.30) 0%, rgba(11,16,38,.44) 100%);
}
@media (max-width:900px){
  /* Sur telephone le texte occupe toute la largeur : le rideau devient uniforme. */
  #voile{
    background:
      linear-gradient(180deg, rgba(11,16,38,.94) 0%, rgba(11,16,38,.72) 60px, rgba(11,16,38,0) 170px),
      linear-gradient(180deg, rgba(11,16,38,.76) 0%, rgba(11,16,38,.84) 100%);
  }
}

/* =========================================================
   EN-TETE
   ========================================================= */

header.site{
  position:sticky; top:0; z-index:40;
  background:rgba(11,16,38,0);
  border-bottom:1px solid rgba(42,49,97,0);
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
header.site.pose{
  background:rgba(11,16,38,.94);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom-color:var(--line);
}
header.site .contenu{display:flex; flex-wrap:wrap; gap:8px 22px;
  align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px}
.marque{font-family:var(--titre); font-weight:700; font-size:1.15rem;
  text-decoration:none; color:var(--fg)}
/* Le degrade du nom, en petit dans l'en-tete comme en grand sur l'accueil.
   La couleur pleine reste declaree AVANT, pour qu'un navigateur qui ne sait
   pas decouper un fond a la forme des lettres affiche un nom lisible plutot
   qu'un nom invisible.
   Son contraste est mesure pixel par pixel sur les lettres elles-memes par
   verif_site-v2.js, en comparant deux photos de la page, l'une avec le nom,
   l'autre sans. Ne pas assombrir ces couleurs sans relancer la mesure. */
.marque span{
  color:var(--lagon);
}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .marque span{
    background:linear-gradient(96deg,
      var(--lagon) 0%,
      #b49bff 46%,
      var(--sakura) 78%,
      var(--savane) 100%);
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
  }
}
nav.principale{display:flex; flex-wrap:wrap; gap:2px}
nav.principale a{
  color:var(--fg); text-decoration:none; padding:9px 13px; border-radius:9px;
  font-size:.97rem; transition:background .2s ease}
nav.principale a:hover{background:rgba(237,235,255,.10)}
nav.principale a[aria-current="page"]{color:var(--lagon); font-weight:600}

@media (max-width:620px){
  /* Sur telephone la navigation tenait sur trois lignes et mangeait le
     premier ecran. « Mentions legales » reste accessible depuis le pied de
     page, present sur toutes les pages : rien n'est perdu. */
  nav.principale{gap:0}
  /* 10px de haut et 1,7 de hauteur de ligne font une cible de 45 px :
     au-dessus des 44 px recommandes pour un doigt. */
  nav.principale a{padding:10px 11px; font-size:.94rem}
  nav.principale a.secondaire{display:none}
  header.site .contenu{padding-top:8px; padding-bottom:8px; gap:4px 22px}
  .marque{font-size:1rem}
}

/* =========================================================
   SECTIONS
   ========================================================= */

main{position:relative; z-index:2}
section{padding:110px 0; position:relative}
section.escale{min-height:100vh; display:flex; align-items:center}
/* 100vh compte la barre d'adresse du telephone, qui n'est pas la.
   100svh est la hauteur reellement visible. */
@supports (min-height:100svh){ section.escale{min-height:100svh} }

h1,h2,h3{font-family:var(--titre); font-weight:700; line-height:1.15; letter-spacing:-.01em; margin:0}

/* ---------- ouverture ---------- */

.hero{min-height:100svh; display:flex; align-items:center; padding:120px 0 90px}
.etiquette{
  display:inline-block; font-family:var(--texte); font-size:.82rem; font-weight:600;
  letter-spacing:.10em; text-transform:uppercase; color:var(--lagon);
  border:1px solid rgba(47,212,200,.42); border-radius:999px; padding:7px 15px;
}
.hero h1{
  font-size:clamp(2.9rem, 10.5vw, 8.2rem);
  margin:26px 0 0; line-height:.98; letter-spacing:-.025em;
}
.hero h1 .ligne{display:block; overflow:hidden}

/* Le nom en degrade, repris des couleurs des decors du jeu.
   La couleur pleine reste declaree AVANT : un navigateur qui ne sait pas
   decouper un fond a la forme des lettres affiche un titre blanc lisible
   plutot qu'un titre invisible.
   Contraste mesure pixel par pixel sur les lettres elles-memes par
   verif_site-v2.js, pas estime. Ne pas assombrir ces trois couleurs. */
.hero h1 .ligne i{
  display:block; font-style:normal;
  color:var(--fg);
  text-shadow:0 2px 30px rgba(0,0,0,.55);
}
@supports (background-clip:text) or (-webkit-background-clip:text){
  /* Le degrade est pose sur CHAQUE LIGNE, pas sur le titre entier.
     Essai fait et abandonne : porte par le titre, il disparaissait
     completement, parce que le `overflow:hidden` des lignes, necessaire a
     l'arrivee du titre, empeche le decoupage du fond par les lettres d'un
     element parent.
     Pour que les deux lignes montrent les MEMES couleurs alors qu'elles
     n'ont pas la meme longueur, la largeur du degrade est fixee en `em`.
     Elle suit donc la taille du texte, pas celle de la ligne : le nom garde
     la meme sequence de couleurs sur un ecran de 1440 px comme de 390 px. */
  .hero h1 .ligne i{
    background:linear-gradient(100deg,
      var(--lagon) 0%,
      #b49bff 34%,
      var(--sakura) 62%,
      var(--savane) 88%);
    background-size:4.9em 100%;
    background-repeat:no-repeat;
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
    text-shadow:none;
    /* La lueur remplace l'ombre portee, qu'un texte transparent ne peut pas
       porter : elle detache le titre de l'illustration. */
    filter:drop-shadow(0 2px 26px rgba(0,0,0,.60));
  }
}
.hero .accroche{
  font-family:var(--titre); font-size:clamp(1.25rem,2.7vw,1.9rem); line-height:1.35;
  margin:30px 0 0; max-width:22ch; color:var(--fg);
}
.hero .chapo{font-size:1.1rem; color:var(--muted); max-width:56ch; margin:22px 0 0}
.hero .chapo strong{color:var(--fg)}
.actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px}

.bouton{
  display:inline-block; text-decoration:none; font-weight:650; font-size:1.02rem;
  padding:15px 26px; border-radius:12px;
  background:var(--acc); color:var(--sur-acc);
  box-shadow:0 10px 30px rgba(47,212,200,.18);
  transition:transform .18s ease, box-shadow .18s ease;
}
.bouton:hover{transform:translateY(-2px); box-shadow:0 16px 38px rgba(47,212,200,.28)}
.bouton.discret{
  background:transparent; color:var(--fg);
  border:1px solid rgba(237,235,255,.34); box-shadow:none;
}
.bouton.discret:hover{background:rgba(237,235,255,.09)}

.defiler{
  margin-top:56px; font-size:.9rem; color:var(--muted);
  display:flex; align-items:center; gap:10px;
}
.defiler .fleche{
  width:22px; height:34px; border:1px solid rgba(237,235,255,.35); border-radius:12px;
  position:relative; flex:none;
}
.defiler .fleche::after{
  content:""; position:absolute; left:50%; top:7px; width:3px; height:7px;
  margin-left:-1.5px; border-radius:2px; background:var(--lagon);
  animation:goutte 1.9s ease-in-out infinite;
}
@keyframes goutte{0%,100%{transform:translateY(0); opacity:1} 50%{transform:translateY(11px); opacity:.25}}
@media (prefers-reduced-motion:reduce){ .defiler .fleche::after{animation:none} }

/* ---------- titres de section ---------- */

.titre-section{max-width:640px; margin-bottom:52px}
.titre-section h2{font-size:clamp(1.9rem,4.4vw,3.1rem)}
.titre-section p{color:var(--muted); font-size:1.1rem; margin:16px 0 0}

/* ---------- cartes ---------- */

/* min(290px,100%) et non 290px : sur un ecran plus etroit que la colonne,
   la colonne se plie a la largeur disponible au lieu de deborder. */
.grille{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.grille.paires{grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr)); max-width:820px}
.carte{
  background:var(--carte);
  border:1px solid var(--line); border-radius:18px; padding:30px 28px;
  backdrop-filter:blur(10px) saturate(120%);
  box-shadow:var(--ombre);
  display:flex; flex-direction:column;
}
.carte h3{font-size:1.32rem; margin:16px 0 12px}
.carte p{margin:0 0 14px; color:var(--muted)}
.carte p:last-child{margin-bottom:0}
.carte strong{color:var(--fg)}
.pastille{
  width:48px; height:48px; border-radius:14px; flex:none;
  display:grid; place-items:center;
  background:linear-gradient(140deg, rgba(47,212,200,.20), rgba(139,108,224,.20));
  border:1px solid rgba(47,212,200,.32);
}
.pastille svg{width:25px; height:25px; fill:none; stroke:var(--lagon);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.pousse{margin-top:auto; padding-top:18px}

.carte.appli .etiquette{font-size:.74rem; padding:5px 12px}
.etiquette.bientot{color:var(--savane); border-color:rgba(242,180,65,.45)}

/* ---------- le parcours ---------- */

.parcours .contenu{max-width:900px}
.parcours .phrase{
  font-family:var(--titre); font-size:clamp(1.6rem,4.2vw,2.9rem); line-height:1.25;
  margin:0 0 34px; max-width:20ch;
}
.parcours p{color:var(--muted); font-size:1.08rem; max-width:60ch}
.parcours p strong{color:var(--fg)}

.frise{display:grid; gap:0; margin:56px 0 0; grid-template-columns:repeat(3,1fr)}
.frise .etape{padding:0 26px 0 0; position:relative}
.frise .etape::before{
  content:""; display:block; height:2px; margin-bottom:22px;
  background:linear-gradient(90deg,var(--lagon),rgba(47,212,200,.10));
  transform:scaleX(0); transform-origin:left; transition:transform .8s ease;
}
.frise .etape.vu::before{transform:scaleX(1)}
.frise .etape .quand{font-size:.82rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--lagon); font-weight:600}
.frise .etape h3{font-size:1.24rem; margin:10px 0 10px}
.frise .etape p{font-size:1rem; margin:0}
@media (max-width:760px){
  .frise{grid-template-columns:1fr; gap:34px}
  .frise .etape{padding-right:0}
}

/* ---------- encadre ---------- */

.encadre{
  margin-top:36px; padding:26px 28px; border-radius:16px;
  /* Fond opaque : l'encadre est pose sur une illustration claire, un fond
     translucide y faisait tomber le lien sous le seuil AA. Mesure a l'appui. */
  background:linear-gradient(rgba(47,212,200,.09), rgba(47,212,200,.09)), rgba(18,24,52,.94);
  border:1px solid rgba(47,212,200,.34);
  backdrop-filter:blur(8px);
}
.encadre p{margin:0; color:var(--fg)}

/* ---------- telephones ---------- */

.tels{display:flex; flex-wrap:wrap; gap:26px; justify-content:center; margin-top:14px; perspective:1200px}
.tel{
  width:min(240px,42vw); border-radius:26px; overflow:hidden;
  border:1px solid rgba(237,235,255,.20);
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  background:var(--bg2);
}
.tel.gauche{transform:rotate(-4deg) translateY(14px)}
.tel.droite{transform:rotate(4deg)}

/* =========================================================
   APPARITIONS
   ========================================================= */

.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease}
.reveal.vu{opacity:1; transform:none}
html.no-js .reveal{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
}

/* =========================================================
   PIED DE PAGE
   ========================================================= */

footer.site{
  position:relative; z-index:2;
  border-top:1px solid var(--line); background:rgba(11,16,38,.86);
  padding:34px 0; color:var(--muted); font-size:.95rem;
}
footer.site .contenu{display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between}
footer.site nav{display:flex; flex-wrap:wrap; gap:18px}
footer.site a{color:var(--muted)}
footer.site a:hover{color:var(--fg)}

.legende{font-size:.9rem; color:var(--muted); margin-top:30px; max-width:46ch}

/* =========================================================
   PAGES INTERIEURES
   ---------------------------------------------------------
   Sudoku Escale, Contact, Mentions legales, Politique de
   confidentialite. Elles partagent l'en-tete, le pied de page, la
   typographie et le principe du decor peint, mais elles n'embarquent
   ni three.js ni GSAP : ce sont des pages qu'on lit, le decor y est
   une image fixe.
   ========================================================= */

/* Le decor fixe des pages interieures, pose en CSS. */
#escales.fixe{background-size:cover; background-position:center}

/* Le rideau lateral de l'accueil existe parce que le texte y est cale a
   gauche et la peinture visible a droite. Sur les pages interieures le
   contenu occupe toute la largeur : un rideau plus clair a droite y
   fabriquait des contrastes limites, mesures a 4,43:1 sur une cellule de
   tableau. Le voile y est donc uniforme. */
body.interieure #voile{
  background:
    linear-gradient(180deg, rgba(11,16,38,.94) 0%, rgba(11,16,38,.72) 70px, rgba(11,16,38,0) 190px),
    linear-gradient(180deg, rgba(11,16,38,.78) 0%, rgba(11,16,38,.86) 100%);
}

/* Bandeau de titre de page */
.entete-page{padding:120px 0 54px}
.entete-page h1{font-size:clamp(2.3rem,6.4vw,4.4rem); letter-spacing:-.02em}
.entete-page h1 em{font-style:normal; color:var(--lagon)}
.entete-page .chapo{margin:24px 0 0}
.entete-page .etiquette{margin-bottom:22px}
.entete-page + section{padding-top:0}

/* Le chapo n'est plus reserve a l'accueil */
.chapo{font-size:1.12rem; color:var(--muted); max-width:58ch; margin:22px 0 0}
.chapo strong{color:var(--fg)}

/* Corps de texte long : il lui faut un fond a lui, une illustration
   ne porte pas trente lignes de texte. Mesure a l'appui. */
.feuille{
  background:rgba(18,24,52,.90);
  border:1px solid var(--line); border-radius:20px;
  padding:44px 46px; backdrop-filter:blur(10px) saturate(120%);
  box-shadow:var(--ombre);
}
.feuille > :first-child{margin-top:0}
.feuille h2{font-size:1.55rem; margin:2.1em 0 .6em}
.feuille h2:first-of-type{margin-top:0}
.feuille h3{font-size:1.18rem; margin:1.8em 0 .5em}
.feuille p{margin:.85em 0; color:var(--muted)}
.feuille p strong{color:var(--fg)}
.feuille .carte{margin:1.2em 0; padding:24px 26px}
.feuille .carte p{margin:.6em 0}
@media (max-width:620px){ .feuille{padding:30px 22px; border-radius:16px} }

/* Listes de points */
ul.points{list-style:none; margin:0; padding:0; display:grid; gap:18px}
ul.points li{
  position:relative; padding:22px 26px 22px 30px;
  background:var(--carte); border:1px solid var(--line); border-radius:16px;
  color:var(--muted); backdrop-filter:blur(10px) saturate(120%);
}
ul.points li::before{
  content:""; position:absolute; left:0; top:22px; bottom:22px; width:3px;
  border-radius:0 3px 3px 0; background:linear-gradient(var(--lagon),var(--nebuleuse));
}
ul.points li strong{color:var(--fg)}
.feuille ul.points li{background:transparent; border:0; padding:6px 0 6px 22px; backdrop-filter:none}
.feuille ul.points li::before{top:14px; bottom:14px}

/* Texte a cote d'une image */
.duo{display:grid; gap:38px; grid-template-columns:minmax(220px,300px) 1fr; align-items:start}
.duo h2{font-size:clamp(1.6rem,3.4vw,2.4rem); margin:0 0 14px}
.duo p{color:var(--muted)}
/* Meme raison que pour .contenu : sans min-width:0 la colonne de droite se
   cale sur les 420 px du tableau et c'est la page qui defile, pas le tableau. */
.duo>*{min-width:0}
/* Variante ou le telephone passe a DROITE, pour alterner d'une section a
   l'autre. .duo reserve sa PREMIERE colonne au telephone : sans cette
   variante, une section qui commence par le texte lui donne 300 px. */
.duo.inverse{grid-template-columns:1fr minmax(220px,300px)}
/* La variante .inverse est plus specifique que .duo : sans la nommer ici,
   elle gardait ses deux colonnes sous 800 px et la colonne de texte
   tombait a 16 px de large sur un telephone. */
@media (max-width:800px){ .duo, .duo.inverse{grid-template-columns:1fr} .duo .tel{margin:0 auto} }

/* Tableaux : ils doivent pouvoir defiler seuls, jamais la page */
.tw{overflow-x:auto; margin:22px 0}
.tw table{border-collapse:collapse; width:100%; min-width:420px; font-size:.98rem}
.tw th,.tw td{border:1px solid var(--line); padding:14px 16px; text-align:left;
  vertical-align:top; background:rgba(18,24,52,.92)}
.tw th[scope="row"]{background:var(--carte-haut) !important; color:var(--fg); width:34%; font-weight:650}
.tw td{color:var(--muted)}

/* Rangee de telephones */
.telephones{display:flex; gap:24px; justify-content:center; flex-wrap:wrap; margin-top:36px}
.telephones .tel{width:min(230px,40vw)}
.telephones .tel.gauche{transform:rotate(-4deg) translateY(16px)}
.telephones .tel.droite{transform:rotate(4deg) translateY(16px)}
.telephones .tel.centre{transform:translateY(-6px)}
@media (prefers-reduced-motion:reduce){ .telephones .tel{transform:none !important} }

/* Choix de langue de la politique de confidentialite */
nav.langues{display:flex; gap:8px; margin:0 0 30px}
nav.langues button{
  font:inherit; font-weight:600; cursor:pointer; padding:9px 16px; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--fg);
}
nav.langues button[aria-pressed="true"]{background:var(--acc); border-color:var(--acc); color:var(--sur-acc)}
nav.langues button:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
[hidden]{display:none !important}
@media print{ nav.langues{display:none} [hidden]{display:block !important} #escales,#voile{display:none} }

/* Pied de page d'une page interieure : il ne doit pas flotter sur l'image */
body.interieure footer.site{background:rgba(11,16,38,.94)}

/* =========================================================
   TELEPHONE
   ---------------------------------------------------------
   Bloc ajoute le 01/09/2026 apres essai sur de vrais gabarits de
   telephone. Le site se calait jusque-la sur une largeur de 786 px
   quel que soit l'ecran : tout etait minuscule et decale.
   ========================================================= */

@media (max-width:620px){
  section{padding:74px 0}
  section.escale{padding:74px 0}
  .hero{padding:84px 0 60px}
  .hero h1{margin-top:20px}
  /* Le chapo faisait six lignes et repoussait les deux boutons tres loin
     sous le premier ecran. Un cran plus petit, il en fait cinq. */
  .hero .chapo{font-size:1.02rem; margin-top:16px}
  .titre-section{margin-bottom:34px}
  .carte{padding:24px 20px}
  .encadre{padding:22px 20px}
  .hero .accroche{margin-top:22px}
  .defiler{margin-top:28px; font-size:.86rem}
  /* Deux boutons pleine largeur plutot que deux boutons serres l'un
     contre l'autre : la cible tactile double de surface. */
  .actions{gap:12px}
  .actions .bouton{flex:1 1 100%; text-align:center}
  .tels{gap:16px}
  .tel{width:min(240px,46vw)}
  .telephones{gap:14px}
  .telephones .tel{width:min(230px,44vw)}
}

@media (max-width:420px){
  .contenu{padding:0 18px}
  .tels .tel{width:78%}
  .tels .tel.gauche,.tels .tel.droite{transform:none}
}

/* Sous 460 px, les tableaux forcaient un defilement lateral : leur largeur
   minimale de 420 px depassait l'ecran et coupait la colonne de droite, qui
   devenait illisible sans faire glisser le tableau. Constate le 05/09/2026 sur
   320, 360 et 390 px. On empile les cellules.

   Premiere version du meme jour, corrigee dans la foulee : elle ne mettait en
   bloc que `tbody`, `tr`, `th[scope=row]` et `td`. Le tableau des bases legales,
   qui a un `thead` et deux `td` par ligne, gardait donc sa mise en page de
   tableau, la ligne d'en-tete flottait au-dessus de lignes empilees, et le
   texte etait COUPE sans meme pouvoir defiler. Il faut passer `table` lui-meme
   en bloc pour que les cellules prennent toute la largeur.

   Les elements de tableau passes en `display:block` perdent leur semantique
   pour les lecteurs d'ecran. Les deux tableaux concernes portent donc des
   attributs `role` explicites dans le HTML, qui la retablissent. Ne pas retirer
   ces attributs en croyant qu'ils font double emploi. */
@media (max-width:460px){
  .tw{overflow-x:visible}
  .tw table{min-width:0; display:block}
  .tw thead{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
            overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
  .tw tbody{display:block}
  .tw tr{display:block; border:1px solid var(--line); border-radius:10px;
         margin:0 0 12px; overflow:hidden}
  .tw th,.tw td{display:block; width:auto; border:0; padding:12px 14px}
  .tw tr > :first-child{background:var(--carte-haut); color:var(--fg);
                        font-weight:650; border-bottom:1px solid var(--line)}
}