/* ===== Base / Reset ===== */
* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  background: var(--bg, #f9fafb);
  color: var(--text, #333);
}

/* App layout */
.page-container { min-height: 100vh; display: flex; flex-direction: column; }
.main-content { flex: 1; }

/* ===== Typography ===== */
h1 {
  text-align: center;
  color: var(--text);
  margin-top: 50px;
  font-size: 2.5em;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--primary);
}
p { font-size: 1.1em; line-height: 1.6; text-align: center; color: var(--muted, #666); margin-bottom: 30px; }

/* ===== Links ===== */
a { font-size: 1.1em; color: var(--link, #0d6efd); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--primary-hover, #0b5ed7); text-decoration: underline; }

/* ===== Buttons (base) ===== */
button, .btn {
  padding: 12px 20px;
  background: var(--primary, #3498db);
  color: #fff;
  border: 1px solid var(--primary, #3498db);
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .02s ease;
}
button:hover, .btn:hover, button:focus, .btn:focus { background: var(--primary-hover, #2980b9); border-color: var(--primary-hover, #2980b9); color: #fff; }
button:active, .btn:active { transform: translateY(1px); }

/* Outline variant */
.btn-outline-primary {
  color: var(--primary, #3498db);
  border: 1px solid var(--primary, #3498db);
  background: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus { color: #fff; background: var(--primary-hover, #2980b9); border-color: var(--primary-hover, #2980b9); }

/* Secondary */
.btn-secondary { background: var(--card, #fff); color: var(--text, #333); border: 1px solid var(--border, #e0e0e0); }
.btn-secondary:hover { background: var(--border, #e6e6e6); }

/* Disabled */
button[disabled], .ajout-acte fieldset:disabled button, .favori-button[disabled], .delete-button[disabled] { opacity: .6; cursor: not-allowed; }

/* ===== Sections / Cards ===== */
section {
  background: #fff;
  padding: 30px;
  margin: 30px auto;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  width: 90%;
  max-width: 800px;
  text-align: center;
  transition: transform .2s ease;
}
section:hover { transform: translateY(-4px); }
section h2 { font-size: 1.8em; color: #2c3e50; margin-bottom: 20px; text-align: center; }
section p { font-size: 1.1em; color: #555; line-height: 1.6; text-align: center; }
section a {
  display: inline-block; background: #ecf5ff; color: var(--primary, #3498db);
  padding: 10px 20px; margin-top: 10px; border-radius: 6px; font-weight: bold; transition: all .2s ease;
}
section a:hover { background: var(--primary, #3498db); color: #fff; }

/* ===== Header links (displayed as buttons) ===== */
.header-links {
  display: flex; justify-content: flex-end; align-items: center; gap: 15px;
  padding: 15px 30px; background: #fff; border-bottom: 1px solid #e0e0e0; font-size: 1em; text-align: right;
}
.header-links a { background: var(--primary, #3498db); color: #fff; font-weight: bold; padding: 8px 15px; border-radius: 5px; transition: background-color .2s ease; }
.header-links a:hover { background: var(--primary-hover, #2980b9); }
@media (max-width: 600px){ .header-links { justify-content: center; } .header-links a { display: block; margin: 10px auto; } }

/* ===== Footer ===== */
.footer-global { background: var(--footer-bg) !important; color: var(--text) !important; padding: 20px 0; font-size: 14px; border-top: 1px solid var(--border); }
.footer-logo { font-size: 18px; font-weight: bold; text-align: center; margin-bottom: 10px; color: var(--text); }
.footer-links { text-align: center; margin-bottom: 10px; }
.footer-links a { color: var(--link) !important; text-decoration: none; margin: 0 15px; transition: opacity .2s ease; opacity: .9; }
.footer-links a:hover { opacity: 1; text-decoration: underline; }
.footer-credits { text-align: center; font-size: 13px; color: var(--muted) !important; }
[data-theme="dark"] .btn-outline-primary { color: var(--link); border-color: var(--border); }

/* ===== Back link ===== */
.back-link { display: block; margin-bottom: 30px; color: #0cc20f; font-weight: bold; text-decoration: none; }
.back-link:hover { text-decoration: underline; }

.button { display: inline-block; margin-top: 10px; padding: 10px 20px; background: var(--primary, #3498db); color: #fff; text-decoration: none; border-radius: 6px; font-weight: bold; transition: background-color .2s ease; }
.button:hover { background: var(--primary-hover, #2980b9); }

/* ===== Favoris & actions ===== */
.favori-button {
  background: var(--primary); border: 2px solid var(--primary); color: #fff;
  padding: 8px 14px; border-radius: 6px; cursor: pointer; font-weight: bold; display: inline-block;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease; margin-bottom: 20px;
}
.favori-button:hover, .favori-button:focus { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.favori-button.active { background: var(--primary-active); border-color: var(--primary-active); color: #fff; }
.delete-button { background: none; border: none; color: #e74c3c; font-size: 1.2em; cursor: pointer; margin-top: 8px; }
a.btn-deconnexion {
  background: var(--primary) !important; border: 1px solid var(--primary) !important; color: #fff !important;
  border-radius: 6px !important; font-weight: 600; padding: 6px 12px; transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}
a.btn-deconnexion:hover, a.btn-deconnexion:focus { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; color: #fff !important; }
a.btn-deconnexion:active { background: var(--primary-active) !important; border-color: var(--primary-active) !important; transform: translateY(1px); }

.link-disabled { color: #999; cursor: not-allowed; text-decoration: none; }
.note-invite { color:#666; font-size:.9rem; margin-top:.5rem; }

/* ===== Modals / Lightbox ===== */
.modal { display: none; position: fixed; z-index: 999; inset: 0; padding-top: 60px; background: rgba(0,0,0,.9); overflow: auto; }
.modal-content { margin: auto; display: block; max-width: 90%; max-height: 80%; }
.modal-close { position: absolute; top: 20px; right: 35px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; }

.lightbox { display: none; position: fixed; z-index: 1000; inset: 0; background: rgba(0,0,0,.85); justify-content: center; align-items: center; }
.lightbox img { max-width: 90%; max-height: 90%; box-shadow: 0 0 20px rgba(0,0,0,.5); border-radius: 8px; transition: transform .2s; }
.lightbox img:hover { transform: scale(1.02); }
.lightbox.show { display: flex; animation: fadeIn .3s; }
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }

/* ===== Auth / Forms ===== */
.form-container { max-width: 500px; margin: 4rem auto; padding: 2rem; background: #fff; border-radius: 16px; box-shadow: 0 0 20px rgba(0,0,0,.1); text-align: left; }
body.connexion-page { background-image: url("/static/images/fond_connexion.png"); background-size: cover; background-position: center; background-repeat: no-repeat; color: #222; font-family: 'Georgia', serif; }
body.connexion-page .form-container { background: rgba(255,255,255,.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 0 20px rgba(0,0,0,.2); }
.form-error { background: #f8d7da; color: #721c24; padding: 12px; border-radius: 6px; margin-bottom: 15px; }

.auth-container { max-width: 450px; margin: 40px auto; background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 0 15px rgba(0,0,0,.1); }
.auth-container h1 { font-size: 1.6em; margin-bottom: 10px; text-align: center; }
.auth-container .intro { font-size: .95em; color: #555; margin-bottom: 25px; text-align: center; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form input { padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 1em; }
.auth-form button { background: #4CAF50; color: #fff; padding: 12px; font-size: 1em; border: none; border-radius: 6px; cursor: pointer; transition: background .2s; }
.auth-form button:hover { background: #45a049; }
.auth-link { margin-top: 15px; text-align: center; }
.auth-link a { color: #0077cc; text-decoration: none; }
.error-message { color: red; margin-top: 10px; font-weight: bold; text-align: center; }

.password-container { position: relative; }
.toggle-password { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); cursor: pointer; user-select: none; }

/* ===== Map / Filters ===== */
#filters { position: absolute; z-index: 1000; top: 10px; right: 10px; background: #fff; padding: 10px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,.2); font-family: sans-serif; }
#map { flex: 1; height: 100%; }

/* ===== Charts ===== */
#graph-vie { width: 100% !important; height: 100% !important; }
.chart-card { max-width: 1200px; background: #fff; margin: 0 auto; padding: 20px; border-radius: 8px; }
.chart-wrap { position: relative; height: 520px; width: 100%; }

/* ===== “Actes” cards ===== */
.actes-container { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.carte-acte {
  width: 280px; background: #fff; border-radius: 10px; padding: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1); text-align: center; transition: transform .2s;
}
.carte-acte:hover { transform: scale(1.02); }
.entete-acte { display: flex; justify-content: center; align-items: center; gap: 8px; font-weight: bold; font-size: 16px; color: #2c3e50; margin-bottom: 10px; }
.carte-acte img, .acte img { width: 100%; height: auto; max-height: 260px; object-fit: cover; border-radius: 6px; box-shadow: 0 1px 6px rgba(0,0,0,.1); margin-top: 10px; }
.acte { margin-bottom: 30px; }
.infos p { margin: 6px 0; }
.infos ul { margin: 0; padding-left: 20px; }
.icone-acte { font-size: 24px; }

/* ===== Mini arbre / fiche ===== */
.mini-arbre-container { background: #f4f8fc; padding: 20px; border-radius: 10px; margin: 30px 0; text-align: center; }
.mini-arbre-container h2 { font-size: 1.5em; margin-bottom: 20px; color: #234; }
.arbre-horizontal { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.niveau { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.personne {
  background: #fff; padding: 10px 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,.1);
  min-width: 110px; font-size: .95em; text-align: center;
}
.personne a { text-decoration: none; color: #0077cc; font-weight: 500; }
.personne .role { font-size: .8em; color: #777; margin-top: 4px; }
.personne .date { font-size: .75em; color: #666; margin-top: 3px; }
.personne.inconnue {
  background: #f8f8f8; border: 1px dashed #bbb; padding: 10px; border-radius: 6px; width: 160px; text-align: center; font-style: italic; color: #777; margin: 0 10px;
}
.ligne-verticale { width: 2px; height: 20px; background: #aaa; }
.arbre-niveau-titre { font-size: 1em; font-weight: 600; color: #444; margin: 15px 0 5px; text-align: center; }

/* ===== Theme switch ===== */
.theme-switch { position: relative; display: inline-block; width: 60px; height: 30px; cursor: pointer; }
.theme-switch input { display: none; }
.theme-switch .slider {
  background: var(--border, #e0e0e0); border-radius: 30px; position: relative; height: 100%;
  display: flex; align-items: center; justify-content: space-between; padding: 0 6px; font-size: 1rem; transition: background-color .3s ease;
}
.theme-switch .icon-sun, .theme-switch .icon-moon { pointer-events: none; }
.theme-switch input:checked + .slider { background: var(--primary, #0d6efd); }
.theme-switch .slider::before {
  content: ""; position: absolute; height: 24px; width: 24px; left: 3px; top: 3px;
  background: var(--card, #fff); border-radius: 50%; transition: transform .3s ease;
}
.theme-switch input:checked + .slider::before { transform: translateX(30px); }
.theme-label { font-size: .9rem; color: var(--text); }

/* ===== Modern layer / additions ===== */
html, body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans"; }
h1 .greatvibes, .greatvibes { font-family: "Great Vibes", cursive; }
.header-links { background: color-mix(in srgb, var(--card) 85%, transparent) !important; }
.header-links a { text-decoration: none; }
.header-links .btn-deconnexion { border-radius: 10px !important; }
section { background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: var(--radius); }
.kpi-pills { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.kpi-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--border); border-radius:999px; background: linear-gradient(to bottom, rgba(255,255,255,.6), rgba(255,255,255,0)); color: var(--text); font-weight:600; }
.kpi-pill .num { font-variant-numeric: tabular-nums; font-weight:700; }
a { color: var(--link); }
a:hover { color: color-mix(in srgb, var(--link) 86%, black); }
.footer-global { padding: 18px 0; }

/* ===== Footer ultra-compact mobile ===== */
@media (max-width: 768px){
  .footer-global{ padding: 6px 0 !important; }
  .footer-global .footer-container{ gap: 6px !important; padding: 0 12px !important; }
  .footer-global .footer-logo{ display: flex; align-items: center; gap: 6px; font-size: .9rem !important; line-height: 1.1 !important; }
  .footer-global .footer-logo-img{ height: 28px !important; margin-right: 6px !important; }
  .footer-global .footer-links{ gap: 10px !important; flex-wrap: wrap; justify-content: center; font-size: .85rem !important; line-height: 1.1 !important; }
  .footer-global .footer-credits{ font-size: .8rem !important; line-height: 1.15 !important; margin-top: 2px !important; }
}

/* Conserver ton vert foncé pour .btn-success */
.btn.btn-success{
  background-color: #1f5622 !important; border-color: #1f5622 !important; color:#fff !important;
}
.btn.btn-success:hover{ background-color:#1f5622 !important; border-color:#27672a !important; }
.btn.btn-success:active{ background-color:#1f5622 !important; border-color:#1f5622 !important; }

/* ================== Boutons Modernisés (sur-spécifiés) ================== */
body .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; border-radius: 12px; font-weight: 600; font-size: 0.95rem;
  transition: all 0.18s ease; cursor: pointer; border: 1px solid transparent;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
body .btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-active));
  color: #fff !important; border: 1px solid var(--primary-active);
}
body .btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-hover), var(--primary));
  transform: translateY(-2px); box-shadow: 0 6px 14px rgba(46,125,50,0.25);
}
body .btn-primary:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0,0,0,0.15); }

body .btn-outline-primary {
  background: transparent; color: var(--primary) !important; border: 1px solid var(--primary);
}
body .btn-outline-primary:hover { background: rgba(46,125,50,0.08); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.08); }

body .btn-danger {
  background: linear-gradient(135deg, #e53935, #c62828); color: #fff !important; border: 1px solid #c62828;
}
body .btn-danger:hover {
  background: linear-gradient(135deg, #ef5350, #d32f2f); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(229,57,53,0.25);
}
body .btn-danger:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0,0,0,0.15); }

body .btn-ghost { background: rgba(0,0,0,0.04); color: var(--text); border: 1px solid var(--border); }
body .btn-ghost:hover { background: rgba(0,0,0,0.07); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
body .btn-sm { padding: 6px 12px; font-size: 0.85rem; }
body .btn:active { transform: scale(0.96); }


/* ===== Anti-scroll horizontal global ===== */
html, body { max-width: 100%; overflow-x: clip; }

/* ===== Header responsive (sans id nécessaire) ===== */
header.header-bar{ flex-wrap: wrap; }
header.header-bar .brand{ flex: 1 1 auto; min-width: 0; }
header.header-bar .header-actions{
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;               /* autorise le retour à la ligne */
}

/* Mobile: on répartit en 2 lignes et on masque le libellé verbeux du thème */
@media (max-width: 640px){
  /* le bouton Recherche passe en ligne suivante et prend toute la largeur */
  header.header-bar .btn-cta{
    order: 3; width: 100%; justify-content: center; margin-left: 0;
  }
  /* le bloc d’actions passe sur une ligne à part */
  header.header-bar .header-actions{
    order: 2; flex: 1 1 100%; justify-content: space-between;
  }
  /* évite que le texte du switch thème déborde */
  #theme-label{ display: none !important; }

  /* le pill utilisateur ne doit pas élargir l’écran */
  .account-menu .trigger .txt{
    max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* logo un peu plus compact */
  .brand .logo-img{ height: 44px; }
}

/* Très petit écran: compacter légèrement les pills */
@media (max-width: 380px){
  .account-menu .trigger{ padding-inline: 10px; }
  .lang-switch select{ padding-inline: 10px; }
}

/* FAB bug: respect des safe areas (coins arrondis iOS/Android) */
@supports (padding: max(0px)){
  .feedback-container{
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}