/* scaleway.css : le kit d'écrans et de sections dessinés pour Soarway (brief v5, refait d'après les composants réels de docs/composants-references.md).

   Écrans (data-ui) : marque, contenu, croissance, systèmes, voie, projet.

   Sections : formules, process, chiffres, faq, cta (HTML réel, lisible sans l'animation).

   Aucune image : tout est HTML, CSS et SVG. Un seul fil : la marque d'exemple « Comptoir Alisier » traverse les écrans.

   Habillage : variables posées sur :root, un parent, ou en style sur la racine .sk

     --sk-accent   couleur de marque                      (défaut #2f5d46)

     --sk-ink      texte et surfaces sombres              (défaut #1b1f1c)

     --sk-paper    fond clair des cartes                  (défaut #f3f3ef)

     --sk-font     police (défaut : celle de la page)

     --sk-ratio    proportions de la racine (écrans)      (défaut propre à chaque écran)

     --sk-radius   rayon des coins de la racine (écrans)  (défaut 0)

   Écrans : toutes les mesures sont en cqw (calc(var(--u) * 1) = 1 % de la largeur du composant) : il suit son parent.

   Sections (.sk--flow) : mesures en rem, mise en page par container queries.

   Mouvement : scaleway.js pose data-sk / data-on / data-fade. Sans lui (ou sous

   prefers-reduced-motion) c'est l'état final, lisible, qui s'affiche. */

@property --tx { syntax: '<length>'; inherits: true; initial-value: 0px; }

@property --tw { syntax: '<length>'; inherits: true; initial-value: 0px; }

.sk,

.sk *,

.sk *::before,

.sk *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sk {

  --u: 1cqw;

  --acc: var(--sk-accent, #2f5d46);

  --ink: var(--sk-ink, #1b1f1c);

  --pap: var(--sk-paper, #f3f3ef);

  --mute: color-mix(in srgb, var(--ink) 68%, var(--pap));

  --s1: color-mix(in srgb, var(--ink) 4%, var(--pap));

  --s2: color-mix(in srgb, var(--ink) 8%, var(--pap));

  --s3: color-mix(in srgb, var(--ink) 15%, var(--pap));

  --soft: color-mix(in srgb, var(--acc) 24%, var(--pap));

  /* courbes relevées chez Eazyclick (DigitalStrategy.js) : maîtresse, retour, révélation */

  --ease: cubic-bezier(0.38, 0, 0, 1);

  --ease-m: cubic-bezier(0.54, 0, 0.06, 0.91);

  --ease-r: cubic-bezier(0.16, 1, 0.3, 1);

  /* ressort sans rebond du compteur NumberFlow (900 ms) */

  --roll: linear(0, .005, .019, .039, .066, .096, .129, .165, .202, .24, .278, .316, .354, .39, .426, .461, .494, .526, .557, .586, .614, .64, .665, .689, .711, .731, .751, .769, .786, .802, .817, .831, .844, .856, .867, .877, .887, .896, .904, .912, .919, .925, .931, .937, .942, .947, .951, .955, .959, .962, .965, .968, .971, .973, .976, .978, .98, .981, .983, .984, .986, .987, .988, .989, .99, .991, .992, .992, .993, .994, .994, .995, .995, .996, .996, .9963, .9967, .9969, .9972, .9975, .9977, .9979, .9981, .9982, .9984, .9985, .9987, .9988, .9989, 1);

  position: relative;

  display: block;

  width: 100%;

  aspect-ratio: var(--sk-ratio, 4 / 3);

  overflow: hidden;

  isolation: isolate;

  container-type: inline-size;

  background: var(--s1);

  color: var(--ink);

  font-family: var(--sk-font, inherit);

  border-radius: var(--sk-radius, 0);

  -webkit-text-size-adjust: none;

  text-size-adjust: none;

}

.sk svg { display: block; max-width: 100%; }

/* blocs communs */

.sk b { font-weight: 600; }

.sk .card { background: var(--pap); border-radius: calc(var(--u) * 1.2); }

.sk .btn {

  display: inline-flex; align-items: center; justify-content: center;

  height: calc(var(--u) * 5.2); padding: 0 calc(var(--u) * 2.6); border-radius: calc(var(--u) * 0.8); background: var(--acc); color: var(--pap);

  font-size: var(--f1); font-weight: 600; white-space: nowrap;

}

/* symbole de marque (feuille, arche, anneau) : la couleur du fond se règle par --vein */

/* ───────── mouvement : un état final par défaut, un état de départ quand le script joue ───────── */

.sk .m {

  transition:

    opacity 0.6s linear calc(var(--d, 0) * 1s),

    transform 1.2s var(--ease) calc(var(--d, 0) * 1s),

    translate 1.2s var(--ease) calc(var(--d, 0) * 1s),

    scale 0.5s var(--ease) calc(var(--d, 0) * 1s),

    background-color 0.5s linear calc(var(--d, 0) * 1s),

    clip-path 1.1s var(--ease-r) calc(var(--d, 0) * 1s),

    stroke-dashoffset 2.2s var(--ease) calc(var(--d, 0) * 1s);

}

.sk[data-sk]:not([data-on='1']) .m { transition: none; }

.sk[data-sk]:not([data-on='1']) .m-up { opacity: 0.62; transform: translateY(calc(var(--u) * 1.6)); }

.sk[data-sk]:not([data-on='1']) .m-pop { opacity: 0.62; transform: scale(0.94); }

.sk[data-sk]:not([data-on='1']) .m-fade { opacity: 0.62; }

.sk[data-sk]:not([data-on='1']) .m-in { opacity: 0; }

.sk[data-sk]:not([data-on='1']) .m-draw { stroke-dashoffset: 0.4; }

.sk .m-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* deux faces d'un même état (avant / après) */

/* lettres qui montent une à une (Eazyclick : translateY 110 % → 0, 0,03 s par lettre) */

/* soulèvement d'une carte qu'on déplace : le ton monte, la carte grossit (aucune ombre au repos) */

@keyframes sk-lift { 0% { scale: 1; } 30% { scale: 1.06; } 100% { scale: 1; } }

/* interrupteur (Eazyclick, vue Modules) : le fond passe à la couleur de marque, le bouton glisse */

/* compteur à chiffres qui roulent (NumberFlow) : un ruban 0 à 9 par chiffre, fenêtre d'un chiffre */

.sk .nf { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; white-space: pre; }

.sk .nf-d { display: inline-block; height: 1em; line-height: 1; overflow: hidden; }

.sk .nf-s { display: flex; flex-direction: column; transform: translateY(calc(var(--to, 0) * -10%)); transition: transform 0.9s var(--roll) calc(var(--d, 0) * 1s); }

.sk .nf-s b { display: block; height: 1em; line-height: 1; font-weight: inherit; }

.sk .nf-s b::before { content: attr(data-d); }

.sk[data-sk]:not([data-on='1']) .nf-s { transform: translateY(calc(var(--from, 0) * -10%)); transition: none; }

/* trois états sur une même durée (vues d'un écran à onglets) : séquence de data-dur 9000 */

@keyframes sk-ka { 0%, 31% { opacity: 1; visibility: visible; } 34%, 100% { opacity: 0; visibility: hidden; } }

@keyframes sk-kb { 0%, 31% { opacity: 0; visibility: hidden; } 34%, 60% { opacity: 1; visibility: visible; } 63%, 100% { opacity: 0; visibility: hidden; } }

@keyframes sk-kc { 0%, 60% { opacity: 0; visibility: hidden; } 63%, 100% { opacity: 1; visibility: visible; } }

/* bouton de section : libellé à deux faces (Eazyclick, 500 ms cubic-bezier(.35,0,0,1)) et flèche dans un disque */

.sk .sk-btn { display: inline-flex; align-items: center; gap: 0.9rem; padding: 0.35rem 0.35rem 0.35rem 1.4rem; border-radius: 99px; background: var(--ink); color: var(--pap); text-decoration: none; font-weight: 600; font-size: 1rem; line-height: 1.2; }

.sk .sk-btn .l { display: inline-grid; overflow: hidden; padding: 0.3em 0; margin: -0.3em 0; }

.sk .sk-btn .l > span { grid-area: 1 / 1; white-space: nowrap; transition: transform 0.5s cubic-bezier(0.35, 0, 0, 1); }

.sk .sk-btn .l > span:last-child { transform: translateY(200%); }

@media (hover: hover) and (pointer: fine) {

  .sk .sk-btn:hover .l > span:first-child { transform: translateY(-200%); }

  .sk .sk-btn:hover .l > span:last-child { transform: translateY(0); }

}

.sk .sk-btn:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; }

/* sections (formules, process, chiffres, faq, cta) : pas de cadre à ratio, mise en page par container queries */

.sk--flow { aspect-ratio: auto; overflow: visible; background: none; font-size: 1rem; line-height: 1.4; }

.sk--flow h2, .sk--flow h3 { font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; }

.sk--flow p { max-width: 52ch; }

.sk--flow { --body-ink: color-mix(in srgb, var(--ink) 88%, var(--pap)); }

/* ───────── marque.html ───────── */

/* marque : construction du logo (guides qui se tracent, lettres qui montent), puis palette, caractères, trois supports */

/* le mot du logo : les lettres sont des <i> dans un .ltr, la taille vient du <b> */

/* ───────── contenu.html ───────── */

/* ───────── croissance.html ───────── */

/* ───────── systemes.html : une fenêtre d'application (planche à l'échelle, rail, vues empilées) ───────── */

/* ───────── voie.html : Sans nous / Avec nous (comparatif en deux colonnes, d'après Karam) ───────── */

/* ───────── formules.html : trois formules sans prix (Lancer, Grandir, Équiper), entête colorée dans le cadre (Eazyclick), délai qui roule ───────── */

/* ───────── process.html : cartes d'étapes, puce + écran carré + titre + phrase (Karam), tour à tour ───────── */

@keyframes pr-ring { 0% { opacity: 0.9; scale: 0.5; } 100% { opacity: 0; scale: 1.5; } }

/* ───────── chiffres.html : compteurs à chiffres qui roulent, une seule fois à l'entrée dans l'écran ───────── */

/* ───────── faq.html : <details> natifs, plus qui tourne de 90°, hauteur animée (Eazyclick, Karam) ───────── */

/* ───────── cta.html : carte scindée, texte à gauche, colonnes de tuiles qui défilent (tour en 40 s, Eazyclick) ───────── */

.ca-act { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }

.ca-act .sk-btn { background: var(--ink); color: var(--pap); }

@keyframes ca-up { to { transform: translateY(-50%); } }

/* ───────── projet.html ───────── */

.pj { --sk-ratio: 100 / 82; }

.pj .v { display: none; }

.pj:not([data-variant]) .v[data-v='alisier'],

.pj[data-variant='alisier'] .v[data-v='alisier'],

.pj[data-variant='lisiere'] .v[data-v='lisiere'],

.pj[data-variant='respire'] .v[data-v='respire'] { display: contents; }

.pj[data-variant='lisiere'] { --acc: var(--sk-accent, #1d5fd0); --pap: var(--sk-paper, #f1f3f6); --ink: var(--sk-ink, #15181e); }

.pj[data-variant='respire'] { --acc: var(--sk-accent, #b8416a); --pap: var(--sk-paper, #f5f2f3); --ink: var(--sk-ink, #231a1e); }

/* ═════════════════════════ v6 : fenêtres d'application réalistes (brief v6) ═════════════════════════

   Construites d'après le code d'Eazyclick (.pv-board : planche de 760 px, rail de 75 px, cartes à

   bordure 1 px, rayon 12, texte 12 px), de Clickway (méthode en 4 cartes teintées) et de Karam

   (cartes de réalisations, pile de notifications). Les classes v5 plus haut restent intactes :

   les maquettes collent des copies des anciens fragments.

   Échelle : une planche .ap est dessinée en px à sa taille réelle (760 px, ou --bw), puis réduite à la

   largeur de son parent .ap-fit par zoom: calc(100cqw / 760px). Les textes restent du vrai texte. */

.sk .ap-fit { container-type: inline-size; width: 100%; min-width: 0; transition: opacity 0.35s linear; }

.sk[data-fade='1'] .ap-fit { opacity: 0; }

.sk .ap, .sk .ca-mini, .sk .nt-board, .sk .kp-b {

  --a-ink: #1a1a1a; --a-mute: #60646c; --a-faint: #6b7079; --a-line: #e5e5e5; --a-line2: #efefef; --a-soft: #fafafa;

  --a-ok: #027864; --a-warn: #9a5b00; --a-info: #0369a1; --a-bad: #b42318;

  --brand: #2f5d46; --brand-ink: #1b1f1c; --brand-lin: #ede8dc; --brand-miel: #c8963e;

}

.sk .ap {

  --bw: 760px;

  --a-ink: #1a1a1a; --a-mute: #60646c; --a-faint: #6b7079; --a-line: #e5e5e5; --a-line2: #efefef; --a-soft: #fafafa;

  --a-ok: #027864; --a-warn: #9a5b00; --a-info: #0369a1; --a-bad: #b42318;

  --brand: #2f5d46; --brand-ink: #1b1f1c; --brand-lin: #ede8dc; --brand-miel: #c8963e;

  position: relative; width: var(--bw); zoom: 0.72;

  padding: 22px 22px 22px 97px; border: 1px solid var(--a-line); border-radius: 18px;

  background: #fff; color: var(--a-ink); box-shadow: 0 30px 60px -30px rgb(11 10 9 / 0.25); /* taste-skill-ignore : fragment d'interface (fausse application) */

  font-size: 12px; line-height: 1.3; font-weight: 400; letter-spacing: 0; text-align: left;

  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;

}

@supports (zoom: calc(1px / 1px)) { .sk .ap { zoom: calc(100cqw / var(--bw)); } }

.sk .ap b, .sk .ap strong { font-weight: 600; }

.sk .ap svg { display: block; flex: none; }

.sk .ap .nf { font-variant-numeric: tabular-nums; }

/* rail d'icônes (Eazyclick .pv-rail : 75 px, carrés de 38 px, groupes séparés d'un trait) */

/* en-tête de vue */

/* pastilles d'état */

/* cartes, légendes, cases cochées */

/* étapes horodatées (Contrôlée, Transmise, Livrée) */

/* tableaux simples */

/* fenêtre sans rail (méthode) : barre de titre à trois points */

/* animations propres aux fenêtres */

/* ───────── écrans autonomes (marque, contenu, croissance, systèmes : une vue de l'écosystème) ───────── */

.sk.ap-screen { aspect-ratio: auto; display: grid; place-items: center; padding: 5cqw 4.5cqw; background: var(--tint, color-mix(in srgb, var(--acc) 16%, var(--pap))); }

.sk.ap-screen > .ap-fit { container-type: inline-size; }

/* ── vue Marque ── */

/* ── vue Contenu ── */

/* ── vue Croissance ── */

/* ── vue Systèmes ── */

/* ───────── ecosysteme.html : onglets à gauche, fenêtre unique à droite (Eazyclick c-home-modules) ───────── */

.eco { --t1: color-mix(in srgb, var(--acc) 17%, var(--pap)); --t2: color-mix(in srgb, #c8963e 24%, var(--pap)); --t3: color-mix(in srgb, #3b7fc4 15%, var(--pap)); --t4: color-mix(in srgb, var(--ink) 9%, var(--pap)); }

.eco-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }

.eco h2 { font-size: clamp(2rem, 4.6cqi, 3.2rem); max-width: 10em; }

.eco-tabs { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 2rem; }

.eco-tab { appearance: none; display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 0.85rem 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }

.eco-n { font-size: clamp(2rem, 4.4cqi, 3.4rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; color: color-mix(in srgb, var(--ink) 54%, var(--pap)); transition: color 0.3s linear; }

.eco-tab[aria-selected='true'] .eco-n { color: var(--ink); }

@media (hover: hover) and (pointer: fine) { .eco-tab:hover .eco-n { color: var(--ink); } }

.eco-tab:focus-visible { outline: 3px solid var(--acc); outline-offset: 4px; border-radius: 0.4rem; }

.eco-x { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease-r); }

.eco-tab[aria-selected='true'] .eco-x { grid-template-rows: 1fr; }

.eco-x > span { overflow: hidden; }

.eco-d { display: block; max-width: 34ch; padding-top: 0.8rem; font-size: 1.05rem; line-height: 1.45; color: var(--body-ink); }

.eco-bar { display: block; width: 9rem; height: 3px; margin-top: 1rem; border-radius: 2px; background: var(--s3); overflow: hidden; visibility: hidden; }

.eco-bar i { display: block; height: 100%; background: var(--ink); transform-origin: left center; transform: scaleX(0); }

.eco[data-run='1'] .eco-tab[aria-selected='true'] .eco-bar { visibility: visible; }

.eco[data-run='1'] .eco-tab[aria-selected='true'] .eco-bar i { animation: eco-bar 6s linear both; }

.eco[data-pause='1'] .eco-bar i { animation-play-state: paused !important; }

@keyframes eco-bar { to { transform: scaleX(1); } }

.eco-ps { display: grid; }

.eco-p { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; opacity: 0; visibility: hidden; scale: 0.985; transition: opacity 0.5s var(--ease-r), scale 0.5s var(--ease-r), visibility 0s linear 0.5s; }

.eco-p.is-on { opacity: 1; visibility: visible; scale: 1; transition-delay: 0s; }

.eco-pane { flex: 1; display: grid; place-items: center; padding: clamp(0.9rem, 3.4cqi, 2.4rem); border-radius: 1.2rem; background: var(--tint); }

.eco-pane > .sk { background: none; aspect-ratio: auto; overflow: visible; }

.eco-cap { margin-top: 1.1rem; font-size: 0.95rem; color: var(--body-ink); }

@container (min-width: 60rem) {

  .eco-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; align-items: start; }

  .eco-tabs { margin-top: 3rem; gap: 0.6rem; }

  .eco-tab { padding: 1.1rem 0; }

}

/* ───────── process.html : quatre cartes teintées, grand chiffre, une vraie vue d'outil (Clickway, méthode) ───────── */

/* audit : jauges et priorités */

/* priorisation : colonnes */

/* curseurs nommés */

.cur { position: absolute; z-index: 6; display: flex; align-items: flex-start; pointer-events: none; }

.cur svg { width: 17px; height: 17px; color: var(--c); fill: var(--c); stroke: #fff; stroke-width: 1.4; }

.cur span { margin: 13px 0 0 -3px; padding: 2px 7px; border-radius: 6px; background: var(--c); color: #fff; font-size: 10.5px; font-weight: 600; white-space: nowrap; }

/* conception : outil de maquette */

/* lancement : histogramme */

/* curseurs qui bougent (conception, priorisation) */

@keyframes cur-a { 0% { translate: 40px 110px; } 22% { translate: 0 0; } 48% { translate: 0 0; } 70% { translate: 120px 26px; } 100% { translate: 120px 26px; } }

@keyframes cur-b { 0% { translate: 150px 60px; } 30% { translate: 150px 60px; } 58% { translate: 0 0; } 100% { translate: 0 0; } }

/* ───────── notifications.html : pile de notifications d'application (Karam) ───────── */

.nt { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1px 11px; align-items: center; padding: 11px 13px; border-radius: 16px; background: rgb(255 255 255 / 0.96); color: #1a1a1a; box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 14px 30px -14px rgb(11 10 9 / 0.35); translate: 0 var(--y); } /* taste-skill-ignore : fragment d'interface (fausse application) */

.nt-i { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--c); color: #fff; }

.nt-i svg { width: 18px; height: 18px; display: block; }

.nt-app { display: flex; align-items: center; gap: 6px; color: #60646c; font-size: 11px; white-space: nowrap; }

.nt-app b { color: #1a1a1a; font-weight: 600; }

.nt-time { color: #60646c; font-size: 11px; white-space: nowrap; align-self: start; }

.nt-msg { grid-column: 2 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nt-msg b { font-weight: 600; }

.nt-msg i { font-style: normal; }

.nt-msg i::before { content: " · "; }

.nt { transform-origin: 50% 0; }

@keyframes nt-a { 0%, 5% { opacity: 0; translate: 0 -18px; scale: 0.96; } 10%, 25% { opacity: 1; translate: 0 0; scale: 1; } 31%, 45% { translate: 0 66px; scale: 0.98; } 51%, 65% { translate: 0 132px; scale: 0.96; } 71%, 100% { opacity: 1; translate: 0 198px; scale: 0.94; } }

@keyframes nt-b { 0%, 25% { opacity: 0; translate: 0 -18px; scale: 0.96; } 31%, 45% { opacity: 1; translate: 0 0; scale: 1; } 51%, 65% { translate: 0 66px; scale: 0.98; } 71%, 100% { opacity: 1; translate: 0 132px; scale: 0.96; } }

@keyframes nt-c { 0%, 45% { opacity: 0; translate: 0 -18px; scale: 0.96; } 51%, 65% { opacity: 1; translate: 0 0; scale: 1; } 71%, 100% { opacity: 1; translate: 0 66px; scale: 0.98; } }

@keyframes nt-d { 0%, 65% { opacity: 0; translate: 0 -18px; scale: 0.96; } 71%, 100% { opacity: 1; translate: 0 0; scale: 1; } }

.sk[data-sk]:not([data-on='1']) .nt { opacity: 0; }

/* ───────── projet.html : carte de réalisation (Karam), héros de site plein cadre et pile de notifications ───────── */

.sk.kp { --sk-ratio: auto; aspect-ratio: auto; background: none; border-radius: var(--sk-radius, 1.4rem); }

.kp .v { display: none; }

.kp:not([data-variant]) .v[data-v='alisier'], .kp[data-variant='alisier'] .v[data-v='alisier'],

.kp[data-variant='lisiere'] .v[data-v='lisiere'], .kp[data-variant='respire'] .v[data-v='respire'] { display: contents; }

@keyframes kp-b { 0%, 25% { opacity: 0; translate: 0 -14px; scale: 0.96; } 31%, 45% { opacity: 1; translate: 0 0; scale: 1; } 51%, 65% { translate: 0 52px; scale: 0.98; } 71%, 100% { opacity: 1; translate: 0 104px; scale: 0.96; } }

@keyframes kp-c { 0%, 45% { opacity: 0; translate: 0 -14px; scale: 0.96; } 51%, 65% { opacity: 1; translate: 0 0; scale: 1; } 71%, 100% { opacity: 1; translate: 0 52px; scale: 0.98; } }

/* ───────── voie.html (v6) : deux boîtes de réception, « Sans nous » et « Avec nous » ───────── */

.sk.vw { --sk-ratio: auto; aspect-ratio: auto; display: grid; place-items: center; padding: 4.5cqw; background: var(--s2); }

.vw .ap { padding: 18px; }

/* ───────── cta.html (v6) : tuiles devenues de petites vues d'application ───────── */

/* ═════════════════════════ v7 : les vitrines du studio dans les composants (brief v7) ═════════════════════════

   projet, process et cta montrent les vraies captures de maquettes/_partage/vitrine/ (<slug>-680 / -1360.webp,

   -page.webp chargée seulement au survol de projet). Aucun objet dessiné. Les classes v6 plus haut (kp-b, kp-art,

   pd-site, pl-k, ca-mini…) restent pour les maquettes qui ont collé l'ancien fragment. */

/* ───────── projet.html (v7) : capture dans un cadre de navigateur, page entière au survol, légende ───────── */

.sk.kp:has(.kw) { border-radius: 0; }

.kp > .ap-fit:has(> .kw) { border-radius: var(--sk-radius, 1.4rem); overflow: hidden; }

.sk.kp[data-fade='1'] > .ap-fit:has(> .kw) { opacity: 1; }

.kw-dom { overflow: hidden; text-overflow: ellipsis; }

.kw-page { z-index: 1; opacity: 0; transition: opacity 0.3s linear, translate 1.1s var(--ease); }

.kp.is-scroll .kw-page[data-ready] { opacity: 1; translate: 0 calc(-100% + 400px); transition: opacity 0.3s linear, translate 12s cubic-bezier(0.45, 0, 0.55, 1) 0.6s; }

.sk.kp[data-fade='1'] .kw-nt, .kp.is-scroll .kw-nt, .kp.is-scroll .kw-crowd { opacity: 0; }

.kw-lieu::before { content: '· '; }

.kw-peri { flex-basis: 100%; }

@container (max-width: 30rem) { .kw-lieu { flex-basis: 100%; } .kw-lieu::before { content: none; } }

/* ───────── process.html (v7) : un même projet, Oliveraie Sauvaire, dans chaque vue d'outil ───────── */

/* ───────── cta.html (v7) : colonnes de captures qui défilent (Eazyclick), module de rendez-vous par-dessus ───────── */

.ca7 { display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 1.5rem; background: var(--acc); color: var(--pap); overflow: hidden; }

.ca7-t { display: flex; flex-direction: column; justify-content: space-between; gap: 2.4rem; padding: 2.4rem 1.6rem 2rem; }

.ca7-t h2 { font-size: clamp(2.2rem, 6cqi, 3.8rem); max-width: 9em; }

.ca7-t p { margin-top: 1.2rem; font-size: 1.1rem; max-width: 30ch; }

.ca7-r { position: relative; display: grid; place-items: center; min-height: 34rem; padding: 1.6rem 1rem; overflow: hidden; }

@container (min-width: 48rem) {

  .ca7 { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }

  .ca7-t { padding: 3.4rem 2.8rem; }

  .ca7-r { min-height: 38rem; }

}

/* ───────── écosystème et vues seules (v7) : client Oliveraie Sauvaire, recadrages des vraies captures ───────── */

/* recadrage : aspect-ratio = la zone gardée, --w / --tx / --ty posés par le fragment */

/* ═════════════════════════ v8 : retour aux interfaces dessinées, peaufinées (correction du client, brief v7) ═════════════════════════

   Les captures de vitrines ne vont que dans projet.html. Écosystème, vues seules, process, cta, notifications et voie

   reprennent la v6 (Comptoir Alisier, aucune image) et gagnent : barre d'outils (fil d'Ariane, recherche Ctrl K, cloche),

   sous-onglets, filtres, rail avec avatar, vignettes typographiques, propriétés de calque, module de rendez-vous.

   Tout est rangé sous .ap8 / .ap8w / .proc8 / .ca8 / .bk8 : les copies v6 et v7 collées dans les maquettes ne bougent pas. */

/* fenêtre : bordure 1 px, ombre douce de fenêtre, typographie d'interface */

.sk kbd { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px #dedede, 0 1px 0 #dedede; color: #555a62; font-family: inherit; font-size: 10px; font-weight: 500; line-height: 1; } /* taste-skill-ignore : fragment d'interface (fausse application) */

/* barre d'outils : fil d'Ariane, recherche, cloche */

/* rail : logo aligné sur la barre, point de notification, aide et avatar en bas */

/* sous-onglets, filtres */

/* marque : codes en chasse fixe, contraste mesuré */

/* contenu : la publication dessinée en texte, pas d'image */

/* croissance */

/* fenêtre à barre de titre (méthode) */

/* méthode v8 : carte teintée, fenêtre qui déborde à droite, étiquette et curseur nommé (Clickway, 5.webp) */

@keyframes cur-f { 0% { translate: -18px 26px; } 45%, 100% { translate: 0 0; } }

/* carte 3 : le curseur d'Hélène reste dans le blanc à droite de « Nos coffrets », trajet compris */

@keyframes cur-b8 { 0%, 30% { translate: 110px -20px; } 58%, 100% { translate: 60px -10px; } }

/* audit */

/* feuille de route */

/* maquette : barre d'outils, calques, propriétés */

/* lancement */

/* voie : barre de boîte de réception */

/* cta v8 : tuiles d'interface (pas de captures) sous le module de rendez-vous */

/* ───────── sous « réduire les animations » : état final, rien ne bouge ───────── */

@media (prefers-reduced-motion: reduce) {

  .sk *, .sk *::before, .sk *::after { transition: none !important; animation: none !important; }

}

/* ───────── v9 (brouillon) : vue Marque, planche de construction du logo ─────────

   À coller à la fin de scaleway.css. Tout est rangé sous .mk9 (posé sur la fenêtre .ap.ap8) :

   les copies v6 à v8 collées dans les maquettes ne bougent pas.

   Planche imprimée : fond clair, repères gris en tirets, contours au trait fin vert Alisier, cercles gris pleins.

   Mouvement (classes de geste du kit, délais --d) : les repères se tracent, puis les contours, puis les cercles.

   Sans scaleway.js ou sous prefers-reduced-motion : état final, lisible. */

.mk9 { --mk9-o: #2f5d46; --mk9-g: #a9aeb5; --mk9-pt: rgb(124 129 137 / 0.42); }

.mk9-sheet { gap: 10px; padding: 12px 14px 14px; }

/* a : l'idée décomposée, élément + élément > symbole */

.mk9-idea { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) 16px minmax(0, 1.25fr); align-items: start; gap: 4px; padding: 4px 0 10px; border-bottom: 1px dashed #e2e2df; } /* taste-skill-ignore : fragment d'interface (fausse application) */

.mk9-el { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }

.mk9 .mk9-sk { width: 64px; height: 64px; overflow: visible; }

.mk9-op { width: 16px; height: 16px; margin-top: 24px; }

.mk9-op path { fill: none; stroke: #8b9097; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }

.mk9-cap { display: flex; flex-direction: column; gap: 1px; color: var(--a-mute); font-size: 10.5px; line-height: 1.3; }

.mk9-cap b { color: var(--a-ink); font-weight: 600; }

.mk9-say { max-width: 22ch; text-wrap: balance; }

.mk9-ln { fill: none; stroke: #3e4149; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

.mk9-ln.mk9-fine { stroke-width: 0.9; stroke: #6b7079; }

.mk9-dot { fill: none; stroke: #8b9097; stroke-width: 1.1; stroke-dasharray: 0.1 3; stroke-linecap: round; }

/* b : le logotype sur sa grille */

.mk9-board { padding: 2px 0 0; }

.mk9 .mk9-grid { width: 100%; height: auto; overflow: visible; }

.mk9-g { fill: none; stroke: var(--mk9-g); stroke-width: 0.45; stroke-dasharray: 2 1.6; }

.mk9-gd { stroke-dasharray: 1 1.6; }

.mk9-cc { fill: none; stroke: var(--mk9-g); stroke-width: 0.35; stroke-dasharray: 1 1.4; opacity: 0.85; }

.mk9-pt { fill: var(--mk9-pt); }

.mk9-o { fill: none; stroke: var(--mk9-o); stroke-width: 0.7; stroke-linejoin: round; stroke-linecap: round; }

.mk9-sk .mk9-o { stroke-width: 1.15; }

.mk9-tm { fill: var(--mk9-o); font-size: 6px; font-weight: 600; letter-spacing: 0.04em; }

/* c : le symbole seul, contour en tirets sur ses axes ; cotes */

/* panneau latéral : couleurs en liste, caractères empilés */

/* mouvement : tracé des contours (pathLength = 1), repères qui s'allongent, cercles qui naissent */

.sk .mk9-d { stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease) calc(var(--d, 0) * 1s); }

.sk .mk9-g { transform-box: fill-box; transform-origin: 0 50%; transition: scale 0.9s var(--ease) calc(var(--d, 0) * 1s); }

.sk .mk9-gv { transform-origin: 50% 0; }

.sk .mk9-cc { transition: opacity 0.6s linear calc(var(--d, 0) * 1s); }

.sk .mk9-pt { transform-box: fill-box; transform-origin: 50% 50%; transition: opacity 0.3s linear calc(var(--d, 0) * 1s), scale 0.5s var(--ease-r) calc(var(--d, 0) * 1s); }

.sk[data-sk]:not([data-on='1']) .mk9-d { stroke-dashoffset: 1; transition: none; }

.sk[data-sk]:not([data-on='1']) .mk9-g { scale: 0; transition: none; }

.sk[data-sk]:not([data-on='1']) .mk9-cc { opacity: 0; transition: none; }

.sk[data-sk]:not([data-on='1']) .mk9-pt { opacity: 0; scale: 0.3; transition: none; }

/* ==================== v9 (30/10/2026) : composants calqués sur de vrais logiciels, voir docs/brief-v9.md ==================== */

/* ---- v9/base.css ---- */
/* v9 base. Chaque site pose sur :root ses jetons --sk-r-card, --sk-r-ctl, --sk-font-display, --sk-font-text, --sk-field
   (les feuilles du kit les lisent avec un repli, rien n'est redéfini ici pour ne pas masquer ceux du site).
   Les fenêtres d'application gardent la police du système, comme une vraie capture. */
.sk { --sk-ui-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.sk h2, .sk h3 { font-family: var(--sk-font-display, var(--sk-font, inherit)); }
.sk [data-ui], .sk .ap, .sk .ap-fit, .sk .bk, .sk .cal9 { font-family: var(--sk-ui-font); }
.sk [data-ui] :is(h2, h3, h4), .sk .ap-fit :is(h2, h3, h4) { font-family: inherit; }
/* Dans l'écosystème, la vue remplit son volet : pas de second aplat ni de marge autour de la fenêtre. */
.eco-pane { background: var(--sk-field, var(--tint)); border-radius: var(--sk-r-card, 0px); }
.eco-pane > .sk.ap-screen { padding: 0; background: none; width: 100%; }
.eco-pane > .sk.ap-screen > .ap-fit { width: 100%; }

/* ---- v9/marque.css ---- */
/* Marque v9 : outil de design, famille Penpot (github.com/penpot/penpot, thème « default » sombre, toile claire).
   Mesures lues (frontend/src/app/main/ui/ds/colors.scss, workspace/sidebar/options/menus/measures.scss) :
   - fond des panneaux #18181A, texte #FFF, accent #7EFFF5 (bouton principal, noir dessus), champs et séparateurs #2E3434
   - champs de mesure : typographie « body-small » 12 px, hauteur 32 px (28 px ici pour tenir la maquette), rayon 8 px sur les boutons
     d'outil et la barre de préréglages, 4 px sur les champs (demande du client), espacements 4 / 8 px, sections repliables à chevron
   - toile par défaut #E8E9EA, planches blanches sans rayon, nom de planche en 12 px gris au-dessus, sélection #31EFB8 avec poignées carrées et cote « L × H »
   - panneau de droite : onglets Design / Prototype / Inspecter, en-tête de la sélection, sections Mesures, Couleurs, Typographies, Exportations
   - barre d'outils flottante en bas de toile, 8 outils de 32 px, outil actif en accent
   Polices : pile système (brief v9), 11 à 12 px. Aucune ombre hors data-ui, aucun dégradé. */

.sk.mq6.ap-screen { background: var(--sk-field, #e4e2db); }
[data-ui] .pp9 {
  --bw: 1040px; --pp-bg: #18181a; --pp-in: #2e3434; --pp-fg: #fff; --pp-fg2: #8f9da3; --pp-ac: #7efff5; --pp-cv: #e8e9ea; --pp-sel: #31efb8;
  --a-ink: #1a1a1a; --a-mute: #60646c; --a-faint: #6b7079; --a-line: #e5e5e5; --a-ok: #027864;
  --sk-ui-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  width: var(--bw); zoom: 0.7; overflow: hidden; border: 1px solid #000; border-radius: 6px; background: var(--pp-bg); color: var(--pp-fg);
  font: 400 12px/1.35 var(--sk-ui-font); font-variant-numeric: tabular-nums; text-align: left; -webkit-font-smoothing: antialiased;
  box-shadow: 0 24px 56px -28px rgb(16 17 19 / 0.5);
}
@supports (zoom: calc(1px / 1px)) { [data-ui] .pp9 { zoom: calc(100cqw / var(--bw)); } }
[data-ui] .pp9 svg { display: block; flex: none; }
[data-ui] .pp9 b { font-weight: 500; }

/* en-tête */
[data-ui] .pp9-hd { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-bottom: 1px solid #000; }
[data-ui] .pp9-ib { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--pp-fg2); }
[data-ui] .pp9-vr { width: 1px; height: 16px; background: var(--pp-in); }
[data-ui] .pp9-path { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--pp-fg2); white-space: nowrap; }
[data-ui] .pp9-path svg { width: 12px; height: 12px; }
[data-ui] .pp9-path b { color: var(--pp-fg); }

[data-ui] .pp9-hr { display: flex; align-items: center; gap: 8px; margin-left: auto; }

[data-ui] .pp9-bd { display: grid; grid-template-columns: 188px minmax(0, 1fr) 244px; height: 556px; }

/* calques */
[data-ui] .pp9-l { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid #000; overflow: hidden; }

[data-ui] .pp9-tabs { display: flex; gap: 14px; height: 32px; padding: 0 10px; border-bottom: 1px solid #000; color: var(--pp-fg2); }
[data-ui] .pp9-tabs span { display: inline-flex; align-items: center; height: 100%; margin-bottom: -1px; border-bottom: 2px solid transparent; font-weight: 500; }
[data-ui] .pp9-tabs .on { color: var(--pp-fg); border-color: var(--pp-ac); }
[data-ui] .pp9-tabs--r { gap: 16px; }
[data-ui] .pp9-lys { display: flex; flex-direction: column; padding: 4px 0; }
[data-ui] .pp9-ly { position: relative; display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px 0 calc(8px + var(--dp) * 14px); color: var(--pp-fg2); white-space: nowrap; }
[data-ui] .pp9-ly svg { width: 14px; height: 14px; }
[data-ui] .pp9-ly > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; margin-right: auto; }
[data-ui] .pp9-sp { width: 12px; flex: none; }
[data-ui] .pp9-ly.on { background: rgb(126 255 245 / 0.14); color: var(--pp-fg); }
[data-ui] .pp9-ly.off > span { opacity: 0.5; }
[data-ui] .pp9-up { color: var(--pp-fg); }
[data-ui] .pp9-up em { font-style: normal; font-size: 11px; color: var(--pp-ac); }
[data-ui] .pp9-up s { position: absolute; left: calc(8px + var(--dp) * 14px); right: 8px; bottom: 2px; height: 2px; background: var(--pp-in); }
[data-ui] .pp9-up s::after { content: ''; position: absolute; inset: 0 38% 0 0; background: var(--pp-ac); }

/* toile */
[data-ui] .pp9-cv { position: relative; min-width: 0; overflow: hidden; background: var(--pp-cv); padding: 18px 28px 0; }

[data-ui] .pp9-sheet.mk9-sheet { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; background: #fff; color: var(--a-ink); font-size: 11px; }
[data-ui] .pp9 .mk9-cap { font-size: 10.5px; }
[data-ui] .pp9-bw { position: relative; }

[data-ui] .pp9-sel { position: absolute; left: 26.4%; top: 15.9%; width: 66.3%; height: 68.2%; outline: 1px solid var(--pp-sel); }
[data-ui] .pp9-sel .pp9-h { position: absolute; width: 6px; height: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--pp-sel); }
[data-ui] .pp9-sel .pp9-h:nth-child(1) { left: -3px; top: -3px; } .pp9-sel .pp9-h:nth-child(2) { right: -3px; top: -3px; }
[data-ui] .pp9-sel .pp9-h:nth-child(3) { left: -3px; bottom: -3px; } .pp9-sel .pp9-h:nth-child(4) { right: -3px; bottom: -3px; }
[data-ui] .pp9-sel b { position: absolute; left: 50%; top: calc(100% + 6px); translate: -50% 0; padding: 1px 6px; border-radius: 4px; background: var(--pp-sel); color: #000; font-size: 10px; font-weight: 600; white-space: nowrap; }

[data-ui] .pp9-tb { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; display: flex; gap: 2px; padding: 4px; border-radius: 8px; background: var(--pp-bg); color: var(--pp-fg2); }
[data-ui] .pp9-tb span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; }
[data-ui] .pp9-tb .on { background: var(--pp-ac); color: #000; }

/* panneau Design */
[data-ui] .pp9-r > *, [data-ui] .pp9-l > * { flex: none; }
[data-ui] .pp9-r { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid #000; overflow: hidden; }
[data-ui] .pp9-sel-h { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-bottom: 1px solid #000; }
[data-ui] .pp9-sel-h svg { width: 14px; height: 14px; color: var(--pp-fg2); }
[data-ui] .pp9-sel-h em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--pp-fg2); }
[data-ui] .pp9-sc { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 12px; border-bottom: 1px solid #000; }
[data-ui] .pp9-sh { display: flex; align-items: center; justify-content: space-between; height: 22px; font-weight: 500; }
[data-ui] .pp9-sh svg { width: 14px; height: 14px; color: var(--pp-fg2); }

[data-ui] .pp9-f { display: flex; align-items: center; gap: 6px; min-width: 0; height: 28px; padding: 0 8px; border-radius: 4px; background: var(--pp-in); }
[data-ui] .pp9-f i { font-style: normal; font-size: 11px; color: var(--pp-fg2); width: 10px; }
[data-ui] .pp9-f b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-ui] .pp9-cr { display: grid; grid-template-columns: minmax(0, 1fr) 66px; gap: 4px; }
[data-ui] .pp9-fn u { width: 16px; height: 16px; flex: none; border-radius: 3px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }

/* Mobile : échelle 0,72 (≥ 0,62, aucun texte sous 8 px), la fenêtre est recadrée sur sa zone utile (--focus-x, --focus-y, en px de la fenêtre) */
@media (max-width: 560px) {
  .sk.mq6 > .ap-fit { overflow: hidden; aspect-ratio: 1 / 0.97; }
  .sk.mq6 .pp9 { zoom: 0.72; margin: calc(var(--focus-y) * -1px) 0 0 calc(var(--focus-x) * -1px); }
  [data-ui] .pp9 .mk9-cap, [data-ui] .pp9-kv, [data-ui] .pp9-ly, [data-ui] .pp9-nm { font-size: 11.5px; }
  [data-ui] .pp9-sel b, [data-ui] .pp9-f i { font-size: 11px; }
}

/* ---- v9/contenu.css ---- */
/* Contenu v9 : planificateur de publications, famille Postiz (github.com/gitroomhq/postiz-app, apps/frontend/src/components/launches/calendar.tsx).
   Mesures lues :
   - vue semaine : grille « 136px + 7 colonnes », écart 4 px, rayon 10 px, en-tête de 62 px (collant), 24 lignes d'une heure, cellule min. 40 px
   - carte de publication : rayon 10 px, bandeau de 24 px en 11 px (couleur de l'étiquette, noms séparés par des virgules), corps p-8 en 14 px
     (12 px ici), avatar du canal 20 px rayon 8 avec icône de réseau de 12 px en coin, aperçu du texte limité à une ligne (2 ici), préfixe « Brouillon : »
   - statut : anneau 2 px vert (publiée) ou rouge (en échec), pastille de 18 px avec coche ou « ! »
   - créneau vide : « + » dans un carré de 40 px, rayon 8 px, visible au survol ; heures passées hachurées ; ligne de l'heure courante épaisse (3 px) le jour même,
     1 px à 40 % les autres jours, avec une étiquette d'heure (rayon 6 px, 12 px, texte noir)
   Thème sombre (fond #0B0B0C), accent violet du produit remplacé par le vert Alisier / miel (interdit : violet). Police : pile système, 11 à 14 px. */

.sk.ct6.ap-screen { background: var(--sk-field, #e4e2db); }
[data-ui] .px9 {
  --bw: 1040px; --px-bg: #0b0b0c; --px-p: #141415; --px-l: #262628; --px-t: #f2f2f2; --px-m: #8c8c92; --px-g: #2f5d46; --px-h: #c8963e; --px-ok: #3ec28f; --px-bad: #ef4444;
  --sk-ui-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: grid; grid-template-columns: 76px minmax(0, 1fr); width: var(--bw); height: 680px; zoom: 0.7; overflow: hidden; border: 1px solid #2a2a2c; border-radius: 10px;
  background: var(--px-bg); color: var(--px-t); font: 400 12px/1.35 var(--sk-ui-font); font-variant-numeric: tabular-nums; text-align: left; -webkit-font-smoothing: antialiased;
  box-shadow: 0 24px 56px -28px rgb(16 17 19 / 0.55);
}
@supports (zoom: calc(1px / 1px)) { [data-ui] .px9 { zoom: calc(100cqw / var(--bw)); } }
[data-ui] .px9 svg { display: block; flex: none; }
[data-ui] .px9 b { font-weight: 500; }

/* rail : icône + libellé de 10,5 px */
[data-ui] .px9-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0 12px; border-right: 1px solid var(--px-l); background: var(--px-bg); }
[data-ui] .px9-logo { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 9px; background: var(--px-g); color: #fff; }
[data-ui] .px9-ri { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 60px; padding: 8px 0 6px; border-radius: 8px; color: var(--px-m); }
[data-ui] .px9-ri b { font-size: 10.5px; }
[data-ui] .px9-ri.on { background: #1d1d1f; color: var(--px-t); }
[data-ui] .px9-rb { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--px-m); }
[data-ui] .px9-me { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 99px; background: #b45309; color: #fff; font-size: 10.5px; font-weight: 600; }

[data-ui] .px9-main { display: flex; flex-direction: column; min-width: 0; padding: 0 18px; overflow: hidden; }
[data-ui] .px9-main > * { flex: none; }
[data-ui] .px9-top { display: flex; align-items: center; gap: 8px; height: 52px; }
[data-ui] .px9-sel { display: flex; align-items: center; gap: 6px; margin-right: auto; font-size: 14px; font-weight: 500; }
[data-ui] .px9-sel svg { color: var(--px-m); }
[data-ui] .px9-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; background: #1d1d1f; box-shadow: inset 0 0 0 1px var(--px-l); font-weight: 500; white-space: nowrap; }
[data-ui] .px9-btn--p { background: var(--px-g); box-shadow: none; color: #fff; }
[data-ui] .px9-chs { display: flex; align-items: center; gap: 10px; height: 52px; border-top: 1px solid var(--px-l); }
[data-ui] .px9-ch { position: relative; display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 8px; background: var(--c); color: #fff; font-size: 8.5px; line-height: 1; }
[data-ui] .px9-ch b { font-weight: 700; letter-spacing: 0.02em; }
[data-ui] .px9-ch i { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 12px; height: 12px; border-radius: 99px; background: #fff; color: #111; }
[data-ui] .px9-chs .px9-ch { width: 36px; height: 36px; border-radius: 10px; font-size: 12px; }
[data-ui] .px9-chs .px9-ch i { width: 16px; height: 16px; right: -5px; bottom: -5px; }
[data-ui] .px9-chs .px9-ch i svg { width: 10px; height: 10px; }
[data-ui] .px9-chs .px9-ch:nth-child(3) { opacity: 0.55; box-shadow: 0 0 0 2px var(--px-bad); }
[data-ui] .px9-warn { color: #ff8a8a; font-size: 11px; }
[data-ui] .px9-sync { margin-left: auto; color: var(--px-m); font-size: 11px; }
[data-ui] .px9-bar { display: flex; align-items: center; gap: 14px; height: 44px; border-top: 1px solid var(--px-l); }
[data-ui] .px9-seg { display: inline-flex; padding: 3px; border-radius: 8px; background: #1d1d1f; box-shadow: inset 0 0 0 1px var(--px-l); }
[data-ui] .px9-seg span { padding: 4px 12px; border-radius: 6px; color: var(--px-m); font-weight: 500; }
[data-ui] .px9-seg .on { background: var(--px-g); color: #fff; }
[data-ui] .px9-nav { display: inline-flex; align-items: center; gap: 6px; color: var(--px-m); }
[data-ui] .px9-nav b { color: var(--px-t); font-size: 13px; }
[data-ui] .px9-wk { margin-left: auto; color: var(--px-m); font-size: 11px; }

/* grille */
[data-ui] .px9-grid { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; border-radius: 10px 10px 0 0; border: 1px solid var(--px-l); border-bottom: 0; background: var(--px-p); }
[data-ui] .px9-hr, [data-ui] .px9-r { display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); }
[data-ui] .px9-hr { flex: none; height: 44px; border-bottom: 1px solid var(--px-l); background: #101011; }
[data-ui] .px9-dh { display: flex; flex-direction: column; justify-content: center; align-items: center; border-left: 1px solid var(--px-l); }
[data-ui] .px9-dh b { font-size: 12px; }
[data-ui] .px9-dh i { font-style: normal; font-size: 11px; color: var(--px-m); }
[data-ui] .px9-td { box-shadow: inset 0 -2px 0 var(--px-h); }
[data-ui] .px9-td b { color: var(--px-h); }
[data-ui] .px9-r { flex: none; min-height: 30px; border-bottom: 1px solid #1d1d1f; }
[data-ui] .px9-hc { position: relative; padding: 8px 6px 0 0; color: var(--px-m); font-size: 11px; text-align: right; }
[data-ui] .px9-nb { position: absolute; right: 4px; top: 3px; z-index: 3; padding: 0 5px; border-radius: 6px; background: var(--px-h); color: #000; font-style: normal; font-size: 11px; font-weight: 600; }
[data-ui] .px9-c { position: relative; display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; padding: 4px; border-left: 1px solid var(--px-l); }
[data-ui] .px9-pa { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-1 1l2-2M0 8l8-8M7 9l2-2' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E"); }
[data-ui] .px9-now { position: absolute; left: 0; right: 0; top: 8px; z-index: 2; height: 3px; background: var(--px-h); }
[data-ui] .px9-plus { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto; border-radius: 8px; background: #2a2a2c; color: var(--px-t); }

/* carte de publication */
[data-ui] .px9-p { position: relative; border-radius: 10px; background: #1b1b1d; overflow: visible; }
[data-ui] .px9-p--ok { box-shadow: 0 0 0 2px var(--px-ok); }
[data-ui] .px9-p--err { box-shadow: 0 0 0 2px var(--px-bad); }
[data-ui] .px9-tg { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 22px; padding: 0 8px; border-radius: 10px 10px 0 0; background: var(--t); color: var(--tf); font-size: 11px; }
[data-ui] .px9-tg span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-ui] .px9-tg time { flex: none; font-size: 11px; font-weight: 600; opacity: 0.9; }
[data-ui] .px9-pb { display: flex; align-items: flex-start; gap: 7px; padding: 7px 7px 8px; }
[data-ui] .px9-pb p { margin: 0; min-width: 0; font-size: 11px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
[data-ui] .px9-p small { display: block; margin: -2px 7px 8px; color: #ff8a8a; font-size: 10.5px; line-height: 1.3; }
[data-ui] .px9-p s { position: absolute; right: -6px; top: -6px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 99px; text-decoration: none; color: #fff; font-size: 11px; font-weight: 700; }
[data-ui] .px9-ok { background: var(--px-ok); color: #06241a; } .px9-er { background: var(--px-bad); }

/* Mobile : échelle 0,74 (≥ 0,62, aucun texte sous 8 px), fenêtre recadrée (--focus-x, --focus-y, en px de la fenêtre) */
@media (max-width: 560px) {
  .sk.ct6 > .ap-fit { overflow: hidden; aspect-ratio: 1 / 1.05; }
  .sk.ct6 .px9 { zoom: 0.74; margin: calc(var(--focus-y) * -1px) 0 0 calc(var(--focus-x) * -1px); }
  [data-ui] .px9-p small, [data-ui] .px9-ch { font-size: 11px; }
  [data-ui] .px9-ch { font-size: 8px; }
}

/* ---- v9/croissance.css ---- */
/* v9 Croissance : rapport « Performances » d'un outil de suivi de recherche (famille : Google Search Console).
   Sources lues : support.google.com/webmasters/answer/7576553?hl=fr (libellés : Type de recherche, Plage de dates,
   Exporter, onglets Requêtes / Pages / Pays / Appareils / Dates, données préliminaires en pointillé) ;
   github.com/plausible/analytics (lecture de la logique : période, courbe unique, tableau trié).
   La doc ne donne ni couleurs ni cotes : les mesures ci-dessous sont celles de l'interface publique, relevées à l'oeil.
   Mesures retenues (px de conception, fenêtre de 900 px) :
   1. barre haute 52 px, bordure basse 1 px #dadce0, champ « Inspecter toute URL » 40 px de haut, rayon 8 ;
   2. navigation gauche 176 px, lignes 40 px, 13 px, actif = fond #e8f0fe + texte #1967d2, rayon 0 20 20 0 ;
   3. titre de page 20 px / 500, bouton texte « Exporter » bleu #1a73e8 ;
   4. puces de filtre : 32 px de haut, bordure 1 px #dadce0, rayon 8, texte 13 px ;
   5. cartes : bordure 1 px #dadce0, rayon 8, sans ombre, fond blanc ;
   6. cartes métriques : quatre colonnes jointes, 92 px de haut, libellé 13 px / 500, valeur 28 px, case à cocher 16 px ;
      sélectionnée = aplat plein et texte blanc (clics #1a73e8, impressions #b45309, deux teintes seulement) ;
   7. courbe : traits 2 px, grille 1 px #e0e0e0, deux axes (clics à gauche en bleu, impressions à droite en orange), 3 intervalles ;
   8. données préliminaires = tracé en pointillé 4 4 ;
   9. tableau : onglets 48 px en capitales de 13 px, actif souligné 3 px bleu ; en-tête 40 px #5f6368 ; lignes 44 px, bordure #ebebeb ;
  10. chiffres tabulaires alignés à droite, colonne triée marquée d'une flèche ;
  11. texte #202124, secondaire #5f6368 ; police système (pas la police du site).
   Tout est sous .cr9 : les anciennes vues .cr6 de l'écosystème ne bougent pas. Un seul accent chaud, aucun violet. */

.sk.cr9.ap-screen { background: var(--sk-field, #d8dde4); }
.sk.cr9 .ap.cr9w {
  --bw: 900px; --sk-ui-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --c1: #1a73e8; --c2: #b45309; --g-ink: #202124; --g-mute: #5f6368; --g-line: #dadce0;
  display: flex; flex-direction: column; height: 820px; padding: 0; overflow: hidden;
  border: 1px solid var(--g-line); border-radius: 8px; background: #fff; color: var(--g-ink); /* taste-skill-ignore */
  font: 400 13px/1.4 var(--sk-ui-font); letter-spacing: 0; font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgb(60 64 67 / 0.2), 0 12px 32px -16px rgb(60 64 67 / 0.4); /* taste-skill-ignore */
}
.cr9 .cr9-top { flex: none; display: flex; align-items: center; gap: 16px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--g-line); } /* taste-skill-ignore */
.cr9 .cr9-prop { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid var(--g-line); border-radius: 8px; font-weight: 500; white-space: nowrap; } /* taste-skill-ignore */
.cr9 .cr9-find { flex: 1; display: flex; align-items: center; gap: 10px; height: 38px; max-width: 520px; padding: 0 14px; border-radius: 8px; background: #f1f3f4; color: var(--g-mute); white-space: nowrap; overflow: hidden; }
.cr9 .cr9-find span { overflow: hidden; text-overflow: ellipsis; }
.cr9 .cr9-help { margin-left: auto; color: var(--g-mute); }
.cr9 .cr9-me { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: #d9480f; color: #fff; font-size: 13px; font-weight: 500; }
.cr9 .cr9-body { flex: 1; display: flex; min-height: 0; }
.cr9 .cr9-nav { flex: none; width: 176px; padding: 8px 0; display: flex; flex-direction: column; }
.cr9 .cr9-ni { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border-radius: 0 20px 20px 0; color: var(--g-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr9 .cr9-ni.on { background: #e8f0fe; color: #1967d2; font-weight: 500; }
.cr9 .cr9-ng { padding: 16px 14px 4px; color: var(--g-mute); font-size: 13px; font-weight: 500; }
.cr9 .cr9-main { flex: 1; min-width: 0; padding: 4px 20px 0; display: flex; flex-direction: column; gap: 14px; }
.cr9 .cr9-hd { display: flex; align-items: center; justify-content: space-between; height: 48px; }
.cr9 .cr9-hd h2 { font: 500 20px/1.2 var(--sk-ui-font); margin-right: auto; }
.cr9 .cr9-act { display: inline-flex; align-items: center; gap: 6px; color: var(--c1); font-weight: 500; }
.cr9 .cr9-flt { display: flex; align-items: center; gap: 8px; margin-top: -6px; }
.cr9 .cr9-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 12px; border: 1px solid var(--g-line); border-radius: 8px; white-space: nowrap; } /* taste-skill-ignore */

.cr9 .cr9-upd { margin-right: 22px; display: inline-flex; align-items: center; gap: 6px; color: var(--g-mute); white-space: nowrap; }
.cr9 .cr9-card { border: 1px solid var(--g-line); border-radius: 8px; background: #fff; min-width: 0; } /* taste-skill-ignore */
.cr9 .cr9-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 7px 7px 0 0; overflow: hidden; }
.cr9 .cr9-t { position: relative; display: flex; flex-direction: column; gap: 6px; height: 92px; padding: 14px 18px 0; border-right: 1px solid var(--g-line); } /* taste-skill-ignore */
.cr9 .cr9-t:last-child { border-right: 0; }
.cr9 .cr9-tl { font-weight: 500; color: var(--g-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 22px; }
.cr9 .cr9-tn { font-size: 28px; font-weight: 400; line-height: 1.15; color: var(--g-ink); }
.cr9 .cr9-cb { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 16px; height: 16px; border: 2px solid #80868b; border-radius: 2px; color: #fff; }
.cr9 .cr9-t.on { border-right-color: transparent; }
.cr9 .cr9-t.on .cr9-tl, .cr9 .cr9-t.on .cr9-tn { color: #fff; }
.cr9 .cr9-t.on .cr9-cb { border-color: #fff; }
.cr9 .cr9-t1.on { background: var(--c1); }
.cr9 .cr9-t2.on { background: var(--c2); }
.cr9 .cr9-t.on .cr9-cb svg { stroke-width: 3.4; }
.cr9 .cr9-lg { display: flex; justify-content: space-between; padding: 14px 18px 0 22px; font-weight: 500; }
.cr9 .cr9-lg span:first-child { color: var(--c1); }
.cr9 .cr9-lg span:last-child { color: var(--c2); }
.cr9 .cr9-chart { display: block; overflow: visible; width: calc(100% - 0px); height: auto; padding: 0 0 0 0; }
.cr9 .cr9-gl { stroke: #e0e0e0; stroke-width: 1; }
.cr9 .cr9-ax { font: 400 13px var(--sk-ui-font); fill: var(--g-mute); }
.cr9 .cr9-axc { fill: var(--c1); }
.cr9 .cr9-axp { fill: var(--c2); }
.cr9 .cr9-ln { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cr9 .cr9-lc { stroke: var(--c1); }
.cr9 .cr9-lp { stroke: var(--c2); }
.cr9 .cr9-pre { stroke-dasharray: 4 4; }
.cr9 .cr9-cur { stroke: #80868b; stroke-width: 1; }
.cr9 .cr9-dot { stroke: #fff; stroke-width: 2; }
.cr9 .cr9-dc { fill: var(--c1); }
.cr9 .cr9-dp { fill: var(--c2); }
.cr9 .cr9-tip { fill: #fff; stroke: var(--g-line); }
.cr9 .cr9-tt { font: 500 13px var(--sk-ui-font); fill: var(--g-ink); }
.cr9 .cr9-tv { font: 400 13px var(--sk-ui-font); fill: var(--g-mute); }
.cr9 .cr9-tb { font: 500 13px var(--sk-ui-font); fill: var(--g-ink); }

.cr9 .cr9-tabs { display: flex; align-items: stretch; height: 48px; padding: 0 8px; border-bottom: 1px solid var(--g-line); } /* taste-skill-ignore */
.cr9 .cr9-tabs > span { display: flex; align-items: center; padding: 0 14px; color: var(--g-mute); font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; }
.cr9 .cr9-tabs > span.on { color: var(--c1); box-shadow: inset 0 -3px 0 var(--c1); } /* taste-skill-ignore */
.cr9 .cr9-sp { flex: 1; }
.cr9 .cr9-tabs > .cr9-ib { padding: 0 8px; }
.cr9 .cr9-th, .cr9 .cr9-tr { display: grid; grid-template-columns: minmax(0, 1fr) 80px 104px 80px 80px; gap: 8px; align-items: center; padding: 0 18px; }
.cr9 .cr9-th { height: 40px; color: var(--g-mute); font-weight: 500; border-bottom: 1px solid #ebebeb; } /* taste-skill-ignore */
.cr9 .cr9-tr { height: 44px; border-bottom: 1px solid #ebebeb; } /* taste-skill-ignore */
.cr9 .cr9-th > :not(:first-child), .cr9 .cr9-tr > :not(:first-child) { text-align: right; justify-self: end; }
.cr9 .cr9-sort { display: inline-flex; align-items: center; gap: 4px; color: var(--g-ink); }
.cr9 .cr9-th > span:first-child, .cr9 .cr9-q { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 560px) {
  /* mobile : même fenêtre à 568 px de conception, rail masqué, échelle jamais sous 0,62 ; --focus-x/y recadrent si besoin */
  .sk.cr9 .ap-fit { overflow: hidden; }
  .sk.cr9 .ap.cr9w { --bw: 568px; zoom: max(0.62, calc(100cqw / var(--bw))); margin: calc(var(--focus-y, 0px) * -1) 0 0 calc(var(--focus-x, 0px) * -1); max-width: none; }
  .cr9 .cr9-nav { display: none; }
  .cr9 .cr9-find { max-width: none; }
  .cr9 .cr9-upd { margin-right: 12px; }
  .cr9 .cr9-hd h2 { margin-right: 8px; }
  .cr9 .cr9-th, .cr9 .cr9-tr { grid-template-columns: minmax(0, 1fr) 64px 92px 60px 60px; gap: 6px; }
  .cr9 .cr9-t { padding-left: 12px; padding-right: 8px; }
  .cr9 .cr9-ax, .cr9 .cr9-tt, .cr9 .cr9-tv, .cr9 .cr9-tb { font-size: 17px; }
}

/* ---- v9/systemes.css ---- */
/* v9 Systèmes : fiche de facture électronique dans un logiciel de facturation (famille : Invoice Ninja, interface React).
   Sources lues : github.com/invoiceninja/ui (tailwind.config.js : fond du menu #242930, variantes #2F2E2E et #363D47, police Inter,
   échelle de Tailwind par défaut) ; github.com/invoiceninja/invoiceninja (statuts de facture : brouillon, envoyée, vue, approuvée, partielle, payée, en retard) ;
   vocabulaire de la facture électronique 2026 : Factur-X (profil EN 16931), plateforme agréée, statuts Déposée, Reçue, Mise à disposition, Approuvée, Encaissée.
   Les mesures de Tailwind par défaut ne sont pas écrites dans le dépôt : elles sont reprises de son échelle publique.
   Mesures retenues (px de conception, fenêtre de 900 px) :
   1. menu gauche 192 px, fond #242930, lignes 40 px, texte 13 px #d1d5db, actif #363D47 + texte blanc ;
   2. zone de contenu #f9fafb ; barre haute 56 px blanche, bordure basse 1 px #e5e7eb ;
   3. cartes : fond blanc, bordure 1 px #e5e7eb, rayon 6 (rounded-md), sans ombre ;
   4. titre de fiche 20 px / 600 ; onglets 13 px, actif souligné 2 px #2463eb ;
   5. boutons : 34 px de haut, rayon 6 ; principal #2463eb texte blanc, secondaire blanc bordure #d1d5db ;
   6. pastilles de statut : rayon 99, 12,5 px / 500 ; deux tons seulement (vert #166534 sur #dcfce7, ambre #92400e sur #fef3c7) ;
   7. tableau de lignes : en-tête 13 px #6b7280, lignes 44 px, bordure #f3f4f6 ;
   8. frise du cycle de vie : point 16 px, trait vertical 2 px (vert si étape faite, gris pointillé si en attente) ;
   9. avatar : cercle de couleur pleine (#1d4ed8), initiales blanches ;
  10. aucun montant ni « € » : le tableau montre quantités, unité, TVA ; les totaux renvoient au PDF ;
  11. police système, chiffres tabulaires. Tout est sous .sy9 : les anciennes vues .sy6 ne bougent pas. */

.sk.sy9.ap-screen { background: var(--sk-field, #e3dccd); }
.sk.sy9 .ap.sy9w {
  --bw: 900px; --sk-ui-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --blue: #2463eb; --line: #e5e7eb; --ink: #111827; --mute: #6b7280;
  display: flex; height: 800px; padding: 0; overflow: hidden; border: 1px solid #cfd2d8; border-radius: 6px; background: #f9fafb; color: var(--ink); /* taste-skill-ignore */
  font: 400 13px/1.4 var(--sk-ui-font); letter-spacing: 0; font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 3px rgb(17 24 39 / 0.18), 0 14px 32px -18px rgb(17 24 39 / 0.45); /* taste-skill-ignore */
}
.sy9 .sy9-side { flex: none; width: 192px; display: flex; flex-direction: column; padding: 12px 8px; background: #242930; }
.sy9 .sy9-brand { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px; margin-bottom: 8px; color: #fff; font-weight: 600; white-space: nowrap; }
.sy9 .sy9-brand i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: #2f5d46; font-style: normal; font-size: 13px; font-weight: 600; }
.sy9 .sy9-ni { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border-radius: 6px; color: #d1d5db; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sy9 .sy9-ni.on { background: #363d47; color: #fff; font-weight: 500; }
.sy9 .sy9-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sy9 .sy9-top { flex: none; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px; background: #fff; border-bottom: 1px solid var(--line); } /* taste-skill-ignore */
.sy9 .sy9-bc { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: var(--mute); }
.sy9 .sy9-bc b { color: var(--ink); font-weight: 500; }
.sy9 .sy9-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; font-weight: 500; white-space: nowrap; } /* taste-skill-ignore */
.sy9 .sy9-pri { border-color: var(--blue); background: var(--blue); color: #fff; }
.sy9 .sy9-ct { flex: 1; min-width: 0; padding: 18px 20px 0; display: flex; flex-direction: column; gap: 12px; }
.sy9 .sy9-hd { display: flex; align-items: center; gap: 8px; }
.sy9 .sy9-hd h2 { font: 600 20px/1.2 var(--sk-ui-font); margin-right: 6px; }
.sy9 .sy9-hd h2 span { color: var(--mute); font-weight: 500; }
.sy9 .sy9-bd { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.sy9 .sy9-bd.ok { background: #dcfce7; color: #166534; }
.sy9 .sy9-bd.wait { background: #fef3c7; color: #92400e; }

.sy9 .sy9-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); } /* taste-skill-ignore */
.sy9 .sy9-tabs span { display: flex; align-items: center; gap: 6px; height: 38px; color: var(--mute); font-weight: 500; }
.sy9 .sy9-tabs span.on { color: var(--blue); box-shadow: inset 0 -2px 0 var(--blue); } /* taste-skill-ignore */
.sy9 .sy9-tabs i { font-style: normal; padding: 0 6px; border-radius: 99px; background: #e5e7eb; color: #374151; font-size: 13px; }
.sy9 .sy9-cols { display: grid; grid-template-columns: minmax(0, 1fr) 276px; gap: 14px; align-items: start; }
.sy9 .sy9-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sy9 .sy9-card { min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 14px; display: flex; flex-direction: column; gap: 10px; } /* taste-skill-ignore */
.sy9 .sy9-h { font-weight: 600; }
.sy9 .sy9-mu { color: var(--mute); }
.sy9 .sy9-chain { display: flex; align-items: center; gap: 4px; padding: 10px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: #9ca3af; } /* taste-skill-ignore */
.sy9 .sy9-ln { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sy9 .sy9-ln b { color: var(--blue); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: underline; text-underline-offset: 2px; }
.sy9 .sy9-ln span { color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sy9 .sy9-ln.now b { color: var(--ink); text-decoration: none; font-weight: 600; }
.sy9 .sy9-cl { display: flex; align-items: center; gap: 12px; }
.sy9 .sy9-cl i { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: #1d4ed8; color: #fff; font-style: normal; font-weight: 600; }
.sy9 .sy9-cl div { display: flex; flex-direction: column; min-width: 0; }
.sy9 .sy9-cl span { color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sy9 .sy9-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding-top: 10px; border-top: 1px solid #f3f4f6; } /* taste-skill-ignore */
.sy9 .sy9-kv dt { color: var(--mute); }
.sy9 .sy9-kv dd { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sy9 .sy9-lines { padding: 0; gap: 0; }
.sy9 .sy9-th, .sy9 .sy9-tr { display: grid; grid-template-columns: minmax(0, 1fr) 52px 36px 52px; gap: 10px; align-items: center; padding: 0 14px; }
.sy9 .sy9-th { height: 38px; color: var(--mute); font-weight: 500; border-bottom: 1px solid var(--line); } /* taste-skill-ignore */
.sy9 .sy9-tr { height: 44px; border-bottom: 1px solid #f3f4f6; } /* taste-skill-ignore */
.sy9 .sy9-th > :not(:first-child), .sy9 .sy9-tr > :not(:first-child) { text-align: right; }
.sy9 .sy9-q { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sy9 .sy9-ft { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 44px; padding: 0 14px; color: var(--mute); background: #f9fafb; border-radius: 0 0 6px 6px; white-space: nowrap; }
.sy9 .sy9-ft span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 500; }
.sy9 .sy9-tl { display: flex; flex-direction: column; }
.sy9 .sy9-st { position: relative; display: flex; flex-direction: column; padding: 0 0 14px 28px; min-height: 52px; }
.sy9 .sy9-st:last-child { padding-bottom: 0; min-height: 0; }
.sy9 .sy9-st b { font-weight: 600; }
.sy9 .sy9-st > span:not(.sy9-dt) { color: var(--mute); }
.sy9 .sy9-dt { position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #16a34a; color: #fff; }
.sy9 .sy9-dt svg { stroke-width: 3.4; }
.sy9 .sy9-st::before { content: ''; position: absolute; left: 7px; top: 19px; bottom: 3px; width: 2px; background: #16a34a; }
.sy9 .sy9-st.ok:nth-last-child(2)::before { width: 0; background: none; border-left: 2px dashed #d1d5db; }
.sy9 .sy9-st:last-child::before { display: none; }
.sy9 .sy9-st.wait .sy9-dt { background: #fff; box-shadow: inset 0 0 0 2px #d97706; } /* taste-skill-ignore */
.sy9 .sy9-st.wait b { color: #92400e; }
.sy9 .sy9-rh { display: flex; align-items: center; justify-content: space-between; }
.sy9 .sy9-rb { font-weight: 600; }
.sy9 .sy9-tgl { position: relative; width: 36px; height: 20px; flex: none; border-radius: 99px; background: var(--blue); }
.sy9 .sy9-tgl::after { content: ''; position: absolute; top: 2px; left: 18px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
 /* taste-skill-ignore */

@media (max-width: 560px) {
  /* mobile : 568 px de conception, menu masqué, échelle jamais sous 0,62 ; --focus-x/y recadrent si besoin */
  .sk.sy9 .ap-fit { overflow: hidden; }
  .sk.sy9 .ap.sy9w { --bw: 568px; zoom: max(0.62, calc(100cqw / var(--bw))); margin: calc(var(--focus-y, 0px) * -1) 0 0 calc(var(--focus-x, 0px) * -1); max-width: none; }
  .sy9 .sy9-side, .sy9 .sy9-upd, .sy9 .sy9-btn:not(.sy9-pri) { display: none; }
  .sy9 .sy9-cols { display: flex; flex-direction: column; align-items: stretch; }
  .sy9 .sy9-col { display: contents; }
  .sy9 .sy9-chain { order: -3; }
  .sy9 .sy9-rt > :first-child { order: -2; }
  .sy9 .sy9-rt > :nth-child(2) { order: -1; }
}

/* ---- v9/process.css ---- */
/* Méthode v9 (process.html). Mesures relevées dans le code source ouvert :
   Lighthouse, github.com/GoogleChrome/lighthouse/blob/main/report/assets/styles.css (lu) :
     couleurs --color-pass #0c6 / average #fa3 / fail #f33, textes secondaires #080 / #C33300 / #c00 ; jauge 48 px (96 grande), police du
     pourcentage = taille x 0,34 + 1,3 px ; libellé de jauge 12 px / 20, graisse 500 ; ligne d'indicateur : filet haut #ebebeb, padding 8 px,
     valeur 25,2 px ; formes : disque (réussi), carré (moyen), triangle (échec) de 12 px ; titres de groupe en capitales 12 px, 0,8 px d'espacement,
     #616161 ; police system-ui, Roboto, Helvetica, Arial ; base 14 px / 24 px.
   Plane, github.com/makeplane/plane/blob/preview/packages/constants/src/state.ts (lu) : états Backlog #d9d9d9, À faire #3f76ff,
     En cours #f59e0b, Fait #16a34a, Annulé #dc2626. Cartes de tableau blanches à bordure 1 px, rayon 4 px, identifiant en gris, titre 14 px,
     propriétés (priorité, date, assignés) en puces à bordure ; priorité = barres de signal (urgente = carré rouge à point d'exclamation).
   Plausible, github.com/plausible/analytics, assets/css/app.css (lu : Tailwind, gris zinc, indigo-600, vert emerald, rayons md) et
     composants du tableau de bord : étiquette de métrique en capitales grasses, valeur 2xl grasse, delta vert ou rouge ; courbe indigo
     #3b82f6 sur aplat 20 % ; barres de listes vert pâle (bg-green-50) derrière le texte ; point vert pulsé pour « visiteurs actuels ».
   Penpot (github.com/penpot/penpot, thème sombre ; jetons notés de mémoire, le fichier de couleurs visé a répondu 404) : fond #18181a,
     panneaux #212426, champs #2e3434 rayon 8, texte #8f9da3, accent #7efff5, sélection #31efb8, étiquettes de curseur à la couleur de l'auteur.
   Fenêtre dessinée en px à sa taille réelle (620 px) puis zoomée à la largeur de .proc-ui (zoom min 0,62) ; tous les textes font 13 px ou plus
   pour rester à 8 px minimum à 0,62. Recadrage mobile : --fx / --fy sur .pr9 (px de la fenêtre dessinée). */

/* ── carte : jetons du site ── */

/* ── fenêtre ── */

/* ── chromes de navigateur (un par carte) ── */

/* a : onglet arrondi, barre claire (Chrome) */

/* b : points de fenêtre et adresse centrée (Safari) */

/* c : barre sombre (Edge sombre) */

/* d : onglets à plots, menu à droite (Firefox) */

/* ── 1 Lighthouse ── */

/* ── 2 Plane ── */

/* colonne « Fait » repliée, comme une colonne masquée d'un vrai tableau de tickets */

/* ── 3 Penpot ── */

@keyframes pd9-a { 0% { translate: 50px 60px; } 40%, 100% { translate: 0 0; } }
@keyframes pd9-b { 0% { translate: -40px 30px; } 50%, 100% { translate: 0 0; } }

/* ── 4 Plausible ── */

/* ---- v9/cta.css ---- */
/* ═════════ cta.html (v9) : Booker façon Cal.com ═════════
   Mesures relevées dans le code source (dépôt calcom/cal.com, désormais calcom/cal.diy, branche main) :
   - packages/features/bookings/Booker/config.ts : colonnes --booker-meta-width 240 px (280 en lg), --booker-main-width 480 px,
     --booker-timeslots-width 240 px (280 en lg) ; Booker.tsx : cadre rounded-md (6 px) + border-subtle 1 px, fond blanc.
   - apps/web/modules/bookings/components/EventMeta.tsx : p-6 (24 px), titre text-xl semibold (20 px), blocs d'info
     text-sm font-medium espacés de 16 px avec icône 16 px (horloge, vidéo, globe + sélecteur de fuseau).
   - packages/features/calendars/components/DatePicker.tsx : mois text-base (nom semibold, année medium) ;
     jours de la semaine en text-xs, espacés, my-4 ; grille 7 colonnes gap-1 (4 px), cases carrées ;
     jour = rounded-md (6 px) text-sm font-medium sur bg-emphasis gris ; fermé = font-light grisé ; choisi = bg-brand (noir plein) ;
     aujourd'hui = point rond de 5 px sous le chiffre.
   - apps/web/modules/bookings/components/AvailableTimes.tsx : créneau = bouton secondaire min-h-9 (36 px), mb-2 (8 px), rounded-md,
     bordure 1 px ; survol/choisi border-brand ; puce ronde 8 px emerald-400 ; AvailableTimesHeader.tsx : « mar. 03 » semibold +
     bascule 12 h / 24 h à droite.
   Disposition retenue : trois colonnes (infos / calendrier / créneaux, 960 px dessinés) quand le bloc est large ;
   sous 720 px de large : infos en bandeau puis calendrier + créneaux (520 px dessinés), échelle mini 0,62. */
.sk { --sk-ui-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }

/* bloc vert : rayon du site ; la colonne de droite laisse la place au Booker */
.sk .ca9 { border-radius: var(--sk-r-card, 0); }
.sk .ca9 .ca7-r { min-height: 0; padding: 1.4rem 1rem 1.6rem; place-items: center; }
@container (min-width: 48rem) {
  .sk .ca9 { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .sk .ca9 .ca7-t { padding: 3.4rem 2.8rem; }
  .sk .ca9 .ca7-r { padding: 2.6rem 2.2rem 2.6rem 0.6rem; }
}

/* bouton plein simple, sans flèche ni rond */
.sk .ca-act .ca9-btn { padding: 0.95rem 1.6rem; border-radius: var(--sk-r-ctl, 4px); background: var(--pap); color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.2; }
.sk .ca-act .ca9-btn:hover { background: color-mix(in srgb, var(--pap) 88%, var(--acc)); }
.sk .ca-act .ca9-btn:focus-visible { outline: 3px solid var(--pap); outline-offset: 3px; }

/* ── le Booker ── */
.ca9-book { container-type: inline-size; width: 100%; min-width: 0; overflow: hidden; border-radius: 6px; }
.cal9 {
  --bw: 960px; --focus-x: 0px; --focus-y: 0px;
  --e: #111827; --d: #374151; --s: #4b5563; --line: #e5e7eb; --btn: #d1d5db; --day: #e5e7eb; --off: #9ca3af; --ok: #34d399;
  display: grid; grid-template-columns: 240px 480px 240px; width: var(--bw); zoom: 0.8;
  margin: var(--focus-y) 0 0 calc(var(--focus-x) * -1);
  background: #fff; color: var(--e); border: 1px solid var(--line); border-radius: 6px; box-sizing: border-box; /* taste-skill-ignore */
  font: 400 14px/20px var(--sk-ui-font); font-variant-numeric: tabular-nums; text-align: left; -webkit-font-smoothing: antialiased;
}
@supports (zoom: calc(1px / 1px)) { .cal9 { zoom: calc(100cqw / var(--bw)); } }
.cal9 svg { display: block; flex: none; width: 16px; height: 16px; }
.cal9 b { font-weight: 600; }

/* EventMeta */
.cal9-meta { padding: 24px; min-width: 0; }
.cal9-who { display: flex; align-items: center; gap: 8px; color: var(--s); font-weight: 600; }
.cal9-av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #1d6fd8; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.cal9-title { margin: 8px 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }

.cal9-blocks { display: flex; flex-direction: column; gap: 16px; color: var(--d); font-weight: 500; }
.cal9-blocks > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cal9-blocks > span svg:last-child:not(:first-child) { margin-left: auto; color: var(--s); width: 14px; height: 14px; }

/* DatePicker */
.cal9-main { padding: 12px 20px; border-left: 1px solid var(--line); min-width: 0; } /* taste-skill-ignore */
.cal9-mh { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 4px; font-size: 16px; line-height: 24px; }
.cal9-mh > span:first-child { font-weight: 500; color: var(--s); }
.cal9-mh b { color: var(--e); }
.cal9-nav { display: flex; }
.cal9-nav > span { display: grid; place-items: center; padding: 4px; border-radius: 6px; color: var(--e); opacity: 0.7; }
.cal9-nav > span.is-off { opacity: 0.25; }
.cal9-wd { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px 4px; margin: 16px 0; text-align: center; font-size: 12px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; }
.cal9-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.cal9-d { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; border: 2px solid transparent; font-size: 14px; font-weight: 500; background: var(--day); color: var(--e); }
.cal9-d.is-off { background: none; color: var(--off); font-weight: 300; }
.cal9-d.is-sel { background: var(--e); color: #fff; }
.cal9-d.is-today::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin-left: -2.5px; transform: translateY(10px); border-radius: 50%; background: var(--e); }
.cal9-d.is-today.is-sel::after { background: #fff; }

/* AvailableTimes */
.cal9-times { padding: 12px 20px 0; border-left: 1px solid var(--line); min-width: 0; max-height: 520px; overflow: hidden; } /* taste-skill-ignore */
.cal9-th { display: flex; align-items: center; margin: 12px 0; font-weight: 500; }
.cal9-th b { font-weight: 600; }
.cal9-tf { display: flex; margin-left: auto; padding: 2px; border-radius: 6px; background: #f3f4f6; font-size: 12px; line-height: 16px; color: var(--s); }
.cal9-tf span { padding: 3px 7px; border-radius: 4px; }
.cal9-tf span.on { background: #fff; color: var(--e); font-weight: 600; box-shadow: 0 0 0 1px var(--line); } /* taste-skill-ignore */
.cal9-sl { display: flex; flex-direction: column; }
.cal9-s { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; margin-bottom: 8px; border: 1px solid var(--btn); border-radius: 6px; font-weight: 500; } /* taste-skill-ignore */
.cal9-s i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.cal9-s.is-hot { border-color: var(--e); }

/* étroit : infos en bandeau, calendrier + créneaux (mise en page mobile de Cal.com) */
@container (max-width: 719px) {
  .cal9 { --bw: 520px; grid-template-columns: 300px 220px; grid-template-areas: 'meta meta' 'main times'; zoom: 0.62; }
  @supports (zoom: calc(1px / 1px)) { .cal9 { zoom: max(0.62, calc(100cqw / var(--bw))); } }
  .cal9-meta { grid-area: meta; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); } /* taste-skill-ignore */
  .cal9-who { grid-column: 1; }
  .cal9-title { grid-column: 2; margin: 0; font-size: 16px; line-height: 24px; }

  .cal9-blocks { grid-column: 1 / -1; flex-direction: row; gap: 18px; font-size: 13px; }
  .cal9-main { grid-area: main; border-left: 0; padding: 4px 16px 12px 20px; }
  .cal9-times { grid-area: times; max-height: 380px; padding: 12px 16px 0; }
  .cal9-wd { font-size: 13px; letter-spacing: 0.04em; }
  .cal9-tf { font-size: 13px; }
  .cal9-av { width: 28px; height: 28px; font-size: 13px; }
}

/* ---- v9/notifications.css ---- */
/* Notifications v9 (nt9) : bannières du centre de notifications système (macOS Sequoia / iOS 18), empilées.
   Mesures (conventions publiques d'Apple, Human Interface Guidelines « Notifications » et capture du centre de notifications ; pas de code source ouvert pour macOS, aucune URL lue) :
   - bannière : fond clair opaque #f5f5f7, filet 1 px rgb(0 0 0 / .1), rayon 18 px, marges 10 12 ;
   - entête : icône d'app 20 px (rayon d'app 4,5 px, glyphe blanc 12 px), nom de l'app 11 px #6e6e73, heure à droite 11 px ;
   - titre 13 px gras, texte 12,5 px interlignage 16 px, deux lignes au plus (coupe avec « … ») ;
   - police d'interface : system-ui ; chiffres tabulaires ;
   - groupe : carte de devant pleine, deux cartes derrière décalées de 7 px, rétrécies de 8 px de chaque côté, légende « 3 autres notifications » 11 px ;
   - ombre : seulement dans une vue animée (data-ui). */

 /* taste-skill-ignore */ /* taste-skill-ignore */
 /* taste-skill-ignore */

/* positions d'arrivée : le plus récent en haut, les anciens poussés vers le bas */

@keyframes nt9-a { 0%, 4% { opacity: 0; translate: 0 -14px; } 9%, 24% { opacity: 1; translate: 0 0; } 31%, 45% { translate: 0 var(--p); } 52%, 100% { opacity: 1; translate: 0 calc(var(--p) * 2); } }
@keyframes nt9-b { 0%, 24% { opacity: 0; translate: 0 -14px; } 31%, 45% { opacity: 1; translate: 0 0; } 52%, 100% { opacity: 1; translate: 0 var(--p); } }
@keyframes nt9-c { 0%, 45% { opacity: 0; translate: 0 -14px; } 52%, 100% { opacity: 1; translate: 0 0; } }

/* groupe empilé */

 /* taste-skill-ignore */

/* pile posée sur la capture (projet.html) : groupe réduit, les anciennes notifications dépassent derrière la dernière */

@keyframes kn9-b { 0%, 25% { opacity: 0; translate: 0 -12px; scale: 1; } 31%, 45% { opacity: 1; translate: 0 0; scale: 1; } 52%, 65% { translate: 0 8px; scale: 0.94; } 72%, 100% { opacity: 1; translate: 0 16px; scale: 0.88; } }
@keyframes kn9-c { 0%, 45% { opacity: 0; translate: 0 -12px; scale: 1; } 52%, 65% { opacity: 1; translate: 0 0; scale: 1; } 72%, 100% { opacity: 1; translate: 0 8px; scale: 0.94; } }
@keyframes kn9-d { 0%, 65% { opacity: 0; translate: 0 -12px; } 72%, 100% { opacity: 1; translate: 0 0; } }

/* ---- v9/voie.css ---- */
/* Voie v9 (vw9) : deux boîtes de réception.
   Mesures relevées sur l'interface de Gmail (affichage par défaut) et de Thunderbird (volet de lecture) ; ni l'un ni l'autre n'a été lu dans le code source (Gmail est fermé), conventions d'usage publiques :
   - ligne de liste 40 px, sans carte, séparée par un filet 1 px #f2f2f2 ; non lu : fond blanc, expéditeur, objet et date en gras (600) ; lu : fond #f2f6fc, texte normal ;
   - colonnes : case 14 px, étoile 18 px, expéditeur 132 px (nombre de messages en gris), objet gras + extrait gris #5f6368 tronqué avec « … », trombone, date à droite (56 px) ;
   - libellés : hauteur 18 px, rayon 4 px, texte 12 px, deux tons seulement (rouge pour Relance, bleu pour le reste) ;
   - barre de recherche : pastille #eaf1fb, rayon 24 px, hauteur 36 px ; barre d'outils 40 px avec compteur « 1-50 sur 214 » 12 px ;
   - onglets 44 px, actif souligné 3 px #0b57d0 ; volet de lecture : objet 20 px, avatar rond 36 px, corps 13 px interlignage 20 px ;
   - police d'interface system-ui 13 px ; avatars : cercle de couleur pleine, lettres blanches. */

 /* taste-skill-ignore */

 /* taste-skill-ignore */
 /* taste-skill-ignore */

 /* taste-skill-ignore */

 /* taste-skill-ignore */

/* Avec nous : volet de lecture */

 /* taste-skill-ignore */

/* ---- v9/sections.css ---- */
/* Sections v9 : formules (fo9), FAQ (fq9), chiffres (ch9).
   Plus de cartes grises arrondies identiques : la forme vient du site, lue dans les jetons
   --sk-r-card (rayon des grands blocs, 0 par défaut), --sk-r-ctl (rayon des boutons, 4 px par défaut),
   --sk-font-display (titres, repli --sk-font), --sk-font-text (texte, repli --sk-font), --sk-accent, --sk-ink, --sk-paper.
   Repères typographiques (affiche de tarifs / planche de spécifications, pas un logiciel) :
   - filet d'en-tête 6 px (formules, chiffres) ou 4 px (FAQ), filets intérieurs 1 px à 25 % de l'encre ;
   - grands chiffres : 4,5 rem (formules), jusqu'à 7 rem (chiffres), titres en police d'affichage du site ;
   - formules : trois colonnes dont la deuxième est un aplat de la couleur d'accent ; aucun prix ;
   - FAQ : filets épais, signe plus qui devient un moins à l'ouverture, fond teinté pour la réponse ouverte ;
   - chiffres : chaque valeur porte l'étiquette « Exemple », note de bas de bloc « non contractuels ». */
.fo9, .fq9, .ch9 { --r-card: var(--sk-r-card, 0px); --r-ctl: var(--sk-r-ctl, 4px); --hair: color-mix(in srgb, var(--ink) 25%, transparent); font-family: var(--sk-font-text, var(--sk-font, inherit)); }
.fo9 :is(h2, h3, h4), .fq9 h2, .fq9 summary, .ch9 h2, .ch9-n { font-family: var(--sk-font-display, var(--sk-font, inherit)); }
.fo9 h2, .fq9 h2, .ch9 h2 { font-size: clamp(2rem, 4.6cqi, 3.2rem); }

/* formules */

 /* taste-skill-ignore */

 /* taste-skill-ignore */

 /* taste-skill-ignore */

/* FAQ */
.fq9 { interpolate-size: allow-keywords; }
.fq9-in { display: grid; gap: 1.6rem; grid-template-columns: minmax(0, 1fr); }
.fq9-in h2 { max-width: 10em; }
.fq9-in .lead { color: var(--body-ink); margin-top: 0.9rem; }
.fq9-list { align-content: start; border-bottom: 4px solid var(--ink); } /* taste-skill-ignore */
.fq9 details { border-top: 4px solid var(--ink); } /* taste-skill-ignore */
.fq9 details[open] { background: color-mix(in srgb, var(--acc) 12%, var(--pap)); border-radius: var(--r-card); }
.fq9 summary { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; padding: 1.2rem 1rem; list-style: none; cursor: pointer; font-size: 1.3rem; font-weight: 500; line-height: 1.2; }
.fq9 summary::-webkit-details-marker { display: none; }
.fq9 summary:focus-visible { outline: 3px solid var(--acc); outline-offset: -3px; } /* taste-skill-ignore */
.fq9-pl { position: relative; width: 1.1rem; height: 1.1rem; flex: none; }
.fq9-pl::before, .fq9-pl::after { content: ''; position: absolute; background: currentColor; }
.fq9-pl::before { left: 0; right: 0; top: calc(50% - 1.25px); height: 2.5px; }
.fq9-pl::after { top: 0; bottom: 0; left: calc(50% - 1.25px); width: 2.5px; transition: scale 0.3s cubic-bezier(0.65, 0, 0.35, 1); }
.fq9 details[open] .fq9-pl::after { scale: 1 0; }
.fq9 details::details-content { block-size: 0; overflow: clip; transition: block-size 0.35s cubic-bezier(0.65, 0, 0.35, 1), content-visibility 0.35s allow-discrete; }
.fq9 details[open]::details-content { block-size: auto; }
.fq9 details p { padding: 0 1rem 1.4rem; font-size: 1.05rem; color: var(--body-ink); max-width: 56ch; }
@container (min-width: 52rem) { .fq9-in { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 4rem; } }
@media (prefers-reduced-motion: reduce) { .fq9 details::details-content, .fq9-pl::after { transition: none; } }

/* chiffres */

 /* taste-skill-ignore */

/* chiffres qui roulent : rangée plus haute que 1 em pour ne pas couper les empattements ni les chiffres bas de casse de la police du site */