/* Modèle de page module (essai du 2026-10-17), posé sur concept.css.
   Couleur du module : --m, --m-fonce (texte sur fond clair, contraste AA) et --m-pale, réglées sur <body>.
   Une page = haut de page avec les captures et la ligne « Au programme », puis des parties
   numérotées automatiquement. Ajouter une partie = copier un bloc <section class="mx-partie">. */

.mx { counter-reset: partie; }

/* ---------- 1. Haut de page, façon page « L'application » (demande de Joe) ----------
   Fond clair, texte à gauche, captures à droite dans un massif de feuilles,
   puis une ligne d'étiquettes « Au programme » qui passe à la ligne : jamais de carte vide. */
/* Fond indigo gardé pour le haut de page (demande de Joe) */
.mx-hero { position: relative; overflow: hidden; background: var(--indigo); color: #fff; padding: 124px 0 48px; }
.mx-hero::after { content: ''; position: absolute; right: -160px; top: -140px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(109, 74, 255, .35), transparent 70%); pointer-events: none; }
.mx-hero > .cx-wrap { position: relative; z-index: 1; }
.mx-hero-grille { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.mx-badge { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; color: #e4e6fb; }
.mx-badge-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--m-pale); border: 1.5px solid var(--m); color: var(--m-fonce); }
.mx-badge-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mx-hero h1 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.04; font-weight: 800; letter-spacing: -.03em; margin: 24px 0 18px; color: #fff; }
.mx-hero h1 span { color: color-mix(in srgb, var(--m) 55%, #fff); }
.mx-lead { font-size: 19px; line-height: 1.6; color: #e4e6fb; max-width: 580px; }
.mx-hero .cx-actions { margin: 30px 0 0; }
.mx-hero .cx-btn { min-height: 56px; padding: 0 34px; font-size: 16px; }
.mx-hero .cx-btn--ghost { color: #fff; }
.mx-hero .cx-btn--ghost:hover { background: rgba(255, 255, 255, .1); }

/* Captures du module, dans un massif de feuilles comme sur la page « L'application » */
.mx-carrousel { position: relative; }
.mx-deco { position: absolute; z-index: 0; height: auto; pointer-events: none; }
.mx-deco--violet { width: 190px; left: -70px; top: -60px; transform: rotate(-18deg) scaleX(-1); opacity: .85; }
.mx-deco--droite { width: 190px; right: -92px; top: 30px; transform: rotate(10deg); opacity: .95; }
.mx-deco--vert { width: 170px; right: -64px; top: -90px; transform: rotate(16deg); opacity: .85; }
.mx-deco--fleur { z-index: 2; width: 64px; right: -22px; bottom: 74px; filter: drop-shadow(0 8px 10px rgba(31, 32, 87, .2)); transform-origin: 50% 100%; }
.mx-diapos { position: relative; z-index: 1; }

/* Au programme */
.mx-programme { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 40px; }
.mx-programme-titre { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #c9c3f5; }
.mx-programme-titre::after { content: ''; width: 32px; height: 2px; border-radius: 2px; background: rgba(201, 195, 245, .6); }
.mx-sommaire { list-style: none; padding: 0; margin: 0; counter-reset: sommaire; display: flex; flex-wrap: wrap; gap: 8px; }
.mx-sommaire li { counter-increment: sommaire; }
.mx-sommaire a { display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; border-radius: 999px; background: #fff; border: 1.5px solid #e2ddf6; color: var(--encre); font-weight: 600; font-size: 14px; text-decoration: none; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .5); transition: border-color .2s ease, transform .2s ease; }
.mx-sommaire a::before { content: counter(sommaire, decimal-leading-zero); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--m-pale); color: var(--m-fonce); font-family: var(--titre); font-weight: 800; font-size: 12px; }
.mx-sommaire a:hover { border-color: #b9acff; transform: translateY(-2px); }

.mx-carrousel { min-width: 0; }
.mx-ecran { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); }
.mx-piste { display: flex; }
.mx-diapo { flex: 0 0 100%; min-width: 0; margin: 0; }
/* Cadre des captures façon maquette : bande du haut fine, contour lavande tout autour */
.mx-hero .cx-window, .mx-capture .cx-window { border: 5px solid #e3e5eb; border-top: 0; border-radius: 14px; }
.mx-hero .cx-window-bar, .mx-capture .cx-window-bar { align-items: center; gap: 5px; padding: 5px 9px 6px; margin: 0 -5px; background: #e3e5eb; }
.mx-hero .cx-window-bar span, .mx-capture .cx-window-bar span { width: 8px; height: 8px; background: #c3c7d1; }
.mx-hero .cx-window img, .mx-capture .cx-window img { border-radius: 0 0 8px 8px; }
.mx-onglet { transition: opacity .25s ease; }
.mx-onglet.is-change { opacity: 0; }
.mx-diapo .cx-window-bar b, .mx-ecran .cx-window-bar b { margin-left: 8px; font-size: 11.5px; font-weight: 700; color: var(--texte); }
/* Légende sur une seule ligne de hauteur fixe : le carrousel ne saute plus d'une capture à l'autre */
.mx-legende { transition: opacity .3s ease; }
.mx-legende.is-change { opacity: 0; }
.mx-legende { margin: 14px 0 0; height: 1.55em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #d6d9f2; font-size: 14.5px; line-height: 1.55; text-align: center; padding: 0 24px; }
.mx-zoom-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.mx-zoom-btn img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.mx-carrousel-nav { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; }
.mx-fleche { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid #c9bff2; background: #f3f0ff; color: var(--violet); cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.mx-fleche:hover { background: var(--lavande); border-color: var(--violet-vif); }
.mx-fleche svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mx-points { display: flex; gap: 8px; }
/* Audit responsive 2026-10-18 : avec 9 a 11 ronds, la barre ne tenait plus a 320 px et la
   fleche suivante sortait du cadre (40 px sur application.html). Les ronds passent a la
   ligne entre les deux fleches, seulement quand la place manque. */
.mx-points { flex: 1 1 0; min-width: 0; flex-wrap: wrap; justify-content: center; row-gap: 8px; }
.mx-points button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: #6f6aa8; cursor: pointer; transition: width .25s ease, background .25s ease; }
.mx-points button[aria-selected="true"] { width: 28px; background: #c4b5fd; }
.mx-fleche:focus-visible, .mx-points button:focus-visible, .mx-zoom-btn:focus-visible { outline: 3px solid var(--violet-vif); outline-offset: 3px; }

/* ---------- 3. Parties ---------- */
.mx-partie { counter-increment: partie; position: relative; overflow: hidden; padding: 60px 0; background: #fff; }
.mx-partie:nth-child(odd) { background: linear-gradient(180deg, #f6f4fe 0%, #ede8fd 100%); }
/* Parties paires sur l'indigo du haut de page, à la place du blanc (demande de Joe, 2026-10-18) : textes en clair */
.mx-partie:nth-child(even) { background: radial-gradient(circle at 92% 8%, rgba(109, 74, 255, .32), transparent 42%), var(--indigo); }
.mx-partie:nth-child(even) .mx-num, .mx-partie:nth-child(even) .mx-num::before { color: color-mix(in srgb, var(--m) 55%, #fff); }
.mx-partie:nth-child(even) h2 { color: #fff; }
.mx-partie:nth-child(even) h2 span { color: #b9acff; }
.mx-partie:nth-child(even) .mx-desc { color: #d6d9f2; }
.mx-partie:nth-child(even) .mx-fonctions h3 { color: #fff; }
.mx-partie:nth-child(even) .mx-fonctions p { color: #c9cbe8; }
.mx-partie:nth-child(even) .mx-capture figcaption { color: #c9cbe8; }
.mx-partie:nth-child(even) .mx-capture .cx-window { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7); }
.mx-partie-grille { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.mx-partie:nth-child(even) .mx-texte { order: 2; }
/* Mise en page de la maquette « Comprendre vos comptes » : numéro, trait, intitulé ; puis trois fonctions à icône */
.mx-num { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--m-fonce); }
.mx-num::before { content: counter(partie, decimal-leading-zero); font-family: var(--titre); font-size: 30px; font-weight: 800; letter-spacing: 0; color: var(--m-fonce); }
.mx-num span { padding-left: 30px; background: linear-gradient(currentColor, currentColor) left center / 18px 2px no-repeat; }
.mx-partie h2 { margin: 10px 0 14px; font-size: clamp(28px, 2.9vw, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.mx-partie h2 span { display: block; color: var(--violet-vif); }
.mx-desc { color: var(--texte); font-size: 17px; line-height: 1.6; }
.mx-fonctions { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 18px; }
.mx-fonctions li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.mx-fonction-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--m-pale); border: 1.5px solid color-mix(in srgb, var(--m) 55%, #fff); color: var(--m-fonce); }
.mx-fonction-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mx-fonctions h3 { margin: 0 0 4px; font-family: var(--titre); font-size: 19px; line-height: 1.3; font-weight: 800; color: var(--encre); }
.mx-fonctions p { margin: 0; color: var(--texte); font-size: 15.5px; line-height: 1.55; }
/* Page Application : lien vers la page du module, à sa couleur */
.mx-lien { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 10px 18px; border-radius: 999px; background: var(--m-pale); border: 1.5px solid color-mix(in srgb, var(--m) 55%, #fff); color: var(--m-fonce); font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.mx-lien:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--m) 80%, transparent); }
.mx-lien:focus-visible { outline: 3px solid var(--m); outline-offset: 3px; }
.mx-capture figcaption { position: relative; z-index: 1; margin-top: 16px; text-align: center; color: var(--texte); font-size: 14.5px; }

.mx-capture { position: relative; margin: 0; }
.mx-capture .cx-window { position: relative; z-index: 1; box-shadow: 0 30px 60px -26px rgba(31, 32, 87, .55); }
/* Habillage des captures (PNG de Joe, refonte graphique/site/branche) : un cycle de 8 parties.
   Une partie ajoutée prend automatiquement l'habillage suivant. Fleurs retirées pour l'instant, sauf la rose. La base de la branche passe derrière la capture. */
.mx-capture::before { content: ''; position: absolute; z-index: 0; right: -120px; top: -40px; width: 300px; height: 380px; background: var(--br) center / contain no-repeat; transform: rotate(14deg); pointer-events: none; }
.mx-partie:nth-child(even) .mx-capture::before { right: auto; left: -120px; transform: rotate(-14deg); }
.mx-partie:nth-child(8n+2) { --br: url('../images/illustrations/habillage/branche-lavande.webp'); }
.mx-partie:nth-child(8n+1) { --br: url('../images/illustrations/habillage/eventail-cinq.webp'); }
.mx-partie:nth-child(8n+3) { --br: url('../images/illustrations/habillage/pousse-elegante.webp'); }
.mx-partie:nth-child(8n+4) { --br: url('../images/illustrations/habillage/brin-y.webp'); }
/* Partie 4 : une seconde branche, plus petite, comble le blanc sous la première (demande de Joe) */
.mx-partie:nth-child(8n+4) .mx-capture::after { content: ''; position: absolute; z-index: 0; left: -46px; top: calc(86% - 175px); width: 140px; height: 175px; background: url('../images/illustrations/habillage/pousse-elegante.webp') center bottom / contain no-repeat; transform: rotate(-58deg); transform-origin: 50% 100%; pointer-events: none; }
.mx-partie:nth-child(8n+5) { --br: url('../images/illustrations/habillage/branche-botanique.webp'); }
.mx-partie:nth-child(8n+6) { --br: url('../images/illustrations/habillage/petite-pousse.webp'); }
.mx-partie:nth-child(8n+7) { --br: url('../images/illustrations/habillage/bouquet-feuillu.webp'); }
.mx-partie:nth-child(8n) { --br: url('../images/illustrations/habillage/branche-eventail.webp'); }

/* ---------- 4. En pratique ---------- */
.mx-pratique h2 span { color: #c4b5fd; }
/* Titres d'étape plus longs que ceux de l'accueil : ils passent à la ligne */
.mx-pratique .cx-frise h3 { white-space: normal; font-size: 20px; line-height: 1.25; }

/* ---------- Agrandissement d'une capture ---------- */
.mx-zoom { max-width: min(1200px, 94vw); padding: 0; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.mx-zoom::backdrop { background: rgba(15, 16, 48, .82); }
.mx-zoom img { display: block; width: 100%; height: auto; }
.mx-zoom p { margin: 0; padding: 14px 20px 18px; color: var(--texte); font-size: 14px; }
.mx-zoom-fermer { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(31, 32, 87, .85); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }

/* Une seule rose par page : coin bas de la première partie, côté texte, sous le texte (demande de Joe) */
.mx-partie:first-child::after { content: ''; position: absolute; z-index: 0; left: -34px; bottom: -34px; width: 150px; height: 150px; background: url('../images/illustrations/habillage/rose.webp') center / contain no-repeat; transform: rotate(-12deg); transform-origin: 30% 70%; filter: drop-shadow(0 12px 16px rgba(31, 32, 87, .2)); pointer-events: none; }
/* Le texte fixe la hauteur de la partie : la rose ne l'allonge jamais. Elle disparaît quand la marge ne suffit plus à l'écarter du texte */
@media (min-width: 1025px) and (max-width: 1299px) { .mx-partie:first-child::after { display: none; } }
/* Constellation dans la marge côté texte : points vifs qui pulsent, reliés par des traits. Masquée quand la marge manque */
.mx-constel { position: absolute; z-index: 0; top: 9%; left: 6px; width: 150px; height: 82%; overflow: visible; pointer-events: none; }
.mx-partie:nth-child(even) .mx-constel { left: auto; right: 6px; }
.mx-constel .lien { fill: none; stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; opacity: .6; }
.mx-constel .noeud { filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--c) 45%, transparent)); }
.mx-constel .halo { opacity: 0; }
@media (max-width: 1419px) { .mx-constel { display: none; } }
/* Soulignement du titre, à la couleur du module : il se trace quand la partie arrive à l'écran */
.mx-partie h2 span { display: table; position: relative; }
.mx-partie h2 span::after { content: ''; position: absolute; left: -2px; bottom: -12px; width: 78%; height: 14px; background: var(--m); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10C70 4 170 2 297 6' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10C70 4 170 2 297 6' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; opacity: .85; }

/* ---------- Page Application : blocs repris de la page actuelle ---------- */
.ap-lead { margin: 14px 0 0; max-width: 640px; color: var(--texte); font-size: 17px; line-height: 1.6; }
.cx-section h2 span, .ap-mobile h2 span { color: var(--violet-vif); }
.ap-trio { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.ap-trio li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; }
.ap-trio h3 { margin: 4px 0 6px; font-family: var(--titre); font-size: 19px; font-weight: 800; color: var(--encre); }
.ap-trio p { margin: 0; color: var(--texte); font-size: 15.5px; line-height: 1.55; }
/* Mobile : fond indigo, quatre téléphones dont l'écran défile */
.ap-mobile { position: relative; overflow: hidden; padding: 72px 0; background: var(--indigo); color: #fff; }
.ap-mobile::after { content: ''; position: absolute; left: -180px; bottom: -200px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(109, 74, 255, .35), transparent 70%); pointer-events: none; }
.ap-mobile-grille { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.ap-mobile-texte { max-width: 760px; }
.ap-mobile h2 { margin: 12px 0 14px; font-size: clamp(28px, 3vw, 42px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.ap-mobile h2 span { color: #c4b5fd; }
.ap-mobile-texte p:last-child { color: #e4e6fb; font-size: 17px; line-height: 1.6; }
.ap-tels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.ap-tel { margin: 0; }
.ap-tel:nth-child(even) { margin-top: 36px; }
.ap-tel-cadre { padding: 9px; border-radius: 36px; background: #e3e5eb; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .7); }
.ap-tel-ecran { height: 520px; overflow-y: auto; border-radius: 24px; background: #fff; scrollbar-width: none; }
.ap-tel-ecran::-webkit-scrollbar { display: none; }
.ap-tel-ecran:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 3px; }
.ap-tel-ecran img { display: block; width: 100%; height: auto; }
.ap-tel figcaption { margin-top: 14px; color: #d6d9f2; font-size: 15px; line-height: 1.45; }
.ap-tel figcaption strong { display: block; margin-bottom: 2px; color: #fff; font-size: 17px; }
/* Modèles Excel : deux captures au cadre gris du modèle */
.ap-templates-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 40px; }
.ap-template { margin: 0; }
.ap-template .cx-window { border: 5px solid #e3e5eb; border-top: 0; border-radius: 14px; box-shadow: 0 30px 60px -28px rgba(31, 32, 87, .5); }
.ap-template .cx-window-bar { align-items: center; gap: 5px; padding: 5px 9px 6px; margin: 0 -5px; background: #e3e5eb; }
.ap-template .cx-window-bar span { width: 8px; height: 8px; background: #c3c7d1; }
.ap-template .cx-window-bar b { margin-left: 8px; font-size: 11.5px; font-weight: 700; color: var(--texte); }
.ap-template .mx-zoom-btn img { aspect-ratio: auto; }
.ap-template h3 { margin: 18px 0 6px; font-family: var(--titre); font-size: 19px; font-weight: 800; color: var(--encre); }
.ap-template p { margin: 0; color: var(--texte); font-size: 15.5px; line-height: 1.55; }
/* Principes : une ligne de pastilles luisantes */
.ap-principes { padding: 44px 0; background: #fff; border-top: 1px solid #ece9fb; }
.ap-principes-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.ap-principes h2 { margin: 0; font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; color: var(--encre); }
.ap-principes h2 span { color: var(--violet-vif); }
.ap-principes ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ap-principes li { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px 7px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 10%, #fff); border: 1.5px solid color-mix(in srgb, var(--c) 45%, #fff); color: var(--encre); font-weight: 700; font-size: 14.5px; }
.ap-point { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 18%, var(--c) 45%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, #fff), 0 4px 8px -2px color-mix(in srgb, var(--c) 60%, transparent); }
/* ---------- Pages Automatisation : comparatif en tableau (maquette de Joe, 2026-10-17) ---------- */
.mx-compare { background: linear-gradient(180deg, #f8f7ff, #fff); }
.mx-compare h2 { max-width: none; font-size: clamp(30px, 3.6vw, 52px); letter-spacing: -.03em; }
.mx-compare h2 span { color: var(--violet-vif); }
.mx-compare-lead { margin: 10px 0 0; color: var(--texte); font-size: 19px; line-height: 1.5; }
.mx-cmp { width: 100%; margin: 36px 0 0; border-collapse: collapse; table-layout: fixed; }
.mx-cmp-coin { width: 21%; }
.mx-cmp td.mx-cmp-coin { border-left: 0; }
.mx-cmp thead th { position: relative; padding: 0 28px 26px 38px; text-align: left; vertical-align: top; font-weight: inherit; border-left: 1px solid #e6e3f3; }
.mx-cmp-num { display: block; width: fit-content; padding-bottom: 6px; margin-top: 30px; font-family: var(--titre); font-size: 26px; font-weight: 800; color: var(--c); border-bottom: 3px solid var(--c); line-height: 1; }
.mx-cmp-illus { position: absolute; top: -4px; left: 120px; width: 150px; height: 107px; overflow: visible; }
.il-p { fill: var(--c-pale); }
.il-t { fill: #fff; stroke: #1f2057; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
path.il-t { fill: none; }
rect.il-t, circle.il-t { fill: #fff; }
.il-c { fill: var(--c); }
.il-clair { opacity: .6; }
.il-s { fill: none; stroke: var(--c); stroke-width: 3; stroke-linecap: round; }
.il-w { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
circle.il-w { fill: #fff; stroke: none; }
.mx-cmp-titre { display: block; margin: 50px 0 8px; font-family: var(--titre); font-size: 24px; line-height: 1.15; font-weight: 800; color: var(--encre); }
.mx-cmp-texte { display: block; color: var(--texte); font-size: 15.5px; line-height: 1.55; }
.mx-cmp tbody tr { border-top: 1px solid #e6e3f3; }
.mx-cmp tbody th { padding: 18px 16px 18px 0; text-align: left; font-family: var(--titre); font-size: 17px; line-height: 1.3; font-weight: 800; color: var(--encre); }
.mx-cmp tbody th { display: flex; align-items: center; gap: 16px; }
.mx-cmp-ico { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #efedfb; color: #4c3bcf; }
.mx-cmp-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mx-cmp td { padding: 18px 28px 18px 38px; border-left: 1px solid #e6e3f3; color: var(--texte); font-size: 16px; line-height: 1.5; vertical-align: middle; }
.mx-cmp-note { display: flex; align-items: center; gap: 16px; margin: 22px 0 0; color: var(--texte); font-size: 15.5px; }
.mx-cmp-info { display: grid; place-items: center; width: 30px; height: 30px; padding-right: 16px; box-sizing: content-box; border-right: 1px solid #d9d5ea; color: #6d4aff; font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: 17px; background: radial-gradient(circle at 15px 15px, transparent 12px, #6d4aff 12.5px 14px, transparent 14.5px); }
@media (max-width: 1100px) { .mx-cmp-illus { left: auto; right: 12px; width: 100px; } }
/* Téléphone et tablette : une fiche par méthode, puis les critères avec le nom de la méthode en couleur */
@media (max-width: 900px) {
  .mx-cmp, .mx-cmp thead, .mx-cmp tbody, .mx-cmp tr, .mx-cmp th, .mx-cmp td { display: block; width: auto; }
  .mx-cmp-coin { display: none !important; }
  .mx-cmp thead tr { display: grid; gap: 14px; }
  .mx-cmp thead th { padding: 0 18px 20px; border: 1px solid #e6e3f3; border-top: 4px solid var(--c); border-radius: 16px; background: #fff; }
  .mx-cmp-illus { top: 10px; }
  .mx-cmp-titre { margin-top: 26px; font-size: 21px; }
  .mx-cmp tbody tr { padding: 14px 0; }
  .mx-cmp tbody th { padding: 6px 0 10px; }
  .mx-cmp td { padding: 6px 0 6px 14px; border-left: 3px solid var(--c); margin: 8px 0 0 60px; font-size: 15px; }
  .mx-cmp td::before { content: attr(data-col); display: block; color: var(--c-fonce); font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
}

/* ---------- Hub des modules (modules-concept.html) : une diapo, trois groupes (maquette de Joe, 2026-10-17) ---------- */
.hb-diapo { padding: 128px 0 52px; display: flex; align-items: center; position: relative; overflow: hidden; background: var(--indigo); color: #fff; }
.hb-grille-diapo { width: 100%; display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 56px; align-items: center; }
.hb-intro h1 { margin: 14px 0 14px; font-size: clamp(32px, 3.4vw, 50px); line-height: 1.02; font-weight: 800; letter-spacing: -.035em; color: #fff; }
.hb-intro h1 span { color: #b9acff; }
.hb-lead { margin: 0; color: #d6d9f2; font-size: 16.5px; line-height: 1.6; }
.hb-suggest { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.hb-suggest li { position: relative; padding-left: 0; color: #e4e6fb; font-size: 16px; line-height: 1.5; }
.hb-suggest a, .hb-note a { color: #c9bfff; text-decoration-color: rgba(201, 191, 255, .6); font-weight: 700; text-underline-offset: 4px; }
.hb-intro .cx-actions { margin: 20px 0 0; }
.hb-cta { display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 34px; font-size: 17px; box-shadow: 0 16px 30px -14px rgba(109, 74, 255, .8); }
.hb-cta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.hb-cta:hover svg { transform: translateX(4px); }
.hb-note { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); color: #c9cbe8; font-size: 15px; line-height: 1.6; max-width: 440px; }
.hb-note a { display: block; margin-top: 6px; }
/* Groupes : intitulé en capitales violettes suivi d'un trait */
.hb-groupe { display: flex; align-items: center; gap: 22px; margin: 12px 0 0; font-family: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #b9acff; }
.hb-groupe:first-child { margin-top: 0; }
.hb-groupe::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(185, 172, 255, .7), rgba(185, 172, 255, .1)); }
.hb-liste { list-style: none; padding: 0; margin: 0; }
.hb-liste li + li { border-top: 1px solid rgba(255, 255, 255, .1); }
.hb-ligne { display: grid; grid-template-columns: 42px minmax(0, 1fr) 112px 28px; align-items: center; gap: 16px; padding: 5px 4px; border-radius: 12px; color: inherit; text-decoration: none; transition: background .2s ease; }
.hb-ligne:hover { background: rgba(255, 255, 255, .06); }
.hb-ligne:focus-visible { outline: 3px solid var(--m); outline-offset: 2px; }
/* Pastilles des modules : celles de l'accueil (« Découvrez chaque module »), en plus grand */
.hb-diapo::after { content: ''; position: absolute; right: -180px; top: -160px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(109, 74, 255, .35), transparent 70%); pointer-events: none; }
.hb-grille-diapo { position: relative; z-index: 1; }
.hb-diapo .cx-eyebrow { color: #c9c3f5; }
.hb-ligne .hb-ico { width: 42px; height: 42px; border-radius: 50%; }
.hb-ligne .hb-ico svg { width: 21px; height: 21px; }
.hb-nom strong { display: block; font-family: var(--titre); font-size: 18px; line-height: 1.25; font-weight: 800; color: #fff; }
.hb-nom span { display: block; margin-top: 1px; color: #c9cbe8; font-size: 14px; line-height: 1.4; }
/* Étiquettes de formule, façon badges de l'app (Payé, Actif) : fond pâle, liseré et texte de couleur, icône */
.hb-formule { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 8px; border-radius: 8px; border: 1px solid; font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.hb-formule svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hb-formule--classique { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.hb-formule--premium { background: #fffbeb; border-color: #fcd34d; color: #b45309; }
/* Hub des automatisations : pastille et étiquette à la couleur de la page de chaque automatisation */
.hb-ico--m { background: var(--m-pale); color: var(--m-fonce); }
.hb-ligne .hb-ico svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hb-formule--m { justify-content: center; min-width: 112px; padding-left: 11px; background: var(--m-pale); border-color: color-mix(in srgb, var(--m) 55%, #fff); color: var(--m-fonce); }
.hb-fleche svg { display: block; width: 24px; height: 24px; fill: none; stroke: #b9acff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.hb-ligne:hover .hb-fleche svg { transform: translateX(4px); }
@media (prefers-reduced-motion: no-preference) {
  .hb-intro > *, .hb-modules-col > * { animation: cx-monte .6s cubic-bezier(.2, .8, .2, 1) both; }
  .hb-modules-col > :nth-child(1) { animation-delay: 0.05s; }
  .hb-modules-col > :nth-child(2) { animation-delay: 0.10s; }
  .hb-modules-col > :nth-child(3) { animation-delay: 0.15s; }
  .hb-modules-col > :nth-child(4) { animation-delay: 0.20s; }
  .hb-modules-col > :nth-child(5) { animation-delay: 0.25s; }
  .hb-modules-col > :nth-child(6) { animation-delay: 0.30s; }
}
@media (max-width: 1100px) { .hb-grille-diapo { grid-template-columns: minmax(0, 1fr); gap: 40px; } .hb-diapo { min-height: 0; } }
@media (max-width: 640px) {
  .hb-ligne { grid-template-columns: 46px minmax(0, 1fr) 22px; gap: 14px; }
  .hb-ico { width: 46px; height: 46px; }
  .hb-formule { grid-column: 2; grid-row: 2; justify-self: start; min-width: 0; padding: 3px 10px; font-size: 11px; }
  .hb-fleche { grid-column: 3; grid-row: 1 / 3; }
  .hb-nom strong { font-size: 18px; }
}

@media (max-width: 1024px) {
  .mx-compare-grille { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ap-trio { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ap-mobile-grille { grid-template-columns: minmax(0, 1fr); }
  .ap-tels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-templates-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .ap-tels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ap-tel:nth-child(even) { margin-top: 0; }
  .ap-tel-ecran { height: 420px; }
  .ap-mobile { padding: 56px 0; }
}

/* ---------- Plan comptable (plan-comptable-association-concept.html) : un explorateur en deux colonnes ---------- */
.pc .cat-bilan { --c: #6d4aff; --c-fonce: #4c3bcf; --c-pale: #ede9fe; }
.pc .cat-treso { --c: #0ea5e9; --c-fonce: #0369a1; --c-pale: #e0f2fe; }
.pc .cat-resultat { --c: #10b981; --c-fonce: #047857; --c-pale: #d1fae5; }
.pc .cat-classe8 { --c: #f59e0b; --c-fonce: #b45309; --c-pale: #fef3c7; }
/* Haut de page court */
.pc-hero { padding: 120px 0 56px; }
.pc-hero .hb-intro h1 { font-size: clamp(32px, 3.4vw, 50px); }
.pc-natures { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pc-nature { width: 100%; display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 16px 18px; border: 0; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 30%, #1f2057), color-mix(in srgb, var(--c) 12%, #1f2057)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 18px 30px -20px color-mix(in srgb, var(--c) 80%, transparent); color: #fff; font: inherit; text-align: left; cursor: pointer; transition: transform .2s ease; }
.pc-nature:hover { transform: translateY(-3px); }
.pc-nature:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.pc-nature-num { grid-row: 1 / 3; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--c); color: #fff; font-family: var(--titre); font-size: 19px; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.pc-nature strong { font-family: var(--titre); font-size: 18px; font-weight: 800; }
.pc-nature small { color: #d6d9f2; font-size: 14px; }
/* Explorateur sur fond lavande */
.pc-explorateur { padding: 64px 0 80px; background: linear-gradient(180deg, #ede8fd 0%, #f6f4fe 100%); }
.pc-barre h2 { margin: 0; font-size: clamp(28px, 3vw, 42px); font-weight: 800; letter-spacing: -.02em; color: var(--encre); }
.pc-barre h2 span { color: var(--violet-vif); }
.pc-barre p { max-width: 780px; margin: 10px 0 0; color: var(--texte); font-size: 16.5px; line-height: 1.55; }
.pc-recherche { position: relative; margin: 26px 0 0; }
.pc-recherche svg { position: absolute; left: 22px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); fill: none; stroke: #6d4aff; stroke-width: 2.2; stroke-linecap: round; }
.pc-recherche input { width: 100%; min-height: 62px; padding: 0 24px 0 58px; border: 2px solid #c4b5fd; border-radius: 999px; background: #fff; color: var(--encre); font: inherit; font-size: 17px; box-shadow: 0 18px 36px -24px rgba(76, 59, 207, .7); }
.pc-recherche input:focus { outline: none; border-color: #6d4aff; box-shadow: 0 0 0 5px rgba(109, 74, 255, .18); }
.pc-exemples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0 8px; color: var(--texte); font-size: 14px; }
.pc-exemples span { margin-right: 6px; }
.pc-exemples button { padding: 5px 12px; border: 1px solid #c4b5fd; border-radius: 999px; background: #fff; color: #4c3bcf; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.pc-exemples button:hover { background: #6d4aff; border-color: #6d4aff; color: #fff; }
.pc-grille { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 28px; }
/* Colonne des classes, sur indigo */
.pc-classes { position: sticky; top: 100px; display: grid; gap: 4px; padding: 12px; border-radius: 20px; background: var(--indigo); box-shadow: 0 30px 50px -30px rgba(31, 32, 87, .8); }
.pc-classe { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 12px; background: none; color: #e4e6fb; font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer; transition: background .2s ease; }
.pc-classe:hover { background: rgba(255, 255, 255, .07); }
.pc-classe:focus-visible { outline: 2px solid #b9acff; outline-offset: 1px; }
.pc-classe.is-active { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 4px 0 0 var(--c); }
.pc-classe.is-vide { opacity: .35; }
.pc-classe-num { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--c); color: #fff; font-family: var(--titre); font-size: 17px; font-weight: 800; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.pc-classe-nb { min-width: 28px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #c9c3f5; font-size: 12.5px; font-weight: 700; text-align: center; }
/* La classe choisie : bandeau de couleur puis lignes compactes */
.pc-panneau { border-radius: 20px; background: #fff; overflow: hidden; box-shadow: 0 30px 60px -34px rgba(31, 32, 87, .55), 0 0 0 1px #e4dffb; }
.pc-tete { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 20px 24px; background: linear-gradient(135deg, var(--c, #6d4aff), var(--c-fonce, #4c3bcf)); color: #fff; }
.pc-panneau--recherche .pc-tete { background: linear-gradient(135deg, #6d4aff, #4c3bcf); }
.pc-tete-num { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(255, 255, 255, .2); font-family: var(--titre); font-size: 26px; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.pc-tete-num svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.pc-tete h3 { margin: 0; font-family: var(--titre); font-size: 21px; font-weight: 800; color: #fff; }
.pc-tete p { margin: 3px 0 0; color: rgba(255, 255, 255, .88); font-size: 15px; line-height: 1.45; }
.pc-tete-nb { padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .2); font-size: 13px; font-weight: 700; white-space: nowrap; }
.pc-liste { list-style: none; padding: 0; margin: 0; }
.pc-compte { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 16px; padding: 14px 24px; border-top: 1px solid #efedf8; }
.pc-compte:nth-child(even) { background: #faf9ff; }
.pc-n { align-self: start; padding: 5px 0; border-radius: 9px; background: var(--c-pale); color: var(--c-fonce); font-family: var(--titre); font-size: 15px; font-weight: 800; text-align: center; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.pc-corps p { margin: 0; }
.pc-nom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pc-nom strong { font-family: var(--titre); font-size: 16.5px; font-weight: 800; color: var(--encre); }
.pc-sens, .pc-origine { padding: 1px 8px; border-radius: 7px; border: 1px solid; font-size: 12px; font-weight: 600; }
.pc-sens.actif { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.pc-sens.passif { background: #f5f3ff; border-color: #c4b5fd; color: #6d28d9; }
.pc-sens.charge { background: #fff1f2; border-color: #fda4af; color: #be123c; }
.pc-sens.produit { background: #f0fdf4; border-color: #86efac; color: #15803d; }
.pc-origine { background: var(--c-pale); border-color: color-mix(in srgb, var(--c) 50%, #fff); color: var(--c-fonce); }
.pc-corps .pc-desc { margin-top: 4px; color: var(--texte); font-size: 15px; line-height: 1.5; }
.pc-corps .pc-ex { margin-top: 6px; color: #5b6078; font-size: 14px; line-height: 1.5; }
.pc-ex b { margin-right: 6px; padding: 1px 7px; border-radius: 6px; background: var(--c-pale); color: var(--c-fonce); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.pc-lien { display: inline-block; margin-top: 6px; color: var(--violet-vif); font-size: 14px; font-weight: 700; text-decoration: none; }
.pc-lien:hover { text-decoration: underline; }
.pc mark { background: #fde68a; color: inherit; border-radius: 3px; padding: 0 2px; }
.pc-sources { margin-top: 40px; padding-top: 24px; border-top: 1px solid #e6e3f3; color: var(--texte); font-size: 14.5px; line-height: 1.6; }
.pc-sources h3 { margin: 0 0 10px; font-size: 16px; color: var(--encre); }
.pc-sources ul { margin: 0 0 14px; padding-left: 18px; }
.pc-sources a { color: var(--violet-vif); font-weight: 600; }
@media (max-width: 900px) {
  .pc-grille { grid-template-columns: minmax(0, 1fr); }
  .pc-classes { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-classe { grid-template-columns: 32px minmax(0, 1fr); font-size: 13px; }
  .pc-classe-num { width: 32px; height: 32px; font-size: 15px; }
  .pc-classe-nb { display: none; }
}
@media (max-width: 640px) {
  .pc-natures { grid-template-columns: minmax(0, 1fr); }
  .pc-tete { grid-template-columns: 44px minmax(0, 1fr); padding: 16px; }
  .pc-tete-num { width: 44px; height: 44px; font-size: 20px; }
  .pc-tete-nb { display: none; }
  .pc-compte { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 12px 16px; }
}

/* ---------- Pages légales (cgu, cgv, politique-confidentialite -concept.html) ---------- */
.lg-hero { padding: 124px 0 48px; }
.lg-hero > .cx-wrap { width: 100%; }
.lg-hero h1 { margin: 14px 0 12px; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.05; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.lg-hero .hb-lead { max-width: 720px; }
.lg-maj { display: inline-block; margin: 18px 0 0; padding: 5px 12px; border-radius: 8px; background: rgba(255, 255, 255, .1); color: #d6d9f2; font-size: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.lg-corps { padding: 56px 0 80px; background: linear-gradient(180deg, #ede8fd 0%, #f6f4fe 100%); }
.lg-grille { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; }
.lg-sommaire { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; padding: 20px; border-radius: 20px; background: var(--indigo); box-shadow: 0 30px 50px -30px rgba(31, 32, 87, .8); scrollbar-width: thin; }
.lg-sommaire-titre { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #b9acff; }
.lg-sommaire-titre--autres { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); }
.lg-sommaire ol, .lg-sommaire ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.lg-sommaire a { display: block; padding: 6px 10px; border-radius: 9px; color: #e4e6fb; font-size: 14px; line-height: 1.35; text-decoration: none; transition: background .2s ease; }
.lg-sommaire a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.lg-texte { padding: 40px 48px; border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -34px rgba(31, 32, 87, .55), 0 0 0 1px #e4dffb; color: var(--texte); font-size: 16px; line-height: 1.7; }
.lg-texte h3 { scroll-margin-top: 24px; margin: 36px 0 12px; padding-top: 28px; border-top: 1px solid #efedf8; font-family: var(--titre); font-size: 21px; font-weight: 800; color: var(--encre); }
.lg-texte h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.lg-texte p, .lg-texte ul, .lg-texte ol { margin: 0 0 14px; }
.lg-texte ul, .lg-texte ol { padding-left: 22px; }
.lg-texte li { margin-bottom: 6px; }
.lg-texte strong { color: var(--encre); }
.lg-texte a { color: var(--violet-vif); font-weight: 600; }
.lg-texte table { width: 100%; margin: 0 0 16px; border-collapse: collapse; font-size: 14.5px; }
.lg-texte th, .lg-texte td { padding: 8px 10px; border: 1px solid #e6e3f3; text-align: left; vertical-align: top; }
.lg-texte th { background: #f5f3ff; color: var(--encre); }
@media (max-width: 900px) {
  .lg-grille { grid-template-columns: minmax(0, 1fr); }
  .lg-sommaire { position: static; max-height: none; }
  .lg-texte { padding: 28px 20px; }
  .lg-texte table { display: block; overflow-x: auto; }
}

/* ---------- Mouvement ---------- */
@media (prefers-reduced-motion: no-preference) {
  .mx-hero-texte > * { animation: cx-monte .7s cubic-bezier(.2, .8, .2, 1) both; }
  .mx-hero-texte > :nth-child(2) { animation-delay: .1s; }
  .mx-hero-texte > :nth-child(3) { animation-delay: .2s; }
  .mx-hero-texte > :nth-child(4) { animation-delay: .3s; }
  .mx-hero-texte > :nth-child(5) { animation-delay: .4s; }
  .mx-carrousel { animation: cx-monte .8s cubic-bezier(.2, .8, .2, 1) .3s both; }
  .mx-deco--violet, .mx-deco--vert { animation: cx-ondule 7s ease-in-out infinite; transform-origin: 50% 100%; }
  .mx-deco--fleur { animation: cx-pousse 1.1s cubic-bezier(.2, .8, .2, 1) 1s both, cx-ondule 5s ease-in-out 2.1s infinite; }
  .mx-programme { animation: cx-monte .6s cubic-bezier(.2, .8, .2, 1) .5s both; }
  .mx-piste { transition: transform .65s cubic-bezier(.65, 0, .35, 1); }
  .mx-capture::before { animation: cx-ondule 7s ease-in-out infinite; transform-origin: 50% 100%; }
  .cx-motion .mx-partie h2 span::after { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.6, 0, .2, 1) .45s; }
  .cx-motion .mx-partie.is-vue h2 span::after { clip-path: inset(0 0 0 0); }
  .mx-constel .lien { animation: cx-flux 2.6s linear infinite; }
  .mx-constel .halo { transform-box: fill-box; transform-origin: center; animation: mx-pulse 3.2s ease-out var(--p) infinite; }
  .cx-motion .mx-constel .lien { opacity: 0; transition: opacity .8s ease calc(.5s + var(--d)); }
  .cx-motion .mx-partie.is-vue .mx-constel .lien { opacity: .6; }
  .cx-motion .mx-constel .noeud { transform-box: fill-box; transform-origin: center; scale: 0; transition: scale .55s cubic-bezier(.3, 1.6, .5, 1) calc(.2s + var(--d)); }
  .cx-motion .mx-partie.is-vue .mx-constel .noeud { scale: 1; }
  .mx-partie:nth-child(8n+4) .mx-capture::after { animation: cx-ondule 6.5s ease-in-out 1s infinite; }
  .mx-partie:first-child::after { animation: cx-ondule 6s ease-in-out infinite; }
  .mx-deco--droite { animation: cx-ondule 8s ease-in-out infinite; transform-origin: 30% 100%; }
  .mx-zoom-btn img { transition: transform .4s ease; }
  .mx-zoom-btn:hover img { transform: scale(1.015); }
}
@keyframes mx-pulse { 0% { scale: 1; opacity: .45; } 100% { scale: 2.4; opacity: 0; } }
@keyframes mx-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes mx-glisse { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* ---------- Tablette ---------- */
@media (max-width: 1024px) {
  .mx-hero-grille { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .mx-carrousel { max-width: 680px; }
  .mx-partie-grille { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .mx-partie:nth-child(even) .mx-texte { order: 0; }
  .mx-capture { max-width: 680px; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 600px) {
  .mx-hero { padding: 104px 0 36px; }
  .mx-lead { font-size: 16px; }
  .mx-hero .cx-actions .cx-btn { flex: 1 1 100%; }
  .mx-deco--violet { width: 120px; left: -40px; top: -40px; }
  .mx-deco--vert { width: 110px; right: -36px; top: -56px; }
  .mx-deco--droite { width: 100px; right: -30px; top: 40px; }
  .mx-deco--fleur { width: 44px; right: -8px; bottom: 90px; }
  .mx-legende { padding: 0; white-space: normal; height: 3.1em; }
  .mx-fleche { width: 44px; height: 44px; }
  .mx-programme { margin-top: 28px; }
  .mx-partie { padding: 56px 0; }
  .mx-capture::before { width: 130px; height: 170px; right: -20px; top: -60px; opacity: .6; }
  .mx-partie:nth-child(even) .mx-capture::before { left: -20px; }
  .mx-partie:nth-child(8n+4) .mx-capture::after { width: 80px; height: 110px; left: -24px; opacity: .6; }
  .mx-partie:first-child::after { width: 90px; height: 90px; bottom: -26px; left: -22px; }
  .mx-partie h2 span::after { bottom: -9px; height: 11px; }
}

/* Boutons plus discrets (Joe, 2026-10-18) */
.mx-hero .cx-btn { min-height: 46px; padding: 0 28px; font-size: 15px; }
.mx-lien { gap: 6px; margin-top: 18px; padding: 7px 14px; font-size: 13.5px; }
.hb-cta { gap: 10px; min-height: 46px; padding: 0 26px; font-size: 15px; }

/* ---------- Page Tarifs (gen_tarifs.py) : parties alternées lavande / indigo ---------- */
.tf-hero h1 span { display: block; color: #b9acff; }
.tf-sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tf-sommaire a { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); color: #e4e6fb; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.tf-sommaire a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.tf-partie { position: relative; padding: 64px 0; background: linear-gradient(180deg, #f6f4fe 0%, #ede8fd 100%); scroll-margin-top: 90px; }
.tf-partie h2 { max-width: none; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.08; letter-spacing: -.03em; }
.tf-partie h2 span { color: var(--violet-vif); }
.tf-lead { max-width: 760px; margin: 12px 0 0; color: var(--texte); font-size: 16.5px; line-height: 1.6; }
.tf-partie--sombre { background: radial-gradient(circle at 92% 8%, rgba(109, 74, 255, .32), transparent 42%), var(--indigo); color: #fff; }
.tf-partie--sombre h2 { color: #fff; }
.tf-partie--sombre h2 span { color: #b9acff; }
.tf-partie--sombre .cx-eyebrow { color: #b9acff; }
.tf-partie--sombre .tf-lead { color: #d6d9f2; }

/* Formules (maquette de Joe, 2026-10-18) : trois colonnes à filets, une couleur par formule (--o) */
.tf-formules-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px 40px; }
.tf-formules .cx-eyebrow { color: var(--violet-vif); text-transform: uppercase; letter-spacing: .14em; font-size: 12.5px; }
.tf-formules .tf-lead { color: var(--encre); font-size: 17px; }
.tf-periode { margin: 34px 0 0; gap: 4px; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid #d9d0fb; box-shadow: 0 8px 20px -14px rgba(31, 32, 87, .4); }
.tf-periode button { border: 0; border-radius: 999px; padding: 7px 20px; font-size: 14px; }
.tf-periode button[aria-pressed="true"] { background: var(--violet-vif); color: #fff; }
.tf-garanties { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 0; margin: 16px 0 0; color: var(--texte); font-size: 13.5px; }
.tf-garanties li { display: inline-flex; align-items: center; gap: 8px; }
.tf-garanties li + li::before { content: ""; width: 4px; height: 4px; margin-right: 6px; border-radius: 50%; background: #c4b5fd; }
.tf-garanties .tf-coche { stroke: #10b981; }
.tf-coche { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--o, #10b981); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.tf-offres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; }
.tf-offre { min-width: 0; padding: 4px 32px 0; border-left: 1px solid #d9d0fb; }
.tf-offre:first-child { padding-left: 0; border-left: 0; }
.tf-offre-tete { display: flex; align-items: center; gap: 16px; }
.tf-offre-tete .tf-ico { width: 38px; height: 38px; stroke: var(--o); stroke-width: 1.7; }
.tf-offre h3 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.tf-offre-tag { color: var(--o); font-size: 14px; font-weight: 600; }
.tf-offre-cible { margin: 14px 0 0; min-height: 3.1em; color: var(--texte); font-size: 15px; line-height: 1.55; }
.tf-prix { display: flex; align-items: flex-start; margin: 16px 0 0; color: var(--indigo); line-height: 1; }
.tf-prix .cx-montant { font-size: 76px; }
.tf-prix .cx-euro { font-size: 34px; margin: 0 0 0 8px; }
.tf-prix .cx-unite { font-size: 22px; margin-left: 10px; }
.tf-devis { font-family: var(--titre); font-size: 52px; font-weight: 800; letter-spacing: -.03em; line-height: 1.32; }
.tf-alt { margin: 8px 0 0; color: var(--texte); font-size: 14.5px; }
.tf-offre-palier { margin: 4px 0 0; color: var(--texte); font-size: 13px; }
.tf-offre ul { list-style: none; display: grid; gap: 9px; margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid #d9d0fb; }
.tf-offre li { display: flex; align-items: flex-start; gap: 12px; color: var(--encre); font-size: 14.5px; line-height: 1.4; }
.tf-offre li a { color: inherit; text-decoration: none; }
.tf-offre li a:hover { color: var(--o); text-decoration: underline; }
.tf-offres-pied { display: grid; grid-template-columns: 2fr 1fr; align-items: start; margin-top: 30px; }
.tf-essai { text-align: center; padding-right: 32px; }
.tf-essai .cx-btn { min-width: min(420px, 100%); gap: 10px; }
.tf-essai p { margin: 10px 0 0; color: var(--texte); font-size: 13px; }
.tf-devis-lien { justify-self: start; margin: 10px 0 0 32px; padding-bottom: 3px; border-bottom: 2px solid currentColor; color: #2563eb; font-size: 15px; font-weight: 700; text-decoration: none; }
.tf-devis-lien:hover { color: #1d4ed8; }

/* FAQ : tableau comparatif dans une réponse */
.tf-faq .faq-tableau { margin: 4px 24px 12px; overflow-x: auto; }
.tf-faq table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tf-faq th, .tf-faq td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--bord); }
.tf-faq th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--texte); }
.tf-faq td.nombre { text-align: right; white-space: nowrap; }
.tf-faq tr.nous td { background: #f1edff; }
.tf-faq .faq-methode { font-size: 13.5px; }
.tf-final-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 18px; }

@media (max-width: 1024px) {
  .tf-offres { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .tf-offre { padding: 26px 0 0; margin-top: 26px; border-left: 0; border-top: 1px solid #d9d0fb; }
  .tf-offre:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  .tf-offre-cible { min-height: 0; }
  .tf-offres-pied { grid-template-columns: minmax(0, 1fr); max-width: 560px; row-gap: 18px; }
  .tf-essai { padding-right: 0; }
  .tf-devis-lien { justify-self: center; margin-left: 0; }
}
@media (max-width: 600px) {
  .tf-partie { padding: 48px 0; }
  .tf-periode { margin-top: 0; }
  .tf-prix .cx-montant { font-size: 64px; }
  .tf-faq .faq-tableau { margin: 4px 0 12px; }
}

/* Tarifs : parties Adhérents, Courriels, Documents (maquettes de Joe, 2026-10-18) — colonnes à filets, encarts à icône */
.tf-bloc { --acc: color-mix(in srgb, var(--c) 82%, #000); --trait: #d9d0fb; --ico: #10b981; --doux: var(--texte); --fort: var(--indigo); }
.tf-bloc.tf-partie--sombre { --acc: color-mix(in srgb, var(--c) 72%, #fff); --trait: rgba(167, 139, 250, .42); --ico: #5eead4; --doux: #c9cbe8; --fort: #fff; }
.tf-bloc h2 span, .tf-bloc.tf-partie--sombre h2 span, .tf-bloc.tf-partie--sombre .cx-eyebrow { color: var(--acc); }
.tf-bloc:not(.tf-partie--sombre) .cx-eyebrow { color: var(--violet-vif); }
.tf-ico { flex: 0 0 auto; width: 28px; height: 28px; fill: none; stroke: var(--ico); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tf-lead-petit { margin: 8px 0 0; color: var(--doux); font-size: 14.5px; line-height: 1.55; }
.tf-inclus { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; color: var(--fort); font-size: 17px; font-weight: 700; }
.tf-inclus .tf-ico { width: 34px; height: 34px; }

.tf-cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin-top: 40px; }
.tf-cols--frise { margin-top: 14px; }
.tf-col { min-width: 0; padding: 0 32px; border-left: 1px solid var(--trait); }
.tf-col:first-child { padding-left: 0; border-left: 0; }
.tf-col-tag { display: flex; align-items: center; gap: 14px; margin: 0; min-height: 32px; color: var(--violet-vif); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tf-col-tag i { font-style: normal; margin: 0 4px; }
.tf-partie--sombre .tf-col-tag { color: var(--doux); letter-spacing: .2em; }
.tf-col-nom { display: flex; align-items: center; flex-wrap: wrap; gap: 0 14px; margin: 0; color: var(--fort); font-size: 18px; }
/* « Recommandé » passe sous le nom quand la colonne est trop étroite : il débordait de 20 px à
   1280 et 1440 px (audit responsive 2026-10-18, choix de Joe, option A). */
.tf-col-nom em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--ico); }
.tf-grand { margin: 18px 0 0; color: var(--fort); line-height: .95; }
.tf-grand b { font-family: var(--titre); font-size: clamp(46px, 4.6vw, 72px); font-weight: 800; letter-spacing: -.04em; }
.tf-grand small { margin-left: 6px; color: var(--doux); font-size: 22px; font-weight: 500; }
.tf-grand-unite { margin: 6px 0 0; color: var(--fort); font-family: var(--titre); font-size: clamp(24px, 2.3vw, 34px); font-weight: 800; letter-spacing: -.02em; }
.tf-col-prix { margin: 14px 0 0; color: var(--acc); font-size: 22px; font-weight: 700; }
.tf-partie--sombre .tf-col-prix { color: var(--doux); font-weight: 500; }
.tf-col-prix b { color: var(--acc); font-weight: 800; }
.tf-barre { display: block; width: 56px; height: 3px; margin: 22px 0 0; border-radius: 2px; background: var(--acc); }
.tf-ligne { display: block; height: 1px; margin: 18px 0 0; background: var(--trait); }
.tf-col-desc { margin: 16px 0 0; color: var(--doux); font-size: 15.5px; line-height: 1.55; }

.tf-frise { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin-top: 26px; background: linear-gradient(var(--acc), var(--acc)) center / 100% 2px no-repeat; }
.tf-frise span { justify-self: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--acc); background: radial-gradient(circle, var(--acc) 0 3px, var(--indigo) 3.5px); }

.tf-infos { display: grid; grid-template-columns: 1fr 1fr; margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--trait); }
.tf-info { display: flex; align-items: flex-start; gap: 24px; padding-right: 32px; }
.tf-info + .tf-info { padding: 0 0 0 32px; border-left: 1px solid var(--trait); }
.tf-info .tf-ico { width: 44px; height: 44px; stroke-width: 1.6; }
.tf-infos--sep .tf-info + .tf-info { border-left: 0; }
.tf-infos--sep .tf-info > div { padding-left: 24px; border-left: 1px solid var(--trait); }
.tf-info h3 { margin: 0; color: var(--fort); font-size: 19px; font-weight: 700; }
.tf-info p { margin: 6px 0 0; color: var(--doux); font-size: 15.5px; line-height: 1.6; }

.tf-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 32px 0 0; padding: 6px 0 6px 28px; border-left: 3px solid var(--acc); color: var(--doux); font-size: 15.5px; }
.tf-pied--ligne { position: relative; margin-top: 28px; }
.tf-pied--ligne::before { content: ""; position: absolute; left: -3px; right: 0; top: -14px; height: 1px; background: var(--trait); }
.tf-pied .tf-ico { width: 30px; height: 30px; stroke: var(--violet-vif); }
.tf-partie--sombre .tf-pied .tf-ico { stroke: var(--doux); }
.tf-pied strong { color: var(--fort); font-size: 17px; }
.tf-pied a { color: var(--acc); font-weight: 700; }
.tf-partie--sombre .tf-pied a { color: #c4b5fd; }

@media (max-width: 1024px) {
  .tf-bloc .tf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .tf-bloc .tf-col:nth-child(odd) { padding-left: 0; border-left: 0; }
  .tf-frise { display: none; }
  .tf-cols--frise { margin-top: 32px; }
}
@media (max-width: 600px) {
  .tf-bloc .tf-cols { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .tf-bloc .tf-col { padding: 22px 0; border-left: 0; border-top: 1px solid var(--trait); }
  .tf-bloc .tf-col:first-child { padding-top: 0; border-top: 0; }
  .tf-infos { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .tf-info, .tf-info + .tf-info { padding: 0; border-left: 0; }
  .tf-info { gap: 16px; }
  .tf-info .tf-ico { width: 36px; height: 36px; }
  .tf-infos--sep .tf-info > div { padding-left: 16px; }
  .tf-pied { padding-left: 18px; }
}
.tf-bloc .tf-lead { max-width: none; }
.tf-offre-tag { white-space: nowrap; }
@media (max-width: 1024px) { .tf-offre-palier[aria-hidden] { display: none; } }
@media (max-width: 600px) {
  .tf-garanties { flex-direction: column; align-items: flex-start; }
  .tf-garanties li + li::before { display: none; }
  .tf-devis { font-size: 44px; }
}
/* Séparations entre formules plus marquées (Joe, 2026-10-18) */
.tf-offre { border-left: 2px solid #b8a9f5; }
.tf-offre:first-child { border-left: 0; }
.tf-offre ul { border-top-color: #c9bdf7; }
@media (max-width: 1024px) {
  .tf-offre { border-left: 0; border-top: 2px solid #b8a9f5; }
  .tf-offre:first-child { border-top: 0; }
}

/* ---------- Hub du blog (gen_blog.py, maquette de Joe 2026-10-18) ---------- */
.bg-hero { padding: 124px 0 44px; }
.bg-hero > .cx-wrap { position: relative; z-index: 1; width: 100%; }
.bg-surtitre { margin: 0; color: #5eead4; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.bg-surtitre--vert { color: #0d9488; }
.bg-hero h1 { max-width: 760px; margin: 12px 0 12px; color: #fff; font-size: clamp(34px, 4vw, 56px); font-weight: 800; line-height: 1.04; letter-spacing: -.03em; }
.bg-hero h1 span { display: block; color: #b9acff; }
.bg-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bg-recherche { position: relative; display: flex; max-width: 640px; margin: 24px 0 0; padding: 6px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); }
.bg-recherche > svg { position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: #c9cbe8; stroke-width: 2.2; stroke-linecap: round; }
.bg-recherche input { flex: 1; min-width: 0; height: 44px; padding: 0 14px 0 46px; border: 0; background: none; color: #fff; font: 500 15px 'Plus Jakarta Sans', system-ui, sans-serif; }
.bg-recherche input::placeholder { color: #a9acd0; }
.bg-recherche input:focus { outline: none; }
.bg-recherche:focus-within { border-color: #b9acff; }
.bg-recherche button { flex: 0 0 auto; padding: 0 20px; border: 0; border-radius: 10px; background: var(--violet-vif); color: #fff; font: 700 14px 'Plus Jakarta Sans', system-ui, sans-serif; cursor: pointer; }
.bg-recherche button:hover { background: var(--violet); }

.bg-corps { padding: 0 0 64px; background: linear-gradient(180deg, #f6f4fe 0%, #ede8fd 100%); }
.bg-onglets { display: flex; flex-wrap: wrap; gap: 4px 30px; border-bottom: 1px solid #d9d0fb; }
.bg-onglets button { margin-bottom: -1px; padding: 18px 2px 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--texte); font: 600 14.5px 'Plus Jakarta Sans', system-ui, sans-serif; cursor: pointer; }
.bg-onglets button:hover { color: var(--indigo); }
.bg-onglets button[aria-pressed="true"] { color: var(--violet-vif); font-weight: 700; border-bottom-color: var(--violet-vif); }
.bg-onglets button:focus-visible { outline: 3px solid #b9acff; outline-offset: 2px; border-radius: 4px; }

.bg-une { padding: 30px 0 36px; border-bottom: 1px solid #d9d0fb; }
.bg-une[hidden] { display: none; }
.bg-une-carte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 14px; }
.bg-une-visuel { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 14px; background: radial-gradient(circle at 25% 20%, #fff 0, transparent 55%), linear-gradient(135deg, var(--c-pale), #e4defc); border: 1px solid #e2dcfb; overflow: hidden; }
.bg-une-visuel .bg-illus { width: 62%; height: auto; }
.bg-cat { margin: 0; color: var(--c-fonce); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.bg-une h2 { margin: 10px 0 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; line-height: 1.18; letter-spacing: -.02em; }
.bg-une h2 a, .bg-ligne h3 a { color: var(--encre); text-decoration: none; }
.bg-une h2 a:hover, .bg-ligne h3 a:hover { color: var(--c-fonce); }
.bg-resume { margin: 12px 0 0; color: var(--texte); font-size: 15.5px; line-height: 1.6; }
.bg-lire { display: inline-flex; gap: 8px; margin-top: 18px; color: var(--violet-vif); font-size: 15px; font-weight: 700; text-decoration: none; }
.bg-lire:hover span { translate: 3px 0; }
.bg-lire span { transition: translate .2s ease; }

.bg-derniers { padding-top: 34px; }
.bg-derniers h2 { margin: 0; font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.02em; }
.bg-compte { margin: 8px 0 0; color: var(--texte); font-size: 14px; font-weight: 600; }
.bg-compte:empty { display: none; }
.bg-lignes { list-style: none; margin: 18px 0 0; padding: 0; }
.bg-ligne { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr) 40px; gap: 28px; align-items: center; padding: 20px 0; border-bottom: 1px solid #d9d0fb; }
.bg-ligne[hidden] { display: none; }
.bg-vignette { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 10px; background: radial-gradient(circle at 25% 20%, #fff 0, transparent 60%), linear-gradient(135deg, var(--c-pale), #ece8fd); border: 1px solid #e2dcfb; }
.bg-vignette .bg-illus { width: 70%; height: auto; }
.bg-ligne h3 { margin: 6px 0 0; font-size: 19px; font-weight: 800; line-height: 1.3; }
.bg-ligne .bg-resume { margin-top: 6px; font-size: 14.5px; line-height: 1.55; }
.bg-meta { margin: 6px 0 0; color: #7a7f9f; font-size: 13px; }
.bg-fleche { justify-self: end; color: var(--violet-vif); font-size: 22px; text-decoration: none; transition: translate .2s ease; }
.bg-ligne:hover .bg-fleche { translate: 4px 0; }
.bg-ligne h3 a::after { content: ""; position: absolute; inset: 0; }
.bg-vide { margin: 26px 0 0; color: var(--texte); font-size: 16px; text-align: center; }
.bg-plus { display: flex; align-items: center; gap: 8px; margin: 24px auto 0; padding: 8px 6px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--violet-vif); font: 700 14.5px 'Plus Jakarta Sans', system-ui, sans-serif; cursor: pointer; }
.bg-plus:hover { border-bottom-color: currentColor; }
.bg-plus[hidden] { display: none; }

@media (max-width: 1024px) {
  .bg-une-carte { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .bg-ligne { grid-template-columns: 150px minmax(0, 1fr) 24px; gap: 18px; }
}
@media (max-width: 600px) {
  .bg-hero { padding: 108px 0 32px; }
  .bg-recherche button { padding: 0 14px; }
  .bg-onglets { gap: 0 18px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bg-onglets button { white-space: nowrap; }
  .bg-ligne { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; }
  .bg-fleche { display: none; }
  .bg-ligne h3 { margin-top: 4px; font-size: 16.5px; }
  .bg-ligne .bg-resume { display: none; }
}
path.il-t.il-plein { fill: #fff; }
/* Hub du blog : décor du haut de page (remplace le colibri au trait) */
.bg-deco { position: absolute; top: 0; right: max(0px, calc(50% - 700px)); width: 520px; height: 100%; pointer-events: none; }
.bg-deco img { position: absolute; height: auto; }
.bg-deco-constel { right: 330px; top: 90px; width: 150px; opacity: .55; }
.bg-deco-branche { right: 40px; top: 70px; width: 210px; rotate: 28deg; opacity: .7; }
.bg-deco-eventail { right: 150px; bottom: -40px; width: 260px; opacity: .9; }
.bg-deco-colibri { right: 120px; top: 108px; width: 118px; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .35)); }
@media (max-width: 1100px) { .bg-deco { width: 360px; right: -60px; opacity: .45; } }
@media (max-width: 600px) { .bg-deco { display: none; } }
/* Partie 4 : branche botanique en éventail (PNG de Joe, 2026-10-18), sa base passe sous la capture ; plus de seconde branche */
.mx-partie:nth-child(8n+4) { --br: url('../images/illustrations/habillage/eventail-botanique.webp'); }
.mx-partie:nth-child(8n+4) .mx-capture::before { left: -330px; right: auto; top: auto; bottom: 70px; width: 400px; height: 376px; background-position: right bottom; transform: none; }
.mx-partie:nth-child(8n+4) .mx-capture::after { content: none; }
/* Partie 3 : bouquet feuillu lavande et menthe (PNG de Joe, 2026-10-18), sa base passe sous la capture */
.mx-partie:nth-child(8n+3) { --br: url('../images/illustrations/habillage/bouquet-lavande-menthe.webp'); }
.mx-partie:nth-child(8n+3) .mx-capture::before { right: -300px; left: auto; top: auto; bottom: 70px; width: 380px; height: 380px; background-position: left bottom; transform: none; }
/* Partie 8 : branche penchée vers la gauche pour mieux ressortir de la capture (Joe, 2026-10-18) */
.mx-partie:nth-child(8n) .mx-capture::before { left: -170px; top: -110px; transform: rotate(-34deg); transform-origin: 80% 80%; }
/* Partie 6 : branche penchée vers la gauche, comme la partie 8 (Joe, 2026-10-18) */
.mx-partie:nth-child(8n+6) .mx-capture::before { left: -170px; top: -110px; transform: rotate(-34deg); transform-origin: 80% 80%; }
/* Hub du blog : une seule branche, l'éventail botanique (PNG de Joe, 2026-10-18), qui pousse puis ondule ; le colibri flotte */
.bg-deco-eventail { right: 40px; top: auto; bottom: -30px; width: 380px; opacity: .95; rotate: -6deg; transform-origin: 85% 95%; animation: cx-pousse 1.1s cubic-bezier(.2, .8, .2, 1) .2s both, bg-eventail-ondule 7s ease-in-out 1.3s infinite; }
@keyframes bg-eventail-ondule { 0%, 100% { rotate: -6deg; } 50% { rotate: -2deg; } }
.bg-deco-colibri { right: 330px; top: 96px; animation: cx-arrive 1.1s cubic-bezier(.2, .8, .2, 1) .8s both, cx-flotte 3.2s ease-in-out 2s infinite; }
@media (prefers-reduced-motion: reduce) { .bg-deco-eventail, .bg-deco-colibri { animation: none; } }
/* Partie 7 : branche penchée vers la droite pour mieux ressortir de la capture (Joe, 2026-10-18) */
.mx-partie:nth-child(8n+7) .mx-capture::before { right: -230px; top: -90px; transform: rotate(34deg); transform-origin: 20% 80%; }
/* Tarifs à 400 px et moins : l'étiquette « Tous les modules » passe sous le nom de la formule (D2, Joe, 2026-10-18) */
@media (max-width: 400px) {
  .tf-offre-tete { flex-wrap: wrap; row-gap: 4px; }
  .tf-offre-tag { flex-basis: 100%; }
}
/* Tarifs : le texte d'un .tf-info peut rétrécir, l'adresse votreassociation@monassocompta.fr se coupe au besoin (débordait de 40 px à 320 px) */
.tf-info > div { min-width: 0; overflow-wrap: anywhere; }
/* Plan comptable à 400 px et moins : noms de classe plus petits, coupés avec un trait d'union (D3, Joe, 2026-10-18) */
@media (max-width: 400px) {
  .pc-classe { grid-template-columns: 26px minmax(0, 1fr); gap: 8px; }
  .pc-classe-num { width: 26px; height: 26px; font-size: 13px; }
  .pc-classe-nom { font-size: 12.5px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
}
/* Pages legales : une adresse longue (« contact@monassocompta.fr. ») depassait sa ligne de
   16 px a 320 px (audit responsive 2026-10-18). break-word ne coupe qu'en dernier recours. */
.lg-texte { overflow-wrap: break-word; }