/* ---------- Saisons ----------
   Variations de style styles/<saison>.json, choisies dans Apparence › Éditeur › Styles : elles changent la palette,
   et lacte_season() (functions.php) pose la classe « lacte-saison-<saison> » sur <body> pour les motifs ci-dessous.
   Motifs purement décoratifs (fonds CSS), discrets, estompés sous les textes. Variables par saison :
   --lacte-hero-motif (fond du bandeau d'accueil, côté photo), --lacte-hero-band (liseré du bandeau, haut ou bas),
   --lacte-support-motif (bandeau « Soutenir »), --lacte-footer-band (liseré posé au-dessus du pied de page). */
.lacte-saison-noel {
  --lacte-hero-motif: url(../images/saisons/noel-flocons.svg) 0 0 / 200px 200px repeat;
  --lacte-support-motif: url(../images/saisons/noel-etoiles.svg) 0 0 / 160px 160px repeat;
  --lacte-footer-band: url(../images/saisons/noel-guirlande.svg) 0 0 / 120px 28px repeat-x;
  --lacte-footer-band-height: 28px;
}
.lacte-saison-alsace {
  --lacte-hero-band: url(../images/saisons/alsace-kelsch.svg) 0 0 / 18px 18px repeat;
  --lacte-hero-band-inset: 0 0 auto 0;
  --lacte-support-motif: url(../images/saisons/alsace-kelsch.svg) 0 0 / 36px 36px repeat;
  --lacte-support-motif-opacity: .12;
  --lacte-footer-band: url(../images/saisons/alsace-kelsch.svg) 0 0 / 18px 18px repeat;
  --lacte-footer-band-height: 12px;
}
.lacte-saison-paste {
  --lacte-hero-band: url(../images/saisons/paste-frise.svg) 0 50% / 32px 22px repeat-x;
  --lacte-hero-band-inset: 6px 0 auto 0;
  --lacte-hero-band-height: 22px;
  --lacte-support-motif: url(../images/saisons/paste-oeufs.svg) 0 0 / 180px 180px repeat;
  --lacte-footer-band: url(../images/saisons/paste-frise.svg) 0 50% / 64px 44px repeat-x;
  --lacte-footer-band-height: 44px;
}
.lacte-saison-ete {
  /* Soleil levé derrière le coin de la photo. */
  --lacte-hero-motif: url(../images/saisons/ete-soleil.svg) right -90px top -34px / 220px 220px no-repeat;
  --lacte-hero-motif-mask: none;
  --lacte-hero-band: url(../images/saisons/ete-vagues.svg) 0 100% / 160px 28px repeat-x;
  --lacte-hero-band-inset: auto 0 0 0;
  --lacte-hero-band-height: 28px;
  --lacte-footer-band: url(../images/saisons/ete-vagues.svg) 0 100% / 160px 28px repeat-x;
  --lacte-footer-band-height: 28px;
}
.lacte-saison-halloween {
  --lacte-hero-motif: url(../images/saisons/halloween-citrouilles.svg) 0 0 / 200px 200px repeat;
  --lacte-support-motif: url(../images/saisons/halloween-nuit.svg) 0 0 / 160px 160px repeat;
  --lacte-footer-band: url(../images/saisons/halloween-fanions.svg) 0 0 / 120px 28px repeat-x;
  --lacte-footer-band-height: 28px;
}
.lacte-saison-martisor {
  /* Cordon rouge et blanc du mărțișor, en haut du bandeau et au-dessus du pied. */
  --lacte-hero-band: url(../images/saisons/martisor-cordon.svg) 0 0 / 24px 12px repeat-x;
  --lacte-support-motif: url(../images/saisons/martisor-ghiocei.svg) 0 0 / 160px 160px repeat;
  --lacte-footer-band: url(../images/saisons/martisor-cordon.svg) 0 0 / 24px 12px repeat-x;
  --lacte-footer-band-height: 12px;
}
.lacte-saison-roumanie {
  --lacte-hero-motif: url(../images/saisons/roumanie-cocardes.svg) 0 0 / 160px 160px repeat;
  --lacte-hero-band: url(../images/saisons/roumanie-tricolore.svg) 0 0 / 10px 9px repeat-x;
  --lacte-hero-band-height: 9px;
  --lacte-support-motif: url(../images/saisons/roumanie-cocardes.svg) 0 0 / 160px 160px repeat;
  --lacte-footer-band: url(../images/saisons/roumanie-tricolore.svg) 0 0 / 10px 9px repeat-x;
  --lacte-footer-band-height: 9px;
}
.lacte-saison-automne {
  --lacte-hero-motif: url(../images/saisons/automne-feuilles.svg) 0 0 / 200px 200px repeat;
  --lacte-support-motif: url(../images/saisons/automne-feuilles.svg) 0 0 / 160px 160px repeat;
  --lacte-support-motif-opacity: .7;
  --lacte-footer-band: url(../images/saisons/automne-frise.svg) 0 50% / 80px 24px repeat-x;
  --lacte-footer-band-height: 24px;
}
.lacte-saison-musique {
  --lacte-hero-motif: url(../images/saisons/musique-notes.svg) 0 0 / 200px 200px repeat;
  --lacte-support-motif: url(../images/saisons/musique-notes-claires.svg) 0 0 / 160px 160px repeat;
  --lacte-footer-band: url(../images/saisons/musique-portee.svg) 0 50% / 160px 28px repeat-x;
  --lacte-footer-band-height: 28px;
}
.lacte-saison-france {
  --lacte-hero-motif: url(../images/saisons/france-feux.svg) 0 0 / 200px 200px repeat;
  --lacte-hero-band: url(../images/saisons/france-tricolore.svg) 0 0 / 10px 9px repeat-x;
  --lacte-hero-band-height: 9px;
  --lacte-support-motif: url(../images/saisons/france-feux-nuit.svg) 0 0 / 160px 160px repeat;
  --lacte-footer-band: url(../images/saisons/france-fanions.svg) 0 0 / 120px 28px repeat-x;
  --lacte-footer-band-height: 28px;
}
body[class*="lacte-saison-"] :where(.lacte-hero, .lacte-support, .lacte-footer) { position: relative; isolation: isolate; }
body[class*="lacte-saison-"] .lacte-hero::before,
body[class*="lacte-saison-"] .lacte-hero::after,
body[class*="lacte-saison-"] .lacte-support::before,
body[class*="lacte-saison-"] .lacte-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
/* Motif du bandeau : côté photo, estompé sous le titre et l'introduction. */
body[class*="lacte-saison-"] .lacte-hero::before {
  inset: 0;
  background: var(--lacte-hero-motif, none);
  -webkit-mask-image: var(--lacte-hero-motif-mask, linear-gradient(90deg, transparent 30%, #000 75%));
  mask-image: var(--lacte-hero-motif-mask, linear-gradient(90deg, transparent 30%, #000 75%));
}
body[class*="lacte-saison-"] .lacte-hero::after {
  inset: var(--lacte-hero-band-inset, 0 0 auto 0);
  height: var(--lacte-hero-band-height, 12px);
  background: var(--lacte-hero-band, none);
}
body[class*="lacte-saison-"] .lacte-support { overflow: hidden; }
body[class*="lacte-saison-"] .lacte-support::before {
  inset: 0;
  background: var(--lacte-support-motif, none);
  opacity: var(--lacte-support-motif-opacity, 1);
  /* Estompé sous le titre et le texte, à gauche ; visible autour des boutons. */
  -webkit-mask-image: linear-gradient(90deg, transparent 45%, #000 85%);
  mask-image: linear-gradient(90deg, transparent 45%, #000 85%);
}
/* Liseré au-dessus du pied de page (guirlande, carreaux, frise, vagues), sur le fond de la page. */
body[class*="lacte-saison-"] .lacte-footer::before {
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--lacte-footer-band-height, 0px);
  background: var(--lacte-footer-band, none);
}

/* Colonnes empilées (téléphone, petite tablette) : le texte est en haut, la photo ou les boutons en bas.
   Les motifs passent d'un estompage horizontal à un estompage vertical, au lieu d'être masqués. */
@media (max-width: 781px) {
  body[class*="lacte-saison-"] .lacte-hero::before {
    opacity: .7;
    -webkit-mask-image: var(--lacte-hero-motif-mask, linear-gradient(180deg, #000 0, transparent 8%, transparent 52%, #000 82%));
    mask-image: var(--lacte-hero-motif-mask, linear-gradient(180deg, #000 0, transparent 8%, transparent 52%, #000 82%));
  }
  .lacte-saison-ete { --lacte-hero-motif: url(../images/saisons/ete-soleil.svg) right -46px top -46px / 150px 150px no-repeat; }
  body[class*="lacte-saison-"] .lacte-support::before {
    -webkit-mask-image: linear-gradient(180deg, transparent 58%, #000 88%);
    mask-image: linear-gradient(180deg, transparent 58%, #000 88%);
  }
}

/* ---------- Habillage des saisons ----------
   Variables par saison : --lacte-ornament (petit motif : coin du logo, devant les surtitres, pastille des icônes de missions),
   --lacte-header-band / --lacte-header-band-height (filet sous l'en-tête, repris en haut des cartes),
   --lacte-button-radius (forme des boutons), --lacte-hero-anim (animation du motif du bandeau d'accueil),
   --lacte-band-anim (défilement du liseré du bandeau). Tout est décoratif : aucun texte, aucun clic. */
body[class*="lacte-saison-"] {
  --lacte-header-band-default: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--accent), var(--wp--preset--color--gold));
}

/* Ornement au coin du logo. */
body[class*="lacte-saison-"] .lacte-brand .wp-block-site-logo { position: relative; }
body[class*="lacte-saison-"] .lacte-brand .wp-block-site-logo::after {
  content: "";
  position: absolute;
  top: -8px;
  right: -10px;
  width: 26px;
  height: 26px;
  background: var(--lacte-ornament, none) center / contain no-repeat;
  transform: rotate(12deg);
  pointer-events: none;
}

/* Filet sous l'en-tête. */
body[class*="lacte-saison-"] .lacte-header { position: relative; }
body[class*="lacte-saison-"] .lacte-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--lacte-header-band-height, 4px);
  background: var(--lacte-header-band, var(--lacte-header-band-default));
  pointer-events: none;
}

/* Surtitres : ornement devant le texte. */
body[class*="lacte-saison-"] .is-style-surtitre::before {
  content: "";
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin-right: .45em;
  vertical-align: -.25em;
  background: var(--lacte-ornament, none) center / contain no-repeat;
}

/* Icônes des missions : pastille de la saison dans le coin. */
body[class*="lacte-saison-"] .lacte-mission-icon { position: relative; }
body[class*="lacte-saison-"] .lacte-mission-icon::after {
  content: "";
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  background: var(--lacte-ornament, none) center / contain no-repeat;
  pointer-events: none;
}

/* Cartes : liseré de la saison en haut, sous le lien qui couvre la carte. */
body[class*="lacte-saison-"] :where(.wp-block-group.is-style-carte, .lacte-cards .wp-block-post) { position: relative; }
body[class*="lacte-saison-"] :where(.wp-block-group.is-style-carte, .lacte-cards .wp-block-post)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: var(--lacte-header-band-height, 4px);
  border-radius: var(--lacte-radius) var(--lacte-radius) 0 0;
  background: var(--lacte-header-band, var(--lacte-header-band-default));
  pointer-events: none;
}

/* Boutons : forme propre à la saison. */
body[class*="lacte-saison-"] :where(.wp-element-button, .wp-block-button__link) { border-radius: var(--lacte-button-radius, 999px); }

/* Animations lentes du motif du bandeau (tuiles de 200 px : boucle sans saut) et du liseré. */
body[class*="lacte-saison-"] .lacte-hero::before { animation: var(--lacte-hero-anim, none); }
body[class*="lacte-saison-"] .lacte-hero::after { animation: var(--lacte-band-anim, none); }
@keyframes lacte-tombe { to { background-position: 0 200px; } }
@keyframes lacte-biais { to { background-position: -200px 200px; } }
@keyframes lacte-monte { to { background-position: 0 -200px; } }
@keyframes lacte-traverse { to { background-position: -200px 0; } }
@keyframes lacte-scintille { 50% { opacity: .45; } }
@keyframes lacte-pulse { 50% { opacity: .6; } }
@keyframes lacte-defile-24 { to { background-position: 24px 0; } }
@keyframes lacte-defile-32 { to { background-position: 32px 50%; } }

.lacte-saison-noel {
  --lacte-ornament: url(../images/saisons/noel-ornement.svg);
  --lacte-header-band: repeating-linear-gradient(90deg, var(--wp--preset--color--accent) 0 14px, var(--wp--preset--color--gold) 14px 28px);
  --lacte-header-band-height: 5px;
  --lacte-hero-anim: lacte-tombe 40s linear infinite;
}
.lacte-saison-alsace {
  --lacte-ornament: url(../images/saisons/alsace-ornement.svg);
  --lacte-header-band: url(../images/saisons/alsace-kelsch.svg) 0 0 / 12px 12px repeat;
  --lacte-header-band-height: 6px;
  --lacte-button-radius: 6px;
}
.lacte-saison-paste {
  --lacte-ornament: url(../images/saisons/paste-ornement.svg);
  /* Point de croix simplifié : rouge, interstice, noir, interstice. */
  --lacte-header-band: repeating-linear-gradient(90deg, var(--wp--preset--color--primary) 0 6px, transparent 6px 9px, var(--wp--preset--color--text) 9px 15px, transparent 15px 18px);
  --lacte-header-band-height: 6px;
  --lacte-band-anim: lacte-defile-32 5s linear infinite;
}
.lacte-saison-ete {
  --lacte-ornament: url(../images/saisons/ete-ornement.svg);
  --lacte-header-band: url(../images/saisons/ete-vagues.svg) 0 100% / 48px 8px repeat-x;
  --lacte-header-band-height: 8px;
  --lacte-hero-anim: lacte-pulse 8s ease-in-out infinite;
}
.lacte-saison-halloween {
  --lacte-ornament: url(../images/saisons/halloween-ornement.svg);
  --lacte-header-band: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--gold), var(--wp--preset--color--primary));
  --lacte-header-band-height: 5px;
  --lacte-button-radius: 12px;
  --lacte-hero-anim: lacte-traverse 50s linear infinite;
}
.lacte-saison-martisor {
  --lacte-ornament: url(../images/saisons/martisor-ornement.svg);
  --lacte-header-band: url(../images/saisons/martisor-cordon.svg) 0 0 / 16px 8px repeat-x;
  --lacte-header-band-height: 8px;
  --lacte-band-anim: lacte-defile-24 4s linear infinite;
}
.lacte-saison-roumanie {
  --lacte-ornament: url(../images/saisons/roumanie-ornement.svg);
  --lacte-header-band: url(../images/saisons/roumanie-tricolore.svg) 0 0 / 10px 9px repeat-x;
  --lacte-header-band-height: 9px;
  --lacte-button-radius: 4px;
}
.lacte-saison-automne {
  --lacte-ornament: url(../images/saisons/automne-ornement.svg);
  --lacte-header-band: linear-gradient(90deg, var(--wp--preset--color--gold), var(--wp--preset--color--accent), var(--wp--preset--color--primary));
  --lacte-header-band-height: 5px;
  --lacte-hero-anim: lacte-biais 45s linear infinite;
}
.lacte-saison-musique {
  --lacte-ornament: url(../images/saisons/musique-ornement.svg);
  /* Portée : cinq lignes fines. */
  --lacte-header-band: repeating-linear-gradient(180deg, var(--wp--preset--color--primary) 0 1px, transparent 1px 2.5px);
  --lacte-header-band-height: 12px;
  --lacte-hero-anim: lacte-monte 35s linear infinite;
}
.lacte-saison-france {
  --lacte-ornament: url(../images/saisons/france-ornement.svg);
  --lacte-header-band: url(../images/saisons/france-tricolore.svg) 0 0 / 10px 9px repeat-x;
  --lacte-header-band-height: 9px;
  --lacte-button-radius: 4px;
  --lacte-hero-anim: lacte-scintille 4s ease-in-out infinite;
}

/* ---------- Pages intérieures ----------
   Toutes ont <main id="contenu"> avec le titre en tête : motif de la saison en haut de page (--lacte-page-motif, par défaut celui
   du bandeau d'accueil), estompé vers le bas et sous le titre ; titre souligné du filet de la saison ; séparateurs décorés. */
body[class*="lacte-saison-"]:not(.home):not(.error404) #contenu {
  position: relative;
  isolation: isolate;
  /* Colonne du texte : étroite pour les pages et articles, large pour les listes. */
  --lacte-col: var(--wp--style--global--content-size, 760px);
}
body[class*="lacte-saison-"]:is(.archive, .blog, .search):not(.home):not(.error404) #contenu { --lacte-col: var(--wp--style--global--wide-size, 1160px); }
body[class*="lacte-saison-"]:not(.home):not(.error404) #contenu::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: 260px;
  background: var(--lacte-page-motif, var(--lacte-hero-motif, none));
  opacity: var(--lacte-page-motif-opacity, 1);
  animation: var(--lacte-hero-anim, none);
  pointer-events: none;
  /* Visible : une bande au-dessus du titre, plus les côtés de la colonne de texte (estompés vers le bas) ; jamais derrière le texte.
     Calques, de bas en haut : estompage vertical ∩ côtés, puis ∪ bande du haut. */
  --lacte-col-sides: linear-gradient(90deg,
    #000 calc(50% - var(--lacte-col) / 2 - 60px), transparent calc(50% - var(--lacte-col) / 2 - 8px),
    transparent calc(50% + var(--lacte-col) / 2 + 8px), #000 calc(50% + var(--lacte-col) / 2 + 60px));
  -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 44px), var(--lacte-col-sides), linear-gradient(180deg, #000 30%, transparent 100%);
  -webkit-mask-composite: source-over, source-in;
  mask-image: linear-gradient(180deg, #000 0, transparent 44px), var(--lacte-col-sides), linear-gradient(180deg, #000 30%, transparent 100%);
  mask-composite: add, intersect;
}
body[class*="lacte-saison-"] #contenu h1::after {
  content: "";
  display: block;
  width: 72px;
  height: var(--lacte-header-band-height, 4px);
  margin-top: .45em;
  border-radius: 2px;
  background: var(--lacte-header-band, var(--lacte-header-band-default));
}
/* Titres centrés (page 404, compositions centrées) : filet centré aussi. */
body[class*="lacte-saison-"] #contenu h1.has-text-align-center::after { margin-left: auto; margin-right: auto; }
body[class*="lacte-saison-"] #contenu .wp-block-separator {
  position: relative;
  height: 26px;
  border: 0;
  background: none;
  opacity: 1;
}
body[class*="lacte-saison-"] #contenu .wp-block-separator::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--lacte-header-band-height, 4px);
  transform: translateY(-50%);
  background: var(--lacte-header-band, var(--lacte-header-band-default));
  opacity: .8;
}
body[class*="lacte-saison-"] #contenu .wp-block-separator::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 26px;
  height: 26px;
  margin-left: -21px;
  border: solid var(--wp--preset--color--background);
  border-width: 0 8px;
  background: var(--wp--preset--color--background) var(--lacte-ornament, none) center / contain no-repeat;
}

.lacte-saison-alsace { --lacte-page-motif: url(../images/saisons/alsace-kelsch.svg) 0 0 / 36px 36px repeat; --lacte-page-motif-opacity: .12; }
.lacte-saison-paste { --lacte-page-motif: url(../images/saisons/paste-oeufs.svg) 0 0 / 180px 180px repeat; }
.lacte-saison-martisor { --lacte-page-motif: url(../images/saisons/martisor-noeuds.svg) 0 0 / 160px 160px repeat; }

@media (max-width: 599px) {
  body[class*="lacte-saison-"] .lacte-brand .wp-block-site-logo::after { top: -6px; right: -8px; width: 18px; height: 18px; }
}
@media (max-width: 781px) {
  /* Téléphone : le motif reste au-dessus du titre, estompé vers le bas seulement. */
  body[class*="lacte-saison-"]:not(.home):not(.error404) #contenu::before {
    height: 150px;
    opacity: calc(var(--lacte-page-motif-opacity, 1) * .8);
    -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 45%);
    mask-image: linear-gradient(180deg, #000 0, transparent 45%);
  }
}
@media (prefers-reduced-motion: reduce) {
  body[class*="lacte-saison-"] .lacte-hero::before,
  body[class*="lacte-saison-"] .lacte-hero::after,
  body[class*="lacte-saison-"] #contenu::before { animation: none; }
}