/* =====================================================
   CONSEIL SNDGK — Corrections de composants partagés

   Fichier AUTONOME : ne modifie ni premium.css ni premium-themes.css.
   À charger APRÈS eux.
===================================================== */


/* ---------- 1. Grille de quatre cartes ----------

   premium.css pose `repeat(auto-fit, minmax(280px, 1fr))`. Avec QUATRE cartes
   cela resout a 3 colonnes vers 1280 px : trois cartes alignees, la quatrieme
   seule sur sa ligne. Le modificateur ci-dessous impose des comptes qui
   tombent juste — jamais 3.

   .card-grid reste inchangee pour les pages qui l'utilisent avec un autre
   nombre de cartes (services.html en affiche six, ou 3 colonnes conviennent). */

.card-grid--quatre { grid-template-columns: 1fr; }

@media (min-width: 620px) {
  .card-grid--quatre { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .card-grid--quatre { grid-template-columns: repeat(4, 1fr); }
}


/* ---------- 2. Filet reliant les etapes numerotees ----------

   Les etapes sont une sequence reelle — on les fait dans l'ordre. Le filet
   encode cette progression au lieu de la laisser deviner.

   Il est porte par .steps et NON par chaque .step : premium.css anime
   `padding-left` au survol d'une etape, et un filet interne se decalerait
   avec elle. Pose sur le parent, il reste fixe et le contenu glisse contre
   lui — la structure tient, le mouvement se lit.

   La liste est decalee vers la droite pour lui laisser sa gouttiere. */

.steps {
  position: relative;
  padding-left: clamp(1.1rem, 2.5vw, 1.8rem);
}

.steps::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
  pointer-events: none;
}

/* Sous 620 px la gouttiere mangerait une largeur de texte deja comptee. */
@media (max-width: 619px) {
  .steps { padding-left: 0; }
  .steps::before { display: none; }
}


/* ---------- 3. Titre de section ----------

   .display ne porte AUCUNE taille hors de .sec-head, .closing et .page-hero :
   un <h2 class="display"> nu retombe sur le 1.5em par defaut du navigateur,
   soit 24 px. Resultat, sur //03 de l'accueil le titre de section (24 px)
   etait PLUS PETIT que les titres d'etape qu'il chapeaute (32 px).

   La valeur reprise ici est celle que le design system definit deja pour
   `.sec-head h2` — aucune taille inventee. La classe est explicite pour ne
   toucher QUE les titres concernes : une regle sur `h2.display` aurait aussi
   frappe .closing h2, .case-card h2 et .legal h2, qui ont leur propre taille. */

.titre-section {
  font-size: clamp(2rem, 5vw, 3.6rem);
}