/* ============================================================================
   WEBENA WEDDINGS · V10
   ----------------------------------------------------------------------------
   Refonte complète de l'index Weddings. Ce fichier ne remplace rien : il
   prolonge section-v8.css (teintes et ponts) et ajoute les grilles de
   vignettes propres à la page. Il se charge en dernier, après
   v9-typography.css, pour pouvoir corriger localement l'échelle de texte
   dans les cadres, où 18 px serait beaucoup trop gros.

   Sommaire
     1. Teintes ajoutées et ponts de couleur
     2. Sections sombres : lisibilité
     3. En-tête de section
     4. Grilles
     5. Vignette de démonstration
     6. Réalisation
     7. Packs
     8. Options
     9. Appel au projet
    10. Questions fréquentes
    11. Réglages responsive
   ============================================================================ */

/* ==================================== 1. TEINTES AJOUTÉES ET PONTS DE COULEUR */
/* section-v8.css connaît ivory, sand, linen et warm. On ajoute trois teintes
   pour la page Weddings : terracotta et charbon, demandées pour les sections
   Réalisations et Invitations, et blush, qui sert de dernière marche claire
   avant le pied de page charbon. */
:root{
  --wed-terracotta:#A85C42;
  --wed-charbon:#1F1F1F;
  --wed-blush:#E8DACB;
  /* Un pont sortant d'un aplat sombre doit descendre plus vite qu'un pont
     clair, sinon le titre suivant commence sur un gris sale. Il reste
     toujours plus court que le padding haut d'une section, clamp(76px,11vw,130px). */
  --wed-bridge-dark:clamp(64px,8.4vw,112px);
}

.wb-section[data-tone="terracotta"]{background:var(--wed-terracotta)}
.wb-section[data-tone="charbon"]  {background:var(--wed-charbon)}
.wb-section[data-tone="blush"]    {background:var(--wed-blush)}

/* sand → terracotta */
.wb-section[data-from="sand"][data-tone="terracotta"]{
  background:linear-gradient(180deg,#F1ECE6 0,rgba(241,236,230,0) var(--wb-bridge)),var(--wed-terracotta);
}
/* terracotta → charbon : deux aplats sombres, le pont reste doux */
.wb-section[data-from="terracotta"][data-tone="charbon"]{
  background:linear-gradient(180deg,var(--wed-terracotta) 0,rgba(168,92,66,0) var(--wb-bridge)),var(--wed-charbon);
}
/* charbon → linen : la remontée vers le clair, en courbe accélérée */
.wb-section[data-from="charbon"][data-tone="linen"]{
  background:linear-gradient(180deg,
      #1F1F1F 0,
      rgba(31,31,31,.52) calc(var(--wed-bridge-dark) * .30),
      rgba(31,31,31,.16) calc(var(--wed-bridge-dark) * .62),
      rgba(31,31,31,0)   var(--wed-bridge-dark)),
    #F3EEE8;
}
/* warm → blush : la dernière marche avant le pied de page */
.wb-section[data-from="warm"][data-tone="blush"]{
  background:linear-gradient(180deg,#EFE7DF 0,rgba(239,231,223,0) var(--wb-bridge)),var(--wed-blush);
}

/* ============================================ 2. SECTIONS SOMBRES : LISIBILITÉ */
.wb-section[data-tone="terracotta"],
.wb-section[data-tone="charbon"]{color:#F6F0EA}
.wb-section[data-tone="terracotta"] h2,
.wb-section[data-tone="terracotta"] h3,
.wb-section[data-tone="charbon"] h2,
.wb-section[data-tone="charbon"] h3{color:#FBF7F3}

body.wb-page .wb-section[data-tone="terracotta"] .page-copy,
body.wb-page .wb-section[data-tone="terracotta"] p,
body.wb-page .wb-section[data-tone="charbon"] .page-copy,
body.wb-page .wb-section[data-tone="charbon"] p{color:rgba(247,243,239,.78)}

.wb-section[data-tone="terracotta"] .wed-eyebrow{color:rgba(247,243,239,.72)}
.wb-section[data-tone="charbon"] .wed-eyebrow{color:var(--wb-gold)}

/* ==================================================== 3. EN-TÊTE DE SECTION */
.wed-head{max-width:78ch;margin-bottom:clamp(30px,3.6vw,52px)}
.wed-eyebrow{
  display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:#7C5A22;margin-bottom:14px;
}
.wed-head h2{margin:0}
body.wb-page main .wed-head p{
  font-size:16px!important;line-height:1.75!important;color:#5F584F;
  max-width:70ch;margin-top:var(--gap-title,20px);
}
.wb-section[data-tone="terracotta"] .wed-head p,
.wb-section[data-tone="charbon"] .wed-head p{color:rgba(247,243,239,.78)}

/* Un rappel discret sous une grille : note, précision, mention légale. */
.wed-note{
  margin-top:clamp(20px,2.4vw,30px);padding-top:16px;
  border-top:1px solid var(--wb-line);max-width:74ch;
}
body.wb-page main .wed-note{font-size:12.5px!important;line-height:1.7!important;color:#6B6259}
.wed-note a{border-bottom:1px solid currentColor}

/* ============================================================== 4. GRILLES */
.wed-grid{display:grid;gap:clamp(18px,2vw,26px);grid-template-columns:repeat(3,minmax(0,1fr))}
.wed-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,32px)}
.wed-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.5vw,20px)}

/* ================================================ 5. VIGNETTE DE DÉMONSTRATION */
.wed-card{
  display:flex;flex-direction:column;min-width:0;
  background:#FBF8F4;border:1px solid rgba(31,31,31,.13);
  transition:border-color .3s var(--wb-ease),transform .3s var(--wb-ease),
             box-shadow .3s var(--wb-ease);
}
.wed-card:hover,.wed-card:focus-visible{
  border-color:var(--wb-gold);transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(31,31,31,.09);outline:none;
}
.wed-card__shot{
  display:block;aspect-ratio:16/10;overflow:hidden;background:#E9E2D9;
  border-bottom:1px solid rgba(31,31,31,.1);
}
.wed-card__shot img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .7s var(--wb-ease);
}
.wed-card:hover .wed-card__shot img{transform:scale(1.04)}
.wed-card__body{
  display:flex;flex-direction:column;flex:1;
  padding:clamp(18px,1.8vw,24px) clamp(18px,1.8vw,24px) clamp(18px,1.8vw,22px);
}
.wed-card__pack{
  font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;
  color:#7C5A22;margin-bottom:11px;
}
body.wb-page main .wed-card h3{
  font-family:var(--wb-serif);font-weight:400;
  font-size:26px!important;line-height:1.1!important;letter-spacing:-.01em!important;margin:0;
}
.wed-card__theme{
  display:block;margin-top:7px;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#8A8178;
}
body.wb-page main .wed-card p{
  font-size:14.5px!important;line-height:1.65!important;
  color:#5F584F;margin-top:13px;max-width:none;
}
.wed-card__label{
  display:block;margin-top:18px;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#8A8178;
}
.wed-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.wed-card__tags i{
  font-style:normal;font-size:10px;letter-spacing:.05em;line-height:1;
  padding:6px 9px;border:1px solid rgba(31,31,31,.17);color:#6E665C;
}
.wed-card__go{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:auto;padding-top:16px;
  border-top:1px solid rgba(31,31,31,.12);
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:#1F1F1F;
}
/* La ligne de séparation a besoin d'air : sans cette marge, elle viendrait
   coller les étiquettes d'options quand la description est courte. */
.wed-card__tags + .wed-card__go,
.wed-card p + .wed-card__go{margin-top:18px}
.wed-card__go b{
  font-size:15px;line-height:1;color:var(--wb-gold);font-weight:400;
  transition:transform .3s var(--wb-ease);
}
.wed-card:hover .wed-card__go b{transform:translateX(4px)}
/* Les invitations sont dessinées pour le téléphone : leur capture est plus
   haute que large, on lui laisse donc un cadre moins panoramique. */
.wed-card--tall .wed-card__shot{aspect-ratio:4/3}

/* Déclinaison sombre, pour les vignettes posées sur charbon. */
.wb-section[data-tone="charbon"] .wed-card{
  background:rgba(247,243,239,.045);border-color:rgba(247,243,239,.16);
}
.wb-section[data-tone="charbon"] .wed-card:hover{
  border-color:var(--wb-gold);box-shadow:0 20px 44px rgba(0,0,0,.34);
}
.wb-section[data-tone="charbon"] .wed-card__shot{border-bottom-color:rgba(247,243,239,.14)}
.wb-section[data-tone="charbon"] .wed-card__pack{color:var(--wb-gold)}
.wb-section[data-tone="charbon"] .wed-card__theme,
.wb-section[data-tone="charbon"] .wed-card__label{color:rgba(247,243,239,.55)}
body.wb-page .wb-section[data-tone="charbon"] .wed-card p{color:rgba(247,243,239,.74)}
.wb-section[data-tone="charbon"] .wed-card__tags i{
  border-color:rgba(247,243,239,.22);color:rgba(247,243,239,.72);
}
.wb-section[data-tone="charbon"] .wed-card__go{
  color:#F7F3EF;border-top-color:rgba(247,243,239,.18);
}

/* ======================================================== 6. RÉALISATION */
.wed-real{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(30px,4.4vw,66px);align-items:center;
}
.wed-real__shot{
  display:block;overflow:hidden;background:rgba(0,0,0,.18);
  border:1px solid rgba(247,243,239,.2);
}
.wed-real__shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--wb-ease);
}
.wed-real__shot:hover img{transform:scale(1.03)}
.wed-real__copy .wed-eyebrow{margin-bottom:16px}
.wed-real__facts{
  display:grid;gap:0;margin-top:clamp(24px,2.8vw,34px);
  border-top:1px solid rgba(247,243,239,.26);
}
.wed-real__facts div{
  display:grid;grid-template-columns:minmax(110px,.4fr) minmax(0,1fr);
  gap:18px;padding:13px 0;border-bottom:1px solid rgba(247,243,239,.18);
}
.wed-real__facts dt,.wed-real__facts b{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(247,243,239,.66);font-weight:400;
}
body.wb-page main .wed-real__facts span{
  display:block;font-size:14px;line-height:1.6;color:rgba(247,243,239,.92);
}
.wed-real__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,2.8vw,34px)}

/* Bouton clair, pour les aplats sombres. */
.wed-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;padding:0 28px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid currentColor;transition:.28s var(--wb-ease);
}
.wed-btn--solid{background:#F7F3EF;color:#1F1F1F;border-color:#F7F3EF}
.wed-btn--solid:hover{background:var(--wb-gold);border-color:var(--wb-gold);color:#1F1F1F}
.wed-btn--ghost{color:#F7F3EF}
.wed-btn--ghost:hover{background:rgba(247,243,239,.12)}
.wed-btn--ink{background:var(--wb-ink);color:var(--wb-ivory);border-color:var(--wb-ink)}
.wed-btn--ink:hover{background:#000;border-color:#000}
.wed-btn--line{color:#1F1F1F;border-color:rgba(31,31,31,.35)}
.wed-btn--line:hover{border-color:#1F1F1F}

/* ============================================================== 7. PACKS */
.wed-pack{
  display:flex;flex-direction:column;min-width:0;
  background:#FBF8F4;border:1px solid rgba(31,31,31,.13);
  padding:clamp(20px,2vw,26px) clamp(18px,1.8vw,24px) clamp(20px,2vw,26px);
  transition:border-color .3s var(--wb-ease),box-shadow .3s var(--wb-ease);
}
.wed-pack:hover{border-color:var(--wb-gold);box-shadow:0 16px 36px rgba(31,31,31,.08)}
.wed-pack--star{border-color:var(--wb-gold)}
.wed-pack__flag{
  display:inline-block;margin-bottom:12px;padding:5px 10px;
  background:var(--wb-gold);color:#1F1F1F;
  font-size:9px;letter-spacing:.17em;text-transform:uppercase;
}
/* Aligne le titre des packs sans bandeau sur celui du pack mis en avant :
   21 px de bandeau plus ses 12 px de marge basse. */
.wed-pack__spacer{display:block;height:33px}
body.wb-page main .wed-pack h3{
  font-family:var(--wb-serif);font-weight:400;
  font-size:29px!important;line-height:1.06!important;margin:0;
}
.wed-pack__for{
  display:block;margin-top:9px;min-height:44px;
  font-size:12.5px;line-height:1.6;color:#6E665C;
}
.wed-pack__price{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:16px 0 4px;padding-top:15px;border-top:1px solid rgba(31,31,31,.14);
}
.wed-pack__price del{font-size:12.5px;color:#8A8178}
.wed-pack__price strong{
  font-family:var(--wb-serif);font-size:31px;font-weight:500;color:#7C5A22;line-height:1;
}
.wed-pack__vat{display:block;font-size:10px;letter-spacing:.1em;color:#8A8178;margin-bottom:16px}
.wed-pack__label{
  display:block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#8A8178;margin:2px 0 10px;
}
.wed-pack ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.wed-pack li{
  position:relative;padding-left:17px;
  font-size:13px;line-height:1.55;word-spacing:.06em;color:#5F584F;
}
.wed-pack li:before{
  content:"";position:absolute;left:0;top:9px;width:8px;height:1px;background:var(--wb-gold);
}
.wed-pack li b{font-weight:600;color:#3F3931}
.wed-pack__foot{
  margin-top:auto;padding-top:18px;display:grid;gap:10px;
}
.wed-pack__foot .wed-btn{min-height:48px;width:100%;padding:0 16px;font-size:10px;letter-spacing:.12em}
.wed-pack__demo{
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  text-align:center;color:#6E665C;border-bottom:1px solid rgba(31,31,31,.25);
  padding-bottom:4px;justify-self:center;
}
.wed-pack__demo:hover{color:#7C5A22;border-color:#7C5A22}

.wed-launch{
  display:flex;gap:clamp(16px,2.4vw,32px);align-items:baseline;flex-wrap:wrap;
  margin-bottom:clamp(26px,3vw,38px);padding:16px 0;
  border-top:1px solid var(--wb-gold);border-bottom:1px solid var(--wb-line);
}
.wed-launch strong{font-family:var(--wb-serif);font-size:26px;font-weight:400}
.wed-launch span{font-size:12px;line-height:1.6;color:#5F584F;max-width:62ch}

/* ============================================================ 8. OPTIONS */
.wed-options{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:clamp(10px,1.1vw,14px);
}
.wed-option{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:15px 17px;background:#FBF8F4;border:1px solid rgba(31,31,31,.12);
  transition:border-color .26s var(--wb-ease);
}
.wed-option:hover{border-color:var(--wb-gold)}
.wed-option span{font-size:13.5px;line-height:1.45;color:#3F3931}
.wed-option b{
  font-family:var(--wb-serif);font-size:19px;font-weight:500;
  color:#7C5A22;white-space:nowrap;
}
.wed-options-more{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  margin-top:clamp(24px,2.8vw,34px);
}

/* ==================================================== 9. APPEL AU PROJET */
.wed-cta{
  display:grid;justify-items:center;text-align:center;
  gap:clamp(18px,2vw,26px);max-width:860px;margin-inline:auto;
}
.wed-cta h2{margin:0}
body.wb-page main .wed-cta p{
  font-size:16.5px!important;line-height:1.75!important;color:#5F584F;max-width:60ch;margin:0;
}
.wed-cta__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:6px}
.wed-cta__mention{font-size:11px;letter-spacing:.1em;color:#7A716A}

/* ============================================ 10. QUESTIONS FRÉQUENTES */
.wed-faq{display:grid;max-width:1000px;border-top:1px solid rgba(31,31,31,.16)}
.wed-faq details{border-bottom:1px solid rgba(31,31,31,.16)}
.wed-faq summary{
  position:relative;list-style:none;cursor:pointer;
  padding:20px 48px 20px 0;
  font-family:var(--wb-serif);font-size:clamp(21px,2.2vw,27px);line-height:1.25;
}
.wed-faq summary::-webkit-details-marker{display:none}
.wed-faq summary::marker{content:""}
.wed-faq summary:hover{color:#7C5A22}
.wed-faq summary:after{
  content:"";position:absolute;right:8px;top:50%;
  width:13px;height:1px;background:#1F1F1F;
}
.wed-faq summary:before{
  content:"";position:absolute;right:14px;top:calc(50% - 6px);
  width:1px;height:13px;background:#1F1F1F;transition:transform .3s var(--wb-ease),opacity .3s;
}
.wed-faq details[open] summary:before{transform:rotate(90deg);opacity:0}
body.wb-page main .wed-faq p{
  font-size:15px!important;line-height:1.75!important;color:#5F584F;
  max-width:78ch;margin:0 0 22px;padding-right:48px;
}

/* ================================================ 11. RÉGLAGES RESPONSIVE */
@media(max-width:1180px){
  .wed-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1080px){
  .wed-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wed-real{grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vw,40px)}
  .wed-real__shot{aspect-ratio:16/10}
}
@media(max-width:760px){
  .wed-grid,.wed-grid--2,.wed-grid--4{grid-template-columns:minmax(0,1fr)}
  .wed-options{grid-template-columns:minmax(0,1fr)}
  .wed-pack__for{min-height:0}
  .wed-pack__spacer{display:none}
  .wed-real__facts div{grid-template-columns:minmax(0,1fr);gap:5px}
  .wed-btn,.wed-cta__actions .wed-btn,.wed-real__actions .wed-btn{width:100%}
  .wed-real__actions,.wed-cta__actions,.wed-options-more{width:100%}
  body.wb-page main .wed-faq p{padding-right:0}
}
@media(prefers-reduced-motion:reduce){
  .wed-card,.wed-card__shot img,.wed-real__shot img,.wed-card__go b{transition:none}
  .wed-card:hover{transform:none}
  .wed-card:hover .wed-card__shot img,.wed-real__shot:hover img{transform:none}
}

/* ============================================================================
   CORRECTION TYPOGRAPHIQUE · CHARTE WEBENA
   Portée STRICTEMENT à la page Weddings.
   ============================================================================ */
@font-face{
  font-family:'Cormorant Garamond';
  src:url('../assets/fonts/cormorant.ttf') format('truetype-variations'),
      url('../assets/fonts/cormorant.ttf') format('truetype');
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('../assets/fonts/cormorant-italic.ttf') format('truetype-variations'),
      url('../assets/fonts/cormorant-italic.ttf') format('truetype');
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
}

/* Titres éditoriaux : Cormorant Garamond. */
body.wb-page[data-active="Weddings"] main h1,
body.wb-page[data-active="Weddings"] main h2,
body.wb-page[data-active="Weddings"] main h3,
body.wb-page[data-active="Weddings"] main .wed-card h3,
body.wb-page[data-active="Weddings"] main .wed-pack h3,
body.wb-page[data-active="Weddings"] main .wed-faq summary,
body.wb-page[data-active="Weddings"] main .wed-launch strong{
  font-family:'Cormorant Garamond', Cormorant, Georgia, serif !important;
}

/* Texte fonctionnel et courant : Montserrat. */
body.wb-page[data-active="Weddings"] main p,
body.wb-page[data-active="Weddings"] main li,
body.wb-page[data-active="Weddings"] main .wed-eyebrow,
body.wb-page[data-active="Weddings"] main .wed-card__pack,
body.wb-page[data-active="Weddings"] main .wed-card__theme,
body.wb-page[data-active="Weddings"] main .wed-card__label,
body.wb-page[data-active="Weddings"] main .wed-card__tags,
body.wb-page[data-active="Weddings"] main .wed-card__go,
body.wb-page[data-active="Weddings"] main .wed-pack__for,
body.wb-page[data-active="Weddings"] main .wed-pack__price,
body.wb-page[data-active="Weddings"] main .wed-pack__vat,
body.wb-page[data-active="Weddings"] main .wed-pack__label,
body.wb-page[data-active="Weddings"] main .wed-pack__foot,
body.wb-page[data-active="Weddings"] main .wed-pack__demo,
body.wb-page[data-active="Weddings"] main .wed-btn,
body.wb-page[data-active="Weddings"] main .page-actions,
body.wb-page[data-active="Weddings"] main button,
body.wb-page[data-active="Weddings"] main label,
body.wb-page[data-active="Weddings"] main small{
  font-family:Montserrat, Arial, sans-serif !important;
}


/* ============================================================================
   WEDDINGS · ÉCHELLE TYPOGRAPHIQUE VALIDÉE
   H3 volontairement inchangés.
   ============================================================================ */
@media (min-width:1024px){
  body.wb-page[data-active="Weddings"] main h1{
    font-size:56px!important;
    line-height:1.02!important;
    font-weight:600!important;
  }
  body.wb-page[data-active="Weddings"] main h2{
    font-size:40px!important;
    line-height:1.08!important;
    font-weight:600!important;
  }
}
@media (min-width:768px) and (max-width:1023px){
  body.wb-page[data-active="Weddings"] main h1{
    font-size:46px!important;
    line-height:1.02!important;
    font-weight:600!important;
  }
  body.wb-page[data-active="Weddings"] main h2{
    font-size:34px!important;
    line-height:1.08!important;
    font-weight:600!important;
  }
}
@media (max-width:767px){
  body.wb-page[data-active="Weddings"] main h1{
    font-size:36px!important;
    line-height:1.04!important;
    font-weight:600!important;
  }
  body.wb-page[data-active="Weddings"] main h2{
    font-size:30px!important;
    line-height:1.1!important;
    font-weight:600!important;
  }
}

/* ============================================================================
   WEDDINGS · PREVIEW MOBILE DES DÉMOS (desktop uniquement)
   ============================================================================ */
body.wb-mobile-preview-open{overflow:hidden}

.wed-card__actions{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  margin-top:auto;padding-top:0;
}
.wed-card__actions::before{
  content:"";flex:0 0 100%;height:1px;background:rgba(31,31,31,.12);
  margin:16px 0 2px;
}
.wed-card__actions .wed-card__go{
  flex:0 0 auto;margin-top:0;padding-top:0;border-top:0;
  justify-content:center;
}
.wed-card__preview{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;padding:0 14px;flex-shrink:0;
  border:1px solid rgba(31,31,31,.18);background:transparent;
  color:#6B6259;font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  cursor:pointer;transition:border-color .25s var(--wb-ease),background .25s var(--wb-ease),color .25s var(--wb-ease);
}
.wed-card__preview:hover,
.wed-card__preview:focus-visible{
  border-color:var(--wb-gold);background:rgba(199,157,92,.08);color:#1F1F1F;outline:none;
}

.wed-mobile-modal[hidden]{display:none!important}
.wed-mobile-modal{
  position:fixed;inset:0;z-index:1200;
  display:grid;place-items:center;padding:24px;
}
.wed-mobile-modal__backdrop{
  position:absolute;inset:0;background:rgba(17,14,11,.66);backdrop-filter:blur(4px);
}
.wed-mobile-modal__panel{
  position:relative;z-index:1;
  width:min(980px,calc(100vw - 48px));max-height:calc(100vh - 48px);
  overflow:auto;padding:26px 26px 30px;
  background:#F7F3EF;color:#1F1F1F;border:1px solid rgba(31,31,31,.12);
  box-shadow:0 30px 80px rgba(0,0,0,.24);
}
.wed-mobile-modal__close{
  position:absolute;top:16px;right:16px;width:42px;height:42px;
  border:1px solid rgba(31,31,31,.16);background:#FBF8F4;color:#1F1F1F;
  font-size:22px;line-height:1;cursor:pointer;
}
.wed-mobile-modal__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  margin:0 56px 24px 0;
}
.wed-mobile-modal__eyebrow{
  display:block;margin-bottom:10px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#7C5A22;
}
body.wb-page main .wed-mobile-modal__head h3{
  margin:0;font-size:34px!important;line-height:1.04!important;color:#1F1F1F;
}
body.wb-page main .wed-mobile-modal__head p{
  margin:10px 0 0;font-size:14px!important;line-height:1.7!important;color:#5F584F;
}
.wed-mobile-modal__link{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:0 20px;white-space:nowrap;
  border:1px solid rgba(31,31,31,.18);color:#1F1F1F;
  font-size:10px;letter-spacing:.15em;text-transform:uppercase;
}
.wed-mobile-modal__link:hover{border-color:var(--wb-gold);background:rgba(199,157,92,.08)}
.wed-mobile-modal__phone-shell{
  width:min(392px,100%);margin:0 auto;padding:16px 12px 14px;
  background:#111;border-radius:38px;box-shadow:0 22px 56px rgba(31,31,31,.24);
}
.wed-mobile-modal__phone-notch{
  width:38%;height:24px;margin:0 auto 10px;border-radius:0 0 16px 16px;background:#111;
}
.wed-mobile-modal__frame{
  width:100%;height:min(78vh,844px);display:block;
  border:0;border-radius:28px;background:#fff;
}

@media (max-width:980px){
  .wed-card__preview{display:none!important}
  .wed-mobile-modal{display:none!important}
}
@media (max-width:760px){
  .wed-card__actions{gap:10px;justify-content:center}
  .wed-card__actions::before{margin:14px 0 2px}
  .wed-card__preview,
  .wed-card__actions .wed-card__go{
    width:100%;max-width:260px;
  }
  .wed-card__actions .wed-card__go{justify-content:center}
}

/* ========================================================================== */
/* 12. NAVIGATION ÉDITORIALE · TRANSPARENTE ET CONTRASTÉE                     */
/* ========================================================================== */
.wed-section-rail,
.wed-section-mobile{
  --wed-nav-fg:#1F1F1F;
  --wed-nav-muted:rgba(31,31,31,.70);
  --wed-nav-line:rgba(31,31,31,.34);
  --wed-nav-active:#1F1F1F;
  color:var(--wed-nav-fg);
  transition:color .28s var(--wb-ease);
}
.wed-section-rail[data-tone="terracotta"],
.wed-section-mobile[data-tone="terracotta"]{
  --wed-nav-fg:#FFFDF9;
  --wed-nav-muted:rgba(255,253,249,.95);
  --wed-nav-line:rgba(255,253,249,.52);
  --wed-nav-active:#FFFDF9;
}
.wed-section-rail[data-tone="charbon"],
.wed-section-mobile[data-tone="charbon"]{
  --wed-nav-fg:#FFFDF9;
  --wed-nav-muted:rgba(255,253,249,.72);
  --wed-nav-line:rgba(214,180,108,.72);
  --wed-nav-active:#FFFDF9;
}

/* Desktop : typographie seule, aucune carte ni fond derrière. */
.wed-section-rail{
  position:fixed;
  left:18px;
  top:50%;
  z-index:720;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:8px;
  width:154px;
  pointer-events:auto;
  mix-blend-mode:normal;
}
.wed-section-rail a{
  display:grid;
  grid-template-columns:22px 25px minmax(0,1fr);
  align-items:center;
  gap:7px;
  min-height:27px;
  padding:2px 0;
  color:var(--wed-nav-muted);
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transition:color .22s var(--wb-ease),transform .22s var(--wb-ease),opacity .22s;
}
.wed-section-rail a:hover,
.wed-section-rail a:focus-visible,
.wed-section-rail a.is-active{
  color:var(--wed-nav-active);
  transform:translateX(3px);
  outline:none;
}
.wed-section-rail a i{
  display:block;
  width:10px;
  height:1px;
  margin-left:0;
  background:var(--wed-nav-line);
  transition:width .26s var(--wb-ease),background .26s;
}
.wed-section-rail a:hover i,
.wed-section-rail a:focus-visible i{width:16px}
.wed-section-rail a.is-active i{
  width:22px;
  background:currentColor;
}
.wed-section-rail a b{
  font-family:var(--wb-sans);
  font-size:9px;
  font-weight:500;
  letter-spacing:.15em;
  font-variant-numeric:tabular-nums;
}
.wed-section-rail a span{
  font-family:var(--wb-sans);
  font-size:9.5px;
  line-height:1.15;
  font-weight:500;
  letter-spacing:.055em;
  white-space:nowrap;
}
.wed-section-rail a:not(.is-active) span{opacity:.82}

/* Mobile/tablette : bande éditoriale minimale, sans fond. Le libellé courant
   reste visible et les huit numéros servent de raccourcis directs. */
.wed-section-mobile{display:none}
@media(max-width:1099px){
  .wed-section-rail{display:none!important}
  .wed-section-mobile{
    display:flex;
    position:fixed;
    left:16px;
    right:16px;
    bottom:max(12px,env(safe-area-inset-bottom));
    z-index:760;
    flex-direction:column;
    align-items:center;
    gap:5px;
    pointer-events:none;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    text-shadow:0 1px 10px rgba(255,255,255,.34);
  }
  .wed-section-mobile[data-tone="terracotta"],
  .wed-section-mobile[data-tone="charbon"]{
    text-shadow:0 1px 12px rgba(0,0,0,.32);
  }
  .wed-section-mobile__current{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:18px;
    color:var(--wed-nav-fg);
    font-family:var(--wb-sans);
    pointer-events:none;
  }
  .wed-section-mobile__num{
    font-size:8.5px;
    font-weight:500;
    letter-spacing:.16em;
  }
  .wed-section-mobile__label{
    font-size:9px;
    line-height:1;
    font-weight:600;
    letter-spacing:.13em;
    text-transform:uppercase;
  }
  .wed-section-mobile__numbers{
    width:min(100%,350px);
    display:grid;
    grid-template-columns:repeat(8,1fr);
    align-items:center;
    pointer-events:auto;
  }
  .wed-section-mobile__numbers a{
    position:relative;
    display:grid;
    place-items:center;
    min-width:0;
    min-height:30px;
    color:var(--wed-nav-muted);
    font-family:var(--wb-sans);
    font-size:8px;
    font-weight:500;
    letter-spacing:.08em;
    background:transparent!important;
    border:0!important;
  }
  .wed-section-mobile__numbers a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:2px;
    width:3px;
    height:1px;
    background:var(--wed-nav-line);
    transform:translateX(-50%);
    transition:width .22s var(--wb-ease),background .22s;
  }
  .wed-section-mobile__numbers a.is-active{
    color:var(--wed-nav-active);
  }
  .wed-section-mobile__numbers a.is-active::after{
    width:18px;
    background:currentColor;
  }
  body.wb-mobile-preview-open .wed-section-mobile{display:none!important}
}
@media(min-width:1100px){
  .wed-section-mobile{display:none!important}
}
@media(max-width:380px){
  .wed-section-mobile{left:8px;right:8px}
  .wed-section-mobile__numbers a{font-size:7.5px}
}



/* ========================================================================== */
/* 13. AJUSTEMENT D'ESPACEMENT · RAIL / CONTENU                             */
/* ========================================================================== */
@media(min-width:1100px){
  /* On laisse davantage d'air entre la navigation latérale et le corps de
     page, pour que la lecture ne démarre pas trop près du rail. */
  body.wb-page[data-active="Weddings"] .wb-section__in{
    padding-left:clamp(40px,3.8vw,72px);
  }
  /* L'accroche d'ouverture garde le même décalage, mais sans casser son
     équilibre entre le titre et le texte d'intro. */
  body.wb-page[data-active="Weddings"] .wb-section--hero .wb-section__in{
    padding-left:clamp(44px,4.2vw,80px);
  }
}