/* ============================================================
   valentineks.com

   Deux registres qui alternent :
   le PAPIER, blanc, pour le texte et la structure,
   l'ÉCRAN, noir, pleine largeur, pour les images et les films.

   Les couleurs et les tailles sont regroupées ci-dessous.
   Si tu veux changer quelque chose, commence par le bloc :root.
   ============================================================ */

:root{
  --blanc:  #FFFFFF;
  --encre:  #0B0B0A;
  --gris:   #77776C;
  --filet:  #E3E2D9;
  --fond:   #F5F5F0;

  --noir:   #0A0A08;   /* le bandeau d'ouverture et les vignettes d'accueil */
  --noir-2: #14140F;
  --sur-noir: #A9A99C;
  --planche:     #FFEFCC;   /* le fond des planches de créations */
  --planche-2:   #FFEFCC;   /* le calage derrière un média qui charge, même ton */
  --sur-planche: #5C5943;   /* les légendes sur la planche */

  /* Accent. Une seule couleur pour tout le site.
     --sur-acide est le texte posé dessus : encre si l'accent est clair,
     #FFFFFF s'il est sombre. Voir la page choix-orange.html. */
  --acide:     #FFFF00;
  --sur-acide: #0B0B0A;

  /* Police des titres. Pour en changer, remplace cette ligne et la suivante,
     puis le lien Google Fonts en haut de chaque page HTML. */
  --titre:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --titre-poids: 800;
  --titre-serre: -.04em;

  --large:  1400px;
  --marge:  40px;
  --texte:  16px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;background:var(--blanc);color:var(--encre);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--texte);line-height:1.55;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
a{color:inherit}
/* Anneau de focus lisible sur les deux fonds : l'accent, doublé d'un halo
   sombre qui le détoure quand le fond est clair. */
:focus-visible{outline:3px solid var(--acide);outline-offset:2px;
  box-shadow:0 0 0 5px var(--encre)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;background:var(--acide);color:var(--sur-acide);padding:9px 14px;z-index:99}

.site{max-width:var(--large);margin:0 auto;padding:0 var(--marge)}

/* ============ navigation, collante ============ */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
     backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--encre)}
.nav-in{max-width:var(--large);margin:0 auto;padding:16px var(--marge);
        display:flex;align-items:center;justify-content:space-between;gap:24px}
/* Le monogramme. La hauteur se règle ici, la largeur suit toute seule
   (le tracé fait 1,6 fois plus large que haut). */
.mark{display:block;text-decoration:none;color:var(--encre);line-height:0}
.mark .logo{height:34px;width:auto;display:block}
.mark:hover .logo{opacity:.55;transition:opacity .25s ease}
.menu{display:flex;gap:26px}
.menu a{font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:500;
        text-decoration:none;padding-bottom:4px;border-bottom:5px solid transparent}
.menu a:hover,.menu a.on{border-bottom-color:var(--acide)}

/* ============ manifeste ============ */
.manifeste{padding:clamp(56px,10vw,130px) 0 clamp(40px,6vw,70px)}
.role{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);margin:0 0 clamp(24px,4vw,44px)}
.manifeste h1{
  font-family:var(--titre);font-weight:var(--titre-poids);
  font-size:clamp(2.6rem,9.4vw,7.6rem);line-height:.95;letter-spacing:var(--titre-serre);
  margin:0 0 clamp(28px,4vw,48px);
}
.manifeste h1 .l{display:block;overflow:hidden}
.manifeste h1 .l > span{display:block}
.manifeste h1 .l:last-child > span::after{
  content:"";display:inline-block;width:.46em;height:.15em;background:var(--acide);
  margin-left:.16em;vertical-align:.16em}

/* --- la fin de phrase qui tourne ---------------------------------------
   Les formats se changent dans projets.json, clé site.accroche_fins.
   Le rythme et la durée se règlent dans assets/site.js, section 0. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.rot{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom;
  padding-bottom:.16em;margin-bottom:-.16em;
  transition:width .62s cubic-bezier(.22,.8,.24,1)}
.rot-in{display:grid}
.rot-i{grid-area:1/1;justify-self:start;white-space:nowrap;
  transform:translateY(130%);opacity:0;
  transition:transform .62s cubic-bezier(.22,.8,.24,1),opacity .34s ease}
.rot-i.on{transform:translateY(0);opacity:1}
.rot-i.off{transform:translateY(-130%);opacity:0}
/* sans animation : la première fin, posée, sans mouvement */
@media (prefers-reduced-motion:reduce){
  .rot{width:auto!important}
  .rot-i{position:absolute;opacity:0}
  .rot-i:first-child{position:static;opacity:1;transform:none}
}
.manifeste .sous{font-size:clamp(1rem,1.5vw,1.18rem);color:var(--gris);margin:0;max-width:46ch}

/* animation d'entrée, une seule fois, jamais bloquante */
@media (prefers-reduced-motion:no-preference){
  .manifeste h1 .l > span{animation:monte .95s cubic-bezier(.22,.8,.24,1) both}
  .manifeste h1 .l:nth-child(2) > span{animation-delay:.09s}
  .manifeste h1 .l:nth-child(3) > span{animation-delay:.18s}
  .manifeste .sous{animation:fondu 1s ease .38s both}
  @keyframes monte{from{transform:translateY(105%)}to{transform:translateY(0)}}
  @keyframes fondu{from{opacity:0}to{opacity:1}}
}

/* ============ showreel, pleine largeur ============ */
.reel{position:relative;width:100vw;margin-left:calc(50% - 50vw);background:var(--noir)}
.reel video,.reel img{width:100%;height:clamp(300px,72vh,860px);object-fit:cover;background:var(--noir)}
.reel .son{position:absolute;right:var(--marge);bottom:64px;z-index:3;
  font-family:inherit;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45);
  padding:9px 16px;cursor:pointer;transition:background .2s,color .2s}
.reel .son:hover,.reel .son[aria-pressed="true"]{background:var(--acide);color:var(--sur-acide);border-color:var(--acide)}
.reel .cap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  max-width:var(--large);margin:0 auto;padding:14px var(--marge) 18px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sur-noir)}

/* ============ grille des travaux ============ */
.works{padding:clamp(60px,9vw,120px) 0 0}
.works-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  border-top:1px solid var(--encre);padding-top:12px;margin-bottom:clamp(28px,4vw,44px)}
.works-head h2{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;margin:0}
.works-head .count{font-size:11px;letter-spacing:.12em;color:var(--gris)}

/* Deux colonnes, toutes les vignettes au même format. Pour passer à trois,
   remplace le 2 ci-dessous par un 3. */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(40px,5vw,68px) clamp(20px,2.4vw,34px)}
.card{display:block;text-decoration:none}
.card .media{display:block;position:relative;background:var(--noir);overflow:hidden;
  aspect-ratio:4/3}
.card .media img,.card .media video{width:100%;height:100%;object-fit:cover}
.card .media img,.card .media > video{
  transition:transform .9s cubic-bezier(.22,.8,.24,1),opacity .45s ease}
.card:hover .media img,.card:hover .media > video:not(.survol){transform:scale(1.035)}
.card .survol{position:absolute;inset:0;opacity:0;z-index:2}
.card:hover .survol{opacity:1}
.card .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--titre);font-weight:var(--titre-poids);font-size:clamp(1.6rem,3.2vw,2.6rem);color:var(--sur-noir)}
.card .meta{display:flex;align-items:baseline;gap:14px;padding-top:14px;
  border-top:1px solid var(--encre);margin-top:16px}
.card .client{font-family:var(--titre);font-weight:var(--titre-poids);
  font-size:clamp(1.3rem,2.1vw,2rem);line-height:1.05;letter-spacing:var(--titre-serre);
  background-image:linear-gradient(var(--encre),var(--encre));
  background-repeat:no-repeat;background-size:0 1px;background-position:0 100%;
  transition:background-size .55s cubic-bezier(.22,.8,.24,1)}
.card:hover .client{background-size:100% 1px}
.card .yr{margin-left:auto;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);white-space:nowrap}
.card .line{display:block;font-size:.95rem;color:var(--gris);margin-top:8px;max-width:52ch}

/* ============ page projet ============ */
.proj-head{padding:clamp(50px,8vw,110px) 0 clamp(26px,3vw,38px)}
.kicker{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);margin:0 0 clamp(20px,3vw,34px)}
.projet h1,.page h1{font-family:var(--titre);font-weight:var(--titre-poids);
  font-size:clamp(2.2rem,6vw,4.6rem);line-height:1;letter-spacing:var(--titre-serre);
  margin:0 0 clamp(28px,4vw,44px);max-width:14em}
.projet h1:has(+ .sommaire){margin-bottom:clamp(18px,2.4vw,26px)}
/* Le client sur une ligne, la campagne sur la ligne du dessous, en italique. */
.projet h1 em{display:block;font-style:italic}
/* Un prix remporté par la campagne. */
.prix{margin:clamp(22px,3vw,30px) 0 0;max-width:46em;font-size:15px;line-height:1.7}
.pastille{display:inline-block;margin:0 12px 0 0;padding:3px 8px;
  background:var(--acide);color:var(--sur-acide);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;vertical-align:2px}

/* Les boutons vers les parties d'un projet qui en compte plusieurs. */
.sommaire{display:flex;flex-wrap:wrap;gap:8px;
  margin:0 0 clamp(28px,4vw,44px)}
.sommaire a{padding:10px 16px;border-radius:999px;background:var(--acide);
  color:var(--sur-acide);font-size:12.5px;font-weight:600;letter-spacing:.02em;
  text-decoration:none;transition:filter .15s}
.sommaire a:hover,.sommaire a:focus-visible{filter:brightness(.88)}
/* le titre de chapitre se pose sous la barre du menu, pas dessous */
.chap{scroll-margin-top:92px}
.projet .chap:first-of-type{scroll-margin-top:92px}
.specs{display:flex;flex-wrap:wrap;margin:0;padding:0;
  border-top:1px solid var(--encre);border-bottom:1px solid var(--filet)}
.specs div{flex:1 1 190px;padding:16px 28px 18px 0}
.specs dt{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin:0 0 6px}
.specs dd{margin:0;font-size:.93rem;line-height:1.45}

.chap{padding-top:clamp(40px,6vw,80px)}
.chap-head{position:sticky;top:57px;z-index:20;background:var(--blanc);
  display:flex;align-items:baseline;gap:14px;
  border-top:1px solid var(--encre);padding:12px 0 10px}
.chap-head h2{font-family:var(--titre);font-weight:var(--titre-poids);
  font-size:clamp(1.2rem,2.4vw,1.8rem);letter-spacing:var(--titre-serre);margin:0}
.chap-head .yr{margin-left:auto;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}

/* Les blocs de texte : intitulé à gauche, texte à droite, une ligne par bloc.
   La lecture descend, au lieu de zigzaguer entre deux colonnes. */
.body{display:block;margin-top:clamp(20px,3vw,34px)}
.block{display:grid;grid-template-columns:1fr;gap:10px 0;
  padding:clamp(22px,3vw,32px) 0;border-top:1px solid var(--filet)}
.block:first-child{border-top:0}
@media(min-width:760px){
  .block{grid-template-columns:190px minmax(0,1fr);gap:0 clamp(32px,4vw,60px)}
}
.block h3{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  margin:0;padding-top:.5em;align-self:start}
.block h3::before{content:"";display:block;width:22px;height:7px;background:var(--acide);
  margin-bottom:11px}
.block p{margin:0;font-size:clamp(1.02rem,1.25vw,1.14rem);line-height:1.62;max-width:62ch}
.block.todo p{color:var(--gris);font-style:italic}

/* Brouillon écrit par Claude, à relire. Retire le ~ dans projets.json
   quand le texte est validé, la pastille disparaît. */
.block.brouillon{border-left:5px solid var(--acide);padding-left:20px}
/* La pastille « à relire », partout où elle apparaît */
.flag{display:block;width:fit-content;margin:9px 0 0;padding:2px 7px;
  background:var(--acide);color:var(--sur-acide);
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}

.bio.brouillon{border-left:5px solid var(--acide);padding-left:18px}
.bio p{margin:0 0 14px}
.bio p:last-child{margin-bottom:0}

.chapo{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.55;color:var(--gris);
  max-width:56ch;margin:clamp(30px,4vw,44px) 0 0}

/* ---- la planche : pleine largeur, fond jaune clair ---- */
.ecran{width:100vw;margin:clamp(48px,7vw,90px) 0 0 calc(50% - 50vw);
  background:var(--planche);padding:clamp(40px,6vw,84px) 0}
.ecran-in{max-width:var(--large);margin:0 auto;padding:0 var(--marge)}
.plates{display:grid;gap:clamp(20px,2.4vw,34px)}
/* Six colonnes servent de réglette : un média occupe 6 colonnes (pleine
   largeur), 3 (une moitié) ou 2 (un tiers). Sans consigne, le premier média
   prend toute la largeur et les suivants se rangent par deux. */
@media(min-width:900px){
  .plates{grid-template-columns:repeat(6,1fr)}
  .plates .m{grid-column:span 3}
  .plates .m:first-child{grid-column:span 6}
  .plates .m.pleine{grid-column:span 6}
  .plates .m.demi{grid-column:span 3}
  .plates .m.tiers{grid-column:span 2}
}
.m{margin:0}
/* AUCUN RECADRAGE dans les planches. Une image occupe la largeur de sa
   colonne et garde la hauteur de son fichier. Une vidéo réserve sa place
   avec le format annoncé, mais en « contain » : elle n'est jamais rognée. */
.m img{display:block;width:100%;height:auto;background:var(--planche-2);
  /* tant que l'image n'est pas arrivée, elle réserve la place du format
     annoncé, en « contain » : jamais de coupe, et la page ne sursaute pas. */
  aspect-ratio:var(--r,16/9);object-fit:contain}
.m img.arrivee{aspect-ratio:auto}   /* chargée : ses vraies proportions */
.m video{display:block;width:100%;height:auto;object-fit:contain;
  background:var(--planche-2)}
.m figcaption{font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sur-planche);padding-top:10px}

/* Repères tant que les médias ne sont pas déposés — voir LISEZMOI, section 2 */
.manquant img,.manquant video{display:none}
.m.manquant::before,.card .media.manquant::before,.reel.manquant::before,
.b-media.manquant::before,.c-media.manquant::before{
  content:attr(data-note);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:20px;color:var(--sur-noir);
  background:repeating-linear-gradient(135deg,var(--noir-2) 0 10px,#1C1C15 10px 20px);
  font-size:12px;line-height:1.5;letter-spacing:.04em}
/* sur la planche claire, le repère se met au diapason */
.m.manquant::before{color:var(--sur-planche);
  background:repeating-linear-gradient(135deg,var(--planche-2) 0 10px,#F7E3B4 10px 20px)}
.m.manquant::before{aspect-ratio:var(--r,16/9)}
.m{align-self:start}
.card .media.manquant::before,.c-media.manquant::before{position:absolute;inset:0}
.reel.manquant::before{height:clamp(300px,72vh,860px)}
.reel.manquant .son{display:none}

.note{margin-top:26px;padding:14px 18px;background:var(--fond);border-left:5px solid var(--acide);
  font-size:.93rem;color:var(--gris)}

.next{margin-top:clamp(56px,8vw,100px);border-top:1px solid var(--encre);padding-top:22px;
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;text-decoration:none}
.next .k{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
.next .t{font-family:var(--titre);font-weight:var(--titre-poids);font-size:clamp(1.4rem,2.8vw,2.2rem);
  letter-spacing:var(--titre-serre);margin-left:auto;
  background-image:linear-gradient(var(--encre),var(--encre));background-repeat:no-repeat;
  background-size:0 1px;background-position:0 100%;transition:background-size .55s cubic-bezier(.22,.8,.24,1)}
.next:hover .t{background-size:100% 1px}

/* ============ pages simples ============ */
.page{padding:clamp(50px,8vw,110px) 0 0;max-width:940px}
.page .intro{font-size:1.12rem;max-width:60ch;color:var(--gris)}
.grand-lien a{font-family:var(--titre);font-weight:var(--titre-poids);font-size:1.4rem;
  text-underline-offset:5px}
.page .grand{font-family:var(--titre);font-weight:var(--titre-poids);
  font-size:clamp(1.5rem,3.6vw,2.6rem);letter-spacing:var(--titre-serre);margin:0 0 48px}
.deux{display:grid;gap:44px;margin-top:44px}
@media(min-width:800px){.deux{grid-template-columns:1fr 1fr;gap:64px}}
.deux h3{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin:34px 0 12px}
.deux > div > h3:first-child{margin-top:0}
.deux p{max-width:52ch}
.cv{list-style:none;padding:0;margin:0 0 30px}
.cv li{padding:10px 0;border-bottom:1px solid var(--filet);font-size:.95rem}
.cv b{font-weight:600;display:inline-block;min-width:9em}
.cl{color:var(--gris);line-height:2;margin-bottom:30px}
.petite{font-size:.85rem;color:var(--gris);font-style:italic}
.planche{margin-top:36px}
/* Le bloc de compétences sur la page À propos, même grille que les pages projet */
.savoir{margin-top:clamp(28px,4vw,44px);border-bottom:1px solid var(--filet);
  padding-bottom:clamp(20px,3vw,30px)}

/* ============ pied ============ */
.foot{margin-top:clamp(70px,10vw,120px);border-top:1px solid var(--encre);padding:32px 0 70px;
  display:flex;gap:32px;flex-wrap:wrap;align-items:flex-start}
.foot .co{font-family:var(--titre);font-weight:var(--titre-poids);
  font-size:clamp(1.2rem,2.4vw,1.8rem);letter-spacing:var(--titre-serre);margin:0}
.foot .dispo{margin:8px 0 0;font-size:.92rem;color:var(--gris)}
.foot .r{margin-left:auto;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);text-align:right;line-height:2.4}

@media(max-width:900px){
  :root{--marge:20px}
  .grid{gap:36px 16px}
  .grid{grid-template-columns:1fr}
  .plates{grid-template-columns:1fr}
  .nav-in{flex-wrap:wrap;gap:12px}
  .menu{gap:18px}
  .chap-head{top:0}
  .reel .son{bottom:56px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* =====================================================================
   ACCUEIL, DEUXIÈME VERSION : LES BANDES  (page index-bandes.html)
   Une bande par campagne, pleine largeur, hauteur fixe. Le nom du client
   n'apparaît qu'au survol, sur un voile sombre.
   Pour changer la hauteur, une seule valeur : --bande.
   ===================================================================== */
.bandes{--bande:300px;
  width:100vw;margin:clamp(40px,6vw,80px) 0 0 calc(50% - 50vw);
  display:block;background:var(--noir)}
.bande{position:relative;display:block;height:var(--bande);overflow:hidden;
  text-decoration:none;border-bottom:1px solid var(--noir)}
.bande:last-child{border-bottom:0}

.b-media{position:absolute;inset:0;display:block}
.b-media img,.b-media video{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.bande:hover .b-media img,.bande:hover .b-media video,
.bande:focus-visible .b-media img,.bande:focus-visible .b-media video{transform:scale(1.07)}

/* le voile : invisible au repos, il se lève au survol */
.b-voile{position:absolute;inset:0;display:flex;align-items:center;
  padding:0 var(--marge);background:rgba(10,10,8,.62);
  opacity:0;transition:opacity .28s ease}
.bande:hover .b-voile,.bande:focus-visible .b-voile{opacity:1}

.b-txt{display:block;max-width:var(--large);width:100%;margin:0 auto;
  transform:translateY(10px);transition:transform .34s cubic-bezier(.2,.6,.2,1)}
.bande:hover .b-txt,.bande:focus-visible .b-txt{transform:none}
.b-cl{display:block;font-family:var(--titre);font-weight:var(--titre-poids);
  letter-spacing:var(--titre-serre);line-height:1;color:var(--blanc);
  font-size:clamp(1.8rem,4.4vw,3.4rem)}
.b-camp{display:block;margin-top:8px;font-size:15px;color:var(--sur-noir)}

/* Au doigt, il n'y a pas de survol : le voile reste, plus léger. */
@media(hover:none){
  .bandes{--bande:220px}
  .b-voile{opacity:1;background:linear-gradient(to top,rgba(10,10,8,.78) 0%,rgba(10,10,8,.15) 70%);
    align-items:flex-end;padding-bottom:22px}
  .b-txt{transform:none}
  .bande:hover .b-media img,.bande:hover .b-media video{transform:scale(1.02)}
}

/* le repère d'un média pas encore déposé, à l'échelle de la bande */
.b-media.manquant::before{position:absolute;inset:0}
.bande .b-voile{z-index:1}

/* =====================================================================
   ACCUEIL, TROISIÈME VERSION : L'ACCROCHE POSÉE SUR L'IMAGE
   (page index-sur-image.html)
   Le bandeau d'ouverture passe en fond, pleine hauteur, et le texte
   se pose dessus. Un voile en dégradé garantit la lisibilité.
   ===================================================================== */
.sur{position:relative;width:100vw;margin-left:calc(50% - 50vw);
  min-height:clamp(560px,88vh,940px);display:flex;align-items:flex-end;
  background:var(--noir);overflow:hidden}
.sur-fond{position:absolute;inset:0}
.sur-fond img,.sur-fond video{width:100%;height:100%;object-fit:cover;display:block}
/* le voile : sombre en bas où se pose le texte, transparent en haut */
.sur::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(8,8,6,.86) 0%, rgba(8,8,6,.66) 32%, rgba(8,8,6,.18) 66%, rgba(8,8,6,0) 100%)}
.sur-texte{position:relative;z-index:1;width:100%;max-width:var(--large);
  margin:0 auto;padding:clamp(40px,8vh,90px) var(--marge) clamp(56px,8vh,104px)}
.sur-texte .role{color:var(--acide)}
.sur-texte h1{color:var(--blanc)}
.sur-texte .sous{color:#DAD8CC;max-width:46ch}
.sur-texte h1 .l:last-child > span::after{background:var(--acide)}
.sur-cap{position:absolute;z-index:1;top:0;right:0;margin:0;
  padding:clamp(18px,3vh,28px) var(--marge);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sur-noir)}
.sur-cap a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(169,169,156,.45)}
.sur-cap a:hover{color:var(--acide);border-color:var(--acide)}
.sur + .works{padding-top:clamp(56px,8vw,96px)}
@media(max-width:900px){
  .sur{min-height:clamp(480px,80vh,760px)}
}

/* ---- variante : le nom du client écrit sous la bande, pas au survol ---- */
.avec-pied{background:var(--blanc)}
.avec-pied .bande{height:auto;border-bottom:0;
  margin-bottom:clamp(30px,4vw,52px)}
.avec-pied .b-media{position:relative;display:block;height:var(--bande);
  background:var(--noir);overflow:hidden}
.avec-pied .b-pied{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:0 14px;max-width:var(--large);margin:0 auto;padding:14px var(--marge) 0}
.avec-pied .b-cl{font-size:clamp(1.1rem,2vw,1.55rem);color:var(--encre);flex:0 0 auto}
.avec-pied .b-camp{margin:0;color:var(--gris);font-size:15px;flex:1 1 auto}
.avec-pied .b-an{font-size:11px;letter-spacing:.16em;color:var(--gris);
  margin-left:auto;flex:0 0 auto}
.avec-pied .bande:hover .b-cl{color:var(--encre)}
.avec-pied .bande:hover .b-media::after{content:"";position:absolute;inset:0;
  background:var(--acide);mix-blend-mode:multiply;opacity:.22}

/* ---- le déroulant des clients, sous « Travaux » --------------------------
   Sur ordinateur il s'ouvre au survol. Au doigt, où le survol n'existe pas,
   la petite flèche l'ouvre au clic. ------------------------------------- */
.a-menu{position:relative;display:inline-flex;align-items:center;gap:5px}
.a-fleche{border:0;background:none;padding:4px 2px;cursor:pointer;
  display:inline-flex;align-items:center;line-height:0}
.a-fleche span{display:block;width:0;height:0;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:4.5px solid var(--gris);
  transition:transform .18s ease}
.a-menu:hover .a-fleche span,.a-fleche[aria-expanded="true"] span{
  transform:rotate(180deg);border-top-color:var(--encre)}
.a-liste{position:absolute;top:calc(100% + 12px);left:-14px;z-index:40;
  display:grid;min-width:250px;padding:8px 0;
  background:var(--blanc);border:1px solid var(--filet);
  box-shadow:0 14px 34px rgba(11,11,10,.11);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility 0s .16s}
.a-menu:hover .a-liste,.a-menu:focus-within .a-liste,.a-menu.ouvert .a-liste{
  opacity:1;visibility:visible;transform:none;transition-delay:0s}
.a-liste a{display:block;padding:9px 18px;font-size:13px;letter-spacing:0;
  text-transform:none;color:var(--encre);white-space:nowrap}
.a-liste a:hover,.a-liste a:focus-visible{background:var(--acide);color:var(--sur-acide)}
/* un pont invisible, pour que le curseur puisse descendre sans fermer */
.a-menu::after{content:"";position:absolute;top:100%;left:0;right:-20px;height:14px}
@media(hover:none){ .a-menu:hover .a-liste{opacity:0;visibility:hidden} }
@media(max-width:900px){ .a-liste{left:auto;right:-14px} }

/* ---- variante : chaque bande garde le format de son image, aucun recadrage ---- */
.naturel .bande{height:auto}
.naturel .b-media{position:relative;display:block;height:auto}
.naturel .b-media img,.naturel .b-media video{height:auto;object-fit:contain;
  transform:none}
.naturel .bande:hover .b-media img,.naturel .bande:hover .b-media video{transform:none}

/* =====================================================================
   ACCUEIL : LA GRILLE SUR UNE SEULE COLONNE  (page index-colonne.html)
   Un projet par ligne, dans les marges de la page, cadre 16:9.
   ===================================================================== */
.colonne{display:grid;grid-template-columns:1fr;gap:clamp(44px,6vw,80px)}
.colonne-i{display:block;text-decoration:none;color:inherit}
.c-media{display:block;position:relative;overflow:hidden;background:var(--noir);
  aspect-ratio:16/9}
.c-media img,.c-media video{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.colonne-i:hover .c-media img,.colonne-i:hover .c-media video{transform:scale(1.035)}
.c-pied{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 14px;padding-top:15px;
  border-top:1px solid var(--encre);margin-top:15px}
.c-cl{font-family:var(--titre);font-weight:var(--titre-poids);
  letter-spacing:var(--titre-serre);font-size:clamp(1.3rem,2.4vw,1.9rem)}
.c-camp{font-size:15px;color:var(--gris)}
.c-an{margin-left:auto;font-size:11px;letter-spacing:.16em;color:var(--gris)}
.c-line{display:block;margin-top:8px;max-width:62ch;color:var(--gris);font-size:15px}
.colonne-i:hover .c-cl{color:var(--encre)}

/* la photo de Valentine, page À propos */
.portrait{margin:0 0 clamp(22px,3vw,30px);max-width:300px}
.portrait img{display:block;width:100%;height:auto}
@media(max-width:760px){ .portrait{max-width:220px} }

/* Le saut de ligne de la sous-accroche : voulu sur grand écran, ignoré sur
   téléphone où il laisserait un trou au milieu de la phrase. */
@media(max-width:760px){ br.saut{display:none} }

/* Un projet qui contient plusieurs campagnes l'annonce sur l'accueil. */
.c-plus{display:inline-block;padding:4px 10px;border-radius:999px;
  background:var(--acide);color:var(--sur-acide);
  font-size:11px;font-weight:600;letter-spacing:.02em;
  transform:translateY(-2px);transition:filter .15s}
.colonne-i:hover .c-plus{filter:brightness(.88)}