/* ==========================================================================
   CRSAT — Centre de Recherche en Sciences Appliquées et Technologiques
   Couche d'identité visuelle.

   Ce fichier est chargé APRÈS style.css (thème Educenter de Themefisher) et
   en remplace la couche d'apparence : couleurs, typographie, composants.
   La grille Bootstrap et le balisage existant sont conservés — c'est ce qui
   permet de reprendre l'identité sans réécrire les 41 gabarits d'un coup.

   Palette dérivée du logo : violet de l'engrenage, rouge de l'atome.
   Aucune police distante n'est chargée : sur une connexion congolaise,
   chaque requête externe coûte plus cher que le gain esthétique.
   ========================================================================== */

:root {
  /* Marque */
  --crsat-violet:      #4A0FB5;
  --crsat-violet-700:  #3B0B92;
  --crsat-violet-600:  #5B21D0;
  --crsat-violet-300:  #B79CF2;
  --crsat-violet-100:  #EFE9FC;
  --crsat-violet-050:  #F7F4FE;
  --crsat-red:         #D7262E;
  --crsat-red-700:     #AE1D24;
  --crsat-red-100:     #FBE9EA;

  /* Neutres, légèrement biaisés vers le violet de la marque */
  --crsat-ink:         #14101F;
  --crsat-ink-2:       #443C5C;
  --crsat-mute:        #767090;
  --crsat-line:        #E4DFF0;
  --crsat-line-2:      #CFC7E4;
  --crsat-ground:      #FFFFFF;
  --crsat-ground-2:    #F7F5FC;

  /* États */
  --crsat-ok:          #1B7A4B;
  --crsat-ok-100:      #E4F4EB;
  --crsat-warn:        #8A5600;
  --crsat-warn-100:    #FBF1DF;

  /* Typographie : piles système, zéro requête réseau */
  --crsat-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --crsat-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --crsat-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --crsat-radius: 4px;
  --crsat-shadow: 0 1px 2px rgba(20, 16, 31, .06), 0 8px 24px rgba(20, 16, 31, .07);
  --crsat-shadow-lg: 0 2px 4px rgba(20, 16, 31, .07), 0 18px 46px rgba(20, 16, 31, .13);
}

/* --------------------------------------------------------------------------
   Fondations
   -------------------------------------------------------------------------- */

body {
  font-family: var(--crsat-sans);
  color: var(--crsat-ink-2);
  background: var(--crsat-ground);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--crsat-sans);
  color: var(--crsat-ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  text-wrap: balance;
}

h1, .h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2, .h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3, .h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
h4, .h4 { font-size: 1.15rem; }

p { color: var(--crsat-ink-2); }

a { color: var(--crsat-violet); }
a:hover, a:focus { color: var(--crsat-violet-700); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--crsat-violet-300);
  outline-offset: 2px;
}

.font-secondary { font-family: var(--crsat-serif); }

/* Le thème d'origine peignait tout en jaune via ces utilitaires. */
.text-primary { color: var(--crsat-violet) !important; }
.bg-primary   { background-color: var(--crsat-violet) !important; }
.bg-gray      { background-color: var(--crsat-ground-2) !important; }
.border-primary { border-color: var(--crsat-line-2) !important; }
.text-color   { color: var(--crsat-ink-2) !important; }
.text-lighten { color: rgba(255, 255, 255, .82) !important; }

/* --------------------------------------------------------------------------
   En-tête et navigation
   -------------------------------------------------------------------------- */

.header { box-shadow: 0 1px 0 var(--crsat-line); background: var(--crsat-ground); }

.top-header {
  background: var(--crsat-violet) !important;
  font-size: 13.5px;
}
.top-header,
.top-header a,
.top-header .text-color { color: rgba(255, 255, 255, .88) !important; }
.top-header a:hover { color: #fff !important; }
.top-header strong { color: #fff; letter-spacing: .06em; font-weight: 600; }

.navigation { border-top: 0 !important; background: var(--crsat-ground); }

.navbar-brand img { max-height: 62px; width: auto; }

.navbar .nav-link {
  color: var(--crsat-ink) !important;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  padding: 1.35rem .9rem !important;
  position: relative;
}
.navbar .nav-link:hover { color: var(--crsat-violet) !important; }

.navbar .nav-item.active > .nav-link,
.navbar .nav-item.active > .nav-link:hover { color: var(--crsat-violet) !important; }

/* Soulignement de l'onglet courant : remplace le fond jaune du thème. */
.navbar .nav-item.active > .nav-link::after,
.navbar .nav-link:hover::after {
  content: "";
  position: absolute;
  left: .9rem;
  right: .9rem;
  bottom: 1rem;
  height: 2px;
  background: var(--crsat-red);
}

.navbar-toggler {
  border: 1px solid var(--crsat-line-2);
  border-radius: var(--crsat-radius);
  padding: .45rem .6rem;
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.btn {
  font-family: var(--crsat-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  border-radius: var(--crsat-radius);
  padding: .85rem 1.9rem;
  border: 2px solid transparent;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.btn-primary,
.btn-main,
.btn.btn-primary {
  background: var(--crsat-violet) !important;
  border-color: var(--crsat-violet) !important;
  color: #fff !important;
}
/* Survol des boutons : ne pas toucher aux couleurs de texte du thème.
   Le thème fait glisser un panneau colore (.btn::before) par-dessus le
   bouton et bascule la couleur du texte pour rester lisible SUR ce panneau :

     .btn-primary::before { background: #fff }   panneau blanc
     .btn-primary:hover   { color: #4A0FB5 }     texte violet sur le panneau

   Forcer le texte en blanc au survol donnait donc du blanc sur blanc.
   Apres la substitution de teinte, les trois paires sont coherentes :
     .btn-primary        panneau blanc   + texte violet
     .btn-outline-primary panneau blanc  + texte violet
     .btn-light          panneau violet  + texte blanc
   On laisse faire, et on se contente de nos propres classes plus bas. */
.btn-main:hover,
.btn-main:focus {
  background-color: var(--crsat-violet-700);
  border-color: var(--crsat-violet-700);
}

.btn-accent {
  background: var(--crsat-red);
  border-color: var(--crsat-red);
  color: #fff;
}
.btn-accent:hover { background: var(--crsat-red-700); border-color: var(--crsat-red-700); color: #fff; }

/* .btn-outline est notre classe : le theme ne lui fournit pas de panneau,
   il faut donc lui donner son propre survol. .btn-outline-primary, elle,
   appartient au theme et garde son mecanisme. */
.btn-outline {
  background: transparent;
  border-color: var(--crsat-violet);
  color: var(--crsat-violet);
}
.btn-outline::before { background-color: var(--crsat-violet); }
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active { color: #fff; border-color: var(--crsat-violet); }

.btn-accent::before { background-color: var(--crsat-red-700); }
.btn-accent:hover, .btn-accent:focus { color: #fff; }

.btn-ghost::before { background-color: var(--crsat-violet-050); }
.btn-ghost:hover, .btn-ghost:focus { color: var(--crsat-violet); border-color: var(--crsat-violet); }

.btn-ghost {
  background: transparent;
  border-color: var(--crsat-line-2);
  color: var(--crsat-ink);
}
.btn-ghost:hover { border-color: var(--crsat-violet); color: var(--crsat-violet); }

/* --------------------------------------------------------------------------
   Sections et titres
   -------------------------------------------------------------------------- */

.section    { padding: 88px 0; }
.section-sm { padding: 56px 0; }

.section-title {
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 36px;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background: var(--crsat-red);
}
.text-center .section-title::after,
.section-title.text-center::after { left: 50%; transform: translateX(-50%); }

.eyebrow {
  display: inline-block;
  font-family: var(--crsat-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--crsat-violet);
  margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   Hero et bandeaux de page
   -------------------------------------------------------------------------- */

.hero-section { min-height: 78vh; }

/* --------------------------------------------------------------------------
   Bandeau d'accueil : photos qui defilent sous le texte anime
   Deux rotations independantes se superposent — les photos en fond, les
   messages par-dessus — comme dans la version d'origine.
   -------------------------------------------------------------------------- */

.heroku {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #1D0842;
}

.heroku .hero-bg { position: absolute; inset: 0; z-index: 0; }

.heroku .hero-bg-item {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}
.heroku .hero-bg-item.is-active { opacity: 1; }

/* Le voile reprend exactement les opacites du reste du site. */
.heroku .hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg, rgba(29, 8, 66, .70) 0%, rgba(29, 8, 66, .54) 52%, rgba(74, 15, 181, .41) 100%);
}

.heroku .info { position: relative; z-index: 2; width: 100%; padding: 60px 0; }

.heroku h1 {
  color: #fff;
  font-family: var(--crsat-serif);
  font-weight: 600;
  letter-spacing: -.015em;
}
.heroku p { color: rgba(255, 255, 255, .9); font-size: 1.1rem; max-width: 46ch; }

/* Fleches et pastilles du defilement de texte, sur fond photo. */
.heroku .prevArrow,
.heroku .nextArrow {
  background: rgba(255, 255, 255, .14);
  border: 0;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.heroku .prevArrow:hover,
.heroku .nextArrow:hover { background: rgba(255, 255, 255, .28); }

.heroku .slick-dots li button::before { color: #fff; opacity: .45; }
.heroku .slick-dots li.slick-active button::before { color: #fff; opacity: 1; }

@media (max-width: 767px) {
  .heroku { min-height: 62vh; }
  .heroku .info { padding: 40px 0; }
}

/* Le bloc des axes de recherche remonte de 100 px sur le bandeau : c'est le
   parti pris du theme (.feature-blocks { margin-top: -100px }).
   Sans position ni z-index, il restait SOUS le voile du carrousel, qui est
   un element positionne — d'ou la teinte violette et l'image visible au
   travers. On le fait passer devant, et on lui garantit un fond opaque. */
.sur-le-bandeau {
  position: relative;
  z-index: 3;
}
.sur-le-bandeau .feature-blocks {
  position: relative;
  z-index: 3;
  background-color: var(--crsat-ground-2) !important;
}

/* Voile pose sur les photos de fond. Opacites reduites de 25 % par rapport
   au premier reglage (0,93 / 0,72 / 0,55), qui masquait trop l'image.
   Le texte reste lisible : il est blanc sur la partie la plus dense. */
.hero-section.overlay::before,
.heroku .overlay::before,
.page-title-section.overlay::before {
  background: linear-gradient(105deg, rgba(29, 8, 66, .70) 0%, rgba(29, 8, 66, .54) 52%, rgba(74, 15, 181, .41) 100%) !important;
}

.hero-section h1,
.hero-section .h1 {
  color: #fff;
  font-family: var(--crsat-serif);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.hero-section p { color: rgba(255, 255, 255, .88); font-size: 1.1rem; max-width: 46ch; }

.page-title-section { padding: 92px 0 78px; }
.page-title-section .custom-breadcrumb a { color: var(--crsat-violet-300) !important; }
.page-title-section .custom-breadcrumb .nasted { color: #fff !important; }
.page-title-section h1,
.page-title-section .h1,
.page-title-section .h2,
.page-title-section .h3 { color: #fff; }

/* --------------------------------------------------------------------------
   Cartes
   -------------------------------------------------------------------------- */

.card {
  border: 1px solid var(--crsat-line) !important;
  border-radius: var(--crsat-radius) !important;
  background: var(--crsat-ground);
  overflow: hidden;
  height: 100%;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card.hover-shadow:hover,
.hover-shadow:hover {
  box-shadow: var(--crsat-shadow-lg) !important;
  border-color: var(--crsat-line-2) !important;
  transform: translateY(-2px);
}

.card-img, .card-img-top { border-radius: 0 !important; }
.card-img-top { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

.card-body { padding: 22px; }

.card-title {
  font-size: 1.12rem;
  line-height: 1.35;
  margin-bottom: .35rem;
  color: var(--crsat-ink);
}
a:hover .card-title { color: var(--crsat-violet); }

/* Pastille de date sur les vignettes d'événement */
.card-date {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--crsat-violet) !important;
  color: #fff !important;
  padding: 10px 16px;
  text-align: center;
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.card-date span {
  display: block;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.footer, footer.footer, .footer-section {
  background: #1A0B3D !important;
  color: rgba(255, 255, 255, .74);
}
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5,
.footer .h4, .footer .h5 { color: #fff; }
.footer a, .footer .text-color { color: rgba(255, 255, 255, .74) !important; }
.footer a:hover { color: #fff !important; }
.footer hr { border-color: rgba(255, 255, 255, .14); }

/* --------------------------------------------------------------------------
   Préchargeur — il masquait la page entière si le script échouait
   -------------------------------------------------------------------------- */

.preloader {
  background: var(--crsat-ground);
  display: flex;
  align-items: center;
  justify-content: center;
}
.preloader img { max-width: 96px; height: auto; }

/* --------------------------------------------------------------------------
   Formulaires — utilisés par la proposition d'intervention et le contact
   -------------------------------------------------------------------------- */

.field-input,
.form-control {
  width: 100%;
  font-family: var(--crsat-sans);
  font-size: 15px;
  color: var(--crsat-ink);
  background: var(--crsat-ground);
  border: 1px solid var(--crsat-line-2);
  border-radius: var(--crsat-radius);
  padding: .7rem .9rem;
  height: auto;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field-input:focus,
.form-control:focus {
  border-color: var(--crsat-violet);
  box-shadow: 0 0 0 3px var(--crsat-violet-100);
  outline: none;
}
.field-input::placeholder,
.form-control::placeholder { color: #A49DBB; }

.field-textarea { min-height: 170px; resize: vertical; line-height: 1.6; }

select.field-input,
select.form-control { appearance: none; background-image: none; padding-right: 2.2rem; }

.field-file {
  width: 100%;
  font-size: 14px;
  padding: .8rem;
  border: 1px dashed var(--crsat-line-2);
  border-radius: var(--crsat-radius);
  background: var(--crsat-ground-2);
}

/* Blocs de formulaire */
.form-section {
  border: 1px solid var(--crsat-line);
  border-radius: var(--crsat-radius);
  background: var(--crsat-ground);
  padding: 28px;
  margin-bottom: 22px;
}
.form-section > legend,
.form-section-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--crsat-ink);
  border-bottom: 1px solid var(--crsat-line);
  padding-bottom: 12px;
  margin-bottom: 22px;
  width: 100%;
}
.form-section-title .step {
  font-family: var(--crsat-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--crsat-violet);
  background: var(--crsat-violet-100);
  border-radius: 2px;
  padding: 3px 8px;
}

.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--crsat-ink);
  margin-bottom: 6px;
  letter-spacing: .01em;
}
.field .required { color: var(--crsat-red); margin-left: 2px; }
.field .field-help {
  display: block;
  font-size: 12.5px;
  color: var(--crsat-mute);
  margin-top: 6px;
  line-height: 1.5;
}
.field .field-error {
  display: block;
  font-size: 13px;
  color: var(--crsat-red-700);
  margin-top: 6px;
  font-weight: 500;
}
.field.has-error .field-input { border-color: var(--crsat-red); }

/* Choix multiples (mode de participation) */
.field-radio-group { display: flex; flex-wrap: wrap; gap: 10px; }
.field-radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--crsat-line-2);
  border-radius: var(--crsat-radius);
  padding: .6rem 1.1rem;
  margin: 0;
  cursor: pointer;
  font-weight: 500;
  color: var(--crsat-ink-2);
}
.field-radio-group input[type="radio"] { accent-color: var(--crsat-violet); }
.field-radio-group input[type="radio"]:checked + label,
.field-radio-group label:hover { border-color: var(--crsat-violet); color: var(--crsat-violet); }

/* Cases à cocher de consentement */
.field-consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 0;
  border-top: 1px solid var(--crsat-line);
}
.field-consent input[type="checkbox"] {
  margin-top: 4px;
  width: 17px;
  height: 17px;
  accent-color: var(--crsat-violet);
  flex: 0 0 auto;
}
.field-consent label {
  margin: 0;
  font-weight: 400;
  font-size: 14.5px;
  color: var(--crsat-ink-2);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Messages
   -------------------------------------------------------------------------- */

.alert-crsat {
  border-radius: var(--crsat-radius);
  padding: 16px 20px;
  margin-bottom: 24px;
  border-left: 3px solid;
  font-size: 15px;
}
.alert-crsat.is-success { background: var(--crsat-ok-100); border-color: var(--crsat-ok); color: #145F3B; }
.alert-crsat.is-error   { background: var(--crsat-red-100); border-color: var(--crsat-red); color: var(--crsat-red-700); }
.alert-crsat.is-info    { background: var(--crsat-violet-100); border-color: var(--crsat-violet); color: var(--crsat-violet-700); }
.alert-crsat.is-warning { background: var(--crsat-warn-100); border-color: var(--crsat-warn); color: var(--crsat-warn); }

/* --------------------------------------------------------------------------
   Étiquettes d'état
   -------------------------------------------------------------------------- */

.badge-crsat {
  display: inline-block;
  font-family: var(--crsat-mono);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 2px;
  white-space: nowrap;
}
.badge-crsat.is-pending  { background: var(--crsat-warn-100); color: var(--crsat-warn); }
.badge-crsat.is-accepted { background: var(--crsat-ok-100); color: var(--crsat-ok); }
.badge-crsat.is-rejected { background: var(--crsat-red-100); color: var(--crsat-red-700); }
.badge-crsat.is-neutral  { background: var(--crsat-violet-100); color: var(--crsat-violet-700); }

/* --------------------------------------------------------------------------
   Fiche événement
   -------------------------------------------------------------------------- */

.event-hero {
  background: linear-gradient(105deg, #1D0842 0%, #3B0B92 62%, var(--crsat-violet) 100%);
  color: #fff;
  padding: 76px 0 68px;
}
.event-hero h1 {
  color: #fff;
  font-family: var(--crsat-serif);
  font-weight: 600;
  margin-bottom: 14px;
}
.event-hero .lead-sub {
  color: rgba(255, 255, 255, .85);
  font-size: 1.12rem;
  max-width: 62ch;
  margin-bottom: 0;
}
.event-hero .back-link {
  color: var(--crsat-violet-300);
  font-size: 13.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 18px;
}
.event-hero .back-link:hover { color: #fff; }

/* Bandeau des informations pratiques */
.event-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--crsat-line);
  border: 1px solid var(--crsat-line);
  border-radius: var(--crsat-radius);
  overflow: hidden;
  margin: -46px 0 44px;
  box-shadow: var(--crsat-shadow);
}
.event-facts .fact { background: var(--crsat-ground); padding: 20px 22px; }
.event-facts .fact-label {
  display: block;
  font-family: var(--crsat-mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--crsat-mute);
  margin-bottom: 5px;
}
.event-facts .fact-value {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--crsat-ink);
  line-height: 1.4;
  margin: 0;
}

.event-body { font-size: 16.5px; line-height: 1.75; }
.event-body p { margin-bottom: 1.15rem; }

.event-cover {
  width: 100%;
  border-radius: var(--crsat-radius);
  border: 1px solid var(--crsat-line);
  margin-bottom: 32px;
}

/* Encadré latéral */
.event-aside {
  position: sticky;
  top: 24px;
  border: 1px solid var(--crsat-line);
  border-radius: var(--crsat-radius);
  padding: 24px;
  background: var(--crsat-ground-2);
}
.event-aside h4 { font-size: 1rem; margin-bottom: 14px; }
.event-aside .aside-item {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid var(--crsat-line);
  font-size: 14.5px;
  color: var(--crsat-ink-2);
  text-decoration: none;
}
.event-aside .aside-item:last-child { border-bottom: 0; }
.event-aside .aside-item:hover { color: var(--crsat-violet); }
.event-aside .aside-item .aside-date {
  display: block;
  font-family: var(--crsat-mono);
  font-size: 11px;
  color: var(--crsat-mute);
  letter-spacing: .08em;
  margin-bottom: 2px;
}

/* Liste des intervenants retenus */
.speaker-list { display: grid; gap: 14px; }
.speaker-card {
  border: 1px solid var(--crsat-line);
  border-left: 3px solid var(--crsat-violet);
  border-radius: var(--crsat-radius);
  padding: 18px 20px;
  background: var(--crsat-ground);
}
.speaker-card .speaker-name { font-weight: 700; color: var(--crsat-ink); margin-bottom: 2px; }
.speaker-card .speaker-org { font-size: 13.5px; color: var(--crsat-mute); margin-bottom: 8px; }
.speaker-card .speaker-title { font-size: 16px; font-weight: 600; color: var(--crsat-ink); margin: 0; }
.speaker-card .speaker-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.speaker-card .speaker-abstract { font-size: 14.5px; color: var(--crsat-ink-2); line-height: 1.6; }

/* Appel à intervention */
.cfp-banner {
  border: 1px solid var(--crsat-violet-300);
  background: var(--crsat-violet-050);
  border-radius: var(--crsat-radius);
  padding: 26px 28px;
  margin-bottom: 30px;
}
.cfp-banner h3 { font-size: 1.25rem; margin-bottom: 8px; }
.cfp-banner p { margin-bottom: 0; max-width: 66ch; }
.cfp-banner.is-closed { border-color: var(--crsat-line-2); background: var(--crsat-ground-2); }

/* --------------------------------------------------------------------------
   Tableaux d'administration
   -------------------------------------------------------------------------- */

.table-crsat { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--crsat-ground); }
.table-crsat th,
.table-crsat td { padding: 13px 15px; text-align: left; border-bottom: 1px solid var(--crsat-line); vertical-align: top; }
.table-crsat th {
  font-family: var(--crsat-mono);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--crsat-mute);
  font-weight: 500;
  border-bottom: 1px solid var(--crsat-line-2);
  white-space: nowrap;
}
.table-crsat tbody tr:hover { background: var(--crsat-violet-050); }
.table-crsat td strong { color: var(--crsat-ink); }
.table-scroll { overflow-x: auto; border: 1px solid var(--crsat-line); border-radius: var(--crsat-radius); }

/* --------------------------------------------------------------------------
   Divers
   -------------------------------------------------------------------------- */

.pagination .page-link { color: var(--crsat-violet); border-color: var(--crsat-line); }
.pagination .page-item.active .page-link { background: var(--crsat-violet); border-color: var(--crsat-violet); color: #fff; }

img { max-width: 100%; height: auto; }

.empty-state {
  border: 1px dashed var(--crsat-line-2);
  border-radius: var(--crsat-radius);
  padding: 44px 28px;
  text-align: center;
  color: var(--crsat-mute);
  background: var(--crsat-ground-2);
}
.empty-state strong { display: block; color: var(--crsat-ink); margin-bottom: 6px; font-size: 1.05rem; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--crsat-violet);
  color: #fff;
  padding: 10px 18px;
  z-index: 9999;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   En-tête fixe : réserver sa hauteur
   Sans cela, le bandeau de titre de chaque page passe SOUS la barre de
   navigation et une partie du texte est masquée.
   -------------------------------------------------------------------------- */

:root { --crsat-header-h: 118px; }

main { padding-top: var(--crsat-header-h); }

.page-title-section { padding: 56px 0 62px; }

@media (max-width: 991px) {
  :root { --crsat-header-h: 96px; }
}

/* --------------------------------------------------------------------------
   Menus déroulants
   Ils gardaient l'apparence du thème d'origine, et se refermaient avant
   qu'on ait le temps d'atteindre les liens qu'ils proposent.
   -------------------------------------------------------------------------- */

.navbar .dropdown-menu {
  background: var(--crsat-ground);
  border: 1px solid var(--crsat-line);
  border-top: 3px solid var(--crsat-red);
  border-radius: 0 0 var(--crsat-radius) var(--crsat-radius);
  box-shadow: var(--crsat-shadow-lg);
  padding: 8px 0;
  margin: 0;
  min-width: 250px;
  text-align: left;
}

.navbar .dropdown-item {
  padding: 11px 22px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--crsat-ink-2);
  white-space: normal;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background: var(--crsat-violet-050);
  color: var(--crsat-violet);
}

.navbar .dropdown-toggle::after {
  border-top-color: currentColor;
  margin-left: .4em;
  vertical-align: .15em;
}

/* Le thème ancrait le menu à « top: 96px », une valeur calée sur son propre
   en-tête, et le décalait encore de 20 px vers le bas. Il flottait donc à une
   cinquantaine de pixels sous l'onglet : en descendant vers les liens, le
   curseur traversait ce vide, le survol était perdu et le menu se refermait.
   On le rattache au bas de l'onglet et on comble ce qui reste. */

@media (min-width: 992px) {
  .navbar .nav-item.dropdown { position: relative; }

  .navbar .nav-item.dropdown > .dropdown-menu {
    top: 100%;
    left: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }

  /* Maintenu ouvert tant que le curseur est sur l'onglet OU sur le menu.
     focus-within couvre la navigation au clavier. */
  .navbar .nav-item.dropdown:hover > .dropdown-menu,
  .navbar .nav-item.dropdown:focus-within > .dropdown-menu,
  .navbar .nav-item.dropdown > .dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Pont invisible au-dessus du menu, pour absorber le reste de l'écart. */
  .navbar .nav-item.dropdown > .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 16px;
  }

  /* Le soulignement rouge reste visible tant que le menu est ouvert. */
  .navbar .nav-item.dropdown:hover > .nav-link::after {
    content: "";
    position: absolute;
    left: .9rem;
    right: .9rem;
    bottom: 1rem;
    height: 2px;
    background: var(--crsat-red);
  }
}

/* Le thème ajoutait ses propres espacements aux éléments de liste. */
.navbar .dropdown .dropdown-menu li { padding-top: 0; }
.navbar .dropdown .dropdown-menu li:last-child { padding-bottom: 0; }

/* --------------------------------------------------------------------------
   Boutons clairs
   .btn-light héritait d'un texte blanc sur fond blanc : illisible au repos,
   jaune au survol.
   -------------------------------------------------------------------------- */

/* .btn-light : fond blanc, texte violet au repos ; au survol le panneau
   violet du theme monte et le texte passe en blanc. La paire fonctionne,
   on renforce seulement la graisse au repos. */
.btn-light { font-weight: 700; }

/* --------------------------------------------------------------------------
   Images d'illustration : format constant
   Les visuels fournis arrivent dans toutes les tailles. On impose un rapport
   d'aspect et un recadrage centré pour que la grille ne se déforme jamais.
   -------------------------------------------------------------------------- */

.card .card-img-top,
.card-img > img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Les portraits gardent un cadrage vertical : un rapport 3/2 leur coupait
   la tête. */
.team-card .card-img-top,
.member-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: var(--crsat-radius);
}

/* Repli quand aucune image n'a été fournie : un aplat aux couleurs de la
   marque plutôt qu'une balise vide. */
.media-placeholder {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: linear-gradient(130deg, #1D0842, var(--crsat-violet));
  display: block;
}
.team-card .media-placeholder { aspect-ratio: 3 / 4; }

/* --------------------------------------------------------------------------
   Cartes de hauteur égale
   Les textes fournis n'ont pas la même longueur : on les tronque proprement
   pour que les rangées restent alignées.
   -------------------------------------------------------------------------- */

.row > [class*="col-"] > .card,
.row > [class*="col-"] > article.card { height: 100%; }

.card .card-body { display: flex; flex-direction: column; }

.card .card-text,
.card .card-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 1rem;
}

.card .card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

.card .card-body .btn { margin-top: auto; align-self: flex-start; }

/* Le tableau de bord d'administration n'a pas à aligner ses cartes sur une
   grille : ses titres portent des pastilles de comptage qu'il ne faut pas
   tronquer. */
.admin-dashboard .card .card-title,
.admin-dashboard .card .card-text {
  display: block;
  -webkit-line-clamp: unset;
  min-height: 0;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   Puces des listes de contenu
   Le thème les peignait en jaune ; la substitution de teinte les a passées
   en violet, on harmonise les quelques cas restants.
   -------------------------------------------------------------------------- */

.content ul li::marker,
.event-body ul li::marker { color: var(--crsat-violet); }

/* Fiche projet : paires libellé / valeur */
.project-details { margin: 0; }
.project-details dt {
  font-family: var(--crsat-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--crsat-violet);
  font-weight: 500;
  margin-bottom: 8px;
}
.project-details dd {
  margin: 0 0 28px;
  padding-left: 18px;
  border-left: 2px solid var(--crsat-line-2);
  color: var(--crsat-ink-2);
  line-height: 1.75;
  max-width: 78ch;
}
.project-details dd:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------------------------------
   Téléphones et tablettes
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  /* Sur mobile, retour au comportement standard : ouverture au clic, menu
     dans le flux. Le masquage par opacité du thème l'aurait rendu invisible
     même une fois déplié. */
  .navbar .dropdown-menu {
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    position: static;
    float: none;
    border: 0;
    border-left: 2px solid var(--crsat-red);
    border-radius: 0;
    box-shadow: none;
    background: var(--crsat-ground-2);
    margin: 4px 0 8px;
    padding: 4px 0;
    min-width: 0;
    text-align: center;
  }
  .navbar .dropdown-menu.show { display: block; }
  .navbar-collapse {
    max-height: 78vh;
    overflow-y: auto;
    background: var(--crsat-ground);
    padding-bottom: 12px;
  }
  .navbar .nav-link { padding: .8rem .5rem !important; }
  .navbar .nav-item.active > .nav-link::after,
  .navbar .nav-link:hover::after { display: none; }
  .navbar .nav-item.active > .nav-link {
    background: var(--crsat-violet-050);
  }
}

@media (max-width: 767px) {
  .section { padding: 48px 0; }
  .section-sm { padding: 36px 0; }

  .event-hero { padding: 44px 0 40px; }
  .event-facts { margin-top: 0; margin-bottom: 32px; }
  .event-aside { position: static; margin-top: 32px; }

  .form-section { padding: 20px 18px; }
  .form-section-title { font-size: 1rem; flex-wrap: wrap; gap: 8px; }

  .field-radio-group { flex-direction: column; align-items: stretch; }
  .field-radio-group label { justify-content: center; }

  /* Les titres tronqués sur deux lignes gagnent à respirer sur petit écran. */
  .card .card-title { min-height: 0; -webkit-line-clamp: 3; }
  .card .card-text { -webkit-line-clamp: 3; }

  .page-title-section { padding: 36px 0 40px; }
  .page-title-section .custom-breadcrumb .h2,
  .page-title-section .custom-breadcrumb .h3 { font-size: 1.3rem; }

  .project-details dd { padding-left: 14px; }

  /* Les tableaux d'administration restent lisibles en glissant
     horizontalement plutôt qu'en écrasant les colonnes. */
  .table-crsat { min-width: 640px; }
}

@media (max-width: 575px) {
  body { font-size: 15.5px; }
  .btn { padding: .75rem 1.4rem; width: auto; }
  .card-date { padding: 8px 12px; }
  .card-date span { font-size: 22px; }
  .event-facts { grid-template-columns: 1fr; }
}