/* ==========================================================================
   Daybreak — site mobile
   Tokens et composants issus du handoff « pret pour dev » + guide de marque.
   ========================================================================== */

:root {
  /* Couleurs */
  --jaune: #FFE01A;
  --ocre: #F5B808;
  --ocre-fonce: #A87C00;
  --encre-1: #150E08;
  --encre-2: #1D140C;
  --craie: #F1F0EC;
  --craie-foncee: #E2DED4;
  --gris-1: #3A3630;
  --gris-2: #55504A;
  --gris-3: #8B867C;
  --clair-1: #C4BEB2;
  --clair-2: #A8A196;
  --clair-3: #B9B3A6;
  --clair-4: #D8D3C9;
  --panel: #F2EDE4;
  --bordure: #C9C4B8;
  --input: #201C19;

  /* Identité v2 « Lueur » : la palette bascule sur fond encre.
     --trait est le seul neutre sombre qui manquait. */
  --trait: #2E2A26;

  /* Typographies */
  --f-titre: 'Archivo', sans-serif;
  --f-accroche: 'Instrument Serif', serif;
  --f-corps: 'Instrument Sans', sans-serif;
  --f-meta: 'DM Mono', monospace;

  /* Largeur de la colonne mobile */
  --colonne: 430px;

  /* Hauteur de l'en-tête, retranchée du héro pleine page */
  --h-entete: 55px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--encre-1);
  font-family: var(--f-corps);
  color: var(--craie);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button,
input,
textarea {
  font: inherit;
  color: inherit;
  border-radius: 0; /* angles vifs partout — guide 15·08 */
}

/* Conteneur : la maquette fait 390 px, on laisse respirer jusqu'à 430 px. */
.app {
  width: 100%;
  max-width: var(--colonne);
  margin: 0 auto;
  background: var(--encre-1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Accessibilité ---------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

.on-jaune :focus-visible { outline-color: var(--encre-1); }

/* ==========================================================================
   Wordmark (D en SVG + « AYBREAK » en Archivo)
   ========================================================================== */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  line-height: 0.73;
}

.wordmark__d {
  width: 0.605em;
  height: 0.6875em;
  margin-right: 0.02em;
  flex: none;
  overflow: visible;
  color: currentColor;
}

.wordmark__d .d-shape { fill: currentColor; }

/* Identité v2 : les neuf barres du « D » sont le seul jaune du logotype. */
.wordmark__d .d-bars { fill: var(--jaune); }

.wordmark__d .d-ombre { fill: var(--ombre-logo, transparent); }

.wordmark__text {
  font-family: var(--f-titre);
  font-variation-settings: 'wdth' 115, 'wght' 700;
  font-weight: 700;
  font-size: 1em;
  line-height: 0.73;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

/* Règle de l'ombre décalée : au-delà de 40 px de corps, offset = corps / 8. */
.wordmark--ombre { --ombre-logo: var(--ocre); }
.wordmark--ombre .wordmark__text { text-shadow: 0.125em 0.125em 0 var(--ocre); }

/* Version négative sur encre : face jaune, ombre en jaune brûlé. */
.wordmark--ombre-encre { --ombre-logo: #8A6600; }
.wordmark--ombre-encre .wordmark__text { text-shadow: 0.125em 0.125em 0 #8A6600; }

/* ==========================================================================
   1. La porte
   ========================================================================== */
.porte {
  min-height: 100svh;
  background: linear-gradient(180deg, #FFF6C9 0%, #FFE64D 34%, #FFE01A 62%, #F5B808 100%);
  justify-content: space-between;
}

/* Bande d'heures locales — occupe la zone réservée en haut de la porte.
   La ville la plus proche de 6 h passe en encre pleine (classe posée en JS). */
.porte__heures {
  height: 52px;
  flex: none;
  margin-top: env(safe-area-inset-top);
  padding: 0 24px 6px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--f-meta);
  font-size: clamp(9px, 2.6vw, 10px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.porte__heures.est-pret { opacity: 1; }

.heure {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  color: rgba(11, 11, 11, 0.42);
  white-space: nowrap;
  transition: color 0.5s ease;
}

.heure__h { font-variant-numeric: tabular-nums; }

.heure--aube { color: var(--encre-1); }

.heure--aube .heure__ville::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--encre-1);
  margin-right: 0.5em;
  vertical-align: 0.1em;
}

.porte__centre {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 26px;
  padding: 12px 28px;
}

.porte__logo {
  font-size: clamp(38px, 12.8vw, 50px);
  color: var(--encre-1);
}

.porte__accroche {
  margin: 0;
  font-family: var(--f-accroche);
  font-size: clamp(23px, 6.9vw, 27px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--encre-2);
  text-align: center;
  text-wrap: pretty;
}

.porte__bas {
  padding: 0 24px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.choix {
  background: var(--encre-2);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: background-color 0.18s ease;
}

.choix__texte {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.choix__titre {
  display: block;
  font-family: var(--f-titre);
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--craie);
}

.choix__sous {
  display: block;
  font-size: 13px;
  color: var(--clair-3);
}

.choix__fleche {
  font-family: var(--f-meta);
  font-size: 18px;
  color: var(--jaune);
  flex: none;
}

@media (hover: hover) {
  .choix:hover { background: #241F1B; }
}
.choix:active { background: #2E2822; }

/* ==========================================================================
   En-tête (homes)
   ========================================================================== */
.entete {
  background: var(--encre-2);
  padding: calc(14px + env(safe-area-inset-top)) 20px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Le lockup et le sélecteur se resserrent sous 390 px pour que
   « Daybreakers » ne soit jamais rogné. */
.entete__logo {
  font-size: clamp(17px, 5.4vw, 21px);
  color: var(--craie);
}

/* Plus de cadre ni d'aplat : l'onglet actif se signale par un trait jaune.
   Règle de rareté du jaune — un seul aplat par écran, réservé au bouton. */
.bascule {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 3.4vw, 18px);
  flex: none;
}

.bascule__lien {
  padding-bottom: 4px;
  font-family: var(--f-meta);
  font-size: 10px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--gris-3);
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.bascule__lien[aria-current='page'] {
  color: var(--craie);
  border-bottom-color: var(--jaune);
}

/* Sur l'accueil, la navigation flotte sur la photo : le trait de l'onglet
   actif passe en blanc pour ne pas ajouter un troisième aplat jaune
   au-dessus de la scène (déjà présent sur les boutons et la trame). */
.a1__rangee-haute .bascule__lien[aria-current='page'] {
  border-bottom-color: var(--craie);
}

@media (hover: hover) {
  .bascule__lien:not([aria-current]):hover { color: var(--craie); }
}

/* ==========================================================================
   Blocs communs
   ========================================================================== */
.meta {
  font-family: var(--f-meta);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris-3);
}

/* Libellé de partie : le même .meta, d'un cran plus grand, pour les sections
   dont il est le seul repère (« Les coulisses », « Selon ton soutien »). */
.meta--partie { font-size: 12.5px; letter-spacing: 0.18em; color: var(--clair-2); }

.meta--sur-jaune { color: rgba(11, 11, 11, 0.6); }
.meta--jaune { color: var(--jaune); }

.titre-section {
  margin: 0;
  font-family: var(--f-titre);
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-weight: 700;
  font-size: clamp(23px, 6.7vw, 26px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--craie);
}

.bloc-titre {
  padding: 42px 24px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bloc-titre--serre { padding-top: 38px; gap: 10px; }
.bloc-titre--large { padding-top: 40px; gap: 10px; }

/* Dans une section « page », le padding est porté par .page__contenu. */
.bloc-titre--page { padding: 0; gap: 10px; }

/* Bandeau pointillé de transition */
.bandeau-trame {
  height: 14px;
  flex: none;
  background: repeating-linear-gradient(90deg, var(--ocre) 0 4px, var(--encre-1) 4px 12px);
}

/* ==========================================================================
   Sections « une page » — chaque bloc occupe au moins une hauteur d'écran.
   100svh = hauteur visible barres du navigateur affichées : rien n'est coupé.
   ========================================================================== */
.page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  padding: 46px 0;
  box-sizing: border-box;
}

.page--craie { background: var(--encre-1); }
.page--encre { background: var(--encre-2); }

/* Rythme compact des piliers : ils s'enchaînent sans occuper un écran
   chacun, séparés par leur filet d'encre et par le passage au fond sombre. */
.piliers-bloc {
  background: var(--encre-1);
  padding: 40px 24px 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.piliers-bloc--fin { padding-bottom: 0; }

.pilier-encre {
  background: var(--encre-2);
  padding: 34px 0 36px;
}

.page__contenu {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 0 24px;
}

/* Les blocs qui portent déjà leur propre gouttière ne la doublent pas ici. */
.page__contenu > .frise { padding: 0; }
.page--encre > .accompagnement { padding: 0 24px; }

/* Photo pleine largeur, niveaux de gris + voile de hachures */
.photo {
  overflow: hidden;
  position: relative;
}

/* Plus de désaturation : la lumière chaude des photos est le sujet. */
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.02) contrast(1.06);
}

/* Voile pour raccorder les bandes photo au fond encre. */
.photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(11, 11, 11, 0.45) 0%,
    rgba(11, 11, 11, 0) 40%,
    rgba(11, 11, 11, 0.55) 100%);
}

/* Le voile de hachures verticales prévu par le handoff a été retiré :
   sur ces photos denses, il se lisait comme un quadrillage. */

.photo--daybreakers { margin-top: 30px; height: 200px; }

/* Photo en pied de pilier : pleine largeur, hors gouttière de .page__contenu.
   Cadrage décalé pour ne pas montrer le même plan que sur la home Daybreakers. */
.photo--pilier {
  margin: 10px -24px 0;
  height: 190px;
  flex: none;
}

.photo--pilier img { object-position: center 62%; }
.photo--daybreakers img { object-position: 50% 55%; }

/* ==========================================================================
   2. Home artistes — héro photo + accroche, sur une pleine page
   ========================================================================== */
.hero-artiste {
  min-height: calc(100svh - var(--h-entete));
  display: flex;
  flex-direction: column;
}

.hero-artiste__photo {
  flex: 1 1 auto;
  min-height: 150px;
  position: relative;
  overflow: hidden;
  background: var(--encre-2);
}

/* Positionnement absolu : la hauteur vient du flex, pas du ratio de l'image. */
.hero-artiste__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12);
}

/* Pas de voile de hachures ici : réservé aux bandeaux photo de 190-200 px.
   Sur un héro, il noircit l'image. Comme sur la home Daybreakers, seule la
   désaturation s'applique. */

.hero-artiste__texte {
  flex: none;
  background: var(--jaune);
  padding: 32px 24px 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.accroche-jaune {
  background: var(--jaune);
  padding: 46px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.accroche-jaune__titre {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 400;
}

.accroche-jaune__serif {
  font-family: var(--f-accroche);
  font-size: clamp(26px, 7.7vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--encre-2);
}

.accroche-jaune__archivo {
  font-family: var(--f-titre);
  font-variation-settings: 'wdth' 115, 'wght' 700;
  font-weight: 700;
  font-size: clamp(31px, 9.5vw, 37px);
  line-height: 0.87;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--encre-1);
}

.texte {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--clair-1);
  text-wrap: pretty;
}

.texte--sm { font-size: 15.5px; }
.texte--gris { color: var(--gris-3); font-size: 13.5px; line-height: 1.55; }
.texte--sur-encre { font-size: 15px; color: var(--clair-1); }

/* Les trois chapôs de pilier (Financement, Accompagnement, Communauté) sont
   le même niveau de lecture : même taille, même blanc. */
.pilier > .texte--sm,
.accompagnement > .texte--sur-encre:first-of-type {
  font-size: 17px;
  color: var(--craie);
}

/* La bio du chef de projet est du texte de lecture, pas une légende. */
.accompagnement > .texte--sur-encre:last-of-type { color: var(--craie); }

/* Bouton d'ancre sur fond jaune */
.bouton-ancre {
  background: var(--jaune);
  padding: 17px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: background-color 0.18s ease;
}

.bouton-ancre__label {
  font-family: var(--f-titre);
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--encre-1);
}

.bouton-ancre__signe {
  font-family: var(--f-meta);
  font-size: 15px;
  color: var(--encre-1);
}

@media (hover: hover) {
  .bouton-ancre:hover { background: #FFF6C9; }
}
.bouton-ancre:active { background: var(--ocre); }

/* ==========================================================================
   Piliers
   ========================================================================== */
.piliers { padding: 26px 24px 0; }
.piliers--communaute { padding-top: 30px; }

/* Le filet ne coiffe plus le pilier — il souligne son titre, comme sur
   le bloc Accompagnement. Plus de barre orpheline sous le bandeau de trame. */
.pilier {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pilier--communaute { gap: 14px; }

.pilier__entete {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 2px solid var(--trait);
  padding-bottom: 12px;
}

.pilier__num {
  font-family: var(--f-meta);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ocre);
}

.pilier__titre {
  margin: 0;
  font-family: var(--f-titre);
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--craie);
}

.pilier__titre--clair { color: var(--craie); }
.pilier__num--jaune { color: var(--ocre); }

/* ==========================================================================
   Flux « Où passe l'argent » — trois étapes, sans encadrés ni aplats.
   Seul le point d'arrivée porte le repère jaune, comme la fin de la frise.
   ========================================================================== */
.flux {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 2px;
}

/* Les trois points sont tenus par un seul encadré, sans filets internes. */
.flux__etapes {
  background: #1C1916;
  border: 1px solid #3D3833;
  padding: 18px 16px 20px;
  display: flex;
  flex-direction: column;
}

.flux__etape {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.flux__nom {
  font-family: var(--f-titre);
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--craie);
}

.flux__etape--fin .flux__nom { color: var(--jaune); }

.flux__detail {
  font-size: 13px;
  line-height: 1.45;
  color: var(--clair-2);
}

.flux__liaison {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 0 11px;
  font-family: var(--f-meta);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--craie);
}

.flux__fleche {
  color: var(--ocre);
  font-size: 12px;
  line-height: 1;
}

/* Repère d'arrivée : carré jaune cerné d'encre, comme la dernière étape
   de la frise « Comment ça marche ». */
.flux__etape--fin .flux__nom::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--jaune);
  margin-right: 9px;
  vertical-align: 0.05em;
}

/* L'encadré délimite déjà le flux : la note se pose simplement en dessous. */
.flux__note {
  border-top: 1px solid var(--trait);
  padding-top: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--craie);
  text-wrap: pretty;
}

/* Schéma « Où passe l'argent » */
.schema {
  margin-top: 4px;
  border: 2px solid var(--encre-2);
  display: flex;
  flex-direction: column;
}

.schema__entete,
.encadre__entete {
  background: var(--encre-2);
  border-bottom: 1px solid var(--trait);
  padding: 12px 16px;
  font-family: var(--f-meta);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ocre);
}

.schema__flux {
  padding: 20px 16px 8px;
  display: flex;
  flex-direction: column;
}

.schema__bloc {
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.schema__bloc--jaune { background: var(--jaune); }
.schema__bloc--neutre { background: var(--panel); border: 1px solid var(--bordure); }
.schema__bloc--encre { background: var(--encre-2); }

.schema__nom {
  font-family: var(--f-titre);
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--encre-1);
}

.schema__bloc--neutre .schema__nom { color: var(--encre-2); }
.schema__bloc--encre .schema__nom { color: var(--jaune); }

.schema__detail { font-size: 12.5px; color: var(--gris-1); }
.schema__bloc--neutre .schema__detail { color: var(--gris-2); }
.schema__bloc--encre .schema__detail { color: var(--clair-3); }

.schema__lien {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0 7px 15px;
}

.schema__trait {
  width: 2px;
  height: 26px;
  background: var(--encre-2);
  flex: none;
}

.schema__etiquette {
  font-family: var(--f-meta);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-2);
}

.schema__notes {
  padding: 6px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.schema__note {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

.schema__note--premiere {
  border-top: 1px dashed var(--clair-3);
  padding-top: 14px;
}

.schema__signe {
  font-family: var(--f-meta);
  font-size: 13px;
  color: var(--ocre-fonce);
  flex: none;
  line-height: 1.2;
}

.schema__note p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gris-1);
  text-wrap: pretty;
}

/* Pilier 02 — accompagnement (le fond encre est porté par .page--encre) */
.accompagnement {
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profil {
  display: flex;
  gap: 14px;
  align-items: stretch;
}

.profil__portrait {
  width: 132px;
  flex: none;
  height: 168px;
  position: relative;
  overflow: hidden;
  background: #2A2622;
}

.profil__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  filter: brightness(1.18) contrast(1.06);
}

.profil__portrait::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 5px; height: 100%;
  background: repeating-linear-gradient(180deg, var(--ocre) 0 4px, transparent 4px 12px);
}

.profil__infos {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 2px;
}

.profil__nom {
  margin: 0;
  font-family: var(--f-titre);
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-weight: 700;
  font-size: 26px;
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--craie);
}

/* Badge en contour ocre : le jaune plein est réservé au bouton principal. */
.profil__badge {
  border: 1px solid var(--ocre);
  align-self: flex-start;
  padding: 4px 9px;
  font-family: var(--f-meta);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ocre);
  white-space: nowrap;
}

.profil__genre {
  font-family: var(--f-meta);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clair-2);
}

/* Écoute : petit logo Spotify (vert de la marque, seul vert du site) et le mot
   « Spotify » en lien. Une fine ligne le sépare des chiffres. */
.profil__ecoute {
  margin: 2px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--trait);
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--clair-1);
}

.profil__spotify { flex: none; width: 20px; height: 20px; }

.profil__lien {
  color: var(--craie);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #1DB954;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}

@media (hover: hover) {
  .profil__lien:hover { color: #1DB954; }
}

.profil__lien:focus-visible { outline: 2px solid var(--jaune); outline-offset: 3px; }

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  margin-top: 4px;
}

.stat {
  background: var(--input);
  padding: 10px 10px 9px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.stat__valeur {
  font-family: var(--f-titre);
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-weight: 700;
  font-size: 21px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ocre);
}

.stat__label {
  font-family: var(--f-meta);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clair-2);
  line-height: 1.4;
}

.reseau {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.reseau__label {
  font-family: var(--f-meta);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris-3);
}

.reseau__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.reseau__tags li {
  border: 1px solid var(--gris-2);
  padding: 7px 12px;
  font-size: 13px;
  color: var(--craie);
  transition: color 0.18s ease, border-color 0.18s ease;
}

@media (hover: hover) {
  .reseau__tags li:hover { color: var(--ocre); border-color: var(--ocre); }
}

/* Pilier 03 — communauté */
.liste-num {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  list-style: none;
  margin: 0;
  padding: 0;
}

.liste-num li {
  background: var(--encre-2);
  padding: 14px 16px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.liste-num__num {
  font-family: var(--f-meta);
  font-size: 10px;
  color: var(--ocre);
  letter-spacing: 0.1em;
  flex: none;
  width: 18px;
}

.liste-num__texte {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--craie);
}

/* ==========================================================================
   Frise « Comment ça marche »
   ========================================================================== */
.frise {
  padding: 24px 24px 0;
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
}

.frise__etape {
  display: flex;
  gap: 16px;
}

.frise__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  width: 26px;
  padding-top: 4px;
}

.frise__point {
  width: 11px;
  height: 11px;
  background: var(--ocre);
  flex: none;
}

.frise__trait {
  width: 2px;
  flex: 1;
  background: var(--trait);
  min-height: 46px;
}

.frise--serree .frise__trait { min-height: 40px; }
.frise--nue { padding: 0; }

.frise__etape:last-child .frise__point {
  background: var(--jaune);
}

.frise__contenu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 22px;
}

.frise--serree .frise__contenu { padding-bottom: 20px; }
.frise__etape:last-child .frise__contenu { padding-bottom: 0; }

.frise__num {
  font-family: var(--f-meta);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ocre);
}

.frise__titre {
  margin: 0;
  font-weight: 600;
  font-size: 16px;
  color: var(--craie);
}

.frise__texte {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--clair-2);
}

/* ==========================================================================
   3. Home Daybreakers
   ========================================================================== */
/* Ouverture Daybreakers : la photo et « Ce que tu fais » forment un seul
   écran. La photo prend la place restante, le bloc jaune garde sa hauteur. */
.ouverture {
  min-height: calc(100svh - var(--h-entete));
  display: flex;
  flex-direction: column;
}

.ouverture > .hero {
  flex: 1 1 auto;
  height: auto;
  min-height: 300px;
}

.ouverture > .ce-que-tu-fais {
  flex: none;
  min-height: 0;
  justify-content: flex-start;
  padding: 32px 24px 30px;
}

.hero {
  position: relative;
  height: 430px;
  overflow: hidden;
  background: var(--encre-2);
}

.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(0.72);
}

.hero__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 11, 0.35) 0%, rgba(11, 11, 11, 0.2) 40%, rgba(11, 11, 11, 0.92) 100%);
}

.hero__texte {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 24px 34px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hero__accroche {
  margin: 0;
  font-family: var(--f-accroche);
  font-size: clamp(27px, 8.2vw, 32px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--craie);
  text-wrap: pretty;
}

.hero__intro {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--clair-4);
  text-wrap: pretty;
}

/* Passé du jaune plein cadre au fond encre : les filets portent l'ocre.
   Le bloc n'occupe plus 100svh : entre deux bandeaux de trame, la hauteur
   d'écran imposée laissait un grand vide noir au-dessus et au-dessous. */
.ce-que-tu-fais {
  background: var(--encre-1);
  padding: 44px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ce-que-tu-fais__liste {
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ce-que-tu-fais__liste li {
  border-top: 2px solid var(--ocre);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ce-que-tu-fais__titre {
  margin: 0;
  font-family: var(--f-titre);
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--craie);
}

.ce-que-tu-fais p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--clair-2);
  text-wrap: pretty;
}

.puces {
  padding: 22px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
}

.puces li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.5;
  color: var(--craie);
}

.puces li::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--ocre);
  flex: none;
  margin-top: 7px;
}

/* Paliers d'engagement */
.paliers {
  padding: 34px 24px 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.paliers__liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* L'intensité du nom monte avec le palier ; seul le dernier porte l'ocre. */
.palier {
  background: var(--encre-2);
  border: 1px solid var(--trait);
  padding: 14px 16px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.palier--haut {
  background: var(--input);
  border-color: var(--ocre);
}

.paliers__liste li:nth-child(1) .palier__nom { color: var(--gris-3); }
.paliers__liste li:nth-child(2) .palier__nom { color: var(--clair-2); }
.paliers__liste li:nth-child(3) .palier__nom { color: var(--craie); }
.palier--haut .palier__nom { color: var(--ocre); }

.palier__nom {
  font-family: var(--f-titre);
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--craie);
}

.palier__avantage {
  font-size: 13px;
  line-height: 1.4;
  color: var(--clair-2);
  text-align: right;
  width: 226px;
  max-width: 60%;
}

/* Le cadre réglementaire */
.encadre {
  margin: 38px 24px 0;
  border: 1px solid var(--trait);
  display: flex;
  flex-direction: column;
}

.encadre__corps {
  background: #1C1916;
  padding: 18px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.encadre__corps p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--craie);
  text-wrap: pretty;
}

/* Filet en ocre foncé : c'est une mention légale, elle ne doit pas
   attirer l'œil autant qu'un bouton. */
.mention {
  border-left: 3px solid var(--ocre-fonce);
  padding: 12px 14px;
  background: #262220;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mention__titre {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--craie);
}

.mention__texte {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--clair-2);
  text-wrap: pretty;
}

/* ==========================================================================
   Formulaire final
   ========================================================================== */
.contact {
  margin-top: 40px;
  background: var(--encre-2);
  padding: 40px 24px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Wordmark, compte Instagram et accroche : un seul groupe. La gouttière du
   bloc contact ne s'intercale plus entre eux, ce qui resserre nettement le
   bas de page en desktop (elle vaut 100 px). */
.contact__identite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.contact__identite > .contact__accroche { margin-top: 12px; }

.contact__logo {
  font-size: 29px;
  color: var(--jaune);
  align-self: flex-start;
}

/* Le padding/margin compensés portent la cible tactile à ~44 px sans
   décaler la mise en page. */
.contact__reseau {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 0;
  margin: -13px 0;
  font-family: var(--f-meta);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--craie);
  transition: color 0.18s ease;
}

.contact__icone {
  width: 17px;
  height: 17px;
  flex: none;
}

@media (hover: hover) {
  .contact__reseau:hover { color: var(--ocre); }
}

.contact__accroche {
  margin: 0;
  font-family: var(--f-accroche);
  font-size: clamp(24px, 6.9vw, 27px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--craie);
  text-wrap: pretty;
}

.formulaire {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.champ {
  background: var(--input);
  border: 1px solid var(--trait);
  padding: 16px;
  font-size: 15px;
  color: var(--craie);
  font-family: var(--f-corps);
  line-height: 1.4;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.18s ease;
}

.champ::placeholder { color: var(--gris-3); opacity: 1; }
.champ:focus { border-color: var(--jaune); outline: none; }
.champ:focus-visible { outline: none; }

textarea.champ {
  resize: vertical;
  min-height: 96px;
}

.bouton {
  background: var(--jaune);
  border: none;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.18s ease;
}

.bouton__label {
  font-family: var(--f-titre);
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--encre-1);
}

.bouton__signe {
  font-family: var(--f-meta);
  font-size: 15px;
  color: var(--encre-1);
}

@media (hover: hover) {
  .bouton:hover { background: #FFF6C9; }
}
.bouton:active { background: #F5B808; }

.champ-cache { display: none; }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.pied {
  background: var(--encre-1);
  padding: 26px 24px calc(30px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pied__liens {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  font-family: var(--f-meta);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-3);
}

.pied__liens a { transition: color 0.18s ease; }

@media (hover: hover) {
  .pied__liens a:hover { color: var(--ocre); }
}


/* ==========================================================================
   Page de confirmation
   ========================================================================== */
.merci {
  min-height: 100svh;
  background: var(--encre-1);
  justify-content: center;
  padding: 40px 24px calc(40px + env(safe-area-inset-bottom));
  gap: 24px;
}

.merci__logo {
  font-size: 44px;
  color: var(--craie);
  align-self: flex-start;
}

.merci__accroche {
  margin: 0;
  font-family: var(--f-accroche);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--craie);
}

.merci__retour {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.merci__lien {
  border: 1px solid var(--trait);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--f-titre);
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--craie);
  transition: border-color 0.18s ease, color 0.18s ease;
}

.merci__lien span:last-child { font-family: var(--f-meta); color: var(--ocre); }

@media (hover: hover) {
  .merci__lien:hover { border-color: var(--ocre); }
}

/* ==========================================================================
   Confort de lecture au-delà du mobile : la colonne reste centrée,
   le fond encadrant reprend le noir de marque.
   ========================================================================== */
@media (min-width: 480px) {
  body { background: var(--encre-1); }
  .app { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
}

/* Écrans courts (iPhone SE et assimilés) : on resserre l'ouverture
   Daybreakers pour qu'elle tienne malgré tout dans une hauteur d'écran. */
@media (max-height: 700px) {
  .ouverture > .hero { min-height: 215px; }

  .hero__texte {
    padding: 0 24px 22px;
    gap: 12px;
  }

  .ouverture > .ce-que-tu-fais {
    padding: 24px 24px 22px;
    gap: 16px;
  }

  .ce-que-tu-fais__liste { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ==========================================================================
   Héros « Lueur » — composant partagé par les deux pages.
   Quatre couches de fond (photo, voile, lueur, grain) puis le contenu.
   La lueur et le grain sont repris de la page d'accueil : c'est ce qui fait
   le lien visuel entre la landing et les deux pages intérieures.
   ========================================================================== */
@keyframes lueur {
  0%, 100% { transform: translateY(10%) scale(1);   opacity: 0.58; }
  50%      { transform: translateY(-4%) scale(1.1); opacity: 1; }
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -2%); }
  100% { transform: translate(0, 0); }
}

.heros {
  position: relative;
  min-height: calc(100svh - var(--h-entete));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--encre-1);
}

/* Repère de scroll : remplace l'ancien indice — un bout de la section
   suivante qui dépassait — depuis que le héros occupe l'écran entier.
   Masqué en mobile : le bouton y est étiré pleine largeur (`align-self:
   stretch`), un chevron en bas à droite le chevaucherait ; la flèche déjà
   présente dans le bouton suffit comme indice sur petit écran. */
.heros__chevron {
  display: none;
  position: absolute;
  z-index: 1;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(241, 240, 236, .5);
  border-radius: 50%;
  color: var(--ocre);
  background: rgba(11, 11, 11, .4);
  animation: heros-chevron 1.6s ease-in-out infinite;
}

@keyframes heros-chevron {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

.heros__photo,
.heros__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.heros__voile,
.heros__lueur,
.heros__grain { position: absolute; pointer-events: none; }

.heros__voile {
  inset: 0;
  background: linear-gradient(180deg,
    rgba(38, 20, 6, 0.70) 0%,
    rgba(38, 20, 6, 0.26) 28%,
    rgba(28, 15, 5, 0.60) 56%,
    rgba(20, 10, 3, 0.95) 84%,
    var(--encre-1) 100%);
}

.heros__lueur {
  left: -25%;
  right: -25%;
  bottom: -14%;
  height: 72%;
  background: radial-gradient(60% 100% at 50% 100%,
    rgba(255, 224, 26, 0.68) 0%,
    rgba(245, 184, 8, 0.34) 46%,
    rgba(245, 184, 8, 0) 80%);
  mix-blend-mode: screen;
  animation: lueur 24s ease-in-out infinite;
}

/* Douze passages (~11 s) puis la texture se fige — voir accueil.css. */
.heros__grain {
  inset: -6%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.14;
  animation: grain 0.9s steps(4) 12;
}

.heros__contenu {
  position: relative;
  z-index: 1;
  padding: 0 24px 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Mobile : un voile sombre accroché au bloc de texte, pour que le sur-titre et le
   titre restent lisibles quelle que soit la hauteur d'écran (le texte remonte
   sur la photo des écrans courts). */
@media (max-width: 1023px) {
  .heros__contenu::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: -110px;
    bottom: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(21, 14, 8, 0) 0,
      rgba(21, 14, 8, 0.78) 110px,
      rgba(21, 14, 8, 0.66) 70%,
      rgba(21, 14, 8, 0.3) 100%);
  }
}

.heros__surtitre {
  font-family: var(--f-meta);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ocre);
  text-shadow: 0 0 10px rgba(21, 14, 8, 0.95), 0 1px 2px rgba(0, 0, 0, 0.9);
}

.heros__accroche {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-weight: 400;
}

.heros__titre {
  display: block;
  margin: 0;
  font-family: var(--f-titre);
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-weight: 700;
  font-size: clamp(34px, 11vw, 43px);
  line-height: 0.84;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--craie);
}

/* Titre de héros d'un seul tenant (Artistes, Daybreakers) : tous les mots à la
   même taille, la même sur les deux pages. */
.heros__titre--seul {
  font-size: clamp(28px, 8.4vw, 37px);
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.heros__chapo {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--clair-4);
  text-wrap: pretty;
}

/* Très petits mobiles (≤ 380 px) : le chapô tient sans mot orphelin. */
@media (max-width: 380px) {
  .heros__chapo { font-size: 15px; letter-spacing: -0.01em; }
}

.heros .bouton-ancre { align-self: stretch; }

/* Pastille "Bientôt" : repère de pré-lancement, en haut du héros. */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 6px 11px;
  border: 1px solid rgba(245, 184, 8, .5);
  background: rgba(245, 184, 8, .12);
  font-family: var(--f-meta);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ocre);
}

.pastille__point {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ocre);
  animation: pastille-pulse 1.8s ease-in-out infinite;
}

@keyframes pastille-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .pastille__point { animation: none; }
}

/* Formulaire réduit dans le héros : reprend .formulaire/.champ/.bouton,
   juste plafonné en largeur pour ne pas s'étirer sur toute la colonne. */
.formulaire--heros { max-width: 380px; }

.heros__note {
  font-size: 12.5px;
  color: var(--clair-2);
  max-width: 380px;
}

.heros__lien { color: var(--craie); text-decoration: underline; }

@media (min-width: 1024px) {
  .formulaire--heros { max-width: 420px; }
  .formulaire--heros .champ { padding: 15px 16px; }
  .heros__note { max-width: 420px; font-size: 13px; }
}

/* Photos : couleur chaude conservée, plus aucune désaturation. */
.heros--artistes .heros__photo img {
  filter: saturate(1.02) contrast(1.05);
  object-position: 50% 50%;
}

/* La fenêtre de cette photo tombe pile derrière le sur-titre : le voile
   standard n'y suffit pas, on l'appuie en milieu de cadre. */
.heros--artistes .heros__voile {
  background: linear-gradient(180deg,
    rgba(38, 20, 6, 0.62) 0%,
    rgba(38, 20, 6, 0.34) 22%,
    rgba(28, 15, 5, 0.74) 52%,
    rgba(20, 10, 3, 0.96) 82%,
    var(--encre-1) 100%);
}

/* Photo de studio sombre : éclaircie, et voile allégé. Sur mobile elle n'occupe
   que le haut de l'écran (cadrage large, plus net) et fond vers l'encre, là où
   se posent le titre et le formulaire. */
.heros--daybreakers .heros__photo img {
  filter: brightness(1.55) contrast(1.04) saturate(1.12);
  object-position: 56% 46%;
}

@media (max-width: 1023px) {
  .heros--daybreakers .heros__photo img {
    inset: auto;
    top: 0;
    left: 0;
    height: 66%;
    object-position: 58% 48%;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  }

  .heros--daybreakers .heros__voile {
    background: linear-gradient(180deg,
      rgba(38, 20, 6, 0.50) 0%,
      rgba(38, 20, 6, 0.20) 22%,
      rgba(28, 15, 5, 0.62) 40%,
      rgba(20, 10, 3, 0.82) 58%,
      rgba(20, 10, 3, 0.92) 84%,
      var(--encre-1) 100%);
  }
}

/* Une photo par promesse, au-dessus du titre. */
.vignette {
  margin: 0 0 14px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--encre-1);
}

.vignette img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
}

@media (min-width: 1024px) {
  .vignette { aspect-ratio: 4 / 3; }
}

/* Halo d'ambiance : toutes les sections de contenu de <main>, sans photo ni
   classe particulière requise (.heros et .encadre exclus). Le halo fait la
   hauteur réelle de chaque section (+ dépassement) plutôt qu'une taille fixe,
   pour garantir un traitement identique quelle que soit la longueur du
   contenu (empilement mobile vs colonnes desktop). */
main section:not(.heros):not(.encadre) {
  position: relative;
  overflow: hidden;
}

main section:not(.heros):not(.encadre)::before {
  content: '';
  position: absolute;
  left: -20%;
  right: -20%;
  top: -70px;
  height: calc(100% + 70px);
  background: radial-gradient(55% 100% at 50% 0%,
    rgba(255, 224, 26, .22) 0%,
    rgba(245, 184, 8, .11) 45%,
    rgba(245, 184, 8, 0) 78%);
  mix-blend-mode: screen;
  pointer-events: none;
}

main section:not(.heros):not(.encadre) > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Éléments présents dans le DOM mais réservés au desktop.
   Neutralisés ici pour que la version mobile reste strictement identique.
   ========================================================================== */
.entete--porte,
.bascule__lien--accueil,
.pied__lien--desktop { display: none; }

/* Le regroupement « une page » du desktop ne doit rien changer en mobile. */
.page-desktop { display: contents; }

/* La flèche du flux vient du CSS : elle descend en mobile, avance en desktop. */
.flux__fleche::before { content: '\2193'; }

/* ==========================================================================
   Pages de texte long — mentions légales, confidentialité.
   Une seule colonne de lecture, pas de photo, pas de bandeau.
   ========================================================================== */
.doc {
  padding: 40px 24px 56px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.doc__titre {
  margin: 0;
  font-family: var(--f-titre);
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-weight: 700;
  font-size: clamp(30px, 8.4vw, 36px);
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--craie);
}

/* Le sur-titre, le titre et la date forment un seul groupe. */
.doc > .meta { margin-bottom: -20px; }
.doc__maj {
  margin: -18px 0 0;
  font-family: var(--f-meta);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--gris-3);
}

.doc__bloc {
  border-top: 2px solid var(--trait);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Le cadre réglementaire se détache du reste du document. */
.doc__bloc--mention {
  border-top: none;
  border-left: 3px solid var(--ocre-fonce);
  background: #1C1916;
  padding: 18px 18px 20px;
}

.doc__soustitre {
  margin: 0;
  font-family: var(--f-titre);
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--craie);
}

.doc__texte {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--clair-1);
  text-wrap: pretty;
}

.doc__texte strong { color: var(--craie); font-weight: 600; }

/* Fiche d'identité : le libellé en mono gris, la valeur en craie. */
.doc__fiche {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.doc__fiche > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.doc__fiche dt {
  font-family: var(--f-meta);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris-3);
}

.doc__fiche dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--craie);
}

/* Ligne légale des pages sans pied de page (merci, 404). */
.doc__legal {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-family: var(--f-meta);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.doc__legal a { color: var(--gris-3); transition: color 0.18s ease; }

@media (hover: hover) {
  .doc__legal a:hover { color: var(--ocre); }
}

.doc a {
  color: var(--ocre);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

@media (hover: hover) {
  .doc a:hover { color: var(--jaune); }
}

/* ==========================================================================
   DESKTOP — à partir de 1024 px
   Reprise de la maquette « daybreak-desktop-a » : gouttière 48 px,
   contenu max 1440 px, en-tête collant de 76 px.
   ========================================================================== */
@media (min-width: 1024px) {

  :root { --h-entete: 76px; }

  body { background: var(--encre-1); }

  /* Pas de « background » ici : il écraserait le dégradé de .porte,
     déclaré plus haut avec la même spécificité. */
  .app {
    max-width: none;
    box-shadow: none;
    overflow: visible;
  }

  /* ---------------------------------------------------------- en-tête */
  .entete--porte { display: flex; }

  .entete {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 76px;
    margin-top: 0;
    padding: 0 48px;
    gap: 32px;
    background: rgba(11, 11, 11, 0.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--trait);
  }

  .entete__logo { font-size: 24px; }

  .bascule__lien--accueil { display: block; }

  .bascule__lien {
    padding-bottom: 4px;
    font-size: 11px;
    letter-spacing: 0.12em;
  }

  .bascule { gap: 26px; }

  /* ------------------------------------------------------------ porte */
  .porte {
    min-height: calc(100svh - var(--h-entete));
    padding: 40px 48px 48px;
    justify-content: space-between;
  }

  .porte__heures {
    height: auto;
    margin-top: 0;
    padding: 0;
    justify-content: flex-start;
    align-items: baseline;
    gap: 56px;
    font-size: 11px;
    letter-spacing: 0.06em;
  }

  .porte__centre {
    flex: 1;
    gap: 56px;
    padding: 0;
  }

  .porte__logo { font-size: min(170px, 9.5vw); }

  .porte__accroche {
    font-size: 62px;
    line-height: 1.1;
  }

  .porte__bas {
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
  }

  .choix {
    padding: 34px 36px;
    gap: 20px;
    transition: background-color 0.18s ease, transform 0.18s ease;
  }

  .choix__texte { gap: 6px; }
  .choix__titre { font-size: 30px; }
  .choix__sous { font-size: 16px; }
  .choix__fleche { font-size: 26px; }

  @media (hover: hover) {
    .choix:hover { transform: translateY(-3px); }
  }

  /* --------------------------------------------- séparateur pointillé */
  .bandeau-trame { height: 16px; }

  /* --------------------------------------------- héro artistes (2 col) */
  .hero-artiste {
    min-height: calc(100svh - var(--h-entete));
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    align-items: stretch;
  }

  .hero-artiste__texte {
    order: -1;
    padding: 96px 72px;
    justify-content: center;
    gap: 34px;
  }

  .hero-artiste__photo {
    min-height: 520px;
    padding: 40px 0;
    justify-content: center;
  }

  /* La plaque n'est jamais agrandie : largeur pleine, hauteur libre. */
  .hero-artiste__photo img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: fill;
  }

  .accroche-jaune__titre { gap: 10px; }
  .accroche-jaune__serif { font-size: 44px; }
  .accroche-jaune__archivo { font-size: 64px; }

  .hero-artiste__texte .texte {
    font-size: 20px;
    max-width: 520px;
  }

  .bouton-ancre {
    padding: 22px 26px;
    max-width: 460px;
    gap: 16px;
  }

  .bouton-ancre__label { font-size: 19px; }
  .bouton-ancre__signe { font-size: 18px; }

  /* ------------------------------------------------- blocs de piliers */
  .piliers-bloc {
    padding: 64px 48px 60px;
    gap: 28px;
  }

  .pilier-encre { padding: 64px 48px 60px; }
  .accompagnement { padding: 0; gap: 26px; }

  .piliers-bloc > *,
  .pilier-encre > * {
    max-width: 1440px;
    width: 100%;
    margin-inline: auto;
  }

  /* Le desktop attaque directement sur « 01 Financement ». */
  .piliers-bloc > .bloc-titre { display: none; }

  .pilier { gap: 26px; }

  .pilier__entete {
    flex-wrap: wrap;
    gap: 8px 20px;
    padding-bottom: 16px;
  }

  .pilier__num { font-size: 13px; }

  .pilier__titre {
    font-size: 56px;
    line-height: 0.9;
    letter-spacing: -0.04em;
  }

  /* v2 : ces chapôs étaient restés en encre, hérités du desktop sur craie.
     Sur le fond sombre ils étaient invisibles — ils reprennent la couleur
     de corps de .texte. */
  .pilier > .texte--sm,
  .accompagnement > .texte--sur-encre:first-of-type {
    font-size: 30px;
    line-height: 1.35;
    letter-spacing: -0.01em;
  }

  /* ------------------------------------------ flux « où passe l'argent » */
  .flux { gap: 18px; margin-top: 0; }

  .flux__etapes {
    padding: 30px 36px;
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    align-items: center;
    gap: 32px;
  }

  .flux__etape { gap: 4px; }
  .flux__nom { font-size: 24px; }
  .flux__detail { font-size: 15px; }
  .flux__etape:nth-child(3) { text-align: center; }
  .flux__etape--fin { text-align: right; }
  .flux__etape--fin .flux__nom::before { display: none; }

  .flux__liaison {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0;
  }

  .flux__fleche { font-size: 14px; }
  .flux__fleche::before { content: '\2192'; }

  .flux__note {
    padding-top: 18px;
    font-size: 18px;
  }

  .pilier > .texte--gris { font-size: 16px; }

  /* ------------------------------------------------ 02 accompagnement */
  .profil {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    align-items: stretch;
  }

  .profil__portrait {
    width: auto;
    height: auto;
    min-height: 330px;
  }

  .profil__portrait::after { width: 6px; }

  .profil__infos {
    justify-content: center;
    gap: 18px;
    padding-top: 0;
  }

  .profil__nom { font-size: 46px; }
  .profil__badge { font-size: 11px; padding: 6px 12px; }
  .profil__genre { font-size: 11px; }
  .profil__ecoute { font-size: 15px; padding-top: 16px; max-width: 640px; }
  .profil__spotify { width: 24px; height: 24px; }

  .stats { max-width: 640px; margin-top: 0; }
  .stat { padding: 16px 18px; }
  .stat__valeur { font-size: 30px; }
  .stat__label { font-size: 10px; }

  .accompagnement > .texte--sur-encre:last-of-type { font-size: 19px; }

  .reseau {
    border-top: 1px solid #2E2A26;
    padding-top: 26px;
    gap: 14px;
  }

  .reseau__label { font-size: 11px; }
  .reseau__tags { gap: 10px; }

  .reseau__tags li {
    padding: 10px 16px;
    font-size: 15px;
    transition: color 0.18s ease, border-color 0.18s ease;
  }

  @media (hover: hover) {
    .reseau__tags li:hover { color: var(--jaune); border-color: var(--jaune); }
  }

  /* ------------------------------------- 03 communauté + photo, une page */
  .piliers-bloc--fin {
    height: calc(100svh - var(--h-entete));
    min-height: 700px;
    padding: 0;
    gap: 0;
  }

  .piliers-bloc--fin > .pilier {
    flex: none;
    max-width: 1536px;
    padding: 48px 48px 40px;
    gap: 26px;
  }


  .liste-num {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
  }

  .liste-num li { padding: 22px 24px; }
  .liste-num__num { font-size: 11px; width: auto; }
  .liste-num__texte { font-size: 18px; }

  .photo--pilier {
    flex: 1;
    min-height: 180px;
    height: auto;
    margin: 0;
    max-width: none;
  }

  .photo--pilier img { object-position: center 58%; }

  /* -------------------------------------------- frise « comment ça marche » */
  .page-desktop {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - var(--h-entete));
  }

  .page-desktop > .piliers-bloc {
    flex: 1;
    justify-content: center;
    padding: 48px;
    gap: 40px;
  }

  .page-desktop > .piliers-bloc > .bloc-titre {
    display: flex;
    gap: 12px;
  }

  .bloc-titre--page .meta { font-size: 11px; }
  .meta--partie { font-size: 14px; }

  .titre-section {
    font-size: 46px;
    line-height: 0.9;
  }

  .frise {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 28px;
  }

  .frise__etape { display: block; position: relative; }

  .frise__rail {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--trait);
    padding-top: 0;
    position: relative;
  }

  .frise__trait { display: none; }

  .frise__point {
    position: absolute;
    left: 0;
    top: -5px;
    width: 12px;
    height: 12px;
  }

  .frise__contenu {
    padding-bottom: 0;
    padding-top: 24px;
    gap: 12px;
  }

  .frise__num { font-size: 11px; }
  .frise__titre { font-size: 22px; font-family: var(--f-titre);
    font-variation-settings: 'wdth' 112, 'wght' 700; font-weight: 700;
    letter-spacing: -0.02em; text-transform: uppercase; }
  .frise__texte { font-size: 16px; }

  /* ------------------------------------------------ formulaire de contact */
  .contact {
    flex: none;
    margin-top: 0;
    padding: 56px 48px 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
  }

  .contact > .contact__identite,
  .contact > .wordmark,
  .contact > .contact__accroche { grid-column: 1; }

  .contact__identite { gap: 14px; }
  .contact__identite > .contact__accroche { margin-top: 16px; }
  .contact__reseau { font-size: 14px; }
  .contact__icone { width: 18px; height: 18px; }
  .contact__logo { font-size: 34px; align-self: start; }
  .contact__accroche { font-size: 42px; align-self: start; }

  .contact > .texte--sur-encre { grid-column: 1; font-size: 17px; }

  .formulaire {
    grid-column: 2;
    grid-row: 1 / -1;
    gap: 14px;
  }

  .champ { font-size: 16px; }
  .bouton { padding: 18px 24px; }
  .bouton__label { font-size: 20px; }

  /* ================================================ home Daybreakers */
  .ouverture {
    height: calc(100svh - var(--h-entete));
    min-height: 700px;
  }

  .ouverture > .hero { min-height: 200px; }

  .hero__texte { padding: 0 48px 40px; gap: 18px; }
  .hero__accroche { font-size: 58px; line-height: 1.05; }
  .hero__intro { font-size: 18px; }

  .ouverture > .ce-que-tu-fais {
    padding: 34px 48px 38px;
    gap: 24px;
  }

  .ce-que-tu-fais {
    padding: 54px 48px 54px;
    gap: 28px;
  }

  .ce-que-tu-fais__liste {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    align-items: start;
  }

  .ce-que-tu-fais__liste li { padding-top: 16px; }
  .ce-que-tu-fais__titre { font-size: 23px; }
  .ce-que-tu-fais p { font-size: 16px; }

  /* --------------------------- coulisses + photo + paliers, une page */
  .page-desktop:has(.paliers) {
    height: calc(100svh - var(--h-entete));
    min-height: 740px;
  }

  .page-desktop > section:has(.puces) {
    flex: none;
    padding: 44px 48px 34px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .page-desktop > section:has(.puces) .bloc-titre {
    padding: 0;
    gap: 12px;
  }

  .puces {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 36px;
    align-items: start;
  }

  .puces li { font-size: 18px; }
  .puces li::before { width: 9px; height: 9px; margin-top: 8px; }

  .photo--daybreakers {
    flex: 1;
    min-height: 160px;
    height: auto;
    margin: 0;
  }

  .photo--daybreakers img { object-position: center 58%; }

  .paliers {
    flex: none;
    padding: 34px 48px 40px;
    gap: 20px;
  }

  .paliers__liste {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .palier {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 132px;
    padding: 22px;
    gap: 16px;
    transition: transform 0.18s ease;
  }

  .palier__nom { font-size: 22px; }

  .palier__avantage {
    font-size: 15.5px;
    text-align: left;
    width: auto;
    max-width: none;
  }

  @media (hover: hover) {
    .palier:hover { transform: translateY(-4px); }
  }

  /* ----------------------- frise + cadre + inscription, une page (sombre) */
  .page-desktop:has(.encadre) { background: var(--encre-2); }

  /* v2 : la frise et le cadre restent sur encre comme le reste du site.
     Le fond craie hérité du desktop d'avant v2 rendait titres et étapes
     illisibles (texte craie sur craie). */
  .page-desktop:has(.encadre) > section:has(.frise) {
    flex: none;
    padding: 34px 48px 24px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .frise--serree {
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
  }

  .frise--serree .frise__contenu { gap: 9px; padding-top: 20px; }
  .frise--serree .frise__num { font-size: 10px; }
  .frise--serree .frise__titre { font-size: 17px; overflow-wrap: anywhere; }
  .frise--serree .frise__texte { font-size: 13.5px; }

  .page-desktop:has(.encadre) > section:has(.frise) .titre-section {
    font-size: 34px;
    line-height: 0.95;
  }

  .encadre {
    flex: none;
    margin: 0;
    padding: 0 48px 26px;
    border: none;
  }

  .encadre__entete {
    border: 2px solid var(--trait);
    border-bottom: none;
    padding: 12px 20px;
    font-size: 11px;
  }

  .encadre__corps {
    border: 2px solid var(--trait);
    border-top: none;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
  }

  .encadre__corps p { font-size: 16px; }
  .mention { padding: 14px 18px; }
  .mention__titre { font-size: 14px; }
  .mention__texte { font-size: 13px; }

  /* Le bloc de contact absorbe le reste de la hauteur d'écran : sur un
     grand moniteur, plus de marge morte sous le formulaire. */
  .page-desktop:has(.encadre) > .contact {
    flex: 1;
    justify-content: center;
    padding: 40px 48px 44px;
    gap: 72px;
  }

  .page-desktop:has(.encadre) .contact__logo { font-size: 26px; }
  .page-desktop:has(.encadre) .contact__accroche { font-size: 34px; }

  /* ------------------------------------------------- héros « Lueur » */
  /* Plein écran comme la home (v3) — remplace les 680 px du handoff v2
     (point ouvert n° 1), qui laissaient volontairement dépasser le haut de
     la section suivante comme indice de scroll. Le chevron reprend ce rôle. */
  .heros {
    min-height: calc(100svh - var(--h-entete));
    justify-content: center;
  }

  .heros__chevron { display: flex; right: 48px; bottom: 34px; width: 44px; height: 44px; }

  .heros__contenu {
    padding: 0 48px;
    max-width: 900px;
    gap: 26px;
  }

  .heros__voile {
    background:
      linear-gradient(180deg, rgba(20, 10, 3, 0.30) 0%, rgba(20, 10, 3, 0) 34%,
                              rgba(20, 10, 3, 0.72) 88%, var(--encre-1) 100%),
      linear-gradient(96deg, rgba(20, 10, 3, 0.95) 0%, rgba(20, 10, 3, 0.84) 32%,
                             rgba(20, 10, 3, 0.36) 62%, rgba(20, 10, 3, 0.50) 100%);
  }

  .heros__lueur { bottom: -18%; height: 72%; }
  .heros__grain { inset: -4%; opacity: 0.12; }

  .heros__surtitre { font-size: 11px; letter-spacing: 0.22em; }
  .heros__titre { font-size: clamp(64px, 6.4vw, 92px); }
  .heros__titre--seul { font-size: clamp(54px, 4.7vw, 68px); line-height: 1; max-width: 1040px; }
  .heros__chapo { font-size: 20px; line-height: 1.5; max-width: 640px; }

  .heros .bouton-ancre { align-self: flex-start; min-width: 410px; }

  .heros--artistes .heros__photo img {
    object-position: 50% 46%;
  }

  /* En desktop, le voile spécifique à Artistes (purement vertical) laisse le
     texte moins soutenu que sur Daybreakers, qui garde le voile standard
     avec son dégradé diagonal assombrissant la gauche. On aligne les deux. */
  .heros--artistes .heros__voile {
    background:
      linear-gradient(180deg, rgba(20, 10, 3, 0.30) 0%, rgba(20, 10, 3, 0) 34%,
                              rgba(20, 10, 3, 0.72) 88%, var(--encre-1) 100%),
      linear-gradient(96deg, rgba(20, 10, 3, 0.95) 0%, rgba(20, 10, 3, 0.84) 32%,
                             rgba(20, 10, 3, 0.36) 62%, rgba(20, 10, 3, 0.50) 100%);
  }

  .heros--daybreakers .heros__voile {
    background:
      linear-gradient(180deg, rgba(20, 10, 3, 0.16) 0%, rgba(20, 10, 3, 0) 34%,
                              rgba(20, 10, 3, 0.55) 88%, var(--encre-1) 100%),
      linear-gradient(96deg, rgba(20, 10, 3, 0.86) 0%, rgba(20, 10, 3, 0.68) 32%,
                             rgba(20, 10, 3, 0.18) 62%, rgba(20, 10, 3, 0.26) 100%);
  }


  /* -------------------------------------------------------- pied de page */
  .pied {
    padding: 40px 48px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
  }

  .pied__lien--desktop { display: inline; }
  .pied__liens { gap: 22px; font-size: 11px; }

  /* ------------------------------------------- pages de texte long */
  .doc {
    padding: 72px 48px 88px;
    max-width: 780px;
    margin-inline: auto;
    gap: 40px;
  }

  .doc__titre { font-size: 56px; }
  .doc__soustitre { font-size: 20px; }
  .doc__texte, .doc__fiche dd { font-size: 17px; }
  .doc__bloc { padding-top: 24px; gap: 14px; }
  .doc__bloc--mention { padding: 24px 26px 26px; }

  .doc__fiche > div {
    display: grid;
    grid-template-columns: 210px 1fr;
    align-items: baseline;
    gap: 0 24px;
  }

  .doc__fiche dt { font-size: 11px; }

}

/* ==========================================================================
   Apparition au scroll — desktop uniquement, et jamais si l'utilisateur
   a demandé moins d'animations.
   ========================================================================== */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
                transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  [data-reveal].est-visible {
    opacity: 1;
    transform: none;
  }
}

/* Consentement : une ligne discrète sous le bouton de chaque formulaire. */
.consentement {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--clair-2);
  text-wrap: pretty;
}

.consentement a { color: var(--craie); text-decoration: underline; text-underline-offset: 2px; }

.formulaire--heros .consentement { max-width: 380px; }

@media (min-width: 1024px) {
  .formulaire--heros .consentement { max-width: 420px; font-size: 12.5px; }
}

/* Page de remerciement : bouton Instagram. */
.merci__insta { margin-top: 6px; max-width: 420px; }