/* ==========================================================================
   LA VITRINE, STYLE B — « le produit en vitrine » (retenu par Jocelin le
   14 octobre 2026). Charte : docs/vitrine/CHARTE.md. AUCUNE valeur de
   couleur, de rayon ou de durée ici : tout vient de jetons.css, chargé avant.
   Les pages passent à ce style une à une (gabarit vitrine/base_b.html) ;
   les autres gardent vitrine.css jusqu'à leur tour.
   ========================================================================== */
@font-face { font-family: Poppins; src: url(/static/fonts/poppins-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Poppins; src: url(/static/fonts/poppins-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/1.6 var(--pixiel-police-lecture); background: var(--pixiel-nuit-profonde); color: var(--pixiel-encre); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.02em; line-height: 1.12; margin: 0; text-wrap: balance; }
:focus-visible { outline: 3px solid var(--pixiel-sur-sombre); outline-offset: 3px; border-radius: 4px; }
.cadre { width: min(var(--pixiel-vitrine-largeur), 100% - 2 * max(16px, env(safe-area-inset-left, 0px))); margin-inline: auto; }
.evitement { position: absolute; left: 16px; top: -60px; background: var(--pixiel-action); color: var(--pixiel-surface); padding: 10px 16px; border-radius: 999px; z-index: 30; }
.evitement:focus { top: 12px; }
html, body { overflow-x: clip; }

/* ── Les bandes : une idée par bande, jamais deux du même ton côte à côte ── */
.bande { padding-block: clamp(64px, 9vw, 112px); }
.bande-claire { background: var(--pixiel-fond); color: var(--pixiel-encre); }
.bande-blanche { background: var(--pixiel-surface); color: var(--pixiel-encre); }
.bande-sombre { background: var(--pixiel-nuit-profonde); color: var(--pixiel-encre-sombre); --pixiel-encre-2: var(--pixiel-encre-sombre-2); }
.sur { display: inline-block; font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--pixiel-action); }
.bande-sombre .sur, .heros .sur { color: var(--pixiel-sur-sombre); }
.h2 { font-size: var(--pixiel-vitrine-titre-2); margin: 10px 0 14px; }
.h2 em, .heros h1 em { font-style: normal; color: var(--pixiel-action); }
.bande-sombre .h2 em, .heros h1 em { color: var(--pixiel-lien-sombre); }
.texte { color: var(--pixiel-encre-2); font-size: 17px; margin: 0 0 24px; max-width: 54ch; }
.tete { max-width: 760px; margin-bottom: 44px; }

/* ── Les boutons : UNE action principale par écran ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: var(--pixiel-rayon-petit); font: 600 16px var(--pixiel-police-lecture); text-decoration: none; white-space: nowrap; transition: transform var(--pixiel-duree) var(--pixiel-courbe), background-color var(--pixiel-duree); }
.btn:hover { transform: translateY(-1px); }
.btn-action { background: var(--pixiel-action); color: var(--pixiel-sur-action); }
.btn-action:hover { background: var(--pixiel-action-forte); }
.btn-second { background: var(--pixiel-surface); color: var(--pixiel-encre); box-shadow: inset 0 0 0 1.5px var(--pixiel-bordure-forte); }
.bande-sombre .btn-second, .heros .btn-second, .final .btn-second, .tiroir .btn-second { background: transparent; color: var(--pixiel-surface); box-shadow: inset 0 0 0 1.5px var(--pixiel-contour-sombre); }
.btn-blanc { background: var(--pixiel-surface); color: var(--pixiel-encre); }
.btn.petit { min-height: 40px; padding: 0 16px; font-size: 15px; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
/* L'appel sous un groupe de cartes (carte des appels de Vitrine contenu, 18 octobre 2026) : centré, à distance du groupe. */
.ctas-suite, .actions-suite { justify-content: center; margin-top: 32px; }
.duo-texte .ctas { margin-top: 4px; }

/* ── L'en-tête ── */
.entete { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; padding: 12px max(16px, (100% - var(--pixiel-vitrine-largeur)) / 2); background: var(--pixiel-voile-entete); backdrop-filter: blur(12px); color: var(--pixiel-surface); box-shadow: 0 1px 0 var(--pixiel-filet-sombre); }
.marque { display: inline-flex; flex: none; } .marque img { height: 28px; width: auto; } .marque .visuel-clair { display: none; }
.navigation { display: flex; align-items: center; gap: 20px; flex: 1; font-size: 15px; }
.navigation ul { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.navigation ul a { text-decoration: none; color: var(--pixiel-encre-sombre-2); } .navigation ul a[aria-current] { color: var(--pixiel-lien-sombre); }
.entete-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.entete-actions .lien { font-weight: 600; text-decoration: none; color: var(--pixiel-surface); white-space: nowrap; }
@media (max-width: 1240px) { .entete-actions .lien { display: none; } }
/* Le menu du téléphone (Jocelin, 17 octobre 2026) : un burger à trois traits qui devient une croix, et le tiroir de la maquette de la refonte — sous l'en-tête, plein écran, les entrées du bureau dans le même ordre, l'essai en bas. Sans script (<details>). */
.menu-mobile { display: none; margin-left: auto; }
.menu-mobile > summary { list-style: none; cursor: pointer; width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--pixiel-rayon-petit); margin-right: -8px; }
.menu-mobile > summary::-webkit-details-marker { display: none; }
.menu-mobile > summary:focus-visible { outline: 2px solid var(--pixiel-lien-sombre); outline-offset: 2px; }
.burger { position: relative; width: 24px; height: 18px; display: block; }
.burger i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--pixiel-surface); }
.burger i:nth-child(1) { top: 0; } .burger i:nth-child(2) { top: 8px; } .burger i:nth-child(3) { top: 16px; }
.menu-mobile[open] .burger i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-mobile[open] .burger i:nth-child(2) { opacity: 0; }
.menu-mobile[open] .burger i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (prefers-reduced-motion: no-preference) { .burger i { transition: transform .22s var(--pixiel-courbe), opacity .15s linear; } }
.tiroir { position: absolute; left: 0; right: 0; top: 100%; height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 24px; padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); background: var(--pixiel-nuit-profonde); box-shadow: 0 1px 0 var(--pixiel-filet-sombre) inset; }
.tiroir-liste { list-style: none; margin: 0; padding: 0; }
.tiroir-liste > li { border-bottom: 1px solid var(--pixiel-filet-sombre); }
.tiroir-liste > li > a, .tiroir-sous > summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; font: 600 20px/1.2 var(--pixiel-police-titre, inherit); color: var(--pixiel-surface); text-decoration: none; list-style: none; cursor: pointer; }
.tiroir-sous > summary::-webkit-details-marker { display: none; }
.tiroir-sous > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); margin-right: 4px; }
.tiroir-sous[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.tiroir-sous ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.tiroir-sous ul a { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 8px 14px; border-radius: var(--pixiel-rayon); background: var(--pixiel-surface-sombre); color: var(--pixiel-surface); text-decoration: none; font-weight: 600; }
.tiroir a[aria-current="page"] { color: var(--pixiel-lien-sombre); }
.tiroir-appels { margin-top: auto; display: grid; gap: 10px; }
.tiroir-appels .btn { display: flex; justify-content: center; min-height: 52px; }
html:has(.menu-mobile[open]) { overflow: hidden; }
html:has(.menu-mobile[open]) .collant { display: none; }
/* Menu ouvert, l'en-tête monte en haut de l'écran : les bandeaux du dessus (brouillon, pays) s'effacent le temps du menu, et le tiroir tient pile dans la hauteur. */
html:has(.menu-mobile[open]) :is(.bandeau-brouillon, .bandeau-suggestion) { display: none; }

/* ── Le héros : sombre, le halo du logo, la chaîne entière ── */
.heros { position: relative; overflow: hidden; padding-block: 72px 64px; background: var(--pixiel-nuit-profonde); color: var(--pixiel-surface); text-align: center; }
.heros::before { content: ""; position: absolute; left: 50%; top: 40px; width: 900px; height: 700px; transform: translateX(-50%); background: var(--pixiel-halo); pointer-events: none; }
.heros > .cadre { position: relative; }
.heros h1 { font-size: var(--pixiel-vitrine-titre-1); margin: 10px auto 0; max-width: 20ch; }
.heros .sous { font-size: 19px; margin: 20px auto 28px; max-width: 62ch; color: var(--pixiel-encre-sombre-2); }
.heros .ctas { justify-content: center; }
.heros .liberte-tot { margin: 18px auto 0; max-width: 60ch; font-size: 15px; color: var(--pixiel-encre-sombre-2); }
.heros .liberte-tot a { color: var(--pixiel-lien-sombre); font-weight: 600; }

/* ── Le voyage d'une photo : la chaîne dessinée et ses étapes ── */
.etapes { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 14px; text-align: left; }
.etapes li { display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: var(--pixiel-rayon-grand); background: var(--pixiel-surface-sombre); box-shadow: 0 0 0 1px var(--pixiel-filet-sombre); color: var(--pixiel-encre-sombre); }
.etapes .num { font: 600 12px ui-monospace, Menlo, monospace; color: var(--pixiel-sur-sombre); }
.etapes h3 { font-size: 17px; } .etapes p { margin: 0; font-size: 13px; color: var(--pixiel-encre-sombre-2); line-height: 1.45; }
.voyage-sans { margin: 22px 0 0; font-weight: 600; color: inherit; }

/* ── Un effet : le texte et sa scène, côte à côte ── */
.duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.duo.inverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .duo.inverse .duo-texte { order: 2; }
.effet-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.effet-n { font-size: 44px; font-weight: 600; line-height: 1; color: var(--pixiel-action); }
.bande-sombre .effet-n { color: var(--pixiel-lien-sombre); }
.effet .h2 { font-size: min(var(--pixiel-vitrine-titre-2), 44px); }
.scene { position: relative; }
.scene img { width: 100%; border-radius: var(--pixiel-rayon); box-shadow: var(--pixiel-elevation-3); background: var(--pixiel-surface); }
.scene-portrait { justify-self: center; } .scene-portrait img { display: block; max-width: 340px; margin-inline: auto; }
.bande-sombre .scene::before { content: ""; position: absolute; inset: -10% -5%; background: var(--pixiel-halo-doux); }
.bande-sombre .scene img { position: relative; box-shadow: var(--pixiel-ombre-sombre); }
@media (min-width: 761px) {
  .scene img { transform: perspective(1400px) rotateY(-7deg) rotateX(2deg); }
  .duo.inverse .scene img { transform: perspective(1400px) rotateY(7deg) rotateX(2deg); }
}
.retouche-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.retouche-scene .scene img { transform: none; }

/* ── L'avant / après : deux couches, la première découpée par le curseur ── */
.avant-apres { position: relative; width: 100%; max-width: 340px; justify-self: center; aspect-ratio: 4 / 5; border-radius: var(--pixiel-rayon-scene); overflow: hidden; background: var(--pixiel-fond); box-shadow: var(--pixiel-elevation-3); touch-action: pan-y; }
.aa-image { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; margin: 0; }
.aa-apres { background: linear-gradient(180deg, var(--pixiel-marque-douce), var(--pixiel-encre-sombre-2)); }
.aa-apres img { height: 100%; width: auto; max-width: none; filter: saturate(1.15) contrast(1.06) brightness(1.04); }
.aa-avant { background: var(--pixiel-encre-2); clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.aa-avant img { height: 92%; width: auto; max-width: none; transform: translate(-14%, 9%) rotate(5deg); filter: brightness(.72) contrast(.78) saturate(.5) sepia(.35) hue-rotate(40deg); }
.aa-etiquette { position: absolute; top: 14px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--pixiel-nuit-profonde); color: var(--pixiel-surface); }
.aa-e-avant { left: 14px; } .aa-e-apres { right: 14px; background: var(--pixiel-action); }
.aa-poignee { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; margin-left: -1.5px; background: var(--pixiel-surface); pointer-events: none; }
.aa-poignee i { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--pixiel-surface); box-shadow: var(--pixiel-elevation-3); }
.aa-curseur { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.avant-apres:focus-within .aa-poignee i { outline: 3px solid var(--pixiel-sur-sombre); outline-offset: 3px; }

/* ── Les cartes ── */
.trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.quatre-souple { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.carte { background: var(--pixiel-surface); border-radius: var(--pixiel-rayon-grand); padding: 26px; box-shadow: var(--pixiel-relief-carte); display: grid; gap: 10px; align-content: start; text-decoration: none; }
.carte h3, .carte h2 { font-size: 21px; } .carte p { margin: 0; color: var(--pixiel-encre-2); }
.bande-sombre .carte { background: var(--pixiel-surface-sombre); color: var(--pixiel-encre-sombre); box-shadow: 0 0 0 1px var(--pixiel-filet-sombre); }
.points { margin: 0 0 22px; padding-left: 20px; display: grid; gap: 6px; color: var(--pixiel-encre-2); }

/* ── L'appel final ── */
.final { text-align: center; color: var(--pixiel-surface); background-color: var(--pixiel-action); background-image: var(--pixiel-degrade); border-radius: var(--pixiel-rayon-scene); padding: clamp(48px, 7vw, 96px) 24px; }
.final h2 { font-size: clamp(32px, 4.6vw, 56px); max-width: 17ch; margin: 0 auto 28px; }
.final h2 em { font-style: normal; }
.final .ctas { justify-content: center; }

/* ── Le pied ── */
.pied { background: var(--pixiel-nuit-profonde); color: var(--pixiel-encre-sombre-2); padding: 56px max(16px, (100% - var(--pixiel-vitrine-largeur)) / 2) 32px; box-shadow: 0 -1px 0 var(--pixiel-filet-sombre); font-size: 14px; }
.pied ul { list-style: none; margin: 18px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pied a { text-decoration: none; } .pied a:hover { color: var(--pixiel-surface); }
/* Le sélecteur de langue (22 octobre 2026) : des pastilles de 44 px, la langue courante pleine ; le Canada à part. */
.pays { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.pays-globe { flex: none; color: var(--pixiel-encre-sombre-2); }
.pied .pays ul { margin: 0; gap: 6px; align-items: center; }
.pays a { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--pixiel-contour-sombre); color: var(--pixiel-encre-sombre); font-weight: 600; font-size: 13px; letter-spacing: .06em; }
.pays a:hover { box-shadow: inset 0 0 0 1px var(--pixiel-lien-sombre); }
.pays a:focus-visible { outline: 2px solid var(--pixiel-lien-sombre); outline-offset: 2px; }
.pays a[aria-current] { background: var(--pixiel-encre-sombre); color: var(--pixiel-nuit-profonde); box-shadow: none; }
.pays-region { margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--pixiel-filet-sombre); }
.pays-region a { letter-spacing: 0; }

/* ── Les bandeaux de la session contenu ── */
.bandeau-brouillon { background: var(--pixiel-accent); color: var(--pixiel-surface); text-align: center; padding: 8px 16px; font: 600 12px ui-monospace, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; }
.bandeau-suggestion[hidden] { display: none; }
.bandeau-suggestion { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; padding: 10px 16px; background: var(--pixiel-surface-sombre); color: var(--pixiel-encre-sombre); font-size: 15px; }
.bandeau-suggestion a { color: var(--pixiel-lien-sombre); font-weight: 600; }
.bandeau-suggestion button { min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--pixiel-contour-sombre); color: var(--pixiel-surface); font: 600 14px var(--pixiel-police-lecture); cursor: pointer; }

/* ── L'appel collant du téléphone ── */
.collant { display: none; }

/* ── Les pictos : un survol court ; la boucle de chargement (.charge) ── */
.picto { display: inline-flex; } .picto svg { display: block; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .picto svg { transition: transform var(--pixiel-duree) var(--pixiel-courbe); }
  a:hover > .picto svg, .carte:hover .picto svg, .picto:hover svg { transform: translateY(-3px) scale(1.06); }
  .picto [class^="m-"], .picto [class*=" m-"] { transform-box: fill-box; transform-origin: center; }
  .charge .m-flash, .charge .m-voyant { animation: p-flash 1.4s ease-in-out infinite; }
  .charge .m-coche { animation: p-coche 1.6s ease-in-out infinite; }
  .charge .m-curseur { animation: p-glisse 1.8s ease-in-out infinite alternate; } .charge .m-curseur2 { animation-delay: .3s; } .charge .m-curseur3 { animation-delay: .6s; }
  .charge .m-t1, .charge .m-t2, .charge .m-t3, .charge .m-t4 { animation: p-hop 1.5s ease-in-out infinite; } .charge .m-t2 { animation-delay: .2s; } .charge .m-t3 { animation-delay: .4s; } .charge .m-t4 { animation-delay: .6s; }
  .charge .m-drapeau { transform-origin: left center; animation: p-flotte 1.6s ease-in-out infinite alternate; }
  .charge .m-tourne { animation: p-tourne 1.6s linear infinite; }
  .charge .m-chiffres { animation: p-clignote 1.6s ease-in-out infinite; }
  .charge .m-faisceau { animation: p-lit 1.8s linear infinite; }
  .charge .m-case { opacity: .25; animation: p-case 1.8s linear infinite; } .charge .m-case1 { animation-delay: .45s; } .charge .m-case2 { animation-delay: .9s; } .charge .m-case3 { animation-delay: 1.35s; }
  .charge .m-photo { animation: p-glisse-bas 1.8s ease-in-out infinite; }
  .charge .m-cadenas { animation: p-respire 1.8s ease-in-out infinite; }
  .charge .m-e3 { animation: p-scintille 1.4s ease-in-out infinite; }
  @keyframes p-flash { 50% { opacity: .15; } }
  @keyframes p-respire { 50% { transform: scale(.92); } }
  @keyframes p-coche { 0%, 30% { transform: scale(.4); opacity: 0; } 60%, 100% { transform: scale(1); opacity: 1; } }
  @keyframes p-glisse { from { transform: translateX(-6px); } to { transform: translateX(6px); } }
  @keyframes p-hop { 50% { transform: translateY(-3px); } }
  @keyframes p-flotte { to { transform: scaleX(.82) skewY(5deg); } }
  @keyframes p-tourne { to { transform: rotate(360deg); } }
  @keyframes p-clignote { 50% { opacity: .2; } }
  @keyframes p-lit { from { transform: translateY(0); } to { transform: translateY(40px); } }
  @keyframes p-case { 0%, 20% { opacity: .25; } 30%, 100% { opacity: 1; } }
  @keyframes p-glisse-bas { 0%, 20% { transform: translateY(-6px); } 80%, 100% { transform: translateY(12px); } }
  @keyframes p-scintille { 50% { transform: scale(.5); opacity: .4; } }
}

/* ── Les tailles ── */
@media (max-width: 1000px) { .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1060px) { .navigation { display: none; } .menu-mobile { display: block; } }
@media (max-width: 760px) {
  .duo, .duo.inverse, .trois, .retouche-scene { grid-template-columns: minmax(0, 1fr); } .duo.inverse .duo-texte { order: 0; }
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entete-actions .btn { display: none; }
  .collant { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 20; }
  .collant { bottom: calc(12px + env(safe-area-inset-bottom)); }
  .collant .btn { flex: 1; box-shadow: var(--pixiel-ombre-sombre); }
  /* La barre collante ne masque jamais un lien ni un bouton (Jocelin, 17 octobre 2026) : la page réserve sa hauteur en bas, et la barre n'arrive qu'une fois le héros passé — tant que ses boutons sont à l'écran, elle n'a rien à ajouter. Défilement lié en CSS ; là où le navigateur ne le connaît pas, elle reste visible et le bas réservé suffit. */
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  @supports (animation-timeline: scroll()) {
    .collant { animation: collant-arrive linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
    @keyframes collant-arrive { 0%, 70% { opacity: 0; visibility: hidden; transform: translateY(24px); } 100% { opacity: 1; visibility: visible; transform: none; } }
  }
}
.reserve { font-size: 13px; color: var(--pixiel-encre-2); border-left: 3px solid var(--pixiel-attention); padding-left: 10px; }

/* ── Les formules (prix et noms : apps/abonnements/formules.py) ── */
.formules { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
/* Sous les offres (Jocelin, 17 octobre 2026) : la note des prix rattachée aux cartes, puis deux blocs égaux — le laboratoire, l'essai —, côte à côte au bureau, empilés au téléphone ; un bouton chacun. */
.note-ht { margin: 14px 0 0; font-size: 14px; color: var(--pixiel-encre-2); }
.offres-suite { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.offre-suite { display: grid; align-content: start; justify-items: start; gap: 12px; padding: 30px; border-radius: var(--pixiel-rayon-grand); background: var(--pixiel-surface); box-shadow: var(--pixiel-relief-carte); }
.offre-suite h3 { margin: 4px 0 0; font-size: 22px; } .offre-suite h3 em { font-style: normal; color: var(--pixiel-action); }
.offre-suite p { margin: 0; color: var(--pixiel-encre-2); }
.offre-suite .btn { margin-top: 8px; }
.offre-suite .limite { font-size: 13px; }
.essai-appel { box-shadow: inset 0 0 0 1.5px var(--pixiel-action), var(--pixiel-relief-carte); }
.offres-suite + .lien-suite, .formules ~ .lien-suite { margin-top: 28px; }
.formule { background: var(--pixiel-surface); border-radius: var(--pixiel-rayon-grand); padding: 26px; box-shadow: var(--pixiel-relief-carte); display: grid; gap: 8px; align-content: start; }
.formule .mono { font: 600 13px var(--pixiel-police-lecture); letter-spacing: .06em; text-transform: uppercase; color: var(--pixiel-action); }
.formule .prix { font-size: 30px; font-weight: 600; color: var(--pixiel-encre); }
.formule small { color: var(--pixiel-encre-2); font-size: 13px; } .formule p { margin: 0; color: var(--pixiel-encre-2); }
.formule ul { margin: 6px 0 0; padding-left: 18px; color: var(--pixiel-encre-2); font-size: 14px; }
.formule.mise-en-avant { box-shadow: 0 0 0 2px var(--pixiel-action), var(--pixiel-relief-carte); }
.lien-suite { display: inline-block; margin-top: 24px; font-weight: 600; color: var(--pixiel-action); text-decoration: none; }
.bande-sombre .lien-suite { color: var(--pixiel-lien-sombre); }


/* ==========================================================================
   LES PAGES AU VOCABULAIRE COMMUN (pages/*.html, fonctions/*.html) : le même
   balisage qu'avant, habillé en B. Chaque <section class="cadre … section">
   devient une BANDE pleine largeur (fond étendu par une ombre, découpé à
   l'écran), claires et sombres en alternance ; le héros est sombre.
   ========================================================================== */
.heros-fonction, main > section.section, main > section.final { position: relative; padding-block: clamp(56px, 8vw, 96px); }
.heros-fonction { background: var(--pixiel-nuit-profonde); box-shadow: 0 0 0 100vmax var(--pixiel-nuit-profonde); clip-path: inset(0 -100vmax); color: var(--pixiel-surface); text-align: left; --pixiel-encre-2: var(--pixiel-encre-sombre-2); }
.heros-fonction::before { content: ""; position: absolute; right: -10%; top: 0; width: 70%; height: 100%; background: var(--pixiel-halo-doux); pointer-events: none; }
main > section.section { background: var(--pixiel-fond); box-shadow: 0 0 0 100vmax var(--pixiel-fond); clip-path: inset(0 -100vmax); color: var(--pixiel-encre); }
main > section.section:nth-of-type(odd) { background: var(--pixiel-nuit-profonde); box-shadow: 0 0 0 100vmax var(--pixiel-nuit-profonde); color: var(--pixiel-encre-sombre); --pixiel-encre-2: var(--pixiel-encre-sombre-2); }
main > section.final { background: var(--pixiel-nuit-profonde); box-shadow: 0 0 0 100vmax var(--pixiel-nuit-profonde); clip-path: inset(0 -100vmax); }

/* La grille d'une section : douze colonnes ; ce qui va à gauche, à droite, en large. */
.grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 20px; align-items: start; }
.grille > * { grid-column: 1 / -1; min-width: 0; }
.grille > .gauche { grid-column: 1 / span 5; } .grille > .droite { grid-column: 7 / -1; }
.heros-fonction > h1, .heros-fonction > .introduction, .heros-fonction > .fil, .heros-fonction > .fig { grid-column: 1 / span 6; position: relative; }
.heros-fonction > .demonstration { grid-column: 7 / -1; grid-row: 1 / span 4; align-self: center; position: relative; }
.heros-fonction h1 { font-size: var(--pixiel-vitrine-titre-1); }
.heros-fonction h1 em { font-style: normal; color: var(--pixiel-lien-sombre); }

/* Les mots */
.fig, .fil { font: 600 13px var(--pixiel-police-lecture); letter-spacing: .06em; text-transform: uppercase; color: var(--pixiel-action); }
.heros-fonction .fig, .heros-fonction .fil, main > section.section:nth-of-type(odd) .fig { color: var(--pixiel-sur-sombre); }
.fil a { color: inherit; text-decoration: none; } .fil span { margin-left: 8px; }
.grille > h2, h2.large, p.large, .grille > .gauche h2 { font-size: var(--pixiel-vitrine-titre-2); }
h2.large, .grille > h2 { margin: 0; }
.grille h2 em, .grille h3 em { font-style: normal; color: var(--pixiel-action); }
main > section.section:nth-of-type(odd) h2 em { color: var(--pixiel-lien-sombre); }
.chapeau { font-size: 19px; color: var(--pixiel-encre-2); margin: 0; max-width: 58ch; }
.limite, .legende { font-size: 13px; color: var(--pixiel-encre-2); margin: 10px 0 0; }
.legende { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-family: var(--pixiel-police-lecture); text-transform: none; letter-spacing: 0; }
.texte-haut { margin-top: 0; }
.lien-fleche { display: inline-block; margin-top: 14px; font-weight: 600; color: var(--pixiel-action); text-decoration: none; }
.lien-fleche::after { content: " →"; }
main > section.section:nth-of-type(odd) .lien-fleche, .heros-fonction .lien-fleche { color: var(--pixiel-lien-sombre); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Les boutons d'avant, au dessin de B */
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: var(--pixiel-rayon-petit); font: 600 16px var(--pixiel-police-lecture); text-decoration: none; white-space: nowrap; transition: transform var(--pixiel-duree) var(--pixiel-courbe), background-color var(--pixiel-duree); }
.bouton:hover { transform: translateY(-1px); }
.bouton-plein { background: var(--pixiel-action); color: var(--pixiel-sur-action); } .bouton-plein:hover { background: var(--pixiel-action-forte); }
.bouton-trait { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px var(--pixiel-bordure-forte); }
.heros-fonction .bouton-trait, main > section.section:nth-of-type(odd) .bouton-trait, .final .bouton-trait { box-shadow: inset 0 0 0 1.5px var(--pixiel-contour-sombre); color: var(--pixiel-surface); }

/* Les visuels : une feuille blanche qui flotte, toujours à l'encre du clair
   (même posée dans une bande sombre). --encre-2-clair garde la valeur de :root. */
:root { --encre-2-clair: var(--pixiel-encre-2); }
.feuille { --pixiel-encre-2: var(--encre-2-clair); color: var(--pixiel-encre); }
.deux-etats { display: grid; gap: 22px; } .deux-etats figure { margin: 0; } .deux-etats figcaption { margin-top: 8px; font-weight: 600; color: var(--pixiel-encre-2); }
.feuille { background: var(--pixiel-surface); border-radius: var(--pixiel-rayon); padding: 14px; box-shadow: var(--pixiel-relief-carte); }
.feuille img { width: 100%; }
.heros-fonction .feuille, main > section.section:nth-of-type(odd) .feuille { box-shadow: var(--pixiel-ombre-sombre); }
.demonstration { margin: 0; } .demonstration > .feuille + .feuille { margin-top: 14px; }
.deux-colonnes-demo { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; align-items: center; }

/* Les étapes, les engagements, les preuves : des cartes */
.grille .etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.grille .etapes li { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: var(--pixiel-rayon-grand); background: var(--pixiel-surface); box-shadow: var(--pixiel-relief-carte); color: var(--pixiel-encre); }
.grille .etapes li p { margin: 0; color: var(--pixiel-encre-2); }
main > section.section:nth-of-type(odd) .etapes li { background: var(--pixiel-surface-sombre); box-shadow: 0 0 0 1px var(--pixiel-filet-sombre); color: var(--pixiel-encre-sombre); }
.grille .etapes .feuille { padding: 8px; box-shadow: 0 0 0 1px var(--pixiel-bordure); }
.etapes-quatre { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.objets-dessins { display: flex; gap: 6px; align-items: center; }
.objets-dessins svg { flex: 1 1 0; min-width: 0; width: 100%; height: auto; }
.engagements { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.engagements > div { padding: 24px; border-radius: var(--pixiel-rayon-grand); background: var(--pixiel-surface); box-shadow: var(--pixiel-relief-carte); color: var(--pixiel-encre); }
.engagements > div p { margin: 8px 0 0; color: var(--pixiel-encre-2); }
main > section.section:nth-of-type(odd) .engagements > div { background: var(--pixiel-surface-sombre); box-shadow: 0 0 0 1px var(--pixiel-filet-sombre); color: var(--pixiel-encre-sombre); }
.preuves { display: flex; flex-wrap: wrap; gap: 20px 40px; margin: 0; }
.preuves > div { display: grid; gap: 4px; flex: 1 1 200px; max-width: 300px; align-content: start; } .preuves dt { font-size: 40px; font-weight: 600; color: var(--pixiel-action); line-height: 1.1; } .preuves dd { margin: 0; color: var(--pixiel-encre-2); }
/* Les badges de confiance (Jocelin, 17 octobre 2026) : un emblème dessiné dans une pastille, le titre en gras, une phrase. Ils remplacent les blocs « mesuré » et ouvrent les engagements de l'accueil. */
.garanties { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px 28px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); --badge-fond: var(--pixiel-surface); --badge-trait: var(--pixiel-action); --drapeau-bleu: #2B4AA8; --drapeau-blanc: #FFFFFF; --drapeau-lisere: #C9D2E3; --drapeau-rouge: #D8333F; }
.garanties li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; color: var(--pixiel-encre-2); }
.garanties strong { display: block; color: var(--pixiel-encre); font-weight: 600; font-size: 18px; margin-bottom: 2px; }
.badge-embleme { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--pixiel-fond); box-shadow: inset 0 0 0 1px rgb(78 98 184 / .18), var(--pixiel-relief-carte); }
.garanties-accueil { margin-bottom: 36px; padding: 26px 28px; border-radius: var(--pixiel-rayon-grand); background: var(--pixiel-surface); box-shadow: var(--pixiel-relief-carte); }
.garanties-accueil .badge-embleme { background: var(--pixiel-fond); }
main > section.section:nth-of-type(odd) .garanties { --badge-fond: rgb(255 255 255 / .06); --badge-trait: var(--pixiel-sur-sombre); }
main > section.section:nth-of-type(odd) .garanties strong { color: var(--pixiel-surface); }
main > section.section:nth-of-type(odd) .badge-embleme { background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
main > section.section:nth-of-type(odd) .preuves dt { color: var(--pixiel-lien-sombre); }
.encart-bientot { padding: 16px 20px; border-radius: var(--pixiel-rayon); background: var(--pixiel-attention-douce); color: var(--pixiel-attention); font-weight: 600; }
.questions details { background: var(--pixiel-surface); color: var(--pixiel-encre); border-radius: var(--pixiel-rayon); box-shadow: var(--pixiel-relief-carte); padding: 18px 22px; margin-bottom: 12px; }
.questions summary { cursor: pointer; font-weight: 600; } .questions details p { color: var(--pixiel-encre-2); margin: 10px 0 0; }

/* L'appel final des pages : la carte au dégradé du logo */
main > section.final { display: grid; justify-items: center; text-align: center; gap: 18px; color: var(--pixiel-surface); }
main > section.final::before { content: ""; position: absolute; inset: clamp(24px, 4vw, 48px) 0; border-radius: var(--pixiel-rayon-scene); background-color: var(--pixiel-action); background-image: var(--pixiel-degrade); }
main > section.final > * { position: relative; grid-column: 1 / -1; }
main > section.final h2 { font-size: clamp(30px, 4.4vw, 52px); max-width: 18ch; }
main > section.final .chapeau { color: var(--pixiel-surface); }
main > section.final .bouton-plein { background: var(--pixiel-surface); color: var(--pixiel-encre); }

@media (max-width: 860px) {
  .grille > .gauche, .grille > .droite, .heros-fonction > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .etapes-quatre { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 520px) { .etapes-quatre, .deux-colonnes-demo { grid-template-columns: minmax(0, 1fr) !important; } }

/* L'index des fonctions : un sommaire en cartes */
.sommaire { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.sommaire li { display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: var(--pixiel-rayon-grand); background: var(--pixiel-surface); box-shadow: var(--pixiel-relief-carte); color: var(--pixiel-encre); --pixiel-encre-2: var(--encre-2-clair); }
.sommaire a { text-decoration: none; color: inherit; display: grid; gap: 12px; }
.sommaire h2 { font-size: 19px; } .sommaire p { margin: 0; color: var(--pixiel-encre-2); font-size: 15px; }
.sommaire .feuille { padding: 8px; box-shadow: 0 0 0 1px var(--pixiel-bordure); }
.sommaire li:hover .feuille { box-shadow: 0 0 0 2px var(--pixiel-action); }

/* Les pages à blocs : la preuve toujours visible ; un bloc sans dessin prend toute la largeur ;
   les blocs dessinés alternent le côté du dessin. */
.preuve-b { font-size: 14px; padding: 12px 14px; border-radius: var(--pixiel-rayon); border-left: 3px solid var(--pixiel-action); background: var(--pixiel-marque-douce); color: var(--pixiel-encre); margin: 8px 0 0; max-width: 60ch; }
main > section.section:nth-of-type(odd) .preuve-b { background: var(--pixiel-surface-sombre-haute); color: var(--pixiel-encre-sombre); }
main > section.section:not(.bloc-dessine) > .gauche { grid-column: 1 / span 8; }
main > section.bloc-dessine:nth-of-type(even) > .gauche { grid-column: 8 / -1; grid-row: 1; } main > section.bloc-dessine:nth-of-type(even) > .droite { grid-column: 1 / span 6; grid-row: 1; }
main > section.section > .gauche, main > section.section > .droite { align-self: center; }
.heros-fonction .fig { display: flex; align-items: center; gap: 12px; }

/* « Comment ça marche » : le schéma en blocs, la chaîne le long d'une ligne au dégradé du logo. */
.schema { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; justify-content: center; gap: 12px; flex-wrap: wrap; }
.schema li:not(.fleche) { flex: 1 1 200px; max-width: 260px; display: grid; justify-items: center; align-content: start; gap: 10px; text-align: center; padding: 26px 18px; border-radius: var(--pixiel-rayon-grand); background: var(--pixiel-surface); box-shadow: var(--pixiel-relief-carte); }
.schema h3 { font-size: 18px; } .schema p { margin: 0; color: var(--pixiel-encre-2); font-size: 14px; }
.schema .fleche { align-self: center; width: 22px; height: 2px; background: var(--pixiel-action); position: relative; }
.schema .fleche::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left-color: var(--pixiel-action); }
.etapes-longues { list-style: none; margin: 0; padding: 0; position: relative; }
.etapes-longues::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background-color: var(--pixiel-action); background-image: var(--pixiel-degrade); opacity: .55; }
.etape { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding-block: clamp(36px, 5vw, 72px); }
.etape.inverse .etape-texte { order: 2; }
.etape::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--pixiel-action); box-shadow: 0 0 0 6px var(--pixiel-nuit-profonde), 0 0 0 8px var(--pixiel-action); }
.etape-n { display: block; font-size: 64px; font-weight: 600; line-height: 1; color: var(--pixiel-lien-sombre); margin-bottom: 8px; }
.etape-texte .picto { margin-bottom: 4px; }
.etape .scene img { transform: none; }
.questions-b details { color: var(--pixiel-encre); background: var(--pixiel-surface); border-radius: var(--pixiel-rayon); box-shadow: var(--pixiel-relief-carte); padding: 18px 22px; margin-bottom: 12px; max-width: 820px; }
.questions-b summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.questions-b summary::-webkit-details-marker { display: none; }
.questions-b summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--pixiel-duree) var(--pixiel-courbe), margin var(--pixiel-duree) var(--pixiel-courbe); }
.questions-b details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; } .questions-b details p { margin: 10px 0 0; color: var(--pixiel-encre-3); }
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
  /* Le TEXTE monte sans s'effacer : mesuré en cours d'entrée, un texte à 20 % d'opacité échoue au contraste (Lighthouse, referencement-volet0 § 1.9). */
  .etape-texte, .etape-visuel { animation: monte linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  .etape-texte { animation-name: monte-texte; }
  @keyframes monte { from { opacity: .2; transform: translateY(40px); } }
  @keyframes monte-texte { from { transform: translateY(40px); } }
} }
@media (max-width: 760px) {
  .etapes-longues::before, .etape::after { display: none; } .etape { grid-template-columns: minmax(0, 1fr); } .etape.inverse .etape-texte { order: 0; }
  .schema { flex-direction: column; align-items: center; } .schema li:not(.fleche) { max-width: none; width: 100%; } .schema .fleche { transform: rotate(90deg); }
  main > section.bloc-dessine > .gauche, main > section.bloc-dessine > .droite { grid-column: 1 / -1 !important; grid-row: auto !important; }
}
main > section.final h2 em, .final h2 em { color: var(--pixiel-surface); }

/* Le sous-menu « Le métier » (sans script : <details>) */
.sous-menu { position: relative; }
.sous-menu summary { list-style: none; cursor: pointer; color: var(--pixiel-encre-sombre-2); }
.sous-menu summary::-webkit-details-marker { display: none; }
.sous-menu summary::after { content: " ▾"; font-size: 12px; }
.sous-menu[open] summary { color: var(--pixiel-surface); }
.sous-menu ul { position: absolute; left: -12px; top: 34px; z-index: 30; display: grid !important; gap: 2px !important; min-width: 240px; padding: 10px; border-radius: var(--pixiel-rayon); background: var(--pixiel-surface-sombre); box-shadow: var(--pixiel-ombre-sombre); }
.sous-menu ul a { display: block; padding: 8px 10px; border-radius: var(--pixiel-rayon-petit); }
.sous-menu ul a:hover { background: var(--pixiel-surface-sombre-haute); color: var(--pixiel-surface); }
.filles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.filles .carte { height: 100%; color: var(--pixiel-encre); --pixiel-encre-2: var(--encre-2-clair); }
.filles .carte h3, .filles .carte h2 { font-size: 20px; } .filles .lien-suite { margin-top: 6px; }
main > section.section:nth-of-type(odd) .filles .carte { color: var(--pixiel-encre-sombre); --pixiel-encre-2: var(--pixiel-encre-sombre-2); }

/* Le tableau de « Comparer » : la colonne « nous » teintée, défilement horizontal au téléphone. */
.comparer-cadre { overflow-x: auto; border-radius: var(--pixiel-rayon-grand); background: var(--pixiel-surface); box-shadow: var(--pixiel-relief-carte); color: var(--pixiel-encre); --pixiel-encre-2: var(--encre-2-clair); }
.comparer { width: 100%; min-width: 560px; border-collapse: collapse; }
.comparer th, .comparer td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--pixiel-bordure); font-size: 15px; }
.comparer thead th { font-size: 13px; color: var(--pixiel-encre-2); } .comparer tbody th { font-weight: 600; width: 28%; }
.comparer td:last-child { background: var(--pixiel-marque-douce); }
/* L'article du blog : une colonne de lecture, sur une seule bande claire. */
main > section.section.lecture, main > section.section.lecture:nth-of-type(odd) { background: var(--pixiel-surface); box-shadow: 0 0 0 100vmax var(--pixiel-surface); color: var(--pixiel-encre); --pixiel-encre-2: var(--encre-2-clair); }
.lecture > * { grid-column: 3 / span 8; }
.lecture > h2 { font-size: 26px; margin-top: 28px; } .lecture > p { font-size: 18px; line-height: 1.7; color: var(--pixiel-encre-2); margin: 0; }
@media (max-width: 860px) { .lecture > * { grid-column: 1 / -1; } }
.articles .carte h3, .articles .carte h2 { font-size: 21px; }

/* ═══ LE MOUVEMENT DE LA VITRINE (Jocelin, 17 octobre 2026 : « il manque beaucoup
   d'animations ») — fluide et sobre, à la Stripe (annexe F), jamais gadget.
   Les règles :
   - rien sous prefers-reduced-motion ;
   - le texte est là SANS script et sans animation : on ne le fait jamais
     disparaître. Il MONTE (transform), il ne s'efface pas, puisque Lighthouse
     mesure le contraste en cours d'animation ;
   - seuls les dessins passent de transparents à visibles ;
   - jamais le titre du héros ni la chaîne (LCP), jamais une propriété qui
     déplace la mise en page (CLS) : transform et opacity seulement ;
   - aucun script : les apparitions suivent le défilement (animation-timeline:
     view()). Là où le navigateur ne le connaît pas, rien ne bouge et tout est
     visible. ═══ */

/* La chaîne de l'accueil (Jocelin, 20 octobre 2026 : « on dirait un diapo posé là ») : plus de carte blanche, la scène
   est posée sur la nuit du héros. Le mouvement vit dans le SVG (poste/scripts/vitrine/chaine-heros.mjs) ; la page sert
   sa scène fixe sous prefers-reduced-motion. Les bords s'effacent : aucun cadre dur. */
.voyage-b { position: relative; margin: 26px auto 0; max-width: 1180px; }
.voyage-b::before { content: ""; position: absolute; inset: 6% 8% 0; background: var(--pixiel-halo-doux); filter: blur(30px); pointer-events: none; }
.voyage-b img { position: relative; width: 100%; height: auto; display: block; -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); }
@media (max-width: 720px) { .voyage-b { margin-inline: -16px; } .voyage-b img { -webkit-mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent); mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent); } }
@media (prefers-reduced-motion: no-preference) {

  /* Le halo du héros respire, très lentement. */
  .heros::before, .heros-fonction::before { animation: halo 18s ease-in-out infinite alternate; }
  @keyframes halo { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-46%) scale(1.08) rotate(4deg); } }
  .heros-fonction::before { animation-name: halo-cote; }
  @keyframes halo-cote { from { transform: none; } to { transform: translate(-4%, 3%) scale(1.08); } }

  /* Les survols : une carte se soulève, un bouton aussi, une flèche avance. */
  .carte, .formule, .sommaire li a .feuille, .filles .carte, .articles .carte, .change .carte { transition: transform var(--pixiel-duree) var(--pixiel-courbe), box-shadow var(--pixiel-duree) var(--pixiel-courbe); }
  a.carte:hover, .formule:hover, .sommaire li a:hover .feuille { transform: translateY(-4px); box-shadow: var(--pixiel-elevation-3); }
  .btn, .bouton { transition: transform var(--pixiel-duree) var(--pixiel-courbe), background-color var(--pixiel-duree) var(--pixiel-courbe), box-shadow var(--pixiel-duree) var(--pixiel-courbe); }
  .btn:hover, .bouton:hover { box-shadow: 0 8px 18px -8px rgb(16 31 47 / .45); }
  .lien-suite, .lien-fleche { display: inline-block; transition: transform var(--pixiel-duree) var(--pixiel-courbe); }
  .lien-suite:hover, .lien-fleche:hover { transform: translateX(4px); }
}

/* Les apparitions au défilement : le texte monte, les dessins montent et s'éclairent ; jamais le héros. */
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
  main > section:not(.heros):not(.heros-fonction) :is(.tete, .duo-texte, .etapes > li, .trois > *, .quatre-souple > *, .formules > *, .filles > li, .articles > li, .sommaire > li, .change > *, .questions-b details, .engagements > *, .fait > li, .gains > li, .trois-clics > li),
  main > section.section:not(.heros-fonction) > :is(h2, .texte, .gauche, .large) {
    animation: monte-texte linear both; animation-timeline: view(); animation-range: entry 0% cover 22%;
  }
  main > section:not(.heros):not(.heros-fonction) :is(.scene, .feuille, .duo > picture, .retouche-scene, .comparer-cadre, .final, .avant-apres),
  main > section.section:not(.heros-fonction) > :is(figure, .droite) {
    animation: monte-dessin linear both; animation-timeline: view(); animation-range: entry 0% cover 28%;
  }
  /* Une grille se dévoile en cascade : chaque colonne un peu après la précédente. */
  :is(.trois, .quatre-souple, .formules, .filles, .articles, .change, .gains, .trois-clics, .etapes) > :nth-child(3n+2) { animation-range: entry 6% cover 26%; }
  :is(.trois, .quatre-souple, .formules, .filles, .articles, .change, .gains, .trois-clics, .etapes) > :nth-child(3n+3) { animation-range: entry 12% cover 30%; }
  @keyframes monte-dessin { from { opacity: 0; transform: translateY(40px) scale(.97); } }
} }

/* ═══ LES CAPTURES DU LOGICIEL (Jocelin, 17 octobre 2026 : « montrer qu'on fait quelque chose de joli ») — un cadre de fenêtre macOS, la galerie de la page Prise de vue. ═══ */
.fenetre-mac { border-radius: 12px; overflow: hidden; background: var(--pixiel-surface-sombre); box-shadow: 0 0 0 1px var(--pixiel-filet-sombre), var(--pixiel-elevation-3); }
.fenetre-barre { display: flex; gap: 7px; align-items: center; height: 26px; padding: 0 12px; background: var(--pixiel-surface-sombre-haute); }
.fenetre-barre i { width: 11px; height: 11px; border-radius: 50%; background: var(--pixiel-contour-sombre); }
.fenetre-mac img { display: block; width: 100%; height: auto; }
.scene > .fenetre-mac { width: 100%; }
.galerie-poste > h2 { grid-column: 1 / -1; margin: 0 0 8px; }
.galerie { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.galerie figure { margin: 0; display: grid; gap: 12px; }
.galerie figcaption { font-weight: 600; color: var(--pixiel-encre); }
main > section.section:nth-of-type(odd) .galerie figcaption { color: var(--pixiel-surface); }
.galerie-poste > .legende { grid-column: 1 / -1; margin: 18px 0 0; }
@media (max-width: 900px) { .galerie { grid-template-columns: minmax(0, 1fr); } }
/* « En savoir plus » et « Voir aussi » (contenu, 17 octobre 2026) : une base sobre, à reprendre par la session design. */
/* « En savoir plus » et « Voir aussi » (Jocelin, 17 octobre 2026 ; dessin de la session design, 20 octobre) :
   une colonne de lecture ; le repli a le même chevron partout, le lien interne est une pastille qu'on vise du pouce. */
.approfondir > * { max-width: 820px; }
.en-savoir-plus > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.en-savoir-plus > summary::-webkit-details-marker { display: none; }
.en-savoir-plus > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--pixiel-duree) var(--pixiel-courbe), margin var(--pixiel-duree) var(--pixiel-courbe); }
.en-savoir-plus[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.en-savoir-plus > summary:focus-visible { outline: 2px solid var(--pixiel-action); outline-offset: 4px; border-radius: 4px; }
.duo-texte .en-savoir-plus { margin: 14px 0 18px; } .duo-texte .en-savoir-plus > summary { width: fit-content; font-weight: 600; font-size: 15px; color: var(--pixiel-action); }
main > section.section:nth-of-type(odd) .duo-texte .en-savoir-plus > summary, .bande-sombre .duo-texte .en-savoir-plus > summary { color: var(--pixiel-lien-sombre); }
.duo-texte .en-savoir-plus .texte { margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--pixiel-bordure-forte); }
details.large.en-savoir-plus { background: var(--pixiel-surface); color: var(--pixiel-encre); border-radius: var(--pixiel-rayon-grand); box-shadow: var(--pixiel-relief-carte); padding: 20px 24px; }
details.large.en-savoir-plus > summary { justify-content: space-between; } details.large.en-savoir-plus > summary h2 { margin: 0; font-size: 1.25rem; }
details.large.en-savoir-plus .texte { margin: 14px 0 0; color: var(--pixiel-encre-3); max-width: 68ch; }
.voir-aussi { margin-block: 22px; } .voir-aussi > .mono { margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--pixiel-encre-2); }
.voir-aussi ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.voir-aussi a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: var(--pixiel-surface); color: var(--pixiel-encre); box-shadow: inset 0 0 0 1.5px var(--pixiel-bordure); font-size: 15px; font-weight: 600; text-decoration: none; transition: box-shadow var(--pixiel-duree) var(--pixiel-courbe), transform var(--pixiel-duree) var(--pixiel-courbe); }
.voir-aussi a::after { content: "→"; color: var(--pixiel-action); transition: transform var(--pixiel-duree) var(--pixiel-courbe); }
.voir-aussi a:hover { box-shadow: inset 0 0 0 1.5px var(--pixiel-action); } .voir-aussi a:hover::after { transform: translateX(3px); }
.voir-aussi a:focus-visible { outline: 2px solid var(--pixiel-action); outline-offset: 3px; }
@media (max-width: 520px) { .voir-aussi ul { flex-direction: column; } .voir-aussi a { width: 100%; justify-content: space-between; border-radius: var(--pixiel-rayon); } }

/* La bêta sur inscription (session contenu, 17 octobre 2026) : le bandeau d'ouverture sous l'en-tête, le badge « Bientôt » des offres. Dessiné par la session design le 20 octobre : un bandeau teinté, un point qui respire, UN bouton. */
.ouverture { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-block: 16px; padding: 12px 12px 12px 18px; border-radius: var(--pixiel-rayon-grand); background: var(--pixiel-marque-douce); box-shadow: inset 0 0 0 1px var(--pixiel-bordure); color: var(--pixiel-encre); }
.ouverture p { margin: 0; font-weight: 600; display: flex; align-items: center; gap: 12px; }
/* Le point qui « respire » dit : c'est ouvert, maintenant. */
.ouverture p::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pixiel-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pixiel-accent) 22%, transparent); }
.ouverture .bouton { background: var(--pixiel-surface); }
@media (prefers-reduced-motion: no-preference) {
  .ouverture p::before { animation: ouverture-pouls 2.4s var(--pixiel-courbe) infinite; }
  @keyframes ouverture-pouls { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--pixiel-accent) 0%, transparent); } }
}
@media (max-width: 520px) { .ouverture { padding: 14px; } .ouverture .bouton { width: 100%; justify-content: center; } }
.badge-bientot { justify-self: start; padding: 4px 10px; border-radius: 999px; background: var(--pixiel-fond); color: var(--pixiel-encre-2); }

/* ═══ LE CARROUSEL DES PRODUITS (page Laboratoire, Jocelin 17 octobre 2026) — CSS seul : la piste porte la liste deux fois et glisse de la moitié de sa largeur, en boucle. Au survol ou au focus, il s'arrête ; sous prefers-reduced-motion, il ne bouge pas et se fait défiler à la main (la copie disparaît). ═══ */
.catalogue-et-carrousel { align-items: center; } .catalogue-et-carrousel > .gauche, .catalogue-et-carrousel > .droite { grid-row: 1; }
.carrousel { border-radius: var(--pixiel-rayon-grand); background: var(--pixiel-surface); box-shadow: var(--pixiel-relief-carte); padding: 22px 0 54px; position: relative; }
.carrousel-fenetre { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); }
.carrousel-fenetre:focus-visible { outline: 2px solid var(--pixiel-action); outline-offset: 4px; }
.carrousel-piste { display: flex; width: max-content; }
.carrousel-liste { display: flex; gap: 18px; margin: 0; padding: 0 9px; list-style: none; }
.carrousel-liste li { flex: none; width: 176px; display: grid; gap: 4px; justify-items: center; align-content: start; text-align: center; font-size: 13px; color: var(--pixiel-encre-3); }
.carrousel-liste li strong { margin-top: 8px; font-size: 15px; color: var(--pixiel-encre); }
.carrousel-case { position: absolute; opacity: 0; width: 1px; height: 1px; }
.carrousel-pause { position: absolute; right: 14px; bottom: 12px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: var(--pixiel-surface); box-shadow: inset 0 0 0 1.5px var(--pixiel-bordure-forte); font-size: 13px; font-weight: 600; color: var(--pixiel-encre); cursor: pointer; }
.carrousel-case:focus-visible + .carrousel-pause { outline: 2px solid var(--pixiel-action); outline-offset: 2px; }
.carrousel-pause .si-arret, .carrousel-case:checked + .carrousel-pause .si-defile { display: none; } .carrousel-case:checked + .carrousel-pause .si-arret { display: inline; }
.carrousel-dessin { width: 168px; aspect-ratio: 4 / 3; display: grid; place-items: center; border-radius: var(--pixiel-rayon); background: var(--pixiel-fond); }
.carrousel-dessin svg { width: 88%; height: auto; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .carrousel-piste { animation: carrousel 48s linear infinite; }
  .carrousel:hover .carrousel-piste, .carrousel-fenetre:focus-within .carrousel-piste, .carrousel-case:checked ~ .carrousel-fenetre .carrousel-piste { animation-play-state: paused; }
  @keyframes carrousel { to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) {
  .carrousel-fenetre { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: linear-gradient(90deg, black 86%, transparent); mask-image: linear-gradient(90deg, black 86%, transparent); }
  .carrousel-liste li { scroll-snap-align: start; }
  .carrousel-double, .carrousel-pause, .carrousel-case { display: none; }
  .carrousel { padding-bottom: 22px; }
}

/* ═══ LA MISE EN PAGE (Jocelin, 17 octobre 2026 : « plus aucune zone nue ») ═══ */
/* Les blocs sans dessin d'une page à blocs : des cartes dans une seule bande, le bouton principal en fin de section. */
.cartes-blocs { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cartes-blocs .carte { color: var(--pixiel-encre); padding: 28px; }
.cartes-blocs .carte h2 { margin: 0; font-size: 22px; line-height: 1.2; color: inherit; }
main > section.section:nth-of-type(odd) .cartes-blocs .carte { background: var(--pixiel-surface-sombre); box-shadow: 0 0 0 1px var(--pixiel-filet-sombre); color: var(--pixiel-encre-sombre); }
.cartes-blocs .carte p { margin: 0; color: var(--pixiel-encre-2); }
main > section.section > .actions { margin-top: 32px; }
/* Qui sommes-nous : les trois maillons en cartes (les classes viennent de la direction A, sans style en B), l'éditeur sur une feuille. */
.chaine { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.maillon { display: grid; gap: 10px; align-content: start; padding: 28px; border-radius: var(--pixiel-rayon-grand); background: var(--pixiel-surface); box-shadow: var(--pixiel-relief-carte); color: var(--pixiel-encre); }
.maillon h3 { margin: 6px 0 0; font-size: 21px; } .maillon p { margin: 0; color: var(--pixiel-encre-2); }
.maillon .visuel-sombre { display: none; }
main > section.section:nth-of-type(odd) .maillon { background: var(--pixiel-surface-sombre); box-shadow: 0 0 0 1px var(--pixiel-filet-sombre); color: var(--pixiel-encre-sombre); }
main > section.section:nth-of-type(odd) .maillon .visuel-clair { display: none; } main > section.section:nth-of-type(odd) .maillon .visuel-sombre { display: block; }
.fiche-editeur { max-width: 720px; padding: 28px 32px; border-radius: var(--pixiel-rayon-grand); background: var(--pixiel-surface); color: var(--pixiel-encre); box-shadow: var(--pixiel-relief-carte); }

/* Au téléphone (Jocelin, 17 octobre 2026) : un bouton passe sur deux lignes plutôt que de déborder — jamais coupé, jamais hors de l'écran. */
@media (max-width: 520px) {
  .btn, .bouton { white-space: normal; text-align: center; max-width: 100%; min-height: 48px; padding-block: 10px; line-height: 1.25; }
  .actions, .ctas { flex-wrap: wrap; }
}

/* Le contenu de fond (relecture de Jocelin, 20 octobre 2026 ; dessin de la session design, 22 octobre) : une colonne
   de lecture de 70 signes ; chaque partie ouverte par un trait au dégradé de la marque ; les étapes numérotées sur
   un fil ; le cas concret en carte blanche (encre fixe : il reste lisible sur une bande sombre). */
.fond-partie { max-width: 70ch; }
.fond-partie + .fond-partie { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--pixiel-bordure); }
main > section.section:nth-of-type(odd) .fond-partie + .fond-partie { border-top-color: var(--pixiel-filet-sombre); }
.fond-partie h2 { max-width: none; font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.25; margin: 0 0 16px; }
.fond-partie h2::before { content: ""; display: block; width: 44px; height: 4px; margin-bottom: 16px; border-radius: 2px; background: var(--pixiel-degrade); }
.fond-partie .texte { max-width: none; } .fond-partie .texte + .texte { margin-top: 14px; }
.fond-etapes { counter-reset: fond; list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0; }
.fond-etapes li { counter-increment: fond; position: relative; padding: 2px 0 18px 46px; }
.fond-etapes li::before { content: counter(fond); position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--pixiel-action); color: var(--pixiel-sur-action); font: 600 14px var(--pixiel-police-lecture); }
.fond-etapes li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 34px; bottom: 4px; width: 2px; border-radius: 1px; background: var(--pixiel-bordure); }
main > section.section:nth-of-type(odd) .fond-etapes li:not(:last-child)::after { background: var(--pixiel-filet-sombre); }
.fond-cas { margin-top: 24px; padding: 20px 22px; border-radius: var(--pixiel-rayon-grand); background: var(--pixiel-surface); color: var(--pixiel-encre); box-shadow: var(--pixiel-relief-carte), inset 4px 0 0 var(--pixiel-action); }
.fond-cas .mono { display: inline-block; margin: 0 0 10px; padding: 3px 10px; border-radius: 999px; background: var(--pixiel-marque-douce); font: 600 12px var(--pixiel-police-lecture); letter-spacing: .06em; text-transform: uppercase; color: var(--pixiel-action); }
.fond-cas p:last-child { margin: 0; color: var(--pixiel-encre-3); }

/* Les guides (session contenu, 22 octobre 2026) : la liste des sources et l'appel vers la fonction qui sert. Base sobre ; le dessin revient à la session design. */
/* Dessin de la session design (22 octobre) : tout le guide tient dans UNE colonne (.lecture > *) ; les sources en
   liste de liens sobres avec leur flèche ; l'appel, une carte posée en fin de lecture. */
.lecture > ol.fond-etapes, .lecture > .questions-b { margin-top: 8px; } .lecture .fond-etapes li { font-size: 17px; }
.guide-sources { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.guide-sources li + li { border-top: 1px solid var(--pixiel-bordure); }
.guide-sources a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; min-height: 44px; color: var(--pixiel-action); font-weight: 600; text-decoration: none; }
.guide-sources a::after { content: "↗"; flex: none; }
.guide-sources a:hover { text-decoration: underline; }
.guide-appel { margin-top: 40px; display: grid; gap: 14px; justify-items: start; }
.guide-appel p { margin: 0; font-size: 18px; font-weight: 600; color: var(--pixiel-encre); }
/* Le sommaire du fond (à partir de quatre parties, proposé par Vitrine contenu le 22 octobre) : la vue d'ensemble
   d'une page longue, sans rien replier. Une carte, des liens numérotés vers les intertitres (#fond-N). */
.fond-sommaire { max-width: 70ch; margin-bottom: 48px; padding: 20px 24px; border-radius: var(--pixiel-rayon-grand); background: var(--pixiel-surface); color: var(--pixiel-encre); box-shadow: var(--pixiel-relief-carte); }
.fond-sommaire > .mono { margin: 0 0 10px; font: 600 12px var(--pixiel-police-lecture); letter-spacing: .06em; text-transform: uppercase; color: var(--pixiel-encre-3); }
.fond-sommaire ol { counter-reset: sommaire; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fond-sommaire li { counter-increment: sommaire; }
.fond-sommaire a { display: flex; gap: 12px; align-items: baseline; min-height: 44px; padding: 10px 0; color: var(--pixiel-encre); font-weight: 600; text-decoration: none; border-top: 1px solid var(--pixiel-bordure); }
.fond-sommaire li:first-child a { border-top: 0; }
.fond-sommaire a::before { content: counter(sommaire, decimal-leading-zero); font: 500 13px ui-monospace, Menlo, monospace; color: var(--pixiel-action); }
.fond-sommaire a:hover { color: var(--pixiel-action); } .fond-sommaire a:focus-visible { outline: 2px solid var(--pixiel-action); outline-offset: 2px; border-radius: 4px; }
.fond-partie h2[id] { scroll-margin-top: 96px; }

/* La signature des guides (choisie par Jocelin le 22 octobre) : l'auteur en clair et en gras, sa qualité dessous dans l'accent du héros. */
.signature { margin-top: 18px; padding-left: 12px; border-left: 2px solid var(--pixiel-sur-sombre); line-height: 1.5; }
.signature-auteur { font-size: 15px; font-weight: 600; color: var(--pixiel-encre-sombre); }
.signature-qualite { font-size: 13px; color: var(--pixiel-sur-sombre); }

/* Le contact de la vitrine (23 octobre 2026) : le formulaire à gauche, les coordonnées à droite. */
.contact-vitrine .formulaire-contact { grid-column: 1 / span 7; display: grid; gap: 18px; }
.contact-vitrine .coordonnees { grid-column: 9 / -1; }
.contact-vitrine .champ { display: grid; gap: 6px; margin: 0; }
.contact-vitrine label, .contact-vitrine dt { font-weight: 600; font-size: 14px; }
.contact-vitrine input, .contact-vitrine select, .contact-vitrine textarea { font: inherit; color: inherit; background: var(--pixiel-surface); border: 0; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--pixiel-bordure-forte); padding: 12px 14px; min-height: 48px; width: 100%; box-sizing: border-box; }
.contact-vitrine textarea { resize: vertical; }
.contact-vitrine :is(input, select, textarea):focus-visible { outline: 2px solid var(--pixiel-action); outline-offset: 2px; }
.contact-vitrine .champ-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-vitrine dl { margin: 12px 0 0; } .contact-vitrine dd { margin: 2px 0 14px; font-size: 18px; }
@media (max-width: 860px) { .contact-vitrine .formulaire-contact, .contact-vitrine .coordonnees { grid-column: 1 / -1; } }

/* L'outil « Votre appareil est-il pris en charge ? » (refait le 23 octobre 2026) : marque, modèle,
   une détection de 1,2 s (le signal court le long du câble, l'écran se balaie), puis la pastille. */
.compat { margin-top: 28px; padding: 22px; border-radius: var(--pixiel-rayon); background: var(--pixiel-surface); box-shadow: 0 0 0 1px var(--pixiel-filet-carte); color: var(--pixiel-encre); display: grid; gap: 14px; }
.compat-titre { margin: 0; font-weight: 600; font-size: 18px; }
.compat-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compat .champ { display: grid; gap: 6px; margin: 0; }
.compat label { font-size: 13px; font-weight: 600; color: var(--pixiel-encre-2); }
.compat select { font: inherit; color: inherit; background: var(--pixiel-fond); border: 0; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--pixiel-bordure-forte); padding: 10px 12px; min-height: 44px; width: 100%; }
.compat select:disabled { opacity: .5; }
.compat-scene svg { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; }
.compat-boitier rect, .compat-boitier circle, .compat-ecran rect { fill: none; stroke: var(--pixiel-encre-2); stroke-width: 2; }
.compat-boitier .compat-lentille { fill: var(--pixiel-fond); }
.compat-cable { fill: none; stroke: var(--pixiel-bordure-forte); stroke-width: 3; stroke-linecap: round; }
.compat-signal { fill: none; stroke: var(--pixiel-action); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 18 160; stroke-dashoffset: 178; opacity: 0; }
.compat-balayage { fill: var(--pixiel-action) !important; stroke: none !important; opacity: 0; }
.compat-detection .compat-signal { opacity: 1; animation: compat-signal 600ms linear 2; }
.compat-detection .compat-balayage { animation: compat-balayage 1200ms ease-in-out; }
.compat-detection .compat-lentille { animation: compat-lentille 600ms ease-in-out 2; }
.compat-ok .compat-cable { stroke: var(--pixiel-succes); }
.compat-ok .compat-ecran rect:first-child { stroke: var(--pixiel-succes); }
.compat-non .compat-cable { stroke: var(--pixiel-erreur); stroke-dasharray: 6 8; }
@keyframes compat-signal { to { stroke-dashoffset: 0; } }
@keyframes compat-balayage { 0% { opacity: .0; transform: translateY(0); } 15% { opacity: .55; } 85% { opacity: .55; } 100% { opacity: 0; transform: translateY(42px); } }
@keyframes compat-lentille { 50% { fill: var(--pixiel-action); } }
.compat-verdict { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; animation: compat-apparait 240ms ease-out; }
.compat-pastille { padding: 4px 12px; border-radius: 999px; font-weight: 600; font-size: 14px; }
.compat-ok .compat-pastille { background: var(--pixiel-succes-douce); color: var(--pixiel-succes); }
.compat-non .compat-pastille { background: var(--pixiel-erreur-douce); color: var(--pixiel-erreur); }
.compat-phrase { color: var(--pixiel-encre-2); }
.compat-suite { flex-basis: 100%; color: var(--pixiel-encre-2); font-size: 14px; }
/* Une ancre ne glisse plus sous la barre fixe (relecture du Designer, 23 octobre 2026). */
main h2[id], main section[id] { scroll-margin-top: 88px; }
@keyframes compat-apparait { from { opacity: 0; transform: translateY(4px); } }
.compat-liste { font-size: 13px; color: var(--pixiel-encre-2); } .compat-liste p { margin: 6px 0; }
@media (prefers-reduced-motion: reduce) { .compat * , .compat-verdict { animation: none !important; } }
@media (max-width: 560px) { .compat-choix { grid-template-columns: 1fr; } }
.cartes-blocs .badge-bientot { display: inline-block; margin-bottom: 8px; font-size: 11px; }
.contact-vitrine .contact-etat { margin: 0; padding: 12px 16px; border-radius: 12px; font-weight: 600; }
.contact-vitrine .contact-ok { background: var(--pixiel-succes-douce); color: var(--pixiel-succes); }
.contact-vitrine .contact-ko { background: var(--pixiel-erreur-douce); color: var(--pixiel-erreur); }

/* « Paiement à 30 jours* » (Jocelin, 23 octobre 2026) : un argument, une pastille qui se voit,
   sa note juste dessous ; et la liste d'avantages du laboratoire de la suite. */
.pastille-30 { display: grid; gap: 4px; justify-items: start; margin: 18px 0 0; }
.pastille-30-mot { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--pixiel-succes-douce); color: var(--pixiel-succes); font-weight: 600; font-size: 16px; }
.pastille-30-mot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pastille-30-note { font-size: 13px; color: var(--pixiel-encre-2); }
.heros-fonction .pastille-30-note { color: var(--pixiel-encre-sombre-2); }
.avantages { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.avantages li { position: relative; padding-left: 34px; color: var(--pixiel-encre-2); }
.avantages li strong { color: var(--pixiel-encre); display: block; }
.avantages li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--pixiel-succes-douce); box-shadow: inset 0 0 0 1.5px var(--pixiel-succes); }
.avantages li::after { content: ""; position: absolute; left: 7px; top: 7px; width: 8px; height: 5px; border-left: 2px solid var(--pixiel-succes); border-bottom: 2px solid var(--pixiel-succes); transform: rotate(-45deg); }
.avantages .avantage-fort { padding: 14px 16px 14px 50px; border-radius: var(--pixiel-rayon); background: var(--pixiel-succes-douce); }
.avantages .avantage-fort::before { left: 16px; top: 16px; } .avantages .avantage-fort::after { left: 23px; top: 21px; }
@media (max-width: 720px) { .avantages { grid-template-columns: 1fr; } }
.detail-accordeon .questions-b details p.fond-cas { padding: 12px 14px; border-radius: 10px; background: var(--pixiel-fond); color: var(--pixiel-encre-2); }

/* La modale de l'ouverture (23 octobre 2026) : une carte claire, calme, au centre ; immobile sous prefers-reduced-motion */
.modale-ouverture { padding: 0; border: 0; background: transparent; max-width: min(520px, calc(100vw - 32px)); width: 100%; color: var(--pixiel-encre); }
.modale-ouverture::backdrop { background: rgba(8, 20, 33, .55); backdrop-filter: blur(3px); }
.modale-ouverture-carte { position: relative; padding: 32px 32px 28px; border-radius: var(--pixiel-rayon-grand); background: var(--pixiel-surface); box-shadow: var(--pixiel-elevation-3); }
.modale-ouverture-fermer { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--pixiel-encre-2); font: 400 28px/1 var(--pixiel-police-lecture); cursor: pointer; }
.modale-ouverture-fermer:hover { background: var(--pixiel-fond); color: var(--pixiel-encre); }
.modale-ouverture-fermer:focus-visible, .modale-ouverture input:focus-visible { outline: 2px solid var(--pixiel-action); outline-offset: 2px; }
.modale-ouverture-sur { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--pixiel-action); }
.modale-ouverture h2 { margin: 0 0 10px; font-size: clamp(24px, 3vw, 30px); line-height: 1.2; padding-right: 32px; }
.modale-ouverture h2 em { font-style: normal; color: var(--pixiel-action); }
.modale-ouverture-texte { margin: 0 0 20px; color: var(--pixiel-encre-2); }
.modale-ouverture-ligne { display: flex; gap: 10px; }
.modale-ouverture-ligne input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--pixiel-bordure-forte); border-radius: var(--pixiel-rayon-petit); font: 400 16px var(--pixiel-police-lecture); color: var(--pixiel-encre); background: var(--pixiel-surface); }
.modale-ouverture-case { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; font-size: 14px; color: var(--pixiel-encre-2); }
.modale-ouverture-case input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--pixiel-action); }
.modale-ouverture-case a { color: var(--pixiel-action); }
.modale-ouverture .champ-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.modale-ouverture .visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.modale-ouverture-etat { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; font-weight: 600; }
.modale-ouverture-etat.modale-ok { background: var(--pixiel-succes-douce); color: var(--pixiel-succes); }
.modale-ouverture-etat.modale-ko { background: var(--pixiel-erreur-douce); color: var(--pixiel-erreur); }
.modale-ouverture-faite .modale-ouverture-ligne, .modale-ouverture-faite .modale-ouverture-case { display: none; }
@media (max-width: 520px) { .modale-ouverture-carte { padding: 28px 20px 22px; } .modale-ouverture-ligne { flex-direction: column; } }
@media (prefers-reduced-motion: no-preference) {
  .modale-ouverture[open] { animation: modale-entree .32s var(--pixiel-courbe); }
  .modale-ouverture[open]::backdrop { animation: modale-voile .32s ease-out; }
  @keyframes modale-entree { from { opacity: 0; transform: translateY(12px) scale(.98); } }
  @keyframes modale-voile { from { opacity: 0; } }
}
.modale-ouverture-carte:focus { outline: none; }
.modale-ouverture button.bouton { border: 0; cursor: pointer; }
.modale-ouverture-faute { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--pixiel-erreur); }
.modale-ouverture input[aria-invalid="true"] { border-color: var(--pixiel-erreur); }
.modale-ouverture-fin { margin: 14px 0 0; }
.modale-ouverture-case + .modale-ouverture-faute + .modale-ouverture-case, .modale-ouverture-faute + .modale-ouverture-case { margin-top: 10px; }
.modale-ouverture-beta { margin: 16px 0 0; font-size: 14px; }
.modale-ouverture-beta a { color: var(--pixiel-encre-2); text-decoration: underline; text-underline-offset: 3px; }
.modale-ouverture-beta a:hover { color: var(--pixiel-encre); }
.modale-ouverture-faite .modale-ouverture-beta { display: none; }
/* Laboratoire : l'analyse et le tri automatiques, la lecture universelle (Jocelin, 24 octobre 2026). */
.analyse-labo .etapes .feuille img { display: block; width: 100%; height: auto; aspect-ratio: 400 / 330; object-fit: contain; }
.analyse-labo .relecture { margin: 0; }
.universelle h2 { margin: 6px 0 18px; font-size: var(--pixiel-vitrine-titre-2); }
.formats-titre { margin: 0 0 12px; font: 600 13px var(--pixiel-police-lecture); letter-spacing: .06em; text-transform: uppercase; color: var(--pixiel-encre-2); }
.formats-lus { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.formats-lus li { padding: 14px 18px; border-radius: var(--pixiel-rayon); background: var(--pixiel-surface); box-shadow: var(--pixiel-relief-carte); font-weight: 600; }
main > section.section:nth-of-type(odd) .formats-lus li { background: var(--pixiel-surface-sombre); box-shadow: 0 0 0 1px var(--pixiel-filet-sombre); }
.formats-issue { margin: 16px 0 0; font-weight: 600; color: var(--pixiel-action); }
main > section.section:nth-of-type(odd) .formats-issue { color: var(--pixiel-lien-sombre); }
/* « Votre abonnement remboursé par vos tirages » : les seuils, puis le calculateur (Tarifs) ou le renvoi (Laboratoire). */
.rembourse-seuils { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.rembourse-seuils li { padding: 12px 16px; border-radius: var(--pixiel-rayon); background: var(--pixiel-succes-douce); color: var(--pixiel-encre); font-weight: 600; }
.rembourse-calcul { margin-top: 24px; }
.rembourse-calcul label { display: block; font-weight: 600; margin-bottom: 8px; }
.rembourse-calcul input { font: inherit; color: var(--pixiel-encre); background: var(--pixiel-fond); border: 0; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--pixiel-bordure-forte); padding: 10px 12px; min-height: 44px; width: 100%; max-width: 260px; }
.rembourse-resultats { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.rappel-rembourse { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--pixiel-bordure); }
.rappel-rembourse h3 { margin: 0; }
main > section.section.universelle > .gauche { grid-column: 1 / span 6; grid-row: 1; } main > section.section.universelle > .droite { grid-row: 1; }
.rappel-rembourse h3 em { font-style: normal; color: var(--pixiel-action); }

/* ── Le bandeau des cookies de Google (24 octobre 2026) : une carte en bas, qui ne voile rien ; « Accepter » et « Refuser » de même forme (CNIL). Au-dessus du bouton collant du téléphone. ── */
.bandeau-cookies { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px; max-width: 640px; margin-inline: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--pixiel-surface); color: var(--pixiel-encre); border-radius: var(--pixiel-rayon-grand); box-shadow: var(--pixiel-relief-carte-survol); font-size: 15px; line-height: 1.45; }
.bandeau-cookies[hidden], .bandeau-cookies-panneau[hidden], .pied-cookies[hidden] { display: none; }
.bandeau-cookies h2 { margin: 0; font-size: 16px; }
.bandeau-cookies p { margin: 0; color: var(--pixiel-encre-2); }
.bandeau-cookies p a { color: var(--pixiel-encre); text-decoration: underline; text-underline-offset: 3px; }
.bandeau-cookies-panneau { display: flex; flex-direction: column; gap: 10px; }
.bandeau-cookies-panneau label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.bandeau-cookies-panneau input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.bandeau-cookies-panneau .btn { align-self: flex-start; }
.bandeau-cookies-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bandeau-cookies-actions [data-cookies-refuser], .bandeau-cookies-actions [data-cookies-accepter] { flex: 1 1 140px; }
.bandeau-cookies-choisir { background: none; border: 0; padding: 10px 4px; min-height: 44px; font: 600 15px var(--pixiel-police-lecture); color: var(--pixiel-encre); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bandeau-cookies .btn, .texte .btn[data-cookies-gerer] { cursor: pointer; border: 0; }
.pied-cookies { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.pied-cookies:hover { color: var(--pixiel-surface); }
[data-cookies-gerer][hidden] { display: none !important; }

/* Disponibilité, note des boîtiers, configuration minimale (Jocelin, 25 octobre 2026) */
.dispo { display: inline-flex; justify-self: start; width: fit-content; max-width: 100%; align-items: center; gap: 8px; margin: 14px 0 0; padding: 5px 14px; border: 1px solid currentColor; border-radius: 999px; font-weight: 600; font-size: 14px; }
.dispo-point { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.heros .dispo { margin-top: 18px; }
.sans-annexe { margin-top: 10px; font-weight: 600; }
.asterisque { margin-left: 2px; font-weight: 700; text-decoration: none; padding: 0 6px; }
.note-boitiers { margin: 14px 0 0; font-size: 13px; max-width: 62ch; color: var(--pixiel-encre-2); }
.bande-sombre .note-boitiers { color: var(--pixiel-encre-sombre-2); }
.lien-config { margin: 8px 0 0; font-size: 15px; }
.configuration { padding-block: 56px; }
.config-tete { margin-bottom: 24px; max-width: 62ch; } .config-tete .texte { margin-top: 10px; }
.config-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.config-carte h3 { margin: 0 0 10px; font-size: 17px; }
.config-carte dl { margin: 0; display: grid; gap: 10px; }
.config-carte dt { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pixiel-encre-2); }
.config-carte dd { margin: 2px 0 0; font-size: 15px; }
@media (max-width: 1060px) { .config-grille { grid-template-columns: minmax(0, 1fr); } }