/*
 * En-tête du site (resources/views/layouts/app/header.blade.php) : une capsule flottante posée sur la page.
 * Feuille autonome, chargée par layouts.app.base après le thème : tout est préfixé cab-header.
 * Sur les pages à photo (.is-photo), la capsule est givrée et le texte blanc ; ailleurs (.is-light), elle est blanche.
 */

.cab-header {
    --ch-fg: #1C2429;
    --ch-fg-2: #4A5A64;
    --ch-line: #E5E8EB;
    --ch-surface: rgba(255, 255, 255, .9);
    --ch-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -16px rgba(16, 24, 40, .2);
    --ch-active-bg: rgba(226, 29, 72, .09);
    --ch-active: #E21D48;
    --ch-cta-bg: #1C2429;
    --ch-cta: #fff;

    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
    padding: 14px 24px 0;
    font-family: 'Inter', sans-serif;
}
.cab-header.is-photo {
    --ch-fg: #fff;
    --ch-fg-2: rgba(255, 255, 255, .78);
    --ch-line: rgba(255, 255, 255, .22);
    --ch-surface: rgba(255, 255, 255, .08);
    --ch-shadow: none;
    --ch-active-bg: rgba(226, 29, 72, .32);
    --ch-active: #fff;
    --ch-cta-bg: #fff;
    --ch-cta: #1C2429;
}

.cab-header-bar { display: flex; flex-wrap: wrap; align-items: center; max-width: 1112px; margin: 0 auto; padding: 0 8px 0 20px;
    border: 1px solid var(--ch-line); border-radius: 14px; background: var(--ch-surface); box-shadow: var(--ch-shadow);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cab-header-logo { display: flex; align-items: center; height: 56px; }
.cab-header-logo img { display: block; width: 150px; height: auto; }

/* Liens : la page en cours sur fond rose ; le contact en bouton. */
.cab-header-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.cab-header-nav a { padding: 7px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--ch-fg-2); white-space: nowrap;
    text-decoration: none; transition: color .15s, background-color .15s; }
.cab-header-nav a:hover { color: var(--ch-fg); text-decoration: none; }
.cab-header-nav a[aria-current="page"] { background: var(--ch-active-bg); color: var(--ch-active); }
.cab-header-nav a.cab-header-cta { margin-left: 10px; padding: 8px 16px; border-radius: 9px; background: var(--ch-cta-bg); color: var(--ch-cta); }
.cab-header-nav a.cab-header-cta:hover { opacity: .88; }

/* Bouton menu, affiché sous lg : deux traits qui se croisent à l'ouverture. */
.cab-header-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; margin-left: auto; padding: 0 10px;
    border: 0; background: none; cursor: pointer; }
.cab-header-toggle span { display: block; height: 1.5px; border-radius: 1px; background: var(--ch-fg); transition: transform .2s, width .2s; }
.cab-header-toggle span + span { width: 70%; }
.cab-header.is-open .cab-header-toggle span:first-child { transform: translateY(3.25px) rotate(45deg); }
.cab-header.is-open .cab-header-toggle span + span { width: 100%; transform: translateY(-3.25px) rotate(-45deg); }

/* Sous lg, la capsule s'agrandit pour montrer les liens les uns sous les autres. */
@media (max-width: 991.98px) {
    .cab-header { padding: 10px 12px 0; }
    .cab-header-bar { padding: 0 6px 0 16px; }
    .cab-header-toggle { display: flex; }
    .cab-header-nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; margin: 0 0 0 -10px; padding: 8px 4px 12px 0; border-top: 1px solid var(--ch-line); }
    .cab-header.is-open .cab-header-nav { display: flex; }
    .cab-header-nav a { padding: 10px; font-size: 15px; }
    .cab-header-nav a.cab-header-cta { margin: 8px 0 0; text-align: center; }
    /* Ouverte sur photo, la capsule se fonce pour rester lisible. */
    .cab-header.is-photo.is-open { --ch-surface: rgba(28, 25, 65, .9); }
}