/* ============================================================
   Cabinet Dentaire Dr Brahim Sellami — feuille de style des pages
   de soins. Reprend EXACTEMENT les jetons du site en ligne
   (src/index.css) : mêmes couleurs, mêmes polices, mêmes rayons.
   ============================================================ */

:root{
  --font-sans:"Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display:"Playfair Display", Georgia, serif;
  --font-arabic:"Cairo", ui-sans-serif, system-ui, sans-serif;

  --cream-50:#fcf9f4;
  --cream-100:#f8f1e7;
  --cream-200:#f1e6d5;
  --sand-300:#e7d6bf;
  --tan-400:#d4b48d;
  --gold-400:#d3ab71;
  --gold-500:#c69b62;
  --gold-600:#b1834a;
  --caramel-700:#94643c;
  --mocha-800:#6e4726;
  --coffee-900:#4a2e17;
  --espresso-950:#2a180c;

  --radius:16px;
  --radius-lg:24px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden}
body{
  margin:0;
  background:var(--cream-50);
  color:var(--coffee-900);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--caramel-700);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--gold-500);color:var(--espresso-950)}

.wrap{max-width:1280px;margin:0 auto;padding:0 20px}
@media(min-width:1024px){.wrap{padding:0 32px}}
.narrow{max-width:840px}

/* ---------------- En-tête (identique au site) ---------------- */
.site-header{position:fixed;inset-inline:0;top:0;z-index:50;transition:all .3s;background:transparent}
.site-header.is-scrolled{background:rgba(252,249,244,.95);box-shadow:0 4px 6px -1px rgba(42,24,12,.06);backdrop-filter:blur(8px)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 0;transition:padding .3s}
.site-header.is-scrolled .bar{padding:12px 0}
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
.brand:hover{text-decoration:none}
.logo{height:56px;width:auto;transition:transform .3s}
.brand:hover .logo{transform:scale(1.03)}
.logo-on-light{display:none}
.site-header.is-scrolled .logo-on-dark{display:none}
.site-header.is-scrolled .logo-on-light{display:block}

.nav{display:none;align-items:center;gap:32px}
@media(min-width:1024px){.nav{display:flex}}
.nav a{
  position:relative;font-size:14px;font-weight:500;color:var(--cream-50);
  transition:color .3s;text-decoration:none;padding:4px 0;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;border-radius:99px;
  background:var(--gold-500);transition:width .3s;
}
.nav a:hover{color:var(--gold-400);text-decoration:none}
.nav a:hover::after{width:100%}
.site-header.is-scrolled .nav a{color:var(--coffee-900)}
.site-header.is-scrolled .nav a:hover{color:var(--caramel-700)}

.head-actions{display:none;align-items:center;gap:16px}
@media(min-width:1024px){.head-actions{display:flex}}
.head-tel{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--cream-50);transition:color .3s}
.head-tel:hover{color:var(--gold-400);text-decoration:none}
.site-header.is-scrolled .head-tel{color:var(--coffee-900)}
.site-header.is-scrolled .head-tel:hover{color:var(--caramel-700)}
.head-tel svg{width:16px;height:16px;color:var(--gold-500)}

.burger{
  display:flex;height:44px;width:44px;align-items:center;justify-content:center;
  border:0;border-radius:12px;background:rgba(255,255,255,.1);color:var(--cream-50);cursor:pointer;
  transition:background .3s, color .3s;
}
@media(min-width:1024px){.burger{display:none}}
.site-header.is-scrolled .burger{background:var(--cream-200);color:var(--coffee-900)}
.burger svg{width:24px;height:24px}

.mobile-panel{max-height:0;overflow:hidden;background:var(--cream-50);transition:max-height .3s}
.mobile-panel.open{max-height:520px;border-top:1px solid var(--cream-200);box-shadow:0 10px 15px -3px rgba(42,24,12,.1)}
.mobile-panel nav{display:flex;flex-direction:column;gap:4px;padding:16px 20px}
.mobile-panel a{
  border-radius:12px;padding:12px 16px;font-size:14px;font-weight:500;
  color:var(--coffee-900);text-decoration:none;
}
.mobile-panel a:hover{background:var(--cream-100);text-decoration:none}
.mobile-panel .btn-rdv{
  margin-top:8px;display:flex;align-items:center;justify-content:center;gap:8px;
  border-radius:99px;background:var(--coffee-900);padding:12px 24px;
  font-size:14px;font-weight:600;color:var(--cream-50);
}

/* ---------------- Boutons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:99px;padding:12px 24px;font-size:14px;font-weight:600;
  transition:all .3s;text-decoration:none;border:0;cursor:pointer;
}
.btn:hover{text-decoration:none}
.btn-primary{
  background:linear-gradient(90deg,var(--gold-600),var(--gold-400));
  color:var(--espresso-950);
  box-shadow:0 10px 15px -3px rgba(177,131,74,.25);
}
.btn-primary:hover{box-shadow:0 20px 25px -5px rgba(177,131,74,.3);filter:brightness(1.05)}
.btn-outline{border:1px solid rgba(74,46,23,.3);color:var(--coffee-900)}
.btn-outline:hover{border-color:var(--caramel-700);color:var(--caramel-700)}
.btn-ghost{border:1px solid currentColor;color:inherit}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0}

/* ---------------- Hero ---------------- */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:-2;
  transform-origin:50% 40%;animation:hero-zoom 9s ease-in-out infinite alternate;will-change:transform}
@keyframes hero-zoom{from{transform:scale(1) translateX(0)}to{transform:scale(1.14) translateX(-2%)}}
@media(prefers-reduced-motion:reduce){.hero .bg{animation:none}}
/* Voile : photo bien visible en haut, texte lisible en bas */
.hero .veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(42,24,12,.28) 0%,rgba(42,24,12,.42) 34%,rgba(42,24,12,.80) 58%,rgba(42,24,12,.93) 100%)}
.hero .inner{padding:300px 0 72px;color:var(--cream-50);text-shadow:0 2px 14px rgba(42,24,12,.55)}
/* Mobile : la photo occupe une bande haute (pas étirée sur tout le hero), le texte vient dessous */
@media(max-width:1023px){
  .hero{background:#2A180C}
  .hero .bg{height:560px;object-position:center 55%}
  .hero .veil{background:linear-gradient(180deg,rgba(42,24,12,.18) 0%,rgba(42,24,12,.30) 220px,rgba(42,24,12,.78) 400px,#2A180C 560px,#2A180C 100%)}
}
@media(min-width:1024px){.hero .inner{padding:360px 0 90px}}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(211,171,113,.4);
  background:rgba(255,255,255,.05);border-radius:99px;padding:6px 16px;
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-400);
}
.hero h1{
  font-family:var(--font-display);font-weight:700;color:var(--cream-50);
  font-size:clamp(30px,5vw,52px);line-height:1.1;margin:20px 0 0;
}
.hero .ar{direction:rtl;font-family:var(--font-arabic);color:var(--gold-400);font-size:clamp(18px,2.4vw,24px);margin:10px 0 0}
.hero .lede{max-width:62ch;color:rgba(252,249,244,.82);font-size:17px;margin:20px 0 0}
.hero .pills{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:26px 0 0}
.hero .pills li{
  border:1px solid rgba(211,171,113,.35);background:rgba(255,255,255,.06);
  border-radius:99px;padding:6px 14px;font-size:13px;color:var(--cream-100);
}
.hero .btn-row{margin-top:30px}

/* ---------------- Contenu ---------------- */
main{padding:56px 0 80px}
h2{
  font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.2vw,34px);
  color:var(--coffee-900);margin:52px 0 16px;line-height:1.2;
}
h2:first-child{margin-top:0}
h3{font-family:var(--font-display);font-weight:700;font-size:21px;color:var(--coffee-900);margin:34px 0 10px}
p{margin:0 0 18px}
main ul,main ol{padding-left:24px;margin:0 0 18px}
main li{margin:7px 0}
.muted{color:rgba(74,46,23,.65)}
.updated{font-size:13px;color:rgba(74,46,23,.55);margin:18px 0 26px}

.breadcrumb{font-size:13px;color:rgba(74,46,23,.6);margin:0 0 22px}
.breadcrumb .sep{margin:0 8px;color:var(--tan-400)}

.capsule{
  background:var(--cream-100);border:1px solid var(--sand-300);
  border-left:4px solid var(--gold-500);border-radius:var(--radius);
  padding:18px 22px;margin:0 0 24px;
}
.capsule-tag{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--caramel-700);background:var(--cream-200);border-radius:6px;padding:3px 9px;margin-bottom:10px;
}
.capsule p{margin:0}

.fill{background:#FFF6E4;border-bottom:2px dashed var(--gold-600);padding:0 4px;color:var(--mocha-800)}

/* Tableaux */
.table-wrap{overflow-x:auto;margin:24px 0;border:1px solid var(--sand-300);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:16px}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--cream-200);vertical-align:top}
th{width:34%;background:var(--cream-100);font-weight:600;color:var(--coffee-900)}
tr:last-child th,tr:last-child td{border-bottom:0}

/* Étapes numérotées */
.steps{list-style:none;counter-reset:s;padding:0;margin:24px 0}
.steps li{counter-increment:s;position:relative;padding:0 0 20px 56px;min-height:36px}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:99px;
  background:linear-gradient(135deg,var(--gold-400),var(--gold-600));color:var(--espresso-950);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;
}
.steps li:last-child{padding-bottom:0}

/* Cartes */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:24px 0}
.card{
  background:#fff;border:1px solid rgba(231,214,191,.6);border-radius:var(--radius);
  padding:22px;box-shadow:0 1px 2px rgba(42,24,12,.04);
}
.card h3{margin:0 0 8px;font-size:17px}
.card p{margin:0;font-size:15px;color:rgba(74,46,23,.8)}

/* Encadrés */
.note{
  background:#fff;border:1px solid var(--sand-300);border-left:5px solid var(--gold-500);
  border-radius:var(--radius);padding:20px 24px;margin:26px 0;
}
.note p:last-child{margin-bottom:0}
.note.alert{border-left-color:#B4552F;background:#FDF3EE}
.note h3{margin-top:0}

.devis-box{
  background:#fff;border:1px dashed var(--gold-600);border-radius:var(--radius);
  padding:26px 24px;margin:26px 0;text-align:center;
}
.devis-box p{margin:0 0 14px}
.devis-box .big{
  font-family:var(--font-display);font-size:22px;font-weight:700;
  color:var(--coffee-900);display:block;margin-bottom:8px;
}

/* Deux colonnes */
.split{display:grid;gap:32px;align-items:center;margin:34px 0}
@media(min-width:860px){.split{grid-template-columns:1.15fr .85fr}}
.split img{border-radius:var(--radius);box-shadow:0 10px 30px rgba(42,24,12,.12)}

/* FAQ */
details{
  background:#fff;border:1px solid rgba(231,214,191,.7);border-radius:var(--radius);
  margin-bottom:10px;padding:4px 20px;
}
summary{
  font-weight:600;cursor:pointer;padding:15px 0;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:22px;color:var(--gold-600);line-height:1;font-weight:400}
details[open] summary::after{content:"–"}
details .answer{padding:0 0 16px;color:rgba(74,46,23,.85)}
details .answer p:last-child{margin-bottom:0}

/* Bloc d'appel à l'action */
.cta{
  background:linear-gradient(135deg,var(--espresso-950),var(--coffee-900));
  color:var(--cream-50);border-radius:var(--radius-lg);padding:36px;margin:56px 0 0;
}
.cta h2{font-family:var(--font-display);color:var(--gold-400);margin:0 0 16px;font-size:26px}
.cta p{color:rgba(252,249,244,.82)}
.cta a{color:var(--gold-400)}
.cta .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:0 0 22px}
.cta .item{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:14px 16px;font-size:15px;
}

/* Autres soins */
.more{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin:24px 0}
.more a{
  display:block;background:#fff;border:1px solid rgba(231,214,191,.6);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s ease, box-shadow .15s ease;
}
.more a:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(42,24,12,.1);text-decoration:none}
.more img{height:130px;width:100%;object-fit:cover}
.more span{display:block;padding:12px 14px;font-weight:600;font-size:15px}

/* ---------------- Pied de page ---------------- */
.site-footer{background:var(--espresso-950);color:var(--cream-100);padding:64px 0 32px;margin-top:60px}
.foot-grid{display:grid;gap:40px}
@media(min-width:768px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.foot-grid{grid-template-columns:1fr 1fr 1fr 1fr;gap:32px}}
.site-footer h3{
  font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-400);margin:0 0 20px;
}
.site-footer p{font-size:14px;color:rgba(248,241,231,.6);line-height:1.7}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:0 0 12px;font-size:14px}
.site-footer li a{color:rgba(248,241,231,.7)}
.site-footer li a:hover{color:var(--gold-400);text-decoration:none}
.foot-socials{display:flex;gap:12px;margin-top:20px}
.foot-socials a{
  display:flex;height:40px;width:40px;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.15);border-radius:99px;color:rgba(248,241,231,.8);
  transition:all .3s;
}
.foot-socials a:hover{border-color:var(--gold-500);color:var(--gold-400);text-decoration:none}
.foot-socials svg{width:20px;height:20px}
.foot-bottom{
  display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;
  margin-top:48px;padding-top:32px;border-top:1px solid rgba(255,255,255,.1);
  font-size:14px;color:rgba(248,241,231,.5);
}
@media(min-width:640px){.foot-bottom{flex-direction:row;justify-content:space-between;text-align:left}}
.foot-bottom .tooth{display:flex;align-items:center;gap:6px}
.foot-bottom svg{width:16px;height:16px;color:var(--gold-500)}

/* ---------------- Boutons flottants ---------------- */
.fab{position:fixed;right:20px;bottom:20px;z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.fab-row{display:flex;align-items:center;gap:12px;text-decoration:none}
.fab-row:hover{text-decoration:none}
.fab-label{
  border-radius:99px;background:var(--cream-50);padding:8px 16px;
  font-size:14px;font-weight:600;color:var(--coffee-900);
  box-shadow:0 10px 15px -3px rgba(42,24,12,.1);white-space:nowrap;
}
.fab-dot{
  position:relative;display:flex;height:56px;width:56px;align-items:center;justify-content:center;
  border-radius:99px;color:#fff;box-shadow:0 20px 25px -5px rgba(42,24,12,.3);
  transition:transform .3s;flex:none;
}
.fab-row:hover .fab-dot{transform:scale(1.05)}
.fab-dot svg{width:24px;height:24px}
.fab-dot.wa{background:#25d366}
.fab-dot.call{background:#1fb355}
.fab-dot.g{
  background:linear-gradient(135deg,var(--coffee-900),var(--espresso-950));
  box-shadow:0 20px 25px -5px rgba(42,24,12,.3);
  ring:1px solid rgba(211,171,113,.4);border:1px solid rgba(211,171,113,.4);
}
.fab-dot.rdv{background:linear-gradient(135deg,var(--gold-500),var(--caramel-700));color:var(--espresso-950)}
.fab-dot .ping{
  position:absolute;inset:0;border-radius:99px;background:rgba(211,171,113,.4);
  animation:ping 1.6s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping{75%,100%{transform:scale(1.6);opacity:0}}
.fab-dot .star{
  position:absolute;top:-4px;left:-4px;display:flex;height:20px;width:20px;align-items:center;
  justify-content:center;border-radius:99px;background:linear-gradient(135deg,var(--gold-400),var(--gold-600));
  color:var(--espresso-950);box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.fab-dot .star svg{width:12px;height:12px}
.fab-expand{
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  transition:all .3s;overflow:hidden;
}
.fab-expand.hidden{opacity:0;pointer-events:none;transform:translateY(16px);height:0}
.fab-toggle{border:0;background:none;padding:0;cursor:pointer;display:flex;align-items:center;gap:12px}

/* ---------------- Impression ---------------- */
@media print{
  .site-header,.fab,.site-footer{display:none}
  body{background:#fff}
  .hero .inner{padding:0;color:#000}
}

/* Sélecteur de langue (en-tête) */
.lang-switch{display:inline-flex;align-items:center;gap:6px;border:1px solid currentColor;border-radius:99px;padding:5px 12px;font-size:13px;font-weight:600}
.lang-switch:hover{text-decoration:none;opacity:.85}

.site-footer .logo-3d{width:72px;height:72px;border-radius:50%;object-fit:cover;box-shadow:0 6px 18px rgba(0,0,0,.4);outline:2px solid rgba(201,162,77,.35);margin-bottom:12px;display:block}