/*
 * aqua-lowtech / home.css
 * Page d'accueil (front-page.php)
 * Genere depuis main.css + style.css - ordre des rules preserve.
 */

/* ====================================
   HOMEPAGE REFONTE — hp-*.css
   À coller à la FIN de main.css
   ==================================== */
/* ── HERO ───────────────────────────── */
/* Photo en fond plein cadre, texte blanc par-dessus.
   Le voile ne peut pas être un simple fondu linéaire : le texte court jusqu'à 49 % de
   la largeur, or un fondu qui décroît dès x=0 n'a presque plus d'opacité à cet endroit
   (contraste mesuré 1,39:1 à 1,81:1 selon les réglages, dernier mot du H1 illisible).
   D'où un voile en deux temps : plateau opaque sous le texte, puis fondu.
   Le vert de marque #2d7d46 est exclu de ce rôle — 2,25:1 même à 55 %, trop clair. */
.hp-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
}

.hp-hero__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hp-hero__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 55%; /* garde le banc de poissons, les roches et le sol dans le cadre */
}

/* Mobile : le texte occupe toute la largeur, un fondu horizontal n'a plus de sens.
   Voile uniforme #14301f à 65 % — pire pixel sous un texte du hero mesuré à 4,82:1
   à 390 px de large (bloc H1), tous les autres blocs au-dessus. */
.hp-hero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20, 48, 31, 0.65);
    pointer-events: none;
}

.hp-hero__panneau {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
}

.hp-hero__content {
    max-width: 640px;
    color: white;
    padding: 2.5rem 1.25rem;
}

@media (min-width: 900px) {
    .hp-hero {
        min-height: 78vh;
    }

    /* Plateau à 65 % jusqu'à 52 %, puis fondu jusqu'à 72 %. Le texte s'arrêtant à 49 %,
       il est intégralement sur le plateau ; la courbe au-delà est esthétique, ses paliers
       intermédiaires (smoothstep) évitent le ressaut visible à la sortie du plateau.
       Coût mesuré sur la moitié droite de la photo : −23 % de luminosité, contre −72 %
       si le voile uniforme du mobile s'y appliquait. */
    .hp-hero__photo::after {
        background: linear-gradient(to right,
            rgba(20, 48, 31, 0.65) 0%,
            rgba(20, 48, 31, 0.65) 52%,
            rgba(20, 48, 31, 0.61) 55%,
            rgba(20, 48, 31, 0.51) 58%,
            rgba(20, 48, 31, 0.33) 62%,
            rgba(20, 48, 31, 0.14) 66%,
            rgba(20, 48, 31, 0.04) 69%,
            rgba(20, 48, 31, 0) 72%);
    }

    /* Contrainte non négociable : la colonne de texte ne dépasse pas 52 % de la largeur,
       la fin du plateau. Avec box-sizing: border-box, le padding est compris dedans et le
       texte s'arrête à 49 %. Le bord gauche reste aligné sur le conteneur de 1200 px. */
    .hp-hero__content {
        padding: 4rem 2rem 4rem max(2rem, calc((100vw - 1200px) / 2));
        max-width: 52%;
        width: 100%;
    }
}

.hp-hero__eyebrow {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: 1rem;
}

.hp-hero__title {
    font-size: 2.75rem;
    line-height: 1.15;
    color: white;
    margin-bottom: 1rem;
    font-weight: 700;
}

/* Blanc plein : sur l'ancien aplat vert uni, le blanc à 90 % passait large ; sous le
   voile posé sur la photo, le pire pixel du bloc tombait à 4,49:1. Plein, il donne 5,10:1. */
.hp-hero__sub {
    font-size: 1.15rem;
    color: #fff;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Boutons paniques */
.hp-panic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* Verre sombre, pas clair : sur l'aplat vert, un fond blanc à 12 % était sans risque.
   Sur la photo, il éclaircit le fond sous le texte blanc — mesuré à 3,89:1 en mobile,
   là où les boutons débordent sur les hautes lumières du bac. Un fond teinté #14301f
   ne peut qu'assombrir : 8,0:1 sur ce même pixel, et la photo reste visible au travers. */
.hp-panic__btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    background: rgba(20, 48, 31, 0.45);
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 10px;
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: var(--transition-smooth);
    backdrop-filter: blur(4px);
}

.hp-panic__btn:hover {
    background: rgba(20, 48, 31, 0.62);
    border-color: white;
    color: white;
    transform: translateY(-2px);
}

/* Action principale du hero : hors de la nav « Problèmes fréquents », en largeur
   intrinsèque (plus de bandeau orange pleine largeur).
   Le liseré interne clair rend la limite du bouton perceptible : l'orange #b85a0e sur
   le vert du hero ne donne que 1,93:1, sous le seuil de 3:1 (WCAG 1.4.11). */
.hp-cta-demarrer {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 48px;
    padding: 0.875rem 1.75rem;
    border-radius: 10px;
    background: var(--aq-orange-cta);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.hp-cta-demarrer:hover {
    background: var(--aq-orange-cta-survol);
    color: #fff;
    transform: translateY(-2px);
}

.hp-hero__action {
    margin: 0 0 1.5rem;
}

/* Rangée secondaire : label court + boutons plus discrets que le CTA. */
.hp-panic__label {
    margin: 0 0 0.5rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    font-weight: 600;
}

.hp-ico {
    flex-shrink: 0;
}

.hp-cta-demarrer:focus-visible,
.hp-panic__btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* ── SIGNATURE DANS LE HERO ─────────── */
/* Ancrage de crédibilité, en ligne sur la photo sous les boutons. Pas de carte
   blanche : elle aurait le même poids visuel que la barre de recherche située 20 px
   plus bas, sans avoir de rapport avec elle. Un filet fin suffit à la détacher. */
.hp-signature {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1.15rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 0.88rem;
    line-height: 1.3;
}

/* Le texte occupe la place disponible, la flèche le suit : pas de space-between,
   donc pas d'élément isolé à l'autre extrémité de la colonne. */
.hp-signature__texte {
    flex: 0 1 auto;
}

.hp-signature__photo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 30%;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.hp-signature,
.hp-signature:hover,
.hp-signature:focus-visible {
    color: #fff;
    text-decoration: none;
}

.hp-signature__texte {
    color: #fff;
}

/* La flèche vit DANS le texte, pas à côté : en élément flex séparé elle se retrouvait
   en bout de ligne, détachée du dernier mot dès que le texte passait sur deux lignes.
   inline-block pour que le décalage au survol reste possible. */
.hp-signature__fleche {
    display: inline-block;
    /* L'espace ne peut pas venir du markup : un inline-block rogne l'espace en tête. */
    margin-left: 0.35em;
    opacity: 0.75;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.hp-signature:hover .hp-signature__texte {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hp-signature:hover .hp-signature__fleche {
    opacity: 1;
    transform: translateX(3px);
}

.hp-signature:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* ── MOTEUR DE RECHERCHE ────────────── */
.hp-search {
    background: white;
    padding: 1.5rem 0;
    border-bottom: 1px solid #e2e8f0;
}

/* ── INTRO ÉDITORIALE ───────────────── */
/* Le bandeau « pont méthode » a été fusionné ici : il répétait le premier paragraphe
   et ajoutait une bande de fond et une largeur de plus. Son accroche ouvre le bloc,
   son lien le referme. */
.hp-intro__accroche {
    margin: 0 0 0.9rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-dark);
}

.hp-intro__lien {
    margin: 1.1rem 0 0;
}

.hp-intro__lien a {
    color: var(--color-primary);
    font-weight: 600;
    white-space: nowrap;
}

/* ── ARTICLES ───────────────────────── */
.hp-articles {
    padding: 4rem 0;
    background: white;
}

/* ── PREUVE ─────────────────────────── */
.hp-proof {
    padding: 2.5rem 0;
    background: var(--color-dark);
}

.hp-proof__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: center;
}

.hp-proof__stat {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.hp-proof__number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
}

.hp-proof__label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.4;
}

.hp-proof__label em {
    font-style: italic;
    color: rgba(255,255,255,0.6);
}

@media (max-width: 768px) {
  /* Plus de hauteur imposée : en mobile le hero s'ajuste à son contenu, la photo de
     fond suit. */
  .hp-hero__content {
          padding: 2rem 1.25rem;
      }

  .hp-hero__title {
          font-size: 1.85rem;
      }

  .hp-hero__sub {
          font-size: 1rem;
      }

  .hp-panic {
          grid-template-columns: 1fr;
      }

  .hp-proof__grid {
          grid-template-columns: 1fr;
          gap: 1.5rem;
      }

  .hp-proof__number {
          font-size: 1.75rem;
      }

}

@media (max-width: 480px) {
  .hp-hero__title {
          font-size: 1.6rem;
      }

}

/* === DÉMO COMPARATEUR — fond sombre pour se démarquer === */
.hp-demo {
    padding: 4.5rem 0;
    background: #1a3d28; /* vert très foncé, cohérent avec ta charte */
    color: #f4f4f4;
}

.hp-demo__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

@media (max-width: 768px) {
  .hp-demo__grid { grid-template-columns: 1fr; }

}

.hp-demo__title {
    color: #ffffff;
    font-size: 1.85rem;
    margin: 0.5rem 0 1rem;
}

.hp-demo .hp-label {
    display: inline-block;
    background: #ffffff;
    color: #1a3d28;
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
}

.hp-demo__points {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.hp-demo__points li {
    color: #e0ece3;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.hp-demo .btn-lowtech {
    background: #ffffff;
    color: #1a3d28;
    font-weight: 700;
    border: none;
}

.hp-demo .btn-lowtech:hover {
    background: #f4f4f4;
}

/* Cadre vidéo (ratio 16:9 responsive) */
.hp-demo__video-wrap {
    position: relative;
    padding-top: 56.25%;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.15);
}

.hp-demo__video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Aperçu statique du Panier Vivant (en attendant la vidéo) : même cadre 16/9. */
.hp-demo__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.15);
}

body.home .hp-demo__media img {
    border-radius: var(--hp-rayon);
}

/* === BENTO OUTILS — Algues / Électricité / SOS === */
.hp-bento { padding: 4rem 0; background: #fafafa; }

.hp-bento__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.75rem;
}

@media (max-width: 900px) {
  .hp-bento__grid { grid-template-columns: 1fr; }

}

.hp-bento__item {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2.25rem 2rem;
    border-radius: 20px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hp-bento__item:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0,0,0,0.12);
}

.hp-bento__deco {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    opacity: 0.5;
    filter: blur(4px);
    z-index: 0;
}

.hp-bento__item--algues { background: linear-gradient(160deg, #eef8ef 0%, #ffffff 65%); }

.hp-bento__item--algues .hp-bento__deco { background: radial-gradient(circle, #a5d6a7, transparent 70%); }

.hp-bento__item--algues .hp-bento__icon-wrap { background: #2e7d32; }

.hp-bento__item--algues .hp-bento__badge { color: #2e7d32; }

.hp-bento__item--elec { background: linear-gradient(160deg, #fff8ec 0%, #ffffff 65%); }

.hp-bento__item--elec .hp-bento__deco { background: radial-gradient(circle, #ffcc80, transparent 70%); }

.hp-bento__item--elec .hp-bento__icon-wrap { background: #ef6c00; }

.hp-bento__item--elec .hp-bento__badge { color: #ef6c00; }

.hp-bento__item--sos {
    background: linear-gradient(160deg, #fdecea 0%, #ffffff 65%);
    border: 1px solid #f3c1bd;
}

.hp-bento__item--sos .hp-bento__deco { background: radial-gradient(circle, #ef9a9a, transparent 70%); }

.hp-bento__item--sos .hp-bento__icon-wrap { background: #e53935; }

.hp-bento__item--sos .hp-bento__badge { color: #e53935; }

.hp-bento__icon-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    margin-bottom: 1.25rem;
    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

.hp-bento__icon { font-size: 1.6rem; line-height: 1; filter: grayscale(1) brightness(10); }

.hp-bento__body { position: relative; z-index: 1; }

.hp-bento__badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}

.hp-bento__body h3 { margin: 0 0 0.6rem; font-size: 1.3rem; }

.hp-bento__body p { color: #555; margin: 0 0 1.25rem; line-height: 1.5; }

.hp-bento__cta-arrow { transition: transform 0.2s ease; }

.hp-bento__item:hover .hp-bento__cta-arrow { transform: translateX(4px); }

.hp-bento__item--large { padding: 2.75rem 2.25rem; }

.hp-bento__item--large .hp-bento__icon-wrap { width: 64px; height: 64px; border-radius: 16px; }

.hp-bento__item--large .hp-bento__icon { font-size: 1.9rem; }

.hp-bento__item--large h3 { font-size: 1.6rem; }

/* === CAPTURE PDF === */
.hp-capture { padding: 4rem 0; background: #f4f8f4; }

.hp-capture__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3rem; align-items: center; }

@media (max-width: 768px) {
  .hp-capture__grid { grid-template-columns: 1fr; }

}

.hp-capture__mockup img { width: 100%; max-width: 320px; border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,0.15); }

.hp-capture__badge { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--color-primary, #2e7d32); margin-bottom: 0.5rem; }

.hp-capture__title { font-size: 1.75rem; margin: 0 0 0.75rem; }

.hp-capture__promise { color: #555; margin-bottom: 1rem; }

.hp-capture__benefits { list-style: none; padding: 0; margin: 0 0 1.5rem; }

.hp-capture__benefits li { margin-bottom: 0.4rem; }

/* L'étiquette du champ email utilise désormais .screen-reader-text, définie une fois
   pour tout le thème dans base.css. La classe .hp-lead-label qui vivait ici faisait
   doublon avec elle. */

.hp-lead-form input[type="email"] {
    width: 100%; padding: 0.85rem 1rem; border: 1px solid #ccc; border-radius: var(--aq-rayon);
    margin-bottom: 0.75rem; font-size: 1rem;
}

/* Bouton du formulaire : même rayon que son champ. Il porte la classe .btn-lowtech,
   dont la règle générale (8px, boutons du corps des articles) reste intouchée. */
.hp-lead-form .hp-lead-submit {
    border-radius: var(--aq-rayon);
}

.hp-lead-consent { display: flex; gap: 0.5rem; font-size: 0.85rem; color: #555; margin-bottom: 1rem; align-items: flex-start; }

.hp-lead-msg { margin-top: 0.75rem; font-size: 0.9rem; }

/* === RÉASSURANCE === */
.hp-about { padding: 4rem 0; }

.hp-about__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; align-items: center; }

@media (max-width: 768px) {
  .hp-about__grid { grid-template-columns: 1fr; }

}

.hp-about__photo img { width: 100%; border-radius: 16px; }

.hp-about__text h2 { font-size: 1.5rem; margin: 0.5rem 0 1rem; }

.hp-about__link { font-weight: 700; color: var(--color-primary, #2e7d32); }

.hp-demo .btn-lowtech {
    background: #ffffff !important;
    color: #1a3d28 !important;
    font-weight: 700;
    border: none;
}

.hp-demo .btn-lowtech:hover {
    background: #f4f4f4 !important;
}

/* ====================================
   FAQ HOMEPAGE — hp-faq
   
   ==================================== */
.hp-faq {
    padding: 4rem 0;
    background: white;
}

/* Largeur de lecture confortable, mais CENTRÉE dans le conteneur de 1200 px
   (sans margin auto, la liste restait collée à gauche avec 600 px de vide à droite). */
.hp-faq__list,
.hp-faq .hp-section-head {
    max-width: 780px;
    margin-inline: auto;
}

.hp-faq__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Même logique pour l'intro éditoriale : ~68 caractères par ligne au lieu de ~120. */
.hp-intro p {
    max-width: 68ch;
    margin-inline: auto;
}

/* ── CARD ACCORDÉON ── */
.hp-faq__item {
    background: var(--color-bg);
    border: 1.5px solid transparent;
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.hp-faq__item:hover {
    border-color: var(--color-accent);
}

.hp-faq__item[open] {
    background: white;
    border-color: var(--color-primary);
    box-shadow: 0 6px 20px rgba(45, 106, 79, 0.08);
}

/* ── QUESTION (summary) ── */
.hp-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--color-dark);
    cursor: pointer;
    list-style: none;
    transition: var(--transition-smooth);
}

/* Supprime le triangle natif (Chrome/Safari + Firefox) */
.hp-faq__question::-webkit-details-marker {
    display: none;
}

.hp-faq__question::marker {
    content: '';
}

.hp-faq__item:hover .hp-faq__question {
    color: var(--color-primary);
}

/* Chevron personnalisé */
.hp-faq__question::after {
    content: '';
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-right: 2.5px solid var(--color-primary);
    border-bottom: 2.5px solid var(--color-primary);
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    margin-top: -4px;
}

.hp-faq__item[open] .hp-faq__question::after {
    transform: rotate(-135deg);
    margin-top: 4px;
}

/* ── RÉPONSE ── */
.hp-faq__answer {
    padding: 0 1.5rem 1.5rem;
    animation: hp-faq-fade 0.25s ease;
}

.hp-faq__answer p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text);
    margin: 0;
}

@media (max-width: 768px) {
  .hp-faq {
          padding: 2.5rem 0;
      }

  .hp-faq__question {
          padding: 1rem 1.15rem;
          font-size: 0.95rem;
      }

  .hp-faq__answer {
          padding: 0 1.15rem 1.15rem;
      }

  .hp-faq__answer p {
          font-size: 0.9rem;
      }

}

/* ====================================
   CARTES PAR ZONE — hp-zones
  
   ==================================== */
.hp-zones {
    padding: 4.5rem 0;
    background: linear-gradient(180deg, #ffffff 0%, var(--color-bg) 100%);
}

.hp-section-desc {
    font-size: 1rem;
    color: var(--color-text-light);
    max-width: 640px;
    margin: 0.5rem 0 0;
    line-height: 1.6;
}

/* ── GRILLE DES ZONES ── */
.hp-zones__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
    margin-top: 2.25rem;
}

/* ── CARD ZONE — relief marqué + bande couleur par zone ── */
.hp-zone-card {
    position: relative;
    background: white;
    border-radius: 18px;
    padding: 1.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border-top: 4px solid var(--color-accent);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hp-zone-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(45, 106, 79, 0.14);
}

/* Une couleur d'accent par zone, rattachée à la zone et non à sa position :
   une zone sans espèce (carte masquée) ne décale plus les couleurs des suivantes. */
.hp-zone-card--amazonien         { border-top-color: #2e7d32; } /* vert */
.hp-zone-card--asiatique         { border-top-color: #ef6c00; } /* orange */
.hp-zone-card--africain          { border-top-color: #8d6e63; } /* terre */
.hp-zone-card--amerique-centrale { border-top-color: #0288d1; } /* bleu */
.hp-zone-card--afrique-lacs      { border-top-color: #00838f; } /* bleu lagon */
.hp-zone-card--europe            { border-top-color: #5c6bc0; } /* bleu-violet */

/* Sortie vers le catalogue complet : le bloc ne montre qu'un échantillon d'origines,
   les autres restent joignables en un clic. */
.hp-zones__toutes {
    margin: 1.75rem 0 0;
    text-align: center;
}

.hp-zones__toutes a {
    font-weight: 600;
    color: var(--color-primary);
}

/* Nombre impair de cartes : la dernière occupe toute la ligne au lieu de rester seule
   dans une demi-colonne ; ses espèces se répartissent alors sur la largeur. */
.hp-zones__grid .hp-zone-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.hp-zones__grid .hp-zone-card:last-child:nth-child(odd) .hp-zone-card__species {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem;
}

.hp-zone-card__header {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
}

.hp-zone-card__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    background: var(--color-bg);
    border-radius: 12px;
}

.hp-zone-card__header h3 {
    font-size: 1.25rem;
    color: var(--color-dark);
    margin: 0 0 0.35rem;
}

.hp-zone-card__header p {
    font-size: 0.88rem;
    color: var(--color-text-light);
    line-height: 1.55;
    margin: 0;
}

/* ── LISTE D'ESPÈCES (dans chaque zone) ── */
.hp-zone-card__species {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.hp-species-card {
    display: flex;
    flex-wrap: wrap; /* évite le débordement horizontal si photo+nom+badge ne tiennent pas sur une ligne */
    align-items: center;
    gap: 0.5rem 0.9rem;
    padding: 0.65rem 0.85rem;
    background: var(--color-bg);
    border-radius: 12px;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: var(--transition-smooth);
}

.hp-species-card:hover {
    background: white;
    border-color: var(--color-primary);
    transform: translateX(3px);
    box-shadow: 0 6px 18px rgba(45, 106, 79, 0.12);
}

.hp-species-card img {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Bloc nom + nom latin : prend l'espace disponible, badge poussé à droite.
   min-width:0 + overflow-wrap permet au flex de rétrécir sous le mot le plus
   long au lieu de forcer un débordement horizontal de toute la card. */
.hp-species-card__info {
    flex: 1 1 140px;
    min-width: 0;
    overflow-wrap: break-word;
}

.hp-species-card__nom {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.3;
    overflow-wrap: break-word;
}

.hp-species-card__sci {
    display: block;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--color-text-light);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badge "Vérifier compatibilité" — largeur fixe, jamais coupé sur 2 lignes */
.hp-species-card__badge {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-primary);
    background: rgba(45, 106, 79, 0.1);
    padding: 0.4rem 0.75rem;
    border-radius: 20px;
    white-space: nowrap;
    line-height: 1;
}

.hp-species-card:hover .hp-species-card__badge {
    background: var(--color-primary);
    color: white;
}

/* ── LIEN "VOIR TOUTES LES ESPÈCES" ── */
.hp-zone-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}

.hp-zone-card__more:hover {
    color: var(--color-secondary);
}

@media (max-width: 900px) {
  .hp-zones__grid {
          grid-template-columns: 1fr;
      }

}

@media (max-width: 768px) {
  .hp-zones {
          padding: 2.5rem 0;
      }

  .hp-zone-card {
          padding: 1.25rem;
      }

  .hp-species-card__badge {
          font-size: 0.65rem;
          padding: 0.35rem 0.6rem;
      }

}

/* ══════════════════════════════════════════════════════════════════════════════
   REFONTE DOUCE — page d'accueil
   ══════════════════════════════════════════════════════════════════════════════
   Tout est scopé à body.home : aucune autre page n'est touchée, et la
   spécificité (0,2,0) l'emporte sur les règles d'origine de base.css sans
   recourir à !important. Zéro dépendance, zéro image, CSS pur.

   Trois partis pris :
     • le blanc pur quitte les FONDS pour ne rester que sur les CARTES, qui
       gagnent ainsi leur relief sans ombre appuyée ;
     • les sections claires alternent entre deux écrus très proches au lieu de
       blanc / gris — l'alternance se lit comme un rythme, plus comme un peigne ;
     • les sections vert forêt deviennent des dalles arrondies posées sur
       l'écru : la coupure nette laisse place à un seuil assumé.
   ══════════════════════════════════════════════════════════════════════════════ */

body.home {
    /* Fonds */
    --hp-fond:       #f7f9f6;   /* écru vert d'eau, fond général */
    --hp-fond-alt:   #f1f5ef;   /* variante d'alternance, à peine plus soutenue */
    --hp-carte:      #ffffff;   /* le blanc pur ne sert plus qu'aux cartes */

    /* Relief */
    --hp-bordure:       1px solid rgba(15, 56, 38, 0.07);
    --hp-ombre:         0 4px 20px -2px rgba(15, 56, 38, 0.05);
    --hp-ombre-survol:  0 14px 32px -8px rgba(15, 56, 38, 0.16);

    /* Dalles sombres */
    --hp-sombre-haut: #1f4733;
    --hp-sombre-bas:  #16301f;

    /* Géométrie et mouvement */
    --hp-rayon:      16px;
    --hp-rayon-sm:   12px;
    --hp-rayon-dalle: 32px;
    --hp-elan:       0.25s cubic-bezier(0.4, 0, 0.2, 1);

    background: var(--hp-fond);
}

/* ── 1. FONDS : le blanc pur disparaît des sections ───────────────────────── */

/* Alternance stricte des deux écrus entre les sections claires, dans l'ordre de
   la page. Deux blocs gardent volontairement un fond continu : le panneau
   d'accueil (recherche + pont + intro, lu comme un seul bloc sous le hero) et
   « À propos », accolé à la dalle des chiffres.
     demo (dalle sombre) → zones [fond] → bento [alt] → capture [fond]
     → articles [alt] → faq [fond] → proof (dalle sombre) → about [fond] */
body.home .hp-search,
body.home .hp-intro,
body.home .hp-zones,
body.home .hp-capture,
body.home .hp-faq,
body.home .hp-about {
    background: var(--hp-fond);
    border-top: 0;
    border-bottom: 0;
}

body.home .hp-bento,
body.home .hp-articles {
    background: var(--hp-fond-alt);
    border-top: 0;
    border-bottom: 0;
}

/* ── 2. SEUILS clair ↔ sombre ─────────────────────────────────────────────
   Les deux sections vert forêt étaient des aplats à bord franc, collés entre
   deux aplats blancs : d'où l'effet de hachage vertical. Elles deviennent des
   dalles arrondies, dégradées (plus claires en haut, là où l'œil arrive), avec
   un halo vert diffus qui évite le à-plat et une ombre portée qui les pose sur
   l'écru au lieu de les y encastrer. */

body.home .hp-demo,
body.home .hp-proof {
    position: relative;
    border-radius: var(--hp-rayon-dalle);
    background:
        radial-gradient(130% 90% at 50% 0%, rgba(116, 198, 157, 0.12), transparent 62%),
        linear-gradient(180deg, var(--hp-sombre-haut) 0%, var(--hp-sombre-bas) 100%);
    box-shadow: 0 18px 50px -22px rgba(15, 56, 38, 0.5);
}

body.home .hp-demo > .container,
body.home .hp-proof > .container {
    position: relative;
    z-index: 1;
}

/* ── 3. PANNEAU D'ACCUEIL : hero + recherche + promesse ───────────────────
   La barre de recherche flottait au centre d'un grand aplat blanc, détachée du
   hero. Elle remonte chevaucher le bas de l'image et devient une carte : le
   hero, la recherche et la phrase de méthode se lisent comme un seul bloc
   d'accueil, et l'espace vide sous l'image disparaît. */

/* Hauteur minimale seulement au-dessus de 900 px ; en mobile le hero suit son contenu. */
@media (min-width: 900px) {
    body.home .hp-hero {
        min-height: 78vh;
    }
}

/* La barre de recherche est le SEUL élément flottant qui chevauche le bas du hero.
   L'ancrage de preuve est remonté dans le hero (.hp-signature) : deux pastilles
   blanches à ombre portée superposées se disputaient l'attention. */
body.home .hp-search {
    position: relative;
    z-index: 3;
    margin-top: -2.5rem;
    padding: 0;
}

body.home .hp-search__form {
    max-width: 760px;
    padding: 0.4rem;
    background: var(--hp-carte);
    border: var(--hp-bordure);
    border-radius: var(--hp-rayon);
    box-shadow: 0 14px 40px -12px rgba(15, 56, 38, 0.3);
}

body.home .hp-search__form:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 14px 40px -12px rgba(15, 56, 38, 0.3),
                0 0 0 3px rgba(45, 106, 79, 0.14);
}

body.home .hp-search__input {
    padding: 0.9rem 1.1rem;
}

body.home .hp-search__btn {
    border-radius: var(--hp-rayon-sm);
    padding: 0.85rem 1.2rem;
}

/* Une seule largeur pour le bloc éditorial qui suit le hero : celle de la carte de
   recherche, 760 px. Avant, la zone empilait quatre largeurs et quatre bords gauches
   différents — 741, 535, 760 puis 1168 px. Les sections en grille qui suivent gardent
   le conteneur de 1200 px du site, qui est sa trame. */
body.home .hp-intro {
    padding-top: 2.25rem;
}

body.home .hp-intro__text {
    max-width: 760px;
    margin-inline: auto;
}

/* .hp-intro p limite à 68ch et recentre : l'accroche et le lien, eux, occupaient
   toute la largeur du bloc. Résultat, trois bords gauches à 28 px d'écart dans un
   bloc censé n'en avoir qu'un. La largeur est désormais portée par le conteneur. */
body.home .hp-intro__text p {
    max-width: none;
    margin-inline: 0;
}

/* ── 4. CARTES : relief doux, angles cohérents, survol vivant ─────────────
   Une seule écriture d'ombre et de bordure pour tous les blocs de contenu, au
   lieu de quatre réglages divergents. Le blanc des cartes ressort désormais
   naturellement sur l'écru, ce qui permet d'alléger l'ombre au lieu de la
   renforcer. */

body.home .hp-card,
body.home .hp-zone-card,
body.home .hp-bento__item {
    background: var(--hp-carte);
    border: var(--hp-bordure);
    border-radius: var(--hp-rayon);
    box-shadow: var(--hp-ombre);
    transition: transform var(--hp-elan), box-shadow var(--hp-elan);
}

body.home .hp-card:hover,
body.home .hp-zone-card:hover,
body.home .hp-bento__item:hover {
    transform: translateY(-3px);
    box-shadow: var(--hp-ombre-survol);
}

/* Les teintes de fond des tuiles bento sont conservées : elles portent le code
   couleur de chaque outil. Seuls le rayon et le relief sont harmonisés. */
body.home .hp-bento__item--algues { background: linear-gradient(160deg, #eef8ef 0%, var(--hp-carte) 65%); }
body.home .hp-bento__item--elec   { background: linear-gradient(160deg, #fff8ec 0%, var(--hp-carte) 65%); }
body.home .hp-bento__item--sos    { background: linear-gradient(160deg, #fdecea 0%, var(--hp-carte) 65%); border-color: rgba(229, 57, 53, 0.16); }

body.home .hp-bento__item--large { border-radius: var(--hp-rayon); }

/* La bordure unifiée ci-dessus écrasait la largeur de la bande d'accent —
   nth-child ne repose que la COULEUR, pas l'épaisseur. On la repose ici : 3px
   au lieu des 4px d'origine, assez pour porter le code couleur du biotope sans
   retrouver l'effet « boîte ». */
body.home .hp-zone-card {
    border-top-width: 3px;
}

body.home .hp-zone-card__icon,
body.home .hp-species-card {
    border-radius: var(--hp-rayon-sm);
}

body.home .hp-species-card {
    background: var(--hp-fond);
    border: var(--hp-bordure);
}

body.home .hp-species-card:hover {
    background: var(--hp-carte);
    border-color: var(--color-primary);
    transform: translateX(3px);
    box-shadow: var(--hp-ombre);
}

body.home .hp-card__img-link img,
body.home .hp-capture__mockup img {
    border-radius: 0;
}

body.home .hp-capture__mockup img {
    border-radius: var(--hp-rayon-sm);
    box-shadow: 0 16px 36px -14px rgba(15, 56, 38, 0.35);
}

body.home .hp-card:hover .hp-card__img-link img {
    transform: scale(1.04);
}

body.home .hp-faq__item {
    background: var(--hp-carte);
    border: var(--hp-bordure);
    border-radius: var(--hp-rayon-sm);
}

body.home .hp-faq__item[open] {
    border-color: rgba(45, 106, 79, 0.35);
    box-shadow: var(--hp-ombre);
}

body.home .hp-lead-form input[type="email"] {
    border: var(--hp-bordure);
    border-radius: var(--hp-rayon-sm);
    background: var(--hp-carte);
}

body.home .hp-lead-form input[type="email"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.14);
}

body.home .hp-demo__video-wrap {
    border-radius: var(--hp-rayon);
}

/* ── 5. ENCART D'AUTORITÉ : chiffres + auteur ─────────────────────────────
   La barre de chiffres et le bloc auteur se suivent dans le markup mais se
   lisaient comme deux sections sans rapport. Les chiffres deviennent le
   chapeau sombre d'un même ensemble, et la présentation la carte blanche qui
   s'y adosse : un seul encart de réassurance, pas deux bandeaux. */

body.home .hp-proof {
    padding: 2.25rem 0 3.25rem;
}

body.home .hp-proof__number {
    font-size: 2.15rem;
}

/* rgba(255,255,255,0.75) tombait sous le seuil AA sur le nouveau fond : la
   valeur est relevée et rendue opaque pour être vérifiable. */
body.home .hp-proof__label {
    color: #d3e0d7;
}

body.home .hp-proof__label em {
    color: #b9cdbf;
    font-style: italic;
}

body.home .hp-about {
    padding-top: 0;
}

body.home .hp-about > .container {
    position: relative;
    z-index: 2;
}

body.home .hp-about__grid {
    margin-top: -2rem;
    padding: 2.25rem;
    background: var(--hp-carte);
    border: var(--hp-bordure);
    border-radius: var(--hp-rayon);
    box-shadow: var(--hp-ombre);
    gap: 2.25rem;
    align-items: center;
}

body.home .hp-about__photo img {
    border-radius: var(--hp-rayon-sm);
    box-shadow: var(--hp-ombre);
}

body.home .hp-about__text h2 {
    font-size: 1.6rem;
    line-height: 1.25;
}

body.home .hp-about__link {
    display: inline-block;
    margin-top: 0.35rem;
}

/* ── 6. CONTRASTES WCAG AA ────────────────────────────────────────────────
   Ratios mesurés sur la page rendue, texte normal → seuil 4.5:1.
   Le fond du hero est une photo sous le voile plateau #14301f à 65 % : les ratios
   sont donc mesurés pixel par pixel sur la composition réelle (photo + voile) sous
   chaque bloc de texte, et non sur une couleur de fond théorique. */

body.home .hp-hero__eyebrow {
    /* #e4f7e9 était calibré sur l'aplat vert (#2d7d46, 4,54:1) ; sur la photo voilée il
       retombe à 4,38:1. Blanc plein : 4,90:1 sur le pire pixel mesuré. */
    color: #fff;
}

body.home .hp-bento__item--elec .hp-bento__badge {
    color: #b35300;   /* 2.92 → 4.79 */
}

body.home .hp-bento__item--sos .hp-bento__badge {
    color: #c62828;   /* 3.70 → 4.92 */
}

/* Le bouton principal .btn-lowtech (2,87:1) a été corrigé globalement dans
   base.css : la surcharge qui vivait ici pour la seule page d'accueil a été
   retirée, elle faisait désormais doublon. L'inversion sur fond sombre
   (.hp-demo .btn-lowtech, blanc plein) est déclarée plus haut dans ce fichier
   et reste valable. */

/* ── 7. RESPONSIVE ────────────────────────────────────────────────────────
   Le chevauchement du panneau de recherche et de l'encart d'autorité est
   réduit sur petit écran, où quelques pixels de recouvrement suffisent à
   relier deux blocs sans rogner le contenu. */

@media (max-width: 768px) {

    /* Boutons flottants génériques (.mobile-nav-buttons, footer.php) masqués ici.
       Étant en position: fixed, ils traversent la grille « panique » du hero à une
       hauteur qui dépend du viewport : à 375×780 ils effleurent le 4e bouton, à
       375×667 ils recouvrent le bord droit de « Mon eau est trouble ». Aucun décalage
       vertical ne règle tous les cas, et réserver la bande de droite ferait passer
       « Le moins d'entretien possible » sur deux lignes.
       L'accueil a déjà sa navigation : 5 CTA dans le hero puis la recherche.
       Même parti pris que hub-energie.css pour le hub Énergie. */
    body.home .mobile-nav-buttons {
        display: none;
    }

    body.home .hp-search { margin-top: -1.75rem; }
    body.home .hp-search__form { padding: 0.3rem; }
    body.home .hp-search__input { padding: 0.75rem 0.9rem; }
    body.home .hp-search__btn { padding: 0.7rem 0.9rem; }

    body.home .hp-intro { padding-top: 1.5rem; }

    body.home .hp-demo,
    body.home .hp-proof { border-radius: 20px; }

    body.home .hp-proof { padding: 2rem 0 2.75rem; }

    body.home .hp-about__grid {
        margin-top: -1.5rem;
        padding: 1.5rem 1.25rem;
        gap: 1.5rem;
    }

    body.home .hp-about__photo img { max-width: 220px; }
    body.home .hp-about__text h2 { font-size: 1.35rem; }
}

@media (max-width: 480px) {
    body.home .hp-demo,
    body.home .hp-proof { border-radius: 16px; }

    body.home .hp-about__grid { padding: 1.25rem 1rem; }
}

/* ── 8. MOUVEMENT RÉDUIT ──────────────────────────────────────────────────
   Les micro-interactions sont un agrément, jamais un porteur d'information :
   elles s'effacent sans rien coûter à la compréhension. */

@media (prefers-reduced-motion: reduce) {
    body.home .hp-card,
    body.home .hp-zone-card,
    body.home .hp-bento__item,
    body.home .hp-species-card,
    body.home .hp-card__img-link img {
        transition: none;
    }

    body.home .hp-card:hover,
    body.home .hp-zone-card:hover,
    body.home .hp-bento__item:hover,
    body.home .hp-species-card:hover,
    body.home .hp-card:hover .hp-card__img-link img {
        transform: none;
    }
}