/* ════════════════════════════════════════════════════════════════
   CARAT V2 — ACCUEIL (branche v2-refonte-chirurgicale)
   Chargée en dernier, portée par body.v2. Suit les maquettes « V1.5 —
   proposition » envoyées par Samy le 12/11 : hero inchangé mais vivant,
   Signatures en carrousel de grandes cartes, Rituel en scène sombre.
   Décisions : docs/v2/SECTION_DECISIONS.md · raccords : PAGE_CONTINUITY_MAP.md
   ════════════════════════════════════════════════════════════════ */

.v2 { --v2-papier: #F4F0E8; --v2-encre: #211B15; --v2-or: #7C6127; --v2-or-clair: #D9B77C; --v2-nuit: #0D0906; --v2-ease: cubic-bezier(.22, .61, .36, 1); }
.v2 .nw { white-space: nowrap; }

/* ── 1. HERO — matière vivante ; la photographie rouge ne change pas ──
   Trois mouvements discrets, tous coupés si l'on préfère moins d'animation :
   · le satin respire (très lent va-et-vient de l'image) ;
   · des lueurs dorées dérivent en profondeur devant la matière ;
   · la scène glisse légèrement quand on quitte le hero (parallaxe).
   Un vrai mouvement de tissu demanderait une vidéo : voir la file des visuels. */
.v2-lueurs { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.v2-lueurs i {
  position: absolute; left: var(--x); top: var(--y); width: var(--t); height: var(--t); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255, 226, 170, .95) 0%, rgba(240, 190, 110, .5) 36%, rgba(240, 190, 110, 0) 70%);
  filter: blur(var(--flou, 2px));
}
@media (prefers-reduced-motion: no-preference) {
  .v2 .hx__media img { animation: v2-respire 16s ease-in-out infinite alternate; transform-origin: 50% 34%; }
  .v2-lueurs i { animation: v2-lueur var(--d, 11s) ease-in-out var(--r, 0s) infinite; }
  .v2-chevron svg { animation: v2-descend 2.4s var(--v2-ease) infinite; }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .v2 .hx__media { animation: v2-glisse linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
  }
}
@keyframes v2-respire { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.045) translate(-.8%, .6%); } }
@keyframes v2-glisse { to { transform: translateY(5%); } }
@keyframes v2-lueur {
  0% { opacity: 0; transform: translate(0, 24px) scale(.8); }
  30% { opacity: var(--o, .7); }
  70% { opacity: var(--o, .7); }
  100% { opacity: 0; transform: translate(var(--dx, 14px), -70px) scale(1.15); }
}
@keyframes v2-descend { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.v2-chevron { display: grid; place-items: center; width: 48px; height: 44px; margin: 6px auto -8px; color: var(--hx-champagne, #EAD4AD); opacity: .8; }
.v2-chevron svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.v2-chevron:focus-visible { outline: 1px solid currentColor; outline-offset: -6px; border-radius: 4px; }

/* ── 2. RACCORD HERO → COLLECTION ───────────────────────────────
   Le satin s'éclaircit : bordeaux profond → champagne → ivoire. */
.v2 .cro-signatures { position: relative; padding-top: 118px; padding-bottom: 30px; }
.v2 .cro-signatures::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 96px; pointer-events: none;
  background: linear-gradient(to bottom, #080506 0%, #170A0B 14%, #331517 30%, #6B3F35 48%, #B08D6C 66%, #DCC9AC 82%, #EEE5D6 93%, #F4F0E8 100%);
}

/* ── 3. SIGNATURES — carrousel de grandes cartes (mobile) ───────
   Une carte au centre, légèrement agrandie, ses voisines en amorce ;
   défilement natif au pouce. La photographie d'abord, puis le nom, la
   phrase, les trois mots, le prix et un bouton capsule champagne. */
.v2 .cro-signatures__list {
  display: flex; gap: 14px; max-width: none; margin: 0 -22px; padding: 6px 11% 22px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.v2 .cro-signatures__list::-webkit-scrollbar { display: none; }
.v2 .cro-signature {
  flex: 0 0 100%; display: flex; flex-direction: column; scroll-snap-align: center;
  background: #FBF8F3; border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(33, 27, 21, .05), 0 18px 38px -22px rgba(60, 40, 22, .38);
  transition: transform .5s var(--v2-ease), opacity .5s var(--v2-ease);
}
@media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
  .v2 .cro-signature:not(.est-au-centre) { transform: scale(.955); opacity: .78; }
}
.v2 .cro-signature__discover.v12-sig__cta { display: block; min-height: 0; flex: 1; }
.v2 .cro-signature__discover > img,
.v2 .v2-plate { width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; -webkit-mask-image: none; mask-image: none; }
.v2 .cro-signature__copy { padding: 18px 20px 4px; text-align: left; }
.v2 .cro-signature h3 { font-size: 25px; margin: 0 0 8px; }
.v2 .cro-signature__promise { font-size: 14.5px; line-height: 1.5; margin: 0 0 10px; max-width: 26ch; }
.v2 .cro-signature__atmo { font-size: 11px; letter-spacing: .12em; max-width: none; }
.v2 .cro-signature__price { font-size: 21px; margin-top: 12px; }
.v2 .cro-signature__price small { font-size: 12px; margin-left: 4px; }
.v2 .cro-signature__arrow { display: none; }
.v2 .cro-signature__add {
  position: static; display: flex; align-items: center; justify-content: center; gap: 10px;
  width: auto; height: 50px; min-height: 50px; margin: 14px 20px 20px; padding: 0 18px;
  border-radius: 999px; color: #251910; text-decoration: none;
  background: linear-gradient(180deg, #F7EDDA 0%, #EBD6B0 46%, #D6B784 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 16px -8px rgba(120, 84, 34, .55);
  font: 600 18px/1 var(--f-italic); letter-spacing: .01em; text-transform: none;
  transition: transform .25s var(--v2-ease), box-shadow .25s var(--v2-ease), background-color .25s;
}
.v2 .cro-signature__add::before {
  content: ''; width: 17px; height: 17px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6L5 8z'/%3E%3Cpath d='M9 8V7a3 3 0 0 1 6 0v1'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6L5 8z'/%3E%3Cpath d='M9 8V7a3 3 0 0 1 6 0v1'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Retour visuel après l'ajout : le bouton le dit lui-même, deux secondes. */
.v2 .cro-signature__add.est-ajoute { background: #211B15; color: #F7EDDA; box-shadow: none; }
.v2 .cro-signature__add.est-ajoute::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17l9-10'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17l9-10'/%3E%3C/svg%3E");
}
.v2 .cro-signature__add:active { transform: scale(.975); }
.v2 .cro-signature__add:focus-visible { outline: 2px solid var(--v2-or); outline-offset: 3px; }
.v2 .cro-signature__add[disabled] { background: none; box-shadow: inset 0 0 0 1px rgba(33, 27, 21, .22); color: #5A4A40; cursor: default; }
.v2 .cro-signature__add[disabled]::before { display: none; }
@media (hover: hover) { .v2 .cro-signature__add:not([disabled]):hover { transform: translateY(-1px); } }
/* Plaque d'attente : jamais un faux packshot. */
.v2-plate {
  display: grid; place-content: center; text-align: center; padding: 0 16px;
  background: radial-gradient(120% 90% at 30% 18%, #FBF5F1 0%, #EDDDD6 62%, #E3D0C8 100%);
  color: #6E544C; font: italic 500 22px/1.2 var(--f-italic);
}
.v2-plate small { display: block; margin-top: 10px; font: 500 11px/1.4 var(--f-sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
/* Les points suivent la carte centrée et la pilotent. */
.v2-points { display: flex; justify-content: center; margin-top: -6px; }
.v2-points button { position: relative; width: 26px; height: 36px; }
.v2-points button::before { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--v2-encre); opacity: .22; transition: opacity .3s, transform .3s; }
.v2-points button[aria-current]::before { opacity: .9; transform: scale(1.35); }
.v2-points button:focus-visible { outline: 2px solid var(--v2-or); outline-offset: -6px; border-radius: 6px; }
.v2 .cro-signatures__intro { margin-top: 10px; padding-top: 10px; }
/* T15 : la phrase de fin respire avant la photographie du Rituel (elle ne la touche pas). */
.v2 .cro-signatures { padding-bottom: 72px; }
@media (min-width: 900px) {
  .v2 .cro-signatures { padding-top: 150px; padding-bottom: 104px; }
  .v2 .cro-signatures::before { height: 120px; }
  .v2 .cro-signatures__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; max-width: 1180px; margin: 0 auto; padding: 6px 0 18px; overflow: visible; }
  .v2 .cro-signature__discover.v12-sig__cta, .v2 .cro-signature__discover > img { height: auto; }
  .v2-points { display: none; }
}

/* ── 4. RITUEL — une scène sombre, la frise posée sur l'image ─────
   Trois plans qui se fondent : le geste (lent zoom), la diffusion
   (brume de lumière), l'atmosphère.
   RACCORD IVOIRE → RITUEL (T15, 13/11) : la section commence par sa
   photographie, pleine largeur, bord supérieur net, collée à l'ivoire.
   Surtitre, titre et phrase se posent sur le haut de l'image (même
   cellule de grille que le film, voile de lecture en haut) : plus de
   dégradé ivoire → noir, plus de bandeau noir vide au-dessus du film.
   Le film garde son fondu bas, qui tombe dans la même nuit. */
.v2 .v2-rituel { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 0 52px; background: var(--v2-nuit); color: #F3E8D5; }
.v2 .v2-rituel::before { content: none; display: none; }
.v2 .v2-rituel > .cro-usage__head { grid-area: 1 / 1; align-self: start; position: relative; z-index: 4; padding: 36px 22px 0; }
.v2 .v2-rituel > .v2-film { grid-area: 1 / 1; }
.v2 .v2-rituel > .cro-usage__surfaces { grid-area: 2 / 1; }
.v2 .v2-rituel .v11-eyebrow { color: var(--v2-or-clair); }
.v2 .v2-rituel h2 { margin: 14px auto 12px; color: #F7F2EA; font-size: 31px; line-height: 1.16; }
.v2-rituel__sous { margin: 0 auto; max-width: 32ch; color: rgba(243, 232, 213, .86); font: 300 14.5px/1.55 var(--f-sans); }
.v2 .v2-rituel .cro-usage__head :is(.v11-eyebrow, h2, .v2-rituel__sous) { text-shadow: 0 1px 14px rgba(13, 9, 6, .55); }
.v2-film { position: relative; max-width: none; margin: 0; }
.v2-film__ecran {
  /* Téléphone : cadre haut (8/5 de la largeur, au moins 620 px) — le titre occupe le premier tiers,
     la gâchette du flacon (≈ 33 % de la hauteur du plan 1) passe sous la phrase.
     Hauteur explicite plutôt que aspect-ratio + min-height (qui élargirait le cadre au-delà de l'écran). */
  position: relative; overflow: hidden; isolation: isolate; height: max(620px, 160vw); background: var(--v2-nuit);
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}
.v2-film__ecran img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--v2-ease); }
.v2-film__ecran img:nth-of-type(1) { object-position: 78% 60%; }
/* Téléphone : cadre plus étroit que l'image, on la décale à droite pour garder le flacon entier. */
@media (max-width: 599px) {
  .v2-film__ecran img:nth-of-type(1) { object-position: 94% 60%; }
  /* La frise couvre ~60 % de la largeur sur téléphone : voile gauche plus large et plus soutenu (≥ 4,5:1 sur les trois plans). */
  .v2 .v2-film__ecran::after {
    background:
      linear-gradient(to bottom, rgba(13, 9, 6, .74) 0%, rgba(13, 9, 6, .66) 32%, rgba(13, 9, 6, .3) 47%, rgba(13, 9, 6, 0) 60%),
      linear-gradient(90deg, rgba(13, 9, 6, .86) 0%, rgba(13, 9, 6, .72) 46%, rgba(13, 9, 6, 0) 78%);
  }
}
.v2-film__ecran img:nth-of-type(2) { object-position: 50% 50%; }
.v2-film__ecran img:nth-of-type(3) { object-position: 62% 50%; }
.v2-film__ecran img.is-on { opacity: 1; }
.v2-film__ecran::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(13, 9, 6, .74) 0%, rgba(13, 9, 6, .66) 32%, rgba(13, 9, 6, .3) 47%, rgba(13, 9, 6, 0) 60%),
    linear-gradient(90deg, rgba(13, 9, 6, .84) 0%, rgba(13, 9, 6, .64) 40%, rgba(13, 9, 6, 0) 72%);
}
.v2-film__brume { position: absolute; inset: -10%; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient(44% 36% at 58% 40%, rgba(255, 236, 205, .36), rgba(255, 236, 205, 0) 70%); transition: opacity 1.6s var(--v2-ease); }
.v2-film[data-step="1"] .v2-film__brume { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .v2-film.is-anime .v2-film__ecran img.is-on { animation: v2-travelling 4s ease-out both; }
  .v2-film.is-anime[data-step="1"] .v2-film__brume { animation: v2-brume 3.2s ease-in-out both; }
}
@keyframes v2-travelling { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes v2-brume { from { transform: translate(6%, 3%) scale(.9); } to { transform: translate(-4%, -3%) scale(1.12); } }

/* La frise descend dans la moitié basse de l'image : le haut appartient au titre.
   bottom = légende sous l'image (≈ 38 px) + marge dans l'image. */
.v2-film__frise { position: absolute; z-index: 3; left: 22px; top: auto; bottom: 64px; transform: none; }
.v2-film__fil { position: absolute; left: 0; top: 0; width: 60px; height: 100%; overflow: visible; }
.v2-film__fil path { fill: none; stroke: var(--v2-or-clair); stroke-width: 1; opacity: .55; }
.v2-film__temps { position: relative; list-style: none; display: grid; gap: 40px; margin: 0; padding: 0; }
.v2-film__temps li:nth-child(odd) { margin-left: 14px; }
/* Temps inactifs à .8 (et non .62) : à .62 le chiffre or ne peut pas atteindre 4,5:1, même sur la nuit pure (T15). */
.v2-film__temps button { display: flex; align-items: center; gap: 14px; min-height: 46px; color: #F7F2EA; text-align: left; opacity: .8; transition: opacity .4s var(--v2-ease); }
.v2-film__temps li.is-on button { opacity: 1; }
.v2-film__rond {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(13, 9, 6, .5); box-shadow: inset 0 0 0 1px rgba(217, 183, 124, .65);
  transition: box-shadow .5s var(--v2-ease), background-color .5s var(--v2-ease);
}
.v2-film__rond svg { width: 21px; height: 21px; fill: none; stroke: var(--v2-or-clair); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.v2-film__temps li.is-on .v2-film__rond { background: rgba(217, 183, 124, .16); box-shadow: inset 0 0 0 1px var(--v2-or-clair), 0 0 22px rgba(217, 183, 124, .34); }
.v2-film__mot em { display: block; font: 500 12px/1 var(--f-sans); font-style: normal; letter-spacing: .08em; color: var(--v2-or-clair); margin-bottom: 5px; }
.v2-film__mot b { display: block; font: 400 17px/1.15 var(--f-serif); }
.v2-film__temps i { display: none; }
.v2-film__temps button:focus-visible { outline: 2px solid var(--v2-or-clair); outline-offset: 4px; border-radius: 26px; }
.v2-film__pause { position: absolute; right: 14px; bottom: 58px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #F7F2EA; background: rgba(13, 9, 6, .3); border: 1px solid rgba(247, 242, 234, .4); }
.v2-film__pause span { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.v2-film__pause[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-block: 7px solid transparent; border-left: 11px solid currentColor; margin-left: 3px; }
.v2-film__pause:focus-visible { outline: 2px solid #F7F2EA; outline-offset: 2px; }
.v2-film:not(.is-anime) .v2-film__pause { display: none; }
.v2-film__legende { min-height: 44px; margin: -6px 22px 0; text-align: center; color: rgba(243, 232, 213, .86); font: 300 14px/1.55 var(--f-sans); }
.v2 .v2-rituel .cro-usage__surfaces { margin: 14px 0 0; color: var(--v2-or-clair); }
@media (prefers-reduced-motion: reduce) { .v2-film__ecran img, .v2-film__brume { transition: none; } }
@media (min-width: 600px) and (max-width: 899px) { .v2-film__ecran { height: auto; aspect-ratio: 4 / 5; } }
@media (min-width: 900px) {
  .v2 .v2-rituel { padding-bottom: 72px; }
  .v2 .v2-rituel > .cro-usage__head { padding-top: 64px; }
  .v2 .v2-rituel h2 { font-size: 44px; }
  /* Plein cadre, bord à bord : aucune bande de nuit à côté de la photo. */
  .v2-film__ecran { height: max(620px, 50vw); aspect-ratio: auto; border-radius: 0; }
  .v2-film__ecran img:nth-of-type(1) { object-position: 60% 62%; }
  .v2-film__frise { left: 64px; bottom: 88px; }
  .v2-film__temps { gap: 52px; }
  .v2-film__mot b { font-size: 24px; }
  .v2-film__pause { right: 28px; bottom: 84px; }
}

/* ── 5. RITUEL → ATELIER → COFFRET → FAQ → FIN DE PAGE ─────────
   Règle des raccords (T15, 13/11) : un changement de fond ne se fait
   jamais d'aplat à aplat ni par un dégradé de couleur à couleur ; c'est
   une photographie plein cadre qui le porte. La page n'a donc que deux
   fonds : l'ivoire du choix en haut, puis une seule nuit à partir du
   Rituel. Entre deux sections de même nuit : de l'air et, au besoin,
   un filet champagne court, centré.
   · Rituel → Atelier : même nuit, filet.
   · Atelier → Coffret : la photographie du Coffret ouvre la section
     (téléphone) ; même nuit autour du panneau (grand écran).
   · Coffret → FAQ : même nuit, filet. La FAQ passe sur la nuit (textes
     ≥ 4,5:1, contenu inchangé) : plus de retour à l'ivoire sans image.
   · FAQ → Dernier geste : la photographie ouvre la section, sans le
     fondu ivoire d'avant ; son fondu bas tombe dans la nuit du choix final.
   · Choix final → pied de page : même nuit. */
.v2.cro-flow .v11-atelier { background: var(--v2-nuit); padding-top: 56px; }
.v2.cro-flow .v11-atelier::after { content: none; display: none; }
.v2.cro-flow .v11-atelier::before,
.v2.cro-flow .v4-faq__header::before {
  content: ''; display: block; position: absolute; inset: 0 auto auto 50%; z-index: 1;
  width: 48px; height: 1px; margin-left: -24px; background: rgba(217, 183, 124, .5); pointer-events: none;
}
@media (max-width: 899px) {
  .v2.cro-reference .v8-coffret, .v2.cro-reference .v8-coffret__visual { background: transparent; }
}
@media (min-width: 900px) {
  .v2.cro-flow .v11-atelier { padding-top: 80px; }
}

/* ── 6. FIN DE PAGE — un seul chapitre sombre ─────────────────── */
.v2.cro-flow .v4-faq { background: var(--v2-nuit); border-top: 0; padding-top: 16px; padding-bottom: 56px; }
.v2.cro-flow .v4-faq__header { position: relative; padding-top: 44px; border-top: 0; }
.v2.cro-flow .v4-faq .v3-label { color: var(--v2-or-clair); }
.v2.cro-flow .v4-faq__title { color: #F7F2EA; }
.v2.cro-flow .v4-faq__item { border-color: rgba(217, 183, 124, .22); }
.v2.cro-flow .v4-faq__question,
.v2.cro-flow .v4-faq__q-text { color: #F3E8D5; }
.v2.cro-flow .v4-faq__answer { color: rgba(243, 232, 213, .78); }
.v2.cro-flow .v4-faq__icon,
.v2.cro-flow .v4-faq__lien { color: var(--v2-or-clair); }
.v2.cro-flow .v4-faq__question:focus-visible { outline: 2px solid var(--v2-or-clair); outline-offset: 2px; }
/* Dernier geste : la photographie ouvre la section, bord net (plus de fondu depuis l'ivoire). */
.v2.cro-flow .cro-geste::before { background: linear-gradient(90deg, #0D0906 0%, #0D0906D9 35%, #0D090620 85%); }
.v2.cro-flow .cro-geste__picture::after { content: none; display: none; }
.v2.cro-flow .footer { background: var(--v2-nuit); padding-top: 44px; }
.v2.cro-flow .v13-final { padding-bottom: 48px; }
@media (min-width: 900px) { .v2.cro-flow .v4-faq { padding-top: 24px; padding-bottom: 72px; } }

/* ════════════════════════════════════════════════════════════════
   T24 — SIGNATURES SUR LA NUIT (13/11, test demandé par Samy)
   Le dégradé noir → ivoire sous le héros disparaît : la section des
   Signatures prend exactement la nuit sur laquelle finit le héros
   (#080506, --hx-nuit, mesurée sur capture à 390 et 1440). Héros et
   section se lisent comme une seule surface ; la lumière vient des
   photographies des cartes. Le Rituel s'ouvre ensuite par sa photo.
   Écart assumé au Core (BOUSSOLE §7 : « Noir = rupture, jamais le fond
   par défaut ») : test demandé par le fondateur en connaissance de cause.
   RETOUR ARRIÈRE : supprimer ce bloc entier, jusqu'à « FIN T24 ».
   ════════════════════════════════════════════════════════════════ */
.v2 .cro-signatures { background: #080506; color: #F3E8D5; }
.v2 .cro-signatures::before { content: none; display: none; }
/* Les 118 / 150 px du haut logeaient le dégradé : sans lui, ils feraient un trou
   noir entre le chevron et le surtitre. Le surtitre suit le chevron. */
.v2 .cro-signatures { padding-top: 56px; }
@media (min-width: 900px) { .v2 .cro-signatures { padding-top: 88px; } }
.v2 .cro-signatures .v11-eyebrow { color: var(--v2-or-clair); }
.v2 .cro-signatures > header h2 { color: #F7F2EA; }
.v2 .cro-signatures__intro { color: rgba(243, 232, 213, .86); }
.v2 .v2-points button::before { background: #F3E8D5; opacity: .45; }
.v2 .v2-points button[aria-current]::before { opacity: .95; }
.v2 .v2-points button:focus-visible { outline-color: var(--v2-or-clair); }
/* Cartes sombres (piste b, retenue contre les cartes claires) : la photographie
   en haut, le texte clair directement sur la nuit, un filet champagne fin qui
   dessine la carte. Le bouton champagne reste la seule surface claire. */
/* (T25 : le filet périphérique et l'arrondi « haut seulement » de la photo sont retirés, voir le bloc T25.) */
.v2.cro-reference .cro-signature__copy { color: #F3E8D5; }
.v2 .cro-signature h3 { color: #F7F2EA; }
.v2 .cro-signature__promise { color: rgba(243, 232, 213, .86); }
.v2 .cro-signature__atmo { color: var(--v2-or-clair); }
.v2 .cro-signature__price { color: #F7F2EA; }
.v2 .cro-signature__price small { color: rgba(243, 232, 213, .78); }
/* États du bouton lisibles sur la nuit (l'état par défaut ne change pas). */
.v2 .cro-signature__add.est-ajoute { background: transparent; color: #F7EDDA; box-shadow: inset 0 0 0 1px rgba(217, 183, 124, .6); }
.v2 .cro-signature__add[disabled] { box-shadow: inset 0 0 0 1px rgba(243, 232, 213, .35); color: rgba(243, 232, 213, .78); }
.v2 .cro-signature__add:focus-visible { outline-color: var(--v2-or-clair); }
/* FIN T24 */

/* ════════════════════════════════════════════════════════════════
   T25 — CARTES SIGNATURES, PLANCHE D'ÉDITION (13/11, demande de Samy :
   « On garde le noir mais améliore le design des cartes et la
   typographie à l'intérieur »)
   Une carte = une planche de maison de parfum : la photographie est la
   fenêtre lumineuse, le texte est composé dessous, sur la nuit, comme une
   légende d'édition. Plus de boîte : ni filet, ni fond ; seule la photo
   a des coins arrondis. Composition centrée, dans l'ordre de lecture :
   mots d'atmosphère (surtitre) → nom → promesse → filet → prix → bouton.
   Le HTML garde son ordre (h3 → promesse → atmo → prix) : l'ordre visuel
   vient de « order ».
   Chaque senteur a sa couleur (--sig), reprise exactement des pastilles
   du héros (index.html, .hx__sigs) ; toutes dépassent 8:1 sur #080506.
   RETOUR ARRIÈRE : supprimer ce bloc entier, jusqu'à « FIN T25 », et
   remettre dans T24 la ligne du filet (.cro-signature box-shadow inset
   rgba(217,183,124,.26) + photo arrondie en haut seulement).
   ════════════════════════════════════════════════════════════════ */
.v2 .cro-signature--01 { --sig: #A9C3D6; }
.v2 .cro-signature--02 { --sig: #E3C3BC; }
.v2 .cro-signature--03 { --sig: #D9B36C; }
.v2 .cro-signature--04 { --sig: #B7A2C4; }

/* La carte ne se dessine plus : ni fond, ni ombre, ni filet. overflow visible
   pour que le contour de focus puisse sortir de la photographie. */
.v2 .cro-signatures .cro-signature { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
/* Photographie : pleine largeur, quatre coins arrondis. Téléphone : un peu
   moins haute (12/13 au lieu de 5/6) pour que carte + points tiennent dans
   un écran 390 × 844 ; flacon et étiquette restent entiers (vérifié). */
.v2 .cro-signatures .cro-signature__discover > img { border-radius: 16px; aspect-ratio: 12 / 13; object-position: 50% 52%; }

/* Légende d'édition, centrée. */
.v2 .cro-signatures .cro-signature__copy {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 6px 0; text-align: center;
}
.v2 .cro-signatures .cro-signature__atmo {
  order: 1; margin: 0 0 9px; max-width: none;
  font: 500 10.5px/1.4 var(--f-sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--sig, var(--v2-or-clair));
}
.v2 .cro-signatures .cro-signature h3 {
  order: 2; margin: 0;
  font: 500 32px/1.04 var(--f-serif); letter-spacing: 0; color: #F7F2EA;
}
.v2 .cro-signatures .cro-signature__promise {
  order: 3; margin: 8px auto 0; max-width: 23ch;
  font: italic 400 17.5px/1.3 var(--f-italic); letter-spacing: .005em;
  color: rgba(243, 232, 213, .86); text-wrap: balance;
}
/* Filet court, couleur de la senteur. */
.v2 .cro-signatures .cro-signature__copy::after {
  content: ''; order: 4; display: block; flex: none;
  width: 36px; height: 1px; margin: 15px auto 13px;
  background: var(--sig, var(--v2-or-clair)); opacity: .9;
}
.v2 .cro-signatures .cro-signature__price {
  order: 5; display: inline-flex; align-items: baseline; gap: 8px; margin: 0;
  font: 500 22px/1.1 var(--f-serif); font-variant-numeric: lining-nums; color: #F7F2EA; white-space: nowrap;
}
.v2 .cro-signatures .cro-signature__price small {
  margin: 0; font: 400 12px/1 var(--f-sans); letter-spacing: .06em; color: rgba(243, 232, 213, .78);
}
.v2 .cro-signatures .cro-signature__arrow { display: none; }

/* Bouton : même capsule champagne, alignée sur les bords de la photographie. */
.v2 .cro-signatures .cro-signature__add {
  margin: 16px 0 0; height: 50px; min-height: 50px;
  font: 600 18.5px/1 var(--f-italic); letter-spacing: .015em;
}

/* Focus : contour champagne autour de la planche (photo + légende), lisible sur la nuit. */
.v2 .cro-signatures .cro-signature__discover:focus-visible { outline: 2px solid var(--v2-or-clair); outline-offset: 4px; border-radius: 18px; }

@media (min-width: 900px) {
  .v2 .cro-signatures .cro-signature__discover > img { aspect-ratio: 5 / 6; }
  .v2 .cro-signatures .cro-signature__atmo { font-size: 11px; }
  .v2 .cro-signatures .cro-signature h3 { font-size: 33px; }
  .v2 .cro-signatures .cro-signature__promise { font-size: 18px; }
  .v2 .cro-signatures .cro-signature__add { margin-top: 18px; }
}
/* 900–1199 px : quatre colonnes de 189 à 263 px. Le nom reste sur une ligne
   (28 px) ; le surtitre resserre son interlettrage (.12em) pour tenir sur une
   ligne dès 1024 px (« Solaire · Fruité · Remarquable » = 207 px + marges). En dessous,
   il passe sur deux lignes et sa hauteur est réservée : noms, prix et boutons
   restent alignés d'une carte à l'autre. */
@media (min-width: 900px) and (max-width: 1199px) {
  .v2 .cro-signatures .cro-signature h3 { font-size: 28px; }
  .v2 .cro-signatures .cro-signature__atmo { font-size: 10.5px; letter-spacing: .12em; }
}
@media (min-width: 900px) and (max-width: 1023px) {
  .v2 .cro-signatures .cro-signature__atmo { min-height: 2.8em; display: flex; align-items: flex-end; justify-content: center; text-wrap: balance; }
  /* Cartes de 189 px : « Nuage de Poudre » et « Ajouter au panier » restent sur une ligne. */
  .v2 .cro-signatures .cro-signature h3 { font-size: 26px; }
  .v2 .cro-signatures .cro-signature__add { padding: 0 12px; gap: 8px; font-size: 16.5px; white-space: nowrap; }
}
/* FIN T25 */

/* ════════════════════════════════════════════════════════════════
   T26 — BOUTON « DÉCOUVRIR L'ATELIER » (13/11, demandé par Samy)
   Le rectangle or plat en capitales devient la même capsule champagne
   que le bouton du héros et ceux des cartes : un seul langage d'action
   sur toute la page. Texte et lien inchangés.
   RETOUR ARRIÈRE : supprimer ce bloc, jusqu'à « FIN T26 ».
   ════════════════════════════════════════════════════════════════ */
.v2.cro-flow .cro-atelier__cta {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  height: 56px; min-height: 56px; padding: 0 26px; border: 0; border-radius: 999px;
  color: #251910; background: linear-gradient(180deg, #F7EDDA 0%, #EBD6B0 46%, #D6B784 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 10px 24px -12px rgba(0, 0, 0, .7);
  font: 600 19px/1 var(--f-italic); letter-spacing: .01em; text-transform: none;
  transition: transform .25s var(--v2-ease), box-shadow .25s var(--v2-ease);
}
.v2.cro-flow .cro-atelier__cta i { font: 400 17px/1 var(--f-sans); font-style: normal; transition: transform .25s var(--v2-ease); }
.v2.cro-flow .cro-atelier__cta:active { transform: scale(.975); }
.v2.cro-flow .cro-atelier__cta:focus-visible { outline: 2px solid var(--v2-or-clair); outline-offset: 4px; }
@media (hover: hover) {
  .v2.cro-flow .cro-atelier__cta:hover { transform: translateY(-1px); color: #251910; background: linear-gradient(180deg, #F7EDDA 0%, #EBD6B0 46%, #D6B784 100%); }
  .v2.cro-flow .cro-atelier__cta:hover i { transform: translateX(3px); }
}
.v2.cro-flow .cro-atelier__cta + .v11-atelier__duree { margin-top: 16px; }
/* FIN T26 */