/* =====================================================================
   Repères de couleurs et de style — identité de l'ARS
   Jaune ancre + bleu-encre + corail, sur fond crème « sable ».
   ===================================================================== */
:root {
  --jaune:       #F4B60A;
  --jaune-clair: #FBD24E;
  --encre:       #16293A;   /* texte, fond sombre, pied de page */
  --teal:        #0E7C7B;   /* liens, accent secondaire */
  --teal-fonce:  #0A5E5D;
  --corail:      #F0603A;   /* accent d'énergie, une des deux portes */
  --corail-fonce:#D74A26;
  --creme:       #FBF7EF;   /* fond de page */
  --sable:       #F1E7D5;   /* fond de section douce */
  --gris:        #5C5B57;   /* texte secondaire */
  --blanc:       #FFFFFF;
  --rayon:       14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--encre);
  background: var(--creme);
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.01em;
}

a { color: var(--teal-fonce); }
img { max-width: 100%; display: block; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-block;
  padding: 14px 26px;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--jaune  { background: var(--jaune); color: var(--encre); }
.btn--jaune:hover  { background: var(--jaune-clair); }
.btn--corail { background: var(--corail); color: var(--blanc); }
.btn--corail:hover { background: var(--corail-fonce); }
.btn--encre  { background: var(--encre); color: var(--blanc); }

/* =====================================================================
   EN-TÊTE ET NAVIGATION
   ===================================================================== */
.entete {
  background: var(--creme);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid rgba(22,41,58,0.08);
}
.entete__barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 18px; max-width: 1180px; margin: 0 auto;
}
.logo { text-decoration: none; color: var(--encre); line-height: 1; }
.logo__nom {
  display: block; font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 1.7rem; letter-spacing: -0.02em;
}
.logo__slogan { display: block; font-size: 0.72rem; color: var(--teal-fonce); font-weight: 500; }

.menu-toggle {
  display: inline-flex; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px;
}
.menu-toggle span { width: 26px; height: 3px; background: var(--encre); border-radius: 2px; }

.nav { display: none; width: 100%; }
.nav--ouvert { display: block; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav li { border-top: 1px solid rgba(22,41,58,0.08); }
.nav a {
  display: block; padding: 13px 4px; color: var(--encre);
  text-decoration: none; font-weight: 500;
}
.nav a:hover { color: var(--teal-fonce); }

.nav__outils { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.btn-connexion {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--encre); color: var(--blanc);
  padding: 9px 16px; border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: 0.9rem;
}
.langue select {
  padding: 8px 10px; border-radius: 999px;
  border: 1px solid rgba(22,41,58,0.2); font: inherit; background: var(--blanc);
}

/* =====================================================================
   HERO — photo + lavis chaleureux + vague signature
   ===================================================================== */
.hero { position: relative; background: var(--encre); }
.hero__media { position: relative; min-height: 460px; }
.hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.hero__lavis {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(22,41,58,0.15) 0%, rgba(22,41,58,0.75) 100%),
    linear-gradient(80deg, rgba(240,96,58,0.35) 0%, rgba(244,182,10,0.10) 60%, transparent 100%);
}
.hero__contenu {
  position: relative; max-width: 1180px; margin: 0 auto;
  padding: 90px 22px 120px; color: var(--blanc);
}
.hero__titre {
  margin: 0; font-size: 4rem; color: var(--blanc);
  text-shadow: 0 2px 20px rgba(0,0,0,0.25);
}
.hero__slogan {
  margin: 10px 0 26px; font-size: 1.35rem; font-weight: 500;
  max-width: 520px; text-shadow: 0 1px 10px rgba(0,0,0,0.3);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* la vague en bas du hero */
.hero__vague { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; display: block; }
.hero__vague svg { display: block; width: 100%; height: 60px; }

/* =====================================================================
   SECTIONS
   ===================================================================== */
.section { max-width: 1180px; margin: 0 auto; padding: 64px 22px; }
.section--sable { background: var(--sable); max-width: none; }
.section--sable > * { max-width: 1180px; margin-left: auto; margin-right: auto; }

.eyebrow {
  display: inline-block; font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600; font-size: 0.8rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--teal-fonce); margin: 0 0 10px;
}
.section-titre { font-size: 2rem; margin: 0 0 22px; }

/* Présentation */
.presentation__texte { font-size: 1.12rem; max-width: 680px; }
.chiffres { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0; }
.chiffre {
  flex: 1 1 130px; background: var(--blanc); border-radius: var(--rayon);
  padding: 20px; text-align: center; border: 1px solid rgba(22,41,58,0.06);
}
.chiffre__nombre {
  display: block; font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 2.4rem; font-weight: 800; color: var(--corail);
}
.chiffre__label { color: var(--gris); font-weight: 500; }

/* Deux portes */
.portes { display: grid; gap: 18px; }
.porte {
  display: block; text-decoration: none; color: var(--blanc);
  border-radius: 20px; padding: 34px 28px; position: relative; overflow: hidden;
  transition: transform .15s ease;
}
.porte:hover { transform: translateY(-4px); }
.porte--apprendre { background: var(--teal); }
.porte--enseigner { background: var(--corail); }
.porte__label {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 0.78rem;
  letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85;
}
.porte h3 { margin: 6px 0 8px; font-size: 1.55rem; color: var(--blanc); }
.porte p { margin: 0; opacity: 0.95; }
.porte__fleche { margin-top: 16px; font-size: 1.4rem; }

/* Événements */
.evenements__grille { display: grid; gap: 18px; margin-top: 8px; }
.evenement {
  background: var(--blanc); border-radius: var(--rayon); overflow: hidden;
  border: 1px solid rgba(22,41,58,0.06);
}
.evenement__image { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.evenement__corps { padding: 20px; }
.evenement__date {
  color: var(--teal-fonce); font-weight: 600; margin: 0 0 4px; font-size: 0.9rem;
}
.evenement__nom { margin: 0 0 8px; font-size: 1.2rem; }
.evenement__desc { margin: 0; color: var(--gris); }
.vide { color: var(--gris); font-style: italic; }

/* Formulaire de contact */
.formulaire { display: grid; gap: 15px; max-width: 560px; }
.formulaire label { display: grid; gap: 6px; font-weight: 500; }
.formulaire input, .formulaire textarea {
  padding: 13px; border: 1px solid rgba(22,41,58,0.2);
  border-radius: 10px; font: inherit; background: var(--blanc);
}
.formulaire input:focus, .formulaire textarea:focus {
  outline: 2px solid var(--jaune); border-color: var(--jaune);
}
.message-succes {
  background: #E7F4EC; border: 1px solid #A9D8BC; color: #1C6B3C;
  padding: 14px 18px; border-radius: 10px; margin-bottom: 18px;
}

/* =====================================================================
   PAGES INTERNES (apprendre / enseigner)
   ===================================================================== */
.page-hero { background: var(--teal); color: var(--blanc); }
.page-hero__contenu { max-width: 1180px; margin: 0 auto; padding: 60px 22px; }
.page-hero h1 { margin: 0 0 10px; font-size: 2.6rem; color: var(--blanc); }
.page-hero p { margin: 0; font-size: 1.15rem; max-width: 620px; opacity: 0.95; }

.banniere {
  position: relative; min-height: 260px;
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
}
.banniere::before { content: ""; position: absolute; inset: 0; background: rgba(22,41,58,0.45); }
.banniere h2 { position: relative; color: var(--blanc); font-size: 2.2rem; margin: 0; text-align: center; }

.cartes { display: grid; gap: 18px; }
.carte {
  background: var(--blanc); border-radius: var(--rayon); padding: 28px 24px;
  text-align: center; border: 1px solid rgba(22,41,58,0.06);
}
.carte__icone {
  width: 52px; height: 52px; margin: 0 auto 14px; color: var(--teal);
}
.carte h3 { margin: 0 0 8px; font-size: 1.18rem; }
.carte p { margin: 0; color: var(--gris); }

.etapes__liste { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 18px; max-width: 720px; }
.etapes__liste li { display: flex; gap: 16px; align-items: flex-start; }
.etapes__num {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: var(--corail); color: var(--blanc);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* =====================================================================
   PIED DE PAGE
   ===================================================================== */
.pied { background: var(--encre); color: #D5DEE5; }
.pied__grille { max-width: 1180px; margin: 0 auto; padding: 52px 22px; display: grid; gap: 30px; }
.pied__bloc h3 { color: var(--jaune); margin: 0 0 12px; font-size: 1.15rem; }
.pied__bloc p { margin: 0 0 8px; }
.pied a { color: #D5DEE5; }
.pied__liens { list-style: none; margin: 0; padding: 0; }
.pied__liens li { margin-bottom: 7px; }
.pied__copyright {
  text-align: center; padding: 18px; margin: 0;
  border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.85rem; color: #9FB0BC;
}

/* =====================================================================
   GRANDS ÉCRANS — à partir de 860px
   ===================================================================== */
@media (min-width: 860px) {
  .menu-toggle { display: none; }
  .nav { display: flex !important; align-items: center; justify-content: flex-end; gap: 26px; width: auto; }
  .nav > ul { display: flex; gap: 20px; align-items: center; }
  .nav li { border-top: none; }
  .nav a { padding: 6px 0; font-size: 0.92rem; }
  .nav__outils { padding: 0; }

  .hero__titre { font-size: 5.5rem; }
  .portes { grid-template-columns: 1fr 1fr; }
  .evenements__grille { grid-template-columns: repeat(3, 1fr); }
  .cartes { grid-template-columns: repeat(3, 1fr); }
  .pied__grille { grid-template-columns: repeat(3, 1fr); }
}

/* Accessibilité : on respecte la préférence « moins d'animations » */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .btn:hover, .porte:hover { transform: none; }
}

/* =====================================================================
   ESPACES PROTÉGÉS — tableaux de bord, formulaires, statistiques
   ===================================================================== */
.espace-hero { background: var(--encre); color: var(--blanc); }
.espace-hero__in { max-width: 1180px; margin: 0 auto; padding: 48px 22px; }
.espace-hero h1 { color: var(--blanc); margin: 0 0 6px; font-size: 2.2rem; }
.espace-hero p { margin: 0; opacity: 0.9; }

.tuiles { display: grid; gap: 16px; grid-template-columns: 1fr; }
.tuile {
  display: block; text-decoration: none; color: var(--encre);
  background: var(--blanc); border: 1px solid rgba(22,41,58,0.08);
  border-radius: 14px; padding: 20px 22px;
  transition: transform .12s ease, border-color .12s ease;
}
.tuile:hover { transform: translateY(-3px); border-color: var(--teal); }
.tuile__titre { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.1rem; margin: 0 0 4px; }
.tuile__desc { margin: 0; color: var(--gris); font-size: 0.92rem; }
.tuile--bientot { opacity: 0.62; }

/* Formulaire du plugin (saisie des heures) */
.ars-form { display: grid; gap: 15px; max-width: 620px; }
.ars-form label { display: grid; gap: 6px; font-weight: 500; }
.ars-form input, .ars-form select, .ars-form textarea {
  padding: 12px; border: 1px solid rgba(22,41,58,0.2);
  border-radius: 10px; font: inherit; background: var(--blanc);
}
.ars-form select[multiple] { min-height: 150px; }
.ars-form .aide { font-weight: 400; font-size: 0.85rem; color: var(--gris); }

/* Statistiques */
.ars-stat { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.ars-stat__carte { flex: 1 1 150px; background: var(--sable); border-radius: 14px; padding: 18px 20px; }
.ars-stat__nombre { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 2rem; color: var(--corail); }
.ars-stat__label { color: var(--gris); font-size: 0.9rem; }
.ars-table { width: 100%; border-collapse: collapse; margin: 12px 0 30px; }
.ars-table th, .ars-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(22,41,58,0.1); }
.ars-table th { font-family: 'Bricolage Grotesque', sans-serif; }

@media (min-width: 680px) { .tuiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .tuiles { grid-template-columns: 1fr 1fr 1fr; } }


/* =====================================================================
   NATIF v2 — hero avec photo, connexion, administration
   ===================================================================== */
.hero__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.nav__bonjour { font-size:0.9rem; color:var(--gris); margin-right:4px; }

/* Page de connexion */
.connexion-boite { max-width:420px; margin:60px auto; background:var(--blanc);
  border:1px solid rgba(22,41,58,0.08); border-radius:16px; padding:34px 30px; }
.connexion-boite h1 { margin:0 0 18px; font-size:1.7rem; }
.erreur { background:#FDECEA; border:1px solid #F5B9B2; color:#8C2318;
  padding:12px 16px; border-radius:10px; margin-bottom:16px; }

/* Administration */
.admin-nav { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 26px; }
.admin-nav a { text-decoration:none; background:var(--blanc); color:var(--encre);
  border:1px solid rgba(22,41,58,0.12); border-radius:999px; padding:9px 16px;
  font-weight:500; font-size:0.9rem; }
.admin-nav a:hover, .admin-nav a.actif { background:var(--encre); color:var(--blanc); }
.admin-form-ligne { display:flex; gap:10px; flex-wrap:wrap; align-items:end; }
.admin-form-ligne label { flex:1 1 160px; }
.badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:0.78rem; font-weight:600; }
.badge--ok { background:#E7F4EC; color:#1C6B3C; }
.badge--non { background:#FDECEA; color:#8C2318; }
.actions-table a { margin-right:10px; font-size:0.88rem; }

/* =====================================================================
   MODE ÉDITION / ADMINISTRATION (CA)
   ===================================================================== */
body.admin-logged-in {
  padding-top: 55px !important; /* Laisse la place pour la barre d'administration fixe */
}

.admin-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 55px;
  background-color: var(--encre);
  color: var(--blanc);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  z-index: 99999;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  font-family: 'Inter', system-ui, sans-serif;
}

.admin-bar__status {
  font-weight: 700;
  font-family: 'Bricolage Grotesque', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
}

.admin-bar__actions {
  display: flex;
  gap: 12px;
}

.btn-admin {
  background-color: var(--jaune);
  color: var(--encre);
  border: none;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.12s ease;
}

.btn-admin:hover {
  background-color: var(--jaune-clair);
  transform: translateY(-1px);
}

.btn-admin--deconnexion {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--blanc);
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  transition: background 0.15s ease;
}

.btn-admin--deconnexion:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--blanc);
}

/* Rendu visuel des textes modifiables */
.editable-content {
  outline: 1px dashed transparent;
  transition: outline 0.15s, background-color 0.15s;
  display: inline-block;
  cursor: text;
}

.editable-content:hover {
  outline: 1.5px dashed var(--corail);
  background-color: rgba(240, 96, 58, 0.08); /* Orange corail très transparent */
  border-radius: 4px;
}

.editable-content:focus {
  outline: 2px solid var(--jaune);
  background-color: rgba(244, 182, 10, 0.12); /* Jaune très transparent */
  border-radius: 4px;
}

/* =====================================================================
   ESPACE APPRENANTS — tableau des ressources (docapp)
   ===================================================================== */
.ressources-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 22px 70px;
}

.ressources-tableau-conteneur {
  background: var(--blanc);
  border: 1px solid rgba(22,41,58,0.08);
  border-radius: var(--rayon);
  overflow-x: auto;
  box-shadow: 0 2px 10px rgba(22,41,58,0.04);
}

.ressources-tableau {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}

.ressources-tableau thead th {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--encre);
  background: var(--sable);
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(22,41,58,0.1);
}

.ressources-tableau thead th:first-child {
  border-top-left-radius: var(--rayon);
}
.ressources-tableau thead th:last-child {
  border-top-right-radius: var(--rayon);
}

.ressources-tableau tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(22,41,58,0.07);
  color: var(--encre);
  font-size: 0.96rem;
  vertical-align: middle;
}

.ressources-tableau tbody tr:last-child td {
  border-bottom: none;
}

.ressources-tableau tbody tr:hover {
  background: rgba(14,124,123,0.05);
}

.ressources-tableau tbody td a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--teal);
  color: var(--blanc);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 8px 16px;
  border-radius: 999px;
  transition: background 0.15s ease, transform 0.12s ease;
}

.ressources-tableau tbody td a:hover {
  background: var(--teal-fonce);
  transform: translateY(-1px);
}

.ressources-vide {
  text-align: center;
  color: var(--gris);
  font-style: italic;
  padding: 30px 18px !important;
}

.ressources-tableau .badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.difficulte-facile     { background: #E7F4EC; color: #1C6B3C; }
.difficulte-moyen      { background: #FEF3D6; color: #92650A; }
.difficulte-difficile  { background: #FDECEA; color: #8C2318; }
.difficulte-defaut     { background: var(--sable); color: var(--gris); }

@media (max-width: 600px) {
  .ressources-tableau thead th,
  .ressources-tableau tbody td {
    padding: 11px 12px;
    font-size: 0.88rem;
  }
}

/* =====================================================================
   GESTION DES DOCUMENTS (CA) — tableau CRUD + popup d'ajout
   ===================================================================== */
.conteneur {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 22px 70px;
}

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 26px;
}

.entete h1 {
  margin: 0;
  font-size: 2rem;
}

.btn-ajouter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--corail);
  color: var(--blanc);
  border: none;
  padding: 12px 22px;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}

.btn-ajouter:hover {
  background: var(--corail-fonce);
  transform: translateY(-2px);
}

/* ---------- Tableau des documents ---------- */
.tableau-documents {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanc);
  border: 1px solid rgba(22,41,58,0.08);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(22,41,58,0.04);
}

.tableau-documents thead th {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--encre);
  background: var(--sable);
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(22,41,58,0.1);
}

.tableau-documents tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(22,41,58,0.07);
  color: var(--encre);
  font-size: 0.95rem;
  vertical-align: middle;
}

.tableau-documents tbody tr:last-child td {
  border-bottom: none;
}

.tableau-documents tbody tr:hover {
  background: rgba(14,124,123,0.05);
}

.aucune-ligne {
  text-align: center;
  color: var(--gris);
  font-style: italic;
  padding: 30px 18px !important;
}

/* Badges dans le tableau */
.tableau-documents .badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-theme {
  background: var(--sable);
  color: var(--encre);
}

/* Lien vers le document */
.lien-doc {
  color: var(--teal-fonce);
  font-size: 0.9rem;
  text-decoration: none;
  word-break: break-all;
}

.lien-doc:hover {
  text-decoration: underline;
}

/* Colonne d'action (poubelle) */
.colonne-action {
  text-align: right;
  white-space: nowrap;
}

.btn-poubelle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--corail);
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-poubelle:hover {
  background: rgba(240,96,58,0.1);
  color: var(--corail-fonce);
}

/* ---------- Popup d'ajout ---------- */
.fond-popup {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(22,41,58,0.55);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.fond-popup.actif {
  display: flex;
}

.popup {
  background: var(--blanc);
  border-radius: 16px;
  padding: 30px 28px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 10px 40px rgba(22,41,58,0.25);
}

.popup-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.popup-entete h2 {
  margin: 0;
  font-size: 1.4rem;
}

.fermer-popup {
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--gris);
  transition: color 0.15s ease;
}

.fermer-popup:hover {
  color: var(--encre);
}

.popup form {
  display: grid;
  gap: 14px;
}

.popup label {
  font-weight: 500;
  font-size: 0.9rem;
  display: block;
  margin-bottom: 4px;
}

.popup select,
.popup input {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(22,41,58,0.2);
  border-radius: 10px;
  font: inherit;
  background: var(--blanc);
}

.popup select:focus,
.popup input:focus {
  outline: 2px solid var(--jaune);
  border-color: var(--jaune);
}

.btn-valider {
  background: var(--jaune);
  color: var(--encre);
  border: none;
  padding: 13px 20px;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
  transition: background 0.15s ease, transform 0.12s ease;
}

.btn-valider:hover {
  background: var(--jaune-clair);
  transform: translateY(-2px);
}
/* =====================================================================
   COMPLÉMENTS ARS — à coller à la TOUTE FIN de assets/css/style.css
   (l'ordre compte : ce bloc doit venir après tout le reste)
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. CORRECTIF IMPORTANT — conflit sur .entete
   La section « GESTION DES DOCUMENTS (CA) » redéfinit .entete
   (display:flex ; margin-bottom:26px) et casse l'en-tête du site.
   On restaure l'en-tête réel via header.entete, plus spécifique.
   --------------------------------------------------------------------- */
header.entete {
  display: block;
  background: var(--creme);
  position: sticky;
  top: 0;
  z-index: 50;
  margin-bottom: 0;
  padding: 0;
  border-bottom: 1px solid rgba(22, 41, 58, 0.08);
}

/* ---------------------------------------------------------------------
   1. MENU — sur téléphone, affichage à plat comme sur ordinateur
   --------------------------------------------------------------------- */
@media (max-width: 859px) {
  .entete__barre {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
  }
  .logo { text-align: center; }

  /* plus de burger : le menu est toujours visible */
  .menu-toggle { display: none !important; }

  .nav {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 10px;
  }
  .nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    margin: 0;
    padding: 0;
  }
  .nav li { border-top: none !important; }
  .nav a {
    padding: 4px 6px;
    font-size: 0.9rem;
    font-weight: 600;
  }
  .nav__outils {
    padding: 0;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------
   2. TITRES ET BOUTONS CENTRÉS
   --------------------------------------------------------------------- */
.hero__contenu,
.hero__titre,
.hero__slogan,
.section-titre,
.eyebrow {
  text-align: center;
}
.hero__slogan {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.presentation__texte {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 1.08rem;
  line-height: 1.75;
}
.chiffres { justify-content: center; }
.presentation .btn--encre { display: block; width: fit-content; margin: 10px auto 0; }

/* ---------------------------------------------------------------------
   3. PRÉSENTATION & ORIENTATIONS — deux cartes
   --------------------------------------------------------------------- */
.grille-cartes {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
  margin-top: 24px;
  text-align: left;
}
@media (min-width: 860px) {
  .grille-cartes { grid-template-columns: 1fr 1fr; }
}

.bloc-carte {
  background: var(--blanc);
  padding: 34px 30px;
  border-radius: var(--rayon);
  box-shadow: 0 4px 18px rgba(22, 41, 58, 0.05);
  display: flex;
  flex-direction: column;
}
.bloc-carte--teal   { border-left: 6px solid var(--teal); }
.bloc-carte--corail { border-left: 6px solid var(--corail); }

.bloc-carte__titre {
  font-size: 1.45rem;
  margin: 0 0 6px;
  line-height: 1.25;
}
.bloc-carte--teal   .bloc-carte__titre { color: var(--teal); }
.bloc-carte--corail .bloc-carte__titre { color: var(--corail); }

.bloc-carte__chapo {
  color: var(--gris);
  margin: 0 0 16px;
  font-size: 0.98rem;
  line-height: 1.6;
}

.sous-titre-bloc {
  font-size: 0.82rem;
  font-weight: 700;
  margin: 24px 0 6px;
  color: var(--encre);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sous-titre-bloc:first-of-type { margin-top: 14px; }

.liste-stylee { list-style: none; padding: 0; margin: 0; }
.liste-stylee li {
  position: relative;
  padding: 11px 0 11px 24px;
  border-bottom: 1px solid rgba(22, 41, 58, 0.06);
  font-size: 0.98rem;
  color: var(--gris);
  line-height: 1.5;
}
.liste-stylee li:last-child { border-bottom: none; }
.liste-stylee li::before {
  content: "•";
  color: var(--teal);
  font-weight: 700;
  font-size: 1.4rem;
  position: absolute;
  left: 2px;
  top: 6px;
}

.liste-numerotee { list-style: none; padding: 0; margin: 0; }
.liste-numerotee li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(22, 41, 58, 0.06);
  font-size: 0.98rem;
  color: var(--gris);
  line-height: 1.5;
}
.liste-numerotee li:last-child { border-bottom: none; }
.badge-num {
  background: var(--corail);
  color: var(--blanc);
  font-weight: 700;
  font-size: 0.85rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.encadre-accent {
  background: var(--sable);
  padding: 14px 18px;
  border-radius: 10px;
  margin-top: auto;      /* colle l'encadré en bas de la carte */
  font-weight: 600;
  color: var(--encre);
  text-align: center;
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------------
   4. CONTACT — formulaire seul, centré
   --------------------------------------------------------------------- */
.formulaire { margin-left: auto; margin-right: auto; text-align: left; }
.formulaire .btn { width: 100%; text-align: center; justify-content: center; }
.message-succes { text-align: center; }
.vide { text-align: center; color: var(--gris); }

@media (max-width: 600px) {
  .tableau-documents thead th,
  .tableau-documents tbody td {
    padding: 11px 12px;
    font-size: 0.85rem;
  }
  .lien-doc {
    max-width: 140px;
    display: inline-block;
  }
}
/* =================================================================
   BLOCAGE DÉFINITIF DE LA BARRE GOOGLE TRANSLATE
   ================================================================= */

/* 1. Masquer les balises et iframes injected par Google (anciennes + nouvelles classes) */
.VIpgJd-yD0fbe-Sm3ne-Jh928d,
.goog-te-banner-frame,
iframe.goog-te-banner-frame,
.goog-te-banner,
iframe.skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
}

/* 2. Annuler le décalage (top et margin) imposé au body */
body {
  top: 0px !important;
  margin-top: 0px !important;
  position: static !important;
}

/* 3. Masquer le surlignage des mots au survol */
.goog-text-highlight {
  background-color: transparent !important;
  box-shadow: none !important;
}
/* =================================================================
   DESIGN DU BOUTON DE LANGUE (REVISED)
   ================================================================= */
.langue-dropdown {
  position: relative;
  display: inline-block;
}

.langue-btn {
  background: #ffffff;
  border: 1.5px solid rgba(22, 41, 58, 0.15);
  border-radius: 20px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease-in-out;
  height: 38px; /* Hauteur fixe et harmonieuse */
}

.langue-btn:hover {
  border-color: var(--teal, #0F6E56);
  background-color: #F5FAF8;
  transform: translateY(-1px);
}

/* Drapeau dans le bouton */
.langue-btn img {
  width: 22px;
  height: 15px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); /* Bordure fine pour faire ressortir le blanc */
  display: block;
}

/* Texte de la langue (FR, EN, etc.) */
.langue-code {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--encre, #16293A);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Flèche chevron */
.langue-chevron {
  width: 12px;
  height: 12px;
  stroke: var(--encre, #16293A);
  transition: transform 0.2s ease;
}

/* Rotation de la flèche quand le menu est ouvert */
.langue-dropdown.open .langue-chevron {
  transform: rotate(180deg);
}

/* --- Menu déroulant --- */
/* Conteneur du bouton de langue */

/* Le menu déroulant */
.langue-menu {
  display: none;                      /* CACHÉ PAR DÉFAUT pour pouvoir le fermer */
  position: absolute;                 /* FLOTTE par-dessus la page sans agrandir le header */
  top: calc(100% + 8px);              /* S'affiche juste sous le bouton avec un petit espace */
  right: 0;                           /* Aligné à droite du bouton */
  z-index: 1000;                      /* Passe au-dessus de tout le reste du site */
  
  background-color: #ffffff;          /* Fond blanc pour bien détacher du site */
  border: 1px solid rgba(0,0,0,0.1);  /* Petite bordure discrète */
  border-radius: 12px;                /* Coins arrondis */
  box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Ombre portée élégante */
  padding: 8px;
  min-width: 190px;                   /* Largeur minimale propre */
  
  max-height: 60vh;                   /* Hauteur max : 60% de l'écran */
  overflow-y: auto;                   /* Active le défilement vertical */
  -webkit-overflow-scrolling: touch;
}

/* Affichage du menu lors du clic */
.langue-menu.open {
  display: block;                     /* S'affiche uniquement avec la classe .open */
}

/* Style des boutons dans le menu */
.langue-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--encre, #16293A);
  cursor: pointer;
  border-radius: 8px;
  text-align: left;
  transition: background 0.15s ease;
}

.langue-menu button img {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.langue-menu button:hover {
  background-color: #F5FAF8;
  color: var(--teal, #0F6E56);
}

/* Barre de défilement fine */
.langue-menu::-webkit-scrollbar {
  width: 6px;
}
.langue-menu::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}
/* =================================================================
   BLOC UTILISATEUR & BOUTON (SUR 2 LIGNES, SANS DÉBORDEMENT)
   ================================================================= */

/* 1. Conteneur principal calé à droite avec des espaces réduits */
.nav .nav__outils,
.nav__outils {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
  padding: 0 !important;
}

/* 2. "Bonjour" sur la ligne 1, "Administrateur" sur la ligne 2 */
.nav__bonjour {
  font-size: 0.8rem !important;
  color: var(--encre, #16293A) !important;
  line-height: 1.15 !important;
  text-align: right !important; /* Aligné proprement vers le bouton */
  white-space: normal !important;
}

.nav__bonjour strong {
  display: block !important; /* Force le prénom sur la 2ème ligne */
  font-weight: 700 !important;
}

/* 3. Bouton déconnexion légèrement plus compact */
.nav a.btn-connexion,
a.btn-connexion {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  
  padding: 6px 13px !important; /* Padding réduit pour économiser l'espace */
  border-radius: 20px !important;
  height: 34px !important;
  width: auto !important;
  
  background-color: #16293A !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 2px 5px rgba(22, 41, 58, 0.12) !important;
  
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  
  transition: all 0.2s ease-in-out !important;
}

/* Couleur du texte et icône */
.btn-connexion *,
.btn-connexion span,
.btn-connexion font {
  color: #ffffff !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

.btn-connexion svg {
  stroke: #ffffff !important;
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
}

/* Effet au survol */
.btn-connexion:hover {
  background-color: var(--teal, #0E7C7B) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(14, 124, 123, 0.25) !important;
}
/* =================================================================
   ÉLARGISSEMENT DU HEADER & CORRECTION DU MENU (SANS TRIPLE LIGNE)
   ================================================================= */

/* 1. Étendre le conteneur du header sur toute la largeur disponible */
.header,
.header .container,
.nav,
.nav__container,
header .container {
  max-width: 96% !important; /* Utilise quasi tout l'écran au lieu d'être compressé */
  width: 100% !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* 2. Donner plus d'espace aux liens du menu */
.nav ul,
.nav__menu {
  gap: 16px !important; /* Espacement équilibré entre chaque rubrique */
}

/* 3. Empêcher le texte de se casser sur 3 lignes */
.nav a,
.nav ul li a {
  font-size: 0.88rem !important;
  line-height: 1.25 !important;
  text-align: center !important;
  /* S'assure qu'un mot comme "Enseigner" ou "français" ne se coupe pas */
  hyphens: none !important; 
}

/* 4. Fix spécifique pour rééquilibrer le bloc Bonjour / Déconnexion */
.nav .nav__outils,
.nav__outils {
  margin-left: auto !important; /* Continue de pousser le bloc à droite */
  gap: 12px !important;
}
/* ==========================================================================
   ÉDITEUR EN LIGNE — BARRE ET BLOCS DYNAMIQUES
   ========================================================================== */

/* Barre d'outils flottante en bas à droite (état par défaut : transparent) */
#admin-toolbar {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 8px;
  /* Annulation du fond sombre au repos */
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  transition: all 0.3s ease;
}

/* Apparence de la barre uniquement lorsque le mode édition est actif */
.mode-edition-actif #admin-toolbar {
  background: rgba(22, 41, 58, 0.95);
  backdrop-filter: blur(8px);
  padding: 8px 14px;
  border-radius: 50px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Style des boutons de la barre principale */
.btn-toolbar {
  border: none;
  padding: 10px 18px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
}

.btn-toolbar--edit { background: #0E7C7B; }
.btn-toolbar--edit.active { background: #5C5B57; }
.btn-toolbar--title { background: #6b21a8; }
.btn-toolbar--add { background: #1976D2; }
.btn-toolbar--add-img { background: #0288D1; }
.btn-toolbar--save { background: #2e7d32; }

.btn-toolbar:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

/* Message de statut */
#editor-status {
  font-size: 0.85rem;
  font-weight: bold;
  color: #ffffff;
}

#editor-status:not(:empty) {
  background: #101827;
  padding: 6px 12px;
  border-radius: 20px;
}

/* Blocs éditables dynamiques */
.bloc-dynamique {
  position: relative;
  margin: 15px 0;
}

.mode-edition-actif .bloc-dynamique {
  outline: 2px dashed #1976D2;
  outline-offset: 6px;
  padding: 8px;
  border-radius: 6px;
}

/* Barre de contrôle au-dessus de chaque bloc en mode édition */
.bloc-controls {
  display: none;
  position: absolute;
  top: -16px;
  right: 10px;
  background: #16293A;
  border-radius: 20px;
  padding: 2px 6px;
  gap: 4px;
  z-index: 20;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.mode-edition-actif .bloc-controls {
  display: flex;
  align-items: center;
}

.btn-ctrl-bloc {
  background: transparent;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.2s;
}

.btn-ctrl-bloc:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn-ctrl-bloc--delete:hover {
  background: #d32f2f;
}
/* =================================================================
     1. NAVIGATION RESPONSIVE (Différenciée Téléphone / Ordinateur)
     ================================================================= */

  /* --- MODE TÉLÉPHONE (< 860px) --- */
  @media (max-width: 859px) {
    .entete__barre {
      flex-direction: column;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
    }
    .menu-toggle {
      display: none !important; /* On cache l'icône burger */
    }
    .nav {
      display: flex !important;
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: 10px;
    }
    .nav ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px 14px;
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .nav li { border: none !important; }
    .nav a {
      padding: 4px 6px;
      font-size: 0.9rem;
      font-weight: 600;
    }
    .nav__outils {
      padding: 0;
      justify-content: center;
    }
  }

  /* --- MODE ORDINATEUR (≥ 860px) --- */
  @media (min-width: 860px) {
    .entete__barre {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 14px 24px;
    }
    .menu-toggle {
      display: none !important;
    }
    .nav {
      display: flex !important;
      flex-direction: row !important;
      align-items: center;
      gap: 24px;
      width: auto;
    }
    .nav ul {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 22px;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .nav li { border: none !important; }
    .nav a {
      padding: 6px 0;
      font-size: 0.95rem;
      font-weight: 500;
    }
    .nav__outils {
      padding: 0;
      margin-left: 10px;
    }
  }

  /* =================================================================
     2. TITRES ET BOUTONS CENTRÉS
     ================================================================= */
  .hero__contenu, .section-titre, .eyebrow {
    text-align: center;
  }
  .hero__titre, .hero__slogan {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .hero__actions {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }

  /* =================================================================
     3. PRÉSENTATION & ORIENTATIONS (1 col sur mobile, 2 cols sur ordi)
     ================================================================= */
  .texte-brut {
    max-width: 840px;
    margin: 0 auto 35px auto;
    text-align: center;
  }
  .texte-brut p {
    margin-bottom: 1.2rem;
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--encre);
  }

  /* Grille des deux cartes */
  .grille-cartes {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;   /* Mobile : 1 seule colonne */
    margin-top: 20px;
    text-align: left;
  }
  @media (min-width: 860px) {
    .grille-cartes { grid-template-columns: 1fr 1fr; }
  }

  .bloc {
    background: var(--blanc);
    border-radius: 16px;
    padding: 30px 28px;
    box-shadow: 0 4px 18px rgba(22,41,58,0.05);
    display: flex;
    flex-direction: column;
  }

  /* En-tête de carte : pastille numéro + surtitre */
  .bloc__kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
  }
  .bloc__num {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 999px;
  }
  .bloc__surtitre {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .bloc__titre {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--encre);
    margin: 0 0 18px;
    line-height: 1.25;
  }
  .bloc__chapo {
    font-size: 0.98rem;
    color: var(--gris);
    line-height: 1.6;
    margin: 0 0 22px;
  }

  /* Variante teal */
  .bloc--teal .bloc__num      { background: #E1F5EE; color: #0F6E56; }
  .bloc--teal .bloc__surtitre { color: var(--teal-fonce); }
  /* Variante corail */
  .bloc--corail .bloc__num      { background: #FAECE7; color: #993C1D; }
  .bloc--corail .bloc__surtitre { color: var(--corail); }

  .bloc__label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gris);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }

  /* Mission : lignes avec pictogramme */
  .mission { display: flex; flex-direction: column; gap: 9px; margin-bottom: 26px; }
  .mission__item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #F5FAF8;
    border-radius: 10px;
    padding: 13px 15px;
  }
  .mission__item svg { flex-shrink: 0; color: var(--teal); margin-top: 1px; }
  .mission__item span { font-size: 0.97rem; color: var(--encre); line-height: 1.5; }

  /* Valeurs : étiquettes */
  .valeurs { display: flex; flex-wrap: wrap; gap: 8px; }
  .valeurs span {
    background: #E1F5EE;
    color: #0F6E56;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 15px;
    border-radius: 999px;
  }

  /* Orientations : liste numérotée */
  .orientations { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }
  .orientations__item { display: flex; gap: 14px; align-items: flex-start; }
  .orientations__num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--corail);
    color: var(--blanc);
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .orientations__item span:last-child { font-size: 0.97rem; color: var(--encre); line-height: 1.5; }

  .encadre-accent {
    margin-top: auto;
    background: #FAECE7;
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .encadre-accent svg { flex-shrink: 0; color: #993C1D; }
  .encadre-accent span { font-size: 0.97rem; font-weight: 600; color: #993C1D; line-height: 1.5; }

  /* =================================================================
     4. CONTACT CENTRÉ ET AGENDA
     ================================================================= */
  .formulaire-conteneur {
    max-width: 580px;
    margin: 0 auto;
    text-align: left;
  }

  /* --- AGENDA : bandeau d'une autre couleur (teal) --- */
  .section--agenda {
    background: #EAF4F3;
    border-top: 1px solid rgba(22,41,58,0.05);
    border-bottom: 1px solid rgba(22,41,58,0.05);
  }
  .section--agenda .eyebrow { color: var(--teal-fonce); }

  .evenements-grille {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    margin-top: 25px;
    text-align: left;
  }

  @media (min-width: 600px) {
    .evenements-grille { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 900px) {
    .evenements-grille { grid-template-columns: repeat(3, 1fr); }
  }

  .evenement-carte {
    background: var(--blanc);
    padding: 22px;
    border-radius: var(--rayon);
    border: 1px solid rgba(22,41,58,0.08);
    border-top: 4px solid var(--teal);
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  }
  .evenement-date {
    display: inline-block;
    background: var(--teal);
    color: var(--blanc);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 10px;
  }
  .agenda-vide {
    text-align: center;
    color: var(--gris);
    margin: 10px 0 0;
  }

.pdf-page {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px;
}


.pdf-conteneur {
  flex: 0 0 auto;
  height: 82vh;
  min-height: 480px;
  border: 1px solid rgba(22, 41, 58, 0.1);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(22, 41, 58, 0.06);
}
.pdf-conteneur embed,
.pdf-conteneur iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
/* Adaptation de la barre d'édition pour smartphone */
@media (max-width: 600px) {
  /* Recadrer la barre pour qu'elle reste dans l'écran */
  #admin-toolbar {
    right: 12px !important;
    left: 12px !important;
    bottom: 12px !important;
    justify-content: flex-end;
  }

  /* Quand le mode édition est actif : passage en grille/multi-lignes centré */
  .mode-edition-actif #admin-toolbar {
    flex-wrap: wrap !important;
    justify-content: center !important;
    border-radius: 20px !important; /* Arrondi ajusté pour un bloc multi-lignes */
    padding: 10px !important;
    max-width: calc(100vw - 24px) !important;
  }

  /* Réduction légère de la taille des boutons sur mobile */
  .btn-toolbar {
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
  }
}
/* ==========================================
   MENU RESPONSIVE HAMBURGER (MOBILE)
   ========================================== */

/* Sur ordinateur : le bouton hamburger est masqué */
.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 3px;
  background-color: var(--encre, #16293A);
  border-radius: 3px;
  transition: all 0.3s ease;
}

/* ==========================================
   STYLE HEADER & ACTIONS
   ========================================== */
.entete__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ==========================================
   MENU RESPONSIVE MOBILES ET TABLETTES
   ========================================== */
@media (max-width: 768px) {
  /* Conteneur principal : 1 seule ligne horizontale sans chevauchement */
  .entete__barre {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    position: relative;
  }

  /* 1. LOGO À GAUCHE (Nom + Slogan en dessous) */
  .logo {
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    flex-shrink: 1 !important;
    min-width: 0 !important; /* Évite les débordements flex */
  }

  .logo__nom {
    font-size: 1.25rem !important;
    line-height: 1 !important;
  }

  /* Réintégration propre du slogan sous le nom */
  .logo__slogan {
    display: block !important;
    font-size: 0.65rem !important;
    line-height: 1.2 !important;
    color: #64748B;
    margin-top: 3px;
    white-space: normal;
  }

  /* 2. BOUTON LANGUE À LA SUITE */
  #langue-dropdown {
    order: 2 !important;
    flex-shrink: 0 !important; /* Garde sa largeur exacte */
    margin-left: auto !important; /* Colle la langue et le burger vers la droite */
  }

  /* 3. BOUTON MENU BURGER À LA SUITE */
  .menu-toggle {
    order: 3 !important;
    display: flex !important;
    flex-shrink: 0 !important; /* Garde sa largeur exacte */
  }

  /* 4. MENU DÉROULANT (S'ouvre sous la barre) */
  #navigation {
    order: 4 !important;
    display: none !important;
    position: absolute;
    top: 100%;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important; /* Couvre 100% de l'écran */
    max-width: 100vw !important;
    margin: 0 !important;
    background-color: #ffffff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
    padding: 20px !important;
    box-sizing: border-box !important;
    z-index: 9999;
    border-top: 1px solid #E5E7EB;
    text-align: center;
  }

  #navigation.nav--ouvert {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Liens du menu déroulé */
  #navigation ul {
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  #navigation ul li a {
    display: block;
    padding: 14px 8px;
    font-size: 1.05rem;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid #F3F4F6;
    color: #1E293B;
  }

  /* Bloc utilisateur / Déconnexion */
  #navigation .nav__outils {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-top: 16px !important;
    padding: 12px 16px !important;
    background-color: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    box-sizing: border-box !important;
  }

  .nav__user-info {
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  .nav__user-info .nav__bonjour {
    font-size: 0.8rem;
    color: #64748B;
    text-transform: uppercase;
  }

  .nav__user-info strong {
    font-size: 1rem;
    color: #0F172A;
  }

  #navigation .btn-connexion {
    margin: 0 !important;
    padding: 8px 14px !important;
    font-size: 0.88rem !important;
    white-space: nowrap;
  }
}