/* ==========================================================================
   Formulaire de demande d'intervention (écran 1d)
   ========================================================================== */

.demande {
    display: grid;
    gap: var(--sp-24);
    margin-top: var(--sp-20);
}

.demande__form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-18);
}

.demande__lignes {
    display: flex;
    flex-direction: column;
    gap: var(--sp-13);
}

.demande__duo {
    display: flex;
    flex-direction: column;
    gap: var(--sp-13);
}

/* ---- Champs -------------------------------------------------------------- */
.champ {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

.champ__label {
    display: flex;
    align-items: baseline;
    gap: var(--sp-6);
    font-size: var(--fs-meta);
    font-weight: 600;
    color: var(--c-heading);
}

.champ__requis {
    color: var(--c-orange);
}

/* « facultatif » écrit en toutes lettres plutôt qu'un astérisque sur les
   champs requis : le visiteur voit d'un coup d'œil ce qu'il peut sauter, ce
   qui est exactement l'argument du formulaire à un seul champ obligatoire. */
.champ__facultatif {
    font-size: var(--fs-label);
    font-weight: 400;
    color: var(--c-label);
}

.champ__aide {
    margin: 0;
    font-size: var(--fs-label);
    color: var(--c-meta);
}

.champ input,
.champ select,
.champ textarea {
    inline-size: 100%;
    min-height: var(--tap-min);
    padding: var(--sp-13);
    box-sizing: border-box;
    background: var(--c-surface);
    border: 1.5px solid #ccd2d8;
    border-radius: var(--r-9);
    color: var(--c-heading);
    font: inherit;
}

.champ textarea {
    min-height: 110px;
    resize: vertical;
    line-height: 1.5;
}

/* Le seul champ obligatoire porte la couleur de marque : il se distingue des
   autres avant même d'avoir été lu. */
.champ input[required],
.champ input[aria-required='true'] {
    border-color: var(--c-blue);
}

.champ input::placeholder,
.champ textarea::placeholder {
    color: #98a2ab;
}

.champ--erreur input,
.champ--erreur select,
.champ--erreur textarea {
    border-color: var(--c-alert);
    background: var(--c-alert-bg);
}

/* Rouge : ALERTE uniquement. C'est le seul registre où il est autorisé. */
.champ__erreur {
    margin: 0;
    font-size: var(--fs-label);
    font-weight: 500;
    color: var(--c-alert);
}

.form-erreurs {
    padding: var(--sp-13) var(--sp-15);
    background: var(--c-alert-bg);
    border: 1.5px solid var(--c-alert);
    border-radius: var(--r-10);
    color: var(--c-alert);
}

.form-erreurs__titre {
    margin: 0 0 var(--sp-6);
    font-weight: 700;
}

.form-erreurs ul {
    margin: 0;
    padding-left: var(--sp-18);
}

/* ---- Case à cocher ------------------------------------------------------- */
.case__label {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-9);
    min-height: var(--tap-min);
    padding-block: var(--sp-6);
    cursor: pointer;
    font-size: var(--fs-meta);
    color: var(--c-body);
    line-height: 1.45;
}

.case__label input {
    flex: none;
    inline-size: 20px;
    block-size: 20px;
    margin-top: 1px;
    accent-color: var(--c-green);
}

.demande__rgpd-note {
    margin: var(--sp-6) 0 0;
    font-size: var(--fs-label);
    color: var(--c-label);
}

.demande__rgpd-note a {
    text-decoration: underline;
}

/* ---- Bascule Standard / Urgent ------------------------------------------- */
.bascule {
    display: flex;
    gap: var(--sp-8);
}

.bascule__onglet {
    flex: 1;
    min-height: var(--tap-min);
    padding: var(--sp-11);
    background: var(--c-surface);
    border: 1.5px solid #ccd2d8;
    border-radius: var(--r-9);
    color: var(--c-meta);
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.bascule__onglet.is-actif {
    border-width: 2px;
    border-color: var(--c-blue);
    background: var(--c-blue-bg);
    color: var(--c-blue);
}

.bascule__onglet--urgent.is-actif {
    border-color: var(--c-alert);
    background: var(--c-alert-bg);
    color: var(--c-alert);
}

/* ---- Encart d'urgence ----------------------------------------------------
   Le rouge n'apparaît QUE là : c'est une alerte, jamais un appel à l'action
   commercial. Le bouton reste orange, couleur d'action du site. */
.urgence-encart {
    padding: var(--sp-13);
    background: var(--c-alert-bg);
    border: 1.5px solid var(--c-alert);
    border-radius: var(--r-10);
    text-align: center;
}

.urgence-encart__texte {
    margin: 0 0 var(--sp-9);
    font-size: var(--fs-meta);
    font-weight: 600;
    color: var(--c-alert);
}

/* ---- Zone photos --------------------------------------------------------- */
.photos {
    padding: var(--sp-15);
    background: var(--c-surface);
    border: 2px dashed var(--c-blue);
    border-radius: var(--r-10);
    text-align: center;
}

.photos__titre {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-8);
    margin: 0;
    color: var(--c-blue);
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
}

.photos__aide {
    margin: var(--sp-6) 0 0;
    font-size: var(--fs-label);
    color: var(--c-meta);
}

/* Le <label> enveloppe l'input : cliquer dessus ouvre le sélecteur, et sur
   mobile `capture` déclenche directement l'appareil photo. */
.photos__declencheur {
    display: inline-flex;
    margin-top: var(--sp-11);
    cursor: pointer;
}

.photos__declencheur:focus-within {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

.photos__compteur {
    margin: var(--sp-9) 0 0;
    font-size: var(--fs-label);
    color: var(--c-meta);
}

.photos__liste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-11);
    margin: var(--sp-11) 0 0;
    padding: 0;
    list-style: none;
}

.photos__item {
    position: relative;
    inline-size: 64px;
    block-size: 64px;
}

.photos__vignette {
    inline-size: 64px;
    block-size: 64px;
    object-fit: cover;
    border-radius: var(--r-8);
    border: 1px solid var(--c-border);
}

/* Croix de suppression. Elle déborde volontairement du coin de la vignette :
   posée dessus, elle masquerait ce que l'utilisateur cherche à identifier. */
.photos__retirer {
    position: absolute;
    top: -8px;
    right: -8px;
    display: grid;
    place-items: center;
    inline-size: 24px;
    block-size: 24px;
    padding: 0;
    background: var(--c-alert);
    border: 2px solid var(--c-surface);
    border-radius: 999px;
    color: #ffffff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.photos__erreur {
    margin: var(--sp-9) 0 0;
    font-size: var(--fs-label);
    color: var(--c-alert);
}

.photos__erreur:empty {
    display: none;
}

/* ---- Colonne d'aide ------------------------------------------------------ */
.demande__aide {
    display: flex;
    flex-direction: column;
    gap: var(--sp-13);
}

.aide-carte {
    padding: var(--sp-15);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-11);
}

.aide-carte--bleue {
    background: var(--c-blue);
    border-color: var(--c-blue);
    color: #ffffff;
    text-align: center;
}

.aide-carte__titre {
    margin: 0;
    font-size: var(--fs-meta);
    color: var(--c-on-blue);
}

.aide-carte__tel {
    display: block;
    margin: var(--sp-6) 0 var(--sp-11);
    color: #ffffff;
    font-size: 23px;
}

.aide-carte__liste {
    display: flex;
    flex-direction: column;
    gap: var(--sp-9);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-meta);
    color: var(--c-body);
}

.aide-carte__liste li {
    display: flex;
    align-items: center;
    gap: var(--sp-9);
}

.aide-carte__liste svg {
    flex: none;
    color: var(--c-blue);
}

/* ---- Confirmation -------------------------------------------------------- */
.confirmation {
    max-inline-size: 560px;
    padding: var(--sp-24) var(--sp-20);
    background: var(--c-green-bg);
    border: 1.5px solid var(--c-green);
    border-radius: var(--r-12);
}

.confirmation__pastille {
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    background: var(--c-green);
    border-radius: 999px;
    color: #ffffff;
}

.confirmation__titre {
    margin: var(--sp-13) 0 0;
    color: var(--c-green);
}

.confirmation__delai {
    margin: var(--sp-11) 0 0;
    font-size: 17px;
    color: var(--c-heading);
}

.confirmation__ref {
    margin: var(--sp-13) 0 0;
    font-size: var(--fs-meta);
    color: var(--c-body);
}

.confirmation__ref-note {
    color: var(--c-meta);
}

.confirmation__texte {
    margin: var(--sp-13) 0 0;
    color: var(--c-body);
}

.confirmation__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-9);
    margin-top: var(--sp-20);
}

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 900px) {
    /* Grille 1.4fr / 1fr : le formulaire domine, la colonne d'aide accompagne. */
    .demande {
        grid-template-columns: 1.4fr 1fr;
        gap: var(--sp-26);
        align-items: start;
    }

    .demande__duo {
        flex-direction: row;
    }

    .demande__duo > * {
        flex: 1;
    }

    /* La colonne d'aide suit le défilement : le numéro reste sous les yeux
       pendant que l'on remplit les champs. */
    .demande__aide {
        position: sticky;
        top: calc(var(--header-h, 64px) + var(--sp-15));
    }

    .confirmation__actions {
        flex-direction: row;
    }
}

/* Lien inline dans la mention RGPD : cible tactile pleine hauteur au doigt.
   La marge négative compense pour ne pas espacer le paragraphe. */
.demande__rgpd-note a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    margin-block: calc((var(--tap-min) - 1.4em) / -2);
}

@media (pointer: fine) {
    .demande__rgpd-note a {
        min-height: 0;
        margin-block: 0;
    }
}