/* ═══════════════════════════════════════════════════════════════
   🖨️ DEVOIRATI — HABILLAGE DE L'INDEX DES GÉNÉRATEURS PDF
   Écrit UNE fois, partagé par les quatre pages :
     generateurs-pdf/index.html        les trois niveaux (comptes non-élèves)
     generateurs-pdf/7eme|8eme|9eme/   un seul niveau (élèves)

   Palette : celle des index de chapitre, reprise à l'identique.
   #667eea et #764ba2 sont les deux couleurs officielles de Devoirati ;
   le fond #f8f9fa et le texte #2c3e50 viennent de la page la plus consultée
   du site (index-generateurs-pdf-8eme.html). On ne réinvente rien.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --gp-bg:#f8f9fa;
  --gp-carte:#ffffff;
  --gp-txt:#2c3e50;
  --gp-doux:#7a8699;
  --gp-trait:#e8ebf0;
  --gp-indigo:#667eea;
  --gp-violet:#764ba2;
  --gp-alg:linear-gradient(135deg,#667eea,#764ba2);
  --gp-geo:linear-gradient(135deg,#f093fb,#764ba2);
  --gp-stat:linear-gradient(135deg,#764ba2,#ffc107);
  --gp-r:14px;
  --gp-r-sm:10px;
  --gp-o-sm:0 2px 10px rgba(102,126,234,.10);
  --gp-o-md:0 6px 22px rgba(102,126,234,.16);
  --gp-o-lg:0 12px 36px rgba(102,126,234,.22);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* 🔴 INDISPENSABLE, et pas décoratif : l'attribut [hidden] ne vaut qu'un
   « display:none » de feuille par défaut. Toute règle explicite — et les
   cartes sont en display:flex — l'écrase en silence. Sans cette ligne, le
   moteur croit masquer une carte et le visiteur la voit toujours : les
   filtres et la page de niveau ne feraient RIEN de visible. */
[hidden]{display:none !important}
body{
  /* Les polices de secours ne sont PAS décoratives : Cairo ne contient ni ℝ ni
     ℚ ni ℕ, et sans elles « القوى في ℚ » affiche un carré vide. Le navigateur
     descend la liste glyphe par glyphe. */
  font-family:'Cairo','Segoe UI',Tahoma,'Segoe UI Symbol','Noto Sans Math','Cambria Math','DejaVu Sans',sans-serif;
  background:var(--gp-bg);
  color:var(--gp-txt);
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}

/* ═══ en-tête ═══ */
.gp-tete{
  background:var(--gp-alg);
  color:#fff;
  padding:34px 20px 40px;
  border-radius:0 0 26px 26px;
  box-shadow:var(--gp-o-md);
}
.gp-tete-in{max-width:1180px;margin:0 auto}
.gp-fil{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:.85rem;opacity:.92;margin-bottom:18px;
}
.gp-fil a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45)}
.gp-fil a:hover{border-bottom-color:#fff}
.gp-fil span{opacity:.6}
.gp-h1{margin:0;font-size:clamp(1.5rem,4.2vw,2.3rem);font-weight:800;letter-spacing:-.4px}
.gp-sous{margin:8px 0 0;font-size:clamp(.92rem,2.4vw,1.06rem);opacity:.93;max-width:56ch}

.gp-chiffres{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.gp-chiffre{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.26);
  border-radius:var(--gp-r-sm);
  padding:10px 16px;min-width:96px;
  backdrop-filter:blur(4px);
}
.gp-chiffre b{display:block;font-size:1.5rem;font-weight:800;line-height:1.2}
.gp-chiffre span{font-size:.78rem;opacity:.9}

/* ═══ barre de filtres ═══ */
.gp-filtres{
  position:sticky;top:0;z-index:40;
  background:rgba(248,249,250,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--gp-trait);
  padding:12px 20px;
  margin-bottom:26px;
}
.gp-filtres-in{
  max-width:1180px;margin:0 auto;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.gp-champ{
  flex:1 1 220px;min-width:0;
  display:flex;align-items:center;gap:8px;
  background:var(--gp-carte);
  border:1.5px solid var(--gp-trait);
  border-radius:999px;padding:8px 16px;
  transition:border-color .18s,box-shadow .18s;
}
.gp-champ:focus-within{border-color:var(--gp-indigo);box-shadow:var(--gp-o-sm)}
.gp-champ input{
  flex:1;border:0;outline:0;background:none;
  font-family:inherit;font-size:.95rem;color:var(--gp-txt);min-width:0;
}
.gp-puces{display:flex;gap:6px;flex-wrap:wrap}
.gp-puce{
  font-family:inherit;font-size:.86rem;font-weight:700;
  padding:8px 15px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--gp-trait);background:var(--gp-carte);color:var(--gp-doux);
  transition:all .18s;
}
.gp-puce:hover{border-color:var(--gp-indigo);color:var(--gp-indigo)}
.gp-puce-on{background:var(--gp-alg);border-color:transparent;color:#fff;box-shadow:var(--gp-o-sm)}
.gp-bascule{
  display:flex;align-items:center;gap:7px;
  font-size:.86rem;font-weight:600;color:var(--gp-doux);cursor:pointer;
  background:var(--gp-carte);border:1.5px solid var(--gp-trait);
  border-radius:999px;padding:8px 15px;
}
.gp-bascule input{accent-color:var(--gp-indigo);width:15px;height:15px;cursor:pointer}

/* ═══ le bandeau du composeur ═══
   Les cartes ci-dessous mènent chacune à UN chapitre. Un devoir, lui, en
   traverse plusieurs : le composeur ne se range donc pas parmi elles, il se
   pose au-dessus. Une seule ligne, pleine largeur, avant la liste. */
.gp-composeur{max-width:1180px;margin:0 auto 22px;padding:0 20px}
.gp-composeur a{
  display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff;
  background:var(--gp-alg);border-radius:var(--gp-r);padding:15px 18px;
  box-shadow:var(--gp-o-md);transition:transform .16s,box-shadow .16s;
}
.gp-composeur a:hover{transform:translateY(-2px);box-shadow:var(--gp-o-lg)}
.gp-composeur .gp-comp-ico{font-size:1.7rem;line-height:1;flex:none}
.gp-composeur b{display:block;font-size:1.02rem;font-weight:800}
.gp-composeur span{font-size:.84rem;opacity:.93}
.gp-composeur .gp-comp-fleche{margin-inline-start:auto;font-size:1.3rem;flex:none}

/* 🔴 30/08/2026 — TROIS COMPOSEURS, un par annee (ordre du chef : « ce melange
   est antipedagogique »). Sur la page qui reunit les trois annees, il faut donc
   TROIS cartes ; sur la page d'une annee, il n'y en a qu'une et rien ne change.
   ⚠️ Une colonne sous 720 px : le chef lit sur telephone, et trois cartes cote
   a cote y deviennent trois timbres-poste. */
.gp-composeur-3 .gp-comp-ttl{
  font-size:.86rem;font-weight:700;opacity:.75;margin:0 0 8px;padding-inline-start:2px;
}
.gp-composeur-3 .gp-comp-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:720px){
  .gp-composeur-3 .gp-comp-grille{grid-template-columns:1fr}
}

/* ═══ corps ═══ */
.gp-main{max-width:1180px;margin:0 auto;padding:0 20px 60px}
.gp-niveau{margin-bottom:38px}
.gp-niveau-tete{display:flex;align-items:center;gap:11px;margin:0 0 16px;flex-wrap:wrap}
.gp-niveau-ttl{margin:0;font-size:1.28rem;font-weight:800}
.gp-niveau-badge{
  font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:999px;
  background:var(--gp-alg);color:#fff;
}
.gp-niveau-compte{
  font-size:.78rem;color:var(--gp-doux);font-weight:700;
  margin-inline-start:auto;background:var(--gp-carte);
  border:1px solid var(--gp-trait);border-radius:999px;padding:3px 11px;
}

/* la carte large : préparation au brevet */
.gp-avant{
  display:flex;align-items:center;gap:14px;
  background:var(--gp-stat);color:#fff;text-decoration:none;
  border-radius:var(--gp-r);padding:16px 18px;margin-bottom:16px;
  box-shadow:var(--gp-o-md);transition:transform .18s,box-shadow .18s;
}
.gp-avant:hover{transform:translateY(-2px);box-shadow:var(--gp-o-lg)}
.gp-avant-ico{font-size:1.9rem;line-height:1}
.gp-avant-txt{display:flex;flex-direction:column;min-width:0}
.gp-avant-ttl{font-weight:800;font-size:1.06rem}
.gp-avant-sub{font-size:.83rem;opacity:.93}
.gp-avant-fleche{margin-inline-start:auto;font-size:1.5rem;opacity:.85}

/* bloc de domaine */
.gp-domaine{
  background:var(--gp-carte);border:1px solid var(--gp-trait);
  border-radius:var(--gp-r);padding:16px;margin-bottom:14px;
  box-shadow:var(--gp-o-sm);
}
.gp-domaine-tete{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.gp-domaine-ico{
  width:36px;height:36px;border-radius:var(--gp-r-sm);
  display:grid;place-items:center;font-size:1.15rem;color:#fff;flex:none;
}
.gp-alg .gp-domaine-ico{background:var(--gp-alg)}
.gp-geo .gp-domaine-ico{background:var(--gp-geo)}
.gp-stat .gp-domaine-ico{background:var(--gp-stat)}
.gp-domaine-ttl{font-weight:800;font-size:1rem}
.gp-domaine-compte{
  margin-inline-start:auto;font-size:.76rem;font-weight:700;color:var(--gp-doux);
}

.gp-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.gp-carte{
  display:flex;align-items:center;gap:11px;
  background:var(--gp-bg);border:1.5px solid var(--gp-trait);
  border-radius:var(--gp-r-sm);padding:11px 13px;
  text-decoration:none;color:var(--gp-txt);
  transition:transform .16s,box-shadow .16s,border-color .16s;
}
a.gp-carte:hover{
  transform:translateY(-2px);border-color:var(--gp-indigo);
  box-shadow:var(--gp-o-md);background:var(--gp-carte);
}
.gp-carte-ico{font-size:1.35rem;line-height:1;flex:none}
.gp-carte-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.gp-carte-nom{font-weight:700;font-size:.94rem;line-height:1.35}
.gp-carte-dos{font-size:.7rem;color:var(--gp-doux);direction:ltr;text-align:right}
.gp-etat{
  font-size:.68rem;font-weight:700;white-space:nowrap;flex:none;
  padding:3px 8px;border-radius:999px;
  background:#eef0f4;color:var(--gp-doux);
}
.gp-etat-ok{background:rgba(102,126,234,.13);color:var(--gp-violet)}
.gp-attente{opacity:.62;cursor:default}

.gp-vide,.gp-erreur{
  text-align:center;color:var(--gp-doux);font-weight:600;
  padding:40px 16px;
}
.gp-erreur{color:#b23a48}

.gp-pied{
  max-width:1180px;margin:0 auto;padding:24px 20px 40px;
  border-top:1px solid var(--gp-trait);
  color:var(--gp-doux);font-size:.82rem;text-align:center;
}
.gp-pied a{color:var(--gp-violet);font-weight:700}

@media (max-width:520px){
  .gp-tete{padding:24px 16px 30px}
  .gp-main,.gp-filtres{padding-inline:14px}
  .gp-grille{grid-template-columns:1fr}
  .gp-chiffre{flex:1 1 30%;min-width:0;padding:8px 12px}
}

/* Ces pages se consultent, elles ne s'impriment pas : à l'impression on ne
   garde que le titre et la liste, sans filtres ni décor coûteux en encre. */
@media print{
  .gp-filtres,.gp-pied{display:none}
  .gp-tete{background:none;color:#000;box-shadow:none;border-radius:0;padding:0 0 12px}
  .gp-domaine,.gp-carte{box-shadow:none;border-color:#bbb}
  .gp-avant{background:none;color:#000;border:1px solid #bbb;box-shadow:none}
}