/* ============================================================
   Passerelles — vers les spécialités et l'orientation
   Design system commun au hub et aux cinq modules.
   Autonome : ne dépend d'aucune classe de philo.css.
   ============================================================ */

:root {
  --ps-ink: #1b1a2e;
  --ps-ink-2: #3a3856;
  --ps-ink-3: #6b6890;
  --ps-paper: #f6f5f1;
  --ps-white: #ffffff;
  --ps-line: rgba(27, 26, 46, .12);
  --ps-line-2: rgba(27, 26, 46, .08);
  --ps-shadow: 0 2px 14px rgba(27, 26, 46, .06);
  --ps-shadow-lg: 0 10px 40px rgba(27, 26, 46, .12);
  --ps-radius: 16px;

  /* Accents par passerelle */
  --ps-esth: #a8324a;   /* littérature & danse — grenat */
  --ps-hist: #b4531a;   /* HGGSP — terre de sienne */
  --ps-ses:  #1f6f6b;   /* SES — vert-bleu */
  --ps-droit:#2f4a86;   /* droit — bleu profond */
  --ps-educ: #6a4a9c;   /* éducation — violet */
  --ps-anthro:#8a5a24;  /* anthropologie — terre brûlée */

  --ps-accent: var(--ps-droit);
  --ps-accent-soft: color-mix(in srgb, var(--ps-accent) 12%, white);
  --ps-accent-line: color-mix(in srgb, var(--ps-accent) 30%, white);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ps-paper);
  color: var(--ps-ink);
  font: 400 16px/1.68 'Source Sans 3', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }

.ps-wrap { max-width: 920px; margin: 0 auto; padding: 20px 20px 96px; }
.ps-wrap.wide { max-width: 1040px; }

/* ---------- Fil d'ariane / retour ---------- */
.ps-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font: 600 13px 'Source Sans 3', sans-serif; margin: 4px 0 18px;
}
.ps-top a { color: var(--ps-ink-3); text-decoration: none; }
.ps-top a:hover { color: var(--ps-accent); }
.ps-top .sep { color: var(--ps-line); }

/* ---------- Hero ---------- */
.ps-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--ps-accent) 16%, transparent), transparent 60%),
    var(--ps-white);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius);
  padding: 30px 32px;
  box-shadow: var(--ps-shadow);
  margin-bottom: 22px;
}

/* Une image n'illustre pas le décor : elle formule le problème de la passerelle. */
.ps-hero.ps-hero-art {
  min-height:285px;
  padding-right:min(49%, 430px);
  background-image:linear-gradient(90deg, rgba(255,253,249,.98) 0%, rgba(255,253,249,.92) 39%, rgba(255,253,249,.40) 61%, rgba(255,253,249,.04) 100%), var(--ps-hero-art);
  background-repeat:no-repeat;
  background-size:100% 100%, cover;
  background-position:center, center;
}
.ps-hero.ps-hero-art > * { position:relative; z-index:1; }
@media (max-width:700px) {
  .ps-hero.ps-hero-art { min-height:250px; padding-right:24px; background-image:linear-gradient(rgba(255,253,249,.94), rgba(255,253,249,.76)), var(--ps-hero-art); background-position:center, 70% center; }
}
.ps-hero.hero2 {
  isolation:isolate;
  background:
    radial-gradient(circle at 89% 14%, rgba(180,83,26,.16), transparent 19%),
    radial-gradient(circle at 74% 100%, rgba(47,74,134,.12), transparent 28%),
    linear-gradient(135deg, #fffdf9, #f7f4ee 72%);
  box-shadow:0 18px 42px rgba(37,31,44,.09);
  background-image:linear-gradient(90deg, rgba(255,253,249,.96) 0%, rgba(255,253,249,.72) 48%, rgba(255,253,249,.08) 100%), url('../images/aventures-planche.png');
  background-repeat:no-repeat; background-size:100% 100%, 200% 300%; background-position:center, 100% 0;
}
.ps-hero.hero2::before { content:'↝'; position:absolute; z-index:-1; right:32px; top:8px; color:rgba(47,74,134,.13); font:italic 180px/.8 Georgia,serif; transform:rotate(-8deg); }
.ps-hero.hero2::after { content:'choisissez votre porte'; position:absolute; right:30px; bottom:20px; font:700 10px 'Source Sans 3',sans-serif; text-transform:uppercase; letter-spacing:.13em; color:rgba(27,26,46,.38); }
.ps-hero .ps-kicker {
  font: 700 11.5px 'Source Sans 3', sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ps-accent); margin: 0 0 8px;
}
.ps-hero h1 {
  font: 600 clamp(26px, 4.4vw, 38px)/1.12 'Source Serif 4', Georgia, serif;
  margin: 0 0 12px; color: var(--ps-ink);
}
.ps-hero .ps-lede {
  font-size: 17px; color: var(--ps-ink-2); max-width: 62ch; margin: 0;
}
.ps-hero .ps-lede em { font-style: italic; color: var(--ps-ink); }

/* pastilles spécialité */
.ps-spes { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.ps-spe {
  font: 700 12px 'Source Sans 3', sans-serif;
  padding: 5px 12px; border-radius: 999px;
  background: var(--ps-accent-soft); color: var(--ps-accent);
  border: 1px solid var(--ps-accent-line);
}

/* ---------- Sections ---------- */
.ps-sec {
  background: var(--ps-white); border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius); padding: 26px 30px; margin: 18px 0;
  box-shadow: var(--ps-shadow);
}
.ps-sec > h2 {
  font: 600 22px/1.25 'Source Serif 4', Georgia, serif; margin: 0 0 6px;
  color: var(--ps-ink);
}
.ps-sec > h2 .n { color: var(--ps-accent); }
.ps-sec .ps-sub {
  font: italic 500 15px/1.5 'Source Serif 4', Georgia, serif;
  color: var(--ps-ink-3); margin: 0 0 16px;
}
.ps-sec h3 {
  font: 700 15px 'Source Sans 3', sans-serif; letter-spacing: .01em;
  margin: 22px 0 6px; color: var(--ps-ink-2);
}
.ps-sec p { margin: 0 0 13px; }
.ps-sec p:last-child { margin-bottom: 0; }
.ps-sec a { color: var(--ps-accent); text-decoration: none; border-bottom: 1px solid var(--ps-accent-line); }
.ps-sec a:hover { border-bottom-color: var(--ps-accent); }
.ps-lead { font-size: 17px; color: var(--ps-ink-2); }

blockquote.ps-cite {
  margin: 16px 0; padding: 12px 18px; border-left: 3px solid var(--ps-accent-line);
  background: var(--ps-accent-soft); border-radius: 0 10px 10px 0;
  font: italic 500 16px/1.55 'Source Serif 4', Georgia, serif; color: var(--ps-ink);
}
blockquote.ps-cite cite {
  display: block; margin-top: 6px; font: 600 13px 'Source Sans 3', sans-serif;
  font-style: normal; color: var(--ps-ink-3);
}

/* ---------- Badges notions / repères ---------- */
.ps-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 2px; }
.ps-tag {
  font: 600 12px 'Source Sans 3', sans-serif; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--ps-line); background: #fbfbfd; color: var(--ps-ink-2);
}
.ps-tag.notion { border-color: var(--ps-accent-line); color: var(--ps-accent); background: var(--ps-accent-soft); }
.ps-tag.repere { font-style: normal; }

/* ---------- Figures / portraits ---------- */
.ps-figrow { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0; }
.ps-fig {
  flex: 1 1 130px; max-width: 160px; text-align: center;
  background: #fbfbfd; border: 1px solid var(--ps-line-2); border-radius: 12px;
  padding: 10px; box-shadow: var(--ps-shadow);
}
.ps-fig img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 9px;
  filter: grayscale(.15) contrast(1.02);
}
.ps-fig figcaption {
  margin-top: 8px; font: 700 13px 'Source Sans 3', sans-serif; color: var(--ps-ink);
}
.ps-fig .rle { display: block; font: 500 11.5px 'Source Sans 3', sans-serif; color: var(--ps-ink-3); margin-top: 2px; }

/* ---------- Cartes du hub ---------- */
.ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 20px 0; }
a.ps-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--ps-white); border: 1px solid var(--ps-line); border-radius: var(--ps-radius);
  overflow: hidden; box-shadow: var(--ps-shadow); transition: transform .15s ease, box-shadow .15s ease;
  border-top: 4px solid var(--cardc, var(--ps-accent));
}
a.ps-card:hover { transform: translateY(-3px); box-shadow: var(--ps-shadow-lg); }
.ps-card .ps-card-emoji { font-size: 30px; padding: 18px 20px 0; }
.ps-card .ps-card-body { padding: 8px 20px 20px; }
.ps-card h3 { font: 600 19px 'Source Serif 4', Georgia, serif; margin: 6px 0 4px; color: var(--ps-ink); }
.ps-card .ps-card-spe { font: 700 12px 'Source Sans 3', sans-serif; color: var(--cardc, var(--ps-accent)); margin-bottom: 8px; }
.ps-card p { font-size: 14px; color: var(--ps-ink-2); margin: 0 0 12px; line-height: 1.55; }
.ps-card .ps-card-go { margin-top: auto; font: 700 13px 'Source Sans 3', sans-serif; color: var(--cardc, var(--ps-accent)); }

/* ---------- Écoute ---------- */
.ps-ecoute { background: linear-gradient(180deg, #fbfaf6, var(--ps-white)); border-color: var(--ps-line); }
.ps-ecoute .ps-coffret {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--ps-line-2);
}
.ps-ecoute .ps-coffret:first-of-type { border-top: none; }
.ps-disc {
  flex: 0 0 54px; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #2b2a3d 0 30%, #4a4860 31% 33%, #2b2a3d 34% 100%);
  position: relative; box-shadow: var(--ps-shadow);
}
.ps-disc::after { content: ""; position: absolute; inset: 44% 44%; background: var(--ps-paper); border-radius: 50%; }
.ps-coffret .meta h4 { margin: 0 0 2px; font: 700 15px 'Source Sans 3', sans-serif; }
.ps-coffret .meta .who { font-size: 13px; color: var(--ps-ink-3); margin: 0 0 6px; }
.ps-coffret .meta .pistes { font-size: 13.5px; color: var(--ps-ink-2); margin: 0; }
.ps-note-audio {
  margin-top: 14px; font-size: 12.5px; color: var(--ps-ink-3); font-style: italic;
  padding: 10px 14px; background: #fbf6ec; border: 1px solid rgba(180,83,9,.22); border-radius: 10px;
}

/* ---------- Activité / atelier interactif ---------- */
.ps-atelier {
  border: 1px solid var(--ps-accent-line);
  background: linear-gradient(180deg, var(--ps-accent-soft), var(--ps-white) 70%);
}
.ps-atelier > h2::before { content: "✦ "; color: var(--ps-accent); }
.ps-field { width: 100%; font: 400 15px/1.6 'Source Sans 3', sans-serif;
  padding: 12px 14px; border: 1px solid var(--ps-line); border-radius: 12px; resize: vertical;
  background: #fff; color: var(--ps-ink); }
.ps-field:focus { outline: 2px solid var(--ps-accent-line); border-color: var(--ps-accent); }
.ps-btn {
  font: 700 14px 'Source Sans 3', sans-serif; padding: 11px 20px; border-radius: 999px;
  border: none; background: var(--ps-accent); color: #fff; cursor: pointer;
  box-shadow: var(--ps-shadow); transition: filter .15s ease;
}
.ps-btn:hover { filter: brightness(1.08); }
.ps-btn:disabled { opacity: .55; cursor: progress; }
.ps-btn.ghost { background: #fff; color: var(--ps-accent); border: 1px solid var(--ps-accent-line); box-shadow: none; }
.ps-btnrow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.ps-hint { font-size: 13px; color: var(--ps-ink-3); }
.ps-retour {
  margin-top: 14px; padding: 16px 18px; border-radius: 12px; background: #fff;
  border: 1px solid var(--ps-line); font-size: 15px; line-height: 1.62;
}
.ps-retour h4 { margin: 0 0 8px; font: 700 14px 'Source Sans 3', sans-serif; color: var(--ps-accent); }
.ps-retour.err { border-color: rgba(180,20,40,.3); background: #fdf2f4; }

/* ---------- Widgets interactifs génériques ---------- */
.ps-widget { border: 1px solid var(--ps-line); border-radius: 14px; padding: 18px; background: #fff; margin: 16px 0; }
.ps-widget-title { font: 700 13px 'Source Sans 3', sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--ps-ink-3); margin: 0 0 12px; }

/* timeline (esthétique) */
.ps-timeline { display: flex; gap: 2px; border-radius: 10px; overflow: hidden; border: 1px solid var(--ps-line); }
.ps-tl-step { flex: 1; padding: 10px 6px; text-align: center; cursor: pointer; background: #fbfbfd;
  font: 600 12px 'Source Sans 3', sans-serif; color: var(--ps-ink-3); border: none; transition: background .15s, color .15s; }
.ps-tl-step[aria-selected="true"] { background: var(--ps-accent); color: #fff; }
.ps-tl-panel { margin-top: 14px; min-height: 90px; }

/* slider */
.ps-slider { width: 100%; accent-color: var(--ps-accent); }
.ps-slider-labels { display: flex; justify-content: space-between; font: 600 12px 'Source Sans 3', sans-serif; color: var(--ps-ink-3); margin-top: 4px; }

/* matrice de gains (SES) */
.ps-matrix { border-collapse: separate; border-spacing: 6px; margin: 8px auto; }
.ps-matrix th { font: 700 12px 'Source Sans 3', sans-serif; color: var(--ps-ink-2); padding: 4px 8px; }
.ps-cell { width: 128px; height: 74px; border-radius: 10px; background: #fbfbfd; border: 1px solid var(--ps-line);
  cursor: pointer; font: 600 13px 'Source Sans 3', sans-serif; color: var(--ps-ink-2); transition: all .12s; padding: 6px; }
.ps-cell:hover { border-color: var(--ps-accent-line); }
.ps-cell.sel { background: var(--ps-accent); color: #fff; border-color: var(--ps-accent); transform: scale(1.03); }
.ps-cell .pay { display: block; font-size: 18px; font-weight: 700; margin-top: 2px; }

/* pyramide des normes (droit) — SVG stylée dans la page */
.ps-svg-wrap { text-align: center; margin: 10px 0; }
.ps-svg-wrap svg { max-width: 100%; height: auto; }

/* deux colonnes */
.ps-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.ps-2col .col { background: #fbfbfd; border: 1px solid var(--ps-line-2); border-radius: 12px; padding: 14px 16px; }
.ps-2col .col h4 { margin: 0 0 6px; font: 700 14px 'Source Sans 3', sans-serif; }
@media (max-width: 640px) { .ps-2col { grid-template-columns: 1fr; } }

/* liens exercices */
.ps-exos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
a.ps-exo {
  font: 700 13px 'Source Sans 3', sans-serif; padding: 9px 15px; border-radius: 999px;
  background: #fff; color: var(--ps-accent); border: 1px solid var(--ps-accent-line);
  text-decoration: none;
}
a.ps-exo:hover { background: var(--ps-accent-soft); }

/* callout prof/inspection */
.ps-prof {
  border: 1px dashed var(--ps-accent-line); background: var(--ps-accent-soft);
  border-radius: 12px; padding: 14px 18px; font-size: 13.5px; color: var(--ps-ink-2); margin: 16px 0;
}
.ps-prof strong { color: var(--ps-accent); }

footer.ps-foot { text-align: center; color: var(--ps-ink-3); font-size: 12.5px; margin-top: 26px; }

/* ============================================================
   Enrichissement — corpus de textes (domaine public) & documents
   ============================================================ */
.ps-corpus { background: linear-gradient(180deg, #fbfaf6, var(--ps-white)); }
.ps-corpus .ps-doc-note { font-size: 12.5px; color: var(--ps-ink-3); font-style: italic; margin-top: 10px; }
.ps-texte {
  border: 1px solid var(--ps-line); border-left: 4px solid var(--ps-accent-line);
  border-radius: 0 12px 12px 0; padding: 16px 20px; margin: 14px 0; background: #fff;
}
.ps-texte .src { font: 700 12.5px 'Source Sans 3', sans-serif; color: var(--ps-accent); margin: 0 0 8px; letter-spacing: .01em; }
.ps-texte .corps { font: 400 16px/1.7 'Source Serif 4', Georgia, serif; color: var(--ps-ink); margin: 0; }
.ps-texte .corps .v { display: block; }              /* vers */
.ps-texte .q {
  margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--ps-line);
  font: 600 13.5px 'Source Sans 3', sans-serif; color: var(--ps-ink-2);
}
.ps-texte .q::before { content: "Lecture — "; color: var(--ps-accent); }

/* Cadre « document d'époque » (SVG dessiné, pédagogique) */
.ps-doc {
  margin: 16px 0; text-align: center;
}
.ps-doc svg { max-width: 100%; height: auto; border-radius: 10px; box-shadow: var(--ps-shadow); }
.ps-doc figcaption {
  margin-top: 8px; font: italic 500 13px 'Source Serif 4', Georgia, serif; color: var(--ps-ink-3);
}
.ps-doc .repro { font-style: normal; font-size: 11.5px; color: var(--ps-ink-3); }

/* Galerie d'images déposées par le professeur (img/) */
.ps-gal { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-top:8px; }
.ps-gal-item { margin:0; background:#fff; border:1px solid var(--ps-line); border-radius:12px; overflow:hidden; box-shadow:var(--ps-shadow); }
.ps-gal-item img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.ps-gal-item figcaption { padding:8px 10px; font:500 12.5px 'Source Sans 3',sans-serif; color:var(--ps-ink-2); }
.ps-gal-vide { font-size:12.5px; color:var(--ps-ink-3); font-style:italic; }

/* Sous-titres de groupes sur le hub */
.ps-groupe {
  font: 600 15px 'Source Sans 3', sans-serif; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ps-ink-3); margin: 26px 4px 2px; padding-bottom: 6px;
  border-bottom: 1px solid var(--ps-line);
}

/* ══ hub des passerelles : un sujet, deux portes ══ */
.ps-hero.hero2 { padding-bottom: 24px; }
.ps-duo { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; margin: 20px 0 10px; }
@media (max-width: 800px) { .ps-duo { grid-template-columns: 1fr; } .ps-duo-fleche { transform: rotate(90deg); } }
.ps-duo-c { display: flex; gap: 12px; padding: 15px 17px; border-radius: 14px; border: 1px solid var(--ps-line); background: #fff; }
.ps-duo-c { box-shadow:0 6px 16px rgba(27,26,46,.045); }
.ps-duo-c .n { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 13px 'Source Sans 3', sans-serif; color: #fff; }
.ps-duo-recit .n { background: #1a1d2b; }
.ps-duo-atelier .n { background: var(--ps-accent, #4a5568); }
.ps-duo-c h3 { margin: 0 0 4px; font: 600 17px 'Source Serif 4', Georgia, serif; }
.ps-duo-c p { margin: 0; font: 400 13.5px/1.5 'Source Sans 3', sans-serif; color: var(--ps-ink-2); }
.ps-duo-fleche { display: grid; place-items: center; font-size: 22px; color: var(--ps-ink-3); }
.ps-hint-duo { margin: 6px 0 0; font: italic 400 14px 'Source Serif 4', Georgia, serif; color: var(--ps-ink-3); }

.ps-fam { margin: 30px 0 0; }
.ps-fam-tete { margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--ps-line); }
.ps-fam-tete { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; }
.ps-fam-tete h2 { margin: 0; font: 600 22px 'Source Serif 4', Georgia, serif; }
.ps-fam-tete p { margin: 3px 0 0; font: italic 400 15px 'Source Serif 4', Georgia, serif; color: var(--ps-ink-3); }
.ps-duos { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }

.ps-duo-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--ps-line); border-top: 4px solid var(--cardc); background: #fff; box-shadow: var(--ps-shadow); }
/* La gravure a sa propre bande, le titre se cale juste dessous : l'espace
   entre l'image et le récit ne dépend plus du nombre de lignes du titre. */
.ps-duo-head { display: flex; flex-wrap: wrap; gap: 0 13px; padding: 0 18px 12px; align-items: flex-start; }
.ps-duo-head::before { content: ''; flex: 0 0 calc(100% + 36px); width: calc(100% + 36px); height: 92px; margin: 0 -18px 12px;
  background-image: linear-gradient(180deg, rgba(20,35,42,.03), rgba(20,35,42,.26)), var(--cardart, none);
  background-color: color-mix(in srgb, var(--cardc) 22%, white);
  background-repeat: no-repeat; background-size: cover, cover; background-position: center, 74% 42%;
  border-bottom: 2px solid var(--cardc); }
/* L'émoji signait la carte ; la gravure le fait mieux, et certaines polices ne l'ont pas (□). */
.ps-duo-emoji { display: none; }
.ps-duo-spe { margin: 0 0 2px; font: 700 10.5px 'Source Sans 3', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--cardc); }
.ps-duo-head h3 { margin: 0; font: 600 19px/1.25 'Source Serif 4', Georgia, serif; color: var(--ps-ink); }
/* Le contenu se cale en haut : l'espace libre, s'il y en a, reste sous l'atelier — pas entre le titre et le récit. */
.ps-duo-portes { display: flex; flex-direction: column; gap: 1px; margin-top: 0; background: var(--ps-line); border-top: 1px solid var(--ps-line); }
a.ps-porte { display: block; padding: 12px 18px 13px; text-decoration: none; background: #fff; transition: background .15s; border: 0; }
a.ps-porte:hover { background: color-mix(in srgb, var(--cardc) 7%, white); }
.ps-porte-k { display: block; font: 700 10px 'Source Sans 3', sans-serif; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
.ps-porte-t { display: block; font: 600 15.5px 'Source Serif 4', Georgia, serif; color: var(--ps-ink); margin-bottom: 2px; }
.ps-porte-d { display: block; font: 400 12.5px/1.45 'Source Sans 3', sans-serif; color: var(--ps-ink-3); }
.ps-duo-portes > a.ps-porte.ps-porte-recit { background: #14161f; }
.ps-duo-portes > a.ps-porte.ps-porte-recit:hover { background: #242839; }
.ps-porte-recit .ps-porte-k { color: #e0b35a; }
.ps-porte-recit .ps-porte-t { color: #fff; }
.ps-porte-recit .ps-porte-d { color: #b9b8c8; }
.ps-porte-atelier .ps-porte-k { color: var(--cardc); }
.ps-porte-atelier .ps-porte-t::after { content: ' →'; color: var(--cardc); }

/* La carte annonce visuellement le problème avant les deux portes. */
#sciences .ps-duo-card:nth-child(1) { --cardart:url('../images/passerelles/maths-v1.png'); }
#sciences .ps-duo-card:nth-child(2) { --cardart:url('../images/passerelles/physique-v1.png'); }
#sciences .ps-duo-card:nth-child(3) { --cardart:url('../images/passerelles/acoustique-v1.png'); }
#sciences .ps-duo-card:nth-child(4) { --cardart:url('../images/passerelles/temps-v1.png'); }
#sciences .ps-duo-card:nth-child(5) { --cardart:url('../images/passerelles/svt-v1.png'); }
#sciences .ps-duo-card:nth-child(6) { --cardart:url('../images/passerelles/nsi-v1.png'); }
#sciences .ps-duo-card:nth-child(7) { --cardart:url('../images/passerelles/ingenieur-v1.png'); }
#societe .ps-duo-card:nth-child(1) { --cardart:url('../images/passerelles/hggsp-v1.png'); }
#societe .ps-duo-card:nth-child(2) { --cardart:url('../images/passerelles/ses-v1.png'); }
#societe .ps-duo-card:nth-child(3) { --cardart:url('../images/passerelles/droit-v1.png'); }
#societe .ps-duo-card:nth-child(4) { --cardart:url('../images/passerelles/education-v1.png'); }
#arts .ps-duo-card:nth-child(1) { --cardart:url('../images/passerelles/esthetique-v1.png'); }
#arts .ps-duo-card:nth-child(2) { --cardart:url('../images/passerelles/langues-v1.png'); }
#arts .ps-duo-card:nth-child(3) { --cardart:url('../images/passerelles/eps-v1.png'); }
#arts .ps-duo-card:nth-child(4) { --cardart:url('../images/passerelles/lca-v1.png'); }
#humain .ps-duo-card { --cardart:url('../images/passerelles/anthropologie-v1.png'); }

.ps-3col { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 8px 0 12px; }
.ps-3col > div { padding: 14px 16px; border-radius: 12px; background: var(--ps-accent-soft, #f4f4f7); }
.ps-3col h4 { margin: 0 0 5px; font: 700 11px 'Source Sans 3', sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--ps-ink-3); }
.ps-3col p { margin: 0; font-size: 14px; line-height: 1.55; }

/* ══ ancrage : notions posées par le cas, repères en situation, sujets armés ══ */
.ps-ancrage { background: linear-gradient(180deg, var(--ps-accent-soft), transparent 60%); }
.an-h3 { margin: 22px 0 6px; font: 700 12px 'Source Sans 3', sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ps-accent); }
.an-concret { font-style: italic; }
.an-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; align-items: start; }
.an-notion { min-width: 0; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--ps-line); }
.an-notion h4 { margin: 0 0 5px; font: 600 17px 'Source Serif 4', Georgia, serif; color: var(--ps-accent); }
.an-notion p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.an-reperes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; align-items: start; }
.an-repere { min-width: 0; padding: 14px 16px; border-radius: 12px; background: #fff;
  border: 1px solid var(--ps-line); border-left: 4px solid var(--ps-accent); }
.an-rep-t { margin: 0 0 4px; font: 700 15px 'Source Sans 3', sans-serif; color: var(--ps-ink); }
.an-rep-d { margin: 0 0 8px; font: 400 13.5px/1.5 'Source Sans 3', sans-serif; color: var(--ps-ink-3); }
.an-rep-c { margin: 0; padding-top: 8px; border-top: 1px dashed var(--ps-line);
  font-size: 14.5px; line-height: 1.6; }
.an-rep-c b { color: var(--ps-accent); }
.an-sujets { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 10px; }
.an-sujet { padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--ps-line); }
.an-suj-q { margin: 0 0 5px; font: 600 17px/1.35 'Source Serif 4', Georgia, serif; color: var(--ps-ink); }
.an-suj-p { margin: 0 0 7px; }
.an-tag { display: inline-block; padding: 2px 9px; border-radius: 999px;
  font: 700 10.5px 'Source Sans 3', sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.an-tag-accroche { background: rgba(180,83,26,.13); color: #8a3f12; }
.an-tag-exemple { background: rgba(31,111,107,.13); color: #17564f; }
.an-tag-objection { background: rgba(168,50,74,.12); color: #8a2439; }
.an-suj-c { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ps-ink-2); }
@media print { .ps-ancrage { background: none; } .an-notion, .an-repere, .an-sujet { border: 1px solid #ccc; } }

/* ══ Finition du hub ══════════════════════════════════════════════════
   Le héros : « seize ponts » — le pont de la passerelle Ingénieur, peint
   sujet à droite, crème à gauche ; le texte se pose sur le crème. Sur
   téléphone le voile devient vertical : texte en haut, image en bas.
   Les cartes : les deux portes sont incrustées dans la carte (marges,
   coins arrondis) au lieu de la couper d'un bord à l'autre.             */
.ps-hero.hero2 {
  min-height:300px; padding-right:min(46%, 420px);
  background-image:linear-gradient(90deg, rgba(255,253,249,.97) 0%, rgba(255,253,249,.94) 40%, rgba(255,253,249,.35) 60%, rgba(255,253,249,0) 78%), url('../images/passerelles/ingenieur-v1.png');
  background-repeat:no-repeat, no-repeat; background-size:100% 100%, cover; background-position:center, 76% 40%;
}
.ps-hero.hero2::before { display:none; }
.ps-hero.hero2::after { right:auto; left:32px; bottom:16px; }
.ps-hero.hero2 .ps-duo { position:relative; z-index:1; }
@media (max-width:800px) {
  .ps-hero.hero2 { padding:22px 20px 26px; min-height:0;
    background-image:linear-gradient(180deg, rgba(255,253,249,.97) 0%, rgba(255,253,249,.96) 46%, rgba(255,253,249,.72) 72%, rgba(255,253,249,.30) 100%), url('../images/passerelles/ingenieur-v1.png');
    background-size:100% 100%, cover; background-position:center, 70% 30%; }
  .ps-hero.hero2 .ps-duo { margin-top:16px; }
  .ps-hero.hero2::after { position:static; display:block; margin-top:14px; }
  .ps-hero h1 { font-size:26px; }
}
/* les portes, incrustées */
.ps-duo-portes { margin:2px 14px 14px; gap:8px; background:none; border-top:0; }
.ps-duo-portes > a.ps-porte { border-radius:10px; border:1px solid var(--ps-line); }
.ps-duo-portes > a.ps-porte.ps-porte-recit { border-color:#14161f; }
.ps-duo-portes > a.ps-porte.ps-porte-atelier { background:#fbf9f4; }
.ps-duo-portes > a.ps-porte.ps-porte-atelier:hover { background:color-mix(in srgb, var(--cardc) 8%, #fbf9f4); }
.ps-hero.hero2::after { display:none; }
@media (max-width:800px) { .ps-hero.hero2 .ps-hint-duo { display:none; } }

/* ══ Le héros des passerelles couvre toute la boîte ═══════════════════
   Les gravures ont leur crème à gauche : un voile léger suffit, et l'image
   se voit d'un bord à l'autre. Sur téléphone elle devient une bande pleine
   largeur au-dessus du texte.                                            */
.ps-hero.ps-hero-art {
  background-image:linear-gradient(90deg, rgba(255,253,249,.90) 0%, rgba(255,253,249,.78) 34%, rgba(255,253,249,.22) 54%, rgba(255,253,249,0) 70%), var(--ps-hero-art);
  background-size:100% 100%, cover; background-position:center, 72% center;
}
@media (max-width:700px) {
  .ps-hero.ps-hero-art { min-height:0; padding:214px 20px 22px; background-image:none; background-color:var(--ps-white); }
  .ps-hero.ps-hero-art::before { content:''; position:absolute; left:0; right:0; top:0; height:196px; z-index:0;
    background-image:linear-gradient(180deg, rgba(20,35,42,0) 55%, rgba(255,253,249,1) 100%), var(--ps-hero-art);
    background-repeat:no-repeat; background-size:100% 100%, cover; background-position:center, 70% 38%; }
}
.ps-hero.ps-hero-art { padding-right:min(54%, 470px); }