/* ==========================================================================
   Thème "Blanc & orange" — couche posée par-dessus Bootstrap 5.3 (mode clair).

   Principe repris de la référence : le blanc domine, une seule couleur forte
   (l'orange) porte l'action et les accents, le vert signale ce qui est prêt.
   Les cartes sont blanches, sans bordure marquée, posées sur un gris très clair
   avec une ombre douce. Une seule carte est en aplat orange plein : celle qui
   doit attirer l'œil en premier.
   ========================================================================== */

:root {
    color-scheme: light;

    /* Couleur d'action.
       Deux valeurs, et ce n'est pas cosmétique : le blanc sur l'orange vif ne
       donne que 2,95:1, sous le seuil de 4,5. `--orange` sert donc aux accents,
       aux teintes et au texte orange sur fond clair ; `--orange-deep` (4,8:1
       avec du blanc) à toute surface qui porte du texte ou une icône blanche. */
    --orange: #F96A21;
    --orange-deep: #C74A10;
    --orange-dark: #A93C09;
    --orange-tint: #FFF1E8;
    --orange-tint-2: #FFE3D2;

    /* Couleur des signaux positifs — volontairement bien visible */
    --green: #12B76A;
    --green-dark: #0A7A45;
    --green-tint: #E6F8EF;

    --red: #F04438;
    --red-tint: #FEECEB;

    /* Neutres */
    --canvas: #F5F5F7;
    --surface: #FFFFFF;
    --line: #ECECEF;
    --ink: #17171C;
    --ink-soft: #6B6B75;

    --radius-sm: .7rem;
    --radius: 1.1rem;
    --radius-lg: 1.4rem;

    /* Ombres très douces : la profondeur vient de l'ombre, pas de la bordure */
    --shadow-sm: 0 1px 2px rgba(23, 23, 28, .04), 0 4px 12px rgba(23, 23, 28, .05);
    --shadow: 0 2px 6px rgba(23, 23, 28, .05), 0 14px 30px rgba(23, 23, 28, .07);
    --shadow-orange: 0 6px 20px rgba(249, 106, 33, .28);

    /* Variables Bootstrap */
    --bs-body-bg: var(--canvas);
    --bs-body-color: var(--ink);
    --bs-body-font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
                           "Segoe UI", Roboto, sans-serif;
    --bs-border-color: var(--line);
    --bs-border-radius: var(--radius-sm);
    --bs-link-color: var(--orange-dark);
    --bs-link-hover-color: #8A2F06;
    /* Bootstrap 5.3 colore les liens via *-rgb, pas via --bs-link-color :
       sans ces deux lignes les liens restent bleus. */
    --bs-link-color-rgb: 169, 60, 9;
    --bs-link-hover-color-rgb: 138, 47, 6;
    --bs-emphasis-color: var(--ink);
    --bs-secondary-color: var(--ink-soft);
}

body {
    background-color: var(--canvas);
    color: var(--ink);
    font-family: var(--bs-body-font-family);
    letter-spacing: -.011em;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--ink);
}

.text-muted { color: var(--ink-soft) !important; }

/* Sur-titre discret */
.eyebrow {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.text-neon { color: var(--orange-dark); }

/* --------------------------------------------------------------------------
   Navbar — blanche, filet fin, aucune ombre marquée
   -------------------------------------------------------------------------- */
.navbar.app-nav {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
    padding-block: .7rem;
}

.navbar.app-nav .navbar-brand {
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: -.04em;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

.brand-mark {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--orange-deep);
    color: #fff;
    box-shadow: var(--shadow-orange);
    display: grid;
    place-items: center;
    font-size: .9rem;
    flex: none;
}

.navbar.app-nav .nav-link {
    color: var(--ink-soft);
    font-weight: 600;
    font-size: .92rem;
    border-radius: 999px;
    padding: .45rem .9rem;
    transition: color .18s ease, background-color .18s ease;
}

.navbar.app-nav .nav-link:hover { color: var(--orange-dark); background: var(--orange-tint); }

.navbar.app-nav .nav-link.active {
    color: var(--orange-dark);
    background: var(--orange-tint);
}

.navbar.app-nav .navbar-text { color: var(--ink-soft); font-size: .84rem; }

.navbar-toggler { border: 1px solid var(--line); box-shadow: none !important; }

/* --------------------------------------------------------------------------
   Boutons — pilules pleines, l'orange porte l'action principale
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-border-radius: 999px;
    font-weight: 600;
    letter-spacing: -.01em;
    padding: .6rem 1.3rem;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
    --bs-btn-bg: var(--orange-deep);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--orange-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--orange-dark);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-bg: #F2D3C1;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-border-color: transparent;
    box-shadow: var(--shadow-orange);
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(249, 106, 33, .38);
}

.btn-primary:disabled { box-shadow: none; opacity: 1; }

.btn-outline-primary {
    --bs-btn-color: var(--orange-dark);
    --bs-btn-border-color: var(--orange-tint-2);
    --bs-btn-bg: var(--orange-tint);
    --bs-btn-hover-bg: var(--orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: var(--orange);
    --bs-btn-active-bg: var(--orange-dark);
    --bs-btn-active-color: #fff;
}

.btn-outline-secondary {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--line);
    --bs-btn-hover-bg: #FAFAFB;
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-border-color: #DEDEE3;
    --bs-btn-active-bg: #F2F2F4;
    --bs-btn-active-color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.btn-outline-danger {
    --bs-btn-color: var(--red);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #F8CFCB;
    --bs-btn-hover-bg: var(--red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: var(--red);
}

/* Bouton clair posé sur l'aplat orange */
.btn-light {
    --bs-btn-bg: #fff;
    --bs-btn-color: var(--orange-dark);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-color: var(--orange-dark);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(23, 23, 28, .16);
}

.btn-light:hover { transform: translateY(-1px); }

.btn-sm { padding: .38rem .9rem; font-size: .85rem; }

/* --------------------------------------------------------------------------
   Cartes — blanches, coins généreux, ombre douce
   -------------------------------------------------------------------------- */
.card {
    --bs-card-bg: var(--surface);
    --bs-card-border-radius: var(--radius);
    --bs-card-inner-border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid transparent;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .22s ease, transform .22s ease;
}

.card.shadow-sm { box-shadow: var(--shadow-sm) !important; }

.card:hover { box-shadow: var(--shadow); }

/* La carte d'accroche : aplat orange plein, comme dans la référence */
.card-hero {
    position: relative;
    overflow: hidden;
    background: var(--orange-deep);
    border: 0;
    border-radius: var(--radius-lg);
    color: #fff;
    box-shadow: 0 10px 34px rgba(249, 106, 33, .32);
}

.card-hero:hover { box-shadow: 0 14px 40px rgba(249, 106, 33, .40); }

/* Motif décoratif discret, repris du visuel de référence */
.card-hero::after {
    content: "";
    position: absolute;
    right: -3rem;
    bottom: -5rem;
    width: 17rem;
    height: 17rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    pointer-events: none;
}

.card-hero::before {
    content: "";
    position: absolute;
    right: 3.5rem;
    top: -4rem;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
    pointer-events: none;
}

/* Tout le contenu posé sur l'aplat orange passe en clair : sans ces règles,
   le texte et les icônes resteraient sombres et illisibles. */
.card-hero, .card-hero .card-body { position: relative; }
.card-hero h1, .card-hero h2, .card-hero h3,
.card-hero h4, .card-hero h5, .card-hero .h3 { color: #fff; }
.card-hero p,
.card-hero span,
.card-hero li,
.card-hero .small,
.card-hero .text-muted { color: rgba(255, 255, 255, .90) !important; }
.card-hero .eyebrow { color: rgba(255, 255, 255, .78); }
.card-hero i.text-success,
.card-hero i.text-muted { color: #fff !important; }
.card-hero a:not(.btn) { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); }

.card-hero .badge.text-bg-success {
    background: rgba(255, 255, 255, .24) !important;
    color: #fff !important;
}

/* Page Offres : la ligne de badge est réservée même quand l'encart n'en porte
   pas, sinon les trois prix ne s'alignent plus dès qu'une seule carte est
   étiquetée. */
.offer-badge-row { min-height: 1.6rem; }

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */
.form-label {
    font-weight: 600;
    font-size: .85rem;
    color: var(--ink);
    margin-bottom: .4rem;
}

.form-control, .form-select {
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background-color: #FBFBFC;
    color: var(--ink);
    padding: .68rem .95rem;
    font-size: .95rem;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.form-control:focus, .form-select:focus {
    background-color: #fff;
    border-color: var(--orange-deep);
    box-shadow: 0 0 0 4px rgba(199, 74, 16, .16);
}

.form-control::placeholder { color: #A9A9B3; }

.form-text { color: var(--ink-soft); font-size: .8rem; }

.form-control.is-invalid, .form-select.is-invalid {
    border-color: var(--red);
    background-image: none;
}

.form-control.is-invalid:focus { box-shadow: 0 0 0 4px rgba(240, 68, 56, .13); }

.invalid-feedback { font-size: .82rem; font-weight: 500; }

.form-check-input:checked {
    background-color: var(--orange);
    border-color: var(--orange);
}

.form-check-input:focus { box-shadow: 0 0 0 4px rgba(249, 106, 33, .14); }

/* --------------------------------------------------------------------------
   Alertes
   -------------------------------------------------------------------------- */
.alert {
    --bs-alert-border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    border-left-width: 4px;
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    font-size: .92rem;
    padding: .95rem 1.15rem;
}

.alert-success { border-left-color: var(--green);  background: var(--green-tint); }
.alert-info    { border-left-color: var(--orange); background: var(--orange-tint); }
.alert-warning { border-left-color: #F79009;       background: #FFF6E5; }
.alert-danger  { border-left-color: var(--red);    background: var(--red-tint); }

/* --------------------------------------------------------------------------
   Badges — pilules teintées, le vert bien lisible
   -------------------------------------------------------------------------- */
.badge {
    border-radius: 999px;
    font-weight: 600;
    font-size: .74rem;
    letter-spacing: 0;
    padding: .4em .85em;
    display: inline-flex;
    align-items: center;
}

.badge.text-bg-success   { background: var(--green-tint) !important;  color: var(--green-dark) !important; }
.badge.text-bg-danger    { background: var(--red-tint) !important;    color: #B42318 !important; }
.badge.text-bg-secondary { background: var(--orange-tint) !important; color: var(--orange-dark) !important; }

/* --------------------------------------------------------------------------
   Listes
   -------------------------------------------------------------------------- */
.list-group {
    --bs-list-group-bg: var(--surface);
    --bs-list-group-border-color: var(--line);
    --bs-list-group-border-radius: var(--radius);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.list-group-item {
    position: relative;
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
    transition: background-color .18s ease;
}

.list-group-item:hover { background: #FCFCFD; }

.list-group-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--orange);
    opacity: 0;
    transition: opacity .18s ease;
}

.list-group-item:hover::before { opacity: 1; }

.list-group-item a.h6 {
    color: var(--ink);
    font-weight: 700;
    transition: color .16s ease;
}

.list-group-item a.h6:hover { color: var(--orange-dark); }

/* --------------------------------------------------------------------------
   Divers
   -------------------------------------------------------------------------- */
.spinner-border { color: var(--orange-deep); }

footer.app-footer {
    background: transparent;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: .82rem;
}

/* Pastilles d'icône rondes, comme les petits ronds de la référence */
.icon-pill {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    font-size: .95rem;
}

/* Le vert signale ce qui est acquis, l'orange ce qui est en cours. */
.icon-pill-brand { background: var(--orange-deep); color: #fff; box-shadow: var(--shadow-orange); }
.icon-pill-cool  { background: var(--green-dark);  color: #fff; box-shadow: 0 6px 18px rgba(10, 122, 69, .28); }
.icon-pill-warm  { background: var(--orange-tint); color: var(--orange-dark); }
.icon-pill-muted { background: #F1F1F4;            color: var(--ink-soft); }

/* Sur l'aplat orange, la pastille s'inverse */
.card-hero .icon-pill-warm,
.card-hero .icon-pill-brand {
    background: rgba(255, 255, 255, .22);
    color: #fff;
    box-shadow: none;
}

/* Génération en cours */
.is-working {
    border: 1px solid var(--orange-tint-2) !important;
    background: var(--orange-tint);
    animation: pulse-soft 2.2s ease-in-out infinite;
}

@keyframes pulse-soft {
    0%, 100% { box-shadow: 0 0 0 0 rgba(249, 106, 33, .18); }
    50%      { box-shadow: 0 0 0 10px rgba(249, 106, 33, 0); }
}

main > .container, main.container { animation: rise .38s ease both; }

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

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .btn:hover, .card:hover { transform: none !important; }
}

/* `code` par defaut de Bootstrap : trop clair sur nos fonds teintes */
code { color: var(--orange-dark); background: rgba(199, 74, 16, .07);
       padding: .1em .35em; border-radius: .3rem; font-size: .86em; }

/* ==========================================================================
   Formulaire de création : une question par bloc

   Le formulaire ne se présente plus comme une fiche à remplir mais comme un
   entretien : un numéro, une question, et de quoi y répondre. Chaque bloc est
   une carte, ce qui donne au regard un endroit où s'arrêter entre deux
   réponses — c'est ce qui fait qu'un formulaire de huit questions se lit plus
   vite qu'une colonne de douze champs.
   ========================================================================== */

.q {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.q-head {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    margin-bottom: 1.15rem;
}

/* Le numéro tient lieu de fil conducteur : on sait toujours où on en est. */
.q-num {
    flex: none;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--orange-tint);
    color: var(--orange-dark);
    font-weight: 700;
    font-size: .9rem;
}

.q-title {
    font-size: 1.08rem;
    font-weight: 600;
    margin: .12rem 0 0;
}

.q-help {
    color: var(--ink-soft);
    font-size: .87rem;
    margin: .25rem 0 0;
}

.q-field + .q-field { margin-top: .9rem; }

/* Dans une grille, chaque champ est seul dans sa colonne : la regle
   ci-dessus ne joue pas, et deux rangees de champs se collent. */
.q .row .q-field { margin-bottom: .9rem; }

/* L'étiquette est passée au second plan : la question porte le sens, elle ne
   fait plus que nommer la case. */
.q-label {
    font-size: .85rem;
    color: var(--ink-soft);
    margin-bottom: .3rem;
}

/* --- Choix uniques en pastilles ------------------------------------------
   Un menu déroulant cache ses options et demande deux gestes. Ici tout est
   visible, chaque option porte son exemple, et un clic suffit. */

.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: .6rem;
}

.choice { position: relative; }

/* Le bouton radio reste dans la page — il porte le focus clavier et la
   validation — mais c'est l'étiquette qu'on voit et qu'on clique. */
.choice-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.choice-label {
    display: block;
    height: 100%;
    padding: .8rem .95rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.choice-label:hover { border-color: var(--orange-tint-2); background: var(--orange-tint); }

.choice-input:checked + .choice-label {
    border-color: var(--orange-deep);
    background: var(--orange-tint);
}

/* Le focus doit rester visible alors que la case elle-même est masquée :
   sans cette règle, la navigation au clavier devient aveugle. */
.choice-input:focus-visible + .choice-label {
    outline: 2px solid var(--orange-deep);
    outline-offset: 2px;
}

.choice-title {
    display: block;
    font-weight: 600;
    font-size: .95rem;
}

.choice-hint {
    display: block;
    color: var(--ink-soft);
    font-size: .8rem;
    margin-top: .15rem;
}

/* Les exemples sont longs, et un placeholder tronqué n'aide personne :
   dans un textarea ils tiennent sur plusieurs lignes. */
.q textarea::placeholder { white-space: pre-line; }

/* Sous-titre d'un second groupe de champs dans la même question. */
.q-sub {
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-soft);
    margin: 1.4rem 0 .7rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
}

/* La precision qui accompagne un sous-titre, sans sa casse ni sa graisse. */
.q-sub-note { text-transform: none; font-weight: 400; letter-spacing: 0; }