/* ============================================================================
   AM — Page « Espace régie »  ·  am-espace-regie.css  (DELTA)
   Chargée APRÈS am-presentation.css (bloc partagé du design system A&M).
   Ne contient QUE ce qui manque au bloc partagé : recalage hero MASTER-conforme,
   intro .split--intro 5/7 (étalon /modeles-remplacement/), grille .why de cartes,
   FAQ pleine largeur. Rien d'inventé : chaque règle est reprise d'am-mode-emploi
   ou d'am-plaque, seul le scope change (.am-regie) -> zéro fuite.
   Tokens (--ink, --surface-alt, --hairline, --muted, --faint, --wide-max,
   --gutter, --radius) hérités de .am-pres (même élément). 100 % réversible.
   ============================================================================ */

/* ===================== HERO (overrides scopés par media) =====================
   DESKTOP (>=900px) : recaler le contenu sur le conteneur 1320 (x=53, comme l'étalon
   /modeles-remplacement/, et NON centré à 1180 comme le défaut am-hero2). H1 54px/1.04
   (le thème force h1 en clamp !important -> on reprend l'ascendant). Boutons de MÊME
   largeur (étalon = 292px).
   -> TOUT enfermé en >=900px pour NE PAS toucher le hero MOBILE : non scopées, ces
      règles cassent le gutter et le placement des boutons sur téléphone (piège §11). */
@media(min-width:900px){
  .am-regie .mhero__row{width:auto;max-width:var(--wide-max);padding-left:var(--gutter);padding-right:var(--gutter)}
  #main-content .am-regie .mh-title{font-size:54px!important;line-height:1.04!important}
  .am-regie .mhero__col{max-width:760px}
  .am-regie .mh-btns .hbtn{min-width:292px;justify-content:center}
}
/* MOBILE (<900px) : le hero se comporte comme celui de la HOME (gutter 44px, H1 30px,
   boutons pleine largeur = défaut .hbtn, aucun override). */
@media(max-width:899px){
  .am-regie .mhero__row{width:auto;max-width:none;padding-left:44px;padding-right:44px}
  #main-content .am-regie .mh-title{font-size:30px!important}
}
/* Évite le mot orphelin en fin de titre (MASTER §10.8). */
.am-regie .mh-title{text-wrap:balance}

/* ---------- INTRO : 2 colonnes pleine largeur 5/7 (étalon /modeles-remplacement/) ----------
   C'est LE motif qui remplit le 1320 : gauche = eyebrow + titre, droite = corps.
   Sans lui, le texte se cramponne à gauche et laisse une demi-page vide (MASTER §10.1). */
.am-regie .split--intro{grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:32px clamp(40px,5.5vw,64px);align-items:start}
.am-regie .split--intro .split__head h2.c-h2{margin-bottom:0}
.am-regie .split--intro .split__body{max-width:72ch}
.am-regie .split--intro .split__body p:first-child{margin-top:0}

/* ---------- GRILLE DE CARTES (reprise du composant .why d'am-plaque) ---------- */
.am-regie .why{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.am-regie .why__it{border:1px solid var(--hairline);border-radius:14px;padding:26px 26px 28px;background:#fff}
.am-regie .why__it h3{font-size:18px;font-weight:600;margin:0 0 6px;color:var(--ink)}
.am-regie .why__it p{font-size:15px;color:var(--muted);margin:0;line-height:1.6}

/* ---------- FAQ : le texte occupe TOUTE la largeur du bloc (MASTER §10.9) ---------- */
.am-regie .faq .a{max-width:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:860px){
  .am-regie .split--intro{grid-template-columns:1fr;gap:24px}
  .am-regie .why{grid-template-columns:1fr}
}
@media(max-width:720px){
  .am-regie .why{margin-top:36px}
}