/* ==========================================================================
   MARBRELINE — passe UX/UI responsive du 17/10/2026. Chargée après ui.css (inc/responsive.php).
   Paliers : téléphone < 600 px · tablette 600–1020 px · ordinateur > 1020 px. Auparavant tout ce qui
   mesurait moins de 780 px prenait la mise en page téléphone, tablettes portrait (768 px) comprises.
   Hors champ, volontairement : l'accueil sous le carrousel et son pied de page (maquette du 17/10, .hm-*,
   .footer-accueil), le carrousel et la page modèle (maquettes client), sauf les adaptations mobiles notées.
   ========================================================================== */

/* ---------- Socle : ancres, mouvement réduit, focus clavier ---------- */
html{scroll-padding-top:calc(var(--header-h) + 16px)} /* une ancre (#contact-form…) ne finit plus sous l'en-tête fixe */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.site-header:focus-within{transform:none} /* l'en-tête masqué au défilement revient dès qu'un de ses liens reçoit le focus */
/* Anneau de focus : l'or du site ne fait que 2,4:1 sur crème ; or sombre (4,3:1 crème, 3,9:1 noir), or clair sur les fonds sombres */
:focus-visible{outline-color:#8a6d3f}
:is(.hero,.page-hero,.pd-hero,.stone-reel,.site-footer,.quote,.lightbox) :focus-visible,.site-header:not(.is-scrolled) :focus-visible{outline-color:var(--gold)}
.contact :focus-visible{outline-color:#fff}
@media(max-width:1020px){.site-header .nav.is-open :focus-visible{outline-color:var(--gold)}}

/* ---------- Lisibilité : plus aucun texte utile sous 10 px ---------- */
.eyebrow{font-size:11px}
.button:not(.fa-cta):not(.footer-simple-cta){font-size:11px} /* les boutons des deux maquettes gardent leur réglage */
.stone-reel .reel-note{font-size:11px}
.process span{font-size:11px}
.info-list small{font-size:10px}
.footer-col h3{font-size:11px}
.site-footer:not(.footer-accueil)>small{font-size:11px}
.hero-film-mark small{font-size:9px}
/* Or des titres sur fond clair : l'or #b89a6a ne fait que 2,35:1 sur crème. #9a7a48 (3,5:1) est celui des titres de
   la page modèle, à un ton de l'ombre bronze du logo (#9c734b) ; sur le sable de « savoir-faire », un cran plus sombre. */
.section-title em{color:#9a7a48}
.craft .section-title em{color:#836639}

/* ---------- Cibles tactiles : 44 px au doigt, sans rien changer à l'œil ---------- */
@media(pointer:coarse){
  .link,.reel-note a,.crumbs a,.social,.info-list a{position:relative}
  .link:after,.reel-note a:after,.crumbs a:after,.social:after,.info-list a:after{content:"";inset:-12px -8px;position:absolute}
  .site-footer .footer-col p:not(.footer-nav) a{display:inline-block;padding-block:9px} /* le menu (p.footer-nav) garde ses liens en bloc */
  .site-footer .footer-nav a{padding-block:11px}
  .footer-simple-nav a{padding-block:12px}
  .model-filters button{min-height:44px}
  .info-list a{display:inline-block;padding-block:4px}
  .pd-more-arrow{position:relative}
  .pd-more-arrow:after{border-radius:50%;content:"";inset:-8px;position:absolute}
}

/* ---------- Héros de l'accueil ----------
   Le texte était posé en absolu à 28 % du haut : sur un écran bas (téléphone à l'horizontale, portable zoomé)
   il débordait et le bouton « Explorer la collection » passait sous le bas du héros, hors d'atteinte.
   Il est maintenant dans le flux : même position à l'œil, et le héros grandit si le contenu l'exige. */
.hero{display:flex;flex-direction:column;justify-content:center;padding:calc(var(--header-h) + 48px) 0 120px}
.hero .hero-inner{inset:auto;margin:0 6vw 0 8vw;position:relative}
.hero-film-mark{right:max(7vw,104px)} /* ne passe plus sous le bouton WhatsApp fixe (1024 px, téléphone à l'horizontale) */
@media(max-width:1020px){.hero .hero-inner{margin-left:6vw}}
@media(max-width:780px){.hero{justify-content:flex-end;padding-bottom:90px}}
@media(max-height:520px) and (orientation:landscape){
  .hero{justify-content:flex-start;min-height:0;padding:calc(var(--header-h) + 18px) 0 44px}
  .hero h1{font-size:clamp(2.2rem,6.4vw,3.4rem)}
  .hero-inner>p{font-size:14px;margin:12px 0 0}
  .hero-actions{margin-top:20px}
  .hero-film-mark{display:none}
}

/* ---------- Bandeaux des pages intérieures ----------
   WebP (inc/responsive.php) là où image-set() est compris, JPEG sinon. Moins hauts sur tablette et téléphone :
   sur le catalogue, la première pierre apparaissait après plus d'un écran et demi de défilement. */
@supports (background-image:image-set(url("a.webp") type("image/webp"))){
  .page-hero[style*="--hero-webp"]:before{background-image:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.1)),image-set(var(--hero-webp) type("image/webp"),var(--hero) type("image/jpeg"))}
}
@media(max-width:1020px){.page-hero{min-height:clamp(400px,50vh,540px)}}
@media(max-width:599px){.page-hero{min-height:0}.page-hero .wrap{padding-bottom:52px;padding-top:128px}}

/* ---------- Catalogue (grille inchangée) ---------- */
.model-meta small{color:#6f675e} /* 4,9:1 sur crème (le gris pierre faisait 3,6:1 à 10 px) ; même gris que la page modèle */
@media(max-width:380px){.model-grid{gap:26px 12px;grid-template-columns:1fr 1fr}.model-meta strong{font-size:17px}} /* plus de colonne unique : 25 pierres faisaient 12 000 px de page */

/* ---------- Réalisations : galerie et citation ---------- */
@media(max-width:1020px){.gallery{column-gap:12px}.gallery figure{margin-bottom:12px}}
@media(min-width:600px) and (max-width:1020px){.gallery{columns:3}}
@media(max-width:599px){.gallery{column-gap:10px;columns:2}.gallery figure{margin-bottom:10px}} /* vignettes : la visionneuse montre la photo en grand */
.quote-image{height:auto;min-height:620px;position:relative} /* la photo suit la hauteur du texte : plus de bande noire dessous */
.quote-image img{inset:0;position:absolute}
@media(max-width:780px){.quote-image{aspect-ratio:4/3;min-height:0}}

/* ---------- À propos ---------- */
@media(max-width:780px){.about-block img{aspect-ratio:4/5;height:auto;margin-top:44px}} /* 600 px fixes, même sur un téléphone */
@media(min-width:600px) and (max-width:780px){.about-block img{aspect-ratio:16/10}}

/* ---------- Contact ----------
   Fond taupe plus profond : le texte blanc sur #958b7f ne faisait que 3,35:1 (5,5:1 sur #71685d).
   Sous 1020 px le formulaire passe en premier : la photo décorative le repoussait sous deux écrans de défilement. */
.contact{background:#71685d}
.contact-content form{margin-top:30px}
.contact-grid{align-items:start;padding-block:clamp(64px,7vw,110px)} /* « Demande de devis » touchait le haut de la section */
@media(min-width:1021px){.contact-photo{position:sticky;top:110px}} /* la photo accompagne le formulaire au lieu de flotter au milieu d'un vide */
@media(max-width:1020px){
  .contact-grid{display:block;padding-block:56px 64px}
  .contact-photo{display:none}
  .contact-content{margin-top:0}
  .contact-content .section-title{max-width:640px}
}
@media(min-width:600px){.contact form{grid-template-columns:1fr 1fr}}
/* Étiquettes flottantes : l'intitulé reste visible pendant la saisie (le texte indicatif disparaissait). 16 px : iOS ne zoome plus. */
.contact .field{display:block;position:relative}
.contact .field input,.contact .field textarea{border-bottom-color:rgba(255,255,255,.72);display:block;font-size:16px;padding:24px 0 9px;width:100%}
.contact .field textarea{min-height:112px}
.contact .field>span{color:rgba(255,255,255,.9);font-size:15px;left:0;line-height:1.2;pointer-events:none;position:absolute;top:25px;transform-origin:0 0;transition:transform .3s var(--ease),letter-spacing .3s}
.contact .field :is(input,textarea):is(:focus,:not(:placeholder-shown))+span{letter-spacing:.05em;transform:translateY(-20px) scale(.74)}
.contact .field :is(input,textarea):focus{border-bottom-color:#fff;box-shadow:0 1px 0 #fff}
.contact ::placeholder{color:transparent}
.contact input:-webkit-autofill{-webkit-box-shadow:0 0 0 60px #71685d inset;-webkit-text-fill-color:#fff;caret-color:#fff}
.contact .field-msg,.contact .form-hint{grid-column:1/-1}
.contact .form-hint{font-size:13px;margin:2px 0 6px;opacity:.9}
@media(max-width:599px){.contact .form-button{justify-self:stretch}}
body:has(#contact-form) .site-footer .footer-cta{display:none} /* « Demander un devis » ne renvoie pas vers la page où l'on est déjà */

/* ---------- Pied de page complet (pages intérieures) ---------- */
@media(min-width:600px) and (max-width:780px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:599px){ /* deux écrans de colonnes empilées → logo et adresse en pleine largeur, puis contact | menu côte à côte */
  .footer-grid{gap:30px 14px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:44px 0 34px}
  .footer-col:nth-child(-n+2){grid-column:1/-1}
  .site-footer .footer-col p{max-width:none}
  .site-footer .brand .brand-logo{height:84px}
}

/* ---------- Page modèle (maquette du 16/10) : adaptations sous 1020 px ----------
   Le nom et le surtitre répétaient ceux du bandeau situé juste au-dessus : les boutons suivent directement la galerie. */
@media(max-width:1020px){.pd-info .pd-eyebrow,.pd-info h2{display:none}}
@media(min-width:600px) and (max-width:1020px){.pd-actions{grid-template-columns:1fr 1fr}}

/* ---------- Bouton WhatsApp fixe ---------- */
.wa-float{transition:transform .35s var(--ease),opacity .3s,visibility .3s}
body.cta-in-view .wa-float{opacity:0;pointer-events:none;transform:scale(.7);visibility:hidden} /* masqué quand les boutons Devis/WhatsApp de la page sont à l'écran (ux.js) */

/* ---------- Visionneuse ---------- */
.lightbox{transition:opacity .35s,visibility 0s .35s;visibility:hidden} /* fermée, ses boutons ne sont plus atteignables au clavier */
.lightbox.is-open{transition:opacity .35s;visibility:visible}
.lightbox .lb-close{display:grid;height:48px;place-items:center;right:12px;top:12px;width:48px}
.lightbox img{max-width:100%}
@media(max-width:599px){.lightbox{padding:64px 0}}