/* Police Catamaran (hub legal) : l'@import DOIT rester la toute premiere
   regle du fichier (avant tout selecteur), sinon les navigateurs l'ignorent
   silencieusement — deplace ici depuis le milieu du fichier le 24/08/2026. */
@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@400;500;600;700;800&display=swap');

:root {
  --blue: #0a72b8;
  --deep-blue: #005a9c;
  --red: #ed3028;
  --green: #21a65b;
  --gold: #f5b51b;
  --violet: #7049b6;
  --ink: #14213d;
  --muted: #607089;
  --line: #d7e2ee;
  --page: #f1f5fa;
  --white: #ffffff;
  --shadow: 0 16px 38px rgba(13, 43, 76, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--page);
  font-family: Inter, Arial, sans-serif;
}

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

input,
button {
  min-width: 0;
}

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

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  background: var(--white);
  border-bottom: 1px solid #d4e2ef;
  box-shadow: 0 3px 12px rgba(0, 90, 156, 0.1);
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Rapproche le logo et le menu des bords de la page (demande du
     24/08/2026) : marge laterale reduite de 24px a 10px de chaque cote,
     au lieu de calc(100% - 48px)/margin auto qui centrait le contenu avec
     une bordure large. Hauteur min inchangee (76px) : elle absorbe deja le
     logo agrandi a 70px (voir index.html et consorts, bloc .brand). */
  width: calc(100% - 20px);
  min-height: 76px;
  margin: 0 auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
}

.text-brand {
  display: grid;
  gap: 2px;
}

.text-brand strong {
  color: #005a9c;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.2px;
}

.text-brand small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Liens secondaires : discrets, separes par un point, sans effet de bloc. */
.top-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  color: #4a5b74;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.top-links a {
  position: relative;
  transition: color 160ms ease;
}

.top-links a + a::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  width: 3px;
  height: 3px;
  background: #c3d2e2;
  border-radius: 50%;
  transform: translateY(-50%);
}

.top-links a:hover {
  color: var(--deep-blue);
}

/* Navigation principale : bandeau clair et sobre plutot que des blocs de
   couleur pleine accoles ; l'onglet actif/survole se distingue par un trait
   d'accent en pied de lien, dans l'esprit d'un site institutionnel moderne. */
.main-nav {
  display: flex;
  justify-content: center;
  gap: 6px;
  min-height: 54px;
  padding: 0 12px;
  background: var(--white);
  border-top: 1px solid #e7eef5;
  box-shadow: inset 0 -1px 0 #e7eef5;
}

.main-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: auto;
  min-height: 54px;
  padding: 0 20px;
  color: #33455f;
  border-left: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  transition: color 160ms ease;
}

.main-nav a::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 0;
  left: 18px;
  height: 3px;
  background: transparent;
  border-radius: 3px 3px 0 0;
  transition: background 160ms ease;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--deep-blue);
  background: transparent;
}

.main-nav a.active::after {
  background: var(--red);
}

.main-nav a:hover::after {
  background: #b9cbe0;
}

.main-nav a.active:hover::after {
  background: var(--red);
}

.menu-button {
  display: none;
  position: relative;
  width: 44px;
  height: 42px;
  place-items: center;
  color: transparent;
  font-size: 0;
  line-height: 0;
  background-color: var(--red);
  background-image: linear-gradient(var(--white), var(--white));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 2px;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Icone hamburger (3 barres) sur mobile et tablette.
   La barre du milieu est le background-image ci-dessus ; les barres haute et
   basse sont les deux pseudo-elements. Le libelle texte "Menu" reste dans le
   HTML pour les lecteurs d'ecran mais est masque (font-size 0 + color
   transparent), ce qui evite de toucher les 17 pages du header unifie.
   A l'ouverture, app.js bascule aria-label sur "Fermer le menu" : la barre du
   milieu disparait et les deux autres pivotent en croix. */
.menu-button::before,
.menu-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  margin: -1px 0 0 -10px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 220ms ease;
}

.menu-button::before {
  transform: translateY(-6px);
}

.menu-button::after {
  transform: translateY(6px);
}

.menu-button[aria-label="Fermer le menu"] {
  background-image: none;
}

.menu-button[aria-label="Fermer le menu"]::before {
  transform: rotate(45deg);
}

.menu-button[aria-label="Fermer le menu"]::after {
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .menu-button::before,
  .menu-button::after {
    transition: none;
  }
}

main {
  width: 100%;
  margin: 0 auto;
}

/* Ajoute le 24/08/2026 : bloc "Offres pour vous" (dotchlend-recommandations.js),
   pose sur l'accueil et sur /travail. "hidden" par defaut cote HTML : reste
   invisible et ne prend aucune place tant qu'aucune session abonne n'est
   detectee. */
.recommandations-section {
  width: calc(100% - 48px);
  margin: 24px auto;
}
.recommandations-section h2 {
  margin-bottom: 4px;
}
.recommandations-section > p {
  color: var(--muted, #666);
  margin-bottom: 16px;
}

/* Le fond (photo + degrade) vit sur ::before pour pouvoir etre zoome
   lentement (effet Ken Burns) sans deformer le contenu du hero. Deux formes
   decoratives (.hero-blob) flottent doucement en arriere-plan pour donner du
   mouvement, dans le meme esprit que la maquette de proposition validee. */
.search-hero {
  position: relative;
  width: calc(100% - 48px);
  min-height: 330px;
  margin: 22px auto;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: var(--shadow);
}

.search-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(7, 45, 84, 0.86), rgba(20, 120, 189, 0.68)),
    url("https://images.unsplash.com/photo-1562774053-701939374585?auto=format&fit=crop&w=1600&q=80")
      center / cover;
  animation: heroKenBurns 22s ease-in-out infinite alternate;
}

@keyframes heroKenBurns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

.hero-blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.35;
  pointer-events: none;
}

.hero-blob-1 {
  top: -60px;
  right: 8%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, var(--gold), transparent 70%);
  animation: heroFloat1 9s ease-in-out infinite;
}

.hero-blob-2 {
  bottom: -40px;
  left: 6%;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, var(--red), transparent 70%);
  animation: heroFloat2 11s ease-in-out infinite;
}

@keyframes heroFloat1 {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(18px);
  }
}

@keyframes heroFloat2 {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-hero::before,
  .hero-blob {
    animation: none;
  }
}

.search-panel {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  width: min(930px, 100%);
  min-height: 330px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 54px);
  color: var(--white);
  text-align: center;
}

.title-underline {
  display: block;
  width: 0;
  height: 4px;
  margin: 12px auto 0;
  background: var(--gold);
  border-radius: 2px;
  animation: growUnderline 1.1s 0.4s ease forwards;
}

@keyframes growUnderline {
  to {
    width: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .title-underline {
    animation: none;
    width: 120px;
  }
}

.search-panel p {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  font-weight: 900;
}

.search-panel h1 {
  display: grid;
  gap: 4px;
  max-width: 620px;
  margin: 0 0 26px;
  justify-self: center;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.08;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.search-panel h1 > span:not(.title-underline),
.search-panel h1 .home-hero-line {
  display: block;
  white-space: nowrap;
}

.search-form {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 10px;
  width: min(820px, 100%);
  min-width: 0;
  justify-self: center;
}

.search-form label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.search-form input,
.search-form button,
.btn {
  min-height: 48px;
  border-radius: 3px;
  font: inherit;
}

.search-form input {
  width: 100%;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: var(--white);
}

.search-form button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 0;
  color: var(--white);
  background: var(--red);
  font-weight: 900;
  cursor: pointer;
}

.intro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 22px;
  align-items: stretch;
  width: calc(100% - 48px);
  margin: 0 auto 24px;
}

.intro-card,
.image-only-card,
.cards-section,
.blog-section,
.topic-card {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 4px;
  box-shadow: 0 5px 18px rgba(20, 34, 58, 0.05);
}

.intro-card {
  min-width: 0;
  padding: clamp(28px, 5vw, 46px);
}

.section-label {
  margin: 0 0 12px;
  color: var(--red);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.intro-card h2,
.section-heading h2 {
  margin-bottom: 18px;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.12;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.intro-card p:not(.section-label) {
  max-width: 850px;
  color: #40506a;
  font-size: 17px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

/* Forme organique derriere la photo (comme sur la maquette validee) : la
   photo est legerement inclinee et se redresse au survol, la forme colore
   change doucement de contour pour accompagner le mouvement. */
.image-only-card {
  position: relative;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.image-only-card::before {
  content: "";
  position: absolute;
  top: -14px;
  right: -14px;
  width: 90%;
  height: 90%;
  background: linear-gradient(135deg, var(--gold), var(--red));
  border-radius: 34% 66% 62% 38% / 42% 40% 60% 58%;
  opacity: 0.85;
  transition: border-radius 600ms ease;
}

.image-only-card:hover::before {
  border-radius: 60% 40% 38% 62% / 55% 60% 40% 45%;
}

.image-only-card img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 390px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 18px 30px rgba(13, 43, 76, 0.22);
  transform: rotate(-1.5deg);
  transition: transform 400ms ease;
}

.image-only-card:hover img {
  transform: rotate(0deg) scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .image-only-card::before,
  .image-only-card img {
    transition: none;
  }
}

.cards-section {
  width: calc(100% - 48px);
  padding: clamp(22px, 4vw, 34px);
  margin: 0 auto 24px;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  width: calc(100% - 48px);
  margin: 0 auto 24px;
}

/* Chaque box porte desormais une image illustrant son theme, avec un
   degrade de la couleur de la rubrique en bas pour garder le titre lisible
   sans jamais masquer completement l'image (pas de conflit visuel). */
.quick-card {
  position: relative;
  display: grid;
  align-content: end;
  gap: 0;
  min-height: 168px;
  padding: 20px 22px;
  overflow: hidden;
  color: var(--white);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 4px;
  box-shadow: var(--shadow);
  font-size: 18px;
  font-weight: 900;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.quick-card:hover,
.quick-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 20px 34px rgba(13, 43, 76, 0.22);
}

.quick-card span {
  position: relative;
  display: block;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(6, 14, 26, 0.55);
}

.quick-card.green {
  background-image: linear-gradient(180deg, rgba(9, 26, 20, 0) 38%, rgba(15, 84, 47, 0.92) 100%),
    url("https://images.unsplash.com/photo-1562774053-701939374585?auto=format&fit=crop&w=800&q=80");
}

.quick-card.red {
  background-image: linear-gradient(180deg, rgba(30, 10, 8, 0) 38%, rgba(140, 24, 20, 0.92) 100%),
    url("https://images.unsplash.com/photo-1521791136064-7986c2920216?auto=format&fit=crop&w=800&q=80");
}

.quick-card.blue {
  background-image: linear-gradient(180deg, rgba(6, 20, 33, 0) 38%, rgba(5, 63, 105, 0.92) 100%),
    url("https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&w=800&q=80");
}

.quick-card.gold {
  color: var(--ink);
  background-image: linear-gradient(180deg, rgba(38, 28, 4, 0) 38%, rgba(245, 181, 27, 0.94) 100%),
    url("https://images.unsplash.com/photo-1511578314322-379afb476865?auto=format&fit=crop&w=800&q=80");
}

.quick-card.gold span {
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.35);
}

.blog-section {
  width: calc(100% - 48px);
  padding: clamp(22px, 4vw, 34px);
  margin: 0 auto 24px;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 22px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* Meme logique d'interaction que sur la page d'accueil (rubriques Travail et
   Actualites) et sur les cartes actualites/offres : legere elevation de la
   carte et zoom doux de l'image au survol, sans changer la mise en page. */
.blog-card {
  display: grid;
  grid-template-columns: 150px 1fr;
  min-height: 118px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 6px solid #3f4854;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(20, 34, 58, 0.22);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px rgba(20, 34, 58, 0.28);
}

.blog-card img {
  width: 100%;
  height: 118px;
  object-fit: cover;
  transition: transform 450ms ease;
}

.blog-card:hover img {
  transform: scale(1.07);
}

.blog-content {
  padding: 8px 16px 10px;
}

.blog-card h3 {
  margin-bottom: 6px;
  color: #1c6dbc;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.15;
}

.blog-card p {
  margin-bottom: 0;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.45;
}

/* Ligne d'offre d'emploi teaser sur l'accueil (rubrique "Travail et
   orientation"), rendue par renderJobRow() dans app.js. Meme logique
   visuelle que .blog-card, avec une 3e colonne pour l'etiquette secteur. */
.job-row {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 118px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 6px solid #3f4854;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(20, 34, 58, 0.22);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.job-row:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px rgba(20, 34, 58, 0.28);
}

.job-row img {
  width: 100%;
  height: 118px;
  object-fit: cover;
  transition: transform 450ms ease;
}

.job-row:hover img {
  transform: scale(1.07);
}

.job-row-body {
  min-width: 0;
  padding: 8px 16px 10px;
}

.job-row h3 {
  margin-bottom: 4px;
  color: #1c6dbc;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.job-row-meta {
  margin-bottom: 4px;
  color: #10243d;
  font-size: 13px;
  font-weight: 700;
}

.job-row-summary {
  margin: 0;
  overflow: hidden;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.job-row-tag {
  align-self: center;
  margin-right: 16px;
  padding: 4px 10px;
  color: #0d315c;
  background: #eef6fc;
  border: 1px solid #c6ddf0;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.topic-card {
  min-height: 210px;
  padding: 24px;
}

.topic-card h3 {
  margin-bottom: 10px;
  font-size: 24px;
}

.topic-card p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.65;
}

.topic-card.green {
  border-top: 4px solid var(--green);
}

.topic-card.red {
  border-top: 4px solid var(--red);
}

.topic-card.blue {
  border-top: 4px solid var(--blue);
}

.topic-card.gold {
  border-top: 4px solid var(--gold);
}

.topic-card.violet {
  border-top: 4px solid var(--violet);
}

.topic-card.dark {
  border-top: 4px solid #21314f;
}

.section-action {
  display: flex;
  /* Bouton "Voir plus" centre (et non plaque dans un coin), demande client
     du 2026-08-18 pour les sections Travail et orientation / Actualites. */
  justify-content: center;
  margin-top: 22px;
}

.site-footer {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 0.7fr;
  gap: 24px;
  width: calc(100% - 48px);
  margin: 0 auto 24px;
  padding: 34px;
  color: var(--white);
  background: #11223b;
  border-radius: 4px;
}

.site-footer h2,
.site-footer h3 {
  margin-bottom: 12px;
}

.site-footer p,
.site-footer a {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
}

.site-footer a {
  display: block;
  margin-bottom: 8px;
}

.simple-page {
  padding: 32px 0;
}

.simple-page h1 {
  margin-bottom: 18px;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.08;
  letter-spacing: 0;
}

.simple-page p {
  max-width: 760px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}

.back-link {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--blue);
  font-weight: 900;
}

/* Meme principe que le hero de l'accueil : le fond vit sur ::before pour
   pouvoir zoomer lentement (Ken Burns) sans deformer le texte. Chaque
   variante (.work-hero, .news-hero, .university-hero, .requirements-hero,
   .contact-hero) fixe juste l'image/degrade du ::before. */
.page-hero {
  position: relative;
  width: calc(100% - 48px);
  min-height: 300px;
  margin: 22px auto;
  padding: clamp(34px, 6vw, 70px);
  overflow: hidden;
  color: var(--white);
  border-radius: 4px;
  box-shadow: var(--shadow);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(7, 45, 84, 0.88), rgba(10, 114, 184, 0.68)),
    url("https://images.unsplash.com/photo-1562774053-701939374585?auto=format&fit=crop&w=1600&q=80")
      center / cover;
  animation: heroKenBurns 22s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .page-hero::before {
    animation: none;
  }
}

.page-hero p,
.page-hero h1 {
  position: relative;
  z-index: 1;
}

.page-hero p {
  margin-bottom: 12px;
  font-weight: 900;
}

.page-hero h1 {
  max-width: 860px;
  margin-bottom: 0;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.08;
  letter-spacing: 0;
}

.requirements-blog-grid {
  position: relative;
  z-index: 1;
  margin-top: 26px;
}

/* Titre de hero decoupe en lignes explicites (page Travail, 01/09/2026).
   Chaque .hero-line occupe sa propre ligne : le titre tient donc en DEUX
   lignes maitrisees au lieu de se casser au hasard selon la largeur.
   text-wrap: balance sert de filet de securite sur les tres petits ecrans,
   ou une ligne peut malgre tout devoir se replier : les deux moities restent
   alors de longueur comparable au lieu de laisser un mot seul en bas. */
.page-hero h1 .hero-line {
  display: block;
  text-wrap: balance;
}

.work-hero::before {
  background:
    linear-gradient(90deg, rgba(43, 28, 28, 0.88), rgba(237, 48, 40, 0.62)),
    url("https://images.unsplash.com/photo-1521791136064-7986c2920216?auto=format&fit=crop&w=1600&q=80")
      center / cover;
}

.news-hero::before {
  background:
    linear-gradient(90deg, rgba(7, 45, 84, 0.88), rgba(10, 114, 184, 0.62)),
    url("https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1600&q=80")
      center / cover;
}

.university-hero::before {
  background:
    linear-gradient(90deg, rgba(7, 45, 84, 0.88), rgba(33, 166, 91, 0.58)),
    url("https://images.unsplash.com/photo-1492538368677-f6e0afe31dcc?auto=format&fit=crop&w=1600&q=80")
      center / cover;
}

.requirements-hero::before {
  background:
    linear-gradient(90deg, rgba(7, 45, 84, 0.88), rgba(245, 181, 27, 0.52)),
    url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1600&q=80")
      center / cover;
}

.contact-hero::before {
  background:
    linear-gradient(90deg, rgba(7, 45, 84, 0.88), rgba(112, 73, 182, 0.58)),
    url("https://images.unsplash.com/photo-1516321497487-e288fb19713f?auto=format&fit=crop&w=1600&q=80")
      center / cover;
}

.content-band,
.panel-grid {
  width: calc(100% - 48px);
  margin: 0 auto 24px;
}

.content-band {
  padding: clamp(24px, 4vw, 44px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 5px 18px rgba(20, 34, 58, 0.05);
}

.two-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
  gap: 28px;
  align-items: start;
}

.content-band h2 {
  margin-bottom: 16px;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.12;
}

.content-band p {
  max-width: 920px;
  color: #40506a;
  font-size: 17px;
  line-height: 1.75;
}

.stack-list {
  display: grid;
  gap: 14px;
}

.stack-list article,
.panel-grid article {
  padding: 22px;
  background: #fbfdff;
  border: 1px solid var(--line);
  border-top: 5px solid #3f4854;
  border-radius: 8px;
  box-shadow: 0 5px 14px rgba(20, 34, 58, 0.08);
}

.stack-list h3,
.panel-grid h3 {
  margin-bottom: 8px;
  color: #1c6dbc;
  font-size: 22px;
  font-weight: 600;
}

.stack-list p,
.panel-grid p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.62;
}

.panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.info-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.info-table div {
  display: grid;
  gap: 6px;
  padding: 18px;
  background: #fbfdff;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.info-table strong {
  color: var(--ink);
  font-size: 17px;
}

.info-table span {
  color: var(--muted);
  line-height: 1.55;
}

.contact-form {
  display: grid;
  gap: 14px;
}

.contact-form label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 800;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 13px 14px;
  font: inherit;
}

.contact-form textarea {
  min-height: 130px;
  resize: vertical;
}

.contact-form button {
  justify-self: start;
  min-height: 48px;
  padding: 0 22px;
  color: var(--white);
  background: var(--red);
  border: 0;
  border-radius: 3px;
  font: inherit;
  font-weight: 900;
}

.contact-expert-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: clamp(22px, 4vw, 42px);
  align-items: start;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto 24px;
}

/* Panneau violet/creme distinctif (au lieu d'un fond blanc/bleu classique)
   pour faire ressortir la typographie de la colonne texte. */
.contact-expert-copy {
  display: grid;
  gap: 18px;
  max-width: 690px;
  padding: clamp(24px, 4vw, 38px);
  background: linear-gradient(155deg, #efe6fb 0%, #fdf3e4 100%);
  border: 1px solid #e4d6f5;
  border-top: 5px solid var(--violet);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.contact-expert-copy .section-label {
  color: var(--violet);
}

.contact-expert-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
}

.contact-expert-copy > p:not(.section-label) {
  margin: 0;
  color: #4a4260;
  font-size: 16px;
  line-height: 1.78;
}

/* Bandeau de reassurance au-dessus des moyens de contact */
.contact-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.contact-trust-row span {
  padding: 7px 14px;
  color: var(--violet);
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid #ddc8f4;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.contact-direct-grid {
  display: grid;
  gap: 12px;
}

.contact-direct-grid article {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #e4d6f5;
  border-top: 3px solid var(--violet);
  border-radius: 10px;
}

.contact-direct-grid article:nth-child(2) {
  border-top-color: var(--gold);
}

.contact-direct-grid article:nth-child(3) {
  border-top-color: var(--red);
}

.contact-direct-grid strong {
  color: var(--ink);
  font-size: 16px;
}

.contact-direct-grid span {
  color: #4a4260;
  line-height: 1.6;
}

.contact-direct-grid a {
  justify-self: start;
  color: var(--violet);
  font-weight: 900;
}

.contact-request-card {
  display: grid;
  gap: 14px;
  padding: 22px;
  background: var(--ink);
  border: 1px solid var(--deep-blue);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.contact-request-card .section-label {
  color: var(--gold);
}

.contact-request-card h2 {
  margin: 0;
  color: var(--white);
  font-size: 26px;
  line-height: 1.16;
}

.contact-form-pro {
  gap: 12px;
}

.contact-form-pro label {
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
}

.contact-form-pro input,
.contact-form-pro select,
.contact-form-pro textarea {
  min-height: 43px;
  color: var(--ink);
  background: var(--white);
  border-color: rgba(214, 227, 239, 0.88);
  border-radius: 4px;
}

.contact-form-pro textarea {
  min-height: 142px;
}

.contact-form-pro input:focus,
.contact-form-pro select:focus,
.contact-form-pro textarea:focus {
  border-color: var(--gold);
  outline: 2px solid rgba(245, 181, 27, 0.24);
  outline-offset: 0;
}

.contact-form-pro button {
  width: 100%;
  color: var(--ink);
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 4px;
  font-weight: 900;
}

.contact-form-pro button:hover,
.contact-form-pro button:active {
  background: #f7c644;
}

.contact-form-pro .form-status {
  color: rgba(255, 255, 255, 0.78);
}

.contact-form-pro .form-status.form-status-success {
  color: #6fe0a3;
  font-weight: 900;
}

.contact-form-pro .form-status.form-status-error {
  color: #ff9a9a;
  font-weight: 900;
}

.finder-layout,
.planner-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.32fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  width: calc(100% - 48px);
  margin: 0 auto 24px;
}

.filter-panel,
.results-panel,
.interactive-panel,
.comparison-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 5px 18px rgba(20, 34, 58, 0.05);
}

.filter-panel {
  position: sticky;
  top: 142px;
  align-self: start;
  padding: 22px;
}

.filter-panel h2,
.results-head h2 {
  margin-bottom: 16px;
  font-size: 24px;
}

.filter-panel label,
.field-group label,
.check-row {
  display: grid;
  gap: 8px;
  margin-bottom: 15px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.filter-panel select,
.filter-panel input,
.field-group input,
.field-group select,
.field-group textarea,
.results-head input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink);
  background: #fbfdff;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
}

.filter-reset {
  width: 100%;
  min-height: 42px;
  margin-top: 2px;
  color: #0d315c;
  background: #eef6fc;
  border: 1px solid #c6ddf0;
  border-radius: 4px;
  font: inherit;
  font-weight: 900;
}

.filter-reset:hover,
.filter-reset:active {
  background: #dff0fb;
}

.field-group textarea {
  min-height: 132px;
  padding-top: 12px;
  resize: vertical;
}

.range-value,
.form-status {
  color: var(--deep-blue);
  font-weight: 900;
}

.results-panel {
  min-width: 0;
  padding: 22px;
}

.results-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  gap: 18px;
  align-items: end;
  margin-bottom: 18px;
}

.result-list,
.opportunity-list,
.news-list {
  display: grid;
  gap: 14px;
}

.result-card,
.opportunity-card,
.news-card {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 6px solid #3f4854;
  border-radius: 9px;
  box-shadow: 0 7px 18px rgba(20, 34, 58, 0.18);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.result-card:hover,
.opportunity-card:hover,
.news-card:hover {
  transform: translateY(-2px);
  border-color: #9eb8d0;
  box-shadow: 0 12px 28px rgba(20, 34, 58, 0.2);
}

.result-card[hidden],
.opportunity-card[hidden],
.news-card[hidden] {
  display: none;
}

.result-card img,
.opportunity-card img,
.news-card img {
  width: 100%;
  height: 100%;
  min-height: 154px;
  object-fit: cover;
  transition: transform 450ms ease;
}

.news-card-media,
.article-card-media,
.job-offer-media {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: inherit;
  text-align: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.news-card-media:focus-visible,
.article-card-media:focus-visible,
.job-offer-media:focus-visible,
.news-title-link:focus-visible {
  outline: 3px solid var(--deep-blue);
  outline-offset: -3px;
}

.news-title-link {
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.news-title-link:hover {
  text-decoration: underline;
}

.result-card:hover img,
.opportunity-card:hover img,
.news-card:hover img {
  transform: scale(1.06);
}

.result-card > div,
.opportunity-card > div,
.news-card > div {
  padding: 16px 18px;
}

.result-card h3,
.opportunity-card h3,
.news-card h3 {
  margin-bottom: 8px;
  color: #1c6dbc;
  font-size: 21px;
  font-weight: 600;
}

.result-card p,
.opportunity-card p,
.news-card p {
  margin-bottom: 12px;
  color: #5d6b7f;
  line-height: 1.55;
}

.result-card dl,
.meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

/* Carte actualites alignee sur le format compact des articles universites
   (image reduite, texte resserre, une seule ligne d'infos). */
.news-card {
  grid-template-columns: 160px minmax(0, 1fr);
}

.news-card img {
  min-height: 130px;
}

.news-card > div {
  padding: 12px 14px;
}

.news-card h3 {
  margin-bottom: 4px;
  font-size: 16px;
}

.news-card p {
  margin-bottom: 0;
  font-size: 13px;
  line-height: 1.45;
}

.news-card .meta-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 8px;
  overflow-x: auto;
}

.news-card .meta-grid span {
  padding: 4px 8px;
  font-size: 11px;
  white-space: nowrap;
}

.result-card dl div,
.meta-grid span,
.status-card {
  padding: 10px;
  background: #f4f8fc;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.result-card dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.result-card dd {
  margin: 4px 0 0;
  font-weight: 800;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.badge-row span {
  padding: 7px 10px;
  color: var(--deep-blue);
  background: #eef6fc;
  border: 1px solid #cce1f2;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 900;
}

.interactive-panel {
  padding: clamp(22px, 4vw, 34px);
  align-self: start;
}

.timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.timeline article,
.step-card {
  padding: 20px;
  background: #fbfdff;
  border: 1px solid var(--line);
  border-top: 5px solid var(--blue);
  border-radius: 6px;
}

.timeline strong,
.step-card strong {
  display: block;
  margin-bottom: 8px;
  color: var(--red);
  font-size: 13px;
  text-transform: uppercase;
}

.tab-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.tab-controls button {
  min-height: 42px;
  padding: 0 16px;
  color: var(--deep-blue);
  background: #eef6fc;
  border: 1px solid #cce1f2;
  border-radius: 4px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.tab-controls button.active {
  color: var(--white);
  background: var(--red);
  border-color: var(--red);
}

[data-tab-panel] {
  display: none;
}

[data-tab-panel].active {
  display: grid;
}

.checklist {
  display: grid;
  gap: 12px;
}

.check-row {
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  padding: 14px;
  margin: 0;
  background: #fbfdff;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.check-row input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.check-row span {
  color: var(--muted);
  font-weight: 500;
  line-height: 1.45;
}

.progress-track {
  height: 10px;
  overflow: hidden;
  background: #e7eef6;
  border-radius: 999px;
}

.progress-track span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--red);
  transition: width 220ms ease;
}

.accordion {
  display: grid;
  gap: 8px;
}

.accordion button {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  color: var(--ink);
  background: #fbfdff;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.accordion button[aria-expanded="true"] {
  color: var(--white);
  background: var(--deep-blue);
  border-color: var(--deep-blue);
}

.accordion div {
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.accordion div p {
  margin: 0;
}

.actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  color: var(--deep-blue);
  background: var(--white);
  border: 1px solid var(--deep-blue);
  border-radius: 3px;
  font-weight: 900;
}

.prepare-dossier-btn {
  min-height: 48px;
  padding: 0 22px;
  color: #084f87;
  background: linear-gradient(180deg, #ffffff 0%, #eef7ff 100%);
  border-color: #9fc8e8;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(13, 43, 76, 0.08);
  white-space: nowrap;
}

.prepare-dossier-btn:hover,
.prepare-dossier-btn:focus-visible {
  color: var(--deep-blue);
  border-color: var(--deep-blue);
  background: #ffffff;
}

.contact-form .form-status {
  min-height: 24px;
  margin: 0;
}

.live-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.45fr) minmax(220px, 0.45fr);
  gap: 16px;
  align-items: stretch;
}

.live-strip h2 {
  margin-bottom: 10px;
  font-size: clamp(26px, 3vw, 38px);
}

.live-strip p:not(.section-label) {
  margin-bottom: 0;
}

.status-card {
  display: grid;
  align-content: center;
  gap: 8px;
  border-top: 5px solid var(--red);
}

.status-card strong {
  color: var(--deep-blue);
  font-size: 16px;
}

.status-card span {
  display: block;
  color: var(--muted);
  line-height: 1.55;
}

/* Bandeau d'organismes allemands en d├®filement continu (page actualit├®s) */
.org-marquee {
  width: calc(100% - 48px);
  max-width: 1160px;
  margin: 0 auto 24px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.org-marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: org-marquee-scroll 32s linear infinite;
}

.org-marquee:hover .org-marquee-track {
  animation-play-state: paused;
}

@keyframes org-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.org-card {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  width: 320px;
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(20, 34, 58, 0.07);
}

.org-card img {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.org-card strong {
  display: block;
  margin-bottom: 3px;
  color: var(--deep-blue);
  font-size: 14px;
}

.org-card span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .org-marquee-track {
    animation: none;
  }
  .org-marquee {
    overflow-x: auto;
  }
}

body[data-page] .content-band,
body[data-page] .filter-panel,
body[data-page] .results-panel,
body[data-page] .interactive-panel {
  border-color: #c9d9e8;
  box-shadow: 0 12px 32px rgba(13, 43, 76, 0.09);
}

body[data-page] .content-band {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 255, 0.96)),
    var(--white);
}

body[data-page] .timeline article,
body[data-page] .info-table div,
body[data-page] .status-card,
body[data-page] .step-card,
body[data-page] .check-row,
body[data-page] .stack-list article,
body[data-page] .panel-grid article {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
  border: 1px solid #cbdbea;
  border-top: 5px solid var(--blue);
  box-shadow: 0 8px 20px rgba(20, 34, 58, 0.1);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

body[data-page] .timeline article::before,
body[data-page] .info-table div::before,
body[data-page] .status-card::before,
body[data-page] .step-card::before,
body[data-page] .check-row::before,
body[data-page] .stack-list article::before,
body[data-page] .panel-grid article::before {
  position: absolute;
  inset: 0;
  width: 5px;
  content: "";
  background: var(--red);
}

body[data-page] .timeline article:nth-child(2n),
body[data-page] .info-table div:nth-child(2n),
body[data-page] .panel-grid article:nth-child(2n) {
  border-top-color: var(--red);
}

body[data-page] .timeline article:nth-child(3n),
body[data-page] .info-table div:nth-child(3n),
body[data-page] .panel-grid article:nth-child(3n) {
  border-top-color: var(--green);
}

body[data-page] .timeline article:nth-child(4n),
body[data-page] .info-table div:nth-child(4n),
body[data-page] .panel-grid article:nth-child(4n) {
  border-top-color: var(--gold);
}

body[data-page] .timeline article:hover,
body[data-page] .timeline article:active,
body[data-page] .info-table div:hover,
body[data-page] .info-table div:active,
body[data-page] .status-card:hover,
body[data-page] .status-card:active,
body[data-page] .step-card:hover,
body[data-page] .step-card:active,
body[data-page] .check-row:hover,
body[data-page] .check-row:active,
body[data-page] .stack-list article:hover,
body[data-page] .stack-list article:active,
body[data-page] .panel-grid article:hover,
body[data-page] .panel-grid article:active {
  transform: translateY(-5px);
  border-color: #9eb8d0;
  background: linear-gradient(180deg, #ffffff 0%, #eef6fc 100%);
  box-shadow: 0 18px 34px rgba(13, 43, 76, 0.18);
}

body[data-page] .timeline article h3,
body[data-page] .info-table strong,
body[data-page] .status-card strong,
body[data-page] .step-card h3,
body[data-page] .check-row strong,
body[data-page] .stack-list h3,
body[data-page] .panel-grid h3 {
  color: #0d315c;
  font-weight: 900;
  letter-spacing: 0;
}

body[data-page] .timeline article p,
body[data-page] .info-table span,
body[data-page] .status-card span,
body[data-page] .step-card p,
body[data-page] .check-row span,
body[data-page] .stack-list p,
body[data-page] .panel-grid p {
  color: #465a75;
  font-weight: 500;
}

body[data-page] .result-card,
body[data-page] .opportunity-card,
body[data-page] .news-card {
  border-color: #c5d6e7;
  box-shadow: 0 10px 24px rgba(20, 34, 58, 0.16);
}

body[data-page] .result-card h3,
body[data-page] .opportunity-card h3,
body[data-page] .news-card h3 {
  color: #0b66ad;
  font-weight: 800;
}

body[data-page] .meta-grid span,
body[data-page] .result-card dl div,
body[data-page] .badge-row span {
  background: #f0f7fd;
  border-color: #c6ddf0;
}

body[data-page] .secondary-btn,
body[data-page] .contact-form button {
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

body[data-page] .secondary-btn:hover,
body[data-page] .secondary-btn:active,
body[data-page] .contact-form button:hover,
body[data-page] .contact-form button:active {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(13, 43, 76, 0.16);
}

.admin-shell {
  padding-bottom: 28px;
}

.admin-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.34fr);
  gap: 22px;
  width: calc(100% - 48px);
  margin: 22px auto;
  padding: clamp(28px, 5vw, 52px);
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(7, 45, 84, 0.94), rgba(10, 114, 184, 0.78)),
    url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1600&q=80")
      center / cover;
  border-radius: 4px;
  box-shadow: var(--shadow);
}

.admin-hero h1 {
  max-width: 920px;
  margin-bottom: 16px;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.08;
}

.admin-hero p:not(.section-label) {
  max-width: 820px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 17px;
  line-height: 1.7;
}

.admin-session {
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 22px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 4px;
  box-shadow: 0 14px 32px rgba(7, 45, 84, 0.2);
}

.admin-session p {
  color: #40506a;
  font-weight: 800;
  line-height: 1.6;
}

.admin-session label,
.admin-form label,
.admin-mini-form label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 900;
}

.admin-session select,
.admin-form input,
.admin-form select,
.admin-form textarea,
.admin-mini-form input,
.admin-mini-form select,
.admin-mini-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink);
  background: #fbfdff;
  border: 1px solid #cbdbea;
  border-radius: 4px;
  font: inherit;
}

.admin-form textarea,
.admin-mini-form textarea {
  min-height: 120px;
  padding-top: 12px;
  resize: vertical;
}

.admin-grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  width: calc(100% - 48px);
  margin: 0 auto 24px;
}

.admin-sidebar {
  position: sticky;
  top: 142px;
  display: grid;
  overflow: hidden;
  background: var(--white);
  border: 1px solid #c9d9e8;
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(13, 43, 76, 0.1);
}

.admin-sidebar a {
  padding: 15px 18px;
  color: #0d315c;
  border-bottom: 1px solid #e1ebf4;
  font-weight: 900;
}

.admin-sidebar a:hover {
  color: var(--white);
  background: var(--red);
}

.admin-workspace {
  display: grid;
  gap: 22px;
}

.admin-panel {
  padding: clamp(22px, 4vw, 34px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.98)),
    var(--white);
  border: 1px solid #c9d9e8;
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(13, 43, 76, 0.09);
}

.admin-panel.is-limited {
  opacity: 0.64;
}

.admin-panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.admin-panel h2 {
  margin-bottom: 0;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
}

.admin-state {
  padding: 8px 11px;
  color: #0d315c;
  background: #eef6fc;
  border: 1px solid #c6ddf0;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 900;
}

.admin-btn {
  min-height: 44px;
  padding: 0 16px;
  color: var(--white);
  background: var(--red);
  border: 1px solid var(--red);
  border-radius: 3px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.admin-btn:hover,
.admin-btn:active {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(13, 43, 76, 0.18);
}

.admin-btn:disabled,
.admin-form input:disabled,
.admin-form select:disabled,
.admin-form textarea:disabled,
.admin-mini-form input:disabled,
.admin-mini-form select:disabled,
.admin-mini-form textarea:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.role-board,
.api-grid,
.publication-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.role-board article,
.api-grid article {
  display: grid;
  gap: 8px;
  padding: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
  border: 1px solid #cbdbea;
  border-top: 5px solid var(--blue);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(20, 34, 58, 0.1);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.role-board article:nth-child(2n),
.api-grid article:nth-child(2n) {
  border-top-color: var(--red);
}

.role-board article:nth-child(3n),
.api-grid article:nth-child(3n) {
  border-top-color: var(--green);
}

.role-board article:hover,
.api-grid article:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(13, 43, 76, 0.16);
}

.role-board strong,
.api-grid strong {
  color: #0d315c;
  font-size: 18px;
}

.role-board span,
.api-grid span,
.api-grid small {
  color: #465a75;
  line-height: 1.55;
}

.admin-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.admin-form-wide {
  grid-column: 1 / -1;
}

.admin-mini-form {
  display: grid;
  gap: 12px;
  padding: 18px;
  background: #fbfdff;
  border: 1px solid #cbdbea;
  border-top: 5px solid var(--blue);
  border-radius: 6px;
}

.admin-mini-form:nth-child(2) {
  border-top-color: var(--red);
}

.admin-table-wrap {
  overflow-x: auto;
  margin-top: 20px;
  border: 1px solid #cbdbea;
  border-radius: 6px;
}

.admin-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: var(--white);
}

.admin-table th,
.admin-table td {
  padding: 14px;
  border-bottom: 1px solid #e1ebf4;
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  color: #0d315c;
  background: #eef6fc;
  font-size: 13px;
  text-transform: uppercase;
}

.admin-table td {
  color: #40506a;
  font-weight: 700;
}

.quality-list {
  display: grid;
  gap: 12px;
}

.admin-body {
  min-height: 100vh;
  background: #eaf1f8;
}

.admin-app {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

.admin-side {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  background: #10243d;
  color: var(--white);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.admin-brand {
  display: grid;
  gap: 4px;
  padding: 26px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.admin-brand strong {
  color: var(--white);
  font-size: 28px;
  font-weight: 900;
}

.admin-brand span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  font-weight: 800;
}

.admin-menu {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 18px 14px;
}

.admin-menu button,
.admin-side-footer a,
.admin-side-footer button {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  color: rgba(255, 255, 255, 0.78);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font: inherit;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.admin-menu button:hover,
.admin-menu button.active,
.admin-side-footer a:hover,
.admin-side-footer button:hover {
  color: var(--white);
  background: #0a72b8;
  border-color: rgba(255, 255, 255, 0.16);
}

.admin-menu button.active {
  background: var(--red);
}

.admin-side-footer {
  display: grid;
  gap: 8px;
  padding: 16px 14px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.admin-main {
  min-width: 0;
}

.admin-topbar {
  position: sticky;
  z-index: 10;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.42fr);
  gap: 18px;
  align-items: center;
  min-height: 96px;
  padding: 18px 28px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid #c9d9e8;
  box-shadow: 0 8px 24px rgba(13, 43, 76, 0.08);
  backdrop-filter: blur(10px);
}

.admin-topbar h1 {
  margin: 0;
  color: #10243d;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.08;
}

.admin-account {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 0.8fr);
  gap: 8px 12px;
  align-items: center;
  padding: 12px;
  background: #f6faff;
  border: 1px solid #cbdbea;
  border-radius: 6px;
}

.admin-account p {
  margin: 0;
  color: #0d315c;
  font-weight: 900;
}

.admin-account label {
  display: grid;
  gap: 5px;
  color: #40506a;
  font-size: 12px;
  font-weight: 900;
}

.admin-account select {
  min-height: 38px;
  padding: 0 10px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid #cbdbea;
  border-radius: 4px;
  font: inherit;
  font-weight: 800;
}

.admin-account span {
  grid-column: 1 / -1;
  color: #607089;
  font-size: 13px;
  font-weight: 800;
}

.admin-content {
  display: block;
  width: 100%;
  padding: 26px 28px 34px;
}

.admin-view {
  display: none;
  gap: 22px;
}

.admin-view.active {
  display: grid;
}

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.admin-metrics article {
  display: grid;
  gap: 7px;
  padding: 20px;
  background: var(--white);
  border: 1px solid #cbdbea;
  border-top: 5px solid var(--blue);
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(13, 43, 76, 0.09);
}

.admin-metrics article:nth-child(2) {
  border-top-color: var(--red);
}

.admin-metrics article:nth-child(3) {
  border-top-color: var(--green);
}

.admin-metrics article:nth-child(4) {
  border-top-color: var(--gold);
}

.admin-metrics strong {
  color: #10243d;
  font-size: 34px;
  line-height: 1;
}

.admin-metrics span {
  color: #0d315c;
  font-weight: 900;
}

.admin-metrics small {
  color: #607089;
  font-weight: 800;
}

.admin-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 22px;
}

.admin-feed,
.admin-priority-list {
  display: grid;
  gap: 12px;
}

.admin-feed article,
.admin-priority-list article,
.admin-api-box {
  display: grid;
  gap: 8px;
  padding: 18px;
  background: #f6faff;
  border: 1px solid #cbdbea;
  border-left: 5px solid var(--red);
  border-radius: 6px;
}

.admin-feed strong,
.admin-priority-list strong,
.admin-api-box strong {
  color: #0d315c;
  font-size: 17px;
}

.admin-feed span,
.admin-priority-list span,
.admin-api-box span {
  color: #465a75;
  line-height: 1.55;
}

.admin-feed small {
  color: var(--red);
  font-weight: 900;
}

.admin-search {
  min-height: 42px;
  padding: 0 12px;
  color: var(--ink);
  background: #fbfdff;
  border: 1px solid #cbdbea;
  border-radius: 4px;
  font: inherit;
}

.detail-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 14px;
  padding: 0 14px;
  color: var(--white);
  background: var(--red);
  border: 0;
  border-radius: 3px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.detail-link:hover,
.detail-link:active {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(13, 43, 76, 0.16);
}

.detail-hero {
  width: calc(100% - 48px);
  min-height: 380px;
  margin: 22px auto;
  padding: clamp(34px, 6vw, 70px);
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(7, 45, 84, 0.91), rgba(10, 114, 184, 0.64)),
    url("https://images.unsplash.com/photo-1562774053-701939374585?auto=format&fit=crop&w=1600&q=80")
      center / cover;
  border-radius: 4px;
  box-shadow: var(--shadow);
}

.detail-hero .back-link {
  color: rgba(255, 255, 255, 0.9);
}

.detail-hero h1 {
  max-width: 900px;
  margin-bottom: 18px;
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.05;
}

.detail-hero p:not(.section-label) {
  max-width: 840px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 18px;
  line-height: 1.75;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.32fr);
  gap: 24px;
  align-items: start;
  width: calc(100% - 48px);
  margin: 0 auto 24px;
}

.detail-article,
.detail-box {
  background: var(--white);
  border: 1px solid #c9d9e8;
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(13, 43, 76, 0.09);
}

.detail-article {
  overflow: hidden;
}

.detail-article > img {
  width: 100%;
  height: clamp(260px, 34vw, 430px);
  object-fit: cover;
}

.detail-article section,
.detail-summary-grid {
  margin: 0;
  padding: clamp(22px, 4vw, 36px);
}

.detail-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  background: #f6faff;
  border-bottom: 1px solid #d8e5f0;
}

.detail-summary-grid div {
  display: grid;
  gap: 6px;
  padding: 14px;
  background: var(--white);
  border: 1px solid #cbdbea;
  border-top: 5px solid var(--blue);
  border-radius: 4px;
}

.detail-summary-grid strong,
.detail-box dt {
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.detail-summary-grid span,
.detail-box dd {
  margin: 0;
  color: #0d315c;
  font-weight: 900;
  line-height: 1.45;
}

.detail-article h2 {
  margin-bottom: 16px;
  color: #10243d;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
}

.rich-list,
.numbered-flow {
  display: grid;
  gap: 12px;
}

.rich-list article,
.numbered-flow article {
  padding: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
  border: 1px solid #cbdbea;
  border-left: 5px solid var(--red);
  border-radius: 5px;
}

.rich-list p,
.numbered-flow p {
  margin: 0;
  color: #465a75;
  font-size: 16px;
  line-height: 1.7;
}

.numbered-flow strong {
  display: block;
  margin-bottom: 8px;
  color: #0d315c;
  font-size: 13px;
  text-transform: uppercase;
}

.detail-sidebar {
  position: sticky;
  top: 142px;
  display: grid;
  gap: 16px;
}

.detail-box {
  padding: 22px;
}

.detail-box h2 {
  margin-bottom: 16px;
  color: #10243d;
  font-size: 24px;
}

.detail-box dl {
  display: grid;
  gap: 12px;
  margin: 0;
}

.detail-box dl div,
.detail-box li {
  padding: 12px;
  background: #f6faff;
  border: 1px solid #cbdbea;
  border-radius: 4px;
}

.detail-box ul {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.detail-box li,
.detail-box p {
  color: #465a75;
  line-height: 1.6;
}

.action-box .btn {
  width: 100%;
}

.article-hero {
  width: calc(100% - 48px);
  min-height: 360px;
  margin: 22px auto 0;
  padding: clamp(34px, 6vw, 70px);
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(7, 45, 84, 0.92), rgba(10, 114, 184, 0.66)),
    url("https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1600&q=80")
      center / cover;
  border-radius: 4px;
  box-shadow: var(--shadow);
}

/* Conteneur de l'effet "extraction" : delimite la zone dans laquelle le hero
   peut rester colle (sticky). Sans cette limite, le hero restait fixe pendant
   tout le defilement de la page et passait au-dessus des filtres/articles
   qui suivent. Ici, le hero se decolle des qu'on sort de ce conteneur. */
body[data-page="universites"] .hero-extract-stage {
  position: relative;
  z-index: 0;
}

/* Effet de defilement "extraction" : le hero reste fixe en fond pendant que la
   section suivante glisse par-dessus, comme une feuille que l'on tire vers le haut. */
body[data-page="universites"] .article-hero {
  position: sticky;
  top: var(--header-offset, 0px);
  z-index: 1;
  margin-bottom: 0;
  overflow: hidden;
  /* Uniquement un filtre (n'affecte jamais la boite/geometrie de l'element,
     donc aucun risque de "trou" laissant apparaitre le fond de la page
     pendant que la section suivante glisse par-dessus). Pas de scale() ici :
     un transform de mise a l'echelle reduirait la boite visible sans reduire
     l'espace reserve, ce qui laissait apparaitre le fond derriere le hero. */
  will-change: filter;
  filter: brightness(var(--hero-brightness, 1));
  transition: filter 80ms linear;
}

.article-hero h1 {
  max-width: 900px;
  margin-bottom: 18px;
  font-size: clamp(38px, 6vw, 66px);
  line-height: 1.05;
}

.article-hero p:not(.section-label) {
  max-width: 820px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 18px;
  line-height: 1.75;
}

.article-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.45fr) minmax(220px, 0.45fr);
  gap: 16px;
  align-items: stretch;
}

body[data-page="universites"] .article-intro {
  position: relative;
  z-index: 2;
  margin-top: -46px;
  padding-top: calc(clamp(24px, 4vw, 44px) + 46px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 246, 252, 0.96)),
    var(--white);
  border-color: #c2d6e8;
  border-radius: 26px 26px 4px 4px;
  box-shadow: 0 -18px 32px rgba(13, 43, 76, 0.16), 0 16px 38px rgba(13, 43, 76, 0.12);
}

body[data-page="universites"] .article-intro > div:first-child {
  grid-column: 1 / -1;
  display: grid;
  align-content: center;
  padding: clamp(10px, 2vw, 18px);
}

body[data-page="universites"] .article-intro > div:first-child h2 {
  max-width: none;
  margin-bottom: 16px;
  color: #0d315c;
  font-size: clamp(22px, 2.6vw, 40px);
  line-height: 1.08;
  font-weight: 900;
  white-space: nowrap;
}

body[data-page="universites"] .article-intro > div:first-child > p:not(.section-label) {
  max-width: none;
  margin-bottom: 13px;
  color: #40506a;
  font-size: 17px;
  line-height: 1.82;
  text-align: justify;
}

body[data-page="universites"] .article-intro-description {
  max-width: none;
}

body[data-page="universites"] .article-intro > div:first-child > p:not(.section-label):last-child {
  margin-bottom: 0;
  padding-left: 16px;
  border-left: 4px solid var(--red);
  color: #263a55;
  font-weight: 700;
}

.article-console {
  display: grid;
  grid-template-columns: minmax(260px, 0.28fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  width: calc(100% - 48px);
  margin: 0 auto 24px;
}

.article-list-panel {
  min-width: 0;
  padding: 22px;
  background: var(--white);
  border: 1px solid #c9d9e8;
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(13, 43, 76, 0.09);
}

.article-list {
  display: grid;
  gap: 10px;
}

.article-card {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  overflow: hidden;
  background: var(--white);
  border: 1px solid #c5d6e7;
  border-top: 4px solid #3f4854;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(20, 34, 58, 0.14);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.article-card:hover,
.article-card:active {
  transform: translateY(-3px);
  border-color: #9eb8d0;
  box-shadow: 0 16px 32px rgba(13, 43, 76, 0.18);
}

.article-card img {
  width: 100%;
  height: 100%;
  min-height: 130px;
  object-fit: cover;
}

.article-card > div {
  padding: 12px 14px;
}

.article-card h3 {
  margin-bottom: 4px;
  color: #0b66ad;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 800;
  line-height: 1.2;
}

.article-card p:not(.section-label) {
  margin-bottom: 0;
  color: #5d6b7f;
  font-size: 13px;
  line-height: 1.45;
}

.article-card .article-meta-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  overflow-x: auto;
}

.article-card .article-meta-row span {
  padding: 4px 8px;
  background: #f4f8fc;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.article-card .detail-link {
  flex-shrink: 0;
  margin-top: 0;
  margin-left: auto;
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
  white-space: nowrap;
}

.article-detail-page {
  width: 100%;
}

.article-title-block {
  width: min(1120px, calc(100% - 48px));
  margin: 28px auto 22px;
  padding: clamp(24px, 4vw, 42px);
  background: var(--white);
  border: 1px solid #c9d9e8;
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(13, 43, 76, 0.09);
}

.article-title-block h1 {
  max-width: 980px;
  margin-bottom: 16px;
  color: #10243d;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.07;
}

.article-lead {
  max-width: 900px;
  margin-bottom: 20px;
  color: #465a75;
  font-size: 19px;
  line-height: 1.8;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.article-meta span {
  padding: 8px 11px;
  color: #0d315c;
  background: #eef6fc;
  border: 1px solid #c6ddf0;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 900;
}

.article-reading-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.32fr);
  gap: 24px;
  align-items: start;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto 26px;
}

.article-reading-card {
  overflow: hidden;
  background: var(--white);
  border: 1px solid #c9d9e8;
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(13, 43, 76, 0.09);
}

.article-main-image {
  width: 100%;
  height: clamp(320px, 42vw, 520px);
  object-fit: cover;
}

.article-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: clamp(18px, 3vw, 28px);
  background: #f6faff;
  border-bottom: 1px solid #d8e5f0;
}

.article-facts div {
  display: grid;
  gap: 6px;
  padding: 14px;
  background: var(--white);
  border: 1px solid #cbdbea;
  border-top: 5px solid var(--blue);
  border-radius: 4px;
}

.article-facts strong {
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.article-facts span {
  color: #0d315c;
  font-weight: 900;
  line-height: 1.45;
}

.article-body-section {
  padding: clamp(24px, 4vw, 42px);
  border-bottom: 1px solid #e1ebf4;
}

.article-body-section h2 {
  max-width: 860px;
  margin-bottom: 14px;
  color: #10243d;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.14;
}

.article-paragraph {
  max-width: 860px;
  margin: 0;
  color: #3f5068;
  font-size: 18px;
  line-height: 1.9;
}

.article-aside {
  position: sticky;
  top: 142px;
  display: grid;
  gap: 16px;
}

.author-box strong {
  display: block;
  margin-bottom: 8px;
  color: #0d315c;
  font-size: 18px;
}

.detail-box ol {
  display: grid;
  gap: 10px;
  padding-left: 20px;
  margin: 0;
}

.detail-box ol a,
.recent-articles a {
  color: #0b66ad;
  font-weight: 900;
  line-height: 1.5;
}

.recent-articles {
  display: grid;
  gap: 12px;
}

.work-blog-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.42fr) minmax(220px, 0.42fr);
  gap: 16px;
  align-items: stretch;
}

.work-blog-intro h2,
.work-pipeline h2 {
  margin-bottom: 12px;
  font-size: clamp(28px, 4vw, 42px);
}

.work-blog-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.28fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  width: calc(100% - 48px);
  margin: 0 auto 24px;
}

.ez-blog-panel {
  min-width: 0;
  padding: 22px;
  background: var(--white);
  border: 1px solid #c9d9e8;
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(13, 43, 76, 0.09);
}

.ez-blog-list {
  display: grid;
  gap: 18px;
}

.ez-blog-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  overflow: hidden;
  background: var(--white);
  border: 1px solid #c5d6e7;
  border-top: 7px solid #3f4854;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(20, 34, 58, 0.18);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.ez-blog-card:hover,
.ez-blog-card:active {
  transform: translateY(-3px);
  border-color: #9eb8d0;
  box-shadow: 0 16px 34px rgba(13, 43, 76, 0.2);
}

.ez-blog-image img {
  width: 100%;
  height: 100%;
  min-height: 170px;
  object-fit: cover;
}

.ez-blog-content {
  display: grid;
  align-content: start;
  padding: 14px 18px 16px;
}

.ez-blog-title {
  margin-bottom: 7px;
  color: #1c6dbc;
  font-size: clamp(21px, 3vw, 30px);
  font-weight: 600;
  line-height: 1.12;
}

.ez-blog-title:hover {
  color: var(--red);
}

.ez-blog-content p {
  margin-bottom: 12px;
  color: #5d6b7f;
  font-size: 16px;
  line-height: 1.65;
}

.ez-blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ez-blog-meta span {
  padding: 7px 10px;
  color: #0d315c;
  background: #eef6fc;
  border: 1px solid #c6ddf0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 900;
}

.exigences-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #d9e5f1;
}

.exigences-pagination a,
.exigences-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  color: #0d315c;
  background: #f6faff;
  border: 1px solid #c6ddf0;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 900;
}

.exigences-pagination a {
  color: var(--white);
  background: #1c6dbc;
  border-color: #1c6dbc;
}

.exigences-pagination a:hover {
  background: #164f86;
  border-color: #164f86;
}

.exigences-pagination a.is-disabled {
  pointer-events: none;
  color: #6e7c8e;
  background: #edf2f7;
  border-color: #d6e0ea;
  opacity: 0.65;
}

.listing-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #d9e5f1;
}

.listing-pagination button,
.listing-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  color: #0d315c;
  background: #f6faff;
  border: 1px solid #c6ddf0;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 900;
}

.listing-pagination button {
  color: var(--white);
  background: #1c6dbc;
  border-color: #1c6dbc;
  cursor: pointer;
}

.listing-pagination button:hover {
  background: #164f86;
  border-color: #164f86;
}

.listing-pagination button:disabled {
  color: #6e7c8e;
  background: #edf2f7;
  border-color: #d6e0ea;
  cursor: default;
  opacity: 0.65;
}

.filter-note {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: #f6faff;
  border: 1px solid #cbdbea;
  border-left: 5px solid var(--red);
  border-radius: 5px;
}

.filter-note strong {
  color: #0d315c;
}

.filter-note p {
  margin: 0;
  color: #5d6b7f;
  font-size: 14px;
  line-height: 1.55;
}

.pipeline-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.pipeline-grid article {
  padding: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
  border: 1px solid #cbdbea;
  border-top: 5px solid var(--blue);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(20, 34, 58, 0.1);
}

.pipeline-grid article:nth-child(2n) {
  border-top-color: var(--red);
}

.pipeline-grid strong {
  display: block;
  margin-bottom: 8px;
  color: #0d315c;
  font-size: 17px;
}

.pipeline-grid p {
  margin: 0;
  color: #465a75;
  line-height: 1.6;
}

.work-editor-form textarea[name="sections"] {
  min-height: 190px;
}

.admin-table-link,
.form-status a {
  color: #0b66ad;
  font-weight: 900;
}

.ez-page-shell,
.ez-article-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
  width: min(1120px, calc(100% - 48px));
  margin: 30px auto;
}

.type-articles-shell {
  width: min(1180px, calc(100% - 48px));
  margin: 34px auto 58px;
}

.ez-blog-main,
.ez-article-card,
.ez-blog-sidebar {
  min-width: 0;
}

.ez-blog-heading {
  padding: 24px 26px;
  margin-bottom: 18px;
  background: var(--white);
  border: 1px solid #d0deeb;
  border-radius: 5px;
  box-shadow: 0 8px 20px rgba(13, 43, 76, 0.08);
}

.ez-blog-heading h1 {
  margin-bottom: 8px;
  color: #10243d;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.08;
}

.ez-blog-heading p {
  max-width: 720px;
  margin: 0;
  color: #5d6b7f;
  font-size: 17px;
  line-height: 1.65;
}

.ez-blog-sidebar {
  position: sticky;
  top: 140px;
  display: grid;
  gap: 16px;
}

.ez-side-box {
  padding: 18px;
  background: var(--white);
  border: 1px solid #d0deeb;
  border-top: 5px solid #3f4854;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(13, 43, 76, 0.08);
}

.ez-side-box h2 {
  margin-bottom: 14px;
  color: #10243d;
  font-size: 20px;
}

.ez-side-box input,
.ez-side-box select,
.ez-comment-form input,
.ez-comment-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink);
  background: #fbfdff;
  border: 1px solid #cbdbea;
  border-radius: 4px;
  font: inherit;
}

.ez-side-box p,
.ez-side-box li,
.ez-side-box a {
  color: #5d6b7f;
  line-height: 1.6;
}

.ez-side-box a {
  display: block;
  color: #1c6dbc;
  font-weight: 800;
}

.ez-side-box ul,
.ez-side-box ol {
  display: grid;
  gap: 10px;
  padding-left: 20px;
  margin: 0;
}

.ez-side-box strong[data-work-author],
.ez-side-box > strong {
  display: block;
  color: #0d315c;
  font-size: 28px;
  line-height: 1;
}

.ez-article-card {
  padding: 26px;
  background: var(--white);
  border: 1px solid #d0deeb;
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(13, 43, 76, 0.1);
}

.ez-article-card h1 {
  margin: 8px 0 18px;
  color: #1c6dbc;
  /* Reduit (etait clamp(34px, 5vw, 56px)) : les intitules de poste
     allemands sont souvent longs et le titre debordait de la carte
     ".ez-article-card" (26px de padding), demande client 2026-08-18. La
     police se reduit maintenant plus vite (3.4vw) et descend plus bas
     (24px min) pour rester dans la zone prevue quel que soit l'intitule. */
  font-size: clamp(24px, 3.4vw, 44px);
  font-weight: 600;
  line-height: 1.15;
  /* Les intitules/mots composes allemands (ex: "Fachkraft") peuvent etre un
     seul mot tres long : le laisser deborder plutot que forcer un retour a
     la ligne illisible aurait casse la mise en page sur mobile. */
  overflow-wrap: break-word;
}

.ez-article-image {
  width: 100%;
  height: clamp(300px, 42vw, 500px);
  object-fit: cover;
  border-radius: 5px;
}

.ez-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 14px 0 20px;
  margin-bottom: 16px;
  border-bottom: 1px solid #e0e8f1;
  color: #5d6b7f;
  font-size: 14px;
}

.ez-article-meta strong {
  color: #0d315c;
}

.ez-article-body {
  display: grid;
  gap: 0;
}

.ez-lead {
  margin-bottom: 22px;
  color: #3f5068;
  font-size: 18px;
  line-height: 1.9;
}

.ez-rich-section,
.ez-article-body .article-body-section {
  padding: 18px 0;
  border-bottom: 1px solid #edf2f7;
}

.ez-rich-section h2,
.ez-article-body .article-body-section h2 {
  margin-bottom: 12px;
  color: #10243d;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.18;
}

.ez-rich-section p,
.ez-article-body .article-paragraph {
  max-width: none;
  color: #3f5068;
  font-size: 17px;
  line-height: 1.9;
}

.type-group-label {
  margin: 22px 0 10px;
  color: #10243d;
  font-size: 18px;
  font-weight: 800;
}

.type-group-label:first-child {
  margin-top: 0;
}

.establishment-list {
  display: grid;
  gap: 26px;
}

.establishment-block {
  display: grid;
  gap: 10px;
  padding-bottom: 26px;
  border-bottom: 1px solid #edf2f7;
}

.establishment-block:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.establishment-block h4 {
  color: #10243d;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
}

.establishment-block img {
  width: 100%;
  height: clamp(220px, 32vw, 340px);
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(13, 43, 76, 0.12);
}

.establishment-block p {
  max-width: none;
  color: #3f5068;
  font-size: 15.5px;
  line-height: 1.75;
}

.ez-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 18px 0;
  border-bottom: 1px solid #edf2f7;
}

.ez-tags strong,
.ez-tags span {
  padding: 8px 10px;
  background: #eef6fc;
  border: 1px solid #c6ddf0;
  border-radius: 4px;
  color: #0d315c;
  font-size: 13px;
  font-weight: 900;
}

.ez-tags strong {
  color: var(--red);
  background: #fff7f6;
  border-color: #f3c9c6;
}

.ez-comment-zone {
  padding-top: 22px;
}

.ez-comment-zone h2 {
  margin-bottom: 10px;
  color: #10243d;
  font-size: 28px;
}

.ez-comment-zone p {
  color: #5d6b7f;
  line-height: 1.65;
}

.ez-comment-form {
  display: grid;
  gap: 14px;
}

.ez-comment-form label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 900;
}

.ez-comment-form textarea {
  min-height: 150px;
  padding-top: 12px;
  resize: vertical;
}

.ez-comment-form button {
  justify-self: start;
  min-height: 46px;
  padding: 0 22px;
  color: var(--white);
  background: var(--red);
  border: 1px solid var(--red);
  border-radius: 999px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.ez-comment-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(237, 48, 40, 0.2);
}

/* Zone commentaires reelle (dotchlend-api) : liste + connexion/inscription
   inline, voir public/dotchlend-comments.js. */
.ez-comment-list {
  display: grid;
  gap: 14px;
  margin: 18px 0;
}

.ez-comment-item {
  padding: 14px 16px;
  background: #f6f9fc;
  border: 1px solid #dce7f2;
  border-radius: 6px;
}

.ez-comment-item strong {
  color: #10243d;
}

.ez-comment-item span {
  margin-left: 8px;
  color: #7c8aa0;
  font-size: 13px;
}

.ez-comment-item p {
  margin-top: 6px;
  color: #46536a;
  line-height: 1.6;
}

.ez-comment-session {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--ink);
}

.ez-comment-session button {
  color: var(--blue);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

.ez-comment-auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.type-article-section {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 24px;
  background: var(--white);
  border: 1px solid #d0deeb;
  border-radius: 8px;
  box-shadow: 0 14px 28px rgba(13, 43, 76, 0.08);
}

.type-article-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.type-article-head h2 {
  margin: 0;
  color: #174b7a;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.15;
}

.type-article-head h1 {
  margin: 2px 0 8px;
  color: #1c6dbc;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.08;
  font-weight: 700;
}

.type-article-intro {
  max-width: none;
  margin: 0 0 18px;
  color: #516173;
  font-size: 15px;
  line-height: 1.65;
  text-align: justify;
}

.type-article-list {
  gap: 14px;
}

.type-article-empty {
  margin: 0;
}

.ez-comment-auth-actions button[data-auth-action="register"] {
  color: var(--red);
  background: var(--white);
}

.site-auth-cta {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: min(430px, 100%);
  margin: 18px auto 0;
  padding: 18px;
  text-align: center;
  color: #10243d;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(214, 227, 239, 0.72);
  border-radius: 22px;
  box-shadow: 0 16px 36px rgba(5, 18, 34, 0.14);
  animation: authCtaFloat 5.5s ease-in-out infinite;
}

.site-auth-kicker {
  width: max-content;
  max-width: 100%;
  padding: 5px 12px;
  color: #0b66ad;
  background: #eef6fc;
  border: 1px solid #c6ddf0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.site-auth-cta strong {
  color: #10243d;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.2;
}

.site-auth-cta p {
  max-width: 320px;
  margin: 0;
  color: #52647c;
  font-size: 13.5px;
  line-height: 1.55;
}

.site-auth-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.site-auth-pill {
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
}

.site-auth-pill:hover {
  transform: translateY(-2px);
}

.site-auth-pill-primary {
  color: #fff;
  background: #ed3028;
  border: 1px solid #ed3028;
  box-shadow: 0 12px 24px rgba(237, 48, 40, 0.22);
}

.site-auth-pill-secondary {
  color: #10243d;
  background: #f0c95c;
  border: 1px solid #f0c95c;
  box-shadow: 0 12px 24px rgba(240, 201, 92, 0.22);
}

.site-auth-form {
  width: 100%;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(214, 227, 239, 0.8);
  animation: authFormRise 220ms ease both;
}

.site-auth-form[hidden] {
  display: none !important;
}

.ez-comment-auth-cta {
  margin-top: 20px;
  background: linear-gradient(135deg, #ffffff, #f7fbfe);
}

@keyframes authCtaFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes authFormRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-auth-cta,
  .site-auth-form {
    animation: none;
  }

  .site-auth-pill,
  .ez-comment-form button {
    transition: none;
  }
}

/* Newsletter (page Contact) : liste de categories a cocher, voir
   public/dotchlend-newsletter.js. */
[data-newsletter-panel] {
  position: relative;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  overflow: hidden;
  width: calc(100% - 48px);
  margin: 0 auto 24px;
  padding: 18px clamp(20px, 3vw, 28px);
  color: var(--ink);
  background: #eef4fb;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
}

body[data-page] [data-newsletter-panel] {
  grid-template-columns: 250px minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 0;
  padding: 18px clamp(20px, 3vw, 28px) !important;
}

body[data-page] [data-newsletter-zone] {
  width: 100% !important;
  justify-self: stretch !important;
  align-self: stretch;
}

[data-newsletter-panel]::before {
  display: none;
  content: none;
}

[data-newsletter-panel] > * {
  position: relative;
  z-index: 1;
}

  [data-newsletter-panel].reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

body[data-page="actualites"] .finder-layout.reveal,
body[data-page="universites"] .article-console.reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.news-card-media,
.news-card-media:hover,
.news-card-media:active,
.news-title-link,
.news-title-link:hover,
.news-title-link:active {
  min-height: 0 !important;
  padding: 0 !important;
  color: inherit;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.news-card-media {
  height: 100%;
}

.news-title-link {
  display: inline;
  font: inherit;
  line-height: inherit;
  text-align: left;
}

.news-title-link:hover {
  text-decoration: underline;
}

@keyframes newsletterBgDrift {
  from {
    transform: scale(1.02) translateX(-4px);
  }
  to {
    transform: scale(1.045) translateX(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-newsletter-panel]::before {
    animation: none;
  }
}

[data-newsletter-panel] .section-label {
  margin-bottom: 4px;
  color: var(--red);
}

[data-newsletter-panel] h2,
.newsletter-copy h2 {
  margin: 0 0 8px;
  color: #10243d;
  font-family: "Inter", "Segoe UI", sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 850;
  line-height: 1.1;
}

.newsletter-copy {
  grid-column: 2;
  max-width: none;
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 190px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.newsletter-copy p:not(.section-label) {
  max-width: 820px;
  margin: 0;
  color: #52647c;
  font-family: "Inter", "Segoe UI", sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.55;
}

.newsletter-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.newsletter-points li {
  position: relative;
  min-height: 38px;
  padding: 8px 10px 8px 24px;
  color: #40506a;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid #d7e2ee;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.35;
}

.newsletter-points li::before {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 6px;
  height: 6px;
  content: "";
  background: var(--red);
  border-radius: 50%;
  transform: translateY(-50%);
}

[data-newsletter-zone] {
  grid-column: 1;
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  width: 100%;
  min-height: 190px;
  justify-self: stretch;
  padding: 14px;
  background: #ffffff;
  border: 1px solid #d7e2ee;
  border-radius: 10px;
  box-shadow: 0 18px 30px rgba(13, 43, 76, 0.14);
  overflow: visible;
}

[data-newsletter-zone]::before {
  display: none;
  content: none;
}

.newsletter-card {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 12px;
  background: rgba(248, 251, 254, 0.96);
  border: 1px solid rgba(214, 227, 239, 0.72);
  border-radius: 6px;
  box-shadow: 0 16px 32px rgba(5, 18, 34, 0.2);
}

.newsletter-card.site-auth-cta {
  position: relative;
  z-index: 1;
  justify-items: center;
  width: min(210px, 100%) !important;
  min-height: 140px;
  padding: 13px !important;
  border-radius: 10px !important;
  animation: authCtaFloat 5.5s ease-in-out infinite;
  transform: none;
  transition: transform 400ms ease, box-shadow 220ms ease;
}

[data-newsletter-zone]:hover .newsletter-card.site-auth-cta {
  transform: translateY(-3px);
}

.newsletter-card.site-auth-cta .site-auth-kicker,
.newsletter-card.site-auth-cta p {
  display: block;
}

.newsletter-card.site-auth-cta .site-auth-kicker {
  padding: 3px 9px;
  font-size: 10px;
}

.newsletter-card.site-auth-cta strong {
  max-width: 180px;
  font-size: 14px;
  line-height: 1.18;
}

.newsletter-card.site-auth-cta .site-auth-actions {
  width: 100%;
}

.newsletter-card.site-auth-cta .site-auth-pill {
  min-height: 34px;
  padding: 0 12px;
  font-size: 11.5px;
}

.newsletter-card.site-auth-cta:has(.site-auth-form:not([hidden])) {
  width: 260px !important;
  border-radius: 18px !important;
  transform: rotate(0deg);
}

.newsletter-preferences-cta .newsletter-session {
  justify-content: center;
  margin: 0;
  font-size: 11.5px;
}

.newsletter-preferences-cta .newsletter-session button {
  font-size: 11.5px;
}

.newsletter-form,
.newsletter-auth-form {
  display: grid;
  gap: 12px;
}

.newsletter-auth-form label,
.newsletter-form label {
  display: grid;
  gap: 6px;
  color: #10243d;
  font-size: 13px;
  font-weight: 800;
}

.newsletter-auth-form input {
  width: 100%;
  min-height: 40px;
  padding: 0 11px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid #cbdbea;
  border-radius: 4px;
  font: inherit;
}

.newsletter-auth-form input:focus {
  border-color: #0b66ad;
  outline: 2px solid rgba(11, 102, 173, 0.13);
  outline-offset: 0;
}

.newsletter-auth-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.newsletter-auth-actions button,
.newsletter-form button {
  min-height: 40px;
  padding: 0 18px;
  color: #ffffff;
  background: #0b66ad;
  border: 1px solid #0b66ad;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.newsletter-auth-actions button:hover,
.newsletter-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(11, 102, 173, 0.2);
}

.newsletter-auth-actions button[data-auth-action="register"] {
  color: #0b66ad;
  background: #ffffff;
}

.newsletter-session {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
  color: #52647c;
  font-size: 13px;
  line-height: 1.5;
}

.newsletter-session strong {
  color: #10243d;
}

.newsletter-session button {
  padding: 0;
  color: #0b66ad;
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.newsletter-categories {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  padding: 10px;
  background: #ffffff;
  border: 1px solid #dce7f2;
  border-radius: 5px;
}

.newsletter-category {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.newsletter-category input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.newsletter-category-child {
  margin-left: 12px;
  font-weight: 500;
  color: #46536a;
}

.ez-level-box,
.ez-expertise-box,
.ez-modules-box {
  padding: 12px;
}

.ez-level-list,
.ez-expertise-box > div,
.ez-modules-box > div {
  display: grid;
  gap: 10px;
}

.ez-level-list span,
.ez-level-list a {
  display: grid;
  min-height: 66px;
  place-items: center;
  color: var(--white);
  background: #282424;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 16px rgba(20, 34, 58, 0.14);
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
}

.ez-level-list .level-b1,
.ez-level-list .level-b2 {
  background: var(--red);
}

.ez-level-list .level-c1 {
  color: #ffffff;
  background: var(--gold);
}

/* Les niveaux des articles universite sont des liens vers les cours
   d'allemand Erfolg-Zentrum : petite pulsation continue + accent au survol
   pour inviter clairement au clic. */
.ez-level-list a {
  position: relative;
  cursor: pointer;
  animation: levelPulse 2.6s ease-in-out infinite;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.ez-level-list a:hover,
.ez-level-list a:focus-visible {
  transform: translateY(-3px) scale(1.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 14px 26px rgba(20, 34, 58, 0.28);
  animation-play-state: paused;
}

@keyframes levelPulse {
  0%,
  100% {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 16px rgba(20, 34, 58, 0.14);
  }
  50% {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 16px rgba(20, 34, 58, 0.14), 0 0 0 6px rgba(237, 48, 40, 0.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ez-level-list a {
    animation: none;
  }
}

.ez-expertise-box {
  border-top-color: var(--blue);
}

.ez-expertise-box article {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  min-height: 54px;
  overflow: hidden;
  color: var(--white);
  background: var(--deep-blue);
  border-radius: 4px;
}

.ez-expertise-box article strong {
  display: grid;
  height: 100%;
  place-items: center;
  background: rgba(255, 255, 255, 0.13);
  color: var(--white);
  font-size: 28px;
}

.ez-expertise-box article span {
  padding: 10px 12px;
  color: var(--white);
  font-weight: 900;
  line-height: 1.2;
}

.ez-modules-box {
  color: var(--white);
  background: #3a3636;
  border-color: #3a3636;
}

.ez-modules-box h2 {
  color: var(--white);
}

.ez-modules-box span {
  display: grid;
  min-height: 48px;
  place-items: center;
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 17px;
  font-weight: 900;
}

.ez-modules-box span:last-child {
  border-bottom: 0;
}

.ez-body-list {
  display: grid;
  gap: 8px;
  padding-left: 22px;
  margin: 8px 0 12px;
}

.ez-body-list li {
  color: #3f5068;
  font-size: 16px;
  line-height: 1.75;
}

.job-board-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: calc(100% - 48px);
  margin: 0 auto 24px;
}

.job-board-summary article {
  display: grid;
  gap: 8px;
  min-height: 112px;
  padding: 20px;
  background: var(--white);
  border: 1px solid #cbdbea;
  border-top: 5px solid var(--blue);
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(13, 43, 76, 0.09);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.job-board-summary article:nth-child(2) {
  border-top-color: var(--red);
}

.job-board-summary article:nth-child(3) {
  border-top-color: var(--green);
}

.job-board-summary article:nth-child(4) {
  border-top-color: var(--gold);
}

.job-board-summary article:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(13, 43, 76, 0.13);
}

.job-board-summary strong {
  color: #0d315c;
  font-size: 32px;
  line-height: 1;
}

.job-board-summary span {
  color: #52647c;
  font-weight: 900;
  line-height: 1.4;
}

.job-board-layout {
  grid-template-columns: minmax(280px, 0.28fr) minmax(0, 1fr);
}

.job-filter-panel {
  border-top: 5px solid var(--blue);
}

.job-filter-note {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: #f6faff;
  border: 1px solid #cbdbea;
  border-left: 5px solid var(--red);
  border-radius: 5px;
}

.job-filter-note strong {
  color: #0d315c;
}

.job-filter-note p {
  margin: 0;
  color: #5d6b7f;
  font-size: 14px;
  line-height: 1.55;
}

.job-offer-list {
  display: grid;
  gap: 10px;
}

.job-offer-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  overflow: hidden;
  background: var(--white);
  border: 1px solid #c5d6e7;
  border-top: 4px solid #3f4854;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(20, 34, 58, 0.14);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.job-offer-card:hover,
.job-offer-card:active {
  transform: translateY(-3px);
  border-color: #9eb8d0;
  box-shadow: 0 16px 34px rgba(13, 43, 76, 0.2);
}

.job-offer-card img {
  width: 100%;
  height: 100%;
  min-height: 130px;
  object-fit: cover;
  transition: transform 450ms ease;
}

.job-offer-card:hover img {
  transform: scale(1.06);
}

.job-offer-body {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 12px 14px;
}

.job-offer-topline {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
}

.job-requirements {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.job-offer-topline span,
.job-requirements span {
  padding: 4px 8px;
  color: #0d315c;
  background: #eef6fc;
  border: 1px solid #c6ddf0;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.job-offer-topline span:first-child {
  color: var(--white);
  background: var(--red);
  border-color: var(--red);
}

.job-offer-card h3 {
  margin: 0;
  color: #0b66ad;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.2;
}

/* Titres de cartes desormais cliquables (17/08/2026) : le titre lui-meme
   ouvre la fiche/l'article, en plus du lien "En savoir plus" deja present
   plus bas dans la carte. Sans cette regle, le lien herite du bleu/souligne
   par defaut du navigateur au lieu de la couleur du h3 qui l'entoure. */
.job-offer-title-link,
.article-title-link {
  color: inherit;
  text-decoration: none;
}

.job-offer-title-link:hover,
.job-offer-title-link:focus-visible,
.article-title-link:hover,
.article-title-link:focus-visible {
  text-decoration: underline;
}

.job-company {
  margin: 0;
  color: #0d315c;
  font-weight: 900;
  font-size: 13px;
}

.job-offer-card p:not(.job-company) {
  margin: 0;
  color: #50627a;
  font-size: 13px;
  line-height: 1.45;
}

.job-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.job-facts div {
  padding: 6px 8px;
  background: #f6faff;
  border: 1px solid #cbdbea;
  border-radius: 4px;
}

.job-facts dt {
  color: var(--red);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.job-facts dd {
  margin: 2px 0 0;
  color: #10243d;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.3;
}

.job-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.job-actions .detail-link {
  min-height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

.job-actions small {
  color: #607089;
  font-size: 12px;
  font-weight: 800;
}

.empty-state {
  padding: 18px;
  color: #0d315c;
  background: #eef6fc;
  border: 1px solid #c6ddf0;
  border-radius: 6px;
  font-weight: 900;
}

/* Fenetre "En savoir plus" (documents demandes + ce que nous proposons). */
.requirements-modal[hidden] {
  display: none;
}

.requirements-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
}

.requirements-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 18, 32, 0.58);
}

.requirements-modal-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 32px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 30px 60px rgba(6, 14, 26, 0.35);
  animation: modalRiseIn 220ms ease both;
}

@keyframes modalRiseIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .requirements-modal-panel {
    animation: none;
  }
}

.requirements-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #eef3f8;
  color: #33455f;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease;
}

.requirements-modal-close:hover {
  background: #dfe8f1;
}

.requirements-modal-panel h2 {
  margin: 4px 0 18px;
  padding-right: 30px;
  font-size: 24px;
  color: #0d315c;
  line-height: 1.2;
}

.requirements-modal-section {
  margin-top: 22px;
}

.requirements-modal-section h3 {
  margin-bottom: 10px;
  font-size: 16px;
  color: #0d315c;
}

.requirements-modal-section ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  color: #40506a;
  line-height: 1.6;
}

.requirements-modal-help {
  padding: 18px 20px;
  background: #f6faff;
  border: 1px solid #cbdbea;
  border-radius: 8px;
}

.requirements-modal-help p {
  margin: 0 0 10px;
  color: #40506a;
}

.requirements-modal-help .btn {
  margin-top: 16px;
  width: 100%;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.32fr);
  gap: 24px;
  align-items: stretch;
  width: calc(100% - 48px);
  min-height: 470px;
  margin: 24px auto;
  padding: clamp(28px, 5vw, 58px);
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(7, 35, 67, 0.92), rgba(10, 96, 158, 0.76)),
    url("https://images.unsplash.com/photo-1523580846011-d3a5bc25702b?auto=format&fit=crop&w=1800&q=80")
      center / cover;
  border-radius: 6px;
  box-shadow: 0 22px 54px rgba(13, 43, 76, 0.18);
}

.home-hero-copy {
  display: grid;
  align-content: center;
  max-width: 920px;
}

.home-hero h1 {
  max-width: 820px;
  margin-bottom: 18px;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
}

.home-hero p:not(.section-label) {
  max-width: 760px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 18px;
  line-height: 1.75;
}

.home-search {
  margin-top: 12px;
  justify-self: start;
}

.home-hero-panel {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(7, 35, 67, 0.16);
}

.home-hero-panel strong {
  color: #0d315c;
  font-size: 22px;
}

.home-hero-panel span {
  padding: 13px 14px;
  color: #0d315c;
  background: #f6faff;
  border: 1px solid #cbdbea;
  border-left: 5px solid var(--blue);
  border-radius: 4px;
  font-weight: 900;
}

.home-hero-panel span:nth-child(3),
.home-hero-panel span:nth-child(5) {
  border-left-color: var(--red);
}

.orientation-strip,
.home-section,
.home-feature,
.home-board,
.home-compare {
  width: calc(100% - 48px);
  margin: 0 auto 24px;
}

.orientation-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.orientation-strip article,
.guidance-grid article,
.mini-job-grid article,
.compare-list article {
  background: var(--white);
  border: 1px solid #cbdbea;
  border-top: 5px solid var(--blue);
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(13, 43, 76, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.orientation-strip article {
  display: grid;
  gap: 8px;
  min-height: 142px;
  padding: 20px;
}

.orientation-strip article:nth-child(2),
.guidance-grid article:nth-child(2),
.mini-job-grid article:nth-child(2),
.compare-list article:nth-child(2n) {
  border-top-color: var(--red);
}

.orientation-strip article:nth-child(3),
.guidance-grid article:nth-child(3),
.mini-job-grid article:nth-child(3) {
  border-top-color: var(--green);
}

.orientation-strip article:nth-child(4),
.guidance-grid article:nth-child(4) {
  border-top-color: var(--gold);
}

.orientation-strip article:hover,
.guidance-grid article:hover,
.mini-job-grid article:hover,
.compare-list article:hover {
  transform: translateY(-3px);
  border-color: #9eb8d0;
  box-shadow: 0 16px 34px rgba(13, 43, 76, 0.13);
}

.orientation-strip strong,
.guidance-grid h3,
.mini-job-grid strong,
.compare-list strong {
  color: #0d315c;
}

.orientation-strip span,
.guidance-grid p,
.mini-job-grid span,
.compare-list span,
.home-section-head p,
.home-feature p,
.home-board p {
  color: #52647c;
  line-height: 1.65;
}

.home-section,
.home-board,
.home-compare {
  padding: clamp(24px, 4vw, 40px);
  background: var(--white);
  border: 1px solid #cbdbea;
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(13, 43, 76, 0.08);
}

.home-section-head {
  max-width: 850px;
  margin-bottom: 22px;
}

.home-section-head h2,
.home-feature h2,
.home-compare h2 {
  margin-bottom: 12px;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.1;
}

.guidance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.guidance-grid article {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 220px;
  padding: 22px;
}

.guidance-grid span {
  color: var(--red);
  font-size: 13px;
  font-weight: 900;
}

.guidance-grid h3 {
  margin: 0;
  font-size: 22px;
}

.home-feature {
  display: grid;
  grid-template-columns: minmax(320px, 0.45fr) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
  overflow: hidden;
  background: var(--white);
  border: 1px solid #cbdbea;
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(13, 43, 76, 0.08);
}

.home-feature img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}

.home-feature div {
  display: grid;
  align-content: center;
  padding: clamp(24px, 4vw, 44px);
}

.home-feature .btn {
  justify-self: start;
  margin-top: 8px;
}

.mini-job-grid,
.compare-list {
  display: grid;
  gap: 14px;
}

.mini-job-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mini-job-grid article,
.compare-list article {
  display: grid;
  gap: 8px;
  padding: 20px;
}

.home-compare {
  display: grid;
  grid-template-columns: minmax(280px, 0.38fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.compare-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.requirement-main-card {
  display: grid;
  gap: 18px;
}

.requirement-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 20px;
  align-items: center;
}

.requirement-intro h2 {
  margin-bottom: 12px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.12;
}

.requirement-intro p:not(.section-label) {
  color: #4c5f78;
  font-size: 17px;
  line-height: 1.72;
}

.requirement-intro img {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border: 10px solid #eef6fc;
  border-radius: 50%;
  box-shadow: 0 18px 34px rgba(13, 43, 76, 0.18);
}

.requirement-mini-grid,
.requirement-check-grid,
.requirement-flow-list {
  display: grid;
  gap: 14px;
}

.requirement-mini-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Petit visuel de profil (Etudiant / Formation / Travailleur) pour rattacher
   chaque carte a une image plutot qu'un simple bloc de texte. */
.requirement-avatar {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 6px 14px rgba(13, 43, 76, 0.18);
}

.requirement-mini-grid article,
.requirement-path-card,
.requirement-check-grid article,
.requirement-flow-list article {
  position: relative;
  overflow: hidden;
  padding: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
  border: 1px solid #cbdbea;
  border-top: 5px solid var(--blue);
  border-radius: 7px;
  box-shadow: 0 10px 24px rgba(13, 43, 76, 0.1);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.requirement-mini-grid article:nth-child(2),
.requirement-check-grid article:nth-child(2n),
.requirement-flow-list article:nth-child(2n) {
  border-top-color: var(--red);
}

.requirement-mini-grid article:nth-child(3),
.requirement-check-grid article:nth-child(3n),
.requirement-flow-list article:nth-child(3n) {
  border-top-color: var(--green);
}

.requirement-mini-grid article:hover,
.requirement-path-card:hover,
.requirement-check-grid article:hover,
.requirement-flow-list article:hover {
  transform: translateY(-3px);
  border-color: #9eb8d0;
  box-shadow: 0 16px 34px rgba(13, 43, 76, 0.15);
}

.requirement-mini-grid strong,
.requirement-check-grid strong,
.requirement-flow-list h3,
.requirement-path-card h3 {
  color: #0d315c;
}

.requirement-mini-grid span,
.requirement-check-grid span,
.requirement-flow-list p,
.requirement-path-card p:not(.section-label),
.requirement-band-head p {
  color: #52647c;
  line-height: 1.68;
}

.requirement-path-card {
  border-top-color: var(--gold);
}

.requirement-path-card h3 {
  margin-bottom: 10px;
  font-size: 25px;
}

.requirement-band,
.requirement-flow {
  width: calc(100% - 48px);
  margin: 0 auto 24px;
  padding: clamp(24px, 4vw, 38px);
  background: var(--white);
  border: 1px solid #cbdbea;
  border-radius: 7px;
  box-shadow: 0 10px 24px rgba(13, 43, 76, 0.08);
}

.requirement-band-head,
.requirement-flow > div:first-child {
  max-width: 860px;
  margin-bottom: 22px;
}

.requirement-band h2,
.requirement-flow h2 {
  margin-bottom: 12px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.12;
}

.requirement-check-grid,
.requirement-flow-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.requirement-flow-list strong {
  display: block;
  margin-bottom: 12px;
  color: var(--red);
  font-size: 14px;
}

.university-type-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  margin-top: 8px;
}

.university-type-card {
  overflow: hidden;
  padding: 16px 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
  border: 1px solid #cbdbea;
  border-top: 4px solid var(--blue);
  border-radius: 7px;
  box-shadow: 0 10px 24px rgba(13, 43, 76, 0.1);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.university-type-img {
  display: block;
  width: calc(100% + 36px);
  height: 150px;
  margin: -16px -18px 12px;
  object-fit: cover;
}

.university-type-card:hover,
.university-type-card:focus-within {
  transform: translateY(-3px);
  border-color: #9eb8d0;
  box-shadow: 0 16px 34px rgba(13, 43, 76, 0.15);
}

.university-type-card:nth-child(2) {
  border-top-color: var(--red);
}

.university-type-card:nth-child(3) {
  border-top-color: var(--green);
}

.university-type-card:nth-child(4) {
  border-top-color: var(--gold);
}

.university-type-card:nth-child(5) {
  border-top-color: var(--red);
}

.university-type-card:nth-child(6) {
  border-top-color: var(--green);
}

.university-type-kicker {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.university-type-card h3 {
  margin-bottom: 6px;
  color: #0d315c;
  font-size: 17px;
  line-height: 1.3;
}

.university-type-card p:not(.university-type-kicker):not(.university-type-meta) {
  margin-bottom: 8px;
  color: #40506a;
  font-size: 14.5px;
  line-height: 1.55;
}

.university-type-meta {
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.login-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(90deg, rgba(7, 45, 84, 0.92), rgba(10, 114, 184, 0.74)),
    url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1600&q=80")
      center / cover;
}

.login-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.62fr);
  gap: 28px;
  width: min(980px, 100%);
  padding: clamp(26px, 5vw, 46px);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 6px;
  box-shadow: 0 24px 54px rgba(7, 45, 84, 0.28);
}

.login-card h1 {
  margin-bottom: 14px;
  color: #0d315c;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.08;
}

.login-card p:not(.section-label) {
  color: #465a75;
  font-size: 17px;
  line-height: 1.7;
}

.login-form {
  display: grid;
  gap: 14px;
}

.login-form label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 900;
}

.login-form input {
  min-height: 48px;
  padding: 0 13px;
  color: var(--ink);
  background: #fbfdff;
  border: 1px solid #cbdbea;
  border-radius: 4px;
  font: inherit;
}

.login-form button,
.admin-logout {
  min-height: 46px;
  padding: 0 16px;
  color: var(--white);
  background: var(--red);
  border: 1px solid var(--red);
  border-radius: 3px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.admin-logout {
  background: #11223b;
  border-color: #11223b;
}

.login-help {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px;
  background: #eef6fc;
  border: 1px solid #c6ddf0;
  border-radius: 4px;
}

.login-help strong,
.login-help span,
.admin-user {
  color: #0d315c;
  font-weight: 900;
}

/* Apparition au defilement (pilotee par app.js via IntersectionObserver).
   L'etat de depart est ici en CSS ; .in-view est ajoute par le script quand
   l'element entre dans le viewport. Le delai de cascade entre elements
   voisins (--reveal-delay) est calcule automatiquement en JS selon leur
   position dans leur conteneur : il n'y a plus de classe delay-1/2/3 a poser
   a la main dans le HTML. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms ease, transform 620ms ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Variante "fade seul" (sans translateY) pour les elements qui portent deja
   un transform permanent (ex : le hero de la page Universites, anime en
   filter au defilement). Utiliser .reveal ici ecraserait ce transform. */
.reveal-fade {
  opacity: 0;
  transition: opacity 620ms ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-fade.in-view {
  opacity: 1;
}

@media (max-width: 900px) {
  .header-top {
    position: relative;
    width: 100%;
    min-height: 68px;
    /* Le bouton menu est en position:absolute (right:14px) : il est donc hors
       du flux et le contenu du header passait DESSOUS. Le selecteur de langue,
       dernier element de la rangee, se retrouvait recouvert et tronque
       ("Englis" au lieu de "English"). On reserve sa place a droite :
       14px de marge + 44px de bouton + 14px de respiration = 72px.
       Le palier 640px plus bas remet padding: 10px 12px, car le header y
       passe en grille et le bouton reprend sa place dans le flux. */
    padding: 10px 72px 10px 14px;
  }

  .brand {
    max-width: calc(100% - 58px);
    min-width: 0;
  }

  .text-brand strong {
    font-size: 17px;
  }

  .text-brand small,
  .top-links {
    display: none;
  }

  .menu-button {
    position: absolute;
    top: 13px;
    right: 14px;
    display: grid;
  }

  .main-nav {
    display: none;
  }

  .main-nav.is-open {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--white);
    box-shadow: 0 14px 26px rgba(13, 43, 76, 0.14);
  }

  .main-nav a {
    justify-content: flex-start;
    width: 100%;
    padding-left: 22px;
    border-top: 1px solid #e7eef5;
    border-left: 0;
  }

  .main-nav a::after {
    right: auto;
    bottom: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 0;
  }

  .search-form,
  .intro-layout,
  .site-footer,
  .admin-app,
  .admin-topbar,
  .admin-account,
  .admin-metrics,
  .admin-dashboard-grid,
  .admin-hero,
  .admin-grid,
  .two-columns,
  .panel-grid,
  .info-table,
  .finder-layout,
  .planner-layout,
  .results-head,
  .timeline,
  .live-strip,
  .role-board,
  .api-grid,
  .publication-board,
  .admin-form,
  .login-card,
  .article-intro,
  .article-console,
  .article-reading-layout,
  .article-facts,
  .work-blog-intro,
  .work-blog-layout,
  .pipeline-grid,
  .ez-page-shell,
  .ez-article-shell,
  .job-board-summary,
  .home-hero,
  .orientation-strip,
  .guidance-grid,
  .home-feature,
  .mini-job-grid,
  .home-compare,
  .compare-list,
  .contact-expert-section,
  .requirement-intro,
  .requirement-mini-grid,
  .requirement-check-grid,
  .requirement-flow-list {
    grid-template-columns: 1fr;
  }

  .filter-panel,
  .admin-sidebar {
    position: static;
  }

  .admin-side {
    position: static;
    height: auto;
  }

  .admin-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-content,
  .admin-topbar {
    padding-left: 16px;
    padding-right: 16px;
  }

  .cards-grid,
  .blog-grid,
  .quick-grid {
    grid-template-columns: 1fr;
  }

  .university-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .requirements-hero-boxes {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body {
    width: 100vw;
  }

  body * {
    max-width: 100%;
  }

  main {
    width: 100%;
    padding: 0 10px;
  }

  .site-header,
  .search-hero,
  .home-hero,
  .page-hero,
  .admin-topbar,
  .admin-hero,
  .search-panel,
  .intro-card,
  .cards-section,
  .blog-section,
  .quick-grid,
  .content-band,
  .panel-grid,
  .site-footer,
  .finder-layout,
  .planner-layout,
  .admin-grid {
    overflow: hidden;
    max-width: 100%;
  }

  /* .image-only-card garde overflow: visible pour laisser depasser la forme
     decorative ; on limite juste sa largeur pour eviter tout defilement
     horizontal sur petit ecran. */
  .image-only-card {
    max-width: calc(100% - 14px);
  }

  .search-hero,
  .home-hero,
  .page-hero,
  .intro-layout,
  .quick-grid,
  .blog-section,
  .cards-section,
  .content-band,
  .panel-grid,
  .finder-layout,
  .planner-layout,
  .admin-hero,
  .admin-grid {
    width: 100%;
  }

  .article-hero,
  .article-console,
  .article-title-block,
  .article-reading-layout {
    width: 100%;
  }

  .article-aside {
    position: static;
  }

  .university-type-grid {
    grid-template-columns: 1fr;
  }

  .ez-blog-sidebar {
    position: static;
  }

  .article-card {
    grid-template-columns: 1fr;
  }

  .ez-blog-card {
    grid-template-columns: 1fr;
  }

  .job-offer-card,
  .job-facts {
    grid-template-columns: 1fr;
  }

  .article-card img {
    height: 210px;
  }

  .ez-blog-image img {
    height: 210px;
  }

  .job-offer-card img {
    height: 210px;
    min-height: 0;
  }

  .admin-panel-head {
    display: grid;
  }

  .result-card,
  .opportunity-card,
  .news-card {
    grid-template-columns: 1fr;
  }

  .result-card img,
  .opportunity-card img,
  .news-card img {
    height: 190px;
  }

  .result-card dl,
  .meta-grid {
    grid-template-columns: 1fr;
  }

  .search-hero,
  .search-panel {
    min-height: 360px;
  }

  .home-hero {
    width: 100%;
    min-height: 0;
    padding: 28px 20px;
  }

  .home-hero h1 {
    font-size: 31px;
  }

  .home-hero p:not(.section-label) {
    font-size: 15px;
  }

  .orientation-strip,
  .home-section,
  .home-feature,
  .home-board,
  .home-compare {
    width: 100%;
  }

  .home-feature img {
    min-height: 240px;
  }

  .requirement-band,
  .requirement-flow {
    width: 100%;
  }

  .contact-expert-section {
    width: 100%;
    padding: 20px;
  }

  .contact-request-card {
    padding: 18px;
  }

  .requirement-intro img {
    width: 190px;
    height: 190px;
    justify-self: center;
  }

  .search-panel {
    width: 100%;
    padding: 28px 26px;
  }

  .search-panel h1 {
    font-size: 25px;
    line-height: 1.15;
  }

  .page-hero h1 {
    font-size: 30px;
  }

  .search-form {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .search-form input,
  .search-form button {
    width: 100%;
  }

  .intro-card h2,
  .section-heading h2 {
    font-size: 24px;
  }

  .intro-card p:not(.section-label) {
    font-size: 15px;
  }

  .image-only-card img {
    min-height: 260px;
  }

  .blog-card img {
    height: 118px;
  }

  .blog-card {
    grid-template-columns: 128px 1fr;
  }

  .blog-card h3 {
    font-size: 17px;
  }

  .blog-card p {
    font-size: 14px;
  }

  .site-footer {
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }

  .newsletter-auth-actions,
  .newsletter-categories {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  [data-newsletter-panel] {
    grid-template-columns: 1fr;
    width: 100%;
    margin: 18px auto;
    padding: 18px;
  }

  .newsletter-copy,
  [data-newsletter-zone] {
    grid-column: auto;
  }

  [data-newsletter-zone] {
    width: 100%;
    justify-self: stretch;
    min-height: 220px;
  }

  .newsletter-card.site-auth-cta {
    border-radius: 10px;
  }

  .blog-card {
    grid-template-columns: 112px 1fr;
  }

  .blog-card img {
    height: 112px;
  }

  .blog-content {
    padding: 7px 10px;
  }

  .blog-card h3 {
    font-size: 15px;
  }

  .blog-card p {
    font-size: 12px;
    line-height: 1.35;
  }
}

/* Fenetre "Pr├®parer ma candidature" (page Travail). Reste simple et alignee
   sur le reste du site : carte blanche, coins arrondis, bouton rouge pour
   l'action principale (nous contacter). */

/* ==========================================================================
   Accueil ÔÇö bandeau chiffres, villes populaires, carte d'Allemagne
   (elements repris d'une maquette de reference fournie par le client,
   adaptes a la palette et aux classes existantes du site). Utilisent le
   systeme d'apparition au defilement deja en place (.reveal / .in-view,
   voir app.js) : aucune nouvelle logique d'animation a part le compteur
   anime (setupCounters dans app.js).
   ========================================================================== */

.stats-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: calc(100% - 48px);
  margin: 0 auto 24px;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.stat {
  padding: 26px 22px;
  border-right: 1px solid var(--line);
}

.stat:last-child {
  border-right: 0;
}

.stat strong {
  display: block;
  color: var(--deep-blue);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 900;
  line-height: 1;
}

.stat span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.city-section {
  width: calc(100% - 48px);
  margin: 0 auto 24px;
}

.city-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 22px;
}

.city-card {
  position: relative;
  display: block;
  height: 220px;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(20, 34, 58, 0.14);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.city-card:hover,
.city-card:focus-visible {
  z-index: 1;
  transform: translateY(-5px);
  box-shadow: 0 16px 30px rgba(20, 34, 58, 0.26);
}

.city-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 450ms ease;
}

.city-card:hover img {
  transform: scale(1.08);
}

.city-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(6, 14, 26, 0.78), transparent 55%);
}

.city-card span {
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 1;
  color: var(--white);
  font-size: 13.5px;
  font-weight: 900;
  text-shadow: 0 2px 6px rgba(6, 14, 26, 0.5);
}

.map-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.65fr) minmax(300px, 1.35fr);
  gap: 22px;
  align-items: center;
  width: calc(100% - 48px);
  margin: 0 auto 24px;
}

.map-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 390px;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 30px rgba(13, 43, 76, 0.14);
}

.map-card svg {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 350px;
}

.map-card .germany-map-photo {
  display: block;
  width: 100%;
  height: 350px;
  object-fit: contain;
  transition: transform 700ms ease, filter 700ms ease;
}

.map-card:hover .germany-map-photo {
  transform: scale(1.035);
  filter: saturate(1.08) contrast(1.03);
}

.map-card .germany-map-photo + svg {
  display: none;
}

.map-copy {
  min-width: 0;
}

.map-copy h2 {
  margin-bottom: 16px;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.12;
}

.map-copy p:not(.section-label) {
  max-width: none;
  margin-bottom: 16px;
  color: #40506a;
  font-size: 16.5px;
  line-height: 1.72;
  text-align: justify;
}

.map-copy-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--deep-blue);
  font-size: 15px;
  font-weight: 900;
  transition: gap 180ms ease;
}

.map-copy-link:hover {
  gap: 10px;
}

.germany-shape {
  fill: url(#germanyFill);
  stroke: var(--deep-blue);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: stroke 260ms ease;
}

.germany-map:hover .germany-shape {
  stroke: var(--blue);
}

.city-pin {
  cursor: pointer;
}

.city-pin .dot {
  fill: var(--red);
  stroke: var(--white);
  stroke-width: 1.5;
  transition: r 180ms ease;
}

.city-pin .halo {
  fill: rgba(237, 48, 40, 0.14);
  transition: r 220ms ease, opacity 220ms ease;
}

.city-pin .pulse {
  fill: none;
  stroke: var(--red);
  stroke-width: 1.5;
  opacity: 0.55;
  transform-box: fill-box;
  transform-origin: center;
  animation: mapPulse 2.4s ease-out infinite;
}

.city-pin .label-bg {
  fill: var(--ink);
  opacity: 0;
  transform: scale(0.9);
  transform-box: fill-box;
  transform-origin: left center;
  transition: opacity 180ms ease, transform 180ms ease;
}

.city-pin text {
  font-family: Inter, Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  fill: var(--white);
  opacity: 0;
  transition: opacity 180ms ease;
}

.city-pin:hover .dot,
.city-pin:focus .dot {
  r: 6;
}

.city-pin:hover .halo,
.city-pin:focus .halo {
  r: 10;
}

.city-pin:hover .label-bg,
.city-pin:focus .label-bg,
.city-pin:hover text,
.city-pin:focus text {
  opacity: 1;
  transform: scale(1);
}

@keyframes mapPulse {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  70% {
    transform: scale(3.4);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .city-pin .pulse {
    animation: none;
    display: none;
  }
}

@media (max-width: 900px) {
  .stats-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat:nth-child(2) {
    border-right: 0;
  }

  .stat:nth-child(3),
  .stat:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .map-layout {
    grid-template-columns: 1fr;
  }

  .map-card {
    min-height: 320px;
  }
}

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

/* Regroupe visuellement carte + villes (evite que deux sections en 2
   colonnes quasi identiques - intro puis carte - se suivent sans rupture,
   et evite de repeter "Ou etudier" comme un redemarrage). */
.explore-cluster {
  width: calc(100% - 48px);
  margin: 0 auto 24px;
  padding: 28px clamp(20px, 3vw, 32px);
  background: #eef4fb;
  border-radius: 10px;
}

.explore-cluster .map-layout,
.explore-cluster .city-section {
  width: 100%;
  /* Marge basse de la carte portee a 40px (demande client 19/08/2026) :
     espacement entre la carte d'Allemagne et la zone des 6 villes juste
     en dessous. La regle suivante remet .city-section a 0 (derniere
     rangee de la zone, pas d'espace a garder sous elle). */
  margin: 0 0 40px;
}

.explore-cluster .city-section {
  margin-bottom: 0;
}

.city-section .section-heading p {
  max-width: 620px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

/* Meme logique pour Actualites : casse la repetition visuelle avec le
   bloc Travail juste au-dessus (meme mise en page de liste). */
.news-band {
  width: calc(100% - 48px);
  margin: 0 auto 24px;
  padding: 8px clamp(20px, 3vw, 32px) 28px;
  background: #fff8ec;
  border-radius: 10px;
}

.news-band .blog-section {
  width: 100%;
  margin: 0;
}

/* Section "pourquoi nous" / "Notre methode" : reproduction fidele de la
   maquette de reference. UNE seule rangee (grid-template-columns, pas de
   colonne imbriquee), les 3 cartes alignees en haut (align-items: start).
   La carte de gauche (--media-h-main / --body plus long) est PLUS HAUTE
   que les 2 cartes de droite : ce n'est pas un bug a corriger, c'est
   exactement le rendu de la maquette (grande carte 1492x687 vs petites
   cartes ~445 de haut). Les 2 cartes de droite partagent la MEME hauteur
   d'image et la MEME longueur de texte, donc restent visuellement
   identiques entre elles sans qu'on ait besoin de forcer une egalite
   avec la carte de gauche. */
/* Fond bleu nuit derriere la zone "Notre methode", comme sur la maquette
   de reference (les cartes bleu clair se detachent sur ce fond fonce).
   On reprend la meme teinte navy que le pied de page (#14355b) pour
   rester dans la palette du site plutot que d'inventer une nouvelle
   couleur. */
.why-us {
  width: calc(100% - 48px);
  padding: clamp(26px, 4vw, 42px);
  margin: 0 auto 24px;
  background: #14355b;
  border-radius: 12px;
}

.why-us .section-label {
  color: #7fb8ef;
}

.why-us .section-heading {
  max-width: 900px; /* Allow more width to fit the long title */
}

.why-us .section-heading h2 {
  color: #fff;
  font-size: clamp(22px, 3.8vw, 48px); /* Scale down smoothly on mobile */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Force exactly 2 lines maximum */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.method-grid {
  display: grid;
  grid-template-columns: 1.62fr 1fr 1fr;
  align-items: start;
  gap: 20px;
  margin-top: 22px;
}

.method-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #dbe9f5;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 14px 30px rgba(13, 43, 76, 0.1);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.method-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(13, 43, 76, 0.18);
}

/* Hauteur d'image FIXE par type de carte (comme sur la maquette : grande
   photo pour la carte de gauche, photo plus courte pour les 2 cartes de
   droite). Le corps de texte suit sa hauteur naturelle en dessous : la
   hauteur totale de chaque carte n'est donc jamais forcee artificiellement. */
.method-card-media {
  margin: 0;
  aspect-ratio: 16 / 9;
  min-height: 215px;
  background: #f7fbff;
}

.method-card-main .method-card-media {
  min-height: 340px;
}

.method-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  /* object-fit: cover (au lieu de contain, change le 19/08/2026 a la
     demande du client) : l'image remplit tout le cadre sans bande vide,
     pour un alignement/une taille visuellement identiques sur tous les
     ecrans, comme sur la capture de reference fournie. aspect-ratio et
     min-height ci-dessus fixent deja le cadre, cover garantit qu'il n'y a
     jamais de "trou" autour de l'image quel que soit son format d'origine. */
  object-fit: cover;
}

.method-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 22px 24px;
}

/* Sous-titre "etape" au-dessus du titre de chaque carte (ex. "2. Emploi &
   Ausbildung") : meme logique visuelle que .section-label ailleurs sur le
   site (petit label majuscule au-dessus d'un titre), decline ici en bleu
   plutot qu'en rouge pour rester lisible sur le fond clair de la carte. */
.method-card-step {
  margin: 0;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.method-card-body h3 {
  margin: 0;
  color: var(--ink);
  font-size: 21px;
  font-weight: 800;
}

.method-card-main .method-card-body h3 {
  font-size: 26px;
}

/* Cartes 2 et 3 uniquement (pas la grande carte de gauche) : titre force
   sur EXACTEMENT 2 lignes (demande client 19/08/2026), pour que le texte
   et le bouton "En savoir plus..." des deux cartes demarrent toujours au
   meme niveau, meme si un titre est plus court que l'autre. min-height =
   2 lignes garantit la reservation d'espace quel que soit le nombre de
   lignes reellement utilisees par le texte.
   Correction du 19/08/2026 (capture client) : la version -webkit-line-
   clamp cassait le texte n'importe ou (ex. "formation" / "?" tout seul
   sur la 2e ligne). text-wrap: balance repartit le texte pour que les 2
   lignes soient d'une longueur equilibree, comme le veut un vrai titre
   sur 2 lignes (supporte Chrome/Edge 114+, Firefox 121+, Safari 17.5+ ;
   sur les navigateurs plus anciens le texte s'affiche normalement,
   simplement sans l'equilibrage automatique). */
.method-card:not(.method-card-main) .method-card-body h3 {
  min-height: 2.6em;
  line-height: 1.3;
  text-wrap: balance;
}

.method-card-body p {
  margin: 0;
  color: #33475f;
  font-size: 14.5px;
  line-height: 1.6;
}

.method-card-main .method-card-body p {
  font-size: 15.5px;
}

.method-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 6px;
  padding: 0 20px;
  min-height: 42px;
  color: #fff;
  background: var(--ink);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  transition: background 180ms ease, transform 180ms ease;
}

.method-card-cta:hover,
.method-card-cta:focus-visible {
  background: var(--deep-blue);
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .method-grid {
    grid-template-columns: 1fr 1fr;
  }

  .method-card-main {
    grid-column: 1 / -1;
  }

  .method-card-main .method-card-media {
    min-height: 260px;
  }
}

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

  .method-card-media {
    min-height: 200px;
  }

  .method-card-main .method-card-media {
    min-height: 230px;
  }
}

.testimonials {
  width: calc(100% - 48px);
  margin: 0 auto 24px;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.testimonial-card {
  margin: 0;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  border-radius: 8px;
  box-shadow: 0 5px 18px rgba(20, 34, 58, 0.05);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 26px rgba(20, 34, 58, 0.14);
}

.testimonial-card blockquote {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.6;
}

.testimonial-card figcaption {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
}

.faq-section {
  width: calc(100% - 48px);
  margin: 0 auto 24px;
}

.faq-section .accordion {
  margin-top: 22px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Bandeau newsletter + bande CTA, juste avant le footer (repris de la
   maquette de reference fournie par le client : carte claire flex-row pour
   la newsletter, bande de couleur pleine pour le CTA final). */
.newsletter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: calc(100% - 48px);
  margin: 0 auto 24px;
  padding: 28px 32px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 5px 18px rgba(20, 34, 58, 0.05);
}

.newsletter-row-title {
  margin: 0;
  color: var(--ink);
  font-size: 19px;
  font-weight: 900;
}

.newsletter-row-sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 600;
}

.newsletter-row-form {
  display: flex;
  gap: 10px;
}

.newsletter-row-form input {
  width: 240px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font: inherit;
}

.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: calc(100% - 48px);
  margin: 0 auto 24px;
  padding: clamp(30px, 5vw, 48px) clamp(28px, 5vw, 48px);
  background: var(--deep-blue);
  border-radius: 8px;
}

.cta-band h2 {
  margin: 0;
  max-width: 620px;
  color: var(--white);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.18;
}

.cta-band-btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  color: var(--deep-blue);
  background: var(--white);
  border-radius: 3px;
  font-weight: 900;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.cta-band-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(6, 14, 26, 0.28);
}

@media (max-width: 640px) {
  .newsletter-row-form {
    width: 100%;
  }

  .newsletter-row-form input {
    width: 100%;
    flex: 1;
  }
}

/* =========================================================================
   CORRECTION FINALE D'APRES CAPTURES UTILISATEUR
   Ces regles neutralisent les anciennes couches CSS qui grossissaient les
   blocs et cassaient les proportions visibles sur les photos fournies.
   ========================================================================= */

body[data-page="home"] .quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  width: min(940px, calc(100% - 48px));
  margin: 24px auto;
}

body[data-page="home"] .quick-grid::before {
  display: none;
}

body[data-page="home"] .quick-card {
  aspect-ratio: 1 / 0.78;
  min-height: 116px;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 14px;
}

body[data-page="home"] .blog-section:has([data-home-job-teasers]) {
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto 24px;
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 5px 18px rgba(20, 34, 58, 0.05);
}

body[data-page="home"] [data-home-job-teasers].blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
}

body[data-page="home"] [data-home-job-teasers] .job-row {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px 18px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}

body[data-page="home"] [data-home-job-teasers] .job-row:last-child {
  border-bottom: 0;
}

body[data-page="home"] [data-home-job-teasers] .job-row img {
  width: 56px;
  height: 56px;
  min-height: 0;
  border-radius: 8px;
}

body[data-page="home"] [data-home-job-teasers] .job-row-body h3 {
  margin-bottom: 4px;
  font-size: 17px;
}

body[data-page="home"] [data-home-job-teasers] .job-row-summary {
  -webkit-line-clamp: 2;
}

/* Habillage de l'ANCIEN pied de page de l'accueil, dont les titres et liens
   etaient ecrits directement dans le HTML.
   Le garde-fou :not(:has(.footer-main)) manquait sur le premier selecteur :
   la regle s'appliquait donc au pied de page actuel, genere par
   setupSiteFooter(), et imposait sa grille a 3 colonnes a ses deux blocs
   (.footer-main et .footer-bottom) — d'ou un pied de page desaligne sur la
   seule page d'accueil. */
body[data-page="home"] > .site-footer:not(:has(.footer-main)),
body[data-page="home"] .site-footer:not(:has(.footer-main)) {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(2, minmax(170px, 0.7fr));
  gap: 32px;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto 24px;
  padding: 34px;
  color: var(--white);
  background: linear-gradient(135deg, rgba(17, 34, 59, 0.98), rgba(8, 62, 104, 0.96)), #11223b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(13, 43, 76, 0.18);
}

body[data-page="home"] .site-footer:not(:has(.footer-main)) h2,
body[data-page="home"] .site-footer:not(:has(.footer-main)) h3 {
  margin: 0 0 12px;
  color: var(--white);
}

body[data-page="home"] .site-footer:not(:has(.footer-main)) h2 {
  font-size: clamp(24px, 2.7vw, 34px);
  line-height: 1.12;
}

body[data-page="home"] .site-footer:not(:has(.footer-main)) h3 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="home"] .site-footer:not(:has(.footer-main)) p {
  max-width: 520px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14.5px;
  line-height: 1.65;
}

body[data-page="home"] .site-footer:not(:has(.footer-main)) a {
  display: block;
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  font-weight: 700;
}

.site-footer:has(.footer-main) {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto 24px;
  border-radius: 18px;
}

.site-footer:has(.footer-main) .footer-main {
  grid-template-columns: minmax(260px, 1.35fr) minmax(150px, 0.7fr) minmax(180px, 0.78fr) minmax(220px, 0.9fr);
  gap: 28px;
  padding: 34px;
}

body[data-page="universites"] .article-intro.content-band,
body[data-page="exigences"] .requirement-main-card {
  padding: 24px;
}

body[data-page="universites"] .university-type-grid,
body[data-page="exigences"] .requirements-blog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

body[data-page="universites"] .university-type-card,
body[data-page="exigences"] .requirements-blog-grid .university-type-card {
  min-height: 0;
  padding: 14px 16px;
  border-radius: 7px;
}

body[data-page="universites"] .university-type-img,
body[data-page="exigences"] .requirements-blog-grid .university-type-img {
  width: calc(100% + 32px);
  height: 118px;
  margin: -14px -16px 10px;
}

body[data-page="universites"] .university-type-kicker,
body[data-page="exigences"] .requirements-blog-grid .university-type-kicker {
  margin-bottom: 4px;
  font-size: 11px;
}

body[data-page="universites"] .university-type-card h3,
body[data-page="exigences"] .requirements-blog-grid .university-type-card h3 {
  margin-bottom: 5px;
  font-size: 16px;
  line-height: 1.25;
}

body[data-page="universites"] .university-type-card p:not(.university-type-kicker):not(.university-type-meta),
body[data-page="exigences"] .requirements-blog-grid .university-type-card p:not(.university-type-kicker):not(.university-type-meta) {
  margin-bottom: 7px;
  font-size: 13px;
  line-height: 1.42;
}

body[data-page="universites"] .university-type-meta,
body[data-page="exigences"] .requirements-blog-grid .university-type-meta {
  padding-top: 7px;
  font-size: 12px;
}

body[data-page="universites"] .article-console {
  align-items: start;
}

body[data-page="universites"] .article-card {
  grid-template-columns: 150px minmax(0, 1fr);
  min-height: 132px;
  border-radius: 8px;
}

body[data-page="universites"] .article-card img {
  height: 100%;
  min-height: 132px;
}

body[data-page="universites"] .article-card > div {
  padding: 12px 14px;
}

body[data-page="universites"] .article-card h3 {
  font-size: 17px;
  line-height: 1.2;
}

body[data-page="universites"] .article-card p:not(.section-label) {
  font-size: 13px;
  line-height: 1.42;
}

body[data-page="exigences"] .planner-layout {
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

body[data-page="exigences"] .interactive-panel {
  border-radius: 7px;
}

body[data-page="exigences"] .requirement-intro {
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 18px;
}

body[data-page="exigences"] .requirement-intro h2 {
  font-size: clamp(25px, 3.2vw, 34px);
}

body[data-page="exigences"] .requirement-intro p:not(.section-label) {
  font-size: 15px;
  line-height: 1.6;
}

body[data-page="exigences"] .requirement-intro img {
  width: 170px;
  height: 170px;
  border-width: 8px;
}

body[data-page="exigences"] .requirement-path-card,
body[data-page="exigences"] .requirement-check-grid article,
body[data-page="exigences"] .requirement-flow-list article {
  padding: 18px;
  border-radius: 7px;
}

body[data-page="exigences"] .requirement-band,
body[data-page="exigences"] .requirement-flow {
  width: min(1120px, calc(100% - 48px));
}

@media (max-width: 900px) {
  body[data-page="home"] .quick-grid,
  body[data-page="universites"] .university-type-grid,
  body[data-page="exigences"] .requirements-blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="home"] .site-footer:not(:has(.footer-main)),
  .site-footer:has(.footer-main) .footer-main,
  body[data-page="exigences"] .planner-layout {
    grid-template-columns: 1fr;
  }

  body[data-page="exigences"] .requirement-intro {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body[data-page="home"] .quick-grid,
  body[data-page="home"] .blog-section:has([data-home-job-teasers]),
  body[data-page="home"] .site-footer:not(:has(.footer-main)),
  .site-footer:has(.footer-main),
  body[data-page="exigences"] .requirement-band,
  body[data-page="exigences"] .requirement-flow {
    width: 100%;
  }

  body[data-page="home"] .quick-grid,
  body[data-page="universites"] .university-type-grid,
  body[data-page="exigences"] .requirements-blog-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="home"] .quick-card {
    aspect-ratio: 16 / 7;
    min-height: 104px;
  }

  body[data-page="home"] [data-home-job-teasers] .job-row,
  body[data-page="universites"] .article-card {
    grid-template-columns: 1fr;
  }

  body[data-page="home"] [data-home-job-teasers] .job-row-tag {
    grid-column: 1;
  }

  body[data-page="universites"] .article-card img {
    height: 190px;
  }
}

/* =========================================================================
   HOME EXACT REFERENCE - vrai version.png
   ========================================================================= */

body[data-page="home"] {
  background: #eef4fb;
}

body[data-page="home"] .work-orientation-section {
  position: relative;
  /* Zone legerement agrandie (etait calc(100% - 40px) / padding 40px) pour
     laisser un peu plus de place aux 4 cartes d'offres sans changer la
     structure en deux colonnes. */
  width: calc(100% - 24px);
  /* Marge basse portee a 40px (demande client 19/08/2026) : espacement
     regulier entre la zone Travail et la zone Actualites juste en
     dessous. */
  margin: 20px auto 40px;
  padding: 34px 30px 32px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(250,253,255,0.9) 42%, rgba(228,239,248,0.82) 100%),
    url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1600&q=80") center / cover;
  border: 1px solid #d6e5f2;
  border-radius: 12px;
  box-shadow: none;
}

body[data-page="home"] .work-orientation-section .section-heading {
  margin: 0 0 22px;
  /* Elargi (etait 640px) pour laisser le titre tenir sur une seule ligne,
     demande client 2026-08-18 : "Trouver un contrat de travail ou de
     formation en Allemagne" ne doit pas se couper sur 2 lignes en desktop. */
  max-width: 100%;
}

body[data-page="home"] .section-label {
  margin: 0 0 8px;
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-page="home"] .work-orientation-section .section-heading h2 {
  /* Titre sur une seule ligne max (demande client 2026-08-18) : plus de
     max-width restreint + police qui se reduit un peu plus vite (2.6vw au
     lieu de 4vw) pour eviter le retour a la ligne sur desktop/tablette. Le
     wrap redevient normal en dessous de 640px, voir media query mobile. */
  max-width: none;
  white-space: nowrap;
  margin: 0;
  color: #12213d;
  font-size: clamp(22px, 2.6vw, 44px);
  font-weight: 900;
  line-height: 1.04;
}

/* Legere description sous le titre, meme registre que le texte des cartes
   Actualites (h3 + court paragraphe) : une phrase, pas un pave. */
body[data-page="home"] .work-orientation-section .section-heading .section-subtitle {
  max-width: none;
  margin: 10px 0 0;
  color: #4b5c76;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
  text-align: justify;
}

body[data-page="home"] .work-orientation-section .jobs-explorer {
  display: grid;
  /* Colonne de gauche reduite (etait 360px) pour donner plus de largeur a
     la liste de cartes a droite. */
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

body[data-page="home"] .work-orientation-section .jobs-explorer-aside {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

body[data-page="home"] .work-orientation-section .jobs-explorer-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 18px 34px rgba(20, 34, 58, 0.13);
}

body[data-page="home"] .work-orientation-section .jobs-explorer-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

body[data-page="home"] .work-orientation-section .jobs-explorer-media:hover img {
  transform: scale(1.04);
}

body[data-page="home"] .work-orientation-section .jobs-explorer-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="home"] .work-orientation-section .jobs-tab {
  min-height: 38px;
  padding: 0 18px;
  color: #14213d;
  background: rgba(255,255,255,0.86);
  border: 1px solid #cfe0ef;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  transition: transform 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

body[data-page="home"] .work-orientation-section .jobs-tab.active,
body[data-page="home"] .work-orientation-section .jobs-tab:hover {
  color: #fff;
  background: #2c65ad;
  border-color: #2c65ad;
  box-shadow: 0 10px 18px rgba(44, 101, 173, 0.22);
  transform: translateY(-1px);
}

/* Contient les 4 job-offer-card du secteur actif (meme composant que
   /travail, voir renderJobCard dans app.js). Plancher de hauteur proche de
   la taille d'origine de cette zone (374px, calee a l'epoque sur 2 lignes
   .job-row) : les cartes ci-dessous sont volontairement reduites pour que
   4 d'entre elles tiennent dans un espace du meme ordre de grandeur. */
body[data-page="home"] .work-orientation-section .jobs-explorer-list {
  display: grid;
  gap: 8px;
  min-height: 400px;
  padding: 8px;
  background: #fff;
  border: 1px solid #d6e3f0;
  border-radius: 8px;
  box-shadow: none;
}

/* Version fortement compactee de .job-offer-card, seulement dans ce
   teaser : image ramenee pres de la taille de l'ancienne .job-row (58px),
   fiche secteur/contrat/langue/salaire masquee (trop de place pour 4
   cartes dans cette zone), textes reduits a l'essentiel (titre, entreprise,
   un resume d'une ligne). Le composant reste le meme (memes classes,
   memes donnees) que sur /travail — seule la presentation est retaillee
   pour cet espace precis. */
body[data-page="home"] .work-orientation-section .jobs-explorer-list .job-offer-card {
  /* Colonne image elargie de 64px a 78px (19/08/2026) pour rester
     proportionnee aux textes agrandis ci-dessous. */
  grid-template-columns: 78px minmax(0, 1fr);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(20, 34, 58, 0.08);
}

/* La colonne image du grid ci-dessus fait desormais 78px de large :
   width/height fixes + object-fit garantissent que la photo du secteur
   (voir homeImageParDefautSecteur dans app.js) remplit exactement ce
   carre sans le deformer, quelle que soit la taille reelle du fichier
   source. */
body[data-page="home"] .work-orientation-section .jobs-explorer-list .job-offer-card img {
  width: 78px;
  height: 78px;
  min-height: 0;
  object-fit: cover;
  border-radius: 6px;
}

body[data-page="home"] .work-orientation-section .jobs-explorer-list .job-offer-body {
  gap: 4px;
  padding: 8px 12px;
}

/* Topline (categorie/region/source) et fiche detaillee retirees ici : sur
   une carte compacte, elles ne laissaient plus de place au titre.
   Elles restent visibles sur /travail, ou la carte est pleine taille. */
body[data-page="home"] .work-orientation-section .jobs-explorer-list .job-offer-topline,
body[data-page="home"] .work-orientation-section .jobs-explorer-list .job-facts {
  display: none;
}

/* Polices agrandies (demande client 19/08/2026, lisibilite pour les
   personnes malvoyantes) : 13/11/11/11px -> 17/15/15/14px. */
body[data-page="home"] .work-orientation-section .jobs-explorer-list .job-offer-card h3 {
  overflow: hidden;
  font-size: 17px;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body[data-page="home"] .work-orientation-section .jobs-explorer-list .job-company {
  overflow: hidden;
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body[data-page="home"] .work-orientation-section .jobs-explorer-list .job-offer-card p:not(.job-company) {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 1px;
  font-size: 15px;
  line-height: 1.35;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

body[data-page="home"] .work-orientation-section .jobs-explorer-list .job-actions {
  margin-top: 3px;
  font-size: 14px;
}

body[data-page="home"] .work-orientation-section .jobs-explorer-list .job-actions small {
  display: none;
}

body[data-page="home"] .work-orientation-section .jobs-explorer-empty {
  margin: 0;
  padding: 18px 6px;
  color: #5d6b7f;
  font-size: 14px;
}

body[data-page="home"] .work-orientation-section .job-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  min-height: 112px;
  padding: 26px 18px;
  color: inherit;
  background: #fff;
  border-bottom: 1px solid #dbe6f0;
  text-decoration: none;
  box-shadow: none;
  transition: background 180ms ease, transform 180ms ease;
}

body[data-page="home"] .work-orientation-section .job-row:last-child {
  border-bottom: 0;
}

body[data-page="home"] .work-orientation-section .job-row:hover {
  background: #f8fbfe;
  transform: translateX(3px);
}

body[data-page="home"] .work-orientation-section .job-row img {
  width: 58px;
  height: 58px;
  min-height: 0;
  border-radius: 8px;
  object-fit: cover;
}

body[data-page="home"] .work-orientation-section .job-row-body h3 {
  margin: 0 0 4px;
  color: #1b2b49;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.16;
}

body[data-page="home"] .work-orientation-section .job-row-meta {
  margin: 0 0 6px;
  color: #2d73b8;
  font-size: 13px;
  font-weight: 800;
}

body[data-page="home"] .work-orientation-section .job-row-summary {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #6d7d91;
  font-size: 14px;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

body[data-page="home"] .work-orientation-section .job-row-tag {
  align-self: start;
  margin: 0;
  padding: 7px 13px;
  color: var(--red);
  background: #fff0ef;
  border: 0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-page="home"] .work-orientation-section .section-action {
  display: flex;
  /* Bouton "Voir plus" centre, pas en coin (demande client 2026-08-18). */
  justify-content: center;
  margin-top: 20px;
}

body[data-page="home"] .btn.btn-primary,
body[data-page="home"] .section-action .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
  color: #fff;
  background: var(--red);
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

body[data-page="home"] .btn.btn-primary:hover,
body[data-page="home"] .section-action .btn:hover {
  background: #d92520;
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(237, 48, 40, 0.24);
}

body[data-page="home"] .news-band {
  width: calc(100% - 40px);
  margin: 0 auto 22px;
  padding: 7px 24px 24px;
  background: #fff8e9;
  border-radius: 10px;
}

body[data-page="home"] .news-band .blog-section {
  width: 100%;
  margin: 0;
  padding: 28px;
  background: #fff;
  border: 1px solid #d8e3ee;
  border-radius: 2px;
  box-shadow: none;
}

body[data-page="home"] .news-band .section-heading {
  max-width: none;
  margin-bottom: 22px;
}

body[data-page="home"] .news-band .section-heading h2 {
  margin: 0 0 12px;
  color: #12213d;
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 900;
  line-height: 1.1;
}

/* Description sous le titre "Decouvrez l'actualite allemande" (3-4
   lignes), meme logique que le paragraphe d'intro de la FAQ. */
body[data-page="home"] .news-band .section-heading p:not(.section-label) {
  max-width: none;
  margin: 0;
  color: #55677f;
  font-size: 16px;
  line-height: 1.7;
  text-align: justify;
}

body[data-page="home"] [data-home-news-teasers].blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

body[data-page="home"] [data-home-news-teasers] .blog-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d8e3ee;
  border-top: 0;
  border-radius: 6px;
  box-shadow: 0 12px 22px rgba(20, 34, 58, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

body[data-page="home"] [data-home-news-teasers] .blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 30px rgba(20, 34, 58, 0.16);
}

body[data-page="home"] [data-home-news-teasers] .blog-card img {
  width: 100%;
  height: 245px;
  object-fit: cover;
}

body[data-page="home"] [data-home-news-teasers] .blog-content {
  padding: 14px 14px 18px;
}

body[data-page="home"] .card-overline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
}

body[data-page="home"] .card-overline-category {
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

body[data-page="home"] .card-overline-date {
  color: #75869a;
  font-size: 12px;
  font-weight: 800;
}

body[data-page="home"] [data-home-news-teasers] .blog-card h3 {
  margin: 0 0 8px;
  color: #13233f;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.2;
}

body[data-page="home"] [data-home-news-teasers] .blog-card p.card-excerpt {
  margin: 0;
  color: #6d7d91;
  font-size: 14px;
  line-height: 1.45;
}

body[data-page="home"] .news-band .section-action {
  display: flex;
  /* Bouton "Voir plus" centre, pas en coin (demande client 2026-08-18). */
  justify-content: center;
  margin-top: 20px;
}

body[data-page="home"] .faq-section {
  width: min(980px, calc(100% - 48px));
  margin: 0 auto 24px;
  text-align: center;
}

body[data-page="home"] .faq-section .section-heading {
  max-width: 590px;
  margin: 0 auto 16px;
}

body[data-page="home"] .faq-section .section-heading h2 {
  margin: 0 0 8px;
  color: #12213d;
  font-size: clamp(27px, 3vw, 34px);
  font-weight: 900;
  line-height: 1.1;
}

body[data-page="home"] .faq-section .section-heading p:not(.section-label) {
  margin: 0;
  color: #78889b;
  font-size: 14px;
  line-height: 1.45;
}

body[data-page="home"] .faq-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 16px;
}

body[data-page="home"] .faq-tabs button {
  min-height: 30px;
  padding: 0 16px;
  color: #2c65ad;
  background: #fff;
  border: 1px solid #cfe0ef;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

body[data-page="home"] .faq-tabs button.active,
body[data-page="home"] .faq-tabs button:hover {
  color: #fff;
  background: #2c65ad;
  border-color: #2c65ad;
}

body[data-page="home"] .faq-section .accordion {
  display: grid;
  gap: 8px;
  text-align: left;
}

body[data-page="home"] .faq-section .accordion button {
  position: relative;
  min-height: 44px;
  padding: 0 52px 0 18px;
  color: #12213d;
  background: #fff;
  border: 1px solid #cfe0ef;
  border-radius: 9px !important;
  font-size: 15px;
  font-weight: 900;
  text-align: left;
}

body[data-page="home"] .faq-section .accordion button::after {
  content: "+";
  position: absolute;
  right: 14px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #2c65ad;
  background: #eef6fc;
  border-radius: 50%;
  transform: translateY(-50%);
}

body[data-page="home"] .faq-section .accordion button[aria-expanded="true"] {
  color: #12213d;
  background: #fff;
  border-color: #cfe0ef;
}

body[data-page="home"] .faq-section .accordion button[aria-expanded="true"]::after {
  content: "-";
  color: #fff;
  background: var(--red);
}

body[data-page="home"] .faq-section .accordion div {
  margin-top: -8px;
  padding: 12px 18px 16px;
  background: #fff;
  border: 1px solid #d8e3ee;
  border-top: 0;
  border-radius: 0 0 9px 9px !important;
}

body[data-page="home"] .faq-section .accordion div p {
  margin: 0;
  color: #5f7086;
  font-size: 14px;
  line-height: 1.55;
}

.site-footer {
  width: calc(100% - 40px);
  margin: 0 auto 24px;
  overflow: hidden;
  color: #fff;
  background: #14355b;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}

.site-footer .footer-main {
  display: grid;
  grid-template-columns: minmax(260px, 1.45fr) minmax(160px, 0.65fr) minmax(220px, 0.82fr) minmax(230px, 0.92fr);
  gap: 44px;
  padding: 42px 44px;
}

.site-footer .footer-kicker {
  margin: 0 0 8px;
  color: rgba(255,255,255,0.66);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer h2,
.site-footer h3 {
  color: #fff;
}

.site-footer h2 {
  max-width: 320px;
  margin: 0 0 18px;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.05;
}

.site-footer h3 {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer p {
  margin: 0;
  color: rgba(255,255,255,0.78);
  font-size: 15px;
  line-height: 1.55;
}

.site-footer a,
.site-footer .footer-contact-link {
  display: block;
  margin: 0 0 11px;
  color: rgba(255,255,255,0.82);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}

.site-footer a:hover {
  color: #fff;
  transform: none;
}

.site-footer .footer-cta {
  display: inline-flex;
  min-height: 40px;
  margin-top: 8px;
  padding: 0 20px;
  color: #2c65ad;
  background: #fff;
  border-radius: 999px;
  font-weight: 900;
}

.site-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 44px;
  background: #0f2c4c;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.site-footer .footer-bottom p,
.site-footer .footer-bottom a {
  margin: 0;
  color: rgba(255,255,255,0.76);
  font-size: 12px;
  font-weight: 800;
}

.site-footer .footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

@media (max-width: 980px) {
  body[data-page="home"] .work-orientation-section .jobs-explorer {
    grid-template-columns: 1fr;
  }

  body[data-page="home"] [data-home-news-teasers].blog-grid,
  .site-footer .footer-main {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  body[data-page="home"] .work-orientation-section,
  body[data-page="home"] .news-band,
  .site-footer {
    width: calc(100% - 20px);
  }

  /* Sous 680px le titre repasse en retour a la ligne normal : le forcer sur
     une seule ligne ferait deborder/rapetisser trop la police sur mobile. */
  body[data-page="home"] .work-orientation-section .section-heading h2 {
    white-space: normal;
    font-size: clamp(26px, 6vw, 34px);
  }

  body[data-page="home"] .work-orientation-section,
  body[data-page="home"] .news-band .blog-section {
    padding: 22px 16px;
  }

  body[data-page="home"] .work-orientation-section .jobs-explorer-tabs,
  body[data-page="home"] [data-home-news-teasers].blog-grid,
  .site-footer .footer-main {
    grid-template-columns: 1fr;
  }

  body[data-page="home"] .work-orientation-section .job-row {
    grid-template-columns: 52px minmax(0, 1fr);
    padding: 16px;
  }

  body[data-page="home"] .work-orientation-section .job-row-tag {
    grid-column: 2;
  }

  .site-footer .footer-main,
  .site-footer .footer-bottom {
    padding-left: 22px;
    padding-right: 22px;
  }

  .site-footer .footer-bottom {
    display: grid;
  }
}

/* HOME + GLOBAL WIDTH CORRECTION - reference dessous hero.png */
body[data-page="home"] .stats-band {
  display: none;
}

body[data-page="home"] .intro-layout {
  grid-template-columns: minmax(0, 1.98fr) minmax(420px, 0.92fr);
  gap: 28px;
  width: calc(100% - 48px);
  /* Marge basse portee a 40px (demande client 19/08/2026) : espacement
     regulier entre la zone sous le hero et les 4 box (Universites/Travail/
     Exigences/A propos) juste en dessous. */
  margin: 108px auto 40px;
  align-items: stretch;
}

body[data-page="home"] .intro-card {
  min-height: 300px;
  padding: 54px 48px;
  border-radius: 3px;
  border: 1px solid #d9e4f0;
  box-shadow: 0 10px 26px rgba(13, 43, 76, 0.08);
}

body[data-page="home"] .intro-card h2 {
  max-width: 880px;
  margin-bottom: 28px;
  color: #071a44;
  font-size: clamp(38px, 4.2vw, 56px);
  line-height: 1.08;
  font-weight: 900;
}

body[data-page="home"] .intro-card p:not(.section-label) {
  max-width: 960px;
  color: #233a5a;
  font-size: 18px;
  line-height: 1.8;
}

body[data-page="home"] .intro-features,
body[data-page="home"] .intro-card .section-label {
  display: none;
}

body[data-page="home"] .image-only-card {
  min-height: 300px;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
}

body[data-page="home"] .image-only-card::before,
body[data-page="home"] .intro-media-badge,
body[data-page="home"] .intro-media-accent {
  display: none;
}

body[data-page="home"] .image-only-card img {
  min-height: 100%;
  height: 100%;
  border-radius: 0 0 12px 12px;
  box-shadow: none;
  transform: none;
}

body[data-page="home"] .image-only-card:hover img {
  transform: scale(1.015);
}

body[data-page="home"] .quick-grid {
  width: calc(100% - 48px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  /* Marge basse portee a 40px (demande client 19/08/2026) : meme
     espacement que sous le hero, entre les 4 box et la section "Notre
     methode" juste en dessous. */
  margin: 0 auto 40px;
}

body[data-page="home"] .quick-card {
  min-height: 168px;
  padding: 22px 24px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 16px 28px rgba(13, 43, 76, 0.14);
  font-size: 19px;
  font-weight: 900;
  animation: quick-card-rise 720ms ease both;
}

body[data-page="home"] .quick-card:nth-child(2) { animation-delay: 70ms; }
body[data-page="home"] .quick-card:nth-child(3) { animation-delay: 140ms; }
body[data-page="home"] .quick-card:nth-child(4) { animation-delay: 210ms; }

body[data-page="home"] .quick-card:hover,
body[data-page="home"] .quick-card:focus-visible {
  transform: translateY(-7px) scale(1.01);
  box-shadow: 0 24px 42px rgba(13, 43, 76, 0.22);
}

@keyframes quick-card-rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-footer,
.site-footer:has(.footer-main),
body[data-page="home"] > .site-footer,
body[data-page="home"] .site-footer:not(:has(.footer-main)) {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
}

.site-footer .footer-main,
.site-footer:has(.footer-main) .footer-main {
  width: min(1450px, calc(100% - 96px));
  margin: 0 auto;
  padding: 44px 0;
}

.site-footer .footer-bottom {
  padding-left: max(48px, calc((100vw - 1450px) / 2));
  padding-right: max(48px, calc((100vw - 1450px) / 2));
}

body[data-page="universites"] .university-type-grid,
body[data-page="exigences"] .requirements-blog-grid {
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  gap: 20px;
  align-items: stretch;
}

body[data-page="universites"] .university-type-card,
body[data-page="exigences"] .requirements-blog-grid .university-type-card {
  display: flex;
  min-height: 348px;
  padding: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d8e4f0;
  border-top: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(13, 43, 76, 0.10);
}

body[data-page="universites"] .university-type-img,
body[data-page="exigences"] .requirements-blog-grid .university-type-img {
  width: 100%;
  height: 190px;
  margin: 0;
  object-fit: cover;
}

body[data-page="universites"] .university-type-kicker,
body[data-page="exigences"] .requirements-blog-grid .university-type-kicker,
body[data-page="universites"] .university-type-card h3,
body[data-page="exigences"] .requirements-blog-grid .university-type-card h3,
body[data-page="universites"] .university-type-card p:not(.university-type-kicker):not(.university-type-meta),
body[data-page="exigences"] .requirements-blog-grid .university-type-card p:not(.university-type-kicker):not(.university-type-meta),
body[data-page="universites"] .university-type-meta,
body[data-page="exigences"] .requirements-blog-grid .university-type-meta {
  margin-left: 18px;
  margin-right: 18px;
}

body[data-page="universites"] .university-type-kicker,
body[data-page="exigences"] .requirements-blog-grid .university-type-kicker {
  margin-top: 16px;
  margin-bottom: 6px;
  color: #ef2f32;
  font-size: 12px;
  font-weight: 900;
}

body[data-page="universites"] .university-type-card h3,
body[data-page="exigences"] .requirements-blog-grid .university-type-card h3 {
  font-size: 20px;
  line-height: 1.22;
}

body[data-page="universites"] .university-type-card p:not(.university-type-kicker):not(.university-type-meta),
body[data-page="exigences"] .requirements-blog-grid .university-type-card p:not(.university-type-kicker):not(.university-type-meta) {
  font-size: 14px;
  line-height: 1.55;
}

body[data-page="universites"] .university-type-meta,
body[data-page="exigences"] .requirements-blog-grid .university-type-meta {
  margin-top: auto;
  padding-top: 12px;
  padding-bottom: 16px;
  border-top: 1px solid #edf2f7;
  font-size: 13px;
}

body[data-page="universites"] .university-type-article-list {
  display: grid;
  gap: 7px;
  color: #24384f;
}

body[data-page="universites"] .university-type-article-title {
  display: block;
  padding-left: 10px;
  border-left: 3px solid #ef2f32;
  font-weight: 750;
  line-height: 1.3;
}

body[data-page="universites"] .university-type-card-head {
  padding: 16px 18px 12px;
}

body[data-page="universites"] .university-type-card-head .university-type-kicker,
body[data-page="universites"] .university-type-card-head h3,
body[data-page="universites"] .university-type-card-head .university-type-count {
  margin-left: 0;
  margin-right: 0;
}

body[data-page="universites"] .university-type-count {
  margin-top: 8px;
  margin-bottom: 0;
  color: #40506a;
  font-size: 14px;
  font-weight: 850;
}

body[data-page="universites"] .university-type-articles {
  display: grid;
  gap: 10px;
  padding: 0 14px 16px;
}

body[data-page="universites"] .university-type-article-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  overflow: hidden;
  background: #f8fbff;
  border: 1px solid #d8e4f0;
  border-radius: 6px;
}

body[data-page="universites"] .university-type-article-media {
  display: block;
  min-height: 112px;
}

body[data-page="universites"] .university-type-article-media img {
  width: 100%;
  height: 100%;
  min-height: 112px;
  object-fit: cover;
}

body[data-page="universites"] .university-type-article-body {
  min-width: 0;
  padding: 10px 11px;
}

body[data-page="universites"] .university-type-article-body .section-label,
body[data-page="universites"] .university-type-article-body h4,
body[data-page="universites"] .university-type-article-body p,
body[data-page="universites"] .university-type-article-body .article-meta-row {
  margin-left: 0;
  margin-right: 0;
}

body[data-page="universites"] .university-type-article-body .section-label {
  margin-bottom: 4px;
  font-size: 10px;
}

body[data-page="universites"] .university-type-article-body h4 {
  margin-bottom: 5px;
  font-size: 15px;
  line-height: 1.22;
}

body[data-page="universites"] .university-type-article-body h4 a {
  color: #0b66ad;
  text-decoration: none;
}

body[data-page="universites"] .university-type-article-body h4 a:hover {
  text-decoration: underline;
}

body[data-page="universites"] .university-type-article-body p:not(.section-label) {
  display: -webkit-box;
  margin-bottom: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: #5d6b7f;
  font-size: 12px;
  line-height: 1.42;
}

body[data-page="universites"] .university-type-article-card .article-meta-row {
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  overflow: visible;
}

body[data-page="universites"] .university-type-article-card .article-meta-row span {
  max-width: 100%;
  white-space: normal;
}

body[data-page="universites"] .university-type-article-card .detail-link {
  margin-left: 0;
}

body[data-page="universites"] .university-type-page-link {
  align-self: flex-start;
  margin: 0 18px 18px;
}

body[data-page="universites"] .article-card {
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 205px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #d8e4f0;
  box-shadow: 0 14px 30px rgba(13, 43, 76, 0.10);
}

body[data-page="universites"] .article-card img {
  min-height: 205px;
  height: 100%;
}

body[data-page="universites"] .article-card > div {
  padding: 22px 24px;
}

body[data-page="universites"] .article-card h3 {
  font-size: 22px;
  line-height: 1.18;
}

body[data-page="universites"] .article-card p:not(.section-label) {
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 980px) {
  body[data-page="home"] .intro-layout {
    grid-template-columns: 1fr;
    margin-top: 42px;
  }

  body[data-page="home"] .quick-grid,
  body[data-page="universites"] .university-type-grid,
  body[data-page="exigences"] .requirements-blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer .footer-main,
  .site-footer:has(.footer-main) .footer-main {
    width: min(100% - 48px, 760px);
  }
}

@media (max-width: 640px) {
  body[data-page="home"] .intro-layout,
  body[data-page="home"] .quick-grid {
    width: calc(100% - 28px);
  }

  body[data-page="home"] .intro-card {
    padding: 32px 24px;
  }

  body[data-page="home"] .quick-grid,
  body[data-page="universites"] .university-type-grid,
  body[data-page="exigences"] .requirements-blog-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="universites"] .article-card {
    grid-template-columns: 1fr;
  }

  body[data-page="universites"] .university-type-article-card {
    grid-template-columns: 1fr;
  }

  body[data-page="universites"] .university-type-article-media img {
    height: 150px;
  }

  body[data-page="universites"] .article-card img {
    height: 190px;
    min-height: 190px;
  }

  .site-footer .footer-main,
  .site-footer:has(.footer-main) .footer-main {
    width: calc(100% - 32px);
  }

  .site-footer .footer-bottom {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* FINAL SITE POLISH - FAQ width, footer organization, buttons, contact form */
body[data-page="home"] .faq-section {
  width: calc(100% - 40px);
  max-width: none;
  margin: 18px auto 26px;
  padding: 28px clamp(18px, 4vw, 48px) 36px;
}

body[data-page="home"] .faq-section .section-heading,
body[data-page="home"] .faq-tabs,
body[data-page="home"] .faq-section .accordion {
  width: min(1240px, 100%);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.btn,
button:not(.menu-button):not(.adm-nav-item),
input[type="submit"],
.filter-reset,
.detail-link,
.map-copy-link,
.footer-cta {
  border-radius: 999px;
  transition: transform 160ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.btn:hover,
button:not(.menu-button):not(.adm-nav-item):hover,
input[type="submit"]:hover,
.filter-reset:hover,
.detail-link:hover,
.map-copy-link:hover,
.footer-cta:hover {
  transform: translateY(-2px);
}

.btn:active,
button:not(.menu-button):not(.adm-nav-item):active,
input[type="submit"]:active,
.filter-reset:active,
.detail-link:active,
.footer-cta:active {
  transform: translateY(0) scale(0.98);
}

.site-footer,
.site-footer:has(.footer-main),
body[data-page="home"] > .site-footer,
body[data-page="home"] .site-footer:not(:has(.footer-main)) {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  background: #14355b;
}

.site-footer .footer-main,
.site-footer:has(.footer-main) .footer-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 44px max(28px, calc((100vw - 1450px) / 2 + 48px));
  display: grid;
  grid-template-columns: minmax(280px, 1.45fr) minmax(150px, 0.65fr) minmax(210px, 0.82fr) minmax(260px, 0.9fr);
  gap: clamp(28px, 5vw, 64px);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.site-footer .footer-main > *,
.site-footer .footer-contact {
  min-width: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.site-footer h2 {
  max-width: 360px;
  margin-bottom: 18px;
}

.site-footer p {
  max-width: 440px;
}

.site-footer .footer-bottom {
  width: 100%;
  margin: 0;
  padding: 18px max(28px, calc((100vw - 1450px) / 2 + 48px));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-page="contact"] .contact-hero {
  margin-bottom: 0;
}

body[data-page="contact"] .contact-expert-section {
  width: min(1180px, calc(100% - 48px));
  margin: 34px auto 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 0.82fr);
  gap: clamp(28px, 5vw, 58px);
  align-items: start;
}

body[data-page="contact"] .contact-expert-copy {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  max-width: none;
}

body[data-page="contact"] .contact-expert-copy .section-label {
  color: #ef2f32;
}

body[data-page="contact"] .contact-expert-copy h2 {
  color: #071a44;
  font-size: clamp(34px, 4.8vw, 54px);
  line-height: 1.08;
}

body[data-page="contact"] .contact-expert-copy > p:not(.section-label) {
  max-width: 720px;
  color: #40506a;
  font-size: 17px;
  line-height: 1.8;
}

body[data-page="contact"] .contact-direct-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 14px;
}

body[data-page="contact"] .contact-direct-grid article {
  min-height: 128px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid #d8e4f0;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(13, 43, 76, 0.08);
}

body[data-page="contact"] .contact-direct-grid strong {
  color: #071a44;
  font-size: 17px;
}

body[data-page="contact"] .contact-direct-grid a {
  color: #2c65ad;
  font-weight: 900;
  overflow-wrap: anywhere;
}

body[data-page="contact"] .contact-direct-grid span {
  color: #526782;
  font-size: 14px;
  line-height: 1.55;
}

body[data-page="contact"] .contact-request-card {
  padding: clamp(24px, 3vw, 34px);
  background: #fff;
  border: 1px solid #d8e4f0;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(13, 43, 76, 0.14);
}

body[data-page="contact"] .contact-request-card h2 {
  color: #071a44;
  font-size: 28px;
}

body[data-page="contact"] .contact-form-pro {
  gap: 16px;
}

body[data-page="contact"] .contact-form-pro label {
  display: grid;
  gap: 7px;
  color: #071a44;
  font-size: 14px;
  font-weight: 800;
}

body[data-page="contact"] .contact-form-pro label > span {
  color: #ef2f32;
}

body[data-page="contact"] .contact-form-pro small {
  color: #7a8da6;
  font-size: 12px;
  font-weight: 700;
}

body[data-page="contact"] .contact-form-pro input,
body[data-page="contact"] .contact-form-pro select,
body[data-page="contact"] .contact-form-pro textarea {
  min-height: 50px;
  padding: 14px 16px;
  color: #071a44;
  background: #fff;
  border: 1px solid #d8e4f0;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(13, 43, 76, 0.03);
}

body[data-page="contact"] .contact-form-pro textarea {
  min-height: 150px;
}

body[data-page="contact"] .contact-form-pro input:focus,
body[data-page="contact"] .contact-form-pro select:focus,
body[data-page="contact"] .contact-form-pro textarea:focus {
  border-color: #2c65ad;
  outline: 3px solid rgba(44, 101, 173, 0.14);
}

body[data-page="contact"] .contact-consent {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  color: #40506a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
}

body[data-page="contact"] .contact-consent input {
  width: 18px;
  min-height: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: #ef2f32;
}

body[data-page="contact"] .contact-consent span {
  color: #40506a;
}

body[data-page="contact"] .contact-consent a {
  color: #2c65ad;
  font-weight: 900;
}

body[data-page="contact"] .contact-form-pro button {
  justify-self: start;
  width: auto;
  min-height: 52px;
  padding: 0 30px;
  color: #fff;
  background: #ef2f32;
  border: 1px solid #ef2f32;
  border-radius: 999px;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 0 12px 24px rgba(239, 47, 50, 0.22);
}

body[data-page="contact"] .contact-form-pro button:hover {
  background: #d9272a;
  box-shadow: 0 18px 30px rgba(239, 47, 50, 0.28);
}

body[data-page="contact"] .contact-privacy-note,
body[data-page="contact"] .contact-form-pro .form-status {
  color: #637891;
  font-size: 13px;
}

body[data-page="contact"] .contact-reassurance-grid {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto 34px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

body[data-page="contact"] .contact-reassurance-grid article {
  display: grid;
  gap: 8px;
  padding: 22px;
  background: #fff;
  border: 1px solid #d8e4f0;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(13, 43, 76, 0.08);
}

body[data-page="contact"] .contact-reassurance-grid strong {
  color: #071a44;
  font-size: 16px;
}

body[data-page="contact"] .contact-reassurance-grid span {
  color: #526782;
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 980px) {
  body[data-page="contact"] .contact-expert-section {
    grid-template-columns: 1fr;
  }

  body[data-page="contact"] .contact-reassurance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer .footer-main,
  .site-footer:has(.footer-main) .footer-main {
    grid-template-columns: 1fr 1fr;
    padding-left: 28px;
    padding-right: 28px;
  }

  .site-footer .footer-bottom {
    padding-left: 28px;
    padding-right: 28px;
  }
}

@media (max-width: 640px) {
  body[data-page="home"] .faq-section,
  body[data-page="contact"] .contact-expert-section,
  body[data-page="contact"] .contact-reassurance-grid {
    width: calc(100% - 28px);
  }

  body[data-page="contact"] .contact-direct-grid,
  body[data-page="contact"] .contact-reassurance-grid,
  .site-footer .footer-main,
  .site-footer:has(.footer-main) .footer-main {
    grid-template-columns: 1fr;
  }

  .site-footer .footer-main,
  .site-footer:has(.footer-main) .footer-main,
  .site-footer .footer-bottom {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* =========================================================================
   REGLES REPRISES DU 13/08 18h52
   Blocs presents dans la feuille de reference mais absents de la version
   courante, alors que des pages du site utilisent encore ces classes
   (bandeau compte .auth-strip, encarts d'offre .offer-*, lecteur
   d'actualite .news-reader-*, visuels d'accueil .intro-media-*).
   Sans eux ces sections s'affichaient sans mise en forme.
   ========================================================================= */


.intro-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--deep-blue);
  background: #eaf2fa;
  border: 1px solid #d5e5f4;
  border-radius: 7px;
}


.intro-feature-icon svg {
  width: 13px;
  height: 13px;
}


.intro-media {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}


.intro-media-sub,
.intro-media-badge {
  display: none;
}


.intro-media-main {
  display: block;
  width: 100%;
  /* Ratio fixe plutot qu'une hauteur minimale : la photo suit la largeur
     disponible sans jamais devenir disproportionnee. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: none;
  transform: none;
  transition: transform 400ms ease;
}


.intro-media-sub {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 52%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 4px solid var(--white);
  border-radius: 5px;
  box-shadow: 0 14px 26px rgba(13, 43, 76, 0.2);
  transform: rotate(1deg);
  transition: transform 400ms ease;
}


.image-only-card:hover .intro-media-main {
  transform: scale(1.04);
}


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


.intro-feature-icon {
  width: 24px;
  height: 24px;
}


.intro-feature-icon svg {
  width: 12px;
  height: 12px;
}


.intro-media-main {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
}


.intro-media-main {
  aspect-ratio: 1 / 1;
  border: 6px solid var(--white);
  border-radius: 18px;
  box-shadow: 0 16px 28px rgba(13, 43, 76, 0.16);
  transition: transform 500ms ease, box-shadow 220ms ease;
}


.intro-layout:hover .intro-media-main {
  transform: scale(1.025);
  box-shadow: 0 20px 34px rgba(13, 43, 76, 0.2);
}


@media (prefers-reduced-motion: reduce) {
  .intro-link,
  .intro-media-main {
    transition: none;
  }
}


.auth-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  width: min(860px, calc(100% - 48px));
  margin: 0 auto 28px;
  padding: 22px 34px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid #b85b2a;
  border-radius: 8px;
  box-shadow: 0 12px 26px rgba(20, 34, 58, 0.08);
}


.auth-strip-copy h2 {
  margin: 0 0 4px;
  color: #17345d;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.08;
}


.auth-strip-copy p:not(.section-label) {
  max-width: 640px;
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
}


.auth-strip .section-label {
  margin-bottom: 4px;
  color: #b85b2a;
  font-size: 10.5px;
}


.auth-strip [data-newsletter-zone] {
  display: block;
  width: auto;
  min-width: 230px;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}


.auth-strip .site-auth-actions {
  justify-content: flex-end;
}


.auth-strip .site-auth-pill {
  min-width: 162px;
  min-height: 44px;
  padding: 0 22px;
  font-size: 13px;
}


.auth-strip .site-auth-form {
  width: min(360px, 100%);
  margin-top: 6px;
  padding: 10px;
  background: #f8fbfe;
  border: 1px solid var(--line);
  border-radius: 8px;
}


@media (max-width: 760px) {
  .auth-strip {
    grid-template-columns: 1fr;
    gap: 14px;
    width: calc(100% - 20px);
    padding: 20px;
  }

  .auth-strip [data-newsletter-zone] {
    min-width: 0;
  }

  .auth-strip-actions.site-auth-cta,
  .auth-strip .site-auth-actions {
    justify-items: start;
    justify-content: flex-start;
  }
}


@media (max-width: 640px) {
  body {
    width: 100vw;
  }

  body * {
    max-width: 100%;
  }

  main {
    width: 100%;
    padding: 0 10px;
  }

  .site-header,
  .search-hero,
  .home-hero,
  .page-hero,
  .admin-topbar,
  .admin-hero,
  .search-panel,
  .intro-card,
  .cards-section,
  .blog-section,
  .quick-grid,
  .content-band,
  .panel-grid,
  .site-footer,
  .finder-layout,
  .planner-layout,
  .admin-grid {
    overflow: hidden;
    max-width: 100%;
  }

  /* .image-only-card garde overflow: visible pour laisser depasser la forme
     decorative ; on limite juste sa largeur pour eviter tout defilement
     horizontal sur petit ecran. */
  .image-only-card {
    max-width: calc(100% - 14px);
  }

  .search-hero,
  .home-hero,
  .page-hero,
  .intro-layout,
  .quick-grid,
  .blog-section,
  .cards-section,
  .content-band,
  .panel-grid,
  .finder-layout,
  .planner-layout,
  .admin-hero,
  .admin-grid {
    width: 100%;
  }

  .article-hero,
  .article-console,
  .article-title-block,
  .article-reading-layout {
    width: 100%;
  }

  .article-aside {
    position: static;
  }

  .ez-blog-sidebar {
    position: static;
  }

  .article-card {
    grid-template-columns: 1fr;
  }

  .ez-blog-card {
    grid-template-columns: 1fr;
  }

  .job-offer-card,
  .job-facts {
    grid-template-columns: 1fr;
  }

  .article-card img {
    height: 210px;
  }

  .ez-blog-image img {
    height: 210px;
  }

  .job-offer-card img {
    height: 210px;
    min-height: 0;
  }

  .admin-panel-head {
    display: grid;
  }

  .result-card,
  .opportunity-card,
  .news-card {
    grid-template-columns: 1fr;
  }

  .result-card img,
  .opportunity-card img,
  .news-card img {
    height: 190px;
  }

  .result-card dl,
  .meta-grid {
    grid-template-columns: 1fr;
  }

  .search-hero,
  .search-panel {
    min-height: 360px;
  }

  .home-hero {
    width: 100%;
    min-height: 0;
    padding: 28px 20px;
  }

  .home-hero h1 {
    font-size: 31px;
  }

  .home-hero p:not(.section-label) {
    font-size: 15px;
  }

  .orientation-strip,
  .home-section,
  .home-feature,
  .home-board,
  .home-compare {
    width: 100%;
  }

  .home-feature img {
    min-height: 240px;
  }

  .requirement-band,
  .requirement-flow {
    width: 100%;
  }

  .contact-expert-section {
    width: 100%;
    padding: 20px;
  }

  .contact-request-card {
    padding: 18px;
  }

  .requirement-intro img {
    width: 190px;
    height: 190px;
    justify-self: center;
  }

  .search-panel {
    width: 100%;
    padding: 28px 26px;
  }

  .search-panel h1 {
    font-size: 25px;
    line-height: 1.15;
  }

  .page-hero h1 {
    font-size: 30px;
  }

  .search-form {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .search-form input,
  .search-form button {
    width: 100%;
  }

  .intro-card h2,
  .section-heading h2 {
    font-size: 24px;
  }

  .intro-card p:not(.section-label) {
    font-size: 15px;
  }

  /* Sur petit ecran, la composition superposee devient illisible : on ne
     garde que la photo principale et la pastille, et on retire la reserve
     d'espace prevue pour la photo secondaire. */
  .intro-media {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .intro-media-main {
    aspect-ratio: 16 / 10;
  }

  .intro-media-sub {
    display: none;
  }

  .intro-media-badge {
    right: 14px;
    bottom: 14px;
    padding: 10px 14px;
  }

  .intro-media-badge strong {
    font-size: 20px;
  }

  .intro-features {
    gap: 18px;
    margin-top: 26px;
  }

  .blog-card img {
    height: 118px;
  }

  .blog-card {
    grid-template-columns: 128px 1fr;
  }

  .blog-card h3 {
    font-size: 17px;
  }

  .blog-card p {
    font-size: 14px;
  }

  .site-footer {
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }

  .newsletter-auth-actions,
  .newsletter-categories {
    grid-template-columns: 1fr;
  }
}


/* =========================================================================
   FICHE COMPLETE D'UNE OFFRE (fenetre "Voir les N informations")
   Affiche tout ce que l'API source transmet pour l'offre, regroupe par
   theme. Structure : une synthese en haut, puis un bloc par theme.
   ========================================================================= */

/* Synthese : entreprise, lieu, contrat, remuneration. Deux colonnes pour
   rester compact meme avec des valeurs longues (noms d'entreprises
   allemands). */
.offer-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 0 0 18px;
  padding: 14px 16px;
  background: #f3f8fd;
  border: 1px solid #dbe8f4;
  border-radius: 12px;
}


.offer-summary-grid dt,
.offer-detail-group dt {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}


.offer-summary-grid dd,
.offer-detail-group dd {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  /* Les references et adresses allemandes sont longues et sans espaces :
     sans cette regle elles debordent de la fenetre. */
  overflow-wrap: anywhere;
}


.offer-contact-block {
  padding: 18px 20px;
  background: #fff8e6;
  border: 1px solid #f0cf75;
  border-left: 6px solid var(--gold);
  border-radius: 10px;
}


.offer-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 18px;
  margin: 0;
}


.offer-contact-grid dt {
  margin-bottom: 3px;
  color: #7a4b00;
  font-size: 11.5px;
  font-weight: 900;
  text-transform: uppercase;
}


.offer-contact-grid dd {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}


.offer-contact-grid a {
  color: #0b66ad;
  text-decoration: underline;
}


.offer-contact-note {
  margin: 12px 0 0;
  color: #5d4b19;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}


.offer-detail-groups {
  display: grid;
  gap: 16px;
}


.offer-source-line {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}


.offer-source-line a {
  color: var(--deep-blue);
  font-weight: 800;
  text-decoration: underline;
}


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


/* =========================================================================
   LECTURE COMPLETE D'UNE ACTUALITE
   Reprend le gabarit de la fenetre d'offre, avec une mise en page pensee
   pour du texte suivi : mesure de ligne limitee et interlignage genereux.
   ========================================================================= */

.news-reader-image {
  width: 100%;
  max-height: 280px;
  margin: 0 0 18px;
  object-fit: cover;
  border-radius: 12px;
}


/* Chapo : plus gros que le corps, sans etre un titre. */
.news-reader-lead {
  max-width: 62ch;
  margin: 0 0 18px;
  color: #33455e;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.6;
}


/* Mesure de ligne bornee a environ 66 caracteres : au-dela, l'oeil perd le
   debut de la ligne suivante sur un texte long. */
.news-reader-body {
  max-width: 66ch;
  color: #3a4a61;
  font-size: 15.5px;
  line-height: 1.75;
}


.news-reader-body p {
  margin: 0 0 14px;
}


.news-reader-body h3,
.news-reader-body h4 {
  margin: 22px 0 8px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
}


.news-reader-body ul,
.news-reader-body ol {
  margin: 0 0 14px;
  padding-left: 20px;
}


.news-reader-body li {
  margin-bottom: 6px;
}


.news-reader-body a {
  color: var(--deep-blue);
  text-decoration: underline;
}


/* Credit de provenance : discret, mais toujours visible en fin de lecture. */
.news-reader-credit {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
  font-style: italic;
}


/* =========================================================================
   DESCRIPTIF COMPLET DE L'OFFRE ET SELECTEUR DE LANGUE
   ========================================================================= */

/* Texte integral de l'annonce : mesure de ligne bornee et interlignage
   genereux, ces descriptifs depassant souvent 2 000 caracteres. */
.offer-fulltext {
  max-width: 66ch;
  color: #3a4a61;
  font-size: 15px;
  line-height: 1.75;
}


.offer-fulltext p {
  margin: 0 0 12px;
}


.offer-fulltext ul {
  margin: 0 0 12px;
  padding-left: 20px;
}


.offer-fulltext li {
  margin-bottom: 5px;
}


.discover-band .intro-media-main {
  aspect-ratio: 1 / 1;
  border: 5px solid var(--white);
  border-radius: 14px;
  box-shadow: 0 14px 26px rgba(13, 43, 76, 0.18);
}

/* URGENT FIX - job reader contact visibility + clean full-width footer
   Correction 2026-08-18 : tout ce bloc etait ecrit avec des selecteurs NON
   scopes (`.offer-summary-grid`, `.offer-contact-grid`, `.offer-fulltext`,
   `.offer-detail-groups`...) alors qu'il ne visait que la fenetre modale
   "Documents requis" (.requirements-modal-panel). Comme la fiche offre
   dediee (offre-detail.html) reutilise EXACTEMENT ces memes noms de classe
   pour son propre contenu, ces regles ecrasaient aussi son rendu (colonnes
   forcees, largeur de texte 86ch/920px non pensee pour cette page) — c'est
   la cause du texte mal positionne / peu lisible signale sur mobile dans le
   descriptif des offres. Les selecteurs ci-dessous sont maintenant prefixes
   par ".requirements-modal-panel" pour ne plus deborder sur les autres
   pages. */
.requirements-modal {
  padding: clamp(14px, 2.4vw, 34px);
  align-items: center;
}

.requirements-modal-panel {
  width: min(1180px, calc(100vw - 42px));
  max-height: min(92vh, 980px);
  padding: clamp(28px, 3.4vw, 46px);
  border-radius: 14px;
}

.requirements-modal-panel h2 {
  max-width: 940px;
  margin-bottom: 22px;
  color: #071a44;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.1;
}

.requirements-modal-panel > .section-label {
  display: inline-flex;
  width: auto;
  margin-bottom: 10px;
  padding: 7px 12px;
  color: #ef2f32;
  background: #fff1f1;
  border-radius: 999px;
}

.requirements-modal-panel .offer-summary-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 18px;
  background: #f7fbff;
  border: 1px solid #d8e4f0;
  border-radius: 10px;
}

.requirements-modal-panel .offer-contact-block {
  margin-top: 24px;
  padding: 24px;
  background: linear-gradient(135deg, #fff8e6 0%, #fff 68%);
  border: 2px solid #f0cf75;
  border-left: 8px solid #ef2f32;
  border-radius: 12px;
  box-shadow: 0 16px 34px rgba(122, 75, 0, 0.14);
}

.requirements-modal-panel .offer-contact-block h3 {
  margin-bottom: 14px;
  color: #071a44;
  font-size: 22px;
}

.requirements-modal-panel .offer-contact-grid {
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
}

.requirements-modal-panel .offer-contact-grid div {
  min-width: 0;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #f0d791;
  border-radius: 8px;
}

.requirements-modal-panel .offer-contact-grid dt {
  color: #9a210f;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.requirements-modal-panel .offer-contact-grid dd {
  color: #071a44;
  font-size: 15px;
  font-weight: 900;
}

.requirements-modal-panel .offer-contact-grid a {
  color: #0b66ad;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.requirements-modal-panel .offer-contact-note {
  margin-top: 16px;
  color: #5b4513;
  font-size: 14px;
}

.requirements-modal-section:not(.offer-contact-block),
.requirements-modal-panel .offer-detail-groups,
.requirements-modal-panel .offer-fulltext {
  max-width: 920px;
}

.requirements-modal-panel .offer-fulltext {
  max-width: 86ch;
  font-size: 16px;
  line-height: 1.78;
}

.site-footer,
.site-footer:has(.footer-main),
body[data-page="home"] > .site-footer,
body[data-page="home"] .site-footer:not(:has(.footer-main)) {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #fff;
  background: #14355b;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.site-footer .footer-main,
.site-footer:has(.footer-main) .footer-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 44px clamp(24px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(250px, 1.2fr) minmax(150px, 0.8fr) minmax(150px, 0.8fr) minmax(180px, 0.9fr) minmax(150px, 0.8fr);
  gap: clamp(28px, 5vw, 62px);
  background: transparent;
}

.site-footer .footer-main > *,
.site-footer .footer-contact,
.site-footer .footer-main div,
.site-footer .footer-main section,
.site-footer .footer-main nav {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;
}

.site-footer .footer-kicker {
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.66);
}

.site-footer h2 {
  max-width: 360px;
  margin-bottom: 18px;
  color: #fff;
  font-size: 32px;
}

.site-footer h3 {
  color: #fff;
}

.site-footer p {
  max-width: 470px;
  color: rgba(255, 255, 255, 0.78);
}

.site-footer a,
.site-footer .footer-contact-link {
  color: rgba(255, 255, 255, 0.84);
  font-weight: 800;
}

.site-footer a:hover,
.site-footer .footer-contact-link:hover {
  color: #fff;
}

.site-footer .footer-cta {
  display: none;
}

.site-footer .footer-bottom {
  width: 100%;
  margin: 0;
  padding: 18px clamp(24px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0f2c4c;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 900px) {
  .offer-summary-grid,
  .offer-contact-grid,
  .site-footer .footer-main,
  .site-footer:has(.footer-main) .footer-main {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .requirements-modal-panel {
    width: calc(100vw - 24px);
    padding: 24px 18px;
  }

  .offer-summary-grid,
  .offer-contact-grid,
  .site-footer .footer-main,
  .site-footer:has(.footer-main) .footer-main {
    grid-template-columns: 1fr;
  }

  .site-footer .footer-bottom {
    display: grid;
    gap: 12px;
  }
}

/* EXIGENCES PAGE REDESIGN - professional full-width content */
body[data-page="exigences"] {
  background:
    linear-gradient(180deg, #eef4fb 0%, #f7fbff 42%, #edf3f9 100%);
}

body[data-page="exigences"] main {
  padding-bottom: 34px;
}

body[data-page="exigences"] .requirements-hero {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 22px 50px rgba(13, 43, 76, 0.16);
}

body[data-page="exigences"] .requirement-focus-layout,
body[data-page="exigences"] .planner-layout {
  width: calc(100% - 48px);
  max-width: none;
  margin: 30px auto 28px;
  display: block;
}

body[data-page="exigences"] .requirement-focus-layout > .interactive-panel,
body[data-page="exigences"] .requirement-main-card {
  width: 100%;
  padding: clamp(26px, 4vw, 46px);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #d7e5f2;
  border-radius: 14px;
  box-shadow: 0 20px 44px rgba(13, 43, 76, 0.11);
}

body[data-page="exigences"] .requirement-intro {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: clamp(26px, 4vw, 54px);
  align-items: center;
  margin-bottom: 32px;
}

body[data-page="exigences"] .requirement-intro h2 {
  max-width: 900px;
  color: #071a44;
  font-size: clamp(36px, 4.8vw, 58px);
  line-height: 1.06;
}

body[data-page="exigences"] .requirement-intro p:not(.section-label) {
  max-width: 920px;
  color: #314765;
  font-size: 18px;
  line-height: 1.78;
}

body[data-page="exigences"] .requirement-intro img {
  width: 100%;
  height: clamp(260px, 24vw, 360px);
  object-fit: cover;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 20px 42px rgba(13, 43, 76, 0.18);
}

body[data-page="exigences"] .requirements-blog-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

body[data-page="exigences"] .requirements-blog-grid .university-type-card {
  min-height: 390px;
  border-radius: 10px;
  border: 1px solid #d8e4f0;
  box-shadow: 0 16px 34px rgba(13, 43, 76, 0.10);
}

body[data-page="exigences"] .requirements-blog-grid .university-type-img {
  height: 170px;
}

body[data-page="exigences"] .requirements-blog-grid .university-type-card h3 {
  font-size: 19px;
}

body[data-page="exigences"] .requirements-blog-grid .university-type-card p:not(.university-type-kicker):not(.university-type-meta) {
  font-size: 14px;
  line-height: 1.58;
}

body[data-page="exigences"] .requirement-band,
body[data-page="exigences"] .requirement-flow {
  width: calc(100% - 48px);
  max-width: none;
  margin: 0 auto 28px;
  padding: clamp(30px, 4.5vw, 56px);
  background: #fff;
  border: 1px solid #d7e5f2;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(13, 43, 76, 0.10);
}

body[data-page="exigences"] .requirement-band {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(246, 250, 255, 0.97) 100%),
    url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1600&q=80") center / cover;
}

body[data-page="exigences"] .requirement-flow {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 247, 253, 0.98) 100%),
    url("https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&w=1600&q=80") center / cover;
}

body[data-page="exigences"] .requirement-band-head,
body[data-page="exigences"] .requirement-flow > div:first-child {
  max-width: 1040px;
  margin-bottom: 28px;
}

body[data-page="exigences"] .requirement-band h2,
body[data-page="exigences"] .requirement-flow h2 {
  max-width: 980px;
  color: #071a44;
  font-size: clamp(34px, 4.5vw, 54px);
  line-height: 1.08;
}

body[data-page="exigences"] .requirement-band-head p:not(.section-label),
body[data-page="exigences"] .requirement-flow > div:first-child p:not(.section-label) {
  max-width: 980px;
  color: #314765;
  font-size: 17px;
  line-height: 1.78;
}

body[data-page="exigences"] .requirement-check-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

body[data-page="exigences"] .requirement-flow-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

body[data-page="exigences"] .requirement-check-grid article,
body[data-page="exigences"] .requirement-flow-list article {
  min-height: 220px;
  padding: 26px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #d8e4f0;
  border-top: 6px solid #2c65ad;
  border-radius: 10px;
  box-shadow: 0 16px 32px rgba(13, 43, 76, 0.10);
}

body[data-page="exigences"] .requirement-check-grid article:nth-child(2n),
body[data-page="exigences"] .requirement-flow-list article:nth-child(2n) {
  border-top-color: #ef2f32;
}

body[data-page="exigences"] .requirement-check-grid article:nth-child(3n),
body[data-page="exigences"] .requirement-flow-list article:nth-child(3n) {
  border-top-color: #f5b51b;
}

body[data-page="exigences"] .requirement-check-grid strong,
body[data-page="exigences"] .requirement-flow-list h3 {
  display: block;
  margin-bottom: 12px;
  color: #071a44;
  font-size: 21px;
  line-height: 1.2;
}

body[data-page="exigences"] .requirement-flow-list strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  color: #fff;
  background: #ef2f32;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

body[data-page="exigences"] .requirement-check-grid span,
body[data-page="exigences"] .requirement-flow-list p {
  color: #405771;
  font-size: 15.5px;
  line-height: 1.68;
}

@media (max-width: 1180px) {
  body[data-page="exigences"] .requirements-blog-grid,
  body[data-page="exigences"] .requirement-check-grid,
  body[data-page="exigences"] .requirement-flow-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-page="exigences"] .requirement-focus-layout,
  body[data-page="exigences"] .planner-layout,
  body[data-page="exigences"] .requirement-band,
  body[data-page="exigences"] .requirement-flow {
    width: calc(100% - 28px);
  }

  body[data-page="exigences"] .requirement-intro,
  body[data-page="exigences"] .requirements-blog-grid,
  body[data-page="exigences"] .requirement-check-grid,
  body[data-page="exigences"] .requirement-flow-list {
    grid-template-columns: 1fr;
  }

  body[data-page="exigences"] .requirement-check-grid article,
  body[data-page="exigences"] .requirement-flow-list article {
    min-height: 0;
  }
}

/* =========================================================================
   FAQ DE L'ACCUEIL — VERSION PLEINE LARGEUR
   Ce bloc est place en fin de fichier a dessein : il arrive apres les regles
   "FINAL SITE POLISH" plus haut, qui bornaient la section a une colonne
   centree. A specificite egale, c'est la derniere regle qui gagne.

   Principe de mise en page :
     .faq-section  = bande pleine largeur, du bord gauche au bord droit,
                     avec son propre fond (elle se detache du reste de la page)
     .faq-inner    = colonne interne bornee, pour que les lignes de texte
                     gardent une longueur lisible sur un ecran large

   Animations : toutes reprennent le vocabulaire deja utilise sur le site
   (apparition .reveal au defilement, transitions de 160-420 ms, courbe
   cubic-bezier douce). Rien de neuf a apprendre pour l'oeil du visiteur.
   ========================================================================= */

body[data-page="home"] .faq-section {
  /* Pleine largeur reelle : on annule la gouttiere laterale posee plus haut. */
  width: 100%;
  max-width: none;
  margin: 34px 0 0;
  padding: clamp(40px, 5vw, 76px) 0 clamp(46px, 5vw, 82px);
  background:
    radial-gradient(1200px 420px at 50% 0%, rgba(0, 90, 156, 0.07), transparent 70%),
    linear-gradient(180deg, #f4f9fd 0%, #eef5fb 100%);
  border-top: 1px solid #dbe8f3;
  border-bottom: 1px solid #dbe8f3;
  text-align: center;
}

/* Zone interne : occupe toute la largeur de la bande, marges laterales
   comprises. Il n'y a volontairement plus de plafond en pixels — les
   questions doivent s'etendre sur toute la largeur de la zone FAQ. */
body[data-page="home"] .faq-inner {
  width: calc(100% - clamp(20px, 4vw, 64px));
  max-width: none;
  margin: 0 auto;
}

/* ── Titre de section ─────────────────────────────────────────────────────── */
body[data-page="home"] .faq-section .section-heading {
  max-width: 760px;
  margin: 0 auto clamp(22px, 2.6vw, 34px);
}

body[data-page="home"] .faq-section .section-heading h2 {
  margin: 0 0 12px;
  color: #12213d;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.5px;
}

body[data-page="home"] .faq-section .section-heading p:not(.section-label) {
  margin: 0;
  color: #64778d;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
}

/* ── Onglets de categorie ─────────────────────────────────────────────────── */
body[data-page="home"] .faq-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 clamp(22px, 2.4vw, 32px);
}

body[data-page="home"] .faq-tabs button {
  min-height: 44px;
  padding: 0 26px;
  color: #2c65ad;
  background: #fff;
  border: 1px solid #cfe0ef;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease,
    transform 180ms ease, box-shadow 180ms ease;
}

body[data-page="home"] .faq-tabs button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(13, 43, 76, 0.12);
}

body[data-page="home"] .faq-tabs button.active {
  color: #fff;
  background: var(--deep-blue);
  border-color: var(--deep-blue);
  box-shadow: 0 10px 22px rgba(0, 90, 156, 0.26);
}

body[data-page="home"] .faq-tabs button:focus-visible {
  outline: 3px solid var(--deep-blue);
  outline-offset: 3px;
}

/* ── Liste des questions ──────────────────────────────────────────────────── */
/* Une seule colonne : chaque question occupe toute la largeur de la zone FAQ,
   d'un bord a l'autre. L'interligne des reponses est legerement augmente pour
   compenser la longueur des lignes sur un ecran large. */
body[data-page="home"] .faq-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
  text-align: left;
}

body[data-page="home"] .faq-item {
  overflow: hidden;
  background: #fff;
  border: 1px solid #d5e4f0;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(20, 34, 58, 0.05);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

body[data-page="home"] .faq-item:hover {
  border-color: #b6d3e9;
  box-shadow: 0 10px 26px rgba(20, 34, 58, 0.09);
}

body[data-page="home"] .faq-item.is-open {
  border-color: var(--deep-blue);
  box-shadow: 0 14px 32px rgba(0, 90, 156, 0.14);
}

/* ── Question ─────────────────────────────────────────────────────────────── */
body[data-page="home"] .faq-item > button {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 66px;
  padding: 16px 68px 16px 26px;
  position: relative;
  color: #12213d;
  background: transparent;
  border: 0;
  border-radius: 14px !important;
  font: inherit;
  font-size: clamp(15.5px, 1.2vw, 17.5px);
  font-weight: 800;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease;
}

body[data-page="home"] .faq-item > button:hover {
  color: var(--deep-blue);
}

body[data-page="home"] .faq-item > button:focus-visible {
  outline: 3px solid var(--deep-blue);
  outline-offset: -3px;
}

/* Signe +/- : un seul glyphe pivote d'un quart de tour a l'ouverture, ce qui
   evite de changer le contenu et donne une transition continue. */
body[data-page="home"] .faq-item > button::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  background:
    linear-gradient(var(--deep-blue), var(--deep-blue)) center/13px 2.5px no-repeat,
    linear-gradient(var(--deep-blue), var(--deep-blue)) center/2.5px 13px no-repeat,
    #eaf3fb;
  border-radius: 50%;
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), background-color 220ms ease;
}

body[data-page="home"] .faq-item.is-open > button::after {
  transform: rotate(135deg);
  background:
    linear-gradient(#fff, #fff) center/13px 2.5px no-repeat,
    linear-gradient(#fff, #fff) center/2.5px 13px no-repeat,
    var(--red);
}

/* ── Reponse ──────────────────────────────────────────────────────────────── */
/* grid-template-rows 0fr -> 1fr : la hauteur cible est celle du contenu reel,
   donc aucune valeur fixe a maintenir quelle que soit la longueur du texte
   (voir setupFaq dans app.js). */
body[data-page="home"] .faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 260ms ease;
  opacity: 0;
}

body[data-page="home"] .faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

body[data-page="home"] .faq-answer > p {
  overflow: hidden;
  margin: 0;
  padding: 0 26px 22px;
  color: #5c6e85;
  font-size: clamp(15px, 1.05vw, 16.5px);
  line-height: 1.75;
}

/* ── Apparition en cascade des questions ──────────────────────────────────── */
/* Rejoue a chaque changement d'onglet : le panneau passe de hidden a visible,
   l'animation redemarre. Meme duree et meme courbe que le .reveal du site. */
@keyframes faqItemIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* La cascade est conditionnee a .in-view, la classe que le site pose deja sur
   un bloc .reveal quand il entre dans le viewport. Sans cette condition,
   l'animation se jouerait au chargement de la page, bien avant que le
   visiteur n'arrive sur la FAQ : il ne verrait jamais l'effet.
   Au changement d'onglet, le panneau repasse de hidden a visible et
   l'animation redemarre d'elle-meme. */
body[data-page="home"] .faq-section.in-view .faq-panel .faq-item {
  animation: faqItemIn 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

body[data-page="home"] .faq-section.in-view .faq-panel .faq-item:nth-child(1) { animation-delay: 0ms; }
body[data-page="home"] .faq-section.in-view .faq-panel .faq-item:nth-child(2) { animation-delay: 60ms; }
body[data-page="home"] .faq-section.in-view .faq-panel .faq-item:nth-child(3) { animation-delay: 120ms; }
body[data-page="home"] .faq-section.in-view .faq-panel .faq-item:nth-child(4) { animation-delay: 180ms; }
body[data-page="home"] .faq-section.in-view .faq-panel .faq-item:nth-child(5) { animation-delay: 240ms; }
body[data-page="home"] .faq-section.in-view .faq-panel .faq-item:nth-child(6) { animation-delay: 300ms; }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* La bande reste pleine largeur : on ne reduit que la colonne interne. */
  body[data-page="home"] .faq-section {
    width: 100%;
    padding: 34px 0 40px;
  }

  body[data-page="home"] .faq-inner {
    width: calc(100% - 28px);
  }

  body[data-page="home"] .faq-tabs {
    gap: 8px;
  }

  body[data-page="home"] .faq-tabs button {
    min-height: 38px;
    padding: 0 16px;
    font-size: 13.5px;
  }

  body[data-page="home"] .faq-item > button {
    min-height: 56px;
    padding: 14px 54px 14px 16px;
  }

  body[data-page="home"] .faq-answer > p {
    padding: 0 16px 16px;
  }
}

/* Respect du reglage systeme "reduire les animations" : le contenu reste
   entierement accessible, seuls les mouvements sont supprimes. */
@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .faq-section.in-view .faq-panel .faq-item {
    animation: none;
  }

  body[data-page="home"] .faq-answer {
    transition: none;
  }

  body[data-page="home"] .faq-item > button::after {
    transition: none;
  }
}

/* HOME PERFORMANCE PATCH - fast first paint */
body[data-page="home"] .search-hero::before {
  background:
    linear-gradient(90deg, rgba(7, 35, 67, 0.84), rgba(10, 96, 158, 0.64)),
    url("https://images.unsplash.com/photo-1562774053-701939374585?auto=format&fit=crop&w=1200&q=65") center / cover;
}

body[data-page="home"] .intro-layout,
body[data-page="home"] .quick-grid,
body[data-page="home"] .city-section,
body[data-page="home"] .map-layout,
body[data-page="home"] .work-orientation-section,
body[data-page="home"] .news-band,
body[data-page="home"] .faq-section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 520px;
}

body[data-page="home"] .search-hero,
body[data-page="home"] .site-header {
  content-visibility: visible;
}

.teaser-loading {
  display: grid;
  min-height: 96px;
  place-items: center;
  margin: 0;
  color: #526782;
  background: #f8fbfe;
  border: 1px dashed #cbdbea;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
}

body[data-page="home"] [data-home-news-teasers] .teaser-loading {
  grid-column: 1 / -1;
  min-height: 190px;
}

/* ── FAQ : repli a 3 questions et bouton "Voir plus" ──────────────────────── */
/* La classe .is-collapsed est posee par setupFaq (app.js), jamais ecrite dans
   le HTML : sans JavaScript, aucune question n'est masquee. */
body[data-page="home"] .faq-list.is-collapsed .faq-item:nth-child(n + 4) {
  display: none;
}

body[data-page="home"] .faq-more-row {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

/* Le bouton reprend .secondary-btn (contour bleu, hauteur 48px, rayon
   harmonise) : c'est le meme bouton que "Preparer son dossier" sur Travail,
   la FAQ n'introduit pas un style de bouton supplementaire. */
body[data-page="home"] .faq-more {
  min-width: 240px;
}

/* Chevron : pointe vers le bas quand il reste des questions a decouvrir,
   vers le haut une fois la liste depliee. */
body[data-page="home"] .faq-more::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: 2px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

body[data-page="home"] .faq-more[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(225deg);
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .faq-more::after {
    transition: none;
  }
}

/* Credit photo sous l'image d'un etablissement.
   Volontairement discret : il doit etre lisible et verifiable, sans jamais
   concurrencer le nom de l'etablissement ni sa description. Affiche seulement
   si la fiche porte un credit (voir ligneCredit dans universite-type.js). */
.establishment-credit {
  margin: 6px 0 0;
  color: #8493a5;
  font-size: 12px;
  line-height: 1.4;
  font-style: italic;
}

.establishment-credit a {
  color: #6b7d92;
  text-decoration: underline;
}

.establishment-credit a:hover {
  color: var(--deep-blue);
}

/* ==========================================================================
   PIED DE PAGE — mise en page unique pour toutes les pages
   ==========================================================================

   Historique du probleme : la toute premiere version du pied de page ecrivait
   ses colonnes directement dans le HTML, et .site-footer etait donc lui-meme
   une grille a 3 colonnes (regle d'origine, plus haut dans ce fichier).

   Le pied de page est desormais genere par setupSiteFooter() (app.js) et ne
   contient plus que DEUX blocs : .footer-main, qui gere sa propre grille de
   colonnes, et .footer-bottom. Les repartir dans une grille de 3 colonnes
   n'a donc plus aucun sens — c'est ce qui decalait le pied de page.

   On revient ici a un empilement vertical simple. Chaque bloc occupe toute
   la largeur et gere sa mise en page interne, ce qui rend le rendu
   rigoureusement identique sur les dix pages.

   Place en fin de fichier a dessein : la regle doit l'emporter sur toutes
   les surcharges accumulees au fil du temps. */
.site-footer:has(.footer-main) {
  display: block;
}

/* Neutralise les proprietes de grille heritees des anciennes regles. Sans
   cela, elles resteraient actives et pourraient ressortir si .site-footer
   redevenait un conteneur de grille. */
.site-footer:has(.footer-main) > .footer-main,
.site-footer:has(.footer-main) > .footer-bottom {
  grid-column: auto;
  width: 100%;
}

/* ==========================================================================
   EXIGENCES — cartes "Avant envoi" et "Organisation du dossier"
   ========================================================================== */
body[data-page="exigences"] .requirement-band,
body[data-page="exigences"] .requirement-flow {
  position: relative;
  overflow: visible;
  border-radius: 22px;
}

body[data-page="exigences"] .requirement-band {
  background:
    linear-gradient(135deg, rgba(248, 252, 255, 0.98), rgba(236, 246, 255, 0.96)),
    url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1600&q=80") center / cover;
  border-color: #c6ddf0;
}

body[data-page="exigences"] .requirement-flow {
  background:
    linear-gradient(135deg, rgba(250, 255, 249, 0.98), rgba(241, 252, 239, 0.96)),
    url("https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&w=1600&q=80") center / cover;
  border-color: #c9e6d3;
}

body[data-page="exigences"] .requirement-check-grid,
body[data-page="exigences"] .requirement-flow-list {
  perspective: 1200px;
}

body[data-page="exigences"] .requirement-check-grid article,
body[data-page="exigences"] .requirement-flow-list article {
  position: relative;
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 286px;
  padding: 28px 28px 30px;
  overflow: hidden;
  border-top: 0;
  border-radius: 22px;
  transform: translateZ(0);
  transform-style: preserve-3d;
  transition:
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 260ms ease,
    border-color 260ms ease,
    background 260ms ease;
  will-change: transform;
}

body[data-page="exigences"] .requirement-check-grid article {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #c9dbef;
  box-shadow: 0 14px 30px rgba(9, 64, 126, 0.10);
}

body[data-page="exigences"] .requirement-flow-list article {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #cce5d5;
  box-shadow: 0 14px 30px rgba(23, 110, 62, 0.10);
}

body[data-page="exigences"] .requirement-check-grid article::after,
body[data-page="exigences"] .requirement-flow-list article::after {
  content: "";
  position: absolute;
  inset: auto 22px 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  opacity: 0.95;
}

body[data-page="exigences"] .requirement-check-grid article::after {
  background: linear-gradient(90deg, #1c6dbc, #86bbd8);
}

body[data-page="exigences"] .requirement-flow-list article::after {
  background: linear-gradient(90deg, #1f8a54, #f5b51b);
}

body[data-page="exigences"] .requirement-check-grid article:hover,
body[data-page="exigences"] .requirement-check-grid article:active,
body[data-page="exigences"] .requirement-check-grid article:focus-within {
  background: #ffffff;
  border-color: #85b9e2;
  box-shadow: 0 30px 58px rgba(9, 64, 126, 0.22);
  transform: translateY(-12px) scale(1.025) rotateX(1.5deg);
}

body[data-page="exigences"] .requirement-flow-list article:hover,
body[data-page="exigences"] .requirement-flow-list article:active,
body[data-page="exigences"] .requirement-flow-list article:focus-within {
  background: #ffffff;
  border-color: #8ecfa7;
  box-shadow: 0 30px 58px rgba(23, 110, 62, 0.22);
  transform: translateY(-12px) scale(1.025) rotateX(1.5deg);
}

body[data-page="exigences"] .requirement-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 58px;
  margin-bottom: 6px;
  border-radius: 16px;
}

body[data-page="exigences"] .requirement-check-grid .requirement-icon {
  color: #164f91;
  background: linear-gradient(135deg, #dcecff, #9fc8e8);
}

body[data-page="exigences"] .requirement-flow-list .requirement-icon {
  color: #176e3e;
  background: linear-gradient(135deg, #e4f8ea, #f7dc8a);
}

body[data-page="exigences"] .requirement-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-page="exigences"] .requirement-check-grid strong,
body[data-page="exigences"] .requirement-flow-list h3 {
  margin: 0;
  color: #1c3154;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.32;
}

body[data-page="exigences"] .requirement-flow-list h3 {
  color: #18442d;
  padding-right: 54px;
}

body[data-page="exigences"] .requirement-check-grid span:not(.requirement-icon),
body[data-page="exigences"] .requirement-flow-list p {
  margin: 0;
  color: #4b5f78;
  font-size: 15.5px;
  line-height: 1.72;
}

body[data-page="exigences"] .requirement-flow-list p {
  color: #4f6658;
}

body[data-page="exigences"] .requirement-flow-list strong {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 42px;
  height: 42px;
  margin: 0;
  color: #176e3e;
  background: #eef9f1;
  border: 1px solid #b8dfc3;
  border-radius: 999px;
  font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="exigences"] .requirement-check-grid article,
  body[data-page="exigences"] .requirement-flow-list article {
    transition: none;
  }

  body[data-page="exigences"] .requirement-check-grid article:hover,
  body[data-page="exigences"] .requirement-check-grid article:active,
  body[data-page="exigences"] .requirement-check-grid article:focus-within,
  body[data-page="exigences"] .requirement-flow-list article:hover,
  body[data-page="exigences"] .requirement-flow-list article:active,
  body[data-page="exigences"] .requirement-flow-list article:focus-within {
    transform: none;
  }
}

/* Custom Header additions for Erfolg Zentrum */
.auth-buttons-container {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-left: auto;
  position: relative;
}

/* Ajoute le 24/08/2026 avec le compte abonne dans le header
   (dotchlend-auth.js) : panneau qui s'ouvre sous les boutons
   Connexion/Inscription (ou "Bonjour ..." une fois connecte) pour le
   formulaire de connexion/inscription ou les preferences de recherche. */
.site-auth-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: min(320px, 90vw);
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  padding: 16px;
}
.site-auth-popover[hidden] {
  display: none;
}
.site-auth-popover .site-auth-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 10px;
}
.site-auth-popover .site-auth-form input,
.site-auth-popover .site-auth-form select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #d5d5d5;
  font-size: 0.9rem;
}
.site-auth-popover .site-auth-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.site-auth-popover .form-status {
  margin-top: 8px;
  font-size: 0.85rem;
  color: #0056b3;
}
.auth-buttons-container .btn {
  padding: 6px 16px;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  border: 2px solid #0056b3;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}
.btn-connexion {
  background-color: transparent;
  color: #0056b3;
}
.btn-connexion:hover {
  background-color: #0056b3;
  color: white;
}
.btn-inscription {
  background-color: #0056b3;
  color: white;
}
.btn-inscription:hover {
  background-color: #004494;
  border-color: #004494;
}
.site-header {
  position: relative;
}
.erfolg-logo {
  height: 40px;
  vertical-align: middle;
  margin-right: 15px;
}
.header-socials {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 10px 0;
}
.header-socials a {
  color: #555;
  transition: transform 0.2s, color 0.2s;
}
.header-socials a:hover {
  transform: scale(1.15);
  color: #0056b3;
}

/* ==========================================================================
   HUB LEGAL (Architecture OrniPreparation)
   ========================================================================== */

.legal-layout {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
  gap: 60px;
  font-family: 'Catamaran', sans-serif; /* Application de la police Catamaran */
}

@media (min-width: 900px) {
  .legal-layout {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* Colonne de gauche : 33% (Sidebar) */
.legal-sidebar {
  flex: 0 0 300px; /* ~33% de la largeur utile */
  position: sticky;
  top: 100px;
}

.legal-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 40px;
}

.legal-sidebar-nav a {
  display: flex;
  align-items: center;
  color: #3a3a3a;
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
  transition: color 0.3s ease;
}

.legal-sidebar-nav a:hover, .legal-sidebar-nav a[aria-current="page"] {
  color: #0170B9;
}

/* Réseaux sociaux sous la liste des liens (comme la référence) */
.legal-sidebar-socials {
  display: flex;
  gap: 15px;
  align-items: center;
}

.legal-sidebar-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #3a3a3a;
  color: #fff;
  border-radius: 50%;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.legal-sidebar-socials a:hover {
  background-color: #0170B9;
}

.legal-sidebar-socials svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Colonne de droite : 66% (Contenu principal) */
.legal-content {
  flex: 1;
  font-size: 17px;
  line-height: 1.6em;
  color: rgba(0, 0, 0, 0.6);
}

.legal-content h1 {
  font-size: 40px;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 30px;
  line-height: 1.3em;
}

.legal-content h2 {
  font-size: 26px;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 40px;
  margin-bottom: 20px;
}

.legal-content h3 {
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 30px;
  margin-bottom: 15px;
}

.legal-content p {
  margin-bottom: 20px;
}

.legal-content ul {
  margin-bottom: 20px;
  padding-left: 20px;
}

.legal-content li {
  margin-bottom: 10px;
}

.legal-content a {
  color: #0170B9;
  text-decoration: none;
}

.legal-content a:hover {
  text-decoration: underline;
}



/* --- Texte introductif des offres (page Travail) -------------------------
   Bloc SEO court, place dans le panneau des resultats juste avant les cartes
   d'offres afin d'introduire clairement le contenu indexable de /travail. */
.page-lede {
  width: 100%;
  margin: 0 auto 22px;
  text-align: justify;
}

.page-lede p {
  display: -webkit-box;
  max-width: none;
  max-height: calc(1.62em * 4);
  margin: 0;
  overflow: hidden;
  color: #40506a;
  font-size: 15.5px;
  line-height: 1.62;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.page-lede a {
  color: var(--red, #ed3028);
  font-weight: 700;
  text-decoration: underline;
}

/* Meme comportement que .page-hero sur petit ecran : pleine largeur, en
   gardant la petite marge qui evite tout defilement horizontal. */
@media (max-width: 900px) {
  .page-lede {
    width: 100%;
  }
}

/* Page Travail : le titre du hero garde EXACTEMENT sa taille d'origine
   (.page-hero h1, jusqu'a 62px) — on ne touche pas a la police, pour ne pas
   ecraser le hero. On elargit seulement sa colonne de 860 a 920px : mesure
   faite dans le navigateur, la plus longue des deux lignes fait 847px a
   62px, soit une marge trop juste avec 860px selon la police chargee. */
.work-hero h1 {
  max-width: 920px;
}

/* Correctif responsive mobile global (04/09/2026) : les pages Actualites et
   Universites combinaient des blocs a width:100%, un padding sur main et des
   lignes nowrap. Sur mobile cela creait un debordement horizontal, coupait le
   selecteur de langue et repoussait visuellement le flux d'actualites. */
@media (max-width: 640px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  body {
    min-width: 0;
  }

  main {
    padding: 0;
  }

  .header-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
  }

  .header-top .brand {
    max-width: none;
  }

  .brand-logo,
  .text-brand img {
    width: min(190px, 100%) !important;
    height: auto !important;
  }

  .auth-buttons-container,
  [data-selecteur-langue] {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .auth-buttons-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .auth-buttons-container .btn {
    width: 100%;
    min-width: 0;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 14px;
  }

  [data-selecteur-langue] select,
  [data-selecteur-langue] button,
  [data-selecteur-langue] .language-selector {
    max-width: 100%;
  }

  .menu-button {
    /* relative (et non static) : les deux barres du hamburger sont des
       pseudo-elements positionnes en absolu par rapport au bouton. */
    position: relative;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .page-hero,
  .article-hero,
  .content-band,
  .finder-layout,
  .article-console,
  .ez-article-shell,
  .site-footer {
    width: calc(100% - 20px);
    margin-right: auto;
    margin-left: auto;
  }

  .page-hero,
  .article-hero {
    min-height: 0;
    padding: 30px 24px;
  }

  .page-hero h1,
  .article-hero h1 {
    font-size: 30px;
    line-height: 1.12;
    overflow-wrap: anywhere;
  }

  body[data-page="universites"] .article-hero {
    position: relative;
    top: auto;
  }

  body[data-page="universites"] .article-intro {
    margin-top: 12px;
    padding: 22px 16px;
    border-radius: 4px;
  }

  body[data-page="universites"] .article-intro > div:first-child h2 {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .university-type-grid {
    grid-template-columns: 1fr;
  }

  .university-type-card {
    min-height: 0;
  }

  .article-console,
  .finder-layout,
  .ez-article-shell {
    gap: 14px;
  }

  body[data-page="actualites"] .finder-layout.reveal,
  body[data-page="universites"] .article-console.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  body[data-page="actualites"] .org-strip.reveal {
    opacity: 1;
    transform: none;
  }

  .filter-panel,
  .results-panel,
  .article-list-panel,
  .ez-article-card,
  .ez-side-box {
    padding: 16px;
  }

  .results-head {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .article-card,
  .news-card {
    grid-template-columns: 1fr;
    border-radius: 6px;
  }

  .article-card img,
  .news-card img {
    width: 100%;
    height: 180px;
    min-height: 0;
  }

  .article-card > div,
  .news-card > div {
    min-width: 0;
    padding: 14px;
  }

  .article-card h3,
  .news-card h3,
  .article-title-link {
    overflow-wrap: anywhere;
  }

  .article-card .article-meta-row,
  .news-card .card-overline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow-x: visible;
  }

  .article-card .detail-link,
  .news-card .detail-link {
    width: 100%;
    justify-content: center;
    margin: 10px 0 0;
    white-space: normal;
  }

  .org-strip {
    padding: 18px 16px;
  }

  .org-strip h2 {
    font-size: 24px;
    overflow-wrap: anywhere;
  }

  .org-strip p {
    font-size: 15px;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }

  .org-marquee {
    width: calc(100% - 20px);
    margin-bottom: 8px;
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .org-marquee-track {
    width: max-content;
    max-width: none;
    animation: none;
  }

  .org-card {
    width: min(300px, calc(100vw - 42px));
  }

  .ez-article-card h1 {
    font-size: 28px;
    overflow-wrap: anywhere;
  }

  .ez-article-image {
    height: 220px;
  }

  .ez-article-meta,
  .ez-tags {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ez-lead,
  .ez-rich-section p,
  .ez-article-body .article-paragraph {
    font-size: 16px;
    line-height: 1.75;
  }

  .ez-rich-section h2,
  .ez-article-body .article-body-section h2 {
    font-size: 24px;
    overflow-wrap: anywhere;
  }

  .ez-level-list,
  .offer-detail-groups {
    grid-template-columns: 1fr;
  }

  .requirements-modal {
    align-items: stretch;
    padding: 10px;
  }

  .requirements-modal-panel {
    width: 100%;
    max-height: calc(100dvh - 20px);
    padding: 18px 14px;
    border-radius: 8px;
  }

  .requirements-modal-panel h2 {
    font-size: 24px;
    overflow-wrap: anywhere;
  }

  .news-reader-image {
    max-height: 210px;
    border-radius: 8px;
  }

  .news-reader-lead,
  .news-reader-body {
    max-width: 100%;
  }
}

/* ==========================================================================
   Cartes de types d'universites (04/09/2026)
   La carte entiere est un lien vers la page de la categorie. Le contenu
   editorial d'origine (resume + disciplines) est conserve ; une ligne
   supplementaire annonce le nombre d'articles disponibles.
   ========================================================================== */
body[data-page="universites"] .university-type-count {
  margin-top: 4px;
  margin-bottom: 10px;
  color: #0b66ad;
  font-size: 13.5px;
  font-weight: 850;
}

body[data-page="universites"] .university-type-count:empty {
  display: none;
}

/* ==========================================================================
   Articles Exigences (04/09/2026) : encadre "L'essentiel", questions
   frequentes et sources officielles. Ces trois blocs structurent desormais
   tous les articles de la rubrique.
   ========================================================================== */
.ez-key-facts {
  margin: 18px 0 24px;
  padding: 16px 18px;
  border: 1px solid #d8e4f0;
  border-left: 4px solid #ef2f32;
  border-radius: 8px;
  background: #f6faff;
}

.ez-key-facts h2 {
  margin: 0 0 10px;
  color: #0d315c;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ez-key-facts ul {
  margin: 0;
  padding-left: 20px;
}

.ez-key-facts li {
  margin-bottom: 6px;
  color: #24384f;
  font-size: 14.5px;
  line-height: 1.55;
}

.ez-faq-item {
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 1px solid #e3ecf5;
  border-radius: 8px;
  background: #fbfdff;
}

.ez-faq-item summary {
  cursor: pointer;
  color: #0d315c;
  font-weight: 800;
  line-height: 1.4;
}

.ez-faq-item[open] summary {
  margin-bottom: 8px;
}

.ez-faq-item p {
  margin: 0 0 6px;
  color: #40506a;
  font-size: 14.5px;
  line-height: 1.6;
}

.ez-sources ul {
  padding-left: 20px;
}

.ez-sources li {
  margin-bottom: 6px;
  font-size: 14.5px;
}

.ez-sources a {
  color: #0b66ad;
}