@charset "UTF-8";
/* ==========================================================================
   UDSP 51 — Couche de compatibilité
   --------------------------------------------------------------------------
   Le contenu enregistré en base par l'ancienne version utilise un balisage
   différent de celui de la refonte. Ce fichier lui applique le nouveau
   langage visuel, afin que rien n'ait besoin d'être supprimé ni réécrit.

   Chargé après site.css. Ne le modifiez pas pour styler du contenu neuf :
   servez-vous des classes documentées dans le README.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Ancien diaporama d'accueil (.hero-slider)
   --------------------------------------------------------------------------
   Les anciennes diapositives portent la même classe .hero-slide que les
   nouvelles, mais sans le panneau sombre autour. Sans ces règles, le titre
   s'affiche en blanc sur fond blanc : la section paraît vide.
   -------------------------------------------------------------------------- */
.hero-slider {
  position: relative;
  background: var(--ink);
  color: rgba(255, 255, 255, .78);
  overflow: hidden;
  border-bottom: 5px solid var(--rouge);
}

/* Photographie d'ambiance portée par la section elle-même : l'ancien éditeur
   supprimait les conteneurs vides comme .hero-bg, on ne peut pas compter dessus. */
.hero-slider::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/image1.jpg");
  background-size: cover;
  background-position: 68% 40%;
  opacity: .34;
  pointer-events: none;
}
.hero-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, var(--ink) 0%, rgba(22, 32, 46, .93) 40%, rgba(22, 32, 46, .45) 100%);
  pointer-events: none;
}

.hero-slider .hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Ces deux éléments décoratifs de l'ancien thème sont neutralisés :
   .hero-grid entre en collision avec la grille du nouveau hero. */
.hero-slider .hero-bg .hero-grid,
.hero-slider .hero-glow {
  display: block;
  position: absolute;
  inset: 0;
  grid-template-columns: none;
  min-height: 0;
  background: none;
}

.hero-slider-inner {
  position: relative;
  z-index: 3;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

/* Le contenu doit passer au-dessus de la photo et de son voile, même si
   le conteneur .hero-slider-inner a disparu du balisage enregistré. */
.hero-slider > * { position: relative; z-index: 3; }

.hero-slider .hero-slides {
  display: grid;
}

/* Reprise du comportement d'empilement, cette fois sur fond sombre */
.hero-slider .hero-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.hero-slider .hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.hero-slider .hero-slide-content { max-width: 44rem; }

.hero-slider .hero-eyebrow {
  display: inline-block;
  font-family: var(--font-title);
  font-size: .84rem;
  font-weight: 600;
  color: #fff;
  border-left: 3px solid var(--rouge);
  padding-left: .7rem;
  margin-bottom: 1.4rem;
}
.hero-slider .hero-eyebrow .dot { display: none; }

.hero-slider .hero-slide h1 {
  color: #fff;
  max-width: 18ch;
  font-size: clamp(2.4rem, 5.4vw, 3.9rem);
}
/* L'ancien balisage met l'italique et la couleur sur des fragments :
   on ramène tout à une seule voix typographique. */
.hero-slider .hero-slide h1 em,
.hero-slider .hero-slide h1 .accent {
  font-style: normal;
  color: #fff;
}

.hero-slider .hero-slide p {
  margin-top: 1.35rem;
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.35vw, 1.15rem);
  color: rgba(255, 255, 255, .76);
}

.hero-slider .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2.1rem;
}
.hero-slider .btn-ghost {
  color: #fff;
  border-color: var(--line-dark);
}
.hero-slider .btn-ghost:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .4);
}

/* Flèches et pastilles de l'ancien diaporama */
.hero-slider .hero-nav {
  position: absolute;
  bottom: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--r-control);
  color: #fff;
  font-size: .8rem;
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.hero-slider .hero-nav:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .5);
}
.hero-slider .hero-prev { left: var(--gutter); }
.hero-slider .hero-next { left: calc(var(--gutter) + 46px); }

.hero-slider .hero-dots {
  position: absolute;
  bottom: 17px;
  left: calc(var(--gutter) + 108px);
  display: flex;
  gap: .5rem;
}
.hero-slider .hero-dot {
  width: 46px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, .22);
  transition: background-color .2s var(--ease);
}
.hero-slider .hero-dot.is-active { background: var(--rouge); }

@media (max-width: 700px) {
  .hero-slider .hero-nav,
  .hero-slider .hero-dots { position: static; }
  .hero-slider .hero-dots { margin-top: 2rem; }
  .hero-slider .hero-nav { display: none; }
}

/* --------------------------------------------------------------------------
   2. Ancien bandeau de chiffres (.stats)
   -------------------------------------------------------------------------- */
.stats {
  padding-block: clamp(3rem, 5vw, 4.5rem);
  padding-inline: var(--gutter);
}

/* .stats-inner porte aussi .container : sans cette correction, le cadre
   engloberait les marges intérieures et laisserait une bande vide à droite. */
.stats-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: calc(var(--shell) - var(--gutter) * 2);
  padding-inline: 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: var(--r-panel);
  overflow: hidden;
}
.stats .stat {
  padding: 2rem 1.5rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats .stat-num {
  display: block;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
.stats .stat-label {
  display: block;
  margin-top: .6rem;
  font-size: .95rem;
  color: var(--ink-3);
  max-width: 22ch;
}
@media (max-width: 860px) { .stats-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .stats-inner { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   3. Anciens en-têtes de section
   -------------------------------------------------------------------------- */
.section-head {
  max-width: 62ch;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}
.section-head h2 {
  border-left: 4px solid var(--rouge);
  padding-left: 1.15rem;
}
.section-head h2 em {
  font-style: normal;
  color: inherit;
}
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-title);
  font-size: .84rem;
  font-weight: 600;
  color: var(--rouge-deep);
  margin-bottom: .9rem;
}
.section-eyebrow.light { color: rgba(255, 255, 255, .82); }
.section-lead {
  margin-top: 1rem;
  padding-left: calc(4px + 1.15rem);
  font-size: 1.08rem;
}

/* --------------------------------------------------------------------------
   4. Anciennes cartes « piliers » (.features)
   -------------------------------------------------------------------------- */
.features-section,
.presentation,
.missions,
.team { padding-block: var(--section-y); }

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
}

/* Repli : sans la section .features-section, la grille se retrouverait
   collée au bloc précédent et collée aux bords de l'écran. */
.features:first-child,
.features-section + .features,
.hero-slider + .features {
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--section-y) var(--gutter);
}

.feature-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  overflow: hidden;
  transition: border-color .18s var(--ease);
}
.feature-card:hover { border-color: var(--line-2); }

.feature-media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--surface-2);
  overflow: hidden;
}
.feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Repli : si le conteneur .feature-media a disparu de votre contenu,
   l'image directe de la carte est recadrée de la même façon. */
.feature-card > img,
.feature-card > p > img,
.feature-card > a > img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--surface-2);
}
.feature-tag {
  position: absolute;
  top: .75rem;
  left: .75rem;
  background: var(--rouge);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  padding: .25rem .6rem;
  border-radius: var(--r-control);
}

.feature-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
}
.feature-body h3 { margin-bottom: .55rem; }
.feature-body p { font-size: .97rem; color: var(--ink-2); }

.feature-link {
  margin-top: auto;
  padding-top: 1.1rem;
  align-self: flex-start;
  font-weight: 600;
  color: var(--rouge-deep);
}
.feature-link:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   5. Ancien bandeau d'adhésion (.cta-band)
   -------------------------------------------------------------------------- */
.cta-band {
  background: var(--ink);
  color: rgba(255, 255, 255, .78);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--rouge);
}
.cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.5rem;
  align-items: center;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.cta-band h2 { color: #fff; max-width: 26ch; }
.cta-band h2 em { font-style: normal; color: inherit; }
.cta-band p { margin-top: 1rem; max-width: 62ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.cta-band .btn-primary.light { background: #fff; color: var(--ink); }
.cta-band .btn-primary.light:hover { background: var(--surface-2); }
.cta-band .btn-ghost.light { color: #fff; border-color: var(--line-dark); }
.cta-band .btn-ghost.light:hover { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .4); }

@media (max-width: 860px) { .cta-inner { grid-template-columns: 1fr; gap: 1.75rem; } }

/* --------------------------------------------------------------------------
   6. Détails hérités
   -------------------------------------------------------------------------- */
/* L'ancien thème mettait un mot en couleur dans les titres ; la refonte
   garde une seule voix, plus sobre à la lecture. */
.page-content h2 em,
.page-content h2 .accent,
.page-content h1 em,
.page-content h1 .accent {
  font-style: normal;
  color: inherit;
}

/* Les flèches ajoutées après chaque libellé de bouton sont discrètes */
.btn-primary .fa-arrow-right,
.btn-ghost .fa-arrow-right,
.feature-link .fa-arrow-right,
.article-btn .fa-arrow-right { font-size: .75em; opacity: .8; }

/* Ancienne section « mentions » */
.page-content.legal > .container > p { max-width: 72ch; }

/* Images héritées sans dimensions : évite les débordements */
.page-content img,
.feature-media img,
.team-card img { max-width: 100%; }