/* Styles communs du site vitrine (repris de la maquette, thème clair) */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#F2F0E9;color:#14140F;font-family:"Space Grotesk",system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:#2B4CF2;color:#fff}
a{color:#14140F}
a:hover{color:#1B33B8}
summary::-webkit-details-marker{display:none}
details[open] summary span:last-child{transform:rotate(45deg)}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
.serif{font-family:'Averia Serif Libre',Georgia,serif}
.mono{font-family:'JetBrains Mono',monospace}
.kicker{font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#1B33B8}
.card{background:#FBFAF6;border:1px solid #CFCABB;border-radius:15px}
@keyframes blinkCaret{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Anti-clignotement : la barre de nav occupe sa place avant même que le JS
   ne l'ait construite, et le contenu apparaît en fondu au lieu de surgir. */
#site-nav{display:block;height:66px;background:rgba(242,240,233,.82);border-bottom:1px solid #CFCABB}
#site-footer,.site-footer{margin-top:70px}
#site-footer{display:block;min-height:320px;background:#14140F}
.fade-in{animation:fadeIn .28s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Curseurs des calculateurs */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:100px;background:#DDD9CB;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:100px;background:#2B4CF2;cursor:pointer;border:3px solid #FBFAF6;box-shadow:0 1px 5px rgba(20,20,15,.25)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:100px;background:#2B4CF2;cursor:pointer;border:3px solid #FBFAF6}

/* ============================================================================
   Responsive : système repris tel quel des maquettes Claude Design.
   ≤ 980px : les colonnes asymétriques s'empilent, les grilles de 3-4 cartes
             passent à 2 colonnes, les encarts collants se libèrent.
   ≤ 640px : les rangées de cartes deviennent des CARROUSELS balayables
             (cartes à 82%, plein bord, accroche au balayage), sauf le footer,
             les formulaires des calculateurs et les exceptions .no-carousel.
   Les grilles étant en style inline (comme dans la maquette), on cible les
   attributs style, en plus des classes du site.
   ============================================================================ */
@media(max-width:980px){
  /* colonnes asymétriques → une seule colonne */
  [style*="grid-template-columns:1.15fr 1fr"],[style*="grid-template-columns:1.1fr 1fr"],
  [style*="grid-template-columns:1.2fr 1fr"],[style*="grid-template-columns:1fr 1.2fr"],
  [style*="grid-template-columns:1.5fr 1fr"],[style*="grid-template-columns:1fr 380px"],
  [style*="grid-template-columns:1fr 400px"],[style*="grid-template-columns:300px 1fr"],
  [style*="grid-template-columns:360px 1fr"],
  .fiche-grid,.studio-grid{grid-template-columns:1fr!important}
  /* encarts collants → statiques */
  .fiche-aside,main [style*="top:96px"],main [style*="top:100px"]{position:static!important}
  .studio-rail{position:static!important;top:auto!important}
  /* 3-4 cartes par rangée → 2 colonnes */
  [style*="grid-template-columns:repeat(3,1fr)"],[style*="grid-template-columns:repeat(4,1fr)"],
  .grid-3{grid-template-columns:1fr 1fr!important}
  /* footer → 2 colonnes */
  [style*="grid-template-columns:1.6fr 1fr 1fr 1fr"],.grid-foot{grid-template-columns:1fr 1fr!important}
  .facture-cols{grid-template-columns:110px 1fr!important}
  .facture-cols > :nth-child(3){text-align:left!important}
}

@media(max-width:640px){
  .wrap{padding:0 18px}
  /* nav : liens repliés dans le menu, barre plus basse */
  .nav-links{gap:12px!important}
  .nav-links .navlink{display:none!important}
  #burger{display:flex!important}
  nav [style*="height:66px"]{height:58px!important}
  #site-nav{height:58px}

  /* grilles 4 colonnes et footer : empilés */
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr!important}

  /* ---- rangées de cartes → carrousel balayable (comme la maquette) ---- */
  [style*="grid-template-columns:repeat(3,1fr)"],[style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:1fr 1fr"],
  .grid-3,.grid-2,.grid-2c{
    display:flex!important;grid-template-columns:none!important;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-padding-left:18px;padding-left:18px!important;padding-right:18px!important;padding-bottom:4px;
    margin-left:-18px!important;margin-right:-18px!important;
  }
  [style*="grid-template-columns:repeat(3,1fr)"]::-webkit-scrollbar,
  [style*="grid-template-columns:repeat(2,1fr)"]::-webkit-scrollbar,
  [style*="grid-template-columns:1fr 1fr"]::-webkit-scrollbar,
  .grid-3::-webkit-scrollbar,.grid-2::-webkit-scrollbar,.grid-2c::-webkit-scrollbar{display:none}
  [style*="grid-template-columns:repeat(3,1fr)"]>*,[style*="grid-template-columns:repeat(2,1fr)"]>*,
  [style*="grid-template-columns:1fr 1fr"]>*,
  .grid-3>*,.grid-2>*,.grid-2c>*{
    flex:0 0 82%!important;max-width:82%;scroll-snap-align:start;
  }

  /* ---- exceptions : jamais de carrousel, on empile ---- */
  /* Blocs « titre d'un côté, liste de l'autre » : sur téléphone la liste passe
     sous le titre. Un carrousel n'a aucun sens sur du texte suivi. */
  .stack-mobile{
    display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;
    gap:30px!important;scroll-snap-type:none!important;
    padding-left:0!important;padding-right:0!important;
    margin-left:0!important;margin-right:0!important;
  }
  .stack-mobile>*{flex:none!important;max-width:100%!important;width:auto!important}

  /* le footer */
  footer [style*="grid-template-columns"],.grid-foot{
    display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;
    scroll-snap-type:none;margin-left:0!important;margin-right:0!important;padding:0!important;
  }
  footer [style*="grid-template-columns"]>*,.grid-foot>*{flex:none!important;max-width:none!important}
  /* pagination d'article, formulaires des calculateurs, sections marquées */
  main nav[style*="grid-template-columns:1fr 1fr"],
  .tool-card [style*="grid-template-columns:1fr 1fr"],
  .deux-col,.no-carousel{
    display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;
    scroll-snap-type:none;margin-left:0!important;margin-right:0!important;
    padding-left:0!important;padding-right:0!important;
  }
  main nav[style*="grid-template-columns:1fr 1fr"]>*,
  .tool-card [style*="grid-template-columns:1fr 1fr"]>*,
  .deux-col>*,.no-carousel>*{flex:none!important;max-width:none!important}
  /* le détail des charges du calculateur garde son remplissage interne */
  .tool-card [style*="padding:16px 18px"]{padding:16px 18px!important}

  /* remplissages réduits, comme la maquette */
  [style*="padding:44px 40px"]{padding:30px 22px!important}
  [style*="padding:56px 48px"],[style*="padding:56px 44px"],[style*="padding:52px 44px"]{padding:36px 22px!important}
  [style*="padding:36px 32px"],[style*="padding:34px 32px"],[style*="padding:34px 30px"]{padding:28px 20px!important}
  [style*="padding:44px 28px 20px"],[style*="padding:70px 28px 40px"],[style*="padding:56px 28px 90px"]{padding-left:18px!important;padding-right:18px!important}
  .tool-card{padding:26px 18px!important}
  .tool-steps{overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .tool-steps::-webkit-scrollbar{display:none}
  .tool-actions{flex-wrap:wrap}
  .after-grid{grid-template-columns:1fr!important}
}

/* Aides explicites, identiques à la maquette Offres :
   data-carousel force le carrousel, data-stack l'empile, data-bleed fait
   défiler plein bord (tableau comparatif). */
@media(max-width:640px){
  [data-carousel]{display:flex!important;grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding-left:18px;padding-left:18px!important;padding-right:18px!important;padding-bottom:4px;margin-left:-18px!important;margin-right:-18px!important}
  [data-carousel]::-webkit-scrollbar{display:none}
  [data-carousel]>*{flex:0 0 82%!important;max-width:82%;scroll-snap-align:start}
  [data-stack]{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;scroll-snap-type:none;margin-left:0!important;margin-right:0!important;padding:0!important}
  [data-stack]>*{flex:none!important;max-width:none!important}
  [data-bleed]{margin-left:-18px!important;margin-right:-18px!important;padding-left:18px!important;padding-right:18px!important}
  [data-bleed]::-webkit-scrollbar{display:none}
}

/* Mode intégré des calculateurs (iframe de Mon Studio) */
html.embed #site-nav,html.embed nav,html.embed #site-footer,html.embed footer,html.embed .tool-extra{display:none!important}
html.embed body{background:#F2F0E9}
html.embed section{padding-top:20px!important}