@import url('formulaire.css');

/* ============================================================
   styles.css : la feuille du site (vitrine D-2200)

   L'HABIT EST LA CHARTE DU 26/08, « bâtie autour du logo », SUBLIMÉE
   (mot du patron, 29/09 : « on part de cette charte car c'est notre
   modèle documentaire ; l'ancienne version était celle que je veux
   sublimer »). Son langage, gardé : le bleu du logo et l'aqua en
   accent, les sections alternées blanc / glace, les cartes blanches
   à ombre douce, les pastilles, les boutons pilule, la goutte des
   badges, le bandeau et le pied de nuit, la bande d'appel. Ce qui
   est élevé : une photo de terrain en grand au héros, une échelle
   typographique plus ample, des espacements plus généreux, une
   apparition au défilement (une par section, une fois, jamais sous
   « mouvement réduit »).

   L'@import de formulaire.css RESTE LA PREMIÈRE INSTRUCTION (D-637) :
   le navigateur ignore un @import posé après une règle, et la carte du
   formulaire, servie telle quelle aux sites hôtes, n'aurait plus son
   style. Aucune règle du formulaire ne revient ici
   (server/test/formulaire-embarquable.test.js § 3).

   AUCUNE COULEUR NI FAMILLE DE POLICE N'EST ÉCRITE DANS CETTE FEUILLE,
   hors du bloc « marque » ci-dessous, que site/scripts/generer.js
   RÉÉCRIT à chaque génération depuis site/contenu/vitrine.json (les
   rôles de couleur, la police) et formulaire.css (les jumeaux de la
   carte). Le reste lit var(--c-…) et var(--f-…) ; une ombre ou un
   voile se DÉRIVE d'un rôle (color-mix), il ne s'écrit pas : un abonné
   change la donnée, jamais cette feuille.

   Contrastes : les paires de texte que cette feuille pose sont
   déclarées dans vitrine.json › marque.contrastes, et le lecteur en
   refuse une sous 4,5:1. Le gris (texte_second) ne se pose que sur
   le blanc (4,86) ; sur la glace, le texte second prend l'encre.
   L'aqua n'est jamais un texte sur fond clair (2,54) : sur la nuit
   seulement (5,67), ou en objet graphique.
   ============================================================ */

/* marque:debut */
/* ÉCRIT PAR site/scripts/generer.js, ne pas retoucher à la main.
   Les rôles de couleur et les polices viennent de site/contenu/vitrine.json (marque) ;
   les jumeaux de la carte du formulaire (jetons, body, .btn) viennent de formulaire.css
   (.form-card), leur seule source, jusqu'aux jetons à espace de noms (D-1901). */
:root {
    --brand: #2E5FAC;
    --brand-dark: #1E4380;
    --aqua: #56A8F0;
    --deep: #12294F;
    --ice: #EDF4FC;
    --ink: #1C3352;
    --muted: #5A7395;
    --erreur: #b91c1c;
    --radius: 20px;
    --shadow: 0 8px 24px rgba(46, 95, 172, 0.10);
    --shadow-hover: 0 16px 40px rgba(46, 95, 172, 0.18);
    --c-fond: #FFFFFF;
    --c-fond-doux: #EDF4FC;
    --c-encre: #1C3352;
    --c-texte-second: #5A7395;
    --c-accent: #2E5FAC;
    --c-accent-fonce: #1E4380;
    --c-accent-clair: #56A8F0;
    --c-nuit: #12294F;
    --c-texte-sur-nuit: #D0D4DC;
    --c-etoiles: #F5A623;
    --f-titre: 'Nunito', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', sans-serif;
    --f-texte: 'Nunito', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', sans-serif;
    --f-mesure: var(--f-texte);
}
body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--ink);
    line-height: 1.65;
    background: var(--c-fond);
}
.btn {
    display: inline-block;
    background: var(--brand);
    color: #fff;
    border: 2px solid var(--brand);
    padding: 12px 28px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: all .25s;
}
.btn:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}
@font-face { font-family: 'Nunito'; src: url('polices/Nunito-Variable-latin.woff2') format('woff2'); font-weight: 200 1000; font-style: normal; font-display: swap; }
/* marque:fin */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --marge: 16px;
    --largeur: 1160px;
    --section: 64px;
    --haut-entete: 64px;
    --rayon: 20px;
    --rayon-grand: 28px;
    --t-h1: clamp(2.25rem, 1.45rem + 3.2vw, 3.625rem);
    --t-h2: clamp(1.75rem, 1.3rem + 1.7vw, 2.625rem);
    --t-h3: 1.1875rem;
    --t-chapeau: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    --ombre: 0 10px 30px color-mix(in srgb, var(--c-accent) 11%, transparent);
    --ombre-haute: 0 20px 48px color-mix(in srgb, var(--c-accent) 20%, transparent);
    --ombre-nuit: 0 24px 60px color-mix(in srgb, var(--c-nuit) 38%, transparent);
    --filet: color-mix(in srgb, var(--c-accent) 12%, transparent);
    --courbe: cubic-bezier(.2, .7, .2, 1);
    --degrade: linear-gradient(135deg, var(--c-accent-fonce) 0%, var(--c-accent) 52%, var(--c-accent-clair) 100%);
}
@media (min-width: 720px) {
    :root { --marge: 24px; --section: 88px; }
}
@media (min-width: 1024px) {
    :root { --marge: 32px; --section: 112px; --haut-entete: 76px; }
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--haut-entete) + 16px); -webkit-text-size-adjust: 100%; }

/* La page parle Nunito, comme la carte du formulaire (jumeau, bloc marque). */
.skip-lien, .bandeau, .entete, main, .pied, .topbar, header, footer {
    font-family: var(--f-texte);
    color: var(--c-encre);
}
main, .pied { font-size: 1.0625rem; line-height: 1.65; }

img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--c-accent-clair); outline-offset: 2px; }
.tel { white-space: nowrap; }
.picto { display: inline-block; flex: none; width: 20px; height: 20px; vertical-align: middle; }
.lecteur-seul {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

h1, h2, h3, h4 {
    font-family: var(--f-titre);
    font-weight: 800;
    line-height: 1.15;
    color: var(--c-encre);
    letter-spacing: -0.01em;
}
h1 { font-size: var(--t-h1); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
p + p { margin-top: 12px; }

.conteneur, .container { width: min(100% - 2 * var(--marge), var(--largeur)); margin-inline: auto; }

/* ---------- Évitement ---------- */
.skip-lien {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--c-accent);
    color: var(--c-fond);
    padding: 12px 20px;
    border-radius: 0 0 12px 0;
    font-weight: 700;
}
.skip-lien:focus { left: 0; }

/* ---------- Boutons pilule ----------
   `.btn` est le jumeau du bouton de la carte : il vit dans le bloc de la
   marque, recopié de formulaire.css, et n'est pas redéfini ici (il habille
   les pages de ville comme avant). `.bouton` est celui de la vitrine, du
   même langage ; les variantes claire et contour servent les deux. */
.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 28px;
    border: 2px solid var(--c-accent);
    border-radius: 999px;
    background: var(--c-accent);
    color: var(--c-fond);
    font-family: var(--f-texte);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .25s var(--courbe), border-color .25s var(--courbe), transform .25s var(--courbe), box-shadow .25s var(--courbe);
}
.bouton:hover {
    background: var(--c-accent-fonce);
    border-color: var(--c-accent-fonce);
    transform: translateY(-2px);
    box-shadow: var(--ombre-haute);
}
.bouton--clair, .btn-light { background: var(--c-fond); color: var(--c-accent); border-color: var(--c-fond); }
.bouton--clair:hover, .btn-light:hover { background: var(--c-fond-doux); border-color: var(--c-fond-doux); color: var(--c-accent-fonce); }
.bouton--contour, .btn-ghost {
    background: transparent;
    color: var(--c-fond);
    border-color: color-mix(in srgb, var(--c-fond) 60%, transparent);
}
.bouton--contour:hover, .btn-ghost:hover {
    background: color-mix(in srgb, var(--c-fond) 14%, transparent);
    border-color: var(--c-fond);
    box-shadow: none;
}
.bouton--trait { background: var(--c-fond); color: var(--c-accent); }
.bouton--trait:hover { background: var(--c-fond-doux); color: var(--c-accent-fonce); }
.bouton .picto { width: 18px; height: 18px; }
.actions, .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.actions--centre { justify-content: center; }

/* ---------- Pastilles ---------- */
.pastille, .eyebrow, .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 7px 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-accent) 10%, var(--c-fond));
    color: var(--c-accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.3;
}
.pastille--claire, .chip {
    background: color-mix(in srgb, var(--c-fond) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-fond) 38%, transparent);
    color: var(--c-fond);
    letter-spacing: 0.02em;
    text-transform: none;
    font-size: 0.9rem;
    backdrop-filter: blur(4px);
}
.pastille .picto, .chip svg { width: 16px; height: 16px; flex: none; }

/* ---------- Bandeau du haut ---------- */
.bandeau, .topbar {
    background: var(--c-nuit);
    color: var(--c-texte-sur-nuit);
    font-size: 0.85rem;
    padding: 8px 0;
}
.bandeau-rang, .topbar .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; }
.bandeau a, .topbar a { color: var(--c-fond); font-weight: 800; text-decoration: none; }
.bandeau a:hover, .topbar a:hover { text-decoration: underline; }
@media (max-width: 719px) {
    .bandeau-rang, .topbar .container { justify-content: center; text-align: center; }
    .bandeau-zone { display: none; }
}

/* ---------- En-tête ---------- */
.entete, header:not(.entete) {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--c-fond);
    box-shadow: 0 2px 16px color-mix(in srgb, var(--c-nuit) 8%, transparent);
}
.entete-rang {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: var(--haut-entete);
}
.entete-logo { display: flex; align-items: center; min-height: 44px; flex: none; }
.entete-logo img, .logo-img { display: block; height: 40px; width: auto; }
/* L'accueil (mot du patron du 29/09 : « le logo doit être sur la page en grand et basculer dans le
   bandeau quand on descend ») : le petit logo cède la place au GRAND logo du héros tant que celui-ci
   est à l'écran (vitrine.js pose data-masque), puis glisse en place. Masqué par visibility et
   opacity, jamais display : sa place reste réservée, la barre ne saute pas. Le fondu n'existe
   qu'après l'état du chargement (data-bascule="pret") : rien ne s'efface sous les yeux à l'arrivée.
   Sans script, il est visible. */
.entete-logo[data-bascule="pret"] { transition: opacity .3s var(--courbe), transform .3s var(--courbe), visibility .3s; }
.entete-logo[data-masque] { opacity: 0; visibility: hidden; transform: translateY(10px); }
.menu, .entete-bouton { display: none; }
.menu { margin-left: auto; }
.menu-liste { display: flex; gap: 28px; list-style: none; }
.menu-liste > li > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--c-encre);
    font-weight: 700;
    font-size: 0.97rem;
    text-decoration: none;
    transition: color .2s var(--courbe);
}
.menu-liste > li > a:hover, .menu-liste > li > a[aria-current="page"] { color: var(--c-accent); }
.menu-deroulant { position: relative; }
.panneau {
    display: none;
    position: absolute;
    top: 100%;
    left: -24px;
    z-index: 60;
    width: min(640px, 100vw - 2 * var(--marge));
    padding: 24px;
    background: var(--c-fond);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-haute);
    grid-template-columns: 1fr 1.6fr;
    gap: 8px 32px;
}
.menu-deroulant:hover .panneau, .menu-deroulant:focus-within .panneau { display: grid; }
.panneau ul { list-style: none; }
.panneau li a { display: inline-flex; min-height: 34px; align-items: center; color: var(--c-encre); text-decoration: none; font-size: 0.95rem; }
.panneau li a:hover { color: var(--c-accent); }
.panneau-titre { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 6px; }
.panneau-tout { grid-column: 1 / -1; border-top: 1px solid var(--filet); padding-top: 12px; }
.panneau-tout a { font-weight: 800; color: var(--c-accent); text-decoration: none; }

.tiroir { margin-left: auto; }
.tiroir > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    min-width: 44px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--c-fond-doux);
    color: var(--c-accent-fonce);
    list-style: none;
    cursor: pointer;
    font-weight: 800;
}
.tiroir > summary::-webkit-details-marker { display: none; }
/* Le panneau se pose SOUS l'en-tête (et non à une hauteur fixe de l'écran) :
   le bandeau, au-dessus, décale l'en-tête tant qu'on n'a pas défilé. */
.tiroir-panneau {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100dvh - var(--haut-entete));
    overflow-y: auto;
    background: var(--c-fond);
    padding: 8px var(--marge) 96px;
    box-shadow: 0 16px 24px color-mix(in srgb, var(--c-nuit) 10%, transparent);
}
.tiroir-liste { list-style: none; margin-bottom: 24px; }
.tiroir-liste > li { border-bottom: 1px solid var(--filet); }
.tiroir-liste > li > a {
    display: flex;
    align-items: center;
    min-height: 56px;
    font-family: var(--f-titre);
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--c-encre);
    text-decoration: none;
}
.tiroir .panneau { display: grid; position: static; width: auto; padding: 0 0 16px; box-shadow: none; grid-template-columns: 1fr; }
.tiroir .panneau li a { min-height: 44px; }
.tiroir-panneau .bouton { width: 100%; }

@media (min-width: 1024px) {
    .entete-logo img, .logo-img { height: 44px; }
    .menu { display: block; }
    .entete-bouton { display: inline-flex; min-height: 46px; padding: 10px 24px; font-size: 0.95rem; }
    .tiroir { display: none; }
}

/* ---------- Sections ---------- */
section { padding: var(--section) 0; }
.section--doux, section.ice { background: var(--c-fond-doux); }
.section--serree { padding-top: 16px; }
.tete-section, .section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.tete-section h2, .section-head h2 { margin-bottom: 14px; }
.tete-section p:not(.pastille), .section-head p { font-size: var(--t-chapeau); color: var(--c-texte-second); }
.section--doux .tete-section p:not(.pastille), section.ice .section-head p { color: var(--c-encre); }
@media (min-width: 1024px) {
    .tete-section, .section-head { margin-bottom: 64px; }
}

/* ---------- Cartes ---------- */
.carte, .service, .stat, .step {
    background: var(--c-fond);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    border: 1px solid var(--filet);
}
.badge-goutte, .badge-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 4px 0 22px 4px;
    border-radius: 0 50% 50% 50%;
    background: var(--degrade);
    color: var(--c-fond);
    transform: rotate(45deg);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--c-accent) 28%, transparent);
    flex: none;
}
.badge-goutte svg, .badge-drop svg { transform: rotate(-45deg); width: 26px; height: 26px; }

/* ---------- Héros ---------- */
.heros, .hero {
    position: relative;
    overflow: hidden;
    background: var(--degrade);
    color: var(--c-fond);
}
.heros { padding: 48px 0 104px; }
.heros::before, .hero::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -160px;
    top: -200px;
    border-radius: 0 50% 50% 50%;
    transform: rotate(45deg);
    background: color-mix(in srgb, var(--c-fond) 7%, transparent);
    pointer-events: none;
}
.heros-grille, .hero-grid { position: relative; display: grid; gap: 40px; align-items: center; }
/* Le GRAND logo de l'accueil, au-dessus du h1 : la variante claire du logo animé (une fois, à
   l'arrivée), l'élément le plus grand du haut de la page. Le « f » s'aligne sur le texte : le
   tracé commence à 3 % de la largeur de l'image. */
.heros-logo { --l-logo: clamp(220px, 62vw, 260px); display: block; width: var(--l-logo); height: auto; margin: 0 0 18px calc(var(--l-logo) * -0.03); }
.heros h1, .hero h1 { color: var(--c-fond); margin-bottom: 20px; max-width: 16ch; }
.heros-mission, .hero p { color: color-mix(in srgb, var(--c-fond) 92%, transparent); font-size: var(--t-chapeau); max-width: 560px; margin-bottom: 30px; }
.preuve {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    background: var(--c-fond);
    color: var(--c-encre);
    border-radius: 16px;
    padding: 12px 20px;
    box-shadow: var(--ombre-nuit);
    font-weight: 700;
    font-size: 0.95rem;
}
.etoiles { display: inline-flex; gap: 2px; color: var(--c-etoiles); }
.etoiles svg { display: block; fill: currentColor; }

.heros-photos { position: relative; }
.heros-photo {
    position: relative;
    margin: 0;
    border-radius: var(--rayon-grand);
    overflow: hidden;
    box-shadow: var(--ombre-nuit);
    border: 6px solid color-mix(in srgb, var(--c-fond) 85%, transparent);
    background: var(--c-accent-fonce);
    aspect-ratio: 4 / 3;
}
.heros-photo img { display: block; width: 100%; height: 100%; object-fit: cover; animation: heros-entree 1.6s var(--courbe) both; }
/* Le zoom d'entrée de la photo, une fois, sans rien cacher (l'image est visible dès la première image). */
@keyframes heros-entree { from { transform: scale(1.07); } }
.heros-legende {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 32px);
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--c-fond);
    color: var(--c-accent);
    font-size: 0.82rem;
    font-weight: 800;
    box-shadow: var(--ombre);
}
.heros-legende-point { width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent-clair); flex: none; }
.heros-vignette { display: none; }
.vague { position: absolute; bottom: -1px; left: 0; width: 100%; line-height: 0; color: var(--c-fond); }
.vague svg { display: block; width: 100%; height: 72px; }

@media (min-width: 720px) {
    .heros-photo { aspect-ratio: 5 / 4; }
    .heros-logo { --l-logo: 300px; }
}
@media (min-width: 1024px) {
    .heros { padding: 72px 0 128px; }
    .heros-logo { --l-logo: clamp(300px, 25vw, 360px); margin-bottom: 22px; }
    .heros-grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; }
    .heros-photo { aspect-ratio: 1 / 1; max-width: 540px; margin-left: auto; }
    .heros-vignette {
        display: block;
        position: absolute;
        left: -8px;
        bottom: -40px;
        width: min(190px, 34%);
        margin: 0;
        aspect-ratio: 3 / 4;
        border-radius: var(--rayon);
        overflow: hidden;
        border: 6px solid var(--c-fond);
        box-shadow: var(--ombre-nuit);
        background: var(--c-accent-fonce);
    }
    .heros-vignette img { display: block; width: 100%; height: 100%; object-fit: cover; }
    /* La légende en HAUT de la photo : le coin bas-droit du premier écran est celui des
       boutons flottants (le badge de la note, l'appel), le bas-gauche celui des boutons du
       héros — au chargement, le badge couvrait la légende (mot du patron du 29/09). */
    .heros-legende { left: 20px; top: 20px; bottom: auto; }
}

/* ---------- Engagements (la rangée de l'ancien « 2h · 0 · 100 % · 1 ») ----------
   Les cartes commencent SOUS la vague du héros, jamais par-dessus (mot du
   patron du 29/09 : la vague se voit en entier, au téléphone comme au bureau). */
.engagements-liste { list-style: none; display: grid; gap: 22px; }
.engagement { padding: 28px 26px; transition: transform .25s var(--courbe), box-shadow .25s var(--courbe); }
.engagement:hover { transform: translateY(-4px); box-shadow: var(--ombre-haute); }
.engagement { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: start; padding: 24px 22px; }
.engagement .badge-goutte { grid-row: 1 / 3; width: 52px; height: 52px; margin: 6px 0 0 4px; }
.engagement .badge-goutte svg { width: 22px; height: 22px; }
.engagement h3 { margin-bottom: 6px; }
.engagement p { color: var(--c-texte-second); font-size: 0.97rem; }
@media (min-width: 900px) {
    .engagements-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
    .engagement { display: block; padding: 28px 26px; }
    .engagement .badge-goutte { width: 60px; height: 60px; margin: 4px 0 22px 4px; }
    .engagement .badge-goutte svg { width: 26px; height: 26px; }
}

/* ---------- Services en cartes ---------- */
.cartes-services { list-style: none; display: grid; gap: 22px; }
.cartes-services > li { display: flex; }
.carte-service {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 30px 28px 64px;
    color: var(--c-encre);
    text-decoration: none;
    transition: transform .25s var(--courbe), box-shadow .25s var(--courbe), border-color .25s var(--courbe);
}
.carte-service:hover { transform: translateY(-4px); box-shadow: var(--ombre-haute); border-color: color-mix(in srgb, var(--c-accent) 30%, transparent); }
.carte-service h3 { margin-bottom: 8px; }
.carte-service p { color: var(--c-texte-second); font-size: 0.97rem; }
.carte-fleche {
    position: absolute;
    left: 28px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--c-fond-doux);
    color: var(--c-accent);
    transition: transform .25s var(--courbe), background-color .25s var(--courbe), color .25s var(--courbe);
}
.carte-service:hover .carte-fleche { transform: translateX(4px); background: var(--c-accent); color: var(--c-fond); }
.photo figcaption { padding: 14px 20px 16px; font-weight: 800; font-size: 0.95rem; color: var(--c-encre); }
@media (max-width: 719px) {
    .carte-service { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: start; padding: 22px 22px 22px 20px; }
    .carte-service .badge-goutte { grid-row: 1 / 3; width: 52px; height: 52px; margin: 6px 0 0 4px; }
    .carte-service .badge-goutte svg { width: 22px; height: 22px; }
    .carte-fleche { display: none; }
}
@media (min-width: 720px) {
    .cartes-services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 1024px) {
    .cartes-services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- La méthode, en trois étapes ---------- */
.etapes { list-style: none; display: grid; gap: 22px; position: relative; }
.etape { position: relative; padding: 32px 28px; text-align: center; transition: transform .25s var(--courbe), box-shadow .25s var(--courbe); }
.etape:hover { transform: translateY(-4px); box-shadow: var(--ombre-haute); }
.etape-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--c-accent);
    color: var(--c-fond);
    font-family: var(--f-titre);
    font-weight: 800;
    font-size: 1.2rem;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--c-accent) 12%, transparent);
}
.etape h3 { margin-bottom: 8px; }
.etape p { color: var(--c-texte-second); font-size: 0.97rem; }
@media (min-width: 900px) {
    .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
    .etapes::before {
        content: "";
        position: absolute;
        top: 58px;
        left: 16%;
        right: 16%;
        border-top: 2px dashed color-mix(in srgb, var(--c-accent) 30%, transparent);
    }
}

/* ---------- Zones ---------- */
.zones-grille { display: grid; gap: 40px; align-items: center; }
.zones-texte h2 { margin-bottom: 14px; }
.zones-texte > p:not(.pastille):not(.amorce):not(.lien-fort) { font-size: var(--t-chapeau); }
.amorce { margin-top: 24px; margin-bottom: 12px; font-weight: 800; }
.liste-villes, .zones { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.liste-villes a, .zone {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 20px;
    border: 2px solid color-mix(in srgb, var(--c-accent) 18%, transparent);
    border-radius: 999px;
    background: var(--c-fond);
    color: var(--c-encre);
    font-weight: 800;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background-color .25s var(--courbe), border-color .25s var(--courbe), color .25s var(--courbe), transform .25s var(--courbe);
}
.liste-villes a:hover, a.zone:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-fond); transform: translateY(-2px); }
.lien-fort { margin-top: 20px; }
.lien-fort a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--c-accent); font-weight: 800; text-decoration: none; }
.lien-fort a:hover { text-decoration: underline; }
.lien-fort .picto { transition: transform .2s var(--courbe); }
.lien-fort a:hover .picto { transform: translateX(4px); }
.zones-photo { margin: 0; overflow: hidden; }
.zones-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 1024px) {
    .zones-grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 64px; }
    .zones-photo img { aspect-ratio: 5 / 4; }
}

/* ---------- Photos de terrain ---------- */
.galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 719px) {
    .galerie .photo figcaption { padding: 10px 12px 12px; font-size: 0.82rem; line-height: 1.35; }
}
.photo { margin: 0; overflow: hidden; transition: transform .25s var(--courbe), box-shadow .25s var(--courbe); }
.galerie .photo:hover { transform: translateY(-4px); box-shadow: var(--ombre-haute); }
.galerie .photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 720px) {
    .galerie { gap: 24px; }
}
@media (min-width: 1024px) {
    .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Questions ---------- */
.questions, .faq-page { max-width: 800px; margin-inline: auto; }
.question {
    background: var(--c-fond);
    border-radius: 16px;
    box-shadow: var(--ombre);
    border: 1px solid var(--filet);
    margin-bottom: 14px;
    padding: 0 24px;
}
.question > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 60px;
    padding: 14px 0;
    list-style: none;
    cursor: pointer;
    font-weight: 800;
}
.question > summary::-webkit-details-marker { display: none; }
.question > summary .picto { color: var(--c-accent); transition: transform .2s var(--courbe); }
.question[open] > summary .picto { transform: rotate(180deg); }
.reponse { padding-bottom: 20px; color: var(--c-texte-second); }
.reponse a { color: var(--c-accent); font-weight: 800; }
.questions .lien-fort { text-align: center; }

/* ---------- Contact ---------- */
.contact-grille { display: grid; gap: 40px; align-items: start; }
.contact-texte h2 { margin-bottom: 14px; }
.contact-texte > p:not(.pastille) { max-width: 46ch; }
.contact-tel { margin-top: 24px; }
.contact-tel a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    color: var(--c-accent);
    font-family: var(--f-titre);
    font-weight: 800;
    font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
    text-decoration: none;
}
.contact-tel a:hover { text-decoration: underline; }
.contact-tel .picto { width: 26px; height: 26px; }
.contact-courriel a, .contact-horaires { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.contact-courriel a { color: var(--c-encre); font-weight: 700; }
.contact-horaires .picto, .contact-courriel .picto { color: var(--c-accent); }
.contact-direct { margin-top: 22px; }
.contact-direct a { color: var(--c-accent); font-weight: 800; text-decoration: none; }
/* Deux colonnes seulement quand la carte du formulaire y tient : elle ne
   descend pas sous ~550 px (sa progression par étapes), et une colonne plus
   étroite la faisait déborder de 62 px à 1 024 et de 14 px à 1 120 (mesuré,
   banc navigateur § 7). En dessous, le texte puis la carte, l'un sous l'autre. */
@media (min-width: 1100px) {
    .contact-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 64px; }
    .contact-texte { position: sticky; top: calc(var(--haut-entete) + 32px); }
}
/* Le contact EN AVANT (l'accueil, mot du patron du 29/09) : sur fond clair
   entre deux sections douces, un titre plus fort, la promesse de rappel
   soulignée, et la carte dans un cadre au dégradé de la marque, élevée. */
.contact--avant .contact-texte h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); }
.contact--avant .contact-texte > p:not([class]) {
    font-size: var(--t-chapeau);
    font-weight: 700;
    padding: 14px 20px;
    border-radius: var(--rayon);
    background: var(--c-fond-doux);
}
.contact--avant .contact-carte {
    padding: 8px;
    border-radius: calc(var(--rayon) + 8px);
    background: var(--degrade);
    box-shadow: var(--ombre-haute);
}
@media (max-width: 719px) {
    .contact--avant .contact-carte { padding: 5px; margin-inline: -6px; }
}
@media (min-width: 1100px) {
    .contact--avant .contact-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 656px); }
}

/* ---------- Le bouton collant de l'accueil (au téléphone) ----------
   Il mène au formulaire ; vitrine.js le montre quand ni le bouton du héros,
   ni la carte, ni la bande d'appel, ni le pied ne sont à l'écran. À gauche
   du bouton d'appel (56 px + 12 px d'écart), sous le badge de la note. */
.collant { display: none; }
@media (max-width: 719px) {
    .collant {
        display: inline-flex;
        position: fixed;
        left: 16px;
        right: 84px;
        bottom: 18px;
        z-index: 40;
        min-height: 52px;
        box-shadow: var(--ombre-nuit);
        visibility: hidden;
        opacity: 0;
        transform: translateY(12px);
        transition: opacity .25s var(--courbe), transform .25s var(--courbe), visibility 0s linear .25s;
    }
    .collant[data-visible="oui"] { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
}

/* ---------- La bande d'appel ---------- */
.cta-bande { padding: 0 0 var(--section); }
.cta-carte {
    position: relative;
    overflow: hidden;
    width: min(100% - 2 * var(--marge), var(--largeur));
    margin-inline: auto;
    padding: 56px 24px;
    border-radius: var(--rayon-grand);
    background: var(--degrade);
    color: var(--c-fond);
    text-align: center;
    box-shadow: var(--ombre-haute);
}
.cta-carte::before, .cta-carte::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 0 50% 50% 50%;
    transform: rotate(45deg);
    background: color-mix(in srgb, var(--c-fond) 10%, transparent);
    pointer-events: none;
}
.cta-carte::before { top: -90px; left: -70px; }
.cta-carte::after { bottom: -90px; right: -70px; }
.cta-carte h2 { position: relative; color: var(--c-fond); max-width: 24ch; margin: 0 auto 12px; }
.cta-carte p { position: relative; color: color-mix(in srgb, var(--c-fond) 92%, transparent); margin-bottom: 28px; font-size: var(--t-chapeau); }
.cta-carte .actions { position: relative; }
@media (min-width: 720px) {
    .cta-carte { padding: 72px 48px; }
}

/* ---------- Pied ---------- */
.pied, footer:not(.pied) { background: var(--c-nuit); color: var(--c-texte-sur-nuit); padding: 64px 0 28px; }
.pied a, footer:not(.pied) a { color: var(--c-texte-sur-nuit); text-decoration: none; transition: color .2s var(--courbe); }
.pied a:hover, footer:not(.pied) a:hover { color: var(--c-accent-clair); }
.pied-grille, .footer-grid { display: grid; gap: 36px; margin-bottom: 40px; }
.pied-logo {
    display: inline-block;
    margin-bottom: 18px;
    padding: 12px 18px;
    border-radius: 16px;
    background: var(--c-fond);
}
.pied-logo img { display: block; height: 36px; width: auto; }
.pied-presentation { max-width: 34ch; }
.pied-zone { font-weight: 700; color: var(--c-fond); }
.pied-titre, footer:not(.pied) h3 { color: var(--c-fond); font-family: var(--f-titre); font-weight: 800; font-size: 1.05rem; margin-bottom: 14px; }
.pied-liste, .footer-grid ul { list-style: none; }
.pied-liste li, .footer-grid li { margin-bottom: 4px; }
.pied-liste a { display: inline-flex; align-items: center; min-height: 36px; }
.pied-contact { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.pied-contact + .pied-contact { margin-top: 0; }
.pied-contact a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; }
.pied-contact .picto { color: var(--c-accent-clair); }
.pied-adresse { font-style: normal; }
.pied-bas, .footer-bottom {
    border-top: 1px solid color-mix(in srgb, var(--c-fond) 14%, transparent);
    padding-top: 22px;
    text-align: center;
    font-size: 0.875rem;
}
.pied-bas a { display: inline-flex; align-items: center; min-height: 36px; }
@media (min-width: 720px) {
    .pied-grille, .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .pied-grille { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
    .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Pages de la vitrine : services, FAQ, zones (le même langage) ---------- */
.ariane, .breadcrumb { padding: 20px 0 0; font-size: 0.9rem; color: var(--c-texte-second); }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.ariane li + li::before { content: "\203A"; margin-right: 8px; }
.ariane a, .breadcrumb a { color: var(--c-accent); font-weight: 800; text-decoration: none; }
.section--tete { padding: 32px 0 var(--section); }
.section--tete h1 { max-width: 22ch; margin-bottom: 24px; }
.chapeau { font-size: var(--t-chapeau); color: var(--c-texte-second); max-width: 60ch; margin-bottom: 24px; }
.tete-grille { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) {
    .tete-grille { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: 56px; }
}
.numero { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--c-accent); }
.index-services { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.index-services a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--c-fond-doux);
    color: var(--c-accent-fonce);
    font-weight: 800;
    text-decoration: none;
}
.index-services a:hover { background: var(--c-accent); color: var(--c-fond); }
.index-services a:hover .numero { color: var(--c-fond); }
.prestation:nth-of-type(even) { background: var(--c-fond-doux); }
.prestation-grille { display: grid; gap: 32px; align-items: start; }
.prestation-texte { max-width: 68ch; }
.prestation-texte h2 { margin: 8px 0 20px; }
.petit-titre { font-weight: 800; margin-top: 24px; }
.liens-lies { list-style: none; margin-top: 8px; }
.liens-lies a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-accent); font-weight: 700; }
.prestation-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 1024px) {
    .prestation-grille { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; }
}
.cadre { margin: 0; background: var(--c-fond); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); border: 1px solid var(--filet); }
.cadre-image { position: relative; overflow: hidden; background: var(--c-fond-doux); }
.cadre img { display: block; width: 100%; height: auto; }
.cadre--carre .cadre-image { aspect-ratio: 1; }
.cadre--portrait .cadre-image { aspect-ratio: 3 / 4; }
.cadre--terrain .cadre-image { aspect-ratio: 4 / 5; }
.cadre--carre img, .cadre--portrait img, .cadre--terrain img { height: 100%; object-fit: cover; }
.cadre--etroit { max-width: 320px; }
.legende { padding: 12px 16px 14px; font-weight: 800; font-size: 0.9rem; line-height: 1.4; color: var(--c-encre); }
.situations { display: grid; gap: 22px; }
.situation { background: var(--c-fond); border-radius: var(--rayon); box-shadow: var(--ombre); border: 1px solid var(--filet); padding: 26px 26px 28px; }
.situation h3 { margin-bottom: 8px; }
.situation p { color: var(--c-texte-second); }
@media (min-width: 900px) {
    .situations { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
.publics-liste { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.publics-liste li { padding: 8px 18px; border-radius: 999px; background: var(--c-fond-doux); color: var(--c-accent-fonce); font-weight: 800; }
.faq-page { display: grid; gap: 48px; }
.faq-theme h2 { font-size: var(--t-h3); margin-bottom: 16px; color: var(--c-accent-fonce); }
.hub { display: grid; gap: 56px; }
.hub-groupe > h2 { margin-bottom: 24px; }
.hub-secteurs { list-style: none; display: grid; gap: 22px; }
.hub-secteur { background: var(--c-fond); border-radius: var(--rayon); box-shadow: var(--ombre); border: 1px solid var(--filet); padding: 24px 26px; }
.hub-secteur h3 { margin-bottom: 12px; }
.hub-secteur h3 a { color: var(--c-accent-fonce); text-decoration: none; }
.hub-secteur h3 a:hover { text-decoration: underline; }
.hub-secteur .liste-villes a { min-height: 40px; padding: 6px 14px; font-size: 0.9rem; }
@media (min-width: 1024px) {
    .hub-secteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
.bande { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.bande > .cadre { scroll-snap-align: start; }

/* ---------- Pages de ville et de secteur (leur corps d'avant, leur habit d'avant) ---------- */
.hero { padding: 56px 0 84px; }
.hero h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 2.75rem); max-width: 26ch; }
.hero p { margin-bottom: 28px; }
.chip { margin-bottom: 20px; }
.hero .preuve { margin-top: 26px; display: flex; max-width: 440px; }
.preuve__note { font-family: var(--f-titre); font-size: 1.8rem; font-weight: 800; color: var(--c-accent); line-height: 1; }
.preuve__detail { font-size: 0.85rem; color: var(--c-texte-second); font-weight: 600; }
.preuve__etoiles { color: var(--c-etoiles); letter-spacing: 1px; display: block; margin-bottom: 2px; }
.preuve__detail strong { display: block; color: var(--c-encre); font-size: 0.92rem; }
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; }
.service { padding: 30px 28px; transition: transform .25s var(--courbe), box-shadow .25s var(--courbe); }
.service:hover { transform: translateY(-4px); box-shadow: var(--ombre-haute); }
.service h3 { margin-bottom: 8px; }
.service p { color: var(--c-texte-second); font-size: 0.95rem; margin-bottom: 4px; }
.service p strong { color: var(--c-encre); }
.zones { justify-content: center; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 22px; }
.stat { padding: 28px 24px; text-align: center; }
.stat .num { font-family: var(--f-titre); font-size: 2.4rem; font-weight: 800; color: var(--c-accent); line-height: 1; margin-bottom: 8px; }
.stat .label { font-weight: 800; margin-bottom: 6px; }
.stat p { font-size: 0.9rem; color: var(--c-texte-second); }
section.ice .hero-grid { align-items: start; }
/* La section du formulaire des pages de ville : même règle que .contact-grille. */
@media (min-width: 1100px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 64px; }
    .hero--city .hero-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- La page des avis ----------
   La note et le nombre viennent du CRM (marqueurs) ; les extraits ne
   paraissent que si la route en sert. */
.avis-page h1 { margin-inline: auto; text-align: center; }
.avis-note { max-width: 600px; margin: 0 auto; padding: 44px 28px 40px; text-align: center; }
.avis-chiffre { font-family: var(--f-titre); font-weight: 900; font-size: clamp(3.75rem, 3rem + 3vw, 5.25rem); line-height: 1; color: var(--c-accent); }
.avis-note .etoiles { margin: 16px 0 12px; gap: 4px; }
.avis-note .etoiles svg { width: 30px; height: 30px; }
.avis-ligne { font-weight: 800; font-size: var(--t-chapeau); color: var(--c-encre); }
.avis-note .actions { margin-top: 28px; }
.avis-extraits-titre { text-align: center; margin: 72px 0 32px; }
.avis-extraits { list-style: none; display: grid; gap: 22px; }
.avis-extrait { padding: 26px 24px; }
.avis-extrait blockquote { margin: 12px 0 14px; }
.avis-auteur { font-weight: 800; color: var(--c-texte-second); font-size: 0.92rem; }
@media (min-width: 720px) {
    .avis-extraits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .avis-extraits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Pages composées par generer.js : conseils, plan, merci ---------- */
.container > h1 { margin-bottom: 24px; }
.container > h2 { font-size: 1.5rem; margin: 40px 0 12px; }
.merci { max-width: 640px; margin: 0 auto; text-align: center; }
.merci h1 { margin: 14px 0 20px; }
.merci__ref { font-weight: 800; color: var(--c-accent); }
.merci .hero-actions { justify-content: center; margin-top: 28px; }
.merci .btn-ghost { color: var(--c-accent); border-color: var(--c-accent); }
.article-date { color: var(--c-texte-second); font-size: 0.9rem; margin-bottom: 10px; }
.article-chapo { color: var(--c-texte-second); font-size: 1.12rem; line-height: 1.7; margin-bottom: 28px; }

/* ---------- Les pages tenues à la main (légales) : leur en-tête d'avant ---------- */
header:not(.entete) nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; }
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a { color: var(--c-encre); font-weight: 700; text-decoration: none; }
.nav-links a:hover { color: var(--c-accent); }
@media (max-width: 768px) {
    .nav-links { display: none; }
}

/* ---------- Boutons flottants (flottants.js : l'appel, et le badge de la note sur toutes les pages) ----------
   Le script pose le balisage ; l'habit vit ICI, par les jetons, sous le
   contrôle « aucune couleur hors du bloc » de verifier.js. Le groupe
   apparaît et se retire devant #contact (M2, 250 ms) ; le badge de la note
   paraît en douceur au chargement, ses étoiles se remplissent, une fois.
   Sous l'en-tête (z-index 50) : le tiroir du menu, ouvert au téléphone,
   passe DEVANT lui. */
.fuito-flottants {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    transition: opacity 250ms var(--courbe), transform 250ms var(--courbe);
    /* La boîte du groupe est aussi large que le badge : elle ne prend pas les
       touchers destinés à ce qui est à côté (le bouton collant de l'accueil). */
    pointer-events: none;
}
.fuito-flottants > * { pointer-events: auto; }
.fuito-flottants[data-masque="oui"] { opacity: 0; transform: translateY(12px); }
.fuito-flottants[data-masque="oui"] > * { pointer-events: none; }
.fuito-avis {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--filet);
    border-radius: 999px;
    background: var(--c-fond);
    color: var(--c-encre);
    font-family: var(--f-texte);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--ombre-haute);
    animation: fuito-avis-entree .6s var(--courbe) .4s backwards;
}
.fuito-avis:hover, .fuito-avis:focus-visible { border-color: color-mix(in srgb, var(--c-accent) 35%, transparent); }
.fuito-avis__source { color: var(--c-texte-second); font-weight: 800; }
.fuito-avis__note { font-weight: 900; color: var(--c-encre); }
.fuito-avis__nb { color: var(--c-texte-second); font-variant-numeric: tabular-nums; }
.fuito-avis__etoiles { position: relative; display: inline-flex; line-height: 0; }
.fuito-avis__etoiles svg { display: block; fill: currentColor; }
.fuito-avis__etoiles-fond, .fuito-avis__etoiles-plein { display: inline-flex; gap: 1px; }
.fuito-avis__etoiles-fond { color: color-mix(in srgb, var(--c-etoiles) 28%, var(--c-fond)); }
.fuito-avis__etoiles-plein {
    position: absolute;
    inset: 0;
    color: var(--c-etoiles);
    clip-path: inset(0 calc(100% - var(--remplissage, 100%)) 0 0);
    animation: fuito-etoiles 1s var(--courbe) .7s backwards;
}
@keyframes fuito-avis-entree { from { opacity: 0; transform: translateY(10px); } }
@keyframes fuito-etoiles { from { clip-path: inset(0 100% 0 0); } }
.fuito-appel {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px 0 18px;
    border-radius: 999px;
    background: var(--c-accent);
    color: var(--c-fond);
    font-family: var(--f-texte);
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: var(--ombre-nuit);
    transition: background-color .2s var(--courbe);
}
.fuito-appel:hover, .fuito-appel:focus-visible { background: var(--c-accent-fonce); }
.fuito-appel__icone { flex: none; }
/* Au téléphone, le pictogramme seul : un disque de 56 px (jusqu'à 719 px :
   le bouton collant de l'accueil se tient à sa gauche). Au bureau, le
   bandeau montre DÉJÀ le numéro : le bouton garde le pictogramme. */
@media (max-width: 719px), (min-width: 1024px) {
    .fuito-appel { width: 56px; height: 56px; padding: 0; justify-content: center; }
    .fuito-appel__texte { display: none; }
}
@media print { .fuito-flottants { display: none; } }

/* ---------- L'apparition au défilement (vitrine.js, M1) ----------
   L'état par défaut est l'état FINAL : sans script, rien n'est caché.
   Le script ne pose « a-reveler » que sur ce qui est SOUS l'écran au
   chargement ; la montée n'existe que sur « revele », jamais sur la mise en
   attente : rien ne s'efface sous les yeux. Les cartes d'une rangée se
   suivent (--delai) ; la montée finie, le script retire les deux classes et
   la carte rend sa feuille (le survol la soulève). */
.a-reveler { opacity: 0; }
.a-reveler.revele { opacity: 1; animation: monter .6s var(--courbe) var(--delai, 0s) backwards; }
@keyframes monter { from { opacity: 0; transform: translateY(24px); } }

/* ---------- Mouvement : rien ne bouge pour qui ne le veut pas ----------
   Les transitions d'état passent à 0 ; la couleur change quand même
   (l'information reste). vitrine.js ne pose aucune apparition sous
   cette préférence. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
    html { scroll-behavior: auto; }
    .a-reveler { opacity: 1; transform: none; }
}