/* ============================================================
   COMPOSANTS — en-tête, navigation, boutons, cartes, pied de page
   Règles communes et identiques aux 4 pages.
   ============================================================ */

button { cursor: pointer; font-family: inherit; border: none; background: none; }

.skip-link {
            position: absolute; left: -9999px; top: 0; z-index: 9999;
            background: var(--primary); color: var(--white); padding: 12px 20px;
            font-weight: 600; border-radius: 0 0 var(--radius-sm) 0;
        }

.skip-link:focus { left: 0; }

.btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            padding: 16px 32px; border-radius: var(--radius-pill);
            font-weight: 600; font-size: 16px; line-height: 1;
            transition: all 0.2s ease; white-space: nowrap;
        }

.btn-primary { background: var(--accent); color: var(--primary); }

.btn-primary:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-outline { background: transparent; color: var(--primary); border: 2px solid var(--primary); }

.btn-outline:hover { background: var(--primary); color: var(--white); }

.btn-lg { padding: 20px 40px; font-size: 17px; }

.header {
            position: fixed; top: 24px; left: 50%;
            transform: translateX(-50%);
            width: max-content; max-width: calc(100vw - 32px);
            z-index: 100;
        }

.header-pill {
            display: flex; align-items: center; gap: 20px;
            height: 56px;
            padding: 6px 6px 6px 20px;
            background: rgba(255, 255, 255, 0.72);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid rgba(19, 31, 86, 0.08);
            border-radius: var(--radius-pill);
            box-shadow: 0 10px 32px rgba(19, 31, 86, 0.08), 0 2px 8px rgba(19, 31, 86, 0.04);
            transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                        padding 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                        background 0.3s ease, transform 0.3s ease;
            overflow: hidden; position: relative;
        }

.header-pill.collapsed {
            width: 56px !important;
            padding: 0 !important;
            cursor: pointer;
            justify-content: center;
        }

.header-pill.collapsed:hover {
            transform: scale(1.05);
            background: rgba(255, 255, 255, 0.92);
        }

.header-logo {
            display: flex; align-items: center; flex-shrink: 0;
            transition: opacity 0.25s ease;
        }

.header-logo img {
            height: 32px; width: auto; display: block;
            border-radius: var(--radius-sm);
        }

.nav-desktop {
            display: flex; align-items: center; gap: 2px;
            transition: opacity 0.25s ease;
        }

.nav-desktop a {
            color: var(--muted);
            padding: 8px 14px;
            border-radius: var(--radius-pill);
            font-weight: 500; font-size: 14.5px;
            letter-spacing: -0.01em;
            transition: color 0.2s ease, background 0.2s ease;
            white-space: nowrap;
        }

.nav-desktop a:hover { color: var(--primary); background: rgba(19, 31, 86, 0.05); }

.nav-desktop a.active {
            color: var(--primary);
            background: rgba(206, 231, 86, 0.22);
        }

.header-cta {
            display: inline-flex; align-items: center;
            padding: 10px 20px;
            background: var(--primary); color: var(--white);
            border-radius: var(--radius-pill);
            font-weight: 600; font-size: 14px;
            letter-spacing: -0.005em;
            transition: background 0.2s ease, transform 0.2s ease;
            flex-shrink: 0; white-space: nowrap;
        }

.header-cta:hover { background: var(--primary-dark); color: var(--white); }

.pill-menu-icon {
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%) scale(0.5);
            opacity: 0; pointer-events: none;
            color: var(--primary);
            transition: opacity 0.25s ease 0.15s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
        }

.header-pill.collapsed .pill-menu-icon {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

.header-pill.collapsed .header-logo,
        .header-pill.collapsed .nav-desktop,
        .header-pill.collapsed .header-cta {
            opacity: 0; pointer-events: none;
            transition: opacity 0.15s ease;
        }

.nav-toggle {
            display: none;
            padding: 8px;
            background: transparent; border: none;
            color: var(--primary);
            align-items: center; justify-content: center;
            flex-shrink: 0;
            border-radius: var(--radius-pill);
        }

.nav-toggle:hover { background: rgba(19, 31, 86, 0.05); }

.section-header { text-align: center; max-width: 720px; margin: 0 auto 64px; }

.section-header h2 { margin-bottom: 16px; }

.section-header p { font-size: 1.125rem; }

.footer { background: var(--primary); color: rgba(255,255,255,0.7); padding: 80px 0 32px; }

.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }

.footer-brand img { height: 40px; margin-bottom: 20px; }

.footer-brand p { color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.7; max-width: 320px; }

.footer h3 { color: var(--white); font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 20px; }

.footer ul { display: flex; flex-direction: column; gap: 10px; }

.footer a { font-size: 14px; color: rgba(255,255,255,0.7); transition: color 0.2s ease; }

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

.footer-social { display: flex; gap: 12px; margin-top: 20px; }

.footer-social a {
            width: 36px; height: 36px; border-radius: 50%;
            background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center;
            border: 1px solid rgba(255,255,255,0.1);
        }

.footer-social a:hover { background: var(--accent); color: var(--primary); border-color: var(--accent); }

.footer-bottom {
            padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.1);
            display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
            font-size: 13px; color: rgba(255,255,255,0.5);
        }

.footer-legal { display: flex; gap: 24px; flex-wrap: wrap; }

/* Barre basse pleine largeur, et non plus une carte flottante en bas à gauche.
   Mesuré au navigateur le 22/08/2026 : la carte de 480x147 se posait sur
   « Demander un diagnostic », le bouton d'action principal du site, et selon la
   hauteur de fenêtre sur la fin de l'accroche (« vous coûte »). Chaque première
   visite perdait donc soit la promesse, soit le moyen d'y répondre.
   Une barre pleine largeur obscurcit une bande fine au lieu d'un élément précis. */
.cookie-banner {
            position: fixed; bottom: 0; left: 0; right: 0; max-width: none;
            background: var(--white); border-radius: 0;
            /* Le remplissage recentre le contenu sur la même colonne que le
               reste de la page, sans conteneur supplémentaire dans le HTML. */
            padding: 14px max(24px, calc((100vw - var(--container)) / 2));
            display: flex; align-items: center; gap: 28px;
            box-shadow: var(--shadow-lg); border-top: 1px solid rgba(19, 31, 86,0.10);
            z-index: 200; transform: translateY(100%); transition: transform 0.4s ease;
        }

.cookie-banner.show { transform: translateY(0); }

.cookie-banner p { font-size: 14px; margin-bottom: 0; color: var(--primary); }

.cookie-actions { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }

/* `flex-grow: 0` : dans une barre, deux boutons étirés occuperaient la moitié
   de l'écran. Ils gardent leur largeur naturelle. */
.cookie-actions .btn { padding: 10px 18px; font-size: 13px; flex-grow: 0; }

@media (max-width: 720px) {
.cookie-banner { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 20px; }
.cookie-actions .btn { flex-grow: 1; }
        }