/* =========================================================================
   CANDIA PROFESSIONAL — Feuille de styles partagée
   Intégration au pixel près (desktop 1440) + responsive fluide
   ========================================================================= */

/* ----------------------------- Polices ---------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@200;300;400;500;600;700&family=Barlow:wght@300;400;500;600;700&family=National+Park:wght@300;400;500;600;700&family=WindSong:wght@400;500&family=Outfit:wght@300;400;500;600&family=Dosis:wght@300;400;500;600&display=swap");

@font-face {
  font-family: "Connoisseurs";
  src: url("../fonts/Connoisseurs.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------- Tokens ----------------------------------- */
:root {
  --navy: rgb(2, 13, 30);
  --navy-2: rgb(3, 14, 27);
  --gold: rgb(196, 160, 74);
  --gold-light: rgb(243, 195, 115);
  --gold-dark: rgb(180, 117, 46);
  --white: #ffffff;
  --line: rgba(255, 255, 255, 0.4);

  --ff-cond: "Barlow Condensed", system-ui, sans-serif;
  --ff-script: "Connoisseurs", "WindSong", cursive;
  --ff-body: "National Park", system-ui, sans-serif;

  /* largeur de référence Figma */
  --page: 1440px;
  --content: 1144px;       /* zone de contenu centrée (marge 148px) */
  --radius: 12px;

  /* échelle fluide : 1 unité Figma = clamp entre mobile et desktop */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Fond « Candia Signature » : image en cover FIXÉE au viewport (toutes les pages),
     le contenu scrolle par-dessus. --navy en repli derrière l'image. */
  background: var(--navy) url("../medias/images/refonte-2026/img/global/signature-bg.jpg") center center / cover no-repeat fixed;
  color: var(--white);
  font-family: var(--ff-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* zone de contenu centrée standard */
.wrap {
  width: min(var(--content), calc(100% - 80px));
  margin-inline: auto;
}

/* marge intérieure horizontale (ex. paragraphe de la page Vision) */
.p-max-width-c1 {
  padding-left: 40px;
  padding-right: 40px;
}

/* ----------------------- Texture signature ------------------------------ */
/* fond doré pailleté en haut et en bas de page */
.bg-signature-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: min(1440px, 100vw);
  background: url("../medias/images/refonte-2026/img/home/signature-bg.jpg") center top / cover no-repeat;
  pointer-events: none;
  z-index: 0;
}
/* bas de page : texture alignée sur le bas, fondu doux vers le bleu nuit en haut */
.bg-signature-bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: min(1100px, 80vw);
  background: url("../medias/images/refonte-2026/img/home/signature-bg-bottom.png") center bottom / cover no-repeat;
  pointer-events: none;
  z-index: 0;
}
.bg-signature-bottom::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,13,30,1) 0%, rgba(2,13,30,0) 32%);
}

/* =========================================================================
   HEADER / NAVIGATION
   ========================================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: 110px;
  z-index: 100;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  /* Respiration en bas : le logo ne touche pas le bord du fond. */
  padding-bottom: 10px;
  /* Transparent au chargement (le menu se fond dans le héro) ; le fond navy
     apparaît progressivement au scroll via .scrolled (transition ci-dessus). */
  background-color: transparent;
  transition: background-color .35s ease, box-shadow .35s ease;
}
.site-header.scrolled {
  background-color: #020D1E;
  box-shadow: 0 1px 0 rgba(196, 160, 74, 0.25);
}

/* Porté par .site-header : la classe « nav » nue est aussi celle des flèches des
   sliders historiques (.content-prev.nav / .content-next.nav), dont le rond de
   60x60 se retrouvait étiré en grille pleine largeur. */
.site-header .nav {
  width: min(1320px, calc(100% - 48px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-left { justify-content: flex-end; }
.nav-right { justify-content: flex-start; }

.nav-item { position: relative; }
.nav-link {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  padding: 8px 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color .25s ease;
}
.nav-link:hover,
.nav-item:hover .nav-link { color: var(--white); }
.nav-link .caret {
  font-size: 10px;
  transition: transform .25s ease;
  color: var(--gold);
}
.nav-item:hover .nav-link .caret { transform: rotate(180deg); }

/* logo central */
.nav-logo { display: flex; justify-content: center; }
/* Largeur réduite (118 → 100px) : le logo (image pleine, sans marge) faisait
   ~113px de haut pour un header de 110px et touchait donc le bord bas du fond au
   scroll. À 100px il tient dans la zone de contenu et conserve ≥10px sous lui
   (padding-bottom du .site-header) sans rogner le haut. */
.nav-logo img { width: 100px; height: auto; }

/* chevron des entrées à sous-menu (cf. maquette « Les nouveautés ») */
.nav-caret {
  flex-shrink: 0;
  margin-top: 1px;
  transition: transform .25s ease;
}
.nav-item:hover .nav-caret { transform: rotate(180deg); }

/* dropdown — sous-menu au survol (cf. maquette « Les nouveautés ») */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: -20px;
  margin-top: 14px;
  min-width: 190px;
  background: rgba(3, 15, 32, 0.97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 2px solid var(--gold);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16),
              0 26px 50px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s linear .18s;
  z-index: 60;
}
/* pont invisible entre le libellé et la boîte : on ne perd pas le survol */
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -16px; left: 0; right: 0; height: 16px;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .18s ease-out, transform .18s ease-out;
}
.nav-dropdown a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 20px;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
  transition: color .15s ease;
}
/* pastille dorée devant chaque entrée */
.nav-dropdown a::before {
  content: "";
  width: 3px;
  height: 11px;
  background: var(--gold);
  flex-shrink: 0;
}
/* séparateur fin en retrait de 20px entre deux entrées */
.nav-dropdown a + a::after {
  content: "";
  position: absolute;
  top: 0; left: 20px; right: 20px;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.nav-dropdown a:hover { color: var(--gold); }

/* Page de contenu simple (À propos, etc.) — dégage le header fixe (110px) */
.page-simple { padding: 170px 0 120px; min-height: 60vh; }
.page-simple__inner { max-width: var(--content); margin: 0 auto; padding: 0 24px; }
.page-simple__title {
  font-family: var(--ff-cond); font-weight: 700; font-size: 48px;
  line-height: 1.05; text-transform: uppercase; margin: 0 0 24px;
}
.page-simple__content {
  font-family: var(--ff-body); font-size: 17px; line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}
.page-simple__content a { color: var(--gold); }

/* Instagram (or) + séparateur + sélecteur de langue */
.nav-lang {
  position: absolute;
  right: 0;
  top: 50%;
  /* -5px : recale verticalement le switch de langue sur l'axe du menu principal */
  transform: translateY(calc(-50% - 5px));
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.nav-instagram {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  transition: transform .2s ease;
}
/* icône Instagram (instagram.svg recoloré via mask), dorée puis gold-light au survol */
.nav-instagram-ico {
  width: 22px;
  height: 22px;
  background: var(--gold);
  -webkit-mask: url("../medias/images/generics/instagram.svg") center / contain no-repeat;
          mask: url("../medias/images/generics/instagram.svg") center / contain no-repeat;
  transition: background .2s ease;
}
.nav-instagram:hover { transform: translateY(-1px); }
.nav-instagram:hover .nav-instagram-ico { background: var(--gold-light); }
.nav-sep {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.45);
  display: inline-block;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--white);
  font-family: var(--ff-body);
  font-size: 16px;
  padding: 6px 4px;
}
.lang-btn img { width: 20px; height: 13px; object-fit: cover; }
.lang-btn .caret { font-size: 10px; color: var(--white); transition: transform .25s ease; }
.nav-lang.open .lang-btn .caret { transform: rotate(180deg); }
.lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 150px;
  background: rgba(4, 16, 33, 0.97);
  border: 1px solid rgba(196, 160, 74, 0.35);
  border-radius: var(--radius);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}
.nav-lang.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
/* Items du dropdown : rendus en <a> (drapeau + libellé alignés sur une ligne). */
.lang-menu button,
.lang-menu a {
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; color: rgba(255,255,255,.8);
  font-family: var(--ff-body); font-size: 15px; line-height: 1;
  padding: 9px 12px; border-radius: 8px; text-align: left;
  transition: background .2s ease, color .2s ease;
}
/* Drapeau proportionné au libellé, à gauche du nom du pays. */
.lang-menu button img,
.lang-menu a img { flex: 0 0 auto; width: 20px; height: 13px; object-fit: cover; }
.lang-menu button:hover,
.lang-menu a:hover { background: rgba(196,160,74,.14); color: var(--gold); }

/* burger (mobile) */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  background: none; border: none; padding: 9px;
}
.nav-burger span {
  display: block; height: 2px; width: 100%;
  background: var(--white); border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
.nav-burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.active span:nth-child(2) { opacity: 0; }
.nav-burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================================
   ÉLÉMENTS COMMUNS
   ========================================================================= */

/* Bouton doré avec barre blanche (motif Candia) */
/* Bouton CTA — calqué sur .chefs__cta (homepage-2025) : doré -> inversion blanc/doré au survol */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gold);
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 16px 22px;
  font-family: var(--ff-cond);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  position: relative;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.btn::before {
  content: "";
  width: 4px; height: 15px;
  background: var(--white);
  flex-shrink: 0;
  transition: background .3s ease;
}
/* Swap vertical du libellé au survol (repris du composant historique .ct--button) :
   le libellé visible descend et sort, sa copie arrive du haut. */
.btn__roll { position: relative; display: inline-block; overflow: hidden; vertical-align: middle; top: 1px; }
.btn__txt { display: block; transition: transform .42s cubic-bezier(.75, 0, .125, 1); }
.btn__roll .btn__txt + .btn__txt { position: absolute; left: 0; right: 0; top: 0; transform: translateY(-115%); }
.btn:hover .btn__txt:first-child { transform: translateY(115%); }
.btn:hover .btn__txt + .btn__txt { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .btn__txt { transition: none; } }
.btn:hover {
  background: var(--white);
  color: var(--gold);
}
.btn:hover::before { background: var(--gold); }
/* CTA du bloc « Suivez-nous » (home) : conserve l'espacement de l'ancien bouton. */
.socials__contact-container .btn.socials-btn,
.socials__strat-container .btn.socials-btn { margin-top: 20px; }

/* Lien "EN savoir plus" — style main (barre dorée + texte) : la barre s'allonge de gauche à droite au survol */
.link-tick {
  position: relative;
  display: inline-block;
  padding-left: 25px;
  font-family: var(--ff-cond);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: var(--white);
  text-transform: uppercase;
  transition: color .25s ease;
}
.link-tick::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 15px;
  background: var(--white);
  transition: width .4s cubic-bezier(.16,1,.3,1);
}
.link-tick:hover { color: var(--gold-light); }
.link-tick:hover::before { width: 22px; }

/* flèche SVG dans les boutons ronds */
.arrow-svg { width: 16px; height: auto; display: block; }
.circle-arrow .arrow-svg { width: 18px; }

/* Séparateur de section : libellé + ligne fine */
.divider {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
}
.divider .label {
  font-family: var(--ff-cond);
  font-weight: 700;
  font-size: 25px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: .01em;
}
.divider .line {
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* En-têtes de section (sur-titre + titre script) */
.eyebrow {
  font-family: var(--ff-cond);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
}
.script {
  font-family: var(--ff-script);
  color: var(--gold);
  line-height: 1;
  text-align: center;
  font-weight: 400;
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
  position: relative;
  z-index: 1;
  padding-top: 120px;
}
.footer-cards {
  display: grid;
  grid-template-columns: 360px 1fr 390px;
  gap: 30px;
  align-items: stretch;
}
.fcard {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 30px;
}
.fcard.bordered { border: 1px solid var(--gold); }
.fcard.tint { background: rgba(255, 255, 255, 0.05); }
.fcard .fc-script { font-family: var(--ff-script); color: var(--gold); font-size: 56px; line-height: 1; }
.fcard .fc-title {
  font-family: var(--ff-cond); font-weight: 700; font-size: 30px;
  text-transform: uppercase; margin: 6px 0 26px;
}
.fcard .fc-sub {
  font-family: var(--ff-cond); font-weight: 500; font-size: 18px;
  text-transform: uppercase; color: rgba(255,255,255,.85);
  max-width: 320px; margin: 14px 0 26px;
}
.fc-deco { display: flex; gap: 2px; margin-bottom: 6px; opacity: .9; }

.footer-reel {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 400px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0;
}
.footer-reel .reel-title {
  position: absolute; top: 0; left: 0; right: 0;
  text-align: center; z-index: 3;
  font-family: var(--ff-cond); font-weight: 700; font-size: 24px;
  text-transform: uppercase;
}
.footer-reel .reel-video {
  position: relative;
  margin-top: 46px;
  width: 281px; height: 500px;
  border-radius: var(--radius);
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.footer-reel .reel-video::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,.2);
}
.footer-reel .reel-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 0; height: 0; z-index: 2;
  border-left: 26px solid #fff;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}

.footer-legal-strip {
  position: relative;
  z-index: 1;
  padding-top: 0;
  background: var(--navy); /* #020d1e — maquette */
}
.footer-legal {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  min-height: 145px;
  padding: 0;
  font-size: 16px;
  color: rgba(255,255,255,.6);
}
.footer-legal a { transition: color .2s ease, opacity .2s ease; }
.footer-legal a:hover { color: var(--gold-light); }
/* La tuile empile l'icône et la mention « Suivez-nous » : seule, l'icône se
   confondait avec le bandeau légal. */
.footer-legal .legal-ig {
  align-self: stretch;
  width: 147px;
  background: rgba(255,255,255,.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  text-align: center;
}
.footer-legal .legal-ig-txt {
  font-size: 13px;
  letter-spacing: .04em;
  line-height: 1;
}
.footer-legal .legal-ig:hover .legal-ig-txt { color: var(--gold-light); }
/* icône Instagram (instagram.svg recoloré via mask) : blanche par défaut, dorée au survol */
.footer-legal .legal-ig-ico {
  width: 26px;
  height: 26px;
  background: #fff;
  -webkit-mask: url("../medias/images/generics/instagram.svg") center / contain no-repeat;
          mask: url("../medias/images/generics/instagram.svg") center / contain no-repeat;
  transition: background .2s ease;
}
.footer-legal .legal-ig:hover .legal-ig-ico { background: var(--gold); }
.footer-social-row { display: flex; align-items: center; gap: 18px; }

/* =========================================================================
   ANIMATIONS D'APPARITION AU SCROLL
   ========================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================================
   RESPONSIVE — header
   ========================================================================= */
@media (max-width: 1100px) {
  .site-header .nav { grid-template-columns: auto 1fr auto; }
  .nav-burger { display: flex; order: 1; }
  .nav-logo { order: 2; }
  .nav-lang { position: static; transform: none; order: 3; justify-self: end; }
  .nav-lang::before { display: none; }

  .nav-menus {
    position: fixed;
    inset: 110px 0 0 0;
    background: rgba(2, 13, 30, 0.98);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 24px clamp(24px, 6vw, 60px);
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.16,1,.3,1);
    overflow-y: auto;
  }
  .nav-menus.open { transform: translateX(0); }
  .nav-left, .nav-right { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list .nav-item { border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav-link {
    font-family: var(--ff-cond);
    font-weight: 600;
    font-size: 24px;
    text-transform: uppercase;
    color: #fff;
    padding: 20px 0;
    justify-content: space-between;
  }
  .nav-dropdown {
    position: static;
    transform: none;
    opacity: 1; visibility: visible;
    background: none; border: none; box-shadow: none;
    padding: 0 0 14px 14px;
    min-width: 0;
  }
  .nav-dropdown::before { display: none; }
}

@media (min-width: 1101px) {
  .nav-menus { display: contents; }
  /* placement explicite : sans cela, l'auto-placement de la grille met
     nav-right en colonne centrale et le logo à droite */
  .nav-left  { grid-column: 1; grid-row: 1; }
  .nav-logo  { grid-column: 2; grid-row: 1; }
  /* Groupe de droite aligné à droite ; le padding réserve la place du bloc
     langue (positionné en absolute) pour que l'icône Instagram vienne juste
     avant le séparateur / le sélecteur de langue (cf. maquette). */
  .nav-right { grid-column: 3; grid-row: 1; justify-content: flex-end; padding-right: 104px; }
}

/* ===================== "ET SI" — section contact partagée (refonte 2026) ===================== */
.etsi { position: relative; z-index: 1; padding: 30px 0 30px; }
.etsi-wrap { width: min(1144px, calc(100% - 48px)); margin: 0 auto; text-align: center; }
.etsi-wrap > .script { font-size: clamp(54px,5vw,84px); }
.etsi-wrap > .eyebrow { font-size: clamp(24px,2vw,32px); margin-top: 2px; }
.etsi-figure { position: relative; width: 560px; max-width: 92%; margin: 8px auto 0; aspect-ratio: 560 / 600; }
.etsi-figure .ring { position:absolute; left:50%; top:54%; transform:translate(-50%,-50%); width: 520px; height: 520px; max-width: 96%; aspect-ratio:1; border:1px solid rgba(255,255,255,.18); border-radius:50%; }
.etsi-figure .silhouette { position:absolute; left:50%; bottom:0; transform:translateX(-50%); width: 100%; height: 100%; object-fit: contain; object-position: bottom; opacity:.9; -webkit-mask-image: linear-gradient(180deg,#000 72%,transparent); mask-image: linear-gradient(180deg,#000 72%,transparent); }
.etsi-figure .btn { position:absolute; left:50%; bottom:14%; transform:translateX(-50%); z-index:3; white-space:nowrap; }
.etsi-text { width: min(440px, 86%); margin: -40px auto 0; position: relative; z-index: 2; text-align: center; }
.etsi-text h4 { font-family: var(--ff-cond); font-weight: 700; font-size: 22px; text-transform: uppercase; margin: 0 0 10px; }
.etsi-text p { font-family: var(--ff-body); font-size: 14px; color: rgba(255,255,255,.85); line-height: 1.6; margin: 0; }

/* === Typo des items du menu = maquette (National Park) sur les pages refonte === */
body.refonte-2026 .menu-head .generic-menu .col li a,
body.refonte-2026 .menu-head .generic-menu .col li .menu-child a,
body.refonte-2026 .menu-head .langs li a,
body.refonte-2026 .menu-head .login-wrapper .login a {
  font-family: "National Park", system-ui, sans-serif !important;
  text-transform: none;
}

/* === Couleur des éléments du header (refonte) : blanc #fff à 70% d'opacité au repos.
   On conserve le blanc plein pour la page courante et l'or au survol. === */
body.refonte-2026 .menu-head .generic-menu .col li a,
body.refonte-2026 .menu-head .generic-menu .col li .menu-child a,
body.refonte-2026 .menu-head .langs li a,
body.refonte-2026 .menu-head .login-wrapper .login a { color: rgba(255,255,255,.7); }
body.refonte-2026 .menu-head .generic-menu .col li.current a,
body.refonte-2026 .menu-head .generic-menu .col li .menu-child a.current { color: #fff; }
body.refonte-2026 .menu-head .generic-menu .col li a:hover,
body.refonte-2026 .menu-head .generic-menu .col li .menu-child a:hover,
body.refonte-2026 .menu-head .generic-menu .col li.has-children:hover > a,
body.refonte-2026 .menu-head .langs li a:hover,
body.refonte-2026 .menu-head .login-wrapper .login a:hover { color: #f3b235; }
/* caret des sous-menus accordé au même blanc 70% */
body.refonte-2026 .menu-head .generic-menu .col li.has-children > a::after { border-color: rgba(255,255,255,.7); }
body.refonte-2026 .menu-head .generic-menu .col li.has-children:hover > a::after { border-color: #f3b235; }


/* =========================================================================
   RESPONSIVE — ajustements mobile (refonte 2026)
   ========================================================================= */
@media (max-width: 767px) {
  /* Titres « à filet » : on autorise le retour à la ligne du libellé (sinon, en
     white-space:nowrap, le libellé mange toute la largeur et le filet flex:1
     disparaît). Libellé réduit à 16px. */
  .divider .label { font-size: 16px; white-space: normal; }
  /* Titres en cursive (font-family: var(--ff-script)) : interligne aéré sur mobile
     quand le titre passe sur deux lignes. */
  .script, .script.s-md { line-height: 1.12; }
}

/* Header mobile (menu legacy réutilisé sur les pages refonte) : on s'assure que la
   barre + le burger restent visibles et au-dessus du contenu. */
body.refonte-2026 .ct--menu .head-mobile { z-index: 130; }

/* =========================================================================
   COMPOSANT — Card éditoriale « Gamme » (.art-card)
   Déplacé depuis le <style> inline de la home pour être partagé/réutilisable
   (cf. views/components/refonte/art-card/art-card.generic.twig).
   ========================================================================= */
.art-card { position: relative; height: 319px; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; background-size: cover; background-position: center top; }
/* Les packs produits sont clippés par ce conteneur (et non plus par la carte),
   ainsi le cadre doré peut se dessiner À L'EXTÉRIEUR sans être coupé. */
.art-card .packs { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
/* Cadre doré qui se TRACE autour de la carte au survol (offset ~7px) :
   ::before dessine haut+droite depuis le coin haut-gauche, ::after dessine
   bas+gauche depuis le coin bas-droite -> les deux tracés se rejoignent.
   Au repos la hauteur se rétracte d'abord puis la largeur (effacement inverse). */
.art-card::before, .art-card::after { content: ""; position: absolute; width: 0; height: 0; box-sizing: border-box; pointer-events: none; z-index: 3; transition: height .26s ease, width .26s ease .26s; }
.art-card::before { top: -8px; left: -8px; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.art-card::after { bottom: -8px; right: -8px; border-bottom: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.art-card:hover::before, .art-card:hover::after { width: calc(100% + 16px); height: calc(100% + 16px); transition: width .26s ease, height .26s ease .26s; }
@media (prefers-reduced-motion: reduce) { .art-card::before, .art-card::after { transition: none; } }
.art-card.innov { background: linear-gradient(135deg, #0a1a33 0%, #061226 100%); }
.art-card .veil { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.05) 60%); }
.art-card h3 { position: relative; z-index: 2; margin: 0 0 14px; font-family: var(--ff-cond); font-weight: 700; font-size: 26px; line-height: 1.08; max-width: 420px; text-transform: uppercase; }
.art-card .link-tick { position: relative; z-index: 2; font-size: 15px; }
/* blocs entièrement cliquables + animation "en savoir plus" (barre blanche qui s'allonge au survol du bloc) */
a.art-card, a.vcard { text-decoration: none; color: inherit; }
.art-card:hover .link-tick::before, .vcard:hover .link-tick::before { width: 22px; }
.art-card:hover .link-tick, .vcard:hover .link-tick { color: var(--gold-light); }
.innov .pack { position: absolute; filter: drop-shadow(0 14px 22px rgba(0,0,0,.5)); pointer-events: none; }
.innov .pack.p1 { width: 200px; right: 8%; top: -10%; transform: rotate(-18deg); }
.innov .pack.p2 { width: 150px; right: 38%; top: 28%; transform: rotate(22deg) scaleX(-1); opacity: .95; }
.innov .pack.p3 { width: 110px; right: 4%; top: 52%; transform: rotate(40deg); opacity: .9; }

/* =========================================================================
   COMPOSANT — Card produit (.prow) — page « Nos produits »
   Déplacé depuis le <style> inline de products-2026 pour être partagé
   (cf. views/components/refonte/product-row/product-row.generic.twig).
   NB : .products (conteneur/layout) reste dans la page.
   ========================================================================= */
.prow { position:relative; min-height:440px; overflow:hidden; display:grid; grid-template-columns:46% 54%; align-items:center; scroll-margin-top:120px; }
/* fond dégradé de la card isolé sur sa propre couche : seule l'opacité du fond
   est réduite (35 %), le contenu (texte, visuels, bordure) reste à 100 %. */
.prow-bg { position:absolute; inset:0; z-index:0; background:linear-gradient(103.33deg, var(--g1) 0%, var(--g2) 100%); opacity:.35; pointer-events:none; }
.prow.filtered-out { display:none; }
.prow::before { content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--accent,#5b9bd5); z-index:4; }
.prow-media { position:relative; height:100%; min-height:440px; display:grid; place-items:center; padding:34px 20px; }
.prow-media img:not(.prow-deco) { position:relative; z-index:3; max-height:372px; max-width:70%; object-fit:contain; filter:drop-shadow(0 20px 32px rgba(0,0,0,.5)); }
.prow-sig-mark { position:absolute; left:34px; top:30px; z-index:5; width:208px; height:auto; pointer-events:none; }
/* éléments décoratifs au survol (positionnés via le back-office) */
/* au repos : l'élément est « rangé » sur le produit (décalé vers le centre via
   --dx/--dy calculés selon ses côtés ancrés) et réduit ; au survol il glisse
   jusqu'à sa position finale (top/right/bottom/left). */
.prow-deco { position:absolute; z-index:2; pointer-events:none; opacity:0; transform:translate(var(--dx,0), var(--dy,0)) scale(.5); transition:opacity .5s ease, transform .6s cubic-bezier(.2,.75,.25,1); }
.prow:hover .prow-deco { opacity:1; transform:translate(0,0) scale(1); }
@media (prefers-reduced-motion: reduce){ .prow-deco { transition:opacity .3s ease; transform:none; } .prow:hover .prow-deco { transform:none; } }
/* tactile (mobile) : pas d'effet de survol sur les fiches produits (.prow) — évite
   l'apparition « collée » des éléments décoratifs au tap. Le reste (vignettes) garde son hover. */
@media (hover: none){
  .prow:hover .prow-deco { opacity:0; transform:translate(var(--dx,0), var(--dy,0)) scale(.5); }
}
.prow.sig::after { content:""; position:absolute; left:0; bottom:0; width:62%; height:100%; background:url("../medias/images/refonte-2026/img/np/signature-confettis.png") left bottom / contain no-repeat; pointer-events:none; z-index:1; }
.prow-body { position:relative; z-index:3; text-align:left; padding:46px 60px 46px 14px; max-width:580px; }
.ptags { display:flex; gap:10px; justify-content:flex-start; align-items:center; margin-bottom:22px; min-height:30px; flex-wrap:wrap; }
.ptag { font-family:var(--ff-cond); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; border:1px solid rgba(255,255,255,.55); padding:6px 13px; }
.ptag.sigtag { border-color:var(--gold); color:var(--gold); }
.ptitle { font-family:var(--ff-cond); font-weight:700; line-height:.9; margin:0 0 22px; text-align:left; }
.ptitle .big { display:block; font-size:clamp(48px,5vw,70px); letter-spacing:.02em; text-transform:uppercase; }
.ptitle .sub { display:block; font-size:clamp(20px,1.7vw,27px); font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-top:8px; }
.pdivider { height:1px; background:rgba(255,255,255,.28); margin:0 0 22px; max-width:560px; }
.pdesc { font-family:var(--ff-cond); font-weight:400; font-size:18px; line-height:1.5; color:rgba(255,255,255,.9); max-width:450px; margin:0 0 26px; text-align:left; }
.pstats { display:flex; gap:0; justify-content:flex-start; border:1px solid rgba(255,255,255,.24); overflow:hidden; max-width:640px; margin:0 0 30px; }
/* min-width:0 : sans lui, les cases (flex:1) s'élargissent pour contenir la valeur
   nowrap (min-width:auto) → largeurs inégales et texte coupé par .pstats. Avec 0,
   les 3 cases restent égales et le débordement passe dans la case, où le JS
   (refonte-2026.js) réduit la police de .pstat b pour qu'elle tienne toujours. */
.pstat { flex:1; min-width:0; padding:18px 22px; text-align:left; border-right:1px solid rgba(255,255,255,.24); }
.pstat:last-child { border-right:none; }
.pstat span { display:block; font-family:var(--ff-cond); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.03em; color:var(--gold); margin:0 0 8px; line-height:1; white-space:nowrap; }
.pstat b { display:block; font-family:var(--ff-cond); font-weight:400; font-size:clamp(28px,2.5vw,34px); line-height:1; white-space:nowrap; }
/* Plusieurs formats : la case « Formats disponibles » est un menu déroulant.
   Le menu se superpose au contenu qui suit (bouton « Voir plus ») : la barre de stats
   ne doit donc plus rogner (overflow visible) et la case sert de repère de position. */
.pstats.has-fmt { overflow:visible; }
.pstat-fmt { position:relative; }
.pstat-fmt .fmt-toggle { appearance:none; -webkit-appearance:none; display:flex; align-items:center; gap:10px; width:100%; margin:0; padding:0; background:none; border:0; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.pstat-fmt .fmt-toggle b { flex:1 1 auto; min-width:0; }
.pstat-fmt .fmt-caret { flex:0 0 auto; color:#fff; transition:transform .25s ease; }
.pstat-fmt .fmt-toggle[aria-expanded="true"] .fmt-caret { transform:rotate(180deg); }
.pstat-fmt .fmt-toggle:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
/* Largeur : au moins celle de la case, sinon celle du libellé le plus long
   (width:max-content) pour qu'un format long ne déborde jamais du menu. */
.pstat-fmt .fmt-menu { position:absolute; top:100%; left:-1px; z-index:20; min-width:calc(100% + 2px); width:max-content; max-width:min(360px, 90vw); margin:0; padding:6px 0; list-style:none; background:rgba(20,22,32,.82); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.24); border-top:0; }
.pstat-fmt .fmt-menu[hidden] { display:none; }
.pstat-fmt .fmt-option { position:relative; padding:10px 22px 10px 30px; font-family:var(--ff-cond); font-weight:400; font-size:clamp(24px,2.1vw,30px); line-height:1; color:rgba(255,255,255,.55); white-space:nowrap; cursor:pointer; transition:color .2s ease; }
.pstat-fmt .fmt-option::before { content:""; position:absolute; left:16px; top:50%; width:4px; height:1em; transform:translateY(-50%); background:var(--gold); opacity:0; transition:opacity .2s ease; }
.pstat-fmt .fmt-option:hover, .pstat-fmt .fmt-option:focus-visible { color:#fff; outline:none; }
.pstat-fmt .fmt-option.active { color:#fff; }
.pstat-fmt .fmt-option.active::before { opacity:1; }
@media (max-width:900px){
  .prow { grid-template-columns:1fr; }
  .prow::before { display:none; }
  .prow-media { min-height:280px; }
  /* produits signature : on descend un peu plus l'image produit */
  .prow.sig .prow-media img:not(.prow-deco) { transform:translateY(40px); }
  .prow-body { padding:30px 28px 40px; }
  .ptitle .big { font-size:44px; }
  .pstats { max-width:none; }
}
@media (max-width:560px){
  .pstats { flex-direction:column; }
  .pstat { border-right:none; border-bottom:1px solid rgba(255,255,255,.24); }
  .pstat:last-child { border-bottom:none; }
  /* En colonne, la liste des formats s'insère dans la case (pas de superposition
     sur la case suivante) : elle pousse le contenu au lieu de le recouvrir. */
  .pstat-fmt .fmt-menu { position:static; margin:14px -22px -18px; border:0; border-top:1px solid rgba(255,255,255,.24); background:rgba(0,0,0,.28); backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* =========================================================================
   COMPOSANT — Reel du footer (accueil) : vidéo lue dans la vignette
   Bouton (son on/off, JS refonte-2026.js) contenant la vidéo, lue muette et en
   boucle. Cadre 9:16 aux mêmes arrondis que la vignette image (16 px) ; la
   hauteur 500 px ≥ 1379 px et la largeur < 1379 px viennent du CSS legacy de
   .socials__strat-container__video__image-container. Pastille « Activer le son »
   en bas à droite ; haut-parleur barré tant que la vidéo est muette.
   ========================================================================= */
.reel-inline { display:block; appearance:none; -webkit-appearance:none; padding:0; border:0; background:#000; color:#fff; font:inherit; cursor:pointer; aspect-ratio:9/16; border-radius:16px; overflow:hidden; -webkit-tap-highlight-color:transparent; }
.reel-inline:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.reel-inline__video { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.reel-inline__sound { position:absolute; right:12px; bottom:12px; z-index:2; display:flex; align-items:center; gap:7px; padding:7px 12px 7px 9px; border-radius:999px; border:1px solid rgba(255,255,255,.35); background:rgba(2,13,30,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); font-family:"Barlow Condensed", sans-serif; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; line-height:1; white-space:nowrap; transition:background .2s ease, border-color .2s ease, transform .2s ease; }
.reel-inline:hover .reel-inline__sound, .reel-inline:focus-visible .reel-inline__sound { border-color:var(--gold); background:rgba(2,13,30,.8); transform:scale(1.04); }
.reel-inline__icon { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.reel-inline__icon-speaker { fill:currentColor; stroke:none; }
.reel-inline__icon-wave { opacity:0; transition:opacity .2s ease; }
.reel-inline__icon-off { opacity:1; transition:opacity .2s ease; }
.reel-inline.is-sound-on .reel-inline__icon-wave { opacity:1; }
.reel-inline.is-sound-on .reel-inline__icon-off { opacity:0; }
.reel-inline.is-sound-on .reel-inline__sound { border-color:var(--gold); }
@media (max-width:560px){
  .reel-inline__sound { right:8px; bottom:8px; padding:6px 10px 6px 8px; font-size:12px; }
}

/* =========================================================================
   PONT LEGACY → REFONTE — contraste sur fond navy
   Les pages historiques (base.twig) n'ont PAS la classe body .refonte-2026.
   Elles sont désormais sur fond navy : on force un texte clair pour un bon
   contraste, comme sur la home. Les pages refonte natives (home, vision,
   ambassadeurs, produits, single produit) portent .refonte-2026 et ne sont
   PAS impactées par ce bloc.
   ========================================================================= */
body:not(.refonte-2026) #main,
body:not(.refonte-2026) .container-first {
  color: rgba(255, 255, 255, 0.85);
}
/* Titres & textes de contenu legacy (bleus sombres d'origine) → clair.
   !important pour battre les sélecteurs legacy composés (.page.x .strate .title).
   Sûr : aucun conteneur legacy n'a de fond clair (ils héritaient du blanc de
   page, désormais navy), donc pas de risque blanc-sur-blanc. Les liens (dorés)
   gardent leur couleur explicite. */
body:not(.refonte-2026) .title,
body:not(.refonte-2026) [class*="title-"],
body:not(.refonte-2026) .titles,
body:not(.refonte-2026) .subtitle,
body:not(.refonte-2026) .subtitle-content,
body:not(.refonte-2026) .headline,
body:not(.refonte-2026) .description,
body:not(.refonte-2026) .description-article,
body:not(.refonte-2026) .on-title-article,
body:not(.refonte-2026) .content,
body:not(.refonte-2026) .content-text,
body:not(.refonte-2026) .content-table,
body:not(.refonte-2026) .content-strat,
body:not(.refonte-2026) .text,
body:not(.refonte-2026) .lead,
body:not(.refonte-2026) .label,
body:not(.refonte-2026) .name,
body:not(.refonte-2026) .legals,
body:not(.refonte-2026) .date-article,
body:not(.refonte-2026) .required-fields {
  color: #ffffff !important;
}
/* Champs de formulaire : texte saisi en clair */
body:not(.refonte-2026) .form-input,
body:not(.refonte-2026) .form-select,
body:not(.refonte-2026) .form-textarea {
  color: #ffffff !important;
}

/* =========================================================================
   SINGLE RECETTE (gabarit historique) — retouches de design
   -------------------------------------------------------------------------
   La page charge candia-{device}.css puis cette feuille : les règles ci-dessous
   priment sans toucher au bundle historique, qui est un artefact de build.
   Tout est portée par .page.recipes-entry, donc sans effet sur les autres
   gabarits qui partagent ces composants (héro, vignettes recette).
   ========================================================================= */

/* Chapeau du héro : l'interlettrage de 10px du gabarit historique n'est plus
   voulu (le titre respire déjà assez). */
.page.recipes-entry .ct.ct--hero-banner .txt .hat { letter-spacing: 0; }

/* Portrait de l'ambassadeur : même découpe que sur la page Ambassadeurs, où la
   photo est détourée par un masque SVG (cf. .chef-photo img). La forme fait
   255x262, soit le ratio de la boîte existante (102,7 %) : le masque tombe donc
   pile sur le cadre, sans retoucher les dimensions du gabarit. */
.page.recipes-entry .header .thumb-author .picture > .inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  -webkit-mask: url("../medias/images/refonte-2026/img/vectors/mask-chef-portrait.svg") center / 100% 100% no-repeat;
          mask: url("../medias/images/refonte-2026/img/vectors/mask-chef-portrait.svg") center / 100% 100% no-repeat;
}

/* Ingrédients : la grille est en 3 colonnes de largeur fixe. Sans centrage, une
   dernière ligne incomplète (1, 2, 4, 5... ingrédients) restait plaquée à
   gauche, décalée par rapport au trait décoratif centré du fond. */
.page.recipes-entry .strat.strat-ingredients .strat-content .ingredient-list { justify-content: center; }

/* --- Section « Idéal pour toutes vos créations » --- */

/* Sur-titre en doré, comme les titres script de la refonte (.script).
   !important obligatoire : la règle générique « body:not(.refonte-2026) .headline »
   (plus haut dans cette feuille) repasse en blanc tous les textes des gabarits
   historiques, elle-même en !important. */
.page.recipes-entry .strat.strat-related .related-recipes .head .headline { color: var(--gold) !important; }

/* Même traitement pour le sur-titre du bloc « slider produits » (« Une gamme
   complète et technique… ») : la maquette le veut en doré, le gabarit historique
   le laissait en orange puis la règle générique ci-dessus le repassait en blanc. */
.page.recipes-entry .strat.strat-slider .strat-title .headline { color: var(--gold) !important; }

/* Boutons « + » des vignettes : le doré de la page Notre vision (#C4A04A, cf.
   .page.about-list .ct--button-radius) remplace l'orange historique (#f3b235). */
.page.recipes-entry .ct.ct--button-radius .button-radius { background: var(--gold); }

/* Signature de l'ambassadeur : le libellé « Une recette de + nom » passait en travers
   du portrait, à mi-hauteur. Selon la photo — tablier blanc, fond clair — le nom
   devenait illisible. Il descend dans le creux en bas à droite de la vignette, la zone
   que le masque du portrait ne couvre pas : le texte reste sur l'image, mais sur du
   fond, quelle que soit la photo. Alignement à gauche conservé. */
.page.recipes-entry .header .thumb-author .txt {
  top: auto;
  bottom: -10px;
  left: 72%;
  right: auto;
  text-align: left;
}

/* Étapes : seul le chapeau « ÉTAPE n » quitte l'orange historique (#f3b235) pour
   le doré. Le titre de l'étape, lui, reste en blanc. */
.page.recipes-entry .strat.strat-recipe-steps .step .title .hat { color: var(--gold); }

/* --- Retours « FB Recipes » (octobre 2026) --- */

/* Héro : le titre complet de la recette, sur une seule ligne, une seule police,
   une seule couleur. La taille suit la largeur d'écran pour que les titres
   longs (« Premium Layered Macarons – 4 Flavours ») tiennent sur la ligne. */
.page.recipes-entry .ct.ct--hero-banner.hero-banner--single-line .txt { max-width: 92vw; }
.page.recipes-entry .ct.ct--hero-banner.hero-banner--single-line .txt .title {
  display: block;
  white-space: nowrap;
  color: #ffffff;
  font-size: clamp(2.4rem, 3.6vw, 5rem);
  line-height: 1.1;
}

/* Sous-titres issus des parenthèses (« for 20 cakes », « Total: 1050gr »…) */
.page.recipes-entry .strat.strat-ingredients .quantity-group .subtitle {
  margin: -6px 0 14px;
  color: var(--gold);
  font-style: italic;
}
.page.recipes-entry .strat.strat-recipe-steps .step .title .subtitle {
  margin-top: 10px;
  color: var(--gold);
  font-style: italic;
  text-transform: none;
}

/* Corps des étapes : interligne resserré (2,5rem et 40px entre paragraphes
   dans le gabarit historique). */
.page.recipes-entry .strat.strat-recipe-steps .step .ct--block-text,
.page.recipes-entry .strat.strat-recipe-steps .step .ct--block-text p {
  line-height: 1.6;
}
.page.recipes-entry .strat.strat-recipe-steps .step .ct--block-text p { margin-bottom: 12px; }
.page.recipes-entry .strat.strat-recipe-steps .step { margin-bottom: 90px; }

/* Produits Candia Professional en gras, dans les listes d'ingrédients et les étapes */
.page.recipes-entry .quantity-item .name strong,
.page.recipes-entry .strat.strat-recipe-steps .ct--block-text strong { font-weight: 700; }

/* « The Chef's Signature Touch » : section à part, hors numérotation */
.page.recipes-entry .strat.strat-recipe-steps .step.step--signature {
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  padding: 50px 0 38px;
}
.page.recipes-entry .strat.strat-recipe-steps .step.step--signature .title { margin-bottom: 24px; }
.page.recipes-entry .strat.strat-recipe-steps .step.step--signature .title .label { color: var(--gold); }
.page.recipes-entry .strat.strat-recipe-steps .step.step--signature .ct--block-text { text-align: center; font-style: italic; }

/* Gabarit mobile (body.mobile → candia-mobile.css) : la vignette y est plus petite et
   décalée de -60px dans son conteneur ; le creux se situe donc plus à gauche. */
body.mobile .page.recipes-entry .header .thumb-author .txt {
  top: auto;
  bottom: -8px;
  left: 50%;
  right: auto;
  width: auto;
  text-align: left;
}

/* Fond du carousel produits (single recette) : la photo de main est remplacée
   par le décor des fiches produit — poussière d'étoiles en gamme Signature,
   trait tracé à la main sinon. Les deux se placent derrière les packshots
   (.bg-img, z-index supérieur) et ne captent pas le pointeur. */
.page.recipes-entry .ct.ct--slider-advanced .bg-slide-stars,
.page.recipes-entry .ct.ct--slider-advanced .bg-slide-thread {
  position: absolute;
  /* Centré sur le packshot, pas sur la boîte : .bg-img est posé à left:-3%,
     top:25%, en 90%x80% — son centre tombe donc vers 42% / 65%. */
  top: 65%;
  left: 42%;
  transform: translate(-50%, -50%);
  max-width: none;
  height: auto;
  z-index: 0;
  pointer-events: none;
}
/* Échelle. Les fiches produit dessinent les deux décors à peu près à leur
   taille naturelle : la poussière d'étoiles fait 400 px de large, le trait est
   tracé dans un viewBox de 556 px. C'est ce qui donne au trait sa finesse — il
   est dessiné, pas redimensionné, et l'épaissir le rend lourd. On garde donc
   l'échelle du trait (560 px, comme le héro des fiches produit) et on laisse
   les étoiles déborder pour bien envelopper le packshot. */
.page.recipes-entry .ct.ct--slider-advanced .bg-slide-stars  { width: 144%; }
.page.recipes-entry .ct.ct--slider-advanced .bg-slide-thread { width: min(560px, 100%); }

/* Les deux décors sont posés ; on révèle celui du produit affiché. La classe
   is-signature est placée par le slider (cf. slider-advanced.generic.twig) à
   chaque changement de diapositive. */
.page.recipes-entry .ct.ct--slider-advanced .bg-slide-stars,
.page.recipes-entry .ct.ct--slider-advanced .bg-slide-thread {
  opacity: 0;
  transition: opacity .6s ease;
}
.page.recipes-entry .ct.ct--slider-advanced .bg-strat:not(.is-signature) .bg-slide-thread,
.page.recipes-entry .ct.ct--slider-advanced .bg-strat.is-signature .bg-slide-stars {
  opacity: 1;
}

/* =========================================================================
   MENU — comptes Instagram
   -------------------------------------------------------------------------
   La marque tient six comptes : le logo du menu ouvre la liste au lieu de
   pointer un compte. Deux présentations du même balisage (cf. header.twig) :
   au-dessus de 1100px une modale sous le menu, en dessous le second écran du
   menu, amené par un balayage vers la gauche comme dans une appli.
   Cotes relevées sur la maquette Figma « modale-insta-desktop » (cadre 1440)
   et « mobile » (cadre 375).
   ========================================================================= */
.nav-item--ig { position: relative; }
.nav-instagram { background: none; border: 0; padding: 0; cursor: pointer; }

/* Lignes de la liste — communes aux deux présentations. Le filet court sur
   toute la largeur de la ligne, donc il est porté par le <li> et non par le
   lien, qui peut avoir des marges intérieures. */
.ig-list { list-style: none; margin: 0; padding: 0; }
.ig-row a { display: flex; gap: 4px; align-items: baseline; text-decoration: none; }
.ig-pays {
  font-family: var(--ff-cond);
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
}
.ig-compte { font-family: var(--ff-body); font-weight: 600; color: var(--gold); }
.ig-row a:hover .ig-pays { color: var(--gold); }
.ig-glyph {
  display: inline-block;
  background: var(--gold);
  -webkit-mask: url("../medias/images/generics/instagram.svg") center / contain no-repeat;
          mask: url("../medias/images/generics/instagram.svg") center / contain no-repeat;
}
.ig-title { font-family: var(--ff-script); color: var(--gold); }

/* ---------- Desktop : modale sous le menu ---------- */
@media (min-width: 1101px) {
  .ig-pane { display: none; }

  /* 436x278, fond à 20 % flouté (la maquette pose un flou d'arrière-plan de
     51px), rayon 19px. right:0 : le bord droit tombe sur celui de l'icône,
     comme sur la maquette, sans valeur magique. */
  .ig-modal {
    position: absolute;
    /* 45px sous l'item : le haut de la modale tombe à 107px du haut de page,
       soit 3px au-dessus du bas du header (110px), comme sur la maquette. */
    top: calc(100% + 45px);
    right: 0;
    width: 436px;
    height: 278px;
    border-radius: 19px;
    background: rgba(3, 27, 47, .2);
    -webkit-backdrop-filter: blur(51px);
            backdrop-filter: blur(51px);
    z-index: 60;
  }
  /* Repli : sans flou d'arrière-plan le fond à 20 % laisserait lire la page
     au travers, donc on l'opacifie. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ig-modal { background: rgba(3, 27, 47, .96); }
  }
  .ig-modal[hidden] { display: none; }

  /* Le calque de titre de la maquette porte deux styles dans le même bloc :
     « Suivez-nous » en Barlow Condensed SemiBold 20px capitales blanches, et
     « sur Instagram » en Connoisseurs 48px doré. Le mobile, lui, n'a pas de
     surcharge et reste tout en script doré.
     Centré sur x=105,5 (le centre du bloc de la maquette, sur lequel le
     pictogramme est aligné) : la colonne grandit symétriquement si le rendu
     des polices diffère un peu de Figma. */
  .ig-modal .ig-title {
    position: absolute;
    left: 105.5px;
    top: 118px;
    transform: translateX(-50%);
    width: max-content;
    margin: 0;
    text-align: center;
  }
  .ig-modal .ig-t1 {
    display: block;
    font-family: var(--ff-cond);
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
  }
  .ig-modal .ig-t2 {
    display: block;
    font-size: 48px;
    line-height: 33px;
    white-space: nowrap;
  }
  .ig-modal .ig-glyph { position: absolute; left: 50%; transform: translateX(-50%); top: -21px; width: 15px; height: 15px; }

  .ig-modal .ig-list { position: absolute; left: 209px; top: 29px; width: 189px; }
  .ig-modal .ig-pays   { font-size: 13px; line-height: 16px; }
  .ig-modal .ig-compte { font-size: 11px; line-height: 15px; }
  /* pas de 41,6px (maquette) : la ligne mesure 16,5px une fois le compte
     aligné sur la base du pays, donc 16,5 + 12 + 1 (filet) + 12 = 41,5. */
  .ig-modal .ig-row + .ig-row {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .2);
  }

  .ig-close {
    position: absolute;
    top: 9px;
    right: 10px;
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .85);
    cursor: pointer;
  }
  .ig-close svg { width: 9px; height: 9px; }
  .ig-close:hover { color: #fff; }
}

/* ---------- Mobile : second écran du menu ---------- */
@media (max-width: 1100px) {
  .ig-modal { display: none; }

  /* Le logo n'est plus collé au filet de « Nous contacter », et la liste des
     entrées ne se referme plus par un filet sous le logo (cf. retour vidéo). */
  .nav-item--ig { border-bottom: 0 !important; padding-top: 18px; }

  .ig-pane {
    position: fixed;
    inset: 110px 0 0 0;
    background: #020E1E;
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.16, 1, .3, 1);
    overflow-y: auto;
    z-index: 50;
    visibility: hidden;
  }
  .site-header.ig-open .ig-pane { transform: translateX(0); visibility: visible; }
  /* Le menu part vers la gauche pendant que la liste arrive : les deux écrans
     se poussent, comme un menu d'appli. */
  .site-header.ig-open .nav-menus.open { transform: translateX(-100%); }

  /* 30x30 pour la cible tactile, centré sur le chevron de 10x18 que pose la
     maquette à (22, 149) — soit un centre à (27, 158). */
  .ig-back {
    position: absolute;
    left: 12px;
    top: 33px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
  }
  .ig-back svg { width: 10px; height: 18px; }

  .ig-pane .ig-title {
    margin: 13px 0 0;
    padding-left: 53px;
    font-size: 64px;
    line-height: 71px;
  }
  .ig-pane .ig-glyph { width: 23px; height: 23px; margin-left: 8px; vertical-align: middle; }

  .ig-pane .ig-list { margin-top: 18px; padding-bottom: 40px; }
  .ig-pane .ig-row a { gap: 6px; padding: 0 20px; }
  .ig-pane .ig-pays   { font-size: 20px; line-height: 24px; }
  .ig-pane .ig-compte { font-size: 16px; line-height: 21px; }
  /* pas de 64px (maquette) : la ligne mesure 25px une fois le compte aligné
     sur la base du pays, donc 25 + 20 + 1 (filet) + 18 = 64. */
  .ig-pane .ig-row + .ig-row {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ig-pane { transition: none; }
}