/* ============================================================
   AYLAN CLINIC — shared stylesheet
   Palette: near-black ground, warm gold accent, ivory text
   Type: Inter (titres et texte) — police d'ecran, lisible sur mobile
   ============================================================ */

:root{
  --ink:#0a0a0a;
  --ink-2:#131110;
  --panel:#161412;
  --gold:#c9a24b;
  --gold-light:#e7cd8a;
  --gold-dim:#8a6f34;
  --ivory:#f3ede1;
  --ivory-dim:#c9c2b4;
  --hair:rgba(201,162,75,.28);
  --shadow:0 20px 50px rgba(0,0,0,.55);
  --maxw:1280px;
  --font-display:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--ivory-dim);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
/* Un mot insecable plus large que la colonne pousse la mise en page sur mobile. */
body{overflow-wrap:break-word;}
/* Aucun defilement horizontal sur mobile, quelle que soit la cause (mot long, police en cours de
   chargement, element hors cadre). clip et non hidden : hidden casserait le header en sticky. */
@supports (overflow:clip){html,body{overflow-x:clip;}}
.prose table{min-width:520px;}   /* le tableau garde sa lisibilite et defile dans .table-scroll */
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ivory);
  font-weight:600;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.15;}
h2{font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.25;}
h3{font-size:1.2rem;line-height:1.3;}
p{margin:0 0 1em;}
.eyebrow{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.72rem;
  color:var(--gold-light);
}
.container{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
.section{padding:96px 0;}
.section.tight{padding:64px 0;}
.divider{
  display:flex;align-items:center;justify-content:center;gap:14px;
  color:var(--gold);margin:22px 0;
}
.divider::before,.divider::after{content:"";height:1px;width:70px;background:var(--hair);}
.diamond{width:6px;height:6px;background:var(--gold);transform:rotate(45deg);display:inline-block;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;
  font-family:var(--font-body);
  text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;
  border:1px solid var(--gold);
  transition:all .25s ease;
  white-space:nowrap;
}
/* Sur petit ecran, un libelle long (« Obtenir mon devis gratuit → », « Lire le guide complet ») ne doit
   jamais deborder : le bouton passe a la ligne et reste dans la largeur de son conteneur. */
@media (max-width:640px){.btn{white-space:normal;max-width:100%;justify-content:center;text-align:center;letter-spacing:.12em;padding:14px 20px;}}
.btn-solid{background:var(--gold);color:var(--ink);}
.btn-solid:hover{background:var(--gold-light);border-color:var(--gold-light);}
.btn-outline{background:transparent;color:var(--gold-light);}
.btn-outline:hover{background:rgba(201,162,75,.1);}

/* ---------- Top info bar ---------- */
.topbar{
  background:var(--ink-2);
  border-bottom:1px solid var(--hair);
  font-size:.8rem;
  color:var(--ivory-dim);
}
.topbar .container{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:10px;padding-bottom:10px;flex-wrap:wrap;gap:8px;
}
.topbar-left{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.topbar-left span{display:inline-flex;align-items:center;gap:8px;}
.topbar-left svg{width:14px;height:14px;fill:var(--gold);}
.lang-switch{display:flex;align-items:center;gap:6px;position:relative;}

/* ---------- Header / nav ---------- */
header.site{position:sticky;top:0;z-index:100;background:var(--ink);border-bottom:1px solid var(--hair);}
/* Etat compact une fois la page defilee : le menu reste lisible sans manger l'ecran */
header.site{transition:box-shadow .2s ease;}
header.site.is-stuck{box-shadow:0 6px 24px rgba(0,0,0,.45);}
header.site.is-stuck .nav-wrap{padding:8px 32px;}
header.site.is-stuck .brand img{height:42px;}
.brand img,.nav-wrap{transition:height .2s ease,padding .2s ease;}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;gap:24px;}
/* .nav-wrap porte aussi .container : on conserve ses 32px lateraux, sinon le header
   serait le seul bloc colle au bord de la fenetre. */
.brand{display:flex;align-items:center;gap:16px;}
.brand img{height:62px;width:auto;max-width:100%;}
.nav-cta .btn .cta-short{display:none;}
@media (max-width:620px){
  .nav-wrap{padding-left:20px;padding-right:20px;gap:12px;}
  header.site.is-stuck .nav-wrap{padding-left:20px;padding-right:20px;}
  .brand img{height:38px;}
  .nav-cta{gap:10px;}
}
@media (max-width:1180px){.brand img{height:52px;}}
@media (max-width:980px){.brand img{height:46px;}}
footer.site .brand img{height:54px;}
.brand .word{font-family:var(--font-display);line-height:1;}
.brand .word b{display:block;font-size:1.7rem;letter-spacing:.14em;color:var(--ivory);font-weight:600;}
.brand .word small{display:block;font-size:.62rem;letter-spacing:.5em;color:var(--gold-light);margin-top:4px;}

nav.primary{display:flex;align-items:center;gap:34px;}
nav.primary > ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;}
nav.primary a{
  font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ivory-dim);
  padding:8px 0;border-bottom:2px solid transparent;
}
nav.primary li.active > a, nav.primary a:hover{color:var(--gold-light);border-color:var(--gold);}
/* Rubrique mise en avant : encart gold dans la barre de navigation. */
nav.primary li.is-gold > a{
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:var(--ink);border-color:transparent;padding:9px 16px;border-radius:2px;
  font-weight:500;letter-spacing:.1em;
}
nav.primary li.is-gold > a:hover{filter:brightness(1.08);color:var(--ink);}
@media (max-width:1080px){
  nav.primary li.is-gold > a{display:inline-block;margin:10px 0;padding:10px 18px;}
}
nav.primary li{position:relative;}
.has-drop > a::after{content:" ▾";font-size:.65em;color:var(--gold-dim);}
.dropdown{
  display:none;position:absolute;top:100%;left:0;background:var(--panel);
  border:1px solid var(--hair);min-width:260px;padding:10px 0;box-shadow:var(--shadow);z-index:40;
}
.has-drop:hover .dropdown, .has-drop:focus-within .dropdown{display:block;}
.dropdown a{display:block;padding:10px 22px;font-size:.78rem;letter-spacing:.06em;text-transform:none;border:none;}
.dropdown a:hover{background:rgba(201,162,75,.1);color:var(--gold-light);}
.dropdown .grp{padding:10px 22px 4px;font-size:.68rem;text-transform:uppercase;letter-spacing:.2em;color:var(--gold-dim);}

.nav-cta{display:flex;align-items:center;gap:18px;}
.burger{display:none;background:none;border:1px solid var(--hair);padding:10px;color:var(--gold-light);}

@media (max-width:1080px){
  nav.primary{position:fixed;inset:0 0 0 auto;width:min(340px,88vw);background:var(--ink-2);
    transform:translateX(100%);visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s;flex-direction:column;align-items:flex-start;
    padding:90px 28px 28px;overflow-y:auto;border-left:1px solid var(--hair);}
  nav.primary.open{transform:translateX(0);visibility:visible;transition:transform .3s ease,visibility 0s;}
  nav.primary > ul{flex-direction:column;gap:0;width:100%;}
  nav.primary > ul > li{width:100%;border-bottom:1px solid var(--hair);}
  nav.primary a{display:block;padding:14px 0;}
  .dropdown{display:block;position:static;border:none;background:none;box-shadow:none;padding:0 0 10px 12px;}
  .has-drop:hover .dropdown{display:block;}
  .burger{display:inline-flex;}
  /* Le CTA principal ne doit jamais se reduire a une fleche muette :
     on bascule sur un libelle court au lieu de le masquer. */
  .nav-cta .btn .cta-long{display:none;}
  .nav-cta .btn .cta-short{display:inline;}
  .nav-cta .btn{padding-left:16px;padding-right:16px;}
}

/* ---------- Hero plein écran (image plein-cadre + texte superposé) ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--hair);background:var(--ink);
  min-height:100vh;display:flex;align-items:center;}
/* image en fond, plein cadre */
.hero-photo{position:absolute;inset:0;z-index:0;margin:0;}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:72% center;}
.hero-photo::after{content:none;}
/* voile dégradé (gauche sombre) pour la lisibilité du texte */
.hero-bg{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, rgba(6,6,6,.95) 0%, rgba(6,6,6,.8) 24%, rgba(6,6,6,.32) 50%, rgba(6,6,6,0) 70%);}
.hero-bg::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(201,162,75,.10) 1px, transparent 1.4px);background-size:26px 26px;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 46%);mask-image:linear-gradient(90deg,#000,transparent 46%);}
.hero-grid{position:relative;z-index:2;display:block;max-width:1280px;width:100%;margin:0 auto;padding:0;}
.hero-copy{padding:64px 60px;max-width:660px;display:flex;flex-direction:column;justify-content:center;}
.hero-copy .eyebrow{margin-bottom:18px;}
.hero-copy h1{margin-bottom:8px;font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.12;}
.hero-copy h1 .grad{background:linear-gradient(92deg,var(--gold-light),var(--gold) 45%,var(--gold-light));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%;animation:heroShimmer 7s linear infinite;}
.hero-copy .sub{margin:18px 0 26px;font-size:1rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ivory-dim);}
.hero-copy p{color:var(--ivory-dim);}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px;}
.hero-actions .btn-solid{box-shadow:0 8px 30px rgba(201,162,75,.28);}
.hero .trust.hero-trust{justify-content:flex-start;margin-top:30px;}
.hero-badge{position:absolute;right:9%;bottom:15%;z-index:3;width:128px;height:128px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%, var(--gold-light), var(--gold) 55%, var(--gold-dim));
  color:#231a07;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border:2px solid var(--gold-light);box-shadow:0 14px 44px rgba(0,0,0,.55);
  font-family:var(--font-display);animation:heroFloat 4.5s ease-in-out infinite;}
.hero-badge b{font-size:2.1rem;line-height:1;font-weight:700;}
.hero-badge small{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;margin-top:5px;font-family:var(--font-body);}
.hero-scroll{position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%);
  width:40px;height:40px;border:1px solid var(--gold-dim);border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--gold-light);background:rgba(10,10,10,.4);animation:heroBounce 2.2s ease-in-out infinite;}
.hero-scroll svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;}
.hero-scroll:hover{border-color:var(--gold);background:rgba(201,162,75,.12);}
@keyframes heroShimmer{to{background-position:220% 0;}}
@keyframes heroFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes heroBounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(6px);}}
html.js .hero .anim{opacity:0;transform:translateY(24px);
  animation:heroUp .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s);}
@keyframes heroUp{to{opacity:1;transform:none;}}
@media (max-width:900px){
  .hero{min-height:90vh;}
  .hero-photo img{object-position:66% center;}
  .hero-bg{background:linear-gradient(180deg, rgba(6,6,6,.30) 0%, rgba(6,6,6,.45) 40%, rgba(6,6,6,.92) 100%);}
  .hero-bg::after{-webkit-mask-image:none;mask-image:none;opacity:.25;}
  .hero-grid{display:flex;min-height:90vh;align-items:flex-end;}
  .hero-copy{padding:118px 24px 46px;max-width:none;}   /* le texte demarre sous le badge −60 % */
  .hero-copy .sub{font-size:.9rem;letter-spacing:.08em;}
  .eyebrow{letter-spacing:.14em;}
  .hero-badge{right:16px;top:16px;bottom:auto;width:92px;height:92px;}
  .hero-badge b{font-size:1.55rem;}
  .hero-scroll{display:none;}
}
@media (prefers-reduced-motion:reduce){
  html.js .hero .anim{opacity:1;transform:none;animation:none;}
  .hero-copy h1 .grad,.hero-badge,.hero-scroll,.hero-photo img{animation:none;}
}
/* économie mise en avant dans le graphique de prix */
.pc-line em b{color:var(--gold-light);font-weight:700;font-style:normal;}

/* ---------- Feature strip ---------- */
.features{background:var(--ink-2);border-bottom:1px solid var(--hair);}
.features .container{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;}
.feature{padding:34px 26px;border-left:1px solid var(--hair);display:flex;gap:16px;align-items:flex-start;}
.feature:first-child{border-left:none;}
.feature svg{width:30px;height:30px;fill:none;stroke:var(--gold);stroke-width:1.3;flex:none;}
.feature h4{margin:0 0 4px;font-family:var(--font-body);text-transform:uppercase;letter-spacing:.08em;font-size:.86rem;color:var(--ivory);}
.feature p{margin:0;font-size:.85rem;color:var(--ivory-dim);}
@media (max-width:600px){.features .container{grid-template-columns:minmax(0,1fr);}}
@media (max-width:900px){.features .container{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .feature{border-left:none;border-top:1px solid var(--hair);}}

/* ---------- Generic page header (non-home) ---------- */
.page-hero{
  padding:110px 0 60px;text-align:center;border-bottom:1px solid var(--hair);
  background:radial-gradient(ellipse at 50% -20%,rgba(201,162,75,.13),transparent 60%);
}
.page-hero .eyebrow{display:block;margin-bottom:14px;}
.breadcrumb{margin-top:16px;font-size:.78rem;color:var(--gold-dim);letter-spacing:.06em;}
.breadcrumb a{color:var(--gold-light);}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:28px;}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:980px){.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:minmax(0,1fr);}}

.card{
  background:var(--panel);border:1px solid var(--hair);padding:34px 28px;position:relative;
  transition:border-color .25s ease, transform .25s ease;
}
.card:hover{border-color:var(--gold);transform:translateY(-4px);}
.card .num{color:var(--gold-dim);font-family:var(--font-display);font-size:1rem;letter-spacing:.1em;}
.card h3{margin:10px 0 10px;}
.card p{font-size:.92rem;margin-bottom:14px;}
.card a.more{font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold-light);}

.tag{display:inline-block;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold-dim);
  border:1px solid var(--hair);padding:5px 12px;margin:0 8px 8px 0;}

/* ---------- Split section ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center;}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr);gap:34px;}}
.split img{border:1px solid var(--hair);}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--hair);}
.stat{padding:32px;text-align:center;border-left:1px solid var(--hair);}
.stat:first-child{border-left:none;}
.stat .n{font-family:var(--font-display);font-size:2rem;font-weight:600;color:var(--gold-light);}
.stat .l{font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ivory-dim);}
@media (max-width:760px){.stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}.stat{border-left:none;border-top:1px solid var(--hair);}}

/* ---------- Table ---------- */
table.pricing{width:100%;border-collapse:collapse;border:1px solid var(--hair);}
table.pricing th,table.pricing td{padding:16px 20px;border-bottom:1px solid var(--hair);text-align:left;font-size:.92rem;}
table.pricing th{
  font-family:var(--font-body);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--gold-light);
  background:var(--ink-2);
}
table.pricing tr:last-child td{border-bottom:none;}
table.pricing td.dot::before{content:"•";color:var(--gold);margin-right:8px;}

/* ---------- Before / after ---------- */
.ba-frame{position:relative;aspect-ratio:4/5;background:var(--panel);border:1px solid var(--hair);
  display:flex;align-items:center;justify-content:center;overflow:hidden;}
.ba-frame .split-line{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--gold);}
.ba-frame .lab{position:absolute;top:14px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light);
  background:rgba(10,10,10,.6);padding:4px 10px;}
.ba-frame .lab.before{left:14px;}
.ba-frame .lab.after{right:14px;}
.ba-frame .ph{font-family:var(--font-display);color:var(--gold-dim);font-size:1rem;letter-spacing:.08em;text-align:center;padding:0 20px;}

/* ---------- Testimonial ---------- */
.quote{border-left:2px solid var(--gold);padding-left:26px;font-family:var(--font-display);font-size:1.1rem;color:var(--ivory);font-style:italic;}
.quote cite{display:block;margin-top:14px;font-family:var(--font-body);font-style:normal;font-size:.76rem;letter-spacing:.1em;color:var(--gold-dim);text-transform:uppercase;}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(120deg,var(--ink-2),var(--ink));
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  text-align:center;padding:80px 0;
}

/* ---------- Cities / SEO block ---------- */
.cities{background:var(--ink-2);}
.city-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;}
@media (max-width:900px){.city-cols{grid-template-columns:minmax(0,1fr);}}
.city-col h4{color:var(--gold-light);font-family:var(--font-body);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;margin-bottom:14px;}
.city-col ul{margin:0;padding:0;list-style:none;}
.city-col li{font-size:.86rem;padding:6px 0;border-bottom:1px solid var(--hair);color:var(--ivory-dim);}
.city-col li b{color:var(--ivory);font-weight:500;}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--hair);padding:22px 0;}
.faq-item summary{cursor:pointer;font-family:var(--font-display);font-size:1.02rem;font-weight:500;line-height:1.45;color:var(--ivory);list-style:none;display:block;position:relative;padding-right:36px;}
.faq-item summary::-webkit-details-marker{display:none;}
/* bloc (pas flex) : une question qui contient un lien doit pouvoir passer a la ligne sur mobile */
.faq-item summary::after{content:"+";color:var(--gold);font-size:1.3rem;position:absolute;right:0;top:50%;transform:translateY(-50%);line-height:1;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{margin-top:14px;font-size:.92rem;}

/* ---------- Form ---------- */
form.contact-form{display:grid;gap:18px;}
form.contact-form .row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;}
@media (max-width:640px){form.contact-form .row2{grid-template-columns:minmax(0,1fr);}}
form.contact-form label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold-dim);margin-bottom:8px;}
form.contact-form input, form.contact-form select, form.contact-form textarea{
  width:100%;background:var(--panel);border:1px solid var(--hair);color:var(--ivory);
  padding:13px 16px;font-family:var(--font-body);font-size:.92rem;
}
form.contact-form input:focus, form.contact-form select:focus, form.contact-form textarea:focus{outline:1px solid var(--gold);border-color:var(--gold);}
/* Sous 16px, Safari iOS zoome automatiquement a la mise au point du champ
   et la page reste decalee : on force 16px sur mobile. */
@media (max-width:820px){
  form.contact-form input, form.contact-form select, form.contact-form textarea,
  input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea{
    font-size:16px;
  }
}
/* Cibles tactiles : 44px minimum (recommandation Apple/Android). */
@media (max-width:820px){
  .burger{min-width:44px;min-height:44px;}
  .faq-item summary{min-height:44px;padding-top:10px;padding-bottom:10px;}
  .to-top{width:48px;height:48px;}
}
form.contact-form button{justify-self:flex-start;}

/* ---------- Footer ---------- */
footer.site{background:var(--ink);border-top:1px solid var(--hair);padding:70px 0 26px;}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);gap:40px;}
@media (max-width:900px){.foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
@media (max-width:560px){.foot-grid{grid-template-columns:minmax(0,1fr);}}
.foot-grid h5{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--gold-light);margin:0 0 16px;}
.foot-grid ul{list-style:none;margin:0;padding:0;}
.foot-grid li{margin-bottom:10px;font-size:.86rem;}
.foot-grid li a:hover{color:var(--gold-light);}
.foot-brand .word b{font-size:1.4rem;}
.foot-note{margin-top:16px;font-size:.82rem;color:var(--ivory-dim);max-width:320px;}
.foot-bottom{
  margin-top:54px;padding-top:22px;border-top:1px solid var(--hair);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:.76rem;color:var(--gold-dim);
}
.social-row{display:flex;gap:14px;margin-top:10px;}
.social-row a{width:34px;height:34px;border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;}
.social-row a:hover{border-color:var(--gold);}
.social-row svg{width:15px;height:15px;fill:var(--gold-light);}

/* skip link */
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;background:var(--gold);color:var(--ink);padding:10px 16px;z-index:100;}
.skip:focus{width:auto;height:auto;overflow:visible;clip:auto;inset-inline-start:10px;top:10px;}

:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important;}}

/* ============================================================
   EXTENSIONS — mega-menu, article prose, VIP, process, compare
   ============================================================ */

/* ---------- Mega menu ---------- */
/* keep the hover alive while the pointer crosses the header padding gap */
nav.primary li.has-mega{position:static;padding-bottom:26px;margin-bottom:-26px;}
.mega{
  display:none;position:absolute;left:0;right:0;top:100%;
  background:#100e0c;border-top:1px solid var(--gold);
  border-bottom:1px solid var(--hair);box-shadow:var(--shadow);z-index:300;
  padding:26px 0;max-height:calc(100vh - 130px);overflow-y:auto;
}
.has-mega:hover .mega, .has-mega:focus-within .mega, .has-mega.open .mega{display:block;}
.mega-inner{max-width:var(--maxw);margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 40px;}
.mega-col h6{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.18em;
  font-size:.7rem;color:var(--gold-light);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--hair);}
.mega-col a{display:block;padding:6px 0;font-size:.82rem;letter-spacing:.02em;
  text-transform:none;color:var(--ivory-dim);border:none;}
.mega-col a:hover{color:var(--gold-light);padding-left:5px;}
.mega-col .soon{color:var(--gold-dim);cursor:default;}
.mega-col .soon:hover{padding-left:0;color:var(--gold-dim);}

/* Ergonomic image mega-menu — grid of category cards (image + title + top links) */
.mega-inner{gap:20px;}
.mega-card{border:1px solid var(--hair);background:var(--ink);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .25s ease;}
.mega-card:hover{border-color:var(--gold);}
.mega-card-title{display:block;padding:12px 14px;border:none;border-bottom:1px solid var(--hair);
  font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--gold-light);letter-spacing:0;
  background:var(--ink-2);text-transform:none;}
.mega-card-title:hover{color:var(--gold);}
.mega-card ul{list-style:none;margin:0;padding:10px 14px 12px;}
.mega-card li a{display:block;padding:4px 0;font-size:.76rem;color:var(--ivory-dim);
  text-transform:none;letter-spacing:.02em;border:none;white-space:normal;}
.mega-card li a:hover{color:var(--gold-light);padding-left:4px;}
.mega-card .mega-all{color:var(--gold);font-weight:500;margin-top:2px;}

@media (max-width:1080px){
  .mega{display:none;position:static;border:none;box-shadow:none;background:none;padding:0 0 8px 12px;}
  .has-mega:hover .mega{display:block;}
  .mega-inner{grid-template-columns:minmax(0,1fr);gap:10px 0;padding:0;}
  .mega-col h6{margin-top:8px;}
  .mega-card{border:none;background:none;}
  .mega-card-title{background:none;border-bottom:none;padding:8px 0 4px;}
  .mega-card ul{padding:0 0 6px 12px;}
}

/* ---------- Article / prose ---------- */
.article-wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start;}
@media (max-width:980px){.article-wrap{grid-template-columns:minmax(0,1fr);}}
/* minmax(0,1fr) + min-width:0 : sans eux, la piste prend le min-content du plus
   large tableau et l'article deborde la fenetre sur mobile. */
.prose{max-width:760px;min-width:0;}
.prose > h2{margin-top:2em;padding-top:.2em;font-size:clamp(1.3rem,2.3vw,1.7rem);}
.prose > h2:first-child{margin-top:0;}
.prose > h3{margin-top:1.6em;color:var(--gold-light);font-size:1.1rem;}
.prose p{margin:0 0 1.1em;color:var(--ivory-dim);}
.prose strong,.prose b{color:var(--ivory);font-weight:500;}
.prose ul,.prose ol{margin:0 0 1.3em;padding-left:1.2em;}
.prose li{margin-bottom:.5em;color:var(--ivory-dim);}
.prose ul li::marker{color:var(--gold);}
.prose ol li::marker{color:var(--gold);font-family:var(--font-display);}
.prose table{width:100%;border-collapse:collapse;border:1px solid var(--hair);margin:0 0 1.5em;font-size:.9rem;}
.prose th,.prose td{padding:12px 16px;border:1px solid var(--hair);text-align:left;vertical-align:top;}
.prose thead th, .prose tr:first-child th{background:var(--ink-2);color:var(--gold-light);
  font-family:var(--font-body);text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;}
.prose td strong{color:var(--gold-light);}
.table-scroll{overflow-x:auto;margin:0 0 1.5em;}
.table-scroll table{margin:0;}
.prose blockquote{border-left:2px solid var(--gold);margin:1.5em 0;padding:4px 0 4px 24px;
  font-family:var(--font-display);font-style:italic;font-size:1.1rem;color:var(--ivory);}

/* ---------- Sticky sidebar aside ---------- */
.side-cta{position:sticky;top:24px;background:var(--panel);border:1px solid var(--hair);padding:26px 24px;}
.side-cta h4{font-size:1.25rem;margin-bottom:6px;}
.side-cta p{font-size:.85rem;margin-bottom:16px;}
.side-cta .btn{width:100%;justify-content:center;margin-bottom:10px;}
.side-cta .whatsapp{background:transparent;border-color:var(--hair);color:var(--ivory);}
.side-cta ul{list-style:none;margin:18px 0 0;padding:18px 0 0;border-top:1px solid var(--hair);}
.side-cta li{font-size:.8rem;padding:5px 0;display:flex;gap:8px;color:var(--ivory-dim);}
.side-cta li::before{content:"✓";color:var(--gold);flex:none;}
@media (max-width:980px){.side-cta{position:static;}}

/* ---------- Article hero spec strip ---------- */
.spec-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--hair);margin:26px 0 0;}
.spec-strip .s{padding:18px 20px;border-left:1px solid var(--hair);}
.spec-strip .s:first-child{border-left:none;}
.spec-strip .k{font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;color:var(--gold-dim);}
.spec-strip .v{font-family:var(--font-display);color:var(--ivory);font-size:1rem;font-weight:500;margin-top:2px;}
@media (max-width:760px){.spec-strip{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .spec-strip .s:nth-child(odd){border-left:none;}.spec-strip .s:nth-child(n+3){border-top:1px solid var(--hair);}}

/* ---------- VIP includes grid ---------- */
.vip-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
@media (max-width:900px){.vip-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
@media (max-width:520px){.vip-grid{grid-template-columns:minmax(0,1fr);}}
.vip{background:var(--panel);border:1px solid var(--hair);padding:26px 22px;transition:border-color .25s;}
.vip:hover{border-color:var(--gold);}
.vip svg{width:28px;height:28px;stroke:var(--gold);fill:none;stroke-width:1.3;margin-bottom:12px;}
.vip h4{font-family:var(--font-body);font-size:.9rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ivory);margin:0 0 6px;}
.vip p{font-size:.84rem;margin:0;color:var(--ivory-dim);}

/* ---------- Process timeline ---------- */
.process{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:step;border:1px solid var(--hair);}
@media (max-width:900px){.process{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
@media (max-width:520px){.process{grid-template-columns:minmax(0,1fr);}}
.step{padding:30px 24px;border-left:1px solid var(--hair);position:relative;}
.step:first-child{border-left:none;}
.step .n{font-family:var(--font-display);font-size:1.7rem;font-weight:600;color:var(--gold);line-height:1;}
.step h4{font-family:var(--font-body);font-size:.86rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ivory);margin:10px 0 6px;}
.step p{font-size:.82rem;margin:0;}

/* ---------- Category pill / sub nav ---------- */
.pillnav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px;}
.pillnav a{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ivory-dim);
  border:1px solid var(--hair);padding:8px 16px;transition:all .2s;}
.pillnav a:hover,.pillnav a.active{border-color:var(--gold);color:var(--gold-light);}

/* ---------- Related links ---------- */
.related{background:var(--ink-2);border-top:1px solid var(--hair);}
.related .grid.cols-3 .card{padding:26px 24px;}
.related .card h3{font-size:1.15rem;}

/* ---------- WhatsApp float ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;width:56px;height:56px;border-radius:50%;
  background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.4);}
.wa-float svg{width:30px;height:30px;fill:#fff;}
@media (prefers-reduced-motion:no-preference){.wa-float{animation:wapulse 2.6s infinite;}}
@keyframes wapulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);}70%{box-shadow:0 0 0 14px rgba(37,211,102,0);}100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}}
/* Messenger : bouton flottant a cote de celui de WhatsApp */
.msg-float{position:fixed;right:86px;bottom:20px;z-index:60;width:56px;height:56px;border-radius:50%;
  background:linear-gradient(45deg,#0099ff,#a033ff 60%,#ff5280);display:flex;align-items:center;
  justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.4);}
.msg-float svg{width:30px;height:30px;fill:#fff;}
.msg-float:hover,.wa-float:hover,.to-top:hover{transform:scale(1.06);}
.msg-float,.wa-float,.to-top{transition:transform .18s ease,opacity .25s ease,visibility .25s ease;}

/* Retour en haut : au-dessus de la rangee des deux boutons */
.to-top{position:fixed;right:20px;bottom:86px;z-index:60;width:48px;height:48px;border-radius:50%;
  background:var(--panel);border:1px solid var(--gold);display:flex;align-items:center;
  justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.4);cursor:pointer;padding:0;
  opacity:0;visibility:hidden;}
.to-top.show{opacity:1;visibility:visible;}
.to-top svg{width:22px;height:22px;fill:var(--gold);}
/* La bulle par defaut du plugin Facebook ferait doublon avec notre bouton. */
.fb_dialog,.fb_customer_chat_bounce_in_v2,.fb_customer_chat_bounce_out_v2{display:none!important;}
@media (max-width:600px){
  .wa-float,.msg-float{width:50px;height:50px;}
  .msg-float{right:78px;}
  .to-top{width:44px;height:44px;bottom:78px;}
}

/* ---------- Encart de contact WhatsApp (remplace le formulaire de devis) ---------- */
.wa-cta{border:1px solid var(--hair);background:var(--panel);padding:30px 28px;margin:26px 0;text-align:center;}
.wa-cta h3{margin:0 0 10px;font-size:1.45rem;}
.wa-cta p{margin:0 auto 18px;max-width:52ch;}
.btn-wa{display:inline-flex;align-items:center;gap:10px;background:#25d366;color:#07310f;border-color:#25d366;
  font-weight:500;padding:14px 26px;}
.btn-wa:hover{background:#1ebe5a;border-color:#1ebe5a;color:#07310f;}
.btn-wa svg{width:22px;height:22px;fill:currentColor;}
.wa-cta .wa-alt{font-size:.82rem;color:var(--ivory-dim);margin:16px auto 0;}
@media (max-width:600px){.wa-cta{padding:24px 18px;} .btn-wa{width:100%;justify-content:center;}}

/* ---------- Trust badges row ---------- */
.trust{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px;}
.trust span{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;letter-spacing:.08em;
  color:var(--ivory-dim);border:1px solid var(--hair);padding:8px 16px;}
.trust svg{width:15px;height:15px;fill:var(--gold);}

/* ---------- Lead paragraph ---------- */
.lead{font-size:1.08rem;color:var(--ivory);font-family:var(--font-body);font-weight:400;}
.answer-box{background:rgba(201,162,75,.07);border:1px solid var(--hair);border-left:3px solid var(--gold);
  padding:20px 24px;margin:0 0 1.5em;}
.answer-box p:last-child{margin-bottom:0;}

/* ---------- Mobile nav expand (tap to open) ---------- */
@media (max-width:1080px){
  nav.primary .dropdown,
  nav.primary .mega{display:none;}
  nav.primary li.has-mega{padding-bottom:0;margin-bottom:0;}
  nav.primary li.mopen > .dropdown,
  nav.primary li.mopen > .mega{display:block;}
  nav.primary .has-drop > a::after,
  nav.primary .has-mega > a::after{content:" +";color:var(--gold-dim);}
  nav.primary li.mopen > a::after{content:" –";}
}

/* ============================================================
   CLASSIC DROPDOWN NAV (Body Contouring) — replaces the mega
   ============================================================ */
nav.primary ul.dropdown{list-style:none;margin:0;overflow:visible;}
nav.primary ul.dropdown > li{position:relative;}
nav.primary ul.dropdown > li > a{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:10px 20px;font-size:.82rem;text-transform:none;letter-spacing:.03em;
  color:var(--ivory-dim);white-space:nowrap;border:none;
}
nav.primary ul.dropdown > li > a:hover,
nav.primary ul.dropdown > li:focus-within > a{background:rgba(201,162,75,.1);color:var(--gold-light);}
nav.primary li.has-sub > a::after{content:"›";color:var(--gold-dim);font-size:1.15em;line-height:1;}
/* Fly-out panel (aram style): intervention list + rounded category image */
nav.primary .submenu{
  display:none;position:absolute;top:-9px;left:100%;
  grid-template-columns:minmax(0,1fr) 230px;gap:16px;width:600px;padding:16px;
  background:var(--panel);border:1px solid var(--hair);box-shadow:var(--shadow);z-index:50;
}
nav.primary ul.dropdown > li.has-sub:hover > .submenu,
nav.primary ul.dropdown > li.has-sub:focus-within > .submenu{display:grid;}
nav.primary .submenu-list{list-style:none;margin:0;padding:0;max-height:72vh;overflow-y:auto;
  columns:1;}
nav.primary .submenu-list a{display:block;padding:7px 14px;font-size:.78rem;color:var(--ivory-dim);
  white-space:normal;text-transform:none;letter-spacing:.02em;border:none;}
nav.primary .submenu-list a:hover{background:rgba(201,162,75,.12);color:var(--gold-light);padding-left:18px;}
nav.primary .submenu-img{position:relative;display:block;align-self:stretch;min-height:170px;
  border:1px solid var(--hair);border-radius:10px;overflow:hidden;}
nav.primary .submenu-img img{width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.78);transition:transform .35s ease;}
nav.primary .submenu-img:hover img{transform:scale(1.06);}
nav.primary .submenu-img span{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-light);
  background:linear-gradient(0deg,rgba(10,10,10,.9),rgba(10,10,10,0));border:none;}
/* wide silhouette list: two columns of links so the panel isn't too tall */
nav.primary ul.dropdown > li.has-sub .submenu-list{column-width:200px;column-gap:0;}

/* Mobile: dropdown + submenu collapse into tap-to-expand accordions */
@media (max-width:1080px){
  nav.primary ul.dropdown{position:static;border:none;box-shadow:none;background:none;
    padding:0 0 6px 10px;max-height:none;overflow:visible;}
  nav.primary ul.dropdown > li > a{padding:11px 0;}
  nav.primary .submenu{position:static;border:none;box-shadow:none;background:none;
    padding:0 0 6px 14px;width:auto;display:none;grid-template-columns:minmax(0,1fr);}
  nav.primary li.has-sub.mopen > .submenu{display:grid;}
  nav.primary .submenu-list{max-height:none;overflow:visible;column-width:auto;}
  nav.primary .submenu-img{display:none;}
  nav.primary li.has-sub > a::after{content:"+";}
  nav.primary li.has-sub.mopen > a::after{content:"–";}
}

/* ============================================================
   Maillage interne — internal links in prose: bold + underlined
   ============================================================ */
.prose a,
#main p a:not(.btn):not(.more):not(.mega-all):not(.brand),
#main td a:not(.btn),
#main .prose li a,
#main .faq-item p a{
  font-weight:700 !important;
  text-decoration:underline !important;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:var(--gold);
  color:var(--gold-light);
}
.prose a:hover,
#main p a:not(.btn):not(.more):hover,
#main td a:hover{color:var(--gold);text-decoration-color:var(--gold-light);}

/* ---------- Page hero image band ---------- */
.page-figure{max-width:var(--maxw);margin:0 auto 0;padding:26px 32px 0;}
.page-figure img{width:100%;height:clamp(200px,32vw,400px);object-fit:cover;
  border:1px solid var(--hair);border-radius:12px;display:block;}

/* ---------- Sidebar image + image galleries ---------- */
.aside-img{width:100%;height:160px;object-fit:cover;border:1px solid var(--hair);border-radius:8px;margin-bottom:20px;display:block;}
.img-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:34px;}
@media(max-width:900px){.img-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
@media(max-width:560px){.img-grid{grid-template-columns:minmax(0,1fr);}}
.img-card{position:relative;display:block;border:1px solid var(--hair);overflow:hidden;border-radius:12px;aspect-ratio:4/3;background:var(--panel);}
.img-card img{width:100%;height:100%;object-fit:cover;filter:brightness(.82);transition:transform .45s ease;}
.img-card:hover{border-color:var(--gold);}
.img-card:hover img{transform:scale(1.06);}
.img-card span,.img-card figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:16px;
  font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:var(--gold-light);letter-spacing:0;
  background:linear-gradient(0deg,rgba(10,10,10,.92),rgba(10,10,10,0));}
a.img-card span::after{content:" →";color:var(--gold);}

/* ---------- Inline body image (inserted every ~10 000 chars) ---------- */
.prose-figure{margin:2.2em 0;}
.prose-figure img{width:100%;height:clamp(240px,34vw,420px);object-fit:cover;
  border:1px solid var(--hair);border-radius:12px;display:block;}

/* ---------- Avant / Après strips (procedure pages) ---------- */
.ba-strip-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:30px;}
@media(max-width:820px){.ba-strip-grid{grid-template-columns:minmax(0,1fr);}}
.ba-strip{margin:0;position:relative;border:1px solid var(--hair);border-radius:12px;overflow:hidden;background:var(--panel);}
.ba-strip img{width:100%;aspect-ratio:968/429;object-fit:cover;display:block;}
.ba-strip figcaption{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:12px 14px;margin:0;}
.ba-strip .lab{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light);
  background:rgba(10,10,10,.65);padding:4px 12px;border:1px solid var(--hair);}
.ba-strip p{margin:0;padding:12px 16px;font-size:.82rem;color:var(--ivory-dim);border-top:1px solid var(--hair);}

/* ================= Animations & graphiques (accueil) ================= */
/* Révélation au défilement (activée seulement si JS présent -> pas de contenu masqué sinon) */
html.js .reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);}
html.js .reveal.in{opacity:1;transform:none;}
html.js .reveal:nth-child(2){transition-delay:.07s;}
html.js .reveal:nth-child(3){transition-delay:.14s;}
html.js .reveal:nth-child(4){transition-delay:.21s;}
html.js .reveal:nth-child(5){transition-delay:.28s;}
html.js .reveal:nth-child(6){transition-delay:.35s;}
@media (prefers-reduced-motion: reduce){html.js .reveal{opacity:1;transform:none;transition:none;}}

.stats-band .stats{background:var(--ink-2);}
.stats .stat .n{font-variant-numeric:tabular-nums;}

/* Graphique comparatif de prix */
.pricechart{margin-top:34px;display:flex;flex-direction:column;gap:22px;}
.pc-row{display:grid;grid-template-columns:190px minmax(0,1fr);gap:18px;align-items:center;}
.pc-name{font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--ivory);}
.pc-lines{display:flex;flex-direction:column;gap:9px;}
.pc-line{position:relative;height:32px;background:rgba(255,255,255,.05);
  border:1px solid var(--hair);border-radius:6px;overflow:hidden;}
.pc-fill{display:block;height:100%;width:0;border-radius:6px 0 0 6px;transition:width 1.1s cubic-bezier(.2,.7,.2,1);}
.pc-fill.tn{background:linear-gradient(90deg,var(--gold-dim),var(--gold-light));}
.pc-fill.ca{background:linear-gradient(90deg,#332f2a,#4b453c);}
.pc-line em{position:absolute;top:0;right:12px;height:32px;display:flex;align-items:center;
  font-style:normal;font-size:.78rem;letter-spacing:.04em;color:var(--ivory);text-shadow:0 1px 3px rgba(0,0,0,.6);}
.pc-legend{margin-top:26px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ivory-dim);}
.pc-legend .pc-key{width:22px;height:12px;border-radius:3px;display:inline-block;margin-left:18px;}
.pc-legend .pc-key:first-child{margin-left:0;}
.pc-key.tn{background:linear-gradient(90deg,var(--gold-dim),var(--gold-light));}
.pc-key.ca{background:linear-gradient(90deg,#332f2a,#4b453c);}
.pc-note{margin-top:16px;font-size:.86rem;color:var(--ivory-dim);}
@media (max-width:640px){
  .pc-row{grid-template-columns:minmax(0,1fr);gap:8px;}
  .pc-name{font-size:1.35rem;}
  .pc-line em{font-size:.72rem;}
}

/* ================= Alternance de blocs sombres / clairs (accueil) ================= */
.block-dark{background:var(--ink);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);}
.block-light{background:#f4efe6;border-top:1px solid #e7ddca;border-bottom:1px solid #e7ddca;color:#4a4236;}

/* Typo & accents sur fond clair */
.block-light h1,.block-light h2,.block-light h3,.block-light h4{color:#1a1610;}
.block-light p,.block-light li{color:#4a4236;}
.block-light .sub{color:#6b6252;}
.block-light .eyebrow{color:#9a7c34;}
.block-light .lead{color:#2c2721;}
.block-light strong{color:#1a1610;}
.block-light .divider{color:var(--gold);}
/* Liens (surclasse la règle maillage #main p a:not()… de forte spécificité) */
#main .block-light a{color:#8a6f34;}
#main .block-light a:hover{color:#6f5827;}
#main .block-light p a:not(.btn):not(.more):not(.mega-all):not(.brand),
#main .block-light td a:not(.btn),
#main .block-light .prose li a,
#main .block-light .prose a,
#main .block-light .faq-item p a{color:#8a6f34;text-decoration-color:var(--gold);}

/* Cartes & panneaux -> blanc chaud */
.block-light .card,.block-light .vip{background:#fffdf8;border-color:#e7ddca;}
.block-light .card:hover,.block-light .vip:hover{border-color:var(--gold);}
.block-light .card .num{color:#b89235;}
.block-light .card .more{color:#8a6f34;}
.block-light .feature{border-color:#e7ddca;}
.block-light .feature h4{color:#1a1610;}

/* Statistiques */
.block-light .stats{border-color:#e0d5c0;}
.block-light.stats-band .stats,.block-light .stats-band .stats{background:transparent;}
.block-light .stat{border-color:#e0d5c0;}
.block-light .stat .n{color:#9c7a1c;}
.block-light .stat .l{color:#6b6252;}

/* Process (étapes) */
.block-light .process{border-color:#e0d5c0;}
.block-light .step{border-color:#e0d5c0;}
.block-light .step .n{color:#b89235;}
.block-light .step h4{color:#1a1610;}

/* Citation */
.block-light .quote{color:#2c2721;border-left-color:var(--gold);}
.block-light .quote cite{color:#8a6f34;}

/* FAQ */
.block-light .faq-item{border-bottom-color:#e0d5c0;}
.block-light .faq-item summary{color:#1a1610;}
.block-light .faq-item summary:hover{color:#8a6f34;}
.block-light .faq-item p{color:#4a4236;}

/* Graphique de prix sur fond clair */
.block-light .pc-name{color:#1a1610;}
.block-light .pc-line{background:rgba(0,0,0,.05);border-color:#e0d5c0;}
.block-light .pc-line em{color:#2c2721;text-shadow:none;}
.block-light .pc-line em b{color:#a8811f;}
.block-light .pc-fill.ca{background:linear-gradient(90deg,#cabd9f,#b3a582);}
.block-light .pc-legend,.block-light .pc-note{color:#6b6252;}

/* Boutons secondaires sur fond clair */
.block-light .btn-outline{color:#8a6f34;border-color:var(--gold);}
.block-light .btn-outline:hover{background:rgba(201,162,75,.12);}

/* ================= Encadré « Guide complet » (CTA en bas de page) ================= */
.guide-cta{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  margin:2.6em 0 1.2em;padding:28px 32px;border:1px solid var(--gold);border-radius:14px;
  background:linear-gradient(120deg,rgba(201,162,75,.16),rgba(201,162,75,.03));
  box-shadow:0 12px 42px rgba(0,0,0,.38);}
.guide-cta-tag{display:inline-block;font-family:var(--font-body);text-transform:uppercase;letter-spacing:.2em;
  font-size:.66rem;color:var(--gold-light);margin-bottom:8px;}
.guide-cta h3{margin:0 0 6px;color:var(--ivory);}
.guide-cta p{margin:0;font-size:.92rem;color:var(--ivory-dim);max-width:62ch;}
.guide-cta .btn{flex:0 0 auto;}
@media (max-width:640px){.guide-cta{flex-direction:column;align-items:flex-start;}}
/* variante sur bloc clair (si réutilisé) */
.block-light .guide-cta h3{color:#1a1610;}
.block-light .guide-cta p{color:#4a4236;}

/* ---- Thème clair : composants du contenu (pages internes) ---- */
.block-light .prose{color:#4a4236;}
.block-light .answer-box{background:rgba(201,162,75,.13);border-color:#e0d5c0;border-left-color:var(--gold);}
.block-light .answer-box .lead,.block-light .answer-box p{color:#2c2721;}
.block-light .prose table{border-color:#e0d5c0;}
.block-light .prose th,.block-light .prose td{border-color:#e0d5c0;}
.block-light .prose thead th,.block-light .prose tr:first-child th{background:#efe7d7;color:#8a6f34;}
.block-light .prose td strong{color:#8a6f34;}
.block-light .prose blockquote{color:#2c2721;border-left-color:var(--gold);}
#main .block-light td a:not(.btn){color:#8a6f34;}
#main .block-light td a:hover{color:#6f5827;}
/* la carte devis (sidebar) reste sombre : joli contraste sur fond clair */
.block-light .side-cta{background:var(--ink-2);border-color:#e0d5c0;}

/* ---- Encart de bascule Tunisie / Turquie (topbar) ---- */
.region-switch{display:inline-flex;align-items:center;gap:8px;margin-right:16px;
  padding:5px 14px;border:1px solid var(--gold);border-radius:999px;
  background:linear-gradient(90deg,rgba(201,162,75,.20),rgba(201,162,75,.05));
  color:var(--ivory);font-size:.78rem;letter-spacing:.03em;transition:all .2s ease;}
.region-switch:hover{background:var(--gold);color:var(--ink);}
.region-switch .rs-flag{font-size:1.05rem;line-height:1;}
.region-switch b{color:var(--gold-light);font-weight:600;}
.region-switch:hover b{color:var(--ink);}
@media (max-width:700px){.region-switch .rs-label{display:none;}.region-switch{padding:6px 10px;margin-right:8px;}}

/* ============================================================
   AYLAN STORIES — rail (home) + full-screen viewer + intro sheet
   ============================================================ */
.stories-band{padding:44px 0 36px;}
.stories-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px;}
.stories-icon{display:inline-flex;}
.stories-icon svg{width:28px;height:28px;fill:none;stroke:var(--gold);stroke-width:1.8;}
.stories-icon svg path{fill:var(--gold);stroke:none;}
.stories-title{font-size:1.4rem;margin:0;font-weight:500;}
.stories-title b{font-weight:700;color:#8a6f34;}
.stories-sub{font-size:.84rem;color:#6b6252;letter-spacing:.02em;}
.stories-rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 16px;margin:0 -4px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--gold) transparent;}
.stories-rail::-webkit-scrollbar{height:4px;}
.stories-rail::-webkit-scrollbar-thumb{background:var(--gold);border-radius:4px;}
.story-card{--h:220px;flex:0 0 auto;width:150px;position:relative;scroll-snap-align:start;background:none;border:0;
  padding:0;cursor:pointer;text-align:center;font:inherit;color:inherit;}
.story-frame{display:block;height:var(--h);border-radius:15px;padding:3px;
  background:linear-gradient(140deg,var(--gold-light),var(--gold) 45%,var(--gold-dim));box-shadow:0 10px 24px rgba(26,22,16,.18);}
.story-card.is-seen .story-frame{background:#d6ccba;}
.story-frame img{width:100%;height:100%;object-fit:cover;border-radius:12px;transition:transform .45s ease;}
.story-card:hover .story-frame img,.story-card:focus-visible .story-frame img{transform:scale(1.04);}
.story-card:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:15px;}
.story-avatar{position:absolute;left:50%;top:var(--h,220px);transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;
  background:var(--ink);border:3px solid #f4efe6;box-shadow:0 0 0 2px var(--gold);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.story-avatar img{width:68%;height:auto;}
.story-label{display:block;margin-top:34px;font-size:.82rem;font-weight:500;line-height:1.3;color:#1a1610;}
@media (max-width:640px){.story-card{--h:176px;width:118px;}.story-avatar{width:46px;height:46px;}.stories-title{font-size:1.4rem;}}

html.sv-lock,html.sv-lock body{overflow:hidden;}
.story-viewer{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;gap:26px;
  background:rgba(5,5,5,.94);opacity:0;transition:opacity .22s ease;}
.story-viewer.is-open{opacity:1;}
.story-viewer[hidden],.story-sheet[hidden]{display:none;}
.sv-frame{position:relative;width:min(420px,100vw);height:min(760px,100vh);height:min(760px,100dvh);background:#000;border-radius:16px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);user-select:none;-webkit-user-select:none;}
.sv-slide,.sv-img,.sv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.sv-frame.is-videoslide .sv-caption{display:none;}
/* Story video : pastille de lecture sur la vignette du rail. */
.story-card.is-video .story-frame::after{content:'';position:absolute;left:50%;top:50%;width:40px;height:40px;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(10,12,20,.45) no-repeat center/11px 13px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5l11 7-11 7z'/%3E%3C/svg%3E");pointer-events:none;}
.sv-frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 46%,rgba(0,0,0,.88) 100%);}
.sv-frame.is-cta::after{background:rgba(10,10,10,.74);}
.sv-bars{position:absolute;top:12px;left:12px;right:12px;z-index:4;display:flex;gap:4px;}
.sv-bar{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden;}
.sv-bar i{display:block;height:100%;width:0;background:#fff;}
.sv-bar.done i{width:100%;}
.is-paused .sv-bars{opacity:.55;}
.sv-head{position:absolute;top:26px;left:12px;right:8px;z-index:4;display:flex;align-items:center;gap:10px;color:#fff;}
.sv-avatar{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px var(--gold);
  display:flex;align-items:center;justify-content:center;overflow:hidden;}
.sv-avatar img{width:68%;height:auto;}
.sv-who{display:flex;flex-direction:column;line-height:1.25;font-size:.82rem;}
.sv-who b{font-weight:600;color:#fff;}
.sv-label{color:rgba(255,255,255,.82);}
.sv-close{margin-left:auto;background:none;border:0;padding:6px;cursor:pointer;}
.sv-close svg,.sv-nav svg,.ss-close svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;}
.sv-caption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px 22px 38px;color:#fff;pointer-events:none;}
.is-cta .sv-caption{top:0;display:flex;flex-direction:column;justify-content:center;text-align:center;}
.sv-caption h3{color:#fff;font-size:1.6rem;line-height:1.1;margin:0 0 .35em;}
.sv-caption p{color:rgba(255,255,255,.9);font-size:1rem;margin:0;}
.sv-kicker{display:block;margin-bottom:6px;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-light);}
.sv-facts{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;}
.sv-facts li{display:flex;flex-direction:column;padding:9px 11px;border-radius:10px;background:rgba(10,10,10,.58);border:1px solid rgba(231,205,138,.42);}
.sv-facts span{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light);}
.sv-facts b{font-size:.92rem;font-weight:500;color:#fff;line-height:1.3;}
.sv-actions{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:24px;pointer-events:auto;}
.sv-actions .btn{width:100%;max-width:300px;justify-content:center;}
.sv-tap{position:absolute;top:72px;bottom:0;z-index:2;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.sv-tap-prev{left:0;width:35%;}
.sv-tap-next{right:0;width:65%;}
.sv-nav{flex:0 0 46px;width:46px;height:46px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);transition:background .2s;}
.sv-nav:hover{background:rgba(201,162,75,.35);}
@media (max-width:640px){.sv-frame{width:100vw;height:100vh;height:100dvh;border-radius:0;}.sv-nav{display:none;}}

.story-sheet{position:fixed;inset:0;z-index:1000;}
.ss-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;transition:opacity .26s ease;}
.ss-panel{position:absolute;left:50%;bottom:0;width:min(560px,100%);max-height:92vh;max-height:92dvh;overflow-y:auto;
  transform:translate(-50%,100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);background:#fff;border-radius:22px 22px 0 0;color:#4a4236;}
.story-sheet.is-open .ss-backdrop{opacity:1;}
.story-sheet.is-open .ss-panel{transform:translate(-50%,0);}
.ss-close{position:absolute;top:12px;right:14px;z-index:2;background:none;border:0;padding:6px;cursor:pointer;}
.ss-close svg{stroke:var(--gold-dim);}
.ss-preview{background:#f4efe6;padding:46px 0 0 22px;overflow:hidden;}
.ss-preview-card{background:#fff;border-radius:14px 0 0 0;padding:16px 0 26px 18px;box-shadow:0 -6px 24px rgba(26,22,16,.08);}
.ss-preview-head{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:1.1rem;color:#1a1610;}
.ss-preview-head b{color:#8a6f34;}
.ss-preview-rail{display:flex;align-items:flex-end;gap:12px;margin-top:14px;}
.ss-mini{position:relative;flex:0 0 auto;width:104px;height:142px;}
.ss-mini:first-child{width:128px;height:172px;}
.ss-mini > img{width:100%;height:100%;object-fit:cover;border-radius:10px;box-shadow:0 6px 16px rgba(26,22,16,.18);}
.ss-mini .story-avatar{top:auto;bottom:-16px;transform:translateX(-50%);width:42px;height:42px;border-width:2px;}
.ss-body{padding:26px 26px 30px;}
.ss-body h3{color:#1a1610;font-size:1.4rem;margin:0 0 .35em;}
.ss-lead{color:#1a1610;font-weight:400;}
.ss-body p{color:#4a4236;}
.ss-cta{width:100%;justify-content:center;margin-top:8px;}

/* Formulaire de devis MetoCRM (iframe) en tete des pages devis */
.quote-form{background:#fff;border:1px solid var(--hair);border-radius:14px;overflow:hidden;height:640px;margin:0 0 34px;}
.quote-form iframe{display:block;width:100%;height:100%;border:0;}
@media (max-width:640px){.quote-form{height:600px;border-radius:10px;}}

/* ---- Accueil FR : formulaire de devis + video de marque, cote a cote ---- */
.quote-row{max-width:1080px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:30px;align-items:start;}
.quote-row .quote-form{margin:0;}
.brand-video{position:relative;margin:0;border-radius:14px;overflow:hidden;background:#0b0f1a;line-height:0;}
.brand-video video{display:block;width:100%;height:640px;object-fit:cover;}
/* Le bouton ne sert a rien sans JS (la video ne demarre pas) : masque par defaut. */
.brand-video-toggle{display:none;}
.js .brand-video-toggle{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(10,12,20,.55);cursor:pointer;transition:background .2s,border-color .2s;}
.js .brand-video-toggle:hover{background:rgba(10,12,20,.85);border-color:var(--gold);}
.brand-video-toggle svg{width:16px;height:16px;fill:#fff;}
.brand-video-toggle .i-play,.brand-video.is-paused .i-pause{display:none;}
.brand-video.is-paused .i-play{display:block;}
@media (max-width:900px){
  /* Video sous le formulaire, centree et a sa largeur naturelle (9:16). */
  .quote-row{grid-template-columns:minmax(0,1fr);gap:26px;max-width:640px;}
  .brand-video{max-width:340px;margin:0 auto;}
  .brand-video video{height:auto;aspect-ratio:9/16;}
}