/* Socle commun aux vitrines Atelier Devanture.
   Aucune identite ici: ni couleur de marque, ni police, ni mise en page de
   section. Uniquement la plomberie que chaque site refait sinon a l identique.
   Variables attendues de la vitrine:
   --fond --fond-2 --encre --encre-douce --accent --accent-clair --trait --r --max */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-width:thin;
     scrollbar-color:color-mix(in srgb,var(--accent) 55%,transparent) var(--fond)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--fond)}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 45%,transparent);
  border-radius:99px;border:3px solid var(--fond)}
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
body{margin:0;background:var(--fond);color:var(--encre);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0}
::selection{background:var(--accent);color:var(--fond)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.enveloppe{width:100%;max-width:var(--max,1180px);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.mesure{max-width:62ch}
.section{padding-block:clamp(72px,11vw,132px)}

.barre{position:fixed;inset:0 0 auto;z-index:60;height:68px;display:flex;align-items:center;
  border-bottom:1px solid transparent;transition:background .35s ease,border-color .35s ease}
.barre.posee{background:color-mix(in srgb,var(--fond) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom-color:var(--trait)}
.barre .enveloppe{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}
.marque{display:flex;align-items:center;gap:11px;font-size:.82rem;letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none}
.marque i{width:11px;height:11px;border:1.5px solid var(--accent);border-radius:50%;display:block;flex:none}
.menu{display:flex;gap:30px;list-style:none;margin:0;padding:0;font-size:.95rem}
.menu a{text-decoration:none;color:var(--encre-douce);transition:color .18s ease}
@media (hover:hover){.menu a:hover{color:var(--encre)}}
.ouvrir{display:none;background:none;border:0;color:var(--encre);padding:10px;cursor:pointer}
.ouvrir svg{display:block}
.tiroir{position:fixed;inset:68px 0 auto;z-index:55;background:var(--fond-2);
  border-bottom:1px solid var(--trait);padding:28px clamp(20px,5vw,40px) 34px;display:none}
.tiroir[data-ouvert="oui"]{display:block}
.tiroir .menu a{color:var(--encre)}
.tiroir .bouton{margin-top:24px}
@media (max-width:820px){
  .menu,.barre .bouton{display:none}
  .ouvrir{display:block}
  .tiroir .menu{display:flex;flex-direction:column;gap:18px;font-size:1.3rem}
  .tiroir .bouton{display:inline-flex}
}

.bouton{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:999px;border:1px solid var(--accent);
  background:var(--accent);color:var(--fond);font-weight:500;font-size:.95rem;line-height:1;
  text-decoration:none;cursor:pointer;white-space:nowrap;font-family:inherit;
  transition:background .18s ease,transform .12s ease,border-color .18s ease,color .18s ease}
@media (hover:hover){.bouton:hover{background:var(--accent-clair);border-color:var(--accent-clair)}}
.bouton:active{transform:scale(.97)}
.bouton.vide{background:transparent;color:var(--encre);border-color:var(--trait)}
@media (hover:hover){.bouton.vide:hover{border-color:var(--encre);
  background:color-mix(in srgb,var(--encre) 7%,transparent)}}

.champ{display:grid;gap:7px}
.champ label{font-size:.85rem;color:var(--encre-douce)}
.champ input,.champ select,.champ textarea{width:100%;padding:14px 15px;border-radius:10px;
  border:1px solid var(--trait);background:color-mix(in srgb,var(--encre) 4%,transparent);
  color:var(--encre);font-size:1rem;line-height:1.2;font-family:inherit;
  transition:border-color .18s ease,background .18s ease}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--accent);
  background:color-mix(in srgb,var(--encre) 7%,transparent);outline:none}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:460px){.duo{grid-template-columns:1fr}}

.pied{border-top:1px solid var(--trait);padding-block:46px;font-size:.92rem;color:var(--encre-douce)}
.pied .enveloppe{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
.pied a{color:var(--accent-clair);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .18s}
@media (hover:hover){.pied a:hover{border-bottom-color:var(--accent-clair)}}
.demo{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:70;
  display:flex;align-items:center;gap:10px;padding:9px 15px;border-radius:999px;
  background:color-mix(in srgb,var(--fond-2) 92%,transparent);border:1px solid var(--trait);
  backdrop-filter:blur(8px);font-size:.8rem;color:var(--encre-douce);
  max-width:calc(100% - 32px);box-shadow:0 14px 34px -20px rgba(0,0,0,.7)}
.demo a{color:var(--encre);text-decoration:none;border-bottom:1px solid var(--accent)}
@media (max-width:560px){.demo{font-size:.74rem;padding:8px 13px;gap:7px;right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom))}}