/* ============================================================
   OPTIQUE ALIÉNOR — feuille de style
   Générée le 2026-08-04 à 13:55 UTC  ·  version 20260804-1355
   Le numéro de version est repris dans le ?v= des <link> des
   pages HTML : à chaque modification de ce fichier, incrémenter
   les deux (ici et dans index.html + mentions-legales.html).
   ============================================================ */

/* ---------- jetons ---------- */
:root{
  --encre:#20594F; --ardoise:#4E7F74; --verre:#EFF4F2;
  --blanc:#FFFFFF; --ambre:#459985; --trait:rgba(32,89,79,.16);
  --serif:"Bricolage Grotesque",Georgia,serif;
  --corps:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--verre);color:var(--encre);
  font-family:var(--corps);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
.wrap{width:min(1080px,92vw);margin:0 auto}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--ambre);outline-offset:3px}
.saut{position:absolute;left:-9999px;top:0;background:var(--encre);color:#fff;padding:12px 18px;z-index:99}
.saut:focus{left:8px;top:8px}

/* ---------- en-tête ---------- */
header{padding:22px 0;border-bottom:1px solid var(--trait);background:var(--blanc)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.logo{display:block;line-height:0;text-decoration:none}
.logo img{height:46px;width:auto}
nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav a{display:block;text-decoration:none;font-size:15px;font-weight:500;padding:10px 12px;
  border-radius:4px;min-height:44px;line-height:24px}
nav a:hover{background:var(--verre)}
.retour{font-size:15px;font-weight:500;text-decoration:none;padding:10px 12px;
  border:1px solid var(--trait);border-radius:4px;background:var(--blanc);min-height:44px}
.retour:hover{background:var(--verre)}

/* ---------- héro ---------- */
.hero{padding:64px 0 56px;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ardoise);margin:0 0 18px}
h1{font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:-.02em;
  font-size:clamp(34px,6vw,60px);margin:0 0 22px;
  animation:miseAuPoint 1.4s cubic-bezier(.2,.7,.2,1) both}
h1 em{font-style:normal;font-weight:800}
@keyframes miseAuPoint{from{filter:blur(15px);opacity:.15}to{filter:blur(0);opacity:1}}
.chapo{max-width:50ch;font-size:18.5px;color:var(--ardoise);margin:0 0 16px}
.avis{font-family:var(--mono);font-size:13.5px;color:var(--ardoise);margin:0 0 28px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:16px;
  padding:15px 24px;border-radius:4px;border:1px solid var(--encre);transition:.18s ease;min-height:44px}
.btn-plein{background:var(--encre);color:var(--blanc)}
.btn-plein:hover{background:var(--ardoise);border-color:var(--ardoise)}
.btn-vide{background:var(--blanc)}
.btn-vide:hover{background:transparent}
.portrait{position:relative;justify-self:center}
.portrait::before{content:"";position:absolute;inset:-6% -12% 6% -12%;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,#fff 0%,rgba(255,255,255,.55) 55%,rgba(255,255,255,0) 72%)}
.portrait img{position:relative;width:min(360px,80vw)}

/* ---------- sections ---------- */
section{padding:52px 0}
.titre{font-family:var(--mono);font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ardoise);margin:0 0 24px;padding-bottom:12px;border-bottom:1px solid var(--trait)}
h2{font-family:var(--serif);font-weight:600;font-size:26px;margin:0 0 10px;letter-spacing:-.01em}

/* ---------- boutiques + cartes ---------- */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.carte{background:var(--blanc);border:1px solid var(--trait);border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column}
.carte-txt{padding:28px}
.carte address{font-style:normal;color:var(--ardoise);margin:0 0 16px}
.tel{font-family:var(--mono);font-size:19px;text-decoration:none;
  border-bottom:2px solid var(--ambre);padding-bottom:2px;display:inline-block;margin-bottom:20px}
.horaires{font-family:var(--mono);font-size:14px;line-height:1.95;margin:0;
  border-top:1px solid var(--trait);padding-top:14px}
.horaires div{display:flex;justify-content:space-between;gap:14px}
.horaires dt{color:var(--ardoise)}
.horaires dd{margin:0;text-align:right}
.ferme{color:var(--ardoise);opacity:.65}
.plan{border-top:1px solid var(--trait);background:var(--verre)}
.plan iframe{width:100%;height:240px;border:0;display:block}
.plan a{display:block;padding:14px 28px;font-family:var(--mono);font-size:13px;
  letter-spacing:.04em;text-decoration:none;border-top:1px solid var(--trait);background:var(--blanc)}
.plan a:hover{background:var(--verre)}
.plan a::after{content:" →"}

/* ---------- prestations ---------- */
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:var(--trait);border:1px solid var(--trait);border-radius:6px;overflow:hidden}
.item{background:var(--blanc);padding:26px 24px}
.item h3{font-family:var(--serif);font-size:18px;font-weight:600;margin:0 0 8px}
.item p{margin:0;font-size:15px;color:var(--ardoise);line-height:1.55}

/* ---------- galerie ---------- */
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.galerie figure{margin:0;background:var(--blanc);border:1px solid var(--trait);
  border-radius:6px;overflow:hidden}
.galerie img{aspect-ratio:1/1;object-fit:cover;width:100%;transition:transform .4s ease}
.galerie figure:hover img{transform:scale(1.04)}
.galerie figcaption{font-family:var(--mono);font-size:12px;color:var(--ardoise);
  padding:11px 14px;letter-spacing:.03em}

/* ---------- à propos ---------- */
.apropos{background:var(--encre);color:var(--verre);border-radius:6px;padding:clamp(28px,5vw,46px)}
.logo-blanc{height:40px;width:auto;margin:0 0 22px;opacity:.95}
.apropos .titre{color:rgba(239,244,242,.6);border-color:rgba(255,255,255,.18)}
.apropos h2{font-size:clamp(24px,4vw,31px);max-width:20ch}
.apropos p{color:rgba(239,244,242,.78);max-width:58ch;margin:14px 0 0}
.apropos strong{color:#84D3BC;font-weight:600}

/* ---------- pied ---------- */
footer{border-top:1px solid var(--trait);padding:36px 0 52px;font-size:14.5px;
  color:var(--ardoise);background:var(--blanc)}
footer .bar{align-items:flex-start;gap:24px}
footer a{text-decoration:none;border-bottom:1px solid var(--trait)}
footer strong{color:var(--encre)}
.note{font-family:var(--mono);font-size:12px;margin-top:24px;opacity:.85;
  border-top:1px solid var(--trait);padding-top:16px}

/* ============================================================
   PAGE MENTIONS LÉGALES  (body class="page-legal")
   ============================================================ */
.page-legal{font-size:16.5px;line-height:1.7}
.page-legal .wrap{width:min(760px,92vw)}
.page-legal .wrap-large{width:min(1080px,92vw);margin:0 auto}
.page-legal main{padding:52px 0 64px}
.page-legal h1{font-size:clamp(32px,6vw,48px);line-height:1.08;margin:0 0 12px;animation:none;filter:none;opacity:1}
.page-legal .sous{color:var(--ardoise);margin:0 0 40px;font-size:15px}
.page-legal h2{font-size:21px;margin:44px 0 12px;padding-top:22px;border-top:1px solid var(--trait)}
.page-legal h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.page-legal p{margin:0 0 15px}
.page-legal ul{margin:0 0 18px;padding-left:20px}
.page-legal li{margin-bottom:5px}
.page-legal .bloc{background:var(--blanc);border:1px solid var(--trait);border-radius:6px;
  padding:24px 26px;margin:0 0 18px}
.page-legal .bloc ul{font-family:var(--mono);font-size:14px;line-height:1.9;list-style:none;padding:0;margin:0}
.page-legal .bloc ul strong{font-family:var(--corps);color:var(--ardoise);font-weight:500}
.page-legal .bloc h3{font-family:var(--serif);font-size:17px;margin:0 0 12px}
.page-legal .lien{border-bottom:2px solid var(--ambre);text-decoration:none;padding-bottom:1px}
.page-legal footer{padding:32px 0 48px}
.page-legal .note{margin-top:18px;border-top:0;padding-top:0}

/* ---------- mobile ---------- */
@media (max-width:820px){
  .hero{padding:40px 0 44px}
  .hero .wrap{grid-template-columns:1fr;gap:30px}
  .portrait{order:-1}
  .portrait img{width:min(280px,68vw)}
  section{padding:40px 0}
  .btn{flex:1 1 auto;text-align:center}
  nav ul{gap:0}
  nav a{padding:10px 10px;font-size:14.5px}
  .logo img{height:40px}
}
@media (max-width:640px){
  .page-legal main{padding:36px 0 48px}
}
@media (prefers-reduced-motion:reduce){
  h1{animation:none;filter:none;opacity:1}
  html{scroll-behavior:auto}
  *{transition:none!important}
}