/*
 * ═══════════════════════════════════════════════════════════════
 *   CTI-CI - RESPONSIVE COMPLET
 *   Auteur : Switch Maker SARL
 *   À inclure après main.css (cascade descendante)
 *   Breakpoints :
 *     ≥1025px   → desktop (règles déjà dans main.css)
 *     768–1024px → tablette portrait/paysage
 *     481–767px  → petite tablette / grand téléphone
 *     ≤480px     → téléphone standard
 *     ≤380px     → petit téléphone (SE, Galaxy A serie…)
 *   + mode paysage téléphone : (max-height:520px)
 * ═══════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────────
   BASE UNIVERSELLE - appliquée à tous les formats mobiles
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box }
html, body { max-width: 100%; overflow-x: hidden }
* { -webkit-tap-highlight-color: transparent }

/* Curseur personnalisé inutile sur tactile */
@media (hover: none), (pointer: coarse) {
  #cur, #cur-o { display: none !important }
  html { cursor: auto }
}

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

/* Garde-fou média */
img, video, iframe, embed, object, canvas { max-width: 100% }


/* ═══════════════════════════════════════════════════════════════
   TABLETTE - 768px à 1024px
   Navigation hamburger, grilles 2 colonnes, footer 2 col
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Navigation ── */
  .nav-links, .nav-actions { display: none }
  .nav-hamburger { display: flex }
  nav { padding: 0 5% 0 4% }

  /* ── Hero ── */
  .hero-h1 { font-size: clamp(2rem, 6vw, 3.8rem); white-space: normal }
  .hero-tagline { max-width: 80% }

  /* ── Stat band : 2 colonnes × 2 lignes ── */
  .stat-band { grid-template-columns: repeat(2, 1fr) }
  .stat-band .sc { border-right: 1px solid rgba(255,255,255,.06) }
  .stat-band .sc:nth-child(2n) { border-right: none }
  .stat-band .sc:nth-child(3),
  .stat-band .sc:nth-child(4) { border-top: 1px solid rgba(255,255,255,.06) }

  /* ── Services : 2 colonnes ── */
  .srv-grid { grid-template-columns: repeat(2, 1fr) }
  .sc-full { grid-column: span 2 }

  /* ── Piliers : 1 colonne ── */
  .pillars-grid { grid-template-columns: 1fr }
  .pill { height: 440px; padding: 1.6rem }

  /* ── Pilier tactile : description toujours visible ── */
  .pill-desc { max-height: 160px; opacity: 1 }
  .pill::before { opacity: .97 }

  /* ── Enchant / Mission : 1 colonne empilée ── */
  #enchant, #mission { grid-template-columns: 1fr }
  .enc-vis  { min-height: 420px }
  .ms-photo { min-height: 360px }

  /* ── Blog : 2 colonnes ── */
  .blog-slider { grid-template-columns: repeat(2, 1fr) }

  /* ── Cibles / Valeurs : 2 colonnes ── */
  .cib-grid, .val-grid { grid-template-columns: repeat(2, 1fr) }

  /* ── Processus / Roadmap : 2 colonnes ── */
  .proc { grid-template-columns: repeat(2, 1fr); gap: 3rem }
  .proc::before { display: none }
  .rmap { grid-template-columns: repeat(2, 1fr) }

  /* ── Footer : 2 colonnes ── */
  .ft-inner {
    grid-template-columns: 1fr 1fr;
    row-gap: 2rem;
    padding: 2.5rem 5%;
  }
  .ft-col-brand {
    grid-column: span 2;
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding-bottom: 2rem;
  }
  .ft-col:nth-child(3) { border-right: none; padding-right: 0 }
  .ft-col:nth-child(4) { padding-left: 0 }
  .ft-col { padding: 0 1.2rem }
  .ft-col:first-child { padding-left: 0 }
  .ft-logo { width: 260px }
  .ft-bar { padding: .9rem 5% }

  /* ── Pages internes - split mission ── */
  .ip-mission-split { grid-template-columns: 1fr; min-height: auto }
  .ip-ms-visual { min-height: 320px }

  /* ── Pages internes - grilles ── */
  .ip-grid.cols-4 { grid-template-columns: repeat(2, 1fr) }
  .ip-grid        { grid-template-columns: repeat(2, 1fr) }
  .ip-stats        { grid-template-columns: repeat(2, 1fr) }
  .ip-stat:nth-child(2) { border-right: none }
  .ip-stat:nth-child(3),
  .ip-stat:nth-child(4) { border-top: 1px solid rgba(255,255,255,.08) }
  .ip-steps        { grid-template-columns: repeat(2, 1fr); gap: 2.5rem }
  .ip-steps::before { display: none }
  .ip-roadmap      { grid-template-columns: repeat(2, 1fr) }
  .ip-lead         { grid-template-columns: 1fr; gap: 2rem }
  .ip-team-grid    { grid-template-columns: repeat(2, 1fr) }
  .ip-partner-grid { grid-template-columns: repeat(3, 1fr) }
  .ip-doc-grid,
  .ip-media-grid   { grid-template-columns: repeat(2, 1fr) }
  .ip-glossaire    { grid-template-columns: repeat(2, 1fr) }
  .nav-mega-services-grid { grid-template-columns: repeat(2, 1fr) }

  /* ── Contact ── */
  .contact-grid { grid-template-columns: 1fr }
  .ct-map { min-height: 280px }
}


/* ─────────────────────────────────────────────────────────────
   TABLETTE PORTRAIT/PAYSAGE INTERMÉDIAIRE - 769px à 1024px
   Nav légèrement réduite, logo ajusté
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {
  nav { height: 96px }
  .nav-logo-png { height: 96px }
  nav.stuck { height: 74px }
  nav.stuck .nav-logo-png { height: 64px }
  html { scroll-padding-top: 96px }
  section[id], .ip-section[id] { scroll-margin-top: 96px }

  /* Partenaires : 3 colonnes */
  .ip-partner-grid { grid-template-columns: repeat(3, 1fr) }
}


/* ═══════════════════════════════════════════════════════════════
   PETITE TABLETTE / GRAND TÉLÉPHONE - 481px à 767px
   Footer 1 colonne, Blog 1 colonne, Cibles 1 col
═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Navigation ── */
  .nav-links, .nav-actions { display: none }
  .nav-hamburger { display: flex }
  nav { height: 80px; padding: 0 5% }
  .nav-logo-png { height: 72px }
  nav.stuck { height: 64px }
  nav.stuck .nav-logo-png { height: 56px }
  html { scroll-padding-top: 80px }
  section[id], .ip-section[id] { scroll-margin-top: 74px }

  /* ── Stat band : 2 colonnes ── */
  .stat-band { grid-template-columns: repeat(2, 1fr) }

  /* ── Services : 1 colonne ── */
  .srv-grid { grid-template-columns: 1fr }
  .sc-full { grid-column: span 1; grid-template-columns: 1fr }
  .srv-header { flex-direction: column; align-items: flex-start; gap: 1rem }

  /* ── Blog : 1 colonne ── */
  .blog-slider { grid-template-columns: 1fr }
  .blog-header { flex-direction: column; align-items: flex-start; gap: 1rem }

  /* ── Cibles / Valeurs : 1 colonne ── */
  .cib-grid, .val-grid { grid-template-columns: 1fr }

  /* ── Roadmap / Processus ── */
  .rmap { grid-template-columns: 1fr }
  .proc { grid-template-columns: 1fr; gap: 2.5rem }

  /* ── Mission ── */
  #mission { grid-template-columns: 1fr }
  .ms-photo { min-height: 300px }
  .ms-content { padding: 2rem 5% }
  .ms-btns { flex-wrap: wrap; gap: .7rem }
  .ms-btns .btn-fill,
  .ms-btns .btn-navy { padding: .85rem 1.4rem }

  /* ── Enchant ── */
  #enchant { grid-template-columns: 1fr }
  .enc-vis { min-height: 340px }
  .enc-right { padding: 2rem 5% }
  .enc-btns { flex-wrap: wrap; gap: .7rem }

  /* ── Footer : 1 colonne ── */
  .ft-inner {
    grid-template-columns: 1fr;
    row-gap: 0;
    padding: 2rem 5% 1.5rem;
  }
  .ft-col-brand {
    grid-column: span 1;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: 0 0 1.8rem;
  }
  .ft-col {
    padding: 1.5rem 0 0;
    border-right: none;
  }
  .ft-col:last-child { padding-bottom: 1.5rem }
  .ft-brand-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }
  .ft-brand-row .ft-contact-list {
    border-left: none;
    padding-left: 0;
  }
  .ft-logo { width: 200px }
  .ft-tagline { font-size: .78rem }
  .ft-col-title { margin-bottom: 1rem }
  .ft-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem;
    padding: .9rem 5%;
  }
  .ft-legal-links { flex-wrap: wrap; gap: .6rem 1.2rem }
  .ft-copy { font-size: .56rem; line-height: 1.6 }

  /* ── Pages internes ── */
  .ip-grid, .ip-grid.cols-4 { grid-template-columns: 1fr }
  .ip-grid.cols-2 { grid-template-columns: 1fr }
  .ip-stats       { grid-template-columns: repeat(2, 1fr) }
  .ip-steps       { grid-template-columns: 1fr; gap: 2rem }
  .ip-roadmap     { grid-template-columns: 1fr }
  .ip-lead        { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 5% }
  .ip-team-grid   { grid-template-columns: repeat(2, 1fr) }
  .ip-partner-grid { grid-template-columns: repeat(2, 1fr) }
  .ip-doc-grid,
  .ip-media-grid  { grid-template-columns: 1fr }
  .ip-glossaire   { grid-template-columns: 1fr }

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

  /* ── Contact ── */
  .contact-grid { grid-template-columns: 1fr }
  .ct-map { min-height: 260px }
  .ct-info { padding: 2rem 5% }

  /* ── Reveal sec ── */
  .big-rv { font-size: clamp(1.5rem, 5.5vw, 2.8rem) }

  /* ── Piliers ── */
  .pillars-grid { grid-template-columns: 1fr }
  .pill { height: 400px; padding: 1.4rem }
  .pill-desc { max-height: 160px; opacity: 1 }

  /* ── Search overlay ── */
  .search-overlay { padding: 80px 1rem 2rem }
  .search-input { font-size: 1.1rem }

  /* ── Partenaires - scroll tactile fluide ── */
  .pt-card { height: 96px; width: 96px }
  .pt-card:hover { width: 280px }
  .pt-card-logo { width: 96px; height: 96px; padding: 14px }
}


/* ═══════════════════════════════════════════════════════════════
   TÉLÉPHONE STANDARD - ≤480px
   Mise en page mono-colonne, typographie réduite, CTA pleine largeur
═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

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

  /* ── Navigation ── */
  nav { height: 68px; padding: 0 5% }
  .nav-logo-png { height: 58px }
  nav.stuck { height: 58px }
  nav.stuck .nav-logo-png { height: 48px }
  .nav-hamburger { width: 38px; height: 38px }
  html { scroll-padding-top: 68px }
  section[id], .ip-section[id] { scroll-margin-top: 62px }

  /* ── Mobile panel : pleine largeur ── */
  .nav-mobile { width: 100%; right: -100% }
  .nav-mobile.open { right: 0 }

  /* ── Hero ── */
  .hero-h1 {
    font-size: clamp(1.7rem, 9vw, 2.6rem);
    line-height: 1.06;
    white-space: normal;
  }
  .hero-tagline { max-width: 100%; font-size: .80rem }
  .hero-btns {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    width: 100%;
  }
  .btn-fill, .btn-out {
    justify-content: center;
    width: 100%;
    padding: 1rem 1.4rem;
  }
  .hero-orb-a, .hero-orb-b { opacity: .45 }
  .hero-dots { right: 50%; transform: translateX(50%); bottom: 1rem }
  .h-scroll { display: none }

  /* ── Ticker ── */
  .ticker-t span { font-size: .72rem; padding: 0 1.5rem }

  /* ── Stat band : 2 colonnes compactes ── */
  .stat-band { grid-template-columns: repeat(2, 1fr) }
  .stat-band .sc { padding: 1rem }
  .sc-n { font-size: clamp(2rem, 8vw, 3rem) }
  .sc-l { font-size: .65rem; letter-spacing: .1em }

  /* ── Sections - headings ── */
  h2.st { font-size: clamp(1.8rem, 8.5vw, 2.6rem) }
  .pt-title { font-size: clamp(1.5rem, 7vw, 2.2rem) }
  .enc-quote { font-size: clamp(1.4rem, 5.5vw, 2rem) }

  /* ── Services ── */
  .srv-grid { grid-template-columns: 1fr; gap: 1rem }
  .sc-full { grid-column: span 1 }

  /* ── Blog ── */
  .bc-body { padding: 1rem }
  .bc-title { font-size: .95rem }
  .bc-excerpt { font-size: .78rem }

  /* ── Enchant ── */
  .enc-bignum { font-size: 8rem }
  .enc-btns { flex-direction: column; align-items: stretch }
  .enc-btns .btn-fill,
  .enc-btns .btn-navy { justify-content: center }

  /* ── Mission ── */
  .ms-ci-frame { max-width: 260px }
  .ms-vals { grid-template-columns: 1fr; gap: .6rem }
  .ms-btns { flex-direction: column; align-items: stretch }
  .ms-btns .btn-fill,
  .ms-btns .btn-navy { justify-content: center }

  /* ── Piliers ── */
  .pill { height: 380px; padding: 1.2rem }

  /* ── Processus ── */
  .ps { padding: 0 .5rem }
  .ps-title { font-size: 1rem }
  .ps-desc { font-size: .88rem }

  /* ── Roadmap ── */
  .rm { padding: 1rem }
  .rm-t { font-size: .95rem }

  /* ── Partenaires ── */
  .pt-card { height: 84px; width: 84px }
  .pt-card:hover { width: 260px }
  .pt-card-logo { width: 84px; height: 84px; padding: 12px }

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

  /* ── Contact ── */
  .ct-socials, .ct-socials-inline { flex-wrap: wrap }
  .ct-info h2 { font-size: clamp(1.6rem, 7vw, 2.4rem) }

  /* ── Footer ── */
  .ft-inner { padding: 1.8rem 5% 1.2rem }
  .ft-logo { width: 170px }
  .ft-tagline { font-size: .74rem }
  .ft-list a { font-size: .80rem }
  .ft-col-title { font-size: .52rem }
  .ft-bar { padding: .85rem 5%; gap: .7rem }
  .ft-copy { font-size: .54rem }
  .ft-legal-links { gap: .55rem 1rem }
  .ft-legal-links a { font-size: .54rem }

  /* ── Pages internes ── */
  .ip-section { padding: 2.5rem 5% }
  .ip-stats { grid-template-columns: 1fr 1fr }
  .ip-stat { padding: 1.4rem 1rem }
  .ip-stat:nth-child(2) { border-right: none }
  .ip-stat:nth-child(3),
  .ip-stat:nth-child(4) { border-top: 1px solid rgba(255,255,255,.08) }
  .ip-steps { grid-template-columns: 1fr }
  .ip-team-grid { grid-template-columns: 1fr 1fr }
  .ip-partner-grid { grid-template-columns: repeat(2, 1fr) }
  .ip-lead { padding: 2rem 5%; gap: 1.5rem }
  .ip-wysiwyg table { font-size: .82rem }

  /* ── Scroll overlay search ── */
  .search-overlay {
    padding: calc(68px + env(safe-area-inset-top)) 1rem 2rem;
  }

  /* ── Safe area (encoche iOS / Android) ── */
  .nav-mobile { padding-right: env(safe-area-inset-right) }
  .nav-mobile-actions {
    padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
  }
}


/* ═══════════════════════════════════════════════════════════════
   PETIT TÉLÉPHONE - ≤380px (iPhone SE, Galaxy A02…)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {

  nav { height: 60px }
  .nav-logo-png { height: 50px }
  nav.stuck { height: 52px }
  nav.stuck .nav-logo-png { height: 42px }
  html { scroll-padding-top: 60px }
  section[id], .ip-section[id] { scroll-margin-top: 56px }

  .hero-h1 { font-size: clamp(1.45rem, 9.5vw, 2rem); line-height: 1.08 }
  .hero-tagline { font-size: .74rem }

  h2.st { font-size: clamp(1.6rem, 9vw, 2.2rem) }
  .pt-title { font-size: clamp(1.3rem, 8vw, 1.8rem) }

  /* Stat band : texte encore plus compact */
  .sc-n { font-size: clamp(1.8rem, 9vw, 2.6rem) }
  .sc-l { font-size: .6rem }

  /* Piliers encore plus courts */
  .pill { height: 350px; padding: 1rem }

  /* Partenaires */
  .pt-card { height: 84px; width: 84px }
  .pt-card:hover { width: 240px }
  .pt-card-logo { width: 84px; height: 84px; padding: 12px }
  .pt-card-name { font-size: .82rem }

  /* Footer */
  .ft-logo { width: 150px }
  .ft-tagline { font-size: .7rem }
  .ft-copy, .ft-legal-links a { font-size: .52rem }
  .ft-legal-links { gap: .5rem .8rem }

  /* Page band */
  .page-band { padding: 5rem 5% 1.8rem }
  .page-band-title { font-size: clamp(1.45rem, 9vw, 2rem) }

  /* Pages internes team en 1 col */
  .ip-team-grid { grid-template-columns: 1fr }
}


/* ═══════════════════════════════════════════════════════════════
   TÉLÉPHONE EN MODE PAYSAGE - hauteur réduite
   (ex: iPhone 14 ou Galaxy S en paysage, hauteur < 520px)
═══════════════════════════════════════════════════════════════ */
@media (max-height: 520px) and (orientation: landscape) {

  /* Hero : ne plus forcer 100vh */
  #hero {
    height: auto;
    min-height: 100vh;
    padding: 5.5rem 6% 2.5rem;
  }
  .hero-inner { padding: 0 5% }

  /* Décors inutiles sur petit écran */
  .h-scroll, .hero-orb-a, .hero-orb-b,
  .hero-ring, .hero-ring2, .hero-ring3 { display: none }

  /* Hero texte adapté */
  .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 compacte */
  nav { height: 56px }
  .nav-logo-png { height: 48px }
  nav.stuck { height: 52px }

  /* Mission / Enchant : visuels plus courts */
  .ms-photo, .enc-vis { min-height: 220px }

  /* Footer simplifié */
  .ft-inner { padding: 1.5rem 5% 1rem }
}


/* ═══════════════════════════════════════════════════════════════
   SECTION #MISSION - responsive dédié
═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  #mission { grid-template-columns: 1fr; min-height: auto }
  .ms-photo { min-height: 320px }
}
@media (max-width: 480px) {
  .ms-photo { min-height: 260px }
  .ms-photo-inner { padding: 1.8rem 5% }
  .ms-bignum { font-size: 6rem; left: -.5rem }
}


/* ═══════════════════════════════════════════════════════════════
   SECTION #ENCHANT - responsive dédié
═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  #enchant { grid-template-columns: 1fr; min-height: auto }
  .enc-vis { min-height: 320px }
}
@media (max-width: 480px) {
  .enc-vis { min-height: 250px }
  .enc-vis-inner { padding: 1.5rem 5% }
  .enc-bignum { font-size: 7rem }
}


/* ═══════════════════════════════════════════════════════════════
   SECTION #BLOG - responsive dédié
═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .blog-slider { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 640px) {
  .blog-slider { grid-template-columns: 1fr }
}


/* ═══════════════════════════════════════════════════════════════
   SECTION #CONTACT - responsive dédié
═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr }
  .ct-map { min-height: 300px }
}
@media (max-width: 480px) {
  .ct-map { min-height: 240px }
  .ct-rows { gap: .9rem }
  .ct-socials { gap: .5rem }
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER - responsive dédié (correction fine)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* La barre du bas passe en colonne */
  .ft-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }
  /* Liens légaux sur 2 lignes si besoin */
  .ft-legal-links { flex-wrap: wrap }
}


/* ═══════════════════════════════════════════════════════════════
   CONTENUS WYSIWYG - tableaux, images, vidéos
═══════════════════════════════════════════════════════════════ */
.ip-wysiwyg img, .ip-wysiwyg video { max-width: 100%; height: auto }
.ip-wysiwyg table {
  display: block; width: 100%; max-width: 100%;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}
.ip-wysiwyg iframe { max-width: 100% }
.ip-wysiwyg { word-wrap: break-word; overflow-wrap: break-word }


/* ═══════════════════════════════════════════════════════════════
   GRANDS ÉCRANS - anti-étirement sur ≥1800px
═══════════════════════════════════════════════════════════════ */
@media (min-width: 1800px) {
  .hero-inner { max-width: 1500px; margin: 0 auto }
  .enc-vis-inner, .enc-right, .ms-photo-inner { max-width: 900px }
  .enc-right { margin-left: auto }
}