:root {
    --blue-light: #1e46a2;
    --blue-dark: #102556;
    --orange: #f85717;
    --orange-text: #ff4100;
    --ink: #333333;
    --white: #ffffff;
    --muted: rgba(255, 255, 255, 0.8);

    --page: 900px;
    --card-w: 305px;
    --card-h: 70px;
    --field-cp-w: 380px;
    --fields-2-w: 622px;

    --fs-h1: 60px;      --lh-h1: 63px;
    --fs-sup: 27px;
    --fs-lead: 25px;    --lh-lead: 30px;
    --fs-question: 25px;--lh-question: 30px;
    --fs-choice: 25px;
    --fs-field: 24px;
    --fs-cp: 28px;
    --fs-btn: 25px;
    --fs-btn-lg: 30px;  --lh-btn-lg: 31px;
    --fs-micro: 13px;   --lh-micro: 21px;
    --fs-error: 18px;   --lh-error: 24px;
    --lh-rgpd: 17px;
    --fs-note: 16px;    --lh-note: 21px;
    --fs-ribbon: 20px;  --lh-ribbon: 22px;
    --fs-legal: 16px;   --lh-legal: 21px;
}

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

[hidden] { display: none !important; }

body {
    background: var(--white);
    color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: var(--fs-legal);
    line-height: var(--lh-legal);
    -webkit-text-size-adjust: 100%;
}

::selection { background: var(--orange); color: var(--white); }

* { scrollbar-color: var(--blue-light) var(--blue-dark); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--blue-dark); }
::-webkit-scrollbar-thumb { background: var(--blue-light); }

/* --- Le bloc d'accueil : hero + bandeau de logos, au moins un ecran --- */

.above {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.hero {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 42px 0 14px 0;
    background: radial-gradient(ellipse at 52% 45%, var(--blue-light) 0%, var(--blue-dark) 100%);
    color: var(--white);
    text-align: center;
}

.container {
    width: 100%;
    max-width: var(--page);
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Bandeau coin haut droit --- */

.ribbon {
    position: absolute;
    top: 11px;
    right: 0;
    z-index: 2;
    padding: 4px 12px;
    background: #000000;
    color: var(--white);
    font-size: var(--fs-ribbon);
    font-weight: 700;
    line-height: var(--lh-ribbon);
}

/* --- Titres --- */

h1 {
    font-size: var(--fs-h1);
    font-weight: 700;
    line-height: var(--lh-h1);
}

/* Largeur nulle : l'appel de note deborde a droite et ne decale pas le
   centrage de la ligne. */
h1 .nowrap { white-space: nowrap; }

h1 sup {
    display: inline-block;
    width: 0;
    margin-left: 10px;
    font-size: var(--fs-sup);
    line-height: 0;
    vertical-align: 12px;
}

.lead {
    margin-top: 26px;
    font-size: var(--fs-lead);
    font-weight: 700;
    line-height: var(--lh-lead);
}

.lead span { color: var(--orange-text); }

.question {
    display: block;
    width: 100%;
    margin-bottom: 18px;
    font-size: var(--fs-question);
    font-weight: 700;
    line-height: var(--lh-question);
}

/* --- Formulaire --- */

#lead-form { margin-top: 49px; }

/* Les etapes suivantes sont cachees des l'analyse du HTML, sinon elles
   apparaissent le temps que formulaire.js s'execute. La classe js est posee
   dans le head et retiree par formulaire.js, qui prend le relais avec hidden.
   Sans JavaScript, la classe reste absente et tout s'affiche. */
.js .step + .step,
.js .stop { display: none; }

/* min-width : sans ca un fieldset refuse de passer sous la largeur de
   son contenu et les cartes debordent en dessous de 345px. */
.step { min-width: 0; border: 0; }

.choices {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

/* Le radio reste focusable, le label fait le bouton. */
.choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.choice {
    position: relative;
    display: flex;
    align-items: center;
    width: var(--card-w);
    max-width: 100%;
    height: var(--card-h);
    padding: 0 30px 0 22px;
    border-radius: 5px;
    background: var(--white);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    color: var(--ink);
    font-size: var(--fs-choice);
    font-weight: 700;
    line-height: 1.1;
    text-align: left;
    cursor: pointer;
}

.choice img {
    flex: 0 0 auto;
    margin-right: 30px;
}

.choice::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 30px;
    width: 10px;
    height: 16px;
    transform: translateY(-50%);
    background: url("img/chevron.svg") no-repeat center / contain;
    transition: transform 0.2s ease;
}

.choice:hover::after { transform: translateY(-50%) translateX(5px); }

.choice:focus-within { outline: 3px solid var(--orange); outline-offset: 3px; }

.choice input:checked ~ .choice-label { color: var(--orange-text); }

/* --- CTA --- */

/* Le bouton se dimensionne sur son texte : un wording plus court donne un
   bouton plus court. */
.btn-cta {
    display: inline-block;
    max-width: 100%;
    margin: 20px auto 0 auto;
    padding: 17px 30px;
    border: 1px solid var(--white);
    border-radius: 5px;
    background: var(--orange);
    color: var(--white);
    font-family: inherit;
    font-size: var(--fs-btn);
    font-weight: 700;
    line-height: 26px;
    text-transform: uppercase;
    cursor: pointer;
}

/* Le CTA qui fait avancer porte le meme chevron que les cartes. */
.btn-next { position: relative; padding-right: 60px; }

.btn-next::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 26px;
    width: 10px;
    height: 16px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5L7.5 7.5L1.5 13.5'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform 0.2s ease;
}

.btn-next:hover::after { transform: translateY(-50%) translateX(5px); }

/* Les etapes de saisie portent un CTA plus gros que celui du premier clic. */
.btn-lg {
    font-size: var(--fs-btn-lg);
    line-height: var(--lh-btn-lg);
}

.btn-lg.btn-next::after { width: 12px; height: 19px; }

.btn-cta:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

.btn-cta[disabled] { opacity: 0.7; cursor: progress; }

.micro {
    margin-top: 6px;
    color: var(--muted);
    font-size: var(--fs-micro);
    font-weight: 400;
    line-height: var(--lh-micro);
}

/* --- Champs --- */

/* Deux colonnes de la largeur d'une carte. */
.fields-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: var(--fields-2-w);
    max-width: 100%;
    margin: 0 auto;
}

.fields-2 .field { width: auto; margin: 0; }

.field {
    position: relative;
    width: var(--card-w);
    max-width: 100%;
    margin: 0 auto 12px auto;
    text-align: left;
}

.field input {
    width: 100%;
    height: var(--card-h);
    padding: 24px 19px 8px 19px;
    border: 1px solid #c3cada;
    border-radius: 5px;
    background: var(--white);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--fs-field);
    font-weight: 700;
    line-height: 1;
}

/* Le libelle tient lieu de placeholder, puis monter au-dessus de la saisie.
   Il reste lisible pendant la frappe, et l'input garde son attribut for. */
.field label {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    color: #6f768a;
    font-size: var(--fs-field);
    line-height: 1;
    pointer-events: none;
    transition: top 0.15s ease, font-size 0.15s ease;
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label {
    top: 10px;
    transform: none;
    font-size: var(--fs-micro);
}

.field input:focus {
    outline: 3px solid var(--orange);
    outline-offset: 2px;
    border-color: var(--orange);
}

.field input[aria-invalid="true"] { border-color: var(--orange-text); }

/* Cinq chiffres : le champ peut se permettre une grosse saisie. */
.field-cp { width: var(--field-cp-w); }

#cp { font-size: var(--fs-cp); }

/* Erreur d'etape : centree sous les cartes. */
.error {
    margin: 14px auto 0 auto;
    color: #ffd2c4;
    font-size: var(--fs-error);
    line-height: var(--lh-error);
}

/* Erreur d'un champ : collee sous lui, a sa largeur. */
.field .error {
    width: auto;
    margin: 6px 0 0 0;
    font-size: var(--fs-micro);
    line-height: var(--lh-micro);
    text-align: left;
}

.rgpd {
    width: var(--fields-2-w);
    max-width: 100%;
    margin: 12px auto 0 auto;
    color: var(--muted);
    font-size: var(--fs-micro);
    line-height: var(--lh-rgpd);
}

.rgpd a { color: inherit; }

.hero-note {
    margin-top: auto;
    padding: 40px 20px 0 20px;
    font-size: var(--fs-note);
    line-height: var(--lh-note);
}

/* Piege a robots */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Ecran d'arret : le visiteur n'est pas eligible --- */

.stop-texte {
    max-width: 440px;
    margin: 0 auto;
    font-size: var(--fs-note);
    line-height: var(--lh-note);
}

/* --- Page de remerciement --- */

.merci-texte {
    max-width: 560px;
    margin: 24px auto 0 auto;
    font-size: var(--fs-note);
    line-height: 1.5;
}

.merci-texte a { color: inherit; }

/* --- Bandeau de confiance --- */

.trust {
    display: flex;
    flex-wrap: wrap;
    gap: 28px 46px;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    background: var(--white);
}

/* --- Suite de la page --- */

.estimation {
    padding: 61px 20px 0 20px;
    background: var(--white);
    text-align: center;
}

/* 920 et non 900 : la phrase tient sur une ligne comme dans la maquette. */
.estimation p {
    max-width: 920px;
    margin: 0 auto;
}

.estimation a { color: inherit; }

.site-footer {
    padding: 40px 20px 50px 20px;
    background: var(--white);
    text-align: center;
    font-size: var(--fs-note);
    line-height: var(--lh-note);
}

/* Mention obligatoire : le lien ne se distingue pas du texte. */
.footer-note {
    max-width: var(--page);
    margin: 0 auto 18px auto;
}

.footer-note a {
    color: inherit;
    text-decoration: none;
}

.legal-links a {
    color: var(--ink);
    margin: 0 10px;
}

/* --- Responsive --- */

@media (max-width: 900px) {
    :root {
        --fs-h1: 50px;  --lh-h1: 53px;
        --fs-sup: 23px;
        --fs-lead: 22px; --lh-lead: 27px;
    }
    h1 sup { vertical-align: 10px; }
}

@media (max-width: 640px) {
    :root {
        --fs-h1: 40px;      --lh-h1: 44px;
        --fs-sup: 18px;
        --fs-lead: 20px;    --lh-lead: 25px;
        --fs-question: 22px;--lh-question: 27px;
        --fs-ribbon: 12px;  --lh-ribbon: 14px;
        --fs-btn-lg: 26px;  --lh-btn-lg: 30px;
    }

    h1 sup { vertical-align: 8px; }
    .hero { padding-top: 43px; }
    .ribbon { top: 12px; padding: 3px 8px; }
    .lead { margin-top: 34px; }
    #lead-form { margin-top: 33px; }
    .btn-cta { margin-top: 26px; }
    .micro { margin-top: 9px; }
    .fields-2 { grid-template-columns: 1fr; width: var(--card-w); }
    .trust { padding: 27px 20px; gap: 28px 42px; }
    .estimation { padding-top: 33px; }
}

/* Sous 380px le titre et les logos ne tiennent plus a leur taille. */
@media (max-width: 380px) {
    :root {
        --fs-h1: 34px;      --lh-h1: 38px;
        --fs-sup: 16px;
        --fs-question: 20px;--lh-question: 25px;
    }

    h1 sup { vertical-align: 7px; }
    .trust { gap: 22px 20px; }
    .trust img { width: auto; height: auto; max-height: 32px; }
}