/* ============================================================
   instanta — les blocs propres à chaque page du site public
   ============================================================
   ⚑ SORTIS DE `vitrine.css` POUR LA LIMITE DE 300 LIGNES du dépôt — la feuille
   réunie en faisait 551. Mais la couture n'est pas arbitraire : `vitrine.css`
   porte ce que TOUTES les pages emploient (en-tête, boutons, bandes, grilles,
   cartes, pied), et ce fichier ce qu'une page emploie SEULE :

     · `.secteur` et `.champs` — la fiche d'un métier, dans « Pour qui » ;
     · `.etape` — une étape et son schéma, dans « Comment ça marche » ;
     · `.offre` et `.tableau` — les trois formules et le prix par format,
       dans « Offres ».

   Le jour où l'une de ces pages change de forme, on sait où regarder — et on
   ne relit pas le socle du site pour modifier une seule page.

   ⚑ MÊME RÈGLE : aucune couleur en dur, uniquement les alias de `vitrine.css`.
   ============================================================ */

/* ── « Pour qui » : un métier, ses champs ───────────────────────────── */

.secteur {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  padding: 36px 0;
  border-bottom: 1px solid var(--v-bordure);
  align-items: start;
}
.secteur:last-of-type { border-bottom: 0; }
.secteur > div > p { margin-top: 12px; color: var(--v-texte-2); }

.champs {
  background: var(--v-surface);
  border: 1px solid var(--v-bordure);
  border-radius: var(--rayon-bulle);
  padding: 8px 16px;
  box-shadow: var(--v-ombre);
}

.champ {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--v-bordure);
  font-size: var(--taille-texte);
}
.champ:last-child { border-bottom: 0; }
.champ b { font-weight: var(--graisse-moyenne); color: var(--v-texte-2); }
.champ span { font-variant-numeric: tabular-nums; }

/* ── « Comment ça marche » : une étape, son visuel ──────────────────── */

.etape {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 44px 0;
  align-items: center;
  border-bottom: 1px solid var(--v-bordure);
}
.etape:last-of-type { border-bottom: 0; }
.etape h3 { margin-top: 14px; font-size: 21px; }
.etape > div > p { margin-top: 12px; color: var(--v-texte-2); }
.etape.inverse > .visuel { order: -1; }

/* ── Les offres ─────────────────────────────────────────────────────── */

/* ⚑ TROIS CARTES EXACTEMENT DE LA MÊME TAILLE (Jibril, 28/09/2026).
   `align-items: start` laissait chaque carte à sa hauteur de contenu : la plus
   courte finissait 40 px plus haut, et les trois boutons à trois niveaux
   différents. `stretch` les aligne sur la plus haute, et la liste de puces
   pousse le bouton en bas (`margin-top: auto`). Aucune carte n'est donc mise en
   avant par sa taille : la comparaison porte sur ce qui est écrit. */
.offres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }

.offre {
  position: relative;
  background: var(--v-surface);
  border: 1px solid var(--v-bordure);
  border-radius: var(--rayon-bulle);
  padding: 24px;
  box-shadow: var(--v-ombre);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.offre.mise { border-color: var(--v-principale); box-shadow: var(--v-ombre-haute); }

/* La regle `.etiquette` (le badge « Le plus courant ») a ete RETIREE le 23/09
   avec le badge lui-meme : rien ne mesurait cette affirmation. `.offre.mise`
   reste, parce qu'une mise en avant visuelle n'affirme aucun fait. */

.pour { color: var(--v-texte-2); font-size: var(--taille-texte); min-height: 3em; }
.prix { display: flex; align-items: baseline; gap: 8px; min-height: 40px; }
/* ⚑ « SUR DEVIS » A LA MÊME TAILLE QUE LES PRIX. Il était rendu par le même
   `b` de 33 px : le mot, plus long qu'un montant, paraissait deux fois plus
   gros et tirait l'œil vers la carte la plus chère. Même règle pour tous. */
.prix b { font-size: 33px; font-weight: var(--graisse-forte); letter-spacing: -0.03em; }
.prix span { color: var(--v-texte-2); font-size: var(--taille-texte); }
.prix-note { color: var(--v-texte-2); font-size: var(--taille-petit); margin-top: -8px;
  min-height: 2.4em; }
.offre ul { display: grid; gap: 9px; margin: 0; }
.offre li { display: flex; gap: 10px; font-size: var(--taille-texte); }
/* Le bouton descend en bas de SA carte : les trois s'alignent, quelle que soit
   la longueur des puces au-dessus. */
.offre .btn { margin-top: auto; }

.tableau {
  width: 100%;
  margin-top: 18px;
  border-collapse: collapse;
  background: var(--v-surface);
  border: 1px solid var(--v-bordure);
  border-radius: var(--rayon-bulle);
  overflow: hidden;
  font-size: var(--taille-texte);
}
.tableau th, .tableau td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--v-bordure); }
.tableau thead th { background: var(--v-creux); font-weight: var(--graisse-moyenne); color: var(--v-texte-2); }
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau td { font-variant-numeric: tabular-nums; }

/* ── Ce qui remplace les `style="…"` de la maquette ─────────────────────
   ⚑ LA MAQUETTE POSAIT SES ESPACEMENTS EN LIGNE : `style="margin-top:28px"`,
   `style="padding:56px 0 44px"`, `style="width:78%"`. Recopiés, ils auraient
   été invisibles à toute relecture de la charte et impossibles à ajuster d'un
   endroit. Chacun a donc une classe, nommée par son rôle. */

.suite { margin-top: 28px; }
.apres-numero { margin-top: 14px; }
.bande-titre { padding: 56px 0 44px; }
.bande-serree { padding-top: 24px; }
.titre-tableau { margin-top: 52px; font-size: 19px; }

/* Une mention de service : plus discrète que le corps, jamais une alerte. */
.mention {
  margin-top: 24px;
  color: var(--v-texte-2);
  font-size: var(--taille-petit);
}
.mention a { color: var(--v-principale); }

/* Le prix en attente de lecture : un tiret cadratin plutôt qu'un vide, pour que
   la carte ne saute pas de hauteur quand le vrai prix arrive. */
.attente { color: var(--v-texte-2); font-weight: var(--graisse-normale); }

.tableau caption { caption-side: bottom; text-align: left; margin-top: 10px; }

/* ============================================================
   LES ÉCRANS ÉTROITS — chaque bloc emporte SA bascule
   ============================================================
   ⚑ ET C'EST UN DÉFAUT QUE MON PROPRE DÉCOUPAGE A CRÉÉ. Ces trois grilles
   étaient repliées en une colonne par la requête média de `vitrine.css`. En
   sortant `.secteur`, `.etape` et `.offres` dans ce fichier — chargé APRÈS —
   leurs règles de base (`1.15fr 0.85fr`, `1fr 1fr`, `repeat(3, 1fr)`) se sont
   remises à gagner : même spécificité, déclarée plus tard.
   Résultat mesuré en émulation d'appareil : « comment ça marche » débordait de
   59 px et « offres » de 139 px sur un iPhone 14, la troisième formule
   entièrement hors écran.
   ⚠️ LA LEÇON : découper une feuille par sujet oblige à déplacer AUSSI les
   requêtes média du sujet. Une règle responsive laissée derrière ne proteste
   pas — elle est simplement écrasée, et seul un vrai téléphone le montre.
   ============================================================ */

@media (max-width: 900px) {
  .secteur, .etape { grid-template-columns: 1fr; gap: 28px; }
  /* Le visuel repasse SOUS le texte, même dans les étapes inversées : sur un
     téléphone, on lit d'abord, on regarde ensuite. */
  .etape.inverse > .visuel { order: 0; }
  /* ⚑ MÊME HAUTEUR AUSSI UNE FOIS EMPILÉES. `align-items: stretch` ne suffit
     pas quand chaque carte est sa propre rangée : il faut des rangées égales.
     Jibril a demandé trois cartes identiques — pas seulement côte à côte. */
  .offres { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
  /* ⚑ LA MARGE DE `.offre.mise` EST RETIRÉE (28/09/2026). Elle existait pour
     que l'étiquette « Le plus courant » ne chevauche pas la carte du dessus —
     or cette étiquette a été retirée le 23/09, faute de rien pour la mesurer.
     La marge restait : elle rendait la carte du milieu 12 px plus courte que
     les deux autres, c'est-à-dire exactement ce que Jibril ne veut plus. */

  /* ⚑ LE TABLEAU DES FORMATS DÉFILE DANS SON CADRE, il ne pousse pas la page.
     Trois colonnes de prix ne tiennent pas dans 390 px, et les empiler en
     cartes perdrait la comparaison — qui est tout l'intérêt d'un tableau de
     tarifs. Le cadre garde sa largeur, le contenu glisse à l'intérieur. */
  .cadre-tableau { overflow-x: auto; }
  .tableau { min-width: 460px; }
}