/* ==========================================================================
   LePetitArrosoir — CSS cœur (partagé : fiche, archives, accueil)
   Tokens + composants réutilisables. À charger EN PREMIER sur toute page LPA.
   v1.1 — clair par défaut, sombre uniquement via :root[data-theme="dark"] (bouton du header) ;
          échelle d'espacement --lpa-s-* ; menu burger < 768px ; cartes sans débordement.
   v1.2 — extrait de carte (.lpa-card-x), 3 lignes max.
   v1.3 — liens système du pied de page (.lpa-footsys).
   v1.4 — recherche : formulaire partagé (hero, page de résultats, panneau), bouton orange profond
          (--lpa-accent-strong, blanc ≥ 4,5:1), loupe + panneau du header, « Trouvé via » des cartes ;
          grilles .lpa-plist / .lpa-fam et cartes famille déplacées depuis lpa-home.css.
   v1.5 — contrastes AA (audit PageSpeed du 30/10) en mode clair : --lpa-ok, --lpa-warn et --lpa-crit
          assombris (texte des pastilles et en-têtes ≥ 4,5:1 sur leur fond) ; texte des chips
          .is-brand via --lpa-brand-text (≥ 4,9:1 sur fond teinté). Mode sombre inchangé (déjà ≥ 5,6:1).
   ========================================================================== */
:root{
  color-scheme:light;
  --lpa-bg:#f3f7ef; --lpa-surface:#ffffff; --lpa-surface-2:#f7faf4;
  --lpa-fg:#13241a; --lpa-muted:#5a6b60; --lpa-line:#e2ebdf;
  --lpa-brand:#1f7a43; --lpa-brand-ink:#0f3d22; --lpa-brand-text:#186a39; /* texte sur fond teinté de marque */
  --lpa-accent:#e2662a;
  --lpa-accent-strong:#c4511a; --lpa-accent-strong-hover:#a8430f; /* fonds sous texte blanc : 4,63:1 et 6,0:1 */
  --lpa-ok:#237a40; --lpa-ok-bg:#e7f4ea; /* 4,71:1 sur ok-bg (avant #2f8f4e, 3,59:1) */
  --lpa-warn:#8f5a00; --lpa-warn-bg:#fbf0d8; /* 5,11:1 (avant #b87400, 3,35:1) */
  --lpa-crit:#b5361f; --lpa-crit-bg:#fae3df; /* 4,87:1 (avant #c43d2a, 4,23:1) */
  --lpa-shadow:0 1px 2px rgba(16,40,24,.06),0 6px 20px rgba(16,40,24,.07);
  --lpa-card-th:linear-gradient(135deg,#bfe0c6,#79b98a);
  --lpa-r:16px;
  --lpa-s-1:4px; --lpa-s-2:8px; --lpa-s-3:12px; --lpa-s-4:16px; --lpa-s-5:24px; --lpa-s-6:32px;
  --lpa-f-display:'Bricolage Grotesque',system-ui,-apple-system,sans-serif;
  --lpa-f-body:'Inter',system-ui,-apple-system,sans-serif;
  --lpa-sticky-top:0px; /* hauteur d'un header de site sticky, si besoin */
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --lpa-bg:#0e1511; --lpa-surface:#16211b; --lpa-surface-2:#111a15;
  --lpa-fg:#e7efe8; --lpa-muted:#9db0a3; --lpa-line:#263330;
  --lpa-brand:#4fbd79; --lpa-brand-ink:#bfe8cc; --lpa-brand-text:#4fbd79; --lpa-accent:#ff7d44;
  --lpa-ok:#5cc07c; --lpa-ok-bg:#15291c;
  --lpa-warn:#e0a52b; --lpa-warn-bg:#2b230f;
  --lpa-crit:#f0715c; --lpa-crit-bg:#2e1713;
  --lpa-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  --lpa-card-th:linear-gradient(135deg,#1d3a28,#275238);
}

/* base, appliquée aux wrappers de chaque template LPA */
.lpa-fiche,.lpa-archive,.lpa-home{font-family:var(--lpa-f-body);color:var(--lpa-fg);font-size:16px;line-height:1.5}
.lpa-fiche *,.lpa-archive *,.lpa-home *{box-sizing:border-box}
.lpa-fiche h1,.lpa-fiche h2,.lpa-archive h1,.lpa-archive h2,.lpa-home h1,.lpa-home h2{font-family:var(--lpa-f-display);line-height:1.12;letter-spacing:-.01em;margin:0;text-wrap:balance}

/* icône Lucide inline */
.lpa-ic{width:1.1em;height:1.1em;stroke-width:2;display:inline-block;vertical-align:-.18em;flex:0 0 auto}

/* chips & pills */
.lpa-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--lpa-surface-2);border:1px solid var(--lpa-line);color:var(--lpa-muted)}
.lpa-chip.is-brand{background:color-mix(in srgb,var(--lpa-brand) 12%,transparent);border-color:transparent;color:var(--lpa-brand-text)}
.lpa-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px}
.lpa-pill.is-ok{background:var(--lpa-ok-bg);color:var(--lpa-ok)}
.lpa-pill.is-warn{background:var(--lpa-warn-bg);color:var(--lpa-warn)}
.lpa-pill.is-crit{background:var(--lpa-crit-bg);color:var(--lpa-crit)}

/* carte-problème réutilisable (archives, accueil)
   min-width:0 partout : sinon la méta en nowrap impose sa largeur à la colonne de grille. */
.lpa-card{display:flex;gap:13px;align-items:center;min-width:0;background:var(--lpa-surface);border:1px solid var(--lpa-line);
  border-radius:var(--lpa-r);padding:11px;box-shadow:var(--lpa-shadow);text-decoration:none;color:inherit}
.lpa-card:hover{border-color:color-mix(in srgb,var(--lpa-brand) 35%,var(--lpa-line))}
.lpa-card-th{flex:0 0 auto;width:62px;height:62px;border-radius:12px;display:grid;place-items:center;
  color:rgba(255,255,255,.85);background:var(--lpa-card-th) center/cover}
.lpa-card-m{flex:1;min-width:0}
.lpa-card-m b{font-family:var(--lpa-f-display);font-size:16px;font-weight:700;display:block;overflow-wrap:anywhere}
.lpa-card-x{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
  color:var(--lpa-fg);font-size:13.5px;line-height:1.4;margin-top:3px}
.lpa-card-via{display:block;color:var(--lpa-muted);font-size:12.5px;font-style:italic;margin-top:3px}
.lpa-card-line{display:block;color:var(--lpa-muted);font-size:13px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lpa-card-chev{flex:0 0 auto;display:flex;color:var(--lpa-muted)}

/* bouton d'action (hero, CTA) */
.lpa-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--lpa-accent-strong);color:#fff;
  font-weight:700;font-size:16px;padding:14px 20px;border-radius:14px;text-decoration:none;
  box-shadow:0 8px 22px rgba(196,81,26,.3)}
.lpa-cta:hover{background:var(--lpa-accent-strong-hover)}
.lpa-cta:active{transform:translateY(1px)}

/* ---- Base globale (thème autonome) ---- */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--lpa-bg);color:var(--lpa-fg);font-family:var(--lpa-f-body);font-size:16px;line-height:1.5}
img{max-width:100%;height:auto}

/* ---- En-tête de site ---- */
.lpa-siteheader{position:relative;z-index:30;border-bottom:1px solid var(--lpa-line);background:var(--lpa-bg)}
.lpa-siteheader-in{max-width:1000px;margin:0 auto;display:flex;align-items:center;gap:14px;height:60px;
  padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
/* logo clair/sombre : les deux <img> sont rangées dans .lpa-when-light / .lpa-when-dark (suivent data-theme) */
.lpa-brand{display:flex;align-items:center;margin-right:auto;text-decoration:none;flex:0 0 auto}
.lpa-brand-logo{display:block;height:40px;width:auto}
@media (max-width:560px){.lpa-brand-logo{height:34px}}
.lpa-nav-list{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.lpa-nav a{display:block;color:var(--lpa-muted);text-decoration:none;font-weight:600;font-size:14px;padding:8px 11px;border-radius:10px}
.lpa-nav a:hover,.lpa-nav a[aria-current="page"]{color:var(--lpa-fg);background:var(--lpa-surface-2)}
.lpa-hdr-tools{display:flex;align-items:center;gap:4px}
.lpa-iconbtn{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid transparent;border-radius:10px;
  background:none;color:var(--lpa-muted);cursor:pointer;font:inherit}
.lpa-iconbtn:hover{color:var(--lpa-fg);background:var(--lpa-surface-2)}
.lpa-iconbtn:focus-visible,.lpa-nav a:focus-visible{outline:2px solid var(--lpa-brand);outline-offset:2px}
.lpa-when-dark,:root[data-theme="dark"] .lpa-when-light{display:none}
:root[data-theme="dark"] .lpa-when-dark{display:contents}
.lpa-when-light{display:contents}

/* burger : visible < 768px seulement ; sans JS, la nav reste affichée en ligne */
.lpa-burger{display:none}
.lpa-burger-bars{position:relative;width:18px;height:12px}
.lpa-burger-bars span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
.lpa-burger-bars span:nth-child(1){top:0}
.lpa-burger-bars span:nth-child(2){top:5px}
.lpa-burger-bars span:nth-child(3){top:10px}
.lpa-burger[aria-expanded="true"] .lpa-burger-bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.lpa-burger[aria-expanded="true"] .lpa-burger-bars span:nth-child(2){opacity:0}
.lpa-burger[aria-expanded="true"] .lpa-burger-bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media (max-width:767.98px){
  .lpa-nav-list{flex-wrap:wrap}
  .lpa-nav a{padding:7px 9px;font-size:13px}
  .lpa-js .lpa-burger{display:inline-grid}
  .lpa-js .lpa-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--lpa-bg);
    border-bottom:1px solid var(--lpa-line);box-shadow:var(--lpa-shadow);
    padding:var(--lpa-s-2) max(18px,env(safe-area-inset-right,0px)) var(--lpa-s-3) max(18px,env(safe-area-inset-left,0px))}
  .lpa-js .lpa-siteheader.is-open .lpa-nav{display:block}
  .lpa-js .lpa-nav-list{flex-direction:column;gap:2px}
  .lpa-js .lpa-nav a{font-size:16px;padding:12px;min-height:44px}
}
@media (prefers-reduced-motion:reduce){.lpa-burger-bars span{transition:none}}

/* ---- Pied de site ---- */
.lpa-sitefooter{margin-top:40px;border-top:1px solid var(--lpa-line);background:var(--lpa-surface-2)}
.lpa-sitefooter-in{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:var(--lpa-s-3);align-items:center;text-align:center;
  padding:var(--lpa-s-5) max(18px,env(safe-area-inset-left,0px)) var(--lpa-s-5)}
.lpa-sitefooter-in p{margin:0}
.lpa-foot-brand{display:inline-flex;align-items:center;gap:8px;margin:0;font-family:var(--lpa-f-display);font-size:17px;letter-spacing:-.02em}
.lpa-foot-symbole{display:block;width:28px;height:28px}
.lpa-foot-name-1{font-weight:560;color:var(--lpa-brand)}
.lpa-foot-name-2{font-weight:800;color:var(--lpa-brand-ink)}
:root[data-theme="dark"] .lpa-foot-name-2{color:var(--lpa-fg)}
.lpa-footnav-list{list-style:none;margin:0;padding:0;display:flex;gap:6px 14px;flex-wrap:wrap;justify-content:center}
.lpa-footnav a{color:var(--lpa-muted);text-decoration:none;font-size:13px;font-weight:600}
.lpa-footnav a:hover{color:var(--lpa-brand)}
.lpa-footsys{list-style:none;margin:0;padding:0;display:flex;gap:4px 14px;flex-wrap:wrap;justify-content:center}
.lpa-footsys a{color:var(--lpa-muted);text-decoration:none;font-size:12px}
.lpa-footsys a:hover{color:var(--lpa-brand);text-decoration:underline}
.lpa-foot-legal{color:var(--lpa-muted);font-size:12px}

/* ---- Fallback : recherche, blog, listes génériques ---- */
.lpa-fallback{max-width:820px;margin:0 auto;padding:24px 18px 48px}
.lpa-fallback h1{font-family:var(--lpa-f-display);font-size:clamp(24px,6vw,30px);font-weight:800;margin:0 0 16px;letter-spacing:-.01em}
.lpa-fallback .lpa-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:11px}
@media (min-width:720px){.lpa-fallback .lpa-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lpa-404{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:48px}
.lpa-404 .lpa-ic{color:var(--lpa-brand)}
.lpa-404 h1{margin:0}

/* texte réservé aux lecteurs d'écran */
.lpa-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}

/* ---- Formulaire de recherche (searchform.php : hero, page de résultats, panneau du header) ----
   Champ et bouton : même hauteur (48px), même rayon (13px), pas d'ombre ni de bordure sur le bouton. */
.lpa-searchrow{display:flex;gap:9px;margin:0}
.lpa-search{box-sizing:border-box;flex:1;min-width:0;height:48px;display:flex;align-items:center;gap:9px;background:var(--lpa-surface);
  border:1px solid var(--lpa-line);border-radius:13px;padding:0 14px;color:var(--lpa-muted);cursor:text}
.lpa-search:focus-within{border-color:var(--lpa-brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--lpa-brand) 25%,transparent)}
.lpa-search input{border:0;background:none;outline:none;color:var(--lpa-fg);font:inherit;font-size:16px;width:100%;min-width:0;padding:0}
.lpa-search input::placeholder{color:var(--lpa-muted);opacity:1}
.lpa-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.lpa-search-go{box-sizing:border-box;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;min-width:48px;
  padding:0 18px;border:0;border-radius:13px;background:var(--lpa-accent-strong);color:#fff;
  font:inherit;font-size:15px;font-weight:700;white-space:nowrap;cursor:pointer;box-shadow:none}
.lpa-search-go:hover{background:var(--lpa-accent-strong-hover)}
.lpa-search-go:active{transform:translateY(1px)}
.lpa-search-go:focus-visible{outline:2px solid var(--lpa-fg);outline-offset:2px}
.lpa-search-go-ic{display:none}
.lpa-search-go--icon{padding:0}
/* sous 480px, le libellé ne tient pas à côté du champ : flèche seule (aria-label="Rechercher") */
@media (max-width:479.98px){
  .lpa-search-go{padding:0}
  .lpa-search-go-txt{display:none}
  .lpa-search-go-ic{display:flex}
}

/* ---- Loupe et panneau de recherche du header (pas sur l'accueil) ----
   Panneau : bandeau sous le header (z-index 30 du header, au-dessus de la barre d'ancres des fiches à 20,
   sous le bandeau Complianz à 99999). Sans JS il reste [hidden] : la loupe mène à /?s=. */
.lpa-search-toggle{width:44px;height:44px;text-decoration:none}
.lpa-search-toggle[aria-expanded="true"]{color:var(--lpa-fg);background:var(--lpa-surface-2)}
.lpa-search-toggle:focus-visible{outline:2px solid var(--lpa-brand);outline-offset:2px}
.lpa-searchpanel{position:absolute;top:100%;left:0;right:0;background:var(--lpa-bg);
  border-bottom:1px solid var(--lpa-line);box-shadow:var(--lpa-shadow)}
.lpa-searchpanel[hidden]{display:none}
.lpa-searchpanel-in{max-width:1000px;margin:0 auto;display:flex;align-items:center;gap:6px;
  padding:var(--lpa-s-3) max(18px,env(safe-area-inset-right,0px)) var(--lpa-s-3) max(18px,env(safe-area-inset-left,0px))}
.lpa-searchpanel-in .lpa-searchrow{flex:1;min-width:0}
.lpa-searchpanel-close{flex:0 0 auto;width:44px;height:44px}

/* ---- Sections de liste (accueil, recherche sans résultat) ---- */
.lpa-sec-h{display:flex;align-items:baseline;justify-content:space-between;margin:28px 0 12px}
.lpa-sec-h h2{font-family:var(--lpa-f-display);font-size:19px;font-weight:700;line-height:1.12;letter-spacing:-.01em;margin:0}

/* problèmes fréquents + familles : même grille de .lpa-card */
.lpa-plist,.lpa-fam{display:grid;grid-template-columns:minmax(0,1fr);gap:11px}
@media (min-width:720px){.lpa-plist,.lpa-fam{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* vignette des cartes famille : teinte de la famille à la place du dégradé de .lpa-card-th */
.lpa-card--fam .lpa-card-th.is-ok{background:var(--lpa-ok-bg);color:var(--lpa-ok)}
.lpa-card--fam .lpa-card-th.is-warn{background:var(--lpa-warn-bg);color:var(--lpa-warn)}
.lpa-card--fam .lpa-card-th.is-crit{background:var(--lpa-crit-bg);color:var(--lpa-crit)}
.lpa-card--fam .lpa-card-th.is-brand{background:color-mix(in srgb,var(--lpa-brand) 14%,transparent);color:var(--lpa-brand)}