/*
Theme Name: ZMB.fr
Theme URI: https://zmb.fr
Author: Geoffrey Zamboni
Description: Thème de ZMB.fr, boîte à outils du quotidien et blog de découvertes. Blanc, un trait fin et un point menthe.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: zmb-fr
*/

/* Polices */
@font-face{font-family:"Outfit";src:url("assets/fonts/Outfit-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Spline Sans Mono";src:url("assets/fonts/SplineSansMono-latin.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

/* Jetons */
:root{
  --fond:#ffffff;--surface:#f7f9f8;--encre:#14161c;--encre-douce:#596070;
  --menthe:#00d3aa;--sur-menthe:#0b1f1a;--menthe-pale:#dff7f0;--accent:#00a383;--lien:#007a62;
  --inverse:#14161c;--sur-inverse:#ffffff;--trait:#e4e7ea;--trait-fort:#7f8594;--focus:#007a62;
  --succes:#0a7355;--alerte:#86590a;--erreur:#b92d1c;
  --ombre-flottante:0 8px 28px rgba(20,22,28,.12);
  --font-sans:"Outfit","Century Gothic",sans-serif;--font-mono:"Spline Sans Mono","Courier New",monospace;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;
  --radius-sm:8px;--radius-md:16px;--radius-rond:999px;
  --largeur:1120px;--mesure:600px;--marge:var(--space-4);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fond:#0f1a18;--surface:#182624;--encre:#f4f7f6;--encre-douce:#a9b6b2;
    --menthe-pale:#143a33;--accent:#00d3aa;--lien:#5fe6c8;
    --inverse:#f4f7f6;--sur-inverse:#14161c;--trait:#2a3a36;--trait-fort:#7a8a85;--focus:#00d3aa;
    --succes:#4fd6ac;--alerte:#f0c04a;--erreur:#ff9a8a;
    --ombre-flottante:0 8px 28px rgba(0,0,0,.5);
    color-scheme:dark;
  }
  :root:not([data-theme="light"]) .zmb-clair{display:none}
  :root:not([data-theme="light"]) .zmb-sombre{display:block}
}
:root[data-theme="dark"]{
  --fond:#0f1a18;--surface:#182624;--encre:#f4f7f6;--encre-douce:#a9b6b2;
  --menthe-pale:#143a33;--accent:#00d3aa;--lien:#5fe6c8;
  --inverse:#f4f7f6;--sur-inverse:#14161c;--trait:#2a3a36;--trait-fort:#7a8a85;--focus:#00d3aa;
  --succes:#4fd6ac;--alerte:#f0c04a;--erreur:#ff9a8a;
  --ombre-flottante:0 8px 28px rgba(0,0,0,.5);
  color-scheme:dark;
}
.zmb-clair{display:block}.zmb-sombre{display:none}
:root[data-theme="dark"] .zmb-clair{display:none}
:root[data-theme="dark"] .zmb-sombre{display:block}
@media (min-width:768px){:root{--marge:var(--space-8)}}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--space-6)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--fond);color:var(--encre);font:400 17px/28px var(--font-sans);-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto}
:where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol,dl,pre){margin:0}
a{color:var(--lien)}
::selection{background:var(--menthe-pale);color:var(--encre)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
.zmb-principal{flex:1}
.zmb-conteneur{width:min(var(--largeur),100% - 2*var(--marge));margin-inline:auto}
.zmb-evitement{position:absolute;left:var(--space-4);top:-100px;z-index:10;padding:var(--space-3) var(--space-6);background:var(--inverse);color:var(--sur-inverse);border-radius:var(--radius-rond)}
.zmb-evitement:focus{top:var(--space-2)}

/* Typographie */
.zmb-affiche{font:200 clamp(52px,9vw,72px)/1.06 var(--font-sans);letter-spacing:-.01em}
.zmb-point{color:var(--accent)}
.zmb-titre-1{font:300 clamp(32px,5vw,44px)/1.15 var(--font-sans);overflow-wrap:break-word}
.zmb-titre-2{font:300 clamp(25px,3.4vw,30px)/1.27 var(--font-sans)}
.zmb-titre-3{font:500 20px/28px var(--font-sans)}
.zmb-titre-2 a,.zmb-titre-3 a{color:inherit;text-decoration:none}
.zmb-titre-2 a:hover,.zmb-titre-3 a:hover{color:var(--lien)}
.zmb-chapeau{margin-top:var(--space-2);font:300 21px/32px var(--font-sans);color:var(--encre-douce)}
.zmb-meta{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);font:400 13px/18px var(--font-sans);color:var(--encre-douce)}
.zmb-meta a{color:inherit;text-decoration:none}
.zmb-meta a:hover{color:var(--lien);text-decoration:underline}
.zmb-mesure{max-width:var(--mesure)}
.zmb-mesure-page{max-width:calc(var(--mesure) + 2*var(--marge))}
.zmb-aucun{color:var(--encre-douce);padding-block:var(--space-8)}

/* En-tête */
.zmb-tete{border-bottom:1px solid var(--trait)}
.zmb-tete__ligne{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-3)}
.zmb-logo{display:block;flex:none}
.zmb-logo img{height:28px;width:auto}
.zmb-nav{display:flex;align-items:center;gap:var(--space-1)}
.zmb-nav__liste{display:flex;flex-wrap:wrap;gap:var(--space-4);list-style:none;margin:0 var(--space-2) 0 0;padding:0}
.zmb-nav__liste a{color:var(--encre);font:500 15px/22px var(--font-sans);text-decoration:none}
.zmb-nav__liste a:hover{color:var(--lien)}
.zmb-nav__liste a[aria-current],.zmb-nav__liste .current-menu-item a{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px}
.zmb-icone-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:none;border:0;border-radius:var(--radius-rond);color:var(--encre);cursor:pointer}
.zmb-icone-btn:hover{background:var(--menthe-pale)}
.zmb-icone-btn svg{width:18px;height:18px}
@media (min-width:768px){
  .zmb-logo img{height:36px}
  .zmb-nav__liste{gap:var(--space-6);margin-right:var(--space-4)}
}

/* Pied */
.zmb-pied{margin-top:var(--space-16);background:var(--inverse);color:var(--sur-inverse)}
.zmb-pied__ligne{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-8)}
.zmb-pied nav{display:flex;gap:var(--space-6)}
.zmb-pied nav a{color:inherit;font:500 15px/22px var(--font-sans);text-decoration:none}
.zmb-pied nav a:hover{text-decoration:underline}
.zmb-pied :focus-visible{outline-color:var(--menthe)}

/* Boutons */
.zmb-btn,.wp-block-button__link,.wp-element-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border:1px solid transparent;border-radius:var(--radius-rond);font:500 15px/22px var(--font-sans);cursor:pointer;text-decoration:none}
.zmb-btn svg{width:18px;height:18px;flex:none}
.zmb-btn--principal,.wp-block-button__link,.wp-element-button{background:var(--menthe);color:var(--sur-menthe)}
.zmb-btn--principal:hover,.wp-block-button__link:hover,.wp-element-button:hover{background:var(--inverse);color:var(--sur-inverse)}
.zmb-btn--secondaire,.is-style-outline .wp-block-button__link{background:transparent;color:var(--encre);border-color:var(--trait-fort)}
.zmb-btn--secondaire:hover,.is-style-outline .wp-block-button__link:hover{background:var(--menthe-pale);color:var(--encre)}
.zmb-btn:disabled{background:var(--surface);color:var(--encre-douce);border-color:var(--trait);cursor:not-allowed}

/* Champs */
.zmb-champ{display:flex;flex-direction:column;gap:var(--space-2)}
.zmb-champ label,.zmb-recherche label,.comment-form label{font:500 15px/22px var(--font-sans)}
.zmb-champ input,.zmb-champ select,.zmb-champ textarea{width:100%;padding:var(--space-3) var(--space-4);background:var(--fond);color:var(--encre);border:1px solid var(--trait-fort);border-radius:var(--radius-sm);font:400 15px/22px var(--font-mono)}
.zmb-champ small{font:400 13px/18px var(--font-sans);color:var(--encre-douce)}
.zmb-champ--erreur input{border-color:var(--erreur);border-width:2px}
.zmb-champ--erreur small{color:var(--erreur)}
.zmb-recherche{display:flex;flex-direction:column;gap:var(--space-2);max-width:var(--mesure)}
.zmb-recherche__ligne{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.zmb-recherche input,.comment-form input:not([type=submit],[type=checkbox]),.comment-form textarea{width:100%;padding:var(--space-3) var(--space-4);background:var(--fond);color:var(--encre);border:1px solid var(--trait-fort);border-radius:var(--radius-sm);font:400 17px/22px var(--font-sans)}
.zmb-recherche input{flex:1 1 200px;width:auto;min-width:0;-webkit-appearance:none;appearance:none}

/* Progression */
.zmb-progression{--avance:100%;position:relative;height:12px}
.zmb-progression::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--trait)}
.zmb-progression i{position:absolute;left:0;top:5px;height:2px;width:var(--avance);background:var(--accent);transition:width .2s ease}
.zmb-progression i::after{content:"";position:absolute;right:-6px;top:-5px;width:12px;height:12px;border-radius:var(--radius-rond);background:var(--accent)}

/* Accueil */
.zmb-accueil{display:flex;flex-direction:column;gap:var(--space-8);padding-top:var(--space-12)}
.zmb-section{margin-top:var(--space-16)}
.zmb-section>.zmb-titre-2{margin-bottom:var(--space-6)}
.zmb-suite{margin-top:var(--space-8)}
@media (min-width:768px){.zmb-accueil{padding-top:var(--space-16)}}

/* Casier : le clip masque le filet droit de la dernière colonne, quel que soit le nombre de colonnes */
.zmb-casier{display:grid;grid-template-columns:1fr;border-top:1px solid var(--trait);margin-right:-1px;clip-path:inset(0 1px 0 0)}
.zmb-case{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6);border-bottom:1px solid var(--trait);border-right:1px solid var(--trait);color:var(--encre);text-decoration:none}
.zmb-case svg{width:24px;height:24px;color:var(--accent)}
.zmb-case strong{font:500 20px/28px var(--font-sans)}
.zmb-case span{font:400 13px/18px var(--font-sans);color:var(--encre-douce)}
.zmb-case:hover{background:var(--menthe-pale)}
.zmb-case:hover span{color:var(--encre)}
@media (min-width:600px){.zmb-casier{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.zmb-casier{grid-template-columns:repeat(3,1fr)}}

/* Listes d'articles */
.zmb-page{padding-top:var(--space-12)}
.zmb-page__tete{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-12)}
.zmb-filtres{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.zmb-filtres a{padding:var(--space-1) var(--space-4);border:1px solid var(--trait-fort);border-radius:var(--radius-rond);color:var(--encre);font:500 15px/22px var(--font-sans);text-decoration:none}
.zmb-filtres a:hover{background:var(--menthe-pale)}
.zmb-filtres a[aria-current]{background:var(--menthe-pale);border-color:var(--accent)}
.zmb-articles{display:grid;grid-template-columns:1fr;column-gap:var(--space-8)}
.zmb-article{display:flex;flex-direction:column;gap:var(--space-4);padding-block:var(--space-6);border-top:1px solid var(--trait)}
.zmb-article__image{display:block;background:var(--surface);border-radius:var(--radius-md);overflow:hidden}
.zmb-article__image img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain}
.zmb-article__texte{display:flex;flex-direction:column;gap:var(--space-2)}
.zmb-article__extrait{font:400 15px/24px var(--font-sans);color:var(--encre-douce)}
.zmb-article--une{padding-top:var(--space-8);margin-bottom:var(--space-8)}
.zmb-article--une .zmb-article__extrait{font:400 17px/28px var(--font-sans);max-width:var(--mesure)}
@media (min-width:768px){
  .zmb-articles{grid-template-columns:repeat(2,1fr)}
  .zmb-article--une.zmb-article--image{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:center}
}

/* Pagination */
.pagination{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--trait)}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.page-numbers{display:inline-block;padding:var(--space-1) var(--space-4);border-radius:var(--radius-rond);color:var(--encre);font:500 15px/22px var(--font-sans);text-decoration:none}
a.page-numbers:hover{background:var(--menthe-pale)}
.page-numbers.current{background:var(--inverse);color:var(--sur-inverse)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Lecture */
.zmb-lecture{display:grid;grid-template-columns:minmax(0,1fr)}
.zmb-image-une{margin-bottom:var(--space-8);background:var(--surface);border-radius:var(--radius-md);overflow:hidden}
.zmb-image-une img{display:block;width:100%}
.zmb-sommaire{margin-bottom:var(--space-8);padding-block:var(--space-3);border-block:1px solid var(--trait)}
.zmb-sommaire summary{cursor:pointer;font:500 15px/22px var(--font-sans)}
.zmb-sommaire ol{list-style:none;margin:var(--space-3) 0 0;padding:0;display:grid;gap:var(--space-2)}
.zmb-sommaire a{color:var(--encre-douce);font:400 15px/22px var(--font-sans);text-decoration:none}
.zmb-sommaire a:hover{color:var(--lien)}
@media (min-width:1024px){
  .zmb-lecture{grid-template-columns:var(--mesure) minmax(0,1fr);column-gap:var(--space-16)}
  .zmb-lecture>*{grid-column:1}
  .zmb-sommaire{grid-column:2;grid-row:1/span 9;position:sticky;top:var(--space-6);align-self:start;max-width:320px;margin:0;padding:0 0 0 var(--space-6);border-block:0;border-left:1px solid var(--trait)}
  .zmb-sommaire summary{pointer-events:none;list-style:none}
  .zmb-sommaire summary::-webkit-details-marker{display:none}
  .zmb-sommaire a{font:400 13px/18px var(--font-sans)}
}

.zmb-contenu>*+*{margin-top:var(--space-4)}
.zmb-contenu h2{margin-top:var(--space-12);font:300 clamp(25px,3.4vw,30px)/1.27 var(--font-sans)}
.zmb-contenu h3{margin-top:var(--space-8);font:500 20px/28px var(--font-sans)}
.zmb-contenu h4{margin-top:var(--space-6);font:500 17px/28px var(--font-sans)}
.zmb-contenu a:not(.wp-block-button__link){text-underline-offset:2px}
.zmb-contenu ul,.zmb-contenu ol{padding-left:var(--space-6)}
.zmb-contenu li+li{margin-top:var(--space-1)}
.zmb-contenu blockquote,.wp-block-quote{padding-left:var(--space-6);border-left:1px solid var(--trait-fort);color:var(--encre-douce)}
.zmb-contenu hr,.wp-block-separator{margin-block:var(--space-8);border:0;border-top:1px solid var(--trait)}
.zmb-contenu img{border-radius:var(--radius-md)}
.zmb-contenu figure{background:none}
.zmb-contenu figcaption,.wp-element-caption{margin-top:var(--space-2);font:400 13px/18px var(--font-sans);color:var(--encre-douce)}
.zmb-contenu code{font:400 14px/22px var(--font-mono);padding:0 var(--space-1);background:var(--surface);border-radius:4px}
.zmb-contenu pre{padding:var(--space-6);background:var(--surface);border-radius:var(--radius-md);overflow-x:auto;font:400 14px/22px var(--font-mono)}
.zmb-contenu pre code{padding:0;background:none}
.zmb-contenu table{width:100%;border-collapse:collapse;font:400 15px/22px var(--font-sans)}
.zmb-contenu th,.zmb-contenu td{padding:var(--space-2) var(--space-3) var(--space-2) 0;border-bottom:1px solid var(--trait);text-align:left;vertical-align:top}
.zmb-contenu th{font-weight:500}
.zmb-etiquettes{margin-top:var(--space-8)}

/* Articles voisins */
.zmb-voisins{margin-top:var(--space-12);border-top:1px solid var(--trait);padding-top:var(--space-6)}
.zmb-voisins .nav-links{display:grid;grid-template-columns:1fr;gap:var(--space-6)}
.zmb-voisins a{display:flex;flex-direction:column;gap:var(--space-1);color:var(--encre);text-decoration:none}
.zmb-voisins a:hover strong{color:var(--lien)}
.zmb-voisins strong{font:500 15px/22px var(--font-sans)}
@media (min-width:600px){.zmb-voisins .nav-links{grid-template-columns:1fr 1fr}}

/* Commentaires */
.zmb-commentaires{margin-top:var(--space-12);border-top:1px solid var(--trait);padding-top:var(--space-8)}
.zmb-commentaires__liste{list-style:none;margin:var(--space-6) 0 var(--space-8);padding:0}
.zmb-commentaires__liste .children{list-style:none;padding-left:var(--space-6)}
.zmb-commentaires__liste article{padding-block:var(--space-4);border-bottom:1px solid var(--trait)}
.comment-meta{font:400 13px/18px var(--font-sans);color:var(--encre-douce)}
.comment-meta a{color:inherit}
.comment-form{display:grid;gap:var(--space-4);margin-top:var(--space-6)}
.comment-form p{margin:0}
.comment-form label{display:block;margin-bottom:var(--space-2)}
.comment-form-cookies-consent{display:flex;gap:var(--space-2);align-items:flex-start}
.comment-form-cookies-consent label{font:400 13px/18px var(--font-sans);margin:0}
.comment-notes,.logged-in-as{font:400 13px/18px var(--font-sans);color:var(--encre-douce)}

/* Outils */
.zmb-outil__grille{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
.zmb-panneau{display:grid;gap:var(--space-6);align-content:start}
.zmb-resultat{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-6);background:var(--surface);border-radius:var(--radius-md)}
.zmb-valeur{font:400 15px/22px var(--font-mono)}
@media (min-width:768px){.zmb-outil__grille{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Fil d'Ariane */
.zmb-ariane{margin-bottom:var(--space-4)}
.zmb-ariane ol{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-2);list-style:none;margin:0;padding:0;font:400 13px/18px var(--font-sans);color:var(--encre-douce)}
.zmb-ariane li+li::before{content:"\203A";margin-right:var(--space-2)}
.zmb-ariane a{color:inherit;text-decoration:none}
.zmb-ariane a:hover{color:var(--lien);text-decoration:underline}

/* Pied détaillé */
.zmb-pied__ligne{align-items:flex-start;gap:var(--space-8) var(--space-16);justify-content:flex-start}
.zmb-pied .zmb-logo{margin-right:auto}
.zmb-pied nav.zmb-pied__groupe{flex-direction:column;gap:var(--space-2)}
.zmb-pied__groupe p{font:400 13px/18px var(--font-sans);opacity:.7}
@media (max-width:599px){.zmb-pied .zmb-logo{flex-basis:100%}}

/* Accueil complet */
.zmb-perso{margin-top:var(--space-8);display:flex;flex-direction:column;gap:var(--space-2)}
.zmb-perso .zmb-titre-3{font:500 15px/22px var(--font-sans)}
.zmb-section--serree{margin-top:var(--space-6)}
.zmb-puces{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.zmb-puces a{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-4);background:var(--surface);border-radius:var(--radius-rond);color:var(--encre);font:500 15px/22px var(--font-sans);text-decoration:none}
.zmb-puces a:hover{background:var(--menthe-pale)}
.zmb-puces svg{width:14px;height:14px;color:var(--accent);fill:currentColor}
.zmb-ligne+.zmb-ligne{margin-top:var(--space-8)}
.zmb-ligne .zmb-titre-3{margin-bottom:var(--space-3)}
.zmb-casier--ligne{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(200px,62%);overflow-x:auto;scroll-snap-type:x proximity;clip-path:none;margin-right:0}
.zmb-casier--ligne .zmb-case{scroll-snap-align:start}
.zmb-case[hidden]{display:none}
@media (min-width:600px){.zmb-casier--ligne{grid-auto-columns:minmax(220px,40%)}}
@media (min-width:960px){.zmb-casier--ligne{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto;overflow:visible;margin-right:-1px;clip-path:inset(0 1px 0 0)}}
.zmb-badge{display:inline-block;padding:2px var(--space-3);background:var(--menthe-pale);border-radius:var(--radius-rond);color:var(--encre);font:500 13px/18px var(--font-sans)}
.zmb-nouveau{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-6);background:var(--surface);border-radius:var(--radius-md);color:var(--encre);text-decoration:none}
.zmb-nouveau:hover{background:var(--menthe-pale)}
.zmb-nouveau>svg{width:24px;height:24px;flex:none;color:var(--accent)}
.zmb-nouveau__texte{display:flex;flex-direction:column;flex:1;min-width:0}
.zmb-nouveau strong{font:500 20px/28px var(--font-sans)}
.zmb-nouveau__texte span{font:400 13px/18px var(--font-sans);color:var(--encre-douce)}
.zmb-vignette{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;color:var(--trait-fort)}
.zmb-vignette svg{width:40px;height:40px}
.zmb-filtres--blog{margin:0 0 var(--space-8)}
.zmb-article--une{margin-bottom:var(--space-4)}

/* Encart outil */
.zmb-contenu .zmb-encart{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);margin-top:var(--space-8);padding:var(--space-6);background:var(--surface);border-radius:var(--radius-md)}
.zmb-encart>svg{width:24px;height:24px;flex:none;color:var(--accent)}
.zmb-encart div{display:flex;flex-direction:column;flex:1 1 180px}
.zmb-encart strong{font:500 20px/28px var(--font-sans)}
.zmb-encart span{font:400 13px/18px var(--font-sans);color:var(--encre-douce)}
.zmb-contenu .zmb-encart a{text-decoration:none}

/* Page outil complète */
.zmb-outil__titre{display:flex;align-items:center;gap:var(--space-2)}
.zmb-favori svg{width:22px;height:22px}
.zmb-favori[aria-pressed="true"]{color:var(--accent)}
.zmb-favori[aria-pressed="true"] svg{fill:currentColor}
.zmb-apercu{width:180px}
.zmb-apercu svg{display:block;width:100%;height:auto}
.zmb-actions{position:sticky;bottom:0;z-index:2;display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6);padding-block:var(--space-3);background:var(--fond);border-top:1px solid var(--trait)}
.zmb-actions .zmb-btn{flex:1 1 auto}
@media (min-width:768px){.zmb-actions .zmb-btn{flex:0 0 auto}}
@media (max-width:420px){.zmb-actions{flex-wrap:nowrap}.zmb-actions .zmb-btn{padding-inline:var(--space-3)}.zmb-actions .zmb-btn svg{display:none}}
.zmb-contenu .zmb-etapes{list-style:none;padding:0;display:grid;gap:var(--space-4);counter-reset:etape}
.zmb-etapes li{counter-increment:etape;margin:0}
.zmb-etapes li::before{content:counter(etape);display:block;font:300 30px/38px var(--font-sans);color:var(--encre-douce)}
.zmb-contenu details{padding-block:var(--space-3);border-top:1px solid var(--trait);margin:0}
.zmb-contenu details:last-of-type{border-bottom:1px solid var(--trait)}
.zmb-contenu summary{cursor:pointer;font:500 17px/28px var(--font-sans)}
.zmb-contenu details p{margin-top:var(--space-2);color:var(--encre-douce)}
.zmb-renvois{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--trait)}
.zmb-renvois ul{list-style:none;margin:var(--space-3) 0 0;padding:0;display:grid;gap:var(--space-2)}
@media (min-width:600px){.zmb-renvois{grid-template-columns:1fr 1fr}}

/* Accueil épuré */
.home .zmb-tete{border-bottom:0}
.zmb-tete__ligne .zmb-nav{margin-left:auto}
.zmb-accueil{align-items:center;gap:var(--space-6);padding-block:clamp(40px,13vh,120px) var(--space-8);text-align:center}
.zmb-accueil__logo{margin:0}
.zmb-accueil__logo img{height:64px;width:auto;margin-inline:auto}
.zmb-recherche--accueil{width:100%;max-width:640px}
.zmb-recherche--accueil .zmb-recherche__ligne{position:relative;display:block}
.zmb-recherche--accueil input{display:block;width:100%;height:56px;padding:0 128px 0 48px;border-radius:var(--radius-rond)}
.zmb-recherche--accueil input::-webkit-search-cancel-button{display:none}
.zmb-recherche--accueil input::placeholder{color:var(--encre-douce)}
.zmb-recherche__icone{position:absolute;left:18px;top:19px;width:18px;height:18px;color:var(--encre-douce);pointer-events:none}
.zmb-recherche--accueil .zmb-btn{position:absolute;right:6px;top:6px;height:44px;padding-block:0;padding-inline:var(--space-4)}
.zmb-accueil .zmb-perso{margin:0}
.zmb-accueil .zmb-puces,.zmb-accueil .zmb-filtres{justify-content:center;margin:0}
@media (min-width:768px){.zmb-accueil{padding-top:clamp(40px,13vh,120px)}.zmb-accueil__logo img{height:80px}}

/* Filtre de l'accueil : les outils de la catégorie s'affichent en grille */
.zmb-accueil .zmb-filtres a[aria-current]{background:var(--menthe-pale);border-color:var(--accent)}
.zmb-filtrage{margin-top:var(--space-4)}
.zmb-filtrage .zmb-casier--ligne{grid-auto-flow:row;grid-template-columns:1fr;grid-auto-columns:auto;overflow:visible;margin-right:-1px;clip-path:inset(0 1px 0 0)}
@media (min-width:600px){.zmb-filtrage .zmb-casier--ligne{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.zmb-filtrage .zmb-casier--ligne{grid-template-columns:repeat(3,1fr)}}

.zmb-presentation{max-width:var(--mesure)}
.zmb-presentation h1{margin-bottom:var(--space-3)}
.zmb-presentation p{color:var(--encre-douce)}

/* Bandeau en coin « Bientôt », retiré via le champ zmb_bientot de l'outil */
.zmb-bientot{position:relative;overflow:hidden}
.zmb-bientot::after{content:"Bientôt";position:absolute;top:16px;right:-36px;width:136px;padding-block:3px;background:var(--menthe-pale);color:var(--encre);font:500 13px/16px var(--font-sans);text-align:center;transform:rotate(45deg);pointer-events:none}
.zmb-bientot:hover::after{background:var(--menthe);color:var(--sur-menthe)}
.zmb-nouveau.zmb-bientot .zmb-badge{margin-right:var(--space-12)}
.zmb-accueil__logo a{display:inline-block}

/* Puces « Vos outils » avec croix de retrait */
.zmb-puce{position:relative;display:inline-flex}
.zmb-puce__retirer{position:absolute;top:-6px;right:-4px;display:flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;background:var(--inverse);color:var(--sur-inverse);border:0;border-radius:var(--radius-rond);font:500 13px/1 var(--font-sans);cursor:pointer;opacity:0}
.zmb-puce:hover .zmb-puce__retirer,.zmb-puce:focus-within .zmb-puce__retirer{opacity:1}
@media (hover:none){.zmb-puce__retirer{opacity:1}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}