/* === Ana Lorena — thème responsive === */
:root{
  --bg:#121212; --text:#CBE72F; --muted:#9CA3AF;
  --border:#2a2a2a; --card:#1b1b1b; --accent:#CBE72F;
}

* { box-sizing:border-box }
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
.container{max-width:1100px;margin:0 auto;padding:0 1rem}

/* ===== Header / Hero ===== */
.grid-hero{display:grid;grid-template-columns:minmax(220px,380px) 1fr;align-items:center;gap:1rem}
@media (max-width:760px){
  .grid-hero{grid-template-columns:1fr;text-align:center;justify-items:center}
}

.brand-logo img.logo-img{
  display:block;
  width:clamp(260px,42vw,640px); /* logo plus grand mais contenu */
  height:auto;
  margin:0 auto;
}

.brand{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.brand .subtitle{opacity:.9}
@media (max-width:760px){
  .brand{align-items:center}
}

/* ===== CTA ===== */
.cta-bar{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-start}
@media (max-width:760px){ .cta-bar{justify-content:center} }
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem .95rem;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text);font-weight:700;text-decoration:none}
.btn svg{width:18px;height:18px}
.btn--primary {
  background-color: #ff5722; /* corail/orange */
  color: #fff;
  font-weight: 600;
  padding: .75rem 1.5rem;
  border-radius: 8px;
  text-align: center;
  display: inline-block;
}
.btn--primary:hover {
  background-color: #e64a19;
}

/* ===== Nav ===== */
.nav{display:flex;flex-wrap:wrap;gap:.5rem;padding:.8rem 0;justify-content:flex-start}
.nav a{padding:.5rem .85rem;border:1px solid var(--border);border-radius:999px;color:var(--text);text-decoration:none;background:transparent}
.nav a[aria-current="page"], .nav a:hover{border-color:var(--accent);background:#0d0d0d}

/* ===== Card / Content ===== */
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem;margin-bottom:1rem}
.card h2{margin:0 0 .5rem}
.lead{font-size:1.05rem}

/* ===== Hours ===== */
.hours ul{list-style:none;margin:.5rem 0;padding:0}
.hours li{border-bottom:1px dashed var(--border);padding:.35rem 0}

/* ===== Social ===== */
.social{display:flex;flex-wrap:wrap;gap:.6rem .7rem;justify-content:center}
.social a{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .8rem;border:1px solid var(--border);border-radius:999px;text-decoration:none;color:var(--text);background:transparent;font-weight:600;font-size:clamp(.9rem,1.2vw,1rem)}
.social svg{width:clamp(18px,1.8vw,22px);height:clamp(18px,1.8vw,22px);flex-shrink:0}
@media (min-width:960px){.social{justify-content:flex-start}}
/* Masquer WhatsApp s'il réapparaît */
.social a[aria-label*="WhatsApp"], .social a[href*="wa.me"]{display:none !important}

/* ===== Sections / Galerie ===== */
.sections{display:grid;gap:1rem}
.sections-2{grid-template-columns:1fr 1fr}
@media (max-width:980px){ .sections-2{grid-template-columns:1fr} }

.gallery-img{
  display:block;
  width:100%;
  max-width:800px;   /* image moins envahissante */
  height:auto;
  border-radius:8px;
  margin:0 auto;
}

/* ===== Footer ===== */
footer{border-top:1px solid var(--border);color:var(--muted);padding:1.2rem 0;margin-top:1rem;font-size:.9rem;text-align:center}
/* --- Fix bandeau + logo --- */
.grid-hero{
  display:grid;
  grid-template-columns:minmax(220px,360px) 1fr;
  align-items:center;
  gap:1rem;
}
.brand h1{
  font-size:clamp(1.8rem,3.6vw,3rem);
  line-height:1.15;
  margin:0 0 .35rem;
}
.brand p{margin:.2rem 0 .6rem}

.brand{display:flex;flex-direction:column;align-items:flex-start}
@media (max-width:760px){
  .grid-hero{grid-template-columns:1fr;justify-items:center;text-align:center}
  .brand{align-items:center}
}

/* Logo : taille lisible mais contenue */
.logo-img{
  display:block;
  width:100%;
  max-width:420px;  /* augmente si tu veux 480/520 */
  height:auto;
  margin:0 auto;
}

/* Galerie : évite la sensation "trop grand" */
.gallery-img{
  display:block;
  width:100%;
  max-width:720px;
  height:auto;
  border-radius:8px;
  margin:0 auto;
}

/* Navigation : wrap propre à gauche */
.nav{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-start}
/* --- HEADER : alignement à gauche sur desktop --- */
.grid-hero {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  align-items: center;
  gap: 1.5rem;
}
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* toujours aligné gauche */
  gap: .4rem;
  text-align: left;
}
.brand h1 {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem); /* un peu moins énorme */
  line-height: 1.2;
  margin: 0 0 .5rem;
}
.brand p {
  font-size: 1.15rem;  /* sous-titre lisible */
  margin: 0 0 .6rem;
}

/* --- MOBILE : centrage seulement en petit écran --- */
@media (max-width: 720px) {
  .grid-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .brand {
    align-items: center;
  }
}

/* --- TEXTE DESCRIPTIF (section lead) --- */
.lead {
  font-size: 1.25rem;       /* plus grand */
  line-height: 1.65;        /* plus confortable */
  color: #f5f5f5;           /* contraste clair */
}
/* === Cartes : grille unifiée (mobile 1, laptop 2) === */
.cards {
  display: grid;
  gap: 1rem;
}
.cards-2 {
  grid-template-columns: 1fr;             /* mobile : 1 carte */
}
@media (min-width: 980px) {
  .cards-2 { grid-template-columns: 1fr 1fr; }  /* laptop : 2 cartes */
}

/* Harmonisation visuelle des cartes */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
}

/* Titres de carte */
.card h2 {
  margin: 0 0 .6rem;
  font-size: clamp(1.15rem, 1.2vw, 1.35rem);
  line-height: 1.25;
}

/* Texte d'accroche + lisible */
.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.28rem);
  line-height: 1.65;
  color: #f5f5f5;
  margin: 0;
}

/* Galerie contenue dans sa carte */
.gallery-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 720px;
  border-radius: 8px;
  margin: 0 auto;
}

/* Social : joli dans une carte, responsive */
.social {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .7rem;
  justify-content: center;
}
@media (min-width: 960px){ .social { justify-content: flex-start; } }
.social a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  color: var(--text);
  background: transparent;
  font-weight: 600;
  font-size: clamp(.92rem, 1.1vw, 1rem);
}

/* Nettoyage des puces parasites éventuelles */
.nav, .nav * { list-style: none; }
.nav a::marker { content: ""; }

/* Header : alignements confirmés */
.brand { align-items: flex-start; text-align: left; }
@media (max-width: 760px){
  .brand { align-items: center; text-align: center; }
}
/* === Header en cartes (mobile 1, laptop 2) === */
.header-cards {
  margin-top: .75rem;
}
.cards { display: grid; gap: 1rem; }
.cards-2 { grid-template-columns: 1fr; }
@media (min-width: 980px){
  .cards-2 { grid-template-columns: 1fr 1fr; }
}

/* Cartes header – un peu plus d'air */
.card--hero {
  padding: 1.25rem;
}

/* Carte Titre/texte – aligné à gauche sur desktop, centré sur mobile */
.card--brand .brand{
  display:flex; flex-direction:column; gap:.5rem;
  align-items:flex-start; text-align:left;
}
@media (max-width:760px){
  .card--brand .brand{ align-items:center; text-align:center; }
}

/* Titre + sous-titre lisibles */
.card--brand h1{
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.2;
  margin: 0 0 .4rem;
}
.card--brand .subtitle{
  font-size: 1.15rem;
  opacity: .95;
}

/* Logo dans sa carte */
.brand-logo .logo-img{
  display:block;
  width:100%;
  height:auto;
  max-width: 520px;   /* ajuste si tu veux */
  margin: 0 auto;
}

/* CTA inchangé mais bien placé */
.cta-bar{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:flex-start; }
@media (max-width:760px){ .cta-bar{ justify-content:center; } }

/* Le menu reste hors des cartes, aligné à gauche */
.nav{ display:flex; flex-wrap:wrap; gap:.5rem; padding:.8rem 0; justify-content:flex-start; }
/* === Différenciation cartes du header === */
.card--hero {
  background: #181818; /* un peu plus clair que le fond global */
  border: 1px solid #2a2a2a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

/* Option : pour vraiment les démarquer, on peut ajouter un léger arrondi + marge */
.header-cards .card--hero {
  border-radius: 14px;
  padding: 1.4rem;
}

/* === Icônes sociales officielles === */
.social a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: clamp(.92rem,1.1vw,1rem);
  background: #181818;
  transition: background .2s, color .2s, border-color .2s;
}
.social a:hover {
  background: var(--accent);
  color: #0f0f10;
  border-color: var(--accent);
}
.social svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Carte claire (lisibilité renforcée sur fond sombre) */
.card--light{
  background:#f6f7f9;        /* clair */
  color:#0f172a;             /* texte foncé */
  border:1px solid #e5e7eb;
  border-radius:16px;
}
.card--light h2,
.card--light h3{ color:#0f172a; }
.card--light ul{ margin:0; padding-left:1.25rem; }
.card--light li{ margin:.35rem 0; }
.card--light small{ color:#334155; }