/* public/css/main.css */

/* Reset / base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: sans-serif;
  color: #333;
  line-height: 1.5;
}

/* Header & nav */
header {
  background: #004080;
  color: #fff;
}
header .container {
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  justify-content: space-between;
}
header h1 {
  font-size: 1.5rem;
}
nav a {
  color: #fff;
  text-decoration: none;
  margin-right: 1rem;
  font-weight: 500;
}
nav a:last-child {
  margin-right: 0;
}
nav a:hover {
  text-decoration: underline;
}

/* Avatar dans le header/menu */
img.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 0.5rem;
  border: 2px solid #fff;
}

/* Main & footer */
main {
  max-width: 1024px;
  margin: auto;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.main-container {
  padding: 2rem 4rem 2rem 4rem ;
}
footer {
  background: #4b4b4c;
  color : #fff;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
}

/* ===== menu principal ===== */
header .container nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1rem;
}
header .container nav li {
  position: relative;
}
header .container nav a {
  color: #fff;
  text-decoration: none;
  padding: 0.5rem;
  display: block;
}
header .container nav li:hover > a {
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}

/* ===== sous‐menus ===== */
header .container nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #004080;
  border-radius: 4px;
  padding: 0.5rem 0;
  min-width: 150px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 1000;
}
header .container nav li:hover > ul {
  display: block;
}
header .container nav ul ul li {
  white-space: nowrap;
}
header .container nav ul ul a {
  padding: 0.4rem 1rem;
}

/* Avatar + nom */
header .container nav li.user-menu {
  display: flex;
  align-items: center;
}
header .container nav li.user-menu img.avatar {
  margin-right: 0.5rem;
  border: 2px solid #fff;
}

/* public/css/login.css */

/* Reset minimal */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: sans-serif;
  background: #ecf0f3;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

.login-container {
  background: #ffffff;
  width: 100%;
  max-width: 380px;
  padding: 2.5rem;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  text-align: center;
}

.login-container h1 {
  margin-bottom: 1.5rem;
  color: #004080;
  font-size: 1.8rem;
}

.login-container label {
  display: block;
  text-align: left;
  margin-top: 1rem;
  color: #333;
}

.login-container input {
  width: 100%;
  padding: 0.6rem;
  margin-top: 0.4rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.login-container button {
  margin-top: 1.5rem;
  width: 100%;
  padding: 0.7rem;
  background: #004080;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}

.login-container button:hover {
  background: #003060;
}

.error {
  background: #fdecea;
  color: #97281a;
  padding: 0.6rem;
  margin-bottom: 1rem;
  border-radius: 4px;
  text-align: left;
  font-size: 0.9rem;
}

.hero-banner {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
}

.hero-banner img.hero-img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    filter: brightness(0.6);
}

.hero-text {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    color: #fff;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}

.hero-text h1 {
    font-size: 2.2rem;
    margin: 0;
}

.hero-text p {
    font-size: 1.1rem;
    margin-top: 0.5rem;
}

/* ===== Bande défilante "classique" (si utilisée seule) ===== */
.bande-defilante{
    width: 100%;
    background-color: #000000;
    color: #ffffff;
    overflow: hidden;
    white-space: nowrap;
    font-weight: normal;
    font-size: 0.9rem;
    border-bottom: 2px solid #444;
    padding: 0.6rem 0;
    position: relative;
    z-index: 10;
}
.bande-recherche{
    width: 100%;
    background-color: #555555;
    color: #ffffff;
    overflow: hidden;
    white-space: nowrap;
    font-weight: normal;
    font-size: 0.9rem;
    border-bottom: 2px solid #444;
    padding: 0.6rem 0;
    position: relative;
    z-index: 10;
}
.bande-defilante .defilement {
    display: inline-block;
    padding-left: 100%;
    animation: defilement 60s linear infinite;
}
.bande-defilante .item {
    display: inline-block;
    margin-right: 3rem;
}

@keyframes defilement {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

/* ===== Formulaire modifier comm ===== */
.form-modifier-comm {
    max-width: 600px;
    margin: 2rem auto;
    background: #f8f8f8;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.form-modifier-comm h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #004080;
}
.form-modifier-comm label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.4rem;
    color: #333;
}
.form-modifier-comm input[type="text"],
.form-modifier-comm input[type="datetime-local"],
.form-modifier-comm textarea {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 1.2rem;
    font-size: 1rem;
    background: #fff;
}
.form-modifier-comm textarea {
    resize: vertical;
    min-height: 120px;
}
.form-modifier-comm button {
    background-color: #004080;
    color: white;
    padding: 0.7rem 1.2rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    display: block;
    margin: 0 auto;
}
.form-modifier-comm button:hover {
    background-color: #003060;
}

/* === Style global des formulaires AIMClub (exclut la recherche) === */
form:not(.global-search) {
    max-width: 600px;
    margin: 2rem auto;
    background: #f8f8f8;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
form:not(.global-search) h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #004080;
}
form:not(.global-search) label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.4rem;
    color: #333;
}
form:not(.global-search) input[type="text"],
form:not(.global-search) input[type="email"],
form:not(.global-search) input[type="password"],
form:not(.global-search) input[type="date"],
form:not(.global-search) input[type="datetime-local"],
form:not(.global-search) textarea,
form:not(.global-search) select {
    width: 100%;
    padding: 0.6rem;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    background: #fff;
}
form:not(.global-search) textarea {
    resize: vertical;
    min-height: 120px;
}
form:not(.global-search) button,
form:not(.global-search) input[type="submit"] {
    background-color: #004080;
    color: white;
    padding: 0.7rem 1.2rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    display: block;
    margin: 1rem auto 0;
}
form:not(.global-search) button:hover,
form:not(.global-search) input[type="submit"]:hover {
    background-color: #003060;
}

.actions-comm {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}
.actions-comm form {
  display: inline-block;
}

.communication{
   background-color:#f8f8f8;
    padding: 0.7rem 1.2rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    display: block;
    margin: 1rem auto 0;
}

/* === Projet carousel === */
.projet-carousel {
    position: relative;
    max-width: 1024px;
    margin: auto;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.projet-slide { display: none; }
.projet-slide.active { display: block; }

.projet-bloc {
    background: #f5f8fb;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.hero-banner {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
    border-bottom: 3px solid #004080;
}
.hero-banner img.hero-img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    filter: brightness(0.5);
}
.hero-text {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    color: #fff;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.7);
}
.hero-text h1 {
    font-size: 2.5rem;
    margin: 0;
}

.main-container p { margin: 0.6rem 0; }

.temps-forts img {
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}
.temps-forts img:hover { transform: scale(1.05); }

.carousel-controls {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 1rem;
    background: #f0f0f0;
    border-top: 1px solid #ccc;
}
.carousel-controls button {
    background: #004080;
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}
.carousel-controls button:hover { background: #003060; }

.vitrine-carousel {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
  margin-bottom: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  background-color: #f2f6fa;
}
.vitrine-projet {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: flex;
  align-items: stretch;
  padding: 0;
}
.vitrine-projet.active { opacity: 1; z-index: 1; }
.vitrine-img {
  width: 40%;
  height: 100%;
  object-fit: fill;
  border-right: 3px solid #004080;
}
.vitrine-texte {
  width: 60%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
}
.vitrine-texte h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  color: #004080;
}

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

/* === Vitrine cards === */
.vitrine-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 1rem;
}
.vitrine-cards .card {
  background: #f9f9fb;
  border: 1px solid #ddd;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s;
}
.vitrine-cards .card:hover { transform: translateY(-4px); }
.vitrine-cards .card h3 { margin-bottom: 0.5rem; color: #004080; }
.vitrine-cards .card p { margin: 0.5rem 0; }

/* === Actions rapides === */
.quick-actions { text-align: center; margin: 2rem auto; }
.action-btn {
  display: inline-block;
  background: #004080;
  color: #fff;
  padding: 0.6rem 1.2rem;
  margin: 0.5rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.2s;
}
.action-btn:hover { background: #003060; }
.btn-link {
  display: inline-block;
  margin-top: 0.6rem;
  color: #004080;
  text-decoration: none;
  font-weight: bold;
}
.btn-link:hover { text-decoration: underline; }

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 64, 128, 0.8);
  color: white;
  border: none;
  font-size: 1.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  z-index: 10;
  border-radius: 4px;
}
#carousel-prev { left: 10px; }
#carousel-next { right: 10px; }

/* === Page Profil Utilisateur === */
.profil-form {
  max-width: 720px;
  margin: 2rem auto;
  background: #f8f8f8;
  padding: 2rem 2.5rem;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.profil-form fieldset { border: none; margin-bottom: 1.8rem; }
.profil-form legend {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #004080;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid #004080;
}
.profil-form label {
  display: block;
  font-weight: bold;
  margin-top: 0.8rem;
  margin-bottom: 0.3rem;
  color: #333;
}
.profil-form input,
.profil-form select {
  width: 100%;
  padding: 0.6rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 1rem;
}
.profil-avatar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.profil-avatar img.avatar {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #004080;
}
.profil-form .msg.success {
  background: #e6f8e6;
  color: #226622;
  border: 1px solid #8bc34a;
  padding: 0.8rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}
.profil-form .msg.error {
  background: #fdecea;
  color: #97281a;
  border: 1px solid #f5a3a3;
  padding: 0.8rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}
.profil-form button {
  background-color: #004080;
  color: #fff;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  margin-top: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.profil-form button:hover { background-color: #003060; }
.profil-form .delete-btn {
  background: #f44336;
  color: #fff;
  padding: 0.7rem 1.2rem;
  border: none;
  border-radius: 6px;
  margin-top: 2rem;
  cursor: pointer;
  font-size: 0.95rem;
}
.profil-form .delete-btn:hover { background: #d32f2f; }

/* === Astuces === */
.astuces-container {
  max-width: 800px;
  margin: 2rem auto;
  background: #ffffff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.astuces-container h2 {
  font-size: 1.8rem;
  color: #004080;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #004080;
  padding-bottom: 0.5rem;
}
.astuce-bloc {
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed #ccc;
}
.astuce-bloc h3 {
  font-size: 1.4rem;
  color: #003060;
  margin-bottom: 0.6rem;
}
.astuce-bloc p {
  margin: 0.4rem 0;
  font-size: 1rem;
  line-height: 1.6;
}
.astuce-bloc small {
  display: block;
  color: #777;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}
.astuces-container .btn-publier {
  display: inline-block;
  margin-bottom: 2rem;
  background-color: #004080;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.2s;
}
.astuces-container .btn-publier:hover { background-color: #003060; }

/* ===== Accessibilité ===== */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ===== Ligne ticker + recherche (top-strip) ===== */
.top-strip{background:#000;border-bottom:2px solid #444}
.top-strip__inner{
  max-width:1024px;margin:0 auto;padding:.5rem 1rem;
  display:flex;align-items:center;gap:1rem
}
.ticker{
  flex:1 1 auto;min-width:0;overflow:hidden;
  white-space:nowrap;              /* 🔒 1 seule ligne */
}
.ticker .defilement{
  display:inline-block;
  padding-left:100%;
  white-space:nowrap;              /* 🔒 1 seule ligne */
  animation:defilement 60s linear infinite; /* plus fluide/rapide */
  will-change: transform;
}
.ticker .item{display:inline-block;margin-right:3rem;color:#fff}

/* ===== Barre de recherche slim (jw.org-like) ===== */
.global-search {                 /* reset pour ne pas hériter du style global des formulaires */
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  max-width: none !important;
}
.global-search.slim{flex:0 0 auto;position:relative}
.global-search.slim input[type="search"]{
  width:26ch; max-width:40vw; height:36px;
  padding:0 .75rem 0 2.25rem;     /* place pour l’icône */
  border:1px solid #d5dbe3; border-radius:999px;
  background:#fff; font-size:.95rem; line-height:36px;
  box-shadow: inset 0 1px 0 #f3f5f8, 0 1px 2px rgba(0,0,0,.04);
  outline: none; color:#222
}
.global-search.slim input[type="search"]::placeholder{color:#98a2ad}
.global-search.slim input[type="search"]:focus{
  border-color:#9db8db; box-shadow:0 0 0 3px rgba(157,184,219,.25)
}
/* Bouton loupe (icône en CSS) */
.global-search.slim button{
  position:absolute; left:.45rem; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border:0; background:transparent; padding:0; cursor:pointer
}
.global-search.slim button::before{
  content:""; display:block; width:14px; height:14px; border:2px solid #7c8a99; border-radius:50%;
  position:absolute; left:2px; top:2px;
}
.global-search.slim button::after{
  content:""; display:block; width:8px; height:2px; background:#7c8a99;
  position:absolute; right:-2px; bottom:2px; transform:rotate(45deg)
}

/* Responsive : sous 600px, on met la recherche sur la ligne suivante */
@media (max-width:600px){
  .top-strip__inner{flex-wrap:wrap}
  .ticker{order:1;flex:1 1 100%}
  .global-search.slim{order:2;flex:1 1 100%}
  .global-search.slim input[type="search"]{width:100%;max-width:100%}
}

/* === Onglets de recherche === */
.search-tabs { margin-top: 1rem; }
.tabs {
  display: flex; gap: .5rem; align-items: center;
  border-bottom: 1px solid #e5eaf0; overflow-x: auto; padding-bottom: .25rem;
}
.tab-btn {
  appearance: none; border: 1px solid #d5dbe3; background: #f7f9fc;
  padding: .45rem .75rem; border-radius: .5rem; font-size: .95rem; cursor: pointer;
  white-space: nowrap; display: inline-flex; align-items: center; gap: .5rem;
}
.tab-btn[aria-selected="true"] {
  background: #333; color:#fff; border-color: #9db8db; box-shadow: 0 0 0 3px rgba(157,184,219,.2) inset;
}
.tab-badge {
  display:inline-block; min-width:1.5em; padding:0 .45em; text-align:center;
  border-radius: 999px; background:#e9eef6; color:#27466b; font-weight:600; font-size:.85em;
}

.tab-panel { display: none; padding: 1rem 0; }
.tab-panel.active { display: block; }

.result-card {
  border:1px solid #e5eaf0; border-radius:.5rem; padding:.75rem; margin:.5rem 0;
  background:#fff;
}

/* tri & actions (facultatif) */
.tab-tools { display:flex; align-items:center; gap:.5rem; margin:.5rem 0 0 0; }
.tab-tools .select { padding:.35rem .5rem; border:1px solid #cfd7df; border-radius:.35rem; }