/**
 * Surcharges propres au site — pré-lander d'assurance auto (US).
 *
 * Chargée après `style.css` par `cadre/header.twig` (fonction `CssExist`) :
 * une spécificité égale suffit à l'emporter : le seul `!important` du fichier
 * neutralise un utilitaire Bootstrap, qui en porte un lui-même.
 *
 * Reprend la maquette `documentation/auto-insurance-prelander-bootstrap/`.
 * Les blocs `hero`, `bandeau action` et `mention légale` en sont déjà issus et
 * sont stylés dans `style.css` : on ne redéfinit ici que la charte (couleurs)
 * et les quatre endroits où le rendu du moteur diffère de la maquette —
 * l'en-tête de marque, le visuel du hero, la section de saisie du code postal
 * et la grille d'arguments.
 */

/* ==============================================================
   # Charte
   ============================================================== */
:root {
    --accent-color: #0b6bdc;
    --accent-color-dark: #064fa8;
    --heading-color: #101828;
    --default-color: #475467;
    --contrast-color: #101828;
    --brand-green: #52b83f;
    --line-color: #d9e2ef;
    --soft-blue: #f3f8ff;
}

/* ==============================================================
   # En-tête : pastille + marque à gauche, accroche à droite
   ============================================================== */
.header {
    /* `style.css` force `--default-color` et `--heading-color` a #fff dans le
       header, pour un bandeau sur fond sombre. Sur le fond blanc de la
       maquette, le nom de la marque devenait invisible : seul « Quotes »,
       peint en vert par sa propre regle, restait lisible — d'ou un trou
       apparent entre la pastille et le nom. Les variables sont donc rendues au
       contexte clair, plutot que la couleur forcee sur chaque element. */
    --default-color: #475467;
    --heading-color: #101828;

    padding: 14px 0;
    background-color: #fff;
    border-bottom: 1px solid #e9eef5;
}

/* Le bloc header bascule en `container-fluid` des qu'il porte un texte : la
   marque se colle alors au bord de l'ecran, alors que la maquette l'aligne sur
   la grille du reste de la page. On rend au conteneur les largeurs d'un
   `.container` Bootstrap plutot que de deplacer la marque a la main. */
.header .container-fluid {
    max-width: 1140px;
    margin-right: auto;
    margin-left: auto;
}

.header .brand-link {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    color: var(--heading-color);
}

.header .brand-mark {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #fff;
    background: linear-gradient(145deg, var(--accent-color), var(--accent-color-dark));
    border-radius: 11px;
    box-shadow: 0 8px 20px rgb(11 107 220 / 18%);
}

.header .brand-name {
    font-family: var(--heading-font);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.header .brand-name__accent {
    color: var(--brand-green);
}

/* Le bloc header rend `texte2` dans un conteneur flottant à droite : on le
   remet dans l'axe de la marque plutôt que de le laisser décrocher. */
.header .bloc_textes {
    padding-top: 10px;
}

.header .header-baseline {
    color: #667085;
    font-size: 0.86rem;
}

@media (width <= 575.98px) {
    /* Sous 576 px l'accroche passerait sous la marque et pousserait le hero
       hors de l'écran : elle n'apporte rien que le titre ne dise déjà. */
    .header .bloc_textes {
        display: none;
    }
}

/* ==============================================================
   # Hero éditorial
   ============================================================== */
.hero-editorial {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 86% 12%, rgb(11 107 220 / 10%), transparent 26%),
        linear-gradient(180deg, #fff 0%, #fff 68%, #f5faff 100%);
}

.hero-editorial__titre {
    margin-bottom: 0;
    font-weight: 800;
    line-height: 1.02;
}

/* Seconde ligne du titre, en vert dans la maquette. `h1_bloc` est rendu
   echappe par le bloc hero : elle passe donc par `texte`, qui est en `|raw`
   (technique du « titre a deux niveaux », PROCEDURE_BASCULE_TEMPLATE.md § 4.2).
   La page conserve un seul H1. */
.hero-editorial__texte {
    margin-top: 0.35rem;
}

.hero-editorial__texte .hero-titre-suite {
    max-width: 720px;
    margin: 0 0 1.1rem;
    color: var(--brand-green);
    font-family: var(--heading-font);
    font-size: clamp(2.1rem, 4.4vw, 3.6rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.hero-editorial__texte .hero-copy {
    max-width: 640px;
    margin-bottom: 0;
    color: #344054;
    font-size: 1.15rem;
}

/* Les coches des arguments sont vertes dans la maquette, pas a l'accent du
   site : c'est la seule marque de validation de la page. */
.hero-editorial__avantages i {
    color: var(--brand-green);
}

/* Visuel de droite : voiture et bouclier dessinés en CSS, repris de la
   maquette. Aucune image ne rend ce visuel — c'est la raison d'être du champ
   `visuel_html` du bloc hero. Tout est décoratif (`aria-hidden` posé dans le
   contenu du bloc). */
.hero-visual {
    display: grid;
    place-items: center;
    min-height: 360px;
}

.hero-orb {
    display: grid;
    place-items: center;
    width: min(430px, 90vw);
    aspect-ratio: 1.26;
    background: linear-gradient(145deg, #eff7ff, #d9ecff);
    border-radius: 48% 52% 42% 58% / 55% 43% 57% 45%;
    box-shadow: inset 0 0 0 1px rgb(11 107 220 / 6%), 0 30px 80px rgb(11 107 220 / 12%);
}

.hero-icon-stack {
    position: relative;
    width: 230px;
    height: 190px;
}

.hero-shield {
    position: absolute;
    top: 0;
    left: 50%;
    display: grid;
    place-items: center;
    width: 126px;
    height: 126px;
    color: #fff;
    background: linear-gradient(145deg, #1380ef, #0750a8);
    border: 8px solid #a9d7ff;
    border-radius: 28px 28px 48px 48px;
    box-shadow: 0 18px 35px rgb(6 79 168 / 20%);
    transform: translateX(-50%);
}

.hero-shield i {
    font-size: 3.4rem;
}

.hero-car {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 230px;
    height: 94px;
    background: linear-gradient(180deg, #fff, #e8eef5);
    border: 1px solid #cdd8e6;
    border-radius: 42px 42px 26px 26px;
    box-shadow: 0 20px 30px rgb(16 24 40 / 18%);
    transform: translateX(-50%);
}

.hero-car::before {
    position: absolute;
    top: -27px;
    left: 52px;
    width: 126px;
    height: 52px;
    content: "";
    background: linear-gradient(145deg, #c9e2f7, #84afd4);
    border: 1px solid #739ab8;
    border-radius: 48px 48px 12px 12px;
}

.hero-wheel {
    position: absolute;
    bottom: -16px;
    width: 38px;
    height: 38px;
    background: #17202a;
    border: 7px solid #394554;
    border-radius: 50%;
}

.hero-wheel--front {
    left: 34px;
}

.hero-wheel--rear {
    right: 34px;
}

@media (width <= 991.98px) {
    .hero-visual {
        min-height: 300px;
        margin-top: 28px;
    }
}

@media (width <= 575.98px) {
    .hero-visual {
        min-height: 250px;
    }

    .hero-orb {
        width: 320px;
    }
}

/* ==============================================================
   # Saisie du code postal (bloc redirection, `#quote`)
   ==============================================================
   La maquette pose une carte claire en deux colonnes — le titre a gauche, le
   champ et son bouton cote a cote a droite —, la ou le bloc rend une colonne
   centree sur fond sombre. On redeclare les variables du contexte plutot que
   d'ecraser chaque regle, puis on remet la grille et les quelques proprietes
   que `style.css` avait figees en clair pour un fond sombre. */
#quote-intro.bloc-html-personnalise {
    padding: 0;
}

.quote-intro {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.5rem 0.75rem;
}

.quote-intro__amorce {
    color: var(--heading-color);
    font-weight: 700;
}

.quote-intro__amorce i {
    margin-left: 0.4rem;
    color: var(--accent-color);
}

.quote-intro__note {
    color: #667085;
    font-size: 0.79rem;
}

@media (width <= 767.98px) {
    /* La note tient sur une ligne ou pas du tout : empilee sous l'amorce elle
       repousse la carte, qui est ce qu'on vient chercher. */
    .quote-intro__note {
        display: none;
    }
}

#quote.details.dark-background {
    --background-color: #fff;
    --default-color: #475467;
    --heading-color: #101828;
    --surface-color: #fff;

    padding: 0 0 28px;
    text-align: left;
}

#quote .features-item {
    /* Une `.row` Bootstrap porte des marges negatives de 15 px : sans ce
       recadrage, la carte deborderait du conteneur des deux cotes et ne
       s'alignerait ni sur le hero, ni sur le carrousel qui la suit. */
    margin-right: 0;
    margin-left: 0;
    padding: clamp(1.3rem, 4vw, 2.4rem);
    background: #fff;
    border: 1px solid var(--line-color);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgb(16 24 40 / 5%);
}

/* Tout le bloc est rendu dans une seule colonne Bootstrap : la grille se pose
   donc ici, sur son contenu, et le formulaire occupe les deux rangees. */
#quote .features-item > .col-md-12 {
    display: grid;
    padding: 0;
    grid-template-columns: 5fr 7fr;
    column-gap: 2.5rem;
    align-items: center;
}

#quote h2 {
    grid-column: 1;
    align-self: end;
    margin: 0 0 0.4rem;
    font-size: 1.55rem;
    font-weight: 800;
}

#quote .cta-text {
    grid-column: 1;
    align-self: start;
    color: #667085;
}

#quote .redirection-form {
    display: grid;
    grid-column: 2;
    grid-row: 1 / span 2;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    max-width: none;
    margin: 0;
}

#quote .redirection-form__field {
    grid-column: 1;
    margin-bottom: 0;
}

/* Le libelle reste lu par les lecteurs d'ecran mais sort du flux, comme dans
   la maquette : le champ porte deja « Enter ZIP code » en texte d'exemple. */
#quote .redirection-form__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip-path: inset(50%);
}

#quote .redirection-form__input {
    min-height: 58px;
    color: var(--heading-color);
    background: #fff;
    border: 1px solid #cbd6e4;
    border-radius: 11px;
}

#quote .redirection-form__input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgb(11 107 220 / 15%);
}

#quote .redirection-form__submit {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    min-height: 58px;
    padding: 0 1.5rem;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 10px 22px rgb(11 107 220 / 16%);
}

#quote .redirection-form__mention {
    grid-column: 1 / -1;
    margin: 0.35rem 0 0;
    color: #667085;
    font-size: 0.79rem;
    text-align: left;
}

#quote .redirection-form__mention a {
    color: var(--accent-color-dark);
}

#quote .redirection-form__error {
    color: #b42318;
}

@media (width <= 767.98px) {
    /* Empile : titre, texte, puis champ et bouton pleine largeur. La cible
       tactile ne doit pas se reduire a un coin de la carte. */
    #quote .features-item > .col-md-12,
    #quote .redirection-form {
        grid-template-columns: 1fr;
    }

    #quote .redirection-form {
        grid-row: auto;
        grid-column: 1;
        margin-top: 1.25rem;
    }

    #quote .redirection-form__submit {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
    }
}

/* ==============================================================
   # Assureurs cités (bloc HTML personnalisé)
   ==============================================================
   Carrousel repris de la maquette. Celle-ci est en Bootstrap 5 (`data-bs-*`),
   le site en Bootstrap 4 : le balisage du bloc utilise `data-target` /
   `data-slide`, et les controles sont restyles — Bootstrap 4 les pose en
   colonnes de 15 % de large, a demi transparentes, sur toute la hauteur. */
.provider-shell {
    position: relative;
    padding: 1.15rem 3.35rem 1.45rem;
    background: #fff;
    border: 1px solid var(--line-color);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgb(16 24 40 / 5%);
}

.provider-shell__titre {
    margin-bottom: 0.75rem;
    font-weight: 700;
    font-size: 0.95rem;
    text-align: center;
}

.provider-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
    align-items: center;
}

.provider-logo {
    display: grid;
    place-items: center;
    min-height: 76px;
    padding: 0.75rem;
    color: #23324a;
    font-weight: 800;
    font-size: clamp(0.86rem, 1.3vw, 1.04rem);
    letter-spacing: -0.025em;
    text-align: center;
    border-right: 1px solid #e4eaf2;
}

.provider-logo:last-child {
    border-right: 0;
}

.provider-shell .carousel-control-prev,
.provider-shell .carousel-control-next {
    top: 50%;
    bottom: auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--accent-color);
    font-size: 1rem;
    background: #fff;
    border: 1px solid #dce5f0;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgb(16 24 40 / 8%);
    opacity: 1;
    transform: translateY(-50%);
}

.provider-shell .carousel-control-prev:hover,
.provider-shell .carousel-control-next:hover,
.provider-shell .carousel-control-prev:focus,
.provider-shell .carousel-control-next:focus {
    color: var(--accent-color-dark);
    background: var(--soft-blue);
    opacity: 1;
}

.provider-shell .carousel-control-prev {
    left: 10px;
}

.provider-shell .carousel-control-next {
    right: 10px;
}

.provider-mention {
    margin: 0.75rem 0 0;
    color: #667085;
    font-size: 0.79rem;
    text-align: center;
}

@media (width <= 991.98px) {
    .provider-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .provider-logo {
        min-height: 66px;
    }

    .provider-logo:nth-child(3n) {
        border-right: 0;
    }
}

@media (width <= 575.98px) {
    .provider-shell {
        padding-right: 2.8rem;
        padding-left: 2.8rem;
    }

    .provider-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .provider-logo {
        min-height: 60px;
        font-size: 0.84rem;
        border-right: 1px solid #e4eaf2;
    }

    .provider-logo:nth-child(2n) {
        border-right: 0;
    }

    /* Cinquieme nom masque : a deux colonnes il resterait seul sur sa ligne,
       comme dans la maquette. */
    .provider-logo:nth-child(5) {
        display: none;
    }
}

/* ==============================================================
   # Arguments (bloc avantages icones texte 1)
   ==============================================================
   La maquette presente quatre cartes blanches centrees ; le bloc rend des
   colonnes `col-md-4` nues sur fond sombre. On redeclare la palette du
   contexte, puis on passe la rangee en grille : le cadre de la carte se pose
   alors sur la colonne elle-meme sans supprimer les gouttieres, ce qu'une
   bordure posee sur un `.col-*` Bootstrap ne permet pas. */
.alt-features.dark-background {
    --background-color: #fff;
    --default-color: #475467;
    --heading-color: #101828;

    padding: 34px 0 14px;
}

.alt-features h2 {
    color: var(--heading-color);
    font-size: 1.6rem;
}

.alt-features .row.gy-5 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
}

.alt-features .icon-box {
    flex: none;
    flex-direction: column;
    align-items: center;
    max-width: none;

    /* Le bloc pose `mb-2` sur chaque article : l'utilitaire Bootstrap porte
       `!important`, il ne se neutralise pas a la specificite. Sans cela, une
       demi-marge s'ajoute sous chaque carte et la gouttiere du haut ne
       repond plus a celle du bas. */
    margin-bottom: 0 !important;
    padding: 1.5rem 1.15rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line-color);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgb(16 24 40 / 5%);
}

.alt-features .icon-box .icone {
    display: grid;
    place-items: center;
    width: 58px;
    max-width: 58px;
    height: 58px;
    margin: 0 0 1rem;
    background: var(--soft-blue);
    border-radius: 15px;
}

.alt-features .icon-box img {
    width: 28px;
    height: 28px;
    margin-right: 0;
}

.alt-features .icon-box h3 {
    font-size: 1.02rem;
    font-weight: 700;
}

.alt-features .icon-box p {
    font-size: 0.92rem;
}

@media (width <= 991.98px) {
    /* Deux colonnes, comme le `col-6` de la maquette : quatre cartes en pile
       repousseraient le bas de page hors de portee sur telephone. */
    .alt-features .row.gy-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==============================================================
   # Pied de page (`cadre/footer.twig`)
   ==============================================================
   Le gabarit ne porte plus la classe `footer` de `style.css` (fond #333,
   colonnes, logo) : il rend la bande claire de la maquette. Ne restent ici que
   ses quelques regles propres. */
.site-footer {
    padding: 20px 0 32px;
    color: #58667a;
    font-size: 0.82rem;
    background: #fff;
    border-top: 1px solid #e5ebf3;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.4rem;
    align-items: center;
    margin-bottom: 0.9rem;
}

.site-footer__links a,
.site-footer__cookies {
    color: #344054;
    font-size: 0.82rem;
}

.site-footer__links a:hover,
.site-footer__cookies:hover {
    color: #344054;
    text-decoration: underline;
}

.site-footer__cookies {
    padding: 0;
    font-family: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.site-footer__baseline {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    justify-content: space-between;
}

@media (width >= 768px) {
    .site-footer__baseline {
        flex-direction: row;
    }
}