/* Site vitrine Skégio (tasks/plan_vitrine.md) : feuille écrite à la main, indépendante du Tailwind de
   l'application. Fil conducteur : le carnet à souche du logo (perforations, ligne de détachement), réservé aux
   objets « document ». Sélecteurs à une classe autant que possible, pour éviter les conflits de spécificité.
   Mouvement : la séquence du héros (pièce + notifications du Mac), le bandeau des métiers qui défile, la journée
   qui s'affiche au défilement et deux séquences pilotées par le défilement (le carnet qui devient le téléphone, la
   facture qui se retourne sur ses données Factur-X) ; tout est figé dans son état final avec prefers-reduced-motion. */

@font-face { font-family: "Sora"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/sora-latin-600-normal.4c3aca48be0c.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/sora-latin-700-normal.b2758c7ec7e6.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/sora-latin-800-normal.566a81b2caf2.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/source-sans-3-latin-400-normal.27ab01c4cb50.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/source-sans-3-latin-400-italic.410bdda67c60.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/source-sans-3-latin-600-normal.9a35cba76eda.woff2") format("woff2"); }

:root {
    --foret: #12382A;
    --foret-profond: #0E2E22;
    --emeraude: #059669;
    --emeraude-texte: #047857;   /* liens et boutons sur fond clair : contraste AA avec le blanc */
    --menthe: #A7F3D0;
    --perforation: #8FD3B5;
    --papier: #F3F8F5;
    --encre: #1F2E28;
    --gris: #56675F;
    --trait: #D6E4DC;
    --ambre: #B45309;
    --ambre-fond: #FEF3C7;
    --sur-foret: #CFE3D8;        /* texte secondaire sur fond forêt */

    --titre: "Sora", "Segoe UI", system-ui, sans-serif;
    --texte: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

    /* échelle 1,25 sur une base de 18 px */
    --t-petit: 0.889rem;
    --t-base: 1.125rem;
    --t-m: 1.406rem;
    --t-l: 1.758rem;

    --rayon-piece: 10px;
    --rayon-bouton: 8px;
    --rayon-ecran: 12px;
    --marge: clamp(16px, 4vw, 40px);
    --section: clamp(56px, 7vw, 96px);
    --whatsapp: #25D366;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
    margin: 0;
    background: #fff;
    color: var(--encre);
    font-family: var(--texte);
    font-size: var(--t-base);
    line-height: 1.6;
    font-feature-settings: "kern";
    text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; }
sup { font-size: 0.6em; line-height: 0; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.evitement {
    position: absolute; left: 16px; top: -60px; z-index: 50;
    background: #fff; color: var(--foret); padding: 10px 16px; border-radius: var(--rayon-bouton);
    font-weight: 600; text-decoration: none;
}
.evitement:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--emeraude); outline-offset: 3px; }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--marge); }

/* ───────────────────────────────── typographie */
.heros__titre, .page-tete__titre, .titre-section, .titre-bloc, .fonction__titre, .pas__titre, .piece__titre {
    font-family: var(--titre);
    color: var(--foret);
    text-wrap: balance;
}
.titre-section {
    font-size: clamp(1.9rem, 3.4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    max-width: 22ch;
}
.titre-bloc { font-size: var(--t-m); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.chapo { margin-top: 20px; font-size: 1.25rem; line-height: 1.55; color: var(--gris); max-width: 60ch; }
.titre-section + .chapo { margin-top: 20px; }
.lien { color: var(--emeraude-texte); font-weight: 600; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lien:hover { text-decoration-thickness: 2px; }

.liste { list-style: none; display: grid; gap: 12px; }
.liste li { position: relative; padding-left: 28px; max-width: 62ch; }
.liste li::before {
    content: ""; position: absolute; left: 2px; top: 0.62em;
    width: 14px; height: 2px; border-radius: 2px; background: var(--emeraude);
}
.liste--clair li { color: #fff; }
.liste--clair li::before { background: var(--menthe); }

/* ───────────────────────────────── boutons */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 12px 22px;
    border-radius: var(--rayon-bouton); border: 2px solid transparent;
    font-family: var(--texte); font-size: 1.0625rem; font-weight: 600; line-height: 1.2;
    text-decoration: none; cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primaire { background: var(--emeraude-texte); color: #fff; }
.btn--primaire:hover { background: var(--foret); }
.btn--clair { background: #fff; color: var(--foret); }
.btn--clair:hover { background: var(--menthe); }
.btn--contour-clair { border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn--contour-clair:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ───────────────────────────────── en-tête */
.entete { position: sticky; top: 0; z-index: 30; background: var(--foret); color: #fff; }
.entete__barre { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.entete__logo { display: block; flex-shrink: 0; }
.logo { display: block; width: 132px; height: auto; }
.entete__nav { display: flex; align-items: center; gap: 24px; flex: 1; }
.entete__liens { list-style: none; display: flex; gap: 4px; margin-inline: auto; }
.entete__liens a, .entete__connexion {
    display: block; padding: 10px 12px; border-radius: var(--rayon-bouton);
    color: var(--sur-foret); text-decoration: none; font-weight: 600; font-size: 1rem;
}
.entete__liens a:hover, .entete__connexion:hover, .entete__liens a[aria-current="page"], .entete__liens a.est-actif { color: #fff; background: rgba(255, 255, 255, .08); }
.entete__liens a { transition: color .2s ease, background-color .2s ease; }
.entete__actions { display: flex; align-items: center; gap: 8px; }
.entete__actions .btn { min-height: 42px; padding: 8px 16px; font-size: 1rem; }
.entete__menu {
    margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center;
    background: none; border: 0; border-radius: var(--rayon-bouton); color: #fff; cursor: pointer;
}
.entete__menu svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.entete__menu[hidden] { display: none; }
@media (min-width: 901px) { .entete__menu { display: none; } }

@media (max-width: 900px) {
    .entete__barre { flex-wrap: wrap; }
    .js .entete__nav { display: none; }
    .js .entete__nav.est-ouvert { display: flex; }
    .entete__nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 8px; padding-bottom: 16px; }
    .entete__liens { flex-direction: column; margin: 0; }
    .entete__actions { flex-direction: column; align-items: stretch; }
    .entete__actions .btn { min-height: 48px; }
}

/* ───────────────────────────────── sections */
.section { padding-block: var(--section); }
.section--papier { background: var(--papier); }
.section--foret { background: var(--foret); color: #fff; }
.section--foret .titre-section { color: #fff; }
.section--foret .chapo { color: var(--sur-foret); }

/* ───────────────────────────────── héros */
.heros {
    position: relative; overflow: hidden;
    background: var(--foret); color: #fff;
    padding-block: clamp(40px, 6vw, 72px) clamp(56px, 7vw, 88px);
}
.heros__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 56px); align-items: center; }
.heros__titre {
    color: #fff;
    font-size: clamp(2.25rem, 3.9vw, 3.25rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.03em;
    max-width: 15ch;
}
.heros__chapo { margin-top: 24px; font-size: 1.25rem; line-height: 1.55; color: var(--sur-foret); max-width: 52ch; }
.heros__note { margin-top: 16px; font-size: 1rem; color: var(--sur-foret); }

/* la scène : le Mac avec le tableau de bord, la pièce et le téléphone posés devant */
.scene {
    --e1: .6s; --e2: 1.6s; --e3: 2.6s; --e4: 3.6s;   /* étapes communes à la pièce et aux notifications */
    position: relative; padding: 0 0 clamp(120px, 12vw, 170px) 0;
    margin-right: calc(clamp(0px, (100vw - 1200px) / 2 - 24px, 56px) * -1);   /* le Mac s'avance vers le bord sur grand écran */
}
.scene::before {   /* halo menthe derrière le Mac : profondeur, sans dégradé décoratif sur la page */
    content: ""; position: absolute; inset: -12% -10% 20% -6%; z-index: 0; pointer-events: none;
    background: radial-gradient(closest-side, rgba(167, 243, 208, .20), rgba(167, 243, 208, 0));
}
.mac { position: relative; z-index: 1; }
.mac__ecran {
    position: relative; padding: 2.1% 2.1% 2.6%;
    background: #0B0F0D; border-radius: 16px 16px 6px 6px;
    box-shadow: inset 0 0 0 1px #3A403D, 0 40px 60px -30px rgba(0, 0, 0, .55);
}
.mac__ecran::before {   /* encoche de la caméra */
    content: ""; position: absolute; left: 50%; top: 2.1%; z-index: 3;
    width: 11%; height: 3.4%; transform: translateX(-50%);
    border-radius: 0 0 8px 8px;
    background: radial-gradient(circle, #24302B 0 2px, #0B0F0D 3px);
}
.mac__vitre { position: relative; overflow: hidden; border-radius: 3px; aspect-ratio: 16 / 10; background: #fff; }
.mac__vitre img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.mac__socle {
    position: relative; height: clamp(10px, 1.4vw, 18px); margin-inline: -6.5%;
    background: linear-gradient(#E9EDEB, #C4CAC7 55%, #8E9692);
    border-radius: 2px 2px 14px 14px / 2px 2px 100% 100%;
    box-shadow: 0 18px 24px -12px rgba(0, 0, 0, .5);
}
.mac__socle::before {   /* creux pour ouvrir l'écran */
    content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: 48%;
    transform: translateX(-50%); border-radius: 0 0 10px 10px;
    background: linear-gradient(#AEB5B1, #D3D8D5);
}
.scene__piece { position: absolute; z-index: 2; left: -7%; bottom: 0; width: min(360px, 52%); }
.scene__telephone {
    position: absolute; z-index: 2; right: 2%; bottom: clamp(24px, 4vw, 56px); width: 21%; min-width: 112px;
    padding: 6px; border-radius: 24px; background: #0B0F0D;
    box-shadow: inset 0 0 0 1px #3A403D, 0 28px 40px -14px rgba(0, 0, 0, .6);
}
.scene__telephone img { border-radius: 18px; width: 100%; }

/* notifications sur l'écran du Mac, comme celles du système */
.notifs { list-style: none; position: absolute; z-index: 2; top: 5%; right: 3%; width: min(300px, 50%); display: grid; }
.notif {
    grid-area: 1 / 1;
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border-radius: 12px; background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 24px -8px rgba(6, 30, 21, .35), 0 0 0 1px rgba(6, 30, 21, .06);
    font-size: clamp(.6875rem, .9vw, .8125rem); line-height: 1.3; color: var(--gris);
}
.notif strong { display: block; color: var(--foret); font-weight: 600; }
.notif__icone {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; background: var(--emeraude);
    /* coche dessinée en CSS */
    background-image: linear-gradient(45deg, transparent 46%, #fff 46% 60%, transparent 60%),
                      linear-gradient(-45deg, transparent 44%, #fff 44% 56%, transparent 56%);
    background-size: 7px 8px, 12px 14px; background-position: 6px 11px, 10px 6px; background-repeat: no-repeat;
}
.notif--1, .notif--2, .notif--3 { opacity: 0; visibility: hidden; }   /* état final : le paiement */

@media (max-width: 900px) {
    .heros__grille { grid-template-columns: minmax(0, 1fr); }
    .scene { margin-right: 0; margin-top: 8px; }
    .scene__piece { left: -2%; width: min(340px, 64%); }
}
@media (max-width: 600px) {
    .scene { padding-bottom: 250px; }
    .scene__telephone { display: none; }
    .scene__piece { left: 6%; width: 88%; }
    .notifs { width: 62%; }
    .notif { padding: 6px 8px; gap: 6px; }
    .notif__icone { width: 18px; height: 18px; border-radius: 5px; background-size: 5px 6px, 9px 10px; background-position: 4px 7px, 7px 4px; }
}

/* ───────────────────────────────── la pièce (devis, facture, tarif) */
.piece-ombre { filter: drop-shadow(0 28px 36px rgba(6, 30, 21, .28)) drop-shadow(0 2px 4px rgba(6, 30, 21, .12)); }
.piece {
    position: relative;
    background: #fff;
    color: var(--encre);
    border-radius: var(--rayon-piece);
    padding: 30px clamp(20px, 3vw, 28px) 24px;
    /* bord perforé du carnet (comme le logo) : vrais trous, le fond de la section passe au travers */
    -webkit-mask: radial-gradient(circle at 50% 9px, transparent 3.6px, #000 4.2px) 0 0 / 15px 18px repeat-x,
                  linear-gradient(#000 0 0) 0 18px / 100% calc(100% - 18px) no-repeat;
            mask: radial-gradient(circle at 50% 9px, transparent 3.6px, #000 4.2px) 0 0 / 15px 18px repeat-x,
                  linear-gradient(#000 0 0) 0 18px / 100% calc(100% - 18px) no-repeat;
}
.piece__souche {
    display: flex; justify-content: space-between; gap: 12px;
    padding-bottom: 12px; margin-bottom: 18px;
    border-bottom: 2px dashed var(--perforation);
    font-size: var(--t-petit); color: var(--gris);
}
.piece__emetteur { font-weight: 600; color: var(--foret); }
.piece__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.piece__titres, .statuts { display: grid; }
.piece__titres > *, .statuts > * { grid-area: 1 / 1; }
.piece__titre { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.piece__client { margin-top: 4px; font-size: 1rem; color: var(--gris); }
.statut {
    justify-self: end; white-space: nowrap;
    padding: 4px 12px; border-radius: 999px;
    background: #ECFDF5; color: var(--emeraude-texte);
    font-size: var(--t-petit); font-weight: 600;
}
.statut--attente { background: var(--ambre-fond); color: var(--ambre); }
.piece__lignes { margin-top: 20px; font-variant-numeric: tabular-nums; }
.piece__lignes > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding-block: 10px; border-top: 1px solid var(--trait); font-size: 1rem;
}
.piece__lignes dd { white-space: nowrap; font-weight: 600; }
.piece__precision { display: block; font-size: var(--t-petit); color: var(--gris); }
.piece__total { font-family: var(--titre); color: var(--foret); }
.piece__lignes > .piece__total { border-top: 2px solid var(--foret); font-size: 1.0625rem; font-weight: 700; }
.piece__note { margin-top: 14px; font-size: 1rem; color: var(--gris); }

.etapes {
    list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
    margin-top: 22px; padding-top: 18px; border-top: 2px dashed var(--perforation);
}
.etape { display: grid; justify-items: start; gap: 2px; font-size: var(--t-petit); line-height: 1.3; }
.etape__point {
    display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 6px;
    border-radius: 50%; background: var(--emeraude); color: #fff;
    font-family: var(--titre); font-weight: 700; font-size: .8125rem;
}
.etape__nom { font-weight: 600; color: var(--foret); }
.etape__date { color: var(--gris); }

.scene .piece { padding: 26px 20px 18px; }
.scene .piece__lignes > div, .scene .piece__client { font-size: .875rem; }
.scene .piece__souche, .scene .etape { font-size: .8125rem; }
.scene .piece__lignes > div { padding-block: 7px; }
.scene .piece__titre { font-size: 1.125rem; }
.scene .piece__tete { display: block; }
.scene .statuts { position: absolute; right: 20px; top: 62px; }   /* le titre garde toute la largeur */
.scene .etapes { margin-top: 14px; padding-top: 12px; }
.scene .etape__point { width: 24px; height: 24px; margin-bottom: 4px; }
.scene .tampon { top: 60px; font-size: 1.25rem; }
@media (max-width: 600px) {
    .scene .tampon { top: 108px; right: 12px; font-size: 1.125rem; }   /* à droite du client, sans masquer le titre */
}
.scene .piece__lignes > div:not(.piece__total) { display: none; }   /* dans la scène, le total suffit */
.scene .piece__lignes { margin-top: 12px; }

/* état final par défaut : facture payée */
.piece__titre--devis, .statut { opacity: 0; }
.tampon {
    position: absolute; right: clamp(16px, 3vw, 24px); top: 68px;
    padding: 4px 14px; border: 3px double var(--emeraude); border-radius: 6px;
    color: var(--emeraude); font-family: var(--titre); font-weight: 800; font-size: 1.5rem; letter-spacing: .02em;
    transform: rotate(-9deg); opacity: .85; pointer-events: none;
}

/* Le moment animé du héros : le devis passe ses quatre étapes, une fois, au chargement. */
@media (prefers-reduced-motion: no-preference) {
    .piece--anime .etape__point { animation: point-actif .35s ease both; }
    .piece--anime .etape--1 .etape__point { animation-delay: var(--e1); }
    .piece--anime .etape--2 .etape__point { animation-delay: var(--e2); }
    .piece--anime .etape--3 .etape__point { animation-delay: var(--e3); }
    .piece--anime .etape--4 .etape__point { animation-delay: var(--e4); }
    .piece--anime .statut--1 { animation: apparait .25s ease var(--e1) both, disparait .2s ease var(--e2) forwards; }
    .piece--anime .statut--2 { animation: apparait .25s ease var(--e2) both, disparait .2s ease var(--e3) forwards; }
    .piece--anime .statut--3 { animation: apparait .25s ease var(--e3) both, disparait .2s ease var(--e4) forwards; }
    .piece--anime .piece__titre--devis { animation: reste .01s linear both, disparait .3s ease var(--e3) forwards; }
    .piece--anime .piece__titre--facture { animation: apparait .3s ease var(--e3) both; }
    .piece--anime .tampon { animation: tamponne .32s cubic-bezier(.2, .9, .3, 1.3) calc(var(--e4) + .1s) both; }
    .notif--1 { animation: notif-entre .4s ease var(--e1) both, notif-sort .25s ease var(--e2) forwards; }
    .notif--2 { animation: notif-entre .4s ease var(--e2) both, notif-sort .25s ease var(--e3) forwards; }
    .notif--3 { animation: notif-entre .4s ease var(--e3) both, notif-sort .25s ease var(--e4) forwards; }
    .notif--4 { animation: notif-entre .4s ease var(--e4) both; }
}
@keyframes notif-entre {
    from { opacity: 0; visibility: visible; transform: translateX(24px); }
    to { opacity: 1; visibility: visible; transform: none; }
}
@keyframes notif-sort {
    from { opacity: 1; visibility: visible; }
    to { opacity: 0; visibility: hidden; transform: translateY(-8px); }
}
@keyframes point-actif {
    from { background: #fff; color: var(--gris); box-shadow: inset 0 0 0 2px var(--trait); }
    to { background: var(--emeraude); color: #fff; box-shadow: inset 0 0 0 2px var(--emeraude); }
}
@keyframes apparait { from { opacity: 0; } to { opacity: 1; } }
@keyframes disparait { from { opacity: 1; } to { opacity: 0; } }
@keyframes reste { from, to { opacity: 1; } }
@keyframes tamponne {
    from { opacity: 0; transform: rotate(-9deg) scale(1.6); }
    to { opacity: .85; transform: rotate(-9deg) scale(1); }
}

/* ───────────────────────────────── métiers (bandeau qui défile, figé avec prefers-reduced-motion) */
.metiers { background: var(--foret-profond); color: var(--sur-foret); padding-block: 22px; overflow: hidden; }
.metiers__titre { font-size: var(--t-petit); margin-bottom: 12px; }
.metiers__fenetre {
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.metiers__piste { display: flex; width: max-content; }
.metiers__liste { list-style: none; display: flex; flex-shrink: 0; }
.metiers__liste li {
    display: flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap;
    font-family: var(--titre); font-weight: 600; font-size: clamp(1.0625rem, 1.6vw, 1.375rem); color: #fff;
}
.metiers__liste li::after {   /* perforation du carnet entre deux métiers */
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--perforation); opacity: .7;
}
@media (prefers-reduced-motion: no-preference) {
    .metiers__piste { animation: defile 60s linear infinite; }
    .metiers__fenetre:hover .metiers__piste { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
    .metiers__fenetre { -webkit-mask: none; mask: none; }
    .metiers__piste { width: auto; }
    .metiers__liste { flex-wrap: wrap; row-gap: 8px; padding-inline: var(--marge); max-width: 1200px; margin-inline: auto; }
    .metiers__liste[aria-hidden="true"] { display: none; }
}
@keyframes defile { to { transform: translateX(-50%); } }

/* ───────────────────────────────── le carnet à souche, sans le papier (séquence pilotée par le défilement)
   site.js pose sur .carnet__scene, de 0 à 1 selon l'avancement dans la section : --a (le volet se détache), --b et
   --bf (il se retourne ; --bf adouci), --t (le téléphone finit de biais), --c (la signature se trace), --d1..--d3 (les
   bulles), ainsi que data-etape sur la section et --echelle (carnet papier borné à la place libre autour de la scène). Les valeurs
   par défaut ci-dessous sont l'état final : sans script ou avec le mouvement réduit, la section est statique et
   montre le bon signé. Les tailles suivent la hauteur du téléphone (--tel-h). */
.carnet {
    --a: 1; --b: 1; --bf: 1; --t: 1; --c: 1; --d1: 1; --d2: 1; --d3: 1;
    --carbone: #2B4C9B;   /* encre des doubles carbone : seulement sur le papier du carnet */
    background: var(--papier);
}
.carnet__colle { padding-block: var(--section); overflow: hidden; }
.carnet__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 56px); align-items: center; }
.carnet__etapes { list-style: none; counter-reset: etape; display: grid; gap: 22px; margin-top: 36px; }
.carnet__etape { counter-increment: etape; position: relative; padding-left: 48px; }
.carnet__etape::before {   /* vraie séquence : numérotée */
    content: counter(etape); position: absolute; left: 0; top: 0;
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    background: var(--emeraude); color: #fff; font-family: var(--titre); font-weight: 700; font-size: .9375rem;
}
.carnet__etape-titre { font-family: var(--titre); font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--foret); }
.carnet__etape p { margin-top: 4px; color: var(--gris); max-width: 46ch; }

.carnet__scene {
    --tel-h: clamp(380px, calc(100vh - 220px), 560px);
    --echelle: .9;   /* taille du carnet papier avant le retournement */
    --fin-x: 0px;    /* décalage final du téléphone (sur téléphone : à gauche, les bulles à droite) */
    position: relative; height: calc(var(--tel-h) + 40px);
    perspective: 1500px;
}
.carnet__plateau {   /* le carnet posé sur la table, qui se redresse pendant le retournement */
    position: absolute; inset: 0; transform-style: preserve-3d;
    transform: rotateX(calc((1 - var(--b)) * 26deg)) rotateZ(calc((1 - var(--b)) * -7deg))
               scale(calc(var(--echelle) + (1 - var(--echelle)) * var(--b)));
}
/* papier : souche (gauche), page suivante (dessous) et recto du volet ; les perforations sont peintes à la couleur
   du fond, ce qui garde les ombres (un masque les couperait) */
.carnet__souche, .carnet__dessous, .carnet__recto {
    position: absolute; left: 50%; top: 50%;
    height: calc(var(--tel-h) * .62);
    background-color: #fff; color: var(--encre);
    font-size: calc(var(--tel-h) * .029); line-height: 1.35;
}
.carnet__souche {
    width: calc(var(--tel-h) * .3);
    padding: calc(var(--tel-h) * .05) calc(var(--tel-h) * .03);
    border-radius: 6px 0 0 6px;
    background-image: radial-gradient(circle at 100% 50%, var(--papier) 3.5px, transparent 4px);
    background-size: 10px 15px; background-position: right top; background-repeat: repeat-y;
    box-shadow: -3px 3px 0 #E4ECE7, -6px 6px 0 #D5E2DA, 0 30px 40px -24px rgba(6, 30, 21, .35);
    transform: translate(-50%, -50%) translateX(calc(var(--tel-h) * (-.45 - .1 * var(--a)))) rotate(calc(var(--a) * -4deg));
    opacity: calc((1 - .4 * var(--a)) * clamp(0, 1 - var(--b) * 3, 1));   /* partie avant que le plateau grandisse (texte, bord de l'écran) */
}
.carnet__dessous, .carnet__recto {
    width: calc(var(--tel-h) * .9);
    border-radius: 0 6px 6px 0;
}
.carnet__dessous {   /* la page suivante du carnet, vierge */
    background-image: radial-gradient(circle at 0 50%, var(--papier) 3.5px, transparent 4px),
                      repeating-linear-gradient(transparent 0 calc(var(--tel-h) * .06), #E3EAF5 0 calc(var(--tel-h) * .06 + 1px));
    background-size: 10px 15px, 100% 100%; background-repeat: repeat-y, no-repeat;
    box-shadow: 3px 3px 0 #E4ECE7, 6px 6px 0 #D5E2DA, 0 30px 40px -24px rgba(6, 30, 21, .35);
    transform: translate(-50%, -50%) translateX(calc(var(--tel-h) * .15)) translateZ(-1px);
    opacity: clamp(0, 1 - var(--b) * 1.8, 1);
}
.carnet__volet {   /* conteneur 3D sans taille : les deux faces, de tailles différentes, sont centrées dessus */
    position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d;
    transform: translateX(calc(var(--fin-x) * var(--t)))
               translate3d(calc(var(--tel-h) * (.15 + .14 * var(--a)) * (1 - var(--b))),
                           calc(var(--tel-h) * -.06 * var(--a) * (1 - var(--b))),
                           calc(70px * var(--a) * (1 - var(--b))))
               rotateZ(calc(6deg * var(--a) * (1 - var(--b))))
               rotateX(calc(var(--t) * 10deg))
               rotateY(calc(var(--bf) * -180deg + var(--t) * 20deg));   /* fini de biais : la tranche se voit */
}
.carnet__recto {
    padding: calc(var(--tel-h) * .045) calc(var(--tel-h) * .05) calc(var(--tel-h) * .04) calc(var(--tel-h) * .06);
    background-image: radial-gradient(circle at 0 50%, var(--papier) 3.5px, transparent 4px);
    background-size: 10px 15px; background-repeat: repeat-y;
    box-shadow: 0 1px 0 rgba(6, 30, 21, .06), 0 40px 50px -24px rgba(6, 30, 21, .4);
    transform: translate(-50%, -50%);
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    opacity: clamp(0, (.5 - var(--bf)) * 1000, 1);   /* bascule à mi-course : WebKit ignore parfois backface-visibility */
}
.carnet__imprime, .carnet__entete { font-weight: 600; color: var(--foret); }
.carnet__entete { display: flex; justify-content: space-between; gap: 1em; font-size: .85em; color: var(--gris); }
.carnet__entete span:first-child { color: var(--foret); }
.carnet__titre-bon { margin-top: .5em; font-family: var(--titre); font-size: 1.5em; font-weight: 700; color: var(--foret); letter-spacing: -0.01em; }
.carnet__ecrit, .carnet__champs dd { font-style: italic; color: var(--carbone); }
.carnet__ecrit { margin-top: .7em; font-size: 1.05em; }
.carnet__champs { margin-top: .7em; display: grid; gap: .25em; }
.carnet__champs > div { display: flex; align-items: baseline; gap: .6em; padding-block: .3em; border-bottom: 1px dotted #B9CCC2; }
.carnet__champs dt { flex: none; font-size: .85em; color: var(--gris); }
.carnet__champs dd { flex: 1; font-size: 1.15em; }
.carnet__champ-signature { min-height: 2.6em; }

/* verso du volet : un téléphone en volume (boîtier extrudé, îlot, barre d'état, barre d'accueil, reflet) sur la
   vraie page de signature. La capture (390 x 844) occupe .vue, entre la barre d'état et la barre d'accueil : le
   cadre de signature y est placé en % (relevé par scripts/vitrine_shots.py). */
.telephone {
    --epaisseur: calc(var(--tel-h) * .024);
    position: absolute; left: 0; top: 0;
    width: calc(var(--tel-h) * .439); height: var(--tel-h);   /* .vue garde le ratio de la capture (390 x 844) */
    padding: calc(var(--tel-h) * .013); border-radius: calc(var(--tel-h) * .072);
    background: #0B0F0D;
    box-shadow: 0 0 0 calc(var(--tel-h) * .004) #59615D, 0 0 0 calc(var(--tel-h) * .006) #1E2321,
                0 50px 70px -34px rgba(6, 30, 21, .6);
    transform: translate(-50%, -50%) rotateY(180deg);
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    opacity: clamp(0, (var(--bf) - .5) * 1000, 1);
}
/* épaisseur du boîtier : huit couches de la silhouette empilées vers l'arrière ; tout le tour (haut, bas et coins
   arrondis compris) prend du volume, quel que soit l'angle */
.telephone__boitier { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.telephone__boitier i {
    position: absolute; inset: calc(var(--tel-h) * -.006); border-radius: calc(var(--tel-h) * .077);
    background: #3B4240;
}
.telephone__boitier i:nth-child(1) { transform: translateZ(calc(var(--epaisseur) * -.125)); background: #7C8682; }
.telephone__boitier i:nth-child(2) { transform: translateZ(calc(var(--epaisseur) * -.25)); background: #66706C; }
.telephone__boitier i:nth-child(3) { transform: translateZ(calc(var(--epaisseur) * -.375)); background: #545D59; }
.telephone__boitier i:nth-child(4) { transform: translateZ(calc(var(--epaisseur) * -.5)); background: #474F4C; }
.telephone__boitier i:nth-child(5) { transform: translateZ(calc(var(--epaisseur) * -.625)); }
.telephone__boitier i:nth-child(6) { transform: translateZ(calc(var(--epaisseur) * -.75)); }
.telephone__boitier i:nth-child(7) { transform: translateZ(calc(var(--epaisseur) * -.875)); background: #343A38; }
.telephone__boitier i:nth-child(8) { transform: translateZ(calc(var(--epaisseur) * -1)); background: #2A2F2D; }
.telephone__boitier i:nth-child(4)::before {   /* boutons de volume, sur la tranche gauche */
    content: ""; position: absolute; left: calc(var(--tel-h) * -.004); top: 19%; width: calc(var(--tel-h) * .006); height: 7%;
    border-radius: 2px; background: #2A2F2D; box-shadow: 0 calc(var(--tel-h) * .085) 0 #2A2F2D;
}
.telephone__ecran {
    position: relative; height: 100%; overflow: hidden; display: flex; flex-direction: column;
    border-radius: calc(var(--tel-h) * .06); background: #fff;
}
.telephone__statut {
    position: relative; flex: none; height: calc(var(--tel-h) * .05);
    display: flex; align-items: center; justify-content: space-between; padding-inline: calc(var(--tel-h) * .045) calc(var(--tel-h) * .04);
    font-family: var(--texte); font-size: calc(var(--tel-h) * .021); font-weight: 600; color: #111;
}
.telephone__ilot {
    position: absolute; left: 50%; top: calc(var(--tel-h) * .012); transform: translateX(-50%);
    width: 31%; height: calc(var(--tel-h) * .03); border-radius: 999px; background: #000;
}
.telephone__batterie {   /* comme sur iOS : contour gris, charge arrondie séparée du contour, borne à droite */
    position: relative; width: calc(var(--tel-h) * .044); height: calc(var(--tel-h) * .02);
    margin-right: calc(var(--tel-h) * .004); padding: 1.5px;
    border: 1px solid rgba(17, 17, 17, .38); border-radius: calc(var(--tel-h) * .006);
}
.telephone__batterie::before { content: ""; display: block; width: 80%; height: 100%; border-radius: 2px; background: #111; }
.telephone__batterie::after {
    content: ""; position: absolute; left: 100%; top: 50%; transform: translate(1px, -50%);
    width: calc(var(--tel-h) * .003); height: 38%; border-radius: 0 2px 2px 0; background: rgba(17, 17, 17, .38);
}
.telephone__vue { position: relative; flex: 1; min-height: 0; }
.telephone__vue img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.telephone__accueil { flex: none; height: calc(var(--tel-h) * .03); display: grid; place-items: center; }
.telephone__accueil::before { content: ""; width: 36%; height: calc(var(--tel-h) * .006); border-radius: 999px; background: #111; }
.telephone__reflet {   /* reflet de la vitre, fixe : la lumière vient d'en haut à gauche */
    position: absolute; inset: calc(var(--tel-h) * .013); border-radius: calc(var(--tel-h) * .06); pointer-events: none;
    background: linear-gradient(118deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .06));
}
.telephone__signature {
    position: absolute; left: 11.3%; top: 47.7%; width: 77.4%; height: 30.3%;
    fill: none; stroke: var(--carbone); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
    opacity: min(1, calc(var(--c) * 20));
}
.telephone__signature path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--c)); }

.carnet__bulles { list-style: none; position: absolute; inset: 0; pointer-events: none; }
.bulle {   /* largeur bornée à la place entre le téléphone et le bord de l'écran (fenêtre étroite) */
    position: absolute; width: max-content; padding: 10px 14px; font-size: .9375rem;
    max-width: min(260px, calc(50% - var(--tel-h) * .14 + var(--marge) - 8px));
}
.bulle--1 { left: calc(50% + var(--tel-h) * .14); top: calc(50% - var(--tel-h) * .34); opacity: var(--d1); transform: translateX(calc((1 - var(--d1)) * 24px)); }
.bulle--2 { right: calc(50% + var(--tel-h) * .14); top: calc(50% - var(--tel-h) * .04); opacity: var(--d2); transform: translateX(calc((var(--d2) - 1) * 24px)); }
.bulle--3 { left: calc(50% + var(--tel-h) * .14); top: calc(50% + var(--tel-h) * .26); opacity: var(--d3); transform: translateX(calc((1 - var(--d3)) * 24px)); }

/* séquence active (site.js, seulement sans mouvement réduit) : la scène reste collée sous l'en-tête pendant 200vh (140vh sous 900 px) */
.carnet.defile-actif { height: 300vh; height: 300svh; }
.defile-actif .carnet__colle {   /* site.js retire .defile-actif si le contenu ne tient pas (petit écran, zoom) */
    position: sticky; top: 72px; display: flex; align-items: safe center; padding-block: 0;
    height: calc(100vh - 72px); height: calc(100svh - 72px);
}
.defile-actif .carnet__scene { --tel-h: clamp(340px, calc(100vh - 192px), 560px); }
@supports (height: 100svh) {   /* une variable en svh non comprise invaliderait toutes les tailles */
    .defile-actif .carnet__scene { --tel-h: clamp(340px, calc(100svh - 192px), 560px); }
}
.defile-actif .carnet__plateau, .defile-actif .carnet__volet { will-change: transform; }
.carnet.defile-actif .carnet__etape { opacity: .38; transition: opacity .18s ease; }
.carnet.defile-actif[data-etape="1"] .carnet__etape:nth-child(1),
.carnet.defile-actif[data-etape="2"] .carnet__etape:nth-child(2),
.carnet.defile-actif[data-etape="3"] .carnet__etape:nth-child(3) { opacity: 1; transition-delay: .18s; }   /* l'ancienne s'efface d'abord */

@media (max-width: 900px) {
    .carnet.defile-actif { height: 240vh; height: 240svh; }   /* moins de défilement pour la même séquence */
    .carnet__grille { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .carnet__scene { --tel-h: 420px; --echelle: .72; }   /* site.js la réduit si le carnet déborde de la scène */
    .defile-actif .carnet__scene { --tel-h: clamp(300px, calc(100vh - 344px), 440px); }
    @supports (height: 100svh) { .defile-actif .carnet__scene { --tel-h: clamp(300px, calc(100svh - 344px), 440px); } }
    /* une seule étape à la fois, dans la même case : la scène ne bouge pas quand l'étape change */
    .carnet.defile-actif .carnet__etapes { grid-template-areas: "etape"; margin-top: 16px; }
    .carnet.defile-actif .carnet__etape { grid-area: etape; opacity: 0; }
    .carnet.defile-actif .carnet__texte .titre-section { font-size: 1.75rem; }
    /* ombres floues redessinées à chaque image (fondus, 3D) : trop coûteuses pour un téléphone, nettes pendant la séquence */
    .defile-actif .carnet__souche { box-shadow: -3px 3px 0 #E4ECE7, -6px 6px 0 #D5E2DA; }
    .defile-actif .carnet__dessous { box-shadow: 3px 3px 0 #E4ECE7, 6px 6px 0 #D5E2DA; }
    .defile-actif .carnet__recto { box-shadow: 0 1px 0 rgba(6, 30, 21, .06), 0 6px 0 -2px rgba(6, 30, 21, .08); }
    .defile-actif .telephone { box-shadow: 0 0 0 calc(var(--tel-h) * .004) #59615D, 0 0 0 calc(var(--tel-h) * .006) #1E2321; }
}
/* téléphone : pas la place de faire flotter les bulles autour de l'écran sans le masquer. Séquence active : le
   téléphone finit à gauche et les bulles arrivent en colonne à sa droite (--tel-h bornée pour leur laisser 190 px dès
   360 px de large ; en dessous, téléphone de 280 px au moins).
   Statique : téléphone centré, bulles listées dessous. */
@media (max-width: 600px) {
    .bulle { padding: 8px 10px; font-size: .8125rem; }
    .defile-actif .carnet__scene {
        --tel-h: min(clamp(300px, calc(100vh - 344px), 440px), max(280px, calc((100vw - 2 * var(--marge) - 206px) / .439)));
        --fin-x: calc(var(--tel-h) * .2195 + 2px - (50vw - var(--marge)));
    }
    @supports (height: 100svh) {
        .defile-actif .carnet__scene { --tel-h: min(clamp(300px, calc(100svh - 344px), 440px), max(280px, calc((100vw - 2 * var(--marge) - 206px) / .439))); }
    }
    .defile-actif .bulle { left: calc(var(--tel-h) * .439 + 16px); right: auto; max-width: calc(100% - var(--tel-h) * .439 - 16px); }
    .defile-actif .bulle--1 { top: calc(50% - var(--tel-h) * .36); }
    .defile-actif .bulle--2 { top: calc(50% - var(--tel-h) * .06); transform: translateX(calc((1 - var(--d2)) * 24px)); }
    .defile-actif .bulle--3 { top: calc(50% + var(--tel-h) * .24); }
    .carnet:not(.defile-actif) .carnet__scene { height: auto; }
    .carnet:not(.defile-actif) .carnet__plateau { position: relative; inset: auto; height: calc(var(--tel-h) + 40px); }
    .carnet:not(.defile-actif) .carnet__bulles { position: static; display: grid; justify-items: start; gap: 8px; }
    .carnet:not(.defile-actif) .bulle { position: static; grid-area: auto; transform: none; max-width: none; }
}

/* ───────────────────────────────── une journée avec Skégio (vraie séquence horaire)
   Frise verticale : texte à gauche, vignette à taille réelle à droite (sources en x2, nettes). Avec le script
   (.defile-actif), le fil se remplit jusqu'à 65 % de la hauteur de l'écran (--j) et chaque heure s'allume quand
   il l'atteint (.est-atteint) ; sans lui, tout est allumé. */
.journee { --gouttiere: 56px; }
.journee__frise {
    list-style: none; position: relative; display: grid; gap: clamp(36px, 5vw, 64px);
    max-width: 1040px; margin-top: 56px; padding-left: var(--gouttiere);
}
.journee__frise::before, .journee__frise::after {   /* le fil : la piste, puis la partie parcourue */
    content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--trait);
}
.journee__frise::after { background: var(--emeraude); transform-origin: 50% 0; transform: scaleY(var(--j, 1)); }
.journee__moment {
    position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(24px, 4vw, 56px); align-items: center;
}
.journee__moment::before {   /* le point de l'heure, au-dessus du fil */
    content: ""; position: absolute; z-index: 1; left: calc(var(--gouttiere) * -1); top: 10px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--emeraude); box-shadow: 0 0 0 5px #fff;
}
.journee__moment:last-child::after {   /* le fil s'arrête au point de 18 h */
    content: ""; position: absolute; z-index: 1; left: calc(var(--gouttiere) * -1 - 2px); top: 26px; bottom: -2px;
    width: 20px; background: #fff;
}
.journee__texte { display: grid; gap: 8px; align-self: start; }
.journee__heure { font-family: var(--titre); font-weight: 800; font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1; color: var(--emeraude-texte); letter-spacing: -0.02em; }
.journee__titre { font-family: var(--titre); font-size: var(--t-m); font-weight: 700; color: var(--foret); }
.journee__texte > p:last-child { color: var(--gris); max-width: 44ch; }
.vignette {
    display: grid; place-items: center; min-height: 168px; padding: clamp(16px, 2.4vw, 28px);
    border-radius: var(--rayon-ecran); background: var(--papier); box-shadow: inset 0 0 0 1px var(--trait);
}
.vignette img {
    max-width: 100%; border-radius: 8px;
    box-shadow: 0 0 0 1px var(--trait), 0 12px 22px -14px rgba(6, 30, 21, .4);
}
.ca {   /* la carte « CA encaissé » du tableau de bord, en HTML pour que le montant puisse monter */
    width: min(100%, 320px); padding: 16px 18px; border-radius: 10px; background: #fff;
    box-shadow: 0 0 0 1px var(--trait), 0 12px 22px -14px rgba(6, 30, 21, .4);
}
.ca__titre { font-size: var(--t-petit); font-weight: 600; color: var(--gris); }
.ca__montant {
    margin-top: 2px; font-family: var(--titre); font-weight: 800; font-size: 1.75rem; line-height: 1.2;
    color: var(--foret); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap;
}
.ca__ajout { margin-top: 4px; font-size: var(--t-petit); font-weight: 600; color: var(--emeraude-texte); }
.defile-actif .journee__moment::before { transition: background-color .3s ease, box-shadow .3s ease; }
.defile-actif .journee__moment:not(.est-atteint)::before { background: #fff; box-shadow: inset 0 0 0 2px var(--trait), 0 0 0 5px #fff; }
.defile-actif .journee__moment > .vignette, .defile-actif .journee__heure { transition: opacity .45s ease, transform .45s ease, color .3s ease; }
.defile-actif .journee__moment:not(.est-atteint) .journee__heure { color: var(--gris); }
.defile-actif .journee__moment:not(.est-atteint) > .vignette { opacity: .3; transform: translateY(12px); }
.ca__ajout { transition: opacity .3s ease .6s; }
.defile-actif .journee__moment:not(.est-atteint) .ca__ajout { opacity: 0; transition-delay: 0s; }
@media (max-width: 900px) {
    .journee { --gouttiere: 34px; }
    .journee__moment { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .journee__moment::before { top: 8px; }
    .journee__moment:last-child::after { top: 24px; }
    .vignette { max-width: 480px; min-height: 0; }
}

/* ───────────────────────────────── fonctions (onglets) */
.fonctions { margin-top: 48px; }
.fonction { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.fonction + .fonction { margin-top: 64px; padding-top: 64px; border-top: 1px solid var(--trait); }
.fonction__titre { font-size: var(--t-l); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; margin-bottom: 20px; }
.fonction__visuel {
    background: var(--foret-profond); padding: 8px; border-radius: var(--rayon-ecran);
    box-shadow: 0 24px 40px -22px rgba(6, 30, 21, .45);
}
.fonction__visuel img { border-radius: 5px; width: 100%; }
.fenetre { padding: 0; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--trait), 0 28px 48px -26px rgba(6, 30, 21, .5); }
.fenetre img { border-radius: 0; }
.fenetre__barre {
    display: flex; align-items: center; gap: 14px; padding: 10px 14px;
    background: #EEF3F0; border-bottom: 1px solid var(--trait);
}
.fenetre__points { flex-shrink: 0; width: 52px; height: 12px;
    background: radial-gradient(circle at 6px 6px, #FF5F57 5.5px, transparent 6px),
                radial-gradient(circle at 26px 6px, #FEBC2E 5.5px, transparent 6px),
                radial-gradient(circle at 46px 6px, #28C840 5.5px, transparent 6px); }
.fenetre__adresse {
    flex: 1; min-width: 0; max-width: 360px; margin-inline: auto; padding: 3px 12px;
    border-radius: 6px; background: #fff; color: var(--gris);
    font-size: .8125rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (prefers-reduced-motion: no-preference) {
    .avec-onglets .fonction:not([hidden]) { animation: fondu .35s ease both; }
}
@keyframes fondu { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fonction__visuel--carte { justify-self: center; width: min(520px, 100%); }
.fonction__visuel--telephone { justify-self: center; width: min(300px, 80%); padding: 7px; border-radius: 28px; }
.fonction__visuel--telephone img { border-radius: 22px; }

.onglets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.onglets[hidden] { display: none; }
.onglet {
    min-height: 44px; padding: 8px 16px;
    border: 1px solid var(--trait); border-radius: 999px; background: #fff;
    font-family: var(--texte); font-size: 1rem; font-weight: 600; color: var(--encre); cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.onglet:hover { border-color: var(--emeraude); }
.onglet[aria-selected="true"] { background: var(--foret); border-color: var(--foret); color: #fff; }
.avec-onglets .fonction + .fonction { margin-top: 0; padding-top: 0; border-top: 0; }
.avec-onglets .fonction[hidden] { display: none; }

@media (max-width: 900px) {
    .fonction { grid-template-columns: minmax(0, 1fr); }
    .onglets { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--marge) * -1); padding-inline: var(--marge); scrollbar-width: none; }
    .onglet { flex-shrink: 0; }
}

/* ───────────────────────────────── facture électronique */
.efacture__grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 80px); align-items: start; }
.efacture .liste { margin-top: 32px; }
.frise { list-style: none; position: relative; display: grid; gap: 28px; padding-left: 32px; }
.frise::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: rgba(167, 243, 208, .35); }
.frise__etape { position: relative; color: var(--sur-foret); }
.frise__etape::before {
    content: ""; position: absolute; left: -32px; top: 6px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--foret); box-shadow: inset 0 0 0 2px var(--menthe);
}
.frise__etape--passee::before { background: var(--menthe); }
.frise__etape--aujourdhui::before { background: #fff; box-shadow: 0 0 0 5px rgba(167, 243, 208, .3); }
.frise__date { font-family: var(--titre); font-weight: 700; font-size: var(--t-m); color: #fff; letter-spacing: -0.01em; }
.frise__etape--aujourdhui .frise__date { color: var(--menthe); }
@media (prefers-reduced-motion: no-preference) {
    .frise__etape--aujourdhui::after {   /* « vous êtes ici » : une onde autour du point, trois fois */
        content: ""; position: absolute; left: -32px; top: 6px; width: 16px; height: 16px; border-radius: 50%;
        box-shadow: 0 0 0 0 rgba(167, 243, 208, .7); opacity: 0;
    }
    .js .frise.est-visible .frise__etape--aujourdhui::after { animation: onde 1.6s ease-out .3s 3; }
}
@keyframes onde {
    from { opacity: 1; box-shadow: 0 0 0 0 rgba(167, 243, 208, .7); }
    to { opacity: 1; box-shadow: 0 0 0 16px rgba(167, 243, 208, 0); }
}
.frise__etape p + p { margin-top: 4px; }
@media (max-width: 900px) { .efacture__grille { grid-template-columns: minmax(0, 1fr); } }

/* la facture qui se retourne (site.js pose --e de 0 à 1 au passage) : recto lisible, verso = données Factur-X.
   Sans script ou avec le mouvement réduit : les deux faces l'une sous l'autre. */
.efacture .frise { margin-top: 40px; }
.facturx { --e: 1; perspective: 1400px; max-width: 460px; width: 100%; justify-self: end; }
.facturx__carte { display: grid; gap: 20px; }
.facturx__verso {
    position: relative; padding: 24px clamp(20px, 3vw, 28px);
    border-radius: var(--rayon-piece); background: var(--foret-profond);
    box-shadow: inset 0 0 0 1px rgba(167, 243, 208, .25), 0 28px 36px -20px rgba(0, 0, 0, .45);
}
.facturx__fichier {
    padding-bottom: 12px; margin-bottom: 6px; border-bottom: 2px dashed rgba(143, 211, 181, .4);
    font-size: var(--t-petit); font-weight: 600; color: var(--menthe);
}
.facturx__donnees > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding-block: 6px; border-top: 1px solid rgba(207, 227, 216, .12);
}
.facturx__donnees > div:first-child { border-top: 0; }
.facturx__donnees dt { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .8125rem; color: var(--menthe); }   /* vrais noms de champs */
.facturx__donnees dd { font-size: .9375rem; color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.facturx__tampon {   /* sous les données, aligné à droite : ne recouvre rien, même à 390 px */
    display: table; margin: 14px 4px 0 auto;
    padding: 2px 10px; border: 3px double var(--menthe); border-radius: 6px;
    color: var(--menthe); font-family: var(--titre); font-weight: 800; font-size: .875rem;
    transform: rotate(-6deg) scale(calc(1.5 - .5 * clamp(0, (var(--e) - .88) * 9, 1)));
    opacity: clamp(0, calc((var(--e) - .88) * 9), .9);
}
.facturx__legende { margin-top: 20px; font-size: 1rem; color: var(--sur-foret); max-width: 42ch; }
.facturx.defile-actif .facturx__carte { gap: 0; transform-style: preserve-3d; transform: rotateY(calc(var(--e) * -180deg)); will-change: transform; }
.facturx.defile-actif .facturx__recto,
.facturx.defile-actif .facturx__verso { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.facturx.defile-actif .facturx__recto { opacity: clamp(0, (.5 - var(--e)) * 1000, 1); }
.facturx.defile-actif .facturx__verso { transform: rotateY(180deg); opacity: clamp(0, (var(--e) - .5) * 1000, 1); }
@media (max-width: 900px) { .facturx { justify-self: start; } }

/* ───────────────────────────────── on démarre ensemble (vraie séquence : numérotée) */
.pas { list-style: none; counter-reset: pas; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 56px; }
.pas__item { counter-increment: pas; padding-top: 20px; border-top: 2px solid var(--foret); }
.pas__item::before {
    content: counter(pas); display: block; margin-bottom: 12px;
    font-family: var(--titre); font-weight: 800; font-size: 2.5rem; line-height: 1; color: var(--emeraude);
}
.pas__titre { font-size: var(--t-m); font-weight: 700; margin-bottom: 8px; }
.pas__item p { color: var(--gris); }
@media (max-width: 900px) { .pas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pas { grid-template-columns: minmax(0, 1fr); } }

/* ───────────────────────────────── tarifs */
.tarifs-resume__grille, .tarifs__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
.tarifs-resume__grille p + p { margin-top: 16px; }
.tarifs-resume__grille .piece-ombre { max-width: 480px; justify-self: end; width: 100%; }
.tarifs__grille { align-items: start; }
.tarifs__grille .piece-ombre { position: sticky; top: 104px; }
.tarifs__detail .titre-bloc { margin-bottom: 16px; }
.tarifs__detail .liste + .titre-bloc, .tarifs__detail p + .titre-bloc { margin-top: 40px; }
.tarifs__detail p + .liste { margin-top: 12px; }

.bascule {
    display: inline-flex; margin: 18px 0 4px; padding: 4px; border: 0;
    background: var(--papier); border-radius: 999px;
}
.bascule input { position: absolute; opacity: 0; pointer-events: none; }
.bascule label {
    padding: 6px 14px; border-radius: 999px; cursor: pointer;
    font-size: 1rem; font-weight: 600; color: var(--gris);
}
.bascule input:checked + label { background: var(--foret); color: #fff; }
.bascule input:focus-visible + label { outline: 3px solid var(--emeraude); outline-offset: 2px; }
/* la mise en service (première ligne, sans classe) reste affichée dans les deux formules */
.piece__lignes > .ligne-an { display: none; }
.piece--tarif:has(#formule-an:checked) .piece__lignes > .ligne-an { display: flex; }
.piece--tarif:has(#formule-an:checked) .piece__lignes > .ligne-mois { display: none; }
.piece--tarif .tampon--remise {   /* posé à côté du titre quand la formule annuelle est choisie */
    top: 84px; font-size: 1.125rem; opacity: 0; transform: rotate(-9deg) scale(1.6);
    transition: opacity .2s ease, transform .3s cubic-bezier(.2, .9, .3, 1.3);
}
.piece--tarif:has(#formule-an:checked) .tampon--remise { opacity: .85; transform: rotate(-9deg) scale(1); }
@media (max-width: 380px) {
    .piece--tarif .piece__titre, .confirmation .piece__titre { padding-right: 88px; }
}
@media (prefers-reduced-motion: no-preference) {
    .vient-de-basculer .ligne-mois, .vient-de-basculer .ligne-an { animation: fondu .35s ease both; }
    .vient-de-basculer .ligne-mois + .ligne-mois, .vient-de-basculer .ligne-an + .ligne-an { animation-delay: .06s; }
    .vient-de-basculer .ligne-mois + .ligne-mois + .ligne-mois,
    .vient-de-basculer .ligne-an + .ligne-an + .ligne-an { animation-delay: .12s; }
}
@media (max-width: 900px) {
    .tarifs-resume__grille, .tarifs__grille { grid-template-columns: minmax(0, 1fr); }
    .tarifs-resume__grille .piece-ombre { justify-self: start; }
    .tarifs__grille .piece-ombre { position: static; max-width: 480px; }
}

/* ───────────────────────────────── modules à la carte : un tarif imprimé (nom, pointillés de perforation, prix) */
.modules {
    list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 5vw, 72px); margin-top: 32px;
}
.module { padding-block: 20px; border-top: 1px solid var(--trait); }
.module__tete { display: flex; align-items: baseline; gap: 12px; }
.module__nom { min-width: 0; margin: 0; font-family: var(--titre); font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--foret); }
/* vide : sa ligne de base est son bord bas, posé sur celle du texte puis relevé d'un rien */
.module__points { flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted var(--perforation); transform: translateY(-.3em); }
.module__prix {
    font-family: var(--titre); font-size: 1.25rem; font-weight: 600; color: var(--foret);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.module__corps { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: start; gap: 16px; margin-top: 6px; }
.module__texte, .module__unite { font-size: 1rem; line-height: 1.45; color: var(--gris); }
.module__texte { flex: 1 1 auto; max-width: 56ch; }
.module__unite { flex: none; max-width: 13ch; text-align: right; font-size: var(--t-petit); }
.modules-carte__note { margin-top: 28px; font-size: 1rem; color: var(--gris); max-width: 72ch; }
@media (max-width: 760px) { .modules { grid-template-columns: minmax(0, 1fr); } }

/* ───────────────────────────────── exemples de prix : un ticket à onglets (CSS seul, :has), le total en grand */
.bascule--exemples { display: flex; flex-wrap: wrap; margin: 4px 0 20px; }
.bascule--exemples label { flex: 1 1 auto; text-align: center; }
@media (max-width: 400px) { .bascule--exemples label { padding-inline: 10px; } }
.piece--exemples .exemple + .exemple { margin-top: 32px; }   /* sans :has, les trois exemples l'un sous l'autre */
.piece--exemples .piece__lignes > .piece__total { align-items: baseline; }
.piece--exemples .piece__total dd { font-size: clamp(1.75rem, 3vw, 2.125rem); letter-spacing: -0.02em; }
@supports selector(:has(*)) {
    .piece--exemples .exemple { display: none; }
    .piece--exemples .exemple + .exemple { margin-top: 0; }
    .piece--exemples:has(.bascule input:nth-of-type(1):checked) .exemple:nth-of-type(1),
    .piece--exemples:has(.bascule input:nth-of-type(2):checked) .exemple:nth-of-type(2),
    .piece--exemples:has(.bascule input:nth-of-type(3):checked) .exemple:nth-of-type(3) { display: block; }
}
@media (prefers-reduced-motion: no-preference) {
    .piece--exemples.vient-de-basculer .exemple { animation: fondu .3s ease both; }
}

/* ───────────────────────────────── questions */
.faq__grille {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 5vw, 72px); row-gap: 28px; align-items: start;
}
.faq__liste { grid-column: 2; grid-row: 1 / span 2; }
.faq__aide { grid-column: 1; grid-row: 2; display: grid; gap: 10px; max-width: 34ch; color: var(--gris); font-size: 1rem; }
.faq__aide-titre { font-family: var(--titre); font-size: 1.125rem; font-weight: 700; color: var(--foret); }
.faq__aide .contacts { margin-top: 4px; }
.faq__liste { border-top: 1px solid var(--trait); }
.faq__item { border-bottom: 1px solid var(--trait); }
.faq__item summary {
    list-style: none; cursor: pointer; position: relative;
    padding: 20px 44px 20px 0; font-weight: 600; font-size: 1.1875rem; color: var(--foret);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
    content: ""; position: absolute; right: 8px; top: 50%;
    width: 12px; height: 12px; margin-top: -9px;
    border-right: 2px solid var(--emeraude); border-bottom: 2px solid var(--emeraude);
    transform: rotate(45deg); transition: transform .2s ease;
}
.faq__item[open] summary::after { transform: rotate(225deg); margin-top: -3px; }
.faq__item p { padding: 0 44px 22px 0; color: var(--gris); max-width: 64ch; }
@media (max-width: 900px) {
    .faq__grille { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
    .faq__liste, .faq__aide { grid-column: auto; grid-row: auto; }
    .faq__aide { margin-top: 12px; }
}

/* ───────────────────────────────── appel final et contacts */
.appel__grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: end; }
.appel__actions { display: grid; justify-items: start; gap: 20px; }
.appel__boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.btn--whatsapp { background: var(--whatsapp); color: #06351F; }
.btn--whatsapp:hover { background: #4BE283; }
.contacts { list-style: none; display: grid; gap: 8px; }
.contacts a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
.contacts--sombre a { color: var(--emeraude-texte); }
@media (max-width: 900px) { .appel__grille { grid-template-columns: minmax(0, 1fr); } }

/* ───────────────────────────────── pages intérieures */
.page-tete { background: var(--foret); color: #fff; padding-block: clamp(48px, 7vw, 88px); }
.page-tete__titre {
    color: #fff; font-size: clamp(2.25rem, 4.6vw, 3.5rem); font-weight: 800;
    line-height: 1.05; letter-spacing: -0.03em; max-width: 18ch;
}
.page-tete__chapo { margin-top: 20px; font-size: 1.25rem; color: var(--sur-foret); max-width: 56ch; }
.page-tete__chapo .lien { color: inherit; }

.texte-legal { max-width: 72ch; }
.texte-legal h2 { font-family: var(--titre); font-size: var(--t-m); color: var(--foret); margin: 40px 0 12px; }
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal p + p { margin-top: 12px; }
.texte-legal ul { margin: 12px 0 0; padding-left: 1.25em; list-style: disc; }
.texte-legal li + li { margin-top: 8px; }
.texte-legal ul + p { margin-top: 12px; }
.texte-legal .a-remplir { color: var(--gris); font-style: italic; }

/* ───────────────────────────────── formulaire de démo */
.demo__grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 80px); align-items: start; }
.demo__aside { padding: 28px; background: var(--papier); border-radius: var(--rayon-piece); }
.demo__aside .titre-bloc { margin-bottom: 12px; }
.demo__aside .contacts + .titre-bloc { margin-top: 32px; }
.formulaire { display: grid; gap: 24px; }
.formulaire__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.champ { display: grid; gap: 6px; }
.champ--large { grid-column: 1 / -1; }
.champ__label { font-weight: 600; color: var(--foret); padding: 0; }
.champ__facultatif { font-weight: 400; color: var(--gris); }
.champ input, .champ textarea {
    width: 100%; min-height: 48px; padding: 10px 14px;
    border: 1px solid #B9CCC2; border-radius: var(--rayon-bouton); background: #fff;
    font: inherit; font-size: 1.0625rem; color: var(--encre);
}
.champ textarea { min-height: 120px; resize: vertical; }
.champ input:focus, .champ textarea:focus { outline: 3px solid rgba(5, 150, 105, .35); outline-offset: 0; border-color: var(--emeraude); }
.champ--erreur input, .champ--erreur textarea { border-color: #B42318; }
.champ__erreur { color: #B42318; font-size: 1rem; }
.choix { border: 0; padding: 0; display: grid; gap: 8px; }
.choix__options { display: flex; flex-wrap: wrap; gap: 8px; }
.choix__option {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px;
    border: 1px solid var(--trait); border-radius: 999px; cursor: pointer; font-weight: 600;
}
.choix__option input { accent-color: var(--emeraude-texte); width: 18px; height: 18px; margin: 0; }
.choix__option:has(input:checked) { border-color: var(--emeraude-texte); background: #ECFDF5; }
.formulaire .btn { justify-self: start; }
.formulaire__mention { font-size: 1rem; color: var(--gris); max-width: 62ch; }
.alerte { padding: 14px 16px; border-radius: var(--rayon-bouton); background: #FEF3F2; color: #912018; font-weight: 600; }
.confirmation { max-width: 520px; }
.confirmation .piece { padding-bottom: 28px; overflow: hidden; }   /* le tampon grossi à l'arrivée ne fait pas défiler la page */
.confirmation .piece__titre { margin-top: 18px; font-family: var(--titre); }
.confirmation p { margin-top: 12px; max-width: 34ch; }
.confirmation .tampon { top: 76px; }
@media (prefers-reduced-motion: no-preference) {
    .confirmation .tampon { animation: tamponne .32s cubic-bezier(.2, .9, .3, 1.3) .35s both; }
}
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 900px) { .demo__grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .formulaire__grille { grid-template-columns: minmax(0, 1fr); } }

/* ───────────────────────────────── barre « Demander une démo » (téléphone, avec le script seulement) */
.barre-demo { display: none; }
@media (max-width: 900px) {
    html.js { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }   /* focus clavier jamais dessous */
    .js .barre-demo {
        position: fixed; z-index: 25; left: 0; right: 0; bottom: 0;
        display: flex; gap: 8px; padding: 10px var(--marge) calc(10px + env(safe-area-inset-bottom));
        background: rgba(18, 56, 42, .96); box-shadow: 0 -10px 24px -12px rgba(6, 30, 21, .5);
        visibility: hidden; transform: translateY(110%);
        transition: transform .3s ease, visibility 0s linear .3s;
    }
    .js .barre-demo.est-visible { visibility: visible; transform: none; transition: transform .3s ease; }
    .barre-demo .btn { flex: 1; min-height: 48px; padding-inline: 12px; }
    .barre-demo .btn--whatsapp { flex: 0 1 auto; }
    .barre-demo .btn { white-space: nowrap; }
}
@media (max-width: 360px) { .barre-demo .btn { padding-inline: 10px; font-size: .9375rem; } }

/* ───────────────────────────────── pied */
.pied { background: var(--foret-profond); color: var(--sur-foret); padding-top: 64px; }
.pied__grille { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 40px; }
.pied__marque p { margin-top: 16px; max-width: 40ch; font-size: 1rem; }
.pied__logo { display: inline-block; }
.pied__titre { font-family: var(--titre); font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 12px; }
.pied__nav ul { list-style: none; display: grid; gap: 6px; }
.pied__nav a { color: var(--sur-foret); text-decoration: none; font-size: 1rem; overflow-wrap: anywhere; }
.pied__nav a:hover { color: #fff; text-decoration: underline; }
.pied__bas { margin-top: 48px; padding-block: 24px; border-top: 1px solid rgba(207, 227, 216, .18); font-size: var(--t-petit); }
@media (max-width: 900px) { .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pied__marque { grid-column: 1 / -1; } }
@media (max-width: 480px) { .pied__grille { grid-template-columns: minmax(0, 1fr); } }

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