/* =====================================================
   FOND DE LETTRES, sur toutes les pages du site
   Choix de Jimmy du 17 octobre 2026 : derriere toute la page, sur chaque page.
   Le dessin est fait par fond-lettres.js, dans le canvas pose juste apres <body>.
   ===================================================== */

/* ===== DEBUT CSS fond-lettres (repris du prototype) ===== */
/* Le canvas DOIT avoir une taille CSS : sans elle, sur Retina, il dessine au double. */
.fond-lettres {
    position: fixed; left: 0; top: 0;
    width: 100%; height: 100vh; height: 100lvh;   /* lvh : la hauteur ne bouge pas quand la barre du telephone se cache */
    display: block; pointer-events: none;
    z-index: -1;   /* derriere tout le contenu, devant le fond de la page */
}
/* ===== FIN CSS fond-lettres ===== */

@media print {
    .fond-lettres { display: none; }
}

/* Pages de lecture : les lettres trois fois plus discretes.
   Jimmy, 17 octobre 2026 : "le code doit moins se voir pour ne pas gener la
   lecture". Choix en bouton : 35 %, comme les articles des actus, et aussi sur
   la page blog (la liste). L'accueil et les autres pages gardent toute la force.
   Les 6 articles sont reconnus a leur og:type "article", le meme signe que le
   gabarit des actus ; la page blog a son adresse canonique.
   Opacite de la toile plutot que regler() : le branchement de fond-lettres.js
   remet 0,26 / 0,4 a chaque changement de theme. */
html:has(meta[property="og:type"][content="article"]) canvas.fond-lettres,
html:has(link[rel="canonical"][href="https://jimmy-amory.fr/blog"]) canvas.fond-lettres {
    opacity: .35;
}

/* Un z-index negatif passe sous le fond de <body> si <html> porte aussi un
   fond (page vendre) : le fond de <body> remonte alors seul a la fenetre, et
   les lettres passent devant lui. Meme couleur a l'ecran. */
html {
    background: transparent !important;
}

/* =====================================================
   SECTIONS QUI CACHAIENT LES LETTRES
   Ces grands blocs portaient un fond plein, du meme noir (ou du meme creme)
   que la page, a peine degrade : les lettres s'arretaient net a leur bord.
   Rendus transparents, ils montrent le fond de la page, et les lettres.
   Releve fait page par page le 17 octobre 2026.
   ===================================================== */
.hero-scroll-spacer,                       /* accueil */
section.problem#problem,
section.about-me#about,
section.why-ia#why-ai,
section.why-me#why-me,
.ia-scope,                                 /* accueil (bloc IA) et pages IA, en theme clair */
section.blog-hero,                         /* blog */
.app-wrapper,                              /* vendre */
section.article-hero,                      /* articles */
section.app-global,                        /* atlas */
.bdv-transition,
footer.vg-footer,
#space-background {                       /* rentabilite : on garde ses etoiles */
    background: transparent !important;
}
/* Les deux zones bleu nuit de l'accueil (Derniers articles, Contact) : le bleu
   nuit reste, en voile, et les lettres passent dessous, attenuees. Choix de
   Jimmy du 17 octobre 2026, sur apercu a trois versions. */
section#blog-preview.blog-preview {
    background: radial-gradient(circle at 10% 20%, rgba(15, 23, 42, 0.65) 0%, rgba(0, 0, 0, 0.45) 90%) !important;
}
section.section.contact#contact {
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.65) 0%, rgba(30, 27, 75, 0.6) 20%, rgba(0, 0, 0, 0.45) 70%) !important;
}
[data-theme="light"] section#blog-preview.blog-preview {
    background: rgba(243, 240, 232, 0.6) !important;
}
[data-theme="light"] section.section.contact#contact {
    background: radial-gradient(circle at center, rgba(253, 251, 245, 0.65) 0%, rgba(243, 239, 228, 0.6) 45%, rgba(247, 245, 240, 0.45) 100%) !important;
}

/* Haut de la page vendre : on garde ses deux lueurs, on retire le noir plein dessous. */
section.hero-gradient {
    background-color: transparent !important;
}
/* Haut de l'accueil et du collectif : un voile noir fondait le haut et le bas
   de l'ecran d'accueil, et y effacait les lettres. */
div.hero-gradient {
    display: none !important;
}

/* =====================================================
   CARTES RENDUES PLEINES
   Les cartes etaient en verre : un voile blanc (ou noir) tres leger, que les
   lettres traversaient. Elles gardent exactement l'aspect qu'elles avaient sur
   le fond nu, mais ne laissent plus rien passer. Deux facons de faire, selon
   la facon dont la carte est teintee.

   Seules les cartes posees directement sur la page sont concernees : un bloc
   range DANS une carte pleine garde son aspect d'origine (sa carte bloque deja
   les lettres ; plein, il perdrait la teinte de sa carte).

   --fond-page : la couleur du fond de la page, lue par fond-lettres.js (chaque
   page a la sienne). Avant que le script la lise, la meilleure estimation.
   ===================================================== */
:root {
    --fl-page: var(--fond-page, var(--ja-paper, var(--bg, var(--color-bg, #0a0a0b))));
}
/* Cartes posees sur une zone teintee : elles prennent la teinte de la zone
   sous elles, pas celle de la page.
   Page vendre : trois sections passent du transparent (en haut) a un bleu a
   10 % (en bas, 6 % en theme clair) ; les cartes prennent la teinte du milieu. */
.app-wrapper section.bg-gradient-to-b {
    --fl-page: color-mix(in srgb, rgb(26, 77, 122) 5%, var(--fond-page, #0a0a0b));
}
[data-theme="light"] .app-wrapper section.bg-gradient-to-b {
    --fl-page: color-mix(in srgb, rgb(66, 101, 121) 3%, var(--fond-page, #f7f5f0));
}
/* Accueil, contact : la couleur du voile bleu nuit a l'endroit du formulaire. */
section.section.contact#contact {
    --fl-page: rgb(16, 15, 34);
}
[data-theme="light"] section.section.contact#contact {
    --fl-page: rgb(246, 243, 235);
}

/* 1. Carte teintee par un degrade translucide, sans couleur de fond :
      on pose la couleur de la page dessous. Le degrade reste par-dessus,
      la carte a donc le meme aspect qu'avant sur le fond nu. */
.glass-card:not(.app-wrapper .glass-card):not(.blog-card):not(.glass-card .glass-card),
.profession-card {
    background-color: var(--fl-page) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* 2. Carte teintee par une couleur translucide : la couleur de la page est
      posee en image et fondue avec la teinte de la carte (eclaircir en theme
      sombre, assombrir en theme clair). Le calcul rend exactement la teinte
      d'avant posee sur la page, mais opaque. */
.app-wrapper .glass-card,              /* vendre */
.app-wrapper .glass-card-sm,
.app-wrapper .service-card,
.app-wrapper .faq-item,
.app-wrapper .choice-card,
.app-wrapper div[style*="background:var(--glass-bg)"],
.avis-carte,
.tool-card,                            /* estimation */
.rendement-section,
.vgc,                                  /* atlas */
.input-section,                        /* rentabilite */
.blog-card.glass-card,                 /* blog, en theme sombre */
.checklist-paper-stack,                /* accueil */
.checklist-paper,
.packs-socle,
.launch-limited-wrapper,
.ia-crm-example,                       /* accompagnement IA */
.ia-steps > li,
.stat-card,                            /* articles */
.stat-box,
.stats-list,
.article-container .etape,
.article-container .erreur,
.article-container .prejuge,
.article-container .box,
.virtual-contact-card,
.key-box,
.author-box,
.article-content table,
.article-container table,
.contenu table,
#search-input {                        /* collectif */
    background-image: linear-gradient(var(--fl-page), var(--fl-page)) !important;
    background-blend-mode: lighten !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
[data-theme="light"] :is(
    .app-wrapper .glass-card, .app-wrapper .glass-card-sm,
    .app-wrapper .service-card, .app-wrapper .faq-item, .app-wrapper .choice-card,
    .app-wrapper div[style*="background:var(--glass-bg)"], .avis-carte,
    .tool-card, .rendement-section,
    .input-section,
    .checklist-paper-stack, .launch-limited-wrapper, .ia-crm-example,
    .stat-card, .article-content .stat-box,
    .article-container :is(.etape, .erreur, .prejuge, .box), .key-box),
[data-theme="light"] #search-input {
    /* Le champ de recherche a sa propre ligne : un identifiant dans :is() donnerait
       a toute la liste une priorite qui ecraserait l'exception ci-dessous. */
    background-blend-mode: darken !important;
}
/* En theme clair restent en eclaircir : les voiles BLANCS (encadre de l'auteur,
   encadres de chiffres de l'article vendre, liste, tableaux, socle des packs). */
/* Article vendre : un seul des encadres .box est blanc (Mobilite et Futur). */
[data-theme="light"] .article-container .box[style*="border-left-color"] {
    background-blend-mode: lighten !important;
}
/* En theme clair, la carte de blog redevient un degrade : facon 1. */
[data-theme="light"] .blog-card.glass-card {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.55) 100%) !important;
    background-color: var(--fl-page) !important;
    background-blend-mode: normal !important;
}

/* 3. Teinte ET degrade : la teinte est calculee sur la page. */
.immo-banner {
    background-color: color-mix(in srgb, #ffffff 5%, var(--fl-page)) !important;
}
[data-theme="light"] .immo-banner {
    background-color: color-mix(in srgb, #ffffff 66%, var(--fl-page)) !important;
}