/*
 * Styles propres à l'accueil (front-page.php).
 * Chargé uniquement sur is_front_page() — voir functions.php.
 *
 * La nav (barre fixe + menu hamburger) et le footer vivaient ici à
 * l'origine mais ont été déplacés dans nav.css et footer.css, communs à
 * toutes les pages — voir ces fichiers.
 */

/* ══════════ HÉRO ══════════ */
.bcc-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--teal-dark);
}
.bcc-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: saturate(.72) brightness(.9);
}
.bcc-hero__overlay-1 { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(22,41,47,0.9) 0%, rgba(30,58,68,0.62) 46%, rgba(47,85,98,0.28) 100%); mix-blend-mode: multiply; }
.bcc-hero__overlay-2 { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,41,47,0.35) 0%, transparent 30%, transparent 60%, rgba(22,41,47,0.55) 100%); }
.bcc-hero__overlay-3 { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,41,47,0.72) 0%, rgba(22,41,47,0.5) 34%, transparent 62%); }

.bcc-hero__content {
  position: relative;
  z-index: 3;
  max-width: 1280px;
  margin: 0 auto;
  padding: 7rem 2rem 4rem;
  width: 100%;
}
.bcc-hero__inner { max-width: 720px; }

.bcc-hero__eyebrow {
  margin-bottom: 1.6rem;
  font-size: .72rem;
  letter-spacing: .24em;
}

.bcc-hero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.9rem, 6.2vw, 5.1rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: #fff;
  max-width: 13ch;
  margin-bottom: 1.8rem;
}
.bcc-hero__title em { font-style: italic; font-weight: 300; color: var(--sage-light); }

.bcc-hero__lead {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.75;
  max-width: 44ch;
  margin-bottom: 2.6rem;
}

.bcc-hero__ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

.bcc-hero__scroll-cue {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: rgba(255,255,255,0.6);
  animation: bccBob 2.4s ease-in-out infinite;
}

@media (max-width: 700px) {
  .bcc-hero__content { padding: 6.5rem 1.25rem 3.5rem; }
  .bcc-hero__title { max-width: 15ch; }
  .bcc-hero__lead { font-size: 1.02rem; }
}

@media (max-width: 480px) {
  .bcc-hero__ctas { flex-direction: column; align-items: stretch; }
  .bcc-hero__ctas .bcc-btn { text-align: center; }
  .bcc-hero__scroll-cue { display: none; }
}

/* ══════════ ACCROCHE ══════════ */
.bcc-accroche { background: var(--cream); padding: 7rem 2rem; }

@media (max-width: 700px) {
  .bcc-accroche { padding: 4.5rem 1.25rem; }
}
.bcc-accroche__lead {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--ink);
}
.bcc-accroche__lead em { font-style: italic; color: var(--teal); }
.bcc-accroche__underline {
  position: relative;
  display: inline-block;
}
.bcc-accroche__underline svg {
  position: absolute;
  left: 0;
  bottom: -0.16em;
  width: 100%;
  height: .42em;
  overflow: visible;
  opacity: .5;
  pointer-events: none;
}

/* ══════════ ENTREPRISE ══════════ */
.bcc-entreprise__body p { color: var(--ink); line-height: 1.85; max-width: 52ch; }
.bcc-entreprise__body p + p { margin-top: 1.3rem; }
.bcc-entreprise__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2.3rem, 4vw, 3.4rem); line-height: 1.05; letter-spacing: -.015em; color: var(--ink); max-width: 12ch; margin-bottom: 1.8rem; }
.bcc-entreprise__title em { font-style: italic; color: var(--teal); }
.bcc-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.4rem; }

/* ══════════ SAVOIR-FAIRE (intro) ══════════ */
.bcc-intro {
  background: var(--cream);
  padding: clamp(2rem, 5vh, 3.5rem) 0 clamp(3.5rem, 7vh, 5rem);
}
.bcc-intro__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 2.5rem clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.bcc-intro__heading { padding: 0 clamp(2rem, 4.5vw, 5rem); }
.bcc-intro__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.3rem, 4.4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
}
.bcc-intro__title em { font-style: italic; color: var(--teal); }
.bcc-intro__lead {
  color: var(--ink-light);
  line-height: 1.85;
  font-size: 1.05rem;
  max-width: 42ch;
  margin-top: 1.8rem;
}

/* Table des 3 pôles : numéro + nom + geste associé, séparés par des filets
 * fins — sans fond coloré (charte "une couleur = un pôle", brief §7 : pas
 * question de faire passer cette table pour l'aperçu d'un pôle en
 * particulier). Les libellés de droite reprennent le mot déjà mis en
 * exergue dans le titre <em> de chaque pilier plus bas sur la page — même
 * vocabulaire, une seule source de vérité éditoriale. */
.bcc-intro__map {
  padding: 0 clamp(2rem, 4.5vw, 5rem);
  border-top: 1px solid var(--cream-dark);
}
.bcc-intro__map-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.25rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--cream-dark);
  text-decoration: none;
}
.bcc-intro__map-n {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-muted);
  flex: none;
}
.bcc-intro__map-label {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  color: var(--ink);
  transition: color .2s ease;
}
.bcc-intro__map-tag {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-left: auto;
  flex: none;
}
.bcc-intro__map-item:hover .bcc-intro__map-label,
.bcc-intro__map-item:focus-visible .bcc-intro__map-label { color: var(--teal); }

@media (max-width: 700px) {
  .bcc-intro { padding: 2rem 0 3rem; }
  .bcc-intro__heading { padding: 0 1.25rem; }
  .bcc-intro__map { padding: 0 1.25rem; }
  .bcc-intro__lead { margin-top: 1.4rem; }
  .bcc-intro__map-tag { margin-left: 0; flex-basis: 100%; }
}

/* ══════════ PILIERS (Laboratoire / Fabrication / Conditionnement) ══════════ */
.bcc-pillar__index { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.6rem; }
.bcc-pillar__index-n { font-family: var(--mono); font-size: 1.5rem; font-weight: 500; letter-spacing: .02em; }
.bcc-pillar__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2.3rem, 4vw, 3.4rem); line-height: 1.05; letter-spacing: -.015em; max-width: 12ch; margin-bottom: 1.5rem; }
.bcc-pillar__lead { line-height: 1.85; max-width: 50ch; margin-bottom: 1.8rem; }
.bcc-pillar__cta { align-self: flex-start; }

/* Filets latéraux séparant texte et photo — hérités de l'ancien placeholder
   vidéo, conservés comme repère visuel entre les deux colonnes. */
.bcc-pillar__video--sage  { border-right: 1px solid rgba(143,162,153,0.5); }
.bcc-pillar__video--teal  { border-left: 1px solid rgba(255,255,255,0.18); }
.bcc-pillar__video--beige { border-right: 1px solid rgba(220,199,184,0.28); }

.bcc-pillar__corner-motif {
  position: absolute;
  left: -9%;
  bottom: -12%;
  width: min(46vw, 560px);
  height: auto;
  pointer-events: none;
}

/* 860px = point de bascule réel de la grille (2 × minmax(430px,1fr)) : on
   l'explicite avec grid-template-columns:1fr plutôt que de compter sur
   l'auto-fit (l'ancien seuil à 900px ne correspondait pas à ce calcul et
   créait une zone flottante entre 861 et 900px).
   On détache aussi la hauteur de 100svh : empilé, texte + vidéo (qui avait
   son propre min-height:54svh + height:100%) dépassait largement un écran,
   cassant le repère "une section = un écran" du scroll-snap (cf. base.css)
   et provoquant le chevauchement visuel avec la section suivante. La vidéo
   passe en aspect-ratio pour garder une hauteur raisonnable et prévisible.
   Rien ici ne s'applique au-dessus de 860px : le desktop est inchangé. */
@media (max-width: 860px) {
  .bcc-pillar {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  /* Ordre texte -> vidéo forcé pour TOUS les piliers, y compris les
     `--reverse` (Laboratoire, Conditionnement) qui inversent l'ordre en
     desktop via `order` — règle du brief : le texte se lit avant la vidéo. */
  .bcc-pillar__text,
  .bcc-pillar--reverse .bcc-pillar__text {
    order: 1;
    padding: clamp(3rem, 9vw, 4rem) 1.5rem 2.5rem;
  }

  /* aspect-ratio (plutôt que padding-bottom) provoquait un panneau photo à
     hauteur 0 sur Safari/WebKit iOS (jamais reproduit en émulation desktop
     Chrome, même mode responsive — toujours Blink) : combiné à
     align-items:stretch hérité de .bcc-pillar (grid, non réinitialisé ici)
     et à height:auto explicite sur ce même élément, WebKit calcule une
     hauteur intrinsèque de 0 au lieu de dériver la hauteur du ratio -
     bug connu de l'interaction aspect-ratio / stretch / height:auto sur les
     items de grille. Remplacé par la technique padding-bottom (ratio en %
     de la largeur, indépendante de aspect-ratio et de l'alignement du
     parent) - seule la valeur en % change, .bcc-pillar__photo
     (position:absolute; inset:0) n'a pas besoin d'être touché. Cf. CHANGELOG
     2026-09-14 "Photos des 3 piliers invisibles sur téléphone". */
  .bcc-pillar__video,
  .bcc-pillar--reverse .bcc-pillar__video {
    order: 2;
    height: 0;
    min-height: 0;
    padding-bottom: 75%; /* 4:3 */
  }

  /* Les filets latéraux séparaient les 2 colonnes côte à côte — inutiles
     (et visuellement faux) une fois les blocs empilés. */
  .bcc-pillar__video--sage,
  .bcc-pillar__video--teal,
  .bcc-pillar__video--beige {
    border: none;
  }

  .bcc-pillar__corner-motif { width: min(60vw, 320px); }
}

/* Couleur de texte par pôle — dérivée du fond de la section (une couleur = un pôle). */
.bcc-pillar--sage { background: var(--sage-wash); }
.bcc-pillar--sage .bcc-pillar__title     { color: var(--ink); }
.bcc-pillar--sage .bcc-pillar__title em  { color: #5f7a6e; }
.bcc-pillar--sage .bcc-pillar__lead      { color: var(--ink-light); }
.bcc-pillar--sage .bcc-pillar__index-n   { color: var(--sage); }

.bcc-pillar--teal { background: var(--teal); color: #fff; }
.bcc-pillar--teal .bcc-pillar__title     { color: #fff; }
.bcc-pillar--teal .bcc-pillar__title em  { color: #9FC4CE; }
.bcc-pillar--teal .bcc-pillar__lead      { color: rgba(255,255,255,0.78); }
.bcc-pillar--teal .bcc-pillar__index-n   { color: #9FC4CE; }

.bcc-pillar--dark { background: var(--teal-dark); color: #fff; }
.bcc-pillar--dark .bcc-pillar__title     { color: #fff; }
.bcc-pillar--dark .bcc-pillar__title em  { color: var(--beige); }
.bcc-pillar--dark .bcc-pillar__lead      { color: rgba(255,255,255,0.75); }
.bcc-pillar--dark .bcc-pillar__index-n   { color: var(--beige); }

/* ══════════ MOMENT FORT (Encapsulation) + CONTACT — bloc centré partagé ══════════ */
.bcc-feature { padding: 9rem 2rem; }
.bcc-feature__inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; text-align: center; }
.bcc-feature__eyebrow { margin-bottom: 1.8rem; font-size: .7rem; letter-spacing: .24em; }
.bcc-feature__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 auto 2rem;
  max-width: 16ch;
}
.bcc-feature__title em { font-style: italic; color: var(--sage-light); }
.bcc-feature__lead { font-size: 1.12rem; color: rgba(255,255,255,0.78); line-height: 1.8; max-width: 56ch; margin: 0 auto; }
.bcc-feature__note { margin-top: 2.4rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); }
.bcc-feature__ctas { margin-top: 2.6rem; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* Contact : titre/lead un peu plus resserrés qu'Encapsulation. */
.bcc-feature--contact .bcc-feature__title { font-size: clamp(2.6rem, 5vw, 4.2rem); max-width: 14ch; margin-bottom: 1.6rem; }
.bcc-feature--contact .bcc-feature__lead { max-width: 48ch; margin-bottom: 2.6rem; }

@media (max-width: 700px) {
  .bcc-feature { padding: 6rem 1.25rem; }
}

@media (max-width: 480px) {
  .bcc-feature__ctas { flex-direction: column; align-items: stretch; }
  .bcc-feature__ctas .bcc-btn { text-align: center; }
}

/* Encapsulation uniquement : le motif se dessine (pathLength=1 sur les deux
   <path> → dasharray/dashoffset en unité 0-1) et se resserre (1.22 → 1, pas
   un vrai zoom) au fil de --fp, posée en style inline par
   home.js#initFeatureReveal() à chaque scroll — --fp atteint 1 (avec un
   court temps mort avant le vrai milieu du bloc, cf. EARLY_STOP_PX dans
   home.js) quand le milieu du bloc (bcc-feature__buffer haut + contenu +
   bcc-feature__buffer bas, cf. front-page.php) passe au centre du viewport.
   Une fois le tracé terminé, --fpe (0→1) ajoute un tout léger zoom
   supplémentaire (×1.035 max) pendant qu'on quitte le bloc via le buffer
   bas — amplitude et 2 buffers ajoutés suite au retour de Carole Geraci du
   2026-09-15 (animation trop rapide/pas assez de recul). En plus du zoom,
   un léger effet de parallaxe (translateY) fait dériver le motif de 36px
   vers le bas au repos jusqu'à 0 en fin de tracé, puis jusqu'à -24px en
   sortie — pour donner une sensation de profondeur plutôt qu'un simple
   zoom bien centré (demande de Carole Geraci, 2026-09-15). Le texte
   n'apparaît qu'une fois --fp ≥ 0.5 (tracé bien engagé), via
   .bcc-feature--text-visible — transition classique plutôt que scrub
   continu, pour rester lisible même en scroll rapide. --fp/--fpe par
   défaut à 0 (comme [data-reveal] : repose sur JS pour révéler, cf.
   base.css) ; repli complet si prefers-reduced-motion. */
/* Hauteur réduite à 2/3 de sa valeur d'origine (50vh → 33vh) le
   2026-09-16, à la demande de Carole Geraci (moins de recul avant/après
   le bloc, sans revenir au ressenti "trop rapide" du 2026-09-15 qui avait
   motivé les 50vh initiaux — cf. commentaire ci-dessus). Le diviseur du
   zoom de sortie (--fpe) dans home.js#initFeatureReveal() est calé sur
   cette même valeur (vh/3 au lieu de vh/2) pour que le zoom finisse pile
   en bas de ce buffer — à retoucher ensemble si cette hauteur rechange. */
.bcc-feature__buffer { height: calc(100vh / 3); }
/* Téléphone : buffers divisés par 2 (33vh → ~17vh) le 2026-09-18, à la
   demande de Carole Geraci — trop de vide avant/après le bloc sur petit
   écran. Doit rester APRÈS la règle de base ci-dessus (même spécificité :
   l'ancien réglage 30vh, placé plus haut dans le fichier, était écrasé et
   n'avait jamais d'effet). home.js lit la hauteur réelle du buffer pour le
   zoom de sortie, rien à retoucher côté JS si cette valeur change. */
@media (max-width: 700px) {
  .bcc-feature__buffer { height: calc(100vh / 6); }
}

.bcc-feature--reveal-scroll .bcc-motif--center {
  transform:
    translate(-50%, calc(-50% + (1 - var(--fp, 0)) * 36px - var(--fpe, 0) * 24px))
    scale(calc((1.22 - 0.22 * var(--fp, 0)) * (1 + 0.035 * var(--fpe, 0))));
}

.bcc-feature__motif-path {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--fp, 0));
}
/* Téléphone : traits du motif épaissis (16 → 56 unités) le 2026-09-18, à la
   demande de Carole Geraci (« qu'on le voie bien »). Le motif est en
   min(78vw, 820px) sur une viewBox de 5561 unités : à 820px (desktop), 16
   unités font ~2,4px ; à 390px de large (motif ~304px), elles tombaient à
   ~0,9px, quasi invisibles avec l'opacité de 0,16 du trait. 56 unités ≈ 3px
   rendus à 390px. La règle CSS l'emporte sur l'attribut stroke-width du <g>
   (front-page.php), hérité par les deux <path>. */
@media (max-width: 700px) {
  .bcc-feature__motif-path { stroke-width: 56; }
}

/* Petite flèche d'invitation à scrolling dans le buffer haut uniquement
   (premier "demi bloc", avant que le tracé ne commence vraiment) — rebond
   discret en boucle tant qu'elle est visible, puis s'efface une fois le
   tracé bien engagé. Idée de Carole Geraci, 2026-09-15, pour annoncer
   qu'il y a "quelque chose" à découvrir en scrollant.
   Repositionnée le 2026-09-15 (2e retour de Carole Geraci, même jour) du
   bas vers le haut de ce buffer (align-items:flex-start au lieu de
   flex-end) — elle vivait auparavant dans la moitié basse du buffer haut
   ("demi bloc" du bas), n'entrant à l'écran qu'après une bonne partie du
   buffer (50vh) déjà scrollée. Or --fp (tracé) commence à progresser dès
   que le TOUT DÉBUT de la section (donc le haut de ce même buffer) entre à
   l'écran — avec l'ancien positionnement en bas, la flèche n'apparaissait
   qu'à --fp ≈ 0,3, pile le seuil où le fondu de sortie ci-dessous
   commençait déjà : elle se mettait donc à disparaître dès son entrée,
   quasi invisible en usage normal. En la plaçant dans la moitié haute
   ("demi bloc" du dessus) du buffer, elle entre à l'écran bien plus tôt
   (--fp proche de 0, dès les tout premiers pixels de scroll de la
   section) et reste pleinement visible jusqu'à --fp = 0,3 avant le même
   fondu qu'avant — bien plus longtemps qu'auparavant, sans toucher au
   fondu lui-même (toujours calé sur --fp = 0,3→0,5, cf. TEXT_THRESHOLD
   dans home.js). */
.bcc-feature__buffer:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2.4rem;
}
.bcc-feature__hint {
  color: rgba(244, 241, 235, 0.5);
  opacity: calc(1 - min(1, max(0, (var(--fp, 0) - 0.3) * 5)));
  animation: bcc-feature-hint-bounce 1.7s ease-in-out infinite;
  transition: opacity .3s ease;
}
@keyframes bcc-feature-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

/* Léger effet de parallaxe sur le bloc de texte, dans le sens opposé à
   celui du motif (.bcc-motif--center ci-dessus) — même amplitude (36px/
   24px), signe inversé : le texte part 36px plus haut qu'au repos (au lieu
   de plus bas comme le motif), rejoint sa position naturelle pile quand le
   tracé finit, puis dérive encore de 24px vers le bas pendant le zoom de
   sortie (au lieu de vers le haut). Sur le conteneur .bcc-feature__inner
   plutôt que sur chaque enfant, pour rester indépendant de la transition
   d'apparition (opacité/translateY) déjà posée ci-dessous sur ses enfants
   — demande de Carole Geraci, 2026-09-15 (fin de journée). */
.bcc-feature--reveal-scroll .bcc-feature__inner {
  transform: translateY(calc((1 - var(--fp, 0)) * -36px + var(--fpe, 0) * 24px));
}

.bcc-feature--reveal-scroll .bcc-feature__inner > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}
.bcc-feature--reveal-scroll .bcc-feature__inner > *:nth-child(2) { transition-delay: .06s; }
.bcc-feature--reveal-scroll .bcc-feature__inner > *:nth-child(3) { transition-delay: .12s; }
.bcc-feature--reveal-scroll .bcc-feature__inner > *:nth-child(4) { transition-delay: .18s; }

.bcc-feature--reveal-scroll.bcc-feature--text-visible .bcc-feature__inner > * {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .bcc-feature__buffer { height: 0; }
  .bcc-feature__hint { display: none; }
  .bcc-feature--reveal-scroll .bcc-motif--center { transform: translate(-50%, -50%) scale(1); }
  .bcc-feature__motif-path { stroke-dashoffset: 0; }
  .bcc-feature--reveal-scroll .bcc-feature__inner { transform: none; }
  .bcc-feature--reveal-scroll .bcc-feature__inner > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ══════════ ACCOMPAGNEMENT ══════════
   Refonte du 2026-09-15, suite à l'avis demandé à Claude Design sur cette
   section (cf. CHANGELOG) : les 5 étapes n'étaient distinguées que par leur
   numéro, sans rien qui montre qu'il s'agit d'une progression. Remplacé par
   un tracé continu façon courbe de laboratoire — .bcc-path — dont le point
   et le trait se solidifient de l'étape 01 (pointillé fin, anneau ouvert) à
   l'étape 05 (trait plein, point plein, flèche). Regroupement optionnel en
   "phases" (.bcc-phases, sous le tracé — cf. bloc plus bas) porté par la
   clé 'phase' de bcc_get_accompagnement_steps() — voir functions.php. */
.bcc-accompagnement { background: var(--cream); padding: 8rem 2rem; } /* padding-top ramené à sa valeur d'origine le 2026-09-16 (était descendu à 4rem puis 1.7rem dans deux tentatives précédentes, cf. CHANGELOG) : l'utilisatrice a précisé vouloir garder l'espacement initial entre "Notre accompagnement" et la section du dessus — seul l'espace texte→tracé (margin-bottom de .bcc-accompagnement__head / margin-top de .bcc-path, juste en dessous) doit être réduit pour rapprocher le tracé du texte, sans déplacer le titre */
.bcc-accompagnement__head { margin-bottom: .4rem; }
.bcc-accompagnement__row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.bcc-accompagnement__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.08; letter-spacing: -.015em; color: var(--ink); max-width: 16ch; margin: 0 0 1.2rem; }
.bcc-accompagnement__title em { font-style: italic; color: var(--teal); }
.bcc-accompagnement__lead { color: var(--ink-light); line-height: 1.8; margin: 0; max-width: 64ch; }

/* Le tracé : 5 colonnes alignées en bas, chaque étape porte son bloc de
   texte de plus en plus haut (tige verticale croissante) au-dessus d'un
   axe horizontal continu qui passe du pointillé fin au trait plein soutenu.
   Retouché le 2026-09-15 (deuxième passe, avis Claude Design) : le pas de
   34px entre étapes était déjà rigoureusement régulier, mais ne se lisait
   pas comme tel — l'œil suit le HAUT des blocs (le numéro), alors que
   l'ancrage régulier était au bas. Titre et description ont donc chacun
   une hauteur réservée fixe (min-height, 2 lignes / 3 lignes) et le
   crescendo typographique des titres (1,24→1,62rem) est supprimé (taille
   unique 1,3rem) : la progression reste portée par le tracé, le numéro et
   le marqueur, pas par la taille du texte. */
/* Flacon progressif (5 états), un par étape — cf. bcc_get_accompagnement_flacon_svg()
   dans functions.php pour le détail du dessin/recadrage. Pas d'ombre portée :
   essayée puis écartée par l'utilisatrice (« oublions l'idée des ombres avec
   les traits, je préfère sans »), retour du 2026-09-16. */
.bcc-step__flacon {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 1.6rem 1.2rem 0;
} /* même boîte que .bcc-step__body (margin-right identique, y compris son
     exception étape 05) plutôt qu'un centrage sur toute la largeur de la
     colonne — sinon l'icône se retrouve décalée à droite du centre réel de
     la carte pour 01-04 (visible uniquement là où la carte a ce
     margin-right ; 05 n'a jamais eu le problème). Centrage du dessin
     lui-même délégué à ce flex plutôt qu'à des margins auto sur l'icône.
     position:relative posée le 2026-09-17 : elle servait alors à ancrer la
     surcouche de traits .bcc-step__spray, supprimée depuis (les traits du
     flacon 05 vivent désormais dans le <svg> du flacon lui-même, cf. plus
     bas) — conservée car inoffensive et utile à tout futur enfant positionné. */
.bcc-step--5 .bcc-step__flacon { margin-right: 0; }
/* 48px depuis le 2026-09-17 (fin de journée, 3e passe) : Carole Geraci a
   fourni une maquette Illustrator de toute la section (« réajuste tout le
   graphique afin que ça rende comme ça à peu près ») où les flacons sont
   nettement plus petits qu'à l'écran. Mesurée au pixel : sa maquette est un
   montage à l'échelle 1,379 du rendu réel (vérifié sur trois grandeurs
   indépendantes — hauteur/largeur des cartes 0,963 vs 0,964, pas d'escalier
   47/289 vs 34/210, et hauteur de capitale du « 01 » en mono 11px pour 11,5
   attendus), ce qui rend ses mesures directement convertibles. Le dessin y
   fait 54px de large pour une carte de 300 → 39,2px pour une carte de 217,6
   à l'écran, soit 0,727× la taille précédente (66px de boîte, 53,9px de
   dessin). 48px de boîte redonnent exactement ces 39,2px de dessin.
   Historique du jour : 58 → 92 → 66 → 48.
   Le flacon 05 garde une règle dédiée (ci-dessous) : il reste « très
   légèrement plus grand que les autres » comme demandé, et la maquette le
   confirme (rapport 1,15 entre son corps et celui des autres). */
.bcc-step__flacon svg:first-child { display: block; width: 48px; height: auto; flex: none; fill: var(--ink); } /* flex:none : .bcc-step__flacon est un conteneur flex, et le <svg> du flacon 05 est volontairement plus large que sa colonne (cf. règle dédiée ci-dessous) — sans cela il serait comprimé à la largeur de la colonne au lieu de déborder */
/* Flacon 05 : taille exprimée par la largeur du DESSIN, pas par celle de la
   boîte <svg>. Sa viewBox contient aussi les traits « pschitt », qui vont
   beaucoup plus loin que le flacon : celui-ci n'occupe que 30,54 % de la
   largeur de la boîte, contre 83,6 % pour les flacons 01-04 (viewBox recadrée
   au plus juste). Régler width directement en px ne voudrait donc pas dire la
   même chose d'une règle à l'autre — d'où la variable ci-dessous, qui est la
   vraie largeur du flacon à l'écran, et le calc() qui en déduit la largeur du
   <svg>.
   Le flacon 04 n'a plus besoin de ce traitement depuis le 2026-09-17 (fin de
   journée) : son animation a été annulée (« on annule pour le 04 le gif »,
   Carole Geraci) et son nouveau dessin a une viewBox recadrée au plus juste
   comme 01-03 — il repasse donc par la règle générique width:66px ci-dessus,
   et rend exactement la même taille qu'avant (1,294 px par unité dans les deux
   cas, cf. functions.php).
   Repères (largeurs RÉELLES du dessin, pas de la boîte) : flacons 01-04 =
   66px × 42,64/51 ≈ 55px ; flacon 05 = 60px, demande de Carole Geraci du
   2026-09-17 (« légèrement plus petit que ce qu'il est déjà, mais qu'il reste
   très légèrement plus grand que les autres »).
   Débordement : toujours pas un sujet. Le passage à 4 images (2026-09-17, fin
   de journée) élargit la viewBox du 05 de 128 à 159 unités — les images 3 et 4
   projettent les gouttelettes jusqu'à 78,62 unités de l'axe, contre 49,80 pour
   la 1re — donc son <svg> de ~158px à ~196px, encore largement à l'intérieur
   d'une colonne de ~243px (conteneur 1280px / 5). Si un jour des traits
   devaient vraiment dépasser : les resserrer autour de l'axe du bouchon dans
   le SVG lui-même plutôt que de rapetisser le flacon ici. */
.bcc-step--5 .bcc-step__flacon svg:first-child {
  --bcc-flacon05-corps: 46px;                       /* largeur réelle du flacon dessiné — 60px jusqu'au 2026-09-17 (fin de journée), réduit avec les quatre autres pour suivre la maquette de Carole Geraci : elle y mesure 62px pour une carte de 300, soit 45px à l'échelle du site, et reste 1,17× plus large que les flacons 01-04 (1,15 sur la maquette). Les traits « pschitt » suivent mécaniquement (ils vivent dans la même viewBox) : leur envergure passe de 207px à ~159px. Sa maquette les montre un peu plus étalés que ça (≈209px), mais les rapprocher du rapport dessiné supposerait de redimensionner les traits par rapport au flacon dans le SVG lui-même — interdit par sa consigne « identique à 100 % » (cf. CLAUDE.md). Proportions du dessin respectées, envergure absolue légèrement en deçà de la maquette : c'est le compromis assumé. */
  width: calc(var(--bcc-flacon05-corps) / 0.28065); /* ≈ 214px de boîte <svg>, contre ~158px avant le redécoupage des traits du 2026-09-17 (fin de journée) : le diviseur est la part de la boîte occupée par le flacon, et la viewBox s'est élargie de 128 à 173 unités pour loger la 3e image (cf. functions.php). Le flacon, lui, est rendu exactement à la même taille qu'avant — 1,2358 px par unité dans les deux cas. */
}

/* Arrivée des flacons : animation dédiée, différente de celle des cartes
   (translateY seul, cf. [data-reveal] dans base.css) — demande de Carole
   Geraci le 2026-09-17, qui voulait les voir "arriver 1 par 1, sur un
   rythme lent". Le flacon est observé indépendamment de sa carte (son
   propre attribut [data-reveal], data-delay="<n>*250" posé dans
   front-page.php — même mécanisme générique que les cartes, cf. home.js)
   plutôt que via un déclenchement global unique : les deux éléments étant
   au même endroit physique dans la page, ils franchissent le seuil de
   l'IntersectionObserver quasi au même moment lors d'un scroll normal, ce
   qui suffit à obtenir un rythme perçu de 250ms entre flacons sans avoir à
   gérer le cas où la carte n'est pas encore visible (l'opacité du parent
   .bcc-step masquerait sinon l'animation de l'enfant). Easing "retour"
   (léger dépassement) plutôt que la courbe des cartes, pour un effet
   d'atterrissage qui se distingue du reste. */
.bcc-step__flacon[data-reveal] {
  opacity: 0;
  transform: translateY(26px) scale(.82);
  transition: opacity .6s cubic-bezier(.34,1.56,.64,1), transform .6s cubic-bezier(.34,1.56,.64,1);
}
.bcc-step__flacon[data-reveal].is-visible { opacity: 1; transform: none; }

/* Traits « pschitt » du flacon 05 — TROIS images. Elles sont passées à quatre
   puis revenues à trois dans la même soirée, le 2026-09-17 : « je me suis
   rendu compte que 4 c'était beaucoup, puis que mes animations n'étaient pas
   réalistes », Carole Geraci, qui a redessiné les trois jeux de traits d'un
   coup « pour qu'ils aillent tous bien ensemble ». Le flacon 04, lui, n'est plus animé du tout
   (« on annule pour le 04 le gif ») : ses règles .bcc-flacon04__jet ont donc
   disparu d'ici, et son <svg> est redevenu une image fixe (cf. functions.php).
   Montage (inchangé, et c'est lui qui rend le résultat sûr) : le corps du
   flacon est dessiné UNE fois dans le <svg>, débarrassé de tout trait, et
   seuls les 3 groupes de traits s'échangent — aucune surcouche posée
   par-dessus un flacon qui porterait déjà les siens, cause des retours
   répétés de Carole Geraci en début de journée le 2026-09-17
   (« l'ancien modèle est toujours présent », « il y a une image en plus
   par-dessus »). Le flacon étant rigoureusement identique aux 3 poses du
   fichier source et au corps déjà en place (vérifié numériquement : échelle
   1,000000, résidu 0,010 unité), il ne peut ni scintiller ni se décaler
   entre deux images, quoi qu'il arrive au rythme de l'animation.
   Traits actuels : « Fichier 1-50.svg » (2026-09-17, fin de journée), qui
   remplace « dec-05.svg » du même jour.
   Enchaînement en coupe nette (« je veux que ça fasse comme un gif », Carole
   Geraci) : 3 @keyframes séparées, une par groupe, et surtout un step-end
   (au lieu de linear) — l'opacité ne s'interpole alors JAMAIS entre deux
   images-clés, elle tient sa valeur puis saute. Il est donc mathématiquement
   impossible qu'un rendu attrape deux jeux de traits à opacité partielle,
   même sur une seule frame : c'est un vrai cut, jamais un fondu-enchaîné.
   ⚠️ Deux pièges déjà payés, que la forme ci-dessous évite par construction :
   1. NE PAS encadrer chaque bascule de deux images-clés séparées de 0,01
      point de pourcentage (l'ancienne forme « 24.99 %, 25 % »). C'était un
      reste de l'époque pré-step-end, et c'est ce qui avait laissé un trou de
      0,27ms par tour sans aucun groupe affiché. Avec step-end, une seule
      image-clé par bascule suffit et ne laisse aucun trou : la valeur d'un
      groupe est tenue jusqu'à l'image-clé suivante.
   2. Le DERNIER groupe doit avoir une image-clé d'extinction à 100 %, et
      c'est un renversement daté : tant que l'animation BOUCLAIT, il ne
      fallait surtout pas la mettre (le retour à 0 % éteignait ce groupe au
      même instant exactement où le groupe 1 se rallumait ; une extinction
      explicite rouvrait le trou du piège 1). Depuis le passage au tour
      unique + `forwards` (2026-09-17, fin de journée), il n'y a plus de
      bouclage pour éteindre quoi que ce soit : sans cette image-clé, le 3e
      jeu de traits resterait figé à l'écran pour toujours. Si l'animation
      redevenait un jour une boucle infinie, il faudrait la retirer en même
      temps que `forwards`.
   Chaque @keyframes encode directement son propre tiers "allumé" — les trois
   partagent donc exactement la même durée ET le même animation-delay, et se
   relaient dans l'ordre du fichier source (haut → bas). Le délai commun
   (--bcc-reveal-delay) et le tour unique sont expliqués juste au-dessus des
   trois règles, plus bas. Historique des durées : 0,9s par image (2,7s le
   tour) → 0,6s (1,8s) → 0,3s (0,9s le tour, un seul tour) le 2026-09-17.
   Deux valeurs à garder synchronisées si besoin : la durée et le délai des
   trois animation ci-dessous, toujours les trois ensemble — sinon les images
   se chevauchent ou laissent un trou.
   Les traits n'ont pas de couleur propre : ils héritent du fill: var(--ink)
   de .bcc-step__flacon svg:first-child, exactement comme les petites touches
   équivalentes déjà présentes sur le bouchon du dessin — même traitement que
   le reste du flacon. */
.bcc-flacon05__jet { opacity: 0; }
/* Image 1 affichée PAR DÉFAUT, avant même que le flacon soit révélé — demande
   de Carole Geraci le 2026-09-17 (fin de journée) : « je voudrais que dès son
   apparition au flacon 05, on ait direct la première image, comme ça, avec le
   zoom, ça fait l'effet wow ». L'animation démarrait déjà au même instant que
   la transition d'arrivée (les deux sont déclenchées par la même classe
   .is-visible), donc l'image 1 était en principe là dès la 1re frame du zoom ;
   la poser en valeur par défaut le garantit quoi qu'il arrive au déclenchement,
   et évite qu'un flacon pas encore révélé puisse exister sans ses traits. */
.bcc-flacon05__jet--1 { opacity: 1; }
/* UN SEUL TOUR, DÉCLENCHÉ PILE SUR LE « POP » — 2026-09-17 (fin de journée).
   Trois choses changent ici d'un coup, toutes demandées par Carole Geraci :
   « Le timing de l'image qui arrive lorsque le flacon "pop" est la dernière
   image (3), j'aimerais que ce soit la 1. Accélérons le gif, et laissons le
   tourner qu'une seule fois uniquement, au moment du "pop" justement. juste
   pour cet effet de surprise. »

   1. animation-delay: var(--bcc-reveal-delay) — LA correction du bug qu'elle
      décrit. La classe .is-visible est posée par home.js dès que le flacon
      entre dans le viewport, mais son ARRIVÉE visible est retardée par un
      transition-delay (1500ms pour l'étape 05 : 500 + 4×250, cf.
      front-page.php). L'animation, elle, démarrait à l'instant de la classe :
      au moment où le flacon devenait réellement visible, elle en était déjà à
      1500/1800 = 83 % du cycle, donc sur la 3e image — exactement ce qu'elle
      a vu. La même valeur de délai est désormais reportée en variable CSS par
      home.js (--bcc-reveal-delay), donc la séquence commence à la frame même
      du « pop », sur l'image 1, sans jamais dupliquer la valeur ici.
   2. .9s au lieu de 1.8s (0,3s par image au lieu de 0,6s) : « accélérons ».
   3. Plus d'`infinite` : un seul tour, suivi de `forwards`. Le pschitt part
      donc de l'image 1 au « pop », se disperse (2 puis 3) et DISPARAÎT
      complètement — le flacon 05 reste ensuite nu, comme les quatre autres.
      C'est une demande explicite de Carole Geraci, venue juste après :
      « après l'animation, le flacon n'a plus de traits (c'est ce que
      j'aimerais) ». Sans `forwards`, l'élément serait retombé sur ses styles
      de base, donc sur l'image 1 (.bcc-flacon05__jet--1 { opacity: 1 }
      ci-dessus) : des traits resteraient affichés en permanence. C'est bien
      `forwards` + l'image-clé d'extinction à 100 % du 3e groupe (cf.
      @keyframes plus bas) qui, ensemble, laissent le flacon nu. */
.bcc-step__flacon.is-visible .bcc-flacon05__jet--1 { animation: bcc-flacon-jet-1 .9s step-end var(--bcc-reveal-delay, 0ms) 1 forwards; }
.bcc-step__flacon.is-visible .bcc-flacon05__jet--2 { animation: bcc-flacon-jet-2 .9s step-end var(--bcc-reveal-delay, 0ms) 1 forwards; }
.bcc-step__flacon.is-visible .bcc-flacon05__jet--3 { animation: bcc-flacon-jet-3 .9s step-end var(--bcc-reveal-delay, 0ms) 1 forwards; }
/* ⚠️ Les TROIS @keyframes ci-dessous déclarent explicitement leur opacité à
   100 %, y compris quand elle vaut déjà 0 depuis une image-clé précédente.
   Ce n'est pas de la redondance : quand une propriété animée est absente de
   l'image-clé 100 %, CSS en fabrique une implicite à partir du style de base
   de l'élément — et le style de base de .bcc-flacon05__jet--1, c'est
   justement opacity: 1 (l'image affichée avant le « pop », cf. plus haut).
   Avec `forwards`, le 1er jeu de traits se rallumait donc pile à la fin de
   l'animation et y restait, alors que Carole Geraci veut au contraire un
   flacon nu une fois le pschitt passé. Repéré au balayage analytique du
   cycle, pas à l'oeil (505 échantillons, dont le centième de milliseconde
   autour de chaque bascule) — et invisible tant que l'animation bouclait,
   puisque ce rallumage tombait au même instant que le redémarrage du cycle. */
@keyframes bcc-flacon-jet-1 {
  0%      { opacity: 1; }
  33.333% { opacity: 0; }
  100%    { opacity: 0; }
}
@keyframes bcc-flacon-jet-2 {
  0%      { opacity: 0; }
  33.333% { opacity: 1; }
  66.667% { opacity: 0; }
  100%    { opacity: 0; }
}
@keyframes bcc-flacon-jet-3 {
  0%      { opacity: 0; }
  66.667% { opacity: 1; }
  100%    { opacity: 0; } /* image-clé d'extinction INDISPENSABLE depuis le passage au tour unique (2026-09-17, fin de journée) : combinée à `forwards`, c'est elle qui laisse le flacon nu une fois le pschitt terminé. Tant que l'animation bouclait, il fallait au contraire NE PAS la mettre (c'était le bouclage à 0 % qui éteignait ce groupe) — cf. piège 2 réécrit plus haut. */
}
@media (prefers-reduced-motion: reduce) {
  /* Repli statique : flacon NU, sans aucun trait. Le repli était la 1re image
     tant que le pschitt tournait en boucle (il fallait bien représenter
     quelque chose de permanent) ; depuis le 2026-09-17 (fin de journée) le
     pschitt est un évènement ponctuel dont l'état final est justement
     l'absence de traits (demande de Carole Geraci, cf. plus haut). Le repli
     d'une animation ponctuelle, c'est son état final — donc rien. Le flacon
     05 est ainsi exactement dans le même état que les quatre autres pour qui
     ne voit pas les animations. */
  .bcc-step__flacon.is-visible .bcc-flacon05__jet,
  .bcc-step__flacon.is-visible .bcc-flacon05__jet--1 { animation: none; opacity: 0; }
}

.bcc-flacon__c1, .bcc-flacon__c2, .bcc-flacon__c3, .bcc-flacon__c4, .bcc-flacon__c5,
.bcc-flacon__c6, .bcc-flacon__c9, .bcc-flacon__c10, .bcc-flacon__c11 { stroke: var(--ink); stroke-miterlimit: 10; }
.bcc-flacon__c1 { stroke-width: .25px; }
.bcc-flacon__c2, .bcc-flacon__c4 { stroke-width: .5px; }
.bcc-flacon__c3, .bcc-flacon__c5, .bcc-flacon__c8 { stroke-width: .75px; }
.bcc-flacon__c4, .bcc-flacon__c5, .bcc-flacon__c6, .bcc-flacon__c7, .bcc-flacon__c8 { fill: none; }
.bcc-flacon__c7 { stroke-width: 1.4px; }
.bcc-flacon__c7, .bcc-flacon__c8 { opacity: .68; stroke: #fff; }
.bcc-flacon__c9 { stroke-width: .1px; }
.bcc-flacon__c9, .bcc-flacon__c11 { fill: var(--cream-dark); }
.bcc-flacon__c10, .bcc-flacon__c15 { fill: var(--sage-wash); }
.bcc-flacon__c12 { opacity: .13; }
.bcc-flacon__c12, .bcc-flacon__c13, .bcc-flacon__c14 { fill: #fff; }
.bcc-flacon__c13 { opacity: .59; }
.bcc-flacon__c16 { fill: var(--teal-light); }

.bcc-path { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; margin-top: -3rem; } /* négatif depuis le 2026-09-16 (2e ajustement du jour) : Carole Geraci a fourni une maquette Illustrator montrant un chevauchement volontaire entre le texte d'intro et le haut du tracé (flacons 04/05) — le rapprochement à .4rem posé plus tôt le même jour (cf. CHANGELOG, entrée "remonté une 2e fois") restait un simple rapprochement, sans chevauchement. Valeur choisie par comparaison visuelle directe (Docker local, DevTools) avec la maquette : les flacons 01-03 restent sous le texte (déjà décalés vers le bas par le pas d'escalier), seuls 04 et 05 remontent visiblement dans la bande verticale du texte, comme sur la maquette. Porté de -3rem à -6.4rem le 2026-09-17 (fin de
     journée) avec la nouvelle maquette Illustrator de toute la section : la
     réduction des flacons (cf. .bcc-step__flacon svg plus haut) remonte déjà
     mécaniquement les cartes d'environ 34px (le flacon 05, le plus haut de la
     grille, fixe la hauteur de la rangée), il restait donc ~54px à rattraper.
     Valeur obtenue en mesurant sur sa maquette l'écart entre le bas du texte
     d'intro et le haut de la carte 01, rapporté à la largeur d'une carte
     (247/300 = 0,823) et reporté sur le rendu réel — plutôt qu'à l'oeil.
     Le -6.4rem vit dans la media query juste en dessous, pas ici : voir
     pourquoi. */

/* Le chevauchement fort de la maquette n'est posé qu'à partir de 1344px, et
   ce seuil n'est pas arbitraire : c'est la largeur à laquelle .bcc-container
   atteint enfin son maximum (1216px + 2×64px de marges). Au-dessus, les cinq
   colonnes font 243px, les descriptions tiennent dans la réserve de
   .bcc-step__desc et les CINQ cartes font exactement la même hauteur (210px,
   vérifié de 1344 à 1800px) — l'escalier est régulier et les flacons se
   rangent en marches de 34px, comme sur la maquette.
   En dessous, le conteneur rétrécit, les descriptions débordent leur réserve
   et les cartes prennent des hauteurs différentes d'une étape à l'autre.
   Comme chaque carte est ancrée par le BAS, une carte plus haute remonte son
   flacon d'autant : à 1090px le flacon 03 se retrouve plus haut que le 04
   (l'escalier s'inverse) et vient buter dans le texte d'intro. Ce défaut est
   antérieur à cette maquette (mesuré aussi avec l'ancien -3rem : flacon 03 à
   252px pour un texte qui descend à 287px), mais un -6.4rem généralisé
   l'aggraverait de ~40px. Le -3rem de la règle ci-dessus reste donc en place
   sur cette bande 1081→1343px : statu quo, ni mieux ni pire qu'avant.
   ⚠️ À traiter un jour à la racine (égaliser la hauteur des cinq cartes) —
   pas ici, ce serait une refonte de la grille. */
@media (min-width: 1344px) {
  .bcc-path { margin-top: -6.4rem; }
}
.bcc-step { position: relative; display: flex; flex-direction: column; justify-content: flex-end; }
.bcc-step__phase { display: none; } /* affichée uniquement sous 1080px, voir media query */
.bcc-step__n { display: block; font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .14em; color: var(--ink-light); margin-bottom: .7rem; }
.bcc-step__title { font-family: var(--serif); font-weight: 300; font-size: 1.3rem; line-height: 1.16; min-height: 3.02rem; letter-spacing: -.01em; color: var(--ink); margin-bottom: .7rem; }
.bcc-step__title em { font-style: normal; color: inherit; } /* contrairement aux autres titres em (H2) du site, ce titre d'étape doit rester visuellement identique aux 4 autres — demande explicite de l'utilisatrice, cf. CHANGELOG */
.bcc-step__desc { color: var(--ink-light); font-size: .86rem; line-height: 1.65; min-height: 5.676rem; text-wrap: pretty; max-width: 46ch; } /* 4 lignes réservées (.86rem × 1.65 × 4), pas 3 : les textes 02/03 tiennent réellement sur 4 lignes et dépassaient l'ancienne réserve de 3, ce qui rendait ces deux cartes plus hautes que les autres et cassait le pas régulier de l'escalier (34px partout ailleurs) — cf. commentaire plus haut sur le rôle de min-height dans ce tracé */
.bcc-step__body {
  padding: 1.6rem;
  margin-right: 1.6rem;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 14px 34px rgba(26,46,53,.05);
} /* carte blanche derrière chaque étape — demande utilisatrice du 2026-09-15,
     cf. précédent .bcc-stat (carte claire sur fond de teinte différente,
     section Preuves & chiffres) ; marge droite (au lieu du padding-right
     d'origine) pour garder un espace visible entre deux cartes adjacentes,
     la carte elle-même n'a donc plus besoin de ce padding pour "respirer" */
.bcc-step--5 .bcc-step__body { margin-right: 0; } /* dernière colonne : pas de carte suivante, on reste au ras du bord droit du tracé comme avant */

.bcc-step__stem { position: absolute; left: 0; bottom: 1px; width: 1px; background: rgba(47,85,98,.2); }
.bcc-step__stem::before { content: ""; position: absolute; top: 0; left: 0; width: 7px; height: 1px; background: inherit; } /* petite équerre en tête de tige — rend le pas régulier visible, pas seulement exact */
.bcc-step__axis { height: 0; border-top: 1px dashed rgba(47,85,98,.4); }
.bcc-step__marker {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--sage);
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bcc-step__marker-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.bcc-step__arrow { position: absolute; right: -2px; bottom: 0; transform: translate(50%, 50%); width: 11px; height: 13px; color: var(--teal-dark); }
/* Petit rebond une fois la section révélée — repris le 2026-09-17 à la
   demande de Carole Geraci (envisagé mais pas fait lors de sa
   réactivation le 2026-09-16). Démarre après un délai pour laisser le
   temps à l'atterrissage du flacon 05 et à ses traits de se jouer
   d'abord (cf. .bcc-step__flacon / .bcc-flacon05__jet plus haut). */
@media (prefers-reduced-motion: no-preference) {
  .bcc-step--5.is-visible .bcc-step__arrow { animation: bcc-arrow-nudge 1.6s ease-in-out 2.6s infinite; } /* 2.6s (et non 2s) depuis le 2026-09-17, fin de journée : le pschitt du flacon 05 démarre maintenant à 1500ms (son délai d'arrivée) et dure 900ms — il se termine donc à 2,4s, alors qu'il tenait dans les 2s de l'ancienne boucle. Le délai d'ici n'a qu'un rôle : laisser ce pschitt finir avant que la flèche ne bouge. */
}
@keyframes bcc-arrow-nudge {
  0%, 100% { transform: translate(50%, 50%); }
  50% { transform: translate(calc(50% + 4px), 50%); }
}

/* 01 — Cadrage du projet : point de départ, trait le plus fin. */
.bcc-step--1 .bcc-step__body { margin-bottom: 40px; }
.bcc-step--1 .bcc-step__stem { height: 26px; }

/* 02 — Formulation */
.bcc-step--2 .bcc-step__n { color: var(--teal-light); }
.bcc-step--2 .bcc-step__body { margin-bottom: 74px; }
.bcc-step--2 .bcc-step__stem { height: 60px; background: rgba(47,85,98,.24); }
.bcc-step--2 .bcc-step__axis { border-top-color: rgba(47,85,98,.55); }
.bcc-step--2 .bcc-step__marker { border-color: var(--teal-light); color: var(--teal-light); }

/* 03 — Prototypage : l'axe passe du pointillé au trait plein à partir d'ici. */
.bcc-step--3 .bcc-step__n { color: var(--teal); }
.bcc-step--3 .bcc-step__body { margin-bottom: 108px; }
.bcc-step--3 .bcc-step__stem { height: 94px; background: rgba(47,85,98,.3); }
.bcc-step--3 .bcc-step__axis { border-top-style: solid; border-top-color: rgba(47,85,98,.45); }
.bcc-step--3 .bcc-step__marker { width: 12px; height: 12px; border-color: var(--teal); color: var(--teal); }
.bcc-step--3 .bcc-step__marker-dot { width: 6px; height: 6px; }

/* 04 — Industrialisation */
.bcc-step--4 .bcc-step__n { color: var(--teal); font-weight: 600; }
.bcc-step--4 .bcc-step__body { margin-bottom: 142px; }
.bcc-step--4 .bcc-step__stem { height: 128px; background: rgba(47,85,98,.38); }
.bcc-step--4 .bcc-step__axis { border-top-style: solid; border-top-color: rgba(47,85,98,.7); }
.bcc-step--4 .bcc-step__marker { width: 13px; height: 13px; border-color: var(--teal); color: var(--teal); }
.bcc-step--4 .bcc-step__marker-dot { width: 9px; height: 9px; }

/* 05 — Conditionnement & lancement : point d'arrivée, trait plein, flèche. */
.bcc-step--5 .bcc-step__n { color: var(--teal-dark); font-weight: 600; }
.bcc-step--5 .bcc-step__body { margin-bottom: 176px; }
.bcc-step--5 .bcc-step__stem { height: 162px; background: rgba(47,85,98,.45); }
.bcc-step--5 .bcc-step__axis { border-top-style: solid; border-top-color: var(--teal-dark); }
.bcc-step--5 .bcc-step__marker { width: 14px; height: 14px; border: none; background: var(--teal-dark); box-shadow: 0 0 0 4px rgba(47,85,98,.12); }

/* Demande utilisatrice 2026-09-15, 4ᵉ et dernière correction du même jour
   (cf. CHANGELOG pour l'historique complet) : l'écart titre→texte doit
   être identique à l'écart texte→équerre (petite équerre en haut de la
   tige, .bcc-step__stem::before — une constante de 13px pour les 5 étapes
   malgré la tige qui grandit). Ni la valeur seule (13px, 2ᵉ correction) ni
   le fait d'aligner le texte du titre en bas de sa réserve de 2 lignes
   (flex + justify-content:flex-end, 3ᵉ correction) ne suffisaient : cette
   dernière approche déplaçait bien le problème (le vide invisible d'une
   ligne, pour un titre d'une seule ligne comme 01 à 04) mais entre le
   NUMÉRO et le titre plutôt qu'entre le titre et le texte — 01 à 04
   semblaient alors "flotter" loin de leur numéro, alors que 05 (dont le
   titre fait réellement 2 lignes, "Conditionnement &"/"lancement") n'a
   jamais ce vide nulle part. Repéré par l'utilisatrice sur une capture
   simple du tracé complet, sans annotation.
   Fix définitif : le vide d'une ligne (nécessaire pour que la longueur du
   titre n'influence pas le tracé — cf. commentaire de min-height sur
   .bcc-step__title plus haut) va désormais tout en HAUT du bloc, au-dessus
   du numéro (margin-top sur .bcc-step__n), au lieu d'être coincé entre
   deux éléments visibles. .bcc-step__title repasse donc en display:block
   normal et min-height:0 (plus besoin de réserver quoi que ce soit dans le
   titre lui-même) : numéro→titre et titre→texte redeviennent tous deux
   naturels et identiques sur les 5 étapes (comme ils l'ont toujours été
   pour 05), et c'est tout le bloc numéro+titre+texte qui descend d'une
   ligne pour 01 à 04 — sans qu'aucun écart visible entre deux éléments ne
   change. 1.508rem = 1.3rem × 1.16 (font-size × line-height du titre,
   donc la hauteur exacte d'une ligne de titre). Desktop uniquement
   (>1080px) : en rail mobile (media query plus bas) min-height repasse
   déjà à 0 et cette logique de réserve ne s'applique pas. */
@media (min-width: 1081px) {
  .bcc-step__title { min-height: 0; }

  .bcc-step--1 .bcc-step__n,
  .bcc-step--2 .bcc-step__n,
  .bcc-step--3 .bcc-step__n,
  .bcc-step--4 .bcc-step__n { margin-top: 1.508rem; } /* 05 non listée : son titre remplit déjà ses 2 lignes, rien à réserver */

  /* Depuis l'ajout de la carte (cf. CHANGELOG 2026-09-15, cartes blanches) :
     le padding-top uniforme (1.6rem, identique aux côtés) s'ajouterait au
     margin-top ci-dessus pour 01 à 04, doublant leur espace au-dessus du
     numéro par rapport à 05 et au rail mobile — repéré par l'utilisatrice
     à l'oeil sur la version en ligne. Le padding-top de la carte est donc
     réduit d'exactement ce margin-top pour 01 à 04 (desktop uniquement) :
     .092rem + 1.508rem = 1.6rem, même marge visible en haut qu'à gauche/
     droite et qu'en carte 05, sans toucher au margin-top lui-même (sa
     valeur reste la hauteur exacte d'une ligne de titre, cf. commentaire
     plus haut). */
  .bcc-step--1 .bcc-step__body,
  .bcc-step--2 .bcc-step__body,
  .bcc-step--3 .bcc-step__body,
  .bcc-step--4 .bcc-step__body { padding-top: .092rem; }

  .bcc-step--1 .bcc-step__title,
  .bcc-step--2 .bcc-step__title,
  .bcc-step--3 .bcc-step__title,
  .bcc-step--4 .bcc-step__title,
  .bcc-step--5 .bcc-step__title { margin-bottom: 13px; }
}

/* Bandeau de phases, optionnel — désormais SOUS l'axe (plus au-dessus, cf.
   CHANGELOG) : trois accolades de cotation fines façon plan technique,
   plutôt que des étiquettes nues, pour occuper le vide sous le tracé avec
   de la structure plutôt que de l'ornement. */
.bcc-phases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 1.6rem; }
.bcc-phases__bracket { display: block; height: 7px; border-bottom: 1px solid rgba(47,85,98,.28); border-left: 1px solid rgba(47,85,98,.28); border-right: 1px solid rgba(47,85,98,.28); }
.bcc-phases__label {
  display: block;
  margin-top: .7rem;
  text-align: center;
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-light);
}
.bcc-phases__item:last-child .bcc-phases__label { color: var(--teal-dark); } /* écho au point d'arrivée du tracé */
.bcc-phases__item--span-1 { grid-column: span 1; }
.bcc-phases__item--span-2 { grid-column: span 2; }
.bcc-phases__item--span-3 { grid-column: span 3; }

@media (max-width: 1080px) {
  /* Le bandeau de phases et le tracé horizontal n'ont plus la place de se
     déployer : rail vertical, une colonne, étiquette de phase repliée
     devant l'étape qui l'ouvre plutôt que perdue au-dessus. */

  /* Flacon masqué en rail mobile pour l'instant : .bcc-step__marker est
     positionné en top:.2rem, une constante pensée pour s'aligner avec la
     première ligne de texte (étiquette de phase ou numéro selon l'étape,
     cf. affichage conditionnel de .bcc-step__phase) — un flacon de ~115px
     en tête de bloc décalerait ce repère loin du texte. Pas vérifié
     visuellement sur un vrai viewport mobile dans cette session (resize
     de fenêtre indisponible dans cet environnement) ; à revoir avec
     Carole Geraci une fois testable, plutôt que de risquer une régression
     sur un repère déjà finement calé (cf. CLAUDE.md § Responsive, piège
     scroll-snap/marqueurs de ce même tracé). */
  .bcc-step__flacon { display: none; }
  .bcc-phases { display: none; }
  .bcc-path { grid-template-columns: minmax(0, 1fr); margin-top: 3rem; }
  .bcc-step { padding-left: 1.8rem; border-left: 1px solid rgba(47,85,98,.3); }
  .bcc-path .bcc-step__body { margin-right: 0; margin-bottom: 1.9rem; max-width: 56ch; }
  .bcc-step__title { min-height: 0; }
  .bcc-step__desc { font-size: .9rem; min-height: 0; }
  .bcc-step__stem, .bcc-step__axis { display: none; }
  .bcc-step__marker { bottom: auto; top: .2rem; transform: translate(-50%, 0); }
  .bcc-step__phase { display: block; font-family: var(--mono); font-size: .64rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); margin-bottom: .5rem; }

  /* Flèche de fin de tracé (rendue uniquement pour l'étape 05, cf.
     front-page.php) : masquée par défaut avec la tige/l'axe horizontal
     (règle ci-dessus) faute de correspondance en rail vertical. Réactivée
     ici et pivotée à 90° pour pointer vers le bas, recentrée sur la ligne
     verticale du rail (border-left de .bcc-step, même axe que
     .bcc-step__marker) plutôt que sur le bord droit de la carte —
     demande utilisatrice 2026-09-16, la flèche de fin de tracé n'avait pas
     d'équivalent en mobile. */
  .bcc-step__arrow { display: block; right: auto; left: 0; bottom: -1.9rem; transform: translate(-50%, 50%) rotate(90deg); }
}

@media (max-width: 1080px) and (prefers-reduced-motion: no-preference) {
  /* Rebond repris en version verticale (la flèche est pivotée à 90° en
     rail mobile, cf. règle juste au-dessus) — même keyframe de base
     (bcc-arrow-nudge) inutilisable tel quel : son translateX se
     retrouverait tourné en décalage vertical par la rotation du parent,
     ce qui fonctionnerait presque par hasard mais rendrait le calcul
     fragile si l'un des deux devait changer indépendamment ; keyframe
     dédié pour rester explicite. */
  .bcc-step--5.is-visible .bcc-step__arrow { animation: bcc-arrow-nudge-mobile 1.6s ease-in-out 2s infinite; }
}
@keyframes bcc-arrow-nudge-mobile {
  0%, 100% { transform: translate(-50%, 50%) rotate(90deg); }
  50% { transform: translate(-50%, calc(50% + 4px)) rotate(90deg); }
}

@media (max-width: 700px) {
  .bcc-accompagnement { padding: 5rem 1.25rem; }
}

/* ══════════ PREUVES & CHIFFRES ══════════ */
.bcc-preuves { background: var(--sage-wash); padding: 8rem 2rem; }
.bcc-preuves__head { margin-bottom: 3.5rem; }
.bcc-preuves__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.bcc-preuves__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.08; letter-spacing: -.015em; color: var(--ink); max-width: 18ch; margin: 0; }
.bcc-preuves__title em { font-style: italic; color: var(--teal); }
.bcc-preuves__doodle { display: block; width: 46px; height: auto; flex: none; color: var(--sage); }

.bcc-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--cream-dark);
  border: 1px solid var(--cream-dark);
}
.bcc-stat { background: var(--cream); padding: 2.4rem 2rem; }
.bcc-stat__row { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .6rem; }
.bcc-stat__value { font-family: var(--serif); font-weight: 300; font-size: 2.6rem; line-height: 1; color: var(--teal); }
.bcc-stat__unit { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sage); }
.bcc-stat__label { font-size: .9rem; color: var(--ink-light); line-height: 1.5; }

.bcc-certs { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2.4rem; }

@media (max-width: 700px) {
  .bcc-preuves { padding: 5rem 1.25rem; }

  /* Même traitement que "Notre accompagnement" : le dessin rejoint
     l'étiquette "Preuves & réassurance" en haut à droite plutôt que le
     titre. Uniquement sous 700px. */
  .bcc-preuves__head { position: relative; margin-bottom: 2.5rem; }
  .bcc-preuves__doodle {
    position: absolute;
    top: .1em;
    right: 0;
    width: 30px;
  }

  .bcc-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bcc-stat { padding: 1.8rem 1.5rem; }
}

/* Les tailles desktop des cartes de stats débordent dans des cartes deux
   fois plus étroites une fois passé en 2 colonnes (ex. "COSMOS", "+ 1 500
   000" sur 3 lignes) — on compacte tout le contenu des cartes. Bloc unique
   dédié, classes existantes : la version ordinateur (>640px) reste
   inchangée au pixel. */
@media (max-width: 640px) {
  .bcc-preuves { padding: 4.5rem 1.5rem; }

  .bcc-stat { padding: 1.15rem 1rem 1.25rem; }

  .bcc-stat__row {
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
  }
  .bcc-stat__value { font-size: 1.75rem; }
  .bcc-stat__unit {
    font-size: .68rem;
    color: var(--teal); /* la sauge tombe sous le seuil de lisibilité (2,5:1) à cette taille */
  }
  .bcc-stat__label { font-size: .78rem; line-height: 1.45; }

  .bcc-certs { gap: .4rem; }
  .bcc-cert { font-size: .63rem; padding: .4rem .6rem; }
}