/* ── Section « La promesse » — home-promesse.css ──────────── */

.r2l-promesse {
  position: relative;
  /* Halo blanc en tête sur sable-1 partagé avec .r2l-exp → ligne de couture
     douce à la jointure Expérience ↔ Promesse (miroir de .r2l-histoire). */
  background:
    radial-gradient(120% 80% at 50% -10%, #fff 0%, rgba(255,255,255,0) 55%),
    var(--r2l-sable-1);
  color: var(--r2l-charbon);
  padding: calc(var(--r2l-rythme-intra) / 2) 0 var(--r2l-rythme-inter);
}

/* En-tête */
.r2l-promesse__intro { max-width: 680px; }

.r2l-promesse__title {
  font-family: var(--r2l-font-titres);
  font-weight: 700;
  font-size: clamp(2.1rem, 5.2vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  margin: 1.1rem 0 0;
}

.r2l-promesse__accent { color: var(--r2l-terre-sec); }

.r2l-pct { margin-left: .14em; } /* espace fine « 100 % » */

.r2l-promesse__lead {
  font-size: clamp(1.02rem, 1.7vw, 1.18rem);
  line-height: 1.62;
  color: var(--r2l-terre-corps);
  max-width: 600px;
  margin: 1.1rem 0 0;
}

/* Grille 2 colonnes : visuel (large) + points (étroit) */
.r2l-promesse__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* ── Visuel + card profil ── */
.r2l-promesse__visual {
  position: relative;
  margin: 0;
}

.r2l-promesse__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3.05;
  object-fit: cover;
  border-radius: 18px;
  background: #cdd3c8;
  /* Pas de box-shadow : crée un bandeau visible sous la card via backdrop-filter.
     Le bas est fondu via mask-image pour effacer l'arête dure. */
  -webkit-mask-image: linear-gradient(to top, transparent 0, black 28px);
  mask-image: linear-gradient(to top, transparent 0, black 28px);
}

/* Vignette basse : fondu sombre qui masque l'arête du border-radius
   au backdrop-filter de la card profil. z-index:1 → sous la card. */
.r2l-promesse__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(to top,
    rgba(16,11,9,.72) 0%,
    rgba(16,11,9,.12) 36%,
    transparent 54%);
  pointer-events: none;
  z-index: 1;
}

/* Overhang symétrique vers le coin bas-droit : déborde du bas ET de la
   droite de la même valeur D (var(--r2l-s-4) = 32px). Aucun débordement
   à gauche — le bord gauche reste sur l'image avec une marge propre. */
.r2l-promesse__visual .r2l-profil {
  position: absolute;
  left: auto;
  right: calc(-1 * var(--r2l-s-4));
  bottom: calc(-1 * var(--r2l-s-4));
  z-index: 2;
}

/* ── Points 01–03 ── */
.r2l-point {
  position: relative;
  border-top: 1px solid rgba(44,40,42,.14);
  padding-top: 1.3rem;
}

.r2l-point + .r2l-point { margin-top: 1.8rem; }

/* Index numéroté posé sur le filet, fond sable qui masque la règle */
.r2l-point__num {
  position: absolute;
  top: -.72em;
  left: 0;
  font-family: var(--r2l-font-titres);
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .03em;
  color: var(--r2l-terre-sec);
  background: var(--r2l-sable-1);
  padding-right: 10px;
}

.r2l-point h3 {
  font-family: var(--r2l-font-titres);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: -.01em;
  margin: 0 0 .5rem;
  color: var(--r2l-charbon);
}

.r2l-point p {
  margin: 0;
  font-size: .97rem;
  line-height: 1.6;
  color: var(--r2l-terre-corps);
}

/* ── Responsive ── */
@media (max-width: 880px) {
  .r2l-promesse__grid {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 6vw, 3rem);
  }

  /* position:relative (PAS static) : un élément statique ignore z-index → le
     ::after (voile sombre z-index:1) se peignait PAR-DESSUS le bas de la card,
     voilant chiffres et footer. Positionnée, la card garde z-index:2 (base) et
     repasse au-dessus du voile. margin négative = chevauchement sur la photo. */
  .r2l-promesse__visual .r2l-profil {
    position: relative;
    margin: -46px auto 0;
    left: auto;
    right: auto;
    bottom: auto;
    /* En pile, la card ne repose plus sur la zone sombre de la photo mais sur le
       fond sable clair : verre quasi opaque pour garder le contraste du texte. */
    background: linear-gradient(155deg, rgba(28,22,21,.94) 0%, rgba(16,11,9,.93) 100%);
  }

  /* Textes faibles (conçus pour du verre sur photo sombre) forcés en OPACITÉ
     PLEINE : en pile sur fond clair, l'opacité réduite devenait illisible.
     Spécificité (0,3,0) pour battre les règles de base `.r2l-profil .rp-*`
     définies plus bas dans le fichier. */
  .r2l-promesse__visual .r2l-profil .rp-note   { color: rgb(247,243,238); }
  .r2l-promesse__visual .r2l-profil .rp-axis   { color: rgb(247,243,238); }
  .r2l-promesse__visual .r2l-profil .rp-rhythm { color: rgb(247,243,238); }
  .r2l-promesse__visual .r2l-profil .rp-rhythm b { color: rgb(247,243,238); }
  .r2l-promesse__visual .r2l-profil .rp-k      { color: rgb(247,243,238); }
  .r2l-promesse__visual .r2l-profil .rp-v      { color: rgb(247,243,238); }
  .r2l-promesse__visual .r2l-profil .rp-v i    { color: var(--rp-orange); }
}

@media (max-width: 640px) {
  /* Photo moins haute → le widget « Profil d'étape » arrive plus tôt. */
  .r2l-promesse__visual img { aspect-ratio: 16 / 11; }

  /* Card remontée davantage sur la photo (le fond opaque garantit la lisibilité). */
  .r2l-promesse__visual .r2l-profil { margin-top: -64px; }
}


/* ════════════════════════════════════════════════════════════
   CARD « Profil d'étape » (.r2l-profil)
   Verre sombre — tracé orange + Col + haltes crème.
   ⚠️ Orange du tracé + Col = data-viz d'un composant fermé.
      Exception ratifiée (voir §11).
   ════════════════════════════════════════════════════════════ */

.r2l-profil {
  --rp-orange: #F55F2A;
  --rp-clair:  #F7F3EE;
  --rp-muted:  #C2A988;
  --rp-line:   rgba(247,243,238,.14);

  width: 100%;
  max-width: 430px;
  font-family: var(--r2l-font-corps);
  color: var(--rp-clair);
  border-radius: 16px;
  padding: 16px 18px 15px;
  background: linear-gradient(155deg, rgba(28,22,21,.60) 0%, rgba(16,11,9,.50) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 24px 52px -24px rgba(0,0,0,.62);
}

.r2l-profil * { margin: 0; padding: 0; box-sizing: border-box; }

.r2l-profil .rp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.r2l-profil .rp-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rp-muted);
}

.r2l-profil .rp-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rp-orange);
  box-shadow: 0 0 0 3px rgba(245,95,42,.22);
  flex-shrink: 0;
}

.r2l-profil .rp-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--rp-orange);
  background: rgba(245,95,42,.16);
  padding: 6px 10px;
  border-radius: 99px;
  white-space: nowrap;
}

/* ── Graphe de profil ── */
.r2l-profil .rp-chart {
  position: relative;
  margin: 26px 0 9px;
}

.r2l-profil .rp-chart svg {
  width: 100%;
  /* Ratio préservé (preserveAspectRatio meet + height auto) : sans ça, le
     scale horizontal non-uniforme écrasait les labels sur mobile étroit. */
  height: auto;
  aspect-ratio: 380 / 74;
  display: block;
  overflow: visible;
}

/* Tracé principal — draw-on via .r2l-draw (brique partagée) */
.r2l-profil .rp-line {
  fill: none;
  stroke: var(--rp-orange);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 520;  /* longueur totale du tracé */
}

/* Décalage de l'animation draw après le début du reveal */
.is-revealed .r2l-promesse .r2l-draw,
.is-revealed .r2l-profil .r2l-draw {
  animation-delay: .15s;
}

/* Col (point haut orange) — visible no-JS, fade-in sous JS après draw */
.r2l-profil .rp-col { opacity: 1; }
html.js .is-revealed .r2l-profil .rp-col {
  animation: rp-col-fade .5s ease 1s both;
}
@keyframes rp-col-fade { from { opacity: 0; } to { opacity: 1; } }

.r2l-profil .rp-peak {
  fill: #fff;
  stroke: var(--rp-orange);
  stroke-width: 2.5;
}

/* Halo ping sur le Col */
.r2l-profil .rp-peak-halo {
  fill: var(--rp-orange);
  opacity: .25;
  transform-origin: center;
  animation: rp-ping 2.6s ease-out infinite;
}
@keyframes rp-ping {
  0%   { transform: scale(.5); opacity: .4; }
  70%, 100% { transform: scale(2.2); opacity: 0; }
}

/* Haltes crème — cascade séquentielle (delays sur l'élément en PHP) */
.r2l-profil .rp-dot-halte { fill: var(--rp-clair); stroke: rgba(247,243,238,.55); stroke-width: 1.4; }
.r2l-profil .rp-callout    { font-size: 9px; font-weight: 700; fill: var(--rp-clair); }
.r2l-profil .rp-callout-bg { fill: rgba(18,13,11,.82); }
.r2l-profil .rp-callout-bg.is-col { fill: rgba(245,95,42,.92); }

.r2l-profil .rp-halte { transform-box: fill-box; transform-origin: center; }

html.js .r2l-profil .rp-halte { opacity: 0; }
.is-revealed .r2l-profil .rp-halte {
  animation: rp-halte-in .55s var(--r2l-ease-reveal) forwards;
  /* animation-delay posé via style inline sur chaque <g> */
}
@keyframes rp-halte-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Pied de graphe ── */
.r2l-profil .rp-axis {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(247,243,238,.55);
  padding-top: 1px;
}

.r2l-profil .rp-rhythm {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(247,243,238,.6);
}

.r2l-profil .rp-rhythm b     { font-weight: 700; color: rgba(247,243,238,.92); }
.r2l-profil .rp-rdot {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rp-clair);
  box-shadow: 0 0 0 3px rgba(247,243,238,.12);
}

/* ── Stats ── */
.r2l-profil .rp-stats {
  display: flex;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--rp-line);
}

.r2l-profil .rp-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 10px;
}

.r2l-profil .rp-stat + .rp-stat {
  padding-left: 14px;
  padding-right: 0;
  border-left: 1px solid var(--rp-line);
}

.r2l-profil .rp-v {
  font-family: var(--r2l-font-titres);
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--rp-clair);
}

.r2l-profil .rp-v i {
  font-style: normal;
  font-size: .62em;
  color: var(--rp-orange);
  margin-right: 1px;
}

.r2l-profil .rp-k {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rp-muted);
}

.r2l-profil .rp-note {
  margin-top: 11px;
  font-size: 9.5px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(247,243,238,.40);
}

/* ── A11y — mouvement réduit ── */
@media (prefers-reduced-motion: reduce) {
  html.js .r2l-profil .rp-halte { opacity: 1 !important; }
  .r2l-profil .rp-peak-halo     { animation: none; opacity: .2; }
  html.js .is-revealed .r2l-profil .rp-col { animation: none; opacity: 1; }
}