/* ==========================================================================
   Clarisse Lemaître — thème one-page
   ========================================================================== */

/* --- Polices locales (source fiable, en complément de theme.json) --- */
@font-face {
  font-family: "Abel";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/abel-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Abril Fatface";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/abril-fatface-latin-400.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: "Abril Fatface";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/abril-fatface-latinext-400.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;
}

:root {
  --c-noir: #210505;
  /* Mêmes composantes que --c-noir, en canaux séparés : indispensable pour
     construire des rgba() à opacité variable (le dégradé de l'en-tête). */
  --c-noir-rvb: 33, 5, 5;
  --c-noir-carte: #1a0404;
  /* Ombre portée sous l'en-tête déployé (l'état réduit garde son arête nue).
     Teintée à --c-noir et non en noir pur : l'ombre prolonge alors la couleur
     de l'en-tête au lieu d'ajouter une teinte étrangère, et là où elle tombe
     sur le fond de page (même couleur) elle est tout simplement invisible —
     elle ne se lit que sur ce qui est plus clair, c'est-à-dire les éclairs et
     les images. C'est ce qui la rend discrète.
     Portée courte (~16px) pour la même raison : plus longue, elle se lisait
     comme une deuxième bande sous la barre plutôt que comme un relief.
     L'écart négatif resserre la tache sur la largeur pour qu'elle ne déborde
     pas sur les côtés. */
  --ombre-header: 0 6px 12px -2px rgba(var(--c-noir-rvb), 0.7);
  --c-vert: #00ff1a;
  --c-rouge: #f41b3f;
  --c-blanc: #ffffff;
  --c-creme: #f3eedc;
  /* Hauteur de l'en-tête déployé : sert à la réserve de place dans le flux
     (voir header.wp-block-template-part), au décalage du calque d'éclairs, au
     positionnement du panneau de navigation mobile et au scroll-padding des
     ancres. Redéfinie dans la requête média mobile.
     C'est une valeur EXACTE : elle réserve la place de l'en-tête, un écart se
     verrait en blanc sous l'en-tête ou en recouvrement du hero. La hauteur
     suit le logo, seul élément qui varie : `clamp(150px, 9rem + 6vw, 210px)`
     de large pour un rapport hauteur/largeur de 0,5 → 64,2px de garnitures
     (2 × 0,85rem de padding + le badge « réalisatrice ») + la moitié de ce
     clamp. Remesuré après le passage de 1,25rem à 0,85rem de padding :
     159,7px à 783px de large, 169,2px à partir de 1200px. */
  --header-h: clamp(139px, 64.2px + 4.5rem + 3vw, 169px);
  --footer-h: 180px;
}

/* Les sauts d'ancre natifs (URL #contact, bouton retour) doivent s'arrêter
   sous l'en-tête fixe ; le défilement animé, lui, lit header.offsetHeight. */
html {
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

/* --- Bascule de langue : on masque la langue inactive --- */
.t-fr,
.t-en {
  display: inline;
}
html[data-lang="fr"] .t-en,
html[data-lang="en"] .t-fr {
  display: none !important;
}
/* Variantes bloc (paragraphes/titres entiers marqués t-fr / t-en) */
p.t-fr,
p.t-en,
h1.t-fr,
h1.t-en,
h2.t-fr,
h2.t-en,
h3.t-fr,
h3.t-en,
.t-fr.wp-block-group,
.t-en.wp-block-group {
  display: block;
}
html[data-lang="fr"] p.t-en,
html[data-lang="en"] p.t-fr,
html[data-lang="fr"] .t-en.wp-block-group,
html[data-lang="en"] .t-fr.wp-block-group {
  display: none !important;
}

/* --- Base --- */
body {
  background-color: var(--c-noir);
  color: var(--c-blanc);
  /* clip (et non hidden) : empêche le débordement horizontal sans créer de
     conteneur de défilement — hidden ferait de body un conteneur défilant et
     l'en-tête fixe s'y rattacherait au lieu de rester calé sur la fenêtre. */
  overflow-x: clip;
}

/* Marges latérales sur écran d'ordinateur (≥ 783px).

   DEUX réglages agissent ici, et il faut les distinguer : sur une largeur donnée,
   c'est toujours le PLUS CONTRAIGNANT des deux qui détermine la marge visible.

   1. La gouttière (`--wp--style--root--padding-left/right`). Twenty Twenty-Five
      la fixe à `--wp--preset--spacing--50`, soit 1.5rem = 24px, quelle que soit
      la largeur. Or les cadres verts décoratifs sont dessinés en `inset: -35px` :
      ils débordent de 35px autour de leur média. Avec 24px de gouttière ils
      sortaient du viewport et se faisaient rogner par le `overflow-x: clip`
      ci-dessus — le cadre de la vidéo perdait son bord droit, celui de la photo
      son bord gauche, et le titre du hero collait au bord. Son plancher est
      donc à 72px : les 35px de débordement, plus de quoi respirer. C'est elle
      qui commande
      en dessous de ~1440px de large, et elle est exprimée en `vw` pour que la
      marge garde la MÊME proportion d'un écran à l'autre : 12,5% de la largeur.
      Sans ça, un écran de 1280px (MacBook Pro 13" Rétina, résolution par
      défaut) tombait à 100px de marge quand un 1440px en avait 180 — le même
      design paraissait collé aux bords sur le petit écran. Avec 12,5vw, le
      1280px obtient 160px et l'ensemble se réduit d'un bloc au lieu de
      s'étaler. Plafond 11,25rem = 180px : au-delà de 1440px c'est de toute
      façon la largeur de contenu (point 2) qui prend la main.

   2. La largeur de contenu (`--wp--style--global--content-size`), plafonnée à
      1180px par theme.json. Au-delà de ~1440px c'est elle qui commande : le
      contenu est centré et les marges sont ce qui reste. Sur un MacBook 13"
      (viewport 1440px en plein écran), 1180px de contenu ne laissait que 130px
      de marge — trop peu pour ce design très graphique. On descend à 1080px,
      ce qui porte la marge à 180px sur cette machine.

   Bornées à 783px pour ne pas toucher au mobile, où les cadres passent déjà à
   `inset: -10px` et où les 24px d'origine suffisent.

   ATTENTION : contrairement au réglage précédent, la largeur de contenu agit à
   TOUTES les largeurs ≥ 783px, y compris au-delà de 1600px. Le site est donc
   volontairement un peu plus étroit partout sur ordinateur. */
@media (min-width: 783px) {
  body {
    --wp--style--root--padding-right: clamp(4.5rem, 12.5vw, 11.25rem);
    --wp--style--root--padding-left: clamp(4.5rem, 12.5vw, 11.25rem);
    --wp--style--global--content-size: 1080px;
    --wp--style--global--wide-size: 1200px;
  }
}

/* Twenty Twenty-Five applique son contour de focus sur :focus et non sur
   :focus-visible (`:where(.wp-site-blocks *:focus)` dans son style.css) : un
   simple clic souris laissait donc un rectangle autour du lien ou du bouton.
   On ne le retire que dans ce cas — la navigation au clavier le conserve. */
.wp-site-blocks :focus:not(:focus-visible) {
  outline: none;
}

/* Le padding de section est ce qui crée l'espace AU-DESSUS d'un titre : les
   titres de section ont un margin-top à 0, l'air qu'on voit au-dessus d'eux
   vient d'ici (et du padding bas de la section précédente). Resserré d'environ
   un quart : 72px au lieu de 96px sur un écran de 1281px. */
.clarisse-section {
  position: relative;
  z-index: 1;
  padding-block: clamp(2.25rem, 1.5rem + 3.75vw, 5.25rem);
}

/* Textures « éclairs » décoratives */
.eclair {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}
.eclair--rouge {
  background: no-repeat center/contain url("../svg/eclair-rouge.svg");
}
.eclair--vert {
  background: no-repeat center/contain url("../svg/eclair-vert.svg");
}

/* ==========================================================================
   En-tête
   ========================================================================== */
/* WordPress enveloppe le template-part dans un <header class="wp-block-template-part">.
   L'en-tête est en position FIXE (et non sticky) : ce wrapper lui sert de
   réserve de place dans le flux, à hauteur constante.

   Pourquoi pas sticky : un en-tête sticky reste dans le flux, donc sa hauteur
   compte dans la mise en page. En se réduisant au défilement il perdait ~91px,
   tout le contenu situé en dessous remontait d'autant, et l'ancrage de
   défilement de Chrome (scroll anchoring) compensait en retirant ces 91px à la
   position de défilement — qui repassait alors sous le seuil de bascule, d'où
   un aller-retour permanent entre en-tête déployé et réduit (mesuré : 41
   bascules en 3 s, position oscillant entre y=13 et y=55).
   En fixe, l'en-tête est hors flux : sa hauteur ne change plus rien à la mise
   en page, le défilement ne bouge plus, la bascule est stable. Le JS ajoute en
   plus une hystérésis (voir initHeaderShrink dans main.js). */
header.wp-block-template-part {
  display: block;
  height: var(--header-h);
}

.clarisse-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 0.85rem clamp(1.25rem, 4vw, 4rem);
  /* En-tête déployé : ni fond ni ombre ici, tout est dans
     .clarisse-header__fond. */
  transition: padding 0.25s ease;
}
/* En-tête réduit : fond plein et arête nue, le calque de fond est masqué —
   donc pas d'ombre non plus. Déployé, l'en-tête flotte au-dessus du haut de
   page et l'ombre le décolle de la page ; réduit, il couvre déjà le contenu
   qui défile dessous, et l'arête franche suffit à le poser.
   Même couleur que le calque (--c-noir) : la bascule n'ajoute ou n'enlève que
   l'ombre, jamais la teinte de la barre.

   Menu mobile ouvert : même traitement, et pour une raison de plus — le
   panneau de navigation plein écran est en --c-noir plein (voir la partie
   Responsive), une ombre au-dessus y dessinerait une bande en travers de
   l'écran. */
.clarisse-header.is-scrolled,
.clarisse-header.is-open {
  background: var(--c-noir);
}
.clarisse-header.is-scrolled .clarisse-header__fond,
.clarisse-header.is-open .clarisse-header__fond {
  display: none;
}
.clarisse-header.is-scrolled {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* --- Fond de l'en-tête : aplat opaque + ombre portée --------------------
   Un aplat à la couleur du fond de page (--c-noir) qui couvre exactement la
   hauteur de l'en-tête, et une ombre portée en dessous. C'est l'ombre, et non
   plus un fondu, qui traite la base de l'en-tête : la barre garde une arête
   nette et se détache du contenu par l'ombre qu'elle projette dessus.
   Couleur du fond de page et non un noir pur : en haut de page l'en-tête est
   alors invisible là où le hero est uni (il ne se lit que quand un éclair le
   traverse), et une fois réduit il masque le contenu sans dessiner une barre
   noire étrangère à la palette.

   z-index négatif obligatoire : le logo et la navigation ne sont pas
   positionnés, ils sont donc peints AVANT tout enfant positionné ; à z-index 0
   le fond leur passerait devant. */
.clarisse-header__fond {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Pile la hauteur de l'en-tête : l'ombre doit partir de son arête. Le fond
     débordait de 1,5rem du temps du fondu, pour s'éteindre dans le vide. */
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
.clarisse-header__fond > span {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--c-noir);
  box-shadow: var(--ombre-header);
}

/* Desktop : en-tête déployé (haut de page, pas encore défilé) entièrement
   transparent — ni aplat ni ombre, le logo et le menu flottent directement
   sur le hero. Le fond plein n'arrive qu'à la réduction (.is-scrolled), en
   fondu. Le calque reste en mobile, où l'en-tête ne change pas de taille.
   Fondu limité au desktop : en mobile, le calque disparaît d'un coup
   (display), un fond qui s'installerait en 0,25 s laisserait la barre
   transparente le temps de la transition. */
@media (min-width: 783px) {
  .clarisse-header__fond {
    display: none;
  }
  .clarisse-header {
    transition: padding 0.25s ease, background-color 0.25s ease;
  }
}

.clarisse-logo {
  line-height: 0.9;
  text-decoration: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.clarisse-logo__svg {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(150px, 9rem + 6vw, 210px);
  height: auto;
  transition: width 0.25s ease;
}
.is-scrolled .clarisse-logo__svg {
  width: clamp(110px, 6rem + 4vw, 150px);
}
/* En-tête réduit : le badge « Réalisatrice » se replie, mais le conteneur reste
   en place (sans opacity:0) car c'est lui qui positionne l'éclair rouge, qui
   doit rester visible au défilement — en plus petit (voir --eclair-scroll). */
.clarisse-header.is-scrolled .logo-role-wrap {
  max-height: 0;
  margin-top: 0;
}
.clarisse-header.is-scrolled .logo-role {
  opacity: 0;
  /* visibility (et pas seulement opacity) : le badge débordant du conteneur
     replié resterait sinon cliquable/survolable sous l'en-tête. */
  visibility: hidden;
}
.clarisse-logo .logo-role-wrap {
  position: relative;
  display: inline-block;
  overflow: visible;
  max-height: 3rem;
  margin-top: 0.5rem;
  transition: max-height 0.25s ease, margin-top 0.25s ease;
}
.clarisse-logo .logo-role {
  position: relative;
  z-index: 2;
  /* Grille plutôt qu'inline-block : les deux langues sont superposées dans
     la même cellule (voir ci-dessous), le badge prend donc toujours la
     largeur du texte le plus long. */
  display: inline-grid;
  justify-items: center;
  padding: 0.3rem 1.3rem;
  border: 2px solid var(--c-rouge);
  font-family: "Abel", sans-serif;
  letter-spacing: 0.25em;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--c-blanc);
  transition: opacity 0.25s ease, visibility 0.25s;
}
/* Largeur du badge indépendante de la langue.
   Sans ça : en en-tête réduit, le logo ne fait plus que 150px alors que le
   badge en fait 185 en français et 143 en anglais. Bien qu'invisible (il est
   replié en opacity/max-height), le badge continue de compter dans la largeur
   du bloc logo — c'est donc lui qui la fixe, et elle change avec la langue.
   Le logo étant centré, il se décalait d'environ 18px à chaque bascule FR/EN.
   On superpose les deux libellés dans une même cellule de grille et on masque
   l'inactif par visibility (qui conserve la place) au lieu du display:none
   global (qui la supprimerait et ramènerait le problème). */
.clarisse-logo .logo-role > .t-fr,
.clarisse-logo .logo-role > .t-en {
  grid-area: 1 / 1;
}
html[data-lang="fr"] .clarisse-logo .logo-role > .t-en,
html[data-lang="en"] .clarisse-logo .logo-role > .t-fr {
  display: block !important;
  visibility: hidden;
}
.logo-role__eclair {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: clamp(12rem, 8rem + 8vw, 20rem);
  width: auto;
  pointer-events: none;
  transition: transform 0.25s ease;
}
/* En-tête réduit : l'éclair reste, à l'échelle de la réduction du bloc logo.
   Le bloc logo passe d'environ 142px de haut (logo + badge « Réalisatrice »)
   à 75px (logo seul) — à peu près la moitié, d'où le scale(0.5). Vérifié aux
   deux bornes du clamp de largeur du logo : le rapport reste entre 0.49 et 0.53.
   Le conteneur du badge étant replié à 0, le centre de l'éclair remonte contre
   le bas du logo (il était 22px plus bas, au centre du badge) : les +10px le
   remettent au même endroit à l'échelle réduite, sinon la pointe rentre sous
   le logo au lieu d'en dépasser. Les pourcentages de translate se résolvent
   sur la taille NON réduite de l'image, la valeur est donc lisible telle
   quelle : la scale, appliquée ensuite, ne joue que sur l'image. */
.clarisse-header.is-scrolled .logo-role__eclair {
  transform: translate(-50%, calc(-50%)) scale(0.5);
}

/* Bouton burger : masqué au-dessus de 782px, la navigation est alors en clair. */
.clarisse-burger {
  display: none;
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: var(--c-blanc);
  cursor: pointer;
}
.clarisse-burger__bars,
.clarisse-burger__bars::before,
.clarisse-burger__bars::after {
  position: absolute;
  left: 50%;
  width: 26px;
  height: 2px;
  margin-left: -13px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.clarisse-burger__bars {
  top: 50%;
  margin-top: -1px;
}
.clarisse-burger__bars::before,
.clarisse-burger__bars::after {
  content: "";
  margin-left: 0;
  left: 0;
}
.clarisse-burger__bars::before {
  top: -8px;
}
.clarisse-burger__bars::after {
  top: 8px;
}
/* État ouvert : les trois barres deviennent une croix. */
.clarisse-header.is-open .clarisse-burger__bars {
  background: transparent;
}
.clarisse-header.is-open .clarisse-burger__bars::before {
  transform: translateY(8px) rotate(45deg);
}
.clarisse-header.is-open .clarisse-burger__bars::after {
  transform: translateY(-8px) rotate(-45deg);
}

.clarisse-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  flex-wrap: wrap;
}
.clarisse-nav a {
  position: relative;
  color: var(--c-blanc);
  text-decoration: none;
  font-size: 1.15rem;
  transition: color 0.2s;
}
.clarisse-nav a:hover {
  color: var(--c-vert);
}
/* Soulignement vert de la section courante (classe posée par initScrollSpy).
   Trait dessiné en pseudo-élément et non en text-decoration : il se déploie
   depuis la gauche quand on passe d'une section à l'autre, et son épaisseur
   ne dépend pas de la police. */
.clarisse-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.4em;
  height: 2px;
  background: var(--c-vert);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}
.clarisse-nav a.is-current::after {
  transform: scaleX(1);
}
/* Desktop : au survol, le lien reste blanc et c'est le soulignement de la
   section courante qui se déplace sur lui (il quitte le lien courant le temps
   du survol, pour qu'il n'y ait jamais qu'un seul trait). */
@media (min-width: 783px) and (hover: hover) {
  .clarisse-nav a:hover {
    color: var(--c-blanc);
  }
  .clarisse-nav a:hover::after {
    transform: scaleX(1);
  }
  .clarisse-nav:has(a:hover) a.is-current:not(:hover)::after {
    transform: scaleX(0);
  }
}

.clarisse-lang {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  font-size: 1.1rem;
}
.clarisse-lang button {
  background: none;
  border: none;
  color: var(--c-blanc);
  cursor: pointer;
  font: inherit;
  padding: 0.15rem 0.35rem;
  opacity: 0.6;
  transition: opacity 0.2s, color 0.2s;
}
.clarisse-lang button[aria-pressed="true"] {
  opacity: 1;
  color: var(--c-vert);
}
.clarisse-lang .sep {
  opacity: 0.5;
}

/* ==========================================================================
   Titres de section
   ========================================================================== */
/* Taille fluide calée sur la COLONNE de contenu, pas sur le viewport : les
   marges valant 12,5% de chaque côté (voir « Marges latérales » plus haut), la
   colonne fait 0,75 × la largeur d'écran jusqu'à 1440px, où elle plafonne à
   1080px. Les titres suivent la même courbe et plafonnent au même endroit —
   sinon ils atteignaient leur taille maxi dès ~1200px et paraissaient énormes
   dans la colonne rétrécie d'un écran 1280px (72px de titre pour 960px de
   contenu).

   Le plafond reste à 4,5rem (72px) mais n'est atteint qu'à ~1880px, au lieu de
   ~1200px auparavant : tout écran large (1900px, 1920px…) retrouve exactement
   ses 72px d'origine, et c'est en dessous que la taille redescend. Plancher laissé à 2,5rem pour
   ne rien changer en mobile. */
.clarisse-titre-section {
  font-family: "Abril Fatface", serif;
  font-size: clamp(2.5rem, 0.5rem + 3.4vw, 4.5rem);
  color: var(--c-blanc);
  margin: 0 0 clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
}
/* Espace supplémentaire sous les titres de section, desktop uniquement
   (au-delà du point de rupture mobile 782px, laissé inchangé). */
@media (min-width: 783px) {
  .clarisse-titre-section {
    margin-bottom: clamp(4rem, 2.25rem + 3.4vw, 6.5rem);
  }
  /* « Mes réalisations » et « Mes collaborations » demandent plus d'air que
     les autres titres de section : ce qui les suit n'est pas un paragraphe
     mais une grille de cartes dont le premier visuel porte un cadre vert
     pivoté qui remonte vers le titre. À espacement égal, il paraissait donc
     plus serré qu'ailleurs. Sélecteur en (0,2,0) pour passer devant la règle
     générique ci-dessus sans dépendre de l'ordre des déclarations. */
  .clarisse-realisations > .clarisse-titre-section,
  .clarisse-collaborations > .clarisse-titre-section {
    margin-bottom: clamp(6rem, 3.5rem + 5vw, 9rem);
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.clarisse-hero {
  padding-top: clamp(2rem, 5vw, 4rem);
}
/* ATTENTION : le h1 porte la classe `has-x-large-font-size`, et WordPress
   déclare ce préréglage en `!important`. C'est donc `x-large` dans theme.json
   qui fixe RÉELLEMENT la taille, pas la ligne ci-dessous — les deux sont
   gardées identiques pour que le titre ne saute pas si la classe disparaît du
   bloc un jour. Toute modification se fait AUX DEUX ENDROITS.
   Plafond porté de 4rem (64px) à 5rem (80px), atteint vers 1870px : le titre
   de page passait DERRIÈRE les titres de section (64px contre 72px) sur grand
   écran, ce qui n'a pas de sens. Il repasse un cran au-dessus d'eux, et reste
   plus petit qu'avant sur les écrans étroits, ce qui était le but initial. */
.clarisse-hero h1 {
  font-family: "Abril Fatface", serif;
  font-size: clamp(2.5rem, 1rem + 3.43vw, 5rem);
  margin: 0 0 2rem;
}
.clarisse-hero .hero-bienvenue {
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
}
.clarisse-hero .wp-block-column {
  padding-block: 0.5rem;
}
/* Bloc bio « C'est à 4 ans » : respiration façon journal papier */
.clarisse-hero .hero-bio {
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
.clarisse-hero .hero-bio p strong {
  font-size: 1.2em;
  font-weight: 700;
}
.hero-cta-link {
  color: var(--c-vert);
}
.hero-cta-link:hover {
  color: var(--c-rouge);
}

/* --- Bloc « Actu » (sous la bio du hero) ---
   Un encart court que la cliente met à jour au fil des projections. Il doit se
   lire comme un aparté, pas comme une section : d'où un filet vert à gauche
   (2px, la même épaisseur que les cadres — voir --frame-bw) plutôt qu'un cadre
   complet, qui aurait fait un deuxième « bloc encadré » à deux doigts du
   portrait et de la vidéo, déjà cadrés.

   La réserve à droite (padding-inline-end) est là POUR l'éclair : il est posé
   en ::after absolu, donc hors flux, et sans elle le texte passerait dessous.
   Les deux valeurs se suivent — largeur de l'éclair + une gouttière. */
.clarisse-hero .hero-actu {
  --actu-eclair-w: clamp(32px, 3.2vw, 48px);
  position: relative;
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  padding-inline-start: clamp(0.9rem, 2vw, 1.4rem);
  padding-inline-end: calc(var(--actu-eclair-w) + clamp(0.75rem, 2vw, 1.5rem));
  border-inline-start: var(--frame-bw, 2px) solid var(--c-vert);
}
/* Le titre le plus petit du site : 1,3rem, là où le sous-titre de « Me
   connaître » est à 1,6rem et les titres de section montent à 4,5rem. Il reste
   en Abril Fatface (c'est un titre), et prend le vert plutôt que le blanc —
   à cette taille, du blanc en Abril passerait pour du texte courant en gras. */
.clarisse-hero .hero-actu__titre {
  font-family: "Abril Fatface", serif;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-vert);
  margin: 0 0 0.5rem;
}
.clarisse-hero .hero-actu p {
  margin: 0;
  font-size: 0.95em;
}
/* L'éclair de la maquette, centré sur la hauteur du bloc. Le rapport est celui
   du SVG (136x277) : on ne fixe que la largeur, la hauteur suit — un éclair
   étiré se verrait tout de suite, ses diagonales n'étant pas à 45°. */
.clarisse-hero .hero-actu::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(6deg);
  width: var(--actu-eclair-w);
  aspect-ratio: 136 / 277;
  background: no-repeat center / contain url("../svg/eclair-actu.svg");
  opacity: 0.9;
  pointer-events: none;
}

/* ==========================================================================
   Cadre vert (vidéos & images)
   ========================================================================== */
.frame-vert {
  position: relative;
}
/* Débordement du cadre autour de son média, réglable par section sans
   réécrire la règle : une section pose --frame-x / --frame-y sur un ancêtre
   (voir « Mes collaborations »), les autres gardent les 35px d'origine.

   --frame-rot incline le cadre. C'est un nombre SANS UNITÉ, multiplié ici par
   --frame-rot-unit : la valeur peut donc venir d'un attribut style calculé en
   PHP (réalisations, un angle par film) comme d'une simple règle CSS (hero,
   angle fixe), et il suffit de changer l'unité pour atténuer ou couper la
   rotation à un point de rupture donné. Par défaut 0 : pas de rotation.

   --frame-bw : 2px, comme dans la maquette (mesuré sur Desktop.png, où les
   traits font 2px de large sur trois hauteurs différentes). Ce n'est pas qu'une
   question de fidélité, c'est aussi ce qui rend les cadres PIVOTÉS propres :
   un trait droit tombe pile sur la grille de pixels (255/255 de vert pur,
   écart-type nul), tandis qu'incliné il partage son encre entre deux pixels,
   dans une proportion qui change à chaque rangée. À 1px, il ne reste alors
   aucun pixel plein et la ligne paraît délavée et frémissante — c'est ce qu'on
   prend pour de l'aliasing. À 2px, il reste toujours un pixel plein au cœur du
   trait : le pic remonte de 199 à 254/255 et l'écart-type tombe de 35,9 à 12,8.

   Deux fausses pistes, écartées à la mesure : 1,5px ne change rien (le
   navigateur le ramène à 1px) et 2,5px donne des chiffres identiques à 2px.
   Une bordure translucide affine bien le trait incliné, mais le vert vire au
   kaki (101,150,39) partout où le cadre croise un éclair rouge. */
.frame-vert::before,
.film-visuel::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--frame-y, 35px)) calc(-1 * var(--frame-x, 35px));
  border: var(--frame-bw, 2px) solid var(--c-vert);
  transform: rotate(calc(var(--frame-rot, 0) * var(--frame-rot-unit, 1deg)));
  z-index: 0;
  pointer-events: none;
}

/* Vidéo du hero : angle fixe, contrairement aux réalisations où il est tiré
   par film. Le portrait juste en dessous garde son cadre droit. */
.clarisse-hero .hero-video {
  --frame-rot: -10;
}

/* ==========================================================================
   Vidéo (ratio 16/9 + bouton play)
   ========================================================================== */
.film-video,
.clarisse-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000 no-repeat center/cover;
  cursor: pointer;
}
.film-video iframe,
.clarisse-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.film-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 84px;
  height: 60px;
  border: none;
  border-radius: 14px;
  background: var(--c-rouge);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.2s, background 0.2s;
}
.film-video:hover .film-play {
  transform: scale(1.08);
  background: #ff2f50;
}
.film-play-icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}

/* ==========================================================================
   Cartes de films (réalisations & collaborations)
   ========================================================================== */
.clarisse-films {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 2rem + 4vw, 6rem);
}
/* Les largeurs de colonnes sont nommées par rôle (média / texte) et non par
   position : une section peut élargir le média une seule fois, la variante
   media-droite se contente d'inverser la paire. */
.film-card {
  display: grid;
  grid-template-columns: var(--col-media, 1fr) var(--col-texte, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.film-card.media-droite {
  grid-template-columns: var(--col-texte, 1fr) var(--col-media, 1fr);
}
.film-card.media-gauche .film-visuel {
  order: 0;
}
.film-card.media-gauche .film-texte {
  order: 1;
}
.film-card.media-droite .film-visuel {
  order: 1;
}
.film-card.media-droite .film-texte {
  order: 0;
}

.film-visuel {
  position: relative;
}
/* Les cadres pivotés des réalisations traversent leur propre carte et celles
   d'à côté. Règle générale : les traits passent toujours DERRIÈRE le contenu.
   Le cadre reste en z-index 0, la vidéo et le texte montent d'un cran. */
.film-media,
.film-texte {
  position: relative;
  z-index: 1;
}
.film-media img {
  display: block;
  width: 100%;
  height: auto;
}

.film-texte {
  padding-inline: clamp(0.5rem, 2vw, 2rem);
}
.film-titre {
  font-family: "Abel", sans-serif;
  font-weight: 700;
  /* 1,7rem fixe : dans la demi-colonne d'un écran 1280px (~430px), un titre
     long passait à trois lignes. Fluide, il retrouve 1,7rem à 1440px. */
  font-size: clamp(1.35rem, 0.6rem + 1.2vw, 1.7rem);
  color: var(--c-blanc);
  margin: 0 0 0.9rem;
}
.film-titre .film-meta {
  font-weight: 400;
  color: var(--c-blanc);
}
.film-desc {
  font-size: 1.2rem;
  line-height: 1.65;
  margin: 0;
  max-width: 34ch;
  color: var(--c-blanc);
}
.clarisse-films-empty {
  border: 1px dashed var(--c-vert);
  padding: 1.5rem;
  color: var(--c-blanc);
}
.clarisse-films-empty a {
  color: var(--c-vert);
}

/* --- Cadres pivotés : « Mes réalisations » ---
   Chaque film reçoit son angle dans son attribut style (voir
   clarisse_frame_rotation() dans inc/blocks.php) ; la rotation elle-même est
   appliquée par la règle partagée du cadre vert, plus haut.

   Le cadre reste plus serré qu'ailleurs (20px contre 35px) : tourné, il déborde
   de sa boîte droite (~65px sur les côtés à 30°). C'est ce qui le garde dans
   les marges de page — au-delà, le `overflow-x: clip` du body lui raserait un
   bord. La marge disponible au pire cas (~1220px de large) est de 73px.

   Desktop uniquement, comme les collaborations : en mobile les cartes ne
   pivotent plus et le cadre reprend le débordement commun de 10px. */
@media (min-width: 783px) {
  .clarisse-realisations .clarisse-films {
    --frame-x: 20px;
    --frame-y: 20px;
  }
}

/* --- Cadres entremêlés : « Mes collaborations » ---
   Dans la maquette, les cadres verts de deux cartes voisines se croisent au
   lieu de se suivre. Deux conditions produisent ce tressage, aucune n'est
   décorative :

   1. Horizontalement : le média occupe ~53 % de la largeur de contenu au lieu
      de 50 %. Comme une carte sur deux colle au bord opposé, les deux cadres
      (élargis de --frame-x de chaque côté) se recouvrent d'environ 11 % de la
      largeur — la bande verticale où ils se croisent.
   2. Verticalement : l'écart entre deux cartes est plus petit que le double du
      débordement du cadre. D'où le calcul du `gap` plutôt qu'une valeur en
      dur : c'est --frame-overlap, et lui seul, qui décide de la profondeur du
      croisement. Changer --frame-y garde le croisement identique.

   Le croisement ne mord jamais sur une image : le trait horizontal du cadre
   suivant passe (--frame-y − --frame-overlap) sous le média précédent, et les
   traits verticaux s'arrêtent d'autant avant le média voisin.

   Desktop uniquement : en dessous de 783px les cartes s'empilent sur une
   colonne, plus rien à entremêler (le cadre y retombe à 10px). */
@media (min-width: 783px) {
  .clarisse-collaborations .clarisse-films {
    --col-media: 1.28fr;
    --col-texte: 1fr;
    /* Le PHP pose un --frame-rot sur TOUTES les cartes, réalisations comme
       collaborations. Ici le tressage repose sur des cadres droits : on annule
       la rotation par l'unité. Passer l'unité à 1deg suffirait à faire pivoter
       les collaborations aussi, chaque film ayant déjà son angle. */
    --frame-rot-unit: 0deg;
    --frame-x: clamp(1.25rem, 3.5vw, 2.375rem);
    --frame-y: clamp(1.75rem, 4.6vw, 3.125rem);
    --frame-overlap: clamp(1rem, 2.6vw, 1.75rem);
    gap: calc(2 * var(--frame-y) - var(--frame-overlap));
  }
  /* Le cadre déborde de --frame-x vers le texte : la gouttière doit rester
     lisible une fois ce débordement retiré. */
  .clarisse-collaborations .film-card {
    column-gap: clamp(2.5rem, 6vw, 4.5rem);
  }
}

/* ==========================================================================
   À propos / Me connaître
   ========================================================================== */
/* Le cadre vert entoure ici la SECTION entière, plus la seule photo (la classe
   frame-vert est passée de l'image au <section> dans parts/about.html).

   On pourrait croire qu'il faut calculer de combien rentrer, la section allant
   d'un bord à l'autre de l'écran alors que son texte est dans une colonne de
   1080px. Il n'en est rien, et c'est le point à retenir : le pseudo-élément
   hérite du `max-width: <largeur de contenu>` que WordPress applique aux
   enfants d'un bloc `is-layout-constrained`. Sa boîte EST donc déjà la colonne
   de contenu, centrée — vérifié à 1600, 1281 et 800px de large, où un
   débordement nul fait tomber le cadre pile sur la colonne. Le débordement
   se règle donc comme partout ailleurs, en positif et vers l'extérieur.

   En hauteur, la boîte de référence est le bloc de section entier : un
   débordement nul place le trait au bord de la section, soit exactement le
   padding de section comme respiration au-dessus du titre et sous le dernier
   paragraphe.

   Seul le débordement latéral est desktop : en mobile la colonne de contenu
   occupe presque tout l'écran, le cadre y reprend le débordement commun de
   10px. */
.clarisse-about {
  --frame-y: 0px;
}
@media (min-width: 783px) {
  .clarisse-about {
    --frame-x: 35px;
  }
}

/* Section « Me connaître » : contenu texte en retrait façon journal papier */
.clarisse-about > :where(p, h3) {
  padding-inline: clamp(1.5rem, 6vw, 6rem);
}
.clarisse-about .about-sous-titre {
  font-family: "Abril Fatface", serif;
  font-size: 1.6rem;
  margin: 2rem 0 1rem;
}

/* ==========================================================================
   Carrousel générique (témoignages pour l'instant, réutilisable ailleurs :
   voir assets/js/main.js > initCarousels()).
   ========================================================================== */
.clarisse-carousel {
  position: relative;
  padding-inline: clamp(1.5rem, 5vw, 3.5rem);
}
.clarisse-carousel__track {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.clarisse-carousel__track::-webkit-scrollbar {
  display: none;
}
/* Chaque slide occupe l'essentiel de la largeur, avec un aperçu (atténué)
   de la slide suivante qui dépasse à droite — jamais de la précédente
   (scroll-snap-align:start, pas center) : le calage est net à gauche. */
.clarisse-carousel__slide {
  flex: 0 0 88%;
  scroll-snap-align: start;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
.clarisse-carousel__slide.is-active {
  opacity: 1;
}
.clarisse-carousel__arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(33, 5, 5, 0.7);
  color: var(--c-blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, opacity 0.2s, background 0.2s;
  z-index: 2;
}
.clarisse-carousel__arrow svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.clarisse-carousel__arrow:hover:not(:disabled) {
  color: var(--c-vert);
  border-color: var(--c-vert);
  background: var(--c-noir);
}
.clarisse-carousel__arrow:disabled {
  opacity: 0.25;
  cursor: default;
}
.clarisse-carousel__arrow--prev {
  left: 0;
}
.clarisse-carousel__arrow--next {
  right: 0;
}
.clarisse-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.clarisse-carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid var(--c-vert);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s;
}
.clarisse-carousel__dot.is-active {
  background: var(--c-vert);
}

/* Pagination alternative : compteur « 1 / 7 » (data-pagination="counter"). */
.clarisse-carousel__counter {
  margin-top: 1.5rem;
  text-align: center;
  font-family: "Abel", sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
}
.clarisse-carousel__counter-current {
  color: var(--c-vert);
}

/* ==========================================================================
   Témoignages
   ========================================================================== */
.clarisse-temoignage {
  max-width: 640px;
  text-align: center;
  margin: 0 auto;
}
.clarisse-temoignage .citation {
  font-size: 1.3rem;
  line-height: 1.6;
  margin: 0;
  border: 0;
  padding: 0;
}
.clarisse-temoignage .auteur {
  color: var(--c-vert);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 1rem;
}

/* ==========================================================================
   Contact
   ========================================================================== */
.clarisse-contact {
  text-align: center;
}
/* Même valeur que .clarisse-titre-section (ce h2-là n'en porte pas la classe). */
.clarisse-contact h2 {
  font-family: "Abril Fatface", serif;
  font-size: clamp(2.5rem, 0.5rem + 3.4vw, 4.5rem);
  margin: 0 0 1.5rem;
}
.clarisse-contact .contact-mail {
  margin: 0;
}
.clarisse-contact a {
  color: var(--c-blanc);
  /* Taille fluide : à 1.6rem fixe, l'adresse débordait de l'écran à 320px. */
  font-size: clamp(1.05rem, 4.5vw, 1.6rem);
  overflow-wrap: anywhere;
  text-decoration: none;
  border-bottom: 2px solid var(--c-rouge);
  padding-bottom: 0.1em;
}
.clarisse-contact a:hover {
  color: var(--c-vert);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 782px) {
  :root {
    /* En-tête compact : logo réduit + burger, nav derrière le menu burger.
       Hauteur constante au défilement (voir plus bas), donc valeur fixe :
       2 × 0,9rem de garniture + 60px de logo (120px de large, rapport 0,5)
       + 0,35rem d'écart + le badge « Réalisatrice » (~19px). Mesuré à 113,8px
       au CDP à 390px de large — arrondi au pixel supérieur. À reprendre si la
       taille du badge ou du logo change. */
    --header-h: 114px;
  }

  /* --- En-tête compact --- */
  .clarisse-header,
  .clarisse-header.is-scrolled {
    /* Hauteur constante : le panneau de navigation et le calque d'éclairs se
       calent sur --header-h, qui ne doit pas bouger au défilement. */
    padding: 0.9rem 1.25rem;
    gap: 1rem;
    flex-wrap: nowrap;
  }
  .clarisse-logo__svg,
  .is-scrolled .clarisse-logo__svg {
    width: 120px;
  }
  /* Badge « Réalisatrice » + éclair rouge conservés en mobile (demande de la
     cliente : le logo doit rester le logo complet, pas le seul lettrage).
     Les valeurs desktop sont dimensionnées pour un logo de 150 à 210px de
     large ; ici il en fait 120, tout est remis à l'échelle.
     Le letter-spacing descend à 0,18em : à 0,25em le badge devenait plus large
     que le lettrage au-dessus, et le bloc logo se calait sur lui. */
  .clarisse-logo .logo-role-wrap {
    max-height: 2.25rem;
    margin-top: 0.35rem;
  }
  .clarisse-logo .logo-role {
    padding: 0.22rem 0.7rem;
    border-width: 1px;
    letter-spacing: 0.18em;
    font-size: 0.7rem;
  }
  .logo-role__eclair {
    height: 8.5rem;
  }
  /* L'éclair descend plus bas que l'en-tête (136px de haut pour une barre de
     114px) : sans contexte d'empilement, le panneau de navigation plein écran
     — absolu, donc peint après le logo qui ne l'est pas — lui coupait la
     pointe net à l'ouverture du menu. Le logo passe devant, comme le burger
     juste à côté (même z-index), et l'éclair traverse le panneau. */
  .clarisse-logo {
    position: relative;
    z-index: 1;
  }
  /* L'en-tête mobile garde une hauteur CONSTANTE au défilement (voir le
     padding fixe plus haut) : on neutralise le repli du badge hérité du
     desktop, sinon la barre se viderait de moitié sans se réduire pour
     autant. L'éclair garde donc aussi sa taille déployée. */
  .clarisse-header.is-scrolled .logo-role-wrap {
    max-height: 2.25rem;
    margin-top: 0.35rem;
  }
  .clarisse-header.is-scrolled .logo-role {
    opacity: 1;
    visibility: visible;
  }
  .clarisse-header.is-scrolled .logo-role__eclair {
    transform: translate(-50%, -50%);
  }
  .clarisse-burger {
    display: block;
  }

  /* --- Navigation en panneau plein écran ---
     Le panneau est en position absolue (et non fixe) : l'en-tête étant en
     position fixe, il est déjà bloc conteneur pour ses descendants absolus,
     et une position fixe s'y rattacherait de toute façon. Résultat identique,
     sans dépendre d'un effet de bord. */
  .clarisse-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Le pourcentage se résout sur la hauteur réelle de l'en-tête (bloc
       conteneur), ce qui évite le liseré résiduel qu'un calcul sur la valeur
       nominale --header-h laissait en bas de l'écran. */
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - 100%);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    overflow-y: auto;
    /* Fond plein : à 0.97 le contenu de la page restait fantomatiquement
       visible derrière les liens. Pas de backdrop-filter, inutile ici. */
    background: var(--c-noir);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }
  .clarisse-header.is-open .clarisse-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .clarisse-nav a {
    font-size: 1.5rem;
    padding: 0.75rem 1rem;
  }
  /* Le lien est ici une grande zone tactile padée : on rentre le soulignement
     jusqu'au texte, sinon le trait dépasse d'un rem de chaque côté. */
  .clarisse-nav a::after {
    left: 1rem;
    right: 1rem;
    bottom: 0.4rem;
  }
  .clarisse-lang {
    margin-top: 1rem;
    font-size: 1.3rem;
  }
  .clarisse-lang button {
    min-height: 44px;
    padding: 0.5rem 0.75rem;
  }

  /* --- Cartes de films empilées ---
     `.media-droite` doit être cité : il porte sa propre grille (0,2,0) et
     l'emporterait sinon sur `.film-card` seul (0,1,0). */
  .film-card,
  .film-card.media-droite {
    grid-template-columns: 1fr;
  }
  .film-card .film-visuel,
  .film-card .film-texte {
    order: 0 !important;
  }
  /* Débordement commun réduit. Posé en variables sur body plutôt qu'en `inset`
     sur les ::before : une section qui calcule son propre débordement (voir
     .clarisse-about, dont le cadre entoure toute la section) garde ainsi la
     main, au lieu de se faire écraser par un inset en dur. */
  body {
    --frame-x: 10px;
    --frame-y: 10px;
    /* Trait affiné à la demande de la cliente. Les 2px de la règle générale
       (voir « Cadre vert ») ne se justifiaient que pour les cadres PIVOTÉS,
       délavés à 1px faute d'un seul pixel plein au cœur du trait. En mobile
       toutes les rotations sont neutralisées (--frame-rot-unit ci-dessous) :
       le trait tombe pile sur la grille de pixels, 1px y reste net. */
    --frame-bw: 1px;
  }
  /* Pas de rotation en mobile, ni pour les films ni pour le hero : la vidéo y
     occupe presque toute la largeur (342px sur 390), n'importe quel angle
     sortirait du viewport et se ferait rogner. Posé sur body : une seule ligne
     neutralise toutes les rotations, quelle que soit la section. */
  body {
    --frame-rot-unit: 0deg;
  }
  /* Cadres des vidéos collés au player (demande de la cliente) : débordement
     égal à l'épaisseur du trait, et non 0 — à 0 la bordure serait dessinée
     DANS la boîte de la vidéo, qui passe au-dessus du cadre et la masquerait.
     Posé sur l'élément lui-même pour battre les variables héritées de body ou
     d'une section (collaborations). Même traitement pour le portrait du hero
     (demande de la cliente). */
  .hero-video,
  .film-visuel,
  .clarisse-hero .wp-block-image.frame-vert {
    --frame-x: var(--frame-bw);
    --frame-y: var(--frame-bw);
  }
  .film-texte {
    padding-inline: 0;
    margin-top: 1.5rem;
  }
  /* Le méta (durée // année) passe sur sa propre ligne plutôt que de casser
     au milieu (« 1 minute 30 ↵ secondes // 2020 »). */
  .film-titre {
    font-size: 1.3rem;
  }
  .film-titre .film-meta {
    display: block;
    font-size: 0.85em;
    margin-top: 0.2rem;
  }

  /* --- Titres au format de l'écran ---
     Les titres de section restaient au plancher de leur clamp (2,5rem = 40px),
     calculé pour le desktop : sur 390px de large, « Ils me font confiance »
     tenait sur deux lignes et pesait autant que le h1 du hero. On pose une
     valeur mobile dédiée plutôt que d'abaisser le plancher du clamp, qui sert
     aussi à la plage 783-1200px réglée pour l'écran 1280px de la cliente.
     .clarisse-contact h2 est cité à part : ce h2-là ne porte pas la classe. */
  .clarisse-titre-section,
  .clarisse-contact h2 {
    font-size: 2rem;
  }

  /* --- Textes centrés en mobile (demande de la cliente) ---
     Le hero : le h1 et les deux lignes d'accueil (« Bienvenue ! », « N'hésitez
     pas… ») de la première colonne sont centrés, la bio plus bas reste au fil
     du texte.
     « Me connaître » : toute la section, titres comme paragraphes — le h2 et
     la photo l'étaient déjà, le reste suit. */
  .clarisse-hero h1,
  .clarisse-hero .wp-block-column:first-child > p {
    text-align: center;
  }
  .clarisse-about {
    text-align: center;
  }
  /* « Mes réalisations » / « Mes collaborations » centrés comme les autres
     titres de section. Le second porte .has-text-align-right (WordPress,
     0,1,0) : sélecteur en (0,2,0) pour passer devant. */
  .clarisse-realisations > .clarisse-titre-section,
  .clarisse-collaborations > .clarisse-titre-section {
    text-align: center;
  }

  /* --- Lisibilité du texte ---
     Retraits « journal papier » à plat : sans contrepartie à droite, ils ne
     font que décentrer la colonne sur un écran étroit. */
  .clarisse-about > :where(p, h3),
  .clarisse-hero .hero-bio {
    padding-inline: 0;
  }
  /* Cadre de « Me connaître » resserré sur la colonne de contenu, comme ceux
     des vidéos et du portrait (demande de la cliente) : la photo vient toucher
     le trait sur les côtés. Le texte, lui, en garderait le contact — petit
     retrait latéral pour qu'aucune ligne ne bute sur le cadre. Hauteur
     inchangée (--frame-y: 0, le padding de section sert de respiration). */
  .clarisse-about {
    --frame-x: var(--frame-bw);
  }
  .clarisse-about > :where(p, h2, h3) {
    padding-inline: 0.75rem;
  }
  /* La photo du tournage ne touche plus le trait non plus (demande de la
     cliente) : même retrait que le texte. Padding et non marge, l'image garde
     son width: 100% / height: auto et donc ses proportions. */
  .clarisse-about > .wp-block-image {
    padding-inline: 0.75rem;
  }
  /* Corps de texte harmonisé : la typo fluide de WordPress descend à ~15px
     dans les sections tandis que .film-desc restait à 19px fixe. */
  .clarisse-about p,
  .clarisse-hero .hero-bio p,
  .film-desc {
    font-size: 1.0625rem;
  }
  .film-desc {
    max-width: none;
  }
  .clarisse-about .about-sous-titre {
    font-size: 1.35rem;
  }
  /* Le retrait « journal papier » du bloc bio tombe à plat en mobile (règle
     ci-dessus) : le filet vert de l'encart Actu devient alors le seul décalage
     de la colonne, on le resserre pour ne pas décentrer le texte. */
  .clarisse-hero .hero-actu {
    padding-inline-start: 0.75rem;
  }
  .clarisse-hero .hero-actu__titre {
    font-size: 1.2rem;
  }
  .clarisse-temoignage .citation {
    font-size: 1.15rem;
  }

  /* --- Carrousel : les flèches gênent plus qu'elles n'aident au doigt,
     le scroll-snap suffit ; on garde juste les puces. --- */
  .clarisse-carousel {
    padding-inline: 0;
  }
  .clarisse-carousel__arrow {
    display: none;
  }
  /* Slide pleine largeur : les 88 % du desktop, qui laissent entrevoir la
     suivante, rognaient le témoignage courant des deux côtés sur un écran
     étroit — la cliente l'a lu comme un défaut d'alignement. Le pas du
     carrousel est mesuré entre deux slides dans initCarousels(), il suit. */
  .clarisse-carousel__slide {
    flex-basis: 100%;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clarisse-nav,
  .clarisse-nav a::after,
  .clarisse-burger__bars,
  .clarisse-burger__bars::before,
  .clarisse-burger__bars::after {
    transition: none;
  }
}

/* Accents « éclairs » en fond — cluster repris de la maquette Figma.
   Les tracés sont exportés en coordonnées de page absolues (canvas ~1281 de large) ;
   réassemblés dans un seul SVG. La couche remonte derrière le header (--header-h)
   pour coller au tout haut de la page, et descend jusqu'au bas du footer
   (--footer-h) qui a un fond transparent, laissant voir les éclairs derrière. */
.wp-site-blocks > main {
  position: relative;
}
main > .clarisse-bg-streak {
  display: block;
  position: absolute;
  /* Remonter de --header-h ne suffit PAS à coller au haut de la page : le
     repère est `main`, qui porte lui-même un `margin-block-start` de
     --wp--style--block-gap (l'écart de bloc WordPress, 1,5rem). Sans le
     déduire aussi, la couche démarrait 24px trop bas et le premier éclair,
     en haut à gauche, flottait sous le bord de l'écran au lieu d'en sortir.
     On lit la variable de WordPress plutôt que 24px en dur, pour suivre si
     l'écart de bloc du thème change un jour. */
  top: calc(-1 * var(--header-h) - var(--wp--style--block-gap, 1.5rem));
  left: 0;
  width: 100%;
  height: calc(
    100% + var(--header-h) + var(--wp--style--block-gap, 1.5rem) +
      var(--footer-h)
  );
  max-width: none;
  margin: 0;
  z-index: 0;
  opacity: 0.9;
  pointer-events: none;
  background: no-repeat top center / 100% 100% url("../svg/eclairs.svg?v=3");
}

/* Petit éclair vert d'accent près des grands titres — DÉSACTIVÉ pour le moment
   (mal placé / pas assez soigné). Pour le remettre : décommenter le bloc ci-dessous
   ainsi que la règle `display: none` dans la media query max-width: 782px.
   La classe .clarisse-titre-section reste posée dans les parts HTML.

.clarisse-titre-section {
  position: relative;
}
.clarisse-titre-section::after {
  content: "";
  position: absolute;
  right: 3%;
  top: 50%;
  transform: translateY(-50%) rotate(8deg);
  width: 40px;
  height: 132px;
  opacity: 0.9;
  background: no-repeat center / contain url("../svg/eclair-vert.svg");
  pointer-events: none;
}
*/

@media (max-width: 782px) {
  /* .clarisse-titre-section::after { display: none; } — voir bloc désactivé ci-dessus */

  /* Mobile : fond dédié exporté de Figma (« Site internet Clarisse(7).zip »,
     Mobile.png 376×14463), vectorisé en SVG — net sur Rétina et sans fond
     peint, donc on garde la couleur de fond exacte du site.
     Contrairement au desktop, PAS étiré sur toute la hauteur : le cadre
     Figma fait 14463 de haut contre ~8500 pour la page réelle, l'étirer
     écrasait les éclairs. On le pose à l'échelle 1 (largeur 100%, hauteur
     proportionnelle) depuis le haut de la page, comme dans la maquette ;
     le bas qui dépasse est rogné par la couche. */
  main > .clarisse-bg-streak {
    background-image: url("../svg/eclairs-mobile.svg?v=4");
    background-size: 100% auto;
    background-position: top center;
    opacity: 1;
  }
}