/* ============================================================================
   COULEUR, SANS FOND D'ÉCRAN — 2026-10-19 (v2)
   ----------------------------------------------------------------------------
   Consigne : « plus de couleurs sur le site devisaly.fr et enlève le fond
   d'écran ». Le fond reste retiré (nappes, grain, halos, nuée), la couleur
   revient et porte les appels à l'action, les surtitres et les repères.

   Une seule teinte d'accent — un ambre chaud — sur du blanc : la couleur se
   voit sans que la page devienne une brochure.

   Cette feuille est chargée en dernier. Pour revenir en arrière, retirer ses
   deux <link> (dans _v3_essentiel.html et _n_essentiel.html).
   ============================================================================ */

:root {
    --ambre: #a96a1f;
    --ambre-clair: #d19a4a;
    --ambre-cta: #b8781f;
    --ambre-cta-fonce: #8d5713;
    --bleu: #2f55c4;
    --fond: #ffffff;
    --fond-2: #ffffff;
}

/* ============================================================================
   1. LE FOND D'ÉCRAN — retiré
   ----------------------------------------------------------------------------
   `.ciel` porte les nappes ambre et bleu derrière chaque page, son `::after`
   ajoute le grain ; `.heros` porte le dégradé coloré de l'accueil ; les halos
   (`.halo`, `.panneau::before`, `.appel::before`, `.appel::after`) et le reflet
   qui suit le pointeur sont des lumières posées derrière le contenu.
   `#nuee-fond` est le canvas animé de la famille « verre ».
   ============================================================================ */
.ciel,
.heros {
    background: #ffffff !important;
}

.ciel::after,
.halo,
.panneau::before,
.appel::before,
.appel::after,
[data-incline]::after,
#nuee-fond,
canvas.nuee,
.nuee-fond {
    display: none !important;
}

body {
    background: #ffffff !important;
}

/* ============================================================================
   2. LA COULEUR — les appels à l'action
   ============================================================================ */
.btn--primaire,
.bouton {
    background: linear-gradient(180deg, #c3842a 0%, var(--ambre-cta) 52%, #ad7018 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, 0 10px 22px -14px rgb(141 87 19 / .75) !important;
}

.btn--primaire:hover,
.bouton:hover {
    background: linear-gradient(180deg, #b6781f 0%, var(--ambre-cta-fonce) 100%) !important;
    color: #fff !important;
}

/* L'appel en bas de page : le bloc sombre prend la teinte de la marque. */
.appel {
    background: linear-gradient(155deg, #b8781f 0%, #a3661a 48%, #8d5713 100%) !important;
    color: #fff !important;
}

.appel h2,
.appel p {
    color: #fff !important;
}

.appel .btn--primaire {
    background: #fff !important;
    color: #8d5713 !important;
}

.appel .btn--primaire:hover {
    background: #fdf6ec !important;
}

/* ============================================================================
   3. LA COULEUR — les mots
   ============================================================================ */
.devisaly-page__kicker,
.maquette__kicker,
.surtitre,
.serp__site span,
.sequence__jalons span.on,
.pied__mots-plus,
.menu-mobile__tel {
    color: var(--ambre) !important;
}

/* Les liens de contenu : soulignés en ambre, sans changer la couleur du texte. */
.prose a,
.pied a:hover {
    text-decoration-color: rgb(169 106 31 / .55) !important;
}

/* ---- Les écritures ----
   La couleur ne reste pas dans les boutons : les titres passent au bronze de
   la marque, les mots forts et les liens de contenu aussi. Le corps de texte
   garde l'encre — c'est ce qui rend la couleur lisible au lieu de bavarde. */
h1,
h2,
h3,
h4,
.titre-section,
.section__titre,
.registre__nom,
.carte__titre,
.bloc__titre,
.etape__titre {
    color: #8d5713 !important;
}

h1 em,
h1 .accent,
h2 em,
h2 .accent {
    color: var(--ambre) !important;
    font-style: normal;
}

p strong,
li strong,
.prose strong,
.prose em {
    color: #8d5713 !important;
}

.prose a,
.carte a,
.registre a {
    color: #8d5713 !important;
    text-decoration-color: rgb(169 106 31 / .45) !important;
}

/* Le texte sur les blocs sombres reste blanc : le bronze y serait illisible. */
.appel h1,
.appel h2,
.appel h3,
.appel p,
.pied h1,
.pied h2,
.pied h3 {
    color: #ffffff !important;
}

.pied p,
.pied a {
    color: inherit;
}

/* Les titres de l'aperçu « résultat Google » restent en encre : un bleu de lien
   ferait croire à un vrai résultat. */
.serp__titre {
    color: var(--encre) !important;
}

/* ============================================================================
   4. LA COULEUR — les repères
   ============================================================================ */
.chiffre {
    color: var(--ambre) !important;
}

.chiffre small {
    color: var(--encre-45) !important;
}

.pastille,
.badge,
.tampon {
    background: rgb(184 120 31 / .10) !important;
    color: #8d5713 !important;
    border-color: rgb(169 106 31 / .22) !important;
}

.mise-en-avant {
    background: rgb(184 120 31 / .06) !important;
}

.sequence__jalons span.on {
    background: rgb(184 120 31 / .12) !important;
    border-color: rgb(169 106 31 / .40) !important;
}

.carte-3d:hover {
    box-shadow: var(--lisere), var(--ombre-3), 0 0 0 1px rgb(169 106 31 / .18) !important;
}

::selection {
    background: rgb(184 120 31 / .22);
}

/* La nav : le lien courant prend la teinte de la marque. */
.nav a[aria-current="true"],
.nav .is-active {
    color: var(--ambre) !important;
}

/* ============================================================================
   5. LA FAMILLE « VERRE » (n_base.html)
   ----------------------------------------------------------------------------
   Ces pages (erreur 404, résultats, contact…) portaient la nuée animée et des
   capsules translucides. Le canvas part ; les capsules restent, en blanc, et
   leurs appels reprennent l'ambre via les règles ci-dessus.
   ============================================================================ */
.np,
.capsule,
.verre {
    background-color: #ffffff !important;
}