/**
 * ================================================================
 * FICHIER : theme_site.css
 * EMPLACEMENT : Client/webexpress_anunaqi-installeur/theme_site.css (copié dans Site/www/_theme/)
 * SHORT_DESC : Habillage steampunk du site AnunaQi Installeur
 * DESCRIPTION : Surcouche du thème commun Web Express V2 : fond noir, laiton, cuir,
 *               engrenages, faisceau de projecteur sur le héros et sur les photos.
 *               Reprend uniquement les jetons du thème (--couleur_*, --police_*).
 *
 * SOMMAIRE :
 *   - JETONS · BASE · ENTETE · HERO · SECTIONS · CARTES · CHIFFRES · ZONE
 *   - FAQ · FORMULAIRE · PIED · BARRE_APPEL · RESPONSIVE · MOUVEMENT_REDUIT
 *
 * MODIFICATIONS :
 *   - 14/10/2026 11:25 : Création (n° 1301 lot V2-S, Claude) — A VALIDER PAR JaxX
 * ================================================================
 */

/* JETONS ============================================================== */
:root
{
    --couleur_primaire: #c9a227;
    --couleur_secondaire: #2a1c12;
    --couleur_accent: #b5562b;
    --couleur_fond: #0b0907;
    --couleur_texte: #efe6d6;
    --couleur_surface: #16100b;
    --couleur_cuir: #3a2618;
    --couleur_laiton_clair: #e6c766;
    --couleur_laiton_fonce: #8a6a14;
    --couleur_focus: var(--couleur_laiton_clair);
    --couleur_texte_doux: color-mix(in srgb, var(--couleur_texte) 74%, var(--couleur_fond));
    --couleur_bordure: color-mix(in srgb, var(--couleur_primaire) 26%, transparent);
    --couleur_primaire_pale: color-mix(in srgb, var(--couleur_primaire) 14%, var(--couleur_fond));
    --couleur_primaire_fonce: var(--couleur_laiton_clair);
    --degrade_laiton: linear-gradient(135deg, var(--couleur_laiton_clair) 0%, var(--couleur_primaire) 45%, var(--couleur_laiton_fonce) 100%);
    --ombre: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 26px rgba(0, 0, 0, 0.45);
    --ombre_forte: 0 18px 50px rgba(0, 0, 0, 0.65);
    --engrenage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23c9a227'%3E%3Crect x='43' y='4' width='14' height='18' rx='2'/%3E%3Crect x='43' y='4' width='14' height='18' rx='2' transform='rotate(45 50 50)'/%3E%3Crect x='43' y='4' width='14' height='18' rx='2' transform='rotate(90 50 50)'/%3E%3Crect x='43' y='4' width='14' height='18' rx='2' transform='rotate(135 50 50)'/%3E%3Crect x='43' y='4' width='14' height='18' rx='2' transform='rotate(180 50 50)'/%3E%3Crect x='43' y='4' width='14' height='18' rx='2' transform='rotate(225 50 50)'/%3E%3Crect x='43' y='4' width='14' height='18' rx='2' transform='rotate(270 50 50)'/%3E%3Crect x='43' y='4' width='14' height='18' rx='2' transform='rotate(315 50 50)'/%3E%3Ccircle cx='50' cy='50' r='7'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='27' fill='none' stroke='%23c9a227' stroke-width='10'/%3E%3C/svg%3E");
}
/* JETONS ============================================================== */

/* BASE ================================================================ */
body
{
    background-color: var(--couleur_fond);
    background-image: radial-gradient(ellipse at 50% 0%, rgba(201, 162, 39, 0.06) 0%, rgba(0, 0, 0, 0) 60%);
    color: var(--couleur_texte);
}

h1,
h2,
h3
{
    letter-spacing: 0.02em;
}

h2
{
    color: var(--couleur_laiton_clair);
}

.surtitre
{
    color: var(--couleur_primaire);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

::selection
{
    background: var(--couleur_primaire);
    color: var(--couleur_fond);
}

.bouton_primaire,
.bouton_primaire:hover
{
    background: var(--degrade_laiton);
    color: #1a120b;
    border-color: var(--couleur_laiton_fonce);
    box-shadow: 0 6px 18px rgba(201, 162, 39, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.bouton_primaire:hover
{
    filter: brightness(1.08);
}

.bouton_clair,
.bouton_clair:hover
{
    background: var(--degrade_laiton);
    color: #1a120b;
}

.bouton_contour_clair
{
    color: var(--couleur_laiton_clair);
    border-color: color-mix(in srgb, var(--couleur_primaire) 80%, transparent);
}

.bouton_contour_clair:hover
{
    color: var(--couleur_laiton_clair);
    background: rgba(201, 162, 39, 0.12);
}

.bouton_secondaire
{
    background: var(--couleur_cuir);
    color: var(--couleur_laiton_clair);
}
/* BASE ================================================================ */

/* ENTETE ============================================================== */
.entete
{
    background: color-mix(in srgb, var(--couleur_fond) 88%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--couleur_primaire) 30%, transparent);
}

.entete.est_reduit
{
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}

.logo_image
{
    border-radius: 50%;
    background: #000000;
    filter: invert(1) sepia(1) saturate(2.4) hue-rotate(-8deg) brightness(0.95);
}

.logo_nom
{
    color: var(--couleur_laiton_clair);
    letter-spacing: 0.04em;
}

.tiroir_mobile
{
    background: var(--couleur_surface);
    border-left: 1px solid var(--couleur_bordure);
}
/* ENTETE ============================================================== */

/* HERO ================================================================ */
.hero
{
    background: var(--couleur_fond);
}

.hero::before
{
    content: "";
    position: absolute;
    z-index: -1;
    left: -60px;
    bottom: -60px;
    width: 260px;
    height: 260px;
    background: var(--engrenage) center / contain no-repeat;
    opacity: 0.08;
    pointer-events: none;
}

.hero_media
{
    inset: auto;
    top: 50%;
    right: max(4vw, calc((100vw - var(--largeur_max)) / 2));
    width: min(40vw, 500px);
    height: auto;
    aspect-ratio: 1 / 1;
    transform: translateY(-46%);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.35), 0 0 80px rgba(201, 162, 39, 0.18);
}

.hero_media img
{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    filter: invert(1) sepia(1) saturate(2.4) hue-rotate(-8deg) brightness(0.92) contrast(1.05);
    mix-blend-mode: screen;
}

.hero::after
{
    background:
        radial-gradient(ellipse 46% 60% at 76% 46%, rgba(255, 214, 120, 0.16) 0%, rgba(255, 214, 120, 0.05) 45%, rgba(0, 0, 0, 0) 70%),
        linear-gradient(90deg, rgba(11, 9, 7, 0.92) 0%, rgba(11, 9, 7, 0.55) 48%, rgba(11, 9, 7, 0) 70%),
        linear-gradient(180deg, rgba(11, 9, 7, 0) 70%, rgba(11, 9, 7, 0.9) 100%);
}

.hero_contenu
{
    max-width: 56%;
}

.hero .surtitre
{
    color: var(--couleur_laiton_clair);
    background: rgba(42, 28, 18, 0.7);
    border: 1px solid color-mix(in srgb, var(--couleur_primaire) 55%, transparent);
}

.hero h1
{
    color: var(--couleur_texte);
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.8);
}

.hero_texte,
.hero_atouts
{
    color: color-mix(in srgb, var(--couleur_texte) 92%, transparent);
}

.hero_atouts li::before
{
    content: "⚙";
    color: var(--couleur_primaire);
}
/* HERO ================================================================ */

/* SECTIONS ============================================================ */
.section_alternee
{
    background:
        radial-gradient(ellipse at 20% 0%, rgba(201, 162, 39, 0.05) 0%, rgba(0, 0, 0, 0) 55%),
        linear-gradient(180deg, var(--couleur_surface) 0%, #120d09 100%);
    border-top: 1px solid var(--couleur_bordure);
    border-bottom: 1px solid var(--couleur_bordure);
}

.section_sombre
{
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 120%, rgba(181, 86, 43, 0.22) 0%, rgba(0, 0, 0, 0) 60%),
        linear-gradient(180deg, var(--couleur_cuir) 0%, var(--couleur_secondaire) 100%);
    color: var(--couleur_texte);
}

.section_sombre::before
{
    content: "";
    position: absolute;
    right: -70px;
    top: -70px;
    width: 240px;
    height: 240px;
    background: var(--engrenage) center / contain no-repeat;
    opacity: 0.1;
    pointer-events: none;
}

.deux_colonnes_image img
{
    border: 1px solid color-mix(in srgb, var(--couleur_primaire) 40%, transparent);
    filter: contrast(1.05) saturate(0.92);
}

.liste_atouts li::before
{
    background: var(--couleur_primaire_pale) var(--engrenage) center / 16px no-repeat;
    border: 1px solid color-mix(in srgb, var(--couleur_primaire) 45%, transparent);
}

.liste_atouts strong
{
    color: var(--couleur_laiton_clair);
}

.liste_communes li
{
    border-color: var(--couleur_bordure);
    background: var(--couleur_surface);
    color: var(--couleur_texte);
}
/* SECTIONS ============================================================ */

/* CARTES ============================================================== */
.carte
{
    background: linear-gradient(180deg, #1b130d 0%, var(--couleur_surface) 100%);
    border-color: color-mix(in srgb, var(--couleur_primaire) 30%, transparent);
}

.carte:hover
{
    border-color: color-mix(in srgb, var(--couleur_primaire) 70%, transparent);
}

.carte_image
{
    position: relative;
    background: #000000;
}

.carte_image img
{
    aspect-ratio: 4 / 3;
    filter: contrast(1.06) saturate(0.9);
}

.carte_image::after
{
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}

.carte_corps h3
{
    color: var(--couleur_laiton_clair);
}

.carte_prix
{
    padding-top: 12px;
    border-top: 1px dashed color-mix(in srgb, var(--couleur_primaire) 35%, transparent);
    color: var(--couleur_primaire);
}

/* Carte sans photo (poupées) : médaillon d'engrenage à la place de l'image */
.carte:not(:has(.carte_image)) .carte_corps::before
{
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin: -24px -24px 20px;
    width: calc(100% + 48px);
    background:
        var(--engrenage) center / 38% no-repeat,
        radial-gradient(circle at 50% 50%, rgba(201, 162, 39, 0.12) 0%, rgba(0, 0, 0, 0) 65%),
        #0e0a07;
    opacity: 0.9;
}
/* CARTES ============================================================== */

/* CHIFFRES ============================================================ */
.chiffre_valeur
{
    color: var(--couleur_laiton_clair);
    text-shadow: 0 0 24px rgba(201, 162, 39, 0.3);
}

.chiffre_libelle
{
    color: color-mix(in srgb, var(--couleur_texte) 85%, transparent);
}
/* CHIFFRES ============================================================ */

/* ZONE ================================================================ */
.carte_zone
{
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--couleur_cuir) 0%, var(--couleur_secondaire) 100%);
    border: 1px solid color-mix(in srgb, var(--couleur_primaire) 55%, transparent);
    color: var(--couleur_texte);
    box-shadow: var(--ombre_forte);
}

.carte_zone::before
{
    content: "";
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 160px;
    height: 160px;
    background: var(--engrenage) center / contain no-repeat;
    opacity: 0.14;
    pointer-events: none;
}

.carte_zone p
{
    font-family: var(--police_titres);
    font-size: 1.25rem;
    color: var(--couleur_laiton_clair);
}
/* ZONE ================================================================ */

/* FAQ ================================================================= */
.faq details
{
    background: var(--couleur_surface);
    border-color: var(--couleur_bordure);
}

.faq details[open]
{
    border-color: color-mix(in srgb, var(--couleur_primaire) 55%, transparent);
}

.faq summary
{
    color: var(--couleur_texte);
}
/* FAQ ================================================================= */

/* FORMULAIRE ========================================================== */
.formulaire_contact
{
    background: linear-gradient(180deg, #1b130d 0%, var(--couleur_surface) 100%);
    border-color: color-mix(in srgb, var(--couleur_primaire) 35%, transparent);
}

.champ input,
.champ select,
.champ textarea
{
    background: #0e0a07;
    border-color: color-mix(in srgb, var(--couleur_primaire) 30%, transparent);
    color: var(--couleur_texte);
}

.champ input::placeholder,
.champ textarea::placeholder
{
    color: color-mix(in srgb, var(--couleur_texte) 45%, transparent);
}
/* FORMULAIRE ========================================================== */

/* PIED ================================================================ */
.pied
{
    background: #070504;
    border-top: 1px solid color-mix(in srgb, var(--couleur_primaire) 35%, transparent);
    color: color-mix(in srgb, var(--couleur_texte) 80%, transparent);
}

.pied_titre
{
    color: var(--couleur_laiton_clair);
}
/* PIED ================================================================ */

/* BARRE_APPEL ========================================================= */
.barre_appel_principal,
.barre_appel_principal:hover
{
    background: var(--degrade_laiton);
    color: #1a120b;
}
/* BARRE_APPEL ========================================================= */

/* RESPONSIVE ========================================================== */
@media (min-width: 1180px)
{
    #prestations .grille_cartes
    {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1023px)
{
    .hero_contenu
    {
        max-width: 62%;
    }
}

@media (max-width: 767px)
{
    .hero
    {
        min-height: 92vh;
    }

    .hero_media
    {
        top: calc(var(--entete_hauteur) + 16px);
        right: 50%;
        width: 74vw;
        transform: translateX(50%);
        opacity: 0.55;
    }

    .hero::after
    {
        background:
            radial-gradient(ellipse 70% 40% at 50% 28%, rgba(255, 214, 120, 0.14) 0%, rgba(0, 0, 0, 0) 70%),
            linear-gradient(180deg, rgba(11, 9, 7, 0) 25%, rgba(11, 9, 7, 0.88) 58%, rgba(11, 9, 7, 0.96) 100%);
    }

    .hero_contenu
    {
        max-width: none;
    }

    .hero::before
    {
        width: 160px;
        height: 160px;
    }
}
/* RESPONSIVE ========================================================== */

/* MOUVEMENT_REDUIT ==================================================== */
@media (prefers-reduced-motion: reduce)
{
    .carte,
    .carte:hover
    {
        transform: none;
    }
}
/* MOUVEMENT_REDUIT ==================================================== */