/* ORAVY — « À la cenne près »
   Concept : le site se lit comme un reçu. Fond nuit d'oravy.ca, papier thermique pour tout ce qui touche l'argent,
   menthe réservée aux actions et au tampon. Titres Archivo élargi, chiffres et étiquettes en JetBrains Mono. */
:root{
  /* Couleur — palette du livret Oravy CRM */
  --nuit:#eef1ef;          /* fond : gris-vert très pâle, entre le blanc et le #e7ecea du livret */
  --nuit-2:#e2e7e4;        /* encadrés, un cran sous le fond */
  --nuit-3:#1b1c1e;        /* fente de l'imprimante */
  --trait:#c9cecb;
  --encre:#1b1c1e;
  --encre-2:#5d6065;       /* gris du livret (#6b6e73), foncé d'un cran pour rester lisible sur #e7ecea */
  --papier:#ffffff;
  --papier-ombre:#e7ecea;
  --encre-papier:#1b1c1e;
  --encre-papier-2:#5d6065;
  --menthe:#154b4c;        /* sarcelle : boutons, panneaux */
  --menthe-encre:#ffffff;
  --menthe-texte:#154b4c;
  --menthe-papier:#154b4c;
  --orange:#ffb550;        /* accent : traits, surligneur, point du logo */
  --sarcelle-pale:#9fc3c1;
  --erreur:#a3271a;
  --erreur-papier:#a3271a;
  /* Texture : grain de papier (bruit SVG, très léger) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .16 0 0 0 0 .16 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.22'/%3E%3C/svg%3E");
  /* Type */
  --f-titre:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-recu:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* réservé au papier thermique (reçus, tickets) */
  --f-mono:var(--f-titre);  /* étiquettes, chiffres et boutons : même famille que les titres */
  --t-xs:.75rem; --t-s:.875rem; --t-b:1.0625rem; --t-l:1.3rem;
  --t-xl:clamp(2rem,4.2vw,3.4rem); --t-xxl:clamp(2.7rem,7.2vw,6rem);
  /* Espace */
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2.5rem; --s-5:4rem; --s-6:clamp(4.5rem,10vw,8rem);
  --largeur:78rem; --entete:4.5rem;
  /* Mouvement */
  --m-court:180ms; --m-moyen:420ms; --m-long:700ms;
  --courbe:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
@font-face{font-family:"Hanken Grotesk";src:url("hanken-grotesk.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("hanken-grotesk-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("jetbrains-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("jetbrains-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("jetbrains-mono-700.woff2") format("woff2");font-weight:600;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
[data-fond="2"]{background-color:var(--nuit-2);background-image:var(--grain)}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--entete) + 1rem)}
body{margin:0;background-color:var(--nuit);background-image:var(--grain);color:var(--encre);font-family:var(--f-titre);font-size:var(--t-b);line-height:1.6;overflow-x:hidden;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--nuit)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-weight:400;line-height:1.04;letter-spacing:-.035em;margin:0;text-wrap:balance}
h1{font-size:var(--t-xxl);letter-spacing:-.045em}
h2{font-size:var(--t-xl)}
h3{font-size:var(--t-l);font-weight:500;letter-spacing:-.02em;line-height:1.15}
p{margin:0}
:focus-visible{outline:3px solid var(--menthe-texte);outline-offset:3px;border-radius:4px}
.papier :focus-visible{outline-color:var(--menthe-papier)}
.cache-visuel{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saut{position:fixed;left:1rem;top:0;transform:translateY(-200%);z-index:100;background:var(--menthe);color:var(--menthe-encre);padding:.8rem 1.1rem;border-radius:8px;font-family:var(--f-mono);font-size:var(--t-s);text-decoration:none}
.saut:focus{transform:translateY(calc(1rem + env(safe-area-inset-top,0px)))}

.wrap{max-width:var(--largeur);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:700px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
.bloc{padding-block:var(--s-6)}
.bloc--serre{padding-block:var(--s-5)}

/* Étiquettes et timecodes */
.tc{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2);display:flex;gap:.9rem;align-items:baseline;flex-wrap:wrap}
.tc b{color:var(--menthe-texte);font-weight:500}
.chapeau > .tc:first-child,.tete-page > .tc:first-child,.hero__texte > .tc:first-child,.scene__explique > .tc:first-child,.page-404 > .tc:first-child{flex-wrap:wrap;row-gap:.9rem}
.chapeau > .tc:first-child::before,.tete-page > .tc:first-child::before,.hero__texte > .tc:first-child::before,.scene__explique > .tc:first-child::before,.page-404 > .tc:first-child::before{content:"";flex:0 0 100%;height:2px;background:linear-gradient(90deg,var(--orange) 20px,transparent 20px)}
.papier .tc{color:var(--encre-papier-2)}
.papier .tc b{color:var(--menthe-papier)}
.chapeau{display:grid;gap:var(--s-2);max-width:46rem}
.chapeau p{color:var(--encre-2);max-width:38rem}
.lede{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--encre-2);max-width:36rem}
.accent{color:var(--menthe-texte)}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.75rem 1.35rem;border-radius:999px;font-family:var(--f-mono);font-size:var(--t-s);font-weight:500;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform var(--m-court) var(--courbe),background-color var(--m-court),border-color var(--m-court)}
.btn:hover{transform:translateY(-2px)}
.btn--menthe{background:var(--menthe);color:var(--menthe-encre)}
.btn--ligne{background:transparent;color:var(--encre);border-color:var(--trait)}
.btn--ligne:hover{border-color:var(--encre-2)}
.papier .btn--ligne{color:var(--encre-papier);border-color:var(--encre-papier-2)}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}
.btn .fl{transition:transform var(--m-court) var(--courbe)}
.btn:hover .fl{transform:translateX(3px)}
.rang-btn{display:flex;flex-wrap:wrap;gap:.75rem}
.lien{color:var(--menthe-texte);text-underline-offset:.2em;text-decoration-thickness:1px}
.papier .lien{color:var(--menthe-papier)}

/* En-tête */
.entete{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--nuit) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--trait)}
.entete__barre{display:flex;align-items:center;gap:2rem;height:var(--entete)}
.marque{display:inline-flex;align-items:flex-end;gap:.3rem;text-decoration:none;color:var(--encre);padding-block:.6rem;min-height:44px}
.marque svg{height:1.2rem;width:auto;display:block;fill:currentColor}
.marque__point{width:.34rem;height:.34rem;border-radius:50%;background:var(--orange);margin-bottom:.03rem;flex:none}
.nav{display:flex;gap:.3rem;margin-left:.5rem}
.nav a{color:var(--encre-2);text-decoration:none;font-size:.95rem;font-weight:500;padding:.6rem .7rem;border-radius:8px;transition:color var(--m-court)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--encre)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--encre)}
.entete__actions{margin-left:auto;display:flex;align-items:center;gap:1rem}
.entete__tel{font-family:var(--f-mono);font-size:var(--t-s);color:var(--encre-2);text-decoration:none;padding:.6rem 0}
.entete__tel:hover{color:var(--encre)}
.bascule{display:none;width:48px;height:48px;margin-right:-10px;background:none;border:0;cursor:pointer;color:var(--encre);align-items:center;justify-content:center}
.bascule span{position:relative;display:block;width:22px;height:2px;background:currentColor;transition:background var(--m-court)}
.bascule span::before,.bascule span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;transition:transform var(--m-moyen) var(--courbe)}
.bascule span::before{top:-7px}.bascule span::after{top:7px}
.bascule[aria-expanded="true"] span{background:transparent}
.bascule[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.bascule[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}
.menu-mobile{position:fixed;inset:calc(var(--entete) + env(safe-area-inset-top,0px)) 0 0;z-index:29;background-color:var(--nuit);background-image:var(--grain);overflow:auto;padding-block:var(--s-3) calc(var(--s-4) + env(safe-area-inset-bottom,0px))}
.menu-mobile nav{display:grid}
.menu-mobile nav a{font-size:2rem;font-weight:400;letter-spacing:-.03em;text-decoration:none;padding:.65rem 0;border-bottom:1px solid var(--trait);display:flex;justify-content:space-between;align-items:baseline}
.menu-mobile nav a span{font-family:var(--f-mono);font-size:var(--t-xs);font-weight:400;color:var(--menthe-texte);letter-spacing:.1em}
.menu-mobile__bas{display:grid;gap:var(--s-2);margin-top:var(--s-4)}
.menu-mobile__bas a.tel{font-family:var(--f-mono);color:var(--encre-2);text-decoration:none;display:flex;justify-content:space-between;padding:.6rem 0}
@media (max-width:960px){.nav,.entete__tel{display:none}.bascule{display:inline-flex}}
@media (max-width:520px){.entete__cta{display:none}}

/* Barre d'action mobile */
.barre-cta{display:none}
@media (max-width:760px){
  .barre-cta{display:grid;grid-template-columns:1.4fr 1fr;gap:.5rem;position:fixed;left:0;right:0;bottom:0;z-index:25;background:color-mix(in srgb,var(--nuit) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--trait);padding:.6rem max(16px,env(safe-area-inset-right,0px)) calc(.6rem + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  .barre-cta .btn{padding-inline:.8rem}
  body{padding-bottom:calc(4.6rem + env(safe-area-inset-bottom,0px))}
}

/* Papier thermique */
.papier{background:var(--papier);color:var(--encre-papier);font-family:var(--f-recu);position:relative;border:1px solid var(--trait);border-bottom:0}
.dents{--d:12px;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/var(--d) 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/var(--d) 100%;padding-bottom:calc(var(--d) + 1.2rem)}
.dents-haut{--d:12px;-webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50%/var(--d) 100%;mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50%/var(--d) 100%}
.ligne{display:flex;align-items:baseline;gap:.5rem;font-variant-numeric:tabular-nums}
.ligne .pts{flex:1;min-width:1.5rem;border-bottom:2px dotted currentColor;opacity:.35;transform:translateY(-.3em)}
.ligne .prix{white-space:nowrap;font-weight:600}
.coupe{border:0;border-top:1.5px dashed var(--encre-papier-2);margin:1rem 0;opacity:.6}

/* Hero */
.hero{padding-block:clamp(2.5rem,7vw,5.5rem) var(--s-5);display:grid;gap:var(--s-4) var(--s-5);grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:end}
.hero h1{font-size:clamp(2.6rem,6vw,5.4rem)}
.hero__texte{display:grid;gap:var(--s-3);min-width:0}
.hero h1 em,.manifeste__grand em,.surligne{font-style:normal;color:var(--encre);background:linear-gradient(transparent 56%,var(--orange) 56% 90%,transparent 90%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-inline:.04em}
.hero__appel{font-family:var(--f-mono);font-size:var(--t-s);color:var(--encre-2)}
.hero__appel a{color:var(--encre);text-decoration:none;border-bottom:1px solid var(--trait)}
.ticket{padding:1.4rem 1.4rem calc(12px + 1.2rem);font-size:var(--t-s);transform:rotate(1.2deg);box-shadow:0 1px 0 var(--papier-ombre),0 24px 50px -28px rgba(24,25,27,.35);max-width:26rem;justify-self:end;width:100%}
.ticket__tete{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.4rem}
.ticket__tete svg{height:.95rem;width:auto;fill:var(--encre-papier)}
.ticket ul{list-style:none;margin:0;padding:0;display:grid}
.ticket li a{display:grid;gap:.1rem;padding:.7rem 0;text-decoration:none;border-bottom:1px dashed var(--papier-ombre)}
.ticket li:last-child a{border-bottom:0}
.ticket li a:hover .ligne span:first-child{text-decoration:underline;text-underline-offset:.2em}
.ticket .quand{font-size:var(--t-xs);color:var(--encre-papier-2);line-height:1.45}
.ticket__pied{font-size:var(--t-xs);color:var(--encre-papier-2);line-height:1.5;padding-top:.2rem}
@media (max-width:900px){.hero{grid-template-columns:1fr;align-items:start}.ticket{justify-self:start;transform:rotate(-.6deg)}}

/* Bandeau logos */
.logos{background-color:var(--nuit-2);background-image:var(--grain);color:var(--encre-papier);padding-block:var(--s-3);border-block:1px solid var(--trait)}
.logos__in{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.logos .tc{flex:none;max-width:12rem}
.defile{flex:1;min-width:0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.defile__piste{display:flex;width:max-content;animation:defile 32s linear infinite}
.defile:hover .defile__piste{animation-play-state:paused}
.defile ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex:none}
.defile li{padding-inline:clamp(1.5rem,3.5vw,3rem);flex:none}
@keyframes defile{to{transform:translateX(-50%)}}
.logos img{height:clamp(32px,5vw,44px);width:auto;max-width:170px;object-fit:contain;filter:grayscale(1) brightness(.32) contrast(1.3);opacity:.9}
@media (max-width:700px){.logos .tc{flex-basis:100%;max-width:none}.defile{flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.defile{-webkit-mask:none;mask:none}.defile__piste{animation:none;width:auto}.defile ul{flex-wrap:wrap;gap:1.2rem 0}.defile ul[aria-hidden]{display:none}}

/* Scène : le reçu */
.scene{position:relative}
.scene__piste{height:230vh}
.scene__colle{position:sticky;top:calc(var(--entete) + env(safe-area-inset-top,0px));height:calc(100vh - var(--entete));min-height:36rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:var(--s-5);align-items:center}
.scene__explique{display:grid;gap:var(--s-3);min-width:0}
.postes{list-style:none;margin:0;padding:0;display:grid;gap:.25rem;counter-reset:p}
.postes li{display:grid;grid-template-columns:2.4rem 1fr;gap:.2rem .8rem;padding:.75rem 0;border-top:1px solid var(--trait);color:var(--encre-2);transition:color var(--m-moyen)}
.postes li::before{counter-increment:p;content:"0" counter(p);font-family:var(--f-mono);font-size:var(--t-xs);padding-top:.25rem;color:var(--encre-2)}
.postes li b{display:block;color:var(--encre);font-weight:600;transition:color var(--m-moyen)}
.postes li span{grid-column:2;font-size:var(--t-s);line-height:1.5}
.js-scene .postes li{color:color-mix(in srgb,var(--encre-2) 55%,var(--nuit))}
.js-scene .postes li b{color:var(--encre-2)}
.js-scene .postes li.actif{color:var(--encre-2)}
.js-scene .postes li.actif b{color:var(--encre)}
.js-scene .postes li.actif::before{color:var(--menthe-texte)}
.imprimante{position:relative;width:100%;max-width:26rem;justify-self:center}
.imprimante__fente{height:22px;border-radius:12px 12px 4px 4px;background:var(--nuit-3);border:1px solid var(--trait);position:relative;z-index:2;box-shadow:inset 0 -8px 10px -6px #000}
.imprimante__fente::after{content:"";position:absolute;left:6%;right:6%;bottom:5px;height:3px;border-radius:2px;background:#000}
.recu-fenetre{overflow:hidden;margin:-6px 4% 0;position:relative;height:var(--montre,auto);transition:height 260ms var(--courbe)}
.recu{padding:1.6rem 1.4rem;font-size:var(--t-s);box-shadow:inset 0 10px 12px -10px rgba(24,25,27,.25)}
.recu__tete{text-align:center;display:grid;gap:.3rem;justify-items:center;padding-bottom:.4rem}
.recu__tete svg{height:1.1rem;width:auto;fill:var(--encre-papier)}
.recu__tete small{font-size:var(--t-xs);color:var(--encre-papier-2)}
.recu__l{padding:.35rem 0;transition:opacity var(--m-moyen)}
.recu__l small{display:block;font-size:var(--t-xs);color:var(--encre-papier-2)}
.recu__total{font-size:1.05rem;padding-top:.5rem}
.recu__pied{font-size:var(--t-xs);color:var(--encre-papier-2);text-align:center;line-height:1.5;margin-top:.8rem}
.tampon{position:relative;display:block;width:max-content;margin:1.1rem auto 0;border:3px solid var(--menthe-papier);color:var(--menthe-papier);font-weight:600;font-size:.8rem;letter-spacing:.08em;padding:.35rem .6rem;border-radius:6px;transform:rotate(-9deg);text-transform:uppercase;line-height:1.2;text-align:center;mix-blend-mode:multiply;background:color-mix(in srgb,var(--menthe) 22%,transparent)}
.js-scene .tampon{opacity:0;transform:rotate(-9deg) scale(1.6);transition:opacity var(--m-court),transform var(--m-moyen) var(--courbe)}
.js-scene .tampon.pose{opacity:1;transform:rotate(-9deg) scale(1)}
@media (max-width:900px){
  .scene__piste{height:auto}
  .scene__colle{position:static;height:auto;min-height:0;grid-template-columns:1fr;gap:var(--s-4);padding-block:var(--s-6)}
}

/* Terrain */
.terrain{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-4)}
.mandat{display:grid;gap:.8rem;align-content:start;min-width:0}
.mandat figure{margin:0;overflow:hidden;border-radius:6px;background:var(--nuit-2);position:relative}
.mandat figure img{width:100%;height:100%;object-fit:cover;transition:transform var(--m-long) var(--courbe)}
.mandat:hover figure img{transform:scale(1.03)}
.mandat figure::after{content:attr(data-tc);position:absolute;left:.7rem;top:.6rem;font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;color:#fff;background:rgba(24,25,27,.72);padding:.15rem .45rem;border-radius:4px}
.mandat p{color:var(--encre-2);font-size:var(--t-s);max-width:30rem}
.mandat--s{grid-column:1 / span 5;grid-row:span 2}
.mandat--s figure{aspect-ratio:3/4}
.mandat--a{grid-column:6 / span 3}
.mandat--a figure{aspect-ratio:3/4}
.mandat--b{grid-column:9 / span 4;margin-top:var(--s-5)}
.mandat--b figure{aspect-ratio:4/3.2}
.mandat--c{grid-column:6 / span 3}
.mandat--c figure{aspect-ratio:3/4}
.terrain__suite{grid-column:9 / span 4;align-self:end;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;border-top:1px solid var(--trait);padding-top:var(--s-2)}
@media (max-width:900px){
  .terrain{grid-template-columns:1fr 1fr}
  .mandat--s{grid-column:1 / -1;grid-row:auto}.mandat--s figure{aspect-ratio:4/4.6}
  .mandat--a{grid-column:1}.mandat--b{grid-column:2;margin-top:0}.mandat--c{grid-column:1}
  .mandat--a figure,.mandat--b figure,.mandat--c figure{aspect-ratio:3/4}
  .terrain__suite{grid-column:1 / -1}
}

/* Les deux cellulaires */
.duo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s-5);align-items:center}
.duo__photos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.duo__photos figure{margin:0;display:grid;gap:.6rem}
.duo__photos figure:nth-child(2){margin-top:var(--s-5)}
.duo__photos img{aspect-ratio:600/777;object-fit:cover;border-radius:6px;background:var(--nuit-2);width:100%}
.duo__photos figcaption{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--encre-2);letter-spacing:.06em}
.lignes-directes{display:grid;gap:0;margin-top:var(--s-3);border-top:1px solid var(--trait)}
.lignes-directes a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;padding:1rem 0;border-bottom:1px solid var(--trait);text-decoration:none}
.lignes-directes a b{font-size:var(--t-l);font-weight:600;}
.lignes-directes a span{font-family:var(--f-mono);font-size:clamp(1.05rem,2.2vw,1.4rem);color:var(--menthe-texte);font-variant-numeric:tabular-nums}
.lignes-directes a:hover span{text-decoration:underline;text-underline-offset:.2em}
@media (max-width:900px){.duo{grid-template-columns:1fr}.duo__photos figure:nth-child(2){margin-top:var(--s-4)}}

/* Étapes */
.etapes{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--trait)}
.etapes li{padding:var(--s-3) var(--s-3) var(--s-3) 0;display:grid;gap:.6rem;align-content:start;border-right:1px solid var(--trait)}
.etapes li + li{padding-left:var(--s-3)}
.etapes li:last-child{border-right:0}
.etapes .tc{margin-bottom:.3rem}
.etapes p{color:var(--encre-2);font-size:var(--t-s)}
@media (max-width:860px){.etapes{grid-template-columns:1fr}.etapes li,.etapes li + li{padding:var(--s-3) 0;border-right:0;border-bottom:1px solid var(--trait)}}

/* Appel final */
.final{background-color:var(--menthe);background-image:var(--grain);color:#fff}
.final h2{color:#fff}
.final .final__cote p{color:rgba(255,255,255,.82)}
.final .btn--menthe{background:var(--orange);color:var(--encre)}
.final .btn--ligne{color:#fff;border-color:rgba(255,255,255,.45)}
.final .btn--ligne:hover{border-color:#fff}
.final :focus-visible{outline-color:var(--orange)}
.final__in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s-4);align-items:end}
.final h2{font-size:clamp(2.4rem,5.8vw,4.8rem)}
.final__cote{display:grid;gap:var(--s-3)}

@media (max-width:860px){.final__in{grid-template-columns:1fr}}

/* En-têtes de pages internes */
.tete-page{padding-block:clamp(2.5rem,7vw,5rem) var(--s-4);display:grid;gap:var(--s-3);border-bottom:1px solid var(--trait)}
.tete-page h1{font-size:clamp(2.5rem,6.2vw,5rem);max-width:18ch}
.tete-page .lede{max-width:40rem}

/* Services */
.service{display:grid;grid-template-columns:minmax(0,.35fr) minmax(0,1fr) minmax(0,.55fr);gap:var(--s-3) var(--s-4);padding-block:var(--s-5);border-bottom:1px solid var(--trait);scroll-margin-top:calc(var(--entete) + 1rem)}
.service__prix{font-family:var(--f-mono);display:grid;gap:.2rem;align-content:start}
.service__prix .par{display:block;font-size:var(--t-s);font-weight:500;color:var(--encre-2)}
.service__prix small{font-size:var(--t-xs);color:var(--encre-2);letter-spacing:.1em;text-transform:uppercase}
.service__prix strong{font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.15;font-weight:600;color:var(--menthe-texte);font-variant-numeric:tabular-nums}
.service__corps{display:grid;gap:var(--s-2);align-content:start;min-width:0}
.service__corps p{color:var(--encre-2);max-width:38rem}
.service__quand{background:var(--nuit-2);border:1px solid var(--trait);border-radius:8px;padding:var(--s-3);display:grid;gap:.6rem;align-content:start;font-size:var(--t-s)}
.service__quand b{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--menthe-texte);font-weight:500}
.service__quand p{color:var(--encre-2)}
@media (max-width:900px){.service{grid-template-columns:1fr}}

.forfaits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-4);align-items:start}
.forfait{padding:1.4rem 1.3rem calc(12px + 1.2rem);font-size:var(--t-s);display:grid;gap:.3rem;filter:drop-shadow(0 18px 24px rgba(24,25,27,.12))}
.forfait:nth-child(2){margin-top:var(--s-3);background:var(--menthe);color:#fff;border-color:var(--menthe)}
.forfait:nth-child(2) .note,.forfait:nth-child(2) h3{color:rgba(255,255,255,.85)}
.forfait:nth-child(2) .recu__total{border-top-color:rgba(255,255,255,.5)}
.forfait:nth-child(3){margin-top:var(--s-5)}
.forfait h3{font-family:var(--f-mono);font-size:var(--t-s);font-weight:600;letter-spacing:.12em;text-transform:uppercase;}
.forfait .recu__total{border-top:1.5px dashed var(--encre-papier-2);margin-top:.5rem;padding-top:.7rem}
.forfait .note{font-size:var(--t-xs);color:var(--encre-papier-2);margin-top:.6rem}
@media (max-width:900px){.forfaits{grid-template-columns:1fr}.forfait:nth-child(n){margin-top:0}}

.faq{display:grid;gap:0;margin-top:var(--s-4);border-top:1px solid var(--trait);max-width:52rem}
.faq details{border-bottom:1px solid var(--trait)}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 2.5rem 1.1rem 0;font-weight:600;font-size:1.1rem;position:relative;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:.9rem;font-family:var(--f-mono);font-size:1.3rem;color:var(--menthe-texte);transition:transform var(--m-court)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--encre-2);padding-bottom:1.2rem;max-width:42rem}

/* Portfolio */
.projet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-4) var(--s-5);padding-block:var(--s-5);border-bottom:1px solid var(--trait);align-items:center}
.projet figure{margin:0;border-radius:6px;overflow:hidden;background:var(--nuit-2);aspect-ratio:4/4.6}
.projet figure img{width:100%;height:100%;object-fit:cover}
.projet:nth-of-type(even) figure{order:2}
.projet__texte{display:grid;gap:var(--s-2);align-content:center;min-width:0}
.projet__texte p{color:var(--encre-2);max-width:34rem}
.fiche{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem;font-family:var(--f-mono);font-size:var(--t-s);margin:0;border-top:1px solid var(--trait);padding-top:var(--s-2)}
.fiche dt{color:var(--encre-2)}
.fiche dd{margin:0}
@media (max-width:860px){.projet{grid-template-columns:1fr}.projet:nth-of-type(even) figure{order:0}.projet figure{aspect-ratio:4/3.6}}
.lieux{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:var(--s-4);border-top:1px solid var(--trait)}
.lieux div{padding:var(--s-3) var(--s-3) var(--s-3) 0;display:grid;gap:.5rem;border-right:1px solid var(--trait)}
.lieux div + div{padding-left:var(--s-3)}
.lieux div:last-child{border-right:0}
.lieux p{color:var(--encre-2);font-size:var(--t-s)}
@media (max-width:760px){.lieux{grid-template-columns:1fr}.lieux div,.lieux div + div{padding:var(--s-3) 0;border-right:0;border-bottom:1px solid var(--trait)}}
.reseaux{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--s-3)}

/* À propos */
.manifeste{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-5);align-items:start}
.manifeste__grand{font-size:clamp(1.7rem,3.4vw,2.7rem);font-weight:400;line-height:1.12;letter-spacing:-.03em;text-wrap:balance}

.principes{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--trait)}
.principes li{padding:1.1rem 0;border-bottom:1px solid var(--trait);display:grid;gap:.3rem}
.principes li p{color:var(--encre-2);font-size:var(--t-s)}
@media (max-width:860px){.manifeste{grid-template-columns:1fr}}
.portrait{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s-4);align-items:end;padding-block:var(--s-4);border-bottom:1px solid var(--trait)}
.portrait img{aspect-ratio:600/777;object-fit:cover;border-radius:6px;background:var(--nuit-2);width:100%;max-width:22rem}
.portrait:nth-of-type(even) img{order:2;justify-self:end}
.portrait__texte{display:grid;gap:var(--s-2)}
.portrait__texte p{color:var(--encre-2)}
@media (max-width:760px){.portrait{grid-template-columns:1fr}.portrait:nth-of-type(even) img{order:0;justify-self:start}}

/* Formulaires */
.form-zone{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s-5);align-items:start}
@media (max-width:900px){.form-zone{grid-template-columns:1fr}}
.formulaire{padding:clamp(1.3rem,3vw,2rem);display:grid;gap:1.1rem;border-radius:4px;border:1px solid var(--trait);box-shadow:0 24px 50px -32px rgba(24,25,27,.3)}
.formulaire fieldset{border:0;padding:0;margin:0;display:grid;gap:1.1rem;min-width:0}
.formulaire legend{font-weight:600;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.4rem;padding:0}
.champ{display:grid;gap:.35rem}
.champ label,.groupe-titre{font-size:var(--t-s);font-weight:600}
.champ .aide{font-size:var(--t-xs);color:var(--encre-papier-2)}
.champ input,.champ select,.champ textarea{font:inherit;font-size:1rem;color:var(--encre-papier);background:#fff;border:1.5px solid var(--encre-papier-2);border-radius:6px;padding:.75rem .85rem;min-height:48px;width:100%}
.champ textarea{min-height:8rem;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:3px solid var(--menthe-papier);outline-offset:1px;border-color:var(--encre-papier)}
.champ [aria-invalid="true"]{border-color:var(--erreur-papier)}
.champ .err{font-size:var(--t-xs);color:var(--erreur-papier);font-weight:600;min-height:1em}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:560px){.deux{grid-template-columns:1fr}}
.choix{display:flex;flex-wrap:wrap;gap:.5rem}
.choix label{position:relative;cursor:pointer}
.choix input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.choix span{display:inline-flex;align-items:center;min-height:44px;padding:.55rem 1rem;border:1.5px solid var(--encre-papier-2);border-radius:999px;font-size:var(--t-s);background:#fff}
.choix input:checked + span{background:var(--encre-papier);color:var(--papier);border-color:var(--encre-papier)}
.choix input:focus-visible + span{outline:3px solid var(--menthe-papier);outline-offset:2px}
.formulaire .btn--menthe{background:var(--encre-papier);color:var(--papier)}
.formulaire .actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between}
.etat{border-radius:6px;padding:1rem 1.1rem;font-size:var(--t-s);display:grid;gap:.6rem}
.etat--ok{background:color-mix(in srgb,var(--menthe) 30%,#fff);border:1.5px solid var(--menthe-papier)}
.etat--err{background:#fff0ed;border:1.5px solid var(--erreur-papier);color:var(--erreur-papier)}
.etat pre{white-space:pre-wrap;font:inherit;font-size:var(--t-xs);background:#fff;border-radius:4px;padding:.7rem;margin:0;max-height:12rem;overflow:auto;color:var(--encre-papier)}
.progression{display:flex;gap:.4rem;font-size:var(--t-xs);color:var(--encre-papier-2);align-items:center;letter-spacing:.06em}
.progression i{flex:1;height:3px;background:var(--papier-ombre);border-radius:2px}
.progression i.fait{background:var(--encre-papier)}
.recap{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;font-size:var(--t-s)}
.recap dt{color:var(--encre-papier-2)}
.recap dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.coord{display:grid;gap:var(--s-3);align-content:start}
.coord__bloc{display:grid;gap:.4rem;padding-bottom:var(--s-3);border-bottom:1px solid var(--trait)}
.coord__bloc .tc{margin-bottom:.2rem}
.coord__bloc a{font-family:var(--f-mono);font-size:1.15rem;text-decoration:none;color:var(--encre)}
.coord__bloc a:hover{color:var(--menthe-texte)}
.coord__bloc p{color:var(--encre-2);font-size:var(--t-s)}

/* 404 */
.page-404{min-height:60vh;display:grid;align-content:center;gap:var(--s-3);padding-block:var(--s-6)}
.page-404 .ticket{transform:rotate(-1.5deg);justify-self:start;max-width:24rem}

/* Pied */
.pied{border-top:1px solid var(--trait);padding-block:var(--s-5) var(--s-4);font-size:var(--t-s);color:var(--encre-2)}
.pied__grille{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--s-4)}
.pied h2{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;font-weight:500;color:var(--encre);margin-bottom:.8rem;}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.pied a{text-decoration:none;display:inline-block;padding:.3rem 0}
.pied a:hover{color:var(--encre)}
.pied__marque{display:grid;gap:var(--s-2);align-content:start}
.pied__marque svg{height:1.6rem;width:auto;fill:var(--encre)}
.pied__bas{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:var(--s-5);padding-top:var(--s-3);border-top:1px solid var(--trait);font-family:var(--f-mono);font-size:var(--t-xs)}
@media (max-width:860px){.pied__grille{grid-template-columns:1fr 1fr}.pied__marque{grid-column:1 / -1}}

/* Apparitions (état de repos visible) */
.js .apparait{opacity:0;transform:translateY(18px);transition:opacity var(--m-long) var(--courbe),transform var(--m-long) var(--courbe)}
.js .apparait.vu{opacity:1;transform:none}

/* Intro du logo */
.intro{position:fixed;inset:0;z-index:90;display:none;place-items:center;cursor:pointer}
.intro-on .intro{display:grid}
.intro__fond{position:absolute;inset:0;background-color:var(--nuit);background-image:var(--grain)}
.intro__logo{position:relative;width:min(64vw,22rem);transform-origin:0 0}
.intro__logo svg{display:block;width:100%;height:auto;fill:var(--encre)}
.intro__masque{position:absolute;inset:-4% -1px;overflow:hidden}
.intro__cache{position:absolute;inset:0;background-color:var(--nuit);background-image:var(--grain);background-attachment:fixed}
.intro__fantome{position:absolute;inset:4% 1px}
.intro__fantome svg{opacity:.1}
.intro__passer{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;color:var(--encre-2);background:none;border:1px solid var(--trait);border-radius:999px;padding:.6rem 1rem;min-height:44px;cursor:pointer}

.rejouer-intro{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:95;font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.06em;background:var(--encre);color:#fff;border:0;border-radius:999px;padding:.7rem 1.1rem;min-height:44px;cursor:pointer;box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
@media (max-width:760px){.rejouer-intro{bottom:calc(5.4rem + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .apparait{opacity:1;transform:none}
  .intro{display:none!important}
}

/* =====================================================================
   ORAVY CRM : composants interactifs (tableau, rappel, calculateur, chiffres)
   Variables --k-* : s'adaptent au fond (clair par défaut, sarcelle dans .crm)
   ===================================================================== */
:root{
  --k-texte:var(--encre);--k-texte-2:var(--encre-2);--k-trait:var(--trait);--k-fond:rgba(21,75,76,.06);
  --k-alerte:var(--erreur);--k-accent:var(--menthe-texte);--k-on-bg:var(--encre);--k-on-fg:#fff;
  --c-bleu:#4aa3c7;--c-violet:#a78bfa;--c-orange:#ffb550;--c-rose:#f472b6;--c-vert:#34c98a;
}
.js .apparait.vu{transition-delay:calc(var(--i,0)*70ms)}

/* Bandeau de confiance */
.garanties{border-bottom:1px solid var(--trait)}
.garanties ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.garanties li{padding:var(--s-3) var(--s-3) var(--s-3) 0;border-right:1px solid var(--trait);display:grid;gap:.45rem;align-content:start}
.garanties li + li{padding-left:var(--s-3)}
.garanties li:last-child{border-right:0}
.garanties h3{font-size:1.05rem;text-transform:none;letter-spacing:-.01em;display:flex;align-items:center;gap:.6rem}
.garanties h3::before{content:"✓";flex:none;display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--menthe);color:#fff;font-family:var(--f-mono);font-size:.75rem;font-weight:600;transition:transform var(--m-moyen) var(--courbe),background var(--m-court)}
.garanties li:hover h3::before{transform:scale(1.18) rotate(-8deg);background:var(--orange);color:var(--encre)}
.garanties p{color:var(--encre-2);font-size:var(--t-s)}
@media (max-width:900px){.garanties ul{grid-template-columns:1fr 1fr}.garanties li:nth-child(2){border-right:0}.garanties li:nth-child(3){padding-left:0}.garanties li:nth-child(n+3){border-top:1px solid var(--trait)}}
@media (max-width:520px){.garanties ul{grid-template-columns:1fr}.garanties li,.garanties li + li{padding:var(--s-2) 0;border-right:0;border-top:1px solid var(--trait)}.garanties li:first-child{border-top:0}}

/* Lien vers le CRM dans le hero */
.hero__crm{display:inline-flex;align-items:center;gap:.5rem .7rem;flex-wrap:wrap;width:fit-content;max-width:100%;line-height:1.35;font-family:var(--f-mono);font-size:var(--t-s);text-decoration:none;color:var(--encre);border:1px solid var(--trait);border-radius:999px;padding:.5rem 1rem .5rem .6rem;background:color-mix(in srgb,#fff 60%,transparent);transition:border-color var(--m-court),transform var(--m-court) var(--courbe)}
.hero__crm:hover{border-color:var(--menthe);transform:translateY(-2px)}
.hero__crm i{font-style:normal;background:var(--menthe);color:#fff;border-radius:999px;padding:.12rem .55rem;font-size:var(--t-xs);letter-spacing:.08em}
.hero__crm .fl{transition:transform var(--m-court) var(--courbe)}
.hero__crm:hover .fl{transform:translateX(3px)}

/* Section CRM (sarcelle) */
.crm{background-color:var(--menthe);background-image:var(--grain);color:#fff;padding-block:var(--s-6);
  --k-texte:#fff;--k-texte-2:rgba(255,255,255,.78);--k-trait:rgba(255,255,255,.22);--k-fond:rgba(255,255,255,.07);
  --k-alerte:#ff9b8a;--k-accent:var(--orange);--k-on-bg:var(--orange);--k-on-fg:var(--encre)}
.crm h2{color:#fff}
.crm h2 em{font-style:normal;color:var(--orange)}
.crm .chapeau{max-width:50rem}
.crm .chapeau p{color:rgba(255,255,255,.82)}
.crm .chapeau p.tc{color:rgba(255,255,255,.7)}
.crm .tc b{color:var(--orange)}
.crm :focus-visible{outline-color:var(--orange)}
.crm .btn--menthe{background:var(--orange);color:var(--encre)}
.crm .btn--ligne{color:#fff;border-color:rgba(255,255,255,.45)}
.crm .btn--ligne:hover{border-color:#fff}
.crm .lien{color:var(--orange)}
.crm__pile{display:grid;gap:var(--s-5);margin-top:var(--s-5)}
.crm__sous{display:grid;gap:var(--s-2)}
.crm__sous h3{font-size:clamp(1.3rem,2.6vw,1.9rem);letter-spacing:-.025em;color:var(--k-texte);max-width:30ch}
.crm__sous > p{color:var(--k-texte-2);max-width:42rem}
.crm__cta{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);align-items:center;margin-top:var(--s-2)}

/* Chiffres */
.chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--k-trait)}
.chiffre{padding:var(--s-3) var(--s-3) var(--s-3) 0;border-right:1px solid var(--k-trait);display:grid;gap:.6rem;align-content:start}
.chiffre + .chiffre{padding-left:var(--s-3)}
.chiffre:last-child{border-right:0}
.chiffre b{display:block;font-family:var(--f-titre);font-weight:300;font-size:clamp(3rem,7vw,5.2rem);line-height:1;letter-spacing:-.03em;color:var(--k-accent);font-variant-numeric:tabular-nums}
.chiffre p{font-size:var(--t-s);color:var(--k-texte-2);max-width:20rem}
.source{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--k-texte-2);line-height:1.5;max-width:46rem}
@media (max-width:760px){.chiffres{grid-template-columns:1fr}.chiffre,.chiffre + .chiffre{padding:var(--s-2) 0;border-right:0;border-bottom:1px solid var(--k-trait)}}

/* Répartition des délais */
.repart{display:grid;gap:.9rem;margin-top:var(--s-4)}
.repart__barre{display:flex;height:1.1rem;border-radius:3px;overflow:hidden;background:var(--nuit-2)}
.repart__barre i{display:block;height:100%;width:calc(var(--w)*1%);background:var(--bg);transition:width 1.2s var(--courbe)}
.js .repart:not(.vu) .repart__barre i{width:0}
.repart__leg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-2)}
.repart__leg li{display:grid;gap:.15rem;font-size:var(--t-xs);color:var(--encre-2)}
.repart__leg b{font-family:var(--f-mono);font-size:1.3rem;font-weight:500;color:var(--encre)}
.repart__leg li::before{content:"";width:.7rem;height:.7rem;background:var(--bg);border-radius:2px;margin-bottom:.2rem}
@media (max-width:620px){.repart__leg{grid-template-columns:1fr 1fr}}

/* Tableau de prospects (démo) */
.tableau{display:grid;gap:var(--s-2)}
.tableau__resume{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--k-trait);border:1px solid var(--k-trait);border-radius:10px;overflow:hidden}
.tableau__resume > div{background:var(--k-fond);padding:.85rem 1.1rem;display:grid;gap:.1rem;min-width:0}
.crm .tableau__resume > div{background:color-mix(in srgb,var(--menthe) 88%,#fff)}
.tableau__resume small{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--k-texte-2)}
.tableau__resume b{font-family:var(--f-mono);font-size:clamp(1.15rem,2.6vw,1.8rem);font-weight:600;font-variant-numeric:tabular-nums;color:var(--k-texte);transition:color var(--m-moyen)}
.tableau__resume .retard.on b{color:var(--k-alerte)}
.tableau__resume .gagne b{color:var(--k-accent)}
.tableau__outils{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:space-between}
.tableau__outils .tc{color:var(--k-texte-2)}
.tableau__outils .btn{min-height:40px;padding:.4rem 1rem;font-size:var(--t-xs)}
.colonnes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.7rem;align-items:start}
.col{background:var(--k-fond);border:1px solid var(--k-trait);border-top:3px solid var(--c,var(--orange));border-radius:10px;padding:.6rem;min-height:16rem;display:grid;gap:.6rem;align-content:start;transition:background var(--m-court),outline-color var(--m-court)}
.col.cible{background:color-mix(in srgb,var(--c) 24%,transparent);outline:2px dashed var(--c);outline-offset:2px}
.tableau .col .col__t{display:flex;justify-content:space-between;align-items:center;gap:.4rem;font-family:var(--f-titre);font-size:.82rem;font-weight:600;text-transform:none;letter-spacing:0;line-height:1.2;color:var(--k-texte);padding:.1rem .15rem}
.col__t .n{font-style:normal;font-family:var(--f-mono);font-size:.7rem;min-width:1.4rem;height:1.4rem;display:grid;place-items:center;border-radius:999px;background:var(--k-trait);color:var(--k-texte)}
.cartes{display:grid;gap:.5rem;align-content:start;min-height:3.5rem}
.cartes.vide::after{content:"Déposez une carte ici";font-family:var(--f-mono);font-size:var(--t-xs);color:var(--k-texte-2);border:1.5px dashed var(--k-trait);border-radius:8px;padding:1.2rem .6rem;text-align:center;line-height:1.4}
.carte{position:relative;background:#fff;color:var(--encre);border-radius:8px;padding:.65rem .7rem .55rem;display:grid;gap:.25rem;font-size:var(--t-s);box-shadow:0 1px 0 rgba(0,0,0,.06),0 10px 20px -14px rgba(0,0,0,.45);cursor:grab;user-select:none;-webkit-user-select:none;transition:box-shadow var(--m-court),transform var(--m-court) var(--courbe)}
.carte:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(0,0,0,.06),0 16px 26px -14px rgba(0,0,0,.5)}
.carte b{font-size:.9rem;line-height:1.2;font-weight:600}
.carte__co{color:var(--encre-2);font-size:var(--t-xs);line-height:1.3}
.carte__bas{display:flex;justify-content:space-between;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.1rem}
.puce{font-size:.68rem;font-weight:600;padding:.1rem .5rem;border-radius:999px;line-height:1.5}
.puce--chaud{background:#ffe3df;color:#a3271a}
.puce--tiede{background:#fff0d4;color:#835400}
.puce--froid{background:#e1ecf7;color:#1f4f82}
.carte__val{font-family:var(--f-mono);font-size:var(--t-xs);font-weight:600;font-variant-numeric:tabular-nums}
.carte__date{font-family:var(--f-mono);font-size:.7rem;color:var(--encre-2);line-height:1.3}
.carte.retard{box-shadow:inset 3px 0 0 var(--erreur),0 10px 20px -14px rgba(0,0,0,.45)}
.carte.retard .carte__date{color:var(--erreur);font-weight:600}
.carte.retard .carte__date::before{content:"⚠ "}
.carte.gagne{box-shadow:inset 3px 0 0 #1f9d63,0 10px 20px -14px rgba(0,0,0,.45)}
.carte.gagne .carte__date{color:#1f7a50;font-weight:600}
.carte.prise{cursor:grabbing;z-index:20;pointer-events:none;transition:none;box-shadow:0 26px 44px -14px rgba(0,0,0,.6)}
.carte__nav{display:flex;gap:.3rem;justify-content:flex-end;margin-top:.15rem}
.carte__nav button{font:inherit;font-size:.85rem;line-height:1;min-width:34px;min-height:30px;padding:0 .5rem;border-radius:6px;border:1px solid var(--trait);background:#fff;color:var(--encre);cursor:pointer;transition:background var(--m-court),color var(--m-court),border-color var(--m-court)}
.carte__nav button:hover{background:var(--menthe);color:#fff;border-color:var(--menthe)}
.carte__nav button:focus-visible{outline:3px solid var(--menthe)}
@media (hover:hover) and (pointer:fine){.carte__nav{position:absolute;right:.4rem;top:.4rem;margin:0;opacity:0;transition:opacity var(--m-court);background:#fff;border-radius:8px;padding-left:.3rem}.carte:hover .carte__nav,.carte:focus-within .carte__nav{opacity:1}}
@media (pointer:coarse){.carte__nav button{min-width:44px;min-height:44px}}
.sceau{position:absolute;right:.5rem;top:.45rem;border:2px solid #1f9d63;color:#1f9d63;font-family:var(--f-mono);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.1rem .4rem;border-radius:4px;background:rgba(255,255,255,.92);pointer-events:none;animation:sceau 1.6s var(--courbe) forwards}
@keyframes sceau{0%{opacity:0;transform:rotate(-12deg) scale(2)}18%{opacity:1;transform:rotate(-9deg) scale(1)}80%{opacity:1}100%{opacity:0;transform:rotate(-9deg) scale(1)}}
@media (max-width:1040px){
  .colonnes{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(15rem,72%);overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:.7rem;margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px));-webkit-overflow-scrolling:touch}
  .col{scroll-snap-align:start}
}
@media (max-width:560px){.tableau__resume{grid-template-columns:1fr 1fr}.tableau__resume .retard{grid-column:1 / -1}}

/* Le rappel oublié */
.rappel{display:grid;gap:var(--s-3)}
.rappel__bascule{display:inline-flex;border:1px solid var(--k-trait);border-radius:999px;padding:3px;width:max-content;max-width:100%}
.rappel__bascule button{font-family:var(--f-mono);font-size:var(--t-s);padding:.5rem 1.05rem;min-height:44px;border:0;background:none;color:var(--k-texte-2);border-radius:999px;cursor:pointer;transition:background var(--m-court),color var(--m-court)}
.rappel__bascule button:hover{color:var(--k-texte)}
.rappel__bascule button[aria-pressed="true"]{background:var(--k-on-bg);color:var(--k-on-fg)}
.rappel__etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.etape{position:relative;padding-right:1rem}
.etape::before{content:"";position:absolute;top:.55rem;left:1.1rem;right:0;height:2px;background:var(--k-trait);transition:background var(--m-moyen)}
.etape:last-child::before{display:none}
.etape.fait::before{background:var(--k-accent)}
.etape button{all:unset;box-sizing:border-box;display:grid;gap:.4rem;cursor:pointer;width:100%;padding-bottom:.4rem;position:relative;z-index:1}
.etape button:focus-visible{outline:3px solid var(--k-accent);outline-offset:4px;border-radius:4px}
.etape .pt{display:block;width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid var(--k-trait);background:var(--nuit);transition:background var(--m-moyen),border-color var(--m-moyen),transform var(--m-moyen) var(--courbe)}
.crm .etape .pt{background:var(--menthe)}
.etape.fait .pt{background:var(--k-accent);border-color:var(--k-accent);transform:scale(1.12)}
.etape.alerte .pt{background:#ff5a45;border-color:#ff5a45;animation:pouls 1.4s ease-out infinite}
.etape.perdu .pt{background:#ff5a45;border-color:#ff5a45}
@keyframes pouls{0%{box-shadow:0 0 0 0 rgba(255,90,69,.6)}100%{box-shadow:0 0 0 .9rem rgba(255,90,69,0)}}
.etape .t{font-size:.95rem;font-weight:600;line-height:1.25;color:var(--k-texte);margin-top:.3rem}
.etape .d{font-size:var(--t-xs);line-height:1.5;color:var(--k-texte-2)}
.js .etape:not(.fait) .t,.js .etape:not(.fait) .d{opacity:.38}
.etape .t,.etape .d{transition:opacity var(--m-moyen),color var(--m-moyen)}
.etape.alerte .t,.etape.perdu .t{color:var(--k-alerte)}
.rappel__fin{border-left:3px solid var(--k-accent);padding:.15rem 0 .15rem 1rem;color:var(--k-texte);max-width:46rem;font-weight:500;min-height:3.2rem;transition:opacity var(--m-moyen),border-color var(--m-moyen)}
.rappel__fin.perdu{border-color:#ff5a45}
.js .rappel__fin.attente{opacity:.35}
@media (max-width:820px){
  .rappel__etapes{grid-template-columns:1fr}
  .etape{padding:0 0 1rem 2rem}
  .etape::before{top:1.2rem;bottom:0;left:.5rem;right:auto;width:2px;height:auto}
  .etape button{position:static}
  .etape .pt{position:absolute;left:0;top:.1rem}
  .etape .t{margin-top:0}
}

/* Calculateur */
.calc{display:grid;gap:var(--s-3)}
.calc__ligne{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;gap:.5rem 1rem;padding:1.1rem 0;border-top:1px solid var(--trait);align-items:center}
.calc__ligne:last-of-type{border-bottom:1px solid var(--trait)}
.calc__lettre{font-size:1.6rem;font-weight:300;line-height:1}
.calc__ligne label{font-weight:600;display:block}
.calc__ligne small{display:block;color:var(--encre-2);font-size:var(--t-xs);margin-top:.15rem}
.calc__champ{display:inline-flex;align-items:baseline;gap:.4rem;font-family:var(--f-mono);font-size:var(--t-s);color:var(--encre-2)}
.calc__champ input{font:inherit;font-size:1.3rem;font-weight:600;color:var(--encre);width:6.5rem;text-align:right;border:0;border-bottom:2px solid var(--encre);background:transparent;padding:.2rem 0;min-height:44px;border-radius:0}
.calc__champ input:focus{outline:none;border-bottom-color:var(--menthe);box-shadow:0 2px 0 var(--menthe)}
.calc__champ input::-webkit-outer-spin-button,.calc__champ input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc__champ input[type=number]{-moz-appearance:textfield}
.calc__ligne input[type=range]{grid-column:2 / -1;width:100%;accent-color:var(--menthe);height:28px;cursor:pointer}
.calc__res{display:grid;grid-template-columns:1fr 1fr;border-radius:10px;overflow:hidden;border:1px solid var(--encre)}
.calc__d,.calc__p{padding:var(--s-3);display:grid;gap:.5rem;align-content:space-between;min-height:9rem}
.calc__d{background:#fff}
.calc__p{background:var(--menthe);color:#fff}
.calc__res small{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase}
.calc__p small{color:var(--orange)}
.calc__res b{font-family:var(--f-mono);font-size:clamp(1.9rem,5vw,3.2rem);line-height:1;font-weight:600;font-variant-numeric:tabular-nums}
.calc__p b{color:var(--orange)}
.calc__note{font-size:var(--t-xs);color:var(--encre-2);max-width:46rem;line-height:1.55}
@media (max-width:620px){.calc__res{grid-template-columns:1fr}.calc__ligne{grid-template-columns:1.6rem minmax(0,1fr)}.calc__champ{grid-column:2}}

/* Fenêtre du logiciel */
.fenetre{border-radius:12px;overflow:hidden;border:1px solid var(--trait);background:#fff;box-shadow:0 34px 60px -36px rgba(24,25,27,.55);transition:transform .25s ease-out;will-change:transform}
.fenetre__barre{display:flex;align-items:center;gap:.9rem;padding:.55rem .8rem;background:#e7ecea;border-bottom:1px solid var(--trait);flex-wrap:wrap}
.fenetre__pts{display:flex;gap:.35rem}
.fenetre__pts i{width:.65rem;height:.65rem;border-radius:50%;background:#c3c9c6}
.fenetre__onglets{display:flex;gap:.3rem;flex-wrap:wrap}
.fenetre__onglets button{font-family:var(--f-mono);font-size:var(--t-xs);min-height:36px;padding:.3rem .8rem;border-radius:6px;border:0;background:transparent;color:var(--encre-2);cursor:pointer}
.fenetre__onglets button[aria-selected="true"]{background:#fff;color:var(--encre);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.fenetre__vues{display:grid;background:#fff}
.fenetre__vues img{display:none;width:100%;height:auto}
.fenetre__vues img.on{display:block;animation:fondu .45s ease}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.fenetre + .source{margin-top:.8rem;color:var(--encre-2)}

/* Modules, atouts, contrôle, formules */
.modules{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 var(--s-3);margin-top:var(--s-4)}
.module{border-top:2px solid var(--encre);padding-top:.9rem;display:grid;gap:.4rem;align-content:start;transition:border-color var(--m-court)}
.module:hover{border-color:var(--orange)}
.module h3{font-size:1.1rem;text-transform:none}
.module p{font-size:var(--t-s);color:var(--encre-2)}
@media (max-width:900px){.modules{grid-template-columns:1fr 1fr;gap:var(--s-3)}}
@media (max-width:520px){.modules{grid-template-columns:1fr}}
.atouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3) var(--s-4);margin-top:var(--s-4)}
.atout{border-top:1px solid var(--encre);padding-top:.9rem;display:grid;gap:.35rem;align-content:start}
.atout h3{font-size:1.05rem;text-transform:none}
.atout p{font-size:var(--t-s);color:var(--encre-2)}
@media (max-width:860px){.atouts{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.atouts{grid-template-columns:1fr}}
.controle{list-style:none;margin:var(--s-4) 0 0;padding:0;counter-reset:ctl;border-top:1px solid var(--encre)}
.controle li{counter-increment:ctl;display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:.2rem 1rem;padding:1.15rem 0;border-bottom:1px solid var(--trait);transition:background var(--m-court),padding var(--m-moyen) var(--courbe)}
.controle li::before{content:counter(ctl);font-size:2rem;font-weight:300;line-height:1;color:var(--encre-2);transition:color var(--m-court)}
.controle li:hover{padding-left:.6rem}
.controle li:hover::before{color:var(--menthe-texte)}
.controle b{display:block;font-size:1.1rem;font-weight:600}
.controle span{grid-column:2;color:var(--encre-2);font-size:var(--t-s);max-width:44rem}
.formules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2);margin-top:var(--s-4)}
.formule{background:#fff;border:1px solid var(--trait);border-radius:10px;padding:var(--s-3);display:grid;gap:.5rem;align-content:start;transition:transform var(--m-moyen) var(--courbe),box-shadow var(--m-moyen)}
.formule:hover{transform:translateY(-6px);box-shadow:0 24px 40px -26px rgba(24,25,27,.5)}
.formule small{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--menthe-texte)}
.formule strong{font-family:var(--f-mono);font-size:var(--t-s)}
.formule p{font-size:var(--t-s);color:var(--encre-2)}
.formule--pro{background:var(--menthe);border-color:var(--menthe);color:#fff}
.formule--pro small{color:var(--orange)}
.formule--pro p{color:rgba(255,255,255,.85)}
@media (max-width:860px){.formules{grid-template-columns:1fr}}
.encadre{background:var(--nuit-2);border:1px solid var(--trait);border-radius:10px;padding:var(--s-3);display:grid;gap:.5rem;max-width:46rem}
.encadre b{font-size:1.1rem}
.encadre p{color:var(--encre-2);font-size:var(--t-s)}
.section-crm-tete{display:grid;gap:var(--s-2)}
.tete-page--large h1{max-width:20ch}
.bloc-crm{border-bottom:1px solid var(--trait)}

@media (prefers-reduced-motion:reduce){
  .etape.alerte .pt{animation:none}
  .sceau{animation:none;opacity:0}
  .fenetre{transform:none!important}
}

/* =====================================================================
   Typographie premium : Hanken Grotesk (la police du livret Oravy CRM)
   Titres légers en phrases, étiquettes espacées, chiffres en poids léger.
   Le papier thermique (reçus, tickets) garde sa police à chasse fixe.
   ===================================================================== */
body{font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant-numeric:tabular-nums lining-nums}
.tc{font-family:var(--f-titre);font-size:.72rem;font-weight:500;letter-spacing:.16em}
.tc b{font-weight:700}
.btn{font-family:var(--f-titre);font-size:.98rem;font-weight:500;letter-spacing:-.005em}
.nav a{font-weight:450}
.lede{font-weight:400;line-height:1.55}
.hero h1,.tete-page h1,.final h2{letter-spacing:-.05em;line-height:1}
.hero h1 em,.surligne{font-weight:500}
.entete__tel,.hero__appel,.lignes-directes a span{font-family:var(--f-titre);letter-spacing:-.01em}
.lignes-directes a b{font-weight:500;letter-spacing:-.02em}
.lignes-directes a span{font-weight:400}
.service__prix strong{font-family:var(--f-titre);font-weight:300;letter-spacing:-.03em;font-size:clamp(1.7rem,3vw,2.4rem)}
.service__prix .par,.service__prix small{font-family:var(--f-titre)}
.service__corps h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.service__quand b,.pied h2,.fiche,.pied__bas,.progression{font-family:var(--f-titre)}
.formulaire{font-family:var(--f-titre)}
.formulaire legend{letter-spacing:.14em;font-weight:600}
.chiffre b{font-weight:200;letter-spacing:-.045em}
.tableau__resume b,.calc__res b{font-family:var(--f-titre);font-weight:300;letter-spacing:-.04em}
.tableau__resume b{font-weight:400;font-size:clamp(1.4rem,3vw,2.2rem)}
.calc__res b{font-size:clamp(2.4rem,6vw,4rem)}
.calc__champ input{font-family:var(--f-titre);font-weight:500}
.carte b{font-weight:600}
.faq summary{font-weight:500;letter-spacing:-.015em;font-size:1.15rem}
.controle li::before{font-weight:200}
.calc__lettre{font-weight:200}
.garanties h3,.module h3,.atout h3{font-weight:600;letter-spacing:-.02em}
.crm__sous h3{font-weight:400;letter-spacing:-.035em;font-size:clamp(1.5rem,3vw,2.2rem)}
.pied__marque p,.pied li,.pied a{font-weight:400}
.marque{letter-spacing:normal}

/* Pages de texte (confidentialité) */
.prose{max-width:46rem;display:grid;gap:var(--s-2);padding-block:var(--s-5) var(--s-6)}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-top:var(--s-4);letter-spacing:-.03em}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--encre-2)}
.prose ul{margin:0;padding-left:1.2rem;display:grid;gap:.4rem}
.prose a{color:var(--menthe-texte);text-underline-offset:.2em}
.prose .maj{font-size:var(--t-s);color:var(--encre-2);border-top:1px solid var(--trait);padding-top:var(--s-2);margin-top:var(--s-4)}
.consentement{font-size:var(--t-xs);color:var(--encre-papier-2);line-height:1.5;max-width:34rem}
.consentement a{color:var(--menthe-papier)}
.pied__bas a{text-decoration:underline;text-underline-offset:.2em}

/* =====================================================================
   MOTION : « L'histoire d'un client sauvé » (animation de 30 s, Oravy CRM)
   Toile fixe de 1000 x 720 px, mise à l'échelle par JS. Sans JS : la liste des étapes reste lisible.
   ===================================================================== */
.motion{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--s-3) var(--s-4);align-items:start}
@media (max-width:900px){.motion{grid-template-columns:1fr}}
.motion__video{display:grid;gap:.8rem;min-width:0}
.motion__stage{display:none;position:relative;aspect-ratio:1000/720;border-radius:14px;overflow:hidden;background:#0f3839;box-shadow:0 40px 70px -42px rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.14);isolation:isolate}
.js .motion__stage{display:block}
.motion__canvas{position:absolute;left:0;top:0;width:1000px;height:720px;transform-origin:0 0;font-family:var(--f-titre);color:#1b1c1e;line-height:1.3;
  background:radial-gradient(120% 95% at 12% 0%,#1f6b6d 0%,#154b4c 50%,#0e3637 100%);overflow:hidden;font-variant-numeric:tabular-nums}
.motion__canvas::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.5;pointer-events:none}
.m-scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .55s}
.m-scene.act{visibility:visible;transition:opacity .5s ease}
.m-scene.on{opacity:1}
.m-scene > *{position:absolute}

/* Barre de contrôle */
.motion__ctrl{display:flex;align-items:center;gap:.7rem}
.js .motion__ctrl{display:flex}
.motion__ctrl{display:none}
.js .motion__ctrl{display:flex}
.m-btn{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--k-trait);background:transparent;color:var(--k-texte);cursor:pointer;display:grid;place-items:center;transition:background var(--m-court),transform var(--m-court) var(--courbe)}
.m-btn:hover{background:var(--k-fond);transform:scale(1.06)}
.m-btn svg{width:16px;height:16px;fill:currentColor}
.m-btn .i-play{display:none}
.motion.est-pause .m-btn[data-m="play"] .i-play{display:block}
.motion.est-pause .m-btn[data-m="play"] .i-pause{display:none}
.m-prog{flex:1;display:grid;grid-template-columns:repeat(6,1fr);gap:4px;min-width:0}
.m-seg{all:unset;box-sizing:border-box;height:22px;cursor:pointer;display:flex;align-items:center}
.m-seg i{display:block;width:100%;height:4px;border-radius:2px;background:var(--k-trait);position:relative;overflow:hidden}
.m-seg i::after{content:"";position:absolute;inset:0;background:var(--k-accent);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.m-seg:focus-visible{outline:3px solid var(--k-accent);outline-offset:2px;border-radius:3px}
.m-temps{flex:none;font-family:var(--f-titre);font-size:var(--t-xs);color:var(--k-texte-2);letter-spacing:.04em;min-width:5.6em;text-align:right}

/* Liste des étapes */
.motion__cote{display:grid;gap:var(--s-3);min-width:0}
.motion__chap{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--k-trait)}
.motion__chap li{border-bottom:1px solid var(--k-trait)}
.motion__chap button{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:2.4rem 1fr;gap:.1rem .6rem;padding:.85rem 0;cursor:pointer;transition:padding var(--m-moyen) var(--courbe)}
.motion__chap button:focus-visible{outline:3px solid var(--k-accent);outline-offset:2px;border-radius:4px}
.motion__chap .num{font-family:var(--f-titre);font-size:var(--t-xs);font-weight:600;letter-spacing:.14em;color:var(--k-texte-2);padding-top:.25rem;transition:color var(--m-court)}
.motion__chap b{font-size:1.02rem;font-weight:600;letter-spacing:-.015em;color:var(--k-texte)}
.motion__chap .txt{grid-column:2;font-size:var(--t-s);color:var(--k-texte-2);line-height:1.5}
.js .motion__chap li:not(.actif) .txt{display:none}
.js .motion__chap li:not(.actif) b{color:var(--k-texte-2);font-weight:500}
.motion__chap li.actif button{padding-left:.4rem}
.motion__chap li.actif .num{color:var(--k-accent)}
.motion__chap button:hover b{color:var(--k-texte)}
.motion__note{font-size:var(--t-xs);color:var(--k-texte-2);max-width:30rem;line-height:1.5}
@media (max-width:900px){.motion__chap li:not(.actif) .txt{display:none}}

/* ---------- Éléments communs de la toile ---------- */
.m-in{opacity:0}
.m-scene.act .m-in{animation:m-haut .8s var(--courbe) both;animation-delay:var(--d,0s)}
.m-scene.act .m-gauche{animation:m-gauche .8s var(--courbe) both;animation-delay:var(--d,0s)}
.m-scene.act .m-pop{animation:m-pop .6s var(--courbe) both;animation-delay:var(--d,0s)}
.m-scene.act .m-tombe{animation:m-tombe .7s var(--courbe) both;animation-delay:var(--d,0s)}
.m-scene.act .m-droite{animation:m-droite .8s var(--courbe) both;animation-delay:var(--d,0s)}
@keyframes m-haut{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes m-gauche{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes m-droite{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
@keyframes m-pop{0%{opacity:0;transform:scale(.7)}70%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes m-tombe{from{opacity:0;transform:translateY(-140%)}to{opacity:1;transform:none}}
@keyframes m-pouls{0%,100%{box-shadow:0 0 0 0 rgba(255,90,69,.55)}50%{box-shadow:0 0 0 18px rgba(255,90,69,0)}}
@keyframes m-secoue{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes m-onde{0%{opacity:.7;transform:scale(.4)}100%{opacity:0;transform:scale(1.6)}}
@keyframes m-grise{to{filter:grayscale(1);opacity:.35}}
@keyframes m-fondu{from{opacity:0}to{opacity:1}}
@keyframes m-sort{to{opacity:0}}
.motion.est-pause .m-scene *,.motion.est-pause .m-scene *::before,.motion.est-pause .m-scene *::after{animation-play-state:paused!important}
.m-etiq{font-size:22px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#ffb550}
.m-fen{left:90px;top:70px;width:820px;height:580px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.m-fen__bar{height:54px;background:#1b1c1e;color:#fff;display:flex;align-items:center;gap:14px;padding:0 24px;font-size:20px;font-weight:700;letter-spacing:.02em}
.m-fen__bar em{font-style:normal;color:#ffb550}
.m-fen__bar span{margin-left:auto;font-size:15px;font-weight:500;color:rgba(255,255,255,.65);letter-spacing:.04em}
.m-fen__corps{position:absolute;left:0;right:0;top:54px;bottom:0;padding:26px 28px;background:#f4f6f5}
.m-puce{display:inline-block;font-size:14px;font-weight:700;padding:3px 12px;border-radius:99px;line-height:1.6}
.m-puce--fb{background:#e1ecf7;color:#1f4f82}
.m-puce--chaud{background:#ffe3df;color:#a3271a}
.m-puce--vert{background:#dff3e7;color:#17714a}
.m-puce--rose{background:#fde1ee;color:#a1245f}
.m-puce--rouge{background:#d93b2a;color:#fff}

/* ---------- Scène 1 : la demande arrive ---------- */
.m-s1-gros{left:70px;top:235px}
.m-s1-gros span{display:block}
.m-s1-gros b{display:block;font-size:150px;font-weight:200;letter-spacing:-.05em;line-height:1;color:#fff;margin-top:6px}
.m-s1-gros p{font-size:30px;color:rgba(255,255,255,.8);margin-top:18px;letter-spacing:-.01em;max-width:380px}
.m-tel{left:560px;top:55px;width:330px;height:610px;border-radius:52px;background:#0a1112;padding:13px;box-shadow:0 50px 80px -30px rgba(0,0,0,.7),inset 0 0 0 2px #26383a}
.m-tel__ecran{position:relative;width:100%;height:100%;border-radius:40px;background:linear-gradient(#e9efee,#d9e2e0);overflow:hidden}
.m-tel__ilot{position:absolute;left:50%;top:12px;width:96px;height:26px;border-radius:99px;background:#0a1112;transform:translateX(-50%)}
.m-tel__heure{position:absolute;left:0;right:0;top:70px;text-align:center;font-size:62px;font-weight:300;color:#1b1c1e;letter-spacing:-.03em}
.m-tel__heure small{display:block;font-size:18px;font-weight:500;letter-spacing:.02em;color:#5d6065}
.m-notif{position:absolute;left:14px;right:14px;top:210px;background:#fff;border-radius:22px;padding:18px 18px 16px;box-shadow:0 20px 40px -18px rgba(0,0,0,.45);display:grid;gap:6px}
.m-notif__tete{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:.14em;color:#b86a00;text-transform:uppercase}
.m-notif__tete i{width:9px;height:9px;border-radius:50%;background:#ffb550;box-shadow:0 0 0 0 rgba(255,181,80,.7);animation:m-pouls 1.3s infinite}
.m-notif b{font-size:22px;letter-spacing:-.02em}
.m-notif .co{font-size:15px;color:#5d6065}
.m-notif p{font-size:15.5px;color:#2b2e31;line-height:1.4;margin-top:4px}
.m-notif .m-puce{justify-self:start;margin-top:6px}
.m-tel__ombre{position:absolute;left:30px;right:30px;border-radius:18px;background:rgba(255,255,255,.55);height:70px}
.m-onde{left:600px;top:200px;width:250px;height:250px;border-radius:50%;border:3px solid #ffb550;opacity:0}
.m-scene.act .m-onde{animation:m-onde 1.6s ease-out 1s 2 both}

/* ---------- Scène 2 : la fiche se crée seule ---------- */
.m-fiche{display:grid;grid-template-columns:1fr 250px;gap:22px;height:100%}
.m-fiche__carte{background:#fff;border-radius:14px;padding:22px 24px;box-shadow:0 1px 0 rgba(0,0,0,.05),0 14px 30px -22px rgba(0,0,0,.5);display:grid;gap:14px;align-content:start}
.m-fiche__id{display:flex;gap:16px;align-items:center}
.m-avatar{width:64px;height:64px;border-radius:50%;background:#154b4c;color:#fff;display:grid;place-items:center;font-size:24px;font-weight:600;letter-spacing:.02em;flex:none}
.m-fiche__id b{display:block;font-size:27px;letter-spacing:-.025em;line-height:1.1}
.m-fiche__id span{color:#5d6065;font-size:16px}
.m-ligne{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:center;font-size:16px;padding:10px 12px;border-radius:10px;background:#f4f6f5}
.m-ligne small{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6b6e73}
.m-ligne b{font-weight:600}
.m-ligne--act{background:#fff1d9;box-shadow:inset 3px 0 0 #ffb550}
.m-coche{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#1f9d63;color:#fff;font-size:13px;margin-left:8px;vertical-align:middle}
.m-histo{background:#fff;border-radius:14px;padding:20px 18px;box-shadow:0 14px 30px -22px rgba(0,0,0,.5);display:grid;gap:14px;align-content:start}
.m-histo h4{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6b6e73}
.m-evt{display:grid;grid-template-columns:14px 1fr;gap:10px;font-size:14.5px;line-height:1.35}
.m-evt i{width:10px;height:10px;border-radius:50%;background:#154b4c;margin-top:5px}
.m-evt small{display:block;color:#6b6e73;font-size:12px}

/* ---------- Scène 3 : la journée déborde ---------- */
.m-cal{left:70px;top:60px;width:540px;height:600px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.m-cal__tete{height:56px;background:#f4f6f5;border-bottom:1px solid #dfe4e2;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:20px;font-weight:700;letter-spacing:-.01em}
.m-cal__tete span{font-size:14px;font-weight:600;color:#6b6e73;letter-spacing:.1em;text-transform:uppercase}
.m-heures{position:absolute;left:0;top:56px;width:70px}
.m-heures div{height:64px;font-size:13px;color:#8a8e93;text-align:left;padding:6px 0 0 16px;border-top:1px solid #eef1ef;box-sizing:border-box;width:540px}
.m-bloc{position:absolute;left:84px;right:16px;border-radius:10px;padding:8px 14px;font-size:16px;font-weight:600;line-height:1.25;overflow:hidden}
.m-bloc small{display:block;font-size:12.5px;font-weight:500;opacity:.8}
.m-bloc--reu{top:60px;height:58px;background:#e1ecf7;color:#1f4f82}
.m-bloc--rappel{top:186px;height:34px;background:#ffb550;color:#1b1c1e;z-index:2;box-shadow:0 0 0 0 rgba(255,181,80,.8);padding:5px 14px}
.m-bloc--urg{top:152px;height:176px;background:#ffd9d3;color:#a3271a;z-index:3;border:2px solid #f0a89d}
.m-bloc--sou{top:376px;height:118px;background:#ece7da;color:#5b4a1d}
.m-scene.act .m-bloc--rappel{animation:m-haut .7s var(--courbe) .5s both,m-pouls 1.2s ease-out 1.1s 1}
.m-scene.act .m-bloc--rappel.m-oublie{animation:m-haut .7s var(--courbe) .5s both,m-grise .8s ease 3.1s forwards}
.m-cote{left:650px;top:90px;width:290px;display:grid;gap:16px}
.m-cote > div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:18px 20px;color:#fff;backdrop-filter:blur(2px)}
.m-cote small{display:block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.m-cote b{display:block;font-size:64px;font-weight:200;letter-spacing:-.04em;line-height:1.05}
.m-cote .m-rouge b{color:#ff9b8a}
.m-etiqrouge{left:650px;top:430px;background:#d93b2a;color:#fff;padding:12px 22px;border-radius:99px;font-size:20px;font-weight:700;letter-spacing:-.005em;box-shadow:0 20px 30px -16px rgba(0,0,0,.6)}

/* ---------- Scène 4 : le CRM le signale ---------- */
.m-jour{right:60px;top:20px;font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ffb550}
.m-alerte{left:0;right:0;top:0;height:92px;background:linear-gradient(90deg,#d93b2a,#ef5a3f);color:#fff;display:flex;align-items:center;gap:20px;padding:0 28px;z-index:3;box-shadow:0 18px 30px -14px rgba(217,59,42,.6)}
.m-alerte i{font-style:normal;font-size:38px}
.m-alerte b{display:block;font-size:26px;letter-spacing:-.02em}
.m-alerte span{font-size:16px;opacity:.92}
.m-scene.act .m-alerte{animation:m-tombe .7s var(--courbe) .3s both,m-secoue .6s ease 1.1s 1}
.m-kpis{position:absolute;left:28px;right:28px;top:122px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.m-kpi{background:#fff;border-radius:12px;padding:12px 16px;box-shadow:0 12px 26px -20px rgba(0,0,0,.5)}
.m-kpi small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6b6e73}
.m-kpi b{font-size:30px;font-weight:300;letter-spacing:-.03em}
.m-kpi--rouge b{color:#c8321f;font-weight:500}
.m-cartelarge{position:absolute;left:28px;right:28px;top:262px;background:#fff;border-radius:14px;padding:18px 22px;display:flex;align-items:center;gap:18px;border:2px solid #d93b2a}
.m-scene.act .m-cartelarge{animation:m-haut .7s var(--courbe) 1.2s both,m-pouls 1.3s ease-out 2s 3}
.m-cartelarge b{font-size:22px;letter-spacing:-.02em;display:block}
.m-cartelarge span.s{color:#5d6065;font-size:15px}
.m-cartelarge .m-puce{margin-left:auto}
.m-fantome-l{position:absolute;left:28px;right:28px;height:74px;border-radius:14px;background:rgba(0,0,0,.05)}

/* ---------- Scène 5 : la soumission part ---------- */
.m-doc{right:56px;top:150px;width:410px;background:#fff;border-radius:6px;padding:24px 26px 22px;box-shadow:0 40px 70px -30px rgba(0,0,0,.65);display:grid;gap:8px;font-size:15px;z-index:2}
.m-doc__tete{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #1b1c1e;padding-bottom:10px;margin-bottom:4px}
.m-doc__tete b{font-size:20px;letter-spacing:-.02em}
.m-doc__tete span{font-size:12px;font-weight:700;letter-spacing:.14em;color:#6b6e73}
.m-doc__l{display:flex;justify-content:space-between;gap:12px;padding:3px 0;color:#2b2e31}
.m-doc__l span:last-child{font-variant-numeric:tabular-nums;font-weight:500}
.m-doc__l--tot{border-top:2px solid #1b1c1e;margin-top:6px;padding-top:10px;font-size:20px;font-weight:700;color:#1b1c1e}
.m-doc__btn{margin-top:12px;position:relative;display:grid;place-items:center;height:48px;border-radius:99px;background:#154b4c;color:#fff;font-weight:600;font-size:16px;overflow:hidden}
.m-doc__btn span{grid-area:1/1;transition:none}
.m-doc__btn .ok{opacity:0;background:#1f9d63;width:100%;height:100%;display:grid;place-items:center}
.m-scene.act .m-doc__btn .ok{animation:m-fondu .3s ease 3.1s both}
.m-gauche-fiche{left:56px;top:150px;width:430px;background:#fff;border-radius:14px;padding:22px 24px;display:grid;gap:14px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.m-statut{position:relative;height:30px}
.m-statut .m-puce{position:absolute;left:0;top:0}
.m-scene.act .m-statut .a{animation:m-sort .3s ease 3.2s forwards}
.m-scene.act .m-statut .b{opacity:0;animation:m-fondu .4s ease 3.3s forwards}
.m-curseur{left:540px;top:640px;width:34px;height:34px;z-index:5;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));opacity:0}
.m-scene.act .m-curseur{animation:m-curs 2.3s ease-in-out 1.0s forwards}
@keyframes m-curs{0%{opacity:0;transform:translate(0,0)}10%{opacity:1}70%{opacity:1;transform:translate(256px,-225px)}78%{transform:translate(256px,-225px) scale(.82)}86%{transform:translate(256px,-225px) scale(1)}100%{opacity:0;transform:translate(256px,-225px)}}
.m-toast{left:56px;bottom:70px;background:#1b1c1e;color:#fff;padding:14px 22px;border-radius:14px;font-size:17px;font-weight:600;display:flex;gap:12px;align-items:center;box-shadow:0 24px 40px -18px rgba(0,0,0,.7);z-index:4}
.m-toast i{font-style:normal;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#1f9d63;font-size:14px}

/* ---------- Scène 6 : un client sauvé ---------- */
.m-cols{left:36px;right:36px;top:300px;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;height:320px}
.m-col{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-top:4px solid var(--c);border-radius:12px;padding:12px;color:#fff;font-size:15px;font-weight:600;position:relative}
.m-col small{display:block;font-size:12px;color:rgba(255,255,255,.65);font-weight:500;margin-top:2px}
.m-col--gagne{box-shadow:0 0 0 0 rgba(52,201,138,.6)}
.m-scene.act .m-col--gagne{animation:m-pouls2 1.4s ease-out 1.7s 2}
@keyframes m-pouls2{0%{box-shadow:0 0 0 0 rgba(52,201,138,.7)}100%{box-shadow:0 0 0 24px rgba(52,201,138,0)}}
.m-voyage{left:0;top:363px;width:calc((100% - 72px - 48px)/5);margin-left:36px;background:#fff;border-radius:10px;padding:12px 14px;font-size:15px;box-shadow:0 20px 34px -16px rgba(0,0,0,.6);z-index:3;display:grid;gap:4px}
.m-voyage b{font-size:16px;letter-spacing:-.015em}
.m-voyage span{color:#5d6065;font-size:13px}
.m-scene.act .m-voyage{animation:m-voyage 1.1s var(--courbe) .7s both}
@keyframes m-voyage{from{transform:translateX(calc(100% * 3 + 36px))}to{transform:translateX(calc(100% * 4 + 48px))}}
.m-gros-chiffre{left:70px;top:70px;color:#fff}
.m-gros-chiffre small{display:block;font-size:20px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#ffb550}
.m-gros-chiffre b{display:block;font-size:120px;font-weight:200;letter-spacing:-.05em;line-height:1.05}
.m-tampon{right:60px;top:80px;border:7px solid #34c98a;color:#34c98a;font-size:58px;font-weight:800;letter-spacing:.06em;padding:8px 26px;border-radius:12px;transform:rotate(-9deg);text-transform:uppercase;background:rgba(15,56,57,.7)}
.m-scene.act .m-tampon{animation:m-tamponne .55s cubic-bezier(.2,1.4,.4,1) 1.9s both}
@keyframes m-tamponne{0%{opacity:0;transform:rotate(-9deg) scale(2.4)}100%{opacity:1;transform:rotate(-9deg) scale(1)}}
.m-concurrent{left:70px;bottom:40px;font-size:20px;color:rgba(255,255,255,.75);max-width:520px}

/* ---------- Scène 7 : fin ---------- */
.m-fin{inset:0;display:grid;place-content:center;justify-items:center;gap:26px;text-align:center;color:#fff;padding:0 80px}
.m-fin__logo{display:flex;align-items:flex-end;gap:16px}
.m-fin__logo svg{height:86px;width:auto;fill:#fff}
.m-fin__logo b{font-size:86px;line-height:.9;font-weight:800;letter-spacing:-.02em;color:#ffb550}
.m-fin p{font-size:42px;font-weight:300;letter-spacing:-.03em;line-height:1.15;max-width:760px;text-wrap:balance}
.m-fin small{font-size:18px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7)}

@media (prefers-reduced-motion:reduce){
  .m-scene,.m-scene.act{transition:none}
  .m-scene.act .m-in,.m-scene.act .m-gauche,.m-scene.act .m-pop,.m-scene.act .m-tombe,.m-scene.act .m-droite{animation:none;opacity:1;transform:none}
}

.motion__stage{cursor:default}