/* assets/styles/register.css */

/* 1) Variables de couleur */
:root {
  --burgundy-50: #f8f0f2;
  --burgundy-100: #f1e1e6;
  --burgundy-200: #e3c3ce;
  --burgundy-300: #d5a4b5;
  --burgundy-600: #922638;
  --burgundy-700: #7b1f30;
  --burgundy-800: #5f1722;
  --red-500:   #f56565;
  --red-200:   rgba(245,101,101,0.5);
}

/* 2) Utilitaires génériques */
.w-full            { width: 100%; }
.max-w-xl          { max-width: 36rem; }       /* 576px */
.min-h-screen      { min-height: 100vh; }
.p-4               { padding: 1rem; }
.p-6               { padding: 1.5rem; }
.pt-2              { padding-top: 0.5rem; }
.mb-4              { margin-bottom: 1rem; }
.mb-1              { margin-bottom: 0.25rem; }
.mt-6              { margin-top: 1.5rem; }
.overflow-hidden   { overflow: hidden; }
.transition-all    { transition-property: all; }
.transition-colors { transition-property: color, background-color, border-color, box-shadow; }
.duration-300      { transition-duration: 300ms; }
.duration-500      { transition-duration: 500ms; }
.ease-in-out       { transition-timing-function: ease-in-out; }

.flex              { display: flex; }
.items-center      { align-items: center; }
.justify-center    { justify-content: center; }
.justify-between   { justify-content: space-between; }
.grid              { display: grid; }
.grid-cols-1       { grid-template-columns: repeat(1, minmax(0,1fr)); }
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.gap-4             { gap: 1rem; }
.space-y-2 > * + *  { margin-top: 0.5rem; }
.space-y-4 > * + *  { margin-top: 1rem; }
.space-y-6 > * + *  { margin-top: 1.5rem; }
.space-x-2 > * + *  { margin-left: 0.5rem; }
.space-x-4 > * + *  { margin-left: 1rem; }
.h-2\.5            { height: 0.625rem; }
.h-5               { height: 1.25rem; }
.w-5               { width:  1.25rem; }
.rounded-lg        { border-radius: 0.5rem; }
.rounded-xl        { border-radius: 0.75rem; }
.rounded-full      { border-radius: 9999px; }
.shadow-lg         { box-shadow: 0 10px 15px rgba(0,0,0,0.1); }
.bg-white          { background-color: #fff; }
.bg-burgundy-50    { background-color: var(--burgundy-50); }
.bg-burgundy-100   { background-color: var(--burgundy-100); }
.bg-burgundy-200   { background-color: var(--burgundy-200); }
.bg-burgundy-600   { background-color: var(--burgundy-600); }
.bg-burgundy-700   { background-color: var(--burgundy-700); }
.text-white        { color: #fff; }
.text-burgundy-600 { color: var(--burgundy-600); }
.text-burgundy-700 { color: var(--burgundy-700); }
.text-burgundy-800 { color: var(--burgundy-800); }
.text-red-500      { color: var(--red-500); }
.border            { border-width: 1px; border-style: solid; }
.border-burgundy-300 { border-color: var(--burgundy-300); }
.border-red-500    { border-color: var(--red-500); }

/* 3) Focus & hover */
.focus\:outline-none:focus       { outline: none; }
.focus\:ring-2:focus             { box-shadow: 0 0 0 2px currentColor; }
.focus\:ring-burgundy-200:focus  { box-shadow: 0 0 0 2px var(--burgundy-200); }
.focus\:border-burgundy-500:focus{ border-color: var(--burgundy-500); }

.hover\:bg-burgundy-700:hover    { background-color: var(--burgundy-700); }
.hover\:bg-burgundy-200:hover    { background-color: var(--burgundy-200); }

/* 4) Input & radio styles */
input, textarea {
  font: inherit;
}
.form-radio {
  accent-color: var(--burgundy-600);
}


/* ==================================================================== */
/* HEADER PERSONNALISÉ 100% RESPONSIVE : BANNIÈRE + LOGOS + TEXTE BLANC  */
/* ==================================================================== */

/* 1) CONTENEUR GLOBAL DU HEADER */
.custom-header {
  position: relative;
  width: 100%;          /* Evite le scrollbar horizontal sur mobile */
  height: 450px;        /* Hauteur par défaut pour desktop */
  overflow: hidden;

  /* Dégradé noir semi-transparent + image de fond */
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('../images/header-banner.jpg') no-repeat center center;
  background-size: cover;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* 2) LOGOS (position absolue) */
.header-logo {
  position: absolute;
  top: 50%;                       /* Centre vertical approximatif */
  transform: translateY(-50%);
  height: 300px;                  /* Taille Desktop */
  width: auto;
  border-radius: 50%;
  z-index: 2;                     /* Au-dessus du calque sombre */
}

/* Logo Pipeline à gauche */
.header-logo--left {
  left: 100px;                    /* Espace Desktop à gauche */
}

/* Logo STEM/Sénat à droite */
.header-logo--right {
  height: 150px; 
  right: 100px;                   /* Espace Desktop à droite */
  top: 80%;  
  border-radius: 60%;
  border: 10px solid var(--burgundy-800);
}

/* 3) TEXTE SUPERPOSÉ (blanc + ombre) */
.header-text {
  position: absolute;
  top: 50%;                       /* Centre vertical approximatif */
  left: 50%;                      /* Centre horizontal */
  transform: translate(-50%, -50%);
  text-align: center;
  color: #ffffff;                 /* Texte blanc pour contraster */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  z-index: 2;                     /* Devant le calque sombre */
}

/* Titre principal en blanc */
.header-text h1,
.header-text h2 {
  font-size: 2.5rem;              /* ~40px pour desktop */
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}

/* Sous-texte (p) en blanc */
.header-text p {
  font-size: 1.25rem;             /* ~20px pour desktop */
  margin: 0.5rem 0 0;
  font-weight: 400;
}

/* ==================================================================== */
/*                        MEDIA QUERIES                                  */
/* ==================================================================== */

/* === Tablette (largeur ≤ 1024px) === */
@media (max-width: 1024px) {
  .custom-header {
    height: 350px;                /* Réduire hauteur de la bannière */
  }
  .header-logo {
    height: 200px;                /* Logos plus petits */
  }
  .header-logo--left { left: 60px; }   /* Rapprocher un peu des bords */
  .header-logo--right { right: 60px; }
  .header-text h1,
  .header-text h2 {
    font-size: 2rem;              /* ~32px */
  }
  .header-text p {
    font-size: 1rem;              /* ~16px */
  }
}

/* === Petit écran (largeur ≤ 768px) === */
@media (max-width: 768px) {
  .custom-header {
    height: 250px;                /* Bannière plus courte */
  }
  .header-logo {
    height: 120px;                /* Logos plus compacts */
  }
  .header-logo--left { left: 20px; }
  .header-logo--right { right: 20px; }
  .header-text h1,
  .header-text h2 {
    font-size: 1.75rem;           /* ~28px */
  }
  .header-text p {
    font-size: 0.9rem;            /* ~14px */
  }
}

/* === Mobile (largeur ≤ 480px) === */
@media (max-width: 480px) {
  .custom-header {
    height: 180px;                /* Bannière très courte */
  }
  .header-logo {
    height: 80px;                 /* Logos petits */
  }
  .header-logo--left { left: 10px; }
  .header-logo--right { right: 10px; }
  .header-text h1,
  .header-text h2 {
    font-size: 1.25rem;           /* ~20px */
  }
  .header-text p {
    font-size: 0.75rem;           /* ~12px */
  }
}


/* Spécifique au champ RGPD */
.form-checkbox {
  accent-color: var(--burgundy-600);
}

/* S’assurer que le label du RGPD a un peu de marge en-dessous */
label[for="registration_rgpdConsent"] {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.875rem; /* un peu plus petit si souhaité */
  line-height: 1.25;
}