/* =========================================================
  CABINET MÉDICAL DE VINON-SUR-VERDON — DESIGN "CALM CLINIC"
  Objectif: garder la structure/infos, moderniser le visuel.
  ========================================================= */

*{margin:0;padding:0;box-sizing:border-box}
:root{
/* Palette (calme, médicale, moderne) */
--brand: #0E7490;           /* teal */
--brand-2:#1D4ED8;          /* blue */
--accent:#14B8A6;           /* mint */
--danger:#DC2626;

--text:#0F172A;             /* slate-900 */
--muted:#475569;            /* slate-600 */
--muted-2:#64748B;          /* slate-500 */
--white:#FFFFFF;

--bg:#F8FAFC;               /* slate-50 */
--bg-2:#F1F5F9;             /* slate-100 */
--card:#FFFFFF;

--border: rgba(15, 23, 42, .08);

--shadow-sm: 0 1px 2px rgba(2,6,23,.06);
--shadow-md: 0 10px 30px rgba(2,6,23,.08);
--shadow-lg: 0 22px 60px rgba(2,6,23,.14);

--radius-sm: 14px;
--radius: 22px;
--radius-lg: 30px;

--container: 1610px;

--ease: cubic-bezier(.2,.8,.2,1);
--t: 240ms var(--ease);

--grad-brand: linear-gradient(135deg, rgba(14,116,144,1) 0%, rgba(29,78,216,1) 100%);
--grad-soft: linear-gradient(180deg, rgba(14,116,144,.08) 0%, rgba(29,78,216,.06) 60%, rgba(20,184,166,.05) 100%);
--grad-hero: linear-gradient(135deg, rgba(46,139,87,.65), rgba(59,130,246,.45));
}

html{scroll-behavior:smooth}
body{
font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
color:var(--text);
background: var(--bg);
line-height:1.7;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
.container{
max-width:var(--container);
margin:0 auto;
padding:0 20px;
}

/* Header: container full width (le reste du site garde la largeur max) */
.header .container{
  max-width: none;
  width: 100%;
  padding: 0 24px;  /* padding gauche/droite du header */
}


/* =========================================================
  BACKGROUND
  ========================================================= */
.bg-elements{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bg-gradient{
position:absolute;inset:0;
background:
  radial-gradient(900px 500px at 10% 10%, rgba(29,78,216,.12), transparent 60%),
  radial-gradient(900px 600px at 90% 20%, rgba(14,116,144,.14), transparent 60%),
  radial-gradient(900px 600px at 35% 95%, rgba(20,184,166,.10), transparent 55%);
}
.bg-shape{display:none} /* on garde le HTML, mais on calme le rendu */

/* =========================================================
  TYPO / UTILITAIRES
  ========================================================= */
.gradient-text{
background:var(--grad-brand);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.section{
position:relative;
z-index:1;
padding: 84px 0;
}
.section-header{margin-bottom:48px}
.section-header.centered{text-align:center;max-width:820px;margin-left:auto;margin-right:auto}
.section-label{
display:inline-flex;
align-items:center;
gap:10px;
padding:8px 14px;
border:1px solid rgba(14,116,144,.18);
border-radius:999px;
background: rgba(14,116,144,.06);
color: var(--brand);
font-weight:700;
text-transform:uppercase;
letter-spacing:.08em;
font-size:.78rem;
}
.section-title{
font-family:'Crimson Pro',Georgia,serif;
font-size: clamp(2.2rem, 4vw, 3.4rem);
line-height:1.12;
letter-spacing:-.02em;
margin:14px 0 14px;
}
.section-subtitle{
color:var(--muted);
font-size:1.06rem;
}

/* AOS-like */
[data-aos]{opacity:0;transform:translateY(16px);transition: 650ms var(--ease)}
.aos-animate{opacity:1;transform:none}

/* =========================================================
  HEADER / NAV
  ========================================================= */
.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 86px;
  z-index: 1000;

  display: flex;
  align-items: center;   /* CENTRAGE VERTICAL GLOBAL */

  background: rgba(248,250,252,.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.header.scrolled{
height:78px;
background: rgba(248,250,252,.92);
box-shadow: var(--shadow-sm);
}
.header-content{
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;   /* centre verticalement */
  justify-content: space-between;
}




.logo{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;

  margin-left: 8px;   /* ← très proche du bord */
}


.logo:hover{transform:translateY(-1px)}
.logo-icon{
width:46px;height:46px;
border-radius:16px;
display:grid;place-items:center;
background: var(--grad-brand);
color:white;
box-shadow: var(--shadow-sm);
}
.logo-text{display:flex;flex-direction:column;gap:2px}
.logo-main{
font-family:'Crimson Pro',Georgia,serif;
font-size:1.4rem;
font-weight:700;
line-height:1;
}
.logo-sub{
font-size:.72rem;
text-transform:uppercase;
letter-spacing:.10em;
color:var(--muted-2);
font-weight:600;
}

.nav{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link{
position:relative;
text-decoration:none;
padding:10px 12px;
border-radius:999px;
font-weight:600;
font-size:.95rem;
color: var(--muted);
transition: var(--t);
}
.nav-link-bg{display:none}
.nav-link:hover{color:var(--text); background: rgba(15,23,42,.06)}
.nav-link:focus-visible{outline:3px solid rgba(29,78,216,.25); outline-offset:3px}

.menu-toggle{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:10px}
.menu-toggle span{width:26px;height:3px;border-radius:3px;background:var(--text);transition:var(--t)}
.menu-toggle.active span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* =========================================================
  BUTTONS
  ========================================================= */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding: 12px 18px;
border-radius: 999px;
text-decoration:none;
font-weight:700;
border:1px solid transparent;
transition: var(--t);
cursor:pointer;
user-select:none;
white-space:nowrap;
}
.btn svg{flex:0 0 auto}
.btn-primary{
background: var(--grad-brand);
color:white;
box-shadow: var(--shadow-sm);
}
.btn-primary:hover{transform:translateY(-1px); box-shadow: var(--shadow-md)}
.btn-glass{
background: rgba(255,255,255,.55);
border-color: rgba(255,255,255,.55);
color:white;
}
.btn-glass:hover{background: rgba(255,255,255,.70)}
.btn-white{
background:white;
color: var(--brand);
border-color: rgba(14,116,144,.12);
box-shadow: var(--shadow-sm);
}
.btn-white:hover{transform:translateY(-1px); box-shadow: var(--shadow-md)}
.btn-sm{padding:10px 14px; font-size:.92rem}
.btn-large{padding:14px 22px; font-size:1.02rem}
.btn-hero{padding:14px 22px; font-size:1.05rem}

/* on retire le "glow" trop flashy */
.btn-glow{animation:none}

/* =========================================================
  HERO
  ========================================================= */
.hero{
position:relative;
min-height: 100vh;
padding-top: 86px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-image{
position:absolute;inset:0;
background-size:cover;
background-position:center;
transform:scale(1.05);
filter: saturate(1.05) contrast(1.02);
}
.hero-overlay{position:absolute;inset:0;background: var(--grad-hero)}
.hero-particles{display:none} /* plus sobre */

.hero-content{
position:relative;
z-index:1;
width:100%;
max-width: 980px;
padding: 64px 24px 44px;
text-align:center;
color:white;
}
.hero-badge{
display:inline-flex;align-items:center;gap:10px;
padding:10px 14px;
border-radius:999px;
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.22);
backdrop-filter: blur(10px);
font-weight:600;
font-size:.95rem;
margin-bottom: 22px;
}
.hero-title{
font-family:'Crimson Pro',Georgia,serif;
font-size: clamp(2.8rem, 5.2vw, 4.6rem);
line-height:1.03;
letter-spacing:-.03em;
margin-bottom: 14px;
}
.hero-subtitle{
font-size: 1.18rem;
color: rgba(255,255,255,.88);
max-width: 720px;
margin: 0 auto 26px;
}
.hero-cta{
display:flex;
gap:12px;
justify-content:center;
flex-wrap:wrap;
margin-bottom: 28px;
}
.hero-features{
display:flex;
gap:18px;
justify-content:center;
flex-wrap:wrap;
margin-top: 10px;
}
.hero-feature{
display:flex;align-items:center;gap:10px;
padding: 10px 14px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.16);
border-radius: 999px;
color: rgba(255,255,255,.92);
font-weight:600;
font-size:.95rem;
}
.scroll-indicator{
position:absolute;
bottom: 22px;
left:50%;
transform:translateX(-50%);
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
color: rgba(255,255,255,.82);
font-weight:600;
font-size:.85rem;
z-index:1;
animation: bounce 2.4s ease-in-out infinite;
}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-10px)}}

/* =========================================================
  CABINET
  ========================================================= */
.section-cabinet{
background: var(--grad-soft);
}
.cabinet-grid{
display:grid;
grid-template-columns: 1.05fr .95fr;
gap: 42px;
align-items:center;
margin-bottom: 48px;
}
.cabinet-image-main{
border-radius: var(--radius-lg);
overflow:hidden;
box-shadow: var(--shadow-lg);
border: 1px solid rgba(255,255,255,.55);
}
.cabinet-image-main img{
width:100%;
height: 520px;
object-fit:cover;
}
.image-decoration{display:none}
.cabinet-stats{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: -26px;
padding: 0 10px;
position:relative;
z-index:2;
}
.stat-card{
background: rgba(255,255,255,.90);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px 16px;
box-shadow: var(--shadow-sm);
text-align:center;
transition: var(--t);
}
.stat-card:hover{transform:translateY(-2px); box-shadow: var(--shadow-md)}
.stat-number{
font-family:'Crimson Pro',Georgia,serif;
font-size: 2.4rem;
font-weight: 700;
line-height:1;
margin-bottom: 4px;
}
.stat-label{color:var(--muted);font-weight:600}

.cabinet-content{display:flex;flex-direction:column;gap:18px}
.content-block{
display:grid;
grid-template-columns: 72px 1fr;
gap: 14px;
padding: 18px 18px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: rgba(255,255,255,.86);
box-shadow: var(--shadow-sm);
}
.icon-wrapper{
width:60px;height:60px;
border-radius: 18px;
background: rgba(14,116,144,.10);
border: 1px solid rgba(14,116,144,.18);
color: var(--brand);
display:grid;place-items:center;
}
.content-block h3{
font-family:'Crimson Pro',Georgia,serif;
font-size: 1.55rem;
margin-bottom: 6px;
}
.content-block p{color:var(--muted)}

.features-list{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 6px;
}
.feature-item{
display:flex;
align-items:center;
gap: 10px;
padding: 12px 12px;
border-radius: 16px;
background: rgba(255,255,255,.78);
border: 1px solid var(--border);
font-weight:600;
color: var(--muted);
}
.feature-item svg circle{fill: rgba(20,184,166,.95)}

.values-cards{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
}
.value-card{
background: white;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 26px 22px;
box-shadow: var(--shadow-sm);
transition: var(--t);
text-align:left;
}
.value-card:hover{transform:translateY(-2px); box-shadow: var(--shadow-md)}
.value-icon{
width:52px;height:52px;
border-radius: 18px;
display:grid;place-items:center;
background: rgba(29,78,216,.08);
border: 1px solid rgba(29,78,216,.16);
color: var(--brand-2);
margin-bottom: 14px;
}
.value-card h4{
font-family:'Crimson Pro',Georgia,serif;
font-size: 1.35rem;
margin-bottom: 8px;
}
.value-card p{color:var(--muted)}

/* =========================================================
  PRATICIENS
  ========================================================= */
.section-praticiens{background: var(--bg)}
.praticiens-grid{
display:grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.praticien-card{
background:white;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow:hidden;
box-shadow: var(--shadow-sm);
transition: var(--t);
}
.praticien-card:hover{transform:translateY(-2px); box-shadow: var(--shadow-md)}
.praticien-card::before{display:none}

.praticien-image{position:relative;height: 320px;overflow:hidden}
.praticien-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: center 10%;
  transform:scale(1.02);
  transition: 600ms var(--ease);
}
.praticien-card:hover .praticien-image img{transform:scale(1.06)}
.praticien-overlay{
position:absolute;inset:0;
display:flex;
align-items:flex-end;
justify-content:center;
padding: 16px;
background: linear-gradient(180deg, transparent 0%, rgba(2,6,23,.62) 100%);
opacity:1; /* on garde le bouton visible */
}
.praticien-badge{display:none}

.praticien-content{padding: 28px 28px 30px}
.praticien-header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.praticien-content h3{
font-family:'Crimson Pro',Georgia,serif;
font-size: 1.55rem;
line-height:1.2;
margin-bottom: 4px;
}
.praticien-specialite{color: var(--brand); font-weight:700; font-size:.95rem}
.praticien-exp{
padding: 8px 12px;
border-radius: 999px;
background: rgba(14,116,144,.10);
border: 1px solid rgba(14,116,144,.18);
color: var(--brand);
font-weight:800;
font-size:.85rem;
}
.praticien-bio{color:var(--muted);margin-bottom: 14px}
.praticien-skills{display:flex;flex-wrap:wrap;gap:8px}
.skill-tag{
padding: 8px 10px;
border-radius: 999px;
background: rgba(29,78,216,.06);
border: 1px solid rgba(29,78,216,.14);
color: var(--brand-2);
font-weight:700;
font-size:.82rem;
}

/* =========================================================
  INFOS PRATIQUES
  ========================================================= */
.section-infos{background: var(--bg-2)}
.infos-grid{
display:grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.info-card{
background:white;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px 26px;
box-shadow: var(--shadow-sm);
transition: var(--t);
}
.info-card:hover{transform:translateY(-2px); box-shadow: var(--shadow-md)}
.info-icon{
width:52px;height:52px;
border-radius: 18px;
display:grid;place-items:center;
background: rgba(14,116,144,.10);
border: 1px solid rgba(14,116,144,.18);
color: var(--brand);
margin-bottom: 14px;
}
.info-card h3{
font-family:'Crimson Pro',Georgia,serif;
font-size: 1.45rem;
margin-bottom: 14px;
}
.info-content{display:flex;flex-direction:column;gap:10px}
.hours-row{
display:flex;justify-content:space-between;gap:12px;
padding: 10px 0;
border-bottom: 1px solid rgba(15,23,42,.06);
}
.hours-row span:first-child{font-weight:800;color:var(--text)}
.hours-time{color:var(--muted);text-align:right}
.hours-row.closed{opacity:.7}

.address-main{color:var(--text);font-weight:700;line-height:1.6}
.access-items{display:flex;flex-direction:column;gap:8px}
.access-item{display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:600}
.access-item svg circle{fill: rgba(20,184,166,.95)}

.contact-item{display:flex;flex-direction:column;gap:4px}
.contact-label{
color: var(--muted-2);
text-transform: uppercase;
letter-spacing:.08em;
font-weight:800;
font-size:.78rem;
}
.contact-value{
text-decoration:none;
font-weight:800;
color: var(--text);
}
.phone-link{color: var(--brand);font-weight:900}
.phone-link:hover{text-decoration:underline}
.email-link{color: var(--brand-2);font-weight:800}
.email-link:hover{text-decoration:underline}

.info-note{
margin-top: 14px;
padding: 12px 12px;
border-radius: 16px;
border: 1px solid rgba(14,116,144,.14);
background: rgba(14,116,144,.06);
color: var(--muted);
display:flex;align-items:flex-start;gap:10px;
font-weight:600;
font-size:.92rem;
}
.info-note.success{
border-color: rgba(20,184,166,.18);
background: rgba(20,184,166,.08);
}
.info-note svg{margin-top:2px}

/* Urgences */
.info-card.urgence{
border-color: rgba(220,38,38,.18);
background: linear-gradient(180deg, rgba(220,38,38,.06) 0%, #fff 60%);
}
.urgence-icon{
background: rgba(220,38,38,.10);
border-color: rgba(220,38,38,.18);
color: var(--danger);
}
.urgence-text{color:var(--muted)}
.urgence-numbers{display:flex;flex-direction:column;gap:10px;margin-top: 12px}
.urgence-number{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding: 12px 12px;
border-radius: 16px;
border: 1px solid rgba(220,38,38,.14);
background: rgba(220,38,38,.05);
font-weight:800;
}
.urgence-divider{height:1px;background:rgba(15,23,42,.06);margin:14px 0}

/* =========================================================
  CONTACT
  ========================================================= */
.section-contact{background: var(--bg-2)}
.contact-wrapper{
display: flex;
justify-content: center;
}

.contact-form{
max-width: 640px;
width: 100%;
}

.contact-form{
background:white;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 22px 22px;
box-shadow: var(--shadow-sm);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-group{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.form-group label{font-weight:800;color:var(--text)}
.form-group input,
.form-group textarea{
border-radius: 16px;
border: 1px solid rgba(15,23,42,.12);
padding: 12px 12px;
font: inherit;
background: rgba(248,250,252,.9);
transition: var(--t);
}
.form-group textarea{min-height: 140px; resize: vertical}
.form-group input:focus,
.form-group textarea:focus{
outline:none;
border-color: rgba(29,78,216,.35);
box-shadow: 0 0 0 4px rgba(29,78,216,.12);
background:white;
}
.form-hint{
margin-top: 10px;
padding: 12px 12px;
border-radius: 16px;
border: 1px solid rgba(15,23,42,.08);
background: rgba(255,255,255,.7);
color: var(--muted);
display:flex;align-items:flex-start;gap:10px;
font-weight:600;
font-size:.92rem;
}

.form-hint-content{
  display:flex;
  flex-direction:column;
}

.form-hint-email{
  display:block;
  margin-top:6px;
  font-weight:700; color: var(--brand-2); } .form-hint-email a:hover{ text-decoration:underline;
}


/* =========================================================
  FOOTER
  ========================================================= */
.footer{
padding: 34px 0;
background: #0B1220;
color: rgba(255,255,255,.86);
position:relative;
z-index:1;
}
.footer-content{
display:flex;
align-items:center;
justify-content:space-between;
gap: 18px;
flex-wrap:wrap;
}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-logo{
width:42px;height:42px;border-radius: 16px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.14);
display:grid;place-items:center;
}
.footer-text{font-weight:700}
.footer-info{display:flex;flex-direction:column;gap:4px}
.footer-copy{font-weight:800}
.footer-rgpd{color:rgba(255,255,255,.70);font-weight:600;font-size:.92rem}

.btn-scroll-top{
width:44px;height:44px;
border-radius: 16px;
display:grid;place-items:center;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.14);
color:white;
transition: var(--t);
}
.btn-scroll-top:hover{transform:translateY(-2px); background: rgba(255,255,255,.16)}

/* =========================================================
  RESPONSIVE
  ========================================================= */
@media (max-width: 1024px){
.cabinet-grid{grid-template-columns:1fr; gap: 22px}
.cabinet-image-main img{height: 440px}
.contact-wrapper{grid-template-columns:1fr}
}
@media (max-width: 1090px){
.nav{
  position: fixed;
  top: 78px;
  left: 16px;
  right: 16px;
  background: rgba(248,250,252,.98);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 14px;
  box-shadow: var(--shadow-md);
  display:none;
  flex-direction:column;
  align-items:stretch;
}
.nav.active{display:flex}
.nav-link{border-radius: 16px; padding: 12px 14px}
.menu-toggle{display:flex}
.header .btn.btn-primary.btn-glow{display:none} /* sur mobile on simplifie le header */
}
@media (max-width: 640px){
.hero-content{padding: 52px 14px 100px}
.hero-cta{gap:10px}
.form-row{grid-template-columns:1fr}
.features-list{grid-template-columns:1fr}
}


/* --- Layout responsive --- */
@media (max-width: 1200px){
.praticiens-grid,
.infos-grid{
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
}

@media (max-width: 768px){
.praticiens-grid,
.infos-grid{
  grid-template-columns: 1fr;
  gap: 16px;
}

.praticien-card,
.info-card{min-width:0}
}

rtes praticiens */