/*
 * widget-devis/widget.css — [barbara-widget-front-e1351, 04/09/2026]
 * FEUILLE DE STYLE DU SEUL COMPOSANT « widget de devis ». Point d'entrée FIGÉ (référencé par
 * l'intégration sitegen sans coordination live) : ce nom de fichier ne change pas.
 *
 * DOCTRINE RESPECTÉE, EN UN PARAGRAPHE. La règle du site est « aucune règle CSS créée hors
 * exceptions nommées », et depuis le 30/08/2026 elle couvre AUSSI la modification d'une règle
 * existante. Cette feuille ne modifie AUCUNE règle existante et n'ajoute AUCUN sélecteur en dehors
 * du composant : TOUS les sélecteurs ci-dessous sont préfixés `.sdw-`, aucun ne cible un élément
 * nu, une classe du thème, `:root`, `html` ou `body`. Aucune variable `--mas-*` n'est REDÉFINIE :
 * elles sont seulement LUES, avec une valeur de repli littérale prise au thème
 * (`Themes/MoveAndStudyCore/Styles/Global.css:6-23`) pour que le widget reste lisible s'il est
 * monté sur une page qui ne charge pas le thème.
 *
 * TOKENS LUS AU THÈME (jamais redéfinis) : --mas-color-text/-muted/-link/-link-hover/-surface/
 * -background/-border/-quiet/-dark-action/-coral/-coral-rgb/-green/-gold/-ink, --mas-font-base.
 * Les valeurs de repli sont des COPIES de celles du thème, pas des choix nouveaux.
 * `-ink` ajouté par le complément (2) E1438 (photo de fond sur `.sdw-status--cta-photo`, voile en
 * dégradé — même variable que la carte CTA photo des pages école, `mas-brand-cta-fix.css`).
 */

/* ---------------------------------------------------------------- coquille */

.sdw {
    box-sizing: border-box;
    max-width: 56rem;
    margin: 0 auto;
    padding: 1.5rem;
    color: var(--mas-color-text, #2b3740);
    font-family: var(--mas-font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
    font-size: 1rem;
    line-height: 1.6;
    background: var(--mas-color-surface, #ffffff);
    border: 1px solid var(--mas-color-border, #d8dee4);
    border-radius: 12px;
}

.sdw *,
.sdw *::before,
.sdw *::after {
    box-sizing: inherit;
}

.sdw-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------- en-tête et langue */

.sdw-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.sdw-header__title {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.3;
}

.sdw-header__subtitle {
    margin: 0.25rem 0 0;
    color: var(--mas-color-muted, #596874);
    font-size: 0.92rem;
}

.sdw-lang {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sdw-lang__label {
    color: var(--mas-color-muted, #596874);
    font-size: 0.85rem;
}

.sdw-lang__select {
    min-height: 2.4rem;
    padding: 0.35rem 0.6rem;
    color: inherit;
    font: inherit;
    font-size: 0.9rem;
    background: var(--mas-color-surface, #ffffff);
    border: 1px solid var(--mas-color-border, #d8dee4);
    border-radius: 8px;
}

/* Repli d'interface assumé et DIT (jamais une dégradation muette) : la langue choisie est bien
   transmise, seule la chrome du widget reste en anglais tant qu'elle n'est pas traduite. */
.sdw-lang__fallback {
    flex-basis: 100%;
    margin: 0.4rem 0 0;
    color: var(--mas-color-muted, #596874);
    font-size: 0.82rem;
}

/* ------------------------------------------------------------- fil d'étapes */

.sdw-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.sdw-steps__item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    color: var(--mas-color-muted, #596874);
    font-size: 0.85rem;
    background: var(--mas-color-quiet, #eaf0f2);
    border-radius: 999px;
}

.sdw-steps__item--current {
    color: #ffffff;
    background: var(--mas-color-dark-action, #4e5b64);
}

.sdw-steps__item--done {
    color: var(--mas-color-green, #6c8a53);
    background: rgba(108, 138, 83, 0.12);
}

.sdw-steps__rank {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ------------------------------------------------------------- formulaires */

.sdw-panel {
    display: block;
}

.sdw-panel__intro {
    margin: 0 0 1.1rem;
    color: var(--mas-color-muted, #596874);
    font-size: 0.94rem;
}

.sdw-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.sdw-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sdw-field--full {
    grid-column: 1 / -1;
}

/* [barbara-qualite-devis-e1529, point 4] Champ mal aligné signalé par le pilote (« l'âge à droite
   du vide ») : sur écran large, `.sdw-grid` passe à 2 colonnes (règle plus bas) -- un nombre IMPAIR
   de champs pleine-largeur exceptés laisse alors un champ SEUL dans sa ligne, avec une colonne vide
   à côté de lui. Constat par lecture de code (aucun rendu possible dans cet environnement, cf.
   rapport) : `renderForm()` pose 5 champs normaux (durée, mode de date, date/mois, âge, nombre de
   personnes) puis un 6ᵉ en pleine largeur (besoin d'hébergement, déjà `.sdw-field--full`) -- le
   placement automatique de la grille CSS ne peut pas faire tenir ce 6ᵉ champ dans la ligne du 5ᵉ
   (« nombre de personnes ») puisque sa première colonne est déjà prise : il descend seul à la ligne
   suivante en pleine largeur, laissant « nombre de personnes » orphelin avec une colonne vide à côté.
   Même mécanique dans `renderCatalogue()` (école déjà connue) : un seul champ (formule) dans sa
   grille. DEUX règles GÉNÉRIQUES, aucun champ nommé en dur (R82), nouvelles uniquement, aucune
   existante modifiée (R86), inertes sur un compte pair ou en 1 colonne (mobile) :
     1. le DERNIER enfant d'une grille, à une position impaire, prend toute la largeur (grille à un
        seul champ, ou dont le dernier champ normal serait resté seul en fin de grille) ;
     2. un champ à position impaire IMMÉDIATEMENT SUIVI d'un champ pleine-largeur (`:has()`, support
        universel sur les navigateurs actuels) prend lui aussi toute la largeur -- exactement le cas
        « nombre de personnes » avant « besoin d'hébergement » ci-dessus.
   ⚠ La panne CSS confirmée par lecture de code touche le champ « nombre de personnes »
   (`numberOfPeople`), pas nommément l'âge (`participantAge`, toujours en 4ᵉ position, jamais seul) --
   même symptôme (un champ orphelin avec du vide à côté), position exacte différente du souvenir du
   pilote. Documenté au rapport, non corrigé silencieusement (R106).
   [barbara-css-has-degradation-e1593] Scindé en DEUX règles distinctes (comportement rendu
   STRICTEMENT identique sur tout navigateur supportant `:has()`) : la liste de sélecteurs séparée
   par virgule ci-dessous n'était PAS une « dégradation propre » comme l'affirmait ce commentaire --
   par la norme CSS, un sélecteur invalide (ici `:has()`, non supporté par certains navigateurs plus
   anciens) invalide TOUTE LA LISTE dans laquelle il apparaît, pas seulement lui-même. Sur un tel
   navigateur, la règle entière tombait, y compris le cas 1 (dernier enfant impair) qui n'a pourtant
   aucun besoin de `:has()` et corrige un cas réel à lui seul. Scindées, la règle 1 s'applique
   toujours sur un navigateur sans `:has()` ; seule la règle 2 est ignorée -- le seul cas non couvert
   redevient alors, précisément, celui qu'elle traitait (champ impair suivi d'un champ
   pleine-largeur). */
.sdw-grid > .sdw-field:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.sdw-grid > .sdw-field:nth-child(odd):has(+ .sdw-field--full) {
    grid-column: 1 / -1;
}

.sdw-field--spaced {
    margin-top: 1rem;
}

.sdw-field__label {
    font-size: 0.9rem;
    font-weight: 600;
}

.sdw-field__hint {
    color: var(--mas-color-muted, #596874);
    font-size: 0.82rem;
}

.sdw-field__required {
    color: var(--mas-color-coral, #E56B62);
}

.sdw-input,
.sdw-select {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.55rem 0.7rem;
    color: inherit;
    font: inherit;
    background: var(--mas-color-surface, #ffffff);
    border: 1px solid var(--mas-color-border, #d8dee4);
    border-radius: 8px;
}

.sdw-input:focus-visible,
.sdw-select:focus-visible,
.sdw-lang__select:focus-visible,
.sdw-btn:focus-visible,
.sdw-check__input:focus-visible {
    outline: 3px solid rgba(var(--mas-color-coral-rgb, 229, 107, 98), 0.35);
    outline-offset: 2px;
}

.sdw-input--invalid,
.sdw-select--invalid {
    border-color: var(--mas-color-coral, #E56B62);
    background: rgba(var(--mas-color-coral-rgb, 229, 107, 98), 0.05);
}

.sdw-field__error {
    color: var(--mas-color-coral, #E56B62);
    font-size: 0.82rem;
}

.sdw-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem;
    background: var(--mas-color-background, #f6f7f8);
    border: 1px solid var(--mas-color-border, #d8dee4);
    border-radius: 8px;
}

.sdw-check__input {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.25rem;
}

.sdw-check__text {
    font-size: 0.88rem;
}

.sdw-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.sdw-fieldset__legend {
    padding: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

/* ------------------------------------------------------------------ actions */

.sdw-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.sdw-actions__spacer {
    flex: 1 1 auto;
}

.sdw-btn {
    min-height: 2.9rem;
    padding: 0.7rem 1.35rem;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    border: 1px solid var(--mas-color-border, #d8dee4);
    border-radius: 999px;
    cursor: pointer;
}

.sdw-btn--primary {
    color: #ffffff;
    background: var(--mas-color-coral, #E56B62);
    border-color: transparent;
}

.sdw-btn--quiet {
    color: var(--mas-color-link, #236b73);
    border-color: transparent;
}

.sdw-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* -------------------------------------------------- bandeaux et avertissements */

.sdw-notice {
    display: block;
    margin: 0 0 1.1rem;
    padding: 0.9rem 1rem;
    font-size: 0.9rem;
    background: var(--mas-color-quiet, #eaf0f2);
    border-left: 4px solid var(--mas-color-dark-action, #4e5b64);
    border-radius: 8px;
}

.sdw-notice--alert {
    background: rgba(var(--mas-color-coral-rgb, 229, 107, 98), 0.08);
    border-left-color: var(--mas-color-coral, #E56B62);
}

.sdw-notice--info {
    background: rgba(201, 155, 72, 0.1);
    border-left-color: var(--mas-color-gold, #c99b48);
}

/* Bandeau « prix simulé » (E1360) — la SEULE regle ajoutee par ce chantier. Volontairement plus
   voyante que les autres bandeaux : elle avertit que le montant affiche ne vient d'aucun calcul.
   Disparait avec la simulation (aucune reponse reelle ne porte la marque `_simulated`). */
.sdw-notice--sim {
    background: rgba(var(--mas-color-coral-rgb, 229, 107, 98), 0.14);
    border-left-color: var(--mas-color-coral, #E56B62);
    border: 2px dashed var(--mas-color-coral, #E56B62);
    border-left-width: 6px;
    font-weight: 500;
}

.sdw-notice__title {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.sdw-notice__body {
    margin: 0;
}

.sdw-notice__dates {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0.7rem 0 0;
}

.sdw-notice__date {
    margin: 0;
}

.sdw-notice__date dt {
    color: var(--mas-color-muted, #596874);
    font-size: 0.8rem;
}

.sdw-notice__date dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sdw-notice__list {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
}

/* ------------------------------------------------------------------- devis */

.sdw-quote__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--mas-color-border, #d8dee4);
}

.sdw-quote__school {
    margin: 0;
    font-size: 1.2rem;
}

.sdw-quote__meta {
    margin: 0.3rem 0 0;
    color: var(--mas-color-muted, #596874);
    font-size: 0.9rem;
}

.sdw-quote__total {
    text-align: right;
}

.sdw-quote__total-label {
    display: block;
    color: var(--mas-color-muted, #596874);
    font-size: 0.82rem;
}

.sdw-quote__total-value {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sdw-lines {
    width: 100%;
    margin: 1rem 0 0;
    border-collapse: collapse;
    font-size: 0.94rem;
}

.sdw-lines caption {
    padding-bottom: 0.5rem;
    color: var(--mas-color-muted, #596874);
    font-size: 0.85rem;
    text-align: left;
}

.sdw-lines th,
.sdw-lines td {
    padding: 0.6rem 0.4rem;
    text-align: left;
    border-bottom: 1px solid var(--mas-color-border, #d8dee4);
}

.sdw-lines__amount {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sdw-lines__kind {
    display: block;
    color: var(--mas-color-muted, #596874);
    font-size: 0.78rem;
}

.sdw-lines__row--promotion .sdw-lines__amount {
    color: var(--mas-color-green, #6c8a53);
}

.sdw-lines__included {
    font-weight: 600;
}

.sdw-lines__flag {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    color: var(--mas-color-gold, #c99b48);
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid rgba(201, 155, 72, 0.5);
    border-radius: 999px;
}

/* [e1606 volet 6ter, E1680] Nom Synergee du doublet `<traduction> (<nom Synergee>)` — sa PROPRE
   ligne, en retrait, sous la traduction. `display:block` (jamais sur la même ligne que la
   traduction, aucune concaténation) + `word-break`/`overflow-wrap` : un nom TRÈS LONG s'enroule
   dans la cellule au lieu de la déborder, sans qu'un seul caractère ne soit tronqué (R82 — un nom
   coupé fabriquerait un nom que l'école ne reconnaîtrait pas). AUCUN `white-space:nowrap` ici,
   contrairement à `.sdw-lines__amount`. */
.sdw-lines__synergee-name {
    display: block;
    margin-top: 0.15rem;
    color: var(--mas-color-muted, #596874);
    font-size: 0.82rem;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.sdw-derived {
    margin: 1rem 0 0;
    padding: 0.85rem 1rem;
    font-size: 0.88rem;
    background: var(--mas-color-background, #f6f7f8);
    border-radius: 8px;
}

.sdw-derived__caption {
    margin: 0 0 0.5rem;
    color: var(--mas-color-muted, #596874);
    font-size: 0.8rem;
}

.sdw-derived__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.sdw-dates {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin: 1.25rem 0 0;
}

.sdw-dates__block {
    padding: 0.85rem 1rem;
    background: var(--mas-color-background, #f6f7f8);
    border-radius: 8px;
}

.sdw-dates__title {
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.sdw-dates__pair {
    margin: 0;
    font-size: 0.88rem;
}

.sdw-dates__pair dt {
    color: var(--mas-color-muted, #596874);
    font-size: 0.78rem;
}

.sdw-dates__pair dd {
    margin: 0 0 0.4rem;
    font-variant-numeric: tabular-nums;
}

/* [e1606 volet 1] Mention portée SOUS les dates d'hébergement quand les jours d'arrivée/de départ
   imposés par l'école ne figurent pas au catalogue : la période affichée est celle qui a été
   chiffrée, jamais une contrainte d'école. Règle NEUVE -- aucune règle existante n'est modifiée. */
.sdw-dates__caveat {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--mas-color-muted, #596874);
}

/* Document HTML officiel rendu tel quel (chemin §4bis, inactif tant que l'extension §5 n'existe
   pas) : isolé dans une iframe pour ne jamais mélanger ses styles à ceux de la page hôte. */
.sdw-document {
    width: 100%;
    min-height: 60vh;
    border: 1px solid var(--mas-color-border, #d8dee4);
    border-radius: 8px;
}

/* --------------------------------------------------------------- attente/erreur */

.sdw-status {
    padding: 2.5rem 1rem;
    text-align: center;
}

.sdw-status__title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.sdw-status__body {
    margin: 0 auto;
    max-width: 34rem;
    color: var(--mas-color-muted, #596874);
}

/* [E1438 complément (2)] Cas de bord « aucune école transmise » (`renderCatalogue()`) : visuel
   générique en fond, JAMAIS un nouvel asset — `hero-profile-18-30.jpg` est la photo de héros déjà
   utilisée par la page d'accueil (`.mas-home-main-hero__visual`) ET la page destinations
   (`etudiants-adultes/ecoles.html`), ici seulement RÉFÉRENCÉE, jamais copiée. Voile en dégradé
   construit UNIQUEMENT à partir de `--mas-color-ink` (même variable, même mécanisme que la carte
   CTA photo des pages école, `mas-brand-cta-fix.css`), jamais une couleur en dur. Nouvelle classe
   uniquement (aucune règle existante modifiée), sur ce seul appel de `.sdw-status` parmi les
   6 de ce fichier (chargement/erreurs non concernés). */
.sdw-status--cta-photo {
    padding: 3rem 1.25rem;
    color: var(--mas-color-surface, #ffffff);
    background-image:
        linear-gradient(135deg,
            color-mix(in srgb, var(--mas-color-ink, #2b3740) 30%, transparent) 0%,
            color-mix(in srgb, var(--mas-color-ink, #2b3740) 82%, transparent) 100%),
        url("/preversion/media/MOVE%20AND%20STUDY/Homepage/hero-profile-18-30.jpg");
    background-size: cover;
    background-position: center;
    border-radius: 8px;
}

.sdw-status--cta-photo .sdw-status__title {
    color: var(--mas-color-surface, #ffffff);
}

.sdw-spinner {
    display: inline-block;
    width: 1.75rem;
    height: 1.75rem;
    margin-bottom: 0.9rem;
    border: 3px solid var(--mas-color-quiet, #eaf0f2);
    border-top-color: var(--mas-color-dark-action, #4e5b64);
    border-radius: 50%;
    animation: sdw-spin 0.9s linear infinite;
}

@keyframes sdw-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sdw-spinner {
        animation: none;
    }
}

/* ------------------------------------------------------------------ largeurs */

@media (min-width: 40rem) {
    .sdw-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sdw-dates {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}