/* ═══ axolo · charte.css — la charte du logiciel sur les pages intérieures (14/10/2026) ═══════════
   Articles, liste, à propos, pages légales. Chargée APRÈS la feuille de la page et ses <style>
   historiques : en-tête sombre et logo animé de l'accueil, contenu sur blanc, pied #F7F6F6.
   Rien ici ne touche l'accueil (qui a manager.css). */
:root {
  --ch-nuit: #100F0F; --ch-creme: #F2ECE5; --ch-encre: #2A201D; --ch-faible: #63666D;
  --ch-peche: #FFA691; --ch-peche-clair: #FFC99F; --ch-corail: #E8576B; --ch-fond: #FFFFFF;
  --ch-fond-clair: #F7F6F6; --ch-filet: #ECE8E1;
  --ch-display: "DM Sans", "Hanken Grotesk", sans-serif; --ch-mono: "IBM Plex Mono", ui-monospace, monospace;
}
body { background: var(--ch-fond); color: var(--ch-encre); }

/* En-tête : la barre sombre de l'accueil */
.ch-tete { position: sticky; top: 0; z-index: 50; background: var(--ch-nuit) url("/a/fonds/grain.svg?v=e3e4bca8"); border-bottom: 1px solid rgba(249, 242, 237, .1); }
.ch-nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 1220px; margin: 0 auto; padding: 14px clamp(16px, 3.4vw, 44px); }
.ch-marque { display: inline-flex; align-items: center; color: var(--ch-creme); text-decoration: none; }
.ch-liens { display: flex; gap: clamp(14px, 2.2vw, 28px); }
.ch-liens a { color: rgba(249, 242, 237, .78); text-decoration: none; font-size: 14px; transition: color 200ms ease; }
.ch-liens a:hover, .ch-liens a[aria-current] { color: #FFFFFF; }
.ch-cta { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--ch-peche); color: #171717; font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; transition: background 200ms ease; }
.ch-cta:hover { background: var(--ch-peche-clair); }
@media (max-width: 760px) { .ch-liens { display: none; } }

/* Titres et accents de la charte, sur fond blanc */
.doc-tete h1, .doc h2, .p-articles h1, .p-articles h2 { font-family: var(--ch-display); color: var(--ch-encre); letter-spacing: -.01em; }
.doc-tete .eyebrow, .doc-tete .mono.eyebrow { color: var(--ch-corail); }
.doc a { color: var(--ch-encre); text-decoration-color: var(--ch-peche); text-underline-offset: 3px; }
.doc a:hover { text-decoration-color: var(--ch-corail); }

/* Illustrations : les agents Axolo sur fond texturé, en pleine largeur (3:2) */
.p-article .article-visuel { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; background: var(--ch-fond-clair); border-radius: 24px; }
.p-articles .thumb, .lire-aussi img, .article-slot img { object-fit: cover !important; background: var(--ch-fond-clair) !important; }

/* L'appel de fin : la liste d'attente, bouton pêche */
body .appel .pilule-noire { background: var(--ch-peche); color: #171717; }
body .appel .pilule-noire:hover { background: var(--ch-peche-clair); }

/* Pied : #F7F6F6, logo, mentions */
.ch-pied { background: var(--ch-fond-clair); border-top: 1px solid var(--ch-filet); margin-top: 64px; padding: 44px 0 40px; }
.ch-pied-in { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 3.4vw, 44px); display: grid; gap: 28px; }
.ch-pied .ch-marque { color: var(--ch-encre); }
.ch-pied-tag { color: var(--ch-faible); font-size: 14px; margin-top: 10px; }
.ch-pied-tag a, .ch-pied-bas a { color: inherit; }
.ch-pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 20px; border-top: 1px solid var(--ch-filet); color: var(--ch-faible); font-size: 13px; }
.ch-pied-bas nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ch-pied-bas a { text-decoration: none; } .ch-pied-bas a:hover { color: var(--ch-encre); }

/* Le logo vectoriel (mascotte #FBC1AD animée, lettres en currentColor) — même dessin que l'accueil */
.logo-svg { display: block; height: 30px; width: auto; overflow: visible; }
.logo-corps { transform-box: fill-box; transform-origin: 50% 90%; animation: ch-corps 4.8s ease-in-out infinite; transition: filter 300ms ease; }
.ch-tete .logo-corps { filter: drop-shadow(0 0 2.5px rgba(251, 193, 173, .55)); }
.ch-marque:hover .logo-corps { animation: ch-bond 600ms cubic-bezier(.3, 1.4, .5, 1); filter: drop-shadow(0 0 6px rgba(251, 193, 173, .9)) drop-shadow(0 0 14px rgba(251, 193, 173, .6)); }
.logo-oeil { transform-box: fill-box; transform-origin: center; animation: ch-cligne 5s infinite; }
.logo-pup { fill: #6E2A2A; transform: translate(var(--rx, 0), var(--ry, 0)); transition: transform 120ms ease-out; }
.logo-t1, .logo-t2, .logo-t3 { transform-box: view-box; animation: ch-derive 9s ease-in-out infinite alternate; }
.logo-t2 { animation-duration: 12s; animation-direction: alternate-reverse; } .logo-t3 { animation-duration: 14s; }
@keyframes ch-corps { 0%, 100% { transform: rotate(-3deg); } 25% { transform: scale(1.04, .96); } 50% { transform: rotate(3deg); } 75% { transform: scale(.97, 1.03); } }
@keyframes ch-bond { 20% { transform: scale(1.15, .85); } 50% { transform: translateY(-12%) scale(.94, 1.08) rotate(-8deg); } 75% { transform: scale(1.06, .95); } }
@keyframes ch-cligne { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes ch-derive { 0% { transform: translate(-3px, -2px); } 50% { transform: translate(3px, 2px); } 100% { transform: translate(-1px, 3px); } }
@media (max-width: 640px) { .logo-svg { height: 26px; } }
@media (prefers-reduced-motion: reduce) { .logo-corps, .logo-oeil, .logo-t1, .logo-t2, .logo-t3 { animation: none; } }

/* Les agents Axolo (repris de manager.css, sans le préfixe de page) : dessin d'a/axolos.js */
:root { --mascotte-oeil: #FFFFFF; --mascotte-ombre: #5A1640; }
.axolo { --taille: 32px; --boucle: 240ms; display: inline-block; flex: none; width: var(--taille); height: var(--taille); --regard-x: 0px; --regard-y: 0px; }
.axolo[data-axolo="guide"]   { --m-base: #FF9DB4; --m-light: #FFC79A; --m-low: #C59BFF; --m-accent: #FF7FA8; --m-ombre: #5A1640; --m-pupille: #7A2457; }
.axolo[data-axolo="ui"]      { --m-base: #9AA8FF; --m-light: #B9F0FF; --m-low: #C08BFF; --m-accent: #7C8CFF; }
.axolo[data-axolo="ux"]      { --m-base: #5FD9C0; --m-light: #E4FF9E; --m-low: #4FA8FF; --m-accent: #2CC8A8; }
.axolo[data-axolo="produit"] { --m-base: #FFB45E; --m-light: #FFE69A; --m-low: #FF7A7A; --m-accent: #FF9640; }
.axolo[data-axolo="dev"]     { --m-base: #8F80FF; --m-light: #A8F6FF; --m-low: #B9A6FF; --m-accent: #C08BFF; }
.axolo:not([data-axolo="guide"]) { --m-ombre: color-mix(in oklch, var(--m-accent) 45%, var(--mascotte-ombre)); --m-pupille: color-mix(in oklch, var(--m-accent) 40%, var(--mascotte-ombre)); }
.axolo-sm { --taille: 22px; } .axolo-md { --taille: 30px; } .axolo-lg { --taille: 44px; } .axolo-xl { --taille: 96px; }
.ax-art { width: 100%; height: 100%; overflow: visible; display: block; }
.ax-base { fill: var(--m-base); }
.ax-light { stop-color: var(--m-light); } .ax-low { stop-color: var(--m-low); } .ax-accent { stop-color: var(--m-accent); }
.ax-brillant { stop-color: var(--mascotte-oeil); stop-opacity: .28; }
.ax-clair { stop-opacity: 0; }
.ax-ombre { stop-color: var(--m-ombre); } .ax-ombre.ax-bord { stop-opacity: .45; }
.ax-reflet { mix-blend-mode: plus-lighter; }
.ax-blanc { fill: var(--mascotte-oeil); }
.ax-ferme { fill: none; stroke: var(--mascotte-oeil); stroke-width: 1.8; stroke-linecap: round; }
.ax-pupille { fill: var(--m-pupille); transform: translate(var(--regard-x), var(--regard-y)); transition: transform 120ms ease-out; }
.ax-corps { transform-box: view-box; transform-origin: 50% 75%; animation: ax-balance calc(var(--boucle) * 25) ease-in-out infinite; }
.ax-tache { transform-box: view-box; animation: ax-derive calc(var(--boucle) * 32) ease-in-out infinite alternate; }
.ax-tache.lente { animation-duration: calc(var(--boucle) * 40); animation-direction: alternate-reverse; }
.ax-tache.plus-lente { animation-duration: calc(var(--boucle) * 46); }
.ax-oeil { transform-box: fill-box; transform-origin: center; animation: ax-cligne calc(var(--boucle) * 21) infinite; }
/* Il travaille : yeux plissés, la lumière accélère, il respire */
.axolo[data-etat="travaille"] .ax-oeil { animation: none; transform: scaleY(.3); }
.axolo[data-etat="travaille"] .ax-pupille { opacity: 0; }
.axolo[data-etat="travaille"] .ax-corps { animation: ax-respire calc(var(--boucle) * 6) ease-in-out infinite; }
.axolo[data-etat="travaille"] .ax-tache { animation-duration: calc(var(--boucle) * 9); }
@keyframes ax-balance { 0%, 100% { transform: rotate(-2.5deg); } 25% { transform: rotate(0) scale(1.02, .98); } 50% { transform: rotate(2.5deg); } 75% { transform: rotate(0) scale(.985, 1.015); } }
@keyframes ax-derive { 0% { transform: translate(-8%, -4%); } 50% { transform: translate(6%, 5%); } 100% { transform: translate(-3%, 8%); } }
@keyframes ax-cligne { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.12); } }
@keyframes ax-respire { 50% { transform: scale(1.03, .97); } }
@media (prefers-reduced-motion: reduce) { .ax-corps, .ax-tache, .ax-oeil, .axolo[data-etat="travaille"] .ax-corps { animation: none; } .ax-pupille { transform: none; } }
.axolo { position: relative; isolation: isolate; cursor: pointer; pointer-events: auto; }
.axolo::before { content: ""; position: absolute; inset: -55%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--m-light) 85%, transparent), color-mix(in srgb, var(--m-base) 45%, transparent) 45%, transparent 75%);
  filter: blur(4px); opacity: .75; animation: ax-lueur 3.6s ease-in-out infinite; }
.axolo-xl::before { inset: -35%; filter: blur(10px); }
.ax-art { transform-origin: 50% 85%; animation: ax-souffle 3.6s ease-in-out infinite; }
.axolo { transition: transform 260ms cubic-bezier(.3, 1.6, .5, 1); }
.axolo:hover { transform: scale(1.14) translateY(-4%); }
.axolo:hover::before { opacity: 1; inset: -70%; }
.axolo-xl:hover::before { inset: -45%; }
.axolo:hover .ax-oeil { animation: none; }
.axolo.saute .ax-art { animation: ax-saut 650ms cubic-bezier(.3, 1.4, .5, 1); }
.axolo.saute .ax-oeil { transform: scaleY(.25); animation: none; }
.axolo.saute::before { animation: ax-eclat 650ms ease-out; }
.ax-etincelle { position: absolute; left: 50%; top: 40%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; pointer-events: none;
  background: var(--m-light); box-shadow: 0 0 6px var(--m-base); animation: ax-etincelle 800ms ease-out forwards; }
.ax-etincelle:nth-child(2n) { background: var(--m-accent); width: 4px; height: 4px; }
.axolo-sm .ax-etincelle, .axolo-md .ax-etincelle { width: 4px; height: 4px; }
@keyframes ax-souffle { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.045, .965) translateY(1%); } }
@keyframes ax-lueur { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: .9; transform: scale(1.06); } }
@keyframes ax-saut { 0% { transform: scale(1); } 20% { transform: scale(1.18, .8); } 45% { transform: translateY(-28%) scale(.92, 1.1) rotate(-6deg); } 70% { transform: translateY(0) scale(1.08, .92); } 100% { transform: scale(1); } }
@keyframes ax-eclat { 0% { opacity: .7; transform: scale(1); } 35% { opacity: 1; transform: scale(1.4); } 100% { opacity: .7; transform: scale(1); } }
@keyframes ax-etincelle { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); } }
.axolo[data-axolo="guide"] { --m-base: #FBC1AD; --m-light: #FFEADF; --m-low: #E9837A; --m-accent: #F9A27E; --m-ombre: #7A2E2A; --m-pupille: #6E2A2A; }

/* Cartes d'articles : le style des cartes d'identité des Axolo (accueil, « The team ») —
   crème, halo aux couleurs de l'agent de l'article, grain, agent en haut à gauche,
   catégorie en mono en haut à droite, titre, résumé, pied en pointillés. */
.ch-carte { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; border-radius: 24px; background: #FFFBF6; border: 0 !important; box-shadow: 0 1px 2px rgba(23, 24, 27, .05), 0 14px 40px rgba(23, 24, 27, .06); color: var(--ch-encre); text-decoration: none; transition: transform 300ms cubic-bezier(.22, .61, .36, 1), box-shadow 300ms ease; }
.ch-carte:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(23, 24, 27, .05), 0 24px 50px rgba(23, 24, 27, .1); }
.ch-carte::before { content: ""; position: absolute; inset: -30% -30% 55% -30%; z-index: -2; background: radial-gradient(50% 60% at 50% 60%, var(--m-light) 0%, transparent 70%), radial-gradient(40% 50% at 20% 40%, var(--m-base) 0%, transparent 70%), radial-gradient(40% 50% at 85% 50%, var(--m-low) 0%, transparent 70%); filter: blur(18px); opacity: .85; }
.ch-carte::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("/a/fonds/grain.svg?v=e3e4bca8"); opacity: .4; mix-blend-mode: multiply; pointer-events: none; }
.ch-carte[data-axolo="guide"] { --m-base: #FBC1AD; --m-light: #FFEADF; --m-low: #F9A27E; }
.ch-carte[data-axolo="ui"] { --m-base: #9AA8FF; --m-light: #B9F0FF; --m-low: #C08BFF; }
.ch-carte[data-axolo="ux"] { --m-base: #5FD9C0; --m-light: #E4FF9E; --m-low: #4FA8FF; }
.ch-carte[data-axolo="produit"] { --m-base: #FFB45E; --m-light: #FFE69A; --m-low: #FF7A7A; }
.ch-carte[data-axolo="dev"] { --m-base: #8F80FF; --m-light: #A8F6FF; --m-low: #B9A6FF; }
.ch-carte-tete { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.ch-carte .axolo { --taille: 60px; margin: 4px 0 0 2px; filter: drop-shadow(0 12px 16px rgba(59, 41, 34, .2)); }
.ch-carte .axolo::before { inset: -45%; }
.ch-carte-cat { font-family: var(--ch-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ch-encre); opacity: .6; }
.ch-carte h3 { font-family: var(--ch-display); font-size: 19px; line-height: 1.2; font-weight: 700; color: var(--ch-encre); margin: 0; }
.ch-carte p { font-size: 14px; line-height: 1.45; color: var(--ch-encre); margin: 0; }
.ch-carte-pied { margin-top: auto; padding-top: 12px; border-top: 1px dashed rgba(59, 41, 34, .2); font-size: 13px; font-style: italic; color: var(--ch-faible); }
.ch-carte .thumb, .ch-carte .article-avenir { display: none !important; }

/* Liste des articles : trois colonnes, comme les cartes d'identité */
@media (min-width: 900px) { .p-articles .articles-grille { grid-template-columns: repeat(3, 1fr); } }

/* Vue détail : la scène vivante de l'article — l'agent animé et son nom, le fragment d'interface,
   les mots-clés de l'article, sur le fond texturé aux couleurs de l'agent (comme les panneaux de
   l'accueil). L'image webp ne sert plus qu'au partage (og:image). */
.ch-visuel { position: relative; isolation: isolate; overflow: hidden; margin: 8px 0 28px; aspect-ratio: 3 / 2; border-radius: 28px; background: var(--t5); box-shadow: 0 30px 70px -30px rgba(59, 41, 34, .35); container-type: inline-size; }
.ch-visuel[data-axolo="guide"]   { --t1: #FBC1AD; --t2: #FFEADF; --t3: #E9837A; --t4: #F9A27E; --t5: #FFF4EE; }
.ch-visuel[data-axolo="ui"]      { --t1: #B7C1FF; --t2: #E6F8FF; --t3: #D6BCFF; --t4: #9AA8FF; --t5: #F5F5FF; }
.ch-visuel[data-axolo="ux"]      { --t1: #8FE3CF; --t2: #EEFFC4; --t3: #9CCBF6; --t4: #5FD9C0; --t5: #F2FBF6; }
.ch-visuel[data-axolo="produit"] { --t1: #FFC98A; --t2: #FFF0C2; --t3: #FF9F9F; --t4: #FFB45E; --t5: #FFF7EC; }
.ch-visuel[data-axolo="dev"]     { --t1: #B9A6FF; --t2: #C8F6FF; --t3: #E0C8FF; --t4: #8F80FF; --t5: #F6F3FF; }
.ch-visuel::before { content: ""; position: absolute; inset: -15%; z-index: -2; filter: blur(34px) saturate(1.15); animation: ch-houle 18s ease-in-out infinite alternate; background:
  radial-gradient(45% 40% at 22% 70%, var(--t4) 0%, transparent 70%), radial-gradient(40% 35% at 85% 15%, var(--t3) 0%, transparent 70%),
  radial-gradient(50% 45% at 70% 85%, var(--t5) 0%, transparent 72%),
  repeating-linear-gradient(118deg, transparent 0 9%, color-mix(in srgb, var(--t2) 70%, transparent) 13% 16%, transparent 21% 27%),
  linear-gradient(98deg, var(--t1) 0%, var(--t2) 16%, var(--t3) 30%, var(--t5) 42%, var(--t1) 56%, var(--t2) 68%, var(--t3) 82%, var(--t5) 100%); }
.ch-visuel::after { content: ""; position: absolute; inset: 0; z-index: 3; background: url("/a/fonds/grain.svg?v=e3e4bca8"); opacity: .45; mix-blend-mode: multiply; pointer-events: none; }
@keyframes ch-houle { from { transform: translate(-2%, -1%) scale(1); } to { transform: translate(2%, 1%) scale(1.04); } }
.ch-v-agent { position: absolute; left: 8%; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 2; }
.ch-v-agent .axolo { --taille: 25cqi; filter: drop-shadow(0 22px 26px rgba(59, 41, 34, .28)); }
.ch-v-agent.duo { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-end; width: 34cqi; gap: 0; }
.ch-v-agent.duo .axolo { --taille: 18cqi; } .ch-v-agent.duo .axolo + .axolo { --taille: 15cqi; margin-left: -2cqi; }
.ch-v-agent.duo .ch-v-nom { margin-top: 14px; }
.ch-v-nom { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .72); backdrop-filter: blur(8px); font-family: var(--ch-mono); font-size: max(10px, 1.6cqi); letter-spacing: .04em; color: var(--ch-encre); white-space: nowrap; box-shadow: 0 6px 16px -8px rgba(59, 41, 34, .4); }
.ch-v-nom i { width: 7px; height: 7px; border-radius: 50%; background: #177247; box-shadow: 0 0 0 3px rgba(23, 114, 71, .18); animation: ch-pouls 1.6s ease-in-out infinite; }
@keyframes ch-pouls { 50% { box-shadow: 0 0 0 6px rgba(23, 114, 71, 0); } }
.ch-v-carte { position: absolute; right: 7%; top: 50%; width: 47%; transform: translateY(-50%) rotate(-2deg); z-index: 2; display: grid; gap: 1.4cqi; padding: 3cqi 3.2cqi; border-radius: 2.4cqi; background: #FFFFFF; color: var(--ch-encre); box-shadow: 0 2px 4px rgba(23, 24, 27, .06), 0 34px 60px -24px rgba(59, 41, 34, .45); font-size: 1.9cqi; animation: ch-flotte 6s ease-in-out infinite; }
@keyframes ch-flotte { 50% { transform: translateY(calc(-50% - 6px)) rotate(-1.4deg); } }
.ch-v-carte .v-lab { font-family: var(--ch-mono); font-size: 1.45cqi; letter-spacing: .06em; text-transform: uppercase; color: #7A6F6A; }
.ch-v-carte .v-big { font-family: var(--ch-display); font-weight: 700; font-size: 3cqi; line-height: 1.1; }
.ch-v-carte .v-bar { display: grid; grid-template-columns: 12cqi 1fr auto; align-items: center; gap: 1.2cqi; font-weight: 600; }
.ch-v-carte .v-bar i { display: block; height: 1.4cqi; border-radius: 1cqi; background: var(--ch-encre); transform-origin: left; animation: ch-barre 1.4s cubic-bezier(.22, .61, .36, 1) both; }
.ch-v-carte .v-bar + .v-bar i { animation-delay: .25s; }
@keyframes ch-barre { from { transform: scaleX(0); } }
.ch-v-carte .v-bar b { font-family: var(--ch-mono); font-size: 1.45cqi; color: #C2410C; white-space: nowrap; }
.ch-v-carte .v-row { display: flex; justify-content: space-between; align-items: center; gap: 1.4cqi; font-weight: 600; padding: .9cqi 0; border-bottom: 1px dashed #EEE7E2; }
.ch-v-carte .v-row:last-of-type { border-bottom: 0; }
.ch-v-carte .v-row b, .ch-v-carte .v-ok, .ch-v-carte .v-ko { font-family: var(--ch-mono); font-weight: 500; font-size: 1.55cqi; white-space: nowrap; }
.ch-v-carte .v-ok { color: #177247; } .ch-v-carte .v-ko { color: #C2410C; }
.ch-v-carte .v-doc { display: flex; gap: 1.4cqi; align-items: center; padding: 1.4cqi 1.6cqi; border-radius: 1.3cqi; background: #F7F6F6; font-weight: 600; }
.ch-v-carte .v-doc b { font-family: var(--ch-mono); font-weight: 500; font-size: 1.5cqi; width: 3.6cqi; height: 3.6cqi; border-radius: .9cqi; display: grid; place-items: center; background: var(--ch-encre); color: #FBC1AD; flex: none; }
.ch-v-carte .v-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: .5cqi; }
.ch-v-carte .v-grid em { aspect-ratio: 2 / 1; border-radius: .5cqi; background: #E8E6FF; }
.ch-v-carte .v-grid em:nth-child(7n+3) { background: #B7C1FF; } .ch-v-carte .v-grid em:nth-child(5n) { background: var(--ch-encre); }
.ch-v-carte .v-note { font-size: 1.6cqi; color: #7A6F6A; font-style: italic; }
.ch-v-carte .v-term { font-family: var(--ch-mono); font-size: 1.75cqi; line-height: 1.7; background: #17181B; color: #F2ECE5; border-radius: 1.3cqi; padding: 1.8cqi 2cqi; }
.ch-v-carte .v-mono { text-transform: none; }
.ch-v-puce { position: absolute; z-index: 2; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .6); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .7); font-family: var(--ch-mono); font-size: max(10px, 1.5cqi); color: var(--ch-encre); white-space: nowrap; animation: ch-flotte-puce 7s ease-in-out infinite; }
.ch-v-puce.p1 { left: 6%; top: 9%; } .ch-v-puce.p2 { right: 9%; top: 8%; animation-delay: -2s; } .ch-v-puce.p3 { left: 40%; bottom: 8%; animation-delay: -4s; }
@keyframes ch-flotte-puce { 50% { transform: translateY(-5px); } }
@media (max-width: 560px) {
  .ch-visuel { aspect-ratio: 4 / 5; }
  .ch-v-agent { left: 50%; top: 8%; transform: translateX(-50%); } .ch-v-agent .axolo { --taille: 30cqi; }
  .ch-v-carte { left: 7%; right: 7%; width: auto; top: auto; bottom: 9%; transform: rotate(-1.5deg); font-size: 3.4cqi; padding: 5cqi; gap: 2.4cqi; animation: none; }
  .ch-v-carte .v-lab, .ch-v-carte .v-bar b, .ch-v-carte .v-row b, .ch-v-carte .v-ok, .ch-v-carte .v-ko, .ch-v-carte .v-doc b { font-size: 2.6cqi; }
  .ch-v-puce.p2, .ch-v-puce.p3 { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ch-visuel::before, .ch-v-carte, .ch-v-puce, .ch-v-nom i, .ch-v-carte .v-bar i { animation: none; } }
/* Retour du 14/10 : le dégradé des cartes plus léger, l'axolo ressort */
.ch-carte::before { opacity: .45; }
.ch-carte .axolo { filter: drop-shadow(0 10px 14px rgba(59, 41, 34, .28)); }
/* Vue détail, même règle que les cartes : fond crème, dégradé allégé, l'agent ressort */
.ch-visuel { background: #FFFBF6; }
.ch-visuel::before { opacity: .45; }
.ch-v-agent .axolo { filter: drop-shadow(0 18px 22px rgba(59, 41, 34, .3)); }
.ch-v-agent .axolo::before { opacity: .45; }
.ch-v-nom, .ch-v-puce { background: rgba(255, 255, 255, .85); border-color: rgba(59, 41, 34, .08); }

/* Vue détail = l'interface des cartes, en grand (retour du 14/10) : fond crème, halo aux couleurs
   de l'agent (mêmes trois taches que .ch-carte), grain ; plus de traînées texturées. */
.ch-visuel { background: #FFFBF6; box-shadow: 0 1px 2px rgba(23, 24, 27, .05), 0 14px 40px rgba(23, 24, 27, .06); }
.ch-visuel[data-axolo="guide"]   { --m-base: #FBC1AD; --m-light: #FFEADF; --m-low: #F9A27E; }
.ch-visuel[data-axolo="ui"]      { --m-base: #9AA8FF; --m-light: #B9F0FF; --m-low: #C08BFF; }
.ch-visuel[data-axolo="ux"]      { --m-base: #5FD9C0; --m-light: #E4FF9E; --m-low: #4FA8FF; }
.ch-visuel[data-axolo="produit"] { --m-base: #FFB45E; --m-light: #FFE69A; --m-low: #FF7A7A; }
.ch-visuel[data-axolo="dev"]     { --m-base: #8F80FF; --m-light: #A8F6FF; --m-low: #B9A6FF; }
.ch-visuel::before { inset: -20%; opacity: .45; filter: blur(30px); animation: none; background:
  radial-gradient(42% 50% at 28% 52%, var(--m-light) 0%, transparent 70%),
  radial-gradient(36% 44% at 12% 30%, var(--m-base) 0%, transparent 70%),
  radial-gradient(40% 46% at 88% 40%, var(--m-low) 0%, transparent 70%); }
.ch-visuel::after { opacity: .4; }
.ch-v-carte { box-shadow: 0 1px 2px rgba(23, 24, 27, .06), 0 24px 50px -20px rgba(59, 41, 34, .25); }
.ch-v-nom, .ch-v-puce { background: #FFFFFF; border: 1px solid rgba(59, 41, 34, .08); backdrop-filter: none; box-shadow: 0 4px 12px -8px rgba(59, 41, 34, .3); }

/* Retour du 14/10 : les Axolo ressortent mieux (ils se fondaient dans leur halo sur fond clair) —
   ombre de bord plus marquée, un peu plus de saturation, ombre portée nette ; halo réduit sur clair. */
.ax-ombre.ax-bord { stop-opacity: .62; }
.ax-art { filter: saturate(1.2) contrast(1.05); }
.ui .axolo::before, .regle-qui .axolo::before, .pr-titre .axolo::before, .choix-bouton .axolo::before, .ch-carte .axolo::before, .ch-visuel .axolo::before, .axo-carte .axolo::before { opacity: .22; inset: -30%; filter: blur(6px); }
.ui .axolo .ax-art, .regle-qui .axolo .ax-art, .pr-titre .axolo .ax-art, .saisie .axolo .ax-art { filter: saturate(1.25) contrast(1.05) drop-shadow(0 1.5px 2px rgba(59, 41, 34, .35)); }
.axo-carte .axolo .ax-art, .ch-carte .axolo .ax-art, .ch-visuel .axolo .ax-art { filter: saturate(1.2) contrast(1.05); }

/* Netteté (14/10) : aucun filtre CSS sur le dessin animé (il était repeint flou) ; un contour
   vectoriel fin, toujours à 1 px, dessine la silhouette. */
.ax-art, .ui .axolo .ax-art, .regle-qui .axolo .ax-art, .pr-titre .axolo .ax-art, .saisie .axolo .ax-art, .axo-carte .axolo .ax-art, .ch-carte .axolo .ax-art, .ch-visuel .axolo .ax-art { filter: none; }
.ax-contour { fill: none; stroke: var(--m-ombre); stroke-opacity: .38; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.axolo-xl .ax-contour, .ch-visuel .ax-contour { stroke-width: 1.5px; }
.ax-ombre.ax-bord { stop-opacity: .55; }

/* Netteté dans les cartes : plus de filtre drop-shadow sur l axolo (il le rendait flou) ;
   une ombre de contact dessinée sous lui, sans filtre. */
.axo-carte .axolo, .ch-carte .axolo, .ch-v-agent .axolo, .p-manager .axo-carte .axolo { filter: none !important; }
.axo-carte .axolo::after, .ch-carte .axolo::after, .ch-v-agent .axolo::after { content: ""; position: absolute; z-index: -1; left: 18%; right: 18%; bottom: 4%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(59, 41, 34, .28), rgba(59, 41, 34, 0)); pointer-events: none; }
.ax-contour { stroke-opacity: .26; }

/* Petites tailles (barres, en-têtes, bouton) : contour diffus, modelé plus contrasté ;
   le guide prend un pêche plus soutenu (même teinte que #FBC1AD, plus de profondeur). */
.axolo-sm .ax-contour, .axolo-md .ax-contour, .axolo-lg .ax-contour { stroke-opacity: .12; }
.axolo-sm .ax-ombre.ax-bord, .axolo-md .ax-ombre.ax-bord, .axolo-lg .ax-ombre.ax-bord { stop-opacity: .78; }
.axolo-sm[data-axolo="guide"], .axolo-md[data-axolo="guide"], .axolo-lg[data-axolo="guide"] { --m-base: #F7A58C; --m-light: #FFE3D4; --m-low: #E0645C; --m-accent: #F2875F; --m-ombre: #7A2E2A; }
.axolo-sm::before, .axolo-md::before { opacity: 0 !important; }

/* Ombre interne au lieu du contour (14/10) : la silhouette tracée épaisse, floutée et découpée
   dans le corps, légèrement décalée vers le bas — elle fonce les bords et donne du volume. */
.ax-contour { display: none; }
.ax-interne { fill: none; stroke: var(--m-ombre); stroke-opacity: .5; stroke-width: 7; }
.axolo-sm .ax-interne, .axolo-md .ax-interne { stroke-opacity: .6; stroke-width: 8; }
.ax-ombre.ax-bord, .axolo-sm .ax-ombre.ax-bord, .axolo-md .ax-ombre.ax-bord, .axolo-lg .ax-ombre.ax-bord { stop-opacity: .4; }

/* Ombre interne au lieu du contour (14/10) : la silhouette tracée épaisse, floutée et découpée
   dans le corps, légèrement décalée vers le bas — elle fonce les bords et donne du volume. */
.ax-contour { display: none; }
.ax-interne { fill: none; stroke: var(--m-ombre); stroke-opacity: .5; stroke-width: 7; }
.axolo-sm .ax-interne, .axolo-md .ax-interne { stroke-opacity: .6; stroke-width: 8; }
.ax-ombre.ax-bord, .axolo-sm .ax-ombre.ax-bord, .axolo-md .ax-ombre.ax-bord, .axolo-lg .ax-ombre.ax-bord { stop-opacity: .4; }

/* Volume des tests Figma (623:9948) : un dégradé radial sur tout le corps, transparent au centre,
   saturé sur les bords, d une couleur propre à chaque Axolo. Remplace l ombre interne. */
.ax-interne { display: none; }
.ax-bord-0 { stop-color: var(--m-bord); stop-opacity: 0; }
.ax-bord-1 { stop-color: var(--m-bord); stop-opacity: 1; }
.axolo[data-axolo="guide"]   { --m-bord: #BF17A6; }
.axolo[data-axolo="produit"] { --m-bord: #E8451C; }
.axolo[data-axolo="ui"]      { --m-bord: #4B4BE8; }
.axolo[data-axolo="ux"]      { --m-bord: #3A5BA8; }
.axolo[data-axolo="dev"]     { --m-bord: #6A3FD6; }
.ax-ombre.ax-bord, .axolo-sm .ax-ombre.ax-bord, .axolo-md .ax-ombre.ax-bord, .axolo-lg .ax-ombre.ax-bord { stop-opacity: .3; }

/* 14/10 : petits Axolo plus grands et sans ombre (plus nets) ; logo sans drop-shadow au repos */
.axolo-sm { --taille: 28px; } .axolo-md { --taille: 36px; }
.axolo-sm .ax-ombre, .axolo-md .ax-ombre { stop-opacity: 0 !important; }
.axolo-sm::after, .axolo-md::after { display: none; }
.logo-corps, .ch-tete .logo-corps, .p-manager .logo-corps { filter: none; }

/* Guide aux couleurs primaires (pêche #FFA691 des boutons, bord corail) — 14/10 */
.axolo[data-axolo="guide"], .axolo-sm[data-axolo="guide"], .axolo-md[data-axolo="guide"], .axolo-lg[data-axolo="guide"] { --m-base: #FFA691; --m-light: #FFDCCB; --m-low: #F47E68; --m-accent: #FF9A7A; --m-ombre: #7A2E2A; --m-pupille: #6E2A2A; --m-bord: #E04A35; }
.axo-carte[data-axolo="guide"], .ch-carte[data-axolo="guide"], .ch-visuel[data-axolo="guide"] { --m-base: #FFA691; --m-light: #FFDCCB; --m-low: #F9A27E; }

/* ═══ Appels à la bêta dans les articles (16/10) ═══════════════════════════════════════════ */
.ch-bandeau { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; padding: 12px 16px; border-radius: 16px; background: #FFF4EE; border: 1px solid #FBD5C6; color: var(--ch-encre); text-decoration: none !important; font-size: 14.5px; line-height: 1.4; transition: background 200ms ease; }
.ch-bandeau:hover { background: #FFEADF; }
.ch-bandeau em { margin-left: auto; font-style: normal; font-weight: 600; white-space: nowrap; color: #C2410C; }
.ch-bandeau-haut { max-width: var(--width-etroit, 720px); margin: 28px auto 0; box-sizing: border-box; }
@media (max-width: 640px) { .ch-bandeau { flex-wrap: wrap; } .ch-bandeau em { margin-left: 40px; } }

.ch-promo { position: relative; isolation: isolate; overflow: hidden; margin: 56px 0 8px; padding: 36px 34px 32px; border-radius: 28px; background: #141211 url("/a/fonds/grain.svg?v=e3e4bca8"); color: #F2ECE5; text-align: center; box-shadow: 0 30px 70px -30px rgba(23, 24, 27, .6); }
.ch-promo::before { content: ""; position: absolute; inset: -30% -20% auto; height: 80%; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 166, 145, .28), transparent 70%); filter: blur(10px); }
.ch-promo-agents { display: flex; justify-content: center; gap: 6px; margin-bottom: 16px; }
.ch-promo-agents .axolo { --taille: 44px; }
.ch-promo-agents .axolo::before { opacity: .3 !important; }
.ch-promo-tag { display: inline-block; font-family: var(--ch-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #FFA691; border: 1px solid rgba(255, 166, 145, .4); border-radius: 999px; padding: 5px 12px; }
.ch-promo h2 { font-family: var(--ch-display); font-size: clamp(26px, 3.2vw, 34px) !important; line-height: 1.1; letter-spacing: -.015em; color: #FFFFFF !important; margin: 16px auto 12px !important; max-width: 560px; }
.ch-promo-lede { color: rgba(242, 236, 229, .75) !important; font-size: 16px; line-height: 1.5; max-width: 540px; margin: 0 auto 22px !important; }
.ch-promo-plus { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 26px !important; padding: 0; color: inherit !important; }
.ch-promo-plus li { margin: 0 !important; padding: 14px 12px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); display: grid; gap: 4px; }
.ch-promo-plus b { font-family: var(--ch-display); font-size: 20px; color: #FFA691; }
.ch-promo-plus span { font-size: 13px; line-height: 1.35; color: rgba(242, 236, 229, .72); }
@media (max-width: 640px) { .ch-promo { padding: 28px 20px; } .ch-promo-plus { grid-template-columns: 1fr; } }

/* Le formulaire de la liste d'attente (même logique que l'accueil, a/manager.js) */
.ch-promo .liste { max-width: 480px; margin: 0 auto; text-align: left; }
.ch-promo .liste-ligne { display: flex; gap: 10px; }
.ch-promo .liste input, .ch-promo .liste select { flex: 1; min-width: 0; height: 48px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: #FFFFFF; color: var(--ch-encre); font: inherit; font-size: 16px; }
.ch-promo .liste input:focus-visible { outline: none; border-color: #FFA691; box-shadow: 0 0 0 3px rgba(255, 166, 145, .3); }
.ch-promo .liste .pilule-noire { height: 48px; display: inline-flex; align-items: center; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600; white-space: nowrap; background: #FFA691; color: #171717; }
.ch-promo .liste .pilule-noire:hover { background: #FFC99F; }
.ch-promo .liste-second { display: grid; gap: 10px; margin-top: 14px; padding: 20px; background: #FFFFFF; color: var(--ch-encre); border-radius: 18px; }
.ch-promo .liste-second p { color: var(--ch-faible) !important; font-size: 14px; margin: 0 !important; }
.ch-promo .liste-second label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.ch-promo .liste-second input, .ch-promo .liste-second select { height: 44px; border-radius: 12px; border-color: #ECE8E1; flex: none; }
.ch-promo .liste-actions { display: flex; gap: 12px; align-items: center; }
.ch-promo .lien-calme { background: none; border: 0; font: inherit; font-size: 14px; color: var(--ch-faible); text-decoration: underline; cursor: pointer; }
.ch-promo .liste-merci { margin-top: 14px; padding: 18px; border-radius: 16px; background: #E6F4EC; color: #177247; font-weight: 600; }
.ch-promo .liste-merci small { display: block; font-weight: 400; color: var(--ch-encre); margin-top: 4px; }
.ch-promo .liste-alerte { margin-top: 12px; padding: 12px 14px; border: 1px solid #FFA691; border-radius: 12px; color: #FFC99F; font-size: 14px; }
.ch-promo .liste [hidden] { display: none !important; }
.ch-promo .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) { .ch-promo .liste-ligne { flex-direction: column; } .ch-promo .liste-ligne input:not(.sr) { flex: none; } .ch-promo .liste .pilule-noire { justify-content: center; } }
.ch-promo-plus li { line-height: 1.2; align-content: start; } .ch-promo-plus b { font-size: 18px; line-height: 1.15; }
/* Carte noire en haut des articles (16/10) */
.ch-promo-haut { margin: 0 0 36px; }
.ch-promo-haut-wrap { max-width: var(--width-etroit, 720px); margin: 28px auto 0; padding: 0 var(--espace-gouttiere, 18px); }
.ch-promo-haut { margin: 40px 0 44px; }