/*
 * Blocs de l'éditeur.
 *
 * Deux sujets : les couleurs et les tailles de texte que l'éditeur propose, et
 * l'apparence des blocs de mise en page.
 *
 * Les couleurs de la palette ne portent aucune valeur. Chacune renvoie à la
 * variable du rôle visuel correspondant : une couleur choisie dans l'éditeur
 * suit donc le mode sombre, le mode clair et la préférence de contraste
 * renforcé, que la table des couleurs du thème écrit sur la racine du
 * document.
 *
 * Les variables de préréglage sont redéfinies en premier : le cœur de
 * WordPress compose à partir de la palette déclarée des règles qui les lisent,
 * et les classes posées par l'éditeur rendent alors la couleur du thème. Les
 * règles de classe qui suivent tiennent le même rôle là où le cœur n'en
 * compose aucune. Ces classes sont produites par l'éditeur, non par les
 * gabarits du thème.
 *
 * Les variables de couleur sont employées sans valeur de repli : le thème les
 * écrit sur la racine du document des deux côtés du site, celle de la page
 * comme celle du cadre d'édition. Les autres variables portent la leur, car la
 * feuille principale reste hors du cadre d'édition.
 */


/* =============================================================
   Couleurs de la palette
   ============================================================= */

:root {
    --wp--preset--color--discovery-fond: var(--discovery-color-background);
    --wp--preset--color--discovery-texte: var(--discovery-color-text);
    --wp--preset--color--discovery-surface: var(--discovery-color-surface);
    --wp--preset--color--discovery-bordure: var(--discovery-color-border);
    --wp--preset--color--discovery-attenue: var(--discovery-color-muted);
    --wp--preset--color--discovery-lien: var(--discovery-color-link);
    --wp--preset--color--discovery-accent: var(--discovery-color-accent);
    --wp--preset--color--discovery-erreur: var(--discovery-color-erreur);
    --wp--preset--color--discovery-succes: var(--discovery-color-succes);
    --wp--preset--color--discovery-info: var(--discovery-color-info);
}

/* Fond de la page */
.has-discovery-fond-color {
    color: var(--discovery-color-background);
}

.has-discovery-fond-background-color {
    background-color: var(--discovery-color-background);
}

.has-discovery-fond-border-color {
    border-color: var(--discovery-color-background);
}

/* Texte de la page */
.has-discovery-texte-color {
    color: var(--discovery-color-text);
}

.has-discovery-texte-background-color {
    background-color: var(--discovery-color-text);
}

.has-discovery-texte-border-color {
    border-color: var(--discovery-color-text);
}

/* Surface des panneaux */
.has-discovery-surface-color {
    color: var(--discovery-color-surface);
}

.has-discovery-surface-background-color {
    background-color: var(--discovery-color-surface);
}

.has-discovery-surface-border-color {
    border-color: var(--discovery-color-surface);
}

/* Bordure des composants */
.has-discovery-bordure-color {
    color: var(--discovery-color-border);
}

.has-discovery-bordure-background-color {
    background-color: var(--discovery-color-border);
}

.has-discovery-bordure-border-color {
    border-color: var(--discovery-color-border);
}

/* Texte atténué */
.has-discovery-attenue-color {
    color: var(--discovery-color-muted);
}

.has-discovery-attenue-background-color {
    background-color: var(--discovery-color-muted);
}

.has-discovery-attenue-border-color {
    border-color: var(--discovery-color-muted);
}

/* Lien */
.has-discovery-lien-color {
    color: var(--discovery-color-link);
}

.has-discovery-lien-background-color {
    background-color: var(--discovery-color-link);
}

.has-discovery-lien-border-color {
    border-color: var(--discovery-color-link);
}

/* Accent */
.has-discovery-accent-color {
    color: var(--discovery-color-accent);
}

.has-discovery-accent-background-color {
    background-color: var(--discovery-color-accent);
}

.has-discovery-accent-border-color {
    border-color: var(--discovery-color-accent);
}

/* Message d'erreur */
.has-discovery-erreur-color {
    color: var(--discovery-color-erreur);
}

.has-discovery-erreur-background-color {
    background-color: var(--discovery-color-erreur);
}

.has-discovery-erreur-border-color {
    border-color: var(--discovery-color-erreur);
}

/* Message de succès */
.has-discovery-succes-color {
    color: var(--discovery-color-succes);
}

.has-discovery-succes-background-color {
    background-color: var(--discovery-color-succes);
}

.has-discovery-succes-border-color {
    border-color: var(--discovery-color-succes);
}

/* Message d'information */
.has-discovery-info-color {
    color: var(--discovery-color-info);
}

.has-discovery-info-background-color {
    background-color: var(--discovery-color-info);
}

.has-discovery-info-border-color {
    border-color: var(--discovery-color-info);
}


/* =============================================================
   Tailles de texte
   =============================================================

   L'échelle est celle de la feuille principale : chaque taille est fluide et
   s'ajuste à la largeur de la fenêtre, sans dépendre d'un agrandissement du
   navigateur. */

:root {
    --wp--preset--font-size--discovery-sm: var(--discovery-text-sm, clamp(0.875rem, 0.80rem + 0.30vw, 1rem));
    --wp--preset--font-size--discovery-base: var(--discovery-text-base, clamp(1rem, 0.92rem + 0.40vw, 1.25rem));
    --wp--preset--font-size--discovery-lg: var(--discovery-text-lg, clamp(1.125rem, 1.00rem + 0.60vw, 1.375rem));
    --wp--preset--font-size--discovery-xl: var(--discovery-text-xl, clamp(1.25rem, 1.05rem + 1.00vw, 1.75rem));
    --wp--preset--font-size--discovery-2xl: var(--discovery-text-2xl, clamp(1.50rem, 1.20rem + 1.50vw, 2.25rem));
    --wp--preset--font-size--discovery-3xl: var(--discovery-text-3xl, clamp(1.875rem, 1.40rem + 2.40vw, 3rem));
}

.has-discovery-sm-font-size {
    font-size: var(--discovery-text-sm, clamp(0.875rem, 0.80rem + 0.30vw, 1rem));
}

.has-discovery-base-font-size {
    font-size: var(--discovery-text-base, clamp(1rem, 0.92rem + 0.40vw, 1.25rem));
}

.has-discovery-lg-font-size {
    font-size: var(--discovery-text-lg, clamp(1.125rem, 1.00rem + 0.60vw, 1.375rem));
}

.has-discovery-xl-font-size {
    font-size: var(--discovery-text-xl, clamp(1.25rem, 1.05rem + 1.00vw, 1.75rem));
}

.has-discovery-2xl-font-size {
    font-size: var(--discovery-text-2xl, clamp(1.50rem, 1.20rem + 1.50vw, 2.25rem));
}

.has-discovery-3xl-font-size {
    font-size: var(--discovery-text-3xl, clamp(1.875rem, 1.40rem + 2.40vw, 3rem));
}

/* =============================================================
   Bouton
   =============================================================

   Le bouton d'un contenu reprend l'apparence des boutons du thème : fond des
   surfaces, bordure atténuée, qui atteint 8,79:1 sur cette surface et 10,02:1
   sur le fond de page. La cible fait au moins 44 pixels dans les deux sens,
   seuil du critère WCAG 2.5.5 et taille confortable au doigt comme au
   pointeur. L'anneau de focus clavier vient de la règle globale du thème.

   Chaque règle est écrite deux fois : une fois à une classe, qui sert le site,
   et une fois portée par le cadre d'édition. Sur le site, la feuille du thème
   est lue après celle du cœur de WordPress et l'emporte à force égale, ce qui
   laisse un design compagnon reprendre ces boutons avec ses propres règles à
   une classe. Dans le cadre d'édition, le cœur pose sa couleur de fond après
   la feuille du thème : la forme portée par le cadre l'emporte alors, sans
   recourir au mot-clé important. */

.wp-block-button__link,
.wp-element-button,
.editor-styles-wrapper .wp-block-button__link,
.editor-styles-wrapper .wp-element-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--discovery-space-2, 0.5rem);
    min-inline-size: var(--discovery-cible-min, 2.75rem);
    min-block-size: var(--discovery-cible-min, 2.75rem);
    padding: var(--discovery-space-2, 0.5rem) var(--discovery-space-4, 1rem);
    color: var(--discovery-color-text);
    font-weight: var(--discovery-weight-semibold, 600);
    text-decoration: none;
    background-color: var(--discovery-color-surface);
    border: 1px solid var(--discovery-color-muted);
    border-radius: var(--discovery-radius-sm, 0.25rem);
}

.wp-block-button__link:hover,
.wp-element-button:hover,
.editor-styles-wrapper .wp-block-button__link:hover,
.editor-styles-wrapper .wp-element-button:hover {
    border-color: var(--discovery-color-link);
}

/*
 * Style en contour : le fond disparaît et la bordure porte seule la limite du
 * bouton. Elle emploie la couleur du texte, qui atteint 21:1 sur le fond de
 * page et 18,42:1 sur une surface.
 */
.wp-block-button.is-style-outline > .wp-block-button__link,
.editor-styles-wrapper .wp-block-button.is-style-outline > .wp-block-button__link {
    color: var(--discovery-color-text);
    background-color: transparent;
    border-color: var(--discovery-color-text);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-button.is-style-outline > .wp-block-button__link:hover {
    border-color: var(--discovery-color-link);
}

/*
 * Style discret du thème : le bouton se réduit à son intitulé souligné, pour
 * une action secondaire placée près d'une action principale.
 */
.wp-block-button.is-style-discovery-discret > .wp-block-button__link,
.editor-styles-wrapper .wp-block-button.is-style-discovery-discret > .wp-block-button__link {
    min-inline-size: 0;
    padding-inline: 0;
    color: var(--discovery-color-link);
    text-decoration: underline;
    background-color: transparent;
    border-color: transparent;
}

.wp-block-button.is-style-discovery-discret > .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-button.is-style-discovery-discret > .wp-block-button__link:hover {
    color: var(--discovery-color-link-hover);
}


/* =============================================================
   Groupe, colonnes, média et texte
   ============================================================= */

/*
 * Un groupe qui porte un fond reçoit une marge intérieure : son fond se
 * distingue alors de celui de la page, et son texte ne touche pas sa limite.
 */
.wp-block-group.has-background {
    padding: var(--discovery-space-5, 1.25rem);
    border-radius: var(--discovery-radius-md, 0.5rem);
}

.wp-block-columns {
    gap: var(--discovery-space-6, 1.5rem);
}

/*
 * Une colonne qui porte un fond reçoit la même marge intérieure qu'un groupe,
 * pour la même raison.
 */
.wp-block-column.has-background {
    padding: var(--discovery-space-5, 1.25rem);
    border-radius: var(--discovery-radius-md, 0.5rem);
}

.wp-block-media-text {
    gap: var(--discovery-space-6, 1.5rem);
}


/* =============================================================
   Couverture
   =============================================================

   Un texte posé sur une image ne tient aucun contraste par lui-même : l'image
   décide, et elle change d'une publication à l'autre. Un voile de la couleur
   de fond est donc posé entre l'image et le texte.

   L'opacité de 0,6 garantit le seuil dans le pire des cas : un voile noir à
   cette opacité sur une image entièrement blanche donne #666666, où le texte
   blanc du mode sombre atteint 5,74:1 ; un voile blanc sur une image
   entièrement noire donne #999999, où le texte #141414 du mode clair atteint
   6,47:1. Les deux dépassent les 4,5:1 du critère WCAG 1.4.3.

   Le voile s'ajoute à l'assombrissement que l'éditeur propose : le seuil est
   donc tenu quel que soit le réglage choisi dans l'éditeur. La variable permet
   à un site d'imposer sa propre opacité. */

.wp-block-cover,
.wp-block-cover-image {
    color: var(--discovery-color-text);
}

.wp-block-cover::after,
.wp-block-cover-image::after {
    position: absolute;
    inset: 0;
    background-color: var(--discovery-color-background);
    opacity: var(--discovery-couverture-voile, 0.6);
    pointer-events: none;
    content: "";
}

.wp-block-cover > .wp-block-cover__inner-container,
.wp-block-cover-image > .wp-block-cover__inner-container {
    position: relative;
    z-index: 1;
}


/* =============================================================
   Séparateur, espacement, citation
   ============================================================= */

/*
 * Le séparateur est un décor : le critère WCAG 1.4.11 ne lui impose aucun
 * seuil, et il emploie la couleur de bordure, qui atteint 4,62:1 sur le fond
 * de page.
 */
.wp-block-separator {
    color: var(--discovery-color-border);
    border-color: currentColor;
}

/*
 * L'espacement garde sa hauteur dans un conteneur en boîte flexible, où un
 * élément vide se réduit à rien.
 */
.wp-block-spacer {
    flex: 0 0 auto;
}

.wp-block-quote {
    padding-inline-start: var(--discovery-space-4, 1rem);
    border-inline-start: 4px solid var(--discovery-color-border);
}

.wp-block-quote cite {
    display: block;
    margin-block-start: var(--discovery-space-2, 0.5rem);
    color: var(--discovery-color-muted);
    font-size: var(--discovery-text-sm, clamp(0.875rem, 0.80rem + 0.30vw, 1rem));
    font-style: normal;
}


/* =============================================================
   Image arrondie
   ============================================================= */

/*
 * Style de bloc du thème : l'image reçoit l'arrondi des panneaux du thème.
 */
.wp-block-image.is-style-discovery-arrondie img {
    border-radius: var(--discovery-radius-md, 0.5rem);
}


/* =============================================================
   Texte posé sur une couleur de la palette
   =============================================================

   Une couleur de la palette peut servir de fond à un bloc. Le texte qui s'y
   pose vient alors du mode, et sur une couleur vive il n'atteint pas son
   seuil : le texte du mode sombre tient 2,10 sur l'accent, et 1,00 sous
   contraste renforcé, où l'accent devient blanc.

   Chaque fond de palette porte donc sa couleur appariée, celle des deux
   extrêmes du mode qui contraste le plus avec lui. Le choix est mesuré par le
   thème, et le rapport obtenu vaut au moins 4,54 sur les dix rôles et dans les
   quatre tables de couleurs.

   La règle ne s'applique qu'en l'absence de couleur de texte choisie dans
   l'éditeur : une couleur posée à la main reste celle que la personne a
   voulue, et la description de l'apparence en donne le rapport mesuré.

   Les liens posés sur un de ces fonds héritent de la couleur du texte qui les
   entoure : une couleur de lien calculée pour le fond de la page ne tient
   aucun seuil sur une couleur vive. Le soulignement reste le signe du lien,
   comme l'exige le critère WCAG 1.4.1, qui interdit de porter une information
   par la seule couleur. Un bouton garde ses propres couleurs. */

/* Fond de la page */
.has-discovery-fond-background-color:not(.has-text-color) {
    color: var(--discovery-sur-fond);
}

/* Texte de la page */
.has-discovery-texte-background-color:not(.has-text-color) {
    color: var(--discovery-sur-texte);
}

/* Surface des panneaux */
.has-discovery-surface-background-color:not(.has-text-color) {
    color: var(--discovery-sur-surface);
}

/* Bordure des composants */
.has-discovery-bordure-background-color:not(.has-text-color) {
    color: var(--discovery-sur-bordure);
}

/* Texte atténué */
.has-discovery-attenue-background-color:not(.has-text-color) {
    color: var(--discovery-sur-attenue);
}

/* Lien */
.has-discovery-lien-background-color:not(.has-text-color) {
    color: var(--discovery-sur-lien);
}

/* Accent */
.has-discovery-accent-background-color:not(.has-text-color) {
    color: var(--discovery-sur-accent);
}

/* Message d'erreur */
.has-discovery-erreur-background-color:not(.has-text-color) {
    color: var(--discovery-sur-erreur);
}

/* Message de succès */
.has-discovery-succes-background-color:not(.has-text-color) {
    color: var(--discovery-sur-succes);
}

/* Message d'information */
.has-discovery-info-background-color:not(.has-text-color) {
    color: var(--discovery-sur-info);
}

.has-discovery-fond-background-color a:not(.wp-element-button),
.has-discovery-texte-background-color a:not(.wp-element-button),
.has-discovery-surface-background-color a:not(.wp-element-button),
.has-discovery-bordure-background-color a:not(.wp-element-button),
.has-discovery-attenue-background-color a:not(.wp-element-button),
.has-discovery-lien-background-color a:not(.wp-element-button),
.has-discovery-accent-background-color a:not(.wp-element-button),
.has-discovery-erreur-background-color a:not(.wp-element-button),
.has-discovery-succes-background-color a:not(.wp-element-button),
.has-discovery-info-background-color a:not(.wp-element-button) {
    color: inherit;
    text-decoration: underline;
}