/* ============================================================
   NZELA — Design system (Studio JeJe)
   Forest green · Terracotta · Crème
   Signature : le « chemin » — ligne pointillée qui guide l'œil,
   et la Boussole centrale du menu mobile.
   ============================================================ */

:root {
  --foret: #1B4332;
  --foret-2: #2D6A4F;
  --foret-3: #40916C;
  --terre: #C65D3B;
  --terre-2: #E07A5F;
  --creme: #FAF3E7;
  --creme-2: #F1E6D2;
  --encre: #21201C;
  --gris: #6B6459;
  --blanc: #FFFFFF;
  --ombre: 0 10px 30px rgba(27, 67, 50, 0.12);
  --rayon: 18px;
  --nav-mobile-h: 68px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: "Outfit", system-ui, sans-serif;
  background: var(--creme);
  color: var(--encre);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display { font-family: "Fraunces", Georgia, serif; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.conteneur { width: min(1120px, 92%); margin-inline: auto; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.7rem; border-radius: 999px; border: none;
  font-weight: 600; font-size: 1rem; transition: transform .15s, box-shadow .15s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { background: var(--creme-2); color: var(--gris); box-shadow: none; cursor: not-allowed; transform: none; }
.btn-terre { background: var(--terre); color: var(--blanc); box-shadow: 0 6px 18px rgba(198, 93, 59, .35); }
.btn-terre:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(198, 93, 59, .45); }
.btn-foret { background: var(--foret); color: var(--creme); }
.btn-contour { background: transparent; border: 2px solid var(--foret); color: var(--foret); }

/* ---------- Barre de navigation (desktop) ---------- */
.nav-haut {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 243, 231, .88); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--creme-2);
}
.nav-haut .conteneur {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.logo {
  font-family: "Fraunces", serif; font-weight: 700; font-size: 1.6rem;
  color: var(--foret); letter-spacing: -.02em;
}
.logo em { color: var(--terre); font-style: normal; }
.nav-liens { display: flex; gap: 2rem; align-items: center; }
.nav-liens a { font-weight: 500; color: var(--gris); transition: color .15s; white-space: nowrap; }
.nav-liens a:hover, .nav-liens a.actif { color: var(--foret); }
.nav-liens a.btn { justify-content: center; }
.nav-liens a.btn-terre, .nav-liens a.btn-terre:hover,
.nav-liens a.btn-foret, .nav-liens a.btn-foret:hover { color: var(--blanc); }

/* Cloche notifications (base.html) : visible seulement connecté, badge du
   nombre de non-lues (apps.notifications.context_processors). */
.nav-cloche { position: relative; font-size: 1.15rem; line-height: 1; }
.badge-notif {
  position: absolute; top: -8px; right: -10px;
  background: #D94040; color: var(--blanc); font-size: .68rem; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.badge-notif-inline { position: static; display: inline-flex; margin-left: .3rem; }

/* Bascule FR/EN (base.html, nav desktop + tiroir mobile) */
.form-langue { display: flex; gap: .2rem; align-items: center; }
.form-langue button {
  font: inherit; font-size: .8rem; font-weight: 600; color: var(--gris);
  background: none; border: none; cursor: pointer; padding: .2rem .4rem;
  border-radius: 6px;
}
.form-langue button.actif { color: var(--foret); background: var(--creme); }

/* Verrouillage de la nav (bachelier "passe le bac cette année" tant que son
   test d'orientation n'est pas terminé) — voir apps.orientation.context_processors. */
.nav-verrou { pointer-events: none; opacity: .4; cursor: not-allowed; }

/* Menu « Plus » (espace équipe uniquement, equipe/base_equipe.html) : liens
   secondaires de l'outillage interne. Le site public (base.html) utilise
   désormais le menu flottant ci-dessous à la place. */
.nav-plus { position: relative; }
.nav-plus-bouton {
  display: flex; align-items: center; gap: .3rem;
  font: inherit; font-weight: 500; color: var(--gris);
  background: none; border: none; cursor: pointer; padding: 0;
  transition: color .15s;
}
.nav-plus-bouton:hover { color: var(--foret); }
.nav-plus-chevron { font-size: .7rem; transition: transform .15s; }
.nav-plus-bouton[aria-expanded="true"] .nav-plus-chevron { transform: rotate(180deg); }
.nav-plus-panel {
  position: absolute; top: calc(100% + 14px); right: 0;
  min-width: 220px; background: var(--blanc); border-radius: 14px;
  border: 1px solid var(--creme-2); box-shadow: 0 18px 40px rgba(27,67,50,.16);
  padding: .5rem; display: flex; flex-direction: column; gap: .1rem;
  max-height: calc(100vh - 90px); overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.nav-plus-panel.ouvert { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-plus-panel a {
  padding: .6rem .8rem; border-radius: 9px; font-size: .92rem;
  white-space: nowrap; color: var(--gris);
}
.nav-plus-panel a:hover, .nav-plus-panel a.actif { background: var(--creme); color: var(--foret); }

/* Menu flottant (base.html) : sur toutes les pages, un bouton fixe qui
   ouvre les liens qu'on veut souvent retrouver au premier coup d'œil
   (Publications, Témoignages, Études à l'étranger, Mon profil, Parcours) —
   remplace l'ancien menu « Plus » caché dans la barre du haut. */
.menu-flottant { position: fixed; right: 22px; bottom: 22px; z-index: 70; }
.menu-flottant-bouton {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--foret); color: var(--creme); border: none;
  font-size: 1.4rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px rgba(27, 67, 50, .35);
  transition: transform .15s;
}
.menu-flottant-bouton:hover { transform: scale(1.05); }
.menu-flottant-panel {
  position: absolute; right: 0; bottom: calc(100% + 14px);
  min-width: 230px; background: var(--blanc); border-radius: 14px;
  border: 1px solid var(--creme-2); box-shadow: 0 18px 40px rgba(27,67,50,.16);
  padding: .5rem; display: flex; flex-direction: column; gap: .1rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.menu-flottant-panel.ouvert { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-flottant-panel a {
  padding: .6rem .8rem; border-radius: 9px; font-size: .92rem;
  white-space: nowrap; color: var(--gris);
}
.menu-flottant-panel a:hover, .menu-flottant-panel a.actif { background: var(--creme); color: var(--foret); }
.menu-flottant-panel hr { border: none; border-top: 1px solid var(--creme-2); margin: .4rem 0; }

@media (max-width: 768px) {
  .menu-flottant { bottom: calc(var(--nav-mobile-h) + 28px); right: 16px; }
}

/* Bouton hamburger (mobile uniquement — ouvre le tiroir de menu complet) */
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 0;
}
.nav-hamburger span { display: block; height: 2px; width: 22px; background: var(--foret); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Tiroir de menu mobile (liste complète des liens) — masqué via opacité/
   visibilité (jamais display:none) pour que la transition de glissement
   fonctionne à l'ouverture comme à la fermeture. */
.menu-mobile-overlay {
  position: fixed; inset: 0; background: rgba(27,67,50,.5);
  z-index: 250; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.menu-mobile-overlay.ouvert { opacity: 1; visibility: visible; }
.menu-mobile-tiroir {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(300px, 82vw);
  background: var(--creme); box-shadow: -12px 0 30px rgba(0,0,0,.2);
  display: flex; flex-direction: column; padding: 1.2rem 1.4rem 2rem;
  transform: translateX(100%); transition: transform .25s ease;
  overflow-y: auto;
}
.menu-mobile-overlay.ouvert .menu-mobile-tiroir { transform: translateX(0); }
.menu-mobile-entete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.menu-mobile-tiroir a {
  padding: .85rem .3rem; font-weight: 500; color: var(--gris);
  border-bottom: 1px solid var(--creme-2);
}
.menu-mobile-tiroir a.actif { color: var(--foret); font-weight: 700; }
.menu-mobile-tiroir a.btn { justify-content: center; border-bottom: none; margin-top: .8rem; }
.menu-mobile-tiroir a.btn-terre, .menu-mobile-tiroir a.btn-foret { color: var(--blanc); }
.menu-mobile-tiroir a.btn-contour { color: var(--foret); }
.menu-mobile-tiroir hr { border: none; border-top: 1px solid var(--creme-2); margin: .5rem 0; }

/* ---------- Le chemin (signature) ---------- */
.chemin-svg { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.chemin-svg path {
  fill: none; stroke: var(--terre); stroke-width: 3;
  stroke-dasharray: 2 12; stroke-linecap: round; opacity: .55;
  animation: avancer 40s linear infinite;
}
@keyframes avancer { to { stroke-dashoffset: -560; } }
@media (prefers-reduced-motion: reduce) {
  .chemin-svg path { animation: none; }
  .apparait { transition: none !important; }
  .badge-verifie::before, .section-titre::after, .heros-orbe, .heros-orbes,
  .ticker-piste, .etab-carte, .carte-lueur::after, .etab-carte::after {
    animation: none !important; transform: none !important;
  }
}

/* ---------- Héros ---------- */
.heros {
  position: relative; overflow: hidden;
  background: var(--foret); color: var(--creme);
  padding: 5.5rem 0 6.5rem;
}
.heros h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.08;
  font-weight: 600; letter-spacing: -.02em; max-width: 15ch;
}
.heros h1 .souligne {
  color: var(--terre-2);
  text-decoration: underline wavy var(--terre) 3px;
  text-underline-offset: 8px;
}
.heros p.accroche { font-size: 1.2rem; max-width: 46ch; margin: 1.4rem 0 2.2rem; color: #D9E5DD; }
.heros-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.heros .conteneur { position: relative; z-index: 1; }

/* Halos vivants du héros — dérivent seuls, réagissent en plus à la souris
   (voir nzela.js). Purement décoratif, jamais devant le contenu (z-index 0
   sous .conteneur, pointer-events: none). */
.heros-orbes {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  transform: translate(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px));
  transition: transform .25s ease-out;
}
.heros-orbe { position: absolute; border-radius: 50%; filter: blur(64px); }
.heros-orbe-1 {
  width: 340px; height: 340px; top: -70px; right: 8%;
  background: radial-gradient(circle, rgba(64, 145, 108, .45), transparent 70%);
  animation: derive-orbe-1 9s ease-in-out infinite;
}
.heros-orbe-2 {
  width: 260px; height: 260px; bottom: -50px; left: 5%;
  background: radial-gradient(circle, rgba(224, 122, 95, .35), transparent 70%);
  animation: derive-orbe-2 11s ease-in-out infinite;
}
@keyframes derive-orbe-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-28px, 30px) scale(1.16); }
}
@keyframes derive-orbe-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(24px, -20px) scale(1.1); }
}
.badge-verifie {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(250, 243, 231, .12); border: 1px solid rgba(250,243,231,.25);
  padding: .4rem 1rem; border-radius: 999px; font-size: .88rem; margin-bottom: 1.4rem;
}
.badge-verifie::before {
  content: "●"; color: var(--terre-2); display: inline-block;
  animation: pouls-verifie 1.8s ease-in-out infinite;
}
@keyframes pouls-verifie {
  0%, 100% { opacity: .5; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.2); text-shadow: 0 0 8px currentColor; }
}

/* ---------- Bandeau défilant (mots-clés, landing.html) ---------- */
.ticker {
  background: linear-gradient(90deg, var(--foret), var(--foret-2) 35%, var(--foret-2) 65%, var(--foret));
  overflow: hidden; padding: .9rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ticker-piste { display: flex; width: max-content; gap: 2.4rem; align-items: center; animation: defiler 28s linear infinite; }
.ticker-piste .mot {
  font-size: .86rem; font-weight: 600; letter-spacing: .03em;
  color: var(--creme); white-space: nowrap; opacity: .95;
}
.ticker-piste .sep {
  width: 5px; height: 5px; border-radius: 50%; background: var(--terre-2);
  flex-shrink: 0; box-shadow: 0 0 8px rgba(224, 122, 95, .7);
}
@keyframes defiler { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker:hover .ticker-piste { animation-play-state: paused; }

/* ---------- Cartes ---------- */
.grille { display: grid; gap: 1.4rem; }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-2 { grid-template-columns: repeat(2, 1fr); }
.carte {
  background: var(--blanc); border-radius: var(--rayon);
  padding: 1.8rem; box-shadow: var(--ombre);
  border: 1px solid var(--creme-2);
  transition: transform .2s, box-shadow .2s;
}
.carte:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(27,67,50,.16); }

/* Reflet lumineux au survol — classe optionnelle, à ajouter aux cartes de
   catalogue/vitrine (établissements, bourses, procédures...), jamais aux
   cartes de formulaire/tableau de bord où le mouvement distrairait. */
.carte-lueur { position: relative; overflow: hidden; }
.carte-lueur::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 35%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); pointer-events: none;
}
.carte-lueur:hover::after { animation: balayage-carte .8s ease forwards; }
@keyframes balayage-carte { from { left: -60%; } to { left: 130%; } }
.carte .icone {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; font-size: 1.5rem;
  background: var(--creme); margin-bottom: 1rem;
}
.carte h3 { font-size: 1.25rem; color: var(--foret); margin-bottom: .5rem; }
.carte p { color: var(--gris); font-size: .96rem; }

/* Pastille budget (vert / orange / rouge) */
.pastille { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .4rem; }
.pastille.ok { background: #2F9E44; }
.pastille.juste { background: #E8890C; }
.pastille.hors { background: #D94040; }

/* Score de compatibilité */
.score-anneau {
  --p: 87; width: 64px; height: 64px; border-radius: 50%;
  background: conic-gradient(var(--terre) calc(var(--p) * 1%), var(--creme-2) 0);
  display: grid; place-items: center; font-weight: 700; color: var(--foret);
}
.score-anneau span { background: var(--blanc); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: .9rem; }

/* ---------- Sections ---------- */
.section { padding: 4.5rem 0; }
.section-titre {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem); color: var(--foret); margin-bottom: .6rem;
  position: relative; display: inline-block;
}
.section-titre::after {
  content: ""; position: absolute; left: 0; bottom: -8px; height: 3px; width: 46px;
  border-radius: 2px; background: linear-gradient(90deg, var(--terre), var(--terre-2));
  animation: glisser-soulignement 2.8s ease-in-out infinite;
}
@keyframes glisser-soulignement {
  0%, 100% { transform: translateX(0); width: 46px; }
  50% { transform: translateX(14px); width: 64px; }
}
.section-sous { color: var(--gris); max-width: 56ch; margin-bottom: 2.4rem; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .14em; font-size: .78rem;
  font-weight: 700; color: var(--terre); margin-bottom: .8rem; display: block;
}

/* Apparition au scroll */
.apparait { opacity: 0; transform: translateY(22px); transition: opacity .6s, transform .6s; }
.apparait.visible { opacity: 1; transform: none; }

/* ---------- Favoris ---------- */
.btn-coeur {
  background: none; border: none; cursor: pointer; font-size: 1.4rem;
  line-height: 1; padding: .3rem; color: var(--gris); transition: transform .15s;
}
.btn-coeur:hover { transform: scale(1.15); }
.btn-coeur.actif { color: #D94040; }
.btn-coeur.actif::before { content: "♥"; }
.btn-coeur:not(.actif)::before { content: "♡"; }

/* ---------- Fil d'actualités (dashboard) ---------- */
.fil-carte {
  background: var(--blanc); border-radius: var(--rayon); padding: 1.3rem 1.5rem;
  border-left: 5px solid var(--foret-3); box-shadow: var(--ombre); margin-bottom: 1.1rem;
}
.fil-carte.officiel { border-left-color: var(--terre); }
.fil-badge {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: .18rem .65rem; border-radius: 999px; background: var(--creme-2); color: var(--foret);
}
.fil-carte.officiel .fil-badge { background: var(--terre); color: var(--blanc); }
.compte-rebours {
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 700;
  color: var(--terre); font-size: .9rem;
}

/* ---------- Fil de publications façon Facebook (liste.html) ---------- */
.pub-fil { max-width: 600px; margin: 0 auto; }
.pub-carte {
  background: var(--blanc); border-radius: 18px; border: 1px solid var(--creme-2);
  box-shadow: 0 3px 14px rgba(27,67,50,.06); margin-bottom: 1.4rem; overflow: hidden;
}
.pub-entete { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.2rem .7rem; }
.pub-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: var(--blanc); font-weight: 700; font-size: 1.05rem;
  background: var(--foret-3);
}
.pub-avatar.officiel { background: var(--terre); }
.pub-meta-source { font-weight: 700; color: var(--foret); font-size: .92rem; }
.pub-meta-sous { color: var(--gris); font-size: .78rem; margin-top: .1rem; }
.pub-lien { display: block; color: inherit; text-decoration: none; }
.pub-titre { padding: 0 1.2rem; margin-bottom: .4rem; font-size: 1.05rem; color: var(--foret); }
.pub-texte-bloc { padding: 0 1.2rem; margin-bottom: .9rem; }
.pub-texte {
  color: var(--foret-2); font-size: .92rem; line-height: 1.5; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.pub-texte.etendu { -webkit-line-clamp: unset; overflow: visible; }
.pub-lire-plus {
  background: none; border: none; color: var(--terre); font-weight: 700; font-size: .85rem;
  cursor: pointer; padding: .3rem 0 0; margin: 0;
}
.pub-lire-plus:hover { text-decoration: underline; }
.pub-media { width: 100%; display: block; background: #000; position: relative; }
.pub-media img { width: 100%; max-height: 420px; object-fit: cover; display: block; }
.pub-media-video { position: relative; cursor: pointer; aspect-ratio: 16/9; }
.pub-media-video img { height: 100%; }
.pub-media-video::after {
  content: "▶"; position: absolute; inset: 0; margin: auto; width: 62px; height: 62px;
  background: rgba(0,0,0,.55); color: var(--blanc); border-radius: 50%; font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center; padding-left: 4px;
  pointer-events: none; transition: opacity .2s;
}
.pub-media-video.en-lecture::after { opacity: 0; }
.pub-media-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.pub-media-video .pub-video-son {
  position: absolute; bottom: 10px; right: 10px; z-index: 2; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(0,0,0,.55); color: var(--blanc); border: none;
  display: flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer;
}
.pub-lien-externe {
  display: block; margin: 0 1.2rem .9rem; padding: .7rem .9rem; border-radius: 12px;
  background: var(--creme); border: 1px solid var(--creme-2); text-decoration: none;
}
.pub-lien-domaine {
  display: block; color: var(--gris); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: .15rem;
}
.pub-lien-texte {
  display: block; color: var(--foret); font-size: .85rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pub-actions {
  display: flex; align-items: center; gap: 1.4rem; padding: .8rem 1.2rem;
  border-top: 1px solid var(--creme-2); margin-top: .2rem;
}
.pub-actions .btn-coeur { font-size: 1.3rem; }
.pub-nb-likes { color: var(--gris); font-size: .85rem; }
.pub-nb-vues { color: var(--gris); font-size: .85rem; margin-left: auto; }
.pub-toggle-commentaires {
  background: none; border: none; color: var(--gris); font-size: .85rem; cursor: pointer; padding: 0;
}
.pub-toggle-commentaires:hover { color: var(--terre); }
#pub-sentinelle { height: 1px; }
#pub-chargement-suite { text-align: center; padding: 1.4rem 0; color: var(--gris); font-size: .88rem; }

/* ---------- Commentaires en direct dans le fil (carte publication) ---------- */
.pub-commentaires-panel {
  padding: .2rem 1.2rem 1.1rem; border-top: 1px solid var(--creme-2);
  animation: pub-panel-ouverture .18s ease-out;
}
@keyframes pub-panel-ouverture {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.pub-commentaires-liste { margin-top: .8rem; }
.pub-commentaires-liste:empty { margin-top: 0; }
.pub-form-commentaire { display: flex; gap: .6rem; margin-top: .8rem; }
.pub-champ-commentaire {
  flex: 1; padding: .6rem .9rem; border-radius: 999px; border: 1.5px solid var(--creme-2);
  background: var(--blanc); font-size: .88rem;
}
.pub-connexion-requise { display: block; margin-top: .6rem; color: var(--terre); font-weight: 600; font-size: .88rem; }
.pub-commentaires-chargement { color: var(--gris); font-size: .85rem; text-align: center; padding: .6rem 0; }

/* ---------- Commentaires (fiche publication) ---------- */
.commentaire-carte { display: flex; gap: .7rem; margin-bottom: 1rem; }
.commentaire-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: var(--foret-3);
  color: var(--blanc); display: grid; place-items: center; font-weight: 700; font-size: .85rem;
}
.commentaire-bulle { background: var(--creme); border-radius: 14px; padding: .6rem .9rem; flex: 1; }
.commentaire-auteur { font-weight: 700; color: var(--foret); font-size: .85rem; }
.commentaire-texte { color: var(--foret-2); font-size: .9rem; margin-top: .15rem; }
.commentaire-date { color: var(--gris); font-size: .74rem; margin-top: .3rem; }
.commentaire-supprimer {
  background: none; border: none; color: var(--gris); font-size: .78rem; cursor: pointer; padding: 0;
  margin-top: .3rem; margin-left: .8rem;
}
.commentaire-supprimer:hover { color: #D94040; }

/* ---------- Menu mobile personnalisé (bottom nav) ---------- */
.nav-mobile { display: none; }

@media (max-width: 768px) {
  .nav-liens { display: none; }
  .nav-hamburger { display: flex; }
  body { padding-bottom: calc(var(--nav-mobile-h) + 18px); }
  .grille-3, .grille-2 { grid-template-columns: 1fr; }
  .heros { padding: 3.5rem 0 4.5rem; }

  .nav-mobile {
    display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px;
    height: var(--nav-mobile-h); z-index: 60;
    background: var(--foret); border-radius: 22px;
    box-shadow: 0 12px 32px rgba(27, 67, 50, .4);
    justify-content: space-around; align-items: center;
    padding-inline: .4rem;
  }
  .nav-mobile a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    color: #9DBCA9; font-size: .66rem; font-weight: 600; padding-top: 4px;
    transition: color .15s;
  }
  .nav-mobile a .ico { font-size: 1.25rem; line-height: 1; }
  .nav-mobile a.actif { color: var(--creme); }
  .nav-mobile a.actif .ico { transform: translateY(-1px); }

  /* La Boussole : bouton central surélevé, cœur de l'app */
  .nav-mobile a.boussole {
    flex: 0 0 74px; position: relative; top: -22px;
  }
  .nav-mobile a.boussole .ico {
    width: 60px; height: 60px; border-radius: 50%;
    background: var(--terre); color: var(--blanc);
    display: grid; place-items: center; font-size: 1.6rem;
    border: 5px solid var(--creme);
    box-shadow: 0 8px 20px rgba(198, 93, 59, .5);
    transition: transform .15s;
  }
  .nav-mobile a.boussole:active .ico { transform: scale(.92); }
  .nav-mobile a.boussole span.libelle { color: var(--creme); margin-top: 2px; }
}

/* ---------- Pied de page ---------- */
.pied { background: var(--foret); color: #B9CFC1; padding: 3rem 0 2rem; margin-top: 3rem; }
.pied .logo { color: var(--creme); }

/* ---------- Accessibilité ---------- */
:focus-visible { outline: 3px solid var(--terre); outline-offset: 3px; border-radius: 6px; }

/* ---------- Formulaires (inscription établissement, etc.) ---------- */
.form-carte {
  background: var(--blanc); border-radius: 20px; padding: 2.4rem;
  border: 1px solid var(--creme-2); box-shadow: var(--ombre);
}
.form-grille { display: grid; gap: 1.3rem; grid-template-columns: repeat(2, 1fr); }
.form-grille .pleine-largeur { grid-column: 1 / -1; }
.champ label { display: block; font-weight: 600; color: var(--foret); margin-bottom: .35rem; font-size: .92rem; }
.champ .aide { font-size: .8rem; color: var(--gris); margin-top: .3rem; }
.champ input[type="text"], .champ input[type="email"], .champ input[type="url"],
.champ input[type="tel"], .champ input[type="file"], .champ input[type="password"],
.champ input[type="number"], .champ input[type="date"], .champ input[type="datetime-local"],
.champ select, .champ textarea {
  width: 100%; padding: .7rem .9rem; border-radius: 10px; border: 1.5px solid var(--creme-2);
  background: var(--creme); font-family: inherit; font-size: .96rem; color: var(--foret);
}
.champ textarea { min-height: 90px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--foret-3); outline: none; }
.champ .erreurs { color: #D94040; font-size: .82rem; margin-top: .3rem; }
.champ-mdp { position: relative; }
.champ-mdp input[type="password"], .champ-mdp input[type="text"] { padding-right: 2.6rem; }
.toggle-mdp {
  position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 1.05rem; line-height: 1;
  padding: .2rem; color: var(--gris);
}
.cases-cycle ul { list-style: none; display: flex; gap: .8rem; flex-wrap: wrap; }
.cases-cycle li { display: flex; align-items: center; gap: .5rem; }
.cases-cycle input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--terre); cursor: pointer; }
.cases-cycle label { display: flex; align-items: center; gap: .5rem; font-weight: 500; color: var(--foret);
  background: var(--creme); border: 1.5px solid var(--creme-2); padding: .5rem 1rem; border-radius: 999px;
  cursor: pointer; margin-bottom: 0; transition: border-color .15s, background .15s; }
.cases-cycle li:has(input:checked) label { border-color: var(--terre); background: var(--creme-2); }
.carte-position { height: 320px; border-radius: 14px; overflow: hidden; border: 1.5px solid var(--creme-2); }

/* ---------- Catalogue établissements (liste + fiche) ---------- */
.etab-entete { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.2rem; }
.filtre-ville select {
  padding: .6rem .9rem; border-radius: 10px; border: 1.5px solid var(--creme-2);
  background: var(--blanc); font-family: inherit; font-size: .92rem; color: var(--foret);
}
.etab-grille { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 2rem; }
.etab-carte {
  background: var(--blanc); border-radius: 18px; overflow: hidden; border: 1px solid var(--creme-2);
  box-shadow: var(--ombre); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column;
  position: relative;
  animation: flotter-carte 5.5s ease-in-out infinite;
}
.etab-carte:nth-child(even) { animation-name: flotter-carte-inverse; }
.etab-carte:nth-child(1) { animation-delay: 0s; }
.etab-carte:nth-child(2) { animation-delay: .3s; }
.etab-carte:nth-child(3) { animation-delay: .6s; }
.etab-carte:nth-child(4) { animation-delay: .9s; }
.etab-carte:nth-child(5) { animation-delay: 1.2s; }
@keyframes flotter-carte {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes flotter-carte-inverse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-13px); }
}
.etab-carte::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 35%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-20deg); pointer-events: none; z-index: 2;
}
.etab-carte:hover {
  transform: translateY(-4px) scale(1.015); box-shadow: 0 18px 40px rgba(27,67,50,.16);
  animation-play-state: paused;
}
.etab-carte:hover::after { animation: balayage-carte .8s ease forwards; }
.etab-banniere {
  height: 130px; background: var(--foret) linear-gradient(135deg, var(--foret), var(--foret-3));
  background-size: cover; background-position: center; position: relative;
}
.etab-logo {
  width: 64px; height: 64px; border-radius: 50%; background: var(--blanc); border: 3px solid var(--blanc);
  box-shadow: 0 4px 14px rgba(0,0,0,.18); position: absolute; left: 1.3rem; bottom: -32px;
  object-fit: cover; display: grid; place-items: center; color: var(--foret); font-weight: 700; overflow: hidden;
}
.etab-corps { padding: 2.6rem 1.3rem 1.4rem; flex: 1; display: flex; flex-direction: column; }
.etab-corps h3 { color: var(--foret); font-size: 1.15rem; margin-bottom: .2rem; }
.etab-lieu { color: var(--gris); font-size: .88rem; margin-bottom: .6rem; }
.etab-presentation { color: var(--gris); font-size: .92rem; flex: 1; margin-bottom: 1rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.badge-type {
  display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: .18rem .65rem; border-radius: 999px; background: var(--creme-2); color: var(--foret); margin-bottom: .5rem;
}

@keyframes etab-entree { from { opacity: 0; transform: scale(1.02) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes etab-logo-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

.etab-hero {
  min-height: 300px; border-radius: 24px; background: var(--foret) linear-gradient(135deg, var(--foret), var(--foret-3));
  background-size: cover; background-position: center; position: relative; overflow: hidden;
  box-shadow: 0 22px 50px rgba(27,67,50,.28); animation: etab-entree .7s ease both;
}
.etab-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,67,50,0) 30%, rgba(27,67,50,.82)); }
.etab-hero-contenu { position: absolute; left: 2rem; bottom: 1.8rem; right: 2rem; z-index: 1; color: var(--creme); display: flex; align-items: flex-end; gap: 1.3rem; }
.etab-hero-logo {
  width: 92px; height: 92px; border-radius: 20px; background: var(--blanc); border: 3px solid var(--blanc);
  box-shadow: 0 10px 26px rgba(0,0,0,.3); object-fit: cover; flex-shrink: 0;
  display: grid; place-items: center; color: var(--foret); font-weight: 700; font-size: 1.6rem; overflow: hidden;
  animation: etab-logo-pop .6s .2s cubic-bezier(.34,1.56,.64,1) both;
}
.etab-hero-titre h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .25rem; }
.etab-hero-titre span { opacity: .92; }

/* Navigation ancrée vers les facultés (sticky, défile horizontalement en mobile) */
.etab-nav-pills {
  display: flex; gap: .6rem; overflow-x: auto; padding: 1rem 0; margin-bottom: .4rem;
  position: sticky; top: 64px; background: var(--creme); z-index: 40; scrollbar-width: none;
}
.etab-nav-pills::-webkit-scrollbar { display: none; }
.etab-nav-pills a {
  flex-shrink: 0; padding: .5rem 1rem; border-radius: 999px; background: var(--blanc);
  border: 1.5px solid var(--creme-2); color: var(--foret); font-size: .86rem; font-weight: 600;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.etab-nav-pills a:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(27,67,50,.14); background: var(--creme-2); }

.etab-fiche-grille { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; margin-top: 1.4rem; align-items: start; }
.etab-aside-sticky { position: sticky; top: 5rem; }
.etab-contact-carte div { margin-bottom: .9rem; font-size: .92rem; color: var(--foret); display: flex; gap: .6rem; align-items: flex-start; }
.etab-contact-carte span.libelle { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.etab-contact-carte .ico { flex-shrink: 0; font-size: 1.05rem; line-height: 1.4; }

.faculte-section { margin-top: 2.2rem; scroll-margin-top: 4.5rem; }
.faculte-entete { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; }
.faculte-entete h3 { color: var(--foret); font-size: 1.15rem; }
.faculte-compte {
  font-size: .72rem; font-weight: 700; color: var(--terre); background: var(--creme-2);
  padding: .2rem .6rem; border-radius: 999px;
}
/* Fil vertical de « posters » filière — une seule colonne, chaque carte
   occupe toute la largeur disponible (voir templates/etablissements/
   _offre_carte.html). Un cycle = une carte (OffreFiliere.cycle), donc
   Licence et Master d'une même filière apparaissent l'un sous l'autre. */
.offre-grille { display: flex; flex-direction: column; gap: 1.6rem; }

.faculte-mission {
  background: var(--creme); border-left: 4px solid var(--terre); border-radius: 10px;
  padding: 1rem 1.2rem; color: var(--foret-2); font-size: .92rem; line-height: 1.55; margin-bottom: 1.4rem;
}

.offre-carte {
  background: var(--blanc); border-radius: 20px; border: 1px solid var(--creme-2); overflow: hidden;
  box-shadow: 0 4px 18px rgba(27,67,50,.07); transition: transform .2s, box-shadow .2s;
}
.offre-carte:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(27,67,50,.14); }
.offre-photo-conteneur { width: 100%; background: #000; }
.offre-photo { width: 100%; max-height: 320px; object-fit: cover; display: block; }
.offre-corps { padding: 1.6rem 1.8rem 1.8rem; display: flex; flex-direction: column; }
.offre-badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.offre-titre-principal { color: var(--foret); font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 700; margin: .7rem 0 0; line-height: 1.25; }
.offre-sous-titre { color: var(--gris); font-size: .92rem; margin: .2rem 0 0; }
.offre-carte .offre-texte { color: var(--foret-2); font-size: .95rem; margin-top: .9rem; line-height: 1.6; }
.offre-interet { color: var(--terre); font-size: .88rem; font-weight: 600; margin: .9rem 0 0; }
.offre-debouches {
  margin-top: 1.1rem; background: var(--creme); border-radius: 12px; padding: .9rem 1.1rem;
}
.offre-debouches strong { color: var(--foret); font-size: .88rem; }
.offre-debouches p { color: var(--foret-2); font-size: .9rem; margin-top: .3rem; line-height: 1.5; }
.offre-carte .offre-frais {
  color: var(--foret); font-size: .92rem; margin-top: 1.1rem; font-weight: 600;
  background: var(--creme); border-radius: 12px; padding: .9rem 1.1rem;
}
.offre-carte .offre-frais div { display: flex; justify-content: space-between; gap: .6rem; margin-bottom: .3rem; }
.offre-carte .offre-frais div span { color: var(--gris); font-weight: 500; }
.offre-info-liste {
  list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  color: var(--foret-2); font-size: .9rem;
}
.offre-info-liste li { display: flex; align-items: baseline; gap: .4rem; }
.offre-info-attente { color: var(--terre); font-weight: 600; }
.offre-actions { display: flex; align-items: center; gap: .8rem; margin-top: 1.4rem; }
.offre-aide-favori { font-size: .78rem; color: var(--gris); margin-top: .5rem; }
.badge-distance { background: #E4EEF7; color: #2B6CB0; }
.badge-domaine {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700;
  padding: .25rem .6rem; border-radius: 999px; background: var(--creme); color: var(--foret-2);
  border: 1px solid var(--creme-2); white-space: nowrap;
}
.badge-cycle {
  display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: .25rem .6rem; border-radius: 999px;
}
.badge-cycle-licence { background: #E7F0E9; color: var(--foret); }
.badge-cycle-licence_pro { background: #DCEFE4; color: var(--foret-3); }
.badge-cycle-master { background: #FBEADD; color: var(--terre); }
.badge-cycle-doctorat { background: #2A2A2A; color: var(--creme); }

/* Onglets de cycle — quand un même parcours a plusieurs cycles (Licence,
   Master...), une seule carte à onglets plutôt que N cartes empilées quasi
   identiques (cf. templates/etablissements/_groupe_cycles.html). */
.carte-parcours { display: flex; flex-direction: column; }
.cycle-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; }
.cycle-tab {
  background: var(--blanc); border: 1.5px solid var(--creme-2); color: var(--foret-2);
  font-size: .82rem; font-weight: 700; padding: .5rem 1.1rem; border-radius: 999px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.cycle-tab:hover { border-color: var(--terre); }
.cycle-tab.actif { background: var(--foret); border-color: var(--foret); color: var(--creme); }

@media (max-width: 640px) {
  .offre-corps { padding: 1.3rem 1.2rem 1.5rem; }
}

@media (max-width: 780px) {
  .etab-fiche-grille { grid-template-columns: 1fr; }
  .etab-aside-sticky { position: static; }
  .etab-hero-contenu { flex-direction: column; align-items: flex-start; }
}
.section-titre-form { font-size: 1.05rem; font-weight: 700; color: var(--terre); text-transform: uppercase;
  letter-spacing: .06em; margin: 2rem 0 .6rem; }
.section-titre-form:first-child { margin-top: 0; }
@media (max-width: 720px) { .form-grille { grid-template-columns: 1fr; } }

/* ---------- Modale générique (ex : commentaire d'une filière) ---------- */
.btn-voir-commentaire {
  margin-top: .7rem; align-self: flex-start; background: none; border: 1.5px solid var(--creme-2);
  color: var(--foret); font-size: .82rem; font-weight: 600; padding: .4rem .9rem; border-radius: 999px;
  cursor: pointer; transition: background .15s, border-color .15s, transform .15s;
}
.btn-voir-commentaire:hover { background: var(--creme); border-color: var(--foret-3); transform: translateY(-1px); }
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(27,67,50,.55); backdrop-filter: blur(3px);
  z-index: 200; align-items: center; justify-content: center; padding: 1.5rem;
}
.modal-overlay.ouvert { display: flex; animation: modal-fondu .2s ease; }
@keyframes modal-fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop { from { transform: scale(.92) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-carte {
  background: var(--blanc); border-radius: 18px; padding: 2rem; max-width: 520px; width: 100%;
  max-height: 80vh; overflow-y: auto; position: relative; box-shadow: 0 30px 60px rgba(0,0,0,.35);
  animation: modal-pop .25s cubic-bezier(.34,1.56,.64,1);
}
.modal-carte h3 { color: var(--foret); margin-bottom: 1rem; font-size: 1.2rem; padding-right: 2rem; }
.modal-carte div, .modal-carte p { color: var(--gris); line-height: 1.7; }
.modal-fermer {
  position: absolute; top: .9rem; right: .9rem; width: 34px; height: 34px; border-radius: 50%;
  background: var(--creme); border: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--foret);
  display: grid; place-items: center; transition: background .15s, transform .15s;
}
.modal-fermer:hover { background: var(--creme-2); transform: scale(1.06); }

/* ---------- Calendrier éditorial : programmer une publication ---------- */
.bouton-programmer {
  width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
  background: var(--creme-2); color: var(--foret); font-weight: 700; font-size: .9rem;
  line-height: 1; opacity: 0; transition: opacity .15s, background .15s, color .15s;
}
.jour-calendrier:hover .bouton-programmer { opacity: 1; }
.bouton-programmer:hover { background: var(--terre); color: var(--blanc); }
@media (max-width: 768px) {
  .bouton-programmer { opacity: 1; }
}

/* ---------- Visionneuse d'image (clic pour regarder de près) ---------- */
img[data-lightbox] { cursor: zoom-in; }
.lightbox-overlay {
  display: none; position: fixed; inset: 0; background: rgba(10,20,15,.9);
  z-index: 300; align-items: center; justify-content: center; padding: 2rem;
}
.lightbox-overlay.ouvert { display: flex; animation: modal-fondu .2s ease; }
.lightbox-overlay img {
  max-width: 92vw; max-height: 88vh; border-radius: 10px;
  box-shadow: 0 30px 60px rgba(0,0,0,.5); animation: modal-pop .25s cubic-bezier(.34,1.56,.64,1);
}
.lightbox-fermer {
  position: fixed; top: 1.2rem; right: 1.2rem; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(250,243,231,.15); border: none; font-size: 1.4rem; line-height: 1;
  cursor: pointer; color: var(--creme); display: grid; place-items: center;
  transition: background .15s, transform .15s;
}
.lightbox-fermer:hover { background: rgba(250,243,231,.28); transform: scale(1.06); }

/* ---------- Onboarding : cartes de choix (radio-as-card) ---------- */
.progression-etapes { display: flex; gap: .4rem; margin-bottom: 1.4rem; }
.progression-etapes span { flex: 1; height: 5px; border-radius: 999px; background: var(--creme-2); }
.progression-etapes span.faite { background: var(--terre); }
.cartes-choix { list-style: none; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 1.6rem; }
.cartes-choix.cartes-serie { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
.cartes-choix input[type="radio"], .cartes-choix input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.cartes-choix label {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 1.5rem 1rem; border-radius: 16px; border: 2px solid var(--creme-2);
  background: var(--blanc); cursor: pointer; font-weight: 600; color: var(--foret); font-size: .96rem;
  min-height: 90px; transition: border-color .15s, transform .15s, box-shadow .15s; margin-bottom: 0;
}
.cartes-choix label:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(27,67,50,.12); }
.cartes-choix li:has(input:checked) label { border-color: var(--terre); background: var(--creme); box-shadow: 0 12px 26px rgba(198,93,59,.16); }
.cartes-serie label { font-size: 1.4rem; font-weight: 700; min-height: 70px; }