/* ============================================================
   BeBackup — feuille de style
   Charte conservée : vert #9ed91e, bleu #1e9ed9, bleu foncé #123f6d
   Aucun framework, aucune dépendance.
   ============================================================ */

/* ---------- 1. Jetons ---------- */
:root {
  --green:       #9ed91e;
  --green-dark:  #7cb50f;
  --green-soft:  #f2fadf;
  --blue:        #1e9ed9;
  --blue-dark:   #1580b3;
  --navy:        #123f6d;
  --navy-deep:   #0d2f52;

  --ink:         #1c2b3a;
  --ink-soft:    #4a5b6d;
  --ink-mute:    #6f8195;
  --line:        #dfe5ec;
  --grey:        #f4f7fa;
  --grey-2:      #e9ebe7;
  --white:       #ffffff;

  --radius:      14px;
  --radius-sm:   8px;
  --shadow:      0 2px 4px rgba(18,63,109,.05), 0 12px 32px rgba(18,63,109,.08);
  --shadow-lg:   0 4px 8px rgba(18,63,109,.06), 0 24px 56px rgba(18,63,109,.12);

  --wrap:        1180px;
  --font:        "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --step-0:      clamp(1rem, .97rem + .14vw, 1.0625rem);
  --step-1:      clamp(1.125rem, 1.07rem + .27vw, 1.3125rem);
  --step-2:      clamp(1.5rem, 1.35rem + .7vw, 2rem);
  --step-3:      clamp(1.875rem, 1.6rem + 1.3vw, 2.75rem);
  --step-4:      clamp(2.25rem, 1.8rem + 2.2vw, 3.75rem);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }

h1, h2, h3, h4 { line-height: 1.2; color: var(--navy); margin: 0 0 .5em; font-weight: 800; overflow-wrap: break-word; hyphens: auto; }
h1 { font-size: var(--step-4); letter-spacing: -.02em; }
h2 { font-size: var(--step-3); letter-spacing: -.01em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p  { margin: 0 0 1.1em; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.center { text-align: center; }
.mt-32 { margin-top: 2rem; }
.mt-40 { margin-top: 2.5rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 700;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- 3. Boutons ---------- */
.btn {
  --btn-bg: var(--green);
  --btn-fg: #14250b;
  --btn-bd: var(--green);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.4rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-bd); border-radius: 999px;
  font: 700 .95rem/1.2 var(--font);
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(18,63,109,.16); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn--lg { padding: .9rem 1.9rem; font-size: 1rem; }

.btn--primary { --btn-bg: var(--green); --btn-bd: var(--green); --btn-fg: #14250b; }
.btn--primary:hover { --btn-bg: var(--green-dark); --btn-bd: var(--green-dark); color: #fff; }

.btn--ghost { --btn-bg: transparent; --btn-bd: var(--navy); --btn-fg: var(--navy); }
.btn--ghost:hover { --btn-bg: var(--navy); color: #fff; }

.btn--ghost-light { --btn-bg: transparent; --btn-bd: rgba(255,255,255,.55); --btn-fg: #fff; }
.btn--ghost-light:hover { --btn-bg: rgba(255,255,255,.14); color: #fff; }

.btn--dark { --btn-bg: var(--navy); --btn-bd: var(--navy); --btn-fg: #fff; }
.btn--dark:hover { --btn-bg: var(--navy-deep); --btn-bd: var(--navy-deep); color: #fff; }

.link-arrow { font-weight: 700; text-decoration: none; }
.link-arrow::after { content: " →"; transition: margin .15s ease; }
.link-arrow:hover::after { margin-left: .2em; }

/* ---------- 3bis. Badge de version ---------- */
.badge-version {
  display: inline-block;
  margin-right: .55rem;
  padding: .22rem .6rem;
  background: var(--navy);
  color: #fff;
  border-radius: 999px;
  font-size: .74rem; font-weight: 800; letter-spacing: .04em;
  text-transform: none;
  vertical-align: middle;
}
/* Sur fond sombre (héros de rubrique), le badge s'inverse. */
.badge-version--light { background: var(--green); color: #14250b; }

.page-hero__badge { margin: 0 0 .75rem; }
.footer__version {
  margin: .5rem 0 0;
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  color: var(--green);
}

/* ---------- 4. En-tête ---------- */
.topbar {
  background: var(--navy-deep);
  color: rgba(255,255,255,.85);
  font-size: .82rem;
}
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 38px; }
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--green); }
.topbar__phone { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }
.topbar__links { display: flex; gap: 1.25rem; }
@media (max-width: 640px) { .topbar__links a:not(.languages a) { display: none; } }

/* Sélecteur de langue : de simples liens, toujours visibles, y compris sur
   mobile où le reste de la barre disparaît. */
.languages { display: flex; gap: .15rem; margin-left: .5rem; }
.languages a {
  padding: .1rem .38rem;
  border-radius: 4px;
  font-size: .75rem; font-weight: 700; letter-spacing: .03em;
  opacity: .65;
}
.languages a:hover { opacity: 1; background: rgba(255,255,255,.12); color: #fff; }
.languages a.is-active { opacity: 1; color: var(--green); background: rgba(255,255,255,.08); }

.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 74px; }
.logo img { width: auto; height: 42px; }

.nav__list { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.nav__list > li > a {
  display: block; padding: .55rem .8rem; border-radius: var(--radius-sm);
  color: var(--navy); font-weight: 600; font-size: .93rem; text-decoration: none;
}
.nav__list > li > a:hover { background: var(--grey); }
.nav__list > li > a[aria-current="page"] { color: var(--blue-dark); background: var(--green-soft); }
/* Rubrique contenant la page courante : signalée visuellement, mais sans
   aria-current, qui ne doit désigner que la page réellement affichée. */
.nav__item.is-active > a { color: var(--blue-dark); }
.nav__cta { margin-left: .5rem; }
/* Libellés sur une ligne. Entre la tablette et le grand écran, le menu se
   resserre pour que les huit entrées tiennent sans passer au burger. */
@media (min-width: 981px) {
  .nav__list { gap: .1rem; }
  .nav__list > li > a { padding: .55rem .62rem; }
  .nav__list > li > a, .nav__cta .btn { white-space: nowrap; }
}
@media (min-width: 981px) and (max-width: 1260px) {
  .header__inner { gap: .75rem; }
  .logo img { height: 36px; }
  .nav__list { gap: .1rem; }
  .nav__list > li > a { padding: .5rem .5rem; font-size: .86rem; }
  .nav__cta { margin-left: .25rem; }
  .nav__cta .btn { padding-left: .9rem; padding-right: .9rem; font-size: .86rem; }
}
@media (min-width: 981px) and (max-width: 1160px) {
  .logo img { height: 32px; }
  .nav__list > li > a { padding: .45rem .32rem; font-size: .8rem; }
  .nav__cta .btn { padding-left: .65rem; padding-right: .65rem; font-size: .8rem; }
}
.logo { flex-shrink: 0; }
@media (min-width: 981px) and (max-width: 1010px) {
  .nav__list > li > a { padding-left: .26rem; padding-right: .26rem; }
}
/* L'espagnol a les libellés les plus longs : un cran plus serré. */
@media (min-width: 1261px) {
  html:lang(es) .nav__list > li > a { padding-left: .42rem; padding-right: .42rem; }
}
@media (min-width: 981px) and (max-width: 1100px) {
  html:lang(es) .nav__list > li > a { padding-left: .24rem; padding-right: .24rem; font-size: .76rem; }
  html:lang(es) .nav__cta .btn { padding-left: .55rem; padding-right: .55rem; font-size: .76rem; }
}

.burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 11px;
  background: none; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
}
.burger span { display: block; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
  .burger { display: flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: none;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; padding: .75rem 1.25rem 1.25rem; gap: .15rem; }
  .nav__list > li > a { padding: .8rem .6rem; font-size: 1rem; }
  .nav__cta { margin: .5rem 0 0; }
  .nav__cta .btn { width: 100%; }
}

/* ---------- 4bis. Sous-menu de rubrique ---------- */
.nav__item { position: relative; }

/* Le chevron n'est utile qu'au tactile : au survol et au clavier, le CSS
   ci-dessous ouvre déjà le panneau. Il reste focusable pour ne jamais
   piéger un utilisateur dont le pointeur ne survole pas. */
.nav__toggle {
  display: none;
  position: absolute; right: -2px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  align-items: center; justify-content: center;
  padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--navy);
}

.nav__sub {
  position: absolute; top: calc(100% + 2px); left: 0;
  min-width: 256px;
  margin: 0; padding: .4rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  z-index: 110;
}
.nav__item--end > .nav__sub { left: auto; right: 0; }
.nav__sub a {
  display: block;
  padding: .55rem .7rem;
  border-radius: 6px;
  color: var(--navy); font-size: .9rem; font-weight: 600; text-decoration: none;
  white-space: nowrap;
}
.nav__sub a:hover { background: var(--grey); }
.nav__sub a[aria-current="page"] { color: var(--blue-dark); background: var(--green-soft); }

.nav__sub-all { border-bottom: 1px solid var(--line); margin-bottom: .3rem; padding-bottom: .3rem; }
.nav__sub-all a { color: var(--ink-mute); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }

/* Ouverture : au survol, au clavier (focus-within), ou sur demande (JS). */
@media (min-width: 981px) {
  .nav__item--parent:hover > .nav__sub,
  .nav__item--parent:focus-within > .nav__sub,
  .nav__item--parent.is-open > .nav__sub {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  /* Sur un appareil sans survol (tablette), le chevron prend le relais. */
  @media (hover: none) {
    .nav__toggle { display: flex; }
    .nav__item--parent > a { padding-right: 1.8rem; }
    .nav__item--parent:hover > .nav__sub { opacity: 0; visibility: hidden; }
    .nav__item--parent.is-open > .nav__sub { opacity: 1; visibility: visible; }
  }
}

/* Sous le point de bascule, le menu est déjà déplié : le sous-menu devient
   une simple liste imbriquée, toujours visible. Pas de piège tactile. */
@media (max-width: 980px) {
  .nav__sub {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    min-width: 0; margin: .1rem 0 .4rem .9rem; padding: 0 0 0 .8rem;
    border: 0; border-left: 2px solid var(--line); border-radius: 0;
    box-shadow: none; background: none;
  }
  .nav__sub a { padding: .55rem .4rem; font-size: .95rem; white-space: normal; }
  .nav__sub-all { display: none; }
}

/* ---------- 5. Sections ---------- */
.section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section--tight { padding: clamp(2.5rem, 4vw, 4rem) 0; }
.section--grey { background: var(--grey); }

.section-title { font-size: var(--step-3); margin-bottom: .6em; }
.section-title.center { text-align: center; }
.section-lead {
  font-size: var(--step-1); color: var(--ink-soft);
  max-width: 62ch; margin: 0 auto 2.5rem;
}
.section-lead.center { text-align: center; }

.prose { max-width: 72ch; margin-inline: auto; }
.prose-wide { max-width: 1000px; margin-inline: auto; }
.prose h2 { margin-top: 2em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.6em; font-size: var(--step-1); }
.prose .lead { font-size: var(--step-1); color: var(--ink-soft); }

/* ---------- 6. Héros ---------- */
.hero {
  background:
    radial-gradient(900px 420px at 88% -12%, rgba(158,217,30,.16), transparent 62%),
    linear-gradient(180deg, var(--grey) 0%, #fff 100%);
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem);
}
.hero__inner {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.hero__eyebrow {
  display: inline-block; margin-bottom: 1rem;
  padding: .3rem .85rem; border-radius: 999px;
  background: var(--green-soft); color: #4e7a06;
  font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.hero__title { margin-bottom: .5em; }
.hero__title .hl {
  background: linear-gradient(180deg, transparent 62%, rgba(158,217,30,.45) 62%);
}
.hero__lead { font-size: var(--step-1); color: var(--ink-soft); max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 0; }

.hero__facts {
  display: flex; flex-wrap: wrap; gap: 2rem;
  list-style: none; margin: 2.5rem 0 0; padding: 1.5rem 0 0;
  border-top: 1px solid var(--line);
}
.hero__facts strong { display: block; color: var(--navy); font-size: 1.35rem; }
.hero__facts span { color: var(--ink-mute); font-size: .85rem; }

.hero__media img { border-radius: var(--radius); }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { order: -1; max-width: 460px; margin-inline: auto; }
}

.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}
.page-hero--slim { padding: clamp(2rem, 4vw, 3.25rem) 0; }
.page-hero--accent {
  background: linear-gradient(135deg, var(--navy) 0%, #14567f 60%, var(--blue-dark) 100%);
}
.page-hero__title { color: #fff; max-width: 22ch; }
.page-hero--slim .page-hero__title { max-width: 30ch; }
.page-hero__lead { font-size: var(--step-1); color: rgba(255,255,255,.88); max-width: 60ch; margin-bottom: 0; }

.breadcrumb { font-size: .85rem; color: rgba(255,255,255,.7); margin-bottom: 1rem; }
.breadcrumb a { color: rgba(255,255,255,.9); text-decoration: none; }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb span { margin: 0 .35rem; opacity: .6; }

/* ---------- 7. Cartes ---------- */
.cards { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.cards--5 { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem 1.5rem; text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.card--left { text-align: left; }
.card__icon { width: 58px; height: 58px; object-fit: contain; margin: 0 auto 1rem; }
.card--left .card__icon { margin-inline: 0; }
.card__title { font-size: 1.15rem; margin-bottom: .5rem; }
.card__text { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* ---------- 8. Bandeaux ---------- */
.band { padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.band__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
.band--navy { background: var(--navy); }
.band--navy .band__title { color: #fff; }
.band--green { background: var(--green-soft); }
.band__title { margin: 0; font-size: var(--step-2); max-width: 26ch; }
.band__text { margin: .5rem 0 0; color: var(--ink-soft); max-width: 52ch; }

/* ---------- 8bis. Bandeau d'annonce de version ---------- */
.announcement {
  padding: clamp(1.75rem, 3.5vw, 2.5rem) 0;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.announcement__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
.announcement__text { flex: 1 1 460px; }
.announcement__kicker {
  margin: 0 0 .5rem;
  color: rgba(255,255,255,.7);
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.announcement__title { margin: 0 0 .4rem; color: #fff; font-size: var(--step-2); }
.announcement__summary { margin: 0; color: rgba(255,255,255,.85); font-size: .95rem; max-width: 62ch; }

/* ---------- 9. Split / listes ---------- */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 2rem; }
.split__item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem 1.75rem;
}
.split__icon { width: 80px; height: 80px; object-fit: contain; margin-bottom: 1rem; }
.split__title { font-size: var(--step-1); }
.split__intro { color: var(--ink-soft); }

.checklist { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.checklist li { position: relative; padding-left: 1.85rem; margin-bottom: .65rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2314250b' d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L20.1 8.4 18.7 7z'/%3E%3C/svg%3E") center/70% no-repeat;
}
.checklist--2 { columns: 2; column-gap: 2.5rem; }
@media (max-width: 640px) { .checklist--2 { columns: 1; } }

.bullets { margin: 0 0 1.2em; padding-left: 1.25rem; }
.bullets li { margin-bottom: .55rem; }
.bullets li::marker { color: var(--green-dark); }

.questions { list-style: none; margin: 1.5rem 0; padding: 0; }
.questions li {
  padding: .85rem 1.1rem; margin-bottom: .6rem;
  background: var(--grey); border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ---------- 10. Piliers / étapes / stats ---------- */
.pillars {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 1rem; list-style: none; margin: 0; padding: 0;
}
.pillar a {
  display: flex; flex-direction: column; align-items: center; gap: .85rem;
  padding: 1.5rem 1rem; height: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--navy); font-weight: 700; font-size: .95rem; text-align: center; text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pillar a:hover { border-color: var(--green); box-shadow: var(--shadow); transform: translateY(-2px); }
.pillar img { width: 62px; height: 62px; object-fit: contain; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 1.75rem; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 2.25rem 1.5rem 1.75rem; }
.step__num {
  position: absolute; top: -18px; left: 1.5rem;
  width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--green); color: #14250b; border-radius: 50%;
  font-weight: 800; font-size: 1.1rem;
}
.step__img { border-radius: var(--radius-sm); margin-bottom: 1.1rem; object-fit: contain; }
.step__title { font-size: var(--step-1); }
.step__text { color: var(--ink-soft); font-size: .95rem; margin: 0; }

.archi-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 1.25rem; list-style: none; margin: 2.5rem 0 0; padding: 0; }
.archi-step { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border-radius: var(--radius); padding: 1.35rem; }
.archi-step__num {
  flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--blue); color: #fff; border-radius: 50%; font-weight: 800;
}
.archi-step p { margin: 0; font-size: .95rem; color: var(--ink-soft); }

.schema { margin: 0 0 1rem; text-align: center; }
.schema img { margin-inline: auto; border-radius: var(--radius); background: #fff; padding: 1rem; }
.schema figcaption { margin-top: .85rem; font-size: .88rem; color: var(--ink-mute); }

.stats { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 2rem 0 0; }
.stat {
  flex: 1 1 220px; padding: 1.5rem;
  background: var(--navy); color: #fff; border-radius: var(--radius);
}
.stat__value { display: block; font-size: 2.4rem; line-height: 1; color: var(--green); }
.stat__label { display: block; margin-top: .6rem; font-size: .9rem; color: rgba(255,255,255,.85); }

/* ---------- 11. Valeurs / logos / avis ---------- */
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.value { background: #fff; border-radius: var(--radius); padding: 1.75rem 1.5rem; }
.value img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 1rem; }
.value__title { font-size: 1.1rem; }
.value__text { color: var(--ink-soft); font-size: .93rem; margin: 0; }

/* Logos clients en couleur : le gris « discret » affaiblissait la preuve.
   Chaque logo est posé sur une carte blanche de hauteur constante, ce qui
   uniformise des fichiers d'origines et de formats très différents. */
.logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 1rem;
  list-style: none; margin: 2.25rem 0 0; padding: 0;
}
.logos li {
  display: grid; place-items: center;
  min-height: 110px; padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.logos li:hover { border-color: var(--green); box-shadow: var(--shadow); transform: translateY(-2px); }
.logos img { max-height: 58px; width: auto; object-fit: contain; }

.reviews { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--grey); }
.reviews__head { text-align: center; margin-bottom: 2.5rem; }
.reviews__score { color: var(--ink-soft); }
.reviews__stars { color: #f5a623; letter-spacing: .1em; margin-right: .35rem; }
.reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.review { background: #fff; border-radius: var(--radius); padding: 1.6rem 1.5rem; display: flex; flex-direction: column; }
.review__stars { color: #f5a623; letter-spacing: .12em; margin: 0 0 .75rem; }
.review__text { margin: 0 0 1rem; font-size: .95rem; color: var(--ink-soft); font-style: normal; }
.review__author { margin: auto 0 0; font-weight: 700; color: var(--navy); font-size: .92rem; }
/* Mention affichee hors francais : les avis restent dans leur langue. */
.reviews__note { margin: 1.5rem 0 0; text-align: center; font-size: .85rem; color: var(--ink-soft); }
.review__date { display: block; font-weight: 400; font-size: .8rem; color: var(--ink-mute); }

/* ---------- 11bis. Bandeau de réassurance ---------- */
.trust {
  padding: clamp(2rem, 4vw, 2.75rem) 0;
  background: #fff;
  border-block: 1px solid var(--line);
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1.75rem 1.5rem;
  list-style: none; margin: 0; padding: 0;
}
.trust__item {
  position: relative;
  text-align: center;
  padding-inline: 1rem;
}
/* Séparateurs entre colonnes, retirés dès que la grille se replie. */
@media (min-width: 900px) {
  .trust__item + .trust__item::before {
    content: "";
    position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 46px;
    background: var(--line);
  }
}
.trust__value {
  display: block;
  font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.15rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--navy);
}
.trust__label {
  display: block;
  max-width: 30ch;
  margin: .55rem auto 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- 11ter. Pages fonctionnalités ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 1.25rem;
}
.feature {
  display: flex; flex-direction: column;
  padding: 1.75rem 1.6rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.feature__step {
  margin: 0 0 .35rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green-dark);
}
.feature__title { font-size: 1.15rem; margin-bottom: .75rem; }
.feature__intro { color: var(--ink-soft); font-size: .93rem; margin-bottom: 1rem; }
.feature__list { list-style: none; margin: 0; padding: 0; font-size: .93rem; }
.feature__list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: .55rem;
  color: var(--ink-soft);
}
.feature__list li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
}
.feature__more { margin: auto 0 0; padding-top: 1.1rem; }

/* Étiquettes : listes courtes de mots-clés (états du tableau de bord...) */
.pills {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  list-style: none; margin: 0; padding: 0;
}
.pills li {
  padding: .4rem .9rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .88rem; font-weight: 600; color: var(--navy);
}

/* Chaîne d'étapes numérotées, sur une colonne */
.chain { list-style: none; margin: 0; padding: 0; max-width: 780px; margin-inline: auto; }
.chain__item {
  display: flex; gap: 1.25rem; align-items: flex-start;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
.chain__num {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--navy); color: #fff;
  border-radius: 50%;
  font-weight: 800;
}
.chain__title { font-size: 1.05rem; margin-bottom: .35rem; }
.chain__item p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* ---------- 11quater. Navigation entre pages d'une rubrique ---------- */
.siblings { padding: clamp(2.5rem, 5vw, 3.5rem) 0; background: var(--grey); border-top: 1px solid var(--line); }
.siblings__title { font-size: var(--step-1); margin-bottom: 1.5rem; }
.siblings__title a { color: var(--blue-dark); }
.siblings__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: .9rem; list-style: none; margin: 0; padding: 0;
}
.sibling {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.1rem 1.2rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.sibling:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: var(--shadow); }
.sibling--current { background: var(--green-soft); border-color: var(--green); }
.sibling--current:hover { transform: none; box-shadow: none; }
.sibling__badge {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #4e7a06;
}
.sibling__title { font-weight: 700; color: var(--navy); text-decoration: none; font-size: .98rem; }
a.sibling__title:hover { color: var(--blue-dark); }
.sibling__summary { font-size: .85rem; color: var(--ink-soft); line-height: 1.5; }

/* ---------- 12. Citations / FAQ / tableaux ---------- */
.pullquote {
  margin: 0; padding: 2rem 2.25rem;
  background: var(--green-soft); border-left: 4px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.pullquote--flat { background: var(--grey); border-left-color: var(--blue); }
.pullquote p { font-size: var(--step-1); color: var(--navy); font-style: italic; }
.pullquote footer { font-weight: 700; color: var(--ink-soft); font-style: normal; font-size: .92rem; }
.pullquote footer::before { content: "— "; }

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-weight: 700; color: var(--navy); font-size: 1.05rem; cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+"; position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--green-dark); line-height: 1;
}
.faq__item[open] .faq__q::after { content: "−"; }
.faq__a { padding-bottom: 1.25rem; color: var(--ink-soft); }
.faq__a p { margin: 0; }

.table-wrap { position: relative; overflow-x: auto; margin: 2rem 0; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: .95rem; }
th, td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--navy); color: #fff; font-size: .88rem; }
tbody th { font-weight: 600; color: var(--navy); }
.compare tbody tr:nth-child(even) { background: var(--grey); }
.compare__yes { color: #3f6b06; font-weight: 600; background: rgba(158,217,30,.12); }

.rights dt { font-weight: 700; color: var(--navy); margin-top: 1.25rem; }
.rights dd { margin: .35rem 0 0; color: var(--ink-soft); }

.legal h2 { font-size: var(--step-2); }

/* ---------- 13. Media + texte ---------- */
.media-text { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.media-text--reverse .media-text__media { order: -1; }
.media-text__media img { border-radius: var(--radius); }
@media (max-width: 860px) {
  .media-text { grid-template-columns: 1fr; }
  .media-text--reverse .media-text__media { order: 0; }
}

/* ---------- 14. Blog ---------- */
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.posts--list { grid-template-columns: 1fr; gap: 0; }
.post { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.5rem; }
.post--row { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 2rem 0; }
.post--row:first-child { padding-top: 0; }
.post__meta { font-size: .85rem; color: var(--ink-mute); margin-bottom: .5rem; }
.post__title { font-size: var(--step-1); margin-bottom: .5rem; }
.post__title a { color: var(--navy); text-decoration: none; }
.post__title a:hover { color: var(--blue-dark); text-decoration: underline; }
.post__excerpt { color: var(--ink-soft); font-size: .95rem; margin-bottom: .5rem; }

.tag {
  display: inline-block; margin-left: .4rem; padding: .1rem .55rem;
  background: var(--green-soft); color: #4e7a06;
  border-radius: 999px; font-size: .75rem; font-weight: 700;
}
.empty { text-align: center; color: var(--ink-mute); padding: 3rem 0; }

.article__meta { color: rgba(255,255,255,.75); font-size: .88rem; margin: 0; }
.article__cover { border-radius: var(--radius); margin: -2rem auto 0; box-shadow: var(--shadow-lg); }
.article__body h2 { margin-top: 2.2em; }
.article__body h3 { margin-top: 1.8em; }
.article__body img { border-radius: var(--radius-sm); margin: 1.5rem 0; }
/* Citations, code et filets : portes par .prose et non par .article__body.
   Les deux endroits qui rendent du Markdown — un article de blog et une page
   d'aide — ont la classe .prose ; seul le blog avait .article__body. Sans cela
   les blocs de code de l'aide restaient sans style et, faute d'overflow-x,
   debordaient la page sur un telephone. */
/* Le « :not([class]) » n'est pas une precaution de style, c'est une necessite.
   Une citation produite par le Markdown n'a jamais de classe ; une citation
   dessinee a la main en a toujours une — .pullquote sur /la-societe/, par
   exemple. Sans ce filtre, cette regle, plus specifique que .pullquote, lui
   imposerait son fond gris, sa bordure bleue et sa marge. */
.prose blockquote:not([class]) {
  margin: 1.75rem 0; padding: 1.25rem 1.5rem;
  background: var(--grey); border-left: 4px solid var(--blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.prose blockquote:not([class]) p:last-child { margin-bottom: 0; }
.prose pre:not([class]) {
  background: var(--navy-deep); color: #e6edf3; padding: 1.25rem;
  border-radius: var(--radius-sm); overflow-x: auto; font-size: .88rem;
}
.prose code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .92em; }
.prose :not(pre) > code {
  background: var(--grey-2); padding: .12em .4em; border-radius: 4px; color: var(--navy);
  /* Un chemin ou une commande longue doit pouvoir se couper : sinon un seul
     mot de code repousse la largeur de la page sur un ecran etroit. */
  overflow-wrap: anywhere;
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* ---------- 15. Formulaires ---------- */
.contact { display: grid; grid-template-columns: 1.5fr .85fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

.form { margin-top: 2rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

.field { margin-bottom: 1.25rem; }
.field label { display: block; margin-bottom: .4rem; font-weight: 600; font-size: .92rem; color: var(--navy); }
.field abbr { color: #c0392b; text-decoration: none; }

/* On EXCLUT les types qui demandent un traitement propre, au lieu d'ENUMERER
   ceux qui recoivent le style commun. Enumerer laisse forcement un type de
   cote : c'est ce qui est arrive a input[type=password], reste au rendu par
   defaut du navigateur : petit et gris a cote d'un champ e-mail style. Avec
   l'exclusion, un nouveau type de champ herite du style sans qu'on y pense. */
/* :where() et non :not() enchaines : :where() ne compte pas dans la
   specificite. Enchainer quatre :not() ferait passer cette regle devant
   « .field--error input », et le lisere rouge des champs en erreur cesserait
   de s'afficher — une regression invisible tant qu'on ne se trompe pas de
   saisie. */
.field input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"])),
.field select, .field textarea {
  width: 100%; padding: .75rem .9rem;
  font: inherit; font-size: .97rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Un mot de passe s'affiche en points : la police du site les rend petits et
   serres. Un peu d'espacement rend la saisie lisible, et la hauteur reste
   celle des autres champs. */
.field input[type="password"] { letter-spacing: .12em; }
.field input[type="password"]::placeholder { letter-spacing: normal; }

/* Le champ de depot de fichier : le bouton natif reste, mais il cesse de
   flotter seul au milieu de la page. */
.field input[type="file"] {
  width: 100%; padding: .6rem .9rem;
  font: inherit; font-size: .9rem; color: var(--ink-soft);
  background: var(--grey); border: 1px dashed var(--line);
  border-radius: var(--radius-sm); cursor: pointer;
}
.field input[type="file"]:hover { border-color: var(--blue); background: #fff; }
.field input[type="file"]::file-selector-button {
  margin-right: .9rem; padding: .45rem 1rem;
  font: inherit; font-size: .88rem; font-weight: 600;
  color: var(--navy); background: #fff;
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
}
.field input[type="file"]::file-selector-button:hover {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,158,217,.16); outline: none;
}
.field textarea { resize: vertical; min-height: 120px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23123f6d' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; background-size: 22px; padding-right: 2.4rem; }

.field__error { margin: .35rem 0 0; font-size: .85rem; color: #c0392b; min-height: 0; }
.field__error:empty { display: none; }
.field--error input, .field--error select, .field--error textarea { border-color: #c0392b; }

.field--check { margin-top: 1.5rem; }
.check { display: flex; gap: .75rem; align-items: flex-start; font-weight: 400 !important; font-size: .87rem !important; color: var(--ink-soft) !important; line-height: 1.55; }
.check input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--green-dark); }

.form__legend { font-size: .85rem; color: var(--ink-mute); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { padding: 1.5rem 1.75rem; border-radius: var(--radius); margin-bottom: 1.5rem; }
.alert--ok { background: var(--green-soft); border: 1px solid var(--green); }
.alert--error { background: #fdeceb; border: 1px solid #e8a49e; }
.alert__title { margin-bottom: .4rem; font-size: var(--step-1); }
.alert p:last-child { margin-bottom: 0; }

.contact__aside { display: grid; gap: 1.25rem; }
.infobox { background: var(--grey); border-radius: var(--radius); padding: 1.5rem; }
.infobox--accent { background: var(--navy); color: #fff; }
.infobox--accent .infobox__title { color: #fff; }
.infobox--accent a:not(.btn) { color: var(--green); }
.infobox__title { font-size: 1.02rem; margin-bottom: .6rem; }
.infobox p:last-child, .infobox address:last-child { margin-bottom: 0; }
.infobox address { font-style: normal; }
.infobox__social { display: flex; gap: 1rem; }

/* ---------- 16. CTA / pied de page ---------- */
.cta { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); padding: clamp(2.5rem, 5vw, 4rem) 0; }
.cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.75rem; }
.cta__title { color: #fff; margin-bottom: .35em; font-size: var(--step-2); }
.cta__text { color: rgba(255,255,255,.85); margin: 0; max-width: 46ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.footer { background: var(--navy-deep); color: rgba(255,255,255,.78); font-size: .92rem; }
.footer__grid {
  display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr 1.15fr;
  gap: 2.5rem; padding: clamp(2.5rem, 5vw, 4rem) 0 2.5rem;
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } }

.footer a { color: rgba(255,255,255,.78); text-decoration: none; }
.footer a:hover { color: var(--green); text-decoration: underline; }
.footer__title { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1rem; }
.footer__title--tight { margin-top: 1.5rem; }
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: .55rem; }
.footer__brand img { margin-bottom: 1rem; }
.footer__baseline { font-size: .9rem; }
.footer__baseline strong { color: var(--green); }
.footer__badge { margin-top: .5rem; }
.footer__since { margin: .85rem 0 0; font-size: .82rem; line-height: 1.5; color: rgba(255,255,255,.6); }
.footer__address { font-style: normal; margin-bottom: 1rem; }
.footer__social { display: flex; gap: .85rem; }
.footer__social a { display: grid; place-items: center; width: 38px; height: 38px; background: rgba(255,255,255,.1); border-radius: 50%; color: #fff; }
.footer__social a:hover { background: var(--green); color: var(--navy-deep); }

.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; }
.footer__bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; padding: 1.25rem 0; }
.footer__bottom p { margin: 0; }

/* ---------- 17. Bandeau cookies ---------- */
.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--navy-deep); color: rgba(255,255,255,.9);
  box-shadow: 0 -8px 32px rgba(0,0,0,.25);
  animation: cookie-in .25s ease-out;
}
@keyframes cookie-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cookie[hidden] { display: none; }
.cookie__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.25rem 0; }
.cookie__body { flex: 1 1 400px; }
.cookie__title { color: #fff; font-size: 1rem; margin-bottom: .3rem; }
.cookie__text { margin: 0; font-size: .88rem; line-height: 1.55; }
.cookie__text a { color: var(--green); }
.cookie__actions { display: flex; gap: .65rem; flex-wrap: wrap; }

.cookie__reopen {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 150;
  padding: .5rem .9rem;
  background: var(--navy); color: #fff;
  border: 0; border-radius: 999px;
  font: 600 .78rem var(--font); cursor: pointer; opacity: .75;
}
.cookie__reopen:hover { opacity: 1; }
.cookie__reopen[hidden] { display: none; }

/* ---------- 19. Espace client ---------- */
.account { background: var(--grey); min-height: 60vh; }
.account__frame {
  width: min(100% - 2.5rem, 560px);
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.account__frame--large { width: min(100% - 2.5rem, 820px); }
.account__title { font-size: var(--step-2); margin-bottom: .6em; }
.account__intro { color: var(--ink-soft); margin-bottom: 1.5rem; }
.account__section {
  margin: 2rem 0 .25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 1.02rem; color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: .06em;
}
.account__separator { border: 0; border-top: 1px solid var(--line); margin: 1.75rem 0 1.25rem; }
.account__links { margin: 1rem 0 0; font-size: .92rem; }
.account__toggle { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.field__help { margin: .35rem 0 0; font-size: .84rem; color: var(--ink-mute); line-height: 1.5; }

/* ---------- 18. Impression ---------- */
@media print {
  .topbar, .header, .footer, .cta, .cookie, .cookie__reopen, .btn { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .page-hero { background: none; color: #000; }
  .page-hero__title, .page-hero__lead { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ============================================================
   14. Espace client : navigation, forum, assistant, documentation
   ============================================================ */

/* ---------- Barre de navigation de l'espace ---------- */
.client-nav { background: var(--navy); color: #fff; }
.client-nav__inner {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
  padding: .6rem 0;
}
.client-nav__list { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.client-nav__link {
  display: inline-block; padding: .5rem .9rem; border-radius: var(--radius-sm);
  color: rgba(255,255,255,.82); font-size: .93rem; font-weight: 600; text-decoration: none;
}
.client-nav__link:hover { background: rgba(255,255,255,.1); color: #fff; }
.client-nav__link.is-active { background: rgba(255,255,255,.16); color: #fff; }
.client-nav__account { display: flex; align-items: center; gap: 1rem; font-size: .86rem; }
.client-nav__who { color: rgba(255,255,255,.74); }
.client-nav__admin {
  padding: .3rem .7rem; border: 1px solid var(--green); border-radius: 999px;
  color: var(--green); text-decoration: none; font-weight: 700;
}
.client-nav__admin:hover { background: var(--green); color: #14250b; }
.client-nav__logout { color: rgba(255,255,255,.74); text-decoration: underline; }
.client-nav__logout:hover { color: #fff; }

/* ---------- Etiquettes d'etat ---------- */
.chip {
  display: inline-block; padding: .18rem .55rem; border-radius: 999px;
  font-size: .76rem; font-weight: 700; line-height: 1.5;
  background: var(--grey); color: var(--ink-soft); border: 1px solid var(--line);
  white-space: nowrap;
}
.chip--button { cursor: pointer; font-family: inherit; }
.chip--private      { background: #fdf3e3; border-color: #e8c894; color: #8a5a11; }
.chip--public    { background: var(--green-soft); border-color: var(--green); color: #4a6b0c; }
.chip--open     { background: var(--green-soft); border-color: var(--green); color: #4a6b0c; }
.chip--resolved     { background: #e8f4fb; border-color: #9ccfe8; color: #12587e; }
.chip--closed      { background: var(--grey-2); border-color: #c9ccc6; color: #55584f; }
.chip--pinned     { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip--hidden      { background: #fdeceb; border-color: #e8a49e; color: #9c2b20; }
.chip--pending     { background: #fdf3e3; border-color: #e8c894; color: #8a5a11; }
.chip--translation  { background: #f1f0fb; border-color: #c3bfe6; color: #45409c; }
.chip--ok-light    { background: var(--green-soft); border-color: #cbe68d; color: #5c7a1d; }
.chip--role-admin    { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip--role-client   { background: var(--green-soft); border-color: var(--green); color: #4a6b0c; }
.chip--role-prospect { background: #e8f4fb; border-color: #9ccfe8; color: #12587e; }
.chip--role-archive  { background: var(--grey-2); border-color: #c9ccc6; color: #55584f; }
.chip--new_question     { background: #e8f4fb; border-color: #9ccfe8; color: #12587e; }
.chip--escalated    { background: #fdf3e3; border-color: #e8c894; color: #8a5a11; }
.chip--answered     { background: var(--green-soft); border-color: var(--green); color: #4a6b0c; }
.chip--unanswered { background: #fdeceb; border-color: #e8a49e; color: #9c2b20; }
.chip--close        { background: var(--grey-2); border-color: #c9ccc6; color: #55584f; }

.link-subtle {
  background: none; border: 0; padding: 0; font: inherit; font-size: .85rem;
  color: var(--blue-dark); text-decoration: underline; cursor: pointer;
}
.link-subtle:hover { color: var(--navy); }

/* ---------- Forum : liste ---------- */
.forum-bar {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
  justify-content: space-between; margin-bottom: 1.75rem;
}
.forum-filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.forum-filters input[type="search"], .forum-filters select {
  padding: .55rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: .9rem; background: #fff;
}
.check--inline { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; }
.forum-account { font-size: .88rem; color: var(--ink-mute); margin-bottom: .75rem; }

.forum-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.forum-item {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start;
  justify-content: space-between;
  padding: 1.1rem .25rem; border-bottom: 1px solid var(--line);
}
.forum-item--pinned { background: #fbfdf4; }
.forum-item__title { font-size: 1.03rem; margin: 0 0 .25rem; line-height: 1.4; }
.forum-item__title a { color: var(--navy); text-decoration: none; }
.forum-item__title a:hover { text-decoration: underline; }
.forum-item__meta { margin: 0; font-size: .84rem; color: var(--ink-mute); }
.forum-item__sep { opacity: .5; margin: 0 .2rem; }
.forum-item__aside { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.forum-item__count { font-size: .82rem; color: var(--ink-mute); white-space: nowrap; }

.forum-empty {
  padding: 2.5rem 2rem; text-align: center; background: var(--grey);
  border-radius: var(--radius); color: var(--ink-soft);
}
.forum-empty p:last-child { margin-bottom: 0; }

.pagination {
  display: flex; gap: 1.25rem; align-items: center; justify-content: center;
  margin-top: 2rem; font-size: .9rem;
}
.pagination__state { color: var(--ink-mute); }

/* ---------- Forum : un sujet ---------- */
.topic__header { margin-bottom: 1.25rem; }
.topic__title { font-size: var(--step-2); margin-bottom: .5rem; }
.topic__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.topic__note { margin: .6rem 0 0; font-size: .85rem; color: var(--ink-mute); font-style: italic; }
.topic__controls {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  padding: .85rem 1rem; margin-bottom: 2rem;
  background: var(--grey); border-radius: var(--radius-sm);
}
.topic__controls form { margin: 0; }
.btn--sm { padding: .45rem 1rem; font-size: .85rem; }

.thread { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.thread__message {
  padding: 1.25rem 1.5rem; margin-bottom: 1rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.thread__message--team { border-left: 4px solid var(--green); background: #fcfef7; }
.thread__message--hidden { opacity: .6; border-style: dashed; }
.thread__header {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline;
  margin-bottom: .75rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line);
}
.thread__author { font-weight: 700; color: var(--navy); font-size: .93rem; }
.thread__company { font-weight: 400; color: var(--ink-mute); }
.thread__date { font-size: .82rem; color: var(--ink-mute); }
.thread__body { max-width: none; }
.thread__body > :last-child { margin-bottom: 0; }
.thread__note { margin: .75rem 0 0; font-size: .82rem; color: var(--ink-mute); font-style: italic; }
.thread__files { list-style: none; margin: 1rem 0 0; padding: .75rem 0 0; border-top: 1px dashed var(--line); }
.thread__files li { font-size: .88rem; margin-bottom: .3rem; }
.thread__size { color: var(--ink-mute); font-size: .8rem; margin-left: .4rem; }
.thread__moderation {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  margin-top: 1rem; padding-top: .75rem; border-top: 1px dashed var(--line);
}
.thread__moderation form { margin: 0; }
.thread__hint { font-size: .78rem; color: var(--ink-mute); }
.topic__reply { margin-top: 2rem; }
.topic__closed {
  padding: 1.25rem 1.5rem; background: var(--grey); border-radius: var(--radius-sm);
  color: var(--ink-soft); font-size: .93rem;
}

/* ---------- Choix de visibilite ---------- */
.field--visibility { border: 0; padding: 0; margin: 1.75rem 0; }
.field--visibility legend { font-weight: 600; font-size: .92rem; color: var(--navy); margin-bottom: .6rem; }
.radio-card {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .9rem 1.1rem; margin-bottom: .6rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; cursor: pointer;
}
.radio-card:hover { border-color: var(--blue); }
.radio-card:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
.radio-card__body { display: block; font-size: .9rem; }
.radio-card__body strong { display: block; color: var(--navy); margin-bottom: .2rem; }
.radio-card__body span { color: var(--ink-soft); line-height: 1.55; }

/* ---------- Assistant ---------- */
.assistant__form { margin-top: 0; }
.assistant__limits {
  padding: 1rem 1.25rem; margin: 0 0 2.5rem;
  background: var(--grey); border-left: 3px solid var(--blue);
  border-radius: var(--radius-sm); font-size: .88rem; color: var(--ink-soft);
}
.answer {
  padding: 1.75rem; margin-bottom: 2.5rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.answer__question { font-size: var(--step-1); color: var(--navy); margin-bottom: 1.25rem; }
.answer__body { max-width: none; }
.answer__confidence { margin: 1.25rem 0 0; font-size: .82rem; color: var(--ink-mute); }
.answer__confidence--low { color: #9c2b20; }
.answer__sources { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.answer__sources h3 { font-size: .92rem; margin-bottom: .5rem; }
.answer__sources ul { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.answer__sources li { margin-bottom: .3rem; }
.answer__type { font-size: .76rem; color: var(--ink-mute); margin-left: .4rem; }

.question-list { list-style: none; margin: 0; padding: 0; }
.question-list li {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline;
  padding: .75rem .25rem; border-bottom: 1px solid var(--line); font-size: .9rem;
}
.question-list li a { flex: 1 1 22ch; }
.question-list__state { font-size: .78rem; font-weight: 700; color: var(--ink-mute); }
.question-list time { font-size: .8rem; color: var(--ink-mute); }

/* ---------- Documentation ---------- */
.doc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.doc-list__item {
  display: flex; gap: .75rem; align-items: center;
  padding: .9rem .25rem; border-bottom: 1px solid var(--line);
}
.doc-list__item a { color: var(--navy); font-weight: 600; text-decoration: none; }
.doc-list__item a:hover { text-decoration: underline; }
.doc-page__title { font-size: var(--step-2); margin-bottom: 1.25rem; }
.doc-page__body { max-width: 75ch; margin-inline: 0; }
.doc-page__updated { margin-top: 2.5rem; font-size: .82rem; color: var(--ink-mute); }
/* Apercu d'un brouillon, vu du seul administrateur : ambre, comme la pastille
   de la liste du back-office, pour que le lien entre les deux soit immediat. */
.doc-page__draft {
  margin: 0 0 1.5rem; padding: .7rem .9rem; border-radius: var(--radius-sm);
  background: #f5e6c8; color: #6b4a08; font-size: .9rem;
}
.doc-page__draft a { color: #6b4a08; font-weight: 700; }
.admin-doc__counter { margin: 0 0 .7rem; font-size: .82rem; color: var(--ink-mute); }

/* ============================================================
   15. Back-office
   ============================================================ */

.admin-nav { background: var(--navy-deep); color: #fff; }
.admin-nav__inner {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  align-items: center; justify-content: space-between; padding: .6rem 0;
}
.admin-nav__brand {
  font-weight: 800; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green);
}
.admin-nav__list { display: flex; flex-wrap: wrap; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.admin-nav__link {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .8rem; border-radius: var(--radius-sm);
  color: rgba(255,255,255,.8); font-size: .88rem; font-weight: 600; text-decoration: none;
}
.admin-nav__link:hover { background: rgba(255,255,255,.1); color: #fff; }
.admin-nav__link.is-active { background: rgba(255,255,255,.17); color: #fff; }
.admin-nav__badge {
  display: inline-block; min-width: 1.35em; padding: .05rem .35rem;
  border-radius: 999px; background: #c0392b; color: #fff;
  font-size: .72rem; font-weight: 800; text-align: center;
}
.admin-nav__logout { color: rgba(255,255,255,.7); font-size: .84rem; text-decoration: underline; }
.admin-nav__logout:hover { color: #fff; }

.admin__title { font-size: var(--step-2); margin-bottom: .4em; }
.admin__subtitle { font-size: .9rem; color: var(--ink-mute); margin-bottom: 2rem; }

.admin-todo { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; gap: .6rem; }
.admin-todo__item a {
  display: flex; gap: 1rem; align-items: center;
  padding: 1rem 1.25rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); border-left-width: 4px;
  background: #fff; text-decoration: none; color: var(--ink);
}
.admin-todo__item a:hover { box-shadow: var(--shadow); }
.admin-todo__item--high a   { border-left-color: #c0392b; }
.admin-todo__item--medium a { border-left-color: #d98e1e; }
.admin-todo__item--low a   { border-left-color: var(--blue); }
.admin-todo__count { font-size: 1.6rem; font-weight: 800; color: var(--navy); min-width: 2ch; }
.admin-todo__label { font-size: .95rem; }

.admin-cards {
  display: grid; gap: 1.25rem; margin-bottom: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.admin-cards--compact { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.admin-card {
  padding: 1.25rem 1.4rem; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.admin-card--alert { border-color: #e8a49e; background: #fdeceb; }
.admin-card h2 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-mute); margin-bottom: .3rem;
}
.admin-card__figure { font-size: 2rem; font-weight: 800; color: var(--navy); margin: 0 0 .5rem; line-height: 1; }
.admin-card__detail { list-style: none; margin: 0 0 .75rem; padding: 0; font-size: .85rem; color: var(--ink-soft); }
.admin-card p:last-child { margin-bottom: 0; font-size: .86rem; }

.admin-tabs {
  display: flex; flex-wrap: wrap; gap: .3rem;
  margin-bottom: 1.5rem; border-bottom: 1px solid var(--line);
}
.admin-tabs__link {
  padding: .55rem 1rem; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: .88rem; font-weight: 600; color: var(--ink-soft); text-decoration: none;
  border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px;
}
.admin-tabs__link:hover { background: var(--grey); }
.admin-tabs__link.is-active { background: #fff; border-color: var(--line); color: var(--navy); }

.admin-filters {
  display: grid; gap: 1rem; align-items: end; margin-bottom: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  padding: 1.1rem 1.25rem; background: var(--grey); border-radius: var(--radius-sm);
}
.admin-filters--inline { grid-template-columns: 1fr auto; }
.admin-filters .field { margin-bottom: 0; }
.admin-filters input[type="search"], .admin-filters select {
  width: 100%; padding: .55rem .8rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font: inherit; font-size: .9rem; background: #fff;
}
.admin-filters__actions { display: flex; gap: 1rem; align-items: center; }

.admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.admin-table th, .admin-table td {
  padding: .7rem .75rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.admin-table thead th {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-mute); background: var(--grey); border-bottom: 2px solid var(--line);
  white-space: nowrap;
}
.admin-table tbody tr:hover { background: #fafcfe; }
.admin-table tbody tr.is-inactive { opacity: .6; }
.admin-table__muted { font-size: .8rem; color: var(--ink-mute); }
.admin-table__actions { white-space: nowrap; }
.admin-table__actions form { margin: 0 0 .3rem; }
.admin-table__error {
  font-family: ui-monospace, Consolas, monospace;
  font-size: .78rem; color: #9c2b20; max-width: 32ch; word-break: break-word;
}
.admin-select-mini {
  padding: .3rem .5rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: .82rem; background: #fff; max-width: 10ch;
}

.admin-deletion { margin-top: .4rem; font-size: .84rem; }
.admin-deletion summary { color: #9c2b20; cursor: pointer; }
.admin-deletion form {
  margin-top: .5rem; padding: .75rem; background: #fdeceb;
  border: 1px solid #e8a49e; border-radius: var(--radius-sm);
}
.admin-deletion__warning { margin: 0 0 .5rem; font-size: .8rem; color: #9c2b20; }
.admin-deletion label { display: block; font-size: .78rem; margin-bottom: .2rem; }
.admin-deletion input {
  width: 100%; padding: .35rem .5rem; margin-bottom: .5rem;
  border: 1px solid #e8a49e; border-radius: var(--radius-sm); font: inherit; font-size: .84rem;
}
.admin-deletion--large { margin-top: 2rem; }
.admin-deletion--large form { max-width: 34ch; }

.admin-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.admin-actions form { margin: 0; }

/* ---------- Back-office : messages ---------- */
.admin-messages { list-style: none; margin: 0; padding: 0; }
.admin-messages__item {
  padding: 1.1rem 1.35rem; margin-bottom: .9rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.admin-messages__item.is-hidden { opacity: .62; border-style: dashed; }
.admin-messages__header {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; margin-bottom: .6rem;
}
.admin-messages__topic { font-weight: 700; color: var(--navy); text-decoration: none; }
.admin-messages__topic:hover { text-decoration: underline; }
.admin-messages__meta { font-size: .82rem; color: var(--ink-mute); }
.admin-messages__chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-left: auto; }
.admin-messages__body { font-size: .89rem; color: var(--ink-soft); line-height: 1.6; }
.admin-messages__actions {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  margin-top: .75rem; padding-top: .6rem; border-top: 1px dashed var(--line);
}
.admin-messages__actions form { margin: 0; }

/* ---------- Back-office : escalades de l'assistant ---------- */
.escalation {
  padding: 1.5rem 1.75rem; margin-bottom: 2rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.escalation__header { margin-bottom: 1.25rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.escalation__question { font-size: var(--step-1); color: var(--navy); margin-bottom: .4rem; }
.escalation__meta { margin: 0; font-size: .82rem; color: var(--ink-mute); }
.escalation__block { margin-bottom: 1.5rem; }
.escalation__block h3 {
  font-size: .95rem; color: var(--navy); margin-bottom: .75rem;
  display: flex; align-items: center; gap: .6rem;
}
.escalation__block--step { padding: 1.1rem 1.25rem; background: var(--grey); border-radius: var(--radius-sm); }
.escalation__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7em; height: 1.7em; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: .82rem; font-weight: 800; flex: 0 0 auto;
}
.escalation__text { max-width: none; font-size: .92rem; }
.escalation__raw {
  width: 100%; padding: .75rem .9rem; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: ui-monospace, Consolas, monospace;
  font-size: .82rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
}
.escalation__raw-block { margin-bottom: 1rem; }
.escalation__copyable { display: grid; gap: .5rem; justify-items: start; }
.escalation__copyable textarea { width: 100%; resize: vertical; }
.escalation__state { font-size: .86rem; margin-bottom: .75rem; }
.escalation__state--validated { color: #4a6b0c; }
.escalation__state--rejected { color: #9c2b20; }
.escalation__direct { margin-top: 1rem; font-size: .88rem; }
.escalation__direct summary { color: var(--blue-dark); cursor: pointer; }
.escalation details { margin-top: .6rem; }
.escalation details summary { cursor: pointer; font-size: .84rem; color: var(--blue-dark); }

/* ---------- Inscription / essai ---------- */
.trial { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 820px) { .trial { grid-template-columns: 1fr; } }
.trial__offer { background: var(--grey); border-radius: var(--radius); padding: 1.75rem; position: sticky; top: 1.5rem; }
@media (max-width: 820px) { .trial__offer { position: static; } }
.trial__price { font-size: 1.5rem; color: var(--navy); margin: .25rem 0 1rem; }
.trial__price strong { color: var(--green-dark); }
.trial__note { font-size: .85rem; color: var(--ink-soft); margin-top: 1rem; }
.trial__caveat { font-size: .9rem; color: var(--ink); margin-top: .9rem; }
.trial__form .field { margin-bottom: 1.1rem; }
.field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .field-2 { grid-template-columns: 1fr; } }
.field__feedback { margin: .4rem 0 0; font-size: .88rem; padding: .5rem .7rem; border-radius: var(--radius-sm); }
.field__feedback--ok { background: rgba(158,217,30,.14); color: #3f6b06; }
.field__feedback--empty { background: var(--grey-2); color: var(--ink-soft); }
.trial-ok { background: rgba(158,217,30,.1); border-left: 4px solid var(--green); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.5rem 1.75rem; }
/* ---------- Back-office : inscriptions ---------- */
.admin-reg { display: grid; gap: 1rem; margin-top: 1.5rem; }
.admin-reg__card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; background: #fff; }
.admin-reg__card.is-pending { border-left: 4px solid #f5a623; background: #fffdf7; }
.admin-reg__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.admin-reg__status { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: .12rem .5rem; border-radius: 4px; }
.admin-reg__status--provider { background: var(--green); color: #14250b; }
.admin-reg__status--callback { background: #f5e6c8; color: #6b4a08; }
.admin-reg__date { font-size: .82rem; color: var(--ink-mute); }
.admin-reg__body { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 1.25rem; align-items: start; }
@media (max-width: 760px) { .admin-reg__body { grid-template-columns: minmax(0, 1fr); } .admin-reg__body > * { min-width: 0; } }
.admin-reg__meta { font-size: .84rem; color: var(--ink-soft); }
.admin-reg__alert { color: #b23b3b; font-weight: 700; }
.admin-reg__signals { list-style: none; margin: 0; padding: 0; font-size: .82rem; display: grid; gap: .25rem; }
.admin-reg__signals li::before { content: "\2022\00a0"; font-weight: 800; }
.admin-reg__signals li.yes { color: #3f6b06; }
.admin-reg__signals li.yes::before { content: "\2713\00a0"; }
.admin-reg__signals li.no { color: var(--ink-mute); }
.admin-reg__signals li.no::before { content: "\2013\00a0"; }
.admin-reg__note { margin: .8rem 0 0; padding: .6rem .8rem; background: var(--grey); border-radius: var(--radius-sm); font-size: .88rem; }
.admin-reg__actions { display: flex; flex-wrap: wrap; gap: .8rem 1.25rem; align-items: center; margin-top: 1rem; }
.admin-reg__actions .inline { display: inline; }
.admin-reg__annotate textarea { width: 100%; margin: .5rem 0; }
.is-inactive { opacity: .55; }
/* ---------- Aide publique ---------- */
.help-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .1rem; }
.help-list__item { border-bottom: 1px solid var(--line); }
.help-list__item a {
  display: block; padding: .95rem .5rem; color: var(--navy); font-weight: 600;
  text-decoration: none; border-radius: var(--radius-sm);
}
.help-list__item a:hover { background: var(--grey); color: var(--green-dark); }
.help-list__footer { margin-top: 2rem; color: var(--ink-soft); }
.help__cta { text-align: center; max-width: 62ch; margin-inline: auto; }
.help__cta p { color: var(--ink-soft); }
.help__cta-links {
  display: flex; flex-wrap: wrap; gap: 1rem 1.75rem;
  align-items: center; justify-content: center; margin-top: 1.5rem;
}
/* ---------- Back-office : documentation ---------- */
.admin-doc { display: grid; gap: 2rem; grid-template-columns: minmax(200px, 280px) 1fr; }
.admin-doc__list h2, .admin-doc__editor h2 { font-size: 1rem; margin-bottom: .9rem; }
.admin-doc__list ul { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.admin-doc__list li { padding: .55rem .6rem; border-radius: var(--radius-sm); }
.admin-doc__list li.is-active { background: var(--green-soft); }
.admin-doc__list li a { color: var(--navy); font-weight: 600; text-decoration: none; }
.admin-doc__languages { display: flex; gap: .2rem; margin-top: .25rem; }
.admin-doc__language {
  font-size: .75rem; font-weight: 800; padding: .05rem .3rem; border-radius: 3px;
  background: var(--grey-2); color: var(--ink-mute);
}
.admin-doc__language.is-ready { background: var(--green); color: #14250b; }
/* Brouillon : ambre, pour se distinguer des pastilles de langue d'un coup d'oeil. */
.admin-doc__draft {
  display: inline-block; margin-left: .35rem;
  font-size: .75rem; font-weight: 800; padding: .05rem .3rem; border-radius: 3px;
  background: #f5e6c8; color: #6b4a08; text-transform: uppercase; letter-spacing: .04em;
}
.admin-doc__editor textarea { font-family: ui-monospace, Consolas, monospace; font-size: .88rem; }

/* ---------- Fenetre modale ---------- */
.modal {
  width: min(100% - 2rem, 760px); max-height: 88vh; padding: 0;
  border: 0; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  background: #fff; color: var(--ink);
}
.modal::backdrop { background: rgba(13,47,82,.55); }
.modal__form { display: flex; flex-direction: column; max-height: 80vh; margin: 0; }
.modal__header {
  display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.modal__title { font-size: 1.05rem; margin: 0; color: var(--navy); }
.modal__close {
  background: none; border: 0; font-size: 1.6rem; line-height: 1;
  color: var(--ink-mute); cursor: pointer; padding: 0 .25rem;
  min-width: 44px; min-height: 44px;
}
.modal__close:hover { color: var(--navy); }
.modal__body { padding: 1.25rem 1.5rem; overflow-y: auto; flex: 1 1 auto; }
.modal__section {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-mute); margin: 1.5rem 0 .75rem;
  padding-top: 1rem; border-top: 1px solid var(--line);
}
.modal__footer {
  display: flex; gap: .75rem; padding: 1rem 1.5rem;
  border-top: 1px solid var(--line); background: var(--grey); flex: 0 0 auto;
}
.modal__related {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  padding: .85rem 1.5rem; border-top: 1px solid var(--line); background: var(--grey);
}
.modal__related form { margin: 0; }

@media (max-width: 900px) {
  .admin-doc { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .client-nav__inner, .admin-nav__inner { flex-direction: column; align-items: flex-start; }
  .admin-messages__chips { margin-left: 0; }
  .forum-item__aside { width: 100%; }
}

/* ---------- Entree de l'espace client ---------- */
.topbar__account { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; }
.topbar__account--logged-in { color: var(--green); }

/* L'entree existe a deux endroits, et un seul est visible a la fois.
   Le point de rupture est 640 px et non 980 px (celui du menu burger) :
   c'est a 640 px que la barre du haut masque ses liens, et les deux regles
   doivent basculer ensemble. Elles sont donc ecrites cote a cote, pour qu'on
   ne puisse pas deplacer l'une en oubliant l'autre. */
.nav__item--account { display: none; }

@media (max-width: 640px) {
  .topbar__links a:not(.languages a) { display: none; }   /* deja pose plus haut */
  .nav__item--account { display: block; }
  .nav__item--account > a { font-weight: 700; color: var(--navy); }
}

/* Mention de prevalence sur les pages legales traduites. */
.legal__prevalence {
  padding: .9rem 1.1rem; margin-bottom: 2rem;
  background: var(--grey); border-left: 3px solid var(--blue);
  border-radius: var(--radius-sm); font-size: .9rem; color: var(--ink-soft);
}

/* Consultation d'un compte client par l'équipe BeBackup (lecture seule) */
.consultation-banner {
  position: sticky; top: 0; z-index: 1000;
  padding: .6rem 1rem; text-align: center; font-size: .95rem;
  background: #8a5a11; color: #fff;
}
.consultation-banner a { color: #fff; text-decoration: underline; }

/* ---------- Petits écrans : rien ne doit élargir la page ----------
   Un tableau ne rétrécit pas sous sa largeur minimale : sans cadre défilant,
   il élargit toute la page et le mobile défile vers du vide à droite. Les
   tableaux du back-office et de l'espace client défilent donc dans leur
   propre cadre (position: relative retient aussi leurs libellés
   .visually-hidden, positionnés en absolu, qui sinon s'échappent du cadre et
   élargissent la page). Les longues chaînes sans espace (clés de licence, UUID,
   empreintes) se coupent au lieu de déborder. */
@media (max-width: 860px) {
  .admin-table {
    display: block; position: relative; min-width: 0; max-width: 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.admin-reg__card code, .admin-reg__meta code, .admin-table code { overflow-wrap: anywhere; word-break: break-word; }

/* ---------- Consigne du journal des évolutions (fiche d'une version) ---------- */
.changelog-prompt { margin: 1rem 0; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.changelog-prompt summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.changelog-prompt__text {
  display: block; width: 100%; margin: .6rem 0; padding: .6rem .8rem;
  font: .8rem/1.45 ui-monospace, Consolas, monospace; white-space: pre-wrap;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--grey); resize: vertical;
}

/* ---------- Petits écrans : lisibilité et cibles tactiles ----------
   Sur téléphone, un lien doit pouvoir se toucher du doigt sans viser : les
   liens du pied de page, les langues et le téléphone de la barre du haut
   gagnent de la hauteur. Le menu du back-office tient sur une ligne qui
   défile, au lieu d'occuper un tiers de l'écran avant le contenu. */
@media (max-width: 760px) {
  .languages a { font-size: .78rem; padding: .45rem .5rem; }
  .topbar__phone { padding: .45rem 0; }
  .footer__list li { margin-bottom: 0; }
  .footer__list a, .footer__bottom a { display: inline-block; padding: .45rem 0; }

  .admin-nav__inner { flex-wrap: nowrap; flex-direction: column; align-items: stretch; gap: .35rem; }
  .admin-nav__list {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin-inline: -.25rem; padding-bottom: .15rem;
  }
  .admin-nav__list::-webkit-scrollbar { display: none; }
  .admin-nav__link { white-space: nowrap; }
  .admin-nav__logout { display: inline-block; padding: .35rem 0; }

  .breadcrumb a { display: inline-block; padding: .4rem 0; }
  .client-nav__logout, .link-subtle { display: inline-block; padding: .45rem 0; }

  .cookie__inner { gap: .75rem; padding: .9rem 0; }
  .cookie__text { font-size: .82rem; line-height: 1.5; }
}

/* Menu mobile ouvert : le bouton « Gérer les cookies » ne masque pas ses
   derniers liens. */
body.nav-open .cookie__reopen { display: none; }

/* Le bouton « Gérer les cookies » est fixé en bas à gauche : en fin de page,
   il masquait le début de la ligne de copyright. Un peu d'espace sous le pied
   de page le laisse flotter sur du vide. */
.footer__bottom { padding-bottom: 3.25rem; }

/* Back-office, demandes : le suivi (statut, note) sous chaque carte. */
.admin-lead__form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.admin-lead__form .field { margin-bottom: .6rem; }
.admin-lead__tool { margin-top: 1rem; padding: 1rem; background: var(--grey); border-radius: var(--radius-sm); }
.admin-lead__tool .field { margin-bottom: .6rem; }
.admin-lead__access { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.admin-lead__access p { margin: 0; }

/* Champ suivi d'un suffixe fixe (nom DNS + « .hosting.bebackup.fr »). */
.input-suffix { display: flex; align-items: stretch; }
.input-suffix input { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-suffix span {
  display: flex; align-items: center; padding: 0 .75rem; white-space: nowrap;
  background: var(--grey); border: 1px solid var(--line); border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink-soft); font-size: .9rem;
}
@media (max-width: 420px) { .input-suffix { flex-wrap: wrap; } .input-suffix span { border-left: 1px solid var(--line); border-radius: var(--radius-sm); margin-top: .3rem; } }

/* ---------- Rubrique « Outils » ---------- */
.tool-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}
.tool-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 1.6rem; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.tool-card__meta {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .5rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute);
}
.tool-card__badge {
  display: inline-block; padding: .1rem .55rem; border-radius: 999px;
  background: var(--green-soft); color: #4d7a00;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.tool-card__badge--warn { background: #fff4de; color: #8a5a00; }
.tool-card__title { font-size: 1.25rem; margin: 0 0 .6rem; }
.tool-card__title a { color: inherit; text-decoration: none; }
.tool-card__title a:hover { color: var(--blue-dark); }
.tool-card__summary { color: var(--ink-soft); font-size: .95rem; flex: 1; }
.tool-card__access { font-size: .85rem; font-weight: 600; color: var(--green-dark); margin: 0 0 1rem; }

.tool-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }

.tool-shots {
  display: grid; gap: 1.25rem; align-items: start; margin-top: 2rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, .5fr);
}
.tool-shots figure { margin: 0; }
.tool-shots img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); background: #fff;
}
.tool-shots figcaption { margin-top: .5rem; font-size: .85rem; color: var(--ink-soft); text-align: center; }
@media (max-width: 860px) {
  .tool-shots { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tool-shots__phone { grid-column: 1 / -1; max-width: 220px; justify-self: center; }
}
@media (max-width: 560px) { .tool-shots { grid-template-columns: minmax(0, 1fr); } }

.tool-two-cols { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }
.tool-two-cols--form { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 860px) { .tool-two-cols--form { grid-template-columns: minmax(0, 1fr); } }
.tool-code { align-self: start; padding: 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }

.tool-compat { list-style: none; margin: 0 0 1rem; padding: 0; }
.tool-compat li { position: relative; padding-left: 1.7rem; margin-bottom: .6rem; }
.tool-compat li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.tool-compat__yes::before { content: "✓"; color: var(--green-dark); }
.tool-compat__no::before { content: "✕"; color: #c0392b; }

.tool-private { background: var(--green-soft); }
.tool-private__who {
  display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; margin-bottom: 1.5rem; background: #fff; border-radius: var(--radius-sm);
}
.tool-private__who p { margin: 0; font-weight: 600; }
.tool-private__title { font-size: 1.15rem; margin: 2rem 0 .75rem; }
.tool-files { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.tool-files__item { padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; }
.tool-files__item p { margin: 0; }
.tool-files__head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tool-files__link { font-weight: 700; }
.tool-files__meta { font-size: .85rem; color: var(--ink-soft); margin-top: .25rem !important; }
.tool-files__hash { font-size: .75rem; color: var(--ink-mute); overflow-wrap: anywhere; margin-top: .25rem !important; }
.tool-steps { padding-left: 1.4rem; margin: 0 0 1rem; }
.tool-steps li { margin-bottom: .5rem; }
.tool-steps code, .tool-private p code { overflow-wrap: anywhere; }
.tool-warning {
  padding: .75rem 1rem; border-left: 4px solid #e0a100; background: #fff8e6;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .92rem;
}
.tool-signature { margin-top: 2rem; font-weight: 600; }

/* Back-office : exécutable des outils sans signature EDII. Voyant, exprès. */
.admin-signature-warning { background: #c0392b; color: #fff; padding: .9rem 0; }
.admin-signature-warning p, .admin-signature-warning ul { margin: 0; }
.admin-signature-warning ul { padding-left: 1.2rem; margin: .4rem 0; font-size: .92rem; }
.admin-signature-warning code { background: rgba(255,255,255,.18); color: #fff; padding: 0 .3rem; border-radius: 4px; overflow-wrap: anywhere; }
.admin-signature-warning__title { font-weight: 700; font-size: 1.05rem; }
.admin-signature-warning__help { font-size: .85rem; opacity: .92; }
.tool-files__note { font-size: .85rem; color: var(--ink-soft); font-style: italic; margin-top: .25rem !important; }

/* ---------- Outil bbMbr2Gpt : téléchargement, consoles, fiche ---------- */
.tool-download { margin-top: 1.5rem; }
.tool-download__size { font-weight: 400; opacity: .85; margin-left: .25rem; }
.tool-download__meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: .75rem 0 0; font-size: .8rem; color: rgba(255,255,255,.8); }
.tool-download__hash { min-width: 0; overflow-wrap: anywhere; }
.tool-download__hash code { color: #fff; background: rgba(255,255,255,.1); padding: 0 .3rem; border-radius: 4px; }
.tool-download__soon { display: inline-block; margin: 0; padding: .7rem 1.1rem; border-radius: var(--radius-sm); background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }
.tool-download__publisher { margin: .6rem 0 0; font-size: .85rem; color: rgba(255,255,255,.75); }
.tool-hero-warning {
  margin: 1.5rem 0 0; max-width: 70ch; padding: .85rem 1.1rem;
  background: #fff8e6; color: var(--ink); border-left: 4px solid #e0a100; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .95rem;
}
.tool-article { max-width: 860px; }
.tool-article .section-title { margin-top: 2.25rem; }
.tool-article .section-title:first-child { margin-top: 0; }
.tool-console {
  margin: .75rem 0 1.25rem; padding: 1rem 1.1rem; overflow-x: auto;
  background: #0d1b2a; color: #e6edf3; border-radius: var(--radius-sm);
  font: .82rem/1.5 Consolas, "Cascadia Mono", "Courier New", monospace; white-space: pre;
}
.tool-console code { background: none; color: inherit; padding: 0; font: inherit; }
.tool-console--help { font-size: .76rem; }
.tool-conclusion { font-weight: 700; font-size: 1.05rem; }
.tool-step { font-size: 1.05rem; margin: 1.75rem 0 .4rem; }
.tool-limits { list-style: none; margin: 0; padding: 0; }
.tool-limits li { position: relative; padding-left: 1.7rem; margin-bottom: .75rem; }
.tool-limits li::before { content: "✕"; position: absolute; left: 0; top: 0; color: #c0392b; font-weight: 700; }
.tool-specs { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tool-specs th, .tool-specs td { text-align: left; vertical-align: top; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
.tool-specs th { width: 34%; color: var(--ink-soft); font-weight: 600; }
@media (max-width: 560px) { .tool-specs th, .tool-specs td { display: block; width: auto; } .tool-specs th { border-bottom: 0; padding-bottom: 0; } }

/* Captures de l'appli Irrigation Caddy : cinq écrans ; sur téléphone, une
   bande qui défile horizontalement, écran par écran. */
.app-shots {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem;
}
.app-shots__item { margin: 0; min-width: 0; }
.app-shots img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); background: #fff;
}
.app-shots__caption { display: block; margin-top: .6rem; font-size: .85rem; color: var(--ink-soft); text-align: center; }
@media (max-width: 860px) {
  .app-shots {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 58%;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .75rem;
    -webkit-overflow-scrolling: touch;
  }
  .app-shots__item { scroll-snap-align: start; }
}

/* ---------- Tickets : bugs et nouvelles fonctionnalités ---------- */
.chip--kind-bug      { background: #fdeceb; border-color: #e8a49e; color: #9c2b20; }
.chip--kind-feature  { background: #f1f0fb; border-color: #c3bfe6; color: #45409c; }
.chip--ticket-new         { background: #e8f4fb; border-color: #9ccfe8; color: #12587e; }
.chip--ticket-accepted    { background: #fdf3e3; border-color: #e8c894; color: #8a5a11; }
.chip--ticket-in_progress { background: #fdf3e3; border-color: #e0a100; color: #7a5200; }
.chip--ticket-done        { background: var(--green-soft); border-color: var(--green); color: #4a6b0c; }
.chip--ticket-rejected    { background: var(--grey-2); border-color: #c9ccc6; color: #55584f; }
.ticket-ref { color: var(--ink-mute); font-weight: 600; }
.ticket-views { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.25rem; }
.ticket-views__link {
  padding: .4rem .85rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: .88rem; font-weight: 600; color: var(--navy); text-decoration: none; background: #fff;
}
.ticket-views__link:hover { background: var(--grey); }
.ticket-views__link.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.ticket-facts { margin: .5rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.ticket-facts:empty { display: none; }
.ticket-admin { margin: 1rem 0 1.5rem; padding: 1rem 1.25rem; background: var(--grey); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ticket-admin .field { margin-bottom: .6rem; }
.ticket-admin__who { margin: 0 0 .75rem; font-size: .9rem; }