/* ========== Layout Patch – Ana Lorena (cartes responsives + 2 tons) ========== */
/* Ce patch écrase les anciens styles flex et impose une grille responsive
   uniforme, sans toucher au reste de la charte. À placer APRÈS les CSS existants. */

/* ----- Variables douces (fallback si non définies) ----- */
:root{
  --bg: #121212;
  --text: #CBE72F;
  --muted: #cfcfcf;
  --border: #2a2a2a;
  --toneA: #171717;     /* carte ton A (foncé) */
  --toneB: #0f0f0f;     /* carte ton B (très foncé) */
  --accent: #ff5722;
}

/* ----- Grille de cartes : prends la main sur l'ancien flex ----- */
.cards.grid-cards{
  display: grid !important;                    /* écrase l'ancien display:flex */
  grid-auto-flow: row dense;
  /* 3 colonnes desktop – cols fluides avec largeur mini pour éviter les colonnes trop étroites */
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 1rem;
}

/* Tablette : 2 colonnes */
@media (max-width: 1200px){
  .cards.grid-cards{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}

/* Mobile : 1 colonne */
@media (max-width: 760px){
  .cards.grid-cards{ grid-template-columns: 1fr; }
}

/* Neutralise les largeurs héritées de l'ancien layout flex */
.cards.grid-cards > .card{
  width: auto !important;
  max-width: none !important;
  min-width: 0;                 /* évite l'élargissement inattendu en grid */
  flex: none !important;        /* au cas où un flex:… traîne */
  display: block;               /* sécurité */
}

/* ----- Style générique cartes ----- */
.cards .card{
  background: var(--toneA);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 6px 22px rgba(0,0,0,.12);
}

/* Deux tons réutilisables pour alterner visuellement */
.card--tone-a{ background: var(--toneA); }
.card--tone-b{ background: var(--toneB); }

/* Lisibilité typographique */
.card, .card *{
  word-break: normal;            /* pas de break-all */
  overflow-wrap: break-word;     /* coupe proprement si nécessaire */
  hyphens: auto;
}
.card h1, .card h2, .card h3{ margin-top: .25rem; line-height: 1.25; }
.card p{ margin: .5rem 0; }

/* Images et iframes responsives dans les cartes */
.card img, .card iframe{
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

/* Bouton d'action (CTA) – cohérence globale */
.btn.btn--primary{
  background-color: var(--accent);
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: .75rem 1.25rem;
  display: inline-block;
}
.btn.btn--primary:hover,
.btn.btn--primary:focus{ background-color: #e64a19; }

/* ----- Nav : autoriser le retour à la ligne si manque d'espace ----- */
.nav{
  flex-wrap: wrap;
  gap: .35rem;
}

/* ----- Grilles utilitaires (formulaires, etc.) ----- */
.form-row     { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-row-3   { display:grid; grid-template-columns: 2fr 1fr 2fr; gap: 1rem; }
.col-span-2   { grid-column: 1 / -1; }

@media (max-width: 760px){
  .form-row   { grid-template-columns: 1fr; }
  .form-row-3 { grid-template-columns: 1fr; }
}

/* ----- Galerie simple dans une carte ----- */
.gallery-grid{ display:grid; grid-template-columns: 1fr; gap: 1rem; }

/* ----- Petites corrections d'espacement entre sections dans une même carte ----- */
.section + .section{ margin-top: 1rem; }

/* ----- Accessibilité visuelle (texte secondaire) ----- */
.brand .subtitle{ color: var(--muted); }
/* CSS Document */