/* ==========================================================================
   CFC — Bibliothèque d'exercices
   Extension éditoriale : index typographique, filtres en filets,
   planche de démonstration. Aucune carte flottante ; seule ombre tolérée :
   la bande de survol de l'index (rasante, 6% d'opacité).
   ========================================================================== */

/* --- En-tête de page ------------------------------------------------------ */
.phead{ padding-block:clamp(40px,5vw,72px) clamp(28px,3vw,44px); }
.phead__grid{ display:grid; gap:22px; }
@media (min-width:900px){
  .phead__grid{ grid-template-columns:minmax(0,1fr) minmax(0,28ch); gap:56px; align-items:end; }
}
.crumb{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding-block:18px;
  font-family:var(--ff-mono); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.crumb a{ border-bottom:1px solid transparent; }
.crumb a:hover{ border-color:var(--ink-3); }

/* --- Barre de filtres ------------------------------------------------------
   Collante sous la navigation. Filets uniquement, pas de pastilles colorées. */
.filters{
  position:sticky; top:74px; z-index:80;
  background:var(--bone); border-block:1px solid var(--ink);
  padding-block:16px;
}
.search{ position:relative; margin-bottom:14px; }
.search svg{ position:absolute; left:0; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--ink-3); }
/* Archivo Black est trop large/lourd pour du texte saisi : le champ garde
   --ff-text en 500, la hiérarchie vient de la taille et du filet. */
.search input{
  width:100%; min-height:44px; padding:10px 0 10px 28px;
  background:transparent; border:0; border-bottom:1px solid var(--line-2);
  font-size:1.0625rem; font-family:var(--ff-text); font-weight:500; letter-spacing:-.005em;
}
.search input::placeholder{ color:var(--ink-3); font-family:var(--ff-text); font-size:.9375rem; letter-spacing:0; }
.search input:focus{ outline:none; border-color:var(--ink); }

.frow{ display:flex; gap:10px; align-items:center; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.frow::-webkit-scrollbar{ display:none; }
.frow + .frow{ margin-top:9px; }
.frow__k{
  font-family:var(--ff-mono); font-size:.5625rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); flex:none; width:64px;
}
.f{
  flex:none; white-space:nowrap; min-height:44px; padding:6px 2px;
  display:inline-flex; align-items:center;
  font-size:.875rem; color:var(--ink-2);
  border-bottom:1px solid transparent; transition:color .25s var(--ease), border-color .25s var(--ease);
  margin-right:10px;
}
.f:hover{ color:var(--ink); border-color:var(--line-2); }
.f[aria-pressed="true"]{ color:var(--ink); border-color:var(--ink); font-weight:500; }

.fselects{ display:flex; gap:24px; flex-wrap:wrap; margin-top:14px; }
.fsel{ display:flex; flex-direction:column; gap:4px; min-width:160px; flex:1 1 160px; }
.fsel label{
  font-family:var(--ff-mono); font-size:.5625rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
}
.fsel select{
  min-height:44px; width:100%; padding:8px 4px; background:transparent; border:0; border-bottom:1px solid var(--line-2);
  font-family:var(--ff-text); font-size:.9375rem; color:var(--ink); border-radius:0; cursor:pointer;
}
.fsel select:focus{ outline:none; border-color:var(--ink); }

.count{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap;
  padding-block:24px 6px;
  font-family:var(--ff-mono); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.count b{ font-family:var(--ff-display); font-size:1.5rem; letter-spacing:-.02em; color:var(--ink); font-weight:400; }

/* --- Index des exercices ---------------------------------------------------
   Une liste tabulaire, pas une grille de vignettes : c'est un ouvrage
   de référence, il doit se parcourir comme un index. */
.index{ border-top:1px solid var(--ink); }
/* Survol : PAS de tilt 3D. MASTER.md réserve le tilt aux grilles denses
   ("pas les listes pleine largeur") — une rotation sur une ligne de 1240px
   rend le texte illisible. Ici, une translation latérale + un fond de bande
   + une ombre rasante : la ligne avance vers le lecteur, rien ne tourne.
   Le fond est porté par un ::before débordant (inset:0 -14px) et non par un
   padding : les filets de l'index restent alignés sur la grille de .wrap. */
.ex{
  display:grid; gap:4px 24px; padding:16px 0; position:relative;
  border-bottom:1px solid var(--line); align-items:center;
  grid-template-columns:56px minmax(0,1fr);
  isolation:isolate; transition:transform .3s var(--ease);
}
@media (min-width:840px){
  .ex{ grid-template-columns:56px minmax(0,26ch) minmax(0,1fr) 12ch 9ch; padding:14px 0; }
}
.ex::before{
  content:""; position:absolute; inset:0 -14px; z-index:-1; border-radius:var(--radius);
  background:var(--paper); opacity:0;
  transition:opacity .3s var(--ease), box-shadow .3s var(--ease);
}
.ex:hover::before,.ex:focus-visible::before{
  opacity:1; box-shadow:0 6px 18px rgba(13,13,13,.06);
}
.ex:hover,.ex:focus-visible{ transform:translateX(6px); }
@media (prefers-reduced-motion:reduce){
  .ex:hover,.ex:focus-visible{ transform:none; }
}
.ex__vig{
  width:56px; height:56px; overflow:hidden; background:var(--paper-2); position:relative;
  border-radius:8px;
}
.ex__vig .ph{ position:absolute; inset:0; }
.ex__vig img{ width:100%; height:100%; object-fit:cover; display:block; }
.ex__n{ font-weight:600; font-size:1rem; letter-spacing:-.01em; }
.ex__m{ font-size:.875rem; color:var(--ink-2); }
@media (max-width:839px){
  .ex__m,.ex__eq{ grid-column:2; }
  .ex__lv{ grid-column:2; }
}
.ex__eq,.ex__lv{
  font-family:var(--ff-mono); font-size:.625rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
}
.ex__lv[data-lv="1"]{ color:var(--ink-2); }
.ex__lv[data-lv="2"]{ color:var(--accent-2); }
.ex__lv[data-lv="3"]{ color:var(--ink); font-weight:600; }
/* --accent-2 et non --accent : le jaune plein mesure ~1.6:1 sur fond clair,
   illisible en corps de texte. L'or foncé passe à ~5.4:1 sur la bande. */
.ex:hover .ex__n,.ex:focus-visible .ex__n{ color:var(--accent-2); }

.empty{ padding:72px 0; text-align:center; color:var(--ink-2); }

/* --- Planche de démonstration ----------------------------------------------
   `.demo` et non `.plate` : cfc.css réserve désormais `.plate` au disque de
   fonte 3D du hero (`animation:plateSpin infinite`), qui faisait tourner
   toute la fiche sur elle-même et rendait le texte illisible. */
.demo{ display:grid; gap:32px; }
@media (min-width:940px){ .demo{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:64px; align-items:start; } }
.plate__fig figcaption{
  font-family:var(--ff-mono); font-size:.5625rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); margin-top:11px; display:flex; justify-content:space-between; gap:14px;
}
.steps{ counter-reset:s; border-top:1px solid var(--line); }
.steps li{
  counter-increment:s; display:grid; grid-template-columns:44px 1fr; gap:18px;
  padding:15px 0; border-bottom:1px solid var(--line); font-size:.9375rem;
}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--ff-mono); font-size:.625rem; letter-spacing:.09em; color:var(--ink-3); padding-top:.3em;
}
.facts{ border-top:1px solid var(--line); margin-top:26px; }
.facts div{
  display:grid; grid-template-columns:minmax(0,14ch) 1fr; gap:20px;
  padding:11px 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.facts dt{ font-family:var(--ff-mono); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.facts dd{ font-size:.9375rem; }
/* Avertissement — volontairement NEUTRE, pas jaune.
   Le jaune de la charte est le signal d'action (CTA, survol, accent) : le
   réutiliser ici brouillerait "clique" et "attention". Le jaune plein en
   bordure sur fond clair est de toute façon quasi invisible (~1.6:1).
   Pas de token --warn créé non plus : le duoton noir/jaune est strict, y
   glisser un rouge/orange rouvrirait la palette qu'on vient de fermer.
   La sémantique est portée par le filet épais, la puce d'alerte et le titre. */
.caution{
  margin-top:26px; padding:20px 22px; border:1px solid var(--line-2);
  border-left:3px solid var(--ink); border-radius:var(--radius);
  background:var(--bone);   /* la fiche est en .sec--paper : --bone détache l'encart */
  display:grid; grid-template-columns:auto 1fr; gap:14px;
}
.caution svg{ width:17px; height:17px; color:var(--ink); margin-top:3px; }
.caution h4{ margin-bottom:5px; color:var(--ink); }
.caution p{ font-size:.9375rem; color:var(--ink-2); }

/* ==========================================================================
   PASSAGE INTÉGRAL AU NOIR (2026-08-11)
   La page entière est sombre : filtres collants, index et planche de
   démonstration. Les teintes de texte reprennent celles du système
   .sec--dark de cfc.css (#B7BCC2 secondaire, #AEB4BB données mono) pour
   rester alignées avec le reste du site.
   ========================================================================== */

/* --- Frises : le motif clair existe (.frieze--dark), pas le fond ----------- */
.frieze{ background-color:var(--dark); }

/* --- Barre de filtres collante --------------------------------------------
   Elle glisse par-dessus l'index sombre : un fond opaque dérivé de --dark
   (et non translucide) évite que le texte de la liste transparaisse. */
.filters{
  background:var(--dark); color:var(--milk);
  --line:rgba(251,250,248,.2); --line-2:rgba(251,250,248,.34);
  border-block-color:rgba(251,250,248,.24);
}
.filters .search svg{ color:#AEB4BB; }
.filters .search input{ color:var(--milk); }
.filters .search input::placeholder{ color:#AEB4BB; }
.filters .search input:focus{ border-color:var(--milk); }
.filters .frow__k,.filters .fsel label{ color:#AEB4BB; }
.filters .f{ color:#B7BCC2; }
.filters .f:hover{ color:var(--milk); border-color:rgba(251,250,248,.34); }
.filters .f[aria-pressed="true"]{ color:var(--milk); border-color:var(--milk); }
/* Le menu déroulant natif hérite du fond calculé du select : transparent
   donnerait du texte clair sur popup blanc, d'où un fond explicite. */
.filters .fsel select{ background:var(--dark); color:var(--milk); }
.filters .fsel select option{ background:#161616; color:var(--milk); }
.filters .fsel select:focus{ border-color:var(--milk); }

/* --- Index des exercices --------------------------------------------------- */
.sec--dark .count{ color:#AEB4BB; }
.sec--dark .count b{ color:var(--milk); }
.sec--dark .index{ border-top-color:rgba(251,250,248,.34); }
/* Bande de survol : l'ombre rasante noire ne rend rien sur fond noir, la
   profondeur vient d'un voile clair. */
.sec--dark .ex::before{ background:rgba(251,250,248,.07); }
.sec--dark .ex:hover::before,.sec--dark .ex:focus-visible::before{ box-shadow:none; }
.sec--dark .ex__vig{ background:rgba(251,250,248,.08); }
.sec--dark .ex__m{ color:#B7BCC2; }
.sec--dark .ex__eq,.sec--dark .ex__lv{ color:#AEB4BB; }
.sec--dark .ex__lv[data-lv="1"]{ color:#B7BCC2; }
/* Sur fond sombre le jaune plein repasse au-dessus de 4.5:1 : --accent-2
   (or foncé, réservé au fond clair) y serait au contraire illisible. */
.sec--dark .ex__lv[data-lv="2"]{ color:var(--accent); }
.sec--dark .ex__lv[data-lv="3"]{ color:var(--milk); }
.sec--dark .ex:hover .ex__n,.sec--dark .ex:focus-visible .ex__n{ color:var(--accent); }
.sec--dark .empty{ color:#B7BCC2; }

/* --- Planche de démonstration ---------------------------------------------- */
.sec--dark .img{ background:rgba(251,250,248,.06); }
.sec--dark .plate__fig figcaption{ color:#AEB4BB; }
.sec--dark .steps li::before{ color:#AEB4BB; }
.sec--dark .facts dt{ color:#AEB4BB; }
/* .caution reste neutre (pas de jaune) : seule sa matière change — le voile
   clair remplace --bone pour la détacher du fond, le filet épais passe en
   --milk pour conserver le signal visuel. */
.sec--dark .caution{
  background:rgba(251,250,248,.05);
  border-left-color:var(--milk);
}
.sec--dark .caution svg,.sec--dark .caution h4{ color:var(--milk); }
.sec--dark .caution p{ color:#B7BCC2; }

/* ==========================================================================
   GRILLE DE CARTES + MODALE DE DÉTAIL (2026-08-12)
   Remplace l'index en liste + planche de démonstration séparée : fidélité
   structurelle à la maquette externe (grille de vignettes, détail en
   fenêtre modale plein écran au clic), demandée explicitement par
   l'utilisateur. Le JSON DATA et la logique de filtres existants sont
   réutilisés tels quels, seul le rendu change.
   ========================================================================== */

.exo-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
  list-style:none;
}
@media (min-width:640px){ .exo-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:980px){ .exo-grid{ grid-template-columns:repeat(4,1fr); gap:20px; } }

.exo-card{
  display:flex; flex-direction:column; text-align:left; cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; padding:0; font:inherit; color:inherit;
  transition:transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.exo-card:hover,.exo-card:focus-visible{
  transform:translateY(-4px); border-color:var(--accent);
  box-shadow:0 14px 28px rgba(0,0,0,.14);
}
.sec--dark .exo-card{ border-color:rgba(251,250,248,.2); }
.sec--dark .exo-card:hover,.sec--dark .exo-card:focus-visible{ box-shadow:0 14px 28px rgba(0,0,0,.4); }

.exo-thumb{ position:relative; display:block; aspect-ratio:4/3; background:var(--paper-2); overflow:hidden; }
.sec--dark .exo-thumb{ background:rgba(251,250,248,.08); }
.exo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease); }
.exo-card:hover .exo-thumb img{ transform:scale(1.05); }
.exo-level{
  position:absolute; top:10px; left:10px; font-family:var(--ff-mono); font-size:.5625rem;
  letter-spacing:.09em; text-transform:uppercase; padding:4px 9px; border-radius:999px;
  background:rgba(13,13,13,.72); color:var(--milk);
}
.exo-level[data-lv="2"]{ color:var(--accent); }
.exo-level[data-lv="3"]{ color:var(--accent); font-weight:700; }

.exo-body{ display:flex; flex-direction:column; gap:6px; padding:14px 16px 16px; flex:1; }
.exo-body__t{ font-weight:600; font-size:1rem; letter-spacing:-.01em; }
.exo-body__m{ font-size:.8125rem; color:var(--ink-2); }
.sec--dark .exo-body__m{ color:#B7BCC2; }
.exo-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; padding-top:8px; }
.exo-tags span{
  font-family:var(--ff-mono); font-size:.5625rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--line); border-radius:999px; padding:3px 9px;
}
.sec--dark .exo-tags span{ color:#AEB4BB; border-color:rgba(251,250,248,.2); }

/* --- Modale de détail (dialog natif, même pattern que la lightbox galerie) --- */
.exo-detail{
  border:0; border-radius:var(--radius-lg); padding:0; max-width:720px; width:min(92vw,720px);
  max-height:88vh; background:var(--bone); color:var(--ink);
}
.exo-detail::backdrop{ background:rgba(13,13,13,.72); backdrop-filter:blur(2px); }
.exo-detail__close{
  position:absolute; top:14px; right:14px; z-index:2; width:36px; height:36px;
  display:grid; place-items:center; background:var(--accent); color:var(--ink);
  border:0; border-radius:50%; cursor:pointer;
}
.exo-detail__media{ position:relative; aspect-ratio:16/9; background:#000; }
.exo-detail__media video{ width:100%; height:100%; object-fit:cover; display:block; }
.exo-detail__body{ padding:26px 28px 30px; overflow-y:auto; max-height:calc(88vh - 40vw); }
@media (min-width:640px){ .exo-detail__body{ max-height:none; } }
.exo-detail__body h2{ font-size:1.5rem; margin-bottom:8px; }
.exo-detail__body .lead{ color:var(--ink-2); margin-bottom:20px; }
.exo-detail__meta{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px 20px; margin-bottom:22px;
  padding-top:16px; border-top:1px solid var(--line);
}
.exo-detail__meta b{
  display:block; font-family:var(--ff-mono); font-size:.5625rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:2px;
}
.exo-steps{ list-style:none; counter-reset:s; border-top:1px solid var(--line); margin-bottom:20px; }
.exo-steps li{
  counter-increment:s; display:grid; grid-template-columns:32px 1fr; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--line); font-size:.9375rem;
}
.exo-steps li::before{
  content:counter(s,decimal-leading-zero); font-family:var(--ff-mono); font-size:.625rem;
  color:var(--ink-3); padding-top:.3em;
}
.exo-mistake{
  padding:18px 20px; border:1px solid var(--line); border-left:3px solid var(--ink);
  border-radius:var(--radius); background:var(--paper);
}
.exo-mistake b{ display:block; margin-bottom:5px; }
.exo-mistake p{ font-size:.9375rem; color:var(--ink-2); }

@media (prefers-reduced-motion:reduce){ .exo-card{ transition:none; } .exo-card:hover{ transform:none; } }