/* ====== Reset + Thème global ====== */
*,
*::before,
*::after {
  box-sizing: border-box; /* Simplifie la gestion des dimensions (padding/border inclus dans width/height) */
}
html,
body {
  height: 100%; /* Permet de forcer le corps de page à occuper toute la hauteur */
}
body {
  margin: 0; /* Supprime la marge par défaut */
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif; /* Police moderne et fallback */
  color: #0f172a; /* Couleur de texte par défaut */
  background: #f8fafc; /* Couleur de fond globale */
  display: flex; /* Utilise flexbox pour la mise en page */
  flex-direction: column; /* Organise les éléments verticalement */
  min-height: 100vh; /* Assure une hauteur minimale de 100% de la viewport */
}
img {
  max-width: 100%; /* Les images s’adaptent au conteneur */
  display: block; /* Supprime les espaces indésirables */
}
a {
  color: inherit; /* Hérite de la couleur du parent */
  text-decoration: none; /* Supprime le soulignement */
}
h1 {
  font-weight: normal;
}

/* Variables CSS pour le thème */
:root {
  --bg: #ffffff; /* Fond clair */
  --title: var(--bg);
  --ink: #0f172a; /* Texte principal */
  --muted: #475569; /* Texte secondaire */
  --surface: #f1f5f9; /* Fond des cartes, placeholders */
  --primary: #0ea5e9; /* Bleu des boutons */
  --primary-ink: #ffffff; /* Texte sur bouton primaire */
  --navigation: #185f8d; /* Fond barre de navigation */
  --link: var(--bg); /* Couleur des liens */
  --link-hover: #bfd94d; /* Couleur des liens au survol */
  --btn: var(--link-hover); /* Bouton par défaut */
  --btn-hover: var(--primary); /* Bouton au survol */
  --date: #706f6fad; /* Couleur date/infos */
  --max: 1200px; /* Largeur max du container */
  --radius: 4px; /* Rayon bordure par défaut */
  --shadow: 0 8px 24px rgba(2, 6, 23, 0.08); /* Ombres douces */
}

/* ====== Structure générique ====== */
.main-content {
  flex: 1; /* Prend tout l'espace disponible entre header et footer */
}
.container {
  max-width: var(--max);
  margin-inline: auto; /* Centre horizontalement */
  padding-inline: 20px;
}
.section {
  padding: 56px 0; /* Espacement vertical */
}
.grid {
  display: grid;
  gap: 24px; /* Espacement entre éléments */
}

h4 {
  color: var(--navigation);
}
/* ====== Header & Navigation ====== */
header {
  position: sticky; /* Fixé en haut lors du scroll */
  top: 0;
  background: var(--navigation);
  backdrop-filter: saturate(150%) blur(8px); /* Effet verre dépoli */
  z-index: 10; /* Passe au-dessus des autres éléments */
}
.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 86px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}
.logo img {
  border-radius: 4px;
}
.nav__links {
  display: flex;
  gap: 20px;
  margin-left: auto; /* Pousse à droite */
}
.nav__links a {
  font-size: 0.95rem;
  color: var(--link);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  position: relative;
  transition: color 180ms ease, transform 180ms ease, background 220ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* subtle hover / active micro-interactions keeping palette */
.nav__links a::after {
  /* animated underline / indicator */
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 6px;
  height: 3px;
  border-radius: 3px;
  background: transparent;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1),
    background 220ms ease, opacity 220ms ease;
  opacity: 0;
}

.nav__links a:hover {
  color: var(--link-hover);
  transform: translateY(-3px);
}

.nav__links a:hover::after {
  transform: scaleX(1);
  background: var(--link-hover);
  opacity: 1;
}

/* Active / current page state */
.nav__links a.active,
.nav__links a[aria-current="page"] {
  color: var(--link-hover);
}
.nav__links a.active::after,
.nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--link-hover);
  opacity: 1;
}

/* Keyboard focus -- visible outline that respects theme */
.nav__links a:focus-visible {
  outline: 3px solid rgba(189, 217, 77, 0.18); /* using --link-hover color with alpha for accessibility */
  outline-offset: 4px;
  border-radius: 8px;
}

/* Slight backdrop / depth for desktop nav to make it feel alive */
.nav {
  padding: 0 20px; /* espace interne horizontal */
  transition: box-shadow 220ms ease, background 220ms ease, transform 220ms ease;
}
.nav.scrolled {
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.08);
  transform: translateY(-1px);
}

/* CTA micro-interaction */
.nav__cta .btn--primary {
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.nav__cta .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(14, 165, 233, 0.12);
}
.nav__cta {
  margin-left: 16px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #e2e8f0;
  background: var(--bg);
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  font-weight: 600;
}
.btn--primary {
  background: var(--btn);
  color: var(--primary-ink);
  border-color: transparent;
}
.btn--primary:hover {
  background: var(--btn-hover);
}
.btn-preview {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #e2e8f0;
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  font-weight: 600;
  background-color: var(--navigation);
  color: var(--primary-ink);
}
/* ====== Hero (bannière principale) ====== */
.hero {
  position: relative;
  isolation: isolate; /* Empêche superposition de z-index non voulue */
}
.hero__bg {
  position: relative;
  height: 420px;
  background: url("../img/herobg.jpg") center/cover no-repeat;
  background-size: cover;
}

/* Variables pour l'effet de verre */
.hero {
  --x: 50%;
  --y: 50%;
  --glass-size: 84px; /* diamètre du cercle en verre (plus petit / subtil) */
  --glass-blur: 8px; /* flou légèrement plus fort pour des bords plus lisses */
  --glass-opacity: 0.07; /* translucidité de la couche en verre */
}

.hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(2,6,23,0.65), rgba(2,6,23,0) 60%);
  transition: opacity 260ms ease-out;
}

/* Cercle en verre: implémenté comme un pseudo-élément de l'overlay afin qu'il se situe au-dessus de l'arrière-plan
   mais en dessous du contenu textuel. Utilise backdrop-filter lorsque c'est disponible, avec un fallback radial. */
.hero.glass-enabled .hero__overlay::before {
  content: "";
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--glass-size);
  height: var(--glass-size);
  transform: translate(-50%, -50%) scale(0.75);
  border-radius: 50%;
  pointer-events: none;
  /* gradient radial pour le cercle en verre */
  background: radial-gradient(circle at center, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.07) 22%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.01) 65%, transparent 90%);
  /* suppression de la bordure visible pour éviter un bord dur */
  border: none;
  /* ombre plus large et plus douce pour fondre le cercle dans l'arrière-plan */
  box-shadow: 0 20px 40px rgba(2,6,23,0.08), inset 0 2px 8px rgba(255,255,255,0.02);
  opacity: 0; /* caché par défaut jusqu'à ce que l'utilisateur déplace la souris */
  transition: transform 320ms cubic-bezier(.2,.9,.2,1), opacity 320ms ease-out, left 220ms ease-out, top 220ms ease-out;
  /* fort flou de fond pour créer l'effet de verre à l'intérieur du cercle */
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  /* masque pour adoucir l'alpha extérieur de l'élément afin que la bordure rectangulaire de l'élément soit invisible */
  -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 35%, rgba(0,0,0,0.7) 55%, rgba(0,0,0,0) 85%);
  mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 35%, rgba(0,0,0,0.7) 55%, rgba(0,0,0,0) 85%);
}

/* Lorsque l'utilisateur a déplacé la souris au moins une fois, nous ajoutons .glass-visible pour afficher le cercle */
.hero.glass-enabled.glass-visible .hero__overlay::before {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* Si backdrop-filter n'est pas pris en charge */
.hero.glass-enabled .hero__overlay.no-backdrop::before {
  /* même fallback radial plus doux avec un adoucissement progressif pour cacher la forme */
  background: radial-gradient(circle at center, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.06) 18%, rgba(255,255,255,0.03) 38%, rgba(255,255,255,0.01) 62%, transparent 88%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0; /* garder le même comportement caché par défaut */
  transition: transform 320ms cubic-bezier(.2,.9,.2,1), opacity 320ms ease-out;
  /* masque pour adoucir les bords lorsque c'est pris en charge */
  -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 28%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0) 85%);
  mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 28%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0) 85%);
}

.hero.glass-enabled.glass-visible .hero__overlay.no-backdrop::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
.hero__card {
  color: white;
  max-width: 700px;
  padding: 24px;
  border-radius: var(--radius);
}

/* Entrance animation: slide up + fade in */
.hero__card {
  opacity: 0;
  transform: translateY(18px);
  transition: transform 560ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 320ms ease;
}
.hero__card.show {
  opacity: 1;
  transform: translateY(0);
}

/* Word-by-word stagger inside hero: each .word will animate with a delay based on --i */
.hero__card .word {
  display: inline-block; /* keeps words inline while allowing transforms */
  opacity: 0;
  transform: translateY(12px);
  transition: transform 420ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 260ms ease;
  transition-delay: calc(var(--i, 0) * 60ms);
  will-change: transform, opacity;
}
.hero__card.show .word {
  opacity: 1;
  transform: translateY(0);
}
/* Specific handling for H1 animation overlay (Option B)
   - Keep the original H1 text in the DOM for SEO and accessibility
   - Create an absolutely-positioned overlay that contains animated word spans
   - The original H1 is visually hidden (still accessible to screen readers)
*/
.hero__subtitle {
  /* keep normal flow so the heading occupies space */
  position: relative;
}

/* Make the animated overlay participate in the normal flow so it
   takes the place of the original H1 text (prevents layout shift).
   The overlay will be inserted after the H1 and shown in the same
   typographic context. */
.hero__subtitle-anim {
  display: inline-block; /* in-flow element that occupies space */
  pointer-events: none;
  color: inherit; /* inherit typography */
  font: inherit;
  line-height: inherit;
  white-space: normal;
}

/* Ensure overlay inherits visible typographic properties from the H1 */
.hero__subtitle-anim {
  color: currentColor;
  font-size: inherit;
  font-weight: inherit;
}

/* Instead of removing H1 from flow, make its text transparent so it
   keeps its layout space while remaining accessible to AT/SEO. */
.hero__subtitle--invisible {
  color: transparent !important;
  text-shadow: none !important;
  background: transparent !important;
}

/* Ensure the animated overlay uses same spacing and alignment */
.hero__subtitle-anim .word {
  display: inline-block;
}

/* Fallback state: if animation can't run, force overlay visible */
.hero__subtitle-anim.force-show .word {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: none !important;
}
.hero__title {
  font-weight: bold;
  font-size: clamp(28px, 4vw, 40px); /* Responsive */
  line-height: 1.1;
  margin: 0 0 8px;
}
.hero__subtitle {
  font-weight: 600;
  margin: 0 0 10px;
  opacity: 0.95;
}
.hero__text {
  margin: 0;
  opacity: 0.9;
  text-align: justify;
}

/* ====== Section ====== */
.kicker {
  font-weight: 700;
  font-size: 0.9rem;
  color: #0ea5e9;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.section h2 {
  margin: 0.2rem 0 1rem;
  font-size: clamp(22px, 3vw, 28px);
}
.muted {
  color: var(--muted);
}
.cards {
  grid-template-columns: repeat(12, 1fr); /* Grille 12 colonnes */
}
.card {
  grid-column: span 3; /* 3 cartes sur 12 colonnes */
  background: var(--bg);
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(2, 6, 23, 0.12);
  transition: all 0.3s ease;
}
.card--no--transform:hover {
  transform: none;
  box-shadow: var(--shadow);
}
.card__media {
  height: 160px;
  background: var(--surface);
}
.card__body {
  padding: 16px;
}
.card__title {
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--ink) !important;
}
.card__text {
  margin: 0;
  color: var(--muted);
}

/* ====== Actualités + Accès rapides ====== */
.newsgrid {
  grid-template-columns: 2fr 3fr 1.2fr; /* Mise en page 3 colonnes */
}
.news-card,
.access-card {
  background: var(--bg);
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(2, 6, 23, 0.12);
  transition: all 0.3s ease;
}
.news-card__media {
  height: 160px;
  background: var(--surface);
  border-bottom: 1px solid #e2e8f0;
}
.news-card h3 {
  margin-bottom: 10px;
}
.news-card__body {
  padding: 16px;
}
date {
  color: var(--date);
  font-size: small;
}
.access-card {
  padding: 16px;
}
.access-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.access-list a {
  display: block;
  padding: 10px 40px 10px 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 4px;
  color: #1e293b;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative; /* pour positionner la flèche */
}

.access-list a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 16px; /* taille contrôlée */
  height: 16px;
  background: url("../img/flecheDroite.png") no-repeat center / contain;
  opacity: 0;
  transform: translateX(-5px) translateY(-50%);
  transition: all 0.3s ease;
}

.access-list a:hover {
  border: 1px solid black;
  background-color: #f1f5f9;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.access-list a:hover::after {
  opacity: 1;
  transform: translateX(0) translateY(-50%);
}

/* ====== Footer ====== */
footer {
  margin-top: auto;
  background: var(--navigation);
  color: #cbd5e1;
}
.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
}
.footer nav a:hover {
  color: var(--link-hover);
}
.footer nav {
  display: flex;
  gap: 16px;
}

/* ====== Page Solutions ====== */
.title_three_solution {
  color: var(--navigation);
}

/* Section solutions avancées */
.solutions-advanced {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-top: 1px solid #e2e8f0;
}

.solutions-advanced__intro {
  font-size: 1.1rem;
  margin-bottom: 40px;
  text-align: center;
}

/* Onglets */
.tabs-container {
  margin-bottom: 32px;
}

.tabs-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}

.tab-btn {
  padding: 12px 24px;
  border: 1px solid #e2e8f0;
  background: var(--surface);
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
}

.tab-btn.active {
  background: var(--bg);
  border-color: var(--primary);
}

.tab-content {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
  border: 1px solid #e2e8f0;
  display: none;
}

.tab-content.active {
  display: block;
}

/* Grilles spécifiques */
.grid--two-cols {
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.grid--three-cols {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

.icon-badge--blue {
  background: linear-gradient(135deg, #0ea5e9, #3b82f6);
}

.icon-badge--green {
  background: linear-gradient(135deg, #10b981, #059669);
}

.icon-badge--purple {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.icon-badge--orange {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Services list */
.services-list {
  display: grid;
  gap: 12px;
}

.service-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  border-radius: 6px;
}

.service-item__icon {
  color: var(--primary);
}

/* Boxes informatifs */
.info-box {
  background: #f0f9ff;
  padding: 16px;
  border-radius: 6px;
  border-left: 3px solid #0ea5e9;
}

.info-box__title {
  color: var(--primary);
  font-weight: 600;
}

/* Cards avec padding personnalisé */
.card--padded {
  background: var(--bg);
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid #e2e8f0;
  box-shadow: var(--shadow);
}

.card--surface {
  background: var(--surface);
  padding: 20px;
  border-radius: 8px;
}

/* Timeline pour certifications */
.timeline-item {
  padding: 12px;
  background: var(--surface);
  border-radius: 6px;
}

.timeline-item__date {
  font-weight: 600;
  display: block;
}

.timeline-item__desc {
  color: var(--muted);
}

/* Highlight boxes */
.highlight-box {
  margin-top: 32px;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid var(--primary);
}

.highlight-box--blue {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
}

.highlight-box--yellow {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-left-color: #f59e0b;
}

.highlight-box__title {
  margin-bottom: 12px;
}

.highlight-box__title--yellow {
  color: #92400e;
}

.highlight-box__text {
  margin: 0;
  color: var(--muted);
}

.highlight-box__text--yellow {
  color: #92400e;
}

/* Centrage pour sections */
.text-center {
  text-align: center;
}

.mb-32 {
  margin-bottom: 32px;
}

.mb-24 {
  margin-bottom: 24px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-8 {
  margin-bottom: 8px;
}

.fs-large {
  font-size: 1.1rem;
}

/* ====== Utilitaires pour tags, boutons, grilles ====== */
.tag {
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 6px;
  padding: 6px 10px;
  background: #eef2ff;
  color: #3b3663;
  border-radius: 999px;
  font-size: 0.85rem;
  text-decoration: none;
  border: 1px solid rgba(59, 54, 99, 0.08);
  transition: background 0.15s, transform 0.08s;
}
.tag:hover {
  background: #e0e7ff;
  transform: translateY(-1px);
}
.btn-reset {
  border: 1px solid #e2e8f0;
}
.card--padded {
  padding: 24px;
}
.card--mb24 {
  margin-bottom: 24px;
}
.card__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
.grid-2fr-1fr {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
}
.mt-40 {
  margin-top: 40px;
}
.pt-24 {
  padding-top: 24px;
}
.bt-1 {
  border-top: 1px solid #e5e5e5;
}