/* ══════════════════════════════════════════════════════════════
   ekóz · accueil.css : page d'accueil
   ──────────────────────────────────────────────────────────────
   Le fil conducteur : un rédacteur qui corrige au stylo. Tout ce qui est
   « écrit à la main » (Caveat, traits terracotta) est une correction, une
   note en marge ou une signature, jamais une décoration.

   La charte ne bouge pas : prune, terracotta, sauge, papier ; Bricolage
   Grotesque, Space Grotesk, Caveat. Ce qui change, c'est l'usage :
   - des aplats francs qui alternent (prune, papier, terracotta), au lieu
     d'une page crème de haut en bas ;
   - des titres très grands, serrés, en Bricolage à l'optique « display » ;
   - des objets plutôt que des cartes : une feuille corrigée, un post, un
     calendrier, un ticket ;
   - des animations qui racontent quelque chose (on barre, on corrige, on
     remplit l'agenda), déclenchées une fois, jamais au survol de la souris.

   Sans JavaScript ou avec « réduire les animations », tout est à l'état final.
   Autonome : ne dépend ni de site.css ni de style.css.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* Couleurs de la charte, sans en ajouter */
  --plum:#1e1b30;
  --ink:#1a1728;
  --ink-2:#5b5674;
  --ink-3:#6b6684;
  --paper:#f6f4f0;
  --paper-2:#efece6;
  --sheet:#fdfcfa;
  --line:rgba(30,27,48,.14);
  --terra:#c07448;
  --terra-l:#dd9366;
  --terra-d:#a55f37;
  --terra-ink:#9a532f;
  --sage:#6ea8a5;
  --on-plum:#e9e6f0;
  --on-plum-2:#bdb8cd;

  /* Polices de la charte */
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --sans:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --hand:'Caveat','Bradley Hand','Segoe Print',cursive;

  --maxw:1360px;
  --pad:clamp(20px,4vw,56px);
  --top:76px;
  --ease:cubic-bezier(.22,1,.36,1);
  --pen:cubic-bezier(.6,0,.4,1);

  /* Trait de stylo pour barrer, réutilisé partout */
  --strike:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 12C40 8 90 13 140 9S190 8 198 7' fill='none' stroke='%23c07448' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;}
@supports (overflow:clip){html{overflow-x:clip;}}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
button,input,select,textarea{font:inherit;color:inherit;}
[hidden]{display:none!important;}
::selection{background:var(--terra);color:var(--plum);}
:focus-visible{outline:2px solid var(--terra-ink);outline-offset:3px;}
.sec--plum :focus-visible,.hero :focus-visible,.foot :focus-visible{outline-color:var(--terra-l);}
.sec--terra :focus-visible{outline-color:var(--plum);}

.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--paper);color:var(--plum);
  font-size:15px;padding:10px 16px;text-decoration:none;}
.skip:focus{top:8px;}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

h1,h2,h3,h4{font-family:var(--display);color:var(--plum);font-weight:800;line-height:1.05;letter-spacing:-.02em;}
h3{font-size:21px;font-weight:700;line-height:1.25;letter-spacing:-.01em;}
p{text-wrap:pretty;}
b,strong{font-weight:700;}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}

/* Titres de section : très grands, serrés, optique display */
.h2{font-size:clamp(44px,6.4vw,104px);line-height:.93;letter-spacing:-.045em;
  font-variation-settings:'opsz' 96;text-wrap:balance;}
.h2--narrow{max-width:18ch;}
.h3{font-size:clamp(20px,1.7vw,24px);font-weight:700;letter-spacing:-.01em;}

/* Liens dans le texte courant */
.sec p a:not(.btn):not(.lnk),.fine a{color:var(--terra-ink);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.18em;}
.sec p a:not(.btn):not(.lnk):hover,.fine a:hover{text-decoration-thickness:2px;}
.sec--plum p a:not(.btn):not(.lnk){color:var(--terra-l);}
.sec--terra p a:not(.btn):not(.lnk){color:var(--plum);}

.lead{font-size:clamp(20px,1.7vw,24px);line-height:1.5;}
.fine{font-size:14.5px;line-height:1.55;color:var(--ink-3);margin-top:28px;}
.fine--l{font-size:16px;color:var(--ink-2);}

/* ── Boutons ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-size:16.5px;font-weight:600;line-height:1.2;
  padding:17px 26px;border:0;border-radius:999px;background:var(--terra-d);color:#fff;
  text-decoration:none;cursor:pointer;
  transition-property:background-color,transform;transition-duration:.18s;transition-timing-function:ease-out;}
.btn:hover{background:#8a4c2b;}
.btn:active{transform:scale(.97);}
.btn--sm{padding:11px 18px;font-size:14.5px;}
.btn--light{background:var(--terra-l);color:var(--plum);}
.btn--light:hover{background:#e8a67d;}
.btn--plum{background:var(--plum);color:var(--paper);}
.btn--plum:hover{background:#2d2946;}
.lnk{font-size:16px;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;}
.lnk:hover{text-decoration-thickness:2px;}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;}

/* ── En-tête : posé sur le hero prune ──────────────────────── */
.top{position:absolute;top:0;left:0;right:0;z-index:30;color:var(--on-plum);}
.top__in{display:flex;align-items:center;gap:32px;height:var(--top);}
.brand{display:block;color:var(--paper);flex:none;}
.brand__logo{height:26px;width:auto;}
.top__nav{display:flex;gap:28px;margin-left:auto;font-size:15px;}
.top__nav a{color:var(--on-plum-2);text-decoration:none;transition:color .15s;}
.top__nav a:hover{color:#fff;}
.top .btn{background:var(--terra-l);color:var(--plum);}
.top .btn:hover{background:#e8a67d;}
.burger{display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.3);border-radius:999px;
  font-size:15px;padding:8px 16px;cursor:pointer;color:var(--paper);}
.mmenu{display:grid;gap:2px;padding:8px var(--pad) 28px;background:var(--plum);font-size:20px;
  border-top:1px solid rgba(255,255,255,.12);}
.mmenu > a:not(.btn):not(.lnk){padding:12px 0;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.1);}
.mmenu .btn{margin-top:18px;background:var(--terra-l);color:var(--plum);}
.mmenu .lnk{margin-top:14px;justify-self:start;}

/* ── Hero ──────────────────────────────────────────────────── */
.hero{position:relative;background:var(--plum);color:var(--on-plum);padding-top:var(--top);overflow:hidden;}
.hero__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;
  min-height:min(calc(100svh - var(--top)),900px);}
.hero__txt{position:relative;z-index:2;padding:clamp(32px,6vh,80px) 0 clamp(96px,10vw,150px);}
.hero__by{font-size:15px;color:var(--on-plum-2);}
.hero__h1{font-size:clamp(56px,10.2vw,164px);line-height:.9;letter-spacing:-.05em;color:var(--paper);
  font-variation-settings:'opsz' 96;margin-top:clamp(56px,7vw,110px);white-space:nowrap;}
.hero__h1 .gw,.hero__h1 em{display:block;}
.hero__h1 em{position:relative;width:max-content;font-style:normal;padding-bottom:.08em;}
.hero__sub{font-size:clamp(19px,1.6vw,23px);line-height:1.45;color:var(--on-plum);max-width:32ch;margin-top:clamp(28px,3vw,44px);}
.hero .cta{margin-top:clamp(28px,3vw,40px);}
.hero .btn{background:var(--terra-l);color:var(--plum);}
.hero .btn:hover{background:#e8a67d;}
.hero__small{font-size:14.5px;color:var(--on-plum-2);margin-top:16px;}

/* Titre corrigé à la main : « Ghost » barré de deux traits (aller, retour)
   puis s'efface, « human » écrit au-dessus, « LinkedIn » souligné. */
.gw__ghost{position:relative;text-decoration:none;color:inherit;animation:ghost .7s ease 1s forwards;}
@keyframes ghost{to{color:rgba(246,244,240,.26);}}
.gw__strike,.gw__line{position:absolute;overflow:visible;pointer-events:none;fill:none;
  stroke:var(--terra-l);stroke-linecap:round;stroke-linejoin:round;}
/* Les SVG gardent le rapport largeur/hauteur du mot qu'ils couvrent (tout est
   en em) : l'échelle reste uniforme et pathLength=1 trace le trait en entier. */
.gw__strike{left:-.04em;top:.44em;width:calc(100% + .1em);height:.3em;}
.gw__strike path{stroke-width:5;stroke-dasharray:1;stroke-dashoffset:1;animation:pen .38s var(--pen) .7s forwards;}
.gw__strike path+path{stroke-width:4;animation-delay:1.02s;}
.gw__ghost::after{content:attr(data-human);content:attr(data-human) / "";
  position:absolute;left:50%;bottom:1.3em;transform:translateX(-50%) rotate(-7deg);
  font-family:var(--hand);font-weight:700;font-size:.66em;letter-spacing:0;line-height:1;
  color:var(--terra-l);white-space:nowrap;clip-path:inset(-.3em 100% -.3em -.3em);
  animation:scribble .75s cubic-bezier(.5,0,.3,1) 1.35s forwards;}
@keyframes scribble{to{clip-path:inset(-.3em -.3em -.3em -.3em);}}
.gw__line{left:0;bottom:-.02em;width:100%;height:.14em;}
.gw__line path{stroke-width:3.9;stroke-dasharray:1;stroke-dashoffset:1;animation:pen .6s var(--pen) 1.9s forwards;}
@keyframes pen{to{stroke-dashoffset:0;}}

/* Portrait détouré, posé sur le bas du hero ; le bandeau passe devant. */
.hero__pic{position:relative;z-index:1;align-self:end;justify-self:end;width:min(100%,560px);margin-right:calc(var(--pad) * -.4);}
.hero__pic::before{content:"";position:absolute;left:-14%;right:-14%;top:4%;bottom:-6%;z-index:-1;
  background:radial-gradient(closest-side,rgba(221,147,102,.30),rgba(221,147,102,.10) 55%,rgba(221,147,102,0));}
.hero__pic img{width:100%;height:auto;}
.hero__note{position:absolute;left:-12%;top:9%;color:var(--terra-l);pointer-events:none;
  font-family:var(--hand);font-weight:700;font-size:clamp(24px,2.2vw,32px);line-height:1;}
.hero__note > span{display:block;transform:rotate(-8deg);}
.hero__note svg{width:84px;height:66px;margin:6px 0 0 66px;transform:scaleX(-1) rotate(-10deg);}

/* ── Bandeau des phrases barrées, en travers ───────────────── */
.band{position:relative;z-index:5;display:flex;align-items:stretch;width:112vw;margin:calc(-1 * clamp(44px,5vw,76px)) 0 0 -6vw;
  background:var(--paper);transform:rotate(-2.2deg);box-shadow:0 18px 40px -22px rgba(20,18,34,.55);
  border-block:2px solid var(--plum);}
.band__lbl{flex:none;display:flex;align-items:center;padding:0 26px 0 calc(6vw + var(--pad));
  background:var(--terra);color:var(--plum);font-family:var(--hand);font-weight:700;
  font-size:clamp(24px,2.2vw,32px);letter-spacing:0;line-height:1;white-space:nowrap;}
.band__vp{flex:1;overflow:hidden;padding:20px 0;}
.band__track{display:flex;width:max-content;animation:marquee 70s linear infinite;}
.band:hover .band__track,.band.is-paused .band__track{animation-play-state:paused;}
/* Arrêt du défilement : au clic ou au toucher sur le bandeau, et au clavier
   avec ce bouton, visible seulement quand il a le focus. */
.band{cursor:pointer;}
.band__pause{position:absolute;left:calc(6vw + var(--pad));top:100%;margin-top:8px;padding:6px 12px;border:0;border-radius:999px;
  background:var(--plum);color:var(--paper);font-size:13px;cursor:pointer;opacity:0;pointer-events:none;}
.band__pause:focus-visible{opacity:1;pointer-events:auto;}
.band__list{display:flex;list-style:none;gap:56px;padding-right:56px;}
.band s{display:block;text-decoration:none;white-space:nowrap;font-family:var(--display);font-weight:700;
  font-size:clamp(22px,2.1vw,32px);letter-spacing:-.02em;color:var(--plum);
  background:var(--strike) no-repeat 0 60%/100% .55em;}
@keyframes marquee{to{transform:translateX(-50%);}}

/* ── Sections ──────────────────────────────────────────────── */
.sec{position:relative;padding:clamp(72px,8.5vw,136px) 0;scroll-margin-top:24px;}
.sec--paper{background:var(--paper);}
.sec--paper2{background:var(--paper-2);}
.sec--terra{background:var(--terra);color:var(--plum);}
.sec--terra .fine,.sec--terra .fine--l{color:var(--plum);}
.sec--plum{background:var(--plum);color:var(--on-plum);}
.sec--plum .h2,.sec--plum h3{color:var(--paper);}
.sec--plum .fine{color:var(--on-plum-2);}
#preuve{padding-top:clamp(112px,11vw,176px);}

.head{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,3fr);gap:24px clamp(32px,5vw,80px);align-items:end;
  margin-bottom:clamp(56px,7vw,112px);}
.head__p{font-size:18px;color:var(--ink-2);max-width:36ch;}

/* ── Avant / après : une feuille corrigée, puis le post ────── */
.ab{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;}
.sheet{position:relative;background:var(--sheet);padding:clamp(26px,3.2vw,52px);
  box-shadow:0 1px 1px rgba(30,27,48,.06),0 28px 56px -30px rgba(30,27,48,.42);}
.sheet__lbl{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink-3);
  padding-bottom:12px;margin-bottom:22px;border-bottom:1px solid var(--line);}
.sheet--draft{grid-column:1 / span 6;transform:rotate(-1.4deg);padding-right:clamp(120px,14vw,200px);
  font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:16px;line-height:2.1;color:#46425a;}
/* Marge de correction à droite : filet fin, comme une feuille annotée */
.sheet--draft::after{content:"";position:absolute;top:clamp(26px,3.2vw,52px);bottom:clamp(26px,3.2vw,52px);
  right:clamp(104px,12.6vw,182px);border-right:1px solid rgba(192,116,72,.35);}
.sheet--draft p + p{margin-top:.5em;}
.sheet--post{grid-column:7 / span 6;z-index:2;margin:clamp(96px,11vw,176px) 0 0 -10%;transform:rotate(1.1deg);
  font-size:18px;line-height:1.6;color:var(--ink);}
.sheet--post p + p{margin-top:.95em;}
.sheet--post b{font-family:var(--display);font-size:1.18em;line-height:1.3;letter-spacing:-.01em;color:var(--plum);}
.sheet__meta{font-size:14px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:14px;margin-top:1.4em!important;}

/* Passages barrés, avec la remarque écrite au-dessus de la ligne */
.x{-webkit-box-decoration-break:clone;box-decoration-break:clone;color:var(--ink-3);
  background:var(--strike) no-repeat 0 58%/100% .7em;}
/* La remarque garde la hauteur de la ligne barrée (top auto) et part dans la
   marge de droite : elle reste en face du passage, quelle que soit la largeur. */
.ed{position:absolute;right:clamp(14px,1.6vw,24px);width:clamp(84px,10.4vw,150px);margin-top:-.2em;
  font-family:var(--hand);font-style:normal;font-weight:700;font-size:clamp(19px,1.6vw,23px);line-height:1;
  color:var(--terra-d);transform:rotate(-4deg);transform-origin:left center;}
.ed--r{margin-top:-.1em;}
.sheet__verdict{font-family:var(--hand);font-weight:700;font-size:clamp(30px,2.6vw,38px);line-height:1;color:var(--terra-d);
  transform:rotate(-4deg);transform-origin:left;margin-top:.7em!important;}
.circ{position:relative;white-space:nowrap;}
.circ svg{position:absolute;left:-12%;top:-38%;width:124%;height:176%;overflow:visible;fill:none;
  stroke:var(--terra);stroke-width:3.2;stroke-linecap:round;pointer-events:none;}

.ab__arrow{position:absolute;left:45%;top:-64px;z-index:3;width:clamp(130px,13vw,190px);color:var(--terra-d);pointer-events:none;
  font-family:var(--hand);font-weight:700;font-size:clamp(24px,2.1vw,30px);line-height:1;}
.ab__arrow > span{display:block;transform:rotate(-6deg);margin:0 0 4px 18px;}
.ab__arrow svg{width:100%;height:auto;overflow:visible;}

/* ── Résultats : les chiffres, très grands, sur terracotta ─── */
.stats{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(48px,6vw,96px);
  border-block:2px solid var(--plum);}
.stats li{padding:clamp(20px,2.2vw,32px) clamp(20px,2.4vw,40px) clamp(24px,2.6vw,40px);}
.stats li:first-child{padding-left:0;}
.stats li + li{border-left:2px solid var(--plum);}
.stats__n{font-family:var(--display);font-weight:800;font-size:clamp(96px,12.4vw,200px);line-height:.8;
  letter-spacing:-.045em;color:var(--plum);font-variation-settings:'opsz' 96;font-variant-numeric:tabular-nums;}
.stats p{font-size:clamp(18px,1.5vw,22px);line-height:1.35;max-width:22ch;margin-top:22px;}
.stats__hand{font-family:var(--hand);font-weight:700;font-size:clamp(28px,2.6vw,40px);line-height:1.05;color:var(--plum);
  text-align:right;transform:rotate(-2.5deg);margin-top:32px;}

/* ── Avis ──────────────────────────────────────────────────── */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:48px clamp(40px,6vw,120px);margin-top:clamp(36px,4vw,56px);}
.quote:nth-child(2){margin-top:clamp(0px,9vw,150px);}
.quote p{font-family:var(--display);font-weight:500;font-size:clamp(25px,2.5vw,38px);line-height:1.2;letter-spacing:-.022em;
  color:var(--plum);text-indent:-.42em;}
.quote figcaption{display:flex;align-items:center;gap:16px;margin-top:26px;font-size:15px;color:var(--ink-2);}
.quote__who{flex:none;font-family:var(--hand);font-weight:700;font-size:48px;line-height:.8;color:var(--terra-d);transform:rotate(-6deg);}
#avis .fine{margin-top:clamp(40px,5vw,72px);}

/* ── Méthode : un mois type, votre temps en couleur ────────── */
.hl{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M3 10C50 5 140 8 197 4L195 36C130 33 60 38 5 35Z' fill='%236ea8a5' fill-opacity='.55'/%3E%3C/svg%3E") no-repeat 0 62%/100% .62em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .04em;}
.month{position:relative;display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:20px clamp(32px,5vw,80px);
  margin-top:clamp(48px,6vw,96px);align-items:center;}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:2px solid var(--plum);border-left:1px solid var(--line);
  background:var(--sheet);}
.cal__dow{font-size:13px;color:var(--ink-3);padding:8px 10px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
.cal__d{position:relative;display:flex;flex-direction:column;gap:1px;min-height:clamp(58px,6.4vw,96px);padding:8px 10px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px;line-height:1.2;
  transition:background-color .35s ease-out,color .35s ease-out;}
/* Le numéro du jour vient du CSS : la grille est décorative (aria-hidden),
   le résumé lisible est dans le paragraphe .sr juste avant. */
.cal__d i{font-style:normal;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-bottom:auto;}
.cal__d i::before{content:attr(data-d);}
.cal__d b{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:-.01em;}
.cal__d small{font-size:12.5px;}
.cal__d--off{background:var(--paper-2);}
.cal__d--call,.cal__d--plan,.cal__d--post{background:var(--terra);color:var(--plum);}
.cal__d--call i,.cal__d--plan i,.cal__d--post i{color:var(--plum);}
.month__hand{font-family:var(--hand);font-weight:700;font-size:clamp(32px,3.2vw,48px);line-height:1;color:var(--terra-d);transform:rotate(-5deg);}
.month__key{grid-column:1;display:flex;gap:12px;align-items:baseline;font-size:15px;color:var(--ink-2);}
.key{flex:none;width:14px;height:14px;background:var(--terra);transform:translateY(2px);}

.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px clamp(24px,3vw,48px);
  margin-top:clamp(64px,8vw,128px);padding-top:32px;border-top:2px solid var(--plum);}
.steps__n{display:block;font-family:var(--hand);font-weight:700;font-size:clamp(28px,2.4vw,34px);line-height:1;color:var(--terra-d);
  transform:rotate(-3deg);transform-origin:left;margin-bottom:14px;}
.steps h3{margin-bottom:8px;}
.steps p{font-size:16.5px;line-height:1.55;color:var(--ink-2);}

/* ── Tarif : le prix en grand, le détail sur un ticket ─────── */
.price{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px clamp(40px,6vw,120px);align-items:center;}
.price__n{font-family:var(--display);font-weight:800;font-size:clamp(128px,18vw,296px);line-height:.8;letter-spacing:-.045em;
  color:var(--terra-l);font-variation-settings:'opsz' 96;margin-top:clamp(28px,3vw,48px);white-space:nowrap;}
.price__per{font-size:clamp(20px,2vw,28px);color:var(--paper);margin-top:22px;}
.price__hand{font-family:var(--hand);font-weight:700;font-size:clamp(28px,2.4vw,36px);line-height:1;color:var(--terra-l);
  transform:rotate(-3deg);transform-origin:left;margin-top:14px;}
.price__txt{color:var(--on-plum-2);max-width:40ch;margin-top:26px;}
.price .cta{margin-top:30px;}
.price .lnk{color:var(--paper);}

.ticket{--z:14px;position:relative;justify-self:center;width:min(100%,420px);background:var(--sheet);color:var(--ink);
  padding:34px 30px calc(34px + var(--z));transform:rotate(2.6deg);font-size:15.5px;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2 * var(--z)) 100%;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2 * var(--z)) 100%;}
.ticket__head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:18px;
  border-bottom:1.5px dashed #b4afc3;font-size:13.5px;color:var(--ink-3);}
.ticket__head svg{height:22px;width:auto;color:var(--plum);}
.ticket__lines{list-style:none;padding:10px 0;}
.ticket__lines li{display:flex;align-items:baseline;gap:6px;padding:7px 0;}
.ticket__lines li span:first-child{flex:1;display:flex;align-items:baseline;gap:6px;}
.ticket__lines li span:first-child::after{content:"";flex:1;min-width:14px;border-bottom:1.5px dotted #b4afc3;transform:translateY(-.3em);}
.ticket__lines li span:last-child{font-weight:600;color:var(--plum);}
.ticket__total{display:flex;justify-content:space-between;align-items:baseline;padding-top:16px;border-top:1.5px dashed #b4afc3;
  font-family:var(--display);font-weight:800;font-size:27px;letter-spacing:-.02em;color:var(--plum);}
.ticket__foot{font-family:var(--hand);font-weight:700;font-size:30px;line-height:1;color:var(--terra-d);text-align:center;
  transform:rotate(-3deg);margin-top:20px;}

.notfor{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:28px clamp(32px,5vw,80px);
  margin-top:clamp(72px,9vw,140px);}
.notfor h3{font-size:clamp(24px,2.2vw,32px);font-weight:800;letter-spacing:-.025em;}
.notfor ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;}
.notfor li{padding-top:16px;border-top:2px solid var(--terra-l);font-size:16.5px;line-height:1.55;color:var(--on-plum);}

/* ── Qui je suis ───────────────────────────────────────────── */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px clamp(40px,7vw,140px);align-items:start;}
.about__side{position:sticky;top:40px;}
.about__fig{display:grid;gap:10px;max-width:30ch;margin-top:clamp(40px,5vw,72px);padding-top:20px;border-top:2px solid var(--plum);
  text-decoration:none;font-size:16px;line-height:1.45;color:var(--ink-2);}
.about__n{font-family:var(--display);font-weight:800;font-size:clamp(64px,7vw,112px);line-height:.85;letter-spacing:-.04em;
  color:var(--terra-d);font-variation-settings:'opsz' 96;}
.about__fig:hover span:last-child{color:var(--plum);text-decoration:underline;text-underline-offset:.2em;}
.about__txt{max-width:640px;}
.about__txt p + p{margin-top:1.1em;}
.sign{font-family:var(--hand);font-weight:700;font-size:68px;line-height:1;color:var(--terra-d);
  transform:rotate(-6deg);transform-origin:left center;margin-top:.7em!important;}

/* ── À lire ────────────────────────────────────────────────── */
.reads{margin-top:clamp(48px,6vw,88px);border-top:2px solid var(--plum);}
.read{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:10px clamp(32px,5vw,80px);
  align-items:baseline;padding:clamp(22px,2.4vw,34px) 0;border-bottom:1px solid var(--line);}
.read h3{font-size:clamp(23px,2.4vw,36px);font-weight:700;line-height:1.08;letter-spacing:-.03em;}
.read h3 a{text-decoration:none;transition:color .15s;}
.read h3 a::after{content:"";position:absolute;inset:0;}
.read:hover h3 a{color:var(--terra-d);}
.read p{font-size:16px;color:var(--ink-2);}

/* ── Questions ─────────────────────────────────────────────── */
.faq{margin-top:clamp(36px,4vw,56px);border-top:2px solid var(--plum);max-width:880px;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none;cursor:pointer;padding:22px 36px 22px 0;position:relative;
  font-size:clamp(18px,1.8vw,22px);font-weight:700;line-height:1.25;letter-spacing:-.015em;color:var(--plum);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:4px;top:20px;color:var(--terra-d);font-size:24px;font-weight:400;
  transition:transform .25s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq summary:hover{color:var(--terra-d);}
.faq p{padding:0 36px 24px 0;font-size:16px;line-height:1.65;color:var(--ink-2);max-width:68ch;}

/* ── Contact ───────────────────────────────────────────────── */
.contact__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px clamp(40px,6vw,110px);align-items:start;}
.contact .h2{font-size:clamp(42px,5.4vw,88px);}
.contact .lead{max-width:36ch;margin-top:32px;}
.contact .cta{margin-top:36px;}
.contact__form h3{font-size:24px;}
.contact__form > .fine{margin-top:6px;}
.form{display:grid;gap:16px;margin-top:22px;}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.fw{display:grid;gap:6px;}
.fw label{font-size:14px;font-weight:500;}
.field{width:100%;font-size:16px;padding:13px 14px;border:1.5px solid transparent;border-radius:10px;background:var(--sheet);color:var(--ink);}
.field::placeholder{color:#8f8aa2;}
.field:focus{outline:none;border-color:var(--plum);}
textarea.field{resize:vertical;}
.form .fine{margin-top:0;}
.fmsg{font-size:15px;padding:12px 14px;border-radius:10px;background:var(--sheet);color:var(--ink);}
.fmsg.ko{background:#fbe7dd;}

/* ── Pied de page ──────────────────────────────────────────── */
.foot{background:var(--plum);color:var(--on-plum-2);padding:clamp(64px,7vw,104px) 0 32px;font-size:15px;}
/* Le P.S. de la lettre : dernier trait du stylo. */
.foot__ps{font-family:var(--hand);font-weight:700;font-size:clamp(28px,2.7vw,38px);line-height:1.2;color:var(--terra-l);
  margin-bottom:clamp(56px,7vw,96px);transform:rotate(-1.5deg);transform-origin:left center;}
.foot__ps a{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.16em;}
.foot__ps a:hover{color:var(--paper);}
.foot__in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:36px;}
.foot__logo{display:inline-block;color:var(--terra-l);}
.foot__logo svg{display:block;width:112px;height:auto;}
.foot__id p{margin-top:14px;max-width:24ch;}
.foot h4{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--paper);margin-bottom:14px;letter-spacing:0;}
.foot ul{list-style:none;}
.foot li + li{margin-top:8px;}
.foot ul a,.foot__legal a{text-decoration:none;}
.foot ul a:hover,.foot__legal a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:.25em;}
.foot__bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:clamp(48px,6vw,72px);padding-top:20px;
  border-top:1px solid rgba(255,255,255,.14);font-size:14px;}
.foot__legal{display:flex;flex-wrap:wrap;gap:20px;}

/* ── Barre d'appel mobile et message du bouton DM ─────────── */
.cta-bar{display:none;}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));z-index:80;max-width:calc(100% - 32px);
  font-size:15px;background:var(--ink);color:#fff;padding:12px 16px;border-radius:10px;
  opacity:0;transform:translate(-50%,12px);transition:opacity .2s,transform .2s;pointer-events:none;}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* ══ Animations déclenchées à l'arrivée dans l'écran ═════════
   html.js est posé dans le <head> ; accueil.js ajoute .is-in une fois. */
.js [data-anim] .x{background-size:0% .7em;transition:background-size .5s var(--pen) var(--d,0s);}
.js [data-anim] .ed{clip-path:inset(-.4em 100% -.4em -.4em);transition:clip-path .6s cubic-bezier(.5,0,.3,1) calc(var(--d,0s) + .45s);}
.js [data-anim] .sheet__verdict{clip-path:inset(-.4em 100% -.4em -.4em);transition:clip-path .7s cubic-bezier(.5,0,.3,1) 2s;}
.js [data-anim] .ab__arrow path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--pen) 2.5s;}
.js [data-anim] .ab__arrow path + path{transition-delay:3s;transition-duration:.25s;}
.js [data-anim] .ab__arrow > span{opacity:0;transition:opacity .4s ease 2.7s;}
.js [data-anim] .sheet--post{opacity:0;transform:translateY(36px) rotate(2.4deg);
  transition:opacity .6s ease-out 2.8s,transform .8s var(--ease) 2.8s;}
.js [data-anim] .circ path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--pen) 3.6s;}
.js .is-in .x{background-size:100% .7em;}
.js .is-in .ed,.js .is-in .sheet__verdict{clip-path:inset(-.4em -.6em -.4em -.4em);}
.js .is-in .ab__arrow path,.js .is-in .circ path{stroke-dashoffset:0;}
.js .is-in .ab__arrow > span{opacity:1;}
.js .is-in .sheet--post{opacity:1;transform:rotate(1.1deg);}

/* Chiffres : ils montent de leur ligne, l'un après l'autre */
.js .stats[data-anim] li{clip-path:inset(0 0 100% 0);}
.js .stats[data-anim] .stats__n{display:inline-block;transform:translateY(40%);transition:transform .9s var(--ease);}
.js .stats[data-anim] li{transition:clip-path .9s var(--ease);}
.js .stats[data-anim] li:nth-child(2),.js .stats[data-anim] li:nth-child(2) .stats__n{transition-delay:.15s;}
.js .stats[data-anim] li:nth-child(3),.js .stats[data-anim] li:nth-child(3) .stats__n{transition-delay:.3s;}
.js .stats.is-in li{clip-path:inset(0 0 -10% 0);}
.js .stats.is-in .stats__n{transform:none;}

/* Agenda : vos créneaux se remplissent dans l'ordre du mois */
.js .month[data-anim] .cal__d--call,.js .month[data-anim] .cal__d--plan,.js .month[data-anim] .cal__d--post{background:transparent;color:inherit;}
.js .month.is-in .cal__d--call,.js .month.is-in .cal__d--plan,.js .month.is-in .cal__d--post{background:var(--terra);color:var(--plum);
  transition-delay:calc(var(--i, 0) * 90ms + .2s);}
.js .month[data-anim] .month__hand{clip-path:inset(-.4em 100% -.4em -.4em);transition:clip-path .8s cubic-bezier(.5,0,.3,1) 1.3s;}
.js .month.is-in .month__hand{clip-path:inset(-.4em -.4em -.4em -.4em);}

/* Ticket : il sort de l'imprimante */
.js .price[data-anim] .ticket{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s steps(18,end) .3s;}
.js .price.is-in .ticket{clip-path:inset(0 0 0 0);}

/* ══ Le stylo (pen.js) ═════════════════════════════════════
   html.pen : le stylo va écrire les annotations, on les cache jusqu'à ce
   qu'il soit prêt (html.pen-ready), puis c'est lui qui les découvre trait
   par trait. Les animations CSS ci-dessus sont alors coupées pour ces
   éléments. S'il ne démarre pas, la classe pen est retirée et tout revient. */
.pen-tool{position:fixed;left:0;top:0;z-index:25;pointer-events:none;will-change:transform;}
.pen-tool svg{display:block;width:170px;height:170px;overflow:visible;}
.pen-tool__shadow{transition:transform .25s ease-out,opacity .25s ease-out;}
.pen-tool.is-lifted .pen-tool__shadow{transform:translate(7px,9px);opacity:.7;}
.pen-tool.is-idle svg{animation:pen-bob 3.2s ease-in-out infinite;}
@keyframes pen-bob{50%{transform:translate(-2px,-6px) rotate(-1.5deg);}}
.pen-mk{position:absolute;width:0;height:0;pointer-events:none;}
svg.ink{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:1;}
.ink-measure *{transform:none!important;transition:none!important;}

.pen:not(.pen-ready) :is(.hero__note,.ed,.sheet__verdict,.ab__arrow,.stats__hand,.month__hand,.steps__n,.price__hand,.ticket__foot,.sign,.foot__ps){opacity:0;}
.pen .ln{position:relative;}
.pen .gw__ghost{animation:none;}
.pen .gw__ghost.is-struck{color:rgba(246,244,240,.26);transition:color .7s ease;}
.pen .gw__strike path,.pen .gw__line path{animation:none;}
.pen .gw__ghost::after{animation:none;clip-path:inset(-.3em calc((1 - var(--p, 0)) * 110% - .3em) -.3em -.3em);}
.gw__hbox{position:absolute;left:50%;bottom:1.3em;font-family:var(--hand);font-weight:700;font-style:normal;font-size:.66em;
  line-height:1;letter-spacing:0;white-space:nowrap;visibility:hidden;pointer-events:none;transform:translateX(-50%) rotate(-7deg);}
.gw__hbox::after{content:attr(data-human);}
.pen .x{background:none!important;}
.pen [data-anim] :is(.ed,.sheet__verdict),.pen .month[data-anim] .month__hand{clip-path:none!important;transition:none!important;}
.pen [data-anim] .ab__arrow > span{opacity:1!important;transition:none!important;}
.pen [data-anim] .ab__arrow path,.pen [data-anim] .circ path{transition:none!important;}
.pen [data-anim] .sheet--post{transition-delay:0s!important;}
.pen .ab:not(.post-in) .sheet--post{opacity:0!important;transform:translateY(36px) rotate(2.4deg)!important;}
.pen .hl{background:none!important;}
.pen .hl .ln{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M3 10C50 5 140 8 197 4L195 36C130 33 60 38 5 35Z' fill='%236ea8a5' fill-opacity='.55'/%3E%3C/svg%3E") no-repeat 0 62%/0% .62em;}
@media(max-width:620px){.pen-tool svg{width:124px;height:124px;}}
@media print{.pen-tool{display:none;}}

/* ── Tablette ──────────────────────────────────────────────── */
@media(max-width:1100px){
  .top__nav{gap:20px;}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .notfor{grid-template-columns:1fr;}
}
@media(max-width:900px){
  :root{--top:64px;}
  .top__nav,.top__cta{display:none;}
  .burger{display:block;}
  .hero__in{grid-template-columns:1fr;min-height:0;}
  .hero__txt{padding-bottom:12px;}
  .hero__h1{margin-top:clamp(40px,9vw,64px);font-size:clamp(44px,15vw,120px);}
  .hero__pic{justify-self:end;width:min(84%,440px);margin-top:8px;}
  .hero__note{left:-26%;top:14%;}
  .head,.month,.price,.about,.contact__in,.read{grid-template-columns:1fr;}
  .about__side{position:static;}
  .ab{display:block;}
  .sheet--draft{transform:rotate(-1deg);padding-right:clamp(92px,26vw,118px);font-size:14.5px;line-height:2;}
  .sheet--draft::after{right:clamp(80px,23vw,104px);}
  .ed{width:clamp(66px,19vw,88px);right:10px;font-size:17px;}
  .sheet--post{margin:120px 0 0 4%;}
  .js [data-anim] .sheet--post{transform:translateY(36px) rotate(1.6deg);}
  .js .is-in .sheet--post,.sheet--post{transform:rotate(.8deg);}
  .ab__arrow{position:relative;left:auto;top:auto;display:block;width:170px;margin:4px 0 -110px auto;}
  .ab__arrow svg{width:96px;margin-left:36px;transform:rotate(35deg);}
  .stats{grid-template-columns:1fr;}
  .stats li,.stats li:first-child{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:end;padding:18px 0 22px;}
  .stats__n{font-size:clamp(72px,22vw,120px);}
  .stats p{margin-top:0;font-size:16px;}
  .stats li + li{border-left:0;border-top:2px solid var(--plum);}
  .quotes{grid-template-columns:1fr;}
  .quote:nth-child(2){margin-top:0;}
  .month__hand{text-align:right;}
  .ticket{justify-self:start;}
  .foot__in{grid-template-columns:1fr 1fr;}
  .foot__id{grid-column:1/-1;}
}
@media(max-width:620px){
  body{font-size:17.5px;}
  .band__lbl{padding-left:calc(6vw + 16px);padding-right:16px;font-size:22px;}
  .band__vp{padding:14px 0;}
  .band__list{gap:36px;padding-right:36px;}
  .cal__dow{padding:6px 4px;font-size:11px;text-align:center;}
  .cal__d{min-height:50px;padding:5px 4px;font-size:11px;align-items:center;text-align:center;}
  .cal__d b{font-size:10.5px;letter-spacing:0;}
  .cal__d small{display:none;}
  .steps{grid-template-columns:1fr;}
  .notfor ul{grid-template-columns:1fr;}
  .f2{grid-template-columns:1fr;}
  .foot__in{gap:32px 20px;}
  .cta-bar{display:flex;align-items:center;gap:14px;position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line);
    transform:translateY(100%);transition:transform .25s;}
  .cta-bar.show{transform:none;}
  .cta-bar .btn{flex:1;padding:14px 18px;}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom));}
  .foot{padding-bottom:104px;}
}

/* Sans animation : tout est tout de suite à l'état final. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .gw__ghost{color:rgba(246,244,240,.26);}
  .gw__strike path,.gw__line path,.js [data-anim] .ab__arrow path,.js [data-anim] .circ path{stroke-dashoffset:0;}
  .gw__ghost::after,.js [data-anim] .ed,.js [data-anim] .sheet__verdict,.js .month[data-anim] .month__hand,
  .js .stats[data-anim] li,.js .price[data-anim] .ticket{clip-path:none;}
  .js [data-anim] .x{background-size:100% .7em;}
  .js [data-anim] .ab__arrow > span,.js [data-anim] .sheet--post{opacity:1;}
  .js [data-anim] .sheet--post{transform:rotate(1.1deg);}
  .js .stats[data-anim] .stats__n{transform:none;}
  .js .month[data-anim] .cal__d--call,.js .month[data-anim] .cal__d--plan,.js .month[data-anim] .cal__d--post{background:var(--terra);color:var(--plum);}
  .band__track{width:auto;flex-wrap:wrap;}
  .band__pause{display:none;}
  .band{cursor:auto;}
  .band__list[aria-hidden="true"]{display:none;}
  .band__list{flex-wrap:wrap;row-gap:12px;padding:0 var(--pad);}
}