/* ==========================================================================
   OSETHOS — Composants transverses
   ========================================================================== */

/* --- Bandeau cookies (section 6.1) -------------------------------------- */
#cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  max-width: 620px;
  margin: 0 auto;
  background: var(--blanc);
  border: 1px solid #E4E4E4;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.16);
  padding: 1.5rem;
  z-index: var(--z-cookie);
  display: none;
}
#cookie-banner.visible { display: block; animation: cookie-in 320ms ease; }
@keyframes cookie-in { from { opacity: 0; transform: translateY(12px);} to { opacity:1; transform: translateY(0);} }
#cookie-banner p { font-size: 0.85rem; color: var(--texte-secondaire); margin-bottom: 1rem; text-align: left; }
#cookie-banner p a { text-decoration: underline; color: var(--texte); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.cookie-refuser {
  background: none; border: none; text-decoration: underline; cursor: pointer;
  font-size: 0.85rem; color: var(--texte-secondaire); padding: 0.5rem 0;
}

/* --- Modale Newsletter / Actualité (section 6.2) ------------------------ */
.modale-overlay {
  position: fixed; inset: 0; background: rgba(20,18,14,0.55);
  backdrop-filter: blur(3px);
  z-index: var(--z-modale);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.modale-overlay.visible { display: flex; }
.modale-carte {
  background: var(--blanc-casse);
  border-radius: 16px;
  max-width: 920px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2.5rem;
  position: relative;
}
.modale-fermer {
  position: absolute; top: 1rem; right: 1.2rem;
  background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--texte-secondaire);
}
.modale-blocs { display: flex; gap: 2.5rem; }
.modale-bloc { flex: 1; }
.modale-bloc h3 { font-family: var(--police-hero); font-size: 1.4rem; margin-bottom: 0.3rem; }
.modale-bloc .sous-titre { color: var(--texte-secondaire); font-size: 0.85rem; margin-bottom: 1.2rem; text-align: left; }
.champ { margin-bottom: 0.9rem; }
.champ label { display: block; font-size: 0.82rem; margin-bottom: 0.3rem; color: var(--texte-secondaire); }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 0.65rem 0.85rem; border: 1px solid #D8D5CE; border-radius: 8px;
  font-family: var(--police-corps); font-size: 0.95rem; background: var(--blanc);
}
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--or); }
.modale-bloc .btn { margin-top: 0.4rem; }
.modale-separateur { width: 1px; background: #E2DFD6; }
@media (max-width: 720px) {
  .modale-blocs { flex-direction: column; }
  .modale-separateur { display: none; height: 1px; width: 100%; }
}

/* --- Cartouche "Donner" (section 6.3, agrandie, 2 boutons) --------------- */
.cartouche-donner {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  background: linear-gradient(160deg, #FFFFFF, #F4F1EA);
  border: 1px solid #E4E0D2;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.14);
  padding: 1.6rem;
  width: 360px;
  z-index: var(--z-cartouche);
  display: none;
  flex-direction: column;
  gap: 0.9rem;
}
.cartouche-donner.ouvert { display: flex; }
.cartouche-donner-btn { display: block; width: 100%; text-align: center; line-height: 1.5; padding: 0.9rem 1rem; }
.cartouche-donner-btn span { display: block; font-size: 0.72rem; font-weight: 400; opacity: 0.85; margin-top: 0.15rem; }

/* --- Motif Contact/E-mail réutilisable ----------------------------------- */
.bloc-contact-email { margin-top: 1rem; }

/* --- Cartes piliers (page La Bascule, section 8.2) ---------------------- */
.piliers-grille {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 0 4%;
}
.pilier-carte {
  flex: 0 1 30%;
  background: var(--carte-bg);
  border-radius: var(--radius-carte);
  padding: 2rem 1.6rem;
}
.pilier-carte .eyebrow { display: block; margin-bottom: 0.4rem; }
.pilier-carte h3 { font-family: var(--police-corps); font-weight: 700; color: var(--texte); font-size: 1.15rem; margin-bottom: 0.2rem; }
.pilier-carte .sous-titre-pilier { font-style: italic; color: var(--texte-secondaire-2); font-size: 0.85rem; margin-bottom: 1rem; }
.pilier-carte p { font-size: 0.92rem; color: var(--texte); }
.pilier-carte .note-fixe { font-size: 0.72rem; color: var(--texte-tertiaire); margin-top: 0.8rem; text-align: left; }
@media (max-width: 860px) {
  .piliers-grille { flex-direction: column; margin: 0; align-items: center; }
  .pilier-carte { flex: 1 1 auto; width: 100%; max-width: 460px; }
}

/* --- Cases grises 3 colonnes (Transmettre / Mentorer) -------------------- */
.cases-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin: 1.8rem 0;
}
.case-grise {
  background: var(--carte-bg);
  border-radius: var(--radius-carte);
  padding: 1.4rem;
  text-align: center;
  font-size: 0.92rem;
}
.case-marron {
  background: var(--marron);
  color: var(--blanc);
  border-radius: var(--radius-carte);
  padding: 1.6rem;
}
.case-marron .eyebrow-clair { font-family: var(--police-impact); font-size: 0.85rem; letter-spacing: 0.08em; color: #E9C97A; text-transform: uppercase; display: block; margin-bottom: 0.6rem; }
.case-marron p { color: #F1EFE9; font-size: 0.9rem; }
@media (max-width: 860px) { .cases-3col { grid-template-columns: 1fr; } }

/* --- Bandeau KPI (section 8.4) ------------------------------------------ */
.bandeau-kpi {
  background: var(--marron);
  color: var(--blanc);
  padding: 2.4rem 2rem;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 2.5rem 3.5rem;
  text-align: center;
}
@media (max-width: 640px) {
  .bandeau-kpi { flex-direction: column; align-items: center; gap: 2.2rem; padding: 2rem 1.5rem; }
}
.kpi-item .kpi-valeur { font-family: var(--police-impact); font-weight: 800; font-size: 2.2rem; color: #E9C97A; }
.kpi-item .kpi-legende { font-size: 0.85rem; color: #EDEBE4; margin-top: 0.2rem; }

/* --- Bandeau infos pratiques (refonte claire, section 8.4 pt.7) ---------- */
.infos-pratiques-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.infos-pratiques-case { background: var(--gris-tres-clair); border-radius: var(--radius-carte); padding: 1.4rem; text-align: left; }
.infos-pratiques-case .eyebrow-clair { font-family: var(--police-hero); font-size: 1.05rem; letter-spacing: 0.04em; color: var(--or); text-transform: uppercase; }
.infos-pratiques-case p { color: var(--texte); margin: 0.5rem 0 0; font-size: 0.95rem; }
.infos-pratiques-case .detail { font-size: 0.82rem; font-style: italic; color: var(--texte-secondaire); margin-top: 0.4rem; line-height: 1.5; }
@media (max-width: 860px) { .infos-pratiques-grille { grid-template-columns: 1fr; } }

/* --- Carrousel photo (promotions) ---------------------------------------- */
.carrousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-carte);
  aspect-ratio: 4/3;
  background: #ddd;
}
.carrousel-piste { display: flex; height: 100%; transition: transform 900ms ease; }
.carrousel-slide { flex: 0 0 100%; height: 100%; }
.carrousel-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* --- Onglets promotion (La Bascule) --------------------------------------- */
.onglets-promotion {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: var(--espace-md);
  border-bottom: 1px solid #E2E2E2;
}
.onglet-promotion {
  font-family: var(--police-nav);
  background: none;
  border: none;
  padding: 0.7rem 1.2rem;
  cursor: pointer;
  white-space: nowrap;
  color: var(--texte-secondaire);
  border-bottom: 2px solid transparent;
}
.onglet-promotion.actif { color: var(--or); border-bottom-color: var(--or); font-weight: 700; }

/* --- Bandeau photo bascule (hauteur ~45% écran) --------------------------- */
.bandeau-photo-jeunes { width: 100%; height: 45vh; min-height: 260px; object-fit: cover; border-radius: var(--radius-carte); margin-bottom: var(--espace-md); }

/* --- Cartouche parrain/marraine ------------------------------------------- */
.cartouche-parrain { display: flex; align-items: center; gap: 1.2rem; background: var(--gris-tres-clair); border-radius: var(--radius-carte); padding: 1.2rem 1.6rem; margin: var(--espace-md) 0; }
.cartouche-parrain img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cartouche-parrain .label { color: var(--or); font-family: var(--police-impact); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.cartouche-parrain .nom { font-weight: 700; margin: 0.15rem 0; }
.cartouche-parrain .fonction { font-size: 0.85rem; color: var(--texte-secondaire); text-align: left; }

/* --- Profils "Qui sommes-nous" -------------------------------------------- */
.profil-membre { display: flex; gap: 2rem; margin-bottom: var(--espace-lg); align-items: flex-start; }
.profil-photo { flex: 0 0 40%; }
.profil-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-carte); }
.profil-texte { flex: 0 0 60%; }
.profil-texte h3 { font-family: var(--police-corps); font-weight: 700; color: var(--texte); font-size: 1.2rem; margin-bottom: 0.6rem; }
.profil-lire-suite { background: none; border: none; text-decoration: underline; color: var(--or); cursor: pointer; font-weight: 600; margin-top: 0.4rem; }
.profil-texte .bio-complete { display: none; }
.profil-texte.ouvert .bio-complete { display: block; }
.profil-texte.ouvert .profil-lire-suite { display: none; }
@media (max-width: 640px) {
  .profil-membre { flex-direction: column; align-items: center; text-align: center; }
  .profil-photo { flex: 0 0 auto; width: 70%; }
}

/* --- État vide / en maintenance -------------------------------------------- */
.etat-vide, .en-maintenance {
  border: 1px dashed #C9C4B6;
  border-radius: var(--radius-carte);
  padding: 2rem;
  text-align: center;
  color: var(--texte-secondaire);
  background: #FAF9F6;
}
.en-maintenance::before { content: "* "; color: var(--or); font-weight: 700; }

/* --- Photos plein écran avec overlay (hero, tunnel) ------------------------ */
.photo-plein-ecran {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  color: var(--blanc);
  text-align: center;
  overflow: hidden;
}
.photo-plein-ecran::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--overlay-sombre);
  opacity: 0.55;
}
.photo-plein-ecran.noir-et-blanc { filter: grayscale(1); }
.photo-plein-ecran .contenu-hero { position: relative; z-index: 1; padding: 2rem; max-width: 780px; }
.photo-plein-ecran .contenu-hero h1 {
  font-size: var(--fs-hero-titre);
  font-weight: 700;
  color: var(--or);
  margin-bottom: 1.4rem;
  text-align: center;
}
.photo-plein-ecran .contenu-hero p { color: var(--blanc); text-align: center; font-size: 1.05rem; }

/* --- Écrans tunnel plein écran (section 13) -------------------------------- */
.ecran-tunnel {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: hidden;
  filter: grayscale(1);
}
.ecran-tunnel::before { content:''; position:absolute; inset:0; background: var(--overlay-sombre); opacity: 0.6; }
.ecran-tunnel .contenu { position: relative; z-index: 1; text-align: center; color: var(--blanc); padding: 2rem; }
.ecran-tunnel .titre-tunnel { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: calc(var(--fs-tunnel-titre) + 0.6rem); color: var(--or); margin-bottom: 0.8rem; text-align: center; }
.ecran-tunnel .sous-titre-tunnel { font-size: 1.3rem; text-align: center; }
.ecran-tunnel .etapes-liste { text-align: center; max-width: 640px; margin: 0 auto; }
.ecran-tunnel .etape-bloc { margin-bottom: 1.8rem; }
.ecran-tunnel .etape-bloc h3 { font-family: 'Montserrat', sans-serif; font-weight: 600; color: var(--or); font-size: 2.1rem; margin-bottom: 0.5rem; text-align: center; }
.ecran-tunnel .etape-bloc p { color: var(--blanc); text-align: center; font-size: 1.1rem; }
.ecran-tunnel .separateur { width: 60px; height: 2px; background: var(--or); margin: 0 auto 1.8rem; }

/* --- Formulaire de candidature (section 13.4) ------------------------------ */
.tunnel-formulaire { display: flex; min-height: 100vh; }
.tunnel-colonne-fixe {
  flex: 0 0 34%;
  position: sticky;
  top: 0;
  height: 100vh;
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
  color: var(--blanc);
  padding: 3rem 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tunnel-colonne-fixe::before { content:''; position:absolute; inset:0; background: var(--overlay-sombre); opacity: 0.6; }
.tunnel-colonne-fixe > * { position: relative; z-index: 1; }
.tunnel-colonne-fixe .logo-mini { width: 48px; margin-bottom: 0.8rem; filter: invert(1) grayscale(1) brightness(2); }
.tunnel-colonne-fixe h2 { color: var(--or); font-size: 1.2rem; margin-bottom: 0.3rem; }
.tunnel-colonne-fixe > p.intro { color: var(--blanc); text-align: left; font-size: 0.9rem; margin-bottom: 1.5rem; }
.tunnel-etape-resume { display: flex; gap: 1rem; margin-bottom: 1.4rem; position: relative; }
.tunnel-etape-resume .num {
  flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--or); color: var(--or);
  display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700;
}
.tunnel-etape-resume h4 { color: var(--or); margin: 0 0 0.2rem; font-size: 0.95rem; font-family: var(--police-corps); font-weight: 700; }
.tunnel-etape-resume p { font-size: 0.82rem; color: #EDEBE4; text-align: left; margin: 0; }

.tunnel-colonne-form {
  flex: 1;
  padding: 3rem clamp(1.5rem, 5vw, 5rem);
  background: var(--blanc);
  overflow-y: auto;
}
.tunnel-progress { height: 5px; background: #E9E7E1; border-radius: 999px; margin-bottom: 2rem; overflow: hidden; }
.tunnel-progress-fill { height: 100%; background: var(--or); transition: width var(--transition-normale); }
.tunnel-colonne-form h2 { color: var(--texte); font-family: var(--police-corps); font-weight: 700; font-size: 1.4rem; }
.tunnel-colonne-form .intro-partie { color: var(--texte-secondaire); margin-bottom: 1.6rem; text-align: left; }
.tunnel-champ { margin-bottom: 1.4rem; }
.tunnel-champ label { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.92rem; }
.tunnel-champ .obligatoire { color: var(--or); }
.tunnel-champ input, .tunnel-champ select, .tunnel-champ textarea {
  width: 100%; padding: 0.75rem 1rem; border: 1px solid #D8D5CE; border-radius: 8px; font-family: var(--police-corps); font-size: 0.95rem;
}
.tunnel-champ textarea { min-height: 110px; resize: vertical; }
.tunnel-champ .compteur { font-size: 0.78rem; color: var(--texte-tertiaire); margin-top: 0.3rem; text-align: left; }
.tunnel-champ .compteur.limite-atteinte { color: #B5482A; font-weight: 700; }
.tunnel-champ.erreur input, .tunnel-champ.erreur textarea, .tunnel-champ.erreur select { border-color: #B5482A; }
.tunnel-champ .message-erreur { color: #B5482A; font-size: 0.8rem; margin-top: 0.3rem; display: none; }
.tunnel-champ.erreur .message-erreur { display: block; }

.depot-fichier {
  border: 1px dashed #C9C4B6; border-radius: 10px; padding: 1.1rem; text-align: left;
}
.depot-fichier .nom-fichier { font-size: 0.85rem; margin-top: 0.5rem; color: var(--texte-secondaire); }
.depot-fichier .info-format { font-size: 0.78rem; color: var(--texte-tertiaire); margin-bottom: 0.6rem; display: block; }
.depot-fichier.erreur { border-color: #B5482A; }

.tunnel-nav-boutons { display: flex; justify-content: space-between; align-items: center; margin-top: 2.4rem; gap: 1rem; }

@media (max-width: 900px) {
  .tunnel-formulaire { flex-direction: column; }
  .tunnel-colonne-fixe { position: relative; height: auto; min-height: 260px; flex: none; }
}

/* --- Auth pages (section 14) ----------------------------------------------- */
.auth-page { display: flex; min-height: 100vh; }
.auth-visuel {
  flex: 0 0 42%;
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 3rem;
  color: var(--or);
}
.auth-visuel::before { content:''; position:absolute; inset:0; background: var(--overlay-sombre); opacity: 0.55; }
.auth-visuel h1 { position: relative; font-size: 1.8rem; z-index: 1; color: var(--or); }
.auth-form-col {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; position: relative;
}
.auth-logo-coin { position: absolute; top: 2rem; right: 2rem; width: 40px; }
.auth-form-boite { width: 100%; max-width: 420px; }
.auth-form-boite h2 { color: var(--texte); font-family: var(--police-corps); font-weight: 400; font-size: 1.5rem; margin-bottom: 1.2rem; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
.auth-form-boite h2 .lien-secondaire { font-size: 0.8rem; font-style: italic; text-decoration: underline; color: var(--texte-secondaire); }
.auth-bas-lignes { display: flex; justify-content: space-between; align-items: center; margin-top: 0.8rem; flex-wrap: wrap; gap: 0.8rem; }
.auth-bas-lignes .lien-secondaire { font-size: 0.82rem; text-decoration: underline; color: var(--texte-secondaire); }
.auth-erreur { background: #FBEAE5; color: #96361B; border-radius: 8px; padding: 0.8rem 1rem; font-size: 0.85rem; margin-bottom: 1rem; display: none; }
.auth-erreur.visible { display: block; }
.checkbox-ligne { display: flex; gap: 0.6rem; align-items: flex-start; margin: 1rem 0; font-size: 0.85rem; }
.checkbox-ligne input { margin-top: 0.2rem; }
@media (max-width: 780px) { .auth-visuel { display: none; } }

/* --- Espace membre (section 15) --------------------------------------------- */
.espace-grille {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.6rem;
}
.espace-carte { background: var(--gris-tres-clair); border-radius: var(--radius-carte); padding: 1.6rem; }
.espace-carte-candidature { grid-column: 1; grid-row: 1; }
.espace-carte-demande { grid-column: 1; grid-row: 2; }
.espace-carte-actualites { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; }
.espace-carte-actualites .actualites-liste { flex: 1; }
.icone-parametres { display: inline-flex; color: var(--texte); transition: color var(--transition-rapide); }
.icone-parametres:hover { color: var(--or); }

/* --- Corrections : "Vos informations" en 2 colonnes (formulaire / photo) ----- */
.vi-mise-en-page { display: flex; gap: 2.5rem; align-items: stretch; }
.vi-colonne-formulaire { flex: 0 0 60%; max-width: 640px; }
.vi-colonne-photo {
  flex: 1;
  min-height: 640px;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-carte);
}
@media (max-width: 900px) {
  .vi-mise-en-page { flex-direction: column; }
  .vi-colonne-formulaire { flex: 1 1 auto; max-width: none; }
  .vi-colonne-photo { min-height: 260px; }
}
.espace-carte h3 { color: var(--texte); font-family: var(--police-corps); font-weight: 700; font-size: 1.05rem; margin-bottom: 0.8rem; }
.badge-statut { display: inline-block; padding: 0.3rem 0.9rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--or); color: var(--blanc); margin-bottom: 0.8rem; }
.badge-statut.refuse { background: #96361B; }
.badge-statut.accepte { background: #3E7D3E; }
.badge-statut.convoque { background: var(--marron); }
.actualites-liste { max-height: 480px; overflow-y: auto; padding-right: 0.5rem; }
.post-actualite { border-bottom: 1px solid #E2E2E2; padding: 1rem 0; }
.post-actualite h4 { font-size: 0.95rem; margin: 0 0 0.4rem; color: var(--texte); font-family: var(--police-corps); font-weight: 700; }
.post-actualite p { font-size: 0.85rem; text-align: left; }
.post-actualite a.lien-linkedin { font-size: 0.8rem; text-decoration: underline; }
@media (max-width: 900px) {
  .espace-grille { grid-template-columns: 1fr; }
  .espace-carte-candidature, .espace-carte-demande, .espace-carte-actualites { grid-column: 1; grid-row: auto; }
}

/* --- Pages légales / maintenance -------------------------------------------- */
.page-legale .container-etroit h2 { color: var(--texte); font-family: var(--police-corps); font-weight: 700; font-size: 1.15rem; margin-top: 2rem; }

/* --- Formulaire Contact (section 12) ---------------------------------------- */
.form-contact { max-width: 640px; margin: 0 auto; }

/* --- Cadre "en construction" (bandeau de secours pour visuel manquant) ------- */
.visuel-manquant {
  background: repeating-linear-gradient(135deg, #EDEAE1, #EDEAE1 10px, #E4E0D3 10px, #E4E0D3 20px);
}

/* --- Corrections : respiration Constat / Mission / Leviers (homepage) -------- */
.bloc-respire { margin-bottom: var(--espace-lg); }
.bloc-respire:last-child { margin-bottom: 0; }
.titre-newsletter {
  font-family: var(--police-impact);
  color: var(--noir);
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.15;
}
.centre .titre-newsletter { text-align: center; }
.centre p { text-align: center; }
.soustitre-newsletter {
  font-family: var(--police-corps);
  color: var(--texte-secondaire);
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
}
.ligne-levier { margin-bottom: 1.1rem; }
.ligne-levier:last-child { margin-bottom: 0; }
.mot-levier { color: var(--or); font-weight: 700; }
.titre-hero-montserrat {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--or);
}
.titre-hero-osethos { font-weight: 400; color: var(--blanc); }
.titre-hero-citation { font-weight: 600; color: var(--or); }
.texte-fraunces {
  font-family: 'Fraunces', serif;
  color: var(--texte-tertiaire);
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
}
@media (min-width: 700px) {
  .chacun-contribuer { white-space: nowrap; }
}

/* --- Popup générique avec fond flouté (item : Adresse OSETHOS) ----------- */
.popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26,26,26,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: var(--z-modale);
  align-items: center;
  justify-content: center;
}
.popup-overlay.ouvert { display: flex; }
.popup-carte {
  background: var(--blanc);
  border-radius: var(--radius-carte);
  padding: 2rem 2.5rem;
  max-width: 420px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

/* --- Champ mot de passe avec bascule afficher/masquer (item 10) --------- */
.champ-mdp { position: relative; }
.champ-mdp input { padding-right: 2.6rem; }
.btn-oeil {
  position: absolute;
  right: 0.7rem;
  bottom: 0.62rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--texte-secondaire);
  display: flex;
  padding: 0.2rem;
}
.btn-oeil:hover { color: var(--texte); }
.btn-oeil.actif { color: var(--or); }
.liste-levier { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.liste-levier li { margin-bottom: 0.4rem; }