/* LA GRILLE DES RÉALISATIONS — deux natures de carte dans une seule grille.

   La réalisation est la carte ordinaire : une couverture, le client, le type,
   l'année. Elle n'a pas de page : le clic ouvre sa galerie par-dessus.
   L'étude de cas occupe DEUX cases, porte un liseré orange et mène à sa page.

   La hiérarchie se voit donc sans séparer les listes, et un projet passe de
   l'une à l'autre le jour où on décide de l'écrire : on ajoute une classe et
   un lien, rien d'autre ne bouge. */

/* ── la grille ─────────────────────────────────────────────────────────── */
/* Trois zones, deux grilles. Les études de cas sont peu nombreuses et se
   lisent : trois par ligne. Les réalisations sont une planche d'images :
   quatre par ligne. Une carte garde TOUJOURS la même taille, une dernière
   ligne incomplète est normale ; c'est l'étalement sur deux cases qui
   donnait des cartes énormes et des trous (vu par Jonas le 2026-09-13). */
.cas-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:38px 30px;align-items:start}
.portfolio-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:34px 24px;align-items:start}
.work-card{margin:0}
.work-card[hidden]{display:none}

/* ── la carte ──────────────────────────────────────────────────────────── */
.work-cover{display:block;width:100%;padding:0;border:0;background:none;
  cursor:pointer;text-align:left;position:relative;overflow:hidden;
  border-radius:12px;aspect-ratio:1.34}
.work-cover img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.work-cover:hover img,.work-cover:focus-visible img{transform:scale(1.04)}
.work-cover:focus-visible{outline:3px solid #ff7526;outline-offset:3px}

/* le compteur de médias, en haut à droite */
.work-nb{position:absolute;top:14px;right:14px;z-index:2;
  background:#101719cc;color:#f8f5ed;font-size:11px;font-weight:700;
  letter-spacing:.06em;padding:6px 10px;border-radius:20px;
  backdrop-filter:blur(6px)}
.work-nb b{font-weight:700}

/* le liseré d'une étude de cas. La pastille « Étude de cas » a sauté : dans
   une section qui s'appelle « Études de cas », elle se répétait. */
.work-card--cas .work-cover{box-shadow:inset 0 0 0 3px #ff7526}
.work-cas-marque{position:absolute;top:14px;left:14px;z-index:2;
  background:#ff7526;color:#101719;font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;
  border-radius:20px}

/* ── la légende ────────────────────────────────────────────────────────── */
.work-legende{padding:16px 2px 0}
.work-legende .work-meta{display:flex;flex-wrap:wrap;gap:6px 12px;
  margin:0 0 8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:#7b8a8f}
.work-legende .work-meta .work-type{color:#125469}
.work-legende h2,.work-legende h3{margin:0 0 6px;font-size:21px;line-height:1.22;
  letter-spacing:-.01em;font-weight:700;color:#101719}
.work-card--cas .work-legende h2{font-size:25px}
/* une vignette de réalisation porte moins de texte qu'une étude de cas */
.portfolio-grid .work-legende h3{font-size:18px}
.portfolio-grid .work-legende{padding-top:13px}
.work-legende p{margin:0;font-size:15px;line-height:1.55;color:#2c3c41}
.work-legende a{color:#125469;text-decoration:none;font-weight:700;font-size:14px;
  border-bottom:2px solid #ff7526;padding-bottom:2px;display:inline-block;
  margin-top:10px;transition:color .2s}
.work-legende a:hover{color:#ff7526}

/* le compteur, sous les filtres */
.gallery-count{margin:14px 0 0;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:#7b8a8f}

/* ── voir plus ─────────────────────────────────────────────────────────── */
.work-plus{display:block;margin:48px auto 0;padding:17px 34px;
  background:#101719;color:#f8f5ed;border:0;border-radius:0;
  font:inherit;font-size:15px;font-weight:700;cursor:pointer;
  transition:background .2s}
.work-plus:hover{background:#125469}
.work-plus[hidden]{display:none}

/* ── la galerie, par-dessus la page ────────────────────────────────────── */
/* Une fenêtre posée sur la page, pas un plein écran. Jonas, 2026-09-13 :
   « plutôt un background assombri comme un pop-up, on voit encore le site et
   c'est plus compact ». Le cadre se resserre sur une vidéo verticale, sinon
   une photo de 9/16 flotterait au milieu d'un rectangle vide. */
.galerie{border:0;padding:0;width:min(940px,92vw);max-width:92vw;
  max-height:90vh;background:#101719;color:#f8f5ed;border-radius:18px;
  box-shadow:0 34px 90px #00000099;
  /* les flèches et la croix débordent du cadre : sans ça le « overflow:auto »
     des boîtes de dialogue les rogne et on ne les voit pas. */
  overflow:visible}
.galerie-cadre{overflow:auto}
.galerie::backdrop{background:#07171db8;backdrop-filter:blur(5px)}
.galerie--video{width:min(430px, 88vw, calc(86vh * 0.5625 + 20px))}
.galerie-cadre{display:grid;grid-template-rows:auto 1fr auto;max-height:90vh;
  box-sizing:border-box;padding:16px 18px 18px}
/* Sur une vidéo, tout ce qui entoure disparaît : le lecteur YouTube porte
   déjà le titre, et la place gagnée va à l'image. Jonas, 2026-09-13 :
   « enlève les textes autour, on s'en fout, la vidéo peut avoir plus de
   place ». Une photo de projet garde sa légende et son rang, eux disent
   quelque chose que l'image ne dit pas. */
.galerie--video .galerie-tete,
.galerie--video .galerie-pied{display:none}
.galerie--video .galerie-cadre{padding:10px}
.galerie--video .galerie-scene{margin:0}
.galerie-tete{display:flex;align-items:flex-start;gap:20px;
  justify-content:space-between;padding-right:48px}
.galerie-tete h2{margin:0;font-size:21px;line-height:1.25;font-weight:700}
.galerie-tete p{margin:4px 0 0;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:#8fa0a6}
/* Le X dans un rond, DANS le lecteur en haut à droite, comme partout
   ailleurs. Jonas, 2026-09-13. */
.galerie-fermer{position:absolute;top:12px;right:12px;z-index:4;
  width:42px;height:42px;
  border-radius:50%;border:1px solid #f8f5ed33;background:#101719cc;
  backdrop-filter:blur(6px);color:#f8f5ed;font-size:24px;line-height:1;
  cursor:pointer;padding:0;display:grid;place-items:center;
  transition:background .2s,border-color .2s}
.galerie-fermer:hover{background:#ff7526;border-color:#ff7526;color:#101719}
.galerie-fermer:focus-visible{outline:3px solid #ff7526;outline-offset:3px}
.galerie-scene{display:flex;align-items:center;justify-content:center;
  min-height:0;position:relative}
/* une hauteur de départ : sans elle la boîte est écrasée le temps que la
   photo arrive, puis saute à sa taille. Une vidéo, elle, connaît sa forme. */
.galerie-scene{margin:12px 0;min-height:min(52vh,460px)}
.galerie--video .galerie-scene{min-height:0}
.galerie-scene img,.galerie-scene video,.galerie-scene iframe{
  max-width:100%;max-height:min(64vh,600px);width:auto;height:auto;
  border-radius:10px;display:block}
/* Une vidéo verticale occupe toute la boîte, en vrai 9/16. Aucune limite de
   hauteur ici : c'est la LARGEUR de la boîte qui est calculée plus haut pour
   que sa hauteur tienne dans l'écran. L'inverse (brider la hauteur) écrasait
   le format, la vidéo n'était plus en 9/16 et YouTube ajoutait des bandes. */
.galerie-scene .verticale{width:100%;height:auto;aspect-ratio:9/16;
  max-height:none}
/* Les flèches vivent EN DEHORS de la boîte, posées sur le fond assombri :
   elles ne recouvrent plus les commandes du lecteur. Le dialogue ouvert est
   positionné, il sert donc de repère à ses enfants absolus. */
.galerie-fleche{position:absolute;top:50%;transform:translateY(-50%);
  background:#101719cc;backdrop-filter:blur(6px);border:1px solid #f8f5ed33;
  color:#f8f5ed;width:52px;height:52px;border-radius:50%;font-size:26px;
  cursor:pointer;line-height:1;padding:0;display:grid;place-items:center;
  transition:background .2s,border-color .2s}
.galerie-fleche:hover{background:#ff7526;border-color:#ff7526;color:#101719}
.galerie-fleche:focus-visible{outline:3px solid #ff7526;outline-offset:3px}
.galerie-prec{left:-74px}
.galerie-suiv{right:-74px}
/* écran étroit : plus de place autour, elles rentrent dans les coins bas */
@media(max-width:760px){
  .galerie-fermer{top:10px;right:10px;width:38px;height:38px;font-size:21px}
  .galerie-fleche{width:44px;height:44px;top:auto;bottom:-58px;transform:none}
  .galerie-prec{left:calc(50% - 54px)}
  .galerie-suiv{right:calc(50% - 54px)}
}
.galerie-pied{display:flex;align-items:center;justify-content:space-between;
  gap:16px;font-size:13px;color:#cfd6d8}
.galerie-pied .galerie-rang{letter-spacing:.1em;font-weight:700;color:#8fa0a6}

/* ── les trois zones de la page ────────────────────────────────────────── */
/* Études de cas, bande de l'atelier, réalisations. Jonas, 2026-09-13 :
   « tu dois re-séparer en études de cas / ligne sombre avec carrousel vidéo /
   réalisations où là c'est ta grille image ». Chaque zone a son titre, et
   chacune disparaît quand elle n'a rien à montrer. */
.portfolio-bloc{margin-top:6px}
/* Une BARRE de section, pas un second grand titre. Le héros en porte déjà un ;
   deux blocs de texte centrés à la suite se répétaient, repoussaient les
   images sous la ligne de flottaison et n'ouvraient sur rien. Jonas,
   2026-09-13 : « ça fait très titre sur titre, pas très vendeur, on ne voit
   plus de contenu ». Une ligne suffit à nommer la section. */
.bloc-barre{max-width:1250px;margin:0 auto 22px;padding:0 5.3%;
  display:flex;align-items:center;gap:18px}
.bloc-libelle{margin:0;flex:none;font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:#101719}
.bloc-filet{flex:1;height:1px;background:#12546930}
.bloc-compte{margin:0;flex:none;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:#526060}
.bloc-compte:empty{display:none}

/* la grille des réalisations vit dans sa propre section claire */
.portfolio-reals{padding:86px max(5.3vw,24px) 96px;background:#f8f5ed}

/* le rappel des réseaux, sous la bande vidéo */
.bande-reseaux{max-width:1250px;margin:26px auto 0;padding:0 5.3%;
  display:flex;align-items:center;justify-content:center;gap:18px;
  flex-wrap:wrap}
.bande-reseaux>p{margin:0;font-size:14px;color:#f8f5edaa}
.bande-reseaux .contact-reseaux{display:flex;gap:10px;margin:0;padding:0;
  list-style:none}
.bande-reseaux .contact-reseaux a{display:grid;place-items:center;width:40px;
  height:40px;border-radius:50%;border:1px solid #f8f5ed33;color:#f8f5ed;
  transition:background .2s,border-color .2s}
.bande-reseaux .contact-reseaux a:hover{background:#ff7526;border-color:#ff7526;
  color:#101719}
.bande-reseaux .contact-reseaux svg{width:19px;height:19px;fill:currentColor}
.bande-reseaux .contact-reseaux span{position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%)}
.bande-atelier-tete{text-align:center}
.bande-atelier-tete h2 em{font-style:normal;color:#ff7526}
.bande-atelier>.bande-atelier-tete p:last-child{margin-left:auto;
  margin-right:auto}

/* ── la bande vidéo ────────────────────────────────────────────────────── */
.bande-atelier{background:#101719;color:#f8f5ed;padding:74px 0 78px;
  margin-top:96px}
.bande-atelier-tete{max-width:1250px;margin:0 auto 30px;padding:0 5.3%}
.bande-atelier .eyebrow{margin:0 0 14px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;color:#ff7526}
.bande-atelier h2{margin:0 0 10px;font-size:clamp(28px,3.2vw,40px);
  line-height:1.08;letter-spacing:-.02em;font-weight:700}
.bande-atelier>.bande-atelier-tete p:last-child{margin:0;max-width:620px;
  font-size:16px;line-height:1.65;color:#cfd6d8}
/* Le carrousel ne prend pas toute la largeur : 80 %, les bords s'effacent en
   fondu et deux flèches le font tourner. Il boucle sans fin (portfolio.js
   duplique la liste de part et d'autre). Jonas, 2026-09-13.
   Plus de calage magnétique : il se battrait avec le recalage de la boucle. */
.bande-carrousel{position:relative;width:80%;max-width:1250px;margin:0 auto}
.bande-piste{display:flex;gap:18px;overflow-x:auto;padding:6px 0 14px;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
.bande-piste::-webkit-scrollbar{display:none}
.bande-fleche{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;border:1px solid #f8f5ed33;
  background:#101719cc;backdrop-filter:blur(6px);color:#f8f5ed;font-size:24px;
  line-height:1;cursor:pointer;transition:background .2s,border-color .2s}
.bande-fleche:hover{background:#ff7526;border-color:#ff7526;color:#101719}
.bande-fleche:focus-visible{outline:3px solid #ff7526;outline-offset:3px}
.bande-prec{left:-60px}
.bande-suiv{right:-60px}
@media(max-width:1320px){.bande-prec{left:2px}.bande-suiv{right:2px}}
.bande-clip{flex:0 0 auto;width:212px;scroll-snap-align:start;position:relative;
  padding:0;border:0;background:none;cursor:pointer;border-radius:12px;
  overflow:hidden;aspect-ratio:9/16}
.bande-clip img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.bande-clip:hover img{transform:scale(1.05)}
.bande-clip:focus-visible{outline:3px solid #ff7526;outline-offset:3px}
.bande-clip:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,#10171900 45%,#101719cc)}
.bande-lire{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:#f8f5edee;z-index:2;
  display:grid;place-items:center;transition:background .2s}
.bande-clip:hover .bande-lire{background:#ff7526}
.bande-lire:before{content:"";border-left:15px solid #101719;
  border-top:9px solid transparent;border-bottom:9px solid transparent;
  margin-left:4px}
.bande-titre{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;
  text-align:left;font-size:13px;line-height:1.35;font-weight:700;
  color:#f8f5ed}


@media(max-width:1100px){
  .cas-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}
  .portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}
  .bloc-barre{padding:0 6%}
  .portfolio-reals{padding:70px 6% 78px}
}
@media(max-width:900px){
  .cas-grille{grid-template-columns:1fr;gap:26px}
  .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 15px}
  .work-cover{aspect-ratio:1.4}
  /* une vignette de réalisation garde son titre, pas son résumé */
  .portfolio-grid .work-legende p:not(.work-meta){display:none}
  /* deux colonnes de 158 px : le client fait passer la ligne à deux étages
     et repousse le titre. Sur une vignette, le type et l'année suffisent. */
  .portfolio-grid .work-meta{font-size:10px;gap:4px 8px;flex-wrap:nowrap}
  .portfolio-grid .work-meta span:not(.work-type):not(:last-child){display:none}
  .work-legende h2,.work-legende h3,.work-card--cas .work-legende h2{font-size:19px}
  .work-plus{width:100%;margin-top:34px}
  .bande-atelier{margin-top:56px;padding:52px 0 56px}
  .bande-atelier-tete{padding:0 6%;margin-bottom:22px}
  .bande-carrousel{width:88%}
  .bande-piste{padding:6px 0 14px;gap:14px}
  .bande-clip{width:168px}
}