/* Version propre 2026-09-05 — ordinateur d'origine + mobile dédié */
.mobile-clean{display:none}
.menu-label{display:none}

@media (max-width:767px){
  html{overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{margin:0!important;max-width:100%!important;overflow-x:hidden!important;background:#fff}
  *,*::before,*::after{box-sizing:border-box}
  img,svg,video,canvas{max-width:100%;height:auto}
  main,section,article,div{min-width:0}

  /* En-tête mobile : volontairement indépendant du rendu ordinateur. */
  .site-header,
  body.home-approved .site-header{position:relative!important;z-index:100!important;background:#064858!important;border:0!important;box-shadow:none!important}
  .site-header::after,
  body.home-approved .site-header::after{display:none!important}
  .header-inner,
  body.home-approved .header-inner{width:100%!important;max-width:none!important;min-height:72px!important;margin:0!important;padding:8px 12px!important;display:grid!important;grid-template-columns:auto 1fr auto!important;align-items:center!important;gap:8px!important;background:#064858!important}
  .site-logo,
  body.home-approved .site-logo{grid-column:1!important;grid-row:1!important;display:flex!important;align-items:center!important;justify-content:center!important;width:104px!important;max-width:104px!important;padding:3px 6px!important;margin:0!important;background:#f7f1e7!important;border-radius:12px!important;overflow:hidden!important;box-shadow:none!important}
  .site-logo img,
  body.home-approved .site-logo img{display:block!important;width:92px!important;max-width:92px!important;height:58px!important;max-height:58px!important;object-fit:contain!important;margin:0!important;padding:0!important}
  .menu-toggle,
  body.home-approved .menu-toggle{grid-column:3!important;grid-row:1!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;width:auto!important;min-width:92px!important;height:46px!important;min-height:46px!important;margin:0!important;padding:0 13px!important;border:2px solid #efb021!important;border-radius:12px!important;background:#fff!important;color:#064858!important;font:700 14px/1 Arial,Helvetica,sans-serif!important;letter-spacing:.04em!important;box-shadow:none!important}
  .menu-label{display:inline!important}
  .menu-toggle-lines{display:grid!important;gap:4px!important}
  .menu-toggle-lines span{display:block!important;width:20px!important;height:2px!important;border-radius:2px!important;background:#064858!important}
  .site-navigation,
  body.home-approved .site-navigation{grid-column:1/-1!important;grid-row:2!important;position:static!important;inset:auto!important;display:none!important;width:100%!important;margin:4px 0 0!important;padding:8px!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:14px!important;background:#073f4d!important;box-shadow:none!important}
  .site-navigation.open,
  .site-navigation.is-open,
  body.home-approved .site-navigation.open{display:block!important}
  .nav-links,
  body.home-approved .nav-links{display:grid!important;grid-template-columns:1fr!important;gap:4px!important;width:100%!important}
  .nav-links a,
  body.home-approved .nav-links a{display:flex!important;align-items:center!important;min-height:48px!important;padding:11px 12px!important;border-radius:10px!important;color:#fff!important;font:700 17px/1.25 Arial,Helvetica,sans-serif!important;text-decoration:none!important;white-space:normal!important}
  .nav-links a::after,
  body.home-approved .nav-links a::after{display:none!important}
  .nav-links a.active,.nav-links a[aria-current="page"],
  body.home-approved .nav-links a.active,body.home-approved .nav-links a[aria-current="page"]{background:#f0b323!important;color:#073f4d!important}
  .header-cta,
  body.home-approved .header-cta{grid-column:1/-1!important;grid-row:3!important;display:flex!important;width:100%!important;min-height:46px!important;margin:0!important;padding:11px 16px!important;border-radius:12px!important;background:#efb021!important;color:#073f4d!important;font:700 16px/1.2 Arial,Helvetica,sans-serif!important;text-align:center!important;box-shadow:none!important}

  /* Les 5 anciennes maquettes restent intactes sur ordinateur, mais sont remplacées ici uniquement sur téléphone. */
  body[data-page="index.html"] main.page-shell,
  body[data-page="contact.html"] main.page-shell,
  body[data-page="accompagnement-individuel.html"] main.page-shell,
  body[data-page="accompagnement-parental.html"] main.page-shell,
  body[data-page="ateliers-interventions.html"] main.page-shell{display:none!important}

  .mobile-clean{display:block!important;width:100%;max-width:100%;overflow:hidden;background:#fbf7f0;color:#073f4d;font-family:Arial,Helvetica,sans-serif}
  .mc-inner{width:min(100%,680px);margin:0 auto;padding:28px 18px 30px}
  .mc-kicker{margin:0 0 8px;color:#d98e00;font-size:13px;font-weight:800;line-height:1.3;letter-spacing:.11em;text-transform:uppercase}
  .mc-script{margin:0 0 6px;color:#d98e00;font-family:Georgia,'Times New Roman',serif;font-size:21px;font-style:italic;line-height:1.3}
  .mobile-clean h1{margin:0 0 14px;color:#064858;font-family:Georgia,'Times New Roman',serif;font-size:clamp(36px,11vw,52px);font-weight:600;line-height:.98;letter-spacing:-.025em;overflow-wrap:anywhere}
  .mobile-clean h1 em{display:block;margin-top:4px;color:#e3a10b;font-weight:500}
  .mc-tagline{margin:0 0 16px;color:#064858;font-size:20px;line-height:1.35}
  .mc-lead,.mobile-clean p{font-size:17px;line-height:1.55}
  .mc-lead{margin:0 0 20px}
  .mc-photo{width:100vw;height:clamp(230px,68vw,330px);margin:0 0 24px;margin-left:calc(50% - 50vw);background-position:center;background-repeat:no-repeat;background-size:cover;border-top:4px solid #efb021;border-bottom:4px solid #efb021}
  .mc-photo--home{background-image:url('../images/mobile/home-hero-mobile-clean.webp');background-position:center center;background-size:cover}
  .mc-photo--contact{background-image:url('../images/mobile/contact-mobile-clean.webp');background-size:cover;background-position:center center}
  .mc-photo--individual{background-image:url('../images/accompagnements/hero-photo.webp');background-position:52% center}
  .mc-photo--parental{background-image:url('../images/mobile/parental-mobile-clean.webp');background-size:cover;background-position:center center}
  .mc-photo--workshops{background-image:url('../images/mobile/workshops-mobile-clean.webp');background-size:cover;background-position:center center}

  .mc-actions{display:grid;grid-template-columns:1fr;gap:10px;margin:22px 0 0}
  .mc-button{display:flex;align-items:center;justify-content:center;min-height:50px;padding:12px 16px;border-radius:999px;text-decoration:none;font-size:16px;font-weight:800;line-height:1.25;text-align:center}
  .mc-button--primary{background:#efb021;color:#073f4d}
  .mc-button--secondary{border:2px solid #064858;background:#fff;color:#064858}
  .mc-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:22px 0}
  .mc-card{padding:18px;border:1px solid rgba(6,72,88,.13);border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(6,72,88,.06)}
  .mc-card h2{margin:0 0 7px;color:#064858;font-family:Georgia,'Times New Roman',serif;font-size:23px;line-height:1.15}
  .mc-card p{margin:0;font-size:16px;line-height:1.5}
  .mc-quote{margin:22px 0 0;padding:16px 18px;border-left:4px solid #efb021;border-radius:0 14px 14px 0;background:#064858;color:#fff;font-size:18px!important;font-style:italic;line-height:1.45!important}
  .mc-contact-list{display:grid;gap:10px;margin:18px 0}
  .mc-contact-item{display:block;padding:14px 15px;border-radius:15px;background:#fff;border:1px solid rgba(6,72,88,.13);color:#073f4d;text-decoration:none}
  .mc-contact-item strong{display:block;margin-bottom:3px;color:#064858;font-size:17px}
  .mc-contact-item span,.mc-contact-item small{display:block;font-size:16px;line-height:1.45}
  .mc-contact-item small{margin-top:4px;color:#395a63;font-size:14px}
  .mc-note{margin-top:18px;padding:16px;border-radius:16px;background:#064858;color:#fff;font-size:16px;line-height:1.5}

  /* Le contenu déjà HTML sur les autres pages conserve sa structure, avec garde-fous mobile. */
  .accomp-main,.mdph-main,.ortho-info-main,.about-main,.legal-main,.placeholder-main,main:not(.page-shell){max-width:100%!important;overflow:hidden}
  .accomp-main img,.mdph-main img,.ortho-info-main img,.about-main img,.legal-main img{max-width:100%!important;height:auto!important}
  .footer-clean,.footer-clean-legal{max-width:100%!important;overflow:hidden!important}
  .footer-clean-legal{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:8px 14px!important;padding-left:14px!important;padding-right:14px!important;text-align:center!important}
  .content-contact-cta{padding-left:16px!important;padding-right:16px!important}
  .content-contact-cta-inner{width:100%!important;max-width:680px!important;margin:0 auto!important}
  .contact-practical{max-width:100%!important;overflow:hidden!important;padding-left:14px!important;padding-right:14px!important}
  .contact-practical img{max-width:100%!important;height:auto!important}
}

@media (max-width:380px){
  .header-inner,body.home-approved .header-inner{padding-left:8px!important;padding-right:8px!important}
  .site-logo,body.home-approved .site-logo{width:94px!important;max-width:94px!important}
  .site-logo img,body.home-approved .site-logo img{width:84px!important;max-width:84px!important}
  .menu-toggle,body.home-approved .menu-toggle{min-width:84px!important;padding:0 10px!important}
  .mc-inner{padding-left:15px;padding-right:15px}
  .mobile-clean h1{font-size:34px}
}


/* ============================================================
   MOBILE FINAL — uniquement <= 767 px. Aucune règle ordinateur.
   Corrections: en-tête/logo, photos pleine largeur, cartes,
   textes et grilles trop étroites.
   ============================================================ */
@media (max-width: 767px) {
  html, body { width:100% !important; max-width:100% !important; overflow-x:hidden !important; }
  body { min-width:0 !important; }
  p, li, a, h1, h2, h3, h4 { word-break:normal !important; overflow-wrap:break-word !important; }

  /* Logo et menu : visibles, équilibrés et sans écrasement. */
  .header-inner,
  body.home-approved .header-inner {
    min-height:92px !important;
    padding:8px 10px !important;
    grid-template-columns:124px minmax(0,1fr) auto !important;
    gap:10px !important;
  }
  .site-logo,
  body.home-approved .site-logo {
    width:124px !important;
    max-width:124px !important;
    min-height:76px !important;
    padding:4px 7px !important;
    border-radius:12px !important;
  }
  .site-logo img,
  body.home-approved .site-logo img {
    width:110px !important;
    max-width:110px !important;
    height:auto !important;
    max-height:72px !important;
    object-fit:contain !important;
  }
  .menu-toggle,
  body.home-approved .menu-toggle {
    min-width:86px !important;
    height:46px !important;
    min-height:46px !important;
    padding:0 11px !important;
    white-space:nowrap !important;
  }

  /* Les images mobiles occupent réellement toute la largeur utile. */
  .mc-photo {
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    background-position:center center !important;
  }
  .mc-photo--home {
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:20 / 9 !important;
    background-size:cover !important;
    background-position:center center !important;
  }
  .mc-photo--individual { background-position:52% center !important; }
  .mc-inner { width:100% !important; max-width:680px !important; padding-left:18px !important; padding-right:18px !important; }

  /* Page Accompagnements : 1 vraie vignette par ligne, plus de 4 colonnes écrasées. */
  body.accomp-redesign .accomp-offer-grid,
  .accomp-offer-grid {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:18px !important;
    width:100% !important;
  }
  body.accomp-redesign .accomp-offer-card,
  .accomp-offer-card {
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    border-radius:20px !important;
  }
  body.accomp-redesign .accomp-offer-media,
  .accomp-offer-media {
    width:100% !important;
    height:auto !important;
    aspect-ratio:16 / 10 !important;
    object-fit:cover !important;
    object-position:center 24% !important;
  }
  body.accomp-redesign .accomp-offer-body,
  .accomp-offer-body { padding:20px 18px 18px !important; }
  body.accomp-redesign .accomp-offer-body h3,
  .accomp-offer-body h3 {
    min-height:0 !important;
    font-size:22px !important;
    line-height:1.18 !important;
  }
  body.accomp-redesign .accomp-offer-body p,
  .accomp-offer-body p {
    font-size:16px !important;
    line-height:1.55 !important;
  }
  body.accomp-redesign .accomp-offer-body a,
  .accomp-offer-body a {
    width:100% !important;
    min-height:48px !important;
    font-size:16px !important;
  }
  body.accomp-redesign .accomp-section { padding-left:16px !important; padding-right:16px !important; }

  /* Comprendre l'orthopédagogie : le hero passe réellement en une colonne. */
  .ortho-info-page .ortho-info-hero,
  .ortho-info-hero {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    min-height:0 !important;
    gap:22px !important;
    padding:38px 18px 70px !important;
    background:
      linear-gradient(180deg,rgba(247,242,233,.98) 0%,rgba(247,242,233,.95) 58%,rgba(247,242,233,.82) 100%),
      url('../images/accompagnements/hero-photo.webp') center bottom / cover no-repeat !important;
  }
  .ortho-info-page .ortho-info-hero-copy,
  .ortho-info-page .ortho-info-hero-side,
  .ortho-info-hero-copy,
  .ortho-info-hero-side {
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    align-self:stretch !important;
    justify-self:stretch !important;
  }
  .ortho-info-page .ortho-info-hero h1,
  .ortho-info-hero h1 {
    max-width:100% !important;
    font-size:clamp(38px,11vw,52px) !important;
    line-height:1.02 !important;
  }
  .ortho-info-page .ortho-info-lead,
  .ortho-info-lead {
    width:100% !important;
    max-width:none !important;
    font-size:18px !important;
    line-height:1.55 !important;
  }
  .ortho-info-page .ortho-info-hero-side,
  .ortho-info-hero-side {
    padding:20px 18px !important;
    border-radius:20px !important;
  }
  .ortho-info-page .ortho-info-hero-side p,
  .ortho-info-hero-side p { font-size:17px !important; line-height:1.55 !important; }

  /* Grilles de contenu : une colonne pour rester lisible sur 320–430 px. */
  .ortho-definition-grid,
  .ortho-question-grid,
  .ortho-profile-grid,
  .ortho-situation-grid,
  .ortho-tool-grid,
  .ortho-step-grid,
  .ortho-tnd-types,
  .ortho-tnd-summary-grid,
  .ortho-tnd-effect-list,
  .about-hero-inner,
  .about-parcours,
  .about-section-inner,
  .mdph-purpose,
  .mdph-ateliers-hero {
    grid-template-columns:minmax(0,1fr) !important;
  }
  .ortho-info-section { padding-left:18px !important; padding-right:18px !important; }
  .ortho-definition-card,
  .ortho-question-card,
  .ortho-profile-card,
  .ortho-situation-card,
  .ortho-tool-card,
  .ortho-step-card { width:100% !important; max-width:none !important; min-width:0 !important; }

  /* Images de contenu : pas de largeur fixe qui dépasse ou laisse un vide inutile. */
  .about-main img,
  .ortho-info-main img,
  .mdph-main img,
  .accomp-main img,
  .contact-practical img {
    max-width:100% !important;
  }
  .about-wide-visual,
  .about-parcours-figure,
  .ortho-audience-photo,
  .contact-zone-map,
  .contact-social-card {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  /* Boutons confortables au tactile. */
  button, .mc-button, .accomp-primary-button, .content-contact-cta-button {
    min-height:46px;
  }
}

@media (max-width: 360px) {
  .header-inner,
  body.home-approved .header-inner { grid-template-columns:112px minmax(0,1fr) auto !important; gap:7px !important; }
  .site-logo,
  body.home-approved .site-logo { width:112px !important; max-width:112px !important; }
  .site-logo img,
  body.home-approved .site-logo img { width:100px !important; max-width:100px !important; }
  .menu-toggle,
  body.home-approved .menu-toggle { min-width:80px !important; padding:0 9px !important; }
  .menu-label { font-size:13px !important; }
}


/* ============================================================
   MOBILE CIBLÉ V2 — recadrage des visuels demandés.
   Ordinateur inchangé.
   ============================================================ */
@media (max-width: 767px) {
  .mc-photo--home,
  .mc-photo--contact,
  .mc-photo--parental,
  .mc-photo--workshops {
    width:100% !important;
    aspect-ratio: 4 / 3 !important;
    height:auto !important;
    min-height:0 !important;
    background-size:cover !important;
    background-position:center center !important;
  }
  .mc-photo--home {
    aspect-ratio: 1 / 1 !important;
    background-position:center center !important;
  }

  /* MDPH : on supprime le picto visible à moitié sous l'image sur téléphone. */
  .mdph-page .mdph-purpose-icon { display:none !important; }
  .mdph-page .mdph-purpose {
    grid-template-columns:1fr !important;
    gap:12px !important;
    margin-top:6px !important;
  }
  .mdph-page .mdph-ateliers-photo {
    padding:0 16px 18px !important;
    overflow:hidden !important;
    background:#f7f2e9 !important;
  }
  .mdph-page .mdph-ateliers-photo img {
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio: 4 / 3 !important;
    object-fit:cover !important;
    object-position:center center !important;
    border-radius:22px !important;
    box-shadow:0 14px 30px rgba(6,72,88,.12) !important;
  }
}


/* Rebuild zéro — corrections visuelles uniquement sur téléphone. */
@media (max-width:767px){
  .mc-photo--home{
    background-image:url('../images/mobile/home-hero-mobile-clean.webp')!important;
    width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:1/1!important;
    background-size:cover!important;background-position:center center!important;
  }
  .mc-photo--contact{
    background-image:url('../images/mobile/contact-mobile-clean.webp')!important;
    width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:4/3!important;
    background-size:cover!important;background-position:center center!important;
  }
  .mc-photo--parental{
    background-image:url('../images/mobile/parental-mobile-clean.webp')!important;
    width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:4/3!important;
    background-size:cover!important;background-position:center center!important;
  }
  .mc-photo--workshops{
    background-image:url('../images/mobile/workshops-mobile-clean.webp')!important;
    width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:4/3!important;
    background-size:cover!important;background-position:center center!important;
  }
  /* MDPH : image dédiée mobile, sans le pictogramme coupé en bas. */
  .mdph-page .mdph-ateliers-photo img{
    content:url('../images/mobile/mdph-mobile-clean.webp')!important;
    width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
    aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important;
    border-radius:22px!important;box-shadow:0 14px 30px rgba(6,72,88,.12)!important;
  }
  .mdph-page .mdph-purpose-icon{display:none!important;}
}

/* ============================================================
   MOBILE — dédoublonnage du CTA « Prendre contact »
   2026-09-05 : correction strictement limitée au téléphone.
   Sur les pages qui possèdent déjà un CTA de contact dans leur
   contenu, le CTA d'en-tête est masqué pour éviter la répétition.
   ============================================================ */
@media (max-width:767px){
  body.ortho-info-page .header-cta,
  body.about-redesign .header-cta,
  body[data-page="accompagnement-individuel.html"] .header-cta,
  body[data-page="accompagnement-parental.html"] .header-cta,
  body[data-page="ateliers-interventions.html"] .header-cta,
  body[data-page="contact.html"] .header-cta{
    display:none!important;
  }

  /* La page individuel a déjà son bouton dans la version mobile dédiée. */
  body[data-page="accompagnement-individuel.html"] .content-contact-cta-button{
    display:none!important;
  }
}