/* ===== Reset & typo ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font:16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}

/* ===== Layout ===== */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--s3)}
.section{padding:var(--s5) 0 var(--s6)}
.h1{font-size:34px;letter-spacing:-.02em;margin:0 0 var(--s2)}
.h2{font-size:22px;letter-spacing:-.01em;margin:0}
.lead{color:var(--muted-fg);max-width:66ch}
.mt-1{margin-top:var(--s1)} .mt-2{margin-top:var(--s2)} .mt-3{margin-top:var(--s3)}

/* ===== Header / nav ===== */
.header{
  position:sticky;top:0;z-index:20;border-bottom:1px solid var(--border);
  background:#fff5; backdrop-filter:blur(8px);
}
@supports not (backdrop-filter: blur(8px)){ .header{background:var(--bg);} }
.header__inner{
  display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:var(--s2);
  flex-wrap:wrap;
}
.header__brand{display:flex;align-items:center;gap:var(--s2);flex:1;min-width:0}
.brand{font-weight:800;letter-spacing:.2px}
.badge{font-size:12px;padding:4px 8px;border:1px solid var(--border);border-radius:999px;color:var(--muted-fg)}

.nav{display:flex;gap:var(--s1);flex-wrap:wrap}
.nav__link{padding:8px 12px;border-radius:10px;color:var(--muted-fg);position:relative}
.nav__link:hover{background:var(--muted);color:var(--fg)}
.nav__link.is-active{color:var(--fg)}
.nav__link.is-active::after{
  content:"";position:absolute;left:12px;right:12px;bottom:4px;height:3px;border-radius:999px;background:var(--grad-brand);
}

/* ===== Recherche globale ===== */
.global-search{
  position:relative;
  flex:0 0 auto;
  min-width:200px;
  max-width:350px;
}
.global-search::before{
  content:"🔍";
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  z-index:1;
  pointer-events:none;
  color:var(--muted-fg);
  font-size:14px;
}
.global-search__input{
  width:100%;
  padding:8px 12px 8px 36px;
  background:var(--muted);
  border:1px solid var(--border);
  border-radius:20px;
  font-size:14px;
  color:var(--fg);
  transition:all 0.2s ease;
}
.global-search__input:focus{
  outline:none;
  border-color:var(--brand-1);
  box-shadow:0 0 0 3px rgba(37,99,235,0.1);
  background:var(--bg);
}
.global-search__input::placeholder{
  color:var(--muted-fg);
}
.global-search__results{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
  max-height:400px;
  overflow-y:auto;
  display:none;
  z-index:1000;
}
.global-search__results.is-visible{
  display:block;
}
.search-result-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  color:var(--fg);
  text-decoration:none;
  border-bottom:1px solid var(--border);
  transition:background 0.15s ease;
}
.search-result-item:last-child{
  border-bottom:none;
}
.search-result-item:hover,
.search-result-item:focus{
  background:var(--muted);
  outline:none;
}
.search-result-icon{
  font-size:20px;
  flex-shrink:0;
}
.search-result-content{
  flex:1;
  min-width:0;
}
.search-result-title{
  font-weight:600;
  font-size:14px;
  color:var(--fg);
  margin-bottom:2px;
}
.search-result-subtitle{
  font-size:12px;
  color:var(--muted-fg);
}
.search-result-empty{
  padding:24px;
  text-align:center;
  color:var(--muted-fg);
  font-size:14px;
}

/* ===== Toggle thème ===== */
/* Le toggle est maintenant dans le menu utilisateur, pas besoin de styles séparés */
.theme-toggle-icon{
  font-size:16px;
  line-height:1;
  margin-right:8px;
}

/* ===== Hero (accueil) ===== */
.kicker{
  display:inline-flex;gap:8px;align-items:center;font-size:12px;padding:4px 10px;
  border-radius:999px;color:#fff;background:var(--grad-brand);box-shadow:var(--shadow-sm);
}
.hero{
  border-radius:calc(var(--radius) + 6px);
  background:var(--grad-soft);
  padding:var(--s5) var(--s4);margin-top:var(--s3);box-shadow:var(--shadow-sm);
}

/* ===== Toolbar + recherche ===== */
.toolbar{display:flex;align-items:center;gap:var(--s2);margin:14px 0 18px}
.search{position:relative;flex:1}
.search__input{
  width:100%;border:1px solid var(--border);background:var(--bg);
  border-radius:14px;padding:12px 14px;color:var(--fg);outline:none;transition:box-shadow .15s ease,border-color .15s ease;
}
.search__input:focus{border-color:transparent;box-shadow:0 0 0 3px rgba(37,99,235,.25)}

/* ===== Grille & cartes ===== */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{
  border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;background:var(--bg);box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:color-mix(in oklab,var(--brand-1) 28%, var(--border))}
.card--link{display:block;cursor:pointer}
.card__title{margin:0;font-size:20px;letter-spacing:-.01em}
.card__subtitle{margin:6px 0;color:var(--muted-fg);font-size:13px}
.card__desc{margin:8px 0 14px;color:var(--muted-fg);font-size:14px;max-width:48ch}
.card__actions{display:flex;gap:10px;align-items:center}

/* ===== Boutons ===== */
.btn{
  appearance:none;border:0;background:var(--grad-brand);color:#fff;
  padding:10px 14px;border-radius:12px;font-weight:700;letter-spacing:.2px;cursor:pointer;box-shadow:var(--shadow-sm);
}
.btn:hover{filter:saturate(1.08) brightness(1.03)}
.btn--ghost{background:transparent;color:var(--muted-fg);border:1px solid var(--border);cursor:not-allowed}

/* ===== Formulaires (minutes.html) ===== */
.form{display:grid;gap:var(--s2)}
.row{display:grid;gap:var(--s2);grid-template-columns:1fr 1fr}
.label{font-weight:600;font-size:13px}
.input,.textarea,.select{
  width:100%;border:1px solid var(--border);background:var(--bg);color:var(--fg);
  border-radius:12px;padding:10px 12px;outline:none;transition:border-color .15s ease, box-shadow .15s ease;
  font-size:16px; /* Évite le zoom automatique sur iOS */
}
.input:focus,.textarea:focus,.select:focus{border-color:transparent;box-shadow:0 0 0 3px rgba(37,99,235,.25)}
.textarea{min-height:110px;resize:vertical}
.actions{display:flex;justify-content:flex-end;gap:var(--s2);flex-wrap:wrap}
.preview{white-space:pre-wrap;background:var(--muted);border:1px solid var(--border);border-radius:12px;padding:12px;overflow-x:auto}

/* ===== Modal (dialog) ===== */
.modal{border:0;border-radius:18px;padding:0;box-shadow:var(--shadow)}
.modal__content{padding:22px;min-width:320px;max-width:640px;background:var(--bg)}
.modal__actions{margin-top:18px;display:flex;justify-content:flex-end;gap:10px}

/* ===== Footer ===== */
.footer{border-top:1px solid var(--border);margin-top:var(--s5)}
.footer__inner{padding:12px 0;display:flex;justify-content:space-between;color:var(--muted-fg);font-size:12px}

/* ===== Accessibilité ===== */
:where(a,button,input,select,textarea):focus-visible{outline:3px solid rgba(37,99,235,.35);outline-offset:2px;border-radius:12px}

/* ===== Responsif ===== */

/* Tablette et mobile (max-width: 768px) */
@media (max-width: 768px){
  /* Container et espacements */
  .container{padding:0 var(--s2)}
  .section{padding:var(--s3) 0 var(--s4)}
  
  /* Typographie */
  .h1{font-size:28px}
  .h2{font-size:20px}
  
  /* Header et navigation */
  .header__inner{flex-wrap:wrap;padding:10px 0}
  .header__brand{flex:1;min-width:0}
  .brand{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .badge{font-size:11px;padding:3px 6px}
  
  .nav{flex-wrap:wrap;gap:6px;font-size:13px;order:3;width:100%}
  .nav__link{padding:6px 10px;font-size:13px}
  
  .user-menu{order:2;margin-left:auto}
  
  /* Grille - 1 colonne sur mobile */
  .grid{grid-template-columns:1fr;gap:14px}
  
  /* Person responsive */
  .person{flex-wrap:wrap}
  .avatar{width:40px;height:40px}
  
  /* Cartes */
  .card{padding:14px}
  .card__title{font-size:18px}
  .card__subtitle{font-size:12px}
  .card__desc{font-size:13px}
  
  /* Toolbar */
  .toolbar{flex-direction:column;align-items:stretch;gap:var(--s2)}
  .search{width:100%}
  
  /* Hero */
  .hero{padding:var(--s3) var(--s2);margin-top:var(--s2)}
  
  /* Formulaires */
  .row{grid-template-columns:1fr}
  .form{gap:var(--s2)}
  
  /* Footer */
  .footer__inner{flex-direction:column;gap:8px;text-align:center;font-size:11px}
  
  /* Modal */
  .modal__content{min-width:auto;max-width:95vw;padding:18px}
}

/* Mobile petit (max-width: 480px) */
@media (max-width: 480px){
  .container{padding:0 var(--s1)}
  .section{padding:var(--s2) 0 var(--s3)}
  
  .h1{font-size:24px}
  .h2{font-size:18px}
  
  .header__brand{gap:var(--s1)}
  .brand{font-size:13px}
  
  .nav{font-size:12px}
  .nav__link{padding:5px 8px}
  
  .card{padding:12px}
  .card__title{font-size:16px}
  
  .btn{padding:8px 12px;font-size:14px}
  
  .toolbar{margin:10px 0 14px}
  
  .hero{padding:var(--s2) var(--s1)}
  
  /* Avatar plus petit sur très petit écran */
  .avatar{width:36px;height:36px;font-size:14px}
  
  /* Actions en colonne sur mobile */
  .actions{flex-direction:column}
  .actions .btn{width:100%}
}

/* Tablette (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  .container{max-width:900px}
}

/* ===== Impression (utile pour minutes.html) ===== */
@media print{
  header,.toolbar,footer,.nav{display:none!important}
  body{background:#fff;color:#000}
  .card{box-shadow:none;border:0;padding:0}
  .container{max-width:800px}
}
/* Logo ATRYON */
.logo{
  height: 28px;         /* taille dans le header */
  width: auto;
  display: block;
  border-radius: 8px;    /* léger arrondi, optionnel */
}
@media (min-width: 880px){
  .logo{ height: 32px; } /* un poil plus grand sur desktop */
}
/* Tags / chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:12px;padding:4px 8px;border:1px solid var(--border);border-radius:999px;color:var(--muted-fg);cursor:pointer}
.chip.is-active{border-color:transparent;background:var(--grad-brand);color:#fff}

/* Liste simple */
.list{display:grid;gap:12px}
.list__item{border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--bg)}
.item__head{display:flex;justify-content:space-between;gap:10px}
.item__meta{font-size:12px;color:var(--muted-fg)}

/* Avatar + cartes annuaire */
.avatar{width:44px;height:44px;border-radius:12px;background:var(--muted);display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.person{display:flex;gap:12px;align-items:flex-start}

/* Bouton feedback flottant */
.feedback-fab{
  position:fixed; right:18px; bottom:18px; z-index:50;
  background:var(--grad-brand); color:#fff; border:0; border-radius:999px;
  padding:12px 16px; font-weight:700; box-shadow:var(--shadow); cursor:pointer;
}
.feedback-fab:hover{filter:saturate(1.08) brightness(1.03)}

/* Feedback FAB responsive */
@media (max-width: 768px){
  .feedback-fab{
    right:12px; bottom:12px; padding:10px 14px; font-size:13px;
  }
}


/* Hover pour les cartes cliquables (Actualités, etc.) */
.card--link{
  display:block;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card--link:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

/* ===== Menu utilisateur ===== */
.user-menu{
  position:relative;
  margin-left:var(--s2);
}
.user-menu__trigger{
  background:none; border:0; padding:0; cursor:pointer;
  border-radius:50%; overflow:hidden; transition:transform .15s ease;
  display:flex; align-items:center; justify-content:center;
}
.user-menu__trigger:hover{transform:scale(1.05)}
.user-menu__avatar{
  width:40px; height:40px; border-radius:50%; object-fit:cover;
  border:2px solid var(--border); display:block;
  pointer-events:none; /* Empêcher l'image d'intercepter le clic */
}
.user-menu__dropdown{
  position:absolute; right:0; top:calc(100% + 8px);
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  min-width:240px; z-index:1000; 
  opacity:0 !important; 
  visibility:hidden !important; 
  transform:translateY(-8px); 
  transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
  pointer-events:none;
  display:block !important; /* Forcer l'affichage */
}
.user-menu__dropdown.is-open{
  opacity:1 !important; 
  visibility:visible !important; 
  transform:translateY(0);
  pointer-events:auto !important;
}
.user-menu__header{
  display:flex; align-items:center; gap:var(--s2);
  padding:var(--s2); border-bottom:1px solid var(--border);
}
.user-menu__avatar-large{
  width:48px; height:48px; border-radius:50%; object-fit:cover;
  border:2px solid var(--border);
}
.user-menu__info{flex:1; min-width:0}
.user-menu__name{
  font-weight:600; font-size:14px; margin-bottom:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.user-menu__email{
  font-size:12px; color:var(--muted-fg);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.user-menu__divider{
  height:1px; background:var(--border); margin:var(--s1) 0;
}
.user-menu__item{
  width:100%; background:none; border:0; padding:10px var(--s2);
  text-align:left; cursor:pointer; color:var(--fg);
  display:flex; align-items:center; gap:var(--s1);
  font-size:14px; transition:background .15s ease;
}
.user-menu__item:hover{background:var(--muted)}
.user-menu__item span{font-size:16px}

/* ===== Modale de profil ===== */
.profile-modal{
  border:0; border-radius:var(--radius-lg); padding:0;
  box-shadow:var(--shadow); max-width:600px; width:90vw;
  background:var(--bg);
}
.profile-modal::backdrop{
  background:rgba(0,0,0,.5); backdrop-filter:blur(4px);
}
.profile-modal__content{
  padding:var(--s4);
}
.profile-modal__header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:var(--s3);
}
.profile-modal__close{
  background:none; border:0; font-size:28px; line-height:1;
  color:var(--muted-fg); cursor:pointer; padding:0; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px; transition:background .15s ease,color .15s ease;
}
.profile-modal__close:hover{
  background:var(--muted); color:var(--fg);
}
.profile-avatar-section{
  display:flex; justify-content:center; margin-bottom:var(--s4);
}
.profile-avatar-wrapper{
  position:relative; display:inline-block;
}
.profile-avatar{
  width:120px; height:120px; border-radius:50%; object-fit:cover;
  border:3px solid var(--border); display:block;
}
.profile-avatar-upload{
  position:absolute; bottom:0; right:0;
  background:var(--grad-brand); color:#fff; border:0;
  border-radius:50%; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:var(--shadow-sm);
  transition:transform .15s ease;
}
.profile-avatar-upload:hover{transform:scale(1.1)}
.profile-avatar-upload span{font-size:16px}
.profile-form{
  display:grid; gap:var(--s2);
}
.profile-form__actions{
  display:flex; justify-content:flex-end; gap:var(--s2);
  margin-top:var(--s3); flex-wrap:wrap;
}
.success{
  background:#d1fae5; color:#065f46; padding:12px;
  border-radius:12px; margin-bottom:var(--s2); font-size:14px;
}
.error{
  background:#fee2e2; color:#991b1b; padding:12px;
  border-radius:12px; margin-bottom:var(--s2); font-size:14px;
}

/* Responsive menu utilisateur */
@media (max-width: 768px){
  .user-menu__dropdown{
    right:0; left:auto; min-width:200px;
  }
  .profile-modal{width:95vw; max-width:none}
  .profile-modal__content{padding:var(--s3)}
  .profile-avatar{width:100px; height:100px}
  .profile-form__actions{
    flex-direction:column;
  }
  .profile-form__actions .btn{width:100%}
}