/*****************************************************
 * Fichier   : /assets/css/sosr.css
 * Description: Styles généraux du site SOSRomandie.ch
 * Auteur     : Henri
 * Projet     : SOSRomandie.ch
 * Version    : 1.6 – 2025-10-15
 *****************************************************/

/* =========================================================
   1. Variables et couleurs
   ========================================================= */
:root {
  --sosr-red: #D63939;
  --sosr-black: #121212;
}

/* =========================================================
   2. Layout général (footer collé)
   ========================================================= */
html, body {
  min-height: 100vh;
  height: 100%;
  background: #fff;               /* Fond global blanc (conforme aux pages) */
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Bande pleine largeur blanche pour la zone contenu */
.sosr-page-bg { background:#fff; }

/* =========================================================
   3. HEADER (logo, slogan, sticky + correctif d’ombre)
   ========================================================= */
.sosr-header.sticky-top {
  position: sticky;
  top: 0;
  width: 100%;
  background: #fff;
  box-shadow: none !important;              /* Fix double ombre */
  border-bottom: none !important;           /* Pas de bordure visible */
  z-index: 1050;
  will-change: box-shadow;
  transition: box-shadow 0.2s;
}
.sosr-header {
  background: #fff;
  padding-top: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: none !important;
}

/* Logo */
.sosr-logo {
  width: 82px;
  height: 82px;
  object-fit: contain;
  display: block;
}

/* Titre + slogan */
.sosr-brand {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 2.1rem;
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--sosr-black);
  margin-bottom: .1rem;
}
.sosr-tagline {
  color: #888;
  font-size: 1.1rem;
}

/* Prénom (utilisateur connecté) à droite dans l’en-tête */
.sosr-user {
  color:#888;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* =========================================================
   4. Barres rouges décoratives (dessus & dessous du menu)
   ========================================================= */
.sosr-header-bar {
  height: 1.5px;
  background: var(--sosr-red);
  width: 100%;
  margin: 0;
  border: none;
}

/* Ligne du bas + ombre collée via ::after */
.sosr-header-bar-bottom {
  position: relative;
  height: 3px;
  background: var(--sosr-red);
  width: 100%;
  margin: 0;
  border: none;
  z-index: 2;
}
.sosr-header-bar-bottom::after {
  content: "";
  display: block;
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 12px; /* ombre collée — ajustable (8–16px) */
  background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0));
  pointer-events: none;
  z-index: 1;
}

/* =========================================================
   5. Menu principal (fond rouge sur hover)
   ========================================================= */
.sosr-main-nav {
  background:#fff;
  text-align:center;
  height:42px;            /* hauteur fixe du ruban */
  padding:0;              /* pas d’espace → le lien remplit entre les traits */
}
.sosr-main-nav ul {
  display:inline-flex;
  align-items:stretch;    /* les <a> prennent toute la hauteur */
  gap: 2.3rem;
  margin:0; padding:0;
  list-style:none;
  height:100%;
}
.sosr-main-nav li { margin:0; padding:0; height:100%; }

.sosr-main-nav a {
  display:flex;           /* centre verticalement le texte */
  align-items:center;
  height:100%;            /* remplit du trait haut au trait bas */
  padding:0 24px;         /* largeur des onglets */
  text-decoration:none;   /* jamais souligné */
  font-weight:600;
  font-size:1.08rem;
  letter-spacing:0.03em;
  color: var(--sosr-red); /* NORMAL: texte rouge, fond blanc */
  background:#fff;
  border:none;
  transition: background .18s, color .18s;
  cursor:pointer;
}

/* HOVER: fond rouge plein, texte blanc */
.sosr-main-nav a:hover,
.sosr-main-nav a:focus {
  background: var(--sosr-red);
  color:#fff;
  text-decoration:none;
}

/* ACTIF: fond blanc, rouge délavé, désactivé */
.sosr-main-nav a.active {
  background:#fff !important;
  color:#b45a5a !important;
  pointer-events:none;
  cursor: default;
}

/* =========================================================
   6. Main (pour le flex-grow du layout sticky footer)
   ========================================================= */
main.flex-grow-1 {
  flex: 1 0 auto;
  background: #fff;
}

/* =========================================================
   7. FOOTER
   ========================================================= */
.sosr-footer {
  background: var(--sosr-red);
  color: #fff;
  font-size: 1rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  border-top: none;
  flex-shrink: 0;
}
.sosr-footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sosr-link-footer {
  color: #fff !important;
  text-decoration: none;
  margin-left: 1.3rem;
  transition: color .15s, text-decoration .15s;
}
.sosr-link-footer:hover {
  color: #FFD978 !important;
  text-decoration: underline;
}
.sosr-footer svg {
  width: 26px;
  height: 26px;
  vertical-align: middle;
}

/* =========================================================
   8. Responsive global (logo, menu, footer)
   ========================================================= */
@media (max-width: 600px) {
  .sosr-logo { width: 48px; height: 48px; }
  .sosr-brand { font-size: 1.3rem; }
  .sosr-main-nav ul { gap: 1.1rem; }
  .sosr-footer svg { width: 20px; height: 20px; }
}

/* =========================================================
   9. FORMULAIRES (connexion / inscription / confirmation)
   ========================================================= */
.sosr-login-card {
  width: 100%;
  max-width: clamp(380px, 70vw, 960px);
  margin: 70px auto 0 auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 32px 0 rgba(44,37,37,0.12),
              0 1px 2px #d639393c;
  padding: clamp(1.6rem, 2.8vw, 2.6rem)
           clamp(1rem, 2.2vw, 2rem)
           clamp(1.4rem, 2.5vw, 2.3rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  border: 1.5px solid #ffeaea;
}
.sosr-login-card.small { max-width: 380px; }

.sosr-login-title {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: bold;
  font-size: 2.1rem;
  color: var(--sosr-black);
  margin-bottom: 1.3rem;
  text-align: center;
}
@media (max-width: 600px) {
  .sosr-login-title { font-size: 1.25rem; }
}

/* =========================================================
   10. Boutons (hauteur harmonisée)
   ========================================================= */
.sosr-login-btn, .btn2 {
  background: var(--sosr-red);
  color: #fff;
  border: 2px solid var(--sosr-red);
  border-radius: 2em;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  padding: 0.48em 1.4em;
  box-shadow: 0 1px 6px rgba(44,37,37,0.08);
  transition: background .18s, color .18s, border .18s;
  cursor: pointer;
  display: inline-block;
  line-height: 1.3;
  text-align: center;
  text-decoration: none !important;
}
.sosr-login-btn:hover, .sosr-login-btn:focus,
.btn2:hover, .btn2:focus {
  background: #fff;
  color: var(--sosr-black);
  border: 2px solid var(--sosr-red);
}

.sosr-btn-retour, .btn1 {
  background: #fff;
  color: var(--sosr-black);
  border: 2px solid var(--sosr-red);
  border-radius: 2em;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.48em 1.4em;
  margin-left: 0.8em;
  transition: background .18s, color .18s, border .18s;
  cursor: pointer;
  display: inline-block;
  line-height: 1.3;
  text-align: center;
  text-decoration: none !important;
}
.sosr-btn-retour:hover, .sosr-btn-retour:focus,
.btn1:hover, .btn1:focus {
  background: var(--sosr-red);
  color:  #fff;
  border: 2px solid var(--sosr-red);
}

/* =========================================================
   11. Liens et textes d'accompagnement
   ========================================================= */
.sosr-login-links {
  text-align: center;
  font-size: 1.09rem;
  color: #444;
  margin-top: 2.2em;
}
.sosr-login-links .mb-1 {
  margin-bottom: 0.24em !important;
  font-size: 1.01rem;
}