/* ============================================================
   LE SITE PUBLIC smart-trainer.fr — la feuille de style (12 novembre 2026)
   Direction B « Petrole », choisie par Clement. Tokens de l application
   (src/p1.html, docs/DESIGN.md) ; la DA de l application l emporte sur
   toute proposition d un skill. Politique de securite : style-src 'self',
   donc aucun style dans les pages ; le mouvement passe par des classes.
   Mouvement : regles du CLAUDE.md (250 ms au plus, cascade de 30 ms par
   element plafonnee au quatrieme, transform et opacity pour ce qui
   bouge), tout eteint sous prefers-reduced-motion. Les etats caches
   d avant une entree n existent que sous html.anime (pose par site.js) :
   sans script, la page est complete et immobile.
   ============================================================ */

@font-face { font-family: "Bricolage Grotesque"; src: url("/polices/BricolageGrotesque.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/polices/PlusJakartaSans.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  /* neutres chauds */
  --papier: #F7F4EE;        /* fond de page */
  --panneau: #FFFFFF;       /* cartes */
  --creux: #F1EDE4;         /* coques, fonds en retrait */
  --filet: #DBD4C5;         /* bordures */
  --filet-l: #E7E1D4;
  --filet-champ: #8A8478;   /* bord d un champ (non textuel) : 3,7:1 sur --panneau, 3,2:1 sur --creux (WCAG 1.4.11) */
  /* encres (ratios sur --papier) */
  --encre: #072330;         /* 14,5:1 */
  --encre-t: #0E3240;       /* titres, 12,6:1 */
  --texte-2: #2C4A56;       /* texte courant secondaire, 8,7:1 */
  --ardoise: #4E6A75;       /* 5,1:1 ; 4,9:1 sur --creux */
  /* l accent */
  --canard: #0E6C78;        /* aplat ; --sur-canard dessus 5,4:1 */
  --canard-p: #0A5A64;      /* lien sur papier, 7,0:1 */
  --canard-d: #DCEEF0;      /* pastille ; --canard-p dessus 6,2:1 */
  --canard-f: #A6D2D8;
  --sur-canard: #F8F6F1;
  /* le petrole (bandeaux, pied) et ses encres (ratios sur --petrole) */
  --petrole: #0A3A42;
  --petrole-2: #0D4851;
  --sur-petrole: #F7F4EE;   /* 11,6:1 */
  --petrole-texte: #CFE3E6; /* 9,6:1 */
  --cyan: #7FE3EE;          /* 8,5:1 ; aplat du bouton principal, --encre dessus 11,5:1 */
  --cyan-filet: #4FA9B5;    /* bordure sur petrole, 4,1:1 (non textuel) */
  --cyan-2: #5FA7B2;        /* la seconde branche du signe et du fil, sur petrole (non textuel) */
  --canard-clair: #6FB3BC;  /* la seconde branche du signe et du fil, sur papier (non textuel) */
  --canard-survol: #127C89; /* survol du bouton en aplat ; --sur-canard dessus 4,5:1 */
  --cyan-survol: #A2ECF3;   /* survol du bouton cyan ; --encre dessus 12:1 */
  --chevauche: clamp(56px, 7vw, 96px); /* ce qu un formulaire ou une capture prend sur le bandeau petrole */
  /* formes */
  --r: 12px;
  --r-coque: 18px;
  --pill: 999px;
  --ombre: 0 1px 2px rgba(7, 35, 48, .05);
  --ombre-l: 0 10px 26px -14px rgba(7, 35, 48, .16);
  --ombre-coque: 0 22px 44px -30px rgba(7, 35, 48, .26);
  /* mouvement (tokens de l application) */
  --mv-hov: 120ms;
  --mv-press: 90ms;
  --mv: 200ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in: cubic-bezier(.7,0,.84,0);
  /* mise en page */
  --large: 1200px;
  --marge: 32px;
  --tete-h: 76px;
  --titre: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --texte: "Plus Jakarta Sans", system-ui, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--tete-h) + 16px); }
body { margin: 0; background: var(--papier); color: var(--encre); font-family: var(--texte); font-size: 17px; line-height: 1.6; font-variant-numeric: tabular-nums; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { color: var(--encre-t); margin: 0; }
h1, h2, h3 { text-wrap: balance; }
h1, h2 { font-family: var(--titre); letter-spacing: -.025em; line-height: 1.08; font-weight: 800; }
h2 { font-size: clamp(30px, 3.6vw, 44px); }
h3 { font-size: 20px; line-height: 1.3; font-weight: 700; }
p { margin: 0; }
p, li { text-wrap: pretty; }
.insec, a[href^="mailto:"] { white-space: nowrap; }
p + p { margin-top: .8em; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--canard-p); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--encre); }
:focus-visible { outline: 3px solid var(--canard); outline-offset: 3px; border-radius: 4px; }
.sombre :focus-visible, .pied :focus-visible, .tete:not([data-ilot]) :focus-visible { outline-color: var(--cyan); }
::selection { background: var(--canard-d); color: var(--encre); }

.conteneur { width: 100%; max-width: calc(var(--large) + 2 * var(--marge)); margin-inline: auto; padding-inline: var(--marge); }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* le lien d evitement */
.evitement { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--panneau); color: var(--encre); padding: 10px 16px; border-radius: var(--pill); font-weight: 600; text-decoration: none; box-shadow: var(--ombre-l); }
.evitement:focus { top: 12px; outline: 3px solid var(--canard); outline-offset: 2px; }

/* ---------- l en-tete : dans le bandeau en haut, en ilot des qu on defile ---------- */
.tete { position: relative; z-index: 40; color: var(--sur-petrole); background: var(--petrole); view-transition-name: tete; }
html.js .tete { position: fixed; inset: 0 0 auto 0; background: transparent; }
.tete-in { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; max-width: calc(var(--large) + 2 * var(--marge)); margin: 0 auto; padding: 16px var(--marge); border: 1px solid transparent; border-radius: var(--pill);
  transition: background-color var(--mv) var(--ease-out), border-color var(--mv) var(--ease-out), box-shadow var(--mv) var(--ease-out), color var(--mv) var(--ease-out); }
.tete[data-ilot] { color: var(--encre); }
.tete[data-ilot] .tete-in { max-width: calc(var(--large) + 2 * var(--marge) - 32px); margin-top: 12px; padding: 8px 8px 8px 22px; background: rgba(247, 244, 238, .94); border-color: var(--filet); box-shadow: var(--ombre-l); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.marque { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-family: var(--titre); font-weight: 800; font-size: 21px; letter-spacing: -.02em; min-height: 44px; }
.marque:hover { color: inherit; }
.signe { width: 34px; height: 34px; flex: none; }
.signe path { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.signe .s-a { stroke: var(--cyan); } .signe .s-b { stroke: var(--cyan-2); } .signe .p-c { fill: var(--sur-petrole); } .signe .p-a { fill: var(--cyan); } .signe .p-b { fill: var(--cyan-2); }
.tete[data-ilot] .signe .s-a, .pied-clair .signe .s-a { stroke: var(--canard); } .tete[data-ilot] .signe .p-a { fill: var(--canard); }
.tete[data-ilot] .signe .s-b { stroke: var(--canard-clair); } .tete[data-ilot] .signe .p-b { fill: var(--canard-clair); } .tete[data-ilot] .signe .p-c { fill: var(--petrole); }
.menu { flex: 1 1 auto; }
.menu ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 22px; justify-content: center; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; font-weight: 500; font-size: 15px; position: relative; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--mv) var(--ease-out); }
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu a[aria-current="page"] { font-weight: 700; }
.tete-actions { display: flex; align-items: center; gap: 8px; }
.menu-b { display: none; }

/* ---------- les boutons : pilules, l icone dans un rond ---------- */
.bouton, .bouton-plein { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 8px 0 20px; border-radius: var(--pill); font-family: var(--texte); font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: background-color var(--mv-hov) var(--ease-out), border-color var(--mv-hov) var(--ease-out), color var(--mv-hov) var(--ease-out), transform var(--mv-press) var(--ease-out), box-shadow var(--mv-hov) var(--ease-out); }
.bouton:active, .bouton-plein:active { transform: translateY(1px); }
.bouton .bi, .bouton-plein .bi { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; transition: transform var(--mv) var(--ease-out); }
.bouton:hover .bi, .bouton-plein:hover .bi { transform: translateX(2px); }
.bi svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bouton.sans-icone, .bouton-plein.sans-icone { padding: 0 22px; }
/* sur papier */
.bouton { background: var(--panneau); border-color: var(--filet); color: var(--encre); }
.bouton:hover { border-color: var(--canard); color: var(--encre); }
.bouton { padding-right: 18px; }
.bouton .bi { width: 18px; height: 18px; background: none; color: var(--canard-p); }
.bouton-plein { background: var(--canard); color: var(--sur-canard); box-shadow: var(--ombre); }
.bouton-plein:hover { background: var(--canard-survol); color: var(--sur-canard); }
.bouton-plein .bi { background: rgba(248, 246, 241, .16); }
/* sur petrole (bandeaux, en-tete hors ilot, pied) */
.sombre .bouton, .tete:not([data-ilot]) .bouton, .pied .bouton { background: transparent; border-color: var(--cyan-filet); color: var(--sur-petrole); }
.sombre .bouton:hover, .tete:not([data-ilot]) .bouton:hover, .pied .bouton:hover { border-color: var(--cyan); color: var(--sur-petrole); background: rgba(127, 227, 238, .08); }
.sombre .bouton .bi, .tete:not([data-ilot]) .bouton .bi, .pied .bouton .bi { background: none; color: var(--cyan); }
.sombre .bouton-plein, .tete:not([data-ilot]) .bouton-plein { background: var(--cyan); color: var(--encre); box-shadow: none; }
.sombre .bouton-plein:hover, .tete:not([data-ilot]) .bouton-plein:hover { background: var(--cyan-survol); color: var(--encre); }
.sombre .bouton-plein .bi, .tete:not([data-ilot]) .bouton-plein .bi { background: rgba(7, 35, 48, .1); }
/* un seul bouton en aplat par ecran visible (cahier 4.4) : au-dessus de 900 px, l en-tete montre « Demander une démonstration » et
   l appel d une page (.appel-corps) prend la forme du bouton secondaire ; sous 900 px, l en-tete ne le montre plus, l appel garde son aplat */
@media (min-width: 901px) {
  .bouton-plein.appel-corps { background: var(--panneau); border-color: var(--filet); color: var(--encre); box-shadow: none; padding-right: 18px; }
  .bouton-plein.appel-corps:hover { background: var(--panneau); border-color: var(--canard); color: var(--encre); }
  .bouton-plein.appel-corps .bi { width: 18px; height: 18px; background: none; color: var(--canard-p); }
  .sombre .bouton-plein.appel-corps { background: transparent; border-color: var(--cyan-filet); color: var(--sur-petrole); }
  .sombre .bouton-plein.appel-corps:hover { background: rgba(127, 227, 238, .08); border-color: var(--cyan); color: var(--sur-petrole); }
  .sombre .bouton-plein.appel-corps .bi { background: none; color: var(--cyan); }
}

/* ---------- les bandeaux petrole (le haut de chaque page) ---------- */
.sombre { background: var(--petrole); color: var(--sur-petrole); }
.sombre h1, .sombre h2, .sombre h3 { color: var(--sur-petrole); }
.sombre a:not(.bouton):not(.bouton-plein) { color: var(--cyan); }
.bandeau { position: relative; overflow: hidden; padding: calc(var(--tete-h) + clamp(32px, 4.5vw, 56px)) 0 clamp(48px, 7vw, 88px); }
.bandeau .conteneur { position: relative; }
.sentinelle { position: absolute; top: 0; left: 0; width: 1px; height: 120px; pointer-events: none; opacity: 0; }
.bandeau.avec-capture { padding-bottom: clamp(180px, 22vw, 300px); }
.surtitre { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--pill); background: var(--canard-d); color: var(--canard-p); font-weight: 600; font-size: 14px; line-height: 1.3; margin-bottom: 20px; }
.sombre .surtitre { background: rgba(127, 227, 238, .12); color: var(--cyan); }
.section:not(.sombre) .surtitre { background: none; padding: 0; border-radius: 0; color: var(--ardoise); font-size: 15px; margin-bottom: 10px; }
.bandeau h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.04; letter-spacing: -.035em; max-width: 28ch; }
.bandeau.court h1 { font-size: clamp(36px, 5vw, 60px); max-width: 18ch; }
.chapeau { margin-top: 22px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--petrole-texte); max-width: 40em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-capture { position: relative; z-index: 2; margin-top: clamp(-260px, -20vw, -150px); }
.hero-visuel { margin-bottom: 64px; }

/* ---------- les coques doubles (captures) ---------- */
.coque { background: var(--creux); border: 1px solid var(--filet); border-radius: var(--r-coque); padding: 6px; box-shadow: var(--ombre-coque); margin: 0; }
.coque .ecran { overflow: hidden; border-radius: var(--r); background: var(--panneau); }
.coque img { width: 100%; }
.coque figcaption { padding: 10px 8px 4px; font-size: 14px; color: var(--ardoise); }
.coque-tel { max-width: 300px; }

/* ---------- les sections ---------- */
.section { padding-block: clamp(64px, 9vw, 128px); }
.section-papier { background: var(--panneau); border-block: 1px solid var(--filet-l); }
.section-creux { background: var(--creux); }
.tete-section { max-width: 46em; margin-bottom: clamp(32px, 4vw, 56px); }
.tete-section > p:not(.surtitre) { margin-top: 14px; color: var(--texte-2); font-size: 18px; }
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(26px, 3vw, 34px); margin: 48px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--texte-2); }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 6px; }
.prose .sorties { list-style: none; padding: 0; margin-top: 16px; display: grid; gap: 0; }
.prose .sorties li + li { margin-top: 0; }
.sorties a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* les trois promesses : des colonnes separees par un filet, pas des cartes */
.promesses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--filet); }
.promesse { padding: 28px 28px 8px 0; display: flex; flex-direction: column; gap: 10px; }
.promesse + .promesse { padding-left: 28px; border-left: 1px solid var(--filet); }
.promesse .qui { font-weight: 600; font-size: 14px; color: var(--ardoise); }
.promesse h3 { font-family: var(--titre); font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.promesse p { color: var(--texte-2); }
.promesse a { margin-top: auto; padding-top: 8px; font-weight: 600; }

/* la grille irreguliere : une grande capture, deux blocs empiles */
.grille-irr { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 40px); align-items: center; }
.grille-irr.inverse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.grille-irr.inverse > :first-child { order: 2; }
.grille-irr.titre { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.grille-irr + .grille-irr { margin-top: clamp(56px, 7vw, 96px); }
.blocs { display: grid; gap: 0; }
.bloc { border-top: 1px solid var(--filet); padding: 18px 0 20px; }
.blocs > .bloc:last-child, .cote > .bloc:last-child { border-bottom: 1px solid var(--filet); }
.bloc h3 { margin-bottom: 6px; font-size: 20px; }
.bloc p { color: var(--texte-2); font-size: 16px; }
.liste-ok { list-style: none; display: grid; gap: 10px; margin-top: 18px; }
.liste-ok li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; color: var(--texte-2); }
.liste-ok svg { width: 22px; height: 22px; margin-top: 2px; fill: none; stroke: var(--canard); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- « Comment ca marche » : le fil qui se dessine et se separe ---------- */
.etapes-cadre { position: relative; padding-left: 64px; }
.etapes-cadre > .fil { position: absolute; left: 21px; top: 22px; width: 4px; height: calc(100% + 22px); overflow: visible; }
.etapes { list-style: none; display: grid; gap: clamp(28px, 4vw, 44px); }
.fil path { fill: none; stroke: var(--canard); stroke-width: 3; stroke-linecap: round; }
/* le fil vertical ne s etire qu en hauteur : son trait garde ses 3 px, et un seul tiret de toute sa longueur (pathLength=1) le dessine.
   Pas de non-scaling-stroke ici : Chromium compte alors le tiret a l ecran (100 px), et le fil sortait pointille */
.etapes-cadre > .fil path { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* la fourche s etire en largeur : non-scaling-stroke garde son trait a 3 px ; sans tiret, elle entre avec sa section */
.fourche .fil path { vector-effect: non-scaling-stroke; }
.fil .branche-b { stroke: var(--canard-clair); }
.etape { position: relative; }
.etape .num { position: absolute; left: -64px; top: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--canard); color: var(--sur-canard); font-weight: 700; box-shadow: 0 0 0 6px var(--panneau); }
.etape h3 { font-size: 20px; padding-top: 9px; }
.etape p { margin-top: 6px; color: var(--texte-2); max-width: 46em; }
/* la fourche part du bas du fil (x = 23 px, le centre du trait) et rejoint le milieu de chaque chemin */
.fourche { margin-top: 0; max-width: 880px; }
.fourche .fil { width: calc(100% - 23px); margin-left: 23px; height: 64px; overflow: visible; }

/* l accueil : la capture du studio et, devant, le meme ecran sur telephone */
.hero-visuel { position: relative; }
/* le telephone se pose sur la photo de l ecran, a gauche : il ne couvre aucun libelle du studio */
.hero-visuel .coque-tel { position: absolute; left: -12px; bottom: -56px; width: clamp(150px, 19%, 240px); }
/* la galerie : le parcours sur toute la largeur, la Bibliotheque et la Vitrine cote a cote, chaque capture entiere (jamais recadree ici) */
.galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; margin-top: clamp(40px, 5vw, 64px); align-items: start; }
.galerie > .large { grid-column: 1 / -1; }
.galerie figcaption { font-weight: 600; color: var(--encre-t); }
.galerie figcaption > span { display: block; font-weight: 400; color: var(--ardoise); margin-top: 2px; }
.duo-captures { display: grid; grid-template-columns: minmax(0, 1fr) clamp(170px, 22%, 260px); gap: 20px; align-items: end; }
.chemins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.chemin { background: var(--panneau); border: 1px solid var(--filet); border-radius: var(--r); padding: 24px; box-shadow: var(--ombre); }
.chemin.b { background: var(--canard-d); border-color: var(--canard-f); }
.chemin h3 { margin-bottom: 6px; }
.chemin p { color: var(--texte-2); }

/* ---------- les formules : trois cartes, Diffusion ressort ---------- */
.cartes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.cartes > .carte { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 14px; }
.cartes.cartes-courtes > .carte { grid-row: span 3; }
.carte { position: relative; background: var(--panneau); border: 1px solid var(--filet); border-radius: var(--r); padding: 30px 28px; box-shadow: var(--ombre); }
.carte-mise { border-color: var(--canard-f); box-shadow: var(--ombre-l); }
.etiquette { position: absolute; top: 0; left: 28px; transform: translateY(-50%); margin: 0; padding: 3px 12px; border-radius: var(--pill); border: 1px solid var(--canard-f); background: var(--canard-d); color: var(--canard-p); font-size: 13px; font-weight: 600; line-height: 1.4; }
.carte h3, .nom-formule { font-family: var(--titre); font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
mark.afaire { background: #F6EBD5; color: #5E3D07; padding: 0 4px; border-radius: 4px; }
.carte .pour { color: var(--texte-2); }
.carte .liste-ok { margin-top: 8px; }
.inclus { font-weight: 600; color: var(--encre-t); }
.carte .bouton, .carte .bouton-plein { align-self: end; justify-self: start; }
.mention-prix { margin-top: 28px; color: var(--texte-2); }

/* ---------- les questions ---------- */
.questions { display: grid; gap: clamp(40px, 5vw, 56px); max-width: 860px; }
.groupe-q h2 { font-size: 28px; margin-bottom: 12px; }
.questions details { border-top: 1px solid var(--filet); }
.groupe-q details:last-child { border-bottom: 1px solid var(--filet); }
.questions summary { cursor: pointer; list-style: none; display: block; position: relative; padding: 18px 36px 18px 0; font-weight: 700; color: var(--encre-t); min-height: 44px; }
.questions summary::-webkit-details-marker { display: none; }
/* (pas de flex : une span insecable dans la question en ferait un element a part, et la ligne ne se couperait plus) */
.questions summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; margin-top: -8px; border-right: 2px solid var(--canard); border-bottom: 2px solid var(--canard); transform: rotate(45deg); transition: transform var(--mv) var(--ease-out); }
.questions details[open] summary::after { transform: rotate(225deg); margin-top: -3px; }
.questions .reponse { padding: 0 0 20px; color: var(--texte-2); max-width: 68ch; }

/* ---------- l appel final ---------- */
.appel { text-align: left; }
.sombre.appel { background: var(--petrole-2); }
.appel .conteneur { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 64px; }
.appel h2 { max-width: 24ch; }
.appel .actions { flex-direction: column; align-items: stretch; margin-top: 0; }

/* ---------- le formulaire de contact ---------- */
.contact-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.formulaire { background: var(--panneau); border: 1px solid var(--filet); border-radius: var(--r-coque); padding: clamp(22px, 3vw, 36px); box-shadow: var(--ombre-l); display: grid; gap: 20px; }
.champ { display: grid; gap: 6px; }
.champ label, .champ legend { font-weight: 600; color: var(--encre-t); font-size: 15px; }
.champ .aide { font-size: 14px; color: var(--ardoise); }
.champ input, .champ textarea { width: 100%; font: inherit; color: var(--encre); background: var(--creux); border: 1px solid var(--filet-champ); border-radius: var(--r); padding: 11px 14px; min-height: 46px;
  transition: border-color var(--mv-hov) var(--ease-out), box-shadow var(--mv-hov) var(--ease-out), background-color var(--mv-hov) var(--ease-out); }
.champ textarea { min-height: 140px; resize: vertical; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--canard); background: var(--panneau); box-shadow: 0 0 0 3px var(--canard-d), inset 0 -2px 0 var(--canard); }
.champ [aria-invalid="true"] { border-color: #A33726; }
.champ .erreur { color: #A33726; font-size: 14px; font-weight: 600; }
.objets { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.objets .options { display: flex; flex-wrap: wrap; gap: 8px; }
.objets label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--filet); border-radius: var(--pill); background: var(--creux); font-weight: 500; cursor: pointer; transition: border-color var(--mv-hov) var(--ease-out), background-color var(--mv-hov) var(--ease-out); }
.objets input { accent-color: var(--canard); width: 18px; height: 18px; margin: 0; }
.objets label:has(input:checked) { border-color: var(--canard); background: var(--canard-d); }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.resume-erreurs { border: 1px solid #A33726; background: #F8E4E0; color: #6E2418; border-radius: var(--r); padding: 16px 20px; }
.resume-erreurs ul { margin-top: 6px; padding-left: 1.2em; }
.resume-erreurs a { color: #6E2418; font-weight: 600; }
.alerte { border-radius: var(--r); padding: 16px 20px; background: #F6EBD5; border: 1px solid #E2C48D; color: #5E3D07; }
.mention { font-size: 14px; color: var(--ardoise); }
.envoyer[aria-busy="true"] { opacity: .8; cursor: progress; }
.cote { display: grid; gap: 0; }
.bandeau.avec-formulaire { padding-bottom: calc(var(--chevauche) + clamp(40px, 5vw, 64px)); }
.section-contact { padding-top: 0; }
.section-contact .contact-grille { position: relative; z-index: 2; margin-top: calc(-1 * var(--chevauche)); }
.section-contact .cote { margin-top: calc(var(--chevauche) + 8px); position: sticky; top: calc(var(--tete-h) + 24px); }
.cote .bloc a { font-weight: 600; overflow-wrap: anywhere; }
.petit-titre { font-family: var(--texte); font-size: 20px; font-weight: 700; letter-spacing: 0; line-height: 1.3; margin-bottom: 6px; }
.formulaire .alerte, .formulaire .resume-erreurs { margin: 0; }

/* ---------- les secteurs et profils ---------- */
.secteurs { display: grid; gap: clamp(40px, 6vw, 72px); }
.secteur { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 40px); align-items: center; }
.secteur:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.secteur:nth-child(even) > .coque { order: 2; }
.secteur .corps { display: grid; gap: 10px; }
.secteur h3 { font-family: var(--titre); font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.secteur p { color: var(--texte-2); }
.profils { list-style: none; display: grid; border-top: 1px solid var(--filet); }
.profils li { display: grid; grid-template-columns: minmax(0, 18em) minmax(0, 1fr); gap: 8px 32px; padding: 22px 0; border-bottom: 1px solid var(--filet); }
.profils h3 { font-size: 20px; }
.profils p { color: var(--texte-2); max-width: 62ch; }

/* ---------- le pied ---------- */
.pied { background: var(--petrole); color: var(--sur-petrole); padding: 56px 0 40px; }
.pied a { color: var(--sur-petrole); }
.pied a:hover { color: var(--cyan); }
.pied-in { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 32px; }
.pied p { color: var(--petrole-texte); }
.pied .marque { color: var(--sur-petrole); margin-bottom: 10px; }
.pied h2 { font-family: var(--texte); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--petrole-texte); margin-bottom: 12px; }
.pied ul { list-style: none; display: grid; gap: 4px; }
.pied ul a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.pied-bas { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(207, 227, 230, .2); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.pied-bas p { margin: 0; }
.pied-bas a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- le mouvement : entrees au chargement et au defilement ---------- */
@keyframes monte { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
html.anime .bandeau .monte { animation: monte 180ms var(--ease-out) both; }
html.anime .bandeau .monte.d2 { animation-delay: 40ms; }
html.anime .bandeau .monte.d3 { animation-delay: 80ms; }
html.anime .bandeau .monte.d4 { animation-delay: 120ms; }
html.anime .tete .signe path { stroke-dasharray: 1; animation: trace 250ms var(--ease-out) both; }
html.anime [data-entre] { transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out); }
html.anime [data-entre]:not(.entre) { opacity: 0; transform: translateY(8px); }
html.anime [data-entre] .d1, html.anime [data-entre] .d2, html.anime [data-entre] .d3, html.anime [data-entre] .d4 { transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
html.anime [data-entre]:not(.entre) .d1, html.anime [data-entre]:not(.entre) .d2, html.anime [data-entre]:not(.entre) .d3, html.anime [data-entre]:not(.entre) .d4 { opacity: 0; transform: translateY(8px); }
html.anime [data-entre] .d2 { transition-delay: 40ms; }
html.anime [data-entre] .d3 { transition-delay: 80ms; }
html.anime [data-entre] .d4 { transition-delay: 120ms; }
/* le fil suit la position de la section (aucune duree : animation liee au defilement) ; sans animation-timeline, site.js ecrit le trace */
@supports (animation-timeline: view()) {
  html.anime .etapes-cadre > .fil path { animation: trace linear both; animation-timeline: view(); animation-range: entry 10% cover 55%; }
  html.anime .prof { animation: prof linear both; animation-timeline: view(); animation-range: cover; }
  @keyframes prof { from { transform: translateY(24px); } to { transform: translateY(-24px); } }
}
/* les transitions entre les pages : un fondu, l en-tete reste en place */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; animation-timing-function: var(--ease-out); }

/* ---------- les tailles ---------- */
@media (max-width: 1080px) {
  .pied-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-in > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .tete-actions .bouton-plein { display: none; }
  html.js .menu-b { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--cyan-filet); background: transparent; color: inherit; cursor: pointer; padding: 0; }
  html.js .tete[data-ilot] .menu-b { border-color: var(--filet); }
  .menu-b .barres { position: relative; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: background-color var(--mv) var(--ease-out); }
  .menu-b .barres::before, .menu-b .barres::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--mv) var(--ease-out); }
  .menu-b .barres::before { transform: translateY(-6px); } .menu-b .barres::after { transform: translateY(6px); }
  .tete[data-ouvert] .menu-b .barres { background: transparent; }
  .tete[data-ouvert] .menu-b .barres::before { transform: rotate(45deg); } .tete[data-ouvert] .menu-b .barres::after { transform: rotate(-45deg); }
  html.js .tete .menu { display: none; order: 9; flex-basis: 100%; }
  html.js .tete[data-ouvert] .menu { display: block; animation: fondu var(--mv) var(--ease-out); }
  html.js .tete[data-ouvert] .tete-in { background: var(--petrole); color: var(--sur-petrole); border-radius: 22px; }
  html.js .tete[data-ilot][data-ouvert] .tete-in { background: var(--papier); color: var(--encre); }
  html.js .tete .menu ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 12px; }
  html.js .tete .menu a { width: 100%; font-size: 18px; min-height: 48px; }
  html.js .tete .menu a::after { bottom: 10px; right: auto; width: 32px; }
  .tete-actions { margin-left: auto; }
  .grille-irr, .grille-irr.inverse, .grille-irr.titre, .contact-grille { grid-template-columns: minmax(0, 1fr); }
  .section-contact .cote { margin-top: 32px; position: static; }
  .appel .conteneur { grid-template-columns: minmax(0, 1fr); }
  .appel .actions { flex-direction: row; flex-wrap: wrap; }
  .grille-irr.inverse > :first-child { order: 0; }
  .promesses { grid-template-columns: minmax(0, 1fr); }
  .promesse, .promesse + .promesse { padding: 24px 0 8px; border-left: 0; border-top: 1px solid var(--filet); }
  .promesses { border-top: 0; }
  .cartes { grid-template-columns: minmax(0, 1fr); }
  .secteur { grid-template-columns: minmax(0, 1fr); }
  .secteur:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .secteur:nth-child(even) > .coque { order: 0; }
  .profils li { grid-template-columns: minmax(0, 1fr); }
  .galerie { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .hero-visuel > .coque:not(.coque-tel) { display: none; }
  .hero-visuel .coque-tel { position: relative; right: auto; left: auto; bottom: auto; width: min(240px, 72vw); margin: 0 auto; }
  .hero-visuel { margin-bottom: 0; }
  .duo-captures { grid-template-columns: minmax(0, 1fr); }
  .duo-captures .coque-tel { max-width: 260px; justify-self: center; }
}
@media (max-width: 640px) {
  .chemins { grid-template-columns: minmax(0, 1fr); }
  .fourche .fil { display: none; }
  .fourche { margin-top: 44px; }
}
@media (max-width: 560px) {
  :root { --marge: 16px; --tete-h: 68px; }
  body { font-size: 16px; }
  .tete-in { gap: 8px 12px; }
  .tete[data-ilot] .tete-in { padding-left: 14px; max-width: calc(100% - 16px); }
  .bouton, .bouton-plein { padding-left: 16px; gap: 10px; }
  .etapes-cadre { padding-left: 48px; }
  .etape .num { left: -48px; width: 36px; height: 36px; }
  .etape h3 { padding-top: 6px; }
  .etapes-cadre > .fil { left: 16px; top: 18px; }
  .fourche { margin-top: 40px; }
  .appel .actions > * { width: 100%; justify-content: space-between; }
  .pied-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .tete .marque .nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- l impression : tout est montre (une section jamais atteinte par le defilement s imprime aussi), l en-tete reste en tete
   de la premiere feuille, les bandeaux sombres gardent leur fond (sinon leur texte clair disparait sur le papier) ---------- */
@media print {
  html.js .tete { position: static; background: var(--petrole); }
  .menu-b, .evitement, .sentinelle { display: none !important; }
  .tete, .bandeau, .sombre, .pied { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  [data-entre], [data-entre] .d1, [data-entre] .d2, [data-entre] .d3, [data-entre] .d4, .bandeau .monte, .prof, .coque img, .bloc, .carte { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}

/* ---------- reduire les animations : rien ne bouge, tout est en place ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  [data-entre], [data-entre] .d1, [data-entre] .d2, [data-entre] .d3, [data-entre] .d4, .prof, .coque img, .bloc, .carte { opacity: 1 !important; transform: none !important; }
  .fil path { stroke-dashoffset: 0 !important; }
  .tete-in, .bouton, .bouton-plein { transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear !important; }
}