/* ==========================================================================
   Section Forfaits
   1. Trois colonnes comparables séparées par des filets fins, structure
      identique (les rangées sont alignées entre colonnes par sous-grille).
      Le forfait choisi porte un filet brun en haut de sa colonne et son
      bouton devient principal (fond brun, texte blanc).
   2. Aperçu du forfait choisi, sur toute la largeur du contenu (1152 px au
      plus) : page Accueil complète de 760 px avec sa légende à droite,
      quatre aperçus en 3 + 1 et six aperçus en 3 x 2 (cadres de 368 px ;
      deux par rangée sous 1000 px), une colonne à hauteur de contenu sous
      680 px.
      Rien n'est affiché tant qu'aucun forfait n'est choisi.
   3. Résumé de l'offre à gauche, demande de démarrage à droite ; empilés
      sous 900 px.
   Palette : noir, blanc, un seul brun (--accent). Aucune ombre, aucun
   dégradé, aucune carte. Focus visible : contour blanc 2 px, décalé.
   ========================================================================== */

.forfaits-zone .forfaits-root {
  padding-bottom: clamp(32px, 4vw, 56px);
}
.forfaits-zone .forfaits-root :focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: 2px;
}
.forfaits-zone .forfaits-root .btn:focus-visible { border-radius: 999px; }
.forfaits-zone .forfaits-root .btn { min-height: 46px; }
/* Libellés en petites capitales : une seule taille dans toute la section */
.forfaits-zone .forfaits-root .lab-note { font-size: 12px; }

/* --------------------------------------------------------------------------
   1. Colonnes comparables
   Les trois colonnes ont la même largeur de contenu : l'espace entre elles
   est un espace de grille (et non des rembourrages asymétriques), le
   séparateur vertical est dessiné au milieu de cet espace.
   -------------------------------------------------------------------------- */
.forfaits-zone .forfaits-colonnes {
  --forfaits-col-gap: clamp(20px, 2.6vw, 40px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  column-gap: calc(var(--forfaits-col-gap) * 2);
  border-top: 1px solid var(--line);
}
.forfaits-zone .forfaits-col {
  position: relative;
  display: grid;
  grid-row: span 8;
  grid-template-rows: subgrid;
  align-content: start;
  min-width: 0;
}
.forfaits-zone .forfaits-col + .forfaits-col::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--forfaits-col-gap));
  width: 1px;
  background: var(--line);
  pointer-events: none;
}

/* Filet brun du forfait choisi : le seul repère de sélection coloré.
   Il court d'un séparateur à l'autre (jusqu'au bord pour les colonnes extérieures). */
.forfaits-zone .forfaits-col::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--forfaits-col-gap));
  right: calc(-1 * var(--forfaits-col-gap));
  top: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 300ms var(--ease-out);
}
.forfaits-zone .forfaits-col:first-child::before { left: 0; }
.forfaits-zone .forfaits-col:last-child::before { right: 0; }
.forfaits-zone .forfaits-col[data-choisi="true"]::before { transform: scaleX(1); }

.forfaits-zone .forfaits-nom {
  padding-top: 28px;
  font-family: var(--font-display);
  font-size: clamp(30px, 2.6vw, 38px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
/* État visible du forfait choisi, en blanc (l'espace est réservé dans les trois colonnes) */
.forfaits-zone .forfaits-etat {
  display: block;
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--fg);
  visibility: hidden;
}
.forfaits-zone .forfaits-col[data-choisi="true"] .forfaits-etat { visibility: visible; }
.forfaits-zone .forfaits-besoin {
  padding: 12px 0 24px;
  color: var(--fg);
  font-size: 16px;
  line-height: 1.45;
  max-width: 30ch;
  text-wrap: pretty;
}
.forfaits-zone .forfaits-prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.forfaits-zone .forfaits-prix-montant {
  font-family: var(--font-display);
  font-size: clamp(30px, 2.6vw, 38px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.forfaits-zone .forfaits-prix-etiquette {
  font-size: 14px;
  color: var(--muted);
}

.forfaits-zone .forfaits-champ {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 14px 0 16px;
  border-top: 1px solid var(--line);
}
.forfaits-zone .forfaits-champ-valeur {
  color: var(--fg);
  font-size: 15px;
  line-height: 1.4;
  text-wrap: pretty;
}
.forfaits-zone .forfaits-champ-valeur--attente { color: var(--muted); }
.forfaits-zone .forfaits-pages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  color: var(--fg);
  font-size: 14px;
  line-height: 1.5;
}
/* Virgule de séparation purement visuelle (texte de remplacement vide pour les lecteurs d'écran) */
.forfaits-zone .forfaits-pages li:not(:last-child)::after { content: ",\00a0" / ""; }

.forfaits-zone .forfaits-choisir {
  width: 100%;
  margin: 24px 0 36px;
  align-self: start;
}

.forfaits-zone .forfaits-mention {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   2. Aperçu du forfait choisi
   Le filet sous le titre a exactement la largeur de la grille affichée :
   1152 px (ou la largeur du contenu si elle est moindre) pour les trois
   vues ; 760 px pour la page Présence quand sa légende passe dessous.
   -------------------------------------------------------------------------- */
.forfaits-zone .forfaits-stage {
  --forfaits-head-w: 1152px;
  min-width: 0;
  margin-top: clamp(56px, 7vw, 96px);
}
.forfaits-zone .forfaits-stage-head {
  position: relative;
  display: flex;
  align-items: baseline;
  padding-bottom: 18px;
  margin-bottom: 32px;
}
.forfaits-zone .forfaits-stage-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: var(--forfaits-head-w);
  max-width: 100%;
  background: var(--line);
}
.forfaits-zone .forfaits-stage-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.9vw, 28px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  transition: opacity 200ms var(--ease-in-out), transform 200ms var(--ease-in-out);
}
.forfaits-zone .forfaits-stage-pages { color: var(--muted); font-weight: 500; }
.forfaits-zone .forfaits-stage-title.is-leaving { opacity: 0; transform: translateY(6px); }
.forfaits-zone .forfaits-stage-title.is-entering { animation: forfaits-rise 320ms var(--ease-out) both; }
/* Aucun forfait choisi : une phrase à la place des aperçus */
.forfaits-zone .forfaits-stage-vide {
  max-width: 54ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}
.forfaits-zone .forfaits-stage-vide[hidden] { display: none; }

.forfaits-zone .forfaits-grid {
  display: grid;
  gap: 40px 24px;
  justify-content: start;
}
.forfaits-zone .forfaits-grid--1 { grid-template-columns: minmax(0, 1152px); }
/* Page Présence : cadre de 760 px, légende dans la colonne de droite, alignée en haut */
.forfaits-zone .forfaits-grid--1 .forfaits-preview {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(0, 1fr);
  column-gap: 24px;
  align-items: start;
}
.forfaits-zone .forfaits-grid--4,
.forfaits-zone .forfaits-grid--6 { grid-template-columns: repeat(3, minmax(0, 368px)); }

.forfaits-zone .forfaits-preview {
  margin: 0;
  min-width: 0;
  transition: opacity 200ms var(--ease-in-out), transform 200ms var(--ease-in-out);
}
/* Cadre 4:5 : coupe nette, délimitée par le filet --line (aucun fondu, aucun dégradé).
   Le fond est celui de la maquette fictive elle-même (aucune couleur hors jetons). */
.forfaits-zone .forfaits-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: transparent;
}
.forfaits-zone .forfaits-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  pointer-events: none;
  z-index: 1;
}
/* Page complète (Présence) : hauteur du contenu (plafonnée sur téléphone, comme les autres cadres) */
.forfaits-zone .forfaits-frame--full { aspect-ratio: auto; }
.forfaits-zone .forfaits-frame .bsite-frame { width: 100%; height: 100%; }

/* Les pages remplissent leur cadre : pied de page au bas, plan d'accès qui
   s'étire. Les blocs qui ne tiennent pas entièrement dans un cadre coupé
   sont masqués par js/forfaits.js (classe bs-hors-cadre) ; une image ou un
   plan est d'abord resserré dans sa boîte (bs-reduit) : aucun texte tranché
   à mi-ligne, aucun fondu. */
.forfaits-zone .forfaits-frame .bsite {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.forfaits-zone .forfaits-frame .bs-footer { margin-top: auto; }
.forfaits-zone .forfaits-frame .bs-contact--page {
  flex: 1 0 auto;
  grid-template-rows: auto minmax(0, 1fr);
}
.forfaits-zone .forfaits-frame .bs-hors-cadre { display: none; }

/* Plancher typographique des maquettes : jamais sous 10 px (petits textes)
   ni 12 px (corps), quelle que soit la largeur du cadre. */
.forfaits-zone .forfaits-frame .bsite {
  --bs-small-size: clamp(10px, 1.1cqw, 12px);
  --bs-body-size: clamp(12px, 1.45cqw, 17px);
}
.forfaits-zone .forfaits-frame .bs-inclusions { font-size: clamp(10px, 1.2cqw, 13px); }

.forfaits-zone .forfaits-caption {
  display: grid;
  gap: 4px;
  padding: 14px 2px 0;
}
.forfaits-zone .forfaits-caption-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.forfaits-zone .forfaits-caption-role {
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
  max-width: 44ch;
}
.forfaits-zone .forfaits-grid--1 .forfaits-caption { padding-top: 2px; }
.forfaits-zone .forfaits-grid--1 .forfaits-caption-name { font-size: 18px; }
.forfaits-zone .forfaits-grid--1 .forfaits-caption-role { font-size: 15px; }

.forfaits-zone .forfaits-stage-suite { margin-top: 36px; }

/* Transition entre forfaits */
@keyframes forfaits-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.forfaits-zone .forfaits-view.is-leaving .forfaits-preview { opacity: 0; transform: scale(0.98); }
.forfaits-zone .forfaits-view.is-entering .forfaits-preview {
  animation: forfaits-rise 320ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

/* --------------------------------------------------------------------------
   3. Résumé de l'offre et demande de démarrage
   -------------------------------------------------------------------------- */
.forfaits-zone .forfaits-demande {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  margin-top: clamp(64px, 8vw, 112px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--bar-h) + 16px);
  outline: none;
}
.forfaits-zone .forfaits-resume {
  display: grid;
  align-content: start;
  padding-right: clamp(24px, 3vw, 48px);
}
.forfaits-zone .forfaits-resume-nom {
  margin-top: 12px;
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.forfaits-zone .forfaits-resume-liste { margin: 28px 0 0; }
.forfaits-zone .forfaits-resume-liste > div {
  display: grid;
  gap: 5px;
  padding: 12px 0 14px;
  border-top: 1px solid var(--line);
}
.forfaits-zone .forfaits-resume-valeur {
  margin: 0;
  color: var(--fg);
  font-size: 15px;
  line-height: 1.4;
}
.forfaits-zone .forfaits-resume-valeur--attente { color: var(--muted); }
.forfaits-zone .forfaits-resume-note {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

.forfaits-zone .forfaits-form {
  padding-left: clamp(32px, 4vw, 64px);
  border-left: 1px solid var(--line);
}
.forfaits-zone .forfaits-form-titre {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.forfaits-zone .forfaits-form-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 20px;
  margin-top: 28px;
}
.forfaits-zone .forfaits-form-champ {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.forfaits-zone .forfaits-form-champ--large { grid-column: 1 / -1; }
.forfaits-zone .forfaits-form-champ label {
  color: var(--fg);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}
.forfaits-zone .forfaits-form-req { color: var(--muted); font-weight: 400; }
.forfaits-zone .forfaits-form-saisie {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.4);   /* gris neutre, 3,7:1 sur le noir (WCAG 1.4.11) */
  border-radius: 8px;
  background-color: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 16px;
  line-height: 1.2;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.forfaits-zone .forfaits-form-saisie::placeholder { color: var(--muted); }
.forfaits-zone textarea.forfaits-form-saisie {
  height: auto;
  min-height: 112px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}
.forfaits-zone .forfaits-form-saisie:hover { border-color: var(--fg); }
.forfaits-zone .forfaits-form-saisie:focus-visible { outline-offset: 2px; border-radius: 8px; }
.forfaits-zone select.forfaits-form-saisie {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  cursor: pointer;
}
.forfaits-zone select.forfaits-form-saisie option { color: var(--fg); background: var(--bg); }

.forfaits-zone .forfaits-form-actions {
  display: grid;
  gap: 16px;
  justify-items: start;
  margin-top: 30px;
}
.forfaits-zone .forfaits-form-note {
  max-width: 54ch;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.forfaits-zone .forfaits-form-note a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.forfaits-zone .forfaits-form-note a:hover { text-decoration-color: var(--fg); }

/* Après « Préparer ma demande » : repère neutre si le logiciel de courriel ne
   s'ouvre pas (texte à copier), sans aucune confirmation d'envoi. */
.forfaits-zone .forfaits-form-secours {
  display: grid;
  gap: 12px;
  justify-self: stretch;
  max-width: 60ch;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.forfaits-zone .forfaits-form-secours[hidden] { display: none; }
.forfaits-zone .forfaits-form-secours-texte { color: var(--fg); font-size: 15px; line-height: 1.55; }
.forfaits-zone .forfaits-form-secours-texte a { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); }
.forfaits-zone .forfaits-form-secours-texte a:hover { text-decoration-color: var(--fg); }
.forfaits-zone .forfaits-form-secours label { color: var(--muted); font-size: 14px; }
.forfaits-zone textarea.forfaits-form-copie { min-height: 180px; color: var(--fg); font-size: 14px; }
.forfaits-zone .forfaits-form-secours-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.forfaits-zone .forfaits-form-secours-etat { color: var(--fg); font-size: 14px; }

/* --------------------------------------------------------------------------
   Mouvement réduit : remplacement immédiat, aucune animation
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .forfaits-zone .forfaits-col::before,
  .forfaits-zone .forfaits-stage-title,
  .forfaits-zone .forfaits-preview,
  .forfaits-zone .forfaits-form-saisie,
  .forfaits-zone .forfaits-form-note a { transition: none; }
  .forfaits-zone .forfaits-stage-title.is-entering,
  .forfaits-zone .forfaits-view.is-entering .forfaits-preview { animation: none; }
}

/* --------------------------------------------------------------------------
   Largeurs intermédiaires et mobile
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  /* Deux colonnes dès 1199 px : des cadres de 368 px gardent la composition complète (à trois colonnes, ils tomberaient à 291 px et perdraient plan et services) */
  .forfaits-zone .forfaits-grid--4,
  .forfaits-zone .forfaits-grid--6 { grid-template-columns: repeat(2, minmax(0, 368px)); }
  /* Page Présence : légende sous le cadre quand la colonne de droite serait trop étroite */
  .forfaits-zone .forfaits-grid--1 { grid-template-columns: minmax(0, 760px); }
  .forfaits-zone .forfaits-grid--1 .forfaits-preview { grid-template-columns: minmax(0, 1fr); }
  .forfaits-zone .forfaits-grid--1 .forfaits-caption { padding-top: 18px; }
  .forfaits-zone .forfaits-stage[data-view="presence"] { --forfaits-head-w: 760px; }
}

@media (max-width: 999px) {
  /* Deux cadres par rangée (760 px), filet de même largeur */
  .forfaits-zone .forfaits-grid--4,
  .forfaits-zone .forfaits-grid--6 { grid-template-columns: repeat(2, minmax(0, 368px)); }
  .forfaits-zone .forfaits-stage { --forfaits-head-w: 760px; }
}

@media (max-width: 899px) {
  .forfaits-zone .forfaits-colonnes { grid-template-columns: minmax(0, 1fr); column-gap: 0; border-top: 0; }
  .forfaits-zone .forfaits-col {
    grid-row: auto;
    grid-template-rows: none;
    border-top: 1px solid var(--line);
  }
  .forfaits-zone .forfaits-col + .forfaits-col::after { display: none; }
  .forfaits-zone .forfaits-col::before { left: 0; right: 0; }
  /* Colonnes empilées : rythme vertical resserré */
  .forfaits-zone .forfaits-nom { padding-top: 20px; }
  .forfaits-zone .forfaits-besoin { max-width: 40ch; padding-bottom: 18px; }
  .forfaits-zone .forfaits-prix { padding: 16px 0; }
  .forfaits-zone .forfaits-champ { padding: 10px 0 12px; }
  .forfaits-zone .forfaits-choisir { margin: 20px 0 24px; }
  .forfaits-zone .forfaits-stage { margin-top: 56px; }

  .forfaits-zone .forfaits-demande { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .forfaits-zone .forfaits-resume { padding-right: 0; }
  .forfaits-zone .forfaits-form {
    padding-left: 0;
    padding-top: 32px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 679px) {
  /* Une colonne : chaque cadre prend la hauteur de son contenu, plafonnée ;
     au-delà du plafond, js/forfaits.js masque les blocs qui ne tiennent pas (aucun vide, aucune coupe). */
  .forfaits-zone .forfaits-frame { aspect-ratio: auto; max-height: min(150vw, 640px); }
  .forfaits-zone .forfaits-stage-head { margin-bottom: 24px; padding-bottom: 14px; }
  .forfaits-zone .forfaits-grid { gap: 36px 0; }
  .forfaits-zone .forfaits-grid--1,
  .forfaits-zone .forfaits-grid--4,
  .forfaits-zone .forfaits-grid--6 { grid-template-columns: minmax(0, 1fr); }
  .forfaits-zone .forfaits-stage-suite { margin-top: 28px; }
  .forfaits-zone .forfaits-form-grille { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .forfaits-zone .forfaits-form-actions { justify-items: stretch; }
  .forfaits-zone .forfaits-form-envoyer { width: 100%; }
}

@media (max-width: 399px) {
  .forfaits-zone .forfaits-nom,
  .forfaits-zone .forfaits-prix-montant,
  .forfaits-zone .forfaits-resume-nom { font-size: 28px; }
  .forfaits-zone .forfaits-besoin { font-size: 15px; }
}

/* ---- Onglets de l'aperçu (page Forfaits) ---- */
.forfaits-zone .forfaits-onglets { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.forfaits-zone .forfaits-onglet {
  min-height: 44px; padding: 0 16px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--muted); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.forfaits-zone .forfaits-onglet:hover { color: var(--fg); }
.forfaits-zone .forfaits-onglet[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); }
.forfaits-zone .forfaits-onglet:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; border-radius: 4px; }
.forfaits-zone .forfaits-stage-suite { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.forfaits-zone .forfaits-choisir { margin-top: auto; }

/* ---- Tête de l'aperçu (page Forfaits) ---- */
.forfaits-zone .forfaits-stage-intro { display: grid; gap: 12px; margin: clamp(48px, 7vw, 96px) 0 24px; }
.forfaits-zone .forfaits-stage-h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 3vw, 40px); letter-spacing: -0.03em; line-height: 1.08; max-width: 22ch; text-wrap: balance; }
.forfaits-zone .forfaits-stage-lead { color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 64ch; }
.forfaits-zone .forfaits-resume-suite { margin-top: 18px; }

/* Onglets de l'aperçu sous 360 px : les trois tiennent sur une rangée */
@media (max-width: 359px) {
  .forfaits-zone .forfaits-onglet { padding: 0 10px; font-size: 14px; }
}
/* Bloc de secours : reçoit le focus après l'envoi (aucun contour : il n'est pas interactif) */
.forfaits-zone .forfaits-form-secours:focus { outline: none; }
/* Cadres d'aperçu entre 680 et 999 px : hauteur du contenu, plafonnée comme sous 680 px (les blocs excédentaires sont masqués par fitFrame plutôt que de laisser des vides) */
@media (max-width: 999px) {
  .forfaits-zone .forfaits-frame { aspect-ratio: auto; max-height: min(150vw, 640px); }
}

/* --------------------------------------------------------------------------
   4. Offre de gestion par abonnement : cartes de forfaits et barème des crédits
   (remplace les colonnes comparables et les aperçus par pages ; les règles de
   ces anciens blocs restent plus haut, inutilisées). Palette inchangée : noir,
   blanc, gris neutres, un seul brun pour le badge, le filet et les puces.
   -------------------------------------------------------------------------- */
.forfaits-zone .forfaits-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); align-items: stretch; }
.forfaits-zone .forfaits-carte {
  position: relative; display: grid; gap: 12px; align-content: start; min-width: 0;
  padding: clamp(22px, 2.4vw, 32px); border: 1px solid var(--line-strong); border-radius: 12px;
}
.forfaits-zone .forfaits-carte--recommande { border-color: var(--accent); }
.forfaits-zone .forfaits-carte[data-choisi="true"] { border-color: var(--fg); }
.forfaits-zone .forfaits-badge {
  justify-self: start; display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.forfaits-zone .forfaits-carte .forfaits-nom { font-size: clamp(24px, 2.4vw, 32px); }
.forfaits-zone .forfaits-carte-prix { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.02em; line-height: 1.1; }
.forfaits-zone .forfaits-carte-credits { color: var(--fg); font-size: 16px; font-weight: 500; }
.forfaits-zone .forfaits-carte-liste { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 8px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.forfaits-zone .forfaits-carte-liste li { position: relative; padding-left: 18px; }
.forfaits-zone .forfaits-carte-liste li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.forfaits-zone .forfaits-carte .forfaits-choisir { margin-top: auto; justify-self: start; }
.forfaits-zone .forfaits-bareme-note { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 72ch; }
.forfaits-zone .forfaits-exemples { margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); display: grid; gap: 16px; scroll-margin-top: calc(var(--bar-h) + 16px); }
.forfaits-zone .forfaits-exemples-titre { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3vw, 40px); letter-spacing: -0.03em; line-height: 1.05; max-width: 20ch; text-wrap: balance; }
.forfaits-zone .bareme { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.forfaits-zone .bareme-item { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.forfaits-zone .bareme-libelle { color: var(--fg); font-size: 15px; line-height: 1.45; }
.forfaits-zone .bareme-credits { flex: 0 0 auto; font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; }
.forfaits-zone .forfaits-precision { color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 72ch; }
@media (max-width: 900px) {
  .forfaits-zone .forfaits-cartes { grid-template-columns: 1fr; }
  .forfaits-zone .bareme { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   5. Envoi réel de la demande : état, confirmation, piège antispam, repli
   -------------------------------------------------------------------------- */
.forfaits-zone .forfaits-form-etat { color: var(--fg); font-size: 15px; line-height: 1.5; max-width: 64ch; }
.forfaits-zone .forfaits-form-etat:empty { display: none; }
.forfaits-zone .forfaits-form-etat--erreur { padding: 12px 14px; border: 1px solid var(--accent); border-radius: 8px; }
.forfaits-zone .forfaits-form-envoyer:disabled { opacity: 0.6; cursor: wait; transform: none; }
/* Champ piège : hors écran et hors tabulation, jamais affiché (un robot le remplit, un humain ne le voit pas) */
.forfaits-zone .forfaits-form-piege { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.forfaits-zone .forfaits-form-confirmation { display: grid; gap: 12px; align-content: start; outline: none; }
.forfaits-zone .forfaits-form-confirmation[hidden] { display: none; }
.forfaits-zone .forfaits-form-confirmation-texte { color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 60ch; }
.forfaits-zone .forfaits-form-confirmation-texte strong { color: var(--fg); font-weight: 500; }
.forfaits-zone .forfaits-form-confirmation a { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
.forfaits-zone .forfaits-form-secours .forfaits-form-mailto { justify-self: start; }

/* --------------------------------------------------------------------------
   6. Deux parcours : entrées, sections, conditions, carte de création
   -------------------------------------------------------------------------- */
.parcours { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.parcours-item { min-width: 0; display: grid; }
.parcours-entree { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 2.4vw, 32px); border: 1px solid var(--line-strong); border-radius: 12px; color: var(--fg); text-decoration: none; min-width: 0; transition: border-color var(--dur-fast) var(--ease-out); }
.parcours-entree:hover { border-color: var(--fg); }
.parcours-entree:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
.parcours-titre { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.02em; line-height: 1.1; }
.parcours-texte { color: var(--muted); font-size: 15px; line-height: 1.5; }
.parcours-prix { color: var(--fg); font-size: 15px; font-weight: 500; }
.parcours-action { margin-top: 6px; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--line-strong); }
.parcours-entree:hover .parcours-action { text-decoration-color: var(--fg); }
.forfaits-zone .parcours--forfaits { margin-bottom: clamp(40px, 5vw, 64px); }
.forfaits-zone .forfaits-parcours { display: grid; gap: 16px; padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--bar-h) + 16px); }
.forfaits-zone .forfaits-parcours + .forfaits-parcours { margin-top: clamp(48px, 6vw, 80px); }
.forfaits-zone .forfaits-parcours-titre { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.6vw, 48px); letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; }
.forfaits-zone .forfaits-parcours-lead { color: var(--muted); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; max-width: 60ch; }
.forfaits-zone .forfaits-cartes { margin-top: 8px; }
.forfaits-zone .forfaits-conditions-titre { margin-top: 20px; }
.forfaits-zone .conditions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.forfaits-zone .conditions li { position: relative; padding-left: 18px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.forfaits-zone .conditions li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.forfaits-zone .forfaits-carte--creation { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3vw, 48px); border-color: var(--accent); }
.forfaits-zone .forfaits-creation-tete { display: grid; gap: 12px; align-content: start; }
.forfaits-zone .forfaits-creation-detail { display: grid; gap: 10px; align-content: start; }
.forfaits-zone .forfaits-creation-detail .lab-note { margin-top: 8px; }
.forfaits-zone .forfaits-liste-sobre { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.forfaits-zone .forfaits-liste-sobre li { position: relative; padding-left: 14px; }
.forfaits-zone .forfaits-liste-sobre li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); }
/* Formulaire : situation (deux options) */
.forfaits-zone .forfaits-form-situation { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 10px; }
.forfaits-zone .forfaits-form-situation legend { padding: 0; margin-bottom: 4px; font-size: 14px; font-weight: 500; }
.forfaits-zone .forfaits-form-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.forfaits-zone .forfaits-form-option { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 8px; cursor: pointer; font-size: 15px; }
.forfaits-zone .forfaits-form-option:has(input:checked) { border-color: var(--accent); }
.forfaits-zone .forfaits-form-option input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.forfaits-zone .forfaits-form-option:has(input:focus-visible) { outline: 2px solid var(--fg); outline-offset: 2px; }
.forfaits-zone .forfaits-form-champ[hidden] { display: none; }
@media (max-width: 900px) {
  .parcours, .forfaits-zone .conditions, .forfaits-zone .forfaits-carte--creation { grid-template-columns: 1fr; }
}
@media (max-width: 400px) { .forfaits-zone .forfaits-form-choix { grid-template-columns: 1fr; } }