@font-face{font-family:"Jakarta";src:url(../fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jakarta";src:url(../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* Couleurs du logo Sophie Web Studio (sw-b-logo.svg) */
  --fond:#F7F6FC; --blanc:#FFFFFF; --encre:#1C1845; --texte:#3D3A5C; --doux:#5E5A7D;
  --trait:#E4E1F2; --citron:#D9F65A; --citron-fonce:#5B4BD1; --marine:#1C1845;
  --lavande:#D6D0F8; --lavande-fonce:#8F7FE6;
  --degrade:linear-gradient(90deg,#8F7FE6 0%,#5B4BD1 50%,#1C1845 100%);
  --r-xl:28px; --r-l:20px; --ombre:0 20px 60px rgba(28,24,69,.12); --ombre-s:0 6px 24px rgba(28,24,69,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:110px}  /* une section atteinte par le menu ne passe pas sous la barre flottante */
body{font-family:"Jakarta",system-ui,sans-serif;background:var(--fond);color:var(--texte);font-size:17px;line-height:1.6;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--citron-fonce);outline-offset:3px;border-radius:8px}
.evite{position:absolute;left:-999px;top:8px;background:var(--encre);color:#fff;padding:10px 16px;border-radius:10px;z-index:100}
.evite:focus{left:16px}
.lecteur{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.conteneur{width:min(1200px,100% - 32px);margin-inline:auto}
section{padding:96px 0}
h1,h2,h3{color:var(--encre);font-weight:800;letter-spacing:-.035em;line-height:1.05;text-wrap:balance}
h2{font-size:clamp(34px,5.4vw,60px);text-align:center}
.chapo{max-width:640px;margin:18px auto 0;text-align:center;color:var(--doux);font-size:18px}
.vert{background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Barre de navigation flottante */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;width:min(1160px,100% - 24px);display:flex;align-items:center;gap:16px;padding:10px 10px 10px 22px;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9);border-radius:999px;box-shadow:var(--ombre-s)}
.marque{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--encre);letter-spacing:-.02em;font-size:19px}
.marque img{width:auto;height:58px}
.nav .marque{flex-shrink:0}
.nav .marque img{height:54px}
.nav ul{display:flex;gap:16px;list-style:none;margin-right:auto;font-size:15px;color:var(--doux)}
.nav ul a:hover{color:var(--encre)}
.btn{display:inline-flex;align-items:center;gap:12px;border-radius:999px;font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;padding:14px 24px;transition:transform .2s ease,box-shadow .2s ease;cursor:pointer;border:0;font-family:inherit}
.btn:hover{transform:translateY(-2px)}
.btn-noir{background:var(--encre);color:#fff;box-shadow:0 10px 30px rgba(14,23,38,.25)}
.btn-noir .pastille{display:grid;place-items:center;width:34px;height:34px;margin:-8px 0 -8px -14px;border-radius:50%;background:var(--citron);color:var(--encre)}
.btn-clair{background:var(--blanc);color:var(--encre);border:1px solid var(--trait)}
.nav .btn{padding:12px 16px}
.nav ul li,.nav .btn{white-space:nowrap}
/* Deux boutons dans l'en-tête : « Je veux mon site » (encre) et « Je veux ma vidéo » (citron) ; libellés courts quand la place manque */
.nav-actions{display:flex;gap:8px;flex-shrink:0}
.btn-video{background:var(--citron);color:var(--encre);box-shadow:0 10px 30px rgba(14,23,38,.12)}
.libelle-court{display:none}
@media (max-width:640px),(min-width:1000px) and (max-width:1180px){.nav .libelle-long{display:none}.nav .libelle-court{display:inline}}
@media (min-width:1000px) and (max-width:1180px){.nav{gap:14px}.nav ul{gap:14px;font-size:14px}.nav .btn{font-size:13px}}  /* 7 liens dans le menu et deux boutons : une seule ligne dès 1000 px */
@media (max-width:999px){.nav ul{display:none}.nav-actions{margin-left:auto}}

/* Hero */
.hero{padding:168px 0 40px;text-align:center;position:relative}
.hero::before{content:"";position:absolute;inset:0 0 auto;height:620px;background:radial-gradient(600px 300px at 20% 10%,rgba(217,246,90,.30),transparent 70%),radial-gradient(600px 320px at 85% 20%,rgba(143,127,230,.25),transparent 70%);pointer-events:none;z-index:-1}
.hero-fond{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s ease}  /* fond WebGL (fond-webgl.js), au-dessus des dégradés de repli */
.hero-fond.pret{opacity:1}
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}  /* Lenis anime lui-même les ancres */
.etiquette{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;background:var(--blanc);border:1px solid var(--trait);font-size:14px;font-weight:600;color:var(--encre);box-shadow:var(--ombre-s)}
.etiquette i{width:8px;height:8px;border-radius:50%;background:var(--citron-fonce);box-shadow:0 0 0 4px rgba(143,127,230,.3)}
.hero h1{font-size:clamp(40px,7.2vw,84px);margin:26px auto 0;max-width:1040px}
.tourne{display:grid;width:fit-content;margin:0 auto;justify-items:center;overflow:hidden;height:1.16em;padding:0 .04em}
.tourne span{grid-area:1/1;transform:translateY(110%);opacity:0;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s;background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.tourne span.actif{transform:none;opacity:1}
.tourne span.sort{transform:translateY(-110%);opacity:0}
.hero .chapo{font-size:19px;max-width:680px}
.puces{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:30px 0 34px}
.puce{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;background:var(--blanc);border:1px solid var(--trait);font-size:15px;font-weight:600;color:var(--encre)}
.coche{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--citron);flex:none}
.coche::after{content:"";width:9px;height:5px;border:2.4px solid var(--encre);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

.aussi{margin-top:22px;font-size:15.5px;color:var(--doux)}
.aussi a{color:var(--encre);font-weight:700;text-decoration:underline;text-decoration-color:var(--lavande-fonce);text-decoration-thickness:2px;text-underline-offset:4px}
.demos{padding-top:24px}

/* Mur défilant */
.mur{margin-top:64px}
.mur p{font-size:15px;color:var(--doux);margin-bottom:18px}
.defile{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.piste{display:flex;gap:56px;width:max-content;animation:defile 38s linear infinite}
.defile:hover .piste{animation-play-state:paused}
.piste span{font-size:26px;font-weight:800;letter-spacing:-.03em;color:#6E6A8F;white-space:nowrap}
@keyframes defile{to{transform:translateX(-50%)}}

/* Vidéo vitrine */
.vitrine{padding:40px 0 24px}
.cadre-video{position:relative;border-radius:var(--r-xl);overflow:hidden;background:#dfe3dc;box-shadow:var(--ombre);border:8px solid var(--blanc);aspect-ratio:16/9}
.cadre-video video,.cadre-video img{width:100%;height:100%;object-fit:cover}
.pause{position:absolute;right:16px;bottom:16px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(14,23,38,.72);color:#fff;font-size:15px;cursor:pointer;backdrop-filter:blur(6px)}

/* Réalisations */
.grille{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:56px}
.projet{background:var(--blanc);border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--trait);box-shadow:var(--ombre-s);display:flex;flex-direction:column;position:relative;transition:transform .35s ease,box-shadow .35s ease}
.projet:hover{transform:translateY(-4px);box-shadow:var(--ombre)}
.scene{position:relative;padding:28px 28px 0;background:var(--teinte,#eef0ec);overflow:hidden}
.navigateur{background:var(--blanc);border-radius:14px 14px 0 0;box-shadow:0 18px 50px rgba(14,23,38,.16);overflow:hidden;margin-right:64px}
.barre{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid #eef0ec}
.barre b{width:9px;height:9px;border-radius:50%;background:#dde0db}
.barre em{margin-left:10px;font-style:normal;font-size:12px;color:var(--doux);background:#f3f4f1;border-radius:6px;padding:3px 10px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ecran{aspect-ratio:16/10;overflow:hidden;position:relative}
.ecran img{width:100%;height:auto;will-change:transform}
.telephone{position:absolute;right:22px;bottom:-30px;width:132px;padding:6px;background:var(--encre);border-radius:26px;box-shadow:0 18px 40px rgba(14,23,38,.3)}
.telephone .ecran{aspect-ratio:9/19.5;border-radius:20px}
.defilable img{animation:visite var(--duree,18s) ease-in-out var(--decalage,0s) infinite alternate;animation-play-state:paused}
.projet.visible .defilable img{animation-play-state:running}
@keyframes visite{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(var(--course))}}
.infos{padding:30px 28px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.numero{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--citron-fonce)}
.infos h3{font-size:26px}
.metier{color:var(--doux);font-size:15px;margin-top:-6px}
.atouts{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.atouts li{font-size:13.5px;font-weight:600;color:var(--encre);background:#f3f4f1;border-radius:999px;padding:6px 12px}
.lien{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--encre);font-size:15px}
.lien:hover span{transform:translate(2px,-2px)}
.lien span{transition:transform .2s}
.bientot{margin-top:auto;padding-top:8px;font-size:14px;font-weight:600;color:var(--doux)}

/* Ce que comprend votre site — mosaïque */
.mosaique{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:56px}
.tuile{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-l);padding:28px;position:relative;overflow:hidden;min-height:250px;display:flex;flex-direction:column}
.tuile:nth-child(1),.tuile:nth-child(2){grid-column:span 3}
.tuile:nth-child(n+3){grid-column:span 2}
.tuile:nth-child(6){grid-column:span 6;min-height:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8px 32px}
.tuile:nth-child(6) .vignette{grid-row:span 2;margin:0}
.tuile:nth-child(6) h3{margin-top:0;align-self:end}
.tuile:nth-child(6) p{align-self:start;margin-top:0}
.tuile::before{content:"";position:absolute;inset:0;background:radial-gradient(380px circle at var(--x,50%) var(--y,0%),rgba(143,127,230,.18),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.tuile:hover::before{opacity:1}
.tuile h3{font-size:21px;letter-spacing:-.02em;margin-top:auto}
.tuile p{font-size:15px;color:var(--doux);margin-top:6px}
.vignette{flex:1;display:grid;place-items:center;margin-bottom:18px;min-height:110px}
.notif{background:var(--blanc);border:1px solid var(--trait);border-radius:16px;padding:12px 16px;box-shadow:var(--ombre-s);display:flex;gap:12px;align-items:center;width:min(320px,100%);text-align:left}
.notif .rond{width:36px;height:36px;border-radius:10px;background:var(--encre);display:grid;place-items:center;color:var(--citron);font-weight:800;flex:none}
.notif strong{display:block;color:var(--encre);font-size:14px}
.notif small{color:var(--doux);font-size:12.5px}
.notif+.notif{margin-top:-6px;transform:scale(.94);opacity:.7}
.pile{display:grid;gap:0}
.serp{width:min(340px,100%);text-align:left;font-size:13px;line-height:1.4}
.serp small{color:#3b7a32}
.serp b{display:block;color:#1a46b8;font-size:17px;font-weight:600;margin:2px 0}
.serp span{color:var(--doux)}
.mini-tel{width:74px;height:136px;border:5px solid var(--encre);border-radius:18px;background:linear-gradient(var(--fond),#fff);position:relative}
.mini-tel::before{content:"";position:absolute;left:10px;right:10px;top:14px;height:8px;border-radius:4px;background:var(--trait);box-shadow:0 18px 0 var(--trait),0 36px 0 #e9ede4,0 62px 0 var(--citron)}
.cadenas{display:inline-flex;align-items:center;gap:8px;background:#f3f4f1;border-radius:999px;padding:9px 16px;font-size:14px;font-weight:600;color:var(--encre)}

.questions{display:grid;gap:8px;width:min(260px,100%)}
.questions span{display:block;border:1px solid var(--trait);border-radius:12px;padding:8px 12px;font-size:13px;color:var(--encre);background:var(--blanc);text-align:left}
.questions span.choisi{border-color:var(--lavande-fonce);box-shadow:0 0 0 3px rgba(143,127,230,.25)}
.nuancier{display:flex;gap:-8px}
.nuancier i{width:44px;height:44px;border-radius:50%;border:3px solid var(--blanc);margin-left:-10px;box-shadow:var(--ombre-s)}

/* Sophie qui guide (autocollants + bulle) */
.sophie-dit{display:flex;align-items:center;gap:14px;width:fit-content;max-width:min(560px,100%);min-width:0;margin:26px 0;text-decoration:none}
.sophie-dit img{width:92px;height:auto;flex:none;border-radius:22px;border:4px solid var(--blanc);box-shadow:var(--ombre-s);transform:rotate(-6deg);animation:flotte 5s ease-in-out infinite}
.sophie-dit .bulle{min-width:0;position:relative;background:var(--encre);color:#fff;font-weight:700;font-size:15px;line-height:1.35;padding:13px 16px;border-radius:18px;box-shadow:0 12px 30px rgba(28,24,69,.22);transition:transform .25s}
.sophie-dit .bulle::before{content:"";position:absolute;left:-7px;top:50%;width:14px;height:14px;background:var(--encre);transform:translateY(-50%) rotate(45deg);border-radius:3px}
.sophie-dit .bulle b{color:var(--citron);margin-left:6px;display:inline-block;transition:transform .25s}
.sophie-dit:hover .bulle{transform:translateY(-3px)}
.sophie-dit:hover .bulle b{transform:translateX(4px)}
.sd-droite{margin-left:auto;flex-direction:row-reverse}
.sd-droite .bulle::before{left:auto;right:-7px}
.sd-droite img{transform:rotate(6deg)}
.sd-hero{position:absolute;right:max(16px,calc(50% - 640px));top:118px;margin:0;flex-direction:row-reverse}
.sd-hero .bulle::before{left:auto;right:-7px}
.sd-contact{margin:18px 0 0}
.sd-contact .bulle{background:var(--citron);color:var(--encre)}
.sd-contact .bulle::before{background:var(--citron)}
.sd-contact .bulle b{color:var(--encre)}
@keyframes flotte{0%,100%{translate:0 0}50%{translate:0 -7px}}

/* Mur de miniatures */
.defile-miniatures{margin-top:22px}
.defile-miniatures .piste{gap:18px;animation-duration:60s}
.defile-miniatures img{width:260px;height:auto;border-radius:14px;border:1px solid var(--trait);box-shadow:var(--ombre-s);background:var(--blanc)}
.piste-inverse{animation-direction:reverse}

/* Bandeau de chiffres */
.bandeau-chiffres{padding:28px 0 12px}
.chiffres-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.chiffre{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-l);padding:24px 26px;text-align:left}
.chiffre b{display:block;font-size:clamp(44px,5vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1;background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.chiffre span{display:block;margin-top:8px;color:var(--doux);font-weight:600}

/* Atelier : Sophie construit MJK */
.atelier-grille{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:center}
.atelier-texte h2{text-align:left;font-size:clamp(32px,4.2vw,52px);margin:10px 0 16px}
.atelier-texte p{color:var(--texte);font-size:18px;margin-bottom:26px}
.atelier-media{position:relative;border-radius:var(--r-xl);overflow:hidden;border:8px solid var(--blanc);box-shadow:var(--ombre);aspect-ratio:16/9;background:var(--lavande)}
.atelier-media video,.atelier-media img{width:100%;height:100%;object-fit:cover}
/* Scènes au défilement (src/js/scenes-scroll.js) : classes .scene-scroll posées seulement si les animations sont permises */
.atelier-media canvas.scrub{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.atelier-media canvas.scrub.pret{opacity:1}
.atelier.scene-scroll .atelier-media::after{content:"";position:absolute;left:0;bottom:0;z-index:2;height:4px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--citron),var(--lavande-fonce))}
@media (min-width:901px){
  .vitrine.scene-scroll{height:220vh;padding:0}
  .vitrine.scene-scroll>.conteneur{position:sticky;top:0;height:100vh;width:100%;display:grid;place-items:center}
  .vitrine.scene-scroll .cadre-video{width:min(100vw,177.78vh);transform:perspective(1600px) rotateX(calc((1 - var(--p,0)) * 16deg)) scale(calc(.6 + .4 * var(--p,0)));border-radius:calc((1 - var(--p,0)) * 28px);border-width:calc((1 - var(--p,0)) * 8px);will-change:transform}
  .atelier.scene-scroll{height:240vh}
  .atelier.scene-scroll>.conteneur{position:sticky;top:0;height:100vh;align-content:center}
}

/* Effets 21st.dev : barre de lecture, titre mot à mot, bouton à bordure animée, cartes inclinées */
.progression{position:fixed;left:0;top:0;height:4px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--citron),var(--lavande-fonce),var(--citron-fonce));z-index:80;pointer-events:none}
.mot{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(.35em);animation:mot .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * 70ms + 120ms)}
@keyframes mot{to{opacity:1;filter:none;transform:none}}
.hero .btn-noir{position:relative;isolation:isolate}
.hero .btn-noir::after{content:"";position:absolute;inset:-3px;border-radius:inherit;background:conic-gradient(from var(--angle,0deg),var(--citron),var(--lavande-fonce),var(--citron-fonce),var(--citron));z-index:-1;animation:tourne-bord 4s linear infinite}
@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes tourne-bord{to{--angle:360deg}}
.projet{transform-style:preserve-3d;will-change:transform}
.hero{--mx:50%;--my:30%}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(143,127,230,.14),transparent 60%);pointer-events:none;z-index:-1}

/* Qui est Sophie */
.sophie-grille{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
.sophie-photo{position:relative;border-radius:var(--r-xl);overflow:hidden;border:8px solid var(--blanc);box-shadow:var(--ombre);transform:rotate(-1.5deg)}
.sophie-photo img{width:100%;height:auto;aspect-ratio:860/651;object-fit:cover}
.sophie-photo figcaption{position:absolute;left:20px;bottom:20px;background:var(--citron);color:var(--encre);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:8px 16px;border-radius:999px}
.sur-titre{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--citron-fonce)}
.sophie-texte h2{text-align:left;margin:10px 0 18px}
.sophie-texte>p{color:var(--texte);font-size:18px}
.competences{list-style:none;display:grid;gap:14px;margin:26px 0}
.competences li{display:grid;grid-template-columns:28px 1fr;column-gap:14px;row-gap:2px;align-items:start}
.competences li::before{content:"";grid-row:span 2;width:28px;height:28px;border-radius:50%;background:var(--citron) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231C1845' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.competences b{color:var(--encre);font-size:17px}
.competences span{color:var(--doux);font-size:15.5px}
.signature{font-weight:600;color:var(--encre)}
.insta{font-weight:800;text-decoration:underline;text-decoration-color:var(--lavande-fonce);text-underline-offset:3px}

/* Méthode */
.etapes{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:56px;max-width:980px;margin-inline:auto}
.etape{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-xl);padding:34px 30px 30px;text-align:center;position:relative;min-height:290px;overflow:hidden}
.etape .num{color:var(--citron-fonce);font-weight:700;font-size:16px}
.etape h3{font-size:25px;margin:10px 0 10px;letter-spacing:-.025em}
.etape p{color:var(--doux);font-size:15.5px;max-width:360px;margin:auto}
.autocollant{display:inline-block;margin-top:26px;padding:10px 22px;border-radius:999px;background:var(--encre);color:#fff;font-weight:700;font-size:15px;transform:rotate(-7deg);box-shadow:0 14px 30px rgba(14,23,38,.22)}
.autocollant.citron{background:var(--citron);color:var(--encre);transform:rotate(6deg);box-shadow:0 14px 30px rgba(184,214,60,.45)}
.fichier{display:inline-block;margin:22px 8px 0;padding:8px 14px;border-radius:10px;border:1.5px dashed #c8ccc5;font-family:ui-monospace,monospace;font-size:13px;color:var(--encre);transform:rotate(-4deg)}

/* FAQ */
.faq{max-width:820px;margin:48px auto 0;display:grid;gap:12px}
.faq details{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-l);padding:4px 24px}
.faq summary{cursor:pointer;list-style:none;font-weight:700;color:var(--encre);font-size:18px;padding:18px 0;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;line-height:1;color:var(--citron-fonce);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 20px;color:var(--doux)}

/* Contact */
.contact{padding-bottom:120px}
.carte-sombre{background:var(--encre);color:#CFCBEA;border-radius:var(--r-xl);padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:1fr 1.1fr;gap:48px;position:relative;overflow:hidden;box-shadow:0 40px 100px rgba(38,64,94,.35)}
.carte-sombre::before{content:"";position:absolute;width:520px;height:520px;right:-160px;top:-200px;background:radial-gradient(circle,rgba(143,127,230,.45),transparent 65%);pointer-events:none}
.carte-sombre h2{color:#fff;text-align:left;font-size:clamp(32px,4.4vw,52px)}
.carte-sombre .chapo{text-align:left;margin-left:0;color:#AEB7C3}
.liste-cochee{list-style:none;display:grid;gap:12px;margin-top:28px}
.liste-cochee li{display:flex;gap:12px;align-items:center;color:#E4E8EE;font-weight:600}
form{display:grid;gap:14px;position:relative}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:grid;gap:6px;font-size:14px;font-weight:600;color:#E4E8EE}
input,textarea{font:inherit;font-size:16px;color:var(--encre);background:#fff;border:2px solid transparent;border-radius:14px;padding:13px 15px;width:100%}
input:focus,textarea:focus{outline:none;border-color:var(--citron)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:#FF8A7A}
textarea{min-height:110px;resize:vertical}
.accord{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:13.5px;color:#AEB7C3;grid-template-columns:none}
.accord input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--citron)}
.accord a{text-decoration:underline}
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn-citron{background:var(--citron);color:var(--encre);justify-content:center;font-size:15px;padding:17px 24px}
.retour{min-height:24px;font-weight:600;font-size:15px}
.retour.ok{color:var(--citron)}
.retour.ko{color:#FFB3A8}

.btn-wa{margin-top:30px;background:#25D366;color:#0B2E17;text-transform:none;letter-spacing:0;font-size:16px}
.wa-flottant{position:fixed;right:18px;bottom:18px;z-index:60;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 12px 30px rgba(37,211,102,.45);transition:transform .2s}
.wa-flottant:hover{transform:scale(1.06)}
.wa-flottant::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(37,211,102,.45);animation:onde 2.4s ease-out infinite}
@keyframes onde{from{transform:scale(.9);opacity:1}to{transform:scale(1.35);opacity:0}}

/* Lien vers la fiche détaillée (cartes) */
.lien-fiche{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-weight:700;font-size:14.5px;color:var(--citron-fonce)}
.lien-fiche span{transition:transform .2s}
.lien-fiche:hover span{transform:translateX(4px)}

/* Pages détaillées des réalisations */
.cas-hero{padding:150px 0 40px;position:relative}
.cas-hero::before{content:"";position:absolute;inset:0 0 auto;height:520px;background:radial-gradient(520px 260px at 15% 20%,rgba(217,246,90,.28),transparent 70%),radial-gradient(560px 300px at 85% 10%,rgba(143,127,230,.25),transparent 70%);z-index:-1}
.retour-liste{display:table;font-weight:700;font-size:14.5px;color:var(--doux);margin-bottom:22px}
.retour-liste:hover{color:var(--encre)}
.cas-hero h1{font-size:clamp(42px,7vw,86px);margin:10px 0 18px}
.cas-accroche{font-size:clamp(20px,2.4vw,27px);font-weight:700;color:var(--encre);max-width:860px;line-height:1.3;letter-spacing:-.02em}
.cas-pour-qui{color:var(--doux);font-size:17px;max-width:760px;margin-top:12px}
.cas-actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 30px;align-items:center}
.note-prov{font-size:13.5px;color:var(--doux);font-weight:600}
.cas-outils{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.cas-outils li{background:var(--blanc);border:1px solid var(--trait);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:600;color:var(--encre)}
.cas-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:36px}
.cas-chiffre{background:var(--encre);color:#CFCBEA;border-radius:var(--r-l);padding:22px 24px}
.cas-chiffre b{display:block;font-size:46px;line-height:1;color:var(--citron);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cas-chiffre span{display:block;margin-top:8px;font-size:15px}
.cas-corps{padding-top:40px}
.cas-grille{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.cas-grille>*,.barre em{min-width:0}
.cas-visuel{align-self:stretch}
.cas-collant{position:sticky;top:120px;background:var(--teinte,#eef0ec);border-radius:var(--r-xl);padding:28px 28px 0;overflow:hidden;box-shadow:var(--ombre-s)}
.cas-collant .navigateur{margin-right:70px}
.cas-collant .telephone{right:22px;bottom:-24px;width:150px}
.cas-visuel .defilable img{animation-play-state:running}
.cas-liste h2{text-align:left;font-size:clamp(30px,3.6vw,44px)}
.cas-resume{color:var(--doux);margin:14px 0 26px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cat{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.04em;padding:4px 10px;border-radius:999px;background:#EEECF8;color:var(--encre)}
.cat-conversion{background:var(--citron);color:var(--encre)}
.cat-visibilite{background:#E4E0FB;color:#3C2FA3}
.cat-automatisation{background:var(--encre);color:var(--citron)}
.cat-confiance{background:#E3F1EA;color:#1F5C3D}
.cat-experience{background:#FCE8F0;color:#8A2453}
.cat-gestion{background:#E5EEF8;color:#1E4E8C}
.fonctions{list-style:none;display:grid;gap:14px}
.fonction{display:grid;grid-template-columns:52px 1fr;gap:16px;background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-l);padding:22px 22px 22px 18px;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}
.fonction:hover{transform:translateX(4px);box-shadow:var(--ombre-s)}
.fonction::before{content:"";position:absolute;inset:0;background:radial-gradient(320px circle at var(--x,0%) var(--y,0%),rgba(143,127,230,.16),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.fonction:hover::before{opacity:1}
.fonction-num{font-size:26px;font-weight:800;color:var(--lavande-fonce);letter-spacing:-.03em}
.fonction h3{font-size:20px;letter-spacing:-.02em;margin:8px 0 6px}
.fonction p{color:var(--texte);font-size:15.5px}
.cas-suite{padding-top:40px}
.cas-cta{grid-template-columns:1.4fr 1fr;align-items:center}
.cas-cta>*{min-width:0}
.cas-cta-actions{display:grid;gap:12px}
.cas-cta-actions .btn{justify-content:center}
.cas-nav{display:flex;justify-content:space-between;gap:16px;margin-top:28px}
.cas-nav a{flex:1;background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-l);padding:18px 22px;font-weight:800;color:var(--encre)}
.cas-nav a:last-child{text-align:right}
.cas-nav small{display:block;font-weight:600;color:var(--doux);font-size:13px;margin-bottom:4px}

/* Pied de page */
footer{border-top:1px solid var(--trait);padding:40px 0 48px;font-size:14px;color:var(--doux)}
footer .marque img{height:72px}
footer .conteneur{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:20px}
footer a:hover{color:var(--encre)}

/* Pages légales */
.legal{padding:150px 0 90px}
.legal .conteneur{max-width:820px}
.legal h1{font-size:clamp(34px,5vw,52px);margin-bottom:28px}
.legal h2{text-align:left;font-size:22px;margin:34px 0 10px;letter-spacing:-.02em}
.legal p,.legal li{color:var(--texte);margin-bottom:10px}
.legal ul{padding-left:20px}
.a-completer{background:#FFF3C4;color:#6B5200;border-radius:6px;padding:0 6px;font-weight:600}

/* Apparitions */
.js .apparait{opacity:0;transform:translateY(22px);filter:blur(6px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1),filter .8s ease}
.js .apparait.vu{opacity:1;transform:none;filter:none}

/* Conseils : cartes (accueil, liste) et page d'article */
.grille-conseils{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.conseil{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-l);padding:26px;display:flex;flex-direction:column;gap:10px;color:var(--encre);transition:transform .25s,box-shadow .25s}
.conseil:hover{transform:translateY(-4px);box-shadow:var(--ombre-s)}
.conseil-meta{font-size:13px;font-weight:600;color:var(--doux)}
.conseil h3{font-size:20px;letter-spacing:-.02em;line-height:1.25}
.conseil p{font-size:15px;color:var(--doux)}
.tous-conseils{text-align:center;margin-top:32px}
.conseils-liste{padding-top:0}
.fil{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--doux);margin-bottom:14px}
.fil a{color:var(--citron-fonce);font-weight:700}
.article-tete{padding:150px 0 28px;position:relative}
.article-tete::before{content:"";position:absolute;inset:0 0 auto;height:480px;background:radial-gradient(520px 260px at 15% 20%,rgba(217,246,90,.26),transparent 70%),radial-gradient(560px 300px at 85% 10%,rgba(143,127,230,.22),transparent 70%);z-index:-1}
.conteneur-article{max-width:780px}
.article-tete h1{font-size:clamp(34px,5.4vw,58px);line-height:1.08;margin:6px 0 16px}
.article-meta{font-size:14.5px;color:var(--doux)}
.article-meta a{color:var(--citron-fonce);font-weight:700}
.article-chapo{font-size:clamp(18px,2.2vw,21px);color:var(--texte);margin-top:18px;line-height:1.55}
.article-chapo a,.article-corps p a,.article-corps li a{color:var(--citron-fonce);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.article-visuel{max-width:980px;margin:18px auto 8px}
.article-cadre{background:var(--teinte,#ECE9FB);border-radius:var(--r-xl);padding:clamp(12px,2.4vw,28px);overflow:hidden}
.article-cadre img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top;border-radius:14px;box-shadow:var(--ombre-s)}
.article-visuel figcaption{font-size:14px;color:var(--doux);margin-top:10px;text-align:center}
.article-visuel figcaption a{color:var(--citron-fonce);font-weight:700}
.article-corps{padding-top:28px;padding-bottom:40px}
.sommaire{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-l);padding:20px 24px;margin-bottom:12px}
.sommaire b{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--citron-fonce)}
.sommaire ol{margin:10px 0 0 18px;display:grid;gap:6px;font-size:15.5px}
.sommaire a{color:var(--encre)}
.article-partie{padding-top:26px}
.article-corps h2{text-align:left;font-size:clamp(25px,3.2vw,32px);line-height:1.2;margin-bottom:12px}
.article-corps h3{font-size:20px;letter-spacing:-.02em;margin:20px 0 8px}
.article-corps p{color:var(--texte);margin-bottom:14px;font-size:17.5px;line-height:1.7}
.article-corps ul{margin:4px 0 16px 20px;display:grid;gap:8px}
.article-corps li{color:var(--texte);font-size:17px;line-height:1.6}
.article-faq details{background:var(--blanc);border:1px solid var(--trait);border-radius:16px;padding:16px 20px;margin-bottom:10px}
.article-faq summary{font-weight:800;color:var(--encre);cursor:pointer;min-height:44px;display:flex;align-items:center}
.article-faq details p{margin:10px 0 0}
.article-exemples{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.exemple{background:var(--blanc);border:1px solid var(--trait);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:4px;color:var(--encre)}
.exemple img{width:100%;height:auto;border-radius:10px;margin-bottom:6px}
.exemple span{font-size:13.5px;color:var(--doux)}
.article-sources{padding-top:26px}
.article-sources h2{text-align:left;font-size:20px;margin-bottom:8px}
.article-sources li{font-size:15px}
.article-sources a{color:var(--citron-fonce);overflow-wrap:anywhere}
.relance{margin:48px auto 0;max-width:860px;background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-l);padding:20px 22px 20px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;box-shadow:var(--ombre-s)}
.relance p{font-weight:700;color:var(--encre);font-size:17px;margin:0;flex:1 1 260px}
.relance-actions{display:flex;gap:10px;flex-wrap:wrap}
.relance .btn{padding:13px 20px}
.btn-wa-relance{background:#25D366;color:#0B2E17;text-transform:none;letter-spacing:0;display:inline-flex;align-items:center;gap:8px}
.btn-wa-relance:hover{background:#1FBE5A}
.barre-appel{display:none}
@media (max-width:900px){
  .grille,.etapes{grid-template-columns:1fr}
  .mosaique{grid-template-columns:1fr}
  .tuile:nth-child(n){grid-column:auto}
  .tuile:nth-child(6){display:flex}
  .tuile:nth-child(6) .vignette{margin-bottom:18px}
  .tuile:nth-child(6) h3{margin-top:auto}
  .carte-sombre{grid-template-columns:1fr}
  .sophie-grille{grid-template-columns:1fr;gap:36px}
  .atelier-grille{grid-template-columns:1fr;gap:28px}
  .chiffres-grille{grid-template-columns:1fr}
  .sd-hero{position:static;margin:22px auto 0}
  .cas-grille{grid-template-columns:1fr;gap:32px}
  .cas-collant{position:relative;top:0}
  .cas-cta{grid-template-columns:1fr}
  .grille-conseils,.article-exemples{grid-template-columns:1fr}
  .barre-appel{display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:55;gap:8px;padding:8px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--trait);border-radius:999px;box-shadow:var(--ombre-s);transition:transform .3s,opacity .3s}
  .barre-appel .btn{flex:1;justify-content:center;padding:12px 10px;font-size:14px;white-space:nowrap}
  .barre-appel.cachee{transform:translateY(130%);opacity:0;pointer-events:none}
  .wa-flottant{display:none}
  body{padding-bottom:84px}
  .relance{padding:18px}
  .relance-actions,.relance .btn{width:100%;justify-content:center}
  .sophie-photo{transform:none}
}
@media (max-width:560px){
  body{font-size:16px}
  section{padding:72px 0}
  .hero{padding-top:128px}
  .nav{padding-left:16px;gap:10px}
  .marque{font-size:17px}
  .marque img,.nav .marque img{height:46px}
  .nav .btn{padding:11px 14px;font-size:14px;min-height:44px}
  .btn{padding:14px 20px}
  .actions .btn{width:100%;justify-content:center}
  .scene{padding:20px 20px 0}
  .navigateur{margin-right:46px}
  .telephone{width:96px;right:14px;bottom:-20px;border-radius:20px;padding:5px}
  .telephone .ecran{border-radius:15px}
  .infos{padding:28px 20px 22px}
  .champs{grid-template-columns:1fr}
  .sophie-dit img{width:72px;border-radius:18px}
  .sophie-dit .bulle{font-size:14px;padding:11px 13px}
  .defile-miniatures img{width:190px}
  .cas-hero{padding-top:120px}
  .cas-collant{padding:18px 18px 0}
  .cas-collant .navigateur{margin-right:44px}
  .cas-collant .telephone{width:100px;right:12px;bottom:-16px}
  .fonction{grid-template-columns:38px 1fr;gap:10px;padding:18px 16px}
  .fonction-num{font-size:20px}
  .cas-nav{flex-direction:column}
  .cas-nav a:last-child{text-align:left}
  .cas-chiffre b{font-size:38px}
  .piste span{font-size:21px}
  .cadre-video{border-width:5px}
}
@media (max-width:420px){.nav .marque img{width:47px;object-fit:cover;object-position:left center}}  /* téléphone : l'icône SW seule, les deux boutons tiennent sur la ligne */
@media (prefers-reduced-motion:reduce){
  .mot{opacity:1;filter:none;transform:none}
  .progression{display:none}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .apparait{opacity:1;transform:none;filter:none}
}

/* Page Création de vidéos (videos/) et accroche de l'accueil — composants repris : cas-hero, cadre-video, competences, etape, faq, carte-sombre */
.video-hero-grille{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center}
.video-hero-grille>*{min-width:0}
.video-hero h1{font-size:clamp(38px,5.2vw,64px);margin:8px 0 18px}
.video-chapo{font-size:clamp(17px,1.8vw,19px);color:var(--texte);max-width:560px}
.son{position:absolute;left:16px;bottom:16px;height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 16px 0 13px;border:0;border-radius:999px;background:var(--citron);color:var(--encre);font:700 14px/1 "Jakarta",system-ui,sans-serif;cursor:pointer;box-shadow:0 8px 24px rgba(14,23,38,.3)}
.son.allume{background:rgba(14,23,38,.72);color:#fff;backdrop-filter:blur(6px)}
/* Le bouton son passe sous l'image (toutes largeurs), pour ne pas couvrir le texte de l'affiche */
.cadre-video:has(.son){overflow:visible;aspect-ratio:auto;border:0;background:none;box-shadow:none;border-radius:0}
.cadre-video:has(.son) video{aspect-ratio:16/9;height:auto;border:8px solid var(--blanc);border-radius:var(--r-xl);box-shadow:var(--ombre);background:#dfe3dc;display:block}
.cadre-video:has(.son) .son{position:static;margin-top:12px}
.cadre-video:has(.son) .pause{bottom:0;right:0}
@media (max-width:600px){.cadre-video:has(.son) video{border-width:5px}}
video::cue{font-family:"Jakarta",system-ui,sans-serif;font-weight:600;color:#fff;background:rgba(14,23,38,.78)}
.bandeau-video{padding:24px 0 8px}
.atouts-video{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.atouts-video li{display:flex;align-items:center;gap:12px;background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-l);padding:16px 18px;font-weight:700;color:var(--encre);font-size:15.5px;line-height:1.35}
.raisons{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.raison{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-l);padding:28px}
.raison h3{font-size:21px;letter-spacing:-.02em;margin:10px 0 8px}
.raison p{color:var(--doux);font-size:15.5px}
.videos-grille{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:24px;margin-top:48px}
.video-carte{flex:var(--r) 1 0;min-width:min(100%,calc(var(--r) * 30px));max-width:calc(var(--r) * 60px);display:flex;flex-direction:column;background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--ombre-s)}
.video-carte video{width:100%;aspect-ratio:var(--ar);object-fit:cover;background:var(--encre)}
.video-infos{padding:20px 22px 22px;display:grid;gap:8px}
.video-infos h3{font-size:20px;letter-spacing:-.02em;line-height:1.25}
.video-infos p{font-size:14.5px;color:var(--doux)}
.video-meta{display:flex;flex-wrap:wrap;gap:6px}
@media (min-width:1180px){.carte-169{max-width:calc(50% - 12px)}}  /* deux films par ligne : un film seul sur sa ligne garde la même taille */
.offre-video{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center;max-width:1040px;margin:48px auto 0;background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-xl);padding:clamp(26px,4.5vw,56px);box-shadow:var(--ombre)}
.offre-video h3{font-size:clamp(28px,3.4vw,40px);margin-top:8px}
.prix{margin:18px 0 12px;font-weight:700;color:var(--doux)}
.prix b{display:block;font-size:clamp(46px,6vw,70px);line-height:1.05;letter-spacing:-.04em;background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent}
.offre-video .competences{margin:0}
.etapes-video{list-style:none;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));max-width:none}
.etapes-video .etape{min-height:0;padding:28px 22px;text-align:left}
.etapes-video .etape h3{font-size:21px}
@media (max-width:900px){.video-hero-grille,.raisons,.offre-video{grid-template-columns:1fr}.video-hero-grille{gap:32px}}