:root {
  font-size: 14px;
}

@media (min-width: 350px) {
  :root {
    font-size: 16px;
  }
}

@media (min-width: 640px) {
  :root {
    font-size: 18px;
  }
}

@media (min-width: 1440px) {
  :root {
    font-size: clamp(18px, 1.25vw, 22px);
  }
}

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

html {
  scroll-padding-top: 100px;
  scroll-behavior: smooth;
}

html,
body {
  font-family: "Noto Sans Gothic", sans-serif !important;
}

h1,
h2,
h3 {
  font-family: "Noto Sans", sans-serif;
}

.hero-gradient {
  background:
    url("../favicon/android-chrome-512x512.png") no-repeat left center,
    linear-gradient(135deg, #222349 0%, #5062c4 50%, #2e9bb0 100%);
  background-size: contain;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: fadeIn 0.5s ease-in-out;
}

.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.study-phase-1 {
  background-color: #5062c4;
}

.study-phase-2 {
  background-color: #2e9bb0;
}

.study-phase-3 {
  background-color: #f59e0b;
}

.study-phase-4 {
  background-color: #ff006a;
}

.policy-section {
  counter-reset: section;
}

.policy-section h2:before {
  counter-increment: section;
  content: counter(section) ". ";
  color: #5062c4;
  font-weight: bold;
}

.policy-subsection {
  counter-reset: subsection;
}

.policy-subsection h3:before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
  color: #5062c4;
  font-weight: bold;
}

.legal-section {
  counter-reset: section;
}

.legal-article {
  counter-reset: article;
}

.legal-article h3:before {
  counter-increment: section;
  content: counter(section) ". ";
}

.legal-article h4:before {
  counter-increment: article;
  content: counter(section) "." counter(article) " ";
}

.document-category {
  transition: all 0.3s ease;
}

.document-category:hover {
  background-color: #f8fafc;
}

.document-item {
  border-left: 4px solid transparent;
  transition: all 0.3s ease;
}

.document-item:hover {
  background-color: #f0f0f0;
  border-left-color: #222349;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: fadeIn 0.5s ease-in-out;
}

.alphabet-nav {
  scrollbar-width: thin;
  scrollbar-color: #5062c4 #f1f1f1;
}

.alphabet-nav::-webkit-scrollbar {
  height: 6px;
}

.alphabet-nav::-webkit-scrollbar-thumb {
  background-color: #5062c4;
  border-radius: 3px;
}

.term-anchor {
  scroll-margin-top: 120px;
}

.highlight {
  background-color: #2e9bb0;
  transition: background-color 0.3s ease;
}

.faq-card {
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.faq-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}

.highlight-box {
  position: relative;
  overflow: hidden;
}

.highlight-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background-color: #5062c4;
}

.search-highlight {
  background-color: #2e9bb0;
  padding: 0 2px;
  border-radius: 2px;
}

.step-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #5062c4;
  color: white;
  font-weight: bold;
  margin-right: 15px;
  flex-shrink: 0;
}

.highlight-box {
  position: relative;
  overflow: hidden;
}

.highlight-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background-color: #5062c4;
}

.right-card {
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.right-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.phase-card {
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
}

.phase-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  border-left-color: #2e9bb0;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-content.active {
  max-height: 500px;
}

.clickable-row:hover {
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
  transition: all 0.3s ease;
}

.nav-head {
  display: block;
  position: relative;
  text-decoration: none;
  padding: 5px;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  transition: 0.5s;
}

.nav-head a:hover {
  transform: scale(1.2);
  opacity: 1;
  filter: blur(0);
  text-decoration: none;
  transition: all 0.3s ease;
}

.nav-head .active {
  border-bottom: 5px solid #222349;
  font-weight: 700;
}

.nav-head .activealt {
  border-bottom: 5px solid #222349;
  font-weight: 700;
}

.nav-head .active:hover {
  border-bottom: 5px solid #222349;
  font-weight: 700;
}

#mobileMenu .active {
  color: #f8fafc;
  background-color: #222349;
  cursor: default;
  pointer-events: none;
  display: block;
  padding: 0.5rem 0.75rem;
  /* Équivalent à py-2 px-3 */
  border-radius: 0.375rem;
}

#mobileMenu .mobile-submenu .active {
  /* Le conteneur .mobile-submenu a un 'pl-4' (padding-left: 1rem).
     On utilise une marge négative pour que le background "sorte" de ce conteneur vers la gauche. */
  margin-left: -1rem;
  /* On ajuste la largeur pour qu'elle remplisse l'espace nouvellement créé par la marge négative. */
  width: calc(100% + 1rem);
}

#mobileMenu .activealt {
  color: #f8fafc;
  background-color: #222349;
}

.filter-checkbox:checked+.filter-label {
  background-color: #222349;
  color: white;
}



.partner * {
  justify-self: center;
}


/* si total des items est impair, on centre/seul le 1er */
.partner> :first-child:nth-last-child(odd) {
  /* s’étend de la 1re à la dernière colonne */
  grid-column: 1 / -1;
}

.partner a:hover {
  transform: scale(1.2);
  opacity: 1;
  filter: blur(0);
  text-decoration: none;
  transition: all 0.3s ease;
}

.wavy {
  background-image: url("../img/DRCI-Pattern.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}
.wavy-alt {
  background-image: url("../img/DRCI-Pattern-alt.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

/* Styles pour le Mega Menu */
.mega-menu {
  display: none;
  /* Caché par défaut */
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 50;
  border-top: 1px solid #e5e7eb;
}

.nav-item:hover .mega-menu,
.nav-item .mega-menu.open {
  /* Afficher au survol ou si 'open' (pour mobile/clic) */
  display: block;
}

.nav-head>.nav-item a:hover {
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
  text-decoration: none;
  transition: all 0.3s ease;
}

.nav-item a.active-sub {
  cursor: default;
  background-color: #222349;
  color: #f8fafc;
  font-weight: 700;
  display: block;
}

/* Style pour la flèche du menu déroulant */
.nav-item>a>.arrow-down {
  transition: transform 0.3s ease;
}

.nav-item:hover>a>.arrow-down,
.nav-item>a.open>.arrow-down {
  transform: rotate(180deg);
}

/* Style pour le menu mobile actif */
#mobileMenu .nav-item-mobile>button.open+.mobile-submenu {
  display: block;
}

#mobileMenu .nav-item-mobile>button.open .arrow-down {
  transform: rotate(180deg);
}

.mobile-submenu {
  display: none;
}



.timeline-item::before {
  content: '';
  position: absolute;
  left: 18px;
  /* Ajuster pour centrer la ligne sur le cercle */
  top: 40px;
  /* Départ après le cercle */
  bottom: -16px;
  /* Espace en bas ou jusqu'au prochain élément */
  width: 4px;
  background-color: #e5e7eb;
  /* Couleur de la ligne de la timeline */
  z-index: -1;
  /* Derrière le contenu */
}

.timeline-item:last-child::before {
  display: none;
  /* Pas de ligne après le dernier item */
}

.timeline-item-recherche::before {
  content: '';
  position: absolute;
  left: 18px;
  /* Ajuster pour centrer sur l'icône de 36px de large */
  top: 36px;
  /* Départ après l'icône */
  bottom: -1.5rem;
  /* Espace vers le prochain item (correspond à space-y-6) */
  width: 2px;
  background-color: #e5e7eb;
  /* Couleur de la ligne de la timeline (gris clair) */
  z-index: 0;
}

.timeline-item-recherche.no-line::before {
  display: none;
  /* Pas de ligne après le dernier item */
}

.timeline-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  box-shadow: 0 0 0 4px white;
  /* Effet de bordure pour se détacher de la ligne */
}

/* Styles pour l'icône hamburger */

.hamburger-icon .line {
  transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
  /* Durée et timing de la transition */
  transform-origin: center;
  /* Point de rotation au centre de chaque ligne */
}

/* État ouvert : transformation en croix (X) */
.hamburger-icon.open .top {
  /* Déplace la ligne du haut vers le centre et la fait pivoter de 45 degrés */
  transform: translateY(4px) rotate(45deg);
  /* Ajustez translateY si l'espacement des lignes est différent */
}

.hamburger-icon.open .middle {
  /* Fait disparaître la ligne du milieu */
  opacity: 0;
  transform: scaleX(0);
  /* Optionnel: rétrécit la ligne horizontalement pour une disparition plus douce */
}

.hamburger-icon.open .bottom {
  /* Déplace la ligne du bas vers le centre et la fait pivoter de -45 degrés */
  transform: translateY(-4px) rotate(-45deg);
  /* Ajustez translateY si l'espacement des lignes est différent */
}

html,
body {
  cursor: auto !important;
}

/* =========================================
   CSS VIEW TRANSITIONS (Multi-Page Navigation)
   ========================================= */

/* Activer les transitions de page natives entre documents de même origine */
@view-transition {
  navigation: auto;
}

/* Assigner un nom de transition au conteneur de contenu principal */
#spa-content-container {
  view-transition-name: main-content;
}

/* En-tête et pied de page du sous-site participants/soignants */
drci-header-patient, drci-header-soignant, drci-header-vmri {
  display: block;
  position: relative;
  z-index: 9999; /* Toujours tout en haut */
  view-transition-name: spa-header;
}

drci-footer-patient, drci-footer-soignant, drci-footer-vmri {
  display: block;
  position: relative;
  z-index: 9990; /* Au-dessus de tout le contenu, mais sous l'en-tête (nav bar) */
  view-transition-name: spa-footer;
}

/* Désactiver l'animation de transition par défaut sur la racine (root),
   l'en-tête et le pied de page pour qu'ils restent parfaitement statiques */
::view-transition-old(root),
::view-transition-new(root),
::view-transition-old(spa-header),
::view-transition-new(spa-header),
::view-transition-old(spa-footer),
::view-transition-new(spa-footer) {
  animation: none !important;
}

/* Contrôler l'ordre d'affichage (z-index) dans l'arborescence de transition */
::view-transition-group(spa-header) {
  z-index: 10000 !important;
  animation: none !important;
}

::view-transition-group(spa-footer) {
  z-index: 9990 !important;
  animation: none !important;
}

::view-transition-group(main-content) {
  z-index: 1 !important;
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Animation d'entrée et sortie organique (focalisation microscope / expansion cellulaire) */
@keyframes organic-fade-out {
  from {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: scale(1.015);
    filter: blur(6px);
  }
}

@keyframes organic-fade-in {
  from {
    opacity: 0;
    transform: scale(0.985);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

::view-transition-old(main-content) {
  animation: 350ms cubic-bezier(0.23, 1, 0.32, 1) both organic-fade-out;
}

::view-transition-new(main-content) {
  animation: 400ms cubic-bezier(0.23, 1, 0.32, 1) both organic-fade-in;
}

/* =========================================
   ACCESSIBILITÉ & RÉDUCTION DES MOUVEMENTS
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
  * {
    view-transition-name: none !important;
  }
}