/* © Etienne BIGANT — Tous droits réservés.
   Vitrine bigzcrack.fr.

   Registre visuel repris de microsoft.ai, après relevé des valeurs réelles :
     — ouverture NOIRE, serif immense (111 px chez eux), centré, crème sur noir ;
     — corps de page CRÈME (#fef9ed) avec cartes sable (#fbf0dc) ;
     — texte courant en serif, y compris les paragraphes ;
     — étiquettes en chasse fixe, en CASSE NORMALE et interlettrage serré
       (et non en capitales espacées, erreur de ma version précédente) ;
     — images abstraites en aplats colorés, dans des rectangles arrondis.

   Polices : Bradford LL n'est pas libre. Newsreader offre une italique de
   qualité comparable et tient aussi bien en titrage qu'en texte. Red Hat Mono
   est exactement celle de la référence, et elle est libre.

   L'échelle fait tout le travail : peu d'effets, beaucoup de place, un contraste
   franc entre le noir de l'ouverture et la chaleur du reste. */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400&family=Red+Hat+Mono:wght@400;500&display=swap');

:root {
    --noir: #0f0e0c;
    --creme: #fef9ed;
    --sable: #fbf0dc;
    --sable-2: #f6e6ca;
    --encre: #1a1714;
    --encre-2: #59524a;
    --encre-3: #8a8175;
    --filet: #e6d8bd;
    --brique: #a3392c;

    --serif: Newsreader, "Times New Roman", Georgia, serif;
    --mono: "Red Hat Mono", ui-monospace, Consolas, monospace;

    --max: 1180px;
    --texte: 38rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--creme);
    color: var(--encre);
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.55;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }

/* Étiquette en chasse fixe : casse normale, interlettrage légèrement négatif —
   exactement le réglage relevé sur la référence. */
.label {
    /* 13 px, casse normale, interlettrage négatif : les valeurs relevées sur la
       référence. Des capitales espacées donneraient un tout autre registre. */
    font-family: var(--mono); font-size: 0.82rem; font-weight: 500;
    letter-spacing: -0.012em; color: var(--encre-3);
}

/* ==========================================================================
   Barre
   ========================================================================== */
.topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
.topbar .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; padding-top: 26px; padding-bottom: 26px;
}
.brand {
    display: flex; align-items: center; gap: 11px;
    font-size: 1.1rem; font-weight: 500; color: var(--creme);
}
.brand img { height: 24px; width: 24px; }
.topnav { display: flex; align-items: center; gap: 30px; }
.topnav a {
    font-family: var(--mono); font-size: 0.78rem; font-weight: 400;
    letter-spacing: -0.01em; color: rgba(254, 249, 237, .66); text-decoration: none;
}
.topnav a:hover { color: var(--creme); }
.topnav a.appel {
    border: 1px solid rgba(254, 249, 237, .34); border-radius: 999px;
    padding: 8px 18px; color: var(--creme);
}
.topnav a.appel:hover { background: var(--creme); color: var(--noir); }

/* ==========================================================================
   Ouverture — noire, centrée, immense
   ========================================================================== */
.ouverture {
    background: var(--noir); color: var(--creme);
    min-height: 88vh; display: flex; align-items: center;
    padding: 160px 0 110px; text-align: center;
}
.ouverture .label { color: rgba(254, 249, 237, .5); display: block; margin-bottom: 34px; }

h1 {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(2.9rem, 8.4vw, 6.6rem);
    line-height: 1.02; letter-spacing: -0.022em;
    margin: 0 auto 38px; max-width: 16ch; text-wrap: balance;
}
h1 em { font-style: italic; font-weight: 300; }

.ouverture p {
    font-size: clamp(1.05rem, 1.6vw, 1.32rem); font-weight: 300;
    color: rgba(254, 249, 237, .72);
    max-width: 34rem; margin: 0 auto 44px; line-height: 1.6;
}
.ouverture .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.bouton {
    display: inline-block; border-radius: 999px; padding: 14px 30px;
    font-family: var(--mono); font-size: 0.82rem; letter-spacing: -0.01em;
    text-decoration: none; border: 1px solid transparent;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.bouton.plein { background: var(--creme); color: var(--noir); }
.bouton.plein:hover { background: #fff; }
.bouton.vide { border-color: rgba(254, 249, 237, .34); color: var(--creme); }
.bouton.vide:hover { border-color: var(--creme); }
.bouton.sombre { background: var(--noir); color: var(--creme); }
.bouton.sombre:hover { background: #2a2620; }
.bouton.claire { border-color: var(--filet); color: var(--encre); }
.bouton.claire:hover { border-color: var(--encre); }

/* ==========================================================================
   Sections
   ========================================================================== */
section { padding: 108px 0; }
section + section { border-top: 1px solid var(--filet); }

.entete { max-width: 46rem; margin-bottom: 56px; }
.entete .label { display: block; margin-bottom: 18px; }
h2 {
    font-weight: 300; font-size: clamp(1.9rem, 4.2vw, 3.1rem);
    line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 20px; text-wrap: balance;
}
h2 em { font-style: italic; }
.chapeau { font-size: 1.16rem; font-weight: 300; color: var(--encre-2); margin: 0; max-width: var(--texte); }

/* --- Carte sable : l'unité de composition du corps de page ---------------- */
.carte { background: var(--sable); border-radius: 22px; padding: 40px; }
.carte.serree { padding: 32px; }

/* --- Aplats abstraits : l'imagerie du registre. Composés en CSS plutôt que
       photographiques — aucune image à produire, aucun poids à charger. ----- */
.aplat {
    border-radius: 18px; min-height: 260px; position: relative; overflow: hidden;
    background: #1d3a2e;
}
.aplat::after {          /* grain : évite l'aspect « dégradé numérique » */
    content: ""; position: absolute; inset: 0; opacity: .32; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.aplat.aube {
    background:
        radial-gradient(120% 80% at 20% 12%, #e8a38c 0%, transparent 58%),
        radial-gradient(110% 70% at 85% 30%, #c2748f 0%, transparent 60%),
        linear-gradient(175deg, #2f4257 0%, #14202c 100%);
}
.aplat.foret {
    background:
        radial-gradient(100% 70% at 30% 88%, #c8c25e 0%, transparent 55%),
        radial-gradient(120% 80% at 75% 20%, #2f6e57 0%, transparent 62%),
        linear-gradient(180deg, #16302a 0%, #0d1c19 100%);
}
.aplat.braise {
    background:
        radial-gradient(110% 75% at 78% 78%, #d4762f 0%, transparent 58%),
        radial-gradient(100% 70% at 22% 22%, #8c2f2a 0%, transparent 60%),
        linear-gradient(160deg, #3a1d1a 0%, #170d0c 100%);
}

/* --- Bloc à deux colonnes : image + texte, comme sur la référence --------- */
.duo { display: grid; grid-template-columns: .82fr 1.18fr; gap: 40px; align-items: center; }
.duo p { font-size: 1.2rem; font-weight: 300; color: var(--encre-2); margin: 0; }
.duo h3 { font-size: 1.7rem; font-weight: 300; line-height: 1.16; letter-spacing: -0.015em; margin: 0 0 14px; }
/* Le numéro de l'étape : même traitement que dans la liste qui suit, pour que
   la séquence 01–04 se lise d'un bloc malgré les deux mises en page. */
.duo .label { display: block; margin-bottom: 14px; }

/* --- Étapes --------------------------------------------------------------- */
.etapes { display: grid; gap: 18px; }
.etape { display: grid; grid-template-columns: 3.4rem 1fr; gap: 22px; align-items: start; }
.etape .n { font-family: var(--mono); font-size: 0.78rem; color: var(--encre-3); padding-top: 12px; }
.etape h3 { font-size: 1.32rem; font-weight: 400; margin: 0 0 6px; letter-spacing: -0.012em; }
.etape p { margin: 0; color: var(--encre-2); font-weight: 300; font-size: 1.04rem; }

/* --- Garanties ------------------------------------------------------------ */
.garanties { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.garantie h3 { font-size: 1.24rem; font-weight: 400; margin: 0 0 8px; letter-spacing: -0.012em; }
.garantie p { margin: 0; color: var(--encre-2); font-weight: 300; font-size: 1.02rem; }
.garantie .label { display: block; margin-bottom: 16px; }

/* ==========================================================================
   Figure de rapport
   ========================================================================== */
.rapport { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.chiffre { font-size: clamp(4rem, 9vw, 7rem); font-weight: 300; line-height: .92; letter-spacing: -0.035em; color: var(--brique); margin: 0; }
.chiffre-note { font-size: 1.1rem; font-weight: 300; color: var(--encre-2); margin: 14px 0 0; max-width: 20rem; }
.jauge { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--sable-2); margin: 28px 0 0; }
.jauge i { display: block; background: var(--brique); }
.rapport table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.rapport td { padding: 13px 0; border-bottom: 1px solid var(--filet); color: var(--encre-2); font-weight: 300; }
.rapport tr:last-child td { border-bottom: none; }
.rapport td:last-child { text-align: right; font-family: var(--mono); font-size: 0.86rem; color: var(--encre); }
.rapport tr.chaud td:last-child { color: var(--brique); }
.legende { font-family: var(--mono); font-size: 0.72rem; color: var(--encre-3); margin: 22px 0 0; }

/* ==========================================================================
   Cadre légal
   ========================================================================== */
.cadre { background: var(--noir); color: var(--creme); border-radius: 22px; padding: 52px 48px; }
.cadre .label { color: rgba(254, 249, 237, .5); display: block; margin-bottom: 18px; }
.cadre h2 { color: var(--creme); margin-bottom: 22px; }
.cadre > p { color: rgba(254, 249, 237, .72); font-weight: 300; max-width: var(--texte); margin: 0 0 30px; }
.cadre ol { margin: 0; padding: 0; list-style: none; counter-reset: c; display: grid; gap: 16px; max-width: 46rem; }
.cadre li { counter-increment: c; display: grid; grid-template-columns: 2.6rem 1fr; gap: 14px; color: rgba(254, 249, 237, .72); font-weight: 300; }
.cadre li::before { content: counter(c, decimal-leading-zero); font-family: var(--mono); font-size: 0.76rem; color: rgba(254, 249, 237, .42); padding-top: 7px; }
.cadre strong { color: var(--creme); font-weight: 400; }

/* ==========================================================================
   Tarifs
   ========================================================================== */
.avertissement {
    border: 1px solid var(--filet); border-radius: 16px; padding: 20px 26px;
    margin-bottom: 34px; max-width: 46rem; color: var(--encre-2);
    font-weight: 300; font-size: 1.02rem;
}
.avertissement strong { color: var(--encre); font-weight: 500; }

.offres { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.offre { background: var(--sable); border-radius: 22px; padding: 34px 32px; display: flex; flex-direction: column; }
.offre.mise-en-avant { background: var(--noir); color: var(--creme); }
.offre.mise-en-avant .label { color: rgba(254, 249, 237, .5); }
.offre.mise-en-avant dt { color: rgba(254, 249, 237, .62); }
.offre.mise-en-avant dd { color: var(--creme); }
.offre.mise-en-avant .montant { color: var(--creme); }
.offre .label { display: block; margin-bottom: 20px; }
.montant { font-size: 2.9rem; font-weight: 300; letter-spacing: -0.03em; line-height: 1; margin: 0 0 4px; }
.montant span { font-family: var(--mono); font-size: 0.78rem; letter-spacing: -0.01em; color: var(--encre-3); }
.offre.mise-en-avant .montant span { color: rgba(254, 249, 237, .5); }
.offre dl { margin: 26px 0 30px; display: grid; gap: 12px; }
.offre .ligne { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.offre dt { font-size: 0.98rem; font-weight: 300; color: var(--encre-2); margin: 0; }
.offre dd { margin: 0; font-family: var(--mono); font-size: 0.82rem; text-align: right; white-space: nowrap; }
.offre .bouton { margin-top: auto; text-align: center; }
.apres { margin-top: 26px; color: var(--encre-2); font-weight: 300; max-width: 44rem; }

.offre-note { font-size: 0.95rem; font-weight: 300; color: var(--encre-2);
              margin: 0 0 22px; border-top: 1px solid var(--filet); padding-top: 16px; }

/* Les seuils de bascule entre offres : affiches, pas caches. */
.seuils { margin-top: 44px; border-top: 1px solid var(--filet); padding-top: 30px; }
.seuils .label { display: block; margin-bottom: 22px; }
.seuils-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.seuils-grille p { margin: 0; font-weight: 300; color: var(--encre-2); }
.seuil-chiffre { font-size: 2.5rem; font-weight: 300; line-height: 1; letter-spacing: -0.03em;
                 color: var(--brique) !important; margin: 0 0 12px !important; }
.seuils-note { margin: 28px 0 0; font-weight: 300; color: var(--encre-2); max-width: 46rem; }
@media (max-width: 760px) { .seuils-grille { grid-template-columns: 1fr; gap: 26px; } }

/* ==========================================================================
   Acheter ou passer par le service — la balance
   ========================================================================== */
.balance { display: grid; grid-template-columns: 1fr auto 1fr; gap: 26px; align-items: center; }
.plateau { display: flex; flex-direction: column; }
.plateau .label { display: block; margin-bottom: 18px; }
.plateau-note { color: var(--encre-2); font-weight: 300; font-size: 1rem; margin: 6px 0 0; }
.plateau dl { margin: 26px 0 22px; display: grid; gap: 11px;
              border-top: 1px solid var(--filet); padding-top: 20px; }
.plateau-plus { margin: auto 0 0; color: var(--encre-2); font-weight: 300; font-size: 0.98rem;
                border-top: 1px solid var(--filet); padding-top: 18px; }

/* Le point de bascule : le chiffre qui porte l'argument, donc traité comme tel. */
.bascule { text-align: center; padding: 0 12px; }
.bascule .label { display: block; margin-bottom: 14px; }
.bascule-chiffre {
    font-size: clamp(3rem, 6vw, 4.6rem); font-weight: 300; line-height: 1;
    letter-spacing: -0.035em; margin: 0; color: var(--brique);
}
.bascule-note { font-size: 0.98rem; font-weight: 300; color: var(--encre-2);
                margin: 16px auto 0; max-width: 15rem; }

@media (max-width: 980px) {
    .balance { grid-template-columns: 1fr; }
    .bascule { padding: 18px 0; border-top: 1px solid var(--filet);
               border-bottom: 1px solid var(--filet); }
}

/* ==========================================================================
   Clôture et pied de page
   ========================================================================== */
.cloture { text-align: center; }
.cloture h2 { margin-left: auto; margin-right: auto; max-width: 18ch; }
.cloture p { color: var(--encre-2); font-weight: 300; max-width: 34rem; margin: 0 auto 36px; }
.courriel { font-family: var(--mono); font-size: 1rem; }

footer { background: var(--noir); color: rgba(254, 249, 237, .58); padding: 44px 0; font-family: var(--mono); font-size: 0.76rem; letter-spacing: -0.01em; }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
footer a { color: rgba(254, 249, 237, .58); text-decoration: none; }
footer a:hover { color: var(--creme); }

/* ==========================================================================
   Page de contenu simple (mentions légales)
   ========================================================================== */
.doc { padding: 130px 0 90px; max-width: 44rem; }
.doc h1 { font-size: clamp(2.2rem, 5vw, 3rem); text-align: left; margin: 0 0 28px; max-width: none; }
.doc h2 { font-size: 1.45rem; margin: 44px 0 12px; }
.doc p, .doc li { color: var(--encre-2); font-weight: 300; }
.todo {
    background: var(--sable); border-left: 3px solid var(--brique); border-radius: 0 12px 12px 0;
    padding: 14px 20px; margin: 14px 0; color: var(--encre); font-size: 0.98rem; font-weight: 300;
}
.doc .topbar-claire { position: static; }
.topbar.claire { position: static; background: var(--creme); border-bottom: 1px solid var(--filet); }
.topbar.claire .brand { color: var(--encre); }
.topbar.claire .topnav a { color: var(--encre-2); }
.topbar.claire .topnav a:hover { color: var(--encre); }
.topbar.claire .topnav a.appel { border-color: var(--filet); color: var(--encre); }
.topbar.claire .topnav a.appel:hover { background: var(--noir); color: var(--creme); }

/* ==========================================================================
   Petits écrans
   ========================================================================== */
@media (max-width: 900px) {
    .duo, .rapport { grid-template-columns: 1fr; gap: 28px; }
    section { padding: 72px 0; }
    .ouverture { min-height: 0; padding: 130px 0 84px; }
    .carte { padding: 28px; }
    .cadre { padding: 36px 28px; }
}
@media (max-width: 620px) {
    body { font-size: 17px; }
    .wrap { padding: 0 22px; }
    .topnav a:not(.appel) { display: none; }
    .etape { grid-template-columns: 1fr; gap: 6px; }
    .etape .n { padding-top: 0; }
    .cadre li { grid-template-columns: 1fr; gap: 2px; }
    .cadre li::before { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}

.duo-egal { display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.duo-egal .label { display: block; margin-bottom: 16px; }
.duo-egal h3 { font-size: 1.5rem; font-weight: 300; line-height: 1.18;
    letter-spacing: -0.015em; margin: 0 0 14px; }
.duo-egal p { font-size: 1.06rem; font-weight: 300;
    color: var(--encre-2); margin: 0; }
.duo-egal .plateau-plus { margin-top: 20px; }