:root {
        --header-bg: #fff;
        --header-border: rgba(0, 0, 0, 0.15);
        --header-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
        --radius: 18px;

        --pad-y: 4px;
        --pad-x: 18px;
        --header-margin: 0 0 20px 0;

        --gap: 18px;

        /* Tailles "desktop" */
        --left-size: 150px; /* portrait carré puis rond */
        --center-w: 260px;
        --center-h: 108px;
        --right-w: 201px;
        --right-h: 50px;

        /* Gradient top border */
        --topbar-h: 4px;
        --topbar-gradient: linear-gradient(90deg, #d4145a 0%, #2c3e50 100%);
    }

    /* --- Lien cliquable sur toute la surface --- */
    .site-header {
        display: block; /* rend toute la zone cliquable */
        text-decoration: none;
        color: inherit;

        position: relative; /* needed for ::before */
        overflow: hidden; /* clips gradient to rounded corners */

        background: var(--header-bg);
        border: 1px solid var(--header-border); /* passe à 2px si tu veux */
        border-radius: var(--radius);
        box-shadow: var(--header-shadow);

        padding: var(--pad-y) var(--pad-x);
        max-width: 980px;
        margin: var(--header-margin);
    }

    /* Top "border" gradient */
    .site-header::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: var(--topbar-h);
        background: var(--topbar-gradient);
        pointer-events: none; /* keeps the whole header clickable */
    }

    /* Feedback focus/clavier */
    .site-header:focus-visible {
        outline: 3px solid rgba(0, 120, 255, 0.35);
        outline-offset: 3px;
    }

    /* --- Ligne 3 colonnes --- */
    .header-inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr; /* gauche / centre / droite */
        align-items: center; /* centrage vertical */
        gap: var(--gap);
        min-height: calc(
            var(--left-size) + (2 * var(--pad-y))
        ); /* garde de l'air */
    }

    /* Images : comportement */
    .header-img {
        display: block;
        height: auto;
        max-width: 100%;
    }

    /* Gauche : rond 150x150 aligné à gauche */
    .header-img--left {
        width: var(--left-size);
        height: var(--left-size);
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid #ffffff;
        box-shadow: 0 8px 24px rgba(212, 20, 90, 0.15);
        transition: transform 0.3s ease;
        justify-self: start;
    }

    /* Centre : 108x260 centré horizontalement et verticalement */
    .header-img--center {
        width: var(--center-w);
        height: var(--center-h);
        object-fit: contain;
        justify-self: center;
    }

    /* Droite : 50x201 aligné à droite */
    .header-img--right {
        width: var(--right-w);
        height: var(--right-h);
        object-fit: contain;
        justify-self: end;
    }

    /* Petit effet au survol (optionnel) */
    .site-header:hover {
        box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
    }

    /* ---------------- Responsive : réduction progressive < 768px ---------------- */
    @media (max-width: 768px) {
        :root {
            --radius: 16px;
            --pad-y: 2px;
            --pad-x: 4px;
            --gap: 12px;
            --header-margin: 0px -10px 15px -10px;

            --left-size: 120px;
            --center-w: 220px;
            --center-h: 92px;
            --right-w: 170px;
            --right-h: 42px;

            --topbar-h: 3px;
        }
        h1,
        .main-title {
            font-size: 2.2em;
            margin-top: 25px;
            line-height: 44px;
        }
        h2,
        .faq h2,
        .related h2 {
            font-size: 1.75em;
            line-height: 40px;
        }
    }

    /* Encore plus petit : garde une rangée, réduit encore */
    @media (max-width: 560px) {
        :root {
            --radius: 14px;
            --pad-y: 0px;
            --pad-x: 2px;
            --gap: 10px;
            --header-margin: 0px -10px 15px -10px;

            --left-size: 96px;
            --center-w: 180px;
            --center-h: 76px;
            --right-w: 140px;
            --right-h: 36px;

            --topbar-h: 3px;
        }
    }

    /* Très petit : on évite que ça déborde (réduction supplémentaire) */
    @media (max-width: 420px) {
        :root {
            --left-size: 80px;
            --center-w: 150px;
            --center-h: 64px;
            --right-w: 115px;
            --right-h: 30px;
            --header-margin: 0px -10px 15px -10px;

            --topbar-h: 2px;
        }

        .header-inner {
            gap: 8px;
        }
    }