/*
Theme Name: Numero Uno
Description: Thème du site de vente Numero Uno SEO By PTL. DA v4 « retro mascot » : crème, or, orange brûlé, contours encre, grain, El Numero le 1 qui court.
Author: Agence PTL
Version: 2.0.0
Requires PHP: 8.0
Text Domain: numerouno
*/

/* ---------- Polices auto-hébergées (latin) ---------- */
@font-face{font-family:"Lilita One";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/lilita-400.woff2) format("woff2")}
@font-face{font-family:Shrikhand;font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/shrikhand-400.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/inter-600.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/inter-700.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:900;font-display:swap;src:url(assets/fonts/inter-900.woff2) format("woff2")}

/* ---------- Tokens DA v4 ---------- */
:root{
  --encre:#221C15;
  --creme:#F6EEDD;
  --creme-2:#FDF8EC;
  --or:#F2B33D;
  --or-fonce:#D99A2B;
  --orange:#E85E3B;
  --tomate:#D6382E;
  --ciel:#8FC7E3;
  --vert:#4E9B6F;
  --gris:#6E655A;
  --ptl:#0bbba0;
  --rayon:18px;
  --trait:3px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:Inter,system-ui,sans-serif;background:var(--creme);color:var(--encre);line-height:1.6;font-size:16px;position:relative}
/* Grain papier global */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg{max-width:100%;height:auto}
a{color:inherit}
.display{font-family:"Lilita One",sans-serif;letter-spacing:.01em;line-height:1.02;text-transform:uppercase}
.groovy{font-family:Shrikhand,cursive;text-transform:none;letter-spacing:.01em}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
section{padding:72px 0}
.ecran-lecteur{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Boutons rétro (ombre dure + squish) ---------- */
.btn{display:inline-block;padding:15px 28px;border-radius:14px;font-family:"Lilita One";font-size:17px;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;border:var(--trait) solid var(--encre);box-shadow:5px 5px 0 var(--encre);transition:transform .12s ease,box-shadow .12s ease;cursor:pointer;background:#fff;color:var(--encre)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--encre)}
.btn:active{transform:translate(3px,3px) scale(.98);box-shadow:2px 2px 0 var(--encre)}
.btn-or{background:var(--or)}
.btn-ghost{background:var(--creme-2)}
.btn-ghost.inverse{background:transparent;color:var(--creme);border-color:var(--creme);box-shadow:5px 5px 0 rgba(246,238,221,.35)}
.btn-orange{background:var(--orange);color:#fff}

.cocarde{display:inline-flex;align-items:center;justify-content:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--or);border:2px solid var(--encre);color:var(--encre);font-family:"Lilita One";font-size:.8em;flex:none}
.badge-vert{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--vert);color:var(--vert);font-weight:700;font-size:14px;padding:8px 16px;border-radius:999px;box-shadow:3px 3px 0 var(--vert)}
.surligne{background:linear-gradient(transparent 55%,var(--or) 55%,var(--or) 92%,transparent 92%)}

/* Étoile scintillante animée */
.etoile{display:inline-block;animation:scintille 2.4s ease-in-out infinite}
.etoile:nth-child(2n){animation-delay:.8s}
.etoile:nth-child(3n){animation-delay:1.4s}
@keyframes scintille{0%,100%{transform:scale(1) rotate(0deg);opacity:1}50%{transform:scale(.55) rotate(18deg);opacity:.55}}

/* Apparition au scroll */
.apparait{opacity:0;transform:translateY(26px) rotate(.4deg);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.9,.3,1.2)}
.apparait.visible{opacity:1;transform:none}
.apparait.d1{transition-delay:.08s}.apparait.d2{transition-delay:.16s}.apparait.d3{transition-delay:.24s}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  .apparait{opacity:1;transform:none}
}

/* ---------- Navigation ---------- */
.site-nav{position:sticky;top:0;background:var(--creme);z-index:50;border-bottom:var(--trait) solid var(--encre)}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:10px;padding-bottom:10px;gap:14px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--encre)}
.logo-badge{display:block;flex:none;width:56px;height:64px;margin:-14px 0 -10px;transform-origin:50% 80%;transition:transform .3s cubic-bezier(.2,.9,.3,1.6)}
.logo-badge img{display:block;width:100%;height:100%}
.logo:hover .logo-badge{transform:rotate(-8deg) scale(1.08)}
.logo-texte{display:flex;flex-direction:column;line-height:1}
.logo-nom{font-family:"Lilita One";font-size:24px;text-transform:uppercase;letter-spacing:.01em;text-shadow:2px 2px 0 var(--or)}
.logo-sous{font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--gris);margin-top:5px}
@media(max-width:480px){.logo-badge{width:42px;height:48px}.logo-nom{font-size:20px}.logo-sous{font-size:8.5px;letter-spacing:.1em}}
.nav-liens{display:flex;gap:20px;align-items:center;font-size:14px;font-weight:700;list-style:none}
.nav-liens a{color:var(--encre);text-decoration:none}
.nav-liens a:not(.btn):hover{color:var(--orange)}
.nav-liens .btn{padding:9px 18px;font-size:14px;box-shadow:3px 3px 0 var(--encre)}
@media(max-width:820px){.nav-liens li:not(.nav-cta){display:none}}

/* ---------- Motifs rétro (rythme des blocs) ---------- */
/* Rayons « sunburst » façon affiche années 50 */
.sunburst{background:repeating-conic-gradient(from 0deg at 50% 62%, var(--creme) 0deg 7deg, var(--creme-2) 7deg 14deg)}
.sunburst-or{background:repeating-conic-gradient(from 0deg at 50% 60%, var(--or) 0deg 7deg, #F5C15C 7deg 14deg)}
/* Trame de points demi-teinte */
.trame{background-image:radial-gradient(rgba(34,28,21,.14) 1.4px, transparent 1.6px);background-size:14px 14px}
/* Vague de séparation entre sections */
.vague{display:block;width:100%;height:42px;margin-bottom:-2px}
/* Sticker rond tamponné */
.sticker{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:118px;height:118px;border-radius:50%;background:var(--orange);color:#fff;border:var(--trait) solid var(--encre);box-shadow:4px 4px 0 var(--encre);font-family:"Lilita One";text-transform:uppercase;text-align:center;line-height:1.05;font-size:15px;transform:rotate(-12deg);animation:tamponne 3.2s ease-in-out infinite}
.sticker b{font-size:30px}
@keyframes tamponne{0%,100%{transform:rotate(-12deg) scale(1)}50%{transform:rotate(-6deg) scale(1.06)}}
.serv .ico svg{width:56px;height:56px}

/* ---------- INTRO IMMERSIVE (scrollytelling) ---------- */
.intro-scene{position:relative;height:420vh;background:var(--creme)}
.intro-colle{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
/* Transitions pilotées au scroll par front.js : iris (0→1), étoile (1→2), volet (2→3). */
.acte{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:84px 20px 20px;visibility:hidden;overflow:hidden;isolation:isolate}
.acte.vu{visibility:visible}
.acte-0{z-index:4}.acte-douleur{z-index:1}.acte-reponse{z-index:2}.acte-services{z-index:3}
/* Rayons tournants : pseudo-élément composité (pas de repeint du dégradé) */
.acte-reponse::before{content:"";position:absolute;z-index:-1;left:50%;top:60%;width:260vmax;height:260vmax;margin:-130vmax 0 0 -130vmax;background:repeating-conic-gradient(var(--or) 0deg 7deg, #F5C15C 7deg 14deg);animation:tourne 40s linear infinite}
.acte-reponse{background:var(--or)}
@keyframes tourne{to{transform:rotate(360deg)}}
@keyframes monte{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* Acte 0 : ouverture en deux colonnes, texte | médaillon rayonnant */
.acte-0{background:var(--creme) radial-gradient(rgba(34,28,21,.09) 1.3px,transparent 1.5px) 0 0/16px 16px}
.ouverture{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(24px,4vw,64px);width:min(1180px,100%);text-align:left;translate:0 calc(var(--p0,0) * -24px)}
.surtitre{display:inline-block;font-weight:800;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;background:var(--creme-2);border:2px solid var(--encre);border-radius:999px;padding:6px 14px;box-shadow:3px 3px 0 var(--encre);animation:monte .5s .1s both}
.acte-0 .titre-geant{font-size:clamp(64px,9.2vw,146px);line-height:.88;margin:20px 0 4px;text-shadow:6px 6px 0 var(--or)}
.acte-0 .mot{display:inline-block;animation:chute .9s cubic-bezier(.2,.9,.3,1.35) both}
.acte-0 .mot + br + .mot{animation-delay:.16s}
@keyframes chute{from{transform:translateY(-110vh) rotate(-9deg)}to{transform:none}}
.acte-0 .sous{font-family:Shrikhand;color:var(--orange);font-size:clamp(20px,2.3vw,30px);margin-top:12px;animation:monte .6s .5s both}
.ouv-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;animation:monte .6s .65s both}
.ouv-visuel{position:relative;display:grid;place-items:center;width:100%;max-width:min(520px,64vh);aspect-ratio:1;justify-self:center}
.medaillon{position:absolute;inset:7%;border-radius:50%;border:var(--trait) solid var(--encre);box-shadow:8px 8px 0 var(--encre);overflow:hidden;background:var(--or);animation:pop-medaillon .7s .15s cubic-bezier(.2,.9,.3,1.4) both}
.medaillon::before{content:"";position:absolute;inset:-30%;background:repeating-conic-gradient(var(--or) 0deg 8deg,#F7C866 8deg 16deg);animation:tourne 60s linear infinite}
@keyframes pop-medaillon{from{transform:scale(0) rotate(-30deg)}to{transform:none}}
.intro-mascotte{position:relative;width:80%;margin-top:8%;transform-origin:50% 100%;animation:monte .7s .35s both,course-bob .7s 1.05s ease-in-out infinite;scale:calc(1 + var(--p0,0) * var(--zoom,.12))}
.acte-0 .sticker{position:absolute;top:3%;right:0;z-index:2;rotate:calc(var(--p0,0) * 50deg);animation:tampon-in .55s .8s cubic-bezier(.2,.9,.3,1.5) both,tamponne 3.2s 1.4s ease-in-out infinite}
@keyframes tampon-in{from{transform:scale(0) rotate(-140deg)}to{transform:rotate(-12deg) scale(1)}}
.acte-0 .defile{position:absolute;bottom:22px;left:0;right:0;font-size:13px;font-weight:700;color:var(--gris);animation:rebond 1.6s ease-in-out infinite;opacity:calc(1 - var(--p0,0) * 3)}
@keyframes rebond{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@media(max-width:860px){
  .ouverture{grid-template-columns:1fr;gap:10px;text-align:center}
  .ouv-texte{display:flex;flex-direction:column;align-items:center}
  .surtitre{font-size:10px;padding:5px 10px}
  .acte-0 .titre-geant{font-size:clamp(48px,14vw,84px);margin:12px 0 2px;text-shadow:4px 4px 0 var(--or)}
  .acte-0 .sous{font-size:17px;margin-top:6px}
  .ouv-cta{justify-content:center;margin-top:14px}
  .ouv-cta .btn{padding:10px 15px;font-size:13.5px}
  .ouv-visuel{max-width:min(270px,60vw,36vh)}
  .acte-0 .sticker{width:78px;height:78px;font-size:10px;border-width:2px}.acte-0 .sticker b{font-size:19px}
  .intro-mascotte{--zoom:.08}
  .acte-0 .defile{display:none}
}
.intro-mascotte img,.coureur img,.conf-mascotte img{display:block;width:100%;height:auto}
@keyframes course-bob{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-9px) rotate(1.2deg)}}
.acte-douleur{background:var(--encre);color:var(--creme)}
.douleur-kicker{font-family:Shrikhand;color:var(--or);font-size:clamp(20px,2.4vw,28px);margin-bottom:22px;opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s}
.acte-douleur.actif .douleur-kicker{opacity:1;transform:none}
.punchs{list-style:none;display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin:0;padding:0}
.acte-douleur .punch{display:flex;align-items:center;gap:20px;font-size:clamp(28px,5vw,58px);line-height:1.05;text-align:left;opacity:0;transform:scale(2.2) rotate(-6deg);transition:transform .34s cubic-bezier(.3,1.5,.5,1),opacity .14s}
.acte-douleur .punch:nth-child(2n){transform:scale(2.2) rotate(6deg)}
.acte-douleur .punch.frappe{opacity:1;transform:none}
.acte-douleur .punch b{color:var(--orange)}
.croix{flex:none;position:relative;width:.82em;height:.82em;border-radius:50%;background:var(--tomate);border:3px solid var(--creme);box-shadow:3px 3px 0 #000}
.croix::before,.croix::after{content:"";position:absolute;left:50%;top:50%;width:58%;height:13%;background:var(--creme);border-radius:3px;transform:translate(-50%,-50%) rotate(45deg)}
.croix::after{transform:translate(-50%,-50%) rotate(-45deg)}
.acte-douleur .punch-final{margin-top:34px;display:inline-block;background:var(--or);color:var(--encre);padding:12px 26px;border:var(--trait) solid var(--creme);border-radius:14px;box-shadow:6px 6px 0 var(--tomate);font-size:clamp(22px,3.4vw,42px);text-align:center}
.acte-douleur .punch-final.frappe{transform:rotate(-2deg)}
@media(max-width:760px){.punchs{gap:12px}.acte-douleur .punch{gap:12px}.acte-douleur .punch-final{margin-top:24px;padding:10px 16px}}
.intro-colle.secousse{animation:secousse .3s linear}
@keyframes secousse{20%{transform:translate(-9px,5px)}40%{transform:translate(8px,-6px)}60%{transform:translate(-6px,-3px)}80%{transform:translate(4px,4px)}}
.acte-reponse .titre-geant{text-shadow:5px 5px 0 var(--creme-2)}
.acte-reponse.actif .titre-geant{animation:boing .8s cubic-bezier(.2,.9,.3,1.5) both}
@keyframes boing{from{transform:scale(.15) rotate(-12deg)}to{transform:none}}
.acte-reponse.actif .bulle{animation:monte .5s .35s both}
.acte-reponse .vitesse{position:absolute;left:0;right:0;bottom:60px;height:150px;opacity:.75;background-image:repeating-linear-gradient(90deg,var(--creme-2) 0 110px,transparent 110px 300px),repeating-linear-gradient(90deg,var(--creme-2) 0 60px,transparent 60px 240px),repeating-linear-gradient(90deg,var(--creme-2) 0 150px,transparent 150px 380px);background-size:100% 6px;background-repeat:no-repeat;background-position:0 20px,90px 75px,30px 130px;animation:file .5s linear infinite}
@keyframes file{to{background-position:-300px 20px,-150px 75px,-350px 130px}}
.acte-services.actif h2{animation:glisse .6s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes glisse{from{opacity:0;transform:translateX(-70px) rotate(-3deg)}to{opacity:1;transform:none}}
/* Volet rayé qui suit le bord de la transition 2→3 */
.volet{position:absolute;left:0;top:0;width:46px;height:100%;z-index:5;transform-origin:0 0;visibility:hidden;pointer-events:none;background:linear-gradient(90deg,var(--encre) 0 4px,var(--orange) 4px 20px,var(--encre) 20px 24px,var(--or) 24px 42px,var(--encre) 42px 46px)}
/* Compteur de position : empire pendant la douleur, remonte jusqu'à #1 */
.compteur{position:absolute;top:84px;left:22px;z-index:6;background:var(--encre);color:var(--creme);border:3px solid var(--encre);border-radius:14px;box-shadow:4px 4px 0 var(--or);padding:8px 14px 6px;text-align:left;opacity:0;transform:translateY(-10px);transition:opacity .3s,transform .3s;pointer-events:none}
.compteur.montre{opacity:1;transform:none}
.compteur small{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#b7ab99}
.compteur b{font-family:"Lilita One";font-size:34px;line-height:1.1;color:var(--tomate);transition:color .3s}
.compteur.proche b{color:var(--creme)}
.compteur.un{background:var(--or);box-shadow:4px 4px 0 var(--encre);animation:tampon-un .5s cubic-bezier(.2,.9,.3,1.6)}
.compteur.un small{color:var(--encre)}
.compteur.un b{color:var(--encre)}
@keyframes tampon-un{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-6deg)}100%{transform:none}}
@media(max-width:760px){.compteur{top:76px;left:12px;padding:6px 10px 4px}.compteur b{font-size:24px}.compteur small{font-size:9px}}
.acte-douleur{background-image:radial-gradient(rgba(246,238,221,.08) 1.4px, transparent 1.6px);background-size:14px 14px}
.acte-reponse .titre-geant{font-size:clamp(40px,8vw,110px)}
.acte-reponse .bulle{font-family:Shrikhand;font-size:clamp(18px,3vw,30px);color:var(--tomate);margin-top:6px}
.acte-reponse .piste{position:absolute;bottom:0;left:0;width:100%;height:250px;pointer-events:none}
.acte-reponse .coureur{position:absolute;bottom:0;left:0;width:250px;will-change:transform}
.acte-reponse .coureur picture{display:block;animation:course-bob .45s ease-in-out infinite}
.acte-reponse .coureur:has(.mascotte-anim){width:340px}
@media(max-width:760px){.acte-reponse .coureur{width:160px}.acte-reponse .coureur:has(.mascotte-anim){width:220px}}
.acte-services{background:var(--creme)}
.acte-services h2{font-size:clamp(28px,5vw,54px);margin-bottom:26px}
.serv-grille{display:grid;grid-template-columns:repeat(4,minmax(150px,210px));gap:16px;justify-content:center}
@media(max-width:860px){.serv-grille{grid-template-columns:repeat(2,minmax(140px,1fr));max-width:480px}}
.serv{background:#fff;border:var(--trait) solid var(--encre);border-radius:var(--rayon);box-shadow:6px 6px 0 var(--encre);padding:20px 16px;opacity:0;transform:translateY(40px) scale(.8);transition:all .45s cubic-bezier(.2,.9,.3,1.35);text-decoration:none;color:var(--encre)}
.serv.pop{opacity:1;transform:none}
.serv:hover{transform:translate(-3px,-3px) rotate(-1.5deg);box-shadow:9px 9px 0 var(--encre)}
.serv .ico{font-size:34px;line-height:1;margin-bottom:8px}
.serv h3{font-family:"Lilita One";font-size:16px;text-transform:uppercase;margin-bottom:4px}
.serv p{font-size:12.5px;color:var(--gris);line-height:1.4}
@media(max-width:760px){.acte-services h2{font-size:26px;margin-bottom:16px}.serv{padding:12px 10px;box-shadow:4px 4px 0 var(--encre)}.serv p{display:none}.serv .ico svg{width:40px;height:40px}.acte-services .btn{padding:11px 16px;font-size:14px}}
/* Scène 3 v2 : « Vamos ! » tamponné, accroche en pastille, route sous le coureur, bulle BD */
.reponse-texte{position:relative;z-index:1;margin-top:-12vh;display:flex;flex-direction:column;align-items:center}
.acte-reponse .vamos{font-family:Shrikhand;font-size:clamp(34px,5vw,64px);line-height:1.1;color:var(--tomate);transform:rotate(-6deg);text-shadow:3px 3px 0 var(--creme-2),6px 6px 0 var(--encre);margin-bottom:-4px}
.acte-reponse.actif .vamos{animation:tampon-vamos .55s cubic-bezier(.2,.9,.3,1.6) both}
@keyframes tampon-vamos{from{transform:scale(2.6) rotate(-20deg);opacity:0}to{transform:rotate(-6deg);opacity:1}}
.acte-reponse .titre-geant{font-size:clamp(44px,8.4vw,120px);line-height:.95;text-shadow:5px 5px 0 var(--creme-2)}
.acte-reponse.actif .titre-geant{animation-delay:.12s}
.acte-reponse .bulle{font-family:Inter,sans-serif;font-weight:800;font-size:clamp(14px,1.6vw,19px);color:var(--encre);background:var(--creme-2);border:3px solid var(--encre);border-radius:999px;padding:10px 22px;box-shadow:4px 4px 0 var(--encre);margin-top:20px}
.acte-reponse .sol{position:absolute;left:0;right:0;bottom:0;height:58px;background:var(--encre)}
.acte-reponse .sol::after{content:"";position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;background:repeating-linear-gradient(90deg,var(--or) 0 60px,transparent 60px 120px);animation:route .3s linear infinite}
@keyframes route{to{background-position:-120px 0}}
.acte-reponse .coureur{bottom:30px;z-index:1}
.acte-reponse .vitesse{display:none}
.bulle-bd{position:absolute;top:-14px;left:58%;z-index:2;font-family:"Lilita One";font-size:20px;line-height:1;white-space:nowrap;background:#fff;color:var(--encre);border:3px solid var(--encre);border-radius:16px;padding:8px 13px;box-shadow:3px 3px 0 var(--encre);transform:rotate(6deg);animation:bulle-bd 1.1s ease-in-out infinite}
.bulle-bd::after{content:"";position:absolute;left:14px;bottom:-10px;width:14px;height:14px;background:#fff;border-right:3px solid var(--encre);border-bottom:3px solid var(--encre);transform:rotate(45deg)}
@keyframes bulle-bd{0%,100%{transform:rotate(6deg) scale(1)}50%{transform:rotate(1deg) scale(1.08)}}
@media(max-width:760px){.reponse-texte{margin-top:-16vh}.acte-reponse .sol{height:44px}.acte-reponse .coureur{bottom:22px}.bulle-bd{font-size:15px;padding:6px 9px;top:-18px}.acte-reponse .vamos{font-size:34px;margin-bottom:6px}}

/* Scène 4 v2 : cartes à bandeau de couleur, numéro, pastille d'icône, flèche */
.acte-services{background:var(--creme) radial-gradient(rgba(34,28,21,.09) 1.3px,transparent 1.5px) 0 0/16px 16px}
.serv-kicker{font-family:Shrikhand;color:var(--orange);font-size:clamp(18px,2vw,24px);margin-bottom:4px}
.acte-services.actif .serv-kicker{animation:monte .5s both}
.acte-services h2{font-size:clamp(30px,4.6vw,58px);margin-bottom:34px}
.tampon{display:inline-block;background:var(--orange);color:#fff;padding:2px 16px 4px;border:3px solid var(--encre);border-radius:12px;box-shadow:4px 4px 0 var(--encre);transform:rotate(-3deg);margin-left:6px}
.acte-services.actif .tampon{animation:tampon-deux .5s .45s cubic-bezier(.2,.9,.3,1.6) both}
@keyframes tampon-deux{from{transform:scale(2.2) rotate(-14deg);opacity:0}to{transform:rotate(-3deg);opacity:1}}
.serv-grille{grid-template-columns:repeat(4,minmax(170px,240px));gap:20px}
.serv{position:relative;overflow:hidden;text-align:left;padding:0 18px 16px;display:flex;flex-direction:column}
.serv::before{content:"";display:block;height:12px;margin:0 -18px 16px;background:var(--c);border-bottom:var(--trait) solid var(--encre)}
.serv-or{--c:var(--or)}.serv-orange{--c:var(--orange)}.serv-ciel{--c:var(--ciel)}.serv-vert{--c:var(--vert)}
.serv .ico{width:62px;height:62px;border-radius:50%;background:var(--c);border:3px solid var(--encre);display:grid;place-items:center;margin-bottom:12px;font-size:0}
.serv .ico svg{width:36px;height:36px}
.serv-num{position:absolute;top:24px;right:14px;font-family:"Lilita One";font-size:28px;line-height:1;color:rgba(34,28,21,.15)}
.serv h3{font-size:18px}
.serv p{font-size:13px;flex:1}
.serv-fleche{align-self:flex-end;margin-top:10px;width:32px;height:32px;border-radius:50%;border:2px solid var(--encre);display:grid;place-items:center;font-weight:800;transition:background .2s,transform .2s}
.serv:hover .serv-fleche{background:var(--c);transform:translateX(4px)}
.serv-grille .serv:nth-child(2n){transform:translateY(40px) scale(.8) rotate(5deg)}
.serv-grille .serv:nth-child(2n+1){transform:translateY(40px) scale(.8) rotate(-5deg)}
.serv-grille .serv.pop{opacity:1;transform:none}
.serv-grille .serv.pop:hover{transform:translate(-3px,-3px) rotate(-1.5deg)}
.serv-cta{margin-top:34px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-width:860px){.serv-grille{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:480px}}
@media(max-width:760px){.serv{padding:0 10px 10px}.serv::before{margin:0 -10px 10px;height:8px}.serv .ico{width:44px;height:44px;margin-bottom:8px}.serv .ico svg{width:26px;height:26px}.serv-num{top:16px;right:10px;font-size:20px}.serv h3{font-size:14px}.serv-fleche{display:none}.serv-cta{margin-top:18px}.tampon{padding:0 10px 2px;margin-left:0}.serv-grille{gap:12px}.acte-services h2{margin-bottom:18px}.serv-kicker{font-size:16px}}

/* Dégradé statique si JS absent ou reduced motion : actes empilés */
.no-js .intro-scene,.intro-statique .intro-scene{height:auto}
.no-js .intro-colle,.intro-statique .intro-colle{position:static;height:auto;overflow:visible;display:block}
.no-js .acte,.intro-statique .acte{position:relative;visibility:visible;clip-path:none;min-height:60vh}
.no-js .acte-douleur .punch,.intro-statique .punch{opacity:1;transform:none}
.no-js .douleur-kicker,.intro-statique .douleur-kicker{opacity:1;transform:none}
.no-js .volet,.no-js .compteur,.intro-statique .volet,.intro-statique .compteur{display:none}
.no-js .serv,.intro-statique .serv,.no-js .serv-grille .serv,.intro-statique .serv-grille .serv{opacity:1;transform:none}

/* ---------- Marquee (bandeau défilant) ---------- */
.marquee{background:var(--encre);border-top:var(--trait) solid var(--encre);border-bottom:var(--trait) solid var(--encre);overflow:hidden;padding:12px 0}
.marquee-piste{display:flex;gap:38px;white-space:nowrap;animation:defilement 22s linear infinite;width:max-content}
.marquee span{font-family:"Lilita One";text-transform:uppercase;font-size:18px;color:var(--creme)}
.marquee span.or{color:var(--or)}
@keyframes defilement{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Sections génériques ---------- */
.douleurs h2,.briques h2,.conf h2,.prix h2,.agence h2,.faq h2{font-size:clamp(28px,4vw,46px);margin-bottom:12px}
.douleurs,.faq{background-image:radial-gradient(rgba(34,28,21,.10) 1.4px, transparent 1.6px);background-size:14px 14px}
.conf{background:repeating-conic-gradient(from 0deg at 75% 50%, var(--creme) 0deg 7deg, var(--creme-2) 7deg 14deg)}
.agence{background:var(--creme-2)}
.ss{color:var(--gris);max-width:44em;margin-bottom:40px;font-size:17px}
.grille3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:860px){.grille3{grid-template-columns:1fr}}
.carte{background:#fff;border:var(--trait) solid var(--encre);border-radius:var(--rayon);padding:26px;box-shadow:6px 6px 0 var(--encre);transition:transform .15s ease,box-shadow .15s ease}
.carte:hover{transform:translate(-3px,-3px) rotate(-.6deg);box-shadow:9px 9px 0 var(--encre)}
.carte .chiffre{font-family:"Lilita One";font-size:38px;color:var(--tomate);margin-bottom:8px}
.carte h3{font-size:17px;margin-bottom:8px}
.carte p{font-size:14.5px;color:#4b443b}
.carte a{color:var(--orange)}

/* ---------- Preuve (mockup positions) ---------- */
.preuve{background:var(--ciel);border-top:var(--trait) solid var(--encre);border-bottom:var(--trait) solid var(--encre)}
.preuve .deux{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media(max-width:860px){.preuve .deux{grid-template-columns:1fr}}
.mock{background:var(--encre);border:var(--trait) solid var(--encre);border-radius:20px;padding:26px;color:var(--creme);box-shadow:8px 8px 0 rgba(34,28,21,.45)}
.mock .titre{font-size:13px;color:#b7ab99;margin-bottom:18px;display:flex;justify-content:space-between;gap:10px}
.mock .ligne{display:grid;grid-template-columns:52px 1fr 44px;gap:12px;align-items:center;margin-bottom:14px;font-size:14px}
.mock .barre{height:12px;border-radius:6px;background:#3d362c}
.mock .barre i{display:block;height:100%;border-radius:6px;background:var(--or)}
.mock .p1{color:var(--or);font-family:"Lilita One"}
.mock .delta{color:#7ed6a7;font-weight:700;font-size:13px}
.mock .pied{margin-top:18px;padding-top:14px;border-top:1px solid #3d362c;font-size:12px;color:#b7ab99}
/* Preuve : courbe de montée page 2 → 1re place, carte claire */
.montee{margin:0;background:var(--creme-2);border:var(--trait) solid var(--encre);border-radius:20px;padding:22px 22px 18px;box-shadow:8px 8px 0 var(--encre)}
.montee-titre{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:700;font-size:14px;margin-bottom:8px}
.montee-duree{flex:none;background:var(--encre);color:var(--creme);border-radius:999px;padding:3px 10px;font-size:12px}
.montee-graphe{display:block;width:100%;height:auto;overflow:visible}
.montee-graphe .zone-p1{fill:rgba(78,155,111,.13)}
.montee-graphe .zone-p2{fill:rgba(214,56,46,.09)}
.montee-graphe .zone-lib{font:700 13px Inter,sans-serif;fill:var(--vert)}
.montee-graphe .zone-lib.p2{fill:var(--tomate)}
.montee-graphe .courbe{fill:none;stroke:var(--encre);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.5,0,.3,1) .25s}
.montee-graphe .point circle{fill:#fff;stroke:var(--encre);stroke-width:3}
.montee-graphe .point.un circle{fill:var(--or)}
.montee-graphe .point{opacity:0;transition:opacity .3s calc(.35s + var(--n) * .22s)}
.montee-graphe .pos{font:15px "Lilita One",sans-serif;fill:var(--encre)}
.montee-graphe .point.un .pos{font-size:14px}
.montee-graphe .mois{font:600 12.5px Inter,sans-serif;fill:var(--gris);opacity:1}
.montee.visible .courbe{stroke-dashoffset:0}
.montee.visible .point{opacity:1}
.montee-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.montee-kpi div{background:#fff;border:2px solid var(--encre);border-radius:12px;padding:8px 10px;text-align:center}
.montee-kpi b{display:block;font-family:"Lilita One";font-size:24px;line-height:1.1}
.montee-kpi span{font-size:12px;color:var(--gris);line-height:1.2;display:block}
@media(max-width:860px){.preuve .deux{grid-template-columns:1fr}}
@media(max-width:480px){.montee{padding:16px 12px 14px}.montee-kpi b{font-size:20px}.montee-kpi span{font-size:11px}}

/* ---------- Briques (fond encre) ---------- */
.briques{background:var(--encre);color:var(--creme)}
.briques h2{color:var(--creme)}
.briques h2 .or{color:var(--or)}
.briques .ss{color:#b7ab99}
.brique{background:#2c251c;border:var(--trait) solid #000;border-radius:var(--rayon);padding:26px;box-shadow:6px 6px 0 #000;transition:transform .15s ease}
.brique:hover{transform:translate(-3px,-3px) rotate(.6deg);box-shadow:9px 9px 0 #000}
.brique .tag{font-family:Shrikhand;font-size:14px;color:var(--or);margin-bottom:10px}
.brique h3{color:var(--creme);font-size:17px;margin-bottom:8px}
.brique h3 a{color:inherit;text-decoration:none}
.brique p{font-size:14.5px;color:#b7ab99}
.grille2x2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:760px){.grille2x2{grid-template-columns:1fr}}

/* ---------- Conformité (mascotte) ---------- */
.conf .deux{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:860px){.conf .deux{grid-template-columns:1fr}}
.conf-mascotte{text-align:center}
.conf-mascotte picture{display:block;width:min(360px,85%);margin:0 auto}
.conf ul{list-style:none;margin-top:20px;display:grid;gap:12px}
.conf li{display:flex;gap:10px;font-size:15px}
.conf li::before{content:"✓";color:var(--vert);font-weight:800}

/* ---------- Tarifs ---------- */
.prix{background:var(--creme-2)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
@media(max-width:860px){.plans{grid-template-columns:1fr}}
.plan{border:var(--trait) solid var(--encre);border-radius:20px;padding:30px;display:flex;flex-direction:column;background:#fff;box-shadow:6px 6px 0 var(--encre);transition:transform .15s ease,box-shadow .15s ease}
.plan:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--encre)}
.plan.star{background:var(--encre);color:var(--creme);position:relative;overflow:hidden;box-shadow:6px 6px 0 var(--or)}
.plan.star:hover{box-shadow:9px 9px 0 var(--or)}
.plan.star .ruban{position:absolute;top:18px;right:-34px;transform:rotate(45deg);background:var(--or);color:var(--encre);font-size:11px;font-weight:800;padding:4px 40px;border:2px solid var(--encre)}
.plan h3{font-family:"Lilita One";font-size:19px;text-transform:uppercase;margin-bottom:4px}
.plan .cible{font-size:13px;color:var(--gris);margin-bottom:18px}
.plan.star .cible{color:#b7ab99}
.plan .tarif{font-family:"Lilita One";font-size:42px}
.plan .tarif small{font-family:Inter;font-weight:600;font-size:13px}
.plan ul{list-style:none;margin:20px 0 26px;display:grid;gap:10px;font-size:14px}
.plan li{display:flex;gap:8px}
.plan li::before{content:"★";color:var(--or);font-weight:800}
.plan .btn{margin-top:auto;text-align:center}
.plan a:not(.btn){color:var(--orange)}
.credits{margin-top:28px;background:#fff;border:var(--trait) dashed var(--encre);border-radius:var(--rayon);padding:20px;font-size:14.5px}

/* ---------- Agences ---------- */
.agence .deux{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:860px){.agence .deux{grid-template-columns:1fr}}
.calc{background:#fff;border:var(--trait) solid var(--encre);border-radius:var(--rayon);padding:26px;font-size:15px;box-shadow:6px 6px 0 var(--encre)}
.calc .l{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(34,28,21,.12)}
.calc .l.total{border:0;font-weight:800;font-size:17px}
.calc .l.total span:last-child{color:var(--vert)}

/* ---------- FAQ ---------- */
.faq details{background:#fff;border:var(--trait) solid var(--encre);border-radius:14px;padding:18px 22px;margin-bottom:12px;box-shadow:4px 4px 0 var(--encre);transition:transform .12s ease}
.faq details:hover{transform:translate(-2px,-2px)}
.faq summary{font-weight:800;cursor:pointer;font-size:15.5px}
.faq details p{margin-top:10px;font-size:14.5px;color:#4b443b}
.faq a{color:var(--orange)}

/* ---------- CTA final ---------- */
.final{background:var(--orange);color:#fff;text-align:center;border-top:var(--trait) solid var(--encre)}
.final h2{font-size:clamp(30px,5vw,56px);color:#fff;margin-bottom:16px;text-shadow:3px 3px 0 var(--encre)}
.final p{color:#ffe9df;margin-bottom:30px}
.final .btn{margin:6px}
.final .btn-or{box-shadow:5px 5px 0 var(--encre)}

/* ---------- Pied de page ---------- */
.site-footer{padding:44px 0 30px;font-size:13.5px;color:var(--gris);background:var(--creme-2);border-top:var(--trait) solid var(--encre)}
.site-footer a{color:var(--gris);text-decoration:none}
.site-footer a:hover{color:var(--orange)}
.site-footer .colonnes{display:grid;grid-template-columns:1.3fr 1fr 1fr .8fr;gap:28px}
@media(max-width:860px){.site-footer .colonnes{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.site-footer .colonnes{grid-template-columns:1fr}}
.site-footer .titre-col{font-family:"Lilita One";color:var(--encre);margin-bottom:10px;font-size:14px;text-transform:uppercase;letter-spacing:.05em}
.site-footer ul{list-style:none;display:grid;gap:7px}

/* ---------- Maillage interne ---------- */
.maillage{background:var(--creme);padding:48px 0}
.maillage ul{list-style:none;display:grid;gap:12px;max-width:760px}
.maillage li{background:#fff;border:var(--trait) solid var(--encre);border-radius:12px;box-shadow:4px 4px 0 var(--encre);transition:transform .12s ease,box-shadow .12s ease}
.maillage li:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--encre)}
.maillage a{display:block;padding:14px 18px;text-decoration:none;color:var(--encre);font-weight:700;font-size:15px}
.maillage a::after{content:" →";color:var(--orange)}

/* ---------- Mascotte : placements ---------- */
.entete-grille{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
.entete-mascotte{width:220px;margin:-30px 0 -64px;filter:drop-shadow(0 10px 0 rgba(0,0,0,.18))}
.entete-mascotte img{display:block;width:100%;height:auto;animation:course-bob 1.6s ease-in-out infinite}
.entete-mascotte.pose-course{width:300px;margin-bottom:-40px}
@media(max-width:760px){.entete-grille{grid-template-columns:1fr}.entete-mascotte{width:150px;margin:0 auto -50px}.entete-mascotte.pose-course{width:220px;margin-bottom:-30px}}
.preuve .mock{position:relative}
.preuve-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.preuve-mascotte{width:150px;margin:-20px 0 -30px}
.preuve-mascotte img{display:block;width:100%;height:auto}
@media(max-width:860px){.preuve-mascotte{width:110px}}
.final-mascotte{width:200px;margin:0 auto 6px}
.final-mascotte img{display:block;width:100%;height:auto}
.mascotte-anim{display:block;position:relative}
.mascotte-anim img,.mascotte-anim video{display:block;width:100%;height:auto}
.mascotte-anim video{position:absolute;inset:0;height:100%;background:transparent}
.mascotte-anim.joue img{opacity:0}
.entete-mascotte .mascotte-anim img{animation:none}
.conf-mascotte .mascotte-anim{width:min(330px,80%);margin:0 auto}

/* ---------- Pages intérieures ---------- */
.page-entete{background:var(--encre);color:var(--creme);padding:56px 0 44px;border-bottom:var(--trait) solid var(--encre)}
.page-entete h1{font-size:clamp(28px,4.5vw,46px)}
.page-entete .fil{font-size:13px;color:#b7ab99;margin-bottom:10px}
.page-contenu{padding:48px 0}
.page-contenu .wrap{max-width:760px}
.page-contenu h2{font-family:"Lilita One";text-transform:uppercase;font-size:23px;margin:34px 0 10px}
.page-contenu h3{font-size:17px;margin:22px 0 8px;font-weight:800}
.page-contenu p,.page-contenu li{font-size:15.5px;color:#3c352c;margin-bottom:10px}
.page-contenu ul,.page-contenu ol{padding-left:22px;margin-bottom:14px}
.page-contenu a{color:var(--orange)}

/* ---------- Journal ---------- */
.journal-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:860px){.journal-grille{grid-template-columns:1fr}}
.carte-article{background:#fff;border:var(--trait) solid var(--encre);border-radius:var(--rayon);overflow:hidden;display:flex;flex-direction:column;box-shadow:6px 6px 0 var(--encre);transition:transform .15s ease,box-shadow .15s ease}
.carte-article:hover{transform:translate(-3px,-3px) rotate(-.5deg);box-shadow:9px 9px 0 var(--encre)}
.carte-article img{aspect-ratio:16/9;object-fit:cover;width:100%;border-bottom:var(--trait) solid var(--encre)}
.carte-article .corps{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.carte-article h2,.carte-article h3{font-size:16.5px;line-height:1.35}
.carte-article a{text-decoration:none;color:var(--encre)}
.carte-article .date{font-size:12px;color:var(--gris)}
.article-simple .wrap{max-width:760px}
.article-simple h1{font-size:clamp(26px,4vw,38px);line-height:1.15;margin-bottom:10px}
.article-simple .contenu h2{font-size:22px;margin:30px 0 10px}
.article-simple .contenu h3{font-size:18px;margin:22px 0 8px}
.article-simple .contenu p,.article-simple .contenu li{margin-bottom:12px;font-size:16px;color:#3c352c}
.article-simple .contenu img{border-radius:12px;border:2px solid var(--encre);margin:10px 0}
.article-simple .contenu ul,.article-simple .contenu ol{padding-left:22px;margin-bottom:14px}

/* ---------- Outil gratuit : affiche d'avis ---------- */
.outil-v2{padding:48px 0;background-image:radial-gradient(rgba(34,28,21,.10) 1.4px, transparent 1.6px);background-size:14px 14px}
.outil-grille{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
@media(max-width:900px){.outil-grille{grid-template-columns:1fr}}
.outil-panneau{background:#fff;border:var(--trait) solid var(--encre);border-radius:20px;padding:26px;box-shadow:6px 6px 0 var(--encre)}
.outil-etape{display:grid;grid-template-columns:40px 1fr;gap:14px;padding-bottom:20px;margin-bottom:20px;border-bottom:2px dashed rgba(34,28,21,.18)}
.outil-num{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--or);border:var(--trait) solid var(--encre);font-family:"Lilita One";font-size:20px}
.outil-panneau label{display:block;font-weight:800;font-size:14px;margin-bottom:6px}
.outil-panneau input[type=text]{width:100%;padding:12px 14px;border:2px solid var(--encre);border-radius:12px;font-size:15px;font-family:inherit;background:var(--creme-2)}
.outil-panneau input[type=text]:focus{outline:3px solid var(--or);outline-offset:1px}
.outil-panneau input[type=file]{font-size:13.5px}
.outil-aide{margin-top:10px;font-size:13.5px;color:#4b443b}
.outil-aide summary{cursor:pointer;font-weight:700;color:var(--orange)}
.outil-aide ol{padding-left:20px;margin:8px 0}
.outil-aide li{margin-bottom:4px}
.outil-aide code{background:var(--creme);padding:1px 5px;border-radius:5px}
.outil-erreur{color:var(--tomate);font-weight:700;font-size:13.5px;margin-top:8px;min-height:1px}
.outil-note{font-size:12.5px;color:var(--gris);margin-top:6px;word-break:break-word}
.outil-couleurs{display:flex;gap:10px;flex-wrap:wrap}
.pastille-couleur{width:36px;height:36px;border-radius:50%;border:var(--trait) solid var(--encre);cursor:pointer;transition:transform .12s ease}
.pastille-couleur:hover{transform:scale(1.12)}
.pastille-couleur.actif{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--encre)}
.outil-actions{display:flex;gap:12px;flex-wrap:wrap}
.outil-actions .btn{font-size:15px;padding:12px 18px}
.outil-actions .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:3px 3px 0 var(--encre)}
.outil-apercu{position:sticky;top:90px}
.outil-apercu-titre{font-family:"Lilita One";text-transform:uppercase;font-size:15px;margin-bottom:10px}
.affiche-cadre{background:#fff;border:var(--trait) solid var(--encre);border-radius:14px;box-shadow:8px 8px 0 var(--encre);overflow:hidden;max-width:440px}
.affiche-cadre svg{display:block;width:100%;height:auto}
@media(max-width:900px){.outil-apercu{position:static}.affiche-cadre{margin:0 auto}}.no-js .montee .courbe{stroke-dashoffset:0}.no-js .montee .point{opacity:1}