/* Atelier Baratte — couche esthétique « joaillerie moderne »
 * Chargée après les styles de chaque page : arrondis, menu en capsule,
 * boutons « pierre polie » avec reflet, détails sertis (losanges dorés).
 */
:root{
  --radius:16px;
  --pill:999px;
  --or-grad:linear-gradient(135deg,#EAD6A6 0%,#CFAC69 42%,#B08A47 100%);
  --glint:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);
  --ease:cubic-bezier(.22,.8,.28,1);
}

/* ---------- En-tête ---------- */
header{
  background:linear-gradient(180deg,rgba(251,249,244,.94),rgba(246,243,236,.86));
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:0;transition:box-shadow .35s var(--ease),background .35s;
}
header::after{ /* fil d'or, comme une chaîne fine */
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(184,146,78,.65) 22%,rgba(217,190,131,.9) 50%,rgba(184,146,78,.65) 78%,transparent);
}
header.scrolled{box-shadow:0 14px 34px -24px rgba(28,42,69,.45);}
.nav{transition:height .35s var(--ease);}
header.scrolled .nav{height:66px;}
.nav .logo{transition:height .35s var(--ease);}

@media (min-width:641px){
  nav.links{
    gap:2px;padding:5px;border-radius:var(--pill);
    background:rgba(255,255,255,.62);
    border:1px solid rgba(184,146,78,.28);
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 26px -18px rgba(28,42,69,.35);
  }
  nav.links a:not(.nav-call){
    padding:9px 16px;border-radius:var(--pill);
    font-size:13.5px;letter-spacing:.03em;color:var(--encre);
    transition:background .3s var(--ease),color .3s;
  }
  nav.links a:not(.nav-call)::after{ /* petite pierre sertie au survol */
    width:6px;height:6px;left:50%;bottom:1px;border-radius:1px;
    background:var(--or-grad);
    transform:translateX(-50%) rotate(45deg) scale(0);
    transition:transform .35s var(--ease);
  }
  nav.links a:not(.nav-call):hover{background:rgba(184,146,78,.12);color:var(--marine);}
  nav.links a:not(.nav-call):hover::after,
  nav.links a.active::after{width:6px;transform:translateX(-50%) rotate(45deg) scale(1);}
  nav.links a.active{color:var(--marine);}
  nav.links .nav-call{margin-left:6px;}
}

/* Bouton téléphone de l'en-tête */
.nav-call{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--pill)!important;padding:11px 20px!important;
  background:var(--or-grad)!important;color:#2a2010!important;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 8px 20px -10px rgba(176,138,71,.9);
  transition:transform .25s var(--ease),box-shadow .25s;
}
.nav-call:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 12px 26px -10px rgba(176,138,71,1);background:var(--or-grad)!important;color:#2a2010!important;}

/* En-tête des pages intérieures */
.nav .right{gap:12px;}
.nav .right a.back{padding:8px 14px;border-radius:var(--pill);transition:background .25s,color .25s;}
.nav .right a.back:hover{background:rgba(184,146,78,.12);}
.nav .right a.dir{
  display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:var(--pill);
  border:1px solid rgba(184,146,78,.55);color:var(--marine);font-size:13.5px;
  transition:background .25s,border-color .25s;
}
.nav .right a.dir:hover{background:rgba(184,146,78,.12);border-color:var(--or);}
.crumb{background:transparent;}

/* Burger → croix */
.burger{width:44px;height:44px;border-radius:50%;padding:0!important;display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid rgba(184,146,78,.35)!important;background:rgba(255,255,255,.6)!important;}
.burger span{width:18px!important;height:1.5px!important;margin:0!important;transition:transform .35s var(--ease),opacity .25s!important;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

@media (max-width:640px){
  .burger{display:flex!important;}
  nav.links{
    left:12px!important;right:12px!important;top:calc(100% + 8px)!important;inset:auto;
    position:absolute!important;
    border-radius:22px;padding:10px!important;
    background:rgba(251,249,244,.98);
    border:1px solid rgba(184,146,78,.3)!important;
    box-shadow:0 30px 60px -30px rgba(28,42,69,.55)!important;
    transform:translateY(-12px) scale(.98)!important;opacity:0;visibility:hidden;
    transition:transform .35s var(--ease),opacity .3s,visibility 0s .35s!important;
  }
  nav.links.open{transform:none!important;opacity:1;background:#FBF9F4;visibility:visible;transition:transform .35s var(--ease),opacity .3s!important;}
  header{position:sticky;}
  header .nav{position:relative;}
  nav.links a:not(.nav-call){
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 16px!important;border-radius:14px;
    font-family:var(--serif);font-size:21px;color:var(--marine);letter-spacing:0;
  }
  nav.links a:not(.nav-call)+a:not(.nav-call){border-top:1px solid rgba(27,35,51,.07);}
  nav.links a:not(.nav-call)::after{
    content:"";display:block!important;position:static;width:7px;height:7px;flex:none;
    background:var(--or-grad);transform:rotate(45deg);border-radius:1px;opacity:.75;
  }
  nav.links a:not(.nav-call):active{background:rgba(184,146,78,.12);}
  nav.links .nav-call{margin:10px 4px 4px!important;justify-content:center;padding:15px 20px!important;font-size:14px;}
}

/* ---------- Boutons ---------- */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--pill)!important;
  min-height:52px;padding:12px 28px;letter-spacing:.09em;
  white-space:normal;text-align:center;line-height:1.3;
  transition:transform .25s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s,border-color .3s!important;
}
.btn::before,.nav-call::before,.callbar a::before{ /* reflet qui balaie, comme sur une pierre */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--glint);transform:translateX(-120%);
  transition:transform .8s var(--ease);
}
.btn:hover::before,.nav-call:hover::before,.callbar a:active::before{transform:translateX(120%);}
.btn-gold{
  background:var(--or-grad)!important;color:#2a2010!important;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 -2px 0 rgba(120,88,36,.18) inset,0 14px 30px -14px rgba(176,138,71,.95);
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 -2px 0 rgba(120,88,36,.18) inset,0 20px 36px -14px rgba(176,138,71,1);}
.btn-navy{border:1px solid rgba(28,42,69,.55);background:rgba(255,255,255,.35);}
.btn-navy:hover{transform:translateY(-2px);box-shadow:0 14px 28px -16px rgba(28,42,69,.6);}
/* Boutons clairs sur fond sombre (hero, bandeaux, contact) */
.hero .btn-navy,.band .btn-navy,.contact .btn-navy,.diff .btn-navy{
  background:rgba(255,255,255,.05);border-color:rgba(217,190,131,.6)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.hero .btn-navy:hover,.band .btn-navy:hover,.contact .btn-navy:hover,.diff .btn-navy:hover{background:rgba(217,190,131,.14)!important;color:#F2ECDD!important;}
.btn svg{transition:transform .3s var(--ease);}
.btn:hover svg{transform:rotate(-12deg) scale(1.08);}

/* Barre d'appel mobile */
.callbar{border-top:0!important;background:rgba(28,42,69,.94)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
.callbar a{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--pill)!important;background:var(--or-grad);}
.callbar a.dir{background:transparent!important;}

/* ---------- Cartes, photos, détails ---------- */
.metier,.gc,.ravis,.rev,.pic,.pcard,.step,.faq .list,.hours,.cf,.map,.map iframe,
.watches .grid figure,.watches .grid img,.gems img,.story .ph img,.story .ph{border-radius:var(--radius)!important;}
.pic,.metier,.gc,.pcard{overflow:hidden;}
.showcase .frame,.hero .ph{border-radius:24px!important;}
.showcase .frame img,.hero .ph img{border-radius:16px!important;}
.showcase .tag{border-radius:14px!important;}
.proof{border-radius:var(--pill)!important;}
input,.fld select,.fld textarea,textarea,select{border-radius:12px!important;}
.faq details summary{border-radius:12px;}
.rev .av,.ravis .av{box-shadow:0 0 0 2px var(--blanc),0 0 0 3px rgba(184,146,78,.55);}
.metier:hover,.gc:hover{border-top-color:transparent!important;box-shadow:0 22px 46px -26px rgba(28,42,69,.5),0 0 0 1px rgba(184,146,78,.45)!important;}

/* Accessibilité : focus visible doré, arrondi */
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:var(--pill);}

@media (prefers-reduced-motion:reduce){
  .btn::before,.nav-call::before,.callbar a::before{display:none;}
  .btn,.nav-call,nav.links,.burger span{transition:none!important;}
}

/* Bandeau doré sous le hero : le texte clair (#D7DCE6) était illisible sur fond or (contraste < 2:1) */
.trust .it,.trust .it b{color:#241c0a!important;}
.trust .it b{font-weight:600;}
/* Images avec width/height : garder le ratio réel sans écraser les hauteurs définies en CSS (évite le CLS) */
:where(img[width][height]){height:auto;}
/* Grilles de cartes : avec des cartes arrondies, le fond gris « en filet » de la grille devient visible → cartes séparées */
.grid3,.metiers{background:transparent!important;border:0!important;gap:18px!important;}
.grid3 .gc,.metiers .metier{border:1px solid var(--trait);}
/* Mobile, pages intérieures : bouton d'appel de l'en-tête réduit à une icône (la barre d'appel en bas reste) */
@media (max-width:640px){
  .nav .right{gap:8px;}
  .nav .right .nav-call{font-size:0!important;width:44px;height:44px;padding:0!important;justify-content:center;gap:0;}
  .nav .right .nav-call svg{width:18px;height:18px;}
  .nav .right a.dir{padding:10px 14px;}
}

/* ---------- Téléphone : le numéro ne se coupe jamais ---------- */
.tel-nb{white-space:nowrap;}
.btn-tel{white-space:nowrap!important;flex:1 1 auto!important;}
@media (max-width:420px){
  .btn-tel{letter-spacing:.04em!important;padding:12px 18px!important;font-size:13px!important;}
}

/* ---------- Mentions des avis Google : liens ---------- */
a.stars,a.proof-lnk,a.it,a.score{color:inherit;text-decoration:none;}
a.stars{cursor:pointer;}
a.stars:hover span:last-child,a.proof-lnk:hover,a.it:hover b{text-decoration:underline;text-decoration-color:var(--or);text-underline-offset:3px;}
a.proof-lnk{display:inline-flex;align-items:center;gap:6px;}
a.score{transition:transform .25s var(--ease);}
a.score:hover{transform:translateY(-2px);}
.rev a.g{text-decoration:none;transition:opacity .2s,color .2s;}
.rev a.g:hover{opacity:1;color:var(--or);}

/* ---------- Vidéos (TikTok, sans le son) ---------- */
.vids{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,250px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;margin-top:26px;scrollbar-width:thin;}
.vid{margin:0;scroll-snap-align:start;}
.vid video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:18px;background:#0F1830;box-shadow:0 18px 36px -24px rgba(28,42,69,.6),0 0 0 1px rgba(184,146,78,.35);cursor:pointer;}
.vid figcaption{margin-top:10px;font-size:14px;line-height:1.45;color:var(--encre);}
.vid figcaption a{display:block;margin-top:3px;font-size:12.5px;color:var(--or);}
#videos .vids{justify-content:safe center;}