/* demos.css — les mini-demonstrations interactives.
   Se charge apres commun.css et la peau.

   Principe : chaque bloc contient d'abord un repli statique, lisible sans
   JavaScript. Le script le remplace par la version interactive. Si le script
   ne se charge pas, la page reste complete — elle perd juste l'interaction. */

/* margin-top/bottom separement et non le raccourci : demos.css est charge
   apres commun.css, et « margin:30px 0 0 » y poserait margin-left:0, ce qui
   annulerait le debordement de .deborde sur le tamis. */
.demo-bloc{
  margin-top:30px; margin-bottom:0;
  border:1px solid var(--filet); border-radius:14px;
  background:color-mix(in srgb, var(--encre) 3%, transparent);
  overflow:hidden;
}
.demo-tete{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:8px 20px;
  padding:13px 20px; border-bottom:1px solid var(--filet);
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gris);
}
.demo-tete b{color:var(--rouge); font-weight:500}
.demo-corps{padding:22px 20px}
.demo-pied-note{
  padding:11px 20px; border-top:1px solid var(--filet);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  color:var(--gris); line-height:1.6;
}

/* boutons communs */
.demo-bouton{
  font:600 14px/1 var(--serif); letter-spacing:-.01em;
  padding:12px 20px; border-radius:999px; cursor:pointer;
  border:1px solid var(--filet-actif); background:transparent; color:var(--encre);
}
.demo-bouton:hover:not(:disabled){background:color-mix(in srgb,var(--encre) 9%,transparent)}
.demo-bouton.plein{background:var(--encre); color:var(--papier); border-color:transparent}
.demo-bouton.plein:hover:not(:disabled){background:#fff}
.demo-bouton:disabled{opacity:.4; cursor:default}
.demo-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; align-items:center}

/* compteurs */
.demo-chiffres{display:flex; flex-wrap:wrap; gap:0 30px; margin:0 0 18px}
.demo-chiffres div{min-width:0}
.demo-chiffres dt{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gris); margin:0 0 3px;
}
.demo-chiffres dd{margin:0; font-size:26px; font-variant-numeric:tabular-nums; line-height:1.1}
.demo-chiffres dd.accent{color:var(--rouge)}

/* etapes de la visite guidee */
.demo-etape{font-size:17px; line-height:1.6; margin:0 0 16px; max-width:44em; min-height:3.2em}
.demo-etape b{color:var(--rouge); font-weight:600}
.demo-jauge{display:flex; gap:6px; margin:0 0 18px}
.demo-jauge span{height:3px; flex:1; background:var(--filet); border-radius:2px}
.demo-jauge span.faite{background:var(--rouge)}


/* ---------- Mines : la grille ---------- */
.mines-grille{
  display:grid; grid-template-columns:repeat(30, 1fr); gap:1.5px;
  /* 560 px dans une colonne de 896 laissait beaucoup d'air autour du seul
     element jouable de la page. A 660, la case passe de 17 a 21 px. */
  max-width:660px; margin:0 auto; touch-action:manipulation;
}
.mines-case{
  aspect-ratio:1; border:0; padding:0; cursor:pointer;
  background:color-mix(in srgb, var(--encre) 26%, transparent);
  border-radius:2px; font:600 9px/1 var(--mono); color:var(--encre);
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease;
}
.mines-case:hover:not(:disabled){background:color-mix(in srgb, var(--encre) 44%, transparent)}
.mines-case:disabled{cursor:default}
/* Une case ouverte doit se distinguer nettement d'une case fermee :
   a 13 % contre 5 % sur un fond quasi noir, la clairiere etait invisible. */
.mines-case.ouverte{background:color-mix(in srgb, var(--encre) 7%, transparent); color:var(--gris)}
.mines-case.mine{background:color-mix(in srgb, var(--rouge) 55%, transparent); color:var(--papier)}
.mines-case.robot{background:color-mix(in srgb, var(--rouge) 26%, transparent)}
.mines-case[data-n="1"]{color:#7dd3fc}
.mines-case[data-n="2"]{color:#86efac}
.mines-case[data-n="3"]{color:#fca5a5}
.mines-case[data-n="4"],.mines-case[data-n="5"],
.mines-case[data-n="6"],.mines-case[data-n="7"],.mines-case[data-n="8"]{color:#f0abfc}

@media (max-width:720px){
  .demo-corps{padding:18px 14px}
  .demo-tete,.demo-pied-note{padding-left:14px; padding-right:14px}
  .demo-chiffres{gap:0 20px}
  .demo-chiffres dd{font-size:21px}
  .mines-grille{gap:1px}
  /* font-size:0 masquait les chiffres — le coeur meme du jeu. La grille passe
     a 16 colonnes sous 620 px (voir demos.js), donc la place existe. */
  .mines-case{font-size:10px; border-radius:1px}
}

@media (prefers-reduced-motion: reduce){
  .mines-case{transition:none}
}


/* ---------- Apres : le comparateur ---------- */
.comparateur{
  position:relative; overflow:hidden; border-radius:12px;
  border:1px solid var(--filet); background:#000; line-height:0;
}
.comparateur img{display:block; width:100%; height:auto}
.comp-dessus{
  position:absolute; inset:0 auto 0 0; width:55%; overflow:hidden;
}
.comp-dessus img{
  position:absolute; top:0; left:0; height:100%; width:auto;
  max-width:none; object-fit:cover;
}
.comparateur.etroit{max-width:430px; margin-left:auto; margin-right:auto}
.comp-etiq{
  position:absolute; top:12px; z-index:2; pointer-events:none;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; line-height:1;
  padding:6px 11px; border-radius:999px;
  background:color-mix(in srgb, var(--papier) 86%, transparent);
  border:1px solid var(--filet); color:var(--encre);
  transition:opacity .18s ease;
}
.comp-etiq.gauche{left:12px}
.comp-etiq.droite{right:12px}
.comp-barre{
  position:absolute; top:0; bottom:0; left:55%; width:2px;
  background:var(--rouge); pointer-events:none;
}
.comp-barre::after{
  content:""; position:absolute; top:50%; left:50%; width:34px; height:34px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:var(--rouge); border:3px solid var(--papier);
}
.comp-curseur{
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; cursor:ew-resize;
}
.comp-curseur:focus-visible{opacity:.001; outline:3px solid var(--rouge); outline-offset:3px}

/* ---------- Merch / Clipper : les tableaux de scene ---------- */
.demo-scene .cadre{margin-top:0}
.demo-scene table.releve{min-width:420px}
.demo-scene table.releve td{font-size:15px; padding:10px 12px 10px 0}
.demo-scene .note{margin-top:14px}


/* ---------- Merch Direct : le mini tableau de bord ----------
   Meme disposition que l'outil reel — barre de compteurs, avertissement,
   tris, fiches — mais reduite a ce qui explique. */
.md-bord{margin-top:22px; border-top:1px solid var(--filet); padding-top:20px}

.md-barre{display:flex; flex-wrap:wrap; gap:0 34px; margin:0 0 14px}
.md-barre div{display:flex; flex-direction:column}
.md-barre b{font-size:27px; line-height:1.1; font-variant-numeric:tabular-nums; font-weight:600}
.md-barre div:nth-child(2) b{color:var(--rouge)}
.md-barre span{
  font-family:var(--mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gris); margin-top:3px;
}

.md-avert{
  margin:0 0 16px; font-size:14px; line-height:1.6; color:var(--gris);
  border-left:2px solid var(--rouge); padding:8px 0 8px 14px; max-width:52em;
}
.md-avert b{color:var(--encre)}

.md-tris{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 14px}
.md-tri{
  font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  padding:6px 13px; border-radius:999px; cursor:pointer;
  border:1px solid var(--filet-actif); background:transparent; color:var(--gris);
}
.md-tri:hover{color:var(--encre)}
.md-tri.actif{border-color:var(--rouge); color:var(--rouge)}

.md-liste{display:grid; gap:9px}
.md-carte{
  display:grid; grid-template-columns:76px 1fr; gap:0 14px; align-items:center;
  width:100%; text-align:left; cursor:pointer;
  padding:11px; border-radius:10px;
  border:1px solid var(--filet-actif); background:transparent; color:var(--encre);
}
.md-carte:hover{border-color:var(--rouge); background:color-mix(in srgb,var(--rouge) 6%,transparent)}
.md-vignette{
  aspect-ratio:1; border-radius:7px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--encre) 10%,transparent);
  font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--gris);
  text-align:center; padding:4px;
}
.md-corps{min-width:0; font-size:15px; line-height:1.45}
.md-corps b{display:block; font-weight:600}
.md-meta{
  display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--gris); margin:4px 0 6px;
}
.md-prio,.md-tiede,.md-froid{
  display:inline-block; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.09em; text-transform:uppercase;
  padding:3px 10px; border-radius:999px; border:1px solid var(--filet);
}
.md-prio{color:var(--rouge); border-color:var(--rouge)}
.md-tiede{color:var(--gris)}
.md-froid{color:var(--gris); opacity:.6}

/* ---------- la fiche d'une annonce ---------- */
.md-fiche{
  margin-top:16px; padding:18px; border-radius:12px;
  border:1px solid var(--rouge);
  background:color-mix(in srgb,var(--rouge) 5%,transparent);
}
.md-fiche-tete{position:relative; padding-right:38px; margin-bottom:16px}
.md-fiche-tete b{display:block; font-size:16px; line-height:1.4}
.md-fiche-tete span{
  display:block; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.04em; color:var(--gris); margin-top:4px;
}
.md-fermer{
  position:absolute; top:-4px; right:-4px; width:30px; height:30px;
  border-radius:50%; cursor:pointer; font-size:13px;
  border:1px solid var(--filet-actif); background:transparent; color:var(--gris);
}
.md-fermer:hover{color:var(--encre); border-color:var(--encre)}

.md-deux{display:grid; grid-template-columns:1fr 1fr; gap:18px 26px; margin-bottom:18px}
.md-colonne{min-width:0}
.md-colonne h4,.md-titre{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gris); margin:0 0 9px; font-weight:500;
}
.md-colonne ul{margin:0; padding:0; list-style:none}
.md-colonne li{
  font-size:14px; line-height:1.5; padding:0 0 7px 19px; position:relative;
}
.md-oui::before{content:"✓"; position:absolute; left:0; color:#86efac}
.md-non::before{content:"?"; position:absolute; left:0; color:var(--rouge); font-weight:700}

.md-nets{width:100%; border-collapse:collapse; margin-bottom:16px}
.md-nets td{padding:8px 10px 8px 0; border-bottom:1px solid var(--filet); font-size:14px}
.md-pays{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:var(--gris); width:42px;
}
.md-frais{
  display:block; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.04em; color:var(--gris); margin-top:2px;
}
.md-net{text-align:right; font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap}
.md-perte{color:var(--gris)}
.md-meilleur .md-net{color:var(--rouge)}
.md-meilleur .md-pays{color:var(--rouge)}

.md-total{margin-top:22px; padding-top:18px; border-top:1px solid var(--filet)}
.md-grille{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px 24px}
.md-grille div{display:flex; flex-direction:column}
.md-grille b{font-size:24px; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--rouge)}
.md-grille span{font-size:13px; line-height:1.45; color:var(--gris); margin-top:3px}

@media (max-width:720px){
  .md-deux{grid-template-columns:1fr; gap:16px}
  .md-barre{gap:0 22px}
  .md-barre b{font-size:22px}
  .md-carte{grid-template-columns:58px 1fr; gap:0 11px}
}

/* ---------- Veille Claire : un geste, un resultat ---------- */
.vc-question{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gris); margin:0 0 12px;
}
.vc-choix{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px}
.vc-metier{
  text-align:left; cursor:pointer; padding:16px 18px; border-radius:11px;
  border:1px solid var(--filet-actif); background:transparent; color:var(--encre);
  font:400 16px/1.4 var(--serif);
}
.vc-metier b{font-weight:600}
.vc-metier:hover{border-color:var(--rouge)}
.vc-metier.actif{
  border-color:var(--rouge); color:var(--rouge);
  background:color-mix(in srgb,var(--rouge) 10%,transparent);
}

.vc-resultat{margin-top:24px; border-top:1px solid var(--filet); padding-top:20px}
.vc-verdict{margin:0; font-size:21px; line-height:1.5; max-width:34em}
.vc-nombre{color:var(--rouge); font-size:30px; font-variant-numeric:tabular-nums}
.vc-regle{
  margin:10px 0 20px; font-size:14.5px; line-height:1.65;
  color:var(--gris); max-width:44em;
}
.vc-regle b{color:var(--encre)}

.vc-liste{margin:0; padding:0; list-style:none; max-height:380px; overflow-y:auto}
.vc-liste li{padding:12px 4px; border-bottom:1px solid var(--filet)}
.vc-objet{min-width:0}
.vc-titre{display:block; font-size:15.5px; line-height:1.45}
.vc-meta{
  display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--gris); margin-top:4px;
}
.vc-pourquoi{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--rouge); margin-top:5px;
}
.vc-pourquoi a{color:var(--gris)}
.vc-suite{margin:14px 0 0; font-size:14.5px; color:var(--gris)}
.vc-ecartes{margin-top:18px; font-size:14px}
.vc-ecartes summary{
  cursor:pointer; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gris);
}
.vc-ecartes summary:hover{color:var(--encre)}
.vc-ecartes ul{margin:12px 0 0; padding:0 0 0 18px; color:var(--gris); line-height:1.6}
.vc-ecartes li{margin-bottom:5px}

@media (max-width:720px){
  .vc-verdict{font-size:18px}
  .vc-nombre{font-size:25px}
  .vc-liste{max-height:320px}
}

/* ---------- Guessrboxd : la grille de telephones ----------
   Retire le 26 aout 2026 : le bloc .tel-rangee qui precedait ici (rangee
   defilante, abandonnee au profit de la grille) n'etait plus reference par
   aucune page, mais son .tel{width:clamp(150px,19vw,208px)} s'appliquait
   encore. Les telephones restaient brides a 208 px dans des colonnes de
   284 px : 76 px de vide par colonne, ecarts de 98 px au lieu de 22, et la
   grille s'arretait avant le bord droit. Du CSS mort qui deformait une page
   vivante.
   La rangee defilante coupait le quatrieme appareil et en cachait deux. Une
   grille montre les six d'un coup, sans decalage : le decalage ressemblait a
   un defaut d'alignement plutot qu'a un parti pris. */
.tel-grille{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:26px 22px; margin:30px 0 0;
}
.tel{margin:0}
.tel img{
  display:block; width:100%; height:auto;
  border-radius:14px; border:1px solid var(--filet);
  background:var(--pale);
  box-shadow:0 12px 34px rgba(0,0,0,.45);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.tel:hover img{transform:translateY(-6px)}
.tel figcaption{
  font-family:var(--mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--gris); margin-top:10px; text-align:center;
}
@media (max-width:720px){
  .tel-grille{grid-template-columns:repeat(2, 1fr); gap:18px 14px}
}
@media (prefers-reduced-motion: reduce){
  .tel img{transition:none}
  .tel:hover img{transform:none}
}


/* ---------- Veille Claire : le tamis ----------
   Mille cent onze carres, un par avis publie. On tire la poignee, la regle
   s'applique, le tas fond. C'est l'argument entier du service en un geste,
   compris AVANT d'avoir a choisir quoi que ce soit.

   La grille est purement decorative (aria-hidden) : l'information reelle est
   dans le compteur, qui est une zone live, et dans la liste complete de la
   demonstration suivante. Un lecteur d'ecran n'a rien a faire de mille cent
   onze cases, mais tout a faire du nombre et des intitules. */
.tamis-tete{display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline; margin:0 0 4px}
.tamis-libelle{font-size:16px; line-height:1.5; color:var(--gris); margin:0; max-width:44em}
.tamis-libelle b{color:var(--encre); font-weight:600}

.tamis-compte{
  font-variant-numeric:tabular-nums; font-weight:600;
  font-size:34px; line-height:1.1; color:var(--rouge);
}
.tamis-sur{font-size:15px; color:var(--gris); font-variant-numeric:tabular-nums}

/* Le nombre de colonnes est pose par demos.js a partir de la largeur reelle
   et du nombre d avis : le corpus change a chaque regeneration, une valeur
   fixe donnerait tantot un ruban, tantot un mur. */
.tamis-grille{
  display:grid; grid-template-columns:repeat(60, 1fr); gap:1px;
  margin:16px 0 0;
}
.tamis-case{
  aspect-ratio:1; border-radius:1px;
  background:color-mix(in srgb, var(--rouge) 62%, transparent);
  transition:background .25s ease, opacity .25s ease;
}
.tamis-case.eteinte{
  background:color-mix(in srgb, var(--encre) 8%, transparent);
}
/* Les avis retenus restent allumes ET se distinguent : ce sont les seuls
   qu'on peut interroger. */
.tamis-case.retenue{cursor:pointer; background:var(--rouge)}
.tamis-case.retenue:hover{outline:2px solid var(--encre); outline-offset:1px}

.tamis-poignee{
  -webkit-appearance:none; appearance:none;
  width:100%; margin:20px 0 0; height:26px; background:transparent; cursor:ew-resize;
}
.tamis-poignee::-webkit-slider-runnable-track{
  height:3px; border-radius:2px; background:var(--filet-actif);
}
.tamis-poignee::-moz-range-track{height:3px; border-radius:2px; background:var(--filet-actif)}
.tamis-poignee::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:26px; height:26px; margin-top:-11px;
  border-radius:50%; background:var(--rouge); border:3px solid var(--papier);
}
.tamis-poignee::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:var(--rouge);
  border:3px solid var(--papier);
}
.tamis-poignee:focus-visible{outline:3px solid var(--rouge); outline-offset:4px; border-radius:4px}

.tamis-bornes{
  display:flex; justify-content:space-between; gap:12px; margin:4px 0 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gris);
}

.tamis-detail{
  margin:16px 0 0; padding:14px 16px; border-radius:10px; min-height:76px;
  border:1px solid var(--filet); background:color-mix(in srgb, var(--encre) 3%, transparent);
  font-size:14.5px; line-height:1.55;
}
.tamis-detail b{display:block; font-weight:600; margin-bottom:3px}
.tamis-detail span{
  display:block; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.04em; color:var(--gris); margin-top:4px;
}
.tamis-detail em{font-style:normal; color:var(--rouge)}

@media (max-width:720px){
  .tamis-compte{font-size:27px}
}
@media (prefers-reduced-motion: reduce){
  .tamis-case{transition:none}
}

/* ---------- Strata : le chantier ---------- */
/* La grille tient l'ecran comme celle des mines, mais l'unite n'est plus une
   case a cliquer : c'est un outil, avec un nom et un tier. Il lui faut donc
   de la place pour se lire — d'ou des tuiles larges plutot que carrees. */
.st-grille{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:8px;
  max-width:660px; margin:0 auto 18px; touch-action:manipulation;
}
.st-case{
  --ton:var(--gris);
  aspect-ratio:1; border:1px dashed var(--filet); border-radius:8px;
  padding:4px; cursor:pointer; background:transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; overflow:hidden;
  transition:border-color .16s ease, background .16s ease, transform .12s ease;
}
.st-case:disabled{cursor:default}
.st-case.pleine{
  border:1px solid color-mix(in srgb, var(--ton) 55%, transparent);
  background:color-mix(in srgb, var(--ton) 13%, transparent);
}
.st-case.pleine:hover{background:color-mix(in srgb, var(--ton) 22%, transparent)}
/* L'outil choisi et ses jumeaux : on montre AVANT le clic ce qui peut
   fusionner, sinon la regle ne s'apprend que par essais successifs. */
.st-case.choisie{
  border-color:var(--rouge); background:color-mix(in srgb, var(--rouge) 22%, transparent);
  transform:translateY(-2px);
}
.st-case.jumelle{border-style:dashed; border-color:var(--rouge)}
.st-case u{
  text-decoration:none; font:600 22px/1 var(--mono); color:var(--ton);
  font-variant-numeric:tabular-nums;
}
.st-case span{
  font-family:var(--mono); font-size:9px; line-height:1.25; text-align:center;
  color:var(--gris); text-wrap:balance;
}
.st-case:focus-visible{outline:2px solid var(--rouge); outline-offset:2px}

/* La bande d'epoque : ou l'on est dans la descente, et combien il reste
   avant que la strate change. */
.st-strate{display:flex; align-items:center; gap:12px; margin:0 0 16px; flex-wrap:wrap}
.st-strate-lib{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gris);
}
.st-strate b{font-weight:600; color:var(--encre); font-size:15px}
.st-jauge{
  flex:1; min-width:120px; height:3px; border-radius:2px;
  background:var(--filet); overflow:hidden;
}
.st-jauge i{display:block; height:100%; background:var(--rouge); transition:width .25s ease}

@media (max-width:720px){
  .st-grille{grid-template-columns:repeat(4, 1fr); gap:6px}
  .st-case u{font-size:18px}
  .st-case span{font-size:8px}
}
@media (prefers-reduced-motion: reduce){
  .st-case,.st-jauge i{transition:none}
  .st-case.choisie{transform:none}
}