/* Socle commun des sites d'outils CareLab (Starvy, Slop-to-Cats, Pavu), 2026-11-06 : même bandeau, même largeur, mêmes titres,
   boutons, cartes et pied. Chaque site garde les couleurs de sa rubrique (data-rubrique sur <html>).
   Source unique : 04-tech4good/00-brand/outils/socle-outils.css. Ne pas modifier les copies : node 04-tech4good/00-brand/outils/sync-socle.mjs
   Chargé après les styles de chaque site. Comparer avec l'ancienne version : ?v=avant dans l'adresse. */

:root {
  --cl-largeur: 1200px;
  --cl-marge: 24px;
  --cl-barre: 72px;
  --cl-encre: #1F1F3B;
  --cl-doux: #5E5E7A;
  --cl-ligne: #DDE7F6;
  --cl-gris: #E0E9F7;
  --cl-gris-pale: #F0F4FB;
  --cl-gris-bleu: #C1D3EF;
  --cl-indigo: #3D39F4;
  --cl-rayon-bouton: 12px;
  --cl-rayon: 16px;
  --cl-rayon-grand: 24px;
  --cl-ombre: 0 10px 28px rgb(31 31 59 / 0.09);
  --cl-h1: clamp(34px, 3.8vw, 54px);
  --cl-h2: clamp(26px, 2.6vw, 34px);
  --cl-gouttiere: max(var(--cl-marge), calc((100% - var(--cl-largeur)) / 2));
}
[data-rubrique="trust"] { --cl-accent: #FF6B9A; --cl-accent-teinte: #FFE3EC; --cl-accent-ombre: rgb(255 107 154 / 0.3); --cl-pastille-fond: #E0E9F7; --cl-pastille-texte: #3D39F4; }
[data-rubrique="planet"] { --cl-accent: #FFD23F; --cl-accent-teinte: #FFF3C4; --cl-accent-ombre: rgb(31 31 59 / 0.14); --cl-pastille-fond: #E4F7F6; --cl-pastille-texte: #14817D; }
[data-rubrique="privacy"] { --cl-accent: #FFD23F; --cl-accent-teinte: #FFF3C4; --cl-accent-ombre: rgb(255 210 63 / 0.45); --cl-pastille-fond: #E0E9F7; --cl-pastille-texte: #3D39F4; }

html { scroll-padding-top: calc(var(--cl-barre) + 16px); }

/* ---------- Bandeau ---------- */
.cl-barre {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 20px;
  min-height: var(--cl-barre); margin: 0; padding: 10px var(--cl-gouttiere);
  background: rgb(255 255 255 / 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cl-ligne);
}
.cl-marque {
  display: flex; align-items: center; gap: 10px; flex: none;
  font: 700 24px/1 Poppins, system-ui, sans-serif; letter-spacing: -0.02em; color: var(--cl-encre); text-decoration: none; white-space: nowrap;
}
.cl-marque img { width: auto; height: 40px; padding: 0; display: block; }
.cl-marque .wordmark::after { font-size: 24px; letter-spacing: -0.02em; }
.cl-marque .cl-pastille, .cl-pastille {
  display: inline-block; margin: 0 0 0 2px; padding: 4px 12px; border-radius: 999px;
  background: var(--cl-pastille-fond); color: var(--cl-pastille-texte);
  font: 500 13px/1.3 Poppins, system-ui, sans-serif; letter-spacing: 0; white-space: nowrap;
}
.cl-centre, .cl-etapes, .cl-liens { margin-inline: auto; }
.cl-droite { display: flex; align-items: center; gap: 12px; flex: none; }
.cl-droite:only-of-type { margin-left: 0; }

/* Liens de navigation */
.cl-liens { display: flex; gap: 24px; font: 500 15px/1 Poppins, system-ui, sans-serif; color: var(--cl-doux); }
.cl-liens a { color: inherit; text-decoration: none; transition: color .15s; white-space: nowrap; }
.cl-liens a:hover { color: var(--cl-encre); }

/* Étapes */
.cl-etapes { display: flex; flex: 0 1 auto; justify-content: center; gap: 8px; list-style: none; padding: 0; }
.cl-barre .cl-etapes > * {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 16px 5px 5px; border-radius: 999px;
  background: #fff; border: 1.5px solid var(--cl-ligne); box-shadow: none;
  font: 500 14px/1 Poppins, system-ui, sans-serif; color: var(--cl-doux); white-space: nowrap;
  transition: background .25s, border-color .25s, color .25s;
}
.cl-barre .cl-etapes > * > b, .cl-barre .cl-etapes > * > span {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: var(--cl-gris-pale); color: var(--cl-encre); font: 600 13px/1 Poppins, system-ui, sans-serif;
}
.cl-barre .cl-etapes > .actif, .cl-barre .cl-etapes > [aria-current="step"] {
  background: var(--cl-accent-teinte); border-color: var(--cl-accent-teinte); color: var(--cl-encre); font-weight: 600; box-shadow: none;
}
.cl-barre .cl-etapes > .actif > b, .cl-barre .cl-etapes > [aria-current="step"] > span { background: var(--cl-accent); color: var(--cl-encre); }
.cl-barre .cl-etapes > .fait > b { background: var(--cl-gris-bleu); }

/* « 100 % local » */
.cl-local, .cl-local.label-black {
  display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 9px 14px; border: 0; border-radius: 999px;
  background: var(--cl-gris); color: var(--cl-encre); font: 500 14px/1 Poppins, system-ui, sans-serif; text-decoration: none; text-transform: none; letter-spacing: 0; white-space: nowrap;
}
.cl-local img { display: none; }
.cl-local::before {
  content: ""; display: block; flex: none; width: 13px; height: 15px; background: var(--cl-pastille-texte);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M3 7V5a4 4 0 1 1 8 0v2h1v8H2V7zm2 0h4V5a2 2 0 1 0-4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M3 7V5a4 4 0 1 1 8 0v2h1v8H2V7zm2 0h4V5a2 2 0 1 0-4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Bouton du bandeau */
.cl-droite .cl-bouton-barre { padding: 10px 16px !important; border-radius: var(--cl-rayon-bouton); font: 600 14px/1 Poppins, system-ui, sans-serif !important; white-space: nowrap; }

/* ---------- Largeur ---------- */
.cl-page, .wrap { max-width: calc(var(--cl-largeur) + 2 * var(--cl-marge)); margin-inline: auto; padding-inline: var(--cl-marge); }
.dropzone, .scenarios { max-width: var(--cl-largeur); }
.page-import { padding-inline: var(--cl-marge); padding-top: 32px; }
/* L'outil de Pavu suit la même largeur que le bandeau ; colonnes latérales resserrées pour garder l'image grande */
.page-verify { width: 100%; max-width: calc(var(--cl-largeur) + 2 * var(--cl-marge)); margin-inline: auto; padding-inline: var(--cl-marge); }
@media (min-width: 1181px) { .page-verify { grid-template-columns: 232px minmax(0, 1fr) 300px; } }
main.cl-page { padding-top: 32px; }

/* ---------- Titres et texte ---------- */
.cl-h1, .depot-texte h1, .dz-title, .hero h1 { font-size: var(--cl-h1); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.cl-h2, .titre-section, .explications-tete h2, .limites h2, .vie-privee h2, .envoyer-chat h2, .scenarios > .on-violet-title, .band h2, .dl h2 {
  font-size: var(--cl-h2); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em;
}
.depot-texte > p:first-of-type, .dropzone > p:not(.hint), .hero .lead, .section-lead, .scenarios > .on-violet, .explications-tete p:last-child { font-size: 17px; line-height: 1.55; }
.sur-titre, .kicker {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 6px 14px; border-radius: 999px;
  background: var(--cl-pastille-fond); color: var(--cl-pastille-texte); box-shadow: none;
  font: 600 13px/1.2 Poppins, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}

/* ---------- Boutons ---------- */
.bouton-principal, .btn-yellow, .btn-violet, .btn-primary, .btn-light {
  background: var(--cl-accent); border-color: var(--cl-accent); color: var(--cl-encre); box-shadow: 0 6px 18px var(--cl-accent-ombre);
}
.bouton-principal, .btn-lg, .hero .btn, .dl .btn { padding: 14px 26px; border-radius: var(--cl-rayon-bouton); font: 600 16px/1.2 Poppins, system-ui, sans-serif; }
.btn { border-radius: var(--cl-rayon-bouton); transition: transform .15s, box-shadow .15s, background .15s; }
.btn-sm { border-radius: 10px; }
.bouton-principal:hover, .btn-primary:hover, .btn-yellow:hover:not(:disabled), .btn-light:hover { transform: translateY(-1px); box-shadow: 0 10px 24px var(--cl-accent-ombre); }
.btn-store[aria-disabled="true"], .bouton-principal[aria-disabled="true"] { opacity: 1; background: #fff; color: var(--cl-encre); box-shadow: 0 6px 18px rgb(31 31 59 / 0.12); }

.envoi .bouton-principal { justify-content: center; }

/* ---------- Grand panneau d'accueil ---------- */
.hero, .dl, .bandeau-extension, .vie-privee { border-radius: var(--cl-rayon-grand); }
.cl-depot, .depot, .dropzone { border: 2px dashed var(--cl-gris-bleu); border-radius: var(--cl-rayon-grand); box-shadow: none; background: #fff; transition: border-color .2s, background .2s; }
.cl-depot:hover, .depot:hover, .depot.survol, .dropzone:hover, .dropzone.dragover { border-color: var(--cl-indigo); background: var(--cl-gris-pale); }
@media (min-width: 761px) { .dropzone { min-height: 372px; padding: 40px min(21%, 252px) 40px min(43%, 516px); } }
.dropzone::before { display: none; }
.dropzone:hover::after, .dropzone:hover .hint::after { mix-blend-mode: multiply; }
.hero { margin-top: 24px; min-height: 580px; }

/* ---------- Cartes ---------- */
.etape-carte, .algo, .envoi, .scenario-cards > div, .band .step, .band .state, .band .tip, .stat {
  border: 1.5px solid var(--cl-ligne); border-radius: var(--cl-rayon); box-shadow: none; background: #fff;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.etape-carte:hover, .algo:hover, .scenario-cards > div:hover, .band .step:hover, .band .state:hover, .band .tip:hover, .stat:hover {
  transform: translateY(-2px); box-shadow: var(--cl-ombre);
}

/* ---------- Rythme vertical ---------- */
.band { padding-block: 80px; }

/* ---------- Pied ---------- */
.cl-pied {
  max-width: none; margin: 72px 0 0; padding: 28px var(--cl-gouttiere) 36px; border-top: 1px solid var(--cl-ligne);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  font: 400 14px/1.5 Poppins, system-ui, sans-serif; color: var(--cl-doux);
}
.cl-pied p { margin: 0; }
.cl-pied a { color: inherit; font-weight: 500; }
.cl-pied a:hover { color: var(--cl-encre); }
.cl-pied-liens, .cl-pied .links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-weight: 500; }
.cl-pied-liens a, .cl-pied .links a { text-decoration: none; }
.cl-pied > .wrap { display: contents; }
.cl-pied .sign { color: var(--cl-encre); font-weight: 600; }

/* ---------- Écrans moins larges ---------- */
@media (max-width: 1240px) {
  .cl-etapes--statut { display: none; }
  .cl-etapes--statut + .cl-droite { margin-left: auto; }
}
@media (max-width: 1100px) {
  .cl-liens { display: none; }
  .cl-liens + .cl-droite { margin-left: auto; }
}
@media (max-width: 960px) {
  .cl-pastille, .cl-marque .cl-pastille { display: none; }
}
@media (max-width: 760px) {
  :root { --cl-marge: 16px; --cl-barre: 60px; }
  .cl-barre { flex-wrap: wrap; gap: 10px 12px; padding-block: 10px; }
  .cl-marque { font-size: 21px; gap: 8px; }
  .cl-marque img { height: 34px; }
  .cl-marque .wordmark::after { font-size: 21px; }
  .cl-local, .cl-local.label-black { margin-left: auto; padding: 7px 11px; font-size: 13px; }
  .cl-droite { margin-left: auto; gap: 8px; }
  .cl-droite .cl-local { margin-left: 0; }
  /* Pavu : les étapes pilotent l'app, elles restent sur une seconde ligne */
  .cl-etapes:not(.cl-etapes--statut) { order: 3; flex-basis: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
  .cl-barre .cl-etapes > * { justify-content: center; padding: 4px 8px 4px 4px; gap: 6px; font-size: 13px; min-width: 0; }
  .cl-barre .cl-etapes > * > b, .cl-barre .cl-etapes > * > span { width: 24px; height: 24px; font-size: 12px; }
  .page-import { padding-inline: var(--cl-marge); padding-top: 20px; }
  main.cl-page { padding-top: 20px; }
  .hero { margin-top: 16px; }
  .band { padding-block: 56px; }
  .cl-pied { margin-top: 48px; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .cl-droite .cl-bouton-barre { padding: 9px 12px !important; font-size: 13px !important; }
  .cl-droite--dense .cl-local { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bouton-principal, .btn, .etape-carte, .algo, .scenario-cards > div, .band .step, .band .state, .band .tip { transition: none; transform: none !important; }
}