/*
 * ═══════════════════════════════════════════════════════════════
 *   CTI-CI - responsive-mobile.css
 *   UNIQUEMENT des media queries - zéro style desktop touché
 *   Couvre : header/nav mobile, footer, et toutes les pages internes
 *   Switch Maker SARL
 * ═══════════════════════════════════════════════════════════════
 *
 *   Breakpoints :
 *   ≤ 1024px  tablette paysage + hamburger
 *   ≤  768px  petite tablette / grand téléphone
 *   ≤  480px  téléphone standard
 *   ≤  360px  petit téléphone
 *   max-height:520px + landscape → téléphone paysage
 */


/* ═══════════════════════════════════════════════════════════════
   1. HEADER / NAV - ≤ 1024px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Cacher liens desktop, montrer hamburger */
  .nav-links   { display: none !important }

  /* Garder .nav-actions mais ne montrer QUE la loupe */
  .nav-actions { display: flex !important; gap: .3rem }
  .nav-actions .nav-btn-adhesion,
  .nav-actions .nav-btn-contact  { display: none !important }
  .nav-actions .nav-btn-search   {
    display: flex !important;
    width: 36px; height: 36px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    color: rgba(255,255,255,.75);
    align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .2s, color .2s;
  }
  .nav-actions .nav-btn-search:hover {
    background: rgba(255,107,26,.2); color: #fff;
  }

  .nav-hamburger { display: flex !important }
  nav { padding: 0 5% !important }

  /* Hauteur nav tablette */
  nav           { height: 90px }
  nav.stuck     { height: 70px }
  .nav-logo-png             { height: 80px }
  nav.stuck .nav-logo-png   { height: 60px }

  /* Menu mobile : remplacer +/- par chevron SVG rotatif */
  .nav-mobile-toggle span {
    font-size: 0 !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 24px; height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230c2671' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
    background-color: rgba(12,38,113,.07);
    border-radius: 50%;
    transition: transform .3s, background-color .2s;
    flex-shrink: 0;
  }
  /* Ouvert : rotation 90° + fond orangé */
  .nav-mobile-sub.open + .nav-mobile-toggle span,
  .nav-mobile-toggle.open span {
    transform: rotate(90deg);
    background-color: rgba(255,107,26,.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FF6B1A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
  }

  /* Sous-menus : slide smooth via max-height au lieu de display:none */
  .nav-mobile-sub {
    display: block !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 !important;
    transition: max-height .35s cubic-bezier(.25,.46,.45,.94), opacity .3s;
  }
  .nav-mobile-sub.open {
    max-height: 500px;
    opacity: 1;
    padding: .3rem 0 .5rem .8rem !important;
  }

  /* Items du sous-menu */
  .nav-mobile-sub li a {
    padding: .52rem .5rem .52rem .75rem;
    font-size: .74rem;
    border-left: 2px solid transparent;
    transition: color .18s, border-color .18s, padding-left .18s;
  }
  .nav-mobile-sub li a:hover {
    color: #FF6B1A;
    border-left-color: #FF6B1A;
    padding-left: 1.1rem;
  }

  /* Safe areas */
  .nav-mobile {
    padding-bottom: env(safe-area-inset-bottom);
    padding-right: env(safe-area-inset-right);
  }
  .nav-mobile-actions {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
  .search-overlay {
    padding-top: calc(100px + env(safe-area-inset-top));
  }

  /* Nav interne pages : scroll horizontal propre */
  .ip-inner-nav { top: 70px }
  .ip-inner-nav-links { -webkit-overflow-scrolling: touch; scrollbar-width: none }
  .ip-inner-nav-links::-webkit-scrollbar { display: none }
}

/* ── Tablette intermédiaire (769–1024px) ── */
@media (max-width: 1024px) and (min-width: 769px) {
  nav           { height: 90px }
  nav.stuck     { height: 72px }
  .nav-logo-png             { height: 80px }
  nav.stuck .nav-logo-png   { height: 62px }

  /* Footer : logo raisonnable, brand en grille */
  .ft-logo { width: 160px !important }
  .ft-brand-row {
    display: grid !important;
    grid-template-columns: 170px 1fr;
    align-items: start;
    gap: 1.5rem;
  }
  .ft-brand-row .ft-contact-list {
    border-left: 1px solid rgba(255,255,255,.07);
    padding-left: 1.5rem;
  }
  .ft-col { padding: 0 1.5rem }
  .ft-col:first-child { padding-left: 0 }
  .ft-bar { padding: .9rem 4% }

  /* Pages internes - grilles */
  .ip-lead { grid-template-columns: 1fr }
  .ip-grid.cols-4 { grid-template-columns: repeat(2, 1fr) }
  .ip-team-grid { grid-template-columns: repeat(2, 1fr) }
  .ip-partner-grid { grid-template-columns: repeat(3, 1fr) }
  .ip-glossaire { grid-template-columns: repeat(2, 1fr) }
  .ip-roadmap { grid-template-columns: repeat(3, 1fr) }
  .ip-steps { grid-template-columns: repeat(2, 1fr) }
  .ip-steps::before { display: none }
  .ip-blog-grid { grid-template-columns: repeat(2, 1fr) }
  .ip-doc-grid { grid-template-columns: repeat(2, 1fr) }
  .ip-media-grid { grid-template-columns: repeat(2, 1fr) }
  .ip-contact-grid { grid-template-columns: 1fr }
  .ip-single-layout { grid-template-columns: 1fr }
  .ip-sidebar { position: static }

  /* Page Innovation / Observatoire : colonnes 2 côte à côte trop serrées */
  .ip-section > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .ip-section > div[style*="grid-template-columns:1fr 1.3fr"],
  .ip-section > div[style*="grid-template-columns:1fr 1.4fr"],
  .ip-section > div[style*="grid-template-columns:1fr 2fr"]  {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   2. PETITE TABLETTE / GRAND TÉLÉPHONE - ≤ 768px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Nav */
  nav           { height: 80px; padding: 0 5% !important }
  nav.stuck     { height: 64px }
  .nav-logo-png             { height: 68px }
  nav.stuck .nav-logo-png   { height: 54px }
  .nav-mobile   { width: 300px; max-width: 88vw }
  .ip-inner-nav { top: 64px }
  .search-overlay {
    padding-top: calc(80px + env(safe-area-inset-top));
    padding-left:  calc(1rem + env(safe-area-inset-left));
    padding-right: calc(1rem + env(safe-area-inset-right));
  }

  /* ── Page band ── */
  .page-band { padding: 6.5rem 5% 2rem }
  .page-band-title { font-size: clamp(1.8rem, 7vw, 2.8rem) }
  .page-band-sub { font-size: .84rem }

  /* ── Sections ── */
  .ip-section { padding: 2.5rem 5% }
  .ip-lead    { padding: 2.5rem 5%; grid-template-columns: 1fr; gap: 2rem }

  /* ── Grilles pages internes ── */
  .ip-grid, .ip-grid.cols-4, .ip-grid.cols-2 { grid-template-columns: 1fr }
  .ip-stats       { grid-template-columns: repeat(2, 1fr) }
  .ip-steps       { grid-template-columns: 1fr }
  .ip-steps::before { display: none }
  .ip-roadmap     { grid-template-columns: 1fr }
  .ip-blog-grid   { grid-template-columns: 1fr }
  .ip-doc-grid    { grid-template-columns: 1fr }
  .ip-media-grid  { grid-template-columns: 1fr }
  .ip-team-grid   { grid-template-columns: repeat(2, 1fr) }
  .ip-partner-grid { grid-template-columns: repeat(2, 1fr) }
  .ip-glossaire   { grid-template-columns: 1fr }
  .ip-contact-grid { grid-template-columns: 1fr }
  .ip-single-layout { grid-template-columns: 1fr }
  .ip-sidebar     { position: static }
  .ip-single-nav  { grid-template-columns: 1fr }
  .ip-form-row    { grid-template-columns: 1fr }

  /* Colonnes inline des pages Innovation/Observatoire/Partenaires */
  .ip-section > div[style*="grid-template-columns:1fr 1fr"],
  .ip-section > div[style*="grid-template-columns:1fr 1.3fr"],
  .ip-section > div[style*="grid-template-columns:1fr 1.4fr"],
  .ip-section > div[style*="grid-template-columns:1fr 2fr"]  {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* ── CTA section ── */
  .ip-cta { padding: 2.5rem 5% }
  .ip-cta-btns { flex-direction: column; align-items: stretch }
  .ip-btn-primary, .ip-btn-ghost, .ip-btn-secondary {
    justify-content: center;
  }

  /* ── Service hero ── */
  .ip-service-hero { padding: 6rem 5% 2.5rem }
  .ip-service-title { font-size: clamp(1.7rem, 7vw, 2.6rem) }

  /* ── Archive actualités ── */
  .ip-archive { padding: 2.5rem 5% }
  .ip-archive-filters { gap: .4rem }
  .ip-filter { font-size: .6rem; padding: .38rem .8rem }

  /* ── Contact ── */
  .ip-contact-map iframe { height: 260px }

  /* ── Footer ── */
  .ft-logo { width: 130px !important }
  .ft-brand-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
  .ft-brand-row .ft-contact-list { border-left: none !important; padding-left: 0 !important }
  .ft-inner {
    grid-template-columns: 1fr 1fr !important;
    row-gap: 0 !important;
    padding: 2rem 5% !important;
  }
  .ft-col-brand {
    grid-column: span 2 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    padding-bottom: 1.8rem !important;
    padding-right: 0 !important;
  }
  .ft-col {
    padding: 1.5rem 0 0 !important;
    border-right: none !important;
  }
  .ft-col:nth-child(3) { padding-right: 1rem !important }
  .ft-col:nth-child(4) {
    padding-left: 1rem !important;
    border-left: 1px solid rgba(255,255,255,.05) !important;
  }
  .ft-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .65rem;
    padding: .85rem 5% !important;
  }
  .ft-legal-links { flex-wrap: wrap; gap: .5rem 1rem }
}


/* ═══════════════════════════════════════════════════════════════
   3. TÉLÉPHONE STANDARD - ≤ 480px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Variables espacement ── */
  :root {
    --sp:    1.6rem 5%;
    --sp-sm: 1.3rem 5%;
    --sp-hd: 1.3rem 5% 0;
  }

  /* ── Nav ── */
  nav           { height: 68px; padding: 0 5% !important }
  nav.stuck     { height: 58px }
  .nav-logo-png             { height: 56px }
  nav.stuck .nav-logo-png   { height: 46px }
  .nav-hamburger { width: 38px; height: 38px }
  .nav-actions .nav-btn-search { width: 32px; height: 32px }
  .nav-mobile { width: 100% !important; max-width: 100% !important; right: -100% }
  .nav-mobile.open { right: 0 }
  .ip-inner-nav { top: 58px; padding: .5rem 4% }
  .ip-inner-nav-link { font-size: .6rem; padding: .45rem .7rem }
  .search-overlay {
    padding: calc(68px + env(safe-area-inset-top)) 1rem 2rem;
  }

  /* ── Page band ── */
  .page-band { padding: 5.5rem 5% 2rem }
  .page-band-title { font-size: clamp(1.6rem, 8.5vw, 2.4rem) }
  .page-band-sub { font-size: .80rem }
  .page-band-breadcrumb { font-size: .55rem }

  /* ── Sections ── */
  .ip-section { padding: 2rem 5% }
  .ip-lead    { padding: 2rem 5%; gap: 1.5rem }

  /* ── Typographie ── */
  .ip-title { font-size: clamp(1.6rem, 7vw, 2.2rem) }
  .ip-intro { font-size: .88rem }

  /* ── Grilles ── */
  .ip-grid, .ip-grid.cols-4, .ip-grid.cols-2 { grid-template-columns: 1fr }
  .ip-stats    { grid-template-columns: 1fr 1fr }
  .ip-team-grid { grid-template-columns: 1fr }
  .ip-partner-grid { grid-template-columns: 1fr 1fr }
  .ip-glossaire { grid-template-columns: 1fr }
  .ip-doc-grid  { grid-template-columns: 1fr }
  .ip-media-grid { grid-template-columns: 1fr }
  .ip-blog-grid  { grid-template-columns: 1fr }
  .ip-roadmap   { grid-template-columns: 1fr }
  .ip-steps     { grid-template-columns: 1fr }
  .ip-form-row  { grid-template-columns: 1fr }
  .ip-single-nav { grid-template-columns: 1fr }

  /* Grilles inline pages (Innovation, Observatoire…) */
  .ip-section > div[style*="grid-template-columns"],
  .ip-section > div[style*="display:grid"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* ── Service hero ── */
  .ip-service-hero { padding: 5.5rem 5% 2rem }
  .ip-service-title { font-size: clamp(1.6rem, 8vw, 2.4rem) }
  .ip-service-desc  { font-size: .88rem }
  .ip-service-points { padding: 1rem 1.1rem }

  /* ── CTA ── */
  .ip-cta { padding: 2.2rem 5% }
  .ip-cta-title { font-size: clamp(1.4rem, 6.5vw, 2rem) }
  .ip-cta-btns {
    flex-direction: column;
    align-items: stretch;
    gap: .7rem;
  }
  .ip-btn-primary, .ip-btn-ghost, .ip-btn-secondary {
    justify-content: center;
    width: 100%;
  }

  /* ── Archive ── */
  .ip-archive { padding: 2rem 5% }
  .ip-archive-filters { gap: .35rem }

  /* ── Articles ── */
  .ip-article-img { height: 180px }
  .ip-article-body { padding: 1.1rem }
  .ip-article-title { font-size: .92rem }

  /* ── Contact ── */
  .ip-contact-grid { gap: 2rem }
  .ip-contact-map iframe { height: 220px }
  .ip-socials { flex-wrap: wrap; gap: .5rem }

  /* ── Single ── */
  .ip-single { padding: 2rem 5% }
  .ip-single-layout { gap: 2rem }

  /* ── Sidebar ── */
  .ip-sidebar { gap: 1rem }
  .ip-sidebar-cta { padding: 1.1rem }

  /* ── Formulaire ── */
  .ip-input { font-size: .84rem; padding: .75rem .85rem }
  .ip-textarea { min-height: 110px }

  /* ── Pagination ── */
  .ip-pagination a,
  .ip-pagination span { width: 34px; height: 34px; font-size: .65rem }

  /* ── Nav single (prev/next) ── */
  .ip-single-nav-item { padding: .8rem }
  .ip-single-nav-ttl  { font-size: .75rem }

  /* ── Médiathèque ── */
  .ip-media-body { padding: .85rem 1rem }
  .ip-media-title { font-size: .8rem }

  /* ── Glossaire ── */
  .ip-glossaire-sigle { font-size: 1rem }
  .ip-glossaire-def   { font-size: .74rem }

  /* ── Doc cards ── */
  .ip-doc-card { padding: 1.1rem }
  .ip-doc-title { font-size: .85rem }

  /* ── Partenaires ── */
  .ip-partner-card { padding: 1.1rem }
  .ip-partner-logo  { height: 46px }

  /* ── Équipe ── */
  .ip-team-photo { height: 200px }
  .ip-team-body  { padding: 1rem }

  /* ── Page ressources : onglets docs ── */
  .ip-doc-tabs { gap: .4rem }
  .ip-doc-tab  { font-size: .6rem; padding: .38rem .8rem }

  /* ── Footer ── */
  .ft-logo { width: 110px !important }
  .ft-brand-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .9rem !important;
  }
  .ft-inner {
    grid-template-columns: 1fr !important;
    padding: 1.8rem 5% !important;
    row-gap: 0 !important;
  }
  .ft-col-brand {
    grid-column: span 1 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    padding-bottom: 1.5rem !important;
    padding-right: 0 !important;
  }
  .ft-col {
    padding: 1.2rem 0 0 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.04) !important;
  }
  .ft-col:last-child {
    border-bottom: none !important;
    padding-bottom: 1rem !important;
  }
  .ft-col-title { font-size: .5rem; margin-bottom: .9rem }
  .ft-list a    { font-size: .78rem }
  .ft-tagline   { font-size: .73rem }
  .ft-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .55rem;
    padding: .85rem 5% !important;
  }
  .ft-copy { font-size: .54rem; line-height: 1.65 }
  .ft-legal-links { flex-wrap: wrap; gap: .45rem .9rem }
  .ft-legal-links a { font-size: .54rem }
}


/* ═══════════════════════════════════════════════════════════════
   4. PETIT TÉLÉPHONE - ≤ 360px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {

  nav           { height: 60px }
  nav.stuck     { height: 52px }
  .nav-logo-png             { height: 48px }
  nav.stuck .nav-logo-png   { height: 40px }
  .ip-inner-nav { top: 52px }
  .search-overlay { padding-top: calc(60px + env(safe-area-inset-top)) }

  .page-band { padding: 5rem 4.5% 1.8rem }
  .page-band-title { font-size: clamp(1.4rem, 9vw, 2rem) }

  .ip-section { padding: 1.8rem 4.5% }
  .ip-title   { font-size: clamp(1.4rem, 8.5vw, 2rem) }

  .ip-partner-grid { grid-template-columns: 1fr }
  .ip-stats        { grid-template-columns: 1fr }

  .ip-service-hero  { padding: 5rem 4.5% 1.8rem }
  .ip-service-title { font-size: clamp(1.4rem, 9vw, 2rem) }

  .ft-logo  { width: 95px !important }
  .ft-tagline { font-size: .68rem }
  .ft-list a  { font-size: .75rem }
  .ft-copy, .ft-legal-links a { font-size: .5rem }

  .ip-cta-title { font-size: clamp(1.3rem, 7.5vw, 1.8rem) }
  .ip-btn-primary,
  .ip-btn-ghost,
  .ip-btn-secondary { font-size: .65rem; padding: .7rem 1rem }
}


/* ═══════════════════════════════════════════════════════════════
   5. TÉLÉPHONE EN PAYSAGE - hauteur < 520px
═══════════════════════════════════════════════════════════════ */
@media (max-height: 520px) and (orientation: landscape) {

  /* Hero : sortir du 100vh */
  #hero { height: auto; min-height: 100vh; padding: 5.5rem 6% 2.5rem }
  .hero-inner { padding: 0 5% }
  .h-scroll, .hero-orb-a, .hero-orb-b,
  .hero-ring, .hero-ring2, .hero-ring3 { display: none }
  .hero-h1 { font-size: clamp(1.5rem, 5vh, 2.6rem) }
  .hero-tagline { font-size: .78rem; margin-top: .5rem }
  .hero-btns { flex-direction: row; flex-wrap: wrap; gap: .6rem; margin-top: .7rem }
  .btn-fill, .btn-out { padding: .75rem 1.2rem; width: auto }

  /* Nav */
  nav       { height: 56px }
  nav.stuck { height: 52px }
  .nav-logo-png { height: 48px }

  /* Pages internes */
  .page-band { padding: 4.5rem 5% 1.8rem }
  .ip-section { padding: 1.8rem 5% }
  .ip-inner-nav { top: 52px }

  /* Footer compact */
  .ft-inner { padding: 1.5rem 5% 1rem !important }
  .ft-logo  { width: 100px !important }
}


/* ═══════════════════════════════════════════════════════════════
   6. CORRECTIONS TRANSVERSALES TOUS FORMATS MOBILES
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Tableaux : scroll horizontal */
  .ip-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch }
  .ip-table { min-width: 560px }

  /* Images wysiwyg */
  .ip-wysiwyg img   { max-width: 100%; height: auto }
  .ip-wysiwyg table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch }
  .ip-wysiwyg       { word-wrap: break-word; overflow-wrap: break-word }

  /* Iframes (cartes, vidéos) */
  iframe, embed, object, video, canvas { max-width: 100% }

  /* Tactile : pas de halo tap */
  * { -webkit-tap-highlight-color: transparent }

  /* Curseur personnalisé inutile sur tactile */
  #cur, #cur-o { display: none !important }

  /* Piliers : desc toujours visible (pas de hover fiable) */
  .pill-desc  { max-height: 160px; opacity: 1 }
  .pill::before { opacity: .97 }

  /* Overflow horizontal global */
  html, body { max-width: 100%; overflow-x: hidden }

  /* Scroll padding sous nav fixe */
  html { scroll-padding-top: 90px }
  section[id], .ip-section[id],
  #hero, #services, #contact, #partners,
  #pillars, #mission, #enchant, #blog {
    scroll-margin-top: 84px;
  }
}

@media (max-width: 768px) {
  html { scroll-padding-top: 80px }
  section[id], .ip-section[id] { scroll-margin-top: 74px }
}

@media (max-width: 480px) {
  html { scroll-padding-top: 68px }
  section[id], .ip-section[id] { scroll-margin-top: 62px }
}

@media (max-width: 360px) {
  html { scroll-padding-top: 60px }
  section[id], .ip-section[id] { scroll-margin-top: 54px }
}


/* ═══════════════════════════════════════════════════════════════
   CORRECTIONS v4 - panel mobile logo + footer alignement
═══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
   PANEL MOBILE
   ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Structure en flex column sans overflow sur le panel entier */
  .nav-mobile {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 1001 !important;
  }
  .nav-mobile-overlay { z-index: 1000 !important }

  /* En-tête du panel : logo à gauche + ✕ à droite */
  .nav-mobile-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: .8rem 1.2rem !important;
    border-bottom: 1px solid rgba(12,38,113,.08) !important;
    background: #fff !important;
    flex-shrink: 0 !important;
    min-height: 60px !important;
  }
  .nav-mobile-head-logo {
    height: 44px !important;
    width: auto !important;
    display: block !important;
    mix-blend-mode: multiply !important;
  }

  /* Bouton close dans le head */
  .nav-mobile-close {
    position: static !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #eef0f8 !important;
    border: 1.5px solid rgba(12,38,113,.12) !important;
    border-radius: 50% !important;
    color: #6a6a8a !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background .2s, color .2s, border-color .2s !important;
  }
  .nav-mobile-close:hover {
    background: #FF6B1A !important;
    border-color: #FF6B1A !important;
    color: #fff !important;
  }

  /* Zone liens : scrollable */
  .nav-mobile-links {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: .4rem 1.4rem !important;
    margin: 0 !important;
  }

  /* Actions en bas */
  .nav-mobile-actions {
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    padding: 1rem 1.4rem 1.4rem !important;
    border-top: 1px solid rgba(12,38,113,.08) !important;
    background: #f5f7ff !important;
    gap: .6rem !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .nav-mobile-actions .nav-btn-adhesion,
  .nav-mobile-actions .nav-btn-contact {
    justify-content: center !important;
    width: 100% !important;
    padding: .82rem 1rem !important;
    font-size: .68rem !important;
    letter-spacing: .08em !important;
    display: flex !important;
    align-items: center !important;
  }
  .nav-mobile-actions .nav-btn-contact {
    border-color: #0c2671 !important;
    color: #0c2671 !important;
  }
  .nav-mobile-actions .nav-btn-contact:hover {
    background: #0c2671 !important;
    color: #fff !important;
  }

  /* Chevron SVG - remplacer +/- */
  .nav-mobile-toggle span {
    font-size: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230c2671' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px !important;
    background-color: rgba(12,38,113,.07) !important;
    border-radius: 50% !important;
    transition: transform .3s, background-color .2s !important;
    flex-shrink: 0 !important;
  }
  .nav-mobile-toggle.open span {
    transform: rotate(90deg) !important;
    background-color: rgba(255,107,26,.12) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FF6B1A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important;
  }

  /* Sous-menus smooth */
  .nav-mobile-sub {
    display: block !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    padding: 0 !important;
    transition: max-height .35s ease, opacity .3s !important;
  }
  .nav-mobile-sub.open {
    max-height: 500px !important;
    opacity: 1 !important;
    padding: .3rem 0 .5rem .8rem !important;
  }
}

/* Téléphone : panel pleine largeur */
@media (max-width: 480px) {
  .nav-mobile {
    width: 100% !important;
    max-width: 100% !important;
    right: -100% !important;
  }
  .nav-mobile.open { right: 0 !important }
}


/* ────────────────────────────────────────────────────────────
   FOOTER - toutes colonnes alignées, logo centré
   ─────────────────────────────────────────────────────────── */

/* Tablette (769–1024px) */
@media (max-width: 1024px) and (min-width: 769px) {

  .ft-inner {
    grid-template-columns: 1fr 1fr !important;
    row-gap: 0 !important;
    padding: 2.5rem 5% !important;
  }
  /* Colonne brand : pleine largeur, tout centré */
  .ft-col-brand {
    grid-column: span 2 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    padding: 0 0 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .ft-brand-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: .8rem !important;
    width: 100% !important;
  }
  .ft-logo {
    width: 140px !important;
    display: block !important;
    margin: 0 auto !important;
  }
  .ft-brand-row .ft-contact-list {
    border-left: none !important;
    padding-left: 0 !important;
  }
  .ft-tagline {
    text-align: center !important;
    font-size: .78rem !important;
    max-width: 480px !important;
    margin: 0 auto !important;
  }
  .ft-socials { justify-content: center !important }

  /* Colonnes liens : 2 × 2, toutes pareilles */
  .ft-col {
    padding: 2rem 0 1rem !important;
    border-right: none !important;
    border-left: none !important;
  }
  /* Séparateur vertical entre col 2 et 3 */
  .ft-col:nth-child(3) {
    padding-right: 2rem !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
  }
  .ft-col:nth-child(4) {
    padding-left: 2rem !important;
  }
  .ft-col-title {
    font-size: .52rem !important;
    color: rgba(255,255,255,.5) !important;
    margin-bottom: 1rem !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    padding-bottom: .5rem !important;
  }
  .ft-list { gap: .65rem !important }
  .ft-list a {
    font-size: .80rem !important;
    color: rgba(255,255,255,.6) !important;
    padding-left: 0 !important;
    border-left: none !important;
  }
  .ft-list a:hover { color: #fff !important; padding-left: .35rem !important }

  .ft-bar { padding: .9rem 5% !important }
  .ft-copy { font-size: .56rem !important; color: rgba(255,255,255,.35) !important }
  .ft-legal-links { gap: 1rem !important }
  .ft-legal-links a { font-size: .56rem !important; color: rgba(255,255,255,.35) !important }
}

/* Mobile (≤768px) : 1 colonne, tout aligné pareil */
@media (max-width: 768px) {

  .ft-inner {
    grid-template-columns: 1fr !important;
    padding: 2rem 5% !important;
    row-gap: 0 !important;
  }

  /* Brand : centré */
  .ft-col-brand {
    grid-column: span 1 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    padding: 0 0 1.8rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .ft-brand-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: .8rem !important;
    width: 100% !important;
  }
  .ft-logo {
    width: 120px !important;
    display: block !important;
    margin: 0 auto !important;
  }
  .ft-brand-row .ft-contact-list {
    border-left: none !important;
    padding-left: 0 !important;
    text-align: left !important;
  }
  .ft-tagline {
    text-align: center !important;
    font-size: .76rem !important;
    color: rgba(255,255,255,.5) !important;
    max-width: 100% !important;
    margin: 0 auto .8rem !important;
  }
  .ft-socials { justify-content: center !important }

  /* Toutes les colonnes de liens - IDENTIQUES */
  .ft-col {
    padding: 1.4rem 0 0 !important;
    border-right: none !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
    border-bottom: none !important;
  }
  .ft-col:last-child { padding-bottom: 1rem !important }

  /* Reset de tout padding/border spécifique à certaines colonnes */
  .ft-col:nth-child(3),
  .ft-col:nth-child(4) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }

  .ft-col-title {
    font-size: .52rem !important;
    color: rgba(255,255,255,.5) !important;
    margin-bottom: 1rem !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    padding-bottom: .5rem !important;
    letter-spacing: .2em !important;
  }
  .ft-list { gap: .65rem !important }
  .ft-list a {
    font-size: .80rem !important;
    color: rgba(255,255,255,.6) !important;
    padding-left: 0 !important;
    border-left: none !important;
  }
  .ft-list a:hover { color: #fff !important; padding-left: .35rem !important }

  .ft-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .6rem !important;
    padding: .85rem 5% !important;
  }
  .ft-copy { font-size: .55rem !important; color: rgba(255,255,255,.35) !important; line-height: 1.65 !important }
  .ft-legal-links { flex-wrap: wrap !important; gap: .5rem 1rem !important }
  .ft-legal-links a { font-size: .55rem !important; color: rgba(255,255,255,.35) !important }
}

/* Téléphone ≤480px */
@media (max-width: 480px) {
  .ft-logo { width: 100px !important }
  .ft-inner { padding: 1.8rem 5% !important }
  .ft-col { padding-top: 1.1rem !important }
  .ft-bar { padding: .8rem 5% !important }
}

/* Petit téléphone ≤360px */
@media (max-width: 360px) {
  .ft-logo { width: 88px !important }
  .ft-tagline { font-size: .7rem !important }
  .ft-list a  { font-size: .76rem !important }
}


/* ═══════════════════════════════════════════════════════════════
   SERVICES - uniformité des cards en responsive
   Problème : .sc-full a grid-column:span 3 qui casse l'alignement
   en mobile → toutes les cards doivent être identiques
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Grille services : 2 colonnes sur tablette */
  .srv-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.2rem !important;
  }

  /* sc-full : span 2 sur tablette, même largeur que les autres */
  .sc-full {
    grid-column: span 2 !important;
  }
}

@media (max-width: 768px) {

  /* Grille : 1 seule colonne */
  .srv-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* TOUTES les cards - même style, même taille, pleine largeur */
  .srv-grid .sc,
  .srv-grid .sc-full {
    grid-column: span 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* sc-full : même padding que les autres cards normales */
  .sc-full .sc-inner {
    padding: 1.5rem 1.6rem !important;
  }

  /* Hauteur minimum uniforme */
  .srv-grid .sc,
  .srv-grid .sc-full {
    min-height: 0 !important;
  }
}

@media (max-width: 480px) {
  .srv-grid {
    gap: .85rem !important;
    padding: 0 !important;
  }
  .srv-grid .sc,
  .srv-grid .sc-full {
    grid-column: span 1 !important;
    width: 100% !important;
  }
  .sc-full .sc-inner {
    padding: 1.3rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   PAGE ESPACE SFD - débordements corrigés
   Problèmes : grilles inline 2 colonnes + tableau ip-table
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Grilles inline (style="display:grid;grid-template-columns:1fr 1fr")
     Ces grilles sont en inline style donc non ciblables directement.
     On force tous les enfants directs de .ip-section à passer en 1 col ── */
  .ip-section > div[style*="grid-template-columns:1fr 1fr"],
  .ip-section > div[style*="grid-template-columns:1fr 1.3fr"],
  .ip-section > div[style*="grid-template-columns:1fr 1.4fr"],
  .ip-section > div[style*="grid-template-columns:repeat(3,1fr)"],
  .ip-section > div[style*="grid-template-columns:repeat(2,1fr)"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }

  /* ── Tableau comparatif - scroll horizontal propre ── */
  .ip-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -5% !important;
    padding: 0 5% !important;
  }

  /* Conteneur inline du tableau (pas de .ip-table-wrap dans le HTML) */
  .ip-section div[style*="padding:1.5rem"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 1rem !important;
  }

  .ip-table {
    min-width: 420px !important;
    width: 100% !important;
  }
  .ip-table th,
  .ip-table td {
    padding: .65rem .85rem !important;
    font-size: .78rem !important;
    white-space: nowrap !important;
  }

  /* ── Points de liste - texte qui débordait ── */
  .ip-point {
    overflow: hidden !important;
  }
  .ip-point > div:last-child {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  .ip-point-desc {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* ── Citation - texte qui débordait ── */
  .ip-lead-visual {
    overflow: hidden !important;
  }
  .ip-lead-quote {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    font-size: clamp(1.1rem, 4vw, 1.4rem) !important;
  }

  /* ── Formulaire adhésion ── */
  #adhesion-form .ip-form-row {
    grid-template-columns: 1fr !important;
  }
  #adhesion-form .ip-btn-primary {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {

  /* Grilles inline encore plus strictes */
  .ip-section > div[style*="grid-template-columns"],
  .ip-section > div[style*="display:grid"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  /* Tableau : encore plus compact */
  .ip-table th,
  .ip-table td {
    padding: .55rem .7rem !important;
    font-size: .74rem !important;
  }

  /* Points : no overflow */
  .ip-points {
    overflow: hidden !important;
    width: 100% !important;
  }
  .ip-point {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   TABLEAU COMPARATIF - fix scroll horizontal
   Le conteneur parent bloque le overflow, on force tout
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Remonter la chaîne : tous les ancêtres doivent autoriser overflow */
  .ip-section,
  .ip-section > div,
  .ip-section > div > div {
    overflow: visible !important;
  }

  /* Le conteneur direct du tableau : scroll horizontal forcé */
  .ip-section div:has(> .ip-table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Fallback sans :has() - cibler par le label "Tableau comparatif" impossible
     donc on cible tout div qui contient un ip-table directement */
  .ip-table {
    display: table !important;
    min-width: 380px !important;
    width: 100% !important;
    table-layout: auto !important;
  }

  /* Wrapper universel : tout div parent direct d'un tableau */
  * > .ip-table {
    display: table !important;
  }

  /* Forcer le parent immédiat du tableau à scroller */
  .ip-table-wrap,
  div:has(.ip-table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  .ip-table th {
    white-space: nowrap !important;
    font-size: .7rem !important;
    padding: .7rem .8rem !important;
  }
  .ip-table td {
    white-space: nowrap !important;
    font-size: .78rem !important;
    padding: .65rem .8rem !important;
  }
}

@media (max-width: 480px) {
  .ip-table {
    min-width: 340px !important;
  }
  .ip-table th,
  .ip-table td {
    font-size: .7rem !important;
    padding: .55rem .65rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   TABLEAU COMPARATIF - wrapper scroll + fix ancêtres
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Le div qui contient le label "Tableau comparatif" + la table
     Il a style="margin-top:1.5rem;padding:1.5rem;background:..."
     On le force à scroller */
  .ip-section .ip-lead-visual + div,
  .ip-section div[style*="background:var(--ip-bg2)"][style*="border:1px solid"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 1rem !important;
  }

  /* Classe utilitaire qu'on peut ajouter manuellement */
  .ip-table-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  /* Le tableau lui-même : taille fixe pour forcer le scroll */
  .ip-table {
    min-width: 400px !important;
    width: 400px !important;
    table-layout: fixed !important;
  }
  .ip-table th:first-child,
  .ip-table td:first-child { width: 140px !important }
  .ip-table th:nth-child(2),
  .ip-table td:nth-child(2) { width: 110px !important }
  .ip-table th:nth-child(3),
  .ip-table td:nth-child(3) { width: 130px !important }

  .ip-table th {
    font-size: .68rem !important;
    padding: .65rem .8rem !important;
    white-space: nowrap !important;
  }
  .ip-table td {
    font-size: .76rem !important;
    padding: .6rem .8rem !important;
    white-space: nowrap !important;
  }
}