/* Feuille de style unique du site ar2c.fr — refonte du 03/11/2026 aux couleurs de la charte AR2C.
   Remplace style.css et les feuilles par morceau (menu.css, footer.css, contact.css…). */

/* Police Inter, servie par le site lui-même (aucun appel à Google) */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Couleurs de la charte AR2C : codes exacts, ne pas approcher */
:root {
    --rouge: #E84C4F;
    --jaune: #FCC659;
    --bleu: #5582C3;
    --rouge-clair: #F28F92;
    --jaune-clair: #FFDC98;
    --bleu-clair: #93B6E0;
    --noir: #0A0A0A;
    --marine: #1E2D4B;
    --marine-survol: #2B3E66;
    --marine-trait: #3D4F73;
    --texte: #4A4A4A;
    --bordure: #E5E5E5;
    --bordure-champ: #C8CDD6;
    --fond: #F5F5F7;
    --blanc: #FFFFFF;

    --police: "Inter", "Segoe UI", Arial, sans-serif;
    --largeur: 1200px;
    --rayon: 14px;
    --tricolore: linear-gradient(90deg, var(--rouge) 0 33.34%, var(--jaune) 33.34% 66.67%, var(--bleu) 66.67% 100%);
}

/* ---------- Bases ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--police);
    font-size: 16px;
    line-height: 1.55;
    color: var(--texte);
    background: var(--blanc);
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
h1, h2, h3, h4 { color: var(--noir); line-height: 1.15; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--marine); }
a:hover { color: var(--bleu); }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }

/* Les ancres ne passent pas sous l'en-tête fixe */
[id] { scroll-margin-top: 100px; }

.conteneur {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 0 24px;
}

.bande-tricolore { height: 5px; background: var(--tricolore); }
.insecable { white-space: nowrap; }
.trait-tricolore { width: 72px; height: 5px; background: var(--tricolore); }

.surtitre {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--texte);
}

.filigrane {
    position: absolute;
    right: -110px;
    bottom: -150px;
    width: 500px;
    opacity: 0.15;
    pointer-events: none;
}

/* ---------- Boutons ---------- */
.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 26px;
    border: 2px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.bouton-jaune { background: var(--jaune); color: var(--marine); }
.bouton-jaune:hover { background: #FFD580; color: var(--marine); }
.bouton-marine { background: var(--marine); color: var(--blanc); }
.bouton-marine:hover { background: var(--marine-survol); color: var(--blanc); }
.bouton-contour { border-color: var(--marine); color: var(--marine); background: transparent; }
.bouton-contour:hover { background: var(--marine); color: var(--blanc); }
.bouton-contour-clair { border-color: var(--bleu-clair); color: var(--blanc); background: transparent; }
.bouton-contour-clair:hover { background: rgba(255, 255, 255, 0.1); color: var(--blanc); }

.lien-fleche {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--marine);
    text-decoration: none;
}
.lien-fleche:hover, .contact-email:hover, .pied a:hover, .fil-ariane a:hover { text-decoration: underline; }

/* ---------- En-tête et menu ---------- */
.entete {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--blanc);
    border-bottom: 1px solid var(--bordure);
}
.entete-barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 78px;
}
.entete-logo, .pied-logo { display: inline-flex; text-decoration: none; }
.entete-logo img { height: 46px; width: auto; }

.menu-principal > ul {
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px 26px;
}
.menu-principal li { position: relative; }
.lien-menu {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--marine);
    text-decoration: none;
    border-bottom: 3px solid transparent;
}
.lien-menu:hover { color: var(--bleu); }
.lien-menu[aria-current="page"] { border-bottom-color: var(--jaune); }
.lien-menu .fa-angle-down { font-size: 12px; }
.lien-discret { font-weight: 500; color: var(--texte); }

.sous-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: -18px;
    min-width: 230px;
    padding: 8px;
    list-style: none;
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: 12px;
    box-shadow: 0 16px 32px rgba(30, 45, 75, 0.12);
}
.menu-principal li:hover > .sous-menu,
.menu-principal li:focus-within > .sous-menu { display: block; }
.sous-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--marine);
    text-decoration: none;
}
.sous-menu a:hover, .sous-menu a[aria-current="page"] { background: var(--fond); }

.bouton-telephone { min-height: 44px; padding: 0 18px; font-size: 15px; }

.bouton-menu {
    display: none;
    width: 48px;
    height: 48px;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    background: var(--blanc);
    color: var(--marine);
    font-size: 20px;
    cursor: pointer;
}

@media screen and (max-width: 1020px) {
    .bouton-menu { display: inline-flex; align-items: center; justify-content: center; }
    .menu-principal {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - 84px);
        overflow-y: auto;
        background: var(--blanc);
        border-bottom: 1px solid var(--bordure);
        box-shadow: 0 16px 32px rgba(30, 45, 75, 0.12);
    }
    .entete.menu-ouvert .menu-principal { display: block; }
    .menu-principal > ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 24px 24px;
    }
    .lien-menu { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--bordure); }
    .lien-menu[aria-current="page"] { border-bottom-color: var(--bordure); box-shadow: inset 4px 0 0 var(--jaune); padding-left: 12px; }
    .sous-menu {
        display: block;
        position: static;
        border: none;
        box-shadow: none;
        padding: 0 0 8px 16px;
    }
    .bouton-telephone { margin-top: 16px; width: 100%; }
}

/* ---------- Accueil : bandeau principal ---------- */
.accueil-hero {
    position: relative;
    overflow: hidden;
    background: var(--marine);
    color: var(--blanc);
}
.accueil-hero-contenu {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 56px;
    padding-top: 88px;
    padding-bottom: 96px;
}
.accueil-hero-texte {
    flex: 1 1 520px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.accueil-hero .surtitre { color: var(--bleu-clair); }
.accueil-hero h1 {
    font-size: clamp(34px, 4.6vw, 52px);
    line-height: 1.08;
    font-weight: 800;
    color: var(--blanc);
}
.accueil-hero-intro { font-size: 19px; line-height: 1.6; color: var(--bordure); max-width: 600px; }
.groupe-boutons { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 8px; }
.accueil-hero .carte-formulaire { flex: 1 1 360px; max-width: 440px; }

/* ---------- Formulaires ---------- */
.carte-formulaire {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px;
    background: var(--blanc);
    border-radius: 16px;
    color: var(--texte);
}
.carte-formulaire h2, .carte-formulaire h3 { font-size: 24px; font-weight: 800; color: var(--marine); }
.carte-formulaire-intro { font-size: 15px; margin-bottom: 4px; }
.ligne-champs { display: flex; flex-wrap: wrap; gap: 12px; }
.ligne-champs > label { flex: 1 1 150px; }
.carte-formulaire label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--marine);
}
.carte-formulaire input,
.carte-formulaire textarea {
    width: 100%;
    font: inherit;
    font-size: 15px;
    font-weight: 400;
    color: var(--noir);
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--bordure-champ);
    border-radius: 8px;
    background: var(--fond);
}
.carte-formulaire textarea { min-height: 104px; padding: 10px 12px; resize: vertical; }
.carte-formulaire input:focus,
.carte-formulaire textarea:focus { outline: 2px solid var(--bleu); outline-offset: 1px; background: var(--blanc); }
.carte-formulaire button[type="submit"] { width: 100%; }
.form-rgpd { font-size: 13px; }

/* Piège à robots : invisible pour un visiteur */
.form-piege {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.form-retour { padding: 12px 14px; border-radius: 8px; line-height: 1.45; font-size: 15px; }
.form-retour.ok { background: #E8F5E9; color: #1B5E20; }
.form-retour.erreur { background: #FDECEA; color: #B71C1C; }

/* ---------- Repères chiffrés ---------- */
/* 5 colonnes égales, centrées, séparées par un trait fin ; 3 + 2 sur tablette, 2 + 2 + 1 sur
   téléphone. Une valeur ne se coupe jamais en deux : sa taille suit la largeur de l'écran. */
.reperes { border-bottom: 1px solid var(--bordure); }
.reperes-liste {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 28px;
    padding-top: 36px;
    padding-bottom: 36px;
}
.reperes-liste li {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    text-align: center;
}
.reperes-liste li + li { border-left: 1px solid var(--bordure); }
.repere-valeur {
    font-size: clamp(26px, 2.4vw, 34px);
    font-weight: 800;
    line-height: 1.1;
    color: var(--marine);
    white-space: nowrap;
}
.repere-libelle { font-size: 14px; line-height: 1.45; }
@media screen and (max-width: 1000px) {
    .reperes-liste li { flex: 0 0 33.333%; }
    .reperes-liste li + li { border-left: 0; }
}
@media screen and (max-width: 640px) {
    .reperes-liste li { flex-basis: 50%; padding: 0 8px; }
    .repere-valeur { font-size: clamp(20px, 6.2vw, 26px); }
}

/* ---------- Sections ---------- */
.section { padding: 88px 0; }
.section-grise { background: var(--fond); }
.entete-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 720px;
    margin-bottom: 40px;
}
.entete-section h2 { font-size: clamp(28px, 3.6vw, 38px); font-weight: 800; }
.entete-section p { font-size: 18px; }
.entete-section-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 40px;
}
.entete-section-ligne .entete-section { margin-bottom: 0; }
.suite-section { margin-top: 32px; }

/* ---------- Domaines d'application ---------- */
/* 6 domaines : 3 par ligne sur ordinateur, puis 2, puis 1 — jamais de ligne incomplète */
.grille-domaines {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 20px;
}
.carte-domaine {
    display: flex;
    flex-direction: column;
    background: var(--blanc);
    border-radius: var(--rayon);
    overflow: hidden;
    border-top: 6px solid var(--marine);
}
/* Rouge, jaune, bleu sur chaque ligne de 3, comme la bande tricolore */
.carte-domaine:nth-child(3n+1) { border-top-color: var(--rouge); }
.carte-domaine:nth-child(3n+2) { border-top-color: var(--jaune); }
.carte-domaine:nth-child(3n+3) { border-top-color: var(--bleu); }
/* Pictogramme du domaine, sur le halo de la couleur de sa carte */
.pictogramme-domaine {
    width: 52px;
    height: 52px;
    margin-bottom: 4px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--marine);
}
.carte-domaine:nth-child(3n+1) .pictogramme-domaine { background: var(--rouge-clair); }
.carte-domaine:nth-child(3n+2) .pictogramme-domaine { background: var(--jaune-clair); }
.carte-domaine:nth-child(3n+3) .pictogramme-domaine { background: var(--bleu-clair); }
.carte-domaine-texte { flex: 1; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.carte-domaine h3 { font-size: 20px; font-weight: 700; color: var(--marine); }
.carte-domaine p { font-size: 15px; }
/* Domaine qui a des références : toute la carte se clique (le lien s'étend sur elle) */
.carte-domaine-cliquable { position: relative; transition: box-shadow 0.2s, transform 0.2s; }
.carte-domaine-cliquable:hover { box-shadow: 0 16px 32px rgba(30, 45, 75, 0.12); transform: translateY(-3px); }
.lien-domaine { margin-top: auto; padding-top: 6px; font-size: 15px; }
.lien-domaine::after { content: ""; position: absolute; inset: 0; }
.carte-domaine-cliquable:hover .lien-domaine { text-decoration: underline; }

/* ---------- Références ---------- */
/* En flex et non en grille : une dernière ligne incomplète reste centrée */
.grille-references {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}
.carte-reference {
    flex: 0 1 calc((100% - 48px) / 3);
    display: flex;
    flex-direction: column;
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    overflow: hidden;
}
.carte-reference img { width: 100%; height: 190px; object-fit: cover; }
.carte-reference-texte { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.carte-reference h3 { font-size: 20px; font-weight: 700; color: var(--marine); }
.carte-reference-ville { font-size: 14px; margin-top: 2px; }
.chiffres-reference {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--bordure);
    border-bottom: 1px solid var(--bordure);
}
.chiffres-reference div { flex: 1; display: flex; flex-direction: column; }
.chiffres-reference strong { font-size: 20px; font-weight: 800; color: var(--marine); white-space: nowrap; }
.chiffres-reference span { font-size: 13px; }
.carte-reference-lots { font-size: 14px; }
.carte-reference[hidden] { display: none; }
/* Filtres par domaine d'application (page « Nos projets ») : le domaine choisi passe en marine */
.filtres-projets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 32px;
}
.filtre-projet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px 0 18px;
    border: 1px solid var(--bordure);
    border-radius: 999px;
    background: var(--blanc);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--marine);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.filtre-projet:hover { border-color: var(--marine); }
.filtre-projet[aria-pressed="true"] { background: var(--marine); border-color: var(--marine); color: var(--blanc); }
.filtre-projet-nombre {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fond);
    font-size: 13px;
    font-weight: 700;
}
.filtre-projet[aria-pressed="true"] .filtre-projet-nombre { background: var(--jaune); color: var(--marine); }
/* 3 cartes par ligne, puis 2, puis 1 : chaque carte garde au moins 320 px */
@media screen and (max-width: 1079px) {
    .carte-reference { flex-basis: calc((100% - 24px) / 2); }
}
@media screen and (max-width: 719px) {
    .carte-reference { flex-basis: 100%; }
    /* Filtres sur une seule ligne qui glisse au doigt, d'un bord de l'écran à l'autre */
    .filtres-projets {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        margin: 0 -24px 24px;
        padding: 0 24px 4px;
        scrollbar-width: none;
    }
    .filtres-projets::-webkit-scrollbar { display: none; }
    .filtre-projet { flex: none; }
}

/* ---------- Ce que nous pilotons ---------- */
.grille-savoir-faire {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px 40px;
}
.grille-savoir-faire li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 16px;
    border-top: 2px solid var(--marine);
}
.grille-savoir-faire h3 { font-size: 18px; font-weight: 700; color: var(--marine); }
.grille-savoir-faire p { font-size: 15px; }

/* ---------- Partenaires ---------- */
.partenaires-bandeau-contenu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px 56px;
}
.partenaires-bandeau-texte { flex: 1 1 320px; display: flex; flex-direction: column; gap: 10px; }
.partenaires-bandeau-texte h2 { font-size: 30px; font-weight: 800; }
.logos-partenaires {
    flex: 2 1 520px;
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}
.logo-partenaire {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88px;
    padding: 12px 16px;
    border: 1px solid var(--bordure);
    border-radius: 12px;
    background: var(--blanc);
    transition: border-color 0.2s;
}
.logo-partenaire:hover { border-color: var(--bleu); }
.logo-partenaire img { max-height: 56px; width: auto; }

.grille-partenaires {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 24px;
}
.carte-partenaire {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px;
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}
.carte-partenaire .logo-partenaire { height: 110px; border: none; background: var(--fond); }
.carte-partenaire h3 { font-size: 22px; font-weight: 800; color: var(--marine); }
.carte-partenaire p { font-size: 15px; flex: 1; }
.carte-partenaire .bouton { align-self: flex-start; }

.texte-courant { display: flex; flex-direction: column; gap: 16px; max-width: 820px; font-size: 17px; margin-bottom: 48px; }
.texte-courant strong { color: var(--marine); }

/* ---------- Bandeau de titre des pages intérieures ---------- */
.bandeau-page {
    position: relative;
    overflow: hidden;
    background: var(--marine);
    color: var(--blanc);
}
.bandeau-page .filigrane { width: 380px; right: -80px; bottom: -150px; }
.bandeau-page-contenu {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 72px;
    padding-bottom: 72px;
}
.bandeau-page h1 {
    max-width: 820px;
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    color: var(--blanc);
}
.fil-ariane { font-size: 14px; color: var(--bleu-clair); }
.fil-ariane a { color: var(--blanc); text-decoration: none; }

/* ---------- Présentation d'un partenaire ---------- */
.presentation-partenaire {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px 56px;
}
.presentation-partenaire-logo {
    flex: 0 1 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}
.presentation-partenaire-texte { flex: 1 1 460px; display: flex; flex-direction: column; gap: 16px; }
.presentation-partenaire-texte h2 { font-size: clamp(26px, 3.2vw, 34px); font-weight: 800; }
.presentation-partenaire-texte p { font-size: 17px; }

/* ---------- Blocs texte et image (GTB, partenaires) ---------- */
.blocs-info { display: flex; flex-direction: column; gap: 72px; }
.section + .section-blocs { padding-top: 0; }
.blocs-info-titre { font-size: clamp(26px, 3.2vw, 34px); font-weight: 800; }
.bloc-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px 56px;
}
.bloc-info.inverse { flex-direction: row-reverse; }
.bloc-info-texte { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.bloc-info-texte h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; }
.bloc-info-texte p { font-size: 16.5px; }
.bloc-info-texte ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bloc-info-texte li { display: flex; align-items: baseline; gap: 10px; font-weight: 600; color: var(--marine); }
.bloc-info-texte li i { color: var(--bleu); font-size: 14px; }
.bloc-info-image {
    flex: 1 1 400px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--fond);
    border-radius: var(--rayon);
}
.bloc-info-image img { max-height: 340px; width: auto; border-radius: 8px; }

/* ---------- Agences ---------- */
.agences {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 32px;
}
.agences-photo { flex: 1 1 460px; min-width: 0; }
.agences-photo img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; border-radius: var(--rayon); }
.agences-photo figcaption { font-size: 14px; margin-top: 8px; }
.agences-liste { flex: 1 1 380px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.carte-agence {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 26px;
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}
.carte-agence h2 { font-size: 22px; font-weight: 800; color: var(--marine); }
.carte-agence .bouton { align-self: flex-start; margin-top: 8px; }

/* ---------- Section contact (bas de chaque page) ---------- */
.section-contact {
    position: relative;
    overflow: hidden;
    background: var(--marine);
    color: var(--blanc);
}
.section-contact .filigrane { width: 380px; right: -90px; bottom: -120px; }
.section-contact-contenu {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px 64px;
    padding-top: 80px;
    padding-bottom: 80px;
}
.section-contact-texte { flex: 1 1 420px; display: flex; flex-direction: column; gap: 18px; }
.section-contact h2 { font-size: clamp(28px, 3.6vw, 38px); font-weight: 800; color: var(--blanc); }
.section-contact-texte > p { font-size: 18px; color: var(--bordure); }
.contact-telephone { font-size: 34px; font-weight: 800; color: var(--jaune); text-decoration: none; }
.contact-telephone:hover { color: #FFD580; }
.contact-email { font-size: 18px; font-weight: 600; color: var(--blanc); text-decoration: none; }
.contact-email:hover { color: var(--bleu-clair); }
.contact-agences { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.contact-agence {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px;
    border: 1px solid var(--marine-trait);
    border-radius: var(--rayon);
}
.contact-agence .surtitre { color: var(--bleu-clair); }
.contact-agence p:last-child { color: var(--blanc); }
.section-contact .carte-formulaire { flex: 1 1 420px; max-width: 520px; }

/* ---------- Page introuvable ---------- */
.page-introuvable { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.page-introuvable p { font-size: 18px; }

/* ---------- Pied de page ---------- */
.pied { background: var(--blanc); border-top: 1px solid var(--bordure); }
.pied-contenu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 32px 56px;
    padding-top: 56px;
    padding-bottom: 40px;
}
.pied-colonne { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.pied-colonne:first-child { flex: 1 1 280px; max-width: 360px; }
.pied-colonne h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte); }
.pied-colonne ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pied a { text-decoration: none; }
.pied-logo img { height: 64px; width: auto; }
.pied-reseaux { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.pied-reseaux i { font-size: 22px; color: #0A66C2; }
.pied-bas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 14px;
}
.pied-bas-ligne { border-top: 1px solid var(--bordure); }

/* ---------- Bouton « haut de page » ---------- */
.haut-de-page {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 40;
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: var(--marine);
    color: var(--blanc);
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(30, 45, 75, 0.25);
}
.haut-de-page.visible { display: inline-flex; }
.haut-de-page:hover { background: var(--marine-survol); }

/* ---------- Téléphone ---------- */
@media screen and (max-width: 640px) {
    .section { padding: 64px 0; }
    .accueil-hero-contenu { padding-top: 56px; padding-bottom: 64px; gap: 40px; }
    .carte-formulaire { padding: 24px; }
    .filigrane { width: 320px; right: -90px; bottom: -110px; }
    .contact-telephone { font-size: 28px; }
    .grille-savoir-faire { grid-template-columns: 1fr; }
}