/**
 * Halo sur le lac — Page FAQ (template-faq.php)
 * =============================================================================
 * Design en symbiose avec :
 *   - plans-unites.css (variables --halo-*, palette, typographie, .halo-btn)
 *   - halo-form.css    (frame Gravity Forms)
 *
 * Les variables --halo-* et le scope .halo-btn sont redéclarés ici en local
 * (pattern identique à halo-form.css) afin que la page FAQ soit autonome :
 * plans-unites.css n'est chargé QUE sur la page Plans des unités.
 *
 * Echelle typographique conforme à la "Règle Graph." Halo :
 *   H1=100, H2=80, H3=60, H4=40, H5=24, P=14 (en valeurs max clamp)
 * Polices : Poppins (titres iconiques) + Urbanist (corps + boutons + sous-titres)
 * =============================================================================
 */

/* ===========================================================================
 * 0. VARIABLES (autonomes, repris de plans-unites.css)
 * ========================================================================= */
.halo-faq-page {
    --halo-white:        #FFFFFF;
    --halo-primary:      #EFF0F0;
    --halo-secondary:    #84A09B;   /* sauge */
    --halo-accent:       #1E314F;   /* marine */
    --halo-olive:        #899B43;
    --halo-bleu-gris:    #556879;
    --halo-text:         #7A7A7A;
    --halo-border:       #E2E2E2;
    --halo-border-frame: #878787;

    --halo-poppins:  "Poppins",  "Helvetica Neue", Arial, sans-serif;
    --halo-urbanist: "Urbanist", "Helvetica Neue", Arial, sans-serif;

    --halo-h1: clamp(48px, 6.5vw, 100px);
    --halo-h2: clamp(36px, 5.5vw, 80px);
    --halo-h3: clamp(28px, 4vw, 56px);
    --halo-h4: clamp(20px, 2.5vw, 40px);
    --halo-h5: clamp(14px, 1.6vw, 22px);
    --halo-p:  14px;

    --halo-section-pad-v: clamp(60px, 8vw, 120px);
    --halo-section-pad-h: clamp(24px, 5vw, 80px);
    --halo-inner-max:     1280px;

    --halo-header-h: 187px;

    font-family: var(--halo-urbanist);
    color: var(--halo-text);
    background: var(--halo-white);
}

@media (max-width: 1200px) {
    .halo-faq-page { --halo-header-h: 220px; }
}
@media (max-width: 767px) {
    .halo-faq-page { --halo-header-h: 220px; }
}

.halo-faq-page,
.halo-faq-page *,
.halo-faq-page *::before,
.halo-faq-page *::after {
    box-sizing: border-box;
}

/* ===========================================================================
 * 1. HERO — fond blanc, signature graphique discrète
 * ========================================================================= */
.halo-faq-hero {
    position: relative;
    background: var(--halo-white);
    overflow: hidden;
    padding-top: calc(var(--halo-header-h) + clamp(40px, 6vw, 100px));
    padding-bottom: clamp(60px, 8vw, 120px);
    padding-left: var(--halo-section-pad-h);
    padding-right: var(--halo-section-pad-h);
}

/* Liseré olive vertical à gauche — référence aux barres olive des réponses */
.halo-faq-hero::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--halo-header-h) + clamp(40px, 6vw, 100px));
    bottom: clamp(60px, 8vw, 120px);
    width: 2px;
    background: var(--halo-olive);
    transform-origin: top;
}

.halo-faq-hero__inner {
    position: relative;
    max-width: var(--halo-inner-max);
    margin: 0 auto;
    z-index: 2;
}

/* Anneaux "halo" en arrière-plan — signature visuelle du nom de marque */
.halo-faq-hero__halo {
    position: absolute;
    top: 50%;
    right: -8%;
    width: clamp(360px, 55vw, 720px);
    height: auto;
    transform: translateY(-50%);
    color: var(--halo-accent);
    opacity: 0.07;
    pointer-events: none;
    z-index: 1;
}

@media (max-width: 768px) {
    .halo-faq-hero__halo {
        right: -25%;
        top: 65%;
        width: 480px;
        opacity: 0.05;
    }
}

.halo-faq-hero__content {
    position: relative;
    max-width: 880px;
    z-index: 2;
    padding-left: clamp(20px, 3vw, 48px);
}

/* H5 olive uppercase — eyebrow */
.halo-faq-hero__eyebrow {
    font-family: var(--halo-urbanist);
    font-weight: 600;
    font-size: clamp(11px, 1vw, 13px);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--halo-olive);
    margin: 0 0 clamp(16px, 2vw, 28px);
}

/* H1 — Poppins Light, marine */
.halo-faq-hero__title {
    font-family: var(--halo-poppins);
    font-weight: 300;
    font-size: var(--halo-h2);
    line-height: 1.05;
    letter-spacing: 1.2px;
    color: var(--halo-accent);
    margin: 0;
    max-width: 16ch;
}

.halo-faq-hero__intro {
    margin-top: clamp(24px, 3vw, 36px);
    font-family: var(--halo-urbanist);
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.75;
    color: var(--halo-text);
    max-width: 60ch;
}

.halo-faq-hero__intro p {
    margin: 0 0 1em;
}
.halo-faq-hero__intro p:last-child {
    margin-bottom: 0;
}

/* ===========================================================================
 * 2. ACCORDION — fond #EFF0F0, liste plate
 * ========================================================================= */
.halo-faq {
    background: var(--halo-primary);
    padding: var(--halo-section-pad-v) var(--halo-section-pad-h);
}

.halo-faq__inner {
    max-width: 960px;
    margin: 0 auto;
}

.halo-faq__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.halo-faq__item {
    background: var(--halo-white);
    border: 1px solid var(--halo-border);
    margin-top: -1px; /* fusion bordures verticales */
    transition: box-shadow 0.25s ease;
}

.halo-faq__item:first-child { margin-top: 0; }

.halo-faq__item.is-open {
    box-shadow: 0 4px 24px rgba(30, 49, 79, 0.06);
    position: relative;
    z-index: 2;
}

/* H2 wrapper du bouton — pas de style propre, hérite du bouton */
.halo-faq__heading {
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
}

/* Bouton trigger : pleine largeur, question + numero + chevron */
.halo-faq__trigger {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(16px, 2vw, 28px);
    padding: clamp(20px, 2.5vw, 32px) clamp(20px, 3vw, 40px);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: var(--halo-urbanist);
    font-weight: 500;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.4;
    letter-spacing: 0.3px;
    color: var(--halo-accent);
    transition: color 0.2s ease, background 0.2s ease;
}

.halo-faq__trigger:hover {
    color: var(--halo-bleu-gris);
}

.halo-faq__trigger:focus-visible {
    outline: 2px solid var(--halo-olive);
    outline-offset: -2px;
}

/* Numero séquentiel — discret, Urbanist Bold marine */
.halo-faq__num {
    font-family: var(--halo-urbanist);
    font-weight: 700;
    font-size: clamp(13px, 1vw, 15px);
    color: var(--halo-olive);
    letter-spacing: 1px;
    line-height: 1;
    flex-shrink: 0;
    align-self: center;
    transition: color 0.2s ease;
}

.halo-faq__item.is-open .halo-faq__num {
    color: var(--halo-accent);
}

.halo-faq__question {
    font-weight: 500;
    line-height: 1.4;
}

/* Item ouvert : la question passe en bold pour visualiser l'état */
.halo-faq__item.is-open .halo-faq__question {
    font-weight: 600;
}

/* Chevron : carré avec bordure marine, rotation 180° à l'ouverture */
.halo-faq__icon {
    width: clamp(36px, 3.5vw, 44px);
    height: clamp(36px, 3.5vw, 44px);
    display: grid;
    place-items: center;
    border: 1px solid var(--halo-border);
    color: var(--halo-accent);
    background: var(--halo-white);
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.25s ease,
                color 0.25s ease,
                border-color 0.25s ease;
}

.halo-faq__icon svg {
    width: 14px;
    height: 14px;
    display: block;
}

.halo-faq__trigger[aria-expanded="true"] .halo-faq__icon {
    transform: rotate(180deg);
    background: var(--halo-olive);
    border-color: var(--halo-olive);
    color: var(--halo-white);
}

/* Panneau réponse : transition propre via grid-template-rows
   (height auto sans JS de mesure, supporté Chrome 117+/Safari 17.4+/FF 117+) */
.halo-faq__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.halo-faq__panel > .halo-faq__answer {
    overflow: hidden;
    min-height: 0;
}

.halo-faq__item.is-open .halo-faq__panel {
    grid-template-rows: 1fr;
}

/* Contenu réponse : barre olive verticale + texte gris */
.halo-faq__answer {
    padding: 0 clamp(20px, 3vw, 40px) 0 clamp(20px, 3vw, 40px);
}

.halo-faq__answer-inner {
    /* surcharge via .halo-faq__answer > div interne wp_kses */
}

.halo-faq__item.is-open .halo-faq__answer {
    padding-bottom: clamp(24px, 3vw, 36px);
}

.halo-faq__answer p,
.halo-faq__answer ul,
.halo-faq__answer ol {
    font-family: var(--halo-urbanist);
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.75;
    color: var(--halo-text);
    margin: 0 0 1em;
    padding-left: clamp(20px, 2.5vw, 36px);
    border-left: 2px solid var(--halo-olive);
}

.halo-faq__answer p:last-child,
.halo-faq__answer ul:last-child,
.halo-faq__answer ol:last-child {
    margin-bottom: 0;
}

/* Listes dans les réponses : bullets olive */
.halo-faq__answer ul,
.halo-faq__answer ol {
    list-style: none;
    padding-left: clamp(20px, 2.5vw, 36px);
}

.halo-faq__answer ul li,
.halo-faq__answer ol li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 6px;
    line-height: 1.6;
}

.halo-faq__answer ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    background: var(--halo-olive);
    border-radius: 50%;
}

.halo-faq__answer ol {
    counter-reset: halo-faq-li;
}

.halo-faq__answer ol li {
    counter-increment: halo-faq-li;
}

.halo-faq__answer ol li::before {
    content: counter(halo-faq-li) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--halo-olive);
    font-weight: 700;
    font-size: 14px;
}

/* Liens dans les réponses */
.halo-faq__answer a {
    color: var(--halo-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.halo-faq__answer a:hover {
    color: var(--halo-secondary);
}

/* Etat vide */
.halo-faq__empty {
    text-align: center;
    font-family: var(--halo-urbanist);
    font-size: 16px;
    color: var(--halo-text);
    font-style: italic;
    padding: 60px 20px;
}

/* ===========================================================================
 * 3. CTA FINAL — fond marine pleine largeur
 * ========================================================================= */
.halo-faq-cta {
    background: var(--halo-accent);
    color: var(--halo-white);
    padding-top: clamp(60px, 8vw, 100px);
    /* Le footer Elementor (template 287) a un logo flottant en
       position:absolute; top:-108px qui chevauche cette section.
       On reserve 108px + un coussin visuel pour que le bouton "Nous ecrire"
       ne soit pas trop pres du logo. */
    padding-bottom: calc(clamp(60px, 8vw, 100px) + 108px);
    padding-left: var(--halo-section-pad-h);
    padding-right: var(--halo-section-pad-h);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Liseré olive horizontal en haut — continuité visuelle du hero */
.halo-faq-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(40px, 6vw, 80px);
    height: 2px;
    background: var(--halo-olive);
}

.halo-faq-cta__inner {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
}

.halo-faq-cta__eyebrow {
    font-family: var(--halo-urbanist);
    font-weight: 600;
    font-size: clamp(11px, 1vw, 13px);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--halo-secondary);
    margin: 0 0 clamp(14px, 1.8vw, 22px);
}

.halo-faq-cta__title {
    font-family: var(--halo-poppins);
    font-weight: 300;
    font-size: var(--halo-h3);
    line-height: 1.15;
    letter-spacing: 0.8px;
    color: var(--halo-white);
    margin: 0 0 clamp(14px, 2vw, 24px);
}

.halo-faq-cta__subtitle {
    font-family: var(--halo-urbanist);
    font-weight: 400;
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 clamp(28px, 3.5vw, 44px);
}

.halo-faq-cta__btn {
    display: inline-flex;
}

/* ===========================================================================
 * 4. SCOPE .halo-btn (autonome — repris de plans-unites.css)
 *    Limité aux variants utilisés sur la page FAQ : --ghost-filled
 * ========================================================================= */
.halo-faq-page .halo-btn {
    display: inline-flex;
    align-items: center;
    gap: clamp(10px, 1.2vw, 16px);
    padding: 16px 30px;
    font-family: var(--halo-urbanist);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    border-radius: 0;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    background: transparent;
    color: var(--halo-accent);
    white-space: nowrap;
}

.halo-faq-page .halo-btn__arrow {
    font-size: 1.25em;
    line-height: 1;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.halo-faq-page .halo-btn:hover .halo-btn__arrow,
.halo-faq-page .halo-btn:focus-visible .halo-btn__arrow {
    transform: translateX(5px);
}

.halo-faq-page .halo-btn--ghost-filled {
    background: var(--halo-secondary);
    border-color: var(--halo-secondary);
    color: var(--halo-white);
}

.halo-faq-page .halo-btn--ghost-filled:hover,
.halo-faq-page .halo-btn--ghost-filled:focus-visible {
    background: var(--halo-olive);
    border-color: var(--halo-olive);
    color: var(--halo-white);
}

/* ===========================================================================
 * 5. RESPONSIVE
 * ========================================================================= */
@media (max-width: 768px) {

    .halo-faq-hero__content { padding-left: 16px; }

    .halo-faq__trigger {
        grid-template-columns: auto 1fr auto;
        gap: 14px;
        padding: 18px 16px;
        font-size: 15px;
    }

    .halo-faq__num { font-size: 13px; }

    .halo-faq__icon {
        width: 36px;
        height: 36px;
    }

    .halo-faq__answer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .halo-faq__answer p,
    .halo-faq__answer ul,
    .halo-faq__answer ol {
        padding-left: 18px;
    }

    .halo-faq-cta__btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .halo-faq__trigger {
        gap: 12px;
        padding: 16px 14px;
    }
}

/* ===========================================================================
 * 6. ACCESSIBILITÉ
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .halo-faq__panel,
    .halo-faq__icon,
    .halo-faq__item,
    .halo-faq__num,
    .halo-faq-page .halo-btn,
    .halo-faq-page .halo-btn__arrow {
        transition: none !important;
    }
}

/* Fallback pour navigateurs ne supportant pas grid-template-rows animation
   (Safari < 17.4). L'item ouvert affiche son panel via display:block et
   max-height suffisamment grand. Pas d'animation mais contenu lisible. */
@supports not (grid-template-rows: 0fr) {
    .halo-faq__panel { display: block; max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
    .halo-faq__item.is-open .halo-faq__panel { max-height: 2000px; }
}

/* Skip link de la page (si déclaré côté template) */
.halo-faq-page .halo-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--halo-accent);
    color: var(--halo-white);
    padding: 10px 20px;
    font-family: var(--halo-urbanist);
    font-size: 14px;
}
.halo-faq-page .halo-skip-link:focus {
    left: 20px;
    top: 20px;
}