/* =============================================================================
   LES AMIS DE JOSEPH — Feuille de style principale
   Identité visuelle inspirée de la couverture du bulletin paroissial
   Palette : Violet lavande #9d83b5 · Blanc #ffffff · Noir doux #1a1a1a
   ============================================================================= */

/* --- Variables CSS --------------------------------------------------------- */
:root {
  --adj-violet:        #9d83b5;
  --adj-violet-fonce:  #7a5f96;
  --adj-violet-clair:  #c4aed8;
  --adj-violet-pale:   #ede5f5;
  --adj-blanc:         #ffffff;
  --adj-gris-clair:    #f5f3f8;
  --adj-gris-moyen:    #e8e2f0;
  --adj-texte:         #1a1a1a;
  --adj-texte-doux:    #3d3450;
  --adj-texte-leger:   #6b5e80;

  --adj-font-titre:    'EB Garamond', 'Garamond', 'Georgia', serif;
  --adj-font-sous:     'Cormorant Garamond', 'Palatino Linotype', 'Book Antiqua', serif;
  --adj-font-corps:    'Source Sans 3', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --adj-font-caps:     'Cormorant SC', 'Palatino Linotype', serif;

  --adj-rayon:         0.5rem;
  --adj-rayon-lg:      1rem;
  --adj-ombre:         0 4px 20px rgba(157, 131, 181, 0.25);
  --adj-ombre-forte:   0 8px 40px rgba(122, 95, 150, 0.35);
}

/* --- Import des polices Google Fonts --------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Cormorant+SC:wght@400;600&family=Source+Sans+3:wght@300;400;600&display=swap');

/* --- Reset et base --------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--adj-font-corps);
  color: var(--adj-texte);
  background-color: var(--adj-gris-clair);
  margin: 0;
  padding: 0;
  line-height: 1.6;
}


/* =============================================================================
   VERSION 1 — EN-TÊTE LARGE (page de connexion / page d'accueil)
   Reproduit fidèlement la couverture du bulletin :
   fond blanc en haut, vague violette en bas, titre serif imposant
   ============================================================================= */

.adj-header-large {
  position: relative;
  width: 100%;
  background-color: var(--adj-blanc);
  overflow: hidden;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* La vague est rendue par un SVG inline dans le HTML (.adj-header-large__vague) */

/* SVG vague — positionné en absolu en bas de l'en-tête */
.adj-header-large__vague {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70%;
  z-index: 0;
  display: block;
  overflow: visible;
}

.adj-header-large__vague svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Contenu de l'en-tête large */
.adj-header-large__inner {
  position: relative;
  z-index: 1;
  padding: 2rem 3rem 0 3rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Ligne supérieure : titre + numéro */
.adj-header-large__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* Grand titre "Les Amis de Joseph" */
.adj-header-large__titre {
  font-family: var(--adj-font-titre);
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--adj-texte);
  letter-spacing: -0.01em;
  margin: 0;
  flex: 1;
}

/* (Numéro de bulletin supprimé — remplacé par le médaillon vitrail) */

/* Zone basse : sous-titre en petites capitales sur fond violet */
.adj-header-large__bas {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 1.2rem 3rem;
  text-align: left;
}

.adj-header-large__sous-titre {
  font-family: var(--adj-font-caps);
  font-size: clamp(1rem, 2.5vw, 1.8rem);
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.12em;
  color: var(--adj-blanc);
  margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Médaillon vitrail — chevauchant la frontière blanc/violet, comme sur la couverture */
.adj-header-large__medaillon {
  position: absolute;
  right: 3rem;
  top: 15%;
  z-index: 3;
  width: clamp(130px, 20vw, 240px);
  height: clamp(130px, 20vw, 240px);
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid var(--adj-blanc);
  box-shadow: var(--adj-ombre-forte);
}

.adj-header-large__medaillon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =============================================================================
   VERSION 2 — BANDEAU (navigation / en-tête des pages intérieures)
   Version compacte horizontale avec la même identité visuelle
   ============================================================================= */

.adj-bandeau {
  position: relative;
  width: 100%;
  background: linear-gradient(
    to right,
    var(--adj-blanc) 0%,
    var(--adj-blanc) 55%,
    var(--adj-violet) 55%,
    var(--adj-violet) 100%
  );
  overflow: hidden;
  height: 80px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 12px rgba(122, 95, 150, 0.2);
}

/* Transition douce entre blanc et violet (courbe) */
.adj-bandeau::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--adj-violet);
  clip-path: ellipse(60% 200% at 65% 50%);
  z-index: 0;
}

.adj-bandeau__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
}

/* Logo / titre compact */
.adj-bandeau__logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
  text-decoration: none;
  flex-shrink: 0;
}

.adj-bandeau__logo-titre {
  font-family: var(--adj-font-titre);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--adj-texte);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.adj-bandeau__logo-sous {
  font-family: var(--adj-font-caps);
  font-size: 0.6rem;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.15em;
  color: var(--adj-texte-leger);
  white-space: nowrap;
  text-transform: uppercase;
}

/* Séparateur vertical */
.adj-bandeau__sep {
  width: 1px;
  height: 40px;
  background-color: var(--adj-violet-clair);
  flex-shrink: 0;
  margin: 0 0.5rem;
}

/* Navigation principale dans le bandeau */
.adj-bandeau__nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
}

.adj-bandeau__nav a,
.adj-bandeau__nav-link {
  font-family: var(--adj-font-corps);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--adj-texte-doux);
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border-radius: var(--adj-rayon);
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.adj-bandeau__nav a:hover,
.adj-bandeau__nav-link:hover {
  background-color: var(--adj-violet-pale);
  color: var(--adj-violet-fonce);
}

.adj-bandeau__nav a.is-active,
.adj-bandeau__nav-link.is-active {
  background-color: var(--adj-violet);
  color: var(--adj-blanc);
  font-weight: 600;
}

/* Zone droite du bandeau (utilisateur connecté, etc.) */
.adj-bandeau__droite {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  flex-shrink: 0;
}

.adj-bandeau__utilisateur {
  font-family: var(--adj-font-corps);
  font-size: 0.85rem;
  color: var(--adj-blanc);
  font-weight: 300;
}

/* Bouton déconnexion dans le bandeau */
.adj-bandeau__btn-deconnexion {
  font-family: var(--adj-font-corps);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--adj-violet-fonce);
  background-color: var(--adj-blanc);
  border: none;
  border-radius: var(--adj-rayon);
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.adj-bandeau__btn-deconnexion:hover {
  background-color: var(--adj-violet-pale);
  color: var(--adj-violet-fonce);
}


/* =============================================================================
   COMPOSANTS COMMUNS — Formulaires, boutons, cartes (style Bulma-compatible)
   ============================================================================= */

/* --- Boutons --------------------------------------------------------------- */
.adj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--adj-font-corps);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--adj-rayon);
  padding: 0.6rem 1.5rem;
  cursor: pointer;
  text-decoration: none;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  letter-spacing: 0.02em;
}

.adj-btn--primaire {
  background-color: var(--adj-violet);
  color: var(--adj-blanc);
  border-color: var(--adj-violet);
}

.adj-btn--primaire:hover {
  background-color: var(--adj-violet-fonce);
  border-color: var(--adj-violet-fonce);
  box-shadow: var(--adj-ombre);
}

.adj-btn--secondaire {
  background-color: transparent;
  color: var(--adj-violet);
  border-color: var(--adj-violet);
}

.adj-btn--secondaire:hover {
  background-color: var(--adj-violet-pale);
}

.adj-btn--blanc {
  background-color: var(--adj-blanc);
  color: var(--adj-violet-fonce);
  border-color: var(--adj-blanc);
}

.adj-btn--blanc:hover {
  background-color: var(--adj-violet-pale);
  border-color: var(--adj-violet-pale);
}

/* --- Formulaire de connexion ----------------------------------------------- */
.adj-login-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--adj-gris-clair);
}

.adj-login-card {
  background-color: var(--adj-blanc);
  border-radius: var(--adj-rayon-lg);
  box-shadow: var(--adj-ombre-forte);
  padding: 2.5rem 2.5rem 2rem;
  width: 100%;
  max-width: 420px;
  margin: 2rem auto;
}

.adj-login-card__titre {
  font-family: var(--adj-font-titre);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--adj-texte-doux);
  text-align: center;
  margin: 0 0 1.5rem;
}

/* --- Champs de formulaire (compatible Bulma .field / .control) ------------- */
.adj-field label,
.adj-label {
  font-family: var(--adj-font-corps);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--adj-texte-leger);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.35rem;
}

.adj-input,
.adj-select select,
.adj-textarea {
  font-family: var(--adj-font-corps);
  font-size: 0.95rem;
  color: var(--adj-texte);
  background-color: var(--adj-blanc);
  border: 1.5px solid var(--adj-gris-moyen);
  border-radius: var(--adj-rayon);
  padding: 0.55rem 0.85rem;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}

.adj-input:focus,
.adj-select select:focus,
.adj-textarea:focus {
  border-color: var(--adj-violet);
  box-shadow: 0 0 0 3px rgba(157, 131, 181, 0.2);
}

/* --- Cartes de contenu ----------------------------------------------------- */
.adj-carte {
  background-color: var(--adj-blanc);
  border-radius: var(--adj-rayon-lg);
  box-shadow: var(--adj-ombre);
  padding: 1.5rem;
  border-top: 4px solid var(--adj-violet);
}

.adj-carte__titre {
  font-family: var(--adj-font-titre);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--adj-texte-doux);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--adj-gris-moyen);
}

/* --- Badges de statut ------------------------------------------------------ */
.adj-badge {
  display: inline-block;
  font-family: var(--adj-font-corps);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
}

.adj-badge--actif    { background-color: #d4edda; color: #276749; }
.adj-badge--expire   { background-color: #fde8e8; color: #9b1c1c; }
.adj-badge--attente    { background-color: var(--adj-violet-pale); color: var(--adj-violet-fonce); }
.adj-badge--en_attente { background-color: var(--adj-violet-pale); color: var(--adj-violet-fonce); }
.adj-badge--cadeau     { background-color: #fff3cd; color: #856404; }

/* --- Tableau de données ---------------------------------------------------- */
.adj-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--adj-font-corps);
  font-size: 0.9rem;
}

.adj-table thead th {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--adj-texte-leger);
  background-color: var(--adj-gris-clair);
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 2px solid var(--adj-violet-clair);
}

.adj-table tbody td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--adj-gris-moyen);
  color: var(--adj-texte);
  vertical-align: middle;
}

.adj-table tbody tr:hover td {
  background-color: var(--adj-violet-pale);
}

/* --- Pied de page ---------------------------------------------------------- */
.adj-footer {
  background-color: var(--adj-violet);
  color: var(--adj-blanc);
  text-align: center;
  padding: 1rem 2rem;
  font-family: var(--adj-font-caps);
  font-size: 0.8rem;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  margin-top: auto;
}

.adj-footer a {
  color: var(--adj-violet-pale);
  text-decoration: none;
}

.adj-footer a:hover {
  color: var(--adj-blanc);
  text-decoration: underline;
}

/* --- Surcharges Bulma ------------------------------------------------------ */
/* Ces règles s'appliquent si Bulma est chargé en complément */
.navbar.adj-navbar {
  background-color: transparent;
  box-shadow: none;
}

.button.is-adj {
  background-color: var(--adj-violet);
  border-color: var(--adj-violet);
  color: var(--adj-blanc);
}

.button.is-adj:hover {
  background-color: var(--adj-violet-fonce);
  border-color: var(--adj-violet-fonce);
}

.tag.is-adj {
  background-color: var(--adj-violet);
  color: var(--adj-blanc);
}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 768px) {
  .adj-header-large__inner {
    padding: 1.5rem 1.5rem 0;
  }

  .adj-header-large__bas {
    padding: 1rem 1.5rem;
  }

  .adj-header-large__medaillon {
    right: 1rem;
    top: 5%;
    width: clamp(90px, 22vw, 140px);
    height: clamp(90px, 22vw, 140px);
  }

  .adj-bandeau {
    height: auto;
    min-height: 60px;
    flex-wrap: wrap;
    padding: 0.5rem 0;
  }

  .adj-bandeau__inner {
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
  }

  .adj-bandeau__nav {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }

  .adj-bandeau__sep {
    display: none;
  }

  .adj-login-card {
    margin: 1rem;
    padding: 1.5rem;
  }
}