/* =============================================================================
   LISTE PILIERS — le moteur de liste PARTAGÉ des 4 pages piliers
   À déposer dans : /infinite-child/css/liste-piliers.css

   Modèle validé par Fred le 15/07/2026 (VALIDATED.md §« Les 4 pages piliers ») :
   liste de blocs les uns SOUS les autres · filtres au-dessus · accordéon · zoom au survol.
   Repris de /boutique/ (.bq-*), généralisé en .pil-* pour servir aussi :
   Formation ([cours_liste]) · Hub Quiz · Quiz Premium.

   ⚠️ COULEURS : aucune valeur en dur. Tout vient de charte-graphique.css (:root).
   Pour changer une couleur partout → modifier la charte, PAS ce fichier.
   ============================================================================= */

/* ⚠️ LARGEUR = LA PLACE DU ZOOM — lire ceci avant de toucher aux 2 valeurs.
   MESURÉ EN DIRECT le 18/07/2026 sur /quiz-sur-excel/ (fenêtre 1440) :
   la zone de contenu utile du thème fait **1160px**.

   La bonne façon de loger le zoom, ce n'est PAS de rétrécir le bloc — c'est de
   laisser du VIDE autour de lui, à l'intérieur du catalogue :
     catalogue 1160  −  2 × 80 de padding  =  bloc de 1000px
     bloc 1000 × 1.15 = 1150  →  il grandit de 75px de chaque côté
     75 < 80  →  ça tient, le padding absorbe tout. ✅
   Et si la fenêtre rétrécit, le catalogue rétrécit avec elle : le bloc diminue,
   donc sa croissance aussi, pendant que les 80px restent. Ça tient toujours.

   ❌ Ne pas augmenter le padding sans raison (les blocs maigrissent d'autant).
   ❌ Ne pas remonter le zoom au-dessus de 1.15 sans augmenter le padding.
   Historique des ratés : 1140px de bloc (→1368, débordait) · 980 (→1127, débordait)
   · 860 (ça tenait, mais Fred : « chaque bloc est trop étroit »). */
.pil-catalog{
  font-family:var(--font-body,'Inter',system-ui,sans-serif);
  color:var(--c-text,#36443e);
  max-width:1160px;margin:0 auto;padding:0 80px 8px;
  box-sizing:border-box;
}
.pil-catalog *{box-sizing:border-box}
.pil-catalog *{box-sizing:border-box}

/* ── BOUTONS DE FILTRE ────────────────────────────────────────────────────── */
.pil-filters{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 20px}
.pil-chip{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:600;
  color:var(--c-text,#36443e);background:var(--c-surface,#fff);
  border:1px solid var(--c-border,#d4dcd7);border-radius:999px;padding:8px 15px;
  transition:border-color .15s ease,color .15s ease,background .15s ease}
.pil-chip:hover{border-color:var(--c-accent,#a8741a);color:var(--c-ink,#0e1814)}
.pil-chip.active{background:var(--c-ink,#0e1814);border-color:var(--c-ink,#0e1814);color:#fff}
.pil-chip .num{font-family:var(--font-mono,'Space Mono',monospace);font-size:11px;opacity:.65}

/* ── ACCORDÉON (un <details> par groupe) ──────────────────────────────────── */
.pil-group{background:var(--c-surface,#fff);border:1px solid var(--c-border,#d4dcd7);
  border-radius:var(--radius,14px);margin:0 0 14px;overflow:hidden}
.pil-group.pil-hidden{display:none}
.pil-group__head{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;
  padding:15px 20px;border-left:4px solid var(--c-border,#d4dcd7);
  font-family:var(--font-display,'Inter',sans-serif);font-weight:700;font-size:16px;
  color:var(--c-ink,#0e1814);position:relative}
.pil-group__head::-webkit-details-marker{display:none}
.pil-group__head::after{content:'';margin-left:auto;width:9px;height:9px;flex:0 0 auto;
  border-right:2px solid var(--c-muted,#677571);border-bottom:2px solid var(--c-muted,#677571);
  transform:rotate(45deg);transition:transform .18s ease}
.pil-group[open] .pil-group__head::after{transform:rotate(-135deg)}
.pil-group__count{font-family:var(--font-mono,'Space Mono',monospace);font-size:11.5px;
  font-weight:400;color:var(--c-muted,#677571)}
.pil-group__body{padding:4px 14px 16px}

/* Liseré du groupe : vert = gratuit/apprentissage · ambre = commerce (CHARTE-COULEURS.md) */
.pil-group--gratuit .pil-group__head{border-left-color:var(--c-brand,#107C41)}
.pil-group--premium .pil-group__head{border-left-color:var(--c-accent,#a8741a)}

/* ── LA LISTE : 1 bloc par ligne ──────────────────────────────────────────── */
.pil-list{display:flex;flex-direction:column;gap:12px}

/* ══ LE BLOC — recette de la page Quiz Premium (.qpl-row), choisie par Fred ══
   Carte claire et UNIE + barre de couleur à GAUCHE. La vignette est collée au
   bord (pas de padding sur .pil-row : c'est .pil-body qui l'apporte), d'où
   `overflow:hidden` qui découpe proprement l'image dans les coins arrondis. */
.pil-row{position:relative;display:flex;align-items:stretch;gap:0;
  background:var(--c-card,#e4f5ea);border:1px solid var(--c-card-bd,#c3ddc9);
  border-left:5px solid var(--c-brand,#107C41);
  border-radius:var(--radius,14px);min-height:132px;overflow:hidden;
  transform-origin:center;
  transition:transform .38s cubic-bezier(.22,.61,.36,1),
             box-shadow .38s ease,
             border-color .38s ease}

/* ══ ZOOM AU SURVOL — l'effet que Fred veut sur TOUTES les pages de vente ══
   Fred l'a réglé à l'œil le 15/07 : ~+25 %. « Ça, ça claque. »
   RÉVISÉ le 18/07/2026 (Fred) : ~~1.2 (+20 %)~~ → **1.15 (+15 %)**, et mouvement
   RALENTI (.2s → .38s, courbe douce). Motif : l'effet était trop brusque.
   ⬇️ Baisser le zoom est toujours SANS RISQUE côté géométrie (voir ci-dessous) ;
      c'est le remonter qui déborde.

   ⚠️ CONTRAINTE DE GÉOMÉTRIE, PAS DE GOÛT — à comprendre avant de toucher ces valeurs :
   un bloc zoomé grandit des DEUX côtés. Bloc 980px × 1.15 = 1127px : il lui faut donc
   1127px de fenêtre. Au-delà, le site le coupe aux bords (body{overflow-x:hidden}).
   → Le zoom est donc BORNÉ PAR LA LARGEUR DE LA FENÊTRE, et se réduit quand elle
     rétrécit. C'est la seule façon d'avoir un gros zoom sans casser la mise en page.
   ❌ Ne pas remonter le zoom sans élargir la fenêtre disponible OU rétrécir .pil-catalog.
   (Erreur du 15/07 : 1.25 sur des blocs de 1084px dans une page de 1280px → débordement
    de 135px de chaque côté, blocs coupés. C'est ce que Fred a vu.) */
.pil-row:hover,.pil-row:focus-within{
  transform:scale(1.15) translateY(-4px);
  border-color:var(--c-accent,#a8741a);
  box-shadow:0 26px 52px -14px rgba(19,32,26,.42);
  z-index:2}

/* Sur petite fenêtre, les 80px de padding coûtent trop cher en largeur de texte :
   on les réduit, et on rabaisse le zoom d'autant pour rester dans la boîte. */
@media (max-width:900px){
  .pil-catalog{padding:0 24px 8px}
  .pil-row:hover,.pil-row:focus-within{transform:scale(1.04) translateY(-3px)}
}

/* Respecte le réglage système « réduire les animations » (accessibilité). */
@media (prefers-reduced-motion:reduce){
  .pil-row{transition:none}
  .pil-row:hover,.pil-row:focus-within{transform:none}
}

/* ══ LA BARRE DE GAUCHE PORTE LE SENS (Fred, 18/07/2026) ════════════════════
   Le blanc uniforme « ne fait rien ressortir » (Fred). Mais teinter le FOND du
   bloc a été refusé deux fois (« fade », puis « super moche »). La solution
   retenue = celle de la page Quiz Premium : une seule barre à gauche.
   • Quiz classés par NIVEAU → vert de plus en plus profond.
   • Contenu PREMIUM → ambre (identique au liseré doré de .qpl-row).
   • Reste (quiz par thème, cours sans niveau) → vert de marque.
   ⚠️ Les couleurs viennent de la charte. Pour les changer : charte-graphique.css. */
.pil-row--niv1{border-left-color:var(--c-niv-1,#8ecfae)}
.pil-row--niv2{border-left-color:var(--c-niv-2,#4faa7c)}
.pil-row--niv3{border-left-color:var(--c-niv-3,#2b8a58)}
.pil-row--niv4{border-left-color:var(--c-niv-4,#1d6b42)}
.pil-row--premium{border-left-color:var(--c-accent,#a8741a)}

/* Calque cliquable : toute la ligne est un lien, sans occuper de place.
   (Astuce reprise de /boutique/ — c'est elle qui supprime la « zone blanche ».) */
.pil-row__link{position:absolute;inset:0;z-index:1;font-size:0;text-indent:-9999px}

/* Vignette collée au bord gauche, pleine hauteur (comme .qpl-thumb). */
.pil-thumb{flex:0 0 140px;background:#fff;position:relative}
.pil-thumb img{width:100%;height:100%;object-fit:cover;display:block}

.pil-body{flex:1 1 auto;min-width:0;padding:15px 18px;
  display:flex;flex-direction:column;justify-content:center}
/* ⚠️ align-self:flex-start OBLIGATOIRE : .pil-body est un conteneur flex en colonne,
   donc ses enfants s'étirent sur TOUTE la largeur par défaut (align-items:stretch).
   Sans cette ligne, la pastille fait 293px de large au lieu de sa largeur de texte
   — le défaut que Fred a vu le 18/07 : « le cartouche est beaucoup trop large ».
   (C'est exactement pour ça que .qpl-tag l'a déjà dans quiz-premium.css.) */
.pil-tag{align-self:flex-start;
  display:inline-block;font-family:var(--font-mono,'Space Mono',monospace);
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;margin:0 0 7px;
  color:var(--c-brand-ink,#0e3a22);background:var(--c-brand-pale,#eef6f1);
  border:1px solid var(--c-brand-soft,#dceee3)}
.pil-row--premium .pil-tag{color:var(--c-accent-ink,#4d370a);
  background:var(--c-accent-pale,#fbf6e9);border-color:var(--c-accent-soft,#f5ecd6)}

/* ── LA MÉDAILLE (Populaire · Top 5 %) — validée par Fred le 18/07/2026 ──────
   « Comme une récompense, comme une médaille d'or » (Fred). D'où un vrai FOND
   jaune doux en dégradé, et pas un simple contour (première version refusée :
   « n'ont pas de couleur jaune de fond »).
   ⚠️ EXCEPTION ASSUMÉE à la règle « ambre = ça s'achète » : ces quiz sont
   GRATUITS. Ce jaune récompense, il ne vend pas — d'où des tokens --c-medal-*
   distincts de --c-accent. Ce qui lève l'ambiguïté pour le visiteur : le prix
   reste écrit « 100 % gratuit » en vert juste à côté (.pil-price--free).
   ❌ Ne JAMAIS mettre ce jaune sur un bouton ni sur un lien : le bouton d'un
   quiz gratuit reste VERT. (Documenté dans CHARTE-COULEURS.md §Exceptions.) */
.pil-tag--star{color:var(--c-medal-ink,#6b4a0d);
  background:linear-gradient(135deg,var(--c-medal-1,#fdf3d2) 0%,var(--c-medal-2,#f7e5aa) 100%);
  border:1px solid var(--c-medal-bd,#d9ab3d);font-weight:700;
  box-shadow:0 1px 2px rgba(140,105,20,.18)}
.pil-tag--star::before{content:'🏅';margin-right:5px;font-size:12px}
.pil-body h3{font-family:var(--font-display,'Inter',sans-serif);font-weight:700;
  font-size:17.5px;line-height:1.3;color:var(--c-ink,#0e1814);margin:0 0 6px}
.pil-feats{font-size:13px;line-height:1.5;color:var(--c-muted,#677571);margin:0 0 8px}
.pil-meta{display:flex;flex-wrap:wrap;gap:7px}
/* Pastilles blanches sur la carte verte (le crème d'avant se voyait mal dessus). */
.pil-meta span{display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono,'Space Mono',monospace);font-size:11.5px;
  color:var(--c-brand-ink,#0e3a22);background:#fff;
  border:1px solid var(--c-brand-soft,#dceee3);padding:3px 9px;border-radius:999px}

.pil-action{flex:0 0 auto;display:flex;flex-direction:column;
  justify-content:center;align-items:flex-end;gap:9px;
  padding:15px 18px 15px 0;
  z-index:2;position:relative}
.pil-price{font-family:var(--font-display,'Inter',sans-serif);font-size:22px;font-weight:700;
  color:var(--c-accent-ink,#4d370a);line-height:1;white-space:nowrap}
.pil-price small{display:block;font-family:var(--font-body,'Inter',sans-serif);font-size:10.5px;
  font-weight:500;color:var(--c-muted,#677571);margin-top:5px}
.pil-price--free{color:var(--c-brand,#107C41);font-size:14px}

.pil-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  text-decoration:none;white-space:nowrap;font-weight:600;font-size:14px;
  padding:10px 18px;border-radius:10px;color:#fff;
  transition:background .15s ease}
/* VERT = gratuit/apprentissage · AMBRE = achat (CHARTE-COULEURS.md, règle d'or) */
.pil-btn--free{background:var(--c-brand,#107C41)}
.pil-btn--free:hover{background:var(--c-brand-dark,#0b5a2f);color:#fff}
.pil-btn--buy{background:var(--c-btn,#8F6316)}
.pil-btn--buy:hover{background:var(--c-btn-hover,#7B5513);color:#fff}

.pil-empty{text-align:center;color:var(--c-muted,#677571);background:var(--c-bg,#fbf7ef);
  border:1px dashed var(--c-border,#d4dcd7);border-radius:var(--radius,14px);padding:28px}

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width:720px){
  /* La vignette passe au-dessus (comme .qpl-row en mobile). */
  .pil-row{flex-direction:column;align-items:stretch}
  .pil-thumb{flex:0 0 auto;height:150px;width:100%}
  .pil-action{flex-direction:row;align-items:center;justify-content:space-between;
    width:100%;padding:0 18px 16px}
  .pil-btn{flex:1 1 auto}
  /* Pas de zoom sur mobile : il n'y a pas de survol, et ça déborde. */
  .pil-row:hover,.pil-row:focus-within{transform:none}
}