/* ============================================================
   ACE – Responsive core (sans modifier le HTML existant)
   - Typo & espacements fluides (clamp)
   - Conteneurs & sections
   - Cartes & boutons alignés (CTA alignés en bas)
   - Médias responsives (img/iframe)
   - Utilitaires simples (hide-*)
   ------------------------------------------------------------
   NOTE : placé APRÈS site.min.css et ace-header.css
   ============================================================ */

/* ============ Design tokens (typo/espaces fluides) ============ */
:root{
  /* tailles de police fluides */
  --step--1: clamp(12px, 0.9vw, 14px);
  --step-0:  clamp(14px, 1.2vw, 16px);
  --step-1:  clamp(18px, 2vw, 22px);
  --step-2:  clamp(24px, 3vw, 32px);
  --step-3:  clamp(28px, 4vw, 40px);

  /* espacements */
  --space-1: clamp(8px, 1.2vw, 12px);
  --space-2: clamp(14px, 1.6vw, 18px);
  --space-3: clamp(16px, 2.2vw, 24px);
  --radius-card: 14px;
  --shadow-card: 0 8px 24px rgba(0,0,0,.08);
}

/* ============ Base typo (n’altère pas ta police) ============ */
body{ font-size: var(--step-0); line-height: 1.55; }
h1{ font-size: var(--step-3); line-height: 1.12; margin: 0 0 var(--space-2); }
h2{ font-size: var(--step-2); line-height: 1.18; margin: 0 0 var(--space-2); }
h3{ font-size: var(--step-1); line-height: 1.22; margin: 0 0 var(--space-1); }
.lead{ font-size: var(--step-1); line-height: 1.45; }

/* ============ Conteneur & sections ============ */
.container{
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width:1440px){ .container{ max-width: 1280px; } }
@media (min-width:1920px){ .container{ max-width: 1400px; } }

.section{ padding: var(--space-3) 0; }
.hero   { padding: calc(var(--space-3) + 6px) 0 var(--space-3); }

/* ============ Cartes & grilles existantes ============ */
/* On N’IMPOSE PAS le nombre de colonnes (tu as parfois du inline style).
   On améliore juste l’esthétique et l’alignement interne. */
.card{
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-2);
  background: #fff;
  display: flex;              /* <-- pour pousser les CTA en bas */
  flex-direction: column;
  min-height: 100%;
}
.card .actions{
  margin-top: auto;           /* <-- CTA alignés en bas de chaque carte */
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Quand un groupe utilise .cols, on harmonise l’écart. */
.cols{ gap: 16px; }

/* ============ Boutons (compatibles avec les tiens) ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px; border-radius: 10px; text-decoration:none;
  border: 1px solid transparent; cursor:pointer; line-height:1; font-weight:600;
}
.btn.primary{ background:#0d6efd; color:#fff; }
.btn.alt{ background:#f2f4f7; color:#111; }
.btn:focus{ outline:2px solid #0d6efd; outline-offset:2px; }

/* ============ Médias responsives ============ */
img, svg, canvas, video{ max-width:100%; height:auto; }
iframe{ max-width:100%; border:0; }

/* Cartes ou boîtes avec image/iframe plein bloc */
.responsive-embed{ position:relative; width:100%; overflow:hidden; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.responsive-embed > iframe,
.responsive-embed > video{ position:absolute; inset:0; width:100%; height:100%; }

/* Pour Google Maps en bloc : largeur 100% */
#map-box{ width: 100%; }

/* ============ Formulaire (touches légères, sans casser ton style) ============ */
.field{ margin-bottom: 14px; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea{
  width:100%;
  box-sizing:border-box;
}
.actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ============ Utilitaires ============ */
.hide-mobile{ display:none !important; }
@media (min-width:768px){ .hide-mobile{ display:initial !important; } }
@media (max-width:767px){ .hide-desktop{ display:none !important; } }

/* ============ Accessibilité & confort ============ */
a:focus-visible, button:focus-visible{
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

/* ============ Alignement menu desktop (sécurité au cas où) ============ */
/* Si pour une raison externe le nav retombe à la ligne, on le reforce. */
@media (min-width:1200px){
  .ace-topbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; }
  #ace-nav{ margin-left:auto !important; }
  #ace-nav .ace-nav-list{ display:flex !important; flex-wrap:nowrap !important; justify-content:flex-end !important; gap:16px; }
}

/* ============ Densification mobile (meilleure lisibilité) ============ */
@media (max-width:767px){
  .hero .lead{ margin-top: 6px; }
  .card{ padding: 14px; }
}
/* ============================================================
   PATCH Z FLIP / PETITS ÉCRANS ÉTROITS
   - Force les grilles en 1 colonne si la largeur est < 820px
   - Resserre la typo/marges des gros titres
   - Empêche tout débordement de mots/URLs
   - Rend le tiroir mobile “plein écran” vraiment plein écran
   ============================================================ */

/* 1) Grilles : 1 colonne en petit écran, même si un style inline force 2–3 */
@media (max-width: 820px){
  .section .cols{
    grid-template-columns: 1fr !important; /* override le repeat(2/3, ...) inline */
  }
  /* par sécurité, si une colonne fixe a été posée ailleurs */
  [style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
  }
}

/* 2) Titres/marges plus compacts sur écrans très étroits et très hauts (Z Flip, etc.) */
@media (max-width: 420px) and (min-height: 740px){
  h1{ font-size: clamp(22px, 6vw, 28px); line-height: 1.15; margin-bottom: 10px; text-wrap: balance; }
  h2{ font-size: clamp(18px, 4.8vw, 24px); line-height: 1.18; margin-bottom: 10px; text-wrap: balance; }
  .lead{ font-size: clamp(15px, 3.8vw, 18px); line-height: 1.45; }
  .section{ padding-top: 16px; padding-bottom: 16px; }
  .container{ padding-left: 14px; padding-right: 14px; }
}

/* 3) Empêcher les débordements de texte (URLs, longs mots techniques) */
*,
*::before,
*::after{
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
p, li, a, h1, h2, h3{ hyphens: auto; }

/* 4) Boutons & actions : toujours sur plusieurs lignes si besoin */
.actions{ flex-wrap: wrap; }

/* 5) Tiroir mobile : plein écran “réel” si le navigateur supporte les unités dynamiques */
@media (max-width: 820px){
  #ace-nav{ min-height: 100vh; } /* fallback */
  @supports (height: 100svh){
    #ace-nav{ min-height: 100svh; }      /* vrai plein écran (barre d’adresse dynamique) */
    #ace-nav-overlay{ height: 100svh; }
  }
}

/* 6) Cartes : harmoniser la largeur interne sur petit écran (évite les “sauts”) */
@media (max-width: 420px){
  .card{ padding: 12px; border-radius: 12px; }
  .card .actions{ gap: 8px; }
}

/* 7) Légère densification des listes pour Z Flip */
@media (max-width: 420px){
  .card ul{ margin: 6px 0 0 0; }
  .card li{ margin: 6px 0; }
}