/*
Theme Name: Code-Vanilla
Text Domain: code-vanilla
Version: 1.0.0
*/

html,body{margin:0;padding:0;font-weight: 500;}

/* ===== Vanilla theme palette ===== */
:root{
  --bg1:#FFF7E6;          /* crème vanille haut */
  --bg2:#FFFDF7;          /* crème très clair bas */
  --text:#1f2937;         /* slate foncé lisible */
  --muted:#6b7280;        /* gris doux */
  --brand:#F59E0B;        /* miel / vanilla */
  --brand-2:#10B981;      /* menthe fraîche */
  --card:#FFFFFF;
  --ring:rgba(245,158,11,.25);
}


/* Fond global : crème + petites lueurs chaleureuses, compatible bulles */
body{
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;
  color: var(--text);
  /* lueurs chaudes très subtiles + gradient crème */
  background:
    radial-gradient(1200px 800px at 90% -10%, rgba(245,158,11,.08), transparent 60%),
    radial-gradient(900px 700px at -5% 30%, rgba(236,72,153,.06), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
	  margin: 0;                    /* sécurité */
  min-height: 100dvh;           /* plein viewport, OK mobile */
  display: flex;
  flex-direction: column;       /* empile header, #content, footer */
}


/* Global (ou préfixe avec body.page-template-changelog si tu veux limiter à cette page) */
.cv-logo{
  width: 64px;
  height: auto;      /* conserve le ratio */
  aspect-ratio: auto;/* annule un éventuel aspect-ratio:1/1 existant */
  display: block;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
@media (max-width: 560px){
  .cv-logo{ width: 56px; } /* optionnel, un poil plus compact sur petit écran */
}

/* === Brand identity ===================================================== */
:root{
  --brand-font: 'Panchang', system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
}

/* Conteneur texte à côté du logo */
.brand-text{
  display: grid;
  align-content: center;
  min-width: 0;
}

/* Titre de marque : typographie display + grande taille responsive */
.cv-title{
  font-family: var(--brand-font);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -0.02em;
  /* Taille responsive : ajuste la borne haute si tu veux + grand */
  font-size: clamp(28px, 5.2vw, 56px);
  white-space: nowrap;          /* évite la coupure sur desktop */
  overflow-wrap: anywhere;
}

/* Mobile : autoriser le retour à la ligne pour éviter un overflow */
@media (max-width: 560px){
  .cv-title{ white-space: normal; }
}


.brand-pill{
  padding:10px 16px;
  border-radius:999px;
}


/* Assure que ton contenu passe au-dessus des bulles */
.cv-wrap, .cv-header, .hero, .section, .footer{
  position: relative;
  z-index: 1;
}

/* Header en 3 colonnes : brand | nav | langue (droite) 
.cv-header{
  display:grid;
  margin-top: 30px;
  grid-template-columns: 1fr auto auto; /* brand prend l'espace, nav puis langue 
  align-items:center;
  gap:16px; 
} */

.cv-brand{display:flex;align-items:center}

.cv-brand-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.cv-logo{ transition: transform .15s ease; }
.cv-brand-link:hover .cv-logo{ transform: translateY(-1px); }

.cv-wrap{margin:0 auto;padding:10px}

/* ===== Container global (cv-wrap) — centré, gouttières, overflow safe ===== */
.cv-wrap{
  --gutter: clamp(14px, 5vw, 5px);
  width: min(1200px, 100% - var(--gutter)*2); /* largeur fluide + marges internes */
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
  overflow-x: clip; /* évite les scroll horizontaux causés par des halos/pseudos */
}
@supports not (overflow: clip){
  .cv-wrap{ overflow-x: hidden; } /* fallback anciens navigateurs */
}
@media (max-width:640px){
  .cv-wrap{ --gutter: 12px; }     /* gouttières un poil plus serrées sur mobile */
}

/* Empêche les enfants grid/flex de “déborder” le conteneur */
.cv-wrap > *{ min-width: 0; }
.hero, .profit-split__grid, .f-grid, .faq-grid{ min-width: 0; }

/* Images/SVG always safe */
img, video, svg{ max-width: 100%; height: auto; }

/* ===== Nettoyage de tes media queries (évite les doublons) ===== */
@media (max-width:1024px){
  .hero{ grid-template-columns: 1fr; }
  .features, .plans{ grid-template-columns: repeat(2,1fr); }
  .quotes{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:640px){
  .features, .plans, .quotes, .faq{ grid-template-columns: 1fr; }
  /* inutile de répéter .cv-wrap{padding:10px} : géré via --gutter ci-dessus */
}




/* Nav plus arrondi pour matcher la capsule */
.cv-nav {
  display:flex;
  align-items:center;
  gap: 6px;
}

/* liens par défaut */
.cv-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  padding:8px 12px;
  border-radius:999px;
  transition:.25s;
}

.cv-nav a:hover {
  background:#eef6ff;
  border-color:#c3e2ff;
  color:#0f172a;
}

/* lien Support mis en avant */
.cv-nav a.support-link {
  background: linear-gradient(135deg, #60a5fa, #22c55e);
  color: #fff;
  font-weight:600;
  box-shadow:0 4px 12px rgba(96,165,250,.25);
}

.cv-nav a.support-link:hover {
  opacity:.9;
}

.brand-text {
  line-height: 1.1;
  font-family: 'DM Sans', sans-serif; /* police arrondie */
}

.brand-text .sub {
  margin-top: 4px;
  font-size: 14px;
  color: #3b82f6;
  font-weight: 600;
  letter-spacing: .2px;
}

.site-content{                  /* c'est ton <div id="content"> ouvert dans header.php */
  flex: 1 0 auto;               /* prend tout l'espace restant */
  display: flex;
  flex-direction: column;
}
.footer{ flex-shrink: 0; }      /* le footer ne rétrécit pas */
    /* Header */
    .cv-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0}
    .cv-brand{display:flex;align-items:center;gap:10px}
    .cv-nav a:hover{color:var(--text)}

/* = Blog
--------------------------------------------- */
.cv-blog-hero {
  padding: clamp(2.5rem, 6vw, 5rem) 0 1rem;
  background: linear-gradient(180deg, rgba(0,0,0,.04), transparent 60%);
}
.cv-blog-hero__inner { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.cv-blog-hero__title { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin: 0 0 .75rem; }
.cv-blog-hero__intro { color: #444; font-size: 1.05rem; }

/* = Blog Hero (compact)
--------------------------------------------- */
.cv-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(1rem, 2vw, 1.5rem); /* beaucoup moins haut */
  overflow: hidden;
  background: transparent;
}


.cv-hero__inner {
  max-width: 900px; /* un peu plus étroit */
  margin: 0 auto;
  padding: 0 1rem;
}
.cv-hero__title {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem); /* moins massif */
  margin: 0 0 .4rem;
  line-height: 1.2;
}
.cv-hero__intro {
  font-size: .95rem;
  color: var(--muted);
  max-width: 60ch;
  margin-bottom: .75rem;
}
.cv-hero__cta {
  display: flex;
  gap: .5rem;
  margin-top: .5rem;
}


.cv-hero__intro {
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  max-width: 70ch;
}

/* Boutons */
.cv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1rem;
  border-radius: 12px;
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease, border-color .2s ease;
}
.cv-btn--primary {
  background: var(--brand);
  color: #111;
  box-shadow: 0 2px 0 rgba(0,0,0,.06), 0 8px 20px rgba(245,158,11,.25);
}
.cv-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 rgba(0,0,0,.06), 0 12px 28px rgba(245,158,11,.3);
}
.cv-btn--soft {
  background: rgba(0,0,0,.04);
  color: var(--text);
}

.cv-posts-grid {
  --gap: clamp(1rem, 2.5vw, 1.5rem);
  max-width: 1100px;
  margin: 1.5rem auto 0;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
.cv-card {
  grid-column: span 12;
  background: #fff;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
@media (min-width: 640px){ .cv-card { grid-column: span 6; } }
@media (min-width: 1024px){ .cv-card { grid-column: span 4; } }

.cv-card__thumb { position: relative; display: block; aspect-ratio: 16/9; background: #f4f4f4; overflow: hidden; }
.cv-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-card__placeholder { width: 100%; height: 100%; display: grid; place-items: center; color:#888; font-size:.95rem; }

.cv-card__badge {
  position: absolute; top: .75rem; left: .75rem;
  background: #111; color: #fff; font-size: .75rem;
  padding: .35rem .5rem; border-radius: 999px; letter-spacing: .02em;
}

.cv-card__body { padding: 1rem 1rem .25rem; }
.cv-card__cats { margin-bottom: .4rem; }
.cv-card__catlist { list-style:none; margin:0; padding:0; display:flex; gap:.5rem; flex-wrap:wrap; }
.cv-card__catlist a { display:inline-block; font-size:.75rem; background:#f2f2f2; padding:.25rem .5rem; border-radius:999px; color:#333; text-decoration:none; }
.cv-card__catlist a:hover { background:#e9e9e9; }

.cv-card__title { font-size: clamp(1.05rem, 2.2vw, 1.25rem); margin: .1rem 0 .4rem; line-height:1.25; }
.cv-card__title a { text-decoration:none; color:inherit; }
.cv-card__title a:hover { text-decoration:underline; }

.cv-card__meta { color:#666; font-size:.9rem; display:flex; align-items:center; gap:.5rem; }
.cv-card__dot { opacity:.6; }

.cv-card__excerpt { margin-top:.6rem; color:#444; }

.cv-card__footer {
  display:flex; align-items:center; justify-content:space-between;
  padding: .75rem 1rem 1rem;
}
.cv-card__more { text-decoration:none; font-weight:600; }
.cv-card__more:hover { text-decoration:underline; }
.cv-card__author { display:flex; align-items:center; gap:.5rem; color:#333; }
.cv-card__author img { border-radius:50%; }

.cv-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.06); }

.cv-pagination { max-width:1100px; margin: 2rem auto 3rem; padding: 0 1rem; }
.cv-empty { max-width: 1100px; margin: 2rem auto; padding: 0 1rem; color:#666; }

/* = Ambient Blog Background
   ---------------------------------------------------------------- */
/* Ambient Blog plein écran */
#cv-blog-ambient{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* le contenu passe au-dessus */
header, main, footer, .cv-wrap, .site { position: relative; z-index: 1; }

/* Parent = montée verticale via transform, sway via LEFT (comme tes bulles) */
/* parent = montée verticale, sway via left */
#cv-blog-ambient .chip,
#cv-blog-ambient .sheet,
#cv-blog-ambient .quote{
  position:absolute;
  bottom:0;
  display:inline-block;
  will-change: transform, left;
  transform: translate3d(0, var(--riseFrom, 105vh), 0); /* démarre sous l’écran */
  left: var(--x, 50vw);
  animation:
    blogTags-rise var(--dur, 24s) linear infinite,
    blogTags-sway 7s ease-in-out infinite;
}

/* Enfant = rotation douce (aucun conflit) */
#cv-blog-ambient .chip > .m,
#cv-blog-ambient .quote > .m{
  display:block;
  transform: rotate(var(--rot, 0deg));
}
#cv-blog-ambient .sheet{ position: relative; }
#cv-blog-ambient .sheet > .m{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; color:#374151; opacity:.75;
}

/* CHIP (tag) */
#cv-blog-ambient .chip{
  padding:.35rem .75rem;
  border-radius:999px;
  font-size:12px; font-weight:600; line-height:1;
  color:#1f2937;
  background:var(--chipBg,#FCEFD8);
  border:1px solid rgba(0,0,0,.06);
  white-space:nowrap;  /* jamais sur deux lignes */
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
#cv-blog-ambient .sheet{
  width:var(--w,120px); height:var(--h,72px);
  border-radius:12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.6)),
    var(--paperTint, rgba(253,200,133,.10));
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  backdrop-filter: blur(1px);
}

#cv-blog-ambient .sheet::after{
  content:""; position:absolute; inset:10px;
  background: repeating-linear-gradient(180deg,
              rgba(0,0,0,.06), rgba(0,0,0,.06) 1px,
              transparent 1px, transparent 7px);
  border-radius:10px; pointer-events:none;
}

#cv-blog-ambient .quote{
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  font-size: var(--fs,40px);
  color: var(--quoteColor, rgba(31,41,55,.14));
}

/* montée SANS fade (elle peut dépasser l’écran) */
@keyframes blogTags-rise{
  from { transform: translate3d(0, var(--riseFrom, 105vh), 0); }
  to   { transform: translate3d(0, var(--riseTo,   -120vh), 0); } /* dépasse le haut */
}

/* dérive latérale (comme les bulles) */
@keyframes blogTags-sway{
  0%,100% { left: calc(var(--x, 50vw) - 1vw); }
  50%     { left: calc(var(--x, 50vw) + 1vw); }
}

/* Fade très tardif (reste visible jusqu'à ~98%) */
@keyframes blogTags-fade{
  0%, 96% { opacity: .95; }
  100%    { opacity: 0; }
}

/* Footer */
.footer{
  background:
    radial-gradient(1000px 600px at 90% -10%, rgba(245,158,11,.06), transparent 60%),
    radial-gradient(900px 520px at 0% 40%, rgba(16,185,129,.06), transparent 60%),
    linear-gradient(180deg, var(--bg2), var(--bg1));
  border-top: 1px solid rgba(0,0,0,.06);
  color: var(--text);
}
.footer__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1rem;
  display: flex;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  font-size: .95rem;
}
.footer__totop{
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.08);
  padding: .45rem .75rem;
  border-radius: 10px;
  background: rgba(0,0,0,.04);
  color: var(--text);
  transition: transform .15s ease, background .2s ease;
}
.footer__totop:hover{ transform: translateY(-1px); background: rgba(0,0,0,.06); }
@media (max-width:640px){
  .footer__inner{ flex-direction: column; align-items: flex-start; }
}

/* Documentation */

.doc-section {
  margin-bottom: 40px;
}

.doc-section-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #1c3a57;
}

.doc-subtitle {
  font-size: 20px;
  font-weight: 600;
  margin: 25px 0 15px;
  color: #333;
}

.doc-section-body p {
  margin-bottom: 15px;
  line-height: 1.6;
}



/* ====== Code-Vanilla — Changelog (Satoshi + unified look & feel) ====== */
  :root{
    --van-bg1:#FFF7E6; --van-bg2:#FFFDF7;
    --van-text:#1f2937; --van-muted:#6b7280;
    --van-border:#FDEFD3; --van-card:#FFFCF6;
    --van-coral:#FFBFA7; --van-mint:#77e0b5; --van-sky:#A7D8FF; --van-plum:#D7A2D6;
    --van-ring:rgba(245,158,11,.20);
    --van-soft:#FFF5E6;
  }



/* et on précise Satoshi sur les filtres (au cas où certaines UA n'héritent pas) */
.cv-filter-btn{
  font-family: var(--cv-font) !important;
  font-weight: 700;
  letter-spacing: .2px;
  -webkit-appearance: none;
  appearance: none;
}


  /* header */
  .cv-head{ text-align:center; margin-bottom: 24px; }
  .cv-head h1{ margin:0 0 6px; font-size: clamp(30px, 4.2vw, 42px); letter-spacing:.2px; }
  .cv-head p{ margin:0; color:var(--van-muted); font-size: 15px; }

  /* filtre (sticky + segmented) */
  .cv-chg-filter{
    position: sticky; top: 0; z-index: 2;
    display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
    margin: 16px 0 24px; padding: 8px;
    background: linear-gradient(180deg, #fffdf7f2, #fff6e9ea);
    border:1px solid var(--van-border); border-radius: 999px;
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 24px var(--van-ring);
  }
  .cv-filter-btn{
    appearance:none; border:1px solid transparent; background:transparent;
    padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:700; font-size:13px;
    color:#374151; transition:.2s transform, .2s background-color, .2s box-shadow;
  }
  .cv-filter-btn:hover{ background:#FFF1E0; box-shadow:0 4px 10px rgba(245,158,11,.15); }
  .cv-filter-btn.is-active{ background: linear-gradient(135deg, #F59E0B, #F97316); color:#3b2000; }
  .cv-filter-btn:focus-visible{
    outline:none; box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(245,158,11,.55);
  }

  /* timeline + cartes */
  .cv-tl{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
  .cv-entry.is-collapsed{ display:none; }

  .cv-card{
    background:var(--van-card); border:1px solid var(--van-border);
    border-radius:22px; padding:18px; box-shadow:0 14px 36px var(--van-ring);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .cv-card:hover{
    transform: translateY(-2px);
    border-color:#F9D7A6;
    box-shadow:0 20px 54px rgba(245,158,11,.26);
  }

  .cv-card-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px; }
  .cv-card h2{ margin:0; font-size:20px; }
  .cv-meta{ opacity:.65; font-weight:600; margin-right:6px; }
  .cv-badge{
    background:var(--van-coral); color:#4a2c2c; padding:4px 8px;
    border-radius:999px; font-size:12px; margin-left:8px; font-weight:800;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.05);
  }
  .cv-date{ margin:0; opacity:.85; font-weight:600; }

  .cv-items{ list-style:none; margin:12px 0 4px; padding:0; display:grid; gap:8px; }
  .cv-it{ display:grid; grid-template-columns:16px 1fr; gap:8px; align-items:start; }
  .cv-it.is-hidden{ display:none; }
  .cv-text{ line-height:1.55; }
  .cv-it .screen-reader-text{ position:absolute; left:-9999px; }
  .cv-dot{ width:10px; height:10px; border-radius:50%; margin-top:6px; box-shadow:0 0 0 3px #fff; }

  /* types */
  .cv-type-added    .cv-dot{ background:var(--van-mint); }
  .cv-type-changed  .cv-dot{ background:var(--van-coral); }
  .cv-type-fixed    .cv-dot{ background:var(--van-sky); }
  .cv-type-security .cv-dot{ background:var(--van-plum); }

  .cv-foot{ display:flex; justify-content:flex-end; }
  .cv-top{
    font-size:14px; text-decoration:none; padding:6px 10px; border-radius:12px;
    background:var(--van-soft); border:1px solid var(--van-border); font-weight:700;
  }
  .cv-top:hover{ background:#FFE9C7; }

  .cv-empty-note{ margin:8px 0 0; font-style:italic; opacity:.8; }
  .cv-empty{ opacity:.8; font-style:italic; }

  /* responsive */
  @media (max-width:640px){
    .cv-head h1{ font-size:32px; }
    .cv-card{ border-radius:20px; }
  }

  /* light/dark auto (optionnel) */
  @media (prefers-color-scheme: dark){
    :root{
      --van-bg1:#0b1020; --van-bg2:#0d1126;
      --van-text:#e5e7eb; --van-muted:#9aa3b2;
      --van-card:#121936; --van-border:#1f2a4d; --van-ring:rgba(99,102,241,.25);
      --van-soft:#121a30;
    }
    .cv-card:hover{ border-color:#2a3a70; }
    .cv-top{ background:#0f172a; border-color:#1f2a4d; }
  }

  /* print utile */
  @media print{
    .cv-chg-filter{ display:none !important; }
    .cv-card{ box-shadow:none; background:#fff; border-color:#eee; }
  }
  
  /* ===== Timeline verticale (centrale, cartes alternées) =================== */
.cv-tl{
  position: relative;
  display: block;         /* on sort du grid simple */
  margin: 26px 0 0;
  padding: 0 0 26px;
}

/* ligne centrale */
.cv-tl::before{
  content:"";
  position:absolute; inset: 0 50% 0 auto;   /* au centre */
  width: 2px;
  background:
    linear-gradient(180deg,
      rgba(245,158,11,.0) 0%,
      rgba(245,158,11,.25) 8%,
      rgba(245,158,11,.25) 92%,
      rgba(245,158,11,.0) 100%);
  transform: translateX(-1px);
}

/* chaque entrée : point sur la ligne centrale */
.cv-entry{
  margin: 28px 0;
  list-style: none;
}
.cv-entry::before{
  content:"";
  position:absolute; margin-top: 28px; left: 50%;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff 0%, #ffe7c2 55%, #f59e0b 100%);
  box-shadow:
    0 0 0 4px #fff,                /* halo blanc pour détacher */
    0 8px 22px rgba(245,158,11,.40);/* glow chaud */
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* carte = largeur moitié - gouttière; alternance gauche/droite */
.cv-entry .cv-card{
  width: calc(50% - 32px);
}

/* pair = carte à gauche */
.cv-entry:nth-child(even) .cv-card{
  margin-right: auto;
  /* petite flèche vers la ligne */
  position: relative;
}
.cv-entry:nth-child(even) .cv-card::after{
  content:"";
  position:absolute; top: 22px; right: -7px;
  width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--van-card);
  border-right: 1px solid var(--van-border);
  border-top:   1px solid var(--van-border);
  box-shadow:  8px -8px 18px rgba(0,0,0,.04); /* ombre cohérente */
}

/* impair = carte à droite */
.cv-entry:nth-child(odd) .cv-card{
  margin-left: auto;
  position: relative;
}
.cv-entry:nth-child(odd) .cv-card::after{
  content:"";
  position:absolute; top: 22px; left: -7px;
  width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--van-card);
  border-left:  1px solid var(--van-border);
  border-bottom:1px solid var(--van-border);
  box-shadow: -8px 8px 18px rgba(0,0,0,.04);
}

/* adoucit l’hover et renforce la hiérarchie */
.cv-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.cv-card:hover{
  transform: translateY(-3px);
}

/* quand un filtre masque tous les items d’une entrée */
.cv-entry.is-collapsed{ display:none; }



.cv-date{ letter-spacing:.2px; text-transform:none; font-variant-numeric: tabular-nums; }

/* ===== Responsiveness & polish ========================================== */
:root{ --sticky-top: 0px; --cv-font: 'Satoshi', system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif; }

/* Barre d’admin WordPress (desktop=46px, mobile=32px) */
body.admin-bar{ --sticky-top: 46px; }
@media (max-width: 782px){ body.admin-bar{ --sticky-top: 32px; } }

/* Conteneur plus souple */
.cv-wrap{
  padding: clamp(24px, 5vw, 48px) clamp(16px, 4vw, 24px);
}

/* Titres & textes en clamp */
.cv-head h1{ font-size: clamp(28px, 5vw, 42px); }
.cv-head p{ font-size: clamp(14px, 1.6vw, 15px); }

/* Filtre collant + lisible */
.cv-chg-filter{
  top: calc(var(--sticky-top) + env(safe-area-inset-top, 0px));
  padding: 8px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Micro-taille & confort tap */
.cv-filter-btn{
  font-family: var(--cv-font) !important;
  font-weight: 700;
  letter-spacing: .2px;
  padding: 10px 14px;
  font-size: 13px;
}

/* Sur très petit écran : défilement horizontal au lieu de wrap */
@media (max-width: 480px){
  .cv-chg-filter{
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .cv-filter-btn{ flex: 0 0 auto; }
}

/* Cartes + typographie adaptatives */
.cv-card{
  padding: clamp(14px, 2.4vw, 18px);
  border-radius: clamp(18px, 2.6vw, 22px);
}
.cv-card h2{ font-size: clamp(17px, 1.8vw, 20px); }
.cv-date{ font-size: clamp(13px, 1.5vw, 14px); }

/* Items : toujours à l’aise */
.cv-items{ gap: clamp(6px, 1.2vw, 8px); }
.cv-it{ grid-template-columns: 16px 1fr; }
.cv-text{
  line-height: 1.6;
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* ===== Responsive fixes (drop-in) ======================================= */
/* 1) Conteneur fluide + paddings adaptatifs */

.cv-wrap{
  position: relative;
  margin: 0 auto;
  padding: 48px 20px;
}



/* gauche / droite */
.cv-wrap::before{ left: 0; }
.cv-wrap::after { right: 0; }

/* léger ajustement mobile */
@media (max-width: 860px){
  .cv-wrap{ padding-inline: 18px; }
  .cv-wrap::before, .cv-wrap::after{ top: 10px; bottom: 10px; }
}


/* 2) Filtre toujours utilisable sur petit écran (scroll horizontal) */
@media (max-width: 480px){
  .cv-chg-filter{
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .cv-filter-btn{ flex: 0 0 auto; }
}

/* 3) Typo & paddings en clamp => lisible partout */
.cv-head h1{ font-size: clamp(28px, 5vw, 42px); }
.cv-head p{ font-size: clamp(14px, 1.6vw, 15px); }
.cv-card{
  padding: clamp(14px, 2.4vw, 18px);
  border-radius: clamp(18px, 2.6vw, 22px);
}
.cv-card h2{ font-size: clamp(17px, 1.8vw, 20px); }
.cv-date{ font-size: clamp(13px, 1.5vw, 14px); }
.cv-items{ gap: clamp(6px, 1.2vw, 8px); }

/* 4) Jamais de débordement (mots/URLs très longs) */
.cv-card, .cv-head, .cv-date, .cv-text{ overflow-wrap:anywhere; hyphens:auto; }

/* 5) Timeline : alternance sur desktop, 1 colonne dès ≤1024px */
@media (max-width: 1024px){
  .cv-tl::before{ left: 22px; right: auto; transform:none; }   /* ligne à gauche */
  .cv-entry::before{ left: 22px; transform: translate(-50%, -50%); }
  .cv-entry .cv-card{
    width: 100%;
    margin: 0 0 0 42px;                                        /* place pour la ligne + dot */
  }
  .cv-entry .cv-card::after{ display:none; }                   /* flèches inutiles en 1 colonne */
}

/* 6) Admin bar WP : évite que le sticky filtre passe dessous */
:root{ --sticky-top: 0px; }
body.admin-bar{ --sticky-top: 46px; }          /* desktop */
@media (max-width: 782px){ body.admin-bar{ --sticky-top: 32px; } } /* mobile */
.cv-chg-filter{
  top: calc(var(--sticky-top) + env(safe-area-inset-top, 0px));
}

/* 7) Micro-ajustements mobile */
@media (max-width: 640px){
  .cv-filter-btn{ padding: 9px 12px; }
  .cv-card{ border-radius: 20px; }
}
/* Toujours utile pour éviter les surprises de largeur */
*, *::before, *::after { box-sizing: border-box; }

/* 1 colonne : pas de débordement horizontal */
@media (max-width: 1024px){
  /* on réserve l'espace (ligne + dot) au niveau de la liste */
  .cv-tl{
    padding-left: 42px;               /* place pour la ligne */
  }
  /* on repositionne la ligne et le dot par rapport au nouveau padding */
  .cv-tl::before{ left: 21px; right: auto; transform: none; }
  .cv-entry::before{ left: 21px; transform: translate(-50%, -50%); }

  /* les cartes reprennent toute la largeur dispo, sans marge qui fait déborder */
  .cv-entry .cv-card{
    width: 100%;
    margin: 0;                         /* ← supprime le margin-left:42px */
  }

  /* les petites flèches restent masquées en 1 colonne */
  .cv-entry .cv-card::after{ display: none; }
}


/* ===== Ambient background (chips lumineuses) ============================= */
.cv-ambient{
  position: fixed;
  inset: 0;
  z-index: 0;               /* derrière le contenu */
  pointer-events: none;
  overflow: hidden;
}

/* Une “chip” = capsule douce en dégradé, très légère */
.cv-chip{
  position: absolute;
  border-radius: 999px;
  /* gradient doux + léger “verre” */
  background:
    linear-gradient(135deg, var(--c1, rgba(245,158,11,.20)), var(--c2, rgba(59,130,246,.18)));
  box-shadow:
    0 10px 28px rgba(0,0,0,.06),
    inset 0 0 1px rgba(255,255,255,.35);
  opacity: .28;            /* subtil par défaut */
  filter: saturate(110%);
  will-change: transform, left, opacity;
  left: var(--x, 50vw);
  transform: rotate(var(--rot, 12deg));
  animation:
    chip-rise var(--dur, 24s) linear infinite,
    chip-sway 7s ease-in-out infinite;
  mix-blend-mode: multiply; /* s’intègre au fond vanille */
}

/* variantes d’opacité selon la taille pour la profondeur */
.cv-chip[data-depth="far"] { opacity:.18 }
.cv-chip[data-depth="mid"] { opacity:.26 }
.cv-chip[data-depth="near"]{ opacity:.34 }

/* trajectoire verticale */
@keyframes chip-rise {
  from { transform: translate3d(0, 100vh, 0) rotate(var(--rot, 12deg)); }
  to   { transform: translate3d(0, -18vh, 0) rotate(var(--rot, 12deg)); }
}
/* petite oscillation horizontale (comme un souffle) */
@keyframes chip-sway {
  0%,100% { left: calc(var(--x, 50vw) - 1.2vw); }
  50%     { left: calc(var(--x, 50vw) + 1.2vw); }
}

/* tailles par défaut (le JS les surchargera aussi) */
.cv-chip{ width: 120px; height: 32px; }

/* Dark mode (optionnel) */
@media (prefers-color-scheme: dark){
  .cv-chip{
    mix-blend-mode: screen;
    opacity:.22;
    box-shadow: 0 10px 28px rgba(0,0,0,.18), inset 0 0 1px rgba(255,255,255,.25);
  }
}

/* Mobile : on atténue la présence et on évite tout scroll horizontal */
@media (max-width: 860px){
  .cv-chip{ opacity:.22 }
}

/* Assure que le contenu passe au-dessus */
.cv-wrap, .cv-head, .cv-tl { position: relative; z-index: 1; }



/* === CV Header — version unifiée & responsive ========================== */
/* 1) Vire/commande l'ancien grid + l'ancien .cv-logo circulaire :
   .cv-header{ display:grid; ... }
   .cv-logo{ border-radius:50%; background:...; box-shadow:... }
*/

:root{ --cv-logo-size: 42px; }

/* Layout de base (desktop) */
.cv-header{
  display:flex;
  grid-template-columns: 1fr auto 1fr;  /* espace | brand | nav */
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:8px 0;
  margin-top:30px;
  flex-wrap:wrap; /* utile si la nav déborde */
}

  /* le brand (logo + texte) au centre */
  .cv-brand,
  .cv-brand-link{
    justify-content: center;
  }


.cv-logo svg,
.cv-logo img{
  width:100%;
  height:100%;
  display:block;
}



/* Nav */
  /* la nav passe dessous, centrée */
.cv-nav{

  margin-left: 0;
  gap: 12px;
  justify-content: center;    /* centrage visuel */
  flex-wrap: nowrap;          /* une seule ligne */
  white-space: nowrap;        /* pas de wrap */
  overflow-x: auto;           /* scroll horizontal si trop long */
  -webkit-overflow-scrolling: touch;
}

.cv-nav a{
  text-decoration:none;
  padding:6px 10px;
  border-radius:10px;
}
.cv-nav a:hover{ color:var(--text); }

/* Bloc langue (si présent) */
.cv-lang{ margin-left:12px; }

/* Tablet ↓ : nav sous le brand, plein largeur */
@media (max-width: 900px){
  .cv-header{
    flex-direction:column;
        align-items: center;   /* centre horizontalement les enfants */
    text-align: center;    /* centre le texte (titre, liens) */
  }
  .cv-nav{
    order:2;
    width:100%;
    gap:12px;
    overflow-x:auto;      /* scroll horizontal si trop d'items */
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    margin-left:0;
  }
  .cv-lang{ order:1; align-self:flex-end; }
}

/* Phone ↓ : un peu plus compact */
@media (max-width: 560px){
  :root{ --cv-logo-size: 36px; }
  .cv-nav a{ padding:5px 8px; }
}