/* Site de Mimba TTS.
   Les teintes reprennent celles de l'application : quelqu'un qui telecharge
   depuis cette page doit reconnaitre le logiciel qu'il ouvre ensuite. */

:root {
  color-scheme: light dark;
  --fond: #ffffff;
  --fond-doux: #f6f7f9;
  --texte: #16181c;
  --doux: #5f6672;
  --bord: rgba(120, 125, 135, .26);
  --accent: #4f46e5;
  --accent-fort: #7c3aed;
  --surface: rgba(0, 0, 0, .04);
  --ok: #1a7f37;
  --largeur: 68rem;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fond: #14161a;
  --fond-doux: #1a1d23;
  --texte: #e9eaee;
  --doux: #9aa1ad;
  --bord: rgba(160, 168, 180, .22);
  --accent: #8b83ff;
  --accent-fort: #b58bff;
  --surface: rgba(255, 255, 255, .06);
  --ok: #4ac26b;
}
/* Sans JavaScript, la page reste sombre elle aussi : `theme.js` pose
   l'attribut, cette regle couvre le cas ou il n'a pas encore ete lu. */
:root:not([data-theme]) {
  color-scheme: dark;
  --fond: #14161a; --fond-doux: #1a1d23; --texte: #e9eaee; --doux: #9aa1ad;
  --bord: rgba(160, 168, 180, .22); --accent: #8b83ff;
  --accent-fort: #b58bff; --surface: rgba(255, 255, 255, .06); --ok: #4ac26b;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  /* Le plancher de 1024 px ne vaut PLUS pour les petits ecrans.
     Il etait inconditionnel, compagnon du viewport fixe : un telephone
     defilait horizontalement. Il est desormais pose plus bas, dans une
     requete `min-width`, pour que le bureau garde exactement la meme
     largeur qu'avant. */
  margin: 0;
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--fond);
  color: var(--texte);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.25; }
a { color: var(--accent); }

/* Un lien d'evitement pour le clavier : cache tant qu'il n'a pas le focus. */
.saut {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .6rem 1rem; background: var(--fond); border: 2px solid var(--accent);
}
.saut:focus { left: .5rem; top: .5rem; }

/* ---------------------------------------------------------------- entete -- */
.entete {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1.4rem;
  padding: .7rem clamp(1rem, 4vw, 2.4rem);
  background: color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bord);
}
.marque {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 650; color: inherit; text-decoration: none; white-space: nowrap;
}
.marque img { border-radius: 8px; }
.navigation { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .92rem; }
.navigation a { color: var(--doux); text-decoration: none; }
.navigation a:hover { color: var(--accent); }
.entete .outils { margin-left: auto; display: flex; gap: .5rem; }
.mini {
  font: inherit; font-size: .85rem; padding: .3rem .55rem;
  border: 1px solid var(--bord); border-radius: 7px;
  background: var(--surface); color: var(--texte); cursor: pointer;
}
.mini:hover { border-color: var(--accent); color: var(--accent); }
/* Le selecteur de langue des mentions. `.mini` est dessine pour un bouton
   carre ; une liste deroulante a besoin de respirer et de sa propre fonte,
   sinon le navigateur lui rend celle du systeme. */
select.mini { width: auto; padding: 0 .5rem; font: inherit; font-size: .84rem; }

/* ----------------------------------------------------------------- heros -- */
.heros {
  max-width: var(--largeur); margin: 0 auto;
  /* Moins de marge en BAS qu'en haut : le heros se termine sur la bande verte,
     et son ecart s'ajoutait a celui du separateur. */
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 4vw, 2.4rem) clamp(1.2rem, 3vw, 2rem);
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 5vw, 3.5rem);
  /* Les deux colonnes commencent en HAUT, et non centrees : la capture doit
     s'aligner sur le surtitre, pas flotter au milieu du bloc de texte. */
  align-items: start;
}
.surtitre {
  margin: 0 0 .7rem; font-size: .8rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--accent);
}
.heros h1 {
  margin: 0 0 1rem; font-size: clamp(1.9rem, 4.2vw, 3rem); letter-spacing: -.02em;
}
.chapeau { margin: 0 0 1.6rem; font-size: 1.06rem; color: var(--doux); max-width: 34rem; }
/* Les trois boutons sur UNE ligne. `flex-wrap: wrap` les faisait descendre
   des que la colonne se resserrait — « Telecharger pour Ubuntu (.deb) » est
   long, et il passait seul a la ligne. */
/* La bande occupe les DEUX colonnes du heros. Dans la colonne de texte, les
   trois boutons obligeaient a la retrecir, et la capture retrecissait avec. */
/* L'EN-TETE COLLANT MANGE LA CIBLE DES ANCRES.
   Il est en `position: sticky; top: 0`. Le navigateur amene bien l'element vise
   au bord haut de la fenetre — puis l'en-tete se pose par-dessus et en recouvre
   la premiere rangee. Sur `#obtenir`, ce sont les deux boutons de
   telechargement qui disparaissaient, et la note d'installation Ubuntu qui se
   retrouvait en tete d'ecran : le visiteur croyait avoir clique de travers.
   `scroll-margin-top` reserve la hauteur de l'en-tete au-dessus de la cible.
   Il vaut pour toutes les ancres, dont celles servant de liens annexes dans les
   annonces — une page qui s'ouvre de travers est payee au meme prix. */
#obtenir, #apercu, #contenu, #exemples, #fonctions,
#usages, #prix, #versions, #contact { scroll-margin-top: 5rem; }

.bande-actions { grid-column: 1 / -1; margin-top: 0; }
/* Dans le heros, la bande verte n'a pas besoin des marges qu'elle prend dans
   la section des prix : elle y est le dernier element avant le separateur, et
   son ecart s'ajoutait a la marge basse du heros. */
.bande-actions .avertissement { margin-top: .9rem; margin-bottom: 0; }
.bande-actions .repli-avis { margin-top: .7rem; }
/* L'ecart entre les DEUX RANGEES du heros — texte/capture d'un cote,
   boutons de l'autre — n'a pas a valoir celui des colonnes. */
.heros { row-gap: 1.2rem; }
.actions-heros { display: flex; gap: .7rem; flex-wrap: nowrap; align-items: stretch; }
/* Le libelle reste sur une ligne : « Telecharger pour Ubuntu (.deb) » est le
   plus long des trois, et c'est lui qui cassait la rangee. */
.actions-heros .bouton {
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: .5rem;
}
/* Le pictogramme ne doit ni grandir avec le texte ni se laisser comprimer. */
.bouton .ic { width: 1.05rem; height: 1.05rem; flex: none; }

.bouton {
  display: inline-block; padding: .72rem 1.4rem; border-radius: 9px;
  border: 1px solid var(--bord); background: var(--surface);
  color: inherit; text-decoration: none; font-weight: 550;
  /* Les navigateurs ne donnent la main qu'aux liens : un <button> garde la
     fleche, et rien ne dit alors qu'il est cliquable. La classe sert aux deux —
     le bouton « Payer » de la boutique en est un vrai. */
  cursor: pointer;
  font: inherit; font-weight: 550;
}
.bouton:disabled { cursor: default; opacity: .55; }
.bouton:hover { border-color: var(--accent); color: var(--accent); }
.bouton.principal {
  background: linear-gradient(120deg, var(--accent), var(--accent-fort));
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent);
}
.bouton.principal:hover { color: #fff; filter: brightness(1.07); }
/* Version pas encore publiee : le bouton le dit et ne mene nulle part, plutot
   que de renvoyer vers une page d'erreur. */
.bouton.indisponible {
  background: var(--surface); border-color: var(--bord); color: var(--doux);
  box-shadow: none; cursor: default; pointer-events: none;
}

.detail {
  margin: 1rem 0 0; font-size: .84rem; color: var(--doux);
  display: flex; gap: .9rem; flex-wrap: wrap; align-items: center;
}
/* La commande d'installation Ubuntu. Elle doit se copier telle quelle : d'ou
   la fonte a chasse fixe, et `user-select: all` qui la selectionne d'un clic. */
.note-installation { margin: .5rem 0 0; font-size: .82rem; color: var(--doux); }
.note-installation code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  padding: .1rem .4rem; border-radius: 5px; background: var(--surface);
  border: 1px solid var(--bord); color: inherit;
  /* Un clic selectionne la commande entiere : elle est faite pour etre collee
     dans un terminal, pas lue mot a mot. */
  user-select: all;
}
.note-installation[hidden] { display: none; }

/* L'avertissement de Windows, replie : il rassure celui qui le rencontre, sans
   inquieter celui qui ne l'aurait pas vu. */
.repli-avis {
  margin: .7rem 0 0; font-size: .84rem; color: var(--doux); max-width: 34rem;
}
.repli-avis summary { cursor: pointer; color: var(--texte); }
.repli-avis p { margin: .6rem 0 0; line-height: 1.5; }

.compteur-tele { display: inline-flex; align-items: center; gap: .4rem; }
.compteur-tele strong { color: var(--texte); font-variant-numeric: tabular-nums; }

.heros-image { position: relative; }
.heros-image img {
  width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--bord); box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}
.heros-image .attente { display: none; }
/* Quand la capture manque encore, la place reste tenue plutot que de laisser
   une image cassee. */
.heros-image.vide img { display: none; }
.heros-image.vide .attente {
  display: grid; place-items: center; margin: 0;
  aspect-ratio: 16 / 10; border-radius: 12px;
  border: 1px dashed var(--bord); color: var(--doux); font-size: .9rem;
  background: var(--fond-doux);
}

/* ---------------------------------------------------------------- bandes -- */
.bande {
  max-width: var(--largeur); margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.4rem) clamp(1rem, 4vw, 2.4rem);
  border-top: 1px solid var(--bord);
}
.bande.etroit { max-width: 44rem; }
.bande h2 { margin: 0 0 .5rem; font-size: clamp(1.35rem, 2.6vw, 1.8rem); }
.intro { margin: 0 0 1.6rem; color: var(--doux); max-width: 42rem; }
.note { margin: 1.2rem 0 0; font-size: .85rem; color: var(--doux); }

.grille {
  display: grid; gap: 1rem; margin-top: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.grille.deux { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
/* Les usages : plus serres que les cartes de fonctionnalites.
   Ce sont des reperes, pas des explications — on doit pouvoir les balayer du
   regard et s'arreter sur le sien. Quatre par rangee sur un ecran large, deux
   sur le gabarit fixe de 1024. */
.grille-usages {
  display: grid; gap: .9rem; margin-top: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.usage {
  padding: 1rem; border-radius: 11px;
  border: 1px solid var(--bord); background: var(--fond-doux);
}
.usage h3 { margin: .55rem 0 .3rem; font-size: .95rem; }
.usage p { margin: 0; font-size: .82rem; color: var(--doux); line-height: 1.45; }
/* Le pictogramme prend la couleur d'accent, seul element colore de la tuile :
   c'est lui qui donne le rythme visuel de la rangee. */
.ic-usage { width: 26px; height: 26px; display: block; color: var(--accent); }

.carte {
  padding: 1.1rem 1.2rem; border-radius: 11px;
  border: 1px solid var(--bord); background: var(--fond-doux);
}
.carte h3 { margin: 0 0 .4rem; font-size: 1rem; }
.carte p { margin: 0; color: var(--doux); font-size: .93rem; }

/* -------------------------------------------------------------- exemples -- */
/* Le bandeau d'ouverture : deux images fondues vers le centre, et une bulle
   dessinee en SVG. Il garde son fond sombre dans les deux themes — c'est une
   illustration, et la retourner en clair delaverait les deux photos. */
.bandeau-dialogue {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  margin: 0 0 1.8rem; border-radius: 18px;
  background: #080914;
  min-height: clamp(9rem, 22vw, 12.5rem);
  box-shadow: 0 12px 35px rgba(0, 0, 0, .35);
}
.bandeau-dialogue img {
  position: absolute; top: 0; height: 100%; width: 38%;
  object-fit: cover; z-index: 1;
}
/* Le masque fait disparaitre l'image dans le fond plutot que de la couper net :
   sans lui, deux bords francs encadraient la bulle. */
.bandeau-gauche {
  left: 0; object-position: left center;
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%);
          mask-image: linear-gradient(to right, #000 55%, transparent 100%);
}
.bandeau-droite {
  right: 0; object-position: right center;
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%);
          mask-image: linear-gradient(to left, #000 55%, transparent 100%);
}

.bulle {
  position: relative; z-index: 2;
  width: min(30rem, 100%);
  display: grid; place-items: center;
  padding: .6rem;
}
.bulle-forme {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, .4))
          drop-shadow(0 8px 20px rgba(0, 0, 0, .35));
}
.bulle-contenu {
  position: relative; z-index: 1; text-align: center;
  padding: clamp(.8rem, 2.5vw, 1.4rem) clamp(1.4rem, 5vw, 2.4rem);
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
}
.bulle-titre { display: flex; align-items: center; gap: .6rem; }
.bulle-titre h2 {
  margin: 0; font-size: clamp(1.15rem, 3.2vw, 1.7rem); letter-spacing: -.02em;
  /* Le texte est pose sur la bulle blanche : sa couleur ne suit donc pas le
     theme, sous peine de devenir illisible en mode sombre. */
  color: #0b0c3d;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #6366f1, #a855f7, #ec4899) 1;
}
.jeton-micro {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #a855f7, #6366f1);
  box-shadow: 0 4px 10px rgba(124, 58, 237, .4);
}
.jeton-micro svg { width: 1.05rem; height: 1.05rem; fill: #fff; }
.bulle-accroche {
  margin: .35rem 0 0; color: #0b0c3d; font-weight: 700;
  font-size: clamp(.9rem, 2.2vw, 1rem);
}
.bulle-detail {
  margin: .15rem 0 0; color: #3b3c75; font-size: .8rem; line-height: 1.4;
  max-width: 24rem;
}

/* Sur un ecran etroit, les images passeraient derriere la bulle et ne
   montreraient qu'un fragment : mieux vaut la bulle seule. */
@media (max-width: 860px) {
  .bandeau-dialogue img { display: none; }
  .bulle { width: 100%; }
}

.avis {
  margin: 0 0 1.2rem; padding: .7rem .9rem; border-radius: 9px;
  border-left: 4px solid var(--accent); background: var(--surface);
  font-size: .88rem; color: var(--doux);
}
/* Les extraits vivent DANS un panneau, dont le bandeau nomme la langue. Les
   cartes de langue formaient trois colonnes et les extraits s'alignaient
   dessous : chacun semblait appartenir a la carte placee au-dessus de lui. */
.panneau-extraits {
  margin: 1.5rem 0 0; padding: 1.2rem;
  border: 1px solid var(--bord); border-radius: 16px;
  background: color-mix(in srgb, var(--fond-doux) 60%, transparent);
}
.bandeau-extraits {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin: 0 0 1.1rem;
}
.bandeau-extraits h3 { margin: 0; font-size: 1.05rem; }

/* Un drapeau spherique : rond, avec un reflet en verre par-dessus. Il distingue
   la marque de section des vignettes rectangulaires employees ailleurs. */
.sphere { position: relative; display: inline-flex; flex: none; }
.sphere svg {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
.sphere::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 25%,
              rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, 0) 52%,
              rgba(0, 0, 0, .45) 100%);
  pointer-events: none;
}

.pastille {
  font-size: .76rem; font-weight: 650; padding: .2rem .65rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}

/* Decor du bandeau : bulle a trois points et spectre. Sans valeur informative,
   il occupe l'espace vide a droite du titre. */
.decor-bandeau { margin-left: auto; display: flex; align-items: center; gap: .7rem; }
.bulle-points {
  display: flex; gap: .18rem; align-items: center;
  padding: .35rem .55rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.bulle-points i {
  width: .3rem; height: .3rem; border-radius: 50%; background: var(--accent);
}
.spectre-decor { width: 8rem; height: 1.5rem; opacity: .85; }
@media (max-width: 860px) { .decor-bandeau { display: none; } }

/* Le pied du panneau : une bande cosmique, texte a gauche, fils lumineux et
   casque a droite. Elle garde son fond sombre dans les deux themes — les fils
   sont faits de lueurs, et une lueur sur du blanc ne se voit pas. */
.note-panneau {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  margin: 1.2rem 0 0; padding: .9rem 1.2rem; min-height: 4.5rem;
  border-radius: 14px; border: 1px solid rgba(139, 92, 246, .18);
  background: #080914;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .07),
              0 10px 26px rgba(0, 0, 0, .35);
}
.note-panneau::before {
  content: ""; position: absolute; inset: 0 0 0 40%; pointer-events: none;
  background: radial-gradient(circle at 80% 50%,
              rgba(147, 51, 234, .16) 0%, rgba(79, 70, 229, .08) 50%, transparent 80%);
}
.note-texte {
  position: relative; z-index: 2; margin: 0; max-width: 62%;
  display: flex; align-items: center; gap: .8rem;
  font-size: .84rem; line-height: 1.45; color: #cbd5e1;
}
.jeton-info {
  flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(168, 85, 247, .12);
  border: 1.5px solid rgba(168, 85, 247, .5);
  box-shadow: 0 0 12px rgba(168, 85, 247, .3);
}
.jeton-info svg { width: 1rem; height: 1rem; fill: #c084fc; }
/* Le decor occupe la moitie droite, sous le texte s'il le faut. */
.note-panneau .fils {
  position: absolute; right: 0; top: 0; height: 100%; width: 58%;
  z-index: 1; pointer-events: none;
}
@media (max-width: 860px) {
  .note-texte { max-width: 100%; }
  .note-panneau .fils { opacity: .35; }
}

/* --- la carte d'un exemple ------------------------------------------------ */
.exemples { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.exemple {
  display: flex; flex-direction: column; gap: .8rem;
  padding: 1rem 1.1rem; border-radius: 16px;
  border: 1px solid var(--bord); background: var(--fond-doux);
}
.exemple-haut { display: flex; gap: .9rem; align-items: center; }

/* L'illustration est incrustee et non collee : le masque la fait disparaitre
   dans le fond de la carte, sans bord franc ni cadre a dessiner. */
.vignette { flex: none; width: 7.5rem; height: 6rem; border-radius: 12px; overflow: hidden; }
.vignette img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 42%, transparent 100%);
          mask-image: radial-gradient(ellipse at center, #000 42%, transparent 100%);
}

.exemple-entete { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.exemple-titre { display: flex; align-items: center; gap: .55rem; }
/* Le pictogramme donne une silhouette a chaque exemple : de loin, six cartes
   identiques ne se distinguaient que par leur titre. */
.exemple .jeton {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem;
  background: color-mix(in srgb, var(--teinte) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--teinte) 32%, transparent);
}
.exemple h3 { margin: 0; font-size: 1rem; }
.exemple .propos { margin: 0; font-size: .87rem; color: var(--doux); }

/* Une teinte par notation : elle habille le pictogramme, et rien d'autre —
   six cartes de six couleurs franches deviendraient un arlequin. */
.exemple { --teinte: var(--accent); }
.exemple-texte-simple    { --teinte: #38bdf8; }
.exemple-tour-de-parole  { --teinte: #eab308; }
.exemple-unisson         { --teinte: #a855f7; }
.exemple-volume          { --teinte: #14b8a6; }
.exemple-interruption    { --teinte: #f97316; }
.exemple-entree-retardee { --teinte: #ec4899; }

.exemple pre.dialogue {
  margin: 0; padding: .75rem .85rem; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--bord);
  border-left: 3px solid var(--teinte);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .82rem; line-height: 1.6; white-space: pre-wrap; overflow-x: auto;
}
/* La notation se distingue de la parole : c'est tout le propos de la section.
   Chaque locuteur garde sa teinte d'un exemple a l'autre, et les signes de
   commande — « + », « & », un pourcentage — la leur. */
.exemple pre .locuteur { font-weight: 650; }
.exemple pre .notation { color: var(--ok); font-weight: 650; }
.voix-0 { color: #c084fc; }
.voix-1 { color: #60a5fa; }
.voix-2 { color: #f472b6; }
.voix-3 { color: #fbbf24; }
.voix-4 { color: #34d399; }

.exemple .manque {
  margin: 0; font-size: .82rem; color: var(--doux); font-style: italic;
}
/* L'element audio reste dans la page — il joue le son — mais ses commandes
   natives sont remplacees : elles ne se mettent pas en forme et changent
   d'aspect d'un navigateur a l'autre. */
.exemple audio { display: none; }

/* --- le lecteur dessine --------------------------------------------------- */
.lecteur {
  display: flex; align-items: center; gap: .7rem;
  padding: .35rem .8rem .35rem .35rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--bord);
}
.lire {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 0;
  display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(135deg, var(--teinte), var(--accent-fort));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--teinte) 45%, transparent);
}
.lire svg { width: .7rem; height: .8rem; fill: #fff; }

/* Le spectre : des barres fixes, dont la partie deja lue se colore. C'est une
   barre de progression qui a la forme d'un son, pas l'onde du fichier. */
.spectre {
  --avance: 0%;
  flex: 1; display: flex; align-items: center; gap: 2px; height: 1.4rem;
  cursor: pointer; min-width: 4rem;
}
.spectre span {
  flex: 1; border-radius: 999px; min-width: 2px;
  background: color-mix(in srgb, var(--doux) 45%, transparent);
  transition: background .12s linear;
}
/* Les barres deja lues prennent la teinte de la carte : la progression se voit
   sans ajouter de rail par-dessus le spectre. */
.spectre span.lu { background: var(--teinte); }
.temps {
  font-size: .74rem; color: var(--doux); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --------------------------------------------------------------- langues -- */
/* Cinq colonnes EGALES, tant que la place le permet.
   `auto-fit` avec 15rem de minimum en tenait quatre : la cinquieme passait a la
   ligne. Reduits a un drapeau, un nom et une pastille, les boutons se
   contentent de 9rem. En dessous de 60rem de large, on repasse a deux
   colonnes — cinq boutons serres sur un telephone seraient illisibles. */
.langues { display: grid; gap: .7rem; margin: 0 0 1.4rem;
           grid-template-columns: repeat(5, 1fr); }
/* La regle mobile d'origine — deux colonnes empilees — est remplacee par le
   carrousel : `carrousel-mobile` annule `grid-template-columns`, et cette
   regle-ci, plus specifique par sa classe unique, l'aurait emporte. */
/* Les cartes sont le selecteur des extraits : ce sont des boutons, et la
   langue choisie se distingue au premier coup d'oeil. */
.langue {
  position: relative;
  display: flex; gap: .6rem; align-items: center; text-align: left;
  padding: .7rem .8rem; border-radius: 11px; font: inherit;
  border: 1px solid var(--bord); background: var(--fond-doux);
  color: inherit; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.langue:hover { border-color: var(--accent); }
/* Le nom peut etre long — « Créole mauricien » — et la colonne est etroite :
   on le laisse passer a la ligne plutot que deborder du bouton. */
.langue h3 { margin: 0; font-size: .95rem; line-height: 1.2; }
.langue .sphere { flex: 0 0 auto; }
.langue > div { min-width: 0; }
/* La carte choisie : neon violet, fond spatial, poussiere d'etoiles et deux
   etincelles. Le decor n'existe QUE sur cette carte, et il est dessine une
   fois — seules les etincelles respirent, ce que le navigateur confie a la
   carte graphique. */
.langue[aria-selected="true"] {
  border-color: #8b5cf6;
  background: #090a16;
  box-shadow: 0 0 20px rgba(139, 92, 246, .45),
              0 0 40px rgba(139, 92, 246, .18),
              inset 0 0 18px rgba(139, 92, 246, .25);
  overflow: hidden;
}
/* Sur ce fond sombre, les couleurs du theme clair deviendraient illisibles. */
.langue[aria-selected="true"] h3 { color: #fff; }
.langue[aria-selected="true"] p { color: #94a3b8; }

.langue .spatial, .langue .poussiere, .langue .etincelle { display: none; }
.langue[aria-selected="true"] .spatial,
.langue[aria-selected="true"] .poussiere,
.langue[aria-selected="true"] .etincelle { display: block; }

.langue .spatial {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background:
    radial-gradient(ellipse 80% 80% at 90% 90%,
      rgba(147, 51, 234, .5) 0%, rgba(91, 33, 182, .25) 45%, transparent 80%),
    radial-gradient(circle at 15% 30%, rgba(126, 34, 206, .15) 0%, transparent 60%),
    #080914;
}
.langue .poussiere {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  pointer-events: none;
}
.langue .etincelle {
  position: absolute; z-index: 2; fill: #e9d5ff; pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(216, 180, 254, .9));
  animation: scintiller 3s infinite alternate ease-in-out;
}
.langue .etincelle.gauche { left: 3.2rem; bottom: 1.6rem; width: .75rem; height: .75rem; }
.langue .etincelle.droite { right: 3.4rem; top: 2.6rem; width: 1rem; height: 1rem; }
@keyframes scintiller {
  from { opacity: .6; transform: scale(.85); }
  to   { opacity: 1;  transform: scale(1.15); }
}
/* Qui demande moins d'animations n'en aura pas : le decor reste, il cesse
   seulement de respirer. */
@media (prefers-reduced-motion: reduce) {
  .langue .etincelle { animation: none; }
}

/* Le contenu passe au-dessus du decor. */
.langue .sphere, .langue > div, .langue .choisie { position: relative; z-index: 3; }
.langue svg { flex: none; border: 1px solid var(--bord); border-radius: 3px; }
/* La coche d'angle de la carte choisie. Elle double la couleur du cadre : sur
   trois cartes de meme taille, une bordure ne saute pas toujours aux yeux. */
.langue .choisie {
  position: absolute; top: .6rem; right: .7rem;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: .8rem; font-weight: 700;
}
.langue h3 { margin: 0 0 .15rem; font-size: 1rem; }
.langue p { margin: 0; font-size: .88rem; color: var(--doux); }
/* L'etat se lit avant le texte : disponible ou non, c'est la seule chose que
   le visiteur cherche vraiment. */
.langue .etat {
  display: inline-block; margin-top: .4rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: .12rem .5rem; border-radius: 999px;
}
.langue.prete .etat {
  background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok);
}
.langue.attente .etat {
  background: var(--surface); color: var(--doux);
}

/* -------------------------------------------------------------- captures -- */
.captures { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.captures figure { margin: 0; }
.captures img {
  width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--bord); background: var(--fond-doux);
}
.captures figcaption { margin-top: .5rem; font-size: .86rem; color: var(--doux); }
.captures .absente {
  display: grid; place-items: center; aspect-ratio: 16 / 10;
  border: 1px dashed var(--bord); border-radius: 10px;
  color: var(--doux); font-size: .85rem; background: var(--fond-doux);
}

/* -------------------------------------------------------------- versions -- */
.versions { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.4rem; }
.version {
  padding: 1.1rem 1.2rem; border-radius: 11px;
  border: 1px solid var(--bord); background: var(--fond-doux);
}
.version-entete {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  margin-bottom: .6rem;
}
.version-entete h3 { margin: 0; font-size: 1.05rem; }
.version-entete .date { font-size: .85rem; color: var(--doux); }
.etiquette {
  font-size: .7rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok);
}
/* La meme pastille, mais cliquable : couleur d'accent plutot que de reussite,
   pour qu'on ne la lise pas comme une seconde etiquette d'etat. */
.etiquette-lien {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent); text-decoration: none;
  transition: background .15s ease;
}
.etiquette-lien:hover, .etiquette-lien:focus-visible {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

.version h4 {
  margin: .8rem 0 .3rem; font-size: .78rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--doux);
}
.version ul { margin: 0; padding-left: 1.1rem; }
.version li { font-size: .92rem; }
.version .fichier {
  margin-top: .9rem; font-size: .82rem; color: var(--doux);
  display: flex; gap: .9rem; flex-wrap: wrap;
}
.version .empreinte {
  font-family: ui-monospace, Consolas, monospace; font-size: .75rem;
  word-break: break-all;
}

/* ------------------------------------------------------------------ prix -- */
.offre ul { margin: .8rem 0 0; padding-left: 1.1rem; color: var(--doux); font-size: .93rem; }
.offre li { margin-bottom: .35rem; }
.montant {
  margin: .2rem 0 0; font-size: 1.15rem; font-weight: 650; color: var(--accent);
}
/* La gratuite est l'argument principal : elle doit se voir avant le prix des
   voix, pas se fondre avec lui. `--ok` existe dans les deux themes. */
.offre-libre {
  border-color: color-mix(in srgb, var(--ok) 45%, var(--bord));
  background: color-mix(in srgb, var(--ok) 7%, var(--fond-doux));
}
.offre-libre .montant { color: var(--ok); font-size: 1.35rem; }
.avertissement {
  margin-top: 1.4rem; padding: .9rem 1.1rem; border-radius: 10px;
  border-left: 4px solid var(--accent); background: var(--surface);
  font-size: .95rem;
}

/* La bonne nouvelle du tarif : le logiciel est gratuit a vie. Elle se perdait
   dans un encadre qui ressemble a tous les autres — vert, elle se lit avant le
   reste de la section. `--ok` existe deja dans les deux themes. */
.avertissement.bonne-nouvelle {
  border-left-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  color: var(--texte);
  font-weight: 500;
}

/* ------------------------------------------------------------------ pied -- */
.pied { border-top: 1px solid var(--bord); margin-top: 2rem; }
.pied-contenu {
  max-width: var(--largeur); margin: 0 auto;
  padding: 1.4rem clamp(1rem, 4vw, 2.4rem);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .85rem; color: var(--doux);
}
.pied p { margin: 0; }
.pied nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.pied a { color: var(--doux); text-decoration: none; }
.pied a:hover { color: var(--accent); }

/* --------------------------------------------------------------- legales -- */
.document { max-width: 46rem; margin: 0 auto; padding: 2.5rem clamp(1rem, 4vw, 2.4rem); }
.document h1 { margin: 0 0 1.6rem; font-size: clamp(1.6rem, 3.4vw, 2.1rem); }
.document section { margin-bottom: 2.4rem; }
.document h2 {
  font-size: 1.15rem; padding-left: .7rem; border-left: 3px solid var(--accent);
}
.document h3 { font-size: .95rem; margin: 1.4rem 0 .3rem; }
.document p, .document li { color: var(--doux); }
.document strong { color: var(--texte); }

/* ------------------------------------------------------------- etroitesse -- */
@media (max-width: 860px) {
  .heros { grid-template-columns: 1fr; }
  .heros-image { order: -1; }

  /* La navigation etait MASQUEE sous ce seuil. Sur un telephone, la page
     perdait alors tout moyen d'atteindre les extraits ou le prix — et c'est
     precisement ou menent les liens annexes des annonces. Elle se replie
     desormais sur deux lignes plutot que de disparaitre. */
  .entete { flex-wrap: wrap; gap: .6rem 1rem; }
  .navigation { gap: .8rem; font-size: .86rem; }

  /* Les deux boutons de telechargement tenaient sur une seule rangee, sans
     retour a la ligne. En dessous de 400 px ils depassaient. */
  .actions-heros { flex-wrap: wrap; }
  .actions-heros .bouton { flex: 1 1 auto; justify-content: center; }
}

/* Le plancher de largeur, rendu au seul bureau : au-dessus de 860 px la page
   est au pixel pres celle d'avant. */
@media (min-width: 861px) {
  body { min-width: 1024px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Les canaux secondaires, sous le bouton principal : discrets, car ils ne
   concernent qu'une minorite — postes ou le Store est desactive, ou l'on
   prefere le .deb a l'AppImage. */
.canaux-secondaires {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
}
.canaux-secondaires .lien-discret {
  color: inherit;
  opacity: 0.75;
  text-decoration: underline;
}
.canaux-secondaires .lien-discret:hover { opacity: 1; }

/* --- les carrousels, sur petit ecran -------------------------------------- */

/* Six fonctions, huit usages : empilees, elles font une colonne interminable.
   On les met en DEFILEMENT HORIZONTAL, deux par ecran — trois ecrans pour les
   fonctions, quatre pour les usages.

   `grid-auto-flow: column` remplit par colonnes au lieu de lignes ; deux
   rangees et des colonnes larges de 100 % donnent exactement deux cartes
   visibles a la fois. L'accroche magnetique arrete le doigt sur chaque ecran
   plutot qu'entre deux.

   `grid-template-columns` doit etre annule : la regle de base pose un
   `repeat(auto-fit, ...)` qui l'emporterait sur les colonnes automatiques. */
.carrousel-boutons { display: none; }

@media (max-width: 860px) {
  .carrousel-mobile {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* La barre de defilement doublerait les boutons, et mange une rangee de
       pixels sous la derniere carte. */
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  /* UNE carte par ecran, et non deux. Deux captures cote a cote sur un
     telephone ne se lisent pas, et les deux offres de prix se comparent d'un
     coup d'oeil sur un bureau seulement. */
  .carrousel-un { grid-template-rows: auto; }

  /* DEUX PAR RANGEE, et non l'une sous l'autre : les cartes de langue sont
     petites, et un drapeau seul par ecran ferait cinq ecrans pour cinq
     langues.

     Les colonnes valent la moitie de la largeur visible, moins la moitie de
     l'ecart — sans quoi la seconde carte deborderait de la valeur de l'ecart.
     L'accroche ne se pose que sur une carte sur deux : le doigt avance ainsi
     par PAIRES, jamais d'une seule carte, et le compteur reste juste. */
  .carrousel-paire {
    grid-template-rows: auto;
    grid-auto-columns: calc((100% - .7rem) / 2);
  }
  .carrousel-paire > *:nth-child(odd) { scroll-snap-align: start; }
  .carrousel-paire > *:nth-child(even) { scroll-snap-align: none; }

  .carrousel-mobile::-webkit-scrollbar { display: none; }
  .carrousel-mobile > * { scroll-snap-align: start; }

  .carrousel-boutons[hidden] { display: none; }
  .carrousel-boutons {
    display: flex; align-items: center; justify-content: center;
    gap: 1rem; margin-top: 1rem;
  }
  .carrousel-fleche {
    width: 2.4rem; height: 2.4rem; border-radius: 999px;
    border: 1px solid var(--bord); background: var(--surface);
    color: var(--texte); font-size: 1.3rem; line-height: 1;
    cursor: pointer;
  }
  .carrousel-fleche:disabled { opacity: .35; cursor: default; }
  .carrousel-page { font-size: .9rem; color: var(--doux); font-variant-numeric: tabular-nums; }
}

/* --- le formulaire de contact -------------------------------------------- */

#formulaire_contact { display: grid; gap: .9rem; margin-top: 1.4rem; }
#formulaire_contact label { display: grid; gap: .35rem; }
#formulaire_contact label span { font-size: .88rem; color: var(--doux); }
#formulaire_contact input,
#formulaire_contact textarea {
  font: inherit; padding: .6rem .75rem; border-radius: 9px;
  border: 1px solid var(--bord); background: var(--fond);
  color: var(--texte); width: 100%; box-sizing: border-box;
}
#formulaire_contact textarea { resize: vertical; min-height: 7rem; }
#formulaire_contact input:focus-visible,
#formulaire_contact textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

/* Le piege a robots. Ni `display: none` ni `hidden` : plusieurs robots les
   reconnaissent et sautent le champ. Il est sorti de l'ecran, ce qui le rend
   invisible sans l'annoncer. */
#formulaire_contact .piege {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

.contact-bas {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-top: .2rem;
}
.contact-ou { font-size: .88rem; color: var(--doux); }

.avis-ok {
  border-color: color-mix(in srgb, var(--ok) 45%, var(--bord));
  background: color-mix(in srgb, var(--ok) 12%, transparent);
}
.avis-panne {
  border-color: color-mix(in srgb, #d93025 45%, var(--bord));
  background: color-mix(in srgb, #d93025 12%, transparent);
}