/* =========================================================================
   UCP — 02 · STYLES GLOBAUX
   -------------------------------------------------------------------------
   Ce que tout le site hérite sans qu'on ait rien à faire : la typo, les
   liens, les titres, les boutons Divi. Objectif : qu'une page créée demain
   ressemble déjà à la maquette avant même qu'on lui ajoute une classe.

   ------------------------------------------------------------------------
   CONTRAT DE SPÉCIFICITÉ — à lire avant de modifier ce fichier
   ------------------------------------------------------------------------
   Les règles de cette couche ciblent des ÉLÉMENTS NUS (`h1`, `p`, `input`),
   sans préfixe `body.ucp`. C'est délibéré, et c'est la clé de tout l'édifice :

     · face à Divi, une règle `h1 {}` a la même force que la sienne, et comme
       notre feuille est chargée après (dépendance `divi-style` déclarée dans
       functions.php), c'est la nôtre qui l'emporte ;
     · face à nos composants, une règle `h1 {}` (0,0,0,1) perd contre
       `.ucp-hero__title` (0,0,1,0). Un composant n'a donc jamais à se battre
       contre ses propres fondations.

   Préfixer ces règles par `body.ucp` casserait le second point : la base
   deviendrait plus forte que les composants, et le hero afficherait un
   sur-titre gris au lieu d'or. Ne le faites pas.

   Le seul endroit où `body.ucp` est légitime : la section « surcharges Divi »
   en bas de fichier, où il faut battre des sélecteurs comme
   `body #page-container .et_pb_section .et_pb_button`. Ces règles-là ne
   croisent jamais un composant.
   ========================================================================= */


/* -------------------------------------------------------------------------
   MODÈLE DE BOÎTE
   -------------------------------------------------------------------------
   Une largeur déclarée compte la bordure et le rembourrage, pas seulement le
   contenu. Sans cette règle, un bloc en `width: 100%` avec 32 px de
   rembourrage mesure 64 px de plus que son parent : il déborde, et la page
   entière se met à glisser de gauche à droite sous le doigt.

   Divi pose déjà cette règle de son côté, et c'est précisément le piège : on
   croit l'avoir parce qu'on ne la voit jamais manquer. Le jour où la page est
   regardée hors du thème — un aperçu, un courriel, une mise à jour de Divi qui
   déplace ses feuilles — tout ce qui a du rembourrage sort de l'écran. Le
   défaut s'est vu en vrai sur téléphone : le bandeau de devis dépassait de
   48 px et emportait le reste de la page avec lui.

   Une fondation ne se sous-traite pas au thème parent. On la pose.

   Portée limitée à nos éléments, pour ne rien changer aux modules de Divi qui
   pourraient, eux, compter sur l'autre modèle.
   ------------------------------------------------------------------------- */

[class*="ucp-"],
[class*="ucp-"]::before,
[class*="ucp-"]::after {
	box-sizing: border-box;
}


/* -------------------------------------------------------------------------
   TYPOGRAPHIE DE BASE
   ------------------------------------------------------------------------- */

body.ucp {
	/* Le navigateur pose 8 px de marge autour du corps de page. Divi les retire,
	   et là encore on héritait d'un réglage qu'on ne maîtrise pas : hors du
	   thème, un bandeau pleine largeur se retrouvait bordé d'un liseré blanc de
	   8 px sur les quatre côtés. */
	margin: 0;
	font-family: var(--ucp-font-sans);
	font-size: var(--ucp-fs-body);
	line-height: var(--ucp-lh-body);
	color: var(--ucp-text);
	background-color: var(--ucp-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Divi impose sa propre pile de polices via les Options du thème. On reprend
   la main ici pour que la maquette fasse foi. */
p, li, td, th,
input, select, textarea, button {
	font-family: var(--ucp-font-sans);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ucp-font-sans);
	color: var(--ucp-text);
	font-weight: var(--ucp-fw-black);
	line-height: var(--ucp-lh-heading);
	letter-spacing: var(--ucp-ls-heading);
	padding-bottom: 0;
	margin: 0 0 var(--ucp-space-4);
}

h1 { font-size: var(--ucp-fs-h1); line-height: var(--ucp-lh-tight); letter-spacing: var(--ucp-ls-hero); }
h2 { font-size: var(--ucp-fs-h2); }
h3 { font-size: var(--ucp-fs-h3); }
h4 { font-size: var(--ucp-fs-h4); }
h5 { font-size: var(--ucp-fs-h5); font-weight: var(--ucp-fw-bold); }
h6 { font-size: var(--ucp-fs-eyebrow); font-weight: var(--ucp-fw-bold); letter-spacing: var(--ucp-ls-label); text-transform: uppercase; }

/* La signature typographique UCP : un mot en serif italique au milieu d'un
   titre. Dans l'éditeur Divi, il suffit d'envelopper le mot dans <em>.

   Le poids est déclaré en dur, et c'est délibéré.

   Les titres collés depuis les maquettes portent le style de Word en héritage :

       <h2><span style="font-family: Georgia; font-weight: normal;">
             <em>réserver</em></span></h2>

   Un `font-weight: inherit` sur le <em> irait donc chercher le `normal` du
   <span> parent, et l'accent sortirait plus léger que le reste du titre —
   exactement l'inverse de ce qu'on veut du mot le plus important de la phrase.

   Une règle posée sur l'élément lui-même l'emporte toujours sur ce qu'il aurait
   hérité de son parent, même si ce parent porte un style en ligne. C'est ce qui
   permet de rattraper ces titres sans rouvrir les cinquante pages, et sans
   sortir `!important`. */
h1 em, h2 em, h3 em, h4 em {
	font-family: var(--ucp-font-serif);
	font-style: italic;
	font-weight: var(--ucp-fw-bold);
	letter-spacing: -0.01em;
}

/* La couleur de l'accent, en trois temps.

   Par défaut, l'or. C'est la seule couleur de la palette qui tienne sur les
   deux fonds du site : sur le crème des pages de contenu comme sur le vert
   sombre des bandeaux. Laisser l'accent hériter de la couleur de son titre
   était une erreur — sur le hero vert de « Parlons de votre projet », le mot
   sortait en encre presque noire, invisible.

   Le brun de la maquette, lui, est calculé pour du crème et pour lui seul :
   il est donc réservé aux sections que le design system contrôle, où l'on sait
   ce qu'il y a derrière.

   `:where()` n'ajoute aucune spécificité : une couleur posée à la main dans le
   constructeur l'emporte toujours sur ces trois règles. */
:where(h1, h2, h3, h4) em {
	color: var(--ucp-accent);
}

.ucp-section :where(h1, h2, h3, h4) em,
.ucp-section-header :where(h1, h2, h3, h4) em,
:where(h1, h2, h3, h4).ucp-em-accent em {
	color: var(--ucp-accent-warm);
}

.ucp-on-dark h1 em,
.ucp-on-dark h2 em,
.ucp-on-dark h3 em,
.ucp-on-dark h4 em {
	color: var(--ucp-accent);
}


/* -------------------------------------------------------------------------
   RATTRAPAGE DES TITRES COLLÉS DEPUIS LES MAQUETTES
   -------------------------------------------------------------------------
   Le seul endroit du projet où `!important` est justifié. Voici pourquoi.

   Les titres du site ont été fabriqués en collant du HTML de maquette dans
   l'éditeur. Chaque mot mis en forme a emporté son style écrit EN LIGNE :

       <h1><strong>
             <span style="font-size: xx-large;">Parlons de votre</span>
             <span style="font-family: Georgia; font-weight: normal;">projet</span>
       </strong></h1>

   Un style en ligne ne se bat pas à la spécificité : il gagne contre toutes les
   feuilles de style, toujours. La seule chose qui passe devant, c'est
   `!important`. Ce n'est pas une facilité, c'est le seul outil qui existe.

   Deux dégâts, tous les deux visibles sur le site :

   · `font-weight: normal` — le mot d'accent sort plus léger que le reste du
     titre. C'est le « pêche » et le « Écosse » qui refusaient de passer en
     gras. Rien à voir avec les accents typographiques : ces mots-là n'étaient
     simplement pas enveloppés dans un <em>, et portaient le `normal` sur
     eux-mêmes.

   · `font-size: xx-large` — les MOTS sont figés à 32 px, mais l'espace qui les
     sépare est un nœud de texte du <h1>, donc rendu à la taille du titre, soit
     56 px. D'où le trou béant entre « votre » et « projet » : ce n'est pas une
     marge, c'est une espace typographique deux fois trop grande. Remettre tout
     le monde à la taille du titre referme le trou.

   `inherit` plutôt qu'une valeur fixe : le mot reprend simplement ce que dit
   son titre, sans qu'on ait à décider à sa place.

   Correctif de transition. La réparation définitive est de nettoyer ces styles
   en ligne dans le contenu — mais ça se compte en dizaines de pages, et ça peut
   attendre. */
:is(h1, h2, h3, h4, h5, h6) [style*="font-weight: normal"],
:is(h1, h2, h3, h4, h5, h6) [style*="font-weight:normal"] {
	font-weight: inherit !important;
}

:is(h1, h2, h3, h4, h5, h6) [style*="font-size: xx-large"],
:is(h1, h2, h3, h4, h5, h6) [style*="font-size:xx-large"],
:is(h1, h2, h3, h4, h5, h6) [style*="font-size: x-large"],
:is(h1, h2, h3, h4, h5, h6) [style*="font-size:x-large"],
:is(h1, h2, h3, h4, h5, h6) [style*="font-size: large"],
:is(h1, h2, h3, h4, h5, h6) [style*="font-size:large"] {
	font-size: inherit !important;
}

p {
	margin: 0 0 var(--ucp-space-4);
	padding-bottom: 0;   /* Divi ajoute 1em de padding-bottom par défaut */
	color: var(--ucp-text-muted);
	line-height: var(--ucp-lh-body);
}

p:last-child { margin-bottom: 0; }

/* `strong` renforce, il ne repeint pas.
   La règle imposait la couleur d'encre du texte courant. Sur les sections
   sombres du site — le bandeau « Voyagez en confiance », le pied de page — ça
   donnait du gris anthracite sur du noir : le mot mis en avant devenait le seul
   mot illisible de la phrase. Un renforcement qui efface n'est plus un
   renforcement.
   La couleur vient donc du contexte : blanche dans une section sombre, encre
   sur du crème, dorée si le constructeur en a décidé ainsi. */
strong, b {
	font-weight: var(--ucp-fw-bold);
}


/* -------------------------------------------------------------------------
   LIENS
   ------------------------------------------------------------------------- */

a {
	color: var(--ucp-brand);
	text-decoration: none;
	transition: color var(--ucp-transition);
}

a:hover,
a:focus-visible { color: var(--ucp-accent-warm); }

/* Liens à l'intérieur d'un paragraphe : soulignés, pour rester repérables
   sans dépendre uniquement de la couleur (lisibilité et accessibilité). */
p > a:not([class]) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(31, 67, 50, 0.35);
}

/* Un anneau de focus visible et cohérent partout. */
:focus-visible {
	outline: 2px solid var(--ucp-accent);
	outline-offset: 2px;
}


/* -------------------------------------------------------------------------
   MÉDIAS ET DIVERS
   ------------------------------------------------------------------------- */

img, svg, video {
	max-width: 100%;
	height: auto;
}

::selection {
	background: var(--ucp-accent);
	color: var(--ucp-night);
}


/* -------------------------------------------------------------------------
   CHAMPS DE FORMULAIRE
   ------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--ucp-border);
	border-radius: var(--ucp-radius);
	background-color: var(--ucp-cream);
	color: var(--ucp-text);
	font-size: var(--ucp-fs-sm);
	line-height: 1.4;
	transition: border-color var(--ucp-transition), box-shadow var(--ucp-transition);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--ucp-brand);
	box-shadow: 0 0 0 3px rgba(31, 67, 50, 0.08);
	outline: none;
}

::placeholder {
	color: rgba(92, 81, 71, 0.5);
	font-style: italic;
}

textarea {
	min-height: 110px;
	resize: vertical;
	font-style: italic;
}


/* =========================================================================
   SURCHARGES DIVI
   -------------------------------------------------------------------------
   Seul endroit du projet où l'on cible des classes `et_pb_*`, et seul endroit
   où le préfixe `body.ucp` est justifié.

   Note de spécificité : Divi style ses boutons via un sélecteur du type
   `body #page-container .et_pb_section .et_pb_button`, qui est très fort.
   On le bat en empilant trois sélecteurs, du plus fort au plus universel :
     1. avec #page-container   → gagne face à Divi quand ce conteneur existe
     2. sans #page-container   → couvre les cas où Divi 5 change son gabarit
     3. classe doublée         → couvre le HTML brut dans un module Code
   Aucun `!important` : il en resterait toujours un pour nous piéger plus tard.
   ========================================================================= */

/* --- Pont vers les variables globales de Divi --------------------------- */

/* Le site existant ne connaît pas nos classes : ses modules sont peints avec
   les « couleurs globales » de Divi (les variables `--gcid-…`) et ses polices
   avec `--et_global_*`. Sans ce pont, activer le thème enfant ne changerait la
   couleur que des blocs déjà refaits, et l'ancien vert cohabiterait avec le
   nouveau — un écart de deux points de teinte, invisible isolément, très
   visible côté à côté.
   On rebranche donc les variables de Divi sur nos jetons. Un module peint en
   « vert de la marque » dans le constructeur suit désormais `--ucp-forest`,
   sans qu'on ait à rouvrir une seule page.

   `:root:root` au lieu de `:root` : Divi déclare ces variables dans une balise
   <style> insérée dans le <head>, donc APRÈS notre feuille. À spécificité
   égale, le dernier arrivé gagne. Répéter le sélecteur double sa spécificité
   et nous fait passer devant — même procédé que `.ucp-btn.ucp-btn` plus bas,
   et toujours sans `!important`.

   Les identifiants sont ceux de l'export réel du site. Si une couleur globale
   est ajoutée un jour dans Divi, elle apparaîtra ici sous forme d'un nouveau
   `--gcid-…` à rebrancher (visible dans le code source d'une page). */
:root:root {
	/* Les trois couleurs de marque créées à la main dans Divi. */
	--gcid-6b5ee841-baf6-4126-949f-4c79d7f10130: var(--ucp-forest);   /* vert   */
	--gcid-e5288cac-7531-4886-94a8-3214a990522b: var(--ucp-cream);    /* crème  */
	--gcid-a1ea5ebf-c0a9-4cdc-9f7b-bb2349a290be: var(--ucp-night);    /* noir   */

	/* Les cinq couleurs livrées par défaut avec Divi (bleu pâle, jaune vif…).
	   Peu utilisées, mais laissées telles quelles elles ressortiraient au
	   premier module ajouté à la va-vite. On les ramène dans la palette. */
	--gcid-primary-color:   var(--ucp-forest);
	--gcid-secondary-color: var(--ucp-gold);
	--gcid-heading-color:   var(--ucp-ink);
	--gcid-body-color:      var(--ucp-ink);
	--gcid-link-color:      var(--ucp-bark);

	/* Les trois dernières couleurs globales sont des transparences neutres
	   (blanc 75 %, blanc 20 %, noir 20 %) : elles servent de voiles au-dessus
	   des images. Aucune identité de marque là-dedans, on n'y touche pas. */

	/* Typographie. Divi charge Poppins et Open Sans depuis Google Fonts ; la
	   maquette, elle, est en Helvetica Neue. Le chargement lui-même est coupé
	   dans functions.php, ces deux lignes évitent que les modules réclament
	   une police absente. */
	--et_global_heading_font: var(--ucp-font-sans);
	--et_global_body_font:    var(--ucp-font-sans);
}


/* --- Fond par défaut des sections --------------------------------------- */

/* Divi peint toutes ses sections en blanc. La maquette, elle, respire sur un
   fond crème : sans cette règle, le `background-color` posé sur <body> ne se
   verrait jamais, masqué par les sections.

   Ici, et contrairement au reste de cette section, PAS de `body.ucp` : le
   sélecteur doit peser exactement le même poids que celui de Divi (`0,1,0`).
   C'est ce qui le place au bon endroit dans la pile :
     · il bat le `.et_pb_section { background:#fff }` du thème parent, puisque
       notre feuille est chargée après la sienne ;
     · il s'efface devant le `.et_pb_section_3 { background:… }` qu'écrit le
       constructeur quand on a choisi une couleur à la main, puisque ce CSS-là
       est imprimé dans le <head> après nos feuilles.
   Une section volontairement colorée dans Divi garde donc sa couleur. Ajouter
   `body.ucp` ici les écraserait toutes d'un coup.

   Pour un blanc voulu sans passer par le constructeur : `ucp-section--alt`. */
.et_pb_section {
	background-color: var(--ucp-bg);
}


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

body.ucp #page-container .et_pb_button.ucp-btn,
body.ucp .et_pb_button.ucp-btn,
.ucp-btn.ucp-btn {
	display: inline-block;
	padding: 17px 32px;
	border: 0;
	border-radius: var(--ucp-radius);
	background-color: var(--ucp-accent);
	color: var(--ucp-night);
	font-family: var(--ucp-font-sans);
	font-size: var(--ucp-fs-xs);
	font-weight: var(--ucp-fw-bold);
	line-height: 1.2;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--ucp-transition), color var(--ucp-transition), transform var(--ucp-transition);
}

body.ucp #page-container .et_pb_button.ucp-btn:hover,
body.ucp .et_pb_button.ucp-btn:hover,
.ucp-btn.ucp-btn:hover {
	background-color: var(--ucp-accent-soft);
	color: var(--ucp-night);
	transform: translateY(-1px);
}

/* Divi colle une flèche en `:after` sur ses boutons au survol. Elle casse
   notre lettrage espacé : on la neutralise proprement. */
body.ucp .et_pb_button.ucp-btn::after,
body.ucp .et_pb_button.ucp-btn::before {
	content: none;
	display: none;
}

/* Variante sombre — le bouton de l'en-tête. */
body.ucp #page-container .et_pb_button.ucp-btn--dark,
body.ucp .et_pb_button.ucp-btn--dark,
.ucp-btn--dark.ucp-btn--dark {
	background-color: var(--ucp-night);
	color: var(--ucp-cream);
	padding: 12px 22px;
	font-size: var(--ucp-fs-eyebrow);
	letter-spacing: 0.16em;
}

body.ucp #page-container .et_pb_button.ucp-btn--dark:hover,
body.ucp .et_pb_button.ucp-btn--dark:hover,
.ucp-btn--dark.ucp-btn--dark:hover {
	background-color: var(--ucp-forest);
	color: var(--ucp-accent);
}

/* Variante fantôme — le second CTA du hero, souligné d'un filet doré. */
body.ucp #page-container .et_pb_button.ucp-btn--ghost,
body.ucp .et_pb_button.ucp-btn--ghost,
.ucp-btn--ghost.ucp-btn--ghost {
	background-color: transparent;
	color: var(--ucp-cream);
	padding: 17px 0;
	border-bottom: 1px solid rgba(212, 175, 55, 0.55);
	font-weight: var(--ucp-fw-semi);
}

body.ucp #page-container .et_pb_button.ucp-btn--ghost:hover,
body.ucp .et_pb_button.ucp-btn--ghost:hover,
.ucp-btn--ghost.ucp-btn--ghost:hover {
	background-color: transparent;
	color: var(--ucp-accent);
	border-bottom-color: var(--ucp-accent);
	transform: none;
}

/* Variante marque — fond vert forêt, texte crème. */
body.ucp #page-container .et_pb_button.ucp-btn--brand,
body.ucp .et_pb_button.ucp-btn--brand,
.ucp-btn--brand.ucp-btn--brand {
	background-color: var(--ucp-brand);
	color: var(--ucp-cream);
}

body.ucp #page-container .et_pb_button.ucp-btn--brand:hover,
body.ucp .et_pb_button.ucp-btn--brand:hover,
.ucp-btn--brand.ucp-btn--brand:hover {
	background-color: var(--ucp-brand-hover);
	color: var(--ucp-accent);
}

/* Bouton pleine largeur — utile dans la colonne latérale d'une fiche séjour. */
.ucp-btn--block.ucp-btn--block {
	display: block;
	width: 100%;
}


/* --- Contenu collé dans un module « Titre » ------------------------------ */

/* Le pied de page et plusieurs blocs du site ont été montés en collant des
   colonnes entières dans des modules Titre. Divi les enveloppe alors dans un
   <h2>, et on se retrouve avec des paragraphes et des listes à l'intérieur
   d'un titre :

       <h2 class="et_pb_module_header">
         <p class="footer-col-title">Votre agence</p>
         <p class="footer-address">2 rue Gabriel Péri…</p>
       </h2>

   Ces paragraphes n'ont pas de graisse propre : ils héritent donc du 800 du
   titre. D'où un pied de page entièrement en gras, où le doré sur vert foncé
   à 13 px finit par baver — ce que l'œil lit comme du flou plus que comme du
   gras.

   On rend ici aux éléments de bloc leur graisse et leur interlettrage normaux.
   Les enfants qui portent déjà un style en ligne gardent le leur : on ne
   corrige que ce qui a fuité.

   Correctif de transition. La vraie réparation est de remonter ces blocs en
   modules Texte, où un paragraphe est un paragraphe. */
.et_pb_module_header p,
.et_pb_module_header ul,
.et_pb_module_header ol,
.et_pb_module_header li,
.et_pb_module_header span:not([style*="font-weight"]) {
	font-weight: var(--ucp-fw-normal);
	letter-spacing: normal;
	line-height: var(--ucp-lh-body);
}

/* Sauf les intitulés de colonne, qui sont bien des titres, eux. */
.et_pb_module_header .footer-col-title {
	font-weight: var(--ucp-fw-bold);
	letter-spacing: var(--ucp-ls-eyebrow);
}


/* --- Sections et lignes ------------------------------------------------- */

/* Divi applique 4% de padding vertical sur chaque section, ce qui donne un
   rythme qui varie avec la largeur de l'écran. On fixe notre propre rythme,
   identique partout, en gardant la marge latérale fluide.

   Chaque règle est déclarée deux fois : une version nue, qui marche sur un
   <section> écrit à la main dans un module Code, et une version qualifiée par
   `.et_pb_section`, assez spécifique pour battre le CSS de Divi quand la
   classe est posée sur une vraie section du constructeur. Les grouper évite
   de dupliquer les valeurs — chaque sélecteur garde sa propre spécificité. */
.ucp-section,
body.ucp .et_pb_section.ucp-section {
	padding-top: var(--ucp-section-y);
	padding-bottom: var(--ucp-section-y);
	padding-left: var(--ucp-gutter);
	padding-right: var(--ucp-gutter);
	background-color: var(--ucp-bg);
}

.ucp-section--alt,
body.ucp .et_pb_section.ucp-section--alt   { background-color: var(--ucp-bg-alt); }

.ucp-section--dark,
body.ucp .et_pb_section.ucp-section--dark  { background-color: var(--ucp-bg-dark); }

.ucp-section--brand,
body.ucp .et_pb_section.ucp-section--brand { background-color: var(--ucp-bg-brand); }

.ucp-section--flush,
body.ucp .et_pb_section.ucp-section--flush { padding-top: 0; padding-bottom: 0; }

/* Largeurs de contenu. À poser sur une Ligne Divi (onglet Avancé). */
.ucp-row,
body.ucp .et_pb_row.ucp-row         { width: 100%; max-width: var(--ucp-max);        margin: 0 auto; padding: 0; }

.ucp-row--narrow,
body.ucp .et_pb_row.ucp-row--narrow { width: 100%; max-width: var(--ucp-max-narrow); margin: 0 auto; padding: 0; }

.ucp-row--text,
body.ucp .et_pb_row.ucp-row--text   { width: 100%; max-width: var(--ucp-max-text);   margin: 0 auto; padding: 0; }


/* =========================================================================
   UTILITAIRES
   Petites classes à poser dans le champ « Classe CSS » d'un module Divi.
   ========================================================================= */

/* `:where()` annule la spécificité de ce qu'il contient. Sans lui,
   `.ucp-on-dark p` (deux classes) écraserait `.ucp-guarantee__name` (une
   seule) et le nom de la garantie sortirait à 72 % d'opacité au lieu du crème
   plein. Avec, l'utilitaire ne pèse qu'un élément : il habille ce qui n'a pas
   de composant, et s'efface dès qu'un composant a son mot à dire. */
.ucp-on-dark                { color: var(--ucp-text-invert-dim); }
:where(.ucp-on-dark) p,
:where(.ucp-on-dark) li     { color: var(--ucp-text-invert-dim); }
:where(.ucp-on-dark) h1,
:where(.ucp-on-dark) h2,
:where(.ucp-on-dark) h3,
:where(.ucp-on-dark) h4,
:where(.ucp-on-dark) strong { color: var(--ucp-text-invert); }
:where(.ucp-on-dark) a      { color: var(--ucp-accent); }

.ucp-center      { text-align: center; }
.ucp-center-x    { margin-left: auto; margin-right: auto; }

.ucp-serif       { font-family: var(--ucp-font-serif); font-style: italic; }
.ucp-gold        { color: var(--ucp-accent); }
.ucp-brand-color { color: var(--ucp-brand); }

/* Masque visuellement sans retirer du DOM : pour les libellés de champs que
   l'on veut annoncer aux lecteurs d'écran sans les afficher. */
.ucp-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Respecte le réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
	body.ucp *,
	body.ucp *::before,
	body.ucp *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}