/* MADA-ANNUAIRE - rythme des bandes de page.
   Une page alterne ses fonds : chaque section porte un ton declare, et deux
   sections voisines n'ont jamais le meme. Les couleurs viennent toutes de la
   palette : changer de palette repeint les bandes.

   Pourquoi des classes plutot que les fonds d'Elementor : son CSS arrive apres
   le notre et gagne, ce qui rendait les garde-fous de contraste inoperants. La
   classe garde la main, et elle fonctionne aussi hors Elementor.

   Trois regles tenues ici, dans cet ordre :

   1. Aucun texte clair sur fond clair, aucun texte sombre sur fond sombre. Les
      bandes sombres ne corrigent pas classe par classe - c'est ce qui laissait
      toujours un bloc oublie - elles redefinissent les jetons de couleur de
      texte pour tout ce qu'elles contiennent.
   2. Une carte n'a jamais la meme valeur que sa bande. D'ou --fond-carte,
      declare par chaque ton, y compris le ton blanc.
   3. Les bandes en image portent un voile : c'est lui qui garantit le
      contraste quelle que soit la photo. Il est pose sur la bande entiere, en
      absolu, et la bande est en position relative. Un voile pose sur un
      conteneur qui n'entoure que le titre laisse un rectangle au milieu de la
      page : on s'est deja fait avoir.

   Les images de fond sont dans le paquet (assets/img) : elles suivent les
   mises a jour du plugin, sans passer par la mediatheque. */

/* ------------------------------------------------------- Tons clairs */

.mada-fond--blanc { background: var(--surface); }

.mada-fond--blanc > * {
	--fond-carte: var(--light-2);
	--fond-carte-ligne: var(--line);
}

.mada-fond--claire { background: var(--surface-2); }

.mada-fond--claire > * {
	--fond-carte: var(--surface);
	--fond-carte-ligne: var(--line);
}

.mada-fond--pale { background: var(--light); }

.mada-fond--pale > * {
	--fond-carte: var(--surface);
	--fond-carte-ligne: var(--line);
}

/* ------------------------------------------------------- Tons sombres */

.mada-fond--accent { background: var(--accent); color: #fff; }
.mada-fond--marine { background: var(--deep); color: #fff; }
.mada-fond--or { background: var(--deepTeal, var(--turq)); color: #fff; }

/* ------------------------------------------------------ Bandes en image */

.mada-fond--nuit {
	position: relative;
	isolation: isolate;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.mada-fond--nuit::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* La bande ville n'a aucun voile : a la demande du client, l'image elle-meme
   est claire. Elle est donc lavee a la fabrication, pas a l'affichage, et son
   pixel le plus sombre reste au-dessus du seuil de lisibilite pour le texte
   discret de la section. Le controle de contraste le mesure sur le fichier
   livre, pas sur une estimation. */
.mada-fond--ville {
	background-color: var(--light);
	background-image: url("../img/fond-ville.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* Cette bande porte une photo nette, sans voile : c'est la demande, « comme
   le hero ». Le hero resout la lisibilite de la meme facon, et pas avec un
   voile : le texte est en marine plein et porte un halo clair.

   Deux consequences tenues ici :
   - le gris de lecture n'existe pas sur cette bande, le texte discret passe en
     marine plein. Mesure sur l'image livree : son pixel le plus sombre dans la
     zone du texte donne 5,6:1, le gris habituel n'y tenait que 3,4:1 ;
   - les cartes posees dessus gardent une ombre portee, parce que leur fond
     blanc se retrouve parfois au-dessus du ciel, lui aussi blanc. */
.mada-fond--ville > * {
	--fond-carte: var(--surface);
	--fond-carte-ligne: var(--line);
	--muted: var(--ink);
	--faint: var(--ink);
}

/* Selecteurs descendants, pas « > * > h2 » : Elementor emballe chaque widget
   dans deux div, un enfant direct ne mord donc jamais. Le halo est ensuite
   annule dans les cartes, qui ont leur propre fond plein. */
.mada-fond--ville h1,
.mada-fond--ville h2,
.mada-fond--ville h3,
.mada-fond--ville p,
.mada-fond--ville .mada-intro,
.mada-fond--ville .mada-surtitre {
	text-shadow: 0 0 14px rgba(255, 255, 255, 0.95), 0 0 28px rgba(255, 255, 255, 0.8);
}

.mada-fond--ville .mada-carte-fiche *,
.mada-fond--ville .mada-vignette-region *,
.mada-fond--ville .mada-secteur-tuile *,
.mada-fond--ville .mada-panneau * { text-shadow: none; }

.mada-fond--ville .mada-carte-fiche,
.mada-fond--ville .mada-vignette-region,
.mada-fond--ville .mada-secteur-tuile,
.mada-fond--ville .mada-panneau { box-shadow: var(--ombre-md); }

.mada-fond--nuit {
	background-color: var(--deep);
	background-image: url("../img/fond-nuit.webp");
	color: #fff;
}

.mada-fond--nuit::before {
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--deep) 58%, transparent),
		color-mix(in srgb, var(--deep) 84%, transparent)
	);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.mada-fond--nuit::before { background: rgba(0, 28, 52, 0.76); }
}

/* --------------------------------------- Contexte sombre, une seule fois

   Les jetons de texte sont redefinis pour toute la bande. Tout composant
   ecrit avec var(--ink), var(--muted) ou var(--deep) comme couleur de texte
   devient donc lisible sans qu'on ait a le citer. C'est ce qui manquait : la
   liste des classes a surcharger n'etait jamais complete.

   --deep est redefini parce qu'il sert de couleur de texte dans une quinzaine
   de regles. Les rares blocs qui s'en servaient comme fond sont rattrapes plus
   bas par --fond-carte. */

.mada-fond--accent > *,
.mada-fond--marine > *,
.mada-fond--or > *,
.mada-fond--nuit > * {
	--ink: #FFFFFF;
	--ink-2: rgba(255, 255, 255, 0.88);
	--muted: rgba(255, 255, 255, 0.78);
	--faint: rgba(255, 255, 255, 0.66);
	--deep: #FFFFFF;
	--deep-2: rgba(255, 255, 255, 0.88);
	--line: rgba(255, 255, 255, 0.22);
	--line-fort: rgba(255, 255, 255, 0.38);
	--surface: rgba(255, 255, 255, 0.08);
	--surface-2: rgba(255, 255, 255, 0.10);
	--surface-3: rgba(255, 255, 255, 0.14);
	--fond-carte: rgba(255, 255, 255, 0.14);
	--fond-carte-ligne: rgba(255, 255, 255, 0.3);
}

/* L'or est la seule bande ou le titre reste marine : du blanc sur l'or donne
   2,9:1, le marine donne 6:1. Mesure, pas choisi. */
/* L'or de la bande est l'or fonce de la palette : du blanc dessus donne
   5,9:1, du marine seulement 3,4:1. Mesure, pas choisi. C'est l'inverse du
   hero, ou le titre est marine parce que la photo y est claire. */
.mada-fond--or > * {
	--fond-carte: rgba(255, 255, 255, 0.18);
	--fond-carte-ligne: rgba(255, 255, 255, 0.4);
}

.mada-fond--accent h1, .mada-fond--accent h2, .mada-fond--accent h3, .mada-fond--accent h4,
.mada-fond--marine h1, .mada-fond--marine h2, .mada-fond--marine h3, .mada-fond--marine h4,
.mada-fond--nuit h1, .mada-fond--nuit h2, .mada-fond--nuit h3, .mada-fond--nuit h4 { color: #fff; }

.mada-fond--or h1, .mada-fond--or h2, .mada-fond--or h3, .mada-fond--or h4 { color: #fff; }

.mada-fond--accent p, .mada-fond--marine p, .mada-fond--nuit p { color: rgba(255, 255, 255, 0.88); }
.mada-fond--or p { color: rgba(255, 255, 255, 0.88); }

.mada-fond--accent .mada-surtitre,
.mada-fond--marine .mada-surtitre,
.mada-fond--nuit .mada-surtitre { color: var(--turq-100, #F7ECDA); }

.mada-fond--or .mada-surtitre { color: rgba(255, 255, 255, 0.88); }

.mada-fond--accent .mada-intro, .mada-fond--marine .mada-intro,
.mada-fond--nuit .mada-intro { color: rgba(255, 255, 255, 0.88); }

.mada-fond--or .mada-intro { color: rgba(255, 255, 255, 0.88); }

/* Les chiffres : leur valeur est en --accent, qui est un bleu. Sur une bande
   sombre elle passe en or, seul accent de la palette lisible sur du marine. */
.mada-fond--accent .mada-chiffre-valeur,
.mada-fond--marine .mada-chiffre-valeur,
.mada-fond--nuit .mada-chiffre-valeur { color: var(--turq-100, #F7ECDA); }

.mada-fond--or .mada-chiffre-valeur { color: #fff; }

/* ----------------------------------------------- Cartes et blocs poses

   Regle 2 : une carte n'a jamais la valeur de sa bande. Les composants sont
   ecrits avec var(--surface) ; on leur donne --fond-carte, qui en differe
   toujours, y compris sur une bande blanche. */

.mada-fond--blanc .mada-carte-fiche,
.mada-fond--claire .mada-carte-fiche,
.mada-fond--pale .mada-carte-fiche,
.mada-fond--ville .mada-carte-fiche,
.mada-fond--nuit .mada-carte-fiche,
.mada-fond--marine .mada-carte-fiche,
.mada-fond--accent .mada-carte-fiche,
.mada-fond--or .mada-carte-fiche,
.mada-fond--blanc .mada-secteur-tuile,
.mada-fond--claire .mada-secteur-tuile,
.mada-fond--pale .mada-secteur-tuile,
.mada-fond--ville .mada-secteur-tuile,
.mada-fond--nuit .mada-secteur-tuile,
.mada-fond--marine .mada-secteur-tuile,
.mada-fond--accent .mada-secteur-tuile,
.mada-fond--or .mada-secteur-tuile,
.mada-fond--blanc .mada-vignette-region,
.mada-fond--claire .mada-vignette-region,
.mada-fond--pale .mada-vignette-region,
.mada-fond--ville .mada-vignette-region,
.mada-fond--nuit .mada-vignette-region,
.mada-fond--marine .mada-vignette-region,
.mada-fond--blanc .mada-panneau,
.mada-fond--claire .mada-panneau,
.mada-fond--pale .mada-panneau,
.mada-fond--ville .mada-panneau,
.mada-fond--nuit .mada-panneau,
.mada-fond--marine .mada-panneau,
.mada-fond--accent .mada-panneau,
.mada-fond--or .mada-panneau,
.mada-fond--blanc .mada-article-carte,
.mada-fond--claire .mada-article-carte,
.mada-fond--pale .mada-article-carte,
.mada-fond--ville .mada-article-carte,
.mada-fond--nuit .mada-article-carte,
.mada-fond--marine .mada-article-carte {
	background: var(--fond-carte);
	border-color: var(--fond-carte-ligne);
}

/* La carte des regions est posee a nu sur la bande : elle a ses propres
   couleurs de remplissage, un panneau derriere la rendrait flottante. */
.mada-fond--ville .mada-carte-regions,
.mada-fond--nuit .mada-carte-regions { background: transparent; }

/* ------------------------------------------------------------- Boutons */

.mada-fond--accent .mada-btn-secondaire,
.mada-fond--marine .mada-btn-secondaire,
.mada-fond--nuit .mada-btn-secondaire {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
}

.mada-fond--accent .mada-btn-secondaire:hover,
.mada-fond--marine .mada-btn-secondaire:hover,
.mada-fond--nuit .mada-btn-secondaire:hover { border-color: #fff; color: #fff; }

.mada-fond--or .mada-btn-principal {
	background: var(--deep-3, #001527);
	color: #fff;
	border-color: var(--deep-3, #001527);
}

.mada-fond--or .mada-btn-secondaire {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
}