/* Construction CRD — Maison neuve
   Conçu pour le pouce : la majorité du trafic vient des réseaux sociaux,
   sur téléphone. Le formulaire doit être atteignable sans réflexion.

   Les couleurs sont relevées sur le logo officiel : le bleu marine domine
   (emblème et lettrage CRD), le rouge n'y apparaît que sur la maison centrale.
   On garde cette hiérarchie : le bleu porte la marque, le rouge appelle
   à l'action — c'est le point focal du logo, c'en est un ici aussi. */

:root {
    --bleu:        #303c84;
    --bleu-fonce:  #26306b;
    --bleu-pale:   #f1f3fa;
    --bleu-trait:  #d5daee;

    --rouge:       #9c0c18;
    --rouge-fonce: #7d0a13;
    --rouge-pale:  #fdf2f3;

    --encre:       #181818;
    --encre-2:     #454b55;
    --encre-3:     #767d89;
    --trait:       #e4e6ea;
    --fond:        #f7f8fa;
    --blanc:       #ffffff;

    --rayon:       12px;
    --ombre:       0 1px 3px rgba(24,24,24,.06), 0 8px 30px rgba(24,24,24,.07);
    --ombre-forte: 0 4px 12px rgba(38,48,107,.10), 0 20px 60px rgba(38,48,107,.14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--encre);
    background: var(--blanc);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* Pleine largeur : plus de colonne centrale bornée. La marge latérale grandit
   avec l'écran pour que le contenu ne colle jamais au bord de la vitre. */
.enveloppe { width: 100%; margin: 0 auto; padding: 0 clamp(16px, 3vw, 52px); }

/* ---------- Barre du haut ---------- */

.barre {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.93);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--trait);
}
.barre-int {
    display: flex; align-items: center; justify-content: space-between;
    height: 72px; gap: 16px;
}
/* Le logo officiel est carré (emblème au-dessus du nom) : on le cale sur sa
   HAUTEUR, jamais sur sa largeur, sinon il s'écrase. */
.marque img { height: 54px; width: auto; }

.barre-actions { display: flex; align-items: center; gap: 10px; }

.barre-tel {
    display: inline-flex; align-items: center; gap: 7px;
    font-weight: 650; font-size: 14px;
    color: var(--rouge);
    padding: 8px 12px; border-radius: 8px;
    transition: background .15s;
}
.barre-tel:hover { background: var(--rouge-pale); }

.bascule {
    font-size: 13px; font-weight: 700; letter-spacing: .04em;
    padding: 7px 11px;
    border: 1px solid var(--trait); border-radius: 8px;
    color: var(--encre-2);
    transition: border-color .15s, color .15s;
}
.bascule:hover { border-color: var(--bleu); color: var(--bleu); }

/* ---------- Hero : vidéo pleine largeur, accroche à gauche, formulaire à droite

   Le principe de la page est là. Le visiteur arrive d'une capsule vidéo : il a
   déjà vu des maisons. On lui en remontre, en fond, sous un voile assez sombre
   pour que le texte blanc passe partout — puis on lui met le formulaire sous
   le nez, immédiatement, sans un seul défilement.                            */

.heros {
    position: relative;
    isolation: isolate;              /* le voile ne déborde pas sur la barre */
    overflow: hidden;
    background: var(--bleu-fonce);   /* couleur de repli avant l'affiche */
    padding: 44px 0 56px;
}

/* L'affiche est toujours là. La vidéo, quand elle est chargée, se pose par
   dessus, dans le même cadre. */
.heros-fond {
    position: absolute; inset: 0;
    z-index: -2;
    background: url('/assets/img/fond-affiche.jpg') center/cover no-repeat;
}
.heros-fond video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* Le voile n'est pas là pour cacher la vidéo — il est là pour que le texte
   blanc tienne dessus. Il n'en faut donc pas plus que le strict nécessaire :
   assez dense à gauche, sous le titre, et il s'efface vers la droite où la
   carte blanche se défend toute seule et où l'image peut respirer.
   Le titre porte en plus une ombre portée, ce qui permet de garder le voile
   plus léger qu'il ne le faudrait autrement. */
.heros-voile {
    position: absolute; inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg,
            rgba(12,16,38,.74) 0%,
            rgba(12,16,38,.52) 45%,
            rgba(12,16,38,.24) 100%);
}

/* Sur mobile, le texte passe au-dessus du centre de l'image (il n'y a plus de
   colonne de gauche) : il faut un peu plus de couverture, sans quoi le titre
   se perd dans les toitures claires. */
@media (max-width: 899px) {
    .heros-voile {
        background:
            linear-gradient(180deg,
                rgba(12,16,38,.78) 0%,
                rgba(12,16,38,.66) 55%,
                rgba(12,16,38,.58) 100%);
    }
}

.heros-int {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
}

.heros-texte { color: #fff; text-align: left; }

.sur-titre {
    display: inline-block;
    font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .11em;
    color: #fff;
    background: var(--rouge);
    padding: 7px 12px;
    border-radius: 5px;
    margin-bottom: 18px;
    max-width: 100%;
}

h1 {
    font-size: clamp(31px, 5.4vw, 60px);
    line-height: 1.03;
    letter-spacing: -.03em;
    font-weight: 800;
    color: #fff;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(0,0,0,.45);
}

.heros-accroche {
    margin-top: 20px;
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.55;
    color: #dfe3f1;
    max-width: 34em;
    text-wrap: pretty;
}

/* Le trait rouge sous l'accroche : le même geste que le soulignement rouge de
   l'exemple — il attire l'œil sur la promesse, puis le lâche vers le bouton. */
.heros-accroche::after {
    content: '';
    display: block;
    width: 74px; height: 3px;
    background: var(--rouge);
    margin-top: 22px;
    border-radius: 2px;
}

.heros-appel {
    margin-top: 22px;
    font-size: 15px;
    color: #b8bed6;
}
.heros-appel a {
    color: #fff; font-weight: 700;
    border-bottom: 2px solid var(--rouge);
    padding-bottom: 1px;
    white-space: nowrap;
}
.heros-appel a:hover { color: #ffd9dd; }

/* ---------- La bande de preuve, juste sous le hero ---------- */

.bande-preuves {
    background: var(--blanc);
    border-bottom: 1px solid var(--trait);
    box-shadow: var(--ombre);
    position: relative; z-index: 1;
}

.preuves {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 8px;
    list-style: none;
    padding-top: 28px;
    padding-bottom: 28px;
    text-align: center;
}
.preuves li { display: flex; flex-direction: column; }
.preuves strong {
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 800; letter-spacing: -.03em;
    color: var(--bleu);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.preuves span {
    font-size: 11.5px; color: var(--encre-3);
    text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
    margin-top: 5px;
}

/* ---------- Carte formulaire ---------- */

.carte-form {
    background: var(--blanc);
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0,0,0,.42);
    overflow: hidden;
    scroll-margin-top: 86px;
}

/* Le liséré rouge : c'est le premier trait de couleur de la carte, il attrape
   l'œil qui vient de quitter le titre blanc. */
.form-tete {
    padding: 22px 24px 18px;
    background: var(--bleu-fonce);
    border-top: 5px solid var(--rouge);
    color: #fff;
}
.form-tete h2 {
    font-size: 21px; font-weight: 700; letter-spacing: -.02em;
    margin-bottom: 3px;
}
.form-tete p { font-size: 14px; color: #b9c0e0; }

/* Deux champs courts côte à côte sur écran large, empilés sur mobile. */
.duo { display: grid; grid-template-columns: 1fr; gap: 0; }

.progres { height: 3px; background: var(--bleu-trait); }
.progres-part {
    height: 100%; width: 50%;   /* deux étapes : la première en vaut la moitié */
    background: var(--rouge);
    transition: width .32s cubic-bezier(.4,0,.2,1);
}

form { padding: 24px; }

.etape { display: none; border: 0; }
.etape.active { display: block; animation: entree .28s ease-out; }

@keyframes entree {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: none; }
}

.etape-titre {
    font-size: 18px; font-weight: 700;
    letter-spacing: -.015em;
    color: var(--bleu-fonce);
    margin-bottom: 5px; padding: 0;
}
.etape-aide {
    font-size: 14px; color: var(--encre-3);
    margin-bottom: 18px;
}

.champ { margin-bottom: 18px; }
.champ:last-of-type { margin-bottom: 22px; }

label {
    display: block;
    font-size: 14px; font-weight: 650;
    margin-bottom: 6px;
}
.facultatif { font-weight: 400; color: var(--encre-3); font-size: 13px; }

input[type=text], input[type=tel], input[type=email], select, textarea {
    width: 100%;
    padding: 13px 14px;
    font-size: 16px;              /* 16px : empêche iOS de zoomer au focus */
    font-family: inherit;
    color: var(--encre);
    background: var(--blanc);
    border: 1.5px solid var(--trait);
    border-radius: 10px;
    transition: border-color .14s, box-shadow .14s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--bleu);
    box-shadow: 0 0 0 3.5px var(--bleu-pale);
}
textarea { resize: vertical; min-height: 84px; }

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23767d89' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px;
}

/* Le rappel du Programme Accès Maison, posé là où l'objection budgétaire surgit */
.rappel {
    font-size: 13px; line-height: 1.5;
    color: var(--bleu-fonce);
    background: var(--bleu-pale);
    border-left: 3px solid var(--bleu);
    padding: 11px 13px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 20px;
}

.erreur {
    color: var(--rouge);
    font-size: 13px; font-weight: 500;
    margin-top: 6px;
    display: none;
}
.erreur.visible { display: block; }
.erreur-globale { margin-top: 12px; text-align: center; }

/* Le piège à robots : hors écran, jamais lu par un lecteur d'écran */
.rucher {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

.bouton {
    display: block; width: 100%;
    padding: 15px;
    background: var(--rouge); color: #fff;
    border: 0; border-radius: 10px;
    font-size: 16px; font-weight: 650;
    font-family: inherit;
    cursor: pointer;
    transition: background .14s, transform .08s;
}
.bouton:hover { background: var(--rouge-fonce); }
.bouton:active { transform: scale(.988); }
.bouton:disabled { opacity: .6; cursor: default; }

.bouton-fin {
    padding: 15px 20px;
    background: var(--blanc); color: var(--encre-2);
    border: 1.5px solid var(--trait); border-radius: 10px;
    font-size: 15px; font-weight: 600;
    font-family: inherit; cursor: pointer;
    flex-shrink: 0;
}
.bouton-fin:hover { border-color: var(--bleu); color: var(--bleu); }

.rangee { display: flex; gap: 10px; }
.rangee .bouton { flex: 1; }

.consentement {
    font-size: 12px; line-height: 1.5;
    color: var(--encre-3);
    margin-top: 16px;
    text-align: center;
}

.rassurance {
    font-size: 13px; color: var(--encre-3);
    text-align: center;
    padding: 14px 24px 20px;
    border-top: 1px solid var(--trait);
    background: var(--fond);
}

/* ---------- Confirmation ---------- */

.merci { padding: 48px 28px; text-align: center; }
.merci-coche {
    width: 58px; height: 58px;
    margin: 0 auto 20px;
    display: grid; place-items: center;
    background: var(--bleu-pale);
    color: var(--bleu);
    border-radius: 50%;
}
.merci h2 {
    font-size: 23px; font-weight: 700;
    letter-spacing: -.02em; margin-bottom: 10px;
    color: var(--bleu-fonce);
}
.merci p { color: var(--encre-2); font-size: 15.5px; max-width: 30em; margin: 0 auto; }
.merci-appel { margin-top: 22px !important; font-size: 14px !important; }
.merci-appel a { color: var(--rouge); font-weight: 700; }

/* ---------- Pourquoi CRD ---------- */

/* Pas de filet ici : la bande de preuves en pose déjà un juste au-dessus. */
.atouts { padding: 74px 0; }

.section-titre {
    font-size: clamp(24px, 4vw, 33px);
    font-weight: 700; letter-spacing: -.025em;
    color: var(--bleu-fonce);
    margin-bottom: 38px;
    text-wrap: balance;
}

.atouts-grille { display: grid; grid-template-columns: 1fr; gap: 26px; }
.atout { position: relative; padding-left: 46px; }
.atout-num {
    position: absolute; left: 0; top: 1px;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    background: var(--bleu-pale); color: var(--bleu);
    border-radius: 8px;
    font-size: 14px; font-weight: 700;
}
.atout h3 {
    font-size: 17.5px; font-weight: 700;
    letter-spacing: -.015em;
    color: var(--bleu-fonce);
    margin-bottom: 6px;
}
.atout p { color: var(--encre-2); font-size: 15px; }

/* ---------- Accès Maison ---------- */

/* Sans arrondi : la bande Accès Maison va franchement d'un bord à l'autre.
   Aucune marge basse non plus : elle porte le même bleu que le pied de page,
   et les deux doivent se toucher. La moindre marge laisserait passer une bande
   blanche entre deux aplats identiques — on verrait la couture. */
.acces { padding: 0; }
.acces-int {
    background: var(--bleu-fonce);
    color: #fff;
    padding: 40px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 30px; flex-wrap: wrap;
}
.etiquette {
    display: inline-block;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .09em;
    color: #a8b2dd;
    margin-bottom: 12px;
}
.acces-int h2 {
    font-size: clamp(21px, 3.4vw, 28px);
    font-weight: 700; letter-spacing: -.02em;
    margin-bottom: 10px;
    text-wrap: balance;
}
.acces-int p { color: #c2c8e4; font-size: 15px; max-width: 48em; }

.bouton-clair {
    width: auto; flex-shrink: 0;
    background: #fff; color: var(--bleu-fonce);
    padding: 15px 26px;
    text-align: center;
}
.bouton-clair:hover { background: #eef0f8; }

/* ---------- Pied de page ---------- */

.pied { background: var(--bleu-fonce); color: #a8afcd; padding: 52px 0 0; }
.pied-int {
    display: grid; grid-template-columns: 1fr; gap: 34px;
    padding-bottom: 40px;
}

/* Cartouche clair : le logo garde ses vraies couleurs (bleu, rouge, noir)
   au lieu d'être aplati en silhouette blanche sur le fond sombre. */
.pied-logo {
    display: inline-block;
    background: #fff;
    padding: 12px 16px;
    border-radius: 10px;
}
.pied-logo img { height: 82px; width: auto; }

.pied-infos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 22px;
}
.pied-infos dt {
    font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
    font-weight: 700; color: #7e86ab;
    margin-bottom: 4px;
}
.pied-infos dd { font-size: 14px; color: #dfe2ee; }
.pied-infos a:hover { color: #fff; }

.pied-bas {
    display: flex; justify-content: space-between; align-items: center;
    gap: 14px; flex-wrap: wrap;
    padding-top: 20px; padding-bottom: 24px;
    border-top: 1px solid #3b477f;
    font-size: 12.5px;
}
.pied-bas a:hover { color: #fff; }

/* Le numéro de licence RBQ : lisible, sans voler la vedette au reste du pied. */
.pied-rbq { color: #c6cbe0; letter-spacing: .01em; }

/* ---------- Bannière de consentement ---------- */

.consentement {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;                     /* au-dessus du bouton collé, qui vaut 40 */
    background: var(--bleu-fonce);
    color: #dfe2ee;
    box-shadow: 0 -6px 30px rgba(24,24,24,.28);
}
.consentement-int {
    display: grid; gap: 16px;
    padding-top: 18px; padding-bottom: 18px;
    align-items: center;
}
.consentement p {
    font-size: 13.5px; line-height: 1.55;
    margin: 0;
    max-width: 78ch;
}

.consentement-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

/* Refuser et accepter ont le MÊME poids visuel : même taille, même graisse,
   même surface. La Loi 25 veut que refuser soit aussi simple qu'accepter —
   un bouton pâle contre un bouton coloré serait un consentement arraché. */
.consentement-bouton {
    font-family: inherit;
    font-size: 15px; font-weight: 650;
    padding: 12px 22px;
    border-radius: 9px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background .14s, border-color .14s;
}
/* Strictement le même traitement pour les deux : même fond, même bordure,
   même couleur de texte. Un bouton plein contre un bouton contourné suffirait
   à orienter le choix, et un consentement orienté n'est pas un consentement. */
.consentement-accepter,
.consentement-refuser {
    background: transparent;
    color: #fff;
    border-color: #8b95c6;
}
.consentement-accepter:hover,
.consentement-refuser:hover {
    background: rgba(255,255,255,.12);
    border-color: #fff;
}

.consentement-bouton:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Tant que la bannière est là, le bouton collé disparaît : deux barres
   superposées au bas d'un téléphone, c'est une de trop. */
body.consentement-ouvert .appel-colle { display: none; }

@media (min-width: 760px) {
    .consentement-int { grid-template-columns: minmax(0, 1fr) auto; gap: 28px; }
    .consentement-actions { grid-template-columns: auto auto; }
}

/* ---------- Bouton collé (mobile) ---------- */

.appel-colle {
    position: fixed;
    left: 16px; right: 16px; bottom: 16px;
    z-index: 40;
    background: var(--rouge); color: #fff;
    padding: 15px; border-radius: 11px;
    text-align: center; font-weight: 650; font-size: 16px;
    box-shadow: 0 8px 26px rgba(156,12,24,.36);
    transition: opacity .22s, transform .22s;
}
/* Il s'efface quand le formulaire est à l'écran : il n'a plus de raison d'être. */
.appel-colle.parti {
    opacity: 0; transform: translateY(90px); pointer-events: none;
}

/* ---------- Écrans larges ---------- */

@media (min-width: 640px) {
    /* Quatre chiffres sur une ligne dès qu'il y a la place. */
    .preuves { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
    form { padding: 26px 28px; }
}

@media (min-width: 900px) {
    /* Le pli se sépare en deux : l'argument à gauche, la demande à droite.
       Le texte prend un peu plus de place que la carte — c'est lui qui doit
       convaincre ; la carte, elle, n'a qu'à être là. */
    .heros { padding: 64px 0 72px; }
    .heros-int {
        grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr);
        gap: 48px;
        align-items: center;
        min-height: 62vh;
    }

    .appel-colle { display: none; }
    .form-tete { padding: 24px 30px 20px; }
    .etape-titre { font-size: 20px; }

    .atouts-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 44px; }
    .pied-int { grid-template-columns: 260px 1fr; gap: 60px; }
}

@media (min-width: 1200px) {
    .heros-int { grid-template-columns: minmax(0, 1.1fr) 520px; gap: 72px; }

    .atouts-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
    .atout { padding-left: 0; padding-top: 42px; }
    .atout-num { top: 0; }
}

/* Très grands écrans : la carte peut respirer sans que les champs s'étirent.
   On l'élargit, et les champs courts se rangent en trois colonnes plutôt que
   de s'allonger — un champ « Prénom » de 500 px de large ne sert personne. */
@media (min-width: 1600px) {
    .heros-int { grid-template-columns: minmax(0, 1fr) 620px; gap: 90px; }
    form { padding: 30px 36px; }
}

/* ---------- Petits écrans ---------- */

@media (max-width: 420px) {
    .barre-int { height: 64px; }
    .marque img { height: 44px; }
    .barre-tel { padding: 8px; }
    .barre-tel span { display: none; }   /* l'icône suffit, le lien reste cliquable */
}

/* ---------- Accessibilité ---------- */

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}