/* ================================================================
   MOBILE.CSS — Institut Suisse de Domothérapie
   Fichier centralisé pour toutes les règles responsives
   
   ⚠️  NE MODIFIER QUE CE FICHIER pour les corrections mobile/tablette
   ⚠️  Ce fichier est chargé APRÈS le CSS des pages — il a priorité
   
   Dernière mise à jour : juillet 2026
================================================================ */


/* ═══════════════════════════════════════════
   INDEX
   ═══════════════════════════════════════════ */

@media (max-width: 680px) {
  .f-inner { gap: 2rem; }
  .f-brand { min-width: 100%; }
}

@media(max-width:768px) and (min-width:481px){
      nav{ padding:.6rem 1.5rem; }
      .nav-info, .nc, .nav-div{ display:none !important; }
      .nav-cta{ display:none !important; }
      .s{ padding:3rem 2rem; }
      .vg, .tg, .ag, .wg{ grid-template-columns:1fr 1fr !important; gap:1.5rem !important; }
      .cmain, .cmi{ padding:3rem 2rem !important; }
      .cmi{ grid-template-columns:1fr !important; gap:2.5rem !important; }
      .phi{ grid-template-columns:1fr !important; gap:2rem !important; }
      .stcols{ grid-template-columns:1fr !important; gap:2rem !important; }
      .prom-inner{ grid-template-columns:1fr 1fr !important; gap:1.25rem !important; }
      .f-inner{ flex-direction:column !important; gap:2rem !important; }
      .f-bottom{ flex-direction:column !important; text-align:center !important; }
    }

@media(max-width:900px) and (min-width:601px){
      .popup-box{ max-width:480px !important; }
    }

@media(max-width:680px){
      #wl4-prenom, #wl4-email{
        min-width:100% !important;
        width:100% !important;
      }
    }

@media(max-width:900px) and (min-width:601px){
      .testi-google p{ font-size:.92rem !important; }
    }

@media(max-width:480px){

      /* ── NAV ── */
      nav{ padding:.5rem 1rem !important; position:fixed; flex-wrap:nowrap; }
      .nc, .nav-div{ display:none !important; }
      .nav-toggle{ display:block !important; }
      .nli, .nav-logo-img{ height:36px !important; }

      /* ── HERO ── */
      .hero{ padding:5.5rem 1.25rem 3rem !important; min-height:100svh !important; }
      .hc{ max-width:100% !important; }
      .ht{ font-size:clamp(2rem,8vw,2.8rem) !important; line-height:1.1 !important; }
      .hs{ font-size:.9rem !important; line-height:1.75 !important; max-width:100% !important; }
      .ha{ flex-direction:column !important; gap:.65rem !important; width:100% !important; }
      .ha a{ width:100% !important; text-align:center !important; box-sizing:border-box !important; }
      .h-rule{ display:none !important; }
      .hsc{ left:1.25rem !important; bottom:1.5rem !important; }

      /* ── SECTIONS GÉNÉRALES ── */
      .s{ padding:2.5rem 1.25rem !important; }
      .si{ max-width:100% !important; }
      .lbl{ font-size:.58rem !important; }
      .ttl{ font-size:clamp(1.6rem,6vw,2.2rem) !important; line-height:1.2 !important; }
      .bt{ font-size:.9rem !important; line-height:1.8 !important; word-break:normal !important; overflow-wrap:break-word !important; }

      /* ── .vg — section photo + texte (instinct / harmonisation) ── */
      .vg{ grid-template-columns:1fr !important; gap:2rem !important; }
      .vp{ height:280px !important; width:100% !important; object-fit:cover !important; }

      /* ── .sg — grille stats / petites cartes ── */
      .sg{ grid-template-columns:1fr 1fr !important; gap:.85rem !important; margin-top:1.5rem !important; }

      /* ── .wg — 3 boxes école/praticien ── */
      .wg{ grid-template-columns:1fr !important; gap:1rem !important; margin-top:1.5rem !important; }

      /* ── .ag — grille avantages ── */
      .ag{ grid-template-columns:1fr !important; gap:.85rem !important; margin-top:1.5rem !important; }
      .ai{ padding:1.1rem !important; }

      /* ── .tg — grille 6 colonnes (analyser/conduire) ── */
      .tg{ grid-template-columns:1fr !important; gap:1rem !important; margin-top:1.5rem !important; }

      /* ── Grilles inline repeat(3,1fr) → 1 colonne ── */
      [style*="grid-template-columns:repeat(3,1fr)"],
      [style*="grid-template-columns: repeat(3, 1fr)"],
      [style*="grid-template-columns:repeat(3, 1fr)"]{
        grid-template-columns:1fr !important;
        gap:1rem !important;
      }
      /* ── Grilles inline 1fr 1fr → 1 colonne ── */
      [style*="grid-template-columns:1fr 1fr"],
      [style*="grid-template-columns: 1fr 1fr"]{
        grid-template-columns:1fr !important;
        gap:1.5rem !important;
      }
      /* ── Grilles inline 1.6fr/1.5fr → 1 colonne ── */
      [style*="grid-template-columns:1.6fr"],
      [style*="grid-template-columns:1.5fr"],
      [style*="grid-template-columns:3fr"]{
        grid-template-columns:1fr !important;
        gap:1.5rem !important;
      }

      /* ── Section 3 boxes flex → colonne ── */
      .csi{ flex-direction:column !important; gap:1.25rem !important; }

      /* ── FAQ ── */
      .faq-list{ margin-top:1.5rem !important; }
      .faq-q{ font-size:1rem !important; }
      .faq-a p{ font-size:.88rem !important; }

      /* ── Popup guide ── */
      .popup-overlay{ padding:.75rem !important; align-items:flex-end !important; }
      .popup-box{ border-radius:12px 12px 0 0 !important; max-width:100% !important; max-height:90svh !important; overflow-y:auto !important; }

      /* ── Bloc 2027 ── */
      .wl-year{ display:none !important; }
      .wl-header{ padding:1.5rem 1.25rem 1.25rem !important; }
      .wl-title{ font-size:1.4rem !important; }
      .wl-fields{ flex-direction:column !important; }
      .wl-fields input, .wl-fields select{ min-width:100% !important; }

      /* ── Bloc 2027 inline (avant footer) ── */
      [style*="grid-template-columns:1fr 1fr"][style*="gap:3rem"]{
        grid-template-columns:1fr !important;
        gap:1.5rem !important;
      }

      /* ── Stats chiffres ── */
      .stat-num{ font-size:2rem !important; }
      .stat-lbl{ font-size:.65rem !important; }

      /* ── Footer ── */
      footer{ padding:2.5rem 1.25rem 1.5rem !important; }
      .f-inner{ flex-direction:column !important; gap:1.75rem !important; }
      .f-brand{ flex-direction:row !important; align-items:center !important; }
      .f-logo-img{ width:44px !important; }
      .f-bottom{ flex-direction:column !important; text-align:center !important; gap:.35rem !important; font-size:.65rem !important; }
      .f-legal-links{ justify-content:center !important; }
    }

@media(max-width:768px) and (min-width:481px){
      nav{ padding:.6rem 1.5rem; }
      .nc, .nav-div{ display:none !important; }
      .nav-toggle{ display:block !important; }
      .s{ padding:3rem 2rem; }
      .vg{ grid-template-columns:1fr !important; gap:2.5rem !important; }
      .wg{ grid-template-columns:1fr 1fr !important; gap:1.25rem !important; }
      .ag{ grid-template-columns:1fr 1fr !important; gap:1rem !important; }
      .tg{ grid-template-columns:1fr 1fr !important; gap:1.25rem !important; }
      [style*="grid-template-columns:repeat(3,1fr)"]{
        grid-template-columns:1fr 1fr !important;
        gap:1.25rem !important;
      }
      .f-inner{ flex-direction:column !important; gap:2rem !important; }
    }

@media(max-width:960px){
      .nav-info,.nc,.nav-div{ display:none !important; }
      .nav-cta{ display:none !important; }
      .nav-toggle{ display:block !important; }
      .nav-links{
        display:none;
        flex-direction:column;
        gap:0;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#F7F4EF;
        border-bottom:2px solid #B8964A;
        padding:.5rem 1.5rem 1rem;
        z-index:9999;
        list-style:none;
        margin:0;
        box-shadow:0 8px 24px rgba(0,0,0,.08);
      }
      .nav-links.open{ display:flex !important; }
      .nav-links li{ border-bottom:1px solid rgba(0,0,0,.06); }
      .nav-links a{
        display:block;
        padding:.75rem 0;
        font-size:.85rem;
        letter-spacing:.1em;
        text-transform:uppercase;
        color:#2C2822 !important;
        text-decoration:none;
      }
      .nav-links a:hover,
      .nav-links a.active{ color:#B8964A !important; }
      nav{ padding:.6rem 1.25rem; gap:.5rem; position:fixed; }
    }

@media(max-width:600px){
      #tanay-overlay{ display:none !important; }
      #tanay-caption{
        display:block !important;
        padding:.85rem 1.25rem;
        background:var(--charcoal,#2C2822);
      }
    }

@media(max-width:600px){
      .formation-photo-overlay{ display:none !important; }
      .formation-photo-caption{ display:block !important; }
    }


/* ═══════════════════════════════════════════
   FORMATION
   ═══════════════════════════════════════════ */

@media(max-width:768px) and (min-width:481px){
      nav{ padding:.6rem 1.5rem; }
      .nav-info, .nc, .nav-div{ display:none !important; }
      .nav-cta{ display:none !important; }
      .s{ padding:3rem 2rem; }
      .vg, .tg, .ag, .wg{ grid-template-columns:1fr 1fr !important; gap:1.5rem !important; }
      .cmain, .cmi{ padding:3rem 2rem !important; }
      .cmi{ grid-template-columns:1fr !important; gap:2.5rem !important; }
      .phi{ grid-template-columns:1fr !important; gap:2rem !important; }
      .stcols{ grid-template-columns:1fr !important; gap:2rem !important; }
      .prom-inner{ grid-template-columns:1fr 1fr !important; gap:1.25rem !important; }
      .f-inner{ flex-direction:column !important; gap:2rem !important; }
      .f-bottom{ flex-direction:column !important; text-align:center !important; }
    }

@media(max-width:900px) and (min-width:601px){
      .popup-box{ max-width:480px !important; }
    }

@media(max-width:900px) and (min-width:601px){
      .testi-google p{ font-size:.92rem !important; }
    }

@media(max-width:960px){
      .nav-info,.nc,.nav-div{ display:none !important; }
      .nav-cta{ display:none !important; }
      .nav-toggle{ display:block !important; }
      .nav-links{
        display:none;
        flex-direction:column;
        gap:0;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#F7F4EF;
        border-bottom:2px solid #B8964A;
        padding:.5rem 1.5rem 1rem;
        z-index:9999;
        list-style:none;
        margin:0;
        box-shadow:0 8px 24px rgba(0,0,0,.08);
      }
      .nav-links.open{ display:flex !important; }
      .nav-links li{ border-bottom:1px solid rgba(0,0,0,.06); }
      .nav-links a{
        display:block;
        padding:.75rem 0;
        font-size:.85rem;
        letter-spacing:.1em;
        text-transform:uppercase;
        color:#2C2822 !important;
        text-decoration:none;
      }
      .nav-links a.active{ color:#B8964A !important; }
      nav{ padding:.6rem 1.25rem; gap:.5rem; position:fixed; }
    }

@media(max-width:480px){

      /* HERO */
      .hero{ padding:5rem 1.25rem 2.5rem !important; }
      .ha{ display:flex !important; flex-direction:column !important; gap:.65rem !important; width:100% !important; }
      .ha a, .btn-gold, .btn-wb{ display:block !important; text-align:center !important; width:100% !important; box-sizing:border-box !important; }
      .hero-dl-btn{ display:none !important; }
      .hero-scroll{ display:none !important; }

      /* PDF BAND */
      .pdf-band{ padding:1.5rem 1.25rem !important; }
      .pdf-inner{ flex-direction:column !important; gap:1rem !important; align-items:stretch !important; }
      .btn-pdf{ display:block !important; text-align:center !important; width:100% !important; box-sizing:border-box !important; }

      /* PROM — 4 icônes → 2 colonnes */
      .prom{ padding:1.75rem 1.25rem !important; }
      .prom-inner{ grid-template-columns:1fr 1fr !important; gap:1rem !important; }
      .prom-item{ padding:.5rem !important; }
      .prom-icon{ font-size:1.5rem !important; }
      .prom-item h4{ font-size:.9rem !important; }
      .prom-item p{ font-size:.78rem !important; }

      /* WEEK-ENDS (wk-grid) → 1 colonne centrée */
      .wk-grid{ grid-template-columns:1fr !important; gap:1.5rem !important; margin-top:1.5rem !important; }
      .wk{ padding:1.5rem !important; }
      .wk-badge{ font-size:.65rem !important; }
      .wk-loc{ font-size:.68rem !important; }

      /* COMPÉTENCES (lg) → 1 colonne */
      .lg{ grid-template-columns:1fr !important; gap:1rem !important; margin-top:1.5rem !important; }
      .li{ padding:1.15rem 1rem !important; gap:1rem !important; }
      .li h4{ font-size:.95rem !important; }
      .li p{ font-size:.85rem !important; line-height:1.65 !important; }

      /* À LA FIN DES 4 WE — tg (boîte à outils) → 1 colonne */
      .tg{ grid-template-columns:1fr !important; gap:1rem !important; margin-top:1.5rem !important; }
      .tc{ padding:1.15rem 1rem !important; }
      .tc h4{ font-size:1rem !important; }
      .tc p{ font-size:.88rem !important; line-height:1.65 !important; }

      /* GRILLES INLINE → 1 colonne */
      [style*="grid-template-columns:repeat(3,1fr)"],
      [style*="grid-template-columns: repeat(3, 1fr)"]{
        grid-template-columns:1fr !important;
        gap:1rem !important;
      }
      [style*="grid-template-columns:1fr 1fr"],
      [style*="grid-template-columns: 1fr 1fr"]{
        grid-template-columns:1fr !important;
        gap:1.25rem !important;
      }
      [style*="grid-template-columns:1.15fr 1fr"]{
        grid-template-columns:1fr !important;
        gap:1rem !important;
      }
      [style*="grid-template-columns:1fr 1fr;gap:2rem"]{
        grid-template-columns:1fr !important;
      }

      /* PHOTOS FORMATION */
      .formation-photos-grid{ grid-template-columns:1fr !important; gap:1rem !important; }
      .formation-photo-overlay{ display:none !important; }
      .formation-photo-caption{ display:block !important; }
      .formation-photo img{ height:220px !important; object-fit:cover !important; width:100% !important; }

      /* TABLEAU DATES */
      .s.dates{ padding:2rem 1.25rem !important; }
      .dates table{ font-size:.8rem !important; }
      .dates th{ font-size:.62rem !important; padding:.6rem .5rem !important; }
      .dates td{ padding:.6rem .5rem !important; font-size:.82rem !important; }
      .dbadge{ font-size:.62rem !important; padding:.15rem .5rem !important; white-space:nowrap !important; }

      /* TÉMOIGNAGES (tstig) → 1 colonne */
      .tstig{ grid-template-columns:1fr !important; gap:1.25rem !important; margin-top:1.5rem !important; }
      .testi-google{ padding:1.25rem !important; }
      .testi-google p{ font-size:.88rem !important; line-height:1.75 !important; }

      /* R.G. 2 colonnes → 1 colonne */
      .rg-cols{ grid-template-columns:1fr !important; gap:1.25rem !important; }

      /* CTA "Prêt à développer" */
      .rbox{ grid-template-columns:1fr !important; padding:2rem 1.25rem !important; gap:1.5rem !important; }
      .ract{ width:100% !important; align-items:stretch !important; }
      .btn-pdf-reg, .btn-pdf-light{
        display:block !important;
        text-align:center !important;
        width:100% !important;
        box-sizing:border-box !important;
      }

      /* DCOLS → 1 colonne */
      .dcols{ grid-template-columns:1fr !important; gap:1.5rem !important; margin-top:1.5rem !important; }

      /* TYPOGRAPHIE */
      .s{ padding:2.5rem 1.25rem !important; }
      .ttl{ font-size:clamp(1.6rem,6vw,2.2rem) !important; line-height:1.2 !important; }
      .bt{ font-size:.9rem !important; line-height:1.8 !important; overflow-wrap:break-word !important; }
      .lbl{ font-size:.6rem !important; }

      /* POPUP */
      .wl-overlay{ align-items:flex-end !important; padding:.5rem !important; }
      .wl-box{ border-radius:12px 12px 0 0 !important; max-width:100% !important; max-height:90svh !important; overflow-y:auto !important; }
      .wl-year{ display:none !important; }
      .wl-fields{ flex-direction:column !important; }
      .wl-header{ padding:1.5rem 1.25rem 1.25rem !important; }

      /* FOOTER */
      footer{ padding:2.5rem 1.25rem 1.5rem !important; }
      .f-inner{ flex-direction:column !important; gap:1.5rem !important; }
      .f-grid{ grid-template-columns:1fr !important; gap:1.5rem !important; padding-bottom:1.5rem !important; }
      .f-bottom{ flex-direction:column !important; text-align:center !important; font-size:.65rem !important; }
      .f-legal-links{ justify-content:center !important; }
    }

@media(max-width:768px) and (min-width:481px){
      nav{ padding:.6rem 1.5rem; }
      .nav-info,.nc,.nav-div{ display:none !important; }
      .nav-toggle{ display:block !important; }
      .s{ padding:3rem 2rem; }
      .wk-grid{ grid-template-columns:1fr !important; gap:1.5rem !important; }
      .prom-inner{ grid-template-columns:1fr 1fr !important; }
      .lg{ grid-template-columns:1fr !important; gap:1.25rem !important; }
      .tg{ grid-template-columns:1fr 1fr !important; gap:1.25rem !important; }
      .tstig{ grid-template-columns:1fr !important; gap:1.25rem !important; }
      .formation-photos-grid{ grid-template-columns:1fr !important; }
      .formation-photo-overlay{ display:none !important; }
      .formation-photo-caption{ display:block !important; }
      .rbox{ grid-template-columns:1fr !important; }
      .f-inner{ flex-direction:column !important; gap:2rem !important; }
      .f-grid{ grid-template-columns:1fr 1fr !important; }
    }

@media(max-width:600px){
      .formation-img{
        height:auto !important;
        max-height:none !important;
        object-fit:initial !important;
        width:100% !important;
      }
    }

@media(max-width:600px){
      .table-scroll{ margin-top:1.5rem; }
      .table-scroll .dtbl{ font-size:.82rem !important; }
      .table-scroll th{ font-size:.65rem !important; padding:.55rem .5rem !important; white-space:nowrap; }
      .table-scroll td{ padding:.55rem .5rem !important; }
      .dbadge{ font-size:.62rem !important; white-space:nowrap !important; }
    }

@media(max-width:600px){
      .table-scroll{ overflow-x:visible !important; }
      .table-scroll .dtbl{ min-width:0 !important; width:100% !important; }

      /* Masquer le header du tableau */
      .dtbl thead{ display:none !important; }

      /* Chaque ligne devient une carte */
      .dtbl tbody tr{
        display:block !important;
        background:#fff !important;
        border:1px solid #EDE8DF !important;
        border-radius:4px !important;
        margin-bottom:1rem !important;
        padding:.85rem 1rem !important;
      }
      .dtbl tbody tr:nth-child(even){ background:#F7F4EF !important; }

      /* Chaque cellule en bloc avec label auto */
      .dtbl td{
        display:block !important;
        padding:.3rem 0 !important;
        border:none !important;
        font-size:.88rem !important;
        line-height:1.6 !important;
        white-space:normal !important;
        word-break:normal !important;
      }

      /* Labels automatiques via data-label */
      .dtbl td::before{
        content:attr(data-label);
        display:block;
        font-size:.6rem;
        letter-spacing:.18em;
        text-transform:uppercase;
        color:#B8964A;
        font-family:system-ui,sans-serif;
        font-weight:500;
        margin-bottom:.15rem;
      }

      /* Ligne du certificat */
      .dtbl tr.cert-row td{
        display:block !important;
        padding:.3rem 0 !important;
      }
      .dtbl tr.cert-row{ background:rgba(184,150,74,.06) !important; border-color:#B8964A !important; }
    }


/* ═══════════════════════════════════════════
   QUI-SUIS-JE
   ═══════════════════════════════════════════ */

@media (max-width: 680px) {
  .f-inner { gap: 2rem; }
  .f-brand { min-width: 100%; }
}

@media(max-width:480px){

      /* ── NAV ── */
      nav{ padding:.55rem 1rem !important; }
      .nav-logo-img{ height:38px !important; }
      .nav-info, .nav-div{ display:none !important; }

      /* ── SECTION HERO BIO ── */
      /* Passage en colonne unique : photo EN HAUT, texte EN BAS */
      .ph{
        padding:5.5rem 1.25rem 2.5rem !important;
      }
      .phi{
        grid-template-columns:1fr !important;
        gap:0 !important;
        /* Inverser l'ordre pour mettre la photo en haut */
        display:flex !important;
        flex-direction:column-reverse !important;
      }

      /* Photo Anthony : pleine largeur, bien cadrée */
      .pp{
        width:100% !important;
        height:320px !important;
        border-radius:4px !important;
        margin-bottom:1.75rem !important;
        object-position:top center !important;
      }

      /* Texte bio */
      .pey{
        font-size:.58rem !important;
        letter-spacing:.2em !important;
        white-space:normal !important;
        word-break:normal !important;
        line-height:1.5 !important;
        margin-bottom:.75rem !important;
      }
      .pn{
        font-size:clamp(2.2rem,8vw,3rem) !important;
        line-height:1.05 !important;
        margin-bottom:.5rem !important;
      }
      .pt{
        font-size:1rem !important;
        line-height:1.5 !important;
        margin-bottom:1.25rem !important;
      }
      .pi{
        font-size:.92rem !important;
        line-height:1.8 !important;
        max-width:100% !important;
        word-break:normal !important;
        overflow-wrap:break-word !important;
        margin-bottom:1rem !important;
      }

      /* Liens sociaux */
      .soc{
        gap:.5rem !important;
        flex-wrap:wrap !important;
        margin-top:1rem !important;
      }
      .socl{
        font-size:.7rem !important;
        padding:.38rem .8rem !important;
      }

      /* ── SECTION STORY (grille 2 cols → 1 col) ── */
      .story{ padding:2.5rem 1.25rem !important; }
      .stcols{
        grid-template-columns:1fr !important;
        gap:1.5rem !important;
      }
      .stt p{
        font-size:.9rem !important;
        line-height:1.8 !important;
        word-break:normal !important;
        overflow-wrap:break-word !important;
      }
      .stasi{ padding:1.25rem !important; }
      .stasi h4{ font-size:1rem !important; }
      .stali li{ font-size:.85rem !important; }

      /* ── SECTION VALEURS (grille 3 cols → 1 col) ── */
      .vals{ padding:2.5rem 1.25rem !important; }
      .vg{
        grid-template-columns:1fr !important;
        gap:1rem !important;
        margin-top:1.5rem !important;
      }
      .vc{ padding:1.25rem 1rem !important; }
      .vc h3{ font-size:1.1rem !important; }
      .vc p{ font-size:.85rem !important; }

      /* ── PARCOURS (timeline) ── */
      .parc{ padding:2.5rem 1.25rem !important; }
      .tl{ margin-top:1.5rem !important; }
      .tli{ gap:1.25rem !important; padding-bottom:1.75rem !important; }
      .tlc h4{ font-size:1.05rem !important; }
      .tlc p{ font-size:.87rem !important; }

      /* ── CTA SECTION ── */
      .cta-sec{ padding:2.5rem 1.25rem !important; }
      .cta-sec h2{ font-size:1.7rem !important; }
      .btn-g, .btn-o{
        display:block !important;
        width:100% !important;
        text-align:center !important;
        box-sizing:border-box !important;
        margin:.4rem 0 !important;
      }

      /* ── TYPOGRAPHIE GÉNÉRALE ── */
      .s{ padding:2.5rem 1.25rem !important; }
      .si{ max-width:100% !important; }
      .ttl{ font-size:clamp(1.6rem,6vw,2.2rem) !important; }
      .lbl{ font-size:.6rem !important; }
      .bt{
        font-size:.92rem !important;
        line-height:1.8 !important;
        word-break:normal !important;
        overflow-wrap:break-word !important;
        max-width:100% !important;
      }

      /* ── FOOTER ── */
      footer{ padding:2.5rem 1.25rem 1.5rem !important; }
      .f-inner{ flex-direction:column !important; gap:1.75rem !important; }
      .f-brand{ flex-direction:row !important; align-items:center !important; }
      .f-logo-img{ width:44px !important; }
      .f-bottom{
        flex-direction:column !important;
        text-align:center !important;
        gap:.35rem !important;
      }
      .f-legal-links{ justify-content:center !important; }

      /* ── POPUP ── */
      .popup-box{ border-radius:4px !important; }
      .popup-header{ padding:1.5rem 1.25rem 1.25rem !important; }
      .popup-title{ font-size:1.3rem !important; }
      .popup-body{ padding:1.25rem !important; }
    }

@media(max-width:900px){
      /* Masquer : infos contact, divider, liens nav, bouton réserver */
      .nav-info, .nc, .nav-div{ display:none !important; }
      .nav-cta{ display:none !important; }

      /* Afficher le burger */

      /* Menu déroulant */
      .nav-links, .nl{
        display:none;
        flex-direction:column;
        gap:0;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:var(--cream);
        border-bottom:2px solid var(--gold);
        padding:.5rem 1.5rem 1rem;
        z-index:9999;
        list-style:none;
        margin:0;
        box-shadow:0 4px 16px rgba(0,0,0,.08);
      }
      .nav-links.open, .nl.open{
        display:flex !important;
      }
      .nav-links li, .nl li{
        border-bottom:1px solid rgba(0,0,0,.06);
      }
      .nav-links a, .nl a{
        display:block;
        padding:.75rem 0;
        font-size:.82rem;
        letter-spacing:.1em;
        text-transform:uppercase;
        color:var(--charcoal) !important;
        text-decoration:none;
        font-weight:400;
      }
      .nav-links a:hover, .nav-links a.active,
      .nl a:hover, .nl a.active{ color:var(--gold) !important; }

      /* Nav padding réduit */
      nav{ padding:.6rem 1.25rem; gap:.5rem; }
      .nli, .nav-logo-img{ height:40px !important; }
    }

@media(max-width:480px){
      nav{ padding:.5rem 1rem; }
      .nli, .nav-logo-img{ height:36px !important; }
    }

@media(max-width:768px) and (min-width:481px){
      nav{ padding:.6rem 1.5rem; }
      .nav-info, .nc, .nav-div{ display:none !important; }
      .nav-cta{ display:none !important; }
      .s{ padding:3rem 2rem; }
      .vg, .tg, .ag, .wg{ grid-template-columns:1fr 1fr !important; gap:1.5rem !important; }
      .cmain, .cmi{ padding:3rem 2rem !important; }
      .cmi{ grid-template-columns:1fr !important; gap:2.5rem !important; }
      .phi{ grid-template-columns:1fr !important; gap:2rem !important; }
      .stcols{ grid-template-columns:1fr !important; gap:2rem !important; }
      .prom-inner{ grid-template-columns:1fr 1fr !important; gap:1.25rem !important; }
      .f-inner{ flex-direction:column !important; gap:2rem !important; }
      .f-bottom{ flex-direction:column !important; text-align:center !important; }
    }

@media(max-width:600px){
      .popup-overlay{
        padding:.75rem !important;
        align-items:flex-end !important;
      }
      .popup-box{
        max-width:100% !important;
        width:100% !important;
        border-radius:12px 12px 0 0 !important;
        max-height:90svh !important;
        overflow-y:auto !important;
      }
      .popup-header{
        padding:1.5rem 1.25rem 1.25rem !important;
        position:sticky !important;
        top:0 !important;
        z-index:1 !important;
      }
      .popup-title{ font-size:1.25rem !important; }
      .popup-eyebrow{ font-size:.6rem !important; }
      .popup-body{ padding:1.25rem !important; }
      .popup-text{ font-size:.88rem !important; }
      .popup-field input{
        font-size:16px !important;
        padding:.6rem .85rem !important;
      }
      .popup-btn{
        padding:.9rem !important;
        font-size:.75rem !important;
      }
    }

@media(max-width:900px) and (min-width:601px){
      .popup-box{ max-width:480px !important; }
    }

@media(max-width:960px){
      .nav-info, .nc, .nav-div{ display:none !important; }
      .nav-cta{ display:none !important; }
      .nav-toggle{ display:block !important; }
      .nav-links{
        display:none;
        flex-direction:column;
        gap:0;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#F7F4EF;
        border-bottom:2px solid #B8964A;
        padding:.5rem 1.5rem 1rem;
        z-index:9999;
        list-style:none;
        margin:0;
        box-shadow:0 8px 24px rgba(0,0,0,.08);
      }
      .nav-links.open{ display:flex !important; }
      .nav-links li{ border-bottom:1px solid rgba(0,0,0,.06); }
      .nav-links a{
        display:block;
        padding:.75rem 0;
        font-size:.85rem;
        letter-spacing:.1em;
        text-transform:uppercase;
        color:#2C2822 !important;
        text-decoration:none;
      }
      .nav-links a:hover,
      .nav-links a.active{ color:#B8964A !important; }
      nav{
        padding:.6rem 1.25rem;
        gap:.5rem;
        position:fixed;
      }
    }

@media(max-width:480px){
      nav{ padding:.5rem 1rem; }
      .nav-logo-img{ height:36px !important; }
    }

@media(max-width:480px){
      .wl-overlay{align-items:flex-end;padding:.5rem;}
      .wl-box{border-radius:12px 12px 0 0;max-width:100%;}
      .wl-header{padding:1.5rem 1.25rem 1.25rem;}
      .wl-body{padding:1.25rem;}
      .wl-title{font-size:1.3rem;}
      .wl-fields{flex-direction:column;}
      .wl-year{display:none;}
    }

@media(max-width:480px){
      .wl-toast{
        white-space:normal;
        width:calc(100% - 2rem);
        left:1rem;
        transform:translateX(0) translateY(20px);
        text-align:center;
      }
      .wl-toast.show{transform:translateX(0) translateY(0);}
    }

@media(max-width:480px){
      .wl-fields input[type="tel"],
      .wl-fields select{
        min-width:100% !important;
        width:100% !important;
      }
    }


/* ═══════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════ */

@media (max-width: 680px) {
  .f-inner { gap: 2rem; }
  .f-brand { min-width: 100%; }
}

@media(max-width:480px){

      /* ── HERO : plus lumineux + overlay plus doux ── */
      .hero{
        padding:5rem 1.25rem 2.5rem !important;
        min-height:70svh !important;
      }
      .hero-bg::after{
        content:'';
        position:absolute;
        inset:0;
        background:linear-gradient(
          to bottom,
          rgba(44,40,34,0.10) 0%,
          rgba(44,40,34,0.35) 50%,
          rgba(44,40,34,0.65) 100%
        );
        pointer-events:none;
      }
      .hc{ position:relative; z-index:2; max-width:100%; }
      .ht{
        font-size:clamp(2rem,8vw,2.8rem) !important;
        line-height:1.1 !important;
      }
      .hs{
        font-size:.92rem !important;
        color:rgba(255,255,255,.95) !important;
        max-width:100% !important;
        line-height:1.75 !important;
        word-break:normal !important;
        overflow-wrap:break-word !important;
      }
      .h-rule{ display:none !important; }

      /* ── GRILLE PRINCIPALE → 1 colonne (info sidebar + formulaire) ── */
      .cmain{ padding:2rem 1.25rem !important; }
      .cmi{
        grid-template-columns:1fr !important;
        gap:2rem !important;
        max-width:100% !important;
      }

      /* ── SIDEBAR INFO ── */
      .cinfo h2{
        font-size:1.6rem !important;
        line-height:1.15 !important;
        margin-bottom:.85rem !important;
      }
      .cinfo p{
        font-size:.9rem !important;
        line-height:1.8 !important;
        word-break:normal !important;
        overflow-wrap:break-word !important;
      }
      .ib{ margin-bottom:.75rem !important; }
      .il{ font-size:.6rem !important; letter-spacing:.2em !important; }
      .iv{ font-size:.9rem !important; }

      /* ── FORMULAIRE ── */
      .cf{ padding:1.5rem 1.25rem !important; }
      .cm1{ padding:0 !important; }
      .cml{
        grid-template-columns:1fr !important;
        gap:.85rem !important;
      }
      input, select, textarea{
        width:100% !important;
        box-sizing:border-box !important;
        font-size:16px !important;
      }
      textarea{ min-height:100px !important; }

      /* Bouton envoi */
      .csend, button[type="submit"], .submit-btn{
        width:100% !important;
        display:block !important;
        text-align:center !important;
        box-sizing:border-box !important;
        padding:1rem !important;
      }

      /* ── TRUST BADGES (48h, 100%, etc.) ── */
      .ts{ padding:2rem 1.25rem !important; }
      .tg{
        grid-template-columns:1fr 1fr !important;
        gap:1rem !important;
      }

      /* ── TYPOGRAPHIE ── */
      .s{ padding:2rem 1.25rem !important; }
      .ttl{ font-size:clamp(1.6rem,6vw,2.2rem) !important; }
      .bt{
        font-size:.9rem !important;
        line-height:1.8 !important;
        word-break:normal !important;
        overflow-wrap:break-word !important;
        max-width:100% !important;
      }

      /* ── FOOTER ── */
      footer{ padding:2.5rem 1.25rem 1.5rem !important; }
      .f-inner{ flex-direction:column !important; gap:1.5rem !important; }
      .f-brand{ flex-direction:row !important; align-items:center !important; }
      .f-logo-img{ width:44px !important; }
      .f-bottom{
        flex-direction:column !important;
        text-align:center !important;
        gap:.35rem !important;
        font-size:.65rem !important;
      }
      .f-legal-links{ justify-content:center !important; }
    }

@media(max-width:900px){
      .nav-info, .nc, .nav-div{ display:none !important; }
      .nav-cta{ display:none !important; }
      nav{ padding:.6rem 1.25rem; }
      .cmi{ grid-template-columns:1fr !important; gap:2.5rem !important; }
    }

@media(max-width:768px) and (min-width:481px){
      nav{ padding:.6rem 1.5rem; }
      .nav-info, .nc, .nav-div{ display:none !important; }
      .nav-cta{ display:none !important; }
      .s{ padding:3rem 2rem; }
      .vg, .tg, .ag, .wg{ grid-template-columns:1fr 1fr !important; gap:1.5rem !important; }
      .cmain, .cmi{ padding:3rem 2rem !important; }
      .cmi{ grid-template-columns:1fr !important; gap:2.5rem !important; }
      .phi{ grid-template-columns:1fr !important; gap:2rem !important; }
      .stcols{ grid-template-columns:1fr !important; gap:2rem !important; }
      .prom-inner{ grid-template-columns:1fr 1fr !important; gap:1.25rem !important; }
      .f-inner{ flex-direction:column !important; gap:2rem !important; }
      .f-bottom{ flex-direction:column !important; text-align:center !important; }
    }

@media(max-width:600px){
      .popup-overlay{
        padding:.75rem !important;
        align-items:flex-end !important;
      }
      .popup-box{
        max-width:100% !important;
        width:100% !important;
        border-radius:12px 12px 0 0 !important;
        max-height:90svh !important;
        overflow-y:auto !important;
      }
      .popup-header{
        padding:1.5rem 1.25rem 1.25rem !important;
        position:sticky !important;
        top:0 !important;
        z-index:1 !important;
      }
      .popup-title{ font-size:1.25rem !important; }
      .popup-eyebrow{ font-size:.6rem !important; }
      .popup-body{ padding:1.25rem !important; }
      .popup-text{ font-size:.88rem !important; }
      .popup-field input{
        font-size:16px !important;
        padding:.6rem .85rem !important;
      }
      .popup-btn{
        padding:.9rem !important;
        font-size:.75rem !important;
      }
    }

@media(max-width:900px) and (min-width:601px){
      .popup-box{ max-width:480px !important; }
    }

@media(max-width:900px){
      .cbf{
        display:flex !important;
        flex-direction:row !important;
        gap:.65rem !important;
        align-items:flex-start !important;
        width:100% !important;
      }
      .cbf input[type="checkbox"]{
        flex-shrink:0 !important;
        width:18px !important;
        height:18px !important;
        margin-top:.15rem !important;
      }
      .cbf label{
        flex:1 !important;
        min-width:0 !important;
        font-size:.85rem !important;
        line-height:1.7 !important;
        word-break:normal !important;
        overflow-wrap:break-word !important;
        white-space:normal !important;
      }
    }

@media(max-width:960px){
      .nav-info, .nc, .nav-div{ display:none !important; }
      .nav-cta{ display:none !important; }
      .nav-toggle{ display:block !important; }
      .nav-links{
        display:none;
        flex-direction:column;
        gap:0;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#F7F4EF;
        border-bottom:2px solid #B8964A;
        padding:.5rem 1.5rem 1rem;
        z-index:9999;
        list-style:none;
        margin:0;
        box-shadow:0 8px 24px rgba(0,0,0,.08);
      }
      .nav-links.open{ display:flex !important; }
      .nav-links li{ border-bottom:1px solid rgba(0,0,0,.06); }
      .nav-links a{
        display:block;
        padding:.75rem 0;
        font-size:.85rem;
        letter-spacing:.1em;
        text-transform:uppercase;
        color:#2C2822 !important;
        text-decoration:none;
      }
      .nav-links a:hover,
      .nav-links a.active{ color:#B8964A !important; }
      nav{
        padding:.6rem 1.25rem;
        gap:.5rem;
        position:fixed;
      }
    }

@media(max-width:480px){
      nav{ padding:.5rem 1rem; }
      .nav-logo-img{ height:36px !important; }
    }


/* ═══════════════════════════════════════════
   RÈGLES COMMUNES — TOUTES PAGES
   ═══════════════════════════════════════════ */

/* ── Burger menu ── */
@media(max-width:960px){
  .nav-info, .nc, .nav-div { display:none !important; }
  .nav-cta { display:none !important; }
  .nav-toggle { display:block !important; }
  .nav-links {
    display:none;
    flex-direction:column;
    position:absolute;
    top:100%; left:0; right:0;
    background:#F7F4EF;
    border-bottom:2px solid #B8964A;
    padding:.5rem 1.5rem 1rem;
    z-index:9999;
    list-style:none;
    margin:0;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
  }
  .nav-links.open { display:flex !important; }
  .nav-links li { border-bottom:1px solid rgba(0,0,0,.06); }
  .nav-links a {
    display:block;
    padding:.75rem 0;
    font-size:.85rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:#2C2822 !important;
    text-decoration:none;
  }
  .nav-links a.active { color:#B8964A !important; }
  nav { padding:.6rem 1.25rem; gap:.5rem; position:fixed; }
}

/* ── Footer commun ── */
@media(max-width:480px){
  footer { padding:2.5rem 1.25rem 1.5rem !important; }
  .f-inner { flex-direction:column !important; gap:1.5rem !important; }
  .f-grid { grid-template-columns:1fr !important; gap:1.5rem !important; }
  .f-bottom { flex-direction:column !important; text-align:center !important; }
  .f-legal-links { justify-content:center !important; }
}

/* ── Popups communs ── */
@media(max-width:600px){
  .wl-overlay { align-items:flex-end !important; padding:.5rem !important; }
  .wl-box { border-radius:12px 12px 0 0 !important; max-width:100% !important; max-height:90svh !important; overflow-y:auto !important; }
  .wl-year { display:none !important; }
  .wl-fields { flex-direction:column !important; }
  .popup-overlay { padding:.75rem !important; align-items:flex-end !important; }
  .popup-box { border-radius:12px 12px 0 0 !important; max-height:90svh !important; overflow-y:auto !important; }
}

/* ── Témoignages communs ── */
@media(max-width:480px){
  .testi-google { padding:1.25rem !important; }
  .testi-google p { font-size:.88rem !important; line-height:1.75 !important; }
  .rg-cols { grid-template-columns:1fr !important; gap:1.25rem !important; }
}


/* ── Contact — Formulaire mobile : une seule colonne, alignement ── */
/* (corrige le desalignement code postal / pays / profil) */
@media(max-width:768px){
  #cform .frow{
    grid-template-columns:1fr !important;
    gap:.85rem !important;
  }
}

/* ── Contact — Champ téléphone — fix proportions ── */
/* (cible le vrai bouton visible .tel-prefix-btn, pas le champ #indicatif qui est cache) */
@media(max-width:768px){
  .tel-wrapper{
    gap:.5rem !important;
  }
  .tel-prefix-btn{
    width:auto !important;
    min-width:88px !important;
    flex-shrink:0 !important;
    padding:.72rem .55rem !important;
    font-size:.85rem !important;
    box-sizing:border-box !important;
    justify-content:center !important;
  }
  .tel-input{
    flex:1 1 auto !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
}

/* ── Contact — Espace entre la case à cocher et le bouton d'envoi ── */
@media(max-width:768px){
  .cbf{
    margin-bottom:2rem !important;
  }
}