/* ═══════════════════════════════════════════════════════════════════
 *  devis-inline.css — formulaire de devis en page + inversion d'ordre
 *
 *  Fichier SÉPARÉ à dessein : le générateur réécrit styles.css à chaque
 *  export. Isoler ici ce qui est ajouté à la main évite de le reperdre,
 *  et rend le patch rejouable tel quel sur les tirages 01 et 69.
 *
 *  MÉTHODE WIZARDS (Damien & Anthony, Wizards Event 2026) :
 *    « Placer le texte SEO le plus haut possible,
 *      puis le replacer en CSS par la suite. »
 *
 *  Le HTML sert donc dans cet ordre : introduction SEO, puis formulaire,
 *  puis le reste. L'affichage, lui, remonte le formulaire au-dessus de
 *  l'introduction via `order` en flexbox.
 *
 *  Ce n'est PAS du masquage : tout reste visible, sélectionnable et lisible
 *  par un lecteur d'écran. Un `display:none`, une indentation négative ou un
 *  hors-écran franchiraient la ligne du cloaking — pas `order`, qui est du
 *  responsive standard.
 * ═══════════════════════════════════════════════════════════════════ */

/* ---- Inversion d'ordre : source SEO d'abord, formulaire affiché en tête ---- */
.ville-main,
.home-main {
    display: flex;
    flex-direction: column;

    /* min-width:0 est OBLIGATOIRE ici, pas cosmétique.
     * Un conteneur flex a `min-width: auto` : il refuse de descendre sous la
     * largeur intrinsèque de son contenu. `.ville-main` étant lui-même l'enfant
     * d'une grille, le passer en flex lui a fait ignorer la largeur de sa
     * colonne — mesuré le 2026-09-02 : 476 px de contenu dans 390 px d'écran,
     * soit 102 px de débordement et un défilement horizontal sur mobile.
     * Régression introduite par l'inversion d'ordre, détectée par l'humain. */
    min-width: 0;
}

/* Même raison, un cran plus bas : les enfants directs ne doivent pas non plus
 * imposer leur largeur intrinsèque au conteneur. */
.ville-main > *,
.home-main > * { min-width: 0; }

/* Le formulaire est APRÈS l'intro dans le HTML, AVANT à l'écran.
   Deux cibles : le bloc nu (page ville, enfant direct de .ville-main) et sa
   section enveloppante (accueil, où le formulaire est imbriqué dans .container). */
.ville-main > .devis-inline,
.home-main  > .devis-inline,
.home-main  > .devis-inline-wrap { order: -1; }

/* Tout le reste conserve son ordre naturel. */
.ville-main > *:not(.devis-inline),
.home-main  > *:not(.devis-inline):not(.devis-inline-wrap) { order: 0; }

/* Sur l'accueil, le formulaire remonté n'a pas besoin de la marge haute
   d'une section standard : il colle au hero. */
.home-main > .devis-inline-wrap { padding-top: var(--space-xl, 28px); }

/* ---- Le bloc formulaire ---- */
.devis-inline {
    background: var(--bg-light, #F8FAFC);
    border: 1px solid var(--border, #E2E8F0);
    border-radius: var(--radius, 14px);
    padding: var(--space-xl, 28px);
    margin-bottom: var(--space-2xl, 44px);
}

.devis-inline-head h2 {
    margin: 0 0 6px;
    font-size: 1.35rem;
    line-height: 1.25;
}

.devis-inline-head p {
    margin: 0 0 var(--space-lg, 20px);
    color: var(--text-muted, #64748B);
    font-size: .92rem;
}

.devis-inline-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md, 14px);
}

.devis-inline .form-group { display: flex; flex-direction: column; gap: 5px; }

.devis-inline label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text, #0F172A);
}

.devis-inline .form-rgpd {
    margin-top: var(--space-md, 14px);
}

.devis-inline .form-rgpd label {
    flex-direction: row;
    align-items: flex-start;
    gap: 9px;
    display: flex;
    font-weight: 400;
    font-size: .84rem;
    color: var(--text-muted, #64748B);
    line-height: 1.45;
}

.devis-inline .form-rgpd input { margin-top: 3px; flex-shrink: 0; }

.devis-inline-submit {
    margin-top: var(--space-lg, 20px);
    width: 100%;
    justify-content: center;
}

/* ---- Mobile : tout s'empile, l'ordre visuel suit l'ordre CSS ----
 * Les Wizards insistent : « le plus important en 2026, c'est le mobile,
 * le PC ne sert pratiquement à rien ». Le formulaire reste donc en tête
 * ici aussi — c'est la surface qui compte. */
@media (max-width: 720px) {
    .devis-inline { padding: var(--space-lg, 20px); }
    .devis-inline-grid { grid-template-columns: 1fr; }
    .devis-inline-head h2 { font-size: 1.15rem; }
}