/* ==========================================================================
   LES LYANOO — Composants de page. S'appuie sur base.css.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.hero { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.25rem); overflow: hidden; }
.hero__grille {
  display: grid; gap: clamp(1.75rem, 3.5vw, 3rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  /* Alignement en haut, pas centré : quand la colonne de droite (simulateur ou
     formulaire) est bien plus haute que le texte, le centrage creuse un vide
     de plusieurs centaines de pixels au-dessus du titre. */
  align-items: start;
}
@media (max-width: 940px) { .hero__grille { grid-template-columns: 1fr; gap: var(--sp-5); } }

.hero h1 { margin-bottom: var(--sp-4); }
.hero__accroche {
  font-size: var(--t-b); color: var(--ardoise); max-width: 56ch; margin-bottom: var(--sp-5);
}
.hero__accroche strong { color: var(--puy); }
.hero__preuve {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--brume); font-size: var(--t-sm); color: var(--ardoise);
}
.hero__preuve span { display: flex; align-items: center; gap: var(--sp-2); }
.hero__preuve svg { width: 18px; height: 18px; color: var(--gentiane-f); flex: none; }

/* --- Le simulateur : un instrument, pas un encart marketing -------------- */
.simu {
  background: var(--blanc); border: 1px solid var(--brume);
  border-radius: var(--r-xl); box-shadow: var(--ombre-l); overflow: hidden;
}
.simu__entete {
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--brume); background: var(--craie);
}
.simu__entete h2, .simu__entete h3 {
  font-size: var(--t-lg); margin-bottom: var(--sp-1); font-family: var(--texte); font-weight: 700;
}
.simu__entete p { font-size: var(--t-xs); color: var(--ardoise); margin: 0; }
.simu__corps { padding: var(--sp-5); display: grid; gap: var(--sp-4); }

.simu__ligne { display: grid; gap: var(--sp-2); }
.simu__etiquette {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  font-size: var(--t-sm); font-weight: 600; color: var(--puy);
}
.simu__valeur { font-family: var(--data); font-size: var(--t-sm); color: var(--gentiane-f); font-weight: 500; }
.simu__bornes {
  display: flex; justify-content: space-between;
  font-family: var(--data); font-size: var(--t-xs); color: var(--ardoise);
}

/* Fréquence : segments */
.segments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1.5px solid var(--bordure-champ); border-radius: var(--r-m); overflow: hidden; background: var(--blanc); }
.segments label {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 0.65rem 0.4rem; min-height: 44px; font-size: var(--t-sm); font-weight: 600; color: var(--ardoise);
  cursor: pointer; text-align: center; transition: all var(--transition);
  border-right: 1.5px solid var(--bordure-champ);
}
.segments label:last-child { border-right: 0; }
.segments input { position: absolute; opacity: 0; pointer-events: none; }
.segments label:hover { background: var(--craie-2); }
.segments label:has(input:checked), .segments label.segments__label--coche { background: var(--puy); color: var(--blanc); }
.segments label:has(input:focus-visible) { outline: 3px solid var(--gentiane-f); outline-offset: -3px; }

/* Le résultat : la seule zone bruyante de la page */
.simu__resultat {
  background: var(--puy); color: #C7DCD4; padding: var(--sp-5);
  display: grid; gap: var(--sp-4);
}
.simu__phare { text-align: center; }
.simu__phare__label {
  display: block; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .12em; color: #93B3AA; margin-bottom: var(--sp-2); font-family: var(--data);
}
.simu__phare__montant {
  font-family: var(--data); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: clamp(2.1rem, 1.7rem + 1.7vw, 2.9rem); line-height: 1; color: var(--gentiane);
  letter-spacing: -0.03em; display: block;
}
.simu__phare__unite { display: block; font-size: var(--t-sm); color: #93B3AA; margin-top: var(--sp-2); }

.simu__detail { display: grid; gap: var(--sp-2); font-size: var(--t-sm);
  border-top: 1px solid rgba(255,255,255,.14); padding-top: var(--sp-4); }
.simu__detail__ligne { display: flex; justify-content: space-between; gap: var(--sp-4); align-items: baseline; }
.simu__detail__ligne span:last-child {
  font-family: var(--data); font-variant-numeric: tabular-nums; color: var(--blanc); white-space: nowrap;
}
.simu__detail__ligne--fort { font-weight: 700; color: var(--blanc); }
.simu__detail__ligne--credit span:last-child { color: var(--gentiane); }

.simu__pied { padding: var(--sp-5); display: grid; gap: var(--sp-3); background: var(--craie); }
.simu__mention { font-size: var(--t-xs); color: var(--ardoise); margin: 0; line-height: 1.5; }

.simu__packs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.simu__packs button {
  font-family: var(--texte); font-size: var(--t-xs); font-weight: 600;
  padding: 0.4rem 0.8rem; min-height: 44px;
  border: 1.5px solid var(--bordure-champ); border-radius: 999px; background: var(--blanc);
  color: var(--ardoise); cursor: pointer; transition: all var(--transition);
}
.simu__packs button:hover { border-color: var(--puy); color: var(--puy); }
.simu__packs button[aria-pressed="true"] { background: var(--puy); border-color: var(--puy); color: var(--blanc); }

/* --- Les 5 engagements — un ensemble nommé, donc numéroté ---------------- */
.engagements { display: grid; gap: 0; border-top: 1px solid var(--brume); }
.engagement {
  display: grid; grid-template-columns: 4.5rem 1fr auto; gap: var(--sp-5);
  align-items: baseline; padding: var(--sp-4) 0; border-bottom: 1px solid var(--brume);
}
.engagement__num {
  font-family: var(--display); font-size: var(--t-2xl); font-weight: 600;
  color: var(--gentiane-f); line-height: 1; font-variant-numeric: lining-nums;
}
.engagement h3 { margin: 0 0 var(--sp-2); font-size: var(--t-xl); }
.engagement p { color: var(--ardoise); font-size: var(--t-sm); margin: 0; max-width: 60ch; }
.engagement__mesure {
  font-family: var(--data); font-size: var(--t-xs); color: var(--puy);
  background: var(--craie-2); border: 1px solid var(--brume);
  padding: 0.3rem 0.7rem; border-radius: 999px; white-space: nowrap;
}
@media (max-width: 780px) {
  .engagement { grid-template-columns: 3rem 1fr; }
  .engagement__mesure { grid-column: 2; justify-self: start; margin-top: var(--sp-2); }
}

/* --- Étapes (séquence réelle : l'ordre porte l'information) -------------- */
.etapes { counter-reset: etape; display: grid; gap: var(--sp-5); }
.etape { position: relative; padding-left: var(--sp-7); }
.etape::before {
  counter-increment: etape; content: counter(etape);
  position: absolute; left: 0; top: 0;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--puy); color: var(--blanc);
  display: grid; place-items: center;
  font-family: var(--data); font-size: var(--t-sm); font-weight: 600;
}
.etape::after {
  content: ""; position: absolute; left: 1.2rem; top: 2.9rem; bottom: -2.4rem;
  width: 1px; background: var(--brume);
}
.etape:last-child::after { display: none; }
.etape h3 { font-size: var(--t-lg); margin-bottom: var(--sp-2); }
.etape p { color: var(--ardoise); font-size: var(--t-sm); margin: 0; }
@media (min-width: 860px) {
  .etapes--ligne { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
  .etapes--ligne .etape { padding-left: 0; padding-top: var(--sp-7); }
  .etapes--ligne .etape::after { left: 2.9rem; top: 1.2rem; right: -2.4rem; bottom: auto; width: auto; height: 1px; }
}

/* --- Prestations --------------------------------------------------------- */
.presta { display: flex; flex-direction: column; text-decoration: none; height: 100%; }
.presta .photo { margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-5);
  border-radius: var(--r-l) var(--r-l) 0 0; border: 0; border-bottom: 1px solid var(--brume); }
.presta__tarif {
  margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--brume);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  font-size: var(--t-sm);
}
.presta__tarif strong { font-family: var(--data); font-size: var(--t-lg); color: var(--puy); }
.presta__tarif em { font-style: normal; color: var(--gentiane-f); font-weight: 600; font-family: var(--data); }

/* --- Communes ------------------------------------------------------------ */
.communes__barre {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center;
  justify-content: space-between; margin-bottom: var(--sp-5);
}
.communes__recherche { position: relative; flex: 1 1 320px; max-width: 420px; }
.communes__recherche svg {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--ardoise); pointer-events: none;
}
.communes__recherche input { padding-left: 3rem; }
.communes__compteur { font-family: var(--data); font-size: var(--t-sm); color: var(--ardoise); }

.communes__liste {
  list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}
.communes__liste li { margin: 0; }
.commune-lien {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); background: var(--blanc);
  border: 1px solid var(--brume); border-radius: var(--r-m);
  text-decoration: none; font-weight: 600; color: var(--puy); font-size: var(--t-sm);
  transition: all var(--transition);
}
.commune-lien:hover { border-color: var(--puy); box-shadow: var(--ombre-s); transform: translateY(-2px); }
.commune-lien span { font-family: var(--data); font-size: var(--t-xs); color: var(--ardoise); font-weight: 400; }

/* --- Avis (exemples de maquette, signalés comme tels) -------------------- */
.avis { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.avis__carte { background: var(--blanc); border: 1px solid var(--brume); border-radius: var(--r-l); padding: var(--sp-5); }
.avis__note { display: flex; gap: 2px; margin-bottom: var(--sp-3); color: var(--gentiane); }
.avis__note svg { width: 18px; height: 18px; }
.avis__carte blockquote {
  margin: 0 0 var(--sp-4); font-family: var(--display); font-size: var(--t-b);
  line-height: 1.5; color: var(--puy);
}
.avis__auteur { font-size: var(--t-sm); color: var(--ardoise); display: flex; align-items: center; gap: var(--sp-3); }
.avis__auteur strong { color: var(--basalte); font-weight: 600; }

/* --- Bandeau d'appel final ---------------------------------------------- */
.appel { position: relative; border-radius: var(--r-xl); padding: var(--sp-7) var(--sp-5); overflow: hidden;
  background: var(--puy); color: #C7DCD4; text-align: center; }
.appel h2 { color: var(--blanc); max-width: 20ch; margin-inline: auto; }
.appel p { max-width: 54ch; margin-inline: auto; margin-bottom: var(--sp-5); color: #B0CAC1; }
.appel .groupe-btn { justify-content: center; }
/* Sur fond sombre (--puy), le bouton « ligne » héritait du texte vert foncé :
   invisible (contraste 1:1). Texte et bordure clairs, hover cohérent. */
.appel .btn--ligne { color: #C7DCD4; border-color: #C7DCD4; }
.appel .btn--ligne:hover { color: var(--blanc); border-color: var(--gentiane); background: rgba(255, 255, 255, .08); }

/* --- Assistant multi-étapes (devis) ------------------------------------- */
/* Jauge de progression fine (une question par écran, style O2/Shiva) plutôt
   qu'une liste d'étapes : reste lisible même quand leur nombre grandit. */
.assistant__progression {
  height: 6px; border-radius: 999px; background: var(--brume); overflow: hidden;
}
.assistant__progression__jauge {
  height: 100%; width: 0; background: var(--puy); border-radius: inherit;
  transition: width .35s ease;
}
@media (prefers-reduced-motion: reduce) { .assistant__progression__jauge { transition: none; } }
.assistant__entete {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-6);
}
.assistant__etape-texte {
  margin: 0; font-size: var(--t-xs); font-family: var(--data);
  color: var(--ardoise); text-transform: uppercase; letter-spacing: .06em;
}
/* Estimation persistante (étape 3 et suivantes) : le prix reste visible
   pendant tout le tunnel au lieu de n'apparaître qu'au récapitulatif. */
.assistant__estimation-fil {
  margin: 0; font-size: var(--t-sm); color: var(--ardoise);
}
.assistant__estimation-fil strong { font-family: var(--data); color: var(--puy); }
.assistant__etape { display: none; }
.assistant__etape.active { display: block; animation: entree .35s ease; }
@keyframes entree { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .assistant__etape.active { animation: none; } }
.assistant__pied { display: flex; gap: var(--sp-4); justify-content: space-between; margin-top: var(--sp-6);
  padding-top: var(--sp-5); border-top: 1px solid var(--brume); }

/* --- Récapitulatif (page de confirmation) -------------------------------- */
.recap { display: grid; gap: 0; margin: 0; }
.recap__ligne {
  display: grid; grid-template-columns: minmax(140px, 30%) 1fr; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--brume); font-size: var(--t-sm);
}
.recap__ligne dt { color: var(--ardoise); margin: 0; }
.recap__ligne dd { margin: 0; font-weight: 600; color: var(--puy); }

/* --- Tableau de tarifs --------------------------------------------------- */
.tableau-enveloppe {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--brume); border-radius: var(--r-l);
  /* Ombres de bord : signalent qu'il reste du contenu à faire défiler. */
  background:
    linear-gradient(to right, var(--blanc) 30%, rgba(255,255,255,0)) left / 40px 100%,
    linear-gradient(to left, var(--blanc) 30%, rgba(255,255,255,0)) right / 40px 100%,
    radial-gradient(farthest-side at 0 50%, rgba(23,64,58,.22), rgba(23,64,58,0)) left / 14px 100%,
    radial-gradient(farthest-side at 100% 50%, rgba(23,64,58,.22), rgba(23,64,58,0)) right / 14px 100%;
  background-repeat: no-repeat;
  background-color: var(--blanc);
  background-attachment: local, local, scroll, scroll;
}
table.tarifs { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 560px; }
table.tarifs th, table.tarifs td { padding: var(--sp-4); text-align: left; border-bottom: 1px solid var(--brume); }
table.tarifs thead th {
  background: var(--craie-2); font-family: var(--data); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .08em; color: var(--ardoise); font-weight: 500;
}
table.tarifs tbody tr:last-child td { border-bottom: 0; }
table.tarifs td.nombre { font-family: var(--data); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
table.tarifs td.accent { color: var(--gentiane-f); font-weight: 600; }
table.tarifs tbody tr:hover { background: var(--craie); }
/* Les lignes du tableau doivent laisser les ombres de défilement visibles. */
table.tarifs { background: transparent; }
table.tarifs thead th { background: rgba(240, 243, 241, .85); }
table.tarifs tbody tr:hover { background: rgba(240, 243, 241, .6); }
table.tarifs .th-court { display: none; }
@media (max-width: 640px) {
  table.tarifs { min-width: 480px; }
  table.tarifs th, table.tarifs td { padding: var(--sp-3) var(--sp-2); }
  table.tarifs { font-size: var(--t-xs); }
  table.tarifs .th-long { display: none; }
  table.tarifs .th-court { display: inline; }
}

/* --- Article de blog ----------------------------------------------------- */
.article__meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--t-xs);
  color: var(--ardoise); font-family: var(--data); margin-bottom: var(--sp-5); }
.article__corps { max-width: 68ch; }
.article__corps h2 { font-size: var(--t-2xl); margin-top: var(--sp-7); }
.article__corps h3 { margin-top: var(--sp-6); }
.article__corps blockquote {
  margin: var(--sp-6) 0; padding-left: var(--sp-5); border-left: 3px solid var(--gentiane);
  font-family: var(--display); font-size: var(--t-lg); color: var(--puy);
}
.billet { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.billet .photo { margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-5);
  border-radius: var(--r-l) var(--r-l) 0 0; border: 0; border-bottom: 1px solid var(--brume); }
.billet h3 { font-size: var(--t-lg); }
.billet__pied { margin-top: auto; padding-top: var(--sp-4); font-size: var(--t-xs);
  font-family: var(--data); color: var(--ardoise); }

/* --- Encadré d'aide ------------------------------------------------------ */
.encadre {
  background: var(--craie-2); border-left: 3px solid var(--gentiane);
  border-radius: 0 var(--r-m) var(--r-m) 0; padding: var(--sp-5); margin: var(--sp-6) 0;
}
.encadre h3 { font-size: var(--t-lg); margin-bottom: var(--sp-3); }
.encadre p:last-child { margin-bottom: 0; }
.encadre--sombre { background: var(--puy); color: #C7DCD4; border-left-color: var(--gentiane); }
.encadre--sombre h3 { color: var(--blanc); }

/* --- contact.html : assistant de devis progressif ------------------------
   Sans JavaScript, les étapes du <form> restent toutes visibles à la suite
   (le bloc générique .assistant__etape{display:none} de plus haut ne
   s'applique qu'une fois le mode assistant activé par assistant.js). ------ */
.assistant__etape { display: block; margin-bottom: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--brume); }
.assistant__etape:last-of-type { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.assistant__etape h2 { font-size: var(--t-xl); margin-bottom: var(--sp-5); }
.assistant__etape h2:focus:not(:focus-visible) { outline: none; }
.assistant--activee .assistant__etape { display: none; margin: 0; padding: 0; border: 0; }
.assistant--activee .assistant__etape.active { display: block; animation: entree .35s ease; }
.assistant__pied [data-action="precedent"],
.assistant__pied [data-action="suivant"] { display: none; }
.assistant--activee .assistant__pied [data-action="precedent"],
.assistant--activee .assistant__pied [data-action="suivant"] { display: inline-flex; }
.assistant--activee .assistant__pied [data-action="envoyer"] { display: none; }
/* Dernière étape : basculée par JS via la classe assistant--derniere-etape
   plutôt qu'un numéro d'étape figé dans le CSS — indépendant du nombre
   d'étapes du formulaire, qui peut évoluer. */
.assistant--activee.assistant--derniere-etape .assistant__pied [data-action="envoyer"] { display: inline-flex; }
.assistant--activee.assistant--derniere-etape .assistant__pied [data-action="suivant"] { display: none; }
.assistant--activee[data-etape-actuelle="1"] .assistant__pied [data-action="precedent"] { display: none; }
.assistant__recap-estimation {
  background: var(--craie-2); border: 1px solid var(--brume); border-radius: var(--r-m);
  padding: var(--sp-4) var(--sp-5); margin-top: var(--sp-4);
}
.assistant__recap-estimation strong { font-family: var(--data); color: var(--puy); }

/* --- contact.html : bloc coordonnées de la colonne latérale -------------- */
.coordonnees { display: grid; gap: var(--sp-3); font-size: var(--t-sm); }
.coordonnees a { font-weight: 600; }

/* --- merci.html : liste « ce qui se passe ensuite » avec repère chiffré --
   Réutilise .etapes du système ; rien de spécifique à ajouter ici. -------- */

/* --- 404.html : recherche de commune hors liste --------------------------
   Réutilise .communes__recherche / .commune-lien existants. --------------- */
.page-404__code {
  font-family: var(--data); font-size: var(--t-sm); color: var(--gentiane-f);
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--sp-3);
}

/* ==========================================================================
   ESPACE CONSEILS — mobilier d'un blog WordPress
   Cette partie du site sera servie par WordPress dans public/blog/, en dehors
   du contrôleur Symfony. La maquette en simule les fonctions natives (archive
   filtrable, recherche, pagination, étiquettes, articles liés) pour que le
   thème à produire ait un modèle exact.
   ========================================================================== */

/* Barre de filtres de l'archive */
.blog-filtres {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center;
  justify-content: space-between; padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--brume); margin-bottom: var(--sp-5);
}
.blog-recherche { position: relative; flex: 1 1 260px; max-width: 360px; }
.blog-recherche svg {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; color: var(--ardoise); pointer-events: none;
}
.blog-recherche input { padding-left: 2.9rem; }

.filtres { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.filtre {
  font-family: var(--texte); font-size: var(--t-xs); font-weight: 600;
  padding: 0.45rem 0.9rem; min-height: 44px;
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--bordure-champ); border-radius: 999px;
  background: var(--blanc); color: var(--ardoise);
  cursor: pointer; transition: all var(--transition);
}
.filtre:hover { border-color: var(--puy); color: var(--puy); }
.filtre[aria-pressed="true"] { background: var(--puy); border-color: var(--puy); color: var(--blanc); }

.blog-compteur { font-family: var(--data); font-size: var(--t-sm); color: var(--ardoise); }

/* Métadonnées d'un billet dans la liste */
.billet__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
  font-family: var(--data); font-size: var(--t-xs); color: var(--ardoise);
  margin-bottom: var(--sp-3);
}
.billet__categorie { color: var(--gentiane-f); font-weight: 600; }

/* Étiquettes */
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
.tags li { margin: 0; }
.tag {
  display: inline-block; font-family: var(--data); font-size: var(--t-xs);
  /* Cible tactile : le padding vertical porte la hauteur cliquable à 44 px. */
  padding: 0.65rem 0.7rem; border-radius: 999px;
  background: var(--craie-2); color: var(--ardoise);
  border: 1px solid var(--brume); text-decoration: none;
}
.tag:hover { border-color: var(--puy); color: var(--puy); }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
  justify-content: center; margin-top: var(--sp-6); }
.pagination button, .pagination a {
  min-width: 44px; min-height: 44px; padding: 0 0.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--data); font-size: var(--t-sm); font-weight: 500;
  border: 1.5px solid var(--bordure-champ); border-radius: var(--r-m);
  background: var(--blanc); color: var(--puy); cursor: pointer; text-decoration: none;
  transition: all var(--transition);
}
.pagination button:hover:not(:disabled), .pagination a:hover { border-color: var(--puy); background: var(--craie-2); }
.pagination [aria-current="page"] { background: var(--puy); border-color: var(--puy); color: var(--blanc); }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }

/* Navigation d'article à article */
.article__nav {
  display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--brume);
}
.article__nav a {
  display: block; padding: var(--sp-4); border: 1px solid var(--brume);
  border-radius: var(--r-m); text-decoration: none; background: var(--blanc);
  transition: all var(--transition);
}
.article__nav a:hover { border-color: var(--puy); box-shadow: var(--ombre-s); }
.article__nav span {
  display: block; font-family: var(--data); font-size: var(--t-xs);
  color: var(--ardoise); margin-bottom: var(--sp-2);
}
.article__nav strong { display: block; color: var(--puy); font-weight: 600; font-size: var(--t-sm); line-height: 1.35; }
.article__nav .suivant { text-align: right; }

/* Repère technique : quel système sert cette page */
.systeme {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--data); font-size: var(--t-xs); color: var(--ardoise);
  background: var(--craie-2); border: 1px dashed var(--bordure-champ);
  border-radius: 999px; padding: 0.3rem 0.8rem;
}
.systeme::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gentiane); flex: none; }

/* --- Photos d'illustration (banque d'images — Unsplash / CC0) ------------- */
.presta__photo {
  aspect-ratio: 4 / 3; border-radius: var(--r-m, 12px); overflow: hidden;
  margin-bottom: var(--sp-3); border: 1px solid var(--brume);
}
.presta__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bandeau-photo {
  margin: var(--sp-6) 0 0; border-radius: var(--r-l); overflow: hidden;
  aspect-ratio: 21 / 9; border: 1px solid var(--brume);
}
.bandeau-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --- Améliorations benchmark (barre CTA mobile, avis lancement, voie rapide) --- */
.barre-cta { display: none; }
@media (max-width: 820px) {
  .barre-cta {
    display: flex; position: fixed; inset: auto 0 0 0; z-index: 60;
    gap: 1px; background: var(--brume);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4px 18px rgba(23, 64, 58, .14);
  }
  .barre-cta a {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 54px; font-weight: 700; font-size: var(--t-sm); text-decoration: none;
  }
  .barre-cta a:first-child { background: var(--blanc); color: var(--puy); }
  .barre-cta a:last-child { background: var(--puy); color: var(--blanc); }
  /* Réserve la hauteur de la barre (+ zone sûre iOS) sous le pied de page,
     pour qu'elle ne recouvre jamais les derniers liens du footer. */
  body { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
  .pied { padding-bottom: calc(var(--sp-6) + 8px); }
}
/* Sur /contact, la barre est inutile (on y est déjà) : masquée par le gabarit. */
.barre-cta--masquee { display: none !important; }
html:has(.barre-cta--masquee) body { padding-bottom: 0; }

/* /contact en mobile : le bloc « Être rappelé » passe avant l'assistant. */
@media (max-width: 720px) {
  .contact-grille aside { order: -1; }
}

/* Cartes cliquables (404, blog, prestations) : pas de soulignement global,
   seul le titre se souligne au survol. */
.carte--lien { text-decoration: none; }
.carte--lien:hover h3, .carte--lien:focus-visible h3 { text-decoration: underline; }

/* Corps de lecture : les paragraphes descriptifs des cartes et engagements
   rejoignent le corps de texte (17 px) ; les métadonnées restent en --t-sm. */
.carte p, .engagement p, .etape p { font-size: var(--t-b); }
.carte p.discret, .carte .champ__aide { font-size: var(--t-sm); }
.carte .presta__tarif { font-size: var(--t-b); }

/* Simulateur : rappel de la conversion hebdomadaire → mensuelle. */
.simu__conversion { display: block; font-size: var(--t-xs); color: #93B3AA; margin-top: var(--sp-2); }
.avis-lancement {
  border: 1px dashed var(--bordure-champ); border-radius: var(--r-l);
  padding: var(--sp-6); text-align: center; max-width: 62ch; margin-inline: auto;
}
.avis-lancement p { color: var(--ardoise); }
.voie-rapide {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center;
  background: var(--craie-2); border: 1px solid var(--brume);
  border-radius: var(--r-m); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5);
}
.voie-rapide p { margin: 0; font-size: var(--t-sm); color: var(--ardoise); }
.cta-intermediaire { text-align: center; }
.cta-intermediaire .reassurance {
  font-family: var(--data); font-size: var(--t-xs); color: var(--ardoise); margin-top: var(--sp-3);
}
.presta__photo picture, .bandeau-photo picture, .photo picture { display: block; width: 100%; height: 100%; }

/* Correctif débordement mobile : le minimum implicite « auto » de 1fr laissait
   le simulateur imposer une piste plus large que le viewport. */
@media (max-width: 940px) { .hero__grille { grid-template-columns: minmax(0, 1fr); } }

/* --- Corrections espaces vides (retour fondateur) ------------------------ */
/* Le CTA intermédiaire ne doit pas hériter du width:100% de .btn--large */
.cta-intermediaire .btn { width: auto; }
/* Colonnes étroites : alignées à gauche sur le bord du conteneur principal,
   la largeur de lecture est conservée par les enfants */
.contenant--etroit { max-width: var(--page); }
.contenant--etroit > * { max-width: var(--etroit); }

/* Engagements sur deux colonnes en desktop : moins de vide, section plus compacte */
@media (min-width: 941px) {
  .engagements { grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); }
}

/* Plan du site : listes de liens en colonnes pour réduire la hauteur */
.plan-site ul { list-style-position: inside; padding-left: 0; }
@media (min-width: 700px) { .plan-site ul { columns: 2; column-gap: var(--sp-7); } }
@media (min-width: 1000px) { .plan-site ul { columns: 3; } }
.plan-site li { break-inside: avoid; margin-bottom: var(--sp-2); }
/* Les grilles de cartes des pages éditoriales occupent toute la largeur du conteneur */
.contenant--etroit > .grille { max-width: none; }

/* FAQ de l accueil sur deux colonnes indépendantes (desktop) */
.faq-colonnes { align-items: start; }

/* ============ Bandeau recrutement (une ligne sobre, accueil) ============ */
.bandeau-recrutement{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.5rem;border:1px solid rgba(23,64,58,.14);border-radius:14px;background:#fff}
.bandeau-recrutement p{margin:0}

/* ============ Lot B — alternance texte/image (checklist des services) ==== */
.checklist-media { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 941px) {
  .checklist-media { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  /* Le contenu (grille d'accordéons sur 2 colonnes en pleine largeur) repasse
     sur une seule colonne quand il partage la place avec la photo. */
  .checklist-media__contenu .grille--2 { grid-template-columns: minmax(0, 1fr); }
  .checklist-media__photo { position: sticky; top: calc(var(--sp-6) + 70px); }
}
.checklist-media__photo {
  margin: 0; border-radius: var(--r-l); overflow: hidden;
  border: 1px solid var(--brume); aspect-ratio: 4 / 5; max-height: 560px;
}
.checklist-media__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.checklist-media__photo picture { display: block; width: 100%; height: 100%; }

/* ============ Lot B — « Qui viendra chez vous ? » (accueil) ============= */
.intervenants { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 861px) {
  .intervenants { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}
.intervenants__texte > p { max-width: 62ch; }
.intervenants__texte ul { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: var(--sp-4); }
.intervenants__texte li {
  margin: 0; padding: var(--sp-4) var(--sp-5); background: var(--blanc);
  border: 1px solid var(--brume); border-radius: var(--r-m);
  font-size: var(--t-sm); color: var(--ardoise);
}
.intervenants__texte li strong { color: var(--puy); display: block; margin-bottom: 2px; font-size: var(--t-b); }
.intervenants__photos { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }

/* ============ Lot C — micro-interactions ================================ */
@media (prefers-reduced-motion: no-preference) {
  /* Élévation douce de toutes les cartes au survol (les cartes-liens gardent
     leur élévation plus marquée définie dans base.css). */
  .carte { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
  .carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-m); }

  /* Transition d'ouverture des accordéons : la hauteur est pilotée par app.js
     (max-height mesurée), le CSS ne fait que l'adoucir. */
  html.js .accordeon__panneau { overflow: hidden; transition: max-height .3s ease, opacity .3s ease; }
}