/*
 * TOP TRANSLATE 7.0 — la collection de sélecteurs de langue.
 *
 * Treize modèles, un seul balisage (TOPTR_Switcher), repris TELS QUELS de la
 * collection validée (design/reinvention-2027/selecteurs/) : le socle d'abord
 * (jetons clairs et sombres, une seule grammaire de mouvement, mouvement
 * réduit), puis un bloc par modèle, puis l'intégration dans une page
 * WordPress (flottant, Feuille au téléphone, mention, couleur du site).
 *
 * Aucune image, aucune police, aucune requête : les drapeaux sont des SVG en
 * ligne (TOPTR_Flags), les icônes aussi. Tout est préfixé `.tts` ou
 * `.toptr-sw` : rien ne déteint sur le thème du client.
 *
 * Trois écarts à la collection, et chacun a sa raison :
 *   · la couleur du site arrive par quatre jetons posés par le serveur
 *     (`--tts-site-clair`, `--tts-site-sombre` et leurs encres) : une couleur
 *     qui ne tient pas 3:1 sur la surface d'un mode n'y est pas posée ;
 *   · le code d'une langue, en fin de ligne, est à l'encre seconde : le ton
 *     tertiaire (3,6:1 sur blanc) sert aux icônes, jamais à du texte ;
 *   · le Verre porte ses colonnes sur sa liste, pour que la mention reste
 *     sous la liste au lieu de devenir une case de la grille.
 */

/* ══ LE SOCLE ══════════════════════════════════════════════════════════════ */
.tts{
  /* Clair — les valeurs par défaut */
  --tts-ink:#1D2326; --tts-ink-2:#566166; --tts-ink-3:#7E888D;
  --tts-surface:#FFFFFF; --tts-surface-2:#F6F7F7;
  --tts-track:rgba(29,35,38,.055); --tts-hover:rgba(29,35,38,.06); --tts-press:rgba(29,35,38,.1);
  --tts-line:rgba(29,35,38,.11); --tts-line-2:rgba(29,35,38,.2);
  --tts-shadow-1:0 1px 2px rgba(18,22,25,.07),0 1px 1px rgba(18,22,25,.04);
  --tts-shadow-2:0 1px 2px rgba(18,22,25,.06),0 16px 36px -14px rgba(18,22,25,.26);
  --tts-glass:rgba(255,255,255,.58); --tts-glass-line:rgba(255,255,255,.6); --tts-glass-ink:#11171A;
  --tts-backdrop:rgba(15,19,22,.34);
  /* La couleur du site : neutre par défaut, le site la remplace (ex. sa terre cuite) */
  --tts-accent:var(--tts-site-clair,var(--tts-ink)); --tts-on-accent:var(--tts-site-clair-on,#FFFFFF);
  --tts-r:10px; --tts-r-lg:14px;
  /* Le mouvement : trois durées, deux courbes, pour toute la collection */
  --tts-t1:140ms; --tts-t2:220ms; --tts-t3:420ms;
  --tts-ease:cubic-bezier(.2,.8,.2,1);
  --tts-spring:cubic-bezier(.3,1.32,.55,1);
  position:relative; display:inline-flex; align-items:center; vertical-align:middle;
  font:inherit; font-size:var(--tts-size,.9rem); line-height:1.25; color:var(--tts-ink);
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
}
.tts[data-mode="dark"]{
  --tts-ink:#EEF1F2; --tts-ink-2:#A8B1B5; --tts-ink-3:#7F898E;
  --tts-surface:#1E2326; --tts-surface-2:#262C2F;
  --tts-track:rgba(255,255,255,.075); --tts-hover:rgba(255,255,255,.075); --tts-press:rgba(255,255,255,.12);
  --tts-line:rgba(255,255,255,.12); --tts-line-2:rgba(255,255,255,.22);
  --tts-shadow-1:0 1px 2px rgba(0,0,0,.45);
  --tts-shadow-2:0 1px 2px rgba(0,0,0,.4),0 20px 44px -14px rgba(0,0,0,.72);
  --tts-glass:rgba(22,27,30,.52); --tts-glass-line:rgba(255,255,255,.14); --tts-glass-ink:#F2F4F5;
  --tts-backdrop:rgba(0,0,0,.5);
  --tts-accent:var(--tts-site-sombre,var(--tts-ink)); --tts-on-accent:var(--tts-site-sombre-on,#121719);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  .tts[data-mode="auto"]{
    --tts-ink:#EEF1F2; --tts-ink-2:#A8B1B5; --tts-ink-3:#7F898E;
    --tts-surface:#1E2326; --tts-surface-2:#262C2F;
    --tts-track:rgba(255,255,255,.075); --tts-hover:rgba(255,255,255,.075); --tts-press:rgba(255,255,255,.12);
    --tts-line:rgba(255,255,255,.12); --tts-line-2:rgba(255,255,255,.22);
    --tts-shadow-1:0 1px 2px rgba(0,0,0,.45);
    --tts-shadow-2:0 1px 2px rgba(0,0,0,.4),0 20px 44px -14px rgba(0,0,0,.72);
    --tts-glass:rgba(22,27,30,.52); --tts-glass-line:rgba(255,255,255,.14); --tts-glass-ink:#F2F4F5;
    --tts-backdrop:rgba(0,0,0,.5); color-scheme:dark;
    --tts-accent:var(--tts-site-sombre,var(--tts-ink)); --tts-on-accent:var(--tts-site-sombre-on,#121719);
  }
}
.tts *,.tts *::before,.tts *::after{box-sizing:border-box}
.tts a{color:inherit;text-decoration:none}
.tts button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
.tts :focus{outline:none}
.tts :focus-visible{outline:2px solid var(--tts-accent);outline-offset:2px;border-radius:8px}
.tts-ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tts-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Les drapeaux : la table unique, recadrée à la taille du texte */
.tts-fl{display:inline-block;width:1.36em;height:.94em;border-radius:3px;overflow:hidden;flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);vertical-align:-.12em}
.tts-fl.rond{position:relative;width:1.3em;height:1.3em;border-radius:50%}
.tts-fl>svg{display:block;width:100%;height:100%}
/* La pastille de code (l'arabe n'a pas de drapeau) : sa police est plus petite que le texte,
   donc ses cotes se divisent par la même fraction pour garder la taille d'un drapeau */
.tts-fl.tts-sans{display:inline-grid;place-items:center;width:auto;min-width:calc(1.36em / .56);height:calc(.94em / .56);
  padding:0 .3em;font:600 .56em/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;
  color:var(--tts-ink-2);background:var(--tts-track);box-shadow:inset 0 0 0 1px var(--tts-line)}
.tts-fl.tts-sans.rond{width:calc(1.3em / .56);height:calc(1.3em / .56);min-width:0;border-radius:50%;padding:0}
.tts-code{font:600 .76em/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}

/* Le panneau des modèles qui s'ouvrent : il naît de son bouton */
.tts-panneau{position:absolute;z-index:40;top:calc(100% + 8px);inset-inline-end:0;min-width:13.5rem;padding:6px;
  background:var(--tts-surface);color:var(--tts-ink);border:1px solid var(--tts-line);border-radius:var(--tts-r-lg);
  box-shadow:var(--tts-shadow-2);transform-origin:top right;
  opacity:0;visibility:hidden;transform:translateY(-4px) scale(.97);
  transition:opacity var(--tts-t2) var(--tts-ease),transform var(--tts-t2) var(--tts-ease),visibility 0s linear var(--tts-t2)}
.tts.is-open .tts-panneau{opacity:1;visibility:visible;transform:none;
  transition:opacity var(--tts-t2) var(--tts-ease),transform var(--tts-t2) var(--tts-ease),visibility 0s}
.tts-ligne{display:flex;align-items:center;gap:.7em;padding:.6em .7em;border-radius:9px;color:var(--tts-ink);
  transition:background-color var(--tts-t1) var(--tts-ease),color var(--tts-t1) var(--tts-ease)}
.tts-ligne:hover{background:var(--tts-hover)}
.tts-ligne:active{background:var(--tts-press)}
.tts-ligne .tts-code{margin-inline-start:auto;color:var(--tts-ink-2);font-weight:500}
.tts-ligne .tts-coche{margin-inline-start:auto;color:var(--tts-accent);opacity:0;transform:scale(.6);
  transition:opacity var(--tts-t1) var(--tts-ease),transform var(--tts-t2) var(--tts-spring)}
.tts-ligne[aria-current] .tts-coche{opacity:1;transform:none}
.tts-ligne[aria-current] .tts-code{display:none}
.tts-ligne[aria-current]{font-weight:600}
/* Les lignes arrivent l'une après l'autre, à peine : 16 ms d'écart */
.tts.is-open .tts-ligne{animation:tts-entre var(--tts-t2) var(--tts-ease) both;animation-delay:calc(var(--i,0) * 16ms)}
@keyframes tts-entre{from{opacity:0;transform:translateY(-3px)}}

/* Le curseur des modèles qui glissent : la JS le pose sous la langue affichée */
.tts-curseur{--x:0px;--y:0px;--w:0px;--h:100%;position:absolute;left:0;top:0;width:var(--w,0);height:var(--h,100%);
  transform:translate(var(--x,0),var(--y,0));pointer-events:none;
  transition:transform var(--tts-t3) var(--tts-spring),width var(--tts-t3) var(--tts-spring),height var(--tts-t3) var(--tts-spring)}
.tts:not(.tts-pret) .tts-curseur{transition:none}
/* Page écrite de droite à gauche : le panneau naît du coin opposé */
[dir="rtl"] .tts-panneau,.tts[dir="rtl"] .tts-panneau{transform-origin:top left}

/* Mouvement réduit : les états restent, les trajets disparaissent */
@media (prefers-reduced-motion:reduce){
  .tts,.tts *,.tts *::before,.tts *::after{transition-duration:1ms!important;animation-duration:1ms!important;
    animation-delay:0ms!important;animation-iteration-count:1!important}
}
@media (forced-colors:active){.tts-curseur{background:Highlight!important}}

/* ══ 01 · PASTILLES ═════════════════════════════════════════════════════════ */
.tts-pastilles .pa-piste{position:relative;display:flex;align-items:center;padding:3px;border-radius:999px;
  background:var(--tts-track);box-shadow:inset 0 0 0 1px var(--tts-line);
  max-width:min(100%,28rem);overflow-x:auto;scrollbar-width:none}
.tts-pastilles .pa-piste::-webkit-scrollbar{display:none}
.tts-pastilles .tts-curseur{border-radius:999px;background:var(--tts-accent);
  box-shadow:0 1px 2px color-mix(in srgb,var(--tts-ink) 18%,transparent),0 3px 10px -4px color-mix(in srgb,var(--tts-accent) 55%,transparent)}
.tts-pastilles .pa-l{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.4em;
  padding:.46em .78em;border-radius:999px;white-space:nowrap;
  font-size:.8em;font-weight:600;letter-spacing:.05em;color:var(--tts-ink-2);
  transition:color var(--tts-t2) var(--tts-ease)}
.tts-pastilles .pa-l:hover{color:var(--tts-ink)}
.tts-pastilles .pa-l[aria-current]{color:var(--tts-on-accent)}
.tts-pastilles .pa-l .tts-fl{font-size:1.02em}
/* Avant la JS (ou sans elle) : la pastille est posée sur la langue elle-même */
.tts-pastilles:not(.tts-pret) .pa-l[aria-current]{background:var(--tts-accent)}
.tts-pastilles.tts-pret .tts-curseur{display:block}
.tts-pastilles:not(.tts-pret) .tts-curseur{display:none}

/* ══ 02 · SOULIGNEMENT ══════════════════════════════════════════════════════ */
/* La taille du menu qui l'accueille : 1em, sauf si le site règle --tts-size. Si le
   menu est plus étroit que la liste, elle défile, sans barre (comme la référence) ;
   4 px de marge intérieure gardent l'anneau du focus hors de la coupe. Rendus en
   hauteur seulement : en largeur, une marge négative rendrait `max-width:100%`
   circulaire, et le dernier nom serait coupé de 8 px. */
.tts.tts-soulignement{font-size:var(--tts-size,1em);gap:1.1em;max-width:100%;overflow-x:auto;scrollbar-width:none;
  padding:4px;margin-block:-4px}
.tts.tts-soulignement::-webkit-scrollbar{display:none}
.tts-soulignement .so-l{position:relative;display:inline-flex;align-items:center;gap:.45em;padding:.62em 0;
  white-space:nowrap;color:var(--tts-ink-2);transition:color var(--tts-t1) var(--tts-ease)}
.tts-soulignement .so-l:hover,.tts-soulignement .so-l[aria-current]{color:var(--tts-ink)}
/* Avec drapeaux : chaque drapeau sépare déjà deux langues, les écarts se resserrent,
   et le nom descend d'un cran pour que le groupe ne pèse pas plus que le menu */
.tts.tts-soulignement.so-drapeaux{gap:.72em}
.tts-soulignement.so-drapeaux .so-l{font-size:.92em;gap:.3em}
.tts-soulignement .so-l .tts-fl{font-size:.76em}
/* Le trait : au pied de la boîte que la JS lui donne ; sans elle, sous la langue affichée */
.tts-soulignement .tts-curseur::after,
.tts-soulignement:not(.tts-pret) .so-l[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:.3em;
  height:2px;border-radius:2px;background:var(--tts-accent)}
.tts-soulignement:not(.tts-pret) .tts-curseur{display:none}
.tts-soulignement .so-l:focus-visible{outline-offset:2px;border-radius:6px}
/* Au doigt : 45 px de cible, sans déplacer le trait ni empiéter sur le voisin */
/* (la racine défile, donc coupe aussi le pointeur à son bord : elle s'élargit d'autant) */
@media (pointer:coarse){.tts.tts-soulignement{padding-block:6px;margin-block:-6px}
  .tts-soulignement .so-l::before{content:"";position:absolute;inset:-6px -.3em}}

/* ══ 03 · CAPSULE ═══════════════════════════════════════════════════════════ */
/* Le bouton : une capsule au trait fin, qui se remplit à peine au survol */
.tts-capsule .ca-bouton{display:inline-flex;align-items:center;gap:.5em;height:2.45em;padding:0 .8em 0 1em;
  border:1px solid var(--tts-line);border-radius:999px;color:var(--tts-ink);font-weight:500;white-space:nowrap;
  transition:background-color var(--tts-t1) var(--tts-ease),border-color var(--tts-t1) var(--tts-ease)}
.tts-capsule.ca-fl .ca-bouton{padding-left:.5em}
.tts-capsule .ca-bouton:hover,.tts-capsule.is-open .ca-bouton{background:var(--tts-hover);border-color:var(--tts-line-2)}
.tts-capsule .ca-bouton:active{background:var(--tts-press)}
.tts-capsule .ca-bouton:focus-visible{border-radius:999px}
.tts-capsule .ca-actuel{display:inline-flex;align-items:center;gap:.5em}
.tts-capsule .ca-chevron{width:.95em;height:.95em;margin-right:-.1em;color:var(--tts-ink-3);
  transition:transform var(--tts-t2) var(--tts-ease),color var(--tts-t1) var(--tts-ease)}
.tts-capsule .ca-bouton:hover .ca-chevron,.tts-capsule.is-open .ca-chevron{color:var(--tts-ink-2)}
.tts-capsule.is-open .ca-chevron{transform:rotate(180deg)}
.tts-capsule .tts-fl.rond{width:1.25em;height:1.25em}
/* Un filet autour du disque : un drapeau blanc (le japonais) garde son bord sur une surface blanche */
.tts-capsule .tts-fl.rond:not(.tts-sans)::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--tts-line)}
/* La langue sans drapeau garde la taille d'un drapeau : sa pastille écrit en .56em, d'où 1,25 / .56 */
.tts-capsule .tts-fl.tts-sans.rond{width:2.232em;height:2.232em}

/* Le panneau : au moins la largeur du bouton ; une ligne par langue */
.tts-capsule .ca-panneau{min-width:max(100%,13.5rem)}
.tts-capsule .ca-liste{position:relative;display:grid;gap:1px}
.tts-capsule .tts-ligne{gap:.65em;padding:.55em .7em}
.tts-capsule .tts-ligne:focus-visible{outline-offset:-2px}
.tts-capsule .ca-nom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Le code et la coche partagent la même place, au bord droit */
.tts-capsule .ca-fin{display:grid;place-items:center end;margin-left:auto;padding-left:1em}
.tts-capsule .ca-fin>*{grid-area:1/1;margin:0}
.tts-capsule .tts-coche{width:1.05em;height:1.05em}
.tts-capsule [hidden]{display:none!important}

/* Au-delà de huit langues : la recherche en tête, une liste qui défile */
.tts-capsule .ca-recherche{display:flex;align-items:center;gap:.55em;height:2.5em;margin-bottom:6px;padding:0 .75em;
  border:1px solid transparent;border-radius:9px;background:var(--tts-track);color:var(--tts-ink-3);cursor:text;
  transition:background-color var(--tts-t1) var(--tts-ease),border-color var(--tts-t1) var(--tts-ease)}
/* Le focus : un trait à la couleur du site ; l'anneau transparent n'apparaît qu'en contrastes élevés */
.tts-capsule .ca-recherche:focus-within{background:transparent;border-color:var(--tts-accent);
  outline:2px solid transparent;outline-offset:1px}
.tts-capsule .ca-recherche .tts-ic{width:1.05em;height:1.05em}
.tts-capsule .ca-recherche input{flex:1;width:0;min-width:0;height:100%;margin:0;padding:0;border:0;background:transparent;
  color:var(--tts-ink);font:inherit;-webkit-appearance:none;appearance:none}
.tts-capsule .ca-recherche input:focus-visible{outline:none}
.tts-capsule .ca-recherche input::placeholder{color:var(--tts-ink-2);opacity:1}
.tts-capsule .ca-recherche input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.tts-capsule.ca-long .ca-liste{max-height:15.6em;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--tts-line-2) transparent}
.tts-capsule .ca-vide{margin:0;padding:.85em .7em 1em;color:var(--tts-ink-2);text-align:center}

/* Au doigt : 44 px de cible, au moins */
@media (pointer:coarse){
  .tts-capsule .ca-bouton{height:44px}
  .tts-capsule .tts-ligne{min-height:44px}
  /* 4 rangées et demie de 44 px : la moitié qui dépasse dit qu'on peut défiler */
  .tts-capsule.ca-long .ca-liste{max-height:202px}
}

/* ══ 04 · DISCRET ═══════════════════════════════════════════════════════════ */
/* Le bouton : aucun cadre, la voix du menu */
.tts-discret .di-bouton{display:inline-flex;align-items:center;gap:.32em;height:2.3em;padding:0 .35em;
  border:1px solid transparent;border-radius:7px;color:var(--tts-ink-2);letter-spacing:.03em;white-space:nowrap;
  transition:color var(--tts-t1) var(--tts-ease)}
.tts-discret .di-bouton:hover,.tts-discret.is-open .di-bouton{color:var(--tts-ink)}
.tts-discret .di-bouton:focus-visible{border-radius:7px}
.tts-discret .di-chevron{width:.78em;height:.78em;stroke-width:2.3;color:var(--tts-ink-3);
  transition:transform var(--tts-t2) var(--tts-ease),color var(--tts-t1) var(--tts-ease)}
.tts-discret .di-bouton:hover .di-chevron,.tts-discret.is-open .di-chevron{color:currentColor}
.tts-discret.is-open .di-chevron{transform:rotate(180deg)}

/* La liste : légère, serrée, une ombre courte */
.tts-discret .tts-panneau{top:calc(100% + 6px);min-width:10.5rem;padding:4px;border-radius:var(--tts-r);
  box-shadow:var(--tts-shadow-1)}
.tts-discret .di-liste{position:relative;display:grid;gap:1px}
.tts-discret .tts-ligne{gap:.6em;padding:.42em .6em;border-radius:6px}
.tts-discret .tts-ligne:focus-visible{outline-offset:-2px}
.tts-discret .di-nom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tts-discret .di-fin{display:grid;place-items:center end;margin-left:auto;padding-left:1.2em}
.tts-discret .di-fin>*{grid-area:1/1;margin:0}
.tts-discret .tts-code{font-family:inherit;font-size:.8em;font-weight:500;letter-spacing:.05em}
.tts-discret .tts-coche{width:.95em;height:.95em}
.tts-discret .tts-fl:not(.tts-sans){font-size:.92em}
/* La langue sans drapeau garde la taille d'un drapeau : sa pastille écrit en .56em, d'où 1,36 × .92 / .56 */
.tts-discret .tts-fl.tts-sans{width:2.234em;min-width:0;height:1.544em;padding:0}
.tts-discret.di-long .di-liste{max-height:18.4em;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--tts-line-2) transparent}

@media (pointer:coarse){
  .tts-discret .di-bouton{height:44px;min-width:44px;justify-content:center}
  .tts-discret .tts-ligne{min-height:44px}
  /* 5 rangées et demie de 44 px : la moitié qui dépasse dit qu'on peut défiler */
  .tts-discret.di-long .di-liste{max-height:247px}
}

/* ══ 05 · DRAPEAUX ══════════════════════════════════════════════════════════ */
.tts-drapeaux{--dr-d:1.5em;--dr-air:4px}
.tts-drapeaux .dr-rang{position:relative;display:flex;align-items:center;gap:1px}
/* Une case carrée par drapeau : le drapeau, et l'air qui le sépare de l'anneau */
.tts-drapeaux .dr-l{position:relative;display:grid;place-items:center;flex:none;
  width:calc(var(--dr-d) + 2 * var(--dr-air));height:calc(var(--dr-d) + 2 * var(--dr-air));border-radius:50%}
.tts-drapeaux .dr-l .tts-fl.rond{width:var(--dr-d);height:var(--dr-d);
  transition:transform var(--tts-t1) var(--tts-ease),box-shadow var(--tts-t1) var(--tts-ease)}
/* L'arabe n'a pas de drapeau (choix de la table) : sa pastille de code a sa propre
   taille de police, on compense pour qu'elle ait le diamètre des autres */
.tts-drapeaux .dr-l .tts-fl.tts-sans.rond{width:calc(var(--dr-d) / .56);height:calc(var(--dr-d) / .56)}
/* Un filet sur le bord du drapeau, pour que le blanc ne se perde pas dans la page */
.tts-drapeaux .dr-l .tts-fl.rond:not(.tts-sans)::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tts-ink) 14%,transparent)}
.tts-drapeaux .dr-l:not([aria-current]):hover .tts-fl{transform:translateY(-1px);
  box-shadow:0 2px 4px -1px color-mix(in srgb,var(--tts-ink) 28%,transparent)}
/* L'anneau : le curseur du socle ; sans la JS, il est posé sur le drapeau affiché */
.tts-drapeaux .tts-curseur{border-radius:50%;box-shadow:inset 0 0 0 2px var(--tts-accent)}
.tts-drapeaux:not(.tts-pret) .tts-curseur{display:none}
.tts-drapeaux:not(.tts-pret) .dr-l[aria-current]{box-shadow:inset 0 0 0 2px var(--tts-accent)}
/* L'étiquette : transparente au repos, jamais retirée — les lecteurs d'écran la lisent */
.tts-drapeaux .dr-nom{position:absolute;z-index:2;top:calc(100% + 5px);left:50%;
  padding:.36em .62em;border-radius:7px;white-space:nowrap;pointer-events:none;
  font-size:.78em;font-weight:500;line-height:1.2;letter-spacing:.005em;
  background:var(--tts-surface);color:var(--tts-ink);box-shadow:var(--tts-shadow-2),inset 0 0 0 1px var(--tts-line);
  opacity:0;transform:translate(-50%,-2px);
  transition:opacity var(--tts-t1) var(--tts-ease),transform var(--tts-t1) var(--tts-ease)}
.tts-drapeaux .dr-l:hover .dr-nom,.tts-drapeaux .dr-l:focus-visible .dr-nom{opacity:1;transform:translate(-50%,0)}
/* Le focus ne doit pas se confondre avec l'anneau de la langue affichée : il prend
   l'encre, et un cercle plus large */
.tts-drapeaux .dr-l:focus-visible{border-radius:50%;outline-color:var(--tts-ink);outline-offset:1px}
/* Au doigt : 45 px de cible, en écartant les drapeaux plutôt qu'en les grossissant */
@media (pointer:coarse){
  .tts-drapeaux .dr-rang{gap:16px}
  .tts-drapeaux .dr-l::before{content:"";position:absolute;inset:-8px}
}

/* ══ 06 · DÉPLOIEMENT ═══════════════════════════════════════════════════════ */
/* La largeur dépliée : mesurée par la JS ; sans elle, estimée d'après la largeur d'un
   code (2,2 em mesurés, 3,7 em avec son drapeau) — un peu large plutôt que trop court */
.tts.tts-deploiement{--de-sens:1;--de-case:2.32em;--de-plein:calc(var(--n,5) * var(--de-case) + 3px)}
.tts.tts-deploiement.de-drapeaux{--de-case:3.78em}
.tts.tts-deploiement:dir(rtl){--de-sens:-1}
.tts.tts-deploiement.is-open{z-index:40}
/* Le bouton : la langue affichée, et le chevron qui dit de quel côté ça s'ouvre */
.tts-deploiement .de-bouton{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.26em;
  padding:3px;padding-inline-end:.5em;border-radius:999px;color:var(--tts-ink-2);
  transition:color var(--tts-t1) var(--tts-ease)}
.tts-deploiement .de-bouton:hover{color:var(--tts-ink)}
.tts-deploiement .de-actuel{display:inline-flex;align-items:center;gap:.4em;padding:.46em .78em;border-radius:999px;
  font-size:.8em;font-weight:600;letter-spacing:.05em;white-space:nowrap;
  background:var(--tts-accent);color:var(--tts-on-accent);
  box-shadow:0 1px 2px color-mix(in srgb,var(--tts-ink) 18%,transparent),0 3px 10px -4px color-mix(in srgb,var(--tts-accent) 55%,transparent)}
.tts-deploiement .de-actuel .tts-fl,.tts-deploiement .de-l .tts-fl{font-size:1.02em}
.tts-deploiement .de-chevron{font-size:.95em;transform:rotate(calc(90deg * var(--de-sens)));
  transition:transform var(--tts-t2) var(--tts-ease)}
/* Le volet : la peau de la capsule. Au repos, il est exactement sous le bouton ;
   ouvert, il s'allonge vers le menu de la largeur des autres codes. Il passe au fond
   opaque D'UN COUP en s'ouvrant (un fond qui se fond laisserait voir les liens du
   site au travers pendant le trajet), et ne revient au fond de piste qu'une fois replié. */
.tts-deploiement .de-volet{position:absolute;inset-block:0;inset-inline-end:0;width:100%;padding-inline-end:100%;
  display:flex;align-items:center;justify-content:flex-end;overflow:hidden;border-radius:999px;
  background:var(--tts-track);box-shadow:inset 0 0 0 1px var(--tts-line);
  transition:width var(--tts-t2) var(--tts-ease),background-color 0s linear var(--tts-t2),box-shadow var(--tts-t2) var(--tts-ease)}
.tts-deploiement .de-rang{display:flex;align-items:center;flex:none;width:max-content;padding-inline-start:3px;
  visibility:hidden;transition:visibility 0s linear var(--tts-t2)}
.tts-deploiement .de-l{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  padding:.46em .72em;border-radius:999px;
  font-size:.8em;font-weight:600;letter-spacing:.05em;white-space:nowrap;color:var(--tts-ink-2);
  opacity:0;transform:translateX(calc(.6em * var(--de-sens)));
  transition:opacity var(--tts-t1) var(--tts-ease),transform var(--tts-t1) var(--tts-ease),
    color var(--tts-t1) var(--tts-ease),background-color var(--tts-t1) var(--tts-ease)}
.tts-deploiement .de-l:hover{color:var(--tts-ink);background:var(--tts-hover)}
.tts-deploiement .de-l:active{background:var(--tts-press)}
.tts-deploiement .de-l[aria-current]{display:none}
/* Le volet coupe ce qui dépasse : le focus se dessine donc en dedans */
.tts-deploiement .de-l:focus-visible,.tts-deploiement .de-bouton:focus-visible{outline-offset:-2px;border-radius:999px}
/* Ouvert : la capsule s'allonge d'un ressort, les codes arrivent un à un depuis le bouton,
   au rythme où son bord les découvre (14 ms d’écart : plus lent, la capsule courrait
   vide devant eux) */
.tts-deploiement:is(.is-open,:not(.tts-pret):hover,:not(.tts-pret):focus-within) .de-volet{width:calc(100% + var(--de-plein));background:var(--tts-surface);
  box-shadow:inset 0 0 0 1px var(--tts-line),var(--tts-shadow-2);
  transition:width var(--tts-t2) var(--tts-spring),background-color 0s,box-shadow var(--tts-t2) var(--tts-ease)}
.tts-deploiement:is(.is-open,:not(.tts-pret):hover,:not(.tts-pret):focus-within) .de-rang{visibility:visible;transition:visibility 0s}
.tts-deploiement:is(.is-open,:not(.tts-pret):hover,:not(.tts-pret):focus-within) .de-l{opacity:1;transform:none;
  transition:opacity var(--tts-t1) var(--tts-ease) calc(var(--i,0) * 14ms),
    transform var(--tts-t2) var(--tts-spring) calc(var(--i,0) * 14ms),
    color var(--tts-t1) var(--tts-ease),background-color var(--tts-t1) var(--tts-ease)}
.tts-deploiement:is(.is-open,:not(.tts-pret):hover,:not(.tts-pret):focus-within) .de-chevron{transform:rotate(calc(-90deg * var(--de-sens)))}
/* Avant la première mesure, rien ne glisse */
.tts-deploiement:not(.tts-pret) .de-volet{transition:none}
/* Mouvement réduit : le socle abrège les durées ; les écarts d'apparition et le
   retour différé du fond tombent aussi — l'état change d'un coup, sans cascade */
@media (prefers-reduced-motion:reduce){
  .tts-deploiement .de-volet,.tts-deploiement .de-rang,.tts-deploiement .de-l{transition-delay:0ms!important}
}
/* Au doigt : une capsule de 44 px de haut, et des codes de 44 px de côté */
@media (pointer:coarse){
  .tts.tts-deploiement{--de-case:max(2.32em,44px)}
  .tts.tts-deploiement.de-drapeaux{--de-case:max(3.78em,44px)}
  .tts-deploiement .de-actuel,.tts-deploiement .de-l{padding-block:1.05em}
  .tts-deploiement .de-l{min-width:44px}
  .tts-deploiement .de-l::before{content:"";position:absolute;inset:-3px 0}
}

/* ══ 07 · BASCULE ═══════════════════════════════════════════════════════════ */
.tts-bascule .ba-piste{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:3px;
  border-radius:999px;background:var(--tts-track);box-shadow:inset 0 0 0 1px var(--tts-line);cursor:pointer}
/* La pastille passe DEVANT les liens (qu'elle laisse cliquer : le socle la rend
   transparente au pointeur) et coupe son calque à sa forme */
.tts-bascule .tts-curseur{z-index:1;overflow:hidden;border-radius:999px;background:var(--tts-accent);
  box-shadow:0 1px 2px color-mix(in srgb,var(--tts-ink) 18%,transparent),0 3px 10px -4px color-mix(in srgb,var(--tts-accent) 55%,transparent)}
.tts-bascule .ba-l,.tts-bascule .ba-c{display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  padding:.46em .8em;border-radius:999px;white-space:nowrap;font-size:.8em;font-weight:600;letter-spacing:.05em}
.tts-bascule .ba-l .tts-fl,.tts-bascule .ba-c .tts-fl{font-size:1.02em}
.tts-bascule .ba-l{position:relative;color:var(--tts-ink-2);transition:color var(--tts-t1) var(--tts-ease)}
/* Survoler la piste, c'est déjà viser l'autre langue : elle se fonce */
.tts-bascule .ba-piste:hover .ba-l{color:var(--tts-ink)}
/* Le calque : la piste, redessinée à la couleur de la pastille, et tenue immobile */
.tts-bascule .ba-calque{position:absolute;left:0;top:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;
  padding:3px;width:calc(2 * var(--w,0px) + 6px);height:calc(var(--h,0px) + 6px);color:var(--tts-on-accent);
  transform:translate(calc(-1 * var(--x,0px)),calc(-1 * var(--y,0px)));transition:transform var(--tts-t3) var(--tts-spring)}
.tts-bascule:not(.tts-pret) .ba-calque{transition:none}
/* Sans la JS, la pastille est posée sur la langue affichée elle-même */
.tts-bascule:not(.tts-pret) .tts-curseur{display:none}
.tts-bascule:not(.tts-pret) .ba-l[aria-current]{background:var(--tts-accent);color:var(--tts-on-accent)}
.tts-bascule .ba-l:focus-visible{border-radius:999px}
/* Au doigt : 44 px de cible, sans grossir la piste */
@media (pointer:coarse){.tts-bascule .ba-piste::before{content:"";position:absolute;inset:-7px -4px}}

/* ══ 08 · GRAND MENU ════════════════════════════════════════════════════════ */
/* Le bouton : un globe, la langue affichée, sans cadre ; un fond léger au survol */
.tts-grand-menu .gm-bouton{display:inline-flex;align-items:center;gap:.5em;height:2.45em;padding:0 .7em 0 .65em;
  border:1px solid transparent;border-radius:var(--tts-r);color:var(--tts-ink);font-weight:500;white-space:nowrap;
  transition:background-color var(--tts-t1) var(--tts-ease)}
.tts-grand-menu .gm-bouton:hover,.tts-grand-menu.is-open .gm-bouton{background:var(--tts-hover)}
.tts-grand-menu .gm-bouton:active{background:var(--tts-press)}
.tts-grand-menu .gm-bouton:focus-visible{border-radius:var(--tts-r)}
.tts-grand-menu .gm-globe{width:1.15em;height:1.15em;stroke-width:1.7;color:var(--tts-ink-2)}
.tts-grand-menu .gm-chevron{width:.9em;height:.9em;margin-left:-.1em;color:var(--tts-ink-3);
  transition:transform var(--tts-t2) var(--tts-ease)}
.tts-grand-menu.is-open .gm-chevron{transform:rotate(180deg)}

/* Le panneau : large, la recherche en tête, la grille dessous. Trois colonnes sur 34 rem ; deux, ou une,
   quand il y a peu de langues (la grille ne laisse jamais une colonne vide). Jamais plus large que l'écran
   ni que le bloc qui l'accueille (avec un plancher) ; ses colonnes suivent SA largeur, pas celle de l'écran */
.tts-grand-menu{--tts-gm-cols:3;--tts-gm-l:34rem}
.tts-grand-menu.gm-c2{--tts-gm-cols:2;--tts-gm-l:24rem}
.tts-grand-menu.gm-c1{--tts-gm-cols:1;--tts-gm-l:14rem}
.tts-grand-menu .gm-panneau{width:min(var(--tts-gm-l),calc(100vw - 2rem));padding:8px;container-type:inline-size}
@supports (width:1cqi){
  .tts-grand-menu .gm-panneau{width:min(var(--tts-gm-l),calc(100vw - 2rem),max(18rem,calc(100cqi - 2rem)))}
}
.tts-grand-menu .gm-grille{position:relative;display:grid;grid-template-columns:repeat(var(--tts-gm-cols),minmax(0,1fr));gap:2px 4px;
  max-height:min(19.6em,60vh);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--tts-line-2) transparent}
.tts-grand-menu .tts-ligne{min-width:0;gap:.6em;padding:.6em .7em}
.tts-grand-menu .tts-ligne:focus-visible{outline-offset:-2px}
.tts-grand-menu .gm-nom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tts-grand-menu .gm-fin{display:grid;place-items:center end;margin-left:auto;padding-left:.6em}
.tts-grand-menu .gm-fin>*{grid-area:1/1;margin:0}
.tts-grand-menu .tts-coche{width:1.05em;height:1.05em}
.tts-grand-menu .tts-fl.rond{width:1.2em;height:1.2em}
/* Un filet autour du disque : un drapeau blanc (le japonais) garde son bord sur une surface blanche */
.tts-grand-menu .tts-fl.rond:not(.tts-sans)::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--tts-line)}
/* La langue sans drapeau garde la taille d'un drapeau : sa pastille écrit en .56em, d'où 1,2 / .56 */
.tts-grand-menu .tts-fl.tts-sans.rond{width:2.143em;height:2.143em}
.tts-grand-menu [hidden]{display:none!important}
/* Les cases entrent en fondu, sans bouger : l'une après l'autre, à peine */
.tts-grand-menu.is-open .tts-ligne{animation-name:tts-grand-menu-fondu}
@keyframes tts-grand-menu-fondu{from{opacity:0}}

.tts-grand-menu .gm-recherche{display:flex;align-items:center;gap:.6em;height:2.6em;margin-bottom:8px;padding:0 .8em;
  border:1px solid transparent;border-radius:9px;background:var(--tts-track);color:var(--tts-ink-3);cursor:text;
  transition:background-color var(--tts-t1) var(--tts-ease),border-color var(--tts-t1) var(--tts-ease)}
/* Le focus : un trait à la couleur du site ; l'anneau transparent n'apparaît qu'en contrastes élevés */
.tts-grand-menu .gm-recherche:focus-within{background:transparent;border-color:var(--tts-accent);
  outline:2px solid transparent;outline-offset:1px}
.tts-grand-menu .gm-recherche .tts-ic{width:1.05em;height:1.05em}
.tts-grand-menu .gm-recherche input{flex:1;width:0;min-width:0;height:100%;margin:0;padding:0;border:0;background:transparent;
  color:var(--tts-ink);font:inherit;-webkit-appearance:none;appearance:none}
.tts-grand-menu .gm-recherche input:focus-visible{outline:none}
.tts-grand-menu .gm-recherche input::placeholder{color:var(--tts-ink-2);opacity:1}
.tts-grand-menu .gm-recherche input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.tts-grand-menu .gm-vide{margin:0;padding:.9em .7em 1em;color:var(--tts-ink-2);text-align:center}

/* Étroit (un téléphone) : trois colonnes deviennent deux ; puis, les cases trop étroites, le code s'efface
   et seule la case cochée garde la place de sa coche, pour que chaque nom tienne entier */
@container (max-width:27rem){.tts-grand-menu:not(.gm-c1) .gm-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:22rem){
  .tts-grand-menu:not(.gm-c1) .tts-ligne{gap:.5em;padding-inline:.55em}
  .tts-grand-menu:not(.gm-c1) .gm-fin .tts-code{display:none}
  .tts-grand-menu:not(.gm-c1) .tts-ligne:not([aria-current]) .gm-fin{display:none}
}
@media (pointer:coarse){
  .tts-grand-menu .gm-bouton{height:44px}
  .tts-grand-menu .tts-ligne{min-height:44px}
  /* 4 rangées et demie de 44 px : la moitié qui dépasse dit qu'on peut défiler */
  .tts-grand-menu .gm-grille{max-height:min(206px,60vh)}
}

/* ══ 09 · VERRE ═════════════════════════════════════════════════════════════ */
.tts-verre{
  --v-verre:color-mix(in srgb,var(--tts-glass) 55%,var(--tts-surface));
  --v-verre-plus:color-mix(in srgb,var(--tts-glass) 40%,var(--tts-surface));
  --v-flou:blur(18px) saturate(1.7);
  /* l'encre seconde (codes, chevron) : 80 %, qui tient 4,7:1 sur le verre sombre posé sur du blanc pur */
  --v-encre-2:color-mix(in srgb,var(--tts-glass-ink) 80%,transparent);
  --v-survol:color-mix(in srgb,var(--tts-glass-ink) 8%,transparent);
  --v-appui:color-mix(in srgb,var(--tts-glass-ink) 13%,transparent);
  /* un cerne à peine marqué : il garde le bord du verre quand l'image est blanche derrière */
  --v-cerne:color-mix(in srgb,var(--tts-line) 70%,transparent);
  color:var(--tts-glass-ink);
}
/* La capsule */
.tts-verre .tts-verre-bouton{display:inline-flex;align-items:center;gap:.5em;height:2.25rem;padding:0 .7rem 0 .8rem;
  border-radius:999px;background:var(--v-verre);-webkit-backdrop-filter:var(--v-flou);backdrop-filter:var(--v-flou);
  border:1px solid var(--tts-glass-line);box-shadow:0 0 0 1px var(--v-cerne),var(--tts-shadow-1);
  color:var(--tts-glass-ink);font-weight:600;
  transition:background-color var(--tts-t1) var(--tts-ease),transform var(--tts-t2) var(--tts-spring)}
.tts-verre .tts-verre-bouton.a-drapeau{padding-left:.45rem}
.tts-verre .tts-verre-bouton:hover,.tts-verre.is-open .tts-verre-bouton{background:var(--v-verre-plus)}
.tts-verre .tts-verre-bouton:active{transform:scale(.96)}
.tts-verre .tts-verre-bouton:focus-visible{border-radius:999px}
.tts-verre .tts-verre-actuel{display:inline-flex;align-items:center;gap:.45em}
.tts-verre .tts-verre-actuel .tts-fl{font-size:1.1em}
.tts-verre .tts-verre-actuel .tts-code{font-size:.8em}
.tts-verre .tts-verre-chevron{font-size:.95em;color:var(--v-encre-2);transition:transform var(--tts-t2) var(--tts-ease)}
.tts-verre.is-open .tts-verre-chevron{transform:rotate(180deg)}
/* Le panneau : le même verre */
.tts-verre .tts-panneau{right:auto;inset-inline-end:0;top:calc(100% + 10px);min-width:12.75rem;max-height:calc(100vh - 6rem);overflow-y:auto;
  background:var(--v-verre);-webkit-backdrop-filter:var(--v-flou);backdrop-filter:var(--v-flou);
  border-color:var(--tts-glass-line);color:var(--tts-glass-ink);scrollbar-width:thin;
  box-shadow:0 0 0 1px var(--v-cerne),var(--tts-shadow-2)}
.tts-verre .tts-verre-lignes{display:grid}
.tts-verre .tts-verre-lignes.a-colonnes{grid-auto-flow:column;grid-template-rows:repeat(var(--rangs),auto);
  grid-auto-columns:minmax(11.5rem,1fr);column-gap:4px}
.tts-verre .tts-ligne{position:relative;color:var(--tts-glass-ink);padding-inline-end:.8em}
.tts-verre .tts-ligne:hover{background:var(--v-survol)}
.tts-verre .tts-ligne:active{background:var(--v-appui)}
.tts-verre .tts-ligne .tts-code{margin-left:0;margin-inline-start:auto;padding-inline-start:1.2em;color:var(--v-encre-2)}
.tts-verre .tts-ligne[aria-current] .tts-code{display:inline;visibility:hidden}
.tts-verre .tts-ligne .tts-coche{position:absolute;right:auto;inset-inline-end:.75em;top:50%;margin:-.5em 0 0;font-size:1em}
.tts-verre .tts-ligne .tts-fl{font-size:1.05em}
/* Un liseré sur les drapeaux ronds : le blanc d'un drapeau ne se fond plus dans le verre */
.tts-verre .tts-fl.rond:not(.tts-sans)::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--tts-line)}
/* Sur une page de droite à gauche, le panneau naît du coin gauche de la capsule */
.tts-verre:dir(rtl) .tts-panneau{transform-origin:top left}
/* Sans flou possible, ou si le visiteur préfère moins de transparence : une surface pleine */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tts-verre{--v-verre:var(--tts-surface);--v-verre-plus:var(--tts-surface-2);
    --v-encre-2:var(--tts-ink-2);--v-survol:var(--tts-hover);--v-appui:var(--tts-press);color:var(--tts-ink)}
  .tts-verre .tts-verre-bouton,.tts-verre .tts-panneau,.tts-verre .tts-ligne{color:var(--tts-ink);border-color:var(--tts-line)}
}
@media (prefers-reduced-transparency:reduce){
  .tts-verre{--v-verre:var(--tts-surface);--v-verre-plus:var(--tts-surface-2);
    --v-encre-2:var(--tts-ink-2);--v-survol:var(--tts-hover);--v-appui:var(--tts-press);color:var(--tts-ink)}
  .tts-verre .tts-verre-bouton,.tts-verre .tts-panneau,.tts-verre .tts-ligne{color:var(--tts-ink);border-color:var(--tts-line);
    -webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (forced-colors:active){.tts-verre .tts-verre-bouton,.tts-verre .tts-panneau{border:1px solid CanvasText}}

/* ══ 10 · GLOBE ═════════════════════════════════════════════════════════════ */
.tts-globe{position:fixed;z-index:50;
  right:max(1.25rem,env(safe-area-inset-right,0px));bottom:max(1.25rem,env(safe-area-inset-bottom,0px))}
/* Le bouton rond */
.tts-globe .tts-globe-bouton{position:relative;display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;
  background:var(--tts-surface);color:var(--tts-ink);box-shadow:0 0 0 1px var(--tts-line),var(--tts-shadow-2);
  transition:transform var(--tts-t2) var(--tts-spring),background-color var(--tts-t1) var(--tts-ease)}
.tts-globe .tts-globe-bouton:hover{background:var(--tts-surface-2)}
.tts-globe .tts-globe-bouton:active{transform:scale(.94)}
.tts-globe .tts-globe-bouton:focus-visible{border-radius:50%;outline-offset:3px}
.tts-globe .tts-globe-bouton>.tts-ic{grid-area:1/1;width:1.4rem;height:1.4rem;stroke-width:1.7;
  transition:opacity var(--tts-t2) var(--tts-ease),transform var(--tts-t2) var(--tts-spring)}
.tts-globe .tts-globe-x{opacity:0;transform:rotate(-45deg) scale(.6)}
.tts-globe.is-open .tts-globe-g{opacity:0;transform:rotate(45deg) scale(.6)}
.tts-globe.is-open .tts-globe-x{opacity:1;transform:none}
/* La pastille du code affiché, à la couleur du site */
.tts-globe .tts-globe-pastille{position:absolute;top:-.2rem;right:-.3rem;display:inline-grid;place-items:center;
  min-width:1.45rem;height:1.1rem;padding:0 .3rem;border-radius:999px;
  background:var(--tts-accent);color:var(--tts-on-accent);box-shadow:0 0 0 2px var(--tts-surface);
  transition:opacity var(--tts-t1) var(--tts-ease),transform var(--tts-t2) var(--tts-spring)}
.tts-globe .tts-globe-pastille .tts-code{font-size:.58rem;letter-spacing:.05em}
.tts-globe.is-open .tts-globe-pastille{opacity:0;transform:scale(.4)}
/* La carte : elle naît du coin bas-droit, au-dessus du bouton */
.tts-globe .tts-panneau{top:auto;bottom:calc(100% + .625rem);right:0;min-width:13.5rem;
  max-height:calc(100vh - 7rem);overflow-y:auto;transform-origin:bottom right;transform:translateY(6px) scale(.94);
  transition:opacity var(--tts-t2) var(--tts-ease),transform var(--tts-t2) var(--tts-ease),visibility 0s linear var(--tts-t2)}
.tts-globe.is-open .tts-panneau{transform:none;
  transition:opacity var(--tts-t2) var(--tts-ease),transform var(--tts-t3) var(--tts-spring),visibility 0s}
.tts-globe .tts-globe-lignes{display:grid}
.tts-globe .tts-globe-lignes.a-colonnes{grid-auto-flow:column;grid-template-rows:repeat(var(--rangs),auto);
  grid-auto-columns:minmax(11.5rem,1fr);column-gap:4px}
.tts-globe .tts-ligne{position:relative;padding-top:.55em;padding-bottom:.55em;padding-inline-end:.8em}
.tts-globe .tts-ligne .tts-code{margin-left:0;margin-inline-start:auto;padding-inline-start:1.2em}
.tts-globe .tts-ligne[aria-current] .tts-code{display:inline;visibility:hidden}
.tts-globe .tts-ligne .tts-coche{position:absolute;right:auto;inset-inline-end:.75em;top:50%;margin:-.5em 0 0}
.tts-globe .tts-ligne .tts-fl{font-size:1.05em}
/* Un liseré sur les drapeaux ronds : le blanc d'un drapeau ne se fond plus dans la surface */
.tts-globe .tts-fl.rond:not(.tts-sans)::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--tts-line)}
/* Les lignes montent l'une après l'autre, de la plus proche du bouton à la plus lointaine */
.tts-globe.is-open .tts-ligne{animation:tts-globe-monte var(--tts-t2) var(--tts-ease) both;
  animation-delay:calc(min(var(--i,0),9) * 22ms)}
@keyframes tts-globe-monte{from{opacity:0;transform:translateY(5px)}}
/* Sur une page de droite à gauche, tout passe en miroir : le bouton à gauche, la carte née du coin bas-gauche */
.tts-globe:dir(rtl){right:auto;left:max(1.25rem,env(safe-area-inset-left,0px))}
.tts-globe:dir(rtl) .tts-panneau{right:auto;left:0;transform-origin:bottom left}
.tts-globe:dir(rtl) .tts-globe-pastille{right:auto;left:-.3rem}
@media (forced-colors:active){.tts-globe .tts-globe-bouton{border:1px solid CanvasText}}

/* ══ 11 · PIED DE PAGE ══════════════════════════════════════════════════════ */
.tts-pied{align-items:flex-start;gap:.6em;max-width:100%}
.tts-pied .pi-globe{display:flex;align-items:center;height:2.2em;color:var(--tts-ink-3)}
.tts-pied .pi-globe .tts-ic{width:1.1em;height:1.1em;stroke-width:1.7}
.tts-pied .pi-liste{display:flex;flex-wrap:wrap;align-items:center;column-gap:1.35em;min-width:0}
.tts-pied .pi-lien{display:inline-flex;align-items:center;height:2.2em;color:var(--tts-ink-2);white-space:nowrap;
  transition:color var(--tts-t1) var(--tts-ease)}
.tts-pied .pi-lien:hover,.tts-pied .pi-lien[aria-current]{color:var(--tts-ink)}
.tts-pied .pi-lien:focus-visible{border-radius:4px;outline-offset:3px}
/* Le trait : replié au repos, il se dessine au survol, plus doux que celui de la langue affichée,
   qui reste, à la couleur du site */
.tts-pied .pi-nom{position:relative}
/* (en bordure plutôt qu'en fond : un fond s'efface en contrastes élevés, une bordure reste) */
.tts-pied .pi-nom::after{content:"";position:absolute;left:0;right:0;bottom:-.32em;
  border-top:1px solid color-mix(in srgb,currentColor 45%,transparent);transform:scaleX(0);transform-origin:left center;
  transition:transform var(--tts-t2) var(--tts-ease),border-color var(--tts-t1) var(--tts-ease)}
.tts-pied .pi-nom[dir="rtl"]::after{transform-origin:right center}
.tts-pied .pi-lien:hover .pi-nom::after{transform:none}
.tts-pied .pi-lien[aria-current] .pi-nom::after{transform:none;border-top-color:var(--tts-accent)}

@media (pointer:coarse){
  .tts-pied .pi-lien,.tts-pied .pi-globe{height:44px}
}

/* ══ 12 · FEUILLE ═══════════════════════════════════════════════════════════ */
.tts-feuille{--f-rayon:calc(var(--tts-r-lg) + 8px)}
/* Le bouton de l'en-tête : petit à l'œil, 44 px sous le doigt */
.tts-feuille .tts-feuille-bouton{display:inline-grid;place-items:center;min-width:44px;height:44px;margin:0 -4px;padding:0 4px;
  border-radius:999px}
.tts-feuille .tts-feuille-bouton:focus-visible{border-radius:999px;outline-offset:0}
.tts-feuille .tts-feuille-pilule{display:inline-flex;align-items:center;gap:.4em;height:2.125rem;padding:0 .75em;
  border-radius:999px;background:var(--tts-surface);box-shadow:inset 0 0 0 1px var(--tts-line-2);
  transition:background-color var(--tts-t1) var(--tts-ease),transform var(--tts-t2) var(--tts-spring)}
.tts-feuille .tts-feuille-pilule.a-drapeau{padding-left:.4em}
.tts-feuille .tts-feuille-bouton:active .tts-feuille-pilule{transform:scale(.94);background:var(--tts-surface-2)}
.tts-feuille .tts-feuille-pilule .tts-code{font-size:.8em}
.tts-feuille .tts-feuille-pilule .tts-fl{font-size:1.08em}
/* Le voile : il fond derrière la feuille */
.tts-feuille .tts-feuille-voile{position:fixed;inset:0;z-index:60;background:var(--tts-backdrop);touch-action:none;
  opacity:0;visibility:hidden;transition:opacity var(--tts-t2) var(--tts-ease),visibility 0s linear var(--tts-t2)}
.tts-feuille.is-open .tts-feuille-voile{opacity:1;visibility:visible;transition:opacity var(--tts-t3) var(--tts-ease),visibility 0s}
/* La feuille : elle monte du bas, sur un ressort ; elle redescend sans rebond */
.tts-feuille .tts-panneau{position:fixed;top:auto;right:0;bottom:0;left:0;z-index:61;display:flex;flex-direction:column;
  min-width:0;max-height:calc(100% - 6.5rem);padding:0 0 max(1.25rem,env(safe-area-inset-bottom,0px));
  border:0;border-radius:var(--f-rayon) var(--f-rayon) 0 0;background:var(--tts-surface);color:var(--tts-ink);
  box-shadow:0 -1px 0 var(--tts-line),0 -10px 30px -18px var(--tts-backdrop);
  opacity:1;transform:translateY(100%);transform-origin:bottom center;
  transition:transform var(--tts-t2) var(--tts-ease),visibility 0s linear var(--tts-t2)}
.tts-feuille.is-open .tts-panneau{opacity:1;transform:none;transition:transform var(--tts-t3) var(--tts-spring),visibility 0s}
/* Sous la feuille, un pan de la même surface : le ressort ne découvre jamais le bas de l'écran */
.tts-feuille .tts-panneau::after{content:"";position:absolute;top:100%;left:0;right:0;height:3rem;background:inherit}
.tts-feuille .tts-feuille-prise{flex:none;touch-action:none;cursor:grab}
.tts-feuille .tts-feuille-poignee{flex:none;display:block;width:2.25rem;height:5px;margin:.5rem auto 0;border-radius:999px;
  background:var(--tts-line-2)}
.tts-feuille .tts-feuille-tete{flex:none;display:flex;align-items:center;gap:.5rem;padding-block:.3rem .4rem;padding-inline:1.375rem .625rem}
.tts-feuille .tts-feuille-titre{flex:1;font-size:1.0625rem;font-weight:650;letter-spacing:-.01em;color:var(--tts-ink)}
.tts-feuille .tts-feuille-fermer{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  color:var(--tts-ink-2)}
.tts-feuille .tts-feuille-fermer::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--tts-track);
  transition:background-color var(--tts-t1) var(--tts-ease)}
.tts-feuille .tts-feuille-fermer:active::before{background:var(--tts-press)}
.tts-feuille .tts-feuille-fermer:focus-visible{border-radius:50%;outline-offset:-3px}
.tts-feuille .tts-feuille-fermer .tts-ic{position:relative;width:1rem;height:1rem;stroke-width:2.1}
.tts-feuille .tts-feuille-liste{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 .5rem .25rem}
/* Les lignes : 3,5 rem, le nom dans sa langue, une coche */
.tts-feuille .tts-ligne{min-height:3.5rem;padding:0 .875rem;gap:.875rem;font-size:1rem;border-radius:12px}
.tts-feuille .tts-ligne .tts-fl{font-size:1.2rem}
.tts-feuille .tts-ligne .tts-coche{margin-left:0;margin-inline-start:auto;width:1.25rem;height:1.25rem;stroke-width:2.2}
/* Un liseré sur les drapeaux ronds : le blanc d'un drapeau ne se fond plus dans la surface */
.tts-feuille .tts-fl.rond:not(.tts-sans)::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--tts-line)}
.tts-feuille.is-open .tts-ligne{animation:none}
.tts-feuille .tts-ligne:focus-visible{outline-offset:-2px;border-radius:12px}
@media (hover:hover){.tts-feuille .tts-feuille-bouton:hover .tts-feuille-pilule{background:var(--tts-surface-2)}}
@media (forced-colors:active){.tts-feuille .tts-panneau{border-top:1px solid CanvasText}}

/* ══ 13 · SUGGESTION ════════════════════════════════════════════════════════ */
.tts-suggestion{position:fixed;z-index:55;right:0;bottom:0;left:0;display:flex;justify-content:center;
  padding:0 max(.75rem,env(safe-area-inset-right,0px)) calc(.75rem + env(safe-area-inset-bottom,0px)) max(.75rem,env(safe-area-inset-left,0px));
  container-type:inline-size;pointer-events:none}
.tts-suggestion .tts-suggestion-carte{pointer-events:auto;display:grid;align-items:center;column-gap:.75rem;
  grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"signe texte passer fermer";
  width:max-content;max-width:100%;padding:.5rem .5rem .5rem .75rem;border-radius:var(--tts-r-lg);
  background:var(--tts-surface);color:var(--tts-ink);border:1px solid var(--tts-line);box-shadow:var(--tts-shadow-2);
  animation:tts-suggestion-arrive var(--tts-t3) var(--tts-ease) calc(var(--tts-t3) + var(--tts-t1)) backwards;
  transition:opacity var(--tts-t2) var(--tts-ease),transform var(--tts-t2) var(--tts-ease)}
/* Elle arrive une fois, un instant après la page : elle glisse et fond. La JS la tient en attente
   tant qu'elle n'est pas à l'écran, pour que l'arrivée se voie. */
.tts-suggestion.is-attente .tts-suggestion-carte{animation-play-state:paused}
@keyframes tts-suggestion-arrive{from{opacity:0;transform:translateY(.75rem)}}
.tts-suggestion .tts-suggestion-signe{grid-area:signe;display:grid;place-items:center}
.tts-suggestion .tts-suggestion-signe .tts-fl{font-size:1.2rem}
/* Un liseré sur les drapeaux ronds : le blanc d'un drapeau ne se fond plus dans la surface */
.tts-suggestion .tts-fl.rond:not(.tts-sans)::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--tts-line)}
.tts-suggestion .tts-suggestion-icone{display:grid;place-items:center;width:1.56rem;height:1.56rem;border-radius:50%;
  background:var(--tts-track);color:var(--tts-ink-2)}
.tts-suggestion .tts-suggestion-icone .tts-ic{width:.95rem;height:.95rem}
.tts-suggestion .tts-suggestion-texte{grid-area:texte;color:var(--tts-ink);text-wrap:balance}
.tts-suggestion .tts-suggestion-passer{grid-area:passer;display:inline-flex;align-items:center;justify-content:center;
  height:2.25rem;padding:0 .95rem;border-radius:var(--tts-r);white-space:nowrap;font-weight:600;
  background:var(--tts-accent);color:var(--tts-on-accent);
  transition:background-color var(--tts-t1) var(--tts-ease),transform var(--tts-t2) var(--tts-spring)}
.tts-suggestion .tts-suggestion-passer:hover{background:color-mix(in srgb,var(--tts-accent) 88%,var(--tts-ink))}
.tts-suggestion .tts-suggestion-passer:active{transform:scale(.97)}
.tts-suggestion .tts-suggestion-fermer{grid-area:fermer;display:grid;place-items:center;width:2.25rem;height:2.25rem;
  border-radius:var(--tts-r);color:var(--tts-ink-3);transition:background-color var(--tts-t1) var(--tts-ease),color var(--tts-t1) var(--tts-ease)}
.tts-suggestion .tts-suggestion-fermer:hover{background:var(--tts-hover);color:var(--tts-ink)}
.tts-suggestion .tts-suggestion-fermer:active{background:var(--tts-press)}
.tts-suggestion .tts-suggestion-fermer .tts-ic{width:1rem;height:1rem}
/* Écartée : elle s'efface, puis sort du rendu */
.tts-suggestion.is-ecartee .tts-suggestion-carte{opacity:0;transform:translateY(.5rem);pointer-events:none}
.tts-suggestion.is-partie{display:none}
/* Étroite : le lien passe sous la phrase, la croix reste en haut */
@container (max-width:34rem){
  .tts-suggestion .tts-suggestion-carte{width:100%;row-gap:.5rem;padding:.625rem .5rem .75rem .875rem;
    grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"signe texte fermer" ". passer passer"}
  .tts-suggestion .tts-suggestion-signe{align-self:start;padding-top:.3rem}
  .tts-suggestion .tts-suggestion-texte{align-self:start;padding-top:.45rem}
  .tts-suggestion .tts-suggestion-passer{justify-self:start}
}
@media (pointer:coarse){
  .tts-suggestion .tts-suggestion-passer{height:2.75rem}
  .tts-suggestion .tts-suggestion-fermer{width:2.75rem;height:2.75rem}
}
@media (forced-colors:active){.tts-suggestion .tts-suggestion-carte{border:1px solid CanvasText}}

/* ══════════════════════════════════════════════════════════════════════════
   L'INTÉGRATION DANS UNE PAGE WORDPRESS
   ══════════════════════════════════════════════════════════════════════════ */

/* Dans un menu (élément « Sélecteur de langue ») : le sélecteur prend la taille du menu. */
.tts.toptr-in-menu {
  --tts-size: 1em;
}

.toptr-sw[hidden] {
  display: none !important;
}

/* ── Flottant : au coin de l'écran, sur toutes les pages ─────────────────────
   La règle porte trois classes et un attribut : elle l'emporte sur toute règle
   propre à un modèle, qui n'en a jamais que deux (un modèle qui la perdrait
   resterait dans le flux, décalé par ses `bottom`/`right`). Les côtés sont
   LOGIQUES : « en bas à droite » passe à gauche sur une page écrite de droite à
   gauche, comme le Globe de la collection. */
.toptr-sw.is-float[data-style] {
  --tts-bas: max(1.25rem, env(safe-area-inset-bottom, 0px));
  --tts-haut: max(1.25rem, env(safe-area-inset-top, 0px));
  --tts-bord: max(1.25rem, env(safe-area-inset-right, 0px));
  --tts-leve: 0px;
  position: fixed;
  z-index: 9990;
  margin: 0;
  max-width: calc(100vw - 2.5rem);
  transition: bottom var(--tts-t2) var(--tts-ease);
}
.toptr-sw.is-float.pos-bottom-right,
.toptr-sw.is-float.pos-bottom-left,
.toptr-sw.is-float.pos-bottom-center {
  top: auto;
  bottom: calc(var(--tts-bas) + var(--tts-leve));
}
.toptr-sw.is-float.pos-top-right,
.toptr-sw.is-float.pos-top-left {
  top: var(--tts-haut);
  bottom: auto;
}
.toptr-sw.is-float.pos-bottom-right,
.toptr-sw.is-float.pos-top-right {
  inset-inline-start: auto;
  inset-inline-end: var(--tts-bord);
}
.toptr-sw.is-float.pos-bottom-left,
.toptr-sw.is-float.pos-top-left {
  inset-inline-start: var(--tts-bord);
  inset-inline-end: auto;
}
.toptr-sw.is-float.pos-bottom-center {
  inset-inline: 0;
  width: max-content;
  margin-inline: auto;
}

/* Flottant, un modèle de menu a besoin d'une surface : posé sur une photo ou sur
   du texte, un code nu serait illisible. Les boutons prennent la leur ; le Verre,
   le Globe et la Feuille ont déjà la leur. */
.toptr-sw.is-float.tts-pastilles,
.toptr-sw.is-float.tts-drapeaux,
.toptr-sw.is-float.tts-bascule {
  padding: 4px;
  border-radius: 999px;
  background: var(--tts-surface);
  box-shadow: 0 0 0 1px var(--tts-line), var(--tts-shadow-2);
}
.toptr-sw.is-float.tts-soulignement,
.toptr-sw.is-float.tts-pied {
  margin-block: 0;
  padding: .1em 1.1em;
  border-radius: var(--tts-r-lg);
  background: var(--tts-surface);
  box-shadow: 0 0 0 1px var(--tts-line), var(--tts-shadow-2);
}
.toptr-sw.is-float.tts-discret {
  padding: 2px 4px;
  border-radius: var(--tts-r);
  background: var(--tts-surface);
  box-shadow: 0 0 0 1px var(--tts-line), var(--tts-shadow-2);
}
.toptr-sw.is-float.tts-capsule .ca-bouton,
.toptr-sw.is-float.tts-grand-menu .gm-bouton {
  background: var(--tts-surface);
  border-color: var(--tts-line);
  box-shadow: var(--tts-shadow-2);
}
.toptr-sw.is-float.tts-capsule .ca-bouton:hover,
.toptr-sw.is-float.tts-capsule.is-open .ca-bouton,
.toptr-sw.is-float.tts-grand-menu .gm-bouton:hover,
.toptr-sw.is-float.tts-grand-menu.is-open .gm-bouton {
  background: var(--tts-surface-2);
}
.toptr-sw.is-float.tts-deploiement .de-volet {
  background: var(--tts-surface);
  box-shadow: inset 0 0 0 1px var(--tts-line), var(--tts-shadow-2);
}

/* Ancré en bas de l'écran, le panneau s'ouvre VERS LE HAUT : ouvert vers le bas,
   il sortirait de l'écran. Le Globe le fait déjà ; la Feuille monte du bas. */
.toptr-sw.is-float[class*="pos-bottom"]:not(.tts-globe):not(.tts-feuille) .tts-panneau {
  top: auto;
  bottom: calc(100% + 8px);
  transform-origin: bottom right;
  transform: translateY(4px) scale(.97);
}
.toptr-sw.is-float[class*="pos-bottom"].is-open:not(.tts-globe):not(.tts-feuille) .tts-panneau {
  transform: none;
}
.toptr-sw.is-float[class*="-left"]:not(.tts-feuille) .tts-panneau {
  inset-inline-end: auto;
  inset-inline-start: 0;
  transform-origin: bottom left;
}
[dir="rtl"] .toptr-sw.is-float[class*="pos-bottom"]:not(.tts-globe):not(.tts-feuille) .tts-panneau {
  transform-origin: bottom left;
}
[dir="rtl"] .toptr-sw.is-float[class*="-left"]:not(.tts-feuille) .tts-panneau {
  transform-origin: bottom right;
}
/* Le Globe ancré en haut : sa carte descend. */
.toptr-sw.is-float.tts-globe[class*="pos-top"] .tts-panneau {
  top: calc(100% + .625rem);
  bottom: auto;
  transform-origin: top right;
  transform: translateY(-6px) scale(.94);
}
.toptr-sw.is-float.tts-globe[class*="pos-top"].is-open .tts-panneau {
  transform: none;
}
/* Le Déploiement ancré à gauche se déplie vers la droite : vers la gauche, il
   sortirait de l'écran. */
.toptr-sw.is-float.tts-deploiement[class*="-left"] {
  --de-sens: -1;
}
.toptr-sw.is-float.tts-deploiement[class*="-left"] .de-volet {
  inset-inline-end: auto;
  inset-inline-start: 0;
  padding-inline-end: 0;
  padding-inline-start: 100%;
  justify-content: flex-start;
}
.toptr-sw.is-float.tts-deploiement[class*="-left"] .de-rang {
  padding-inline-start: 0;
  padding-inline-end: 3px;
}

/* ── En pied de page : une ligne au bas de chaque page ───────────────────── */
.toptr-sw.toptr-en-pied {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 1rem max(1.25rem, env(safe-area-inset-left, 0px)) calc(1rem + env(safe-area-inset-bottom, 0px));
  background: var(--tts-surface);
  border-top: 1px solid var(--tts-line);
}

/* ── Au téléphone, la Feuille ────────────────────────────────────────────────
   Le sélecteur choisi et sa Feuille sont rendus ensemble ; un seul des deux se
   voit, selon la largeur de l'écran. Rien ne se décide après coup : aucun
   décalage au chargement. */
@media (max-width: 36em) {
  .toptr-sw.tts-hors-tel {
    display: none !important;
  }
}
@media (min-width: 36.0625em) {
  .toptr-sw.tts-au-tel {
    display: none !important;
  }
}

/* ── La mention « Traduit par TOP TRANSLATE » : dans le panneau ouvert, seulement ─ */
.tts-mention {
  margin: 6px 4px 2px;
  padding: 8px 8px 2px;
  border-top: 1px solid var(--tts-line);
  font-size: .72em;
  line-height: 1.35;
  letter-spacing: .01em;
  color: var(--tts-ink-2);
  text-align: start;
  white-space: nowrap;
}
.tts-verre .tts-mention {
  color: var(--v-encre-2);
  border-top-color: var(--v-cerne);
}
.tts-feuille .tts-mention {
  flex: none;
  margin: 2px 1.375rem 0;
  padding: .7rem 0 0;
  font-size: .8rem;
}
.tts-grand-menu .tts-mention {
  margin-top: 8px;
}

/* ── La suggestion ne recouvre jamais un sélecteur flottant ──────────────────
   Quand la carte arrive, le script mesure sa hauteur et soulève d'autant les
   sélecteurs flottants ancrés en bas (`--tts-leve`) ; ils redescendent quand
   elle s'en va. */
.tts-suggestion {
  z-index: 9995;
}

/* ── La Feuille, sur un vrai site : au-dessus de tout ce que la page empile ── */
.tts-feuille .tts-feuille-voile {
  z-index: 99998;
}
.tts-feuille .tts-panneau {
  z-index: 99999;
}

@media print {
  .toptr-sw.is-float,
  .tts-suggestion {
    display: none !important;
  }
}