/* Mont Saint Clair : habillage des pages WooCommerce (boutique, fiche, panier, commande) et pages simples. */

.aller-contenu{position:absolute;left:-9999px;top:0;z-index:100;background:var(--encre);color:#fff;padding:12px 18px}
.aller-contenu:focus{left:12px;top:12px}
.cache{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fil a{text-decoration:underline;text-underline-offset:3px}
.texte-page{max-width:820px;padding:0 var(--marge) 110px}
.texte-page h2{font:400 30px/1.15 var(--serif);margin:34px 0 12px}
.texte-page p,.texte-page li{margin-bottom:12px}

/* Prix */
.prix ins,.price ins,.carte .prix ins{text-decoration:none}

/* Fiche : formulaire d'ajout */
.achat{margin-top:6px}
.achat form.cart{display:grid;gap:0}
.achat table.variations{border:0;border-collapse:collapse;width:100%}
.achat table.variations tr{display:grid}
.achat table.variations th.label{text-align:left;font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:28px 0 12px}
.achat table.variations td{padding:0}
.achat .tailles{display:grid;gap:6px}
.achat .tailles button{height:48px;border:1px solid var(--trait);background:#fff;font:500 13px/1 var(--sans);cursor:pointer}
.achat .tailles button.on{background:var(--encre);color:#fff;border-color:var(--encre)}
.achat .tailles button:disabled{color:#b9b2a6;background:repeating-linear-gradient(135deg,#fff,#fff 6px,#f3efe8 6px,#f3efe8 7px);cursor:not-allowed}
.achat .single_variation_wrap{margin-top:16px}
.achat .woocommerce-variation-price{display:none}
.achat .woocommerce-variation-availability p{font-size:13px;color:var(--pierre);margin-bottom:8px}
.achat .quantity{display:none}
.achat .single_add_to_cart_button,.button.alt,.checkout-button,#place_order{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 30px;background:var(--encre);color:#fff;border:1px solid var(--encre);font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;border-radius:0;text-decoration:none}
.achat .single_add_to_cart_button{width:100%;margin-top:22px}
.achat .single_add_to_cart_button.disabled{opacity:.45;cursor:not-allowed}
.achat .woocommerce-variation-add-to-cart{display:grid}
.achat .stock.out-of-stock{margin-top:18px;padding:16px;background:var(--sable-clair);font-size:14px}
.conseil{margin-top:16px}
.conseil a{color:var(--pierre);text-decoration:underline}
.accordeon details ul{padding-left:18px;margin-top:12px;font-size:14px;line-height:1.65;color:#3a3732}
.accordeon .texte-long{font-size:14px;line-height:1.65;color:#3a3732;margin-top:12px}
.accordeon .texte-long p{margin-bottom:10px}
.accordeon .texte-long h2,.accordeon .texte-long h3{font:400 20px/1.2 var(--serif);margin:14px 0 6px}
.barre-mobile .t span{font-size:12.5px;color:var(--pierre)}

/* Option « Motif au dos » (extension WPC Product Options) */
.achat .wpcpo-options{margin-top:4px}
.achat .wpcpo-option-name{font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:28px 0 12px}
.achat .wpcpo-option-name .required,.achat .wpcpo-option-name abbr{display:none}
.achat .msc-motifs .wpcpo-option-form > .form-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0}
.achat .wpcpo-option-name strong{font-weight:500}
.achat .wpcpo-option-name > span{display:none}
.achat .msc-motifs label > span:last-child{display:block;color:var(--pierre);font-size:10.5px;margin-top:2px}
.achat .msc-motifs label{display:block;border:1px solid var(--trait);background:#fff;padding:5px 5px 9px;text-align:center;font-size:11.5px;line-height:1.3;cursor:pointer}
.achat .msc-motifs label:has(input:checked){border-color:var(--encre);outline:1px solid var(--encre)}
.achat .msc-motifs label input{position:absolute;opacity:0;pointer-events:none}
.achat .msc-motifs .m{display:block;aspect-ratio:1;overflow:hidden;margin-bottom:7px;background:var(--sable)}
.achat .msc-motifs .m img{width:100%;height:100%;object-fit:cover}
.achat .msc-motifs .label-price{display:block;color:var(--pierre);font-size:10.5px}
.achat .wpcpo-total{display:none!important}

/* Messages WooCommerce */
.woocommerce-message,.woocommerce-info,.woocommerce-error{list-style:none;margin:0 var(--marge) 20px;padding:16px 20px;background:var(--sable-clair);border-left:3px solid var(--klein);font-size:14px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.woocommerce-error{border-left-color:#b3261e}
.woocommerce-message .button,.woocommerce-info .button{min-height:40px;padding:0 18px;background:var(--encre);color:#fff;font:500 11px/40px var(--sans);letter-spacing:.14em;text-transform:uppercase}

/* Panier (gabarit classique de WooCommerce, habillé) */
.woocommerce-cart .texte-page,.woocommerce-checkout .texte-page{max-width:none}
.woocommerce-cart .woocommerce{display:grid;grid-template-columns:7fr 4fr;gap:0 56px;align-items:start}
.woocommerce-cart .woocommerce > *{grid-column:1}
.woocommerce-cart .cart-collaterals{grid-column:2;grid-row:1 / span 4}
table.shop_table{width:100%;border-collapse:collapse;font-size:14.5px}
table.shop_table th{font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--pierre);text-align:left;padding:0 0 14px;border-bottom:1px solid var(--trait)}
table.shop_table td{padding:20px 0;border-bottom:1px solid var(--trait);vertical-align:middle}
table.cart .product-thumbnail img{width:96px;aspect-ratio:4/5;object-fit:cover}
table.cart .product-thumbnail{width:120px}
table.cart .product-name a{font:400 22px/1.15 var(--serif)}
table.cart .product-name dl{font-size:13px;color:var(--pierre);margin-top:6px}
table.cart .product-name dl dt,table.cart .product-name dl dd{display:inline;margin:0}
table.cart .product-name dl dd p{display:inline}
table.cart .product-remove a{font-size:22px;color:var(--pierre);text-decoration:none}
table.cart .quantity input{width:64px;height:40px;border:1px solid var(--trait);text-align:center;font:inherit}
table.cart td.actions{border-bottom:0;padding-top:18px}
table.cart td.actions .coupon{display:none}
table.cart button[name="update_cart"]{background:none;border:1px solid var(--trait);height:40px;padding:0 16px;font:500 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.cart_totals{background:#fff;border:1px solid var(--trait);padding:30px 28px}
.cart_totals h2{font:400 30px/1 var(--serif);margin-bottom:22px}
.cart_totals table th{width:40%;text-transform:none;letter-spacing:0;font:500 14px/1.4 var(--sans);color:var(--encre);padding:14px 0}
.cart_totals table td{padding:14px 0}
.cart_totals .order-total td,.cart_totals .order-total th{font-size:17px;font-weight:600}
.woocommerce-shipping-methods{list-style:none;display:grid;gap:8px}
.woocommerce-shipping-methods li{display:flex;gap:8px;align-items:flex-start;font-size:13.5px}
.woocommerce-shipping-destination,.shipping-calculator-button{font-size:12.5px;color:var(--pierre)}
.wc-proceed-to-checkout .checkout-button{width:100%;margin-top:18px}
.cross-sells{margin-top:40px}
.cross-sells h2{font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--pierre);margin-bottom:16px}
.cart-empty{font:400 26px/1.2 var(--serif);padding:30px 0}

/* Commande */
.woocommerce-checkout form.checkout{display:grid;grid-template-columns:7fr 5fr;gap:0 56px;align-items:start}
.woocommerce-checkout #customer_details{grid-column:1;grid-row:1 / span 3}
.woocommerce-checkout #order_review_heading,.woocommerce-checkout #order_review{grid-column:2}
.woocommerce-checkout h3{font:400 28px/1.1 var(--serif);margin:10px 0 18px}
.form-row{display:grid;gap:6px;margin-bottom:14px}
.form-row label{font-size:13px;color:#3a3732}
.form-row input.input-text,.form-row select,.form-row textarea,.select2-selection{min-height:48px;border:1px solid var(--trait);background:#fff;padding:0 14px;font:inherit;width:100%}
.form-row textarea{height:96px;padding:12px 14px}
#order_review{background:#fff;border:1px solid var(--trait);padding:28px}
#payment ul{list-style:none;margin:18px 0}
#place_order{width:100%;margin-top:14px}

@media (max-width:760px){
  .woocommerce-cart .woocommerce,.woocommerce-checkout form.checkout{grid-template-columns:1fr}
  .woocommerce-cart .cart-collaterals{grid-column:1;grid-row:auto;margin-top:24px}
  .woocommerce-checkout #customer_details,.woocommerce-checkout #order_review_heading,.woocommerce-checkout #order_review{grid-column:1;grid-row:auto}
  table.cart thead{display:none}
  table.cart tr.cart_item{display:grid;grid-template-columns:88px 1fr auto;gap:4px 14px;padding:18px 0;border-bottom:1px solid var(--trait)}
  table.cart tr.cart_item td{border:0;padding:0}
  table.cart .product-thumbnail{grid-row:1 / span 3;width:auto}
  table.cart .product-thumbnail img{width:88px}
  table.cart .product-remove{grid-column:3;grid-row:1;text-align:right}
  table.cart .product-name{grid-column:2;grid-row:1}
  table.cart .product-price{display:none!important}
  table.cart .product-quantity,table.cart .product-subtotal{grid-column:2}
  table.cart td::before{display:none}
  .achat .tailles button{height:46px}
  .achat .msc-motifs .wpcpo-option-form > .form-row{gap:5px}
  .achat .msc-motifs label{font-size:10px;padding:3px 3px 7px}
}

/* Boutique : la carte éditoriale garde la hauteur de sa photo */
.carte--edito.simple{align-self:start}

/* Rail des dessins (accueil) : défile sur le côté, au doigt ou avec les flèches */
.rail{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding-right:var(--marge)}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start}
.rail-zone{position:relative}
.rail-fleche{position:absolute;top:calc((100% - 70px) / 2);z-index:3;width:48px;height:48px;border-radius:50%;background:#fff;border:1px solid var(--trait);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.12)}
.rail-fleche.prec{left:-14px}
.rail-fleche.suiv{right:calc(var(--marge) - 14px)}
.rail-fleche[hidden]{display:none}
.rail-fleche .ico{width:18px;height:18px}
.rail-fleche.prec .ico{transform:scaleX(-1)}
@media (max-width:760px){.rail-fleche{display:none}}

/* Avis Google : présentés comme des cartes d'avis Google (logo, nom, étoiles, texte droit), pas comme des citations */
.avis{gap:16px}
.avis > div{display:flex;flex-direction:column;background:#fff;border:1px solid var(--trait);border-radius:12px;padding:22px 22px 24px;gap:10px}
.avis cite{order:-1;display:flex;align-items:center;gap:10px;margin:0;font:600 15px/1.2 var(--sans);letter-spacing:0;text-transform:none;color:var(--encre)}
.avis cite::before{content:"";width:22px;height:22px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.5 0 6.6 1.2 9.1 3.6l6.8-6.8C35.8 2.4 30.3 0 24 0 14.6 0 6.5 5.4 2.6 13.2l7.9 6.1C12.4 13.6 17.7 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.7c-.6 3-2.3 5.5-4.8 7.2l7.5 5.8c4.4-4.1 7.1-10.1 7.1-17.5z'/%3E%3Cpath fill='%23FBBC05' d='M10.5 28.7c-.5-1.5-.8-3-.8-4.7s.3-3.2.8-4.7l-7.9-6.1C1 16.4 0 20.1 0 24s1 7.6 2.6 10.8l7.9-6.1z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.5-5.8c-2.1 1.4-4.9 2.3-8.4 2.3-6.3 0-11.6-4.1-13.5-9.8l-7.9 6.1C6.5 42.6 14.6 48 24 48z'/%3E%3C/svg%3E") center/contain no-repeat}
.avis cite::after{content:"· avis Google";font-weight:400;color:var(--pierre);font-size:13px}
.avis blockquote{font:400 15px/1.55 var(--sans);font-style:normal;color:#2b2823}
.avis blockquote::before{content:"★★★★★";display:block;color:#F4B400;letter-spacing:2px;font-size:15px;margin-bottom:8px}

/* ===== Animations discrètes (coupées si « réduire les animations » est activé) ===== */
a,button,.btn,.carte .vis img{transition:color .2s,background-color .2s,border-color .2s,opacity .25s}
.carte .vis{position:relative}
.carte .vis .survol{position:absolute;inset:0;opacity:0}
@media (hover:hover){.carte:hover .vis .survol{opacity:1}}
.jauge i{transition:width .6s cubic-bezier(.2,.7,.2,1)}
.pastille{transition:transform .3s}
@media (prefers-reduced-motion:no-preference){
  /* Apparition douce au défilement : visible d'office sans JavaScript */
  .js .rev{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
  .js .rev.vu{opacity:1;transform:none}
  /* Zoom très lent sur la grande photo du haut */
  .heros picture img,.heros-cadeau picture img{animation:msc-zoom 14s ease-out both}
  @keyframes msc-zoom{from{transform:scale(1.06)}to{transform:scale(1)}}
  /* Menu téléphone : glisse depuis la gauche */
  .tiroir:not([hidden]){animation:msc-tiroir .35s cubic-bezier(.2,.7,.2,1)}
  @keyframes msc-tiroir{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}
  .tiroir:not([hidden]) .tiroir-liens a{animation:msc-fondu .5s both}
  .tiroir:not([hidden]) .tiroir-liens a:nth-child(2){animation-delay:.04s}.tiroir:not([hidden]) .tiroir-liens a:nth-child(3){animation-delay:.08s}.tiroir:not([hidden]) .tiroir-liens a:nth-child(4){animation-delay:.12s}.tiroir:not([hidden]) .tiroir-liens a:nth-child(n+5){animation-delay:.16s}
  @keyframes msc-fondu{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .pastille.saut{animation:msc-saut .5s}
  @keyframes msc-saut{40%{transform:scale(1.35)}}
  .carte .vis .survol{transition:opacity .45s ease}
  .confirmation .conf-boite{animation:msc-fondu .3s both}
}
@media (prefers-reduced-motion:reduce){.rev{opacity:1!important;transform:none!important}}

/* Transition entre les pages : fondu doux ; le bandeau et le menu restent en place (navigateurs récents, ignoré ailleurs) */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .bandeau{view-transition-name:msc-bandeau}
  .entete:not(.entete--sur){view-transition-name:msc-entete}
  ::view-transition-group(root){animation-duration:.4s}
  ::view-transition-old(root){animation:.2s ease both msc-page-sortie}
  ::view-transition-new(root){animation:.45s .05s ease both msc-page-entree}
  @keyframes msc-page-sortie{to{opacity:0}}
  @keyframes msc-page-entree{from{opacity:0;transform:translateY(10px)}}
}

/* « Prévenez-moi » */
.alerte{margin-top:16px;border:1px solid var(--trait);background:#fff;padding:14px 18px}
.alerte summary{list-style:none;cursor:pointer;font-size:13.5px;color:#3a3732}
.alerte summary::-webkit-details-marker{display:none}
.alerte summary::after{content:"+";float:right;font-size:18px;line-height:14px}
.alerte[open] summary::after{content:"–"}
.alerte-form{display:grid;gap:8px;margin-top:14px}
.alerte-form label{font-size:13px;color:#3a3732}
.alerte-form input[type=email],.alerte-form select{height:48px;border:1px solid var(--trait);background:#fff;padding:0 14px;font:inherit;width:100%}
.alerte-form .alerte-accord{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.45;color:var(--pierre)}
.alerte-form .alerte-accord input{margin-top:3px;flex:none}
.alerte-ok{margin-top:12px;font-size:14px}

/* ===== Confirmation de commande ===== */
.woocommerce-order-received .tete-page{display:none}
.merci{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 100px)}
.merci-photo{position:relative;overflow:hidden}
.merci-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.merci-texte{display:flex;flex-direction:column;justify-content:center;padding:72px 8vw 72px 6vw;background:var(--sable-clair)}
.merci-trait{width:200px;margin-bottom:34px}
.merci-trait img{height:auto}
.merci-texte .display{margin:18px 0 18px;font-size:76px}
.merci-etapes{list-style:none;counter-reset:e;margin:34px 0 0;display:grid;gap:18px}
.merci-etapes li{counter-increment:e;position:relative;padding-left:40px;font-size:14.5px;line-height:1.5;color:#3a3732}
.merci-etapes li::before{content:counter(e);position:absolute;left:0;top:-2px;font:400 26px/1 var(--serif);color:var(--klein)}
.merci-etapes li b{display:block;color:var(--encre);font-weight:600}
.merci-actions{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-top:34px}
.merci-recap{max-width:760px;margin:0 auto;padding:80px var(--marge) 110px}
.merci-recap h2{margin-bottom:18px}
.merci-recap .total td{border-bottom:0;font-size:17px}
@media (max-width:760px){
  .merci{grid-template-columns:1fr;min-height:0}
  .merci-photo{aspect-ratio:4/3}
  .merci-texte{padding:44px var(--marge) 52px}
  .merci-texte .display{font-size:52px}
}
@media (prefers-reduced-motion:no-preference){
  /* Le trait du mont Saint-Clair se dessine, puis le texte apparaît */
  .merci-trait img{clip-path:inset(0 100% 0 0);animation:msc-trace 1.6s .3s cubic-bezier(.4,0,.2,1) forwards}
  @keyframes msc-trace{to{clip-path:inset(0 0 0 0)}}
  .merci-texte > :not(.merci-trait){animation:msc-fondu .8s both}
  .merci-texte > :nth-child(2){animation-delay:.9s}.merci-texte > :nth-child(3){animation-delay:1.05s}.merci-texte > :nth-child(4){animation-delay:1.2s}.merci-texte > :nth-child(5){animation-delay:1.4s}.merci-texte > :nth-child(6){animation-delay:1.6s}
  .merci-photo img{animation:msc-zoom 14s ease-out both}
}
@media (prefers-reduced-motion:reduce){.merci-trait img{clip-path:none}}

/* Validation du paiement : le bouton passe en attente, le texte reste lisible */
#place_order.processing,.woocommerce-checkout .processing #place_order{opacity:.6;pointer-events:none}
.woocommerce-checkout #place_order.processing::after{content:"";width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:msc-tourne .8s linear infinite;margin-left:10px}
@keyframes msc-tourne{to{transform:rotate(360deg)}}

/* Commande : pas de champ code promo (marque premium, aucune remise) ; titres plus sobres */
.woocommerce-form-coupon-toggle,.checkout_coupon{display:none!important}
#ship-to-different-address{font:500 14px/1.4 var(--sans);margin:18px 0 6px}
#ship-to-different-address label{display:flex;gap:10px;align-items:center;cursor:pointer}
.woocommerce-additional-fields h3,.woocommerce-billing-fields h3{font:400 28px/1.1 var(--serif)}
.form-row.woocommerce-invalid input.input-text,.form-row.woocommerce-invalid select{border-color:#b3261e}
.woocommerce-checkout .blockUI.blockOverlay{background:rgba(247,244,239,.7)!important}

/* ===== Confirmation : rideau bleu avec le logo qui se dessine, puis la page se révèle ===== */
.merci-rideau{display:none}
@media (prefers-reduced-motion:no-preference){
  .merci-rideau{display:grid;place-items:center;position:fixed;inset:0;z-index:95;background:var(--klein);pointer-events:none;animation:msc-rideau 2.9s cubic-bezier(.77,0,.18,1) forwards}
  .merci-rideau img{width:min(520px,72vw);height:auto;clip-path:inset(0 100% 0 0);animation:msc-logo 1.5s .2s cubic-bezier(.4,0,.2,1) forwards}
  @keyframes msc-logo{to{clip-path:inset(0 0 0 0)}}
  @keyframes msc-rideau{0%,58%{transform:none;visibility:visible}100%{transform:translateY(-100%);visibility:hidden}}
  /* le trait de la page attend la fin du rideau */
  .merci-trait img{animation-delay:2.2s!important}
  .merci-texte > :nth-child(n+2){animation-delay:calc(2.4s + var(--d,0s))!important}
  .merci-texte > :nth-child(2){--d:0s}.merci-texte > :nth-child(3){--d:.15s}.merci-texte > :nth-child(4){--d:.3s}.merci-texte > :nth-child(5){--d:.5s}.merci-texte > :nth-child(6){--d:.7s}
  .merci-photo img{animation:msc-photo 2.8s 1.6s cubic-bezier(.2,.7,.2,1) both}
  @keyframes msc-photo{from{transform:scale(1.12);filter:brightness(.7)}to{transform:scale(1);filter:none}}
  .merci h1 .lettre{display:inline-block;opacity:0;transform:translateY(.45em);animation:msc-lettre .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(2.5s + var(--i) * 60ms)}
  @keyframes msc-lettre{to{opacity:1;transform:none}}
}

/* ===== Logo : au survol, le trait du mont se redessine (ordinateur, 0,8 s) ===== */
.entete .logo{display:block}
.entete .logo .logo-trait,.entete .logo .logo-texte{display:block;width:100%;height:auto}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .entete .logo:hover .logo-trait,.entete .logo:focus-visible .logo-trait{animation:msc-logo-trait .8s cubic-bezier(.4,0,.2,1)}
  @keyframes msc-logo-trait{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
}

/* Logo : le trait se dessine à la première page vue de la visite (téléphone compris) ; au survol sur ordinateur, il se redessine */
@keyframes msc-logo-trait-arrivee{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:no-preference){.entete .logo.trace .logo-trait{animation:msc-logo-trait-arrivee .9s .3s cubic-bezier(.4,0,.2,1) both}}

/* Menu : 5 liens sans toucher le logo */
@media (min-width:761px) and (max-width:1500px){.entete nav{gap:22px;letter-spacing:.1em;font-size:11.5px}}
.entete nav{white-space:nowrap}

/* ===== Journal (blog) ===== */
.billet{display:grid;gap:16px;color:inherit}
.billet .vis{aspect-ratio:4/3;overflow:hidden;background:var(--sable)}
.billet .vis img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.billet:hover .vis img{transform:scale(1.04)}}
.billet h2{margin:8px 0 10px}
.billet .txt{font-size:15px;color:#3a3732;max-width:56ch;margin-bottom:14px}
.blog-une{margin-bottom:64px}
.billet--une{grid-template-columns:7fr 5fr;gap:48px;align-items:center}
.billet--une .vis{aspect-ratio:16/11}
.blog-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 28px}
.article-blog{max-width:820px;margin:0 auto;padding:70px var(--marge) 40px}
.article-tete .h1{margin:16px 0 34px;font-size:56px}
.article-photo{aspect-ratio:16/10;overflow:hidden;margin:0 calc(-1*min(8vw,80px)) 44px;background:var(--sable)}
.article-corps{font-size:17px;line-height:1.75;color:#2b2823}
.article-corps p{margin:0 0 18px}
.article-corps h2{font:400 36px/1.1 var(--serif);margin:46px 0 14px;color:var(--encre)}
.article-corps h3{font:400 26px/1.2 var(--serif);margin:30px 0 8px;color:var(--klein)}
.article-corps ul,.article-corps ol{margin:0 0 18px 22px}
.article-corps a{color:var(--klein);text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){
  .billet--une{grid-template-columns:1fr;gap:16px}
  .blog-grille{grid-template-columns:1fr;gap:44px}
  .article-blog{padding:40px var(--marge) 20px}
  .article-tete .h1{font-size:36px;margin-bottom:24px}
  .article-photo{margin:0 calc(-1*var(--marge)) 30px}
  .article-corps{font-size:16px}
  .article-corps h2{font-size:28px}
}

.billet .vis img,.article-photo img{width:100%;height:100%;object-fit:cover}
.navigation.pagination{margin-top:60px;text-align:center}.navigation.pagination a,.navigation.pagination span{margin:0 14px;font-size:13px;letter-spacing:.12em;text-transform:uppercase}

/* ===== Typographie V2 (retour de Charlotte du 2/11) : deux polices seulement =====
   Titres courts : Paytone One, la plus proche du lettrage du logo, en capitales. Tout le reste : Inter (simple, neutre).
   Pour changer de police de titre, une seule ligne : la variable --serif ci-dessous. */
:root{--serif:'Paytone One','Arial Black',sans-serif;--sans:'Inter','Helvetica Neue',Arial,sans-serif}
body{font-family:var(--sans)}
.display,.h1,.h2,.h3{text-transform:uppercase;letter-spacing:.04em;font-weight:400}
.display{font-size:68px;line-height:1.02}
.h1{font-size:46px;line-height:1.08}
.h2{font-size:34px;line-height:1.1}
.h3{font-size:24px;line-height:1.15}
.it{font-style:normal;color:var(--klein)}
.heros .it,.heros-cadeau .it,.heros-simple .it,.banniere .it,.matiere .it,.merci-photo .it,.intro .it{color:inherit}
.panneau .h1{font-size:34px;line-height:1.1;margin:14px 0 10px}
.tete-page .h1{max-width:18ch}
.carte-dessin .nom,.motif .nom b,.dessin h2,.aide h3,.recap h2,.article .nom,.cart_totals h2,.recit .h1,.taille-aide .h1{font-family:var(--serif);text-transform:uppercase;letter-spacing:.04em;font-weight:400}
.carte-dessin .nom{font-size:20px;line-height:1.15}
.motif .nom b{font-size:20px}
.dessin h2{font-size:26px}
.aide h3{font-size:22px}
.recap h2,.cart_totals h2{font-size:26px}
.article .nom{font-size:19px;line-height:1.2}
.engagements b{font:400 16px/1.2 var(--serif);text-transform:uppercase;letter-spacing:.04em}
.chiffres b{font:400 34px/1 var(--serif);letter-spacing:.02em}
.budget-tete .montant{font:400 72px/0.9 var(--serif);letter-spacing:.02em}
.idee .total{font:400 38px/1 var(--serif)}
.merci-etapes li::before{font-family:var(--serif)}
.tiroir-liens a:not(.sous){font:400 26px/1.2 var(--serif);text-transform:uppercase;letter-spacing:.04em}
.tiroir-liens a.sous{font-family:var(--sans)}
.merci-texte .display{font-size:60px}
.cart-empty{font:400 22px/1.2 var(--serif);text-transform:uppercase}
.pied .lettre p.h3{font-size:22px}
/* Textes plus longs : police simple, jamais de capitales */
.manifeste p{font:600 clamp(24px,3vw,34px)/1.3 var(--sans);letter-spacing:-.01em;text-transform:none}
.manifeste p em{font-style:normal;color:var(--klein)}
.histoire .h2,.avis-tete .h3,.article-corps h2,.article-corps h3,.intro-phrase{font-family:var(--sans);text-transform:none;letter-spacing:-.01em;font-style:normal}
.histoire .h2{font-size:30px;line-height:1.2;font-weight:700}
.avis-tete .h3{font-size:20px;font-weight:600}
.article-corps h2{font:700 28px/1.2 var(--sans);margin:44px 0 12px}
.article-corps h3{font:700 20px/1.3 var(--sans);margin:28px 0 8px;color:var(--klein)}
.intro-phrase{font-weight:600;font-size:clamp(22px,3.6vw,36px)}
.avis blockquote{font-style:normal}
.titre-ligne .h2{max-width:20ch}
.article-tete .h1{font-size:38px;line-height:1.12;text-transform:none;letter-spacing:-.01em;font-family:var(--sans);font-weight:700}
@media (max-width:760px){
  .display{font-size:42px}
  .h1{font-size:32px}
  .h2{font-size:26px}
  .h3{font-size:21px}
  .panneau .h1{font-size:28px}
  .budget-tete .montant{font-size:52px}
  .merci-texte .display{font-size:40px}
  .heros-cadeau .display,.banniere .display,.heros-simple .display{font-size:40px}
  .article-tete .h1{font-size:28px}
  .article-corps h2{font-size:23px}
  .manifeste p{font-size:22px}
  .tiroir-liens a:not(.sous){font-size:24px}
}

/* Les champs de formulaire et boutons héritent de la police du site */
button,input,select,textarea{font-family:inherit}

/* ===== Retour de Charlotte (2/11) : accueil téléphone lisible, la photo n'est plus recouverte ===== */
@media (max-width:760px){
  .heros{height:auto;min-height:0;color:var(--encre);background:var(--sable);overflow:visible}
  .heros::after{display:none}
  .heros picture{position:relative;display:block;height:72vh;max-height:620px}
  .heros picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
  .heros .texte{position:static;padding:30px var(--marge) 44px;display:block}
  .heros .kicker{color:var(--pierre)}
  .heros p.sous{color:var(--encre)}
  .heros .it{color:var(--klein)}
  .heros .btn--clair{background:var(--klein);color:#fff;border-color:var(--klein)}
  .heros .btn--contour{background:transparent;color:var(--encre);border-color:var(--encre)}
}

/* ===== Police du logo : les lettres du logo, vectorisées, complétées au même feutre ===== */
@font-face{font-family:'MSC Marqueur';src:url(../fonts/MontSaintClair.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{--serif:'MSC Marqueur','Paytone One','Arial Black',sans-serif}
body{font-synthesis:none}
.display,.h1,.h2,.h3{letter-spacing:.015em}
.display{font-size:74px}
.h1{font-size:50px}
.h2{font-size:38px}
.h3{font-size:27px}
@media (max-width:760px){.display{font-size:46px}.h1{font-size:35px}.h2{font-size:29px}.h3{font-size:24px}}
/* ===== Test d'accueil : moitié vidéo, moitié photo (inspiré de ce que Charlotte aime chez Les Petits Foulards) ===== */
.split{display:grid;grid-template-columns:1fr 1fr;height:calc(100vh - 140px);min-height:560px;background:var(--sable)}
.split .pan{position:relative;overflow:hidden;background:#111}
.split .pan video,.split .pan>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split .carte-pan{position:absolute;left:28px;bottom:28px;min-width:330px;max-width:calc(100% - 56px);background:rgba(255,255,255,.95);padding:22px 26px 20px;color:var(--encre)}
.split .carte-pan .kicker{margin-bottom:8px}
.split .carte-pan .h3{margin:0 0 12px;font-size:24px}
.split .carte-pan .info{display:flex;justify-content:space-between;gap:24px;font-size:13px;color:var(--pierre);margin-bottom:14px}
.split .carte-pan .info b{color:var(--encre);font-weight:600;font-size:14px;white-space:nowrap}
@media (max-width:760px){
  .split{grid-template-columns:1fr;height:auto;min-height:0}
  .split .pan{height:82vh;min-height:520px}
  .split .carte-pan{left:0;right:0;bottom:0;max-width:none;min-width:0;padding:18px var(--marge) 20px}
}

.sr-seul{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Bandeau d'accueil vidéo (demande du 3-4/11) : ordinateur = bandeau horizontal de la vidéo avec logo et phrase par-dessus ; téléphone = texte puis vidéo verticale entière */
.accueil-video{position:relative;background:var(--klein);color:#fff}
.accueil-video .film{position:relative;width:100%;aspect-ratio:2.3;max-height:68vh;background:#111;overflow:hidden}
.accueil-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.accueil-video .voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.42));pointer-events:none}
.accueil-video .texte{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;pointer-events:none}
.accueil-video .logo-accueil{width:min(520px,60%);height:auto}
.accueil-video .phrase{font:600 clamp(16px,2vw,22px)/1.3 var(--sans);letter-spacing:.04em;margin:0}
.accueil-video .son{position:absolute;right:20px;bottom:20px;z-index:2;background:rgba(255,255,255,.92);color:#111;border:0;padding:10px 16px;font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
@media (max-width:760px){
  .accueil-video{display:flex;flex-direction:column}
  .accueil-video .texte{order:-1;position:static;padding:34px var(--marge) 30px}
  .accueil-video .logo-accueil{width:min(320px,80%)}
  .accueil-video .film{aspect-ratio:9/16;max-height:82vh}
  .accueil-video .voile{display:none}
  .accueil-video .son{right:14px;bottom:14px}
}
/* Trois sweats côte à côte sur ordinateur */
@media (min-width:761px){.split{grid-template-columns:repeat(3,1fr)}.split .carte-pan{left:18px;bottom:18px;min-width:0;right:18px;max-width:none;padding:18px 20px}.split .carte-pan .h3{font-size:20px}.split .carte-pan .info{gap:12px;flex-wrap:wrap}}

/* Vidéo en première place de la galerie d'un sweat */
.galerie .g.video{background:#111}
.galerie .g.video video{width:100%;height:100%;object-fit:cover;display:block}
.galerie .g.video{position:relative}
.galerie .g.video .surcouche{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;background:var(--sable)}
.galerie .g.video .surcouche[hidden]{display:none}
.apercu-dos{display:none}
@media (max-width:760px){.apercu-dos{display:block;width:100%;max-height:380px;object-fit:cover;object-position:50% 35%;margin:14px 0 4px}.apercu-dos[hidden]{display:none}}