/* =========================================================
   Comwere – feuille de style unique (direction C)
   Pour retoucher : changer d'abord les variables ci-dessous.
   ========================================================= */
:root{
  /* Couleurs */
  --ink:#080A1A;        /* fond principal */
  --ink-2:#0F1330;      /* surfaces (cartes, formulaires) */
  --ink-3:#171C42;      /* surfaces relevées */
  --line:#262C5E;       /* bordures */
  --text:#EEF0FF;       /* texte principal */
  --muted:#A9B0D6;      /* texte secondaire (contraste AA sur --ink et --ink-2) */
  --blue:#6F82FF;
  --violet:#B77CFF;
  --rose:#FF7DB1;
  --amber:#FFC971;      /* focus clavier, étiquettes */
  --on-grad:#0B0820;    /* texte posé sur le dégradé */
  --grad:linear-gradient(110deg,var(--blue),var(--violet) 55%,var(--rose));

  /* Typographie (polices hébergées sur le site, dossier /fonts) */
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Formes et mise en page */
  --r:18px;             /* arrondi des cartes */
  --max:1120px;         /* largeur maximale du contenu */
  --header-h:68px;
}

@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage-grotesque.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/fonts/hanken-grotesk.woff2) format("woff2");font-weight:100 900;font-display:swap}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--ink);color:var(--text);font:400 1.0625rem/1.65 var(--body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--amber);color:#1a1200;padding:10px 16px;border-radius:8px;z-index:100;font-weight:600}
.skip:focus{left:8px}
.wrap{width:min(var(--max),100% - 32px);margin-inline:auto}
h1,h2,h3{font-family:var(--display);line-height:1.08;letter-spacing:-.02em;font-weight:800;text-rendering:optimizeLegibility}
h1{font-size:clamp(2.3rem,6vw,4rem);max-width:16ch}
h2{font-size:clamp(1.9rem,4.4vw,3rem);max-width:20ch}
h3,.h3{font-family:var(--display);font-size:1.3rem;font-weight:700;letter-spacing:-.01em;line-height:1.15}
p{max-width:62ch}
.lead{color:var(--muted);font-size:1.15rem;margin-top:18px}
.muted{color:var(--muted)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
section{padding:clamp(64px,10vw,120px) 0;position:relative}
.kicker{font-weight:600;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);margin-bottom:14px}
.more{margin-top:32px}
.more a{color:var(--text);font-weight:600;text-underline-offset:4px}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 1rem var(--body);text-decoration:none;padding:15px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;min-height:48px;transition:transform .2s,box-shadow .2s,background .2s}
.btn-main{background:var(--grad);color:var(--on-grad);box-shadow:0 10px 40px -10px rgba(183,124,255,.7)}
.btn-main:hover{transform:translateY(-2px);box-shadow:0 14px 44px -8px rgba(255,125,177,.7)}
.btn-ghost{border-color:var(--line);background:rgba(255,255,255,.03);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* ---------- En-tête ---------- */
.top{position:sticky;top:0;z-index:50;background:rgba(8,10,26,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(38,44,94,.6)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h);gap:16px}
.logo{font:800 1.5rem var(--display);text-decoration:none;letter-spacing:-.03em}
.logo span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav ul{display:flex;gap:28px;list-style:none;padding:0}
.nav ul a{text-decoration:none;color:var(--muted);font-weight:500;font-size:.98rem;padding:6px 0}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--text)}
.nav ul a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--violet);text-underline-offset:8px;text-decoration-thickness:2px}
.nav .btn{padding:10px 20px;min-height:44px;font-size:.95rem}
/* Téléphone : le menu passe sur une seconde ligne, défilable si besoin */
@media(max-width:820px){
  .nav{flex-wrap:wrap;row-gap:0;padding-top:10px}
  .nav nav{order:3;width:100%;overflow-x:auto}
  .nav ul{gap:22px;padding:8px 0 12px}
  .nav ul a{font-size:.95rem;white-space:nowrap;display:inline-block;padding:8px 0}
  html{scroll-padding-top:130px}
}

/* ---------- Héros (accueil) ---------- */
.hero{padding-top:clamp(48px,8vw,96px);overflow:hidden}
.hero::before,.hero::after,.page-head::before{content:"";position:absolute;opacity:.5;pointer-events:none;background:radial-gradient(closest-side,var(--c) 25%,transparent)}  /* dégradé plutôt que filter:blur : rien à recalculer à chaque image */
.hero::before{--c:var(--blue);width:760px;height:760px;top:-300px;left:-280px}
.hero::after{--c:var(--rose);width:680px;height:680px;opacity:.28;right:-250px;top:10px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:1}
.hero h1{font-size:clamp(2.5rem,6.6vw,4.75rem);max-width:13ch}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-note{margin-top:20px;color:var(--muted);font-size:.95rem}

/* Maquette de navigateur (illustration) */
.mock{background:var(--ink-2);border:1px solid var(--line);border-radius:20px;box-shadow:0 40px 90px -30px rgba(111,130,255,.55),0 0 0 1px rgba(255,255,255,.03) inset}
.bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line)}
.bar i{width:11px;height:11px;border-radius:50%;background:var(--line)}
.bar b{margin-left:10px;flex:1;background:var(--ink);border-radius:999px;padding:3px 14px;font:500 .78rem var(--body);color:var(--muted);overflow:hidden;white-space:nowrap}
.scr{padding:22px;display:grid;gap:14px}
.scr .l{height:10px;border-radius:6px;background:var(--ink-3);width:90%}
.scr .l.short{width:64%}
.scr .row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.scr .c{height:74px;border-radius:12px;background:var(--ink-3);border:1px solid var(--line)}
.scr .c:nth-child(2){background:linear-gradient(160deg,var(--ink-3),#3a2a6e)}
.mock-cap{margin-top:10px;color:var(--muted);font-size:.85rem}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px}}

/* ---------- En-tête des pages intérieures ---------- */
.page-head{padding-bottom:clamp(24px,4vw,48px);overflow:hidden}
.page-head::before{--c:var(--blue);width:700px;height:700px;opacity:.35;top:-350px;left:-290px}
.page-head .wrap{position:relative;z-index:1}

/* ---------- Bandeau de promesses ---------- */
.promises{padding:0 0 clamp(48px,8vw,96px)}
.promises ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.promises li{border-top:1px solid var(--line);padding-top:20px;color:var(--muted)}
.promises b{display:block;color:var(--text);font:700 1.15rem var(--display);margin-bottom:6px}
@media(max-width:900px){.promises ul{grid-template-columns:1fr}}

/* ---------- Cartes / offres ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:30px;display:flex;flex-direction:column;gap:14px}
.card > p{color:var(--muted)}
.card.pop{background:linear-gradient(var(--ink-2),var(--ink-2)) padding-box,var(--grad) border-box;border:2px solid transparent}
.price{font:800 2.4rem var(--display);letter-spacing:-.03em;color:var(--text)!important}
.price small{display:block;font:500 .88rem var(--body);color:var(--muted);letter-spacing:0}
.delay{font-size:.92rem}
.card .btn{margin-top:auto}
.tag{align-self:flex-start;font-size:.8rem;font-weight:600;background:rgba(255,201,113,.12);color:var(--amber);padding:4px 12px;border-radius:999px}
.fine{margin-top:26px;color:var(--muted);font-size:.95rem}
@media(max-width:900px){.grid3{grid-template-columns:1fr}}

/* Listes à coches */
.checks{padding:0;list-style:none;display:grid;gap:10px;color:var(--muted);margin-top:6px}
.checks li{padding-left:26px;position:relative}
.checks li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:8px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg) translateY(-2px)}
.checks.no li::before{content:"×";border:0;width:auto;height:auto;top:-.08em;transform:none;color:var(--rose);font:700 1.3rem/1 var(--display)}

/* Deux colonnes */
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.two h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:20px}
.two p{color:var(--muted);margin-top:16px}
.alt{background:linear-gradient(180deg,transparent,var(--ink-2) 30%,var(--ink-2) 70%,transparent)}
@media(max-width:900px){.two{grid-template-columns:1fr;gap:40px}}

/* ---------- Méthode (frise qui se remplit au défilement) ---------- */
.steps{list-style:none;padding:0;margin-top:56px;display:grid;gap:0;position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;left:23px;top:8px;bottom:8px;width:2px;background:var(--line)}
.steps::after{content:"";position:absolute;left:23px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--blue),var(--violet) 55%,var(--rose));transform:scaleY(var(--p,0));transform-origin:top;transition:transform .15s linear;will-change:transform}  /* simple trait sans texte : couche propre, il ne fait plus repeindre les étapes au défilement */
.steps li{display:grid;grid-template-columns:48px 1fr;gap:26px;padding-bottom:40px;counter-increment:s}
.steps li:last-child{padding-bottom:0}
.dot{width:48px;height:48px;border-radius:50%;background:var(--ink);border:2px solid var(--line);display:grid;place-items:center;font:700 1.1rem var(--display);position:relative;z-index:1;transition:border-color .4s,color .4s}
.dot::before{content:counter(s)}
.steps li.on .dot{border-color:var(--violet);color:var(--violet)}
.steps h2,.steps h3{margin:8px 0 6px;font-size:1.3rem;max-width:none}
.steps p{color:var(--muted)}

/* ---------- Exemples (captures des modèles) ---------- */
.demos{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px}
.demos.four{grid-template-columns:repeat(4,1fr)}
.demo{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;position:relative;transition:transform .2s,border-color .2s}
.demo:hover{transform:translateY(-3px);border-color:var(--violet)}
.demo img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-bottom:1px solid var(--line);background:var(--ink-3)}
/* Aperçu défilant : capture haute de la page, qui défile au survol ou au focus clavier */
.shot{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line);background:var(--ink-3);container-type:inline-size}
.demo .shot img{position:absolute;top:0;left:0;aspect-ratio:auto;border:0;transition:transform .9s cubic-bezier(.4,0,.2,1)}
/* will-change seulement pendant le défilement : au repos la capture reste rastérisée nette */
.demo:hover .shot img,.demo:focus-within .shot img{will-change:transform;transform:translateY(calc(-100% + 62.5cqw));transition:transform 6s cubic-bezier(.45,0,.55,1) .15s}
.demo .in{padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.demo .tag{margin-bottom:4px}
.demo h2,.demo h3{font-size:1.25rem;max-width:none}
.demo h2 a,.demo h3 a{text-decoration:none}
.demo h2 a::after,.demo h3 a::after{content:"";position:absolute;inset:0}  /* toute la carte est cliquable */
.demo p{color:var(--muted);font-size:.98rem}
.demo .sector{color:var(--text);font-weight:600;font-size:.92rem}
@media(max-width:1000px){.demos.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.demos,.demos.four{grid-template-columns:1fr}}

/* Encadré d'information */
.note-box{margin-top:32px;border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:12px;padding:18px 22px;background:rgba(255,201,113,.05);color:var(--muted)}
.note-box p + p{margin-top:10px}
form > .note-box{margin-top:0}
.note-box strong{color:var(--text)}

/* ---------- FAQ ---------- */
.faq{margin-top:44px;display:grid;gap:12px;max-width:820px}
details{background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:0 24px}
summary{cursor:pointer;list-style:none;font:600 1.08rem var(--body);padding:20px 0;display:flex;justify-content:space-between;gap:20px;align-items:center;min-height:48px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:500 1.7rem/1 var(--display);color:var(--violet);transition:transform .25s;flex-shrink:0}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--muted);padding-bottom:22px}

/* ---------- Appel à l'action / contact ---------- */
.contact{background:linear-gradient(180deg,transparent,var(--ink-2))}
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px}
.cta .lead{margin-top:14px}
.mail{margin-top:22px;color:var(--muted)}
.mail a{color:var(--text);font-weight:600}
.cgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.cgrid h2{font-size:1.4rem;margin:28px 0 10px}
.cgrid h2:first-child{margin-top:0}
@media(max-width:900px){.cgrid{grid-template-columns:1fr;gap:36px}}

/* Formulaire */
form{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:30px;display:grid;gap:18px}
label{font-weight:600;font-size:.95rem;display:grid;gap:8px}
label span{font-weight:400;color:var(--muted)}
input,textarea,select{font:inherit;color:var(--text);background:var(--ink);border:1px solid var(--line);border-radius:12px;padding:13px 15px;min-height:48px;width:100%}
input:focus,textarea:focus,select:focus{outline:3px solid var(--amber);outline-offset:1px;border-color:transparent}
textarea{min-height:130px;resize:vertical}
.small{font-size:.88rem;color:var(--muted)}
.small a{color:var(--text)}
.status{color:var(--muted);font-size:.92rem}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}  /* champ piège anti-robots */

/* ---------- Pages de texte (mentions, confidentialité, à propos) ---------- */
.prose{max-width:760px}
.prose h2{font-size:clamp(1.4rem,2.6vw,1.8rem);margin:44px 0 14px;max-width:none}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--muted)}
.prose p + p{margin-top:12px}
.prose ul{padding-left:1.2em;display:grid;gap:8px;margin-top:10px}
.prose a{color:var(--text)}
.todo{background:rgba(255,201,113,.14);color:var(--amber);border-radius:6px;padding:1px 6px;font-weight:600}

/* ---------- Pied de page ---------- */
footer{border-top:1px solid var(--line);padding:36px 0;color:var(--muted);font-size:.92rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px}
footer ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
footer a{text-decoration:none;display:inline-block;padding:4px 0}
footer a:hover{color:var(--text);text-decoration:underline}

/* =========================================================
   Mouvement (animations décoratives). Tout s'arrête avec
   « réduire les animations » (bloc tout en bas).
   ========================================================= */
/* Fond du héros qui dérive lentement */
.hero::before{animation:drift1 22s ease-in-out infinite alternate}
.hero::after{animation:drift2 27s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(140px,90px) scale(1.18)}}
@keyframes drift2{to{transform:translate(-120px,-70px) scale(1.25)}}
@media(max-width:820px){.hero::before,.hero::after{animation:none}}  /* mobile : rien qui pèse sur le défilement */

/* Logo : le dégradé glisse au chargement et au survol */
.logo span{background-size:200% 100%;background-position:0 0;transition:background-position .6s;animation:logo 1.4s .2s cubic-bezier(.2,.7,.2,1) both}
.logo:hover span{background-position:100% 0}
@keyframes logo{from{background-position:100% 0}}

/* Bouton principal : reflet au survol */
.btn-main{position:relative;overflow:hidden;isolation:isolate}
.btn-main::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.btn-main:hover::after,.btn-main:focus-visible::after{transform:translateX(120%)}
.btn-main:active,.btn-ghost:active{transform:translateY(0) scale(.98)}

/* Cartes d'offres : lueur qui suit la souris (position donnée par site.js) */
.card{position:relative;isolation:isolate;transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s}
.card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(183,124,255,.2),rgba(255,125,177,.06) 45%,transparent 70%);opacity:0;transition:opacity .35s;pointer-events:none}
.card:hover::before{opacity:1}
.card:hover{transform:translateY(-4px)}
.card:not(.pop):hover{border-color:#3a3f80}

/* Retour en haut (bouton ajouté par site.js, visible après un écran de défilement) */
.to-top{position:fixed;right:16px;bottom:16px;z-index:40;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--ink-3);border:1px solid var(--line);color:var(--text);font:600 .88rem var(--body);text-decoration:none;box-shadow:0 10px 30px -10px rgba(0,0,0,.8);opacity:0;transform:translateY(10px);visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s}
.to-top.vu{opacity:1;transform:none;visibility:visible}
.to-top:hover{background:var(--line)}
.to-top svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Héros : la « bande-annonce » qui construit un site ---------- */
.tr{--ta:var(--blue);--tb:var(--violet);position:relative;transform:rotate(1.5deg);padding-bottom:34px;contain:layout}
.tr-desk{transform-origin:left center;transition:transform 1s cubic-bezier(.65,0,.35,1),opacity 1s}
.tr.s-phone .tr-desk{transform:scale(.9) translateX(-5%);opacity:.4}
.tr .scr{min-height:270px;align-content:start}
.tr-url{min-height:1.4em}
/* éléments construits un par un */
.tr-nav,.tr-title,.tr-line,.tr-btn,.tr-card{opacity:0;transform:translateY(10px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
.tr.s-nav .tr-nav,.tr.s-title .tr-title,.tr.s-btn .tr-btn,.tr.s-cards .tr-card{opacity:1;transform:none}
.tr-nav{display:flex;align-items:center;gap:10px;padding-bottom:4px}
.tr-nav span{height:7px;width:30px;border-radius:4px;background:var(--ink-3)}
.tr-nav .tr-logo{width:58px;height:14px;margin-right:auto;background:var(--line);position:relative;overflow:hidden}
.tr-nav .tr-logo::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,var(--ta),var(--tb));opacity:0;transition:opacity .6s}
.tr-title{position:relative;font:800 clamp(1.15rem,2.3vw,1.6rem)/1.2 var(--display);letter-spacing:-.02em;height:1.25em;white-space:nowrap;overflow:hidden;color:#5d6496}
.tr-title .g{position:absolute;left:0;top:0;opacity:0;transition:opacity .8s}
.tr-type.g{background:linear-gradient(110deg,var(--ta),var(--tb));-webkit-background-clip:text;background-clip:text;color:transparent}
.tr-caret{display:inline-block;width:2px;height:.95em;margin-left:3px;vertical-align:-.12em;background:var(--amber);animation:blink 1s steps(1) infinite}
.tr.s-lines .tr-caret{opacity:0}
@keyframes blink{50%{opacity:0}}
.tr .tr-line{transform:scaleX(0);transform-origin:left;transition:opacity .3s,transform .7s cubic-bezier(.2,.7,.2,1)}
.tr .tr-line + .tr-line{transition-delay:.12s}
.tr.s-lines .tr-line{opacity:1;transform:none}
.tr-btn{position:relative;justify-self:start;height:34px;padding:0 16px;border-radius:999px;background:var(--ink-3);display:flex;align-items:center;font:700 .74rem var(--body);color:var(--on-grad);overflow:hidden}
.tr-btn::before{content:"";position:absolute;inset:0;background:var(--amber);opacity:0;transition:opacity .5s .3s}
.tr-btn span{position:relative;opacity:0;transition:opacity .4s .5s;white-space:nowrap}
.tr .tr-card{position:relative;overflow:hidden;transform:translateY(14px) scale(.95)}
.tr .tr-card:nth-child(2){transition-delay:.1s;background:var(--ink-3)}
.tr .tr-card:nth-child(3){transition-delay:.2s}
.tr.s-cards .tr-card{transform:none}
.tr-card::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .7s}
.tr-card:nth-child(1)::after{background:linear-gradient(160deg,var(--ta),var(--tb))}
.tr-card:nth-child(2)::after{background:linear-gradient(160deg,var(--ink-3) 30%,var(--tb));transition-delay:.15s}
.tr-card:nth-child(3)::after{background:linear-gradient(160deg,var(--ta),var(--ink-3) 70%);transition-delay:.3s}
/* les couleurs se posent */
.tr.s-color .tr-title .g,.tr.s-color .tr-btn::before,.tr.s-color .tr-btn span,.tr.s-color .tr-logo::after{opacity:1}
.tr.s-color .tr-card::after{opacity:.85}
/* vue téléphone */
.tr-phone{position:absolute;right:5%;bottom:0;width:30%;aspect-ratio:9/17;background:var(--ink);border:1px solid var(--line);border-radius:24px;padding:22px 10px 10px;display:grid;align-content:start;gap:7px;overflow:hidden;box-shadow:0 0 0 5px var(--ink-2),0 0 0 6px var(--line),0 40px 70px -20px rgba(0,0,0,.8);opacity:0;transform:translateY(46px) scale(.9);transition:opacity .7s,transform 1s cubic-bezier(.2,.7,.2,1)}
.tr-phone::before{content:"";position:absolute;top:8px;left:50%;width:30%;height:5px;margin-left:-15%;border-radius:4px;background:var(--ink-3)}
.tr.s-phone .tr-phone{opacity:1;transform:none}
.tr-phone > *{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.tr.s-phone .tr-phone > *{opacity:1;transform:none}
.tr-phone > :nth-child(2){transition-delay:.35s}.tr-phone > :nth-child(3){transition-delay:.45s}.tr-phone > :nth-child(4){transition-delay:.5s}
.tr-phone > :nth-child(5){transition-delay:.6s}.tr-phone > :nth-child(6){transition-delay:.7s}.tr-phone > :nth-child(7){transition-delay:.8s}
.tp-nav{height:8px;width:40%;border-radius:4px;background:linear-gradient(110deg,var(--ta),var(--tb))}
.tp-title{font:800 clamp(.62rem,1.2vw,.85rem)/1.15 var(--display);letter-spacing:-.01em;margin-top:6px}
.tp-l{height:5px;border-radius:3px;background:var(--ink-3)}
.tp-l.short{width:70%}
.tp-btn{height:16px;width:62%;border-radius:999px;background:var(--amber);margin:3px 0}
.tp-c{height:clamp(28px,4vw,42px);border-radius:8px;background:linear-gradient(160deg,var(--ta),var(--tb));opacity:.85}
.tp-c + .tp-c{background:linear-gradient(160deg,var(--ink-3) 30%,var(--tb))}
/* phrase en clair qui dit ce que montre l'animation à cet instant + pause */
.tr-foot{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tr-say{font-weight:600;color:var(--text);font-size:.98rem;min-height:1.6em;max-width:none}
.tr-say::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--amber);margin-right:10px;vertical-align:.08em}
.tr-pause{font:600 .82rem var(--body);color:var(--muted);background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:999px;padding:0 14px;min-height:36px;cursor:pointer}
.tr-pause:hover{color:var(--text);background:rgba(255,255,255,.08)}
@media(max-width:900px){.tr{transform:none}}
@media(max-width:480px){.tr .scr{min-height:230px;padding:18px}.tr-phone{border-radius:18px;padding-top:18px}}

/* ---------- Méthode : icônes qui se dessinent ---------- */
.steps.icons .dot::before{position:absolute;top:-7px;right:-9px;width:22px;height:22px;border-radius:50%;background:var(--ink-3);border:1px solid var(--line);display:grid;place-items:center;font:700 .72rem var(--body);color:var(--muted)}
.dot svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1)}
.steps.anim .dot svg{stroke-dashoffset:1}
.steps li.on .dot svg{stroke-dashoffset:0}
/* halo en opacité (une ombre en transition repeint à chaque image) ; pas de scale : le chiffre et l'icône restent nets */
.dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;box-shadow:0 0 0 7px rgba(183,124,255,.12),0 0 30px -4px rgba(183,124,255,.6);opacity:0;transition:opacity .5s;pointer-events:none}
.steps li.on .dot::after{opacity:1}

/* ---------- Ce que vous obtenez : petites explications animées ---------- */
.gain{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.gain h3{margin:18px 0 8px;font-size:1.15rem}
.gain p{color:var(--muted);font-size:.98rem}
.gain-sec{padding-top:0}
.gain-sec .lead a{color:var(--text)}
.gv{position:relative;height:150px;border-radius:14px;background:var(--ink-2);border:1px solid var(--line);overflow:hidden}
/* lecture : site.js pose .on (animation en attente, image de départ) puis .play à l'écran */
.gv.on *{animation-play-state:paused!important}
.gv.on.play *{animation-play-state:running!important}
.gv.re *{animation:none!important}
/* rapide */
.gs-bar{position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);transform-origin:left;animation:gsBar .7s cubic-bezier(.3,.8,.3,1) both}
.gs-b{position:absolute;left:18px;border-radius:6px;background:var(--ink-3);animation:pop .45s cubic-bezier(.2,.7,.2,1) both}
.gs-b1{top:22px;width:46%;height:16px;background:linear-gradient(110deg,var(--blue),var(--violet));animation-delay:.5s}
.gs-b2{top:48px;width:72%;height:8px;animation-delay:.6s}
.gs-b3{top:64px;width:58%;height:8px;animation-delay:.68s}
.gs-b4{top:88px;right:18px;height:42px;background:linear-gradient(160deg,var(--ink-3),#3a2a6e);animation-delay:.78s}
@keyframes gsBar{from{transform:scaleX(0)}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.96)}}
/* google */
.gq{position:absolute;top:18px;left:16px;right:16px;height:30px;border-radius:999px;background:var(--ink);border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;padding:0 14px;font-size:.78rem;color:var(--muted);white-space:nowrap}
.gq-t{display:block;overflow:hidden;animation:type 1.3s steps(26) both}
.gr{position:absolute;left:16px;right:16px;height:16px;border-radius:5px;background:var(--ink-3);animation:pop .4s cubic-bezier(.2,.7,.2,1) both}
.gr:nth-child(2){top:62px;animation-delay:1.35s}
.gr:nth-child(3){top:86px;animation-delay:1.45s}
.gr:nth-child(4){top:110px;animation-delay:1.55s;right:40%}
.gr-you{height:18px;background:linear-gradient(90deg,rgba(183,124,255,.35),rgba(255,125,177,.15));box-shadow:inset 3px 0 0 var(--amber);animation:pop .4s 1.45s cubic-bezier(.2,.7,.2,1) both}
.gr-you::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 22px rgba(183,124,255,.55);opacity:0;animation:lueur 1.2s 2s ease-in-out both}  /* lueur en opacité : pas de repeinte */
@keyframes type{from{width:0}to{width:100%}}
@keyframes lueur{50%{opacity:1}}
/* téléphone : trois blocs en ligne se rangent en colonne */
.gp-frame{position:absolute;left:50%;top:12px;width:72px;height:124px;margin-left:-36px;border:2px solid var(--violet);border-radius:14px;animation:frameIn .6s .9s cubic-bezier(.2,.7,.2,1) both}
.gp-k{position:absolute;left:50%;top:26px;width:52px;height:26px;margin-left:-26px;border-radius:6px;background:var(--ink-3);animation:.9s .2s cubic-bezier(.65,0,.35,1) both}
.gp-k1{background:linear-gradient(110deg,var(--blue),var(--violet));animation-name:k1}
.gp-k2{top:58px;animation-name:k2}
.gp-k3{top:90px;background:linear-gradient(160deg,var(--ink-3),#3a2a6e);animation-name:k3}
@keyframes k1{from{transform:translate(-62px,32px)}}
@keyframes k2{from{transform:translate(0,0)}}
@keyframes k3{from{transform:translate(62px,-32px)}}
@keyframes frameIn{from{opacity:0;transform:scale(1.25)}}
/* formulaire */
.gf-f{position:absolute;left:18px;right:18px;height:24px;border-radius:7px;background:var(--ink);border:1px solid var(--line);overflow:hidden}
.gf-f:nth-child(1){top:18px}.gf-f:nth-child(2){top:50px}
.gf-f span{position:absolute;left:10px;top:9px;height:5px;width:55%;border-radius:3px;background:var(--muted);opacity:.6;transform-origin:left;animation:fill .6s .2s cubic-bezier(.3,.8,.3,1) both}
.gf-f:nth-child(2) span{width:75%;animation-delay:.75s}
.gf-btn{position:absolute;left:18px;top:88px;width:96px;height:28px;border-radius:999px;background:var(--grad);animation:press 1.6s cubic-bezier(.2,.7,.2,1) both}
.gf-ok{position:absolute;right:22px;top:80px;width:44px;height:44px;fill:none;stroke:var(--amber);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;animation:pop .3s 1.5s both}
.gf-ok *{animation:draw .6s 1.55s cubic-bezier(.65,0,.35,1) both}
.gf-ok path{animation-delay:1.85s}
@keyframes fill{from{transform:scaleX(0)}}
@keyframes press{0%,80%{transform:none}88%{transform:scale(.92)}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(max-width:1000px){.gain{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gain{grid-template-columns:1fr}}

/* ---------- Transitions entre pages (View Transitions entre documents) ----------
   L'en-tête reste fixe, le contenu recule en profondeur puis le nouveau arrive,
   le trait de la page active glisse dans le menu. Moins de 450 ms, rien n'est bloqué.
   Navigateurs sans View Transitions : seule l'animation d'entrée ci-dessous joue. */
.nav ul a{position:relative}
.nav-ind{position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--grad);view-transition-name:nav-ind}
.nav ul a[aria-current="page"]:has(.nav-ind){text-decoration:none}
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .top{view-transition-name:entete}
  main{view-transition-name:contenu}
  ::view-transition-group(root){animation-duration:.3s}
  ::view-transition-group(entete),::view-transition-new(entete){animation:none}
  ::view-transition-old(entete){display:none}
  ::view-transition-group(nav-ind){animation-duration:.4s;animation-timing-function:cubic-bezier(.65,0,.35,1)}
  ::view-transition-group(contenu){animation:none}
  ::view-transition-old(contenu){animation:vtPart .18s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(contenu){animation:vtArrive .38s .06s cubic-bezier(.2,.7,.2,1) both}

  /* Arrivée d'une page intérieure : titre mot par mot (mots posés par site.js), puis le reste en cascade */
  .page-head .kicker,.page-head .lead,.page-head h1:not(.mots){animation:monte .4s cubic-bezier(.2,.7,.2,1) backwards}
  .page-head h1{animation-delay:.04s}
  .page-head .lead{animation-delay:.14s}
  .mot{display:inline-block;animation:mot .36s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:min(calc(var(--i,0) * 35ms + 40ms),.2s)}
  /* À propos, Contact et pages de texte : fondu en profondeur */
  .page-head + section > .wrap > :not(.grid3,.steps,.demos),.page-head + section > .prose > *{animation:profondIn .42s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:.12s}
  .page-head + section > .prose > :nth-child(n+3){animation-delay:.18s}
  .page-head + section > .prose > :nth-child(n+5){animation-delay:.24s}
  /* Méthode : la frise se dessine, les étapes s'allument une à une */
  .page-head ~ section .steps::before{transform-origin:top;animation:trace .45s cubic-bezier(.65,0,.35,1) backwards}
  .page-head ~ section .steps .dot{animation:point .35s cubic-bezier(.2,.7,.2,1.3) backwards}
  .page-head ~ section .steps li:nth-child(2) .dot{animation-delay:.08s}
  .page-head ~ section .steps li:nth-child(3) .dot{animation-delay:.16s}
  .page-head ~ section .steps li:nth-child(n+4) .dot{animation-delay:.24s}
  /* Exemples : les vignettes s'ouvrent en éventail */
  .page-head ~ section .demo{--f:-7deg;transform-origin:50% 120%;animation:eventail .42s cubic-bezier(.2,.7,.2,1) backwards}
  .page-head ~ section .demo:nth-child(even){--f:7deg}
  .page-head ~ section .demo:nth-child(n+3){animation-delay:.07s}
  .page-head ~ section .demo:nth-child(n+5){animation-delay:.12s}
}
@keyframes vtPart{to{opacity:0;transform:perspective(1200px) translateZ(-90px)}}
@keyframes vtArrive{from{opacity:0;transform:perspective(1200px) translateZ(60px) translateY(10px)}}
@keyframes monte{from{opacity:0;translate:0 14px}}
@keyframes mot{from{opacity:0;translate:0 .45em;rotate:x 40deg}}
@keyframes profondIn{from{opacity:0;scale:.96;translate:0 10px}}
@keyframes trace{from{transform:scaleY(0)}}
@keyframes point{from{opacity:0;scale:.5}}
@keyframes eventail{from{opacity:0;rotate:var(--f);translate:0 24px}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .demo:hover .shot img,.demo:focus-within .shot img{transform:none}
  .card:hover,.demo:hover{transform:none}
}