/* =============================================================================
   DECIM — Couche d'ÉLÉVATION (v2-site)
   Se charge APRÈS decim-ui.css. N'ajoute QUE du visuel sur le markup existant.
   Aucun changement de contenu ni de structure. Rollback = retirer le <link>.
   Réutilise les variables de decim-ui.css (--grad-primary, --decim-*).
   Leviers : typo display, profondeur du hero, rythme/espacement, footer de marque.
   ============================================================================= */

@import url('https://api.fontshare.com/v2/css?f[]=clash-display@500,600,700&display=swap');

:root{
  --dx2-display: 'Clash Display', 'Montserrat', sans-serif;
  --dx2-ink:    #16164a;            /* encre indigo, titres */
  --dx2-muted:  #5b6475;
  --dx2-line:   #e6edf5;
  --dx2-paper:  #f5f8fc;
  --dx2-r:      16px;
  --dx2-ease:   cubic-bezier(.2,.8,.2,1);
  /* dégradé de marque réutilisé depuis decim-ui.css si présent, sinon repli */
  --dx2-grad:   var(--grad-primary, linear-gradient(108deg,#239947 0%,#2c8177 46%,#34679a 100%));
}

/* =============================================================================
   1. TYPOGRAPHIE — police display sur les grands titres (Montserrat reste le corps)
   ============================================================================= */
.title-h2,
.page-header .page-title,
.home-notice .title-h2,
.homeSwipper-img .composante .composant-title,
.passation-item__link,
.footer h3{
  font-family: var(--dx2-display);
  letter-spacing: -.02em;
}

/* hiérarchie : le titre de section respire plus et porte mieux */
.title-h2{
  font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.4rem);
  font-weight: 600; line-height: 1.06;
  color: var(--dx2-ink); margin: 0 0 2rem;
}

/* =============================================================================
   2. RYTHME — l'air entre les blocs (le plus gros gain perçu)
   ============================================================================= */
.home-section{ padding-top: clamp(1.5rem,1rem+2vw,2.5rem); }
body > section,
main > section{ padding-block: clamp(2.2rem, 1.4rem + 2.6vw, 4rem); }
.home-section + section{ padding-top: 0; }

/* =============================================================================
   3. HERO — profondeur + cadre de marque autour du carousel existant
   ============================================================================= */
.home-section{ position: relative; isolation: isolate; }
/* halo de marque diffus derrière le hero */
.home-section::before{
  content:""; position: absolute; z-index:-1; inset: -6% 0 30%;
  background:
    radial-gradient(45% 60% at 12% 18%, oklch(71% 0.17 146 / .16), transparent 60%),
    radial-gradient(42% 55% at 88% 22%, oklch(52% 0.10 250 / .16), transparent 62%);
  filter: blur(6px); pointer-events: none;
}
.homeSwipper{
  border-radius: 22px;
  box-shadow: 0 26px 60px -28px oklch(30% 0.10 285 / .45);
}
/* assombrir un peu plus le bas pour ancrer le titre */
.homeSwipper-img::after{
  background: linear-gradient(to top, oklch(20% 0.08 286 / .72) 0%, oklch(20% 0.08 286 / .12) 42%, transparent 64%) !important;
}
.homeSwipper-img .composante .composant-title{
  font-weight: 600; line-height: 1.1;
  font-size: clamp(1.2rem, .85rem + 2.6vw, 2.4rem);
  text-shadow: 0 2px 24px oklch(20% 0.08 286 / .55);
}
.homeSwipper-img .composante .composant-number{
  box-shadow: 0 8px 22px -10px oklch(52% 0.10 250 / .7);
}
/* boutons de navigation : pastilles verre */
.homeSwipper .swiper-button-next,
.homeSwipper .swiper-button-prev{
  width: 46px; height: 46px; border-radius: 50%;
  background: oklch(98% 0.01 250 / .14); backdrop-filter: blur(6px);
  border: 1px solid oklch(98% 0.01 250 / .3);
  transition: background .25s var(--dx2-ease);
}
.homeSwipper .swiper-button-next:hover,
.homeSwipper .swiper-button-prev:hover{ background: oklch(98% 0.01 250 / .26); }
.homeSwipper .swiper-button-next::after,
.homeSwipper .swiper-button-prev::after{ font-size: 18px !important; font-weight: 700; }

/* =============================================================================
   4. EYEBROW + intitulé de section (raffinement)
   ============================================================================= */
.home-eyebrow{ letter-spacing: .14em; }
.home-eyebrow + .title-h2{ font-family: var(--dx2-display); }

/* =============================================================================
   5. NOTE D'INFORMATION — plus institutionnelle
   ============================================================================= */
.home-notice{
  border-radius: 20px; padding: clamp(20px, 4vw, 34px);
  background:
    linear-gradient(var(--decim-surface, #fff), var(--decim-surface, #fff)) padding-box,
    var(--dx2-grad) border-box;
  border: 1px solid transparent;
  box-shadow: 0 18px 44px -26px oklch(30% 0.10 285 / .3);
}
.home-notice__badge{ border-radius: 13px; box-shadow: 0 10px 22px -12px oklch(52% 0.10 250 / .8); }
.home-notice .title-h2{ font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); margin-bottom: .2rem; }
.home-notice p{ color: #3a4252; line-height: 1.7; }

/* =============================================================================
   6. CARTES "APPELS EN COURS" — finition + filet spectre
   ============================================================================= */
.passation-grid{ grid-template-columns: 1fr; gap: clamp(16px, 2vw, 22px); }
.passation-item{
  position: relative; border-radius: 18px;
  transition: transform .3s var(--dx2-ease), box-shadow .3s var(--dx2-ease), border-color .3s var(--dx2-ease);
}
.passation-item::before{
  content:""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--dx2-grad);
  opacity: 0; transition: opacity .3s var(--dx2-ease);
}
.passation-item:hover{
  transform: translateY(-5px);
  box-shadow: 0 24px 50px -28px oklch(30% 0.10 285 / .45);
  border-color: var(--decim-line, #e6edf5);
}
.passation-item:hover::before{ opacity: 1; }
.passation-item__link{ font-weight: 600; line-height: 1.22; }

/* =============================================================================
   7. BOUTONS — un cran plus présents
   ============================================================================= */
.btn-primary, .btn-secondary{ border-radius: 11px; font-weight: 600; }
.btn-primary{ box-shadow: 0 12px 26px -14px oklch(52% 0.10 250 / .85); }

/* =============================================================================
   8. PIED DE PAGE — bloc de marque sombre (contenu identique)
   ============================================================================= */
.footer{
  background: var(--dx2-ink); color: oklch(86% 0.02 250);
  border-top: 0; padding: clamp(2.5rem, 4vw, 3.5rem) 0 1.6rem;
  position: relative; margin-top: clamp(2.5rem,4vw,4rem);
}
.footer::before{
  content:""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--dx2-grad);
}
.footer .container{ display: flex; flex-direction: column; gap: 1rem; }
.footer h3{
  font-size: 1.4rem; font-weight: 600; color: #fff; margin: 0 0 .5rem;
  letter-spacing: .01em;
}
.footer > .container > div:first-child p{ color: oklch(82% 0.02 250); line-height: 1.6; margin: 0; max-width: 40ch; }
.footer__bottomList{ margin-top: .5rem; }
.footer__bottomList a{ color: oklch(86% 0.02 250); }
.footer__bottomList a:hover{ color: #fff; border-bottom-color: oklch(60% 0.05 250); }
.footer__bottomList li:not(:first-child)::before{ background: oklch(50% 0.03 250); }
.footer > .container > p:last-child{
  color: oklch(72% 0.02 250); font-size: .9rem;
  padding-top: 1.2rem; margin: .4rem 0 0;
  border-top: 1px solid oklch(96% 0.012 250 / .12);
}
.footer > .container > p:last-child strong{ color: #fff; }

@media (prefers-reduced-motion: reduce){
  .home-section::before{ filter:none; }
}