/* =========================================================
   LIRIUS — Feuille de style globale
   Esthétique risographie · Éco-conçue · Sans framework
   ========================================================= */

/* Bakbak One (titres) — seule webfont chargée */
@font-face {
  font-family: "Bakbak One";
  src: url("https://fonts.gstatic.com/s/bakbakone/v8/zOL54pXAl6RI-p_ardnu-cNkvg.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* Palette principale */
  --bleu: #67aed9;
  --rose: #ff48b0;
  --jaune: #ffe800;
  /* Palette secondaire */
  --violet: #673196;
  --orange: #ff4200;
  /* Neutres */
  --noir: #0f0f14;
  --gris-fonce: #2a2a32;
  --gris: #6b6b78;
  --gris-clair: #e8e8ec;
  --blanc: #ffffff;
  --creme: #fdfaf2;

  /* Typo */
  --titre: "Bakbak One", "Impact", "Arial Black", sans-serif;
  --corps: "Hiragino Kaku Gothic ProN", "Hiragino Sans", -apple-system,
    BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;

  /* Échelles */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --max: 1200px;
  --pad: clamp(1rem, 4vw, 2rem);
}

/* ---------- Reset minimal ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--corps);
  font-size: 17px;
  line-height: 1.6;
  color: var(--noir);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--violet); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--rose); }
button { font: inherit; cursor: pointer; }

/* ---------- Typo ---------- */
h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
.lead { font-size: 1.2rem; color: var(--gris-fonce); max-width: 60ch; }

/* Surligné jaune (signature Lirius) */
.surligne {
  background: linear-gradient(transparent 55%, var(--jaune) 55%, var(--jaune) 95%, transparent 95%);
  padding: 0 0.15em;
}

/* Effet risographie sur les très grands titres */
.riso {
  color: var(--violet);
  text-shadow:
    -4px -3px 0 var(--jaune),
    4px 0 0 var(--bleu),
    0 4px 0 var(--rose);
}

/* Citation Gensco-like (serif) */
blockquote, .citation {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  padding: 0 0 0 1.2em;
  border-left: 4px solid var(--rose);
  color: var(--gris-fonce);
}

/* ---------- Layout ---------- */
.contenu {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}
section { padding: clamp(3rem, 8vw, 6rem) 0; }
.section-titre { margin-bottom: 2.5rem; max-width: 50ch; }
.section-titre .label {
  display: inline-block;
  font-family: var(--titre);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 0.6rem;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  font-family: var(--titre);
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 3px solid var(--noir);
  border-radius: var(--r-md);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 4px 4px 0 var(--noir);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--noir); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--noir); }
.btn-primaire { background: var(--rose); color: var(--blanc); }
.btn-secondaire { background: var(--jaune); color: var(--noir); }
.btn-fantome { background: var(--blanc); color: var(--noir); }
.btn-violet { background: var(--violet); color: var(--blanc); }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--blanc);
  border-bottom: 3px solid var(--noir);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem var(--pad);
  max-width: var(--max);
  margin: 0 auto;
}
.logo {
  font-family: var(--titre);
  font-size: 1.8rem;
  text-decoration: none;
  letter-spacing: 0.02em;
  color: var(--violet);
  text-shadow:
    -2px -1.5px 0 var(--jaune),
    2px 0 0 var(--bleu),
    0 2px 0 var(--rose);
  transition: text-shadow 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.25s ease-out;
  display: inline-block;
  transform-origin: center;
}
.logo:hover {
  text-shadow:
    -4px -3px 0 var(--jaune),
    4px 0 0 var(--bleu),
    0 4px 0 var(--rose);
  transform: rotate(-1deg) scale(1.03);
}
.logo:active {
  transform: rotate(0deg) scale(0.98);
  transition-duration: 0.08s;
}

/* Entrance animation : les 3 couleurs s'écartent puis se posent (risographie qui se cale) */
@media (prefers-reduced-motion: no-preference) {
  .logo {
    animation: logo-riso-entrance 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
  }
  @keyframes logo-riso-entrance {
    0% {
      text-shadow:
        0 0 0 var(--jaune),
        0 0 0 var(--bleu),
        0 0 0 var(--rose);
      transform: scale(0.92);
      opacity: 0;
    }
    40% {
      text-shadow:
        -7px -5px 0 var(--jaune),
        7px 0 0 var(--bleu),
        0 7px 0 var(--rose);
      opacity: 1;
    }
    100% {
      text-shadow:
        -2px -1.5px 0 var(--jaune),
        2px 0 0 var(--bleu),
        0 2px 0 var(--rose);
      transform: scale(1);
    }
  }
}
.nav { display: flex; gap: 1.8rem; align-items: center; }
.nav a {
  font-family: var(--titre);
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--noir);
  position: relative;
  padding: 0.3rem 0;
}
/* Hover : violet (8:1 sur blanc et sur jaune — contraste AAA) au lieu de rose (contraste insuffisant sur jaune) */
.nav a:hover { color: var(--violet); }
.nav a:hover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 6px;
  background: var(--jaune);
  z-index: -1;
}
.nav-cta { margin-left: 0.5rem; }

.burger { display: none; background: none; border: 0; padding: 0.4rem; }
.burger span {
  display: block; width: 26px; height: 3px;
  background: var(--noir); margin: 5px 0; transition: 0.2s;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(3rem, 8vw, 6rem) 0;
  overflow: hidden;
}
.hero::before, .hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  filter: blur(0);
}
.hero::before {
  width: 380px; height: 380px;
  background: var(--jaune);
  top: -100px; right: -120px;
  mix-blend-mode: multiply;
}
.hero::after {
  width: 240px; height: 240px;
  background: var(--bleu);
  bottom: -80px; left: -60px;
  mix-blend-mode: multiply;
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1.2fr 1fr; gap: 4rem; }
}
.hero h1 .ligne { display: block; }
.hero .accroche {
  display: inline-block;
  font-family: var(--titre);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--noir);
  color: var(--jaune);
  padding: 0.4rem 0.8rem;
  margin-bottom: 1.5rem;
}
.hero .cta-groupe { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* Visuel risographie hero — SVG inline (0 image, éco-conçu) */
.riso-visuel {
  display: block;
  max-width: 280px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
/* Legacy : ancien visuel CSS (forme 1-4) si jamais utilisé ailleurs */
.riso-visuel .forme {
  position: absolute;
  border: 4px solid var(--noir);
  border-radius: var(--r-md);
}

/* ---------- Grille prestations ---------- */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.carte {
  background: var(--blanc);
  border: 3px solid var(--noir);
  border-radius: var(--r-lg);
  padding: 1.8rem;
  text-decoration: none;
  color: var(--noir);
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
}
.carte:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--noir);
  color: var(--noir);
}
.carte .picto {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  margin-bottom: 1rem;
  border-radius: var(--r-md);
}
.carte h3 { margin-bottom: 0.6rem; }
.carte p { font-size: 0.95rem; color: var(--gris-fonce); margin-bottom: 1.2rem; flex: 1; }
.carte .lien {
  font-family: var(--titre);
  font-size: 0.95rem;
  color: var(--violet);
}
.carte .lien::after { content: " →"; }

.carte-bleu .picto { background: var(--bleu); }
.carte-rose .picto { background: var(--rose); }
.carte-jaune .picto { background: var(--jaune); }
.carte-violet .picto { background: var(--violet); }
.carte-orange .picto { background: var(--orange); }

/* Cartes "pleines" (pricing cards) — fond coloré + texte assuré contrasté */
.carte.fill-rose { background: var(--rose); color: var(--blanc); }
.carte.fill-violet { background: var(--violet); color: var(--blanc); }
.carte.fill-orange { background: var(--orange); color: var(--blanc); }
.carte.fill-bleu { background: var(--bleu); color: var(--noir); }
.carte.fill-jaune { background: var(--jaune); color: var(--noir); }

.carte.fill-rose h3, .carte.fill-violet h3, .carte.fill-orange h3 { color: var(--blanc); }
.carte.fill-bleu h3, .carte.fill-jaune h3 { color: var(--noir); }

.carte.fill-rose p, .carte.fill-violet p, .carte.fill-orange p { color: var(--blanc); }
.carte.fill-bleu p, .carte.fill-jaune p { color: var(--noir); }

/* Lien interne dans cartes pleines */
.carte.fill-rose .lien, .carte.fill-violet .lien, .carte.fill-orange .lien { color: var(--jaune); }
.carte.fill-bleu .lien, .carte.fill-jaune .lien { color: var(--violet); }

/* Bullets de liste-check dans cartes pleines : couleur contrastante */
.carte.fill-rose .liste-check li::before,
.carte.fill-violet .liste-check li::before,
.carte.fill-orange .liste-check li::before { background: var(--jaune); }
.carte.fill-bleu .liste-check li::before,
.carte.fill-jaune .liste-check li::before { background: var(--violet); }

/* Hover sur cartes pleines : couleur texte préservée */
.carte.fill-rose:hover, .carte.fill-violet:hover, .carte.fill-orange:hover { color: var(--blanc); }
.carte.fill-bleu:hover, .carte.fill-jaune:hover { color: var(--noir); }

/* ---------- Section "Pour qui" ---------- */
.cibles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.cible {
  padding: 2rem;
  border-radius: var(--r-lg);
  border: 3px solid var(--noir);
  position: relative;
}
.cible-1 { background: var(--bleu); }
.cible-2 { background: var(--rose); color: var(--blanc); }
.cible-3 { background: var(--jaune); }
.cible .num {
  font-family: var(--titre);
  font-size: 3rem;
  line-height: 1;
  display: block;
  margin-bottom: 0.5rem;
}

/* ---------- Valeurs ---------- */
.valeurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.valeur {
  text-align: center;
  padding: 1.5rem 1rem;
}
.valeur .picto {
  width: 64px; height: 64px;
  margin: 0 auto 1rem;
  background: var(--jaune);
  border: 3px solid var(--noir);
  border-radius: 50%;
  display: grid; place-items: center;
}
.valeur h3 { font-size: 1.2rem; margin-bottom: 0.3rem; }
.valeur p { font-size: 0.95rem; color: var(--gris-fonce); margin: 0; }

/* ---------- Bandeau coloré ---------- */
.bandeau {
  background: var(--violet);
  color: var(--blanc);
  padding: clamp(3rem, 7vw, 5rem) 0;
  border-top: 3px solid var(--noir);
  border-bottom: 3px solid var(--noir);
  position: relative;
  overflow: hidden;
}
.bandeau::before {
  content: "";
  position: absolute;
  width: 200px; height: 200px;
  background: var(--jaune);
  border-radius: 50%;
  top: -60px; right: 10%;
  mix-blend-mode: screen;
  opacity: 0.4;
}
.bandeau .contenu { position: relative; z-index: 1; }
.bandeau h2 { color: var(--jaune); }
.bandeau .lead { color: rgba(255,255,255,0.92); }

/* ---------- Section "page de vente" (Visi'audit) ---------- */
.vente-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .vente-hero { grid-template-columns: 1.3fr 1fr; gap: 4rem; }
}
.vente-prix {
  background: var(--blanc);
  border: 3px solid var(--noir);
  border-radius: var(--r-lg);
  padding: 2rem;
  text-align: center;
  box-shadow: 8px 8px 0 var(--rose);
}
.vente-prix .montant {
  font-family: var(--titre);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--violet);
}
.vente-prix .ht { font-size: 0.9rem; color: var(--gris); display: block; margin-bottom: 0.3rem; }
.vente-prix .duree {
  display: inline-block;
  background: var(--jaune);
  padding: 0.2rem 0.6rem;
  margin-bottom: 1rem;
  font-weight: bold;
  font-size: 0.9rem;
}
.vente-prix ul { text-align: left; padding-left: 1.2em; margin: 1rem 0 1.5rem; }
.vente-prix li { margin-bottom: 0.4rem; }
.vente-prix .btn { width: 100%; justify-content: center; }

/* Liste check (puce minimaliste — petit carré rose) */
.liste-check {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}
.liste-check li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.65rem;
  line-height: 1.55;
}
.liste-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62rem;
  width: 9px;
  height: 9px;
  background: var(--rose);
}

/* Étapes (cartes numérotées) */
.etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  counter-reset: etape;
}
.etape {
  border: 3px solid var(--noir);
  border-radius: var(--r-lg);
  padding: 1.8rem 1.5rem 1.5rem;
  background: var(--blanc);
  position: relative;
  counter-increment: etape;
}
.etape::before {
  content: counter(etape);
  position: absolute;
  top: -22px; left: 1.2rem;
  width: 44px; height: 44px;
  background: var(--rose);
  color: var(--blanc);
  font-family: var(--titre);
  font-size: 1.4rem;
  display: grid; place-items: center;
  border: 3px solid var(--noir);
  border-radius: 50%;
}
.etape h3 { margin-top: 0.8rem; font-size: 1.2rem; }
.etape p { font-size: 0.95rem; color: var(--gris-fonce); margin: 0; }

/* Frise (timeline horizontale d'étapes) */
.frise {
  counter-reset: frise-etape;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
  margin: 2rem 0;
}
.frise-etape {
  position: relative;
  counter-increment: frise-etape;
  padding: 0 0 2rem 4.5rem;
}
.frise-etape::before {
  content: counter(frise-etape, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  width: 56px; height: 56px;
  background: var(--rose);
  color: var(--blanc);
  font-family: var(--titre);
  font-size: 1.2rem;
  display: grid; place-items: center;
  border: 3px solid var(--noir);
  border-radius: 50%;
  z-index: 2;
}
.frise-etape::after {
  content: "";
  position: absolute;
  left: 27px; top: 56px;
  bottom: -3px;
  width: 3px;
  background: var(--noir);
  z-index: 1;
}
.frise-etape:last-child::after { display: none; }
.frise-etape h3 {
  margin: 0.5rem 0 0.5rem;
  font-size: 1.25rem;
  font-family: var(--titre);
}
.frise-etape p { font-size: 0.95rem; color: var(--gris-fonce); margin: 0 0 0.5rem; }
.frise-etape ul { font-size: 0.95rem; color: var(--gris-fonce); margin: 0.5rem 0 0; padding-left: 1.2rem; }
.frise-etape li { margin-bottom: 0.3rem; }
.frise-etape .duree {
  display: inline-block;
  background: var(--jaune);
  padding: 0.1rem 0.5rem;
  font-size: 0.82rem;
  font-weight: bold;
  margin-bottom: 0.4rem;
}
@media (min-width: 900px) {
  .frise.horizontale {
    grid-template-columns: repeat(var(--n, 4), 1fr);
    gap: 1.5rem;
  }
  .frise.horizontale .frise-etape { padding: 5rem 0 0 0; }
  .frise.horizontale .frise-etape::before {
    left: 50%; top: 0;
    transform: translateX(-50%);
  }
  .frise.horizontale .frise-etape::after {
    left: calc(50% + 28px); top: 28px;
    bottom: auto; right: -28px; width: auto;
    height: 3px;
    background: var(--noir);
  }
  .frise.horizontale .frise-etape h3 { text-align: center; }
}

/* Bénéfices — liste enrichie */
.benefices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
}
.benefice {
  background: var(--blanc);
  border: 3px solid var(--noir);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  position: relative;
}
.benefice::before {
  content: "✓";
  position: absolute;
  top: -16px; right: -16px;
  width: 40px; height: 40px;
  background: var(--jaune);
  border: 3px solid var(--noir);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--titre);
  font-size: 1.2rem;
}
.benefice h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.benefice p { font-size: 0.95rem; color: var(--gris-fonce); margin: 0; }

/* FAQ */
.faq details {
  border: 3px solid var(--noir);
  border-radius: var(--r-md);
  margin-bottom: 0.8rem;
  background: var(--blanc);
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  padding: 1rem 1.2rem;
  font-family: var(--titre);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--titre);
  font-size: 1.6rem;
  color: var(--rose);
  flex-shrink: 0;
}
.faq details[open] summary::after { content: "−"; }
.faq details[open] summary { background: var(--jaune); }
.faq .reponse { padding: 0 1.2rem 1.2rem; }
.faq .reponse p { margin: 0; }

/* Témoignages */
.temoignages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.temoignage {
  background: var(--creme);
  border: 3px solid var(--noir);
  border-radius: var(--r-lg);
  padding: 1.8rem;
}
.temoignage .citation {
  border: 0;
  padding: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  margin-bottom: 1rem;
}
.temoignage .citation::before {
  content: "« ";
  color: var(--rose);
  font-size: 1.5rem;
}
.temoignage .citation::after { content: " »"; color: var(--rose); font-size: 1.5rem; }
.temoignage .auteur { font-weight: bold; font-size: 0.95rem; margin: 0; }
.temoignage .role { font-size: 0.85rem; color: var(--gris); margin: 0; }

/* Banner CTA final */
.cta-final {
  background: var(--jaune);
  border: 3px solid var(--noir);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 4rem);
  text-align: center;
  margin-bottom: 3rem;
}
.cta-final h2 { max-width: 22ch; margin-left: auto; margin-right: auto; }
.cta-final .cta-groupe { justify-content: center; }

/* ---------- Footer ---------- */
.footer {
  background: var(--noir);
  color: var(--gris-clair);
  padding: 3.5rem 0 2rem;
}
.footer-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.footer h4 {
  font-family: var(--titre);
  color: var(--jaune);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 0.5rem; }
.footer a {
  color: var(--gris-clair);
  text-decoration: none;
  font-size: 0.95rem;
}
.footer a:hover { color: var(--rose); }
.footer .logo {
  color: var(--blanc);
  text-shadow:
    -2px -1.5px 0 var(--jaune),
    2px 0 0 var(--bleu),
    0 2px 0 var(--rose);
}
.footer-base {
  border-top: 1px solid var(--gris-fonce);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--gris);
}

/* ---------- Fil d'Ariane ---------- */
.fil {
  font-size: 0.9rem;
  padding: 1rem 0;
  color: var(--gris);
}
.fil a { color: var(--gris-fonce); text-decoration: none; }
.fil a:hover { color: var(--rose); }
.fil span[aria-current] { color: var(--noir); font-weight: bold; }

/* ---------- Liste sous-prestations (page famille) ---------- */
.sous-prestations {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
@media (min-width: 700px) {
  .sous-prestations { grid-template-columns: repeat(2, 1fr); }
}
.sous-prestation {
  display: flex;
  gap: 1.5rem;
  padding: 1.8rem;
  border: 3px solid var(--noir);
  border-radius: var(--r-lg);
  background: var(--blanc);
  text-decoration: none;
  color: var(--noir);
  align-items: flex-start;
  transition: transform 0.15s, box-shadow 0.15s;
}
.sous-prestation:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--violet);
  color: var(--noir);
}
.sous-prestation .picto {
  flex-shrink: 0;
  width: 54px; height: 54px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--bleu);
}
.sous-prestation h3 { margin: 0 0 0.4rem; font-size: 1.3rem; }
.sous-prestation p { margin: 0 0 0.6rem; font-size: 0.95rem; color: var(--gris-fonce); }
.sous-prestation .pour-qui {
  display: inline-block;
  background: var(--jaune);
  padding: 0.15rem 0.55rem;
  font-size: 0.82rem;
  font-weight: bold;
}

/* ---------- Responsive header ---------- */
@media (max-width: 880px) {
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--blanc);
    border-bottom: 3px solid var(--noir);
    padding: 1rem var(--pad);
  }
  .nav.ouvert { display: flex; }
  .nav a { padding: 0.8rem 0; border-bottom: 1px solid var(--gris-clair); }
  .nav a:last-child { border: 0; }
  .nav-cta { margin: 0.5rem 0 0; align-self: flex-start; }
  .burger { display: block; }
}

/* ---------- Lexique (page glossaire) ---------- */
.lex-nav {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 1.5rem 0 3rem;
  padding: 1rem;
  background: var(--blanc);
  border: 3px solid var(--noir);
  border-radius: var(--r-lg);
  position: sticky;
  top: 0;
  z-index: 50;
}
.lex-search-row {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  flex-wrap: wrap;
}
.lex-search {
  flex: 1;
  min-width: 200px;
  padding: 0.7rem 1rem;
  font-family: var(--corps);
  font-size: 1rem;
  border: 2px solid var(--noir);
  border-radius: var(--r-md);
  background: var(--blanc);
}
.lex-search:focus {
  outline: none;
  border-color: var(--rose);
  box-shadow: 3px 3px 0 var(--rose);
}
.lex-count {
  font-family: var(--titre);
  font-size: 0.85rem;
  color: var(--rose);
  white-space: nowrap;
}
.lex-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.lex-no-results {
  display: none;
  text-align: center;
  padding: 2rem;
  background: var(--creme);
  border: 3px solid var(--noir);
  border-radius: var(--r-lg);
  margin: 2rem 0;
  font-style: italic;
}
.lex-no-results.visible { display: block; }
.lex-letters a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-family: var(--titre);
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--noir);
  border: 2px solid var(--noir);
  border-radius: var(--r-sm);
  background: var(--blanc);
  transition: transform 0.1s, background 0.1s, color 0.1s;
}
.lex-letters a:hover {
  background: var(--rose);
  color: var(--blanc);
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0 var(--noir);
}
.lex-letters a.disabled {
  opacity: 0.3;
  pointer-events: none;
  background: var(--gris-clair);
}
.lex-section {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 2.5rem;
  padding-top: 1rem;
  border-top: 3px solid var(--noir);
}
.lex-section .lettre {
  font-family: var(--titre);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--rose);
  text-shadow:
    -2px -1.5px 0 var(--jaune),
    2px 0 0 var(--bleu);
}
.lex-section dl { margin: 0; }
.lex-section dt {
  font-family: var(--titre);
  font-size: 1.15rem;
  color: var(--violet);
  margin-top: 1.2rem;
  margin-bottom: 0.3rem;
}
.lex-section dt:first-of-type { margin-top: 0; }
.lex-section dt .cat {
  display: inline-block;
  font-family: var(--corps);
  font-size: 0.75rem;
  font-weight: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--jaune);
  color: var(--noir);
  padding: 0.15rem 0.5rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.lex-section dd {
  margin: 0 0 0.6rem 0;
  font-size: 0.96rem;
  color: var(--gris-fonce);
  line-height: 1.6;
}
.lex-section dd a {
  font-family: var(--titre);
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--rose);
}
.lex-section dd a:hover { color: var(--violet); }
@media (max-width: 600px) {
  .lex-section { grid-template-columns: 1fr; gap: 0.5rem; }
  .lex-section .lettre { font-size: 2.5rem; }
}

/* ---------- Blog (index + article) ---------- */
.blog-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.8rem;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 3px solid var(--noir);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--noir);
  transition: transform 0.15s, box-shadow 0.15s;
}
.blog-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--noir);
  color: var(--noir);
}
.blog-card .vignette {
  aspect-ratio: 16 / 9;
  background: var(--bleu);
  border-bottom: 3px solid var(--noir);
  display: grid;
  place-items: center;
  font-family: var(--titre);
  font-size: 1.4rem;
  color: var(--violet);
  text-shadow: -1.5px -1px 0 var(--jaune), 1.5px 0 0 var(--rose);
}
.blog-card.cat-seo .vignette { background: var(--bleu); }
.blog-card.cat-ia .vignette { background: var(--violet); color: var(--jaune); text-shadow: -1.5px -1px 0 var(--rose), 1.5px 0 0 var(--bleu); }
.blog-card.cat-tech .vignette { background: var(--orange); color: var(--blanc); text-shadow: -1.5px -1px 0 var(--noir); }
.blog-card.cat-marketing .vignette { background: var(--rose); color: var(--jaune); text-shadow: -1.5px -1px 0 var(--violet); }
.blog-card.cat-conseil .vignette { background: var(--jaune); color: var(--violet); text-shadow: -1.5px -1px 0 var(--bleu); }
.blog-card-corps {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.blog-card-meta {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--gris);
  margin-bottom: 0.6rem;
}
.blog-card-meta .cat {
  background: var(--jaune);
  color: var(--noir);
  padding: 0.15rem 0.55rem;
  font-family: var(--titre);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}
.blog-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
.blog-card p {
  font-size: 0.95rem;
  color: var(--gris-fonce);
  margin-bottom: 1rem;
  flex: 1;
}
.blog-card .lien {
  font-family: var(--titre);
  color: var(--rose);
}
.blog-card .lien::after { content: " →"; }

/* Filtres catégories (chips) */
.blog-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 2.5rem;
}
.blog-filtres a {
  font-family: var(--titre);
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--noir);
  background: var(--blanc);
  border: 2px solid var(--noir);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
}
.blog-filtres a:hover { background: var(--rose); color: var(--blanc); }
.blog-filtres a.actif { background: var(--noir); color: var(--blanc); }

/* Article (corps) */
.article-corps {
  max-width: 70ch;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.7;
}
.article-corps h2 { margin-top: 2.5rem; margin-bottom: 0.8rem; font-size: 1.8rem; }
.article-corps h3 { margin-top: 1.8rem; margin-bottom: 0.6rem; font-size: 1.3rem; color: var(--violet); }
.article-corps p { margin-bottom: 1em; }
.article-corps ul, .article-corps ol { margin: 1em 0 1.2em 1.5em; }
.article-corps li { margin-bottom: 0.4em; }
.article-corps blockquote {
  border-left: 4px solid var(--rose);
  margin: 1.5em 0;
  padding: 0.5em 0 0.5em 1.2em;
  font-style: italic;
  font-family: var(--serif);
  font-size: 1.15rem;
  background: var(--creme);
}
.article-corps code {
  background: var(--gris-clair);
  padding: 0.1em 0.4em;
  border-radius: var(--r-sm);
  font-size: 0.9em;
}
.article-corps img { border: 3px solid var(--noir); border-radius: var(--r-lg); margin: 1.5em 0; }
.article-corps a { color: var(--violet); text-underline-offset: 3px; }
.article-corps a:hover { color: var(--rose); }

/* Sommaire (TOC) */
.article-toc {
  background: var(--creme);
  border: 3px solid var(--noir);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  margin: 2rem 0;
}
.article-toc h2 { font-size: 1.1rem; margin-top: 0; margin-bottom: 0.8rem; }
.article-toc ol {
  margin: 0;
  padding-left: 1.4em;
  list-style: decimal;
}
.article-toc li { margin-bottom: 0.3em; font-size: 0.95rem; }
.article-toc a { color: var(--noir); text-decoration: none; }
.article-toc a:hover { color: var(--rose); text-decoration: underline; }

/* Méta article (date, auteur, temps de lecture) */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: var(--gris);
  font-family: var(--titre);
}
.article-meta .cat {
  background: var(--jaune);
  color: var(--noir);
  padding: 0.2rem 0.7rem;
  font-size: 0.85rem;
}
.article-meta time { color: var(--gris-fonce); }
.article-auteur {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: var(--creme);
  border: 3px solid var(--noir);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  margin: 3rem 0;
}
.article-auteur .avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--rose);
  display: grid;
  place-items: center;
  color: var(--blanc);
  font-family: var(--titre);
  font-size: 1.4rem;
  flex-shrink: 0;
}
.article-auteur .nom { font-family: var(--titre); font-size: 1.1rem; margin-bottom: 0.2rem; }
.article-auteur .bio { font-size: 0.9rem; color: var(--gris-fonce); margin: 0; }

/* ---------- Accessibilité ---------- */
:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}