/* lgarskisoude — additions du SITE, hors maquette (static/css/style.css reste
   la copie exacte de mockups/lgarskisoude/assets/css/style.css).

   Trois classes utilitaires pour la rotation du carrousel des réalisations
   (Alpine.js, static/js/site.js) : `order` sur la grille CSS
   `.realisations__grid`, jamais un attribut `style=` (la CSP stricte du
   site n'admet `'unsafe-inline'` sur `style-src` que si l'hôte appelle
   `autorise_styles_en_ligne()`, jamais fait ici). Sans JavaScript, `order`
   reste à sa valeur par défaut (0 sur les trois cartes) : l'ordre visuel
   suit alors l'ordre du DOM, qui EST déjà l'état initial de la maquette. */
.lgk-order-0 {
    order: 0;
}

.lgk-order-1 {
    order: 1;
}

.lgk-order-2 {
    order: 2;
}

/* Bandeau de consentement (creep-privacy, via creep/partials/consentement.html,
   inclus INCONDITIONNELLEMENT par creep/base.html) : un élément que la
   maquette n'a jamais eu — n'existant pas côté maquette, il n'y a rien à
   « reproduire » ici, seulement à habiller à la charte du site avec les
   jetons déjà définis par static/css/style.css. `creep/kit.css` pose déjà le
   positionnement structurel (fixe, bas d'écran, z-index) : ces règles ne
   touchent que couleur/typographie, jamais la structure du kit. */
.creep-consentement {
    background: var(--color-dark);
    color: var(--color-on-dark);
    font-family: var(--font-body);
    font-size: 14px;
    padding: 18px 24px;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.35);
}

.creep-consentement p {
    margin: 0 0 12px;
    max-width: 760px;
}

.creep-consentement form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.creep-consentement button {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 13px;
    padding: 10px 20px;
    background: var(--color-orange);
    color: var(--color-on-dark);
}

.creep-consentement button:hover {
    background: var(--color-orange-deep);
}

.creep-consentement details {
    margin-top: 8px;
}

.creep-consentement summary {
    cursor: pointer;
    color: var(--color-orange-light);
    font-family: var(--font-heading);
    font-size: 13px;
    text-transform: uppercase;
}

.creep-consentement__panneau {
    margin-top: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.creep-consentement__panneau label {
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
}

/* Formulaire de devis (CSC-14 lot 2) : le kit `creep-site` ne pose aucune
   couleur ni typographie sur `.creep-champ`/`.creep-champ__erreur` (kit.css
   ne fait que masquer le champ piège) — ces classes reprennent la charte du
   site plutôt que d'être laissées sans style. `.field` (déjà stylée par
   style.css, copie de la maquette) est passée en paramètre `classe` de
   `<champ>`/`<zone_texte>` (voir templates/index.html) : les sélecteurs
   `.field input`/`.field textarea` de la maquette s'appliquent donc sans
   changement. */
.creep-champ__erreur {
    display: block;
    color: var(--color-danger);
    font-size: 14px;
    margin-top: 6px;
}

.contact__form-erreur:empty {
    display: none;
}

.contact__form-erreur {
    color: var(--color-danger);
    font-family: var(--font-heading);
    font-size: 15px;
    text-align: center;
    margin: 0 0 24px;
}

/* Le flash (`creep_site::axum::Flash`) — posé après la soumission réelle du
   formulaire de devis (succès, CSC-14 lot 2). Quatre niveaux propres à cette
   addition : la maquette n'en avait pas besoin, kit.css n'en pose aucun. */
.creep-flash {
    max-width: 841px;
    margin: 0 auto 24px;
    padding: 16px 24px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--font-body);
    font-size: 15px;
}

.creep-flash p {
    margin: 0;
}

.creep-flash button {
    background: transparent;
    border: 0;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    padding: 0 4px;
}

.creep-flash--succes {
    background: #e7f4ea;
    color: #1e6b34;
    border: 1px solid #b7e1c3;
}

.creep-flash--erreur {
    background: #fbe9e9;
    color: var(--color-danger);
    border: 1px solid #f3b4b4;
}

.creep-flash--attention {
    background: #fff4e0;
    color: #8a5a00;
    border: 1px solid #f0d29a;
}

.creep-flash--info {
    background: #eef3fb;
    color: #204d8f;
    border: 1px solid #b9cdee;
}