/* =============================================================================
   ADT Solutions Web — feuille de style globale
   -----------------------------------------------------------------------------
   Design system commun : couleurs, typographie, boutons, en-tête, pied de page.
   Le CSS propre à une page vit dans un bloc <style> de sa vue, avec un préfixe
   de classes (ac- accueil, lg- logiciels, si- sites-internet, re- réalisations,
   ap- à propos, co- contact, ml- mentions légales).

   Pas de framework CSS : le site n'utilise aucun composant d'interface (pas de
   modale, pas d'onglet, pas de datepicker). Charger une librairie pour ne rien
   en consommer coûterait une quinzaine de points de Lighthouse, alors que la
   performance est précisément l'argument de vente de la page /sites-internet.
   ============================================================================= */

/* ─── Police auto-hébergée ─────────────────────────────────────────────────
   Montserrat variable, sous-ensemble latin (35 Ko) servi depuis notre propre
   domaine : aucune requête vers fonts.googleapis.com, donc pas de blocage de
   rendu et pas de transfert d'adresse IP vers Google (RGPD).
   `font-display: swap` évite le texte invisible pendant le chargement. */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../font/montserrat-latin.woff2') format('woff2');
    unicode-range: u+00??, 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;
}

/* Police de repli aux métriques ajustées : le texte ne bouge pas au moment où
   Montserrat prend le relais (métrique CLS de Lighthouse). */
@font-face {
    font-family: 'Montserrat Fallback';
    src: local('Arial');
    ascent-override: 85.79%;
    descent-override: 22.25%;
    line-gap-override: 0.00%;
    size-adjust: 112.83%;
}


/* ─── Variables de marque ──────────────────────────────────────────────────
   Couleurs échantillonnées au pixel sur les logos fournis : le saumon du logo
   est exactement #F5A87A, l'anthracite #1D1D1B. */
:root {
    --saumon: #f5a87a;
    --saumon-clair: #fbe5d6;

    /* Saumon assombri, réservé au TEXTE : #F5A87A sur blanc ne fait que
       1,95:1 de contraste — illisible, et recalé par Lighthouse. Cette
       version tient 5,3:1 sur blanc et 4,6:1 sur ivoire. */
    --saumon-texte: #9c4a15;
    --saumon-survol: #eb9560;

    --anthracite: #1d1d1b;
    --ivoire: #f2efe9;
    --gris: #55534f;
    --trait: #e4e0d8;

    --erreur-fond: #fdecea;
    --erreur-trait: rgba(179, 38, 30, .3);
    --erreur-texte: #8c1d18;
    --alerte-fond: #fff8e1;
    --alerte-trait: #e0c97a;

    --police: 'Montserrat', 'Montserrat Fallback', ui-sans-serif, system-ui, sans-serif;
    --conteneur: 1152px;
}


/* ─── Réinitialisation légère ──────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    background: #fff;
    color: var(--anthracite);
    font-family: var(--police);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

img,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    font: inherit;
    color: inherit;
}

ul,
ol {
    list-style: none;
}

/* Titres : Montserrat très grasse et resserrée, comme le logo. */
h1,
h2,
h3,
h4 {
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    text-wrap: balance;
}

/* Focus clavier visible partout : critère d'accessibilité Lighthouse. */
:focus-visible {
    outline: 3px solid var(--saumon-texte);
    outline-offset: 3px;
    border-radius: 2px;
}

::selection {
    background: var(--saumon);
    color: var(--anthracite);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}


/* ─── Structure ────────────────────────────────────────────────────────────── */
.conteneur {
    width: 100%;
    max-width: var(--conteneur);
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 64px 0;
}

.principal {
    flex: 1;
}

/* Masqué à l'écran, lu par les lecteurs d'écran. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Lien d'évitement : premier élément focusable, il permet à un visiteur au
   clavier de sauter la navigation. Invisible tant qu'il n'a pas le focus. */
.evitement {
    position: absolute;
    left: -9999px;
    z-index: 60;
}

.evitement:focus {
    left: 16px;
    top: 16px;
    background: var(--anthracite);
    color: #fff;
    padding: 12px 20px;
    font-weight: 700;
    border-radius: 2px;
}


/* ─── Typographie de contenu ───────────────────────────────────────────────── */
.surtitre {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--saumon-texte);
}

.surtitre svg {
    width: 14px;
    height: 14px;
    flex: none;
}

.titre-section {
    font-size: 1.75rem;
}

.prose p {
    margin-bottom: 16px;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--gris);
}

.prose p:last-child {
    margin-bottom: 0;
}

.prose strong {
    font-weight: 600;
    color: var(--anthracite);
}

.prose a,
.lien-texte {
    color: var(--saumon-texte);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Marqueur des données qui restent à fournir avant la mise en ligne.
   Volontairement voyant : impossible de le laisser passer en production. */
.a-completer {
    display: inline-block;
    background: #fff3cd;
    color: #7a5b00;
    padding: 2px 6px;
    border-radius: 2px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8em;
    font-weight: 700;
}


/* ─── Boutons ──────────────────────────────────────────────────────────────
   Aplats, pas de dégradé, pas d'ombre portée. */
.bouton,
.bouton-primaire,
.bouton-secondaire,
.bouton-inverse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border: 0;
    border-radius: 2px;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}

/* Saumon + texte anthracite = 8,6:1. Le CTA principal du site. */
.bouton-primaire {
    background: var(--saumon);
    color: var(--anthracite);
}

.bouton-primaire:hover {
    background: var(--saumon-survol);
}

.bouton-primaire[disabled] {
    opacity: .6;
    cursor: not-allowed;
}

.bouton-secondaire {
    background: transparent;
    color: var(--anthracite);
    border: 2px solid var(--anthracite);
}

.bouton-secondaire:hover {
    background: var(--anthracite);
    color: #fff;
}

.bouton-inverse {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .4);
}

.bouton-inverse:hover {
    background: #fff;
    border-color: #fff;
    color: var(--anthracite);
}

.boutons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* ─── Cartes ───────────────────────────────────────────────────────────────── */
.carte {
    background: #fff;
    border: 1px solid var(--trait);
    border-radius: 2px;
    padding: 28px;
}

/* Lien « Lire le cas → » avec sa flèche qui avance au survol. */
.lien-fleche {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
    font-weight: 700;
    color: var(--anthracite);
}

.lien-fleche svg {
    width: 16px;
    height: 16px;
    color: var(--saumon-texte);
    transition: transform .15s;
}

.lien-fleche:hover svg,
a:hover .lien-fleche svg {
    transform: translateX(4px);
}


/* ─── En-tête ──────────────────────────────────────────────────────────────
   Fond blanc OPAQUE, jamais translucide : au défilement, le contenu de la page
   transparaissait derrière le logo. Et surtout, aucun `backdrop-filter` ici —
   il créerait un bloc conteneur et casserait le `position: fixed` du panneau
   mobile, qui se retrouverait calé sur une boîte de 68 px de haut. */
.entete {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--trait);
}

.entete-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 68px;
}

.entete-logo img {
    height: 36px;
    width: auto;
}

.entete-nav {
    display: none;
}

.entete-nav ul {
    display: flex;
    align-items: center;
    gap: 28px;
}

.entete-nav a {
    font-size: .94rem;
    font-weight: 600;
    transition: color .15s;
}

.entete-nav a:hover,
.entete-nav a.is-active {
    color: var(--saumon-texte);
}

.entete-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.entete-cta {
    display: none;
}

.burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    background: none;
    border: 0;
}

.burger svg {
    width: 24px;
    height: 24px;
}

/* Panneau mobile — frère de <header>, jamais enfant (cf. commentaire plus haut). */
.menu-mobile {
    position: fixed;
    left: 0;
    right: 0;
    top: 68px;
    bottom: 0;
    z-index: 40;
    background: #fff;
    border-top: 1px solid var(--trait);
    overflow-y: auto;
}

.menu-mobile[hidden] {
    display: none;
}

.menu-mobile nav {
    padding: 24px 0;
}

.menu-mobile li+li {
    border-top: 1px solid var(--trait);
}

.menu-mobile a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.menu-mobile a.is-active {
    color: var(--saumon-texte);
}

.menu-mobile a svg {
    width: 16px;
    height: 16px;
    color: var(--saumon);
}

.menu-mobile .bouton-primaire {
    width: 100%;
    margin-top: 24px;
}


/* ─── Bandeau d'appel à l'action ───────────────────────────────────────────── */
.cta {
    position: relative;
    overflow: hidden;
    background: var(--anthracite);
    color: #fff;
    padding: 64px 0;
}

.cta-filigrane {
    position: absolute;
    right: -64px;
    top: 50%;
    transform: translateY(-50%);
    width: 380px;
    height: 380px;
    color: rgba(255, 255, 255, .045);
    pointer-events: none;
}

.cta-inner {
    position: relative;
    max-width: 680px;
}

.cta h2 {
    font-size: 1.75rem;
}

.cta p {
    margin-top: 20px;
    font-size: 1.125rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .7);
}

.cta .boutons {
    margin-top: 32px;
}


/* ─── Pied de page ─────────────────────────────────────────────────────────
   Le filet saumon le sépare du bandeau d'appel à l'action, lui aussi
   anthracite : sans lui, les deux blocs n'en font qu'un. */
.pied {
    background: var(--anthracite);
    color: #fff;
    border-top: 3px solid var(--saumon);
}

.pied-inner {
    padding: 56px 0;
}

.pied-grille {
    display: grid;
    gap: 48px;
}

.pied img {
    height: 44px;
    width: auto;
}

.pied-baseline {
    margin-top: 24px;
    max-width: 380px;
    font-size: .95rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .7);
}

.pied-baseline span {
    color: var(--saumon);
}

.pied h2 {
    margin-bottom: 20px;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--saumon);
}

.pied-liens li+li {
    margin-top: 12px;
}

.pied-liens a {
    font-size: .95rem;
    color: rgba(255, 255, 255, .75);
    transition: color .15s;
}

.pied-liens a:hover {
    color: #fff;
}

.pied-coord li {
    display: flex;
    gap: 12px;
    font-size: .95rem;
    color: rgba(255, 255, 255, .75);
}

.pied-coord li+li {
    margin-top: 14px;
}

.pied-coord svg {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex: none;
    color: var(--saumon);
}

.pied-coord .secondaire {
    color: rgba(255, 255, 255, .55);
}

.pied-bas {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .85rem;
    color: rgba(255, 255, 255, .55);
}

.pied-bas p {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pied-bas svg {
    width: 14px;
    height: 14px;
    color: var(--saumon);
}

.pied-bas a:hover {
    color: #fff;
}


/* ─── Grilles réutilisables ────────────────────────────────────────────────── */
.grille {
    display: grid;
    gap: 24px;
}

.grille-2,
.grille-3 {
    display: grid;
    gap: 24px;
}


/* ─── Points de rupture ───────────────────────────────────────────────────
   Mobile-first : tout ce qui précède décrit le téléphone, on élargit ensuite. */
@media (min-width: 640px) {
    .conteneur {
        padding: 0 32px;
    }

    .section {
        padding: 80px 0;
    }

    .entete-inner {
        height: 76px;
    }

    .entete-logo img {
        height: 40px;
    }

    .entete-cta {
        display: inline-flex;
    }

    .menu-mobile {
        top: 76px;
    }

    .boutons {
        flex-direction: row;
    }

    .titre-section,
    .cta h2 {
        font-size: 2.25rem;
    }

    .pied-bas {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .grille-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .grille-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .pied-grille {
        grid-template-columns: 5fr 3fr 4fr;
    }
}

@media (min-width: 1024px) {
    .section {
        padding: 96px 0;
    }

    .entete-nav {
        display: block;
    }

    .burger {
        display: none;
    }

    .menu-mobile {
        display: none;
    }
}