/*
Theme Name: Livre d'Or Audio
Theme URI: https://location-livre-d-or-audio.fr
Author: Mathis Auvrignon
Description: Thème sur mesure pour la location de livres d'or audio et vidéo. Charte « La collection » : le site est le musée, le combiné est la pièce.
Version: 1.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: livre-or-audio
*/

/* ============================================================================
   CHARTE « LA COLLECTION » — v1, 18/09/2026.

   Codes relevés chez ktmerry.com, référence mondiale du mariage de luxe :
   serif très fin et très contrasté en immense, géométrique en capitales
   largement espacées pour les labels, blanc cassé chaud, encre BRUN et non
   noir, deux couleurs en tout, la photo porte le reste.
     Canela Thin / Quarto Light  ->  Cormorant 300
     Futura PT Demi / Sackers    ->  Jost 500 capitales
     #f9f7f4 / #412615           ->  repris tels quels

   ⚠️ PAS DE PASTICHE RÉTRO. Le leader britannique du secteur emploie une
   typographie contemporaine MALGRÉ le produit vintage. Le site est le musée,
   le combiné est la pièce.

   LES TROIS RÈGLES
     1. Le serif est fin et grand, jamais gras.
     2. Les labels sont en capitales espacées, jamais en serif.
     3. La couleur n'appartient qu'aux combinés — deux par page maximum.

   INTERDITS : aucune ombre, aucun dégradé, ni blanc pur ni noir pur.
   ========================================================================= */

:root{
  /* Les deux fonds */
  --pap:#F9F7F4;
  --pap-2:#F1EDE6;
  /* Les trois encres — brun, jamais noir */
  --encre:#412615;
  --encre-2:#7A6552;
  --encre-3:#A89684;
  /* Les filets, dérivés de l'encre pour rester dans la famille */
  --filet:rgba(65,38,21,.15);
  --filet-2:rgba(65,38,21,.3);
  /* Les combinés : SEULE source de couleur du site */
  --oxblood:#6B2D2B;
  --sauge:#7D8A72;
  --laiton:#A8894E;
  --noir-combine:#2B211B;

  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important; transition:none!important}
}

body{
  margin:0; background:var(--pap); color:var(--encre);
  font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; font-weight:400; line-height:1.68;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

.wrap{max-width:var(--max); margin:0 auto; padding-inline:clamp(24px,5vw,56px)}
.wrap--tight{max-width:840px}

/* --- Règle 1 : le serif est fin et grand, jamais gras --------------------- */
h1,h2,h3,.disp{
  font-family:'Cormorant',Georgia,'Times New Roman',serif;
  font-weight:300; line-height:1.03; letter-spacing:-.012em;
  margin:0; text-wrap:balance;
}
h1{font-size:clamp(46px,8.6vw,104px)}
h2{font-size:clamp(34px,5.4vw,60px)}
h3{font-size:clamp(23px,2.6vw,28px); line-height:1.16}
.it{font-style:italic}
p{margin:0; max-width:60ch}
a{color:inherit}
img{max-width:100%; height:auto}
[hidden]{display:none!important}

/* --- Règle 2 : les labels sont en capitales espacées, jamais en serif ----- */
.lab{
  font-family:'Jost',sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--encre-2);
}

.btn{
  display:inline-block; padding:17px 34px;
  font-family:'Jost',sans-serif; font-size:11.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  background:var(--encre); color:var(--pap); border:0; cursor:pointer;
  transition:background .18s ease;
}
.btn:hover,.btn:focus{background:var(--oxblood); color:var(--pap)}
.btn--ghost{background:transparent; color:var(--encre); box-shadow:inset 0 0 0 1px var(--filet-2)}
.btn--ghost:hover,.btn--ghost:focus{background:var(--encre); color:var(--pap); box-shadow:none}
a:focus-visible,button:focus-visible{outline:1.5px solid var(--oxblood); outline-offset:4px}

.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:100; background:var(--encre); color:var(--pap); padding:12px 18px}

/* --- Barre ---------------------------------------------------------------- */
.bar{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:var(--pap); border-bottom:1px solid var(--filet)}
.bar .wrap{display:flex; align-items:center; gap:24px; height:76px}
.mark{font-family:'Cormorant',serif; font-weight:300; font-size:23px; letter-spacing:.03em; text-decoration:none; line-height:1; white-space:nowrap}
.nav{display:none; gap:32px; margin-left:auto}
.nav a{text-decoration:none; color:var(--encre-2); font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase}
.nav a:hover{color:var(--encre)}
.bar .btn{margin-left:auto; padding:12px 22px}
@media(min-width:900px){ .nav{display:flex} .bar .btn{margin-left:0} }

/* --- Hero ----------------------------------------------------------------- */
.hero{padding-block:clamp(56px,9vw,120px) clamp(44px,6vw,80px)}
.hero .lab{display:block; margin-bottom:clamp(26px,4vw,44px)}
.hero h1 .it{display:block; color:var(--encre-2)}
.hero__grid{display:grid; gap:clamp(34px,5vw,64px); align-items:end; margin-top:clamp(36px,5vw,58px)}
@media(min-width:880px){ .hero__grid{grid-template-columns:1fr auto} }
.hero__lede{font-size:17px; color:var(--encre-2); max-width:44ch; font-weight:300}
.hero__act{display:flex; flex-wrap:wrap; align-items:center; gap:26px}
.tarif{display:flex; flex-direction:column; gap:3px}
.tarif b{font-family:'Cormorant',serif; font-weight:300; font-size:44px; line-height:.9; letter-spacing:-.02em}
.tarif span{font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--encre-3)}

/* --- La bande : la photo porte la page ------------------------------------ */
.bande{margin-top:clamp(44px,6vw,76px); background:var(--pap-2); border-block:1px solid var(--filet)}
.bande__inner{max-width:var(--max); margin:0 auto; padding:clamp(34px,5vw,60px) clamp(24px,5vw,56px); display:grid; gap:clamp(28px,4vw,52px); align-items:center}
@media(min-width:820px){ .bande__inner{grid-template-columns:1.12fr .88fr} }
.bande svg{width:100%; max-width:380px; height:auto; display:block; margin:0 auto}
.bande__cap{margin-top:18px; text-align:center}
.ligne{display:grid}
.ligne > div{display:flex; gap:18px; padding:15px 0; border-bottom:1px solid var(--filet); font-size:15px; color:var(--encre-2); font-weight:300}
.ligne > div:last-child{border-bottom:0}
.ligne b{font-weight:500; color:var(--encre); min-width:88px; flex:none; font-size:11px; letter-spacing:.2em; text-transform:uppercase; padding-top:4px}

/* --- Photographies de section --------------------------------------------- */
/* Le ratio est porté par le conteneur et non par l'image : la hauteur est donc
   réservée avant le chargement, et la page ne saute pas. */
.fig{margin:clamp(34px,5vw,56px) 0 0; background:var(--pap-2); overflow:hidden}
.fig img{width:100%; height:100%; object-fit:cover; display:block}
.fig--large{aspect-ratio:16/9}
.fig--haute{aspect-ratio:4/5}
.fig__cap{margin-top:14px; font-size:10.5px; font-weight:500; letter-spacing:.2em;
          text-transform:uppercase; color:var(--encre-3)}
.bande__photo{aspect-ratio:4/5; background:var(--pap-2); overflow:hidden; max-width:380px; margin:0 auto}
.bande__photo img{width:100%; height:100%; object-fit:cover; display:block}
@media(prefers-reduced-motion:no-preference){
  .fig img{transition:transform .9s cubic-bezier(.22,1,.36,1)}
  .fig:hover img{transform:scale(1.03)}
}

/* --- Sections ------------------------------------------------------------- */
.sec{padding-block:clamp(64px,9vw,120px)}
.sec + .sec{border-top:1px solid var(--filet)}
.sec__head{margin-bottom:clamp(38px,5vw,62px); max-width:52ch}
.sec__head .lab{display:block; margin-bottom:22px}
.sec__head p{margin-top:22px; color:var(--encre-2); font-size:17px; font-weight:300}

/* --- La collection -------------------------------------------------------- */
.coll{display:grid; gap:clamp(30px,4vw,48px) clamp(22px,3vw,34px)}
@media(min-width:560px){ .coll{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .coll{grid-template-columns:repeat(5,1fr)} }
.combine__art{background:var(--pap-2); aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; padding:18px}
.combine__art svg,.combine__art img{width:88%; height:auto}
.combine h3{margin-top:20px; font-size:26px}
.combine__d{margin-top:5px; font-size:13.5px; color:var(--encre-3); font-weight:300}
.combine__s{margin-top:12px; font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--sauge)}

/* --- Le déroulé ----------------------------------------------------------- */
.steps{display:grid; gap:clamp(34px,4vw,0)}
@media(min-width:840px){ .steps{grid-template-columns:repeat(3,1fr); gap:0} }
@media(min-width:840px){
  .step{padding:0 clamp(22px,3vw,40px); border-left:1px solid var(--filet)}
  .step:first-child{padding-left:0; border-left:0}
  .step:last-child{padding-right:0}
}
.step__num{font-family:'Cormorant',serif; font-weight:300; font-size:56px; line-height:.85; color:var(--encre-3); display:block; margin-bottom:18px}
.step .lab{display:block; margin-bottom:12px}
.step p{margin-top:12px; font-size:15px; color:var(--encre-2); font-weight:300}

/* --- Le récit : la seule section où le laiton apparaît -------------------- */
.recit{background:var(--pap-2); border-top:1px solid var(--filet)}
.recit .lab{display:block; margin-bottom:30px}
.recit .disp{font-size:clamp(27px,4.1vw,46px); line-height:1.24; max-width:20ch}
.recit .disp + .disp{margin-top:26px; color:var(--encre-2)}
.recit__sign{margin-top:clamp(34px,4vw,50px); padding-left:20px; border-left:1px solid var(--laiton); font-size:14.5px; color:var(--encre-2); font-weight:300}
.recit__sign b{display:block; font-weight:500; color:var(--encre); font-size:11px; letter-spacing:.22em; text-transform:uppercase; margin-bottom:6px}

/* --- Formules ------------------------------------------------------------- */
.plans{display:grid; gap:clamp(30px,4vw,0)}
@media(min-width:840px){
  .plans{grid-template-columns:repeat(2,1fr); gap:0}
  .plan{padding:0 clamp(28px,4vw,48px); border-left:1px solid var(--filet)}
  .plan:first-child{padding-left:0; border-left:0}
  .plan:last-child{padding-right:0}
}
.plan .lab{display:block; margin-bottom:16px}
.plan__p{display:flex; align-items:baseline; gap:12px; margin-bottom:28px}
.plan__p b{font-family:'Cormorant',serif; font-weight:300; font-size:clamp(50px,7vw,72px); line-height:.86; letter-spacing:-.025em}
.plan__p span{font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--encre-3)}
.plan ul{list-style:none; margin:0 0 34px; padding:0; display:grid}
.plan li{padding:13px 0; border-bottom:1px solid var(--filet); font-size:15px; color:var(--encre-2); font-weight:300}
.plan li:first-child{border-top:1px solid var(--filet)}

.options{margin-top:clamp(52px,6vw,80px); padding-top:clamp(36px,4vw,52px); border-top:1px solid var(--filet)}
.options .lab{display:block; margin-bottom:26px}
.opts{display:grid; gap:0 clamp(28px,4vw,56px)}
@media(min-width:720px){ .opts{grid-template-columns:repeat(2,1fr)} }
.opt{display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid var(--filet)}
.opt__t{font-size:15px; font-weight:400}
.opt__t small{display:block; font-size:13px; color:var(--encre-3); font-weight:300; margin-top:3px; line-height:1.5}
.opt__v{font-family:'Cormorant',serif; font-size:24px; font-weight:400; white-space:nowrap; line-height:1}

/* --- Témoignages ---------------------------------------------------------- */
.avis{display:grid; gap:clamp(36px,5vw,54px)}
@media(min-width:860px){ .avis{grid-template-columns:repeat(3,1fr)} }
.av{margin:0}
.av .disp{font-size:clamp(21px,2.3vw,25px); line-height:1.36}
.av__qui{margin-top:22px}
.av__qui b{display:block; font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; margin-bottom:4px}
.av__qui span{font-size:13px; color:var(--encre-3); font-weight:300}

/* --- FAQ ------------------------------------------------------------------ */
.faq{display:grid; max-width:880px}
.fq{padding:clamp(22px,3vw,30px) 0; border-top:1px solid var(--filet); display:grid; gap:8px 40px}
.fq:last-child{border-bottom:1px solid var(--filet)}
@media(min-width:760px){ .fq{grid-template-columns:.9fr 1.1fr} }
.fq p{font-size:15px; color:var(--encre-2); font-weight:300}

/* --- Pied ----------------------------------------------------------------- */
.pied{border-top:1px solid var(--filet); padding-block:clamp(48px,6vw,72px) clamp(40px,5vw,60px)}
.pied__cols{display:grid; gap:36px; margin-bottom:clamp(38px,5vw,56px)}
@media(min-width:780px){ .pied__cols{grid-template-columns:2fr 1fr 1fr} }
.pied .lab{display:block; margin-bottom:18px}
.pied ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.pied a{color:var(--encre-2); text-decoration:none; font-size:14.5px; font-weight:300}
.pied a:hover{color:var(--encre)}
.pied__bas{padding-top:26px; border-top:1px solid var(--filet); display:flex; flex-wrap:wrap; gap:10px 30px; font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--encre-3)}


/* ============================================================================
   RESERVATION — champ date, options, et surcharges WooCommerce.
   WooCommerce sert ses propres styles : on ne les combat pas, on les reduit a
   la charte. Regle 1 : le serif est fin et grand. Regle 2 : les labels sont en
   capitales espacees. Regle 3 : la couleur appartient aux combines.
   ========================================================================== */

.loa-date{margin:26px 0 28px; padding-top:24px; border-top:1px solid var(--filet)}
.loa-date .lab{display:block; margin-bottom:12px}
.loa-date input[type="date"]{
  font-family:'Jost',sans-serif; font-size:16px; color:var(--encre);
  background:var(--pap); border:1px solid var(--filet-2); border-radius:0;
  padding:13px 15px; width:100%; max-width:280px;
}
.loa-date input[type="date"]:focus{outline:1.5px solid var(--oxblood); outline-offset:2px}
.loa-date__aide{margin-top:10px; font-size:13.5px; color:var(--encre-3); font-weight:300; max-width:48ch}
.loa-date__msg{margin-top:12px; font-size:14px; font-weight:400; padding-left:14px; border-left:2px solid var(--filet-2)}
.loa-date__msg--oui{border-left-color:var(--sauge); color:var(--encre-2)}
.loa-date__msg--non{border-left-color:var(--oxblood); color:var(--oxblood)}
.loa-date__msg--info{border-left-color:var(--laiton); color:var(--encre-2)}

.loa-opts{border:0; margin:0 0 30px; padding:24px 0 0; border-top:1px solid var(--filet)}
.loa-opts legend{padding:0; margin-bottom:6px}
.loa-opt{
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid var(--filet); cursor:pointer;
}
.loa-opt input{margin:0; accent-color:var(--oxblood); width:16px; height:16px; align-self:center}
.loa-opt__t{font-size:15px; font-weight:400}
.loa-opt__t small{display:block; font-size:13px; color:var(--encre-3); font-weight:300; margin-top:3px; line-height:1.5}
.loa-opt__v{font-family:'Cormorant',serif; font-size:22px; font-weight:400; white-space:nowrap}

/* --- WooCommerce ramene a la charte --------------------------------------- */
.woocommerce div.product .product_title{
  font-family:'Cormorant',serif; font-weight:300; font-size:clamp(34px,5vw,54px);
  line-height:1.04; letter-spacing:-.018em;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:'Cormorant',serif; font-weight:300; font-size:38px; color:var(--encre);
}
.woocommerce div.product p.price del{color:var(--encre-3); font-size:.62em}
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt{
  background:var(--encre); color:var(--pap); border-radius:0;
  font-family:'Jost',sans-serif; font-size:11.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; padding:17px 34px; line-height:1;
}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover,
.woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover{
  background:var(--oxblood); color:var(--pap);
}
.woocommerce .quantity .qty{
  font-family:'Jost',sans-serif; border:1px solid var(--filet-2); border-radius:0;
  padding:12px 8px; background:var(--pap); color:var(--encre);
}
.woocommerce div.product form.cart .variations{border:0; margin-bottom:22px}
.woocommerce div.product form.cart .variations label{
  font-family:'Jost',sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--encre-2);
}
.woocommerce div.product form.cart .variations select{
  font-family:'Jost',sans-serif; font-size:15px; color:var(--encre);
  background:var(--pap); border:1px solid var(--filet-2); border-radius:0; padding:12px 14px;
}
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info,
.woocommerce .woocommerce-error{
  border-top-color:var(--oxblood); background:var(--pap-2); color:var(--encre);
  font-family:'Jost',sans-serif; border-radius:0;
}
.woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before{color:var(--sauge)}
.woocommerce .woocommerce-error::before{color:var(--oxblood)}
.woocommerce table.shop_table{border-radius:0; border-color:var(--filet)}
.woocommerce table.shop_table th{
  font-family:'Jost',sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--encre-2);
}
.woocommerce-cart table.cart img{max-width:64px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:'Cormorant',serif; font-weight:300; font-size:26px;
}
.woocommerce ul.products li.product .price{font-family:'Cormorant',serif; font-size:22px; color:var(--encre-2)}
.woocommerce .star-rating, .woocommerce .woocommerce-product-rating{display:none}

/* --- Les usages : mariage, anniversaire, entreprise ----------------------- */
.usages{display:grid; gap:clamp(34px,4vw,0)}
@media(min-width:880px){
  .usages{grid-template-columns:repeat(3,1fr); gap:0}
  .usage{padding:0 clamp(22px,3vw,40px); border-left:1px solid var(--filet)}
  .usage:first-child{padding-left:0; border-left:0}
  .usage:last-child{padding-right:0}
}
.usage .lab{display:block; margin-bottom:14px}
.usage h3{margin-bottom:14px}
.usage p{font-size:15px; color:var(--encre-2); font-weight:300}

/* --- La liste à filets, version large (restitution) ----------------------- */
.ligne--large > div{align-items:baseline; padding:20px 0; gap:24px}
.ligne--large b{min-width:150px; padding-top:3px}
.ligne--large span{max-width:62ch}
@media(max-width:620px){
  .ligne--large > div{flex-direction:column; gap:8px}
  .ligne--large b{min-width:0}
}