/* =========================================================================
   BT CONSULTING & MANAGEMENT — feuille mobile commune
   Chargée par toutes les pages, juste avant </head> : elle passe donc
   après les styles inline de chaque page et peut les corriger.
   Cible : téléphone portrait (format 9/16, ~390 x 844).
   ========================================================================= */

/* le logo de la barre mobile n'existe qu'en dessous de 760 px */
.m-brand{display:none}

@media (max-width:760px){

  /* ---------------------------------------------------------------
     1. Rien ne déborde en largeur : la page tient dans le 9/16
     --------------------------------------------------------------- */
  /* clip et non hidden : hidden transforme le body en conteneur de defilement
     et casse le position:sticky de la barre de navigation */
  html,body{max-width:100%;overflow-x:clip}
  img,video,svg,canvas,iframe,table,pre{max-width:100%}
  img,video{height:auto}
  h1,h2,h3,h4,p,li,a,span,b,strong{overflow-wrap:break-word}

  /* ---------------------------------------------------------------
     2. Barre de navigation : logo à gauche, bouton menu carré à droite
     --------------------------------------------------------------- */
  .navwrap,
  .navwrap.on-dark,
  .navwrap.on-light,
  .navwrap.nav-tinted{
    background:#fff;padding:0;border:0;box-shadow:0 1px 0 rgba(16,47,94,.07);
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .navwrap .bar,
  .navwrap.nav-tinted .bar{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:12px 16px 12px 20px;background:transparent;border:0;border-radius:0;box-shadow:none}

  .m-brand{display:block;order:1;flex:0 1 auto;min-width:0;line-height:0}
  .m-brand img{display:block;width:auto;height:clamp(34px,10.4vw,44px);max-width:100%}

  .bar .center,.bar .cta{display:none}

  .menu-btn{
    order:3;flex:0 0 auto;align-self:center;margin:0;padding:0;gap:0;
    display:inline-flex;align-items:center;justify-content:center;
    width:clamp(48px,13.5vw,56px);height:clamp(48px,13.5vw,56px);
    border-radius:13px;background:#fff;border:1px solid rgba(16,47,94,.16);
    color:#173B73;-webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:0 4px 14px rgba(8,20,44,.10);text-shadow:none}
  .menu-btn:hover,
  .navwrap.on-dark .menu-btn,
  .navwrap.nav-tinted .menu-btn,
  .navwrap.nav-tinted.on-dark .menu-btn{
    background:#fff;border-color:rgba(16,47,94,.16);color:#173B73;transform:none;
    box-shadow:0 4px 14px rgba(8,20,44,.10)}
  .menu-btn .label{display:none}
  .menu-btn .bars{position:relative;width:25px;height:16px}
  .menu-btn .bars span,
  .menu-btn .bars span:nth-child(2),
  .menu-btn .bars span:nth-child(3),
  .navwrap.on-dark .menu-btn .bars span,
  .navwrap.nav-tinted .menu-btn .bars span{
    width:100%;height:2.6px;background:#173B73;box-shadow:none}
  /* croix quand le menu plein écran est ouvert */
  .menu-btn.is-active .bars span:nth-child(2){opacity:0}

  /* ---------------------------------------------------------------
     3. Toutes les grilles passent sur une seule colonne
     --------------------------------------------------------------- */
  .pj2-body,.pj2-gallery,.pj2-relgrid,
  .mcards,.fgrid,.sx-lead,
  .opq-inner,.qual-top,.qual-cards,
  .c-form-grid,.field-row,
  .dec-inner,.act-card,.ac-imgs--two,
  .ar-body,.ar-grid,.real-item,.ref-grid{
    grid-template-columns:1fr}
  .pj2-body,.pj2-relgrid,.mcards,.fgrid,.qual-cards,.ar-grid,.ref-grid,
  .pj2-gallery,.real-item,.ac-imgs--two{gap:clamp(14px,4vw,20px)}

  /* ---------------------------------------------------------------
     4. Images : elles remplissent la largeur sans déformation
     --------------------------------------------------------------- */
  .pj2-gallery img,.pj2-gallery figure img,
  .ar-card img,.ar-grid img,.ref-grid img,
  .real-item img,.ac-imgs img,.mcards img,.fgrid img{
    width:100%;height:auto;object-fit:cover}
  /* visuels paysage recadrés en 4/3 : lisibles sans manger tout l'écran */
  .ar-card .ar-media,.ar-media,.pj2-gallery figure,.ac-img{
    width:100%;aspect-ratio:4/3;overflow:hidden}
  .ar-card .ar-media img,.ar-media img,.pj2-gallery figure img,.ac-img img{
    width:100%;height:100%;object-fit:cover}

  /* ---------------------------------------------------------------
     5. Confort de lecture et de saisie
     --------------------------------------------------------------- */
  input,select,textarea{font-size:16px}   /* évite le zoom auto d'iOS */
  .btn,.cta,.menu-btn,button[type=submit]{min-height:44px}

  /* ---------------------------------------------------------------
     6. Fluidité : on coupe ce qui rame sur téléphone
     --------------------------------------------------------------- */
  .dec-fig svg{animation:none}
  .hero-media-frame{animation:none}
}

/* le menu plein écran garde son fond sombre quelle que soit la page */
@media (max-width:760px){
  .nav-ov{padding:12vh 7vw}
}

/* ---------------------------------------------------------------
   7. Visuels de fond : version allégée sur téléphone
      (hero-building.jpg fait 1672 px de large ; inutile sur 390 px)
   --------------------------------------------------------------- */
@media (max-width:760px){
  .approach-bg,.hero-photo{background-image:url('../assets/hero-building-m.webp')}
}

/* ---------------------------------------------------------------
   8. La barre reste visible en permanence sur téléphone
   --------------------------------------------------------------- */
@media (max-width:760px){
  .navwrap.nav-hidden{transform:none}
}

/* ---------------------------------------------------------------
   9. Page Réalisations : sur téléphone, on entre directement dans
      les projets. Tout l'en-tête (visuel, chapô, étapes 01-02-03,
      boutons et les deux cartes de tête) est retiré ; le <h1> reste
      dans la page pour les moteurs et les lecteurs d'écran.
   --------------------------------------------------------------- */
@media (max-width:760px){
  .rhero{display:block;min-height:0;padding:0;background:none;overflow:visible}
  .rhero .rh-art,
  .rhero .rh-cards,
  .rhero .rck,
  .rhero .lead,
  .rhero .rh-steps,
  .rhero .rh-ctas{display:none}
  /* le script d'accroche de la barre pose ces valeurs en style inline */
  .rhero .rh-wrap{padding:0 !important;margin:0;max-width:none;min-height:0}
  .navwrap{margin-bottom:0 !important}
  .rhero .rh-text{max-width:none;margin:0}
  /* la grille des projets remonte : pas de trou la ou etait l'en-tete */
  .allref{padding-top:clamp(28px,8vw,46px)}
  .rhero h1{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;
    overflow:hidden;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%)}
}

/* ---------------------------------------------------------------
   9. Détails tactiles
   --------------------------------------------------------------- */
@media (max-width:760px){
  /* champs : 16 px mini, sinon iOS zoome au focus (la règle .field gagnait) */
  .field input,.field select,.field textarea,
  .hc-field input,.hc-field select,.hc-field textarea,
  input,select,textarea{font-size:16px}
  /* liens de pied de page : cible tactile confortable */
  footer a{display:inline-block;padding-block:10px}
}

/* ---------------------------------------------------------------
   10. Expertises — « Des études structurelles au service de la
       décision ». Sur téléphone la section se lit de haut en bas :
       titre → domaine ouvert (badge ACTIF) → son texte → son schéma
       → les autres domaines repliés (chevron). Rien n'est retiré,
       seul l'ordre change ; le choix reste piloté par data-mode.
   --------------------------------------------------------------- */
@media (max-width:760px){
  .decision{padding:38px 20px 44px}
  .decision .dec-inner{display:flex;flex-direction:column;gap:0;align-items:stretch}
  /* les trois colonnes disparaissent : leurs enfants deviennent la pile */
  .decision .dec-left,
  .decision .dec-descs,
  .decision .dec-cards{display:contents}

  .decision .dec-left h2{order:1;margin:0 0 20px;font-size:clamp(30px,8.6vw,38px);
    line-height:1.12;letter-spacing:-.6px}

  /* --- le texte du domaine ouvert --------------------------------- */
  .decision .dec-desc{order:3;display:none;position:static;max-width:none;margin:16px 2px 0;
    opacity:1;transform:none;font-size:16px;line-height:1.6;text-align:center}
  .decision .dec-desc b{display:none}          /* le nom est déjà dans la carte ouverte */
  .decision[data-mode="calc"] .dec-desc[data-d="calc"],
  .decision[data-mode="stab"] .dec-desc[data-d="stab"],
  .decision[data-mode="fond"] .dec-desc[data-d="fond"],
  .decision[data-mode="diag"] .dec-desc[data-d="diag"]{display:block}

  /* --- le schéma technique ---------------------------------------- */
  .decision .dec-fig{order:4;width:100%;max-width:262px;margin:0 auto -16px;transform:none!important}
  .decision .dec-fig svg{width:100%;height:auto}

  /* --- la liste des domaines -------------------------------------- */
  .decision .dec-cards::before{display:none}   /* le filet vertical de la timeline */
  .decision .dec-card{order:5;display:flex;align-items:center;gap:14px;
    margin:0 0 12px;padding:14px 16px;border-radius:15px;
    box-shadow:0 8px 20px rgba(20,45,85,.07);transform:none!important}
  .decision .dec-card::before{display:none}    /* la pastille de la timeline */
  .decision .dec-ic{order:0;width:34px;height:34px}
  .decision .dec-card h3{order:2;flex:1 1 auto;font-size:15.5px}
  /* chevron des domaines repliés */
  .decision .dec-card::after{content:"";order:3;flex:0 0 auto;width:10px;height:10px;
    margin-right:5px;border-right:2.2px solid #2E6BD4;border-bottom:2.2px solid #2E6BD4;
    border-radius:1px;transform:translateY(-3px) rotate(45deg);opacity:.8}

  /* --- le domaine ouvert passe en tête ---------------------------- */
  .decision[data-mode="calc"] .dec-card[data-ov="calc"],
  .decision[data-mode="stab"] .dec-card[data-ov="stab"],
  .decision[data-mode="fond"] .dec-card[data-ov="fond"],
  .decision[data-mode="diag"] .dec-card[data-ov="diag"]{
    order:2;margin:0;padding:15px 14px 15px 16px;border:1.6px solid var(--royal);border-radius:17px;
    box-shadow:0 10px 26px rgba(34,83,156,.12)}
  /* trait de séparation entre l'icône et le nom */
  .decision[data-mode="calc"] .dec-card[data-ov="calc"]::before,
  .decision[data-mode="stab"] .dec-card[data-ov="stab"]::before,
  .decision[data-mode="fond"] .dec-card[data-ov="fond"]::before,
  .decision[data-mode="diag"] .dec-card[data-ov="diag"]::before{
    display:block;content:"";position:static;order:1;flex:0 0 auto;
    width:1.5px;height:36px;margin:0 2px;border-radius:2px;background:#dbe4f2;transform:none}
  /* badge ACTIF à la place du chevron */
  .decision[data-mode="calc"] .dec-card[data-ov="calc"]::after,
  .decision[data-mode="stab"] .dec-card[data-ov="stab"]::after,
  .decision[data-mode="fond"] .dec-card[data-ov="fond"]::after,
  .decision[data-mode="diag"] .dec-card[data-ov="diag"]::after{
    content:"ACTIF";width:auto;height:auto;margin:0;border:0;border-radius:999px;
    padding:6px 11px;background:#e4edfb;color:var(--royal);transform:none;opacity:1;
    font-size:11px;font-weight:700;letter-spacing:.09em;line-height:1}
}