/* La belle équipe. Quatre rubriques, quatre encres : cyan, magenta, jaune, noir (Coated FOGRA39). */

@font-face { font-family: 'League Gothic'; src: url('/fonts/league-gothic.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Newsreader'; src: url('/fonts/newsreader.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('/fonts/newsreader-italique.woff2') format('woff2'); font-weight: 200 800; font-style: italic; font-display: swap; }

:root {
  color-scheme: light;
  --c: #009FE3;
  --m: #E6007E;
  --j: #FFED00;
  --n: #1D1D1B;
  --marge: clamp(.875rem, 2.2vw, 2.5rem);
  --pas: clamp(.5rem, 1.1vw, 1.125rem);
  --section: clamp(4.5rem, 11vw, 11rem);
  --affiche: 'League Gothic', 'Arial Narrow', Impact, sans-serif;
  --lecture: 'Newsreader', Georgia, 'Times New Roman', serif;
}

[data-encre='c'] { --fond: var(--c); --sur: #000; }
[data-encre='m'] { --fond: var(--m); --sur: #000; }
[data-encre='j'] { --fond: var(--j); --sur: #000; }
[data-encre='n'] { --fond: var(--n); --sur: #fff; }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: #000;
  font-family: var(--lecture);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.3125rem);
  line-height: 1.42;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .15em; text-decoration-thickness: 1px; }
h1, h2, h3 { margin: 0; font-family: var(--affiche); font-weight: 400; line-height: .96; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--j); color: #000; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.aplat { background: var(--fond); color: var(--sur); }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.evitement {
  position: fixed; top: .5rem; left: .5rem; z-index: 30; padding: .5rem .8rem;
  background: #000; color: #fff; transform: translateY(-200%);
}
.evitement:focus { transform: none; }

/* Titres calés sur la largeur : chaque ligne reçoit sa taille selon sa largeur réelle en em */
.ajuste { display: block; container-type: inline-size; font-family: var(--affiche); font-weight: 400; line-height: .94; }
.ajuste .l { display: block; white-space: nowrap; font-size: calc(92vw / var(--em)); font-size: min(calc(100cqw / var(--em)), 64vh); }
.ajuste .l--accent { padding-top: .135em; }
.ajuste--double .l { display: contents; }
.ajuste--double .m { display: block; white-space: nowrap; font-size: calc(92vw / var(--em-m)); font-size: calc(100cqw / var(--em-m)); }
@media (min-width: 700px) {
  .ajuste--double .l { display: block; }
  .ajuste--double .m { display: inline; font-size: inherit; }
}

/* En-tête */
.entete {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .7rem var(--marge);
  transition: transform .3s ease;
}
.entete.repli { transform: translateY(-101%); }
.entete-logo { flex: none; }
.entete-logo img { width: clamp(5.6rem, 15vw, 12rem); }
.entete ul { display: flex; gap: clamp(.7rem, 2.4vw, 2.25rem); }
.entete nav a {
  display: block; padding: .3em 0 .18em; white-space: nowrap;
  font-family: var(--affiche); font-size: clamp(1.1rem, .9rem + 1vw, 1.6rem); line-height: 1; letter-spacing: .035em;
  text-decoration: none; border-bottom: .12em solid transparent;
}
.entete nav a:hover, .entete nav a[aria-current='page'] { border-bottom-color: currentColor; }

/* Accueil : couverture */
.couverture { padding: clamp(.75rem, 2vw, 1.75rem) var(--marge) clamp(1.25rem, 2.6vw, 2.25rem); }
.couverture-titre { font-size: inherit; line-height: inherit; font-family: inherit; }
.couverture-chapeau {
  display: block; margin-top: .3em;
  font-family: var(--lecture); font-style: italic; font-weight: 400;
  font-size: clamp(1.55rem, 3.7vw, 3.75rem); line-height: 1.06; letter-spacing: -.012em;
}
.couverture-intro { max-width: 30em; margin: .9em 0 0; font-size: clamp(1.0625rem, 1.25vw, 1.3125rem); line-height: 1.32; }

/* Accueil : bande de visuels */
.bande { position: relative; overflow: hidden; background: #fff; }
.bande-piste { display: flex; width: max-content; animation: defile 170s linear infinite; }
.bande ul { display: flex; gap: var(--pas); padding-right: var(--pas); }
.bande img { width: auto; max-width: none; height: clamp(11rem, 31vh, 24rem); }
.bande:hover .bande-piste, .bande.en-pause .bande-piste { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-50%); } }

.pause {
  padding: .35em .7em .28em; border: 0; cursor: pointer;
  background: #000; color: #fff;
  font-family: var(--affiche); font-size: 1.05rem; line-height: 1; letter-spacing: .04em;
}
.bande .pause { position: absolute; right: var(--marge); bottom: .75rem; }
.appel .pause { background: #fff; color: #000; margin-top: .75rem; }

/* Accueil : sélection */
.selection { padding: var(--section) var(--marge); }
.section-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 2rem; margin-bottom: clamp(1.75rem, 4.5vw, 4rem); }
.section-tete h2 { font-size: clamp(4rem, 13vw, 13rem); line-height: .86; }
.rubriques { display: flex; flex-wrap: wrap; gap: .1em .9em; font-family: var(--affiche); font-size: clamp(1.5rem, 2.8vw, 2.75rem); line-height: 1.1; }
.rubriques a { text-decoration: none; border-bottom: .08em solid transparent; }
.rubriques a:hover { border-bottom-color: currentColor; }

/* Vignettes de projet : chaque rangée occupe toute la largeur, à hauteur égale, sans recadrer les images.
   --r : proportions de l'image ; --n et --somme : nombre de vignettes et total des proportions de sa rangée. */
.grille, .selection-grille { display: flex; flex-wrap: wrap; gap: clamp(1.75rem, 3vw, 2.75rem) var(--pas); }
.grille > li, .selection-grille > li { flex: 1 1 100%; min-width: 0; }
@media (min-width: 700px) {
  .grille > li, .selection-grille > li { flex: var(--r) 1 calc((100% - (var(--n) - 1) * var(--pas) - 1px) * var(--r) / var(--somme)); }
}
.tuile { display: block; text-decoration: none; }
.tuile-image { position: relative; display: block; overflow: hidden; }
.tuile-image img { width: 100%; }
.tuile-image--fond { background: #e8e8e8; isolation: isolate; }
.tuile-image--fond img { mix-blend-mode: multiply; }
.tuile-image::after {
  content: ''; position: absolute; inset: 0;
  background: var(--encre); mix-blend-mode: multiply; opacity: 0; transition: opacity .22s ease;
}
.tuile-legende { display: grid; grid-template-columns: auto 1fr; gap: .1em .55em; padding-top: .55rem; }
.tuile-num { font-style: italic; font-size: .95em; line-height: 1.25; }
.tuile-nom { font-family: var(--affiche); font-size: clamp(1.5rem, 2.1vw, 2.1rem); line-height: 1; letter-spacing: .01em; transition: text-shadow .16s ease; }
.tuile-filtres { grid-column: 2; font-style: italic; font-size: .92em; color: #555; line-height: 1.25; }
.tuile--grande .tuile-nom { font-size: clamp(1.8rem, 3.1vw, 3.1rem); }
.tuile:focus-visible .tuile-image::after { opacity: 1; }
@media (hover: hover) {
  .tuile:hover .tuile-image::after { opacity: 1; }
  .tuile:hover .tuile-nom { text-shadow: .045em 0 0 var(--c), -.045em 0 0 var(--m); }
}

/* Accueil : générique */
.generique { padding: 0 var(--marge) var(--section); }
.generique-noms { font-family: var(--affiche); font-size: clamp(2.5rem, 8.2vw, 8.75rem); line-height: 1.03; letter-spacing: .002em; }
.generique-noms li { display: inline; }
.generique-noms a { text-decoration: none; padding: 0 .05em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.generique-noms a:hover, .generique-noms a:focus-visible { background: var(--encre); color: var(--encre-sur); }
.generique-noms sup { margin-right: .22em; font-family: var(--lecture); font-style: italic; font-size: .2em; line-height: 0; vertical-align: 1.9em; }

/* Logos clients */
.clients { padding: 0 var(--marge) var(--section); }
.clients h2:not(.visuellement-cache) { margin-bottom: 1.25rem; font-size: clamp(1.6rem, 2.6vw, 2.4rem); letter-spacing: .02em; }
.logos { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid #000; border-left: 1px solid #000; }
.logos li { display: flex; align-items: center; justify-content: center; min-height: clamp(5.5rem, 10vw, 9rem); padding: 1rem; border-right: 1px solid #000; border-bottom: 1px solid #000; }
.logos a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.logos img { width: auto; max-width: min(100%, 9rem); height: auto; max-height: clamp(2.75rem, 5.4vw, 4.75rem); object-fit: contain; background: none !important; mix-blend-mode: multiply; }
@media (min-width: 620px) { .logos { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .logos { grid-template-columns: repeat(7, 1fr); } }

/* Appel à contact */
.appel { padding: clamp(1.75rem, 5vw, 4.5rem) var(--marge); }
.appel-titre { font-size: inherit; }
.rotatif { position: relative; display: block; height: 1.04em; overflow: hidden; color: var(--j); font-size: calc(92vw / var(--em-m)); font-size: calc(100cqw / var(--em-m)); }
@media (min-width: 700px) { .rotatif { font-size: calc(100cqw / var(--em)); } }
.rotatif .var { position: absolute; top: .02em; left: 0; white-space: nowrap; transform: translateY(112%); transition: transform .62s cubic-bezier(.7, 0, .15, 1); }
.rotatif .var.on { transform: none; }
.rotatif .var.sort { transform: translateY(-112%); }
.rotatif .var:nth-child(3n + 1) { color: var(--c); }
.rotatif .var:nth-child(3n + 2) { color: var(--m); }
.rotatif .var:nth-child(3n) { color: var(--j); }
.appel-lien { margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; }

.bouton {
  display: inline-block; padding: .46em .8em .36em; border: 0; cursor: pointer;
  background: var(--j); color: #000;
  font-family: var(--affiche); font-size: clamp(1.7rem, 2.8vw, 2.6rem); line-height: 1; letter-spacing: .025em; text-decoration: none;
  transition: background-color .15s ease;
}
.bouton:hover { background: var(--c); }
.bouton--noir { background: #000; color: #fff; }
.bouton--noir:hover { background: var(--j); color: #000; }

/* Formulaire */
.contact { display: grid; gap: clamp(2.5rem, 5vw, 4rem); margin-top: clamp(2.5rem, 6vw, 6rem); }
.contact-texte { font-size: clamp(1.5rem, 2.7vw, 2.6rem); line-height: 1.16; letter-spacing: -.008em; }
.contact-texte p { margin: 0 0 .8em; overflow-wrap: anywhere; }
.formulaire { position: relative; }
.champ { margin: 0 0 1.5rem; }
.champ label { display: block; margin-bottom: .2rem; font-family: var(--affiche); font-size: 1.45rem; line-height: 1; letter-spacing: .035em; text-transform: uppercase; }
.champ input, .champ textarea {
  display: block; width: 100%; padding: .35rem 0; border: 0; border-bottom: 2px solid #fff; border-radius: 0;
  background: transparent; color: #fff; font: inherit; font-size: 1.25rem;
}
.champ textarea { resize: vertical; }
.champ input:focus, .champ textarea:focus { outline: 0; border-bottom-color: var(--j); box-shadow: 0 2px 0 var(--j); }
.piege { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
.formulaire-note { margin: 0 0 1.5rem; font-size: .95rem; font-style: italic; }
.formulaire-note:empty { margin: 0; }
@media (min-width: 900px) {
  .contact { grid-template-columns: 5fr 7fr; }
}

/* En-têtes de page */
.tete { padding: clamp(.5rem, 1.2vw, 1rem) var(--marge) clamp(1rem, 2.4vw, 2rem); }
.filtres { display: flex; flex-wrap: wrap; gap: .1em 1em; margin-top: clamp(.75rem, 2vw, 1.5rem); }
.filtres button {
  padding: 0 0 .06em; border: 0; border-bottom: .09em solid transparent; background: none; cursor: pointer;
  font-family: var(--affiche); font-size: clamp(1.7rem, 3.1vw, 3.1rem); line-height: 1.04; letter-spacing: .012em;
}
.filtres button:hover, .filtres button[aria-pressed='true'] { border-bottom-color: currentColor; }
.filtres sup { margin-left: .15em; font-family: var(--lecture); font-style: italic; font-size: .42em; line-height: 0; }
.tete--pleine { display: flex; flex-direction: column; justify-content: flex-end; min-height: 72svh; }
.tete-texte { margin: 1em 0; font-size: clamp(1.5rem, 3vw, 3rem); line-height: 1.1; font-style: italic; }

/* Portfolio */
.grille { padding: var(--pas) var(--marge) var(--section); }

/* Fiche projet */
.projet-tete { position: relative; padding: clamp(.5rem, 1vw, .9rem) var(--marge) clamp(3.5rem, 11vw, 11rem); }
.projet-folio { margin: 0 0 .2em; font-style: italic; font-size: clamp(1.05rem, 1.5vw, 1.4rem); }
.projet-corps { padding: 0 var(--marge); }
.projet-couverture { position: relative; margin-top: calc(-1 * clamp(2.5rem, 9vw, 9rem)); }
.projet-couverture img, .projet-couverture video { width: 100%; max-width: var(--max, none); margin: 0 auto; }
.projet-info { display: grid; gap: 1.5rem; padding: clamp(1.75rem, 4.5vw, 4.5rem) 0 clamp(2rem, 5.5vw, 5.5rem); }
.projet-meta { display: grid; gap: .55rem; margin: 0; align-content: start; }
.projet-meta dt { font-family: var(--affiche); font-size: 1.3rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.projet-meta dd { margin: 0; line-height: 1.22; }
.projet-description { font-size: clamp(1.4rem, 2.6vw, 2.55rem); line-height: 1.16; letter-spacing: -.008em; }
.projet-description p { margin: 0 0 .6em; }
.projet-description p:last-child { margin-bottom: 0; }
.projet-description ul { display: grid; gap: .5em; margin: .8em 0 0; font-size: .62em; line-height: 1.28; letter-spacing: 0; }
.projet-description li { padding-top: .5em; border-top: 1px solid #000; }
.projet-description strong { font-weight: 600; }
@media (min-width: 900px) {
  .projet-info { grid-template-columns: repeat(12, 1fr); gap: var(--pas); }
  .projet-meta { grid-column: 1 / 5; }
  .projet-description { grid-column: 5 / 13; }
}

.visuels { display: grid; gap: var(--pas); }
.rang { display: flex; flex-direction: column; gap: var(--pas); }
.visuel { position: relative; min-width: 0; margin: 0; }
.visuel img, .visuel video { width: 100%; }
.visuel .zoom { display: block; cursor: zoom-in; }
.visuel figcaption { padding-top: .3rem; font-style: italic; font-size: .95em; }
.incruste { position: absolute; object-fit: cover; }
.rang--quart { flex-flow: row wrap; }
.rang--quart .visuel { flex: 1 1 40%; }
@media (min-width: 760px) {
  .rang { flex-flow: row nowrap; justify-content: center; }
  .rang .visuel { flex: var(--ratio, 1) 1 0; }
  .rang--pleine .visuel { flex: 0 1 min(100%, calc(var(--l, 2000px) * 1.5)); }
  .rang--moyenne .visuel { flex: 0 1 min(72%, calc(var(--l, 1000px) * 1.1)); }
  .rang--etroite .visuel { flex: 0 1 min(56%, 42rem); }
}

.intertitre { margin: clamp(2.5rem, 7vw, 7rem) 0 clamp(.4rem, 1.2vw, 1rem); }
.intertitre h2 { font-size: clamp(2.4rem, 6vw, 6.25rem); line-height: .96; }
.intertitre p { margin: .25em 0 0; font-style: italic; font-size: clamp(1.2rem, 2vw, 1.9rem); line-height: 1.18; }
.legende { margin: .05rem 0 clamp(1rem, 2.4vw, 2.4rem); font-style: italic; }

.projet-retour { margin: clamp(2.5rem, 6vw, 6rem) 0 0; text-align: right; }
.projet-suite { display: block; margin-top: clamp(1.5rem, 3vw, 2.5rem); padding: clamp(.75rem, 1.5vw, 1.25rem) var(--marge) clamp(1rem, 2.4vw, 2rem); text-decoration: none; transition: background-color .18s ease, color .18s ease; }
.projet-suite-mention { display: block; margin-bottom: .2em; font-style: italic; font-size: clamp(1.05rem, 1.5vw, 1.4rem); }
.projet-suite:hover { background: #000; color: var(--fond); }
.projet-suite[data-encre='n']:hover { background: #fff; color: #000; }

/* À propos */
.portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: right center; }
@media (min-width: 760px) { .portrait img { aspect-ratio: auto; } }
.apropos { display: grid; gap: clamp(2.75rem, 6vw, 6rem); padding: var(--section) var(--marge); }
.bloc { display: grid; gap: .6rem; }
.bloc h2 { font-size: clamp(1.7rem, 2.8vw, 2.6rem); letter-spacing: .015em; }
.bloc p { max-width: 34em; margin: 0; font-size: clamp(1.2rem, 1.75vw, 1.625rem); line-height: 1.3; }
.bloc .bloc-grand { max-width: none; font-size: clamp(1.7rem, 3.9vw, 3.75rem); line-height: 1.1; letter-spacing: -.012em; }
.signature { font-family: var(--affiche); font-size: clamp(2.4rem, 5.4vw, 5.5rem); line-height: 1; margin-bottom: .25em !important; }
@media (min-width: 900px) {
  .bloc { grid-template-columns: repeat(12, 1fr); column-gap: var(--pas); }
  .bloc h2 { grid-column: 1 / 5; }
  .bloc > p { grid-column: 5 / 13; }
}
.competences { padding: var(--section) var(--marge); }
.competences > h2 { font-size: clamp(4rem, 13vw, 13rem); line-height: .86; }
.competences-colonnes { display: grid; gap: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2rem, 5vw, 5rem); }
.competences h3 { font-size: clamp(3rem, 6.4vw, 6.75rem); line-height: .94; color: var(--j); }
.competences-colonnes > div:nth-child(1) h3 { color: var(--c); }
.competences-colonnes > div:nth-child(2) h3 { color: var(--m); }
.competences-colonnes p { margin: .7em 0 1.1em; }
.competences li { padding: .42em 0 .36em; border-top: 1px solid rgba(255, 255, 255, .4); line-height: 1.2; }
@media (min-width: 900px) { .competences-colonnes { grid-template-columns: repeat(3, 1fr); } }
.apropos-visuels { display: grid; gap: var(--pas); padding: 0 var(--marge) var(--section); }
.apropos-visuels img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.apropos-visuels a, .apropos-visuels span { display: block; }
@media (min-width: 620px) { .apropos-visuels { grid-template-columns: repeat(3, 1fr); } }

/* Mentions légales */
.texte-page { max-width: 44rem; padding: clamp(2rem, 6vw, 5rem) var(--marge) var(--section); }
.texte-page h2 { margin: 2.2rem 0 .5rem; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.texte-page p { margin: 0 0 .7em; }
.a-completer { background: var(--j); padding: 0 .3em; font-style: italic; }

/* Pied de page */
.pied { display: grid; gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2.75rem) var(--marge); }
.pied-gamme { display: flex; gap: 2px; }
.pied-gamme i { width: 1.15rem; height: 1.15rem; }
.pied-gamme i:nth-child(1) { background: var(--c); }
.pied-gamme i:nth-child(2) { background: var(--m); }
.pied-gamme i:nth-child(3) { background: var(--j); }
.pied-gamme i:nth-child(4) { background: #000; box-shadow: inset 0 0 0 1px #fff; }
.pied-logo { display: block; width: fit-content; }
.pied-logo img { width: clamp(9rem, 16vw, 12rem); }
.pied-signature { margin: 0; }
.pied-liens { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; }
@media (min-width: 900px) {
  .pied { grid-template-columns: 1fr auto; align-items: end; }
  .pied-gamme { grid-column: 1 / -1; }
  .pied-liens { grid-column: 2; grid-row: 2 / 4; justify-content: flex-end; }
}

/* Loupe */
.loupe { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #000; color: #fff; overflow: hidden; }
.loupe::backdrop { background: #000; }
.loupe img { position: absolute; inset: 0; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; }
.loupe button { position: absolute; z-index: 1; padding: .5em .75em .4em; border: 0; background: #000; color: #fff; cursor: pointer; font-family: var(--affiche); font-size: 1.5rem; line-height: 1; letter-spacing: .03em; }
.loupe button:hover { background: var(--j); color: #000; }
.loupe-fermer { top: .5rem; right: .5rem; }
.loupe-prec { bottom: .5rem; left: .5rem; }
.loupe-suiv { bottom: .5rem; right: .5rem; }
.loupe-compteur { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); margin: 0; padding: 0 .5em; background: #000; font-style: italic; }

/* Animations : discrètes, et absentes si l'utilisateur les refuse */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @supports (animation-timeline: view()) {
    .tuile, .visuel, .bloc, .competences-colonnes > div {
      animation: monte linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 26%;
    }
    @keyframes monte { from { transform: translateY(1.6rem); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { transition: none !important; }
  .bande { overflow-x: auto; }
  .bande-piste { animation: none; }
}