/* ============================================================
   SINOPE SZKOŁA JAZDY — style.css
   Palette : bleu marine #0D1B2A + or #C9A84C
   Polices : Playfair Display (titres) + Source Sans 3 (corps)
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --navy:     #0D1B2A;
    --navy2:    #152336;
    --navy3:    #1E3248;
    --gold:     #C9A84C;
    --gold2:    #DFC07A;
    --gold3:    #F0D898;
    --white:    #F5F3EE;
    --offwhite: #EDEAE3;
    --gray:     #7A7D82;
    --gray2:    #B0B3B8;
    --red:      #C0392B;
    --green:    #1A7A4A;
    --orange:   #C47A1B;

    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body:    'Source Sans 3', 'Segoe UI', Arial, sans-serif;

    --radius-sm: 3px;
    --radius:    5px;
    --radius-lg: 10px;

    --shadow-sm: 0 2px 8px  rgba(13,27,42,.08);
    --shadow:    0 4px 20px rgba(13,27,42,.11);
    --shadow-lg: 0 10px 40px rgba(13,27,42,.15);

    --transition: .2s ease;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--font-body);
    background:  var(--offwhite);
    color:       var(--navy);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }

/* ── Typographie ───────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    line-height: 1.2;
    color: var(--navy);
}
.display-xl { font-size: clamp(2.6rem, 5.5vw, 4.4rem); font-weight: 700; }
.display-lg { font-size: clamp(2rem,   4vw,   3.2rem); font-weight: 700; }
.display-md { font-size: clamp(1.5rem, 3vw,   2.2rem); font-weight: 700; }
.display-sm { font-size: clamp(1.1rem, 2vw,   1.5rem); font-weight: 700; }

.text-gold { color: var(--gold); font-style: normal; }
.text-gray { color: var(--gray); }

/* ── Layout ────────────────────────────────────────────────── */
.container {
    max-width: 1180px;
    margin:    0 auto;
    padding:   0 28px;
}
.section-pad    { padding: 80px 0; }
.section-pad-sm { padding: 52px 0; }

/* ── Section label / divider ────────────────────────────────── */
.section-label {
    display:        inline-block;
    font-size:      .7rem;
    font-weight:    700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color:          var(--gold);
    margin-bottom:  12px;
}
.section-divider {
    width:         56px;
    height:        3px;
    background:    var(--gold);
    border-radius: 2px;
    margin-top:    14px;
}

/* ── Boutons ───────────────────────────────────────────────── */
.btn {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    font-family:    var(--font-body);
    font-weight:    700;
    font-size:      .83rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding:        12px 26px;
    border-radius:  var(--radius);
    border:         none;
    cursor:         pointer;
    transition:     background var(--transition), color var(--transition),
                    box-shadow var(--transition), transform var(--transition);
    white-space:    nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--gold); color: var(--navy); }
.btn-primary:hover {
    background: var(--gold2);
    box-shadow: 0 4px 16px rgba(201,168,76,.35);
}

.btn-outline {
    background: transparent;
    color:      var(--white);
    border:     1.5px solid rgba(245,243,238,.35);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

.btn-dark { background: var(--navy); color: var(--gold); }
.btn-dark:hover { background: var(--navy2); }

.btn-sm { padding: 8px 18px;  font-size: .75rem; }
.btn-lg { padding: 15px 36px; font-size: .9rem;  }

/* ── Cards ─────────────────────────────────────────────────── */
.card {
    background:    #fff;
    border-radius: var(--radius);
    box-shadow:    var(--shadow);
    overflow:      hidden;
}
.card-gold-top  { border-top:  3px solid var(--gold); }
.card-gold-left { border-left: 4px solid var(--gold); }

/* ── Formulaires ───────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }

.form-label {
    display:        block;
    font-size:      .76rem;
    font-weight:    700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color:          var(--navy);
    margin-bottom:  7px;
}
.form-label .req { color: var(--gold); }

.form-control {
    width:         100%;
    border:        1.5px solid var(--offwhite);
    border-radius: var(--radius);
    padding:       11px 15px;
    font-family:   var(--font-body);
    font-size:     .9rem;
    color:         var(--navy);
    background:    #fff;
    outline:       none;
    transition:    border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus {
    border-color: var(--gold);
    box-shadow:   0 0 0 3px rgba(201,168,76,.12);
}
.form-control::placeholder { color: var(--gray2); }
textarea.form-control      { min-height: 120px; resize: vertical; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ── Badges statuts ─────────────────────────────────────────── */
.badge {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    font-size:     .72rem;
    font-weight:   700;
    padding:       4px 11px;
    border-radius: 20px;
    border:        1px solid transparent;
}
.badge-reussi  { background: rgba(26,122,74,.1);  color: var(--green);  border-color: rgba(26,122,74,.25);  }
.badge-echec   { background: rgba(192,57,43,.09); color: var(--red);    border-color: rgba(192,57,43,.25);  }
.badge-attente { background: rgba(196,122,27,.1); color: var(--orange); border-color: rgba(196,122,27,.25); }

/* ── Alertes ───────────────────────────────────────────────── */
.alert {
    padding:       14px 18px;
    border-radius: var(--radius);
    font-size:     .87rem;
    margin-bottom: 20px;
    border:        1px solid transparent;
}
.alert-success { background: rgba(26,122,74,.08);  color: var(--green); border-color: rgba(26,122,74,.3);  }
.alert-error   { background: rgba(192,57,43,.07);  color: var(--red);   border-color: rgba(192,57,43,.28); }
.alert-info    { background: rgba(201,168,76,.08); color: var(--navy);  border-color: rgba(201,168,76,.3); }

/* ── Page hero (pages internes) ─────────────────────────────── */
.page-hero {
    background:    var(--navy);
    border-bottom: 2px solid var(--gold);
    padding:       56px 0 52px;
}
.page-hero .section-label { display: block; }
.page-hero h1 {
    font-family: var(--font-display);
    font-size:   clamp(1.9rem, 4vw, 3rem);
    font-weight: 700;
    color:       var(--white);
    margin-top:  10px;
}
.page-hero p {
    color:      var(--gray2);
    font-size:  .95rem;
    margin-top: 12px;
    max-width:  560px;
}

/* ── CTA band ───────────────────────────────────────────────── */
.cta-band {
    background:    var(--navy);
    border-top:    2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
}
.cta-band-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             32px;
    padding:         52px 0;
    flex-wrap:       wrap;
}
.cta-band h2 {
    font-family: var(--font-display);
    font-size:   clamp(1.3rem, 2.5vw, 1.9rem);
    color:       var(--white);
}
.cta-band p { color: var(--gray); font-size: .88rem; margin-top: 6px; }

/* ── Reveal animation ───────────────────────────────────────── */
.reveal {
    opacity:    0;
    transform:  translateY(22px);
    transition: opacity .55s ease, transform .55s ease;
}
.reveal.revealed { opacity: 1; transform: none; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .form-row       { grid-template-columns: 1fr; }
    .cta-band-inner { flex-direction: column; text-align: center; }
    .section-pad    { padding: 56px 0; }
}
@media (max-width: 480px) {
    .container { padding: 0 18px; }
}