/* ==========================================================================
   Page « Un exemple complet » (exemple-cuisiniste.html) : un cas réel raconté
   en quatre écrans.
   01 ce qui a été redessiné, dans l'ordre (cinq étapes reliées par un fil)
   02 l'identité : le mot-symbole se construit (tracés, points, poignées) puis
      s'encre ; la palette et les typographies ; le même dessin sur l'enseigne,
      les véhicules et le web (dessins au trait, l'image du logo n'est jamais
      modifiée)
   03 le site : quatre repères relient la page d'accueil à l'identité
   04 la même main.
   État final = état normal. Les animations ne jouent qu'avec html.js, hors
   ?calage et hors animations réduites, et démarrent à l'apparition (.is-in).
   Mesures en --m comme le reste du site, avec planchers de lisibilité.
   ========================================================================== */
body[data-page="exemple-cuisiniste"]{
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --e-pop:cubic-bezier(.34,1.4,.64,1);
  --or:#EA6E1E;
}
.xc-steps-blk,.xc-id-blk,.xc-site-blk{padding-top:0}

/* ---------- 01 · CINQ ÉTAPES RELIÉES ---------------------------------------------- */
.xc-steps{--node:max(calc(var(--mins) * 88px),calc(56 * var(--m)));position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 12px;margin-top:max(calc(var(--mins) * 10px),calc(6 * var(--m)));padding-top:max(calc(var(--mins) * 10px),calc(6 * var(--m)))}
.xc-steps::before,.xc-steps::after{content:"";position:absolute;left:10%;right:10%;top:calc(max(calc(var(--mins) * 10px),calc(6 * var(--m))) + var(--node) / 2);height:1px;background:var(--line-2)}
.xc-steps::after{background:linear-gradient(90deg,rgba(246,43,62,.35),var(--red));box-shadow:0 0 10px rgba(246,43,62,.6);transform-origin:left center}
.xc-steps li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.xc-steps__node{display:grid;place-items:center;width:var(--node);height:var(--node);border:1px solid rgba(246,43,62,.7);background:#0b0b0c;box-shadow:0 0 0 6px var(--bg),0 0 26px -6px rgba(246,43,62,.6);color:var(--red)}
.xc-steps__node .ico{--ico-size:calc(var(--node) * .72)}
.xc-steps small{margin-top:max(calc(var(--mins) * 16px),calc(10 * var(--m)));font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.12em;color:var(--red)}
.xc-steps b{margin-top:6px;font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 19px),calc(12.5 * var(--m)));line-height:1;text-transform:uppercase;letter-spacing:.005em;color:var(--ink)}

/* ---------- 02 · LE MOT-SYMBOLE SE CONSTRUIT ---------------------------------------- */
.xc-id{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:max(calc(var(--mins) * 28px),calc(24 * var(--m)));align-items:stretch}
.xc-logo{display:flex;flex-direction:column;min-width:0}
.xc-logo__tile{position:relative;flex:1 1 auto;display:grid;place-items:center;min-height:max(calc(var(--mins) * 300px),calc(210 * var(--m)));padding:14% 13% 12%;background:#26272C;border:1px solid rgba(255,255,255,.1);overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.9),0 0 70px -34px rgba(234,110,30,.55)}
.xc-logo__tile::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:24px 24px;background-position:center;pointer-events:none}
.xc-logo__art{position:relative;width:100%}
.xc-logo__ghost{display:block;width:100%;height:auto;opacity:.1}
.xc-logo__ink{position:absolute;inset:0;width:100%;height:auto;clip-path:inset(0 0 0 0)}
.xc-logo__scan{position:absolute;top:-10%;bottom:-10%;left:100%;width:2px;opacity:0;background:#ffb08a;box-shadow:0 0 14px 2px rgba(234,110,30,.85);pointer-events:none}
.xc-logo__cons{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:.5;transition:opacity .6s var(--ease);pointer-events:none}
.xc-logo__cons .d{fill:none;stroke:rgba(245,243,238,.7);stroke-width:1.3;stroke-dasharray:1;stroke-dashoffset:0}
.xc-logo__cons .d--soft{stroke:rgba(245,243,238,.3)}
.xc-logo__cons .d--red{stroke:var(--red);stroke-width:1.6}
.xc-h path{stroke:var(--red);stroke-width:1.3;fill:none;transform-box:fill-box;transform-origin:center}
.xc-p{opacity:0;transition:opacity .5s var(--ease)}
.xc-p rect{fill:#26272C;stroke:#f5f3ee;stroke-width:1.4;transform-box:fill-box;transform-origin:center}
.xc-p--end circle{fill:var(--red);transform-box:fill-box;transform-origin:center}
.xc-h{opacity:0;transition:opacity .5s var(--ease)}
.xc-logo:hover .xc-logo__cons{opacity:1}
.xc-logo:hover .xc-p,.xc-logo:hover .xc-h{opacity:1}
/* la légende raconte la construction : police des titres, lisible */
.xc-logo__legend{position:absolute;left:5%;top:6%;display:flex;align-items:center;flex-wrap:wrap;gap:4px 0;font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 15px),calc(9.6 * var(--m)));line-height:1;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.xc-logo__legend li{display:flex;align-items:center;gap:.7em}
.xc-logo__legend li::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--or);box-shadow:0 0 8px rgba(234,110,30,.7)}
.xc-logo__legend li:not(:last-child)::after{content:"";width:1.8em;height:1px;margin:0 .8em 0 .1em;background:rgba(255,255,255,.2)}
.xc-logo .cap{margin-top:12px}
/* la construction rejoue (xp-scenes.js, data-xp-loop) : fondu, retour à zéro, nouvelle lecture */
.xc-logo :is(.xc-logo__art,.xc-logo__legend){transition:opacity .5s var(--ease)}
.xc-logo.is-out :is(.xc-logo__art,.xc-logo__legend){opacity:0}
.xc-logo.is-replay *,.xc-logo.is-replay *::before,.xc-logo.is-replay *::after{animation:none!important}

.xc-id__side{min-width:0}
.xc-id__block + .xc-id__block{margin-top:max(calc(var(--mins) * 28px),calc(20 * var(--m)))}
.xc-id__h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;margin-bottom:max(calc(var(--mins) * 12px),calc(8 * var(--m)));font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.xc-id__h small{font-size:inherit;letter-spacing:.14em;color:var(--ink-3)}
.xc-swatches .swatch{aspect-ratio:1/1.2;padding:max(calc(var(--mins) * 10px),calc(8 * var(--m)));transform-origin:top center}
.xc-swatches .swatch span{margin-top:3px;line-height:1.3}
.xtype{margin:0;border-top:1px solid var(--line-2)}
.xtype__row{display:grid;grid-template-columns:max(calc(var(--mins) * 90px),calc(64 * var(--m))) minmax(0,1fr);align-items:baseline;gap:14px;padding:max(calc(var(--mins) * 14px),calc(10 * var(--m))) 0;border-bottom:1px solid var(--line-2)}
.xtype dt{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.xtype dd{margin:0;font-family:var(--f-text);font-weight:600;font-size:max(calc(var(--mins) * 26px),calc(18 * var(--m)));line-height:1;letter-spacing:-.02em;color:var(--ink)}
.xtype__row:first-child dd::after{content:"";display:inline-block;width:.32em;height:.32em;margin-left:.18em;background:var(--or);vertical-align:.08em}

/* le même dessin sur trois supports (dessins au trait) */
.xc-sup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:max(calc(var(--mins) * 18px),calc(14 * var(--m)));margin-top:max(calc(var(--mins) * 34px),calc(24 * var(--m)))}
.xc-sup__item{min-width:0}
.xc-sup__art{display:block;width:100%;height:auto;aspect-ratio:3/2;border:1px solid var(--line-2);background:radial-gradient(70% 70% at 50% 60%,rgba(234,110,30,.08),transparent 70%),#0a0a0b}
.xc-sup__art .d{fill:none;stroke:rgba(245,243,238,.55);stroke-width:1.2;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.xc-sup__art .d--soft{stroke:rgba(245,243,238,.25)}
.xc-sup__art .xc-sup__fill{fill:#26272C}
.xc-sup__art .xc-sup__wheel{fill:#0a0a0b}
.xc-sup__art .xc-sup__phone{fill:#000}
.xc-sup__logo,.xc-sup__shot{transform-box:fill-box;transform-origin:center}
.xc-sup__cap{display:flex;align-items:center;gap:10px;margin-top:12px;font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 16px),calc(10 * var(--m)));line-height:1;letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.xc-sup__cap::before{content:"";width:6px;height:6px;background:var(--or);flex:none}

/* ---------- 03 · LE SITE ANNOTÉ ----------------------------------------------------- */
.xc-anno{--bar:29px;--fw:64cqw;position:relative;container-type:inline-size;display:grid;grid-template-columns:21% 64% 15%;align-items:start}
.xc-anno__keys{grid-column:1;align-self:stretch}
.xc-anno__keys li{position:absolute;z-index:3;left:0;top:calc(var(--bar) + var(--yf) * (var(--fw) - 2px) / 1.599);width:calc(21cqw - 16px);transform:translateY(-50%);display:flex;align-items:center;justify-content:flex-end;gap:10px;text-align:right;font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.14em;line-height:1.4;text-transform:uppercase;color:var(--ink)}
.xc-anno__keys li span{color:var(--red)}
.xc-anno__keys li::after{content:"";position:absolute;left:calc(100% + 6px);top:50%;width:calc(10px + var(--xf) * (var(--fw) - 2px) - 14px);height:1px;background:linear-gradient(90deg,rgba(246,43,62,.4),var(--red));box-shadow:0 0 8px rgba(246,43,62,.7);transform-origin:left center;pointer-events:none}
.xc-anno__frame{grid-column:2}
.xc-anno__view{position:relative}
.xc-anno__view img{display:block;width:100%;height:auto}
.xc-mk{position:absolute;left:calc(var(--x1) * 100% - 5px);top:calc(var(--y1) * 100% - 4px);width:calc((var(--x2) - var(--x1)) * 100% + 10px);height:calc((var(--y2) - var(--y1)) * 100% + 8px);pointer-events:none}
.xc-mk::after{content:"";position:absolute;inset:0;border:1.5px solid var(--red);border-radius:3px;box-shadow:0 0 14px rgba(246,43,62,.55),inset 0 0 12px rgba(246,43,62,.25)}
.xc-mk::before{content:attr(data-n);position:absolute;z-index:1;left:-9px;top:50%;display:grid;place-items:center;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--red);font-family:var(--f-mono);font-weight:500;font-size:10px;line-height:1;color:#fff;box-shadow:0 0 12px rgba(246,43,62,.8)}
.xc-anno__phone{grid-column:3;margin:calc(var(--fw) * .2) 0 0 -18%;position:relative;z-index:2}
.xc-anno__phone .phone{padding-top:0}   /* écran plein : la capture monte sous l'encoche (10/10) */
.xc-anno__phone .phone::before{--cam-top:4px;--cam:5px}
.xc-pages__lead{margin-top:max(calc(var(--mins) * 56px),calc(38 * var(--m)));font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.xc-pages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:max(calc(var(--mins) * 18px),calc(14 * var(--m)));margin-top:max(calc(var(--mins) * 16px),calc(11 * var(--m)))}
.xc-pages figure{min-width:0}
.xc-pages .frame img{transition:transform .9s var(--e-out)}
.xc-pages figure:hover .frame img{transform:scale(1.03)}

/* ---------- 04 · LA MÊME MAIN ------------------------------------------------------- */
/* la phrase finale est un h2 (liste des titres) : même dessin que .bigline p */
.bigline .xend__line{margin-top:max(calc(var(--mins) * 20px),calc(14 * var(--m)));font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 34px),calc(34 * var(--m)));line-height:.92;text-transform:uppercase;letter-spacing:-.005em;-webkit-text-stroke:.01em currentColor;max-width:calc(760 * var(--m));color:var(--ink)}
.bigline .xend__line .red{color:var(--red)}
.bigline .xend__line .out{color:transparent;-webkit-text-stroke:max(1px,calc(1 * var(--m))) var(--ink)}
.bigline .mailbar{margin-top:max(calc(var(--mins) * 22px),calc(14 * var(--m)))}
.bigline .mailbar .more{margin-top:0}

/* ---------- ANIMATIONS ---------------------------------------------------------------- */
@keyframes xcDraw{from{stroke-dashoffset:1}}
@keyframes xcDrawFill{0%{stroke-dashoffset:1;fill-opacity:0}65%{fill-opacity:0}100%{stroke-dashoffset:0;fill-opacity:1}}
@keyframes xcFade{from{opacity:0}}
@keyframes xcGrow{from{scale:0 1}}
@keyframes xcGrowY{from{scale:1 0}}
@keyframes xcPop{from{opacity:0;scale:0}}
@keyframes xcNode{0%{opacity:0;scale:.6}60%{opacity:1}}
@keyframes xcLit{from{border-color:var(--line-2);box-shadow:0 0 0 6px var(--bg);color:var(--ink-4)}}
@keyframes xcWipe{from{clip-path:inset(0 100% 0 0)}}
@keyframes xcScan{0%{left:0;opacity:0}5%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
@keyframes xcDim{from{opacity:1}}
@keyframes xcPts{0%{opacity:0}12%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes xcLegend{from{color:rgba(245,243,238,.5)}}
@keyframes xcLegendDot{from{background:rgba(255,255,255,.2);box-shadow:none}}
@keyframes xcDrop{from{opacity:0;translate:0 -16px}}
@keyframes xcStamp{from{opacity:0;scale:1.35}}
@keyframes xcBox{from{clip-path:inset(0 100% 0 0)}}
@keyframes xcKey{from{opacity:0;translate:-10px 0}}

@media (prefers-reduced-motion:no-preference){
  /* 01 — le fil passe, chaque étape s'allume à son tour */
  html.js:not(.calage) .xc-steps:not(.is-in),html.js:not(.calage) .xc-steps:not(.is-in) *,html.js:not(.calage) .xc-steps:not(.is-in)::after{animation-play-state:paused!important}
  html.js:not(.calage) .xc-steps::after{animation:xcGrow 2.2s var(--e-io) .2s backwards}
  html.js:not(.calage) .xc-steps__node{animation:xcNode .7s var(--e-pop) calc(.15s + var(--k) * .45s) backwards,xcLit .5s var(--ease) calc(.35s + var(--k) * .45s) backwards}
  html.js:not(.calage) .xc-steps small,html.js:not(.calage) .xc-steps b{animation:xcFade .7s var(--ease) calc(.3s + var(--k) * .45s) backwards}

  /* 02 — croquis, tracés, points et poignées, puis l'encre */
  html.js:not(.calage) .xc-logo:not(.is-in) *,html.js:not(.calage) .xc-logo:not(.is-in) *::before,html.js:not(.calage) .xc-logo:not(.is-in) *::after{animation-play-state:paused!important}
  html.js:not(.calage) .xc-logo__cons .d{animation:xcDraw 1.1s var(--e-io) var(--dl,.2s) backwards}
  html.js:not(.calage) .xc-logo__cons{animation:xcDim .9s var(--ease) 3.1s backwards}
  html.js:not(.calage) .xc-p{animation:xcPts 2.1s linear var(--dl) backwards}
  html.js:not(.calage) .xc-p rect,html.js:not(.calage) .xc-p circle{animation:xcPop .45s var(--e-pop) var(--dl) backwards}
  html.js:not(.calage) .xc-h{animation:xcPts 1.9s linear var(--dl) backwards}
  html.js:not(.calage) .xc-h .hx{animation:xcGrow .5s var(--e-out) var(--dl) backwards}
  html.js:not(.calage) .xc-h .hy{animation:xcGrowY .5s var(--e-out) var(--dl) backwards}
  html.js:not(.calage) .xc-logo__ink{animation:xcWipe 1.2s var(--e-io) 2.15s backwards}
  html.js:not(.calage) .xc-logo__scan{animation:xcScan 1.2s var(--e-io) 2.15s backwards}
  html.js:not(.calage) .xc-logo__legend li{animation:xcLegend .5s var(--ease) var(--dl) backwards}
  html.js:not(.calage) .xc-logo__legend li::before{animation:xcLegendDot .5s var(--ease) var(--dl) backwards}

  html.js:not(.calage) .xc-id__block:not(.is-in) .swatch,html.js:not(.calage) .xc-id__block:not(.is-in) dd::after{animation-play-state:paused}
  html.js:not(.calage) .xc-swatches .swatch{animation:xcDrop .7s var(--e-out) calc(.35s + var(--k) * 110ms) backwards}
  html.js:not(.calage) .xtype__row:first-child dd::after{animation:xcPop .5s var(--e-pop) .8s backwards}

  html.js:not(.calage) .xc-sup__item:not(.is-in) *{animation-play-state:paused!important}
  html.js:not(.calage) .xc-sup__art .d{animation:xcDraw 1.1s var(--e-io) calc(.1s + var(--k) * .3s) backwards}
  html.js:not(.calage) .xc-sup__art .xc-sup__fill,html.js:not(.calage) .xc-sup__art .xc-sup__wheel,html.js:not(.calage) .xc-sup__art .xc-sup__phone{animation-name:xcDrawFill;animation-duration:1.5s}
  html.js:not(.calage) .xc-sup__logo{animation:xcStamp .7s var(--e-out) calc(1.15s + var(--k) * .3s) backwards}
  html.js:not(.calage) .xc-sup__shot{animation:xcFade .9s var(--ease) calc(1s + var(--k) * .3s) backwards}

  /* 03 — les repères désignent la page, un par un */
  html.js:not(.calage) .xc-anno:not(.is-in) *,html.js:not(.calage) .xc-anno:not(.is-in) *::before,html.js:not(.calage) .xc-anno:not(.is-in) *::after{animation-play-state:paused!important}
  html.js:not(.calage) .xc-anno__keys li{animation:xcKey .6s var(--e-out) calc(.5s + var(--k) * .45s) backwards}
  html.js:not(.calage) .xc-anno__keys li::after{animation:xcGrow .7s var(--e-io) calc(.75s + var(--k) * .45s) backwards}
  html.js:not(.calage) .xc-mk::after{animation:xcBox .7s var(--e-io) calc(1.25s + var(--k) * .45s) backwards}
  html.js:not(.calage) .xc-mk::before{animation:xcPop .45s var(--e-pop) calc(1.15s + var(--k) * .45s) backwards}
}

/* ==========================================================================
   Tablette et mobile
   ========================================================================== */
@media (max-width:1023px){
  .xc-id{grid-template-columns:1fr}
  .xc-logo__tile{min-height:260px}
  .xc-anno{grid-template-columns:minmax(0,1fr) 24%;gap:0 16px}
  .xc-anno__frame{grid-column:1;grid-row:1}
  .xc-anno__phone{grid-column:2;grid-row:1;margin:12% 0 0}
  .xc-anno__keys{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin-top:26px}
  .xc-anno__keys li{position:static;transform:none;width:auto;justify-content:flex-start;text-align:left}
  .xc-anno__keys li span{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--red);font-size:10px;letter-spacing:0;color:#fff}
  .xc-anno__keys li::after{display:none}
  .bigline .xend__line{font-size:clamp(32px,8vw,56px)}
}
@media (max-width:640px){
  .xc-steps{--node:72px;grid-template-columns:1fr;gap:18px;padding-top:0}
  .xc-steps::before,.xc-steps::after{left:36px;right:auto;top:36px;bottom:36px;width:1px;height:auto}
  .xc-steps::after{transform-origin:center top;background:linear-gradient(180deg,rgba(246,43,62,.35),var(--red))}
  .xc-steps li{display:grid;grid-template-columns:72px auto minmax(0,1fr);align-items:center;column-gap:16px;text-align:left}
  .xc-steps small{margin-top:0}
  .xc-steps b{margin-top:0;font-size:20px}
  .xc-logo__tile{min-height:0;padding:22% 9% 14%}
  .xc-logo__cons .d{stroke-width:2.6}
  .xc-logo__cons .d--red{stroke-width:3}
  .xc-h path{stroke-width:2.6}
  .xc-p rect{stroke-width:2.4}
  .xc-logo__legend{top:6%;font-size:13px}
  .xc-swatches .swatch{aspect-ratio:5/3}
  .xc-sup{grid-template-columns:1fr;gap:22px}
  .xc-anno{grid-template-columns:minmax(0,1fr) 27%;gap:0 12px}
  .xc-anno__phone .cap{display:none}
  .xc-anno__phone .phone{border-width:4px;border-radius:16px;padding-top:0}
  .xc-anno__phone .phone::before{--cam-top:2px;--cam:3px}
  .xc-anno__keys{grid-template-columns:1fr}
  .xc-pages{grid-template-columns:1fr;gap:26px}
  .bigline .mailbar{flex-direction:column;align-items:flex-start;gap:14px}
  .bigline .xend__line{font-size:clamp(26px,7.4vw,40px)}
}
@media (max-width:640px) and (prefers-reduced-motion:no-preference){
  html.js:not(.calage) .xc-steps::after{animation-name:xcGrowY}
}