/* ==========================================================================
   LAYOUT — header, navigation, footer, barre mobile
   ========================================================================== */

/* --- Header -------------------------------------------------------------- */

/* Repère invisible en haut de page : tant qu'il est visible, le header reste
   transparent au-dessus du hero. */
.header-sentinel {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: calc(var(--header-h) + 40px);
    pointer-events: none;
}

.header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 90;
    height: calc(var(--header-h) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    /* Encoches et bords arrondis : le contenu ne passe jamais dessous. */
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
    color: var(--paper);
    transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
        box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
    border-bottom: 1px solid transparent;
}

/* Voile dégradé sous le header transparent : garde le logo et les icônes
   lisibles quelle que soit la zone de la photo du hero. */
.header:not(.header--solid)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(12, 10, 9, 0.5), rgba(12, 10, 9, 0));
    opacity: 1;
    transition: opacity 0.35s var(--ease);
    pointer-events: none;
}

.header.is-scrolled::before {
    opacity: 0;
}

/* Menu ouvert : le header prend le fond de l'overlay, pour que les liens
   disparaissent proprement dessous quand la liste défile. */
.nav-open .header,
.nav-open .header--solid {
    background: var(--ink);
    backdrop-filter: none;
    color: var(--paper);
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.nav-open .header::before {
    opacity: 0;
}

/* Pages intérieures : header opaque dès le chargement */
.header--solid,
.header.is-scrolled {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(14px);
    color: var(--ink);
    border-bottom-color: var(--grey-200);
}

/* --- Nom de marque — seule signature du header ----------------------------- */

.header-logo {
    display: flex;
    align-items: center;
    min-width: 0;
    line-height: 1;
    letter-spacing: 0.01em;
}

.header-logo-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.header-logo .logo-name {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.header-logo .logo-sub {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    opacity: 0.62;
    margin-top: 4px;
}

.header-nav {
    display: none;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* Bouton d'appel — masqué sur mobile, où la barre fixe du bas porte déjà
   « Appeler maintenant ». Il réapparaît à 860px, exactement là où cette barre
   disparaît : il y a donc toujours un appel accessible en un geste. */
.header-phone {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 0.45rem;
    height: 44px;
    padding-inline: 1.05rem;
    background: var(--accent);
    color: var(--paper);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border-radius: 100px;
    transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.header-phone svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.header-phone-label {
    white-space: nowrap;
}

.header-phone:active {
    transform: scale(0.94);
}

@media (min-width: 860px) {
    .header-phone {
        display: inline-flex;
    }
}

@media (hover: hover) {
    .header-phone:hover {
        background: var(--accent-dark);
        transform: translateY(-1px);
    }
}

.header-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    align-items: center;
    border-radius: 50%;
    transition: background-color 0.25s var(--ease);
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .header-menu-btn:hover {
        background: rgba(127, 127, 127, 0.14);
    }
}

.menu-line {
    display: block;
    width: 21px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

/* Menu ouvert : le bouton passe en croix sur le fond sombre de l'overlay */
.header-menu-btn[aria-expanded="true"] {
    color: var(--paper);
    background: rgba(255, 255, 255, 0.12);
}

.header-menu-btn[aria-expanded="true"] .menu-line:first-child {
    transform: translateY(3.5px) rotate(45deg);
}

.header-menu-btn[aria-expanded="true"] .menu-line:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
}

@media (min-width: 1060px) {

    .header-nav {
        display: flex;
        align-items: center;
        gap: 1.9rem;
        margin-left: auto;
        margin-right: 1.6rem;
    }

    .header-nav a {
        position: relative;
        font-size: 0.83rem;
        font-weight: 500;
        letter-spacing: 0.005em;
        padding-block: 4px;
    }

    .header-nav a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1.5px;
        background: var(--accent);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.3s var(--ease);
    }

    .header-nav a:hover::after,
    .header-nav a[aria-current="page"]::after {
        transform: scaleX(1);
    }

    .header-nav a[aria-current="page"] {
        font-weight: 700;
    }

    .header-menu-btn {
        display: none;
    }

    .header-phone {
        font-size: 0.82rem;
        padding-inline: 1.1rem;
    }
}

/* --- Overlay de navigation ------------------------------------------------ */

.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 89;
    background: var(--ink);
    color: var(--paper);
    display: flex;
    flex-direction: column;

    /* 100dvh suit la barre d'URL mobile : le bas du menu reste toujours
       atteignable, même quand Safari rétracte sa barre. */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    padding: calc(var(--header-h) + env(safe-area-inset-top) + 1.2rem)
             max(var(--gutter), env(safe-area-inset-right))
             calc(1.5rem + env(safe-area-inset-bottom))
             max(var(--gutter), env(safe-area-inset-left));

    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
}

.nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.nav-links {
    display: flex;
    flex-direction: column;
}

/* Chaque entrée est une ligne pleine largeur : cible tactile large et sans
   ambiguïté, séparateur visible, jamais de retour à la ligne. */
.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 60px;
    padding: 0.7rem 2.2rem 0.7rem 0;
    font-size: clamp(1.25rem, 5.2vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), color 0.25s var(--ease);
    -webkit-tap-highlight-color: transparent;
}

/* Chevron : indique que la ligne entière mène à une page */
.nav-link::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0.4;
    transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

.nav-overlay.is-open .nav-link {
    opacity: 1;
    transform: none;
}

.nav-overlay.is-open .nav-link:nth-child(1) { transition-delay: 0.05s; }
.nav-overlay.is-open .nav-link:nth-child(2) { transition-delay: 0.09s; }
.nav-overlay.is-open .nav-link:nth-child(3) { transition-delay: 0.13s; }
.nav-overlay.is-open .nav-link:nth-child(4) { transition-delay: 0.17s; }
.nav-overlay.is-open .nav-link:nth-child(5) { transition-delay: 0.21s; }

/* Page courante : barre d'accent à gauche + libellé rouge */
.nav-link[aria-current="page"] {
    color: var(--accent);
    padding-left: 0.9rem;
}

.nav-link[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 24px;
    margin-top: -12px;
    background: var(--accent);
    border-radius: 2px;
}

.nav-link[aria-current="page"]::after {
    opacity: 0.85;
}

.nav-link:active {
    color: var(--accent);
}

.nav-link:active::after {
    transform: rotate(-45deg) translate(2px, 2px);
    opacity: 0.9;
}

@media (hover: hover) {
    .nav-link:hover {
        color: var(--accent);
    }

    .nav-link:hover::after {
        transform: rotate(-45deg) translate(2px, 2px);
        opacity: 0.9;
    }
}

/* Bloc contact poussé en bas du menu, sans jamais chevaucher les liens */
.nav-contact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 2rem;
    font-size: 0.92rem;
}

.nav-contact a {
    color: rgba(255, 255, 255, 0.72);
    transition: color 0.25s var(--ease);
}

@media (hover: hover) {
    .nav-contact a:hover {
        color: var(--paper);
    }
}

/* Appel direct : bouton pleine largeur, l'action principale du site */
.nav-contact .nav-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 54px;
    margin-bottom: 0.4rem;
    background: var(--accent);
    color: var(--paper);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    border-radius: var(--radius);
}

.nav-contact .nav-phone svg {
    flex-shrink: 0;
}

.nav-contact .nav-phone:active {
    background: var(--accent-dark);
}

/* Coordonnées secondaires : cibles tactiles confortables */
.nav-contact a:not(.nav-phone) {
    display: flex;
    align-items: center;
    min-height: 44px;
    line-height: 1.4;
}

/* Écrans courts (paysage, petits téléphones) : on comprime le rythme plutôt
   que de laisser le contenu déborder. */
@media (max-height: 620px) {
    .nav-link {
        min-height: 48px;
        font-size: 1.1rem;
        padding-block: 0.4rem;
    }

    .nav-contact {
        padding-top: 1.2rem;
    }

    .nav-contact .nav-phone {
        min-height: 46px;
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .nav-overlay,
    .nav-link {
        transition-duration: 0.01ms;
        transition-delay: 0ms !important;
    }

    .nav-overlay {
        transform: none;
    }

    .nav-link {
        transform: none;
    }
}

/* --- Fil d'Ariane --------------------------------------------------------- */

.breadcrumb {
    padding-top: calc(var(--header-h) + 1.6rem);
    padding-bottom: 0.4rem;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--step-small);
    color: var(--grey-500);
}

.breadcrumb li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb li + li::before {
    content: "/";
    color: var(--grey-300);
}

.breadcrumb a:hover {
    color: var(--accent);
}

.breadcrumb [aria-current="page"] {
    color: var(--ink);
    font-weight: 500;
}

/* --- Footer --------------------------------------------------------------- */

.footer {
    background: var(--ink);
    color: var(--paper);
    padding-block: clamp(3.5rem, 2rem + 6vw, 6rem) 2rem;
}

.footer-tagline {
    font-size: clamp(1.8rem, 1.1rem + 3.4vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
    max-width: 16ch;
}

.footer-tagline span {
    display: block;
}

.footer-tagline span + span {
    color: rgba(255, 255, 255, 0.44);
}

.footer-grid {
    display: grid;
    gap: 2.6rem;
    margin-top: 3.4rem;
    padding-top: 2.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-col h2 {
    font-size: var(--step-eyebrow);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.58);
    margin-bottom: 1rem;
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footer-col a,
.footer-col p {
    font-size: 0.94rem;
    color: rgba(255, 255, 255, 0.74);
    transition: color 0.25s var(--ease);
}

.footer-col a:hover {
    color: var(--paper);
}

.footer-note {
    margin-top: 0.85rem;
}

.footer-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--step-eyebrow);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper);
}

.footer-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.7);
    animation: pulse 2.4s infinite;
}

@keyframes pulse {
    70% { box-shadow: 0 0 0 9px rgba(200, 16, 46, 0); }
    100% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0); }
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: var(--step-small);
    color: rgba(255, 255, 255, 0.6);
}

/* Empilées, les quatre colonnes faisaient un pied de page d'un écran et demi.
   Les deux listes courtes se rangent côte à côte ; l'identité et le bloc
   contact gardent la pleine largeur, leurs lignes étant trop longues pour
   une demi-colonne. */
@media (max-width: 600px) {

    .footer {
        padding-block: 2.8rem 1.4rem;
    }

    .footer-tagline {
        max-width: none;
        font-size: 1.65rem;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.9rem 1.3rem;
        margin-top: 2.2rem;
        padding-top: 2rem;
    }

    .footer-col:first-child,
    .footer-col:last-child {
        grid-column: 1 / -1;
    }

    .footer-col h2 {
        margin-bottom: 0.7rem;
    }

    .footer-col a,
    .footer-col p {
        font-size: 0.89rem;
    }

    .footer-bottom {
        margin-top: 2rem;
        padding-top: 1.2rem;
        gap: 0.35rem;
    }
}

.footer-bottom a {
    color: rgba(255, 255, 255, 0.66);
    transition: color 0.25s var(--ease);
}

.footer-bottom a:hover {
    color: var(--paper);
}

@media (min-width: 720px) {
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

@media (min-width: 1000px) {
    .footer-grid {
        grid-template-columns: 1.2fr 1fr 1fr 1.1fr;
    }
}

/* --- Barre d'action mobile ------------------------------------------------ */

.mobile-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 88;
    display: flex;
    gap: 0.6rem;
    padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--grey-200);
}

.mobile-bar-call {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.9rem;
    background: var(--accent);
    color: var(--paper);
    font-weight: 700;
    font-size: 0.94rem;
    border-radius: var(--radius);
}

.mobile-bar-mail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    border: 1px solid var(--grey-300);
    border-radius: var(--radius);
    color: var(--ink);
}

/* Accueil uniquement : le hero occupe tout le premier écran et porte déjà son
   bouton d'appel et son bouton secondaire. Y superposer la barre fixe fait
   trois actions concurrentes. Elle reste donc en retrait tant que l'image est
   visible, et glisse en place dès qu'on l'a dépassée.

   Les autres pages n'ont pas de `.hero` : la barre y reste permanente.

   Deux garde-fous, parce qu'un bouton d'appel ne doit jamais dépendre de
   l'exécution d'un script :
     — tout est conditionné à `.js-anim`, donc sans JS la barre s'affiche en
       permanence, exactement comme avant ;
     — le masquage n'agit qu'une fois la classe `is-armed` posée, et elle ne
       l'est qu'au premier retour de l'observateur. Si celui-ci ne répond
       jamais, rien ne masque la barre. */
.js-anim .mobile-bar {
    transition: transform 0.32s var(--ease), opacity 0.24s var(--ease);
}

.js-anim .mobile-bar.is-armed:not(.is-shown) {
    transform: translateY(115%);
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .js-anim .mobile-bar {
        transition: none;
    }
}

/* Réserve la hauteur réelle de la barre, encoche du bas comprise : sans le
   safe-area, les 34px de la zone d'accueil iPhone masquaient le dernier
   élément de chaque page. */
body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

@media (min-width: 860px) {

    .mobile-bar {
        display: none;
    }

    body {
        padding-bottom: 0;
    }
}