/* ============================================================================ PAGES DE CONTENU — blog, comparatifs, « pour qui », contact, pages légales, réglages, suivi de tâche, pages d'erreur ---------------------------------------------------------------------------- Mesuré le 10/09 avant intervention : ces gabarits ne recevaient AUCUNE règle (entre 29 et 81 % de leurs éléments sans style à 390 px). Ils vivaient sur `projection.css`, vidée le 5/09 ; aucune feuille V2 ne les avait repris. Le texte touchait le bord de l'écran et courait sur 160 caractères par ligne. RIEN N'EST INVENTÉ ICI. La section 1 reprend tel quel le vocabulaire déjà écrit pour l'index des outils et les tarifs ; la carte d'article est celle de l'accueil ; la rangée de lien est la `.k-outil` de l'accueil. Chaque section suivante ne porte que ce qui est propre à sa page. Règles de la charte tenues partout : aucun groupe d'information en carte (bord + rayon + ombre) ; le bleu ne dit qu'action, actif ou signalement ; capitales seulement dans la voix technique mono ; texte ≥ 13 px ; jamais `--c-ink-3` pour du texte ; seuils 560 / 720 / 960. ========================================================================== */ /* --- 1 · Vocabulaire commun ------------------------------------------------- */ /* Plusieurs gabarits posent encore `color:var(--muted-l)` en style direct, jeton de l'ancien système : sans repli la couleur est invalide et le texte hérite de l'encre pleine. On l'aiguille vers le jeton actuel. */ .proj{--muted-l:var(--c-ink-2);--ink:var(--c-ink)} .wrap{width:100%;max-width:calc(var(--w-content) + 2*var(--gutter)); margin-inline:auto;padding-inline:var(--gutter)} .proj section{padding-block:var(--section-y)} /* Une section imbriquée (articles liés, bande d'outils) n'est pas une bande : elle ne reprend pas la respiration de sa parente. */ .proj section section{padding-block:0} .proj section.light{background:var(--c-bg-2);border-block:1px solid var(--c-line)} .proj section.light + section.light{border-top:0} /* En-tête de page : la bande grise des tarifs et de l'index des outils. */ .proj .hero{padding-block:var(--s-8);background:var(--c-bg-2); border-bottom:1px solid var(--c-line)} .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2); font-size:var(--fs-0);color:var(--c-ink-2)} /* Cible de 44 px sans épaissir la ligne : la marge négative rend au texte la hauteur que la cible occupe. */ .crumbs a{display:inline-flex;align-items:center;min-height:44px;margin-block:-12px; color:var(--c-ink-2);text-decoration:none} .crumbs a:hover{color:var(--c-action);text-decoration:underline} .crumbs .here{color:var(--c-ink)} .proj .hero h1{margin-top:var(--s-4);font-size:clamp(2.25rem,4vw,3.25rem); line-height:var(--lh-tight);max-width:22ch} .proj .hero .lead{margin-top:var(--s-4);font-size:var(--fs-3); line-height:var(--lh-body);color:var(--c-ink-2);max-width:var(--w-text)} .hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)} @media (max-width:559px){ .hero-actions{flex-direction:column} .proj .hero-actions .btn{width:100%}} /* Titres de section : la voix technique mono au-dessus, le h2 dessous. */ .kicker{display:block;font-family:var(--f-mono);font-size:var(--fs-0); letter-spacing:.02em;text-transform:uppercase;color:var(--c-ink-2); font-variant-numeric:tabular-nums} .kicker .n:empty{display:none} .display{font-size:clamp(1.75rem,2.4vw,2.25rem);line-height:var(--lh-tight); color:var(--c-ink);max-width:24ch} /* Niveau C de la charte : sections utilitaires (liens, questions, réglages). */ .display--c{font-size:clamp(1.5rem,1.9vw,1.875rem);max-width:none} .kicker + .display{margin-top:var(--s-2)} /* `.proj` : la fenêtre de connexion, hors de `.proj`, a aussi un `.sub`. */ .proj .sub{margin-top:var(--s-3);font-size:var(--fs-2);line-height:var(--lh-body); color:var(--c-ink-2);max-width:var(--w-text)} /* Boutons : même ancrage `.proj` que auth.css, chargée avant et plus spécifique que `.btn` — sans lui les variantes perdent fond et trait. */ .proj .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2); min-height:var(--control-h);padding-inline:var(--s-5);cursor:pointer; border:1px solid transparent;border-radius:var(--r-1); font-family:inherit;font-size:var(--fs-1);font-weight:var(--fw-ui);line-height:1.2; text-decoration:none;white-space:nowrap; transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)} .proj .btn:active{transform:translateY(1px)} .proj .btn-beam{background:var(--c-action);color:var(--c-on-action)} .proj .btn-beam:hover{background:var(--c-action-hover);color:var(--c-on-action)} .proj .btn-ghost-l,.proj .btn-ghost-d{background:var(--c-surface);color:var(--c-ink); border-color:var(--c-line-strong)} .proj .btn-ghost-l:hover,.proj .btn-ghost-d:hover{background:var(--c-surface-2);color:var(--c-ink)} .proj .btn-danger{background:var(--c-danger);color:#fff} .proj .btn-danger:hover{background:color-mix(in srgb,var(--c-danger) 86%,#000);color:#fff} .proj .btn-sm{min-height:var(--control-h-sm);padding-inline:var(--s-4)} /* 36 px est le petit contexte de la charte ; au doigt, tout contrôle fait 44. */ @media (max-width:959px){.proj .btn-sm{min-height:var(--control-h)}} .proj .btn:disabled{opacity:.5;cursor:not-allowed} .proj .btn svg{flex:none} /* Sous 560 px un libellé long passe à la ligne au lieu de pousser la page (mesuré : 15 px de débordement à 320 sur « Lire les Conditions… »). */ @media (max-width:559px){.proj .btn{max-width:100%;white-space:normal;text-align:center;padding-block:var(--s-2)}} /* Rangée de lien — la `.k-outil` de l'accueil : un nom, une flèche toujours visible, le survol ne fait que la teinter. Sert au maillage (comparatifs, cas d'usage, outils recommandés, bande d'outils du blog). */ .k-rangees{display:grid;grid-template-columns:minmax(0,1fr);margin-top:var(--s-5); border-top:1px solid var(--c-line)} @media (min-width:560px){.k-rangees{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-6)}} @media (min-width:960px){.k-rangees{grid-template-columns:repeat(3,minmax(0,1fr))}} /* `.rel > a` : les liens de maillage que le serveur émet sans classe commune (`compare-sibling-link`, `usecase-sibling-link`, `tool-crosslink-card`). */ .k-rangee,.rel > a{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto; align-items:center;gap:var(--s-3);min-height:48px;padding:var(--s-2) var(--s-3); margin-inline:calc(-1 * var(--s-3));border-radius:var(--r-1); color:var(--c-ink);text-decoration:none;font-size:var(--fs-1);font-weight:var(--fw-ui); line-height:var(--lh-snug);transition:background var(--t-fast) var(--ease)} .k-rangee::before,.rel > a::before{content:"";position:absolute;inset-inline:var(--s-3);bottom:0; border-bottom:1px solid var(--c-line)} .k-rangee::after,.rel > a::after{content:"";width:7px;height:7px;margin-inline-end:4px; border-right:1.75px solid var(--c-ink-3);border-bottom:1.75px solid var(--c-ink-3); transform:rotate(-45deg);transition:border-color var(--t-fast) var(--ease)} [dir="rtl"] .k-rangee::after,[dir="rtl"] .rel > a::after{transform:rotate(135deg)} .k-rangee:hover,.k-rangee:focus-visible,.rel > a:hover,.rel > a:focus-visible{ background:var(--c-surface-2);color:var(--c-ink)} .k-rangee:hover::after,.k-rangee:focus-visible::after, .rel > a:hover::after,.rel > a:focus-visible::after{border-color:var(--c-action)} .k-rangee > svg,.k-rangee > span > svg{width:22px;height:22px;stroke-width:1.75;color:var(--c-ink-3); transition:color var(--t-fast) var(--ease)} .k-rangee:hover svg,.k-rangee:focus-visible svg{color:var(--c-action)} .k-rangee b,.rel > a b{font-weight:var(--fw-ui)} /* Sans icône, la première colonne n'existe pas. */ .k-rangee:not(:has(svg)),.rel > a:not(:has(svg)){grid-template-columns:minmax(0,1fr) auto} @media (min-width:960px){.k-rangee,.rel > a{min-height:56px}} /* Questions : le dépliant des tarifs, repris tel quel. */ .faq-grid{max-width:48rem;margin-top:var(--s-6);border-top:1px solid var(--c-line)} .faq-grid details,.faq-item{border-bottom:1px solid var(--c-line)} .faq-grid summary,.faq-item summary{display:flex;align-items:center;justify-content:space-between; gap:var(--s-4);min-height:56px;padding-block:var(--s-4);cursor:pointer;list-style:none; font-size:var(--fs-2);font-weight:var(--fw-ui);color:var(--c-ink);line-height:var(--lh-snug)} .faq-grid summary::-webkit-details-marker,.faq-item summary::-webkit-details-marker{display:none} .faq-grid summary::after,.faq-item summary::after{content:"";flex:none;width:.55rem;height:.55rem; border-right:1.75px solid var(--c-ink-2);border-bottom:1.75px solid var(--c-ink-2); transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--t-fast) var(--ease)} .faq-grid details[open] summary::after,.faq-item[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)} .faq-grid summary:hover,.faq-item summary:hover{color:var(--c-action)} .faq-item summary strong{font-weight:var(--fw-ui);color:inherit} .faq-grid details p,.faq-item p{padding-bottom:var(--s-4);font-size:var(--fs-1); color:var(--c-ink-2);line-height:var(--lh-body);max-width:var(--w-text)} /* Tableaux de vérification : ceux des tarifs. Un tableau large défile dans sa propre boîte, jamais la page. */ .cmp-wrap,.blog-table-wrap,.legal-table-wrap{overflow-x:auto;border:1px solid var(--c-line); border-radius:var(--r-2);background:var(--c-surface)} .cmp,.article-table,.legal-table{width:100%;min-width:32rem;border-collapse:collapse; font-size:var(--fs-1)} .cmp th,.cmp td,.article-table th,.article-table td,.legal-table th,.legal-table td{ padding:var(--s-3) var(--s-4);text-align:start;vertical-align:top; border-bottom:1px solid var(--c-line);color:var(--c-ink-2)} .cmp thead th,.article-table thead th,.legal-table thead th{ font-size:var(--fs-0);font-weight:var(--fw-title);color:var(--c-ink-2); border-bottom-color:var(--c-line-strong)} .cmp tbody tr > :first-child,.article-table tbody tr > :first-child, .legal-table tbody tr > :first-child{font-weight:var(--fw-ui);color:var(--c-ink)} .cmp tbody tr:last-child > *,.article-table tbody tr:last-child > *, .legal-table tbody tr:last-child > *{border-bottom:0} /* --- 2 · Article de blog ---------------------------------------------------- */ /* Une colonne de lecture de 640 px ; sur ordinateur le sommaire la longe à gauche et TOUT le haut de l'article (titre, appel, image) s'aligne sur elle : un seul bord gauche pour l'œil qui lit. */ .art-sec{padding-block:var(--s-6) var(--s-9)} .art-back{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px; color:var(--c-ink-2);font-size:var(--fs-1);font-weight:var(--fw-ui);text-decoration:none} .art-back:hover{color:var(--c-action)} [dir="rtl"] .art-back svg{transform:scaleX(-1)} .art-tags{display:flex;flex-wrap:wrap;gap:var(--s-1);margin-top:var(--s-3)} .blog-card-tag{display:inline-flex;align-items:center;min-height:24px;padding:0 var(--s-2); border-radius:var(--r-pill);background:var(--c-surface-2);color:var(--c-ink-2); font-size:var(--fs-0);font-weight:var(--fw-ui);line-height:1} .art-head h1{margin-top:var(--s-3);font-size:clamp(2rem,1.5rem + 2.4vw,3rem); line-height:var(--lh-tight);max-width:22ch} .art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-top:var(--s-4); font-size:var(--fs-1);color:var(--c-ink-2)} .art-meta b{font-weight:var(--fw-ui);color:var(--c-ink)} .art-meta .ava{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%; background:var(--c-action-soft);color:var(--c-action);font-size:var(--fs-0);font-weight:var(--fw-title)} .art-meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor} .art-hero{margin-top:var(--s-6)} .art-hero:empty{display:none} .art-hero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover; border:1px solid var(--c-line-strong);border-radius:var(--r-2); background:var(--c-frame);filter:saturate(.88)} .art{margin-top:var(--s-7)} .art-aside{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6);margin-bottom:var(--s-7)} @media (min-width:1024px){ /* 16 rem : la place exacte des cinq boutons de partage sur une ligne (5 × 44 + 4 × 8 = 252 px) ; à 15 rem le dernier passait dessous. */ .art{display:grid;grid-template-columns:16rem minmax(0,var(--w-text));column-gap:var(--s-8); align-items:start} .art-head,.art-hero,.art-sec .kcta-top{margin-inline-start:calc(16rem + var(--s-8));max-width:var(--w-text)} .art-aside{position:sticky;top:calc(var(--header-h) + var(--s-5));margin-bottom:0}} /* Sommaire : la rangée active prend l'encre, le poids et un trait bleu — jamais la couleur seule. */ .blog-toc-title,.art-share > p{margin-bottom:var(--s-2);font-size:var(--fs-0); font-weight:var(--fw-title);color:var(--c-ink-2)} .blog-toc-list{border-top:1px solid var(--c-line)} .blog-toc-list a{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline; gap:var(--s-3);min-height:44px;padding:var(--s-2) 0 var(--s-2) var(--s-3); border-bottom:1px solid var(--c-line);color:var(--c-ink-2);text-decoration:none; font-size:var(--fs-1);line-height:var(--lh-snug); transition:color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)} .blog-toc-list a:hover,.blog-toc-list a:focus-visible{color:var(--c-ink)} .blog-toc-list a[aria-current]{color:var(--c-ink);font-weight:var(--fw-ui); box-shadow:inset 2px 0 0 var(--c-action)} .blog-toc-num{font-family:var(--f-mono);font-size:var(--fs-0);color:var(--c-ink-2)} .share-row{display:flex;flex-wrap:wrap;gap:var(--s-2)} .blog-share-btn{display:inline-grid;place-items:center;width:44px;height:44px; border:1px solid var(--c-line-strong);border-radius:var(--r-1);background:var(--c-surface); color:var(--c-ink-2);transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)} .blog-share-btn svg{width:18px;height:18px} .blog-share-btn:hover,.blog-share-btn:focus-visible{background:var(--c-surface-2);color:var(--c-ink)} .blog-share-btn--copied{border-color:var(--c-action);color:var(--c-action)} /* Corps de l'article : le texte long de la charte, 16 px, interligne 1,55, 640 px. Les titres internes sont des h2 de niveau C. */ .blog-post-content{font-size:var(--fs-2);line-height:var(--lh-body);color:var(--c-ink-2)} .blog-post-content > * + *{margin-top:var(--s-4)} .blog-post-content h2{margin-top:var(--s-8);font-size:clamp(1.5rem,1.9vw,1.875rem); line-height:1.2;color:var(--c-ink);scroll-margin-top:calc(var(--header-h) + var(--s-5))} .blog-post-content h3{margin-top:var(--s-6);font-family:var(--f-sans);font-size:var(--fs-3); letter-spacing:0;color:var(--c-ink)} .blog-post-content h2 + *,.blog-post-content h3 + *{margin-top:var(--s-3)} .blog-post-content strong,.blog-post-content b{font-weight:var(--fw-title);color:var(--c-ink)} .blog-post-content a:not([class]){color:var(--c-action);text-decoration:underline} .blog-post-content ul > li,.legal-body ul > li{position:relative;padding-inline-start:var(--s-5)} .blog-post-content ul > li + li,.blog-post-content ol > li + li, .legal-body ul > li + li,.legal-body ol > li + li{margin-top:var(--s-2)} /* Marqueur commun à toutes les listes du site (vente.css, tarifs) : un carré bleu de 6 px, aucune coche, aucune icône à charger. */ .blog-post-content ul > li::before,.legal-body ul > li::before{content:"";position:absolute; inset-inline-start:0;top:.62em;width:6px;height:6px;border-radius:2px;background:var(--c-action)} .blog-post-content ol,.legal-body ol:not(.legal-toc ol){list-style:decimal;padding-inline-start:var(--s-5)} .blog-post-content ol > li::marker,.legal-body ol > li::marker{color:var(--c-ink-2); font-family:var(--f-mono);font-size:var(--fs-0)} .blog-post-content img{height:auto;border-radius:var(--r-2);border:1px solid var(--c-line)} .blog-post-content figcaption{margin-top:var(--s-2);font-size:var(--fs-0);color:var(--c-ink-2)} .blog-post-content blockquote{margin-inline:0;padding-inline-start:var(--s-4); border-inline-start:2px solid var(--c-line-strong);color:var(--c-ink)} .blog-post-content hr{margin-block:var(--s-7);border:0;border-top:1px solid var(--c-line)} .blog-post-content code{padding:0 4px;border-radius:4px;background:var(--c-surface-2); font-family:var(--f-mono);font-size:.92em} .blog-post-content .faq-item{margin-top:0} .blog-post-content h2 + .faq-item{margin-top:var(--s-4);border-top:1px solid var(--c-line)} /* Encart publicitaire : annoncé en voix technique, séparé du texte par deux filets. Un emplacement que la régie laisse vide disparaît. */ .klx-ad{margin-block:var(--s-6);padding-block:var(--s-3);border-block:1px solid var(--c-line); text-align:center} .blog-post-content .klx-ad + *{margin-top:0} .klx-ad-label{display:block;margin-bottom:var(--s-2);font-family:var(--f-mono); font-size:var(--fs-0);letter-spacing:.02em;text-transform:uppercase;color:var(--c-ink-2)} .klx-ad ins{display:block} /* Tant que la régie n'a pas rempli l'emplacement, il ne prend AUCUNE hauteur : sans cela l'annonce « Publicité » coiffait 250 px de vide (mesuré à 1280). Il reste dans le flux et garde sa largeur — la régie en a besoin pour choisir un format ; un bloc masqué ne serait jamais servi. */ .klx-ad:not(:has(ins[data-ad-status="filled"])){height:0;margin-block:0;padding-block:0; border:0;overflow:hidden} /* Appels vers l'outil : quatre densités, une seule famille. */ .kcta-ic{display:inline-grid;place-items:center;flex:none;width:40px;height:40px; border-radius:var(--r-1);background:var(--c-action-soft);color:var(--c-action)} .kcta-ic svg{width:20px;height:20px} .kcta-tx{display:grid;gap:2px;min-width:0} .kcta-eyebrow,.kcta-sub{font-size:var(--fs-1);color:var(--c-ink-2);line-height:var(--lh-snug)} .kcta-title{font-size:var(--fs-2);font-weight:var(--fw-title);color:var(--c-ink);line-height:var(--lh-snug)} .kcta-top{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center; gap:var(--s-3) var(--s-4);margin-top:var(--s-6);padding:var(--s-4); border:1px solid var(--c-line);border-radius:var(--r-2);background:var(--c-surface)} .proj .kcta-top .btn{grid-column:1/-1} @media (min-width:560px){ .kcta-top{grid-template-columns:auto minmax(0,1fr) auto} .proj .kcta-top .btn{grid-column:auto}} .blog-post-content .kcta-mid{display:grid;grid-template-columns:auto minmax(0,1fr) auto; align-items:center;gap:var(--s-3);margin-block:var(--s-6);padding:var(--s-3) var(--s-4); border:1px solid var(--c-line);border-radius:var(--r-2);background:var(--c-surface); color:var(--c-ink);text-decoration:none;transition:background var(--t-fast) var(--ease)} .blog-post-content .kcta-mid::after{content:"";width:7px;height:7px;margin-inline-end:4px; border-right:1.75px solid var(--c-ink-3);border-bottom:1.75px solid var(--c-ink-3); transform:rotate(-45deg)} .blog-post-content .kcta-mid:hover,.blog-post-content .kcta-mid:focus-visible{background:var(--c-surface-2)} .blog-post-content .kcta-mid:hover::after,.blog-post-content .kcta-mid:focus-visible::after{border-color:var(--c-action)} .blog-post-content .kcta-mid + *{margin-top:0} .kcta-end{display:grid;gap:var(--s-3);justify-items:start;margin-top:var(--s-8); padding:var(--s-6) var(--s-5);border-radius:var(--r-3);background:var(--c-bg-2)} /* L'icône accompagne le titre, sur sa ligne : la charte réserve le chip posé au-dessus à la tête d'une famille, jamais à un élément seul. */ .kcta-end{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:var(--s-3)} .kcta-end > .benefit,.kcta-end > .kcta-end-row{grid-column:1/-1} .kcta-end h3{font-family:var(--f-sans);font-size:var(--fs-4);letter-spacing:-0.01em;color:var(--c-ink)} .kcta-end .benefit{font-size:var(--fs-2);color:var(--c-ink-2);max-width:46ch} .kcta-end-row{display:grid;gap:var(--s-3);width:100%;margin-top:var(--s-2)} @media (min-width:560px){.kcta-end-row{grid-template-columns:minmax(0,1fr) auto;align-items:center}} .kcta-drop{display:flex;align-items:center;gap:var(--s-3);min-height:56px;padding:0 var(--s-4); border:1.5px dashed var(--c-line-strong);border-radius:var(--r-2);background:var(--c-surface); color:var(--c-ink-2);font-size:var(--fs-1);text-decoration:none; transition:border-color var(--t-fast) var(--ease)} .kcta-drop svg{flex:none;color:var(--c-action)} .kcta-drop:hover{border-color:var(--c-action);color:var(--c-ink)} /* Rappel mobile : la barre collante du système, montrée par blog-article.js entre le bloc du haut et celui de fin. Le bouton flottant « + » se retire tant qu'elle est là, sinon elle le recouvre. */ .kcta-sticky{position:fixed;inset-inline:0;bottom:0;z-index:45;display:flex;align-items:center; gap:var(--s-3);padding:var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom)); border-top:1px solid var(--c-line); background:color-mix(in srgb,var(--c-bg) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px)} .kcta-sticky .kcta-ic{width:34px;height:34px} .kcta-sticky .kcta-ic svg{width:18px;height:18px} .kcta-sticky-label{flex:1;min-width:0;font-size:var(--fs-1);font-weight:var(--fw-ui); color:var(--c-ink);line-height:var(--lh-snug)} .kcta-btn{display:inline-flex;align-items:center;min-height:var(--control-h);padding:0 var(--s-4); border-radius:var(--r-1);background:var(--c-action);color:var(--c-on-action); font-size:var(--fs-1);font-weight:var(--fw-ui);text-decoration:none;white-space:nowrap} .kcta-btn:hover{background:var(--c-action-hover);color:var(--c-on-action)} @media (min-width:960px){.kcta-sticky{display:none}} body:has(#ktaSticky:not([hidden])) .k-plus{display:none} /* Articles similaires : la carte d'article de l'accueil, en rangées compactes sur téléphone. */ .blog-related{margin-top:var(--s-9);padding-top:var(--s-7);border-top:1px solid var(--c-line)} /* Le titre de la bande d'outils est un

émis par le serveur : il reçoit ici la voix du h2 voisin, sinon deux titres de même rang ne se ressemblaient pas. */ .blog-related h2,.blog-strip-title{font-family:var(--f-display);font-size:clamp(1.5rem,1.9vw,1.875rem); font-weight:var(--fw-title);letter-spacing:var(--ls-title);line-height:1.2;color:var(--c-ink)} .blog-grid-related{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);margin-top:var(--s-6)} .blog-card{display:flex;flex-direction:column;gap:var(--s-3);color:var(--c-ink);text-decoration:none} .blog-card:hover{color:var(--c-ink)} .blog-card-image{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-2); border:1px solid var(--c-line-strong);background:var(--c-frame)} .blog-card-image img{width:100%;height:100%;object-fit:cover;filter:saturate(.88); transition:transform var(--t-base) var(--ease),filter var(--t-base) var(--ease)} .blog-card:hover .blog-card-image img{transform:scale(1.02);filter:saturate(1)} .blog-card-placeholder{display:grid;place-items:center;height:100%;color:var(--c-on-frame);opacity:.55} .blog-card-body{display:grid;gap:var(--s-1)} .blog-card-title{font-family:var(--f-sans);font-size:var(--fs-3);font-weight:var(--fw-ui); letter-spacing:0;line-height:var(--lh-snug);color:var(--c-ink)} .blog-card-sm .blog-card-title{font-size:var(--fs-2)} .blog-card-meta{display:flex;flex-wrap:wrap;gap:var(--s-2);font-family:var(--f-mono); font-size:var(--fs-0);letter-spacing:.02em;color:var(--c-ink-2)} .blog-card-meta span + span::before{content:"\00b7";margin-inline-end:var(--s-2);color:var(--c-line-strong)} @media (max-width:719px){ .blog-grid-related{gap:0} .blog-grid-related .blog-card{display:grid;grid-template-columns:clamp(104px,32vw,132px) minmax(0,1fr); gap:var(--s-3);align-items:start;padding-block:var(--s-4);border-bottom:1px solid var(--c-line)} .blog-grid-related .blog-card:first-child{padding-top:0}} @media (min-width:720px){.blog-grid-related{grid-template-columns:repeat(3,minmax(0,1fr))}} /* Bande d'outils de fin d'article : des rangées `.k-rangee`. */ .blog-strip{margin-top:var(--s-8)} .blog-strip-grid{display:grid;grid-template-columns:minmax(0,1fr);margin-top:var(--s-5); border-top:1px solid var(--c-line)} @media (min-width:560px){.blog-strip-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-6)}} @media (min-width:960px){.blog-strip-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} .blog-strip-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto; align-items:center;gap:var(--s-3);min-height:48px;padding:var(--s-2) var(--s-3); margin-inline:calc(-1 * var(--s-3));border-radius:var(--r-1);color:var(--c-ink); text-decoration:none;font-size:var(--fs-1);font-weight:var(--fw-ui); transition:background var(--t-fast) var(--ease)} .blog-strip-card::before{content:"";position:absolute;inset-inline:var(--s-3);bottom:0; border-bottom:1px solid var(--c-line)} .blog-strip-card::after{content:"";width:7px;height:7px;margin-inline-end:4px; border-right:1.75px solid var(--c-ink-3);border-bottom:1.75px solid var(--c-ink-3); transform:rotate(-45deg);transition:border-color var(--t-fast) var(--ease)} [dir="rtl"] .blog-strip-card::after{transform:rotate(135deg)} .blog-strip-ic{display:inline-flex;color:var(--c-ink-3);transition:color var(--t-fast) var(--ease)} .blog-strip-ic svg{width:22px;height:22px;stroke-width:1.75} .blog-strip-card:hover,.blog-strip-card:focus-visible{background:var(--c-surface-2);color:var(--c-ink)} .blog-strip-card:hover .blog-strip-ic,.blog-strip-card:focus-visible .blog-strip-ic{color:var(--c-action)} .blog-strip-card:hover::after,.blog-strip-card:focus-visible::after{border-color:var(--c-action)} @media (min-width:960px){.blog-strip-card{min-height:56px}} /* --- 3 · Liste du blog ------------------------------------------------------ */ .blog-sec:first-child{padding-top:var(--s-8)} .blog-sec h1.display{font-size:clamp(2.25rem,4vw,3.25rem);max-width:16ch} .blog-sec--suite{padding-top:0} /* La carte d'article de l'accueil (`.post`), à l'identique : même média 16:9, même pastille de catégorie, même métadonnée mono. Trois colonnes dès 720 ; sur téléphone une grande carte puis des rangées compactes. */ .posts{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6);margin-top:var(--s-7)} @media (min-width:720px){.posts{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-7) var(--s-5)}} @media (max-width:719px){ .posts{gap:var(--s-5)} .posts .post:nth-child(n+2){display:grid;grid-template-columns:clamp(104px,32vw,132px) minmax(0,1fr); gap:var(--s-3);align-items:start;padding-top:var(--s-5);border-top:1px solid var(--c-line)} .posts .post:nth-child(n+2) .post-tags{margin-bottom:0} .posts .post:nth-child(n+2) .post-tags span{min-height:0;padding:0;border:0;background:none; font-family:var(--f-mono);font-size:var(--fs-0);letter-spacing:.02em;color:var(--c-ink-2)} .posts .post:nth-child(n+2) .post-meta{margin-top:0} .posts .post:nth-child(n+2) .blog-card-title{font-size:var(--fs-2);display:-webkit-box; -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .posts .post:nth-child(n+2) p{display:none}} .post{display:flex;flex-direction:column;gap:var(--s-3);text-decoration:none;color:var(--c-ink)} .post:hover{color:var(--c-ink)} .post-media{position:relative;aspect-ratio:16/9;border-radius:var(--r-2);overflow:hidden; background:var(--c-frame);border:1px solid var(--c-line-strong)} .post-media img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block; filter:saturate(.88);transition:transform var(--t-base) var(--ease),filter var(--t-base) var(--ease)} .post:hover .post-media img{transform:scale(1.02);filter:saturate(1)} .post-body{display:grid;gap:var(--s-1)} .post-tags{display:flex;flex-wrap:wrap;gap:var(--s-1);margin-bottom:var(--s-1)} .post-tags span{display:inline-flex;align-items:center;min-height:22px;padding:0 var(--s-2); border-radius:var(--r-pill);border:1px solid var(--c-line);background:var(--c-surface); color:var(--c-ink-2);font-size:var(--fs-0);font-weight:var(--fw-ui)} .post-body p{font-size:var(--fs-1);color:var(--c-ink-2);display:-webkit-box; -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-top:var(--s-1); font-family:var(--f-mono);font-size:var(--fs-0);letter-spacing:.02em;color:var(--c-ink-2)} .post-meta b{font-weight:var(--fw-ui)} .post-meta b::before{content:"\00b7";margin-inline-end:var(--s-2);color:var(--c-line-strong)} /* Pagination : des cibles de 44 px ; la page courante est pleine ET grasse. */ .blog-pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2);margin-top:var(--s-8)} .blog-page-btn{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 var(--s-3); border:1px solid var(--c-line-strong);border-radius:var(--r-1);background:var(--c-surface); color:var(--c-ink);font-size:var(--fs-1);font-weight:var(--fw-ui);text-decoration:none; transition:background var(--t-fast) var(--ease)} a.blog-page-btn:hover{background:var(--c-surface-2);color:var(--c-ink)} .blog-page-btn.active{border-color:var(--c-action);background:var(--c-action); color:var(--c-on-action);font-weight:var(--fw-title)} .blog-page-dots{display:inline-grid;place-items:center;min-width:24px;height:44px;color:var(--c-ink-2)} /* Outils à découvrir : les mêmes rangées que la bande de fin d'article. */ .strip-chips{display:grid;grid-template-columns:minmax(0,1fr);margin-top:var(--s-5); border-top:1px solid var(--c-line)} @media (min-width:560px){.strip-chips{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s-6)}} /* --- 4 · Comparatifs et « pour qui » --------------------------------------- */ /* Fonds alternés dans l'ordre de la charte : l'en-tête gris, puis blanc, gris… Une section `suite` prolonge la précédente (même fond, pas de respiration haute) : c'est ce que le gabarit faisait en style direct. */ .proj section.suite{padding-top:0} .proj section.final{background:var(--c-bg-2);border-block:1px solid var(--c-line)} .final-solo .wrap{max-width:calc(var(--w-text) + 2*var(--gutter));text-align:center} .final-solo .display,.final-solo .sub{margin-inline:auto} /* L'unique bouton de clôture est élargi (charte 7.1 : 48 px de marge). */ .proj .final-solo .btn{margin-top:var(--s-6);padding-inline:var(--s-7)} /* Verdict : six catégories à balayer. Une rangée par catégorie sous un filet, jamais une carte ; le gagnant se lit à son encre, à son poids et à son carré bleu — jamais à la couleur seule. */ .verdict-grid{max-width:64rem;margin-top:var(--s-6);border-top:1px solid var(--c-line)} .verdict-card{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3);padding-block:var(--s-5);border-bottom:1px solid var(--c-line)} @media (min-width:720px){.verdict-card{grid-template-columns:13rem minmax(0,1fr);column-gap:var(--s-6);align-items:start}} .verdict-card h3{font-size:var(--fs-2);letter-spacing:0;color:var(--c-ink)} .verdict-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-5)} .verdict-cell{display:grid;align-content:start;gap:var(--s-1)} .verdict-cell b{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--f-mono); font-size:var(--fs-0);font-weight:var(--fw-text);letter-spacing:.02em;text-transform:uppercase; color:var(--c-ink-2)} .verdict-cell p{font-size:var(--fs-1);line-height:var(--lh-body);color:var(--c-ink-2)} .verdict-cell.win b{color:var(--c-ink);font-weight:var(--fw-ui)} .verdict-cell.win b::before{content:"";flex:none;width:6px;height:6px;border-radius:2px;background:var(--c-action)} .verdict-cell.win p{color:var(--c-ink);font-weight:var(--fw-ui)} .proj section .cmp-wrap{max-width:64rem;margin-top:var(--s-6)} .cmp td.hl{color:var(--c-ink);font-weight:var(--fw-ui)} /* Trois colonnes courtes (un nom, deux coches) : elles tiennent à 390 px sans défilement. */ .proj section .cmp{min-width:20rem} /* Prix côte à côte : deux colonnes sous un trait, comme les phases d'outils ; celle de Klipa porte le trait bleu. Aucun cadre. */ .plans{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6);margin-top:var(--s-6)} @media (min-width:720px){.plans--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-7);max-width:48rem}} .plan{display:grid;align-content:start;justify-items:start;gap:var(--s-2);padding-top:var(--s-4); border-top:1.5px solid var(--c-ink)} .plan-star{border-top:2px solid var(--c-action)} .plan h3{font-size:var(--fs-3);letter-spacing:0;color:var(--c-ink)} .plan .for{font-size:var(--fs-3);font-weight:var(--fw-title);color:var(--c-ink);line-height:var(--lh-snug)} .price-note{font-size:var(--fs-1);line-height:var(--lh-body);color:var(--c-ink-2)} .proj .plan .btn{margin-top:var(--s-3)} /* Items : un trait au-dessus, un titre, un texte. Trois colonnes dès 720. */ .steps{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6);margin-top:var(--s-6)} @media (min-width:720px){ .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)} .steps--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-7);max-width:48rem}} .step{display:grid;align-content:start;gap:var(--s-2);padding-top:var(--s-4);border-top:1px solid var(--c-line)} .step--klipa{border-top:2px solid var(--c-action)} .step .n{font-family:var(--f-mono);font-size:var(--fs-0);letter-spacing:.02em;text-transform:uppercase; color:var(--c-ink-2);font-variant-numeric:tabular-nums} .step h3{font-size:var(--fs-3);letter-spacing:0;color:var(--c-ink)} .step p{font-size:var(--fs-1);line-height:var(--lh-body);color:var(--c-ink-2);max-width:46ch} /* Le parcours est une VRAIE séquence : le rail de la charte (7.4). Points de 11 px, le premier plein bleu ; une ligne les relie. Horizontal dès 720, vertical avec un retrait de 28 px en dessous. */ .steps-4 .step{position:relative;border-top:0;padding-top:0;padding-inline-start:28px} .steps-4 .step::before{content:"";position:absolute;top:.3em;inset-inline-start:0;width:11px;height:11px; border:1.5px solid var(--c-ink);border-radius:50%;background:var(--c-bg-2)} /* `:first-of-type` : le premier enfant est le