/* ============================================================
   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}
/* Avant que le script ne prenne la main, et donc tant que la police n'est pas
   chargée, la première fin de phrase est déjà là, posée, à sa vraie largeur.
   Sans cette règle, la troisième ligne reste vide avec le tiret jaune seul. */
.rot:not(.prete){width:auto !important;transition:none}
.rot:not(.prete) .rot-i:first-child{transform:none;opacity:1}
/* les autres fins sont retirées du calcul, sinon le cadre prendrait la
   largeur de la plus longue et le tiret jaune partirait trop à droite */
.rot:not(.prete) .rot-i:not(:first-child){display:none}
/* 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,.k-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)}

/* ---- « Voir le projet » sur les visuels de l'accueil --------------------
   Pas de cartouche : le texte se pose directement sur l'image.
   Sur ordinateur, un voile gris se lève au survol et le texte apparaît au
   centre. Au doigt, où le survol n'existe pas, le texte reste affiché en bas
   à gauche, sur un dégradé très léger qui garantit sa lisibilité même sur un
   visuel clair. */
.c-voile{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;pointer-events:none;
  background:rgba(11,11,10,.42);opacity:0;transition:opacity .25s ease}
.colonne-i:hover .c-voile,.colonne-i:focus-visible .c-voile{opacity:1}
.c-voir{display:inline-block;color:var(--blanc);
  font-family:var(--titre);font-weight:600;
  font-size:clamp(1rem,1.5vw,1.25rem);letter-spacing:.01em;
  padding-bottom:5px;border-bottom:2px solid var(--acide);
  transform:translateY(8px);transition:transform .28s cubic-bezier(.2,.6,.2,1)}
.colonne-i:hover .c-voir,.colonne-i:focus-visible .c-voir{transform:none}

.c-voir-bas{display:none}

@media(hover:none){
  .c-voile{opacity:1;align-items:flex-end;justify-content:flex-start;
    padding:14px 16px;
    background:linear-gradient(to top,rgba(11,11,10,.55) 0%,
                                       rgba(11,11,10,.18) 38%,
                                       rgba(11,11,10,0) 68%)}
  .c-voir{transform:none;font-size:14px;padding-bottom:3px;
    text-shadow:0 1px 8px rgba(11,11,10,.45)}
}


/* =====================================================================
   ACCUEIL EN MOSAÏQUE  (page index-mosaique.html)
   Une case par campagne, deux colonnes, petites marges, images à fond
   perdu. Le nom du client n'apparaît qu'au survol.
   ===================================================================== */
/* La mosaïque sort de la colonne de texte et va d'un bord à l'autre de la
   fenêtre, comme le bandeau d'ouverture au-dessus. Seule la gouttière la
   sépare du bord. Une seule valeur à changer pour resserrer ou desserrer. */
.mosaique{--gouttiere:20px;
  width:100vw;margin-left:calc(50% - 50vw);
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--gouttiere);
  padding:var(--gouttiere)}
.case{position:relative;display:block;overflow:hidden;background:var(--noir);
  aspect-ratio:var(--r,16/9);text-decoration:none}
.k-media{position:absolute;inset:0;display:block}
.k-media img,.k-media video{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.case:hover .k-media img,.case:hover .k-media video,
.case:focus-visible .k-media img,.case:focus-visible .k-media video{transform:scale(1.07)}

.k-voile{position:absolute;inset:0;display:flex;align-items:flex-end;
  padding:clamp(16px,2vw,26px);pointer-events:none;
  background:linear-gradient(to top,rgba(10,10,8,.72) 0%,rgba(10,10,8,.28) 46%,rgba(10,10,8,0) 78%);
  opacity:0;transition:opacity .26s ease}
.case:hover .k-voile,.case:focus-visible .k-voile{opacity:1}
.k-txt{display:block;transform:translateY(8px);
  transition:transform .32s cubic-bezier(.2,.6,.2,1)}
.case:hover .k-txt,.case:focus-visible .k-txt{transform:none}
.k-cl{display:block;font-family:var(--titre);font-weight:var(--titre-poids);
  letter-spacing:var(--titre-serre);line-height:1.05;color:var(--blanc);
  font-size:clamp(1.15rem,2.1vw,1.7rem)}
.k-camp{display:block;margin-top:5px;font-size:13px;color:#DAD8CC}

/* le repère d'un média pas encore déposé */
.k-media.manquant::before{position:absolute;inset:0}

/* La même mosaïque en bas d'une page projet, en trois colonnes : les autres
   campagnes, pour continuer sans repasser par l'accueil. */
/* Le titre s'aligne sur le bord des vignettes, pas sur la colonne de texte. */
.suite{width:100vw;margin:clamp(56px,8vw,96px) 0 0 calc(50% - 50vw);
  padding:0 20px}
.suite-t{font-family:var(--titre);font-weight:var(--titre-poids);
  letter-spacing:var(--titre-serre);font-size:clamp(1.3rem,2.2vw,1.75rem);
  margin:0 0 clamp(14px,1.6vw,18px)}
.mosaique.trois{grid-template-columns:repeat(3,1fr);margin-bottom:clamp(40px,6vw,72px)}
.mosaique.trois .k-cl{font-size:clamp(.95rem,1.35vw,1.2rem)}
.mosaique.trois .k-camp{font-size:12px}
/* À deux colonnes, les rangées de trois se recomposent et les formats ne
   s'apparient plus : on donne le même à toutes les cases pour garder des
   rangées pleines. */
@media(max-width:900px){
  .mosaique.trois{grid-template-columns:repeat(2,1fr)}
  .mosaique.trois .case{aspect-ratio:4/3}
}

@media(hover:none){
  .mosaique{--gouttiere:14px}
  .k-voile{opacity:1}
  .k-txt{transform:none}
  .k-cl{font-size:15px}
  .k-camp{font-size:11.5px;margin-top:3px}
}
/* Sur un petit écran on garde les deux colonnes, c'est ce qui fait la
   mosaïque. Les noms y restent affichés, sans survol possible. */
@media(max-width:620px){
  .mosaique{--gouttiere:10px}
  .k-voile{opacity:1;padding:11px 12px}
  .k-txt{transform:none}
  .k-cl{font-size:13.5px;letter-spacing:-.01em}
  .k-camp{font-size:10.5px;margin-top:2px}
}

/* =====================================================================
   CORRECTIFS DU MENU DÉROULANT AU DOIGT
   Trois défauts constatés sur un écran de 375 px.
   Ce bloc est volontairement à la fin du fichier : à force égale, la
   dernière règle écrite l'emporte, et c'est ce qui le fait fonctionner.
   ===================================================================== */

/* 1. LE MENU S'OUVRAIT PUIS SE REFERMAIT AUSSITÔT.
   Sur un écran tactile, le navigateur garde l'état « survolé » sur le
   bouton qu'on vient de toucher, jusqu'au prochain appui ailleurs. La
   règle qui annule l'ouverture au survol s'appliquait donc juste après
   l'appui et remettait la liste à l'opacité zéro. Les deux règles ont
   exactement la même force, c'est donc l'ordre qui tranchait, et la
   mauvaise était la dernière. On rétablit l'ordre.

   Même histoire avec le focus : après un appui, le bouton garde le focus,
   « focus-within » restait donc vrai et rouvrait la liste aussitôt
   refermée. Au doigt, seul .ouvert décide. Le clavier n'est pas touché :
   la touche Entrée déclenche le même clic, qui pose .ouvert. */
@media(hover:none){
  .a-menu:hover .a-liste,
  .a-menu:focus-within .a-liste{opacity:0;visibility:hidden}
  .a-menu.ouvert .a-liste{opacity:1;visibility:visible;transform:none;
    transition-delay:0s}
}

/* 2. LA LISTE SORTAIT DE L'ÉCRAN PAR LA GAUCHE.
   Elle était accrochée au bord droit du mot « Travaux ». Avec ses 250 px
   de large sur un écran de 375, son bord gauche tombait à -51 px. Sous
   560 px elle s'accroche donc à la fenêtre et non plus au mot. */
@media(max-width:560px){
  .a-liste{position:fixed;top:72px;left:12px;right:12px;
    min-width:0;max-height:calc(100vh - 96px);overflow-y:auto}
  .a-liste a{padding:13px 16px;font-size:15px}
}

/* 3. LA FLÈCHE FAISAIT 12 x 13 PIXELS À TOUCHER.
   Trop petit pour un doigt : on visait la flèche, on touchait « Travaux »
   juste à côté et la page changeait. On agrandit la zone sensible sans
   déplacer le dessin, le retrait compensant le rembourrage. */
@media(hover:none){
  .a-fleche{padding:15px 12px;margin:-15px -8px}
}