:root{
  /* palette « Agrumes » (11/10/2026) */
  --paper:#fffbea;      /* fond du cadre */
  --cream:#fffbea;      /* cartes, textes clairs */
  --maroon:#10206b;     /* encre (bleu marine) */
  --deep:#e01540;       /* cases réalisations et prix (rouge, contraste AA avec la crème) */
  --orange:#ffe100;     /* logo */
  --blue:#0a5cff;       /* bouton */
  --red:#ff6a13;        /* icônes */
  --pink:#ff9ad5;       /* personnage */
  --lime:#9dff3a;       /* la semaine, 1er rond */
  --lime2:#ffe100;      /* 2e rond derrière le personnage */
  --yellow:#00c8ff;     /* titre, badges, petits boutons, flèches */
  --forest:#10206b;     /* pilules de la semaine */
  --bg:#fff0a8;         /* autour du cadre */
  --gap:12px;
  --r:18px;
  --display:"Anton","Impact","Arial Narrow",sans-serif;
  --body:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{font-family:var(--body);color:var(--maroon);background:var(--bg);min-height:100svh}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img{display:block;max-width:100%;height:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:3px solid var(--maroon);outline-offset:3px}

/* ---------- Cadre ---------- */
.hero{padding:14px;min-height:100svh;display:flex}
.bento{
  flex:1;display:grid;gap:var(--gap);padding:var(--gap);
  background:var(--paper);border-radius:24px;
  box-shadow:0 0 0 1px rgba(16,32,107,.06);
  /* téléphone d'abord */
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "logo cta"
    "title title"
    "perso perso"
    "price icons"
    "works works"
    "week week";
}
.cell{border-radius:var(--r);overflow:hidden;position:relative;container-type:inline-size}
.c-logo{grid-area:logo}.c-cta{grid-area:cta}.c-icons{grid-area:icons}.c-perso{grid-area:perso}
.c-works{grid-area:works}.c-price{grid-area:price}.c-week{grid-area:week}.c-title{grid-area:title}

/* ---------- A : logo ---------- */
.c-logo{background:var(--orange);display:grid;place-items:center;height:132px}
.mark{font-family:var(--display);font-size:19cqi;line-height:.95;text-align:center;color:var(--maroon);transform:rotate(-6deg);letter-spacing:-.005em;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.mark i{font-style:normal;color:var(--cream)}
.c-logo:hover .mark{transform:rotate(4deg) scale(1.06)}

/* ---------- B : bouton ---------- */
.c-cta{overflow:visible;z-index:5}
.cta-box{position:absolute;inset:0 0 auto 0;height:100%;background:var(--blue);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  transition:height .5s cubic-bezier(.65,0,.2,1),box-shadow .4s}
.cta-head{flex:none;height:var(--h0,100%);transition:height .5s cubic-bezier(.65,0,.2,1);display:grid;place-items:center;padding:12px;container-type:size}
.c-cta.open .cta-head{height:clamp(64px,9vh,84px)}
.c-cta.open .cta-box{box-shadow:0 18px 40px rgba(16,32,107,.28)}
.contact{flex:1;min-height:0;padding:0 clamp(16px,1.8vw,28px) clamp(16px,2vh,26px);color:var(--cream);display:flex;flex-direction:column;gap:clamp(8px,1.4vh,14px);
  opacity:0;translate:0 12px;transition:opacity .25s,translate .35s;pointer-events:none;visibility:hidden}
.c-cta.open .contact{opacity:1;translate:0 0;visibility:visible;transition-delay:.18s}
.c-cta.open .contact{pointer-events:auto}
.c-kicker{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.c-lead{font-family:var(--display);font-size:clamp(24px,2.2vw,36px);line-height:1;color:var(--cream)}
.c-list{display:grid;gap:clamp(8px,1.3vh,14px)}
.c-list li{display:grid;gap:2px;border-top:1.5px solid rgba(253,232,194,.35);padding-top:clamp(6px,1vh,10px)}
.c-lab{font-size:12px;opacity:.85}
.c-list a{font-weight:700;font-size:clamp(13px,1.05vw,17px);overflow-wrap:anywhere;width:fit-content;border-bottom:2px solid transparent;transition:border-color .2s,color .2s}
.c-cta.open .c-list a{border-bottom-color:var(--yellow)}
.c-cta.open .c-list a:hover{color:var(--yellow)}
.c-foot{margin-top:auto;font-size:12px;opacity:.85}
.close{position:absolute;top:10px;right:10px;width:32px;height:32px;border:0;border-radius:50%;background:var(--cream);color:var(--maroon);font-size:20px;line-height:1;cursor:pointer;opacity:0;scale:.6;pointer-events:none;transition:opacity .2s,scale .25s cubic-bezier(.3,1.6,.5,1)}
.c-cta.pinned .close{opacity:1;scale:1;pointer-events:auto}
.pill-btn{border:0;cursor:pointer;font-family:inherit}
.pill-btn{
  display:inline-flex;align-items:center;gap:.6em;white-space:nowrap;
  background:var(--cream);color:var(--maroon);font-weight:600;
  font-size:clamp(13px,8.6cqi,19px);padding:.75em 1.1em;border-radius:99px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.pill-btn span{display:inline-grid;place-items:center;width:1.6em;height:1.6em;margin-right:-.55em;border-radius:50%;
  background:var(--blue);color:var(--cream);font-weight:700;line-height:1;
  transition:transform .2s ease;animation:cta-pulse 1.8s ease-in-out infinite}
/* flèche du bouton : la pastille grossit et revient, pour attirer l'œil (arrêtée une fois le contact ouvert) */
@keyframes cta-pulse{0%,100%{scale:1}45%{scale:1.14}}
.c-cta.open .pill-btn span{animation:none}
.pill-btn:hover,.c-cta.open .pill-btn{transform:translateY(-2px);box-shadow:0 6px 0 rgba(16,32,107,.25)}
.pill-btn:hover span{transform:translateX(4px)}
.c-cta.open .pill-btn span{transform:rotate(90deg)}

/* ---------- C : icônes ---------- */
.c-icons{background:var(--red);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px}
.icons{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 16cqi;width:100%;justify-items:center}
.icons li{width:22cqi;max-width:44px;aspect-ratio:1;display:grid;place-items:center;cursor:pointer;border-radius:10px}
.icons svg{width:100%;height:100%;fill:var(--maroon);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.icons li:hover svg,.icons li:focus-visible svg{transform:scale(1.18) rotate(-6deg)}
.say{min-height:1.3em;font-weight:600;font-size:clamp(13px,7cqi,16px);line-height:1.3;color:var(--maroon);text-align:center;white-space:nowrap}
.say::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.12em;background:currentColor;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

/* ---------- D : personnage ---------- */
.c-perso{background:var(--pink);height:270px}
#perso{position:absolute;bottom:0;left:50%;height:100%;aspect-ratio:1600/1440;transform:translateX(-50%) scaleX(-1);filter:drop-shadow(0 10px 18px rgba(16,32,107,.18));pointer-events:none}
.blob{position:absolute;border-radius:50%;background:var(--lime)}
.b1{width:44%;aspect-ratio:1;right:-6%;top:12%}
.b2{width:30%;aspect-ratio:1;right:22%;top:-4%;background:var(--lime2)}

/* ---------- E : réalisations ---------- */
.c-works{background:var(--deep);display:flex;padding:16px 38px}
.track{flex:1;min-width:0;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - var(--cg))/2);--cg:12px;column-gap:var(--cg);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 2px}
.track::-webkit-scrollbar{display:none}
.arrow{position:absolute;top:50%;translate:0 -50%;width:30px;height:30px;border:0;border-radius:50%;background:var(--yellow);color:var(--maroon);display:grid;place-items:center;cursor:pointer;z-index:2;transition:transform .2s cubic-bezier(.3,1.6,.5,1),opacity .2s,background .2s}
.arrow svg{width:20px;height:20px;fill:currentColor}
.arrow.prev{left:4px}.arrow.next{right:4px}
.arrow:hover:not(:disabled){transform:scale(1.12);background:var(--orange)}
.arrow:disabled{opacity:.3;cursor:default}
.arrow:focus-visible{outline-color:var(--cream)}
.card{background:var(--cream);border-radius:10px;padding:10px 10px 14px;display:flex;flex-direction:column;align-items:center;scroll-snap-align:start;container-type:inline-size;transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.card:hover{transform:translateY(-4px) rotate(-1deg)}
.arch{width:100%;aspect-ratio:1/1.08;border-radius:6px;overflow:hidden;background:var(--maroon);transform:rotate(-2deg)}
.card:nth-child(2) .arch{transform:rotate(1.5deg)}
.card:nth-child(3) .arch{transform:rotate(-1deg)}
.arch img{width:100%;height:100%;object-fit:cover;object-position:28% 0}
.card:nth-child(2) .arch img{object-position:18% 40%}
.card:nth-child(3) .arch img{object-position:50% 35%}
.card:nth-child(4) .arch{transform:rotate(2deg)}
.card:nth-child(5) .arch{transform:rotate(-1.5deg)}
.arch{position:relative}
.arch.adult img{filter:blur(10px) brightness(.7)}
.tag18{position:absolute;left:50%;top:55%;translate:-50% -50%;background:rgba(0,0,0,.7);color:#fff;font-weight:600;font-size:12px;padding:5px 11px;border-radius:99px;border:1px solid rgba(255,255,255,.3)}
.card h2{text-wrap:balance;min-height:2em;display:flex;align-items:flex-end;font-family:var(--display);font-weight:400;font-size:clamp(18px,15cqi,32px);line-height:1;margin-top:12px;align-self:flex-start;padding-left:6px;letter-spacing:.005em}
.meta{font-size:clamp(10px,7.2cqi,13px);font-weight:500;align-self:flex-start;padding-left:6px;margin:4px 0 12px;white-space:nowrap}
.mini-btn{margin-top:auto;background:var(--yellow);font-weight:600;font-size:clamp(11px,7.6cqi,13px);padding:.55em 1.5em;border-radius:99px;transition:background .2s}
.mini-btn:hover{background:var(--orange)}

/* ---------- F : prix ---------- */
.c-price{background:var(--deep);color:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px 14px;gap:clamp(10px,2.2vh,22px)}
.big{font-family:var(--display);font-size:clamp(56px,36cqi,150px);line-height:.95;letter-spacing:-.01em}
.outline{display:inline-flex;align-items:center;gap:.35em;font-family:var(--display);font-size:clamp(17px,11cqi,34px);border:1.5px solid var(--cream);border-radius:99px;padding:.18em .8em .22em}
.outline svg{width:.85em;fill:var(--cream)}
.note{font-size:clamp(10px,4.6cqi,13px);line-height:1.4;max-width:26ch;opacity:.92}

/* ---------- G : la semaine ---------- */
.c-week{background:var(--lime);display:grid;place-items:center;padding:16px}
.steps{display:grid;gap:clamp(8px,4cqi,14px);width:min(100%,250px)}
.steps li{display:flex;align-items:center;gap:12px;background:var(--forest);color:var(--cream);border-radius:99px;padding:.6em .6em .6em 1.15em;font-size:clamp(14px,6.6cqi,17px);font-weight:500;transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.steps li:hover{transform:translateX(5px)}
.steps svg{width:1.1em;height:1.1em;fill:var(--cream);flex:none}
.steps b{margin-left:auto;background:var(--yellow);color:var(--forest);font-size:.72em;font-weight:700;min-width:2.2em;height:2.2em;border-radius:50%;display:grid;place-items:center}

/* ---------- H : titre ---------- */
.c-title{background:var(--yellow);display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:16px 18px;gap:12px}
.tag{font-size:clamp(11px,2.6cqi,13px);font-weight:500}
.c-title h1{display:flex;flex-direction:column;align-items:center;font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.92;font-size:clamp(44px,14.2cqi,104px);letter-spacing:-.005em;max-width:11ch;text-wrap:balance}

@media (max-width:899px){
  .c-cta.open{z-index:50}
  .c-cta.open .cta-box{position:fixed;inset:auto 12px 12px;height:auto!important;max-height:calc(100svh - 24px);overflow-y:auto;box-shadow:0 0 0 100vmax rgba(16,32,107,.45)}
  .c-cta.open .cta-head{height:auto;padding:20px 12px 8px;container-type:normal}
  .c-cta.open .contact{gap:14px}
  .c-cta.open .c-foot{margin-top:6px}
  .c-cta.open .contact{padding-top:8px}
}

/* ---------- PC : composition du modèle ---------- */
@media (min-width:900px){
  .hero{padding:clamp(14px,2vw,28px);height:100svh;min-height:600px}
  .bento{
    padding:clamp(14px,1.8vw,26px);gap:clamp(10px,1.1vw,14px);
    grid-template-columns:187fr 56fr 172fr 71fr 437fr;
    grid-template-rows:115fr 60fr 135fr 288fr;
    grid-template-areas:
      "logo  cta   cta   works works"
      "logo  perso perso works works"
      "icons perso perso works works"
      "price price week  week  title";
  }
  .cell{min-height:0;container-type:size}
  .c-logo{height:auto}
  .mark{font-size:min(19cqi,30cqh)}
  .pill-btn{font-size:clamp(14px,min(7.2cqi,15cqh),20px);padding:.6em 1.15em .6em 1.4em}
  .c-icons{gap:clamp(6px,1.4vh,14px)}
  .icons{gap:10cqh 14cqi;width:84%}
  .icons li{width:min(19cqi,23cqh);max-width:none}
  .say{font-size:clamp(12px,min(7cqi,11cqh),17px)}
  .c-perso{height:auto}
  #perso{height:98%;transform:translateX(-44%) scaleX(-1)}
  .c-works{padding:clamp(10px,2.8vh,30px) clamp(42px,3.6vw,56px)}
  .track{--cg:clamp(10px,1.4vw,22px);grid-auto-columns:calc((100% - 2*var(--cg))/3)}
  .arrow{width:clamp(30px,2.4vw,38px);height:clamp(30px,2.4vw,38px)}
  .arrow.prev{left:clamp(6px,.6vw,10px)}.arrow.next{right:clamp(6px,.6vw,10px)}
  .card{container-type:size;padding:clamp(8px,.9vw,14px) clamp(8px,.9vw,14px) clamp(10px,1.4vh,18px)}
  .arch{flex:1;min-height:0;aspect-ratio:auto;width:100%}
  .card h2{font-size:min(15cqi,7.5cqh);margin-top:5cqh}
  .meta{font-size:min(7.4cqi,3.4cqh);margin:1cqh 0 4cqh}
  .mini-btn{margin-top:0;font-size:min(7.6cqi,3.6cqh)}
  .big{font-size:min(40cqi,40cqh)}
  .outline{font-size:min(12cqi,12cqh)}
  .note{font-size:min(4.8cqi,4.6cqh)}
  .c-week{padding:16px}
  .steps{width:76cqi;gap:min(4.6cqh,18px)}
  .steps li{font-size:min(6.6cqi,6.4cqh)}
  .c-title h1{font-size:min(19cqi,27cqh);max-width:none}
  .tag{font-size:min(2.8cqi,4.6cqh)}
}

/* ---------- Animations (d'après la vidéo de référence) ---------- */
/* entrée (comme la vidéo) : chaque case part de sous l'écran et remonte à sa place, l'une après l'autre ;
   départ --fy et délai --d posés par main.js */
.cell{animation:rise .9s cubic-bezier(.22,1,.36,1) var(--d,0s) backwards}
@keyframes rise{from{translate:0 var(--fy,100vh)}}
html.intro .hero{overflow:hidden}
html.measure .cell{animation:none!important}
/* titre : lignes révélées de bas en haut */
.ln{display:block;overflow:hidden;padding-bottom:.04em}
.ln>span{display:block;animation:line .7s cubic-bezier(.2,1,.3,1) backwards}
.ln:nth-child(1)>span{animation-delay:calc(var(--d,0s) + .5s)}.ln:nth-child(2)>span{animation-delay:calc(var(--d,0s) + .63s)}.ln:nth-child(3)>span{animation-delay:calc(var(--d,0s) + .76s)}
@keyframes line{from{translate:0 105%}}
/* logo : il fait coucou */
.mark{transform-origin:50% 70%}
.c-logo.wave .mark{animation:wave 1.3s ease-in-out}
@keyframes wave{0%,100%{rotate:0deg}20%{rotate:9deg}40%{rotate:-7deg}60%{rotate:6deg}80%{rotate:-3deg}}
/* personnage : les formes derrière lui défilent */
.shapes{position:absolute;inset:0}
.set{position:absolute;inset:0;translate:110% 0;transition:translate .75s cubic-bezier(.5,1.35,.45,1)}
.set.on{translate:0 0}
.set.out{translate:-110% 0;transition-timing-function:cubic-bezier(.55,0,.6,.4)}
.set.prep{transition:none}
.s-star{width:46%;aspect-ratio:1;right:-4%;top:8%;background:var(--lime);border-radius:0;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.s-sq{width:28%;aspect-ratio:1;right:30%;top:-6%;background:var(--lime2);border-radius:28%;rotate:14deg}
.s-ring{width:50%;aspect-ratio:1;right:-10%;top:4%;background:none;border:clamp(14px,2.2vw,28px) solid var(--lime)}
.s-half{width:34%;aspect-ratio:2/1;right:28%;top:0;background:var(--lime2);border-radius:0 0 999px 999px}
/* réalisations : les cartes visibles pivotent en cascade */
.track{perspective:1100px}
.card.spin{animation:spin 1.3s cubic-bezier(.45,0,.25,1) var(--sd,0s)}
.card{transform-style:preserve-3d}.card>*{backface-visibility:hidden}   /* de dos : carte crème vide, pas de texte à l'envers */
@keyframes spin{to{rotate:y 360deg}}
/* la semaine : chaque jour s'allume tour à tour */
.steps li{transition:transform .25s cubic-bezier(.3,1.5,.5,1),background .3s}
.steps li.now{transform:translateX(6px);background:var(--blue)}
.steps li b{transition:scale .3s cubic-bezier(.3,1.8,.5,1),background .3s}
.steps li.now b{scale:1.25;background:var(--orange)}
/* prix : petit rebond quand il recompte */
.big{transition:scale .3s cubic-bezier(.3,1.8,.5,1)}
.big.tick{scale:1.04}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}