/* ============================================================
   CHARTE ALBOISSEAU — septembre 2026
   Typographies : Alfa Slab One  → H1 / logotype
                  Playfair Display italique → H2, H4, H6
                  Mulish → texte courant, H3, H5
   Rythmique : deux niveaux voisins ne partagent jamais
               la même nature typographique.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Playfair+Display:ital,wght@0,400..700;1,400..700&family=Mulish:wght@300..700&display=swap');

:root {
  /* Fondations */
  --alb-fond:        #FFFFFF;
  --alb-encre:       #16222E;
  --alb-encre-doux:  #4A5560;
  --alb-gris:        #5A5A5A;
  --alb-filet:       #EDEDED;

  /* Les trois mondes */
  --alb-marin:       #14A5CE;
  --alb-vegetal:     #5E8A2C;
  --alb-urbain:      #E0BE1E;

  /* Le liant */
  --alb-canard:      #0E6E78;

  /* L'enchanteresse — une seule par écran */
  --alb-accent:      #D22B76;

  /* Typographies */
  --alb-logo:  'Alfa Slab One', Georgia, serif;
  --alb-titre: 'Playfair Display', Georgia, serif;
  --alb-texte: 'Mulish', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- Base ---------- */
body {
  font-family: var(--alb-texte);
  color: var(--alb-encre);
  background: var(--alb-fond);
  font-weight: 400;
  line-height: 1.7;
}

p { color: var(--alb-encre); }


/* ============================================================
   RYTHMIQUE DES TITRES
   ============================================================ */

h1, .entry-title, .alb-logotype {
  font-family: var(--alb-logo) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  color: var(--alb-encre) !important;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  margin-bottom: 0.6em !important;
}

h2 {
  font-family: var(--alb-texte) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  color: var(--alb-encre) !important;
  font-size: clamp(1.3rem, 2.8vw, 1.8rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 0.4em !important;
	margin-top: 2.5em !important;
}

h3 {
  font-family: var(--alb-texte) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--monde, var(--alb-canard)) !important;
  line-height: 1.4 !important;
  margin-bottom: 0.3em !important;
}

h4 {
  font-family: var(--alb-titre) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--alb-encre) !important;
  font-size: clamp(1.05rem, 3vw, 1.3rem) !important;
  line-height: 1.3 !important;
  margin-bottom: 0.3em !important;
}

h5 {
  font-family: var(--alb-texte) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em !important;
  color: var(--alb-gris) !important;
  line-height: 1.4 !important;
  margin-bottom: 0.3em !important;
}

h6 {
  font-family: var(--alb-titre) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 0.85rem !important;
  color: var(--alb-encre-doux) !important;
  line-height: 1.4 !important;
  margin-bottom: 0.3em !important;
}

/* ============================================================
   IDENTITÉ
   ============================================================ */

/* Titre du site — si le logo image est un jour retiré */
.site-title,
.site-title a,
.wp-block-site-title a {
  font-family: var(--alb-logo);
  font-weight: 400;
  color: var(--alb-encre);
  text-transform: none;
  text-decoration: none;
}

/* Baseline */
.site-description,
.wp-block-site-tagline,
.alb-baseline {
  font-family: var(--alb-titre);
  font-style: italic;
  font-weight: 400;
  color: var(--alb-encre-doux);
font-size: clamp(1rem, 2vw, 1.6rem);
}

/* Surtitre manuel, si besoin hors H3 */
.alb-kicker {
  font-family: var(--alb-texte);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--monde, var(--alb-canard));
  margin-bottom: 0.4rem;
}


/* ============================================================
   NAVIGATION ET LIENS — le canard
   ============================================================ */

.wp-block-navigation a,
.main-navigation a,
.menu a {
  font-family: var(--alb-texte);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--alb-canard);
  text-decoration: none;
}

.entry-content a,
.wp-block-post-content a {
  color: var(--alb-canard);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ============================================================
   CODAGE PAR MONDE
   Poser la classe sur la page ou la section :
   class="monde-vegetal" / "monde-marin" / "monde-urbain"
   ============================================================ */

.monde-marin   { --monde: var(--alb-marin); }
.monde-vegetal { --monde: var(--alb-vegetal); }
.monde-urbain  { --monde: var(--alb-urbain); }

/* Filets — l'épaisseur code la hiérarchie */
.alb-ligne-forte  { border-top: 4px solid var(--monde, var(--alb-canard)); }
.alb-ligne-simple { border-top: 2px solid var(--monde, var(--alb-canard)); }
.alb-ligne-fine   { border-top: 1px solid var(--alb-filet); }


/* ============================================================
   BOUTONS
   ============================================================ */

/* Discret — le canard. C'est le défaut. */
.wp-block-button.is-style-outline .wp-block-button__link,
.alb-btn-discret {
  background: transparent;
  color: var(--alb-canard);
  border: 1px solid var(--alb-canard);
  font-family: var(--alb-texte);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  border-radius: 999px;
  padding: 0.65rem 1.3rem;
  text-decoration: none;
}

/* L'enchanteresse — un seul par écran. */
.alb-btn-accent,
.alb-accent {
  background: var(--alb-accent) !important;
  color: #FFFFFF !important;
  font-family: var(--alb-texte);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  border-radius: 999px;
  padding: 0.65rem 1.3rem;
  text-decoration: none;
  border: none;
}


/* ============================================================
   PIED DE PAGE
   ============================================================ */

.site-footer,
.wp-block-template-part footer {
  background: var(--alb-encre);
  color: #B9C4CE;
}
.site-footer p,
.site-footer a { color: #B9C4CE; }
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer .site-title a { color: #FFFFFF; }


/* ============================================================
   GARDE-FOU
   Ne jamais utiliser marin, végétal ou urbain en couleur de
   texte courant. Ils vivent en lignes, filets et étiquettes.
   Une seule couleur de monde par page.
   Un seul fuchsia par écran.
   ============================================================ */

.alb-section::before {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  background: var(--monde, var(--alb-canard));
  margin-bottom: 0.9rem;
}

/* Fonds doux — un seul par page */
:root {
  --alb-fond-doux:    #FAF8F5;
  --alb-fond-marin:   #F2F9FB;
  --alb-fond-vegetal: #F5F8F0;
  --alb-fond-urbain:  #FCF9EE;
}

.alb-fond-doux    { background: var(--alb-fond-doux); }
.alb-fond-marin   { background: var(--alb-fond-marin); }
.alb-fond-vegetal { background: var(--alb-fond-vegetal); }
.alb-fond-urbain  { background: var(--alb-fond-urbain); }

/* Nom du hero en Mulish — à essayer */
.alb-nom {
  font-family: var(--alb-texte) !important;
  font-style: normal !important;
  font-weight: 300 !important;
  color: var(--alb-encre) !important;
  font-size: clamp(1.1rem, 2vw, 1.45rem) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.5em !important;
}

/* Légendes d'images — Mulish */
figcaption,
.wp-element-caption,
.wp-block-image figcaption {
  font-family: var(--alb-texte) !important;
  font-style: normal !important;
  font-weight: 300 !important;
  color: var(--alb-encre-doux) !important;
  font-size: 0.93rem !important;
  letter-spacing: 0.03em !important;
  margin-top: 0.5rem !important;
  line-height: 1.5 !important;
	
	
/* ============================================================
   GALERIE D OEUVRES - grille alignee
   ============================================================ */

.wp-block-gallery.has-nested-images {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem 1.8rem;
  margin: 2.5rem 0 3rem;
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
  margin: 0 !important;
  width: 100% !important;
  display: block !important;
}

.wp-block-gallery.has-nested-images figure.wp-block-image img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: opacity 0.4s ease;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:hover img {
  opacity: 0.88;
}

.wp-block-gallery.has-nested-images figcaption {
  position: static !important;
  background: none !important;
  padding: 0 !important;
  text-align: left;
}

@media (max-width: 900px) {
  .wp-block-gallery.has-nested-images { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .wp-block-gallery.has-nested-images { grid-template-columns: 1fr; gap: 2rem; }
}
}