/* ==========================================================================
   JURIDOC AFRICA : SYSTÈME DE DESIGN
   Palette retenue par MOONA (retour à la première version) : petrol profond,
   teal Juridoc, accent ocre. Typographie Lato, conforme à la charte.
   Note : la charte réseaux sociaux utilise Indigo #3F4079 et Teal #00A3AF.
   Le site retient une autre gamme. Cohérence à arbitrer entre les deux.
   ========================================================================== */
:root {
  --ink: #3b3a7e;
  --ink-2: #25245a;
  --teal: #07808d;
  --teal-2: #0aa5b5;
  --teal-3: #0aa5b5;
  --gold: #0aa5b5;
  --gold-deep: #07808d;
  --sand: #f7f8fa;
  --ice: #ececf6;
  --txt: #111111;
  --muted: #5f6368;
  --paper: #fff;
  --paper-2: #f7f8fa;
  --line: #d9dce1;
  --line-2: #d9dce1;
  --font: 'Lato', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --r: 14px;
  --r-lg: 24px;
  --r-sm: 9px;
  --pill: 999px;
  --sh: 0 1px 2px rgba(37, 36, 90, .05), 0 8px 24px rgba(37, 36, 90, .07);
  --sh-lg: 0 2px 8px rgba(37, 36, 90, .07), 0 24px 56px rgba(37, 36, 90, .15);
  --wrap: 1440px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--txt);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

/* Sticky footer: on short pages (legal pages, empty results...) the footer
   stays at the bottom of the window instead of floating mid-screen. */
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column
}

body>* {
  flex-shrink: 0
}

body>.site-end {
  margin-top: auto
}

body.noscroll {
  overflow: hidden
}

/* l'en-tête est collant : les ancres doivent s'arrêter en dessous */
section[id],
div[id] {
  scroll-margin-top: 86px
}

/* aucun média ne doit pouvoir élargir la page sur petit écran */
svg,
video,
iframe {
  max-width: 100%
}

img {
  max-width: 100%;
  display: block
}

a {
  color: inherit;
  text-decoration: none
}

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit
}

h1,
h2,
h3,
h4 {
  font-weight: 900;
  line-height: 1.16;
  margin: 0;
  letter-spacing: -.015em;
  overflow-wrap: break-word
}

/* rien ne doit pouvoir élargir la page : noms de fichiers, adresses,
   références de textes et libellés longs sont coupables par défaut */
.ui-src a b,
.ui-alert b,
.ui-filters .f,
.map-count,
.map-note,
.f-contact a,
.dash-org,
.offer li,
.juri-meta li {
  overflow-wrap: anywhere
}

.ui-bar span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px
}

.eyebrow {
  display: block;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold-deep)
}

.eyebrow.on-dark {
  color: var(--gold)
}

.lede {
  font-size: 17px;
  color: var(--muted);
  max-width: 60ch;
  margin: 0
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0)
}

/* ---------------- BOUTONS ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 25px;
  border-radius: var(--pill);
  font-size: 14.5px;
  font-weight: 700;
  transition: .22s var(--ease);
  white-space: nowrap;
  border: 2px solid transparent
}

.btn-gold {
  background: #07808d;
  color: #fff
}

.btn-gold:hover {
  background: #0aa5b5;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(10, 165, 181, .4)
}

.btn-teal {
  background: var(--ink);
  color: #fff
}

.btn-teal:hover {
  background: var(--ink-2);
  transform: translateY(-1px)
}

.btn-ink {
  background: var(--ink);
  color: #fff
}

.btn-ink:hover {
  background: var(--ink-2);
  transform: translateY(-1px)
}

.btn-line {
  border-color: var(--line-2);
  color: var(--ink);
  background: #fff
}

.btn-line:hover {
  border-color: var(--ink);
  color: var(--ink)
}

.btn-ghost {
  border-color: rgba(255, 255, 255, .3);
  color: #fff
}

.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold)
}

.btn-sm {
  padding: 9px 18px;
  font-size: 13.5px
}

.btn-lg {
  padding: 15px 30px;
  font-size: 15.5px
}

.arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink)
}

.arrow:hover {
  gap: 11px
}

/* ---------------- BANDEAU ET EN-TÊTE ---------------- */
.topbar {
  background: var(--ink);
  color: #c9c9e6;
  font-size: 12.5px
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px
}

.topbar a:hover {
  color: var(--gold)
}

.tb-l,
.tb-r {
  display: flex;
  align-items: center;
  gap: 20px
}

.pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff
}

.pulse i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: blip 2.4s infinite
}

@keyframes blip {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(10, 165, 181, .55)
  }

  55% {
    box-shadow: 0 0 0 6px rgba(10, 165, 181, 0)
  }
}

.lang b {
  color: #fff
}

header.site {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line)
}

header.site .wrap {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 76px
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0
}

.logo-img {
  display: block;
  width: 203px;
  height: 24px;
  object-fit: contain;
  object-position: left center;
}

nav.main {
  display: flex;
  gap: 2px;
  margin-left: auto
}

nav.main>div {
  position: relative
}

nav.main .nav {
  background: none;
  border: 0;
  font-family: inherit;
  cursor: default;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: #2c4650;
  transition: .18s
}

nav.main a.nav {
  cursor: pointer
}

nav.main .nav:hover,
nav.main>div:focus-within .nav {
  background: var(--paper-2);
  color: var(--ink)
}

.caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .5
}

.mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(860px, 92vw);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  padding: 26px;
  opacity: 0;
  visibility: hidden;
  transition: .2s var(--ease)
}

nav.main>div:hover .mega,
nav.main>div:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0)
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.mega h5 {
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 10px;
  font-weight: 900
}

.mega ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px
}

.mega ul a {
  display: block;
  padding: 6px 9px;
  border-radius: 7px;
  font-size: 13.5px;
  color: #5f6368
}

.mega ul a:hover {
  background: var(--paper-2);
  color: var(--ink)
}

.mega-foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px
}

.mega-foot p {
  margin: 0;
  font-size: 13px;
  color: var(--muted)
}

/* Per-item hover dropdown (Espaces nationaux / Droit régional / Matières) */
.mega.mega-sm {
  left: 0;
  transform: translateX(0) translateY(8px);
  width: max-content;
  min-width: 240px;
  max-width: 92vw;
  padding: 12px
}

nav.main>div:hover .mega.mega-sm,
nav.main>div:focus-within .mega.mega-sm {
  transform: translateX(0) translateY(0)
}

/* Single-level card grid (one card per entry, arrow on the right) */
.mega.mega-cards {
  width: min(720px, 92vw);
  padding: 16px
}

.mega.mega-cards ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px
}

.mega.mega-cards ul a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
  white-space: normal
}

.mega.mega-cards ul a::after {
  content: "→";
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--gold-deep);
  font-size: 13px
}

@media (max-width: 900px) {
  .mega.mega-cards ul { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

.mega.mega-sm ul {
  gap: 2px
}

.mega.mega-sm ul a {
  padding: 8px 11px;
  font-size: 13.5px;
  white-space: nowrap
}

.hdr-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  flex-shrink: 0
}

.burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  margin: 4px auto;
  border-radius: 2px;
  transition: .22s var(--ease)
}

body.menu-open .burger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg)
}

body.menu-open .burger span:nth-child(2) {
  opacity: 0
}

body.menu-open .burger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg)
}

/* ---------------------------------------------------------------
   MENU MOBILE
   La navigation principale est masquée sous 1080px. Sans ce tiroir,
   le site serait sans navigation sur téléphone.
   --------------------------------------------------------------- */
.mnav-back {
  position: fixed;
  inset: 0;
  background: rgba(37, 36, 90, .55);
  z-index: 940;
  opacity: 0;
  visibility: hidden;
  transition: .24s var(--ease)
}

body.menu-open .mnav-back {
  opacity: 1;
  visibility: visible
}

.mnav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 88vw);
  z-index: 950;
  background: #fff;
  box-shadow: -8px 0 40px rgba(37, 36, 90, .24);
  transform: translateX(102%);
  transition: transform .26s var(--ease);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain
}

body.menu-open .mnav {
  transform: translateX(0)
}

.mnav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2
}

.mnav-close {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--ink);
  line-height: 1
}

.mnav-body {
  padding: 14px 20px 22px;
  display: grid;
  gap: 2px
}

.mnav-body .lvl1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  font-size: 16.5px;
  font-weight: 900;
  color: var(--ink);
  border-bottom: 1px solid var(--line)
}

.mnav-body .lvl1:active {
  color: var(--ink)
}

.mnav-sub {
  display: grid;
  gap: 1px;
  padding: 6px 0 12px
}

.mnav-sub a {
  padding: 11px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  color: #5f6368
}

.mnav-sub a:active {
  background: var(--paper-2);
  color: var(--ink)
}

.mnav-sub h6 {
  margin: 12px 0 4px;
  padding: 0 12px;
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 900
}

.mnav-cta {
  padding: 16px 20px 22px;
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  margin-top: auto;
  background: var(--paper-2)
}

.mnav-cta .btn {
  width: 100%
}

.mnav-lang {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 20px 0
}

.mnav-lang a {
  padding: 11px 17px;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 700;
  color: #5f6368
}

.mnav-lang a.on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink)
}

.mnav-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2)
}

.mnav-user b {
  display: block;
  font-size: 14.5px;
  color: var(--ink)
}

.mnav-user span {
  display: block;
  font-size: 12px;
  color: var(--muted)
}

/* menu utilisateur connecté : nom, puis société et nombre de collaborateurs */
.usermenu-wrap {
  position: relative
}

.usermenu-drop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 100%;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12)
}

.usermenu-drop[hidden] {
  display: none
}

.usermenu-drop .btn {
  width: 100%;
  justify-content: center
}

.usermenu {
  display: flex;
  background: none;
  font: inherit;
  cursor: pointer;
  align-items: center;
  gap: 11px;
  padding: 6px 8px 6px 15px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  color: var(--ink)
}

.usermenu:hover {
  border-color: var(--ink)
}

.um-txt {
  line-height: 1.15;
  text-align: right
}

.um-txt b {
  display: block;
  font-size: 13.5px;
  font-weight: 900
}

.um-txt span {
  display: block;
  font-size: 11px;
  color: var(--muted)
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 900;
  flex-shrink: 0
}

/* ---------------- HÉROS ET CARTE ---------------- */
.hero {
  position: relative;
  background: var(--ink-2);
  color: #fff;
  overflow: hidden;
  padding: 62px 0 72px
}

.hero::before {
  content: "";
  position: absolute;
  width: 780px;
  height: 780px;
  right: -280px;
  top: -400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 165, 181, .5), transparent 68%)
}

.hero::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  left: -240px;
  bottom: -310px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 165, 181, .2), transparent 68%)
}

.hero .wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 50px;
  align-items: center
}

.hero h1 {
  font-size: clamp(31px, 3.9vw, 49px);
  color: #fff;
  margin: 16px 0 0
}

.hero h1 em {
  font-style: normal;
  color: var(--gold)
}

.hero .lede {
  color: #d6d6ee;
  font-size: 17px;
  margin-top: 19px
}

.hero-sign {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 9px 18px;
  border-radius: var(--pill);
  background: rgba(10, 165, 181, .14);
  border: 1px solid rgba(10, 165, 181, .38);
  font-size: 15px;
  font-weight: 900;
  color: var(--gold)
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .14)
}

.hero-proof b {
  display: block;
  font-size: 23px;
  color: #fff;
  line-height: 1;
  font-weight: 900
}

.hero-proof span {
  font-size: 12.5px;
  color: var(--teal-3)
}

.mapcard {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  padding: 16px
}

.mapcard-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px
}

.mapcard-top h2 {
  font-size: 15.5px;
  color: #fff;
  font-weight: 900;
  margin: 0
}

.mapcard-top p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: #b4b4dc
}

.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08);
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0
}

.icon-btn:hover {
  background: rgba(255, 255, 255, .18);
  border-color: var(--gold)
}

/* barre de recherche de la carte */
.map-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-bottom: 10px;
}

.map-search input {
  width: 100%;
  padding: 11px 15px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .09);
  color: #fff;
  font-family: inherit;
  font-size: 14px
}

.map-search input::placeholder {
  color: #7ba3b0
}

.map-search input:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px
}

.map-filters {
  display: grid;
  /* auto-fit plutôt qu'un nombre de colonnes fixe : le filtre pays
     s'ajoute à zone + corpus sans qu'il faille recalculer de media query,
     et .mapcard peut se redimensionner (plein écran compris) sans casser
     la grille. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 9px
}

.map-filters select {
  appearance: none;
  width: 100%;
  background: rgba(255, 255, 255, .09) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%23a9c7d0' stroke-width='1.8' fill='none' stroke-linecap='round'/></svg>") no-repeat right 12px center;
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 32px 10px 13px;
  border-radius: 10px;
  cursor: pointer
}

.map-filters select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px
}

.map-filters select option {
  background: var(--ink);
  color: #fff
}

/* corpus et pays : listes déroulantes à CHOIX MULTIPLE, à côté du select
   zone dans .map-filters. Le bouton reprend exactement l'habillage
   de .map-filters select pour que les trois filtres se lisent comme un
   ensemble cohérent, le panneau de cases à cocher se superposant à la carte
   (d'où le z-index, au-dessus du calque Leaflet). */
.ms {
  position: relative
}

.ms-toggle {
  appearance: none;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, .09) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%23a9c7d0' stroke-width='1.8' fill='none' stroke-linecap='round'/></svg>") no-repeat right 12px center;
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 32px 10px 13px;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.ms-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px
}

.ms-toggle:disabled {
  cursor: default;
  opacity: .5
}

.ms-panel {
  position: absolute;
  z-index: 500;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  padding: 5px;
  border-radius: 10px;
  background: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  /* Le panneau pays peut lister tous les pays d'Afrique : on fait défiler */
  max-height: 280px;
  overflow-y: auto
}

.ms-panel[hidden] {
  display: none
}

.ms-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  color: #cfe3e8;
  cursor: pointer
}

.ms-opt:hover {
  background: rgba(255, 255, 255, .09);
  color: #fff
}

.ms-opt input {
  accent-color: var(--gold);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  cursor: pointer
}

/* /recherche — light "corpus" multi-select (same behaviour as .ms on
   the map, but on the white search sidebar). */
.msl {
  position: relative
}

.msl-toggle {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  text-align: left;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%237a8a90' stroke-width='1.8' fill='none' stroke-linecap='round'/></svg>") no-repeat right 13px center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--txt);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 11px 34px 11px 13px;
  cursor: pointer
}

.msl-toggle__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.msl-toggle:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px
}

.msl.is-disabled .msl-toggle,
.msl-toggle:disabled {
  opacity: .55;
  cursor: default
}

.msl-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  box-shadow: 0 16px 38px rgba(37, 36, 90, .16)
}

.msl-panel[hidden] {
  display: none
}

.msl-clear {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  margin-bottom: 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer
}

.msl-clear:hover {
  text-decoration: underline
}

.msl-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 700;
  color: var(--txt);
  cursor: pointer
}

.msl-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.msl-opt__name {
  flex: 1;
  min-width: 0
}

.msl-opt__check {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  visibility: hidden;
  color: var(--ink)
}

.msl-opt__check svg {
  width: 100%;
  height: 100%
}

.msl-opt:hover {
  background: var(--ice)
}

.msl-opt:has(input:checked) {
  color: var(--ink);
  background: var(--ice)
}

.msl-opt:has(input:checked) .msl-opt__check {
  visibility: visible
}

.msl-opt:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: -2px
}

.msl-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted)
}

.search-actions {
  display: flex;
  flex-direction: column;
  gap: 8px
}

#map {
  height: 400px;
  border-radius: 13px;
  background: #25245a;
  overflow: hidden;
  z-index: 1;
  margin-top: 9px
}

.leaflet-container {
  background: #25245a;
  font-family: var(--font)
}

/* Clicking a country focuses its SVG shape and the browser draws a
   rectangular focus box around it — the popup already shows the selection. */
.leaflet-container path.leaflet-interactive:focus {
  outline: none
}

.map-note {
  margin: 10px 2px 0;
  font-size: 11.5px;
  color: #76a0ad
}

.map-count {
  font-size: 11.5px;
  color: var(--gold);
  font-weight: 700;
  margin: 9px 2px 0
}

/* plein écran : colonne flexible, la carte prend toute la place restante.
   Évite un calcul de hauteur en vh qui devient faux sur téléphone. */
.mapcard.full {
  position: fixed;
  inset: 12px;
  z-index: 1500;
  background: var(--ink-2);
  border-color: rgba(255, 255, 255, .2);
  padding: 18px;
  overflow: auto;
  display: flex;
  flex-direction: column
}

/* Le topbar et l'en-tête sont sticky (leur propre contexte d'empilement) —
   plutôt que de compter uniquement sur le z-index pour passer au-dessus,
   on les masque complètement pendant le plein écran de la carte. */
body.map-fullscreen .topbar,
body.map-fullscreen header.site {
  display: none
}

.mapcard.full #map {
  flex: 1 1 auto;
  height: auto;
  min-height: 240px
}

.leaflet-popup-content-wrapper {
  border-radius: 13px;
  box-shadow: var(--sh-lg);
  padding: 0;
  overflow: hidden
}

/* Le popup ne porte plus que le nom du pays et ses zones (aucun appel à
   l'action) : il tient dans une carte nettement plus étroite. */
.leaflet-popup-content {
  margin: 0;
  width: 198px !important;
  font-family: var(--font)
}

.leaflet-popup-tip {
  background: #fff
}

.pop {
  padding: 11px 12px 12px
}

/* Le badge passe sous le nom : côte à côte, « JURIDOC CÔTE D'IVOIRE » ne
   laissait plus la place d'écrire le pays sur cette largeur. */
.pop-h {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin-bottom: 8px
}

.pop-h b {
  font-size: 14px;
  color: var(--ink);
  font-weight: 900;
  line-height: 1.2
}

.pop-badge {
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--pill)
}

.pop-badge.live {
  background: #e9f5ee;
  color: #1d6b40
}

.pop-badge.soon {
  background: var(--sand);
  color: var(--gold-deep)
}

.pop-zones {
  display: flex;
  flex-wrap: wrap;
  gap: 4px
}

/* Les zones du pays : celles qui sont sélectionnables dans le filtre sont
   des boutons (cliquer bascule la carte sur cette zone), les autres — les
   zones que l'API rattache au pays sans les exposer comme option de filtre,
   CEMAC et BEAC — restent de simples étiquettes. */
.pop-zone {
  font-size: 10px;
  font-weight: 700;
  font-family: inherit;
  padding: 3px 7px;
  border: 0;
  border-radius: 5px;
  background: var(--ice);
  color: var(--ink)
}

button.pop-zone {
  cursor: pointer;
  transition: .16s
}

button.pop-zone:hover {
  background: var(--ink);
  color: #fff
}

.pop-zone.is-static {
  opacity: .62
}

/* Raccourci « n'afficher que cette corpus » : présent seulement quand la
   plateforme qui dessert le pays opère aussi dans la zone sélectionnée. */
.pop-only {
  display: block;
  width: 100%;
  margin-top: 9px;
  padding: 7px 9px;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: .16s
}

.pop-only:hover:not(:disabled) {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff
}

.pop-only:disabled {
  cursor: default;
  background: var(--ice);
  border-color: transparent;
  color: var(--muted)
}

/* Nom du pays au survol : même habillage que le composant Angular de
   référence (.country-tooltip / .country-tooltip-muted), pour un rendu
   identique entre les deux apps. */
.country-tooltip {
  background: #1e1b4b;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25)
}

.country-tooltip::before {
  border-top-color: #1e1b4b
}

.country-tooltip-muted {
  background: #f3f4f6;
  color: #6b7280;
  font-size: 12px;
  padding: 3px 8px;
  border: 1px solid #d1d5db;
  border-radius: 5px
}

/* ---------------- SECTIONS ---------------- */
section {
  padding: 90px 0
}

section.tight {
  padding: 62px 0
}

.sec-head {
  margin-bottom: 44px
}

.sec-head h2 {
  font-size: clamp(27px, 3.2vw, 40px);
  color: var(--ink);
  margin: 13px 0 0
}

.sec-head .lede {
  margin-top: 16px;
  max-width: none
}

.sec-head.center {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center
}

.sec-head.center .lede {
  margin-left: auto;
  margin-right: auto
}

.sec-paper2 {
  background: var(--paper-2)
}

.sec-sand {
  background: var(--sand)
}

.sec-ink {
  background: var(--ink-2);
  color: #fff
}

.sec-ink h2 {
  color: #fff
}

.sec-ink .lede {
  color: #c9c9e6
}

/* appel final : grille en CSS et non en style en ligne, sinon elle reste
   sur deux colonnes en mobile */
.cta-final {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 44px;
  align-items: center
}

.cta-final h2 {
  font-size: clamp(26px, 3vw, 37px);
  margin-top: 13px
}

.cta-final .lede {
  margin-top: 17px
}

.cta-final-btns {
  display: grid;
  gap: 12px
}

.stats .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}

.stat {
  background: #fff;
  padding: 32px 22px;
  text-align: center
}

.stat b {
  display: block;
  font-size: 34px;
  color: var(--ink);
  line-height: 1;
  font-weight: 900
}

.stat span {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted)
}

.stat em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--gold-deep);
  font-weight: 700;
  margin-top: 3px
}

/* ---------------- PANNEAUX PRODUIT ---------------- */
.panel {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: var(--sh)
}

.panel:last-child {
  margin-bottom: 0
}

.panel.flip .panel-vis {
  order: 2
}

.panel-vis {
  position: relative;
  padding: 42px 38px;
  display: grid;
  place-items: center;
  min-height: 380px
}

.panel-vis.t-1 {
  background: linear-gradient(150deg, var(--ice), #dbe9ec)
}

.panel-vis.t-2 {
  background: linear-gradient(150deg, var(--sand), #efe1cb)
}

.panel-vis.t-3 {
  background: linear-gradient(150deg, #eef2f2, #dfe8e6)
}

.panel-vis.t-4 {
  background: linear-gradient(150deg, #f0f4f6, #dde6ea)
}

.panel-txt {
  background: var(--ink-2);
  color: #fff;
  padding: 42px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.panel-txt h3 {
  font-size: clamp(21px, 2.2vw, 29px);
  color: #fff;
  margin: 12px 0 0
}

.panel-txt p {
  margin: 15px 0 0;
  font-size: 15px;
  color: #c9c9e6;
  line-height: 1.66
}

.panel-txt .arrow {
  color: var(--gold);
  margin-top: 22px
}

.panel-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 8px
}

.panel-list li {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  color: #c6dde3
}

.panel-list li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 8px;
  flex-shrink: 0
}

.ui {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--sh-lg);
  width: 100%;
  max-width: 420px;
  font-size: 12.5px;
  line-height: 1.55;
  position: relative
}

.ui-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line)
}

.ui-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-2)
}

.ui-bar span {
  margin-left: 8px;
  font-size: 10.5px;
  color: var(--muted)
}

.ui-body {
  padding: 15px 16px 17px
}

.ui-q {
  display: flex;
  gap: 9px;
  margin-bottom: 13px
}

.ui-av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ice);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
  flex-shrink: 0
}

.ui-q p {
  margin: 0;
  font-weight: 700;
  color: var(--ink);
  font-size: 12.5px
}

.ui-a {
  background: var(--paper-2);
  border-radius: 10px;
  padding: 12px 13px;
  color: #5f6368
}

.ui-a p {
  margin: 0 0 9px
}

.ui-a p:last-child {
  margin: 0
}

.ui-src {
  display: grid;
  gap: 6px;
  margin-top: 12px
}

.ui-src a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 11px;
  color: var(--ink);
  font-weight: 700
}

.ui-src a b {
  color: var(--ink);
  font-weight: 900
}

.ui-src a em {
  font-style: normal;
  margin-left: auto;
  color: var(--muted);
  font-weight: 400;
  font-size: 10px
}

.ui-src a::before {
  content: "\00A7";
  width: 17px;
  height: 17px;
  border-radius: 4px;
  background: var(--ice);
  display: grid;
  place-items: center;
  font-size: 10px;
  flex-shrink: 0
}

.ui-float {
  position: absolute;
  background: #fff;
  border-radius: 11px;
  box-shadow: var(--sh-lg);
  padding: 11px 13px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 900
}

.ui-float.a {
  right: -24px;
  top: 56px;
  color: var(--gold-deep)
}

.ui-float.b {
  left: -28px;
  bottom: 48px;
  color: var(--ink)
}

.ui-float .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0
}

/* maquette de recherche classique */
.ui-filters {
  display: grid;
  gap: 7px;
  padding: 14px 16px
}

.ui-filters .f {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 11.5px;
  color: #5f6368
}

.ui-filters .f b {
  color: var(--ink);
  font-weight: 900;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  min-width: 96px
}

.ui-filters .f span {
  margin-left: auto;
  color: var(--ink);
  font-weight: 700
}

.ui-res {
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  display: grid;
  gap: 8px
}

.ui-res div {
  display: flex;
  gap: 9px;
  align-items: baseline;
  font-size: 11.5px;
  color: #5f6368
}

.ui-res div b {
  color: var(--ink);
  font-weight: 900;
  font-size: 11px
}

.ui-res div em {
  font-style: normal;
  margin-left: auto;
  color: var(--muted);
  font-size: 10px
}

/* maquette IA multifonctions */
.ui-tabs {
  display: flex;
  gap: 5px;
  padding: 12px 14px 0;
  flex-wrap: wrap
}

.ui-tab {
  font-size: 10.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--pill);
  background: var(--ice);
  color: var(--ink)
}

.ui-tab.on {
  background: var(--ink);
  color: #fff
}

/* maquette conformité */
.ui-doc {
  padding: 15px 16px
}

.ui-line {
  height: 7px;
  border-radius: 4px;
  background: #eef3f4;
  margin-bottom: 8px
}

.ui-line.s {
  width: 62%
}

.ui-line.m {
  width: 84%
}

.ui-line.mark {
  background: var(--sand);
  box-shadow: 0 0 0 2px #e5d5b6
}

.ui-fix {
  margin-top: 13px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 9px;
  padding: 11px 12px;
  background: #fffdf8
}

.ui-fix b {
  display: block;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 5px
}

.ui-fix p {
  margin: 0;
  font-size: 11.5px;
  color: #3c5a64
}

/* maquette veille */
.ui-alert {
  display: flex;
  gap: 11px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line)
}

.ui-alert:last-child {
  border-bottom: 0
}

.ui-alert .flag {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--ice);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
  flex-shrink: 0
}

.ui-alert b {
  display: block;
  font-size: 11.5px;
  color: var(--ink)
}

.ui-alert span {
  font-size: 10.5px;
  color: var(--muted)
}

.ui-alert em {
  font-style: normal;
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 900;
  color: var(--gold-deep);
  background: var(--sand);
  padding: 2px 7px;
  border-radius: 5px;
  height: fit-content
}

/* ---------------- ABONNEMENTS ---------------- */
.offers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 940px;
  margin: 0 auto
}

.offer {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px;
  display: flex;
  flex-direction: column;
  transition: .24s var(--ease)
}

.offer:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lg)
}

.offer.feat {
  border: 2px solid var(--gold);
  box-shadow: 0 20px 48px rgba(10, 165, 181, .16)
}

.offer-flag {
  position: absolute;
  top: -13px;
  left: 34px;
  background: var(--gold);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: var(--pill)
}

.offer h3 {
  font-size: 23px;
  color: var(--ink)
}

.offer .sub {
  margin: 9px 0 0;
  font-size: 14px;
  color: var(--muted)
}

.offer ul {
  list-style: none;
  padding: 0;
  margin: 22px 0 26px;
  display: grid;
  gap: 10px;
  font-size: 14px
}

.offer li {
  display: flex;
  gap: 10px;
  color: #5f6368
}

.offer li::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ice);
  border: 2px solid var(--ink);
  flex-shrink: 0;
  margin-top: 4px
}

.offer.feat li::before {
  border-color: var(--gold);
  background: var(--sand)
}

.offer li.off {
  color: var(--muted)
}

.offer li.off::before {
  border-color: var(--line-2);
  background: #fff
}

.offer .excluded {
  background: var(--sand, #f7f2e8);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  padding: 13px 15px;
  margin: 0 0 20px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #7a6a4a
}

.offer .excluded strong {
  color: var(--ink)
}

.offer .price {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 16px
}

.offer .btn {
  width: 100%
}

.offer .second {
  margin-top: 10px
}

/* ---------------- corpus ---------------- */
.juri {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px
}

/* Four cards (TN, SN, BJ, roadmap): 2x2 on mid-size screens, single column
   under 880px via the shared mobile rule further down. */
@media(max-width:1180px) {
  .juri {
    grid-template-columns: repeat(2, 1fr)
  }
}

.juri-card {
  position: relative;
  border-radius: var(--r);
  padding: 30px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: .24s var(--ease)
}

.juri-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lg);
  border-color: transparent
}

.juri-card.soon {
  background: var(--paper-2);
  border-style: dashed
}

.juri-flag {
  width: 46px;
  height: 34px;
  border-radius: 6px;
  background: var(--ice);
  color: var(--ink);
  margin-bottom: 17px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 900
}

.juri-card h3 {
  font-size: 21px;
  color: var(--ink)
}

.juri-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 11px 0 15px
}

.juri-tags span {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--ice);
  color: var(--ink)
}

.juri-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  font-size: 13.5px;
  color: var(--muted);
  display: grid;
  gap: 8px
}

.juri-meta li {
  display: flex;
  gap: 9px
}

.juri-meta li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 8px;
  flex-shrink: 0
}

.juri-card .btn {
  margin-top: auto
}

.badge-abs {
  position: absolute;
  top: 22px;
  right: 22px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--pill)
}

.badge-abs.live {
  background: #e9f5ee;
  color: #1d6b40
}

.badge-abs.soon {
  background: var(--sand);
  color: var(--gold-deep)
}

/* ---------------- PREUVE ---------------- */
.vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: stretch
}

.vs-col {
  border-radius: var(--r);
  padding: 30px
}

.vs-bad {
  background: var(--paper-2);
  border: 1px solid var(--line-2)
}

.vs-good {
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 0 20px 48px rgba(7, 128, 141, .15)
}

.vs-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 15px
}

.vs-bad .vs-tag {
  color: var(--muted)
}

.vs-good .vs-tag {
  color: var(--ink)
}

.vs-q {
  font-size: 14px;
  font-weight: 900;
  color: var(--ink);
  padding-bottom: 13px;
  margin: 0 0 13px;
  border-bottom: 1px solid var(--line)
}

.vs-a {
  font-size: 14px;
  color: #3d5964;
  line-height: 1.68;
  margin: 0
}

.vs-src {
  margin-top: 15px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.55
}

.vs-bad .vs-src {
  background: var(--sand);
  color: var(--gold-deep)
}

.vs-good .vs-src {
  background: var(--ice);
  color: var(--ink)
}

.vs-mid {
  display: grid;
  place-items: center;
  font-size: 15px;
  color: var(--muted);
  font-weight: 700
}

/* ---------------- LOGOS, VIDÉOS, ARTICLES ---------------- */
.logos {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center
}

.logos div,
.logos a {
  height: 140px;
  min-width: 240px;
  padding: 0 34px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  color: #8ba1a9;
  transition: .2s
}

.logos div:hover,
.logos a:hover {
  color: var(--ink);
  border-color: var(--line-2)
}

.logos img {
  max-height: 88px;
  max-width: 100%
}

.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

.vid {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: .24s var(--ease);
  display: block
}

.vid:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh)
}

.vid-thumb {
  aspect-ratio: 16/9;
  background: linear-gradient(140deg, var(--teal), var(--ink));
  display: grid;
  place-items: center;
  position: relative
}

.vid-thumb::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 16px solid #fff;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 4px
}

.vid-play {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  border: 2px solid rgba(255, 255, 255, .55)
}

.vid-body {
  padding: 20px 22px 22px
}

.vid-body b {
  display: block;
  font-size: 15px;
  color: var(--ink);
  font-weight: 900
}

.vid-body span {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 3px
}

.vid-body .arrow {
  margin-top: 13px;
  font-size: 13px
}

.tagline {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: var(--sand);
  padding: 3px 9px;
  border-radius: 5px;
  margin-bottom: 14px
}

.art {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px;
  transition: .24s var(--ease)
}

.art:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh)
}

.art-media {
  margin: -26px -26px 18px;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--ice);
  border-radius: var(--r) var(--r) 0 0
}

.art-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.art h4 {
  font-size: 17px;
  color: var(--ink);
  line-height: 1.32;
  margin-bottom: 12px
}

.art .tagline {
  margin-bottom: 14px
}

.news-article-hero {
  margin: 24px 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 21/9;
  background: var(--ice)
}

.news-article-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted)
}

.doc-meta b {
  color: var(--ink);
  font-weight: 700
}

.doc-paywall {
  margin-top: 32px;
  padding: 40px 32px;
  text-align: center;
  background: var(--paper-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg)
}

.doc-paywall__icon {
  font-size: 32px;
  display: block;
  margin-bottom: 12px
}

.doc-paywall h3 {
  font-size: 19px;
  color: var(--ink)
}

.doc-paywall .lede {
  margin: 10px auto 20px;
  text-align: center
}

.doc-paywall .btn {
  display: inline-flex
}

.art-excerpt {
  margin: 0 0 4px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6
}

.art .by {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--line)
}

.art .av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 900;
  flex-shrink: 0
}

.art .by b {
  display: block;
  font-size: 13px;
  color: var(--ink)
}

.art .by span {
  font-size: 11.5px;
  color: var(--muted)
}

/* ---------------- LE BLOG (accueil) ----------------
   Encadrement marqué : bordure pleine, visuel de l'article en tête et
   pastille de catégorie posée sur l'image (couleur selon la rubrique). */
.post {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  transition: .24s var(--ease)
}

.post:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lg);
  border-color: var(--ink)
}

.post-media {
  display: block;
  position: relative;
  aspect-ratio: 1021/580;
  background: var(--ice);
  overflow: hidden;
  border-bottom: 1.5px solid var(--line-2)
}

.post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: .45s var(--ease)
}

.post:hover .post-media img {
  transform: scale(1.045)
}

.post-cat {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 6px 13px;
  border-radius: var(--pill);
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(37, 36, 90, .3)
}

.post-cat.ev {
  background: var(--gold);
  color: var(--ink)
}

.post-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px
}

.post h4 {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.34;
  color: var(--ink)
}

.post .by {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line)
}

.post .av {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 900
}

.post .by b {
  font-size: 13.5px;
  font-weight: 900;
  color: var(--ink)
}

.post .arrow {
  margin-top: 15px
}

.blog-carousel {
  display: flex;
  align-items: center;
  gap: 14px
}

.blog-more {
  text-align: center;
  margin-top: 34px
}

.blog-nav__btn {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(37, 36, 90, .12);
  transition: .16s var(--ease)
}

.blog-nav__btn:hover:not([disabled]) {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff
}

.blog-nav__btn[disabled] {
  opacity: .3;
  cursor: default;
  box-shadow: none
}

.blog-nav__btn svg {
  width: 17px;
  height: 17px
}

[dir="rtl"] .blog-nav__btn svg {
  transform: scaleX(-1)
}

.blog-track {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 22px) / 3);
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px
}

.blog-track::-webkit-scrollbar {
  display: none
}

.blog-track > .post {
  scroll-snap-align: start
}

@media(max-width:900px) {
  .blog-track {
    grid-auto-columns: calc((100% - 22px) / 2)
  }
}

@media(max-width:640px) {
  .blog-carousel {
    gap: 0
  }

  .blog-nav__btn {
    display: none
  }

  .blog-track {
    grid-auto-columns: 84%
  }
}

/* ---------------- ACTUALITÉS : LISTE ET DÉTAIL ---------------- */
.news-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
  font-size: 13.5px;
  color: var(--muted)
}

.news-article-body {
  margin-top: 26px;
  font-size: 15.5px;
  line-height: 1.75;
  color: #5f6368
}

.news-article-body p {
  margin: 0 0 16px
}

.news-article-body h2,
.news-article-body h3 {
  color: var(--ink);
  margin: 26px 0 12px
}

.news-article-body a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline
}

.news-article-body ul,
.news-article-body ol {
  margin: 0 0 16px;
  padding-left: 22px
}

.news-article-body img {
  border-radius: var(--r-sm);
  margin: 16px 0
}

/* Legal pages (backoffice content): tables carry inline border/cellpadding
   attributes, overridden here to match the site. */
.legal-body table {
  width: 100% !important;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 14.5px
}

.legal-body th,
.legal-body td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: start;
  vertical-align: top;
  overflow-wrap: anywhere
}

.legal-body thead th {
  background: var(--paper-2);
  color: var(--ink)
}

/* Label/value tables (no header row): fixed label column */
.legal-body tbody:only-child td:first-child {
  width: 34%
}

/* Multi-column tables (privacy policy): scroll sideways on phones */
@media (max-width: 760px) {
  .legal-body table {
    display: block;
    overflow-x: auto
  }
}

.art .by span {
  font-size: 11.5px;
  color: var(--muted)
}

/* ---------------- VEILLE ---------------- */
.veille {
  background: linear-gradient(122deg, var(--ink), #3b3a7e);
  border-radius: var(--r-lg);
  padding: 52px;
  color: #fff;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 44px;
  align-items: center;
  position: relative;
  overflow: hidden
}

.veille::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  right: -160px;
  bottom: -200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 165, 181, .26), transparent 70%)
}

.veille>* {
  position: relative;
  z-index: 2
}

.veille h2 {
  font-size: clamp(26px, 3vw, 34px);
  color: #fff;
  margin-top: 13px
}

.veille p {
  color: #d6d6ee;
  font-size: 15.5px;
  margin: 15px 0 0
}

.vform {
  display: grid;
  gap: 11px
}

.vrow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.vform input,
.vform select {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .09);
  color: #fff;
  font-family: inherit;
  font-size: 14.5px
}

.vform input::placeholder {
  color: #89aeb9
}

.vform input:focus,
.vform select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px
}

.vform select option {
  background: var(--ink)
}

.vform small {
  font-size: 12px;
  color: #b4b4dc;
  line-height: 1.5
}

/* ---------------------------------------------------------------
   BASCULE VISITEUR ET CONNECTÉ
   Tout est piloté par la classe is-auth posée sur body. Aucun style
   d'affichage en ligne sur ces blocs : un style en ligne l'emporterait
   sur la règle de masquage et laisserait « Se connecter » visible.
   --------------------------------------------------------------- */
.authonly {
  display: none
}

.hdr-guest {
  display: flex;
  gap: 10px;
  align-items: center
}

body.is-auth .guestonly {
  display: none
}

body.is-auth .authonly {
  display: block
}

body.is-auth .btn.authonly {
  display: inline-flex
}

body.is-auth .usermenu.authonly {
  display: flex
}

/* menu mobile : mêmes règles, pilotées par la même classe */
.mnav-guest,
.mnav-auth {
  display: grid;
  gap: 10px
}

.mnav-guest .btn,
.mnav-auth .btn {
  width: 100%
}

/* .mnav-auth{display:grid} above out-ranks the generic .authonly{display:none}
   (same specificity, later in the file): re-hide it for visitors. */
.mnav-auth.authonly {
  display: none
}

body.is-auth .mnav-user.authonly {
  display: flex
}

body.is-auth .mnav-auth.authonly {
  display: grid
}

/* ---------------- ESPACE CLIENT ---------------- */
.dash {
  padding: 44px 0 20px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line)
}

.dash-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px
}

.dash-top h2 {
  font-size: 29px;
  color: var(--ink)
}

.dash-org {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 9px;
  flex-wrap: wrap
}

.dash-org b {
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 900
}

.dash-org span {
  font-size: 13px;
  color: var(--muted)
}

.dash-org .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--line-2)
}

.dash-org a {
  font-size: 13px;
  color: var(--ink);
  font-weight: 700
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px
}

.dtile {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  transition: .22s var(--ease);
  display: block
}

.dtile .k {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted)
}

.dtile b {
  display: block;
  font-size: 25px;
  color: var(--ink);
  margin: 9px 0 3px;
  font-weight: 900
}

.dtile span {
  font-size: 12.5px;
  color: var(--muted)
}

.dtile.ok {
  border-left: 4px solid #2f8f57
}

.dtile.warn {
  border-left: 4px solid var(--gold)
}

.notif {
  display: grid;
  gap: 6px;
  margin-top: 8px
}

.notif i {
  font-style: normal;
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
  color: var(--muted)
}

.notif i b {
  font-size: 12px;
  color: var(--ink);
  font-weight: 900;
  margin: 0
}

.quick {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px
}

.demobar {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--ink-2);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--pill);
  padding: 9px 9px 9px 17px;
  box-shadow: 0 14px 38px rgba(37, 36, 90, .42);
  font-size: 12.5px
}

.switch {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, .22);
  transition: .22s;
  flex-shrink: 0
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: .22s var(--ease)
}

body.is-auth .switch {
  background: var(--gold)
}

body.is-auth .switch::after {
  transform: translateX(20px)
}

/* ---------------- PIED DE PAGE ---------------- */
/* Background comes from .site-end (below), the footer's wrapper */
footer.site {
  color: #c9c9e6;
  padding: 64px 0 0;
  font-size: 14px
}

/*
  Dark end of the page (base.html.twig): the optional dark section above the
  footer + the footer share this background, so the filigrane — a low-poly
  map of Africa, white lines on transparent — spans the whole dark area,
  full height, behind the content.
*/
.site-end {
  position: relative;
  overflow: hidden;
  background: var(--ink-2)
}

.site-end::before {
  content: "";
  position: absolute;
  top: 32px;
  bottom: 32px;
  right: 2%;
  width: 56%;
  background: url("../images/africa-watermark-5a4dd38468d4089b5fbac7d9b4caef67.png") no-repeat right center / contain;
  opacity: .12;
  pointer-events: none
}

.site-end > * {
  position: relative;
  z-index: 1;
  background: transparent
}

@media (max-width: 760px) {
  .site-end::before {
    right: -20%;
    width: 120%;
    opacity: .07
  }
}

.f-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 44px
}

footer.site h5 {
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 16px;
  font-weight: 900
}

footer.site ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px
}

footer.site a:hover {
  color: var(--gold)
}

.f-brand p {
  margin: 17px 0 0;
  max-width: 38ch;
  line-height: 1.65;
  font-size: 13.5px
}

.f-sign {
  display: block;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 900;
  color: var(--gold)
}

.f-contact {
  margin-top: 18px;
  display: grid;
  gap: 6px;
  font-size: 13.5px
}

.f-bottom {
  border-top: 1px solid rgba(255, 255, 255, .11);
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12.5px
}

.f-bottom nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap
}

/* ---------------- TARIFS (/offres, /commander/{id}) ---------------- */
.pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto
}

/* A section (.sub, price, sites, ia, zones, compliance) only renders its
   .pricing-card__row wrapper when that pack actually has content for it —
   a pack without IA/compliance items is simply a shorter card, not a
   blank reserved section. The grid row still stretches every card to the
   same height (default align-items:stretch) and the CTA is pinned to the
   bottom via margin-top:auto below, so the buttons land at the same
   height across the row without inflating every section above them to
   force full alignment section-by-section. */
.pricing-card__row {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 12px
}

.pricing-card .sub p {
  margin: 0
}

/* Reserves enough height for 2 lines of admin-written description so the
   price below it starts at the same spot on every card in the row, even
   when one pack's description is a single short line and another's wraps
   to two — without pinning every other section to match too (see the
   compact-cards note above .pricing-card__row). */
.pricing-card__row--desc {
  min-height: 96px
}

.pricing-card h3 {
  font-size: 28px;
  text-align: center
}

.pricing-card__row--cta {
  margin-top: auto
}

.pricing-amount {
  margin-top: 18px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap
}

.pricing-amount__value {
  font-size: 32px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1
}

.pricing-amount__currency {
  font-size: 16px;
  font-weight: 900;
  color: var(--ink)
}

.pricing-amount__period {
  font-size: 12px;
  color: var(--muted)
}

.pricing-amount__ht {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--muted)
}

.pricing-amount__range {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 700
}

.pricing-select {
  width: 100%;
  margin-top: 12px;
  padding: 10px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer
}

/* ---------------- DERNIÈRES PARUTIONS ---------------- */
.site-logo-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px
}

.site-logo-picker__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 10px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  transition: .18s var(--ease)
}

.site-logo-picker__item:hover {
  border-color: var(--ink)
}

.site-logo-picker__item.is-active {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--ink) inset
}

.site-logo-picker__item img {
  height: 100%;
  max-width: 150px;
  object-fit: contain
}

.site-logo-picker__item span {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink)
}

.recent-docs-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 34px;
  box-shadow: var(--sh);
  margin-bottom: 44px
}

.recent-docs-hero .sec-head {
  margin-bottom: 0
}

.recent-docs-hero__icon {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--ice);
  color: var(--ink);
  display: grid;
  place-items: center
}

.recent-docs-hero__icon svg {
  width: 34px;
  height: 34px
}

@media(max-width:640px) {
  .recent-docs-hero {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 14px;
    padding: 20px
  }

  .recent-docs-hero .sec-head {
    flex: 1 1 auto;
    min-width: 0
  }

  .recent-docs-hero__icon {
    width: 44px;
    height: 44px
  }

  .recent-docs-hero__icon svg {
    width: 22px;
    height: 22px
  }
}

.recent-docs-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start
}

.recent-docs-filter {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 13px;
  box-shadow: var(--sh);
  width: 295px;
  position: sticky;
  top: 95px;
}

.recent-docs-filter h3 {
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 16px
}

.recent-docs-filter .authform {
  gap: 14px
}

.recent-docs-filter select {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--txt);
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer
}

.recent-docs-results__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  box-shadow: var(--sh);
  position: sticky;
  top: 84px;
  z-index: 5;
  margin-top:13px;
}

.search-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 20px auto 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 10px 18px;
  box-shadow: var(--sh);
  width: max-content;
  max-width: 100%
}

.search-pagination__status {
  font-size: 13.5px;
  font-weight: 900;
  color: var(--ink)
}

.search-pagination__controls {
  display: flex;
  align-items: center;
  gap: 6px
}

.search-pagination__btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  flex-shrink: 0;
  transition: .18s var(--ease)
}

.search-pagination__btn:hover {
  background: var(--ink-2)
}

.search-pagination__btn svg {
  width: 15px;
  height: 15px
}

[dir="rtl"] .search-pagination__btn svg {
  transform: scaleX(-1)
}

.recent-docs-count {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink)
}

.recent-docs-results__head select {
  padding: 9px 32px 9px 13px;
  border-radius: var(--pill);
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--txt);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer
}

.recent-docs-group {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--sh);
  margin-bottom: 24px
}

.recent-docs-group h4 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 16px
}

.recent-docs-group h4 img {
  flex-shrink: 0;
  width: 50px;
  height: 50px
}

.recent-doc-item {
  display: block;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 20px;
  margin-bottom: 10px;
  transition: .18s var(--ease)
}

.recent-doc-item:last-child {
  margin-bottom: 0
}

.recent-doc-item:hover {
  border-color: var(--ink);
  box-shadow: var(--sh)
}

.recent-doc-item b {
  display: block;
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 900;
  line-height: 1.4
}

.recent-doc-item__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted)
}

@media(max-width:480px) {
  .recent-doc-item__meta {
    flex-direction: column;
    gap: 2px
  }
}

.recent-docs-filter__head {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.filter-fab,
.filter-close,
.filter-backdrop {
  display: none
}

@media(max-width:880px) {
  .recent-docs-grid {
    grid-template-columns: 1fr
  }

  /* Filter -> left drawer */
  .recent-docs-filter {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1200;
    width: min(88vw, 340px);
    max-width: none;
    padding: 18px 16px 28px;
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform .28s ease, visibility 0s linear .28s
  }

  .is-filter-open .recent-docs-filter {
    transform: none;
    visibility: visible;
    transition: transform .28s ease
  }

  .filter-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: rgba(20, 22, 31, .45)
  }

  .filter-backdrop[hidden] {
    display: none
  }

  .filter-close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--paper-2);
    color: var(--ink);
    font-size: 22px;
    line-height: 1;
    cursor: pointer
  }

  .filter-fab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    left: 0;
    top: 40%;
    transform: translateY(-50%);
    z-index: 930; /* above the sticky header (900), below the burger menu (940/950) */
    padding: 11px 16px 11px 12px;
    border: 0;
    border-radius: 0 14px 14px 0;
    background: var(--ink);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 6px 10px 24px -8px rgba(20, 22, 31, .55);
    cursor: pointer
  }

  .filter-fab svg {
    width: 18px;
    height: 18px
  }

  .is-filter-open .filter-fab {
    display: none
  }

  html.filter-drawer-lock {
    overflow: hidden
  }
}

/* ---- Dernières parutions : landing grid (one card per site) ---- */
.parutions-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 4px 0 36px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink)
}

.parutions-filter select {
  min-width: 120px;
  padding: 9px 32px 9px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--txt);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer
}

.parutions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
  justify-content: center;
  gap: 26px
}

.parutions-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  overflow: hidden;
  transition: .18s var(--ease)
}

.parutions-card:hover {
  border-color: var(--ink);
  transform: translateY(-3px)
}

.parutions-card__logo {
  display: grid;
  place-items: center;
  padding: 46px 26px 14px;
  min-height: 150px
}

.parutions-card__logo img {
  max-height: 58px;
  max-width: 200px;
  object-fit: contain
}

.parutions-card__logo b {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  text-align: center
}

.parutions-card__name {
  padding: 0 20px 24px;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink)
}

.parutions-card__bar {
  margin-top: auto;
  padding: 13px 16px;
  background: var(--ink-2);
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em
}

/* ---- Dernières parutions : sidebar + document list ---- */
.recent-docs-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 32px
}

.recent-docs-side {
  position: sticky;
  top: 95px;
  display: flex;
  flex-direction: column;
  /* One card holding both groups (corpus + catégories), spread apart
     inside rather than stacked as two separate boxes. */
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  padding: 8px
}

.rdnav {
  padding: 4px
}

.rdnav__title {
  display: block;
  padding: 4px 12px 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted)
}

.rdnav + .rdnav {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line)
}

.rdnav__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--txt);
  transition: .16s var(--ease)
}

.rdnav__item+.rdnav__item {
  border-top: 1px solid var(--line)
}

.rdnav__arrow {
  flex-shrink: 0;
  opacity: 0;
  color: currentColor;
  transition: .16s var(--ease)
}

.rdnav__label {
  flex: 1;
  min-width: 0
}

.rdnav__count {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted)
}

.rdnav__item:hover {
  color: var(--ink)
}

.rdnav__item.is-active {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-sm)
}

.rdnav__item.is-active+.rdnav__item,
.rdnav__item.is-active {
  border-top-color: transparent
}

.rdnav__item.is-active .rdnav__arrow {
  opacity: 1
}

.rdnav__item.is-active .rdnav__count {
  color: rgba(255, 255, 255, .75)
}

[dir="rtl"] .rdnav__arrow {
  transform: scaleX(-1)
}

.recent-docs-main {
  min-width: 0
}

.recent-docs-periodbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 24px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink)
}

.recent-docs-periodbar select {
  padding: 9px 32px 9px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--txt);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer
}

.recent-docs-group__title {
  font-size: 16px;
  font-weight: 900;
  color: var(--ink);
  margin: 28px 0 14px
}

.recent-docs-group__title:first-child,
.recent-docs-group:first-child .recent-docs-group__title {
  margin-top: 0
}

.recent-docs-group__sub {
  text-transform: uppercase
}

.recent-doc-card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  padding: 22px 24px;
  margin-bottom: 16px;
  color: inherit;
  transition: .16s var(--ease)
}

.recent-doc-card:hover {
  border-color: var(--ink)
}

.recent-doc-card__title {
  display: block;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.45;
  color: var(--ink);
  transition: color .16s var(--ease)
}

.recent-doc-card:hover .recent-doc-card__title {
  color: var(--ink)
}

.recent-doc-card__preview {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.recent-doc-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px
}

.recent-doc-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 12.5px;
  color: var(--muted)
}

.recent-doc-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.recent-doc-card__meta svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0
}

.recent-doc-card__langs {
  display: flex;
  gap: 6px
}

.lang-badge {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 26px;
  padding: 0 7px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 800;
  color: var(--muted)
}

@media(max-width:880px) {
  .recent-docs-layout {
    grid-template-columns: 1fr
  }

  .recent-docs-side {
    position: static
  }

  .recent-docs-periodbar {
    justify-content: flex-start
  }
}

/* ---------------- PAGE RECHERCHE ---------------- */
.search-filter-section {
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 6px 0 -4px
}

.search-checkbox label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer
}

.authform .search-checkbox input {
  width: 16px;
  flex-shrink: 0;
  accent-color: var(--ink)
}

.search-result__preview {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted)
}

.recent-doc-item mark {
  background: rgba(10, 165, 181, .3);
  color: var(--ink);
  border-radius: 3px;
  padding: 0 2px
}

/* ---------------- PAGE CONTACT ---------------- */
.contact-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 44px;
  max-width: 980px;
  margin: 0 auto;
  align-items: start
}

.contact-info__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 4px 0
}

.contact-info__list dt {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-top: 16px
}

.contact-info__list dt:first-child {
  margin-top: 0
}

.contact-info__list dd {
  margin: 4px 0 0;
  font-size: 14.5px;
  color: var(--txt)
}

.contact-info__list dd a {
  color: var(--ink);
  font-weight: 700
}

.contact-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px;
  box-shadow: var(--sh)
}

.contact-card .authform {
  margin-top: 0
}

@media(max-width:880px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 28px
  }
}

/* ---------------- MODALE « DEMANDER UNE DÉMO » ---------------- */
.demo-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: .22s var(--ease)
}

.demo-modal.is-open {
  opacity: 1;
  visibility: visible
}

.demo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(37, 36, 90, .6)
}

.demo-modal__card {
  position: relative;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: 38px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(10px);
  transition: transform .22s var(--ease)
}

.demo-modal.is-open .demo-modal__card {
  transform: translateY(0)
}

.demo-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center
}

.demo-modal__close:hover {
  border-color: var(--ink);
  color: var(--ink)
}

.demo-modal__topic {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 12px
}

.demo-modal__topic span {
  color: var(--muted);
  font-weight: 700
}

.demo-modal__topic b {
  color: var(--gold-deep);
  font-weight: 900;
  background: var(--sand);
  padding: 3px 10px;
  border-radius: var(--pill)
}

.demo-modal h2 {
  font-size: 22px;
  color: var(--ink)
}

.demo-modal .lede {
  margin-top: 8px;
  font-size: 14px
}

.demo-modal .authform {
  margin-top: 20px
}

/* ---------------- CONNEXION / CODE OTP ---------------- */
.authpage {
  padding: 90px 0;
  background: var(--paper-2);
  min-height: 60vh
}

.authwrap {
  max-width: 440px
}

.authwrap.wide {
  max-width: 680px
}

.authcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--sh)
}

.authcard-success {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  background: #e9f5ee;
  color: #1d6b40;
  border: 1px solid #bfe3cd
}

.authcard h1 {
  font-size: clamp(23px, 3vw, 28px);
  color: var(--ink);
  margin: 13px 0 0
}

.authcard .lede {
  margin-top: 12px;
  font-size: 14.5px
}

.authcard-error {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  background: #fdeceb;
  color: #a3312a;
  border: 1px solid #f4c9c5
}

.authform {
  display: grid;
  gap: 16px;
  margin-top: 22px
}

.authform>div {
  display: grid;
  gap: 7px;
  align-content: start
}

.authform label {
  font-size: 12.5px;
  font-weight: 900;
  color: var(--ink)
}

/* Contact & demo forms: "*" after required fields' labels */
.contact-form label.required::after {
  content: " *";
  color: #a3312a
}

.form-required-note {
  margin: -4px 0 0;
  font-size: 12px;
  color: var(--muted)
}

.authform input,
.authform select,
.authform textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--txt);
  font-family: inherit;
  font-size: 14.5px
}

.authform select {
  cursor: pointer
}

/* Checkout form: payment-method dropdown. Chromium's customizable select
   (appearance: base-select) lets the open list be styled like the site;
   other browsers keep their native list. */
.authform select[data-checkout-target="paymentMethod"] {
  font-family: var(--font);
  color-scheme: light
}

@supports (appearance: base-select) {
  .authform select[data-checkout-target="paymentMethod"],
  .authform select[data-checkout-target="paymentMethod"]::picker(select) {
    appearance: base-select
  }

  .authform select[data-checkout-target="paymentMethod"]::picker(select) {
    margin-top: 6px;
    padding: 6px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-lg)
  }

  .authform select[data-checkout-target="paymentMethod"]::picker-icon {
    color: var(--ink);
    transition: rotate .2s var(--ease)
  }

  .authform select[data-checkout-target="paymentMethod"]:open::picker-icon {
    rotate: 180deg
  }

  .authform select[data-checkout-target="paymentMethod"] option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--r-sm);
    font-family: var(--font);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    transition: background .15s var(--ease)
  }

  .authform select[data-checkout-target="paymentMethod"] option:first-child {
    color: var(--muted);
    font-weight: 400
  }

  .authform select[data-checkout-target="paymentMethod"] option:hover,
  .authform select[data-checkout-target="paymentMethod"] option:focus-visible {
    background: var(--ice)
  }

  .authform select[data-checkout-target="paymentMethod"] option:checked {
    background: var(--ink);
    color: #fff
  }

  .authform select[data-checkout-target="paymentMethod"] option::checkmark {
    display: none
  }
}

.authform input:focus,
.authform select:focus,
.authform textarea:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px
}

.authform .form-error-message,
.authform .invalid-feedback {
  margin-top: 2px;
  font-size: 12px;
  color: #a3312a
}

.authform .btn {
  width: 100%;
  margin-top: 6px
}

.authform>.otp-real-field {
  display: none
}

.authform>.otp-boxes {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: clamp(5px, 1.6vw, 10px)
}

.authform .otp-box {
  flex: 1 1 0;
  min-width: 0;
  max-width: 46px;
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: clamp(14px, 4vw, 19px);
  font-weight: 900;
  text-align: center;
  padding: 0
}

.authform .otp-box:focus {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-color: var(--ink)
}

.btn-spinner {
  display: none;
  width: 15px;
  height: 15px;
  margin-right: 8px;
  vertical-align: -3px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: otp-spin .7s linear infinite
}

.btn.is-loading {
  pointer-events: none;
  opacity: .82
}

.btn.is-loading .btn-spinner {
  display: inline-block
}

@keyframes otp-spin {
  to {
    transform: rotate(360deg)
  }
}

/* inscription : deux colonnes sur desktop, une seule sur mobile */
.authform.grid-2 {
  grid-template-columns: 1fr 1fr
}

.authform.grid-2 .full {
  grid-column: 1 / -1
}

/* civilité : bascule à deux pilules plutôt que des boutons radio bruts —
   plus simple à lire, et garantie sur une seule ligne quelle que soit la
   largeur du champ (contrairement à des radios+libellés qui s'enroulent) */
.form-choices--inline {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 2px
}

.form-choices--inline input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px
}

.form-choices--inline label {
  margin: 0;
  padding: 10px 22px;
  border-radius: var(--pill);
  border: 1px solid var(--line-2);
  background: #fff;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: .18s var(--ease)
}

.form-choices--inline label:hover {
  border-color: var(--ink);
  color: var(--ink)
}

.form-choices--inline input[type="radio"]:checked+label {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff
}

.form-choices--inline input[type="radio"]:focus-visible+label {
  outline: 2px solid var(--ink);
  outline-offset: 2px
}

@media(max-width:680px) {
  .authform.grid-2 {
    grid-template-columns: 1fr
  }
}

.authcard-foot {
  margin-top: 20px;
  font-size: 13px;
  color: var(--muted);
  text-align: center
}

.authcard-foot a {
  color: var(--ink);
  font-weight: 700;
  margin-left: 6px
}

/* ---------------- PAGE MON ESPACE ---------------- */
.account-page {
  background: var(--paper-2)
}

.account-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 28px
}

.account-heading h1 {
  margin-top: 10px
}

.account-orders {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  padding: 26px
}

.account-orders h2 {
  font-size: 18px;
  margin: 0 0 18px
}

.account-orders__scroll {
  overflow-x: auto
}

.account-orders__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px
}

.account-orders__table th,
.account-orders__table td {
  padding: 14px 12px;
  border-top: 1px solid var(--line);
  text-align: left;
  white-space: nowrap
}

.account-orders__table th {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase
}

.account-status {
  display: inline-block;
  padding: 5px 9px;
  border-radius: var(--pill);
  background: var(--paper-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800
}

.account-status--paid,
.account-status--completed,
.account-status--success {
  background: #e9f5ee;
  color: #1d6b40
}

.account-status--failed,
.account-status--cancelled {
  background: #fdeceb;
  color: #a3312a
}

.account-empty {
  padding: 52px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-align: center
}

.account-empty h2 {
  margin: 0;
  font-size: 20px
}

.account-empty p {
  margin: 10px 0 20px;
  color: var(--muted)
}

.account-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 24px;
  font-size: 13px;
  color: var(--muted)
}

.site-docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px
}

.site-doc-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh)
}

.site-doc-card__head {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line)
}

/* Pays à gauche, nombre de documents à droite sur une même ligne ; le nom
   du site dessous occupe toute la largeur de la carte pour tenir sur une
   seule ligne (« Juridoc Côte d'Ivoire »). */
.site-doc-card__top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px
}

.site-doc-card h3 {
  margin: 8px 0 0;
  font-size: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.site-doc-card__count {
  flex-shrink: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800
}

.site-doc-card__link {
  align-self: center;
  margin-top: 20px
}

@media(max-width:800px) {
  .site-docs-grid {
    grid-template-columns: 1fr
  }
}

@media(max-width:680px) {
  .account-heading {
    align-items: start;
    flex-direction: column
  }

  .account-orders {
    padding: 18px 14px
  }

  .account-orders__table th,
  .account-orders__table td {
    padding: 12px 8px
  }
}

/* ---------------- PAGE COMMANDER (CHECKOUT) ---------------- */
.checkout-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  align-items: start;
  gap: 22px
}

.checkout-ranges {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px
}

.checkout-ranges li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: var(--txt)
}

.checkout-ranges li.is-current {
  border-color: var(--ink);
  background: rgba(15, 122, 111, .06);
  font-weight: 900;
  color: var(--ink)
}

.checkout-breakdown {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px
}

.checkout-breakdown hr {
  border: none;
  border-top: 1px solid var(--line-2);
  margin: 2px 0
}

.checkout-breakdown__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  color: var(--txt)
}

.checkout-breakdown__row--strong strong {
  color: var(--ink)
}

.checkout-breakdown__row--strong s {
  color: var(--muted);
  margin-right: 6px
}

.checkout-breakdown__row--savings {
  color: #1d6b40;
  font-weight: 700
}

.checkout-breakdown__row--total {
  font-size: 15.5px;
  padding-top: 4px
}

.checkout-voucher {
  margin-top: 20px
}

.checkout-voucher__form label {
  display: block;
  font-size: 12.5px;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 6px
}

.checkout-voucher__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.checkout-voucher__row input[type="text"] {
  flex: 1 1 140px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--txt);
  font-family: inherit;
  font-size: 13.5px
}

.checkout-voucher__row button {
  flex-shrink: 0
}

.checkout-voucher__row button:disabled {
  opacity: .5;
  cursor: not-allowed
}

.checkout-voucher__hint {
  margin-top: 6px;
  font-size: 12px;
  color: #a3312a
}

.checkout-voucher__applied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: #e9f5ee;
  border: 1px solid #bfe3cd
}

.checkout-voucher__applied strong {
  display: block;
  color: #1d6b40;
  font-size: 13.5px
}

.checkout-voucher__applied span {
  font-size: 12px;
  color: #1d6b40
}

.checkout-voucher__remove {
  border: none;
  background: none;
  padding: 0;
  color: #a3312a;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline
}

.checkout-live-price {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted)
}

.checkout-live-price strong {
  color: var(--ink)
}

.checkout-collaborators .checkout-collaborators__head {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.checkout-collaborators__head span:last-child {
  font-weight: 900;
  color: var(--ink);
  font-size: 12.5px
}

.checkout-collaborators__empty {
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0
}

.checkout-collaborators__choices {
  display: grid;
  gap: 4px;
  margin-top: 4px
}

.collab-select {
  position: relative
}

.collab-select__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  text-align: left;
  cursor: pointer
}

.collab-select__toggle::after {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px)
}

.collab-select__toggle span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.collab-select__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12)
}

.collab-select__panel[hidden],
.collab-select__empty[hidden],
.checkout-collaborators__choice[hidden] {
  display: none
}

.collab-select__search {
  width: 100%;
  margin-bottom: 8px
}

.collab-select__panel .checkout-collaborators__choices {
  max-height: 240px;
  overflow-y: auto
}

.collab-select__empty {
  font-size: 13px;
  color: var(--muted);
  margin: 6px 2px
}

.checkout-collaborators__choice {
  display: flex;
  align-items: center;
  gap: 8px
}

.checkout-collaborators__choice input {
  width: 16px;
  height: 16px;
  flex-shrink: 0
}

.checkout-collaborators__choice label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer
}

.checkout-collaborators__choice input:disabled+label {
  opacity: .45;
  cursor: not-allowed
}

.checkout-new-collaborator-trigger {
  justify-self: start;
  margin-top: 6px;
  background: none;
  border: none;
  padding: 0;
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline
}

.checkout-payment-note {
  margin: -2px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  background: #f7f5f0;
  padding: 10px 12px;
  border-radius: var(--r-sm)
}

/* .authform>div sets display:grid, which would beat the [hidden] attribute:
   the gateway choice must stay hidden until "Paiement en ligne" is selected. */
.authform>.checkout-payment-providers[hidden] {
  display: none
}

.checkout-payment-providers>div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px
}

.checkout-payment-providers input[type="radio"] {
  width: auto;
  padding: 0;
  margin: 0
}

.checkout-payment-providers>div label {
  font-weight: 700;
  margin-right: 14px
}

.checkout-cgu summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink)
}

.checkout-cgu__text {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--txt);
  max-height: 220px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm)
}

/* Overrides .authform>div's default grid stacking (label above widget) so
   the checkbox sits inline with its label instead of on its own line. */
.authform .checkout-cgu-check {
  display: flex;
  align-items: flex-start;
  gap: 8px
}

.checkout-cgu-check input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0
}

.checkout-cgu-check label {
  font-size: 13px;
  font-weight: 400;
  color: var(--txt)
}

@media(max-width:880px) {
  .checkout-grid {
    grid-template-columns: 1fr
  }
}

/* ==========================================================================
   RESPONSIVE
   Points de rupture : 1080 (tablette paysage), 880 (tablette portrait),
   680 (grand telephone), 480 (telephone standard).
   ========================================================================== */
@media(max-width:1080px) {
  .hero .wrap {
    grid-template-columns: 1fr;
    gap: 38px
  }

  nav.main {
    display: none
  }

  .hdr-cta {
    margin-left: auto
  }

  .burger {
    display: block
  }

  .panel {
    grid-template-columns: 1fr
  }

  .panel.flip .panel-vis {
    order: 0
  }

  .panel-vis {
    min-height: 330px;
    padding: 38px 28px
  }

  .f-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px
  }

  .dash-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .ui-float {
    display: none
  }

  .cta-final {
    grid-template-columns: 1fr;
    gap: 28px
  }
}

@media(max-width:880px) {
  section {
    padding: 58px 0
  }

  section.tight {
    padding: 46px 0
  }

  .juri,
  .trio,
  .offers {
    grid-template-columns: 1fr
  }

  .stats .wrap {
    grid-template-columns: repeat(2, 1fr)
  }

  .vs {
    grid-template-columns: 1fr
  }

  .vs-mid {
    display: none
  }

  .veille {
    grid-template-columns: 1fr;
    padding: 30px
  }

  .topbar .tb-l {
    display: none
  }

  .topbar .wrap {
    justify-content: flex-end
  }

  #map {
    height: 340px
  }

  .um-txt {
    display: none
  }

  .usermenu {
    padding: 5px
  }

  .hdr-guest .btn-line {
    display: none
  }

  .sec-head {
    margin-bottom: 34px
  }
}

@media(max-width:680px) {
  section {
    padding: 48px 0
  }

  .hero {
    padding: 40px 0 52px
  }

  .hero h1 {
    font-size: clamp(28px, 7.4vw, 36px)
  }

  .hero .lede {
    font-size: 15.5px
  }

  .hero-proof {
    gap: 18px;
    margin-top: 26px;
    padding-top: 20px
  }

  .hero-proof b {
    font-size: 20px
  }

  .hero-cta {
    gap: 9px
  }

  .hero-cta .btn {
    flex: 1 1 100%
  }

  .f-grid,
  .dash-grid,
  .map-filters {
    grid-template-columns: 1fr
  }

  .map-search {
    grid-template-columns: 1fr;
    gap: 8px
  }

  .mapcard {
    padding: 13px;
    border-radius: 16px
  }

  #map {
    height: 300px
  }

  .mapcard.full {
    inset: 6px;
    padding: 13px
  }

  .panel-txt,
  .panel-vis {
    padding: 28px 18px
  }

  .panel-vis {
    min-height: 0
  }

  .panel {
    border-radius: 18px;
    margin-bottom: 16px
  }

  .offer {
    padding: 26px 22px;
    border-radius: 18px
  }

  .offer h3 {
    font-size: 21px
  }

  .vs-col,
  .juri-card,
  .art {
    padding: 24px 20px
  }

  .veille {
    padding: 24px 20px;
    border-radius: 18px
  }

  .veille h2 {
    font-size: 24px
  }

  .stat {
    padding: 22px 14px
  }

  .stat b {
    font-size: 25px
  }

  .stat span {
    font-size: 12px
  }

  .stat em {
    font-size: 10.5px
  }

  .dash {
    padding: 32px 0 16px
  }

  .dash-top h2 {
    font-size: 24px
  }

  .quick .btn,
  .dash-top .btn {
    flex: 1 1 100%
  }

  .demobar {
    left: 12px;
    right: 12px;
    justify-content: space-between
  }

  .ui-filters .f {
    flex-wrap: wrap;
    gap: 4px 9px
  }

  .ui-filters .f b {
    min-width: 0
  }

  .ui-filters .f span {
    margin-left: 0
  }

  .ui-src a {
    flex-wrap: wrap;
    gap: 4px 8px
  }

  .ui-src a em {
    margin-left: 0;
    width: 100%
  }

  .logos div,
  .logos a {
    height: 110px;
    min-width: calc(50% - 9px);
    padding: 0 18px;
    font-size: 12.5px
  }

  .logos img {
    max-height: 68px
  }
}

@media(max-width:480px) {
  .wrap {
    padding: 0 16px
  }

  header.site .wrap {
    min-height: 66px;
    gap: 12px
  }

  .logo-img {
    width: 152px;
    height: 18px
  }

  .hdr-guest {
    display: none
  }

  .topbar {
    font-size: 11.5px
  }

  .stats .wrap {
    grid-template-columns: 1fr
  }

  .sec-head h2 {
    font-size: 26px
  }

  .btn {
    padding: 12px 20px;
    font-size: 14px
  }

  .btn-lg {
    padding: 14px 24px;
    font-size: 15px
  }

  .juri-card .btn,
  .offer .btn {
    width: 100%
  }
}

@media(hover:none) {
  .mnav-sub a {
    padding: 13px 12px
  }

  .card:hover,
  .juri-card:hover,
  .offer:hover,
  .art:hover,
  .vid:hover,
  .post:hover,
  .dtile:hover {
    transform: none
  }

  .btn:hover {
    transform: none
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    animation: none !important;
    transition: none !important
  }
}
/* Wide hover panel (Espaces nationaux): sites on the left, the hovered
   site's header entries as single-level cards on the right. CSS only. */
nav.main>div.has-wide {
  position: static
}

.mega.mega-wide {
  left: 0;
  right: 0;
  width: auto;
  top: 100%;
  transform: translateY(8px);
  padding: 0;
  border-radius: 0 0 20px 20px
}

nav.main>div.has-wide:hover .mega-wide,
nav.main>div.has-wide:focus-within .mega-wide {
  transform: translateY(0)
}

.mw-inner {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 12px 24px;
  min-height: 300px
}

.mw-list {
  list-style: none;
  margin: 0;
  padding: 12px 16px 12px 0;
  width: 28%;
  min-height: 276px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px
}

.mw-site {
  padding: 0
}

.mw-name {
  display: block;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14.5px;
  color: #2c4650;
  cursor: default;
  transition: background .2s, color .2s
}

.mw-site.is-active .mw-name,
.mw-list:not(:has(.mw-site.is-active)) .mw-site:first-child .mw-name {
  background: rgba(58, 169, 180, .1);
  color: var(--ink)
}

.mw-cards {
  display: none;
  position: absolute;
  top: 12px;
  left: calc(28% + 28px);
  right: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-content: start
}

.mw-site.is-active .mw-cards,
.mw-list:not(:has(.mw-site.is-active)) .mw-site:first-child .mw-cards {
  display: grid
}

.mw-cards a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
  color: #2c4650;
  transition: border-color .2s, box-shadow .2s, transform .2s
}

.mw-cards a::after {
  content: "→";
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(58, 169, 180, .14);
  color: var(--gold-deep);
  font-size: 13px
}

.mw-cards a:hover {
  border-color: var(--gold-deep);
  box-shadow: 0 10px 24px -10px rgba(58, 169, 180, .45);
  transform: translateY(-2px)
}

/* Matières panel: corpus → matières → cards (3 columns, CSS-only hover) */
.mt-list,
.mt-sub {
  list-style: none;
  margin: 0;
  padding: 0
}

.mt-list {
  width: 20%;
  min-height: 300px;
  padding: 12px 12px 12px 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px
}

.mt-sub {
  display: none;
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: calc(20% + 12px);
  width: calc(26% - 12px);
  padding: 0 12px;
  border-right: 1px solid var(--line);
  flex-direction: column;
  gap: 4px
}

.mt-site.is-active>.mt-sub,
.mt-list:not(:has(.mt-site.is-active)) .mt-site:first-child>.mt-sub {
  display: flex
}

.mt-cards {
  left: calc(46% + 24px);
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.mt-mat.is-active>.mt-cards,
.mt-sub:not(:has(.mt-mat.is-active)) .mt-mat:first-child>.mt-cards {
  display: grid
}

.mt-site.is-active>.mw-name,
.mt-list:not(:has(.mt-site.is-active)) .mt-site:first-child>.mw-name,
.mt-mat.is-active>.mw-name,
.mt-sub:not(:has(.mt-mat.is-active)) .mt-mat:first-child>.mw-name {
  background: rgba(58, 169, 180, .1);
  color: var(--ink)
}

/* ---- Wide panels: beat the generic ".mega ul / .mega ul a" rules ---- */
.mega .mw-list,
.mega .mt-list {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.mega .mt-sub {
  display: none;
  flex-direction: column;
  gap: 4px
}

.mega .mt-site.is-active>.mt-sub,
.mega .mt-list:not(:has(.mt-site.is-active)) .mt-site:first-child>.mt-sub {
  display: flex
}

.mega .mw-cards {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr))
}

.mega .mw-site.is-active>.mw-cards,
.mega .mw-list:not(:has(.mw-site.is-active)) .mw-site:first-child>.mw-cards,
.mega .mt-mat.is-active>.mt-cards,
.mega .mt-sub:not(:has(.mt-mat.is-active)) .mt-mat:first-child>.mt-cards {
  display: grid
}

.mega .mw-cards a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.3;
  white-space: normal;
  color: #2c4650
}

.mega .mw-cards a:hover {
  background: #fff;
  color: var(--ink);
  border-color: var(--gold-deep)
}

.mega .mw-cards a span {
  min-width: 0
}

/* ---- Matières panel geometry ----
   .mt-sub is itself absolutely positioned, so the cards can't use the
   panel's left/right; size them from the panel width (container units). */
.mw-inner:has(.mt-list) {
  container-type: inline-size;
  min-height: 480px
}

.mega .mt-list .mw-name {
  padding: 9px 14px
}

.mega .mt-cards {
  top: 0;
  left: calc(100% + 24px);
  right: auto;
  width: calc(54cqw - 48px)
}

.mw-inner:has(.mt-list) {
  min-height: 500px
}

.mega .mt-list .mw-name {
  padding: 7px 14px;
  font-size: 14px
}

.mega .mt-cards {
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr))
}

.mega .mt-list {
  min-height: 476px
}

/* ---- Hover continuity: no dead zones between columns/rows ----
   Any gap where no row is hovered re-triggers the "first item" default
   and makes the panel jump. So rows touch (spacing lives in .mw-name
   margins, which stay inside the row's hover area) and each column hands
   over to the next one with no strip in between. */
.mega .mw-list,
.mega .mt-list {
  gap: 0;
  padding-right: 0;
  border-right: 0
}

.mega .mt-list,
.mega .mt-sub {
  padding-top: 12px;
  padding-bottom: 12px
}

.mega .mw-list .mw-name,
.mega .mt-list .mw-name {
  margin: 2px 12px 2px 0
}

/* Espaces nationaux: cards start flush with the list, their own padding
   (part of the hovered row) carries the visual gap. Divider = cards' edge. */
.mega .mw-list {
  width: 28%
}

.mega .mw-cards {
  left: 28%;
  padding-left: 28px;
  border-left: 1px solid var(--line);
  min-height: 276px;
  box-sizing: border-box
}

/* Matières: corpus | matières | cards, all contiguous */
.mega .mt-list {
  width: 20%
}

.mega .mt-sub {
  left: 20%;
  width: 26%;
  padding-left: 12px;
  padding-right: 0;
  border-left: 1px solid var(--line);
  border-right: 0;
  box-sizing: border-box
}

.mega .mt-cards {
  left: 100%;
  top: 0;
  right: auto;
  width: calc(54cqw - 24px);
  padding-left: 24px;
  border-left: 1px solid var(--line);
  min-height: 476px;
  box-sizing: border-box
}

.mega .mw-cards a {
  /* keep the card text area from swallowing the row's left padding */
  min-width: 0
}


/* Microsoft Word logo, bottom-right of the "Conformité" panel */
.panel-txt--word {
  position: relative
}

.panel-txt--word .word-badge {
  position: absolute;
  right: 32px;
  bottom: 28px;
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35))
}

@media (max-width: 700px) {
  .panel-txt--word .word-badge {
    width: 44px;
    height: 44px;
    right: 22px;
    bottom: 22px
  }
}

/* ---- Platform panels: horizontal accordion on desktop ----
   Active panel open, the others folded into vertical strips (hover / click /
   focus opens one). Enabled by panel-accordion.js via .is-accordion. */
.panel-tab {
  display: none
}

@media (min-width: 1081px) {
  .panel-track.is-accordion {
    display: flex;
    gap: 12px;
    height: 520px
  }

  .panel-track.is-accordion .panel,
  .panel-track.is-accordion .panel:last-child {
    position: relative;
    flex: 0 0 76px;
    min-width: 0;
    margin: 0;
    grid-template-columns: 500px minmax(416px, 1fr);
    transition: flex-grow .5s var(--ease), flex-basis .5s var(--ease);
    cursor: pointer
  }

  .panel-track.is-accordion .panel.is-active {
    flex: 1 1 0;
    cursor: default
  }

  /* same layout for every panel once open: visual left, text right */
  .panel-track.is-accordion .panel.flip .panel-vis {
    order: 0
  }

  .panel-track.is-accordion .panel-vis {
    min-height: 0
  }

  /* the strip: covers the folded panel, fades out when it opens */
  .panel-track.is-accordion .panel-tab {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: var(--ink-2);
    color: #fff;
    font: inherit;
    cursor: pointer;
    transition: opacity .3s ease, background .25s ease
  }

  .panel-track.is-accordion .panel-tab:hover {
    background: var(--ink)
  }

  .panel-track.is-accordion .panel-tab span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--gold)
  }

  .panel-track.is-accordion .panel.is-active .panel-tab {
    opacity: 0;
    pointer-events: none
  }

  /* content fades in as the panel opens */
  .panel-track.is-accordion .panel-vis,
  .panel-track.is-accordion .panel-txt {
    opacity: 0;
    transition: opacity .25s ease
  }

  .panel-track.is-accordion .panel.is-active .panel-vis,
  .panel-track.is-accordion .panel.is-active .panel-txt {
    opacity: 1;
    transition: opacity .4s .2s ease
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel-track.is-accordion .panel,
  .panel-track.is-accordion .panel-tab,
  .panel-track.is-accordion .panel-vis,
  .panel-track.is-accordion .panel-txt {
    transition: none
  }
}

/* ---- Platform panels: swipeable cards on mobile ----
   Text first, then a compact, faded preview of the interface. Next card
   peeks out on the right so the swipe is obvious. */
@media (max-width: 680px) {
  .panel-track {
    display: flex;
    gap: 12px;
    margin: 0 -16px;
    padding: 4px 16px 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none
  }

  .panel-track::-webkit-scrollbar {
    display: none
  }

  .panel-track .panel,
  .panel-track .panel:last-child {
    flex: 0 0 84%;
    display: flex;
    flex-direction: column;
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border-radius: 20px
  }

  .panel-track .panel-txt {
    order: -1;
    flex: 1 1 auto;
    justify-content: flex-start;
    padding: 24px 20px 20px
  }

  .panel-track .panel-txt h3 {
    font-size: 21px
  }

  .panel-track .panel-txt p {
    font-size: 14px;
    margin-top: 10px
  }

  .panel-track .panel-list {
    margin-top: 14px
  }

  .panel-track .panel-txt .arrow {
    margin-top: 18px
  }

  /* compact preview: capped height, fading out at the bottom */
  .panel-track .panel-vis,
  .panel-track .panel.flip .panel-vis {
    order: 2;
    flex: none;
    max-height: 190px;
    overflow: hidden;
    padding: 16px 14px 0;
    place-items: start center;
    -webkit-mask-image: linear-gradient(#000 55%, transparent);
    mask-image: linear-gradient(#000 55%, transparent)
  }

  .panel-track .ui {
    font-size: 11.5px
  }
}

/* ---- Category page (juridoc.tn-style) ---- */
.cat-crumbs {
  border-bottom: 1px solid var(--line);
  background: #fff;
  font-size: 13.5px;
  color: var(--muted)
}

.cat-crumbs .wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px
}

.cat-crumbs a:hover {
  color: var(--ink)
}

.cat-crumbs b {
  color: var(--ink);
  font-weight: 700
}

.cat-wrap {
  max-width: var(--wrap)
}

.cat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start
}

.cat-layout.has-side {
  grid-template-columns: minmax(0, 1fr) 340px
}

.cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line)
}

.cat-head__title {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0
}

.cat-head__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px -6px rgba(20, 22, 31, .25)
}

.cat-head__icon img {
  width: 28px;
  height: 28px;
  object-fit: contain
}

.cat-head h1 {
  margin: 2px 0 0;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15
}

.cat-count {
  flex: none;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700
}

.cat-docs {
  display: grid;
  gap: 14px
}

.cat-doc {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 24px;
  transition: box-shadow .2s, border-color .2s
}

.cat-doc:hover {
  border-color: #cfd8dc;
  box-shadow: 0 12px 28px -16px rgba(20, 22, 31, .25)
}

.cat-doc__link {
  display: block
}

.cat-doc h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  color: var(--ink)
}

.cat-doc__link:hover h2 {
  color: var(--gold-deep)
}

.cat-doc p {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #5f6368;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.cat-doc__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px;
  color: #5f6368
}

.cat-doc__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px
}

.cat-doc__facts b {
  color: var(--ink);
  font-weight: 700
}

.cat-doc__langs {
  flex: none;
  display: flex;
  gap: 6px
}

.cat-doc__langs i {
  font-style: normal;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700
}

/* Desktop: the sidebar stretches to the height of the document list (it never
   makes the row taller: contain: size) and scrolls internally when its
   content is longer. */
.cat-layout.has-side {
  align-items: stretch
}

.cat-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  contain: size;
  min-height: 360px
}

/* Each card keeps its full frame; only its pills scroll */
.cat-side .cat-box {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0
}

.cat-side .cat-box h3 {
  flex: none
}

.cat-side .cat-pills {
  min-height: 0;
  overflow-y: auto;
  align-content: flex-start;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent
}

.cat-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 22px 24px;
  box-shadow: 0 14px 30px -20px rgba(20, 22, 31, .25)
}

.cat-box h3 {
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 18px
}

.cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.cat-pills a {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--paper-2);
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
  transition: background .2s, color .2s
}

.cat-pills a:hover {
  background: var(--gold-deep);
  color: #fff
}

@media (max-width: 960px) {
  .cat-layout.has-side {
    grid-template-columns: minmax(0, 1fr)
  }

  .cat-side {
    display: grid;
    contain: none;
    min-height: 0
  }

  .cat-side .cat-pills {
    overflow: visible
  }

  .cat-head {
    flex-wrap: wrap
  }

  .cat-doc__meta {
    flex-direction: column;
    align-items: flex-start
  }
}

/* Droit régional: short content, shorter panel */
.mw-inner.is-short:has(.mt-list) {
  min-height: 300px
}

.mega .mw-inner.is-short .mt-list,
.mega .mw-inner.is-short .mt-cards {
  min-height: 276px
}

/* ---------------------------------------------------------------
   MENU MOBILE — navigation par écrans (drill-down)
   Un panneau à la fois : racine → liste → … → liens. Même logique que
   les méga-menus du bureau, présentée en cartes douces dans le tiroir.
   --------------------------------------------------------------- */
.mnav-body {
  display: block;
  padding: 14px 16px 22px
}

.mnav-panel {
  display: none
}

.mnav-panel.is-current {
  display: grid;
  gap: 8px;
  align-content: start;
  animation: mnav-in .22s var(--ease)
}

@keyframes mnav-in {
  from {
    opacity: 0;
    transform: translateX(18px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.mnav-row,
.mnav-leaf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  font: inherit;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--ink);
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, border-color .15s, transform .12s
}

.mnav-row:active,
.mnav-leaf:active {
  background: var(--paper-2);
  transform: scale(.985)
}

.mnav-leaf {
  font-weight: 600;
  font-size: 14.5px;
  color: #2c4650
}

.mnav-leaf::after {
  content: "→";
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(58, 169, 180, .14);
  color: var(--gold-deep);
  font-size: 13px
}

.mnav .chev {
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
  margin-inline-end: 4px
}

[dir="rtl"] .mnav .chev {
  transform: rotate(-135deg)
}

.mnav-ph {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 0 12px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--line)
}

.mnav-ph b {
  font-size: 17px;
  line-height: 1.25;
  color: var(--ink)
}

.mnav-ph small {
  margin-inline-start: auto;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--gold-deep)
}

.mnav-backbtn {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink)
}

.mnav-backbtn .chev {
  transform: rotate(-135deg);
  margin: 0 0 0 4px;
  opacity: 1
}

[dir="rtl"] .mnav-backbtn .chev {
  transform: rotate(45deg);
  margin: 0 4px 0 0
}

@media (prefers-reduced-motion: reduce) {
  .mnav-panel.is-current {
    animation: none
  }
}

/* panels are <section>s: neutralise the global section spacing */
.mnav .mnav-panel {
  padding: 0;
  margin: 0
}

/* ---------------------------------------------------------------
   MENU MOBILE — pleine page + animations
   Le tiroir latéral devient un écran complet. Ouverture en fondu
   avec léger zoom, éléments qui apparaissent en cascade, écrans qui
   glissent dans le sens de la navigation, retour tactile sur les
   boutons. Tout est neutralisé avec prefers-reduced-motion.
   --------------------------------------------------------------- */
.mnav {
  --mnav-gutter: max(18px, calc((100% - 560px) / 2));
  inset: 0;
  width: 100%;
  max-width: none;
  border-radius: 0;
  box-shadow: none;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(58, 169, 180, .10), transparent 60%),
    radial-gradient(90% 50% at 0% 100%, rgba(37, 36, 90, .07), transparent 60%),
    #fff;
  transform: scale(1.03);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s var(--ease), transform .34s var(--ease), visibility 0s linear .34s
}

body.menu-open .mnav {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: opacity .28s var(--ease), transform .34s var(--ease), visibility 0s
}

.mnav-head {
  padding-inline: var(--mnav-gutter);
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px)
}

.mnav-body {
  width: 100%;
  padding-inline: var(--mnav-gutter);
  padding-block: 18px 26px
}

.mnav-user,
.mnav-lang,
.mnav-cta {
  padding-inline: var(--mnav-gutter)
}

.mnav-cta {
  background: rgba(244, 247, 248, .9)
}

.mnav-cta .btn,
.mnav-auth .btn,
.mnav-guest .btn {
  max-width: 560px;
  width: 100%;
  margin-inline: auto
}

/* ---- Entrée orchestrée ---- */
@keyframes mnav-rise {
  from {
    opacity: 0;
    transform: translateY(18px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes mnav-slide-fwd {
  from {
    opacity: 0;
    transform: translateX(34px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes mnav-slide-back {
  from {
    opacity: 0;
    transform: translateX(-34px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes mnav-spin-in {
  from {
    opacity: 0;
    transform: rotate(-90deg) scale(.6)
  }

  to {
    opacity: 1;
    transform: none
  }
}

body.menu-open .mnav-head .logo {
  animation: mnav-rise .4s .05s var(--ease) both
}

body.menu-open .mnav-close {
  animation: mnav-spin-in .45s .1s var(--ease) both
}

body.menu-open .mnav-user {
  animation: mnav-rise .4s .1s var(--ease) both
}

body.menu-open .mnav-lang {
  animation: mnav-rise .45s .32s var(--ease) both
}

body.menu-open .mnav-cta .btn {
  animation: mnav-rise .45s var(--ease) both;
  animation-delay: calc(.4s + var(--i, 0) * 60ms)
}

/* Les lignes d'un écran arrivent en cascade (--i posé par le script). */
.mnav-panel.is-current {
  animation: none
}

.mnav-panel.is-current>* {
  animation: mnav-slide-fwd .38s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 38ms)
}

.mnav-body[data-dir="back"] .mnav-panel.is-current>* {
  animation-name: mnav-slide-back
}

body.menu-open .mnav-body[data-first] .mnav-panel.is-current>* {
  animation-name: mnav-rise;
  animation-delay: calc(.12s + var(--i, 0) * 55ms)
}

/* ---- Retour tactile ---- */
.mnav-row,
.mnav-leaf,
.mnav-backbtn,
.mnav-close,
.mnav-lang a,
.mnav .btn {
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s var(--ease), background-color .18s, border-color .18s, box-shadow .18s, color .18s
}

.mnav-row:active,
.mnav-leaf:active {
  transform: scale(.975);
  border-color: var(--gold-deep);
  background: var(--paper-2);
  box-shadow: 0 8px 20px -12px rgba(20, 22, 31, .35)
}

.mnav-row:active .chev {
  transform: rotate(45deg) translate(3px, -3px)
}

.mnav .chev {
  transition: transform .2s var(--ease)
}

.mnav-leaf::after {
  transition: transform .2s var(--ease), background-color .2s, color .2s
}

.mnav-leaf:active::after {
  transform: translateX(4px);
  background: var(--gold-deep);
  color: #fff
}

.mnav-backbtn:active {
  transform: scale(.88) translateX(-2px);
  background: var(--paper-2)
}

.mnav-close:active {
  transform: rotate(90deg) scale(.9)
}

.mnav-lang a:active {
  transform: scale(.92)
}

.mnav .btn:active {
  transform: scale(.97)
}

@media (hover: hover) {

  .mnav-row:hover,
  .mnav-leaf:hover {
    border-color: #cfd8dc;
    box-shadow: 0 10px 24px -14px rgba(20, 22, 31, .3)
  }

  .mnav-row:hover .chev {
    transform: rotate(45deg) translate(2px, -2px)
  }

  .mnav-leaf:hover::after {
    transform: translateX(3px)
  }
}

/* Tablettes : un peu plus d'air et de corps de texte */
@media (min-width: 600px) {

  .mnav-row,
  .mnav-leaf {
    padding: 18px 20px;
    font-size: 17px
  }

  .mnav-ph b {
    font-size: 20px
  }
}

@media (prefers-reduced-motion: reduce) {

  .mnav,
  body.menu-open .mnav {
    transform: none;
    transition: opacity .15s linear, visibility 0s
  }

  body.menu-open .mnav-head .logo,
  body.menu-open .mnav-close,
  body.menu-open .mnav-user,
  body.menu-open .mnav-lang,
  body.menu-open .mnav-cta .btn,
  .mnav-panel.is-current>*,
  body.menu-open .mnav-body[data-first] .mnav-panel.is-current>* {
    animation: none
  }

  .mnav-row,
  .mnav-leaf,
  .mnav-backbtn,
  .mnav-close,
  .mnav-lang a,
  .mnav .btn,
  .mnav .chev,
  .mnav-leaf::after {
    transition: none
  }
}

/* ordre de cascade des boutons du bas */
.mnav .btn:nth-child(2) { --i: 1 }
.mnav .btn:nth-child(3) { --i: 2 }
.mnav .btn:nth-child(4) { --i: 3 }
.mnav .btn:nth-child(5) { --i: 4 }

/* Menu mobile : logo centré, bouton fermer à droite (à gauche en RTL) */
.mnav-head {
  position: relative;
  justify-content: center
}

.mnav-head .logo {
  margin-inline: auto
}

.mnav-close {
  position: absolute;
  inset-inline-end: var(--mnav-gutter);
  top: 50%;
  margin-top: -22px
}

.mnav-head {
  min-height: 80px
}

/* ---- Category page: sub-categories / tags as toggle pop-ups ---- */
.cat-toolbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px
}

.cat-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s, border-color .18s, box-shadow .18s, transform .15s var(--ease)
}

.cat-toggle:hover {
  border-color: #cfd8dc;
  box-shadow: 0 8px 20px -12px rgba(20, 22, 31, .35)
}

.cat-toggle:active {
  transform: scale(.97)
}

.cat-toggle em {
  font-style: normal;
  min-width: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 12px;
  text-align: center
}

.cat-toggle .chev {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .55;
  transition: transform .2s var(--ease)
}

.cat-toggle[aria-expanded="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff
}

.cat-toggle[aria-expanded="true"] em {
  background: rgba(255, 255, 255, .18);
  color: #fff
}

.cat-toggle[aria-expanded="true"] .chev {
  transform: rotate(225deg) translateY(-2px);
  opacity: 1
}

.cat-pop {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 30;
  width: min(620px, 100%);
  max-height: min(60vh, 460px);
  overflow: auto;
  padding: 18px 20px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 50px -18px rgba(20, 22, 31, .35);
  animation: cat-pop-in .2s var(--ease)
}

.cat-pop[hidden] {
  display: none
}

@keyframes cat-pop-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.98)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.cat-pop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  color: var(--ink)
}

.cat-pop__close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  transition: transform .2s var(--ease), background-color .15s
}

.cat-pop__close:hover {
  background: var(--paper-2)
}

.cat-pop__close:active {
  transform: rotate(90deg) scale(.9)
}

@media (max-width: 600px) {
  .cat-toolbar {
    gap: 8px
  }

  .cat-toggle {
    flex: 1 1 auto;
    justify-content: space-between
  }

  .cat-pop {
    width: 100%
  }
}

@media (prefers-reduced-motion: reduce) {
  .cat-pop {
    animation: none
  }

  .cat-toggle,
  .cat-toggle .chev,
  .cat-pop__close {
    transition: none
  }
}

/* Toggle count: badge pinned to the button's top-right corner */
.cat-toggle {
  position: relative
}

.cat-toggle em {
  position: absolute;
  top: -9px;
  inset-inline-end: 12px;
  min-width: 22px;
  padding: 2px 7px;
  border: 2px solid #fff;
  background: var(--gold-deep);
  color: #fff;
  font-size: 11.5px;
  line-height: 1.3;
  box-shadow: 0 4px 10px -4px rgba(20, 22, 31, .4)
}

.cat-toggle[aria-expanded="true"] em {
  background: var(--gold-deep);
  border-color: #fff;
  color: #fff
}


/* Accueil, mobile : les deux boutons du hero sur une seule ligne, et le
   bandeau « Plusieurs langues / Quotidienne » est retiré. */
@media (max-width: 680px) {
  .hero-proof {
    display: none
  }

  .hero-cta {
    flex-wrap: nowrap;
    gap: 10px
  }

  .hero-cta .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 10px;
    font-size: 14px;
    white-space: nowrap
  }
}

/* Accueil : le hero occupe tout l'écran à l'arrivée (hauteur de la fenêtre
   moins la barre du haut et l'en-tête), contenu centré verticalement. */
.hero {
  --chrome-h: 115px;
  min-height: calc(100vh - var(--chrome-h));
  min-height: calc(100svh - var(--chrome-h));
  display: flex;
  align-items: center
}

.hero>.wrap {
  width: 100%
}

/* ---- Chiffres : quatre cartes indépendantes ---- */
.stats {
  padding: 40px 0 8px
}

.stats .wrap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  background: none;
  border: 0
}

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 26px 26px 24px;
  text-align: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--sh);
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s
}

.stat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal-2), var(--ink));
  transform: scaleX(.28);
  transform-origin: left;
  transition: transform .4s var(--ease)
}

.stat:hover {
  transform: translateY(-4px);
  border-color: #c5ccd3;
  box-shadow: var(--sh-lg)
}

.stat:hover::before {
  transform: scaleX(1)
}

.stat-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(10, 165, 181, .16), rgba(59, 58, 126, .10));
  color: var(--teal)
}

.stat-ico svg {
  width: 24px;
  height: 24px
}

.stat b {
  display: block;
  font-size: clamp(30px, 2.6vw, 40px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.01em;
  background: linear-gradient(100deg, var(--ink) 30%, var(--teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.stat span {
  display: block;
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.4;
  color: #2c4650
}

.stat em {
  display: inline-block;
  margin-top: auto;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(7, 128, 141, .10);
  font-style: normal;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--gold-deep)
}

.stat span+em {
  margin-top: 16px
}

/* Apparition au défilement (là où le navigateur sait le faire) */
@supports (animation-timeline: view()) {
  .stat {
    animation: stat-in both var(--ease);
    animation-timeline: view();
    animation-range: entry 0% entry 55%
  }

  .stat:nth-child(2) { animation-range: entry 6% entry 61% }
  .stat:nth-child(3) { animation-range: entry 12% entry 67% }
  .stat:nth-child(4) { animation-range: entry 18% entry 73% }
}

@keyframes stat-in {
  from {
    opacity: 0;
    transform: translateY(26px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@media (max-width: 1080px) {
  .stats .wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (max-width: 560px) {
  .stats {
    padding-top: 28px
  }

  .stats .wrap {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .stat {
    padding: 20px 20px 18px;
    display: grid;
    grid-template-columns: 46px 1fr;
    column-gap: 16px;
    align-items: center
  }

  .stat-ico {
    grid-row: 1 / span 3;
    margin: 0
  }

  .stat b {
    font-size: 28px
  }

  .stat span {
    margin-top: 4px;
    font-size: 13.5px
  }

  .stat span+em,
  .stat em {
    justify-self: start;
    margin-top: 8px
  }
}

@media (prefers-reduced-motion: reduce) {
  .stat,
  .stat::before {
    transition: none;
    animation: none
  }
}

/* En-tête bureau : logo à gauche, navigation vraiment centrée, boutons à droite */
@media (min-width: 1081px) {
  header.site .wrap {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 26px
  }

  header.site .wrap>.logo {
    justify-self: start
  }

  header.site nav.main {
    margin-left: 0;
    justify-self: center
  }

  header.site .hdr-cta {
    justify-self: end
  }
}

/* ---- Chiffres : bandeau dégradé à cheval sur le hero ---- */
.stats.stats--band {
  position: relative;
  z-index: 5;
  padding: 0 0 8px;
  margin-top: -46px
}

.stats--band .wrap {
  position: relative;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 14px 10px;
  border-radius: 28px;
  background:
    radial-gradient(60% 140% at 100% 0%, rgba(255, 255, 255, .16), transparent 60%),
    radial-gradient(50% 120% at 0% 100%, rgba(10, 165, 181, .35), transparent 65%),
    linear-gradient(120deg, var(--teal) 0%, #2d5f9a 48%, var(--ink) 100%);
  box-shadow: 0 30px 60px -24px rgba(37, 36, 90, .55), 0 0 0 1px rgba(255, 255, 255, .12) inset;
  overflow: hidden
}

.stats--band .stat {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-areas:
    "ico num"
    "ico lab"
    "ico note";
  column-gap: 16px;
  align-items: center;
  padding: 22px 26px;
  background: transparent;
  border: 0;
  border-radius: 20px;
  box-shadow: none;
  color: #fff;
  overflow: visible;
  transition: background-color .25s var(--ease), transform .25s var(--ease)
}

.stats--band .stat+.stat::after {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .35), transparent)
}

.stats--band .stat::before {
  display: none
}

.stats--band .stat:hover {
  transform: none;
  background: rgba(255, 255, 255, .08);
  box-shadow: none;
  border-color: transparent
}

.stats--band .stat-ico {
  grid-area: ico;
  width: 56px;
  height: 56px;
  margin: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .06);
  color: #fff;
  transition: transform .3s var(--ease), background-color .25s
}

.stats--band .stat:hover .stat-ico {
  transform: scale(1.08) rotate(-6deg);
  background: rgba(255, 255, 255, .22)
}

.stats--band .stat b {
  grid-area: num;
  font-size: clamp(26px, 2.3vw, 36px);
  line-height: 1.05;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #fff;
  white-space: nowrap
}

.stats--band .stat span {
  grid-area: lab;
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .86)
}

.stats--band .stat em {
  grid-area: note;
  justify-self: start;
  margin-top: 8px;
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .10);
  color: #fff;
  font-size: 11px
}

.stats--band .stat span+em {
  margin-top: 8px
}

/* Pas de cascade au défilement ici : le bandeau est déjà à l'écran. */
@supports (animation-timeline: view()) {
  .stats--band .stat {
    animation: none
  }
}

@media (max-width: 1180px) {
  .stats--band .stat {
    grid-template-columns: 1fr;
    grid-template-areas: "ico" "num" "lab" "note";
    row-gap: 0;
    text-align: start;
    padding: 20px 22px
  }

  .stats--band .stat-ico {
    width: 46px;
    height: 46px;
    margin-bottom: 14px
  }
}

@media (max-width: 1080px) {
  .stats.stats--band {
    margin-top: -34px
  }

  .stats--band .wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 24px
  }

  .stats--band .stat+.stat::after {
    display: none
  }

  .stats--band .stat:nth-child(even)::after {
    display: block;
    top: 18%;
    bottom: 18%
  }

  .stats--band .stat:nth-child(n+3) {
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-radius: 0
  }
}

@media (max-width: 560px) {
  .stats.stats--band {
    margin-top: -26px
  }

  .stats--band .wrap {
    padding: 8px 6px;
    border-radius: 22px
  }

  .stats--band .stat {
    padding: 16px 14px
  }

  .stats--band .stat-ico {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .06)
  }

  .stats--band .stat-ico svg {
    width: 20px;
    height: 20px
  }

  .stats--band .stat b {
    font-size: 21px;
    white-space: normal
  }

  .stats--band .stat span {
    font-size: 12px
  }

  .stats--band .stat em {
    font-size: 10px;
    padding: 2px 8px
  }
}

@media (prefers-reduced-motion: reduce) {

  .stats--band .stat,
  .stats--band .stat-ico {
    transition: none
  }
}

/* le bandeau s'aligne sur les bords du contenu (le .wrap a 24px de marge) */
.stats--band .wrap {
  width: calc(100% - 48px);
  max-width: calc(var(--wrap) - 48px)
}

@media (max-width: 560px) {
  .stats--band .wrap {
    width: calc(100% - 32px)
  }
}

/* ---- Bandeau chiffres : version sobre (sans effet verre, sans survol) ---- */
.stats--band .wrap {
  background: linear-gradient(120deg, var(--teal) 0%, #2d5f9a 48%, var(--ink) 100%);
  box-shadow: 0 24px 48px -24px rgba(37, 36, 90, .5)
}

.stats--band .stat,
.stats--band .stat-ico {
  transition: none
}

.stats--band .stat:hover {
  background: transparent
}

.stats--band .stat:hover .stat-ico {
  transform: none;
  background: #fff
}

.stats--band .stat-ico {
  background: #fff;
  box-shadow: none;
  color: var(--teal)
}

.stats--band .stat em {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .55)
}

.stats--band .stat+.stat::after {
  background: rgba(255, 255, 255, .28)
}

/* ---------------------------------------------------------------
   HÉRO — refonte visuelle (mêmes éléments, nouvelle mise en forme)
   Fond travaillé (dégradé + trame de points + halo), titre plus fort
   avec dégradé sur la 2e ligne, pastille de signature pleine, boutons
   plus présents, repères séparés par des filets, carte pleine et
   ombrée. Pas d'effet verre.
   --------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(70% 90% at 92% 0%, rgba(10, 165, 181, .42), transparent 62%),
    radial-gradient(50% 60% at 0% 100%, rgba(10, 165, 181, .16), transparent 65%),
    linear-gradient(160deg, #1c1b4a 0%, #25245a 45%, #2e2d6e 100%)
}

/* trame de points, estompée vers les bords */
.hero::before {
  inset: 0;
  width: auto;
  height: auto;
  right: 0;
  top: 0;
  border-radius: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1.2px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(75% 85% at 70% 40%, #000 0%, transparent 78%);
  mask-image: radial-gradient(75% 85% at 70% 40%, #000 0%, transparent 78%);
  opacity: .55
}

.hero::after {
  width: 640px;
  height: 640px;
  left: -300px;
  bottom: -380px;
  background: radial-gradient(circle, rgba(10, 165, 181, .22), transparent 68%)
}

.hero .wrap {
  gap: 64px
}

/* surtitre : petit filet devant */
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #3fd0dd;
  letter-spacing: .16em
}

.hero .eyebrow::before {
  content: "";
  flex: none;
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #3fd0dd, transparent)
}

.hero h1 {
  margin: 20px 0 0;
  font-size: clamp(34px, 4.7vw, 66px);
  line-height: 1.04;
  letter-spacing: -.02em;
  font-weight: 900
}

.hero h1 em {
  display: inline-block;
  background: linear-gradient(95deg, #2fc4d3 0%, #7fe6ee 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.hero .lede {
  max-width: 52ch;
  margin-top: 24px;
  font-size: clamp(16px, 1.25vw, 18.5px);
  line-height: 1.7;
  color: #cdcdea
}

/* signature : pastille pleine avec point lumineux */
.hero-sign {
  margin-top: 28px;
  padding: 10px 20px 10px 16px;
  background: #1a1948;
  border: 1px solid rgba(63, 208, 221, .55);
  color: #7fe6ee;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6)
}

.hero-sign::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3fd0dd;
  box-shadow: 0 0 0 4px rgba(63, 208, 221, .22)
}

.hero-cta {
  gap: 14px;
  margin-top: 30px
}

.hero-cta .btn {
  padding: 16px 30px;
  font-size: 15.5px;
  font-weight: 800
}

.hero-cta .btn-gold {
  background: linear-gradient(180deg, #0aa5b5, #07808d);
  box-shadow: 0 16px 32px -14px rgba(10, 165, 181, .85)
}

.hero-cta .btn-gold::after {
  content: "→";
  transition: transform .2s var(--ease)
}

.hero-cta .btn-gold:hover::after {
  transform: translateX(4px)
}

.hero-cta .btn-ghost {
  border: 1.5px solid rgba(255, 255, 255, .45)
}

.hero-cta .btn-ghost:hover {
  background: rgba(255, 255, 255, .08);
  border-color: #fff;
  color: #fff
}

/* repères : deux colonnes séparées par un filet */
.hero-proof {
  gap: 0;
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .16)
}

.hero-proof>div {
  padding-inline-end: 30px;
  margin-inline-end: 30px;
  border-inline-end: 1px solid rgba(255, 255, 255, .16)
}

.hero-proof>div:last-child {
  border: 0;
  margin: 0;
  padding: 0
}

.hero-proof b {
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -.01em
}

.hero-proof span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #5fdae6
}

/* carte : fond plein, liseré haut, grande ombre */
.mapcard {
  position: relative;
  padding: 20px;
  border-radius: 26px;
  background: #2b2a68;
  border: 1px solid #4a4991;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .75), 0 0 0 6px rgba(255, 255, 255, .03)
}

.mapcard::before {
  content: "";
  position: absolute;
  inset: 0 26px auto 26px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #0aa5b5, #7fe6ee)
}

.mapcard-top h2 {
  font-size: 17px
}

.mapcard-top p {
  font-size: 13px;
  color: #c3c3e6
}

/* entrée : le texte monte, la carte arrive en fondu */
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(22px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.hero .wrap>div:first-child>* {
  animation: hero-rise .7s var(--ease) both
}

.hero .wrap>div:first-child>:nth-child(2) { animation-delay: .06s }
.hero .wrap>div:first-child>:nth-child(3) { animation-delay: .12s }
.hero .wrap>div:first-child>:nth-child(4) { animation-delay: .18s }
.hero .wrap>div:first-child>:nth-child(5) { animation-delay: .24s }
.hero .wrap>div:first-child>:nth-child(6) { animation-delay: .30s }

.hero .mapcard {
  animation: hero-rise .8s .15s var(--ease) both
}

@media (max-width: 1080px) {
  .hero .wrap {
    gap: 40px
  }
}

@media (max-width: 680px) {
  .hero h1 {
    font-size: clamp(30px, 8.6vw, 40px)
  }

  .hero-sign {
    margin-top: 22px
  }

  .hero-proof {
    margin-top: 26px
  }

  .hero .eyebrow::before {
    width: 22px
  }

  .mapcard {
    padding: 14px;
    border-radius: 20px
  }

  /* Map card on mobile: keyword input, the 3 dropdowns, THEN the search button */
  .hero .mapcard {
    display: flex;
    flex-direction: column
  }

  .hero .mapcard>* {
    order: 4
  }

  .hero .mapcard>.mapcard-top {
    order: 0
  }

  .hero .mapcard .map-search {
    display: contents
  }

  .hero .mapcard .map-search input {
    order: 1;
    margin-bottom: 8px
  }

  .hero .mapcard .map-filters {
    order: 2
  }

  .hero .mapcard .map-search .btn {
    order: 3;
    width: 100%;
    margin-bottom: 14px;
    justify-content: center
  }

  /* Mobile order: eyebrow + title, then the map, then the rest of the text */
  .hero .wrap {
    gap: 0
  }

  .hero .wrap>div:first-child {
    display: contents
  }

  .hero .wrap>div:first-child>.lede,
  .hero .wrap>div:first-child>.hero-sign,
  .hero .wrap>div:first-child>.hero-cta,
  .hero .wrap>div:first-child>.hero-proof {
    order: 2
  }

  .hero .mapcard {
    order: 1;
    margin: 22px 0 28px
  }

  .hero-cta .btn {
    padding: 14px 10px;
    font-size: 14px
  }

  .hero-cta .btn-gold::after {
    display: none
  }
}

@media (prefers-reduced-motion: reduce) {

  .hero .wrap>div:first-child>*,
  .hero .mapcard {
    animation: none
  }
}

/* Page catégorie — disposition selon l'écran :
   bureau  : sous-catégories et tags dans la colonne de droite ;
   mobile  : deux boutons à bascule au-dessus des documents (pop-ups). */
.cat-toolbar {
  display: none
}

@media (max-width: 960px) {
  .cat-toolbar {
    display: flex
  }

  .cat-side {
    display: none
  }
}

/* Chiffres : le bandeau est entièrement SOUS le hero (plus à cheval dessus) */
.stats.stats--band {
  margin-top: 0;
  padding: 32px 0 8px
}

@media (max-width: 560px) {
  .stats.stats--band {
    padding-top: 22px
  }
}

/* Héro : « Cherchez moins. Trouvez mieux. » sans fond, et boutons plus petits */
.hero-sign {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none
}

.hero-cta {
  gap: 10px;
  margin-top: 22px
}

.hero-cta .btn {
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 800
}

@media (max-width: 680px) {
  .hero-cta .btn {
    padding: 11px 8px;
    font-size: 13.5px
  }
}

/* Abonnements (accueil) : prix réel du pack sous le sous-titre de la carte */
.offer-real-price {
  margin: 0 0 18px;
  padding: 14px 0 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}

.offer-real-price .pricing-amount {
  margin-top: 0
}

.offer-real-price .pricing-amount__value {
  font-size: 38px
}

.offer-real-price {
  border-top: 0;
  padding-top: 4px
}

/* Abonnements (accueil) : résumé de ce que couvre le pack */
.offer-includes {
  display: grid;
  gap: 4px;
  margin: 4px 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--paper-2)
}

.offer-includes__row h4 {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 900
}

.offer-includes .juri-tags {
  margin: 6px 0 8px
}

.offer-includes__row:last-child .juri-tags {
  margin-bottom: 0
}

.offer-includes .juri-tags .more {
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--muted)
}

.offer-real-price .pricing-select {
  margin-top: 10px
}

/* /offres : le pack visé par un lien « S'abonner » depuis l'accueil est mis en évidence */
.pricing-card {
  scroll-margin-top: 110px
}

.pricing-card:target {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(7, 128, 141, .25), var(--sh-lg)
}

/* /offres : segmented switch + clean pricing cards (featured one raised) */
.offers-switch {
  display: flex;
  width: fit-content;
  margin: 0 auto 34px;
  padding: 4px;
  gap: 4px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 12px
}

.offers-switch button {
  padding: 9px 20px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s
}

.offers-switch button.is-active {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(20, 22, 31, .45)
}

[data-offers-panel][hidden] {
  display: none
}

/* Pack comparator: feature x pack table with grouped rows */
.pack-compare {
  max-width: 860px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--sh);
  overflow: hidden
}

.pack-compare table {
  width: 100%;
  border-collapse: collapse
}

.pack-compare thead th {
  padding: 16px 24px;
  border-bottom: 2px solid var(--ink);
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  text-align: center
}

.pack-compare thead th:first-child,
.pack-compare tbody th[scope="row"] {
  text-align: left
}

.pack-compare__group th {
  padding: 12px 24px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-align: left
}

.pack-compare tbody th[scope="row"] {
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink)
}

.pack-compare td {
  width: 22%;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  text-align: center
}

.pack-compare tbody tr:last-child th,
.pack-compare tbody tr:last-child td {
  border-bottom: 0
}

.pack-compare__mark {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800
}

.pack-compare__mark.is-yes {
  background: #dcfce7;
  color: #15803d
}

.pack-compare__mark.is-no {
  background: var(--paper-2);
  color: var(--muted)
}

@media (max-width: 560px) {
  .pack-compare thead th,
  .pack-compare__group th,
  .pack-compare tbody th[scope="row"] {
    padding: 12px 14px
  }

  .pack-compare tbody th[scope="row"] {
    font-size: 13px
  }

  .pack-compare td {
    width: 26%;
    padding: 8px
  }
}

/* Compact cards. Both share 5 rows through subgrid (title, description,
   price, details, CTA): title/description/price line up across cards while the
   details (corpus, AI, zones, compliance) simply stack, so there are no empty
   gaps. */
.pack-grid {
  align-items: stretch;
  max-width: 760px;
  gap: 18px;
  padding-top: 18px
}

@supports (grid-template-rows: subgrid) {
  .pack-grid .pricing-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    row-gap: 0;
    align-content: start
  }

  .pack-grid .pricing-card h3 {
    margin: 0 0 4px
  }

  .pack-grid .pricing-card__row {
    margin-top: 0;
    padding: 10px 0
  }

  .pack-grid .pricing-card__row--desc {
    padding-top: 0
  }

  .pack-grid .pricing-card__row--cta {
    align-self: end;
    padding-bottom: 0
  }
}

.pricing-card__details {
  align-self: start
}

.pricing-card__details .pricing-card__row:first-child {
  border-top: 0
}

.pricing-card__details h4 {
  margin: 0 0 6px
}

.pricing-card__details .juri-tags {
  gap: 5px
}

.pricing-card__details .juri-tags span {
  padding: 3px 9px;
  font-size: 11px
}

.pricing-card__details ul {
  margin: 4px 0 0;
  gap: 6px;
  font-size: 13px
}

.pricing-card {
  padding: 20px 20px 22px;
  border: 1px solid var(--line);
  box-shadow: none
}

.pricing-card:hover {
  transform: none;
  box-shadow: var(--sh)
}

.pricing-card h3 {
  text-align: left;
  font-size: 20px
}

.pricing-card__row--desc {
  min-height: 0;
  border-top: 0;
  padding-top: 0;
  margin-top: 6px
}

.pricing-card .pricing-amount {
  margin-top: 4px
}

.pricing-card .pricing-amount__value {
  font-size: 32px;
  letter-spacing: -.02em
}

.pricing-card__row {
  border-top-color: var(--line)
}

.pricing-card__row--cta .btn {
  padding: 12px 20px;
  font-size: 14.5px;
  width: 100%;
  justify-content: center;
  text-align: center
}

.pricing-card.is-featured {
  border: 1.5px solid var(--ink);
  box-shadow: var(--sh-lg)
}

.pricing-card__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap
}

/* Simulator in the same language: bordered card, one strong total */
.price-calc {
  max-width: 560px;
  padding: 26px;
  border-radius: 18px;
  box-shadow: none
}

.price-calc__out .is-total {
  background: var(--paper-2);
  border-radius: 12px;
  padding: 14px 16px
}

/* Accueil : cartes des vrais packs (description riche du backend) */
.offers.offers--real {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  max-width: 1000px
}

.offer .offer-desc {
  font-size: 14px
}

.offer .offer-desc ul {
  margin: 14px 0 6px;
  gap: 8px
}

.offer .offer-desc p {
  margin: 8px 0 0
}

/* Accueil, vraies offres : mêmes espacements d'une carte à l'autre.
   Chaque carte reprend les 7 rangées de la grille parente (subgrid) :
   titre / description / prix / résumé / note / bouton / bouton secondaire. */
.offers--real .offer {
  border-width: 2px
}

.offers--real .offer:not(.feat) {
  border-color: var(--line)
}

.offers--real .offer-row {
  min-width: 0
}

@supports (grid-template-rows: subgrid) {
  .offers--real {
    align-items: stretch
  }

  .offers--real .offer {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 7;
    row-gap: 0;
    align-content: start
  }

  .offers--real .offer>h3,
  .offers--real .offer>.price {
    margin-bottom: 0
  }

  /* la note de tarif et les boutons se calent sur le bas de leur rangée */
  .offers--real .offer>.price {
    align-self: end;
    margin-top: 6px
  }

  .offers--real .offer>.btn {
    align-self: start
  }
}

/* Mobile packs (home): tabs + one card at a time + collapsible "included" lists.
   Tabs and toggle are hidden on larger screens. */
.offers-tabs,
.offer-more {
  display: none
}

@media (max-width: 680px) {
  .offers-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 16px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--sh)
  }

  .offers-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 9px 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background .2s, color .2s
  }

  .offers-tab em {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    color: var(--gold-deep)
  }

  .offers-tab.is-active {
    background: var(--ink);
    color: #fff
  }

  .offers-tab.is-active em {
    color: var(--gold)
  }

  /* one card at a time (only when the tabs exist) */
  .offers--real.has-tabs .offer:not(.is-current) {
    display: none
  }

  /* subgrid rows make no sense with a single card: plain column */
  .offers--real .offer {
    display: flex;
    flex-direction: column;
    gap: 0
  }

  .offers--real .offer>.price {
    margin-top: 12px
  }

  .offers--real .offer>.btn {
    margin-top: 12px;
    align-self: stretch;
    text-align: center
  }

  .offer-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    padding: 6px 0;
    border: 0;
    background: none;
    color: var(--gold-deep);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer
  }

  .offer-more::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s
  }

  .offer.is-open .offer-more::after {
    transform: rotate(225deg)
  }

  .offers--real .offer:not(.is-open) .offer-includes {
    display: none
  }
}

/* ---- /offres : « Comment le prix est calculé » ---- */
.price-explain {
  margin-top: 72px;
  scroll-margin-top: 100px
}

.price-steps {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px
}

.price-steps li {
  display: flex;
  gap: 16px;
  padding: 22px 22px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--sh)
}

.price-steps li>b {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 16px
}

.price-steps h3 {
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--ink)
}

.price-steps p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted)
}

.price-formula {
  margin: 22px auto 0;
  max-width: 880px;
  padding: 16px 22px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  text-align: center;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.5
}

.price-tables {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px
}

.price-table {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 22px;
  overflow-x: auto
}

.price-table h3 {
  margin: 0 0 12px;
  font-size: 16.5px;
  color: var(--ink)
}

.price-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px
}

.price-table th {
  padding: 8px 10px;
  text-align: start;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border-bottom: 2px solid var(--line)
}

.price-table td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  color: #2c4650;
  white-space: nowrap
}

.price-table tbody tr:last-child td {
  border-bottom: 0
}

.price-example {
  margin: 22px auto 0;
  max-width: 880px;
  padding: 14px 20px;
  border-left: 4px solid var(--gold-deep);
  border-radius: 10px;
  background: var(--paper-2);
  font-size: 14.5px;
  line-height: 1.6;
  color: #2c4650
}

.price-calc {
  margin: 28px auto 0;
  max-width: 880px;
  padding: 24px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--sh)
}

.price-calc h3 {
  margin: 0 0 16px;
  font-size: 18px;
  color: var(--ink)
}

.price-calc__inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px
}

.price-calc__inputs label {
  display: grid;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--muted)
}

.price-calc__inputs select,
.price-calc__inputs input {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: var(--ink)
}

/* Quick controls: stepper and one-tap team sizes */
.price-calc__users {
  display: grid;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--muted)
}

.price-calc__stepper {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 6px
}

.price-calc__stepper input {
  text-align: center;
  font-weight: 800;
  -moz-appearance: textfield
}

.price-calc__stepper input::-webkit-outer-spin-button,
.price-calc__stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0
}

.price-calc__stepper button,
.price-calc__chips button {
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background .2s, color .2s
}

.price-calc__stepper button {
  border-radius: 10px;
  font-size: 20px;
  line-height: 1
}

.price-calc__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}

.price-calc__chips button {
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 12.5px
}

.price-calc__stepper button:hover,
.price-calc__chips button:hover {
  background: var(--ink);
  color: #fff
}

.price-calc__out {
  margin: 18px 0 0;
  display: grid;
  gap: 0
}

.price-calc__out>div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px
}

.price-calc__out>div[hidden] {
  display: none
}

.price-calc__out dt {
  color: var(--muted)
}

.price-calc__out dd {
  margin: 0;
  font-weight: 800;
  color: var(--ink);
  text-align: end
}

.price-calc__out .is-strong dt,
.price-calc__out .is-strong dd {
  color: var(--ink);
  font-weight: 900
}

.price-calc__out .is-total {
  border-bottom: 0;
  padding-bottom: 0
}

.price-calc__out .is-total dd {
  font-size: 22px;
  color: var(--gold-deep)
}

/* accueil : lien sous la note de tarif */
.offer .price .price-link {
  display: inline;
  color: var(--gold-deep);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px
}

@media (max-width: 900px) {
  .price-steps {
    grid-template-columns: 1fr
  }

  .price-tables {
    grid-template-columns: 1fr
  }
}

@media (max-width: 560px) {
  .price-explain {
    margin-top: 48px
  }

  .price-calc {
    padding: 18px 16px
  }

  .price-calc__inputs {
    grid-template-columns: 1fr
  }
}

/* Simulator layout: form on the left, result panel on the right */
.price-calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 22px;
  max-width: 820px;
  padding: 22px;
  border-radius: 20px
}

.price-calc__form {
  display: grid;
  align-content: start;
  gap: 20px;
  padding: 6px 4px
}

.price-calc__field {
  display: grid;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted)
}

.price-calc__field select,
.price-calc__field input {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink)
}

.price-calc__result {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--ink);
  color: #fff
}

.price-calc__headline {
  display: grid;
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .16)
}

.price-calc__headline span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7)
}

.price-calc__headline b {
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff
}

.price-calc__result .price-calc__out {
  margin: 0
}

.price-calc__result .price-calc__out>div {
  border-color: rgba(255, 255, 255, .12);
  padding: 8px 0
}

.price-calc__result .price-calc__out dt {
  color: rgba(255, 255, 255, .72);
  font-size: 13px
}

.price-calc__result .price-calc__out dd {
  color: #fff;
  font-size: 13.5px
}

.price-calc__result .price-calc__out .is-strong dt,
.price-calc__result .price-calc__out .is-strong dd {
  color: #fff
}

@media (max-width: 760px) {
  .price-calc {
    grid-template-columns: 1fr;
    padding: 16px
  }

  .price-calc__headline b {
    font-size: 30px
  }
}

/* Carte en plein écran : le hero ne doit plus être un empilement plus bas que
   le bandeau des chiffres (z-index 5) ni que l'en-tête collant. Le .wrap du
   hero (z-index 2) enferme la carte « fixed » ; on le monte au-dessus de tout
   tant que le plein écran est actif, et on coupe l'animation d'entrée. */
body.map-fullscreen .hero>.wrap {
  z-index: 3000
}

body.map-fullscreen .hero .mapcard.full {
  animation: none;
  margin: 0
}

body.map-fullscreen .stats {
  visibility: hidden
}

/* ==========================================================================
   CHECKOUT — HT tiers (others grayed), red errors, inline collaborators,
   CGU e-signature, and the red "sign the CGU" banner
   ========================================================================== */
.checkout-ranges li:not(.is-current) {
  opacity: .5;
  background: var(--paper-2);
  filter: grayscale(1)
}

.checkout-ranges li {
  transition: opacity .2s, background .2s
}

/* form errors in red (too many collaborators, missing signature, ...) */
.checkout-main .authform ul:not([class]) {
  list-style: none;
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid #f4c9c5;
  border-radius: 10px;
  background: #fdeceb;
  color: #a3312a;
  font-size: 13.5px;
  font-weight: 700
}

.checkout-main .authform ul:not([class]) li {
  display: flex;
  gap: 8px
}

.checkout-main .authform ul:not([class]) li::before {
  content: "!";
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #a3312a;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  text-align: center
}

/* assigned collaborators, in line */
.checkout-assigned {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.checkout-assigned:empty {
  display: none
}

.checkout-assigned li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--paper-2);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink)
}

.checkout-assigned button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--line-2);
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer
}

.checkout-assigned button:hover {
  background: #a3312a;
  color: #fff
}

/* CGU e-signature */
.checkout-signature {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px dashed var(--line-2);
  border-radius: 12px;
  background: var(--paper-2)
}

.checkout-signature__title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink)
}

.checkout-signature__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
  transition: opacity .2s
}

.checkout-signature__row.is-muted {
  opacity: .45
}

.checkout-signature__date {
  display: grid;
  gap: 4px;
  font-size: 12.5px;
  color: var(--muted)
}

.checkout-signature__date b {
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  color: var(--ink)
}

.checkout-signature__mention {
  margin: 0;
  font-size: 13px;
  font-style: italic;
  color: var(--muted)
}

@media (max-width: 560px) {
  .checkout-signature__row {
    grid-template-columns: 1fr
  }
}

/* red banner: CGU still to sign */
.cgu-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #b42318;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700
}

.cgu-banner .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding-top: 9px;
  padding-bottom: 9px;
  text-align: center
}

.cgu-banner__cta {
  padding: 4px 14px;
  border-radius: 999px;
  background: #fff;
  color: #b42318;
  font-weight: 800
}

/* ---- /nos-sites: the base at a glance + text-type entry points ---- */
.sites-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 24px
}

.sites-summary>div {
  flex: 1 1 180px;
  display: grid;
  gap: 2px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--sh)
}

.sites-summary b {
  font-size: 28px;
  line-height: 1.1;
  color: var(--ink)
}

.sites-summary span {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted)
}

.site-doc-card__count.is-empty {
  color: var(--muted);
  font-weight: 600
}

.type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px
}

.type-grid__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 10px;
  background: var(--paper-2);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  transition: background .2s, border-color .2s, transform .2s
}

.type-grid__item i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  font-style: normal;
  font-size: 13px;
  color: var(--ink)
}

.type-grid__item:hover {
  background: #fff;
  border-color: var(--ink);
  transform: translateY(-1px)
}

/* ---- Home: data coverage in numbers ---- */
.coverage__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 8px
}

.coverage__item {
  display: grid;
  gap: 4px;
  padding: 24px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--sh)
}

.coverage__item b {
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink)
}

.coverage__item span {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink)
}

.coverage__item em {
  font-style: normal;
  font-size: 12.5px;
  color: var(--muted)
}

.coverage__cta {
  margin: 22px 0 0;
  text-align: center
}

/* ---- Home: double taxation treaties ---- */
.treaty {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh)
}

.treaty__txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 42px 40px;
  background: var(--ink-2);
  color: #fff
}

.treaty__txt h2 {
  margin: 12px 0 0;
  font-size: clamp(22px, 2.4vw, 30px);
  color: #fff
}

.treaty__txt p {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.66;
  color: #c9c9e6
}

.treaty__txt .btn {
  margin-top: 24px
}

.treaty__vis {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  padding: 30px;
  background: linear-gradient(150deg, #f0f4f6, #dde6ea);
  text-align: center
}

.treaty__pair {
  display: flex;
  align-items: center
}

.treaty__pair span {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ink);
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  box-shadow: var(--sh)
}

.treaty__pair i {
  width: 70px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 14px)
}

.treaty__vis p {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink)
}

@media (max-width: 880px) {
  .treaty {
    grid-template-columns: 1fr
  }

  .treaty__txt {
    padding: 28px 22px
  }

  .treaty__vis {
    padding: 24px
  }
}