/* =========================================================================
   Paronamique, Maison d'images
   Feuille de styles unique. Aucune dépendance externe.
   Reproduit le système de mise en page « fluid engine » : grille de 24
   colonnes (8 sur mobile), gouttière de 11px, hauteur de rangée indexée sur
   la largeur du conteneur.
   ========================================================================= */

/* ---------- 1. Polices ---------------------------------------------------- */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Epilogue';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/epilogue-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Epilogue';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/epilogue-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. Jetons de design ------------------------------------------ */

:root {
  /* Palette */
  --white:        #fafafa;
  --black:        #000000;
  --accent:       #dcdcdc;
  --light-accent: #ffffff;
  --dark-accent:  #1c1c1c;
  --site-bg:      #ffffff;

  /* Gabarit */
  --max-page-width: 2000px;
  --page-padding:   6vw;   /* mobile ; 4vw à partir de 768px */
  --grid-gap:       11px;
  --header-pad-y:   6vw;   /* mobile ; 2vw à partir de 768px */

  /* Typographie */
  --font-heading: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-body:    'Epilogue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --body-line-height:    1.5;
  --heading-line-height: 1.2;

  /* Échelle des titres : taille = (S - 1) x --fs-vw + 1rem, plafonnée.
     Le coefficient passe de 2.6vw (mobile) à 1.2vw (bureau) à 768px. */
  --fs-vw: 2.6vw;
  --h1-scale: 4;
  --h2-scale: 2.8;
  --h3-scale: 2.2;
  --h4-scale: 1.6;
  --title-scale: 1.5;

  /* Hauteur de rangée de la grille fluide */
  --container-width: min(var(--max-page-width), calc(100vw - var(--page-padding) * 2));
  --row-height: 24px;
}

@media (min-width: 768px) {
  :root {
    --page-padding: 4vw;
    --header-pad-y: 2vw;
    --row-height: calc(var(--container-width) * 0.0215);
    --fs-vw: 1.2vw;
  }
}

/* ---------- 3. Réinitialisation ------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  /* Colonne verticale : sur les pages courtes, le pied de page reste collé
     au bas de la fenêtre, comme sur le site d'origine. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--site-bg);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: var(--body-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--black);
  color: var(--white);
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- 4. Titres et texte enrichi ----------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: normal;
  margin: 2rem 0;
}

h1 {
  font-size: min(calc((var(--h1-scale) - 1) * var(--fs-vw) + 1rem),
                 calc((var(--h1-scale) - 1) * .012 * var(--max-page-width) + 1rem));
  line-height: calc(var(--heading-line-height) * (1 + (1 - var(--h1-scale)) / 25));
}
h2 {
  font-size: min(calc((var(--h2-scale) - 1) * var(--fs-vw) + 1rem),
                 calc((var(--h2-scale) - 1) * .012 * var(--max-page-width) + 1rem));
  line-height: calc(var(--heading-line-height) * (1 + (1 - var(--h2-scale)) / 25));
}
h3 {
  font-size: min(calc((var(--h3-scale) - 1) * var(--fs-vw) + 1rem),
                 calc((var(--h3-scale) - 1) * .012 * var(--max-page-width) + 1rem));
  line-height: calc(var(--heading-line-height) * (1 + (1 - var(--h3-scale)) / 25));
}
h4, h5, h6 {
  font-size: min(calc((var(--h4-scale) - 1) * var(--fs-vw) + 1rem),
                 calc((var(--h4-scale) - 1) * .012 * var(--max-page-width) + 1rem));
  line-height: calc(var(--heading-line-height) * (1 + (1 - var(--h4-scale)) / 25));
}

.rich-text > *:first-child { margin-top: 0; }
.rich-text > *:last-child  { margin-bottom: 0; }

/* Le texte enrichi conserve les espaces et retours à la ligne saisis dans
   l'éditeur, et les paragraphes vides gardent leur hauteur de ligne. */
.rich-text :is(p, h1, h2, h3, h4, h5, h6) { white-space: pre-wrap; }
.rich-text :is(p, h1, h2, h3, h4, h5, h6):empty::before { content: '\200b'; }

.rich-text p { margin: 1rem 0; }
.rich-text ul,
.rich-text ol { margin: 1rem 0; padding-left: 40px; }
.rich-text li p { margin: .5rem 0; }
.rich-text li :is(ul, ol) { margin: .5rem 0; }
.rich-text blockquote { margin: 1rem 40px; padding: 0; border: 0; font-style: normal; }
.rich-text a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; }
.rich-text a:hover { text-decoration-color: transparent; }
.rich-text strong { font-weight: 700; }
.rich-text hr { border: 0; border-top: 1px solid var(--accent); margin: 2rem 0; }

/* ---------- 5. En-tête ---------------------------------------------------- */

.site-header {
  position: relative;
  z-index: 30;
  padding: var(--header-pad-y) var(--page-padding);
  background: transparent;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
  max-width: var(--max-page-width);
  margin: 0 auto;
}

.site-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.2;
  font-size: min(calc((var(--title-scale) - 1) * var(--fs-vw) + 1rem),
                 calc((var(--title-scale) - 1) * .012 * var(--max-page-width) + 1rem));
}
.site-title a { text-decoration: none; }

.site-nav { display: none; }

@media (min-width: 768px) {
  .site-nav {
    display: flex;
    align-items: center;
  }
  .site-nav a {
    display: inline-block;
    padding: 1.5px 0;
    margin-left: 2vw;
    text-decoration: none;
  }
  .site-nav a:first-child { margin-left: 0; }
  .site-nav a[aria-current='page'],
  .site-nav a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
}

/* Bouton hamburger */
.nav-toggle {
  display: block;
  width: 44px;
  height: 44px;
  margin: -3.5px -10px -3.5px 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.nav-toggle__bars { display: block; width: 26px; margin: 0 auto; }
.nav-toggle__bars span {
  display: block;
  height: 1px;
  background: var(--black);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle__bars span + span { margin-top: 7px; }

@media (min-width: 768px) {
  .nav-toggle { display: none; }
}

/* Menu plein écran (mobile) */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--site-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.mobile-nav[data-open='true'] { opacity: 1; visibility: visible; }
.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.mobile-nav li + li { margin-top: 1.5rem; }
.mobile-nav a {
  font-size: 2.125rem;
  line-height: 1.2;
  text-decoration: none;
}
body[data-nav-open='true'] { overflow: hidden; }
body[data-nav-open='true'] .nav-toggle__bars span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
body[data-nav-open='true'] .nav-toggle__bars span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* ---------- 6. Grille fluide (sections) ---------------------------------- */

.section {
  position: relative;
  padding: var(--sec-pad, 0) 0;
}

.fluid-grid {
  --gutter:    calc(var(--page-padding) - var(--grid-gap));
  --cell-max:  calc((var(--max-page-width) - var(--grid-gap) * 7) / 8);
  display: grid;
  position: relative;
  grid-template-rows: repeat(var(--rows, 1), minmax(var(--row-height), auto));
  grid-auto-rows: minmax(var(--row-height), auto);
  grid-template-columns:
    minmax(var(--gutter), 1fr)
    repeat(8, minmax(0, var(--cell-max)))
    minmax(var(--gutter), 1fr);
  row-gap: var(--grid-gap);
  column-gap: var(--grid-gap);
  overflow-x: clip;
}

@media (min-width: 768px) {
  .fluid-grid {
    --cell-max: calc((var(--max-page-width) - var(--grid-gap) * 23) / 24);
    grid-template-rows: repeat(var(--rows-d, var(--rows, 1)), minmax(var(--row-height), auto));
    grid-template-columns:
      minmax(var(--gutter), 1fr)
      repeat(24, minmax(0, var(--cell-max)))
      minmax(var(--gutter), 1fr);
  }
}

.grid-block {
  grid-area: var(--ga);
  justify-content: var(--jc, flex-start);
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.grid-block--middle { justify-content: center; }

@media (min-width: 768px) {
  .grid-block {
    grid-area: var(--ga-d, var(--ga));
    justify-content: var(--jc-d, var(--jc, flex-start));
  }
}

/* Image qui remplit sa zone de grille sans en dicter la hauteur */
.fill-image {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--accent);
}
.fill-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* ---------- 7. Grille portfolio (accueil / services) --------------------- */

.portfolio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  max-width: calc(var(--max-page-width) + var(--page-padding) * 2);
  margin: 0 auto;
  padding: 3.3vw var(--page-padding);
}

@media (min-width: 768px) {
  .portfolio-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.portfolio-item { text-decoration: none; display: block; }
.portfolio-item__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--accent);
}
.portfolio-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}
.portfolio-item:hover .portfolio-item__media img { transform: scale(1.03); }

.portfolio-item__title {
  margin: 1.25rem 0 .5em;
  font-family: var(--font-heading);
  font-weight: 400;
  text-transform: uppercase;
  font-size: min(calc((var(--h4-scale) - 1) * var(--fs-vw) + 1rem),
                 calc((var(--h4-scale) - 1) * .012 * var(--max-page-width) + 1rem));
  line-height: var(--heading-line-height);
}

/* ---------- 8. Galerie défilante (reel) ---------------------------------- */

.reel {
  height: 80vh;
  min-height: 420px;
  padding: 0;
}
@media (min-width: 768px) {
  .reel { padding: var(--page-padding); }
}
.reel__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: var(--max-page-width);
  margin: 0 auto;
}

.reel__track {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.reel__track::-webkit-scrollbar { display: none; }

.reel__item {
  flex: 0 0 auto;
  height: 100%;
  scroll-snap-align: start;
}
.reel__item img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  background: var(--accent);
}

.reel__controls {
  flex: 0 0 auto;
  display: flex;
  margin-top: 15px;
}
.reel__btn {
  width: 44px;
  height: 44px;
  padding: 8px;
  border: 0;
  background: none;
  cursor: pointer;
}
.reel__btn svg { width: 100%; height: 100%; }
.reel__btn svg path { stroke: var(--black); stroke-width: 2; fill: none; }
.reel__btn[disabled] { opacity: .25; cursor: default; }
.reel__btn--next svg { transform: scaleX(-1); }

/* ---------- 9. Pagination projet précédent / suivant --------------------- */

.item-pagination {
  display: flex;
  align-items: center;
  padding: 3vw var(--page-padding);
  background: var(--accent);
}
.item-pagination__link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 50%;
  min-width: 0;
  text-decoration: none;
}
.item-pagination__link--prev { margin-right: auto; }
.item-pagination__link--next {
  margin-left: auto;
  justify-content: flex-end;
  text-align: right;
}
.item-pagination__title {
  display: block;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  text-transform: uppercase;
  font-size: min(calc((var(--h3-scale) - 1) * var(--fs-vw) + 1rem),
                 calc((var(--h3-scale) - 1) * .012 * var(--max-page-width) + 1rem));
  line-height: 1;
}
.item-pagination__icon { flex: 0 0 auto; width: 9px; }
.item-pagination__icon svg { width: 9px; height: 16px; }
.item-pagination__icon polyline { stroke: var(--black); stroke-width: 1.5; fill: none; }
.item-pagination__link:hover .item-pagination__title { text-decoration: underline; text-decoration-thickness: 1px; }

/* ---------- 10. Formulaire ------------------------------------------------ */

.form { margin: 0; }

.form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.form__row > * { flex: 1 1 200px; min-width: 0; }

.form__field { margin-bottom: 20px; }

.form__label {
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}
.form__optional { font-size: .885em; }
.form__caption {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 1.5rem;
}

.form input[type='text'],
.form input[type='email'],
.form input[type='tel'],
.form select,
.form textarea {
  width: 100%;
  padding: 8px 15px;
  border: 1px solid var(--black);
  border-radius: 22px;
  background: transparent;
  color: var(--black);
  font-family: inherit;
  font-size: 1rem;
  line-height: var(--body-line-height);
}
.form textarea { display: block; height: 100px; min-height: 100px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--black); outline-offset: 2px; }

.button {
  display: inline-block;
  padding: 18px 30px;
  border: 0;
  border-radius: 300px;
  background: var(--black);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 16px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .2s ease;
}
.button:hover { opacity: .8; }

.form__message {
  margin: 0 0 20px;
  padding: 15px 20px;
  border-radius: 12px;
  font-size: 1rem;
}
.form__message--ok    { background: var(--accent); }
.form__message--error { background: var(--black); color: var(--white); }

.form__errors { margin: 0 0 20px; padding-left: 20px; }

/* --- Formulaire qualifiant en deux étapes --- */

.form__etape {
  min-width: 0;
  margin: 0 0 2rem;
  padding: 0;
  border: 0;
}
.form__etape:last-of-type { margin-bottom: 0; }
.form__etape[hidden] { display: none; }

.form__legend {
  padding: 0;
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 700;
}

.form__compteur {
  margin: 0 0 1rem;
  font-size: .8rem;
  opacity: .65;
}

.form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--black) 50%),
                    linear-gradient(135deg, var(--black) 50%, transparent 50%);
  background-position: calc(100% - 21px) 19px, calc(100% - 16px) 19px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.form__suivant { margin-top: .5rem; }

.form__rgpd {
  margin: 0 0 1.5rem;
  font-size: .8rem;
  line-height: 1.55;
  opacity: .75;
}

.form__delai {
  margin: .75rem 0 0;
  font-size: .8rem;
  opacity: .75;
}

/* Piège à robots : invisible pour l'utilisateur, rempli par les scripts */
.form__trap {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- 11. Pied de page --------------------------------------------- */

main { flex: 1 0 auto; }

.site-footer {
  flex-shrink: 0;
  margin-top: 6.6vw;
  padding: 3.3vw var(--page-padding) 1.5rem;
  border-top: 1px solid var(--accent);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  max-width: var(--max-page-width);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 3vw;
  }
}

.site-footer p { margin: 0 0 .5rem; }
.site-footer p:last-child { margin-bottom: 0; }

.site-footer__name {
  font-family: var(--font-heading);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.25rem;
  line-height: 1.2;
}

.site-footer__heading {
  margin: 0 0 .5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  line-height: 1.5;
}

.site-footer a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.site-footer a:hover { text-decoration-color: transparent; }

.site-footer__legal ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__legal li + li { margin-top: .35rem; }

.site-footer__social {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.site-footer__social a {
  display: block;
  width: 32px;
  height: 32px;
  padding: 4px;
  text-decoration: none;
}
.site-footer__social svg { width: 100%; height: 100%; }
.site-footer__social svg :is(rect, circle, path) {
  fill: none;
  stroke: var(--black);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.site-footer__social svg .plein { fill: var(--black); stroke: none; }
.site-footer__social a:hover svg :is(rect, circle, path) { opacity: .6; }

.site-footer__base {
  max-width: var(--max-page-width);
  margin: 2.5rem auto 0;
  font-size: .8rem;
  opacity: .65;
}

.button--ghost {
  padding: 12px 24px;
  background: transparent;
  color: var(--black);
  border: 1px solid var(--black);
  text-decoration: none;
}
.button--ghost:hover { background: var(--black); color: var(--accent); opacity: 1; }

/* ---------- 12. Page 404 -------------------------------------------------- */

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 55vh;
  padding: 4rem var(--page-padding);
  text-align: center;
}
.error-page h1 { margin: 0; }

/* =========================================================================
   13. Page d'accueil
   ========================================================================= */

/* --- En-tête transparent posé sur le bandeau d'ouverture --- */

.page-accueil .site-header {
  position: absolute;
  inset: 0 0 auto;
  color: var(--white);
}
.page-accueil .site-header a { color: inherit; }
.page-accueil .nav-toggle__bars span { background: var(--white); }
.page-accueil[data-nav-open='true'] .site-header { color: var(--black); }
.page-accueil[data-nav-open='true'] .nav-toggle__bars span { background: var(--black); }

/* --- Bandeau d'ouverture --- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 560px;
  height: 92vh;
  height: 92svh;
  padding: calc(var(--header-pad-y) * 2 + 4rem) var(--page-padding) 4rem;
  overflow: hidden;
  background: var(--dark-accent);
  color: var(--white);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media :is(picture, img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
              rgba(0, 0, 0, .55) 0%,
              rgba(0, 0, 0, .25) 35%,
              rgba(0, 0, 0, .75) 100%);
}

.hero__contenu {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-page-width);
  margin: 0 auto;
}

.hero__titre {
  max-width: 20ch;
  margin: 0 0 1rem;
  color: var(--white);
  text-wrap: balance;
}

.hero__accroche {
  max-width: 48ch;
  margin: 0 0 2rem;
  font-size: 1.15rem;
  line-height: 1.55;
}

.hero__actions { margin: 0; }

.hero__play {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 1.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  cursor: pointer;
  font-size: 1rem;
}
.hero__play svg {
  width: 40px;
  height: 40px;
  padding: 11px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.hero__play svg polygon { fill: currentColor; }
.hero__play:hover svg { background: rgba(255, 255, 255, .15); }
.hero__duree { opacity: .7; }

/* Lecteur ouvert au clic : la vidéo n'est jamais chargée avant. */
.lecteur-video {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vw;
  background: rgba(0, 0, 0, .92);
}
.lecteur-video iframe {
  width: min(100%, 1600px);
  aspect-ratio: 16 / 9;
  border: 0;
}
.lecteur-video__fermer {
  position: absolute;
  top: 2vw;
  right: 2vw;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
}

/* --- Structure des sections --- */

.section-bloc { padding: 6vw var(--page-padding); }
.section-bloc--accent { background: var(--accent); }

.contenu-large {
  max-width: var(--max-page-width);
  margin: 0 auto;
}

.titre-section {
  margin: 0 0 2.5rem;
  text-wrap: balance;
}

.lien-fleche {
  display: inline-block;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.lien-fleche::after {
  content: ' →';
  text-decoration: none;
  display: inline-block;
  transition: transform .2s ease;
}
.lien-fleche:hover::after { transform: translateX(4px); }

/* --- Bandeau clients --- */

.bandeau-clients {
  padding: 2.5vw var(--page-padding);
  border-bottom: 1px solid var(--accent);
  text-align: center;
}
/* C'est un <h2> pour le plan du document, mais il garde l'allure d'une
   étiquette : la bande de références annonce une liste, elle n'ouvre pas un
   chapitre. D'où la police de texte et non celle des titres. */
.bandeau-clients__intro {
  margin: 0 0 1.75rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .08em;
  line-height: var(--body-line-height);
  text-transform: uppercase;
  opacity: .6;
}
/* Grille, et non rangée de logos collés : chaque marque reçoit une case de
   même taille, ce qui aligne les logos entre eux au lieu de les tasser à la
   suite. Quatre colonnes sur bureau, trois sur tablette, deux sur mobile.
   Jamais une rangée compressée. Pas de défilement automatique : sur une
   liste qui se lit d'un coup d'œil, un carrousel infini coûte en
   performance et en accessibilité sans rien apporter. */
.bandeau-clients__logos {
  --logo-hauteur:     34px;   /* étalon : hauteur d'un logotype horizontal */
  --logo-largeur-max: 170px;  /* plafond pour les marques très étirées */

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.25rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
@media (min-width: 600px) {
  .bandeau-clients__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .bandeau-clients__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.bandeau-clients__case {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  /* La case devient une unité de mesure : une marque affichée en toutes
     lettres a besoin de connaître la largeur dont elle dispose pour choisir
     son corps, et cette largeur change à chaque palier de la grille. */
  container-type: inline-size;
}

/* La hauteur vient de l'étalon corrigé du facteur optique de la marque
   (--k, posé par le générateur d'après _build/accueil.py). Le plafond de
   largeur reprend la main sur les logotypes très étirés : le navigateur
   réduit alors la hauteur en conservant les proportions. */
.bandeau-clients__logos img {
  height: calc(var(--logo-hauteur) * var(--k, 1));
  width: auto;
  max-width: min(var(--logo-largeur-max), 100%);
  object-fit: contain;
  filter: grayscale(65%);
  opacity: .78;
  transition: opacity .18s ease, filter .18s ease;
}
.bandeau-clients__logos img:hover,
.bandeau-clients__logos img:focus-visible {
  filter: grayscale(0);
  opacity: 1;
}

/* Marque sans fichier de logo. Elle occupe une case ordinaire de la grille,
   et son corps se déduit de trois bornes posées par le générateur :
     --cible   hauteur de capitale égale à l'étalon des logotypes, lue dans
               le fichier de police et non estimée ;
     --m       largeur du nom en cadratins, mesurée glyphe par glyphe ;
     100cqw    largeur réelle de la case au palier courant.
   Le corps retenu est le plus petit des trois. C'est la même loi que pour
   un logotype très étiré, dont le plafond de largeur reprend la main sur la
   hauteur : un nom court monte à la hauteur d'un logo, un nom long s'arrête
   à la largeur d'un logo. Aucune valeur n'est posée à la main, la règle vaut
   pour un nom de trois lettres comme pour un nom de trente.
   Le repos reprend l'opacité des logos, pour que rien ne distingue une case
   en toutes lettres d'une case en logo, et le survol la lève de la même
   manière. Le texte n'a pas de couleur à retrouver, c'est donc le contraste
   qui joue le rôle que la couleur joue pour un logo. */
.bandeau-clients__nom {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: min(var(--cible),
                 calc(var(--logo-largeur-max) / var(--m)),
                 calc(96cqw / var(--m)));
  line-height: 1;
  letter-spacing: calc(var(--ls) * 1em);
  /* L'interlettrage ajoute un blanc après la dernière lettre : sans cette
     reprise, le nom serait décalé vers la gauche dans sa case. */
  margin-right: calc(var(--ls) * -1em);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .78;
  transition: opacity .18s ease;
}
.bandeau-clients__nom:hover { opacity: 1; }

/* Mention de fin. Elle occupe une case comme les marques, à la suite de la
   dernière, mais garde sa casse et son corps de texte courant : c'est une
   phrase, pas un nom de client. Sur deux colonnes elle prend la rangée
   entière et se retrouve donc sous la grille, centrée, là où une case
   isolée dans la colonne de gauche serait bancale. */
.bandeau-clients__suite {
  font-size: .95rem;
  opacity: .65;
  text-align: center;
}
@media (max-width: 599px) {
  .bandeau-clients__suite { grid-column: 1 / -1; }
}

/* --- Grille de services sur l'accueil --- */

.portfolio-grid--nu {
  max-width: none;
  padding: 0;
}
.portfolio-item__baseline {
  display: block;
  margin-top: -.25rem;
  font-size: .95rem;
  opacity: .7;
}

/* --- Méthode en trois étapes --- */

.etapes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}
@media (min-width: 768px) {
  .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3vw; }
}
.etape { position: relative; padding-top: 1.5rem; border-top: 1px solid var(--black); }
.etape__numero {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--font-heading);
  font-size: 2rem;
  line-height: 1;
}
.etape__titre { margin: 0 0 .75rem; font-size: 1.4rem; line-height: 1.2; }
.etape p { margin: 0; }

/* --- À propos condensé --- */

.apropos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 768px) {
  .apropos { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 4vw; }
}
.apropos--sans-portrait { display: block; }
.apropos__texte p { max-width: 68ch; font-size: 1.15rem; line-height: 1.55; }
.apropos__portrait img { width: 100%; height: auto; }

/* --- Témoignages --- */

.temoignages {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .temoignages { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 3vw; }
}
.temoignage { margin: 0; padding-top: 1.5rem; border-top: 1px solid var(--black); }
.temoignage blockquote { margin: 0 0 1rem; }
.temoignage blockquote p { margin: 0; font-size: 1.15rem; line-height: 1.5; }
.temoignage figcaption { font-weight: 700; }
.temoignage figcaption span { display: block; font-weight: 400; opacity: .7; }

/* --- Bande d'appel à l'action --- */

.bande-cta {
  background: var(--black);
  color: var(--white);
  text-align: center;
}
.bande-cta__texte {
  max-width: 60ch;
  margin: 0 auto 2rem;
  font-size: 1.15rem;
  line-height: 1.55;
}
.bande-cta__direct { margin-top: 1.5rem; font-size: .95rem; opacity: .75; }
.bande-cta--service { margin-top: 0; }

.bloc-cta { margin: 1.5rem 0 0; }
.bande-cta__direct a { text-decoration: underline; text-underline-offset: 3px; }

.bloc-production {
  background: var(--dark-accent);
  color: var(--white);
}
.bloc-production__inner { max-width: 60ch; }
.bloc-production__surtitre {
  margin: 0 0 .75rem;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .6;
}
.bloc-production .titre-section { margin-bottom: 1.5rem; color: var(--white); }
.bloc-production__texte { font-size: 1.15rem; line-height: 1.55; }
.bloc-production a { color: inherit; }
.bloc-production .lien-fleche { font-size: 1.1rem; }

.site-footer__prod { font-size: .95rem; }

.button--clair {
  background: var(--white);
  color: var(--black);
}
.button--clair:hover { background: var(--accent); opacity: 1; }

/* --- Texte éditorial des pages service --- */

.contenu-mesure {
  max-width: 70ch;
  margin: 0 auto;
}

/* Les questions gardent la police de la marque, à une taille lisible :
   un H2 pleine échelle écraserait un texte de 400 mots. */
.texte-service h2 {
  margin: 2.5rem 0 1rem;
  font-size: min(calc((var(--h3-scale) - 1) * var(--fs-vw) + 1rem),
                 calc((var(--h3-scale) - 1) * .012 * var(--max-page-width) + 1rem));
  line-height: calc(var(--heading-line-height) * (1 + (1 - var(--h3-scale)) / 25));
  text-wrap: balance;
}
.texte-service h2:first-child { margin-top: 0; }

/* Ce texte est de la prose rédigée ici, pas un bloc repris de l'éditeur
   Squarespace : les retours à la ligne du code source ne doivent pas
   apparaître à l'écran. */
.texte-service :is(p, h2, h3, li) { white-space: normal; }

.texte-service p { margin: 1rem 0; font-size: 1.05rem; line-height: 1.6; }

/* ---------- 20. Visionneuse HD ------------------------------------------
   Deuxième niveau de qualité : la page ne sert que des vignettes, et la
   grande image n'est demandée qu'au clic. Rien ici ne se télécharge au
   chargement de la page. */

/* La gouttière de barre de défilement est réservée en permanence : sans
   cela, bloquer le défilement à l'ouverture ferait sauter toute la page de
   quelques pixels vers la droite. Vaut aussi pour le lecteur vidéo. */
html { scrollbar-gutter: stable; }

/* Bouton d'agrandissement. Il sert deux contextes : une vignette de
   carrousel et l'image de tête d'une page service. Sa mise en forme est
   commune, seul le calage change. */
.zoom {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.zoom img { display: block; }
.zoom:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }

.reel__item .zoom { height: 100%; }

/* Dans la grille fluide, l'image est en position absolue dans sa zone : le
   bouton doit la recouvrir exactement, sans peser sur la mise en page. */
.fill-image .zoom { position: absolute; inset: 0; }
.fill-image .zoom:focus-visible { outline-offset: -3px; }

.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 48px);
  background: rgba(12, 12, 12, .96);
  opacity: 0;
  transition: opacity .22s ease;
}
.visionneuse[data-ouvert='true'] { opacity: 1; }

.visionneuse__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

.visionneuse__image {
  display: block;
  max-width: 100%;
  /* La légende et les commandes vivent dans la même colonne : on laisse la
     place, sinon l'image déborde sous le bas de la fenêtre. */
  max-height: calc(100vh - clamp(24px, 6vw, 96px) - 4.5rem);
  object-fit: contain;
  background: #1a1a1a;
}

/* Tant que le fichier HD n'est pas arrivé, la vignette déjà en cache sert
   d'aperçu : le visiteur voit son image tout de suite, en moins fin. */
.visionneuse__image[data-etat='chargement'] { filter: blur(6px); }

.visionneuse__legende {
  max-width: 70ch;
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: .92rem;
  text-align: center;
}
.visionneuse__compteur {
  color: rgba(255, 255, 255, .5);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

.visionneuse__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease;
}
.visionneuse__btn:hover:not([disabled]) { background: rgba(255, 255, 255, .22); }
.visionneuse__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.visionneuse__btn[disabled] { opacity: .25; cursor: default; }
.visionneuse__btn--fermer { top: 16px; right: 16px; font-size: 1.75rem; }
.visionneuse__btn--prec { left: 16px; top: 50%; transform: translateY(-50%); }
.visionneuse__btn--suiv { right: 16px; top: 50%; transform: translateY(-50%); }

@media (max-width: 640px) {
  .visionneuse__btn--prec { left: 8px; }
  .visionneuse__btn--suiv { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .visionneuse { transition: none; }
  .visionneuse__image[data-etat='chargement'] { filter: none; }
}

/* ---------- 21. Page à propos -------------------------------------------
   Cette page est une fiche d'information, pas une page de vente : ses
   intertitres servent à retrouver une donnée, pas à interpeller. Ils
   quittent donc la police des titres, les capitales et le gras. */

.page-about .rich-text h3 {
  margin: 2.25rem 0 .6rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: var(--body-line-height);
  text-transform: none;
  letter-spacing: .01em;
}
.page-about .rich-text h1 {
  font-size: min(calc((var(--h3-scale) - 1) * var(--fs-vw) + 1rem),
                 calc((var(--h3-scale) - 1) * .012 * var(--max-page-width) + 1rem));
  margin-bottom: 1.5rem;
}
.page-about .rich-text ul { margin: .5rem 0 0; }
.page-about .rich-text li { margin: .15rem 0; }