/* ============================================================
   HEADER
   ============================================================ */
.header {
    position:fixed; top:0; left:0; right:0;
    z-index:1000; padding:16px 0;
    transition:var(--transition);
    background:transparent;
}
.header.scrolled {
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(12px);
    box-shadow:0 2px 20px rgba(41,171,226,.12);
    padding:10px 0;
}
.header-inner {
    display:flex; align-items:center;
    justify-content:space-between; gap:10px;
}
.logo {
    display:flex; align-items:center; gap:10px;
    font-family:var(--f-corps); font-size:1.1rem; font-weight:800;
    color:var(--c-bleu-nuit); flex-shrink:0; white-space:nowrap;
}
.logo img { height:44px; width:auto; }
.logo-texte { display:flex; flex-direction:column; line-height:1.1; }
.logo-texte small {
    font-size:.58rem; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color:var(--c-bleu);
}
.nav-principale { display:flex; align-items:center; gap:22px; flex-shrink:1; }
.nav-principale a {
    font-size:.87rem; font-weight:600; color:var(--c-bleu-nuit);
    position:relative; padding-bottom:3px; white-space:nowrap;
    transition:color var(--transition);
}
.nav-principale a::after {
    content:''; position:absolute; bottom:0; left:0;
    width:0; height:2px; background:var(--g-logo);
    border-radius:2px; transition:width .3s ease;
}
.nav-principale a:hover { color:var(--c-vert); }
.nav-principale a:hover::after { width:100%; }

.header-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.btn-tel-header {
    display:flex; align-items:center; gap:6px;
    font-size:.83rem; font-weight:700;
    color:var(--c-bleu-nuit); white-space:nowrap;
}
/* ── Burger (base) ── */
.burger {
    display: none;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
    -webkit-tap-highlight-color: transparent;
}
.burger span {
    display: block;
    height: 2.5px;
    width: 22px;
    background: #0C2D4A;
    border-radius: 2px;
    margin: 4px auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

@media(max-width:1280px){ .nav-principale{gap:16px;} .logo-texte small{display:none;} }
@media(max-width:1100px){ .btn-tel-header{display:none;} .nav-principale a{font-size:.83rem;} }

/* ── Mobile ≤ 980px ── */
@media screen and (max-width:980px){

    /* Header compact */
    .header-inner { gap:8px; }
    .logo img { height:36px; }
    .logo { font-size:.95rem; gap:8px; }
    .btn-tel-header { display:none !important; }
    .header-actions > .btn.btn-primaire { display:none !important; }

    /* Burger visible */
    .burger { display:block !important; }

    /* Nav : toujours dans le DOM, déplacé hors écran par transform
       JAMAIS display:none — cela bloque les clics sur Safari iOS */
    .nav-principale {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 80vw !important;
        max-width: 300px !important;
        height: 100% !important;
        background: #0C2D4A !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        padding: 60px 32px !important;
        gap: 0 !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 1050 !important;
        overflow-y: auto !important;
        /* pointer-events actifs en permanence — la position hors écran suffit */
        pointer-events: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Ouvert : glisse dans l'écran */
    .nav-principale.ouvert {
        transform: translateX(0) !important;
    }

    /* Liens du menu */
    .nav-principale a {
        display: block !important;
        color: #ffffff !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        padding: 16px 0 !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(255,255,255,0.12) !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(125,194,66,0.3) !important;
        pointer-events: auto !important;
    }
    .nav-principale a:last-child { border-bottom:none !important; }
    .nav-principale a:active { color: #7DC242 !important; }

    /* Animation burger → X */
    .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
    .burger[aria-expanded="true"] span { background: #7DC242; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    min-height:100vh; display:flex; flex-direction:column; justify-content:center;
    padding-top:90px; padding-bottom:48px; position:relative; overflow:hidden;
    background:var(--g-hero);
}
@keyframes deriveFond1 { 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-24px,26px) scale(1.08); } }
@keyframes deriveFond2 { 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(26px,-22px) scale(1.06); } }
@keyframes flotteDent { 0%,100%{ transform:translateY(0) rotate(-6deg); } 50%{ transform:translateY(-18px) rotate(6deg); } }

.hero::before {
    content:''; position:absolute;
    top:-20%; right:-15%; width:65%; height:120%;
    background:radial-gradient(ellipse, rgba(125,194,66,.12) 0%, transparent 70%);
    pointer-events:none; animation:deriveFond1 17s ease-in-out infinite;
}
.hero::after {
    content:''; position:absolute;
    bottom:-10%; left:-10%; width:50%; height:60%;
    background:radial-gradient(ellipse, rgba(41,171,226,.10) 0%, transparent 70%);
    pointer-events:none; animation:deriveFond2 21s ease-in-out infinite;
}
.hero-grid {
    display:grid; grid-template-columns:1.1fr .9fr;
    gap:56px; align-items:center; position:relative; z-index:1;
}
.hero-badge {
    display:inline-flex; align-items:center; gap:10px;
    background:rgba(41,171,226,.10); border:1.5px solid rgba(41,171,226,.25);
    padding:8px 16px; border-radius:var(--radius-btn);
    font-size:.78rem; font-weight:700; color:var(--c-bleu-fonce);
    margin-bottom:20px;
}
.hero-badge::before { content:'⭐'; font-size:.85rem; }
.hero h1 { margin-bottom:20px; }
.hero h1 span.accent { color:var(--c-vert); font-style:italic; }
.hero h1 span.bleu   { color:var(--c-bleu); }
.hero p.lead {
    font-size:1.08rem; max-width:480px;
    margin-bottom:34px; color:var(--c-texte-doux);
}
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:8px; }

/* Visuel héro */
.hero-visuel {
    position:relative; z-index:1;
}
.hero-img-wrap {
    position:relative; border-radius:var(--radius-xl);
    overflow:hidden; aspect-ratio:4/5; background:#fff;
    box-shadow:var(--ombre-lg);
}
.hero-img-wrap img { width:100%; height:100%; object-fit:contain; }

/* Bandeau d'indicateurs — chiffres clés animés au défilement */
.hero-indicateurs {
    position:relative; z-index:1; margin-top:40px;
    display:flex; align-items:center; flex-wrap:wrap;
    background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
    border-radius:var(--radius-lg); border:1px solid rgba(255,255,255,.6);
    box-shadow:var(--ombre-lg);
    padding:22px 12px;
}
.hero-indicateur {
    flex:1 1 0; min-width:130px;
    display:flex; align-items:center; gap:12px;
    padding:8px 14px; justify-content:center;
}
.hero-indicateur-icone {
    flex-shrink:0; width:46px; height:46px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--c-bleu-clair); color:var(--c-bleu);
    transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.hero-indicateur:nth-of-type(even) .hero-indicateur-icone { background:var(--c-vert-clair); color:var(--c-vert-fonce); }
.hero-indicateurs:hover .hero-indicateur-icone { transform:scale(1.08); }
.hero-indicateur-texte { text-align:left; }
.hero-indicateur-texte strong {
    display:flex; align-items:baseline; gap:1px;
    font-family:var(--f-display); font-size:1.55rem; font-weight:700;
    color:var(--c-bleu-nuit); line-height:1; white-space:nowrap;
}
.hero-indicateur-suffixe, .hero-indicateur-prefixe { color:var(--c-vert); }
.hero-indicateur-texte small {
    display:block; font-size:.74rem; font-weight:600;
    color:var(--c-texte-doux); margin-top:4px; white-space:nowrap;
}
.hero-indicateur-separateur { width:1px; height:44px; background:var(--c-bordure); flex-shrink:0; }

@media(max-width:900px){
    .hero-indicateurs { justify-content:center; }
    .hero-indicateur { flex:1 1 45%; min-width:150px; }
    .hero-indicateur-separateur { display:none; }
}
@media(max-width:480px){
    .hero-indicateurs { padding:18px 10px; }
    .hero-indicateur { flex:1 1 100%; justify-content:flex-start; padding:10px 8px; }
    .hero-indicateur-texte strong { font-size:1.3rem; }
}

/* Décoration flottante — silhouette de dent animée */
.hero-deco {
    position:absolute; top:10%; right:-20px;
    width:100px; height:100px;
    background:var(--g-logo);
    clip-path:path('M50 4C25 4 8 22 9 46C10 62 18 74 24 88C28 97 38 96 39 85C40 76 43 72 50 72C57 72 60 76 61 85C62 96 72 97 76 88C82 74 90 62 91 46C92 22 75 4 50 4Z');
    opacity:.10; pointer-events:none; animation:flotteDent 9s ease-in-out infinite;
}

@media(max-width:980px){
    .hero-grid { grid-template-columns:1fr; gap:36px; }
    .hero-visuel { order:-1; }
    .hero-img-wrap { aspect-ratio:4/5; max-height:60vh; }
    .hero-deco { display:none; }
    .hero-stats { flex-wrap:wrap; }
}

/* ============================================================
   SLIDER 3D
   ============================================================ */
.slider3d-section {
    background:var(--g-hero); padding:var(--section-padding) 0;
    margin-top:60px;
    position:relative; overflow:hidden;
}
.slider3d-section::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 30% 50%, rgba(41,171,226,.15) 0%, transparent 60%),
               radial-gradient(ellipse at 70% 50%, rgba(125,194,66,.10) 0%, transparent 60%);
    pointer-events:none; animation:deriveFond1 19s ease-in-out infinite;
}
.slider3d-section .dent-flottante {
    position:absolute; top:8%; left:4%; width:64px; height:64px;
    background:var(--g-logo);
    clip-path:path('M50 4C25 4 8 22 9 46C10 62 18 74 24 88C28 97 38 96 39 85C40 76 43 72 50 72C57 72 60 76 61 85C62 96 72 97 76 88C82 74 90 62 91 46C92 22 75 4 50 4Z');
    opacity:.12; pointer-events:none; animation:flotteDent 11s ease-in-out infinite; z-index:0;
}
.slider3d-section .eyebrow { color:var(--c-vert); }
.slider3d-section .eyebrow::before { background:var(--g-logo); }
.slider3d-section .eyebrow::after  { background:var(--g-logo); }
.slider3d-section h2 { color:var(--c-bleu-nuit); }
.slider3d-section p  { color:var(--c-texte-doux); }

.slider3d-viewport {
    position:relative; height:clamp(420px,58vw,640px);
    perspective:1600px; display:flex;
    align-items:center; justify-content:center;
}
.slider3d-track { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; transform-style:preserve-3d; }
.slider3d-item {
    position:absolute; width:clamp(300px,44vw,580px);
    height:clamp(360px,50vw,600px); border-radius:var(--radius-lg);
    overflow:hidden; box-shadow:0 28px 64px rgba(0,0,0,.45);
    transition:transform .6s cubic-bezier(.25,.1,.25,1), opacity .6s ease, filter .6s ease;
    cursor:pointer;
}
.slider3d-item img {
    width:100%; height:100%; object-fit:cover;
    animation:slider3dKenBurns 14s ease-in-out infinite alternate;
}
.slider3d-caption {
    position:absolute; bottom:0; left:0; right:0;
    padding:20px 24px;
    background:linear-gradient(180deg,transparent,rgba(12,45,74,.85));
    color:#fff; font-family:var(--f-corps); font-size:1.05rem; font-weight:700;
}

/* Tampon logo + nom du docteur, façon cachet photographe */
.slider3d-stamp {
    position:absolute; top:16px; right:16px; z-index:2;
    display:flex; align-items:center; gap:8px;
    background:rgba(12,45,74,.55); backdrop-filter:blur(6px);
    padding:7px 14px 7px 8px; border-radius:999px;
    box-shadow:0 4px 16px rgba(0,0,0,.25);
}
.slider3d-stamp img { height:22px; width:auto; display:block; animation:none; }
.slider3d-stamp span {
    color:#fff; font-size:.74rem; font-weight:800; letter-spacing:.02em;
    white-space:nowrap;
}

@keyframes slider3dKenBurns {
    0%   { transform:scale(1); }
    100% { transform:scale(1.12); }
}

.slider3d-nav { display:flex; justify-content:center; gap:14px; margin-top:40px; }
.slider3d-nav button {
    width:50px; height:50px; border-radius:50%;
    border:2px solid var(--c-bordure); background:var(--c-blanc);
    color:var(--c-bleu-nuit); display:flex; align-items:center; justify-content:center;
    transition:var(--transition);
}
.slider3d-nav button:hover { background:var(--c-vert); border-color:var(--c-vert); color:#fff; }

@media(max-width:600px){
    .slider3d-item { width:84vw; height:400px; }
    .slider3d-stamp span { display:none; }
}