/* =============================================================================
   Site vitrine DIMOBI Solutions
   =============================================================================
   Chargée après le socle commun (jetons, base, composants, connexion) : mêmes
   couleurs, mêmes polices, même carotte que l'espace client et la facturation.
   La terre (humus) porte la marque et les grandes scènes, le cuivre porte
   l'action, la nappe porte l'eau. Aucun style en ligne dans les gabarits (CSP).
   Deux composants de 21st.dev y sont traduits en CSS et JS natifs : la barre
   « Tubelight Navbar » et les traits « Animated Beam » (et « Border Beam »).
   ============================================================================= */

@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

:root {
    --largeur: 1200px;
    --gouttiere: clamp(16px, 4vw, 48px);
    --section: clamp(4rem, 8vw, 7.5rem);
    --entete-total: 84px;
    /* Les couleurs des types de feuilles (marques géo, hydro, aéro). */
    --milieu-sol: var(--logo-rouge);
    --milieu-eau: var(--logo-bleu);
    --milieu-gaz: var(--logo-jaune);
    --milieu-forage: var(--logo-vert);
    /* Les mêmes, éclaircies pour les fonds sombres. */
    --vif-sol: #ff8f85;
    --vif-eau: #6fb1ff;
    --vif-gaz: #ffcc4d;
    --vif-forage: #9cc96a;
    /* Texte tertiaire plus foncé que celui du socle (#8a7572 : 4,1:1 sur le fond) : 4,7:1 au moins sur
       tous les fonds clairs du site, univers compris (WCAG 1.4.3, audit axe du 2026-10-11). */
    --texte-3: #796562;
    --nappe-texte: #18727e;
}
@media (prefers-color-scheme: dark) {
    :root { --texte-3: #9d8985; --nappe-texte: var(--nappe-vive); }
}

html { scroll-padding-top: var(--entete-total); }
/* Défilement adouci sur ordinateur (static/js/site.js) : les règles de Lenis (static/vendor/lenis/lenis.css). */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body { overflow-x: clip; }
.enveloppe { max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
.section-tete { max-width: 780px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-tete--centre { margin-inline: auto; text-align: center; }
.section-tete--centre .chapo { margin-inline: auto; }
.section-tete h2, .sur-mesure h2, .video h2, .demo h2 {
    margin-top: .8rem;
    font-size: clamp(1.75rem, 1.05rem + 2vw, 2.7rem); font-weight: 700; letter-spacing: -.03em;
}
.section-tete .chapo { margin-top: 1rem; }
.surtitre { color: var(--lien); }
.numero {
    display: inline-block; margin-right: .65rem; padding: .18rem .42rem; border-radius: 6px;
    background: var(--accent-voile); color: var(--lien); letter-spacing: .04em;
}

/* Fond des scènes sombres : lueur cuivrée, courbes de niveau, grain de terre. */
.scene-sombre {
    position: relative; isolation: isolate; color: var(--sur-humus);
    background:
        url("../img/decor/courbes.svg") center / cover no-repeat,
        radial-gradient(60% 70% at 8% 0%, rgb(184 112 74 / .28), transparent 70%),
        radial-gradient(45% 55% at 100% 100%, rgb(76 195 207 / .12), transparent 70%),
        var(--humus);
}
.scene-sombre::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
    background:
        radial-gradient(circle at 20% 30%, rgb(255 255 255 / .035) 1px, transparent 1.4px) 0 0 / 11px 11px,
        radial-gradient(circle at 70% 70%, rgb(0 0 0 / .25) 1px, transparent 1.5px) 0 0 / 9px 9px;
}
.scene-sombre .surtitre { color: var(--cuivre-clair); }
.scene-sombre .numero { background: rgb(255 255 255 / .08); color: var(--cuivre-clair); }
.scene-sombre h2 { color: var(--sur-humus); }
.scene-sombre .chapo { color: var(--sur-humus-2); }

/* ── Boutons propres au site (scènes sombres) ─────────────────────────── */
.bouton { transition: background var(--duree), transform var(--duree), box-shadow var(--duree); }
.bouton--cuivre { background: var(--cuivre-clair); color: var(--cocoa); box-shadow: 0 10px 24px -12px rgb(230 182 149 / .7); }
.bouton--cuivre:hover { background: #efc6a9; color: var(--cocoa); transform: translateY(-1px); }
.bouton--clair { background: rgb(255 255 255 / .06); color: var(--sur-humus); border-color: rgb(255 255 255 / .22); }
.bouton--clair:hover { background: rgb(255 255 255 / .12); color: var(--sur-humus); }

/* ── En-tête flottant et barre « tubelight » ──────────────────────────── */
.entete-site { position: fixed; inset: 0 0 auto; z-index: 50; pointer-events: none; }
.entete-site-interieur {
    max-width: calc(var(--largeur) + 160px); margin-inline: auto; padding: 14px var(--gouttiere);
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem;
}
.entete-site-interieur > * { pointer-events: auto; }
.entete-marque { justify-self: start; display: block; flex: none; }
/* Largeur explicite : un SVG en `width: auto` (base.css lui donne `max-width: 100%`) se réduit à rien. */
/* Proportions du SVG (viewBox 343,67 × 99,22, marges comprises) : la hauteur fait la taille.
   Deux classes : commun/ui/composants.css fixe `.entete-marque img` à 30 px de haut. */
.entete-site .entete-logo { width: 180px; height: 52px; max-width: none; transition: transform .3s var(--ressort); }
.entete-marque:hover .entete-logo { transform: translateY(-1px); }
.entete-logo--sombre { display: none; }
.entete-site:not(.entete--sombre) .entete-logo--clair { display: none; }
.entete-site:not(.entete--sombre) .entete-logo--sombre { display: block; }
@media (prefers-color-scheme: dark) {
    .entete-site:not(.entete--sombre) .entete-logo--clair { display: block; }
    .entete-site:not(.entete--sombre) .entete-logo--sombre { display: none; }
}

.tube {
    position: relative; display: flex; align-items: center; gap: .15rem; padding: .3rem;
    border-radius: 999px; border: 1px solid var(--ligne);
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 10px 30px -14px rgb(48 31 30 / .35);
    transition: background .3s, border-color .3s;
}
.entete--sombre .tube { background: rgb(48 31 30 / .55); border-color: rgb(255 255 255 / .1); box-shadow: 0 10px 30px -12px rgb(0 0 0 / .55); }
.tube-volet { position: relative; }
.tube-volet > summary { list-style: none; }
.tube-volet > summary::-webkit-details-marker { display: none; }
.tube-lien {
    position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .35rem;
    padding: .55rem 1.05rem; border-radius: 999px; cursor: pointer;
    font: 600 .9rem/1.2 var(--police); color: var(--texte-2); text-decoration: none; white-space: nowrap;
    transition: color .2s;
}
.tube-lien:hover, .tube-lien.actif { color: var(--texte); }
.entete--sombre .tube-lien { color: var(--sur-humus-2); }
.entete--sombre .tube-lien:hover, .entete--sombre .tube-lien.actif { color: var(--sur-humus); }
.tube-icone { display: none; }
.tube-chevron { transition: rotate .2s var(--ressort); }
.tube-volet[open] .tube-chevron { rotate: 180deg; }
/* La lampe : une pastille sous le lien, et un néon cuivré sur le bord haut de la barre.
   Sans script, elle est portée par le lien de la page en cours ; avec, elle glisse (site.js). */
.tube-lien.actif, .tube-lampe { background: var(--creux); }
.entete--sombre .tube-lien.actif, .entete--sombre .tube-lampe { background: rgb(255 255 255 / .09); }
.tube-lien.actif::before, .tube-lampe::before {
    content: ""; position: absolute; top: calc(-.3rem - 2px); left: 50%; width: 30px; height: 3px; translate: -50% 0;
    border-radius: 3px 3px 0 0; background: var(--cuivre);
    box-shadow: 0 0 10px 1px rgb(230 182 149 / .75), 0 6px 18px 6px rgb(230 182 149 / .22);
}
.entete--sombre .tube-lien.actif::before, .entete--sombre .tube-lampe::before { background: var(--cuivre-clair); }
.tube-lampe {
    position: absolute; z-index: 0; top: .3rem; bottom: .3rem; left: 0; width: 0; border-radius: 999px;
    opacity: 0; pointer-events: none;
    transition: left .5s cubic-bezier(.34, 1.4, .64, 1), width .5s cubic-bezier(.34, 1.4, .64, 1), opacity .25s;
}
.tube.lampe-prete .tube-lampe { opacity: 1; }
.tube.lampe-prete .tube-lien.actif { background: none; }
.tube.lampe-prete .tube-lien.actif::before { display: none; }
.tube.lampe-cachee .tube-lampe { opacity: 0; }

/* Calé sur le bord gauche de « Prélèvements » (premier onglet) : centré, il sortait de l'écran
   entre 900 et 1 100 px de large. */
.nav-panneau {
    position: absolute; top: calc(100% + 14px); left: -.3rem; z-index: 60;
    width: min(720px, 92vw); padding: .6rem;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem;
    background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon-l); box-shadow: var(--ombre-3);
    animation: apparaitre .25s var(--ressort);
}
.nav-milieu {
    display: flex; gap: .7rem; align-items: flex-start; padding: .75rem .8rem; border-radius: var(--rayon);
    color: var(--texte); text-decoration: none;
}
.nav-milieu:hover, .nav-milieu[aria-current="page"] { background: var(--creux); color: var(--texte); }
.nav-milieu strong { display: block; font-size: .93rem; }
.nav-milieu small { display: block; margin-top: .2rem; color: var(--texte-3); font-size: .8rem; line-height: 1.4; }
.nav-milieu-pastille { flex: none; width: 10px; height: 10px; margin-top: .35rem; border-radius: 3px; background: var(--couleur, var(--cuivre)); }
.nav-milieu--sol { --couleur: var(--milieu-sol); }
.nav-milieu--eau { --couleur: var(--milieu-eau); }
.nav-milieu--gaz { --couleur: var(--milieu-gaz); }
.nav-milieu--forage { --couleur: var(--milieu-forage); }
.nav-tout { grid-column: 1 / -1; justify-content: flex-end; padding: .5rem .8rem .3rem; font-size: .88rem; border-top: 1px solid var(--ligne); }

.entete-connexion {
    justify-self: end; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1.15rem;
    border-radius: 999px; font: 700 .9rem/1 var(--police); text-decoration: none; white-space: nowrap;
    background: var(--accent); color: var(--accent-texte); box-shadow: 0 10px 26px -14px rgb(48 31 30 / .6);
    transition: background .2s, transform .2s, color .2s;
}
.entete-connexion:hover { background: var(--accent-survol); color: var(--accent-texte); transform: translateY(-1px); }
.entete--sombre .entete-connexion { background: var(--cuivre-clair); color: var(--cocoa); box-shadow: 0 10px 26px -12px rgb(230 182 149 / .55); }
.entete--sombre .entete-connexion:hover { background: #efc6a9; color: var(--cocoa); }

/* Entre la tablette et le grand écran, six onglets ne tiennent pas avec le logo et le bouton :
   logo réduit, onglets resserrés et libellés courts, « Se connecter » en icône (son texte reste
   lu par les lecteurs d'écran). */
@media (min-width: 900px) and (max-width: 1179.98px) {
    .entete-site-interieur { grid-template-columns: auto minmax(0, 1fr) auto; }
    .tube { justify-self: center; }
    .entete-site .entete-logo { width: 139px; height: 40px; }
    .tube-lien { padding-inline: .72rem; }
    .tube-lien:has(.tube-libelle-court) .tube-libelle { display: none; }
    .tube-lien .tube-libelle-court { display: inline; }
    .nav-panneau { width: min(620px, calc(100vw - 280px)); }
    .entete-connexion { width: 44px; padding: 0; justify-content: center; }
    .entete-connexion span {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
}

/* Téléphone et tablette : la barre descend en bas de l'écran, en icônes (comme le composant d'origine). */
@media (max-width: 899.98px) {
    /* Sans barre centrale, le bandeau du haut prend un fond : le logo ne chevauche plus le texte.
       Le flou est sur un pseudo-élément : posé sur l'en-tête, `backdrop-filter` en ferait le repère
       de la barre fixe, qui se collerait alors en haut au lieu du bas de l'écran. */
    .entete-site::before {
        content: ""; position: absolute; inset: 0; z-index: -1;
        background: color-mix(in srgb, var(--fond) 84%, transparent); border-bottom: 1px solid var(--ligne);
        backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
    }
    .entete-site.entete--sombre::before { background: rgb(48 31 30 / .74); border-bottom-color: rgb(255 255 255 / .08); }
    .entete-site-interieur { grid-template-columns: minmax(0, 1fr) auto; padding-block: 10px; }
    .entete-site .entete-logo { width: 139px; height: 40px; }
    /* Toujours clair sur téléphone (static/js/site.js) : les champs et barres du navigateur aussi. */
    :root { color-scheme: light; }
    .tube {
        position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); translate: -50% 0;
        background: rgb(48 31 30 / .82); border-color: rgb(255 255 255 / .12); box-shadow: 0 16px 40px -14px rgb(0 0 0 / .6);
    }
    .tube .tube-lien { flex-direction: column; gap: .2rem; padding: .5rem .7rem; font-size: .69rem; color: var(--sur-humus-2); }
    .tube .tube-lien:hover, .tube .tube-lien.actif { color: var(--sur-humus); }
    .tube .tube-lampe, .tube .tube-lien.actif { background: rgb(255 255 255 / .09); }
    .tube .tube-lampe::before, .tube .tube-lien.actif::before { background: var(--cuivre-clair); }
    .tube-icone { display: block; width: 19px; height: 19px; }
    .tube-chevron { display: none; }
    .nav-panneau { top: auto; bottom: calc(100% + 14px); left: 0; translate: 0 0; grid-template-columns: minmax(0, 1fr); width: min(340px, 90vw); }
    body { padding-bottom: 84px; }
}
.tube-libelle-court { display: none; }
/* Au doigt, un lien fléché doit offrir une cible d'au moins 40 px de haut. */
@media (pointer: coarse) { .lien-fleche { padding-block: .45rem; } }
@media (max-width: 480px) {
    /* Six onglets dans la barre du bas : les libellés longs prennent leur forme courte. */
    .tube-lien:has(.tube-libelle-court) .tube-libelle { display: none; }
    .tube-libelle-court { display: inline; }
}
@media (max-width: 420px) {
    .entete-site .entete-logo { width: 125px; height: 36px; }
    .entete-connexion { padding-inline: .9rem; }
    .entete-connexion .icone { display: none; }
    .tube .tube-lien { padding-inline: .45rem; }
}
@media (max-width: 350px) { .tube .tube-lien { padding-inline: .3rem; font-size: .6rem; } }

/* ── Haut de page : tout le premier écran, sous l'en-tête flottant ────── */
.heros { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.heros::after { /* la carotte couchée : un liseré de strates sous la scène */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
    background: linear-gradient(to right,
        var(--strate-3) 0 16%, var(--strate-2) 16% 31%, var(--strate-1) 31% 47%,
        var(--strate-5) 47% 60%, var(--nappe-vive) 60% 61%, var(--strate-4) 61% 79%, var(--strate-6) 79% 100%);
}
.heros-interieur {
    width: 100%; max-width: var(--largeur); margin-inline: auto;
    padding: calc(var(--entete-total) + clamp(1rem, 3vh, 2.5rem)) var(--gouttiere) clamp(3.5rem, 8vh, 5rem);
    display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.heros-texte { animation: apparaitre .6s var(--ressort) both; }
.heros h1 {
    margin-top: 1rem; color: var(--sur-humus);
    font-size: clamp(2.2rem, min(4.3vw, 7.4vh), 3.9rem); line-height: 1.03; letter-spacing: -.04em;
}
.heros h1 em { font-style: normal; color: var(--cuivre-clair); }
.heros-chapo { margin-top: 1.25rem; max-width: 54ch; color: var(--sur-humus-2); font-size: clamp(1rem, .92rem + .3vw, 1.13rem); line-height: 1.62; }
.heros-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.heros-actions .bouton { min-height: 50px; padding-inline: 1.35rem; font-size: 1rem; }
.heros-atouts { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.heros-atouts li {
    display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .75rem;
    border: 1px solid rgb(255 255 255 / .12); border-radius: 999px;
    color: var(--sur-humus-2); font-size: .84rem; background: rgb(255 255 255 / .03);
}
.heros-atouts .icone { color: var(--cuivre-clair); }

/* La carotte de l'espace client (commun/ui/connexion.css), sans règle ni légendes, posée à
   gauche et détachée de la photo ; sa nappe ne déborde que de quelques pixels. */
.heros-visuel { position: relative; min-height: clamp(380px, 64vh, 600px); }
.heros-visuel .carotte {
    display: block; top: 8%; bottom: 8%; left: 34px; right: auto; width: 74px; z-index: 2;
    filter: drop-shadow(0 20px 30px rgb(0 0 0 / .45));
}
.heros-visuel .carotte-nappe { left: -12px; right: -12px; transform-origin: center; }
.heros-photo {
    position: absolute; inset: 0 0 0 158px; margin: 0; overflow: hidden;
    border-radius: 28px; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .08);
    animation: apparaitre .8s var(--ressort) .15s both;
}
.heros-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.heros-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(21 14 13 / .5), transparent 45%); }
.heros-fiche {
    position: absolute; z-index: 4; padding: .85rem 1rem; border-radius: 14px;
    background: #fcf8f7; color: #301f1e; box-shadow: 0 24px 50px -22px rgb(0 0 0 / .65);
    font-size: .82rem; line-height: 1.45;
}
.heros-fiche .mono { color: #5f4b48; font-size: .76rem; }
.heros-fiche-tete { display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .86rem; }
.heros-fiche-ligne { display: flex; align-items: center; gap: .35rem; margin-top: .3rem; color: #436a0d; font-weight: 600; }
.heros-fiche--releve { left: 128px; bottom: 7%; animation: apparaitre .6s var(--ressort) 1.2s both, flotter 7s ease-in-out 2s infinite; }
.heros-fiche--livree {
    right: -14px; top: 8%; display: flex; gap: .65rem; align-items: center;
    animation: apparaitre .6s var(--ressort) 1.6s both, flotter 8s ease-in-out 2.4s infinite reverse;
}
.heros-fiche--livree > .icone { width: 28px; height: 28px; color: #436a0d; }
.pastille { width: 9px; height: 9px; border-radius: 3px; background: var(--couleur, var(--cuivre)); }
.pastille--sol { --couleur: var(--milieu-sol); }
@keyframes flotter { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

.heros-defiler {
    position: absolute; left: 50%; bottom: 22px; translate: -50% 0; z-index: 3;
    display: inline-flex; flex-direction: column; align-items: center; gap: .35rem;
    color: var(--sur-humus-3); text-decoration: none; font: 500 .68rem/1 var(--police-mono); letter-spacing: .12em; text-transform: uppercase;
    animation: apparaitre .6s var(--ressort) 2s both;
}
.heros-defiler:hover { color: var(--sur-humus); }
.heros-defiler .icone { width: 22px; height: 22px; }
.heros-defiler .icone path { animation: molette 1.8s ease-in-out infinite; }
@keyframes molette { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(5px); opacity: 0; } 100% { opacity: 0; } }
@media (max-height: 700px) { .heros-defiler { display: none; } }

@media (max-width: 1023.98px) {
    .heros { min-height: 0; }
    .heros-interieur { grid-template-columns: minmax(0, 1fr); padding-bottom: 4rem; }
    .heros-visuel { min-height: 440px; }
    .heros-fiche--livree { right: 8px; }
    .heros-defiler { display: none; }
}
@media (max-width: 560px) {
    .heros-visuel { min-height: 380px; }
    .heros-visuel .carotte { width: 52px; left: 34px; }
    .heros-photo { left: 108px; }
    .heros-fiche--releve { left: 60px; }
    .heros-fiche { font-size: .76rem; padding: .7rem .85rem; }
}

/* ── Ils nous font confiance ──────────────────────────────────────────── */
.confiance { padding-block: 2.2rem 2.6rem; border-bottom: 1px solid var(--ligne); background: var(--surface-2); }
.confiance-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.3rem; }
.confiance-pause {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--ligne-forte); background: var(--surface); color: var(--texte-2); cursor: pointer;
}
.confiance-pause-icone { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.confiance-pause[aria-pressed="true"] .confiance-pause-icone {
    border: 0; width: 0; height: 0; border-left: 10px solid currentColor;
    border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px;
}
.confiance-defile {
    display: flex; gap: 1.25rem; overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.confiance-piste {
    list-style: none; margin: 0; padding: 0; flex: none; min-width: 100%;
    display: flex; justify-content: space-around; gap: 1.25rem;
    animation: defilement 38s linear infinite;
}
.confiance-defile:hover .confiance-piste, .confiance-defile.en-pause .confiance-piste { animation-play-state: paused; }
.confiance-piste li {
    display: grid; place-items: center; min-width: 168px; height: 78px; padding: .9rem 1.3rem;
    border-radius: 14px; background: #fff; border: 1px solid var(--ligne);
}
.confiance-piste img { height: 40px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(1) opacity(.72); transition: filter .25s; }
.confiance-piste li:hover img { filter: none; }
/* Sans souris (téléphone, tablette), pas de survol : les logos sont en couleur d'emblée (Noé, 2026-10-11). */
@media (hover: none) { .confiance-piste img { filter: none; } }
@keyframes defilement { to { transform: translateX(calc(-100% - 1.25rem)); } }

/* ── Chiffres ─────────────────────────────────────────────────────────── */
.chiffres { padding-block: clamp(3rem, 6vw, 5rem); }
.chiffres-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.chiffres-grille li { display: grid; gap: .5rem; align-content: start; padding-top: 1.2rem; border-top: 2px solid var(--ligne-forte); }
.chiffres-grille li:nth-child(1) { border-top-color: var(--strate-3); }
.chiffres-grille li:nth-child(2) { border-top-color: var(--strate-2); }
.chiffres-grille li:nth-child(3) { border-top-color: var(--strate-5); }
.chiffres-grille li:nth-child(4) { border-top-color: var(--nappe); }
.chiffres-grille strong { font: 700 clamp(2.3rem, 1.6rem + 2vw, 3.4rem)/1 var(--police-titre); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.chiffres-grille li > span { color: var(--texte-2); font-size: .95rem; max-width: 26ch; }
@media (max-width: 860px) { .chiffres-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; } }

/* ── Une saisie, tous les livrables (d'après « Animated Beam ») ───────── */
.flux { padding-block: var(--section); overflow: hidden; }
.flux-schema {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center; gap: clamp(3rem, 9vw, 8rem); padding-block: 1rem;
}
.flux-colonne { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; position: relative; z-index: 2; }
.flux-colonne--entrees { justify-items: end; }
.flux-colonne--sorties { justify-items: start; }
.flux-noeud {
    display: inline-flex; align-items: center; gap: .7rem; padding: .4rem .95rem .4rem .4rem; border-radius: 999px;
    background: rgb(30 21 20 / .7); border: 1px solid rgb(255 255 255 / .1);
    color: var(--sur-humus); font-size: .92rem; font-weight: 600;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: border-color .25s, transform .3s var(--ressort);
}
.flux-colonne--entrees .flux-noeud { flex-direction: row-reverse; padding: .4rem .4rem .4rem .95rem; }
.flux-noeud:hover { border-color: rgb(230 182 149 / .5); transform: translateY(-2px); }
.flux-pastille {
    display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
    background: rgb(255 255 255 / .08); color: var(--sur-humus-2);
}
.flux-pastille .icone { width: 18px; height: 18px; }
.flux-pastille--sol { color: var(--vif-sol); background: rgb(255 143 133 / .12); }
.flux-pastille--eau { color: var(--vif-eau); background: rgb(111 177 255 / .12); }
.flux-pastille--gaz { color: var(--vif-gaz); background: rgb(255 204 77 / .12); }
.flux-pastille--forage, .flux-pastille--excel { color: var(--vif-forage); background: rgb(156 201 106 / .12); }
.flux-pastille--pdf { color: var(--vif-sol); background: rgb(255 143 133 / .12); }
.flux-pastille--client { color: var(--cuivre-clair); background: rgb(230 182 149 / .14); }
.flux-centre {
    position: relative; z-index: 2; display: grid; justify-items: center; gap: .35rem;
    width: 212px; padding: 1.6rem 1rem 1.3rem; border-radius: 28px; text-align: center;
    background: radial-gradient(120% 90% at 50% 0%, rgb(184 112 74 / .35), transparent 70%), #2a1c1b;
    border: 1px solid rgb(230 182 149 / .3); box-shadow: 0 30px 70px -30px rgb(0 0 0 / .8), 0 0 0 6px rgb(230 182 149 / .05);
}
/* « DIMOBI Solutions » comme sur le logo : le nom en gras, « solutions » en dessous. */
.flux-centre-nom { display: grid; justify-items: center; margin-top: .35rem; line-height: 1; }
.flux-centre-nom strong { font: 700 1.45rem/1 var(--police-titre); letter-spacing: -.02em; }
.flux-centre-nom span { margin-top: .2rem; font: 400 1.02rem/1 var(--police); color: var(--sur-humus-2); }
.flux-centre-legende {
    width: 100%; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid rgb(255 255 255 / .1);
    text-align: center; font-size: .68rem; line-height: 1.5; letter-spacing: .05em; text-transform: uppercase;
    color: var(--sur-humus-3);
}
.flux-centre-halo {
    position: absolute; inset: -14px; border-radius: 36px; border: 1px solid rgb(230 182 149 / .25);
    animation: halo 3.2s ease-out infinite;
}
@keyframes halo { 0% { opacity: .9; transform: scale(.94); } 100% { opacity: 0; transform: scale(1.12); } }
.flux-traits { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.flux-trait { fill: none; stroke: rgb(255 255 255 / .1); stroke-width: 1.5; }
.flux-rayon {
    fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 10 90;
    animation: rayon 3.6s linear infinite;
}
.flux-rayon--entree { stroke: var(--cuivre-clair); filter: drop-shadow(0 0 4px rgb(230 182 149 / .9)); }
.flux-rayon--sortie { stroke: var(--nappe-vive); filter: drop-shadow(0 0 4px rgb(76 195 207 / .9)); }
@keyframes rayon { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@media (max-width: 899.98px) {
    .flux-schema { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1.6rem; }
    .flux-colonne { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
    .flux-colonne--entrees .flux-noeud { flex-direction: row; padding: .4rem .95rem .4rem .4rem; }
    .flux-traits { display: none; }
    .flux-centre::before, .flux-centre::after { /* un trait vertical vers chaque groupe */
        content: ""; position: absolute; left: 50%; width: 1.5px; height: 1.6rem;
        background: linear-gradient(var(--cuivre-clair), transparent);
    }
    .flux-centre::before { bottom: 100%; rotate: 180deg; }
    .flux-centre::after { top: 100%; }
}

/* ── Le circuit de la donnée, en coupe ────────────────────────────────── */
.circuit { padding-block: var(--section) calc(var(--section) * .6); }
.coupe { list-style: none; margin: 0; padding: 0; }
.coupe-strate {
    display: grid; grid-template-columns: 88px 16px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "cote bande contenu image"; column-gap: clamp(1rem, 2.4vw, 2rem);
}
.coupe-cote { grid-area: cote; justify-self: end; padding-top: 2.2rem; color: var(--texte-3); font-size: .82rem; white-space: nowrap; }
.coupe-bande { grid-area: bande; transform-origin: top; transition: transform .7s cubic-bezier(.4, 0, .2, 1); }
.coupe-strate--1 .coupe-bande { border-radius: 8px 8px 0 0;
    background: radial-gradient(circle at 25% 35%, rgb(0 0 0 / .3) 1.3px, transparent 1.8px) 0 0 / 9px 9px, var(--strate-1); }
.coupe-strate--2 .coupe-bande { background: repeating-linear-gradient(0deg, rgb(60 35 15 / .16) 0 1px, transparent 1px 6px), var(--strate-3); }
.coupe-strate--3 .coupe-bande { background: repeating-linear-gradient(0deg, rgb(0 0 0 / .14) 0 1px, transparent 1px 9px), var(--strate-5); }
.coupe-strate--nappe .coupe-bande { border-radius: 0 0 8px 8px; background: linear-gradient(to bottom, var(--strate-6), var(--nappe) 30%, var(--nappe-vive)); }
.coupe-strate--nappe .coupe-cote { color: var(--nappe-texte); font-weight: 600; }
.coupe-contenu { grid-area: contenu; padding: 2rem 0 3rem; }
.coupe-contenu h3 { font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); letter-spacing: -.025em; }
.coupe-contenu p { margin-top: .8rem; color: var(--texte-2); line-height: 1.7; max-width: 58ch; }
.coupe-contenu .liste-coches { margin-top: 1.1rem; }
.coupe-contenu .lien-fleche { margin-top: 1.1rem; }
.coupe-image { grid-area: image; align-self: center; margin: 1.5rem 0; }
.coupe-image img {
    width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px;
    border: 1px solid var(--ligne); box-shadow: var(--ombre-2); background: var(--surface);
}
/* La fiche se montre entière, sur toute la largeur de la coupe, sous son texte (texte et liste côte
   à côte) : à la largeur d'une colonne, le tableau serait illisible. Fond blanc même en thème sombre :
   c'est un document. */
.coupe-strate--2 { grid-template-areas: "cote bande contenu contenu" ". bande image image"; }
.coupe-strate--2 .coupe-contenu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(1.5rem, 3vw, 3rem); padding-bottom: 1.5rem; }
.coupe-strate--2 .coupe-contenu h3 { grid-column: 1 / -1; }
.coupe-strate--2 .coupe-contenu .liste-coches { margin-top: .9rem; align-self: start; }
.coupe-image--fiche { margin: 0 0 3rem; }
.coupe-image--fiche img { aspect-ratio: auto; object-fit: contain; padding: 10px; background: #fff; border-radius: 16px; }
.coupe-image--large img { aspect-ratio: 16 / 9; }
/* Les rendus de la strate « fiche » : sol, eau, forage, un onglet chacun (static/js/site.js, rendus). Sans script,
   les trois fiches l'une sous l'autre. */
.rendus { display: grid; gap: .9rem; }
.rendus-onglets {
    display: inline-flex; justify-self: start; gap: .25rem; padding: .3rem; border: 1px solid var(--ligne);
    border-radius: 999px; background: var(--surface); box-shadow: var(--ombre-1);
}
html:not(.js) .rendus-onglets { display: none; }
.rendus-onglet {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .45rem 1rem; border: 0; border-radius: 999px;
    background: none; color: var(--texte-2); font: 600 .9rem/1 var(--police); cursor: pointer; transition: background-color .2s, color .2s;
}
.rendus-onglet::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--milieu-sol); }
.rendus-onglet--eau::before { background: var(--milieu-eau); }
.rendus-onglet--forage::before { background: var(--milieu-forage); }
.rendus-onglet:hover { color: var(--texte); }
.rendus-onglet[aria-selected="true"] { background: var(--accent); color: var(--accent-texte); }
.rendus-onglet:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rendus-panneau { margin: 0; }
.rendus-panneau[hidden] { display: none; }
.js .rendus-panneau:not([hidden]) { animation: fondu .35s ease; }
@media (max-width: 860px) {
    .coupe-strate { grid-template-columns: 12px minmax(0, 1fr); grid-template-areas: "bande cote" "bande contenu" "bande image"; column-gap: 1.1rem; }
    .coupe-cote { justify-self: start; padding-top: 1.5rem; }
    .coupe-contenu { padding: .4rem 0 1rem; }
    .coupe-image { margin: 0 0 2.5rem; }
    .coupe-strate--2 { grid-template-areas: "bande cote" "bande contenu" "bande image"; }
    .coupe-strate--2 .coupe-contenu { display: block; }
}

.liste-coches { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.liste-coches li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: .6rem; color: var(--texte); line-height: 1.5; }
.liste-coches li::before {
    content: ""; width: 20px; height: 20px; margin-top: .1rem; border-radius: 50%;
    background: var(--succes-voile) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23436a0d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ── Les types de feuilles ────────────────────────────────────────────── */
.milieux { padding-block: calc(var(--section) * .6) var(--section); }
.milieux-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.milieu {
    --couleur: var(--cuivre);
    position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
    min-height: 440px; border-radius: 22px; color: #fcf8f7; text-decoration: none;
    box-shadow: var(--ombre-2); transition: transform .35s var(--ressort), box-shadow .35s var(--ressort);
}
.milieu--sol { --couleur: var(--milieu-sol); }
.milieu--eau { --couleur: var(--milieu-eau); }
.milieu--gaz { --couleur: var(--milieu-gaz); }
.milieu--forage { --couleur: var(--milieu-forage); }
.milieu::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; z-index: 2; background: var(--couleur); }
.milieu::after { /* le halo qui suit la souris (static/js/site.js) */
    content: ""; position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .3s;
    background: radial-gradient(320px circle at var(--x, 50%) var(--y, 30%), rgb(255 255 255 / .2), transparent 60%);
}
.milieu:hover { transform: translateY(-4px); box-shadow: var(--ombre-3); color: #fcf8f7; }
.milieu:hover::after { opacity: 1; }
.milieu-image { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--ressort); }
.milieu:hover .milieu-image { scale: 1.06; }
.milieu-texte {
    position: relative; z-index: 2; display: grid; gap: .55rem; width: 100%;
    padding: 4.5rem 1.3rem 1.4rem;
    background: linear-gradient(to top, rgb(21 14 13 / .92), rgb(21 14 13 / .55) 55%, transparent);
}
.milieu-etiquette {
    justify-self: start; padding: .22rem .6rem; border-radius: 999px; background: var(--couleur);
    font: 600 .68rem/1.3 var(--police-mono); letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
.milieu--gaz .milieu-etiquette { color: var(--cocoa); }
.milieu-titre { font: 700 1.3rem/1.15 var(--police-titre); letter-spacing: -.02em; }
.milieu-resume { color: #e2d6d2; font-size: .9rem; line-height: 1.5; }
.milieu .lien-fleche { color: var(--cuivre-clair); margin-top: .2rem; }
.milieu:hover .lien-fleche .icone { transform: translateX(3px); }
.milieux-aussi { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.5rem; }
.milieux-aussi .mono { margin-right: .4rem; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }
.puce { padding: .42rem .85rem; border: 1px solid var(--ligne-forte); border-radius: 999px; background: var(--surface); font-size: .88rem; }
.puce--cuivre { border-color: transparent; background: var(--accent-voile); color: var(--lien); font-weight: 600; }
@media (max-width: 1023.98px) { .milieux-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .milieu { min-height: 380px; } }
@media (max-width: 560px) { .milieux-grille { grid-template-columns: minmax(0, 1fr); } .milieu { min-height: 340px; } }

/* ── Sur mesure ───────────────────────────────────────────────────────── */
.sur-mesure { padding-block: var(--section); background: var(--creux); border-block: 1px solid var(--ligne); overflow: hidden; }
.sur-mesure-grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sur-mesure .chapo { margin-top: 1.1rem; }
.sur-mesure .liste-coches { margin: 1.6rem 0 2rem; }
/* Les deux téléphones (détourés), légèrement inclinés et décalés. */
.sur-mesure-ecrans { position: relative; aspect-ratio: 1 / 1.1; max-width: 560px; justify-self: center; width: 100%; }
.sur-mesure-ecran { position: absolute; width: 49%; height: auto; filter: drop-shadow(0 34px 40px rgb(48 31 30 / .3)); transition: transform .5s var(--ressort); }
.sur-mesure-ecran--1 { left: 2%; top: 0; rotate: -4deg; }
.sur-mesure-ecran--2 { right: 2%; top: 8%; rotate: 4deg; }
.sur-mesure-ecrans:hover .sur-mesure-ecran--1 { transform: translate(-10px, -6px); }
.sur-mesure-ecrans:hover .sur-mesure-ecran--2 { transform: translate(10px, 6px); }
@media (max-width: 860px) { .sur-mesure-grille { grid-template-columns: minmax(0, 1fr); } }

/* ── Vidéo (façade : YouTube n'est appelé qu'au clic) ─────────────────── */
.video { padding-block: var(--section); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.video .chapo { margin-top: 1rem; }
.video-facade, .video-cadre {
    position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: 22px; background: var(--humus); box-shadow: var(--ombre-3);
}
.video-facade img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--ressort), filter .3s; }
.video-facade:hover img { scale: 1.03; filter: brightness(.85); }
.video-lecture {
    position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center;
    width: 76px; height: 76px; border-radius: 50%; background: var(--cuivre-clair); color: var(--cocoa);
    box-shadow: 0 0 0 10px rgb(230 182 149 / .25); transition: scale .3s var(--ressort);
}
.video-lecture .icone { fill: currentColor; translate: 2px 0; }
.video-facade:hover .video-lecture { scale: 1.08; }
.video-cadre iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 860px) { .video { grid-template-columns: minmax(0, 1fr); } }

/* ── Témoignage ───────────────────────────────────────────────────────── */
.temoignage { padding-block: 0 var(--section); }
.temoignage figure { margin: 0 auto; max-width: 860px; text-align: center; }
.temoignage-guillemets { width: 40px; height: 40px; margin: 0 auto 1rem; color: var(--cuivre); fill: color-mix(in srgb, var(--cuivre) 20%, transparent); }
.temoignage blockquote { margin: 0; font: 600 clamp(1.3rem, 1rem + 1.1vw, 1.9rem)/1.35 var(--police-titre); letter-spacing: -.02em; text-wrap: balance; }
.temoignage figcaption { margin-top: 1.2rem; color: var(--texte-3); font: 500 .8rem/1.4 var(--police-mono); letter-spacing: .06em; text-transform: uppercase; }

/* ── Démonstration ────────────────────────────────────────────────────── */
.demo-interieur { padding-block: clamp(3.5rem, 7vw, 6rem); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.demo p:not(.surtitre) { margin-top: 1rem; max-width: 56ch; color: var(--sur-humus-2); line-height: 1.65; }
.demo-image { width: 100%; height: auto; border-radius: 22px; }
/* Un rayon de lumière fait le tour du cadre (d'après « Border Beam »). */
.cadre-rayon {
    position: relative; padding: 2px; border-radius: 24px;
    background: conic-gradient(from var(--angle), transparent 0 62%, rgb(230 182 149 / .2) 72%, var(--cuivre-clair) 80%, #fff 83%, transparent 88%), rgb(255 255 255 / .08);
    box-shadow: 0 40px 80px -30px rgb(0 0 0 / .7);
    animation: tourner 6s linear infinite;
}
@keyframes tourner { to { --angle: 360deg; } }
@media (max-width: 860px) { .demo-interieur { grid-template-columns: minmax(0, 1fr); } }

/* ── Pied de page ─────────────────────────────────────────────────────── */
.pied-site { position: relative; overflow: hidden; background: #1d1312; color: var(--sur-humus-2); }
.pied-site::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
    background: linear-gradient(to right,
        var(--strate-3) 0 16%, var(--strate-2) 16% 31%, var(--strate-1) 31% 47%,
        var(--strate-5) 47% 60%, var(--nappe-vive) 60% 61%, var(--strate-4) 61% 79%, var(--strate-6) 79% 100%);
}
.pied-site a { color: var(--sur-humus-2); text-decoration: none; }
.pied-site a:hover { color: var(--sur-humus); }
.pied-site-interieur {
    max-width: var(--largeur); margin-inline: auto; padding: clamp(3rem, 6vw, 4.5rem) var(--gouttiere) 1.5rem;
    display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem;
}
.pied-marque img { width: 172px; height: 40px; max-width: none; }
.pied-marque p { margin-top: 1.1rem; max-width: 40ch; font-size: .92rem; line-height: 1.6; }
.pied-linkedin { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.2rem; font-weight: 600; font-size: .9rem; }
.pied-colonne { display: grid; align-content: start; gap: .6rem; font-size: .92rem; }
.pied-colonne .surtitre { color: var(--cuivre-clair); margin-bottom: .3rem; }
.pied-colonne address { font-style: normal; line-height: 1.5; }
/* Le nom en très grand, en dégradé qui s'efface vers le bas. */
.pied-mot {
    margin: 0 auto -.12em; max-width: var(--largeur); padding-inline: var(--gouttiere); text-align: center;
    font: 800 clamp(4.5rem, 21vw, 17rem)/.9 var(--police-titre); letter-spacing: -.06em; user-select: none;
    background: linear-gradient(to bottom, rgb(230 182 149 / .2), rgb(230 182 149 / .02) 80%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pied-bas {
    position: relative; max-width: var(--largeur); margin-inline: auto; padding: 1.3rem var(--gouttiere) 2rem;
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem;
    border-top: 1px solid rgb(255 255 255 / .08); font-size: .82rem; color: var(--sur-humus-3);
}
.pied-bas nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
@media (max-width: 860px) { .pied-site-interieur { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pied-marque { grid-column: 1 / -1; } }
@media (max-width: 480px) { .pied-site-interieur { grid-template-columns: minmax(0, 1fr); } }

/* ── Bulle de rendez-vous (comme Geonyx) ──────────────────────────────── */
.bulle-rdv {
    position: fixed; right: clamp(14px, 2.5vw, 26px); bottom: clamp(14px, 2.5vw, 26px); z-index: 40;
    display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.15rem; border-radius: 999px;
    background: var(--cuivre-clair); color: var(--cocoa); font: 700 .9rem/1 var(--police); text-decoration: none;
    box-shadow: 0 18px 40px -16px rgb(48 31 30 / .6), 0 0 0 1px rgb(48 31 30 / .08);
    transition: translate .2s var(--ressort), background .2s;
}
.bulle-rdv:hover { background: #efc6a9; color: var(--cocoa); translate: 0 -2px; }
/* Après la règle de base, sinon elle l'emporte : sur téléphone, la barre du bas tient la place. */
@media (max-width: 899.98px) { .bulle-rdv { display: none; } }
@media print { .bulle-rdv, .entete-site { display: none; } }

/* ── Page d'erreur (pas de scène sombre : l'en-tête part clair) ───────── */
.erreur { padding-block: calc(var(--entete-total) + clamp(3rem, 10vw, 7rem)) clamp(4rem, 10vw, 8rem); }
.erreur h1 { margin-top: .9rem; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); }
.erreur .chapo { margin-top: 1rem; }

/* =============================================================================
   Pages intérieures : prélèvements, espace client, à propos, contact, légal
   ============================================================================= */
.livrable h2, .calculs h2, .histoire h2, .mission h2, .securite h2, .adresse h2 {
    margin-top: .8rem;
    font-size: clamp(1.75rem, 1.05rem + 2vw, 2.7rem); font-weight: 700; letter-spacing: -.03em;
}

/* ── Haut de page intérieur : moins haut que l'accueil, à la couleur de sa fiche ── */
.heros--page { min-height: min(100svh, 780px); }
.heros--page .heros-interieur { padding-bottom: clamp(3rem, 7vh, 4.5rem); }
.heros--page h1 { font-size: clamp(2rem, min(3.7vw, 6.8vh), 3.4rem); text-wrap: balance; }
.heros--sol { --couleur: var(--vif-sol); }
.heros--eau { --couleur: var(--vif-eau); }
.heros--gaz { --couleur: var(--vif-gaz); }
.heros--forage { --couleur: var(--vif-forage); }
.pastille-milieu {
    display: inline-block; width: 9px; height: 9px; margin-right: .6rem; border-radius: 3px; vertical-align: .08em;
    background: var(--couleur, var(--cuivre-clair)); box-shadow: 0 0 12px 1px var(--couleur, var(--cuivre-clair));
}
.pastille--eau { --couleur: var(--milieu-eau); }
.pastille--gaz { --couleur: var(--milieu-gaz); }
.pastille--forage { --couleur: var(--milieu-forage); }

/* Fil d'Ariane */
.fil ol { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .5rem; font: 500 .76rem/1.3 var(--police-mono); letter-spacing: .04em; }
.fil li + li::before { content: "/"; margin-right: .5rem; opacity: .45; }
.fil a { color: var(--texte-3); text-decoration: none; }
.fil a:hover { color: var(--texte); }
.fil [aria-current] { color: var(--texte-2); }
.scene-sombre .fil a { color: var(--sur-humus-3); }
.scene-sombre .fil a:hover { color: var(--sur-humus); }
.scene-sombre .fil [aria-current] { color: var(--sur-humus-2); }

/* Visuel : la photo de terrain, un téléphone détouré devant, la fiche qui flotte. */
.heros-visuel--page { min-height: clamp(360px, 58vh, 540px); }
.heros-photo--page { inset: 0; }
.heros-photo--equipe img { object-position: 50% 22%; }
.heros-telephone {
    position: absolute; z-index: 3; left: -5%; bottom: -5%; width: 31%; max-width: 200px; height: auto; rotate: -5deg;
    filter: drop-shadow(0 30px 34px rgb(0 0 0 / .55)); animation: apparaitre .8s var(--ressort) .45s both;
}
.heros-visuel--page .heros-fiche--releve { left: auto; right: -16px; bottom: 9%; }
.heros-visuel--page:has(.heros-ecran), .heros-visuel--page:has(.contact-cartes) { min-height: 0; }
.heros-ecran { margin: 0; animation: apparaitre .8s var(--ressort) .15s both; }
.heros-ecran img {
    width: 100%; height: auto; border-radius: 18px;
    box-shadow: 0 40px 80px -30px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .08);
}
@media (max-width: 1023.98px) {
    .heros-visuel--page { min-height: 420px; }
    .heros-telephone { left: 2%; }
    .heros-visuel--page .heros-fiche--releve { right: 8px; }
}
@media (max-width: 560px) {
    .heros-visuel--page { min-height: 340px; }
    .heros-telephone { width: 34%; }
}

/* Cartes de contact, dans le haut de la page Contact */
.contact-cartes { display: grid; gap: .75rem; animation: apparaitre .8s var(--ressort) .15s both; }
.contact-carte {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 1rem;
    padding: 1.05rem 1.2rem; border-radius: 18px; border: 1px solid rgb(255 255 255 / .12);
    background: rgb(255 255 255 / .05); color: var(--sur-humus-2); text-decoration: none; font-size: .9rem;
    transition: background .2s, border-color .2s, transform .2s var(--ressort);
}
.contact-carte > .icone:first-child { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: rgb(230 182 149 / .14); color: var(--cuivre-clair); }
.contact-carte strong { display: block; margin-bottom: .1rem; color: var(--sur-humus); font: 700 1.05rem/1.25 var(--police-titre); }
.contact-carte:hover { background: rgb(255 255 255 / .09); border-color: rgb(230 182 149 / .4); color: var(--sur-humus-2); transform: translateY(-2px); }
.contact-fleche { opacity: .7; transition: translate .2s var(--ressort); }
.contact-carte:hover .contact-fleche { translate: 3px 0; }
.contact-carte--rdv { border-color: transparent; background: var(--cuivre-clair); color: #5c3d2e; }
.contact-carte--rdv strong { color: var(--cocoa); }
.contact-carte--rdv > .icone:first-child { background: rgb(48 31 30 / .1); color: var(--cocoa); }
.contact-carte--rdv:hover { background: #efc6a9; color: #5c3d2e; }

/* ── Fonctionnalités : une grille de cartes ───────────────────────────── */
.fonctions { padding-block: var(--section) calc(var(--section) * .6); }
.fonctions-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.fonctions-grille--quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fonction {
    position: relative; isolation: isolate; overflow: hidden; padding: 1.5rem 1.4rem 1.6rem;
    border: 1px solid var(--ligne); border-radius: 20px; background: var(--surface); box-shadow: var(--ombre-1);
    transition: transform .35s var(--ressort), box-shadow .35s var(--ressort), border-color .35s;
}
.fonction::after { /* le halo qui suit la souris (static/js/site.js) */
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s; pointer-events: none;
    background: radial-gradient(260px circle at var(--x, 50%) var(--y, 30%), var(--accent-voile), transparent 70%);
}
.fonction:hover { transform: translateY(-3px); box-shadow: var(--ombre-2); border-color: var(--ligne-forte); }
.fonction:hover::after { opacity: 1; }
.fonction--large { grid-column: span 2; background: linear-gradient(135deg, var(--accent-voile), transparent 55%), var(--surface); }
.fonction-icone { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--accent-voile); color: var(--lien); }
.fonction h3 { margin-top: 1.1rem; font-size: 1.12rem; letter-spacing: -.02em; }
.fonction p { margin-top: .5rem; color: var(--texte-2); font-size: .95rem; line-height: 1.6; }
.fonction--large p { max-width: 60ch; }
@media (max-width: 1023.98px) { .fonctions-grille, .fonctions-grille--quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .fonctions-grille, .fonctions-grille--quatre { grid-template-columns: minmax(0, 1fr); }
    .fonction--large { grid-column: auto; }
}

/* ── Calculs faits sur le terrain ─────────────────────────────────────── */
.calculs { --couleur: var(--cuivre-clair); }
.calculs--eau { --couleur: var(--vif-eau); }
.calculs--gaz { --couleur: var(--vif-gaz); }
.calculs-interieur {
    padding-block: var(--section); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.calculs .chapo { margin-top: 1rem; }
.liste-coches--sombre { margin-top: 1.5rem; }
.liste-coches--sombre li { color: var(--sur-humus); }
.liste-coches--sombre li::before {
    background: rgb(156 201 106 / .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239cc96a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
/* Une « calculette » de terrain : les valeurs saisies, puis le résultat. */
.calculette {
    margin: 0; padding: 1.5rem 1.6rem; border-radius: 22px; border: 1px solid rgb(255 255 255 / .12);
    background: rgb(255 255 255 / .05);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 30px 60px -30px rgb(0 0 0 / .7);
}
.calculette figcaption { color: var(--cuivre-clair); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.calculette dl { margin: 1rem 0 0; }
.calculette dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .68rem 0; border-bottom: 1px dashed rgb(255 255 255 / .12); }
.calculette dt { color: var(--sur-humus-2); }
.calculette dd { margin: 0; color: var(--sur-humus); font-weight: 600; white-space: nowrap; }
.calculette dl > .calculette-resultat {
    margin-top: .6rem; padding: .95rem 1rem; border: 0; border-radius: 12px;
    background: color-mix(in srgb, var(--couleur) 15%, transparent);
}
.calculette-resultat dt { color: var(--sur-humus); font-weight: 600; }
.calculette-resultat dd { color: var(--couleur); font-size: 1.15rem; }
@media (max-width: 860px) { .calculs-interieur { grid-template-columns: minmax(0, 1fr); } }

/* ── Le livrable ──────────────────────────────────────────────────────── */
.livrable {
    padding-block: var(--section); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.livrable .chapo { margin-top: 1rem; }
.livrable .lien-fleche { margin-top: 1.2rem; color: var(--lien); }
.livrable-image { margin: 0; }
.livrable-image img { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--ligne); box-shadow: var(--ombre-3); }
.livrable--large { grid-template-columns: minmax(0, 1fr); }
.livrable--large .livrable-texte { max-width: 780px; }
.livrable--portrait { grid-template-columns: minmax(0, 1fr) minmax(0, .75fr); }
.livrable--large .livrable-image img, .livrable--portrait .livrable-image img { padding: 10px; background: #fff; }
@media (max-width: 860px) { .livrable, .livrable--portrait { grid-template-columns: minmax(0, 1fr); } }

/* ── Questions fréquentes ─────────────────────────────────────────────── */
.faq { padding-block: 0 var(--section); }
.faq-liste { display: grid; gap: .7rem; max-width: 880px; }
.faq-item { border: 1px solid var(--ligne); border-radius: 16px; background: var(--surface); transition: border-color .2s, box-shadow .2s; }
.faq-item[open] { border-color: var(--ligne-forte); box-shadow: var(--ombre-2); }
.faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem;
    list-style: none; cursor: pointer; font: 600 1.04rem/1.4 var(--police-titre); letter-spacing: -.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icone { flex: none; color: var(--texte-3); transition: rotate .25s var(--ressort); }
.faq-item[open] summary .icone { rotate: 180deg; color: var(--lien); }
.faq-item p { padding: 0 1.3rem 1.25rem; max-width: 72ch; color: var(--texte-2); line-height: 1.65; }

/* ── Les autres types de feuilles, en pied de page de prélèvement ─────── */
.milieux--autres { padding-top: 0; }
.milieux-grille--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.milieux-grille--trois .milieu { min-height: 380px; }
@media (max-width: 1023.98px) { .milieux-grille--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .milieux-grille--trois { grid-template-columns: minmax(0, 1fr); } .milieux-grille--trois .milieu { min-height: 320px; } }

/* ── Sans / avec (page Prélèvements) ──────────────────────────────────── */
.versus { padding-block: var(--section) calc(var(--section) * .6); }
.versus-grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 1rem; }
.versus-colonne { padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 24px; }
.versus-colonne--sans { border: 1px solid var(--ligne); background: var(--creux); }
.versus-colonne--avec { display: flex; flex-direction: column; box-shadow: var(--ombre-3); }
.versus-tete { margin-bottom: 1.3rem; font: 700 1.25rem/1.2 var(--police-titre); letter-spacing: -.02em; }
.versus-tete .mono {
    display: inline-block; margin-right: .5rem; padding: .22rem .5rem; border-radius: 6px; vertical-align: .15em;
    font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
}
.versus-colonne--sans .versus-tete .mono { background: var(--danger-voile); color: var(--danger); }
.versus-colonne--avec .versus-tete .mono { background: rgb(156 201 106 / .16); color: #9cc96a; }
.versus-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .95rem; }
.versus-colonne--sans .versus-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.versus-liste li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: .65rem; font-size: .93rem; line-height: 1.5; }
.versus-liste .icone { margin-top: .2rem; }
.versus-liste strong { display: block; }
.versus-colonne--sans li { color: var(--texte-2); }
.versus-colonne--sans strong { color: var(--texte); }
.versus-colonne--sans .icone { color: var(--danger); }
.versus-colonne--avec li { color: var(--sur-humus-2); }
.versus-colonne--avec strong { color: var(--sur-humus); }
.versus-colonne--avec .icone { color: #9cc96a; }
.versus-colonne--avec .bouton { align-self: start; max-width: 100%; height: auto; margin-top: auto; white-space: normal; text-align: left; }
.versus-colonne--avec .versus-liste { margin-bottom: 1.8rem; }
@media (max-width: 900px) { .versus-grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .versus-colonne--sans .versus-liste { grid-template-columns: minmax(0, 1fr); } }

/* ── Sécurité (page Espace client) ────────────────────────────────────── */
.securite-interieur {
    padding-block: var(--section); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.securite .chapo { margin-top: 1rem; }
.securite-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.securite-liste li {
    display: grid; gap: .8rem; padding: 1.3rem; border-radius: 18px;
    border: 1px solid rgb(255 255 255 / .1); background: rgb(255 255 255 / .04);
    color: var(--sur-humus-2); font-size: .92rem; line-height: 1.55;
}
.securite-liste .icone { width: 26px; height: 26px; color: var(--cuivre-clair); }
.securite-liste strong { display: block; margin-bottom: .3rem; color: var(--sur-humus); font: 700 1.02rem/1.3 var(--police-titre); }
@media (max-width: 860px) { .securite-interieur { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .securite-liste { grid-template-columns: minmax(0, 1fr); } }

/* ── À propos ─────────────────────────────────────────────────────────── */
.histoire {
    padding-block: var(--section); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.histoire-texte p:not(.surtitre) { margin-top: 1rem; max-width: 62ch; color: var(--texte-2); line-height: 1.75; }
.histoire-texte a { color: var(--lien); }
.histoire-citation { margin: 0; padding: 2rem; border: 1px solid var(--ligne); border-radius: 24px; background: var(--creux); }
.histoire-citation .icone { width: 36px; height: 36px; color: var(--cuivre); fill: color-mix(in srgb, var(--cuivre) 20%, transparent); }
.histoire-citation p { margin-top: 1rem; color: var(--texte); font: 600 clamp(1.2rem, 1rem + .7vw, 1.55rem)/1.4 var(--police-titre); letter-spacing: -.02em; }
.mission-interieur {
    padding-block: var(--section); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.mission .chapo { margin-top: 1rem; }
.approche { list-style: none; margin: 0; padding: 0; counter-reset: etape; display: grid; gap: .8rem; }
.approche li {
    counter-increment: etape; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 1rem;
    padding: 1.1rem 1.2rem; border-radius: 16px; border: 1px solid rgb(255 255 255 / .1); background: rgb(255 255 255 / .04);
    color: var(--sur-humus-2); font-size: .94rem; line-height: 1.5;
}
.approche li::before { content: counter(etape, decimal-leading-zero); grid-row: span 2; padding-top: .2rem; color: var(--cuivre-clair); font: 600 .9rem/1 var(--police-mono); }
.approche strong { color: var(--sur-humus); font: 700 1.02rem/1.3 var(--police-titre); }
/* L'origine : DIMOBI Solutions, développée par ECODEV Conseils (animation, static/js/site.js). */
:root { --origine-carre: #301f1e; --origine-pli: #f8f6f1; --origine-pli-opacite: .3; }
@media (prefers-color-scheme: dark) { :root { --origine-carre: #f4ede7; --origine-pli: #16100d; --origine-pli-opacite: .34; } }
.origine-section {
    padding-block: 0 var(--section); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.origine-section h2 { margin-top: .8rem; font-size: clamp(1.75rem, 1.05rem + 2vw, 2.7rem); font-weight: 700; letter-spacing: -.03em; }
.origine-section .chapo { margin-top: 1rem; }
.origine-section .liste-coches { margin-top: 1.4rem; }
.origine { margin: 0; display: grid; justify-items: center; gap: 1rem; }
.origine-svg { width: min(340px, 80vw); height: auto; overflow: visible; }
.origine-svg .carre { fill: var(--origine-carre); }
.origine-svg .pli { fill: var(--origine-pli); opacity: var(--origine-pli-opacite); }
.origine-svg .blanc { fill: var(--fond); }
.origine-svg .lettres path { fill: var(--texte); }
.origine-svg .par { fill: var(--texte-2); font: 400 13px var(--police); letter-spacing: .02em; }
.origine-svg #icone, .origine-svg .lettres path { transform-box: view-box; transform-origin: 0 0; }
.origine-svg .noeud { transform-box: fill-box; transform-origin: center; }
.origine-rejouer {
    padding: .5rem 1rem; border: 1px solid var(--ligne-forte); border-radius: 999px; background: transparent;
    color: var(--texte-2); font: 600 .85rem/1 var(--police); cursor: pointer;
}
.origine-rejouer:hover { color: var(--texte); border-color: var(--texte-3); }
@media (max-width: 860px) { .origine-section { grid-template-columns: minmax(0, 1fr); } }

.valeurs { padding-block: var(--section) calc(var(--section) * .6); }
.equipe { padding-bottom: var(--section); }
.equipe-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.personne {
    display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 1.5rem; align-items: start; padding: 1.2rem;
    border: 1px solid var(--ligne); border-radius: 22px; background: var(--surface); box-shadow: var(--ombre-1);
}
.personne img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; }
.personne h3 { margin-top: .3rem; font-size: 1.35rem; letter-spacing: -.02em; }
.personne-role { margin-top: .3rem; color: var(--lien); font-size: .9rem; font-weight: 600; }
.personne p:not(.personne-role) { margin-top: .8rem; color: var(--texte-2); font-size: .95rem; line-height: 1.65; }
@media (max-width: 960px) { .histoire, .mission-interieur, .equipe-grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .personne { grid-template-columns: minmax(0, 1fr); } .personne img { max-width: 220px; } }

/* ── Contact : le formulaire (#ecrire, app/contact.py) ────────────────── */
.ecrire {
    padding-block: var(--section) 0; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 5vw, 4rem); align-items: start; scroll-margin-top: var(--entete-total);
}
.ecrire h2 { margin-top: .8rem; font-size: clamp(1.75rem, 1.05rem + 2vw, 2.7rem); font-weight: 700; letter-spacing: -.03em; }
.ecrire .chapo { margin-top: 1rem; }
.ecrire-direct { margin-top: 1.2rem; color: var(--texte-2); }
.ecrire-formulaire {
    position: relative; padding: clamp(1.4rem, 3vw, 2.2rem);
    border: 1px solid var(--ligne); border-radius: 22px; background: var(--surface); box-shadow: var(--ombre-2);
}
.ecrire-formulaire [aria-invalid="true"] { border-color: var(--danger); }
.erreur-champ { color: var(--danger); font-weight: 500; font-size: .85rem; }
.ecrire-formulaire button[disabled] { opacity: .6; cursor: progress; }
/* Le champ piège : hors de l'écran, jamais vu ni atteint au clavier. */
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 860px) { .ecrire { grid-template-columns: minmax(0, 1fr); } }
.merci .surtitre { display: inline-flex; align-items: center; gap: .4rem; }

/* ── Contact : l'adresse ──────────────────────────────────────────────── */
.adresse {
    padding-block: var(--section); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.adresse address { margin-top: 1.1rem; color: var(--texte-2); font-style: normal; line-height: 1.7; }
.adresse .liste-coches { padding: 1.8rem; border: 1px solid var(--ligne); border-radius: 22px; background: var(--creux); }
@media (max-width: 860px) { .adresse { grid-template-columns: minmax(0, 1fr); } }

/* ── Pages légales : un texte, sans scène sombre ──────────────────────── */
.legal { max-width: 880px; padding-block: calc(var(--entete-total) + clamp(2rem, 6vw, 4rem)) var(--section); }
.legal h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); letter-spacing: -.03em; }
.legal-maj { margin-top: .5rem; color: var(--texte-3); font: 500 .8rem/1.4 var(--police-mono); }
.legal h2 { margin-top: 2.4rem; font-size: 1.35rem; letter-spacing: -.02em; }
.legal p, .legal li { color: var(--texte-2); line-height: 1.7; }
.legal p { margin-top: .9rem; }
.legal ul { display: grid; gap: .4rem; margin: .9rem 0 0; padding-left: 1.2rem; }
.legal a { color: var(--lien); }
.legal strong { color: var(--texte); }
.legal table { width: 100%; margin-top: 1rem; border-collapse: collapse; font-size: .95rem; }
.legal th, .legal td { padding: .7rem .9rem; border-bottom: 1px solid var(--ligne); text-align: left; vertical-align: top; }
.legal th { width: 36%; color: var(--texte); font-weight: 600; }
@media (max-width: 560px) {
    .legal th, .legal td { display: block; width: auto; padding-inline: 0; }
    .legal th { padding-bottom: .1rem; border-bottom: 0; }
}

/* =============================================================================
   Guides : pages de lecture (sommaire fixe, texte confortable, schémas)
   ============================================================================= */
.heros--guide { min-height: 0; }
.heros--guide .heros-interieur { grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(3rem, 7vh, 4.5rem); }
.heros--guide .heros-texte { max-width: 860px; }
.heros--guide h1 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.3rem); text-wrap: balance; }
.heros--guide .heros-chapo { max-width: 68ch; }
.guide-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1.4rem; color: var(--sur-humus-3); font-size: .78rem; }

.guide {
    display: grid; grid-template-columns: 230px minmax(0, 720px); gap: clamp(2rem, 5vw, 4.5rem); justify-content: center;
    padding-block: clamp(3rem, 6vw, 5rem) var(--section);
}
.guide-sommaire { position: sticky; top: calc(var(--entete-total) + 1rem); align-self: start; }
.guide-sommaire ol { list-style: none; margin: .9rem 0 0; padding: 0; border-left: 2px solid var(--ligne); }
.guide-sommaire a {
    display: block; margin-left: -2px; padding: .38rem .9rem; border-left: 2px solid transparent;
    color: var(--texte-3); font-size: .88rem; line-height: 1.35; text-decoration: none; transition: color .2s, border-color .2s;
}
.guide-sommaire a:hover { color: var(--texte); border-left-color: var(--cuivre); }

.guide-corps { min-width: 0; font-size: 1.04rem; }
.guide-corps > :first-child { margin-top: 0; }
/* scroll-margin-top s'ajoute à scroll-padding-top de la page (l'en-tête) : un peu d'air seulement. */
.guide-corps h2 { margin-top: 3.2rem; font-size: clamp(1.45rem, 1.15rem + 1vw, 1.95rem); letter-spacing: -.025em; scroll-margin-top: 1rem; }
.guide-corps h3 { margin-top: 2rem; font-size: 1.2rem; letter-spacing: -.015em; }
.guide-corps p { margin-top: 1rem; color: var(--texte-2); line-height: 1.75; }
.guide-corps ul, .guide-corps ol { display: grid; gap: .55rem; margin: 1rem 0 0; padding-left: 1.3rem; color: var(--texte-2); line-height: 1.7; }
.guide-corps li::marker { color: var(--cuivre); }
.guide-corps ol li::marker { font-weight: 700; }
.guide-corps strong { color: var(--texte); }
.guide-corps a:not(.lien-fleche) { color: var(--lien); }
.guide-corps .lien-fleche { color: var(--lien); }
.guide-definition {
    padding: 1.3rem 1.5rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--ligne);
    box-shadow: var(--ombre-1); font-size: 1.1rem;
}
.guide-encadre { padding: 1.1rem 1.3rem; border-left: 4px solid var(--cuivre); border-radius: 0 12px 12px 0; background: var(--creux); }
.guide-encadre--attention { border-left-color: var(--logo-jaune); }
.guide-formule {
    padding: 1rem 1.2rem; border: 1px dashed var(--ligne-forte); border-radius: 12px; background: var(--surface);
    font: 600 1rem/1.5 var(--police-mono); text-align: center;
}
.guide-corps .guide-formule { color: var(--texte); }
.guide-figure { margin: 1.6rem 0 0; }
.guide-figure figcaption { margin-top: .6rem; color: var(--texte-3); font-size: .85rem; text-align: center; }

/* Le schéma du piézomètre : traits et couleurs pris dans les jetons (clair et sombre). */
.schema-piezo { display: block; width: 100%; height: auto; padding: 1rem; border: 1px solid var(--ligne); border-radius: 16px; background: var(--surface); }
.sp-zone-seche { fill: color-mix(in srgb, var(--strate-4) 22%, transparent); }
.sp-zone-nappe { fill: color-mix(in srgb, var(--nappe) 14%, transparent); }
.sp-grain-sol { fill: color-mix(in srgb, var(--texte) 18%, transparent); }
.sp-sol-trait { fill: none; stroke: var(--texte-2); stroke-width: 2; }
.sp-niveau { fill: none; stroke: var(--nappe); stroke-width: 1.6; stroke-dasharray: 6 4; }
.sp-forage { fill: var(--surface); stroke: var(--texte-3); stroke-width: 1.2; }
.sp-motif { fill: none; stroke: var(--texte-3); stroke-width: 1; }
.sp-bentonite { fill: color-mix(in srgb, var(--strate-5) 35%, transparent); }
.sp-massif { fill: color-mix(in srgb, var(--strate-4) 55%, transparent); }
.sp-grain { fill: var(--strate-2); }
.sp-eau { fill: color-mix(in srgb, var(--nappe-vive) 45%, transparent); }
.sp-fond { fill: var(--texte-3); }
.sp-tube { fill: none; stroke: var(--texte); stroke-width: 2.4; }
.sp-fentes { fill: none; stroke: var(--texte-2); stroke-width: 1.4; }
.sp-dalle { fill: var(--strate-5); }
.sp-capot { fill: color-mix(in srgb, var(--surface) 70%, transparent); stroke: var(--texte); stroke-width: 2; }
.sp-repere { stroke: var(--cuivre); stroke-width: 3; }
.sp-cote { fill: none; stroke: var(--cuivre); stroke-width: 1.4; }
.sp-symbole { fill: none; stroke: var(--nappe); stroke-width: 1.6; }
.sp-legendes path { fill: none; stroke: var(--texte-3); stroke-width: 1; }
.sp-legendes circle { fill: var(--texte); }
.sp-texte { fill: var(--texte); font: 600 14px/1 var(--police); }
.sp-fin { font-weight: 500; font-size: 13px; text-anchor: end; }
.sp-vertical { fill: var(--cuivre); font-size: 12px; text-anchor: middle; }
.sp-bleu { fill: var(--nappe); }
.sp-discret { fill: var(--texte-3); }

/* Une chaîne de trois blocs reliés par des flèches (schéma conceptuel, étapes d'une démarche). */
.chaine, .guide-corps .chaine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.chaine li {
    position: relative; padding: 1.1rem 1.15rem 1.2rem; border: 1px solid var(--ligne); border-top: 4px solid var(--couleur, var(--cuivre));
    border-radius: 14px; background: var(--surface); box-shadow: var(--ombre-1); font-size: .95rem;
}
.chaine li + li::before {
    content: "→"; position: absolute; left: -1.75rem; top: 50%; translate: 0 -50%; color: var(--texte-3); font-size: 1.3rem;
}
.chaine strong { display: block; margin-bottom: .35rem; font: 700 1.05rem/1.25 var(--police-titre); }
.chaine span { color: var(--texte-2); line-height: 1.55; }
.chaine-source { --couleur: var(--milieu-sol); }
.chaine-transfert { --couleur: var(--nappe); }
.chaine-enjeu { --couleur: var(--milieu-forage); }
@media (max-width: 680px) {
    .chaine, .guide-corps .chaine { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
    .chaine li + li::before { content: "↓"; left: 50%; top: -1.55rem; translate: -50% 0; }
}
.guide-corps .tableau-guide { width: 100%; margin-top: 1.2rem; border-collapse: collapse; font-size: .95rem; }
.tableau-guide th, .tableau-guide td { padding: .75rem .9rem; border-bottom: 1px solid var(--ligne); text-align: left; vertical-align: top; line-height: 1.55; }
.tableau-guide thead th { background: var(--creux); font: 700 .95rem/1.3 var(--police-titre); }
.tableau-guide tbody th { width: 28%; color: var(--texte); font-weight: 600; }
.tableau-guide td { color: var(--texte-2); }
.guide-tableau-defile { margin-top: 1.2rem; overflow-x: auto; border: 1px solid var(--ligne); border-radius: 14px; background: var(--surface); }
.guide-tableau-defile .tableau-guide { margin-top: 0; min-width: 520px; }
.guide-tableau-defile tbody tr:last-child > * { border-bottom: 0; }

/* Renvoi vers la page produit, après les questions. */
.guide-renvoi { padding-bottom: var(--section); }
.guide-renvoi-carte {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center;
    padding: clamp(1.6rem, 4vw, 2.6rem); border-radius: 24px; box-shadow: var(--ombre-3);
}
.guide-renvoi-carte h2 { margin-top: .6rem; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -.025em; }
.guide-renvoi-carte p:not(.surtitre) { margin-top: .7rem; max-width: 60ch; color: var(--sur-humus-2); line-height: 1.6; }

/* Cartes de guide (index des guides, encart « À lire » des pages de prélèvement). */
.guides-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 1rem; padding-block: clamp(3rem, 6vw, 5rem) var(--section); }
.guide-carte {
    position: relative; isolation: isolate; overflow: hidden; display: grid; gap: .6rem; align-content: start;
    padding: 1.5rem 1.5rem 1.4rem; border: 1px solid var(--ligne); border-radius: 20px; background: var(--surface);
    color: var(--texte); text-decoration: none; box-shadow: var(--ombre-1);
    transition: transform .35s var(--ressort), box-shadow .35s var(--ressort), border-color .35s;
}
.guide-carte::after {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s; pointer-events: none;
    background: radial-gradient(260px circle at var(--x, 50%) var(--y, 30%), var(--accent-voile), transparent 70%);
}
.guide-carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-2); border-color: var(--ligne-forte); color: var(--texte); }
.guide-carte:hover::after { opacity: 1; }
.guide-carte-meta { color: var(--texte-3); font-size: .74rem; letter-spacing: .04em; }
.guide-carte-titre { font: 700 1.25rem/1.25 var(--police-titre); letter-spacing: -.02em; }
.guide-carte-resume { color: var(--texte-2); font-size: .95rem; line-height: 1.55; }
.guide-carte .lien-fleche { margin-top: .3rem; color: var(--lien); }
.a-lire { padding-bottom: calc(var(--section) * .8); }
.a-lire .surtitre { margin-bottom: 1rem; }
.a-lire-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 1rem; }

@media (max-width: 960px) {
    .guide { grid-template-columns: minmax(0, 1fr); }
    .guide-sommaire { position: static; padding: 1.2rem 1.3rem; border: 1px solid var(--ligne); border-radius: 16px; background: var(--surface); }
    .guide-sommaire ol { columns: 2; column-gap: 1.5rem; border-left: 0; }
    .guide-sommaire a { margin-left: 0; padding-inline: 0; border-left: 0; break-inside: avoid; }
}
/* Sur petit écran, le schéma garde une taille lisible et défile à l'horizontale, seul. */
.guide-defile { overflow-x: auto; border-radius: 16px; }
.guide-glisser { display: none; }
@media (max-width: 600px) {
    .guide-glisser { display: inline; }
    .guide-sommaire ol { columns: 1; }
    .guide-renvoi-carte { grid-template-columns: minmax(0, 1fr); }
    .schema-piezo { min-width: 560px; padding: .4rem; }
}

/* =============================================================================
   Actualités (lues dans la facturation) : cartes, liste, page d'une actualité
   ============================================================================= */
.section-tete--ligne { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; max-width: none; }
.section-tete--ligne .lien-fleche { color: var(--lien); }
.actualites-accueil { padding-bottom: var(--section); }
.actualites-liste { padding-block: clamp(3rem, 6vw, 5rem) var(--section); }
.actualites-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 1.2rem; }
.actu-carte {
    position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: auto 1fr;
    border: 1px solid var(--ligne); border-radius: 20px; background: var(--surface); color: var(--texte);
    text-decoration: none; box-shadow: var(--ombre-1);
    transition: transform .35s var(--ressort), box-shadow .35s var(--ressort), border-color .35s;
}
.actu-carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-2); border-color: var(--ligne-forte); color: var(--texte); }
.actu-carte-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--creux); }
.actu-carte-image img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--ressort); }
.actu-carte:hover .actu-carte-image img { scale: 1.04; }
.actu-carte-marque {
    display: grid; place-items: center; width: 100%; height: 100%;
    background: radial-gradient(70% 90% at 20% 10%, rgb(184 112 74 / .35), transparent 70%), var(--humus);
}
.actu-carte-marque img { width: 56px; height: 56px; object-fit: contain; opacity: .9; }
.actu-carte-texte { display: grid; align-content: start; gap: .55rem; padding: 1.2rem 1.3rem 1.3rem; }
.actu-carte-texte time { color: var(--texte-3); font-size: .74rem; letter-spacing: .04em; }
.actu-carte-titre { font: 700 1.15rem/1.3 var(--police-titre); letter-spacing: -.015em; text-wrap: balance; }
.actu-carte-chapo { color: var(--texte-2); font-size: .93rem; line-height: 1.55; }
.actu-carte .lien-fleche { margin-top: .2rem; color: var(--lien); }
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin-top: 2.2rem; }
.pagination .mono { color: var(--texte-3); font-size: .85rem; }
.actualites-vide { display: grid; justify-items: center; gap: .8rem; padding: 3rem 1rem; border: 1px dashed var(--ligne-forte); border-radius: 20px; text-align: center; color: var(--texte-2); }
.actualites-vide .lien-fleche { color: var(--lien); }

.actualite { max-width: 820px; padding-block: clamp(2.5rem, 5vw, 4rem) var(--section); }
.actualite-image { margin: 0 0 2rem; }
/* Une image en hauteur (photo de téléphone) ne prend pas tout l'écran : recadrée au centre. */
.actualite-image img { width: 100%; height: auto; max-height: min(560px, 70vh); object-fit: cover; border-radius: 18px; box-shadow: var(--ombre-2); }
.actualite-corps { max-width: 720px; }
.actualite-corps > :first-child { margin-top: 0; }
.actualite-corps blockquote { margin: 1.4rem 0 0; padding: .8rem 1.2rem; border-left: 4px solid var(--cuivre); background: var(--creux); border-radius: 0 12px 12px 0; }
.actualite-retour { margin-top: 2.5rem; }
.actualite-retour .lien-fleche { color: var(--lien); }

/* =============================================================================
   Univers des pages de prélèvement : un monde par type de feuille
   =============================================================================
   Sol : la terre et ses strates. Eau : la nappe. Gaz : l'air du sol qui remonte.
   Forage : le plan technique de l'ouvrage. La structure, les polices et les
   boutons restent ceux du site (cuivre = action) ; changent le fond des scènes
   sombres et son motif, l'accent, l'illustration du haut de page (templates/
   _univers.html) et l'habillage des cartes. Classe `univers--<clé>` sur <body>. */
.univers--sol { --u-fond: #2a1813; --u-accent: #f2a27e; --u-fonce: #a2402a; --u-teinte: var(--strate-3); --u-motif: url("../img/decor/strates.svg"); }
.univers--eau { --u-fond: #0b2530; --u-accent: #6fd3e0; --u-fonce: #0d6b7e; --u-teinte: var(--nappe); --u-motif: url("../img/decor/ondes.svg"); }
.univers--gaz { --u-fond: #221f17; --u-accent: #ffcf5a; --u-fonce: #8a5d00; --u-teinte: var(--logo-jaune); --u-motif: url("../img/decor/particules.svg"); }
.univers--forage { --u-fond: #13221a; --u-accent: #a9d675; --u-fonce: #3f6a12; --u-teinte: var(--logo-vert); --u-motif: url("../img/decor/quadrillage.svg"); }
@media (prefers-color-scheme: dark) { .univers { --u-fonce: var(--u-accent); } }
.univers { --u-voile: color-mix(in srgb, var(--u-fonce) 11%, transparent); }
/* Les sections claires prennent une pointe de la couleur du milieu : sable, eau, ambre, vert. */
.univers main { background: color-mix(in srgb, var(--fond) 94%, var(--u-teinte)); }

/* Les scènes sombres de la page (haut de page, calculs) prennent le fond de l'univers ;
   le bandeau de démonstration, en bas, revient à la terre de la marque. */
.univers .heros, .univers .calculs {
    background:
        var(--u-motif) center / cover no-repeat,
        radial-gradient(60% 70% at 8% 0%, color-mix(in srgb, var(--u-accent) 20%, transparent), transparent 70%),
        radial-gradient(45% 55% at 100% 100%, color-mix(in srgb, var(--u-accent) 11%, transparent), transparent 70%),
        var(--u-fond);
}
.univers .surtitre { color: var(--u-fonce); }
.univers .numero { background: var(--u-voile); color: var(--u-fonce); }
.univers .scene-sombre .surtitre { color: var(--cuivre-clair); }
.univers .scene-sombre .numero { background: rgb(255 255 255 / .08); color: var(--cuivre-clair); }
.univers .heros .surtitre, .univers .calculs .surtitre, .univers .heros h1 em, .univers .calculs .numero { color: var(--u-accent); }
.univers .pastille-milieu { --couleur: var(--u-accent); }
.univers .livrable .lien-fleche, .univers .faq-item[open] summary .icone { color: var(--u-fonce); }

/* Le liseré du bas du haut de page : strates (sol), eau, pointillés (gaz), règle graduée (forage). */
.univers--eau .heros::after { background: linear-gradient(to right, #0d6b7e, var(--nappe) 30%, var(--nappe-vive) 55%, var(--logo-bleu) 80%, #6fd3e0); }
.univers--gaz .heros::after { background: repeating-linear-gradient(to right, var(--u-accent) 0 22px, transparent 22px 32px); opacity: .75; }
.univers--forage .heros::after {
    height: 9px; opacity: .6;
    background: linear-gradient(var(--u-accent), var(--u-accent)) bottom / 100% 1px no-repeat,
                repeating-linear-gradient(to right, var(--u-accent) 0 1px, transparent 1px 12px);
}

/* L'en-tête : barre teintée sur les scènes sombres, lampe à la couleur de la page. */
.univers .entete--sombre .tube { background: color-mix(in srgb, var(--u-fond) 72%, transparent); }
.univers .tube-lien.actif::before, .univers .tube-lampe::before {
    background: var(--u-fonce);
    box-shadow: 0 0 10px 1px color-mix(in srgb, var(--u-accent) 75%, transparent), 0 6px 18px 6px color-mix(in srgb, var(--u-accent) 22%, transparent);
}
.univers .entete--sombre .tube-lien.actif::before, .univers .entete--sombre .tube-lampe::before { background: var(--u-accent); }
@media (max-width: 899.98px) {
    .univers .entete-site.entete--sombre::before { background: color-mix(in srgb, var(--u-fond) 80%, transparent); }
    .univers .tube { background: color-mix(in srgb, var(--u-fond) 88%, transparent); }
    .univers .tube .tube-lampe::before, .univers .tube .tube-lien.actif::before { background: var(--u-accent); }
}

/* ── L'illustration du haut de page : une coupe à l'échelle, à gauche de la photo ── */
.sig { position: absolute; z-index: 2; left: 0; top: 4%; height: 92%; width: 118px; overflow: visible; }
.univers .heros-photo--page { left: 136px; }
.univers--sol .heros-telephone { left: auto; right: -4%; }
.univers--sol .heros-visuel--page .heros-fiche--releve { top: 7%; bottom: auto; }
.sig text { font: 500 12px/1 var(--police-mono); fill: rgb(252 248 247 / .5); text-anchor: end; }
.sig .sig-etiquette { fill: var(--u-accent); text-anchor: start; }
.sig .sig-centre { text-anchor: middle; }
.sig-regle path { fill: none; stroke: rgb(252 248 247 / .32); stroke-width: 1; }
.sig-motif { fill: none; stroke: rgb(0 0 0 / .35); stroke-width: 1; }
.sig-motif-plein { fill: rgb(0 0 0 / .35); }
.sig-sol { fill: none; stroke: rgb(252 248 247 / .5); stroke-width: 1.2; }
.sig-trait { fill: none; stroke: rgb(252 248 247 / .85); stroke-width: 1.6; }
.sig-crepine { fill: none; stroke: rgb(252 248 247 / .85); stroke-width: 1.6; stroke-dasharray: 5 4; }
.sig-niveau text { fill: var(--nappe-vive); text-anchor: start; }
.sig-niveau-ligne { fill: none; stroke: var(--nappe-vive); stroke-width: 1.6; stroke-dasharray: 4 3; }
.sig-niveau-symbole { fill: none; stroke: var(--nappe-vive); stroke-width: 1.5; }
.sig-niveau { animation: fondu .6s ease 1.7s both; }
.sig-bulle { animation: monter 3.4s ease-in infinite; }
.sig-b2 { animation-delay: .5s; } .sig-b3 { animation-delay: 1.1s; } .sig-b4 { animation-delay: 1.6s; }
.sig-b5 { animation-delay: 2s; } .sig-b6 { animation-delay: 2.5s; } .sig-b7 { animation-delay: 2.9s; } .sig-b8 { animation-delay: 1.3s; }
@keyframes fondu { from { opacity: 0; } }
@keyframes monter { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-150px); opacity: 0; } }

/* Sol : la carotte se « carotte » de haut en bas, couches et figurés, nappe, échantillons. */
.sig-c1 { fill: var(--strate-1); } .sig-c2 { fill: var(--strate-2); } .sig-c3 { fill: var(--strate-3); }
.sig-c4 { fill: var(--strate-4); } .sig-c5 { fill: var(--strate-5); }
.sig-sature { fill: var(--nappe-vive); opacity: .22; }
.sig-cadre { fill: none; stroke: rgb(252 248 247 / .6); stroke-width: 1.2; }
.sig-echantillon { fill: none; stroke: var(--u-accent); stroke-width: 4; }
/* Chaque couche se remplit à son tour, de haut en bas (masque qui descend, sans étirer les figurés) ;
   la nappe et les échantillons viennent ensuite. */
.sig-couche { clip-path: inset(0 0 100% 0); animation: remplir .55s cubic-bezier(.4, 0, .2, 1) both; }
.sig-couche--1 { animation-delay: .35s; }
.sig-couche--2 { animation-delay: .75s; }
.sig-couche--3 { animation-delay: 1.15s; }
.sig-couche--4 { animation-delay: 1.55s; }
.sig-couche--5 { animation-delay: 1.95s; }
@keyframes remplir { to { clip-path: inset(0 0 0 0); } }
.sig-sature { animation: fondu .6s ease 2.5s both; }
.sig--sol .sig-niveau { animation-delay: 2.5s; }
.sig-echantillon { animation: fondu .5s ease 2.7s both; }

/* Eau : le piézomètre, la nappe autour, l'eau qui ondule dans le tube. */
.sig-aquifere { fill: var(--nappe); opacity: .25; }
.sig--eau .sig-motif { stroke: rgb(111 211 224 / .35); }
.sig-eau-haut { stop-color: var(--nappe-vive); stop-opacity: .9; }
.sig-eau-bas { stop-color: var(--logo-bleu); stop-opacity: .9; }
.sig-vague { fill: var(--nappe-vive); animation: vaguer 3s linear infinite; }
@keyframes vaguer { to { transform: translateX(-22px); } }
.sig--eau .sig-bulle { fill: rgb(255 255 255 / .75); }

/* Gaz : le piézair, la pompe, les composés qui remontent du sol. */
.sig--gaz .sig-motif { stroke: rgb(255 207 90 / .45); }
.sig--gaz .sig-motif-plein, .sig--forage .sig-motif-plein { fill: color-mix(in srgb, var(--u-accent) 45%, transparent); }
.sig-tuyau { fill: none; stroke: rgb(252 248 247 / .6); stroke-width: 2; }
.sig-pompe { fill: rgb(255 255 255 / .06); stroke: rgb(252 248 247 / .7); stroke-width: 1.4; }
.sig-cadran { fill: none; stroke: var(--u-accent); stroke-width: 1.4; }
.sig-aiguille { stroke: var(--u-accent); stroke-width: 1.6; transform-origin: 121px 29px; animation: osciller 2.6s ease-in-out infinite alternate; }
@keyframes osciller { from { transform: rotate(-40deg); } to { transform: rotate(50deg); } }
.sig--gaz .sig-bulle { fill: var(--u-accent); }

/* Forage : le schéma de l'ouvrage se trace, puis le remplissage et les cotes apparaissent. */
.sig--forage .sig-motif { stroke: color-mix(in srgb, var(--u-accent) 50%, transparent); }
.sig-trace { fill: none; stroke: rgb(252 248 247 / .85); stroke-width: 1.4; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: tracer 2.2s cubic-bezier(.4, 0, .2, 1) .3s forwards; }
@keyframes tracer { to { stroke-dashoffset: 0; } }
.sig--forage .sig-sol { stroke: rgb(252 248 247 / .5); }
.sig-cote { stroke: var(--u-accent); }
.sig-fentes { fill: none; stroke: color-mix(in srgb, var(--u-accent) 70%, transparent); stroke-width: 1.4; }
.sig-remplissage { animation: fondu .8s ease 1.5s both; }
.sig--forage .sig-etiquette { animation: fondu .6s ease 2.1s both; }

@media (max-width: 1023.98px) { .sig { width: 104px; } .univers .heros-photo--page { left: 118px; } }
@media (max-width: 560px) {
    .sig { width: 76px; top: 2%; height: 96%; }
    .univers .heros-photo--page { left: 84px; }
    .univers--sol .heros-telephone { right: -2%; width: 30%; }
}

/* ── Les cartes de fonctionnalités, habillées par univers ─────────────── */
.univers .fonction-icone { background: var(--u-voile); color: var(--u-fonce); }
.univers .fonction::after { background: radial-gradient(260px circle at var(--x, 50%) var(--y, 30%), var(--u-voile), transparent 70%); }
.univers .fonction--large { background: linear-gradient(135deg, var(--u-voile), transparent 55%), var(--surface); }

/* Sol : chaque carte est un tronçon de carotte, coiffé de sa couche. */
.univers--sol .fonction { --strate: var(--strate-3); padding-top: 1.85rem; }
.univers--sol .fonction::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--strate); }
.univers--sol .fonction:nth-child(5n+1) { --strate: var(--strate-1); }
.univers--sol .fonction:nth-child(5n+2) { --strate: var(--strate-2); }
.univers--sol .fonction:nth-child(5n+3) { --strate: var(--strate-3); }
.univers--sol .fonction:nth-child(5n+4) { --strate: var(--strate-5); }
.univers--sol .fonction:nth-child(5n+5) { --strate: var(--strate-4); }

/* Eau : une ligne d'eau au pied de la carte, qui monte au survol. */
.univers--eau .fonction::before {
    content: ""; position: absolute; inset: auto 0 0; z-index: -1; height: 10px; pointer-events: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 10'%3E%3Cpath d='M0 5 q6 -4 12 0 t12 0 t12 0 t12 0' fill='none' stroke='%231b7f8c' stroke-opacity='.5' stroke-width='1.4'/%3E%3C/svg%3E") top left / 48px 10px repeat-x,
        linear-gradient(to top, color-mix(in srgb, var(--nappe-vive) 16%, transparent), transparent);
    transition: height .7s var(--ressort);
}
.univers--eau .fonction:hover::before { height: 100%; }

/* Gaz : des particules dans l'angle, qui montent au survol. */
.univers--gaz .fonction::before {
    content: ""; position: absolute; top: 0; right: 0; z-index: -1; width: 150px; height: 150px; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--logo-jaune) 60%, transparent) 1.2px, transparent 1.9px) 0 0 / 12px 12px;
    -webkit-mask-image: radial-gradient(circle at 100% 0, #000, transparent 70%); mask-image: radial-gradient(circle at 100% 0, #000, transparent 70%);
    transition: background-position 1.4s linear;
}
.univers--gaz .fonction:hover::before { background-position: 0 -36px; }

/* Forage : des feuilles de plan — papier quadrillé, repères d'angle, numéro de folio. */
.univers--forage .fonctions-grille { counter-reset: folio; }
.univers--forage .fonction, .univers--forage .fonction--large {
    --c: color-mix(in srgb, var(--u-fonce) 60%, transparent);
    --q: color-mix(in srgb, var(--u-fonce) 6%, transparent);
    counter-increment: folio; border-radius: 6px; border-color: color-mix(in srgb, var(--u-fonce) 25%, var(--ligne));
    background:
        linear-gradient(var(--c), var(--c)) 7px 7px / 12px 1.5px no-repeat,
        linear-gradient(var(--c), var(--c)) 7px 7px / 1.5px 12px no-repeat,
        linear-gradient(var(--c), var(--c)) calc(100% - 7px) calc(100% - 7px) / 12px 1.5px no-repeat,
        linear-gradient(var(--c), var(--c)) calc(100% - 7px) calc(100% - 7px) / 1.5px 12px no-repeat,
        linear-gradient(var(--q) 1px, transparent 1px) 0 0 / 100% 20px,
        linear-gradient(90deg, var(--q) 1px, transparent 1px) 0 0 / 20px 100%,
        var(--surface);
}
.univers--forage .fonction::before {
    content: "F-" counter(folio, decimal-leading-zero); position: absolute; top: 1.1rem; right: 1.2rem;
    color: var(--u-fonce); font: 500 .7rem/1 var(--police-mono); letter-spacing: .08em; opacity: .75;
}
.univers--forage .fonction-icone { border: 1px solid color-mix(in srgb, var(--u-fonce) 35%, transparent); border-radius: 4px; background: transparent; }

/* ── Calculs, livrable ─────────────────────────────── */
.univers .calculs { --couleur: var(--u-accent); }
.univers .calculette { border-color: color-mix(in srgb, var(--u-accent) 22%, transparent); background: color-mix(in srgb, var(--u-accent) 5%, rgb(0 0 0 / .18)); }
.univers .calculette figcaption { color: var(--u-accent); }
.univers--forage .calculette { border-radius: 6px; }

/* Sol : la fiche posée de biais, comme une feuille de terrain ; elle se redresse au survol. */
.univers--sol .livrable-image img { rotate: -.6deg; transition: rotate .5s var(--ressort); }
.univers--sol .livrable-image:hover img { rotate: 0deg; }
/* Forage : un plan, dans son cadre. */
.univers--forage .livrable-image { padding: 14px; border: 1px solid color-mix(in srgb, var(--u-fonce) 30%, var(--ligne)); border-radius: 4px; background: var(--surface); box-shadow: var(--ombre-2); }
.univers--forage .livrable-image img { border-radius: 0; box-shadow: none; }

/* ── Apparition au défilement (le script ajoute .js à <html>) ────────── */
.js [data-apparait] { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ressort), transform .7s var(--ressort); }
.js [data-apparait].visible { opacity: 1; transform: none; }
.js .coupe-strate[data-apparait] { transform: none; }
.js .coupe-strate[data-apparait] .coupe-bande { transform: scaleY(0); }
.js .coupe-strate[data-apparait].visible .coupe-bande { transform: none; }
.chiffres-grille li:nth-child(2) { transition-delay: .08s; }
.chiffres-grille li:nth-child(3) { transition-delay: .16s; }
.chiffres-grille li:nth-child(4) { transition-delay: .24s; }

/* ── Secours d'un lien « mailto: » sans messagerie (static/js/site.js, courrielDeSecours) ── */
.secours-courriel {
    position: fixed; left: 50%; bottom: clamp(16px, 4vw, 32px); z-index: 60; translate: -50% 0; display: grid; gap: .8rem;
    width: min(520px, calc(100vw - 32px)); padding: 1.1rem 3rem 1.1rem 1.2rem; border-radius: 18px;
    border: 1px solid rgb(252 248 247 / .18); background: var(--humus); color: var(--sur-humus-2);
    box-shadow: 0 24px 60px -18px rgb(0 0 0 / .6); animation: fondu .25s ease;
}
.secours-courriel p { margin: 0; line-height: 1.5; }
.secours-courriel strong { color: var(--sur-humus); user-select: all; }
.secours-courriel-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.secours-courriel-fermer {
    position: absolute; top: .5rem; right: .5rem; width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: none; color: var(--sur-humus-2); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.secours-courriel-fermer:hover { background: rgb(255 255 255 / .08); color: var(--sur-humus); }
@media (max-width: 899.98px) { .secours-courriel { bottom: 96px; } }

/* ── Simulateur (templates/simulation.html) ───────────────────────────── */
.simu-apercu {
    align-self: center; justify-self: center; display: grid; gap: .5rem; width: min(360px, 100%); padding: 1.8rem;
    border-radius: 24px; border: 1px solid rgb(252 248 247 / .14); background: rgb(255 255 255 / .05);
    box-shadow: 0 30px 60px -24px rgb(0 0 0 / .55); color: var(--sur-humus-2);
}
.simu-apercu .icone { color: var(--cuivre-clair); }
.simu-apercu p { margin: 0; }
.simu-apercu-total { color: var(--sur-humus); font: 700 2.6rem/1.05 var(--police-titre); letter-spacing: -.03em; }
.simu-apercu-total strong { color: var(--cuivre-clair); }
.simu-apercu-sous { font-size: .92rem; }

.simulateur {
    display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start;
    padding-block: clamp(2.5rem, 5vw, 4rem) var(--section);
}
.simu-saisie { display: grid; gap: 1.25rem; }
.simu-bloc { margin: 0; padding: 1.4rem clamp(1rem, 2.5vw, 1.6rem) 1.2rem; border: 1px solid var(--ligne); border-radius: 22px; background: var(--surface); box-shadow: var(--ombre-1); }
.simu-bloc legend { float: left; width: 100%; padding: 0; margin-bottom: .3rem; font: 700 1.25rem/1.25 var(--police-titre); letter-spacing: -.02em; }
.simu-bloc legend + * { clear: both; }
.simu-bloc-aide { margin: 0 0 .4rem; color: var(--texte-2); font-size: .92rem; }
.simu-activite, .simu-postes { list-style: none; margin: 0; padding: 0; }
.simu-champ { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); column-gap: 1rem; align-items: center; padding-block: .8rem; border-top: 1px solid var(--ligne); }
.simu-champ:first-child { border-top: 0; }
.simu-champ .simu-poste-titre, .simu-champ .simu-poste-aide { grid-column: 1; }
.simu-champ .simu-reglage { grid-column: 2; grid-row: 1 / span 2; }
.simu-note { margin: .4rem 0 0; color: var(--texte-3); font-size: .8rem; text-align: right; }

.simu-poste {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(200px, 260px) 74px; column-gap: .9rem; row-gap: .35rem;
    align-items: center; padding-block: .9rem; border-top: 1px solid var(--ligne);
}
.simu-poste:first-child { border-top: 0; }
.simu-poste-icone {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
    background: var(--accent-voile); color: var(--lien);
}
.simu-poste-texte { display: grid; gap: .1rem; min-width: 0; }
.simu-poste-titre { font-weight: 650; line-height: 1.3; }
.simu-poste-aide { color: var(--texte-3); font-size: .84rem; line-height: 1.4; }
.simu-poste-an { justify-self: end; color: var(--texte-2); font-size: .82rem; white-space: nowrap; }
.simu-poste-an span { color: var(--texte); font-weight: 600; }
.simu-poste-dimobi {
    grid-column: 2 / -1; display: flex; gap: .45rem; align-items: flex-start; margin: 0;
    color: var(--succes); font-size: .84rem; line-height: 1.4;
}
.simu-poste-dimobi .icone { flex: none; margin-top: .1rem; }
.simu-poste-dimobi strong { font-weight: 650; }

.simu-reglage { display: flex; align-items: center; gap: .7rem; }
.simu-curseur { flex: 1; min-width: 0; height: 28px; margin: 0; accent-color: var(--cuivre); cursor: pointer; }
html:not(.js) .simu-curseur { display: none; }
.simu-valeur {
    display: inline-flex; align-items: baseline; gap: .3rem; flex: none; padding: .3rem .55rem; border: 1px solid var(--ligne-forte);
    border-radius: 10px; background: var(--fond);
}
.simu-valeur:focus-within { border-color: var(--lien); box-shadow: 0 0 0 3px var(--accent-voile); }
.simu-valeur input {
    width: 4.6em; padding: 0; border: 0; background: none; color: var(--texte); font: 600 1rem/1.4 var(--police-mono);
    text-align: right; -moz-appearance: textfield; appearance: textfield;
}
.simu-valeur input:focus { outline: none; }
.simu-valeur input::-webkit-outer-spin-button, .simu-valeur input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.simu-unite { color: var(--texte-3); font-size: .8rem; white-space: nowrap; }
.simu-champ .simu-valeur input { width: 5.6em; }
.simu-actions-saisie { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.js .simu-calculer { display: none; }

/* Collé sous l'en-tête et tenu dans la hauteur de l'écran : sur un écran bas, il défile à l'intérieur plutôt
   que d'être coupé (`data-lenis-prevent` laisse la molette à ce défilement). */
.simu-resultat {
    position: sticky; top: calc(var(--entete-total) + .25rem); display: grid; gap: .95rem; padding: 1.35rem 1.5rem;
    max-height: calc(100dvh - var(--entete-total) - 1rem); overflow-y: auto; overscroll-behavior: contain;
    border-radius: 24px; box-shadow: var(--ombre-3); scrollbar-width: thin;
}
.simu-resultat .surtitre { margin: 0; }
.simu-chiffres { display: grid; gap: .7rem; }
.simu-chiffre { display: grid; gap: .2rem; margin: 0; color: var(--sur-humus-2); font-size: .86rem; line-height: 1.4; }
.simu-chiffre strong { color: var(--sur-humus); font: 700 clamp(1.9rem, 1.45rem + 1.1vw, 2.4rem)/1 var(--police-titre); letter-spacing: -.035em; }
.simu-chiffre--euros strong { color: var(--cuivre-clair); }
.simu--recalcul .simu-chiffre strong { animation: eclat .45s ease; }
@keyframes eclat { from { opacity: .45; } to { opacity: 1; } }
.simu-sous-titre { margin: 0 0 .55rem; color: var(--sur-humus-3); font: 500 .74rem/1.2 var(--police-mono); letter-spacing: .1em; text-transform: uppercase; }
.simu-barre { display: block; width: 100%; height: 14px; border-radius: 7px; overflow: hidden; background: rgb(255 255 255 / .08); }
.simu-part { transition: x .3s var(--ressort), width .3s var(--ressort); }
/* Les postes d'une feuille dans les tons de la terre, ceux d'un chantier dans ceux de la nappe. */
.simu-part--1 { fill: #e6b695; } .simu-part--2 { fill: #d39a72; } .simu-part--3 { fill: #b8704a; } .simu-part--4 { fill: #9a5a38; }
.simu-part--5 { fill: #c98a5e; } .simu-part--6 { fill: #edc9ad; } .simu-part--7 { fill: #a86846; }
.simu-part--8 { fill: #4cc3cf; } .simu-part--9 { fill: #2fa3b0; } .simu-part--10 { fill: #1b7f8c; } .simu-part--11 { fill: #7fd6de; }
.simu-principaux { display: grid; gap: .35rem; margin: .8rem 0 0; padding: 0; list-style: none; counter-reset: rang; }
.simu-principaux li { display: flex; justify-content: space-between; gap: 1rem; color: var(--sur-humus-2); font-size: .88rem; counter-increment: rang; }
.simu-principaux li span:first-child::before { content: counter(rang) ". "; color: var(--sur-humus-3); }
.simu-principaux .mono { color: var(--sur-humus); white-space: nowrap; }
.simu-conclusion { margin: 0; padding-top: .9rem; border-top: 1px solid rgb(255 255 255 / .1); color: var(--sur-humus-2); font-size: .9rem; line-height: 1.45; }
.simu-conclusion strong { color: var(--sur-humus); }
.simu-cta { display: grid; gap: .5rem; }
.simu-cta .bouton { justify-content: center; padding-block: .7rem; }
.simu-resume { display: none; }

@media (max-width: 1023.98px) {
    .simulateur { grid-template-columns: minmax(0, 1fr); }
    .simu-resultat { position: static; max-height: none; overflow: visible; }
    /* Sur tablette et téléphone : un résumé collé en bas de l'écran pendant les réglages, au-dessus de la barre
       de navigation ; il rejoint sa place, juste avant le résultat, en fin de saisie. */
    .simu-resume {
        position: sticky; bottom: 12px; z-index: 30; display: flex; align-items: center; gap: 1rem; justify-content: space-between;
        padding: .8rem 1.1rem; border-radius: 16px; background: rgb(48 31 30 / .94); color: var(--sur-humus-2);
        box-shadow: 0 16px 40px -14px rgb(0 0 0 / .6); font-size: .9rem; text-decoration: none;
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    }
    .simu-resume strong { color: var(--sur-humus); font: 700 1.15rem/1 var(--police-titre); }
    .simu-resume-voir { display: inline-flex; align-items: center; gap: .3rem; color: var(--cuivre-clair); font-size: .82rem; }
}
@media (max-width: 899.98px) { .simu-resume { bottom: 88px; } }
@media (max-width: 720px) {
    .simu-poste { grid-template-columns: 40px minmax(0, 1fr) auto; }
    .simu-poste .simu-reglage { grid-column: 1 / -1; grid-row: 2; }
    .simu-poste-an { grid-column: 3; grid-row: 1; align-self: start; }
    .simu-poste-dimobi { grid-column: 1 / -1; }
    .simu-champ { grid-template-columns: minmax(0, 1fr); }
    .simu-champ .simu-reglage { grid-column: 1; grid-row: auto; margin-top: .5rem; }
    .simu-resume-voir { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        animation-delay: 0s !important; transition-duration: .01ms !important;
    }
    .js [data-apparait], .js .coupe-strate[data-apparait] .coupe-bande { opacity: 1; transform: none; }
    .confiance-piste[aria-hidden="true"] { display: none; }
    .confiance-defile { mask-image: none; }
    .confiance-piste { flex-wrap: wrap; justify-content: center; }
    .flux-rayon { display: none; }
}