/* AN | Flow Consulting — site principal (anflow-consulting.fr), version 2.
   Direction : cabinet de conseil, clair et épuré, du relief et de la profondeur.
   Charte : skill an-flow-branding (verts, corail, Fraunces + Plus Jakarta Sans).
   CSP stricte : aucun style en ligne dans le HTML ; le script ne pose que des variables. */

@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/pjs-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/pjs-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/pjs-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/pjs-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  /* charte */
  --vert-profond:#2B6B52; --vert:#358062; --vert-clair:#6DC09A; --vert-pale:#E8F5EF; --sauge:#F3F8F5;
  --corail:#AD5946; --corail-fonce:#8F4636; --corail-clair:#E0917A; --corail-pale:#FFF0EB;
  /* neutres, légèrement teintés de vert */
  --papier:#FBFCFB; --blanc:#FFFFFF; --encre:#18221D; --texte:#26302B; --texte-2:#55625B; --gris:#9AA2AE;
  --ligne:#E3EAE6; --ligne-2:#D3DED8;
  --titre:"Fraunces", Georgia, "Times New Roman", serif;
  --corps:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r:18px;
  --ombre-1:0 1px 2px rgba(24,34,29,.05), 0 2px 6px rgba(24,34,29,.04);
  --ombre-2:0 2px 4px rgba(24,34,29,.04), 0 12px 28px -6px rgba(24,34,29,.10), 0 30px 60px -20px rgba(43,107,82,.16);
  --ombre-3:0 4px 10px rgba(24,34,29,.05), 0 24px 50px -10px rgba(24,34,29,.16), 0 60px 90px -30px rgba(43,107,82,.22);
  --ressort:cubic-bezier(.2,.8,.2,1.1); --doux:cubic-bezier(.2,.7,.2,1);
  --large:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--texte);font-family:var(--corps);font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--vert)}
h1,h2,h3{font-family:var(--titre);color:var(--encre);line-height:1.1;margin:0;text-wrap:balance;font-weight:400}
p{margin:0}
.conteneur{max-width:var(--large);margin:0 auto;padding-inline:24px}
.section{padding-block:84px}
.section.serree{padding-block:80px}
.fond-sauge{background:var(--sauge)}
.fond-blanc{background:var(--blanc)}
/* surtitre : une étiquette en relief, lisible d’un coup d’œil */
.surtitre{font-family:var(--corps);font-weight:700;font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--vert-profond);
  margin-bottom:18px;display:inline-flex;align-items:center;gap:10px;padding:9px 18px 9px 12px;border-radius:999px;
  background:linear-gradient(180deg,#FFFFFF,#F1F8F4);border:1px solid #CFE3D8;
  box-shadow:inset 0 1px 0 #fff, 0 3px 0 #D2E6DB, 0 10px 22px -10px rgba(43,107,82,.45);
  transition:transform .3s var(--ressort), box-shadow .3s}
.surtitre:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff, 0 5px 0 #D2E6DB, 0 16px 26px -12px rgba(43,107,82,.5)}
.surtitre::before{content:"";flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--corail-clair),var(--corail));
  box-shadow:0 0 0 4px var(--corail-pale), 0 2px 3px rgba(143,70,54,.35);transform-origin:center}
.titre-section{font-size:clamp(30px,3.5vw,46px);letter-spacing:-.015em;max-width:20ch}
.titre-section em{font-style:italic;color:var(--vert)}
.chapo{color:var(--texte-2);font-size:18px;max-width:60ch;margin-top:18px}
.tete-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:40px;align-items:end;margin-bottom:56px}
.saut{position:absolute;left:-9999px;top:0;background:var(--blanc);padding:10px 14px;z-index:100}
.saut:focus{left:12px;top:12px}
:focus-visible{outline:3px solid var(--corail);outline-offset:3px;border-radius:8px}

/* ---------- boutons en relief : ils s’enfoncent quand on appuie ---------- */
.btn{--fond:var(--blanc);--bord:var(--ligne-2);--txt:var(--encre);--socle:var(--ligne-2);
  display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;font:700 15px/1 var(--corps);text-decoration:none;cursor:pointer;
  background:var(--fond);color:var(--txt);border:1px solid var(--bord);
  box-shadow:0 4px 0 var(--socle), 0 10px 22px -8px rgba(24,34,29,.25);
  transform:translateY(0);transition:transform .18s var(--doux), box-shadow .18s var(--doux), background .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--socle), 0 16px 28px -10px rgba(24,34,29,.28)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--socle), 0 4px 10px -6px rgba(24,34,29,.25)}
.btn-plein{--fond:var(--corail);--bord:var(--corail);--txt:#fff;--socle:var(--corail-fonce)}
.btn-vert{--fond:var(--vert);--bord:var(--vert);--txt:#fff;--socle:var(--vert-profond)}
.btn .fleche{transition:transform .25s var(--ressort)}
.btn:hover .fleche{transform:translateX(4px)}
.lien-fleche{font-weight:700;color:var(--vert-profond);text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.lien-fleche .fleche{transition:transform .25s var(--ressort)}
.lien-fleche:hover .fleche{transform:translateX(4px)}

/* ---------- en-tête ---------- */
.entete{position:sticky;top:0;z-index:60;background:rgba(251,252,251,.82);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s, box-shadow .3s, background .3s}
.entete.defile{border-bottom-color:var(--ligne);box-shadow:0 10px 30px -18px rgba(24,34,29,.25);background:rgba(251,252,251,.94)}
.entete .conteneur{display:flex;align-items:center;gap:24px;min-height:76px}
.marque{display:flex;align-items:center;gap:12px;text-decoration:none}
.marque img{width:52px;height:52px;transition:transform .6s var(--ressort)}
.marque:hover img{transform:rotate(-12deg) scale(1.05)}
.marque-texte{display:flex;flex-direction:column;line-height:1.15}
.marque-nom{font-family:var(--titre);font-weight:600;font-size:20px;color:var(--vert);white-space:nowrap}
.marque-nom .sep{color:var(--gris);font-weight:400}
.marque-sous{font-size:12px;color:var(--texte-2);letter-spacing:.02em}
.nav{margin-left:auto;display:flex;align-items:center;gap:30px}
.nav a.lien{color:var(--texte);text-decoration:none;font-weight:500;font-size:15px;position:relative;padding-block:6px}
.nav a{white-space:nowrap}
.nav a.lien::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--vert);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--doux)}
.nav a.lien:hover::after{transform:scaleX(1);transform-origin:left}
.nav .btn{padding:11px 20px;font-size:14px}
.burger{display:none;margin-left:auto;background:none;border:0;width:44px;height:44px;border-radius:10px;cursor:pointer;color:var(--encre)}
.burger span{display:block;width:22px;height:1.5px;background:currentColor;margin:6px auto;border-radius:2px;transition:transform .3s, opacity .3s}

/* ---------- héros ---------- */
.heros{position:relative;overflow:hidden;padding-block:64px 104px;background:linear-gradient(180deg,var(--papier) 0%,var(--sauge) 100%)}
#lignes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#lignes path{stroke:var(--vert-clair);stroke-dasharray:.62 .38;animation:coulent 22s linear infinite}
@keyframes coulent{to{stroke-dashoffset:-1}}
.heros::after{content:"";position:absolute;left:-12%;top:-15%;width:68%;height:130%;background:radial-gradient(closest-side,rgba(251,252,251,.95),rgba(251,252,251,0));pointer-events:none}
.heros .conteneur{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:40px;align-items:center}
.heros h1{font-size:clamp(40px,4.7vw,64px);line-height:1.04;letter-spacing:-.02em;max-width:13ch}
.heros h1 em{font-style:italic;color:var(--vert);position:relative}
.heros h1 .souligne{position:relative;display:inline-block;white-space:nowrap}
.trait{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.3em;overflow:visible;pointer-events:none}
.trait path{fill:none;stroke:var(--corail);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.heros .chapo{font-size:19px;margin-top:28px;max-width:42ch}
.heros .conteneur > div:first-child{position:relative;z-index:2}
.boutons{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;align-items:center}
.garde-fous{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:34px;font-size:14px;color:var(--texte-2)}
.garde-fous span{display:inline-flex;align-items:center;gap:8px}
.garde-fous svg{width:18px;height:18px;color:var(--vert)}

/* scène 3D : l’outil réel, en profondeur, qui suit la souris */
.scene{position:relative;perspective:1700px;height:560px;--px:0;--py:0;--sc:0}
.scene-3d{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateY(calc(-17deg + var(--px) * 7deg + var(--sc) * 12deg)) rotateX(calc(9deg - var(--py) * 6deg - var(--sc) * 6deg)) rotateZ(1.5deg);
  transition:transform .5s var(--doux)}
.plan{position:absolute;transform-style:preserve-3d;border-radius:16px;overflow:hidden;background:var(--blanc)}
.plan-ecran{left:2%;top:10%;width:96%;transform:translateZ(0);box-shadow:var(--ombre-3);border:1px solid var(--ligne)}
.barre-nav{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#F2F5F3;border-bottom:1px solid var(--ligne)}
.barre-nav i{width:10px;height:10px;border-radius:50%;background:#DCE3DF;display:block}
.barre-nav span{margin-left:12px;font-size:12px;color:var(--texte-2);background:var(--blanc);border:1px solid var(--ligne);border-radius:6px;padding:3px 10px}
.plan-tel{left:3%;bottom:0;width:27%;border-radius:26px;border:7px solid #1E2924;transform:translateZ(110px);box-shadow:0 40px 70px -20px rgba(24,34,29,.45)}
.puce{position:absolute;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.97);border:1px solid var(--ligne);border-radius:14px;padding:11px 16px;font-size:13.5px;font-weight:600;color:var(--encre);box-shadow:var(--ombre-2);white-space:nowrap}
.puce .rond{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--vert-pale);color:var(--vert);flex:0 0 26px}
.puce .rond svg{width:15px;height:15px}
.puce small{display:block;font-weight:500;color:var(--texte-2);font-size:12px}
.scene .puce.p1{right:-4%;top:2%;transform:translateZ(170px)}
.scene .puce.p2{right:-8%;top:48%;transform:translateZ(220px)}
.scene .puce.p2 .rond{background:var(--corail-pale);color:var(--corail)}
.scene .puce.p3{left:24%;bottom:-4%;transform:translateZ(150px)}

/* ---------- bandeau de confiance ---------- */
.bandeau{background:var(--blanc);border-block:1px solid var(--ligne)}
.bandeau .conteneur{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.repere{display:flex;gap:14px;align-items:center;padding:26px 20px;border-left:1px solid var(--ligne)}
.repere:first-child{border-left:0;padding-left:0}
.repere svg{width:30px;height:30px;color:var(--vert);flex:0 0 30px}
.repere b{display:block;font-family:var(--titre);font-weight:600;font-size:17px;color:var(--encre);line-height:1.2}
.repere span{font-size:13.5px;color:var(--texte-2)}

/* ---------- cartes à relief 3D (souris et doigt) ---------- */
.relief{--rx:0deg;--ry:0deg;--gx:50%;--gy:50%;--lift:0px;position:relative;transform-style:preserve-3d;
  transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
  transition:transform .45s var(--doux), box-shadow .45s var(--doux), border-color .3s}
.relief::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--gx) var(--gy),rgba(255,255,255,.6),transparent 45%)}
.relief.actif{--lift:-6px;box-shadow:var(--ombre-3);transition:transform .12s linear, box-shadow .3s}
.relief.actif::after{opacity:1}
.relief.appuye{--lift:2px;box-shadow:inset 0 3px 10px rgba(24,34,29,.12), var(--ombre-1);transition:transform .1s, box-shadow .1s}

/* ---------- constat ---------- */
.constat-grille{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
.douleurs{display:grid;gap:14px}
.douleur{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:20px 22px;border-radius:var(--r);background:var(--blanc);border:1px solid var(--ligne);box-shadow:var(--ombre-1);text-decoration:none;color:var(--texte);font-size:16.5px}
.douleur .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--sauge);color:var(--vert);transform:translateZ(30px)}
.douleur .ico svg{width:22px;height:22px}
.douleur .sol{font-size:14px;font-weight:700;color:var(--vert-profond);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transform:translateZ(24px)}
.douleur .sol .fleche{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--vert-pale);transition:transform .3s var(--ressort), background .3s}
.douleur:hover .sol .fleche{transform:translateX(4px);background:var(--vert-clair)}
.douleur.site .ico{background:var(--corail-pale);color:var(--corail)}
.douleur.site .sol{color:var(--corail-fonce)}
.douleur.site .sol .fleche{background:var(--corail-pale)}

/* ---------- Flow Radar : visite guidée ---------- */
.produit-nom{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:10px}
.produit-nom b{font-family:var(--titre);font-weight:600;font-size:24px;color:var(--vert)}
.produit-nom span{font-family:var(--titre);font-style:italic;color:var(--texte-2);font-size:17px}
.pret{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:14px;font-weight:600;color:var(--vert-profond);background:var(--vert-pale);padding:8px 14px;border-radius:999px}
.pret i{width:8px;height:8px;border-radius:50%;background:var(--vert)}
@keyframes pouls{0%{box-shadow:0 0 0 0 rgba(53,128,98,.5)}70%{box-shadow:0 0 0 10px rgba(53,128,98,0)}100%{box-shadow:0 0 0 0 rgba(53,128,98,0)}}
.visite{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:48px;align-items:center}
.onglets{display:grid;gap:10px}
.onglet{all:unset;box-sizing:border-box;cursor:pointer;display:block;padding:18px 20px;border-radius:var(--r);border:1px solid transparent;position:relative;overflow:hidden;transition:background .3s, border-color .3s, box-shadow .3s}
.onglet b{display:block;font-family:var(--titre);font-weight:600;font-size:19px;color:var(--encre)}
.onglet span{display:block;font-size:14.5px;color:var(--texte-2);margin-top:4px}
.onglet:hover{background:var(--blanc);border-color:var(--ligne)}
.onglet[aria-selected="true"]{background:var(--blanc);border-color:var(--ligne);box-shadow:var(--ombre-2)}
.onglet[aria-selected="true"] b{color:var(--vert-profond)}
.onglet .jauge{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--vert-clair);transform:scaleX(0);transform-origin:left}
.onglet[aria-selected="true"] .jauge.court{animation:jauge 7s linear forwards}
@keyframes jauge{to{transform:scaleX(1)}}
.onglet:focus-visible{outline:3px solid var(--corail);outline-offset:2px}
.vitrine{perspective:1800px}
.vitrine-3d{position:relative;transform-style:preserve-3d;transform:rotateY(-9deg) rotateX(5deg);transition:transform .8s var(--doux)}
.vitrine:hover .vitrine-3d{transform:rotateY(-3deg) rotateX(2deg)}
.ecran{border-radius:16px;overflow:hidden;border:1px solid var(--ligne);background:var(--blanc);box-shadow:var(--ombre-3)}
.ecran-vues{position:relative;aspect-ratio:1366/850;background:#EEF3F0}
.ecran-vues img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transform:scale(1.03);transition:opacity .6s var(--doux), transform 1.2s var(--doux)}
.ecran-vues img.visible{opacity:1;transform:none}
.legende{display:flex;gap:10px;align-items:center;margin-top:16px;font-size:13px;color:var(--texte-2)}
.legende i{width:8px;height:8px;border-radius:50%;background:var(--vert-clair);flex:0 0 8px}

.atouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:80px}
.atout{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:28px;box-shadow:var(--ombre-1);display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-content:start}
.atout .ico{grid-row:1/3;color:var(--vert);padding-top:4px;transform:translateZ(40px)}
.atout .ico svg{width:28px;height:28px}
.atout h3{font-size:22px;margin-bottom:6px;transform:translateZ(20px)}
.atout p{color:var(--texte-2);font-size:15.5px}
.garanties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.garantie{display:flex;gap:16px;align-items:flex-start;padding:22px 24px;border-radius:var(--r);background:var(--sauge);border:1px solid var(--ligne)}
.garantie svg{flex:0 0 28px;width:28px;height:28px;color:var(--vert)}
.garantie b{display:block;font-family:var(--titre);font-weight:600;font-size:18px;color:var(--encre)}
.garantie span{color:var(--texte-2);font-size:15px}

/* comparatif : l’argument n° 1 */
.comparatif{margin-top:96px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center;background:var(--blanc);border:1px solid var(--ligne);border-radius:28px;padding:48px;box-shadow:var(--ombre-2)}
.comparatif h3{font-size:clamp(26px,3vw,36px);letter-spacing:-.01em}
.comparatif h3 em{font-style:italic;color:var(--vert)}
.comparatif p.txt{color:var(--texte-2);margin-top:16px}
.barres{display:grid;gap:16px}
.barre{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;align-items:center;font-size:14.5px}
.barre .qui{font-weight:600;color:var(--texte);line-height:1.3}
.barre .qui small{display:block;font-weight:500;color:var(--texte-2);font-size:13px;font-variant-numeric:tabular-nums}
.barre .piste{position:relative;height:14px;border-radius:7px;background:#EEF2F0}
.barre .plein{position:absolute;top:0;bottom:0;border-radius:7px;background:linear-gradient(90deg,#B9C3BE,#9EAAA4);transform-origin:left}
.b-trello{left:17.86%;width:17.86%} .b-monday{left:32.14%;width:35.71%} .b-asana{left:39.29%;width:50%} .b-radar{left:12.71%;width:7.14%}
/* cas type Flow Radar : exemple illustratif, étiqueté comme tel */
.cas-type{margin-top:32px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px 56px;align-items:center;background:var(--blanc);border:1px solid var(--ligne);border-radius:28px;padding:40px 48px;box-shadow:var(--ombre-1)}
.cas-type h3{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.01em}
.cas-type h3 em{font-style:italic;color:var(--vert)}
.cas-chiffres{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cas-chiffres li{display:grid;gap:6px;align-content:start}
.cas-chiffres b{font-family:'Fraunces',serif;font-weight:600;font-size:40px;line-height:1;color:var(--vert-profond);white-space:nowrap}
.cas-chiffres span{font-size:14px;color:var(--texte-2);line-height:1.4}
.cas-type .note{grid-column:1/-1;font-size:13px;color:var(--texte-2);margin:0}
.barre.nous .qui{color:var(--vert-profond)}
.barre.nous .qui small{color:var(--vert-profond)}
.barre.nous .plein{background:linear-gradient(90deg,var(--vert),var(--vert-clair));box-shadow:0 4px 14px rgba(53,128,98,.4)}
.echelle{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;font-size:12px;color:var(--texte-2)}
.echelle div{position:relative;height:18px;font-variant-numeric:tabular-nums}
.echelle div span{position:absolute;top:0;white-space:nowrap}
.echelle div span:nth-child(1){left:0}
.echelle div span:nth-child(2){left:50%;transform:translateX(-50%)}
.echelle div span:nth-child(3){right:0}
.note-prix{font-size:12.5px;color:var(--texte-2);margin:16px 0 0}

.tarifs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
.tarif{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:30px 28px;box-shadow:var(--ombre-1);display:flex;flex-direction:column}
.tarif h3{font-size:24px}
.tarif .pour{color:var(--texte-2);font-size:14.5px;margin-top:4px}
.tarif .prix{font-family:var(--titre);font-size:48px;color:var(--encre);margin:18px 0 6px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;transform:translateZ(30px)}
.tarif .prix small{font-family:var(--corps);font-size:15px;color:var(--texte-2);letter-spacing:0}
.tarif ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px;font-size:15px}
.tarif li{display:flex;gap:10px;align-items:flex-start}
.tarif li svg{flex:0 0 18px;width:18px;height:18px;color:var(--vert);margin-top:3px}
.tarif.pro{background:linear-gradient(var(--blanc),var(--blanc)) padding-box, linear-gradient(140deg,var(--vert-clair),var(--vert),var(--corail-clair)) border-box;border:2px solid transparent}
.etiquette{position:absolute;top:-13px;left:24px;background:var(--vert);color:#fff;font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px;box-shadow:0 6px 14px -4px rgba(43,107,82,.5);transform:translateZ(40px)}
.tarif.lancement{background:linear-gradient(160deg,var(--corail-pale),#fff 70%);border-color:#F3D3C8}
.tarif.lancement h3{color:var(--corail-fonce)}
.tarif.lancement p{color:var(--texte-2);font-size:15px;margin-top:10px}
.tarif.lancement .boutons{margin-top:auto;padding-top:22px}
.mentions-prix{font-size:13px;color:var(--texte-2);margin-top:18px}

/* ---------- Flow Gestion ---------- */
.gestion-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.gains{display:grid;gap:12px;margin-top:28px}
.gain{display:flex;gap:14px;align-items:center;font-weight:600;color:var(--encre)}
.gain i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--vert-pale);color:var(--vert);flex:0 0 34px}
.gain svg{width:17px;height:17px}
.cas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:32px}
.cas-carte{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:22px;box-shadow:var(--ombre-1)}
.cas-carte h3{font-size:18.5px;margin-bottom:8px}
.cas-carte p{color:var(--texte-2);font-size:14.5px}
.excel{margin-top:24px;font-family:var(--titre);font-style:italic;color:var(--vert-profond);font-size:18px;white-space:nowrap}
@media (max-width:1180px){.excel{white-space:normal}}
.photo3d{perspective:1600px}
.photo3d-in{position:relative;transform-style:preserve-3d;transform:rotateY(8deg) rotateX(4deg);transition:transform .8s var(--doux)}
.photo3d:hover .photo3d-in{transform:rotateY(2deg) rotateX(1deg)}
.cadre-photo{border-radius:24px;overflow:hidden;aspect-ratio:4/4.4;box-shadow:var(--ombre-3);background:linear-gradient(150deg,var(--vert-pale),#DDEFE6);position:relative}
.cadre-photo img{width:100%;height:100%;object-fit:cover;animation:camera 26s ease-in-out infinite alternate}
@keyframes camera{from{transform:scale(1.02)}to{transform:scale(1.1) translate(-1.5%,-1%)}}
.photo3d .puce.g1{left:-10%;top:12%;transform:translateZ(80px)}
.photo3d .puce.g2{right:-8%;top:44%;transform:translateZ(130px)}
.photo3d .puce.g3{left:-4%;bottom:10%;transform:translateZ(100px)}
/* décor dessiné tant que la photo n’est pas là */
.tableur{position:absolute;inset:10%;background:var(--blanc);border-radius:16px;box-shadow:0 18px 40px rgba(43,107,82,.16);padding:18px;display:grid;grid-template-rows:auto 1fr;gap:12px}
.tableur-tete{display:flex;gap:8px}
.tableur-tete i{height:10px;border-radius:5px;background:var(--vert-pale);display:block;flex:1}
.tableur-tete i:first-child{flex:.4;background:var(--vert-clair)}
.cellules{display:grid;grid-template-columns:1.4fr 1fr 1fr .8fr;gap:8px;align-content:space-between}
.cellules i{height:20px;border-radius:5px;background:#F3F6F4;display:block;position:relative;overflow:hidden}
.cellules i::after{content:"";position:absolute;inset:0;background:var(--vert-pale);transform:scaleX(0);transform-origin:left;animation:remplit 5s ease-in-out infinite}
.cellules i:nth-child(4n)::after{background:var(--vert-clair)}
.cellules i:nth-child(7n)::after{background:var(--corail-pale)}
@keyframes remplit{0%,8%{transform:scaleX(0)}30%,85%{transform:scaleX(1)}100%{transform:scaleX(0)}}

/* ---------- Sites ---------- */
/* photo large des sites, en relief */
.photo-large{position:relative;margin:40px 0 36px;border-radius:26px;box-shadow:var(--ombre-3)}
.photo-large img{width:100%;aspect-ratio:21/8;object-fit:cover;object-position:50% 55%;border-radius:26px}
.photo-large .puce{position:absolute;transform:translateZ(60px)}
.photo-large .p-site1{left:-18px;bottom:34px}
.photo-large .p-site2{right:-18px;top:34px}
.photo-contact{margin:32px 0 0;border-radius:22px;box-shadow:var(--ombre-2)}
.photo-contact img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:22px}
.formules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.formules.trois{grid-template-columns:repeat(3,minmax(0,1fr))}
.formule{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:26px 22px;display:flex;flex-direction:column;box-shadow:var(--ombre-1)}
.formule.vedette{background:linear-gradient(var(--blanc),var(--blanc)) padding-box, linear-gradient(140deg,var(--vert-clair),var(--vert)) border-box;border:2px solid transparent}
.formule h3{font-size:23px}
.formule .pour{color:var(--texte-2);font-size:14px;margin-top:2px}
.formule .prix{font-family:var(--titre);font-size:38px;color:var(--encre);margin:16px 0;letter-spacing:-.02em;font-variant-numeric:tabular-nums;transform:translateZ(26px)}
.formule ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:14.5px}
.formule li{display:flex;gap:10px;align-items:flex-start}
.formule li svg{flex:0 0 17px;width:17px;height:17px;color:var(--vert);margin-top:3px}
.options{margin-top:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.option{display:flex;justify-content:space-between;gap:12px;align-items:baseline;background:var(--blanc);border:1px dashed var(--ligne-2);border-radius:14px;padding:14px 18px;font-size:14.5px}
.option b{color:var(--corail-fonce);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- Confiance ---------- */
.avis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:40px}
.avis-qui span.initiales{color:#fff;font-size:13px}
.avis-carte{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:14px;margin:0;box-shadow:var(--ombre-1)}
.avis-carte blockquote{margin:0;font-family:var(--titre);font-style:italic;font-size:17px;color:var(--encre);position:relative;padding-top:34px}
.avis-carte blockquote::before{content:"\201C";position:absolute;top:-14px;left:-4px;font-family:var(--titre);font-style:normal;font-size:76px;line-height:1;color:var(--vert-clair);transform:translateZ(30px);text-shadow:0 6px 12px rgba(43,107,82,.2)}
.avis-carte blockquote.attente{color:var(--gris);font-size:15px}
.avis-qui small{display:block;font-size:12.5px;font-weight:600;color:var(--vert)}
.avis-qui{display:flex;align-items:center;gap:12px;margin-top:auto}
.initiales{width:42px;height:42px;border-radius:50%;background:var(--vert);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;flex:0 0 42px}
.avis-qui span{font-size:13.5px;color:var(--texte-2)}

/* ---------- Méthode ---------- */
.etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;position:relative;margin-top:8px}
.etape{position:relative;padding-top:26px}
.etape::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.18)}
.etape::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--corail-clair),var(--vert-clair));transform-origin:left;transition:transform 1.1s cubic-bezier(.77,0,.18,1)}
.etape .n{font-family:var(--titre);font-style:italic;font-size:54px;line-height:1;color:var(--corail-clair);letter-spacing:-.02em;display:inline-block;transition:transform .8s var(--doux),opacity .8s}
.etape-mot{display:inline-block;margin-left:12px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7FCDA8;vertical-align:.9em}
.etape h3{font-size:26px;margin:16px 0 8px;color:#fff}
.etape p{color:#C9DDD2}

/* ---------- Sécurité ---------- */
.securite-grille{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.puces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.puce-s{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:var(--r);background:var(--blanc);border:1px solid var(--ligne);box-shadow:var(--ombre-1)}
.puce-s svg{flex:0 0 24px;width:24px;height:24px;color:var(--vert);transform:translateZ(24px)}
.puce-s b{display:block;font-size:15.5px;color:var(--encre)}
.puce-s span{font-size:14px;color:var(--texte-2)}


/* ---------- Flow Gestion : ce que contient l’outil ---------- */
.modules{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.module{background:var(--blanc);border:1px solid var(--ligne);border-radius:16px;padding:16px;box-shadow:var(--ombre-1);display:flex;flex-direction:column;gap:4px}
.module i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--vert);background:var(--vert-pale);margin-bottom:6px;transform:translateZ(18px)}
.module i svg{width:20px;height:20px}
.module b{font-size:15px;color:var(--encre);line-height:1.25}
.module span{font-size:13.5px;color:var(--texte-2);line-height:1.45}
.module.autre{background:transparent;border:1.5px dashed var(--ligne-2);box-shadow:none;justify-content:center}
.module.autre b{font-family:var(--titre);font-style:italic;font-weight:400;font-size:17px;color:var(--vert-profond)}

/* ---------- Constat : le désordre, en papiers qui flottent ---------- */
.desordre{margin-top:40px;perspective:1100px;max-width:440px;border-radius:20px}
.desordre-in{position:relative;height:290px;transform-style:preserve-3d;transform:rotateX(14deg) rotateZ(-3deg)}
.desordre img{width:100%;border-radius:20px;box-shadow:var(--ombre-3)}
.papier{position:absolute;background:var(--blanc);border:1px solid var(--ligne);border-radius:12px;box-shadow:var(--ombre-2);padding:12px 14px;font-size:12.5px;color:var(--texte-2);animation:derive 8s ease-in-out infinite}
.p-titre{display:block;font-weight:700;color:var(--encre);font-size:12px;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-tableur{left:0;top:18px;width:62%;transform:translateZ(10px) rotate(-5deg)}
.grille-xl{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.grille-xl i{height:13px;border-radius:3px;background:#EEF3F0;display:block}
.grille-xl i:nth-child(3),.grille-xl i:nth-child(10){background:#FBE3DC}
.p-mail{right:0;top:0;width:52%;transform:translateZ(50px) rotate(4deg);animation-delay:-2s}
.p-ligne{display:block;height:7px;border-radius:4px;background:#EEF3F0;margin-top:7px}
.p-ligne.court{width:60%}
.p-postit{left:16%;bottom:6px;width:42%;background:#FFF4C9;border-color:#F2E2A0;font-family:var(--titre);font-style:italic;font-size:15.5px;color:#5B4A12;line-height:1.35;transform:translateZ(80px) rotate(-7deg);animation-delay:-4s}
.p-alerte{right:4%;bottom:40px;display:flex;align-items:center;gap:8px;font-weight:700;color:var(--corail-fonce);background:var(--corail-pale);border-color:#F5D3C8;transform:translateZ(110px) rotate(3deg);animation-delay:-6s}
.p-alerte svg{width:18px;height:18px}
@keyframes derive{0%,100%{translate:0 0}50%{translate:0 -8px}}

/* ---------- vidéos ---------- */
.visite-gauche{display:grid;gap:18px}
/* grande vidéo de démonstration : aperçu muet au survol (ou à l'écran sur mobile), clic = vidéo avec le son */
.demo-video{position:relative;display:block;width:100%;max-width:1060px;margin:0 auto 72px;padding:0;border:0;border-radius:26px;overflow:hidden;cursor:pointer;
  aspect-ratio:16/9;background:#0F1A15 center/cover no-repeat;font:inherit;text-align:left;color:#fff;
  box-shadow:0 0 0 1px rgba(43,107,82,.14),0 10px 0 #D5E3DB,0 34px 70px -24px rgba(24,34,29,.42),0 70px 110px -50px rgba(43,107,82,.45);
  transition:transform .45s var(--doux),box-shadow .45s var(--doux)}
.demo-video:hover,html.js .demo-video.rv.in:hover{transform:translateY(-6px) scale(1.012);box-shadow:0 0 0 1px rgba(43,107,82,.2),0 14px 0 #D5E3DB,0 44px 80px -24px rgba(24,34,29,.48),0 80px 120px -50px rgba(43,107,82,.55)}
.demo-video:active,html.js .demo-video.rv.in:active{transform:translateY(4px);box-shadow:0 0 0 1px rgba(43,107,82,.2),0 3px 0 #D5E3DB,0 20px 40px -20px rgba(24,34,29,.4)}
.lire{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 8px 18px -6px rgba(24,34,29,.45)}
.lire::after{content:"";position:absolute;left:18px;top:14px;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent var(--corail)}
.demo-video .apercu{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.demo-voile{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(43,107,82,.10),rgba(43,107,82,.22));transition:opacity .5s var(--doux)}
.demo-centre{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .4s var(--doux),transform .4s var(--doux)}
.demo-centre .lire{position:relative;left:auto;top:auto;margin:0;width:96px;height:96px;background:#fff;
  box-shadow:0 0 0 12px rgba(255,255,255,.22),0 18px 40px -10px rgba(0,0,0,.5);animation:pulse-lire 2.6s var(--doux) infinite}
.demo-centre .lire::after{left:38px;top:31px;border-width:17px 0 17px 27px}
@keyframes pulse-lire{0%,100%{box-shadow:0 0 0 12px rgba(255,255,255,.22),0 18px 40px -10px rgba(0,0,0,.5)}50%{box-shadow:0 0 0 22px rgba(255,255,255,.08),0 18px 40px -10px rgba(0,0,0,.5)}}
.demo-legende{position:absolute;left:28px;bottom:26px;max-width:calc(100% - 56px);padding:16px 22px 16px 20px;border-radius:18px;border-left:4px solid var(--corail);background:rgba(255,255,255,.94);backdrop-filter:blur(8px);box-shadow:0 18px 40px -16px rgba(24,34,29,.35);transition:opacity .4s var(--doux),transform .4s var(--doux)}
.demo-legende b{display:block;font-family:var(--titre);font-weight:500;font-size:clamp(20px,2.2vw,28px);line-height:1.15;color:var(--encre)}
.demo-legende small{display:block;margin-top:4px;font-size:14.5px;color:var(--texte-2)}
.demo-badge{position:absolute;top:18px;right:18px;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;
  background:rgba(15,26,21,.66);backdrop-filter:blur(6px);opacity:0;transform:translateY(-6px);transition:opacity .35s var(--doux),transform .35s var(--doux)}
.demo-badge i{width:8px;height:8px;border-radius:50%;background:var(--corail-clair);box-shadow:0 0 0 3px rgba(224,145,122,.3)}
.demo-video.joue .demo-centre{opacity:0;transform:scale(.85)}
.demo-video.joue .demo-voile{opacity:0}
.demo-video.joue .demo-legende{opacity:0;transform:translateY(10px)}
.demo-video.joue .demo-badge{opacity:1;transform:none}
.lecteur{border:0;padding:0;border-radius:22px;width:min(1100px,94vw);background:#0F1A15;box-shadow:0 40px 90px -20px rgba(0,0,0,.6);overflow:hidden}
.lecteur::backdrop{background:rgba(18,30,24,.72);backdrop-filter:blur(4px)}
.lecteur-tete{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 20px;color:#E8F5EF;font-weight:600}
.fermer{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.fermer:hover{background:rgba(255,255,255,.22)}
.lecteur video{display:block;width:100%;aspect-ratio:16/9;background:#000}

/* ---------- bande profonde (citation et méthode) ---------- */
.fond-profond{background:radial-gradient(900px 500px at 85% 0%,rgba(109,192,154,.14),rgba(109,192,154,0) 70%),linear-gradient(170deg,#1F4F3C,#173D2F 55%,#123026);color:#DDEBE3}
.fond-profond .titre-section{color:#fff}
.fond-profond .titre-section em{color:var(--vert-clair)}
.citation{margin:0 0 64px;max-width:860px}
.citation blockquote{margin:0;font-family:var(--titre);font-style:italic;font-weight:400;font-size:clamp(24px,2.6vw,34px);line-height:1.35;color:#F3F8F5}
.citation figcaption{margin-top:18px;display:flex;align-items:center;gap:14px;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#7FCDA8}
.citation figcaption::before{content:"";width:40px;height:1px;background:var(--corail-clair)}

/* ---------- photos : rideau qui découvre l’image ---------- */
html.js .rideau img{clip-path:inset(0 0 0 100%);transition:clip-path 1.5s cubic-bezier(.77,0,.18,1)}
html.js .rideau.in img{clip-path:inset(0 0 0 0)}

/* ---------- Qui suis-je : fiche parcours ---------- */
.parcours{margin:28px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ligne-2)}
.parcours div{padding:16px 18px 0 0}
.parcours div+div{padding-left:18px;border-left:1px solid var(--ligne-2)}
.parcours dt{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--corail-fonce)}
.parcours dd{margin:6px 0 0;font-size:14.5px;color:var(--texte);line-height:1.45}

/* ---------- Qui suis-je ---------- */
.moi-grille{display:grid;grid-template-columns:auto minmax(0,1fr);gap:64px;align-items:center}
.sceau{position:relative;width:320px;height:320px;display:grid;place-items:center;perspective:900px;border-radius:50%}
.sceau.relief::after{display:none}
.sceau.relief.actif,.sceau.relief.appuye{box-shadow:none}
.sceau svg.anneau{position:absolute;inset:0;width:100%;height:100%;animation:tourne 40s linear infinite}
.sceau svg.anneau text{font-family:var(--corps);font-size:13.4px;letter-spacing:.2em;fill:var(--vert-profond);font-weight:600}
@keyframes tourne{to{transform:rotate(360deg)}}
/* le vrai logo, en pièce 3D : épaisseur, ombre portée, vagues qui défilent */
.embleme{position:relative;width:210px;height:210px;border-radius:50%;transform-style:preserve-3d;
  transform:translateZ(40px) rotateX(calc(var(--rx) * 2.2)) rotateY(calc(var(--ry) * 2.2));transition:transform .5s var(--doux);
  animation:flotte 7s ease-in-out infinite, pivote 12s ease-in-out infinite}
.embleme::before{content:"";position:absolute;inset:0;border-radius:50%;background:#1F5240;transform:translateZ(-14px);
  box-shadow:0 40px 50px -12px rgba(43,107,82,.45), 0 8px 10px rgba(24,34,29,.12)}
.embleme::after{content:"";position:absolute;inset:0;border-radius:50%;background:#6FB394;transform:translateZ(-7px)}
.embleme img{position:absolute;inset:0;width:100%;height:100%;transform:translateZ(1px)}
.embleme .vagues{position:absolute;inset:0;border-radius:50%;clip-path:circle(45.6% at 50% 50%);transform:translateZ(2px)}
/* bande tirée du logo (x 115 à 301, y 182 à 331 sur 512), répétée 4 fois : un pas = 25 % */
.embleme .vagues i{position:absolute;left:-50.2%;top:35.55%;width:290.6%;height:29.1%;background:url("../img/logo-vagues.v1.png") 0 0/100% 100% no-repeat;
  animation:vagues 9s linear infinite}
.embleme .reflet{position:absolute;inset:0;border-radius:50%;transform:translateZ(3px);pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.28),rgba(255,255,255,0) 45%)}
.sceau.actif .embleme .reflet{opacity:1}
@keyframes vagues{from{transform:translateX(-25%)}to{transform:translateX(0)}}
@keyframes flotte{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes pivote{0%,100%{rotate:y -16deg}50%{rotate:y 16deg}}
#qui p.txt{color:var(--texte-2);font-size:18px;max-width:62ch;margin-top:16px}
.chiffres{display:flex;gap:56px;flex-wrap:wrap;margin-top:32px}
.chiffre b{display:block;font-family:var(--titre);font-size:52px;color:var(--vert-profond);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-weight:400}
.chiffre span{font-size:14px;color:var(--texte-2)}
/* l’accompagnement IA : même relief que les étiquettes de section, en corail */
.ia-ligne{margin-top:36px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:16px 22px;border-radius:20px;max-width:640px;
  background:linear-gradient(180deg,#FFFFFF,#FFF4EF);border:1px solid #F1D2C6;
  box-shadow:inset 0 1px 0 #fff, 0 4px 0 #F2D7CC, 0 16px 30px -14px rgba(143,70,54,.4)}
.ia-etiq{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--corail-fonce);
  padding:7px 14px 7px 10px;border-radius:999px;background:var(--corail-pale);border:1px solid #F1D2C6;white-space:nowrap}
.ia-etiq::before{content:"";width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--corail-clair),var(--corail));box-shadow:0 2px 3px rgba(143,70,54,.35)}
.ia-txt{font-size:15.5px;color:var(--texte);flex:1 1 260px}

/* ---------- Contact (clair) ---------- */
.contact{background:linear-gradient(180deg,var(--sauge),var(--vert-pale))}
.contact-grille{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.coord{margin-top:30px;display:grid;gap:14px}
.mail{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mail a{color:var(--encre);font-family:var(--titre);font-size:22px;text-decoration:none;border-bottom:2px solid var(--vert-clair)}
.copier{background:var(--blanc);border:1px solid var(--ligne-2);color:var(--texte);border-radius:999px;padding:7px 14px;font:600 13px var(--corps);cursor:pointer;box-shadow:0 2px 0 var(--ligne-2)}
.copier:active{transform:translateY(2px);box-shadow:none}
.formulaire{background:var(--blanc);border:1px solid var(--ligne);border-radius:24px;padding:32px;box-shadow:var(--ombre-3);display:grid;gap:16px}
.champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.champ{display:grid;gap:7px}
.champ label{font-size:14px;font-weight:600;color:var(--encre)}
.champ input,.champ textarea{font:inherit;font-size:16px;padding:13px 14px;border-radius:12px;border:1.5px solid var(--ligne-2);background:var(--papier);color:var(--texte);width:100%;transition:border-color .2s, box-shadow .2s, background .2s}
.champ input:focus,.champ textarea:focus{outline:none;border-color:var(--vert);background:#fff;box-shadow:0 0 0 4px var(--vert-pale)}
.champ textarea{min-height:130px;resize:vertical}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--texte-2)}
.consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--vert);flex:0 0 18px}
.cache{position:absolute;left:-9999px}

/* ---------- pied de page (clair) ---------- */
.pied{background:var(--blanc);border-top:1px solid var(--ligne);color:var(--texte-2);font-size:14px;padding-block:40px}
.pied .conteneur{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center}
.pied .marque img{width:34px;height:34px}
.pied .marque-nom{font-size:18px}
.pied a{color:var(--texte);text-decoration:none}
.pied a:hover{color:var(--vert);text-decoration:underline}
.pied nav{display:flex;gap:22px;flex-wrap:wrap}
.pied .legal{flex-basis:100%;font-size:12.5px;color:var(--texte-2);border-top:1px solid var(--ligne);padding-top:18px}

/* ---------- pages simples ---------- */
.page-simple{max-width:780px;margin:0 auto;padding:56px 24px 90px}
.page-simple h1{font-size:clamp(34px,4.4vw,48px);margin-bottom:26px}
.page-simple h2{font-size:24px;margin:36px 0 10px}
.page-simple p,.page-simple li{color:var(--texte-2);margin-bottom:8px}
.page-simple .retour{display:inline-block;margin-bottom:26px;font-weight:600;text-decoration:none}
.a-completer{background:var(--corail-pale);color:var(--corail-fonce);padding:1px 6px;border-radius:4px;font-weight:600}

/* ---------- apparitions (armées seulement si le script tourne) ---------- */
html.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--doux), transform .9s var(--doux)}
html.js .rv.d1{transition-delay:.1s} html.js .rv.d2{transition-delay:.2s} html.js .rv.d3{transition-delay:.3s}
html.js .rv.in{opacity:1;transform:none}
html.js .demo-video.rv.in{transition:opacity .9s var(--doux),transform .45s var(--doux),box-shadow .45s var(--doux)}
html.js .rv.relief.in{transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift))}
html.js .surtitre::before{transform:scale(0);transition:transform .9s var(--doux) .2s}
html.js .in .surtitre::before, html.js .surtitre.in::before{transform:scale(1)}
html.js .etapes .etape::after{transform:scaleX(0)}
html.js .etapes.in .etape::after{transform:scaleX(1)}
html.js .etapes .etape .n{transform:translateY(16px);opacity:0}
html.js .etapes.in .etape .n{transform:none;opacity:1}
html.js .etapes.in .etape:nth-child(2)::after,html.js .etapes.in .etape:nth-child(2) .n{transition-delay:.35s}
html.js .etapes.in .etape:nth-child(3)::after,html.js .etapes.in .etape:nth-child(3) .n{transition-delay:.7s}
html.js .barres .plein{transform:scaleX(0);transition:transform 1.3s var(--doux)}
html.js .barres.in .plein{transform:scaleX(1)}
html.js .barres.in .barre:nth-child(2) .plein{transition-delay:.12s}
html.js .barres.in .barre:nth-child(3) .plein{transition-delay:.24s}
html.js .barres.in .barre:nth-child(4) .plein{transition-delay:.5s}
html.js .scene{opacity:0;transform:translateY(30px) scale(.97);transition:opacity 1.2s var(--doux) .3s, transform 1.4s var(--doux) .3s}
html.js .heros.go .scene{opacity:1;transform:none}
html.js .trait path{stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--doux) 1.2s}
html.js .heros.go .trait path{stroke-dashoffset:0}
.heros h1 .m{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.heros h1 .m > span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--doux)}
.heros.go h1 .m > span{transform:none}

/* ---------- adaptations ---------- */
@media (max-width:1080px){
  .formules{grid-template-columns:repeat(2,minmax(0,1fr))}
  .formules.trois{grid-template-columns:minmax(0,1fr)}
  .avis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bandeau .conteneur{grid-template-columns:repeat(2,minmax(0,1fr))}
  .repere:nth-child(3){border-left:0;padding-left:0}
  .scene{height:480px}
}
@media (max-width:1140px){
  .nav{position:fixed;inset:76px 0 auto 0;background:var(--papier);flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 24px;border-bottom:1px solid var(--ligne);box-shadow:0 30px 40px -20px rgba(24,34,29,.18);transform:translateY(-130%);transition:transform .4s var(--doux);visibility:hidden}
  .nav.ouvert{transform:none;visibility:visible}
  .nav a.lien{padding:16px 0;border-bottom:1px solid var(--ligne)}
  .nav .btn{margin-top:16px;justify-content:center}
  .burger{display:block}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .nav{max-height:calc(100dvh - 76px);overflow-y:auto}
}
@media (max-width:900px){
  .heros .conteneur,.constat-grille,.visite,.comparatif,.gestion-grille,.securite-grille,.contact-grille,.tete-section{grid-template-columns:minmax(0,1fr)}
  .tete-section{gap:12px;margin-bottom:40px}
  .scene{height:420px;margin-top:20px}
  .atouts,.etapes,.tarifs,.cas{grid-template-columns:minmax(0,1fr)}
  .garanties,.options{grid-template-columns:minmax(0,1fr)}
  .moi-grille{grid-template-columns:minmax(0,1fr);gap:32px}
  .comparatif{padding:28px}
  .cas-type{grid-template-columns:minmax(0,1fr);padding:28px}
  .section{padding-block:76px}
  .vitrine-3d{transform:none}
}
@media (max-width:600px){
  .demo-video{border-radius:18px;margin-bottom:48px}
  .demo-centre .lire{width:60px;height:60px;box-shadow:0 0 0 8px rgba(255,255,255,.25)}
  .demo-centre .lire::after{left:24px;top:19px;border-width:11px 0 11px 17px}
  .demo-legende{left:10px;bottom:10px;max-width:calc(100% - 20px);padding:8px 12px;border-radius:12px;border-left-width:3px}
  .demo-legende b{font-size:16px}
  .demo-legende small{display:none}
  .demo-badge{top:12px;right:12px;font-size:12px;padding:6px 11px}
  body{font-size:16px}
  .conteneur{padding-inline:18px}
  .marque-nom{font-size:17px}
  .marque-sous{display:none}
  .marque img{width:38px;height:38px}
  .heros{padding-block:40px 64px}
  .scene{height:330px}
  .plan-tel{width:30%;border-width:5px;border-radius:18px;left:-2%}
  .puce{font-size:12px;padding:8px 11px;gap:8px}
  .puce .rond{width:22px;height:22px;flex-basis:22px}
  .puce small{display:none}
  .scene .puce.p1{right:0} .scene .puce.p2{right:-2%} .scene .puce.p3{left:16%}
  .bandeau .conteneur{grid-template-columns:minmax(0,1fr)}
  .repere,.repere:nth-child(3){border-left:0;padding:16px 0;border-top:1px solid var(--ligne)}
  .repere:first-child{border-top:0}
  .formules,.avis,.puces,.champs{grid-template-columns:minmax(0,1fr)}
  .douleur{grid-template-columns:auto minmax(0,1fr);padding:16px}
  .douleur .sol{grid-column:2}
  .barre,.echelle{grid-template-columns:110px minmax(0,1fr)}
  .cas-chiffres{grid-template-columns:minmax(0,1fr)}
  .cas-chiffres li{grid-template-columns:100px minmax(0,1fr);align-items:baseline}
  .cas-chiffres b{font-size:32px}
  .chiffres{gap:28px}
  .chiffre b{font-size:42px}
  .sceau{width:250px;height:250px}
  .embleme{width:160px;height:160px}
  .photo3d .puce.g1{left:-2%} .photo3d .puce.g2{right:3%} .photo3d .puce.g3{left:0}
  .formulaire{padding:22px}
  .modules{grid-template-columns:repeat(2,minmax(0,1fr))}
  .parcours{grid-template-columns:minmax(0,1fr)}
  .parcours div+div{padding-left:0;border-left:0;border-top:1px solid var(--ligne-2);margin-top:14px}
  .citation{margin-bottom:44px}
  .photo-large img{aspect-ratio:4/3}
  .photo-large .p-site1{left:10px;bottom:12px} .photo-large .p-site2{display:none}
  .desordre-in{height:260px}
}
@media (prefers-reduced-motion:reduce){
  .demo-centre .lire{animation:none}
  .demo-video,.demo-video:hover,html.js .demo-video.rv.in:hover{transform:none}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html.js .rv,html.js .scene{opacity:1;transform:none}
  .heros h1 .m > span{transform:none}
  html.js .barres .plein,html.js .surtitre::before,html.js .etapes .etape::after{transform:none}
  html.js .etapes .etape .n{transform:none;opacity:1}
  html.js .rideau img{clip-path:none}
  .embleme .vagues{display:none}
  html.js .trait path{stroke-dashoffset:0}
}
.insecable{white-space:nowrap}

/* ---------- recette responsive du 05/10/2026 ---------- */
html,body{overflow-x:clip}                                   /* filet : rien ne fait glisser la page au doigt */
.champ label small{font-size:12px}
.copier{min-height:44px;padding:10px 16px}
.pied nav a{display:inline-block;padding-block:10px}
.boutons .lien-fleche{min-height:44px}
.champ input:user-invalid,.champ textarea:user-invalid{border-color:var(--corail);box-shadow:0 0 0 4px var(--corail-pale)}
.lecteur{max-height:calc(100dvh - 16px)}
@media (max-width:1300px){
  .scene .puce.p1{right:2%} .scene .puce.p2{right:0}
  .photo3d .puce.g1,.photo3d .puce.g3{left:2%} .photo3d .puce.g2{right:2%}
  .photo-large .p-site1{left:12px} .photo-large .p-site2{right:12px}
}
@media (max-width:900px){
  .visite .vitrine{order:-1}
  .photo3d{max-width:520px;margin-inline:auto}
}
@media (min-width:601px) and (max-width:900px){
  .atouts,.tarifs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .atouts .atout:last-child,.tarifs .tarif:last-child{grid-column:1/-1}
}
@media (max-width:600px){
  .barre,.echelle{grid-template-columns:minmax(0,1fr);gap:6px}
  .echelle > span{display:none}
  .photo3d .puce.g2{right:6%}
}
@media (max-width:360px){
  .sceau{width:230px;height:230px}
  .scene .puce.p3{left:19%}
}
@media (orientation:landscape) and (max-height:500px){
  .entete .conteneur{min-height:56px}
  .nav{inset:56px 0 auto 0;max-height:calc(100dvh - 56px)}
  .lecteur{width:fit-content;max-width:94vw}
  .lecteur video{width:auto;max-width:94vw;height:calc(100dvh - 90px);aspect-ratio:16/9}
}
.coord .essai{font-size:15px;color:var(--texte-2);line-height:1.6}
.coord .essai .lien-fleche{display:inline-flex;margin-top:6px}
/* impression (ou « enregistrer en PDF ») : tout le contenu visible, sans animation */
@media print{
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .rv,html.js .rv.relief.in,html.js .scene,.heros h1 .m > span{opacity:1;transform:none}
  html.js .barres .plein,html.js .surtitre::before,html.js .etapes .etape::after{transform:none}
  html.js .etapes .etape .n{transform:none;opacity:1}
  html.js .rideau img{clip-path:none}
  html.js .trait path{stroke-dashoffset:0}
  header{position:static}
  .heros .conteneur{grid-template-columns:minmax(0,1fr)}
  .scene,#lignes,.burger{display:none}
  .demo-video,.vitrine,.photo3d,.comparatif,.cas-type,.tarif{break-inside:avoid}
}