/* gestiQ : feuille de style du site (collage papier, couleurs de la marque) */
@font-face{font-family:"Outfit";src:url(/assets/fonts/outfit.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Atkinson";src:url(/assets/fonts/atkinson.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{
  --bleu:#204767; --bleu-fonce:#16324a; --corail:#CB341D; --corail-fonce:#A82A17;
  --encre:#1d2730; --texte:#3A444E; --papier:#F7F2E8; --papier-2:#EFE7D8; --blanc:#FFFDF8;
  --kraft:#76583A; --kraft-fonce:#5E452C; --ligne:#D9CDB8;
  --titre:"Outfit",system-ui,sans-serif; --corps:"Atkinson",system-ui,sans-serif;
  --max:1180px; --r:4px;
  --ombre:0 1px 0 rgba(60,40,20,.08),0 10px 24px -12px rgba(60,40,20,.35);
  --torn:polygon(0.00% 0.45%,2.50% 0.21%,5.00% 0.91%,7.50% 0.10%,10.00% 0.75%,12.50% 0.51%,15.00% 0.08%,17.50% 0.71%,20.00% 0.05%,22.50% 0.61%,25.00% 0.10%,27.50% 0.13%,30.00% 0.59%,32.50% 1.16%,35.00% 0.17%,37.50% 0.31%,40.00% 0.88%,42.50% 1.33%,45.00% 0.81%,47.50% 0.56%,50.00% 1.37%,52.50% 0.07%,55.00% 1.20%,57.50% 0.41%,60.00% 0.20%,62.50% 0.16%,65.00% 0.43%,67.50% 1.14%,70.00% 0.25%,72.50% 0.81%,75.00% 0.89%,77.50% 0.52%,80.00% 0.77%,82.50% 0.09%,85.00% 0.08%,87.50% 0.29%,90.00% 0.95%,92.50% 0.60%,95.00% 0.44%,97.50% 0.82%,100.00% 0.63%,99.75% 2.50%,99.33% 5.00%,99.41% 7.50%,99.79% 10.00%,99.52% 12.50%,99.56% 15.00%,99.26% 17.50%,99.39% 20.00%,99.76% 22.50%,99.18% 25.00%,99.90% 27.50%,99.65% 30.00%,99.36% 32.50%,99.87% 35.00%,99.59% 37.50%,99.97% 40.00%,99.44% 42.50%,99.36% 45.00%,99.52% 47.50%,99.26% 50.00%,99.74% 52.50%,99.42% 55.00%,99.50% 57.50%,99.51% 60.00%,99.62% 62.50%,99.29% 65.00%,99.21% 67.50%,99.60% 70.00%,99.44% 72.50%,99.95% 75.00%,99.41% 77.50%,99.46% 80.00%,99.17% 82.50%,99.31% 85.00%,99.76% 87.50%,99.68% 90.00%,99.44% 92.50%,99.98% 95.00%,99.61% 97.50%,100.00% 99.76%,97.50% 99.84%,95.00% 99.92%,92.50% 98.92%,90.00% 99.82%,87.50% 99.65%,85.00% 99.45%,82.50% 98.78%,80.00% 99.89%,77.50% 99.37%,75.00% 99.23%,72.50% 98.76%,70.00% 98.85%,67.50% 98.79%,65.00% 99.61%,62.50% 99.42%,60.00% 99.50%,57.50% 98.76%,55.00% 98.66%,52.50% 99.79%,50.00% 99.75%,47.50% 99.68%,45.00% 99.67%,42.50% 99.32%,40.00% 99.18%,37.50% 99.63%,35.00% 99.99%,32.50% 99.41%,30.00% 99.48%,27.50% 99.21%,25.00% 98.67%,22.50% 99.03%,20.00% 99.28%,17.50% 99.14%,15.00% 99.05%,12.50% 99.92%,10.00% 98.74%,7.50% 98.91%,5.00% 98.78%,2.50% 98.88%,0.00% 99.45%,0.34% 97.50%,0.09% 95.00%,0.53% 92.50%,0.05% 90.00%,0.06% 87.50%,0.18% 85.00%,0.14% 82.50%,0.29% 80.00%,0.04% 77.50%,0.00% 75.00%,0.13% 72.50%,0.09% 70.00%,0.31% 67.50%,0.02% 65.00%,0.73% 62.50%,0.52% 60.00%,0.12% 57.50%,0.21% 55.00%,0.29% 52.50%,0.31% 50.00%,0.10% 47.50%,0.71% 45.00%,0.83% 42.50%,0.39% 40.00%,0.41% 37.50%,0.07% 35.00%,0.09% 32.50%,0.29% 30.00%,0.22% 27.50%,0.70% 25.00%,0.14% 22.50%,0.02% 20.00%,0.80% 17.50%,0.44% 15.00%,0.12% 12.50%,0.46% 10.00%,0.02% 7.50%,0.44% 5.00%,0.82% 2.50%); --torn-tb:polygon(0.00% 1.38%,1.67% 1.11%,3.33% 0.42%,5.00% 0.59%,6.67% 0.27%,8.33% 1.24%,10.00% 0.85%,11.67% 1.25%,13.33% 0.53%,15.00% 0.36%,16.67% 1.30%,18.33% 1.58%,20.00% 1.36%,21.67% 1.29%,23.33% 1.31%,25.00% 1.18%,26.67% 0.36%,28.33% 0.83%,30.00% 0.57%,31.67% 0.05%,33.33% 0.04%,35.00% 0.45%,36.67% 0.41%,38.33% 1.11%,40.00% 1.53%,41.67% 0.72%,43.33% 1.50%,45.00% 1.58%,46.67% 1.53%,48.33% 0.58%,50.00% 0.35%,51.67% 0.36%,53.33% 0.31%,55.00% 0.33%,56.67% 1.00%,58.33% 1.44%,60.00% 1.34%,61.67% 0.77%,63.33% 1.04%,65.00% 1.28%,66.67% 0.14%,68.33% 1.06%,70.00% 1.46%,71.67% 1.25%,73.33% 1.20%,75.00% 0.76%,76.67% 0.29%,78.33% 1.26%,80.00% 0.53%,81.67% 1.28%,83.33% 1.55%,85.00% 0.63%,86.67% 0.64%,88.33% 1.51%,90.00% 1.16%,91.67% 0.27%,93.33% 0.20%,95.00% 0.24%,96.67% 1.45%,98.33% 1.29%,100.00% 0.23%,100.00% 98.68%,98.33% 98.43%,96.67% 98.95%,95.00% 99.44%,93.33% 99.12%,91.67% 99.79%,90.00% 99.98%,88.33% 98.45%,86.67% 98.96%,85.00% 99.16%,83.33% 98.51%,81.67% 99.31%,80.00% 98.61%,78.33% 98.68%,76.67% 99.66%,75.00% 99.60%,73.33% 99.53%,71.67% 99.62%,70.00% 99.06%,68.33% 99.59%,66.67% 99.33%,65.00% 99.79%,63.33% 98.54%,61.67% 99.43%,60.00% 99.27%,58.33% 99.07%,56.67% 98.55%,55.00% 99.33%,53.33% 98.53%,51.67% 99.20%,50.00% 99.15%,48.33% 99.16%,46.67% 99.97%,45.00% 99.30%,43.33% 99.71%,41.67% 99.99%,40.00% 98.72%,38.33% 99.72%,36.67% 99.24%,35.00% 98.84%,33.33% 99.11%,31.67% 99.48%,30.00% 99.17%,28.33% 99.11%,26.67% 98.75%,25.00% 99.83%,23.33% 99.10%,21.67% 99.60%,20.00% 99.56%,18.33% 98.76%,16.67% 99.19%,15.00% 99.10%,13.33% 98.78%,11.67% 98.54%,10.00% 99.29%,8.33% 99.02%,6.67% 99.19%,5.00% 99.18%,3.33% 98.89%,1.67% 99.28%,0.00% 99.15%); --torn-sm:polygon(0.00% 1.20%,4.17% 2.35%,8.33% 1.75%,12.50% 2.19%,16.67% 2.36%,20.83% 0.65%,25.00% 1.40%,29.17% 2.36%,33.33% 2.10%,37.50% 0.34%,41.67% 0.30%,45.83% 1.11%,50.00% 0.18%,54.17% 0.60%,58.33% 0.18%,62.50% 1.67%,66.67% 1.96%,70.83% 2.24%,75.00% 0.39%,79.17% 1.79%,83.33% 1.65%,87.50% 0.36%,91.67% 2.21%,95.83% 2.42%,100.00% 0.55%,98.57% 4.17%,99.40% 8.33%,99.27% 12.50%,98.52% 16.67%,98.75% 20.83%,99.76% 25.00%,99.35% 29.17%,99.23% 33.33%,99.49% 37.50%,99.71% 41.67%,99.52% 45.83%,98.92% 50.00%,99.97% 54.17%,99.17% 58.33%,99.34% 62.50%,99.97% 66.67%,99.50% 70.83%,99.06% 75.00%,99.23% 79.17%,99.90% 83.33%,98.52% 87.50%,98.82% 91.67%,98.54% 95.83%,100.00% 99.74%,95.83% 99.34%,91.67% 99.90%,87.50% 98.05%,83.33% 99.32%,79.17% 99.68%,75.00% 98.94%,70.83% 97.72%,66.67% 97.95%,62.50% 99.35%,58.33% 99.63%,54.17% 97.70%,50.00% 98.57%,45.83% 98.25%,41.67% 99.78%,37.50% 99.86%,33.33% 98.28%,29.17% 98.94%,25.00% 99.82%,20.83% 97.65%,16.67% 98.41%,12.50% 98.00%,8.33% 99.79%,4.17% 97.86%,0.00% 99.83%,1.29% 95.83%,0.68% 91.67%,0.51% 87.50%,0.83% 83.33%,1.39% 79.17%,0.40% 75.00%,0.19% 70.83%,0.79% 66.67%,0.36% 62.50%,0.16% 58.33%,0.24% 54.17%,0.08% 50.00%,0.30% 45.83%,0.47% 41.67%,0.46% 37.50%,1.14% 33.33%,0.43% 29.17%,0.75% 25.00%,0.27% 20.83%,0.52% 16.67%,0.03% 12.50%,0.38% 8.33%,0.02% 4.17%);
  --accent-demo:#CB341D;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font:400 1.0625rem/1.6 var(--corps);color:var(--encre);background:var(--papier);overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--bleu);text-underline-offset:.18em}
a:hover{color:var(--corail-fonce)}
h1,h2,h3{font-family:var(--titre);color:var(--bleu);line-height:1.08;margin:0 0 .5em;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.3rem,4.3vw,3.7rem);font-weight:800}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:800}
h3{font-size:1.25rem;font-weight:700}
p{margin:0 0 1em;text-wrap:pretty}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--bleu);color:#fff;padding:10px 16px;border-radius:var(--r)}
.skip:focus{top:12px;color:#fff}
:focus-visible{outline:3px solid var(--corail);outline-offset:3px;border-radius:2px}

/* grain papier et kraft (SVG local, aucune ressource externe) */
.grain{position:relative;isolation:isolate}
.grain::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-image:url(/assets/img/grain.svg);background-size:320px}
.kraft{background:var(--kraft)}
.kraft::before{opacity:.9;mix-blend-mode:multiply}

/* ---------- en-tête ---------- */
.entete{position:sticky;top:0;z-index:50;background:rgba(247,242,232,.94);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--ligne)}
.entete .wrap{display:flex;align-items:center;gap:24px;min-height:72px}
.logo{display:block;width:132px;flex:none}
.logo img{width:100%}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{font:600 .98rem var(--titre);color:var(--encre);text-decoration:none;padding:10px 12px;border-radius:var(--r)}
.nav a:hover{color:var(--corail-fonce)}
.nav .langue{border:1.5px solid var(--bleu);color:var(--bleu);padding:7px 11px;margin-left:6px}
.menu-btn{display:none;margin-left:auto;background:none;border:1.5px solid var(--bleu);color:var(--bleu);font:700 .95rem var(--titre);padding:10px 14px;border-radius:var(--r);min-height:44px;cursor:pointer}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55em;font:700 1.05rem var(--titre);text-decoration:none;padding:15px 24px;min-height:48px;border-radius:var(--r);border:2px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn-plein{background:var(--corail);color:#fff;box-shadow:0 3px 0 var(--corail-fonce)}
.btn-plein:hover{background:var(--corail-fonce);color:#fff;transform:translateY(-1px)}
.btn-trait{border-color:var(--bleu);color:var(--bleu);background:var(--blanc)}
.btn-trait:hover{background:var(--bleu);color:#fff}
.btn svg{width:1.1em;height:1.1em;flex:none}

/* ---------- accueil ---------- */
.hero{padding:clamp(40px,7vw,88px) 0 clamp(56px,8vw,110px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,64px);align-items:center}
.surtitre{font:700 .92rem var(--titre);letter-spacing:.08em;text-transform:uppercase;color:var(--corail-fonce);margin-bottom:18px;display:block}
.hero h1 em{font-style:normal;color:var(--corail);display:block}
.hero .chapeau{font-size:clamp(1.1rem,1.6vw,1.28rem);color:var(--texte);max-width:34em;margin-bottom:30px}
.actions{display:flex;flex-wrap:wrap;gap:14px}
.scene{position:relative;padding:34px 8% 70px}
.feuille{background:var(--blanc);clip-path:var(--torn);box-shadow:var(--ombre);filter:drop-shadow(0 12px 18px rgba(60,40,20,.28))}
.ecran{position:relative;background:var(--blanc);padding:12px;clip-path:var(--torn);transform:rotate(-1.2deg)}
.ecran-ombre{filter:drop-shadow(0 16px 22px rgba(50,30,10,.35))}
.ecran video{width:100%;aspect-ratio:16/9;background:#e8e0d0;border-radius:2px}
.perso{position:absolute;bottom:0;height:62%;width:auto;filter:drop-shadow(0 8px 10px rgba(40,25,10,.3));transform-origin:50% 100%}
.perso.g{left:-6%;animation:respire 5.2s ease-in-out infinite}
.perso.d{right:-6%;animation:respire 5.8s ease-in-out -2s infinite}
@keyframes respire{0%,100%{transform:scale(1,1)}50%{transform:scale(1.008,1.018)}}
.etiquette{position:absolute;background:var(--blanc);font:700 .95rem var(--titre);color:var(--bleu);padding:8px 14px;clip-path:var(--torn-sm);box-shadow:var(--ombre)}
.etiquette.e1{top:-4px;right:12%;z-index:3;transform:rotate(3deg);color:var(--corail-fonce);font-size:1.02rem;padding:9px 16px}

/* ---------- sections ---------- */
.section{padding:clamp(64px,9vw,120px) 0}
.tete-section{max-width:42em;margin-bottom:clamp(32px,5vw,56px)}
.tete-section p{font-size:1.15rem;color:var(--texte)}
.bande{background:var(--papier-2);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}

/* exemples */
.exemples{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px)}
.exemple{margin:0}
.exemple .ecran{transform:rotate(-.8deg)}
.exemple:nth-child(2) .ecran{transform:rotate(.9deg)}
.exemple figcaption{margin-top:22px}
.exemple h3{font-size:1.55rem;margin-bottom:.25em}
.exemple p{color:var(--texte);margin:0}
.pause{position:absolute;right:22px;bottom:22px;background:rgba(22,50,74,.88);color:#fff;border:0;border-radius:var(--r);font:700 .85rem var(--titre);padding:9px 12px;min-height:40px;cursor:pointer}
.pause:hover{background:var(--bleu)}

/* domaines */
.domaines{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(28px,5vw,72px);align-items:start}
.domaines .tete-section{position:sticky;top:110px;margin:0}
.liste-domaines{list-style:none;margin:0;padding:0;border-top:2px solid var(--bleu)}
.domaine{display:grid;grid-template-columns:78px 1fr;gap:22px;align-items:center;padding:22px 0;border-bottom:1px solid var(--ligne)}
.domaine img{height:104px;width:auto;margin:0 auto;filter:drop-shadow(0 4px 5px rgba(40,25,10,.25))}
.domaine h3{margin:0 0 8px;font-size:1.35rem}
.puces{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.puces li{background:var(--blanc);border:1px solid var(--ligne);font:600 .92rem var(--titre);color:var(--texte);padding:5px 11px;border-radius:3px}
.secteurs{margin-top:34px;padding:22px 24px;background:var(--blanc);clip-path:var(--torn-sm)}
.secteurs strong{font-family:var(--titre);color:var(--bleu);display:block;margin-bottom:6px}
.secteurs p{margin:0;color:var(--texte)}

/* styles */
.styles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(28px,5vw,64px);align-items:center}
.onglets{display:flex;flex-direction:column;gap:8px;margin-top:26px}
.onglet{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;background:transparent;border:0;border-left:3px solid var(--ligne);padding:14px 18px;font:700 1.15rem var(--titre);color:var(--texte);cursor:pointer;min-height:48px}
.onglet:hover{color:var(--bleu);border-left-color:var(--bleu)}
.onglet[aria-selected="true"]{color:var(--bleu);border-left-color:var(--corail);background:var(--blanc)}
.onglet span{font:400 .95rem var(--corps);color:var(--texte)}
.cadre-style{position:relative}
.cadre-style .ecran{transform:rotate(1deg)}
.cadre-style img{width:100%;aspect-ratio:4/3;object-fit:cover}
.panneau[hidden]{display:none}

/* personnalisation */
.perso-demo{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.carte-client{position:relative;background:var(--blanc);clip-path:var(--torn);padding:clamp(28px,5vw,56px);min-height:320px;display:flex;flex-direction:column;justify-content:center;gap:18px;transform:rotate(-.6deg)}
.carte-client .marque{display:flex;align-items:center;gap:16px}
.hexa{width:62px;height:62px;flex:none;background:var(--accent-demo);clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);display:grid;place-items:center;color:#fff;font:800 1.5rem var(--titre);transition:background .3s}
.nom-client{font:800 clamp(1.3rem,2.6vw,1.9rem) var(--titre);color:var(--encre);letter-spacing:.02em;text-transform:uppercase;word-break:break-word}
.carte-client .titre-capsule{font:800 clamp(1.6rem,3.4vw,2.5rem)/1.1 var(--titre);color:var(--encre);margin:0}
.carte-client .bandeau{height:10px;width:46%;background:var(--accent-demo);transition:background .3s}
.carte-client .sous{font:600 1rem var(--titre);color:var(--texte);margin:0}
.reglages fieldset{border:0;padding:0;margin:0 0 22px}
.reglages legend,.reglages label.lab{font:700 1rem var(--titre);color:var(--bleu);margin-bottom:10px;display:block}
.pastilles{display:flex;flex-wrap:wrap;gap:10px}
.pastille{width:48px;height:48px;border-radius:50%;border:3px solid var(--blanc);box-shadow:0 0 0 1.5px var(--ligne);cursor:pointer;padding:0}
.pastille[aria-pressed="true"]{box-shadow:0 0 0 3px var(--encre)}
.p1{background:#CB341D}.p2{background:#0B6E4F}.p3{background:#1F5FAD}.p4{background:#C77700}.p5{background:#5B3F8C}.p6{background:#2A2F36}
.champ{width:100%;font:500 1.05rem var(--corps);padding:13px 14px;border:1.5px solid #9C8F7A;border-radius:var(--r);background:var(--blanc);color:var(--encre);min-height:48px}
.champ:focus{border-color:var(--bleu)}
.note{font-size:.95rem;color:var(--texte)}

/* démarche */
.etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);counter-reset:e}
.etape{position:relative;background:var(--blanc);clip-path:var(--torn-sm);padding:32px 28px 30px}
.etape{transform:rotate(var(--rot,0deg))}
.etape .num{font:800 3.2rem/1 var(--titre);color:var(--bleu);display:block;margin-bottom:14px}
.etape:nth-child(3) .num{color:var(--corail)}
.etape h3{font-size:1.4rem;margin-bottom:.35em}
.etape p{color:var(--texte);margin:0}
.valide{display:inline-block;margin-top:14px;font:700 .92rem var(--titre);color:var(--bleu);background:#DDEBF7;padding:5px 10px;border-radius:3px}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:start}
.contact .accroche{color:#fff}
.contact h2{color:#fff}
.contact .accroche p{color:#F1E6D6;font-size:1.15rem}
.contact .accroche a{color:#fff}
.formulaire{background:var(--blanc);padding:clamp(24px,4vw,40px);clip-path:var(--torn-sm)}
.grille{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grille .plein{grid-column:1/-1}
.formulaire label{display:block;font:700 .98rem var(--titre);color:var(--encre);margin-bottom:6px}
.formulaire .opt{font:400 .9rem var(--corps);color:var(--texte)}
textarea.champ{min-height:140px;resize:vertical}
.consent{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;font-size:.95rem;color:var(--texte)}
.consent input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--bleu)}
.consent label{font:400 .95rem var(--corps);color:var(--texte);margin:0}
.miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.etat{margin:14px 0 0;padding:12px 14px;border-radius:var(--r);font-weight:600;display:none}
.etat.ok{display:block;background:#E3F1E7;color:#0E4D2B;border:1px solid #9ACBAB}
.etat.err{display:block;background:#FBE7E3;color:#8A2413;border:1px solid #E3A99C}
.erreur-champ{color:#8A2413;font-size:.9rem;margin-top:5px;display:block}
.champ[aria-invalid="true"]{border-color:#B2301B}
.formulaire .btn{margin-top:20px}
.cf-turnstile{margin-top:16px;min-height:0}

/* pied de page */
.pied{background:var(--bleu-fonce);color:#CFDCE8;padding:56px 0 30px;font-size:.98rem}
.pied a{color:#fff}
.pied .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:36px}
.pied .logo-pied{width:150px;margin-bottom:14px}
.pied h2{font-size:1rem;color:#fff;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin:0 0 8px}
.pied .bas{border-top:1px solid rgba(255,255,255,.15);padding-top:20px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.92rem}
.lien-bouton{background:none;border:0;padding:0;color:#fff;text-decoration:underline;text-underline-offset:.18em;font:inherit;cursor:pointer}

/* bannière témoins */
.temoins{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:470px;background:var(--blanc);color:var(--encre);padding:20px 22px;border:1px solid var(--ligne);border-radius:var(--r);box-shadow:0 18px 40px -12px rgba(20,20,20,.45)}
.temoins[hidden]{display:none}
.temoins h2{font-size:1.1rem;margin-bottom:6px}
.temoins p{font-size:.92rem;line-height:1.5;color:var(--texte);margin-bottom:12px}
.temoins .actions .btn{padding:11px 18px;min-height:44px;font-size:.98rem}

/* pages texte (légal, 404) */
.page-texte{padding:clamp(48px,7vw,90px) 0}
.page-texte .wrap{max-width:820px}
.page-texte h1{font-size:clamp(2rem,4vw,3rem)}
.page-texte h2{font-size:1.45rem;margin-top:1.8em}
.page-texte li{margin-bottom:.4em}
.maj{color:var(--texte);font-size:.95rem}
.introuvable{min-height:62vh;display:grid;place-items:center;text-align:left}
.introuvable .wrap{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;max-width:880px}
.introuvable img{height:300px;width:auto}

/* ---------- réactif ---------- */
@media (max-width:980px){
  .hero .wrap,.styles,.perso-demo,.contact,.domaines{grid-template-columns:1fr}
  .domaines .tete-section{position:static}
  .scene{max-width:640px}
}
@media (max-width:860px){
  .menu-btn{display:inline-flex}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--papier);border-bottom:1px solid var(--ligne);flex-direction:column;align-items:stretch;padding:10px 18px 18px;display:none}
  .nav.ouvert{display:flex}
  .nav a{padding:14px 8px;border-bottom:1px solid var(--ligne)}
  .nav .langue{margin:12px 0 0;text-align:center}
  .entete .wrap{position:relative}
}
@media (max-width:720px){
  .exemples,.etapes,.grille,.pied .cols{grid-template-columns:1fr}
  .domaine{grid-template-columns:60px 1fr;gap:16px}
  .domaine img{height:84px}
  .introuvable .wrap{grid-template-columns:1fr}
  .introuvable img{height:200px}
  .perso{height:48%}
  .perso.g{left:-4%}.perso.d{right:-4%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{.entete,.temoins,.pied,.menu-btn{display:none}}

/* ruban adhésif (collage) */
.ruban{position:relative}
.ruban::after{content:"";position:absolute;z-index:4;top:-12px;left:50%;width:120px;height:30px;margin-left:-60px;background:rgba(236,224,196,.82);box-shadow:0 1px 2px rgba(60,40,20,.2);transform:rotate(-3deg);clip-path:polygon(2% 8%,98% 0,100% 92%,0 100%)}
.exemple:nth-child(2) .ruban::after{transform:rotate(4deg);left:30%}
.cadre-style .ruban::after{left:20%;transform:rotate(-5deg)}
/* bouton lecture sur l'affiche */
.lecteur{position:relative}
.jouer{position:absolute;inset:12px;display:grid;place-items:center;background:transparent;border:0;cursor:pointer;z-index:2}
.jouer span{display:inline-flex;align-items:center;gap:12px;background:var(--corail);color:#fff;font:700 1.05rem var(--titre);padding:14px 22px 14px 18px;border-radius:var(--r);box-shadow:0 4px 0 var(--corail-fonce),0 14px 30px -10px rgba(0,0,0,.5);transition:transform .15s}
.jouer svg{width:22px;height:22px}
.jouer:hover span,.jouer:focus-visible span{transform:scale(1.05)}
.lecteur.joue .jouer{display:none}

/* ===== défilement paginé (ordinateur) : une section = une page ===== */
@media (min-width:1024px) and (min-height:680px){
  html{scroll-snap-type:y mandatory;scroll-padding-top:var(--h-entete,73px)}
  main>section{min-height:calc(100svh - var(--h-entete,73px));box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always;padding-top:32px;padding-bottom:32px}
  main>section>.wrap{width:100%}
  .site-pied{scroll-snap-align:end}
  .domaines .tete-section{top:calc(var(--h-entete,72px) + 24px)}
}
/* points de pagination */
.pages{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:60;display:none;flex-direction:column;gap:12px;margin:0;padding:10px 6px;list-style:none}
@media (min-width:1024px) and (min-height:680px){.pages{display:flex}}
.pages a{display:block;width:12px;height:12px;border-radius:50%;border:2px solid var(--bleu);background:transparent;position:relative;transition:transform .2s,background .2s}
.pages a[aria-current="true"]{background:var(--corail);border-color:var(--corail);transform:scale(1.25)}
.pages a:hover,.pages a:focus-visible{transform:scale(1.25)}
.pages a span{position:absolute;right:22px;top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--bleu);color:#fff;font:600 .8rem var(--titre);padding:4px 9px;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .15s}
.pages a:hover span,.pages a:focus-visible span{opacity:1}

/* ===== passe « wow » ===== */
/* aperçu vivant dans l'écran du haut : la vraie vidéo, muette, en boucle */
.ecran .boucle-hero{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:cover;z-index:1;opacity:0;transition:opacity .6s}
.ecran .boucle-hero.vivant{opacity:1}
.lecteur.joue .boucle-hero{display:none}
.jouer{z-index:3}
.jouer span{animation:appel 2.8s ease-in-out 1.2s infinite}
@keyframes appel{0%,100%{box-shadow:0 4px 0 var(--corail-fonce),0 14px 30px -10px rgba(0,0,0,.5),0 0 0 0 rgba(203,52,29,.45)}50%{box-shadow:0 4px 0 var(--corail-fonce),0 14px 30px -10px rgba(0,0,0,.5),0 0 0 12px rgba(203,52,29,0)}}

/* entrée du haut : les éléments se posent comme des papiers sur la table */
.hero .surtitre,.hero h1,.hero .chapeau,.hero .actions{animation:pose .8s cubic-bezier(.2,.7,.2,1) both}
.hero h1{animation-delay:.08s}.hero .chapeau{animation-delay:.2s}.hero .actions{animation-delay:.32s}
.hero .ecran-ombre{animation:atterrit 1s cubic-bezier(.2,.8,.25,1.15) .25s both}
.hero .etiquette.e1{animation:colle .7s cubic-bezier(.3,1.4,.5,1) .9s both}
.hero .perso.g{animation:entre-g .9s cubic-bezier(.2,.8,.3,1.1) .55s both,respire 5.2s ease-in-out 1.5s infinite}
.hero .perso.d{animation:entre-d .9s cubic-bezier(.2,.8,.3,1.1) .7s both,respire 5.8s ease-in-out 1.6s infinite}
@keyframes pose{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes atterrit{from{opacity:0;transform:translateY(-28px) rotate(-4deg) scale(.96)}to{opacity:1;transform:none}}
@keyframes colle{from{opacity:0;transform:scale(1.25) rotate(9deg)}to{opacity:1;transform:rotate(3deg)}}
@keyframes entre-g{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes entre-d{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}

/* apparitions au défilement */
.attend{opacity:0;transform:translateY(22px) rotate(var(--rot,0deg))}
.tete-section,.exemple,.liste-domaines>li,.cadre-style,.carte-client,.reglages,.etape,.formulaire,.accroche{transition:opacity .7s ease var(--d,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.etape:nth-child(1){--rot:-.5deg}.etape:nth-child(2){--rot:.6deg}.etape:nth-child(3){--rot:-.3deg}

/* cartes vidéo : on les soulève au survol */
.exemple .ecran-ombre,.cadre-style .ecran-ombre{transition:transform .35s cubic-bezier(.2,.7,.2,1),filter .35s}
.exemple:hover .ecran-ombre{transform:translateY(-6px) rotate(.4deg);filter:drop-shadow(0 26px 30px rgba(50,30,10,.38))}
.domaine img{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.domaine:hover img{transform:translateY(-4px) rotate(-3deg) scale(1.06)}
.domaine .puces li,.domaine li{transition:background .2s,border-color .2s}

/* styles : fondu entre les visuels */
.panneau:not([hidden]) img{animation:fondu .45s ease both}
@keyframes fondu{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}

/* démarche : un fil rouge qui relie les étapes */
.etapes{position:relative}
.etapes::before{content:"";position:absolute;left:4%;right:4%;top:52px;height:3px;background:repeating-linear-gradient(90deg,var(--corail) 0 14px,transparent 14px 24px);transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.4,0,.2,1) .2s;z-index:0}
.etapes.trace::before{transform:scaleX(1)}
.etape{z-index:1}
@media (max-width:900px){.etapes::before{display:none}}

@media (prefers-reduced-motion:reduce){
  .ecran .boucle-hero{display:none}
  .attend{opacity:1;transform:none}
}

.jouer span{white-space:nowrap}
@media (max-width:480px){.jouer span{font-size:.92rem;padding:11px 16px 11px 14px}}