/* ============================================================
   DeuxElles — palette issue du logo
   Desktop d'abord (>= 1024px). La version mobile viendra plus
   tard et ne devra JAMAIS rogner les images (pas de crop).
   ============================================================ */
:root {
  --creme: #FDF6EE;          /* fond exact du logo */
  --creme-fonce: #F3E9DC;
  --encre: #2C2A28;
  --encre-douce: #5F5B55;
  --turquoise: #1FA8A8;      /* univers musique */
  --turquoise-fonce: #0E6868;
  --turquoise-pale: #DDF2F1;
  --violet: #7A2E9E;         /* univers peinture */
  --violet-fonce: #4A1C61;
  --violet-pale: #F0E4F7;
  --orange: #F08A2E;         /* accents : liens, dates, actif */
  --orange-fonce: #A85510;
  --font-titres: "Baloo 2", "Trebuchet MS", sans-serif;
  --font-texte: "Nunito Sans", "Segoe UI", sans-serif;
  --largeur: 1080px;
}

* { box-sizing: border-box; }
html { background: var(--creme); }
body {
  margin: 0;
  font-family: var(--font-texte);
  font-size: 17px;
  line-height: 1.7;
  color: var(--encre);
  min-width: 1024px; /* desktop d'abord — retiré lors du passage responsive */
}

/* ---------- En-tête (logo 48px systématique) ---------- */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 14px 24px;
  border-bottom: 1px solid var(--creme-fonce);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-logo { width: 48px; height: 48px; display: block; }
.brand-name { font-family: var(--font-titres); font-size: 28px; font-weight: 600; letter-spacing: .3px; }
.brand-name .deux  { color: var(--violet); }
.brand-name .elles { color: var(--turquoise); }
.site-nav { display: flex; gap: 26px; }
.site-nav a {
  font-size: 15px; font-weight: 600; text-decoration: none;
  color: var(--encre-douce); padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--encre); }
.site-nav a.active { color: var(--orange-fonce); border-bottom-color: var(--orange); }

/* ---------- Structure ---------- */
.site-main { max-width: var(--largeur); margin: 0 auto; padding: 32px 24px 56px; }
.site-footer {
  max-width: var(--largeur); margin: 0 auto; padding: 18px 24px 32px;
  border-top: 1px solid var(--creme-fonce);
  display: flex; justify-content: space-between;
  font-size: 14px; color: var(--encre-douce);
}
.site-footer a { color: var(--encre-douce); }

h1, h2, h3 { font-family: var(--font-titres); font-weight: 600; line-height: 1.2; color: var(--encre); }
h1 { font-size: 40px; margin: 0 0 16px; }
h2 { font-size: 26px; margin: 40px 0 12px; }
a { color: var(--orange-fonce); }

/* Les images de contenu ne sont JAMAIS rognées */
.site-main img { max-width: 100%; height: auto; display: block; }

/* ---------- Accueil ---------- */
.hero { display: flex; gap: 44px; align-items: center; margin: 24px 0 48px; }
.hero-texte { flex: 1.1; }
.hero-texte h1 { font-size: 46px; }
.hero-visuel { flex: 1; }
.hero-visuel img { border-radius: 12px; }
.bouton {
  display: inline-block; background: var(--orange); color: #fff;
  font-family: var(--font-titres); font-size: 17px; text-decoration: none;
  padding: 10px 26px; border-radius: 999px; margin-top: 8px;
}
.bouton:hover { background: var(--orange-fonce); }

.univers { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 0 0 48px; }
.carte-univers { border-radius: 12px; padding: 24px 26px; text-decoration: none; display: block; }
.carte-univers h2 { margin: 6px 0 6px; }
.carte-univers p { margin: 0; font-size: 15px; }
.carte-univers.musique  { background: var(--turquoise-pale); }
.carte-univers.musique h2, .carte-univers.musique p { color: var(--turquoise-fonce); }
.carte-univers.peinture { background: var(--violet-pale); }
.carte-univers.peinture h2, .carte-univers.peinture p { color: var(--violet-fonce); }

.cartes-actus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.carte-actu {
  background: #fff; border: 1px solid var(--creme-fonce); border-radius: 12px;
  overflow: hidden; text-decoration: none; color: inherit;
}
.carte-actu .vignette { background: var(--creme-fonce); }
.carte-actu .vignette img { width: 100%; }
.carte-actu .corps { padding: 14px 16px 16px; }
.carte-actu .titre { font-family: var(--font-titres); font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.carte-actu .meta { font-size: 13px; color: var(--encre-douce); margin: 0; }

/* ---------- Étiquettes d'univers / tags ---------- */
.etiquette {
  display: inline-block; font-size: 13px; font-weight: 600;
  padding: 2px 12px; border-radius: 999px; text-decoration: none;
}
.etiquette.musique  { background: var(--turquoise-pale); color: var(--turquoise-fonce); }
.etiquette.peinture { background: var(--violet-pale); color: var(--violet-fonce); }
.etiquette.autre    { background: var(--creme-fonce); color: var(--encre-douce); }

/* ---------- Article de blog (gabarit unique) ---------- */
.bandeau { margin: -32px -24px 28px; }
.bandeau img { width: 100%; border-radius: 0 0 12px 12px; }
.article-tete .meta { font-size: 14px; color: var(--encre-douce); }
.article-tete .meta .date { color: var(--orange-fonce); font-weight: 600; }
.resume {
  font-size: 18px; font-style: italic; color: var(--encre-douce);
  border-left: 3px solid var(--orange); padding-left: 16px; margin: 18px 0 26px;
}
.media-article { margin: 0 0 28px; }
.media-article img { border-radius: 12px; }
.video-embed { position: relative; padding-top: 56.25%; border-radius: 12px; overflow: hidden; background: #1a1a1a; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.corps-article { max-width: 760px; }
.pied-article {
  display: flex; justify-content: space-between; margin-top: 44px;
  padding-top: 16px; border-top: 1px solid var(--creme-fonce); font-size: 15px;
}

/* ---------- Listes (blog, tags) ---------- */
.liste-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.intro-liste { max-width: 760px; color: var(--encre-douce); }

/* ---------- Actualités ---------- */
.actu {
  display: flex; gap: 36px; align-items: center;
  padding: 34px 0; border-bottom: 1px solid var(--creme-fonce);
}
.actu:nth-child(even) { flex-direction: row-reverse; }
.actu-media { flex: 1.15; min-width: 0; }
.actu-media img { border-radius: 12px; }
.actu-texte { flex: 1; }
.actu-texte h2 { margin: 4px 0 8px; }
.actu-texte .meta { font-size: 14px; color: var(--orange-fonce); font-weight: 600; }

/* ---------- Loupe (zoom au survol, sans popup) ---------- */
.zoomable { position: relative; cursor: crosshair; }
.loupe {
  position: absolute; pointer-events: none; display: none;
  width: 200px; height: 200px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 2px 14px rgba(44,42,40,.35);
  background-repeat: no-repeat; z-index: 5;
}

/* ---------- Galeries ---------- */
.grille-galeries { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 24px; }

/* ---------- Carrousel d'œuvres (galeries) ---------- */
.carrousel { position: relative; margin: 28px 0 40px; }
.carrousel-piste {
  display: flex; gap: 18px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 4px 2px 12px;
  scrollbar-width: thin;
}
.carrousel-item {
  flex: 0 0 auto; scroll-snap-align: start; cursor: zoom-in;
  text-align: center; width: 240px;
}
.carrousel-item img {
  height: 300px; width: auto; max-width: 100%;
  margin: 0 auto; border-radius: 8px;
  box-shadow: 0 2px 10px rgba(44,42,40,.15);
  transition: transform .15s;
}
.carrousel-item:hover img { transform: scale(1.03); }
.carrousel-item .titre-oeuvre {
  font-family: var(--font-titres); font-size: 16px; margin: 10px 0 0; color: var(--encre);
}
.carrousel-item .legende-oeuvre { font-size: 12px; color: var(--encre-douce); margin: 2px 0 0; }
.carrousel-btn {
  position: absolute; top: 130px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; border: none;
  background: var(--orange); color: #fff; font-size: 24px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(44,42,40,.25);
}
.carrousel-btn:hover { background: var(--orange-fonce); }
.carrousel-btn.prev { left: -14px; }
.carrousel-btn.next { right: -14px; }

/* ---------- Visionneuse plein écran (lightbox) ---------- */
.visionneuse {
  position: fixed; inset: 0; z-index: 50; display: none;
  background: rgba(28, 22, 34, .92);
  align-items: center; justify-content: center;
}
.visionneuse.ouverte { display: flex; }
.visionneuse-cadre { margin: 0; text-align: center; max-width: 86vw; }
.visionneuse-image img {
  max-width: 86vw; max-height: 80vh; width: auto; height: auto; /* jamais rognée */
  border-radius: 6px; box-shadow: 0 6px 40px rgba(0,0,0,.5);
}
.visionneuse-cadre figcaption { color: #F3E9DC; margin-top: 14px; }
.visionneuse-titre { font-family: var(--font-titres); font-size: 22px; display: block; }
.visionneuse-legende { font-size: 14px; opacity: .8; }
.visionneuse-fermer {
  position: absolute; top: 18px; right: 24px; z-index: 51;
  background: none; border: none; color: #fff; font-size: 44px; cursor: pointer; line-height: 1;
}
.visionneuse-nav {
  background: none; border: none; color: #fff; font-size: 64px;
  cursor: pointer; padding: 0 24px; user-select: none;
}
.visionneuse-nav:hover, .visionneuse-fermer:hover { color: var(--orange); }