/* Mise en page responsive autour des maquettes desktop (1440) et mobile (390) */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
:focus-visible{outline:2px solid #FF5A1F;outline-offset:2px}

/* Bascule desktop / mobile */
.v-mobile{display:none!important}
@media (max-width:1023px){
  .v-desktop{display:none!important}
  .v-mobile{display:flex!important}
}

/* Desktop : contenu centré sur 1312px, gouttière mini 64px */
.v-desktop > header,
.v-desktop > section,
.v-desktop > footer{
  padding-left:max(64px, calc((100% - 1312px) / 2))!important;
  padding-right:max(64px, calc((100% - 1312px) / 2))!important;
}

/* Scène du hero : composition 1312x640 mise à l'échelle (voir main.js) */
.stage-inner{position:absolute;left:0;top:0;width:1312px;height:640px;transform-origin:0 0}

/* Mobile/tablette : colonne centrée sur 592px au-delà de 640px */
@media (min-width:640px){
  .v-mobile > header,
  .v-mobile > section,
  .v-mobile > footer{
    padding-left:max(24px, calc((100% - 592px) / 2))!important;
    padding-right:max(24px, calc((100% - 592px) / 2))!important;
  }
  .v-mobile .m-menu{padding-left:max(24px, calc((100% - 592px) / 2));padding-right:max(24px, calc((100% - 592px) / 2))}
}

/* Menu mobile */
.m-menu{display:flex;flex-direction:column;padding:4px 24px 20px;background:#FFFFFF;border-bottom:1px solid #EAEAE7}
.m-menu a{padding:14px 0;font-size:17px;font-weight:500;border-bottom:1px solid #EFEEEA}
.m-menu .m-menu-cta{margin-top:16px;padding:0;height:52px;border:0;border-radius:12px;background:#0E0E0C;color:#FFFFFF;display:flex;align-items:center;justify-content:center}
.m-menu .m-menu-cta:hover{color:#FFFFFF}

/* Logo du footer aligné à gauche (sinon le SVG s'étire sur toute la largeur) */
footer svg[aria-label="Braise"]{align-self:flex-start}

/* Mobile < 390 px (largeur de la maquette) : les gros titres rétrécissent proportionnellement */
@media (max-width:389px){
  .v-mobile h1{font-size:10.25vw!important}
  .v-mobile h2[style*="font-size: 34px"]{font-size:8.7vw!important}
  .v-mobile h2[style*="font-size: 32px"]{font-size:8.2vw!important}
}
/* « complémentaires. » déborde à 34 px même à 390 px dans la maquette */
.v-mobile #m-equipe h2{font-size:min(32px, 8.2vw)!important}

/* Formulaire de contact : choix message vocal / écrit */
.mode-tabs{display:inline-flex;gap:4px;padding:4px;background:#F4F3F0;border-radius:12px}
.mode-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 14px;white-space:nowrap;border:0;border-radius:9px;background:transparent;color:#5E5D59;font:500 14px/1 inherit;font-family:inherit;cursor:pointer}
.mode-btn[aria-selected="true"]{background:#FFFFFF;color:#0E0E0C;box-shadow:0 1px 2px rgba(14,14,12,0.08),0 1px 1px rgba(14,14,12,0.04)}
.v-mobile .mode-tabs{display:flex}
.v-mobile .mode-btn{flex:1;min-width:0;padding:0 8px;gap:6px;font-size:13px}
textarea[data-message-input]:focus,[data-voice] input:focus{outline:2px solid #FF5A1F;outline-offset:1px;border-color:transparent}