/*
 * widget-devis/mas-brand-cta-fix.css — [barbara-raccordement-devis-e1438, complément couleurs, 06/09/2026]
 *
 * POURQUOI CE FICHIER EXISTE (à lire avant de le toucher). Le thème réel du site
 * (Themes/MoveAndStudyCore/Styles/MoveAndStudyCore.css, servi par alias depuis la copie locale
 * ancien-serveur, LECTURE SEULE — voir commentaire E837 dans le nginx de sejours.selvix.ch) contient
 * 8 règles qui codent EN DUR deux couleurs (#0E8978 vert sarcelle, #173D42 vert-noir foncé) sur DEUX
 * familles de composants au lieu de lire les variables de marque du thème
 * (--mas-color-coral/-dark-action/-ink déjà définies et déjà utilisées PARTOUT AILLEURS dans ce
 * même fichier pour des composants équivalents — ex. `.mas-action-link--primary`,
 * `.mas-school-tabs__tab.is-active`, `.mas-contact-card__eyebrow`). Preuve (grep sur le fichier réel
 * servi, 06/09/2026) :
 *   .mas-school-booking-cta__panel::before      { background: #0E8978; }   <- liseré bandeau CTA école
 *   .mas-school-booking-cta__eyebrow            { color: #0E8978; }        <- eyebrow bandeau CTA école
 *   .mas-school-booking-cta__button--primary    { background/border: #173D42; }
 *   .mas-school-booking-cta__button--primary:hover/:focus-visible { background/border: #0E8978; }
 *   .mas-booking-hero__copy h2                  { color: #0E8978; }        <- titre hero booking.html
 *   .mas-booking-hero__panel                    { background: #173D42; }   <- panneau hero booking.html
 *   .mas-booking-workspace__eyebrow             { color: #0E8978; }        <- eyebrow zone formulaire
 *   .mas-booking-school-context__copy           { border-left: 5px solid #0E8978; }
 *   .mas-booking-school-context__eyebrow        { color: #0E8978; }
 * Ce fichier ne vit PAS dans le dépôt chat-api (R10) et n'est PAS écrit par ce chantier — il est
 * hors périmètre (R10/R14 : filesystem ancien-serveur, lecture seule). La correction se fait donc
 * par SURCHARGE : cette feuille, chargée APRÈS MoveAndStudyCore.css (même ordre que
 * `widget-devis/widget.css`, déjà monté ainsi par barbara-widget-sitegen-e1352), avec EXACTEMENT
 * les mêmes sélecteurs et AU MOINS la même spécificité — le dernier chargé gagne à spécificité
 * égale, aucun `!important` nécessaire. Correspond au régime R86 (modifier une règle existante =
 * accord explicite cas par cas) : l'accord est la mission elle-même (chef, 06/09/2026, complément
 * E1438 couleurs hors charte).
 *
 * PIÈGE VÉRIFIÉ EN NAVIGATEUR (pas supposé) : sur `booking.html`, deux eyebrows
 * (`.mas-booking-workspace__eyebrow`, `.mas-booking-school-context__eyebrow`) sont AUSSI ciblés par
 * une règle plus générique et PLUS SPÉCIFIQUE que la règle fautive elle-même
 * (`.mas-booking-workspace__header p` / `.mas-booking-school-context p`, 3 classes + 1 type = plus
 * spécifique que 3 classes seules) qui repeint en `--mas-color-muted`. Sans le sélecteur `p.` ajouté
 * ci-dessous (même spécificité que cette règle générique), notre surcharge aurait perdu le combat de
 * spécificité malgré un ordre de chargement postérieur — vérifié par inspection réelle de
 * `document.styleSheets` en Playwright, pas une hypothèse de lecture du CSS seul.
 *
 * MÉCANISME SUIVI, PAS INVENTÉ : mêmes variables, mêmes valeurs de repli littérales, que celles déjà
 * utilisées par `widget.css` et par le thème lui-même pour les composants CTA/panneaux existants.
 * Aucune variable `--mas-*` n'est redéfinie ici, seulement lue.
 */

/* ------------------------------------------------ pages école : bandeau CTA "Composer mon devis" */

.MoveAndStudyCore.MoveAndStudyCore-school .mas-school-booking-cta__panel::before {
    background: var(--mas-color-coral, #E56B62);
}

.MoveAndStudyCore.MoveAndStudyCore-school .mas-school-booking-cta__eyebrow {
    color: var(--mas-color-coral, #E56B62);
}

.MoveAndStudyCore.MoveAndStudyCore-school .mas-school-booking-cta__button--primary {
    color: var(--mas-color-surface, #ffffff);
    background: var(--mas-color-coral, #E56B62);
    border-color: transparent;
}

.MoveAndStudyCore.MoveAndStudyCore-school .mas-school-booking-cta__button--primary:hover,
.MoveAndStudyCore.MoveAndStudyCore-school .mas-school-booking-cta__button--primary:focus-visible {
    color: var(--mas-color-surface, #ffffff);
    background: var(--mas-color-coral, #E56B62);
    border-color: transparent;
    box-shadow: 0 16px 34px rgba(var(--mas-color-coral-rgb, 229, 107, 98), 0.3);
}

/* --------------------------------------------------------- booking.html : chrome autour du widget */

.MoveAndStudyCore.MoveAndStudyCore-booking .mas-booking-hero__copy h2 {
    color: var(--mas-color-ink, #2b3740);
}

.MoveAndStudyCore.MoveAndStudyCore-booking .mas-booking-hero__panel {
    background: var(--mas-color-dark-action, #4e5b64);
}

.MoveAndStudyCore.MoveAndStudyCore-booking p.mas-booking-workspace__eyebrow {
    color: var(--mas-color-coral, #E56B62);
}

.MoveAndStudyCore.MoveAndStudyCore-booking .mas-booking-school-context__copy {
    border-left-color: var(--mas-color-coral, #E56B62);
}

.MoveAndStudyCore.MoveAndStudyCore-booking p.mas-booking-school-context__eyebrow {
    color: var(--mas-color-coral, #E56B62);
}

/* -------------------------------------- pages école : photo sur la carte CTA (complément (2)) */

/* [E1438 complément (2)] École sélectionnée : la carte porte la MÊME photo que l'en-tête de la
   page — référence copiée du DOM par `mas-cta-photo.js` (variable `--mas-cta-photo`, jamais une
   seconde photo), voile en dégradé construit UNIQUEMENT à partir de `--mas-color-ink` (même
   variable que le titre de `.mas-school-booking-cta__copy h2` juste au-dessus dans ce fichier),
   jamais une couleur en dur. Sélecteur PORTÉ AU MÊME PRÉFIXE que la règle de fond du thème
   (`.MoveAndStudyCore.MoveAndStudyCore-school .mas-school-booking-cta__panel { background:
   linear-gradient(...) }`, 3 classes) + la classe modificatrice en plus : spécificité
   SUPÉRIEURE par construction, aucun `!important` nécessaire (même piège que documenté en tête de
   ce fichier — vérifié en navigateur avant livraison, pas supposé). */
.MoveAndStudyCore.MoveAndStudyCore-school .mas-school-booking-cta__panel.mas-school-booking-cta__panel--photo {
    background-image:
        linear-gradient(135deg,
            color-mix(in srgb, var(--mas-color-ink, #2b3740) 22%, transparent) 0%,
            color-mix(in srgb, var(--mas-color-ink, #2b3740) 80%, transparent) 100%),
        var(--mas-cta-photo);
    background-size: cover;
    background-position: center;
}

/* Titre + corps (jamais l'eyebrow, qui GARDE le corail — déjà lisible sur le voile sombre
   ci-dessus, cf. règle `.mas-school-booking-cta__eyebrow` plus haut dans ce fichier) : la surface
   (blanc du thème) remplace l'encre foncée, illisible sur une photo. */
.MoveAndStudyCore.MoveAndStudyCore-school .mas-school-booking-cta__panel--photo .mas-school-booking-cta__copy h2,
.MoveAndStudyCore.MoveAndStudyCore-school .mas-school-booking-cta__panel--photo .mas-school-booking-cta__copy p:not(.mas-school-booking-cta__eyebrow) {
    color: var(--mas-color-surface, #ffffff);
}

/* [E3435] Lien « Tous les prix à <ville> » (`<p class="mas-prix-lien">`, posé par la fabrication des pages Prix, E3348/E3356) dans ce même bandeau. RÈGLE NEUVE —
   aucune règle existante n'est modifiée. Défaut mesuré en navigateur réel le 24/09/2026 (Linguaviva et CES Dublin, bureau et mobile) : le lien garde le vert du thème
   alors que le bandeau est une PHOTO sous voile sombre — contraste calculé sur les pixels réels derrière le lien : 1,0 à 3,0 pour un minimum de 4,5 (illisible). La
   règle ci-dessus ne repeint que les <p> (blanc), jamais les liens qu'ils contiennent. Remède par le FOND, pas par la couleur seule : une pastille de la surface du
   thème + l'encre du thème (variables déjà utilisées plus haut, aucune couleur en dur) — lisible quelle que soit la photo, sans dépendre de la force du voile.
   Ne joue QUE sur le bandeau à photo (`--photo`) : sans photo, le bandeau reste clair et le lien garde son style d'origine. */
.MoveAndStudyCore.MoveAndStudyCore-school .mas-school-booking-cta__panel--photo .mas-prix-lien a {
    display: inline-block;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    background: var(--mas-color-surface, #ffffff);
    color: var(--mas-color-ink, #2b3740);
    font-weight: 600;
    text-decoration: none;
}

.MoveAndStudyCore.MoveAndStudyCore-school .mas-school-booking-cta__panel--photo .mas-prix-lien a:hover,
.MoveAndStudyCore.MoveAndStudyCore-school .mas-school-booking-cta__panel--photo .mas-prix-lien a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ------------------------- booking.html : photo sur la carte "Demande de devis" (e1493) */

/* [e1493] Carte `.mas-booking-hero__visual` (colonne gauche du hero de `booking.html`, section
   « Demande de devis ou inscription ») : posée par `mas-booking-hero-photo.js`, MÊME mécanisme de
   principe que le complément (2) ci-dessus (voile en dégradé construit uniquement à partir de
   `--mas-color-ink`, jamais une couleur en dur ; variable `--mas-cta-photo` posée en JS, jamais
   une seconde photo). École connue : photo de SA page reprise par lecture du referrer. Aucune
   école connue (ou photo non résolue) : visuel générique déjà utilisé par le widget lui-même dans
   son propre cas générique (`widget.css` `.sdw-status--cta-photo`), jamais un nouvel asset.
   Sélecteur porté au MÊME PRÉFIXE que la règle de fond du thème
   (`.MoveAndStudyCore.MoveAndStudyCore-booking .mas-booking-hero__visual`, 3 classes) + la classe
   modificatrice en plus : spécificité SUPÉRIEURE par construction, aucun `!important`
   nécessaire — même piège de spécificité que documenté en tête de ce fichier, vérifié en
   navigateur avant livraison (voir `ETAT-barbara-finition-booking-html-e1493.md`). */
.MoveAndStudyCore.MoveAndStudyCore-booking .mas-booking-hero__visual.mas-booking-hero__visual--photo {
    background-image:
        linear-gradient(135deg,
            color-mix(in srgb, var(--mas-color-ink, #2b3740) 22%, transparent) 0%,
            color-mix(in srgb, var(--mas-color-ink, #2b3740) 80%, transparent) 100%),
        var(--mas-cta-photo);
    background-size: cover;
    background-position: center;
}

/* h1 + h2 (le seul contenu de `.mas-booking-hero__copy` sur cette carte, aucun eyebrow ici) :
   la surface (blanc du thème) remplace l'encre foncée, illisible sur une photo. */
.MoveAndStudyCore.MoveAndStudyCore-booking .mas-booking-hero__visual--photo .mas-booking-hero__copy h1,
.MoveAndStudyCore.MoveAndStudyCore-booking .mas-booking-hero__visual--photo .mas-booking-hero__copy h2 {
    color: var(--mas-color-surface, #ffffff);
}