/* =========================
   Variables / thème
   ========================= */
   :root{
    --couleur-primaire:#6BA8D1;
    --couleur-accent:#BFCFB8;
    --couleur-texte:#1E2A38;
  
    --fond-clair:#FAFAFA;
    --fond-blanc:#FFFFFF;
    --fond-alt:#F3F5F2;
  
    --rayon-bord:14px;
  
    /* UI */
    --border-soft: rgba(0,0,0,0.06);
    --shadow-soft: 0 4px 12px rgba(0,0,0,0.10);
    --shadow-hover: 0 6px 18px rgba(0,0,0,0.18);
  
    /* Boutons */
    --btn-bg:#E7E3DC;
    --btn-text:#1E2A38;
  
    /* Créneaux */
    --slot-bg: var(--fond-blanc);
    --slot-border: rgba(0,0,0,0.08);
  
    --slot-selected-bg: rgba(107,168,209,0.14);
    --slot-selected-border: rgba(107,168,209,0.9);
  
    /* Créneau pris */
    --slot-taken-bg: #94a3b8;
    --slot-taken-text: #1e293b;
    --slot-taken-border: #64748b;
  
    /* Titres */
    --title-color: var(--couleur-texte);
    --title-tracking: -0.02em;
  
    --h1-size: 2.1rem;
    --h2-size: 1.7rem;
    --h3-size: 1.12rem;
  }
  
  /* =========================
     Base
     ========================= */
  *{ box-sizing:border-box; }
  
  html, body{ height:100%; }
  
  body{
    margin:0;
    font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--fond-clair);
    color:var(--couleur-texte);
    line-height:1.6;
  }
  
  .container{
    max-width:1100px;
    margin:0 auto;
    padding:0 16px;
    width:100%;
  }
  
  a{ color:inherit; }
  
  img, video, iframe{
    max-width:100%;
    height:auto;
  }
  
  /* Utilitaire accessibilité */
  .sr-only{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0);
    border:0;
  }
  
  /* =========================
     Header / navigation
     ========================= */
  .header{
    background:var(--fond-blanc);
    border-bottom:1px solid var(--border-soft);
    position:sticky;
    top:0;
    z-index:10;
  }
  
  .header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px 16px;
  }
  
  .logo{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
  }
  
  .logo-mark{
    width:38px;
    height:38px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--couleur-primaire),var(--couleur-accent));
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:1.4rem;
    color:#000;
    box-shadow:0 2px 6px rgba(0,0,0,0.10);
    transition:transform .15s ease-out, box-shadow .15s ease-out;
  }
  
  .header:hover .logo-mark{
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(0,0,0,0.18);
  }
  
  .logo-text{
    display:flex;
    flex-direction:column;
    line-height:1.1;
  }
  
  .logo-title{
    font-weight:700;
    font-size:1.05rem;
  }
  
  .logo-subtitle{
    font-size:.8rem;
    color:rgba(30,42,56,0.7);
  }
  
  /* --- NAV (desktop) --- */
  .nav{
    display:flex;
    align-items:center;
    gap:12px;
  }
  
  /* Bouton burger (caché desktop) */
  .nav-toggle{
    display:none;
    appearance:none;
    border:1px solid rgba(0,0,0,0.10);
    background:var(--fond-blanc);
    border-radius:12px;
    padding:10px 12px;
    cursor:pointer;
    box-shadow:0 2px 6px rgba(0,0,0,0.06);
  }
  
  .nav-toggle:active{ transform:translateY(1px); }
  
  .burger{
    display:inline-block;
    width:22px;
    height:14px;
    position:relative;
  }
  
  .burger::before,
  .burger::after,
  .burger span{
    content:"";
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    border-radius:999px;
    background:rgba(30,42,56,0.9);
    transition:transform .18s ease, top .18s ease, opacity .18s ease;
  }
  
  .burger::before{ top:0; }
  .burger span{ top:6px; }
  .burger::after{ top:12px; }
  
  /* Liens nav */
  .nav-links{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }
  
  .nav-links a{
    text-decoration:none;
    font-size:.95rem;
    color:var(--couleur-texte);
    padding:6px 8px;
    border-radius:999px;
  }
  
  .nav-links a:hover{ color:var(--couleur-primaire); }
  
  /* État ouvert (piloté par JS via .is-open sur .nav) */
  .nav.is-open .nav-links{ display:flex; }
  .nav.is-open .burger::before{ top:6px; transform:rotate(45deg); }
  .nav.is-open .burger span{ opacity:0; }
  .nav.is-open .burger::after{ top:6px; transform:rotate(-45deg); }
  
  /* =========================
     Titres (H1 / H2 / H3) - global
     ========================= */
  h1, h2, h3{
    color: var(--title-color);
    letter-spacing: var(--title-tracking);
    line-height: 1.15;
    margin: 0 0 10px;
  }
  
  h1{
    font-size: var(--h1-size);
    font-weight: 750;
  }
  
  h2{
    font-size: var(--h2-size);
    font-weight: 700;
  }
  
  h3{
    font-size: var(--h3-size);
    font-weight: 650;
  }
  
  /* =========================
     Sections
     ========================= */
  .section{ padding:40px 0; }
  .section-alt{ background:var(--fond-alt); }
  
  .section-intro{
    margin:0 0 24px;
    font-size:.98rem;
    max-width:700px;
  }
  
  /* =========================
     Hero
     ========================= */
  .hero{
    background:linear-gradient(135deg, rgba(107,168,209,0.12), rgba(191,207,184,0.25));
    padding:48px 0 40px;
  }
  
  .hero-content{
    display:flex;
    flex-direction: row;
    align-items:center;
    justify-content:space-between;
    gap:30px;
  }
  
  .hero-img{
    width:500px;
    max-width:100%;
    border-radius:12px;
    margin-left:40px;
    box-shadow:0 4px 14px rgba(0,0,0,0.15);
    object-fit:cover;
  }
  
  .hero h1{ font-size:2rem; margin:0 0 12px; }
  .hero p{ font-size:1rem; margin:0 0 20px; }
  
  /* =========================
     Buttons
     ========================= */
  .btn-primary{
    background:var(--btn-bg);
    color:var(--btn-text);
    border:none;
    padding:12px 22px;
    border-radius:999px;
    cursor:pointer;
    font-weight:600;
    font-size:.95rem;
    transition:transform .12s ease-out, box-shadow .12s ease-out, opacity .12s ease-out;
    box-shadow:0 3px 6px rgba(0,0,0,0.06);
  }
  
  .btn-primary:hover{
    opacity:.9;
    transform:translateY(-2px);
    box-shadow:0 6px 12px rgba(0,0,0,0.12);
  }
  
  /* =========================
     Cards / grids
     ========================= */
  .cards{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:16px;
  }
  
  .card{
    background:var(--fond-blanc);
    border-radius:var(--rayon-bord);
    padding:18px 18px 20px;
    box-shadow:0 4px 12px rgba(0,0,0,0.10), 0 0 8px rgba(0,0,0,0.08);
    font-size:.95rem;
    transition:transform .15s ease-out, box-shadow .15s ease-out;
  }
  
  .card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-hover), 0 0 10px rgba(0,0,0,0.15);
  }
  
  .price{
    font-weight:700;
    color:var(--couleur-primaire);
    margin:6px 0 10px;
  }
  
  /* Tarifs layout */
  .tarifs-layout{
    display:flex;
    align-items:flex-start;
    gap:40px;
    flex-wrap:wrap;
  }
  
  .tarifs-img{
    width:380px;
    max-width:100%;
    border-radius:12px;
    box-shadow:0 4px 14px rgba(0,0,0,0.15);
    object-fit:cover;
  }
  
  .tarifs-content{ flex:1; min-width:280px; }
  
  .offre-speciale{
    background:var(--btn-bg);
    border-left:4px solid var(--couleur-primaire);
    padding:16px 20px;
    border-radius:10px;
    margin:30px 0 10px;
    font-size:.95rem;
    box-shadow:0 4px 10px rgba(0,0,0,0.08);
  }
  
  .offre-gratuite{
    background:var(--fond-alt);
    border-left:4px solid var(--couleur-accent);
    padding:16px 20px;
    border-radius:10px;
    margin:20px 0;
    font-size:.95rem;
    box-shadow:0 4px 10px rgba(0,0,0,0.06);
  }
  
  /* ===== Packs mensuels (si utilisés) ===== */
  .cards.packs{ margin-top:14px; }
  .pack-card{ position:relative; }
  
  .pack-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  
  .pack-tag{
    font-size:0.75rem;
    padding:6px 10px;
    border-radius:999px;
    background: rgba(107,168,209,0.12);
    border: 1px solid rgba(107,168,209,0.35);
    font-weight:600;
  }
  
  .pack-list{
    margin:10px 0 12px;
    padding-left:18px;
  }
  
  .pack-list li{ margin:6px 0; }
  
  .pack-note{
    font-size:0.9rem;
    color:rgba(30,42,56,0.85);
    margin-bottom:12px;
  }
  
  .btn-pack{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:100%;
    text-decoration:none;
    background:#E7E3DC;
    color:#1E2A38;
    border-radius:999px;
    padding:12px 16px;
    font-weight:700;
    border:1px solid rgba(0,0,0,0.06);
    box-shadow:0 3px 6px rgba(0,0,0,0.06);
  }
  
  .btn-pack:hover{
    opacity:0.92;
    transform:translateY(-1px);
  }
  
  .pack-featured{
    border:2px solid rgba(107,168,209,0.45);
    background:linear-gradient(135deg, rgba(107,168,209,0.08), rgba(191,207,184,0.12));
  }
  
  .pack-badge{
    position:absolute;
    top:12px;
    right:12px;
    background: rgba(107,168,209,0.18);
    border: 1px solid rgba(107,168,209,0.35);
    padding:6px 10px;
    border-radius:999px;
    font-size:0.75rem;
    font-weight:700;
  }
  
  /* Témoignages */
  .quote{ font-style:italic; margin:0 0 10px; }
  .author{ font-weight:600; color:var(--couleur-primaire); font-size:.9rem; }
  
  /* Témoignages avec avatars */
  .testimonial{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  
  .testimonial-header{
    display:flex;
    align-items:center;
    gap:12px;
  }
  
  .testimonial-header img{
    width:52px;
    height:52px;
    border-radius:999px;
    object-fit:cover;
    object-position:center top;
  }
  
  .testimonial .author{
    margin:0;
    font-weight:700;
    color:var(--couleur-texte);
  }
  
  .testimonial .role{
    margin:0;
    font-size:0.82rem;
    color:rgba(30,42,56,0.65);
  }
  
  /* =========================
     Form
     ========================= */
  .contact-form{
    background:var(--fond-blanc);
    padding:20px;
    border-radius:var(--rayon-bord);
    box-shadow:0 4px 12px rgba(0,0,0,0.03);
    max-width:650px;
    width:100%;
  }
  
  .form-group{ margin-bottom:16px; }
  
  .form-group label{
    display:block;
    font-size:.9rem;
    margin-bottom:4px;
  }
  
  .form-group input,
  .form-group textarea{
    width:100%;
    padding:10px 12px;
    border-radius:8px;
    border:1px solid #D1D5DB;
    font:inherit;
  }
  
  .form-group input:focus,
  .form-group textarea:focus{
    outline:none;
    border-color:var(--couleur-primaire);
    box-shadow:0 0 0 1px rgba(107,168,209,0.25);
  }
  
  .form-note{
    margin-top:12px;
    font-size:.8rem;
    color:#6B7280;
  }
  
  /* Feedback */
  .form-feedback{
    margin-top:12px;
    font-size:.95rem;
    padding:10px 12px;
    border-radius:10px;
    background:var(--fond-alt);
    border:1px solid var(--border-soft);
  }
  .form-feedback.success{ border-left:4px solid #16a34a; }
  .form-feedback.error{ border-left:4px solid #dc2626; }
  .form-feedback.info{ border-left:4px solid var(--couleur-primaire); }
  
  /* Checkbox RGPD (label flex) */
  .checkbox{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:.9rem;
    color:rgba(30,42,56,0.9);
  }
  .checkbox input{
    width:20px;
    height:20px;
    margin:2px 0 0;
    flex:0 0 auto;
  }
  .checkbox span{ display:inline; margin:0; }
  
  /* ===== Checkbox confidentialité / RGPD ===== */
  #rgpd{ height:20px; width:20px; }
  
  #rgpd-checkbox{
    display:flex !important;
    flex-direction:row !important;
    gap:10px;
    padding-top:10px;
    align-items:flex-start;
  }
  
  #rgpd-mention{ margin-top:1px; }
  
  /* =========================
     Calendar
     ========================= */
  .calendar{
    background:var(--fond-blanc);
    border-radius:14px;
    padding:12px;
    border:1px solid var(--border-soft);
    width:100%;
  }
  
  .calendar-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
  }
  
  .calendar-grid{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:8px;
  }
  
  .calendar-dow,
  .calendar-day{
    text-align:center;
    padding:10px 0;
    border-radius:10px;
    user-select:none;
  }
  
  .calendar-dow{
    font-size:.8rem;
    color:rgba(30,42,56,0.6);
  }
  
  .calendar-day{
    border:1px solid var(--border-soft);
    cursor:pointer;
    position:relative;
    transition:transform .08s ease-out, box-shadow .12s ease-out, background .12s ease-out;
  }
  
  .calendar-day.disabled{
    opacity:.35;
    cursor:not-allowed;
  }
  
  .calendar-day:not(.disabled):hover{
    transform:translateY(-1px);
    box-shadow:0 6px 14px rgba(0,0,0,0.08);
  }
  
  /* Jours avec créneaux */
  .calendar-day.has-slots{
    background:rgba(138, 208, 255, 0.22);
    border:1px solid rgba(191,207,184,0.9);
    font-weight:700;
  }
  
  .calendar-day.has-slots::after{
    content:"";
    position:absolute;
    right:8px;
    bottom:8px;
    width:8px;
    height:8px;
    border-radius:999px;
    background-color:#16a34a;
  }
  
  /* Jour sélectionné */
  .calendar-day.selected{
    background:rgba(107,168,209,0.18);
    border:1px solid rgba(107,168,209,0.9);
    box-shadow:0 0 0 3px rgba(107,168,209,0.18);
  }
  
  /* Légende */
  .calendar-legend{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin:10px 0 14px;
    font-size:.85rem;
    color:rgba(30,42,56,0.75);
  }
  
  .dot{
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:999px;
    margin-right:6px;
    vertical-align:middle;
  }
  .dot-free{ background:#16a34a; }
  .dot-selected{ background:var(--couleur-primaire); }
  
  /* =========================
     Slots (créneaux)
     ========================= */
  .slots{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  
  .slot-btn{
    border:1px solid var(--slot-border);
    background:var(--slot-bg);
    border-radius:999px;
    padding:10px 14px;
    cursor:pointer;
    font:inherit;
    transition:transform .08s ease-out, box-shadow .12s ease-out, background .12s ease-out;
    white-space:nowrap;
  }
  
  .slot-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 14px rgba(0,0,0,0.08);
  }
  
  .slot-btn.selected{
    background:var(--slot-selected-bg);
    border-color:var(--slot-selected-border);
    box-shadow:0 0 0 3px rgba(107,168,209,0.18);
  }
  
  /* Créneaux pris */
  .slot-btn:disabled,
  .slot-btn.taken{
    background:var(--slot-taken-bg);
    color:var(--slot-taken-text);
    border-color:var(--slot-taken-border);
    cursor:not-allowed;
    opacity:.95;
    transform:none;
    box-shadow:none;
  }
  
  /* =========================
     FAQ
     ========================= */
  .faq{
    max-width:800px;
    margin:0 auto;
  }
  
  .faq-item{
    width:100%;
    background:var(--fond-blanc);
    border:1px solid var(--border-soft);
    border-radius:12px;
    padding:16px 20px;
    margin-bottom:12px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    font:inherit;
    font-size:16px;
    font-weight:500;
    text-align:left;
    cursor:pointer;
    transition:background .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  
  .faq-item:hover{
    background:#f9f9f9;
    border-color:rgba(0,0,0,0.12);
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
  }
  
  .faq-icon{
    font-size:20px;
    font-weight:700;
    color:var(--couleur-primaire);
  }
  
  .faq-panel{
    display:none;
    background:var(--fond-blanc);
    border:1px solid var(--border-soft);
    border-left:3px solid var(--couleur-primaire);
    border-radius:12px;
    margin:-6px 0 16px;
    padding:16px 20px;
    font-size:15px;
    color:rgba(30,42,56,0.92);
  }
  .faq-panel.open{ display:block; }
  
  /* =========================
     Footer + links
     ========================= */
  .footer{
    background:var(--fond-blanc);
    padding:16px 0;
    border-top:1px solid var(--border-soft);
    margin-top:24px;
  }
  
  .footer-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }
  
  .footer p{
    margin:0;
    font-size:.85rem;
    color:#6B7280;
  }
  
  .footer-links{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
  }
  
  .footer-links a{
    text-decoration:none;
    font-weight:600;
    font-size:.85rem;
    color:var(--couleur-primaire);
  }
  .footer-links a:hover{ text-decoration:underline; }
  
  /* =========================
     Bottom tabs (si utilisés)
     ========================= */
  .bottom-tabs{
    position:sticky;
    bottom:0;
    width:100%;
    background:var(--fond-blanc);
    border-top:1px solid var(--border-soft);
    display:flex;
    justify-content:center;
    gap:10px;
    padding:10px 12px;
    z-index:20;
  }
  
  .bottom-tabs .tab{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px;
    border-radius:999px;
    text-decoration:none;
    color:var(--couleur-texte);
    border:1px solid rgba(0,0,0,0.08);
    background:var(--fond-blanc);
    font-weight:600;
    font-size:.92rem;
    white-space:nowrap;
  }
  
  .bottom-tabs .tab:hover{ border-color:rgba(0,0,0,0.18); }
  .bottom-tabs .tab.active{ outline:2px solid var(--couleur-primaire); }
  
  @media (max-width:480px){
    .bottom-tabs{ justify-content:space-between; }
    .bottom-tabs .tab{ flex:1; }
  }
  
  /* =========================
     Pages légales
     ========================= */
  body.conf-page main .card,
  body.legal-page main .card{
    max-width:850px;
    margin:0 auto;
    padding:22px 22px 24px;
  }
  
  body.conf-page main .card h3,
  body.legal-page main .card h3{
    margin:18px 0 8px;
    font-size:1.05rem;
  }
  
  body.conf-page main .card p,
  body.legal-page main .card p{
    margin:8px 0 12px;
    color:rgba(30,42,56,0.92);
  }
  
  body.conf-page main .card ul,
  body.legal-page main .card ul{
    margin:8px 0 14px;
    padding-left:18px;
  }
  
  body.conf-page a,
  body.legal-page a{
    color:var(--couleur-primaire);
    text-decoration:none;
    font-weight:600;
  }
  body.conf-page a:hover,
  body.legal-page a:hover{
    text-decoration:underline;
  }
  
  /* =========================
     Images de section (hors hero)
     ========================= */
  .section-img{
    width:100%;
    max-width:420px;
    border-radius:16px;
    margin-top:14px;
    box-shadow:0 8px 18px rgba(0,0,0,0.12);
    object-fit:cover;
  }
  
  /* Contact en 2 colonnes (si utilisé ailleurs) */
  .contact-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    align-items:start;
  }
  .contact-right .contact-form{ max-width:100%; }
  
  /* =========================
     Form section (image + form)
     ========================= */
  #form-section{
    display:flex;
    flex-direction:row-reverse;
    width:100%;
    gap:16px;
    align-items:flex-start;
  }
  
  #form-image{
    width:50%;
    height:auto;
    border-radius:15px;
    margin-left:10px;
    object-fit:cover;
  }
  
  /* =========================
     Tables de tarification
     ========================= */
  .pricing-table{
    width:100%;
    border-collapse:collapse;
    background:var(--fond-blanc);
    border-radius:14px;
    overflow:hidden;
    box-shadow:var(--shadow-soft);
    font-size:0.8rem;
  }
  
  .pricing-table thead{
    background:rgba(107,168,209,0.12);
  }
  
  .pricing-table th,
  .pricing-table td{
    padding:12px 14px;
    text-align:left;
    word-break:break-word;
  }
  
  .pricing-table th{
    font-weight:700;
    color:var(--couleur-texte);
  }
  
  .pricing-table tr:not(:last-child){
    border-bottom:1px solid var(--border-soft);
  }
  
  .pricing-table tbody tr:hover{
    background:rgba(0,0,0,0.02);
  }

    .pricing-table th:third-child,
  .pricing-table td:third-child{
    white-space: normal;
    max-width: 100px;
  }
  
  /* Exemples */
  .pricing-examples{
    display:flex;
    justify-content:space-between;
    gap:10px;
    min-height:400px;
    max-width:100%;
  }
  
  .pricing-block{
    display:flex;
    flex-direction:column;
    height:100%;
    width:100%;
    min-width:260px;
  }
  
  .pricing-block h3{
    margin-bottom:12px;
    text-align:center;
    font-size:1.15rem;
    color:var(--couleur-texte);
  }
  
  /* CTA sous tableaux */
  .pricing-cta{
    margin-top:14px;
    display:flex;
    margin-left:auto;
    margin-right:auto;
    flex-direction:column;
    align-items:center;
    gap:8px;
    width:100%;
  }
  
  .pricing-note{
    font-size:0.85rem;
    color:rgba(30,42,56,0.75);
    text-align:center;
    margin:0;
  }
  
  .pricing-block table{ width:100%; }
  
  .pricing-cta{
    margin-top:auto;
    padding-top:14px;
  }
  
  .pricing-card{
    padding:16px 10px 10px;
    height:100%;
    background-color:white;
    border-radius:20px;
    box-shadow:0px 3px 5px rgba(0, 0, 0, 0.151);
    min-height:500px;
  }
  
  /* =========================
     RESPONSIVE
     ========================= */
  
  /* --- <= 1024px (tablette) --- */
  @media (max-width:1024px){
    :root{
      --h1-size: 1.9rem;
      --h2-size: 1.55rem;
      --h3-size: 1.08rem;
    }
  
    .hero{
      padding:36px 0 28px;
    }
  
    .hero-img{
      width:min(340px, 100%);
      margin-left:0;
    }
  
    .cards{
      grid-template-columns:repeat(2, minmax(0,1fr));
    }
  
    .tarifs-layout{ gap:22px; }
    .tarifs-img{ width:min(420px, 100%); }
  
    /* Form section en colonne */
    #form-section{ flex-direction:column; }
    #form-image{
      width:100%;
      max-width:520px;
      margin:0 auto;
    }
  
    .pricing-block{ width:100%; }
    .pricing-card{ min-height:auto; }
  
    .contact-layout{ grid-template-columns:1fr; }
    .section-img{ max-width:100%; }
  }
  
  /* --- <= 900px --- */
  @media (max-width:900px){
    .contact-layout{ grid-template-columns:1fr; }
    .section-img{ max-width:100%; }
  
    .pricing-examples{ min-height:auto; }
    .pricing-block{ width:100%; }
    .pricing-card{ min-height:auto; }
  }
  
  /* --- <= 768px (mobile large) --- */
  @media (max-width:768px){
    :root{
      --h1-size: 1.65rem;
      --h2-size: 1.35rem;
      --h3-size: 1.02rem;
    }
  
    .section{ padding:28px 0; }
  
    /* Header compact + burger */
    .header .container{
      flex-direction:row;
      align-items:center;
    }
  
    .nav{
      margin-left:auto;
      position:relative;
    }
  
    .nav-toggle{
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
  
    /* Cache les liens tant que fermé */
    .nav-links{
      display:none;
      position:absolute;
      right:0;
      top:calc(100% + 10px);
      flex-direction:column;
      align-items:stretch;
      gap:6px;
      padding:10px;
      width:min(92vw, 320px);
      background:var(--fond-blanc);
      border:1px solid var(--border-soft);
      border-radius:14px;
      box-shadow:var(--shadow-soft);
      z-index:999;
    }
  
    .nav-links a{
      padding:10px 12px;
      border-radius:12px;
      background:rgba(0,0,0,0.03);
    }
  
    .nav.is-open .nav-links{ display:flex; }
  
    /* Hero en colonne */
    .hero-content{
      flex-direction:column;
      align-items:flex-start;
    }
    .hero-img{
      width:100%;
      max-width:420px;
      margin:10px 0 0;
    }
    .hero h1{ font-size:var(--h1-size); }
  
    /* Cards en 1 colonne */
    .cards{ grid-template-columns:1fr; }
  
    /* Tarifs : image au-dessus */
    .tarifs-layout{ flex-direction:column; }
    .tarifs-img{
      width:100%;
      max-width:520px;
      margin:0 auto;
    }
  
    /* Form */
    #form-section{ flex-direction:column; }
    #form-image{
      width:100%;
      max-width:520px;
      margin:0 auto;
    }
  
    /* Calendar plus compact */
    .calendar{ padding:10px; }
    .calendar-grid{ gap:6px; }
    .calendar-day,
    .calendar-dow{ padding:8px 0; border-radius:9px; }
  
    /* Tables : scroll horizontal si trop large */
    .pricing-table{
      display:block;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
    }
  
    /* Footer */
    .footer-row{ justify-content:center; }
  }
  
  /* --- <= 480px (petit mobile) --- */
  @media (max-width:480px){
    .logo-mark{
      width:34px;
      height:34px;
      font-size:1.2rem;
    }
    .logo-title{ font-size:1rem; }
    .logo-subtitle{ font-size:.78rem; }
  
    .btn-primary{
      width:100%;
      text-align:center;
    }
  
    .calendar-grid{ gap:5px; }
    .calendar-day,
    .calendar-dow{
      padding:7px 0;
      font-size:.78rem;
    }
  
    .pricing-table{ font-size:0.72rem; }
  }
  

  /* =========================================
   ✅ MOBILE : on retire le menu (liens) du header
   ========================================= */
@media (max-width:768px){
  /* cache tout le contenu du menu */
  .nav,
  .nav-links,
  .nav a{
    display:none !important;
  }

  /* au cas où ton bouton burger existe dans le HTML/CSS */
  .nav-toggle{
    display:none !important;
  }

  /* le header reste propre */
  .header .container{
    justify-content:flex-start;
  }

  #form-image{
    display: none;
  }
  .pricing-examples{
    flex-direction: column;
  }

  .pricing-table{
    font-size: 0.6rem;
  }

  /* 6) Première colonne (Tâche) : autorise retour à la ligne mais propre */
  .pricing-table th:first-child,
  .pricing-table td:first-child{
    white-space: normal;
    max-width: 100px;
  }
}