/* Studio Safran, prototype pellicule.
   Base : une bande de film statique, lisible sans JavaScript ni 3D.
   html.pellicule-active : la bande devient une bobine 3D pilotée par le scroll.
   Fluidité : pendant le scroll, seuls des transform et des opacity changent ; la trame du papier
   est un calque fixe peint une seule fois. */

:root {
  --ivoire: #EEE8DA;        /* papier baryté */
  --ivoire-clair: #F6F2E9;  /* papier de la planche contact */
  --encre: #1C1A17;
  --pellicule: #23201C;     /* support du film */
  --safran: #E3A21C;
  --safran-fonce: #8A5704;  /* safran lisible sur l'ivoire, même en petit (contraste 5:1) */
  --crayon: #F2C335;        /* crayon gras jaune des planches contact */
  --ruban: #EFE5C8;         /* ruban de masquage des étiquettes */
  --gris: #645E55;
  --titre: "Anybody", "Avenir Next Condensed", "Arial Narrow", sans-serif;  /* largeur variable 50 à 150 % */
  --texte: "Anybody", "Avenir Next", Helvetica, Arial, sans-serif;   /* une seule famille pour tout le site, celle du nom « Studio Safran » */
  --bord: "Martian Mono", ui-monospace, Menlo, monospace;
  --marge: clamp(1rem, 4vw, 3.5rem);
  --ressort: cubic-bezier(.2, 1.45, .4, 1);
  --glisse: cubic-bezier(.22, .8, .2, 1);
  --trame: radial-gradient(circle, rgb(28 26 23 / .07) 28%, transparent 31%) 0 0 / 5px 5px;
  --trous-x: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path fill-rule='evenodd' d='M0 0H100V100H0Z M33 12H67A8 8 0 0 1 75 20V50A8 8 0 0 1 67 58H33A8 8 0 0 1 25 50V20A8 8 0 0 1 33 12Z'/></svg>");
  --trous-y: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path fill-rule='evenodd' d='M0 0H100V100H0Z M12 33V67A8 8 0 0 0 20 75H50A8 8 0 0 0 58 67V33A8 8 0 0 0 50 25H20A8 8 0 0 0 12 33Z'/></svg>");
  /* quatre angles droits de viseur, dessinés en une seule couche */
  --angles:
    linear-gradient(currentColor, currentColor) left top / 18px 2px, linear-gradient(currentColor, currentColor) left top / 2px 18px,
    linear-gradient(currentColor, currentColor) right top / 18px 2px, linear-gradient(currentColor, currentColor) right top / 2px 18px,
    linear-gradient(currentColor, currentColor) left bottom / 18px 2px, linear-gradient(currentColor, currentColor) left bottom / 2px 18px,
    linear-gradient(currentColor, currentColor) right bottom / 18px 2px, linear-gradient(currentColor, currentColor) right bottom / 2px 18px;
}

*, *::before, *::after { box-sizing: border-box; }
html { color: var(--encre); background: var(--ivoire); scrollbar-gutter: stable; }
html.doux { scroll-behavior: smooth; }   /* les liens internes glissent au lieu de sauter */
html.projet-ouvert { overflow: hidden; }
body { margin: 0; font: 400 1rem/1.55 var(--texte); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--trame); }
body { background: var(--ivoire); }
main { position: relative; z-index: 1; }
main > section[id] { scroll-margin-top: 4.5rem; }   /* l'en-tête fixe ne recouvre pas le titre d'une section atteinte par un lien */
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.evitement {
  position: fixed; top: .75rem; left: .75rem; z-index: 40;
  padding: .6rem .9rem; background: var(--encre); color: var(--ivoire);
  transform: translateY(-160%);
}
.evitement:focus { transform: none; }

/* En-tête */
.entete {
  position: fixed; inset: 0 0 auto; z-index: 20;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1.1rem var(--marge); font-size: .95rem;
}
.marque { margin-right: auto; text-decoration: none; font: 800 1.55rem/1 var(--titre); font-stretch: 72%; letter-spacing: -.02em; }
.entete__nav {
  display: flex; gap: 1.2rem; align-items: center; padding: .3rem .32rem .3rem 1.1rem; border-radius: 999px;
  background: rgb(246 242 233 / .5); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgb(255 255 255 / .6); box-shadow: 0 .7rem 1.6rem -1.1rem rgb(28 26 23 / .4), inset 0 1px 0 rgb(255 255 255 / .7);
}
.entete__nav a { text-decoration: none; }
/* « Me contacter » : toujours visible, un point safran qui respire l'appelle doucement */
.entete__contact {
  position: relative; padding: .45rem .95rem .45rem 1.75rem; border: 1.5px solid currentColor; border-radius: 999px;
  font-weight: 600; transition: background .25s, color .25s, border-color .25s;
}
.entete__contact::before {
  content: ""; position: absolute; left: .8rem; top: 50%; width: .45rem; height: .45rem; margin-top: -.225rem;
  border-radius: 50%; background: var(--safran); box-shadow: 0 0 0 0 rgb(227 162 28 / .6); animation: appeler 2.6s ease-out infinite;
}
@keyframes appeler { 0% { box-shadow: 0 0 0 0 rgb(227 162 28 / .6); } 70%, 100% { box-shadow: 0 0 0 .55rem rgb(227 162 28 / 0); } }
.entete__nav .entete__contact:hover { text-decoration: none; background: var(--encre); color: var(--ivoire); border-color: var(--encre); }

.entete__nav a:hover, .bascule-mouvement:hover, .bascule-son:hover, .bascule-musique:hover { text-decoration: underline; text-underline-offset: .25em; }
.bascule-mouvement, .bascule-son, .bascule-musique { color: inherit; opacity: .7; }
/* son et musique : un point plein quand c'est allumé, un cercle vide quand c'est coupé */
.bascule-son, .bascule-musique { display: inline-flex; align-items: center; gap: .4em; }
.bascule-son::before, .bascule-musique::before { content: ""; width: .5em; height: .5em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.bascule-son[aria-pressed="true"]::before, .bascule-musique[aria-pressed="true"]::before { background: var(--safran); box-shadow: inset 0 0 0 1.5px var(--safran); }
.bascule-son[aria-pressed="true"], .bascule-musique[aria-pressed="true"] { opacity: 1; }
.bascule-mouvement[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-underline-offset: .25em; }
@media (max-width: 699px) { .entete__bascule { display: none; } }
/* petit écran : le logo tient sur une ligne, « Prestations » reste dans le pied de page et l'index */
.marque, .entete__nav a { white-space: nowrap; }
@media (max-width: 479px) {
  .entete { font-size: .88rem; gap: .6rem; }
  .marque { font-size: 1.3rem; }
  .entete__nav { gap: .75rem; padding-left: .85rem; }
  .entete__contact { padding: .42rem .8rem .42rem 1.5rem; }
  .entete__contact::before { left: .62rem; }
  .entete__studio { display: none; }   /* « Le studio » reste dans le pied de page et l'index */
}
@media (max-width: 359px) { .entete__nav a:not(.entete__contact) { display: none; } .entete__nav { padding-left: .32rem; } }

/* Introduction */
.sequence { position: relative; }
.intro { padding: 16vh var(--marge) 4vh; }
.intro__nom {
  margin: 0; font: 800 clamp(3.4rem, 15.5vw, 15rem)/.84 var(--titre);
  font-stretch: 72%;
  letter-spacing: -.035em;
}
.intro__nom > span { display: block; position: relative; isolation: isolate; }
/* le nom s'étire quand la pellicule se déroule : une simple transformation, sans recalcul du texte */
.pellicule-active .intro__nom > span { transform: scaleX(var(--etire, 1)); transform-origin: left center; will-change: transform; }
.pellicule-active .intro__nom > span + span { transform-origin: right center; }
/* un calque ivoire épais derrière les lettres, comme la bordure blanche d'un sticker : le nom reste lisible sur le film */
.intro__nom > span::before, .fin-bobine__nom > span::before {
  content: attr(data-texte); position: absolute; inset: 0; z-index: -1; pointer-events: none;
  color: var(--ivoire); -webkit-text-stroke: .12em var(--ivoire);
}
.intro__nom > span + span { text-align: right; }
/* À l'arrivée, le nom apparaît comme un tirage dans le révélateur, lettre après lettre */
.lettre { display: inline-block; animation: reveler 1.4s var(--glisse) both; animation-delay: calc(.12s + var(--i) * 55ms); }
@keyframes reveler {
  0% { opacity: 0; filter: blur(14px); color: #CDBFA6; transform: translateY(.12em); }
  55% { opacity: 1; filter: blur(2px); color: #6E6252; }
  100% { opacity: 1; filter: none; color: currentColor; transform: none; }
}
.intro__bas { display: grid; gap: .5rem; margin-top: 1.4rem; }
.intro__signature { margin: 0; font: 600 clamp(1.1rem, 1.7vw, 1.45rem)/1.25 var(--titre); font-stretch: 82%; max-width: 24rem; }
.intro__ligne { margin: 0; color: var(--gris); font-size: .92rem; }
.intro__signature, .intro__ligne { animation: apparaitre 1s var(--glisse) 1s both; }
@keyframes apparaitre { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } }
.consigne { margin: 0; padding: 0 var(--marge); color: var(--gris); }
.consigne a { margin-left: .9rem; color: var(--encre); }
.consigne__texte { font: 500 .72rem/1 var(--bord); letter-spacing: .06em; font-stretch: 85%; }

/* Film : bords perforés, communs à la bobine et aux planches contact */
.bande { list-style: none; margin: 0; padding: 0; }
.bande > li, .film { position: relative; --pas: calc(var(--r) * 1.35); }
.bande > li::before, .bande > li::after, .film::before, .film::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--r);
  background: var(--pellicule);
  -webkit-mask: var(--trous-x) 0 0 / var(--pas) 100% repeat-x;
          mask: var(--trous-x) 0 0 / var(--pas) 100% repeat-x;
}
.bande > li::before, .bande > li::after { opacity: calc((1 - var(--d, 0)) * var(--prof, 1)); }
.bande > li::before, .film::before { top: 0; }
.bande > li::after, .film::after { bottom: 0; transform: scaleY(-1); }

.vue__lien, .piece__milieu {
  display: block;
  background: rgb(35 32 28 / calc(1 - var(--d, 0)));
  padding: 0 var(--pad);
}
.vue__lien img { display: block; }
.vue__lien:focus-visible { outline: 3px solid var(--safran); outline-offset: 4px; }

.bord {
  position: absolute; z-index: 1; pointer-events: none; white-space: nowrap;
  font: 500 calc(var(--r) * .27)/1 var(--bord); font-stretch: 75%; letter-spacing: .04em; color: var(--safran);
  opacity: calc((1 - var(--d, 0)) * var(--prof, 1));
}
.bord--a, .bord--b { top: calc(var(--r) * .64); }
.bord--c, .bord--d { bottom: calc(var(--r) * .64); }
.bord--a, .bord--c { left: calc(var(--pad) + var(--r) * .2); }
.bord--b, .bord--d { right: calc(var(--pad) + var(--r) * .2); }

/* Chapitres : amorces de bobine entre les deux parcours */
.chapitre__milieu, .fin__milieu { color: var(--ivoire); display: grid; align-content: center; gap: .5rem; padding: 0 1.2rem; }
.chapitre__num { margin: 0; font: 500 calc(var(--r) * .34)/1 var(--bord); letter-spacing: .1em; color: var(--safran); text-transform: uppercase; }
.chapitre__titre { margin: 0; font: 800 calc(var(--r) * 1.05)/.92 var(--titre); font-stretch: 78%; letter-spacing: -.01em; }
.fin__titre { margin: 0; font: 800 1.7rem/1 var(--titre); font-stretch: 80%; }
.fin__liens { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .9rem; }
.fin__liens a:focus-visible { outline-color: var(--safran); }

/* Base statique (sans JS, sans 3D, ou animations réduites) : bande à faire glisser */
html:not(.pellicule-active) .bande {
  display: flex; align-items: flex-start; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; padding: 2rem var(--marge) 4.5rem;
}
html:not(.pellicule-active) .bande > li { --r: 1.7rem; --pad: .55rem; flex: none; padding: var(--r) 0; scroll-snap-align: center; }
html:not(.pellicule-active) .amorce { width: 7rem; }
html:not(.pellicule-active) .amorce .piece__milieu,
html:not(.pellicule-active) .chapitre__milieu,
html:not(.pellicule-active) .fin__milieu { height: min(52vh, 440px); }
html:not(.pellicule-active) .chapitre__milieu { width: 13rem; }
html:not(.pellicule-active) .vue__lien img { height: min(52vh, 440px); width: auto; max-width: none; }
html:not(.pellicule-active) .fin__milieu { width: 16rem; }
.vue__legende { position: absolute; top: calc(100% + .5rem); left: 0; margin: 0; font-size: .9rem; color: var(--gris); white-space: nowrap; }
html:not(.pellicule-active) .legende, html:not(.pellicule-active) .viseur { display: none; }

/* Pellicule active : scène collante, bobine 3D */
.pellicule-active .sequence { height: 900vh; }
.pellicule-active .scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; }
.pellicule-active .intro {
  position: absolute; inset: 0; z-index: 1; padding: 11vh var(--marge) 7vh; contain: layout;
  display: grid; grid-template-rows: 1fr auto; gap: 1.2rem; pointer-events: none;
}
.pellicule-active .intro__nom { display: flex; flex-direction: column; justify-content: space-between; }
.pellicule-active .intro__bas { margin: 0; }
.pellicule-active .consigne { position: absolute; right: var(--marge); bottom: 7vh; padding: 0; text-align: right; }
/* écran moyen : la consigne passe au-dessus des liens, sans toucher « Photographie & création IA » */
@media (min-width: 700px) and (max-width: 1199px) { .pellicule-active .consigne__texte { display: block; margin-bottom: .8rem; } }
.pellicule-active .plateau {
  position: absolute; inset: 0; z-index: 0; perspective: var(--perspective, 2000px); perspective-origin: 50% var(--centre, 47%);
}
.pellicule-active .bande { position: absolute; left: 50%; top: var(--centre, 47%); width: 0; height: 0; transform-style: preserve-3d; }
.pellicule-active .bande > li {
  position: absolute; transform-style: preserve-3d; will-change: transform;
  /* dos du film, visible quand la pièce passe à l'arrière de la bobine */
  background: linear-gradient(rgb(35 32 28 / calc((1 - var(--d, 0)) * var(--prof, 1))), rgb(35 32 28 / calc((1 - var(--d, 0)) * var(--prof, 1)))) center / 100% calc(100% - 2 * var(--r)) no-repeat;
}
.pellicule-active .axe-y > li { background-size: calc(100% - 2 * var(--r)) 100%; }
.pellicule-active .vue__lien, .pellicule-active .piece__milieu { position: absolute; inset: var(--r) 0; }
.pellicule-active .vue__lien, .pellicule-active .piece__milieu, .pellicule-active .bord { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.pellicule-active .vue__lien img { width: 100%; height: 100%; }
.pellicule-active .vue__lien, .pellicule-active .piece__milieu { opacity: var(--prof, 1); }
.pellicule-active .vue__legende { display: none; }
/* textes des séries : écrits dans la page (lus sans JavaScript par les moteurs et les assistants IA),
   affichés dans « Ce que fait le studio » et dans les projets */
.vue__resume, .vue__texte, .vue__plus, .chapitre__resume, .sous-series { display: none; }
.chapitre__accroche { margin: .7rem 0 0; max-width: 15ch; font: 600 calc(var(--r) * .5)/1.15 var(--titre); font-stretch: 82%; color: rgb(238 232 218 / .78); }
.rang__accroche { display: block; margin-top: .5rem; font: 700 clamp(1.05rem, 1.6vw, 1.3rem)/1.2 var(--titre); font-stretch: 84%; color: var(--encre); }

/* Axe vertical (mobile) : les perforations passent sur les côtés */
.axe-y > li::before, .axe-y > li::after {
  inset: 0 auto 0 0; width: var(--r); height: auto;
  -webkit-mask: var(--trous-y) 0 0 / 100% var(--pas) repeat-y;
          mask: var(--trous-y) 0 0 / 100% var(--pas) repeat-y;
}
.axe-y > li::after { left: auto; right: 0; transform: scaleX(-1); }
.pellicule-active .axe-y .vue__lien, .pellicule-active .axe-y .piece__milieu { inset: 0 var(--r); padding: var(--pad) 0; }
.axe-y .bord { writing-mode: vertical-rl; }
.axe-y .bord--a, .axe-y .bord--b { top: auto; left: calc(var(--r) * .64); }
.axe-y .bord--c, .axe-y .bord--d { bottom: auto; right: calc(var(--r) * .64); left: auto; }
.axe-y .bord--a, .axe-y .bord--c { top: calc(var(--pad) + var(--r) * .2); }
.axe-y .bord--b, .axe-y .bord--d { bottom: calc(var(--pad) + var(--r) * .2); }
.axe-y .chapitre__milieu { container-type: inline-size; }
.axe-y .chapitre__titre { font-size: min(calc(var(--r) * 1.6), 14cqi); }   /* « Photographie » tient toujours entre les perforations */

/* Viseur : quatre angles droits qui cadrent l'écran à l'arrivée, puis font le point sur chaque vue */
.viseur { position: absolute; left: 50%; top: var(--centre, 47%); width: 0; height: 0; z-index: 2; pointer-events: none; color: var(--encre); }
.viseur i { position: absolute; left: 0; top: 0; width: 26px; height: 26px; will-change: transform; animation: viser-entree 1s var(--glisse) .5s both; }
@keyframes viser-entree { from { opacity: 0; translate: calc(var(--sx) * -36px) calc(var(--sy) * -36px); } }
.viseur i::before { content: ""; position: absolute; inset: 0; border: 0 solid currentColor; transition: color .3s ease; }
.viseur i:nth-child(1) { --sx: 1; --sy: 1; }   .viseur i:nth-child(1)::before { border-width: 2px 0 0 2px; }
.viseur i:nth-child(2) { --sx: -1; --sy: 1; }  .viseur i:nth-child(2)::before { border-width: 2px 2px 0 0; }
.viseur i:nth-child(3) { --sx: 1; --sy: -1; }  .viseur i:nth-child(3)::before { border-width: 0 0 2px 2px; }
.viseur i:nth-child(4) { --sx: -1; --sy: -1; } .viseur i:nth-child(4)::before { border-width: 0 2px 2px 0; }
/* mise au point faite : les angles se resserrent d'un coup et passent au safran */
.viseur.net i::before { color: var(--safran-fonce); animation: verrou .45s var(--ressort); }
@keyframes verrou { 40% { translate: calc(var(--sx) * 6px) calc(var(--sy) * 6px); } }
.viseur__info {
  position: absolute; left: 0; top: 0; will-change: transform; white-space: nowrap;
  font: 500 .68rem/1 var(--bord); letter-spacing: .08em; font-stretch: 85%;
}
.viseur__info::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .5em; border-radius: 50%; background: currentColor; vertical-align: .05em; }
.viseur.net .viseur__info::before { background: var(--safran); }

/* Posemètre du viseur : l'aiguille bouge avec le scroll, comme une mesure de lumière */
.hud {
  position: absolute; left: 50%; bottom: 20px; z-index: 2; translate: -50% 0; display: flex; align-items: center; gap: 1.3rem;
  font: 500 .62rem/1 var(--bord); letter-spacing: .08em; font-stretch: 85%; color: var(--gris); pointer-events: none; opacity: 0; white-space: nowrap;
}
.hud__af::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .45em; border-radius: 50%; background: var(--safran); vertical-align: .05em; }
.hud__posemetre { position: relative; }
.hud__aiguille { position: absolute; left: 50%; top: -8px; width: 2px; height: 7px; margin-left: -1px; background: var(--safran-fonce); will-change: transform; }
@media (max-width: 699px) { .hud { display: none; } }
.fuite {
  position: absolute; right: -14vw; top: -12vh; z-index: -1; width: 48vw; height: 72vh; pointer-events: none; opacity: 0; will-change: opacity;
  background: radial-gradient(closest-side, rgb(227 162 28 / .15), rgb(227 162 28 / .05) 55%, transparent);
  animation: fuite 12s ease-in-out 2.5s infinite;
}
@keyframes fuite { 0%, 100% { opacity: 0; } 40% { opacity: 1; } 55% { opacity: .75; } 70% { opacity: 1; } }
.mouvement-reduit .fuite, .capture .fuite { animation: none; }
html:not(.pellicule-active) .hud, html:not(.pellicule-active) .fuite { display: none; }

/* Légende de la vue au centre */
.legende {
  position: absolute; left: var(--marge); bottom: 5vh; z-index: 2;
  display: grid; justify-items: start; gap: .1rem;
}
.legende > * { opacity: var(--op, 0); }
.legende.inactive { pointer-events: none; }
.legende p { margin: 0; }
.legende__parcours { font: 500 .7rem/1.2 var(--bord); letter-spacing: .08em; text-transform: uppercase; font-stretch: 85%; opacity: calc(var(--op, 0) * .75); }
.legende__titre { font: 800 clamp(1.9rem, 3.8vw, 3.2rem)/.95 var(--titre); font-stretch: 78%; letter-spacing: -.02em; }
.legende__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; margin-top: .5rem; }
.legende__ouvrir { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.legende__ouvrir:hover { text-decoration-thickness: 2px; }
.legende__contact { padding: .35rem .8rem; border: 1.5px solid currentColor; border-radius: 999px; font-weight: 600; transition: background .2s, color .2s; }
.legende__contact:hover { background: var(--encre); color: var(--ivoire); }

/* Étiquettes : ruban de masquage déchiré, texte machine */
.etiquette {
  display: inline-block; margin: 0; padding: .38rem .7rem .32rem; background: var(--ruban); color: var(--encre);
  font: 500 .74rem/1 var(--bord); font-stretch: 85%; letter-spacing: .06em; white-space: pre;
  clip-path: polygon(0 8%, 4% 0, 9% 10%, 14% 2%, 100% 0, 97% 30%, 100% 55%, 96% 78%, 100% 100%, 6% 94%, 0 100%, 3% 60%);
  transform: rotate(-3deg); box-shadow: 0 1px 0 rgb(0 0 0 / .08);
}
.legende__etiquette { justify-self: start; margin: .3rem 0 .45rem; }

/* Accueil : quatre stickers, tous différents, qui flottent, suivent un peu la souris et se déplacent */
@keyframes flotter { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -9px; rotate: 3deg; } }
@keyframes coller { from { opacity: 0; scale: 1.7; } to { opacity: 1; scale: 1; } }
.collage-intro { position: absolute; inset: 0; pointer-events: none; }
.collage-intro .sticker {
  position: absolute; width: auto; height: clamp(84px, 14vh, 150px);
  pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none;
  filter: drop-shadow(0 .45rem .7rem rgb(28 26 23 / .22));
  transform: translate(var(--dx, 0px), var(--dy, 0px))
             translate(calc(var(--mx, 0) * var(--p) * 1px), calc(var(--my, 0) * var(--p) * 1px))
             rotate(var(--r)) translateY(calc((1 - var(--accueil, 1)) * var(--fuite, -30vh)));
  animation: coller .6s var(--ressort) both, flotter var(--duree, 5s) ease-in-out infinite;
  animation-delay: var(--delai), calc(var(--delai) + .6s);
  transition: filter .25s ease;
}
.collage-intro .sticker.tenu { scale: 1.14; animation-play-state: paused; filter: drop-shadow(0 1.2rem 1.4rem rgb(28 26 23 / .3)); }
.collage-intro .s1 { left: 47%; top: 9%;  --r: -12deg; --delai: 1.1s;  --p: 18; --duree: 5.2s; }
.collage-intro .s2 { left: 8%;  top: 44%; --r: 9deg;   --delai: 1.3s;  --p: 26; --duree: 6.1s; --fuite: -40vh; }
.collage-intro .s3 { left: 84%; top: 37%; --r: -8deg;  --delai: 1.5s;  --p: 16; --duree: 5.6s; --fuite: 30vh; }
.collage-intro .s4 { left: 33%; top: 70%; --r: 7deg;   --delai: 1.7s;  --p: 22; --duree: 5.9s; --fuite: 36vh; }
html:not(.pellicule-active) .collage-intro { display: none; }
@media (max-width: 699px) { .collage-intro .sticker { height: 62px; } .collage-intro .s1 { left: 58%; top: 12%; } .collage-intro .s3 { left: 70%; top: 58%; } .collage-intro .s4 { left: 12%; top: 72%; } }

/* Mobile : la bande verticale passe sous l'en-tête et la légende, comme derrière une fenêtre */
@media (max-width: 699px) {
  .pellicule-active .entete { background: linear-gradient(var(--ivoire) 70%, transparent); padding-bottom: 1.6rem; }
  .pellicule-active .intro { padding-bottom: calc(7vh + 2.4rem); }
  .pellicule-active .consigne { left: var(--marge); bottom: 3vh; display: flex; flex-wrap: wrap; gap: .3rem .9rem; justify-content: flex-start; text-align: left; }
  .pellicule-active .consigne a { margin: 0; }
  .consigne__texte { flex-basis: 100%; }
  .pellicule-active .legende {
    left: 0; right: 0; bottom: 0; padding: 1.8rem var(--marge) calc(1.1rem + env(safe-area-inset-bottom));
    grid-template-columns: 1fr auto; column-gap: 1rem; align-items: end;
  }
  .pellicule-active .legende::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: var(--panneau, 0);
    background: linear-gradient(transparent, var(--ivoire) 1.6rem);
  }
  .pellicule-active .legende__parcours, .pellicule-active .legende__etiquette { grid-column: 1 / -1; }
  .pellicule-active .legende__titre { font-size: 1.9rem; grid-column: 1; }
  .pellicule-active .legende__actions { grid-column: 1 / -1; margin-top: .4rem; }
  .viseur__info { display: none; }
}

/* Planche contact : d'abord les deux bobines, puis leurs séries au clic */
.index { padding: 14vh var(--marge) 12vh; max-width: 90rem; margin: 0 auto; }
.index__tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 3rem; }
.index h2, .contact h2 { margin: 0; font: 800 clamp(2.8rem, 8vw, 7rem)/.88 var(--titre); font-stretch: 68%; letter-spacing: -.03em; }
.index__intro { margin: 0; max-width: 26rem; color: var(--gris); }

.feuille {
  margin-top: 2.6rem; padding: clamp(.4rem, 2vw, 1.4rem) clamp(1rem, 3vw, 2.6rem);
  background: var(--ivoire-clair); box-shadow: 0 1.4rem 2.6rem -1.6rem rgb(28 26 23 / .4), 0 .05rem .15rem rgb(28 26 23 / .12);
}
.rang + .rang { border-top: 1px solid rgb(28 26 23 / .14); }
.rang__tete { width: 100%; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .6rem clamp(1rem, 2.4vw, 2.2rem); padding: clamp(1.2rem, 3vw, 2rem) 0; text-align: left; }
.rang__num { align-self: start; margin-top: .6em; font: 500 .74rem/1 var(--bord); letter-spacing: .08em; color: var(--safran-fonce); }
.rang__titre { display: block; font: 800 clamp(2.4rem, 6.4vw, 5.6rem)/.88 var(--titre); font-stretch: 70%; letter-spacing: -.025em; transition: font-stretch .5s var(--glisse); }
.rang__tete:hover .rang__titre, .rang__tete[aria-expanded="true"] .rang__titre { font-stretch: 84%; }
.rang__liste { display: block; max-width: 38rem; margin-top: .55rem; color: var(--gris); font-size: .98rem; line-height: 1.45; }
.rang__apercu { display: flex; transition: opacity .3s ease, transform .5s var(--glisse); }
.rang__apercu .film { --r: .42rem; padding: var(--r) 0; }
.rang__apercu .film__cadre { padding: 0 .16rem; }
.rang__apercu img { height: clamp(52px, 6vw, 84px); }
.rang__tete[aria-expanded="true"] .rang__apercu { opacity: 0; transform: translateX(1.5rem); }
.rang__signe { position: relative; width: 2.6rem; height: 2.6rem; border: 1.5px solid currentColor; border-radius: 50%; transition: transform .45s var(--ressort), background .25s, color .25s; }
.rang__signe::before, .rang__signe::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1rem; height: 1.5px; margin: -.75px 0 0 -.5rem; background: currentColor; }
.rang__signe::after { transform: rotate(90deg); }
.rang__tete:hover .rang__signe { background: var(--encre); color: var(--ivoire-clair); }
.rang__tete[aria-expanded="true"] .rang__signe { transform: rotate(135deg); }
.rang__vues { list-style: none; margin: 0; padding: 0 0 clamp(1.6rem, 3vw, 2.6rem); display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.6rem 0; }
.rang__vues[hidden] { display: none; }
.rang__vues li { animation: apparaitre .55s var(--glisse) both; animation-delay: calc(var(--i, 0) * 70ms); }
@media (max-width: 699px) { .rang__apercu { display: none; } .rang__tete { grid-template-columns: auto 1fr auto; } }

/* Cellule de planche contact : un tirage dans son bord de film, légendé en dessous */
.film { padding: var(--r) 0; --r: .9rem; }
.film__cadre { display: block; position: relative; background: var(--pellicule); padding: 0 calc(var(--r) * .35); }
.film__cadre img { display: block; width: auto; margin-inline: auto; }   /* une photo verticale reste au centre de son cadre de film */
.cellule .film__cadre img { height: var(--h, clamp(9rem, 16vw, 13.5rem)); }
.cellule__legende { display: block; margin: .6rem .3rem 0; font: 500 .66rem/1.3 var(--bord); letter-spacing: .07em; font-stretch: 85%; color: var(--gris); text-transform: uppercase; }
.cellule__legende strong { display: block; margin-top: .15rem; font: 800 1.25rem/1 var(--titre); font-stretch: 80%; letter-spacing: 0; text-transform: none; color: var(--encre); }
.cellule__resume { display: block; max-width: 15rem; margin-top: .3rem; font: 400 .88rem/1.35 var(--texte); letter-spacing: 0; text-transform: none; color: var(--gris); }
/* au survol, les angles du viseur cadrent le tirage */
.cellule .film__cadre::after {
  content: ""; position: absolute; inset: calc(var(--r) * -1.7) calc(var(--r) * -.9); pointer-events: none;
  background: var(--angles); background-repeat: no-repeat; color: var(--encre);
  opacity: 0; transform: scale(1.1); transition: opacity .2s ease, transform .45s var(--ressort);
}
.cellule a:hover::after, .cellule a:focus-visible::after, .cellule [aria-current="true"]::after { opacity: 1; transform: none; }
.cellule [aria-current="true"]::after { color: var(--safran-fonce); }
.cellule a:focus-visible, .cellule button:focus-visible { outline: none; }

/* Contact : même papier, même typographie ; tout l'écran, un formulaire en un geste, un cachet de cire safran */
.contact {
  position: relative; min-height: 100vh; min-height: 100svh; padding: 15vh var(--marge) 0;
  display: grid; grid-template-rows: 1fr auto; overflow: hidden;
}
.contact__grille { width: 100%; max-width: 90rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); gap: clamp(2.5rem, 6vw, 6.5rem); align-items: center; }
.contact__sur { margin: 0 0 1.2rem; font: 500 .72rem/1 var(--bord); letter-spacing: .14em; text-transform: uppercase; color: var(--safran-fonce); }
.contact h2 { margin: 0; font: 800 clamp(3rem, 7vw, 7rem)/.92 var(--titre); font-stretch: 96%; letter-spacing: -.012em; }
.contact__chapo { margin: 1.6rem 0 0; max-width: 30rem; font-size: 1.08rem; line-height: 1.65; color: var(--gris); }
.carte-contact {
  position: relative; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--ivoire-clair); rotate: -1deg;
  box-shadow: 0 1.6rem 2.8rem -1.4rem rgb(28 26 23 / .42), 0 .05rem .2rem rgb(28 26 23 / .14);
}
.carte-contact.frappe { animation: frapper .45s .42s ease-out; }
@keyframes frapper { 25% { translate: 0 6px; scale: .992; } }
.formulaire { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.1rem 1.4rem; margin: 0; }
.formulaire label { display: grid; gap: .35rem; font: 500 .7rem/1.2 var(--bord); letter-spacing: .06em; font-stretch: 85%; text-transform: uppercase; }
.formulaire input[type="text"], .formulaire textarea {
  font: 400 1.02rem/1.4 var(--texte); color: var(--encre); background: transparent; text-transform: none; letter-spacing: 0;
  border: 0; border-bottom: 1.5px solid rgb(28 26 23 / .5); padding: .5rem .1rem; border-radius: 0; transition: border-color .2s;
}
.formulaire input[type="text"]:focus, .formulaire textarea:focus { outline: none; border-color: var(--encre); }
.formulaire textarea { resize: vertical; }
.facultatif { color: var(--gris); text-transform: none; letter-spacing: .02em; }
.formulaire__large, .formulaire__envoi, .choix { grid-column: 1 / -1; }
/* Votre projet : des pastilles à cocher, une catégorie en un clic */
.choix { margin: 0; padding: 0; border: 0; min-width: 0; }
.choix legend { padding: 0; margin-bottom: .2rem; font: 500 .7rem/1.2 var(--bord); letter-spacing: .06em; font-stretch: 85%; text-transform: uppercase; }
.choix legend span { color: var(--gris); text-transform: none; letter-spacing: .02em; margin-left: .4rem; }
.choix__groupe { margin: .85rem 0 .45rem; font: 800 1rem/1 var(--titre); font-stretch: 100%; }
.choix__liste { display: flex; flex-wrap: wrap; gap: .45rem; }
.choix label { display: block; font: inherit; text-transform: none; letter-spacing: 0; }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix label span {
  display: inline-block; padding: .5rem .9rem .48rem; border: 1.5px solid rgb(28 26 23 / .28); border-radius: 999px;
  font: 500 .92rem/1 var(--texte); cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .35s var(--ressort);
}
.choix label:hover span { border-color: var(--encre); }
.choix input:checked + span { background: var(--encre); color: var(--ivoire-clair); border-color: var(--encre); transform: scale(1.04); }
.choix input:checked + span::before { content: "✓ "; color: var(--safran); }
.choix input:focus-visible + span { outline: 2px solid var(--encre); outline-offset: 2px; }
.formulaire__envoi { margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; }
/* Le bouton d'envoi : une lueur passe dessus de temps en temps, la flèche avance au survol */
.envoyer {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .8rem;
  padding: 1rem 1.5rem 1rem 1.6rem; border-radius: 999px; background: var(--encre); color: var(--ivoire-clair);
  font: 600 1rem/1 var(--texte); transition: transform .35s var(--ressort), box-shadow .3s;
  box-shadow: 0 .8rem 1.4rem -.8rem rgb(28 26 23 / .7);
}
.envoyer::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgb(255 236 190 / .38) 50%, transparent 70%);
  animation: lueur 4.5s ease-in-out 1.5s infinite;
}
@keyframes lueur { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.envoyer__fleche { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--safran); color: var(--encre); transition: transform .35s var(--ressort); }
.envoyer:hover { transform: translateY(-2px) scale(1.02); }
.envoyer:hover .envoyer__fleche { transform: translateX(4px) rotate(-8deg); }
.envoyer:active { transform: scale(.97); }
.formulaire__statut { font-size: .88rem; color: var(--gris); }
.formulaire__statut.erreur { color: var(--safran-fonce); }
.carte-contact.envoye .formulaire { opacity: .3; pointer-events: none; transition: opacity .5s ease .5s; }
.merci {
  position: absolute; left: 50%; top: 70%; z-index: 2; width: min(84%, 24rem); translate: -50% -50%; margin: 0; text-align: center;
  font: 800 clamp(1.6rem, 2.6vw, 2.2rem)/1 var(--titre); font-stretch: 96%; animation: apparaitre .6s var(--glisse) .7s both;
}
.merci small { display: block; margin-top: .7rem; font: 500 .7rem/1.3 var(--bord); letter-spacing: .05em; color: var(--gris); }
.merci__encore { display: inline-block; margin-top: 1.1rem; font: 600 .95rem/1 var(--texte); text-decoration: underline; text-underline-offset: .3em; pointer-events: auto; }
/* Cachet de cire safran : il tombe, s'écrase, la cire s'étale, la carte encaisse le choc */
.sceau {
  position: absolute; right: clamp(-3rem, -3vw, -1rem); top: clamp(-4.4rem, -5vw, -2.8rem); width: clamp(124px, 12vw, 176px); aspect-ratio: 1;
  opacity: 0; rotate: -9deg; filter: drop-shadow(0 .55rem .6rem rgb(60 36 0 / .35)); cursor: pointer;
}
.sceau svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sceau.pose { opacity: 1; animation: sceller .95s cubic-bezier(.2, .9, .25, 1) both; will-change: transform; }
@keyframes sceller {
  0% { opacity: 0; transform: translate(10%, -70%) scale(2.2) rotate(-26deg); }
  44% { opacity: 1; transform: scale(.86) rotate(4deg); }
  62% { transform: scale(1.05) rotate(-1deg); }
  100% { opacity: 1; transform: none; }
}
.sceau__coulee { transform-box: fill-box; transform-origin: center; }
.sceau.pose .sceau__coulee { animation: couler .8s .4s cubic-bezier(.1, .8, .2, 1) both; }
@keyframes couler { from { transform: scale(.76); } }
.sceau__texte { font: 600 12.5px/1 var(--bord); letter-spacing: .08em; }
/* à l'envoi, le cachet vient se poser sur la carte, comme on scelle une lettre */
.carte-contact.envoye .sceau { right: 50%; top: 36%; translate: 50% -50%; width: clamp(150px, 16vw, 210px); }
/* Fin de bobine : le pied de page est la dernière amorce du film, comme les amorces de chaque bobine */
.fin-bobine { --r: clamp(1.6rem, 2.6vw, 2.3rem); --pad: var(--marge); margin: 11vh calc(var(--marge) * -1) 0; color: var(--ivoire); }
.fin-bobine__milieu { position: relative; background: var(--pellicule); padding: clamp(2.6rem, 6vw, 4.6rem) var(--marge) clamp(2rem, 4vw, 3rem); }
.fin-bobine .bord { opacity: 1; font-size: calc(var(--r) * .32); }
.fin-bobine .bord--a, .fin-bobine .bord--b { top: .8rem; }
.fin-bobine .bord--c, .fin-bobine .bord--d { bottom: .8rem; }
.fin-bobine__sur { position: relative; z-index: 2; margin: 0; font: 500 .72rem/1 var(--bord); letter-spacing: .14em; text-transform: uppercase; color: var(--safran); }
.fin-bobine__ecran { position: relative; max-width: 90rem; margin: 1.4rem auto 0; }
.fin-bobine__nom { margin: 0; font: 800 clamp(3.4rem, 15vw, 14.5rem)/.84 var(--titre); font-stretch: 72%; letter-spacing: -.035em; }
.fin-bobine__nom > span { display: block; }
.fin-bobine__nom > span + span { text-align: right; }
/* Prise de vue : le nom est flou, l'autofocus cherche puis fait le point, les angles se verrouillent,
   l'obturateur claque, et le nom apparaît net, comme une photo qu'on vient de prendre. */
.js .fin-bobine:not(.vu) .fin-bobine__nom { filter: blur(24px); opacity: .45; }
.fin-bobine.vu .fin-bobine__nom { animation: mise-au-point 1.6s cubic-bezier(.3, .6, .2, 1) .25s both, developper 1.5s cubic-bezier(.2, .7, .3, 1) 2.08s; }
/* juste après le flash, le nom est surexposé, puis se développe comme un tirage dans le bain */
@keyframes developper { 0% { filter: brightness(2.6) saturate(0) blur(1px); } 35% { filter: brightness(1.5) saturate(.4); } 100% { filter: none; } }
@keyframes mise-au-point {
  0% { filter: blur(24px); opacity: .45; transform: scale(1.04); }
  42% { filter: blur(2px); opacity: .95; transform: scale(1.006); }
  58% { filter: blur(8px); }
  80% { filter: blur(1px); }
  100% { filter: none; opacity: 1; transform: none; }
}
.viseur-fin {
  position: absolute; inset: -14% -1.5% -7%; z-index: 1; pointer-events: none;
  background: var(--angles); background-repeat: no-repeat; color: rgb(238 232 218 / .75); opacity: 0;
}
.fin-bobine.vu .viseur-fin { animation: verrouiller-fin 1.5s var(--glisse) .25s forwards, confirmer .3s steps(1, end) 1.72s 2; }
@keyframes confirmer { 50% { opacity: .15; } }   /* la mise au point est faite : les angles clignotent deux fois */
@keyframes verrouiller-fin {
  0% { opacity: 0; transform: scale(1.1); }
  25% { opacity: 1; }
  55% { transform: scale(1.012); }
  75% { transform: scale(1.03); color: rgb(238 232 218 / .75); }
  100% { opacity: 1; transform: none; color: var(--safran); }
}
/* l'obturateur : un rideau à lamelles descend et remonte, comme dans un boîtier reflex, l'image tremble au déclenchement */
.obturateur {
  position: absolute; inset: -14% -1.5% -7%; z-index: 2; pointer-events: none; clip-path: inset(0 0 100% 0);
  background: repeating-linear-gradient(180deg, #14110E 0 10.5%, #3A342C 10.5% 11.2%, #1C1915 11.2% 12.5%);
}
.fin-bobine.vu .obturateur { animation: rideau .32s cubic-bezier(.7, 0, .3, 1) 1.94s both; }
@keyframes rideau { 0% { clip-path: inset(0 0 100% 0); } 42%, 58% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(100% 0 0 0); } }
.fin-bobine.vu .fin-bobine__ecran { animation: secousse .3s linear 1.94s; }
@keyframes secousse { 20% { transform: translate(2px, -1px) rotate(-.12deg); } 45% { transform: translate(-3px, 1px) rotate(.14deg); } 70% { transform: translate(1px, 2px); } }
/* le flash : un seul éclair, chaud, qui retombe lentement */
.fin-bobine__milieu::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 42%, #FFFDF7 0%, #F7EFDD 55%, rgb(238 226 200 / .9) 100%);
}
.fin-bobine.vu .fin-bobine__milieu::after { animation: flash 1.15s cubic-bezier(.12, .7, .3, 1) 2.08s; }
@keyframes flash { 0% { opacity: 0; } 5% { opacity: .97; } 100% { opacity: 0; } }
.prise { position: absolute; left: 0; bottom: -2.4rem; z-index: 3; margin: 0; font: 500 .7rem/1 var(--bord); letter-spacing: .1em; font-stretch: 85%; text-transform: uppercase; color: var(--safran); pointer-events: none; }
.prise__etat { position: absolute; left: 0; white-space: nowrap; opacity: 0; }
.prise__etat::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .5em; border-radius: 50%; background: currentColor; vertical-align: .05em; }
.fin-bobine.vu .prise__etat--1 { animation: etat 1.45s steps(1, end) .25s; }
.fin-bobine.vu .prise__etat--1::before { animation: clignoter .3s steps(1, end) 5; }
.fin-bobine.vu .prise__etat--2 { animation: etat .24s steps(1, end) 1.7s; }
.fin-bobine.vu .prise__etat--3 { animation: etat-fin .3s ease 2.5s forwards; }
@keyframes etat { 0%, 100% { opacity: 1; } }
@keyframes etat-fin { to { opacity: 1; } }
@keyframes clignoter { 50% { opacity: 0; } }
.mouvement-reduit .fin-bobine__nom, .capture .fin-bobine__nom { filter: none !important; opacity: 1 !important; animation: none; }
.mouvement-reduit .viseur-fin, .capture .viseur-fin { opacity: 1; color: var(--safran); animation: none; }
.mouvement-reduit .obturateur, .capture .obturateur, .mouvement-reduit .prise, .capture .prise,
.mouvement-reduit .fin-bobine__milieu::after, .capture .fin-bobine__milieu::after { display: none; }
.mouvement-reduit .fin-bobine__ecran, .capture .fin-bobine__ecran { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .fin-bobine__nom { filter: none !important; opacity: 1 !important; animation: none !important; }
  .viseur-fin { opacity: 1; animation: none !important; } .obturateur, .prise, .fin-bobine__milieu::after { display: none; } .fin-bobine__ecran { animation: none !important; }
}
.fin-bobine__bas {
  max-width: 90rem; margin: clamp(2rem, 4vw, 3rem) auto 0; padding-top: 1.1rem; border-top: 1px solid rgb(238 232 218 / .22);
  display: grid; grid-template-columns: auto 1fr auto; gap: .8rem 2rem; align-items: baseline;
  font: 500 .72rem/1.4 var(--bord); letter-spacing: .05em; font-stretch: 85%; color: rgb(238 232 218 / .72);
}
.fin-bobine__bas p { margin: 0; }
.fin-bobine__liens { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; }
.fin-bobine__liens a, .fin-bobine__liens button { color: var(--ivoire); text-decoration: none; opacity: 1; }
.fin-bobine__liens a:hover, .fin-bobine__liens button:hover { color: var(--safran); text-decoration: none; }
@media (max-width: 859px) { .fin-bobine__bas { grid-template-columns: 1fr; } .fin-bobine__liens { justify-content: flex-start; } }

@media (max-width: 859px) {
  .contact__grille { grid-template-columns: 1fr; }
  .sceau { right: -.6rem; top: -3.4rem; width: 112px; }
}

/* Curseur réduit au point safran à partir de la planche contact */
html.curseur-point .curseur { display: none; }
/* sur un lien : le point s'ouvre en anneau ; sur un appel à l'action : une petite flèche collée au point, pointée vers lui */
html.curseur-lien .pointeur { scale: 2.6; background-color: rgb(227 162 28 / .28); }
.curseur--fleche .curseur__sticker { height: 40px; max-width: 64px; margin: 3px 0 0 3px; rotate: -90deg; }
/* le yad : la pointe de l'index est le point de clic ; il pivote autour d'elle */
.curseur--yad { transform-origin: 0 0; }
.curseur--yad .curseur__sticker { height: 92px; max-width: 92px; margin: -4px 0 0 -4px; }
html.curseur-point .pointeur { width: 14px; height: 14px; margin: -7px 0 0 -7px; transition: width .2s, height .2s, margin .2s; }

/* Version vidéo : la vidéo remplace la bobine d'accueil */
.video-scroll { position: relative; z-index: 1; height: 420vh; background: var(--pellicule); }
.video-scroll__scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.video-scroll__canvas { display: block; width: 100%; height: 100%; }
.video-scroll__note { position: absolute; left: var(--marge); bottom: 4vh; margin: 0; max-width: 22rem; font-size: .8rem; color: rgb(251 248 241 / .85); }
.video-scroll__passer { position: absolute; right: var(--marge); bottom: 4vh; color: #FBF8F1; }
.version-video .intro, .version-video .consigne { display: none; }
@media (prefers-reduced-motion: reduce) { .video-scroll { height: 100vh; } }
.mouvement-reduit .video-scroll { height: 100vh; }

/* Vue projet : le grand tirage à gauche, la planche contact de la série à droite */
.projet { position: fixed; inset: 0; z-index: 50; }
.projet[hidden] { display: none; }
.projet__fond { position: absolute; inset: 0; background: var(--trame), var(--ivoire-clair); opacity: 0; transition: opacity .45s ease; }
.projet.visible .projet__fond { opacity: 1; }
.projet__defilement { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; transition: opacity .18s ease; }
.projet__defilement.change { opacity: 0; }
.projet__barre {
  position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: baseline;
  padding: 1.1rem var(--marge); background: rgb(246 242 233 / .62); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid rgb(28 26 23 / .08);
}
.projet__retour { font-weight: 600; text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.projet__compteur { font: 500 .72rem/1 var(--bord); letter-spacing: .06em; color: var(--gris); font-variant-numeric: tabular-nums; }
.projet__corps { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; padding: .5rem var(--marge) 0; }
.projet__heros { position: sticky; top: 4.2rem; margin: 0; display: flex; justify-content: center; }
.projet__heros img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100svh - 6rem); transition: opacity .22s ease; }
.projet__cadre { position: relative; display: block; max-width: 100%; }
@property --pos { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.projet__heros .projet__avant { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.projet__ligne { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: var(--ivoire-clair); box-shadow: 0 0 0 1px rgb(28 26 23 / .18); pointer-events: none; }
.projet__ligne::after {
  content: "‹ ›"; position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%;
  font: 600 .95rem/1 var(--texte); letter-spacing: .1em; color: var(--encre);
  background: rgb(246 242 233 / .6); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid rgb(255 255 255 / .7); box-shadow: 0 .5rem 1.2rem -.5rem rgb(28 26 23 / .45);
}
.projet__glisser { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.projet__cadre:focus-within .projet__ligne::after { outline: 2px solid var(--encre); outline-offset: 2px; }
.projet__badge {
  position: absolute; top: .8rem; padding: .4rem .75rem; border-radius: 999px; pointer-events: none;
  font: 500 .64rem/1 var(--bord); letter-spacing: .07em; font-stretch: 85%; text-transform: uppercase;
  background: rgb(246 242 233 / .55); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); border: 1px solid rgb(255 255 255 / .6);
}
.projet__badge--avant { left: .8rem; } .projet__badge--apres { right: .8rem; }
.projet:not(.comparer) .projet__avant, .projet:not(.comparer) .projet__ligne, .projet:not(.comparer) .projet__glisser, .projet:not(.comparer) .projet__badge { display: none; }
.projet.comparer .projet__avant, .projet.comparer .projet__ligne, .projet.comparer .projet__badge { transition: opacity .3s ease; }
.projet.comparer:not(.pret) .projet__avant, .projet.comparer:not(.pret) .projet__ligne, .projet.comparer:not(.pret) .projet__badge { opacity: 0; }
.projet.comparer.pret .projet__cadre { animation: balayer 1.2s var(--glisse) .1s backwards; }
@keyframes balayer { from { --pos: 100%; } }
.projet__heros img.change { opacity: 0; }
.projet__parcours { margin: 0; font: 500 .7rem/1.2 var(--bord); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); font-stretch: 85%; }
.projet__texte h2 { margin: .3rem 0 0; font: 800 clamp(2.8rem, 6vw, 5.4rem)/.88 var(--titre); font-stretch: 70%; letter-spacing: -.03em; }
.projet__nature { margin: .6rem 0 0; color: var(--gris); }
.projet__nature:empty { display: none; }
.projet__chapo { margin: 1.1rem 0 0; font-size: 1.08rem; line-height: 1.6; max-width: 34rem; }
.projet__contact { margin: 1.6rem 0 0; }
.projet__plus { margin: .8rem 0 0; font-size: .95rem; line-height: 1.6; max-width: 34rem; color: var(--gris); }
.projet__plus:empty { display: none; }
.projet__planche { list-style: none; margin: 2.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.2rem 0; --h: clamp(5.6rem, 8.5vw, 8rem); }
.projet__planche .film { --r: .6rem; }
.projet__planche .cellule__legende { margin-top: .4rem; }
.projet__suite { padding: 9vh var(--marge) 11vh; text-align: center; }
.projet__suivant { font: 800 clamp(2.4rem, 6vw, 4.8rem)/.95 var(--titre); font-stretch: 72%; letter-spacing: -.02em; }
.projet__suivant-sur { display: block; margin-bottom: .7rem; font: 500 .72rem/1 var(--bord); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.projet__suivant-nom { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 2px; }
.projet__suivant-nom::after { content: " →"; }
.projet__barre, .projet__cote, .projet__suite { opacity: 0; transform: translateY(1.2rem); transition: opacity .4s ease .12s, transform .5s var(--glisse) .12s; }
.projet.visible .projet__barre, .projet.visible .projet__cote, .projet.visible .projet__suite { opacity: 1; transform: none; }
@media (max-width: 859px) {
  .projet__corps { grid-template-columns: 1fr; }
  .projet__heros { position: relative; top: 0; }
  .projet__heros img { max-height: 70svh; }
}

/* Image en vol entre la pellicule et le projet */
.vol { position: fixed; z-index: 60; margin: 0; pointer-events: none; transform-origin: 0 0; will-change: transform, clip-path; }

/* Curseur sticker (ordinateur) */
html.curseur-sticker, html.curseur-sticker * { cursor: none !important; }
.curseur, .pointeur { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; display: none; }
html.curseur-sticker .curseur, html.curseur-sticker .pointeur { display: block; }
.curseur { will-change: transform; }
.curseur__sticker {
  display: block; height: 76px; width: auto; max-width: 110px; margin: 16px 0 0 16px;
  filter: drop-shadow(0 .35rem .5rem rgb(0 0 0 / .28));
}
.pointeur { transition: scale .25s var(--ressort), background-color .2s; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--safran); box-shadow: 0 0 0 2px rgb(28 26 23 / .65); }

/* Captures et animations réduites : pas d'animation d'ambiance */
.capture .lettre, .capture .intro__signature, .capture .intro__ligne, .capture .collage-intro .sticker { animation: none; }
.capture .sceau { opacity: 1; animation: none; }
.capture .rang__vues li, .capture .viseur i { animation: none; }
.mouvement-reduit .lettre, .mouvement-reduit .intro__signature, .mouvement-reduit .intro__ligne,
.mouvement-reduit .rang__vues li, .mouvement-reduit .entete__contact::before, .mouvement-reduit .envoyer::after, .mouvement-reduit .sceau, .mouvement-reduit .sceau__coulee, .mouvement-reduit .carte-contact { animation: none; }
.mouvement-reduit .sceau { opacity: 1; }
.mouvement-reduit .projet__fond, .mouvement-reduit .projet__barre, .mouvement-reduit .projet__cote,
.mouvement-reduit .projet__suite { transition: opacity .15s linear; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lettre, .intro__signature, .intro__ligne, .collage-intro .sticker, .rang__vues li, .entete__contact::before, .envoyer::after, .sceau, .sceau__coulee, .carte-contact { animation: none !important; }
  .sceau { opacity: 1; }
}

/* ===== Proposition de fin : la dernière vue de la bobine, celle du visiteur ===== */
.contact--vue .derniere { width: 100%; max-width: 90rem; margin: 0 auto; align-self: center; }
.derniere__tete { display: grid; gap: 1.2rem; margin-bottom: clamp(2.6rem, 5vw, 4rem); }
.derniere__tete .contact__sur { grid-column: 1 / -1; margin: 0; }
.contact--vue h2 { font-size: clamp(2.2rem, 3.9vw, 5.2rem); line-height: 1; }
@media (min-width: 860px) { .contact--vue h2 { white-space: nowrap; } }
.derniere__tete .contact__chapo { margin: 0; max-width: 40rem; }
/* la vue : bords perforés, bandes noires, intérieur non exposé */
.cadre-vue { rotate: 0deg; padding: 0; background: var(--ivoire-clair); box-shadow: 0 1.6rem 2.8rem -1.4rem rgb(28 26 23 / .42), 0 .05rem .2rem rgb(28 26 23 / .14); }
.cadre-vue__image { position: relative; }
.cadre-vue .formulaire { position: relative; background: none; padding: clamp(1.4rem, 3vw, 2.8rem); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(1.6rem, 4vw, 3.6rem); align-items: start; }
.cadre-vue .choix { grid-column: 1; grid-row: 1 / span 4; }
.cadre-vue .formulaire > label, .cadre-vue .formulaire__envoi { grid-column: 2; }
/* l'obturateur : un battement noir au déclenchement */
.cadre-vue__image::after { content: ""; position: absolute; inset: 0; background: var(--encre); opacity: 0; pointer-events: none; }
.cadre-vue.declenche .cadre-vue__image::after { animation: obturateur .55s ease-out; }
@keyframes obturateur { 0% { opacity: 0; } 12%, 32% { opacity: 1; } 100% { opacity: 0; } }
.cadre-vue.envoye .formulaire { opacity: 1; }
.cadre-vue.envoye .formulaire > * { opacity: .07; transition: opacity .6s ease .35s; }   /* la vue reste claire, le formulaire s'efface */
.cadre-vue .merci { top: 50%; font-size: clamp(1.8rem, 3.2vw, 2.8rem); animation: developper 1.6s var(--glisse) .45s both; }
@keyframes developper { 0% { opacity: 0; filter: blur(14px); color: #CDBFA6; } 60% { opacity: 1; filter: blur(2px); } 100% { opacity: 1; filter: none; } }
/* le viseur part des bords et vient se fixer sur la vue, comme dans la pellicule */
.cadre-vue__viseur {
  position: absolute; inset: -16vh -8vw; z-index: 3; pointer-events: none; opacity: 0; color: var(--encre);
  transition: inset 1.1s var(--glisse), opacity .5s ease;
}
.cadre-vue.vise .cadre-vue__viseur { inset: -18px; opacity: 1; }
.cadre-vue__viseur i { position: absolute; width: 30px; height: 30px; border: 0 solid currentColor; transition: color .3s ease; }
.cadre-vue__viseur i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; --sx: 1; --sy: 1; }
.cadre-vue__viseur i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; --sx: -1; --sy: 1; }
.cadre-vue__viseur i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; --sx: 1; --sy: -1; }
.cadre-vue__viseur i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; --sx: -1; --sy: -1; }
.cadre-vue.net .cadre-vue__viseur i { color: var(--safran-fonce); animation: verrou .45s var(--ressort); }
.cadre-vue__info { position: absolute; left: 0; top: -1.5rem; font: 500 .68rem/1 var(--bord); letter-spacing: .08em; font-stretch: 85%; white-space: nowrap; }
.cadre-vue__info::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .5em; border-radius: 50%; background: currentColor; }
.cadre-vue.net .cadre-vue__info::before { background: var(--safran); }
/* le cachet scelle la vue sur son bord, à l'envoi seulement */
.cadre-vue .sceau, .cadre-vue.envoye .sceau { right: clamp(-2.6rem, -2.4vw, -1rem); top: clamp(-3.6rem, -4vw, -2.4rem); translate: none; width: clamp(120px, 11vw, 164px); }
@media (max-width: 859px) {
  .derniere__tete { grid-template-columns: 1fr; }
  .cadre-vue .formulaire { grid-template-columns: 1fr; }
  .cadre-vue .choix, .cadre-vue .formulaire > label, .cadre-vue .formulaire__envoi { grid-column: 1; grid-row: auto; }
}
.mouvement-reduit .cadre-vue__viseur { transition: none; }
.capture .cadre-vue__viseur { transition: none; }

.cadre-vue .merci { pointer-events: none; }
.projet__contact { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; }
.projet__page { text-decoration: none; }
.projet__page[hidden] { display: none; }
.projet__page:not([hidden]) + .projet__ecrire { background: none; color: var(--encre); box-shadow: inset 0 0 0 1.5px currentColor; }
/* Étiquette de ruban sur la vue du visiteur */
.cadre-vue__etiquette { position: absolute; left: clamp(1.2rem, 4vw, 3rem); top: -.95rem; z-index: 4; transform: rotate(-4deg); font-size: .78rem; }
/* Crayon gras : il entoure les catégories cochées */
.choix label { position: relative; }
.crayon-choix { position: absolute; inset: -7px -9px; width: calc(100% + 18px); height: calc(100% + 14px); overflow: visible; pointer-events: none; }
.crayon-choix path { fill: none; stroke: var(--crayon); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; opacity: 0; transition: stroke-dashoffset .55s var(--glisse), opacity .15s; }
.choix input:checked ~ .crayon-choix path { stroke-dashoffset: 0; opacity: 1; }

/* ===== Page Le studio : qui est derrière, en cinq lignes ===== */
.studio-tete { min-height: 0; padding-top: clamp(1rem, 4vh, 3rem); }
.studio-forbes { justify-self: center; margin: 0; width: min(100%, 24rem); rotate: 2deg; }
.studio-forbes img { display: block; width: 100%; height: auto; box-shadow: 0 1.6rem 2.6rem -1.4rem rgb(28 26 23 / .55); }
.studio-forbes figcaption { margin-top: .9rem; rotate: -2deg; font: 500 .7rem/1.4 var(--bord); letter-spacing: .06em; color: var(--gris); }
.parcours { list-style: none; margin: 2.2rem 0 0; padding: 0; max-width: 60rem; border-top: 2px solid var(--encre); }
.parcours li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .3rem 1.4rem; align-items: baseline; padding: 1.15rem 0; border-bottom: 1px solid rgb(28 26 23 / .16); color: var(--gris); }
.parcours__quand { grid-row: span 2; font: 500 .72rem/1.3 var(--bord); letter-spacing: .1em; text-transform: uppercase; color: var(--safran-fonce); }
.parcours strong { display: block; font: 800 clamp(1.4rem, 2.2vw, 1.9rem)/1 var(--titre); font-stretch: 76%; letter-spacing: -.015em; color: var(--encre); }
@media (max-width: 599px) { .parcours li { grid-template-columns: 1fr; } .parcours__quand { grid-row: auto; } }

/* ===== Page Hero pack : visuels produits pour l'e-commerce ===== */
.page-hero main { padding-top: 6.5rem; }
.page-hero .fin-bobine { margin: 14vh 0 0; }
.hp-tete, .hp-section { width: 100%; max-width: 90rem; margin: 0 auto; padding: 0 var(--marge); }
.hp-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; min-height: calc(100svh - 7rem); }
.hp-fil { margin-bottom: 1.6rem; font: 500 .7rem/1.4 var(--bord); letter-spacing: .06em; font-stretch: 85%; color: var(--gris); }
.hp-fil a { color: inherit; }
.hp-sur { margin: 0 0 1rem; font: 500 .72rem/1 var(--bord); letter-spacing: .14em; text-transform: uppercase; color: var(--safran-fonce); }
.page-hero h1 { margin: 0; font: 800 clamp(3rem, 6vw, 6.2rem)/.9 var(--titre); font-stretch: 74%; letter-spacing: -.025em; }
.page-hero h2 { margin: 0; font: 800 clamp(2.3rem, 4.6vw, 4.4rem)/.92 var(--titre); font-stretch: 74%; letter-spacing: -.02em; max-width: 22ch; }
.page-hero h3 { margin: .5rem 0 .35rem; font: 800 1.25rem/1.1 var(--titre); font-stretch: 96%; }
.hp-chapo { margin: 1.6rem 0 0; max-width: 34rem; font-size: 1.12rem; line-height: 1.65; color: var(--gris); }
.hp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin: 2.2rem 0 0; }
.hp-actions .envoyer { text-decoration: none; }
.hp-lien { font-weight: 600; text-decoration: underline; text-underline-offset: .3em; }
.hp-section { padding-top: clamp(5rem, 12vh, 9rem); }
.hp-intro { margin: 1rem 0 0; color: var(--gris); }

/* comparaison avant / après : même rideau que dans la page projet */
.comparaison { margin: 0; }
.comparaison__cadre { position: relative; display: block; overflow: hidden; background: #fff; box-shadow: 0 1.4rem 2.6rem -1.6rem rgb(28 26 23 / .4), 0 .05rem .2rem rgb(28 26 23 / .12); }
.comparaison__cadre img { display: block; width: 100%; height: auto; }
.comparaison__avant { position: absolute; inset: 0; height: 100% !important; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.comparaison__ligne { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: var(--ivoire-clair); box-shadow: 0 0 0 1px rgb(28 26 23 / .18); pointer-events: none; }
.comparaison__ligne::after {
  content: "‹ ›"; position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%;
  font: 600 .95rem/1 var(--texte); letter-spacing: .1em; color: var(--encre);
  background: rgb(246 242 233 / .6); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid rgb(255 255 255 / .7); box-shadow: 0 .5rem 1.2rem -.5rem rgb(28 26 23 / .45);
}
.comparaison__glisser { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.comparaison__cadre:focus-within .comparaison__ligne::after { outline: 2px solid var(--encre); outline-offset: 2px; }
.comparaison__badge {
  position: absolute; top: .8rem; padding: .4rem .75rem; border-radius: 999px; pointer-events: none;
  font: 500 .64rem/1 var(--bord); letter-spacing: .07em; font-stretch: 85%; text-transform: uppercase;
  background: rgb(246 242 233 / .55); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); border: 1px solid rgb(255 255 255 / .6);
}
.comparaison__badge--avant { left: .8rem; } .comparaison__badge--apres { right: .8rem; }
/* les angles du viseur se posent sur l'image quand elle arrive à l'écran */
.comparaison__viseur { position: absolute; inset: 10px; pointer-events: none; background: var(--angles); background-repeat: no-repeat; color: var(--safran-fonce); opacity: 0; transform: scale(1.08); transition: opacity .4s ease, transform .9s var(--glisse); }
.comparaison__cadre.vu { animation: balayer 1.3s var(--glisse) .15s backwards; }
.comparaison__cadre.vu .comparaison__viseur { opacity: 1; transform: none; }
.comparaison figcaption { margin-top: 1.1rem; color: var(--gris); line-height: 1.55; }
.comparaison figcaption .etiquette { margin: 0 .6rem .4rem 0; }
.comparaison--grande .comparaison__cadre { max-height: calc(100svh - 9rem); aspect-ratio: 1; }
.comparaison--grande .comparaison__cadre img { height: 100%; object-fit: contain; }
.hp-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 3rem 2rem; margin-top: 2.8rem; }

.hp-points, .hp-etapes { list-style: none; margin: 2.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 2rem 2.4rem; }
.hp-points li, .hp-etapes li { border-top: 1.5px solid var(--encre); padding-top: 1rem; }
.hp-points p, .hp-etapes p { margin: 0; color: var(--gris); line-height: 1.6; }
.hp-points__n, .hp-etapes__n { font: 500 .72rem/1 var(--bord); letter-spacing: .1em; color: var(--safran-fonce); }
.hp-cibles { list-style: none; margin: 2.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.hp-cibles li { padding: .6rem 1.05rem .55rem; border: 1.5px solid rgb(28 26 23 / .3); border-radius: 999px; font-weight: 500; }
.hp-faq details { max-width: 52rem; border-top: 1px solid rgb(28 26 23 / .18); }
.hp-faq details:first-of-type { margin-top: 2.2rem; }
.hp-faq details:last-of-type { border-bottom: 1px solid rgb(28 26 23 / .18); }
.hp-faq summary { padding: 1.1rem 0; font: 800 1.2rem/1.2 var(--titre); font-stretch: 96%; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary::after { content: "+"; font: 400 1.4rem/1 var(--texte); transition: transform .35s var(--ressort); }
.hp-faq details[open] summary::after { transform: rotate(45deg); }
.hp-faq details p { margin: 0 0 1.2rem; max-width: 44rem; color: var(--gris); line-height: 1.65; }
.hp-appel { text-align: left; }
.hp-note { margin: 1.6rem 0 0; font: 500 .7rem/1.4 var(--bord); letter-spacing: .04em; font-stretch: 85%; color: var(--gris); }
@media (max-width: 859px) {
  .hp-tete { grid-template-columns: 1fr; min-height: 0; }
  .comparaison--grande .comparaison__cadre { max-height: none; }
}
.mouvement-reduit .comparaison__cadre.vu, .capture .comparaison__cadre.vu { animation: none; }
@media (prefers-reduced-motion: reduce) { .comparaison__cadre.vu { animation: none; } .comparaison__viseur { transition: none; } }
.capture .hp-tete { min-height: 0; }
.capture .comparaison__viseur { opacity: 1; transform: none; transition: none; }

/* Hero pack : définition, chaîne intégrée, lot de production */
.hp-definition { margin: 1.4rem 0 0; max-width: 34rem; padding: .9rem 1.1rem; border-left: 3px solid var(--safran); background: rgb(246 242 233 / .7); font-size: .98rem; line-height: 1.55; }
.hp-definition dfn { font-style: normal; font-weight: 700; }
.hp-flux { list-style: none; margin: 2.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: flux; }
.hp-flux li { position: relative; padding: 1.4rem 2.4rem 1.4rem 0; border-top: 1.5px solid var(--encre); }
.hp-flux li + li { padding-left: 2.4rem; border-left: 1px dashed rgb(28 26 23 / .3); }
.hp-flux li:not(:last-child)::after {
  content: "→"; position: absolute; right: -.75rem; top: -.85rem; z-index: 1; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--safran); color: var(--encre); font: 600 .9rem/1 var(--texte);
}
.hp-flux__n { display: inline-block; padding: .3rem .6rem; background: var(--encre); color: var(--ivoire); font: 500 .66rem/1 var(--bord); letter-spacing: .1em; text-transform: uppercase; font-stretch: 85%; }
.hp-flux p { margin: 0; color: var(--gris); line-height: 1.6; }
@media (max-width: 859px) {
  .hp-flux { grid-template-columns: 1fr; }
  .hp-flux li, .hp-flux li + li { padding: 1.3rem 0; border-left: 0; }
  .hp-flux li:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -.8rem; content: "↓"; }
}
.hp-lot__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 3rem; }
.hp-compteur { margin: 0; text-align: right; font: 800 clamp(3rem, 7vw, 6.4rem)/.9 var(--titre); font-stretch: 90%; font-variant-numeric: tabular-nums; }
.hp-compteur small { display: block; margin-top: .5rem; font: 500 .72rem/1.3 var(--bord); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.hp-mur { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(62px, 7.4vw, 108px), 1fr)); gap: clamp(4px, .55vw, 8px); }
.hp-mur li { aspect-ratio: 1; background: #fff; box-shadow: 0 .3rem .7rem -.45rem rgb(28 26 23 / .35); }
.hp-mur img { display: block; width: 100%; height: 100%; }
.js .hp-lot:not(.vu) .hp-mur li { opacity: 0; }
.hp-lot.vu .hp-mur li { animation: sortir .5s var(--ressort) both; animation-delay: calc(var(--i) * 20ms); }
@keyframes sortir { from { opacity: 0; transform: scale(.5) translateY(10px); } }
.hp-familles { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.6rem 0 0; }
.hp-familles span { padding: .35rem .7rem .32rem; border: 1px solid rgb(28 26 23 / .25); border-radius: 999px; font: 500 .68rem/1 var(--bord); letter-spacing: .05em; font-stretch: 85%; color: var(--gris); }
.capture .hp-lot .hp-mur li, .mouvement-reduit .hp-lot .hp-mur li { opacity: 1 !important; animation: none; }
@media (prefers-reduced-motion: reduce) { .hp-mur li { opacity: 1 !important; animation: none !important; } }

/* Hero pack : le même rayon sur deux smartphones, photos d'origine puis hero packs */
.hp-rayon { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hp-rayon__aide { margin: 1rem 0 0; font: 500 .7rem/1.4 var(--bord); letter-spacing: .05em; font-stretch: 85%; color: var(--gris); }
.telephones { display: flex; justify-content: center; gap: clamp(1rem, 3vw, 2.6rem); }
.telephone { margin: 0; width: min(46%, 300px); }
.telephone__legende {
  display: block; width: max-content; margin: 0 auto .9rem; padding: .4rem .8rem; border-radius: 999px;
  font: 500 .68rem/1 var(--bord); letter-spacing: .08em; text-transform: uppercase; font-stretch: 85%;
  background: rgb(246 242 233 / .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgb(28 26 23 / .15);
}
.telephone--apres .telephone__legende { background: var(--encre); color: var(--ivoire); border-color: var(--encre); }
.telephone__coque { padding: 9px; border-radius: 42px; background: #1A1816; box-shadow: 0 2.4rem 3.6rem -1.8rem rgb(28 26 23 / .55), inset 0 0 0 1.5px #3A3530; }
.telephone__ecran { position: relative; display: flex; flex-direction: column; aspect-ratio: 9 / 19; overflow: hidden; border-radius: 34px; background: #fff; color: #1C1A17; font-family: var(--texte); }
.appli__barre { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px 4px; font: 600 11px/1 var(--texte); }
.appli__barre span:last-child { font-size: 7px; letter-spacing: 1px; }
.appli__ile { width: 74px; height: 20px; border-radius: 999px; background: #1A1816; }
.appli__tete { padding: 6px 12px 8px; border-bottom: 1px solid #EEE; }
.appli__recherche { display: block; padding: 8px 12px; border-radius: 999px; background: #F2F1EE; color: #8A847B; font-size: 11px; }
.appli__filtres { display: flex; gap: 5px; margin-top: 8px; overflow: hidden; white-space: nowrap; contain: inline-size; }
.appli__filtres span { flex: none; padding: 4px 9px; border-radius: 999px; border: 1px solid #E2E0DB; font-size: 9.5px; }
.appli__filtres span:first-child { background: #1C1A17; color: #fff; border-color: #1C1A17; }
.appli__compte { margin: 8px 0 0; font-size: 9.5px; color: #8A847B; }
.appli__defile { flex: 1; min-height: 0; overflow: hidden; container-type: size; }
.appli__grille { list-style: none; margin: 0; padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; animation: rayonner 80s linear infinite alternate; }
@keyframes rayonner { to { transform: translateY(calc(-100% + 100cqh)); } }
.telephones:hover .appli__grille { animation-play-state: paused; }
.appli__grille li { position: relative; padding: 6px 6px 8px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #EFEDE9; }
.appli__grille img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.appli__nom { display: -webkit-box; margin-top: 5px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 10px; line-height: 1.25; font-weight: 600; min-height: 2.5em; }
.appli__famille { display: block; margin-top: 2px; font-size: 8.5px; color: #8A847B; }
.appli__ajout { position: absolute; right: 7px; bottom: 7px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #1C1A17; color: #fff; font-size: 12px; line-height: 1; }
.mouvement-reduit .appli__grille, .capture .appli__grille { animation: none; }
.mouvement-reduit .appli__defile { overflow-y: auto; }
@media (prefers-reduced-motion: reduce) { .appli__grille { animation: none; } .appli__defile { overflow-y: auto; } }
@media (max-width: 859px) { .hp-rayon { grid-template-columns: minmax(0, 1fr); } }

/* le lot : une loupe au survol */
.hp-mur li { position: relative; transition: scale .3s var(--ressort), box-shadow .3s; }
.hp-mur li:hover { z-index: 2; scale: 1.9; box-shadow: 0 1rem 1.8rem -.8rem rgb(28 26 23 / .5); }

/* Accueil : à l'ouverture du hero pack, une averse de visuels produits */
.pluie { position: fixed; inset: 0; z-index: 70; overflow: hidden; pointer-events: none; }
.pluie img {
  position: absolute; top: 0; width: var(--taille, 100px); height: var(--taille, 100px); padding: 4px; border-radius: 3px;
  background: #fff; box-shadow: 0 .9rem 1.6rem -.7rem rgb(28 26 23 / .5); will-change: transform;
  filter: blur(1.6px);   /* ils passent trop vite et trop flous pour qu'on lise la marque */
}
@media (max-width: 599px) { .telephones { flex-direction: column; align-items: center; } .telephone { width: min(80%, 300px); } }

/* Hero pack v9 : la série qui tourne, les familles qui défilent, le carrousel des traitements */
.hp-serie h2 { font-size: clamp(2.4rem, 5.6vw, 5.6rem); max-width: 16ch; }
/* la série : trois rangées de visuels qui filent, trop vite et trop flous pour qu'on lise une marque ; on voit la quantité, pas le détail */
.hp-flot { margin: 2.4rem calc(var(--marge) * -1) 0; display: grid; gap: clamp(6px, .8vw, 12px); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.hp-rang { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(6px, .8vw, 12px); width: max-content; animation: file 3.4s linear infinite; }
.hp-rang:nth-child(2) { animation-direction: reverse; animation-duration: 4.1s; }
.hp-rang:nth-child(3) { animation-duration: 2.8s; }
.hp-rang li { flex: 0 0 auto; width: clamp(84px, 10vw, 150px); aspect-ratio: 1; background: #fff; overflow: hidden; }
.hp-rang img { display: block; width: 100%; height: 100%; filter: blur(2.2px) contrast(.9); }
@keyframes file { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hp-rang { animation: none; } .hp-rang img { filter: blur(3px); } }
.hp-defile { --r: .85rem; margin: clamp(3rem, 7vh, 5rem) 0 0; overflow: hidden; color: var(--ivoire); }
.hp-defile::before, .hp-defile::after { z-index: 1; }
.hp-defile__piste { display: flex; width: max-content; margin: 0; padding: 1.1rem 0; background: var(--pellicule); animation: defiler 55s linear infinite; }
.hp-defile__piste span { padding: 0 1.3rem; font: 800 clamp(1.5rem, 3vw, 2.6rem)/1 var(--titre); font-stretch: 84%; letter-spacing: -.01em; white-space: nowrap; }
.hp-defile__piste span::after { content: "✺"; margin-left: 2.6rem; color: var(--safran); font-size: .6em; vertical-align: .25em; }
@keyframes defiler { to { transform: translateX(-50%); } }
.hp-defile:hover .hp-defile__piste { animation-play-state: paused; }
.hp-familles__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; }
.hp-fleches { display: flex; gap: .5rem; margin: 0; }
.hp-fleche { width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 1.5px solid var(--encre); font: 500 1.4rem/1 var(--texte); transition: background .2s, color .2s; }
.hp-fleche:hover { background: var(--encre); color: var(--ivoire); }
.hp-carrousel {
  list-style: none; margin: 2.2rem calc(var(--marge) * -1) 0; padding: .4rem var(--marge) 1.4rem; display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(190px, 21vw, 250px); gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--marge);
  scrollbar-width: thin; scrollbar-color: var(--encre) transparent; overscroll-behavior-x: contain;
}
.hp-carrousel > li { scroll-snap-align: start; }
.hp-carte__legende { display: flex; justify-content: space-between; align-items: center; margin: .7rem 0 0; font: 500 .66rem/1 var(--bord); letter-spacing: .06em; color: var(--gris); }
.hp-carte__legende .etiquette { font-size: .64rem; }
.mouvement-reduit .hp-defile__piste, .capture .hp-defile__piste { animation: none; }
@media (prefers-reduced-motion: reduce) { .hp-defile__piste { animation: none; } }

/* Page projet : quelques grands formats au défilement, puis la planche contact de la série */
.projet__planche[hidden] { display: none; }
.projet__grands { display: grid; gap: clamp(3.5rem, 11vh, 7.5rem); padding: clamp(4rem, 12vh, 8rem) var(--marge) 0; }
.projet__grands:empty { display: none; }
.grand { position: relative; margin: 0; max-width: min(100%, 74rem); }
.grand:nth-child(odd) { justify-self: start; }
.grand:nth-child(even) { justify-self: end; }
.grand img { display: block; width: auto; height: auto; max-width: 100%; max-height: 86vh; }
.grand::after {
  content: ""; position: absolute; inset: -14px; pointer-events: none; background: var(--angles); background-repeat: no-repeat; color: var(--encre);
  opacity: 0; transform: scale(1.06); transition: opacity .5s ease, transform 1s var(--glisse), color .4s ease .8s;
}
.js .grand { opacity: 0; transform: translateY(2.5rem); transition: opacity .8s ease, transform 1s var(--glisse); }
.grand.vu { opacity: 1; transform: none; }
.grand.vu::after { opacity: 1; transform: none; color: var(--safran-fonce); }
.projet__feuille {
  margin-top: clamp(4rem, 12vh, 8rem); padding: clamp(3rem, 8vh, 5rem) var(--marge) clamp(4rem, 10vh, 6rem); color: var(--ivoire);
  background: radial-gradient(circle, rgb(238 232 218 / .035) 28%, transparent 31%) 0 0 / 5px 5px, #151311;
}
.projet__feuille[hidden] { display: none; }
.projet__feuille-titre { display: flex; justify-content: space-between; max-width: 90rem; margin: 0 auto 2.4rem; font: 500 .72rem/1 var(--bord); letter-spacing: .12em; text-transform: uppercase; color: var(--safran); }
.projet__feuille-compte { color: rgb(238 232 218 / .6); }
.feuille__colonnes { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: clamp(.7rem, 1.5vw, 1.3rem); align-items: start; max-width: 90rem; margin: 0 auto; }
/* chaque colonne est une bande de film : bords noirs, numéros des vues à gauche, nom du studio à droite */
.feuille__bande { position: relative; margin-top: var(--decalage, 0); padding: .9rem 1.5rem; background: var(--pellicule); box-shadow: 0 1.2rem 2rem -1.2rem rgb(0 0 0 / .7); }
.feuille__bande::after {
  content: "STUDIO SAFRAN · STUDIO SAFRAN · STUDIO SAFRAN · STUDIO SAFRAN · STUDIO SAFRAN · STUDIO SAFRAN"; position: absolute; right: .3rem; top: 1rem; bottom: 1rem;
  overflow: hidden; writing-mode: vertical-rl; white-space: nowrap; font: 500 .52rem/1 var(--bord); letter-spacing: .22em; color: rgb(227 162 28 / .55);
}
.feuille__vue { position: relative; display: block; width: 100%; padding: .45rem 0; cursor: zoom-in; }
.feuille__vue img { display: block; width: 100%; height: auto; background: #2C2824; transition: filter .3s ease; }
.feuille__vue:hover img, .feuille__vue:focus-visible img { filter: brightness(1.08); }
.feuille__vue:focus-visible { outline: 2px solid var(--crayon); outline-offset: 4px; }
.feuille__num { position: absolute; left: -1.15rem; top: 50%; translate: 0 -50%; writing-mode: vertical-rl; font: 500 .6rem/1 var(--bord); letter-spacing: .1em; color: rgb(238 232 218 / .6); }
/* crayon gras : les photos argentiques sont cadrées à la main, les traits dépassent comme sur une vraie planche */
.crochets { position: absolute; inset: .45rem 0; width: 100%; height: calc(100% - .9rem); overflow: visible; pointer-events: none; rotate: -.4deg; }
.crochets path { fill: none; stroke: var(--crayon); stroke-width: 3.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@media (max-width: 699px) { .feuille__bande { padding: .7rem 1.1rem; } .feuille__num { left: -.95rem; } }
/* la vue en grand */
.visionneuse { position: absolute; inset: 0; z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem; background: rgb(17 15 13 / .95); }
.visionneuse[hidden] { display: none; }
.visionneuse__vue { margin: 0; display: grid; justify-items: center; gap: .8rem; }
.visionneuse__vue img { display: block; max-width: 100%; max-height: calc(100svh - 6rem); }
.visionneuse__vue figcaption { font: 500 .7rem/1 var(--bord); letter-spacing: .1em; color: var(--safran); }
.visionneuse__fleche, .visionneuse__fermer { width: 3rem; height: 3rem; border-radius: 50%; border: 1.5px solid rgb(238 232 218 / .4); color: var(--ivoire); font: 400 1.6rem/1 var(--texte); }
.visionneuse__fleche:hover, .visionneuse__fermer:hover { background: var(--ivoire); color: var(--encre); }
.visionneuse__fermer { position: absolute; top: 1rem; right: 1rem; }
@media (max-width: 699px) { .visionneuse { grid-template-columns: 1fr; } .visionneuse__fleche { position: absolute; bottom: 1rem; } .visionneuse__fleche[data-sens="-1"] { left: 1rem; } .visionneuse__fleche[data-sens="1"] { right: 1rem; } }
.mouvement-reduit .grand, .capture .grand { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .js .grand { opacity: 1; transform: none; transition: none; } }
/* Série en sous-catégories (Portrait) : un sommaire à côté de la couverture, puis une section par sous-catégorie */
.projet__sommaire[hidden] { display: none; }
.projet__sommaire ol { list-style: none; margin: 1.8rem 0 0; padding: 0; max-width: 34rem; border-top: 1px solid rgb(28 26 23 / .16); }
.projet__sommaire li { border-bottom: 1px solid rgb(28 26 23 / .16); }
.projet__sommaire button { width: 100%; display: grid; grid-template-columns: 2.4rem 1fr auto; align-items: baseline; gap: .8rem; padding: .85rem 0; text-align: left; }
.projet__sommaire-num { font: 500 .7rem/1 var(--bord); letter-spacing: .08em; color: var(--safran-fonce); }
.projet__sommaire-titre { font: 800 clamp(1.6rem, 2.6vw, 2.2rem)/1 var(--titre); font-stretch: 72%; letter-spacing: -.02em; transition: font-stretch .45s var(--glisse); }
.projet__sommaire-compte { font: 500 .66rem/1 var(--bord); letter-spacing: .06em; color: var(--gris); }
.projet__sommaire-compte::after { content: " ↓"; }
.projet__sommaire button:hover .projet__sommaire-titre, .projet__sommaire button:focus-visible .projet__sommaire-titre { font-stretch: 88%; }
.sous-serie { scroll-margin-top: 4rem; padding-top: clamp(2.8rem, 7vh, 4.5rem); }
.sous-serie__tete { max-width: 90rem; margin: 0 auto; padding: 0 var(--marge); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: .6rem clamp(2rem, 6vw, 6rem); align-items: end; }
.sous-serie__num { grid-column: 1 / -1; margin: 0 0 .4rem; font: 500 .72rem/1 var(--bord); letter-spacing: .12em; text-transform: uppercase; color: var(--safran-fonce); }
.sous-serie__tete h3 { margin: 0; font: 800 clamp(2.6rem, 6vw, 5.2rem)/.86 var(--titre); font-stretch: 68%; letter-spacing: -.035em; }
.sous-serie__texte { margin: 0; font-size: 1.05rem; line-height: 1.55; }
.sous-serie__ecrire { grid-column: 2; justify-self: start; margin-top: .4rem; padding: .55rem 1rem; white-space: nowrap; border: 1.5px solid currentColor; border-radius: 999px; font-weight: 600; transition: background .25s, color .25s; }
.sous-serie__ecrire:hover { background: var(--encre); color: var(--ivoire); border-color: var(--encre); }
.sous-serie__grands {
  display: flex; gap: clamp(.8rem, 1.6vw, 1.4rem); align-items: flex-start; max-width: calc(90rem + 2 * var(--marge)); margin: 0 auto;
  padding: clamp(1.6rem, 4vh, 2.6rem) var(--marge) 1rem; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--marge); scrollbar-width: thin;
}
.sous-serie__grands .grand { flex: none; max-width: none; scroll-snap-align: start; }
.sous-serie__grands .grand img, .sous-serie__grands .grand video { width: auto; height: clamp(17rem, 54vh, 36rem); max-height: none; max-width: none; }
.sous-serie__grands .grand--rafale { width: min-content; }   /* la légende suit la largeur de la photo */
.sous-serie__grands .grand::after { inset: -9px; }
.sous-serie__grands:empty { display: none; }
.sous-serie__feuille { margin-top: clamp(1.4rem, 4vh, 2.4rem); }
@media (max-width: 859px) {
  .sous-serie__tete { grid-template-columns: 1fr; }
  .sous-serie__ecrire { grid-column: 1; }
}
/* Portrait corporate : toute l'équipe défile en rafale sur le premier grand format, puis le portrait choisi reste ; un clic la rejoue */
.grand--rafale { cursor: pointer; }
.rafale__compteur {
  position: absolute; left: .8rem; bottom: 2.6rem; z-index: 1; padding: .42rem .6rem; border-radius: 3px;
  font: 500 .7rem/1 var(--bord); letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--crayon); background: rgb(28 26 23 / .8);
}
.grand--rafale.defile .rafale__compteur::before { content: "● "; animation: clignoter .3s steps(1, end) infinite; }
.rafale__legende { margin-top: .75rem; font: 500 .7rem/1.3 var(--bord); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
/* Films IA : un film tourne en boucle, sans le son, tant qu'il est à l'écran ; dans la planche, son image d'attente porte la mention FILM */
.grand video { display: block; width: auto; height: auto; max-width: 100%; max-height: 86vh; background: var(--pellicule); }
.feuille__vue--film::before {
  content: "▶ FILM"; position: absolute; left: .5rem; top: .95rem; z-index: 1; padding: .3rem .45rem; border-radius: 3px;
  font: 500 .56rem/1 var(--bord); letter-spacing: .08em; color: var(--encre); background: var(--crayon);
}
.visionneuse__vue video { display: block; max-width: 100%; max-height: calc(100svh - 6rem); background: #000; }
.visionneuse__vue [hidden] { display: none; }


/* ===== Clins d'œil (clins-doeil.js) : pour ceux qui cherchent ===== */
::selection { background: var(--safran); color: var(--encre); }
input, textarea { caret-color: var(--safran-fonce); }
/* le tampon : posé en biais, encre safran, il s'efface en se soulevant */
.tampon-clin {
  position: fixed; left: 50%; top: 42%; z-index: 95; translate: -50% -50%; rotate: -8deg; pointer-events: none;
  padding: .55em .9em; border: 3px solid var(--safran-fonce); border-radius: 6px; color: var(--safran-fonce); background: rgb(246 242 233 / .9);
  font: 800 clamp(1.4rem, 3.4vw, 2.6rem)/1 var(--titre); font-stretch: 72%; letter-spacing: .01em; text-transform: uppercase; text-align: center; max-width: min(90vw, 34rem);
  animation: tamponner .45s cubic-bezier(.2, 1.5, .4, 1) both;
}
.tampon-clin.part { opacity: 0; scale: 1.08; transition: opacity .6s ease, scale .6s ease; }
@keyframes tamponner { from { opacity: 0; scale: 2; rotate: -18deg; } to { opacity: 1; scale: 1; rotate: -8deg; } }
.flash-clin { position: fixed; inset: 0; z-index: 94; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, #FFFDF7, rgb(247 239 221 / .9)); animation: flash .9s cubic-bezier(.12, .7, .3, 1) both; }
.averse-clin { position: fixed; inset: 0; z-index: 93; pointer-events: none; overflow: hidden; }
.averse-clin img { position: absolute; top: 0; width: var(--taille); height: auto; filter: drop-shadow(0 .4rem .5rem rgb(28 26 23 / .25)); }
/* la loupe compte-fils : un cercle cerclé de métal qui grossit trois fois la planche */
.loupe-clin {
  position: fixed; left: 0; top: 0; z-index: 92; width: 180px; height: 180px; border-radius: 50%; pointer-events: none; opacity: 0;
  background-repeat: no-repeat; background-color: #151311;
  box-shadow: 0 0 0 5px #C9C2B4, 0 0 0 7px #6E685E, 0 1.2rem 2.4rem rgb(0 0 0 / .45), inset 0 0 1.6rem rgb(0 0 0 / .35);
  transition: opacity .15s ease;
}
.loupe-clin.visible { opacity: 1; }
/* la date du jour sur la photo ouverte, comme le dos dateur d'un compact argentique */
.visionneuse__cadre { position: relative; display: block; }
.visionneuse__date {
  position: absolute; right: 4%; bottom: 4%; pointer-events: none;
  font: 600 clamp(.85rem, 1.6vw, 1.15rem)/1 var(--bord); letter-spacing: .14em; color: #FF8A2A; opacity: .88;
  text-shadow: 0 0 6px rgb(255 120 30 / .65), 0 0 1px rgb(255 160 80 / .9); mix-blend-mode: screen;
}
.visionneuse__cadre:has(img[hidden]) .visionneuse__date { display: none; }
@media (prefers-reduced-motion: reduce) { .tampon-clin { animation: none; } }

/* ===== Impression : le site devient une planche contact ===== */
@media print {
  @page { margin: 14mm; }
  html, body { background: #fff !important; }
  body::before, .sequence, .entete__nav, .curseur, .pointeur, .projet, .formulaire, .sceau, .cadre-vue__viseur, .fin-bobine__ecran,
  .rang__signe, .rang__apercu, .evitement, .loupe-clin, .bascule-son, .bascule-musique, .bascule-mouvement { display: none !important; }
  .entete { position: static; }
  .index, .contact { padding: 0 !important; }
  .rang__vues[hidden] { display: flex !important; }
  .rang__vues li { animation: none !important; break-inside: avoid; }
  .cellule .film__cadre img { height: 34mm !important; }
  .fin-bobine { margin: 8mm 0 0; color: var(--encre); }
  .fin-bobine__milieu { background: none !important; padding: 0 !important; }
  .fin-bobine .bord { display: none; }
  .fin-bobine__bas { border-top-color: var(--encre); color: var(--encre); }
  .fin-bobine__bas::after { content: "studio-safran.com"; font-weight: 700; }
}

/* champ piège pour les robots : invisible pour les visiteurs */
.formulaire__pot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* pages de service : un métier par page, le texte d'abord, les photos en planche */
.service-tete { min-height: 0; padding-top: clamp(1rem, 4vh, 3rem); }
.service-image { justify-self: center; margin: 0; width: min(100%, 27rem); rotate: -1.5deg; }
.service-image img, .service-image video { display: block; width: 100%; height: auto; box-shadow: 0 1.6rem 2.6rem -1.4rem rgb(28 26 23 / .55); }
.service-image figcaption { margin-top: .9rem; rotate: 1.5deg; font: 500 .7rem/1.4 var(--bord); letter-spacing: .06em; color: var(--gris); }
.service-bloc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.2rem clamp(2rem, 5vw, 5rem); align-items: start; }
.service-bloc h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); }
.service-texte { max-width: 40rem; }
.service-texte p { margin: 0 0 1.1rem; font-size: 1.06rem; line-height: 1.7; }
.service-planche { list-style: none; width: 100%; max-width: 90rem; margin: clamp(4rem, 10vh, 7rem) auto 0; padding: 1.1rem var(--marge); display: flex; gap: .9rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge); background: var(--pellicule); }
.service-planche li { flex: 0 0 auto; scroll-snap-align: start; }
.service-planche img, .service-planche video { display: block; height: clamp(13rem, 38vh, 22rem); width: auto; max-width: 80vw; object-fit: cover; }
.service-fin .hp-chapo { color: var(--encre); }
.service-autres { margin-top: 3.4rem; }
.service-autres p { margin: 0 0 .8rem; font: 500 .72rem/1 var(--bord); letter-spacing: .14em; text-transform: uppercase; color: var(--safran-fonce); }
.service-autres ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.service-autres a { display: inline-block; padding: .6rem 1.05rem .55rem; border: 1.5px solid rgb(28 26 23 / .3); border-radius: 999px; font-weight: 500; text-decoration: none; color: inherit; }
.service-autres a:hover { border-color: var(--encre); }
@media (max-width: 799px) { .service-bloc { grid-template-columns: 1fr; } }
.fin-bobine__series { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.1rem; font-size: .82rem; opacity: .8; grid-column: 1 / -1; order: 1; }   /* sur sa propre ligne : les liens du pied gardent leur place */
.fin-bobine__series a { color: inherit; }

/* contact : la ligne sur les données sous « Envoyer », et le contact direct (WhatsApp, téléphone, e-mail) */
.formulaire__rgpd { grid-column: 1 / -1; margin: 0; font-size: .8rem; line-height: 1.45; color: var(--gris); }
.formulaire__rgpd a { color: inherit; }
@media (min-width: 860px) { .cadre-vue .choix { grid-row: 1 / span 5; } .cadre-vue .formulaire__rgpd { grid-column: 2; } }
.derniere__tete .contact__sur { line-height: 1.5; }
.contact-direct { margin: 1.8rem 0 0; font-size: .95rem; line-height: 1.7; color: var(--gris); }
.contact-direct a { color: var(--encre); font-weight: 600; text-underline-offset: .22em; white-space: nowrap; }
.projet__direct { margin: 1rem 0 0; font-size: .86rem; }

/* pages de service : ce que vous recevez, la liste comme des vues cochées sur une planche, la boîte en bois à côté */
.service-recevez { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: center; }
.service-recevez h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); }
.service-recevez__liste { list-style: none; margin: 1.8rem 0 0; padding: 0; max-width: 34rem; border-top: 1px solid rgb(28 26 23 / .18); }
.service-recevez__liste li { position: relative; padding: .95rem 0 .95rem 2.1rem; border-bottom: 1px solid rgb(28 26 23 / .18); font-size: 1.06rem; line-height: 1.5; }
.service-recevez__liste li::before { content: "▸"; position: absolute; left: .3rem; top: .95rem; color: var(--safran-fonce); }
.service-recevez__fin { margin: 1.4rem 0 0; font-weight: 600; }
.service-boite { margin: 0; justify-self: center; width: min(100%, 32rem); rotate: 1.2deg; }
.service-boite img { display: block; width: 100%; height: auto; }
.service-boite figcaption { margin-top: .4rem; rotate: -1.2deg; text-align: center; font: 500 .7rem/1.4 var(--bord); letter-spacing: .06em; color: var(--gris); }
@media (max-width: 799px) { .service-recevez { grid-template-columns: 1fr; } }

/* Le studio : le portrait, la citation signée, le tirage Forbes épinglé */
.studio-portrait { justify-self: center; margin: 0; width: min(100%, 30rem); rotate: -1.5deg; }
.studio-portrait img { display: block; width: 100%; height: auto; box-shadow: 0 1.6rem 2.6rem -1.4rem rgb(28 26 23 / .55); }
.studio-portrait figcaption { margin-top: .9rem; rotate: 1.5deg; font: 500 .7rem/1.4 var(--bord); letter-spacing: .06em; color: var(--gris); }
.studio-bloc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.2rem clamp(2rem, 5vw, 5rem); align-items: start; }
.studio-bloc h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); }
.studio-citation { margin: 0 0 1.6rem; padding: 0; }
.studio-citation p { margin: 0; font: 600 clamp(1.25rem, 2vw, 1.6rem)/1.35 var(--titre); font-stretch: 92%; }
.studio-citation footer { margin-top: .8rem; font: 500 .72rem/1 var(--bord); letter-spacing: .12em; text-transform: uppercase; color: var(--safran-fonce); }
.studio-parcours { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem clamp(2rem, 4vw, 4rem); align-items: start; }
.studio-parcours .parcours { margin-top: 0; }
.studio-tirage { position: relative; margin: .6rem 0 0; width: min(70vw, 17rem); rotate: 3deg; padding: .7rem .7rem 2.4rem; background: var(--ivoire-clair); box-shadow: 0 1.2rem 2rem -1rem rgb(28 26 23 / .5); }
.studio-tirage::before { content: ""; position: absolute; left: 50%; top: -.7rem; width: 5.5rem; height: 1.5rem; translate: -50% 0; rotate: -4deg; background: var(--ruban); opacity: .92; box-shadow: 0 1px 2px rgb(28 26 23 / .15); }
.studio-tirage img { display: block; width: 100%; height: auto; }
.studio-tirage figcaption { position: absolute; left: 0; right: 0; bottom: .75rem; text-align: center; font: 500 .7rem/1 var(--bord); letter-spacing: .06em; color: var(--gris); }
.studio-parcours { margin-top: 2.2rem; }
.studio-pont { max-width: 46rem; margin: 2.8rem 0 0; font-size: 1.12rem; line-height: 1.7; }
@media (max-width: 799px) { .studio-bloc, .studio-parcours { grid-template-columns: 1fr; } .studio-tirage { justify-self: center; } }

/* mentions légales */
.legal-tete { min-height: 0; padding-top: clamp(1rem, 4vh, 3rem); }
.legal-tete h1 { font-size: clamp(2.4rem, 6vw, 5rem); }
.legal-bloc { padding-top: clamp(3rem, 7vh, 5rem); }

/* cibles tactiles d'au moins 44 px sans changer l'apparence : la zone cliquable déborde un peu du texte */
.entete__nav a, .marque, .fin-bobine__liens a, .fin-bobine__liens button, .fin-bobine__series a, .hp-lien, .hp-fil a, .consigne a, .contact-direct a { position: relative; }
.entete__nav a::after, .marque::after, .fin-bobine__liens a::after, .fin-bobine__liens button::after, .fin-bobine__series a::after,
.hp-lien::after, .hp-fil a::after, .consigne a::after, .contact-direct a::after { content: ""; position: absolute; inset: -12px -4px; }
.choix label::after { content: ""; position: absolute; inset: -6px -2px; }
.formulaire input[type="text"] { min-height: 44px; }

/* fiche : la série suivante en haut, à droite ; contact plus léger ; pas de paragraphe vide */
.projet__compteur { margin-left: auto; margin-right: 1.4rem; }
.projet__apres { font-weight: 600; white-space: nowrap; }
.projet__apres:hover { text-decoration: underline; text-underline-offset: .3em; }
@media (max-width: 599px) { .projet__compteur { display: none; } }
.projet__plus:empty { display: none; }
.contact--vue h2 { font-size: clamp(2rem, 3.2vw, 3.8rem); }

/* ordinateur : la légende se place sous la vue cadrée, au centre, là où le regard est déjà */
@media (min-width: 760px) {
  .pellicule-active .legende { left: 50%; translate: -50% 0; bottom: 3.5vh; justify-items: center; text-align: center; }
  .pellicule-active .legende__parcours { display: none; }
  .pellicule-active .legende__etiquette { justify-self: center; }
  .pellicule-active .legende__titre { font-size: clamp(2.6rem, 4.8vw, 4.6rem); white-space: nowrap; }
  .pellicule-active .legende__actions { justify-content: center; }
}
@media (min-width: 760px) and (max-height: 780px) { .pellicule-active .legende__titre { font-size: clamp(2.2rem, 3.6vw, 3.4rem); } .pellicule-active .legende { bottom: 2vh; } }

/* ce que vous recevez : quatre vignettes illustrées, une phrase courte sous chacune */
.service-recevez { display: block; }
.recus { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.recu p { margin: .9rem 0 0; font-size: 1rem; line-height: 1.4; max-width: 17rem; }
.recu__visuel { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--ivoire-clair); box-shadow: 0 1rem 1.8rem -1.3rem rgb(28 26 23 / .45); overflow: hidden; }
.recu__planche { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 100%; height: 100%; padding: 10px; background: var(--pellicule); }
.recu__planche img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recu__galerie { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; width: 82%; padding: 26px 8px 8px; position: relative; background: #fff; border-radius: 6px; box-shadow: 0 .4rem 1rem -.6rem rgb(28 26 23 / .5); }
.recu__adresse { position: absolute; left: 8px; right: 8px; top: 7px; font: 500 .6rem/1 var(--bord); letter-spacing: .04em; color: var(--gris); padding-left: 1.6rem; }
.recu__adresse::before { content: "● ● ●"; position: absolute; left: 0; font-size: .38rem; letter-spacing: .1em; top: .1rem; color: #CFC6B4; }
.recu__galerie img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.recu__boite { width: 92%; height: auto; }
.recu__chiffre { font: 800 clamp(2.6rem, 5vw, 4.4rem)/1 var(--titre); font-stretch: 72%; letter-spacing: -.02em; color: var(--safran-fonce); }
.service-recevez__fin { margin: 1.6rem 0 0; font-weight: 600; }
@media (max-width: 899px) { .recus { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.service-detail h2 { margin-bottom: 0; }

/* chaque chapitre a son sticker, collé de travers juste après son titre (même famille que les stickers de l'accueil) */
.sous-serie__sticker { display: inline-block; width: auto; height: max(1.3em, 68px); margin-left: .28em; vertical-align: -.22em; rotate: 6deg; pointer-events: none; user-select: none;
  filter: drop-shadow(0 .4rem .5rem rgb(28 26 23 / .22)); }
.sous-serie:nth-child(even) .sous-serie__sticker { rotate: -7deg; }
@media print { .sous-serie__sticker { display: none; } }

/* hero pack : le haut de page porte les deux iPhones qui défilent ; l'explication en trois colonnes ; quatre étapes */
.hp-tete--iphones { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.hp-tete__iphones { display: grid; gap: .9rem; justify-items: center; }
.hp-tete__iphones .telephones { width: 100%; }
.hp-tete__iphones .hp-rayon__aide { margin: 0; text-align: center; }
.hp-colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.8rem, 4vw, 4rem); }
.hp-colonnes h2 { font-size: clamp(1.7rem, 2.5vw, 2.4rem); max-width: 14ch; }
.hp-colonnes p { margin: 1.1rem 0 0; font-size: 1.02rem; line-height: 1.68; }
.hp-colonnes dfn { font-style: normal; font-weight: 700; }
.hp-colonnes dfn[lang] { font-style: italic; font-weight: 600; }
.hp-flux--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hp-flux--4 li { padding-right: 1.6rem; } .hp-flux--4 li + li { padding-left: 1.6rem; }
.hp-flux h3 { margin: .9rem 0 .4rem; }
@media (max-width: 1099px) { .hp-flux--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hp-flux--4 li:nth-child(odd) { padding-left: 0; border-left: 0; } .hp-flux--4 li:nth-child(n + 3) { margin-top: .6rem; } .hp-flux--4 li:not(:last-child)::after { display: none; } }
@media (max-width: 859px) { .hp-colonnes { grid-template-columns: 1fr; } .hp-tete--iphones { grid-template-columns: 1fr; } }
/* téléphone : les deux iPhones restent côte à côte à leur taille réelle, réduits d'un bloc (zoom) pour que leur contenu reste entier */
@media (max-width: 599px) { .hp-tete__iphones .telephones { flex-direction: row; gap: 20px; zoom: .85; } .hp-tete__iphones .telephone { width: 300px; flex: none; } }
@media (max-width: 499px) { .hp-tete__iphones .telephones { zoom: .68; } }
@media (max-width: 419px) { .hp-tete__iphones .telephones { zoom: .56; } }
@media (max-width: 379px) { .hp-tete__iphones .telephones { zoom: .5; } }
@media (max-width: 599px) { .hp-flux--4 { grid-template-columns: 1fr; } .hp-flux--4 li, .hp-flux--4 li + li { padding: 1.3rem 0; border-left: 0; } }

/* V26 : téléphone, l'accueil en grand ; pas de barre de défilement visible sur les bandes de photos */
.sous-serie__grands, .service-planche { scrollbar-width: none; }
.sous-serie__grands::-webkit-scrollbar, .service-planche::-webkit-scrollbar { display: none; }
@media (max-width: 759px) {
  /* le nom prend toute la largeur (comme l'arrivée de la galerie privée) ; la bobine passe entre « Studio » et « Safran », le halo ivoire garde les lettres lisibles */
  .intro__nom { font-size: min(15rem, calc((100vw - 2 * var(--marge)) / 3.05)); }
  .collage-intro .s1 { left: 68%; top: 23%; } .collage-intro .s2 { left: 2%; top: 35%; }
  .collage-intro .s3 { left: 76%; top: 49%; } .collage-intro .s4 { left: 2%; top: 60%; }   /* sur les bords, hors des lettres */
  .chapitre__titre { font-size: calc(var(--r) * .8); }   /* « Photographie » tient entre les perforations */
}

/* v34 : la phrase de Yaniv sur les pages d'événements, grande et centrée, sans barre latérale */
.service-citation { margin: 0 auto; max-width: 54rem; padding-block: clamp(3rem, 9vh, 6.5rem); text-align: center; }
.service-citation blockquote { margin: 0; }
.service-citation p { margin: 0; font: 600 clamp(1.35rem, 2.5vw, 2.15rem)/1.28 var(--titre); font-stretch: 90%; letter-spacing: -.012em; text-wrap: balance; }
.service-citation figcaption { margin-top: 1.3rem; font: 500 .72rem/1 var(--bord); letter-spacing: .12em; text-transform: uppercase; color: var(--safran-fonce); }

/* v34 : ce que vous recevez, la planche remplit sa vignette, la clé en photo, la galerie fermée à clé */
.recu__planche { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.recu__cle { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.recu__adresse { display: flex; align-items: center; gap: .3rem; }
.recu__cadenas { width: .55rem; height: .66rem; flex: none; color: var(--safran-fonce); }
.recu__visuel { transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) {
  .recu:hover .recu__visuel { transform: translateY(-6px) rotate(-.5deg); box-shadow: 0 1.7rem 2.4rem -1.4rem rgb(28 26 23 / .5); }
}
@media (prefers-reduced-motion: reduce) { .recu__visuel { transition: none; } .recu:hover .recu__visuel { transform: none; } }

/* v34 : le parcours, une image phare par étape, posée comme un petit tirage */
.studio-parcours { grid-template-columns: minmax(0, 1fr); }
.studio-parcours .parcours { max-width: 66rem; }
.parcours li { grid-template-columns: 9.5rem minmax(0, 1fr) 8.5rem; grid-template-rows: auto 1fr; align-items: start; }
.parcours__quand { grid-column: 1; grid-row: 1 / span 2; align-self: start; padding-top: .35rem; }
.parcours strong, .parcours__texte { grid-column: 2; }
.parcours__texte { display: block; }
.parcours__image {
  grid-column: 3; grid-row: 1 / span 2; justify-self: end; align-self: center;
  width: 100%; max-width: 8.5rem; height: auto; max-height: 8.5rem; object-fit: cover;
  padding: .3rem .3rem .95rem; background: var(--ivoire-clair);
  box-shadow: 0 .8rem 1.4rem -.9rem rgb(28 26 23 / .55); rotate: 2.5deg;
  transition: rotate .55s cubic-bezier(.2, .8, .2, 1), scale .55s cubic-bezier(.2, .8, .2, 1), box-shadow .55s;
}
.parcours li:nth-child(even) .parcours__image { rotate: -2deg; }
@media (hover: hover) {
  .parcours li:hover .parcours__image { rotate: 0deg; scale: 1.08; box-shadow: 0 1.3rem 2rem -1rem rgb(28 26 23 / .6); }
}
@media (max-width: 599px) {
  .parcours li { grid-template-columns: minmax(0, 1fr) 5.6rem; column-gap: 1rem; }
  .parcours__quand { grid-row: auto; padding-top: 0; }
  .parcours__quand, .parcours strong, .parcours__texte { grid-column: 1; }
  .parcours__image { grid-column: 2; grid-row: 1 / span 3; max-width: 5.6rem; max-height: 5.6rem; }
}
@media (prefers-reduced-motion: reduce) { .parcours__image { transition: none; } }

/* v34 : la légende dit clairement ce qu'on regarde et qu'on peut l'ouvrir */
.legende__resume { max-width: 28rem; font-size: .98rem; line-height: 1.35; color: var(--gris); text-wrap: balance; }
.legende__actions { margin-top: .85rem; }
.legende__ouvrir {
  display: inline-flex; align-items: center; gap: .65rem; padding: .5rem .5rem .5rem 1.05rem;
  background: var(--encre); color: var(--ivoire); border-radius: 999px; font-weight: 600; text-decoration: none;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
  box-shadow: 0 .6rem 1.2rem -.7rem rgb(28 26 23 / .6);
}
.legende__ouvrir:hover { text-decoration: none; box-shadow: 0 .9rem 1.5rem -.7rem rgb(28 26 23 / .65); }
.legende__ouvrir:active { transform: scale(.96); transition-duration: .08s; }   /* réponse dès l'appui */
.legende__fleche { display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--safran); color: var(--encre); transition: translate .35s cubic-bezier(.2, .8, .2, 1); }
.legende__ouvrir:hover .legende__fleche { translate: 3px 0; }
.legende__contact { padding: .35rem .15rem; border: 0; border-radius: 0; font-weight: 500; text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.legende__contact:hover { background: none; color: inherit; text-decoration-thickness: 2px; }
@media (max-width: 699px) {
  .pellicule-active .legende__resume { grid-column: 1 / -1; font-size: .9rem; }
}

/* la vue cadrée : un halo de projecteur, et une étiquette qui invite à l'ouvrir */
.pellicule-active .vue__lien { transition: box-shadow .6s cubic-bezier(.2, .8, .2, 1); }
.pellicule-active .vue__lien::after {
  content: "Voir la série →"; position: absolute; right: .6em; bottom: .6em; z-index: 1;
  padding: .7em 1em .62em; border-radius: 999px; background: rgb(244 239 228 / .94); color: var(--encre);
  font: 600 calc(var(--r) * .19)/1 var(--bord); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 .4rem 1rem -.4rem rgb(0 0 0 / .5); pointer-events: none;
  opacity: 0; translate: 0 8px; transition: opacity .3s ease, translate .5s cubic-bezier(.2, .8, .2, 1);
}
.pellicule-active .cadre-net .vue.au-centre .vue__lien::after { opacity: 1; translate: 0 0; }
.pellicule-active .cadre-net .vue.au-centre .vue__lien { box-shadow: 0 2rem 3.5rem -1.6rem rgb(214 150 40 / .55); }
.pellicule-active .vue__lien:active img { filter: brightness(.9); }   /* l'appui se voit tout de suite */
@media (prefers-reduced-motion: reduce) { .pellicule-active .vue__lien::after { transition: opacity .2s ease; translate: 0 0; } }

/* téléphone : la légende au centre, sous la vue, comme sur ordinateur ; fond ivoire plein pour rester lisible */
@media (max-width: 759px) {
  .pellicule-active .legende { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-top: 2.4rem; }
  .pellicule-active .legende::before { background: linear-gradient(transparent, var(--ivoire) 2rem); opacity: max(var(--panneau, 0), var(--op, 0)); }
  .pellicule-active .legende__etiquette { justify-self: center; }
  .pellicule-active .legende__titre { font-size: 2.4rem; }
  .pellicule-active .legende__resume { color: var(--encre); opacity: calc(var(--op, 0) * .8); max-width: 22rem; }
  .pellicule-active .legende__actions { justify-content: center; }
}

/* v35 · d'une page à l'autre, le tirage glisse à sa nouvelle place (transition native du navigateur) */
@view-transition { navigation: auto; }
.service-image img, .service-image video { view-transition-name: tirage; }
::view-transition-group(tirage) { animation-duration: .6s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* v35 · les tirages se révèlent comme dans le bac de révélateur : d'abord pâles et chauds, puis l'image monte */
@keyframes revele { from { filter: sepia(.9) brightness(1.55) contrast(.55) saturate(.4); scale: .97; } to { filter: none; scale: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .service-image img, .service-image video { animation: revele 1.6s cubic-bezier(.2, .8, .2, 1) .15s both; }
  @supports (animation-timeline: view()) {
    .service-planche { view-timeline: --planche block; }
    .service-planche li img, .service-planche li video { animation: revele linear both; animation-timeline: --planche; animation-range: entry 10% cover 45%; }
    .service-planche li:nth-child(2) :is(img, video) { animation-range: entry 20% cover 50%; }
    .service-planche li:nth-child(3) :is(img, video) { animation-range: entry 30% cover 55%; }
    .service-planche li:nth-child(n+4) :is(img, video) { animation-range: entry 40% cover 60%; }
    .parcours__image, .recu__visuel { animation: revele linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  }
}

/* v35 · téléphone : appeler en un geste, la barre apparaît une fois le premier écran passé */
.appel-mobile { display: none; }
@media (max-width: 759px) {
  .appel-mobile {
    position: fixed; z-index: 30; left: 50%; bottom: calc(.9rem + env(safe-area-inset-bottom)); translate: -50% 0;
    display: flex; gap: .4rem; margin: 0; padding: .35rem; border-radius: 999px;
    background: rgb(28 26 23 / .82); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 1rem 2rem -1rem rgb(28 26 23 / .7);
  }
  .appel-mobile a { padding: .7rem 1.1rem; border-radius: 999px; font: 600 .95rem/1 var(--texte, inherit); white-space: nowrap; text-decoration: none; transition: scale .1s ease-out; }
  .appel-mobile a:active { scale: .96; }
  .appel-mobile__tel { background: var(--safran); color: var(--encre); }
  .appel-mobile__wa { color: var(--ivoire); }
  .page-service .fin-bobine { padding-bottom: 5rem; }
  @supports (animation-timeline: scroll()) {
    @keyframes appel-arrive { from { opacity: 0; translate: -50% 1.5rem; visibility: hidden; } to { opacity: 1; translate: -50% 0; visibility: visible; } }
    .appel-mobile { animation: appel-arrive linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
  }
}
@media (prefers-reduced-transparency: reduce) { .appel-mobile { background: var(--encre); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* v36 : la clé USB et la boîte modélisées en 3D (objets-3d.js) ; le rendu fixe de la même scène s'efface quand le modèle est prêt */
.recu__3d { position: relative; display: block; width: 100%; height: 100%; }
.recu__3d img { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .5s ease; }
.recu__3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s ease; touch-action: pan-y; cursor: grab; }
.recu__3d canvas.tenu { cursor: grabbing; }
.recu__3d.pret canvas { opacity: 1; }
.recu__3d.pret img { opacity: 0; }
.recu__adresse { white-space: nowrap; overflow: hidden; }   /* « private gallery » tient sur une ligne, même sur téléphone */
@media (max-width: 899px) { .recu__adresse { font-size: .5rem; letter-spacing: 0; padding-left: 1.3rem; } }