/* ============================================================
   ASI Consulting — styles partagés
   Globals + équivalents CSS des attributs `style-hover`/`style-focus`
   du format de design Claude (.dc.html).
   ============================================================ */

*{box-sizing:border-box}
body{margin:0;background:#FFFFFF;font-family:'Archivo',sans-serif;color:#454A61;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:#2C3768;text-decoration:none}
::selection{background:#EEA320;color:#161D40}
input,select,textarea{font-family:'Archivo',sans-serif}

/* --- Barre d'info (haut de page) --- */
.topbar-a{color:#E9EBF4;letter-spacing:0.06em;transition:color .15s}
.topbar-a:hover{color:#EEA320}

/* --- Navigation principale --- */
.nav-a{color:#454A61;padding:32px 0 30px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav-a:hover{color:#161D40}
.nav-a.is-active{color:#161D40;border-bottom:2px solid #EEA320}
.nav-cta{background:#EEA320;color:#161D40;font-weight:600;font-size:13.5px;padding:13px 22px;border-radius:2px;margin-left:6px;transition:background .15s}
.nav-cta:hover{background:#D89112;color:#161D40}

/* --- Fils d'Ariane --- */
.crumb-a{color:#8A8FA6;transition:color .15s}
.crumb-a:hover{color:#A66E08}
.crumb-a-dark{color:#8A90AF;transition:color .15s}
.crumb-a-dark:hover{color:#EEA320}

/* --- Liens texte --- */
.link-gold{color:#A66E08;font-weight:600;transition:color .15s}
.link-gold:hover{color:#161D40}
.link-dark{color:#161D40;font-weight:600;transition:color .15s}
.link-dark:hover{color:#A66E08}
.link-amber{color:#EEA320;transition:color .15s}
.link-amber:hover{color:#F6C155}
.link-muted{color:#454A61;font-weight:500;transition:color .15s}
.link-muted:hover{color:#A66E08}

/* --- Boutons --- */
.cta-gold{background:#EEA320;color:#161D40;font-weight:600;border-radius:2px;transition:background .15s}
.cta-gold:hover{background:#D89112;color:#161D40}
.cta-gold-bright{background:#EEA320;color:#161D40;font-weight:600;border-radius:2px;transition:background .15s}
.cta-gold-bright:hover{background:#F6C155;color:#161D40}
.btn-outline{border:1px solid #B9BDCB;color:#212A57;font-weight:600;border-radius:2px;transition:border-color .15s,color .15s}
.btn-outline:hover{border-color:#212A57;color:#161D40}
.btn-outline-dark{border:1px solid rgba(255,255,255,0.3);color:#FFFFFF;font-weight:600;border-radius:2px;transition:border-color .15s,color .15s}
.btn-outline-dark:hover{border-color:#EEA320;color:#EEA320}

/* --- Cartes / lignes cliquables --- */
.exp-row{color:#FFFFFF;transition:background .15s}
.exp-row:hover{background:rgba(255,255,255,0.03)}
.res-card{border:1px solid #E7E5DD;transition:border-color .15s,box-shadow .15s}
.res-card:hover{border-color:#C9CBD8;box-shadow:0 10px 28px rgba(22,29,64,0.07)}
.res-row{display:grid;grid-template-columns:210px 1fr 104px;gap:40px;align-items:start;border-bottom:1px solid #E7E5DD;padding:28px 4px;color:#454A61}
.res-cat{font-size:10.5px;font-weight:600;letter-spacing:0.13em;color:#A66E08;padding-top:5px;line-height:1.5}
.res-title{font-family:'Spectral',serif;font-weight:500;font-size:20px;line-height:1.35;color:#161D40;transition:color .15s}

/* Intitulé dépliable : le détail est dans le HTML, replié par défaut. */
.res-toggle{display:flex;width:100%;gap:20px;justify-content:space-between;align-items:flex-start;background:none;border:none;padding:0;margin:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.res-plus{font-family:'Archivo',sans-serif;font-size:18px;line-height:1;color:#A66E08;flex:none;margin-top:4px;transition:color .15s}
/* Survol réservé aux appareils pointeurs : sur tactile, l'état resterait collé après l'appui. */
@media (hover:hover){
  .res-toggle:hover .res-title,.res-toggle:hover .res-plus{color:#A66E08}
}
.res-details{padding-top:15px;max-width:660px}
.res-details ul{margin:0;padding:0 0 0 16px;list-style:none}
.res-details li{position:relative;font-size:13.5px;line-height:1.75;color:#454A61}
.res-details li::before{content:"";position:absolute;left:-16px;top:11px;width:5px;height:5px;background:#D9D6CA}
.res-note{margin-top:15px;border-left:2px solid #EEA320;background:#F8F7F3;padding:13px 17px;font-size:13px;line-height:1.65;color:#454A61}

/* Vignette des ressources vidéo : le logo ASI cadré en 16/9, avec pastille de lecture. */
.res-thumb{position:relative;width:96px;height:54px;border:1px solid #E7E5DD;background:#FFFFFF;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:border-color .15s,box-shadow .15s}
/* La vignette est la miniature YouTube (320x180) : elle remplit la tuile 16/9. */
.res-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.res-thumb-play{position:absolute;right:4px;bottom:4px;width:19px;height:19px;border-radius:50%;background:#EEA320;box-shadow:0 0 0 2px #FFFFFF;display:flex;align-items:center;justify-content:center;transition:background .15s}
a.res-thumb:hover{border-color:#C9CBD8;box-shadow:0 6px 16px rgba(22,29,64,0.10)}
a.res-thumb:hover .res-thumb-play{background:#D89112}
.res-chip{font-family:'Archivo',sans-serif;font-size:12.5px;font-weight:600;cursor:pointer;border-radius:2px;padding:8px 14px;border:1px solid #E3E1D9;background:#FFFFFF;color:#454A61;transition:border-color .15s,color .15s}
.res-chip:hover{border-color:#B9BDCB;color:#161D40}
.res-chip-on{border-color:#212A57;background:#212A57;color:#FFFFFF}
.res-chip-on:hover{color:#FFFFFF}

/* --- Champs de formulaire --- */
.field{border:1px solid #D8D5CC;border-radius:2px;padding:12px 14px;font-size:14px;color:#161D40;outline:none;background:#FFFFFF;transition:border-color .15s}
.field:focus{border-color:#212A57}

/* --- Pied de page --- */
.foot-a{transition:color .15s}
.foot-a:hover{color:#EEA320}
.foot-btn{display:inline-block;border:1px solid rgba(255,255,255,0.25);color:#FFFFFF;font-weight:600;font-size:12.5px;padding:11px 18px;border-radius:2px;transition:border-color .15s,color .15s}
.foot-btn:hover{border-color:#EEA320;color:#EEA320}

/* ============================================================
   RESPONSIVE — adaptation tablette / mobile
   Le design source est strictement desktop (min-width:1280px).
   Cette couche neutralise la largeur forcée puis reflue le contenu
   en une seule colonne sous 860px. Les styles inline des pages sont
   surchargés par sélecteurs d'attribut + !important (aucune page
   n'est réécrite ; seul le header ajoute un menu « burger »).
   ============================================================ */

/* Le bouton burger n'existe qu'en mobile */
.hdr-burger{display:none}

/* Champ « niveau d'urgence » : radios sur desktop, liste sur mobile */
.urgence-select{display:none}

/* Garde anti-débordement horizontal en dessous du seuil desktop */
@media (max-width:1280px){
  html,body{overflow-x:hidden}
}

/* ---- Tablette : on desserre surtout les marges latérales ---- */
@media (max-width:1180px){
  [style*="min-width:1280px"]{min-width:0 !important}
  [style*="max-width:1240px"]{padding-left:32px !important;padding-right:32px !important}
}

/* ---- Mobile / téléphone : mise en page en une colonne ---- */
@media (max-width:860px){
  /* Neutralise les largeurs forcées de 1280px (page, header, footer) */
  [style*="min-width:1280px"]{min-width:0 !important;white-space:normal !important}

  /* Conteneurs principaux : marges latérales compactes */
  [style*="max-width:1240px"]{padding-left:20px !important;padding-right:20px !important}

  /* Toutes les grilles passent en une seule colonne */
  [style*="grid-template-columns"]{grid-template-columns:1fr !important;column-gap:0 !important;gap:24px !important}

  /* Rangées « titre à gauche / action à droite » : on empile */
  section [style*="justify-content:space-between"],
  footer [style*="justify-content:space-between"]{
    flex-direction:column !important;align-items:flex-start !important;gap:20px !important
  }

  /* Les autres rangées flex peuvent revenir à la ligne */
  section [style*="display:flex"]{flex-wrap:wrap}

  /* Images de contenu fluides + cadres photo qui rétrécissent */
  section img{max-width:100% !important;height:auto !important}
  [style*="background:#E9E7DF"]{width:100% !important;max-width:460px !important;height:auto !important}

  /* Autorise les enfants de grilles/flex à rétrécir sous leur contenu :
     sans ça, min-width:auto (défaut) fait déborder p.ex. le formulaire
     de contact sous ~360px de large. */
  section [style*="display:grid"] > *,
  section [style*="display:flex"] > *{min-width:0}

  /* Champs de formulaire toujours contenus dans leur colonne */
  input:not([type="radio"]):not([type="checkbox"]),select,textarea,.field{
    width:100%;max-width:100% !important
  }
  /* Formulaire de contact : padding intérieur réduit sur petit écran */
  #contact-form{padding-left:22px !important;padding-right:22px !important}

  /* « Niveau d'urgence » : on remplace les radios par une liste déroulante */
  .urgence-radios{display:none !important}
  .urgence-select{display:block !important}

  /* On clampe les très grands espacements hérités du desktop */
  [style*="gap:80px"],[style*="gap:84px"]{gap:32px !important}
  [style*="gap:60px"],[style*="gap:48px"]{gap:26px !important}

  /* Échelle typographique des grands titres */
  [style*="font-size:56px"]{font-size:32px !important;line-height:1.12 !important}
  [style*="font-size:46px"]{font-size:30px !important;line-height:1.14 !important}
  [style*="font-size:40px"]{font-size:27px !important;line-height:1.18 !important}
  [style*="font-size:38px"]{font-size:26px !important;line-height:1.2 !important}
  [style*="font-size:30px"]{font-size:23px !important}

  /* ---- Ressources : une ressource par bloc, vignette à gauche ----
     La grille de `.res-row` vient d'une classe, elle échappe donc à la règle
     générique ci-dessus qui ne vise que les grilles déclarées en attribut style. */
  .res-row{
    grid-template-columns:auto 1fr !important;
    grid-template-areas:"cat cat" "thumb text" !important;
    gap:0 14px !important;
    padding:20px 2px !important
  }
  /* Ligne sans vidéo : pas de colonne vignette. */
  .res-row:not(.res-row-video){grid-template-columns:1fr !important;grid-template-areas:"cat" "text" !important}
  .res-cat{grid-area:cat;margin-bottom:12px;padding-top:0 !important}
  .res-main{grid-area:text}
  .res-title{font-size:16.5px !important;line-height:1.45 !important}
  .res-row > :nth-child(3){grid-area:thumb}
  /* Rubrique répétée ou colonne vignette inutile : on les retire du flux. */
  .res-cat:empty,
  .res-row > :nth-child(3):empty{display:none}
  .res-details li{font-size:13px !important}
  .res-thumb{width:80px;height:45px}
  .res-thumb-play{width:16px;height:16px;right:3px;bottom:3px}

  /* Filtres : une seule bande que l'on fait glisser du doigt. */
  #res-filter{
    width:100%;flex-wrap:nowrap !important;
    overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:2px
  }
  #res-filter::-webkit-scrollbar{display:none}
  #res-filter .res-chip{flex:none;white-space:nowrap}

  /* ---- En-tête mobile : barre compacte + menu déroulant ---- */
  .hdr-top{padding-left:20px !important;padding-right:20px !important;gap:10px !important;flex-wrap:wrap;font-size:10.5px !important}
  .hdr-top-hide{display:none !important}
  .hdr-main{padding-left:20px !important;padding-right:20px !important;height:64px !important}
  /* Bloc de marque : le wrapper repasse en white-space:normal sur mobile, ce qui
     coupait « ASI CONSULTING » en deux lignes sous une barre haute de 64 px.
     On le maintient sur une ligne et on réduit l'échelle en conséquence. */
  .hdr-brand{gap:11px !important;min-width:0;white-space:nowrap !important}
  .hdr-brand img{height:34px !important}
  .hdr-brand > span{padding-left:11px !important;gap:2px !important}
  .hdr-brand [style*="font-size:20px"]{font-size:15px !important}
  .hdr-brand [style*="font-size:11px"]{font-size:8.5px !important;letter-spacing:0.11em !important}
  .hdr-burger{display:flex !important;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #E7E5DD;border-radius:3px;background:#FFFFFF;cursor:pointer;flex:none;padding:0}
  .hdr-nav{
    position:absolute;top:100%;left:0;right:0;
    background:#FFFFFF;border-bottom:1px solid #E7E5DD;
    flex-direction:column !important;align-items:stretch !important;
    gap:0 !important;padding:4px 20px 18px !important;
    display:none !important;z-index:60;
    box-shadow:0 16px 26px rgba(22,29,64,0.10)
  }
  .hdr-nav.is-open{display:flex !important}
  .hdr-nav .nav-a{padding:15px 2px !important;border-top:0 !important;border-bottom:1px solid #F0EEE8 !important;width:100%}
  .hdr-nav .nav-a.is-active{color:#161D40 !important;border-bottom:1px solid #EEA320 !important}
  .hdr-nav .nav-cta{margin:16px 0 0 !important;text-align:center;padding:15px !important;font-size:14px !important}
}