/* =================================================================
   L'accord du participe passé — feuille de style
   Mise en page sobre, inspirée d'un manuel scolaire.
   Une seule couleur d'accent, trois couleurs de repérage
   pour les trois cas d'accord (sans auxiliaire / être / avoir).
   ================================================================= */

:root {
  --papier:        #fbfaf7;
  --papier-creux:  #f3f1ea;
  --encre:         #22201d;
  --encre-douce:   #5c5851;
  --filet:         #ddd8cc;
  --filet-fort:    #c6bfaf;

  --accent:        #8c2f28;
  --accent-clair:  #f4eae7;

  --cas-seul:      #4a6b33;
  --cas-etre:      #8c2f28;
  --cas-avoir:     #24506e;

  --juste:         #3f6b3a;
  --juste-fond:    #eef3ea;
  --faux:          #9d3128;
  --faux-fond:     #f8ecea;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --largeur: 47rem;
  --base: 17px;
}

/* ----------------------------- base ----------------------------- */

* { box-sizing: border-box; }

html {
  font-size: var(--base);
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--serif);
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

h2, h3, h4 { font-family: var(--serif); line-height: 1.25; }

p { margin: 0 0 1em; }

em { font-style: italic; }

a { color: var(--accent); }

u { text-decoration-thickness: 1px; text-underline-offset: 3px; }

.lien-evitement {
  position: absolute;
  left: -9999px;
}
.lien-evitement:focus {
  left: 0.5rem; top: 0.5rem;
  z-index: 50;
  background: var(--papier);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--accent);
}

/* --------------------------- bandeau ---------------------------- */

.bandeau {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 250, 247, 0.96);
  border-bottom: 1px solid var(--filet);
  backdrop-filter: blur(6px);
}

.bandeau__contenu {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0.7rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
}

.bandeau__titre { margin: 0; display: flex; flex-direction: column; }

.bandeau__discipline {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.bandeau__sujet { font-size: 1.05rem; font-weight: 600; }

.sommaire { flex: 1 1 22rem; overflow-x: auto; }

.sommaire ul {
  display: flex;
  gap: 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sommaire a {
  font-family: var(--sans);
  font-size: 0.83rem;
  color: var(--encre-douce);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.sommaire a:hover { color: var(--encre); }

.sommaire a.est-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.bandeau__outils { display: flex; gap: 0.5rem; align-items: center; }
.bandeau__outils .bouton { text-decoration: none; }

.progression { height: 2px; background: var(--filet); }
.progression span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.1s linear;
}

/* --------------------------- sections --------------------------- */

main { max-width: var(--largeur); margin: 0 auto; padding: 0 1.25rem; }

.section {
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--filet);
}

.section:last-of-type { border-bottom: none; }

.section__rang {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.35rem;
}

.section h2 {
  font-size: 1.85rem;
  font-weight: 600;
  margin: 0 0 1.2rem;
}

.section h3 { font-size: 1.2rem; margin: 2rem 0 0.6rem; }
.section h4 { font-size: 1rem; margin: 1.4rem 0 0.4rem; }

.chapeau { font-size: 1.1rem; color: var(--encre); }

.note {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--encre-douce);
  border-top: 1px solid var(--filet);
  padding-top: 0.9rem;
}

.exemple { font-style: italic; }
.commentaire {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--encre-douce);
  margin-bottom: 1em;
}

.liste-objectifs, .exemples-liste, .liste-signaux { padding-left: 1.2rem; }
.liste-objectifs li, .liste-signaux li { margin-bottom: 0.4rem; }
.exemples-liste { list-style: none; padding-left: 0; }
.exemples-liste li {
  font-style: italic;
  padding: 0.18rem 0 0.18rem 1rem;
  border-left: 2px solid var(--filet);
  margin-bottom: 0.2rem;
}

/* --------------------------- encadrés --------------------------- */

.encadre {
  border-left: 3px solid var(--filet-fort);
  background: var(--papier-creux);
  padding: 1rem 1.2rem 0.4rem;
  margin: 1.5rem 0;
}
.encadre h3, .encadre h4 { margin: 0 0 0.5rem; font-size: 1rem; }
.encadre--remarque { border-left-color: var(--accent); background: var(--accent-clair); }
.encadre--astuce { border-left-color: var(--cas-seul); background: var(--juste-fond); }
.encadre--cle { border-left-color: var(--filet-fort); }

/* --------------------------- tableau ---------------------------- */

.tableau {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.98rem;
}
.tableau caption {
  text-align: left;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-douce);
  padding-bottom: 0.5rem;
}
.tableau th, .tableau td {
  text-align: left;
  padding: 0.45rem 0.6rem 0.45rem 0;
  border-bottom: 1px solid var(--filet);
}
.tableau thead th {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--filet-fort);
}
.tableau tbody tr:last-child td { border-bottom: 1px solid var(--filet-fort); }

/* ---------------------------- règles ---------------------------- */

.regle {
  margin: 2.5rem 0;
  padding-left: 1.3rem;
  border-left: 3px solid var(--filet-fort);
}
.regle--seul  { border-left-color: var(--cas-seul); }
.regle--etre  { border-left-color: var(--cas-etre); }
.regle--avoir { border-left-color: var(--cas-avoir); }

.regle__cas {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 0.2rem;
}
.regle--seul  .regle__cas { color: var(--cas-seul); }
.regle--etre  .regle__cas { color: var(--cas-etre); }
.regle--avoir .regle__cas { color: var(--cas-avoir); }

.regle h3 { margin-top: 0; }

.regle__enonce {
  font-size: 1.08rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  margin-bottom: 1rem;
}

.regle__quand {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--encre-douce);
  margin-top: 1.2rem;
}

.approfondir {
  margin: 1.2rem 0;
  font-size: 0.95rem;
  border-top: 1px solid var(--filet);
  padding-top: 0.6rem;
}
.approfondir summary {
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--accent);
}
.approfondir[open] summary { margin-bottom: 0.6rem; }

/* ------------------------- comparaison -------------------------- */

.comparaison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.comparaison__bloc { padding-top: 0.5rem; border-top: 2px solid var(--filet-fort); }
.comparaison__bloc--non { border-top-color: var(--faux); }
.comparaison__bloc--oui { border-top-color: var(--juste); }
.comparaison__etiquette {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.comparaison__bloc--non .comparaison__etiquette { color: var(--faux); }
.comparaison__bloc--oui .comparaison__etiquette { color: var(--juste); }
.comparaison .exemple { margin-bottom: 0.2rem; }

/* ---------------------------- étapes ---------------------------- */

.etapes { counter-reset: etape; list-style: none; padding: 0; margin: 2rem 0; }
.etapes > li {
  counter-increment: etape;
  position: relative;
  padding: 0 0 1.4rem 3rem;
  border-left: 1px solid var(--filet);
  margin-left: 0.9rem;
}
.etapes > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.etapes > li::before {
  content: counter(etape);
  position: absolute;
  left: -0.9rem;
  top: 0;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--papier);
  border: 1px solid var(--filet-fort);
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.etapes h3 { margin: 0.1rem 0 0.5rem; font-size: 1.1rem; }
.etapes p { margin-bottom: 0.4rem; }

/* ---------------------------- schéma ---------------------------- */

.schema { margin: 2.5rem 0 0; }
.schema img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--filet);
}
.schema figcaption {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--encre-douce);
  margin-top: 0.5rem;
}

/* ---------------------------- pièges ---------------------------- */

.piege { margin: 2rem 0; }
.piege h3 { margin-bottom: 0.5rem; }
.piege p { margin-bottom: 0.3rem; }
.piege p:last-child {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--encre-douce);
  margin-top: 0.5rem;
}
.faux, .juste { font-style: italic; padding-left: 1.5rem; position: relative; }
.faux::before {
  content: "\00d7";
  position: absolute; left: 0.25rem;
  color: var(--faux); font-style: normal; font-weight: 700;
}
.juste::before {
  content: "\2713";
  position: absolute; left: 0.25rem;
  color: var(--juste); font-style: normal; font-weight: 700;
}
.faux s { color: var(--faux); }

.trou {
  display: inline-block;
  min-width: 3.5rem;
  border-bottom: 2px solid var(--accent);
  text-align: center;
  color: var(--encre-douce);
}

/* ---------------------------- boutons --------------------------- */

.bouton {
  font-family: var(--sans);
  font-size: 0.87rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bouton:hover { background: #75261f; border-color: #75261f; }

.bouton--discret {
  background: transparent;
  color: var(--encre-douce);
  border-color: var(--filet-fort);
}
.bouton--discret:hover {
  background: var(--papier-creux);
  color: var(--encre);
  border-color: var(--encre-douce);
}
.bouton[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.bouton:disabled { opacity: 0.45; cursor: default; }
.bouton:disabled:hover { background: transparent; color: var(--encre-douce); border-color: var(--filet-fort); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --------------------------- exemples --------------------------- */

.liste-exemples { margin-top: 1.5rem; }

.exemple-guide {
  border-top: 1px solid var(--filet);
  padding: 1.3rem 0;
}
.exemple-guide__numero {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 0 0 0.3rem;
}
.exemple-guide__phrase {
  font-size: 1.15rem;
  margin-bottom: 0.9rem;
}
.exemple-guide__verbe {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--encre-douce);
}
.solution {
  margin-top: 1.1rem;
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 3px solid var(--filet-fort);
}
.solution h4 {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 1rem 0 0.3rem;
}
.solution h4:first-child { margin-top: 0.6rem; }
.solution ol { padding-left: 1.1rem; margin: 0 0 0.5rem; }
.solution li { margin-bottom: 0.3rem; }
.solution__resultat {
  font-size: 1.1rem;
  font-style: italic;
  padding-top: 0.3rem;
}

/* --------------------------- exercices -------------------------- */

.niveaux {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 1.5rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--filet);
}
.niveau {
  font-family: var(--sans);
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
  background: transparent;
  border: 1px solid var(--filet-fort);
  border-radius: 2px;
  color: var(--encre-douce);
  cursor: pointer;
  transition: all 0.15s;
}
.niveau:hover { background: var(--papier-creux); color: var(--encre); }
.niveau.est-actif {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--papier);
}
.bouton--melanger { margin-left: auto; }

.exercice__entete {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: 0.6rem;
}
.exercice__consigne { font-size: 1.2rem; margin-bottom: 1.1rem; }

.propositions { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.2rem; }
.proposition {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--filet);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.proposition:hover { border-color: var(--filet-fort); background: var(--papier-creux); }
.proposition input { margin: 0; accent-color: var(--accent); }
.proposition.est-choisie { border-color: var(--encre-douce); background: var(--papier-creux); }
.proposition.est-juste { border-color: var(--juste); background: var(--juste-fond); }
.proposition.est-fausse { border-color: var(--faux); background: var(--faux-fond); }
.proposition--bloquee { cursor: default; }
.proposition--bloquee:hover { background: none; border-color: var(--filet); }
.proposition.est-juste:hover { border-color: var(--juste); background: var(--juste-fond); }
.proposition.est-fausse:hover { border-color: var(--faux); background: var(--faux-fond); }

.champ-saisie {
  font-family: var(--serif);
  font-size: 1.05rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--filet-fort);
  border-radius: 2px;
  background: #fff;
  width: 14rem;
  max-width: 100%;
  margin-bottom: 1.2rem;
}
.champ-saisie:focus { border-color: var(--accent); outline: none; }

.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

.correction {
  margin: 0 0 1.3rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--filet-fort);
  background: var(--papier-creux);
}
.correction--juste { border-left-color: var(--juste); background: var(--juste-fond); }
.correction--fausse { border-left-color: var(--faux); background: var(--faux-fond); }
.correction__verdict {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}
.correction--juste .correction__verdict { color: var(--juste); }
.correction--fausse .correction__verdict { color: var(--faux); }
.correction__regle {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-top: 0.6rem;
  margin-bottom: 0;
}

/* ----------------------------- quiz ----------------------------- */

.quiz { margin-top: 1.5rem; }
.quiz__question { border-top: 1px solid var(--filet); padding: 1.3rem 0; }
.quiz__numero {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 0 0 0.3rem;
}
.quiz__enonce { font-size: 1.1rem; margin-bottom: 0.8rem; }
.quiz__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--filet-fort);
  padding-top: 1.2rem;
  margin-top: 0.5rem;
}
.quiz__compteur { font-family: var(--sans); font-size: 0.85rem; color: var(--encre-douce); margin: 0; }

.resultat { margin-top: 2rem; }
.resultat__score {
  font-size: 2.2rem;
  font-weight: 600;
  margin: 0;
}
.resultat__mention { font-family: var(--sans); color: var(--encre-douce); margin-bottom: 1.5rem; }
.resultat__bilan { border-top: 1px solid var(--filet); padding: 1rem 0; }
.resultat__bilan p { margin-bottom: 0.3rem; }
.resultat__ligne {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
}
.resultat__ligne--juste { color: var(--juste); }
.resultat__ligne--fausse { color: var(--faux); }
.resultat__detail { font-size: 0.95rem; }

/* ----------------------------- pied ----------------------------- */

.pied {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  border-top: 1px solid var(--filet);
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--encre-douce);
}

/* ====================== MODE PRÉSENTATION ======================= */

.mode-presentation { font-size: 21px; }
.mode-presentation main { max-width: 58rem; }
.mode-presentation .hors-presentation { display: none !important; }
.mode-presentation .sommaire,
.mode-presentation .bandeau__outils { display: none; }
.mode-presentation .section { padding: 2.5rem 0 7rem; }
.mode-presentation .section h2 { font-size: 2.3rem; }
.mode-presentation .regle__enonce { font-size: 1.3rem; }
.mode-presentation .exemples-liste li,
.mode-presentation .exemple { font-size: 1.1rem; }
.mode-presentation .exemple-guide__phrase,
.mode-presentation .exercice__consigne,
.mode-presentation .quiz__enonce { font-size: 1.35rem; }
.mode-presentation .commentaire { font-size: 0.95rem; }
.mode-presentation body { padding-bottom: 5rem; }

.barre-presentation {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1.25rem;
  background: rgba(251, 250, 247, 0.97);
  border-top: 1px solid var(--filet-fort);
  backdrop-filter: blur(6px);
}
.barre-presentation[hidden] { display: none; }

.barre-presentation__titre {
  flex: 1;
  text-align: center;
  margin: 0;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--encre-douce);
}
#presentation-quitter { margin-left: 0.5rem; }

/* --------------------------- responsive ------------------------- */

/* Sommaire long : il prend sa propre ligne plutôt que d'être tronqué,
   tout en gardant les deux commandes visibles sur ordinateur portable. */
@media (max-width: 1340px) {
  .bandeau__titre { flex: 0 0 auto; }
  .bandeau__outils { margin-left: auto; }
  .sommaire { flex: 1 1 100%; order: 3; }
}

@media (max-width: 880px) {
  :root { --base: 16px; }
  .bandeau__contenu { padding: 0.6rem 1rem; gap: 0.35rem 1rem; }
  .bandeau__discipline { display: none; }
  .bandeau__titre { flex: 1 1 100%; padding-right: 8.5rem; }
  .bandeau__sujet { font-size: 1rem; }
  /* Sur téléphone on ne projette pas : seul le diaporama est utile. */
  .bandeau__outils {
    position: absolute;
    top: 0.55rem;
    right: 1rem;
  }
  .bandeau__outils .bouton { padding: 0.35rem 0.6rem; font-size: 0.78rem; }
  #bouton-presentation { display: none; }
  .sommaire { flex: 1 1 100%; margin: 0 -1rem; padding: 0 1rem; }
  .sommaire ul { gap: 0.9rem; padding-bottom: 0.15rem; }
  /* le sommaire défile horizontalement : le dégradé signale qu'il continue */
  .sommaire {
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
  main { padding: 0 1rem; }
  .section { padding: 2.5rem 0; }
  .section h2 { font-size: 1.55rem; }
  .comparaison { grid-template-columns: 1fr; gap: 1.2rem; }
  .bouton--melanger { margin-left: 0; }
  .actions .bouton { flex: 1 1 auto; }
  .champ-saisie { width: 100%; }
  .etapes > li { padding-left: 2.3rem; }
  html { scroll-padding-top: 7.5rem; }
  .barre-presentation { gap: 0.4rem; padding: 0.6rem 0.8rem; }
  .barre-presentation__titre { font-size: 0.8rem; }
  .mode-presentation { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

@media print {
  .bandeau, .barre-presentation, .actions, .niveaux { display: none; }
  .section { page-break-inside: avoid; border-bottom: none; }
}

/* =================================================================
   Page d'accueil — le choix du thème
   ================================================================= */

.accueil__entete {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: clamp(3rem, 9vh, 5.5rem) 1.25rem 0;
}
.accueil__discipline {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.5rem;
}
.accueil__titre {
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 1rem;
}
.accueil__chapeau {
  font-size: 1.1rem;
  color: var(--encre-douce);
  max-width: 38rem;
  margin: 0;
}

.accueil { max-width: var(--largeur); margin: 0 auto; padding: 0 1.25rem; }

/* ---------------------------- thèmes ---------------------------- */

.themes {
  list-style: none;
  margin: clamp(2.5rem, 7vh, 4rem) 0 0;
  padding: 0;
}

.theme {
  border-top: 1px solid var(--filet-fort);
  padding: 2rem 0 2.5rem;
}

.theme__rang {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 0 0 0.4rem;
}

.theme__titre { font-size: 1.6rem; font-weight: 600; margin: 0 0 0.7rem; }
.theme__titre a {
  color: var(--encre);
  text-decoration: none;
  border-bottom: 2px solid var(--accent-clair);
  transition: border-color 0.15s;
}
.theme__titre a:hover { border-bottom-color: var(--accent); }

.theme__resume { max-width: 40rem; margin-bottom: 1rem; }

.theme__points {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--encre-douce);
}
.theme__points li {
  padding: 0.2rem 0 0.2rem 1rem;
  border-left: 2px solid var(--filet);
  margin-bottom: 0.25rem;
}

.theme__liens { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; }
.theme__liens .bouton { text-decoration: none; }

/* -------------------------- comment faire ----------------------- */

.accueil__usage {
  border-top: 1px solid var(--filet-fort);
  padding-top: 2rem;
  margin-top: 1rem;
}
.accueil__usage h2 { font-size: 1.25rem; margin: 0 0 1.2rem; }

.usage { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.usage__cas h3 { font-size: 1rem; margin: 0 0 0.5rem; }
.usage__cas p { font-size: 0.95rem; margin: 0; }

.page-accueil .pied { margin-top: 2rem; }

/* ================= Liste de référence des verbes ================= */

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: flex-end;
  justify-content: space-between;
  margin: 1.5rem 0;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--filet);
}

.filtres__groupe { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.filtre {
  font-family: var(--sans);
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
  background: transparent;
  border: 1px solid var(--filet-fort);
  border-radius: 2px;
  color: var(--encre-douce);
  cursor: pointer;
  transition: all 0.15s;
}
.filtre:hover { background: var(--papier-creux); color: var(--encre); }
.filtre.est-actif {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--papier);
}

.filtres__recherche { display: flex; flex-direction: column; gap: 0.3rem; }
.filtres__intitule {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--encre-douce);
}
.filtres__recherche input {
  font-family: var(--serif);
  font-size: 0.95rem;
  padding: 0.45rem 0.7rem;
  width: 17rem;
  max-width: 100%;
  border: 1px solid var(--filet-fort);
  border-radius: 2px;
  background: #fff;
  color: var(--encre);
}
.filtres__recherche input:focus { border-color: var(--accent); outline: none; }

.liste-verbes__compte {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--encre-douce);
  margin-bottom: 1.2rem;
}
.liste-verbes__vide {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--encre-douce);
  padding: 1rem 0;
}

.famille { margin-bottom: 2.8rem; }
.famille__titre {
  font-size: 1.15rem;
  margin: 0 0 0.2rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--filet-fort);
}
.famille__chapeau {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--encre-douce);
  margin: 0 0 1.4rem;
}

.groupe-verbes { margin-bottom: 1.8rem; }
.groupe-verbes__titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 0.7rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--filet-fort);
}
.groupe-verbes__compte {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  font-weight: 400;
  color: var(--encre-douce);
}
.groupe--rien .groupe-verbes__titre { color: var(--cas-seul); border-bottom-color: var(--cas-seul); }
.groupe--a .groupe-verbes__titre { color: var(--cas-etre); border-bottom-color: var(--cas-etre); }
.groupe--de .groupe-verbes__titre { color: var(--cas-avoir); border-bottom-color: var(--cas-avoir); }
.groupe--deux .groupe-verbes__titre { color: var(--encre-douce); }

/* La liste est longue : on la présente en colonnes, comme dans un manuel. */
.verbes {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3;
  column-gap: 2rem;
}
.verbe {
  break-inside: avoid;
  padding: 0.2rem 0 0.2rem 0.7rem;
  border-left: 2px solid transparent;
  margin-bottom: 0.15rem;
}
.verbe--cours { border-left-color: var(--accent-clair); }
.verbe__nom { display: block; }
.verbe--cours .verbe__nom { font-weight: 600; }
.verbe__exemple {
  display: block;
  font-style: italic;
  font-size: 0.88rem;
  color: var(--encre-douce);
}
.verbe__note {
  display: block;
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--encre-douce);
}

.filtre--cours { margin-left: 0.5rem; }
.filtre--cours::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent);
  margin-right: 0.45rem;
  vertical-align: baseline;
}

/* Deux colonnes dès que la largeur se réduit : placé après la règle de
   base, sinon la cascade garde trois colonnes. */
@media (max-width: 1100px) {
  .verbes { columns: 2; }
}

.commentaire-en-ligne {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--encre-douce);
  margin-left: 0.5rem;
}

@media (max-width: 880px) {
  .usage { grid-template-columns: 1fr; gap: 1.5rem; }
  .accueil__entete { padding-left: 1rem; padding-right: 1rem; }
  .accueil { padding: 0 1rem; }
  .filtres { flex-direction: column; align-items: stretch; }
  .filtres__recherche input { width: 100%; }
  .verbes { columns: 1; }
  .filtre--cours { margin-left: 0; }
}