/* ============================================================================= v31.css — CV by Belentia, « v3 affinée » (22/09/2026) ----------------------------------------------------------------------------- Chargée APRÈS les styles de page (dernier du ). Trois règles, rien d'autre : 1. moins de teal : la couleur de l'outil reste sur le bouton principal, le mot du H1, l'onglet actif et quelques chiffres ; le reste passe en gris ; 2. aucune ombre (sauf menu « Plus » et info-bulle du parcours, 1 px) ; 3. mouvement plus doux : 400–700 ms, décalages courts. ========================================================================== */ :root { --pill: #F2F3F5; /* pastilles d'icônes, chips neutres */ --btn-line: #D9DCE3; /* bord des boutons secondaires */ --shadow: 0 1px 2px rgba(17, 24, 39, .05); /* menus uniquement */ --accent-5: #F3F8F8; --accent-4: #F5F9F9; } @supports (background: color-mix(in srgb, #000 5%, #fff)) { :root { --accent-5: color-mix(in srgb, var(--accent) 5%, #FFF); --accent-4: color-mix(in srgb, var(--accent) 4%, #FFF); } } /* ------------------------------------------------------------------ Eyebrow */ .eyebrow, .section-head .eyebrow { display: flex; align-items: center; gap: 8px; color: #6B7280; letter-spacing: .1em; } .eyebrow::before { content: ''; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); } /* ------------------------------------------------------------------ Marque */ /* Le logo reste le carré teal plein de la v3 : c'est l'identité de l'outil, pas une surface d'appel à l'action (il ne compte pas dans « 1 aplat »). */ /* ------------------------------------------------------ Barre de navigation */ /* Fond blanc opaque : plus de flou qui laisse voir les cartes derrière. */ .nav { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--line); } /* ----------------------------------------------------------------- Boutons */ .btn--secondary, .btn--ghost { background: var(--canvas); color: var(--ink); border-color: var(--btn-line); } .btn--secondary:hover, .btn--ghost:hover { background: var(--canvas); color: var(--ink); border-color: var(--accent); } /* ------------------------------------------------ Pastilles et chips neutres */ .tile__icon, .card__icon, .steps__n, .ticks__mark { background: var(--pill); color: var(--accent); } .chip { background: var(--pill); color: var(--text); } /* La seule chip teintée : « Le catalogue actuel », sur la carte All Access. */ .plan--featured .plan__flag .chip { background: var(--canvas); color: var(--accent); box-shadow: none; outline: 1px solid var(--accent); outline-offset: -1px; } .meta-line b { color: var(--ink); } /* Filtre actif de la galerie : blanc cerclé de teal, comme l'outil courant du strip. Aucun fond teinté hors All Access et bandeau final. */ .filter[aria-pressed="true"], .filter.is-active { background: var(--canvas); border-color: var(--accent); color: var(--accent); } /* Outil courant dans le strip : bord et texte teal, fond blanc. */ .tools a[aria-current="page"] { background: var(--canvas); border-color: var(--accent); color: var(--accent); } /* Réplique de l'éditeur : « Ajouter » ne se remplit plus au survol. */ .ed-add:hover { background: var(--canvas); } /* --------------------------------------------------------- Fonds teintés */ .hero.halo { background-image: none; } .compare__col--good { background: var(--canvas); border-color: var(--accent); } .plan--featured { background: var(--accent-5); } .cta-band { background: var(--accent-4); } .prose blockquote { background: var(--soft); border-color: var(--line); } .prose ul li::before { background: var(--line-strong); } /* ------------------------------------------------------------ Aucune ombre */ .cvcard, .editor, .sheet, .sheet-badge, .browser, .free-start__sheet, .card:hover, .guide-card:hover, .model:hover, .hover-lift:hover { box-shadow: none; } /* Focus et cibles du parcours : un contour, pas une ombre portée. */ .field input:focus { box-shadow: none; outline: 3px solid var(--accent-ring); outline-offset: 0; } .ed-exp[data-added="true"] { box-shadow: none; } .tour .is-tour-hover, .tour .is-tour-active { box-shadow: none; outline: 3px solid var(--accent-ring); outline-offset: 0; } .glow-border:hover, .glow-border:focus-within { box-shadow: none; outline: 3px solid var(--accent-ring); } /* Le curseur du parcours : plus d'ombre portée, un liseré blanc suffit. */ .tour__cursor { filter: none; } .tour__label { box-shadow: 0 1px 2px rgba(17, 24, 39, .05); } /* Bloc des prompts : plus de police à chasse fixe. */ .slot__prompt { font-family: var(--font-body); font-size: 13.5px; } /* ---------------------------------------------------- Coches qui se tracent */ .check__ring { fill: var(--pill); } .plan--featured .check__ring { fill: var(--canvas); } .plan__list svg.check { flex: 0 0 18px; width: 18px; height: 18px; margin: 3px 0 0; color: inherit; } .ticks li { align-items: flex-start; } .ticks svg.check { flex: 0 0 24px; width: 24px; height: 24px; margin: 1px 0 0; } ul.facts svg.check { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; } /* « Vos données » : une petite coche alignée sur la première ligne du titre, comme dans les listes des tarifs. La carte reste « texte d'abord ». */ .fact { gap: 14px; } .fact__check { display: block; flex: 0 0 22px; width: 22px; height: 22px; margin-top: 2px; } .fact__check svg.check { display: block; width: 22px; height: 22px; margin: 0; } /* ----------------------------------------------- Mouvement : 400–700 ms */ .has-scroll [data-split] .split-text__item { transition-duration: .7s; } .has-scroll [data-split="lines"] { --split-stagger: 90ms; } .has-scroll [data-split="words"] { --split-stagger: 40ms; } .has-scroll [data-wipe] { transition-duration: .7s; } .has-scroll [data-wipe] > :is(img, svg, picture, video, .wipe__media) { transition-duration: .7s; } .has-scroll [data-wipe]:not(.is-in) > :is(img, svg, picture, video, .wipe__media) { transform: scale(1.05); } .has-scroll [data-check] .check__ring { transition-duration: .45s, .3s; } .has-scroll [data-check] .check__tick { transition-duration: .5s; } /* Ordre de lecture des têtes de section : eyebrow, puis titre, puis texte. L'eyebrow et le paragraphe attendent que le titre découpé entre (même seuil que lui), au lieu de flotter seuls en bas d'écran. */ @media (prefers-reduced-motion: no-preference) { .has-scroll .section-head .eyebrow, .has-scroll .section-head [data-split] ~ p { transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1); } .has-scroll .section-head [data-split] ~ p { transition-delay: 120ms; } .has-scroll :is(.section-head, .section-head > div):has(> [data-split]:not(.is-in)) > .eyebrow, .has-scroll :is(.section-head, .section-head > div):has(> [data-split]:not(.is-in)) > [data-split] ~ p { opacity: 0; transform: translate3d(0, 14px, 0); transition-delay: 0ms; } } /* Enveloppe d'un visuel balayé : le kit observe le parent. */ .wipe-wrap { display: block; } /* Barre de lecture : sa durée suit le défilement (« auto »). Protège la barre des feuilles qui neutralisent les durées d'animation (captures, audits), sinon elle s'affiche pleine en haut de page. */ .has-sda .read-progress { animation-duration: auto !important; } /* Emplacement d'image de l'article : un bloc neutre au format réservé (la v3 laissait un grand vide sans cadre). */ .slot-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; padding: var(--space-3); background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); font-size: 14px; text-align: center; } .slot-ph > span + span { color: var(--text); font-weight: 600; }