/* ==========================================================================
   Header sticky
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-9);
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding: var(--sp-11) var(--sp-13);
}

/* ---- Marque ---------------------------------------------------------- */
.brand {
    display: flex;
    align-items: center;
    gap: var(--sp-9);
    min-height: var(--tap-min); /* le logo est un lien vers l'accueil : cible tactile */
    text-decoration: none;
    color: var(--c-blue);
}

.brand:hover {
    color: var(--c-blue);
}

.brand__mark {
    inline-size: 30px;
    block-size: 30px;
}

.brand__name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.2px;
    white-space: nowrap;
}

/* ---- Actions de droite ------------------------------------------------ */
.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-9);
    margin-left: auto;
    order: 2;
}

/* Le bouton « Devis gratuit » du header n'apparaît qu'en desktop : sur mobile
   il ferait doublon avec le bouton « Devis » de la barre d'action fixe. */
.site-header__quote {
    display: none;
}

/* En 390 px, la ligne du header fait 391 px avec l'icône du téléphone : elle
   passe donc sur deux lignes et double la hauteur du header. Le numéro se
   suffit à lui-même — l'icône n'apparaît qu'à partir du desktop, où la place
   ne manque pas. Les filaires ne montrent d'ailleurs pas d'icône ici. */
.site-header__phone .icon {
    display: none;
}

.burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--tap-min);
    block-size: var(--tap-min);
    border-radius: var(--r-8);
    color: var(--c-body);
}

.burger:hover {
    color: var(--c-blue);
}

/* ---- Navigation ------------------------------------------------------- */
.site-nav {
    order: 3;
    flex-basis: 100%; /* passe sous la ligne marque/actions */
    display: none;
    border-top: 1px solid var(--c-border);
    margin-top: var(--sp-4);
    padding-top: var(--sp-8);
}

.site-nav.is-open {
    display: block;
}

.site-nav__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__item > a,
.nav-disclosure__summary {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    min-height: var(--tap-min);
    padding: var(--sp-8) var(--sp-4);
    box-sizing: border-box;
    color: var(--c-muted);
    font-size: var(--fs-body);
    text-decoration: none;
}

.site-nav__item > a:hover,
.nav-disclosure__summary:hover {
    color: var(--c-blue);
}

/* ---- Sous-menu « Services » (<details> natif) -------------------------- */
.nav-disclosure__summary {
    cursor: pointer;
    list-style: none; /* retire le triangle par défaut */
}

.nav-disclosure__summary::-webkit-details-marker {
    display: none;
}

.nav-disclosure[open] .nav-disclosure__chevron {
    transform: rotate(180deg);
}

.nav-disclosure__panel {
    margin: 0 0 var(--sp-4);
    padding: 0 0 0 var(--sp-13);
    list-style: none;
    border-left: 2px solid var(--c-border);
}

.nav-disclosure__panel a {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: var(--sp-6) var(--sp-8);
    box-sizing: border-box;
    color: var(--c-muted);

    /* 16 px sur mobile : dans le menu burger, ces liens SONT le corps de page.
       Ils redescendent à 13 px en desktop, où la nav est une barre secondaire. */
    font-size: var(--fs-body);
    text-decoration: none;
}

.nav-disclosure__panel a:hover {
    color: var(--c-blue);
}

/* ==========================================================================
   Desktop
   --------------------------------------------------------------------------
   Seuil à 1024 px et non 768 : la navigation compte six entrées depuis
   l'ajout de « Réalisations » et de « Conseils ». Avec « Devis gratuit » et le
   numéro, l'ensemble déborde de 76 px à 768 et de 11 px à 900 — la recette
   l'a mesuré aux deux largeurs. Le menu déroulant reste donc en place jusqu'à
   la tablette en paysage : mieux vaut un burger qu'un header qui déborde.

   Si une septième entrée devait s'ajouter, ce n'est plus le seuil qu'il
   faudrait remonter mais la navigation qu'il faudrait alléger.
   ========================================================================== */
@media (min-width: 1024px) {
    .site-header__inner {
        flex-wrap: nowrap;
        gap: var(--sp-15);
        padding: var(--sp-13) var(--sp-24);
    }

    .burger {
        display: none;
    }

    /* Ordre des filaires en desktop : « Devis gratuit » puis le numéro,
       le numéro restant l'élément le plus à droite. */
    .site-header__quote {
        display: inline-flex;
        order: -1;
    }

    .site-header__phone .icon {
        display: block;
    }

    /* Le numéro passe en orange sur desktop : la barre d'action fixe
       (et donc l'autre bouton orange) n'existe plus à cette largeur. */
    .site-header__phone {
        background: var(--c-orange);
    }

    .site-header__phone:hover {
        background: #e06a24;
    }

    .site-nav {
        order: 0;
        display: block;
        flex-basis: auto;
        border-top: 0;
        margin-top: 0;
        padding-top: 0;
    }

    .site-nav__list {
        flex-direction: row;
        align-items: center;
        gap: var(--sp-15);
    }

    .site-nav__item > a,
    .nav-disclosure__summary,
    .nav-disclosure__panel a {
        font-size: var(--fs-meta);
        white-space: nowrap;
    }

    /* Le sous-menu devient un vrai menu déroulant superposé au contenu. */
    .nav-disclosure {
        position: relative;
    }

    .nav-disclosure__panel {
        position: absolute;
        top: calc(100% + var(--sp-8));
        left: calc(var(--sp-13) * -1);
        z-index: 30;
        min-inline-size: 250px;
        margin: 0;
        padding: var(--sp-6);
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--r-10);
        box-shadow: 0 6px 20px rgb(0 0 0 / 8%);
    }

    .nav-disclosure__panel a {
        padding: var(--sp-9) var(--sp-11);
        border-radius: var(--r-8);
    }

    .nav-disclosure__panel a:hover {
        background: var(--c-blue-bg);
    }
}

/* ==========================================================================
   Navigation compacte — desktop À LA SOURIS uniquement
   --------------------------------------------------------------------------
   La règle du projet impose des cibles TACTILES ≥ 44 px. Sur un pointeur fin
   (souris, trackpad) la contrainte ne s'applique pas : on peut resserrer la
   barre de navigation comme sur les filaires, tout en restant très au-dessus
   du minimum WCAG 2.2 AA de 24 px.
   Sur une tablette ou un portable tactile large, `pointer: coarse` l'emporte
   et les 44 px sont conservés.
   ========================================================================== */
@media (min-width: 1024px) and (pointer: fine) {
    .site-nav__item > a,
    .nav-disclosure__summary {
        min-height: 0;
        padding: var(--sp-6) 0;
    }

    /* Les liens du panneau déroulant se compactent eux aussi, mais seulement
       ici : au doigt ils conservent leurs 44 px (ils sont empilés et serrés,
       c'est là que les erreurs de visée coûtent le plus cher). */
    .nav-disclosure__panel a {
        min-height: 0;
    }
}