/* ---------------------------------------------------------------------------
   Surcouche propre au site sector-alarm-es.

   Chargée par templates/1/cadre/header.twig via CssExist(), après style.css et
   default.css. C'est le point d'accroche des correctifs site : les fichiers du
   thème sont écrasés à chaque mise à jour depuis le template, pas celui-ci.
   --------------------------------------------------------------------------- */


/* --- Footer : lisibilité ---------------------------------------------------
   footer.twig porte `class="footer dark-background"`. .dark-background bascule
   --heading-color à #fff (style.css:34-40), or .footer calcule son fond avec
   `color-mix(in srgb, var(--heading-color), transparent 97%)` (style.css:520-527) :
   du blanc à 3 % sur le fond blanc du body, donc blanc. Le texte, lui, est
   #fff via --default-color. Résultat : blanc sur blanc, contraste 1:1.
   On repose un fond sombre explicite, cohérent avec le logo Sector Alarm. */
#site-footer.footer {
    background-color: #1d1d1b;
    color: #fff;
    border-top: 0;
}

#site-footer.footer .footer-links ul a,
#site-footer.footer .copyright,
#site-footer.footer .footer-legal {
    color: rgba(255, 255, 255, 0.88);
}

/* --accent-color (#ff1d1e) ne donne que 4,4:1 sur #1d1d1b : sous le seuil AA.
   Même rouge de marque, éclairci pour passer. */
#site-footer.footer .footer-links ul a:hover,
#site-footer.footer .footer-links ul a:focus-visible {
    color: #ff5a5b;
}

/* .footer impose font-size:14px, et les mentions légales sont en <small> (80 %),
   soit 11,2 px pour du texte juridique lu au pouce. */
#site-footer.footer .footer-legal small,
#site-footer.footer .copyright {
    font-size: 13px;
    line-height: 1.6;
}


/* --- Formulaire : espacement -----------------------------------------------
   sector-alarm.twig:32 utilise `class="row gy-4"`, une syntaxe de gouttières
   Bootstrap 5. Le site tourne en Bootstrap 4.6.2 : `gy-4` n'existe pas, et les
   enfants de la .row sont des .input-group, pas des .col-*. Il ne reste donc
   que le `margin: 0 -15px` de .row, sans la compensation qu'apportent les
   colonnes. Trois effets : aucun espacement vertical entre les champs, les
   20 px de padding de .bloc (style.css:1857) réduits à 5 px, et le bouton
   d'envoi qui remonte sur la même ligne flex que les mentions légales.
   On sort du contexte flex : chaque bloc reprend sa ligne, avec sa marge. */
#form_service > .row {
    display: block;
    margin-right: 0;
    margin-left: 0;
}

#form_service > .row > .input-group,
#form_service > .row > .custom-control,
#form_service > .row > .form-group {
    margin-bottom: 1rem;
}

#form_service > .row > hr {
    margin: 1.5rem 0;
}

/* Le bloc date de naissance combine form-row (margin: 0 -5px) et w-100 : il
   ressortait au ras du bord du cadre gris. */
#form_service .form-row {
    margin-right: 0;
    margin-left: 0;
}

#form_service .form-row > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
    margin-bottom: 0.5rem;
}

/* Les champs zipcode et phone portent type="code-postal" et type="phone", qui
   ne sont pas des types HTML : le sélecteur input[type="text"] de style.css:1920
   ne les atteint pas et ils gardent le padding Bootstrap, d'où un alignement
   irrégulier avec les autres champs. On cible la classe plutôt que le type.
   font-size 16px : en dessous, iOS Safari zoome la page à la mise au point. */
#form_service .form-control {
    height: auto;
    min-height: 46px;
    padding: 10px 15px;
    font-size: 16px;
    text-align: left;
}

/* .bloc { text-align: center } (style.css:1863) déteignait sur le libellé de
   l'optin, qui est un pavé de texte. */
#form_service .custom-control-label {
    text-align: left;
}

/* Le bouton d'envoi n'avait pas de largeur et faisait ~38 px de haut : sous les
   44 px recommandés pour une cible tactile, et noyé à côté du texte légal. */
#form_service .form-group {
    margin-bottom: 0;
}

#form_service #btn_submit {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 12px 24px;
    font-size: 1.0625rem;
    font-weight: 700;
    border: 0;
    border-radius: 4px;
}

/* #cgu_form est en line-height:1 (default.css:12-16) : illisible sur un pavé
   juridique de plusieurs lignes. */
#form_service #cgu_form,
#cgu_form {
    line-height: 1.5;
}


/* --- Rendu par blocs (bloc_gauche_form) ------------------------------------
   Depuis la bascule sur template_sectoralarmes01, le formulaire est rendu dans
   une <section class="hero dark-background"> et non plus dans .contact. Deux
   effets à reprendre. */

/* 1. bloc_gauche_form pose <img class="hero-bg"> alors que style.css:825 donne
      déjà le même visuel en background à .hero : sans règle de positionnement,
      l'image s'ajoute dans le flux et le fond apparaît deux fois. On la remet
      en couche de fond, à la place que le template lui destine. */
.hero .hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero > .container {
    position: relative;
    z-index: 1;
}

/* 2. .dark-background bascule --default-color à #fff (style.css:34-40). Le
      cadre du formulaire est clair (#f3f3f3, style.css:1857) mais héritait de
      ce blanc : libellés, mentions de consentement et texte légal devenaient
      illisibles — le même piège que le footer. On repose une couleur sombre. */
.hero .bloc,
.hero .bloc p,
.hero .bloc label,
.hero .bloc small,
.hero .bloc .custom-control-label,
.hero .bloc #cgu_form {
    color: #1d1d1b;
}

.hero .bloc a {
    color: var(--accent-color, #ff1d1e);
}


/* --- Couleurs de marque dans les blocs -------------------------------------
   bloc_faq et bloc_texte_image s'appuient sur .btn-link et .btn-primary, que
   Bootstrap peint en bleu (#007bff). Sans reprise, la FAQ et les appels à
   l'action tranchent avec le rouge Sector Alarm du reste de la page. */
#faq-accordion .btn-link {
    color: var(--accent-color, #ff1d1e);
    font-weight: 600;
    text-align: left;
    white-space: normal;
}

#faq-accordion .btn-link:hover,
#faq-accordion .btn-link:focus {
    color: #c40f10;
    text-decoration: none;
}

.main .btn-primary,
section .btn-primary {
    background-color: var(--accent-color, #ff1d1e);
    border-color: var(--accent-color, #ff1d1e);
}

.main .btn-primary:hover,
.main .btn-primary:focus,
section .btn-primary:hover,
section .btn-primary:focus {
    background-color: #c40f10;
    border-color: #c40f10;
}


/* --- En-tête : alignement sur la production --------------------------------
   Avant la bascule, l'en-tête venait de cadre/navbar.twig : une barre sombre
   fixée en haut, logo à gauche et accroche à droite sur une seule ligne. Le
   rendu par blocs passe par bloc_header.twig, dont le balisage empile le logo
   puis les textes dans une grille, et .bloc_textes n'a aucun style dans le
   thème — d'où un en-tête clair et déstructuré.

   Le fond sombre venait de `.index-page .header` (style.css:196), la classe
   index-page étant posée sur le <body> par cadre.twig. Le rejeu a écrasé ce
   fichier et la classe a disparu. On repose la couleur directement plutôt que
   de remettre la classe : cadre.twig sera écrasé au prochain rejeu, pas ce
   fichier. */
#site-header.header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 997;
    background-color: #1d1d1b;
    padding: 12px 0;
}

#site-header.header > .container-fluid {
    max-width: 1320px;
    margin: 0 auto;
    padding-right: 15px;
    padding-left: 15px;
}

#site-header.header .col-12 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

#site-header.header .logo {
    flex: 0 0 auto;
    margin-right: auto;
}

#site-header.header .logo img {
    max-height: 50px;
    width: auto;
}

#site-header.header .bloc_textes {
    flex: 0 1 auto;
    text-align: right;
}

#site-header.header .bloc_texte_1,
#site-header.header .bloc_texte_2 {
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    line-height: 1.4;
}

/* L'en-tête étant sorti du flux, le premier bloc passerait dessous. */
#main-content > section:first-child {
    padding-top: 110px;
}

@media (max-width: 767.98px) {
    #site-header.header .col-12 {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    #site-header.header .logo {
        margin-right: 0;
    }

    #site-header.header .bloc_textes {
        text-align: center;
        flex-basis: 100%;
    }

    #site-header.header .bloc_texte_1 {
        font-size: 13px;
    }

    #main-content > section:first-child {
        padding-top: 130px;
    }
}


/* Titre du hero : en production il est servi dans .contact, qui le peint en
   blanc avec une ombre portée (style.css:1883). Le rendu par blocs le place
   dans .hero, dont la règle (style.css:829) le met en --accent-color : du rouge
   sur une photo claire, peu lisible et différent de la production. */
#lead-form.hero h1 {
    color: #fff;
    font-size: 50px;
    font-weight: 800;
    text-shadow: 2px 2px 4px #000;
}

@media (max-width: 767.98px) {
    #lead-form.hero h1 {
        font-size: 32px;
        line-height: 1.2;
    }
}

.hero p{
    font-size:12px;
}