/* ============================================================
   DESIGN SYSTEM v3 — Cabinet Dr. EL BAKALI Fatima
   Palette exacte du logo : Vert #7DC242 + Bleu #29ABE2
   Concept : "Smile & Care" — Médical moderne, accueillant, familial
   Typo : Fraunces (serif aux courbes douces, évocatrices du sourire —
          chaleur et artisanat du soin) + Plus Jakarta Sans (géométrique,
          précis, lisible — rigueur clinique et technologie moderne)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500;1,600;1,700&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,600&display=swap');

:root {
    /* Couleurs logo exactes */
    --c-vert:        #7DC242;
    --c-vert-fonce:  #5DA830;
    --c-vert-clair:  #EEF7E2;
    --c-vert-pale:   #F5FBF0;

    --c-bleu:        #29ABE2;
    --c-bleu-fonce:  #1A87B8;
    --c-bleu-nuit:   #0C2D4A;
    --c-bleu-clair:  #E5F5FC;
    --c-bleu-pale:   #F0FAFE;

    /* Neutres */
    --c-blanc:       #FFFFFF;
    --c-fond:        #F8FCFE;
    --c-bordure:     #D6EAF5;
    --c-texte:       #1A2C3D;
    --c-texte-doux:  #5A7A92;

    /* Feedback */
    --c-succes:      #5DA830;
    --c-erreur:      #E74C3C;

    /* Typo */
    --f-display: 'Fraunces', Georgia, serif;
    --f-corps:   'Plus Jakarta Sans', 'Segoe UI', sans-serif;

    /* Espaces & rayons */
    --section-padding: clamp(64px, 9vw, 110px);
    --container-max:   1240px;
    --radius-sm:    8px;
    --radius-md:   14px;
    --radius-lg:   22px;
    --radius-xl:   36px;
    --radius-btn:  50px;
    --radius-card: 18px;

    /* Ombres colorées */
    --ombre-sm:  0 2px 12px rgba(41,171,226,.10);
    --ombre-md:  0 6px 28px rgba(41,171,226,.14);
    --ombre-lg:  0 14px 48px rgba(12,45,74,.16);
    --ombre-vert: 0 6px 24px rgba(125,194,66,.28);

    /* Alias rétrocompat */
    --ombre-douce:     var(--ombre-sm);
    --ombre-marquee:   var(--ombre-md);
    --c-pin-profond:   var(--c-bleu-nuit);
    --c-ivoire:        var(--c-fond);
    --c-or-champagne:  var(--c-vert);
    --c-emeraude:      var(--c-bleu);
    --c-emeraude-clair:var(--c-bleu-fonce);

    /* Gradients */
    --g-vert:  linear-gradient(135deg, #7DC242 0%, #5DA830 100%);
    --g-bleu:  linear-gradient(135deg, #29ABE2 0%, #1A87B8 100%);
    --g-logo:  linear-gradient(135deg, #29ABE2 0%, #7DC242 100%);
    --g-hero:  linear-gradient(160deg, #E5F5FC 0%, #EEF7E2 60%, #FFFFFF 100%);

    /* Transition */
    --transition:       0.28s cubic-bezier(.25,.1,.25,1);
    --transition-douce: var(--transition);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body { font-family:var(--f-corps); color:var(--c-texte); background:var(--c-blanc); line-height:1.65; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
ul { list-style:none; }

/* ── Typographie ── */
h1,h2,h3,h4 { font-family:var(--f-display); line-height:1.15; color:var(--c-bleu-nuit); }
h1 { font-size:clamp(2.2rem,5vw,3.8rem); font-weight:700; }
h2 { font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:700; }
h3 { font-size:clamp(1.1rem,1.8vw,1.45rem); font-weight:600; }
p  { color:var(--c-texte-doux); }

/* ── Layout ── */
.container { max-width:var(--container-max); margin:0 auto; padding:0 24px; }
.section { padding:var(--section-padding) 0; }
.section-alt  { background:var(--c-bleu-pale); }
.section-vert { background:var(--c-vert-pale); }
.section-header { max-width:660px; margin-bottom:56px; }
.section-header.centre { margin-left:auto; margin-right:auto; text-align:center; }

/* ── Eyebrow ── */
.eyebrow {
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--f-corps); font-size:.76rem; font-weight:800;
    letter-spacing:.12em; text-transform:uppercase;
    color:var(--c-vert); margin-bottom:14px;
}
.eyebrow::before {
    content:''; width:24px; height:2.5px;
    background:var(--g-logo); border-radius:2px; flex-shrink:0;
}
.section-header.centre .eyebrow { justify-content:center; }
.section-header.centre .eyebrow::before { display:none; }
.section-header.centre .eyebrow::after {
    content:''; width:24px; height:2.5px;
    background:var(--g-logo); border-radius:2px;
}

/* ── Boutons ── */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    padding:14px 30px; font-family:var(--f-corps); font-size:.95rem;
    font-weight:700; border-radius:var(--radius-btn);
    transition:var(--transition); white-space:nowrap; cursor:pointer; border:none;
}
.btn-primaire {
    background:var(--g-vert); color:#fff;
    box-shadow:0 4px 18px rgba(125,194,66,.38);
}
.btn-primaire:hover { transform:translateY(-2px); box-shadow:0 8px 26px rgba(125,194,66,.50); }

.btn-secondaire {
    background:transparent; color:var(--c-bleu-nuit);
    border:2.5px solid var(--c-bleu);
}
.btn-secondaire:hover { background:var(--c-bleu); color:#fff; transform:translateY(-2px); }

.btn-bleu {
    background:var(--g-bleu); color:#fff;
    box-shadow:0 4px 18px rgba(41,171,226,.32);
}
.btn-bleu:hover { transform:translateY(-2px); box-shadow:0 8px 26px rgba(41,171,226,.44); }

.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible { outline:3px solid var(--c-bleu); outline-offset:3px; }

/* ── Champs ── */
.champ { margin-bottom:18px; }
.champ label { display:block; font-size:.83rem; font-weight:700; color:var(--c-bleu-nuit); margin-bottom:7px; }
.champ input,.champ select,.champ textarea {
    width:100%; padding:13px 16px;
    border:2px solid var(--c-bordure); border-radius:var(--radius-md);
    font-family:inherit; font-size:.95rem;
    background:var(--c-blanc); color:var(--c-texte);
    transition:border-color .22s ease,box-shadow .22s ease;
}
.champ input:focus,.champ select:focus,.champ textarea:focus {
    border-color:var(--c-bleu);
    box-shadow:0 0 0 3px rgba(41,171,226,.16); outline:none;
}
.champ-erreur { color:var(--c-erreur); font-size:.78rem; margin-top:5px; display:none; }
.requis-etoile { color:var(--c-erreur); font-weight:700; }
.champ.invalide input,.champ.invalide select { border-color:var(--c-erreur); }
.champ.invalide .champ-erreur { display:block; }
.champ-tel-groupe { display:flex; gap:10px; }
.champ-tel-groupe select { flex:0 0 128px; text-overflow:ellipsis; }
.champ-tel-groupe input { flex:1; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }