/* bonjourlia.fr : l'entrée des collectivités.
   Identité « Piste A, le cadre » (canevas « LIHA, identité de marque », 13/10/2026) :
   encre #12142B, violet signal #5B4BFF, pêche #FFB89A, brume #EEF0F6.
   Police : Schibsted Grotesk, une des trois finalistes, hébergée ici (jamais chez Google).
   Pour changer de police, remplacer les fichiers de site/fonts/ et la variable --police. */

@font-face {
    font-family: 'Schibsted Grotesk';
    font-style: normal;
    font-display: swap;
    font-weight: 400 900;
    src: url('/site/fonts/schibsted-grotesk-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Schibsted Grotesk';
    font-style: normal;
    font-display: swap;
    font-weight: 400 900;
    src: url('/site/fonts/schibsted-grotesk-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

: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;
    --puissance: #F0642E;
    --puissance-texte: #B13F12;
    --sur-encre: #C9CBE0;
    --sur-encre-trait: rgba(255, 255, 255, 0.16);
    --police: 'Schibsted Grotesk', 'Helvetica Neue', Helvetica, Arial, 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: 18px;
    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 .sym {
    width: 30px;
    height: 30px;
}

.logo-mot {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 1;
    padding-bottom: 3px;
}

.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. Accroche ---------- */

.hero {
    padding: 8px 0 0;
}

.hero-panneau {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    padding: 64px 56px;
    border-radius: 20px;
    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);
}

.hero-titre {
    font-size: clamp(40px, 5.6vw, 68px);
    letter-spacing: -0.04em;
    line-height: 1.02;
}

/* Les fins de phrase s'empilent dans la même case : la hauteur ne bouge pas quand elles changent. */
.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 0.9s ease, visibility 0.9s;
}

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

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

.hero-sous {
    margin-top: 22px;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--encre);
}

.hero-chapo {
    max-width: 600px;
    margin-top: 22px;
    font-size: 19px;
    line-height: 1.5;
}

.hero .boutons {
    margin-top: 32px;
}

.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;
}

.hero-visuel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bonjour {
    display: flex;
    align-items: flex-end;
    gap: 14px;
}

.sym-grand {
    width: 64px;
    height: 64px;
}

.bulle {
    position: relative;
    padding: 12px 16px;
    border-radius: 16px 16px 16px 4px;
    background: var(--blanc);
    color: var(--encre);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.35;
    box-shadow: 0 1px 0 var(--trait);
}

/* 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-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);
}

.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);
}

.dico {
    max-width: 760px;
    margin-top: 32px;
    padding: 24px 28px;
    border-radius: var(--rayon);
    background: var(--encre);
    color: var(--sur-encre);
    font-size: 19px;
    line-height: 1.5;
}

.dico strong {
    color: var(--blanc);
    font-size: 22px;
}

.dico em {
    color: var(--peche);
}

/* 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 {
    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 {
    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 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 24px;
    margin-top: 48px;
}

.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: 26%;
    font-weight: 600;
    color: var(--encre);
}

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

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

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

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

.carte .compteur {
    font-size: 44px;
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--signal);
    font-variant-numeric: tabular-nums;
}

.preuves-grandes .carte p:not(.compteur) {
    font-size: 15.5px;
}

/* ---------- 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 {
        grid-template-columns: minmax(0, 1fr);
        padding: 48px 40px;
    }

    .hero-visuel {
        max-width: 560px;
    }

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

    .deux-col,
    .simu {
        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 .sym {
        width: 26px;
        height: 26px;
    }

    .logo-mot {
        font-size: 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: 40px 16px 32px;
        border-radius: 0 0 20px 20px;
        gap: 36px;
    }

    .hero .btn {
        width: 100%;
    }

    .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;
    }

    .flux-docs {
        width: calc(50% - 5px);
        padding: 0 8px;
    }

    .flux-doc {
        padding: 0 8px;
        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;
    }

    .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);
}

/* La fin de phrase la plus longue n'est ajoutée qu'au chargement : on réserve sa place sur téléphone. */
@media (max-width: 640px) {
    .hero-sous .tourne {
        min-height: 2.5em;
    }
}

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

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