/* ============================================================================= SEO by Belentia — « Moins plat » (24/09/2026) Retour de Kylian : « SEO manque d'icônes, c'est pour ça que je le trouve plat ; pareil pour son dashboard. » Pictos au trait de la même famille que Transcriptor et QR Code (24 × 24, trait 1,75, bouts arrondis), violet de l'outil ou gris encre, sur pastille grise #F2F3F5 quand il en faut une. Chargée après seo-v33.css sur les 4 pages ; script : seo-icones.js. Sans JavaScript ou en mouvement réduit : tout est affiché, rien ne bouge (les états « avant entrée » dépendent de html.ico-armed, posé en synchrone dans seulement si le mouvement est permis ; seo-icones.js confirme avec html.ico-live, sinon un filet le retire au bout de 3 s). ========================================================================== */ /* ------------------------------------------------------------- socle */ svg.ico { display: inline-block; flex: 0 0 auto; overflow: visible; } /* Tracé à l'entrée : le picto attend, invisible, que le script le dessine. */ .ico-armed svg.ico:not(.ico--still):not(.is-drawn) { opacity: 0; } /* Pastille des pictos du kit [data-check] : carré arrondi gris, picto violet. Même geste que les coches (la pastille grandit, le trait se dessine). */ .check--ico .check__tick { stroke-width: 2.25; stroke-dasharray: 1 1.1; } /* Tracé caché : le trait part juste avant le début du chemin (WebKit dessinerait sinon le bout arrondi, un point violet, avant l'entrée). */ .has-scroll [data-check]:not(.is-in) .check--ico .check__tick { stroke-dashoffset: 1.05; } /* Contrôle DA (24/09) : dans Chromium, scroll.js pose has-scroll et is-in dans la même image ; sans état caché calculé avant, aucune transition ne partait (premier écran de tarifs figé). L'état caché dépend maintenant de html.ico-armed (posé dans ) et l'entrée est une animation, qui part à coup sûr dans les deux moteurs, avec la cascade du kit (--check-delay). */ .ico-armed [data-check]:not(.is-in) .check--ico .check__ring { opacity: 0; transform: scale(.4); } .ico-armed [data-check]:not(.is-in) .check--ico .check__tick { stroke-dashoffset: 1.05; } .ico-armed [data-check].is-in .check--ico .check__ring { transition: none; animation: seo-pill-in .5s var(--scroll-ease, cubic-bezier(.2, .7, .2, 1)) var(--check-delay, 0ms) both; } .ico-armed [data-check].is-in .check--ico .check__tick { transition: none; animation: seo-pill-tick .55s cubic-bezier(.65, 0, .35, 1) calc(var(--check-delay, 0ms) + 180ms) both; } @keyframes seo-pill-in { from { opacity: 0; transform: scale(.4); } 60% { opacity: 1; } to { opacity: 1; transform: none; } } @keyframes seo-pill-tick { from { stroke-dashoffset: 1.05; } to { stroke-dashoffset: 0; } } .ticks li > .check--ico { width: 28px; height: 28px; margin-top: 0; } .ticks-row li > .check--ico { width: 24px; height: 24px; } @media (max-width: 720px) { .ticks li > .check--ico { width: 26px; height: 26px; } } /* Puces (chips) : picto violet devant le libellé gris. */ .chip svg.ico { width: 14px; height: 14px; color: var(--accent); } /* ============================================================ hero (A) */ /* Les trois faits : un picto parlant à la place de la coche, même taille. */ .hero .ticks-row svg.ico { width: 18px; height: 18px; color: var(--accent); } /* ------------------------------------ démonstration (le « dashboard ») */ /* Statut : cercle gris en attente, arc violet qui tourne pendant l'analyse, cercle violet coché quand l'audit est terminé. */ .demo__status { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .demo-st { width: 18px; height: 18px; flex: 0 0 18px; overflow: visible; } .demo-st path { fill: none; stroke-linecap: round; stroke-linejoin: round; } .demo-st__track { stroke: var(--accent); stroke-width: 2; transition: stroke .3s ease; } .demo-st__spin { stroke: var(--accent); stroke-width: 2; opacity: 0; transform-box: view-box; transform-origin: 12px 12px; } .demo-st__ok { stroke: var(--accent); stroke-width: 2.2; stroke-dasharray: 1 1.1; /* trou plus long que le tracé : */ stroke-dashoffset: 0; /* aucun bout arrondi posé au départ (WebKit) */ transition: stroke-dashoffset .4s cubic-bezier(.65, 0, .35, 1) .12s; } .demo-armed #demo .demo-st__track, #demo.is-waiting .demo-st__track, #demo.is-scanning .demo-st__track { stroke: #E6E8EE; } .demo-armed #demo .demo-st__ok, #demo.is-waiting .demo-st__ok, #demo.is-scanning .demo-st__ok { stroke-dashoffset: 1.05; transition: none; } #demo.is-scanning .demo-st__spin { opacity: 1; animation: seo-spin .9s linear infinite; } @keyframes seo-spin { to { transform: rotate(360deg); } } /* Les trois « Essentiels » de la checklist réelle (audit n° 16 : sitemap.xml, robots.txt et HTTPS au vert) se cochent un à un pendant l'exploration. */ .demo-ess { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.4; color: var(--muted); } .demo-ess__i { display: inline-flex; align-items: center; gap: 7px; transition: color .3s ease; } .demo-ess__i.is-ok { color: var(--ink); } .demo-ess__ck { width: 18px; height: 18px; flex: 0 0 18px; overflow: visible; } .demo-ess__ring { fill: var(--canvas); stroke: #D9DCE3; stroke-width: 1.5; transition: fill .25s ease, stroke .25s ease; } .demo-ess__tick { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1.1; stroke-dashoffset: 1.05; transition: stroke-dashoffset .35s cubic-bezier(.65, 0, .35, 1) .08s; } .demo-ess__i.is-ok .demo-ess__ring { fill: #F2F3F5; stroke: #F2F3F5; } .demo-ess__i.is-ok .demo-ess__tick { stroke-dashoffset: 0; } .demo-armed #demo .demo-ess__i { color: var(--muted); } .demo-armed #demo .demo-ess__ring { fill: var(--canvas); stroke: #D9DCE3; } .demo-armed #demo .demo-ess__tick { stroke-dashoffset: 1.05; } /* Catégories : picto gris devant chaque barre, le même que dans l'explorateur ; la valeur compte jusqu'au score réel avec sa barre. */ .cbar__k { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .cbar__k svg.ico, .demo__geo svg.ico { width: 16px; height: 16px; color: var(--muted); } .demo__geo svg.ico { display: inline-block; margin-right: 8px; vertical-align: -3px; } .cbar__v [data-demo-bar] { font-variant-numeric: tabular-nums; } /* Compteurs de sévérité : le picto de l'app (cercle, triangle, info), dans la couleur fonctionnelle du rapport ; il se pose quand le compte démarre. */ .demo-sev { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; transition: transform .45s cubic-bezier(.3, 1.5, .5, 1), opacity .3s ease; } .demo-sev--crit { color: var(--sev-crit-ink); } .demo-sev--warn { color: var(--sev-warn-ink); } .demo-sev--info { color: var(--sev-info-ink); } .demo__counts > span:nth-child(2) .demo-sev { transition-delay: 90ms; } .demo__counts > span:nth-child(3) .demo-sev { transition-delay: 180ms; } .demo-armed #demo .demo-sev, #demo.is-uncounted .demo-sev { transform: scale(.4); opacity: 0; } /* Téléphone : trois colonnes égales, picto et nombre, libellé dessous (comme les cartes de la vue d'ensemble de l'app) ; rien ne passe seul à la ligne. */ @media (max-width: 520px) { .demo__counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .demo__counts > span { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; row-gap: 0; } .demo__counts .demo-sev { margin-right: 6px; vertical-align: 0; } .demo__counts b { font-size: 17px; line-height: 1.3; } .demo-cnt__l { grid-column: 1 / -1; line-height: 1.35; } } /* Constats : petite page devant l'adresse concernée. */ .demo-find__p svg.ico { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; color: #9CA3AF; } #demo.is-resetting .demo-st__ok, #demo.is-resetting .demo-st__track, #demo.is-resetting .demo-ess__i, #demo.is-resetting .demo-ess__ring, #demo.is-resetting .demo-ess__tick, #demo.is-resetting .demo-sev { transition: none !important; } /* ================================================= comment ça marche */ /* Un picto dans chaque cercle, à la place du numéro : ils se dessinent l'un après l'autre pendant que la ligne les relie. */ .step__n svg.ico { width: 20px; height: 20px; color: var(--accent); } /* Étapes 2 et 3 : la même pastille que l'étape 1 (l'adresse qui s'écrit), avec ce que l'on voit dans l'app : le score réel, le bouton « Nouvel audit ». */ .step__demo svg.ico { width: 14px; height: 14px; flex: 0 0 14px; color: var(--accent); } .step__demo b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; } /* Contrôle DA : 18 px réels (la règle .step__demo svg de la page, plus forte, le ramenait à 14 px), piste plus lisible, trait plus plein : une jauge, pas une roue d'attente. */ .step__demo .mini-ring { width: 18px; height: 18px; flex: 0 0 18px; overflow: visible; } /* l'arc part de midi */ .mini-ring path { fill: none; stroke-width: 3.5; } .mini-ring__track { stroke: #D9DCE3; } .mini-ring__bar { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100 110; stroke-dashoffset: 24; /* 76 / 100 — état final, visible sans JS */ transition: stroke-dashoffset 1.1s cubic-bezier(.2, .7, .3, 1); } .ico-armed .mini-ring:not(.is-on) .mini-ring__bar { stroke-dashoffset: 105; } /* =========================================== catalogue (explorateur) */ /* Un picto par catégorie, gris ; violet sur l'onglet ouvert. */ .explorer .exp-tab__ico { width: 18px; height: 18px; flex: 0 0 18px; margin-right: -6px; color: #9CA3AF; transition: color var(--t) var(--ease); } .explorer .exp-tab:hover .exp-tab__ico { color: var(--muted); } .explorer .exp-tab[aria-selected="true"] .exp-tab__ico { color: var(--accent); } @media (max-width: 900px) { .explorer .exp-tab__ico { margin-right: -2px; } } /* Les trois vérifications d'un onglet entrent en cascade, à chaque onglet. */ @keyframes seo-rise { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } } .ico-armed .explorer:not(.is-seen) .explorer__panel > .vcheck { opacity: 0; } .ico-armed .explorer.is-seen .explorer__panel:not([hidden]) > .vcheck { animation: seo-rise .45s var(--ease) both; } .ico-armed .explorer.is-seen .explorer__panel:not([hidden]) > .vcheck:nth-of-type(2) { animation-delay: 90ms; } .ico-armed .explorer.is-seen .explorer__panel:not([hidden]) > .vcheck:nth-of-type(3) { animation-delay: 180ms; } /* « Voir les N vérifications » : une coche violette devant chaque vérification du catalogue ; à l'ouverture, elles se posent une à une. */ .explorer__list li { display: flex; align-items: flex-start; gap: 10px; } .explorer__list li::before { content: ""; flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } .ico-armed .explorer__list li::before { transform: scale(.3); opacity: 0; transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), opacity .2s ease; } .ico-armed .explorer__list.is-on li::before { transform: none; opacity: 1; transition-delay: calc(var(--i, 0) * 28ms); } /* =============================================== vos données (A) */ .fact > .fact__icon { flex: 0 0 40px; margin-top: -2px; } .fact { gap: var(--space-2); } @media (max-width: 720px) { #donnees .fact > .fact__icon { width: 36px; height: 36px; flex-basis: 36px; margin-top: 0; } #donnees .fact > .fact__icon svg { width: 18px; height: 18px; } /* Contrôle DA : sur le gris de la section (liste légère, sans carte), la pastille grise disparaissait ; blanche, cernée d'un filet, comme .try. */ #donnees .fact > .fact__icon { background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line); } } /* ======================================= blog, article : métadonnées */ .post-meta svg.ico { width: 16px; height: 16px; margin-right: 6px; vertical-align: -2px; color: #9CA3AF; } /* Bandeau « Essayer » (blog) et « Passer à la pratique » (article) : la pastille de l'outil (loupe d'analyse) devant le texte. */ .try__lead { display: flex; align-items: flex-start; gap: var(--space-2); } .try__lead > .card__icon { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px; } .try__lead > .card__icon svg { width: 22px; height: 22px; } .practice__head { display: flex; align-items: center; gap: 12px; } .practice__head > .card__icon { flex: 0 0 40px; } .practice__head .eyebrow { margin: 0; } /* Sur le gris très clair de ces deux bandeaux, la pastille passe en blanc, cernée d'un filet (sinon elle disparaît, gris sur gris). */ .try__lead > .card__icon, .practice__head > .card__icon { background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line); } /* Article : la liste d'actions vérifiables devient une liste de cases qui se cochent l'une après l'autre (kit [data-check]). */ .sm-prose ul.prose-checks li::before { content: none; } .sm-prose ul.prose-checks li { align-items: flex-start; gap: 12px; } .prose-checks li > .check--box { width: 24px; height: 24px; margin: 3px 0 0; flex: 0 0 24px; } .check--box .check__tick { stroke-width: 2.6; } /* ========================================== contrôle DA (24/09) */ /* Étapes : carré arrondi (r12), le rayon des pastilles de la famille (QR Code et Transcriptor mettent leurs étapes dans des carrés). */ .step__n { border-radius: 12px; } /* Explorateur : l'onglet ouvert se dit par son picto, son libellé et son nombre violets ; la coche en plus (5e marque, trait plus épais) est retirée. */ /* Téléphone (≤ 720 px) et tablette en colonne : la hauteur de l'explorateur ne change plus à chaque rotation des onglets (593 ↔ 689 px) ; tous les panneaux partagent la même case de grille, les cachés restent invisibles mais comptent dans la hauteur (celle du plus long, GEO). Le kit motion impose [hidden] { display: none !important } : on le surclasse ici. */ @media (max-width: 900px) { .explorer > .explorer__panel { grid-row: 2; grid-column: 1; } .explorer > .explorer__panel[hidden] { display: block !important; visibility: hidden; pointer-events: none; } } /* Démonstration : le compteur de pages garde la largeur de « 15 » dès l'attente ; à 360 px la ligne ne passe plus de 1 à 2 lignes à « 10 » (saut de 24 px sur le premier écran). */ #demo .demo__scan-row b[data-demo-count] { display: inline-block; min-width: 2ch; font-variant-numeric: tabular-nums; } /* Premier écran du téléphone : avec la ligne des Essentiels (+32 px), le « 76 » de l'anneau passait sous le bas de l'écran (390 × 844). On regagne 42 px au-dessus de l'anneau, sans rien retirer. */ @media (max-width: 520px) { .demo-zone .ticks-row { margin-top: 28px; } .demo-pin { margin-top: 24px; } .demo__scan { padding-bottom: 14px; } .demo-ess { margin-top: 8px; } .demo__grid { padding-top: 16px; } } /* ============================================ mouvement réduit */ @media (prefers-reduced-motion: reduce) { #demo.is-scanning .demo-st__spin { animation: none; } .explorer__panel > .vcheck { animation: none !important; opacity: 1 !important; } }