/* ==========================================================================
   En-tete du site public — partials/_public_header.html.twig.

   D'apres la maquette validee de l'accueil : barre blanche de 80 px, colonne
   de 1200 px (120 px de marge a 1440), marque en Onest (--font-brand), liens
   en Inter, un seul bouton plein. Sous 960 px, la navigation et « Se
   connecter » passent dans un menu deroulant.

   Ecrit contre public/css/tokens.css, sans valeur de couleur brute.
   ========================================================================== */

.ph {
    --ph-colonne: 1200px;

    position: relative;
    z-index: var(--z-sticky);
    background: var(--surface);
    font-family: var(--font-ui);
}

.ph-barre {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    height: 80px;
    padding-inline: max(var(--gutter-page), calc((100% - var(--ph-colonne)) / 2));
}

/* ---------- Marque --------------------------------------------------------- */
.ph-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    color: var(--ink);
    text-decoration: none;
}

.ph-logo img {
    display: block;
    width: 22px;
    height: 22px;
}

.ph-marque {
    font-family: var(--font-brand);
    font-size: 19px;
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
}

/* ---------- Navigation ----------------------------------------------------- */
.ph-nav {
    display: flex;
    gap: 28px;
    margin-right: auto;
}

.ph-nav a,
.ph-connexion {
    font-size: var(--text-body);
    color: var(--ink-secondary);
    text-decoration: none;
    transition: color var(--duration) var(--ease);
}

.ph-connexion {
    font-weight: var(--weight-medium);
    color: var(--ink);
}

.ph-nav a:hover,
.ph-connexion:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---------- Appel a l'action ------------------------------------------------ */
.ph-essai {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: var(--control-md);
    padding: 0 var(--space-5);
    border-radius: var(--radius-button);
    background: var(--ink);
    color: var(--ink-on-dark);
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--duration) var(--ease);
}

.ph-essai:hover {
    background: var(--ink-secondary);
    color: var(--ink-on-dark);
}

.ph a:focus-visible,
.ph-burger:focus-visible {
    outline: 2px solid var(--info);
    outline-offset: 2px;
    border-radius: var(--radius-chip);
}

/* ---------- Menu mobile ----------------------------------------------------- */
.ph-burger {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--touch-target);
    height: var(--touch-target);
    margin-right: calc(var(--space-2) * -1);
    padding: 0;
    border: 0;
    border-radius: var(--radius-field);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}

.ph-burger svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

/* Les trois traits deviennent une croix : celui du haut et celui du bas
   rejoignent le milieu et pivotent, celui du milieu s'efface. */
.ph-trait {
    transform-box: view-box;
    transform-origin: 12px 12px;
    transition: transform var(--duration-slow) var(--ease), opacity var(--duration) var(--ease);
}

.ph-burger[aria-expanded="true"] .ph-trait--haut {
    transform: rotate(45deg) translateY(5px);
}

.ph-burger[aria-expanded="true"] .ph-trait--milieu {
    opacity: 0;
    transform: scaleX(0.2);
}

.ph-burger[aria-expanded="true"] .ph-trait--bas {
    transform: rotate(-45deg) translateY(-5px);
}

.ph-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: var(--space-2) var(--gutter-page) var(--space-4);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-3);
    /* Ferme, le menu est roule sous la barre ; public-header.js pose
       `est-deroule` pour le derouler, l'enleve pour le replier, et ne remet
       `hidden` qu'une fois la transition finie. */
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--duration-slow) var(--ease);
}

.ph-menu.est-deroule {
    clip-path: inset(0 0 -24px 0);
}

.ph-menu a {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity var(--duration) var(--ease), transform var(--duration-slow) var(--ease);
}

.ph-menu.est-deroule a {
    opacity: 1;
    transform: none;
}

.ph-menu[hidden] {
    display: none;
}

/* Le menu mobile ouvert fige la page dessous (public-header.js). */
html.ph-menu-ouvert,
html.ph-menu-ouvert body {
    overflow: hidden;
}

.ph-menu a {
    display: flex;
    align-items: center;
    min-height: var(--touch-target);
    padding: 0 var(--space-3);
    border-radius: var(--radius-field);
    color: var(--ink-secondary);
    font-size: var(--text-body);
    text-decoration: none;
}

.ph-menu a:hover {
    background: var(--surface-sunken);
    color: var(--ink);
}

.ph-menu .ph-menu-connexion {
    margin-top: var(--space-2);
    border-top: 1px solid var(--border-subtle);
    border-radius: 0;
    color: var(--ink);
    font-weight: var(--weight-medium);
}

@media (max-width: 960px) {
    .ph-barre {
        gap: var(--space-3);
        height: 64px;
    }

    .ph-logo {
        margin-right: auto;
    }

    .ph-nav,
    .ph-connexion {
        display: none;
    }

    .ph-burger {
        display: inline-flex;
    }
}

@media (max-width: 480px) {
    .ph-essai {
        height: var(--control-sm);
        padding: 0 var(--space-3);
        font-size: 14px;
    }
}