/* ==========================================================================
   SITES INTERNET : compléments propres à la page (le reste vient de pages.css).
   Mesures en --m, comme partout.
   Les visuels [data-story] sont dessinés en entier dans le HTML : sans
   JavaScript, dans l'éditeur, en ?calage ou en animations réduites, on voit
   leur état final, immobile. stories.js pose .story-armed (états de départ),
   .story-on (l'arrivée joue) et .story-live (à l'écran).
   ========================================================================== */
body[data-page="sites-web"]{
  --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);
  --yl:#FFD60A;
}
.blk--next{padding-top:0}

/* ---------- téléphones : une barre d'état sous l'encoche ---------------------- */
/* Les captures mobiles commencent au ras du haut de l'écran : sans cette bande,
   l'encoche dessinée en CSS mange le logo et les icônes d'en-tête des sites. */
.phone img{padding-top:0;background:#000}   /* écran plein : la capture monte sous l'encoche (Yann, 10/10) */

/* ---------- onglets du back-office : un rond, une icône d'au moins 48 px ------ */
.bo__ico{grid-row:1 / 3;display:grid;place-items:center;width:max(calc(var(--mins) * 64px),calc(44 * var(--m)));height:max(calc(var(--mins) * 64px),calc(44 * var(--m)));border-radius:50%;
  border:1px solid rgba(246,43,62,.75);background:radial-gradient(circle at 50% 38%,rgba(246,43,62,.24),#0b0b0c 72%),#0b0b0c;box-shadow:0 0 22px -6px var(--red-glow);color:var(--ink);
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease),color .45s var(--ease),background-color .45s var(--ease)}
.bo__ico .ico{width:78%;height:78%;transition:opacity .45s var(--ease)}
.bo__tab:not(.is-on):not(:hover) .bo__ico .ico{opacity:.5}

/* ==========================================================================
   EN-TÊTE · UN SITE QUI SE MONTE SOUS VOS YEUX (à la place de la photo)
   maquette (.s1) → code (.s2) → téléphone (.s3) → en ligne (.s4), posées par
   stories.js ; le ruban du dessous suit l'étape en cours (.is-now), puis la
   scène s'efface et tout recommence (data-loop). Sans JavaScript, dans
   l'éditeur, en ?calage ou en animations réduites : le site fini, immobile.
   Ordinateur (1180 px et plus) : colonne de droite de l'en-tête ; la scène
   prend la plus grande taille qui tient dans la place libre (unités cq).
   ========================================================================== */
.phero__show{position:relative;z-index:2;max-width:760px;margin:max(calc(var(--mins) * 30px),calc(24 * var(--m))) calc(52 * var(--m)) 0 calc(152 * var(--m))}
@media (min-width:1180px){
  .phero__show{position:absolute;max-width:none;margin:0;display:flex;align-items:center;justify-content:center;container-type:size;
    top:calc(var(--hdr) + 22 * var(--m) + max(calc(var(--mins) * 70px),calc(52 * var(--m))));
    bottom:max(calc(var(--mins) * 26px),calc(22 * var(--m)));
    right:calc(52 * var(--m));
    left:calc(152 * var(--m) + max(calc(var(--mins) * 470px),calc(300 * var(--m))) + 40 * var(--m))}
  .phero__show .build{width:min(100cqw,calc((100cqh - var(--rib)) * 1.649))}
  .phero__show .build__steps b{font-size:clamp(14px,2.7cqw,19px)}
}
html.js .phero__show{animation:hFade 1.2s var(--ease-out) .35s both}

/* ?calage : l'en-tête d'origine (décor photo), sans la scène ; ailleurs, la scène
   remplace le décor */
html:not(.calage) .phero__scene{display:none}
html.calage .phero__show{display:none}

.build{--rib:max(calc(var(--mins) * 60px),calc(42 * var(--m)));position:relative}
.build::before{content:"";position:absolute;left:4%;right:-4%;top:12%;bottom:-6%;z-index:-1;background:radial-gradient(50% 50% at 50% 55%,rgba(246,43,62,.2),rgba(246,43,62,.05) 60%,transparent 75%);pointer-events:none}
.build__stage{position:relative;aspect-ratio:16/9.7;perspective:max(1400px,calc(1100 * var(--m)));perspective-origin:70% 40%;transition:opacity .8s var(--ease)}
.bw{position:absolute;left:0;top:0;width:79%;border:1px solid var(--line-2);border-radius:6px;background:#0c0c0d;overflow:hidden;
  box-shadow:0 34px 70px -26px rgba(0,0,0,.95),0 0 60px -28px rgba(246,43,62,.4)}
.bw::after{content:"";position:absolute;inset:-1px;border-radius:6px;border:1px solid var(--red);box-shadow:0 0 34px -4px var(--red-glow),inset 0 0 30px -10px var(--red-glow);opacity:0;pointer-events:none}
.bw__bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#141416;border-bottom:1px solid var(--line)}
.bw__bar > i{width:8px;height:8px;border-radius:50%;background:#34343a}
.bw__bar > i:first-child{background:rgba(246,43,62,.7)}
.bw__url{display:flex;align-items:center;gap:8px;flex:0 1 56%;min-width:0;height:19px;margin-left:12px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:#0b0b0c;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-2);white-space:nowrap;overflow:hidden}
.bw__lock{flex:none;width:9px;height:11px;fill:none;stroke:var(--ink);stroke-width:1.4}
.bw__lock rect{fill:var(--ink);stroke:none}
.bw__addr{overflow:hidden;text-overflow:ellipsis}
.bw__live{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.bw__live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 8px 1px var(--red-glow)}
.bw__body{position:relative;aspect-ratio:1100/688;overflow:hidden;background:#0e0e10}
.bw__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bw__wire{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.bw__grid path{fill:none;stroke:rgba(246,43,62,.28);stroke-width:1;vector-effect:non-scaling-stroke}
.bw__lines *{fill:none;stroke:rgba(245,243,238,.62);stroke-width:1.2;vector-effect:non-scaling-stroke}
.bw__lines .is-cta{stroke:var(--red);fill:rgba(246,43,62,.14)}
.bw__scan{position:absolute;inset:0;pointer-events:none;opacity:0}
.bw__scan::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--red) 20%,#ffd9dc 50%,var(--red) 80%,transparent);box-shadow:0 0 16px 3px rgba(246,43,62,.55)}

.bp{position:absolute;right:0;bottom:0;width:21.5%;transform-origin:50% 100%}
.bp .phone{border-width:6px;border-radius:24px}
.bp .phone img{display:block;padding-top:0}
.bp__wire{position:absolute;left:0;top:20px;width:100%;height:calc(100% - 20px);opacity:0}
.bp__wire *{fill:none;stroke:rgba(245,243,238,.62);stroke-width:1.2;vector-effect:non-scaling-stroke}

.build__notes{position:absolute;right:24.5%;bottom:26%;z-index:3;display:grid;justify-items:end;gap:8px}
.build__notes li{display:flex;align-items:center;gap:10px;padding:7px 0 7px 12px;border:1px solid rgba(246,43,62,.5);border-right:0;background:rgba(6,6,6,.88);font-family:var(--f-mono);font-weight:500;font-size:max(11px,calc(5.4 * var(--m)));letter-spacing:.14em;text-transform:uppercase;color:var(--ink);box-shadow:0 10px 24px -10px rgba(0,0,0,.9)}
.build__notes li::after{content:"";width:max(26px,calc(16 * var(--m)));height:1px;background:linear-gradient(90deg,var(--red),rgba(246,43,62,.3))}

/* le ruban des quatre étapes : numéro rouge, nom en police des titres */
.build__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:max(calc(var(--mins) * 12px),calc(10 * var(--m)));margin-top:max(calc(var(--mins) * 18px),calc(13 * var(--m)))}
.build__steps li{position:relative;display:flex;align-items:baseline;gap:.5em;min-width:0;padding-top:max(calc(var(--mins) * 12px),calc(8 * var(--m)));border-top:1px solid var(--line-2)}
.build__steps li::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;margin-top:-.5px;background:var(--red);box-shadow:0 0 10px var(--red-glow);transform-origin:left center}
.build__steps span{flex:none;font-family:var(--f-mono);font-weight:500;font-size:max(calc(var(--mins) * 12px),calc(6.2 * var(--m)));letter-spacing:.08em;color:var(--red)}
.build__steps b{min-width:0;font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 17px),calc(11 * var(--m)));line-height:1.05;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);transition:color .45s var(--ease)}
.build__cap{margin-top:max(calc(var(--mins) * 26px),calc(18 * var(--m)))}

/* --- animé : états de départ, puis chaque étape --- */
.build.story-armed .build__steps b{color:var(--ink-2)}
.build.story-armed .build__steps li::after{transform:scaleX(0)}
.build.story-armed li.is-done::after{transform:none;opacity:.45}
.build.story-armed li.is-now b{color:var(--ink)}
.build.story-armed li.is-now::after{transform:none;transition:transform var(--step,2.5s) linear}
.build__steps li:nth-child(1){--step:2.5s}.build__steps li:nth-child(2){--step:2.4s}.build__steps li:nth-child(3){--step:2.6s}.build__steps li:nth-child(4){--step:1.8s}

.build.story-armed .bw__shot{clip-path:inset(0 0 100% 0)}
.build.story-armed .bw__wire{opacity:1}
.build.story-armed .bw__grid{opacity:0}
.build.story-armed .bw__lines *{stroke-dasharray:1 1;stroke-dashoffset:1}
.build.story-armed .bp{opacity:0;transform:translate3d(28%,6%,-160px) rotateY(-32deg)}
.build.story-armed .bp__shot{clip-path:inset(0 0 100% 0)}
.build.story-armed .build__notes li{opacity:0;transform:translateX(-14px)}
.build.story-armed .bw__lock,.build.story-armed .bw__live{opacity:0}
.build.story-armed .bw__addr{color:var(--ink-4)}

.build.s1 .bw__grid{opacity:1;transition:opacity .8s var(--ease)}
.build.s1 .bw__lines *{stroke-dashoffset:0;transition:stroke-dashoffset .8s var(--e-io) calc(.2s + var(--k,0) * .15s)}

.build.s2 .bw__shot{clip-path:inset(0);transition:clip-path 1.7s var(--e-io)}
.build.s2 .bw__scan{animation:bwScan 1.7s var(--e-io) both}
.build.s2 .bw__wire{opacity:0;transition:opacity .9s var(--ease) 1.1s}

.build.s3 .bp{opacity:1;transform:none;transition:transform 1.2s var(--e-out),opacity .5s var(--ease)}
.build.s3 .bp__wire{animation:bpWire 1.9s var(--ease) .2s both}
.build.s3 .bp__shot{clip-path:inset(0);transition:clip-path 1.2s var(--e-io) .75s}
.build.s3 .build__notes li{opacity:1;transform:none;transition:opacity .5s var(--ease) calc(1.3s + var(--n) * .18s),transform .7s var(--e-out) calc(1.3s + var(--n) * .18s)}

.build.s4 .bw__lock,.build.s4 .bw__live{opacity:1;transition:opacity .4s var(--ease) .15s}
.build.s4 .bw__addr{color:var(--ink-2);transition:color .6s var(--ease)}
.build.s4 .bw::after{animation:bwLive 2.2s var(--ease) .1s both}
/* fin de boucle : la scène s'efface, repart vide, puis rejoue */
.build.is-fading .build__stage{opacity:0;transition:opacity .6s var(--ease)}
.build.is-reset *,.build.is-reset *::before,.build.is-reset *::after{transition:none!important;animation:none!important}
@keyframes bwScan{0%{opacity:1;transform:translateY(0)}90%{opacity:1}100%{opacity:0;transform:translateY(100%)}}
@keyframes bpWire{0%{opacity:0}15%{opacity:1}55%{opacity:1}100%{opacity:0}}
@keyframes bwLive{0%{opacity:0}25%{opacity:1}100%{opacity:0}}

/* ==========================================================================
   02 · DES SITES LIVRÉS : l'écran se redresse, le téléphone se pose devant
   ========================================================================== */
.duos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:max(calc(var(--mins) * 40px),calc(28 * var(--m))) max(calc(var(--mins) * 26px),calc(20 * var(--m)))}
.duo{min-width:0}
.duo__stage{position:relative;padding:0 10% 7% 0;perspective:max(1300px,calc(900 * var(--m)))}
.duo .duo__shot{height:auto;aspect-ratio:16/10;border-radius:4px;box-shadow:0 30px 60px -26px rgba(0,0,0,.95),0 0 50px -28px rgba(246,43,62,.45);transform-origin:50% 100%;transition:box-shadow .5s var(--ease),border-color .5s var(--ease)}
.duo .duo__shot::after{background:linear-gradient(180deg,transparent 70%,rgba(6,6,6,.35))}
.duo__phone{position:absolute;right:0;bottom:0;width:21%;border-width:5px;border-radius:20px;transition:transform .7s var(--e-out)}
.duo__phone::before{--cam-top:3px;--cam:5px}
.duo__phone img{padding-top:0}
.duo:hover .duo__phone{transform:translateY(-5%)}
.duo:hover .duo__shot{border-color:rgba(246,43,62,.5);box-shadow:0 30px 60px -26px rgba(0,0,0,.95),0 0 40px -12px rgba(246,43,62,.55)}
.duo h3{margin-top:max(calc(var(--mins) * 14px),calc(9 * var(--m)));font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 22px),calc(12.5 * var(--m)));line-height:1;text-transform:uppercase}
.duo p{margin-top:6px;max-width:52ch;font-size:max(calc(var(--mins) * 14.5px),calc(6.8 * var(--m)));line-height:1.55;color:var(--ink-2)}
.duo .proj__type{margin-top:8px}

.duo.story-armed .duo__shot{opacity:0;transform:translateY(34px) rotateX(16deg)}
.duo.story-armed .duo__shot img{clip-path:inset(0 0 100% 0)}
.duo.story-armed .duo__phone{opacity:0;transform:translate3d(16%,18%,0) rotate(5deg)}
.duo.story-on .duo__shot{opacity:1;transform:none;transition:opacity .6s var(--ease) var(--dl,0s),transform 1.2s var(--e-out) var(--dl,0s),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.duo.story-on .duo__shot img{clip-path:inset(0);transition:clip-path 1.3s var(--e-io) calc(.25s + var(--dl,0s)),transform .9s var(--e-out),filter .6s}
.duo.story-on .duo__phone{opacity:1;transform:none;transition:opacity .5s var(--ease) calc(.75s + var(--dl,0s)),transform 1s var(--e-out) calc(.75s + var(--dl,0s))}
.duo.story-on.story-live:hover .duo__phone{transform:translateY(-5%);transition:transform .7s var(--e-out)}

/* ==========================================================================
   03 · LE BACK-OFFICE : quatre onglets, quatre écrans réels qui pivotent
   ========================================================================== */
.bo{display:grid;grid-template-columns:calc(279 * var(--m)) minmax(0,1fr);column-gap:calc(24 * var(--m));align-items:center}
.bo__tabs{border-top:1px solid var(--line)}
.bo__tab{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:max(calc(var(--mins) * 14px),calc(10 * var(--m)));align-items:center;width:100%;padding:max(calc(var(--mins) * 14px),calc(10 * var(--m))) 8px max(calc(var(--mins) * 14px),calc(10 * var(--m))) 0;border-bottom:1px solid var(--line);text-align:left;color:var(--ink-2);cursor:pointer}
.bo__tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--e-out)}
.bo__tab b{font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 20px),calc(12 * var(--m)));line-height:1.02;text-transform:uppercase;color:var(--ink-2);transition:color .35s var(--ease)}
.bo__tab > span:last-child{margin-top:3px;font-size:max(calc(var(--mins) * 13.5px),calc(6.4 * var(--m)));line-height:1.45;color:var(--ink-3)}
.bo__tab:not(.is-on) .bo__ico{border-color:var(--line-2);background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.04),#0b0b0c 72%),#0b0b0c;box-shadow:none;color:var(--ink-3)}
.bo__tab:hover b,.bo__tab:focus-visible b,.bo__tab.is-on b{color:var(--ink)}
.bo__tab:hover:not(.is-on) .bo__ico{border-color:rgba(246,43,62,.5);color:var(--ink-2)}
.bo__tab.is-on::after{transform:none}
.bo.is-tour .bo__tab.is-on::after{transform:scaleX(0);animation:boTour var(--tour,2.8s) linear forwards}
@keyframes boTour{to{transform:none}}

.bo__screens{display:grid;perspective:max(1600px,calc(1200 * var(--m)));perspective-origin:50% 40%}
.bo__panel{grid-area:1 / 1;min-width:0;opacity:0;visibility:hidden;transform:translate3d(7%,0,-140px) rotateY(-16deg);transform-origin:0 50%;
  transition:opacity .45s var(--ease),transform .9s var(--e-out),visibility 0s linear .9s}
.bo__panel.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease) .08s,transform 1s var(--e-out),visibility 0s}
.bo__panel.was-on{transform:translate3d(-7%,0,-140px) rotateY(16deg);transform-origin:100% 50%}
.bo__panel .proj__shot{height:auto;aspect-ratio:1100/760;border:0;background:#0c0c0d;cursor:zoom-in}
.bo__panel .proj__shot::after{display:none}
.bo__panel .proj__shot img{object-position:top center;filter:none}
.bo__panel .proj__shot:hover img{transform:scale(1.02)}
.bo__panel .proj__shot:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.bo__cap{margin-top:max(calc(var(--mins) * 22px),calc(16 * var(--m)))}

.bo.story-armed .bo__screens{opacity:0;transform:translateY(40px) rotateX(12deg)}
.bo.story-on .bo__screens{opacity:1;transform:none;transition:opacity .7s var(--ease) .1s,transform 1.3s var(--e-out) .1s}

@media (prefers-reduced-motion:reduce){
  .bo__panel,.bo__panel.is-on{transition:none}
}

/* ==========================================================================
   Tablette et mobile
   ========================================================================== */
@media (max-width:1023px){
  /* téléphone et tablette : la scène en haut de l'en-tête (à la place du décor),
     le texte en bas */
  .phero__show{order:1;margin:4px 24px 30px}
  .phero__content{order:2}
  .bo{grid-template-columns:1fr;row-gap:30px}
  .bo__ico{width:64px;height:64px}
  .bo__tab b{font-size:18px}
  .build__notes li{font-size:10.5px}
  .bo__tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  .duos{grid-template-columns:1fr;max-width:680px}
}
@media (max-width:640px){
  .bo__tabs{grid-template-columns:1fr}
  /* en-tête au téléphone : la scène et le ruban, sans les étiquettes */
  .build__steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}
  .build__steps b{font-size:16px}
  .build__notes{display:none}
  .bw__bar{height:24px;padding:0 9px}
  .bw__bar > i{width:6px;height:6px}
  .bw__url{height:16px;margin-left:8px;font-size:9px;gap:6px}
  .bw__live{font-size:8px}
  .bw{width:84%}
  .bp{width:23%}
  .bw__addr{display:none}
  .build__stage{aspect-ratio:16/9.9}
  .bp .phone{border-width:4px;border-radius:14px}
  .bp .phone::before{--cam-top:2px;--cam:4px}
  .bp .phone img{padding-top:0}
  .bp__wire{top:12px;height:calc(100% - 12px)}
  .duo__phone{border-width:4px;border-radius:14px}
  .duo__phone::before{--cam-top:2px;--cam:4px}
  .duo__phone img{padding-top:0}
}