/* ==========================================================================
   Portrait Bureau — landing 0.3.2 · composants
   Registre éditorial v4 (../_style/v4/) : ce fichier ne contient AUCUNE
   valeur de couleur ni de mesure — tout vient de tokens.css, copie
   synchronisée de _style/v4/tokens.css (resynchronisée par build_deploy.sh).
   Les sept composants de la fin du fichier viennent de variation.elements,
   retraduits dans le registre (apport 0003).
   ========================================================================== */

/* ---- base ---------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--disp);color:var(--ink);background:var(--paper);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gilt);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:760px;margin:0 auto;padding:0 var(--gutter)}
@media(max-width:640px){.wrap,.narrow{padding:0 var(--gutter-narrow)}}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:uppercase}
p{max-width:60ch}
section{scroll-margin-top:84px}
#top{display:block;scroll-margin-top:var(--header-h)}

/* ---- en-tête : monogramme · liens · langue · CTA ------------------------- */
header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:var(--frame-thin) solid var(--ink)}
.hbar{display:flex;align-items:center;justify-content:space-between;padding:12px var(--gutter) 20px;max-width:var(--wrap-header);margin:0 auto;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
/* Le monogramme est plus grand que la barre ne le permettrait : les marges
   négatives annulent sa contribution à la hauteur du header, qui reste réglée
   par la nav. Le logo dépasse dans le padding, il ne l'écarte pas. */
.brand img{height:72px;margin:-16px 0;position:relative;top:5px}
.brand .wm{font-family:var(--disp);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:17px}
/* Le padding bas de la .hbar (20 px contre 12 en haut) décale le centre du
   contenu de 4 px vers le haut : la nav les reprend pour retomber au milieu
   optique de la barre, comme le monogramme. */
.hnav{display:flex;align-items:center;gap:22px;position:relative;top:4px}
.hnav .nl{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--muted);transition:.15s}
.hnav .nl:hover{color:var(--ink)}
.hnav .nl.on{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.mobile-nav{display:none}
/* ---- le bouton hamburger (téléphone uniquement) --------------------------
   Il PREND LA PLACE de « Visit us » sous 900 px : la barre garde trois blocs
   (monogramme · langue · menu) au lieu d'empiler une seconde rangée de liens.
   Trois filets d'encre, pas de glyphe : le tracé suit les cadres du site. */
.burger{display:none}
.burger span{display:block;width:22px;height:var(--frame-thin);background:var(--ink);transition:.18s}
.lang{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px}
.lang button{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;background:none;border:0;padding:2px 3px;cursor:pointer;color:var(--muted);opacity:.55;transition:.15s}
.lang button.on{color:var(--ink);opacity:1;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.lang .sep{color:var(--muted);opacity:.4}
@media(max-width:900px){.hnav .nl{display:none}.hnav{gap:14px}}
@media(max-width:720px){.brand .wm{display:none}}
@media(max-width:900px){
  header{background:var(--paper)}
  /* 8 septembre : la rangée de liens toujours visible devient un MENU. Le
     bouton « Visit us » cède sa place au hamburger, et les trois destinations
     vivent désormais dans le panneau qu'il déplie. La rangée n'occupe plus de
     hauteur quand le menu est fermé. */
  .hnav .btn{display:none}
  /* le hamburger va chercher le bord : il mord la moitié du gutter, et la
     langue se serre contre lui, tous deux centrés sur la hauteur de la barre. */
  .hnav{gap:14px;align-items:center}
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:34px;height:34px;padding:0;cursor:pointer;
    border:0;background:transparent;
    margin-right:calc(var(--gutter) / -2)}
  /* ouvert : les deux filets extrêmes se croisent, celui du milieu s'efface */
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* le panneau : plein cadre sous la barre, une destination par ligne. Il est
     déplié par la classe `open` que pose le script, jamais par un `:target`. */
  .mobile-nav{display:none}
  .mobile-nav.open{display:flex;flex-direction:column;gap:10px;
    padding:6px var(--gutter) 16px;background:var(--paper)}
  /* chaque destination est un cadre à elle, centré. Les filets de séparation
     partent : deux traits par ligne — le sien et celui du voisin — se liraient
     comme une grille, et le site n'encadre jamais deux fois la même chose. */
  .mobile-nav a{font-family:var(--mono);font-size:13px;letter-spacing:.06em;
    text-transform:uppercase;text-decoration:none;color:var(--ink);
    padding:14px 12px;text-align:center;
    border:var(--frame-thin) solid var(--ink);transition:.18s}
  .mobile-nav a:hover,.mobile-nav a:focus-visible{background:var(--ink);color:var(--paper);opacity:1}
}

/* ---- boutons : l'inversion est le seul geste ------------------------------ */
.btn{font-family:var(--disp);text-transform:uppercase;font-weight:600;letter-spacing:.02em;font-size:13px;padding:12px 20px;border:var(--frame-thin) solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;text-decoration:none;transition:.18s;display:inline-block}
.btn:hover{background:transparent;color:var(--ink)}
.btn-o{background:transparent;color:var(--ink)}.btn-o:hover{background:var(--ink);color:var(--paper)}
.btn-paper{border-color:var(--paper);background:var(--paper);color:var(--ink)}.btn-paper:hover{background:transparent;color:var(--paper)}
.btn-paper-o{border-color:var(--paper);background:transparent;color:var(--paper)}.btn-paper-o:hover{background:var(--paper);color:var(--ink)}
@media(max-width:720px){.btn{padding:10px 13px;font-size:12px}}

/* ---- hero : plein écran sur l'index, court sur les satellites ------------- */
.hero{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;display:flex;flex-direction:column;min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h))}
.hero.short{min-height:62vh;min-height:62svh}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:14% 50%;z-index:0;transform:scale(1.15);transform-origin:center center;background:var(--ink)}
.hero.short .hero-bg{transform:none;object-position:50% 38%}
.hero-shade{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(20,17,11,.94) 0%,rgba(20,17,11,.82) 34%,rgba(20,17,11,.42) 64%,rgba(20,17,11,.12) 100%),
  linear-gradient(0deg,rgba(20,17,11,.62) 0%,rgba(20,17,11,0) 42%)}
.hero-inner{position:relative;z-index:2;flex:1;width:100%;display:flex;align-items:center;padding:clamp(18px,4vh,48px) var(--gutter)}
.hero .txt{max-width:760px}
/* 8 septembre — visiter, sur écran large : le bloc a gagné une seconde pastille
   et se retrouvait serré entre l'en-tête et le bas de l'image. La bande gagne
   dix points de hauteur et le contenu une vraie respiration verticale. Rien ne
   change sous 900 px, où la mise en page est déjà empilée. */
@media(min-width:901px){
  .visit-hero{min-height:72vh;min-height:72svh}
  .visit-hero .hero-inner{padding-top:clamp(40px,7vh,76px);padding-bottom:clamp(40px,7vh,76px)}
}
.hero .txt .mono{color:var(--gilt)}
.hero h1{font-family:var(--disp);text-transform:uppercase;font-weight:700;letter-spacing:-.02em;line-height:.96;font-size:clamp(34px,5.2vw,74px);margin:12px 0 6px}
.hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;color:var(--gilt)}
.hero .sub{font-family:var(--serif);font-size:clamp(17px,1.7vw,20px);color:var(--paper-soft);max-width:46ch;margin:14px 0 26px;text-shadow:0 1px 18px rgba(0,0,0,.45)}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.atelier-actions{gap:16px}
.offer-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.hero .facts{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-soft);margin-top:26px}
.hero .facts b{color:var(--gilt);font-weight:400;margin:0 7px}
.hero .strip{position:relative;z-index:2;background:var(--gilt);color:var(--ink)}
.hero .strip .in{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;padding:14px var(--gutter);font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
@media(max-width:860px){
  .hero-bg{object-position:47% 42%}
  .hero-shade{background:linear-gradient(0deg,rgba(20,17,11,.95) 0%,rgba(20,17,11,.62) 46%,rgba(20,17,11,.5) 100%)}
  .hero .sub{max-width:none}
}

/* ---- charpente des sections ---------------------------------------------- */
.band{padding:clamp(64px,8vw,110px) 0}
/* « A creative atelier » (atelier) et « What you can book » (services) : ces
   bandes suivent immédiatement le hero, leur haut est resserré à toutes les
   largeurs. Le bas garde sa mesure. */
.band.atelier-studio,
#book.band{padding-top:clamp(28px,3vw,44px)}
.tint{background:var(--paper-2)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;display:block}
.eyebrow.gilt{color:var(--gilt)} /* fond sombre UNIQUEMENT (loi 1) */
.big{font-family:var(--disp);text-transform:uppercase;font-weight:700;letter-spacing:-.02em;line-height:.94;font-size:clamp(34px,5.5vw,74px)}
/* l'italique de voix dans un grand titre : hérite de la couleur du fond,
   donc encre sur clair et crème sur bande sombre (loi 1 respectée) */
.big em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0}
.ebb .big em{color:var(--gilt)}
.big-s{font-size:clamp(28px,4vw,52px);line-height:1}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,74px);align-items:center}
@media(max-width:860px){.two{grid-template-columns:1fr;gap:30px}}
.body-txt{font-family:var(--serif);font-size:21px;color:var(--muted);margin-top:20px}
.fr{border:var(--frame-hero) solid var(--ink);background:var(--ink)}
.fr img{width:100%}

/* ---- la grille de portraits (série) --------------------------------------- */
.serie .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:38px}
.serie .item .ph{aspect-ratio:3/4;overflow:hidden;border:var(--frame-series) solid var(--m1)}
.serie .item:nth-child(2) .ph{border-color:var(--m2)}
.serie .item:nth-child(3) .ph{border-color:var(--m3)}
.serie .item:nth-child(4) .ph{border-color:var(--m4)}
.serie .item img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.serie .item:hover img{transform:scale(1.03)}
.serie .item .cap{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:12px;text-align:center}
@media(max-width:720px){.serie .grid4{grid-template-columns:1fr 1fr}}

/* ---- le parcours en trois pas (générique clair ; .process = bande verte) -- */
.p-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:52px}
@media(max-width:860px){.p-grid{grid-template-columns:1fr 1fr;gap:32px 20px}}
@media(max-width:520px){.p-grid{grid-template-columns:1fr}}
/* rangée de quatre : segments parallèles, pas d'étapes numérotées (v3) */
.p-grid.four{grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:980px){.p-grid.four{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.p-grid.four{grid-template-columns:1fr}}
.p-step{text-align:left}
.p-num{width:42px;height:42px;border:var(--frame-thin) solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:15px;color:var(--ink);margin:0 0 18px}
.p-ph{aspect-ratio:58/69;overflow:hidden;border:var(--frame-thin) solid rgba(25,21,16,.18);margin-bottom:18px;background:var(--ink)}
.p-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.p-step:hover .p-ph img{transform:scale(1.04)}
.p-step h3{font-family:var(--disp);text-transform:uppercase;font-weight:700;letter-spacing:-.01em;font-size:16px;line-height:1.15;margin-bottom:8px}
.p-step p{font-family:var(--serif);font-size:15px;color:var(--muted);margin:0;max-width:30ch}

/* bande verte : texte clair (lois 2 et 3, appliquées en v2) */
.process{background:var(--m5);color:var(--paper)}
.process .eyebrow{color:var(--on-m5-1)}
.process .big{color:var(--paper);text-align:left;max-width:22ch;margin:0}
.process .lead{font-family:var(--serif);font-style:italic;color:var(--on-m5-2);text-align:left;font-size:clamp(16px,1.6vw,20px);margin:18px 0 0;max-width:62ch}
.process .p-num{border-color:var(--paper);color:var(--paper)}
.process .p-ph{border-color:rgba(246,241,231,.18)}
.process .p-step h3{color:var(--paper)}
.process .p-step p{color:var(--on-m5-2)}
/* variante ENCRE de la bande parcours : même mise en page, fond encre au lieu du
   vert. Sur l'encre, la voix est l'or (7,50) et le corps la crème adoucie (14,23) :
   les teintes --on-m5-* n'ont plus lieu d'être, elles sont tirées vers le vert. */
.process.encre{background:var(--ink)}
.process.encre .eyebrow{color:var(--gilt)}
.process.encre .lead{color:var(--paper-soft)}
.process.encre .p-step p{color:var(--paper-soft)}
.process.encre .p-ph{border-color:rgba(246,241,231,.18)}
.process.encre .place{border-color:var(--parchment-3);color:var(--parchment-1)}
.process.encre .place.on{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.process.encre .soon-note{color:var(--parchment-2)}
.process.encre .btn.soon{border-color:var(--parchment-3);color:var(--parchment-2)}
.process.encre .ticks li{color:var(--paper-soft)}
.process.encre .ticks li::before{color:var(--gilt)}
.process.encre .ticks li b{color:var(--paper)}

.process .quote{text-align:left;font-family:var(--disp);text-transform:uppercase;font-weight:700;letter-spacing:.02em;color:var(--paper);font-size:clamp(15px,1.8vw,19px);margin-top:56px}

/* ---- l'œuvre (bande rouge) ------------------------------------------------ */
.oeuvre{background:var(--m3)}
.oeuvre .eyebrow{color:var(--on-m3-1)}
.oeuvre .big{color:var(--paper)}
.oeuvre .body-txt{color:var(--on-m3-2)}
.oeuvre .o-art{position:relative;max-width:360px;margin:0 auto;padding:22px 0}
/* .o-solo : depuis le rectif du 2026-08-24, la section 4 ne porte plus qu'une
   image (I-O2), agrandie. Les blocs décalés sont réaccordés à sa taille. */
.oeuvre .o-art.o-solo{max-width:min(100%,480px);padding:34px 0}
.oeuvre .o-art.o-solo .blk-a{inset:6px 30px 54px -24px}
.oeuvre .o-art.o-solo .blk-b{inset:54px -24px 6px 30px}
.oeuvre .o-art .blk-a{position:absolute;inset:4px 22px 40px -18px;background:var(--ink);z-index:0}
.oeuvre .o-art .blk-b{position:absolute;inset:40px -18px 4px 22px;background:var(--gilt);z-index:1}
.oeuvre .o-art .frame{position:relative;z-index:2;border:var(--frame-oeuvre) solid var(--paper);background:var(--paper);box-shadow:0 34px 66px -30px rgba(0,0,0,.7)}
.oeuvre .o-art .frame img{width:100%;display:block}
.oeuvre .plist{border-color:rgba(246,241,231,.3)}
.oeuvre .prow{border-color:rgba(246,241,231,.25);color:var(--on-m3-2)}
.oeuvre .prow b{color:var(--paper)}
.oeuvre .pnote{color:var(--on-m3-2)}   /* le gris chaud ne tient pas sur le rouge */
@media(max-width:860px){.oeuvre .o-art{max-width:360px}}
@media(max-width:640px){
  /* de l'air sur les QUATRE côtés du bloc de titre (2026-09-07) : le vertical
     passe de 18 à 32 px minimum, le latéral reste à 15vw — voir la note sur les
     boutons plus bas, c'est lui qui plafonne la marge latérale. */
  .hero:not(.short) .hero-inner{padding:clamp(32px,7vh,60px) clamp(52px,15vw,72px)}
  /* le bloc est centré dans le hero ; la marge le descend d'environ la moitié
     de sa valeur, le centrage répartissant le reste au-dessus */
  .hero:not(.short) .txt{text-align:center;max-width:none;margin-top:52px}
  /* le rythme vertical INTERNE : c'est là que le bloc paraissait serré, les cinq
     éléments se touchant presque. Chaque intervalle est ouvert d'un tiers. */
  .hero:not(.short) h1{margin:20px 0 12px}
  .hero:not(.short) .sub{margin:20px 0 32px}
  /* index seulement : les deux appels restent CÔTE À CÔTE sur téléphone, en deux
     colonnes égales sous le texte centré. Le libellé peut passer à deux lignes
     plutôt que de déborder — les deux boîtes gardent la même hauteur. */
  .hero:not(.short) .cta{flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:stretch;gap:8px}
  .hero:not(.short) .cta .btn{flex:1 1 0;max-width:none;padding:9px 8px;font-size:10px;
    white-space:normal;line-height:1.25;text-align:center;
    display:flex;align-items:center;justify-content:center}
  /* la mention IA et les flèches du carrousel : plus petites au téléphone,
     inchangées au portable (la règle ne vit que sous 640 px) */
  .hero:not(.short) .soon-note{font-size:10px;letter-spacing:.04em;line-height:1.5;margin-top:20px}
  .hero:not(.short) .hero-arrow{width:24px;height:24px;--chev:7px}
  .hero .cta{flex-direction:column;gap:10px}
  .hero .cta .btn{max-width:100%}
  /* le bandeau doré : DEUX lignes au lieu de trois — l'expérience et les horaires
     ensemble, puis l'adresse et les dates ensemble. La taille suit la largeur de
     l'écran pour que chaque ligne tienne sans césure, plafonnée à sa valeur de
     portable. C'est le FRANÇAIS qui fixe la mesure : 46 caractères pour la ligne
     d'adresse, contre 44 en anglais. */
  .hero .strip .in{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;
    align-items:center;gap:5px 12px;min-height:0;padding:10px var(--gutter-narrow);
    font-size:min(12px,calc((100vw - 44px) / 30))}
  .hero .strip .hero-dots{position:static;order:-1;flex:0 0 100%;gap:10px;height:6px;margin-bottom:2px}
  /* `> span` et non `span` : les pastilles du carrousel sont elles aussi des
     span, imbriquées dans .hero-dots. Un sélecteur de descendance les attrapait
     et la dernière pastille passait à 100 % de largeur, ce qui cassait la rangée. */
  .hero .strip .in > span{white-space:nowrap;text-align:center;line-height:1.35}
  .hero .strip .in > span:last-child{flex:0 0 100%}
  .oeuvre .o-art.o-solo{width:calc(100% - 28px);margin-left:auto;margin-right:auto}
  .offer-actions{align-items:flex-start}
  /* try online : même traitement que l'index — bloc descendu, appels côte à côte
     et plus petits, mention et flèches réduites. La marge latérale est ramenée à
     ~16 px parce que le sur-titre doit tenir sur UNE ligne (voir dessous). */
  .experience-hero .hero-inner{padding-left:clamp(16px,4vw,40px);padding-right:clamp(16px,4vw,40px)}
  .experience-hero .txt{text-align:center;max-width:none}
  /* le sur-titre sur une seule ligne : c'est le FRANÇAIS qui fixe la taille,
     64 caractères contre 53 en anglais. La taille suit donc la largeur d'écran
     et reste plafonnée à sa valeur de portable. */
  .experience-hero .mono{display:block;white-space:nowrap;font-size:min(12px,2.2vw)}
  .experience-hero .cta{flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:stretch;gap:8px}
  .experience-hero .cta .btn{flex:1 1 0;max-width:none;padding:9px 8px;font-size:10px;
    white-space:normal;line-height:1.25;text-align:center;
    display:flex;align-items:center;justify-content:center}
  .experience-hero .soon-note{font-size:10px;letter-spacing:.04em;line-height:1.5;margin-top:12px}
  .experience-hero .hero-arrow{width:24px;height:24px;--chev:7px}
}

.atelier-hero .hero-dots{position:static;width:auto;margin-top:18px}
.services-hero .hero-dots{position:static;width:auto;margin-top:18px}
.services-portfolio .pf-ebb{margin-bottom:8px}
.services-portfolio .folio{margin-top:40px}
.services-portfolio .folio-nav{margin-top:0}
/* les repères du carrousel « avant Portrait Bureau » (2026-09-07) : les deux
   grosses flèches encadrées au milieu des côtés sont retirées au profit de deux
   PETITES flèches aux coins hauts. Elles ne disent rien — pas de « swipe », pas
   de compteur : la seule flèche suffit à annoncer qu'il y a une suite.
   Les BOUTONS sont conservés (le script d'i18n.js s'y accroche, et le clavier y
   accède) : seul leur dessin change. Elles se posent dans les CALES latérales de
   la piste, celles que `.folio-track::before/::after` ménagent pour centrer le
   slide — donc à côté de l'image et jamais dessus.
   8 septembre : elles ne sont plus aux coins HAUTS mais au MILIEU de l'image, à
   sa hauteur, et gagnent huit points de taille. Le calage se mesure : l'image
   fait `--slide` de large en 16/10, son centre tombe donc à --slide × 10/16 ÷ 2
   du haut du bloc. Le décalage passe par `margin-top`, où un pourcentage se
   résout sur la LARGEUR du parent — justement la mesure utile — et le
   `translate` annule la hauteur du bouton, quelle que soit sa taille. */
.services-portfolio .folio > .folio-btn{
  top:0;margin-top:calc(var(--slide) * .3125);transform:translateY(-50%);
  width:30px;height:30px;font-size:0;line-height:1;--chev:9px;
  /* 8 septembre : cadre d'encre à toutes les largeurs, comme les repères de hero
     et comme la version large juste dessous. Un repère sans cadre ne se lisait
     pas comme un bouton. */
  border:var(--frame-thin) solid var(--ink);background:var(--paper);box-shadow:none;
  color:var(--ink);opacity:1;transition:.18s}
/* même chevron dessiné que les repères de hero : deux filets d'un carré tourné,
   centrés sur l'encre et non sur la boîte. Voir le commentaire de `.hero-arrow`. */
.services-portfolio .folio > .folio-btn::before{content:"";display:block;
  width:var(--chev);height:var(--chev);
  border-left:var(--frame-thin) solid currentColor;
  border-bottom:var(--frame-thin) solid currentColor}
.services-portfolio .folio > .folio-prev::before{transform:translateX(calc(var(--chev) * .354)) rotate(45deg)}
.services-portfolio .folio > .folio-next::before{transform:translateX(calc(var(--chev) * -.354)) rotate(-135deg)}
@media(hover:hover){
  .services-portfolio .folio > .folio-btn:hover{background:var(--ink);color:var(--paper)}
}
.services-portfolio .folio > .folio-btn:focus-visible{background:var(--paper);color:var(--ink)}
/* les deux repères s'écartent de six points vers l'extérieur : ils mordent la
   marge du `.wrap`, pas la cale de la piste, et respirent donc loin de l'image. */
.services-portfolio .folio > .folio-prev{left:-6px}
.services-portfolio .folio > .folio-next{right:-6px}
/* sous 700 px la piste passe à 86 % : la cale ne fait plus qu'une vingtaine de
   points. Le cadre se resserre pour tenir dedans et ne pas mordre l'image. */
@media(max-width:700px){
  .services-portfolio .folio > .folio-btn{width:26px;height:26px;--chev:8px}
  .services-portfolio .folio > .folio-prev{left:-8px}
  .services-portfolio .folio > .folio-next{right:-8px}
}
/* Sur ÉCRAN LARGE la cale latérale fait plus de 200 px : une flèche de 30 y est
   perdue. Les repères y reprennent donc un vrai cadre d'encre et la taille d'un
   bouton. Le calage vertical est le même qu'au téléphone, au-dessus. */
@media(min-width:901px){
  .services-portfolio .folio > .folio-btn{
    width:44px;height:44px;--chev:13px;
    border:var(--frame-thin) solid var(--ink);background:var(--paper);
    color:var(--ink);opacity:1;
    top:0;margin-top:calc(var(--slide) * .3125);transform:translateY(-50%)}
  /* l'inversion ne suit que le vrai survol : après un clic, le repère reprend son
     dessin dès que le pointeur s'en va, et ne reste pas rempli. */
  @media(hover:hover){
    .services-portfolio .folio > .folio-btn:hover{background:var(--ink);color:var(--paper)}
  }
  .services-portfolio .folio > .folio-btn:focus-visible{background:var(--paper);color:var(--ink)}
}
.services-portfolio .logos{margin-top:12px}
.services-portfolio{padding-top:36px;padding-bottom:0}
.services-places{padding-top:40px}
.services-footer{padding-top:24px}
.services-curation .tag{border:0;background:transparent;padding:0;color:var(--ink);white-space:normal}
.services-curation .tag.on{background:transparent;color:var(--ink)}
.services-curation .tags{flex-direction:column;align-items:flex-start;gap:10px}
.services-curation .tag{display:block;font-size:14px;font-weight:700}
.services-curation .tag::before{content:'\25CF';display:inline-block;margin-right:10px;font-size:8px;vertical-align:middle}
@media(max-width:640px){
  /* L'Atelier : même traitement que l'index — bloc descendu, appels côte à côte
     et plus petits, ligne de faits et flèches réduites. La marge latérale reste
     celle d'origine : le sur-titre « EBB » n'a pas besoin de largeur. */
  .atelier-hero .hero-inner{padding-left:clamp(52px,15vw,72px);padding-right:clamp(52px,15vw,72px)}
  .atelier-hero .txt{text-align:center;max-width:none;margin-top:52px}
  .atelier-hero .cta{flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:stretch;gap:8px}
  .atelier-hero .cta .btn{flex:1 1 0;max-width:none;padding:9px 8px;font-size:10px;
    white-space:normal;line-height:1.25;text-align:center;
    display:flex;align-items:center;justify-content:center}
  .atelier-hero .facts{font-size:10px;letter-spacing:.04em;line-height:1.6;margin-top:18px}
  .atelier-hero .hero-arrow{width:24px;height:24px;--chev:7px}
  .atelier-hero .hero-dots{justify-content:center;gap:10px;margin-top:16px}
  /* « A creative atelier » (2026-09-07) : seul le HAUT de la bande est resserré,
     64 → 32 px. Le bas garde sa mesure : c'est lui qui sépare la section de la
     bande bleue suivante. */
  .band.atelier-studio{padding-top:32px}
  /* « Commission a piece » / « See the whole studio » (2026-09-07) : le `gap`
     n'avait aucun effet — `.cta` seule n'établit pas de contexte flex (seuls
     `.hero .cta`, `.visit .cta`… le font), et ce bloc-ci vit hors du hero. Les
     deux boutons étaient donc deux inline-block empilés, séparés par le seul
     jeu des lignes. On déclare le flex, et le gap se met enfin à compter. */
  .atelier-actions{display:flex;flex-direction:column;align-items:stretch;gap:16px}
  .atelier-actions .btn{width:100%;text-align:center}
  /* Services : idem. Le sur-titre « Services » tient déjà sur une ligne. */
  .services-hero .hero-inner{padding-left:clamp(52px,15vw,72px);padding-right:clamp(52px,15vw,72px)}
  .services-hero .txt{text-align:center;max-width:none;margin-top:52px}
  .services-hero .cta{flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:stretch;gap:8px}
  .services-hero .cta .btn{flex:1 1 0;max-width:none;padding:9px 8px;font-size:10px;
    white-space:normal;line-height:1.25;text-align:center;
    display:flex;align-items:center;justify-content:center}
  .services-hero .facts{font-size:10px;letter-spacing:.04em;line-height:1.6;margin-top:18px}
  .services-hero .hero-arrow{width:24px;height:24px;--chev:7px}
  .services-hero .hero-dots{justify-content:center;gap:10px;margin-top:16px}
}

.home-footer{padding-top:12px}
.atelier-footer{padding-top:8px}

/* ---- la ligne de prix : un fait de cartel, pas un argument ----------------- */
.plist{margin-top:26px;max-width:520px}
.prow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--parchment-1);font-family:var(--serif);font-size:18px;color:var(--muted)}
.prow b{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--ink);text-transform:uppercase;white-space:nowrap}
.pnote{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);margin-top:14px;text-transform:uppercase}

/* ---- la carte de métier : un cartel d'exposition agrandi ------------------- */
.crafts{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px}
@media(max-width:760px){.crafts{grid-template-columns:1fr}}
.craft{border:var(--frame-thin) solid var(--ink);background:var(--paper);padding:34px}
.craft .ce{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.craft h3{font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:19px;letter-spacing:-.01em;margin-bottom:10px}
.craft p{font-family:var(--serif);font-size:16px;color:var(--muted);margin-bottom:16px;max-width:none}
.craft .from{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}

/* AU TÉLÉPHONE, les quatre cartes de métier empilées font quatre écrans à elles
   seules : l'image en 16/10 pleine largeur, puis le texte dessous. On les
   recompose en LIGNES compactes — vignette carrée à gauche, texte à droite — et
   on rapproche les corps. La grille de l'ordinateur ne bouge pas. */
@media(max-width:640px){
  /* plancher à 148 px, et `1fr` aligne les quatre rangées sur la plus haute : la
     carte ne grandit que du strict nécessaire pour que TOUT le texte tienne dans
     le cadre, sans troncature ni débordement. */
  .atelier-studio .crafts{gap:12px;margin-top:32px;grid-auto-rows:1fr}
  .atelier-studio .craft.pic{flex-direction:row;align-items:stretch;min-height:148px}
  .atelier-studio .craft.pic img{width:168px;flex:0 0 168px;aspect-ratio:auto;height:100%;
    border-bottom:0;border-right:var(--frame-thin) solid var(--ink)}
  /* le tableau en cours (2e carte) est peint dans la moitié droite du cliché :
     recadré au centre, la vignette ne montrait que le mur. */
  .atelier-studio .craft.pic:nth-child(2) img{object-position:30% 50%}
  .atelier-studio .craft.pic .body{padding:12px 14px}
  .atelier-studio .craft.pic .ce{font-size:9px;letter-spacing:.16em;margin-bottom:4px}
  .atelier-studio .craft.pic h3{font-size:13px;line-height:1.2;margin-bottom:4px}
  .atelier-studio .craft.pic .body p{font-size:11.5px;line-height:1.32;margin-bottom:6px}
  .atelier-studio .craft.pic .from{font-size:9.5px;letter-spacing:.04em;margin-top:auto}
}

/* ---- la bande EBB : la maison mère parle depuis le sombre ------------------ */
.ebb{background:var(--ink);color:var(--paper)}
.ebb .mark{font-family:var(--mono);font-size:12px;letter-spacing:.5em;color:var(--gilt);text-transform:uppercase;margin-bottom:14px;display:block}
.ebb .big{color:var(--paper)}
.ebb .body-txt{color:var(--paper-soft)}
.ebb .fr{border-color:var(--paper);background:var(--paper)}
/* la bande EBB en fond CLAIR (2026-09-07) — `.ebb.clair` + une teinte ---------
   Motif : la bande EBB ferme la page juste avant le pied, encre lui aussi, et le
   bas de page ne faisait qu'un seul bloc noir. `.clair` porte tout le retournement
   de texte, une seconde classe donne la teinte. Ajouter une teinte ne coûte donc
   qu'une ligne, et les deux pages qui l'emploient ne peuvent pas diverger.
   Sur fond clair l'or est exclu (loi 1) : le sigle EBB et l'italique de voix
   passent en encre, et le corps retrouve le gris chaud — légal sur les deux
   teintes (5,36 sur la crème rosée, 5,69 sur le papier). Le cadre muséal revient
   à l'encre, comme sur toute bande claire.
   index et events gardent leur bande encre. */
.ebb.clair{color:var(--ink)}
.ebb.clair.rosee{background:var(--paper-rose)}   /* experience */
.ebb.clair.papier{background:var(--paper)}       /* atelier    */
.ebb.clair .mark{color:var(--ink)}
.ebb.clair .big{color:var(--ink)}
.ebb.clair .big em{color:inherit}
.ebb.clair .body-txt{color:var(--muted)}
.ebb.clair .fr{border-color:var(--ink);background:var(--ink)}
.ebb.clair .btn-paper-o{border-color:var(--ink);background:transparent;color:var(--ink)}
.ebb.clair .btn-paper-o:hover{background:var(--ink);color:var(--paper)}

/* ---- les formulaires : cartel, bordure encre, chips à inversion ------------ */
form{margin-top:36px;max-width:620px}
.f{margin-bottom:22px}
.f label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.f input,.f textarea,.f select{width:100%;padding:14px;border:var(--frame-thin) solid var(--ink);background:var(--paper);font-family:var(--serif);font-size:17px;color:var(--ink);border-radius:0;-webkit-appearance:none;appearance:none}
.f select{background-image:linear-gradient(45deg,transparent 49%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 49%,transparent 50%);background-position:calc(100% - 21px) 50%,calc(100% - 15px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.f textarea{min-height:130px;resize:vertical}
.checks{display:flex;flex-wrap:wrap;gap:10px}
.checks label{display:flex;gap:9px;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);border:var(--frame-thin) solid var(--ink);background:var(--paper);padding:11px 16px;cursor:pointer;margin:0;transition:.15s;user-select:none}
.checks label:has(input:checked){background:var(--ink);color:var(--paper)}
/* la case : `.f input` (appearance:none) supprime la coche native — la croix est dessinée ici */
.checks input{-webkit-appearance:none;appearance:none;width:14px;height:14px;min-width:14px;
  margin:0;padding:0;border:var(--frame-thin) solid var(--ink);background:var(--paper);border-radius:0}
.checks input:checked{background-image:
  linear-gradient(45deg,transparent 42%,var(--ink) 46%,var(--ink) 54%,transparent 58%),
  linear-gradient(135deg,transparent 42%,var(--ink) 46%,var(--ink) 54%,transparent 58%);
  background-size:10px 10px;background-position:center;background-repeat:no-repeat}
.form-note{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);margin-top:14px;text-transform:uppercase}

/* ---- la visite (bande encre) + le billet ----------------------------------- */
.visit{background:var(--ink);color:var(--paper)}
.visit .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,5vw,70px)}
@media(max-width:860px){.visit .grid{grid-template-columns:1fr}}
.visit .eyebrow{color:var(--gilt)}
.visit .addr{font-family:var(--disp);text-transform:uppercase;font-weight:700;letter-spacing:-.02em;font-size:clamp(34px,5vw,64px);line-height:.9;margin:14px 0 10px}
.visit .body-txt{color:var(--paper-soft)}
.ticket{border:var(--frame-thin) dashed rgba(246,241,231,.5);padding:26px;margin-top:8px;font-family:var(--mono);font-size:13px;line-height:1.9;letter-spacing:.03em}
.ticket .row{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(246,241,231,.18);padding:9px 0}
.ticket .row:last-child{border-bottom:0}
.ticket .k{color:var(--gilt)}
.visit .cta{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:560px){
  .visit .cta{flex-direction:column;align-items:stretch;gap:10px}
  .visit .cta .btn{width:100%;text-align:center}
}
/* variante ROSÉE de la bande visite (index, 2026-09-07) : la bande encre venait
   buter contre le pied de page, encre lui aussi — le bas de la page ne faisait
   qu'un seul bloc noir. Le rose Rococo plein (--m1) a été essayé d'abord : trop
   saturé au contact du noir. C'est donc la crème rosée (--paper-rose), la teinte
   claire du registre, qui détache la bande sans lutter contre le pied.
   Bande CLAIRE, mais assez claire pour garder les DEUX couleurs de texte du fond
   clair : encre (13,67) et gris chaud (5,36) sont tous deux légaux — contrairement
   au rose plein, où seule l'encre tenait. Le sur-titre et le corps retrouvent donc
   le gris chaud, et la hiérarchie ne repose plus sur la seule graisse.
   L'or reste exclu : c'est un fond clair (loi 1).
   La variante ne touche PAS visiter.html, qui garde sa bande encre. */
.visit.rosee{background:var(--paper-rose);color:var(--ink)}
.visit.rosee .eyebrow{color:var(--muted)}
.visit.rosee .body-txt{color:var(--muted)}
/* les deux appels : l'inversion encre/papier, comme sur toute bande claire */
.visit.rosee .btn-paper{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.visit.rosee .btn-paper:hover{background:transparent;color:var(--ink)}
.visit.rosee .btn-paper-o{border-color:var(--ink);background:transparent;color:var(--ink)}
.visit.rosee .btn-paper-o:hover{background:var(--ink);color:var(--paper)}
/* le billet : même dessin, filets tirés vers l'encre au lieu du crème. Les clés
   passent au gris chaud, comme tout libellé mono sur fond clair, et les valeurs
   restent en encre : le billet garde ses deux tons, l'or n'y est plus nécessaire. */
.visit.rosee .ticket{border-color:rgba(25,21,16,.4)}
.visit.rosee .ticket .row{border-bottom-color:rgba(25,21,16,.18)}
.visit.rosee .ticket .k{color:var(--muted)}

/* ---- listes serif centrées (déjà en place, citations de lieux) -------------- */
.placelist{font-family:var(--serif);font-size:clamp(20px,2.4vw,26px);line-height:2;text-align:center}
.placelist .when{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-left:10px}

/* ---- pied de page ----------------------------------------------------------- */
footer{background:var(--ink);color:var(--parchment-2);padding:70px 0 40px;text-align:center}
footer img{height:96px;filter:invert(1) brightness(1.9);opacity:.9;margin:0 auto 22px}
footer .nap{font-family:var(--mono);font-size:12px;line-height:2;letter-spacing:.04em}
footer .nap b{color:var(--paper)}
footer .fnav{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-top:18px}
footer .fnav a{color:var(--parchment-2);text-decoration:none}
footer .fnav a:hover{color:var(--paper)}
footer .fnav .sep{margin:0 8px;color:var(--parchment-4)}
/* téléphone : les quatre destinations tiennent sur UNE ligne — le corps suit la
   largeur de l'écran, car le libellé français est nettement plus long. */
@media(max-width:700px){
  footer .fnav{white-space:nowrap;font-size:clamp(7.5px,2.4vw,12px);letter-spacing:0}
  footer .fnav .sep{margin:0 2px}}
footer .partners{font-family:var(--mono);font-size:11px;color:var(--parchment-4);margin-top:20px;line-height:1.9;letter-spacing:.04em}
footer .domain{font-family:var(--mono);font-size:12px;color:var(--gilt);margin-top:14px;letter-spacing:.1em}
footer .legal{font-family:var(--mono);font-size:10.5px;color:var(--parchment-4);margin-top:18px;line-height:1.9}
footer .social-icons{display:flex;gap:14px;justify-content:center;margin-top:16px}
footer .social-icons a{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--parchment-4);display:flex;align-items:center;justify-content:center;transition:.2s;color:var(--parchment-1)}
footer .social-icons a:hover{border-color:var(--gilt);color:var(--gilt);transform:translateY(-2px)}
footer .social-icons svg{width:18px;height:18px;fill:currentColor}

/* ---- la bande des financeurs au pied (30 août) -------------------------------
   Reprise du deck de présentation (p. 1) : EBB, France 2030, Europe Créative.
   Ce sont des logos officiels qu'on ne retouche pas :
   `filter:none` annule l'inversion que `footer img` applique au logotype PB, et
   les chartes France 2030 / emblème européen interdisent de les recolorer. ----- */
footer .funders{display:flex;flex-wrap:wrap;gap:22px 44px;align-items:center;justify-content:center;margin-top:30px}
/* compensation OPTIQUE : le fichier UE porte son texte à droite du drapeau ; centré au
   pixel, le groupe paraît tiré à gauche (mesuré 2026-09-01 : géométrie 0 px d'écart).
   On décale la masse visuelle vers l'axe. Desktop seulement. */
@media(min-width:701px){footer .funders{transform:translateX(52px)}}
footer .funders img{height:52px;width:auto;max-width:300px;object-fit:contain;filter:none;opacity:1;margin:0}
footer .funders img[alt="Co-funded by the European Union"]{height:46px;max-width:340px}
/* France 2030 : variante COULEUR, bleu et rouge sur fond blanc (.jpg, pas de
   transparence) : retenue le 2026-09-10 en alignant les cinq pages sur l'index.
   Elle pose donc un carré CLAIR dans le pied encre, à la différence de l'emblème
   européen qui est en négatif : c'est assumé. Carrée, elle lit plus petit à hauteur
   égale : on la monte d'un cran. */
footer .funders img[alt="France 2030"]{height:64px}
@media(max-width:700px){footer .funders{gap:16px 26px}
  footer .funders img{height:38px}
  footer .funders img[alt="Co-funded by the European Union"]{height:34px}
  footer .funders img[alt="France 2030"]{height:46px}}
/* mention obligatoire du financement, sous les logos */
footer .funding-note{font-family:var(--mono);font-size:10.5px;color:var(--parchment-3);margin-top:14px;line-height:1.9;letter-spacing:.04em}

/* ---- la modale de contact ----------------------------------------------------- */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(20,17,11,.74);backdrop-filter:blur(3px);padding:24px}
.modal[hidden]{display:none}
.modal-card{position:relative;background:var(--paper);color:var(--ink);max-width:460px;width:100%;padding:clamp(32px,5vw,52px);text-align:center;box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.modal-close{position:absolute;top:10px;right:14px;background:none;border:0;font-family:var(--disp);font-size:26px;line-height:1;cursor:pointer;color:var(--muted)}
.modal-close:hover{color:var(--ink)}
.modal-card .eyebrow{color:var(--muted)} /* loi 1 : plus d'or en texte sur clair */
.modal-lead{font-family:var(--serif);font-size:18px;color:var(--muted);margin:8px 0 16px}
.modal-mail{font-family:var(--disp);font-weight:700;text-transform:none;letter-spacing:-.01em;font-size:clamp(20px,3.4vw,28px);color:var(--ink);border-bottom:2px solid var(--gilt);padding-bottom:4px;text-decoration:none}
.modal-mail:hover{opacity:.6}

/* ==========================================================================
   Composants v3 — pages de vente (apport 0003)
   Aucune couleur ni mesure nouvelle : tout vient de tokens.css.
   ========================================================================== */

/* ---- la carte d'offre : un cartel d'exposition ouvert par une image ------- */
.crafts.offers{grid-template-columns:1fr 1fr}
@media(max-width:860px){.crafts.offers{grid-template-columns:1fr}}
.craft.pic{padding:0;display:flex;flex-direction:column}
.craft.pic img{width:100%;aspect-ratio:16/10;object-fit:cover;border-bottom:var(--frame-thin) solid var(--ink)}
.craft.pic .body{padding:28px 30px 30px;display:flex;flex-direction:column;flex:1}
.craft.pic .body p{margin-bottom:14px;max-width:none}
.craft.pic h3{margin-bottom:10px}
/* bloc de prix : un filet, le prix en display, une sous-ligne en cartel */
.craft .price{font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:15px;
  letter-spacing:-.01em;color:var(--ink);padding-top:14px;border-top:1px solid var(--parchment-1);margin-bottom:18px}
.craft .price small{display:block;font-family:var(--mono);font-size:11px;font-weight:400;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.craft .btn{margin-top:auto;align-self:flex-start}
/* le bouton en attente d'une carte suit la même règle d'épinglage */
.craft .btn.soon{margin-top:auto;align-self:flex-start}

/* ---- la liste d'arguments : losange + premiers mots en display ------------ */
.ticks{list-style:none;margin:22px 0 0;padding:0}
.ticks li{position:relative;padding-left:24px;margin-bottom:10px;font-family:var(--serif);
  font-size:18px;color:var(--muted);max-width:56ch}
.ticks li::before{content:'\25C6';position:absolute;left:0;top:6px;font-size:9px;color:var(--muted)}
.ticks li b{font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:14px;
  letter-spacing:-.01em;color:var(--ink)}
/* sur fond sombre, le losange passe à l'or (loi 1 : jamais d'or sur clair) */
.ebb .ticks li,.visit .ticks li,.process .ticks li{color:var(--paper-soft)}
/* v4 : l'or ne tient que sur l'ENCRE (7,50). Sur le vert il ferait 2,53, donc la
   bande verte prend sa teinte de bande, comme la bande bleue prend la sienne. */
.ebb .ticks li::before,.visit .ticks li::before{color:var(--gilt)}
.process .ticks li::before{color:var(--on-m5-1)}
.ebb .ticks li b,.visit .ticks li b,.process .ticks li b{color:var(--paper)}

/* ---- la pastille : cartel encadré ; l'accent se fait par inversion -------- */
.tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);border:var(--frame-thin) solid var(--ink);background:var(--paper);
  padding:9px 14px;white-space:nowrap}
.tint .tag{background:var(--paper)}
.tag.on{background:var(--ink);color:var(--paper)}
/* variante « liste simple » : la même énumération, sans cadres, intégrée au texte */
.tags.plain{display:block;margin-top:16px;max-width:760px}
.tags.plain .tag,.tint .tags.plain .tag{border:0;background:none;padding:0;display:inline;
  white-space:normal;color:var(--muted);line-height:2}
.tags.plain .tag:not(:last-child)::after{content:" \00B7\00A0 "}
/* « A creative atelier » : l'énumération des métiers, centrée et appuyée. */
.atelier-studio .tags.plain{text-align:left}
.atelier-studio .tags.plain .tag{font-weight:700;color:var(--ink);font-size:14px}
/* la section entière est alignée à gauche : titre, chapô, cartes et actions */
.atelier-studio{text-align:left}
.atelier-studio .cta{justify-content:center}

/* ---- la galerie carrée ---------------------------------------------------- */
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}
@media(max-width:700px){.g4{grid-template-columns:1fr 1fr}}
.g4 img{aspect-ratio:1/1;object-fit:cover;width:100%;border:var(--frame-thin) solid var(--ink)}

/* ---- la barre d'action collée, mobile uniquement --------------------------
   RETIRÉE des cinq pages le 2026-09-07 : le bandeau restait devant le contenu
   à chaque défilement. Le composant est conservé ici, sans emploi, pour qu'un
   retour ne coûte qu'un `<div class="stickybar">` dans la page. La réserve de
   66 px au bas du body est SUPPRIMÉE : sans barre, elle laissait un vide. --- */
.stickybar{display:none}
@media(max-width:760px){
  .stickybar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:70;
    border-top:var(--frame-thin) solid var(--ink);background:var(--paper)}
  .stickybar a{flex:1;text-align:center;padding:18px 6px;font-family:var(--disp);
    font-size:12px;letter-spacing:.02em;text-transform:uppercase;font-weight:600;
    text-decoration:none;color:var(--ink)}
  .stickybar a.b{background:var(--ink);color:var(--paper)}
}

/* ==========================================================================
   Composants v4 — les fonds de bande et deux variantes (apport 0004)
   Quatre bandes de couleur au registre : rose Rococo (claire, texte encre),
   bleu Directoire assombri, vert Empire, rouge Révolution. Plus une teinte
   claire, la crème rosée. Le rose sert brut : aucun token pour lui.
   ========================================================================== */

/* ---- la bande rose : « ce que vous obtenez » ------------------------------ */
/* Première bande CLAIRE du registre, et première à porter de l'ENCRE. Le rose
   Rococo brut (--m1, Louis XV) : 4,84 sous de l'encre, contre 3,33 sous du
   crème, 1,90 sous du gris chaud et 1,55 sous de l'or. Tout le texte y est donc
   en encre pure : la loi 3 ne s'applique pas ici, parce que son procédé
   symétrique (encre poussée vers la bande) tombe déjà sous le seuil à 8 %
   (4,44). La hiérarchie se fait par la taille et la graisse, pas par la teinte.
   Le cadre de l'image et le bouton restent en encre, comme sur fond clair. */
.preuve{background:var(--m1);color:var(--ink)}
.preuve .eyebrow{color:var(--ink)}
.preuve .body-txt{color:var(--ink)}
.preuve .ticks li{color:var(--ink)}
.preuve .ticks li::before{color:var(--ink)}
.preuve .p-step p{color:var(--ink)}   /* le gris chaud ne tient pas sur le rose (1,90) */
.preuve .subnote{color:var(--ink)}

/* ---- la bande bleue : le sur-mesure et les segments ----------------------- */
/* Le bleu du Directoire assombri de 30 %, qui porte du crème (6,16) et les
   teintes --on-m4-*. ⚠ Interdite au contact du bandeau doré : elle ne sert donc
   que sur les pages satellites, où le hero n'a pas de bandeau. L'or n'y écrit
   pas non plus (2,86) : le losange y prend la teinte de la bande. */
.epoque{background:var(--m4-deep);color:var(--paper)}
.epoque .eyebrow{color:var(--on-m4-1)}
.epoque .big{color:var(--paper)}
.epoque .body-txt{color:var(--on-m4-2)}
.epoque .ticks li{color:var(--on-m4-2)}
.epoque .ticks li b{color:var(--paper)}
.epoque .ticks li::before{color:var(--on-m4-1)}
.epoque .fr{border-color:var(--paper);background:var(--paper)}
.epoque .p-num{border-color:var(--paper);color:var(--paper)}
.epoque .p-ph{border-color:rgba(246,241,231,.18)}
.epoque .p-step h3{color:var(--paper)}
.epoque .p-step p{color:var(--on-m4-2)}
.epoque .subnote{color:var(--on-m4-2)}
.epoque .placelist{color:var(--on-m4-2)}
.epoque .placelist .when{color:var(--on-m4-1)}

/* ---- le gris de cimaise : la grille de portraits comme un accrochage ------ */
/* Seul fond NEUTRE du registre, au milieu d'une palette entièrement chaude.
   C'est voulu : le gris fait reculer le fond et avancer les portraits, comme
   une cimaise de musée. Le texte y garde ses couleurs de fond clair, encre
   14,53 et gris chaud 5,69. */
.stone{background:var(--paper-stone)}

/* ---- la crème rosée : la respiration chaude ------------------------------- */
/* Une teinte claire de plus, entre la crème sourde et la couleur pleine. Le
   texte y garde ses couleurs de fond clair : encre et gris chaud, tous deux
   légaux (13,67 et 5,36). Sert à rompre l'alternance crème / crème sourde des
   pages satellites, notamment sous les formulaires. */
.tint-rose{background:var(--paper-rose)}

/* ---- la photographie de lieu : pleine largeur de lecture ------------------ */
/* La bande EBB montrait l'atelier dans une demi-colonne. Un lieu ne se lit pas
   à 520 px : le cadre muséal est gardé, l'image prend la largeur du contenu et
   son cadrage devient panoramique. Sous 640 px, retour au 4/3 (plus de lieu,
   moins de bande noire). */
.fr.wide{margin-top:44px}
.fr.wide img{aspect-ratio:16/9;object-fit:cover;object-position:50% 54%}
@media(max-width:640px){.fr.wide img{aspect-ratio:4/3}}

/* ---- le cadre d'époque sur les cartes d'offre ----------------------------- */
/* La rime avec la grille de la série, où chaque vignette porte un cadre de 8 px
   en couleur d'époque : les quatre offres portent le même, dans le même ordre.
   Un filet haut seul avait été essayé : au-dessus d'une image de 16/10, il ne
   se lit pas. Décoratif, aucun texte ne se pose dessus, donc --m2 est légal ici
   alors qu'il est illégal en fond de bande. */
.crafts.offers .craft{border:var(--frame-series) solid var(--m1)}
.crafts.offers .craft:nth-child(2){border-color:var(--m2)}
.crafts.offers .craft:nth-child(3){border-color:var(--m3)}
.crafts.offers .craft:nth-child(4){border-color:var(--m4)}
.crafts.offers .craft.pic img{border-bottom-color:var(--ink)}

/* ==========================================================================
   Composants v5 — la page qui annonce (apport 0005)
   Trois objets : le bouton en attente, les deux chemins, la liste de lieux.
   Aucune couleur en dur. Le bouton en attente est mesuré sur CHAQUE fond où il
   sert : gris chaud sur clair (6,33 / 5,43 / 5,36), parchemin sur encre (7,68) —
   le gris chaud sur encre ne ferait que 2,55 et serait illégal.
   ========================================================================== */

/* ---- le bouton en attente : le premier composant qui dit « pas encore » ---- */
.btn.soon{background:transparent;border-style:dashed;border-color:var(--muted);
  color:var(--muted);cursor:not-allowed;pointer-events:none}
.btn.soon:hover{background:transparent;color:var(--muted)}
/* sur encre, le gris chaud est illégal (2,55) : c'est le parchemin qui parle */
.hero .btn.soon,.ebb .btn.soon,.visit .btn.soon{border-color:var(--parchment-3);color:var(--parchment-2)}
/* la mention d'horizon fait partie du composant : un bouton grisé sans elle se
   lit comme une panne */
.soon-note{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-top:14px}
.hero .soon-note,.ebb .soon-note{color:var(--parchment-2)}
.tint-rose .soon-note{color:var(--muted)}
/* sur les bandes colorées, le gris chaud est illégal : teinte de bande (loi 3) */
.oeuvre .soon-note{color:var(--on-m3-2)}
.process .soon-note{color:var(--on-m5-2)}
.oeuvre .btn.soon{border-color:var(--on-m3-1);color:var(--on-m3-2)}
.process .btn.soon{border-color:var(--on-m5-1);color:var(--on-m5-2)}

/* ---- les deux chemins : ce qui est ouvert, ce qui ne l'est pas encore ------ */
/* Le chemin disponible porte un filet plein, celui à venir un filet tireté.
   Aucune opacité : elle casserait les contrastes mesurés. */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,58px);margin-top:44px}
@media(max-width:760px){.paths{grid-template-columns:1fr;gap:38px}}
.path{border-top:var(--frame-series) solid var(--ink);padding-top:20px}
.path.soon{border-top-style:dashed}
.path-when{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.path h3{font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:19px;
  letter-spacing:-.01em;margin:10px 0 0;line-height:1.15}
.path-steps{list-style:none;counter-reset:pstep;margin:24px 0 0;padding:0}
.path-steps li{counter-increment:pstep;position:relative;padding-left:38px;margin-bottom:20px}
.path-steps li::before{content:counter(pstep);position:absolute;left:0;top:1px;
  width:26px;height:26px;border:var(--frame-thin) solid var(--ink);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:12px;color:var(--ink)}
.path-steps b{display:block;font-family:var(--disp);text-transform:uppercase;
  font-weight:700;font-size:14px;letter-spacing:-.01em;margin-bottom:5px}
.path-steps span{font-family:var(--serif);font-size:16px;color:var(--muted);display:block;max-width:38ch}
/* sur la bande verte, la loi 3 s'applique : crème et teintes de bande */
.process .path{border-top-color:var(--paper)}
.process .path-when{color:var(--on-m5-1)}
.process .path h3{color:var(--paper)}
.process .path-steps li::before{border-color:var(--paper);color:var(--paper)}
.process .path-steps b{color:var(--paper)}
.process .path-steps span{color:var(--on-m5-2)}

/* ---- le filaire d'appareil : un schéma, pas une imitation ----------------- */
/* EXCEPTION assumée au motif « angles vifs » (v1 §2) : un rectangle à angles
   vifs ne se lit pas comme un téléphone. Le filaire porte donc un arrondi, et
   il est le seul objet du registre dans ce cas. Trait de 1,5 px, aucune ombre,
   aucun détail réaliste.
   Ce qui fait lire « appareil », ce sont trois choses et pas le dessin :
   la PROPORTION (9/17 pour le téléphone, 16/10 pour l'ordinateur), le PIED
   plus large que l'écran, et l'image qui REMPLIT la dalle au lieu d'être
   encadrée dedans. */
.screens{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(30px,5vw,72px);
  align-items:end;margin-top:52px}
@media(max-width:860px){.screens{grid-template-columns:1fr;gap:40px}}
.devices{display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,46px);align-items:flex-end}

/* le tirage au mur : contour d'un trait, comme les filaires, pour que les trois
   objets appartiennent au même dessin. Cadrage fixe : l'emplacement garde sa
   forme quelle que soit l'image qu'on y dépose. */
.onwall{margin:0}
.onwall img{width:100%;display:block;border:1.5px solid var(--ink);
  aspect-ratio:5/7;object-fit:cover}
.wire{flex:0 0 auto}
.wire .glass{border:1.5px solid var(--ink);background:var(--paper)}
.wire .view{overflow:hidden;background:var(--ink)}
.wire img{display:block;width:100%}
.wire .cartel{font-family:var(--mono);font-size:9px;letter-spacing:.05em;line-height:1.6;
  color:var(--paper-soft);background:var(--ink);padding:7px 8px 8px}
.wire .cartel b{display:block;font-family:var(--serif);font-style:italic;font-size:11.5px;
  letter-spacing:0;text-transform:none;color:var(--paper);margin-bottom:2px}
.wire-label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-top:14px;text-align:center}

/* le téléphone : haut et étroit, la dalle remplie bord à bord */
.wire.phone{width:clamp(140px,16vw,182px)}
.wire.phone .glass{border-radius:18px;padding:6px}
.wire.phone .bar{width:26px;height:2.5px;background:var(--muted);border-radius:2px;margin:1px auto 6px}
.wire.phone .view{aspect-ratio:9/17;border-radius:9px;display:flex;flex-direction:column}
.wire.phone .view img{flex:1;min-height:0;height:100%;object-fit:cover}
.wire.phone .cartel{flex:0 0 auto}

/* l'ordinateur : dalle 16/10, et un PIED PLUS LARGE que l'écran */
.wire.laptop{width:clamp(250px,36vw,430px)}
.wire.laptop .glass{border-radius:5px;padding:6px}
.wire.laptop .view{aspect-ratio:16/10;border-radius:2px;display:grid;
  grid-template-columns:.52fr 1fr;gap:9px;padding:9px;align-items:start}
.wire.laptop .view img{aspect-ratio:3/4;height:100%;object-fit:cover}
.wire.laptop .cartel{background:transparent;padding:0;font-size:8.5px}
/* la charnière : le trait du haut du pied traverse toute sa largeur et vient
   couvrir le bord bas de la dalle. Sans lui, les deux traits s'arrêtent dans le
   vide et l'objet se lit comme deux rectangles empilés. */
.wire.laptop .foot{height:9px;border:1.5px solid var(--ink);
  border-radius:0 0 3px 3px;margin:-1.5px -7% 0;position:relative}
.wire.laptop .foot::after{content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:16%;height:2.5px;background:var(--ink);border-radius:0 0 3px 3px}
@media(max-width:560px){.screens{gap:32px}.wire.laptop{width:100%}}

/* ---- la liste de lieux à état : l'état est une donnée, jamais une phrase --- */
/* C'est ce composant qui rend la bascule du 1er octobre gratuite : on change un
   attribut, pas une copie. Le lieu ouvert se marque PAR INVERSION (loi 1). */
.places{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.place{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  border:var(--frame-thin) solid var(--ink);color:var(--ink);padding:9px 14px;white-space:nowrap}
.place .state{margin-left:9px}
.process .place{border-color:var(--on-m5-1);color:var(--on-m5-2)}
.process .place.on{background:var(--paper);color:var(--m5);border-color:var(--paper)}

/* ---- appoints ------------------------------------------------------------- */
/* liste de lieux, centrée, en serif (déjà v2) : variante sur fond sombre */
.ebb .placelist{color:var(--paper-soft)}
.ebb .placelist .when{color:var(--gilt)}
/* note sous une grille de prix ou une pastille de thème */
.subnote{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin-top:16px;max-width:70ch}

/* ---- apparition au défilement --------------------------------------------------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}html{scroll-behavior:auto}}

/* ---- v5 (apport 0005, à écrire) : le carrousel manuel `.folio` -----------
   Services §5 « avant Portrait Bureau ». Défilement natif (scroll-snap), deux
   flèches, un compteur, pas d'autoplay, boucle aux extrémités. Un slide = une
   image cadrée encre + un cartel mono + un titre display + une ligne serif.
   Aucune couleur en dur : encre, papier, gris chaud. Angles vifs. ------------- */
.folio{margin-top:44px;position:relative;--slide:min(72%,680px)}
.folio-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;outline:none}
.folio-track::-webkit-scrollbar{display:none}
.folio-track:focus-visible{outline:var(--frame-thin) solid var(--ink);outline-offset:6px}
.folio-slide{flex:0 0 var(--slide);scroll-snap-align:center;margin:0}
/* Depuis le 31 août le slide se CENTRE (demande de Greg : « en centrant l'image sur
   laquelle tu t'arrêtes »). D'où deux cales symétriques et non plus une seule à la
   fin : sans la cale de tête, le premier slide ne peut jamais atteindre le centre,
   sans celle de queue, le dernier non plus, et le compteur ne les atteint pas. */
.folio-track::before,
.folio-track::after{content:"";flex:0 0 calc((100% - var(--slide)) / 2)}
.folio-slide .ph{aspect-ratio:16/10;overflow:hidden;border:var(--frame-thin) solid var(--ink);background:var(--ink)}
.folio-slide .ph img{width:100%;height:100%;object-fit:cover;display:block}
.folio-slide .cap{margin-top:14px}
.folio-slide .ce{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.folio-slide h3{font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:19px;letter-spacing:-.01em;line-height:1.1;margin:0 0 6px}
.folio-slide h3 .by{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;font-size:17px;color:var(--ink);margin-left:8px;white-space:nowrap}
.folio-slide p{font-family:var(--serif);font-size:15px;color:var(--muted);margin:0;max-width:56ch}
/* 31 août, demande de Greg : les flèches passent sur les CÔTÉS, comme celles des hero,
   et ne restent plus sous la piste. Seul le compteur reste dessous. Elles sont centrées
   sur la hauteur du bloc, pas sur celle de l'image : les légendes n'ont pas toutes la
   même hauteur, et un repère qui saute d'un projet à l'autre se remarque plus qu'un
   repère légèrement bas. */
.folio > .folio-btn{position:absolute;top:50%;bottom:auto;z-index:4;
  transform:translateY(-50%);
  background:var(--paper);box-shadow:0 6px 22px -8px rgba(20,17,11,.55)}
.folio > .folio-prev{left:calc(var(--gutter) * -1 + 4px)}
.folio > .folio-next{right:calc(var(--gutter) * -1 + 4px)}
@media(max-width:1180px){.folio > .folio-prev{left:6px}.folio > .folio-next{right:6px}}
.folio-nav{display:flex;align-items:center;gap:12px;margin-top:24px}
.folio-btn{width:44px;height:44px;border:var(--frame-thin) solid var(--ink);background:transparent;color:var(--ink);font-family:var(--disp);font-size:18px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.18s;padding:0}
.folio-btn:hover{background:var(--ink);color:var(--paper)}
.folio-count{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);margin-left:auto}
/* ---- v5 : le badge « ouvert en ce moment » (visiter, 31 août) -----------------
   Il est CALCULÉ à l'heure de Paris, jamais écrit en dur : la boutique ouvre du jeudi
   au dimanche, 10 h-19 h, jusqu'au 30 septembre. Un « ouvert » figé mentirait quatre
   jours sur sept, et la règle de cette landing est qu'on ne publie pas ce qu'on ne
   peut pas tenir. Les deux états sont dans le DOM, le script en démasque un. ------- */
.openbadge{display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--paper);background:rgba(20,17,11,.5);border:var(--frame-thin) solid var(--gilt);
  padding:7px 13px;backdrop-filter:blur(2px)}
/* 8 septembre : DEUX pastilles côte à côte, l'état puis la prochaine ouverture.
   Le cadre des deux est BLANC — c'est la pastille de couleur, verte ou rouge,
   qui porte l'état, et deux cadres teintés se disputeraient le regard. */
/* la rangée se détache des deux appels qui la précèdent : collée, elle se lisait
   comme une quatrième et une cinquième touche du même groupe. */
.openrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:22px 0 14px}
.openrow .openbadge{margin:0}
.openbadge{border-color:var(--paper)}
/* INDISPENSABLE : `.openbadge` pose `display:inline-flex`, et une règle d'auteur
   bat celle du navigateur pour `[hidden]` à spécificité égale. Sans cette ligne
   l'attribut ne cache rien et les trois pastilles s'affichent ensemble — dont
   « ouvert en ce moment » un mardi. */
.openbadge[hidden]{display:none}
.openbadge b{font-weight:400;color:#5fbf7a}
/* la seconde pastille est une information, pas un état : ni pastille ni couleur. */
.openbadge.is-next{color:var(--paper)}
.openbadge .dot{width:8px;height:8px;border-radius:50%;background:#5fbf7a;flex:0 0 8px;
  box-shadow:0 0 0 0 rgba(95,191,122,.7);animation:pouls 2.4s infinite}
/* fermé : pastille et libellé passent au ROUGE, en pendant du vert. Le point ne
   bat pas — le battement dit « en ce moment même », il n'a rien à dire ici. */
.openbadge.is-shut b{color:#e0705a}
.openbadge.is-shut .dot{background:#c4553f;animation:none;box-shadow:none}
.visit-hero .openbadge{max-width:100%;box-sizing:border-box}
@keyframes pouls{0%{box-shadow:0 0 0 0 rgba(95,191,122,.6)}70%{box-shadow:0 0 0 9px rgba(95,191,122,0)}100%{box-shadow:0 0 0 0 rgba(95,191,122,0)}}
@media(prefers-reduced-motion:reduce){.openbadge .dot{animation:none}}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---- v5 : le carrousel de hero (31 août) --------------------------------------
   Plusieurs `.hero-bg` empilés dans `.hero-slides`, en fondu enchaîné. Le premier
   est seul à porter `src` ; les suivants attendent dans `data-src` et ne sont
   chargés qu'après le `load` de la page. Sans ça, un hero de six images pèserait
   tout de suite un mégaoctet, et la 0.3.2 avait justement ramené le premier écran
   de 3,7 Mo à 560 Ko.
   L'avance automatique s'arrête au survol, au focus clavier, quand l'onglet passe
   en arrière-plan, et ne démarre pas du tout si le visiteur a demandé moins
   d'animations : un fond qui bouge tout seul sans échappatoire est un défaut. --- */
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slides .hero-bg{opacity:0;transition:opacity .85s ease}
.hero-slides .hero-bg.is-on{opacity:1}
/* La 1re diapositive garde le cadrage réglé pour elle (l'index la pousse à 14 %).
   Les suivantes sont des photos VERTICALES recadrées en large : on les recentre et
   on retire l'agrandissement de 1,15, sinon le sujet part sous l'ombre de gauche.
   Vérifié en pixels le 31 août : le recadrage centré tient, pas besoin de bandes. */
.hero-slides .hero-bg:not(:first-child){object-position:50% 42%;transform:none}
/* Deux photos verticales que le cadrage à 42 % rendait illisibles (Greg, 31 août) :
   à mi-hauteur, l'une donnait un portrait sombre en très gros plan, l'autre noyait
   le terminal. Leur sujet est EN HAUT du cadre, on cale donc dessus. La source fait
   1 200 px pour une boîte de 1 440 : elle est mise à l'échelle sur la largeur, donc
   seul l'axe vertical a un effet ici. */
.hero-slides .hero-bg[data-src$="shop_terminal_screen.jpg"],
.hero-slides .hero-bg[src$="shop_terminal_screen.jpg"],
.hero-slides .hero-bg[data-src$="shop_prints_table.jpg"],
.hero-slides .hero-bg[src$="shop_prints_table.jpg"]{object-position:50% 0%}
/* Le panneau de rue est HAUT dans son cadre et se lit de haut en bas : à 42 % son
   dernier tiers était coupé, avec la flèche et les deux pastilles. Calé à 55 %, il
   tient en entier, et il reste à droite du titre. */
.hero-slides .hero-bg[data-src$="shop_street_sign.jpg"],
.hero-slides .hero-bg[src$="shop_street_sign.jpg"]{object-position:50% 55%}
/* `is-screens` (experience) : les diapositives sont des MAQUETTES d'interface, fond
   blanc et texte noir. En fond perdu, leur texte entre en collision avec le titre
   du hero, mesuré illisible le 31 août. On les pose donc ENTIÈRES sur l'encre,
   calées à droite : le titre garde sa moitié sombre, l'écran garde sa lisibilité,
   et les marges d'encre se lisent comme un cadre, pas comme un défaut. */
.hero-slides.is-screens{z-index:2}   /* au-dessus de l'ombre, sinon l'écran est terni ;
   le texte du hero reste devant, il est z-index 2 lui aussi mais plus loin dans le DOM */
.hero-slides.is-screens .hero-bg{object-fit:contain;object-position:88% 50%;transform:none;
  padding:clamp(24px,4vh,54px) 0}
.experience-hero .hero-inner{z-index:4}
.experience-hero .btn.soon{border-style:solid}
.experience-page .btn.soon{border-style:solid}
.experience-footer{padding-top:12px}
@media(max-width:900px){.hero-slides.is-screens .hero-bg{object-position:50% 76%}}
/* 8 septembre — AU TÉLÉPHONE, le carrousel des maquettes est DANS la colonne de
   texte, entre la promesse et les appels : on lit la phrase, on voit l'écran
   qu'elle décrit, puis on agit. Il est donc écrit dans le DOM à cette place, à
   l'intérieur de `.txt`, et l'ancienne colonne de droite est reconstituée par
   le positionnement absolu au-dessus de 900 px (voir plus bas) : l'ordinateur
   ne change pas d'un pixel.
   La boîte est une grille de deux rangs — l'image, puis les pastilles. Les
   flèches sont posées dans le RANG DE L'IMAGE (`grid-area:1/1`) et centrées
   dessus par `align-self`, sans arithmétique. Les trois maquettes font toutes
   1600 × 1040 : ce rapport donné à la boîte, elle épouse exactement l'image,
   sans marge d'encre résiduelle, ce qui permet de coller les flèches à SON
   bord et non à celui de la bande. */
@media(max-width:900px){
  .experience-hero.short{min-height:0}
  .experience-hero .hero-inner{justify-content:center}
  .experience-hero .txt{max-width:none;margin-inline:auto;text-align:center}
  .experience-hero .txt .sub{max-width:62ch;margin-inline:auto}
  .experience-hero .cta{justify-content:center}
  .experience-hero .hero-shade{display:none}
  .xp-shot{display:grid;grid-template-columns:1fr;
    width:min(660px,100%);margin:22px auto 26px}
  .xp-shot .hero-slides.is-screens{grid-area:1/1;position:relative;inset:auto;
    width:100%;aspect-ratio:1600 / 1040}
  .xp-shot .hero-slides.is-screens .hero-bg{object-position:50% 50%;padding:0}
  .xp-shot .hero-arrow{grid-area:1/1;position:relative;top:auto;left:auto;right:auto;
    transform:none;align-self:center;z-index:3}
  .xp-shot .hero-prev{justify-self:start;margin-left:clamp(6px,1.4vw,16px)}
  .xp-shot .hero-next{justify-self:end;margin-right:clamp(6px,1.4vw,16px)}
  .xp-shot .hero-dots{grid-area:2/1;position:static;width:auto;margin-top:16px}
}
/* au-dessus de 900 px, on RETROUVE les deux colonnes franches de la 0.3.3 : le
   texte plafonné à 48 % à gauche, les maquettes dans la moitié droite. Le
   carrousel est désormais un enfant de `.txt` ; sa boîte est donc sortie du flux
   et calée sur `.hero-inner`, qui est la laisse centrée (`position:relative`).
   `right:0` est le bord droit de cette laisse : le même repère que l'ancien
   `--xp-edge`, mais sans avoir à le recalculer depuis la fenêtre. */
@media(min-width:901px){
  .experience-hero .txt{max-width:calc(48% - 24px)}
  .xp-shot{position:absolute;top:0;bottom:0;right:0;margin:0;display:block;
    width:min(52vw, calc(var(--wrap) * .52))}
  .xp-shot .hero-slides.is-screens{position:absolute;inset:0;width:auto;height:auto;
    aspect-ratio:auto}
  /* la maquette est en `contain` dans une boîte plus HAUTE que large pour son
     rapport : c'est donc la largeur qui la dimensionne, et elle touchait les
     deux bords de la colonne — les flèches lui passaient dessus. On lui réserve
     une gouttière d'encre de 58 px à gauche et à droite, exactement la place
     d'un repère (46 px) et de son jeu (6 px de chaque côté) : les flèches sont
     À CÔTÉ de l'image, plus jamais dessus. */
  .xp-shot .hero-slides.is-screens .hero-bg{object-position:50% 50%;
    padding:clamp(24px,4vh,54px) 58px}
  .xp-shot .hero-prev{left:6px}
  .xp-shot .hero-next{right:6px}
  .xp-shot .hero-dots{left:0;right:0;width:auto;bottom:calc(var(--strip-h,44px) + 16px)}
}
@media(prefers-reduced-motion:reduce){.hero-slides .hero-bg{transition:none}}

.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border:var(--frame-thin) solid var(--paper);border-radius:0;
  background:rgba(20,17,11,.32);color:var(--paper);font-family:var(--disp);font-size:0;
  line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  padding:0;transition:.18s;backdrop-filter:blur(2px);--chev:12px}
/* 8 septembre — le chevron est DESSINÉ, pas composé. Un glyphe (‹, ›, ← ou →)
   se place selon les métriques de sa fonte : approches inégales, hauteur d'œil
   décentrée, et aucun réglage de padding ne le centre à toutes les tailles. Deux
   filets d'un carré tourné à 45°, eux, sont exacts. Le `font-size:0` du bouton
   masque le glyphe du HTML sans toucher au libellé lecteur d'écran, qui est en
   position absolue.
   Le décalage : la pointe du chevron tombe à --chev × √2/2 du centre de son
   carré. On rend ce demi-débord — soit 0,354 × --chev — pour que l'encre, et non
   la boîte, soit au milieu du cadre. */
.hero-arrow::before{content:"";display:block;
  width:var(--chev);height:var(--chev);
  border-left:var(--frame-thin) solid currentColor;
  border-bottom:var(--frame-thin) solid currentColor}
.hero-prev::before{transform:translateX(calc(var(--chev) * .354)) rotate(45deg)}
.hero-next::before{transform:translateX(calc(var(--chev) * -.354)) rotate(-135deg)}
/* le survol est réservé aux pointeurs qui survolent VRAIMENT. Au doigt, `:hover`
   se colle après le tap et le repère restait blanc jusqu'au tap suivant. */
@media(hover:hover){.hero-arrow:hover{background:var(--paper);color:var(--ink)}}
.hero-arrow:focus-visible{outline:2px solid var(--gilt);outline-offset:3px}
.hero-prev{left:clamp(10px,2.2vw,26px)}
.hero-next{right:clamp(10px,2.2vw,26px)}
.hero-dots{position:absolute;left:0;right:0;bottom:calc(var(--strip-h,44px) + 16px);z-index:3;
  display:flex;gap:8px;justify-content:center;pointer-events:none}
.hero .strip .hero-dots{bottom:calc(100% + 16px)}
.hero-dot{width:6px;height:6px;background:var(--paper);opacity:.34;transition:.2s}
.hero-dot.is-on{opacity:1;width:20px}
@media(max-width:760px){.hero-arrow{width:38px;height:38px;--chev:10px}
  .hero-dots{bottom:calc(var(--strip-h,44px) + 10px)}}
@media(max-width:560px){
  .visit-hero .cta{flex-direction:column;align-items:stretch;gap:10px}
  .visit-hero .cta .btn,
  .visit-hero .openbadge{width:100%;justify-content:center;text-align:center}
  /* les deux pastilles s'empilent : l'écart vient du `gap` de la rangée, pas
     d'une marge par pastille, qui s'ajouterait au gap. */
  .visit-hero .openbadge{margin:0;min-height:40px}
  .visit-hero .openrow{margin-top:10px}
}

/* ---- v5 : la galerie de l'Atelier `.gal` (31 août) -----------------------------
   Même grammaire que `.g4`, mais en rangées de quatre, autant qu'il en faut. Au
   31 août : douze images, les quatre photos d'origine en tête (Greg voulait les
   revoir), puis les mêmes gestes de plus près, puis ce qui en sort. Sous 760 px la
   grille tombe à deux colonnes plutôt qu'à une : douze images empilées feraient un
   couloir. ------------------------------------------------------------------------ */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border:var(--frame-thin) solid var(--ink);background:var(--parchment-1)}
@media(max-width:760px){.gal{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(max-width:700px){.folio{--slide:86%}.folio-slide h3 .by{display:block;margin:4px 0 0}}

/* ---- v5 : la liste de logos partenaires `.logos` -----------------------------
   Logos rendus en ENCRE sur transparent au moment de l'export (assets/partners/),
   le CSS ne filtre rien. Hauteur commune, filet haut, gouttière large. --------- */
.pf-ebb{height:30px;width:auto;display:block;margin-bottom:16px}
.logos{margin-top:60px;padding-top:30px;border-top:var(--frame-thin) solid var(--ink)}
.logos .ce{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0}
.logos ul{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:22px 44px;align-items:center}
.logos li{display:flex;align-items:center;margin:0}
.logos img{height:26px;width:auto;max-width:160px;object-fit:contain;display:block}
@media(max-width:700px){.logos ul{gap:18px 28px}.logos img{height:22px;max-width:130px}}

/* ---- v5 : la bande courte des segments de clientèle `.segs` ------------------
   Sur le vert Empire (`.process`, dont elle hérite les paires mesurées : crème 5,44,
   --on-m5-1 4,86, --on-m5-2 5,05), entre le mur (rose) et la curation (crème rosée).
   Décision Greg 2026-08-29 (« un fond vert », après un essai sur gris). Titre en .big
   comme les autres sections ; la rangée de quatre (v3 §2.6) sans ses vignettes.
   `.band.slim` : la moitié du padding d'une bande. ------------------------------- */
.band.slim{padding:clamp(36px,4.5vw,60px) 0}
.segs .p-grid{margin-top:34px;gap:22px 26px}
.segs .p-step h3{font-size:15px}
.segs .p-step p{font-size:14px;max-width:34ch}
/* les segments en cartels encadrés : filet crème fin sur le vert (choix Greg 31 août, rectifs 2) */
.segs .p-step{border:1px solid rgba(246,241,231,.45);padding:20px 22px}