/* Les pages gardées de septembre (articles du journal, paliers, partenaires),
   passées sur v4.css + v4-ajouts.css le 05/10. Elles avaient chacune 75 Ko
   de CSS en ligne recopié ; ne reste ici que ce qui leur est propre. */

/* ── L'état actif : barre et feuille du téléphone ───────────────────────── */
.nav a.actif { color: var(--ink); }
.nav a.actif::after { transform: scaleX(1); }
.menu-ligne.actif .menu-l b { color: var(--accent-ink); font-weight: 600; }

/* ══ Un article du journal ════════════════════════════════════════════════ */
/* La barre de lecture suit le doigt : pas de transition, elle mentirait. */
.lecture { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; pointer-events: none;
  background: var(--foil); transform-origin: 0 50%; transform: scaleX(0); }

.col-lect { max-width: 760px; margin: 0 auto; }
.art-tete { position: relative; z-index: 2; padding-top: clamp(36px, 7vh, 72px); }
.retour { display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  font-size: 14.5px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.retour:hover { color: var(--ink); }
.retour svg { width: 15px; height: 15px; }
.art-tete .mini { display: flex; margin-top: 6px; }
.art-tete h1 { margin-top: 12px; font-size: clamp(32px, 4.6vw, 50px); line-height: 1.08; max-width: 20ch; }
.art-tete .chapo { font-size: 19px; max-width: 58ch; }
/* La photo sous le titre (05/10). Le fond teinté tient la place tant
   qu'elle charge : jamais de trou blanc, jamais de saut de mise en page. */
.art-photo { margin-top: 28px; }
.art-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 24px;
  background: var(--bg-deep); box-shadow: 0 26px 56px -34px rgba(90,50,80,.55); }
.art-photo figcaption { margin-top: 6px; text-align: right; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.art-photo figcaption a { display: inline-block; padding: 4px 0; color: inherit; text-decoration: underline;
  text-decoration-color: rgba(142,125,136,.4); text-underline-offset: 2px; }
.art-photo figcaption a:hover { color: var(--ink-2); }
/* Les schémas d'avant ne sont plus la couverture : ils vivent dans le texte. */
.art-fig img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 14px 34px -24px rgba(90,50,80,.5); }
.art-fig figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.prose .art-fig { margin-top: 30px; }

/* Le corps sur une surface pleine : on ne lit pas quinze lignes à travers
   un flou. Colonne de 65 caractères, interligne large. */
.art-corps { position: relative; z-index: 2; margin-top: 30px; padding: clamp(32px, 5vw, 52px) clamp(22px, 5vw, 48px);
  background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.95); border-radius: 28px;
  box-shadow: 0 24px 60px -36px rgba(90,50,80,.45); }
.prose { max-width: 65ch; margin: 0 auto; font-size: 18px; line-height: 1.72; color: var(--ink-2); }
.prose > * + * { margin-top: 20px; }
.prose h2 { margin-top: 48px; max-width: none; font-size: clamp(23px, 2.6vw, 28px); line-height: 1.2; letter-spacing: -.025em; color: var(--ink); }
.prose h2::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 14px; border-radius: 2px; background: var(--accent); }
.prose h3 { margin-top: 34px; font-size: 19.5px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.prose h2 + *, .prose h3 + * { margin-top: 12px; }
.prose strong, .prose b { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prose ul { list-style: none; display: grid; gap: 12px; }
.prose li { position: relative; padding-left: 24px; }
.prose li::before { content: ""; position: absolute; left: 3px; top: .68em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.prose blockquote { margin-top: 28px; padding: 18px 22px; border-radius: 18px; border-left: 3px solid var(--accent);
  background: var(--accent-tint); font-size: 19.5px; line-height: 1.5; font-weight: 500; color: var(--ink); }
.prose code { font-family: ui-monospace, Menlo, monospace; font-size: .82em; padding: 2px 6px; border-radius: 6px; background: rgba(36,27,34,.06); color: var(--ink); }
.prose hr { margin-top: 36px; border: 0; border-top: 1px solid var(--trait); }
.prose hr + p { margin-top: 24px; }
/* La réponse directe en tête (moteurs de réponse) et la FAQ de fin (06/10). */
.prose .art-bref { padding: 18px 20px; border-radius: 18px; border: 1px solid rgba(232,68,127,.16);
  background: var(--accent-tint); font-size: 17px; line-height: 1.6; color: var(--ink); }
.art-faq h3 { margin-top: 26px; }
.art-faq h3:first-child { margin-top: 0; }
.art-faq p { margin-top: 8px; }

/* L'encart d'inscription : du verre, Seli à côté du texte. */
.art-suite { padding-top: 48px; }
.art-cta { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 22px; padding: 26px 30px 26px 14px; border-radius: 28px; }
.art-cta img { width: 180px; height: auto; grid-row: span 2; margin: -18px -14px -22px 0; }
.art-cta h2 { margin-top: 6px; font-size: clamp(24px, 2.8vw, 30px); max-width: none; }
.art-cta .chapo { margin-top: 8px; font-size: 16.5px; }
.art-cta .btn { justify-self: start; margin-top: 8px; min-height: 50px; padding: 0 24px; }
.art-lies h2 { margin-top: 12px; }
.art-lies .cartes-art { margin-top: 20px; }
.art-lies .lien-suite { margin-top: 12px; }

/* ══ Le journal : la une, puis les cartes (05/10) ══════════════════════════ */
/* Le filtre par rubrique (06/10) : des pastilles qui se tapent au doigt, la
   pastille choisie prend la teinte foncée de sa rubrique (texte blanc lisible). */
.jr-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.jr-filtres[hidden], .jr-vide[hidden], .cartes-art > li[hidden] { display: none; }
.jr-f { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 6px; border-radius: 999px;
  border: 1px solid rgba(36,27,34,.1); background: rgba(255,255,255,.84); color: var(--ink);
  font: 600 14.5px/1.2 Archivo, system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease); }
.jr-f:first-child { padding-left: 16px; }
.jr-f img { width: 32px; height: 32px; flex: none; border-radius: 50%; object-fit: cover; }
.jr-nb { min-width: 24px; padding: 2px 7px; border-radius: 999px; background: rgba(36,27,34,.07);
  font-size: 12.5px; font-weight: 700; text-align: center; color: var(--ink-2); }
.jr-f[aria-pressed="true"] { background: var(--teinte-t, var(--ink)); border-color: transparent; color: #fff; }
.jr-f[aria-pressed="true"] .jr-nb { background: rgba(255,255,255,.24); color: #fff; }
.jr-f:active { transform: scale(.97); }
.jr-f:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) { .jr-f:not([aria-pressed="true"]):hover { border-color: rgba(36,27,34,.26); } }
.jr-etat { margin-top: 12px; font-size: 14px; color: var(--ink-3); }
.jr-etat:empty { display: none; }
.jr-vide { display: grid; justify-items: center; gap: 12px; max-width: 470px; margin: 26px auto 0; padding: 26px 22px 28px;
  border-radius: 28px; text-align: center; background: rgba(255,255,255,.84); box-shadow: 0 18px 40px -28px rgba(90,50,80,.45); }
.jr-vide img { width: 128px; height: auto; }
.jr-vide p { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.jr-vide b { display: block; margin-bottom: 4px; font-size: 19px; color: var(--ink); }
.jr-vide .btn { min-height: 46px; }
/* Au téléphone, une seule rangée qui glisse (quatre rangées sinon). */
@media (max-width: 759px) {
  .jr-filtres { flex-wrap: nowrap; overflow-x: auto; margin: 16px calc(var(--gut) * -1) 0; padding: 2px var(--gut) 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding: 0 var(--gut); }
  .jr-filtres::-webkit-scrollbar { display: none; }
  .jr-f { flex: none; }
}
/* L'en-tête suit le héros commun (css/pages.css) ; la une fait office de
   scène, en grand, juste dessous. */
.page-h.ph-journal { padding-bottom: 0; }
.ph-journal .une { margin-top: 30px; }

.une .rub, .carte-art .rub { justify-self: start; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-tint); border-radius: 999px; padding: 4px 10px; }

/* La une : la photo dans un cadre de verre, le titre à côté sur ordinateur,
   dessous au téléphone. */
.une { display: grid; margin-top: 24px; padding: 10px; border-radius: 32px; text-decoration: none; color: inherit; }
/* Le reflet du verre est un trait droit d'1 px : il sortait des grands coins. */
.une.verre::after { left: 36px; right: 36px; }
/* isolation : sans elle, Safari ne rogne pas les coins pendant le zoom au survol. */
.une-img { position: relative; isolation: isolate; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 23px; background: var(--bg-deep); }
.une-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.une-c { display: grid; align-content: center; justify-items: start; gap: 12px; padding: 22px 16px 16px; }
.une-c h2 { max-width: 16ch; font-size: clamp(30px, 3.5vw, 46px); line-height: 1.06; color: var(--ink); }
.une-chapo { max-width: 44ch; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.une-meta { font-size: 14px; color: var(--ink-3); }
.une-lire { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin-top: 2px; font-weight: 600; color: var(--accent-ink); }
.une-lire svg { width: 16px; height: 16px; transition: transform 240ms var(--ease); }
@media (min-width: 900px) {
  .une { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 36px; }
  .une-img { aspect-ratio: auto; min-height: 450px; border-radius: 25px; }
  .une-c { padding: 30px 28px 30px 30px; }
}

/* Les cartes : une feuille blanche (pas de flou : il y en a jusqu'à douze),
   la photo arrondie dedans. */
.jr-tous { padding-top: 56px; }
.cartes-art { list-style: none; display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 640px) { .cartes-art { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cartes-art { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.carte-art { display: flex; flex-direction: column; height: 100%; padding: 8px; border-radius: 24px; text-decoration: none; color: inherit;
  background: rgba(255,255,255,.84); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 18px 40px -28px rgba(90,50,80,.45);
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease); }
.ca-img { isolation: isolate; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 17px; background: var(--bg-deep); }
.ca-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.ca-c { flex: 1; display: grid; grid-template-rows: auto auto 1fr; justify-items: start; gap: 8px; padding: 14px 10px 8px; }
.ca-c h3 { font-family: Poppins, Archivo, system-ui, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.28; letter-spacing: -.015em; color: var(--ink); }
.ca-meta { align-self: end; font-size: 13px; color: var(--ink-3); }
@media (hover: hover) {
  .une:hover .une-img img, .carte-art:hover .ca-img img { transform: scale(1.03); }
  .une:hover .une-lire svg { transform: translateX(3px); }
  .carte-art:hover { transform: translateY(-3px); box-shadow: 0 26px 48px -28px rgba(90,50,80,.5); }
}
.une:focus-visible, .carte-art:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Les articles liés : trois cartes de front dès qu'il y a la place. */
@media (min-width: 640px) and (max-width: 759px) { .cartes-art.lies { grid-template-columns: 1fr; } }
@media (min-width: 760px) { .cartes-art.lies { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (max-width: 759px) {
  .art-tete { padding-top: 14px; }
  .art-tete h1 { font-size: min(32px, calc((100vw - 2 * var(--gut)) / 10.5)); }
  .art-tete .chapo { font-size: 17px; }
  /* La photo prend la largeur de la feuille, presque d'un bord à l'autre. */
  .art-photo { margin: 20px calc(var(--gut) * -1 + 6px) 0; }
  .art-photo img { border-radius: 20px; }
  .art-photo figcaption { padding: 0 10px; }
  .prose .art-fig { margin-top: 24px; }
  .art-fig img { border-radius: 14px; }
  /* Au téléphone la feuille va presque d'un bord à l'autre : 342 px de
     texte sur un écran de 390 au lieu de 306. */
  .art-corps { margin: 22px calc(var(--gut) * -1 + 6px) 0; padding: 26px 18px 30px; border-radius: 22px; }
  .prose { font-size: 17px; line-height: 1.68; }
  .prose > * + * { margin-top: 16px; }
  .prose h2 { margin-top: 38px; }
  .prose h3 { margin-top: 28px; font-size: 18px; }
  .prose blockquote { padding: 14px 16px; font-size: 17.5px; }
  .art-suite { padding-top: 28px; }
  .art-cta { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 8px 20px 24px; }
  .art-cta img { width: 150px; grid-row: auto; margin: 0 0 -14px; }
  .art-cta .chapo { margin-left: auto; margin-right: auto; }
  .art-cta .btn { justify-self: stretch; }

  .ph-journal .une { margin-top: 22px; }
  .une { margin: 16px calc(var(--gut) * -1 + 6px) 0; padding: 6px; border-radius: 28px; }
  .une-img { border-radius: 22px; }
  .une-c { gap: 10px; padding: 16px 14px 8px; }
  .une-c h2 { font-size: min(32px, calc((100vw - 2 * var(--gut)) / 10.5)); }
  .une-chapo { font-size: 16px; }
  .jr-tous { padding-top: 44px; }
  /* Les articles liés au téléphone : une vignette carrée et le titre à côté. */
  .lies .carte-art { flex-direction: row; align-items: center; gap: 4px; padding: 7px; border-radius: 22px; }
  .lies .ca-img { width: 104px; flex: none; aspect-ratio: 1; border-radius: 16px; }
  .lies .ca-c { gap: 6px; padding: 4px 8px 4px 10px; }
  .lies .ca-c h3 { font-size: 15.5px; }
  .lies .ca-c .rub { font-size: 10.5px; padding: 3px 8px; }
  .lies .ca-meta { font-size: 12.5px; }
}

/* ══ Où en est Seliia (paliers) ═══════════════════════════════════════════ */
/* Le héros (05/10) : le prochain palier devant, les deux suivants derrière,
   dans la scène commune des pages intérieures (css/pages.css). */
.sc-pal { display: grid; gap: .3em; }
.sc-pal .seuil { font-size: .8em; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sc-pal b { font-size: 1.1em; line-height: 1.2; }
.sc-pal.loin { opacity: .6; }
.sc-pal.pres { opacity: .82; }
.ph-v .pal-prochain { display: block; padding: 4.6cqw 5cqw; border-radius: 5.5cqw; }
.ph-v .pal-prochain h2 { font-size: 1.6em; line-height: 1.12; margin-top: .45em; }
.ph-v .pal-prochain p { font-size: .95em; margin-top: .55em; }
.ph-v .pal-h, .ph-v .pal-cible { font-size: .8em; }
.ph-v .pal-jauge { height: 2.6cqw; margin: 3cqw 0 0; }
.sc-compte .pal-n { display: inline; font-size: 1.45em; line-height: 1; color: var(--accent-ink); }
.sc-compte .pal-l { display: inline; margin: 0; font-size: 1em; font-weight: 700; color: var(--ink); }
.sc-compte .pal-c { display: inline; margin: 0; padding: 0; font-size: .9em; background: none; }
.pal-n, .pal-l, .pal-c { font-variant-numeric: tabular-nums; }

.pal-prochain { display: flex; flex-direction: column; justify-content: center; padding: 26px 28px; border-radius: 26px; }
.pal-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pal-h { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.pal-cible { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.pal-jauge { height: 12px; margin: 12px 0 14px; overflow: hidden; border-radius: 99px; background: rgba(232,68,127,.14); }
.pal-jauge i { display: block; width: 0; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--rose-clair), var(--rose));
  transition: width 1.4s var(--ease); }
.pal-prochain h2 { margin-top: 10px; max-width: none; font-size: clamp(22px, 2.6vw, 28px); }
.pal-prochain p { margin-top: 8px; font-size: 15.5px; color: var(--ink-2); }

/* La frise : Seli saute de palier en palier quand on les dépasse. */
.voy { position: relative; margin-top: 36px; padding-top: 16px; }
.voy-rail { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; border-radius: 99px; background: rgba(36,27,34,.08); }
.voy-rail i { position: absolute; left: 0; top: 0; width: 100%; height: var(--avance, 0px); border-radius: 99px;
  background: linear-gradient(180deg, var(--rose-clair), var(--rose)); transition: height .7s var(--ease); }
.voy-seli { position: absolute; z-index: 3; left: 50%; top: var(--avance, 0px); width: 62px; height: 62px; margin: -31px 0 0 -31px;
  display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #fff; pointer-events: none;
  box-shadow: 0 10px 24px -8px rgba(232,68,127,.45), 0 0 0 4px var(--bg); transition: top .7s var(--ease); }
/* Seli est plus bas que le centre de son image : on la remonte de 7 %. */
.voy-seli img { position: absolute; left: 50%; top: 50%; width: 104px; max-width: none; height: auto; transform: translate(-50%, -57%); }
.voy-etape { position: relative; width: calc(50% - 44px); margin-bottom: 22px; padding: 20px 22px 18px; border-radius: 22px;
  opacity: 0; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.voy-etape:last-child { margin-bottom: 0; }
.voy-etape + .voy-etape { margin-top: -30px; }
.voy-etape.g { margin-right: auto; transform: translateX(-26px); }
.voy-etape.d { margin-left: auto; transform: translateX(26px); }
.voy-etape.visible { opacity: 1; transform: none; }
/* Point et trait sont de vrais éléments : .verre occupe ::before et ::after. */
.voy-pt { position: absolute; z-index: 2; top: 28px; width: 16px; height: 16px; border-radius: 50%; background: #E4D6DD; box-shadow: 0 0 0 4px var(--bg); }
.voy-lien { position: absolute; top: 35px; width: 36px; height: 2px; background: rgba(36,27,34,.10); }
.voy-etape.g .voy-pt { left: calc(100% + 36px); }
.voy-etape.g .voy-lien { left: 100%; }
.voy-etape.d .voy-pt { right: calc(100% + 36px); }
.voy-etape.d .voy-lien { right: 100%; }
.voy-etape.atteint .voy-pt { background: var(--accent); }
.voy-etape.atteint .voy-lien { background: rgba(232,68,127,.45); }
.voy-etape.suivant .voy-pt { background: #fff; border: 3px solid var(--accent); box-shadow: 0 0 0 4px var(--bg), 0 0 0 10px rgba(232,68,127,.14); }
.voy-etape.suivant { box-shadow: 0 22px 50px -24px rgba(232,68,127,.45), inset 0 1px 0 rgba(255,255,255,.85); }
.voy-seuil { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.voy-seuil b { margin-right: 6px; font-size: 26px; letter-spacing: -.03em; color: var(--ink-2); }
.voy-nom { margin-top: 6px; font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; color: var(--ink-2); text-wrap: balance; }
.voy-detail { margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--ink-3); }
.voy-detail:empty { display: none; }
.voy-etat { display: inline-block; margin-top: 10px; padding: 5px 9px; border-radius: 99px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); background: rgba(232,68,127,.10); }
.voy-etape.atteint .voy-seuil b, .voy-etape.suivant .voy-seuil b, .voy-etape.atteint .voy-nom, .voy-etape.suivant .voy-nom { color: var(--ink); }
.voy-etape.atteint .voy-seuil, .voy-etape.suivant .voy-seuil { color: var(--accent-ink); }

.pal-pourquoi { max-width: 640px; margin: 44px auto 0; padding: 22px 26px; border-radius: 22px; }
.pal-pourquoi h3 { font-size: 18px; font-weight: 700; }
.pal-pourquoi p { margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.pal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.pal-copie { width: 100%; min-height: 18px; text-align: center; font-size: 13.5px; color: var(--accent-ink); }
.final .seli-deco { width: 170px; margin: 0 auto -8px; display: block; }

@media (max-width: 759px) {
  .pal-prochain { padding: 20px 18px; }
  .voy { margin-top: 22px; }
  .voy-rail, .voy-seli { left: 26px; }
  .voy-seli { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
  .voy-seli img { width: 88px; }
  /* 28 paliers au téléphone : cartes serrées et visibles d'emblée, rien
     n'attend le défilement. */
  .voy-etape, .voy-etape.g, .voy-etape.d, .voy-etape.visible { width: calc(100% - 60px); margin: 0 0 10px 60px;
    opacity: 1; transform: none; transition: none; padding: 13px 16px 12px; border-radius: 18px; }
  .voy-etape + .voy-etape { margin-top: 0; }
  .voy-etape.g .voy-pt, .voy-etape.d .voy-pt { left: -42px; right: auto; top: 20px; }
  .voy-etape.g .voy-lien, .voy-etape.d .voy-lien { left: -34px; right: auto; width: 30px; top: 27px; }
  .voy-seuil b { font-size: 21px; }
  .voy-nom { margin-top: 2px; font-size: 16px; }
  .voy-detail { margin-top: 3px; font-size: 13.5px; }
  .voy-etat { margin-top: 8px; }
  .pal-pourquoi { margin-top: 28px; padding: 18px; }
  .pal-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pal-jauge i, .voy-rail i, .voy-seli { transition: none; }
  .voy-etape { opacity: 1; transform: none; transition: none; }
}

/* ══ Devenir partenaire ═══════════════════════════════════════════════════ */
/* Quatre profils en panneaux de couleur, en relief comme les espaces de
   l'accueil (le pastel plat a été refusé). */
.profils { display: grid; gap: 12px; margin-top: 24px; }
@media (min-width: 760px) { .profils { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1100px) { .profils { grid-template-columns: repeat(4, 1fr); } }
.profil { display: flex; flex-direction: column; gap: 8px; min-height: 196px; padding: 20px 20px 18px; border-radius: 26px; color: #fff;
  box-shadow: 0 12px 26px -16px rgba(60,20,45,.55), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.08); }
.profil svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.profil b { margin-top: 6px; font-family: Poppins, Archivo, system-ui, sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.profil p { font-size: 15px; line-height: 1.45; font-weight: 500; opacity: .95; }
.profil a { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; font-size: 14.5px;
  color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.profil a svg { width: 15px; height: 15px; }
/* En pâle depuis le 05/10 (Antoine : ni vert foncé ni rose foncé) : le fond
   clair, l'encre dessus, la couleur dans l'icône. */
.p-ecole  { --teinte: var(--rose); --teinte-t: var(--rose-encre); background: linear-gradient(150deg, #FFF0F5, #FCDDEA); }
.p-bde    { --teinte: var(--violet); --teinte-t: var(--violet-encre); background: linear-gradient(150deg, #F4F0FE, #E5DCFA); }
.p-asso   { --teinte: var(--vert); --teinte-t: var(--vert-encre); background: linear-gradient(150deg, #EEF9F3, #D9F2E5); }
.p-marque { --teinte: var(--jaune); --teinte-t: var(--jaune-encre); background: linear-gradient(150deg, #FFF8E4, #FFEDBD); }
.profil { color: var(--ink); box-shadow: 0 14px 30px -20px rgba(60,20,45,.42), inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.6); }
.profil > svg { color: var(--teinte); }
.profil p { color: var(--ink-2); opacity: 1; }
.profil a { color: var(--teinte-t); }
.sc-pan:is(.p-ecole, .p-bde, .p-asso, .p-marque) { color: var(--ink); }
.sc-pan:is(.p-ecole, .p-bde, .p-asso, .p-marque) .sc-ico { background: var(--teinte); color: #fff; }
.sc-pan:is(.p-ecole, .p-bde, .p-asso, .p-marque) .fond { color: var(--teinte); }

@media (max-width: 759px) {
  /* Au téléphone, chaque carte devient une ligne : l'icône, puis le texte. */
  .serree .carte { display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; padding: 16px; }
  .serree .ico-r { grid-row: span 2; margin: 0; }
  .serree .txt { margin-top: 0 !important; font-size: 15px; }
  .profil { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 6px 12px; min-height: 0; padding: 16px 18px; }
  .profil b { margin-top: 0; font-size: 19px; }
  .profil p, .profil a { grid-column: 1 / -1; }
  .profil a { margin-top: -4px; }
}