/* Le Cénacle — feuille de style unique. Charte : cahier des charges, section 3. */

@font-face { font-family: 'Geist'; src: url('/assets/fonts/Geist.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
/* Playfair Display (SIL Open Font License 1.1, voir /assets/fonts/playfair/LICENSE).
   Signature, titres de section et de page, schémas. */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/playfair/latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/playfair/latin-ext-700.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 900; font-display: swap; src: url('/assets/fonts/playfair/latin-900.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 900; font-display: swap; src: url('/assets/fonts/playfair/latin-ext-900.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; src: url('/assets/fonts/GeistMono.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  /* Palette ivoire et corail (octobre 2026). Corail vif : texte HTML de 24 px et plus seulement (jamais le texte
     d'un bouton, jamais dans les schémas SVG, où les mises en avant sont en corail profond). Corail profond : boutons, liens, étiquettes, menu actif. */
  --fond: #F7F1E8;
  /* Encre : texte courant (paragraphes, listes, tableaux) et fonds sombres, une seule valeur. */
  --encre: #3D0F1F;
  /* Titres, intertitres, logo et navigation. */
  --encre-titres: #5A1A2E;
  --corail-profond: #C8234F;
  --accent: var(--corail-profond);
  --accent-vif: #F0436B;
  /* Liens et étiquettes posés sur le rose : corail un peu plus foncé (5,1:1 au lieu de 4,2:1). */
  --accent-sur-rose: #B01D45;
  --gris: #6B6259;
  --filet: rgba(61, 15, 31, 0.18);
  --carte: transparent;
  --champ: #FCF9F4;
  --rose: #FFD6DE;
  --rose-pale: #FFEDF1;
  --note: #8A2E52;
  --marge: clamp(16px, 3vw, 40px);
  --mono: 'Geist Mono', ui-monospace, monospace;
  --titre: 'Playfair Display', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font-family: 'Geist', system-ui, sans-serif; overflow-x: hidden; }
a { color: var(--encre); }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }

.evitement { position: absolute; left: -9999px; top: 0; }
.evitement:focus { left: var(--marge); top: 8px; z-index: 10; padding: 10px 16px; background: var(--encre); color: #fff; border-radius: 6px; }

/* Machine à écrire et capitales : seulement les dates et les catégories (étiquettes, méta d'un billet,
   statut). Le menu, le pied, les liens « suite », le sommaire et les filtres sont en Geist normal. */
.etiquette, .ligne-etiquette, .tuile-etiquette, .ressource-meta, .badge-brouillon, .relecture {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em;
}
.fil, .entete, .pied, .lien-suite, .sommaire, .carte-source, .filtre { font-family: 'Geist', system-ui, sans-serif; text-transform: none; letter-spacing: 0; }
.entete-menu a { font-size: 15px; font-weight: 500; }
.lien-suite { font-size: 14px; font-weight: 600; }
.etiquette { margin: 0; font-size: 12px; color: var(--gris); }
.etiquette-accent { color: var(--accent); }
.fil { margin: 0; font-size: 12px; letter-spacing: .06em; color: var(--gris); }
.fil a { color: var(--gris); }

/* Boutons en pilule, cible tactile d'au moins 44 px */
.pilule { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 6px; text-decoration: none; font-weight: 500; }
.pilule-accent { background: var(--corail-profond); color: #fff; }
.pilule-accent:hover { color: #fff; background: #A11A3F; }
.pilule-contour { border: 1px solid var(--encre); }
.pilule-grande { min-height: 48px; padding: 0 30px; font-weight: 500; }

/* Bandeau de relecture et badge des brouillons */
.relecture { padding: 10px var(--marge); background: var(--encre); color: var(--rose); font-size: 12px; }
.badge-brouillon { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 3px 8px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); background: var(--carte); font-size: 11px; font-weight: 500; letter-spacing: .06em; line-height: 1.2; }

/* En-tête et pied */
.entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 16px; padding: 14px var(--marge); border-bottom: 1px solid var(--filet); font-size: 13px; }
.entete a { text-decoration: none; }
.entete-nom { display: flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--titre); font-weight: 900; font-size: 20px; text-transform: none; letter-spacing: -.01em; }
.entete-nom svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 1.5; }
.entete-menu { display: flex; gap: clamp(14px, 2.4vw, 32px); }
.entete-menu a { display: inline-flex; align-items: center; min-height: 44px; }
.entete-menu a[aria-current] { color: var(--accent); }
.entete .pilule { font-family: 'Geist', system-ui, sans-serif; text-transform: none; letter-spacing: 0; font-size: 15px; }
@media (max-width: 520px) {
  .entete-nom { order: 1; }
  .entete .pilule { order: 2; }
  .entete-menu { order: 3; width: 100%; gap: clamp(14px, 5vw, 24px); }
}
.pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 16px var(--marge); border-top: 1px solid var(--filet); font-size: 12px; color: var(--gris); }
.pied nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.pied a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gris); }

/* Blocs */
.bloc { padding: clamp(32px, 4.7vw, 70px) var(--marge); }
.bloc-filet { border-top: 1px solid var(--filet); }
.bloc-filet-noir { border-top: 1px solid var(--encre); }
.bloc-sombre { background: var(--encre); color: var(--fond); }
.bloc-sombre a { color: var(--fond); }
.bloc-sombre .etiquette { color: #A8A8A3; }
.bloc-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 20px; margin-bottom: 28px; }
.etroit { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: var(--marge); padding-right: var(--marge); }
.etroit-interne { max-width: 1200px; margin: 0 auto; }
.bloc.etroit { padding-left: var(--marge); padding-right: var(--marge); }
.page-haut { display: flex; flex-direction: column; gap: 24px; padding-bottom: 40px; }
.vide { margin: 0; font-size: 18px; color: var(--encre); }
.bloc-sombre .vide { color: #A8A8A3; }

/* Titres très grands, interlettrage serré */
h1, h2, h3 { font-weight: 600; }
.titre-section { margin: 0; font-family: var(--titre); font-size: clamp(28px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -.02em; font-weight: 900; }
.titre-rubrique { margin: 0; font-family: var(--titre); font-size: clamp(36px, 4.5vw, 56px); line-height: 1.05; letter-spacing: -.02em; font-weight: 900; }
.titre-page { margin: 0; max-width: 1000px; font-family: var(--titre); font-size: clamp(32px, 4vw, 56px); line-height: 1.08; letter-spacing: -.02em; font-weight: 900; overflow-wrap: break-word; }
.titre-bloc { margin: 0; font-family: var(--titre); font-size: clamp(26px, 3.2vw, 40px); line-height: 1.08; letter-spacing: -.02em; font-weight: 700; }
.intro { margin: 0; max-width: 640px; font-size: 17px; line-height: 1.55; color: var(--encre); }

/* Accueil : haut de page et animation du cercle */
/* --cercle : diamètre du cercle. Sur ordinateur, il est aussi limité par la hauteur de la fenêtre
   pour que menu, cercle, présentation et bouton tiennent sans défiler. */
.accueil-haut { --cercle: min(700px, 94vw); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: clamp(20px, 3vw, 36px) var(--marge) clamp(32px, 5vw, 56px); overflow: hidden; }
.accueil-infos { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.accueil-infos a { color: var(--gris); }
/* Le bloc a la taille du cercle : le cercle n'est jamais rogné par le haut de la section. */
.accueil-cercle { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: var(--cercle); }
.cercle { pointer-events: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--cercle); height: auto; overflow: visible; }
.cercle-trace { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 2200; stroke-dashoffset: 2200; animation: trace 1.8s cubic-bezier(.7, 0, .2, 1) .1s forwards; }
.cercle-orbite { transform-origin: 350px 350px; opacity: 0; animation: fondu .8s ease 1.4s forwards, tour 60s linear 2s infinite; }
.cercle-orbite text { font-family: var(--mono); font-size: 12px; letter-spacing: 4px; fill: var(--gris); text-transform: uppercase; }
.accueil-titre { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; font-weight: 400; }
.accueil-le { font-family: var(--mono); font-size: clamp(14px, 1.4vw, 18px); letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.accueil-nom { font-family: var(--titre); font-weight: 900; font-size: min(clamp(48px, 9vw, 128px), calc(var(--cercle) * .183)); line-height: .95; letter-spacing: -.02em; }
.accueil-accroche { margin: 0; text-wrap: balance; font-family: var(--titre); font-weight: 700; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -.01em; }
@media (min-width: 900px) {
  /* 310 px : menu, marges, ligne du haut et ligne du bas de l'accueil. */
  .accueil-haut { --cercle: min(700px, 94vw, max(360px, calc(100svh - 310px))); }
}
/* Téléphones et tablettes : environ 24 px entre le menu et le cercle. */
@media (max-width: 899px) {
  .accueil-haut { padding-top: 14px; }
}
/* Petits téléphones : accroche un peu plus petite, pour garder au moins 12 px avant les mots en orbite. */
@media (max-width: 359px) {
  .accueil-accroche { font-size: 16px; }
}
.accueil-bas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.accueil-bas p { margin: 0; max-width: 420px; font-size: 16px; line-height: 1.55; color: var(--encre); }
/* « Le Cénacle » et l'accroche apparaissent pendant le tracé, pas après */
.apparait { display: inline-block; opacity: 0; animation: monte .9s cubic-bezier(.2, .7, .2, 1) .5s forwards; }
.apparait-2 { opacity: 0; animation: monte .8s cubic-bezier(.2, .7, .2, 1) 1.1s forwards; }
.apparait-3 { opacity: 0; animation: monte .8s cubic-bezier(.2, .7, .2, 1) 1.5s forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes monte { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fondu { to { opacity: 1; } }
@keyframes tour { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cercle-trace, .cercle-orbite, .apparait, .apparait-2, .apparait-3 { animation: none; opacity: 1; stroke-dashoffset: 0; }
}

/* Accueil : cartes des deux rubriques */
.rubriques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.rubrique { display: flex; flex-direction: column; gap: 20px; padding: 28px; background: var(--carte); border: 1px solid var(--filet); border-top: 3px solid var(--accent); border-radius: 10px; text-decoration: none; transition: border-color .2s ease; }
.rubrique:hover { border-color: var(--accent); color: var(--encre); }
.rubrique-haut { display: flex; justify-content: space-between; align-items: center; }
.rubrique-num { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.rubrique-titre { font-family: var(--titre); font-weight: 900; font-size: clamp(24px, 2.4vw, 32px); line-height: 1; letter-spacing: -.02em; }
.rubrique-accroche { font-size: 17px; line-height: 1.45; }
.rubrique ul { margin: 0; padding: 18px 0 0; border-top: 1px solid var(--filet); list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--encre); }
.fleche { font-size: 24px; transition: transform .25s ease; }
.rubrique:hover .fleche, .ligne:hover .fleche { transform: translateX(8px); color: var(--accent); }

/* Filtres */
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filtre { min-height: 44px; padding: 0 16px; border-radius: 6px; border: 1px solid #8F857B; background: transparent; color: var(--encre); font-size: 12px; cursor: pointer; }
.filtre[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #fff; }
.filtres-sombres .filtre { border-color: #9C7884; color: var(--fond); }
.filtres-sombres .filtre[aria-pressed="true"] { background: var(--fond); border-color: var(--fond); color: var(--encre); }

/* Liste Métier : lignes */
.lignes { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--encre); }
.lignes li { border-bottom: 1px solid var(--filet); }
.ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px clamp(16px, 3vw, 48px); padding: 22px 0; text-decoration: none; }
.ligne:hover .ligne-etiquette { color: var(--accent); }
.ligne-etiquette { min-width: 110px; font-size: 12px; color: var(--gris); }
.ligne-etiquette-accent { color: var(--accent); }
.ligne-titre { flex: 1 1 280px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.1; letter-spacing: -.03em; font-weight: 500; }
.lien-suite { display: inline-flex; align-items: center; min-height: 44px; margin-top: 20px; font-size: 13px; }

/* Liste Leadership : tuiles sur fond noir */
.leadership-intro { margin: 0 0 32px; max-width: 760px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.3; letter-spacing: -.01em; font-weight: 500; }
/* Bandeau magenta en capitales, comme sur les visuels LinkedIn */
.leadership-intro span, .bandeau { display: block; width: fit-content; margin-top: 14px; padding: 8px 14px; background: var(--accent); color: var(--rose); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.bandeau { margin-bottom: 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.3; }
.tuiles { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); border-top: 1px solid #5A3443; border-left: 1px solid #5A3443; }
.tuiles li { border-right: 1px solid #5A3443; border-bottom: 1px solid #5A3443; }
.tuile { display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; height: 100%; padding: 24px; text-decoration: none; transition: background .2s ease; }
.tuile:hover { background: #4E1B2D; color: var(--fond); }
.tuile-etiquette { font-size: 12px; color: var(--rose); }
.tuile-titre { font-size: clamp(19px, 2vw, 22px); line-height: 1.15; letter-spacing: -.02em; font-weight: 500; }
.tuile-resume { font-size: 15px; line-height: 1.45; color: #D6D6D2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Appel à rejoindre */
.appel { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; border-top: 1px solid var(--filet); }
.appel p { margin: 0; max-width: 460px; font-size: 16px; line-height: 1.6; color: var(--encre); }
.appel-cercle { width: 80px; height: 80px; fill: none; stroke: var(--accent); stroke-width: 2; }
.appel-titre { margin: 0; font-family: var(--titre); font-size: clamp(36px, 5vw, 72px); line-height: 1.05; letter-spacing: -.02em; font-weight: 900; }

/* Cartographie */
.carte-reglages { display: flex; flex-direction: column; gap: 20px; padding-bottom: 32px; }
.carte-choix { display: flex; flex-direction: column; gap: 10px; }
.choix { display: flex; flex-wrap: wrap; gap: 8px; font-size: 15px; }
.choix-bouton { min-height: 44px; padding: 0 18px; border-radius: 6px; border: 1px solid var(--encre); background: transparent; color: var(--encre); font: inherit; cursor: pointer; text-align: left; }
.choix-bouton[aria-pressed="true"] { background: var(--encre); color: #fff; }
.choix-accent { border-color: var(--accent); }
.choix-accent[aria-pressed="true"] { background: var(--accent); }
.carte-maj, .carte-aucun { margin: 0; padding: 18px 20px; background: var(--carte); border: 1px solid var(--filet); border-radius: 8px; font-size: 14px; line-height: 1.5; }
.carte-bloc { border-top: 1px solid var(--filet); padding: clamp(28px, 3.4vw, 44px) 0; }
.carte-lignes { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--encre); }
.carte-ligne { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: baseline; padding: 20px 12px; border-bottom: 1px solid var(--filet); transition: background .15s ease; }
.carte-ligne:hover { background: var(--rose-pale); }
.carte-ref { flex: 1 1 240px; font-weight: 600; font-size: 17px; line-height: 1.35; }
.carte-objet { flex: 2 1 320px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.5; color: var(--encre); }
.carte-note { font-size: 14px; color: var(--note); }
.carte-source { flex: 0 0 220px; font-size: 12px; color: var(--gris); }
.carte-source a { display: inline-block; padding: 6px 0; }

/* Page ressource */
.ressource-tete { display: flex; flex-direction: column; gap: 28px; padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(32px, 4vw, 56px); }
.ressource-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; font-size: 12px; color: var(--gris); }
.ressource-invitee { display: inline-flex; align-items: center; gap: 10px; color: var(--encre); }
.pastille { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--accent); background: var(--carte); }
.ecoute { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 14px 20px; border: 1px solid var(--encre); border-radius: 28px; background: var(--carte); }
.ecoute-titre { font-size: 15px; font-weight: 500; }
.ecoute audio { flex: 1 1 240px; min-width: 0; accent-color: var(--accent); }
.ressource-corps { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 80px); padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }
.ressource-cote { flex: 1 1 260px; display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 900px) { .ressource-cote { position: sticky; top: 24px; align-self: flex-start; } }
.en-bref { padding: 24px; background: var(--encre); color: var(--fond); border-radius: 8px; display: flex; flex-direction: column; gap: 16px; }
.en-bref .etiquette { color: var(--rose); }
.en-bref ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.45; }
.en-bref li { display: flex; gap: 12px; }
.en-bref li::before { content: '●'; color: var(--rose); }
.sommaire { display: flex; flex-direction: column; font-size: 12px; }
.sommaire span { color: var(--gris); margin-bottom: 4px; }
.sommaire a { display: flex; align-items: center; min-height: 36px; text-decoration: none; line-height: 1.3; }
.ressource-texte { flex: 3 1 520px; min-width: 0; max-width: 720px; display: flex; flex-direction: column; gap: 40px; }

/* Texte d'une fiche */
.prose { font-size: 17px; line-height: 1.65; }
.prose > * { margin: 0 0 18px; }
.prose h2 { margin: 48px 0 16px; font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -.03em; scroll-margin-top: 24px; }
.prose h3 { margin: 32px 0 12px; font-size: 22px; letter-spacing: -.02em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--accent); }
.prose strong { font-weight: 600; }
.prose blockquote { margin: 0 0 18px; padding: 14px 16px; background: var(--rose-pale); border-radius: 6px; color: var(--note); }
.prose blockquote p { margin: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--filet); vertical-align: top; }
/* Schéma SVG intégré dans le texte d'une fiche */
.prose > .schema { margin: 32px auto; max-width: 480px; }
.schema svg { display: block; width: 100%; height: auto; }
.citation { margin: 40px 0; padding: clamp(24px, 4vw, 40px) clamp(20px, 3vw, 32px); background: var(--rose); border-top: 2px solid var(--accent); border-radius: 0 0 8px 8px; }
.citation blockquote { margin: 0; padding: 0; background: none; color: var(--encre); font-weight: 500; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.08; letter-spacing: -.035em; }
.citation figcaption { margin-top: 16px; font-size: 13px; color: var(--gris); }

.partage { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; background: var(--carte); border: 1px solid var(--filet); border-radius: 8px; }
.partage > span { font-size: 16px; font-weight: 500; }
.partage > div { display: flex; flex-wrap: wrap; gap: 10px; }

.cartes { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.carte { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.carte-couverture { aspect-ratio: 16 / 10; background: var(--carte); border: 1px solid var(--filet); border-radius: 6px; padding: 16px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; color: var(--gris); transition: border-color .2s ease; }
.carte:hover .carte-couverture { border-color: var(--accent); }
.carte-titre { font-size: 18px; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }

/* Utilitaires */
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pilule-noire { background: var(--encre); color: #fff; }
.pilule-noire:hover { color: #fff; background: #2A0915; }
.etiquette-rose { color: var(--rose); }
.puces { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.5; color: #D6D6D2; }
.puces li { display: flex; gap: 12px; }
.puces li::before { content: '●'; color: var(--rose); }

/* Offres */
.badge-avant { display: inline-block; margin-left: 6px; padding: 3px 8px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; }
.recruteurs { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 80px); }
.recruteurs-texte { flex: 1 1 320px; display: flex; flex-direction: column; gap: 24px; }

/* Formulaires */
.formulaire { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 3vw, 32px); background: var(--carte); border: 1px solid var(--filet); border-radius: 10px; }
.formulaire label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 500; }
.formulaire input:not([type="checkbox"]), .formulaire select, .formulaire textarea { min-height: 48px; padding: 0 14px; border-radius: 6px; border: 1px solid #8F857B; background: var(--champ); color: var(--encre); font: inherit; font-size: 16px; font-weight: 400; width: 100%; }
.formulaire textarea { padding: 12px 14px; resize: vertical; }
.formulaire-ligne { display: flex; flex-wrap: wrap; gap: 16px; }
.formulaire-ligne label { flex: 1 1 180px; }
.formulaire .case { flex-direction: row; gap: 12px; align-items: flex-start; font-weight: 400; line-height: 1.5; }
.formulaire .case input { width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--accent); }
.formulaire button { border: 0; font: inherit; font-weight: 500; font-size: 16px; cursor: pointer; }
.mention { margin: 0; font-size: 12px; line-height: 1.5; color: var(--gris); }
.formulaire-sombre { background: #4E1B2D; border-color: #5A3443; color: var(--fond); }
.formulaire-sombre input:not([type="checkbox"]), .formulaire-sombre select { background: var(--encre); border-color: #A88C95; color: var(--fond); color-scheme: dark; }
.formulaire-sombre .case { color: #D6D6D2; }
.formulaire-sombre .mention { color: #A8A8A3; }
.formulaire-sombre .mention a { color: var(--fond); }

/* Rejoindre */
.rejoindre-haut { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 120px) 0 clamp(40px, 5vw, 64px); }
.rejoindre-texte { position: relative; display: flex; flex-direction: column; gap: 24px; }
.demande { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 80px); }
.demande-texte { flex: 1 1 300px; display: flex; flex-direction: column; gap: 16px; }
.demande-texte p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--encre); max-width: 420px; }

/* Pages légales */
.legal { max-width: 860px; padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(56px, 7vw, 96px); }
.legal .page-haut { padding: 0 0 24px; gap: 16px; }
.en-ce-moment { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0 0 clamp(32px, 4vw, 48px); padding: 20px 24px; background: var(--rose); border-radius: 6px; }
.en-ce-moment .etiquette { flex-basis: 100%; }
.en-ce-moment .fleche-externe { margin-left: 6px; }
.en-ce-moment-texte { flex: 1 1 280px; margin: 0; font-size: 18px; line-height: 1.4; }
.legal .titre-page { font-size: clamp(36px, 5vw, 72px); }
/* Manifeste : la dernière phrase, seule, en serif */
.manifeste-suite { margin: 24px 0 0; font-size: 17px; line-height: 1.65; }
.demande-texte .demande-liens { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.manifeste-fin { margin: 48px 0 0; font-family: var(--titre); font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; letter-spacing: -.01em; }

/* Accueil : « En ce moment » et « Pourquoi le Cénacle » */
.actualites { display: flex; flex-direction: column; gap: 16px; padding-top: clamp(32px, 4vw, 48px); padding-bottom: clamp(32px, 4vw, 48px); background: var(--encre); border-top: 0; }
.actualites .etiquette { color: var(--rose); }
.actualites .actualite { background: transparent; border-color: #5A3443; }
.actualite > div:first-child { display: flex; flex-direction: column; gap: 6px; flex: 1 1 320px; }
.actualite-titre { margin: 0; font-family: var(--titre); font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: #FFFFFF; }
.actualite-texte { margin: 0; font-size: 16px; line-height: 1.5; color: var(--rose); }

/* Rejoindre : ce qui se passe ensuite */
.rejoindre-ensuite { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.rejoindre-ensuite ul { margin: 0; padding-left: 1.2em; }

/* Cartographie : ligne discrète en bas */
.carte-a-venir { margin: 0; padding-top: 8px; padding-bottom: 32px; font-size: 14px; color: var(--gris); }

/* Fond rose : « Pourquoi le Cénacle » */
.bloc-rose { background: var(--rose); }

/* Curseur : petit cercle magenta, sur ordinateur seulement (souris ou pavé). La main reste sur les liens et boutons. */
@media (pointer: fine) {
  html { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='none' stroke='%23C8234F' stroke-width='2'/%3E%3C/svg%3E") 10 10, auto; }
  a, button, label, select, summary, [role="button"] { cursor: pointer; }
  input:not([type="checkbox"]):not([type="radio"]), textarea { cursor: text; }
}

/* Pictogrammes au trait dans un cercle (décoratifs, toujours à côté d'un texte) */
.picto { flex: 0 0 48px; width: 48px; height: 48px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* « Pourquoi le Cénacle » : deux colonnes sur ordinateur */
.pourquoi { display: grid; grid-template-columns: 1fr; gap: 24px 64px; max-width: 1200px; }
@media (min-width: 900px) { .pourquoi { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.pourquoi-corps { display: flex; flex-direction: column; gap: 24px; }
.promesses { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 16px 32px; }
@media (min-width: 600px) { .promesses { grid-template-columns: 1fr 1fr; } }
.promesses li { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 500; line-height: 1.3; }
.pourquoi-note { margin: 0; font-size: 14px; color: var(--gris); }

/* Pages de rubrique (/metier, /leadership) */
.page-haut-compacte { padding-top: clamp(16px, 2.4vw, 35px); padding-bottom: 20px; gap: 12px; }
.etroit-vedette { padding: 0 var(--marge) clamp(24px, 3vw, 40px); }
.vedette { max-width: 1200px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(24px, 3vw, 40px); background: var(--encre); color: var(--fond); border-radius: 10px; }
.vedette .etiquette { color: var(--rose); }
.vedette .titre-bloc { color: #FFFFFF; }
.vedette-phrase { margin: 0 0 8px; max-width: 640px; font-size: 17px; line-height: 1.5; color: var(--rose); }
.ligne-liste { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: baseline; gap: 6px 24px; padding: 18px 12px; text-decoration: none; transition: background .15s ease; }
.ligne-liste:hover { background: var(--rose); color: var(--encre); }
.ligne-liste:hover .fleche { transform: translateX(6px); color: var(--accent); }
.ligne-corps { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ligne-liste .ligne-titre { flex: none; }
.ligne-resume { font-size: 15px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-temps { font-size: 13px; color: var(--gris); }
@media (max-width: 599px) {
  .ligne-liste { grid-template-columns: minmax(0, 1fr) auto; }
  .ligne-liste .ligne-etiquette { grid-column: 1 / -1; }
}
.fin-rubrique { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; }
.fin-titre { margin: 0; font-family: var(--titre); font-weight: 700; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; }
.fin-rubrique .lien-suite { margin-top: 0; }

/* Contour seulement pour la navigation au clavier, pas au clic */
:focus:not(:focus-visible) { outline: none; }

/* Billets : chapeau, titres Playfair, texte à 18 px, fin bordeaux */
.chapeau { margin: 0; max-width: 820px; font-size: 20px; line-height: 1.45; color: var(--encre); }
.billet .titre-page { font-size: clamp(32px, 4vw, 56px); }
.billet .ressource-tete { gap: 20px; padding-bottom: clamp(16px, 2vw, 28px); }
.billet .ressource-corps { padding-top: clamp(20px, 3vw, 44px); }
.billet .prose { font-size: 18px; }
.billet .prose h2 { font-family: var(--titre); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.01em; }

/* Offres : bloc recruteurs */
.recruteurs-phrase { margin: 0; max-width: 520px; font-size: 17px; line-height: 1.55; color: var(--rose); }
.recruteurs-details { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.recruteurs-details summary { width: fit-content; list-style: none; cursor: pointer; }
.recruteurs-details summary::-webkit-details-marker { display: none; }
.recruteurs-details[open] summary { margin-bottom: 20px; }
.recruteurs-details .puces { margin-bottom: 20px; }

/* Page Repères : les tableaux défilent seuls, jamais la page */
.prose table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
.prose td, .prose th { white-space: nowrap; }
.prose td:first-child, .prose th:first-child { white-space: normal; min-width: 180px; }
.reperes-page .prose table { font-size: 15px; }
.reperes-page .prose th { font-size: 13px; color: var(--gris); font-weight: 600; }


/* Missions : TJM, durée, rythme et début en évidence */
.mission-cles { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: 12px 16px; padding: 14px 16px; background: var(--rose); border-radius: 8px; }
.mission-cles div { display: flex; flex-direction: column; gap: 4px; }
.mission-cles dt { font-size: 12px; font-weight: 600; color: var(--gris); }
.mission-cles dd { margin: 0; font-size: clamp(15px, 1.6vw, 18px); font-weight: 600; line-height: 1.25; }
.mission-lien { margin: 0; font-size: 13px; font-weight: 600; color: var(--accent); }

/* Formulaire « Vous recrutez ? » : poste ou mission */
.formulaire fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 12px; }
.formulaire legend { padding: 0; margin-bottom: 4px; font-size: 14px; font-weight: 500; }
.choix-type { flex-direction: row !important; flex-wrap: wrap; gap: 8px 24px !important; }
.choix-type legend { width: 100%; }
.choix-type .case input { accent-color: var(--accent); }

/* Gabarit commun des rubriques (Métier, Leadership, Offres) : src/_includes/rubrique.njk */
.conteneur { max-width: calc(880px + 2 * var(--marge)); margin-left: auto; margin-right: auto; padding-left: var(--marge); padding-right: var(--marge); }
.rubrique-entete { background: var(--rose); }
.rubrique-entete-interne { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: clamp(24px, 3.4vw, 48px); padding-bottom: clamp(24px, 3.4vw, 48px); }
.rubrique-entete .intro { max-width: 600px; }
.rubrique-entete .bandeau { margin: 0; font-size: clamp(15px, 1.4vw, 18px); }
.rubrique-section { padding-top: clamp(20px, 2.6vw, 32px); }
.rubrique-section .filtres { margin-bottom: 16px; }
.cartes { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.carte-rubrique-li[hidden] { display: none; }
.carte-rubrique { display: flex; gap: 14px; height: 100%; padding: 18px 20px; background: var(--carte); border: 1px solid var(--filet); border-radius: 10px; text-decoration: none; color: var(--encre); transition: border-color .2s ease; }
.carte-rubrique:hover { border-color: var(--accent); }
.carte-rubrique .picto { flex-basis: 40px; width: 40px; height: 40px; }
.carte-rubrique-corps { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.carte-rubrique-etiquette { font-size: 13px; color: var(--accent); }
.carte-rubrique-titre { font-size: 17px; font-weight: 600; line-height: 1.3; }
.carte-rubrique-resume { font-size: 14px; line-height: 1.5; color: var(--gris); }
.carte-rubrique-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin-top: auto; padding-top: 6px; }
.carte-rubrique-meta { font-size: 13px; color: var(--gris); }
.carte-rubrique-lien { font-size: 14px; font-weight: 600; color: var(--accent); }
.carte-rubrique:hover .carte-rubrique-lien { text-decoration: underline; text-underline-offset: 3px; }
.rubrique-sous-titre { margin: 0 0 16px; font-family: var(--titre); font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; letter-spacing: -.01em; }
.lectures { padding-top: clamp(32px, 4vw, 48px); }
.carte-rubrique-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.carte-badge { padding: 2px 8px; border: 1px solid var(--filet); border-radius: 999px; font-size: 12px; color: var(--gris); background: var(--fond); }
.rubrique-fin { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; margin-top: clamp(32px, 4vw, 56px); padding-top: 24px; padding-bottom: clamp(40px, 5vw, 64px); background: linear-gradient(var(--filet), var(--filet)) content-box top / 100% 1px no-repeat; }
.rubrique-fin .lien-suite { margin-top: 0; }
@media (max-width: 699px) {
  .carte-rubrique { padding: 14px 16px; gap: 12px; }
  .carte-rubrique .picto { flex-basis: 36px; width: 36px; height: 36px; }
}

/* Page Offres : onglets en texte, filtres en pastilles, cartes d'offres compactes */
.fil-discret { margin: 0; font-size: 13px; color: var(--gris); }
.fil-discret a { color: var(--gris); text-decoration: none; }
.fil-discret a:hover { color: var(--encre); text-decoration: underline; }
.offres-amla { padding-top: 20px; }
.offres-amla > div { max-width: 880px; padding: 16px 20px; border-left: 3px solid var(--accent); background: var(--carte); border-radius: 0 10px 10px 0; }
.offres-amla h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.offres-amla p { margin: 0; font-size: 14px; line-height: 1.5; }

.offres-outils { padding-top: clamp(24px, 3vw, 40px); }
.offres-amla > div { max-width: none; }
.onglets { display: flex; gap: 28px; border-bottom: 1px solid var(--filet); }
.onglets [role="tab"] { min-height: 44px; margin-bottom: -1px; padding: 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--gris); font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; }
.onglets [role="tab"]:hover { color: var(--encre); }
.onglets [role="tab"][aria-selected="true"] { color: var(--encre); border-bottom-color: var(--accent); }
.onglet-nombre { font-weight: 400; }
.offres-maj { margin: 0 0 0 auto; font-size: 13px; color: var(--gris); }

.offres-zone { display: flex; flex-direction: column; gap: 16px; padding-top: 20px; }
.offres-filtres { display: flex; flex-direction: column; gap: 10px; }
.filtre-ligne { display: flex; align-items: center; gap: 12px; min-width: 0; }
.filtre-nom { flex: 0 0 64px; font-size: 14px; color: var(--gris); }
.filtre-pastilles { display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.filtre-pastilles::-webkit-scrollbar { display: none; }
.offres-filtres .filtre { flex: 0 0 auto; min-height: 36px; padding: 0 14px; border-radius: 6px; font-family: 'Geist', system-ui, sans-serif; font-size: 14px; text-transform: none; letter-spacing: 0; white-space: nowrap; background: var(--carte); }
.offres-filtres .filtre[aria-pressed="true"] { background: var(--encre); color: #fff; }
@media (max-width: 699px) {
  .filtre-ligne { flex-direction: column; align-items: stretch; gap: 6px; }
  .filtre-nom { flex-basis: auto; }
  .offres-maj { margin-left: 0; width: 100%; }
  .filtre-pastilles { margin-right: calc(-1 * var(--marge)); padding-right: var(--marge); }
  .offres-filtres .filtre { min-height: 40px; }
}
.offres-compte { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.offres-compteur { margin: 0; font-size: 14px; font-weight: 600; }
.offres-effacer { min-height: 36px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.offres-effacer:hover { color: var(--encre); }
.aucun-actions { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 4px 0 0; }
.carte-aucun p { margin: 0; }

.offres-liste { display: flex; flex-direction: column; gap: 12px; }
.offre { display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2.4vw, 26px); background: var(--carte); border: 1px solid var(--filet); border-left: 3px solid var(--filet); border-radius: 10px; scroll-margin-top: 24px; transition: border-color .2s ease; }
.offre:hover, .offre:target { border-left-color: var(--accent); }
.offre:has(> .offre-details) { padding-bottom: 6px; }
.offre-avant { background: var(--rose); }
.offre-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--accent); }
.offre h2 { margin: 0; font-family: 'Geist', system-ui, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; }
.offre-employeur { margin: 0; font-size: 15px; color: var(--gris); }
.offre-cle { font-weight: 600; }
.pastille-nouvelle { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--encre); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.badge-avant { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; }
.offre-question { margin: 2px 0 0; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--fond); border-radius: 8px; font-size: 14px; line-height: 1.5; }
.offre-avant .offre-question { background: var(--carte); }
.offre-question svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--accent); stroke-width: 1.5; }
.offre-question strong { font-weight: 600; }
.offre-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; margin-top: 2px; }
.offre-date { font-size: 13px; color: var(--gris); }
.offre-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.offre-copier { min-height: 44px; padding: 0; border: 0; background: none; color: var(--gris); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.offre-copier:hover { color: var(--encre); }
.offre-voir { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--accent); font-size: 15px; font-weight: 600; text-decoration: none; }
.offre-voir:hover { text-decoration: underline; text-underline-offset: 3px; }
.offre-details { border-top: 1px solid var(--filet); }
.offre-details summary { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--accent); cursor: pointer; list-style: none; }
.offre-details summary::-webkit-details-marker { display: none; }
.offre-details summary::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.offre-details[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.offre-lecture { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; margin-bottom: 4px; background: var(--rose-pale); border-radius: 8px; }
.offre-avant .offre-lecture { background: var(--carte); }
.offre-resume { margin: 0; font-size: 14px; line-height: 1.5; }
.offre-reperes { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px 20px; }
.offre-reperes div { display: flex; flex-direction: column; gap: 4px; }
.offre-reperes dt { font-size: 12px; font-weight: 600; color: var(--gris); }
.offre-reperes dd { margin: 0; font-size: 14px; line-height: 1.45; }
.offre-repere { margin: 0; padding-top: 12px; border-top: 1px dashed #E8B4C0; font-size: 13px; line-height: 1.5; color: var(--gris); }
.offre-repere .offre-cle { color: var(--encre); }
.offre-repere a { color: var(--encre); white-space: nowrap; }
.offre-source { margin: 0; font-size: 12px; color: var(--gris); }
.offres-notes { display: flex; flex-direction: column; gap: 6px; padding-top: 28px; padding-bottom: clamp(48px, 6vw, 80px); }
.offres-notes p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--gris); }
.formulaire-date { flex: 1 1 180px; display: flex; flex-direction: column; gap: 10px; }
.formulaire-date label { flex: 0 0 auto; }
.formulaire input:disabled { opacity: .5; }

/* Offres : bloc « Préparer l'entretien » (bouton et contenu dépliable) */
.offre-conditions { margin: 0; font-size: 14px; color: var(--gris); }
.offre-enjeu { margin: 2px 0 0; padding: 12px 14px; background: var(--fond); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; font-size: 14px; line-height: 1.5; }
.offre-avant .offre-enjeu { background: var(--carte); }
.offre-preparer > summary { width: fit-content; margin: 8px 0; padding: 0 16px; border: 1px solid var(--accent); border-radius: 6px; color: var(--accent); font-weight: 600; }
.offre-preparer > summary:hover { background: var(--accent); color: #fff; }
.offre-preparer { border-top: 0; }
.preparation { display: flex; flex-direction: column; gap: 18px; padding: 16px; margin-bottom: 8px; background: var(--rose-pale); border-radius: 8px; }
.preparation section { display: flex; flex-direction: column; gap: 8px; }
.preparation h3 { margin: 0; font-size: 15px; font-weight: 600; }
.preparation h4 { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--gris); }
.preparation .offre-lecture { padding: 0; background: none; }
.prep-liste { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; }
.prep-liste li::marker { color: var(--accent); }
.prep-id { margin: 0; font-size: 14px; line-height: 1.5; }
.prep-date { font-weight: 600; }
.prep-source { font-size: 12px; color: var(--gris); white-space: nowrap; }
.prep-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--gris); }
.prep-liens { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14px; }
.prep-liens a { color: var(--accent); }

/* Carte d'offre allégée : actions sur une ligne, détails en petit, contenu dépliable */
.offre-conditions { margin: 0; font-size: 14px; line-height: 1.45; color: var(--gris); }
.offre-enjeu { margin: 2px 0 0; padding: 0 0 0 12px; background: none; border-left: 3px solid var(--accent); border-radius: 0; font-size: 15px; line-height: 1.45; }
.offre-avant .offre-enjeu { background: none; }
.offre-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 6px; }
.offre-deplier { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--accent); border-radius: 6px; background: transparent; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.offre-deplier::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.offre-deplier[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); }
.offre-deplier:hover { background: var(--accent); color: #fff; }
.offre-sous { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; margin: 0; font-size: 12px; color: var(--gris); }
.offre-sous .offre-copier { min-height: 32px; font-size: 12px; }
.offre-sous .offre-date { font-size: 12px; }
.offre:has(> .offre-deplie) { padding-bottom: clamp(18px, 2.4vw, 26px); }
.offre-deplie { display: flex; flex-direction: column; gap: 18px; padding: 16px; background: var(--rose-pale); border-radius: 8px; }
.offre-deplie[hidden] { display: none; }
.offre-deplie > .preparation, .offre-deplie > .offre-lecture { padding: 0; margin: 0; background: none; }
.offre-deplie-titre { margin: 0; font-size: 14px; font-weight: 600; color: var(--accent); }
.offre-avant .offre-deplie { background: var(--carte); }

/* Offres : filtres compacts (« Pays ▾ ») avec liste à cocher, pastilles des filtres actifs */
.filtres-barre { display: flex; flex-wrap: wrap; gap: 8px; }
.filtre-menu { position: relative; }
.filtre-bouton { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--filet); border-radius: 6px; background: transparent; color: var(--encre); font: inherit; font-size: 15px; cursor: pointer; }
.filtre-bouton:hover, .filtre-bouton[aria-expanded="true"] { border-color: var(--encre); }
.filtre-bouton.filtre-actif { border-color: var(--encre); }
.filtre-fleche { font-size: 11px; color: var(--gris); }
.filtre-liste { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 220px; max-height: 60vh; overflow: auto; display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--champ); border: 1px solid var(--filet); border-radius: 8px; box-shadow: 0 8px 24px rgba(61, 15, 31, .12); }
.filtre-liste[hidden] { display: none; }
.filtre-liste-titre { display: none; margin: 0 0 6px; font-weight: 600; font-size: 16px; }
.filtre-choix { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px; border-radius: 6px; font-size: 15px; cursor: pointer; }
.filtre-choix:hover { background: var(--fond); }
.filtre-choix input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.filtre-valider { display: none; }
.filtres-fond { position: fixed; inset: 0; z-index: 19; background: rgba(61, 15, 31, .35); }
.filtres-fond[hidden] { display: none; }
@media (max-width: 699px) {
  .filtre-liste { position: fixed; top: auto; left: 0; right: 0; bottom: 0; min-width: 0; max-height: 70vh; padding: 16px var(--marge) 20px; border-radius: 14px 14px 0 0; box-shadow: 0 -8px 24px rgba(61, 15, 31, .18); }
  .filtre-liste-titre { display: block; }
  .filtre-valider { display: block; margin-top: 10px; min-height: 44px; border: 0; border-radius: 6px; background: var(--encre); color: #fff; font: inherit; font-weight: 600; }
}
.offres-compte { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.filtres-actifs { display: flex; flex-wrap: wrap; gap: 6px; }
.filtres-actifs:empty { display: none; }
.filtre-pastille { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--rose); color: var(--encre); font: inherit; font-size: 13px; cursor: pointer; }
.filtre-pastille span:last-child { font-size: 15px; line-height: 1; }
.filtre-pastille:hover { background: #FFC2CF; }
.offres-compte .offres-maj { margin-left: auto; width: auto; }
.aucun-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.a-lire-suite { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 0; }
/* « À lire » : l'étiquette au-dessus du titre, sur toutes les largeurs. */
.ligne-a-lire { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 24px; }
.ligne-a-lire .ligne-etiquette { grid-column: 1 / -1; }

/* Sections « À lire, à écouter » : intro, phrase « pourquoi », étiquette « Écrit pour nos métiers », filtre léger */
.lectures-intro { margin: -6px 0 16px; max-width: 680px; font-size: 15px; line-height: 1.55; color: var(--gris); }
.filtres-leger { margin-bottom: 14px; }
.filtres-leger .filtres-barre { align-items: center; }
.carte-rubrique-pourquoi { font-size: 14px; line-height: 1.5; color: var(--encre); }
.carte-specifique { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--accent); border-radius: 999px; font-size: 11px; color: var(--accent); }

/* Accueil : cercle et bloc de présentation côte à côte sur ordinateur, l'un sous l'autre sur téléphone ;
   le haut du terme du jour apparaît en bas du premier écran. */
.accueil-haut { padding-bottom: clamp(20px, 3vw, 32px); }
.accueil-grille { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; gap: 20px; max-width: 1200px; margin: 0 auto; width: 100%; }
@media (min-width: 900px) { .accueil-grille { grid-template-columns: auto minmax(280px, 420px); gap: clamp(32px, 5vw, 80px); justify-content: center; } }
.accueil-bloc { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 420px; }
.accueil-boutons { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
@media (max-width: 899px) { .accueil-boutons { justify-content: center; } }
@media (max-width: 899px) { .accueil-bloc { align-items: center; text-align: center; } .accueil-haut { --cercle: min(700px, 86vw); } }
.accueil-chapo { margin: 0; font-size: 16px; line-height: 1.55; color: var(--encre); }
/* Terme du jour */
.terme-jour { padding: 0 0 clamp(32px, 4vw, 48px); }
.terme-carte { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 3vw, 28px); background: var(--rose); border-radius: 10px; }
.terme-etiquette { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.terme-titre { margin: 0; font-family: var(--titre); font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -.01em; }
.terme-explication { margin: 0; font-size: 16px; line-height: 1.55; }
.terme-piege { margin: 0; font-size: 15px; line-height: 1.5; }
.terme-source { margin: 0; font-size: 13px; color: var(--gris); }
.terme-source a { color: var(--encre); }
.terme-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-top: 4px; }
.terme-actions .lien-suite { margin-top: 0; }
.terme-partager { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--accent); border-radius: 6px; color: var(--accent); font-size: 14px; font-weight: 600; text-decoration: none; }
.terme-partager:hover { background: var(--accent); color: #fff; }
.terme-serie { margin: 0 0 0 auto; font-size: 13px; color: var(--gris); }
.lexique { display: flex; flex-direction: column; gap: 12px; padding-bottom: clamp(40px, 5vw, 64px); }
.terme-lexique { background: var(--carte); border: 1px solid var(--filet); scroll-margin-top: 24px; }
.terme-lexique:target { border-color: var(--accent); }

/* Accueil : « Pourquoi le Cénacle » court et trois entrées par usage */
.pourquoi-court { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.pourquoi-court .intro { max-width: 680px; }
.usages { margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.usage { display: flex; gap: 14px; padding: 18px 20px; background: var(--carte); border: 1px solid var(--filet); border-radius: 10px; }
.usage .picto { flex-basis: 40px; width: 40px; height: 40px; }
.usage-corps { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.usage-titre { margin: 0; font-size: 17px; font-weight: 600; }
.usage-texte { margin: 0; font-size: 14px; line-height: 1.5; color: var(--gris); }
.usage-liens { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0; }
.usage-liens a { color: var(--accent); font-size: 14px; font-weight: 600; text-decoration: none; }
.usage-liens a:hover { text-decoration: underline; text-underline-offset: 3px; }
.actualite-note { margin: 6px 0 0; font-size: 14px; color: var(--gris); }
.actualite-note a { color: var(--accent); font-weight: 600; }

/* Rejoindre : « Comment ça se passe », aide sous l'email */
.comment-ca-se-passe { padding-top: clamp(32px, 4vw, 56px); }
.champ-aide { margin: -8px 0 0; font-size: 13px; line-height: 1.5; color: var(--gris); }
.formulaire-sombre .champ-aide { color: #D6D6D2; }

/* Terme du jour : bandeau d'une ligne sous l'ensemble du haut, déplié au clic */
.terme-jour .conteneur { display: flex; flex-direction: column; gap: 6px; }
.terme-bandeau { border: 1px solid var(--filet); border-radius: 10px; background: var(--rose); }
.terme-bandeau > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-height: 48px; padding: 12px 18px; cursor: pointer; list-style: none; font-size: 16px; }
.terme-bandeau > summary::-webkit-details-marker { display: none; }
.terme-bandeau-libelle { color: var(--accent); font-weight: 600; }
.terme-bandeau[open] > summary span[aria-hidden] { display: inline-block; transform: rotate(90deg); }
.terme-bandeau .terme-carte { padding-top: 0; background: none; }
.terme-lexique-lien { align-self: flex-end; font-size: 14px; font-weight: 600; color: var(--accent); }
/* Nous suivre (accueil) : une ligne discrète, liens texte, sans bouton */
.suivre { padding: 0 0 clamp(32px, 4vw, 48px); }
.suivre-interne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding-top: 16px; border-top: 1px solid var(--filet); }
.suivre-texte { flex: 1 1 320px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--encre); }
.suivre-liens { display: flex; gap: 0 24px; margin: 0; }
.suivre-liens .fleche-externe { margin-left: 4px; }
.suivre-liens a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--accent); }
/* Bloc de fin « Le Cénacle » */
.le-cenacle-interne { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 760px; }
.comment-intro { margin-top: 12px; }
/* Le cercle garde son diamètre d'origine dans la grille de l'accueil. */
.accueil-cercle { width: var(--cercle); max-width: 100%; }
.accueil-cercle .cercle { max-width: none; }
.bloc-sombre .actualite-note, .actualites .actualite-note { color: #D6D6D2; } .bloc-sombre .actualite-note a, .actualites .actualite-note a { color: var(--rose); }

/* Vignettes des ressources externes (aucune couverture d'éditeur) : carré à coins arrondis de 6 px,
   fond selon le format, pictogramme au trait, mot-clé en Playfair. Contrastes AA vérifiés. */
.carte-tete { display: flex; flex-direction: column; gap: 10px; }
.carte-tete-texte { display: flex; flex-direction: column; gap: 6px; }
.vignette { display: flex; flex-direction: column; justify-content: space-between; width: 120px; aspect-ratio: 1; padding: 12px; border-radius: 6px; background: #ECE3D5; color: var(--encre); }
.vignette .picto { width: 30px; height: 30px; flex-basis: auto; stroke: var(--accent); }
.vignette .picto circle { display: none; }
.vignette-mot { font-family: var(--titre); font-weight: 700; font-size: 17px; line-height: 1.1; letter-spacing: -.01em; }
.vignette-livre { background: var(--rose); }
.vignette-podcast { background: #FFB3C3; }
.vignette-video { background: var(--encre); color: #FFFFFF; }
.vignette-video .picto { stroke: var(--rose); }
.vignette-guide, .vignette-article, .vignette-rapport, .vignette-newsletter, .vignette-texte, .vignette-lignes-directrices { background: #ECE3D5; }
.pourquoi-mot { color: var(--accent); font-weight: 600; }
@media (max-width: 699px) {
  .carte-tete { flex-direction: row; align-items: flex-start; gap: 12px; }
  .vignette { width: 68px; flex: 0 0 68px; padding: 8px; }
  .vignette .picto { width: 20px; height: 20px; }
  .vignette-mot { font-size: 11px; }
}
/* Pictogramme de la vignette : dessin à 24 px (le cercle du picto est masqué). */
.vignette .picto { width: 52px; height: 52px; margin: -12px 0 0 -12px; stroke-width: 1.6; }
@media (max-width: 699px) { .vignette .picto { width: 36px; height: 36px; margin: -8px 0 0 -8px; } }
/* Note en plus petit sous l'accroche d'une rubrique (page Offres). */
.intro-note { margin: -4px 0 0; max-width: 600px; font-size: 14px; line-height: 1.5; color: var(--gris); }
/* Phrases du ton : chute sous une accroche, sous-titre de Rejoindre, encadré de fin de billet Leadership. */
.intro-chute { margin: 0; max-width: 600px; font-family: var(--titre); font-weight: 700; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.3; color: var(--accent); }
.rubrique-entete .intro-chute { margin-top: -4px; }
.reperes-page .intro-chute { margin: 6px 0 14px; }
.rejoindre-titre { max-width: 14em; }
.sous-titre { margin: 10px 0 18px; font-family: var(--titre); font-weight: 700; font-size: clamp(20px, 2vw, 26px); line-height: 1.25; color: var(--accent); }
.encadre-discret { margin: 28px 0 20px; padding: 14px 18px; border-left: 3px solid var(--accent); background: var(--rose); font-size: 17px; line-height: 1.5; color: var(--encre); }
/* Bloc « Vous recrutez ? » : trois points à pictogramme, note en petit sous le bouton. */
.recruteurs-points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; max-width: 520px; }
.recruteurs-points li { display: flex; gap: 14px; align-items: flex-start; color: var(--rose); font-size: 16px; line-height: 1.5; }
.recruteurs-points .picto { flex: 0 0 40px; width: 40px; height: 40px; stroke: var(--rose); }
.recruteurs-droite { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.recruteurs-note { margin: 0; max-width: 520px; font-size: 14px; line-height: 1.5; color: var(--rose); opacity: .85; }
.recruteurs-droite .recruteurs-details { flex: none; }
/* « Poser une question » : encadré d'avertissement, formulaire, bloc de bas de page, liste des questions. */
.question-zone { display: flex; flex-direction: column; gap: 24px; max-width: calc(720px + 2 * var(--marge)); margin-left: 0; }
.question-avertissement { padding: 18px 20px; border: 2px solid var(--accent); border-radius: 6px; background: var(--carte); }
.question-avertissement p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--encre); }
.question-avertissement-titre { margin-bottom: 6px !important; font-weight: 700; color: var(--accent) !important; }
.question-avertissement a { color: var(--accent); }
.question-formulaire textarea { min-height: 160px; padding: 12px 14px; }
.question-liste-lien { margin: 0; }
.bloc-question { margin-top: clamp(32px, 4vw, 56px); margin-bottom: clamp(32px, 4vw, 56px); }
.bloc-question-interne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: clamp(20px, 3vw, 32px); border-radius: 6px; background: var(--rose); }
.bloc-question-interne p { margin: 6px 0 0; max-width: 520px; font-size: 16px; line-height: 1.5; color: var(--encre); }
.bloc-question-titre { margin: 0; font-family: var(--titre); font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; color: var(--encre); }
.questions-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 32px; max-width: 720px; }
.questions-liste li { padding-bottom: 28px; border-bottom: 1px solid var(--filet); }
.question-titre { margin: 8px 0 12px; font-family: var(--titre); font-weight: 700; font-size: clamp(20px, 2vw, 24px); line-height: 1.25; color: var(--encre); }
/* Accueil, « Ce qui vous amène aujourd'hui » : titre visible, une ligne dessous, cartes collées au titre. */
#usages .usages { margin-top: 0; }
.usages-tete { flex-direction: column; align-items: flex-start; gap: 10px; }
.usages-chapo { margin: 0; max-width: 640px; font-size: 17px; line-height: 1.5; color: var(--gris); }
/* Leadership : suite de l'accroche dans la phrase, billet à la une, billets par thème (toute la ligne cliquable). */
.intro-suite { color: var(--accent); font-weight: 700; }
.billets-zone { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px); }
.billet-une { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; padding: clamp(16px, 2vw, 24px); border: 1px solid var(--filet); border-radius: 6px; background: var(--carte); color: var(--encre); text-decoration: none; }
.billet-une:hover .billet-une-titre { color: var(--accent); }
.billet-une-visuel svg { display: block; width: 100%; height: auto; border-radius: 6px; }
.billet-une-texte { display: flex; flex-direction: column; gap: 12px; }
.billet-une-titre { font-family: var(--titre); font-weight: 900; font-size: clamp(26px, 3vw, 40px); line-height: 1.08; letter-spacing: -.015em; }
.billet-une-accroche { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.5; color: var(--encre); }
.billets-groupe-titre { margin: 0 0 4px; font-family: var(--titre); font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; color: var(--encre); }
.billets-liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--encre); }
.billets-liste li { border-bottom: 1px solid var(--filet); }
.billet-ligne { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; color: var(--encre); text-decoration: none; min-height: 44px; }
.billet-ligne-texte { display: flex; flex-direction: column; gap: 4px; }
.billet-ligne-titre { font-weight: 600; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.3; }
.billet-ligne-accroche { font-size: 16px; line-height: 1.5; color: var(--gris); }
.billet-ligne:hover .billet-ligne-titre { color: var(--accent); }
.billet-ligne .fleche { flex: none; font-size: 22px; }
@media (max-width: 699px) { .billet-une { grid-template-columns: 1fr; } }
/* Titres de section (accueil) et listes de billets : une seule taille, commune à l'accueil et à Leadership. */
.titre-section, .billets-groupe-titre { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; line-height: 1.1; letter-spacing: -.015em; }
.ligne-a-lire { padding: 12px 0; }
.ligne-a-lire .ligne-titre { font-size: clamp(15px, 1.3vw, 16px); line-height: 1.3; letter-spacing: -.01em; }
.ligne-a-lire .fleche, .billet-ligne .fleche { font-size: 19px; }
.billet-ligne { padding: 12px 0; gap: 16px; }
.billet-ligne-titre { font-size: clamp(15px, 1.3vw, 16px); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.billet-ligne-accroche { font-size: 14px; line-height: 1.45; }
.billets-groupe-titre { margin: 0 0 12px; }
/* Page « Débuter » */
.debuter-chute { margin: 4px 0 14px; font-size: 18px; line-height: 1.5; color: var(--encre); }
.debuter-offres { margin-top: 40px; }
.debuter-offres .billets-liste { margin: 16px 0; }
.debuter-fin a { color: var(--accent); font-weight: 600; white-space: nowrap; }
.debuter-page .prose table { font-size: 15px; }
.debuter-page .prose table { display: block; max-width: 100%; overflow-x: auto; }
.billet-une-seule { grid-template-columns: 1fr; } .billet-une-seule .billet-une-texte { max-width: 720px; }
/* Visuels des billets (images fournies, 3:2) : en tête du billet et sur le billet à la une. */
.billet-visuel { margin-top: 8px; margin-bottom: clamp(24px, 3vw, 40px); }
.billet-visuel img, .billet-une-visuel img { display: block; width: 100%; height: auto; border-radius: 6px; }
/* Bouton secondaire : contour magenta, fond transparent (accueil, « Toutes les ressources … »). */
.pilule-secondaire { border: 1.5px solid var(--accent); color: var(--accent); background: transparent; }
.pilule-secondaire:hover { background: var(--accent); color: #fff; }
.a-lire-suite { gap: 12px; margin-top: 24px; }
#a-lire { padding-bottom: clamp(32px, 4vw, 56px); }
/* Phrases « pour souffler » : italique magenta, sans guillemets ni picto. */
.souffle { margin: 28px 0; font-style: italic; color: var(--accent); font-size: 18px; line-height: 1.5; }
.appel .souffle { margin: 0; }
/* Leadership : sections par thème, lectures en vignettes compactes, encadré « Pour votre carrière ». */
.theme-section { margin-top: clamp(16px, 2vw, 24px); }
.theme-intro { margin: -4px 0 16px; font-size: 17px; line-height: 1.5; color: var(--gris); }
.theme-souffle { margin: -8px 0 16px; font-size: 16px; }
.theme-lectures-titre { margin: 28px 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--encre); }
.lectures-compactes { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 10px; }
.encadre-carriere { padding: clamp(20px, 3vw, 32px); border-radius: 6px; background: var(--rose); }
.encadre-carriere .billets-groupe-titre { margin-bottom: 16px; }
.encadre-carriere .usage-titre a { color: inherit; text-decoration: none; }
.encadre-carriere .usage-titre a::after { content: ""; position: absolute; inset: 0; }
.encadre-carriere .usage { position: relative; }
/* Kit « Se lancer en indépendante » : sommaire cliquable et encadré des cinq premières étapes. */
.kit-sommaire { margin: 8px 0 24px; }
.kit-sommaire ol { margin: 8px 0 0; padding-left: 22px; columns: 2 240px; column-gap: 32px; }
.kit-sommaire li { margin: 0 0 6px; break-inside: avoid; }
.kit-sommaire a, .kit-etapes a { color: var(--encre); }
.kit-etapes { margin: 0 0 36px; padding: 20px 24px; border-radius: 6px; background: var(--rose); }
.kit-etapes h2 { margin: 0 0 10px; font-family: var(--titre); font-size: 22px; }
.kit-etapes ol { margin: 0; padding-left: 22px; }
.kit-etapes li { margin: 0 0 6px; font-weight: 500; }
.kit-avertissement { margin-top: 32px; font-style: italic; color: var(--gris); }
/* Agenda de la place */
.agenda-mois { margin: 28px 0 12px; }
.agenda-liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--encre); }
.agenda-ligne { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 8px 24px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--filet); }
.agenda-date { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--gris); }
.agenda-jour { font-family: var(--titre); font-weight: 700; font-size: 20px; color: var(--encre); text-transform: capitalize; }
.agenda-corps { display: flex; flex-direction: column; gap: 4px; }
.agenda-corps p { margin: 0; }
.agenda-titre { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.agenda-titre a { color: var(--encre); text-decoration: none; }
.agenda-titre a:hover { color: var(--accent); }
.agenda-texte { font-size: 15px; line-height: 1.5; color: var(--encre); }
.agenda-infos { font-size: 14px; color: var(--gris); }
.ligne-sous { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--gris); letter-spacing: 0; }
@media (max-width: 699px) { .agenda-ligne { grid-template-columns: 1fr; } .agenda-bouton { justify-self: start; } }
/* Billets (Métier et Leadership) : mêmes styles partout. Titre 44 px, intertitres 24 px. */
.billet .titre-page { font-size: clamp(30px, 6vw, 44px); line-height: 1.1; }
.billet .prose h2 { margin: 40px 0 14px; font-family: var(--titre); font-weight: 700; font-size: clamp(21px, 2.4vw, 24px); line-height: 1.25; letter-spacing: -.005em; }
.billet + .bloc .loin-titre, .loin-titre { font-family: var(--titre); font-weight: 700; font-size: clamp(21px, 2.4vw, 24px); line-height: 1.25; letter-spacing: -.005em; }
/* Rubriques : ligne « ce qu'on y trouve » et sommaire d'ancres (une ligne sur ordinateur, deux par deux sur téléphone). */
.intro-ligne { margin: -4px 0 0; max-width: 640px; font-size: 16px; line-height: 1.5; color: var(--encre); }
.rubrique-sommaire { width: 100%; margin-top: 6px; }
.rubrique-sommaire ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rubrique-sommaire a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 10px 14px; border: 1px solid var(--accent); border-radius: 6px; color: var(--encre); text-decoration: none; background: transparent; }
.rubrique-sommaire a:hover { background: var(--rose-pale); }
.rubrique-sommaire strong { font-size: 15px; font-weight: 700; }
.rubrique-sommaire span { font-size: 13px; color: var(--gris); line-height: 1.35; }
@media (max-width: 699px) { .rubrique-sommaire ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.theme-section, #pour-votre-carriere, #billets, #cartographie, #lectures, #poser-une-question { scroll-margin-top: 16px; }
/* Billet à la une : titre ~36 px, trois lignes au plus à côté du visuel. */
.billet-une-titre { font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; line-height: 1.12; color: var(--encre); }
.encadre-carriere .usages { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
/* Illustrations des billets : en tête, réduite pour laisser voir le début du texte (dessin entier) ;
   miniatures 96 × 64 dans les listes ; visuel à la une un peu plus étroit. */
.billet-visuel img { max-width: 420px; }
@media (max-width: 699px) { .billet-visuel img { max-width: 100%; } }
.billet-une { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); }
.billet-miniature { flex: none; width: 96px; height: 64px; object-fit: contain; border-radius: 4px; background: var(--rose); }
.billet-ligne { justify-content: flex-start; }
.billet-ligne .billet-ligne-texte { flex: 1; }
.ligne-titre-image { display: flex; align-items: center; gap: 14px; }
.ligne-titre-image .ligne-sous { margin-top: 3px; }
@media (max-width: 699px) { .billet-miniature { width: 72px; height: 48px; } }
.billet-visuel img { max-width: 340px; }
.ligne-a-lire { align-items: center; }
/* Métier : section Situations, encadré Cartographie. */
.billets-liste-apres-une { margin-top: 20px; }
#situations .billet-une, #situations { scroll-margin-top: 16px; }
.encadre-carto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--filet); border-radius: 6px; background: var(--carte); }
.encadre-carto-question { margin: 0; max-width: 560px; font-family: var(--titre); font-weight: 700; font-size: clamp(20px, 2vw, 24px); line-height: 1.25; color: var(--encre); }
.encadre-carto-ligne { margin: 6px 0 0; font-size: 15px; color: var(--gris); }
/* Illustrations (src/_data/illustrations.json) : dessin entier, jamais recadré ni étiré, sans cadre ajouté. */
.billet-visuel { margin: 4px auto clamp(20px, 3vw, 32px); }
.billet-visuel img, .billet-visuel img[width] { display: block; width: auto; max-width: 100%; height: auto; max-height: 360px; border-radius: 6px; }
@media (max-width: 699px) { .billet-visuel img { width: 100%; max-height: none; } }
.billet-miniature { width: 144px; height: 96px; object-fit: contain; background: none; border-radius: 4px; }
@media (max-width: 699px) { .billet-miniature { width: 84px; height: 56px; } }
.ligne-a-lire .ligne-titre-image { gap: 18px; }
.page-illustration { margin: 0 0 clamp(24px, 3vw, 36px); }
.page-illustration img { display: block; width: auto; max-width: 100%; height: auto; max-height: 300px; border-radius: 6px; }
.le-cenacle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.le-cenacle-interne { flex: 1 1 380px; }
.le-cenacle-image { flex: 0 1 420px; width: 100%; max-width: 420px; height: auto; border-radius: 6px; }
@media (max-width: 699px) { .le-cenacle-image { max-width: 100%; } }
.rejoindre-image { display: block; width: 100%; max-width: 360px; height: auto; border-radius: 6px; }
.question-illustration { margin: 0; }
.question-illustration img { display: block; width: auto; max-width: 100%; height: auto; max-height: 260px; border-radius: 6px; }
.bloc-question-interne { align-items: center; }
.bloc-question-image { flex: none; width: 144px; height: 96px; border-radius: 4px; }
.bloc-question-texte { flex: 1 1 320px; }
@media (max-width: 699px) { .bloc-question-image { display: none; } }
.rejoindre-haut > .rejoindre-image { margin: 24px auto 0; max-width: 260px; }
/* Rejoindre, grand écran : texte et illustration en deux colonnes, chacune réserve sa place. */
@media (min-width: 1100px) {
  .rejoindre-haut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); align-items: center; gap: clamp(40px, 5vw, 80px); max-width: 1200px; margin: 0 auto; padding-left: var(--marge); padding-right: var(--marge); }
  .rejoindre-haut > .rejoindre-texte { margin: 0; padding: 0; max-width: none; }
  .rejoindre-haut > .rejoindre-image { margin: 0; max-width: 100%; }
}
@media (max-width: 699px) { .billet-une { grid-template-columns: 1fr; } .billet-une-visuel img { max-height: 220px; width: auto; max-width: 100%; margin: 0 auto; } }
/* Métier, « Les lectures » : domaines et sous-parties. */
.lectures-domaine { margin: 32px 0 12px; font-family: var(--titre); font-weight: 700; font-size: clamp(20px, 2vw, 24px); color: var(--encre); }
.lectures-partie { margin: 18px 0 10px; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--accent); }
/* Accueil : vignettes réduites (96 × 64) pour que six billets tiennent sur un portable. */
#a-lire .billet-miniature, #loin .billet-miniature { width: 96px; height: 64px; }
@media (max-width: 699px) { #a-lire .billet-miniature, #loin .billet-miniature { width: 72px; height: 48px; } }
.accueil-ligne { margin: -6px 0 6px; max-width: 420px; font-size: 16px; line-height: 1.45; color: var(--encre); text-align: inherit; }
/* Zones cliquables d'au moins 44 px : sommaire et étapes du kit, renvois aux sources, liens des tableaux (Débuter, Se lancer). */
.kit-sommaire li, .kit-etapes li { margin: 0; }
.kit-sommaire a, .kit-etapes a { display: inline-flex; align-items: center; min-height: 44px; }
.kit-page .prose a[href="#sources"] { display: inline-block; min-width: 44px; min-height: 44px; padding: 10px 4px; margin: -10px 0; text-align: center; box-sizing: border-box; }
.debuter-page .prose td a, .kit-page .prose td a { display: inline-flex; align-items: center; min-height: 44px; }
.kit-page .prose ol li a, .debuter-page .prose ul li a { min-height: 44px; display: inline-flex; align-items: center; }
/* Repères de rémunération, téléphone : tableaux en défilement horizontal avec une indication, sans déborder de la page. */
.reperes-page { overflow-wrap: anywhere; }
.reperes-page .prose table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 699px) { .reperes-page .prose table::before { content: "Faites glisser le tableau →"; display: block; position: sticky; left: 0; padding: 0 0 6px; font-size: 13px; color: var(--gris); white-space: nowrap; } }
/* Menu : quatre entrées sur une ligne, même à 360 px. */
.entete-menu a { white-space: nowrap; }
@media (max-width: 420px) { .entete-menu { gap: 0 14px !important; } .entete-menu a { font-size: 15px; } }
.offre-lecture-courte { flex: 1 1 200px; font-size: 13px; line-height: 1.4; color: var(--gris); }
/* Événement organisé par le Cénacle : étiquette magenta. */
.badge-cenacle { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff; font-family: var(--texte, inherit); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; vertical-align: middle; }
/* Page d'un terme du lexique */
.terme-page .terme-carte { margin-top: 8px; }
.terme-titre a { color: inherit; text-decoration: none; }
.terme-titre a:hover { color: var(--accent); }
.terme-liens { margin-top: 32px; }
.terme-liens h2 { margin: 0 0 10px; font-family: var(--titre); font-size: 22px; }
.terme-liens ul { margin: 0; padding-left: 20px; }
.terme-liens li { margin-bottom: 8px; line-height: 1.5; }
/* Lectures de Métier : cartes compactes, sans vignette. */
.lectures-domaines { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 4px 0 8px; font-size: 15px; }
.lectures-domaines a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 600; }
.lectures-domaine { scroll-margin-top: 16px; }
/* Billets : image d'ouverture dans la colonne du texte, exergue, encadré, checklist. */
.ressource-texte .billet-visuel { margin: 0 0 28px; }
.ressource-texte .billet-visuel img { display: block; width: auto; max-width: 100%; height: auto; max-height: 320px; border-radius: 6px; }
@media (max-width: 699px) { .ressource-texte .billet-visuel img { width: 100%; max-height: none; } }
.exergue { margin: 40px 0; padding: 0; font-family: var(--titre); font-weight: 700; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.25; color: var(--accent); }
.encadre-visuel { margin: 32px 0; }
.encadre-visuel svg { display: block; width: 100%; height: auto; }
.encadre-visuel figcaption { margin-top: 8px; font-size: 14px; color: var(--gris); }
.checklist { margin: 28px 0; padding: 18px 22px; border: 1px solid var(--filet); border-left: 3px solid var(--accent); border-radius: 6px; background: var(--carte); }
.checklist-titre { margin: 0 0 10px !important; font-weight: 700; font-size: 16px; color: var(--encre); }
.checklist ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.45; }
.checklist li::before { content: none !important; }
.checklist-case { flex: none; width: 20px; height: 20px; margin-top: 3px; border: 2px solid var(--accent); border-radius: 4px; }
/* Billets : apparition en fondu et cercle des intertitres (désactivés si « moins d'animations »). */
.apparition-active .apparition { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.apparition-active .apparition.visible { opacity: 1; transform: none; }
.h2-cercle { width: .7em; height: .7em; margin-right: .35em; vertical-align: .02em; fill: none; stroke: var(--accent); stroke-width: 2; }
.h2-cercle circle { stroke-dasharray: 48; stroke-dashoffset: 48; transition: stroke-dashoffset .9s ease .15s; }
.visible .h2-cercle circle, h2.visible .h2-cercle circle, .trace .h2-cercle circle { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .apparition-active .apparition { opacity: 1; transform: none; transition: none; } .h2-cercle circle { transition: none; stroke-dashoffset: 0; } }
.billet .titre-page { font-weight: 700; }
/* Encadrés sur téléphone : la version étroite (schema-mobile) remplace la grande ; jamais de défilement horizontal. */
.schema-mobile { display: none; }
@media (max-width: 599px) {
  .schema-large { display: none; }
  .schema-mobile { display: block; }
}
.encadre-visuel svg { max-width: 100%; height: auto; }
/* Billet LinkedIn : formats en onglets, frise du rythme, bulle de la légitimité, profil annoté. */
.encadre-visuel.encadre-formats-onglets, .encadre-visuel.encadre-frise-rythme, .encadre-visuel.encadre-legitimite { overflow: visible; }
.encadre-formats-onglets::before, .encadre-frise-rythme::before, .encadre-legitimite::before { content: none !important; }
.formats-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.format-carte { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 10px 16px; border: 1.5px solid var(--encre); border-radius: 10px; background: var(--rose); color: var(--encre); font: inherit; text-align: center; cursor: pointer; }
.format-carte svg { width: 72px; height: 58px; }
.format-carte[aria-selected="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); background: var(--carte); }
.format-carte:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.format-titre { font-family: var(--titre); font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.1; }
.format-sous { font-family: var(--titre); font-weight: 700; font-size: 17px; color: var(--accent); }
.format-lignes { margin-top: 8px; font-size: 14px; line-height: 1.5; }
.formats-bandeau { margin: 10px 0 14px !important; padding: 10px 14px; border-radius: 8px; background: var(--encre); color: var(--rose); font-family: var(--titre); font-weight: 700; font-size: 17px; text-align: center; }
.format-panneau { margin-bottom: 14px; }
.format-panneau-titre { margin: 0 0 8px !important; font-size: 14px; font-weight: 600; color: var(--gris); }
.onglets-actifs .format-panneau-titre { display: none; }
@media (max-width: 699px) { .formats-cartes { grid-template-columns: 1fr; } .format-carte { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 10px; text-align: left; } .format-carte svg { width: 48px; height: 40px; } .format-lignes { flex-basis: 100%; text-align: center; } }
.frise-rythme { margin: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px 12px; padding: 18px; border-radius: 8px; background: var(--rose); }
.frise-temps { text-align: center; }
.frise-temps svg { display: block; width: 100%; height: auto; }
.frise-titre { margin: 0 0 6px !important; font-family: var(--titre); font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); color: var(--encre); }
.frise-legende { margin: 6px 0 0 !important; font-family: var(--titre); font-size: 17px; color: var(--encre); }
.frise-fleche { font-size: 28px; color: var(--encre); }
.frise-chute { grid-column: 1 / -1; text-align: center; font-family: var(--titre); font-style: italic; font-size: 15px; color: var(--encre); }
@media (max-width: 699px) { .frise-rythme { grid-template-columns: 1fr; } .frise-fleche { transform: rotate(90deg); justify-self: center; } }
.frise-attente .frise-temps, .frise-attente .frise-fleche, .frise-attente .frise-chute { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.frise-visible .frise-temps, .frise-visible .frise-fleche, .frise-visible .frise-chute { opacity: 1; transform: none; }
.frise-visible .frise-fleche { transition-delay: .5s; } .frise-visible .frise-publier { transition-delay: .9s; } .frise-visible .frise-chute { transition-delay: 1.3s; }
.frise-attente .frise-bulle { opacity: 0; transition: opacity .4s ease; }
.frise-visible .frise-bulle { opacity: 1; }
.frise-visible .frise-bulle:nth-of-type(2) { transition-delay: .2s; } .frise-visible .frise-bulle:nth-of-type(3) { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) { .frise-attente * { opacity: 1 !important; transform: none !important; transition: none !important; } }
.bulle-legitimite { position: relative; margin: 0; }
.bulle-legitimite img { display: block; width: 100%; height: auto; border-radius: 8px; }
.bulle-legitimite-texte { position: absolute; left: 34%; top: 10%; width: 60%; height: 58%; display: flex; align-items: center; justify-content: center; padding: 0 6%; text-align: center; font-family: var(--titre); font-weight: 700; font-size: clamp(17px, 3.2vw, 32px); line-height: 1.2; color: var(--encre); }
.encadre-profil-annote svg { min-width: 0; }
.question-avertissement-zone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 20px; align-items: center; }
.question-avertissement-zone .question-illustration img { width: 100%; max-height: none; }
@media (max-width: 699px) { .question-avertissement-zone { grid-template-columns: 1fr; } }
.encadre-visuel .bulle-legitimite-texte { margin: 0; font-size: clamp(17px, 3.2vw, 32px); color: var(--encre); }
/* Kit : statuts en cartes, chemin des cinq étapes. */
.statuts-cartes { margin: 20px 0 28px; padding: 0 !important; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 12px; }
.statuts-cartes li::before { content: none !important; }
.statut-carte { display: flex; flex-direction: column; gap: 8px; margin: 0 !important; padding: 16px 18px; border: 1px solid var(--filet); border-radius: 8px; background: var(--carte); font-size: 15px; line-height: 1.5; }
.statut-carte h3 { margin: 0; font-family: var(--titre); font-size: 20px; color: var(--encre); }
.statut-carte p { margin: 0 !important; }
.statut-carte p > span:first-child { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.statut-carte .lien-suite { margin-top: auto; display: inline-flex; align-items: center; min-height: 44px; }
.kit-etapes ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: etape; position: relative; }
.kit-etapes ol::before { content: ""; position: absolute; left: 10%; right: 10%; top: 22px; border-top: 2px dashed var(--accent); }
.kit-etapes li { counter-increment: etape; position: relative; text-align: center; padding: 0 6px; }
.kit-etapes li a { flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.35; text-decoration: none; }
.kit-etapes li a::before { content: counter(etape); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--rose); border: 2px solid var(--accent); color: var(--accent); font-family: var(--titre); font-weight: 700; font-size: 20px; }
.kit-etapes li a:hover::before { background: var(--accent); color: #fff; }
@media (max-width: 699px) { .kit-etapes ol { grid-template-columns: 1fr; gap: 6px; } .kit-etapes ol::before { left: 21px; right: auto; top: 22px; bottom: 22px; border-top: 0; border-left: 2px dashed var(--accent); } .kit-etapes li { text-align: left; padding: 0; } .kit-etapes li a { flex-direction: row; gap: 12px; } .kit-etapes li a::before { flex: none; } }
/* Repères de rémunération : graphiques et tableaux repliables. */
.graphique-salaires { margin: 20px 0 8px; padding: 18px; border-radius: 8px; background: var(--rose); }
.graphique-salaires figcaption { margin-bottom: 12px; font-size: 13px; color: var(--encre); font-weight: 600; }
.graphique-salaires ul { margin: 0; padding: 0 !important; list-style: none; display: grid; gap: 12px; }
.graphique-salaires li::before { content: none !important; }
.salaire-ligne { display: grid; grid-template-columns: 220px minmax(0, 1fr) 17em; align-items: center; gap: 6px 14px; margin: 0 !important; font-size: 14px; }
.salaire-poste { color: var(--encre); font-weight: 500; line-height: 1.3; }
.salaire-secteur { color: var(--gris); font-weight: 400; font-size: 12px; }
.salaire-piste { position: relative; height: 14px; border-radius: 7px; background: rgba(255,255,255,.7); }
.salaire-barre { position: absolute; top: 0; bottom: 0; border-radius: 7px; background: var(--accent); opacity: .35; }
.salaire-point { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--accent); border: 2px solid var(--fond); }
.salaire-valeurs { white-space: nowrap; text-align: right; justify-self: end; color: var(--encre); font-variant-numeric: tabular-nums; }
.salaire-milieu { color: var(--gris); }
@media (max-width: 699px) { .salaire-ligne { grid-template-columns: 1fr; } .salaire-valeurs { white-space: normal; text-align: left; justify-self: start; } }
.voir-tableau { margin: 0 0 24px; }
.voir-tableau summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--accent); }
/* Fin de billet : deux lectures associées. */
/* Posts d'exemple (billet LinkedIn) : du texte qui s'adapte à la largeur ; annotations à droite, au-dessus de chaque partie sur téléphone. */
.post-exemple { padding: 24px; border-radius: 8px; background: var(--rose); }
.post-carte { width: calc(100% - 180px); padding: 20px; border: 1px solid var(--filet); border-radius: 8px; background: var(--champ); font-size: 15px; line-height: 1.45; color: var(--encre); }
.post-tete { display: flex; align-items: center; gap: 12px; margin: 0 0 16px !important; }
.post-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--accent); background: var(--rose); }
.post-auteur { display: flex; flex-direction: column; font-size: 13px; color: var(--gris); }
.post-auteur strong { font-size: 15px; font-weight: 600; color: var(--encre); }
.post-partie { position: relative; }
.post-partie + .post-partie { margin-top: 14px; }
.post-partie p { margin: 0 !important; }
.post-annot { position: absolute; left: calc(100% + 28px); top: .1em; white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--accent); }
.post-annot::before { content: ""; display: inline-block; width: 18px; height: 2px; margin: 0 8px 4px 0; vertical-align: middle; background: var(--accent); }
.post-trou { font-weight: 600; color: var(--accent); }
@media (max-width: 599px) {
  .post-exemple { padding: 12px; }
  .post-carte { width: auto; padding: 16px; }
  .post-annot { position: static; display: block; margin-bottom: 2px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
  .post-annot::before { content: none; }
}
/* Rejoindre : ce que l'adhésion apporte, et comment ça se passe, en prose courte. */
.rejoindre-avantages { max-width: 720px; margin: 0; padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--filet); font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: var(--encre); }
.comment-texte { max-width: 720px; margin-top: 16px; }
.comment-texte p { margin: 0 0 14px; font-size: 17px; line-height: 1.65; }

/* Rythme des billets : une ligne presque entière entre deux paragraphes. */
.billet .prose > p { margin-bottom: 26px; }
/* Phrase à dire (billets) : ligne « > » dans la fiche ; texte courant en graisse 500, filet magenta à gauche. */
.billet .prose > blockquote { margin: 0 0 26px; padding: 0 0 0 18px; border-left: 3px solid var(--accent); border-radius: 0; background: none; font-size: inherit; font-weight: 500; line-height: inherit; color: var(--encre); }
.billet .prose > blockquote p { margin: 0; }
.billet .prose > blockquote p + p { margin-top: 10px; }
/* Billet : 40 px entre les métadonnées et le sommaire / l'illustration, 48 px entre l'illustration et le texte. */
.billet .ressource-tete { padding-bottom: 0; }
.billet .ressource-corps { padding-top: 40px; }
.billet .ressource-tete .billet-visuel { margin: 20px 0 0; }
.billet .ressource-tete .billet-visuel img { display: block; width: auto; max-width: 100%; height: auto; max-height: 320px; border-radius: 6px; }
@media (max-width: 699px) { .billet .ressource-tete .billet-visuel img { width: 100%; max-height: none; } }
.billet .prose > h2:first-child { margin-top: 0; }
/* Fin de billet : partage LinkedIn (bouton secondaire), puis la phrase « pour souffler » avec un filet magenta. */
.billet-partage { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 36px 0 0; }
.billet-partage p { margin: 0; font-size: 16px; color: var(--encre); }
.billet .souffle { margin: 32px 0 0; padding-left: 18px; border-left: 3px solid var(--accent); }
/* Carte de lecture, même modèle sur tout le site. */
.lecture-compacte { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--filet); border-radius: 6px; background: var(--carte); color: var(--encre); height: 100%; }
.lecture-compacte p { margin: 0; }
.lecture-compacte-meta { font-size: 12px; color: var(--accent); }
.lecture-compacte-titre { font-weight: 600; font-size: 15px; line-height: 1.3; }
.lecture-compacte-titre a { color: var(--encre); text-decoration: none; }
.lecture-compacte-titre a:hover { color: var(--accent); text-decoration: underline; }
.lecture-compacte-source { font-size: 13px; color: var(--gris); }
.lecture-compacte-pourquoi { font-size: 14px; line-height: 1.45; color: var(--encre); }
.lecture-compacte-details { margin-top: auto; }
.lecture-compacte-details summary { cursor: pointer; display: flex; align-items: center; min-height: 36px; font-size: 13px; color: var(--gris); }
.lecture-compacte-details dl { margin: 4px 0 0; display: grid; gap: 6px; font-size: 13px; }
.lecture-compacte-details dt { font-weight: 600; color: var(--encre); }
.lecture-compacte-details dd { margin: 0; color: var(--gris); }
.lectures-plus { margin-top: 12px; }
.lectures-plus > summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--accent); border-radius: 6px; color: var(--accent); font-weight: 600; cursor: pointer; list-style: none; }
.lectures-plus > summary::-webkit-details-marker { display: none; }
.lectures-plus[open] > summary { margin-bottom: 12px; }
/* Cartographie : sommaire des blocs ; le sigle d'un titre n'est pas souligné en pointillé. */
.carte-sommaire { margin-top: 8px; margin-bottom: 24px; }
.carte-sommaire ol { margin: 8px 0 0; padding-left: 1.4em; display: grid; gap: 6px; font-size: 16px; }
h1 abbr[title], h2 abbr[title], h3 abbr[title] { text-decoration: none; border: 0; cursor: inherit; }
/* Offres : ligne de liens au-dessus des filtres ; dossier « Préparer l'entretien » qui s'ouvre sur la question. */
.offres-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; margin-bottom: 20px; font-size: 15px; }
.offres-liens a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
.preparation > .offre-question { margin: 0 0 18px; }
/* Repères de rémunération : liens vers les pays. */
.reperes-pays { display: flex; flex-wrap: wrap; gap: 8px; }
.reperes-pays a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--accent); border-radius: 999px; color: var(--accent); font-weight: 600; text-decoration: none; }
.reperes-pays a:hover { background: var(--accent); color: #fff; }
/* Rejoindre : bouton vers le formulaire. Se lancer : retour au sommaire. Se lancer et Débuter : intertitres comme ceux des billets. */
.rejoindre-bouton-haut { margin: 0; }
.retour-sommaire { margin: 8px 0 0 !important; font-size: 14px; }
.retour-sommaire a { color: var(--gris); text-underline-offset: 3px; }
.retour-sommaire a:hover { color: var(--accent); }
.debuter-page .prose h2 { margin: 40px 0 14px; font-family: var(--titre); font-weight: 700; font-size: clamp(21px, 2.4vw, 24px); line-height: 1.25; letter-spacing: -.005em; }
/* Accueil : bloc de droite centré sur toutes les largeurs. */
.accueil-bloc { align-items: center; text-align: center; }
.accueil-boutons { justify-content: center; }
/* Billet, illustration d'ouverture : colonne du texte sur ordinateur (3:2, sans recadrage), sous les métadonnées sur téléphone. */
.billet .billet-visuel-colonne { display: none; }
@media (min-width: 900px) {
  .billet .billet-visuel-tete { display: none; }
  .billet .ressource-texte .billet-visuel-colonne { display: block; margin: 0 0 8px; }
  .billet .billet-visuel-colonne img { display: block; width: 100%; max-width: none; max-height: none; height: auto; aspect-ratio: 3 / 2; border-radius: 6px; }
}
.offre-langue { margin: 2px 0 0; font-size: 13px; color: var(--gris); }
.terme-notions { margin: 6px 0 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: 16px; line-height: 1.5; }
.comment-ca-se-passe .rejoindre-ensuite { margin-top: 20px; }
.rejoindre-ensuite-titre { margin: 0; font-size: 17px; font-weight: 600; }

/* Refonte ivoire et corail (octobre 2026) : titres en Playfair 900, en-têtes de rubrique sur le fond de la page
   avec un filet aubergine, accroches en corail vif sans bandeau, cartes transparentes à filet fin. */
.titre-section, .titre-page, .titre-bloc, .billet .titre-page, .billets-groupe-titre, .billet-une-titre, .rubrique-sous-titre,
.appel-titre, .fin-titre, .bloc-question-titre, .encadre-carto-question, .lectures-domaine, .question-titre, .terme-titre,
.actualite-titre, .statut-carte h3, .kit-etapes h2, .terme-liens h2, .loin-titre, .billet .prose h2, .debuter-page .prose h2,
.accueil-accroche { font-weight: 900; letter-spacing: -.02em; }
.rubrique-entete { background: transparent; border-bottom: 2px solid var(--encre); }
.rubrique-entete .titre-bloc { font-size: clamp(52px, 6.5vw, 92px); line-height: .95; }
/* Phrases d'accroche colorées (« Alors on l'écrit », « Arrivez à l'entretien… ») : corail vif, 24 px au moins. */
.bandeau, .leadership-intro span, .rubrique-entete .intro-suite, .intro-chute { display: block; width: auto; margin: 6px 0 0; padding: 0; background: none; color: var(--accent-vif); font-family: var(--titre); font-weight: 900; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -.02em; text-transform: none; }
.rubrique-entete .bandeau { font-size: clamp(24px, 2.6vw, 32px); }
.rubrique-entete .intro-chute { margin-top: 2px; }
.reperes-page .intro-chute { margin: 6px 0 14px; }
/* Accueil : slogan sans bandeau, fin de phrase en corail vif. */
.accueil-accroche { margin-bottom: 8px; font-size: clamp(32px, 8.5vw, 46px); line-height: 1.1; }
.accueil-accroche-fin { color: var(--accent-vif); }
/* Grands tracés : cercle de l'accueil et de l'appel à rejoindre. */
.cercle-trace, .appel-cercle { stroke: var(--accent-vif); }
.exergue { color: var(--accent-vif); }
/* Sur les blocs roses, le corail des petits textes (liens, étiquettes) est foncé pour garder 4,5:1 ; les boutons gardent le corail profond. */
.citation, .en-ce-moment, .bloc-rose, .mission-cles, .offre-avant, .terme-carte, .terme-bandeau, .encadre-discret, .bloc-question-interne,
.encadre-carriere, .kit-etapes, .format-carte, .frise-rythme, .graphique-salaires, .post-exemple { --accent: var(--accent-sur-rose); }
/* Bouton posé sur un fond sombre : rose pâle, texte sombre (jamais corail). */
:is(.bloc-sombre, .actualites, .vedette, .en-bref, .formulaire-sombre, .relecture) :is(.pilule-accent, .pilule-accent:hover) { background: var(--rose); color: var(--encre); }
:is(.bloc-sombre, .actualites, .vedette, .en-bref, .formulaire-sombre, .relecture) .pilule-accent:hover { background: #FFFFFF; }
/* Titres, intertitres, logo et navigation en --encre-titres ; le texte courant garde --encre. Sur fond sombre, les titres restent clairs. */
:where(h1, h2, h3, h4, .titre-section, .titre-page, .titre-bloc, .titre-rubrique, .accueil-nom, .accueil-accroche, .rubrique-titre, .billet-une-titre,
  .billets-groupe-titre, .rubrique-sous-titre, .appel-titre, .fin-titre, .bloc-question-titre, .encadre-carto-question, .lectures-domaine,
  .question-titre, .terme-titre, .usage-titre, .carte-rubrique-titre, .ligne-titre, .billet-ligne-titre, .lecture-compacte-titre, .lecture-compacte-titre a,
  .agenda-titre a, .agenda-jour, .loin-titre, .format-titre, .frise-titre, .statut-carte h3, .kit-etapes h2, .terme-liens h2, .checklist-titre,
  .entete-nom, .entete-menu a, .sommaire a, .rubrique-sommaire strong, .kit-sommaire a, .carte-sommaire a, .onglets [role="tab"][aria-selected="true"]):not(:is(.bloc-sombre, .actualites, .vedette, .en-bref, .formulaire-sombre, .relecture) *) { color: var(--encre-titres); }
.entete-menu a[aria-current] { color: var(--accent); }
/* Sur fond sombre, le corail profond descend à 3:1 : les petits éléments corail (liens, pictogrammes, contour de focus) y passent en rose. */
.bloc-sombre, .actualites, .vedette, .en-bref, .formulaire-sombre, .relecture { --accent: var(--rose); }
/* Encadrés-schémas : fond transparent, filet de 2 px au-dessus, filet fin dessous, sans coins arrondis.
   Les filets sont tracés ici (et non dans le SVG) pour garder leur épaisseur quelle que soit la largeur d'affichage. */
.encadre-svg, .schema svg { border-top: 2px solid var(--encre-titres); border-bottom: 1px solid rgba(61, 15, 31, 0.25); border-radius: 0; background: transparent; }
/* Menu, petits téléphones (moins de 360 px) : les quatre entrées tiennent sur une ligne sans déborder.
   Liens en 14 px répartis sur toute la largeur ; au-delà de 359 px, rien ne change. */
@media (max-width: 359px) { .entete-menu { justify-content: space-between; gap: 0 !important; } .entete-menu a { font-size: 14px; } }
/* Se lancer : formule du tarif en encadré ; tableaux de texte qui défilent seuls, jamais la page. */
.encadre-formule { margin: 24px 0 !important; padding: 16px 20px; border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; background: var(--rose); font-weight: 600; font-size: 17px; line-height: 1.5; color: var(--encre); }
.kit-intro { margin-bottom: 28px; }
.kit-page .prose td, .kit-page .prose th { white-space: normal; min-width: 170px; font-size: 15px; line-height: 1.45; }
.kit-page .prose td:first-child, .kit-page .prose th:first-child { min-width: 130px; font-weight: 600; }
@media (max-width: 699px) { .kit-page .prose table::before { content: "Faites glisser le tableau →"; display: block; position: sticky; left: 0; padding: 0 0 6px; font-size: 13px; font-weight: 400; color: var(--gris); white-space: nowrap; } }