/* =========================================================
   Bijouterie Léo Ouellet — feuille de style
   Contrastes vérifiés WCAG 2.2 AA (texte ≥ 4,5:1).
   Le doré pâle (--gold) sert seulement aux éléments décoratifs.
   ========================================================= */
:root{
  --ink:#1d1c1a; --ink-2:#2b2925; --ink-soft:#4a4743;
  --paper:#faf7f1; --paper-2:#f1ebdf; --white:#fff; --line:#d9cfbc;
  --gold:#a8812f;        /* décoratif seulement */
  --gold-text:#7d5f1f;   /* texte et boutons : 5,9:1 sur blanc */
  --gold-light:#e2c98d;  /* texte sur fond foncé : 10,5:1 */
  --gold-muted:#cdb683;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --radius:3px; --tap:48px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:1.0625rem/1.65 var(--sans)}
img,svg{max-width:100%}
a{color:var(--gold-text);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--gold-text);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible,header.site :focus-visible,footer :focus-visible{outline-color:var(--gold-light)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--white);color:var(--ink);padding:.75rem 1.1rem;z-index:100;font-weight:600}
.skip:focus{left:1rem;top:1rem}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.demo{background:#fff3cd;color:#4d3a00;text-align:center;font-size:.875rem;padding:.45rem 1rem;border-bottom:1px solid #e9d48f}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:var(--tap);padding:.7rem 1.35rem;border-radius:var(--radius);text-decoration:none;font-weight:600;font-size:1rem;border:2px solid transparent;line-height:1.2}
.btn svg{width:20px;height:20px;flex:none}
.btn-primary{background:var(--gold-text);color:var(--white)}
.btn-primary:hover{background:#654c18}
.btn-outline{border-color:var(--gold-light);color:var(--gold-light)}
.btn-outline:hover{background:rgba(226,201,141,.12)}
.btn-outline-dark{border-color:var(--gold-text);color:var(--gold-text);background:var(--white)}
.btn-outline-dark:hover{background:var(--paper-2)}

/* ---------- En-tête ---------- */
header.site{background:var(--ink);color:var(--paper);position:sticky;top:0;z-index:50;border-bottom:1px solid #3a3731}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px}
.logo{display:flex;align-items:center;gap:.7rem;color:var(--paper);text-decoration:none}
.logo svg{width:34px;height:34px;flex:none}
.logo-text{font-family:var(--serif);line-height:1.05}
.logo-text small{display:block;font-family:var(--sans);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-muted)}
.logo-text span{font-size:1.4rem;letter-spacing:.03em}
nav.main ul{list-style:none;margin:0;padding:0;display:flex;gap:.3rem;flex-wrap:wrap}
nav.main a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 .75rem;color:var(--paper);text-decoration:none;font-size:.97rem;border-radius:var(--radius)}
nav.main a:hover{color:var(--gold-light);background:rgba(255,255,255,.05)}
.header-call{display:none}

/* ---------- Statut ouvert / fermé ---------- */
.status{display:inline-flex;align-items:center;gap:.5rem;font-size:.95rem;font-weight:600;padding:.35rem .8rem;border-radius:999px;background:rgba(255,255,255,.08);color:var(--paper);margin-bottom:1.1rem}
.status[hidden]{display:none}
.status .dot{width:10px;height:10px;border-radius:50%;background:#9a9a9a}
.status.is-open .dot{background:#5bd17f}
.status.is-closed .dot{background:#ff8a7a}

/* ---------- Héros ---------- */
.hero{background:linear-gradient(170deg,var(--ink) 0%,var(--ink-2) 100%);color:var(--paper);padding:76px 0 88px}
.hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:2.5rem;align-items:center}
.eyebrow{font-size:.8rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-muted);margin:0 0 .9rem;font-weight:600}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.25rem,5.2vw,3.75rem);line-height:1.08;margin:0 0 1.1rem;text-wrap:balance}
.hero .lead{font-size:1.15rem;color:#ece6d9;max-width:38ch;margin:0 0 2rem}
.ctas{display:flex;gap:.8rem;flex-wrap:wrap}
.hero-art svg{width:100%;max-width:300px;height:auto;display:block;margin:0 auto}

/* ---------- Sections ---------- */
section{padding:80px 0;scroll-margin-top:72px}
.alt{background:var(--paper-2)}
.dark{background:var(--ink);color:var(--paper)}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.75rem,3.5vw,2.5rem);line-height:1.15;margin:0 0 .7rem;text-wrap:balance}
h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;line-height:1.25;margin:.9rem 0 .45rem}
.rule{width:56px;height:2px;background:var(--gold);margin:0 0 1.6rem;border:0}
.intro{max-width:62ch;color:var(--ink-soft);margin:0}
.dark .intro{color:#ddd5c5}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.2rem}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.2rem}
.card{background:var(--white);border:1px solid var(--line);padding:1.7rem;border-radius:var(--radius)}
.card p{margin:0;color:var(--ink-soft)}
.icon{width:44px;height:44px;stroke:var(--gold);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* Occasions */
.occasion{border-top:2px solid var(--gold);padding-top:1rem}
.occasion h3{margin-top:0}
.occasion p{margin:0;color:#ddd5c5;font-size:.98rem}

/* Photos — à remplacer */
.photos{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem;margin-top:2.2rem}
.ph{aspect-ratio:4/3;background:linear-gradient(135deg,#2b2925,#4a4436);display:flex;align-items:flex-end;padding:1rem;color:#efe9dc;font-family:var(--serif);font-size:1.1rem;border-radius:var(--radius);margin:0}
.ph:first-child{aspect-ratio:auto}
.photos img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);display:block}

/* Marques */
.brands{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.8rem 0 0;padding:0;list-style:none}
.brands li{border:1px solid var(--line);background:var(--white);padding:.8rem 1.3rem;font-family:var(--serif);font-size:1.1rem;border-radius:var(--radius)}
.note{font-size:.92rem;color:var(--ink-soft);margin-top:1.1rem}

/* Avis */
.rating{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;background:var(--white);border:1px solid var(--line);padding:1.7rem;margin-top:1.8rem;max-width:640px;border-radius:var(--radius)}
.rating .score{font-family:var(--serif);font-size:3.4rem;line-height:1}
.stars{color:var(--gold-text);font-size:1.35rem;letter-spacing:.1em}

/* FAQ */
.faq{margin-top:2rem;max-width:780px}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:.7rem}
.faq summary{cursor:pointer;padding:1rem 3rem 1rem 1.2rem;font-weight:600;min-height:var(--tap);position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--gold-text);font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq details>div{padding:0 1.2rem 1.1rem;color:var(--ink-soft)}
.faq details>div p{margin:0 0 .6rem}

/* Visite */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-top:2.2rem}
address{font-style:normal}
.info dt{font-weight:700;margin-top:1.1rem}
.info dt:first-child{margin-top:0}
.info dd{margin:.2rem 0 0}
.info-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}
table.hours{border-collapse:collapse;width:100%;background:var(--white);border:1px solid var(--line)}
table.hours caption{text-align:left;font-weight:700;padding-bottom:.6rem}
table.hours th,table.hours td{padding:.75rem 1rem;border-bottom:1px solid var(--line);text-align:left}
table.hours th{font-weight:600}
table.hours tr.today{background:#fbf3df}
table.hours tr.today th::after{content:" (aujourd'hui)";font-weight:400;color:var(--ink-soft);font-size:.9rem}
.tbc{color:#7a5500;font-style:italic}
.notice{margin-top:1rem;padding:.9rem 1.1rem;border-left:4px solid var(--gold-text);background:var(--white);font-size:.97rem}

/* ---------- Pied de page ---------- */
footer.site{background:var(--ink);color:#d9d1c2;padding:3rem 0 2rem;font-size:.95rem}
footer.site .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem}
footer.site h2{font-family:var(--sans);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-muted);margin:0 0 .8rem;font-weight:700}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin:.35rem 0}
footer.site a{color:var(--gold-light)}
footer.site .legal{border-top:1px solid #3a3731;margin-top:2.2rem;padding-top:1.4rem;font-size:.875rem;color:#bfb7a8;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---------- Barre d'action mobile ---------- */
.mobile-bar{display:none}

/* ---------- Pages de texte (politique, accessibilité) ---------- */
.page{max-width:780px;margin:0 auto;padding:56px 20px 80px}
.page h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,2.6rem);line-height:1.15;margin:0 0 .5rem}
.page h2{font-size:1.4rem;margin:2.4rem 0 .6rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.page .meta{color:var(--ink-soft);font-size:.95rem}
.box{background:var(--white);border:1px solid var(--line);padding:1.2rem 1.4rem;border-radius:var(--radius)}
.box p:first-child{margin-top:0}.box p:last-child{margin-bottom:0}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .grid4{grid-template-columns:repeat(2,1fr)}
  footer.site .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  nav.main{display:none}
  .header-call{display:inline-flex;min-height:44px;padding:.5rem .9rem;font-size:.95rem}
  .hero{padding:48px 0 60px}
  .hero .wrap,.visit{grid-template-columns:1fr}
  .hero-art{display:none}
  .grid3{grid-template-columns:1fr}
  .photos{grid-template-columns:1fr 1fr}
  .photos .ph:first-child{grid-column:span 2;aspect-ratio:16/9}
  section{padding:60px 0;scroll-margin-top:64px}
  footer.site .cols{grid-template-columns:1fr}
  body{padding-bottom:76px}
  .mobile-bar{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink);padding:.6rem 12px calc(.6rem + env(safe-area-inset-bottom));border-top:1px solid #3a3731}
  .mobile-bar .btn{width:100%}
}
@media (max-width:480px){
  .grid4{grid-template-columns:1fr}
  .ctas .btn{width:100%}
}

/* ---------- Préférences de l'utilisateur ---------- */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
@media (prefers-contrast:more){
  :root{--ink-soft:#1d1c1a;--line:#6b655b}
  .card,.rating,table.hours,.faq details,.brands li{border-width:2px}
}
@media (forced-colors:active){
  .btn{border:2px solid ButtonText}
  .status .dot{forced-color-adjust:none}
}

/* ---------- Impression ---------- */
@media print{
  header.site,.mobile-bar,.demo,.hero-art,.photos,.skip,.ctas{display:none!important}
  body{background:#fff;color:#000;padding:0;font-size:12pt}
  .hero,.dark,.alt,footer.site{background:#fff!important;color:#000!important}
  .hero .lead,.dark .intro,.occasion p,footer.site,footer.site a{color:#000!important}
  section{padding:16pt 0}
  a[href^="tel:"]::after{content:""}
}

/* ---------- Correctifs téléphone (test 320 à 430 px, paysage, tablette) ---------- */
.logo,.wordmark{min-height:44px;justify-content:center}
.rating a{display:inline-block;padding:.65rem 0}
.logo-text small,.wordmark small,.wordmark .l1{font-size:.75rem}
@media (max-width:820px){
  /* La barre Appeler / Itinéraire du bas suffit : l en-tête défile avec la page */
  header.site{position:static}
  section{scroll-margin-top:0}
}
@media (max-height:500px){header.site{position:static}}
@media (min-width:821px) and (max-width:1000px){nav.main a{padding:0 .5rem;font-size:.92rem}}

.rating p{margin:0}
.rating .stars{margin-bottom:.25rem}
table.hours td{white-space:nowrap}