/* ==========================================================================
   kitdepro.fr : feuille de style unique (toutes les pages)
   Charte « Cadence » : clair par défaut (fond #fafafa, cartes blanches à ombres douces, encre #0a0a0c),
   Inter seule, titres en 700 serrés, mots mis en avant (<em>) en dégradé pêche → corail → rose → violet,
   boutons en pilule. Le sombre reprend la même logique sur fond encre. Contrastes de texte AA (≥ 4,5:1).
   Thème : classe .light / .dark sur <html> (posée avant l'affichage, voir layout.html et site.js).
   Aucun style en ligne n'est autorisé (CSP style-src 'self') : tout passe par des classes.

   Sommaire
    1. Police                     8. Pied de page              15. Outils : briques des formulaires
    2. Couleurs et mesures        9. Boîte métier : recherche  16. Outils : documents à imprimer
    3. Base et accessibilité     10. Boîte métier : ressources 17. Outils : moodboard, nommage, export
    4. Mise en page              11. Actus et agenda           18. Outils : calculateur CODB
    5. Boutons, pastilles        12. Tutoriel                  19. Bascule de thème animée
    6. En-tête                   13. Journal                   20. Impression
    7. Ouverture et accueil      14. Outils : pages            21. Mouvement réduit
   ========================================================================== */


/* ---------- 1. Police : Inter variable, hébergée ici (aucun appel à un tiers) ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-var-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}


/* ---------- 2. Couleurs et mesures ---------- */
:root{
  /* Palette de la charte (identique en clair et en sombre) */
  --peach:#ffb37a; --coral:#ff8a6b; --pink:#ff7ea8; --violet:#a78cf7; --blue:#7cc0ff; --mint:#8fe0b0; --green:#3fb27f;
  --grad:linear-gradient(96deg,var(--peach) 4%,var(--coral) 34%,var(--pink) 62%,var(--violet) 92%);
  --grad-eyebrow:linear-gradient(90deg,#f0a92a,var(--coral) 45%,var(--violet));
  /* Typo, arrondis, mouvement */
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-2xl:28px;
  --ease:cubic-bezier(.22,.68,.24,1);

  /* Clair */
  --bg:#fafafa;          /* fond de page */
  --surface:#fff;        /* cartes */
  --ink:#0a0a0c;         /* titres, boutons pleins */
  --ink-2:#3d3d44;       /* texte courant fort */
  --muted:#6c6c76;       /* texte secondaire */
  --faint:#9b9ba5;       /* indications, compteurs */
  --line:#e8e8ec; --line-soft:#f0f0f3; --hover:rgb(10 10 12/.045);
  --accent:#6a4fc4;      /* texte d'accent (violet lisible) */
  --tag-violet-bg:#f0e9ff; --tag-violet:#6a4fc4; --tag-blue-bg:#e9f3ff; --tag-blue:#3567b8;
  --tag-green-bg:#eefaf3; --tag-green:#2f8a60; --tag-coral-bg:#fff0eb; --tag-coral:#c4482f;
  --sh-1:0 1px 2px rgb(14 14 20/.04),0 6px 18px rgb(14 14 20/.05);   /* carte au repos */
  --sh-2:0 2px 4px rgb(14 14 20/.04),0 18px 44px rgb(14 14 20/.08);  /* carte survolée */
  --sh-3:0 4px 8px rgb(14 14 20/.05),0 40px 90px rgb(14 14 20/.12);  /* fenêtres */
  --stuck:rgb(250 250 250/.9); /* barre collante en verre dépoli */
  color-scheme:light;
}
:root.dark{
  --bg:#0a0a0c; --surface:#141418; --ink:#f4f4f6; --ink-2:#d0d0d6; --muted:#a0a0aa; --faint:#71717b;
  --line:rgb(255 255 255/.09); --line-soft:rgb(255 255 255/.06); --hover:rgb(255 255 255/.06);
  --accent:#bba8ff;
  --tag-violet-bg:rgb(167 140 247/.14); --tag-violet:#c4b3ff; --tag-blue-bg:rgb(124 192 255/.13); --tag-blue:#9ccfff;
  --tag-green-bg:rgb(143 224 176/.12); --tag-green:#8fe0b0; --tag-coral-bg:rgb(255 138 107/.13); --tag-coral:#ffab94;
  --sh-1:0 0 0 1px var(--line); --sh-2:0 0 0 1px rgb(255 255 255/.14),0 18px 44px rgb(0 0 0/.4); --sh-3:0 0 0 1px var(--line),0 40px 90px rgb(0 0 0/.6);
  --stuck:rgb(10 10 12/.88);
  color-scheme:dark;
}


/* ---------- 3. Base et accessibilité ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--muted);font:400 15px/1.55 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
h1,h2,h3{margin:0;font-family:var(--font);font-weight:700;color:var(--ink);letter-spacing:-.03em;text-wrap:balance}
p{margin:0}
a{color:inherit}
/* Liens dans le texte (sans classe) : encre, soulignés de rose */
p a:not([class]),li a:not([class]),dd a:not([class]){color:var(--ink);font-weight:500;text-decoration-color:var(--pink);text-underline-offset:3px}
b,strong{color:var(--ink)}
button,input,select,textarea{font-family:var(--font)}
/* Mot mis en avant : dégradé de la charte */
h1 em,h2 em,.tuto-title em,.panel-h em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
mark{background:#efe8ff;color:inherit;border-radius:3px;padding:0 1px}
.dark mark{background:rgb(167 140 247/.28)}
::selection{background:#e9e1ff;color:#0a0a0c}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
main:focus{outline:none}
[hidden]{display:none!important}
.sr{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{position:absolute;left:16px;top:-80px;z-index:100;padding:10px 16px;border-radius:var(--r-md);background:var(--ink);color:var(--bg);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
noscript p{padding:40px 16px;text-align:center}
.small{font-size:12.5px}
.loading{padding:64px 0;text-align:center;font-size:13px}
.empty{display:none;padding:56px 16px;text-align:center}
.empty.show,p.empty:not([hidden]){display:block}
.empty b{display:block;margin-bottom:8px;font:700 32px/1.1 var(--font);letter-spacing:-.04em;color:var(--ink)}
.on-dark{display:none!important}
.dark .on-light{display:none!important}
.dark .on-dark{display:block!important}
@media(forced-colors:active){h1 em,h2 em,.tuto-title em,.panel-h em,.eyebrow{background:none;color:CanvasText}}


/* ---------- 4. Mise en page ---------- */
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
@media(max-width:600px){.wrap{padding:0 16px}}
.sec{padding:72px 0}
.sec-tight{padding:40px 0}
@media(min-width:768px){.sec{padding:104px 0}}
/* Titre de section : sur-titre en dégradé, grand titre, sous-titre */
.sec-head{display:grid;justify-items:center;gap:14px;margin-bottom:48px;text-align:center}
.sec-head-left{justify-items:start;margin:0 0 24px;text-align:left}
.sec-head h2,.start h2{max-width:20ch;font-size:clamp(30px,4.4vw,52px);line-height:1.06;letter-spacing:-.036em}
.sec-head-left h2{max-width:none}
.eyebrow{font:600 12px/1.4 var(--font);letter-spacing:.14em;text-transform:uppercase;background:var(--grad-eyebrow);-webkit-background-clip:text;background-clip:text;color:transparent;justify-self:start}
.sec-head .eyebrow,.start .eyebrow{justify-self:center}
.sec-head-left .eyebrow{justify-self:start}
.sub{max-width:52ch;font-size:16px;color:var(--muted);text-wrap:pretty}


/* ---------- 5. Boutons, pastilles, étiquettes ---------- */
/* Bouton pilule : .btn-ink (plein, action principale) ou .btn-white (blanc, secondaire) ; tailles .btn-sm / .btn-lg */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border:0;border-radius:999px;
  font:500 14px/1.2 var(--font);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform .35s var(--ease),box-shadow .3s,background-color .25s,color .25s}
.btn:hover{transform:translateY(-1px)}
.btn i,.btn>span[aria-hidden]{font-style:normal;transition:transform .35s var(--ease)}
.btn:hover i,.btn:hover>span[aria-hidden]{transform:translateX(3px)}
.btn-ink{background:var(--ink);color:var(--bg)}
.btn-ink:hover{box-shadow:0 10px 26px rgb(10 10 12/.22)}
.btn-white{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.btn-white:hover{box-shadow:var(--sh-2)}
.btn-lg{min-height:48px;padding:0 24px;font-size:15px}
.btn-sm{min-height:34px;padding:0 13px;font-size:13px}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* Bouton rond à icône (thème, aide) */
.icon-btn{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;transition:color .25s,background-color .25s}
.icon-btn:hover{background:var(--hover);color:var(--ink)}
/* Lien d'apparence texte */
.link-btn,.linkish{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link-btn:hover,.linkish:hover{color:var(--ink)}

/* Pastilles de filtre (boutons ou liens) */
.chips{display:flex;gap:6px;padding:10px 1px 0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:0;border-radius:999px;background:var(--surface);color:var(--muted);box-shadow:var(--sh-1);
  font:500 13px/1.2 var(--font);text-decoration:none;white-space:nowrap;cursor:pointer;transition:color .25s,box-shadow .3s,transform .3s var(--ease)}
.chip:hover{color:var(--ink);box-shadow:var(--sh-2)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);box-shadow:none}
.chip .n{font-size:11px;color:var(--faint)}
.chip[aria-pressed="true"] .n{color:var(--bg);opacity:.65}

/* Étiquettes : .tag (neutre) + couleur ; .badge = étiquette de catégorie */
.tag,.badge{display:inline-flex;align-items:center;gap:4px;padding:0 9px;border-radius:999px;background:var(--tag-blue-bg);color:var(--tag-blue);font:600 11px/1.9 var(--font);white-space:nowrap}
.tag-green{background:var(--tag-green-bg);color:var(--tag-green)}
.tag-coral{background:var(--tag-coral-bg);color:var(--tag-coral)}
.tag-violet,.badge{background:var(--tag-violet-bg);color:var(--tag-violet)}
.tag-blue{background:var(--tag-blue-bg);color:var(--tag-blue)}
.tag-ink{background:var(--ink);color:var(--bg)}
/* Sur-titre des pages d'outils et du journal */
.tag-pill{justify-self:center;display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--tag-violet-bg);color:var(--tag-violet);font:600 12.5px/1.3 var(--font)}


/* ---------- 6. En-tête ---------- */
.topbar{position:relative;z-index:20}
.topbar-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
.brand{display:flex;align-items:center;gap:9px;min-width:0;text-decoration:none}
.brand img{display:block;width:26px;height:26px}
.brand span{font:700 17px/1 var(--font);letter-spacing:-.03em;color:var(--ink)}
.brand i{font-style:normal;color:var(--faint)}
.topnav{display:none;gap:4px}
@media(min-width:900px){.topnav{display:flex;position:absolute;left:50%;transform:translateX(-50%)}}
.topnav a{padding:8px 12px;border-radius:999px;font:400 14px/1 var(--font);color:var(--muted);text-decoration:none;transition:color .25s,background-color .25s}
.topnav a:hover{background:var(--hover);color:var(--ink)}
.top-actions{display:flex;align-items:center;gap:4px}
@media(max-width:560px){.top-actions .btn .lbl{display:none}.top-actions .btn{width:38px;padding:0}}


/* ---------- 7. Ouverture et page d'accueil ---------- */
/* Ouverture centrée sur un halo pastel ; .hero-sm (pages métier, Shootiful) et .hero-tool (outils, journal) plus courtes */
.hero{position:relative;margin-top:-64px;padding:136px 0 64px;overflow:hidden;overflow-x:clip}
@media(min-width:768px){.hero{padding:160px 0 88px}}
.hero-sm{padding-bottom:48px}
.hero-tool{margin-top:0;padding:48px 0 32px}
@media(min-width:768px){.hero-tool{padding:64px 0 40px}}
.hero-glow{position:absolute;inset:0 -10% auto;z-index:0;height:820px;pointer-events:none;
  background:radial-gradient(40% 50% at 18% 30%,rgb(255 179 122/.32),transparent 70%),radial-gradient(38% 45% at 82% 22%,rgb(167 140 247/.28),transparent 70%),radial-gradient(30% 40% at 55% 60%,rgb(255 126 168/.16),transparent 70%)}
.dark .hero-glow{opacity:.55}
.hero .wrap{position:relative;z-index:1}
.hero-head{display:grid;justify-items:center;gap:22px;text-align:center}
.page-landing .hero-head{padding-bottom:52px}
.hero h1{max-width:20ch;font-size:clamp(38px,6.4vw,72px);line-height:1.03;letter-spacing:-.042em}
.hero-tool h1{font-size:clamp(32px,4.6vw,52px)}
.lede{max-width:56ch;font-size:17px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:4px}
/* Petite pastille d'annonce au-dessus du titre */
.hero-pill{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 14px 0 5px;border-radius:999px;background:var(--surface);box-shadow:var(--sh-1);
  font-size:13.5px;color:var(--muted);text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.hero-pill:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.hero-pill b{color:#c43c72;font-weight:600}
.dark .hero-pill b{color:var(--pink)}
.hero-pill-badge{display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:999px;background:linear-gradient(120deg,#eef4ff,#f6edff);color:#4b5bd0;font-size:12.5px;font-weight:600}
.dark .hero-pill-badge{background:linear-gradient(120deg,rgb(124 192 255/.16),rgb(167 140 247/.2));color:#c4c9ff}
.hero-pill-arrow{color:var(--faint);transition:transform .35s var(--ease)}
.hero-pill:hover .hero-pill-arrow{transform:translateX(3px)}
/* « Vérifié chaque mois » et ses pastilles de couleur */
.trust{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--muted)}
.trust b{font-weight:600}
.dots{display:flex}
.dots i{width:26px;height:26px;margin-left:-8px;border:2px solid var(--bg);border-radius:50%;background:var(--peach)}
.dots i:first-child{margin-left:0}
.dots i:nth-child(2){background:var(--pink)}.dots i:nth-child(3){background:var(--violet)}.dots i:nth-child(4){background:var(--blue)}
@media(max-width:600px){
  .hero-head{gap:18px}
  .hero .cta-row{flex-direction:column;width:100%}
  .hero .cta-row .btn{width:100%}
  .hero-pill{height:auto;padding:6px 12px 6px 6px;font-size:12.5px}
  .trust{flex-wrap:wrap;justify-content:center}
}

/* Fausse fenêtre d'aperçu (accueil) */
.shot{max-width:1000px;margin:0 auto;overflow:hidden;border-radius:var(--r-2xl);background:var(--surface);box-shadow:0 2px 6px rgb(14 14 20/.04),0 26px 60px rgb(14 14 20/.07);animation:rise-in 1.1s .12s var(--ease) both}
.dark .shot{box-shadow:0 0 0 1px var(--line),0 26px 60px rgb(0 0 0/.5)}
@keyframes rise-in{from{opacity:0;transform:translateY(28px) scale(.985)}}
.shot-bar{display:flex;align-items:center;gap:6px;height:42px;padding:0 16px;border-bottom:1px solid var(--line-soft)}
.shot-bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.shot-bar span{margin:0 auto;padding:4px 14px;border-radius:999px;background:var(--bg);font-size:12px;color:var(--faint)}
.shot-body{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:18px}
.metric{display:grid;gap:4px;padding:16px 18px;border-radius:var(--r-lg);background:var(--bg)}
.metric span{font-size:12.5px}
.metric b{font-size:clamp(28px,3.4vw,38px);line-height:1.1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.metric em{justify-self:start;padding:2px 8px;border-radius:999px;background:var(--line-soft);font-style:normal;font-size:11.5px;font-weight:600}
.metric em.up{background:var(--tag-green-bg);color:var(--tag-green)}
.shot-rows{grid-column:1/-1;padding:6px 6px 2px}
.shot-rows p{display:grid;grid-template-columns:12px 1fr minmax(80px,38%);align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line-soft);font-size:13.5px;color:var(--ink-2)}
.shot-rows .shot-rows-h{display:block;padding:0 0 8px;border:0;font-size:13px;font-weight:600;color:var(--ink)}
.shot-rows i{width:8px;height:8px;border-radius:50%}
.shot-rows .d1{background:var(--coral)}.shot-rows .d2{background:var(--violet)}.shot-rows .d3{background:var(--blue)}.shot-rows .d4{background:var(--green)}
.meter{height:6px;overflow:hidden;border-radius:999px;background:var(--line-soft)}
.meter s{display:block;height:100%;border-radius:inherit;background:var(--grad)}
.meter .w1{width:92%}.meter .w2{width:78%}.meter .w3{width:64%}.meter .w4{width:51%}
@media(max-width:700px){.shot-body{grid-template-columns:1fr 1fr}.metric:nth-child(3){display:none}.shot-rows p{grid-template-columns:12px 1fr}.meter{display:none}}

/* Trois cartes illustrées (« Dans le kit ») */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:0;padding:0;list-style:none}
@media(max-width:900px){.cards{grid-template-columns:1fr;max-width:520px;margin-inline:auto;gap:34px}}
.card{display:grid;align-content:start;gap:8px}
.card h3{margin-top:4px;font-size:19px;line-height:1.3;letter-spacing:-.022em;font-weight:600}
.card p{font-size:14.5px}
.art{position:relative;display:grid;place-items:center;height:230px;margin-bottom:10px;overflow:hidden;border-radius:var(--r-2xl)}
.art.a1{background:radial-gradient(70% 80% at 80% 10%,#ffc9d9,transparent 70%),radial-gradient(70% 80% at 10% 90%,#ffd8c8,transparent 70%),#ffe6ee}
.art.a2{background:radial-gradient(70% 80% at 15% 15%,#e2d8ff,transparent 70%),radial-gradient(70% 80% at 90% 90%,#d6e9ff,transparent 70%),#efeaff}
.art.a3{background:radial-gradient(70% 80% at 20% 10%,#ffe1c4,transparent 70%),radial-gradient(70% 80% at 90% 90%,#ffd0dc,transparent 70%),#fff1e6}
.dark .art{filter:saturate(.9) brightness(.92)}
.art-doc{display:grid;gap:9px;width:180px;padding:20px 18px;border-radius:14px;background:#fff;box-shadow:var(--sh-2);transform:rotate(-3deg)}
.art-doc i{height:7px;border-radius:999px;background:#eceaf0}
.art-doc i:nth-child(2){width:75%}
.art-doc i.s{width:45%;height:18px;margin-top:6px;border-bottom:2px solid var(--pink);border-radius:0;background:none}
.art-doc b{justify-self:start;padding:3px 9px;border-radius:999px;background:#eefaf3;color:#2f8a60;font-size:11px;font-weight:600}
.art-calc{display:grid;gap:4px;padding:18px 22px;border-radius:16px;background:#fff;box-shadow:var(--sh-2)}
.art-calc b{font-size:34px;letter-spacing:-.04em;color:#0a0a0c;font-variant-numeric:tabular-nums}
.art-calc small{font-size:12px;color:#6c6c76}
.art-avs{display:flex}
.art-avs i{width:54px;height:54px;margin-left:-14px;border:3px solid #fff;border-radius:50%;background:var(--coral);box-shadow:0 6px 16px rgb(14 14 20/.1)}
.art-avs i:first-child{margin-left:0}
.art-avs i:nth-child(2){background:var(--violet)}.art-avs i:nth-child(3){background:var(--blue)}.art-avs i:nth-child(4){background:var(--mint)}
.art-chip{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);padding:7px 14px;border-radius:999px;background:#fff;color:#3d3d44;font-size:12.5px;font-weight:500;white-space:nowrap;box-shadow:var(--sh-1)}

/* Cartes des métiers */
.metiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:14px;margin:0;padding:0;list-style:none}
.metier{display:flex;align-items:center;gap:16px;height:100%;padding:22px;border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--sh-1);text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
a.metier:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.metier-emoji{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r-lg);background:var(--bg);font-size:28px}
.metier-tx{display:grid;gap:4px;min-width:0}
.metier-tx b{font-size:19px;letter-spacing:-.02em}
.metier-tx small{font-size:13.5px;line-height:1.5}
.metier-go{flex:none;display:grid;place-items:center;width:36px;height:36px;margin-left:auto;border-radius:999px;background:var(--ink);color:var(--bg)}
.metier.soon{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
.metier.soon .metier-emoji{background:var(--tag-violet-bg);color:var(--tag-violet);font-size:22px}

/* Aperçu des outils : petites cartes à icône */
.mini{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0;padding:0;list-style:none}
@media(max-width:1000px){.mini{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mini{grid-template-columns:1fr}}
.mini a{display:flex;align-items:flex-start;gap:14px;height:100%;padding:18px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-1);text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.mini a:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.mini b{display:block;margin-bottom:3px;font-size:15px;font-weight:600;letter-spacing:-.02em}
.mini small{display:block;font-size:13.5px;line-height:1.5}
.mini-ico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--bg);font-size:17px}
.mini li:nth-child(1) .mini-ico{background:#ffe3d3}.mini li:nth-child(2) .mini-ico{background:#e5f0ff}.mini li:nth-child(3) .mini-ico{background:#ece4ff}
.dark .mini li .mini-ico{background:var(--line)}
.mini .mini-all .mini-ico{background:var(--ink);color:var(--bg);font-weight:600}
.mini-all:hover .mini-ico{background:var(--grad)!important;color:#0a0a0c!important}

/* Bandeau partenaire (Shootiful) */
.partner{display:flex;align-items:center;gap:24px;padding:24px 28px;border-radius:var(--r-2xl);background:var(--surface);box-shadow:var(--sh-1);text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.partner:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.partner img{flex:none;height:31px;width:auto}
.partner-tx{display:grid;gap:4px;min-width:0}
.partner-tx b{font-size:17px;letter-spacing:-.02em}
.partner-tx small{font-size:14px}
.partner-go{flex:none;display:grid;place-items:center;width:38px;height:38px;margin-left:auto;border-radius:999px;background:var(--ink);color:var(--bg)}
@media(max-width:600px){.partner{flex-wrap:wrap;gap:14px}.partner-go{display:none}}
.partner-logo{height:41px;width:auto}

/* Grand bloc d'appel final */
.start{position:relative;isolation:isolate;display:grid;justify-items:center;gap:18px;padding:88px 24px;overflow:hidden;border-radius:32px;background:var(--surface);box-shadow:var(--sh-1);text-align:center}
.start-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(45% 70% at 12% 85%,rgb(255 179 122/.3),transparent 70%),radial-gradient(45% 70% at 90% 15%,rgb(167 140 247/.28),transparent 70%),radial-gradient(35% 50% at 60% 100%,rgb(255 126 168/.18),transparent 70%)}
.dark .start-glow{opacity:.6}
.start h2{max-width:18ch}
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;font-size:13px}
@media(max-width:600px){.start{padding:64px 18px}.start .cta-row{width:100%}.start .btn{width:100%}}


/* ---------- 8. Pied de page ---------- */
.foot{padding:32px 0 40px;font-size:14px}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding-top:48px;border-top:1px solid var(--line)}
@media(min-width:900px){.foot-cols{grid-template-columns:1.6fr 1fr 1fr 1.6fr;gap:48px}}
.foot-brand{grid-column:1/-1}
@media(min-width:900px){.foot-brand{grid-column:auto}}
.foot-brand p,.foot-note{max-width:36ch;margin-top:14px;line-height:1.6}
.foot-note{margin:0}
.foot-h{margin-bottom:14px;font:600 13px/1 var(--font);color:var(--ink)}
.foot ul{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.foot li a{color:var(--muted);font-weight:400;text-decoration:none;transition:color .25s}
.foot li a:hover{color:var(--ink)}
.foot-credit{margin-top:40px;font-size:13px}
.foot-credit a{color:var(--ink);font-weight:600;text-decoration:none}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft);font-size:12.5px;line-height:1.6;color:var(--faint)}
.foot-meta{display:flex;flex-direction:column;gap:2px}
.foot-meta a{align-self:flex-start;color:var(--ink);text-decoration:none}
.foot-meta a:hover{text-decoration:underline}
.foot-visits{display:flex;align-items:center;gap:8px}
.foot-visits strong{font-variant-numeric:tabular-nums}
.dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
.foot-simple{text-align:center;font-size:13px}
.foot-simple .wrap{display:grid;gap:8px;padding-top:24px;border-top:1px solid var(--line)}
/* Bouton « revenir en haut » et bulle de notification */
.to-top{position:fixed;right:16px;bottom:16px;z-index:20;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:var(--sh-2);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s,background-color .2s,color .2s}
.to-top:hover{background:var(--ink);color:var(--bg)}
.to-top.show{opacity:1;pointer-events:auto}
.toast{position:fixed;left:50%;bottom:24px;z-index:50;max-width:calc(100% - 32px);padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--bg);font:600 14px var(--font);text-align:center;box-shadow:var(--sh-3);
  opacity:0;pointer-events:none;transform:translate(-50%,20px);transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}


/* ---------- 9. Boîte métier : recherche et filtres ---------- */
/* Barre collante ; une fois collée (.stuck, posée par metier.js) elle devient compacte, en verre dépoli */
.controls{position:sticky;top:0;z-index:10;padding:8px 0 12px;background:var(--bg)}
.controls.stuck{background:var(--stuck);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line-soft)}
@media(max-width:767px){.controls.stuck .status,.controls.stuck .chips-wrap{display:none}}
search{display:block}
.search{position:relative}
.search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--faint)}
.search input{width:100%;height:52px;padding:0 84px 0 44px;border:0;border-radius:999px;background:var(--surface);box-shadow:var(--sh-1);outline:none;
  font:400 16px var(--font);color:var(--ink);transition:box-shadow .3s}
.search input::placeholder{color:var(--faint);opacity:1}
.search input:focus{box-shadow:var(--sh-2),0 0 0 2px #d9ccff}
.dark .search input:focus{box-shadow:var(--sh-2),0 0 0 2px rgb(187 168 255/.5)}
.controls.stuck .search input{height:44px;font-size:15px}
.search kbd,.search .clear{position:absolute;right:14px;top:50%;transform:translateY(-50%)}
.search kbd{padding:1px 6px;border:1px solid var(--line);border-radius:6px;background:var(--bg);font:500 11px var(--mono);color:var(--faint)}
.search .clear{display:none;padding:5px 11px;border:0;border-radius:999px;background:var(--bg);color:var(--ink);font:500 12px var(--font);cursor:pointer}
.search.has-q kbd{display:none}
.search.has-q .clear{display:block}
/* Rangées défilantes : fondu sur les bords et flèches (metier.js) */
.chips-wrap{position:relative}
.chips{cursor:grab}
.chips.dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
.chips.dragging .chip{pointer-events:none}
.chips-wrap.can-right .chips{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 64px),transparent)}
.chips-wrap.can-left .chips{-webkit-mask-image:linear-gradient(to right,transparent,#000 64px);mask-image:linear-gradient(to right,transparent,#000 64px)}
.chips-wrap.can-left.can-right .chips{-webkit-mask-image:linear-gradient(to right,transparent,#000 64px,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(to right,transparent,#000 64px,#000 calc(100% - 64px),transparent)}
.chips-nav{position:absolute;top:calc(50% + 5px);z-index:2;display:none;place-items:center;width:30px;height:30px;transform:translateY(-50%);border:0;border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);cursor:pointer}
.chips-nav.prev{left:0}
.chips-nav.next{right:0}
.chips-wrap.can-left .chips-nav.prev,.chips-wrap.can-right .chips-nav.next{display:grid}
/* Deuxième rangée : types de ressources */
.chips-types{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
.chips-sep{flex:none;width:1px;margin:4px 2px;background:var(--line)}
.chip-free{color:var(--tag-green)}
.chip-free[aria-pressed="true"]{background:var(--tag-green);color:var(--bg)}
.chip-app{background:var(--tag-violet-bg);color:var(--tag-violet);box-shadow:none;font-weight:600}
.chip-app[aria-pressed="true"]{background:var(--tag-violet);color:var(--bg)}
/* Ligne d'état : nombre de résultats, PDF, déplier / replier */
.status{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:12px 1px 0;font-size:13px}
.status-r,.fold-btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px}


/* ---------- 10. Boîte métier : catégories et ressources ---------- */
.groups{padding-top:16px;padding-bottom:40px}
/* Une catégorie = une carte blanche repliable */
.group{position:relative;display:flex;flex-direction:column;gap:24px;margin-top:16px;padding:24px;border-radius:var(--r-2xl);background:var(--surface);box-shadow:var(--sh-1);scroll-margin-top:200px}
@media(min-width:768px){.group{padding:32px}}
.group h2{font:inherit}
.group-head{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 16px;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.group-head:focus-visible{outline-offset:6px;border-radius:var(--r-md)}
.group-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:0}
.group-meta,.group-title{grid-column:1}
.group-meta .badge{text-transform:uppercase}
.group:nth-child(3n+2) .badge{background:var(--tag-coral-bg);color:var(--tag-coral)}
.group:nth-child(3n) .badge{background:var(--tag-blue-bg);color:var(--tag-blue)}
.group-head .count{font:600 12px var(--font);text-transform:uppercase;color:var(--faint)}
.group-title{min-width:0;font:700 clamp(21px,2.4vw,26px)/1.2 var(--font);letter-spacing:-.03em;color:var(--ink);overflow-wrap:anywhere}
.chev{grid-column:2;grid-row:1/span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:999px;background:var(--bg);color:var(--ink);transition:transform .35s var(--ease),background-color .25s,color .25s}
.group-head:hover .chev{background:var(--ink);color:var(--bg)}
.group.collapsed .chev{transform:rotate(-90deg)}
.group.collapsed .bento,.group.collapsed .group-desc{display:none}
.group-desc{max-width:70ch;margin-top:-12px}
.group.opening .group-desc,.group.opening .bento{animation:fade-in .2s ease both}
@keyframes fade-in{from{opacity:0}}
/* Grille des ressources */
.bento{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:768px){.bento{grid-template-columns:repeat(2,1fr)}.tile.wide{grid-column:span 2}}
.tile{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:20px;border:1px solid transparent;border-radius:var(--r-lg);background:var(--bg);text-decoration:none;
  transition:background-color .25s,border-color .25s,box-shadow .35s,transform .35s var(--ease)}
a.tile:hover{border-color:var(--line);background:var(--surface);box-shadow:var(--sh-2);transform:translateY(-2px)}
.tile.feature{background:linear-gradient(135deg,#fff5ee,#f6f0ff)}
.dark .tile.feature{background:linear-gradient(135deg,rgb(255 179 122/.08),rgb(167 140 247/.1))}
.tile.warn{background:var(--tag-coral-bg)}
.tile-head{display:flex;align-items:center;gap:12px;min-width:0}
.tile h3{font:600 15.5px/1.3 var(--font);letter-spacing:-.02em;overflow-wrap:anywhere}
.fav{flex:none;display:grid;place-items:center;width:32px;height:32px;overflow:hidden;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--line);font:700 13px var(--font);color:#16161a}
.fav img{width:18px;height:18px}
.fav-app{background:var(--surface);color:inherit;font-size:18px}
.tile-desc{flex:1;font-size:14px;line-height:1.6}
.tile-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tile-go{max-width:100%;overflow:hidden;font:500 12px var(--font);color:var(--faint);white-space:nowrap;text-overflow:ellipsis}
.new-dot{position:relative;top:-1px;display:inline-block;width:7px;height:7px;margin-left:7px;border-radius:50%;background:var(--pink);vertical-align:middle}
/* Encadrés : chiffres clés et checklist */
.tile-info h3{font:700 20px/1.2 var(--font);letter-spacing:-.03em}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:0}
.fact{padding:10px 12px;border-radius:var(--r-md);background:var(--surface)}
.fact dt{font-size:12px}
.fact dd{margin:2px 0 0;font:700 20px/1.1 var(--font);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.fact dd small{display:block;margin-top:2px;font:400 12px var(--font);letter-spacing:0;color:var(--muted)}
.notice{padding:16px;border-radius:var(--r-md);background:var(--tag-coral-bg);color:var(--ink-2);font-size:13px;line-height:1.6}
.notice b{color:var(--tag-coral)}
.checklist{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.checklist label{display:flex;align-items:flex-start;gap:10px;padding:6px;border-radius:var(--r-md);color:var(--ink-2);font-size:14px;cursor:pointer}
.checklist label:hover{background:var(--hover)}
.checklist label small{display:block;font-size:12px;color:var(--muted)}
.checklist input{appearance:none;-webkit-appearance:none;display:grid;place-items:center;flex:none;width:20px;height:20px;margin:1px 0 0;border:2px solid var(--line);border-radius:50%;cursor:pointer;transition:background-color .15s,border-color .15s}
.dark .checklist input{border-color:var(--faint)}
.checklist input::before{content:"";width:9px;height:5px;border-left:2px solid transparent;border-bottom:2px solid transparent;transform:translateY(-1px) rotate(-45deg)}
.checklist input:checked{border-color:var(--ink);background:var(--ink)}
.checklist input:checked::before{border-color:var(--bg)}
.checklist input:checked+span{color:var(--muted);text-decoration:line-through}
.checklist .del{margin-left:auto;padding:2px 6px;border:0;border-radius:var(--r-sm);background:none;color:var(--muted);font-size:16px;line-height:1;cursor:pointer}
.checklist .del:hover{background:var(--tag-coral-bg);color:var(--tag-coral)}
.progress{height:6px;overflow:hidden;border-radius:999px;background:var(--line-soft)}
.progress i{display:block;width:0;height:100%;border-radius:999px;background:var(--grad);transition:width .2s}
.tile-info .link-btn{align-self:flex-start;font-size:12.5px}


/* ---------- 11. Actus et agenda ---------- */
.extra{padding-top:72px}
.extra-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px}
.extra-head .eyebrow{display:block;margin-bottom:10px}
.extra-head h2{font-size:clamp(28px,3.6vw,42px);line-height:1.08;letter-spacing:-.036em}
.extra-head .sub{margin-top:8px;max-width:70ch;font-size:15px}
/* Sélecteur à deux positions (« Par média / Fil continu ») ; .full = pleine largeur (outils) */
.seg{display:inline-flex;flex-wrap:wrap;padding:4px;border-radius:999px;background:var(--surface);box-shadow:var(--sh-1)}
.seg button{padding:7px 13px;border:0;border-radius:999px;background:none;color:var(--muted);font:500 13px/1.2 var(--font);cursor:pointer;transition:background-color .2s,color .2s}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.seg.full{display:flex;width:100%}
.seg.full button{flex:1}
/* Par média : une carte par source */
.news-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:768px){.news-grid{grid-template-columns:repeat(2,1fr)}}
.n-card{display:flex;flex-direction:column;gap:12px;min-width:0;padding:20px;border-radius:var(--r-2xl);background:var(--surface);box-shadow:var(--sh-1)}
.n-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.n-head div{min-width:0}
.n-head h3{font-size:16px;letter-spacing:-.02em}
.n-head h3 a{color:var(--ink);text-decoration:none}
.n-head h3 a:hover{text-decoration:underline}
.n-head p{font-size:12px}
.n-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.n-list li+li{border-top:1px solid var(--line-soft)}
.n-list a{display:grid;grid-template-columns:56px 1fr;gap:10px;padding:8px 4px;border-radius:var(--r-md);color:var(--ink);font-weight:400;font-size:14px;line-height:1.4;text-decoration:none;transition:background-color .15s}
.n-list a:hover{background:var(--bg)}
.n-list time,.a-card time{display:flex;align-items:flex-start;gap:5px;padding-top:2px;font-size:12px;color:var(--faint);white-space:nowrap}
.fresh{flex:none;width:6px;height:6px;margin-top:5px;border-radius:50%;background:var(--pink)}
/* Fil continu : petite vignette à gauche */
.a-grid{display:grid;grid-template-columns:1fr;gap:8px 24px;margin:0;padding:0;list-style:none}
@media(min-width:768px){.a-grid{grid-template-columns:repeat(2,1fr)}}
.a-card{display:grid;grid-template-columns:112px 1fr;align-items:start;gap:14px;height:100%;padding:10px;border-radius:var(--r-lg);text-decoration:none;transition:background-color .15s}
.a-card:hover{background:var(--surface)}
@media(max-width:400px){.a-card{grid-template-columns:88px 1fr}}
.a-body{display:flex;flex-direction:column;gap:4px}
.a-src{font:600 10px/1.4 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.a-title{font:600 14px/1.4 var(--font);color:var(--ink)}
.a-card:hover .a-title{text-decoration:underline}
.thumb{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:10px;background:var(--bg)}
.thumb img{display:block;width:100%;height:100%;object-fit:cover}
.thumb-ph{display:grid;place-items:center;font:700 24px var(--font);color:var(--faint)}
.thumb-ph img{width:32px;height:32px;padding:6px;border-radius:var(--r-sm);background:#fff;object-fit:contain}
.news-upd{margin-top:16px}
/* Agenda : bandeau en dégradé, une carte par événement avec compte à rebours */
.agenda{overflow:hidden;border-radius:var(--r-2xl);background:var(--surface);box-shadow:var(--sh-1)}
.agenda-band{padding:12px 32px;background:var(--grad);color:#0a0a0c;font:600 12px/1.4 var(--font);letter-spacing:.14em;text-align:center;text-transform:uppercase}
.agenda-grid{display:grid;grid-template-columns:1fr;gap:16px;padding:24px}
@media(min-width:900px){.agenda-grid{grid-template-columns:repeat(2,1fr)}}
.event{display:flex;flex-direction:column;gap:4px;min-width:0;padding:20px;border-radius:var(--r-lg);background:var(--bg)}
.event-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.event-date{font:700 30px/1.1 var(--font);letter-spacing:-.03em;color:var(--ink)}
.event h3{margin-top:6px;font-size:14px;letter-spacing:.025em;text-transform:uppercase}
.event-place{margin-bottom:10px;font-size:14px}
.timer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:auto;padding:20px 22px;border-radius:var(--r-lg);background:#0a0a0c;color:rgb(255 255 255/.75)}
.dark .timer{background:#1c1c22;box-shadow:0 0 0 1px var(--line)}
.timer-label{margin-bottom:8px;font:600 10px/1.3 var(--font);letter-spacing:.1em;text-transform:uppercase;color:#9b9ba5}
.timer-label:empty{display:none}
.timer-grid{display:flex;gap:14px}
.timer-grid div{display:flex;align-items:baseline;gap:3px}
.timer-grid b{font:700 26px/1 var(--font);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.timer-grid span{font:600 10px var(--font);letter-spacing:.1em;text-transform:uppercase;color:#9b9ba5}
.timer-after{margin-top:8px;font-size:12.5px}
.timer .btn-white{background:#fff;color:#0a0a0c}
.timer :focus-visible{outline-color:#fff}
.help-line{margin:24px 0 72px;text-align:center;font-size:13px}


/* ---------- 12. Tutoriel (fenêtre en étapes, défilement automatique, pause au survol) ---------- */
.tuto{width:min(520px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:0;overflow:hidden auto;overscroll-behavior:contain;border:0;border-radius:var(--r-2xl);background:var(--surface);color:var(--muted);box-shadow:var(--sh-3)}
.tuto[open]{display:flex;flex-direction:column;animation:tuto-in .35s cubic-bezier(.2,.8,.2,1)}
.tuto::backdrop{background:rgb(10 10 12/.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
@keyframes tuto-in{from{opacity:0;transform:translateY(16px) scale(.97)}}
/* Barres de progression façon « stories » */
.tuto-bars{position:absolute;top:12px;left:16px;right:60px;z-index:2;display:flex;gap:4px}
.tuto-bars span{flex:1;height:3px;overflow:hidden;border-radius:3px;background:rgb(10 10 12/.12)}
.tuto-bars i{display:block;width:0;height:100%;border-radius:inherit;background:var(--ink)}
.tuto-bars .done i{width:100%}
.tuto-bars .run i{animation:tuto-bar 7s linear forwards}
.tuto.paused .tuto-bars .run i{animation-play-state:paused}
@keyframes tuto-bar{to{width:100%}}
.tuto-x{position:absolute;top:6px;right:8px;z-index:2;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:#0a0a0c;cursor:pointer}
.tuto-x:hover{background:rgb(10 10 12/.08)}
/* Illustration : mini-maquettes du site sur fond pastel */
.tuto-art{position:relative;flex:none;display:grid;place-items:center;height:200px;padding:36px 24px 20px;overflow:hidden;color:#0a0a0c;
  background:radial-gradient(60% 80% at 15% 20%,#ffe1c4,transparent 70%),radial-gradient(60% 80% at 90% 90%,#e2d8ff,transparent 70%),#fff0f4}
.dark .tuto-art{filter:saturate(.9) brightness(.94)}
.tuto-art>*{position:relative;animation:tuto-pop .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes tuto-pop{from{opacity:0;transform:translateY(10px)}}
.tuto-body{padding:20px 24px 4px}
.tuto-step{margin-bottom:4px;font:600 11px/1.4 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.tuto-title{margin-bottom:8px;font-size:22px;line-height:1.2}
.tuto-text{min-height:4.8em;font-size:15px;line-height:1.6}
.tuto-text kbd,.m-search kbd{padding:0 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;font:600 12px var(--mono)}
.tuto-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 24px 20px}
.tuto-skip{padding:8px 4px;border:0;background:none;color:var(--muted);font:500 14px var(--font);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tuto-skip:hover{color:var(--ink)}
.tuto-nav{display:flex;align-items:center;gap:8px}
.tuto-prev{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:var(--bg);color:var(--ink);cursor:pointer}
.tuto-prev:hover{background:var(--hover)}
.tuto-prev:disabled{opacity:.35;cursor:default}
@media(max-width:560px){.tuto-art{height:170px}.tuto-title{font-size:19px}.tuto-text{font-size:14px}.tuto-body{padding:16px 20px 0}.tuto-foot{padding:14px 20px 18px}}
/* Éléments des maquettes (fond clair, cartes blanches) */
.m-col{display:flex;flex-direction:column;gap:8px;width:min(340px,100%)}
.m-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.m-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;background:#fff;color:#3d3d44;font:500 12px var(--font);white-space:nowrap;box-shadow:0 1px 2px rgb(14 14 20/.06)}
.m-pill.free{background:#eefaf3;color:#2f8a60;font-weight:600}
.m-pill.hot{animation:tuto-tap 2.4s ease-in-out infinite}
@keyframes tuto-tap{0%,40%{background:#fff;color:#3d3d44}50%,100%{background:#0a0a0c;color:#fff}}
.m-hello{display:flex;flex-direction:column;align-items:center;gap:12px}
.m-logo{width:72px;height:72px;filter:drop-shadow(0 10px 24px rgb(14 14 20/.18))}
.m-search{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;background:#fff;color:#16161a;box-shadow:0 10px 26px rgb(14 14 20/.1);font:500 14px var(--font)}
.m-search svg{flex:none;color:#9b9ba5}
.m-search kbd{margin-left:auto;border-color:#e8e8ec;color:#6c6c76}
.m-type{width:13ch;overflow:hidden;white-space:nowrap;border-right:2px solid var(--violet);animation:tuto-type 3.2s steps(13) infinite alternate,tuto-caret .7s step-end infinite}
@keyframes tuto-type{0%,15%{width:0}85%,100%{width:13ch}}
@keyframes tuto-caret{50%{border-color:transparent}}
.m-hit,.m-group,.m-card{border-radius:var(--r-md);background:rgb(255 255 255/.75);color:#3d3d44}
.m-hit{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:12px}
.m-hit mark{background:#e9e1ff}
.m-group{display:flex;align-items:center;gap:10px;padding:9px 12px;font:600 13px var(--font);color:#0a0a0c}
.m-group small{margin-left:auto;font-weight:500;color:#6c6c76}
.m-group svg{flex:none;transition:transform .2s}
.m-group.open svg{transform:rotate(180deg)}
.m-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.m-tiles i{height:30px;border-radius:var(--r-sm);background:rgb(255 255 255/.75);animation:tuto-pop .4s both}
.m-tiles i:nth-child(2){animation-delay:.08s}.m-tiles i:nth-child(3){animation-delay:.16s}
.m-check{display:flex;align-items:center;gap:8px;font-size:13px;color:#3d3d44}
.m-check b{display:grid;place-items:center;flex:none;width:16px;height:16px;border:1.5px solid #9b9ba5;border-radius:50%;font-size:10px;color:#fff}
.m-check.ok b{border-color:#0a0a0c;background:#0a0a0c}
.m-check.ok span{opacity:.6;text-decoration:line-through}
.m-bar{height:5px;overflow:hidden;border-radius:5px;background:rgb(255 255 255/.75)}
.m-bar i{display:block;width:40%;height:100%;border-radius:inherit;background:var(--grad);animation:tuto-fill 1.2s .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes tuto-fill{from{width:0}}
.m-duo{display:grid;grid-template-columns:1.2fr 1fr;gap:8px;width:min(360px,100%)}
.m-card{display:flex;flex-direction:column;gap:6px;padding:10px;font-size:11px}
.m-card>b{font:600 9px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--tag-violet)}
.m-line{display:flex;align-items:center;gap:6px}
.m-line i{flex:1;height:6px;border-radius:3px;background:#e8e8ec}
.m-line em{font-style:normal;font-size:10px;color:#9b9ba5}
.m-cd{display:flex;gap:4px}
.m-cd span{flex:1;padding:4px 0;border-radius:6px;background:#0a0a0c;color:#fff;font:700 14px/1 var(--font);text-align:center}
.m-cd small{display:block;margin-top:2px;font:500 9px var(--font);color:#9b9ba5}
.m-pdf{align-self:flex-start;padding:5px 9px;border-radius:999px;background:#0a0a0c;color:#fff;font:600 11px var(--font)}
.m-theme{display:flex;align-items:center;gap:16px}
.m-sw{display:flex;flex-direction:column;gap:5px;width:96px;height:64px;padding:8px;border-radius:var(--r-md);box-shadow:0 6px 18px rgb(14 14 20/.1)}
.m-sw i{height:6px;border-radius:3px;background:currentColor;opacity:.25}
.m-sw i:first-child{width:60%;opacity:.6}
.m-sw.l{background:#fff;color:#16161a}
.m-sw.d{background:#0a0a0c;color:#fff}
.m-round{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:#0a0a0c;font:700 20px var(--font);box-shadow:0 10px 26px rgb(14 14 20/.12);animation:tuto-pulse 2s ease-in-out infinite}
@keyframes tuto-pulse{50%{box-shadow:0 0 0 8px rgb(167 140 247/.35)}}


/* ---------- 13. Journal des mises à jour ---------- */
.journal{padding-bottom:72px}
.timeline{display:flex;flex-direction:column;gap:24px}
.entry{display:grid;grid-template-columns:120px 1fr;gap:20px;scroll-margin-top:24px}
.entry-side{position:sticky;top:20px;align-self:start;display:flex;flex-direction:column;gap:6px;font-size:12.5px;line-height:1.4}
.entry-side time span{display:block}
.entry-version{align-self:flex-start;padding:5px 12px;border-radius:999px;background:var(--surface);box-shadow:var(--sh-1);color:var(--ink);font:600 14px var(--font);text-decoration:none}
.entry.latest .entry-version{background:var(--ink);color:var(--bg);box-shadow:none}
.entry-body{min-width:0;padding:24px;border-radius:var(--r-2xl);background:var(--surface);box-shadow:var(--sh-1)}
@media(min-width:768px){.entry-body{padding:32px}}
.entry-badges{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px}
.entry-count{margin-left:auto;font:600 12px var(--font);text-transform:uppercase;color:var(--faint)}
.entry-body h2{margin-bottom:6px;font-size:clamp(22px,2.6vw,28px)}
.entry-summary{margin-bottom:20px}
.changes{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.change{padding:20px;border-radius:var(--r-lg);background:var(--bg)}
.c-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}
.c-head h3{font-size:15px;letter-spacing:-.02em}
.change dl{display:flex;flex-direction:column;gap:6px;margin:0}
.c-row{display:grid;grid-template-columns:84px 1fr;gap:10px;font-size:14px}
.c-row dt{font:600 10px/2.1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.c-row dd{min-width:0;margin:0;color:var(--ink-2);overflow-wrap:anywhere}
.c-before dd{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line)}
.c-after dd{font-weight:500;color:var(--ink)}
.c-then dd{padding-left:10px;border-left:2px solid var(--pink)}
.c-src{margin-top:10px;font-size:12.5px}
.checks{margin-top:48px;padding:24px;border-radius:var(--r-2xl);background:var(--surface);box-shadow:var(--sh-1)}
.checks h2{margin-bottom:4px;font-size:24px}
.checks ul{margin:14px 0 0;padding:0;list-style:none}
.checks li{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line-soft);font-size:14px;color:var(--ink-2)}
.checks time{min-width:230px;font-size:12.5px;color:var(--muted)}
.ck-dot{flex:none;width:8px;height:8px;border-radius:50%}
.ck-dot.ok{background:var(--green)}
.ck-dot.err{background:var(--tag-coral)}
@media(max-width:767px){
  .entry{grid-template-columns:1fr;gap:8px}
  .entry-side{position:static;flex-direction:row;align-items:center;gap:12px}
  .entry-side time span{display:inline}
  .c-row{grid-template-columns:1fr;gap:0}
  .checks time{min-width:0}
}


/* ---------- 14. Outils : pages (ensemble, outil, formulaire client) ---------- */
/* Fil d'Ariane collé en haut, en verre dépoli ; la page en cours en pastille encre */
.crumbs{position:sticky;top:0;z-index:30;background:var(--stuck);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line-soft);font-size:13px}
.crumbs .wrap{display:flex;align-items:center;gap:6px;min-height:44px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.crumbs .wrap::-webkit-scrollbar{display:none}
.crumbs a{padding:4px 8px;border-radius:999px;color:var(--muted);text-decoration:none;transition:background-color .15s,color .15s}
.crumbs a:hover{background:var(--hover);color:var(--ink)}
.crumbs .sep{color:var(--faint)}
.crumbs [aria-current]{padding:4px 12px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:600}
.tool-main{padding-top:8px;padding-bottom:64px}
/* Page d'ensemble : recherche collante sous le fil d'Ariane, puis une carte par catégorie */
.tool-filter{position:sticky;top:44px;z-index:10;margin-bottom:8px;padding:12px 0 10px;background:var(--bg);box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax)}
.tool-filter .search input{padding-right:16px}
.tool-cat{display:flex;flex-direction:column;gap:20px;margin-top:16px;padding:24px;border-radius:var(--r-2xl);background:var(--surface);box-shadow:var(--sh-1);scroll-margin-top:190px}
@media(min-width:768px){.tool-cat{padding:32px}}
.tool-cat-head{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.tool-cat-head h2{font-size:clamp(24px,3vw,32px)}
.tool-cat-head p:last-child{max-width:70ch}
.tool-cat:nth-child(3n+2) .badge{background:var(--tag-coral-bg);color:var(--tag-coral)}
.tool-cat:nth-child(3n) .badge{background:var(--tag-blue-bg);color:var(--tag-blue)}
.tool-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:768px){.tool-grid{grid-template-columns:repeat(2,1fr)}}
.tool-tile{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:16px 18px;border:1px solid transparent;border-radius:var(--r-lg);background:var(--bg);text-decoration:none;
  transition:background-color .25s,border-color .25s,box-shadow .35s,transform .35s var(--ease)}
.tool-tile:hover{border-color:var(--line);background:var(--surface);box-shadow:var(--sh-2);transform:translateY(-2px)}
.page-shootiful .tool-tile{background:var(--surface);box-shadow:var(--sh-1)}
.tool-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);background:var(--surface);box-shadow:0 0 0 1px var(--line);font-size:22px}
.tool-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.tool-name{font:600 15px/1.3 var(--font);letter-spacing:-.02em;color:var(--ink)}
.tool-desc{font-size:13px;line-height:1.5}
.tool-go{display:grid;place-items:center;width:32px;height:32px;border-radius:999px;background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);transition:background-color .2s,color .2s}
.tool-tile:hover .tool-go{background:var(--ink);color:var(--bg)}
/* Bas de page d'outil : « À voir aussi » et retour */
.related{padding-bottom:64px}
.related h2{margin-bottom:16px;font-size:24px}
.related .tool-tile{background:var(--surface);box-shadow:var(--sh-1)}
.related-back{display:flex;justify-content:center;margin-top:20px}
.client-brand{font:700 15px var(--font);color:var(--ink)}


/* ---------- 15. Outils : briques des formulaires ---------- */
.tool{display:flex;flex-direction:column;gap:16px;scroll-margin-top:64px}
.tool [hidden]{display:none!important}
/* Cartes de formulaire ; .ink = carte sombre (résultats mis en avant) */
.panel-card{min-width:0;padding:20px;border-radius:24px;background:var(--surface);box-shadow:var(--sh-1)}
@media(min-width:768px){.panel-card{padding:28px}}
.panel-card h2,.panel-h{margin-bottom:4px;font-size:20px;line-height:1.25;letter-spacing:-.03em;color:var(--ink)}
.panel-sub{margin-bottom:16px;font-size:13px}
.panel-card.ink{background:#0a0a0c;color:rgb(250 250 250/.75)}
.dark .panel-card.ink{background:#1c1c22}
.panel-card.ink h2,.panel-card.ink h3,.panel-card.ink b{color:#fafafa}
.panel-card.ink .btn-ink{background:#fafafa;color:#0a0a0c}
.panel-card.ink .btn-white{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgb(255 255 255/.25)}
.panel-card.ink .out{border-color:rgb(255 255 255/.12);background:rgb(255 255 255/.06);color:#fff}
.panel-card.ink .bar{background:rgb(255 255 255/.15)}
.panel-card.ink :focus-visible{outline-color:#fff}
/* Grilles */
.split{display:grid;grid-template-columns:1fr;align-items:start;gap:16px}
@media(min-width:960px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.split.wide-r{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.split .sticky{position:sticky;top:60px}}
.row2{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:560px){.row2{grid-template-columns:1fr 1fr}.row3{grid-template-columns:1fr 1fr 1fr}}
.stack{display:flex;flex-direction:column;gap:14px}
.hr{margin:6px 0;border:0;border-top:1px solid var(--line)}
.sec-label,.cl-sec{margin:8px 0 0;font:600 11px/1.3 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.cl-sec{margin:14px 0 6px}
.cl-sec:first-child{margin-top:0}
/* Champs */
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
fieldset.fld{margin:0;padding:0;border:0}
.fld>span,.fld>legend{padding:0;font:600 13px/1.3 var(--font);color:var(--ink)}
.fld small,.hint{font-size:12px;line-height:1.5;color:var(--muted)}
.in,.fld input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),.fld select,.fld textarea,.add-line input{
  width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);outline:none;
  font:400 14px var(--font);color:var(--ink);transition:border-color .15s,box-shadow .15s}
.fld textarea{min-height:88px;line-height:1.5;resize:vertical}
.fld select{appearance:none;-webkit-appearance:none;padding-right:36px;background-repeat:no-repeat;background-size:5px 5px;background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%)}
.in:focus,.fld input:focus,.fld select:focus,.fld textarea:focus,.add-line input:focus{border-color:transparent;box-shadow:0 0 0 2px #d9ccff}
.dark .in:focus,.dark .fld input:focus,.dark .fld select:focus,.dark .fld textarea:focus{box-shadow:0 0 0 2px rgb(187 168 255/.5)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--faint);opacity:1}
.fld input[type=range]{width:100%;accent-color:var(--violet)}
.counter{align-self:flex-end;font:500 11px var(--mono);color:var(--muted)}
.counter.over{color:var(--tag-coral);font-weight:700}
.add-line{display:flex;gap:8px}
.add-line input{flex:1}
/* Options à cocher en pastilles */
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{position:relative;display:inline-flex}
.opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opt span{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 13px;border-radius:999px;background:var(--bg);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);font:500 13px/1.2 var(--font);transition:background-color .15s,color .15s}
.opt:hover span{box-shadow:inset 0 0 0 1px var(--faint)}
.opt input:checked+span{background:var(--ink);color:var(--bg);box-shadow:none}
.opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.opt input[type=checkbox]:checked+span::before{content:"✓";font-weight:700}
/* Interrupteur oui / non */
.switch{display:flex;align-items:center;gap:10px;font:500 14px var(--font);color:var(--ink-2);cursor:pointer}
.switch input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:40px;height:24px;margin:0;border-radius:99px;background:var(--line);cursor:pointer;transition:background-color .15s}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0/.2);transition:transform .15s}
.switch input:checked{background:var(--ink)}
.switch input:checked::after{transform:translateX(16px);background:var(--bg)}
/* Encadrés : .warn (attention), .ok (bon), .bad (problème) */
.callout{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--r-lg);background:var(--bg);color:var(--ink-2);font-size:13px;line-height:1.55}
.callout>.ci{flex:none;font-size:18px;line-height:1.2}
.callout p+p{margin-top:6px}
.callout.warn{background:#fff6e8}
.callout.ok{background:var(--tag-green-bg)}
.callout.bad{background:var(--tag-coral-bg)}
.dark .callout.warn{background:rgb(255 209 102/.1)}
.callout a{font-weight:600}
.vchecks{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.vchecks li{position:relative;padding-left:28px;font-size:13px;line-height:1.5}
.vchecks li::before{position:absolute;left:0;top:1px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font:700 11px/1 var(--font)}
.vchecks li.ok::before{content:"✓";background:var(--tag-green-bg);color:var(--tag-green)}
.vchecks li.warn::before{content:"!";background:#fff1d6;color:#93641c}
.vchecks li.bad::before{content:"×";background:var(--tag-coral-bg);color:var(--tag-coral)}
/* Chiffres ; .hot = chiffre principal, en dégradé */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kpi{padding:12px 14px;border-radius:var(--r-md);background:var(--bg)}
.kpi dt,.kpi .k-l{font-size:12px}
.kpi dd,.kpi .k-v{display:block;margin:2px 0 0;font:700 22px/1.2 var(--font);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi small{display:block;font-size:12px}
.kpi.hot{background:var(--grad);color:#0a0a0c}
.kpi.hot dd,.kpi.hot .k-v,.kpi.hot small{color:#0a0a0c}
.ink .kpi{background:rgb(255 255 255/.06);color:rgb(255 255 255/.75)}
.ink .kpi dd,.ink .kpi .k-v{color:#fff}
.ink .kpi.hot{background:var(--grad);color:#0a0a0c}
.ink .kpi.hot dd,.ink .kpi.hot .k-v,.ink .kpi.hot small{color:#0a0a0c}
.fm-basics .kpi .k-v{font-size:17px;letter-spacing:0}
/* Tableaux */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,.tbl td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{background:var(--bg);font:600 12px var(--font);color:var(--ink)}
.tbl tr:last-child td{border-bottom:0}
.tbl td.num{color:var(--ink);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl tfoot td{font-weight:600;color:var(--ink)}
/* Texte produit (nom de fichier, bio…) */
.out{position:relative;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg);color:var(--ink-2);font-size:14px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.out.mono{font:500 13px/1.7 var(--mono)}
.out-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.out-head h3{font-size:14px}
/* Étapes des formulaires guidés */
.steps{display:flex;gap:6px;margin:0 0 16px;padding:0;overflow-x:auto;list-style:none;counter-reset:s;scrollbar-width:none}
.steps li{flex:1;min-width:110px}
.steps button{display:flex;align-items:center;gap:8px;width:100%;padding:0 0 8px;border:0;border-bottom:3px solid var(--line);background:none;color:var(--muted);font:600 13px var(--font);text-align:left;cursor:pointer}
.steps button::before{counter-increment:s;content:counter(s);display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--line);color:var(--ink-2);font-size:11px}
.steps [aria-current=step]{border-color:var(--ink);color:var(--ink)}
.steps [aria-current=step]::before,.steps .done::before{background:var(--ink);color:var(--bg)}
.steps .done{border-color:var(--faint)}
.step-nav{margin-top:8px}
/* Barre de progression et petites pastilles d'état */
.bar{height:8px;overflow:hidden;border-radius:99px;background:var(--line-soft)}
.bar i{display:block;width:0;height:100%;background:var(--grad);transition:width .25s}
.pill{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:999px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font:600 11px/1.6 var(--font);letter-spacing:.04em;text-transform:uppercase}
.pill.ok{background:var(--tag-green-bg);color:var(--tag-green);box-shadow:none}
.pill.hot{background:var(--grad);color:#0a0a0c;box-shadow:none}
.pill.blue{background:var(--tag-blue-bg);color:var(--tag-blue);box-shadow:none}
/* Questions dépliables (guides) */
.gd{border-radius:var(--r-lg);background:var(--bg)}
.gd summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;list-style:none;font:600 14px/1.4 var(--font);color:var(--ink);cursor:pointer}
.gd summary::-webkit-details-marker{display:none}
.gd summary::after{content:"+";display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--surface);box-shadow:var(--sh-1);font:500 18px/1 var(--font);transition:transform .2s}
.gd[open] summary::after{transform:rotate(45deg)}
.gd-b{padding:0 16px 14px;font-size:14px;line-height:1.6}
.gd-b p+p{margin-top:8px}
/* Choix d'une version (checklists, export) ; aperçu du questionnaire ; zone de partage */
.versions{flex-wrap:wrap;overflow:visible;padding-top:0}
.q-preview .fld>span,.q-preview legend{font-weight:600}
.share{background:var(--tag-violet-bg)}


/* ---------- 16. Outils : documents à imprimer (toujours sur papier blanc) ---------- */
.doc{padding:28px 24px;border-radius:var(--r-md);background:#fff;color:#27272b;box-shadow:var(--sh-2);font-size:13px;line-height:1.6}
@media(min-width:768px){.doc{padding:40px 44px}}
.doc h2{margin-bottom:4px;font-size:20px;line-height:1.25;color:#0a0a0c}
.doc h3{margin:18px 0 6px;padding-left:8px;border-left:3px solid var(--pink);font:700 12px/1.3 var(--font);letter-spacing:.08em;text-transform:uppercase;color:#0a0a0c}
.doc p{margin:0 0 8px}
.doc ul{margin:0 0 8px;padding-left:18px}
.doc b,.doc strong{color:#0a0a0c}
.doc a{color:#0a0a0c}
.doc .d-meta{margin-bottom:14px;font-size:12px;color:#6c6c76}
.doc .d-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.doc .d-sign{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
.doc .d-sign div{min-height:84px;padding-top:8px;border-top:1px solid #d6d6dd;font-size:12px;color:#55555e}
.doc .d-note{margin-top:18px;padding-top:10px;border-top:1px solid #e8e8ec;font-size:11px;color:#6c6c76}
.doc .blank{color:#9b9ba5}
.doc table{width:100%;margin:4px 0 10px;border-collapse:collapse}
.doc td,.doc th{padding:6px 4px;border-bottom:1px solid #e8e8ec;text-align:left;vertical-align:top}
.doc th{width:38%;font-weight:600;color:#3d3d44}
.doc .d-check{padding:0;list-style:none}
.doc .d-check li{position:relative;padding:3px 0 3px 26px}
.doc .d-check li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border:1.5px solid #6c6c76;border-radius:3px}
#printZone{display:none}


/* ---------- 17. Outils : moodboard, nommage, formats d'export ---------- */
/* Moodboard */
.mb-search input{padding-left:44px}
.mb-tone{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.mb-tone .fld{flex-direction:row}
.mb-secs{display:grid;grid-template-columns:1fr;grid-auto-flow:row dense;gap:12px}
@media(min-width:768px){.mb-secs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.mb-secs{grid-template-columns:repeat(3,1fr)}}
.mb-secs .mb-colors{grid-column:1/-1}
.mb-sec{display:flex;flex-direction:column;gap:8px;min-width:0;padding:14px;border-radius:var(--r-lg);background:var(--bg)}
.mb-sec .sec-label{margin:0}
.mb-sec ul{margin:0;padding-left:18px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.mb-sec li+li{margin-top:4px}
.mb-note{width:100%;min-height:64px;font:400 13px/1.5 var(--font);resize:vertical}
.mb-note-p{white-space:pre-wrap}
.mb-note-p:empty{display:none}
.mb-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mb-thumbs img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-sm)}
.mb-pal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(min-width:640px){.mb-pal{grid-template-columns:repeat(5,1fr)}}
.mb-sec .mb-pal{grid-template-columns:repeat(3,1fr)}
.mb-sw{display:flex;flex-direction:column;gap:6px;min-width:0;padding:6px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);text-align:left;cursor:pointer;transition:border-color .15s}
.mb-sw:hover{border-color:var(--faint)}
.mb-sw code{padding:0 2px 2px;overflow:hidden;font:600 11px var(--mono);color:var(--ink);text-overflow:ellipsis}
.mb-sw small{padding:0 2px;font-size:9px;color:var(--muted)}
.mb-chip{display:block;width:100%;height:56px;border:1px solid rgb(0 0 0/.06);border-radius:var(--r-sm)}
.mb-edit{grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.mb-edit{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1000px){.mb-edit{grid-template-columns:repeat(6,1fr)}}
.mb-edit .mb-sw{gap:4px;cursor:default}
.mb-edit .mb-sw.is-base{border-color:var(--violet);box-shadow:0 0 0 1px var(--violet)}
.mb-pick{position:relative;height:64px;cursor:pointer}
.mb-pick input{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;opacity:0;cursor:pointer}
.mb-pick:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.mb-role{font:700 10px/1.3 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.mb-hex{min-height:32px!important;padding:4px 8px!important;font:600 12px var(--mono)!important;text-transform:uppercase}
.mb-act{display:flex;gap:2px}
.mb-act button{flex:1;min-height:30px;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink-2);font:600 13px var(--font);cursor:pointer}
.mb-act button:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.mb-act button:disabled{opacity:.35;cursor:default}
.mb-add{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:150px;border:2px dashed var(--line);border-radius:var(--r-md);background:none;color:var(--muted);font:700 24px var(--font);cursor:pointer}
.mb-add span{font:600 12px var(--font)}
.mb-add:hover{border-color:var(--ink);color:var(--ink)}
.mb-harm{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.mb-harm .sec-label{display:flex;align-items:center;gap:6px;margin:0}
.mb-harm code{font:600 11px var(--mono);color:var(--ink)}
.mb-hrow{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-soft)}
@media(max-width:560px){.mb-hrow{grid-template-columns:1fr auto}.mb-hrow .mb-htx{grid-column:1/-1}}
.mb-htx b{display:block;font-size:13px}
.mb-htx small{font-size:12px}
.mb-hcols{display:flex;gap:4px}
.mb-dot{display:inline-block;width:28px;height:28px;padding:0;border:1px solid rgb(0 0 0/.1);border-radius:var(--r-sm);cursor:pointer}
.mb-dot:hover{transform:translateY(-1px);box-shadow:var(--sh-1)}
.mb-dot-lg{width:16px;height:16px;border-radius:4px;cursor:default}
.mb-checks{margin-top:4px}
#tones button:disabled,#ncol button:disabled{opacity:.45;cursor:not-allowed}
/* Dépôt d'images */
.drop{position:relative;display:grid;place-items:center;min-height:120px;padding:20px;border:2px dashed var(--line);border-radius:var(--r-lg);font-size:14px;text-align:center;cursor:pointer;transition:border-color .15s,background-color .15s}
.drop:hover,.drop.over{border-color:var(--violet);background:var(--tag-violet-bg)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.mb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:640px){.mb-grid{grid-template-columns:repeat(4,1fr)}}
.mb-grid:empty{display:none}
.mb-img{position:relative;margin:0;overflow:hidden;border-radius:var(--r-md);background:var(--bg)}
.mb-img img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.mb-img figcaption{padding:6px}
.mb-img select.in{min-height:34px;padding:4px 8px;font-size:12px}
.mb-img .del{position:absolute;top:6px;right:6px;width:28px;height:28px;border:0;border-radius:50%;background:rgb(0 0 0/.6);color:#fff;font-size:16px;cursor:pointer}
/* Version imprimée du moodboard : trois rubriques par ligne, sur papier */
.doc.mb-print .mb-secs{grid-template-columns:repeat(3,1fr);margin-top:12px}
.doc.mb-print .mb-sec{break-inside:avoid;background:#fafafa}
.doc.mb-print .mb-sec ul,.doc.mb-print .mb-note-p{font-size:11px;color:#27272b}
.doc.mb-print .mb-pal{grid-template-columns:repeat(5,1fr)}
.doc.mb-print .mb-sw{padding:3px;border-color:#e8e8ec;background:#fff}
.doc.mb-print .mb-chip{height:34px}
.doc.mb-print .mb-sw code{font-size:8px;color:#27272b}
.doc.mb-print .small{color:#6c6c76}
/* Nommage des fichiers */
.nm-list{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.nm-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r-md);background:var(--bg)}
.nm-move{display:flex;gap:4px}
.nm-move .btn{width:32px;padding:0}
.nm-steps{margin:0;padding-left:20px;font-size:13px;line-height:1.6;color:var(--ink-2)}
.nm-steps li+li{margin-top:6px}
/* Formats de fichiers (guide d'export) */
.fm-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:768px){.fm-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.fm-grid{grid-template-columns:repeat(3,1fr)}}
.fm,.fm-card{scroll-margin-top:190px}
.fm-card{display:flex;flex-direction:column;gap:10px;min-width:0;padding:18px;border-radius:var(--r-lg);background:var(--bg)}
.fm-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px}
.fm-name{font-size:20px;line-height:1.2}
.fm-head code{font:500 12px var(--mono);color:var(--muted)}
.fm-desc{font-size:13px;line-height:1.55;color:var(--ink-2)}
.fm-weight{display:flex;align-items:center;gap:4px;font:700 11px var(--font);letter-spacing:.06em;text-transform:uppercase}
.fm-weight span{margin-right:6px}
.fm-weight i{width:18px;height:6px;border-radius:99px;background:var(--line)}
.fm-weight i.on{background:var(--violet)}
.fm-ok,.fm-no{font-size:13px;line-height:1.5}
.fm-ok b,.fm-no b{display:block;margin-bottom:2px;font:700 11px/1.4 var(--font);letter-spacing:.08em;text-transform:uppercase}
.fm-ok b{color:var(--tag-green)}
.fm-no b{color:var(--tag-coral)}


/* ---------- 18. Outils : calculateur CODB (espace Shootiful) ---------- */
/* Onglets et résultat dans une barre collante sous le fil d'Ariane ; chaque bloc de dépenses en tableau */
.cd-top{position:sticky;top:44px;z-index:9;display:flex;flex-direction:column;gap:8px;padding:8px 0;background:var(--bg);box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax)}
.cd-sum{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:8px;border-radius:var(--r-xl);background:#0a0a0c;box-shadow:var(--sh-2)}
.dark .cd-sum{background:#1c1c22}
@media(min-width:768px){.cd-sum{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.cd-k{display:flex;flex-direction:column;gap:1px;min-width:0;padding:8px 12px;border-radius:var(--r-md);background:rgb(255 255 255/.06);color:rgb(255 255 255/.75)}
.cd-k span,.cd-k small{font-size:11px;line-height:1.3}
.cd-k b{font:700 20px/1.2 var(--font);letter-spacing:-.02em;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.cd-k.hot{background:var(--grad)}
.cd-k.hot span,.cd-k.hot small,.cd-k.hot b{color:#0a0a0c}
@media(max-width:767px){.cd-k:nth-child(n+3){display:none}.cd-k b{font-size:17px}}
.cd-body{margin-top:8px}
.cd-grid{display:grid;grid-template-columns:1fr;align-items:start;gap:16px}
@media(min-width:900px){.cd-grid{grid-template-columns:1fr 1fr}.cd-grid>:last-child{grid-column:1/-1}}
.cd-block .panel-sub{margin-bottom:0}
.cd-block .panel-h{margin-top:2px;font-size:24px}
.cd-block[data-b] .out-head{align-items:flex-start}
.cd-lab{display:block;font-weight:600;color:var(--ink)}
.cd-tip{display:block;max-width:60ch;margin-top:3px;font-size:12px;line-height:1.45;color:var(--muted)}
.cd-tbl td{padding-top:12px;padding-bottom:12px;vertical-align:middle}
.cd-tbl .cd-l{min-width:220px;color:var(--ink-2)}
.cd-tbl th:nth-child(n+2),.cd-tbl td:nth-child(n+2){width:150px}
.cd-tbl th:last-child,.cd-tbl td:last-child{width:36px;padding-right:4px;padding-left:0}
.cd-tbl input.in{width:100%;min-width:72px;min-height:38px;padding:6px 8px;font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.cd-tbl input.cd-name{text-align:left}
.cd-tbl .del{padding:2px 6px;border:0;border-radius:var(--r-sm);background:none;color:var(--muted);font-size:18px;cursor:pointer}
.cd-tbl .del:hover{background:var(--tag-coral-bg);color:var(--tag-coral)}
.cd-cur td{background:var(--tag-violet-bg)}
.cd-amort-f{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin-top:10px}
.cd-amort-f .fld{flex:1;min-width:120px}
.cd-guide span{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ink);color:var(--bg);font:700 11px var(--font)}
.cd-credit .callout p+p{margin-top:8px}
.cd-short{display:none}
/* Sur mobile : chaque dépense en carte (intitulé, puis mois / an / total) */
@media(max-width:640px){
  .cd-long{display:none}
  .cd-short{display:inline}
  .cd-tbl,.cd-tbl tbody,.cd-tbl tfoot{display:block}
  .cd-tbl thead{display:none}
  .cd-tbl tr{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;border-bottom:1px solid var(--line)}
  .cd-tbl tfoot tr{border-bottom:0;background:var(--bg)}
  .cd-tbl td{display:block;width:auto!important;min-width:0!important;padding:0!important;border:0!important}
  .cd-tbl td.cd-l,.cd-tbl tfoot td:first-child{grid-column:1/-1}
  .cd-tbl td:nth-child(2)::before,.cd-tbl td:nth-child(3)::before{display:block;margin-bottom:3px;font:600 11px var(--font);color:var(--muted);text-align:left}
  .cd-tbl td:nth-child(2)::before{content:"Par mois"}
  .cd-tbl td:nth-child(3)::before{content:"Par an"}
  .cd-tbl td:nth-child(4){grid-column:1/-1;text-align:right}
  .cd-tbl td:nth-child(4)::before{content:"Total annuel : ";font:600 12px var(--font);color:var(--muted)}
  .cd-tbl td:last-child:empty{display:none}
  .cd-tbl td:last-child:not(:empty){position:absolute;top:8px;right:8px}
}
/* Crédit de Jodie (créatrice du tableur d'origine) : prénom en dégradé animé, étincelle */
.jodie{position:relative;display:inline-block;padding:0 .12em;background:linear-gradient(90deg,var(--coral),var(--pink),var(--violet),var(--pink),var(--coral));background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;text-decoration:none;animation:jodie-wave 5s linear infinite;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.jodie::after{content:"✨";position:absolute;top:-.75em;right:-.85em;font-size:.72em;-webkit-text-fill-color:initial;animation:jodie-twinkle 2.2s ease-in-out infinite}
.jodie:hover{transform:translateY(-2px) rotate(-3deg) scale(1.08)}
.jodie .sr{-webkit-text-fill-color:initial}
@keyframes jodie-wave{to{background-position:300% 0}}
@keyframes jodie-twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.15) rotate(20deg)}}


/* ---------- 19. Bascule de thème animée (site.js + View Transitions) ----------
   Vers le sombre, un rond naît du bouton et grossit ; vers le clair, l'ancien sombre se rétracte dans le bouton.
   --kit-x, --kit-y (centre du bouton), --kit-r0 (son rayon) et --kit-rmax (coin le plus loin) sont posés par site.js. */
@property --kit-r{syntax:"<length>";inherits:true;initial-value:0px}
html.theme-anim::view-transition-old(root),html.theme-anim::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.theme-grow::view-transition-old(root){z-index:1}
html.theme-grow::view-transition-new(root){z-index:2;clip-path:circle(var(--kit-r) at var(--kit-x) var(--kit-y));animation:theme-grow .8s cubic-bezier(.65,0,.25,1) both}
html.theme-shrink::view-transition-new(root){z-index:1}
html.theme-shrink::view-transition-old(root){z-index:2;clip-path:circle(var(--kit-r) at var(--kit-x) var(--kit-y));animation:theme-shrink .8s cubic-bezier(.65,0,.25,1) both}
@keyframes theme-grow{from{--kit-r:var(--kit-r0)}to{--kit-r:var(--kit-rmax)}}
@keyframes theme-shrink{from{--kit-r:var(--kit-rmax)}to{--kit-r:var(--kit-r0)}}


/* ---------- 20. Impression ----------
   Boîte métier (PDF téléchargeable, généré par scripts/make-pdf.sh) : toujours en clair, tout déplié, sans les commandes.
   Outils : seul le document choisi sort (copié dans #printZone par ST.print). */
@page{size:A4;margin:14mm 12mm}
@media print{
  html,body{background:#fff!important}
  body{font-size:9.5pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .skip,.topnav,.top-actions,.hero-glow,.hero-pill,.cta-row,.controls,.to-top,.toast,.empty,.extra,.help-line,.tuto,.foot-cols,.foot-visits,.chev,.tile-info .link-btn,noscript{display:none!important}
  .hero{margin:0;padding:12px 0 8px}
  .hero h1{font-size:28pt}
  h1 em,h2 em{background:none;color:#e0607e}
  .wrap{max-width:none;padding:0}
  .groups{padding:0}
  .group{gap:10px;margin-top:22px;padding:0;border-radius:0;background:#fff;box-shadow:none}
  .group.collapsed .bento{display:grid}
  .group.collapsed .group-desc{display:block}
  .group-head{break-after:avoid}
  .group-title{font-size:18pt}
  .bento{grid-template-columns:repeat(2,1fr)!important;gap:8px}
  .tile{gap:5px;padding:10px 12px;break-inside:avoid;border:1px solid #e8e8ec;background:#fafafa}
  .tile.wide{grid-column:span 2}
  .tile-desc{font-size:9pt}
  .foot{padding:16px 0 0;break-inside:avoid}
  .entry,.change{break-inside:avoid}
  .entry-side{position:static}
  /* Outils : uniquement le document */
  body.printing>*:not(#printZone){display:none!important}
  body.printing #printZone{display:block}
  #printZone .doc{padding:0;border-radius:0;box-shadow:none;font-size:10.5pt}
  #printZone a{color:inherit;text-decoration:none}
  .jodie{background:none;color:var(--pink);-webkit-text-fill-color:var(--pink)}
  .jodie::after{display:none}
}


/* ---------- 21. Mouvement réduit ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}