/* home.css : mise en page de la page d accueil (22 blocs du plan).
   Memes formes que le theme : cartes 1rem, boutons .5rem, ombres douces,
   sections alternees fond / fond-2. Aucune couleur hors des jetons --c-*. */
[data-bandeau][hidden] { display: none; }

.hp-c { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .hp-c { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .hp-c { padding-inline: 2rem; } }

.hp-section { padding-block: 4rem; }
@media (min-width: 900px) { .hp-section { padding-block: 6rem; } }
.hp-section--2 { background: var(--c-fond-2); }

.hp-tete { max-width: 46rem; }
.hp-tete--centre { margin-inline: auto; text-align: center; }
.hp-tete h2 { font-size: var(--t5); line-height: 1.12; margin-top: var(--e3); color: var(--c-texte); }
@media (min-width: 900px) { .hp-tete h2 { font-size: var(--t6); } }
.hp-tete p { margin-top: var(--e4); font-size: var(--t2); color: var(--c-texte-2); }
.hp-plus { margin-top: var(--e5); }

/* --- grilles : jamais de carte seule sur sa rangee --- */
.hp-g { display: grid; gap: 1.5rem; margin-top: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .hp-g--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .hp-g--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px) { .hp-g--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .hp-g--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px) {
  .hp-g--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-g--5 > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1040px) {
  .hp-g--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-g--5 > :last-child { grid-column: auto; }
}
.hp-bento { display: grid; gap: 1.5rem; margin-top: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .hp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-bento > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 1040px) {
  .hp-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-bento > :first-child { grid-column: span 2; }
}

/* --- hero : un seul ecran, composition typographique du theme --- */
.hp-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* le header collant contient le bandeau : --header-h est sa hauteur mesuree */
  min-height: calc(100svh - var(--header-h, 136px));
  padding-block: 3rem 1.5rem;
  background: var(--c-fond);
}
.hp-hero__haut { margin-block: auto; }
.hp-hero__int { max-width: 48rem; margin-inline: auto; text-align: center; }
.hp-hero__plus { display: none; }
@media (min-width: 640px) { .hp-hero__plus { display: inline; } }
@media (min-width: 1024px) {
  .hp-hero__haut {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 3rem;
    align-items: center;
    max-width: 72rem;
    margin-inline: auto;
  }
  .hp-hero__int { max-width: 42rem; }
  .hp-hero__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-image); border: 1px solid var(--c-bord); }
}
@media (max-width: 1023px) {
  .hp-hero { padding-block: 2rem 1.25rem; }
  .hp-hero__photo { display: none; }
  .hp-hero__titre { font-size: clamp(1.72rem, 8.2vw, 2.3rem); }
  .hp-hero__accroche { font-size: 1rem; }
  .hp-hero__actions { margin-top: var(--e5); }
}
.hp-suite { padding-block: 1.75rem; background: var(--c-fond); border-top: 1px solid var(--c-bord); }
.hp-hero__titre {
  margin-top: var(--e4);
  font-size: var(--t-hero);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--c-texte);
}
.hp-hero__accroche { margin-top: var(--e5); font-size: clamp(1.05rem, 0.7rem + 1vw, 1.35rem); line-height: 1.6; color: var(--c-texte-2); max-width: 44rem; }
.hp-hero__actions { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e6); }
.hp-hero__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
@media (min-width: 760px) { .hp-hero__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e5); } }
.hp-hero__liste a { display: block; text-decoration: none; color: var(--c-texte); border-top: 2px solid var(--c-bord); padding-top: var(--e3); transition: border-color .2s ease, color .2s ease; }
.hp-hero__liste a:hover { border-color: var(--c-primaire); color: var(--c-primaire-texte); }
.hp-hero__date { display: block; font-size: var(--tm); color: var(--c-texte-2); margin-bottom: var(--e1); }
.hp-hero__bas { padding-top: var(--e6); }
.hp-bande-logos { display: flex; flex-direction: column; gap: var(--e4); }
.hp-bande-logos__titre { font-size: var(--tm); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--c-texte-2); }

/* --- cartes --- */
.hp-carte { display: flex; flex-direction: column; overflow: hidden; }
.hp-carte__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--c-fond-2); }
.hp-carte__corps { display: flex; flex-direction: column; gap: var(--e3); padding: 1.4rem; flex: 1; }
.hp-carte__titre { font-size: var(--t3); line-height: 1.25; font-weight: 600; color: var(--c-texte); }
.hp-carte__texte { font-size: var(--t1); line-height: 1.6; color: var(--c-texte-2); }
.hp-carte__pied { margin-top: auto; padding-top: var(--e2); }
.hp-carte a.hp-carte__lien { text-decoration: none; color: inherit; }
.hp-ico { width: 40px; height: 40px; border-radius: var(--r-pastille); display: inline-flex; align-items: center; justify-content: center; background: var(--c-doux); color: var(--c-primaire-texte); flex: none; }
.hp-ico svg { width: 22px; height: 22px; }
.hp-fleche { display: inline-flex; align-items: center; gap: var(--e2); font-weight: 700; color: var(--c-primaire-texte); text-decoration: none; }
.hp-fleche:hover { color: var(--c-texte); }
.hp-fleche svg { width: 18px; height: 18px; }

/* --- chiffres cles --- */
.hp-chiffre { padding: 1.5rem; text-align: left; }
.hp-chiffre__valeur { font-family: var(--f-titre); font-size: var(--t5); font-weight: 700; color: var(--c-primaire-texte); font-variant-numeric: tabular-nums; }
.hp-chiffre__libelle { margin-top: var(--e2); color: var(--c-texte-2); }

/* --- etapes photo --- */
.hp-etapes { display: grid; gap: 2.5rem; align-items: start; grid-template-columns: 1fr; }
@media (min-width: 900px) { .hp-etapes { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
@media (min-width: 900px) { .hp-etapes [data-etapes-visuel] { position: sticky; top: calc(var(--header-h, 72px) + 2.5rem); } }
.hp-etapes__visuel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-image); border: 1px solid var(--c-bord); }
/* Les trois etapes restent en encre pleine : titre #232c2f, paragraphe #57656b, actives comme
   inactives (contraste 4.5:1 minimum). Seules la pastille numerotee et le trait vertical
   signalent l'etape en cours (26/09, portier). */
.hp-etape { padding: 1.25rem 0 1.25rem 1.1rem; border-top: 1px solid var(--c-bord); border-left: 3px solid transparent; }
.hp-etape:first-child { border-top: 0; }
.hp-etape.kv-actif { border-left-color: var(--c-primaire); }
.hp-etape__rang {
  display: inline-flex; align-items: center;
  padding: .3rem .85rem; border-radius: var(--r-pastille);
  background: var(--c-doux); color: var(--c-texte);
  font-family: var(--f-titre); font-size: var(--tm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.hp-etape.kv-actif .hp-etape__rang { background: var(--c-primaire); color: var(--c-sur-primaire); }
.hp-etape__titre { margin-top: var(--e2); font-size: var(--t4); font-weight: 600; color: var(--c-texte); }
.hp-etape__texte { margin-top: var(--e2); color: var(--c-texte-2); line-height: 1.65; }

/* --- avis --- */
.hp-avis { min-width: 18rem; padding: 1.5rem; display: flex; flex-direction: column; gap: var(--e3); }
.hp-etoiles { display: flex; gap: .15rem; color: #d99a00; }
.hp-etoiles svg { width: 16px; height: 16px; }
.hp-avis__texte { color: var(--c-texte); line-height: 1.6; }
.hp-avis__resultat { font-weight: 700; color: var(--c-secondaire-texte); font-size: var(--t1); }
.hp-avis__pied { margin-top: auto; display: flex; align-items: center; gap: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--c-bord); }
.hp-avis__avatar { width: 44px; height: 44px; border-radius: var(--r-pastille); object-fit: cover; flex: none; }
.hp-avis__nom { font-weight: 700; color: var(--c-texte); }
.hp-avis__meta { font-size: var(--tm); color: var(--c-texte-2); }

/* --- articles --- */
.hp-article { display: flex; flex-direction: column; overflow: hidden; height: 100%; }
.hp-article__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--c-fond-2); }
.hp-article__corps { display: flex; flex-direction: column; gap: var(--e3); padding: 1.4rem; flex: 1; }
.hp-article__titre { font-size: var(--t3); line-height: 1.25; font-weight: 600; }
.hp-article__titre a { color: var(--c-texte); text-decoration: none; }
.hp-article__titre a:hover { color: var(--c-primaire-texte); }
.hp-article__resume { color: var(--c-texte-2); line-height: 1.6; }
.hp-article__meta { margin-top: auto; font-size: var(--tm); color: var(--c-texte-2); padding-top: var(--e2); }
.hp-article--vedette .hp-article__img { aspect-ratio: 16 / 9; }
@media (min-width: 1040px) { .hp-article--vedette { display: grid; grid-template-columns: 1.15fr 1fr; } .hp-article--vedette .hp-article__img { height: 100%; aspect-ratio: auto; min-height: 20rem; } }
.hp-article--vedette .hp-article__titre { font-size: var(--t4); }
.hp-rubrique { font-size: var(--tm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-primaire-texte); text-decoration: none; }

/* --- widgets --- */
.hp-widget { padding: 1.6rem; }
@media (min-width: 900px) { .hp-widget { padding: 2.2rem; } }
.hp-widget__grille { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 900px) { .hp-widget__grille { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } }
.hp-resultat { display: grid; gap: var(--e4); }
.hp-resultat__ligne { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); padding-bottom: var(--e3); border-bottom: 1px solid var(--c-bord); }
.hp-resultat__ligne:last-child { border-bottom: 0; }
.hp-resultat__label { color: var(--c-texte-2); }
.hp-note { margin-top: var(--e4); font-size: var(--tm); color: var(--c-texte-2); line-height: 1.55; }
.hp-bascule__tete { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; }
.hp-bascule__grille { display: grid; gap: 1.5rem; margin-top: 2rem; grid-template-columns: 1fr; }
/* une seule carte est visible a la fois : elle tient toute la largeur et sa
   liste se lit en deux colonnes, jamais un bloc a moitie vide */
@media (min-width: 760px) { .hp-bascule__grille .hp-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.5rem; align-items: start; } }
.hp-bloc { padding: 1.5rem; }
.hp-bloc h3 { font-size: var(--t3); font-weight: 600; }
.hp-liste { margin-top: var(--e3); display: grid; gap: var(--e3); }
.hp-liste div { display: grid; gap: .15rem; }
.hp-liste dt { font-size: var(--tm); text-transform: uppercase; letter-spacing: .06em; color: var(--c-texte-2); font-weight: 700; }
.hp-liste dd { margin: 0; color: var(--c-texte); line-height: 1.55; }
.hp-checklist { list-style: none; margin: var(--e4) 0 0; padding: 0; display: grid; gap: var(--e2); }
.hp-checklist li { display: flex; gap: var(--e3); align-items: flex-start; }
.hp-checklist input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; accent-color: var(--c-primaire); flex: none; }
.hp-checklist label { cursor: pointer; line-height: 1.5; }
.hp-checklist input:checked + label { text-decoration: line-through; color: var(--c-texte-2); }

/* --- recit --- */
.hp-recit__grille { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .hp-recit__grille { grid-template-columns: .8fr 1.2fr; gap: 3.5rem; } }
.hp-recit__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-image); border: 1px solid var(--c-bord); }
.hp-recit blockquote { margin: 0; font-family: var(--f-titre); font-size: var(--t4); line-height: 1.4; color: var(--c-texte); }
.hp-recit blockquote p + p { margin-top: var(--e4); }
.hp-recit figcaption { margin-top: var(--e5); color: var(--c-texte-2); font-size: var(--t1); }

/* --- sujets --- */
.hp-sujets { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: 2rem; }

/* --- lexique --- */
.hp-lexique { margin-top: 2.5rem; column-gap: 2rem; }
@media (min-width: 760px) { .hp-lexique { columns: 2; } }
.hp-lexique details { break-inside: avoid; border-bottom: 1px solid var(--c-bord); padding: var(--e3) 0; }
.hp-lexique summary { cursor: pointer; font-weight: 700; color: var(--c-texte); }
.hp-lexique summary::marker { color: var(--c-primaire-texte); }
.hp-lexique p { margin-top: var(--e2); color: var(--c-texte-2); line-height: 1.6; }

/* --- frise --- */
.hp-frise { margin-top: 2.5rem; display: grid; gap: var(--e6); }
.hp-frise__echeance { font-family: var(--f-titre); font-weight: 700; font-size: var(--t2); color: var(--c-primaire-texte); }
.hp-frise__titre { margin-top: var(--e1); font-size: var(--t3); font-weight: 600; }
.hp-frise__fait { margin-top: var(--e2); color: var(--c-texte-2); line-height: 1.65; }

/* --- budget --- */
.hp-budget { display: grid; gap: 1.25rem; margin-top: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .hp-budget { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .hp-budget { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hp-budget__poste { padding: 1.4rem; display: flex; flex-direction: column; gap: var(--e2); }
.hp-budget__montant { font-family: var(--f-titre); font-size: var(--t3); font-weight: 700; color: var(--c-secondaire-texte); }
.hp-budget__nom { font-weight: 700; }
.hp-budget__detail { color: var(--c-texte-2); font-size: var(--t1); line-height: 1.55; }

/* --- mot de la redaction --- */
.hp-mot { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .hp-mot { grid-template-columns: 1.3fr 1fr; gap: 3.5rem; } }
.hp-mot__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-image); border: 1px solid var(--c-bord); }
.hp-mot__lottie { margin-top: var(--e5); }

/* --- auteurs --- */
.hp-auteur { padding: 1.5rem; display: flex; flex-direction: column; gap: var(--e3); height: 100%; }
.hp-auteur__photo { width: 72px; height: 72px; border-radius: var(--r-pastille); object-fit: cover; }
.hp-auteur__nom { font-size: var(--t3); font-weight: 600; }
.hp-auteur__role { color: var(--c-primaire-texte); font-weight: 700; font-size: var(--t1); }
.hp-auteur__spec { color: var(--c-texte-2); line-height: 1.6; }

/* --- faq --- */
.hp-faq { margin-top: 2.5rem; display: grid; gap: var(--e3); }
.hp-faq details { padding: 1.25rem 1.5rem; }
.hp-faq summary { cursor: pointer; font-weight: 700; font-size: var(--t2); color: var(--c-texte); }
.hp-faq p { margin-top: var(--e3); color: var(--c-texte-2); line-height: 1.65; }

/* --- contact --- */
.hp-contact { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .hp-contact { grid-template-columns: .9fr 1.1fr; gap: 3.5rem; } }
.hp-contact__infos { display: grid; gap: var(--e4); }
.hp-contact__infos a { color: var(--c-primaire-texte); }
.hp-form { display: grid; gap: var(--e4); }
.hp-form__paire { display: grid; gap: var(--e4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .hp-form__paire { grid-template-columns: 1fr 1fr; } }
.hp-form label { display: grid; gap: var(--e2); font-weight: 600; color: var(--c-texte); }
.hp-form input, .hp-form select, .hp-form textarea { font: inherit; padding: .7rem .9rem; border-radius: var(--r-bouton); border: 1px solid var(--c-bord); background: var(--c-surface); color: var(--c-texte); width: 100%; }
.hp-form textarea { min-height: 8rem; resize: vertical; }
.hp-form input:focus, .hp-form select:focus, .hp-form textarea:focus { outline: 2px solid var(--c-primaire); outline-offset: 1px; border-color: var(--c-primaire); }
/* pot de miel : masque par la feuille de style, ni display:none ni style en ligne, pour que les
   robots qui lisent le style le remplissent et que les lecteurs d ecran l ignorent */
.hp-form__leurre { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* retour au visiteur apres envoi (?envoi=ok|erreur), pose dans le DOM par le script de la section */
.hp-form__retour { padding: .9rem 1.1rem; border-radius: var(--r-bouton); border: 1px solid var(--c-bord); background: var(--c-fond-2); color: var(--c-texte); font-weight: 600; }
.hp-form__retour[hidden] { display: none; }

/* --- cta final --- */
.hp-final { padding: 2.5rem; text-align: center; background: var(--c-voile); color: var(--c-sur-voile); border-radius: var(--r-carte); }
@media (min-width: 900px) { .hp-final { padding: 4rem 3rem; } }
.hp-final h2 { font-size: var(--t5); color: var(--c-sur-voile); }
.hp-final p { margin-top: var(--e4); color: color-mix(in srgb, var(--c-sur-voile) 82%, transparent); font-size: var(--t2); max-width: 40rem; margin-inline: auto; }
.hp-final__actions { display: flex; flex-wrap: wrap; gap: var(--e3); justify-content: center; margin-top: var(--e6); }
.hp-final .de-cta-2 { color: var(--c-sur-voile); border-color: color-mix(in srgb, var(--c-sur-voile) 45%, transparent); }
.hp-final .de-cta-2:hover { background: color-mix(in srgb, var(--c-sur-voile) 12%, transparent); border-color: var(--c-sur-voile); }

@media (min-width: 760px) { .hp-g--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .hp-g--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }