/* =============================================================
   Livre d'or mariage — CSS affiliation (propre, dédupliqué)
   Chargé après style.css via functions.php
   ============================================================= */

:root{
  --color-brown:#4b3a2d; --color-brown-light:#8b5e3c; --color-brown-pale:#7a614d;
  --color-gold:#d1bc95; --color-gold-light:#d8ccb3; --color-cream:#F1DED0;
  --color-white:#ffffff;
  --font-heading:'Cormorant',Georgia,serif; --font-body:'Inter',system-ui,sans-serif;
  --max-width:1200px; --max-width-narrow:900px;
  --border-radius:4px; --border-radius-pill:14px; --transition:0.25s ease;
}

/* ---------- Header : menu sur une ligne en desktop ---------- */
@media (min-width:901px){
  .header-inner{gap:16px}
  .site-nav > ul{gap:14px;flex-wrap:nowrap}
  .site-nav a{font-size:13px;letter-spacing:0}
  .header-actions{gap:14px}
}

/* ---------- Menu déroulant (sous-menus) ---------- */
/* Desktop : sous-menu au survol */
@media (min-width:901px){
  .site-nav .menu-item-has-children{position:relative}
  .site-nav .menu-item-has-children > a::after{content:"▾";margin-left:5px;font-size:10px;color:var(--color-gold);vertical-align:middle}
  .site-nav .sub-menu{
    position:absolute;top:100%;left:0;margin:0;padding:8px 0;
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    min-width:220px;list-style:none;
    background:#fff;border:1px solid rgba(209,188,149,.5);border-radius:8px;
    box-shadow:0 12px 30px rgba(75,58,45,.15);
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .2s ease,transform .2s ease,visibility 0s .2s;
    z-index:60;
  }
  .site-nav .menu-item-has-children:hover > .sub-menu,
  .site-nav .menu-item-has-children:focus-within > .sub-menu{
    opacity:1;visibility:visible;transform:translateY(0);
    transition:opacity .2s ease,transform .2s ease;
  }
  .site-nav .sub-menu li{width:100%}
  .site-nav .sub-menu a{display:block;padding:9px 20px;white-space:nowrap;font-size:13.5px;color:var(--color-brown-pale)}
  .site-nav .sub-menu a:hover{background:var(--color-cream);color:var(--color-brown)}
}
/* Mobile (drawer) : sous-menus dépliés et indentés */
.mobile-menu-list .sub-menu{list-style:none;margin:2px 0 12px;padding-left:18px;border-left:1px solid rgba(209,188,149,.5)}
.mobile-menu-list .sub-menu a{font-size:15px;opacity:.82}
.mobile-menu-list .menu-item-has-children > a{font-weight:600}

/* ---------- Footer : titres de colonnes sans balise Hn (span stylé) ---------- */
.footer-col .footer-title{
  display:block;
  font-family:var(--font-body);
  font-style:normal;
  font-size:13px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--color-brown);
  margin-bottom:20px;
}

/* ---------- HERO (accueil + piliers) : voile + titre + sous-titre ---------- */
.hero .hero-bg{position:absolute;inset:0}
.hero .hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(60,47,34,.42), rgba(60,47,34,.60))}
.hero .hero-content{position:relative;z-index:2}
.hero .hero-content h1{
  font-size:clamp(36px,6vw,60px);
  line-height:1.15;
  text-shadow:0 2px 22px rgba(35,24,15,.6);
}
.hero .hero-content p{
  color:#fff;
  font-family:var(--font-heading);
  font-style:italic;
  font-size:clamp(24px,4vw,40px);
  line-height:1.25;
  margin-top:10px;
  text-shadow:0 2px 16px rgba(35,24,15,.6);
}

/* ---------- Contenu affilié (scopé .lo) : cartes, comparatif, guide, FAQ ---------- */
.lo *{box-sizing:border-box}
.lo{font-family:var(--font-body);font-size:16px;line-height:1.75;color:var(--color-brown)}
.lo h2,.lo h3{font-family:var(--font-heading);font-style:italic;line-height:1.2;margin:0}
.lo h2{font-size:clamp(24px,3.6vw,34px);font-weight:300}
.lo h3{font-size:clamp(18px,2.5vw,23px);font-weight:400}
.lo a{color:inherit;text-decoration:none}
.lo p{margin:0 0 16px}
.lo .narrow{max-width:var(--max-width-narrow);margin:0 auto}
.lo .section{padding:54px 24px}
.lo .section .narrow p{color:#5c4a3b}

.lo .tldr{max-width:var(--max-width-narrow);margin:0 auto;background:#fff;border:1px solid rgba(209,188,149,.6);border-top:3px solid var(--color-gold);border-radius:var(--border-radius);box-shadow:0 8px 26px rgba(75,58,45,.10);padding:22px 26px}
.lo .tldr .tldr-title{display:block;font-family:var(--font-heading);font-style:italic;font-size:20px;line-height:1.2;margin:0 0 8px;color:var(--color-brown)}
.lo .tldr ul{margin:0;padding-left:20px}
.lo .tldr li{margin:5px 0;color:#5c4a3b;font-size:14.5px}

.lo .eyebrow{font-family:var(--font-body);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-brown-light);font-weight:600;margin:0 0 12px}
.lo .sec-head{text-align:center;margin-bottom:30px}
.lo .sec-head p{color:#5c4a3b;max-width:64ch;margin:10px auto 0}
.lo .updated{text-align:center;font-size:12.5px;color:var(--color-brown-light);letter-spacing:.04em;margin-top:6px}

.lo .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;font-family:var(--font-body);font-size:14px;font-weight:500;border-radius:var(--border-radius-pill);transition:all var(--transition);text-decoration:none;letter-spacing:.3px;border:1.5px solid transparent;width:100%}
.lo .btn--dark{background:var(--color-brown);color:var(--color-gold-light);border:none}
.lo .btn--gold{background:var(--color-gold);color:var(--color-brown)}
.lo .btn--ghost{background:transparent;color:var(--color-brown-pale);border:1.5px solid var(--color-gold)}
.lo .btn:hover{filter:brightness(1.05)}
.lo .btn small{font-weight:400;opacity:.85;font-size:11.5px}

.lo .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px;max-width:var(--max-width);margin:0 auto}
.lo .card{background:#fff;border:1px solid rgba(209,188,149,.45);border-radius:var(--border-radius);box-shadow:0 2px 12px rgba(75,58,45,.06);display:flex;flex-direction:column;overflow:hidden}
.lo .card .thumb{aspect-ratio:5/4;background:var(--color-cream);display:grid;place-items:center;position:relative;border-bottom:1px solid rgba(209,188,149,.35)}
.lo .card .thumb .glyph{font-family:var(--font-heading);font-style:italic;font-size:60px;color:var(--color-gold);opacity:.8}
.lo .card .tag{position:absolute;top:12px;left:12px;background:#fff;border:1px solid rgba(209,188,149,.6);color:var(--color-brown-light);font-family:var(--font-body);font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:5px 10px;border-radius:var(--border-radius-pill)}
.lo .card .body{padding:16px 17px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.lo .card .meta{font-size:12.5px;color:var(--color-brown-pale);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lo .stars{color:var(--color-gold);letter-spacing:1px}
.lo .kw{background:var(--color-cream);color:var(--color-brown-light);border-radius:var(--border-radius);padding:2px 8px;font-size:11.5px}
.lo .feat{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--color-brown-pale)}
.lo .feat li{display:flex;gap:8px}
.lo .feat li::before{content:"·";color:var(--color-gold);font-weight:700}
.lo .ladder{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:6px}
.lo .note{max-width:var(--max-width-narrow);margin:26px auto 0;background:var(--color-cream);border-radius:var(--border-radius);padding:16px 20px;font-size:14px}

.lo .tablewrap{max-width:var(--max-width);margin:0 auto;overflow-x:auto;border:1px solid rgba(209,188,149,.45);border-radius:var(--border-radius)}
.lo table{border-collapse:collapse;width:100%;min-width:660px;font-size:14.5px}
.lo th{font-family:var(--font-body);text-align:left;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--color-brown-light);font-weight:600;padding:14px 16px;background:var(--color-cream);border-bottom:1px solid rgba(209,188,149,.5)}
.lo td{padding:14px 16px;border-bottom:1px solid rgba(209,188,149,.3);vertical-align:middle}
.lo tr:last-child td{border-bottom:none}
.lo td.name{font-weight:500}
.lo td .num{font-family:var(--font-heading);font-style:italic;font-size:18px;font-variant-numeric:tabular-nums}
.lo .go{color:var(--color-brown-light);font-weight:500;white-space:nowrap}
.lo .go:hover{text-decoration:underline}

.lo .best{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;max-width:var(--max-width);margin:0 auto}
.lo .best .item{background:#fff;border:1px solid rgba(209,188,149,.45);border-radius:var(--border-radius);padding:18px}
.lo .best .item .lab{font-family:var(--font-body);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-brown-light);margin-bottom:6px}
.lo .best .item h3{margin-bottom:5px}
.lo .best .item p{font-size:13px;color:var(--color-brown-pale);margin:0}
.lo .best .item .go{display:inline-block;margin-top:10px;font-size:13px}

.lo .prose{max-width:var(--max-width-narrow);margin:0 auto}
.lo .prose h2{margin:0 0 6px}
.lo .prose h3{margin:24px 0 8px}
.lo .prose a.inl{color:var(--color-brown-light);text-decoration:underline;text-underline-offset:2px}
.lo .badge-trend{display:inline-block;background:#6b7a52;color:#fff;font-family:var(--font-body);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:var(--border-radius-pill);vertical-align:middle;margin-left:8px}

.lo .faq details{border-bottom:1px solid rgba(209,188,149,.4);padding:14px 0}
.lo .faq summary{cursor:pointer;font-family:var(--font-heading);font-style:italic;font-size:19px;color:var(--color-brown);list-style:none}
.lo .faq summary::-webkit-details-marker{display:none}
.lo .faq summary::after{content:"+";float:right;color:var(--color-gold)}
.lo .faq details[open] summary::after{content:"–"}
.lo .faq p{margin-top:10px;color:#5c4a3b}

.lo .disc{max-width:var(--max-width-narrow);margin:0 auto;background:#f9f7f5;border:1px solid rgba(209,188,149,.4);border-radius:var(--border-radius);padding:16px 20px;font-size:13px;color:var(--color-brown-pale)}