/* ==========================================================================
   « Préparer la rentrée » (/preparer-la-rentree). Chargée après pages.css, dont
   la page reprend .page-entete, .page-intro, .cta-final et .cta-actions.

   Ton : une page de LECTURE. Rien n'y clignote, rien n'y est vendu avant la fin.
   Tout bloc de texte courant porte la colonne de lecture (--mesure) ; aucune
   couleur en dur — jetons de base.css uniquement. Mobile d'abord.
   ========================================================================== */

.rentree-entete .page-intro { margin-bottom: 1.5rem; }

/* Le téléchargement de la liste : la seule action du haut de page, et elle ne vend rien. */
.rentree-telecharger {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem;
  margin: 0; max-width: var(--mesure);
}
.rentree-telecharger .icone { width: 1.15rem; height: 1.15rem; flex: none; }
/* `.bouton` ne coupe pas ses lignes, et « Télécharger la liste de préparation (PDF) » demande 362 px : à 390 px
   d'écran, la colonne n'en offre que 350 et le bouton débordait. Le libellé reste entier — il dit ce qu'on
   télécharge et sous quel format — et passe sur deux lignes quand il le faut. */
.rentree-telecharger .bouton { white-space: normal; text-align: left; }

/* ---------- Les sept étapes ---------- */
/* Une liste ordonnée, pas une grille de cartes : on la lit de haut en bas, dans l'ordre.
   Le rang est décoratif (aria-hidden) — la numérotation réelle vient du <ol>. */
.rentree-etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rentree-etape {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0 1rem;
  padding-block: clamp(1.25rem, 3vw, 1.75rem); border-top: 1px solid var(--ligne);
}
.rentree-etape:first-child { border-top: 0; padding-top: 0; }
.rentree-etape-rang {
  margin: 0; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--sable); border-radius: 50%;
  background: var(--sable-clair); color: var(--sable-fonce);
  font-weight: 700; font-size: var(--texte-s); line-height: 1;
}
.rentree-etape-corps h3 { font-size: 1.15rem; margin: 0.2rem 0 0.6rem; }
.rentree-etape-corps > p { color: var(--encre-2); max-width: var(--mesure); }
.rentree-etape-corps > p:last-child { margin-bottom: 0; }

/* « À avoir sous la main » : la liste de ce qu'on pose sur le bureau avant de commencer. */
.rentree-main-titre {
  margin: 1rem 0 0.5rem; font-size: var(--texte-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-3);
}
.rentree-main {
  margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.35rem;
  color: var(--encre-2); font-size: var(--texte-s);
}
.rentree-main li { max-width: var(--mesure); }
.rentree-main li::marker { color: var(--sable); }

.rentree-etape-lien { margin: 1rem 0 0; font-weight: 600; }
.rentree-etape-lien a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Kits ---------- */
.rentree-kits {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
.rentree-kit { display: flex; flex-direction: column; gap: 0.4rem; }
.rentree-kit .carte-titre { margin-bottom: 0; }
.rentree-kit p { margin: 0; max-width: var(--mesure); }

/* ---------- Réassort ---------- */
.rentree-texte { color: var(--encre-2); line-height: 1.7; }
.rentree-texte p { max-width: var(--mesure); margin-bottom: 1.1em; }
.rentree-texte p:last-child { margin-bottom: 0; }

/* Ce n'est pas une phrase mais un relevé : deux ou trois colonnes de noms, qu'on parcourt du regard. */
.rentree-consommables {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; gap: 0.5rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.rentree-consommables li { padding-left: 1rem; position: relative; }
.rentree-consommables li::before {
  content: ""; position: absolute; left: 0; top: 0.65em;
  width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--sable);
}

/* ---------- Encart Cap Avenir ---------- */
.rentree-encart {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--ligne-2); border-left: 4px solid var(--sable);
  border-radius: var(--rayon); background: var(--surface);
}
.rentree-encart h2 { font-size: 1.35rem; margin-bottom: 1rem; }
.rentree-encart .surtitre { margin-bottom: 0.5rem; }

/* ---------- Plus de place ---------- */
@media (min-width: 40rem) {
  .rentree-telecharger { flex-direction: row; align-items: center; gap: 1rem; max-width: none; }
  .rentree-telecharger .texte-s { max-width: 24rem; }
  /* La colonne fait exactement la pastille : une colonne plus large qu'elle décalerait le filet vertical
     que l'œil suit d'une étape à l'autre. */
  .rentree-etape { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0 1.5rem; }
  .rentree-etape-rang { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
}

/* ==========================================================================
   La même liste, remplissable en ligne (/preparer-la-rentree/liste).

   La page est une FEUILLE, pas un formulaire de contact : ce qu'on y cherche,
   c'est de retrouver d'un coup d'œil la ligne qu'on vient de remplir au crayon
   sur le papier. D'où des rubriques encadrées dans l'ordre du PDF, des tableaux
   aux mêmes colonnes, et des cases de saisie qui remplissent leur cellule.
   ========================================================================== */

.rentree-liste-form { display: flex; flex-direction: column; gap: 1.25rem; }
/* Un <fieldset> par rubrique : sa legend EST le titre de la rubrique du PDF. */
.rentree-liste-bloc { border: 1px solid var(--ligne); margin: 0; min-width: 0; }
.rentree-liste-bloc > legend {
  padding: 0 0.5rem; margin-left: -0.5rem;
  font-family: var(--police-titre); font-size: 1.2rem; font-weight: 600; color: var(--accent);
}
.rentree-liste-chapeau { max-width: var(--mesure); margin: 0.25rem 0 1.1rem; }
/* La note du PDF, avec le même filet sable en marge : c'est une remarque, pas une consigne. */
.rentree-liste-note {
  margin: 1rem 0 0; padding-left: 0.9rem; border-left: 3px solid var(--sable);
  color: var(--sable-fonce); font-size: var(--texte-s); font-style: italic; max-width: var(--mesure);
}
.rentree-liste-sous-titre {
  margin: 1.25rem 0 0.6rem; font-weight: 600; font-size: var(--texte-s); color: var(--accent);
}
.rentree-liste-etat { margin: 0 0 1rem; }

/* ---------- Tableaux de saisie ---------- */
.rentree-liste-table { margin-top: 0.5rem; }
.rentree-liste-table .table { font-size: var(--texte-s); }
.rentree-liste-table th, .rentree-liste-table td { padding: 0.35rem 0.5rem; vertical-align: middle; }
.rentree-liste-table thead th { white-space: normal; }
/* Le rang de la ligne : un repère pour recopier la 6e ligne du papier dans la 6e ligne de l'écran. */
.rentree-liste-rang { width: 2rem; text-align: center; color: var(--encre-3); font-weight: 600; }
.rentree-liste-nombre { width: 6.5rem; }
.rentree-liste-article { font-weight: 500; color: var(--encre); min-width: 12rem; }
.rentree-liste-table tbody tr:hover td { background: transparent; }
/* La case remplit sa cellule, sans bordure propre : le quadrillage du tableau suffit à la délimiter, et deux
   cadres imbriqués rendaient la grille illisible dès la deuxième colonne. */
.entree--case {
  width: 100%; min-width: 0; padding: 0.4rem 0.5rem; min-height: 2.5rem;
  border-color: transparent; background: var(--surface-2);
}
.entree--case:hover { border-color: var(--encre-3); }
.entree--nombre { text-align: center; font-variant-numeric: tabular-nums; }
.rentree-liste-table td.a-erreur .entree--case { border-color: var(--erreur); background: var(--erreur-clair); }
.rentree-liste-table .champ-erreur { margin-top: 0.3rem; }
.rentree-liste-table tfoot th, .rentree-liste-table tfoot td {
  border-top: 2px solid var(--ligne-2); border-bottom: 0;
  font-weight: 700; color: var(--accent); text-align: center;
}
.rentree-liste-table tfoot th { text-align: left; }

/* ---------- Notes libres ---------- */
.rentree-liste-lignes { display: flex; flex-direction: column; gap: 0.5rem; }

/* ---------- Le bas de la feuille ---------- */
.rentree-liste-actions { display: flex; flex-direction: column; gap: 1rem; }
.rentree-liste-boutons { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
/* Comme en haut de page : `.bouton` ne coupe pas ses lignes, et « Télécharger ma liste remplie (PDF) »
   demande plus que la largeur d'un téléphone. */
.rentree-liste-boutons .bouton { white-space: normal; text-align: center; }
.rentree-liste-actions .case-texte small { max-width: var(--mesure); }

@media (min-width: 48rem) {
  .rentree-liste-bloc { padding: 1.75rem; }
  .rentree-liste-table th, .rentree-liste-table td { padding: 0.4rem 0.6rem; }
}