/* V60 — responsive mobile propre, sans modifier la composition desktop */
* { box-sizing: border-box; }
html, body { max-width:100%; }
img { max-width:100%; height:auto; }
.skip-link { position:fixed; left:12px; top:12px; z-index:10000; transform:translateY(-180%); padding:10px 14px; background:#fff; color:#24211f; border:2px solid #d9570b; border-radius:8px; font-weight:700; }
.skip-link:focus { transform:translateY(0); }
:focus-visible { outline:3px solid #d9570b; outline-offset:3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }

/* Desktop : aucun changement de composition. */
@media (min-width:951px) {
  .menu-toggle { display:none !important; }
}

@media (max-width:950px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden; }
  .site-header { width:100%; height:76px; padding:7px 12px; overflow:visible; }
  .site-header > .container.header-inner { position:relative; width:100%; max-width:100%; min-width:0; height:100%; display:flex !important; flex-wrap:nowrap !important; align-items:center; justify-content:space-between; gap:10px; margin:0; }
  .brand { flex:0 1 auto !important; min-width:0; margin:0 !important; }
  .brand img { display:block; width:54px; height:54px; max-width:54px; }
  .header-whoami { display:none !important; }

  /* Navigation desktop totalement masquée. Le menu ouvert est un panneau dans le header-inner. */
  .site-header .header-inner > nav#navigation-principale,
  .site-header .header-inner > nav[aria-label="Navigation principale"] {
    display:none !important;
    position:absolute !important;
    top:calc(100% + 8px) !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:8px !important;
    box-sizing:border-box !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    gap:4px !important;
    white-space:normal !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    max-height:calc(100vh - 90px) !important;
    background:#fffaf2 !important;
    border:1px solid #d8c8b5 !important;
    border-radius:14px !important;
    box-shadow:0 12px 28px rgba(50,40,30,.16) !important;
    z-index:1000 !important;
    transform:none !important;
  }
  .site-header .header-inner > nav#navigation-principale.mobile-open,
  .site-header .header-inner > nav[aria-label="Navigation principale"].mobile-open { display:flex !important; }
  .site-header .header-inner > nav#navigation-principale > a,
  .site-header .header-inner > nav[aria-label="Navigation principale"] > a { display:flex !important; width:100% !important; min-width:0 !important; min-height:48px !important; align-items:center; justify-content:flex-start; padding:11px 13px !important; border-radius:10px; white-space:normal !important; overflow-wrap:anywhere; box-sizing:border-box; }
  .site-header .header-inner > nav .nav-cta { justify-content:center !important; margin-top:4px; }
  .menu-toggle { display:inline-flex !important; flex:0 0 46px; width:46px; min-width:46px; max-width:46px; height:46px; min-height:46px; padding:0; margin:0; align-items:center; justify-content:center; box-sizing:border-box; border:1px solid #d8c8b5; border-radius:10px; background:#fffaf2; color:#24211f; font:700 24px/1 sans-serif; cursor:pointer; }

  /* Hero : une seule colonne, jamais plus large que le viewport. */
  body.homepage .hero { display:grid !important; grid-template-columns:minmax(0,1fr) !important; width:100% !important; max-width:100% !important; min-width:0 !important; overflow:hidden !important; }
  body.homepage .hero-copy, body.homepage .hero-art { width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box; }
  body.homepage .hero-copy { padding:38px 18px 24px !important; }
  body.homepage .hero h1 { font-size:clamp(32px,9vw,43px) !important; overflow-wrap:anywhere; }
  body.homepage .hero-art { min-height:0 !important; padding:0 18px 28px !important; display:flex; align-items:center; justify-content:center; overflow:hidden; }
  body.homepage .hero-illustration { width:min(100%,310px) !important; max-width:310px !important; margin:0 auto !important; border-radius:18px; overflow:hidden; }
  body.homepage .hero-illustration img { display:block; width:100% !important; max-width:100% !important; height:auto !important; object-fit:contain; }

  /* Services : suppression du placement spécial des cartes 4/5. Flux vertical simple. */
  #services .service-grid-three { display:flex !important; flex-direction:column !important; flex-wrap:nowrap !important; align-items:stretch !important; gap:16px !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; }
  #services .service-grid-three > article { display:block !important; position:static !important; float:none !important; transform:none !important; width:100% !important; max-width:100% !important; min-width:0 !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:28px 18px !important; flex:0 0 auto !important; grid-column:auto !important; grid-row:auto !important; box-sizing:border-box !important; }
  #services .service-grid-three > article:nth-child(4), #services .service-grid-three > article:nth-child(5) { grid-column:auto !important; grid-row:auto !important; }
  #services .service-grid-three h3 { white-space:normal !important; overflow-wrap:anywhere; }
}

@media (max-width:600px) {
  .site-header { padding-left:10px; padding-right:10px; }
  .brand img { width:50px; height:50px; max-width:50px; }
  .menu-toggle { width:44px; min-width:44px; max-width:44px; height:44px; }
  body.homepage .hero-copy { padding-left:14px !important; padding-right:14px !important; }
  body.homepage .hero-art { padding-left:14px !important; padding-right:14px !important; }
  body.homepage .hero-illustration { width:min(100%,290px) !important; max-width:290px !important; }
  #services .service-grid-three > article { padding-left:16px !important; padding-right:16px !important; }
}


/* V60.15 — menu mobile harmonisé sur toutes les pages */
@media (max-width:950px) {
  .menu-toggle {
    position:relative !important;
    display:inline-flex !important;
    flex:0 0 46px !important;
    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;
    height:46px !important;
    min-height:46px !important;
    padding:0 !important;
    margin:0 !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    border:1px solid #d98a52 !important;
    border-radius:12px !important;
    background:#e7a06b !important;
    color:#fff !important;
    box-shadow:0 4px 12px rgba(60,50,40,.12) !important;
    cursor:pointer !important;
  }
  .menu-toggle:hover,
  .menu-toggle:focus-visible {
    background:#d98a52 !important;
    border-color:#c97a45 !important;
  }
  .menu-toggle:active { transform:scale(.97); }

  /* Icône unique, dessinée en CSS : indépendante du HTML de chaque page. */
  .menu-toggle > span {
    display:none !important;
  }
  .menu-toggle::before {
    content:"" !important;
    display:block !important;
    width:22px !important;
    height:2px !important;
    border-radius:2px !important;
    background:#fff !important;
    box-shadow:0 7px 0 #fff, 0 14px 0 #fff !important;
  }
}

@media (max-width:600px) {
  .menu-toggle {
    flex-basis:44px !important;
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:44px !important;
  }
}


/* V60.16 — menu mobile : orange fortement atténué + panneau légèrement teinté */
@media (max-width:950px){
  .menu-toggle{
    background:#f3e8dc !important;
    border-color:#d8c8b5 !important;
    color:#7a6758 !important;
    box-shadow:0 3px 10px rgba(60,50,40,.10) !important;
  }
  .menu-toggle:hover,.menu-toggle:focus-visible{
    background:#eadccd !important;
    border-color:#cdbba7 !important;
    color:#5f5045 !important;
  }
  .header-inner nav{
    background:#fbf6ef !important;
    border:1px solid #d8c8b5 !important;
    box-shadow:0 14px 32px rgba(45,38,31,.14) !important;
  }
  .header-inner nav a:hover,.header-inner nav a:focus-visible{
    background:#f1e5d8 !important;
    color:#5f5045 !important;
  }
  .header-inner nav .nav-cta{
    background:#e7c6aa !important;
    color:#4b4038 !important;
  }
  .header-inner nav .nav-cta:hover,.header-inner nav .nav-cta:focus-visible{
    background:#dbb38f !important;
    color:#3f352e !important;
  }
  .menu-toggle::before{
    background:currentColor !important;
    box-shadow:0 7px 0 currentColor,0 14px 0 currentColor !important;
  }
}


/* V60.17 — surcharge mobile finale : feuille chargée après style.css */
@media (max-width:950px){
  .menu-toggle{
    background:#eee4d8 !important;
    border:1px solid #d5c6b6 !important;
    color:#66594e !important;
    box-shadow:0 3px 9px rgba(60,50,40,.10) !important;
  }
  .menu-toggle:hover,.menu-toggle:focus-visible{
    background:#e5d8ca !important;
    border-color:#c8b7a6 !important;
    color:#55483f !important;
  }
  .menu-toggle::before{
    background:currentColor !important;
    box-shadow:0 7px 0 currentColor,0 14px 0 currentColor !important;
  }
  .site-header .header-inner > nav#navigation-principale,
  .site-header .header-inner > nav[aria-label="Navigation principale"]{
    background:#f7f0e8 !important;
    border:1px solid #d6c7b7 !important;
    box-shadow:0 12px 28px rgba(50,40,30,.14) !important;
  }
  .site-header .header-inner > nav#navigation-principale > a:hover,
  .site-header .header-inner > nav#navigation-principale > a:focus-visible,
  .site-header .header-inner > nav[aria-label="Navigation principale"] > a:hover,
  .site-header .header-inner > nav[aria-label="Navigation principale"] > a:focus-visible{
    background:#eee3d7 !important;
    color:#55483f !important;
  }
  .site-header .header-inner > nav .nav-cta{
    background:#dcc4aa !important;
    color:#463b34 !important;
  }
  .site-header .header-inner > nav .nav-cta:hover,
  .site-header .header-inner > nav .nav-cta:focus-visible{
    background:#d1b49a !important;
    color:#3d332c !important;
  }
}

/* V60.18 — finition du bouton hamburger : orange clair + centrage fiable */
@media (max-width:950px){
  .menu-toggle{
    background:#f1d8c3 !important;
    border-color:#dfc0a5 !important;
    color:#8a674f !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }
  .menu-toggle:hover,
  .menu-toggle:focus-visible{
    background:#eccdb4 !important;
    border-color:#d6b394 !important;
    color:#76553f !important;
  }
  .menu-toggle > span{
    position:relative !important;
    display:block !important;
    width:22px !important;
    height:18px !important;
    margin:0 !important;
    padding:0 !important;
  }
  .menu-toggle > span::before{
    content:"" !important;
    position:absolute !important;
    top:1px !important;
    left:0 !important;
    width:22px !important;
    height:2px !important;
    border-radius:2px !important;
    background:currentColor !important;
    box-shadow:0 7px 0 currentColor, 0 14px 0 currentColor !important;
  }
  .menu-toggle::before{display:none !important;}
  .menu-toggle > span > span{display:none !important;}
}