/* ==========================================================================
   Student Global Link — Design system
   ========================================================================== */

:root {
  /* Couleurs de marque */
  --navy: #000080;
  --navy-dark: #00005c;
  --navy-light: #e8e8f5;
  --fuchsia: #cf0c4d;
  --fuchsia-dark: #a5093d;
  --white: #ffffff;
  --off-white: #f7f7fb;
  --text: #1c1c2e;
  --text-light: #55556b;
  --border: #e2e2ec;
  --success: #2e7d32;

  /* Typographie */
  --font-heading: "Oswald", "Arial Narrow", sans-serif;
  --font-accent: "Satisfy", cursive;
  --font-body: "Cardo", Georgia, serif;

  /* Divers */
  --radius: 10px;
  --shadow: 0 4px 20px rgba(0, 0, 128, 0.08);
  --shadow-hover: 0 8px 30px rgba(0, 0, 128, 0.14);
  --container: 1200px;
  --header-container: 1600px;
  --header-height: 84px;
  --edge-pad: clamp(24px, 5vw, 64px);
}

/* ---- Reset ---- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Le filet de sécurité contre le débordement horizontal vit uniquement sur
     html (ci-dessus) : le même overflow-x:hidden posé ici sur body cassait le
     position:sticky du header (body devient son propre conteneur de scroll,
     ce qui perturbe le calcul de l'ancêtre défilant sur certains navigateurs). */
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
h3 { font-size: 1.3rem; letter-spacing: 0.01em; }

p {
  color: var(--text-light);
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* Lien d'évitement : masqué hors focus, visible au clavier (Tab) */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 1000;
  background: var(--navy);
  color: var(--white);
  padding: 12px 20px;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 12px;
}

.accent {
  font-family: var(--font-accent);
  color: var(--fuchsia);
  font-size: 1.4rem;
  text-transform: none;
  display: block;
  margin-bottom: 0.4rem;
}

.section {
  padding: 64px 0;
}

.section--tight {
  padding: 40px 0;
}

.section--alt {
  background: var(--off-white);
}

.section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px;
}

.section-head p {
  margin-top: 14px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--fuchsia);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--fuchsia-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(207, 12, 77, 0.35);
}

.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
  padding: 12px 28px;
}

.btn-outline:hover {
  background: var(--navy);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-white {
  background: var(--white);
  color: var(--navy);
}

.btn-white:hover {
  background: var(--navy-light);
  transform: translateY(-2px);
}

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
  padding: 12px 28px;
}

.btn-outline-white:hover {
  background: var(--white);
  color: var(--navy);
  transform: translateY(-2px);
}

/* ---- Cards ---- */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.card h3 {
  margin-bottom: 12px;
}

.card p {
  margin-bottom: 20px;
}

/* ---- Logo ---- */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-mark {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  object-fit: contain;
}

.logo-word {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  text-transform: none;
  color: var(--navy);
  letter-spacing: 0.01em;
}

.logo-word .word-global {
  font-family: var(--font-accent);
  color: var(--fuchsia);
  font-size: 1.3rem;
  font-weight: 400;
  padding: 0 2px;
}

/* Version courte du logo texte ("SGL") : plus utilisée (le nom complet
   tient désormais sur mobile aussi, voir plus bas), gardée cachée pour ne
   pas avoir à toucher au HTML des pages qui portent encore ce <span>. */
.logo-word--short {
  display: none;
}

.footer-brand {
  margin-bottom: 18px;
}

.footer-logo-img {
  height: 44px;
  width: auto;
}

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0, 0, 128, 0.06);
}

.site-header .container {
  max-width: var(--header-container);
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 1.4vw, 32px);
  padding-left: var(--edge-pad);
  padding-right: var(--edge-pad);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}

.main-nav > ul {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(0px, 0.15vw, 6px);
}

.main-nav a {
  display: block;
  white-space: nowrap;
  padding: 10px clamp(8px, 0.3vw + 4px, 16px);
  font-family: var(--font-heading);
  font-size: clamp(0.76rem, 0.2vw + 0.6rem, 0.92rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}

.main-nav a:hover,
.main-nav a.is-active {
  color: var(--fuchsia);
  background: var(--navy-light);
}

.nav-item {
  position: relative;
}

.nav-item .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-item .dropdown a {
  padding: 10px 12px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Empêche ces éléments à taille fixe de rétrécir (et donc de se déformer)
   si l'espace vient à manquer : seul .header-user-name (flex:1, ellipsis,
   à l'intérieur de .header-user) doit absorber la pression -- .header-user
   lui-même doit rester libre de rétrécir pour laisser passer cette
   troncature, d'où l'exclusion ci-dessous. */
.header-actions > *:not(.header-user) {
  flex-shrink: 0;
}

.header-actions .btn-primary {
  padding: 12px clamp(18px, 1.6vw, 30px);
  white-space: nowrap;
}

/* Traduction : la page reste masquée tant que le dictionnaire EN n'est pas
   appliqué (voir assets/js/i18n.js) ; retirée aussi par le filet de sécurité de 4 s. */
html.i18n-pending body {
  visibility: hidden;
}

/* Sélecteur de langue FR / EN : pilule (drapeau + code) dans .header-actions,
   avec un menu déroulant sous le bouton (injecté par i18n.js). */
.lang-switcher {
  position: relative;
  flex-shrink: 0;
}

.lang-switcher-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 128, 0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.lang-switcher-toggle:hover {
  border-color: var(--fuchsia);
  box-shadow: 0 2px 8px rgba(216, 27, 96, 0.12);
}

.lang-switcher-toggle:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
}

.lang-flag-icon {
  width: 20px;
  height: 13px;
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 128, 0.15);
}

.lang-switcher-option-flag {
  width: 22px;
  height: 14px;
}

.lang-switcher-chevron {
  width: 10px;
  height: 10px;
  transition: transform 0.2s ease;
}

.lang-switcher.is-open .lang-switcher-chevron {
  transform: rotate(180deg);
}

.lang-switcher-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 150;
  min-width: 190px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 128, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.lang-switcher.is-open .lang-switcher-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-switcher-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 0.92rem;
  text-align: left;
  transition: background 0.12s ease;
}

.lang-switcher-option:hover {
  background: var(--navy-light);
}

.lang-switcher-option.is-active {
  color: var(--fuchsia);
  font-weight: 600;
}

.lang-switcher-option:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
}

@media (max-width: 640px) {
  .lang-switcher-toggle {
    padding: 7px 9px;
    gap: 4px;
  }
}

/* Sélecteur de langue dupliqué (voir buildSwitcher()/mountSwitcher() dans
   i18n.js) : une 2e pilule, identique et pleinement fonctionnelle, insérée
   juste après le logo. Masquée par défaut ; seule la version affichée dans
   .header-actions (juste avant "Nous contacter") est visible au-dessus de
   560px. En dessous, c'est l'inverse : voir le bloc mobile plus bas. */
.lang-switcher--mobile {
  display: none;
}

/* ---- En-tête mobile (<= 560px) ----
   Avec le sélecteur de langue, l'en-tête ne tient plus sur une ligne à côté
   du bouton "Nous contacter" sur les largeurs de téléphone (débordement
   mesuré en dessous de ~440px, donc sur tous les téléphones courants) : le
   nom du site se retrouvait poussé hors de l'écran ou tronqué. Sur mobile,
   on simplifie la barre à trois éléments -- logo + nom complet, sélecteur
   de langue, bouton menu -- "Nous contacter" est retiré (voir .chat-fab,
   qui le remplace sur mobile comme sur desktop). Cette place regagnée sert
   à agrandir un peu le logo et le nom, en réduisant la pilule de langue
   d'autant pour rester sur une seule ligne à 375-414px. */
@media (max-width: 560px) {
  .site-header .container {
    gap: 6px;
  }

  .logo {
    gap: 6px;
  }

  .logo-mark {
    width: 34px;
    height: 34px;
  }

  .logo-word {
    font-size: 0.94rem;
    white-space: nowrap;
  }

  .logo-word .word-global {
    font-size: 1.04rem;
  }

  /* La pilule dans .header-actions cède la place à celle affichée juste
     après le logo (même composant, même comportement, seul l'emplacement
     change). */
  .header-actions > .lang-switcher {
    display: none;
  }

  .lang-switcher--mobile {
    display: block;
    flex-shrink: 0;
  }

  .lang-switcher--mobile .lang-switcher-toggle {
    padding: 5px 6px;
    gap: 2px;
    font-size: 0.68rem;
  }

  .lang-switcher--mobile .lang-switcher-code {
    display: none;
  }

  .lang-switcher--mobile .lang-switcher-chevron {
    width: 8px;
    height: 8px;
  }

  .lang-switcher--mobile .lang-flag-icon {
    width: 18px;
    height: 12px;
  }

  .lang-switcher--mobile .lang-switcher-menu {
    left: auto;
    right: 0;
  }

  /* "Nous contacter" est entièrement retiré de l'en-tête et du menu sur
     mobile : voir .chat-fab, qui le remplace (visible en permanence, pas
     seulement dans le menu déroulant). */
  .header-actions > .btn-primary {
    display: none;
  }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.nav-toggle span {
  width: 26px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  /* Animation dans les deux sens entre le hamburger et la croix (voir
     .site-header.is-open juste en dessous). */
  transition: transform 0.25s ease, opacity 0.2s ease, background-color 0.25s ease;
}

/* Menu mobile ouvert : les trois barres se replient en croix fuchsia.
   transform et opacity ne retirent pas les barres du flux : la hauteur du
   bouton, sa position et donc sa zone de clic restent strictement identiques
   dans les deux états. Le décalage de 7px vaut la hauteur d'une barre (2px)
   plus l'espace qui la sépare de la suivante (gap de 5px), ce qui amène les
   deux barres extrêmes exactement sur celle du milieu avant de les croiser. */
.site-header.is-open .nav-toggle span {
  background: var(--fuchsia);
}

.site-header.is-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header.is-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

.site-header.is-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- Bouton de contact flottant ----
   Bulle fixe façon WhatsApp/Messenger, visible en permanence sur mobile
   comme sur desktop (voir index.html etc., absente uniquement de la page
   Contact elle-même et de l'admin). Complète, sur desktop, le bouton "Nous
   contacter" de l'en-tête ; le remplace entièrement sur mobile (<= 560px),
   où il n'y a plus de place pour un bouton texte dans l'en-tête.
   z-index 150 : au-dessus du header sticky (100) mais sous les modales et
   le bandeau cookies (200+), qui ne doivent jamais être masqués par elle. */
.chat-fab {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 150;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fuchsia);
  color: var(--white);
  box-shadow: 0 6px 20px rgba(207, 12, 77, 0.4), 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.chat-fab-icon {
  width: 26px;
  height: 26px;
}

/* Pastille de messages non lus, superposée au bouton flottant une fois
   l'étudiant connecté (voir initEspaceEtudiant() dans main.js) : même
   compteur que .nav-messages-badge (mis à jour par la même fonction,
   updateNavMessagesBadge()), positionné en coin du bouton rond. Couleur navy
   (au lieu du fuchsia habituel) pour rester visible sur le fond fuchsia du
   bouton. */
/* Sélecteur composé (.chat-fab .chat-fab-badge) : sans ça, la règle
   .nav-messages-badge { margin-left: 6px; ... } plus bas dans ce fichier,
   à spécificité égale mais déclarée après, gagnerait sur le "margin: 0"
   ci-dessous. */
.chat-fab .chat-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  margin: 0;
  pointer-events: none;
}

.chat-fab-badge .nav-messages-count {
  background: var(--navy);
  border: 2px solid var(--white);
}

.chat-fab:hover,
.chat-fab:focus-visible {
  background: var(--fuchsia-dark);
  transform: scale(1.08);
  box-shadow: 0 8px 26px rgba(207, 12, 77, 0.48), 0 3px 8px rgba(0, 0, 0, 0.2);
}

.chat-fab:active {
  transform: scale(0.94);
}

.chat-fab:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .chat-fab {
    right: 16px;
    bottom: 16px;
    width: 50px;
    height: 50px;
  }

  .chat-fab-icon {
    width: 23px;
    height: 23px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-fab {
    transition: none;
  }
}

/* ---- Hero ---- */
.hero {
  /* Le bas ne porte que l'espace sous la rangée de boutons : .hero .container
     n'a pas de padding-bottom, donc cette valeur est à elle seule le vide
     sous le hero. */
  padding: 0 0 64px;
  background: linear-gradient(160deg, var(--navy) 0%, #1a1a9e 100%);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.hero .container {
  max-width: 760px;
  /* Vide navy entre le bandeau blanc d'accueil et le sous-titre script : se
     cumule avec le margin-bottom de .hero-welcome-carousel (pas de
     fusion des marges, overflow:hidden ci-dessus isole la section). */
  padding-top: 56px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.hero .accent {
  color: #ff8fb3;
}

.hero h1 {
  color: var(--white);
  margin-bottom: 20px;
}

.hero p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto 28px;
}

.hero-welcome-carousel {
  position: relative;
  width: 100%;
  background: var(--white);
  height: clamp(140px, 20vw, 260px);
  margin-bottom: 20px;
  border-top: 3px solid var(--fuchsia);
}

.hero-welcome-carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero-welcome-carousel img.is-active {
  opacity: 1;
}

.hero-welcome-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  background: var(--white);
  color: var(--navy);
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.hero-welcome-nav:hover {
  background: var(--navy);
  color: var(--white);
}

.hero-welcome-prev { left: clamp(12px, 3vw, 32px); }
.hero-welcome-next { right: clamp(12px, 3vw, 32px); }

@media (max-width: 560px) {
  .hero-welcome-carousel {
    height: 110px;
    margin-bottom: 20px;
  }

  /* Les valeurs desktop ci-dessus s'appliquaient telles quelles sur mobile,
     où elles pesaient bien plus lourd : sur un écran de 375px, elles
     occupaient à elles seules une bonne part de la hauteur visible avant
     même le premier mot. */
  .hero {
    padding-bottom: 44px;
  }

  .hero .container {
    padding-top: 36px;
  }

  .hero-welcome-nav {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-welcome-carousel img {
    transition: none;
  }
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---- Grids ---- */
.grid {
  display: grid;
  gap: 28px;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Chiffres clés (accueil) ---- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.stat-item {
  text-align: center;
}

.stat-icon {
  width: 48px;
  height: 48px;
  color: var(--navy);
  margin: 0 auto 16px;
}

.stat-number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  line-height: 1;
  color: var(--navy);
}

.stat-suffix {
  color: var(--fuchsia);
}

.stat-label {
  margin-top: 10px;
  font-size: 0.95rem;
  color: var(--text-light);
}

@media (max-width: 960px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 20px;
  }
}

/* ---- Values ---- */
.value-card {
  text-align: center;
  padding: 28px 20px;
}

.value-card h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.value-card p {
  font-size: 0.92rem;
  margin: 0;
}

/* ---- About preview / split sections ---- */
.split {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 56px;
  align-items: center;
}

.split .accent {
  margin-bottom: 4px;
}

.split p {
  margin: 18px 0 28px;
}

.history-intro strong {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline solid var(--fuchsia);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.split-visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---- Ambassadeurs preview cards ---- */
.people-card {
  text-align: center;
}

.people-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.people-avatar--photo {
  overflow: hidden;
  background: var(--navy-light);
}

.people-avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.people-card h3 {
  margin-bottom: 4px;
}

.people-role {
  color: var(--fuchsia);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--font-heading);
  margin-bottom: 10px;
  display: block;
}

/* ---- Price highlight ---- */
.price-tag {
  font-family: var(--font-heading);
  color: var(--fuchsia);
  font-size: 1.6rem;
  margin-bottom: 12px;
}

.price-tag span {
  font-size: 0.9rem;
  color: var(--text-light);
  text-transform: none;
  font-family: var(--font-body);
}

/* ---- CTA band ---- */
.cta-band {
  background: var(--fuchsia);
  color: var(--white);
  text-align: center;
  padding: 64px 0;
}

.cta-band h2 {
  color: var(--white);
  margin-bottom: 14px;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 560px;
  margin: 0 auto 30px;
}

/* ---- Footer ---- */
.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.75);
  /* Le bas reste plus généreux que le haut : le bouton de contact flottant
     (.chat-fab, fixe en bas à droite de l'écran) ne doit jamais recouvrir
     le dernier contenu de la page (ici, les liens légaux) une fois arrivé
     tout en bas -- cette réserve d'espace vaut sa taille + sa marge, soit
     84px sur desktop et 66px sur mobile. 96px laisse la marge de sécurité
     sans le vide qu'on avait avant. */
  padding: 48px 0 96px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1.1fr 1.5fr;
  gap: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-grid h4 {
  color: var(--white);
  font-size: 0.95rem;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.footer-grid p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.92rem;
}

.footer-grid ul li {
  margin-bottom: 7px;
}

.footer-grid a {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.15s ease;
}

.footer-grid a:hover {
  color: var(--white);
}

.footer-about p {
  margin: 12px 0 2px;
}

/* 5e colonne : accroche + inscription newsletter + réseaux sociaux. Elle est
   la plus large de la grille (le champ e-mail et le bouton ont besoin de
   place) et porte, comme les autres colonnes, un seul titre en haut pour que
   les cinq démarrent sur la même ligne. */
.footer-subscribe p {
  margin-bottom: 12px;
  font-size: 0.88rem;
  line-height: 1.5;
}

.footer-bottom {
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.55);
}

.footer-bottom a:hover {
  color: var(--white);
}

.footer-legal-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }

  .site-header.is-open .main-nav {
    display: block;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 12px 24px 20px;
  }

  .site-header.is-open .main-nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .site-header.is-open .nav-item .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 0 0 0 16px;
    display: none;
  }

  .site-header.is-open .nav-item.is-expanded .dropdown {
    display: block;
  }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Dès que la grille retombe à deux colonnes, l'inscription newsletter prend
     toute la largeur : à moitié de largeur, le champ e-mail devient trop
     étroit pour rester confortable. */
  .footer-subscribe {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .section { padding: 48px 0; }
  .section--tight { padding: 32px 0; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }

  .footer-about {
    grid-column: 1 / -1;
  }

  .footer-grid h4 {
    font-size: 0.85rem;
    margin-bottom: 14px;
  }

  .footer-grid p,
  .footer-grid a {
    font-size: 0.85rem;
  }

  .footer-grid ul li {
    margin-bottom: 8px;
  }

  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Page Procédure — bandeau d'intro, stepper interactif, FAQ
   ========================================================================== */

/* ---- Bandeau d'intro (variante compacte du hero) ---- */
.page-intro {
  padding: 72px 0 60px;
  background: linear-gradient(160deg, var(--navy) 0%, #1a1a9e 100%);
  color: var(--white);
  text-align: center;
}

.page-intro .accent { color: #ff8fb3; }

.page-intro h1 {
  color: var(--white);
  margin-bottom: 16px;
}

.page-intro p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 620px;
  margin: 0 auto;
  font-size: 1.05rem;
}

/* ---- Barre de progression mobile (collée sous le header) ---- */
.stepper-progress-mobile {
  display: none;
  position: sticky;
  top: var(--header-height);
  height: 4px;
  background: var(--border);
  z-index: 90;
}

.stepper-progress-mobile-fill {
  height: 100%;
  width: 0%;
  background: var(--fuchsia);
  transition: width 0.1s linear;
}

/* ---- Stepper ---- */
.stepper-layout {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 40px;
  align-items: start;
}

.stepper-progress {
  position: sticky;
  top: calc(var(--header-height) + 60px);
  height: min(55vh, 420px);
  width: 6px;
  justify-self: center;
}

.stepper-progress-track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 999px;
}

.stepper-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0%;
  background: var(--fuchsia);
  border-radius: 999px;
  transition: height 0.1s linear;
}

.steps-track {
  display: flex;
  flex-direction: column;
}

.step-item {
  position: relative;
  padding-bottom: 64px;
  list-style: none;
}

.step-item:last-child {
  padding-bottom: 0;
}

.step-connector {
  position: absolute;
  top: calc(100% - 64px);
  left: 14px;
  width: 50px;
  height: 64px;
  pointer-events: none;
  z-index: 0;
}

.step-connector svg {
  width: 100%;
  height: 100%;
}

.step-item:nth-child(even) .step-connector svg {
  transform: scaleX(-1);
}

.step-card {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.2s ease;
}

.step-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.step-card:hover {
  box-shadow: var(--shadow-hover);
}

.step-number {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
  min-width: 0;
}

.step-content h3 {
  margin-bottom: 8px;
}

.step-summary {
  margin-bottom: 16px;
}

.step-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 1px solid var(--navy);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
  transition: background 0.15s ease, color 0.15s ease;
}

.step-toggle:hover {
  background: var(--navy);
  color: var(--white);
}

.step-toggle-icon {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 0.9rem;
}

.step-toggle[aria-expanded="true"] .step-toggle-icon {
  transform: rotate(180deg);
}

.step-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.step-detail p {
  padding-top: 16px;
}

.step-detail a {
  color: var(--fuchsia);
  text-decoration: underline;
  font-weight: 600;
}

.step-detail a:hover {
  color: var(--fuchsia-dark);
}

/* ---- FAQ ---- */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Regroupe les questions par thème : le flex-gap ci-dessus gère déjà
   l'espacement vers la question suivante, ce titre n'a besoin que d'un
   espace supplémentaire au-dessus pour marquer la rupture avec le groupe
   précédent. */
.faq-category-title {
  margin-top: 32px;
  font-size: 1.05rem;
}

.faq-category-title:first-child {
  margin-top: 0;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--navy);
}

.faq-icon {
  flex-shrink: 0;
  display: inline-block;
  transition: transform 0.2s ease;
  color: var(--fuchsia);
  font-size: 1.1rem;
}

.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  padding: 0 24px;
}

.faq-answer p {
  padding-bottom: 20px;
}

@media (max-width: 960px) {
  .stepper-progress { display: none; }
  .stepper-progress-mobile { display: block; }
  .stepper-layout { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .step-card { flex-direction: column; gap: 16px; }
  .step-number { width: 56px; height: 56px; font-size: 1.4rem; }
  .step-connector { left: 10px; width: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .step-card {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Page Qui sommes-nous — équipe, mission, valeurs
   ========================================================================== */

/* ---- Équipe (fondateurs) ---- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}

.team-card {
  text-align: center;
}

.team-photo-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
  aspect-ratio: 1 / 1;
  transition: box-shadow 0.2s ease;
}

.team-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.team-card:hover .team-photo-wrap {
  box-shadow: var(--shadow-hover);
}

.team-card:hover .team-photo-wrap img {
  transform: scale(1.04);
}

.team-role {
  display: block;
  color: var(--fuchsia);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.team-card h3 {
  margin-bottom: 4px;
}

.team-card p {
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}

/* ---- Équipe (membres, photo de groupe, ambiance bureau) ---- */
.team-group-photo-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 32px;
  aspect-ratio: 16 / 7;
}

.team-group-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.office-life-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

.office-life-strip img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: block;
}

.team-members-grid {
  display: grid;
  /* auto-fit : 3 membres tiennent sur une ligne, 4+ se répartissent
     proprement sans carte orpheline mal alignée */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
}

/* ---- Mission (synthèse Quoi / Pour qui / Comment / Où) ---- */
.mission-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ---- Valeurs (version réduite) ---- */
.values-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
}

/* ---- Note légale discrète ---- */
.legal-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-light);
  max-width: 640px;
  margin: 0 auto;
}

@media (max-width: 960px) {
  .team-grid { grid-template-columns: 1fr; gap: 40px; }
  .team-members-grid { grid-template-columns: 1fr; gap: 40px; }
  .office-life-strip { grid-template-columns: 1fr; }
  .mission-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .mission-grid { grid-template-columns: 1fr; }
  .team-group-photo-wrap { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   Page Nos ambassadeurs — grille réutilisable
   ========================================================================== */

.ambassador-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
}

.ambassador-card {
  text-align: center;
}

.ambassador-card .team-photo-wrap {
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
}

.ambassador-card:hover .team-photo-wrap img {
  transform: scale(1.04);
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--navy) 0%, var(--fuchsia) 100%);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 2rem;
  letter-spacing: 0.05em;
}

.ambassador-card h3 {
  margin-bottom: 4px;
}

.ambassador-meta {
  font-size: 0.92rem;
  margin-bottom: 14px;
}

/* ==========================================================================
   Carrousel de témoignages (composant réutilisable)
   ========================================================================== */

.testimonial-carousel {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 64px;
}

.testimonial-viewport {
  position: relative;
  overflow: hidden;
  /* Garde-fou avant le calcul JS (ou si le JS est indisponible) */
  min-height: 200px;
  /* La hauteur est figée en JS sur le témoignage le plus long ;
     la transition ne joue donc qu'au redimensionnement de la fenêtre. */
  transition: height 0.3s ease;
}

.testimonial-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  margin: 0;
  border: none;
  text-align: center;
  /* Centrage vertical quand le témoignage est plus court que la zone figée */
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.testimonial-slide.is-active {
  /* La slide active reste dans le flux : sans JS, la zone garde une hauteur */
  position: relative;
  opacity: 1;
  visibility: visible;
}

.testimonial-quote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--text);
  line-height: 1.75;
}

.testimonial-quote + .testimonial-quote {
  margin-top: 16px;
}

.testimonial-cite {
  display: block;
  margin-top: 22px;
  font-family: var(--font-heading);
  font-style: normal;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fuchsia);
}

.testimonial-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  background: var(--white);
  color: var(--navy);
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.testimonial-nav:hover {
  background: var(--navy);
  color: var(--white);
}

.testimonial-prev { left: 0; }
.testimonial-next { right: 0; }

.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.testimonial-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  padding: 0;
  background: var(--fuchsia);
  border: 2px solid var(--fuchsia);
}

.testimonial-dot.is-active {
  background: transparent;
}

@media (max-width: 640px) {
  .testimonial-carousel { padding: 0 48px; }
  .testimonial-nav { width: 36px; height: 36px; font-size: 1.1rem; }
  .testimonial-quote { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-viewport { transition: none; }
  .testimonial-slide { transition: none; }
}

/* ---- Formulaire "Laisser un témoignage" ---- */
.testimonial-submit {
  max-width: 560px;
  margin: 64px auto 0;
}

.testimonial-submit .section-head {
  margin-bottom: 28px;
}

/* ==========================================================================
   Icône cible (fil visuel entre la carte Projets de l'accueil et projets.html)
   ========================================================================== */

.icon-target {
  width: 56px;
  height: 56px;
  color: var(--navy);
  margin-bottom: 16px;
}

.page-intro .icon-target {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  color: var(--white);
}

/* ==========================================================================
   Accueil — vidéo de présentation « Le Parcours »
   ========================================================================== */

.parcours-video {
  display: flex;
  justify-content: center;
}

.parcours-video-player {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* Visible le temps que l'aperçu (poster) soit peint, à la place du noir par
     défaut du lecteur. */
  background: var(--navy);
}

/* Un seul des deux cadrages à la fois : le vertical sur mobile, l'horizontal à
   partir de 768px. Les attributs width/height réels des balises <video>
   réservent la hauteur dès le premier rendu, donc pas de décalage de mise en
   page quand l'aperçu arrive. */
.parcours-video-player--portrait {
  max-width: 420px;
}

.parcours-video-player--landscape {
  display: none;
}

@media (min-width: 768px) {
  .parcours-video-player--portrait {
    display: none;
  }

  .parcours-video-player--landscape {
    display: block;
    max-width: 960px;
  }
}

/* ==========================================================================
   Page Projets — icônes partagées
   ========================================================================== */

.icon-compass {
  width: 56px;
  height: 56px;
  color: var(--navy);
  margin-bottom: 16px;
}

.page-intro .icon-compass {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  color: var(--white);
}

/* ==========================================================================
   Page Services — trois blocs détaillés
   ========================================================================== */

.services-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.service-block p {
  max-width: 720px;
}

/* Ligne haute d'un bloc service : icône à gauche, badge chiffre-clé à droite */
.service-block-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 16px;
}

.service-block-head .icon-compass {
  margin-bottom: 0;
  flex-shrink: 0;
}

.school-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}

.school-badge-number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1;
  color: var(--navy);
}

.school-badge-suffix {
  color: var(--fuchsia);
}

.school-badge-label {
  margin-top: 4px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-light);
}

/* Très petit écran : icône au-dessus, badge en dessous (aligné à gauche).
   Au-dessus de ce seuil la ligne icône + badge tient sans se chevaucher ;
   flex-wrap sert de filet de sécurité si le contenu devait déborder. */
@media (max-width: 360px) {
  .service-block-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .school-badge {
    align-items: flex-start;
  }
}

.service-figure {
  margin: 4px 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.service-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Photo candide (ratio différent des bannières) : recadrée au même format
   panoramique que les autres visuels de la page pour rester cohérent */
.service-figure--photo {
  aspect-ratio: 1657 / 949;
}

.service-figure--photo img {
  height: 100%;
  object-fit: cover;
  object-position: center 68%;
}

/* Espace quand un lien "En savoir plus" suit l'illustration */
.service-figure + .service-link {
  margin-top: 16px;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fuchsia);
  transition: color 0.15s ease;
}

.service-link:hover {
  color: var(--fuchsia-dark);
}

/* ==========================================================================
   Page d'accueil — mur de logos partenaires (Logements / Écoles / Autres)
   ========================================================================== */

.partner-group {
  margin-bottom: 40px;
}

.partner-group:last-child {
  margin-bottom: 0;
}

.partner-group h3 {
  text-align: center;
  color: var(--fuchsia);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 24px;
}

.partner-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 200px;
  min-width: 120px;
  height: 100px;
}

.partner-logo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.partner-logo--framed {
  box-sizing: border-box;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 18px;
  box-shadow: var(--shadow);
}

/* ==========================================================================
   Page Actualités — grille d'articles, média image/vidéo, modale
   ========================================================================== */

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}

.article-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.article-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--navy-light);
  min-height: 0; /* .article-card est un flex column : sans ça, la hauteur intrinsèque
                    d'une vidéo au format portrait (min-height:auto par défaut sur un
                    enfant flex) l'emporte sur l'aspect-ratio et étire toute la carte */
}

.article-media img,
.article-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-media[data-media-type="video"] {
  cursor: pointer;
}

.article-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 128, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.article-play-icon::after {
  content: "";
  margin-left: 4px;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}

.article-media.is-playing .article-play-icon,
.article-modal-media.is-playing .article-play-icon {
  opacity: 0;
  visibility: hidden;
}

.article-body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.article-tag {
  display: inline-block;
  color: var(--fuchsia);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.article-body h3 {
  margin-bottom: 10px;
}

.article-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 18px;
  flex: 1;
}

.article-footer {
  margin-top: auto;
}

.articles-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-light);
  padding: 40px 0;
}

/* ---- Modale d'article ---- */
.article-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.article-modal[hidden] {
  display: none;
}

.article-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 50, 0.55);
}

.article-modal-dialog {
  position: relative;
  background: var(--white);
  border-radius: var(--radius);
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 32px;
  box-shadow: var(--shadow-hover);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.article-modal.is-open .article-modal-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.article-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--navy);
  background: var(--white);
  transition: background 0.15s ease;
}

.article-modal-close:hover {
  background: var(--navy-light);
}

.article-modal-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
  aspect-ratio: 4 / 3;
}

.article-modal-media img,
.article-modal-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-modal-dialog h2 {
  margin-bottom: 14px;
  padding-right: 32px;
}

.article-modal-body p {
  margin-bottom: 12px;
}

.article-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 8px;
}

.article-gallery-item {
  display: block;
  padding: 0;
  border-radius: var(--radius);
  cursor: zoom-in;
}

.article-gallery-item img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: block;
  transition: opacity 0.15s ease;
}

.article-gallery-item:hover img,
.article-gallery-item:focus-visible img {
  opacity: 0.85;
}

@media (max-width: 480px) {
  .article-gallery { grid-template-columns: 1fr 1fr; gap: 8px; }
  .article-gallery-item img { height: 110px; }
}

/* ---- Lightbox de la galerie photo (ouverte depuis .article-gallery-item) ---- */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.gallery-lightbox[hidden] {
  display: none;
}

.gallery-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 50, 0.85);
}

.gallery-lightbox-dialog {
  position: relative;
  z-index: 1;
  max-width: 900px;
  max-height: 85vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.gallery-lightbox.is-open .gallery-lightbox-dialog {
  opacity: 1;
  transform: scale(1);
}

.gallery-lightbox-dialog img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  display: block;
}

.gallery-lightbox-counter {
  margin: 12px 0 0;
  color: var(--white);
  font-size: 0.85rem;
}

.gallery-lightbox-close,
.gallery-lightbox-nav {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: rgba(0, 0, 50, 0.4);
  transition: background 0.15s ease;
}

.gallery-lightbox-close:hover,
.gallery-lightbox-nav:hover {
  background: rgba(0, 0, 50, 0.7);
}

.gallery-lightbox-close {
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
}

.gallery-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
}

.gallery-lightbox-prev {
  left: 16px;
}

.gallery-lightbox-next {
  right: 16px;
}

@media (max-width: 640px) {
  .gallery-lightbox-nav {
    width: 36px;
    height: 36px;
    font-size: 1.3rem;
  }
  .gallery-lightbox-prev { left: 8px; }
  .gallery-lightbox-next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .article-modal-dialog { transition: none; }
  .article-play-icon { transition: none; }
  .gallery-lightbox-dialog { transition: none; }
}

/* ---- Modale "Demander un devis" (carte Tarifs, accueil) ---- */
.quote-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.quote-modal[hidden] {
  display: none;
}

.quote-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 50, 0.55);
}

.quote-modal-dialog {
  position: relative;
  background: var(--white);
  border-radius: var(--radius);
  max-width: 560px;
  width: 100%;
  min-width: 0;
  max-height: 85vh;
  overflow-y: auto;
  padding: 32px;
  box-shadow: var(--shadow-hover);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.quote-modal.is-open .quote-modal-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.quote-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--navy);
  background: var(--white);
  transition: background 0.15s ease;
}

.quote-modal-close:hover {
  background: var(--navy-light);
}

.quote-modal-dialog h2 {
  margin-bottom: 20px;
  padding-right: 32px;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  cursor: pointer;
  padding: 6px 0;
}

.checkbox-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--fuchsia);
  cursor: pointer;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .quote-modal-dialog { transition: none; }
}

@media (max-width: 560px) {
  .checkbox-group { gap: 14px 24px; }
  .checkbox-item { font-size: 1rem; padding: 8px 0; }
}

/* ==========================================================================
   Page Contact — coordonnées, carte, formulaire canonique
   ========================================================================== */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: start;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0; /* évite que la largeur intrinsèque de l'iframe Google Maps (300px par
                   défaut) n'étire cette colonne de .contact-layout au-delà de l'écran */
}

.contact-item h3 {
  font-size: 1rem;
  margin-bottom: 4px;
}

.contact-item p,
.contact-item a {
  color: var(--text-light);
}

.contact-item a:hover {
  color: var(--fuchsia);
}

.contact-map {
  min-width: 0; /* protège contre le piège min-width:auto si ce bloc se retrouve un
                   jour dans un conteneur flex/grid (l'iframe a une largeur
                   intrinsèque de 300px par défaut, sans attribut width/height) */
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  box-sizing: border-box;
}

.contact-map iframe {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: 280px;
  border: 0;
  display: block;
}

.contact-map--full iframe {
  height: 420px;
}

@media (max-width: 640px) {
  .contact-map--full iframe {
    height: 300px;
  }
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0; /* évite qu'un contenu enfant trop long (ex. .etudiant-dropdown) n'étire la colonne de .form-row */
}

.form-field label {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: var(--white);
  transition: border-color 0.15s ease;
}

.form-field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23000080' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 38px;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--navy);
}

/* Champ téléphone international (intl-tel-input) : même apparence que les autres champs */
.form-field .iti {
  display: block;
  width: 100%;
  --iti-border-color: var(--border);
  --iti-hover-color: var(--navy-light);
  --iti-icon-color: var(--navy);
  --iti-spacer-horizontal: 14px;
}

.form-field .iti input.iti__tel-input {
  min-width: 0;
}

.form-field .iti__selected-country {
  border-radius: 8px 0 0 8px;
}

.iti__country-selector,
.iti__country-selector input,
.iti__country-list {
  font-family: var(--font-body);
  color: var(--text);
}

/* Dans une .form-field, la règle ".form-field input" écraserait le style du champ de recherche. */
.form-field .iti__search-input {
  padding: 8px calc(var(--iti-spacer-horizontal) + var(--iti-clear-icon-size) + var(--iti-spacer-horizontal)) 8px calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) + var(--iti-spacer-horizontal));
  border-width: 0;
  border-radius: 3px;
  font-size: 1rem; /* 16px minimum : évite le zoom automatique d'iOS */
}

.form-field textarea {
  resize: vertical;
  min-height: 140px;
}

.form-feedback {
  font-size: 0.9rem;
  min-height: 1.4em;
}

.form-feedback--success {
  color: #1c7c3f;
}

.form-feedback--error {
  color: #b3261e;
}

/* ---- Toast de confirmation (soumission de formulaire) ---- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-hover);
  font-size: 0.95rem;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.toast--error {
  background: var(--fuchsia-dark);
}

.toast-close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.toast-close:hover {
  background: rgba(255, 255, 255, 0.32);
}

@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast.is-visible {
    transform: translateX(-50%);
    transition: opacity 0.15s linear;
  }
}

@media (max-width: 960px) {
  .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Fil d'Ariane
   ========================================================================== */

.breadcrumb {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.breadcrumb .container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-light);
}

.breadcrumb a {
  color: var(--navy);
}

.breadcrumb a:hover {
  color: var(--fuchsia);
}

.breadcrumb-sep {
  margin: 0 8px;
  color: var(--border);
}

.breadcrumb [aria-current="page"] {
  color: var(--text-light);
}

/* ==========================================================================
   Page Logement étudiant — points forts, partenaires, tarifs
   ========================================================================== */

/* Coche verte réutilisée dans les listes de points forts (cartes
   partenaires, encart devis) : même couleur --success que le badge
   "Fourni" de l'Espace Étudiant. */
.check-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--success);
}

/* ---- Bandeau de points forts + photo ---- */
.housing-highlights-inner {
  display: flex;
  align-items: center;
  gap: 48px;
}

.housing-highlights-list {
  flex: 1 1 55%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 28px;
}

.housing-highlight {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.housing-highlight-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy-light);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.housing-highlight-icon svg {
  width: 24px;
  height: 24px;
}

.housing-highlight p {
  margin: 6px 0 0;
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 0.98rem;
  line-height: 1.35;
}

.housing-highlights-photo {
  flex: 1 1 40%;
  align-self: stretch;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.housing-highlights-photo img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}

/* ---- Cartes partenaires ---- */
.housing-partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.housing-partner-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 20px 24px;
  box-shadow: var(--shadow);
}

.housing-partner-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--fuchsia);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: var(--shadow);
}

.housing-partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin-bottom: 16px;
}

.housing-partner-logo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.housing-partner-photo {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
  aspect-ratio: 4 / 3;
}

.housing-partner-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.housing-partner-points {
  flex: 1;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.housing-partner-points li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-light);
  line-height: 1.35;
}

.housing-partner-btn {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

/* ---- Engagement + tarifs (bas de page) ---- */
.housing-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.housing-bottom-photo {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 280px;
  padding: 28px;
  border-radius: var(--radius);
  background: url("../img/partenaires/demande-devis.jpg") center / cover no-repeat;
  box-shadow: var(--shadow);
}

.housing-bottom-caption {
  display: inline-block;
  margin: 0;
  padding: 8px 16px;
  border-radius: 8px;
  /* Fond semi-transparent : l'illustration demande-devis.jpg est très claire
     (blanc/bleu pâle), le texte blanc n'y serait pas lisible sans ça. */
  background: rgba(0, 0, 128, 0.55);
  font-family: var(--font-accent);
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--white);
  text-decoration: underline solid var(--fuchsia);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.housing-price-card {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.housing-price-card p {
  font-size: 0.9rem;
}

.housing-price-card .btn {
  align-self: center;
  margin-top: auto;
}

.housing-quote-card {
  text-align: left;
}

.housing-quote-card .price-tag {
  font-size: 0.8rem;
}

.housing-quote-card .price-tag span {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fuchsia);
  font-family: var(--font-heading);
}

.housing-quote-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.housing-quote-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text-light);
  line-height: 1.35;
}

.housing-quote-card .btn {
  align-self: flex-start;
  margin-top: auto;
}

@media (max-width: 860px) {
  .housing-highlights-inner { flex-direction: column; }
  .housing-highlights-list { grid-template-columns: 1fr 1fr; width: 100%; }
  .housing-highlights-photo { width: 100%; }
  .housing-bottom-grid { grid-template-columns: 1fr; }
  .housing-partners-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .housing-highlights-list { grid-template-columns: 1fr; }

  .housing-partners-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    margin: 0 -24px;
    padding: 6px 24px 14px;
  }

  .housing-partner-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}


/* ==========================================================================
   Consentement cookies — lien de gestion en footer + bandeau
   ========================================================================== */

.footer-legal-links button[data-cookie-manage] {
  font-family: inherit;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.15s ease;
}

.footer-legal-links button[data-cookie-manage]:hover {
  color: var(--white);
}

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  background: var(--navy);
  color: var(--white);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner-text {
  max-width: 560px;
}

.cookie-banner-text p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.92rem;
}

.cookie-banner-text a {
  color: var(--white);
  text-decoration: underline;
}

.cookie-banner-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .cookie-banner {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
}

/* ==========================================================================
   Page Projets — hero avec visuel, cartes projets, bandeau participatif
   ========================================================================== */

.eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fuchsia);
  margin-bottom: 16px;
}

/* ---- Hero (photo plein cadre) ---- */
.projects-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  padding: 100px 0 70px;
  overflow: hidden;
  color: var(--white);
}

.projects-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.projects-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.projects-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--navy) 0%, rgba(0, 0, 128, 0.82) 32%, rgba(0, 0, 128, 0.35) 60%, rgba(0, 0, 128, 0.05) 85%);
}

.projects-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin-left: 0;
  margin-right: auto;
  padding-left: var(--edge-pad);
  padding-right: var(--edge-pad);
}

.projects-hero .eyebrow {
  color: #ff8fb3;
}

.projects-hero h1 {
  color: var(--white);
  margin-bottom: 20px;
}

.projects-hero p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.05rem;
  max-width: 520px;
}

.hero-sticky-tag {
  position: absolute;
  top: 42px;
  right: var(--edge-pad);
  z-index: 1;
  color: var(--white);
  font-family: var(--font-accent);
  font-size: 1.7rem;
  line-height: 1.2;
  text-align: right;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transform: rotate(-3deg);
}

.hero-sticky-tag::after {
  content: "";
  display: block;
  height: 3px;
  margin: 4px 0 0 auto;
  width: 80%;
  background: var(--fuchsia);
  border-radius: 2px;
}

@media (max-width: 700px) {
  .projects-hero-media::after {
    background: linear-gradient(180deg, var(--navy) 0%, rgba(0, 0, 128, 0.78) 45%, rgba(0, 0, 128, 0.55) 100%);
  }

  .hero-sticky-tag {
    top: 20px;
    font-size: 1.3rem;
  }
}

/* ---- Cartes projets ---- */
.project-cards {
  gap: 32px;
}

.project-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.project-card-media {
  position: relative;
}

.project-card-image {
  aspect-ratio: 16 / 9;
  background: var(--navy-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-card-image svg {
  width: 30%;
  height: 30%;
  color: var(--navy);
  opacity: 0.35;
}

.project-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-status-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--fuchsia);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 7px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow);
}

.project-status-badge--navy {
  background: var(--navy);
}

.project-card-body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.project-icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
}

.project-icon-circle svg {
  width: 28px;
  height: 28px;
  color: var(--white);
}

.project-subtitle {
  display: block;
  color: var(--fuchsia);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 14px;
}

.project-card-body p {
  margin-bottom: 20px;
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.check-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.94rem;
  color: var(--text-light);
}

.check-list li::before {
  content: "✓";
  color: var(--fuchsia);
  font-weight: 700;
  flex-shrink: 0;
}

.project-card-body .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ---- Modale détail d'un projet (réutilise le squelette .article-modal) ---- */
.project-modal-status {
  display: inline-block;
  background: var(--fuchsia);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.project-modal-status--navy {
  background: var(--navy);
}

.project-modal-subtitle {
  display: block;
  color: var(--fuchsia);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: -8px;
  margin-bottom: 16px;
}

/* ---- Bandeau "Participez à nos projets" ---- */
.partner-cta {
  background: var(--navy-light);
}

.partner-cta-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}

.partner-cta-text p {
  margin: 14px 0 28px;
  max-width: 480px;
}

.partner-cta-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.partner-cta-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.partner-cta-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--white);
  padding: 20px 24px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.partner-cta-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.partner-cta-icon svg {
  width: 24px;
  height: 24px;
  color: var(--white);
}

.partner-cta-item h3 {
  font-size: 1rem;
  margin-bottom: 4px;
}

.partner-cta-item p {
  font-size: 0.9rem;
  margin: 0;
}

/* ---- Footer : réseaux sociaux + newsletter ---- */
/* Réseaux sociaux : conteneur en flex avec gap, donc ajouter un réseau plus
   tard (Instagram, Facebook...) = ajouter un <a> à côté du LinkedIn, sans
   toucher au CSS. */
.footer-social {
  display: flex;
  gap: 12px;
  margin: 16px 0 0;
}

.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.footer-social a:hover {
  background: var(--fuchsia);
  border-color: var(--fuchsia);
}

.footer-social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Champ et bouton empilés (et non côte à côte) : dans une colonne de footer
   d'environ 265px, les mettre sur une ligne rendrait le champ e-mail
   inutilisable. L'empilement remplit en plus la hauteur de la colonne, ce qui
   équilibre la grille face aux listes de liens voisines. */
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.newsletter-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.newsletter-form input:focus {
  outline: none;
  border-color: var(--white);
}

.newsletter-form .btn {
  padding: 10px 20px;
  font-size: 0.75rem;
  white-space: nowrap;
  /* .btn ne centre pas son contenu : nécessaire ici, où le bouton est étiré
     sur toute la largeur de la colonne par le flex en colonne ci-dessus. */
  justify-content: center;
}

@media (max-width: 960px) {
  .project-cards { grid-template-columns: 1fr; }
  .partner-cta-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Page Espace Étudiant — connexion (Netlify Identity) et suivi de dossier
   ========================================================================== */

/* Indicateur "connecté" dans l'en-tête (remplace "Nous contacter") */
.header-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0; /* laisse .header-user-name rétrécir et tronquer au lieu de forcer le débordement */
  position: relative; /* ancre .header-avatar-feedback (position: absolute) */
}

/* .header-user et .btn fixent tous les deux "display" : sans ces règles,
   l'attribut hidden posé en JS (display:none, UA stylesheet) est écrasé par
   ces styles d'auteur et l'élément reste visible malgré hidden=true. Même
   gotcha déjà traitée ailleurs sur le site (voir .article-modal[hidden],
   .quote-modal[hidden], .cookie-banner[hidden]). */
.header-user[hidden],
[data-header-contact][hidden],
[data-header-logout][hidden] {
  display: none;
}

/* Badge de messages non lus (icône enveloppe + pastille) sur le lien
   "Espace Étudiant" de la nav, sur toutes les pages du site : visible dès
   l'arrivée, sans avoir à se connecter ni à descendre jusqu'à la section
   Messages. Même esprit visuel que .etudiant-dropdown-unread /
   .etudiant-dropdown-badge côté gestion-dossiers.html. */
.nav-messages-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  color: var(--fuchsia);
  vertical-align: middle;
}

.nav-messages-badge[hidden] {
  display: none;
}

.nav-messages-envelope {
  width: 14px;
  height: 14px;
}

.nav-messages-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--fuchsia);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}

/* Version cliquable (à côté du nom de l'étudiant connecté, une fois le
   dossier chargé) : réinitialise les styles par défaut du <button>, le
   reste vient déjà de .nav-messages-badge. */
.nav-messages-badge--button {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* Regroupe l'avatar, son input de fichier et son menu déroulant (voir
   .account-menu plus bas) : ancre le menu, qui s'ouvre au tap sur l'avatar
   en mobile (comportement desktop inchangé -- voir initEspaceEtudiant() dans
   main.js). */
.header-account {
  position: relative;
  flex-shrink: 0;
}

.header-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  flex-shrink: 0;
  /* .header-user-avatar est un <button> (photo de profil cliquable) :
     réinitialise les styles par défaut du navigateur, le reste ci-dessus
     s'appliquait déjà quand c'était un <span> décoratif. */
  border: none;
  padding: 0;
  font-size: 1rem;
  cursor: pointer;
}

.header-user-avatar:hover,
.header-user-avatar:focus-visible {
  box-shadow: 0 0 0 3px var(--navy-light);
}

/* Message d'erreur d'envoi de photo (format, taille, échec réseau...) : en
   position absolue sous l'avatar pour ne jamais pousser le reste de l'en-tête
   (voir "position: relative" sur .header-user). Masqué automatiquement tant
   qu'il n'y a rien à afficher, sans avoir à jongler avec l'attribut hidden en
   JS à chaque envoi. */
.header-avatar-feedback {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  color: #b3261e;
  font-size: 0.7rem;
  white-space: nowrap;
}

.header-avatar-feedback:empty {
  display: none;
}

/* Menu déroulant de compte (nom complet + déconnexion), ouvert au tap sur
   l'avatar en mobile -- même schéma visuel et même transition que
   .lang-switcher-menu (fondu + léger glissement), toujours présent dans le
   DOM mais invisible/non interactif (visibility:hidden) tant que
   .header-account n'a pas la classe "is-open". */
.account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  z-index: 150;
  min-width: 210px;
  margin: 0;
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 128, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.header-account.is-open .account-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.account-menu-name {
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  color: var(--navy);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
}

.account-menu-item {
  display: block;
  width: 100%;
  padding: 9px 4px;
  border-radius: 8px;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 0.9rem;
  text-align: left;
  transition: background 0.12s ease;
}

.account-menu-item:hover {
  background: var(--navy-light);
}

.account-menu-item--logout {
  margin-top: 4px;
  color: var(--fuchsia);
  font-weight: 600;
}

.header-user-name {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--navy);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

.header-user [data-header-messages-link] {
  flex-shrink: 0;
}

/* Icône de déconnexion compacte, réservée au mobile (voir plus bas) : le
   bouton texte complet ("Se déconnecter") reste le seul visible sur desktop. */
.header-logout-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 2px solid var(--navy);
  border-radius: 50%;
  background: none;
  color: var(--navy);
  cursor: pointer;
}

.header-logout-icon svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 640px) {
  /* Barre d'en-tête mobile désencombrée : seul l'avatar (devenu bouton de
     compte, voir .account-menu) reste visible à côté du logo, du sélecteur
     de langue et du menu hamburger. Le nom complet est toujours consultable,
     dans le menu déroulant de l'avatar. Desktop garde le nom en texte, non
     concerné par cette règle. */
  .header-user-name {
    display: none;
  }

  .header-user-avatar {
    width: 30px;
    height: 30px;
  }

  .header-user {
    gap: 6px;
  }

  /* Largeur de l'en-tête très limitée sur mobile : le message d'erreur de
     photo s'enroule sur plusieurs lignes au lieu de déborder hors de
     l'écran (white-space: nowrap ci-dessus est pensé pour desktop). */
  .header-avatar-feedback {
    max-width: 160px;
    white-space: normal;
  }

  .header-actions {
    gap: 8px;
  }

  .header-user [data-header-messages-link] .nav-messages-envelope {
    width: 12px;
    height: 12px;
  }

  .header-user [data-header-messages-link] .nav-messages-count {
    min-width: 15px;
    height: 15px;
    font-size: 0.6rem;
  }

  /* Bouton texte -> icône compacte pour la déconnexion, dans le menu du
     haut (espace-etudiant.html et gestion-dossiers.html). L'écran "Accès
     réservé" de gestion-dossiers.html garde son propre bouton texte
     (data-identity-logout), sans équivalent icône : non concerné ici. */
  [data-header-logout] {
    display: none;
  }

  .header-logout-icon:not([hidden]) {
    display: inline-flex;
  }
}

.auth-status {
  text-align: center;
  color: var(--text-light);
  padding: 60px 0;
}

.auth-card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow);
  text-align: center;
}

.auth-card h2 {
  margin-bottom: 12px;
}

.auth-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 24px 0;
}

.auth-help {
  font-size: 0.9rem;
  color: var(--text-light);
  margin-bottom: 0;
}

/* Zone de contenu du dossier (de "Bonjour ..." à la fin des Messages) :
   légèrement teintée pour se distinguer du blanc du reste de la page. Les
   blocs à l'intérieur (lignes de documents, conversation) sont explicitement
   remis en blanc pour garder une hiérarchie claire par-dessus ce fond. */
[data-auth-logged-in] {
  background: var(--off-white);
  border: 1.5px solid var(--fuchsia);
  border-radius: var(--radius);
  padding: 32px 24px 40px;
  box-shadow: 0 0 0 4px rgba(207, 12, 77, 0.05), 0 8px 28px rgba(207, 12, 77, 0.1);
  opacity: 0;
  animation: dossier-frame-in 0.6s ease forwards, dossier-frame-glow 3.6s ease-in-out 0.6s infinite;
  transition: box-shadow 0.3s ease;
}

@keyframes dossier-frame-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dossier-frame-glow {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(207, 12, 77, 0.05), 0 8px 28px rgba(207, 12, 77, 0.1);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(207, 12, 77, 0.09), 0 8px 32px rgba(207, 12, 77, 0.18);
  }
}

@media (hover: hover) {
  [data-auth-logged-in]:hover {
    box-shadow: 0 0 0 4px rgba(207, 12, 77, 0.1), 0 10px 34px rgba(207, 12, 77, 0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-auth-logged-in] {
    animation: none;
    opacity: 1;
  }
}

.dossier-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}

.dossier-header h2 {
  margin: 0;
  /* Contrairement aux autres h2 du site (voir la règle h1-h4 tout en haut),
     ce titre affiche "Bonjour {prénom}" : la casse d'origine reste lisible et
     chaleureuse au lieu de l'effet "cri" du tout-majuscule sur un nom propre. */
  text-transform: none;
  letter-spacing: normal;
}

.dossier-advisor {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 640px;
  margin: 0 auto 40px;
  padding: 20px 24px;
  background: var(--navy-light);
  border-radius: var(--radius);
}

/* Même piège que .header-user[hidden] : cette règle fixe "display", donc
   [hidden] a besoin d'être redit explicitement pour rester prioritaire. */
.dossier-advisor[hidden] {
  display: none;
}

.dossier-advisor-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.dossier-advisor-info {
  flex: 1;
  min-width: 0;
}

.dossier-advisor-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fuchsia);
  margin-bottom: 4px;
}

.dossier-advisor-name {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}

.dossier-advisor-role {
  color: var(--text-light);
  font-size: 0.9rem;
  margin: 0;
}

.dossier-advisor-contact {
  flex-shrink: 0;
}

.dossier-section-title {
  text-align: center;
  margin-bottom: 24px;
}

.dossier-steps {
  max-width: 640px;
  margin: 0 auto;
}

.dossier-step-empty {
  text-align: center;
  color: var(--text-light);
  list-style: none;
}

.dossier-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: 20px;
  padding: 18px 0 18px 28px;
  border-left: 2px solid var(--border);
  opacity: 0;
  animation: dossier-step-in 0.5s ease forwards;
}

@keyframes dossier-step-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dossier-step:last-child {
  border-left-color: transparent;
}

/* Masque le trait de connexion entre le haut de la liste et le centre du
   premier cercle (position:absolute + top fixé sur .dossier-step-number,
   donc 18px de padding-top + 20px de moitié de cercle = 38px) : sans ça,
   le trait dépasse visuellement au-dessus de l'étape 1. Un ::before (généré
   avant le cercle, un vrai enfant du <li>) peint sous le cercle plutôt que
   par-dessus, donc il ne le recouvre jamais. */
.dossier-step:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  left: -2px;
  width: 2px;
  height: 38px;
  background: var(--white);
}

.dossier-step.is-done {
  border-left-color: var(--navy);
}

.dossier-step-number {
  position: absolute;
  top: 18px;
  left: -21px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--fuchsia);
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  flex-shrink: 0;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.dossier-step-label {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--text-light);
}

.dossier-step.is-done .dossier-step-number {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.dossier-step.is-done .dossier-step-label {
  color: var(--navy);
}

.dossier-step.is-current .dossier-step-number {
  background: var(--fuchsia);
  border-color: var(--fuchsia);
  color: var(--white);
  animation: dossier-step-pulse 2.4s ease-in-out infinite;
}

.dossier-step.is-current .dossier-step-label {
  color: var(--fuchsia);
  font-weight: 600;
}

@keyframes dossier-step-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(207, 12, 77, 0.45);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(207, 12, 77, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dossier-step {
    animation: none;
    opacity: 1;
  }

  .dossier-step.is-current .dossier-step-number {
    animation: none;
  }
}

.dossier-documents-status {
  max-width: 640px;
  margin: 48px auto 0;
}

.dossier-volet {
  margin-top: 28px;
}

.dossier-volet-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--fuchsia);
}

.admin-volet-title {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
  margin: 20px 0 4px;
}

.document-status-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.document-status-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
}

.document-status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.document-status-empty {
  text-align: center;
  color: var(--text-light);
  list-style: none;
}

.document-files-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.document-files-list:not(:empty) {
  margin-bottom: 4px;
}

.document-file-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 8px 12px;
  background: var(--off-white);
  border-radius: 6px;
  font-size: 0.85rem;
}

.document-file-name {
  font-weight: 600;
  color: var(--navy);
  word-break: break-word;
}

.document-file-date {
  color: var(--text-light);
  flex: 1;
}

.document-file-badge {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.document-file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.document-file-actions .btn-small {
  padding: 5px 14px;
  font-size: 0.72rem;
}

/* Même rouge que .document-upload-feedback--error : action destructive. */
.document-file-delete {
  color: #b3261e;
  border-color: #b3261e;
}

.document-file-delete:hover {
  background: #b3261e;
  color: var(--white);
}

.document-file-delete:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.document-file-feedback {
  flex-basis: 100%;
  font-size: 0.8rem;
  color: #b3261e;
}

.document-file-feedback:empty {
  display: none;
}

.document-file-item--fourni .document-file-badge {
  background: var(--success);
  color: var(--white);
}

.document-file-item--en-cours .document-file-badge {
  background: var(--fuchsia);
  color: var(--white);
}

.document-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.document-upload-input {
  flex: 1;
  min-width: 160px;
  font-size: 0.85rem;
}

.document-upload-feedback {
  font-size: 0.85rem;
  color: var(--text-light);
  flex-basis: 100%;
}

.document-upload-feedback--success {
  color: #1c7c3f;
}

.document-upload-feedback--error {
  color: #b3261e;
}

/* Message affiché à la place du bouton d'upload pour "Lettre d'admission"
   tant que l'équipe ne l'a pas encore déposée (voir renderDocumentList() dans
   main.js) : ce document n'est jamais envoyé par l'étudiant lui-même. */
.document-waiting-note {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-light);
  font-style: italic;
}

.document-status-name {
  font-family: var(--font-heading);
  color: var(--navy);
}

.document-status-badge {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.document-status-item--fourni .document-status-badge {
  background: var(--success);
  color: var(--white);
}

.document-status-item--en-cours .document-status-badge {
  background: var(--fuchsia);
  color: var(--white);
}

.document-status-item--a-fournir .document-status-badge {
  background: var(--white);
  border: 2px solid var(--navy);
  color: var(--navy);
}

.dossier-messages {
  max-width: 640px;
  margin: 48px auto 0;
}

/* .messages-conversation est partagée avec gestion-dossiers.html, où son
   fond --off-white la distingue du panneau blanc environnant : ici, c'est
   l'inverse (le fond de la page est --off-white), donc on la repasse en
   blanc pour garder le même effet de contraste. */
.dossier-messages .messages-conversation {
  background: var(--white);
}

.messages-conversation {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 360px;
  overflow-y: auto;
  padding: 16px;
  margin-bottom: 16px;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.messages-empty {
  margin: auto 0;
  color: var(--text-light);
  text-align: center;
}

.message-row {
  display: flex;
  flex-direction: column;
  max-width: 75%;
}

.message-row--equipe {
  align-self: flex-start;
  align-items: flex-start;
}

.message-row--etudiant {
  align-self: flex-end;
  align-items: flex-end;
}

.message-bubble {
  padding: 10px 16px;
  border-radius: 16px;
  font-size: 0.95rem;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.message-row--equipe .message-bubble {
  background: var(--navy-light);
  color: var(--navy);
  border-bottom-left-radius: 4px;
}

.message-row--etudiant .message-bubble {
  background: var(--fuchsia);
  color: var(--white);
  border-bottom-right-radius: 4px;
}

.message-date {
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--text-light);
}

.messages-form {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.messages-form textarea {
  width: 100%;
  min-height: 70px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  color: var(--text);
  resize: vertical;
}

@media (max-width: 560px) {
  .auth-card { padding: 28px 20px; }
  .dossier-header { flex-direction: column; align-items: flex-start; }
  .dossier-advisor { flex-direction: column; text-align: center; }
  .message-row { max-width: 90%; }
}

/* ==========================================================================
   Page Gestion des dossiers (interne, réservée à l'équipe SGL)
   ========================================================================== */

/* Même piège que .header-user[hidden] plus haut : .btn fixe "display", donc
   [hidden] posé en JS sur ces boutons précis (contrairement aux autres pages,
   où c'est tout le conteneur parent qui est masqué) doit être redit ici pour
   rester prioritaire. */
[data-identity-login][hidden],
[data-identity-logout][hidden] {
  display: none;
}

.btn-small {
  padding: 8px 18px;
  font-size: 0.8rem;
}

/* Même rouge que .form-feedback--error : signale clairement un refus
   d'accès, pas une simple information. */
[data-admin-denied-message] {
  color: #b3261e;
}

.admin-toolbar {
  max-width: 720px;
  margin: 0 auto 24px;
  min-width: 0;
}

/* "Connecté en tant que ..." : reste visible en permanence (traçabilité de
   qui gère quel dossier), tronqué avec ellipsis plutôt que de déborder sur
   un écran étroit. Se déconnecter et les messages non lus vivent désormais
   dans le menu du haut (.header-actions), donc cette barre n'a plus qu'un
   seul enfant à afficher pleine largeur. */
.admin-toolbar-user {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 0.9rem;
}

.admin-panel {
  max-width: 720px;
  margin: 0 auto 32px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
}

.admin-panel h2 {
  margin-bottom: 20px;
  font-size: 1.3rem;
}

.admin-subpanel {
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--border);
}

.admin-subpanel:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.admin-subpanel h3 {
  margin-bottom: 14px;
  font-size: 1.05rem;
  color: var(--navy);
}

.admin-empty-message {
  color: var(--text-light);
  font-size: 0.9rem;
  margin: 0;
}

.admin-readonly-field {
  margin: 0;
  color: var(--text);
  font-family: var(--font-heading);
}

.admin-subpanel-hint {
  margin: 0 0 14px;
  color: var(--text-light);
  font-size: 0.9rem;
}

/* Liste déroulante personnalisée de sélection d'étudiant : un <select>
   natif ne peut afficher que du texte brut dans ses <option>, impossible
   d'y montrer une icône ou un badge coloré pour les messages non lus. */
.etudiant-dropdown {
  position: relative;
  min-width: 0; /* idem : sans ça, ce conteneur flex reprend la largeur "auto" de son contenu */
}

.etudiant-dropdown-toggle {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 1rem;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.etudiant-dropdown-toggle:focus,
.etudiant-dropdown-toggle[aria-expanded="true"] {
  outline: none;
  border-color: var(--navy);
}

.etudiant-dropdown-toggle span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tant qu'aucun étudiant n'est choisi, même style discret que le
   placeholder du champ RECHERCHER juste à côté. */
.etudiant-dropdown-toggle-label--placeholder {
  color: var(--text-light);
}

.etudiant-dropdown-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--navy);
  transition: transform 0.15s ease;
}

.etudiant-dropdown-toggle[aria-expanded="true"] .etudiant-dropdown-chevron {
  transform: rotate(180deg);
}

.etudiant-dropdown-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-hover);
}

.etudiant-dropdown-list[hidden] {
  display: none;
}

.etudiant-dropdown-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
}

.etudiant-dropdown-option:hover,
.etudiant-dropdown-option[aria-selected="true"] {
  background: var(--navy-light);
}

.etudiant-dropdown-option-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.etudiant-dropdown-name {
  font-family: var(--font-heading);
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.etudiant-dropdown-email {
  font-size: 0.8rem;
  color: var(--text-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.etudiant-dropdown-unread {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  color: var(--fuchsia);
}

.etudiant-dropdown-envelope {
  width: 16px;
  height: 16px;
}

.etudiant-dropdown-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--fuchsia);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
}

.etudiant-dropdown-empty {
  padding: 10px 12px;
  color: var(--text-light);
  font-size: 0.9rem;
  text-align: center;
}

.admin-messages-summary {
  margin: 12px 0 0;
  padding: 10px 16px;
  background: var(--navy-light);
  border-left: 4px solid var(--fuchsia);
  border-radius: var(--radius);
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 600;
}

.admin-messages-summary[hidden] {
  display: none;
}

.admin-messages-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  margin-left: 8px;
  border-radius: 999px;
  background: var(--fuchsia);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 700;
  vertical-align: middle;
}

.admin-messages-unread-badge[hidden] {
  display: none;
}

.admin-item-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.admin-item:last-child {
  border-bottom: none;
}

.admin-item-label {
  flex: 1;
  min-width: 200px;
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 0.95rem;
}

.admin-item-select {
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
}

.admin-item-feedback {
  font-size: 0.8rem;
  color: var(--text-light);
  min-width: 120px;
}

/* Mêmes couleurs que .form-feedback--success / --error. */
.admin-item-feedback--success {
  color: #1c7c3f;
}

.admin-item-feedback--error {
  color: #b3261e;
}

.admin-document-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.admin-document-item:last-child {
  border-bottom: none;
}

.admin-document-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.admin-document-badge {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.admin-document-badge--fourni {
  background: var(--success);
  color: var(--white);
}

.admin-document-badge--en-cours {
  background: var(--fuchsia);
  color: var(--white);
}

.admin-document-badge--a-fournir {
  background: var(--white);
  border: 2px solid var(--navy);
  color: var(--navy);
}

.admin-document-files {
  margin: 0;
  padding: 0;
}

.admin-document-files .admin-item {
  padding-left: 12px;
}

.admin-item-label--file {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-item-file-date {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-light);
  font-weight: 400;
}

@media (max-width: 640px) {
  .admin-panel { padding: 24px 20px; }
  .admin-item { flex-direction: column; align-items: flex-start; }
  .admin-item-select { width: 100%; }
}