/* Typographies de la charte : Instrument Serif (droit + italique pour les jeux de police) et Inter Tight. */
@font-face { font-family: "Instrument Serif"; src: url(fonts/InstrumentSerif-Regular.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(fonts/InstrumentSerif-Italic.ttf) format("truetype"); font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url(fonts/InterTight-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url(fonts/InterTight-Medium.ttf) format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url(fonts/InterTight-Black.ttf) format("truetype"); font-weight: 900; font-display: swap; }

/* palette finale (06/11), en duos seulement : jamais plus de deux couleurs à l'écran.
   bleu ciel + rouge, bleu nuit + bleu ciel, crème + rouge, crème + bleu nuit, et bleu électrique + bleu ciel (la méthode). */
:root {
  --red: #FF4545; --navy: #020F69; --blue: #0017C7; --sky: #EEF7FD; --cream: #FFFCF9;
  --ink: var(--red);
  --hair: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);   /* filets de construction, façon grille d'écran */
  --serif: "Instrument Serif", Georgia, serif;
  --grot: "Inter Tight", Helvetica, Arial, sans-serif;
  --gut: 12px;                               /* marge du cadre d'écran */
  --pad: clamp(18px, 3vw, 46px);
  --top: 74px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--cream); scroll-padding-top: var(--top); }
body { background: var(--cream); color: var(--red); font: 400 16px/1.2 var(--grot); overflow-x: hidden; font-kerning: normal; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ol, ul { list-style: none; }
em { font-style: italic; }
@media (hover: hover) { body, a, button { cursor: none; } }

/* l'écran : un cadre fin aux coins arrondis, fixe, dans lequel tout le site défile (structure de 109ichiki) */
.frame { position: fixed; z-index: 240; inset: var(--gut); border: 1px solid var(--frame-ink, var(--red)); border-radius: 18px; pointer-events: none;
  box-shadow: 0 0 0 calc(var(--gut) + 2px) var(--frame-bg, var(--sky)); transition: border-color .5s, box-shadow .5s; }

/* titres sur deux lignes : une ligne par police (modèle « Woodz / RECORDS ») */
.duo { display: flex; flex-direction: column; font-weight: 400; }
.duo .serif { font: 400 .8em/.95 var(--serif); }
.duo .black { font: 900 1em/.86 var(--grot); letter-spacing: -.02em; }
/* curseur de saisie qui clignote au bout des grands titres */
.caret { font-style: normal; font-weight: 400; animation: blink 1.1s steps(1) infinite; margin-left: .04em; }
@keyframes blink { 50% { opacity: 0; } }

.title { font: 400 clamp(36px, 3.8vw, 62px)/.95 var(--serif); letter-spacing: -.01em; }

/* corps de texte de la charte : Inter Tight regular, minuscules, justifié, serré */
.body { font: 400 clamp(15px, 1.15vw, 18px)/1.2 var(--grot); letter-spacing: -.015em; text-align: justify; hyphens: none; -webkit-hyphens: none; }   /* aucun mot coupé (05/11) */
.body em { font-style: normal; }
.label, .meta { font: 500 12px/1.2 var(--grot); letter-spacing: .02em; text-transform: lowercase; }

.sec { position: relative; padding: calc(var(--top) + 30px) 0 14vh; }
.meta { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; margin-bottom: clamp(28px, 5vh, 56px); }
/* petits points espacés en fond, en alternance d'une page à l'autre */
.dots { background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 34%, transparent) 1px, transparent 1.4px); background-size: 27px 27px; }
.in { position: relative; z-index: 2; padding: 0 calc(var(--pad) + var(--gut)); }

/* fenêtres : les encadrés de la référence, barre de titre (nom de fichier + croix) et ombre décalée */
.win { position: relative; background: var(--win-bg, var(--cream)); border: 1px solid var(--ink); border-radius: 6px; box-shadow: 5px 5px 0 color-mix(in srgb, var(--ink) 16%, transparent); color: var(--ink); }
.win__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 30px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--ink); font: 500 12px/1 var(--grot); letter-spacing: .02em; user-select: none; }
.win__x { font: 400 18px/1 var(--grot); width: 18px; text-align: center; }
.win__body { overflow: hidden; border-radius: 0 0 5px 5px; }
.win__body > img, .win__body > video { width: 100%; height: auto; }
.win.is-min .win__body { display: none; }
.win.is-min .win__bar { border-bottom: 0; }
[data-drag] .win__bar { cursor: grab; }
[data-drag].is-dragging { z-index: 5; }

/* boutons : ovales doublés, comme un mot entouré deux fois au stylo (références « identité visuelle » du 04/11).
   Au repos, le double ovale est dessiné ; au survol, il se retrace d'un geste continu, comme une main qui entoure.
   L'ovale tient dans la boîte du bouton (marges calculées par main.js) : le texte ne touche jamais le trait,
   et deux boutons voisins ne peuvent pas se chevaucher. */
.bubs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
/* une seule taille de bouton sur tout le site */
.bub { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: .6em 1.1em; font: 400 19px/1 var(--serif); color: var(--ink); white-space: nowrap; isolation: isolate; transition: color .35s; }
.bub svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: -1; pointer-events: none; }
.bub .ov { fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.bub .fill { fill: var(--ink); opacity: 0; transition: opacity .35s; }
.bub:hover { font-style: italic; }
.bub.is-on { color: var(--on-ink, var(--cream)); }
.bub.is-on .ov { stroke: var(--ink); }
.bub.is-on .fill { opacity: 1; }

/* en-tête : marque à gauche, menu dans un encadré au centre, horloge et rendez-vous à droite */
.top { position: fixed; z-index: 60; top: var(--gut); left: var(--gut); right: var(--gut); height: var(--top); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 var(--pad); color: var(--ink); background: var(--top-bg, var(--sky)); border-radius: 18px 18px 0 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); transition: background-color .5s, color .5s, border-color .5s; }
.top__brand { display: flex; align-items: baseline; gap: 14px; }
.top__name { font: italic 400 30px/1 var(--serif); }
.top__nav { display: flex; align-items: center; gap: 14px; }
.top__side { justify-self: end; display: flex; align-items: center; gap: 18px; }
@media (max-width: 1000px) { .top__brand .label { display: none; } }
@media (max-width: 760px) { .top { grid-template-columns: 1fr auto; } .top__nav { display: none; } }

/* curseur et traînée */
#cursor { position: fixed; z-index: 300; top: 0; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--red); pointer-events: none; display: grid; place-items: center; transition: width .3s, height .3s, margin .3s; }
#cursor span { font: 400 18px var(--serif); color: var(--cream); opacity: 0; transition: opacity .2s; }
#cursor.is-view { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
#cursor.is-view span { opacity: 1; }
#trail { position: fixed; inset: 0; z-index: 250; width: 100%; height: 100%; pointer-events: none; }
@media (hover: none) { #cursor { display: none; } }   /* la traînée reste au toucher (05/11) */

/* 00 couverture : bleu très pâle et petits points ; le nom, les métiers alignés à gauche, la présentation à droite */
.cover { min-height: 100svh; padding-bottom: 0; display: flex; background-color: var(--sky); }
.cover__in { display: flex; flex-direction: column; width: 100%; min-height: calc(100svh - var(--top) - 30px); padding-bottom: calc(var(--gut) + 22px); }
.cover__title { font-size: clamp(56px, 10.6vw, 196px); margin-top: auto; }
.cover__title .serif { margin-left: .04em; }
.cover__foot { display: grid; grid-template-columns: 1fr minmax(260px, 32%); align-items: end; gap: 28px 5vw; margin-top: 5vh; }   /* le nom et le texte restent à leur place (comme en V26) */
.cover__foot .bubs { align-self: start; margin-top: calc(.6vw - 5vh); }   /* seules les étiquettes remontent sous BOTTELIER, à l'écart qui sépare Lisa de BOTTELIER */
.cover__foot > .body { align-self: start; margin-top: calc(.6vw - 5vh + 11px); }   /* (05/11) le texte s'aligne sur la première rangée d'étiquettes (même ligne de points) */
.cover__foot .bubs { display: grid; grid-template-columns: repeat(3, max-content); gap: 10px 14px; }   /* six métiers, deux rangées de trois */
.cover__down { align-self: center; margin-top: 4vh; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(6px); } }
@media (max-width: 900px) { .cover__foot { grid-template-columns: 1fr; } .cover__foot .bubs { grid-template-columns: repeat(2, max-content); } }
/* téléphone (05/11) : rien ne dépasse de l'écran ; l'ordinateur n'est pas touché */
@media (max-width: 760px) {
  .bub { font-size: 16px; }
  .cover__foot .bubs { display: flex; flex-wrap: wrap; gap: 6px 6px; }
  .cover__foot > .body { margin-top: 0; }
  .cover__foot { gap: 22px; }
  .top { padding: 0 16px; }
  .top__name { font-size: 24px; }
  .contact__title { font-size: 14vw; }
}

/* 01 sommaire : bleu nuit, numéros et filets bleu pâle, titres crème */
#sommaire { --ink: var(--sky); background: var(--navy); color: var(--sky); min-height: 100svh; display: flex; align-items: center; }
#sommaire .in { width: 100%; }
.sommaire__title { font: 400 clamp(36px, 3.8vw, 62px)/.95 var(--serif); color: var(--sky); margin-bottom: clamp(24px, 5vh, 56px); }
.toc { display: flex; flex-direction: column; }
.toc li { border-bottom: 1px solid color-mix(in srgb, var(--sky) 40%, transparent); }
.toc a { display: grid; grid-template-columns: clamp(58px, 7vw, 116px) 1fr auto; align-items: center; gap: 16px; padding: clamp(12px, 2.2vh, 24px) 0; }
.toc__n { font: italic 400 clamp(28px, 3.8vw, 62px)/1 var(--serif); color: var(--sky); }
.toc__t { font: 900 clamp(26px, 4vw, 64px)/.92 var(--grot); letter-spacing: -.015em; transition: transform .6s cubic-bezier(.2,.7,.2,1), color .4s; }
.toc__d { font: 500 12px/1.2 var(--grot); letter-spacing: .02em; text-align: right; color: var(--sky); }
.toc a:hover .toc__t { transform: translateX(2vw); color: var(--sky); }

/* 02 à propos : petits points en fond, la photo dans une fenêtre (même encart que les autres) */
.about { background-color: var(--cream); }
.about__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 20px; }
.about__img { grid-column: 1 / 5; align-self: start; }
.about__txt { grid-column: 6 / 13; display: flex; flex-direction: column; gap: clamp(22px, 3.4vh, 36px); }
.about .big { font: 400 clamp(28px, 3vw, 50px)/1.04 var(--serif); }
.about__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .about__img { grid-column: 1 / -1; max-width: 420px; margin-bottom: 32px; } .about__txt { grid-column: 1 / -1; } .about__cols { grid-template-columns: 1fr; } }

/* 03 projets : carrousel horizontal de planches A4 en fenêtres, le projet au centre grandit */
.projects { background: var(--cream); }
.projects__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 4vh; }
.carousel { position: relative; z-index: 2; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; outline: none; padding: 8px 0; }
.carousel::-webkit-scrollbar { display: none; }
.carousel.is-drag { scroll-snap-type: none; }
.carousel__track { --zoom: 1; --sw: calc(var(--zoom) * min(80vw, (100svh - 290px) * 1.4134)); display: flex; align-items: flex-start; gap: 2.4vw; padding: 0 calc((100vw - var(--sw)) / 2); width: max-content; }
.slide { flex: none; width: var(--sw); scroll-snap-align: center; transform-origin: center top; will-change: transform; }
.slide__win { border: 1px solid var(--red); border-radius: 6px; overflow: hidden; background: var(--cream); }
.slide__bar { display: flex; justify-content: space-between; align-items: center; height: 28px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--red); font: 500 12px/1 var(--grot); letter-spacing: .02em; }
.slide__media { position: relative; aspect-ratio: 1754 / 1241; overflow: hidden; background: #efe9dd; }
.slide__media img, .slide__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.slide__media video { opacity: 0; transition: opacity .25s; }
.slide.is-active .slide__media video.is-playing { opacity: 1; }
.slide__new { position: absolute; top: 14px; right: 14px; z-index: 2; font: 500 12px/1 var(--grot); letter-spacing: .02em; background: var(--cream); color: var(--red); padding: 6px 10px 7px; border-radius: 20px; }
.slide__info { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 14px; padding-top: 14px; transition: opacity .4s; }
.slide__n { font: italic 400 22px/1 var(--serif); }
.slide__t { font: 400 clamp(26px, 2.6vw, 42px)/1 var(--serif); }
.slide__w { text-align: right; font: 400 14px/1.15 var(--grot); letter-spacing: -.015em; }
.slide__w b { display: block; font-weight: 400; opacity: .7; }
.slide:not(.is-active) .slide__info { opacity: 0; }
.cnav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; margin-top: 4vh; }
.cnav__mid { display: flex; flex-direction: column; gap: 10px; }
.cnav__row { display: flex; justify-content: space-between; gap: 16px; }
.cnav__hint i { display: inline-block; font-style: normal; animation: nudgeX 1.6s ease-in-out infinite; }
@keyframes nudgeX { 50% { transform: translateX(8px); } }
.cnav__bar { height: 1px; background: color-mix(in srgb, var(--red) 30%, transparent); }
.cnav__bar i { display: block; height: 3px; margin-top: -1px; background: var(--red); transform-origin: left; transform: scaleX(0); }
@media (max-width: 760px) {
  .carousel__track { --sw: 84vw; }
  .slide__info { grid-template-columns: auto 1fr; } .slide__w { grid-column: 1 / -1; text-align: left; }
  .cnav { grid-template-columns: 1fr 1fr; } .cnav__mid { grid-column: 1 / -1; grid-row: 1; } .cnav__hint { display: none; }
}

/* vue index : l'inventaire des projets, filtrable par univers ; étiquettes et flèche, comme la liste de la référence */
.list__filters { margin-bottom: 24px; }
.list ol { border-top: var(--hair); }
.list li { border-bottom: var(--hair); }
.list a { display: grid; grid-template-columns: 64px 1.3fr .8fr 1.3fr 110px 28px; align-items: center; gap: 16px; padding: 12px 0; }
.list .n { font: italic 400 22px var(--serif); }
.list .t { font: 400 clamp(26px, 3vw, 48px)/1 var(--serif); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.list .d { font: italic 400 clamp(18px, 1.6vw, 24px)/1 var(--serif); }
.list .c { font: 400 14px/1.15 var(--grot); letter-spacing: -.015em; }   /* les métiers en texte simple, sans bulles */
.list .th { width: 110px; aspect-ratio: 1754 / 1241; object-fit: cover; justify-self: end; border: 1px solid currentColor; }
.list .ar { font: 400 20px/1 var(--grot); justify-self: end; transition: transform .4s; }
.list a:hover .t { transform: translateX(1.4vw); }
.list a:hover .ar { transform: translateX(6px); }
@media (max-width: 760px) { .list a { grid-template-columns: 40px 1fr 70px; } .list .c, .list .d, .list .ar { display: none; } .list .th { width: 70px; } }

/* process : un slalom vertical. Le fil se dessine en descendant, chaque rond s'allume quand le fil l'atteint,
   et les lettres du titre de l'étape viennent s'aligner. Aucun blocage du défilement. */
.process { --ink: var(--sky); background-color: var(--blue); color: var(--sky); }   /* (06/11) la section en bleu électrique */
.process__head { display: grid; grid-template-columns: 1fr minmax(260px, 34%); align-items: start; gap: 24px 5vw; margin-bottom: 8vh; }
.process__head .title { color: var(--ink); }
.road { position: relative; max-width: 1100px; margin: 0 auto; }
.road__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.road__line { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .55; }
.road__done { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.stop { position: relative; height: clamp(190px, 27vh, 260px); }
.stop__dot { position: absolute; top: 0; width: 72px; height: 72px; margin-left: -36px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); border: 1px solid var(--ink); color: var(--ink); font: italic 400 26px/1 var(--serif); transition: background-color .5s, color .5s, border-color .5s, transform .5s cubic-bezier(.3,1.6,.5,1); }
.stop.is-on .stop__dot { background: var(--ink); border-color: var(--ink); color: var(--blue); transform: scale(1.08); }
.stop__txt { position: absolute; top: 4px; width: min(calc(40% - 60px), 400px); display: flex; flex-direction: column; gap: 10px; }
.stop__k { font: 500 12px/1.2 var(--grot); letter-spacing: .02em; color: var(--ink); }
.stop__t { font: 400 clamp(30px, 3vw, 50px)/.95 var(--serif); color: var(--ink); }
.stop__t span { display: inline-block; white-space: pre; }
.stop__d { color: var(--ink); }
.stop--l .stop__dot { left: 40%; } .stop--l .stop__txt { right: calc(60% + 60px); text-align: right; } .stop--l .stop__d { text-align: right; text-align-last: right; }
.stop--r .stop__dot { left: 60%; } .stop--r .stop__txt { left: calc(60% + 60px); }
.stop:last-child { height: auto; min-height: 160px; }
@media (max-width: 760px) {
  .process__head { grid-template-columns: 1fr; }
  .stop { height: auto; min-height: 200px; padding: 0 0 40px 92px; }
  .stop__dot { width: 56px; height: 56px; margin-left: -28px; font-size: 21px; }
  .stop--l .stop__dot { left: 30px; } .stop--r .stop__dot { left: 50px; }
  .stop__txt, .stop--l .stop__txt, .stop--r .stop__txt { position: relative; left: auto; right: auto; width: auto; text-align: left; }
  .stop--l .stop__d { text-align: justify; text-align-last: auto; }
}

/* 05 films : bleu nuit, libellés bleu pâle, titres blancs, chaque film dans une fenêtre */
.films { --ink: var(--sky); background: var(--navy); color: var(--sky); }
.films__head { display: grid; grid-template-columns: 1fr minmax(260px, 34%); align-items: start; gap: 24px 5vw; margin-bottom: 6vh; }
.films__head .title { color: var(--sky); }
.films__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.film { position: relative; display: flex; flex-direction: column; overflow: hidden; text-align: left; border: 1px solid var(--sky); border-radius: 6px; background: #000; }
.film:first-child { grid-column: 1 / -1; }
.film__bar { display: flex; justify-content: space-between; align-items: center; height: 28px; padding: 0 12px; background: var(--navy); color: var(--sky); border-bottom: 1px solid var(--sky); font: 500 12px/1 var(--grot); letter-spacing: .02em; }
.film__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.film video, .film img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.72); transition: filter .4s, transform 1s cubic-bezier(.2,.7,.2,1); }
.film:hover video, .film:hover img { filter: brightness(1); transform: scale(1.03); }
.film__cap { position: absolute; left: 18px; bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.film__cap .label { color: var(--sky); }
.film__cap b { font: 400 clamp(28px, 3vw, 52px)/1 var(--serif); color: var(--sky); }
@media (max-width: 760px) { .films__head, .films__grid { grid-template-columns: 1fr; } }

/* 06 offre : cinq fenêtres crème à cadre rouge ; au survol, chacune prend sa couleur de la charte */
.offer { background: var(--cream); }
.offer__head { display: grid; grid-template-columns: 1fr minmax(260px, 34%); align-items: start; gap: 24px 5vw; margin-bottom: calc(6vh + 40px); }   /* de l'air au-dessus de la carte centrale */
/* trois offres : la direction artistique globale au centre, plus grande et déjà en couleur ; au survol, chaque carte
   change de couleur (jamais crème sur crème) et son ombre grandit, partout de la même façon */
.offer__grid { display: grid; grid-template-columns: 1fr 1.22fr 1fr; gap: 22px; align-items: stretch; }
.card { --bg: var(--cream); --ink: var(--red); --sh: var(--red); position: relative; display: flex; flex-direction: column; min-height: 520px; background: var(--bg); color: var(--ink); border: 1px solid var(--ink); border-radius: 6px; box-shadow: 5px 5px 0 color-mix(in srgb, var(--sh) 22%, transparent); transition: background-color .5s, color .5s, border-color .5s, translate .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s cubic-bezier(.2,.7,.2,1); }
.card:hover { translate: 0 -8px; box-shadow: 10px 16px 0 color-mix(in srgb, var(--sh) 30%, transparent); }
.card--mission:hover { --bg: var(--sky); --ink: var(--red); --sh: var(--red); }
.card--shoot:hover { --bg: var(--red); --ink: var(--cream); --sh: var(--red); border-color: var(--red); }
.card.is-featured { margin: -26px 0; z-index: 1; }   /* plus grande, crème au repos comme les autres */
.card.is-featured:hover { --bg: var(--blue); --ink: var(--sky); --sh: var(--blue); border-color: var(--blue); }   /* (06/11) bleu électrique */
.card.is-featured .card__bar span:last-child { padding: 3px 9px 4px; border: 1px solid currentColor; border-radius: 50%; }
.card__bar { display: flex; justify-content: space-between; align-items: center; height: 30px; padding: 0 10px 0 12px; border-bottom: 1px solid currentColor; font: 500 12px/1 var(--grot); letter-spacing: .02em; }
.card__in { flex: 1; display: flex; flex-direction: column; gap: 20px; padding: 22px 22px 24px; }
.card h3 { font: 400 clamp(32px, 2.6vw, 46px)/.95 var(--serif); }
.card h3 em { display: block; }
.is-featured h3 { font-size: clamp(38px, 3.2vw, 56px); }
.card__lead { font: 400 clamp(15px, 1.15vw, 18px)/1.15 var(--grot); letter-spacing: -.015em; max-width: 40ch; }
.card ul { border-top: 1px solid currentColor; margin-top: auto; }
.card li { font: 400 15px/1.15 var(--grot); letter-spacing: -.015em; padding: 9px 0; border-bottom: 1px solid currentColor; transition: translate .4s; }
.card:hover li { translate: 10px 0; }
.card__price { font: italic 400 clamp(24px, 2vw, 34px)/1 var(--serif); }
.card__note { font: 500 12px/1.3 var(--grot); letter-spacing: .02em; margin-top: 6px; opacity: .8; }
.is-featured .bub { align-self: flex-start; }
.offer__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px 40px; margin-top: 80px; }
.offer__foot .body { max-width: 52ch; }
@media (max-width: 1100px) { .offer__grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; } .card.is-featured { margin: 0; order: -1; } }
@media (max-width: 680px) { .offer__head { grid-template-columns: 1fr; } .card { min-height: 0; } }

/* contact : bleu très pâle et petits points, comme la couverture */
.contact { background-color: var(--sky); min-height: 100svh; padding-bottom: 0; }
.contact .in { display: flex; flex-direction: column; min-height: calc(100svh - var(--top) - 30px); }
.contact__title { margin: 6vh 0 clamp(14px, 2.2vh, 26px); }   /* les bulles près du titre, comme sur la couverture */
.contact__title { font-size: clamp(60px, 11vw, 200px); }
.contact .bubs { gap: 12px 16px; }
.contact footer { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; padding: 18px 0 calc(var(--gut) + 22px); border-top: var(--hair); font: 500 12px/1.2 var(--grot); letter-spacing: .02em; }

/* page projet : les planches à la suite, comme sur Malt */
.project { position: fixed; inset: 0; z-index: 100; background: var(--cream); overflow-y: auto; visibility: hidden; clip-path: inset(100% 0 0 0); }
.project.is-open { visibility: visible; }
/* page projet : une seule colonne de 1240 px pour tout (barre, titre, textes, planches) — mêmes bords à gauche et à droite */
.project { --col: max(calc(var(--pad) + var(--gut)), (100vw - 1240px) / 2); }
.project__bar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; height: calc(var(--top) + var(--gut)); padding: var(--gut) var(--col) 0; background: var(--cream); border-bottom: var(--hair); }   /* les boutons décollés du cadre */
.p-wrap { padding: 28px var(--col) 0; }
.p-wrap > .meta { width: 100%; }
.p-head { display: grid; grid-template-columns: 1fr minmax(260px, 46%); gap: 24px 5vw; align-items: start; padding-bottom: 4vh; }   /* titre et texte alignés en haut */
.p-head .title, .process__head .title, .films__head .title, .offer__head .title { margin-top: -.08em; }   /* (05/11) titre et texte alignés en haut, à toutes les tailles d'écran */
.p-head .title { font-size: clamp(46px, 5.6vw, 96px); }
.p-media { display: flex; flex-direction: column; gap: 14px; padding-bottom: 10vh; }
.p-media figure { width: 100%; margin: 0; }
.p-media .p-film video { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; }
.p-media img, .p-media figure:not(.p-film) video { width: 100%; height: auto; aspect-ratio: 1754 / 1241; background: #efe9dd; object-fit: cover; }
.p-end { margin: 0 0 12vh; display: flex; justify-content: space-between; gap: 20px; }
@media (max-width: 760px) { .p-sub--tags { flex-wrap: wrap; } .p-sub--tags .bubs { flex-wrap: wrap; justify-content: flex-start; } .p-head { grid-template-columns: 1fr; } .project__bar .bubs .bub:first-child { display: none; } }

/* page projet : la charte, page par page, dans des fenêtres légendées (deux par rangée) */
.p-sub--tags { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.p-sub--tags .bubs { flex-wrap: nowrap; justify-content: flex-end; }   /* les étiquettes du projet sur une seule ligne, alignées sur le titre de section */
.p-sub { margin: 0 0 4vh; display: grid; grid-template-columns: 1fr minmax(260px, 40%); align-items: end; gap: 20px 5vw; }
.p-charte { padding-bottom: 10vh; }
.p-charte__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.p-charte .win__body img, .p-charte .win__body video { display: block; width: 100%; height: auto; background: #efe9dd; }
@media (max-width: 760px) { .p-sub, .p-charte__grid { grid-template-columns: 1fr; } }

/* lecteur de films */
.lightbox { --ink: var(--sky); position: fixed; inset: 0; z-index: 150; background: color-mix(in srgb, var(--navy) 97%, transparent); display: none; place-items: center; padding: 80px var(--pad) 40px; }
.lightbox.is-open { display: grid; }
.lightbox__media { width: min(100%, 1400px); aspect-ratio: 16 / 9; }
.lightbox__media video, .lightbox__media iframe { width: 100%; height: 100%; border: 0; background: #000; }
.lightbox__close { position: absolute; top: 18px; right: var(--pad); }
[hidden] { display: none !important; }
/* téléphone et tablette (05/11) : la vidéo du carrousel reste visible (avec la couverture en image d'attente),
   sinon l'iPhone la considère comme cachée et ne la lance pas */
@media (hover: none) { .slide__media video { opacity: 1; } }
/* téléphone (05/11) : les étiquettes du projet passent sous le titre de section, sur plusieurs lignes */
@media (max-width: 760px) {
  .p-sub--tags { flex-direction: column; align-items: flex-start; }
  .p-sub--tags .bubs { flex-wrap: wrap; justify-content: flex-start; }
}
/* couverture (05/11) : le nom et les étiquettes remontent à la hauteur du titre de la page contact ;
   le texte de présentation reste en bas à droite, juste au-dessus de « faites défiler » */
.cover__in { display: grid; grid-template-columns: 1fr minmax(260px, 32%); grid-template-rows: auto auto 1fr auto; column-gap: 5vw; }
.cover__foot { display: contents; }
.cover__title { grid-column: 1 / -1; grid-row: 1; margin-top: calc(24px + clamp(28px, 5vh, 56px) + 6vh); }   /* même hauteur que « Travaillons ENSEMBLE » */
.cover__foot .bubs { grid-column: 1; grid-row: 2; align-self: start; margin-top: .6vw; }
.cover__foot > .body { grid-column: 2; grid-row: 3; align-self: end; margin-top: 4vh; }
.cover__down { grid-column: 1 / -1; grid-row: 4; justify-self: center; }
@media (max-width: 900px) {
  .cover__in { grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr auto; }
  .cover__foot > .body { grid-column: 1; grid-row: 3; align-self: start; margin-top: 22px; }
  .cover__down { grid-row: 5; }
}