/* ===========================================================================
   Feuille de style du site public.

   Direction : le carnet d'entretien. Ce qui se vend ici n'est pas un site,
   c'est un entretien mensuel — un travail régulier, consigné, tamponné.
   Le vocabulaire visuel vient de là : registre, cachet, réglette, monospace
   pour tout ce qui relève de la donnée consignée.

   Palette   bleu de travail, papier, encre de tampon, vert de contrôle
   Type      grotesque condensée (titres) / sérif (corps) / mono (registre)
   =========================================================================== */

/* --------------------------------------------------------------- polices
   Auto-hébergées : aucun appel à un CDN tiers, donc rien à déclarer au RGPD
   et une requête réseau de moins. Déposer les .woff2 dans /assets/fonts/.
   En leur absence, les substituts système prennent le relais proprement.     */

@font-face {
    font-family: 'Archivo';
    src: url('/assets/fonts/archivo-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Archivo';
    src: url('/assets/fonts/archivo-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Source Serif';
    src: url('/assets/fonts/source-serif-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Source Serif';
    src: url('/assets/fonts/source-serif-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Plex Mono';
    src: url('/assets/fonts/plex-mono-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------------ jetons */

:root {
    --bleu-travail: #26456B;
    --bleu-profond: #1A2F49;
    --papier: #EFF1EC;
    --papier-creuse: #E4E7E0;
    --blanc: #FFFFFF;
    --graphite: #22262B;
    --gris-atelier: #626B75;
    --tampon: #B3352E;
    --controle: #2E6B4F;
    --trait: #C9CEC6;

    --titre: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --corps: 'Source Serif', Georgia, 'Times New Roman', serif;
    --registre: 'Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    --pas: 1rem;
    --gouttiere: clamp(1.25rem, 4vw, 3rem);
    --largeur: 74rem;
    --largeur-etroite: 44rem;
    --rayon: 3px;          /* presque nul : c'est du papier, pas une interface */
    --transition: 160ms ease;
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--corps);
    font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    line-height: 1.65;
    color: var(--graphite);
    background: var(--papier);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--bleu-travail); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--tampon); }

:focus-visible {
    outline: 2px solid var(--bleu-travail);
    outline-offset: 3px;
}

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

.evitement {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    padding: .75rem 1rem; background: var(--bleu-profond); color: #fff;
}
.evitement:focus { left: 0; }

/* ----------------------------------------------------------- mise en page */

.contenant {
    width: 100%;
    max-width: var(--largeur);
    margin-inline: auto;
    padding-inline: var(--gouttiere);
}
.contenant--etroit { max-width: var(--largeur-etroite); }

.bloc { padding-block: clamp(3rem, 7vw, 5.5rem); }
.bloc--entete { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }

/* Le trait de reliure : sépare les sections comme les feuillets d'un carnet */
.bloc + .bloc { border-top: 1px solid var(--trait); }

.fond--papier { background: var(--papier-creuse); }
.fond--blanc  { background: var(--blanc); }
.fond--encre  { background: var(--bleu-profond); color: #E8EBEF; border-top-color: var(--bleu-profond); }
.fond--encre a { color: #A9C4E4; }
.fond--encre .titre-section, .fond--encre h2, .fond--encre h3 { color: #fff; }
.fond--encre .eyebrow { color: #8FA9C7; }

/* ------------------------------------------------------------ typographie */

.titre-page, .titre-section, h1, h2, h3, h4 {
    font-family: var(--titre);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.018em;
    margin: 0 0 .6em;
    text-wrap: balance;
}

.titre-page { font-size: clamp(2.1rem, 1.5rem + 3vw, 3.6rem); }
.titre-section { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); }
h3 { font-size: 1.25rem; }

.titre-page em {
    font-style: normal;
    color: var(--bleu-travail);
    /* Le soulignement au trait de crayon : la promesse est cochée. */
    box-shadow: inset 0 -0.14em 0 rgba(179, 53, 46, .28);
}

.eyebrow {
    font-family: var(--registre);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gris-atelier);
    margin: 0 0 1rem;
}

.chapo {
    font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem);
    line-height: 1.55;
    color: #363C44;
    max-width: 42rem;
    margin: 0 0 1.5rem;
}

.prose > * + * { margin-top: 1rem; }
.prose p { margin: 0; }
.prose ul, .prose ol { margin: 0; padding-left: 1.25rem; }
.prose li + li { margin-top: .35rem; }

code {
    font-family: var(--registre);
    font-size: .9em;
    background: var(--papier-creuse);
    padding: .1em .35em;
    border-radius: var(--rayon);
}

/* ---------------------------------------------------------------- boutons */

.bouton {
    display: inline-block;
    font-family: var(--titre);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .01em;
    padding: .85rem 1.5rem;
    color: #fff;
    background: var(--bleu-travail);
    border: 2px solid var(--bleu-travail);
    border-radius: var(--rayon);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), transform var(--transition);
}
.bouton:hover { background: var(--bleu-profond); border-color: var(--bleu-profond); color: #fff; }
.bouton:active { transform: translateY(1px); }

.bouton--fantome {
    color: var(--bleu-travail);
    background: transparent;
}
.bouton--fantome:hover { background: var(--bleu-travail); color: #fff; }

.bouton--clair {
    background: var(--papier); color: var(--bleu-profond); border-color: var(--papier);
}
.bouton--clair:hover { background: #fff; border-color: #fff; color: var(--bleu-profond); }

.bouton--compact { padding: .55rem 1rem; font-size: .875rem; }

/* ------------------------------------------------------------------ entête */

.entete {
    background: var(--papier);
    border-bottom: 1px solid var(--trait);
    position: sticky; top: 0; z-index: 40;
}

.entete__interieur {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding-block: .9rem;
}

.marque { text-decoration: none; color: inherit; display: block; }
.marque__nom {
    display: block;
    font-family: var(--titre); font-weight: 700; font-size: 1.15rem;
    letter-spacing: -0.01em; color: var(--bleu-profond);
}
.marque__metier {
    display: block;
    font-family: var(--registre); font-size: .68rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--gris-atelier);
}

.navigation ul {
    display: flex; align-items: center; gap: 1.4rem;
    list-style: none; margin: 0; padding: 0;
}
.navigation a {
    font-family: var(--titre); font-weight: 500; font-size: .93rem;
    color: var(--graphite); text-decoration: none;
    padding-block: .3rem;
    border-bottom: 2px solid transparent;
}
.navigation a:hover { border-bottom-color: var(--tampon); color: var(--graphite); }
.navigation a[aria-current="page"] { border-bottom-color: var(--bleu-travail); }
.navigation__action a { border: 0; }
.navigation__action a:hover { border: 0; color: #fff; }

.menu-bouton {
    display: none; width: 44px; height: 44px;
    background: transparent; border: 1px solid var(--trait); border-radius: var(--rayon);
    cursor: pointer; position: relative;
}
.menu-bouton__barres,
.menu-bouton__barres::before,
.menu-bouton__barres::after {
    position: absolute; left: 11px; width: 20px; height: 2px;
    background: var(--graphite); content: '';
}
.menu-bouton__barres { top: 21px; }
.menu-bouton__barres::before { top: -6px; left: 0; }
.menu-bouton__barres::after  { top: 6px; left: 0; }

@media (max-width: 60rem) {
    .menu-bouton { display: block; }
    .navigation {
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--papier); border-bottom: 1px solid var(--trait);
        display: none; padding: 1rem var(--gouttiere) 1.5rem;
    }
    .navigation.est-ouvert { display: block; }
    .navigation ul { flex-direction: column; align-items: stretch; gap: 0; }
    .navigation li { border-bottom: 1px solid var(--trait); }
    .navigation a { display: block; padding: .85rem 0; border: 0; }
    .navigation__action { border: 0; padding-top: 1rem; }
    .navigation__action a { display: inline-block; }
}

/* -------------------------------------------------------------- fil d'ariane */

.ariane { padding-block: 1rem 0; }
.ariane ol {
    display: flex; flex-wrap: wrap; gap: .4rem;
    list-style: none; margin: 0; padding: 0;
    font-family: var(--registre); font-size: .78rem; color: var(--gris-atelier);
}
.ariane li + li::before { content: '/'; margin-right: .4rem; color: var(--trait); }
.ariane a { color: var(--gris-atelier); }

/* ------------------------------------------------------------------- hero */

.hero {
    background: var(--papier);
    padding-block: clamp(2.5rem, 6vw, 5rem);
    border-bottom: 1px solid var(--trait);
}

.hero__interieur {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 1rem; }

.hero__prix {
    font-family: var(--registre); font-size: .85rem;
    color: var(--gris-atelier); margin: 0;
}

/* ------- la vignette du carnet : l'élément signature, en petit format ----- */

.hero__vignette {
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-left: 3px solid var(--bleu-travail);
    border-radius: var(--rayon);
    padding: 1.5rem;
    box-shadow: 0 1px 0 var(--papier-creuse), 0 12px 28px -22px rgba(26, 47, 73, .5);
}

.vignette__titre {
    font-family: var(--registre); font-size: .72rem;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--gris-atelier);
    margin: 0 0 1rem; padding-bottom: .75rem;
    border-bottom: 1px solid var(--papier-creuse);
}

.vignette__lignes { list-style: none; margin: 0; padding: 0; }
.vignette__lignes li {
    display: grid;
    grid-template-columns: 3.2rem 1fr auto;
    gap: .6rem; align-items: baseline;
    padding: .55rem 0;
    font-size: .92rem;
    border-bottom: 1px dotted var(--trait);
}
.vignette__date { font-family: var(--registre); font-size: .78rem; color: var(--gris-atelier); }
.vignette__ok { color: var(--controle); font-weight: 700; }

.vignette__note {
    font-family: var(--registre); font-size: .72rem;
    color: var(--gris-atelier); margin: .9rem 0 0;
}

@media (max-width: 56rem) {
    .hero__interieur { grid-template-columns: 1fr; }
}

/* --------------------------------------------------- carnet et registre */

.carnet {
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.carnet__entete {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1.5rem; margin-bottom: 1rem;
}
.carnet__entete .titre-section { margin-bottom: 0; }

.carnet__note {
    font-family: var(--registre); font-size: .8rem; line-height: 1.5;
    color: var(--gris-atelier); margin: 1.5rem 0 0;
    padding-top: 1rem; border-top: 1px dotted var(--trait);
}

/* Le cachet : encre de tampon, légèrement de travers, comme apposé à la main */
.cachet {
    flex-shrink: 0;
    display: grid; place-items: center;
    width: 92px; height: 92px;
    border: 3px double var(--tampon);
    border-radius: 50%;
    transform: rotate(-9deg);
    opacity: .85;
}
.cachet__texte {
    font-family: var(--titre); font-weight: 700;
    font-size: .95rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--tampon); text-align: center; line-height: 1.1; padding: .3rem;
}
.cachet--petit { width: 74px; height: 74px; border-width: 2px; }
.cachet--petit .cachet__texte { font-size: .58rem; letter-spacing: .06em; }

@media (prefers-reduced-motion: no-preference) {
    .cachet { animation: tamponner 480ms cubic-bezier(.2, .9, .3, 1.2) both; }
    @keyframes tamponner {
        from { opacity: 0; transform: rotate(-24deg) scale(1.6); }
        to   { opacity: .85; transform: rotate(-9deg) scale(1); }
    }
}

.registre { width: 100%; border-collapse: collapse; font-size: .95rem; }
.registre th, .registre td { text-align: left; padding: .8rem .6rem; vertical-align: top; }
.registre thead th {
    font-family: var(--registre); font-size: .7rem;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--gris-atelier); font-weight: 400;
    border-bottom: 2px solid var(--bleu-travail);
}
.registre tbody tr { border-bottom: 1px dotted var(--trait); }
.registre__freq {
    font-family: var(--registre); font-size: .8rem;
    color: var(--bleu-travail); white-space: nowrap;
}
.registre__op { font-weight: 600; }
.registre__risque { color: var(--gris-atelier); }

@media (max-width: 44rem) {
    .registre thead { display: none; }
    .registre tr { display: block; padding: .75rem 0; }
    .registre td { display: block; padding: .15rem 0; }
    .carnet__entete { flex-direction: column-reverse; align-items: flex-start; }
}

/* --------------------------------------------------------------- formules */

.bascule {
    display: inline-flex; gap: .25rem; margin-bottom: 2rem;
    padding: .25rem; background: var(--papier-creuse);
    border-radius: var(--rayon);
}
.bascule__option {
    font-family: var(--titre); font-weight: 500; font-size: .9rem;
    padding: .55rem 1.1rem; border: 0; border-radius: var(--rayon);
    background: transparent; color: var(--graphite); cursor: pointer;
    transition: background var(--transition);
}
.bascule__option.est-actif { background: var(--blanc); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.bascule__gain {
    font-family: var(--registre); font-size: .68rem;
    color: var(--controle); margin-left: .35rem;
}

.formules {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.25rem; list-style: none; margin: 0; padding: 0;
}

.formule {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: 1.75rem 1.5rem;
}

/* La formule mise en avant est plus haute et porte le cachet. */
.formule--avant {
    border: 2px solid var(--bleu-travail);
    margin-block: -.5rem;
    padding-block: 2.25rem;
    box-shadow: 0 16px 40px -30px rgba(26, 47, 73, .8);
}
.formule--avant .cachet--petit { position: absolute; top: -1.1rem; right: 1rem; background: var(--blanc); }

.formule__nom { font-size: 1.4rem; margin-bottom: .25rem; }
.formule__accroche { color: var(--gris-atelier); font-size: .95rem; margin: 0 0 1.25rem; }

.formule__prix { margin: 0 0 .35rem; display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.prix {
    font-family: var(--titre); font-weight: 700;
    font-size: 2.4rem; line-height: 1; color: var(--bleu-profond);
    font-variant-numeric: tabular-nums;
}
.prix__unite { font-family: var(--registre); font-size: .78rem; color: var(--gris-atelier); }

.formule__installation {
    font-family: var(--registre); font-size: .76rem; line-height: 1.45;
    color: var(--gris-atelier); margin: 0 0 1.25rem;
    padding-bottom: 1.25rem; border-bottom: 1px dotted var(--trait);
}

.prestations { list-style: none; margin: 0 0 1.5rem; padding: 0; flex-grow: 1; font-size: .95rem; }
.prestations li { position: relative; padding-left: 1.5rem; margin-bottom: .5rem; }
.prestations li::before {
    content: '✓'; position: absolute; left: 0;
    color: var(--controle); font-weight: 700;
}

.formules__note {
    font-family: var(--registre); font-size: .78rem;
    color: var(--gris-atelier); margin-top: 1.5rem;
}

/* -------------------------------------------------------------- comparatif */

.tableau-defilant { overflow-x: auto; }

.comparatif { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 34rem; }
.comparatif th, .comparatif td { padding: .7rem .8rem; text-align: left; }
.comparatif thead th {
    font-family: var(--titre); font-size: .95rem;
    border-bottom: 2px solid rgba(255,255,255,.35);
}
.comparatif tbody th { font-weight: 400; }
.comparatif tbody tr { border-bottom: 1px solid rgba(255,255,255,.12); }
.comparatif td { text-align: center; font-family: var(--registre); }
.comparatif .oui { color: #7FD1A6; }
.comparatif .non { color: rgba(255,255,255,.3); }
.comparatif__prix td { font-size: 1rem; }

/* ---------------------------------------------------------------- barèmes */

.baremes { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); margin-top: 2rem; }

.bareme {
    background: var(--blanc); border: 1px solid var(--trait);
    border-radius: var(--rayon); padding: 1.5rem;
}
.bareme__titre { font-size: 1.05rem; margin-bottom: .5rem; }
.bareme__formule { margin: 0 0 1.25rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.bareme__formule .montant {
    font-family: var(--titre); font-weight: 700; font-size: 1.5rem; color: var(--bleu-profond);
}
.bareme__formule .operation { font-family: var(--registre); font-size: .78rem; color: var(--tampon); }

/* La réglette : une barre qui se vide, mois après mois. */
.reglette { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.reglette__cran {
    display: grid;
    grid-template-columns: 4.5rem 1fr 4.5rem;
    gap: .75rem; align-items: center;
    padding: .4rem 0;
    font-family: var(--registre); font-size: .78rem;
}
.reglette__mois { color: var(--gris-atelier); }
.reglette__barre { height: 8px; background: var(--papier-creuse); border-radius: 4px; overflow: hidden; }
.reglette__barre span {
    display: block; height: 100%;
    background: var(--bleu-travail); border-radius: 4px;
}
.reglette__prix { text-align: right; font-weight: 400; color: var(--graphite); }
.reglette__cran--nul .reglette__prix { color: var(--controle); font-weight: 700; }
.reglette__cran--nul .reglette__barre span { background: var(--controle); }

/* -------------------------------------------------------- blocs génériques */

.duo {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
.duo--inverse .duo__image { order: -1; }
.duo__image img { border-radius: var(--rayon); border: 1px solid var(--trait); }
.duo figure { margin: 0; }

.colonnes { display: grid; gap: 2rem; }
.colonnes--2 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.colonnes--3 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.colonnes--4 { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

.cartes {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem; list-style: none; margin: 2rem 0 0; padding: 0;
}
.carte {
    background: var(--blanc); border: 1px solid var(--trait);
    border-radius: var(--rayon); padding: 1.5rem;
}
/* La numérotation encode un ordre réel : les quatre volets de la prestation. */
.carte__index {
    display: block; font-family: var(--registre); font-size: .72rem;
    color: var(--tampon); letter-spacing: .1em; margin-bottom: .75rem;
}
.carte h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.carte p { margin: 0; font-size: .95rem; color: #3A4048; }

.cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1.5rem;
}
.cta h2 { margin-bottom: .35rem; }
.cta p { margin: 0; }

.accordeon { margin-top: 1.5rem; border-top: 1px solid var(--trait); }
.accordeon__item { border-bottom: 1px solid var(--trait); }
.accordeon__item summary {
    font-family: var(--titre); font-weight: 500; font-size: 1.05rem;
    padding: 1.1rem 2rem 1.1rem 0; cursor: pointer; position: relative; list-style: none;
}
.accordeon__item summary::-webkit-details-marker { display: none; }
.accordeon__item summary::after {
    content: '+'; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
    font-size: 1.4rem; color: var(--bleu-travail); font-weight: 400;
}
.accordeon__item[open] summary::after { content: '−'; }
.accordeon__item .prose { padding-bottom: 1.25rem; max-width: 46rem; }

.temoignages { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.temoignage {
    margin: 0; background: var(--blanc); border: 1px solid var(--trait);
    border-left: 3px solid var(--tampon); border-radius: var(--rayon); padding: 1.5rem;
}
.temoignage blockquote { margin: 0 0 1rem; font-size: 1.02rem; }
.temoignage figcaption { font-family: var(--registre); font-size: .78rem; color: var(--gris-atelier); }
.temoignage figcaption strong { display: block; color: var(--graphite); }

.galerie {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem; list-style: none; margin: 2rem 0 0; padding: 0;
}
.galerie__legende { font-family: var(--registre); font-size: .75rem; color: var(--gris-atelier); }

.video video { width: 100%; border-radius: var(--rayon); }

.separateur { border: 0; border-top: 1px solid var(--trait); margin: 0; }

/* ------------------------------------------------------------ formulaires */

.formulaire { margin-top: 2rem; }

.champ { margin-bottom: 1.25rem; }
.champ-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem; }

.champ label {
    display: block; margin-bottom: .35rem;
    font-family: var(--titre); font-weight: 500; font-size: .92rem;
}
.requis { color: var(--tampon); }

.champ input[type="text"], .champ input[type="email"], .champ input[type="tel"], .champ textarea {
    width: 100%; padding: .75rem .85rem;
    font-family: var(--corps); font-size: 1rem; color: var(--graphite);
    background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon);
}
.champ input:focus, .champ textarea:focus { border-color: var(--bleu-travail); }
.champ textarea { resize: vertical; min-height: 8rem; }

.champ--case { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; }
.champ--case label { font-family: var(--corps); font-weight: 400; font-size: .9rem; line-height: 1.5; }
.champ--case input { margin-top: .3rem; }

.champ__erreur {
    font-family: var(--registre); font-size: .78rem;
    color: var(--tampon); margin: .35rem 0 0;
}

/* L'appât : masqué à l'œil comme au lecteur d'écran, visible du seul robot. */
.appat { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.alerte { padding: .9rem 1.1rem; border-radius: var(--rayon); margin-bottom: 1.5rem; font-size: .95rem; }
.alerte--erreur { background: #FBEDEC; color: #8A2A24; border-left: 3px solid var(--tampon); }
.alerte--info { background: #E8EEF6; border-left: 3px solid var(--bleu-travail); }

.message-succes {
    background: var(--blanc); border: 1px solid var(--trait);
    border-left: 3px solid var(--controle);
    border-radius: var(--rayon); padding: 1.75rem;
}
.message-succes__titre { font-family: var(--titre); font-weight: 700; font-size: 1.2rem; margin: 0 0 .5rem; }

/* -------------------------------------------------------------------- blog */

.articles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.article-carte {
    background: var(--blanc); border: 1px solid var(--trait);
    border-radius: var(--rayon); padding: 1.5rem;
}
.article-carte h2 { font-size: 1.35rem; margin: .5rem 0; }
.article-carte h2 a { text-decoration: none; }
.article-carte p { margin: 0 0 .75rem; color: #3A4048; }
.article-carte time, .article__meta {
    font-family: var(--registre); font-size: .76rem; color: var(--gris-atelier);
}

.etiquette {
    display: inline-block;
    font-family: var(--registre); font-size: .68rem;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--tampon); text-decoration: none;
    border: 1px solid currentColor; border-radius: 2px;
    padding: .15rem .5rem;
}

.article__image { margin: 2rem 0; }
.article__image img { border-radius: var(--rayon); }

.pagination {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem;
    border-top: 1px solid var(--trait);
    font-family: var(--registre); font-size: .82rem;
}

.liens-suite { list-style: none; margin: 1rem 0 0; padding: 0; }
.liens-suite li { padding: .6rem 0; border-bottom: 1px dotted var(--trait); }

/* -------------------------------------------------------------------- pied */

.pied {
    background: var(--bleu-profond); color: #C3CDDA;
    padding-block: clamp(2.5rem, 5vw, 4rem);
}
.pied a { color: #fff; }
.pied__interieur { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.pied .marque__nom { color: #fff; margin-bottom: .5rem; }
.pied__identite p { margin: 0 0 .35rem; font-size: .95rem; }
.pied__liens ul { list-style: none; margin: 0; padding: 0; }
.pied__liens li { margin-bottom: .5rem; }
.pied__liens a { font-size: .95rem; }
.pied__mention {
    font-family: var(--registre); font-size: .74rem; line-height: 1.6;
    color: #8B99AB; margin: 0; grid-column: 1 / -1;
    padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12);
}

/* ---------------------------------------------------------- écrans simples
   Connexion à l'administration et à l'espace client, activation de compte,
   installateur. Un gabarit minimal, sans en-tête ni pied de page : ces styles
   doivent donc être autonomes.                                              */

.ecran-simple {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--gouttiere);
}

.carte-centree {
    width: 100%;
    max-width: 27rem;
    padding: clamp(1.5rem, 5vw, 2.5rem);
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
}

.carte-centree h1 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Les écrans simples n'utilisent pas la classe .champ : les sélecteurs
   portent directement sur les éléments de formulaire. */
.carte-centree label {
    display: block;
    margin: 1.1rem 0 .35rem;
    font-family: var(--titre);
    font-weight: 500;
    font-size: .9rem;
}

.carte-centree input[type="text"],
.carte-centree input[type="email"],
.carte-centree input[type="password"],
.carte-centree input[type="tel"],
.carte-centree input[type="url"],
.carte-centree select,
.carte-centree textarea {
    display: block;
    width: 100%;
    padding: .7rem .8rem;
    font-family: var(--corps);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--graphite);
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
}

.carte-centree input:focus,
.carte-centree select:focus,
.carte-centree textarea:focus {
    border-color: var(--bleu-travail);
    outline: 2px solid var(--bleu-travail);
    outline-offset: 1px;
}

.carte-centree button[type="submit"] {
    display: block;
    width: 100%;
    margin-top: 1.75rem;
    padding: .85rem 1.2rem;
    font-family: var(--titre);
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    background: var(--bleu-travail);
    border: 2px solid var(--bleu-travail);
    border-radius: var(--rayon);
    cursor: pointer;
}
.carte-centree button[type="submit"]:hover {
    background: var(--bleu-profond);
    border-color: var(--bleu-profond);
}

.carte-centree .aide,
.carte-centree small {
    display: block;
    margin-top: .35rem;
    font-family: var(--registre);
    font-size: .76rem;
    line-height: 1.5;
    color: var(--gris-atelier);
}

.carte-centree p { margin: 1rem 0 0; font-size: .93rem; }

/* Liste de contrôle des pré-requis, dans l'installateur. */
.carte-centree .checks {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    font-size: .9rem;
}
.carte-centree .checks li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--papier-creuse);
}
.carte-centree .ok { color: var(--controle); font-weight: 600; }
.carte-centree .ko { color: var(--tampon); font-weight: 600; }

/* --------------------------------------------------------------- mouvement */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------- impression */

@media print {
    .entete, .pied, .hero__vignette, .bouton, .bascule { display: none; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .bloc { padding-block: 1rem; }
}

/* ------------------------------------------------------------- simulateur
   Le parcours d'estimation. Une question à la fois, une réponse par grande
   case cliquable : cela se remplit au pouce, sur un téléphone, en marchant.  */

.simulateur { margin-top: 2rem; }

.simulateur__progression { margin-bottom: 2rem; }

.progression__barre {
    height: 4px;
    background: var(--papier-creuse);
    border-radius: 2px;
    overflow: hidden;
}
.progression__barre span {
    display: block;
    height: 100%;
    background: var(--bleu-travail);
    border-radius: 2px;
    transition: width 240ms ease;
}
.progression__texte {
    font-family: var(--registre);
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gris-atelier);
    margin: .6rem 0 0;
}

.etape { border: 0; padding: 0; margin: 0 0 1.5rem; }

.etape__question {
    display: block;
    width: 100%;
    padding: 0;
    font-family: var(--titre);
    font-weight: 700;
    font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin-bottom: 1.25rem;
    text-wrap: balance;
}
.etape__question:focus { outline: none; }
.etape__question--manquante { color: var(--tampon); }

.etape__aide {
    font-family: var(--registre);
    font-size: .78rem;
    line-height: 1.5;
    color: var(--gris-atelier);
    margin: .9rem 0 0;
}

.choix { display: grid; gap: .6rem; }

/* La case entière est cliquable : sur mobile, viser un petit rond est pénible. */
.choix__option {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .95rem 1.1rem;
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}
.choix__option:hover { border-color: var(--bleu-travail); }

.choix__option input {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--bleu-travail);
    margin: 0;
}

.choix__libelle { font-size: 1rem; line-height: 1.4; }

.choix__option:has(input:checked) {
    border-color: var(--bleu-travail);
    border-width: 2px;
    padding: calc(.95rem - 1px) calc(1.1rem - 1px);
    background: color-mix(in srgb, var(--bleu-travail) 5%, var(--blanc));
}
.choix__option:has(input:focus-visible) {
    outline: 2px solid var(--bleu-travail);
    outline-offset: 2px;
}

/* ----------------------------------------------------------- estimation */

.estimation {
    background: var(--bleu-profond);
    color: #E8EBEF;
    border-radius: var(--rayon);
    padding: 1.5rem;
    margin: 2rem 0;
}

.estimation__libelle {
    font-family: var(--registre);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8FA9C7;
    margin: 0 0 .9rem;
}

.estimation__montants {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
    margin: 0 0 .5rem;
}

.estimation__valeur {
    font-family: var(--titre);
    font-weight: 700;
    font-size: 1.9rem;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.estimation__unite {
    font-family: var(--registre);
    font-size: .76rem;
    color: #A9C4E4;
}

.estimation__offre {
    font-family: var(--registre);
    font-size: .78rem;
    color: #8FA9C7;
    margin: 1rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid rgb(255 255 255 / .14);
}

.simulateur__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.5rem;
}

.simulateur__note {
    font-family: var(--registre);
    font-size: .78rem;
    line-height: 1.6;
    color: var(--gris-atelier);
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px dotted var(--trait);
}

.legende {
    display: block;
    margin-bottom: .6rem;
    font-family: var(--titre);
    font-weight: 500;
    font-size: .92rem;
}

/* L'attribut hidden suffit : il est posé dans le HTML et retiré par le script.
   Sans JavaScript, la progression et les boutons de navigation restent donc
   masqués, et le formulaire s'envoie d'un seul tenant. */
[hidden] { display: none !important; }