/* liha.fr : la page d'accueil des dirigeants de PME.
   Reprend la feuille de style de bonjourliha.fr (16/10/2026) ; les ajouts propres à liha.fr sont à la fin du fichier.
   Design system LIHA (14/10/2026) : encre #12142B, violet #5B4BFF, pêche #FFB89A, brume #EEF0F6.
   Une seule police, Poppins (Regular, Medium, SemiBold), hébergée ici (jamais chez Google).
   Logo : LIHA en capitales, mot vectorisé dans le sprite de chaque page (#liha-mot). */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/poppins-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/poppins-medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/poppins-semibold.woff2') format('woff2');
}

:root {
    --encre: #12142B;
    --texte: #3A3E57;
    --discret: #565A73;
    --trait: #DDE0EA;
    --brume: #EEF0F6;
    --blanc: #FFFFFF;
    --signal: #5B4BFF;
    --signal-fonce: #4434E0;
    --signal-pale: #E9E6FF;
    --peche: #FFB89A;
    --peche-pale: #FFD6C2;
    --lavande: #CFCAFF;
    /* Mode puissance : le pêche de la marque. L'erreur garde un rouge brique, hors marque. */
    --puissance: #FFB89A;
    --puissance-texte: #B13F12;
    --sur-encre: #C9CBE0;
    --sur-encre-trait: rgba(255, 255, 255, 0.16);
    --police: 'Poppins', Arial, Helvetica, sans-serif;
    --largeur: 1200px;
    --marge: 24px;
    --bloc: 112px;
    --rayon: 16px;
    --rayon-btn: 12px;
}

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

/* L'attribut hidden l'emporte toujours sur les display des composants. */
[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--police);
    font-size: 17px;
    line-height: 1.55;
    color: var(--texte);
    background: var(--blanc);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote {
    margin: 0;
}

ul {
    padding: 0;
    list-style: none;
}

h1, h2, h3 {
    color: var(--encre);
    font-weight: 600;
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

a {
    color: var(--signal);
}

a:hover {
    color: var(--encre);
}

strong {
    font-weight: 600;
    color: var(--encre);
}

:focus-visible {
    outline: 3px solid var(--signal);
    outline-offset: 3px;
    border-radius: 4px;
}

.insecable {
    white-space: nowrap;
}

.sprite {
    position: absolute;
}

.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--encre);
    color: var(--blanc);
    border-radius: 8px;
    text-decoration: none;
}

.skip:focus {
    top: 12px;
}

.conteneur {
    width: 100%;
    max-width: calc(var(--largeur) + 2 * var(--marge));
    margin: 0 auto;
    padding: 0 var(--marge);
}

/* ---------- Pictogrammes et symbole ---------- */

.ico {
    width: 22px;
    height: 22px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sym {
    width: 28px;
    height: 28px;
    flex: none;
    color: var(--encre);
}

.sym-point {
    fill: var(--signal);
    transition: fill 0.6s ease;
}

/* ---------- Boutons ---------- */

.boutons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    border: 1.5px solid transparent;
    border-radius: var(--rayon-btn);
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn small {
    font-size: 15px;
    font-weight: 500;
}

.btn-signal {
    background: var(--signal);
    color: var(--blanc);
}

.btn-signal:hover {
    background: var(--signal-fonce);
    color: var(--blanc);
}

.btn-encre {
    background: var(--encre);
    color: var(--blanc);
}

.btn-encre:hover {
    background: var(--signal);
    color: var(--blanc);
}

.btn-contour {
    background: transparent;
    border-color: var(--encre);
    color: var(--encre);
}

.btn-contour:hover {
    background: var(--encre);
    color: var(--blanc);
}

.btn-peche {
    background: var(--peche);
    color: var(--encre);
}

.btn-peche:hover {
    background: var(--blanc);
    color: var(--encre);
}

.btn-petit {
    min-height: 44px;
    padding: 0 16px;
    font-size: 15px;
}

.btn-large {
    width: 100%;
}

.btn[disabled] {
    opacity: 0.6;
    cursor: progress;
}

/* ---------- En-tête ---------- */

.entete {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.entete.est-defile {
    border-bottom-color: var(--trait);
}

.entete-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 72px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--encre);
    text-decoration: none;
}

/* Logo complet : symbole + LIHA en capitales, 30 px de haut dans la barre de menu (design system). */
.logo-svg {
    display: block;
    width: auto;
    height: 30px;
}

.nav {
    display: flex;
    gap: 28px;
    margin-left: auto;
    font-size: 15px;
    font-weight: 500;
}

.nav a {
    color: var(--encre);
    text-decoration: none;
}

.nav a:hover {
    color: var(--signal);
}

/* ---------- 1. Pour les communes ---------- */

.hero {
    padding: 8px 0 0;
}

.hero-panneau {
    padding: 64px 56px 56px;
    border-radius: 24px;
    background:
        radial-gradient(ellipse 70% 70% at 10% 0%, var(--peche-pale) 0%, rgba(255, 214, 194, 0) 70%),
        radial-gradient(ellipse 70% 80% at 100% 100%, var(--lavande) 0%, rgba(207, 202, 255, 0) 70%),
        var(--brume);
}

.surtitre {
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--signal);
}

/* Le titre prend toute la largeur ; sa fin change toutes les 5 secondes. */
.hero-titre {
    font-size: clamp(40px, 6vw, 72px);
    letter-spacing: -0.04em;
    line-height: 1.04;
}

/* Les fins de phrase s'empilent dans la même case : la place de la plus longue est réservée. */
.tourne {
    display: grid;
}

/* Les fins de phrase cachées sont aussi invisibles (visibility) : hors du texte lu par les moteurs. */
.tourne-el {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s ease, visibility 1.2s;
}

.tourne-el.est-visible {
    opacity: 1;
    visibility: visible;
}

.hero-titre .tourne {
    color: var(--signal);
}

.hero-grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    gap: 48px;
    align-items: center;
    margin-top: 36px;
}

.hero-sous {
    font-size: clamp(20px, 2.2vw, 25px);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--encre);
}

.hero-chapo {
    max-width: 600px;
    margin-top: 18px;
    font-size: 18px;
    line-height: 1.55;
}

.hero .boutons {
    align-items: center;
    margin-top: 30px;
}

.preuves {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin-top: 28px;
    font-size: 15px;
    font-weight: 500;
    color: var(--encre);
}

.preuves li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.preuves .ico {
    width: 18px;
    height: 18px;
    color: var(--signal);
    stroke-width: 2.4;
}

.lien-fleche {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 6px;
    font-weight: 600;
    color: var(--signal);
    text-decoration: none;
}

.lien-fleche::after {
    content: "→";
    transition: transform 0.2s ease;
}

.lien-fleche:hover {
    color: var(--encre);
}

.lien-fleche:hover::after {
    transform: translateX(3px);
}

/* L'aperçu de l'outil : une demande d'agent s'écrit, la réponse arrive. */
.apercu {
    border-radius: var(--rayon);
    background: var(--blanc);
    border: 1px solid var(--trait);
    overflow: hidden;
    box-shadow: 0 24px 48px -32px rgba(18, 20, 43, 0.35);
}

.apercu-corps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 360px;
    padding: 20px;
}

.mini-doc {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--blanc);
    border: 1px solid var(--trait);
    font-size: 14.5px;
    line-height: 1.45;
}

.mini-doc-titre {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--discret);
}

.apercu-fin {
    font-size: 14px;
    color: var(--discret);
}

/* L'animation des documents qui sortent ou restent */
.flux {
    padding: 20px;
    border-radius: var(--rayon);
    background: var(--blanc);
    border: 1px solid var(--trait);
}

.flux-choix {
    display: inline-flex;
    padding: 4px;
    border-radius: 12px;
    background: var(--brume);
}

.flux-btn {
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--discret);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.flux-btn[aria-pressed="true"] {
    background: var(--blanc);
    color: var(--encre);
    box-shadow: 0 1px 2px rgba(18, 20, 43, 0.12);
}

.flux-scene {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    height: 220px;
    margin-top: 16px;
}

.flux-mairie,
.flux-ailleurs {
    position: relative;
    border-radius: 12px;
    padding: 12px;
}

.flux-mairie {
    background: var(--brume);
}

.flux-ailleurs {
    border: 1.5px dashed #B8BCCD;
    transition: border-color 0.6s ease, background-color 0.6s ease;
}

.flux-etiquette {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--encre);
}

.flux-etiquette .ico {
    width: 18px;
    height: 18px;
}

/* Les quatre coins du symbole LIHA, qui se referment autour des documents. */
.flux-cadre {
    position: absolute;
    inset: 38px 6px 6px;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
}

.flux-cadre i {
    position: absolute;
    width: 26px;
    height: 26px;
    border: 0 solid var(--signal);
}

.flux-cadre i:nth-child(1) { top: 0; left: 0; border-width: 4px 0 0 4px; border-top-left-radius: 12px; }
.flux-cadre i:nth-child(2) { top: 0; right: 0; border-width: 4px 4px 0 0; border-top-right-radius: 12px; }
.flux-cadre i:nth-child(3) { bottom: 0; right: 0; border-width: 0 4px 4px 0; border-bottom-right-radius: 12px; }
.flux-cadre i:nth-child(4) { bottom: 0; left: 0; border-width: 0 0 4px 4px; border-bottom-left-radius: 12px; }

.flux-cadre {
    --coin: 26px;
    --ep: 4px;
}

/* Les barres violettes qui relient les coins : le cadre se ferme, la zone est protégée.
   Chaque barre part des deux coins à la fois et se rejoint au milieu.
   Servent au mode souverain (Notre offre) et à « Avec LIHA » (Sécurité).
   Le conteneur donne --coin (taille d'un coin) et --ep (épaisseur du trait). */
.scene-coins b,
.flux-cadre b {
    position: absolute;
    display: block;
}

.scene-coins b:nth-of-type(odd),
.flux-cadre b:nth-of-type(odd) {
    left: var(--coin);
    right: var(--coin);
    height: var(--ep);
}

.scene-coins b:nth-of-type(even),
.flux-cadre b:nth-of-type(even) {
    top: var(--coin);
    bottom: var(--coin);
    width: var(--ep);
}

.scene-coins b:nth-of-type(1), .flux-cadre b:nth-of-type(1) { top: 0; }
.scene-coins b:nth-of-type(2), .flux-cadre b:nth-of-type(2) { right: 0; }
.scene-coins b:nth-of-type(3), .flux-cadre b:nth-of-type(3) { bottom: 0; }
.scene-coins b:nth-of-type(4), .flux-cadre b:nth-of-type(4) { left: 0; }

.scene-coins b::before,
.scene-coins b::after,
.flux-cadre b::before,
.flux-cadre b::after {
    content: '';
    position: absolute;
    background: var(--signal);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Horizontales (haut, bas) : une moitié depuis chaque coin. Le demi-pixel évite une fente au milieu. */
.scene-coins b:nth-of-type(odd)::before,
.scene-coins b:nth-of-type(odd)::after,
.flux-cadre b:nth-of-type(odd)::before,
.flux-cadre b:nth-of-type(odd)::after {
    top: 0;
    bottom: 0;
    width: calc(50% + 0.5px);
    transform: scaleX(0);
}

.scene-coins b:nth-of-type(odd)::before,
.flux-cadre b:nth-of-type(odd)::before {
    left: 0;
    transform-origin: left center;
}

.scene-coins b:nth-of-type(odd)::after,
.flux-cadre b:nth-of-type(odd)::after {
    right: 0;
    transform-origin: right center;
}

/* Verticales (droite, gauche). */
.scene-coins b:nth-of-type(even)::before,
.scene-coins b:nth-of-type(even)::after,
.flux-cadre b:nth-of-type(even)::before,
.flux-cadre b:nth-of-type(even)::after {
    left: 0;
    right: 0;
    height: calc(50% + 0.5px);
    transform: scaleY(0);
}

.scene-coins b:nth-of-type(even)::before,
.flux-cadre b:nth-of-type(even)::before {
    top: 0;
    transform-origin: center top;
}

.scene-coins b:nth-of-type(even)::after,
.flux-cadre b:nth-of-type(even)::after {
    bottom: 0;
    transform-origin: center bottom;
}

.flux-docs {
    position: absolute;
    left: 0;
    top: 46px;
    width: calc(50% - 8px);
    padding: 0 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.flux-doc {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--blanc);
    border: 1px solid var(--trait);
    color: var(--encre);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform 1.2s cubic-bezier(0.5, 0, 0.2, 1), border-color 0.6s ease;
    transition-delay: calc(var(--i) * 0.25s);
}

.flux-doc:nth-child(1) { --i: 0; }
.flux-doc:nth-child(2) { --i: 1; }
.flux-doc:nth-child(3) { --i: 2; }

.flux-doc .ico {
    width: 16px;
    height: 16px;
    color: var(--discret);
}

/* Sans cadre : les documents partent dans la case de droite. */
.flux[data-etat="sans"] .flux-doc {
    transform: translateX(calc(100% + 52px));
    border-color: #F3B49A;
}

.flux[data-etat="sans"] .flux-ailleurs {
    border-color: var(--puissance);
    background: #FFF4EF;
}

.flux.sans-transition .flux-doc,
.flux.sans-transition .flux-cadre,
.flux.sans-transition .flux-ailleurs {
    transition: none;
}

.flux[data-etat="depart"] [data-flux-texte="avec"] {
    opacity: 0;
}

.flux[data-etat="avec"] .flux-cadre {
    opacity: 1;
    transform: scale(1);
}

/* Avec LIHA : une fois les documents rentrés, les barres relient les coins. */
.flux-cadre::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: rgba(91, 75, 255, 0.08);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.flux[data-etat="avec"] .flux-cadre b::before,
.flux[data-etat="avec"] .flux-cadre b::after {
    transform: none;
    transition-delay: 1.3s;
}

.flux[data-etat="avec"] .flux-cadre::before {
    opacity: 1;
    transition-delay: 1.6s;
}

.flux.sans-transition .flux-cadre::before,
.flux.sans-transition .flux-cadre b::before,
.flux.sans-transition .flux-cadre b::after {
    transition: none;
}

.flux-legende {
    display: grid;
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--texte);
}

.flux-legende span {
    grid-area: 1 / 1;
    transition: opacity 0.5s ease;
}

.flux[data-etat="sans"] [data-flux-texte="avec"],
.flux[data-etat="avec"] [data-flux-texte="sans"] {
    opacity: 0;
}

/* ---------- Blocs ---------- */

.bloc {
    padding: var(--bloc) 0;
}

.bloc-brume {
    background: var(--brume);
}

.bloc-encre {
    background: var(--encre);
    color: var(--sur-encre);
}

.bloc-encre h2,
.bloc-encre strong {
    color: var(--blanc);
}

.bloc-encre .surtitre {
    color: var(--peche);
}

.bloc-encre a:not(.btn) {
    color: var(--peche);
}

.bloc-tete {
    max-width: 760px;
}

.bloc-tete h2 {
    font-size: clamp(32px, 4vw, 48px);
    letter-spacing: -0.03em;
    line-height: 1.08;
}

.chapo {
    margin-top: 20px;
    font-size: 19px;
    line-height: 1.55;
}

.deux-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.note {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--discret);
}

.bloc-encre .note {
    color: var(--sur-encre);
}

/* Cartes */
.cartes {
    display: grid;
    gap: 16px;
    margin-top: 48px;
}

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

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

.carte {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px 24px;
    border-radius: var(--rayon);
    background: var(--blanc);
    border: 1px solid var(--trait);
}

.carte h3 {
    font-size: 20px;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.carte p {
    font-size: 16px;
    line-height: 1.5;
}

.ico-carte {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    color: var(--signal);
}

.carte .sym.ico-carte {
    color: var(--encre);
}

/* Listes à pictogramme */
.liste-ico {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 32px;
    font-size: 16.5px;
    line-height: 1.5;
}

.liste-ico li,
.liste-dsi li,
.achat li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.liste-ico .ico {
    margin-top: 2px;
    color: var(--signal);
}

/* ---------- 3. Démonstration ---------- */

.demo {
    position: sticky;
    top: 96px;
}

.demo-onglets {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.demo-onglets [role="tab"] {
    min-height: 44px;
    padding: 0 16px;
    border: 1.5px solid var(--trait);
    border-radius: 999px;
    background: var(--blanc);
    color: var(--encre);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.demo-onglets [role="tab"][aria-selected="true"] {
    background: var(--encre);
    border-color: var(--encre);
    color: var(--blanc);
}

.demo-fenetre {
    border-radius: var(--rayon);
    background: var(--blanc);
    border: 1px solid var(--trait);
    overflow: hidden;
    box-shadow: 0 24px 48px -32px rgba(18, 20, 43, 0.35);
}

.demo-barre,
.apercu-barre {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--trait);
    font-size: 14px;
    font-weight: 600;
    color: var(--encre);
}

.demo-barre .sym,
.apercu-barre .sym {
    width: 22px;
    height: 22px;
}

.pastille {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.pastille-souverain {
    background: var(--signal-pale);
    color: #3A2BC7;
}

.demo-panneau {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 420px;
    padding: 20px;
}

.demo-panneau:focus-visible {
    outline-offset: -3px;
}

.msg {
    max-width: 92%;
    font-size: 16px;
    line-height: 1.5;
}

.msg-agent {
    align-self: flex-end;
    padding: 12px 16px;
    border-radius: 16px 16px 4px 16px;
    background: var(--encre);
    color: var(--blanc);
    min-height: 48px;
}

.msg-liha {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px 16px 16px 4px;
    background: var(--brume);
    color: var(--texte);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.msg-liha.est-cachee {
    opacity: 0;
    transform: translateY(8px);
}

.msg-liha blockquote {
    padding-left: 14px;
    border-left: 2px solid var(--trait);
    font-style: italic;
}

.sources {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.sources li > * {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--blanc);
    border: 1px solid var(--trait);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--encre);
    text-decoration: none;
}

.sources a {
    color: #3A2BC7;
}

.sources a::after {
    content: "↗";
    margin-left: 6px;
    font-weight: 500;
}

.sources a:hover {
    border-color: var(--signal);
}

.curseur::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1.1em;
    margin-left: 2px;
    vertical-align: -0.15em;
    background: currentColor;
    animation: clignote 1s steps(2) infinite;
}

@keyframes clignote {
    50% { opacity: 0; }
}

.titre-liste {
    margin-top: 72px;
    font-size: 22px;
    letter-spacing: -0.015em;
}

.services {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.services li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    border-radius: 12px;
    background: var(--blanc);
    font-size: 16px;
    line-height: 1.45;
}

/* ---------- 5. Simulateur ---------- */

.simu {
    margin-top: 40px;
}

.simu-corps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 24px;
}

.simu-reglages,
.simu-resultat {
    padding: 32px;
    border-radius: var(--rayon);
    background: var(--blanc);
    border: 1px solid var(--trait);
}

.champ {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    min-width: 0;
}

.champ label,
.champ legend {
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--encre);
}

.champ legend {
    margin-bottom: 10px;
}

.simu-reglages .champ + .champ {
    margin-top: 12px;
}

output {
    color: var(--signal);
    font-variant-numeric: tabular-nums;
}

input[type="range"] {
    width: 100%;
    height: 44px;
    margin: 0;
    accent-color: var(--signal);
    cursor: pointer;
}

.echelle {
    display: flex;
    justify-content: space-between;
    margin-top: -8px;
    font-size: 13px;
    color: var(--discret);
}

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

.case {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 14px;
    border: 1.5px solid var(--trait);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--encre);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.case:has(input:checked) {
    border-color: var(--signal);
    background: #F6F5FF;
}

.case input {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: none;
    accent-color: var(--signal);
}

.case span {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.case small {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--discret);
}

.case-simple {
    border: 0;
    padding: 0;
    min-height: 44px;
}

.case-simple:has(input:checked) {
    background: none;
}

.simu-resultat {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.barres {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.barre-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.barre-zone {
    display: flex;
    align-items: flex-end;
    height: 200px;
    border-bottom: 1px solid var(--trait);
}

.barre {
    width: 100%;
    height: 0;
    min-height: 4px;
    border-radius: 10px 10px 0 0;
    transition: height 0.7s cubic-bezier(0.3, 0, 0.2, 1);
}

.barre-autres {
    background: repeating-linear-gradient(135deg, #C7CADA 0 10px, #D5D8E5 10px 20px);
}

.barre-liha {
    background: var(--signal);
}

.barre-titre {
    font-size: 14px;
    font-weight: 600;
    color: var(--discret);
}

.chiffres {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.chiffres dt {
    font-size: 14px;
    font-weight: 600;
    color: var(--discret);
}

.chiffres dd {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--encre);
}

.chiffres dd.petit {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--discret);
}

.economie {
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--signal-pale);
    color: var(--encre);
    font-size: 19px;
    line-height: 1.4;
}

.economie strong {
    font-size: 26px;
    letter-spacing: -0.02em;
    color: #3A2BC7;
}

.economie.est-neutre {
    background: var(--brume);
}

.simu-plus {
    font-size: 15.5px;
}

/* ---------- 6. Sécurité ---------- */

.tableau-cadre {
    margin-top: 48px;
    overflow-x: auto;
    border-radius: var(--rayon);
    border: 1px solid var(--trait);
}

.tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    line-height: 1.45;
}

.tableau th,
.tableau td {
    padding: 16px 20px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--trait);
}

.tableau tbody tr:last-child th,
.tableau tbody tr:last-child td {
    border-bottom: 0;
}

.tableau thead th,
.tableau thead td {
    background: var(--brume);
}

.tableau tbody th {
    width: 22%;
    font-weight: 600;
    color: var(--encre);
}

.tableau-modes {
    min-width: 760px;
}

.mode {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 600;
    color: var(--encre);
}

.mode .sym,
.mode .ico {
    width: 24px;
    height: 24px;
}

.mode small {
    font-size: 14px;
    font-weight: 500;
    color: var(--discret);
}

.mode-chez-vous .ico {
    color: var(--signal);
}

.mode-puissance .sym-point {
    fill: var(--puissance);
}

/* Les quatre preuves au même format : pictogramme, titre, une phrase, alignés en haut. */
.preuves-cartes .carte {
    justify-content: flex-start;
}

.preuves-cartes .carte p {
    font-size: 15.5px;
}

.compteur {
    font-variant-numeric: tabular-nums;
}

/* ---------- 7. DSI ---------- */

#dsi .boutons {
    margin-top: 32px;
}

.liste-dsi {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 16.5px;
    line-height: 1.5;
}

.liste-dsi li {
    padding: 18px 0;
    border-bottom: 1px solid var(--sur-encre-trait);
}

.liste-dsi li:first-child {
    padding-top: 0;
}

.liste-dsi li:last-child {
    border-bottom: 0;
}

.liste-dsi .ico {
    margin-top: 2px;
    color: var(--peche);
}

/* ---------- 8. Prix ---------- */

.offres {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 48px;
    align-items: stretch;
}

.offre {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 36px 32px;
    border-radius: 20px;
    background: var(--blanc);
    border: 1px solid var(--trait);
}

.offre-patrimoine {
    background:
        radial-gradient(ellipse 80% 60% at 100% 0%, var(--peche-pale) 0%, rgba(255, 214, 194, 0) 70%),
        var(--brume);
    border-color: transparent;
}

.offre-nom {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--signal);
}

.offre-sous {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--encre);
}

.offre-prix {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    padding: 6px 0;
}

.offre-prix-patri {
    display: block;
    min-height: 92px;
}

.offre-prix-patri p {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
}

.montant {
    font-size: 44px;
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.05;
    color: var(--encre);
}

.unite {
    font-size: 16px;
    color: var(--discret);
}

.prix-barre {
    font-size: 24px;
    font-weight: 500;
    color: var(--discret);
    text-decoration-thickness: 2px;
}

.remise {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--signal);
    color: var(--blanc);
    font-size: 14px;
    font-weight: 600;
    animation: apparait 0.5s ease both;
}

@keyframes apparait {
    from { opacity: 0; transform: scale(0.8); }
}

.cp-commune {
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--encre);
}

.cp label {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--encre);
}

.cp-ligne {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cp-ligne input {
    width: 150px;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
}

.cp-ligne select {
    flex: 1 1 200px;
    min-width: 0;
}

.cp-aide {
    margin-top: 8px;
    font-size: 14px;
    color: var(--discret);
}

.cp-aide.est-erreur {
    color: var(--puissance-texte);
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
select {
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    border: 1.5px solid #C4C8D6;
    border-radius: 12px;
    background: var(--blanc);
    color: var(--encre);
    font: inherit;
    font-size: 17px;
}

input:focus-visible,
select:focus-visible {
    outline: 3px solid var(--signal-pale);
    outline-offset: 0;
    border-color: var(--signal);
}

input[aria-invalid="true"] {
    border-color: var(--puissance-texte);
}

.tranches {
    font-size: 15px;
}

.tranches summary {
    min-height: 32px;
    font-weight: 600;
    color: var(--encre);
    cursor: pointer;
}

.tableau-tranches {
    margin-top: 10px;
    font-size: 15px;
    background: var(--blanc);
    border-radius: 12px;
    overflow: hidden;
}

.tableau-tranches th,
.tableau-tranches td {
    padding: 10px 14px;
}

.tableau-tranches thead th {
    font-size: 13.5px;
    color: var(--discret);
}

.tableau-tranches td:last-child {
    text-align: right;
    font-weight: 600;
    color: var(--encre);
    white-space: nowrap;
}

.offre-liste {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 0;
    font-size: 16.5px;
    color: var(--encre);
}

.offre-liste li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.offre-liste .ico {
    width: 18px;
    height: 18px;
    color: var(--signal);
    stroke-width: 2.4;
}

.offre-option {
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--brume);
    font-size: 15.5px;
}

.offre-patrimoine .offre-option {
    background: var(--blanc);
}

.offre-mention {
    font-size: 14.5px;
    color: var(--discret);
}

.offre-boutons {
    margin-top: auto;
    padding-top: 10px;
}

.sous-offres {
    margin-top: 32px;
    font-size: 19px;
    text-align: center;
}

.achat {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
    font-size: 15.5px;
    line-height: 1.45;
}

.achat li {
    padding: 18px 20px;
    border-radius: 12px;
    border: 1px solid var(--trait);
}

.achat .ico {
    width: 20px;
    height: 20px;
    color: var(--signal);
    stroke-width: 2.4;
}

/* ---------- 9. Rappel ---------- */

.bloc-rappel {
    background:
        radial-gradient(ellipse 60% 70% at 0% 100%, var(--peche-pale) 0%, rgba(255, 214, 194, 0) 70%),
        radial-gradient(ellipse 60% 70% at 100% 0%, var(--lavande) 0%, rgba(207, 202, 255, 0) 70%),
        var(--brume);
}

.rappel-pique {
    margin-top: 20px;
    font-size: 19px;
    font-weight: 600;
    color: var(--encre);
}

.formulaire {
    display: flex;
    flex-direction: column;
    padding: 32px;
    border-radius: 20px;
    background: var(--blanc);
    box-shadow: 0 24px 48px -32px rgba(18, 20, 43, 0.35);
}

.formulaire .champ {
    margin-bottom: 16px;
}

.formulaire .note a {
    color: var(--discret);
}

.formulaire-motif {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--signal-pale);
    color: var(--encre);
    font-size: 15.5px;
}

.formulaire-retour {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 500;
    color: var(--encre);
}

.formulaire-retour:empty {
    display: none;
}

.formulaire-retour.est-ok {
    padding: 14px 16px;
    border-radius: 12px;
    background: #E3F6EF;
    color: #0B5F48;
}

.formulaire-retour.est-erreur {
    padding: 14px 16px;
    border-radius: 12px;
    background: #FFF1EB;
    color: var(--puissance-texte);
}

/* Piège à robots : invisible pour les visiteurs. */
.pot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Fenêtre du devis ---------- */

.fenetre {
    width: min(560px, calc(100% - 24px));
    max-height: calc(100dvh - 24px);
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: var(--blanc);
    color: var(--texte);
    overflow-y: auto;
}

.fenetre::backdrop {
    background: rgba(18, 20, 43, 0.55);
}

.fenetre .formulaire {
    box-shadow: none;
}

.fenetre-tete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.fenetre-tete h2 {
    font-size: 28px;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.fenetre-chapo {
    margin: 8px 0 20px;
    font-size: 16px;
}

.fermer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    margin: -8px -8px 0 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--encre);
    cursor: pointer;
}

.fermer:hover {
    background: var(--brume);
}

.champs-abo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.champs-abo .champ {
    margin-bottom: 8px;
}

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

.pied {
    padding: 56px 0 120px;
    background: var(--encre);
    color: var(--sur-encre);
    font-size: 15px;
}

.pied-in {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 32px;
}

.pied-marque {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.logo-clair {
    color: var(--blanc);
}

.logo-clair .sym {
    color: var(--blanc);
}

.logo-clair .sym-point {
    fill: var(--peche);
}

.pied-infos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 560px;
}

.pied a {
    color: var(--blanc);
}

.pied a:hover {
    color: var(--peche);
}

.pied-liens {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}

/* ---------- Bandeau fixe sur mobile ---------- */

.barre-mobile {
    display: none;
}

/* ---------- Adaptations ---------- */

@media (max-width: 1080px) {
    .hero-panneau {
        padding: 48px 40px;
    }

    .apercu {
        max-width: 560px;
    }

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

    .deux-col,
    .simu-corps,
    .hero-grille,
    .parler {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .demo {
        position: static;
    }

    .nav {
        gap: 20px;
    }
}

@media (max-width: 860px) {
    .nav {
        display: none;
    }

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

    .services,
    .achat {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    :root {
        --marge: 16px;
        --bloc: 72px;
    }

    body {
        font-size: 17px;
    }

    .entete-in {
        min-height: 64px;
    }

    .logo-svg {
        height: 26px;
    }

    /* Le libellé reste lu par les lecteurs d'écran, seul le pictogramme se voit. */
    .entete .btn-petit span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .entete .btn-petit {
        width: 44px;
        padding: 0;
    }

    .hero {
        padding-top: 0;
    }

    .hero .conteneur {
        padding: 0;
    }

    .hero-panneau {
        padding: 36px 16px 32px;
        border-radius: 0 0 24px 24px;
    }

    .hero-titre {
        font-size: 40px;
    }

    .hero-grille {
        margin-top: 24px;
        gap: 32px;
    }

    .hero .btn {
        width: 100%;
    }

    .apercu-corps {
        min-height: 0;
        padding: 16px;
    }

    .preuves {
        flex-direction: column;
    }

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

    .carte {
        padding: 22px 20px;
    }

    .flux {
        padding: 14px;
    }

    .flux-scene {
        height: 210px;
        gap: 10px;
    }

    /* Les documents tiennent dans le cadre fermé « Avec LIHA ». */
    .flux-docs {
        width: calc(50% - 5px);
        padding: 0 11px;
    }

    .flux-cadre {
        inset: 36px 2px 2px;
    }

    .flux-doc {
        padding: 0 6px;
        font-size: 12.5px;
    }

    .flux-doc .ico {
        display: none;
    }

    .flux[data-etat="sans"] .flux-doc {
        transform: translateX(calc(100% + 26px));
    }

    .demo-panneau {
        min-height: 0;
        padding: 16px;
    }

    .simu-reglages,
    .simu-resultat,
    .scene {
        border-radius: var(--rayon);
    }

    .msg {
        max-width: 100%;
        font-size: 15.5px;
    }

    .simu-reglages,
    .simu-resultat,
    .formulaire {
        padding: 22px 18px;
    }

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

    .barre-zone {
        height: 150px;
    }

    .chiffres dd {
        font-size: 26px;
    }

    .offre {
        padding: 28px 20px;
    }

    .montant {
        font-size: 38px;
    }

    .offre-boutons .btn {
        width: 100%;
    }

    .sous-offres {
        text-align: left;
    }

    .barre-mobile {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: block;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.96);
        border-top: 1px solid var(--trait);
        transition: transform 0.3s ease;
    }

    .barre-mobile .btn {
        width: 100%;
    }

    .barre-mobile.est-cachee {
        transform: translateY(110%);
    }
}

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

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media print {
    .entete,
    .barre-mobile,
    .fenetre,
    .formulaire,
    .flux-choix {
        display: none !important;
    }

    .bloc-encre,
    .pied {
        background: none;
        color: var(--texte);
    }
}

/* Le tableau des deux modes, empilé sur téléphone : chaque ligne devient une carte. */
@media (max-width: 640px) {
    .tableau-cadre {
        overflow: visible;
        border: 0;
    }

    .tableau-modes {
        min-width: 0;
    }

    .tableau-modes thead {
        display: none;
    }

    .tableau-modes tbody,
    .tableau-modes tr,
    .tableau-modes th,
    .tableau-modes td {
        display: block;
        width: auto;
    }

    .tableau-modes tr {
        margin-bottom: 12px;
        border: 1px solid var(--trait);
        border-radius: var(--rayon);
        overflow: hidden;
    }

    .tableau-modes tbody th {
        width: auto;
        padding: 12px 16px;
        background: var(--brume);
    }

    .tableau-modes td {
        padding: 12px 16px 12px 46px;
        position: relative;
    }

    .tableau-modes tbody tr:last-child td {
        border-bottom: 1px solid var(--trait);
    }

    .tableau-modes tr td:last-child {
        border-bottom: 0 !important;
    }

    .tableau-modes td::before {
        content: attr(data-mode);
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--encre);
    }

    .tableau-modes td::after {
        content: "";
        position: absolute;
        left: 18px;
        top: 16px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--signal);
    }

    .tableau-modes td[data-mode="Mode puissance"]::after {
        background: var(--puissance);
    }
}

/* ---------- Accès client dans l'en-tête : se connecter, créer un compte ---------- */

.entete-acces {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lien-connexion {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--encre);
    text-decoration: none;
}

.lien-connexion:hover {
    color: var(--signal);
}

@media (max-width: 1180px) {
    .nav {
        display: none;
    }
}

@media (max-width: 640px) {
    .entete-acces .btn-creer {
        display: none;
    }

    .lien-connexion {
        font-size: 14px;
    }
}

/* ---------- Page « Créer un compte » ---------- */

.compte {
    padding: 40px 0 96px;
    background:
        radial-gradient(ellipse 60% 40% at 0% 0%, var(--peche-pale) 0%, rgba(255, 214, 194, 0) 70%),
        var(--brume);
}

.compte-in {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 var(--marge);
}

.retour {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin-bottom: 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--encre);
    text-decoration: none;
}

.retour .ico {
    width: 18px;
    height: 18px;
}

.compte h1 {
    font-size: clamp(32px, 4.4vw, 44px);
    letter-spacing: -0.03em;
    line-height: 1.08;
}

.compte .chapo {
    margin-bottom: 28px;
}

.bloc-compte {
    min-width: 0;
    margin: 0 0 24px;
    padding: 0 0 24px;
    border: 0;
    border-bottom: 1px solid var(--trait);
}

.bloc-compte legend {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 0;
    font-size: 19px;
    font-weight: 600;
    color: var(--encre);
}

.etape {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: var(--signal);
    color: var(--blanc);
    font-size: 14px;
}

.fiche-mairie {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--signal-pale);
}

.fiche-mairie .ico {
    margin-top: 2px;
    color: var(--signal);
}

.fiche-nom {
    font-weight: 600;
    color: var(--encre);
}

.fiche-detail,
.ligne-sous {
    font-size: 14.5px;
    color: var(--discret);
}

.ligne-reglage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.ligne-titre {
    font-weight: 600;
    color: var(--encre);
}

.compteur-agents {
    display: flex;
    align-items: center;
    flex: none;
    border: 1.5px solid #C4C8D6;
    border-radius: 12px;
    overflow: hidden;
}

.compteur-agents button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 48px;
    border: 0;
    background: var(--blanc);
    color: var(--signal);
    cursor: pointer;
}

.compteur-agents button:hover {
    background: var(--signal-pale);
}

.compteur-agents input[type="number"] {
    width: 68px;
    min-height: 48px;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--trait);
    border-right: 1px solid var(--trait);
    border-radius: 0;
    text-align: center;
    font-weight: 600;
    -moz-appearance: textfield;
}

.compteur-agents input::-webkit-outer-spin-button,
.compteur-agents input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.deux-champs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.facultatif {
    font-weight: 400;
    color: var(--discret);
}

.recap {
    margin-bottom: 18px;
    padding: 18px 20px;
    border-radius: 12px;
    background: var(--brume);
}

.recap-titre {
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--encre);
}

.recap dl > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    font-size: 15.5px;
}

.recap dd {
    color: var(--encre);
    white-space: nowrap;
}

.recap .recap-total {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--trait);
    font-size: 18px;
    font-weight: 600;
    color: var(--encre);
}

.case-cgu {
    margin-bottom: 16px;
    font-weight: 500;
}

.case-cgu a {
    color: var(--signal);
}

/* Une phrase avec des liens : pas l'empilement des cases à options. */
.case-cgu span {
    display: block;
    line-height: 1.45;
}

.suite {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 24px 0 0;
    padding-left: 20px;
    font-size: 15px;
}

.deja-client {
    margin-top: 24px;
    text-align: center;
    font-size: 15.5px;
}

@media (max-width: 640px) {
    .compte {
        padding-top: 20px;
    }

    .ligne-reglage {
        flex-direction: column;
        align-items: flex-start;
    }

    .deux-champs {
        grid-template-columns: minmax(0, 1fr);
    }
}

.lien-devis {
    min-height: 44px;
    padding: 0 6px;
    border: 0;
    background: none;
    color: var(--signal);
    font: inherit;
    font-size: 15.5px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.lien-devis:hover {
    color: var(--encre);
}


main.compte:has(.introuvable) {
    min-height: calc(100vh - 72px);
}

.introuvable .boutons {
    margin-top: 8px;
}

/* =====================================================================
   Version 2 (brief « Offre BonjourLIHA » du 14/10/2026)
   ===================================================================== */

.btn-grand {
    min-height: 52px;
    padding: 0 24px;
    font-size: 17px;
}

.boutons-centre {
    justify-content: center;
}

/* ---------- En-tête : menu, et bouton menu sur téléphone ---------- */

.nav .nav-connexion {
    display: none;
}

.btn-menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1.5px solid var(--trait);
    border-radius: var(--rayon-btn);
    background: var(--blanc);
    color: var(--encre);
    cursor: pointer;
}

@media (max-width: 1180px) {
    .btn-menu {
        display: inline-flex;
    }

    /* Le menu ouvert : un panneau sous l'en-tête. */
    .nav.est-ouvert {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 8px var(--marge) 16px;
        background: var(--blanc);
        border-bottom: 1px solid var(--trait);
        box-shadow: 0 16px 24px -20px rgba(18, 20, 43, 0.3);
    }

    .nav.est-ouvert a {
        display: flex;
        align-items: center;
        min-height: 48px;
        font-size: 17px;
        border-bottom: 1px solid var(--trait);
    }

    .nav.est-ouvert a:last-child {
        border-bottom: 0;
    }

    .nav.est-ouvert .nav-connexion {
        display: flex;
    }
}

@media (max-width: 860px) {
    .entete-acces .lien-connexion {
        display: none;
    }
}

/* ---------- 4. Notre offre : l'animation du cadre ---------- */

.scene {
    margin-top: 48px;
    padding: 40px 32px 32px;
    border-radius: var(--rayon-xl, 24px);
    background: var(--brume);
}

.scene-zone {
    --cadre: 200px;
    --d: 210px;
    position: relative;
    height: 320px;
    max-width: 820px;
    margin: 0 auto;
    overflow: hidden;
}

.scene-cadre,
.scene-mairie,
.scene-filtre,
.scene-dehors {
    position: absolute;
    left: 50%;
    top: 50%;
}

.scene-cadre {
    width: var(--cadre);
    height: var(--cadre);
    margin: calc(var(--cadre) / -2) 0 0 calc(var(--cadre) / -2);
    transition: transform 1s cubic-bezier(0.3, 0, 0.2, 1);
}

/* Les quatre coins du symbole LIHA, dessinés en CSS pour garder un trait fin à grande taille. */
.scene-coins {
    --coin: 30%;
    --ep: 7px;
}

.scene-coins i {
    position: absolute;
    width: 30%;
    height: 30%;
    border: 0 solid var(--encre);
    transition: border-color 0.5s ease;
}

.scene-coins i:nth-child(1) { top: 0; left: 0; border-width: 7px 0 0 7px; border-top-left-radius: 28px; }
.scene-coins i:nth-child(2) { top: 0; right: 0; border-width: 7px 7px 0 0; border-top-right-radius: 28px; }
.scene-coins i:nth-child(3) { bottom: 0; right: 0; border-width: 0 7px 7px 0; border-bottom-right-radius: 28px; }
.scene-coins i:nth-child(4) { bottom: 0; left: 0; border-width: 0 0 7px 7px; border-bottom-left-radius: 28px; }

.scene-point {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border-radius: 50%;
    background: var(--signal);
    z-index: 2;
    transition: transform 1.4s cubic-bezier(0.5, 0, 0.2, 1), background-color 0.6s ease;
}

/* Mode souverain : le fond du cadre fermé, et le sceau « En France » posé sur la barre du bas. */
.scene-cadre::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background: rgba(91, 75, 255, 0.1);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.scene-sceau {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px 4px 8px;
    border-radius: 999px;
    background: var(--signal);
    color: var(--blanc);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 50%) scale(0.6);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.scene-sceau .ico {
    width: 15px;
    height: 15px;
    stroke-width: 2.2;
}

/* Les IA du marché arrivent du bord et se rangent dans le cadre. */
.scene-ia {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--blanc);
    border: 1px solid var(--trait);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--encre);
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--x0), var(--y0));
    transition: transform 1s cubic-bezier(0.3, 0, 0.2, 1), opacity 0.6s ease;
}

.scene-ia-1 { --x: -40px; --y: -42px; --x0: -340px; --y0: -120px; transition-delay: 0s; }
.scene-ia-2 { --x: 40px; --y: -42px; --x0: 340px; --y0: -120px; transition-delay: 0.15s; }
.scene-ia-3 { --x: -40px; --y: 42px; --x0: -340px; --y0: 120px; transition-delay: 0.3s; }
.scene-ia-4 { --x: 40px; --y: 42px; --x0: 340px; --y0: 120px; transition-delay: 0.45s; }

/* Le filtre qui masque les noms, et l'IA externe vers laquelle part la question. */
.scene-filtre {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--blanc);
    border: 2px dashed var(--puissance);
    transform: translate(-50%, -50%) translateX(calc(var(--d) * 0.78));
    opacity: 0;
    transition: opacity 0.6s ease;
}

.scene-filtre span {
    font-size: 13px;
    font-weight: 600;
    color: var(--encre);
}

.scene-filtre small {
    font-size: 11.5px;
    color: var(--discret);
}

.scene-dehors {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--blanc);
    border: 1.5px solid var(--puissance);
    font-size: 13px;
    font-weight: 600;
    color: var(--encre);
    transform: translate(-50%, -50%) translateX(calc(var(--d) * 1.55));
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* La mairie, qui accueille le cadre. */
.scene-mairie {
    width: 330px;
    height: 300px;
    margin: -160px 0 0 -165px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scene-mairie-ico {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--signal);
    stroke-width: 3px;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.scene-mairie-nom {
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%);
    padding: 0 8px;
    background: var(--brume);
    font-size: 13px;
    font-weight: 600;
    color: #3A2BC7;
    white-space: nowrap;
}

/* Étape 1 : toutes les IA dans le cadre. */
.scene[data-etape="1"] .scene-ia {
    opacity: 1;
    transform: translate(-50%, -50%) translate(var(--x), var(--y));
}

/* Étape 2 : la bulle du mode souverain. */
.scene[data-etape="2"] .scene-ia,
.scene[data-etape="3"] .scene-ia {
    opacity: 0.35;
    transform: translate(-50%, -50%) translate(var(--x), var(--y));
    transition-delay: 0s;
}

/* Les coins passent au violet, puis les barres les relient : le cadre se ferme. */
.scene[data-etape="2"] .scene-coins i {
    border-color: var(--signal);
}

.scene[data-etape="2"] .scene-coins b::before,
.scene[data-etape="2"] .scene-coins b::after {
    transform: none;
    transition-delay: 0.35s;
}

.scene[data-etape="2"] .scene-cadre::before {
    opacity: 1;
    transition-delay: 0.6s;
}

.scene[data-etape="2"] .scene-sceau {
    opacity: 1;
    transform: translate(-50%, 50%);
    transition-delay: 0.9s;
}

/* Étape 3 : la question sort, les noms masqués au passage du filtre. */
.scene[data-etape="3"] .scene-filtre,
.scene[data-etape="3"] .scene-dehors {
    opacity: 1;
}

.scene[data-etape="3"] .scene-point {
    transform: translateX(calc(var(--d) * 1.25));
    background: var(--puissance);
}

/* Étape 4 : le cadre se pose dans la mairie. */
.scene[data-etape="4"] .scene-mairie {
    opacity: 1;
    transform: none;
}

.scene[data-etape="4"] .scene-cadre {
    transform: translateY(26px) scale(0.62);
}

.scene[data-etape="4"] .scene-ia {
    opacity: 1;
    transform: translate(-50%, -50%) translate(var(--x), var(--y));
    transition-delay: 0s;
}

.scene-legendes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.scene-legendes button {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    height: 100%;
    padding: 14px 14px;
    border: 1.5px solid transparent;
    border-radius: var(--rayon-btn);
    background: rgba(255, 255, 255, 0.55);
    color: var(--texte);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.scene-legendes button[aria-pressed="true"] {
    background: var(--blanc);
    border-color: var(--signal);
    color: var(--encre);
}

.scene-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    background: var(--trait);
    color: var(--encre);
    font-size: 13px;
    font-weight: 600;
}

.scene-legendes button[aria-pressed="true"] .scene-num {
    background: var(--signal);
    color: var(--blanc);
}

/* Ce que vous gagnez, et les deux façons de l'avoir */
.gains-liste {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.gains-liste li {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-radius: var(--rayon);
    border: 1px solid var(--trait);
    font-size: 16px;
    line-height: 1.45;
    color: var(--encre);
}

.gains-liste .ico {
    width: 26px;
    height: 26px;
    color: var(--signal);
}

.facons {
    margin-top: 64px;
}

.facons-phrase {
    max-width: 820px;
    margin: 0 auto;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    color: var(--encre);
}

.facons-cartes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 920px;
    margin: 32px auto 28px;
}

.facon {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 28px;
    border-radius: 20px;
    background: var(--blanc);
    border: 1px solid var(--trait);
}

.facon-patrimoine {
    background:
        radial-gradient(ellipse 80% 60% at 100% 0%, var(--peche-pale) 0%, rgba(255, 214, 194, 0) 70%),
        var(--brume);
    border-color: transparent;
}

.facon h3 {
    font-size: 28px;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.facon p:last-child {
    font-size: 16.5px;
}

/* ---------- 5. Simulateur : onglets, agents, IA, barres ---------- */

.simu-onglets {
    display: inline-flex;
    margin-bottom: 16px;
    padding: 4px;
    border-radius: 14px;
    background: var(--blanc);
    border: 1px solid var(--trait);
}

.simu-onglets [role="tab"] {
    min-height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--discret);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.simu-onglets [role="tab"][aria-selected="true"] {
    background: var(--encre);
    color: var(--blanc);
}

.agents-ligne {
    display: flex;
    align-items: center;
    gap: 16px;
}

.agents-ligne input[type="range"] {
    flex: 1 1 auto;
}

.agents-ligne input[type="number"] {
    width: 92px;
    flex: none;
    min-height: 48px;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.simu .echelle {
    padding-right: 108px;
}

.ia-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Toute la ligne est cliquable. Trois colonnes alignées d'une ligne à l'autre :
   le logo à gauche, le nom, puis le prix et la case à droite.
   « .champ .ia-ligne » : la règle « .champ label » (padding 0) ne doit pas l'emporter. */
.champ .ia-ligne {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto 22px;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    padding: 9px 16px 9px 10px;
    border: 1.5px solid var(--trait);
    border-radius: 14px;
    background: var(--blanc);
    color: var(--encre);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.champ .ia-ligne:hover {
    border-color: var(--lavande);
}

.champ .ia-ligne:has(input:checked) {
    border-color: var(--signal);
    background: #F6F5FF;
    box-shadow: 0 1px 2px rgba(91, 75, 255, 0.12);
}

.ia-ligne:has(input:focus-visible) {
    outline: 3px solid var(--signal);
    outline-offset: 2px;
}

/* La case, dessinée aux couleurs de LIHA, va dans la dernière colonne. */
.ia-ligne input {
    grid-column: 4;
    grid-row: 1;
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 1.5px solid #B8BCCD;
    border-radius: 7px;
    background: var(--blanc) no-repeat center / 14px 14px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ia-ligne input:checked {
    border-color: var(--signal);
    background-color: var(--signal);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.ia-ligne input:focus-visible {
    outline: none;
}

/* Le logo de l'éditeur, sur une tuile blanche. */
.ia-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--blanc);
    border: 1px solid var(--trait);
}

.ia-logo img {
    display: block;
    width: 24px;
    height: 24px;
}

.ia-nom {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
}

.ia-nom small {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--discret);
}

.ia-prix {
    text-align: right;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--discret);
    font-variant-numeric: tabular-nums;
}

.simu-cp {
    margin-top: 20px;
}

.simu-periode {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--discret);
}

.barre {
    transition: height 0.6s cubic-bezier(0.3, 0, 0.2, 1);
}

/* Logiciel (plein) et consommation (hachurée, sans chiffre tant qu'elle n'est pas fixée) empilés. */
.barre-pile {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
}

.barre-pile .barre-liha {
    border-radius: 0;
}

.barre-pile .barre-liha:first-child,
.barre-pile .barre-conso[hidden] + .barre-liha {
    border-radius: 10px 10px 0 0;
}

.barre-conso {
    position: relative;
    flex: none;
    min-height: 0;
    border-radius: 10px 10px 0 0;
    background: repeating-linear-gradient(135deg, #CFCAFF 0 8px, #E9E6FF 8px 16px);
    border: 1.5px dashed var(--signal);
    border-bottom: 0;
}

.barre-conso span {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: calc(100% + 6px);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: #3A2BC7;
    text-align: center;
}

.simu[data-mode="abonnement"] .barre-conso {
    display: none;
}

.simu-resultat .boutons {
    margin-top: 4px;
}

/* ---------- 6. Sécurité ---------- */

.securite-suite {
    margin-top: 48px;
    align-items: center;
}

.liste-securite {
    margin-top: 0;
}

/* ---------- 9. On en parle ? Le rappel et le mini chat ---------- */

.parler-titre {
    margin-bottom: 24px;
}

.parler {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

.parler-rappel,
.chat {
    display: flex;
    flex-direction: column;
    padding: 32px;
    border-radius: 20px;
    background: var(--blanc);
    box-shadow: 0 24px 48px -32px rgba(18, 20, 43, 0.35);
}

.parler-rappel .formulaire {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

.parler-h {
    font-size: clamp(24px, 2.6vw, 32px);
    letter-spacing: -0.03em;
    line-height: 1.12;
}

.baudouin {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 16px 0 24px;
    font-size: 16px;
    line-height: 1.5;
}

/* En attendant la photo de Baudouin : ses initiales. */
.baudouin-photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 50%;
    background:
        radial-gradient(circle at 20% 10%, var(--peche-pale) 0%, rgba(255, 214, 194, 0) 70%),
        var(--signal-pale);
    color: var(--encre);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
    object-fit: cover;
}

.chat-tete {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.chat-tete .sym {
    width: 32px;
    height: 32px;
}

.chat-fil {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 240px;
    max-height: 440px;
    overflow-y: auto;
    padding: 4px 2px;
    overscroll-behavior: contain;
}

.bulle-liha,
.bulle-visiteur {
    max-width: 92%;
    padding: 12px 16px;
    font-size: 15.5px;
    line-height: 1.5;
    white-space: pre-line;
}

.bulle-liha {
    align-self: flex-start;
    border-radius: 16px 16px 16px 4px;
    background: var(--brume);
    color: var(--texte);
}

.bulle-visiteur {
    align-self: flex-end;
    border-radius: 16px 16px 4px 16px;
    background: var(--encre);
    color: var(--blanc);
}

.bulle-liha.est-en-cours::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--signal);
    animation: clignote 1s steps(2) infinite;
}

.bulle-liha .btn {
    margin-top: 10px;
    white-space: normal;
}

.chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
}

.chat-suggestions button {
    min-height: 40px;
    padding: 6px 14px;
    border: 1.5px solid var(--signal);
    border-radius: 999px;
    background: var(--blanc);
    color: #3A2BC7;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

.chat-suggestions button:hover {
    background: #F6F5FF;
}

.chat-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.chat-form textarea {
    flex: 1 1 auto;
    min-height: 52px;
    max-height: 160px;
    padding: 13px 14px;
    border: 1.5px solid #C4C8D6;
    border-radius: 12px;
    background: var(--blanc);
    color: var(--encre);
    font: inherit;
    font-size: 16px;
    line-height: 1.4;
    resize: none;
}

.chat-form textarea:focus-visible {
    outline: 3px solid var(--signal-pale);
    outline-offset: 0;
    border-color: var(--signal);
}

.chat-envoyer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: none;
    border: 0;
    border-radius: 12px;
    background: var(--signal);
    color: var(--blanc);
    cursor: pointer;
}

.chat-envoyer:hover {
    background: var(--signal-fonce);
}

.chat-envoyer[disabled] {
    opacity: 0.5;
    cursor: progress;
}

/* ---------- Fenêtre « dossier sécurité » ---------- */

.cases-pile {
    grid-template-columns: minmax(0, 1fr);
}

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

.pied-signature {
    font-size: 16px;
    font-weight: 500;
    color: var(--blanc);
}

.pied-marques {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: #A3A6C2;
}

/* ---------- Adaptations de la version 2 ---------- */

@media (max-width: 1080px) {
    .gains-liste {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 640px) {
    .scene {
        padding: 24px 14px 16px;
    }

    .scene-zone {
        --cadre: 140px;
        --d: 120px;
        height: 250px;
    }

    .scene-coins i:nth-child(1) { border-width: 5px 0 0 5px; border-top-left-radius: 20px; }
    .scene-coins i:nth-child(2) { border-width: 5px 5px 0 0; border-top-right-radius: 20px; }
    .scene-coins i:nth-child(3) { border-width: 0 5px 5px 0; border-bottom-right-radius: 20px; }
    .scene-coins i:nth-child(4) { border-width: 0 0 5px 5px; border-bottom-left-radius: 20px; }

    .scene-ia {
        padding: 4px 8px;
        font-size: 11.5px;
    }

    .scene-ia-1 { --x: -30px; --y: -30px; --x0: -200px; }
    .scene-ia-2 { --x: 30px; --y: -30px; --x0: 200px; }
    .scene-ia-3 { --x: -30px; --y: 30px; --x0: -200px; }
    .scene-ia-4 { --x: 30px; --y: 30px; --x0: 200px; }

    .scene-coins {
        --ep: 5px;
    }

    .scene-cadre::before {
        border-radius: 20px;
    }

    .scene-sceau {
        padding: 3px 9px 3px 6px;
        font-size: 11.5px;
    }

    .scene-point {
        width: 18px;
        height: 18px;
        margin: -9px 0 0 -9px;
    }

    .scene-filtre {
        padding: 6px 8px;
    }

    .scene-filtre small {
        display: none;
    }

    .scene-mairie {
        width: 240px;
        height: 230px;
        margin: -120px 0 0 -120px;
    }

    .scene[data-etape="4"] .scene-cadre {
        transform: translateY(22px) scale(0.6);
    }

    .scene-legendes,
    .gains-liste,
    .facons-cartes {
        grid-template-columns: minmax(0, 1fr);
    }

    .facons-phrase {
        font-size: 18px;
        text-align: left;
    }

    .simu-onglets {
        display: flex;
    }

    .simu-onglets [role="tab"] {
        flex: 1 1 0;
        padding: 0 10px;
    }

    .champ .ia-ligne {
        grid-template-columns: 36px minmax(0, 1fr) auto 22px;
        gap: 10px;
        padding: 8px 12px 8px 8px;
    }

    .ia-logo {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .ia-logo img {
        width: 22px;
        height: 22px;
    }

    .parler-rappel,
    .chat {
        padding: 22px 18px;
    }

    .chat-fil {
        min-height: 160px;
    }

    .entete .btn-rappel-entete {
        width: 44px;
        padding: 0;
    }
}

/* Liens vers les pages de contenu */
.lien-page {
    margin-top: 24px;
    text-align: center;
}

/* =====================================================================
   liha.fr, page des PME (brief de refonte du 26/10/2026)
   ===================================================================== */

/* Les faits pas encore confirmés : visibles dans la maquette, à remplacer avant la mise en ligne. */
.a-confirmer {
    padding: 0 4px;
    border-radius: 4px;
    background: #FFF1EA;
    box-shadow: inset 0 -2px 0 var(--peche);
    color: inherit;
}

.a-confirmer::before { content: "["; color: var(--puissance-texte); }
.a-confirmer::after { content: "]"; color: var(--puissance-texte); }

.pastille-puissance {
    background: #FFF1EA;
    color: var(--puissance-texte);
}

/* En-tête : « J'ai reçu un code », un lien discret. */
.lien-code {
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--discret);
    cursor: pointer;
}

.nav .nav-code {
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.nav.est-ouvert .nav-code {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-size: 17px;
    padding: 0;
}

@media (max-width: 1080px) {
    .entete-acces .lien-code {
        display: none;
    }
}

@media (max-width: 640px) {
    .entete-acces .btn-essai-entete {
        display: none;
    }
}

/* ---------- 1. Accroche ---------- */

.hero-titre-suite {
    display: block;
    color: var(--signal);
}

.hero-prix {
    margin-top: 22px;
    padding: 14px 18px;
    border-radius: var(--rayon-btn);
    background: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    line-height: 1.5;
    color: var(--texte);
}

.hero-prix strong {
    font-size: 18px;
}

/* Le sélecteur d'IA : il s'ouvre, le survol descend, la réponse est réécrite par l'IA choisie. */
.selecteur .apercu-corps {
    min-height: 330px;
}

.sel-haut {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 0;
}

.sel-etiquette {
    font-size: 13px;
    font-weight: 600;
    color: var(--discret);
}

.sel {
    position: relative;
}

.sel-choix {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 10px 0 8px;
    border: 1.5px solid var(--trait);
    border-radius: 10px;
    background: var(--blanc);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--encre);
    transition: border-color 0.3s ease;
}

.sel-ouvert .sel-choix {
    border-color: var(--signal);
}

.sel-chevron {
    width: 16px;
    height: 16px;
    color: var(--discret);
    transition: transform 0.3s ease;
}

.sel-ouvert .sel-chevron {
    transform: rotate(180deg);
}

.sel-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 6px;
    background: var(--blanc);
    border: 1px solid var(--trait);
}

.sel-logo img,
.sel-logo svg {
    width: 16px;
    height: 16px;
}

.sel-logo svg {
    color: var(--encre);
}

.sel-liste {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    width: 240px;
    padding: 6px;
    border: 1px solid var(--trait);
    border-radius: 12px;
    background: var(--blanc);
    box-shadow: 0 18px 36px -18px rgba(18, 20, 43, 0.35);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.sel-ouvert .sel-liste {
    opacity: 1;
    transform: none;
}

.sel-liste li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.sel-liste li b {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--encre);
    line-height: 1.25;
}

.sel-liste li small {
    display: block;
    font-size: 12px;
    color: var(--discret);
    line-height: 1.3;
}

.sel-liste li.est-choisie {
    background: var(--brume);
}

.sel-liste li.est-survolee {
    background: var(--signal-pale);
}

/* ---------- 2. Pourquoi c'est important ---------- */

.pourquoi-col {
    align-items: center;
}

.pourquoi-col .chapo + .chapo {
    margin-top: 14px;
}

.choisir-logos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.choisir-logos li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--sur-encre-trait);
    font-size: 14px;
    font-weight: 600;
    color: var(--blanc);
    text-align: center;
}

.choisir-logos img {
    padding: 5px;
    border-radius: 8px;
    background: var(--blanc);
    width: 38px;
    height: 38px;
}

.choisir-prive .sym {
    width: 38px;
    height: 38px;
    color: var(--blanc);
}

.choisir-prive .sym-point {
    fill: var(--peche);
}

.choisir-suivante {
    border-style: dashed !important;
    color: var(--sur-encre) !important;
}

.choisir-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1.5px dashed var(--peche);
    color: var(--peche);
    font-size: 22px;
    line-height: 1;
}

/* ---------- 3. Ce qu'elle fait ---------- */

.demo-ia {
    display: flex;
}

.demo-ia .pastille {
    margin-left: 0;
}

/* ---------- 4. Notre offre ---------- */

.scene-entreprise {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #3A2BC7;
    white-space: nowrap;
}

.scene-entreprise .ico {
    width: 16px;
    height: 16px;
}

.scene-legendes-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.niveaux {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.niveau {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px;
    border-radius: var(--rayon);
    border: 1px solid var(--trait);
}

.niveau-plus {
    border-color: var(--signal);
    box-shadow: inset 0 0 0 1px var(--signal);
}

.niveau-prix .montant {
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--encre);
}

.niveau-prix .unite {
    font-size: 15px;
    color: var(--discret);
}

.possible {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    margin-top: 72px;
}

.possible-titre {
    font-size: clamp(26px, 3vw, 36px);
    letter-spacing: -0.03em;
    line-height: 1.12;
}

.possible-texte p {
    margin-top: 16px;
    font-size: 17px;
}

.possible-image {
    margin: 0;
    padding: 36px 32px;
    border-radius: 24px;
    background:
        radial-gradient(ellipse 70% 70% at 10% 0%, var(--peche-pale) 0%, rgba(255, 214, 194, 0) 70%),
        radial-gradient(ellipse 70% 80% at 100% 100%, var(--lavande) 0%, rgba(207, 202, 255, 0) 70%),
        var(--brume);
}

.possible-image p {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--encre);
}

.possible-image footer {
    margin-top: 16px;
    font-size: 15px;
    color: var(--texte);
}

#offre .gains {
    margin-top: 72px;
}

/* ---------- 5. Simulateur (une seule offre : pas d'onglets) ---------- */

.simu-pme .barre-liha {
    border-radius: 10px 10px 0 0;
}

/* ---------- 6. Vous gardez la main : l'espace d'administration ---------- */

.pilotage {
    align-items: center;
}

.pilotage .liste-ico {
    margin-top: 28px;
}

.admin {
    position: relative;
    margin: 0;
    border-radius: var(--rayon);
    background: var(--blanc);
    border: 1px solid var(--trait);
    box-shadow: 0 24px 48px -32px rgba(18, 20, 43, 0.35);
    overflow: hidden;
}

.admin .apercu-barre .pastille {
    background: var(--brume);
    color: var(--encre);
}

.admin-resume {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 16px;
}

.admin-resume > div {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--brume);
}

.admin-resume dt {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--discret);
}

.admin-resume dd {
    margin: 2px 0 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--encre);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.admin-resume .admin-detail {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--discret);
}

.admin-table {
    padding: 0 16px 8px;
}

.admin-ligne {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 12px;
    align-items: center;
    min-height: 54px;
    padding: 8px 0;
    border-bottom: 1px solid var(--trait);
    font-size: 14px;
}

.admin-ligne:last-child {
    border-bottom: 0;
}

.admin-entete {
    min-height: 0;
    padding: 4px 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--discret);
}

.admin-qui b {
    display: block;
    font-weight: 600;
    color: var(--encre);
    line-height: 1.25;
}

.admin-qui small {
    font-size: 12.5px;
    color: var(--discret);
}

.admin-ia {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.admin-ia i {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--trait);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    color: var(--encre);
    white-space: nowrap;
}

.admin-ia .ia-prive {
    border-color: transparent;
    background: var(--signal-pale);
    color: #3A2BC7;
}

.admin-quota {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 4px 10px;
    align-items: center;
}

.jauge {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: var(--brume);
    overflow: hidden;
}

.jauge-plein {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--v);
    border-radius: inherit;
    background: var(--signal);
    transition: width 1.2s cubic-bezier(0.3, 0, 0.2, 1), background-color 0.4s ease;
}

.admin-pct {
    font-size: 13px;
    font-weight: 600;
    color: var(--encre);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Le plafond atteint : jauge pêche, et le bouton pour débloquer un supplément. */
[data-admin-cible] .jauge-plein {
    background: var(--puissance);
}

.admin-action {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    transition: opacity 0.4s ease;
}

.admin-atteint {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--puissance-texte);
}

.admin-btn {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--signal);
    color: var(--blanc);
    font-size: 12.5px;
    font-weight: 600;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.admin-actif {
    display: none;
    font-size: 12.5px;
    font-weight: 600;
    color: #3A2BC7;
}

.admin-toast {
    margin: 4px 16px 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--encre);
    color: var(--blanc);
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.admin-toast .a-confirmer {
    background: rgba(255, 255, 255, 0.12);
}

.admin-note {
    margin: 0;
    padding: 0 16px 14px;
    font-size: 12.5px;
}

/* Pendant l'animation : jauges vides au départ, action cachée tant que le plafond n'est pas atteint. */
.admin.est-joue:not(.est-pleine) .jauge-plein {
    width: 0;
}

.admin.est-joue:not(.est-atteint) .admin-action {
    opacity: 0;
}

.admin.est-presse .admin-btn {
    transform: scale(0.94);
    background: #4434E0;
}

.admin.est-debloque .admin-atteint,
.admin.est-debloque .admin-btn {
    display: none;
}

.admin.est-debloque .admin-actif {
    display: inline;
}

.admin.est-debloque [data-admin-cible] .jauge-plein {
    background: var(--signal);
}

.admin.est-debloque .admin-toast {
    opacity: 1;
    transform: none;
}

.admin.sans-transition .jauge-plein,
.admin.sans-transition .admin-action,
.admin.sans-transition .admin-toast {
    transition: none;
}

/* ---------- 7. Sécurité : deux colonnes au lieu de trois ---------- */

#securite .tableau-cadre {
    margin-top: 40px;
}

@media (max-width: 640px) {
    .tableau-modes td[data-mode="IA du marché"]::after {
        background: var(--puissance);
    }
}

/* ---------- 8. Prix ---------- */

.offre-toutes {
    box-shadow: inset 0 0 0 2px var(--signal);
}

.offre .offre-boutons {
    margin-top: auto;
    padding-top: 8px;
}

#prix .achat {
    margin-top: 32px;
}

/* ---------- 9. Preuves ---------- */

.temoignages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 40px;
}

.temoignage {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px;
    border-radius: var(--rayon);
    background: var(--blanc);
}

.temoignage blockquote {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: var(--encre);
}

.temoignage-qui {
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--texte);
}

.temoignage-faux {
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 999px;
    background: #FFF1EA;
    color: var(--puissance-texte);
    font-size: 12px;
    font-weight: 600;
}

/* ---------- 10. On en parle ? L'essai et le mini chat ---------- */

.parler-essai {
    gap: 20px;
}

.parler-essai .liste-ico {
    margin: 0;
}

.parler-essai .btn {
    align-self: flex-start;
}

.parler-essai .note {
    margin-top: 0;
}

/* ---------- Adaptations ---------- */

@media (max-width: 1080px) {
    .possible {
        grid-template-columns: minmax(0, 1fr);
    }

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

@media (max-width: 860px) {
    .scene-legendes-3,
    .niveaux {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .choisir-logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-resume {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .admin-resume > div:last-child {
        grid-column: 1 / -1;
    }

    .admin-ligne {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    }

    .admin-entete span:nth-child(2),
    .admin-ia {
        display: none;
    }

    .sel-liste {
        width: 220px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sel-liste,
    .jauge-plein,
    .admin-action,
    .admin-toast {
        transition: none;
    }
}

/* ---------- Version 2 de la maquette (retours de Bok, 28/10/2026) ---------- */

/* Accroche : ce qui part chez l'IA. Avec une IA du marché, le nom et l'adresse se masquent un à un. */
.envoi {
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: opacity 0.45s ease;
}

.envoi.est-cachee {
    opacity: 0;
}

.envoi-fleche {
    display: flex;
    gap: 8px;
    padding-left: 4px;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--discret);
}

.envoi-signe {
    font-size: 16px;
    line-height: 1.2;
    color: var(--puissance-texte);
}

.envoi.est-prive .envoi-signe {
    color: var(--signal);
}

.envoi-bulle {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1.5px dashed var(--puissance);
    background: #FFF8F4;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--encre);
}

.envoi.est-prive .envoi-bulle {
    display: none;
}

.envoi-titre {
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 500;
    color: var(--discret);
}

/* Un bandeau encre glisse sur le mot, de gauche à droite, et le cache. */
.masque {
    padding: 0 2px;
    border-radius: 3px;
    background-image: linear-gradient(var(--encre), var(--encre));
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.45s ease-in;
}

.envoi.est-masque .masque {
    background-size: 100% 100%;
    transition-delay: calc(var(--i, 0) * 0.3s);
}

/* Ce que vous gagnez : les pictogrammes en grand, à gauche. */
.gains-pme {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gains-pme li {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    font-size: 17px;
}

.gains-pme .ico {
    flex: none;
    width: 60px;
    height: 60px;
    padding: 15px;
    border-radius: 16px;
    background: var(--signal-pale);
    color: var(--signal);
    stroke-width: 1.8;
}

@media (max-width: 860px) {
    .gains-pme {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .gains-pme .ico {
        width: 52px;
        height: 52px;
        padding: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .masque,
    .envoi {
        transition: none;
    }

}

.envoi.sans-transition,
.envoi.sans-transition .masque {
    transition: none;
}

#offre .gains .boutons {
    margin-top: 32px;
}

/* ---------- Version 3 de la maquette (retours de Bok, 28/10/2026) ---------- */

/* 2. Les quatre bénéfices : de grandes cartes qui s'empilent au défilement (comme lemlist). */
.pile {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 64px;
}

.pile-carte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    padding: 40px;
    border-radius: 32px;
    background: var(--blanc);
    border: 1px solid var(--trait);
    box-shadow: 0 -16px 40px -32px rgba(18, 20, 43, 0.4);
    transform-origin: center top;
}

.pile-texte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.pile-num {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--signal-pale);
    color: #3A2BC7;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pile-texte h3 {
    font-size: clamp(26px, 3vw, 36px);
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.pile-texte p {
    font-size: 17px;
    line-height: 1.55;
}

.pile-visuel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: 32px;
    border-radius: 24px;
    background:
        radial-gradient(ellipse 70% 70% at 10% 0%, var(--peche-pale) 0%, rgba(255, 214, 194, 0) 70%),
        radial-gradient(ellipse 70% 80% at 100% 100%, var(--lavande) 0%, rgba(207, 202, 255, 0) 70%),
        var(--brume);
}

.pile-visuel-encre {
    background: var(--encre);
}

.pile-visuel .choisir-logos {
    width: 100%;
    max-width: 420px;
}

/* Carte 01 : la bascule d'une IA à l'autre, dite sans nommer de fournisseur (remarque de Pierre). */
.pile-visuel-encre {
    flex-direction: column;
    gap: 20px;
}

.choisir-bascule {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    max-width: 420px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px dashed rgba(255, 184, 154, 0.6);
    color: var(--sur-encre);
    font-size: 14px;
    line-height: 1.45;
}

.choisir-bascule .ico {
    width: 20px;
    height: 20px;
    color: var(--peche);
}

.mini-admin {
    width: 100%;
    max-width: 400px;
    padding: 20px;
    border-radius: 16px;
    background: var(--blanc);
    box-shadow: 0 24px 48px -32px rgba(18, 20, 43, 0.35);
}

.mini-admin-titre {
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--discret);
}

.mini-admin-ligne {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 40px;
    gap: 12px;
    align-items: center;
    padding: 9px 0;
    border-top: 1px solid var(--trait);
    font-size: 14px;
}

.mini-admin-ligne b {
    font-weight: 600;
    color: var(--encre);
}

.mini-admin-ligne i {
    font-style: normal;
    font-weight: 600;
    text-align: right;
    color: var(--encre);
    font-variant-numeric: tabular-nums;
}

.mini-masque {
    max-width: 400px;
    font-size: 16px;
    background: var(--blanc);
}

/* Au repos, les noms sont masqués ; à l'arrivée à l'écran, le masquage se rejoue. */
.mini-masque .masque {
    background-size: 100% 100%;
}

.mini-masque.est-attente .masque {
    background-size: 0% 100%;
    transition: none;
}

.mini-masque .masque:nth-of-type(2) { transition-delay: 0.3s; }
.mini-masque .masque:nth-of-type(3) { transition-delay: 0.6s; }

.mini-prix {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 400px;
}

.mini-prix p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--blanc);
    font-size: 15px;
    color: var(--texte);
}

.mini-prix s {
    font-size: 18px;
    font-weight: 600;
    color: var(--discret);
    white-space: nowrap;
}

.mini-prix .mini-prix-liha {
    box-shadow: inset 0 0 0 2px var(--signal);
}

.mini-prix-liha strong {
    font-size: 24px;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.mini-prix .mini-prix-unite {
    justify-content: flex-end;
    padding: 0 4px;
    background: none;
    font-size: 13px;
    color: var(--discret);
}

@media (min-width: 861px) and (min-height: 640px) {
    .pile-carte {
        position: sticky;
        top: calc(100px + var(--n) * 18px);
        min-height: 440px;
        transform: scale(calc(1 - var(--recul, 0) * 0.05));
    }
}

@media (max-width: 860px) {
    .pile-carte {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 24px;
        border-radius: 24px;
    }

    .pile-visuel {
        min-height: 0;
        padding: 24px 16px;
    }
}

/* 3. LIHA choisit le bon modèle (onglet « Marketing ») : le même dessin, avec un modèle au hasard, puis avec le modèle choisi par LIHA. */
.routeur-choix {
    align-self: flex-start;
}

.routeur-reponse {
    max-width: 100%;
}
.routeur-modele,
.routeur-verdict {
    display: grid;
}

.routeur-chip {
    grid-area: 1 / 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    transition: opacity 0.4s ease;
}

.routeur-chip .ico {
    width: 16px;
    height: 16px;
    stroke-width: 2.4;
}

.routeur-chip-defaut {
    background: var(--brume);
    color: var(--discret);
}

.routeur-chip-liha {
    background: var(--signal-pale);
    color: #3A2BC7;
}

.routeur-image {
    position: relative;
    aspect-ratio: 320 / 220;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: var(--brume);
}

.routeur-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.6s ease;
}

@keyframes lihaBrille {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

.routeur-genere {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(100deg, var(--brume) 30%, #F8F9FC 50%, var(--brume) 70%);
    background-size: 200% 100%;
    font-size: 13px;
    font-weight: 500;
    color: var(--discret);
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: lihaBrille 1.2s linear infinite;
}

.routeur.est-genere .routeur-genere {
    opacity: 1;
}

.routeur-verdict span {
    grid-area: 1 / 1;
    font-size: 14px;
    font-weight: 600;
    transition: opacity 0.4s ease;
}

.routeur-verdict-defaut {
    color: var(--puissance-texte);
}

.routeur-verdict-liha {
    color: #3A2BC7;
}

.routeur[data-etat="defaut"] .routeur-chip-liha,
.routeur[data-etat="defaut"] .routeur-svg-liha,
.routeur[data-etat="defaut"] .routeur-verdict-liha,
.routeur[data-etat="liha"] .routeur-chip-defaut,
.routeur[data-etat="liha"] .routeur-svg-defaut,
.routeur[data-etat="liha"] .routeur-verdict-defaut,
.routeur.est-genere .routeur-verdict span {
    opacity: 0;
}

/* L'agence IA : un bandeau, pas une section. */
.agence {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    margin-top: 64px;
    padding: 24px 28px;
    border-radius: 20px;
    background: var(--encre);
    color: var(--sur-encre);
    font-size: 16.5px;
    line-height: 1.5;
}

.agence strong {
    color: var(--blanc);
}

.agence .agence-ico {
    width: 56px;
    height: 56px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 184, 154, 0.14);
    color: var(--peche);
}

.agence .agence-btn {
    background: var(--blanc);
    border-color: var(--blanc);
    color: var(--encre);
    white-space: nowrap;
}

@media (max-width: 860px) {
    .agence {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .routeur-genere {
        animation: none;
    }
}

/* ---------- Version 4 de la maquette (retours de Bok, 28/10/2026) ---------- */

/* 4. Notre offre : deux temps. 1. L'IA privée : le cadre se referme, en boucle. 2. Toutes les IA : elles entrent
   dans le cadre, et la question sort par le filtre qui masque les noms. */
.scene-offre .scene-prive {
    position: absolute;
    left: 50%;
    top: 16%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--encre);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.scene-offre .scene-prive small {
    font-size: 12px;
    font-weight: 500;
    color: #3A2BC7;
}

.scene-offre[data-temps="1"] .scene-prive {
    opacity: 1;
    transition-delay: 0.3s;
}

.scene-offre.est-ferme .scene-coins i {
    border-color: var(--signal);
}

.scene-offre.est-ferme .scene-coins b::before,
.scene-offre.est-ferme .scene-coins b::after {
    transform: none;
    transition-delay: 0.3s;
}

.scene-offre.est-ferme .scene-cadre::before {
    opacity: 1;
    transition-delay: 0.6s;
}

.scene-offre.est-ferme .scene-sceau {
    opacity: 1;
    transform: translate(-50%, 50%);
    transition-delay: 0.8s;
}

.scene-offre[data-temps="2"] .scene-ia {
    opacity: 1;
    transform: translate(-50%, -50%) translate(var(--x), var(--y));
}

.scene-offre[data-temps="2"] .scene-filtre,
.scene-offre[data-temps="2"] .scene-dehors {
    opacity: 1;
    transition-delay: 0.9s;
}

@keyframes lihaSortie {
    0%, 15% { transform: none; background-color: var(--signal); opacity: 1; }
    45% { background-color: var(--puissance); }
    70% { transform: translateX(calc(var(--d) * 1.25)); background-color: var(--puissance); opacity: 1; }
    85% { transform: translateX(calc(var(--d) * 1.25)); opacity: 0; }
    100% { transform: none; opacity: 0; }
}

.scene-offre[data-temps="2"] .scene-point {
    animation: lihaSortie 2.8s ease-in-out 1.2s infinite;
}

.scene-legendes-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.scene-legendes-2 strong {
    color: inherit;
}

@media (max-width: 860px) {
    .scene-legendes-2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .scene-offre[data-temps="2"] .scene-point {
        animation: none;
    }
}

#securite .lien-page {
    margin-top: 32px;
}

/* ---------- Page « Sécurité » ---------- */

.page-tete {
    padding-bottom: 32px;
}

.page-tete h1 {
    font-size: clamp(36px, 5vw, 56px);
    letter-spacing: -0.035em;
    line-height: 1.06;
}

.page-bloc {
    padding-top: 32px;
}

.page-h2 {
    font-size: clamp(26px, 3vw, 36px);
    letter-spacing: -0.03em;
    line-height: 1.12;
}

.page-bloc .tableau-cadre {
    margin-top: 32px;
}

.cartes-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 32px;
}

.page-questions > * {
    max-width: 820px;
}

.question {
    border-bottom: 1px solid var(--trait);
}

.page-h2 + .question {
    margin-top: 24px;
}

.question summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 64px;
    font-size: 18px;
    font-weight: 600;
    color: var(--encre);
    cursor: pointer;
    list-style: none;
}

.question summary::-webkit-details-marker {
    display: none;
}

.question summary::after {
    content: "+";
    flex: none;
    font-size: 24px;
    font-weight: 500;
    color: var(--signal);
    transition: transform 0.2s ease;
}

.question[open] summary::after {
    transform: rotate(45deg);
}

.question p {
    padding-bottom: 20px;
    font-size: 17px;
}

.page-boutons {
    margin-top: 40px;
}

@media (max-width: 1080px) {
    .cartes-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .cartes-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Six onglets dans « Ce qu'elle fait » : ils tiennent sur une ligne. */
.demo-onglets [role="tab"] {
    padding: 0 13px;
    font-size: 14.5px;
}

/* ---------- Version 5 de la maquette (retours de Bok, 28/10/2026) ---------- */

/* 2. Les cartes ouvrent la section ; « Pourquoi c'est important » vient après. */
#pourquoi .pile {
    margin-top: 0;
}

#pourquoi .pourquoi-col {
    margin-top: 96px;
}

/* 4. Le cadre de « Notre offre », dessiné comme le logo : coins aux bouts arrondis, barres qui les relient. */
.scene-offre .scene-cadre-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
}

.cadre-coins path {
    stroke: var(--encre);
    stroke-width: 7;
    stroke-linecap: round;
    transition: stroke 0.5s ease;
}

.cadre-barres path {
    stroke: var(--signal);
    stroke-width: 7;
    stroke-dasharray: 38.5 38.5;
    stroke-dashoffset: 38.5;
    transition: stroke-dashoffset 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.scene-offre.est-ferme .cadre-coins path {
    stroke: var(--signal);
}

.scene-offre.est-ferme .cadre-barres path {
    stroke-dashoffset: 0;
    transition-delay: 0.3s;
}

/* Temps 2 : le cadre se décale, la question passe le filtre et part vers les IA du marché, hors du cadre. */
.scene-offre .scene-filtre {
    transform: translate(-50%, -50%) translateX(calc(var(--d) * 0.25));
}

.scene-offre .scene-marche {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    transform: translate(-50%, -50%) translateX(calc(var(--d) * 1.05));
}

.scene-marche li {
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--blanc);
    border: 1.5px solid var(--puissance);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--encre);
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.3, 0, 0.2, 1);
}

.scene-offre[data-temps="2"] .scene-marche li {
    opacity: 1;
    transform: none;
}

.scene-offre[data-temps="2"] .scene-marche li:nth-child(2) { transition-delay: 0.15s; }
.scene-offre[data-temps="2"] .scene-marche li:nth-child(3) { transition-delay: 0.3s; }
.scene-offre[data-temps="2"] .scene-marche li:nth-child(4) { transition-delay: 0.45s; }

.scene-offre[data-temps="2"] .scene-cadre {
    transform: translateX(calc(var(--d) * -0.72));
}

@keyframes lihaVersMarche {
    0%, 15% { transform: none; background-color: var(--signal); opacity: 1; }
    45% { background-color: var(--puissance); }
    70% { transform: translateX(var(--loin)); background-color: var(--puissance); opacity: 1; }
    85% { transform: translateX(var(--loin)); opacity: 0; }
    100% { transform: none; opacity: 0; }
}

.scene-offre[data-temps="2"] .scene-point {
    --loin: calc(var(--d) * 1.77 - 48px);
    animation: lihaVersMarche 2.8s ease-in-out 1.2s infinite;
}

@media (max-width: 640px) {
    .scene-offre .scene-filtre {
        padding: 6px 8px;
        transform: translate(-50%, -50%) translateX(calc(var(--d) * 0.2));
    }

    .scene-offre .scene-filtre small {
        display: none;
    }

    .scene-offre .scene-marche {
        gap: 6px;
        transform: translate(-50%, -50%) translateX(calc(var(--d) * 1));
    }

    .scene-marche li {
        padding: 4px 8px;
        font-size: 11.5px;
    }

    .scene-offre[data-temps="2"] .scene-point {
        --loin: calc(var(--d) * 1.72 - 36px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .scene-offre[data-temps="2"] .scene-point {
        animation: none;
    }
}

/* 5. L'espace d'administration en pleine largeur, la liste à côté. */
.pilotage {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    margin-top: 48px;
}

.pilotage .pilotage-liste {
    margin-top: 8px;
}

.admin {
    overflow: visible;
}

.admin-ligne {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.2fr);
}

.admin-cas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.admin-cas i {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    white-space: nowrap;
}

.admin-cas i::before {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

/* Cas d'usage activé : coche verte. Pas encore activé : gris. Le vert est un état, pas une couleur de marque. */
.cas-on {
    background: #E7F6EE;
    color: #17633F;
}

.cas-on::before {
    background: #1F8A5B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8l4-4.2' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.cas-off {
    background: var(--brume);
    color: var(--discret);
}

.cas-off::before {
    border: 1.5px solid #B8BCCD;
    box-sizing: border-box;
}

/* Les bulles d'info, au survol ou au clavier. */
.info {
    position: relative;
    cursor: help;
}

.info:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
    border-radius: 6px;
}

.info::after {
    content: attr(data-info);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 20;
    width: max-content;
    max-width: 240px;
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--encre);
    color: var(--blanc);
    font-size: 12.5px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: left;
    white-space: normal;
    opacity: 0;
    transform: translate(-50%, 4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.admin-cas .info::before {
    position: static;
}

.info:hover::after,
.info:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* La jauge a sa bulle, mais garde son rognage : la bulle est portée par la cellule. */
.admin-quota .jauge.info {
    overflow: visible;
}

.admin-quota .jauge.info .jauge-plein {
    overflow: hidden;
}

@media (max-width: 1080px) {
    .pilotage {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .admin-ligne {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    }

    .admin-entete span:nth-child(3) {
        display: none;
    }

    .admin-cas {
        grid-column: 1 / -1;
        order: 3;
    }

    .info::after {
        max-width: 200px;
    }
}

/* « Votre entreprise » suit le cadre quand il se décale. */
.scene-offre .scene-entreprise {
    transition: transform 1s cubic-bezier(0.3, 0, 0.2, 1);
}

.scene-offre[data-temps="2"] .scene-entreprise {
    transform: translateX(-50%) translateX(calc(var(--d) * -0.72));
}

/* Notre offre : l'animation reste sur LIHA privée ; une phrase invite à ouvrir l'option. */
.scene-indice {
    text-align: center;
}

/* ---------- Version 3 forfaits : Pour tous, Illimité, Toutes les IA (brief du 29/10/2026) ---------- */

/* Le simulateur : trois compteurs, un interrupteur mois / an, l'économie en gros. */
.raccourcis,
.periode {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.raccourcis button,
.periode button {
    min-height: 44px;
    padding: 0 16px;
    border: 1.5px solid var(--trait);
    border-radius: 999px;
    background: var(--blanc);
    color: var(--encre);
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.raccourcis button[aria-pressed="true"],
.periode button[aria-pressed="true"] {
    border-color: var(--signal);
    background: var(--signal-pale);
    color: #3A2BC7;
}

.periode {
    align-self: flex-start;
    gap: 0;
    padding: 4px;
    border-radius: 999px;
    background: var(--brume);
}

.periode button {
    min-height: 40px;
    border-color: transparent;
    background: transparent;
}

.periode button[aria-pressed="true"] {
    border-color: transparent;
    background: var(--blanc);
    color: var(--encre);
    box-shadow: 0 1px 3px rgba(18, 20, 43, 0.12);
}

.compteurs {
    display: flex;
    flex-direction: column;
    margin-top: 14px;
}

.simu-compteur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--trait);
}

.compteur-texte {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.compteur-texte label {
    font-size: 16px;
    font-weight: 600;
    color: var(--encre);
}

.compteur-prix {
    margin-left: 6px;
    font-weight: 500;
    color: var(--discret);
    white-space: nowrap;
}

.compteur-texte small {
    font-size: 13.5px;
    color: var(--discret);
}

.compteur-reglage {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

.compteur-btn {
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--trait);
    border-radius: 12px;
    background: var(--blanc);
    color: var(--encre);
    font: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.compteur-btn:hover {
    border-color: var(--signal);
}

.compteur-reglage input {
    width: 64px;
    height: 44px;
    padding: 0 6px;
    border: 1.5px solid var(--trait);
    border-radius: 12px;
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    color: var(--encre);
    text-align: center;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

.compteur-reglage input::-webkit-outer-spin-button,
.compteur-reglage input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.compteur-reglage input:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 1px;
}

.compteurs-total {
    margin-top: 12px;
    font-size: 15px;
    color: var(--texte);
}

.compteurs-total strong {
    color: var(--encre);
}

.simu-forfaits .simu-reglages .note + .note {
    margin-top: 8px;
}

.simu-forfaits [hidden] {
    display: none !important;
}

.simu-chiffres {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gain-titre {
    font-size: 16px;
    font-weight: 600;
    color: var(--encre);
}

.gain-montant {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-top: 2px;
    color: var(--discret);
    font-size: 16px;
}

.gain-montant strong {
    font-size: clamp(40px, 5vw, 56px);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.05;
    color: var(--signal);
    font-variant-numeric: tabular-nums;
}

.gain-pastille {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--signal-pale);
    color: #3A2BC7;
    font-size: 15px;
    font-weight: 600;
}

.simu-forfaits .barre-zone {
    height: 220px;
    padding-top: 30px;
}

.simu-forfaits .barre {
    position: relative;
}

.simu-forfaits .barre-autres {
    background: #C7CADA;
}

.simu-forfaits .barre-liha {
    min-height: 8px;
}

.barre-montant {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    right: 0;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--encre);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.simu-forfaits .chiffres dt {
    color: var(--encre);
}

.simu-forfaits .chiffres dd.petit {
    margin-top: 2px;
    line-height: 1.45;
}

.simu-moyenne {
    font-size: 15px;
    color: var(--texte);
}

.simu-moyenne strong {
    color: var(--encre);
}

.simu-vide {
    padding: 32px 18px;
    border-radius: 12px;
    background: var(--brume);
    color: var(--encre);
    font-size: 17px;
    text-align: center;
}

.simu-conseil {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #FFF1EA;
    color: var(--encre);
    font-size: 15px;
}

/* Notre offre et les prix : trois forfaits, celui du milieu recommandé. */
.niveaux-3,
.offres-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.niveau-pour {
    font-weight: 600;
    color: var(--encre);
}

.pastille-reco {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--signal);
    color: var(--blanc);
    font-size: 12px;
    letter-spacing: 0.02em;
    text-transform: none;
    vertical-align: 1px;
}

.offre-inclus {
    font-weight: 600;
    color: var(--encre);
}

.offres-3 .offre {
    padding: 32px 26px;
}

.offre-minimum {
    margin: 0;
}

.melange {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 20px;
    padding: 24px 28px;
    border-radius: var(--rayon);
    background: var(--brume);
}

.melange .ico {
    flex: none;
    width: 28px;
    height: 28px;
    color: var(--signal);
}

.melange-titre {
    font-size: 17px;
    font-weight: 600;
    color: var(--encre);
}

.melange p + p {
    margin-top: 4px;
}

.mini-prix-tous {
    margin-top: 10px;
    font-size: 14px;
    color: var(--texte);
}

/* L'espace d'administration : une colonne Forfait, et la demande de Thomas. */
.admin-ligne {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.75fr) minmax(0, 0.85fr) minmax(0, 1.4fr) minmax(0, 1.1fr);
}

.admin-forfait i {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--signal-pale);
    color: #3A2BC7;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
}

.admin-forfait .forfait-tous {
    background: var(--brume);
    color: var(--encre);
}

.admin-forfait .forfait-toutes {
    background: var(--encre);
    color: var(--blanc);
}

.admin-illimite {
    grid-column: 1 / -1;
    font-size: 13px;
    font-weight: 600;
    color: #3A2BC7;
}

.jauge-atteinte .jauge-plein {
    background: var(--puissance);
}

.admin-quota-jour {
    grid-column: 1 / -1;
}

.admin-resume .admin-detail {
    white-space: normal;
}

.admin-demande {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 0 16px 8px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--signal);
    background: #F6F5FF;
    font-size: 14px;
    color: var(--encre);
}

.admin-demande-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-demande .admin-btn {
    display: inline-block;
    min-height: 36px;
    border: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.admin-plus-tard {
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--trait);
    border-radius: 8px;
    background: var(--blanc);
    color: var(--encre);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.admin-demande-fait:empty {
    display: none;
}

.admin-demande-fait {
    flex-basis: 100%;
    font-weight: 600;
    outline: none;
}

.admin-demande.est-acceptee .admin-demande-texte,
.admin-demande.est-acceptee .admin-demande-btns,
.admin-demande.est-reportee .admin-demande-texte,
.admin-demande.est-reportee .admin-demande-btns {
    display: none;
}

.admin-demande.est-acceptee {
    border-color: transparent;
    background: var(--encre);
    color: var(--blanc);
}

@media (max-width: 1080px) {
    .niveaux-3,
    .offres-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .admin-ligne {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    }

    .admin-entete span:nth-child(2),
    .admin-entete span:nth-child(4) {
        display: none;
    }

    .admin-forfait {
        grid-column: 1 / -1;
        order: 2;
    }

    .admin-quota {
        order: 1;
    }

    .admin-cas {
        order: 3;
    }

    .simu-compteur {
        flex-wrap: wrap;
    }

    .simu-forfaits .barre-montant {
        font-size: 15px;
    }

    .melange {
        padding: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .simu-forfaits .barre {
        transition: none;
    }
}

/* Simulateur : une seule IA par salarié, donc des boutons radio ronds. */
.ia-ligne input[type="radio"] {
    border-radius: 50%;
}

.ia-ligne input[type="radio"]:checked {
    background-color: var(--blanc);
    background-image: radial-gradient(circle, var(--signal) 0 5px, transparent 5.5px);
    background-size: auto;
}

/* Les prix : titres centrés, et les prix sur la même ligne d'une carte à l'autre (sous-grille). */
.offres-3 {
    grid-template-rows: auto auto;
}

.offres-3 .offre {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    gap: 22px;
}

.offre-tete {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.offre-tete .offre-prix {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: auto;
}

.offre-corps {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

@media (max-width: 1080px) {
    .offres-3 .offre {
        grid-row: auto;
        grid-template-rows: none;
    }
}

/* Ils l'utilisent : le titre tient sur une ligne. */
#preuves .bloc-tete {
    max-width: none;
}

/* ---------- Version 3 forfaits, retours de Bok (29/10/2026, deuxième passe) ---------- */

/* Accroche : sous-titre en texte courant, trois points cochés, un seul bouton. */
.hero .hero-sous {
    max-width: 640px;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.6;
    color: var(--texte);
}

.hero-points {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 26px;
    font-size: 17px;
    line-height: 1.4;
    color: var(--encre);
}

.hero-points li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.hero-points .ico {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: #1F8A4C;
    stroke-width: 2.4;
}

.hero-rassure {
    margin-top: 12px;
    font-size: 14px;
    color: var(--discret);
}

.hero-renvoi {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--discret);
}

/* 04 : les trois forfaits défilent de bas en haut, un à la fois. Le quatrième est une copie du premier,
   pour que la boucle reparte sans saut. */
.mini-offres {
    width: 100%;
    max-width: 380px;
}

.mini-offres-rail {
    --h: 112px;
    height: var(--h);
    overflow: hidden;
    border-radius: 16px;
}

.mini-offre {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    gap: 4px 16px;
    height: var(--h);
    padding: 0 20px;
    border-radius: 16px;
    background: var(--blanc);
    animation: miniOffres 9s cubic-bezier(0.6, 0, 0.3, 1) infinite;
}

.mini-offre b {
    font-size: 16px;
    font-weight: 600;
    color: var(--encre);
}

.mini-offre b i {
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--signal);
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    color: var(--blanc);
    vertical-align: 2px;
}

.mini-offre strong {
    grid-row: span 2;
    align-self: center;
    font-size: 24px;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: var(--encre);
}

.mini-offre span {
    font-size: 14px;
    line-height: 1.35;
    color: var(--texte);
}

.mini-offre-reco {
    box-shadow: inset 0 0 0 2px var(--signal);
}

@keyframes miniOffres {
    0%, 26% { transform: translateY(0); }
    33%, 59% { transform: translateY(-100%); }
    66%, 92% { transform: translateY(-200%); }
    99.9%, 100% { transform: translateY(-300%); }
}

.mini-offres .mini-prix-unite {
    margin-top: 8px;
    text-align: right;
    font-size: 13px;
    color: var(--discret);
}

@media (max-width: 640px) {
    .mini-offres-rail {
        --h: 124px;
    }

    .mini-offre {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 16px;
    }

    .mini-offre strong {
        grid-row: auto;
        font-size: 21px;
    }
}

.pile-carte:hover .mini-offre {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .mini-offres-rail {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mini-offre {
        animation: none;
    }

    .mini-offre-copie {
        display: none;
    }
}

/* Notre offre : trois temps. Pour tous affiche son quota, Illimité affiche « illimitée ». */
.scene-offre .scene-quota {
    display: none;
}

.scene-offre[data-etape="1"] .scene-quota {
    display: inline;
}

.scene-offre[data-etape="1"] .scene-illimite {
    display: none;
}

.scene-legendes-2.scene-legendes-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
}

@media (max-width: 860px) {
    .scene-legendes-2.scene-legendes-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Ce qu'elle fait : la section tient d'un coup sur un écran de 13 pouces (environ 1440 × 790). */
@media (min-width: 861px) {
    #exemples {
        padding: 32px 0;
    }

    #exemples .deux-col {
        align-items: center;
    }

    /* Même hauteur pour tous les onglets : la section ne saute pas quand on change d'onglet. */
    #exemples .demo-panneau {
        min-height: 400px;
        gap: 10px;
        padding: 16px 20px;
    }

    #exemples .routeur-image {
        aspect-ratio: auto;
        height: 130px;
    }

    #exemples .agence {
        margin-top: 20px;
        padding: 14px 24px;
        font-size: 15px;
    }

    #exemples .agence .agence-ico {
        width: 44px;
        height: 44px;
        padding: 11px;
    }
}

/* Votre prix : le simulateur tient en entier sur un écran de 13 pouces. Les IA sur deux colonnes,
   le prix sous le nom ; plus de texte sous les forfaits. */
@media (min-width: 861px) {
    #simulateur {
        padding: 72px 0;
    }

    #simulateur .bloc-tete {
        margin-bottom: 28px;
    }

    #simulateur .simu-reglages,
    #simulateur .simu-resultat {
        padding: 24px 28px;
    }

    #simulateur .simu-reglages .champ + .champ {
        margin-top: 18px;
    }

    #simulateur .compteurs {
        margin-top: 8px;
    }

    #simulateur .simu-compteur {
        padding: 8px 0;
    }

    #simulateur .compteur-btn,
    #simulateur .compteur-reglage input {
        height: 38px;
    }

    #simulateur .compteur-btn {
        width: 38px;
    }

    #simulateur .compteurs-total {
        margin-top: 8px;
    }

    #simulateur .ia-liste {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #simulateur .champ .ia-ligne {
        grid-template-columns: 28px minmax(0, 1fr) 22px;
        gap: 2px 10px;
        min-height: 0;
        padding: 8px 12px 8px 10px;
    }

    #simulateur .ia-ligne .ia-logo {
        grid-row: span 2;
    }

    #simulateur .ia-ligne .ia-nom {
        grid-column: 2;
        grid-row: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #simulateur .ia-ligne .ia-nom small {
        display: inline;
    }

    #simulateur .ia-ligne .ia-prix {
        grid-column: 2;
        grid-row: 2;
        text-align: left;
    }

    #simulateur .ia-ligne input {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    #simulateur .simu-reglages .note {
        margin-top: 12px;
        font-size: 12.5px;
    }

    #simulateur .simu-chiffres {
        gap: 14px;
    }

    #simulateur .simu-forfaits .barre-zone {
        height: 150px;
        padding-top: 28px;
    }

    #simulateur .simu-resultat {
        gap: 14px;
    }
}

/* ---------- Version 3 forfaits, retours de Bok (29/10/2026, troisième passe) ---------- */

/* En-tête flottant, aux bords arrondis, comme lemlist.com : une barre blanche détachée du haut de la page. */
.entete {
    top: 12px;
    margin: 12px 0 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
    pointer-events: none;
}

.entete .entete-in {
    position: relative;
    width: calc(100% - 2 * var(--marge));
    max-width: var(--largeur);
    min-height: 60px;
    margin: 0 auto;
    padding: 0 10px 0 22px;
    border: 1px solid var(--trait);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    box-shadow: 0 8px 24px -12px rgba(18, 20, 43, 0.18);
    pointer-events: auto;
    transition: box-shadow 0.2s ease;
}

.entete.est-defile .entete-in {
    box-shadow: 0 12px 32px -12px rgba(18, 20, 43, 0.28);
}

@media (max-width: 1180px) {
    /* Le menu ouvert reste dans la barre arrondie. */
    .nav.est-ouvert {
        top: calc(100% + 8px);
        border: 1px solid var(--trait);
        border-radius: 18px;
    }
}

@media (max-width: 860px) {
    .entete {
        top: 8px;
        margin-top: 8px;
    }

    .entete .entete-in {
        min-height: 56px;
        padding: 0 8px 0 16px;
        border-radius: 16px;
    }

    .hero {
        padding-top: 12px;
    }
}

/* Ce qu'elle fait : l'affiche se voit en entier, plus petite. */
#exemples .routeur-image {
    width: auto;
    max-width: 100%;
}

@media (min-width: 861px) {
    #exemples .routeur-image {
        aspect-ratio: 320 / 220;
        height: 150px;
        width: auto;
    }
}

/* Notre offre : les trois temps prennent la forme des cartes de forfait. */
.scene-cartes {
    max-width: none;
    margin-top: 28px;
    gap: 16px;
}

.scene-cartes button {
    padding: 22px 22px 24px;
    gap: 14px;
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    background: var(--blanc);
    font-weight: 400;
}

.scene-cartes button:hover {
    border-color: var(--signal);
}

.scene-cartes button[aria-pressed="true"] {
    border-color: var(--signal);
    box-shadow: inset 0 0 0 1px var(--signal);
}

.scene-forfait {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.scene-forfait .offre-nom {
    display: block;
}

.scene-forfait .niveau-prix .montant {
    font-size: 30px;
}

.scene-forfait .niveau-prix .unite {
    font-size: 14px;
}

.scene-forfait .niveau-pour {
    font-size: 15px;
}

.scene-detail {
    color: var(--texte);
    font-size: 15px;
    line-height: 1.5;
}

.scene-detail strong {
    color: var(--encre);
}

@media (max-width: 860px) {
    .scene-cartes {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Les IA du marché, avec leur logo, bien séparé du nom. */
.scene-marche li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 8px;
    text-align: left;
}

.scene-marche li img {
    flex: none;
    width: 18px;
    height: 18px;
}

@media (max-width: 640px) {
    .scene-marche li {
        gap: 6px;
        padding: 4px 10px 4px 6px;
    }

    .scene-marche li img {
        width: 14px;
        height: 14px;
    }
}

/* Simulateur : le logo de chaque IA ne touche plus son nom. */
@media (min-width: 861px) {
    #simulateur .champ .ia-ligne {
        grid-template-columns: 40px minmax(0, 1fr) 22px;
        gap: 2px 14px;
    }
}

/* L'économie par an, sous l'économie par mois. */
.gain-an {
    margin-top: 2px;
    color: var(--discret);
    font-size: 16px;
}

.gain-an strong {
    color: var(--encre);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Les prix : boutons centrés. */
#prix .offre-boutons {
    display: flex;
    justify-content: center;
}

#prix .offre-boutons .btn {
    text-align: center;
}

.scene-forfait .niveau-prix .unite {
    display: block;
}

.hero {
    padding-top: 12px;
}

@media (min-width: 861px) {
    #exemples {
        padding: 28px 0;
    }
}

@media (min-width: 861px) {
    #simulateur .ia-ligne .ia-nom {
        white-space: normal;
        overflow: visible;
        line-height: 1.25;
    }
}

#prix .offre-boutons .btn {
    width: auto;
    white-space: nowrap;
    padding-left: 20px;
    padding-right: 20px;
}

@media (max-width: 1080px) {
    #prix .offre-boutons .btn {
        white-space: normal;
    }
}

/* ---------- Version 3 forfaits, retours de Bok (29/10/2026, quatrième passe) ---------- */

/* Notre offre : le titre sur deux lignes, la seconde plus petite. */
#offre .bloc-tete {
    max-width: none;
}

.titre-deux .titre-suite {
    display: block;
    margin-top: 8px;
    font-size: 0.55em;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--texte);
}

/* Les prix : le bouton sur deux lignes, centré dans sa carte. */
#prix .offre-boutons {
    display: flex;
    justify-content: center;
    width: 100%;
}

#prix .offre-boutons .btn {
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    white-space: normal;
    line-height: 1.3;
    padding: 12px 28px;
    text-align: center;
}

/* Votre prix : plus compact, pour tenir sur un écran de 13 pouces. */
@media (min-width: 861px) {
    #simulateur {
        padding: 56px 0;
    }

    #simulateur .bloc-tete {
        margin-bottom: 20px;
    }

    #simulateur .simu-reglages,
    #simulateur .simu-resultat {
        padding: 20px 24px;
    }

    #simulateur .simu-compteur {
        padding: 6px 0;
    }

    #simulateur .compteur-btn {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        font-size: 18px;
    }

    #simulateur .compteur-reglage input {
        width: 52px;
        height: 30px;
        border-radius: 9px;
        font-size: 15px;
    }

    #simulateur .simu-reglages .champ + .champ {
        margin-top: 14px;
    }

    #simulateur .ia-liste {
        gap: 8px;
    }

    /* Une IA : ligne 1 le nom et l'offre, ligne 2 le prix. */
    #simulateur .champ .ia-ligne {
        grid-template-columns: 30px minmax(0, 1fr) 18px;
        gap: 0 10px;
        padding: 6px 10px 6px 8px;
        border-radius: 12px;
    }

    #simulateur .ia-ligne .ia-logo {
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }

    #simulateur .ia-ligne .ia-logo img {
        width: 18px;
        height: 18px;
    }

    #simulateur .ia-ligne .ia-nom {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
        line-height: 1.3;
    }

    #simulateur .ia-ligne .ia-nom small {
        font-size: 12px;
    }

    #simulateur .ia-ligne .ia-prix {
        font-size: 13px;
        line-height: 1.3;
    }

    #simulateur .ia-ligne input {
        width: 18px;
        height: 18px;
    }

    #simulateur .simu-forfaits .barre-zone {
        height: 130px;
        padding-top: 26px;
    }

    #simulateur .gain-montant strong {
        font-size: 44px;
    }
}

/* Votre prix : la section entière, titre compris, tient sous l'en-tête d'un écran de 13 pouces. */
@media (min-width: 861px) {
    #simulateur {
        padding: 28px 0;
    }

    #simulateur .bloc-tete {
        max-width: none;
        margin-bottom: 16px;
    }

    #simulateur .bloc-tete h2 {
        font-size: 34px;
    }

    #simulateur .bloc-tete h2 br {
        display: none;
    }

    #simulateur .bloc-tete .chapo {
        margin-top: 6px;
        font-size: 16px;
    }

    #simulateur .simu-forfaits .barre-zone {
        height: 110px;
    }

    #simulateur .simu-resultat .btn {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

@media (min-width: 861px) {
    #simulateur {
        padding: 20px 0;
    }

    #simulateur .simu-compteur {
        padding: 4px 0;
    }
}

/* ==========================================================================
   Version C : refonte par tâches (brief du 29/10/2026). Branche refonte-taches.
   ========================================================================== */

/* ---------- 1. Haut de page : avant / après ---------- */
.hero-taches .hero-panneau {
    padding: 56px 56px 40px;
}

.hero-taches .hero-grille {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 48px;
    align-items: center;
    margin-top: 0;
}

.hero-taches .hero-titre {
    margin-top: 12px;
    font-size: clamp(36px, 4.4vw, 58px);
}

.hero-taches .hero-sous {
    margin-top: 18px;
}

.hero-taches .boutons {
    flex-wrap: wrap;
}

.hero-taches .btn .ico,
.equipe .btn .ico {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

.metiers-choix {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
}

.metiers-choix-titre {
    margin-right: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--encre);
}

.metiers-choix a {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--trait);
    background: rgba(255, 255, 255, 0.7);
    color: var(--encre);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.metiers-choix a:hover,
.metiers-choix a:focus-visible {
    border-color: var(--signal);
    background: var(--blanc);
}

.avant-apres {
    position: relative;
    display: grid;
    gap: 14px;
    margin: 0;
}

.notes-carte {
    justify-self: start;
    max-width: 320px;
    padding: 16px 20px 18px;
    border-radius: 6px;
    background:
        repeating-linear-gradient(transparent 0 27px, rgba(18, 20, 43, 0.08) 27px 28px),
        #FFF6D9;
    box-shadow: 0 10px 24px -14px rgba(18, 20, 43, 0.35);
    transform: rotate(-2deg);
}

.notes-titre {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--discret);
}

.notes-texte {
    margin-top: 4px;
    font-size: 17px;
    font-style: italic;
    line-height: 28px;
    color: var(--encre);
}

.avant-apres-fleche {
    justify-self: center;
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--signal);
    color: var(--blanc);
    transform: rotate(90deg);
}

.avant-apres-fleche .ico {
    width: 20px;
    height: 20px;
}

.mail-carte {
    padding: 20px 22px;
    border-radius: var(--rayon);
    border: 1px solid var(--trait);
    background: var(--blanc);
    box-shadow: 0 24px 48px -28px rgba(18, 20, 43, 0.35);
}

.mail-objet {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--trait);
    font-size: 14px;
    font-weight: 600;
    color: var(--encre);
}

.mail-corps {
    min-height: 4.8em;
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--encre);
}

.mail-mention {
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--discret);
}

.avant-apres .mail-mention {
    transition: opacity 0.4s ease;
}

.avant-apres.est-attente .mail-mention,
.avant-apres.est-ecrit:not(.est-fini) .mail-mention {
    opacity: 0;
}

.hero-lien {
    margin-top: 24px;
    text-align: right;
}

@media (max-width: 860px) {
    .hero-taches .hero-panneau {
        padding: 32px 20px 28px;
    }

    .hero-taches .hero-grille {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .hero-taches .boutons .btn {
        width: 100%;
    }

    .hero-lien {
        text-align: left;
    }
}

/* ---------- 2. Le simulateur de tâches ---------- */
.taches {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 24px;
    margin-top: 32px;
    align-items: start;
}

.taches-reglages {
    padding: 24px;
    border-radius: var(--rayon);
    border: 1px solid var(--trait);
    background: var(--blanc);
}

.taches-metiers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.taches-metiers button,
.taches-tons button,
.simu-tailles button {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--trait);
    background: var(--blanc);
    color: var(--encre);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.taches-metiers button[aria-pressed="true"],
.taches-tons button[aria-pressed="true"],
.simu-tailles button[aria-pressed="true"] {
    border-color: var(--encre);
    background: var(--encre);
    color: var(--blanc);
}

.taches-liste {
    margin: 20px 0 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.taches-liste legend,
.simu-usage legend {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--encre);
}

.taches-liste [data-taches-liste] {
    display: grid;
    gap: 6px;
}

.tache-choix {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1.5px solid var(--trait);
    font-size: 15px;
    font-weight: 500;
    color: var(--encre);
    cursor: pointer;
}

.tache-choix:has(input:checked) {
    border-color: var(--signal);
    background: var(--signal-pale);
}

.tache-choix input {
    accent-color: var(--signal);
}

.taches-champs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    margin-top: 18px;
}

.taches-champs .champ {
    margin: 0;
    gap: 4px;
}

.taches-champs .champ:has(textarea) {
    grid-column: 1 / -1;
}

.taches-champs label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--encre);
}

.taches-champs label small {
    font-weight: 400;
    color: var(--discret);
}

.taches-champs input,
.taches-champs textarea {
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--trait);
    background: var(--blanc);
    color: var(--encre);
    font: inherit;
    font-size: 15px;
    resize: vertical;
}

.taches-champs input:focus,
.taches-champs textarea:focus {
    outline: none;
    border-color: var(--signal);
}

.taches-aide {
    margin-top: 10px;
}

.taches-ecrire {
    width: 100%;
    margin-top: 16px;
}

.taches-fenetre {
    border-radius: var(--rayon);
    border: 1px solid var(--trait);
    background: var(--blanc);
    overflow: hidden;
    box-shadow: 0 24px 48px -32px rgba(18, 20, 43, 0.35);
}

.taches-fenetre .apercu-barre {
    padding: 12px 16px;
    border-bottom: 1px solid var(--trait);
}

.taches-texte {
    min-height: 280px;
    padding: 20px 22px;
    white-space: pre-wrap;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--encre);
}

.taches-texte[aria-busy="true"]::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1.1em;
    margin-left: 2px;
    vertical-align: -0.15em;
    background: var(--signal);
    animation: clignote 1s steps(1) infinite;
}

@keyframes clignote {
    50% { opacity: 0; }
}

.taches-outils {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--trait);
    background: var(--brume);
}

.taches-tons {
    display: flex;
    gap: 6px;
}

.taches-tons[hidden] {
    display: none;
}

.taches-copier {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid var(--trait);
    background: var(--blanc);
    color: var(--encre);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.taches-copier .ico {
    width: 16px;
    height: 16px;
}

.taches-temps {
    margin-top: 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--encre);
}

.taches-resultat > .note {
    margin-top: 4px;
}

.taches-appel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: var(--rayon);
    background: var(--signal-pale);
    color: var(--encre);
}

.taches-appel .boutons {
    margin: 0;
    gap: 8px;
}

.taches-limite {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--encre);
    color: var(--blanc);
    font-weight: 500;
}

@media (max-width: 860px) {
    .taches {
        grid-template-columns: minmax(0, 1fr);
    }

    .taches-champs {
        grid-template-columns: minmax(0, 1fr);
    }

    .taches-appel .boutons,
    .taches-appel .btn {
        width: 100%;
    }
}

/* ---------- 3. Comment ça marche ---------- */
.comment-etapes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.comment-etape {
    padding: 24px;
    border-radius: var(--rayon);
    border: 1px solid var(--trait);
}

.comment-num {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--signal);
    color: var(--blanc);
    font-weight: 600;
}

.comment-etape h3 {
    margin-top: 14px;
    font-size: 19px;
}

.comment-etape p {
    margin-top: 6px;
}

.comment-plus {
    display: grid;
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.comment-plus li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.comment-plus .ico {
    width: 22px;
    height: 22px;
    flex: none;
    color: var(--signal);
}

.comment-plus span {
    flex: 1 1 320px;
}

@media (max-width: 860px) {
    .comment-etapes {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- 4. Par métier ---------- */
.metiers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.metier {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border-radius: var(--rayon);
    background: var(--blanc);
    border: 1px solid var(--trait);
}

.metier-ico {
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 12px;
    background: var(--signal-pale);
    color: var(--signal);
}

.metier h3 {
    font-size: 18px;
}

.metier h3 small {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--discret);
}

.metier ul {
    margin: 0;
    padding-left: 18px;
    font-size: 15px;
}

.metier ul li + li {
    margin-top: 4px;
}

.metier .lien-fleche {
    margin-top: auto;
}

@media (max-width: 1080px) {
    .metiers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .metiers {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- 5. Le cadre ---------- */
.cadre-colonnes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 32px;
}

.cadre-col h3 {
    margin-top: 18px;
    font-size: 19px;
}

.cadre-col > p {
    margin-top: 6px;
}

.cadre-visuel {
    min-height: 196px;
    padding: 18px;
    border-radius: var(--rayon);
    border: 1px solid var(--trait);
    background: var(--brume);
}

.admin-mini {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-mini .admin-resume {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.admin-mini .admin-resume div {
    padding: 10px;
    border-radius: 10px;
    background: var(--blanc);
}

.admin-mini .admin-resume dt {
    font-size: 11.5px;
    color: var(--discret);
}

.admin-mini .admin-resume dd {
    margin: 2px 0 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--encre);
    white-space: nowrap;
}

.admin-mini .admin-demande {
    margin: 0;
    padding: 12px;
    border-radius: 10px;
    background: var(--blanc);
    font-size: 14px;
}

.masque-mini {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: var(--encre);
}

.masque-mini p {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--blanc);
}

.masque-mini .masque-mini-fleche {
    padding: 0;
    background: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--discret);
}

.masque-mini-fleche::before {
    content: "↓ ";
}

.masque-mini .masque.est-masque {
    background-size: 100% 100%;
}

.logos-mini {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-content: center;
}

.logos-mini span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--blanc);
    font-size: 14px;
    font-weight: 600;
    color: var(--encre);
}

.cadre-pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 32px;
    padding: 18px 22px;
    border-radius: var(--rayon);
    background: var(--brume);
}

.cadre-pied p {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: var(--encre);
}

.cadre-pied .ico {
    width: 22px;
    height: 22px;
    flex: none;
    color: var(--signal);
}

@media (max-width: 960px) {
    .cadre-colonnes {
        grid-template-columns: minmax(0, 1fr);
    }

    .cadre-visuel {
        min-height: 0;
    }
}

/* ---------- 6. Prix ---------- */
#prix .offre {
    background: var(--blanc);
}

.offre-definition {
    margin-top: 10px;
}

.prix-lignes {
    display: grid;
    gap: 8px;
    margin: 24px 0 0;
    padding: 0 0 0 20px;
    font-size: 15.5px;
}

.simu-taches {
    margin-top: 40px;
}

.simu-titre {
    margin-bottom: 16px;
    font-size: 24px;
}

.simu-tailles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.simu-taches .simu-reglages,
.simu-taches .simu-resultat {
    padding: 24px;
}

.simu-taches .simu-compteur {
    padding: 8px 0;
}

.simu-taches .compteur-btn {
    width: 36px;
    height: 36px;
    font-size: 19px;
}

.simu-taches .compteur-reglage input {
    width: 56px;
    height: 36px;
}

.simu-usage {
    margin: 18px 0 0;
}

.simu-usage-choix {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.simu-usage-choix label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--trait);
    font-size: 14px;
    font-weight: 500;
    color: var(--encre);
    cursor: pointer;
}

.simu-usage-choix label:has(input:checked) {
    border-color: var(--signal);
    background: var(--signal-pale);
}

.simu-usage-choix input,
.simu-abonnement input {
    accent-color: var(--signal);
}

.simu-abonnement {
    margin: 14px 0 0;
}

.simu-abonnement[hidden] {
    display: none;
}

.simu-abonnement .ia-liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.simu-abonnement .champ .ia-ligne,
.simu-abonnement .ia-ligne {
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0 10px;
    min-height: 0;
    padding: 6px 10px;
}

.simu-abonnement .ia-ligne input {
    position: absolute;
    opacity: 0;
}

.simu-abonnement .ia-ligne {
    position: relative;
}

.simu-abonnement .ia-ligne:has(input:checked) {
    border-color: var(--signal);
    background: var(--signal-pale);
}

.simu-abonnement .ia-logo {
    grid-row: span 2;
    width: 30px;
    height: 30px;
}

.simu-abonnement .ia-nom {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.simu-abonnement .ia-prix {
    text-align: left;
    font-size: 13px;
}

.simu-taches .simu-resultat {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.simu-total-titre {
    font-size: 16px;
    font-weight: 600;
    color: var(--encre);
}

.simu-total {
    color: var(--discret);
}

.simu-total strong {
    font-size: clamp(40px, 5vw, 56px);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.05;
    color: var(--signal);
    font-variant-numeric: tabular-nums;
}

.simu-moyenne {
    font-size: 15px;
}

.simu-sous-titre {
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--encre);
}

.simu-gratuit .liste-ico {
    gap: 6px;
    font-size: 15px;
}

.simu-payant {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--brume);
    font-size: 15px;
}

.simu-payant strong {
    color: var(--encre);
}

.simu-ecart {
    font-size: 14px;
    color: var(--discret);
}

.simu-egal {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--encre);
}

.simu-taches .simu-resultat .btn {
    align-self: flex-start;
    margin-top: auto;
}

.simu-gratuit[hidden],
.simu-payant[hidden] {
    display: none;
}

@media (max-width: 860px) {
    .simu-taches .simu-corps {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- 7. Qui on est ---------- */
.equipe {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    margin-top: 32px;
}

.equipe-gens {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.personne img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--rayon);
    background: var(--brume);
}

.personne-nom {
    margin-top: 14px;
    font-size: 18px;
    font-weight: 600;
    color: var(--encre);
}

.personne-nom small {
    margin-left: 6px;
    font-size: 14px;
    font-weight: 400;
    color: var(--discret);
}

.personne p + p {
    margin-top: 4px;
    font-size: 15px;
}

.equipe-tel-titre {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--signal);
}

.equipe-tel {
    display: inline-block;
    margin-top: 6px;
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--encre);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.equipe-contact .boutons {
    margin-top: 16px;
}

.equipe-preuve {
    margin-top: 24px;
    font-size: 18px;
    font-weight: 600;
    color: var(--encre);
}

.equipe-contact .note {
    margin-top: 6px;
}

.agence-ligne {
    margin-top: 40px;
}

@media (max-width: 860px) {
    .equipe {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .equipe-contact .boutons .btn {
        width: 100%;
    }
}

/* ---------- 8. Sécurité ---------- */
.securite-lignes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.securite-lignes li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
    border-radius: var(--rayon);
    background: var(--blanc);
    border: 1px solid var(--trait);
    color: var(--encre);
}

.securite-lignes .ico {
    width: 22px;
    height: 22px;
    flex: none;
    color: var(--signal);
}

@media (max-width: 760px) {
    .securite-lignes {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- 9. Questions de patron ---------- */
.questions {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 32px;
    margin-top: 32px;
    align-items: start;
}

.faq details {
    border-bottom: 1px solid var(--trait);
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--encre);
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "+";
    flex: none;
    font-size: 22px;
    font-weight: 400;
    color: var(--signal);
    transition: transform 0.2s ease;
}

.faq details[open] summary::after {
    transform: rotate(45deg);
}

.faq details p {
    padding: 0 0 16px;
}

@media (max-width: 960px) {
    .questions {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- 10. Dernier appel ---------- */
.dernier-appel {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.dernier-appel h2 {
    font-size: clamp(32px, 4vw, 48px);
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.dernier-appel > p {
    margin-top: 14px;
    font-size: 18px;
}

.dernier-appel .boutons {
    justify-content: center;
    margin-top: 24px;
}

.dernier-appel .note {
    margin-top: 14px;
}

/* Page Sécurité : la phrase sur l'essai, près du bouton. */
.page-essai {
    margin-top: 28px;
    font-weight: 500;
    color: var(--encre);
}

/* Fenêtre « On vous appelle » : la liste des créneaux. */
.formulaire select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--trait);
    background: var(--blanc);
    color: var(--encre);
    font: inherit;
}

@media (min-width: 961px) {
    .cadre-visuel {
        height: 220px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .cadre-visuel.logos-mini {
        display: grid;
    }
}

/* ==========================================================================
   Version C, 3e brief (30/10/2026) : « Votre entreprise a son IA. », relance en lot,
   bande humaine, « Pourquoi pas simplement ChatGPT ? », prix allégés, temps gagné.
   ========================================================================== */

/* ---------- 1. Haut de page : l'export des devis, puis la pile de relances ---------- */
.lot-visuel {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.export-carte {
    justify-self: start;
    width: 100%;
    max-width: 400px;
    padding: 14px 16px 12px;
    border-radius: 12px;
    border: 1px solid var(--trait);
    background: var(--blanc);
    box-shadow: 0 10px 24px -16px rgba(18, 20, 43, 0.35);
    transform: rotate(-1.5deg);
}

.export-table {
    width: 100%;
    margin-top: 8px;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--encre);
    font-variant-numeric: tabular-nums;
}

.export-table th {
    padding: 4px 6px;
    border-bottom: 1px solid var(--trait);
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    color: var(--discret);
}

.export-table td {
    padding: 5px 6px;
    border-bottom: 1px solid var(--brume);
    white-space: nowrap;
}

.export-table td:nth-child(2) {
    white-space: normal;
}

.export-table td:last-child,
.export-table th:last-child {
    text-align: right;
}

.export-source {
    margin-top: 8px;
    font-size: 12px;
    color: var(--discret);
}

.pile-relances,
.pile-liste,
.pile-relance {
    min-width: 0;
}

.pile-liste {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pile-relance {
    position: relative;
    padding: 10px 18px;
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    background: var(--blanc);
}

.pile-relance-fermee {
    margin-top: -8px;
    padding-top: 16px;
    border-radius: 0 0 var(--rayon) var(--rayon);
    border-top: 0;
    box-shadow: 0 6px 14px -12px rgba(18, 20, 43, 0.4);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.pile-relance:first-child {
    position: relative;
    z-index: 2;
    padding: 18px 22px;
}

.pile-relance-fermee .mail-objet {
    padding: 0;
    border: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--discret);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pile-relance-tag {
    display: inline-block;
    margin-bottom: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--signal-pale);
    color: var(--signal);
    font-size: 11.5px;
    font-weight: 600;
}

.pile-relance-fermee .pile-relance-tag {
    margin-bottom: 2px;
}

/* Les relances repliées arrivent une à une, quand la première est écrite. */
.lot-visuel.est-attente .pile-relance-fermee,
.lot-visuel.est-ecrit:not(.est-fini) .pile-relance-fermee {
    opacity: 0;
    transform: translateY(-10px);
}

.lot-visuel.est-fini .pile-relance-fermee:nth-child(3) { transition-delay: 0.12s; }
.lot-visuel.est-fini .pile-relance-fermee:nth-child(4) { transition-delay: 0.24s; }
.lot-visuel.est-fini .pile-relance-fermee:nth-child(5) { transition-delay: 0.36s; }

.lot-visuel .mail-corps {
    min-height: 6.4em;
    font-size: 15px;
}

@media (max-width: 860px) {
    .export-carte {
        max-width: none;
        transform: none;
    }
}

/* ---------- 2. Simulateur : le tableau des devis, et une carte par relance ---------- */
.taches-champs:has(.lot) {
    grid-template-columns: minmax(0, 1fr);
}

.lot {
    overflow-x: auto;
}

.lot-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.lot-table th {
    padding: 0 4px 6px;
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    color: var(--encre);
}

.lot-table th:nth-child(1) { width: 27%; }
.lot-table th:nth-child(2) { width: 33%; }
.lot-table th:nth-child(3) { width: 17%; }
.lot-table th:nth-child(4) { width: 23%; }

.lot-table td {
    padding: 2px;
}

.taches-champs .lot-table input {
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 14px;
}

.lot-ajouter {
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1.5px dashed var(--trait);
    background: none;
    color: var(--signal);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.lot-ajouter:hover,
.lot-ajouter:focus-visible {
    border-color: var(--signal);
}

.lot-ajouter[hidden] {
    display: none;
}

.taches-texte.taches-lot {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 16px;
    white-space: normal;
    max-height: 520px;
    overflow-y: auto;
}

.relance {
    position: relative;
    border-radius: 12px;
    border: 1px solid var(--trait);
    background: var(--blanc);
}

.relance[open] {
    border-color: var(--signal);
}

.relance summary {
    display: grid;
    gap: 2px;
    padding: 10px 84px 10px 14px;
    cursor: pointer;
    list-style: none;
}

.relance summary::-webkit-details-marker {
    display: none;
}

.relance-client {
    font-size: 13px;
    font-weight: 600;
    color: var(--signal);
}

.relance-objet {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--encre);
}

.relance:not([open]) .relance-objet {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.relance-corps {
    padding: 0 14px 14px;
    white-space: pre-wrap;
    font-size: 15px;
    line-height: 1.6;
    color: var(--encre);
}

.relance-copier {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid var(--trait);
    background: var(--blanc);
    color: var(--encre);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}

.taches-docs {
    margin-top: 6px;
    font-size: 14px;
    color: var(--discret);
}

.taches-docs-titre {
    font-weight: 600;
    color: var(--encre);
}

.taches-docs small {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--discret);
}

.taches-docs[hidden],
.taches-aide[hidden] {
    display: none;
}

/* ---------- 3. Bande humaine et preuve ---------- */
.bande-preuve {
    padding: 0 0 72px;
    background: var(--brume);
}

.bande {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.bande:has(.bande-temoignage:not([hidden])) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bande-bloc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px;
    border-radius: var(--rayon);
    background: var(--blanc);
    border: 1px solid var(--trait);
    color: var(--encre);
}

.bande-photos {
    display: flex;
}

.bande-photos img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid var(--blanc);
    object-fit: cover;
    object-position: 50% 20%;
    background: var(--brume);
}

.bande-photos img + img {
    margin-left: -12px;
}

.bande-visages p {
    font-size: 17px;
    font-weight: 500;
}

.bande-chiffre {
    background:
        radial-gradient(ellipse 80% 70% at 100% 0%, var(--peche-pale) 0%, rgba(255, 214, 194, 0) 70%),
        var(--blanc);
}

.bande-gros {
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--encre);
}

.bande-chiffre p:not(.bande-gros) {
    font-size: 15px;
    color: var(--discret);
}

.bande-temoignage[hidden] {
    display: none;
}

@media (max-width: 860px) {
    .bande,
    .bande:has(.bande-temoignage:not([hidden])) {
        grid-template-columns: minmax(0, 1fr);
    }

    .bande-preuve {
        padding-bottom: 48px;
    }
}

/* ---------- 4. Pourquoi pas simplement ChatGPT ? ---------- */
.comparatif-cadre {
    margin-top: 32px;
    border-radius: var(--rayon);
    border: 1px solid var(--trait);
    overflow: hidden;
}

.comparatif {
    width: 100%;
    border-collapse: collapse;
    font-size: 15.5px;
    color: var(--encre);
}

.comparatif th,
.comparatif td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--trait);
    text-align: left;
    vertical-align: top;
}

.comparatif tbody tr:last-child > * {
    border-bottom: 0;
}

.comparatif thead th {
    font-size: 14px;
    font-weight: 600;
    color: var(--discret);
    background: var(--brume);
}

.comparatif tbody th {
    width: 26%;
    font-weight: 600;
}

.comparatif td {
    width: 37%;
    color: var(--discret);
}

.comparatif .comparatif-liha {
    background: var(--signal-pale);
    color: var(--encre);
    font-weight: 500;
}

.comparatif thead .comparatif-liha {
    background: var(--signal);
    color: var(--blanc);
    letter-spacing: 0.04em;
}

.comparatif-phrase {
    max-width: 760px;
    margin: 32px auto 0;
    text-align: center;
    font-size: clamp(21px, 2.4vw, 28px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--encre);
}

#chatgpt .cadre-col figcaption {
    margin-top: 12px;
    font-size: 15px;
    color: var(--encre);
}

@media (max-width: 760px) {
    .comparatif thead {
        display: none;
    }

    .comparatif,
    .comparatif tbody,
    .comparatif tr,
    .comparatif th,
    .comparatif td {
        display: block;
        width: auto;
    }

    .comparatif tr {
        padding: 14px 16px;
        border-bottom: 1px solid var(--trait);
    }

    .comparatif tbody tr:last-child {
        border-bottom: 0;
    }

    .comparatif th,
    .comparatif td,
    .comparatif tbody tr:last-child > * {
        padding: 0;
        border: 0;
    }

    .comparatif td {
        margin-top: 8px;
        padding: 8px 12px;
        border-radius: 10px;
    }

    .comparatif td::before {
        content: attr(data-label);
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: var(--discret);
    }

    .comparatif td.comparatif-liha::before {
        color: var(--signal);
    }

    .comparatif td:not(.comparatif-liha) {
        background: var(--brume);
    }
}

/* ---------- 7. Prix : trois cartes courtes, le détail se déplie ---------- */
.offres-courtes {
    margin-top: 32px;
}

.offres-courtes .offre {
    padding: 28px 24px;
}

.offres-courtes .offre-sous {
    font-size: 18px;
}

.offres-courtes .offre-liste {
    display: grid;
    gap: 8px;
}

/* L'Illimité, recommandé : un fond pêche et violet pâle, comme la carte mise en avant des versions A et B. */
#prix .offre-recommandee {
    background:
        radial-gradient(ellipse 90% 60% at 100% 0%, var(--peche-pale) 0%, rgba(255, 214, 194, 0) 70%),
        var(--signal-pale);
    border-color: var(--signal);
    box-shadow: 0 24px 48px -32px rgba(91, 75, 255, 0.55);
}

.prix-detail {
    margin-top: 20px;
    border-radius: var(--rayon);
    border: 1px solid var(--trait);
    background: var(--blanc);
}

.prix-detail summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    font-weight: 600;
    color: var(--signal);
    cursor: pointer;
    list-style: none;
}

.prix-detail summary::-webkit-details-marker {
    display: none;
}

.prix-detail summary::after {
    content: "+";
    font-size: 22px;
    font-weight: 400;
    transition: transform 0.2s ease;
}

.prix-detail[open] summary::after {
    transform: rotate(45deg);
}

.prix-detail-liste {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0 20px 18px 40px;
    font-size: 15px;
}

.simu-heure {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--trait);
    font-size: 15px;
    font-weight: 500;
    color: var(--encre);
}

.simu-heure-champ {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.simu-heure input {
    width: 72px;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1.5px solid var(--trait);
    background: var(--blanc);
    color: var(--encre);
    font: inherit;
    text-align: right;
}

.simu-heure input:focus {
    outline: none;
    border-color: var(--signal);
}

.simu-gain {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--signal-pale);
    font-size: 15px;
    color: var(--encre);
}

.simu-gain strong {
    color: var(--encre);
}

/* ---------- 8. Qui on est, plus court ---------- */
.equipe-courte .personne img {
    max-width: 220px;
}

/* Fenêtre « On vous appelle » : l'usage du numéro, sous le bouton. */
.fenetre-note {
    margin-top: 10px;
    text-align: center;
}

/* En-tête : un lien de plus (« Pourquoi LIHA »), le menu tient sur une ligne jusqu'au menu replié. */
.nav a,
.entete-acces > * {
    white-space: nowrap;
}

@media (max-width: 1400px) and (min-width: 1181px) {
    .nav {
        gap: 20px;
        font-size: 14.5px;
    }

    .entete-acces {
        gap: 6px;
    }

    .entete-acces .lien-connexion {
        font-size: 14px;
    }
}

/* Téléphone : l'export tient dans la largeur, le comparatif et le tableau des devis s'empilent. */
@media (max-width: 600px) {
    .export-carte {
        padding: 12px 12px 10px;
    }

    .export-table {
        font-size: 12px;
    }

    .export-table th,
    .export-table td {
        padding: 4px 3px;
    }

    .export-table td:nth-child(2) {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .comparatif tbody th {
        width: auto;
    }

    .lot-table thead {
        display: none;
    }

    .lot-table,
    .lot-table tbody {
        display: block;
    }

    .lot-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: 4px;
        padding: 6px 0;
        border-bottom: 1px solid var(--trait);
    }

    .lot-table td {
        display: block;
        padding: 0;
    }
}

/* Commentaires de Bok (30/10/2026) : le logo LIHA en tête de colonne du comparatif, une seule photo centrée dans la bande. */
.comparatif thead .comparatif-liha {
    text-align: center;
    vertical-align: middle;
}

.comparatif-logo {
    display: block;
    width: 84px;
    height: auto;
    margin: 0 auto;
    color: var(--blanc);
}

.bande-photos {
    align-self: center;
}

.comparatif-logo .sym-point {
    fill: var(--peche);
}

/* Bande : la photo à gauche, le texte et le bouton à droite (commentaire de Bok, 30/10/2026). */
.bande-visages {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 12px;
    align-items: center;
}

.bande-visages .bande-photos {
    grid-row: span 2;
}

.bande-visages .bande-photos img {
    width: 72px;
    height: 72px;
}

.bande-visages .btn {
    justify-self: start;
}

@media (max-width: 600px) {
    .bande-visages .bande-photos {
        grid-row: auto;
    }

    .bande-visages .btn {
        grid-column: 1 / -1;
        justify-self: stretch;
    }
}