/* flair-clair.css : Flair, remis dans la veine de la landing claire.

   Chargée EN DERNIER, après les huit feuilles de Flair, qu'elle ne remplace
   pas. Tout ce qui tient l'écran debout reste chez elles : la grille en trois
   zones, la poignée, le tiroir du téléphone, les hauteurs calées sur la barre
   du haut. Cette feuille ne touche QUE le dessin : fontes, coins, fonds,
   couleurs, ombres, et le mouvement. Aucune règle ici ne pose `display`,
   `position` ni une colonne de grille. C'est la condition pour pouvoir la
   retirer d'une ligne dans le gabarit si quelque chose gêne.

   Presque chaque sélecteur commence par `.ch ` : c'est ce qui le fait passer
   devant la règle d'origine sans `!important`.

   LES COULEURS ONT UN SENS, et un seul par couleur, celui de la landing :
   vert pour la demande, bleu pour les prix, orange pour la concurrence. Le
   tableau de bord était entièrement en encre : six onglets qu'on ne
   distinguait qu'en lisant leur titre. */

.ch {
    --titre: 'Bricolage Grotesque', 'Inter', -apple-system, sans-serif;
    --detente: cubic-bezier(0.16, 1, 0.3, 1);
    --accent: var(--mr-vert);
}

/* ===== L'écran d'entrée : « Décris ton idée » ===== */

/* Le halo de la landing remplace les courbes de niveau. Chaque lueur
   s'éteint avant le bord de la couche : elle dérive, et un bord coupé
   entrerait dans le cadre. */
.ch:not(.est-actif) .ch-main::before,
:root[data-theme="dark"] .ch:not(.est-actif) .ch-main::before {
    inset: 8% 12% 14%;
    background:
        radial-gradient(26% 38% at 32% 46%, color-mix(in srgb, var(--mr-vert) 30%, transparent), transparent),
        radial-gradient(26% 36% at 68% 42%, color-mix(in srgb, var(--mr-bleu) 30%, transparent), transparent),
        radial-gradient(24% 28% at 52% 70%, color-mix(in srgb, var(--mr-orange) 24%, transparent), transparent);
    filter: blur(48px);
    opacity: 1;
}

.ch .ch-titre {
    font-family: var(--titre);
    font-weight: 600;
    font-size: clamp(2.6rem, 6.4vw, 4.75rem) !important;
    line-height: 1;
    letter-spacing: -0.045em;
}

.ch .ch-sous { font-size: 1.1rem; }

/* La barre de saisie est LE geste de cet écran : elle prend du corps, une
   ombre qui la décolle de la page, et un anneau quand on y entre. */
.ch .ch-saisie {
    border-color: var(--mr-border);
    border-radius: 28px;
    transition: border-color 0.2s ease, box-shadow 0.3s ease;
}

.ch .ch-saisie:focus-within {
    border-color: var(--mr-text-strong);
    box-shadow: 0 0 0 4px var(--mr-topbar-hover);
}

/* L'ÉTAT « OCCUPÉ » EST REPOSÉ ICI, ET IL LE FAUT. La règle d'origine
   (`.ch-saisie.est-occupe`) a le même poids que `.ch .ch-saisie` ci-dessus,
   qui est chargée après elle : la couleur du bord pendant une recherche était
   donc écrasée, et la barre ne disait plus que l'assistant travaille. C'est
   le prix du préfixe `.ch` : il passe aussi devant les états. */
.ch .ch-saisie.est-occupe { border-color: var(--accent); }

.ch .ch-vide .ch-saisie {
    padding: 0.85rem 0.85rem 0.85rem 1.4rem;
    border-radius: 32px;
    box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.35);
}

.ch .ch-vide .ch-saisie:focus-within {
    box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.35), 0 0 0 4px var(--mr-topbar-hover);
}

.ch .ch-vide .ch-saisie textarea { font-size: 1.1rem; }

.ch .ch-envoyer { transition: opacity 0.15s ease, transform 0.25s var(--detente); }
.ch .ch-envoyer:not(:disabled):hover { transform: scale(1.08); }
.ch .ch-envoyer:not(:disabled):active { transform: scale(0.94); }

.ch .ch-exemple {
    padding: 0.55rem 1.05rem;
    font-size: var(--ch-fs-sm);
    transition: color 0.15s ease, border-color 0.15s ease, transform 0.3s var(--detente), background 0.15s ease;
}

.ch .ch-exemple:hover { transform: translateY(-2px); background: var(--mr-surface-hover); }

/* ===== La conversation ===== */
.ch .ch-rail-titre {
    font-family: var(--titre);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}

/* L'assistant parle sans cadre, la personne dans une bulle : on distingue
   les deux voix à la forme, sans avoir à lire. Chaque réponse dans son
   rectangle bordé faisait du fil une pile de cartes. */
.ch .ch-bulle {
    padding: 0.2rem 0.3rem;
    border: 0;
    background: transparent;
    font-size: 0.95rem;
    line-height: 1.6;
}

.ch .ch-bulle--moi {
    padding: 0.65rem 1rem;
    border-radius: 20px 20px 6px 20px;
    background: var(--mr-btn-bg);
    color: var(--mr-btn-text);
}

.ch .ch-bulle strong { color: var(--mr-text-strong); }
.ch .ch-bulle--moi strong { color: inherit; }

/* Une étape de travail : une pastille, plus un encadré en pointillé et en
   caractères de machine. */
.ch .ch-bulle--outil {
    align-self: flex-start;
    padding: 0.4rem 0.85rem;
    border: 0;
    border-radius: 999px;
    background: var(--mr-surface-card);
    font-family: var(--mr-sans);
    font-size: var(--ch-fs-xs);
    letter-spacing: 0;
}

.ch .ch-bulle--souci {
    padding: 0.8rem 1rem;
    border: 0;
    border-radius: 16px;
    background: var(--mr-rouge-voile);
}

.ch .ch-pensee { border-left-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* ===== Le tableau de bord ===== */

/* Le nom du marché, en titre : c'est ce que tout l'écran décrit. */
.ch .ch-bandeau { padding-bottom: 0.4rem; border-bottom: 0; }

.ch .ch-marche b {
    font-family: var(--titre);
    font-weight: 600;
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.ch .ch-dossier {
    border-color: var(--mr-btn-bg);
    background: var(--mr-btn-bg);
    color: var(--mr-btn-text);
    font-weight: 600;
    transition: background 0.2s ease, transform 0.25s var(--detente);
}

.ch .ch-dossier:hover:not(:disabled) {
    border-color: var(--mr-btn-bg-hover);
    background: var(--mr-btn-bg-hover);
    color: var(--mr-btn-text);
    transform: translateY(-2px);
}

/* LES ONGLETS DEVIENNENT UN SÉLECTEUR À SEGMENTS : une piste creuse, et une
   pastille pleine sur l'onglet ouvert. Les languettes posées sur un trait
   laissaient un doute sur laquelle était ouverte dès qu'on en avait six. */
.ch .ch-onglets {
    gap: 2px;
    width: fit-content;
    max-width: 100%;
    padding: 4px;
    border: 0;
    border-radius: 999px;
    background: var(--mr-surface-sunken);
}

.ch .ch-onglet {
    padding: 0.5rem 0.95rem;
    border: 0;
    border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.ch .ch-onglet[aria-selected="true"] {
    background: var(--mr-surface-card);
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.25);
}

/* La pastille d'un onglet rempli prend la couleur de ce qu'il mesure. */
.ch .ch-onglet:not(.est-vide) u { background: var(--mr-vert); opacity: 1; }
.ch .ch-onglet[data-onglet="prix"]:not(.est-vide) u,
.ch .ch-onglet[data-onglet="offre"]:not(.est-vide) u { background: var(--mr-bleu); }
.ch .ch-onglet[data-onglet="concurrents"]:not(.est-vide) u,
.ch .ch-onglet[data-onglet="avis"]:not(.est-vide) u { background: var(--mr-orange); }

/* Chaque panneau porte la couleur de son onglet : tout ce qui s'y dessine
   (barres, courbe, grands chiffres) la reprend par `--accent`. */
.ch .ch-panneau[data-panneau="prix"], .ch .ch-panneau[data-panneau="offre"] { --accent: var(--mr-bleu); }
.ch .ch-panneau[data-panneau="concurrents"], .ch .ch-panneau[data-panneau="avis"] { --accent: var(--mr-orange); }

.ch .ch-attente { border-color: var(--mr-border); border-radius: 24px; }

/* LES CARTES S'EFFACENT AUX DEUX BORDS DE LA ZONE QUI DÉFILE, au lieu d'y être
   tranchées. Avant, les onglets étaient posés sur un trait : une carte qui
   passait dessous disparaissait derrière quelque chose. Le sélecteur à
   segments n'a plus de trait, donc la carte était coupée en plein vide, coins
   arrondis compris, et pareil en bas au-dessus du bloc « Et maintenant ».

   Le fondu a exactement la hauteur du remplissage : au repos, il ne couvre
   que du vide et la première carte est intacte. Il ne mord sur une carte que
   lorsqu'elle défile hors de la zone. */
.ch .ch-panneaux {
    --fondu: 1.4rem;
    padding-top: var(--fondu);
    padding-bottom: var(--fondu);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent);
}

/* Le bloc « Et maintenant » suit la zone qui défile : sa marge s'ajoutait au
   fondu et laissait une bande vide deux fois trop haute. */
.ch .ch-panneaux ~ .ch-ranger { margin-top: 0.4rem; }

@media (max-width: 768px) {
    .ch .ch-panneaux { --fondu: 0.8rem; }
}

/* ===== Les blocs ===== */
.ch .ch-bloc {
    gap: 1.1rem;
    padding: 1.5rem 1.6rem 1.6rem;
    border-radius: 24px;
}

.ch .ch-bloc-titre {
    padding-bottom: 0;
    border-bottom: 0;
    font-family: var(--titre);
    font-weight: 600;
    font-size: 1.3rem !important;
    letter-spacing: -0.025em;
}

/* Les chiffres : des tuiles séparées, plus une grille de cases collées par
   un filet. Le nombre est ce qu'on vient lire, il prend la fonte des titres
   et la couleur du panneau reste sur ce qui se dessine. */
.ch .ch-chiffres { gap: 0.6rem; border: 0; border-radius: 0; background: none; overflow: visible; }

.ch .ch-chiffre {
    padding: 0.95rem 1.1rem 1.05rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--accent) 9%, var(--mr-surface));
}

.ch .ch-chiffre b {
    font-family: var(--titre);
    font-weight: 600;
    font-size: 1.85rem;
    letter-spacing: -0.035em;
}

/* La courbe et les barres prennent la couleur du panneau. */
.ch .ch-graphe .trace { stroke: var(--accent); stroke-width: 2.2; }
.ch .ch-graphe .aire { fill: var(--accent); opacity: 0.13; }
.ch .ch-pt { border-color: var(--accent); }
.ch .ch-pt.est-fort { background: var(--accent); }

.ch .ch-barre s { height: 10px; }
.ch .ch-barre s i, .ch .ch-histo-col i { background: var(--accent); opacity: 0.85; }
.ch .ch-histo-col i { border-radius: 6px 6px 0 0; }

.ch .ch-fiche {
    padding: 1.1rem 1.2rem 1.2rem;
    border: 0;
    border-radius: 18px;
    background: var(--mr-surface);
}

.ch .ch-fiche-valeur {
    font-family: var(--titre);
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: -0.03em;
}

.ch .ch-tableau .ch-td-mot { color: var(--mr-text-strong); font-weight: 500; }
.ch .ch-mot { padding: 0.3rem 0.75rem; border-radius: 999px; }
.ch .ch-filtre-champ { padding: 0.5rem 0.95rem; }

/* ===== La suite après le verdict ===== */
.ch .ch-ranger {
    padding: 1.5rem 1.6rem;
    border-radius: 24px;
    background: color-mix(in srgb, var(--mr-vert) 9%, var(--mr-surface-card));
}

.ch .ch-ranger-titre {
    font-family: var(--titre);
    font-weight: 600;
    font-size: 1.3rem;
    letter-spacing: -0.025em;
}

.ch .ch-ranger-bouton {
    min-height: 46px;
    padding: 0 1.5rem;
    border-radius: 999px;
    transition: opacity 0.2s ease, transform 0.25s var(--detente);
}

.ch .ch-ranger-bouton:hover { transform: translateY(-2px); }
.ch .ch-ranger-champ input { min-height: 46px; padding: 0 1rem; border-radius: 999px; }

/* ===== Les deux boîtes : le mur de connexion et la confirmation =====
   Elles vivent hors de `.ch` (ce sont des `<dialog>`), d'où l'absence du
   préfixe. */
.ch-mur, .ch-modale { border-radius: 28px; }

.ch-mur .ch-mur-titre, .ch-modale .ch-modale-titre {
    font-family: 'Bricolage Grotesque', 'Inter', -apple-system, sans-serif;
    font-weight: 600;
    letter-spacing: -0.03em;
}

.ch-mur .ch-mur-google, .ch-mur .ch-mur-envoyer,
.ch-modale .ch-modale-annuler, .ch-modale .ch-modale-ok { border-radius: 999px; }

.ch-mur .ch-mur-champ input { border-radius: 14px; }

/* ===== Le mouvement =====
   Tout est en animation à remplissage « backwards » : l'état de départ
   n'existe que pendant l'animation, donc un bloc ne peut pas rester caché.
   Un panneau passe de `display: none` à `flex` quand on ouvre son onglet :
   ses animations repartent donc à chaque ouverture, sans script. */
@media (prefers-reduced-motion: no-preference) {
    .ch .ch-vide > * { animation: flair-monter 0.9s var(--detente) backwards; }
    .ch .ch-vide > :nth-child(2) { animation-delay: 0.08s; }
    .ch .ch-vide > :nth-child(3) { animation-delay: 0.16s; }
    .ch .ch-vide > :nth-child(4) { animation-delay: 0.24s; }

    .ch:not(.est-actif) .ch-main::before { animation: flair-deriver 18s ease-in-out infinite alternate; }

    /* Les blocs d'un panneau se posent l'un après l'autre. */
    .ch .ch-panneau.est-actif > * { animation: flair-monter 0.6s var(--detente) backwards; }
    .ch .ch-panneau.est-actif > :nth-child(2) { animation-delay: 70ms; }
    .ch .ch-panneau.est-actif > :nth-child(3) { animation-delay: 140ms; }
    .ch .ch-panneau.est-actif > :nth-child(n+4) { animation-delay: 210ms; }

    /* Ce qui se mesure se dessine : les barres poussent, la courbe se
       découvre de gauche à droite. Par un cache qui recule et non par un
       pointillé qu'on déroule : avec `non-scaling-stroke`, la longueur d'un
       pointillé se compte en pixels d'écran et le tracé s'arrête en route. */
    .ch .ch-panneau.est-actif .ch-barre s i {
        transform-origin: 0 50%;
        animation: flair-largeur 0.9s var(--detente) 0.2s backwards;
    }
    .ch .ch-panneau.est-actif .ch-histo-col i {
        transform-origin: 50% 100%;
        animation: flair-hauteur 0.8s var(--detente) 0.2s backwards;
    }
    .ch .ch-panneau.est-actif .ch-graphe { animation: flair-decouvrir 1.4s var(--detente) 0.2s backwards; }
    .ch .ch-panneau.est-actif .ch-pt, .ch .ch-panneau.est-actif .ch-pt-valeur {
        animation: flair-apparaitre 0.4s ease 1.1s backwards;
    }

    @keyframes flair-monter { from { opacity: 0; transform: translateY(16px); } }
    @keyframes flair-largeur { from { transform: scaleX(0); } }
    @keyframes flair-hauteur { from { transform: scaleY(0); } }
    @keyframes flair-decouvrir { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
    @keyframes flair-apparaitre { from { opacity: 0; } }
    @keyframes flair-deriver {
        from { transform: translate(-2%, 1.5%) scale(1); }
        to { transform: translate(2.5%, -2%) scale(1.08); }
    }
}