/* ------------------------------------------------------------------
   Elmē Studio — variables. Tout se règle ici.
   Maquettes dessinées sur 2000 px de large : 1 px maquette = 0.05vw.
   ------------------------------------------------------------------ */
/* Police du studio : Acumin VF Regular (Adobe, Robert Slimbach), fournie par la cliente.
   Police variable d'origine, gardée droite et en largeur normale, graisses 300 à 500, caractères latins, WOFF2 (28 Ko).
   Le site l'utilise en Regular (400). */
@font-face{
  font-family:"Acumin Variable Concept";
  src:url(assets/polices/acumin-vf.woff2) format("woff2-variations"), url(assets/polices/acumin-vf.woff2) format("woff2");
  font-weight:300 500;font-style:normal;font-display:swap;
  ascent-override:73.5%;descent-override:26.5%;line-gap-override:20%;  /* mêmes métriques sur tous les systèmes */
}

:root{
  /* Couleurs */
  --fond:   #ffffff;
  --encre:  #111111;
  --trait:  #1a1a1a;
  --blanc:  #ffffff;
  --attente:#d9d7d2;
  --gris:   #8e8e8e;   /* choix inactifs du formulaire */

  /* Typographie — la police du studio : Acumin VF Regular (fichier dans assets/polices) */
  --police: "Acumin Variable Concept", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --t-logotype: 8.35vw;                      /* ELMĒ STUDIO géant   */
  --t-nav:      clamp(10px, .85vw, 22px);    /* SELECTED WORKS –     */
  --t-texte:    clamp(13px, 1.13vw, 28px);   /* texte de présentation */
  --t-legende:  clamp(9px, .63vw, 16px);     /* CAMPAIGN –           */
  --t-marque:   clamp(11px, 1vw, 24px);      /* ELMĒ STUDIO en-tête  */
  --t-titre:    clamp(15px, 1.23vw, 30px);    /* FROM IDEA TO IMPACT - */
  --t-liste:    clamp(13px, .92vw, 23px);    /* listes de savoir-faire */
  --espacement-legende: .3em;
  --espacement-marque:  .42em;

  /* Rythme */
  --marge:        max(16px, 4.15vw);         /* 83 px maquette  */
  --h-entete:     max(56px, 6.4vw);          /* 128 px maquette */
  --h-visuel:     45.35vw;                   /* 907 px maquette */
  --h-legende:    max(40px, 2.8vw);          /* 56 px maquette  */
  --filet:        1px;                       /* épaisseur des traits */
}

*{box-sizing:border-box}
input, textarea, select, button{font-family:var(--police)}   /* les champs de formulaire n'héritent pas la police d'eux-mêmes */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--fond);color:var(--encre);
  font-family:var(--police);font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
figure{margin:0}

/* Animation d'entrée ------------------------------------------------ */
.voile-intro{display:none}
.intro .voile-intro{
  position:fixed;inset:0;z-index:100;background:var(--fond);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .9s cubic-bezier(.4,0,.2,1), visibility .9s;
}
/* sortie en deux temps : l'emblème s'efface d'abord (jamais d'emblème gris à moitié transparent
   par-dessus la page), puis le voile blanc se lève */
.intro-fin .voile-intro{opacity:0;visibility:hidden;transition-delay:.22s}
/* l'emblème qui danse : 48 poses tirées de l'animation d'origine (planche 8 × 6, noir pur), réparties à vitesse régulière. Chaque pose est un petit
   calque ; leur alternance est confiée au compositeur graphique (animations d'opacité par pas de 1/60 s, en
   aller-retour) : la danse reste parfaitement régulière même pendant que la page se charge derrière le voile. */
.voile-intro .embleme-anime{
  display:block;position:relative;width:clamp(64px,5.1vw,102px);aspect-ratio:1;overflow:hidden;
  width:clamp(64px, round(5.1vw, 1px), 102px);   /* largeur entière : première pose et calques tombent sur les mêmes pixels */
  transition:opacity .35s ease, transform .35s ease;transform:translateZ(0);
}
/* la première pose est là tout de suite (incorporée à la feuille de style, rien à attendre) ;
   la danse prend le relais dès que la planche est prête, en partant de cette même pose : raccord invisible */
.voile-intro .embleme-anime::before{
  content:"";position:absolute;inset:0;z-index:2;   /* posée sur les calques (même image) jusqu'au départ de la danse */
  background:url(data:image/webp;base64,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) center/100% 100% no-repeat;   /* = première pose de la planche */
}
.voile-intro .poses{position:absolute;inset:0;z-index:1}
.voile-intro .poses i{
  position:absolute;inset:0;opacity:0;will-change:opacity;
  background:url(assets/chargement-poses.webp) 0 0/800% 600% no-repeat;
}
.voile-intro.pret .embleme-anime::before{visibility:hidden}   /* relais instantané : les calques montrent déjà la même pose */
.intro-fin .voile-intro .embleme-anime{opacity:0;transform:scale(.94) translateZ(0);transition-duration:.22s}
/* au téléphone : 70 px (la planche a 320 px par pose : toujours net) */
@media (max-width:760px){ .voile-intro .embleme-anime{width:70px} }
@media (prefers-reduced-motion:reduce){ .intro .voile-intro{display:none} }

/* Macron sur le E (ELMĒ, ĒLME) ----------------------------------- */
/* La barre est un bloc en ligne posé sur la ligne de base : son bas est à
   hauteur du E + écart, sans dépendre des métriques ni de l'interligne.
   Proportions relevées sur le grand logo : écart = 1/3 de la hauteur du E,
   barre de la largeur dessinée du E (.10em → .53em), sans déborder. */
.macron::before, .macron-grand::before{
  content:"";display:inline-block;vertical-align:baseline;
  --trait:max(1px,.079em);--ecart:max(2.5px,.238em);
  width:.43em;height:var(--trait);background:currentColor;
  margin:-.45em -.53em calc(.698em + var(--ecart)) .1em;  /* avance nette nulle, n'agrandit pas la ligne */
}
/* dans un paragraphe serré (interligne 1,13), l'écart du logo poserait la barre plus près de la ligne du dessus
   que de son E : on la rapproche pour qu'elle appartienne sans ambiguïté à sa lettre */
.projet-description .macron::before{--ecart:max(2px,.13em)}

/* Ouverture ------------------------------------------------------- */
.ouverture{
  min-height:40.25vw;                        /* la photo affleure en bas du premier écran */
  padding:3.1vw var(--marge) 2.75vw;
  display:flex;flex-direction:column;
}
.logotype{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin:0;font-weight:400;font-size:var(--t-logotype);line-height:.73;
  padding-top:.36em;                         /* place du macron */
}
.logotype span{display:block}
.logotype .espace{width:0}

.ouverture-nav{
  display:grid;grid-template-columns:1fr auto 1fr;
  margin-top:3.15vw;font-size:var(--t-nav);line-height:1.12;
}
.ouverture-nav a:nth-child(2){justify-self:center;padding-right:.2vw}
.ouverture-nav a:nth-child(3){justify-self:end}

.presentation{
  margin:auto 0 0;padding-top:48px;
  font-size:var(--t-texte);line-height:1.2;letter-spacing:.005em;
}

/* En-tête fixe ---------------------------------------------------- */
.entete{
  position:fixed;inset:0 0 auto;z-index:10;height:var(--h-entete);
  display:grid;grid-template-columns:741fr 532fr 475fr auto;align-items:end;
  padding:0 var(--marge) max(8px,.5vw);
  color:var(--encre);border-bottom:var(--filet) solid var(--trait);
  opacity:0;visibility:hidden;transform:translateY(-100%);
  transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .35s ease,visibility .45s,
             background-color .25s ease,border-color .25s ease;
}
.entete.visible{opacity:1;visibility:visible;transform:none}
.entete.sur-fond{background:var(--fond)}          /* au-dessus d'un bandeau de texte : fond plein */
.entete.sur-image{border-bottom-color:rgba(255,255,255,.85)}
.entete [data-sonde]{transition:color .2s ease}
.entete [data-sonde].sur-image{color:var(--blanc)}
.entete-nav{display:contents;font-size:var(--t-nav);line-height:1.12}
.entete-nav a:nth-child(3){justify-self:end}

.entete-marque{display:flex;align-items:center;gap:max(8px,.75vw)}
.embleme{
  width:max(24px,1.9vw);aspect-ratio:945/943;flex:none;background:currentColor;
  -webkit-mask:url(assets/elme-emblem.svg) center/contain no-repeat;
          mask:url(assets/elme-emblem.svg) center/contain no-repeat;
}
.marque-texte{
  font-size:var(--t-marque);letter-spacing:var(--espacement-marque);
  white-space:nowrap;
}
.marque-texte .macron{letter-spacing:0;margin-right:var(--espacement-marque)}

/* Selected works -------------------------------------------------- */
/* Déroulé façon pile : chaque rangée se fige en haut, la suivante remonte par-dessus */
.rang{position:sticky;top:0;background:var(--fond)}
.rang-double{display:grid;grid-template-columns:1fr 1fr}
.visuel{height:var(--h-visuel);overflow:hidden;background:var(--attente)}
.visuel img{width:100%;height:100%;object-fit:cover}
.visuel-provisoire{background-size:200% auto;background-repeat:no-repeat}

.legende{
  height:var(--h-legende);padding:0 var(--marge);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:var(--t-legende);letter-spacing:var(--espacement-legende);
  border-top:var(--filet) solid var(--trait);border-bottom:var(--filet) solid var(--trait);
  margin-bottom:calc(-1 * var(--filet));
}
.rang-double .tuile + .tuile .legende{border-left:var(--filet) solid var(--trait)}

/* Curseur : l'emblème, noir sur fond clair, blanc sur photo sombre */
html, body, [data-ton="clair"], [data-ton="clair"] *, .entete, .entete *{
  cursor:url(assets/curseur-noir.svg) 16 16, auto;
}
/* Selected Works : le curseur est choisi pour toute la section par le script (noir ou blanc selon la zone de
   photo sous la souris) et hérité par tous les éléments, liens et photos compris ; la légende garde le noir */
.tunnel{cursor:var(--curseur, url(assets/curseur-noir.svg) 16 16, pointer)}
.tunnel *{cursor:inherit}
.tunnel-legende, .tunnel-legende *{cursor:url(assets/curseur-noir.svg) 16 16, auto}
.tuile-lien{cursor:url(assets/curseur-noir.svg) 16 16, pointer}
[data-ton="sombre"], [data-ton="sombre"] *,
.entete [data-sonde].sur-image, .entete [data-sonde].sur-image *{
  cursor:url(assets/curseur-blanc.svg) 16 16, auto;
}

a:hover{opacity:.6}
.tuile-lien{display:block}
.tuile-lien:hover{opacity:1}
.tuile-lien:hover .legende span:last-child{opacity:.6}
a{transition:opacity .2s ease}

/* Elmē Team ------------------------------------------------------- */
.fantome{visibility:hidden}                 /* garde le pas de lettre de ELMĒ STUDIO */
.titre-texte{margin:0;font-weight:400;font-size:var(--t-titre);line-height:1.2}

.impact{
  display:grid;grid-template-columns:25.65vw 1fr;
  padding:3.8vw var(--marge) 4.45vw;
}
.impact-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:.3vw}
.impact-photos img{width:100%;height:16.5vw;object-fit:cover}

.savoir-faire-titres, .savoir-faire-listes{
  display:grid;grid-template-columns:25.65vw 29.35vw 28.2vw 1fr;
  padding:0 var(--marge);
}
.savoir-faire-titres{
  height:var(--h-legende);align-items:center;
  border-top:var(--filet) solid var(--trait);border-bottom:var(--filet) solid var(--trait);
}
.savoir-faire h3{
  margin:0;font-weight:400;font-size:var(--t-legende);letter-spacing:var(--espacement-legende);
  white-space:nowrap;
}
.savoir-faire-listes{padding-top:3.3vw;padding-bottom:7.6vw}
.savoir-faire ul{list-style:none;margin:0;padding:0;font-size:var(--t-liste);line-height:1.7}

.coordonnees{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:start;
  padding:2.75vw var(--marge) 2.4vw;
  border-top:var(--filet) solid var(--trait);border-bottom:var(--filet) solid var(--trait);
}
.coordonnees-adresse, .contacts{
  font-style:normal;font-size:var(--t-legende);letter-spacing:var(--espacement-legende);line-height:1.5;
}
.coordonnees-adresse{display:grid;grid-auto-rows:2.8vw}
.coordonnees-marque{display:flex;flex-direction:column;align-items:center;gap:2.1vw;padding-top:.25vw}
.coordonnees-marque .embleme{width:5vw}
.coordonnees-marque .marque-texte{font-size:clamp(10px,.85vw,20px);--espacement-marque:.38em}
.coordonnees .contacts{justify-self:end;margin-right:-.6vw}
.contacts{display:grid;grid-auto-rows:2.8vw;margin:0}
.contacts dd{margin:0}

.devise{text-align:center;padding:10vw var(--marge) 23.5vw;margin:0}

/* Contact ----------------------------------------------------------- */
.page-contact{min-height:100vh;display:flex;flex-direction:column}
.contact{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4.8vw;padding:calc(var(--h-entete) + 4vw) var(--marge) 5vw;
}
.contact .contacts{margin-left:-.6vw}

.formulaire, .formulaire-merci{width:min(100%, 42vw)}
.formulaire{display:grid;gap:2.4vw}
.formulaire fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:1.2vw 2.4vw}
.formulaire legend, .champ > span{
  float:left;font-size:var(--t-legende);letter-spacing:var(--espacement-legende);
}
.formulaire legend{padding:0;margin-right:1.2vw}
.formulaire-sujet label{position:relative;font-size:var(--t-legende);letter-spacing:var(--espacement-legende);color:var(--gris);transition:color .2s}
.formulaire-sujet input{position:absolute;opacity:0;inset:0;margin:0}
.formulaire-sujet input:checked + span{color:var(--encre);border-bottom:var(--filet) solid var(--trait)}
.formulaire-sujet input:focus-visible + span{outline:var(--filet) solid var(--trait);outline-offset:4px}
.formulaire-paire{display:grid;grid-template-columns:1fr 1fr;gap:2.4vw}
.champ{display:grid;gap:.6vw}
.champ > span{float:none}
.champ input, .champ textarea{
  font:inherit;font-size:var(--t-liste);color:var(--encre);
  background:transparent;border:0;border-bottom:var(--filet) solid var(--trait);border-radius:0;
  padding:.3vw 0 .5vw;outline:none;resize:none;cursor:url(assets/curseur-noir.svg) 16 16, text;   /* l'emblème aussi dans les champs */
  font-family:var(--police);
}
.champ textarea{min-height:8vw;line-height:1.4}
.champ input:focus, .champ textarea:focus{border-bottom-width:2px;padding-bottom:calc(.5vw - 1px)}
.champ.invalide > span{color:#a23b2a}
.champ.invalide input, .champ.invalide textarea{border-bottom-color:#a23b2a}
.formulaire-pied{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:-1vw}
.formulaire-erreur{margin:0;font-size:var(--t-legende);letter-spacing:var(--espacement-legende);color:#a23b2a}
.formulaire button{
  margin-left:auto;font:inherit;font-size:var(--t-legende);letter-spacing:var(--espacement-legende);
  background:none;border:0;padding:.6vw 0;color:var(--encre);transition:opacity .2s;
}
.formulaire button:hover{opacity:.6}
.formulaire-merci{margin:0;text-align:center;font-size:var(--t-titre);line-height:1.4}
.page-contact .pied{margin-top:0}

/* Page projet ------------------------------------------------------- */
/* Maquette 2000 px : texte à 83 px, médias de 691 à 1917 px. */
.projet{
  display:grid;grid-template-columns:30.4vw minmax(0,1fr);
  padding:var(--h-entete) var(--marge) 0 var(--marge);
}
.projet-texte{
  position:sticky;top:var(--h-entete);align-self:start;height:calc(100vh - var(--h-entete));
  padding:5.6vw 2vw 0 0;display:flex;flex-direction:column;
}
.projet-titre{margin:0;font-weight:400;font-size:3.15vw;line-height:1.02;letter-spacing:-.005em}
.projet-sous-titre, .projet-description p{
  margin:0;font-size:var(--t-liste);line-height:1.13;
}
.projet-sous-titre{margin-top:10.2vw}
.projet-description{margin-top:4.1vw;display:grid;gap:1.05em;max-width:27.4vw}
.projet-annee{
  margin:2.75vw 0 0;font-size:var(--t-legende);letter-spacing:var(--espacement-legende);
}
.projet-medias{display:grid;gap:1.05vw;padding-bottom:7vw}
.projet-medias.serre{gap:.4vw}   /* Barbara’s Closet : rangées resserrées comme la maquette */
.br-m{display:none}   /* retours à la ligne propres au téléphone */
.media{display:block;width:100%;background:var(--attente);object-fit:cover}
.media-rang{display:grid;gap:.35vw}
.media-rang.deux{grid-template-columns:1fr 1fr}
.media-rang.deux .media{aspect-ratio:609/764}
.media-rang.deux.paysage .media{aspect-ratio:609/460}   /* McLaren : images de film, format paysage */
.media-rang.trois{grid-template-columns:repeat(3,1fr);gap:.25vw}
.media-rang.trois .media{aspect-ratio:405/509}
.media.plein{aspect-ratio:1226/697}

.film{position:relative;aspect-ratio:1226/687;background:#9d9b97;overflow:hidden}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film.film-mclaren{aspect-ratio:1226/926;margin-bottom:.65vw}   /* film en 4:3, comme la maquette */
.visuel.film{aspect-ratio:auto;width:100%}
.film-commandes{
  position:absolute;left:1.5vw;right:1.5vw;bottom:2.75vw;
  display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:.9vw;
  color:var(--blanc);font-size:var(--t-legende);letter-spacing:var(--espacement-legende);
}
.film-commandes button{
  font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;padding:0;
  cursor:url(assets/curseur-blanc.svg) 16 16, pointer;transition:opacity .2s;
}
.film-commandes button:hover{opacity:.6}
.film-barre{
  position:absolute;left:0;right:0;bottom:-6px;height:13px;
  cursor:url(assets/curseur-blanc.svg) 16 16, pointer;
}
.film-barre::before, .film-barre span{
  content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:rgba(255,255,255,.45);
}
.film-barre span{background:var(--blanc);transform-origin:left;transform:scaleX(0)}

/* Selected works ---------------------------------------------------- */
.ouverture-travaux .logotype{color:inherit}
.ouverture-travaux .logotype:hover{opacity:1}
.travaux-intro{display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto;padding-top:48px}
.travaux-titre{margin:0;font-weight:400;font-size:var(--t-titre);line-height:1.2}
.travaux-compte, .travaux-indice{
  margin:0;font-size:var(--t-legende);letter-spacing:var(--espacement-legende);
}
.travaux-indice{position:absolute;left:50%;bottom:1.4vw;transform:translateX(-50%);animation:indice 2.4s ease-in-out infinite}
.ouverture-travaux{position:relative}
@keyframes indice{0%,100%{transform:translate(-50%,0);opacity:.35}50%{transform:translate(-50%,6px);opacity:1}}

.tunnel{height:calc(8 * 90vh + 200vh);position:relative;border-top:var(--filet) solid var(--trait)}
.tunnel-scene{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  perspective:900px;perspective-origin:50% calc(50% - var(--h-legende) / 2);   /* le zoom part du centre exact de la planche */
}
.tunnel{--fil:clamp(3px,.42vw,6px)}   /* le fil blanc entre les photos, identique partout */
.tunnel-monde{position:absolute;inset:0;transform-style:preserve-3d}
.tunnel-projet{
  position:absolute;left:0;top:0;width:100%;height:calc(100% - var(--h-legende));padding:var(--fil);
  display:grid;gap:var(--fil);grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));
  visibility:hidden;                                  /* le script affiche les planches proches de la caméra */
}
.tunnel-projet:first-child{visibility:visible}
.tunnel-projet:focus-visible{outline:2px solid var(--encre);outline-offset:-6px}
/* chaque projet : une planche de 6 photos de tailles différentes qui remplit tout l'écran,
   avec une grande photo principale ; la composition change d'un projet à l'autre */
.planche-A{grid-template-areas:"a a a b c c" "a a a b c c" "a a a d e f" "a a a d e f"}
.planche-B{grid-template-areas:"a b b b c c" "a b b b c c" "d b b b e f" "d b b b e f"}
.planche-C{grid-template-areas:"a a b c c c" "a a b c c c" "d e f c c c" "d e f c c c"}
.planche-D{grid-template-areas:"a a b c c d" "a a b c c d" "e e e e f f" "e e e e f f"}
.tunnel-projet img:nth-child(1){grid-area:a}.tunnel-projet img:nth-child(2){grid-area:b}
.tunnel-projet img:nth-child(3){grid-area:c}.tunnel-projet img:nth-child(4){grid-area:d}
.tunnel-projet img:nth-child(5){grid-area:e}.tunnel-projet img:nth-child(6){grid-area:f}
.tunnel-projet img{
  display:block;position:relative;width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;background:var(--attente);
}
.tunnel-projet:hover{opacity:1}
.tunnel-legende{
  position:absolute;left:0;right:0;bottom:0;height:var(--h-legende);padding:0 var(--marge);
  display:grid;grid-template-columns:1fr 1fr auto;align-items:center;background:var(--fond);
  border-top:var(--filet) solid var(--trait);border-bottom:var(--filet) solid var(--trait);
  font-size:var(--t-legende);letter-spacing:var(--espacement-legende);z-index:300;
}
.tunnel-nom{justify-self:center}
.tunnel-progres{position:absolute;left:0;right:0;bottom:var(--h-legende);height:2px;z-index:300}
.tunnel-progres span{display:block;height:100%;background:var(--encre);transform-origin:left;transform:scaleX(0)}

.index{
  position:relative;z-index:20;background:var(--fond);border-top:var(--filet) solid var(--trait);
  margin-top:-100vh;margin-top:-100svh;min-height:calc(100vh - var(--h-legende));
  padding:calc(var(--h-entete) + 3vw) var(--marge) 4vw;
}
.index-entete, .index-liste a{
  display:grid;grid-template-columns:8fr 30fr 30fr 10fr;align-items:center;
}
.index-entete{
  padding-bottom:1vw;border-bottom:var(--filet) solid var(--trait);
  font-size:var(--t-legende);letter-spacing:var(--espacement-legende);
}
.index-entete span:last-child, .index-liste a span:last-child{justify-self:end}
.index-liste{list-style:none;margin:0;padding:0}
.index-liste li{opacity:0;transform:translateY(14px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.index-liste li.vu{opacity:1;transform:none}
.index-liste a{
  padding:1.35vw 0;border-bottom:var(--filet) solid var(--trait);font-size:var(--t-titre);
  position:relative;overflow:hidden;transition:opacity .35s ease;
}
.index-liste a:hover, .index-liste a:focus-visible{opacity:1}
.index-liste:has(a:hover) a:not(:hover), .index-liste:has(a:focus-visible) a:not(:focus-visible){opacity:.3}
.index-liste a:focus-visible{outline:1px solid var(--encre);outline-offset:-1px}
.index-liste a span{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.index-liste a:hover span:nth-child(2), .index-liste a:focus-visible span:nth-child(2){transform:translateX(1.2vw)}
.index-liste a span:first-child, .index-liste a span:nth-child(3), .index-liste a span:last-child{
  font-size:var(--t-legende);letter-spacing:var(--espacement-legende);
}
.index-liste a::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--encre);
  transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.index-liste a:hover::after, .index-liste a:focus-visible::after{transform:scaleX(1)}
/* aperçu : deux calques qui se fondent, à côté du curseur, jamais dessus */
.index-apercu{
  position:fixed;left:0;top:0;width:min(18vw,340px);aspect-ratio:4/5;z-index:60;pointer-events:none;
  opacity:0;transition:opacity .25s ease;will-change:transform;
}
.index-apercu.visible{opacity:1}
.index-apercu img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--attente);
  opacity:0;transform:scale(1.12);transition:opacity .35s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.index-apercu img.actif{opacity:1;transform:scale(1)}
/* pied : recouvre aussi le bas du tunnel épinglé */
.page-travaux .pied{position:relative;z-index:20;background:var(--fond);margin-top:0}

@media (prefers-reduced-motion:reduce){
  .travaux-indice{animation:none}
}

/* Selected Works, version « duo » : deux photos par projet, comme les planches de moodboard de Marie.
   Une grande, une petite, chacune collée à un bord (coin ou milieu du côté) ; le côté s'inverse d'un projet à l'autre. */
.tunnel-projet.duo{display:block;padding:0;overflow:hidden}
.tunnel-seul .tunnel-scene{perspective:none}
/* l'opacité de chaque projet suit la position de défilement (réglée par le script à chaque image) */
.tunnel-seul .tunnel-projet{visibility:visible;opacity:0;pointer-events:none;will-change:opacity}
.tunnel-seul .tunnel-projet img{background:none}   /* une photo pas encore là reste blanche, jamais un bloc gris */
.tunnel-projet.duo img{
  position:absolute;width:auto;height:var(--h);aspect-ratio:var(--ar);max-width:var(--mw);
  --bord:0px;   /* écart aux bords de la planche : 0 = collé, comme la maquette */
}
.duo .g{--h:88%;--mw:58%}
.duo .p{--h:38%;--mw:30%}
.duo .g.large{--h:68%}
.duo .p.large{--h:32%}
.duo .hg{top:var(--bord);left:var(--bord)}
.duo .hd{top:var(--bord);right:var(--bord)}
.duo .bg{bottom:var(--bord);left:var(--bord)}
.duo .bd{bottom:var(--bord);right:var(--bord)}
.duo .mg{top:calc((100% - var(--h)) / 2);left:var(--bord)}
.duo .md{top:calc((100% - var(--h)) / 2);right:var(--bord)}
@media (max-width:760px){
  /* Téléphone : la section fait un écran, de hauteur FIXE (svh : ne suit pas la barre d'adresse, les photos ne se
     redimensionnent jamais) ; la page ne défile pas pendant le diaporama, c'est le doigt qui pilote le fondu. */
  /* la section est un point d'arrêt OBLIGATOIRE de la page (scroll-snap-stop) : même un geste avec élan, à l'aller
     comme au retour, s'y arrête — c'est le navigateur qui la « bloque », pas un script */
  html .tunnel.tunnel-seul{height:100vh;height:100svh;scroll-snap-align:start;scroll-snap-stop:always;touch-action:pan-y}
  html .tunnel.tunnel-seul.tient{touch-action:none}         /* calée sur un projet du milieu : le doigt n'est que pour le diaporama */
  html .tunnel-seul .cran{display:none}
  html .tunnel-seul .tunnel-scene{position:absolute;inset:0;height:auto}
  .duo .g{--h:62%;--mw:80%}
  .duo .p{--h:30%;--mw:50%}
  .duo .g.large{--h:40%;--mw:100%}
  .duo .p.large{--h:26%;--mw:70%}
  /* au téléphone, une photo au milieu d'un côté partirait sous l'autre : la grande descend en bas, la petite monte en haut */
  .duo .g.mg, .duo .g.md{top:auto;bottom:var(--bord)}
  .duo .p.mg, .duo .p.md{top:var(--bord)}
}

/* Version « duo » : l'index est en haut de page, avant les planches (plus de recouvrement en bas) */
.index.index-haut{margin-top:0;min-height:0;z-index:auto;padding:4vw var(--marge) 5vw}
/* huit écrans de haut, la scène reste collée en haut pendant qu'on les traverse ; chaque cran est un point d'arrêt natif */
.tunnel.tunnel-seul{height:calc(8 * 100vh);height:calc(8 * 100svh)}      /* svh : ne bouge pas quand la barre d'adresse du téléphone se replie, donc les points d'arrêt non plus */
.tunnel-seul .tunnel-scene{position:sticky;top:0;height:100vh;height:100svh}
.tunnel-seul .cran{position:absolute;left:0;right:0;height:100vh;height:100svh;top:calc(var(--i) * 100vh);top:calc(var(--i) * 100svh);scroll-snap-align:start;scroll-snap-stop:always;pointer-events:none}
html:has(.tunnel-seul){scroll-snap-type:y mandatory;scroll-behavior:auto}   /* arrêts natifs ; pas de lissage CSS en plus (le script le demande lui-même quand il faut) */
.ouverture-travaux{scroll-snap-align:start}
.tunnel-seul ~ .pied{scroll-snap-align:end}
.tunnel-seul .tunnel-progres{display:none}   /* pas de barre de chargement : un simple trait fin au-dessus de la légende */
.tunnel.tunnel-seul ~ .pied{margin-top:10vw}   /* de l'air entre la légende du dernier projet et le pied de page */
/* index simple : pas d'apparition, pas de glissement ni de trait animé, juste le lien qui s'estompe au survol */
.index-haut .index-liste li{opacity:1;transform:none;transition:none}
.index-haut .index-liste a span, .index-haut .index-liste a:hover span:nth-child(2), .index-haut .index-liste a:focus-visible span:nth-child(2){transform:none;transition:none}
.index-haut .index-liste a::after{display:none}
.index-haut .index-liste:has(a:hover) a:not(:hover), .index-haut .index-liste:has(a:focus-visible) a:not(:focus-visible){opacity:1}
.index-haut .index-liste a:hover{opacity:.5}
@media (max-width:760px){
  .index.index-haut{padding:40px var(--marge) 48px}
  .tunnel.tunnel-seul ~ .pied{margin-top:96px}
}

/* Pied ------------------------------------------------------------ */
.pied{
  margin-top:5.2vw;height:var(--h-legende);padding:0 var(--marge);
  display:grid;grid-template-columns:513fr 587fr 664fr auto;align-items:center;
  border-top:var(--filet) solid var(--trait);border-bottom:var(--filet) solid var(--trait);
  font-size:var(--t-legende);letter-spacing:var(--espacement-legende);
}
.pied .marque-texte{font-size:clamp(10px,.85vw,20px);--espacement-marque:.38em}

/* Téléphone ------------------------------------------------------- */
@media (max-width:760px){
  :root{
    --t-nav:9.5px;--t-texte:13px;--t-legende:9.5px;--t-marque:9.5px;
    --h-visuel:110vw;--h-entete:50px;
  }
  .ouverture{min-height:auto;padding-top:28px;padding-bottom:28px}
  .ouverture-nav{margin-top:28px}
  .presentation{padding-top:64px}
  .presentation br{display:none}
  .rang, .rang-double{display:contents}   /* au téléphone, chaque photo s'empile seule */
  #selected-works .tuile{position:sticky;top:0;background:var(--fond)}
  .rang-double .tuile + .tuile .legende{border-left:0}
  .tuile-pleine .visuel{height:75vw}
  .visuel-provisoire{height:90.6vw}
  .entete{grid-template-columns:1fr auto auto auto;gap:14px}
  .embleme{width:20px}
  .entete-marque{gap:7px}
  .entete-nav a:nth-child(3){justify-self:auto}
  .tunnel{height:calc(8 * 75vh + 200vh)}
  .tunnel-projet, .planche-A, .planche-B, .planche-C, .planche-D{
    grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:var(--fil);padding:var(--fil);
    grid-template-areas:"a a" "b c" "d e" "f f";
  }
  /* au téléphone, la photo principale de chaque planche reste en grand en haut */
  .planche-B{grid-template-areas:"b b" "a c" "d e" "f f"}
  .planche-C{grid-template-areas:"c c" "a b" "d e" "f f"}
  .planche-D{grid-template-areas:"e e" "a b" "c d" "f f"}
  /* au téléphone, tout sur une ligne : CAMPAIGN – IN BARBARA’S CLOSET –   02 / 08 */
  .tunnel-legende{grid-template-columns:auto 1fr auto;column-gap:.6em;font-size:8.5px;letter-spacing:.2em;white-space:nowrap}
  .tunnel-nom{justify-self:start;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .travaux-intro{padding-top:56px}
  .index{padding-top:calc(var(--h-entete) + 24px)}
  .index-entete{display:none}
  .index-liste a{grid-template-columns:3fr 10fr;row-gap:6px;padding:16px 0}
  .index-liste a span:nth-child(3){grid-column:2}
  .index-liste a span:last-child{display:none}
  .projet{grid-template-columns:1fr;row-gap:40px}
  .projet{grid-template-columns:minmax(0,1fr)}
  .projet-texte{position:static;height:auto;padding:24px 0 0}
  .projet-titre{font-size:44px}
  .projet-sous-titre{margin-top:32px}
  .projet-description{margin-top:24px;max-width:none}
  .projet-annee{margin-top:24px}
  .projet-medias{gap:8px;padding-bottom:48px}
  .film-commandes{left:12px;right:12px;bottom:14px;padding-bottom:8px}
  .impact{grid-template-columns:1fr;row-gap:24px;padding-top:40px;padding-bottom:48px}
  /* au téléphone : trois carrés (et non des rectangles hauts), la voiture est donc moins recadrée : on voit le fond autour */
  .impact-photos{gap:4px}
  .impact-photos img{height:auto;aspect-ratio:1}
  .savoir-faire{display:grid}
  .savoir-faire-titres, .savoir-faire-listes{display:contents}
  .savoir-faire h3{
    height:var(--h-legende);display:flex;align-items:center;padding:0 var(--marge);
    border-top:var(--filet) solid var(--trait);border-bottom:var(--filet) solid var(--trait);margin-bottom:calc(-1 * var(--filet));
  }
  .savoir-faire ul{padding:20px var(--marge) 32px}
  .savoir-faire h3:nth-child(1){order:1} .savoir-faire ul:nth-child(1){order:2}
  .savoir-faire h3:nth-child(2){order:3} .savoir-faire ul:nth-child(2){order:4}
  .savoir-faire h3:nth-child(3){order:5} .savoir-faire ul:nth-child(3){order:6}
  .savoir-faire h3:nth-child(4){order:7} .savoir-faire ul:nth-child(4){order:8}
  .coordonnees{grid-template-columns:1fr;row-gap:36px;padding-top:36px;padding-bottom:36px}
  .coordonnees-marque{gap:14px;margin:10px 0}   /* comme sur ordinateur : adresse, logo au milieu, contacts ; même respiration (≈ 52 px) au-dessus et au-dessous */
  .coordonnees-marque .embleme{width:64px}
  .coordonnees .contacts{justify-self:start;margin-right:0}
  .coordonnees-adresse, .contacts{grid-auto-rows:auto;row-gap:14px}
  .devise{padding:96px var(--marge) 120px}
  .contact{gap:40px;padding-top:calc(var(--h-entete) + 40px);padding-bottom:80px}
  .formulaire, .formulaire-merci{width:100%}
  .formulaire{gap:28px}
  /* SUBJECT - sur sa ligne, les trois choix dessous : de l'air entre les deux, et rien ne passe à la ligne tout seul */
  .formulaire legend{float:left;width:100%;margin:0 0 16px}
  .formulaire-sujet{clear:both}
  .formulaire-paire{grid-template-columns:1fr;gap:28px}
  .champ{gap:8px}
  .champ input, .champ textarea{padding:6px 0 8px;font-size:16px}  /* 16 px : pas de zoom auto sur iPhone */
  .champ textarea{min-height:140px}
  .formulaire-pied{margin-top:-8px;flex-wrap:wrap}
  .pied{
    height:auto;padding:18px var(--marge);margin-top:48px;
    grid-template-columns:1fr auto;row-gap:14px;align-items:start;
  }
  .pied .marque-texte{grid-column:1;grid-row:1 / span 3}
  .pied a{grid-column:2;justify-self:end;text-align:right}
}

/* Téléphone — maquettes de la cliente (oct. 2026) ---------------------------------------------
   Au téléphone, le site reprend la composition de l'ordinateur à l'échelle de l'écran : tout est
   en vw, relevé sur les maquettes (375 px de large ; 1 vw = 3,75 px). */
@media (max-width:760px){
  :root{
    --marge:3.33vw;                          /* 12,5 px */
    --t-logotype:8.92vw;
    --t-nav:1.88vw;
    --t-texte:3.08vw;
    --t-marque:1.78vw;
    --h-entete:10.2vw;
    --pixel:1px;
  }
  @media (min-resolution:2dppx){ :root{--pixel:.5px} }
  @media (min-resolution:3dppx){ :root{--pixel:.334px} }

  /* Traits : un seul pixel d'écran, comme la finesse de l'ordinateur. Un trait CSS de 1 px fait 3 pixels sur
     un iPhone, et Chrome arrondit tout trait plus fin à 1 px : on les dessine donc en ombre intérieure, qui n'est
     pas arrondie. --pixel = 1 pixel d'écran. */
  .entete, .tuile .legende, .pied, .coordonnees, .savoir-faire h3, .savoir-faire-titres, .champ input, .champ textarea,
  .formulaire-sujet input:checked + span{border-top:0;border-bottom:0}
  .tuile .legende, .savoir-faire h3{margin-bottom:0}
  .entete{box-shadow:inset 0 calc(-1 * var(--pixel)) 0 var(--trait)}
  .entete.sur-image{box-shadow:inset 0 calc(-1 * var(--pixel)) 0 rgba(255,255,255,.85)}
  .tuile .legende, .pied, .coordonnees, .savoir-faire h3{
    box-shadow:inset 0 var(--pixel) 0 var(--trait), inset 0 calc(-1 * var(--pixel)) 0 var(--trait);
  }
  .champ input, .champ textarea, .formulaire-sujet input:checked + span{box-shadow:inset 0 calc(-1 * var(--pixel)) 0 var(--trait)}

  /* Ouverture (accueil, Elmē Team) : logo, menu, grand blanc, texte ; la photo commence à 132 vw */
  .ouverture{min-height:132.4vw;padding:13.1vw var(--marge) 6.3vw}
  .logotype{font-size:var(--t-logotype);margin-left:-.085em}   /* le E s'aligne sur la marge, comme la maquette */
  .ouverture-nav{margin-top:3.7vw;font-size:var(--t-nav);line-height:.99}
  .presentation{padding-top:0;font-size:var(--t-texte);line-height:1.084;letter-spacing:0}
  .presentation br{display:inline}

  /* Selected Works : les photos s'empilent pleine largeur, chacune suivie de son bandeau */
  .tuile-pleine .visuel{height:111.3vw}   /* Elmē Team : la photo d'équipe, cadrée serré comme la maquette */
  #selected-works{display:flex;flex-direction:column}
  #selected-works .tuile{order:2}
  #selected-works .tuile .visuel{height:111.3vw}
  #selected-works .tuile-pleine .visuel{height:45.6vw}
  #selected-works .tuile[data-lien="barbaras-closet.html"]{order:1}
  #selected-works .tuile[data-lien="barbaras-closet.html"] .visuel img{transform:scale(1.3);transform-origin:50% 0}   /* cadrage serré de la maquette */
  #selected-works .tuile[data-lien="mclaren.html"]{order:3}
  #selected-works .tuile[data-lien="aleima.html"]{order:4}
  #selected-works .tuile[data-lien="garbo.html"]{order:5}
  #selected-works .tuile-pleine[data-lien="stella-forest.html"]{order:6}
  #selected-works .tuile[data-lien="wrpd-magazine.html"]{order:7}
  #selected-works .tuile[data-lien="bec-lauder.html"]{order:8}
  #selected-works .tuile[data-lien="barbaras-closet-ecom.html"]{order:9}
  /* chaque photo glisse par-dessus la précédente : l'ordre d'empilement suit l'ordre affiché (sans ça, Safari peut
     garder la vidéo de Stella au-dessus de la photo suivante) */
  #selected-works .tuile{z-index:2;isolation:isolate}
  #selected-works .tuile[data-lien="barbaras-closet.html"]{z-index:1}
  #selected-works .tuile[data-lien="mclaren.html"]{z-index:3}
  #selected-works .tuile[data-lien="aleima.html"]{z-index:4}
  #selected-works .tuile[data-lien="garbo.html"]{z-index:5}
  #selected-works .tuile-pleine[data-lien="stella-forest.html"]{z-index:6}
  #selected-works .tuile[data-lien="wrpd-magazine.html"]{z-index:7}
  #selected-works .tuile[data-lien="bec-lauder.html"]{z-index:8}
  #selected-works .tuile[data-lien="barbaras-closet-ecom.html"]{z-index:9}
  /* films : l'image d'attente sert de fond au cadre ; la vidéo apparaît en fondu quand elle joue */
  .film.film-fond{background-color:transparent;background-position:center;background-size:cover;background-repeat:no-repeat}
  .film.film-fond video{opacity:0;transition:opacity .25s ease}
  .film.film-joue video{opacity:1}
  /* PLAY / UNMUTE : même taille que les légendes */
  .film-commandes{left:var(--marge);right:var(--marge);bottom:3vw;padding-bottom:1.6vw;font-size:1.27vw}
  /* bandeaux sous les photos (accueil, photo d'équipe) : fins, comme la maquette */
  .tuile .legende{height:2.76vw;gap:2vw;font-size:1.27vw}

  /* Coordonnées (Elmē Team) : trois colonnes comme sur ordinateur — adresse, logo, contacts — à l'échelle de l'écran */
  .coordonnees{grid-template-columns:1fr auto 1fr;row-gap:0;padding:5.5vw var(--marge) 4.8vw}
  .coordonnees-adresse, .contacts{font-size:1.4vw;letter-spacing:.3em;line-height:1.5;grid-auto-rows:5.6vw;row-gap:0}
  .coordonnees-marque{gap:4.2vw;margin:0;padding-top:.5vw}
  .coordonnees-marque .embleme{width:10vw}
  .coordonnees-marque .marque-texte{font-size:1.7vw}
  .coordonnees .contacts{justify-self:end;margin-right:-1vw}

  /* fin de l'accueil : la devise dans un grand blanc, puis le pied (les coordonnées restent sur Elmē Team) */
  #selected-works ~ .coordonnees{display:none}
  .devise{font-size:3vw;padding:12vw var(--marge) 43.5vw}
  .devise + .pied{margin-top:0}

  /* Pied : une seule ligne, comme sur ordinateur */
  .pied{
    height:5.5vw;padding:0 var(--marge);margin-top:12vw;
    grid-template-columns:28.07fr 29.8fr 27.27fr auto;row-gap:0;align-items:center;   /* colonnes relevées sur la maquette du pied */
    font-size:1.27vw;
  }
  .pied .marque-texte{grid-column:auto;grid-row:auto;font-size:1.9vw}
  .pied a{grid-column:auto;justify-self:auto;text-align:left}

  /* En-tête des pages : emblème + ELMĒ STUDIO, puis les trois liens, comme sur ordinateur */
  .entete{grid-template-columns:463fr 266fr 226fr auto;gap:0;padding:1vw var(--marge) 0;align-items:center}   /* texte centré dans la hauteur, comme la maquette */
  .contact{padding-top:26.3vw}   /* CONTACT US - au même niveau que les titres des pages projet */
  .entete-nav{font-size:var(--t-nav);line-height:.99}
  .entete-nav a:nth-child(3){justify-self:end}
  .embleme{width:3.1vw}
  .entete-marque{gap:1.6vw}

  /* Page projet : titre, grand blanc, sous-titre et texte ; les médias commencent à 132 vw, bord à bord */
  .projet{row-gap:0;padding-left:0;padding-right:0}
  .projet-texte{padding:15.6vw var(--marge) 4.9vw;min-height:calc(132.4vw - var(--h-entete))}   /* les médias commencent à 132 vw du haut de la page */
  .projet-titre{font-size:5.6vw;line-height:.97}
  /* repères fixes sur tous les projets (maquette Barbara's Closet) : titre, sous-titre et texte partent toujours
     du même endroit, l'année et les photos aussi ; seul le blanc avant l'année s'adapte à la longueur du texte */
  .projet-titre{min-height:calc(2 * .97em)}
  .projet-sous-titre{margin-top:36.2vw;font-size:2.8vw;line-height:1.08}
  .projet-description{margin-top:9.4vw;max-width:76vw;gap:.6em}
  .projet-description p{font-size:2.93vw;line-height:1.05}
  .projet-description .macron::before{--ecart:max(1px,.1em)}   /* interligne encore plus serré qu'à l'ordinateur */
  /* Barbara's Closet : la première photo garde le cadrage serré de l'accueil (zoom découpé à son cadre) */
  .projet-medias .media.plein[src$="barbaras-closet.jpg"]{transform:scale(1.3);transform-origin:50% 0;clip-path:inset(0 11.54% 23.08% 11.54%)}
  .projet-annee{margin-top:auto;padding-top:5vw;font-size:1.27vw}
  .br-m{display:inline}
  .projet-medias, .projet-medias.serre{gap:.4vw;padding-bottom:7vw}
}

/* Capitales centrées dans leur bandeau : dans Acumin, les capitales occupent le haut de la ligne (de .04 à .74 em) ;
   centrées telles quelles, elles paraissent remontées de .11 em. On redescend chaque texte d'autant, par une
   translation (au pixel d'écran près, là où un décalage de mise en page serait arrondi au pixel entier). */
@media (max-width:760px){ .legende > *, .pied > *, .tunnel-legende > *{transform:translateY(.114em)} }
@media (max-width:760px){
  /* au téléphone, chaque titre de savoir-faire est lui-même un bandeau (avec ses traits) : on décale par la marge */
  .savoir-faire h3{padding-top:.228em}
}
@media (max-width:760px){
  .macron::before{--trait:max(.34px,.079em);--ecart:max(1.25px,.238em)}
}
/* en-tête : à cette taille, la barre du Ē est ramenée à la graisse des lettres (pas plus épaisse que leurs fûts) */
@media (max-width:760px){ .entete .marque-texte .macron::before, .pied .marque-texte .macron::before, .coordonnees-marque .marque-texte .macron::before{transform:scaleY(.6);transform-origin:50% 100%} }