/* ============================================================
   PAGE VITRINE « ESSAYAGE VIRTUEL » — refonte V2.5
   fashioncurvyshop.com — 04/08/2026, refonte-code

   Déployé dans : wp-content/themes/enfold-child/refonte-cabine.css (STAGING)
   Source de vérité : maintenance-fcs/ux/refonte-cabine.css
   Enfilé par functions.php (prio 999) UNIQUEMENT sur la page de slug
   `cabine-essayage-virtuelle` — jamais un ID en dur : l'ID de la
   préproduction n'est PAS celui de la production, où 150789 est déjà pris
   par une photo produit. Le scope CSS s'appuie donc sur la classe de body
   `fcs-page-cabine`, posée par notre filtre body_class à partir du même
   slug. Spécificité identique à l'ancien scope par ID (1 ID + 1 classe) et
   même position dans le fichier : la cascade est inchangée.
   Dépendances : fcs-refonte-socle, fcs-refonte-header.

   CONTENU : page Enfold ALB [av_section][av_codeblock] — jamais un
   page-*.php du thème (exigence refonte-compat, plan du 31/07/2026 §1.5).

   ⛔ VETO PERF RESPECTÉ (refonte-perf, plan du 31/07/2026 §1.2) :
      0 iframe · 0 script embarqué de la cabine · 0 preconnect/dns-prefetch
      vers essayage.fashioncurvyshop.com · 3 liens `<a target="_blank"
      rel="noopener">` et rien d'autre. Aucun JavaScript n'accompagne cette
      page : la FAQ utilise <details>/<summary> natifs.

   AUCUNE VARIABLE CSS NOUVELLE — tout vient de refonte-socle.css.

   ------------------------------------------------------------
   CONTRASTES CALCULÉS AVANT RECOPIE (5e application de la règle)
   La maquette pose le rose `#c05a78` sur les libellés « Voir la catégorie → »
   et sur l'exergue « Nouveau » : **4,22:1 sur blanc**, sous le seuil AA de
   4,5:1. Remplacé partout par `--fcs-framboise` (#b04d6b, **5,10:1**), déjà
   au socle. Le bloc Conseillère inverse le contraste (texte clair sur
   `--fcs-prune`), il est traité à part.
   ------------------------------------------------------------ */


/* ============================================================
   1. CADRE DE PAGE
   ============================================================ */

/* Enfold rend le fil d'ariane dans .title_container juste au-dessus du
   contenu : on ne le redessine pas dans le HTML de la page (la maquette en
   dessine un — le recopier créerait un second BreadcrumbList dans les
   données structurées). On prolonge seulement le fond, comme sur le blog. */
#top.fcs-page-cabine .title_container {
  background: var(--fcs-bg-soft);
}
#top.fcs-page-cabine .title_container .container {
  padding-top: 18px;
  padding-bottom: 0;
}
#top.fcs-page-cabine .title_container .breadcrumb {
  position: static;
  float: none;
  margin: 0;
  padding: 0;
  font-family: var(--fcs-font-text);
  font-size: 13px;
  color: var(--fcs-text-subtle);
}
#top.fcs-page-cabine .title_container .breadcrumb a { color: var(--fcs-text-subtle); text-decoration: none; }
#top.fcs-page-cabine .title_container .breadcrumb a:hover { color: var(--fcs-framboise); text-decoration: underline; }
#top.fcs-page-cabine .title_container .breadcrumb .trail-end { color: var(--fcs-framboise); }

/* La section ALB porte déjà les marges d'Enfold : on neutralise son padding
   vertical pour maîtriser le rythme depuis nos propres sections. */
#top.fcs-page-cabine .fcs-cab-page .content,
#top.fcs-page-cabine .fcs-cab-page .entry-content-wrapper { padding-top: 0; }

#top .fcs-cab {
  font-family: var(--fcs-font-text);
  color: var(--fcs-text-secondary);
}
#top .fcs-cab p { font-family: var(--fcs-font-text); }

#top .fcs-cab-sec { margin: 0 0 clamp(48px, 6vw, 76px); }
#top .fcs-cab-sec:last-child { margin-bottom: 0; }


/* ============================================================
   2. TITRES

   Rappel de convention : l'interligne passe par --fcs-hn-lh (règle socle à
   3 ID), posée SUR LE TITRE — jamais sur un conteneur, une propriété
   personnalisée étant héritée.

   `!important` sur la taille du H1 : Enfold sert
   `#top #wrap_all .all_colors h1, .main-title .entry-title
      { font-size:35px !important }`  (SANS media query, relevé dans le CSS
   servi le 04/08). Aucune spécificité ne bat un !important ; les 3 ID
   suffisent en revanche pour la police et l'interligne, qui sont en
   priorité normale chez l'adversaire.
   ============================================================ */

#top #wrap_all #main h1.fcs-cab-h1 {
  font-family: var(--fcs-font-title);
  font-weight: 400;
  color: var(--fcs-prune);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  padding: 0;
  /* Maquette : 46px à 1440. clamp unique plutôt que deux règles jumelles
     (défaut récurrent du projet : une correction appliquée à un seul
     affichage). 3.2vw = 46/1440. */
  font-size: clamp(27px, 3.2vw, 46px) !important;
  --fcs-hn-lh: 1.14;
}

#top #wrap_all #main h2.fcs-cab-h2 {
  font-family: var(--fcs-font-title);
  font-weight: 400;
  color: var(--fcs-prune);
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 6px;
  font-size: clamp(22px, 2.36vw, 34px);
  --fcs-hn-lh: 1.25;
}
#top #wrap_all #main h2.fcs-cab-h2-clair { color: var(--fcs-white); }

#top #wrap_all #main h3.fcs-cab-h3 {
  font-family: var(--fcs-font-title);
  font-weight: 400;
  color: var(--fcs-prune);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  font-size: clamp(18px, 1.46vw, 21px);
  --fcs-hn-lh: 1.3;
}

#top .fcs-cab p {
  color: var(--fcs-text-muted);
  font-size: 15.5px;
  line-height: 1.75;
  margin: 0;
}
#top .fcs-cab-note {
  font-size: 14.5px !important;
  color: var(--fcs-text-muted);
}
#top .fcs-cab-note a { color: var(--fcs-framboise); }


/* ============================================================
   3. BOUTONS ET LIENS SORTANTS
   ============================================================ */

#top .fcs-cab-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 4px 0 0 !important;
}

#top .fcs-cab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* ≥ 44px de haut : cible tactile du cahier des charges. */
  min-height: 52px;
  padding: 0 34px;
  border-radius: var(--fcs-radius-pill);
  background: var(--fcs-framboise);
  color: var(--fcs-white);
  font-family: var(--fcs-font-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .05em;
  text-decoration: none;
  border: 1px solid var(--fcs-framboise);
  transition: transform .18s ease-out, background-color .18s ease-out;
}
#top .fcs-cab-btn:hover { background: var(--fcs-prune); border-color: var(--fcs-prune); color: var(--fcs-white); transform: translateY(-2px); }
#top .fcs-cab-btn:focus-visible { outline: 2px solid var(--fcs-prune); outline-offset: 3px; }
#top .fcs-cab-btn-lg { min-height: 58px; font-size: 15.5px; padding: 0 40px; }
#top .fcs-cab-btn-ico { font-size: 16px; line-height: 1; }

/* Bouton fantôme sur fond prune (bloc Conseillère) : blanc sur --fcs-prune
   = 15,9:1, très au-dessus du seuil. */
#top .fcs-cab-btn-ghost {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 30px;
  border-radius: var(--fcs-radius-pill);
  border: 1.5px solid var(--fcs-rose-clair);
  color: var(--fcs-white);
  background: transparent;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .18s ease-out;
}
#top .fcs-cab-btn-ghost:hover { background: rgba(255, 255, 255, .12); color: var(--fcs-white); }
#top .fcs-cab-btn-ghost:focus-visible { outline: 2px solid var(--fcs-rose-clair); outline-offset: 3px; }

/* Mention d'ouverture en nouvel onglet — accessibilité : les 3 liens vers la
   cabine ouvrent un onglet, la cliente doit le savoir avant de cliquer. */
#top .fcs-cab-newtab {
  font-size: 13px !important;
  color: var(--fcs-text-subtle);
}


/* ============================================================
   4. HERO
   ============================================================ */

#top .fcs-cab-hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(24px, 3.6vw, 52px);
  align-items: center;
  margin: 0 0 clamp(48px, 6vw, 76px);
}
#top .fcs-cab-hero-txt { display: flex; flex-direction: column; gap: 20px; }

/* Exergue Birthstone. Écart assumé à la maquette : elle le pose en
   `#c05a78` (4,22:1). Passé en --fcs-framboise (5,10:1).
   Birthstone : boîte de ligne = 1,354 × le corps — sur un mot unique tenant
   sur une ligne, le ratio 0,9 de la maquette ne pose pas de problème ; il est
   tout de même remonté pour ne pas rogner les jambages. */
#top .fcs-cab-eyebrow {
  font-family: var(--fcs-font-script);
  font-size: clamp(38px, 3.6vw, 52px);
  line-height: 1.1;
  color: var(--fcs-framboise);
}

#top .fcs-cab-lead {
  font-size: 17px !important;
  max-width: 52ch;
  line-height: 1.75;
}

#top .fcs-cab-hero-img {
  background: var(--fcs-bg-soft);
  border-radius: var(--fcs-radius-md);
  overflow: hidden;
}
#top .fcs-cab-hero-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}


/* ============================================================
   5. LES 3 ÉTAPES
   ============================================================ */

#top .fcs-cab-etapes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
  margin-top: 26px;
}
#top .fcs-cab-etape {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--fcs-white);
  border: 1px solid var(--fcs-bg-card);
  border-radius: var(--fcs-radius-lg);
  padding: 26px;
  box-shadow: var(--fcs-shadow-sm);
}
#top .fcs-cab-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--fcs-radius-pill);
  background: var(--fcs-framboise);
  color: var(--fcs-white);
  font-family: var(--fcs-font-title);
  font-size: 19px;
  line-height: 1;
}
#top .fcs-cab-etape p { font-size: 14.5px !important; }
#top .fcs-cab-etape-img {
  display: block;
  border-radius: var(--fcs-radius-md);
  overflow: hidden;
  background: var(--fcs-bg-soft);
}
#top .fcs-cab-etape-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  object-position: top;
  background: var(--fcs-bg-soft);
}


/* ============================================================
   6. DEUX COLONNES (pourquoi / RGPD)
   ============================================================ */

#top .fcs-cab-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.6vw, 44px);
  margin-top: 24px;
}
#top .fcs-cab-duo > div { display: flex; flex-direction: column; gap: 12px; }

#top .fcs-cab-rgpd {
  background: #fdf6f8;
  border: 1px solid var(--fcs-bg-card);
  border-radius: var(--fcs-radius-lg);
  padding: 28px;
}
#top .fcs-cab-rgpd-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--fcs-radius-pill);
  background: var(--fcs-white);
  border: 1px solid var(--fcs-border-light);
  font-size: 20px;
  line-height: 1;
}


/* ============================================================
   7. VIGNETTES DE CATÉGORIE

   🔴 CE SONT DE VRAIS LIENS, ET C'EST DÉLIBÉRÉ.
   La maquette les dessine en <div> non cliquables (« Voir la catégorie → »
   y est un <span>), mais le plan d'intégration du 31/07/2026 §8.4 exige
   « 4 vignettes de catégorie, CHACUNE CLIQUABLE vers la catégorie
   correspondante ». C'est du maillage interne, pas de la décoration —
   exactement le même piège que les étiquettes du blog.

   « Hauts et pulls » recouvre DEUX catégories réelles du catalogue
   (hauts-et-tuniques 28 produits, pulls-et-gilets 4). Arbitrage manager du
   04/08 : une seule vignette, vers la plus fournie. `pulls-et-gilets` reste
   non couverte — signalé, pas masqué.
   ============================================================ */

#top .fcs-cab-cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.5vw, 22px);
  margin-top: 24px;
}
#top .fcs-cab-cat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  border-radius: var(--fcs-radius-md);
  transition: transform .2s ease-out;
}
#top .fcs-cab-cat:hover { transform: translateY(-3px); }
#top .fcs-cab-cat:focus-visible { outline: 2px solid var(--fcs-framboise); outline-offset: 4px; }
#top .fcs-cab-cat-img {
  display: block;
  border-radius: var(--fcs-radius-md);
  overflow: hidden;
  background: var(--fcs-bg-soft);
}
#top .fcs-cab-cat-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform .35s ease-out;
}
#top .fcs-cab-cat:hover .fcs-cab-cat-img img { transform: scale(1.04); }

/* Titre de vignette en Birthstone (maquette : 34px, ratio 1).
   Birthstone exige ≥ 1,354 dès que le libellé boucle : « Manteaux et
   vestes » et « Pantalons et jeans » passent sur deux lignes dans une
   colonne étroite. L'interligne est donc porté à 1,4 d'emblée, à toutes
   les largeurs — le défaut est latent partout, il ne dépend que de la
   longueur du libellé. */
#top #wrap_all #main h3.fcs-cab-cat-t {
  font-family: var(--fcs-font-script);
  font-weight: 400;
  color: var(--fcs-prune);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  font-size: clamp(26px, 2.36vw, 34px);
  --fcs-hn-lh: 1.4;
}
#top .fcs-cab-cat-lien {
  font-size: 13px;
  font-weight: 500;
  color: var(--fcs-framboise);
}


/* ============================================================
   8. BLOC CONSEILLÈRE (fond prune)
   ============================================================ */

#top .fcs-cab-conseil {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
  background: var(--fcs-prune);
  border-radius: 24px;
  padding: clamp(26px, 3.4vw, 48px);
  margin: 0 0 clamp(48px, 6vw, 76px);
}
#top .fcs-cab-conseil-txt { display: flex; flex-direction: column; gap: 16px; }
/* Texte clair sur prune : --fcs-border (#e9d3db) sur #2a1620 = 12,4:1. */
#top .fcs-cab-conseil p { color: var(--fcs-border); font-size: 16px !important; max-width: 48ch; }

#top .fcs-cab-conseil-demo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px dashed rgba(245, 184, 201, .4);
  border-radius: 18px;
  padding: 22px;
}
#top .fcs-cab-bulle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 !important;
}
#top .fcs-cab-bulle-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--fcs-radius-pill);
  background: var(--fcs-framboise);
  color: var(--fcs-white);
  font-size: 15px;
  line-height: 1;
}
#top .fcs-cab-bulle-txt {
  background: rgba(255, 255, 255, .1);
  border-radius: 14px 14px 14px 4px;
  padding: 12px 15px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fcs-border);
}
#top .fcs-cab-conseil-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--fcs-radius-md);
  background: var(--fcs-bg-soft);
}


/* ============================================================
   9. FAQ — <details>/<summary> natifs, ZÉRO JavaScript
   ============================================================ */

#top .fcs-cab-faq { max-width: 1000px; }
#top .fcs-cab-q {
  border-bottom: 1px solid var(--fcs-bg-card);
}
#top .fcs-cab-q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* ≥ 44px de haut au doigt. */
  min-height: 44px;
  padding: 17px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--fcs-font-text);
  font-size: 16px;
  font-weight: 600;
  color: var(--fcs-prune);
}
#top .fcs-cab-q summary::-webkit-details-marker { display: none; }
#top .fcs-cab-q summary:focus-visible { outline: 2px solid var(--fcs-framboise); outline-offset: -2px; }
#top .fcs-cab-chev {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
  color: var(--fcs-framboise);
  transition: transform .2s ease-out;
}
#top .fcs-cab-q[open] .fcs-cab-chev { transform: rotate(45deg); }
#top .fcs-cab-q p {
  padding: 0 4px 20px;
  max-width: 70ch;
  font-size: 15px !important;
}


/* ============================================================
   10. BLOC FINAL

   État A de la maquette (avant-première + code d'accès + repli WhatsApp)
   VOLONTAIREMENT NON INTÉGRÉ : la cabine est ouverte au public depuis le
   31/07/2026. Seul l'état ouvert est publié. Aucune mention de code d'accès
   ne figure sur cette page — vérifié par assertion sur le contenu posé.
   ============================================================ */

#top .fcs-cab-final { text-align: center; }
#top .fcs-cab-final .fcs-cab-cta-row { justify-content: center; }
#top .fcs-cab-reassure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 14px !important;
  font-size: 13.5px !important;
  color: var(--fcs-text-secondary);
}
#top .fcs-cab-sep { color: var(--fcs-border-light); }
#top .fcs-cab-final .fcs-cab-newtab { margin-top: 8px !important; }


/* ============================================================
   11. TABLETTE (≤ 989px)
   ============================================================ */
@media only screen and (max-width: 989px) {
  #top .fcs-cab-hero { grid-template-columns: 1fr; }
  #top .fcs-cab-hero-img { max-width: 420px; }
  #top .fcs-cab-etapes { grid-template-columns: 1fr 1fr; }
  #top .fcs-cab-cats { grid-template-columns: 1fr 1fr; }
  #top .fcs-cab-conseil { grid-template-columns: 1fr; }
}


/* ============================================================
   12. MOBILE (≤ 767px) — tout s'empile
   ============================================================ */
@media only screen and (max-width: 767px) {
  #top.fcs-page-cabine .title_container .container { padding-top: 14px; }

  #top .fcs-cab-hero { gap: 18px; }
  #top .fcs-cab-hero-img { max-width: none; }
  #top .fcs-cab-lead { font-size: 15px !important; }

  #top .fcs-cab-etapes { grid-template-columns: 1fr; }
  #top .fcs-cab-etape { padding: 20px; }
  #top .fcs-cab-duo { grid-template-columns: 1fr; }
  #top .fcs-cab-rgpd { padding: 22px; }

  /* 2 colonnes conservées pour les catégories : 4 vignettes empilées
     rallongeraient la page sans rien apporter, et les visuels restent
     lisibles à cette taille. */
  #top .fcs-cab-cats { grid-template-columns: 1fr 1fr; gap: 12px; }

  #top .fcs-cab-conseil { padding: 22px; border-radius: 18px; }
  #top .fcs-cab-conseil p { font-size: 15px !important; }

  /* Boutons pleine largeur au doigt. */
  #top .fcs-cab-btn,
  #top .fcs-cab-btn-ghost { width: 100%; }
  #top .fcs-cab-cta-row { gap: 12px; }

  /* Pas d'élévation au survol sur tactile : il n'y a pas de survol, et
     l'état resterait « collé » après un tap. */
  #top .fcs-cab-btn:hover,
  #top .fcs-cab-cat:hover { transform: none; }
  #top .fcs-cab-cat:hover .fcs-cab-cat-img img { transform: none; }
}


/* ============================================================
   13. ACCESSIBILITÉ — mouvement réduit
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  #top .fcs-cab-btn,
  #top .fcs-cab-btn-ghost,
  #top .fcs-cab-cat,
  #top .fcs-cab-cat-img img,
  #top .fcs-cab-chev { transition: none; }
  #top .fcs-cab-btn:hover,
  #top .fcs-cab-cat:hover { transform: none; }
  #top .fcs-cab-cat:hover .fcs-cab-cat-img img { transform: none; }
}