/* Base styles */
body {
    font-family: 'Montserrat', Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #f8f9fa;
}
header {
    background-color: #002f5a;
    color: #fff;
    padding: 10px 20px;
    position: relative; /* allow absolutely positioned nav on mobile */
}
header h1 {
    margin: 0;
    font-size: 24px;
    display: inline-block;
}

/* Logo styling */
.logo {
    height: 50px;
    width: auto;
    margin-right: 15px;
    vertical-align: middle;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
nav li {
    margin-right: 15px;
}
nav a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}
nav a:hover {
    text-decoration: underline;
}

/* Dropdown navigation styles */
nav ul li.dropdown {
    position: relative;
}
/* Nested menu hidden by default */
nav ul li.dropdown .dropdown-menu {
    display: none;
    position: absolute;
    background-color: #002f5a;
    padding: 10px 0;
    list-style: none;
    margin: 0;
    min-width: 200px;
    z-index: 1000;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* Show dropdown on hover */
nav ul li.dropdown:hover > .dropdown-menu {
    display: block;
}
nav ul li.dropdown .dropdown-menu li {
    margin: 0;
}
nav ul li.dropdown .dropdown-menu a {
    display: block;
    padding: 8px 15px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}
nav ul li.dropdown .dropdown-menu a:hover {
    background-color: #004785;
}

/* Grade illustration section */
.grade-illustration {
    padding: 60px 20px;
    background-color: #f6f9fc;
    text-align: center;
}
.grade-illustration img {
    max-width: 320px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin: 0 auto;
}

/* Timeline styles for About page */
.timeline {
    position: relative;
    margin: 60px auto;
    max-width: 800px;
    padding-left: 20px;
    border-left: 3px solid #004785;
}
.timeline-item {
    position: relative;
    padding-left: 20px;
    margin-bottom: 30px;
}
.timeline-item::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #cba42b;
    border: 2px solid #fff;
}
.timeline-item .date {
    font-weight: 700;
    color: #004785;
    margin-bottom: 5px;
    display: block;
}
.timeline-item p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

/* Burger icon styles for mobile navigation */
.burger {
    display: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin-left: auto;
}
.burger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 4px 0;
    transition: all 0.3s ease;
}

/* Navigation menu hidden by default on mobile; toggled via the 'open' class */
@media (max-width: 768px) {
    .burger {
        display: block;
    }
    nav {
        display: none;
        flex-direction: column;
        background-color: #002f5a;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 999;
    }
    nav.open {
        display: flex;
    }
    nav ul {
        flex-direction: column;
        padding: 10px 0;
    }
    nav li {
        margin: 10px 0;
        text-align: center;
    }
}
main {
    padding: 20px;
}
/* Hero section */
/*
 * Hero section
 * We overlay a semi‑transparent gradient on top of a background illustration
 * to maintain text readability while bringing in visual interest. The image
 * file `hero.png` depicts students studying together, matching our brand
 * colours (navy and gold). It’s set to cover the entire container and
 * centred so the illustration remains visible on most screens.
 */
.hero {
    /* L’image de fond est assombrie par un dégradé semi‑transparent pour laisser apparaître les détails tout en assurant la lisibilité du texte. */
    background: linear-gradient(rgba(0, 47, 90, 0.7), rgba(0, 47, 90, 0.7)),
        url('hero.jpg') center/cover no-repeat;
    color: #fff;
    padding: 80px 20px;
    text-align: center;
}
.hero-content {
    max-width: 700px;
    margin: 0 auto;
}
.hero h2 {
    margin-top: 0;
    font-size: 48px;
}
.hero p {
    margin: 20px 0 30px;
    font-size: 20px;
    line-height: 1.5;
}
/* Keep some spacing for legacy sections on other pages */
.offer, .details, .cta, .contact-form {
    margin-bottom: 40px;
}
.cards {
    display: flex;
    flex-wrap: wrap;
}
.card {
    flex: 1 1 30%;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card h4 {
    margin-top: 0;
}
.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #cba42b;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
}
.btn:hover {
    background-color: #b58e21;
}
.btn-secondary {
    display: inline-block;
    padding: 8px 15px;
    background-color: #e0e6ed;
    color: #004785;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 10px;
}
.btn-secondary:hover {
    background-color: #ccd7e3;
}
footer {
    background-color: #002f5a;
    color: #fff;
    text-align: center;
    padding: 15px 0;
}

/* Services section */
.services {
    padding: 60px 20px;
    text-align: center;
}
.services h3 {
    font-size: 28px;
    margin-bottom: 30px;
}
.service-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
.service-card {
    flex: 1 1 300px;
    background-color: #fff;
    border-radius: 8px;
    padding: 30px 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-align: center;
}
.service-card i {
    font-size: 40px;
    color: #004785;
    margin-bottom: 15px;
}
.service-card h4 {
    margin-top: 0;
    font-size: 22px;
}
.service-card p {
    margin: 15px 0 20px;
}

/* Advantages section highlighting unique selling points */
.advantages {
    padding: 60px 20px;
    background-color: #f6f9fc;
    text-align: center;
}
.advantages h3 {
    font-size: 28px;
    margin-bottom: 30px;
}
.advantage-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
.advantage-card {
    flex: 1 1 260px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 30px 20px;
    text-align: center;
}
.advantage-card i {
    font-size: 40px;
    color: #004785;
    margin-bottom: 15px;
}
.advantage-card h4 {
    margin-top: 0;
    font-size: 20px;
    color: #004785;
}
.advantage-card p {
    font-size: 16px;
    line-height: 1.4;
}

/* Numbers/statistics section for impact figures */
.numbers {
    padding: 60px 20px;
    background-color: #eef5fa;
    text-align: center;
}
.numbers h3 {
    font-size: 28px;
    margin-bottom: 30px;
}
.number-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
.number-card {
    flex: 1 1 180px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 30px 20px;
    text-align: center;
}
.number-card .number {
    display: block;
    font-size: 42px;
    font-weight: 700;
    color: #004785;
    margin-bottom: 10px;
}
.number-card p {
    margin: 0;
    font-size: 16px;
    color: #555;
}

/* FAQ preview section with collapsible details */
.faq-preview {
    padding: 60px 20px;
    background-color: #fdfdfd;
    max-width: 900px;
    margin: 0 auto;
}
.faq-preview h3 {
    font-size: 28px;
    text-align: center;
    margin-bottom: 30px;
}
.faq-preview details {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 15px;
    padding: 15px 20px;
    cursor: pointer;
}
.faq-preview summary {
    font-weight: 600;
    color: #004785;
    outline: none;
}
.faq-preview summary::marker {
    font-weight: bold;
}
.faq-preview p {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.5;
}

/* About preview */
.about-preview {
    padding: 60px 20px;
    background-color: #fdfdfd;
}
.about-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}
.about-text {
    flex: 1 1 60%;
}
.about-text h3 {
    font-size: 28px;
}
.about-text p {
    font-size: 18px;
    line-height: 1.6;
}
.about-image {
    flex: 1 1 40%;
    text-align: center;
}
.about-image img {
    max-width: 200px;
    border-radius: 8px;
}

/* Styling for the portrait photo of the professeur */
.about-photo {
    max-width: 280px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    background-color: #f6f9fc;
}
.about-photo img {
    width: 100%;
    height: auto;
    display: block;
}

/* Testimonials preview */
.testimonials-preview {
    background-color: #eef5fa;
    padding: 60px 20px;
    text-align: center;
}
.testimonials-preview h3 {
    font-size: 28px;
    margin-bottom: 30px;
}
.testimonial-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
.testimonial-card {
    flex: 1 1 300px;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-align: left;
}
.testimonial-card .stars {
    color: #f5c518;
    margin-bottom: 10px;
}
.testimonial-card p {
    font-style: italic;
    margin-bottom: 10px;
}
.testimonial-card .author {
    font-weight: 600;
    color: #004785;
}

/* Call to action contact */
.cta-contact {
    background-color: #002f5a;
    color: #fff;
    padding: 60px 20px;
    text-align: center;
}
.cta-contact h3 {
    font-size: 32px;
    margin: 0 0 20px;
}
.cta-contact p {
    font-size: 18px;
    margin-bottom: 30px;
}
.cta-contact .btn {
    background-color: #cba42b;
    color: #fff;
}

.contact-form form {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    margin: 0 auto;
}
.contact-form label {
    margin-top: 10px;
    font-weight: bold;
}
.contact-form input,
.contact-form textarea {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 5px;
}
.contact-form button {
    margin-top: 15px;
}

/* Testimonials section */
.testimonials {
    background-color: #eef3f8;
    padding: 20px;
    border-left: 4px solid #004785;
    border-radius: 8px;
    margin-bottom: 40px;
}
.testimonials p {
    margin-bottom: 20px;
}

/* Responsive styles */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
    }
    .cards {
        flex-direction: column;
    }
    .card {
        flex: 1 1 100%;
    }

    /* Responsive adjustments for new sections */
    .service-card {
        flex: 1 1 100%;
    }
    .testimonial-card {
        flex: 1 1 100%;
    }
    .about-content {
        flex-direction: column;
        text-align: center;
    }
    .about-image {
        margin-top: 30px;
    }
}

/* Additional responsive tweaks to improve mobile layout */
@media (max-width: 768px) {
    /* Centre align header elements and reduce spacing */
    header {
        text-align: center;
    }
    header h1 {
        display: block;
        margin: 10px 0;
        font-size: 22px;
    }
    .logo {
        height: 40px;
        width: auto;
        margin: 0 auto 10px;
        display: block;
    }
    nav li {
        margin: 8px 0;
    }
    /* Reduce hero section spacing and typography */
    .hero {
        padding: 50px 20px;
    }
    .hero h2 {
        font-size: 36px;
    }
    .hero p {
        font-size: 16px;
    }
    .btn {
        padding: 8px 16px;
        font-size: 16px;
    }
    .btn-secondary {
        padding: 6px 12px;
        font-size: 14px;
    }
    /* Adjust numbers section text sizes */
    .number-card .number {
        font-size: 36px;
    }
    .number-card p {
        font-size: 14px;
    }
    /* Reduce titles and paragraph sizes in various sections */
    .services h3,
    .advantages h3,
    .numbers h3,
    .faq-preview h3,
    .testimonials-preview h3 {
        font-size: 24px;
    }
    .service-card h4,
    .advantage-card h4 {
        font-size: 20px;
    }
    .service-card p,
    .advantage-card p {
        font-size: 14px;
    }
    /* About preview text adjustments */
    .about-text h3 {
        font-size: 24px;
    }
    .about-text p {
        font-size: 16px;
    }
}

/* Styles for qualifications and training section */
.qualifications {
    padding: 60px 20px;
    background-color: #f6f9fc;
    text-align: center;
}
.qualifications h3 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #004785;
}
.qualifications ul {
    list-style: none;
    padding: 0;
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}
.qualifications li {
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 1.5;
    position: relative;
    padding-left: 25px;
}
.qualifications li::before {
    content: "\f058"; /* Font Awesome check-circle icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0;
    color: #004785;
}
.qualifications p {
    max-width: 800px;
    margin: 20px auto 0;
    font-size: 16px;
    line-height: 1.6;
}


/* --- Added by ChatGPT (global helpers) --- */
.whatsapp-float{ position:fixed; right:18px; bottom:18px; z-index:9999; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,.18); }
.whatsapp-float i{ font-size:26px; }
.whatsapp-float:hover{ transform:translateY(-1px); opacity:.95; }
.mobile-cta-bar{ position:fixed; left:0; right:0; bottom:0; z-index:9998; display:none; gap:8px; padding:10px; background:rgba(255,255,255,.96); border-top:1px solid rgba(0,0,0,.08); backdrop-filter:saturate(180%) blur(8px); }
.mobile-cta-bar a{ flex:1; text-align:center; padding:12px 10px; border-radius:10px; text-decoration:none; font-weight:600; border:1px solid rgba(0,0,0,.08); }
.mobile-cta-bar a i{ margin-right:8px; }
.mobile-cta-call{ background:#f3f4f6; color:#111827; }
.mobile-cta-wa{ background:#25D366; color:#fff; }
.mobile-cta-diag{ background:#2563eb; color:#fff; }
@media (max-width: 768px){ .mobile-cta-bar{ display:flex; } body{ padding-bottom:76px; } }
.container.narrow{ max-width: 1100px; margin: 0 auto; padding: 24px; }
.hero.slim{ padding: 24px 0 8px; }
.pricing-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin: 12px 0 24px;}
.pricing-card{ background:#fff; border-radius:14px; padding:20px; box-shadow:0 8px 26px rgba(0,0,0,.06); }
.pricing-card h2{ margin-top:0; }
.features{ padding-left:16px; }
.btn-primary{ display:inline-block; margin-top:12px; padding:12px 16px; background:#2563eb; color:#fff; border-radius:10px; text-decoration:none; font-weight:600;}
@media (max-width: 900px){ .pricing-grid{ grid-template-columns: 1fr; } }
.testi-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:12px; }
.testi-card{ background:#fff; border-radius:14px; padding:16px; box-shadow:0 8px 22px rgba(0,0,0,.06); }
.testi-card h4{ margin:0 0 6px 0; font-size:1rem; }
@media (max-width: 900px){ .testi-grid{ grid-template-columns: 1fr; } }
.badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; font-weight:600; font-size:.92rem; }
.badge.tax{ background:#ecfdf5; color:#065f46; border:1px solid #10b98133; }
.badge i{ font-size:1rem; }
.faq-item{ background:#fff; border-radius:12px; padding:14px; box-shadow:0 6px 18px rgba(0,0,0,.05); margin:10px 0; }
.faq-item h3{ margin:0 0 6px 0; font-size:1.05rem; }
.btn-primary.nav-cta{ margin-left:12px; padding:10px 14px; background:#2563eb; color:#fff; border-radius:10px; text-decoration:none; font-weight:600; }
.btn-primary.nav-cta:hover{ opacity:.95; }
/* Cookie banner */
.cookie-banner{ position:fixed; left:12px; right:12px; bottom:12px; z-index:99999; background:#111827; color:#fff; padding:14px; border-radius:12px; display:none; }
.cookie-banner .actions{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }
.cookie-banner .actions button{ padding:10px 14px; border-radius:10px; border:none; cursor:pointer; font-weight:600; }
.cookie-accept{ background:#10b981; color:#fff; }
.cookie-more{ background:#374151; color:#fff; }
@media (max-width: 640px){ .cookie-banner{ font-size:.95rem; } }


/* Proof banner (soft) */
.proof-banner{
  position: relative; z-index: 2;
  background: linear-gradient(90deg,#0ea5e9,#22c55e);
  color:#fff; text-align:center; padding:10px 12px; font-weight:700;
  letter-spacing:.2px; box-shadow:0 6px 22px rgba(0,0,0,.12);
  border-radius:12px; margin-top:12px;
}
.proof-banner .inner{ display:flex; gap:16px; justify-content:center; align-items:center; flex-wrap:wrap; }
.proof-badge{ display:inline-flex; gap:8px; align-items:center; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); padding:6px 10px; border-radius:999px; }

/* Safe counters (static) */
.metrics-safe{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:12px; }
.metric-safe{ background:#fff; border-radius:14px; padding:16px; text-align:center; box-shadow:0 8px 22px rgba(0,0,0,.06); }
.metric-safe .num{ font-size: clamp(28px,3vw,40px); font-weight:800; }
.metric-safe .label{ color:#374151; margin-top:4px; }
@media (max-width: 900px){ .metrics-safe{ grid-template-columns: 1fr; } }

/* Chatbot widget */
.chatbot-bubble{
  position:fixed; right:18px; bottom:90px; z-index:9999;
  width:56px; height:56px; border-radius:50%; background:#2563eb; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,.18);
  cursor:pointer;
}
.chatbot-bubble i{ font-size:22px; }
.chatbot-window{
  position:fixed; right:18px; bottom:156px; z-index:9999; width:340px; max-width:calc(100vw - 28px);
  background:#fff; border-radius:16px; box-shadow:0 18px 40px rgba(2,6,23,.22); display:none; overflow:hidden;
  border:1px solid rgba(15,23,42,.06);
}
.chatbot-header{
  background:linear-gradient(90deg,#2563eb,#22c55e); color:#fff; padding:12px 14px; display:flex; align-items:center; justify-content:space-between;
}
.chatbot-header .title{ font-weight:800; }
.chatbot-body{ padding:12px; max-height:60vh; overflow:auto; }
.chatbot-row{ margin-bottom:10px; }
.chatbot-row label{ display:block; font-weight:700; margin-bottom:6px; }
.chatbot-row .btns{ display:flex; gap:8px; flex-wrap:wrap; }
.chatbot-row .btn{ padding:8px 10px; border-radius:10px; border:1px solid #e5e7eb; background:#f9fafb; cursor:pointer; }
.chatbot-actions{ display:flex; gap:8px; }
.chatbot-actions a, .chatbot-actions button{ flex:1; text-align:center; padding:10px; border-radius:10px; font-weight:700; text-decoration:none; border:none; cursor:pointer; }
.btn-wa{ background:#25D366; color:#fff; }
.btn-cal{ background:#2563eb; color:#fff; }
.btn-alt{ background:#f3f4f6; color:#111827; }
.chatbot-faq{ margin-top:8px; border-top:1px solid #e5e7eb; padding-top:8px; }
.faq-item{ background:#fff; border-radius:10px; padding:10px; border:1px solid #e5e7eb; margin:8px 0; }
.faq-item b{ display:block; margin-bottom:4px; }
.chatbot-close{ background:transparent; border:none; color:#fff; font-size:18px; cursor:pointer; }
@media (max-width: 480px){
  .chatbot-window{ right:8px; left:8px; width:auto; bottom:100px; }
}


/* Count-up suffix spacing */
.metrics-safe .num .suffix{ padding-left: 2px; font-weight: 800; }


/* === MOBILE POLISH === */
@media (max-width: 768px){
  /* Container padding */
  .container, .container.narrow{ padding: 16px; }

  /* Hero video section */
  .hero-video{ min-height: 56vh; border-radius: 12px; }
  .hero-video .content{ padding: 18px; }
  .hero-video .title{ font-size: clamp(22px, 6vw, 32px); }
  .hero-video .subtitle{ font-size: 14px; }
  .hero-video .cta{ flex-direction: column; gap: 8px; }
  .hero-video .cta a{ width: 100%; text-align: center; padding: 12px; }

  /* Safe metrics spacing */
  .metrics-safe{ grid-template-columns: 1fr; gap: 12px; }
  .metric-safe{ padding: 14px; }

  /* Navigation spacing (if present) */
  .nav a.btn-primary.nav-cta{ padding: 10px 12px; }

  /* Chatbot & WhatsApp floats: avoid overlap */
  .whatsapp-float{ right: 18px; bottom: 18px; }
  .chatbot-bubble{ right: 86px; bottom: 18px; } /* move left of WhatsApp on mobile */
  .chatbot-window{ right: 8px; left: 8px; bottom: 90px; width: auto; }

  /* Cookie banner above mobile CTA bar */
  .cookie-banner{ bottom: 76px; }

  /* RDV page embed height */
  .rdv-grid{ grid-template-columns: 1fr !important; }
  .rdv-grid iframe{ height: 520px !important; }
}

/* Extra-small phones */
@media (max-width: 380px){
  .hero-video .title{ font-size: 20px; }
  .hero-video .subtitle{ font-size: 13px; }
  .chatbot-bubble{ right: 74px; bottom: 16px; }
  .whatsapp-float{ right: 16px; bottom: 16px; }
}

/* Improve focus visible for accessibility on mobile */
a:focus-visible, button:focus-visible{ outline: 3px solid #93c5fd; outline-offset: 2px; border-radius: 8px; }