/* Afflux — un flux spectaculaire, puis une qualification d'agenda sans ambiguïté. */
.repere--vert{color:var(--green)}.bouton--vert{background:var(--green);border-color:var(--green);color:var(--on-green)}
/* ⚠️ minmax(0,…) sur la seconde piste, pas minmax(600px,…). Une piste de grille
   refuse par défaut de descendre sous son contenu : à 1100 px, 420 + 600 + la
   gouttière + les marges dépassaient le viewport, et la scène sortait du cadre
   par la droite. Le minimum à zéro rend la piste réellement élastique. */
.afflux-hero{position:relative;isolation:isolate;min-height:min(850px,calc(100vh - 74px));display:grid;grid-template-columns:minmax(340px,.78fr) minmax(0,1.22fr);align-items:center;gap:clamp(24px,4vw,80px);overflow:hidden;padding:clamp(64px,8vw,120px) clamp(24px,5vw,80px);border-bottom:1px solid var(--border);background:radial-gradient(circle at 72% 48%,color-mix(in srgb,var(--green) 12%,transparent),transparent 30%),radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--cyan) 7%,transparent),transparent 40%),var(--bg)}
.afflux-hero__copie{position:relative;z-index:3}.afflux-hero .lede{max-width:48ch}.afflux-hero__note{margin:18px 0 0;color:var(--faint);font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.06em}

/* LA SCÈNE DU VISUEL B — ambre à gauche, LÉA au centre, deux issues à droite.
   Le canevas partagé « flux.js » peint les nappes ; tout le reste est du DOM,
   donc net à toutes les échelles, lisible par un lecteur d'écran et traduit
   sans retouche. Aucune découpe d'image n'entre dans ce héros. */
/* Le canevas s'arrête avant la colonne de texte. Deux raisons qui vont dans le
   même sens : le visuel B garde sa moitié gauche presque noire, et un contraste
   de 4,5:1 ne se garantit pas au-dessus de nappes lumineuses mouvantes —
   aucun contrôle automatique ne sait lire ce qu'un canevas a peint. */
.afflux-flux{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;mask-image:linear-gradient(90deg,transparent 18%,black 46%)}
.afflux-scene{position:relative;z-index:2;min-height:600px;container-type:inline-size}
.afflux-scene__liens{position:absolute;inset:0;width:100%;height:100%}
.afflux-scene__liens .lien{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linecap:round}
.afflux-scene__liens .lien--ambre{stroke:var(--amber);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--amber) 70%,transparent))}
.afflux-scene__liens .lien--vert{stroke:var(--green);filter:drop-shadow(0 0 7px color-mix(in srgb,var(--green) 75%,transparent))}
.afflux-scene__liens .lien--cyan{stroke:var(--cyan);stroke-dasharray:5 7;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--cyan) 60%,transparent))}

.afflux-entree{position:absolute;left:0;width:min(230px,31cqw);padding:12px 14px;border:1px solid var(--border2);border-radius:9px;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(6px);box-shadow:0 14px 34px color-mix(in srgb,var(--bg) 70%,transparent)}
.afflux-entree--demande{top:16%}.afflux-entree--message{top:64%}
.afflux-entree p{margin:0;display:flex;align-items:center;gap:9px;color:var(--text);font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.07em}
.afflux-entree small{display:block;margin-top:3px;padding-left:25px;color:var(--faint);font:500 9px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.afflux-entree__pastille{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;background:color-mix(in srgb,var(--amber) 20%,transparent);color:var(--amber)}
.afflux-entree__pastille svg{width:11px;height:11px}
.afflux-onde{display:block;margin-top:9px;width:100%;height:30px}
.afflux-onde polyline{fill:none;stroke:var(--amber);stroke-width:1.4;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--amber) 80%,transparent))}
.afflux-entree__trame{display:block;margin-top:9px;height:30px;background-image:repeating-linear-gradient(90deg,color-mix(in srgb,var(--amber) 55%,transparent) 0 2px,transparent 2px 6px);mask-image:linear-gradient(90deg,black 60%,transparent);opacity:.5}

/* LE CYLINDRE. Deux jantes elliptiques et un fût en dégradé : c'est la paire
   de jantes qui fait lire « volume » plutôt que « pastille ». Aucune image,
   aucune bibliothèque 3D — la maquette montre du verre, pas de la géométrie. */
.afflux-noyau{position:absolute;left:47%;top:50%;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:min(240px,32cqw);aspect-ratio:1/1.02;border-radius:44%/50%;background:linear-gradient(100deg,color-mix(in srgb,var(--cyan) 26%,transparent),transparent 30%,transparent 68%,color-mix(in srgb,var(--cyan) 30%,transparent)),radial-gradient(62% 54% at 50% 46%,color-mix(in srgb,var(--cyan) 20%,transparent),transparent 72%),radial-gradient(70% 62% at 50% 46%,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--bg) 90%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cyan) 34%,transparent),inset 0 0 46px color-mix(in srgb,var(--cyan) 18%,transparent),0 0 90px color-mix(in srgb,var(--cyan) 22%,transparent)}
.afflux-noyau__capot,.afflux-noyau__socle{position:absolute;top:2%;width:34%;height:96%;border:1px solid color-mix(in srgb,var(--cyan) 32%,transparent);border-radius:50%}
.afflux-noyau__capot{left:3%}.afflux-noyau__socle{right:3%;border-color:color-mix(in srgb,var(--cyan) 18%,transparent)}
.afflux-noyau strong{position:relative;font:700 clamp(1.4rem,3.4cqw,2rem) var(--mono);letter-spacing:.2em;color:var(--text);text-shadow:0 0 24px color-mix(in srgb,var(--cyan) 60%,transparent)}
.afflux-noyau small{position:relative;text-align:center;color:var(--muted);font:500 9px var(--mono);text-transform:uppercase;letter-spacing:.08em;line-height:1.5}

.afflux-compatible{position:absolute;right:0;top:0;width:min(216px,29cqw)}
.afflux-compatible p{margin:0 0 7px;color:var(--faint);font:600 9px var(--mono);text-transform:uppercase;letter-spacing:.1em}
.afflux-compatible__puce{display:flex;align-items:center;justify-content:center;gap:14px;min-height:52px;padding:0 14px;border:1px solid var(--border2);border-radius:8px;background:var(--surface);color:var(--text);font-size:14px}

.afflux-issue{position:absolute;right:0;display:flex;align-items:center;gap:12px;width:min(216px,29cqw);padding:16px 14px;border:1px solid var(--border2);border-radius:10px;background:var(--surface)}
.afflux-issue--confirme{top:22%;flex-direction:column;gap:10px;padding:22px 14px;border-color:var(--green);background:radial-gradient(circle at 50% 22%,color-mix(in srgb,var(--green) 16%,transparent),transparent 62%),var(--surface);box-shadow:0 0 48px color-mix(in srgb,var(--green) 20%,transparent)}
.afflux-issue--confirme b{color:var(--green);font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.09em;text-align:center;line-height:1.5}
.afflux-issue__glyphe{width:38px;height:38px;color:var(--green)}
/* Les trois détails du visuel B qui disent l'état sans un mot : le chevron du
   sélecteur, la flèche de sortie verte, la croix de l'agenda fermé. Dessinés en
   pseudo-éléments — ils ne portent aucun sens que le texte ne porte déjà, donc
   ils n'ont rien à faire dans le HTML des deux langues. */
.afflux-issue--confirme::after{content:'';position:absolute;right:-30px;top:50%;width:26px;height:1.5px;background:var(--green);box-shadow:0 0 8px color-mix(in srgb,var(--green) 80%,transparent);clip-path:polygon(0 0,72% 0,72% -240%,100% 50%,72% 340%,72% 100%,0 100%)}
.afflux-issue--bloque{top:70%;opacity:.72}
.afflux-issue--bloque::before,.afflux-issue--bloque::after{content:'';position:absolute;right:14px;top:14px;width:9px;height:1.4px;background:var(--faint)}
.afflux-issue--bloque::before{rotate:45deg}.afflux-issue--bloque::after{rotate:-45deg}
.afflux-issue--bloque span{display:flex;flex-direction:column;gap:2px}
.afflux-issue--bloque b{color:var(--muted);font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.07em}
.afflux-issue--bloque small{color:var(--faint);font:500 9px var(--mono);text-transform:uppercase;letter-spacing:.05em}
/* ⚠️ Cette règle s'appelait .logo — le MÊME nom que le logo SouthCode de
   l'en-tête, déclaré sans portée. Elle écrasait donc le lien de marque à
   22 px de large sur les deux pages Afflux, à toutes les largeurs : le mot
   « southcode » débordait d'une boîte de 22 px. Renommée .agenda-logo le
   10 août 2026 — un nom générique dans une feuille de page finit toujours par
   rencontrer son homonyme dans la feuille commune. */
.agenda-logo{flex:none;width:22px;height:22px}
.logo__chiffre{font:700 8.5px var(--mono)}
.sprite-logos{display:none}
.compatibilite{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);gap:clamp(50px,8vw,130px);align-items:start;padding:clamp(90px,5vw,170px) clamp(24px,5vw,80px)}.compatibilite>*{grid-column:auto}.compatibilite__intro h2{max-width:12ch}.agenda-resultats{margin-top:18px}.agenda-resultats article{padding:22px;border:1px solid color-mix(in srgb,var(--green) 45%,var(--border));background:var(--raised)}.agenda-resultats h3{margin:10px 0;font-size:clamp(1.15rem,1.4vw,1.5rem);line-height:1.25}.agenda-resultats p:not(.agenda-resultats__statut){color:var(--muted)}.agenda-resultats a{display:inline-flex;min-height:44px;align-items:center;color:var(--green);font-weight:650;text-decoration:none}.agenda-resultats__statut{margin:0;color:var(--green);font:600 9px var(--mono);text-transform:uppercase;letter-spacing:.1em}.agenda-resultats__statut--verifier{color:var(--cyan)}.agenda-resultats article:has(.agenda-resultats__statut--verifier){border-color:color-mix(in srgb,var(--cyan) 50%,var(--border))}

/* LE PANNEAU DU VISUEL C — la colonne de droite. La copie et le formulaire
   tiennent la colonne de gauche, exactement comme la maquette : on décide
   d'abord (« mon agenda accepte-t-il l'écriture ? »), la preuve est à côté. */
.compatibilite__intro{grid-column:1;grid-row:1}
.agenda-panneau{grid-column:2;grid-row:1;padding:clamp(20px,3vw,32px);border:1px solid var(--border);border-radius:16px;background:radial-gradient(circle at 22% 4%,color-mix(in srgb,var(--cyan) 8%,transparent),transparent 46%),var(--surface)}
/* L'axe des heures est une COLONNE, comme dans le visuel C — un agenda se lit
   en descendant. Les deux pistes de la même hauteur et le même pas de gouttière
   suffisent à aligner les libellés sur les lignes, sans mesure en JavaScript. */
.agenda-plan{display:grid;grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);column-gap:10px}
.agenda-plan__titre{grid-column:1/-1;margin:0 0 16px;color:var(--faint);font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.12em}
.agenda-plan__jours,.agenda-plan__heures{display:grid;margin:0;padding:0;list-style:none;color:var(--faint);font:500 9px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.agenda-plan__jours{grid-column:2;grid-row:2;grid-template-columns:repeat(5,1fr);gap:6px;padding:0 6px 8px;text-align:center}
.agenda-plan__jours .est-actif{color:var(--cyan)}
.agenda-plan__heures{grid-column:1;grid-row:3;grid-template-rows:repeat(6,1fr);gap:6px;padding:6px 0;text-align:right;font-size:8px}
.agenda-plan__heures li{display:flex;align-items:center;justify-content:flex-end}
.agenda-plan__grille{grid-column:2;grid-row:3;position:relative;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(6,1fr);gap:6px;height:min(230px,34vw);border:1px solid var(--border);border-radius:8px;padding:6px;background-image:linear-gradient(color-mix(in srgb,var(--border) 60%,transparent) 1px,transparent 1px);background-size:100% calc((100% - 12px)/6)}
.creneau{grid-column:var(--jour);grid-row:var(--debut)/span var(--duree);border-radius:5px}
.creneau--pris{background:color-mix(in srgb,var(--text) 12%,transparent)}
.creneau--libre{border:1px dashed color-mix(in srgb,var(--faint) 60%,transparent)}
.creneau--pose{border:1px solid var(--cyan);background:color-mix(in srgb,var(--cyan) 14%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--cyan) 30%,transparent)}
.agenda-liste{display:grid;gap:8px;margin:26px 0 0;padding:0;border:0;list-style:none}
.agenda-liste>legend{padding:0;margin-bottom:14px;font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--text)}
.agenda-liste__choix{cursor:pointer}
.agenda-liste__choix input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.agenda-liste__choix:has(input:focus-visible){outline:2px solid var(--green);outline-offset:2px}
.agenda-liste__choix:has(input:checked){border-color:var(--green);background:color-mix(in srgb,var(--green) 8%,var(--bg))}
.agenda-liste .est-bloque:has(input:checked){border-color:var(--red);background:color-mix(in srgb,var(--red) 8%,var(--bg))}
.agenda-liste__choix{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:12px;min-height:52px;padding:0 14px;border:1px solid var(--border);border-radius:9px;background:var(--bg)}
.agenda-liste b{font-size:14px;font-weight:600}
.agenda-liste__puce{display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--border2);border-radius:50%;color:var(--muted);font:600 11px var(--mono)}
.agenda-liste__choix--neutre .agenda-liste__etat{color:var(--muted)}
.agenda-liste__etat{color:var(--green);font:600 9px var(--mono);text-transform:uppercase;letter-spacing:.07em;text-align:right}
.agenda-liste .est-bloque{border-color:color-mix(in srgb,var(--red) 45%,var(--border))}
.agenda-liste .est-bloque .agenda-liste__etat{color:var(--red)}
.afflux-canaux{padding-top:clamp(100px,12vw,180px)}.afflux-canaux h2{max-width:13ch}.afflux-canaux__grille{display:grid;grid-template-columns:1.2fr .9fr .9fr;margin-top:58px;gap:14px}.afflux-canal{position:relative;min-height:330px;padding:32px;border:1px solid var(--border);border-radius:13px;background:var(--surface)}.afflux-canal--actif{border-color:var(--green);background:radial-gradient(circle at 80% 10%,color-mix(in srgb,var(--green) 13%,transparent),transparent 34%),var(--surface)}.afflux-canal>span{position:absolute;right:28px;top:23px;color:var(--border2);font:700 70px var(--mono);line-height:1}.afflux-canal .badge{position:relative;z-index:1;color:var(--green)}.afflux-canal h3{position:relative;margin-top:90px;font-size:clamp(1.7rem,3vw,3rem)}.afflux-canal>p:last-child{color:var(--muted);max-width:34ch}
.afflux-appel{padding-top:clamp(120px,15vw,220px);padding-bottom:clamp(100px,12vw,180px)}.afflux-appel h2{max-width:14ch}
@media(max-width:1050px){.afflux-hero{grid-template-columns:1fr}.afflux-scene{min-height:560px}.compatibilite{grid-template-columns:1fr}.compatibilite__intro,.agenda-panneau{grid-column:1;grid-row:auto}}
@media(max-width:720px){.afflux-hero{padding:54px 20px}.afflux-flux{mask-image:linear-gradient(180deg,transparent 44%,black 62%)}.afflux-scene{min-height:430px;margin-top:20px}.afflux-scene__liens{opacity:.6}.afflux-entree,.afflux-compatible,.afflux-issue{width:min(150px,44cqw);padding:9px 10px}.afflux-entree p,.afflux-compatible__puce{font-size:9px}.afflux-compatible__puce{gap:9px;padding:0 9px}.afflux-onde,.afflux-entree__trame{height:18px}.afflux-issue--confirme{padding:14px 10px}.afflux-issue__glyphe{width:26px;height:26px}.agenda-plan{overflow-x:auto}.compatibilite{padding-left:20px;padding-right:20px}.agenda-panneau{padding:18px}.agenda-plan__grille{height:180px}.afflux-canaux__grille{grid-template-columns:1fr}.afflux-canal{min-height:270px}}
/* Le mouvement est ADDITIF : la composition au repos est déjà celle du visuel B.
   Sous mouvement réduit, on retire l'animation et rien d'autre — la scène reste
   entière, simplement immobile. */
@media(prefers-reduced-motion:no-preference){.afflux-scene__liens .lien--cyan{animation:afflux-circulation 7s linear infinite}.afflux-onde polyline{animation:afflux-pouls 2.6s ease-in-out infinite}.creneau--pose{animation:afflux-pouls 3.4s ease-in-out infinite}.afflux-canal{transition:transform .2s ease,border-color .2s ease}.afflux-canal:hover{transform:translateY(-5px);border-color:var(--green)}}
@keyframes afflux-circulation{to{stroke-dashoffset:-200}}@keyframes afflux-pouls{0%,100%{opacity:1}50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){.afflux-scene__liens .lien,.afflux-onde polyline,.creneau--pose,.afflux-canal{animation:none!important;transition:none!important}}

/* Au-delà de la bascule, le verdict se lit en deux temps : l'énoncé tient à gauche,
   l'explication et l'action à droite. En dessous, il reste en une seule colonne. */
@media(min-width:1051px){
  .agenda-resultats article:not([hidden]){display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(28px,4vw,64px);align-items:start;padding:clamp(24px,2.4vw,34px)}
  .agenda-resultats__statut{grid-column:1/-1;grid-row:1}
  .agenda-resultats h3{grid-column:1;grid-row:2;margin:14px 0 0;max-width:20ch}
  .agenda-resultats p:not(.agenda-resultats__statut){grid-column:2;grid-row:2;margin:14px 0 0;max-width:62ch}
  .agenda-resultats a{grid-column:2;grid-row:3;margin-top:6px}
}
.afflux-compatible__puce .agenda-logo{width:28px;height:28px;flex:0 0 auto}
.afflux-issue--bloque .agenda-logo{width:28px;height:28px}

/* Le vrai widget AFFLUX remplace la reproduction animée du 20 août. Le cadre
   reste volontairement sobre : toute l'interaction visible appartient au
   composant livré aux clients, dans son Shadow DOM. */
.afflux-vitrine { padding-top: clamp(100px, 12vw, 180px); }
.afflux-vitrine > h2 { max-width: 16ch; }
.afflux-pilote__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin-top: 56px;
  padding: clamp(24px, 4vw, 52px);
  border: 1px solid var(--border2);
  border-radius: 18px;
  background: var(--surface);
}
.afflux-pilote__preuve,
.afflux-pilote__widget { min-width: 0; }
.afflux-pilote__preuve h3 {
  max-width: 20ch;
  margin: 18px 0;
  font-size: clamp(1.45rem, 2.4vw, 2.25rem);
}
.afflux-pilote__preuve > p:not(.afflux-pilote__statut) {
  max-width: 58ch;
  color: var(--muted);
  line-height: 1.65;
}
.afflux-pilote__statut {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--green);
  font: 700 11px var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.afflux-pilote__statut span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 18px var(--green);
}
.afflux-pilote__preuve ul {
  display: grid;
  gap: 9px;
  margin: 24px 0;
  padding: 20px 0;
  border-block: 1px solid var(--border);
  list-style: none;
}
.afflux-pilote__preuve li { color: var(--muted); line-height: 1.5; }
.afflux-pilote__preuve li::before { content: '↳'; margin-right: 9px; color: var(--green); }
.afflux-pilote__alerte {
  padding: 15px 17px;
  border: 1px solid color-mix(in srgb, var(--amber) 46%, var(--border));
  background: var(--amber-wash);
  color: var(--text) !important;
  font-size: 13px;
}
.afflux-pilote__widget {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 430px;
  padding: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--raised);
}
.afflux-pilote__widget::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 17px;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--a), transparent 0 20%, color-mix(in srgb, var(--cyan) 76%, transparent) 34%, transparent 48% 64%, color-mix(in srgb, var(--green) 80%, transparent) 78%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.afflux-pilote__widget afflux-assistant {
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--cyan) 22%, transparent));
}
@media (prefers-reduced-motion: no-preference) {
  .afflux-pilote__widget::before { animation: southcode-halo 8s linear infinite; }
  .afflux-pilote__widget afflux-assistant { animation: afflux-host-glow 4.5s ease-in-out infinite; }
  .accueil-afflux-live > afflux-assistant { animation: afflux-host-glow 4.5s ease-in-out infinite; }
}
@keyframes afflux-host-glow {
  0%, 100% { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--cyan) 16%, transparent)); }
  50% { filter: drop-shadow(0 0 30px color-mix(in srgb, var(--green) 26%, transparent)); }
}
.afflux-pilote__widget afflux-assistant { display: block; width: 100%; min-width: 0; max-width: 100%; }
/* Le même halo accompagne le widget flottant de l'accueil : le composant reste
   propriétaire de son interface, tandis que son host reçoit une profondeur
   lumineuse lisible sans toucher à son Shadow DOM. */
.accueil-afflux-live > afflux-assistant {
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--cyan) 20%, transparent));
}
.afflux-pilote__chargement,
.afflux-pilote__widget noscript { color: var(--muted); font-size: 13px; line-height: 1.5; }

@media (max-width: 900px) {
  .afflux-pilote__grille { grid-template-columns: 1fr; }
  .afflux-pilote__widget { min-height: 410px; }
}
@media (max-width: 480px) {
  .afflux-pilote > .afflux-pilote__grille {
    grid-column: pleine;
    padding: 14px 0;
    border-inline: 0;
    border-radius: 0;
  }
  .afflux-pilote__preuve { padding-inline: 20px; }
  .afflux-pilote__widget { min-height: 390px; padding: 6px 0; border-inline: 0; border-radius: 0; }
}

.afflux-orientation { border-block: 1px solid var(--border); background: var(--surface); }
.afflux-orientation h2 { max-width: 17ch; }
.afflux-canaux__franchise { margin: 30px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; max-width: 72ch; }
.afflux-canaux__franchise b { color: var(--text); font-weight: 650; }
.afflux-questions{padding-top:clamp(90px,10vw,150px)}
.afflux-questions h2{max-width:18ch}
.afflux-questions>details{max-width:74ch}
.afflux-questions>details:first-of-type{margin-top:34px;border-top:1px solid var(--border)}
.afflux-questions>details{border-bottom:1px solid var(--border)}
.afflux-questions>details>p{margin:0 0 22px;color:var(--muted);line-height:1.65;max-width:66ch}