/* ============================================================================ AECONOMIA — Blog (article + liste) — complement de aeconomia.css ---------------------------------------------------------------------------- Lot 4 (03/08/2026) : portage des retours de Dimitri du 30/07 deja resolus dans design/proposition-bastien-2026-07-29/article-blog.html. 1. images plus haut dans la page -> .art-lead (image mise en avant) 2. sommaire deplie par defaut -> .toc-list.open + .toc-toggle 3. puces du bloc chiffres -> centrage sur la LIGNE, pas sur la boite 4. en-tete « Ecrit par » + effet -> .art-metaline + .rt (aecMarkIn) 5. cartes liees, bouton tertiaire -> .rc-more, gap 9 -> 13px au survol 6. surligneur anime sur les H2 -> classe `.hl` du kit + [data-mask] 7. CTA animes, un seul primaire -> aside tertiaire + .aec-actionbar Le kit (assets/aeconomia.css) est LA source des keyframes, de la courbe (--ease) et des classes partagees (.hl, .link-arrow, .rvlink, .aec-actionbar, .aec-dot, .btn*). Ce fichier n'en redeclare AUCUNE : il compose avec. Cotes : docs/DA-BOOK-COTES.md. Patterns : docs/PATTERNS-DA.md. ========================================================================= */ /* Colonne de texte du book §06 (« 520-560px ») / §04 (« jamais au-dela de 70 signes »). Declaree ici : blog.css n'est charge que sur les pages de blog. 544 -> 512px, MESURE DU 20/08/2026 contre le gabarit de reference. Protocole : le contenu de reference (blog-courtier-ou-banquier.gutenberg.html) rendu dans son shell (design/proposition-bastien-2026-07-29/article-blog.html), a 1280px, puis comptage des SIGNES PAR LIGNE au Range/getClientRects — pas une conversion en `ch`, qui mesure le « 0 » et non la prose (le piege deja documente dans la maquette : le chiffre y est 30 % plus large que la lettre moyenne). reference (--measure:512px) : mediane 69 signes · p90 72 · max 77 site (--measure:544px) : mediane 73 signes · p90 77 · max 80 site (--measure:512px) : mediane 68 signes · p90 72 · max 78 544px sortait donc de la fourchette 65-75 et depassait les 70 signes du book §04 sur la majorite des lignes pleines. Le reste de `.art-body p` etait deja aligne sur la reference au pixel (16px / 24,8px d'interligne / 18,4px de marge basse) : la mesure etait le seul ecart. */ :root{--measure:512px} /* ---------- Barre de progression de lecture (hook #prog du kit) ---------- */ .progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1500;transform-origin:0 50%;transform:scaleX(0); background:var(--lime)} /* ============================================================================ HERO D'ARTICLE Largeur alignee sur --wrap (1240px, book §03 « pages internes ») : le fil d'Ariane (.bcr du kit), le hero, l'article et les cartes liees partagent desormais le meme bord gauche. C'etait 880px, seul bloc decale de la page. ========================================================================= */ .art-hero{position:relative;max-width:var(--wrap);margin:0 auto;padding:2.4rem var(--pad) 0} .art-cat{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:12px;font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:var(--ob);background:var(--lime);padding:7px 14px;border-radius:var(--pill)} /* H1 page interne, cotes du book §04 : clamp(42px, 6cqw, 80px) / 0,95 / -0,045em. Le kit ne pose pas de container-type sur la racine : la cote intermediaire est donc exprimee en vw (6cqw d'un conteneur de 1240px ≈ 5,2vw a 1440px). La borne basse est ramenee a 36,8px pour un titre long sur un ecran de 360px, ou 42px avec -0,045em deborde. */ .art-hero h1{font-size:clamp(2.3rem,5.2vw,4.75rem);line-height:.95;letter-spacing:-.045em; margin:clamp(1.4rem,3.2vw,2.6rem) 0 0;max-width:15ch;text-wrap:balance} /* Chapeau (book §04) : 16-19px / 1,55 / gris corps, 2 a 4 mots en gras encre. */ .art-dek{font-size:clamp(1rem,1.35vw,1.19rem);line-height:1.55;color:var(--ob2);max-width:var(--measure); margin-top:clamp(1.7rem,3vw,2.4rem);text-wrap:pretty} .art-dek strong{color:var(--ob);font-weight:600} /* ---------- Ligne de meta (retour Dimitri 30/07, point 5) ---------- « Ecrit par … » devant la signature, et un petit effet sur le temps de lecture : la pilule .rt se remplit de vert (aecMarkIn du kit, meme geste que le surligneur des titres) quand la ligne entre a l'ecran. Elle ne se rejoue jamais (l'observateur du kit fait `unobserve`). Mono 12px : plancher de taille du book §13 (« aucune taille sous 12px »). */ .art-metaline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px; margin-top:clamp(1.8rem,3vw,2.5rem);padding:1.15rem 0; border-top:1px solid var(--line);border-bottom:1px solid var(--line); font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ob2)} .art-metaline .sep{color:#B4B4B8} .art-metaline .rt{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 11px; border:1px solid rgba(10,10,11,.14);border-radius:var(--pill);color:var(--ob); background-image:linear-gradient(var(--mark),var(--mark));background-repeat:no-repeat; background-position:left center;background-size:100% 100%} /* Pastille ENCRE et non lime : posee sur le remplissage vert, une pastille lime disparaitrait. Meme inversion que le primaire sur surface lime (kit §boutons). */ .art-metaline .rt::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ob);flex:none} .art-metaline .rt b{font-weight:400;font-variant-numeric:tabular-nums} .js .art-metaline[data-reveal] .rt{background-size:0% 100%} .js .art-metaline[data-reveal].aec-in .rt{animation:aecMarkIn 1.05s var(--ease) .5s forwards} /* ---------- Visuel d'ouverture (retour Dimitri 30/07, point 1) ---------- « Ajouter un peu d'images plus haut dans la page : le haut de l'article est aujourd'hui uniquement typographique. » Le theme rend des articles Gutenberg : la source est l'IMAGE MISE EN AVANT. Sans image, le gabarit n'affiche rien (pas de reserve grise, pas de photo de banque d'images — book §10) et le hero se referme proprement sur la ligne de meta. Le degrade encre n'est pose QUE si une legende vient s'ecrire sur la photo (book §10 : « degrade encre des qu'un texte se pose sur une photo »). */ .art-lead{position:relative;overflow:hidden;border-radius:var(--r-frame);background:var(--cream); margin-top:clamp(1.9rem,3.2vw,2.75rem);aspect-ratio:2.4/1} .art-lead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%} .art-lead .shade{position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(10,10,11,.78))} .art-lead figcaption{position:absolute;left:clamp(18px,2.2vw,30px);right:clamp(18px,2.2vw,30px);bottom:clamp(16px,1.9vw,26px); font-size:clamp(1rem,1.5vw,1.25rem);font-weight:600;letter-spacing:-.025em;line-height:1.25;color:#fff;max-width:34ch; font-family:var(--sky)} /* ============================================================================ GRILLE ARTICLE + COLONNE DE DROITE Le sommaire est place AVANT l'article dans le DOM et repousse en colonne 2 par la grille : sous 980px, il tombe donc au-dessus du texte (il etait relegue apres l'article, ou un sommaire ne sert plus a rien). ========================================================================= */ .art-grid{max-width:var(--wrap);margin:clamp(2.2rem,4vw,3.4rem) auto 0;padding:0 var(--pad); display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(2rem,4vw,4.4rem);align-items:start} .art-body{grid-column:1;grid-row:1;min-width:0} .art-aside{grid-column:2;grid-row:1;position:sticky;top:96px;display:flex;flex-direction:column;gap:.9rem} /* ---------- Sommaire (retour Dimitri 30/07, point 2) ---------- « Le sommaire est plie par defaut : le laisser deplie des le debut. » L'etat initial est donc OUVERT a toutes les largeurs (aria-expanded="true" + .open), et le pliage reste disponible : sous 980px le bouton reprend la main. Le hook [data-toc] et la classe .on du scrollspy (assets/aeconomia.js) sont inchanges. */ .toc{background:var(--white);border:1px solid rgba(10,10,11,.1);border-radius:var(--r-card);padding:1.25rem 1.35rem} .toc-toggle{display:none} .toc-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.75rem} .toc h2{display:flex;align-items:center;gap:9px;font-family:var(--sky);font-size:1.15rem;font-weight:600; letter-spacing:-.025em;color:var(--ob);margin:0;line-height:1.2} .toc h2::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);flex:none} .toc-count{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px;font-weight:500; letter-spacing:.1em;text-transform:uppercase;color:#6E6E73;white-space:nowrap} /* Rangee a filet, numerotation mono a gauche (book §08 : « toujours »). */ .toc-list{list-style:none;margin:0;padding:0;counter-reset:toc} .toc-list li{counter-increment:toc} .toc-list a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:baseline; font-size:.88rem;line-height:1.35;color:var(--ob2);padding:.5rem 0 .5rem .75rem; border-left:2px solid var(--line);transition:color .2s,border-color .2s} /* Numero aligne sur la LIGNE DE BASE du libelle, comme les listes ordonnees du corps : il tient meme quand l'entree passe sur deux lignes. */ .toc-list a::before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:12px;color:#6E6E73} .toc-list a:hover{color:var(--ob)} .toc-list a.on{color:var(--ob);font-weight:600;border-left-color:var(--lime)} .toc-list a.on::before{color:var(--ob)} /* ---------- Carte CTA de la colonne (retour Dimitri 30/07, point 3) ---------- Niveau 3 du book §08 (lien gras + fleche, gap 9 -> 13px au survol) et pas un bouton : la barre d'action fixe du bas et la barre de navigation portent deja le primaire, et le book n'en autorise qu'un par ecran visible. La carte entiere est cliquable, la cible tactile ne perd donc rien. Masquee sous 980px, ou .aec-actionbar reprend exactement les deux actions. */ .aside-cta{display:block;background:var(--white);border:1px solid rgba(10,10,11,.1);border-radius:var(--r-card); padding:1.25rem 1.35rem;transition:border-color .25s,transform .25s var(--ease),box-shadow .3s} .aside-cta:hover{border-color:var(--ob);transform:translateY(-4px);box-shadow:0 24px 48px -38px rgba(10,10,11,.55)} .aside-cta .k{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px; letter-spacing:.1em;text-transform:uppercase;color:#6E6E73} .aside-cta b{display:block;font-family:var(--sky);font-size:1.05rem;font-weight:600;letter-spacing:-.025em; line-height:1.3;color:var(--ob);margin-top:.7rem} .aside-cta .sub{display:block;font-size:.85rem;line-height:1.5;color:var(--ob2);margin-top:.45rem} .aside-cta .link-arrow{margin-top:.9rem} .aside-cta:hover .link-arrow{gap:13px} .aside-tel{display:flex;align-items:center;justify-content:center;gap:9px; font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.95rem;font-weight:500;color:var(--ob); border:1px solid rgba(10,10,11,.14);border-radius:var(--pill);padding:12px 16px;min-height:44px; transition:border-color .25s,background .25s} .aside-tel::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);flex:none} .aside-tel:hover{border-color:var(--ob);background:var(--white)} /* ============================================================================ CORPS DE TEXTE (contenu Gutenberg) ========================================================================= */ /* Corps : 16px / 1,55 (book §04 « corps 15-16px, 1,5-1,55 »), colonne --measure. */ .art-body>p{font-size:1rem;line-height:1.55;color:var(--ob2);margin:0 0 1.15em;max-width:var(--measure);text-wrap:pretty} /* H2 SECONDAIRE du book §04 — ce sont des titres de PARTIE dans un corps d'article, pas des titres de section de page : clamp(30px, 4cqw, 50px) / 1,02 / -0,038em (4cqw d'un conteneur de 1240px ≈ 3,45vw a 1440px, le kit ne pose pas de container-type). Respiration au-dessus : les 80 a 132px du book §06. Le surligneur vert vit sur ces intertitres depuis le retour du 30/07 (point 7) : c'est la classe `.hl` du kit, posee au RENDU par single.php — le contenu stocke en base n'est jamais modifie. L'animation vient de [data-mask] (aecMask + aecMarkIn) et ne se rejoue pas au retour de defilement. */ .art-body h2{font-size:clamp(1.875rem,3.45vw,3.125rem);line-height:1.02;letter-spacing:-.038em; margin:clamp(5rem,7.75vw,8.25rem) 0 0;max-width:760px;scroll-margin-top:104px;text-wrap:balance} /* Decision Bastien n°5 du 29/07 (AUDIT-ECARTS-GABARITS) : sur le blog, le surligneur lime vit sur le H1 UNIQUEMENT, les H2 de corps restent sobres — et le gabarit de reference (blog-courtier-ou-banquier.gutenberg.html) ecrit ses H2 sans . Les 63 articles du pipeline sont partis AVEC ces spans dans le contenu : plutot que de reecrire 63 posts, on eteint le surligneur au rendu. Le deux-temps (gris) reste ; seul le fond lime disparait. Les H2 des composants du theme (simulateur .sim, CTA) ne portent pas .wp-block-heading : intouches. */ .art-body h2.wp-block-heading .hl,.art-body h2.wp-block-heading em{background-image:none} /* H3 « carte large » du book §04 : clamp(22px, 2,4cqw, 30px) / 1,15 / -0,03em. */ .art-body h3{font-family:var(--sky);font-size:clamp(1.375rem,2.05vw,1.875rem);letter-spacing:-.03em; line-height:1.15;color:var(--ob);margin:clamp(2.75rem,4.15vw,4rem) 0 0;max-width:640px;scroll-margin-top:104px} /* Cotes « titre -> contenu » du book §06 (32-48px) et « H3 -> contenu » (18px). */ .art-body h2+p,.art-body h2+ul,.art-body h2+ol,.art-body h2+figure,.art-body h2+blockquote, .art-body h2+.enbref,.art-body h2+.essentiel,.art-body h2+.pullquote,.art-body h2+.art-inlink, .art-body h2+.art-cta,.art-body h2+.wp-block-image{margin-top:clamp(2rem,3.3vw,3rem)} .art-body h3+p,.art-body h3+ul,.art-body h3+ol{margin-top:18px} .art-body>:first-child{margin-top:0} .art-body strong{color:var(--ob);font-weight:600} .art-body a{color:var(--ob);text-decoration:underline;text-underline-offset:2px;font-weight:600} .art-body a:hover{color:var(--ob)} .art-body .btn{text-decoration:none} .art-body a.btn-dark{color:#fff} .art-body a.btn-primary{color:var(--ob)} /* PILULES DU CTA DANS LE CONTENU (constat Bastien 20/08, capture sur /renover-un-bien-immobilier-pour-augmenter-sa-valeur/) : sur les 36 articles legacy le bloc .art-cta vit DANS le contenu, donc dans .art-body — et `.art-body a` (0,1,1) ecrase `.cta-pill` (0,1,0) : encre soulignee sur carte encre, illisible. Les 60 articles pipeline ont leur CTA hors .art-body, d'ou des controles qui passaient. Meme mecanique deja traitee pour .btn-dark deux lignes plus haut ; les pilules avaient ete oubliees. CONTRASTE (calcule, aeconomia.css section fin-d-article) : #fff sur #0A0A0B = 19,8:1 ; lime au survol = 13,6:1. On restaure ces valeurs, rien de neuf. */ .art-body .art-cta a.cta-pill{color:#fff;text-decoration:none;font-weight:500} .art-body .art-cta a.cta-pill:hover{color:var(--lime)} .art-body figure,.art-body .wp-block-image{margin:clamp(1.8rem,3vw,2.6rem) 0} .art-body figure img,.art-body .wp-block-image img{border-radius:var(--r-card)} .art-body figcaption{font-family:var(--mono);font-size:12px;line-height:1.5;color:#6E6E73;margin-top:.6rem} .art-body blockquote{margin:2.2rem 0;padding:1.3rem 0 1.3rem 1.6rem;border-left:4px solid var(--lime); font-family:var(--sky);font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.3;letter-spacing:-.025em; color:var(--ob);font-weight:500;max-width:none} /* ---------- Puces (retour Dimitri 30/07, point 4) ---------- « Les bulletpoints sont mal calibres, le point vert flotte au-dessus du libelle. » MESURE AVANT PORTAGE, a dire honnetement : le defaut exact que Dimitri a vu vit dans un composant de la MAQUETTE (`.schema .bars`), ou la pastille etait calee en absolu sur la BOITE d'un
  • a 20px de padding vertical — elle se posait donc une dizaine de pixels au-dessus de la ligne. Ce composant n'existe pas dans le theme. Ici les puces etaient calees a `top:.55em`, valeur devinee : ecart mesure ~1px, pas 10px. Ce qui est porte, c'est donc la REGLE, pas un correctif de 10px : la pastille se centre sur la premiere LIGNE de texte, par un calcul qui suit la taille et l'interligne — (1,55em - 7px)/2. Mesure apres portage : 0,15px d'ecart entre le centre de la pastille et le centre de la ligne, a toutes les tailles, et le calage ne bougera pas si un
  • recoit un jour du padding. */ .art-body ul{margin:0 0 1.3em;padding:0;list-style:none;display:flex;flex-direction:column;gap:.7em} .art-body p+ul,.art-body p+ol,.enbref p+ul{margin-top:.95em} .art-body ul li{position:relative;padding-left:22px;font-size:1rem;line-height:1.55;color:var(--ob2); max-width:var(--measure)} .art-body ul li::before{content:"";position:absolute;left:0;top:calc((1.55em - 7px)/2); width:7px;height:7px;border-radius:50%;background:var(--lime)} .art-body ul li b,.art-body ul li strong{color:var(--ob)} /* Listes ordonnees : numerotation mono a gauche (book §08 : « toujours »). Le numero est une COLONNE de grille alignee sur la ligne de base du libelle (align-items:baseline) : il suit la taille et l'interligne du texte, la ou un `top` absolu devrait etre recalcule a chaque changement de cote (mesure : un numero mono a .8rem cale par `top:0` tombait 2,4px trop haut). */ .art-body ol{margin:0 0 1.3em;padding:0;list-style:none;counter-reset:aeol;display:flex;flex-direction:column;gap:.7em} .art-body ol li{counter-increment:aeol;display:grid;grid-template-columns:2.1rem minmax(0,1fr); align-items:baseline;font-size:1rem;line-height:1.55;color:var(--ob2); max-width:calc(var(--measure) + 2.1rem)} .art-body ol li::before{content:counter(aeol,decimal-leading-zero); font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.8rem;color:#6E6E73} .art-body ol li b,.art-body ol li strong{color:var(--ob)} /* SOUS-LISTE DANS UN ITEM NUMEROTE — reprise de la PR #8 (Bastien, 04/08/2026), moitie valable absorbee ici, l'autre ecartee (voir plus bas). Le `
  • ` est une grille `2.1rem minmax(0,1fr)`. Une sous-liste y devient le TROISIEME element de la grille : elle retombe en deuxieme rangee, DANS la colonne du numero. Mesure du 20/08 en injectant une sous-liste dans le `
      ` de /guide-des-plus-values-immobilieres/ : sans cette regle 34px de large, 322px de haut (un caractere par ligne) avec cette regle 512px de large, la mesure du corps AUCUN article du corpus ne declenche le cas aujourd'hui — le piege est donc dormant, pas visible. C'est precisement pour ca qu'il se pose maintenant : la prochaine sous-liste ecrite par un redacteur sortirait illisible, et personne ne ferait le lien avec une grille de deux colonnes. */ /* GENERALISE LE 20/08 AU SOIR (capture Bastien sur /plan-local-durbanisme-…/) : le piege ne se limite pas aux sous-listes. Dans une grille, CHAQUE enfant element du
    1. (strong, lien) devient un item de grille separe, et les bouts de texte nus entre eux deviennent des items anonymes qui retombent dans la colonne du numero (2.1rem = 34px, un mot par ligne). Un
    2. tres courant — `Titre : texte lien suite` — eclate en 4 items. Deux couches : ce filet CSS force tout enfant ELEMENT en colonne 2 (les items anonymes, inatteignables en CSS, sont traites au rendu par aeconomia_ol_li_wrap dans functions.php, qui enveloppe le contenu du
    3. dans un seul bloc). */ .art-body ol li>*{grid-column:2;min-width:0} /* CE QUI N'EST PAS REPRIS DE LA PR #8 : son passage de `margin:0 0 1.15em` a `1.8em` sur `.art-body>p`. La maquette de reference, mesuree au rendu le 20/08 (.prose p de design/proposition-bastien-2026-07-29/article-blog.html), donne 18,4px, soit exactement 1,15em. Le site y est aligne au pixel : passer a 1,8em l'en ecarterait. */ /* ---------- La carte « En bref » du pipeline (`.ae-synth`) ---------- MESURE DU 20/08/2026, deuxieme passe. `.art-body>p` est un selecteur d'enfant DIRECT : il ne descend pas dans les blocs du contenu. Consequence, mesuree au rendu sur le temoin : paragraphe de l'article 512px, 73 signes au maximum paragraphe de `.ae-synth` 712px, 93 signes ← max-width:none, margin:0 Autrement dit le paragraphe le PLUS LARGE de la page est celui de la carte « En bref », c'est-a-dire le premier que le lecteur lit, et il depasse d'un tiers la regle des 70 signes du book §04. 61 paragraphes dans 53 articles. `.ae-synth` n'a aucune regle au kit : c'est un bloc que le pipeline ecrit avec ses seuls styles en ligne (carte blanche, lisere lime). Les `li` qu'il contient etaient deja bornes — `.art-body ul li` n'est pas un selecteur d'enfant direct et les atteint. Le `

      ` etait le seul orphelin. POURQUOI PAS UN `.art-body p` GENERAL : `.faq-a p` du kit a la meme specificite (0,1,1) et blog.css se charge APRES le kit. Une regle generale gagnerait donc sur les paragraphes de FAQ et casserait leur cote. On vise le bloc, pas tous les paragraphes. */ .art-body .ae-synth p{max-width:var(--measure)} /* Deux paragraphes consecutifs y etaient colles (margin:0 des deux cotes) : on leur rend la respiration du corps, la meme que `.art-body>p` (1,15em). */ .art-body .ae-synth p+p{margin-top:1.15em} /* ---------- Tableaux du corps d'article : un conteneur qui defile ---------- BALAYAGE DES WIDGETS AU RENDU, 20/08/2026 (128 URL du staging, desktop 1280 et mobile 375). Le defaut n'etait pas une hauteur fixe sur du texte — il n'y en a aucune dans le corpus, et les seuls elements « rognes » detectes verticalement sont les accordeons FAQ replies (height:0 voulu) et le ticker marquee. Le defaut est une LARGEUR. Mesure : 74 tableaux dans 55 articles, tous ecrits `` sans conteneur (ceux des LP, eux, sont des `.dtable` dans `.dtable-wrap` et defilent deja). A 375px, `.art-body` fait 337px et le tableau de /courtier-def/ se pose a 516px : 160px sortent du viewport, et `body{overflow-x:clip}` les rend INATTEIGNABLES — la 4e colonne (« Comparateur en ligne ») est perdue, la 3e coupee en plein mot. 21 tableaux debordent, jusqu'a 179px. Pourquoi un conteneur et pas `display:block` sur le tableau : mesure des 73 tableaux a 761px de colonne — 36 d'entre eux ont une largeur naturelle INFERIEURE a la colonne (jusqu'a 528px d'ecart) et se retracteraient sur le bureau, ou ils sont aujourd'hui etires a 100 %. Le conteneur ne touche a rien quand le tableau tient, et defile quand il ne tient pas. Le conteneur est pose AU RENDU (aeconomia_wrap_article_tables, functions.php) : meme principe que le plafond HCSF et le bloc de conversion — la regle vaut pour les 55 articles publies comme pour ceux a venir, et se retire d'un commit. */ .art-tablewrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain; scrollbar-width:thin;scrollbar-color:rgba(10,10,11,.28) transparent} /* Le tableau garde sa largeur naturelle DANS le conteneur : c'est ce qui autorise le defilement. `width:100%` reste en style en ligne dans le contenu, il ne fait que poser le plancher. */ .art-tablewrap>table{margin:0} /* La marge verticale passe au conteneur, sinon elle serait dans la zone qui defile. */ .art-body>.art-tablewrap,.art-body figure>.art-tablewrap{margin:clamp(1.4rem,2.4vw,1.9rem) 0} /* ---------- Infographies SVG du corps d'article : la figure `.art-infog` ---------- Posee AU RENDU par aeconomia_wrap_article_infographies (functions.php, 04/09/2026) autour de chaque `` que le pipeline publie avec ses seuls styles en ligne (display:block;width:100%;max-width:760px;margin:24px 0). La figure ne redit rien de ces cotes : elle ne fait que porter le pattern 42 sous 560px. MESURE qui justifie le plancher : la planche a un viewBox de 720 et ecrit ses libelles a 11-12,5px. A 375px de fenetre la colonne fait 337px, soit un facteur 0,47 : les libelles tombent a 5-6px (temoin du 30/08 sur /pret-a-taux-zero/). Avec un plancher de 600px le facteur remonte a 0,83 et les libelles a 9-10px — la cote des labels mono du site. L'image defile alors DANS sa figure, comme un tableau trop large ; aeconomia.js y pose l'indice « Faire defiler l'infographie horizontalement → », la region et le focus clavier (meme routine que les tableaux). Au-dessus de 560px rien ne change : la planche tient. `min-width` bat le `width:100%` en ligne : c'est ce qui autorise le defilement. */ .art-infog{margin:0;max-width:760px} @media(max-width:560px){ .art-infog{overflow-x:auto;overscroll-behavior-x:contain; scrollbar-width:thin;scrollbar-color:rgba(10,10,11,.28) transparent} .art-infog>img{min-width:600px} /* Planches recomposées et reçues à 320px : préserver la vue entière. Les anciennes infographies gardent leur plancher de lecture. */ .art-infog.art-infog--fit>img{min-width:0} } /* ---------- Bloc « En bref » (AEO : reponse directe citable) ---------- Carte blanche pattern 7 + liseré lime, label mono `● EN BREF`. */ .enbref{position:relative;border-radius:var(--r-card);padding:clamp(1.5rem,2.6vw,2rem); margin:0 0 1.6rem;background:var(--white);border:1px solid rgba(10,10,11,.1);border-top:3px solid var(--lime); overflow:hidden;box-shadow:0 24px 48px -38px rgba(10,10,11,.55)} /* Label mono a pastille, en tete de carte. #6E6E73 = 5,07:1 sur blanc (AA calcule). */ .enbref::before{content:"EN BREF";display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px; font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#6E6E73; padding-left:16px;background-image:radial-gradient(circle 3.5px at 3.5px 50%,var(--lime) 98%,transparent); background-repeat:no-repeat} .enbref p{font-size:clamp(1rem,1.35vw,1.19rem);line-height:1.55;color:var(--ob);margin:.55rem 0 0; font-weight:500;max-width:var(--measure)} .enbref ul{margin:1.35rem 0 0;padding:1.35rem 0 0;border-top:1px solid var(--line);list-style:none; display:flex;flex-direction:column;gap:.75em} .enbref li{position:relative;padding-left:22px;font-size:.95rem;line-height:1.5;color:var(--ob2);max-width:var(--measure)} /* Meme correction de calage que .art-body ul (interligne 1,5 ici). */ .enbref li::before{content:"";position:absolute;left:0;top:calc((1.5em - 7px)/2); width:7px;height:7px;border-radius:50%;background:var(--lime)} .enbref li b{color:var(--ob);font-weight:600} /* ---------- Citation mise en avant ---------- */ .pullquote{margin:2.2rem 0;padding:1.4rem 0 1.4rem 1.6rem;border-left:4px solid var(--lime); font-family:var(--sky);font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.3;letter-spacing:-.025em; color:var(--ob);font-weight:500} /* ---------- Lien interne contextuel (parcours) ---------- */ .art-inlink{display:flex;align-items:center;gap:.8rem;margin:1.8rem 0;padding:1rem 1.2rem;border-radius:16px; background:var(--white);border:1px solid rgba(10,10,11,.1);font-size:.92rem;color:var(--ob2);text-decoration:none; transition:border-color .25s,transform .25s var(--ease)} .art-inlink:hover{border-color:var(--ob);transform:translateY(-2px)} .art-inlink b{color:var(--ob);font-family:var(--sky)} .art-inlink .ar{margin-left:auto;color:var(--ob);font-family:var(--mono);font-weight:500;transition:transform .25s var(--ease)} .art-inlink:hover .ar{transform:translateX(3px)} .art-body a.art-inlink{font-weight:400;text-decoration:none} .art-body a.art-inlink b{font-weight:600} /* ---------- L'essentiel a retenir (AEO : resume citable) ---------- */ .essentiel{margin:2.6rem 0;border-radius:var(--r-card);padding:1.7rem 1.8rem;background:var(--white); border:1px solid rgba(10,10,11,.1)} .essentiel .eyebrow{margin-bottom:.8rem} .essentiel p{font-size:1rem;line-height:1.65;color:var(--ob2);margin:0;max-width:var(--measure)} /* ---------- CTA final d'article (carte encre « moment fort », pattern 8) ---------- */ .art-cta{position:relative;margin:2.6rem 0;border-radius:var(--r-frame);padding:clamp(1.8rem,3vw,2.6rem); background:var(--ob);color:#fff;overflow:hidden} .art-cta::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(90% 120% at 15% 115%,rgba(173,232,60,.14),transparent 62%)} .art-cta>*{position:relative} .art-cta h3{font-family:var(--sky);font-weight:600;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.06; letter-spacing:-.04em;color:#fff} .art-cta p{margin:.7rem 0 1.3rem;max-width:var(--measure);color:rgba(255,255,255,.68);font-size:.98rem;line-height:1.55} /* Mention legale obligatoire sous tout bloc qui parle financement (L. 519-6 + avertissement credit). rgba(255,255,255,.5) sur encre = 9,9:1 (calcule). */ .art-cta .legal{margin:1.2rem 0 0;font-size:12px;line-height:1.6;color:rgba(255,255,255,.5);max-width:none} /* ---------- Encart auteur (E-E-A-T) — fiche pattern 18 ---------- */ .author-box{position:relative;display:flex;gap:1.3rem;align-items:flex-start;margin:2.6rem 0 0;padding:1.6rem; border-radius:16px;background:var(--white);border:1px solid rgba(10,10,11,.1);overflow:hidden} .author-box::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--lime)} .author-box>img{width:72px;height:90px;border-radius:12px;object-fit:cover;object-position:50% 13%; filter:grayscale(1) contrast(1.04);flex:none;transition:filter .4s ease} .author-box:hover>img{filter:none} .author-box>div{min-width:0} /* Medaillon d'initiales de l'encart auteur (27/08). Il remplace le portrait genere qui etait publie sous le nom d'une personne reelle sur les 95 articles. Il reprend la COTE de l'image qu'il remplace (72x90, radius 12px) et non les 46px carres de .aec-ini--lg : c'est la place que le composant reserve, la changer decalerait la carte entiere. Fond lime, encre dessus : 15,4:1. */ .author-box>.ab-ini{width:72px;height:90px;border-radius:12px;font-size:1.35rem;flex:none} .author-box .ab-meta{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;font-weight:500; letter-spacing:.1em;text-transform:uppercase;color:#6E6E73;margin-bottom:.45rem} .author-box .ab-rule{flex:1 1 8px;min-width:8px;height:1px;background:rgba(10,10,11,.14);display:block} .author-box b{display:block;font-family:var(--sky);font-size:1.15rem;font-weight:600;letter-spacing:-.025em; color:var(--ob);margin-bottom:.45rem} .author-box p{font-size:.9rem;line-height:1.6;color:var(--ob2);margin:0;max-width:var(--measure)} .author-box .orias{display:inline-block;margin-top:.6rem;font-size:12px;color:#6E6E73;font-family:var(--mono)} /* ============================================================================ CARTES D'ARTICLES (liees + liste blog) — retour Dimitri 30/07, point 6 « Le bouton "Lire" + fleche noire dans un cercle rond ne correspond pas a la DA : regler ce decalage, et lui creer une animation coherente. » Le rond disparait : niveau 3 du book §08 (lien gras + fleche, gap 9 -> 13px au survol), pilote par le survol de LA CARTE et non du seul texte. La couverture passe au traitement de la maquette (desaturation + voile lime en soft-light + degrade encre) : le degrade est obligatoire, la categorie s'ecrit dessus. ========================================================================= */ .related{max-width:var(--wrap);margin:0 auto;padding:clamp(2.5rem,5vw,4rem) var(--pad)} /* Titre de section « deux temps » a gauche, lien tertiaire a droite (maquette). */ .rel-head{display:flex;gap:clamp(1.2rem,3vw,3rem);flex-wrap:wrap;align-items:flex-end;justify-content:space-between} .rel-head .h2{flex:1 1 420px;min-width:min(280px,100%);margin:0;line-height:1} .rel-head .link-arrow{white-space:nowrap;padding-bottom:.35rem} .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1.6rem} .rel-card{display:flex;flex-direction:column;border-radius:var(--r-card);overflow:hidden;background:var(--white); border:1px solid rgba(10,10,11,.1); transition:transform .3s var(--ease),box-shadow .3s,border-color .25s} .rel-card:hover{transform:translateY(-4px);border-color:var(--ob);box-shadow:0 24px 48px -38px rgba(10,10,11,.55)} .rc-cover{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ob); display:flex;flex-direction:column;justify-content:flex-end;padding:16px 18px} .rc-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:saturate(.5) contrast(1.08) brightness(.9)} .rc-cover .tint{position:absolute;inset:0;background:var(--lime);opacity:.1;mix-blend-mode:soft-light} .rc-cover .shade{position:absolute;inset:0; background:linear-gradient(rgba(10,10,11,.1) 0%,rgba(10,10,11,.62) 58%,rgba(10,10,11,.92))} /* Sans image mise en avant : couverture ENCRE + halo vert radial (book §07), pas de photo de banque d'images et pas de reserve grise « [visuel 16:9] » (celle-ci est un repere de maquette, elle n'a rien a faire sur un site en ligne). */ .rc-cover.is-plain{background:var(--ob) radial-gradient(115% 100% at 12% 115%,rgba(173,232,60,.16),transparent 62%)} .rc-cat{position:relative;display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px; font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.78)} .rc-cat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);flex:none} .rc-in{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.55rem;flex:1} /* h3 dans les articles lies (le H2 y est le titre de section), h2 dans la liste blog (le H1 y est le titre de la page) : meme cote de titre de carte, book §04. */ .rc-in h2,.rc-in h3{font-family:var(--sky);font-weight:600;font-size:1.1rem;line-height:1.25;letter-spacing:-.025em; margin:0;color:var(--ob)} .rc-meta{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px;letter-spacing:.08em; text-transform:uppercase;color:#6E6E73} .rc-more{margin-top:auto;padding-top:.55rem;font-size:.9rem} .rc-more span{display:inline-block;transition:transform .2s var(--ease)} .rel-card:hover .rc-more{gap:13px} .rel-card:hover .rc-more span{transform:translateX(3px)} /* ---------- En-tete des listes (index.php : blog, categorie, recherche) ---------- Le meme en-tete sert de HEROS aux gabarits equipe / simulation / hub / contenu / contact / legal. Session 6 (17/08) : son padding bas etait fige a .6rem pour le rythme de la bande de categories du blog — mais sur les autres gabarits, dont les sections commencent a padding-top:0, le heros collait a la section suivante (~10px releves quand la maquette A propos de Dimitri en met 86). Le defaut redevient une respiration de fin de heros ; la valeur serree du blog passe sur le modificateur `.blog-head--list`, pose par page-blog.php uniquement. */ .blog-head{max-width:var(--wrap);margin:0 auto;padding:2.4rem var(--pad) clamp(3rem,5.5vw,4.9rem)} .blog-head h1{font-size:clamp(2.3rem,5.2vw,4.75rem);line-height:.95;letter-spacing:-.045em; margin:clamp(1.4rem,3.2vw,2.6rem) 0 0;max-width:15ch;text-wrap:balance} .blog-head .lead{margin-top:1.2rem} .blog-list{max-width:var(--wrap);margin:0 auto;padding:clamp(2rem,4vw,3rem) var(--pad) clamp(3rem,6vw,5rem)} /* Pagination WordPress aux cotes du book (pilules, mono tabulaire). */ .blog-list .navigation.pagination{margin-top:2.4rem} .blog-list .nav-links{display:flex;flex-wrap:wrap;gap:9px;align-items:center} .blog-list .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px; padding:0 14px;border-radius:var(--pill);border:1px solid rgba(10,10,11,.14);background:rgba(255,255,255,.6); font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.85rem;color:var(--ob); transition:border-color .25s,background .25s,transform .25s var(--ease)} .blog-list a.page-numbers:hover{border-color:var(--ob);background:#fff;transform:translateY(-2px)} .blog-list .page-numbers.current{background:var(--ob);border-color:var(--ob);color:#fff} .blog-list .page-numbers.dots{border-color:transparent;background:none;min-width:auto;padding:0 4px} /* ============================================================================ RESPONSIVE ========================================================================= */ @media(max-width:980px){ .art-grid{grid-template-columns:1fr} /* Le sommaire passe AU-DESSUS de l'article (il est deja premier dans le DOM). */ .art-body{grid-column:1;grid-row:2} .art-aside{grid-column:1;grid-row:1;position:static} /* La carte CTA de colonne sort : .aec-actionbar reprend les deux memes actions en bas d'ecran, et le book n'autorise qu'un appel a l'action par ecran. */ .aside-cta,.aside-tel{display:none} /* Pliage du sommaire : le bouton reprend la main, la liste reste DEPLIEE au chargement (`.open` pose dans le markup + aria-expanded="true"). */ .toc-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px; border:0;background:transparent;padding:0;cursor:pointer; font-family:var(--sky);font-size:1rem;font-weight:600;letter-spacing:-.02em;color:var(--ob)} .toc-toggle .ico{font-family:var(--mono);font-size:1.15rem;color:#6E6E73;transition:transform .3s var(--ease)} .toc-toggle[aria-expanded="true"] .ico{transform:rotate(45deg)} .toc .toc-head{display:none} .toc-list{display:none;margin-top:.8rem} .toc-list.open{display:block;columns:2;column-gap:2rem} .toc-list li{break-inside:avoid} .related-grid{grid-template-columns:1fr 1fr} } @media(max-width:760px){ .art-lead{aspect-ratio:16/10} .art-body h2{max-width:none} /* Degagement du pied pour la barre d'action fixe du kit (.aec-actionbar, affichee sous 760px). Le kit le fait via `.has-actionbar` sur ; le gabarit d'article n'ajoute pas de classe au body, on vise donc la classe que WordPress y pose deja (body_class()). */ .single-post .ftr{padding-bottom:150px} .art-body{padding-bottom:1rem} } @media(max-width:680px){ .related-grid{grid-template-columns:1fr} .toc-list.open{columns:1} .author-box{flex-direction:column} } @media(max-width:560px){ /* La ligne de meta se replie sur 2 lignes : le point median se retrouvait seul en tete de la seconde. Le retour a la ligne suffit a separer les informations. */ .art-metaline{gap:8px 14px} .art-metaline .sep{display:none} } /* ---------- prefers-reduced-motion : le kit coupe tout mouvement (*{animation:none}), il faut rendre l'ETAT FINAL des elements masques au repos par ce fichier. ---------- */ @media(prefers-reduced-motion:reduce){ .art-metaline .rt{background-size:100% 100%!important} .toc-toggle .ico{transition:none} } /* ---------- PAGES VIRTUELLES (12/08) ---------- Ces pages reutilisent les composants DEJA au kit, elles n'en creent pas : stats -> `.lph-stats` (pattern 12), deja servi par le heros des 12 LP roster -> `.roster` / `.roster-rail` / `.roster-tile` (pattern 18). Le CSS existait depuis le lot equipe et n'avait aucun gabarit qui l'utilise : il attendait cette page. pilules -> `.pill` (kit), ici pour les categories du blog Ne restent ci-dessous que trois choses qui n'existaient nulle part. 1. Le rythme vertical de la bande de categories. Mesure au rendu le 12/08 : l'ecart entre le chapeau et le label de section valait ZERO pixel. 17/08 : la valeur serree ne vaut que pour la liste du blog (les categories suivent tout de suite) — modificateur, plus le defaut de .blog-head. */ .blog-head--list{padding-bottom:.6rem} .blog-cats-sec{padding-top:2.6rem;padding-bottom:3.2rem} .blog-cats-sec .seyeb{margin-bottom:1.3rem} .blog-cats{display:flex;flex-wrap:wrap;gap:10px} .blog-cats .pill{text-decoration:none;padding:10px 16px; transition:background .3s var(--ease,cubic-bezier(.16,.7,.3,1)),color .3s var(--ease,cubic-bezier(.16,.7,.3,1))} /* Session 6 (17/08) : 40px releves au doigt sur mobile — cible 44px du book §06. */ @media(pointer:coarse){.blog-cats .pill{min-height:44px}} .blog-cats .pill b{margin-left:.55rem;color:#6E6E73;font-weight:500;font-variant-numeric:tabular-nums} .blog-cats .pill:hover{background:var(--ob,#0A0A0B);border-color:var(--ob,#0A0A0B);color:#fff} .blog-cats .pill:hover b{color:var(--lime,#ADE83C)} /* Pattern 42, quatrieme consommateur (07/09/2026) : sous 560px, les pilules de 44px (une par categorie peuplee) s'empilaient sur plusieurs rangees entre le titre et le premier article. La rangee defile horizontalement dans SON cadre — le document ne deborde jamais (book §06) —, chaque lien reste une cible de 44px et le focus clavier amene la pilule dans le cadre. La marge negative laisse la derniere pilule affleurer le bord : c'est l'indice de defilement, comme le cadre de l'infographie (.art-infog). Contre-revue Codex du 07/09 (fixture 390x844, Tab de « Taux immobiliers » vers « Capacite et apport ») : avec `scroll-snap-type`, le navigateur amenait le lien focalise dans le cadre puis le snap le repoussait hors du scrollport (scrollLeft fige a 111, lien a 380-589px pour un cadre de 19-390px). AUCUN scroll-snap sur une rangee de liens focalisables. Le retrait du snap n'a pas suffi (Shift+Tab a 390px, Tab a 320px laissaient encore le lien a cheval sur le bord) : c'est aeconomia.js qui, au focus, deplace le scrollLeft de la rangee pour rendre le lien entier, avec la marge `scroll-padding-inline`. La hauteur de 44px est posee ici SANS condition de pointeur : sous 560px l'ecran est tactile, et la seule regle `pointer:coarse` ne tenait pas en fixture desktop (39,92px releves). */ @media(max-width:560px){ .blog-cats{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain; scroll-padding-inline:var(--pad);padding-bottom:.45rem; margin-right:calc(var(--pad) * -1);padding-right:var(--pad); scrollbar-width:thin;scrollbar-color:rgba(10,10,11,.28) transparent} .blog-cats .pill{flex:0 0 auto;white-space:nowrap;min-height:44px} } /* 2. (supprime) Le repli de vignette existait deja au kit sous `.rc-cover.is-plain`. Il avait ete recree ici sous `.rc-cover-vide` : meme erreur que les pilules et le roster, corrigee le meme jour. */ /* 3. La bande encre de fin de page a besoin d'une section porteuse. */ .darkband-wrap{padding-bottom:3rem} /* ---------- À propos : le sujet presse Capital / M6 (session 10, P2) -------- Fait VERIFIE VRAI (handoff, SOURCE-ET-RESERVES). Sur .darkband : blanc sur encre 19,79:1, lime sur encre 13,56:1, blanc 72 % sur encre 10,20:1. */ .apropos-presse{display:flex;flex-direction:column;gap:.9rem} .apropos-presse-k{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem} .apropos-presse-badge{display:inline-flex;align-items:center;gap:.45rem; background:var(--lime);color:var(--ob);border-radius:99px;padding:5px 12px; font-family:var(--mono);font-size:12px;letter-spacing:.09em} .apropos-presse-src{font-family:var(--mono);font-size:12px;letter-spacing:.1em; color:rgba(255,255,255,.6)} .apropos-presse-q{margin:0;font-size:clamp(1.6rem,3.6vw,2.4rem);font-weight:600; letter-spacing:-.03em;color:#fff;line-height:1.15} .apropos-presse-p{margin:0;max-width:68ch;color:rgba(255,255,255,.78);line-height:1.62} /* ---------- RESSOURCES — portage du handoff Dimitri du 21/08 (26/08/2026) ---- Sections dessinees par Dimitri et posees dans parts/page-blog.php : le heros a quatre tuiles, le panneau encre du bareme, l'article a la une, l'en-tete /articles. La bande de fin reutilise `.darkband` du kit, `.darkband-wrap` (l.562) trouve enfin son gabarit. NON PORTE, donc AUCUNE regle ici : la bibliotheque de guides (les 6 PDF n'existent pas au depot) et la newsletter (formulaire = chantier tracking). SORTIES avec leur markup : `.res-taux` et `.res-taux-legal`, la rangee de 4 cartes claires du 17/08. Ses quatre taux sont repris a l'identique dans `.res-tx-grid` et sa ligne legale mot pour mot dans `.res-tx-legal`. DEUX ECARTS VOLONTAIRES avec les cotes de la maquette, les memes qu'au pattern 27 : plancher de 12px sur tout texte pose sur encre (elle descend a 10 et 10,5px), et alphas de blanc remontes de .45/.5 a .62 — rgba(255,255,255,.45) sur #0A0A0B mesure 4,53:1 (conforme seulement au-dela de 12px), a .62 il mesure 7,75:1 a toute taille. Calcule, pas affirme. */ /* --- Heros : titre et chapeau cote a cote, puis la rangee de chiffres --- */ .res-head{display:flex;gap:clamp(1.6rem,3.4vw,2.75rem);flex-wrap:wrap;align-items:flex-end} /* Le max-width:15ch de .blog-head h1 saute : le titre est ecrit en deux lignes explicites, c'est le markup qui commande la coupe, pas la mesure. */ .res-head h1{flex:1 1 460px;min-width:min(280px,100%);max-width:none;margin:0} .res-head h1 span[data-mask]{display:block} .res-head .lead{flex:1 1 320px;min-width:min(260px,100%);margin:0} /* `.stb` du kit : la grille a 4 colonnes et ses deux replis sont deja ecrits (aeconomia.css l.546, l.785, l.813) — on ne les redit pas. Seules changent les deux cotes ou la maquette differe : chiffre a 24px et libelle en casse normale, la ou le kit met un label mono capitales. L'accueil garde les siennes : la surcharge est scopee. */ .res-stats{margin-top:clamp(1.6rem,3vw,2rem)} .res-stats.stb .card{padding:1.25rem} .res-stats.stb b{font-size:1.5rem;letter-spacing:-.03em} .res-stats.stb .k{font-family:var(--body);font-size:.84rem;text-transform:none;letter-spacing:0; color:var(--ob2);margin-top:.4rem;line-height:1.4} /* --- Panneau encre du bareme --- */ .res-tx{position:relative;overflow:hidden;background:var(--ob);color:#fff; border-radius:var(--r-frame);padding:clamp(1.6rem,3.2vw,2.75rem); display:flex;gap:clamp(1.6rem,3.4vw,3rem);flex-wrap:wrap;align-items:flex-start} /* Halo lime de la maquette. En position:absolute il sort du flux flex, il ne devient donc pas une 5e colonne. z-index 0 sous les deux colonnes a 1. */ .res-tx::after{content:"";position:absolute;top:-200px;right:4%;z-index:0; width:min(560px,90%);height:480px;pointer-events:none;border-radius:50%; background:radial-gradient(50% 50% at 50% 50%,rgba(173,232,60,.14),rgba(173,232,60,0) 70%)} .res-tx-l{position:relative;z-index:1;flex:1 1 330px;min-width:min(270px,100%)} .res-tx-r{position:relative;z-index:1;flex:1 1 400px;min-width:min(275px,100%)} .res-tx-badge{display:inline-flex;align-items:center;gap:9px;background:var(--lime);color:var(--ob); font-family:var(--mono);font-size:12px;letter-spacing:.1em;padding:7px 13px;border-radius:var(--pill)} /* La pastille du badge est ENCRE : le fond, lui, est deja lime. */ .res-tx-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ob);flex:none} .res-tx h2{color:#fff;font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:1.02;letter-spacing:-.038em; margin:1.1rem 0 0;text-wrap:balance} /* Second temps du titre : gris clair SANS surligneur, c'est la maquette. 7,75:1. */ .res-tx h2 span{color:rgba(255,255,255,.62)} .res-tx-p{font-size:1rem;line-height:1.55;color:rgba(255,255,255,.68);margin:1rem 0 0;max-width:420px} .res-tx .btn{margin-top:1.6rem} .res-tx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px; background:rgba(255,255,255,.16);border-radius:18px;overflow:hidden} .res-tx-cell{background:var(--ob);padding:1.35rem 1.25rem;transition:background .3s var(--ease)} .res-tx-cell:hover{background:#141613} .res-tx-dur{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.62)} .res-tx-rate{font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:clamp(1.6rem,3vw,2.1rem);letter-spacing:-.05em;margin-top:.6rem;line-height:1} .res-tx-note{font-size:12.5px;color:rgba(255,255,255,.62);margin-top:.55rem;line-height:1.45} /* La mention L.313-4 ne s'attenue jamais : 12,5px plancher, alpha .62 (7,75:1). */ .res-tx-legal{font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.62);margin:1.1rem 0 0} /* Mobile (book §06) : seul le comparatif passe a UNE colonne ; les quatre cellules de taux gardent les deux colonnes de la maquette Ressources (repeat(2,…)) et se resserrent. Une colonne empilait ~520px de taux avant le premier article ; la tuile de date du heros (1.5rem) ne tient pas en 2 colonnes a 390px, elle descend a 1.25rem. */ @media(max-width:560px){ .res-tx-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .res-tx-cell{padding:1rem .9rem} .res-tx-rate{font-size:1.45rem} .res-stats.stb b{font-size:1.25rem} } /* --- Article a la une --- */ .res-feat{display:flex;flex-wrap:wrap;background:var(--white);border:1px solid rgba(10,10,11,.1); border-radius:22px;overflow:hidden; transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .3s} .res-feat:hover{border-color:var(--ob);transform:translateY(-3px); box-shadow:0 24px 48px -38px rgba(10,10,11,.55)} /* La couverture EST `.rc-cover` du kit (l.429-442) : image, voiles .tint/.shade et repli `.is-plain` viennent de la, on n'en ecrit pas une deuxieme copie. Ne changent ici que le format et la largeur de colonne. */ .res-feat-cover{flex:1 1 380px;min-width:min(280px,100%);aspect-ratio:4/3;padding:0} .res-feat-in{flex:1 1 420px;min-width:min(280px,100%);padding:clamp(1.6rem,3vw,2.6rem); display:flex;flex-direction:column;gap:.75rem;justify-content:center} .res-feat-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center; font-family:var(--mono);font-size:12px;color:#6E6E73} .res-feat-cat{background:var(--ob);color:#fff;padding:5px 10px;border-radius:var(--pill);white-space:nowrap} .res-feat h2{font-size:clamp(1.5rem,2.8vw,2.25rem);line-height:1.1;letter-spacing:-.03em;margin:0; text-wrap:balance} .res-feat p{font-size:.97rem;line-height:1.55;color:var(--ob2);margin:0} .res-feat-auth{display:flex;align-items:center;gap:10px;margin-top:.4rem;flex-wrap:wrap} .res-feat-sig{font-size:.86rem;color:#6E6E73} .res-feat-auth .rvlink{margin-left:auto} .res-feat:hover .rvlink{gap:13px} @media(max-width:760px){.res-feat-cover{flex:1 1 100%;aspect-ratio:16/9}} /* --- En-tete /articles : titre a gauche, compteur a droite --- */ .res-arthead{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:flex-end;justify-content:space-between} /* Le `.seyeb` du kit prend toute la largeur et pose --gap-lab dessous : dans cette rangee c'est le H2 qui porte l'ecart, sinon la ligne se disloque. */ .res-arthead .seyeb{flex-basis:100%;margin-bottom:0} .res-arthead .h2{margin:.8rem 0 0} .res-artcount{font-family:var(--mono);font-size:12px;color:#6E6E73;white-space:nowrap;padding-bottom:.35rem} /* --- Bande encre de fin : le numero en mono, comme dans la maquette --- */ .res-final-tel{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em} .blog-cats .pill:hover,.blog-cats .pill.on{background:var(--ob,#0A0A0B);border-color:var(--ob,#0A0A0B);color:#fff} .blog-cats .pill:hover b,.blog-cats .pill.on b{color:var(--lime,#ADE83C)} /* Ressources — direction retenue le 09/09 : lecture, preuve et action distinctes. */ body:has(.resources-design){background:#F7F7F5;background-image:none} body:has(.resources-design)::before,body:has(.resources-design)::after{background-image:none} .resources-design [data-reveal],.resources-design [data-mask]{opacity:1!important;transform:none!important;animation:none!important;clip-path:none!important} .resources-design .blog-head{padding-top:48px;padding-bottom:32px} .resources-design .blog-head>.seyeb{margin-bottom:clamp(22px,2.4vw,30px)} .resources-design .blog-head h1{font-size:clamp(36px,4.6vw,64px);line-height:1.05;max-width:850px;letter-spacing:-.04em} .resources-design .res-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:end} .resources-design .res-intro{max-width:480px} .resources-design .res-intro .lead{font-size:19px;line-height:1.55;margin:0 0 16px} .resources-design .res-intro>p:last-child{font-size:15px;color:#555550;line-height:1.5;margin:0} .resources-design .resources-count{font:400 13px/1.5 var(--mono);font-variant-numeric:tabular-nums;color:#555550;margin-top:24px} .resources-design .resources-feature{padding:16px 0 48px} .resources-design .resources-feature-label{font:600 15px/1.5 var(--sky);margin:0 0 16px} .resources-design .res-feat{box-shadow:none;transform:none;border:1px solid #c9c9c3;border-radius:24px;background:#fff;display:grid;grid-template-columns:1fr 1fr} .resources-design .res-feat-cover{min-width:0;aspect-ratio:4/3} .resources-design .res-feat-cover img{filter:none;opacity:1} .resources-design .res-feat .tint,.resources-design .res-feat .shade{display:none} .resources-design .res-feat-in{min-width:0;padding:32px;gap:20px} .resources-design .res-feat h2{font-size:clamp(24px,2.3vw,34px);line-height:1.16} .resources-design .res-feat-meta{font:400 13px/1.5 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none} .resources-design .res-feat-cat{white-space:normal;background:var(--lime);color:var(--ob);font-size:13px} .resources-design .res-feat-auth{gap:10px} .resources-design .res-feat-auth .rvlink{flex:1 0 100%;margin:14px 0 0;min-height:44px} .resources-design .resources-catalogue{padding:8px 0 0} .resources-design .resources-search{margin:24px 0;max-width:720px} .resources-design .resources-search label{display:block;margin-bottom:10px;font:600 16px/1.5 var(--sky);color:#0A0A0B} .resources-design .resources-search-controls{display:flex;gap:10px} .resources-design .resources-search input{min-width:0;flex:1;width:100%;min-height:50px;padding:12px 16px;border:1px solid #767670;border-radius:10px;background:#fff;color:#0A0A0B;font:400 16px/1.5 var(--sky)} .resources-design .resources-search input::placeholder{color:#555550;opacity:1} .resources-design .resources-search button{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:50px;padding:12px 20px;border:1px solid #0A0A0B;border-radius:10px;background:#0A0A0B;color:#fff;font:600 15px/1.5 var(--sky);cursor:pointer} .resources-design .resources-search button span{color:#ADE83C} .resources-design .resources-search :is(input,button):focus-visible{outline:2px solid #0A0A0B;outline-offset:4px} .resources-design .resources-search-scope{margin:10px 0 0;color:#555550;font:400 15px/1.55 var(--sky)} .resources-design .resources-search-scope a{color:#0A0A0B;text-decoration:underline;text-underline-offset:3px} .resources-design .resources-search-scope a:focus-visible{outline:2px solid #0A0A0B;outline-offset:4px} @media(max-width:480px){.resources-design .resources-search-controls{flex-direction:column}.resources-design .resources-search button{align-self:flex-start}} .resources-design .res-arthead{align-items:baseline;gap:16px;margin-bottom:24px} .resources-design .res-arthead .h2{font-size:34px;line-height:1.2;margin:0} .resources-design .res-artcount{font:400 13px/1.5 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none;color:#555550} .resources-design .blog-cats{flex-wrap:wrap;overflow:visible;padding-bottom:0;gap:8px} .resources-design .blog-cats .pill{font:500 13px/1.5 var(--mono);letter-spacing:.02em;text-transform:none;min-height:44px;white-space:normal;padding:10px 16px} .resources-design .blog-list{padding-top:28px;padding-bottom:48px} .resources-design .related-grid{gap:28px;align-items:stretch} .resources-design .rel-card{background:transparent;border:0;border-radius:0;box-shadow:none;transform:none;border-top:1px solid #c9c9c3;padding-top:24px;display:flex;flex-direction:column} .resources-design .rc-cover{border-radius:16px;aspect-ratio:16/10;overflow:hidden} .resources-design .rc-cover img{filter:none;opacity:1;transform:none} .resources-design .rc-cover .tint{display:none} .resources-design .rc-cover .shade{background:linear-gradient(transparent 58%,rgba(10,10,11,.8))} .resources-design .rc-cover.is-plain{aspect-ratio:auto;min-height:0;height:auto;background:none;display:block;overflow:visible;margin:0 0 4px} .resources-design .rc-cover.is-plain::before,.resources-design .rc-cover.is-plain::after{display:none} .resources-design .rc-cover.is-plain .rc-cat{position:static;display:inline-flex;max-width:100%;background:var(--lime);color:var(--ob);font-size:12px;letter-spacing:0;padding:6px 10px;line-height:1.4} .resources-design .rc-in{padding:22px 0 0;gap:14px;flex:1;display:flex;flex-direction:column} .resources-design .rc-in h2{font:600 23px/1.25 var(--sky);letter-spacing:-.025em;overflow:visible;-webkit-line-clamp:unset;display:block;max-height:none;margin:0} .resources-design .rc-meta{font:400 13px/1.5 var(--mono);font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0;color:#555550} .resources-design .rc-more{margin-top:auto;padding-top:14px;min-height:44px;font:600 15px/1.5 var(--sky);text-decoration:underline;text-underline-offset:4px} .resources-design .res-tx{padding:32px;border-radius:24px;gap:40px} .resources-design .res-tx h2{font-size:30px;line-height:1.15} .resources-design .res-tx-p{font-size:16px;line-height:1.6} .resources-design .res-tx-rate{font-size:36px} .resources-design .res-tx-legal{font-size:14px;line-height:1.6} .resources-design .resources-back{display:inline-flex;align-items:center;gap:12px;min-height:44px;font:500 15px/1.5 var(--sky);text-decoration:underline;text-underline-offset:4px;margin-bottom:20px} .resources-design.resources-archive .blog-head h1{margin:0 0 22px} .resources-design .resources-empty{padding:32px;background:#fff;border:1px solid #c9c9c3;border-radius:20px;max-width:760px} .resources-design .resources-empty h2{font-size:28px;line-height:1.2;margin:0 0 18px} .resources-design .resources-empty p{font-size:17px;line-height:1.6;margin:0 0 22px} .resources-final{padding-top:0;padding-bottom:64px} .resources-final .darkband h2{font-size:clamp(30px,3.3vw,44px);line-height:1.12} .resources-final .resources-hours{font:400 14px/1.6 var(--sky);color:#ddd;margin:18px auto 0;max-width:580px} .article-next .h2{font-size:32px;margin-bottom:26px} .resources-cover-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:240px;height:100%;font:600 36px/1.2 var(--sky);letter-spacing:-.04em;background:var(--lime);color:var(--ob)} .resources-cover-fallback small{font:400 15px/1.5 var(--sky);letter-spacing:0} @media(max-width:980px){.resources-design .res-head{grid-template-columns:1fr;gap:26px}.resources-design .res-intro{max-width:640px}.resources-design .res-feat{grid-template-columns:1fr 1fr}.resources-design .res-feat-in{padding:26px}.resources-design .related-grid{gap:28px 24px}} @media(max-width:760px){.resources-design .res-feat{grid-template-columns:1fr}.resources-design .res-feat-cover{aspect-ratio:16/9}.resources-design .blog-head{padding-top:30px}.resources-design .res-intro .lead{font-size:18px}.resources-design .res-arthead .h2{font-size:29px}.resources-design .res-tx{padding:26px}.resources-design .res-tx h2{font-size:28px}.resources-design .res-tx-rate{font-size:30px}.resources-final{padding-bottom:40px}} @media(max-width:600px){.resources-design .rc-in h2{font-size:23px}.resources-design .resources-empty{padding:24px}.resources-design .blog-cats{display:flex;gap:8px}.resources-design .blog-cats .pill{font-size:13px;padding:9px 12px}.resources-design .res-artcount{font-size:13px}} .resources-design .res-feat-cover{width:100%;height:100%;aspect-ratio:auto;align-self:stretch} .resources-design .res-feat-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} @media(max-width:760px){.resources-design .res-feat-cover{height:auto;min-height:0;aspect-ratio:16/9}} /* Ressources : une sélection illustrée, puis la bibliothèque du corpus WordPress. Les archives et la recherche gardent les mêmes cartes et leurs vraies destinations. */ .resources-design .res-head{align-items:center;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)} .resources-design .res-head h1{font-size:clamp(42px,5.2vw,76px);line-height:.98;max-width:750px;margin:0} .resources-design .res-head h1>span{display:inline} .resources-design .res-head .lead{font:400 18px/1.55 var(--sky);max-width:540px;margin:22px 0 0;color:var(--ob2)} .resources-design .res-head .resources-search{margin:0;width:100%;max-width:none} .resources-design .resources-topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;margin:32px 0 0;padding:10px 0;border-top:1px solid #c9c9c3;border-bottom:1px solid #c9c9c3} .resources-design .resources-topics a{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px;padding:10px 8px;font:500 13px/1.5 var(--mono);text-decoration:none;color:var(--ob);border-radius:6px} .resources-design .resources-topics a:hover{background:#eef0e8;text-decoration:underline;text-underline-offset:4px} .resources-design .resources-topics a[aria-current="page"]{background:var(--lime);font-weight:500} .resources-design .resources-topic-count{font:400 12px/1.5 var(--mono);font-variant-numeric:tabular-nums;flex:none;color:#55565A} .resources-design .res-feat--text{grid-template-columns:1fr} .resources-design .res-feat--text .res-feat-in{max-width:850px} .resources-design .resources-catalogue{padding-top:8px} .resources-design .resources-catalogue .res-arthead{margin-bottom:0} .resources-design .res-artcount{margin:0;white-space:normal} .resources-design .blog-list{padding-top:0} .resources-design .resources-article-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px;align-items:stretch} .resources-design .resources-row{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid #d1d1ca;border-radius:16px;background:#fff;color:var(--ob);text-decoration:none;transition:border-color .2s ease,transform .2s ease} .resources-design .resources-row:hover{border-color:var(--ob);transform:translateY(-3px)} .resources-design .resources-row:last-child{border-bottom:1px solid #d1d1ca} .resources-design .resources-row:last-child:hover{border-bottom-color:var(--ob)} .resources-design .resources-row-image{width:100%;aspect-ratio:16/9;overflow:hidden;background:#e9e9e4} .resources-design .resources-row-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease} .resources-design .resources-row:hover .resources-row-image img{transform:scale(1.035)} .resources-design .resources-row--text::before{content:"/aeconomia.";display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:var(--ob);color:var(--lime);font:600 clamp(23px,2vw,31px)/1 var(--sky);letter-spacing:-.035em} .resources-design .resources-row-body{display:flex;flex-direction:column;gap:12px;min-width:0;padding:22px 22px 0;flex:1} .resources-design .resources-row-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font:400 11px/1.5 var(--mono);font-variant-numeric:tabular-nums;color:#55565A} .resources-design .resources-row-meta>span:first-child{font-weight:500;color:var(--ob);box-shadow:inset 0 -.45em 0 var(--lime)} .resources-design .resources-row-body :is(h2,h3){font:600 clamp(19px,1.65vw,24px)/1.2 var(--sky);letter-spacing:-.025em;margin:0;overflow-wrap:break-word} .resources-design .resources-row-excerpt{font:400 14px/1.55 var(--sky);color:#55565A;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .resources-design .resources-row-action{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:12px 22px 16px;font:600 14px/1.45 var(--sky)} .resources-design .resources-row-action::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime)} .resources-design .resources-row:hover .resources-row-action{text-decoration:underline;text-underline-offset:5px} .resources-design :is(.resources-row,.resources-topics a,.res-feat):focus-visible{outline:2px solid var(--ob);outline-offset:5px} .resources-design.resources-archive .blog-list{padding-top:0} .resources-design.resources-archive .resources-count{margin:0 0 24px} @media(max-width:980px){ .resources-design .res-head{grid-template-columns:1fr;gap:26px} .resources-design .res-head .resources-search{max-width:620px} .resources-design .resources-topics{column-gap:16px} .resources-design .resources-article-list{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:600px){ .resources-design .resources-topics{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;margin-top:28px} .resources-design .resources-topics a{font-size:12px;gap:8px;min-height:54px;padding:9px 4px} .resources-design .resources-topic-count{font-size:12px} .resources-design .resources-article-list{grid-template-columns:1fr;gap:18px} .resources-design .resources-row-body :is(h2,h3){font-size:22px;line-height:1.25} .resources-design .resources-row-excerpt{font-size:15px} } .resources-design .resources-author-photo{width:40px;height:40px;object-fit:cover;object-position:center 20%;border-radius:50%;flex:none} .resources-design .resources-topics-disclosure{margin:20px 0 0;border-bottom:1px solid #c9c9c3;padding-bottom:10px} .resources-design .resources-topics-disclosure summary{cursor:pointer;min-height:44px;padding:10px 0;font:500 16px/1.5 var(--sky);color:var(--ob)} .resources-design .resources-topics-disclosure summary:focus-visible{outline:2px solid var(--ob);outline-offset:4px} .resources-design .resources-topics-disclosure .resources-topics{margin-top:8px;border-bottom:0} .resources-design.resources-archive .blog-head h1{overflow-wrap:anywhere} /* Ressources : le repère daté précède la sélection et le catalogue. */ .resources-design .resources-rates{padding-top:24px;padding-bottom:48px} .resources-design .res-tx-date{font:400 13px/1.5 var(--mono);color:var(--lime);margin:0 0 20px} .resources-design .blog-list>.resources-topics{margin-top:0;margin-bottom:28px}