/* ==========================================================================
   RÉALISATIONS · compléments propres à cette page
   En-tête : le coverflow des quatre sites (à la place de la photo de décor),
   01 les identités (tuiles de logo, avec la construction de chaque logo :
   logoforge.js), 02 logiciel, podcast et vidéo. Mêmes unités que pages.css
   (--m, --mins).
   ========================================================================== */
body[data-page="realisations"]{
  --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);
}
.blk--next{padding-top:0}

/* repère sur les captures qu'on peut parcourir de haut en bas */
.rl-full{position:absolute;z-index:2;left:10px;top:10px;display:inline-flex;align-items:center;gap:7px;padding:5px 9px;font-family:var(--f-mono);font-weight:500;font-size:max(10.5px,var(--fs-nano));letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(6,6,6,.78);border:1px solid rgba(255,255,255,.16);pointer-events:none}
.rl-full::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red)}
/* repère sur les visuels qui mènent à une autre page du site */
.rl-full--go::before{width:12px;height:1px;border-radius:0;box-shadow:0 0 6px rgba(246,43,62,.7)}

/* ==========================================================================
   EN-TÊTE · LE COVERFLOW DES QUATRE SITES (comme sur l'accueil)
   Mécanique : stories.js (« cf »), qui pose .is-cf, puis sur chaque carte
   --x (décalage en % de carte), --z (recul, en largeurs de carte), --ry
   (rotation), --sc, --op et --wsh (voile des cartes de côté). Largeur d'une
   carte : --cw, calculée en CSS sur la place libre (unités cq), sans mesure.
   Sans .is-cf (sans JavaScript, éditeur du back-office, ?calage) : les quatre
   sites en grille, avec leur légende.
   ========================================================================== */
@property --wsh{syntax:'<number>';inherits:true;initial-value:0}
.phero__show{position:relative;z-index:2;max-width:820px;margin:max(calc(var(--mins) * 30px),calc(24 * var(--m))) calc(52 * var(--m)) 0 calc(152 * var(--m));container-type:inline-size}
@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) + 26 * var(--m));
    bottom:max(calc(var(--mins) * 26px),calc(22 * var(--m)));
    right:calc(40 * var(--m));
    left:calc(152 * var(--m) + max(calc(var(--mins) * 470px),calc(300 * var(--m))) + 34 * var(--m))}
}
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}

.cf{--bar:max(20px,calc(13 * var(--m)));--tint:246,43,62;position:relative;width:100%}
/* état fixe : grille 2 × 2 */
.cf__track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
.cf__card{position:relative;min-width:0}
.cf .proj__shot{height:auto;padding:var(--bar) 0 0;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:#0b0b0c;box-shadow:0 30px 60px -26px rgba(0,0,0,.95)}
.cf .proj__shot img{display:block;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center;filter:none}
/* barre de navigateur : trois points (le premier rouge sur la carte active) et une adresse vide */
.cf .proj__shot::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--bar);z-index:1;border-bottom:1px solid rgba(255,255,255,.07);background:
  radial-gradient(circle at calc(var(--bar) * .62) 50%,var(--dot1,#3a3a3d) calc(var(--bar) * .13),transparent calc(var(--bar) * .13 + .6px)),
  radial-gradient(circle at calc(var(--bar) * 1.08) 50%,#3a3a3d calc(var(--bar) * .13),transparent calc(var(--bar) * .13 + .6px)),
  radial-gradient(circle at calc(var(--bar) * 1.54) 50%,#3a3a3d calc(var(--bar) * .13),transparent calc(var(--bar) * .13 + .6px)),
  linear-gradient(#0e0e10,#0e0e10) 50% 50% / calc(38% - 2px) calc(var(--bar) * .44 - 2px) no-repeat,
  linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1)) 50% 50% / 38% calc(var(--bar) * .44) no-repeat,
  linear-gradient(#17171a,#121214)}
.cf .proj__shot::after{inset:var(--bar) 0 0;z-index:1;background:rgba(6,6,6,var(--wsh));transition:none}
.cf__cap{margin-top:12px}
.cf__name{font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 20px),calc(12.5 * var(--m)));line-height:1.05;text-transform:uppercase;color:var(--ink)}
.cf__cap .proj__type{margin-top:6px;font-size:max(calc(var(--mins) * 11px),var(--fs-nano))}
.cf__txt{margin-top:8px;max-width:46ch;font-size:max(calc(var(--mins) * 15px),calc(7 * var(--m)));line-height:1.55;color:var(--ink-2)}
.cf__nav{display:none}

/* ---- coverflow (.is-cf) --------------------------------------------------- */
.cf.is-cf{--cw:min(60cqw,640px)}
@media (min-width:1180px){.cf.is-cf{--cw:min(62cqw,calc((100cqh - 230px) * 1.45),720px)}}
.cf.is-cf .cf__stage{position:relative;height:calc(var(--bar) + var(--cw) / 1.6 + max(calc(var(--mins) * 128px),calc(84 * var(--m))));perspective:calc(var(--cw) * 3);perspective-origin:50% 30%;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.cf.is-cf .cf__stage.is-drag{cursor:grabbing}
/* lueur et horizon, teintés par le site présenté */
.cf.is-cf .cf__stage::before{content:"";position:absolute;z-index:0;left:50%;top:calc(var(--bar) + var(--cw) / 3.2);width:calc(var(--cw) * 1.9);height:calc(var(--cw) * 1.05);translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,currentColor,transparent);color:rgb(var(--tint));opacity:.22;pointer-events:none}
.cf.is-cf .cf__stage::after{content:"";position:absolute;z-index:0;left:4%;right:4%;top:calc(var(--bar) + var(--cw) / 1.6 + 6px);height:1px;background:linear-gradient(90deg,transparent,rgba(246,43,62,.4) 22%,currentColor 50%,rgba(246,43,62,.4) 78%,transparent);color:rgb(var(--tint));box-shadow:0 0 18px 1px rgba(246,43,62,.35);pointer-events:none;transition:color .9s var(--e-out)}
.cf.is-cf .cf__track{position:absolute;inset:0;z-index:1;display:block}
.cf.is-cf .cf__card{position:absolute;left:calc(50% - var(--cw) / 2);top:0;width:var(--cw);opacity:var(--op,1);transform-origin:50% 50%;
  transform:translateX(calc(var(--x,0) * 1%)) translateZ(calc(var(--z,0) * var(--cw))) rotateY(calc(var(--ry,0) * 1deg)) rotateX(calc(var(--ty,0) * -7deg)) rotateY(calc(var(--tx,0) * 10deg)) scale(var(--sc,1));
  transition:transform .75s var(--e-out),opacity .6s var(--e-out),--wsh .6s var(--e-out)}
.cf.is-cf .cf__card.is-tilting{transition:opacity .6s var(--e-out),--wsh .6s var(--e-out)}
.cf.is-cf .cf__card.is-relax{transition:transform .42s cubic-bezier(.34,1.25,.64,1),opacity .6s var(--e-out),--wsh .6s var(--e-out)}
.cf.is-cf :is(.is-drag,.is-still) .cf__card{transition:none}
/* arrivée : l'éventail s'ouvre depuis le fond, la carte du centre d'abord */
.cf.is-cf .is-arriving .cf__card{transition:transform 1.1s var(--e-out) var(--dl,0s),opacity .8s var(--e-out) var(--dl,0s),--wsh .6s var(--e-out)}
.cf.is-cf .proj__shot{box-shadow:0 calc(var(--cw) * .06) calc(var(--cw) * .14) calc(var(--cw) * -.02) rgba(0,0,0,.85);transition:border-color .6s var(--e-out)}
.cf.is-cf .cf__card.is-active .proj__shot{--dot1:var(--red);border-color:rgba(var(--tint),.6)}
.cf.is-cf .proj__shot img{transition:none;pointer-events:none}
.cf.is-cf .proj__shot:hover img{transform:none}
@media (min-width:1024px){
  .cf.is-cf .proj__shot{-webkit-box-reflect:below 8px linear-gradient(transparent 80%,rgba(0,0,0,.1))}
}
/* légende sous la carte active : elle monte en fondu */
.cf.is-cf .cf__cap{position:absolute;left:-18%;right:-18%;top:calc(100% + max(calc(var(--mins) * 22px),calc(16 * var(--m))));margin:0;text-align:center;opacity:0;translate:0 10px;pointer-events:none;transition:opacity .25s var(--e-out),translate .25s var(--e-out)}
.cf.is-cf .cf__card.is-active .cf__cap{opacity:1;translate:none;transition:opacity .5s var(--e-out) .3s,translate .6s var(--e-out) .3s}
.cf.is-cf .cf__txt{margin-inline:auto;max-width:52ch}
.cf.is-cf .cf__cap .proj__type{display:inline-block}

/* flèches et points */
.cf.is-cf .cf__nav{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:max(calc(var(--mins) * 18px),calc(12 * var(--m)));margin-top:max(calc(var(--mins) * 14px),calc(10 * var(--m)))}
.cf.is-cf .cf__dots{display:flex;align-items:center;gap:10px}
.cf__dot{position:relative;width:8px;height:8px;margin:0;padding:0;border:0;border-radius:4px;background:rgba(255,255,255,.22);cursor:pointer;transition:width .35s var(--e-out),background-color .35s var(--e-out)}
.cf__dot::before{content:"";position:absolute;left:-5px;right:-5px;top:-14px;bottom:-14px}
.cf__dot:hover{background:rgba(255,255,255,.45)}
.cf__dot.is-on{width:28px;background:rgba(246,43,62,.32)}
/* la pilule active se remplit pendant le défilement tout seul (4,8 s) ; sinon pleine */
.cf__dot::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--red);transform:scaleX(0);transform-origin:0 50%}
.cf__dot.is-on::after{transform:none}
.cf.is-auto .cf__dot.is-on::after{animation:cfPill 4.8s linear both}
.cf.is-auto.is-hold .cf__dot.is-on::after{animation-play-state:paused}
@keyframes cfPill{from{transform:scaleX(0)}to{transform:none}}

/* la carte active flotte doucement quand le pointeur n'est pas sur la scène */
@media (prefers-reduced-motion:no-preference){
  .cf.is-cf.story-live .cf__card.is-active:not(.is-tilting){animation:cfFloat 7s ease-in-out infinite}
  .cf.is-cf :is(.is-hover,.is-drag) .cf__card.is-active{animation-play-state:paused}
}
@keyframes cfFloat{0%,100%{translate:0 0}50%{translate:0 calc(var(--cw) * -.012)}}
@media (prefers-reduced-motion:reduce){
  .cf.is-cf :is(.cf__card,.cf__cap,.cf__dot,.cf__stage){transition:none!important;animation:none!important}
  .cf.is-cf .cf__stage::before,.cf.is-cf .cf__stage::after,.cf.is-cf .cf__dot::after{transition:none!important;animation:none!important}
}

/* ==========================================================================
   01 · IDENTITÉS : tuiles de logo au format des captures
   ========================================================================== */
.rid 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}
.rid p{margin-top:6px;max-width:54ch;font-size:max(calc(var(--mins) * 14.5px),calc(6.8 * var(--m)));line-height:1.55;color:var(--ink-2)}
.rids{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:max(calc(var(--mins) * 34px),calc(24 * var(--m))) max(calc(var(--mins) * 18px),calc(14 * var(--m)))}
.rid{min-width:0}
.rid .logo-tile{position:relative;display:block;aspect-ratio:16/10;padding:0;border:1px solid rgba(255,255,255,.06);overflow:hidden;background:#f4f1ea}
.rid .logo-tile img{position:absolute;left:18%;top:20%;width:64%;height:60%;max-width:none;max-height:none;object-fit:contain;transform:scale(var(--s,1));transition:transform .9s var(--ease-out)}
.rid:hover a.logo-tile:not(.lf-tile) img{transform:scale(calc(var(--s,1) * 1.04))}
/* construction des logos (logoforge.js) : elle revient au survol de toute la carte */
.rid:hover > .lf-tile.lf-done .lf > g{opacity:1;transition:opacity .35s var(--e-out)}
.rid:hover > .lf-tile.lf-done .lf > .lf-sketch{opacity:.5}
.rid .lf-tile .rl-full{z-index:3}
.rid:hover a.logo-tile{box-shadow:0 18px 40px -20px rgba(246,43,62,.5)}
/* fond clair : le blanc des fichiers se fond dans le papier */
.logo-tile--light img{mix-blend-mode:multiply}
/* logos clairs : on leur rend le fond pour lequel ils ont été dessinés */
.rid .logo-tile--dark{background:#26272c}
.rid .logo-tile--night{background:radial-gradient(80% 95% at 50% 42%,#1c1c20,#0d0d0f)}
.rid .logo-tile--navy{background:#24346c}

/* la recherche du traiteur : une phrase et un lien vers la page Identité visuelle */
.rlink{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;margin-top:max(calc(var(--mins) * 34px),calc(26 * var(--m)));padding-top:max(calc(var(--mins) * 18px),calc(12 * var(--m)));border-top:1px solid var(--line-2);font-size:max(calc(var(--mins) * 15.5px),calc(7.4 * var(--m)));line-height:1.55;color:var(--ink-2)}
.rlink .more{margin-top:0}

/* ==========================================================================
   02 · LOGICIEL, PODCAST, VIDÉO
   ========================================================================== */
.rmore{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:max(calc(var(--mins) * 26px),calc(16 * var(--m))) max(calc(var(--mins) * 18px),calc(14 * var(--m)))}
.rmore .wcard{min-width:0}
.wcard a.proj__shot{color:inherit}
.wcard .rl-reels{display:flex;align-items:center;justify-content:center;gap:4%;background:radial-gradient(70% 90% at 50% 62%,rgba(246,43,62,.2),transparent 70%),#0b0b0c}
.wcard .rl-reels img{position:relative;width:21%;height:auto;aspect-ratio:420/909;object-fit:cover;border:3px solid #1b1b1e;border-radius:10px;filter:none;box-shadow:0 16px 30px -12px rgba(0,0,0,.95)}
.wcard .rl-reels img:nth-child(2){width:24%}
/* arrivées : les visuels montent de la profondeur, les trois extraits s'ouvrent en
   éventail, celui du milieu flotte ensuite doucement */
@media (prefers-reduced-motion:no-preference){
  html.js:not(.calage) .rmore .wcard > .proj__shot{transition:transform 1.2s var(--e-out) calc(var(--i,0) * 120ms + .1s),opacity .8s var(--ease) calc(var(--i,0) * 120ms + .1s),border-color .5s var(--ease),box-shadow .5s var(--ease)}
  html.js:not(.calage) .rmore .wcard.rv:not(.is-in) > .proj__shot{opacity:0;transform:perspective(1200px) translate3d(0,40px,-60px) rotateX(12deg)}
  html.js:not(.calage) .rl-reels img{transition:translate 1s var(--e-out) .55s,rotate 1s var(--e-out) .55s,opacity .6s var(--ease) .55s}
  html.js:not(.calage) .wcard.rv:not(.is-in) .rl-reels img:nth-child(1){translate:62% 0;rotate:7deg;opacity:0}
  html.js:not(.calage) .wcard.rv:not(.is-in) .rl-reels img:nth-child(3){translate:-62% 0;rotate:-7deg;opacity:0}
  html.js:not(.calage) .wcard.is-in .rl-reels img:nth-child(2){animation:rlFloat 6s ease-in-out 1.8s infinite}
}
@keyframes rlFloat{0%,100%{translate:0 0}50%{translate:0 -4%}}

/* ==========================================================================
   Tablette et mobile
   ========================================================================== */
@media (max-width:1023px){
  /* l'en-tête : le coverflow en haut (à la place du décor), le texte dessous */
  .phero__show{order:1;margin:4px 24px 30px;max-width:none}
  .phero__content{order:2}
  .cf.is-cf{--cw:min(70cqw,520px)}
  .cf.is-cf .cf__stage{height:calc(var(--bar) + var(--cw) / 1.6 + 132px)}
  .cf.is-cf .cf__cap{left:-10%;right:-10%}
  .cf__name{font-size:18px}
  .cf__txt{font-size:15px}
  .rids,.rmore{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .cf.is-cf{--cw:min(76cqw,420px)}
  .cf.is-cf .cf__stage{height:calc(var(--bar) + var(--cw) / 1.6 + 150px)}
  .cf.is-cf .cf__cap{top:calc(100% + 14px);left:-6%;right:-6%}
  .cf.is-cf .cf__nav .round{--d:40px}
  .cf__track{grid-template-columns:1fr}
  .rmore{grid-template-columns:1fr}
  /* téléphone : les logos en mur de deux colonnes, le nom suffit */
  .rids{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
  .rid h3{margin-top:10px;font-size:16px;line-height:1.1}
  .rid p{display:none}
  .rid .rl-full{top:6px;left:6px;padding:4px 6px;font-size:9.5px}
}