/* ==========================================================================
   DIAG Informatique — feuille de style
   Sommaire : 1. Polices  2. Variables  3. Base  4. Mise en page  5. En-tête
              6. Boutons  7. Accueil  8. Prestations  9. FAQ  10. Contact
              11. Pages texte  12. Pied de page  13. Barre mobile  14. Divers
   ========================================================================== */

/* 1. Polices auto-hébergées (voir README : à placer dans assets/fonts/) ---- */
@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/bricolage-grotesque-500.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/bricolage-grotesque-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/bricolage-grotesque-800.woff2") format("woff2");
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: "Atkinson Hyperlegible";
    src: url("../fonts/atkinson-hyperlegible-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Atkinson Hyperlegible";
    src: url("../fonts/atkinson-hyperlegible-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

/* 2. Variables -------------------------------------------------------------- */
:root {
    /* Couleurs reprises de l'ancien site et du logo DIAG */
    --bleu: #00649f;         /* bleu du logo : actions, titres forts */
    --bleu-fonce: #004d7a;   /* survol des boutons bleus */
    --bleu-pale: #e7f1f8;    /* fonds légers */
    --bleu-clair: #8cc2e6;   /* accents sur fond foncé */
    --gris-logo: #808080;    /* gris du logo */
    --encre: #28313d;        /* ardoise du pied de page : textes, fonds foncés */
    --ardoise: #313b48;      /* bandeau du haut */
    --encre-douce: #59626e;  /* textes secondaires */
    --encre-claire: #d6e6f2; /* textes sur fond bleu ou ardoise */
    --papier: #f4f4f4;       /* fond de page */
    --blanc: #ffffff;
    --trait: #dddddd;
    --surligne: #fff3c4;     /* valeurs à compléter */
    --vert: #15803d;
    --rouge: #b42318;

    --f-titre: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --f-texte: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;

    --largeur: 1180px;
    --gouttiere: clamp(1rem, 4vw, 2.5rem);
    --section: clamp(4rem, 9vw, 7.5rem);
    --rayon: 6px;
    --rayon-grand: 14px;
}

/* 3. Base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }

body {
    margin: 0;
    font-family: var(--f-texte);
    font-size: 1.0625rem;     /* 17px : confortable pour tous les âges */
    line-height: 1.6;
    color: var(--encre);
    background: var(--papier);
}

h1, h2, h3, h4 {
    font-family: var(--f-titre);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 0.5em;
    font-weight: 700;
    text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.01em; }

p { margin: 0 0 1em; max-width: 68ch; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--bleu); }
img { max-width: 100%; height: auto; display: block; }
address { font-style: normal; }

:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; border-radius: 2px; }

.icone { width: 1.25em; height: 1.25em; flex: none; }

.visuellement-cache {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.lien-evitement {
    position: absolute; left: 1rem; top: -4rem; z-index: 100;
    background: var(--bleu); color: var(--blanc); padding: 0.6rem 1rem; border-radius: var(--rayon); font-weight: 700;
}
.lien-evitement:focus { top: 1rem; }

/* 4. Mise en page ----------------------------------------------------------- */
.conteneur { width: min(100% - 2 * var(--gouttiere), var(--largeur)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--blanche { background: var(--blanc); }
.section__entete { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section__entete p { color: var(--encre-douce); font-size: 1.15rem; }
.chapo { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--encre-douce); }

/* 5. En-tête ---------------------------------------------------------------- */
.bandeau-test { margin: 0; max-width: none; padding: 0.5rem var(--gouttiere); background: var(--surligne); color: var(--encre); font-size: 0.88rem; font-weight: 700; text-align: center; }
.bandeau-infos { background: #1f262f; color: var(--encre-claire); font-size: 0.9rem; }
.bandeau-infos__inner { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.45rem; }
.bandeau-infos p { margin: 0; display: flex; align-items: center; gap: 0.45rem; }
.bandeau-infos .icone { width: 1em; height: 1em; }

.statut { font-weight: 700; color: var(--blanc); }
.statut__point { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #f97066; flex: none; }
.statut--ouvert .statut__point { background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); animation: pulsation 2.4s infinite; }
@keyframes pulsation { 70% { box-shadow: 0 0 0 0.5rem rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }

.entete {
    position: sticky; top: 0; z-index: 50;
    background: rgba(40, 49, 61, 0.97);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.entete__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 5.5rem; padding-block: 0.35rem; }

.logo { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.logo { display: block; }
.logo img { height: 4.6rem; width: auto; }

.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav a:not(.bouton) {
    text-decoration: none; padding: 0.5rem 0.8rem; border-radius: var(--rayon); font-weight: 700; color: var(--encre-claire); white-space: nowrap;
}
.nav a:not(.bouton):hover { color: var(--blanc); background: rgba(255, 255, 255, 0.08); }
.nav a[aria-current="page"] { color: var(--blanc); box-shadow: inset 0 -3px 0 var(--bleu-clair); border-radius: 0; }
.nav__appel { margin-left: 0.75rem; }

.menu-bouton { display: none; }

@media (max-width: 1120px) {
    .bandeau-infos .bandeau-infos__adresse { display: none; }
    .menu-bouton {
        display: grid; place-items: center; width: 3rem; height: 3rem;
        border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--rayon); background: transparent; color: var(--blanc); cursor: pointer;
    }
    .menu-bouton .icone { width: 1.5rem; height: 1.5rem; }
    .menu-bouton__fermer, .menu-bouton[aria-expanded="true"] .menu-bouton__ouvrir { display: none; }
    .menu-bouton[aria-expanded="true"] .menu-bouton__fermer { display: block; }

    .nav {
        position: absolute; inset: 100% 0 auto; flex-direction: column; align-items: stretch; gap: 0;
        background: var(--encre); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 0.5rem var(--gouttiere) 1.25rem; box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.5);
    }
    /* sans JavaScript, le menu reste affiché sous le logo */
    html:not(.js) .nav { position: static; box-shadow: none; padding-inline: 0; }
    html:not(.js) .menu-bouton { display: none; }
    html:not(.js) .entete__inner { flex-wrap: wrap; }
    .js .nav:not(.nav--ouverte) { display: none; }
    .nav a:not(.bouton) { padding: 0.9rem 0.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0; font-size: 1.1rem; }
    .nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--bleu); padding-left: 0.9rem; }
    .nav__appel { margin: 1rem 0 0; justify-content: center; }
}

/* 6. Boutons ---------------------------------------------------------------- */
.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
    min-height: 3rem; padding: 0.7rem 1.35rem;
    font: 700 1rem/1.2 var(--f-texte);
    border-radius: var(--rayon); border: 2px solid transparent;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}
.bouton:active { transform: translateY(1px); }
.bouton--bleu { background: var(--bleu); color: var(--blanc); }
.bouton--bleu:hover { background: var(--bleu-fonce); }
.bouton--blanc { background: var(--blanc); color: var(--bleu); }
.bouton--blanc:hover { background: var(--bleu-pale); }
.bouton--encre { background: var(--encre); color: var(--blanc); }
.bouton--encre:hover { background: #3b4656; }
.bouton--contour { border-color: var(--encre); color: var(--encre); }
.bouton--contour:hover { background: var(--encre); color: var(--blanc); }
.bouton--contour-clair { border-color: rgba(255, 255, 255, 0.45); color: var(--blanc); }
.bouton--contour-clair:hover { border-color: var(--blanc); background: rgba(255, 255, 255, 0.08); }
.bouton--grand { min-height: 3.5rem; padding-inline: 1.7rem; font-size: 1.08rem; }
.boutons { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.lien-fleche { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; text-decoration: none; color: var(--bleu); border-bottom: 2px solid currentColor; padding-bottom: 0.1rem; }
.lien-fleche .icone { transition: transform 0.15s; }
.lien-fleche:hover .icone { transform: translateX(3px); }

/* 7. Accueil ---------------------------------------------------------------- */

/* Héros : le seul moment « fort » du site */
.heros { background: var(--bleu); color: var(--blanc); overflow: hidden; position: relative; }
.heros::before {
    /* trame de grille discrète, comme un tapis d'atelier */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(100deg, transparent 30%, #000 75%);
}
.heros__inner {
    position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2.5rem, 6vw, 5rem); align-items: center; padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.heros__lieu { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--blanc); font-weight: 700; margin-bottom: 1.25rem; }
.heros h1 { margin-bottom: 0.4em; }
.heros__texte { font-size: clamp(1.1rem, 1.7vw, 1.3rem); color: var(--encre-claire); max-width: 34rem; margin-bottom: 2rem; }
.heros__avis { margin-top: 2rem; display: flex; align-items: center; gap: 0.6rem; color: var(--encre-claire); font-size: 0.98rem; }
.heros__avis a { color: var(--blanc); }
.heros__avis strong { color: var(--blanc); }
.heros__avis .icone { color: #ffd54a; }

/* La fiche d'atelier */
.fiche {
    position: relative; background: var(--blanc); color: var(--encre);
    border-radius: var(--rayon-grand) var(--rayon-grand) 0 0;
    padding: 1.6rem 1.6rem 1.8rem;
    box-shadow: 0 30px 60px -20px rgba(0, 20, 40, 0.6);
    transform: rotate(1.2deg);
}
.fiche::after {
    /* bord prédécoupé */
    content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
    background: radial-gradient(circle at 10px 0, var(--blanc) 7px, transparent 7.5px) 0 0 / 20px 10px repeat-x;
}
.fiche__haut { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 2px dashed var(--trait); padding-bottom: 1rem; margin-bottom: 1.25rem; }
.fiche__titre { font-family: var(--f-titre); font-weight: 700; font-size: 1.25rem; margin: 0; }
.fiche__ref { font-size: 0.85rem; color: var(--encre-douce); margin: 0; white-space: nowrap; }
.fiche__etapes { list-style: none; margin: 0; padding: 0; counter-reset: etape; }
.fiche__etape {
    display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.9rem; align-items: start;
    padding-block: 0.7rem; position: relative;
}
.fiche__etape:not(:last-child)::before {
    content: ""; position: absolute; left: calc(1.125rem - 1px); top: 3rem; bottom: -0.6rem; width: 2px; background: var(--trait);
}
.fiche__puce {
    width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center;
    border: 2px solid var(--trait); background: var(--blanc); color: var(--encre-douce); font-weight: 700; font-size: 0.95rem;
}
.fiche__puce .icone { display: none; width: 1.15rem; height: 1.15rem; }
.fiche__etape strong { display: block; font-size: 1.05rem; line-height: 1.3; }
.fiche__etape div > span { color: var(--encre-douce); font-size: 0.95rem; line-height: 1.45; display: block; }
.fiche__etape--fait .fiche__puce { background: var(--bleu); border-color: var(--bleu); color: var(--blanc); }
.fiche__etape--fait .fiche__puce b { display: none; }
.fiche__etape--fait .fiche__puce .icone { display: block; }
.fiche__bas { margin: 1.25rem 0 0; padding: 0.85rem 1rem; background: var(--bleu-pale); border-radius: var(--rayon); font-weight: 700; font-size: 0.98rem; }

/* Animation : les étapes se cochent une à une au chargement */
@media (prefers-reduced-motion: no-preference) {
    .fiche__etape--fait .fiche__puce { animation: cocher 0.45s backwards; }
    .fiche__etape--fait:nth-child(1) .fiche__puce { animation-delay: 0.5s; }
    .fiche__etape--fait:nth-child(2) .fiche__puce { animation-delay: 0.95s; }
    .fiche__etape--fait:nth-child(3) .fiche__puce { animation-delay: 1.4s; }
    .fiche__etape--fait:nth-child(4) .fiche__puce { animation-delay: 1.85s; }
}
@keyframes cocher {
    from { background: var(--blanc); border-color: var(--trait); color: var(--encre-douce); transform: scale(0.85); }
}

/* Alerte Windows 10 */
.alerte-w10 { background: var(--bleu-pale); border-bottom: 1px solid #cfe1ee; }
.alerte-w10__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; padding-block: 1.25rem; }
.alerte-w10 p { margin: 0; font-size: 1.08rem; }
.alerte-w10 strong { font-family: var(--f-titre); font-size: 1.2rem; }

/* Vente de matériel */
.vente { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.vente__visuel { margin: 0; }
.vente__visuel img { width: 100%; height: auto; border-radius: var(--rayon-grand); box-shadow: 0 24px 50px -24px rgba(0, 30, 60, 0.45); }
.vente__visuel figcaption { margin-top: 0.8rem; font-size: 0.92rem; color: var(--encre-douce); }
.vente__liste { list-style: none; margin: 1.75rem 0 2rem; padding: 0; display: grid; gap: 1.1rem; }
.vente__liste li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: start; }
.vente__liste .icone { width: 2.6rem; height: 2.6rem; padding: 0.55rem; background: var(--bleu-pale); color: var(--bleu); border-radius: var(--rayon); }
.vente__liste a { text-decoration: none; }
.vente__liste a:hover strong { color: var(--bleu); }
.vente__liste strong { display: block; font-size: 1.1rem; }
.vente__liste span { color: var(--encre-douce); }

/* Galerie photos de la boutique */
.galerie { display: grid; gap: 0.75rem; grid-template-columns: 1fr 1fr; grid-auto-rows: 11rem; }
.galerie__item { margin: 0; overflow: hidden; border-radius: var(--rayon); background: var(--papier); }
.galerie__item img { width: 100%; height: 100%; object-fit: cover; }
.galerie--1 { grid-template-columns: 1fr; grid-auto-rows: 22.75rem; }
.galerie--2 { grid-auto-rows: 22.75rem; }
.galerie--3 .galerie__item:first-child, .galerie--4 .galerie__item:first-child { grid-column: 1 / -1; grid-row: span 2; }
.galerie--3 { grid-auto-rows: 9rem; }

/* Catégories de services */
.categories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.categorie { border-top: 3px solid var(--bleu); padding-top: 1.25rem; }
.categorie h3 { font-size: 1.35rem; }
.categorie > p { color: var(--encre-douce); font-size: 0.98rem; min-height: 4.8em; }
.categorie ul { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.categorie li { border-top: 1px solid var(--trait); }
.categorie li a { display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 0; text-decoration: none; font-weight: 700; line-height: 1.3; }
.categorie li a:hover { color: var(--bleu); }
.categorie li .icone { color: var(--bleu); width: 1.35rem; height: 1.35rem; }
.categories__suite { margin-top: 2.5rem; }

/* Pourquoi DIAG */
.atout-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.atouts { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.atouts li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; }
.atouts .icone { width: 2.6rem; height: 2.6rem; padding: 0.55rem; background: var(--bleu-pale); color: var(--bleu); border-radius: var(--rayon); }
.atouts strong { display: block; font-size: 1.1rem; }
.atouts span { color: var(--encre-douce); }
.photo-boutique { border-radius: var(--rayon-grand); overflow: hidden; aspect-ratio: 4 / 3; background: var(--bleu); }
.photo-boutique img { width: 100%; height: 100%; object-fit: cover; }
.photo-boutique--vide {
    /* affichée tant que la photo n'a pas été ajoutée */
    display: grid; place-items: center; text-align: center; color: var(--encre-claire); padding: 2rem;
    background:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
        var(--bleu);
}
.photo-boutique--vide .icone { width: 3.5rem; height: 3.5rem; color: var(--blanc); margin: 0 auto 1rem; }
.photo-boutique--vide p { margin: 0 auto; font-size: 1.05rem; }

/* Avis */
.avis-entete { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.avis-entete h2 { margin: 0; }
.avis { columns: 3 18rem; column-gap: 1.5rem; }
.avis__item {
    break-inside: avoid; margin: 0 0 1.5rem; padding: 1.5rem;
    background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon-grand);
}
.avis__item blockquote { margin: 0 0 1rem; font-size: 1.08rem; line-height: 1.55; }
.avis__item blockquote::before { content: "“"; display: block; font-family: var(--f-titre); font-size: 3rem; line-height: 0.7; color: var(--bleu); margin-bottom: 0.4rem; }
.avis__item figcaption { font-size: 0.92rem; color: var(--encre-douce); }
.avis__item figcaption strong { color: var(--encre); }

/* Infos pratiques (accueil + contact) */
.pratique { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.horaires { margin: 0; }
.horaires div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--trait); }
.horaires dt { font-weight: 700; }
.horaires dd { margin: 0; text-align: right; }
.horaires .aujourdhui { background: var(--bleu-pale); margin-inline: -0.75rem; padding-inline: 0.75rem; border-radius: var(--rayon); border-bottom-color: transparent; }
.coordonnees { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1rem; font-size: 1.1rem; }
.coordonnees li { display: flex; gap: 0.8rem; align-items: flex-start; }
.coordonnees .icone { margin-top: 0.2rem; color: var(--bleu); }
.coordonnees a { font-weight: 700; }

/* Carte chargée au clic (pas de cookies Google sans action du visiteur) */
.carte { position: relative; aspect-ratio: 4 / 3; border-radius: var(--rayon-grand); overflow: hidden; background: #dfe5ec; }
.carte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.carte__placeholder {
    position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem; text-align: center; padding: 1.5rem;
    background:
        linear-gradient(rgba(15, 36, 64, 0.06) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(90deg, rgba(15, 36, 64, 0.06) 1px, transparent 1px) 0 0 / 24px 24px,
        #e6ebf1;
}
.carte__placeholder .icone { width: 2.75rem; height: 2.75rem; color: var(--bleu); }
.carte__placeholder p { margin: 0; font-size: 0.9rem; color: var(--encre-douce); max-width: 26rem; }

/* Bandeau d'appel final */
.appel-final { background: var(--bleu); color: var(--blanc); border-radius: var(--rayon-grand); padding: clamp(2rem, 5vw, 3.5rem); display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.appel-final h2 { margin: 0 0 0.3em; }
.appel-final p { margin: 0; color: var(--encre-claire); }

/* 8. Prestations ------------------------------------------------------------ */
.entete-page { padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--trait); }
.entete-page h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); }
.fil-ariane { font-size: 0.92rem; color: var(--encre-douce); margin-bottom: 1.5rem; }
.fil-ariane ol { list-style: none; padding: 0; margin: 0; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.fil-ariane li:not(:last-child)::after { content: "/"; margin-left: 0.5rem; color: var(--trait); }

.sommaire { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
.sommaire a {
    text-decoration: none; padding: 0.55rem 1rem; border: 1px solid var(--trait); background: var(--blanc);
    border-radius: 999px; font-weight: 700; font-size: 0.95rem;
}
.sommaire a:hover { border-color: var(--bleu); color: var(--bleu); }

.groupe { display: grid; grid-template-columns: minmax(0, 0.38fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); padding-block: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--trait); }
.groupe:last-of-type { border-bottom: 0; }
.groupe__titre { position: sticky; top: 7rem; align-self: start; }
.groupe__titre h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.groupe__titre p { color: var(--encre-douce); }

.prestation { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 0.5rem 1.25rem; padding-block: 1.75rem; border-top: 1px solid var(--trait); }
.prestation:first-child { border-top: 0; padding-top: 0; }
.prestation > .icone { width: 3rem; height: 3rem; padding: 0.65rem; color: var(--bleu); background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); }
.prestation h3 { margin: 0.2rem 0 0.5rem; }
.prestation p { color: var(--encre-douce); margin-bottom: 0.9rem; }
.prestation__inclus { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: 0.95rem; }
.prestation__inclus li { display: flex; align-items: center; gap: 0.35rem; }
.prestation__inclus .icone { color: var(--vert); width: 1.1em; height: 1.1em; }
.prix { font-weight: 700; white-space: nowrap; background: var(--blanc); border: 1px solid var(--trait); padding: 0.35rem 0.8rem; border-radius: var(--rayon); font-size: 0.95rem; align-self: start; margin-top: 0.2rem; }
.prestation:target { background: var(--bleu-pale); margin-inline: -1rem; padding-inline: 1rem; border-radius: var(--rayon); }

/* 9. FAQ -------------------------------------------------------------------- */
.faq { max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
    list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 1.35rem 0; font-family: var(--f-titre); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.25;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icone { transition: transform 0.2s; width: 1.5rem; height: 1.5rem; }
.faq details[open] summary .icone { transform: rotate(45deg); }
.faq__reponse { padding-bottom: 1.5rem; color: var(--encre-douce); font-size: 1.05rem; }
.faq__reponse p:last-child { margin-bottom: 0; }

/* 10. Contact --------------------------------------------------------------- */
.contact-grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contact-grille .pratique { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.contact-grille > div > h2 { font-size: 1.7rem; }
.formulaire { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon-grand); padding: clamp(1.5rem, 4vw, 2.5rem); }
.formulaire h2 { font-size: 1.7rem; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.champ { display: grid; gap: 0.4rem; }
.champ--large { grid-column: 1 / -1; }
.champ label { font-weight: 700; }
.champ label small { font-weight: 400; color: var(--encre-douce); }
.champ input, .champ select, .champ textarea {
    width: 100%; font: inherit; color: inherit; padding: 0.8rem 0.9rem; min-height: 3.1rem;
    border: 1.5px solid #b9c3d0; border-radius: var(--rayon); background: var(--blanc);
}
.champ textarea { min-height: 9rem; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(0, 100, 159, 0.25); }
.champ--erreur input, .champ--erreur textarea, .champ--erreur select { border-color: var(--rouge); }
.champ__erreur { color: var(--rouge); font-size: 0.92rem; font-weight: 700; margin: 0; }
.champ-piege { position: absolute; left: -9999px; }
.formulaire__mention { font-size: 0.88rem; color: var(--encre-douce); margin: 1.25rem 0; }
.message { padding: 1rem 1.25rem; border-radius: var(--rayon); margin-bottom: 1.5rem; font-weight: 700; display: flex; gap: 0.7rem; align-items: flex-start; }
.message--ok { background: #e3f4e8; color: #0d5a2a; }
.message--erreur { background: #fde7e5; color: var(--rouge); }
.message .icone { margin-top: 0.15rem; }

/* 11. Pages texte (mentions, confidentialité) ------------------------------- */
.texte-legal { max-width: 48rem; }
.texte-legal h2 { font-size: 1.5rem; margin-top: 2.5rem; }
.texte-legal dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.5rem; }
.texte-legal dt { font-weight: 700; }
.texte-legal dd { margin: 0; }
.a-completer { background: var(--surligne); padding: 0 0.25rem; border-radius: 3px; }

/* Page 404 */
.erreur-404 { text-align: left; padding-block: clamp(4rem, 12vw, 9rem); }
.erreur-404__code { font-family: var(--f-titre); font-size: clamp(5rem, 16vw, 10rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.05em; color: var(--bleu); margin: 0 0 1rem; }

/* 12. Pied de page ---------------------------------------------------------- */
.pied { background: var(--encre); color: var(--encre-claire); padding-top: clamp(3rem, 7vw, 5rem); font-size: 0.98rem; }
.pied a { color: var(--blanc); }
.pied__grille { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr 0.9fr; gap: 2.5rem; padding-bottom: 3rem; }
.pied__logo { width: 11rem; height: auto; margin-bottom: 1.25rem; }
.pied__titre { font-family: var(--f-texte); font-size: 1rem; letter-spacing: 0; color: var(--bleu-clair); margin-bottom: 1rem; }
.pied__liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pied__liens a { text-decoration: none; }
.pied__liens a:hover { text-decoration: underline; }
.horaires--pied div { border-bottom-color: rgba(255, 255, 255, 0.12); padding: 0.45rem 0; flex-direction: column; gap: 0; }
.horaires--pied dt { color: var(--blanc); }
.horaires--pied dd { text-align: left; }
.pied__bas { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-block: 1.5rem; font-size: 0.9rem; }
.pied__bas p { margin: 0; }
.pied__bas a { margin-left: 1.25rem; }
.pied__bas a:first-child { margin-left: 0; }

/* 13. Barre d'actions mobile ------------------------------------------------- */
.barre-mobile { display: none; }
@media (max-width: 720px) {
    body { padding-bottom: 4.75rem; }
    .barre-mobile {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        padding: 0.6rem var(--gouttiere) calc(0.6rem + env(safe-area-inset-bottom));
        background: var(--encre);
    }
}

/* 14. Adaptations écrans ---------------------------------------------------- */
@media (max-width: 1080px) {
    .categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .categorie > p { min-height: 0; }
    .pied__grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .heros__inner, .atout-grille, .pratique, .contact-grille, .groupe, .vente { grid-template-columns: minmax(0, 1fr); }
    .vente__visuel { max-width: 34rem; }
    .fiche { transform: none; max-width: 32rem; }
    .groupe__titre { position: static; }
}
@media (max-width: 600px) {
    body { font-size: 1rem; }
    .categories, .champs, .pied__grille { grid-template-columns: minmax(0, 1fr); }
    .galerie { grid-auto-rows: 8rem; }
    .prestation { grid-template-columns: 2.6rem minmax(0, 1fr); }
    .prestation > .icone { width: 2.6rem; height: 2.6rem; padding: 0.5rem; }
    .prix { grid-column: 2; justify-self: start; margin-top: 0.5rem; }
    .boutons .bouton { flex: 1 1 100%; }
    .logo img { height: 3.6rem; }
    .fiche { padding: 1.25rem; }
    .fiche__ref { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
    .bandeau-infos, .entete, .barre-mobile, .pied, .carte { display: none; }
    body { background: #fff; }
}