/* © 2026 Romain Le Dû — My Microbiote, https://mymicrobiote.app. Tous droits réservés : code, textes et base de données. Toute reproduction ou réutilisation, même partielle, sans autorisation écrite est interdite (Code de la propriété intellectuelle, art. L122-4 et L342-1). All rights reserved: no reproduction, even partial, without written permission. */


:root{
  --fond:#eef1ef; --carte:#ffffff; --filet:#d3dad6; --encre:#111714; --gris:#46524c;
  --action:#00795a; --action-fond:#00ba7c; --rouge:#c4161f;
  --lumiere-dessin:radial-gradient(circle at 50% 64%, #ffffff 0%, rgba(255,255,255,.75) 36%, rgba(255,255,255,0) 68%);
  --dessin-pose:drop-shadow(0 2px 1.5px rgba(17,23,20,.28));
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --fond:#000000; --carte:#0b0e0d; --filet:#2b312e; --encre:#e7e9ea; --gris:#8b9691;
    --action:#00ba7c; --rouge:#f4212e;
    --lumiere-dessin:radial-gradient(circle at 50% 64%, rgba(255,255,255,.15) 0%, rgba(255,255,255,.07) 36%, rgba(255,255,255,0) 66%);
    --dessin-pose:drop-shadow(0 2px 1.5px rgba(0,0,0,.55));
  }
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--fond); color:var(--encre); font:17px/1.55 var(--font); overflow-wrap:break-word;}
a{color:var(--action);}
a:hover{text-decoration-thickness:2px;}
:focus-visible{outline:2px solid var(--action); outline-offset:2px; border-radius:4px;}

.haut{display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:46rem; margin:0 auto; padding:12px 16px; border-bottom:1px solid var(--filet);}
.marque{display:flex; align-items:center; gap:10px; color:var(--encre); font-weight:700; text-decoration:none;}
.marque img{border-radius:8px;}
.bouton{display:inline-block; padding:9px 16px; border-radius:999px; background:var(--action-fond); color:#000; font-weight:700; text-decoration:none; white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 1px 3px rgba(0,0,0,.25);}
.bouton:hover{filter:brightness(1.06);}
.bouton.grand{padding:13px 24px; font-size:18px;}

main{max-width:46rem; margin:0 auto; padding:8px 16px 40px;}
h1{font-size:32px; line-height:1.15; margin:20px 0 8px; letter-spacing:-.01em;}
h2{font-size:22px; line-height:1.25; margin:32px 0 8px;}
.chapeau{font-size:19px; margin:0 0 16px;}
.note{color:var(--gris); font-size:15px;}
.fil{margin-top:12px; font-size:15px; color:var(--gris);}
.fil a{color:var(--gris);}

.fiche{text-align:left;}
.fiche .dessin{width:128px; height:128px; margin:20px 0 0; display:flex; align-items:center; justify-content:center; font-size:84px; line-height:1; background:var(--lumiere-dessin);}
.dessin svg, .dessin img{width:100%; height:100%; filter:var(--dessin-pose);}
.fiche h1{margin-top:8px;}
.latin{margin:0; color:var(--gris); font-style:italic;}
.types{margin:2px 0 0; color:var(--gris);}
.resume{font-size:19px; margin:16px 0;}
.lignes{margin:0; border-top:1px solid var(--filet);}
.lignes > div{padding:12px 0; border-bottom:1px solid var(--filet);}
.lignes dt{color:var(--gris); font-size:15px;}
.lignes dd{margin:2px 0 0;}
.lignes > div:last-child{border-bottom:0;}
.lignes .groupe{display:block;}
.lignes .groupe + .groupe{margin-top:4px;}

.sosie-alerte{margin:16px 0; padding:12px 14px; border:1px solid var(--rouge); border-left-width:4px; border-radius:8px;}
.sosie-alerte p{margin:0 0 8px;}
.sosie-alerte p:last-child{margin-bottom:0;}
.sosie-titre, .sosie-regle{color:var(--rouge); font-weight:700;}

.appel{margin:32px 0 0; padding:20px 0; border-top:1px solid var(--filet); border-bottom:1px solid var(--filet);}
.appel p{margin:0 0 14px;}
.voisines{display:flex; justify-content:space-between; gap:16px; margin-top:20px;}
.voisines a{display:flex; flex-direction:column; text-decoration:none; min-width:0;}
.voisines a[rel="next"]{text-align:right; margin-left:auto;}
.petit{color:var(--gris); font-size:14px;}

.points{padding-left:20px;}
.points li{margin:6px 0;}
.vitrine{list-style:none; padding:0; margin:12px 0; display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:8px;}
.vitrine a{display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; text-align:center; text-decoration:none; color:var(--encre); font-size:15px; border-radius:12px;}
.vitrine a:hover{background:rgba(127,127,127,.12);}
.vitrine .dessin{width:56px; height:56px; background:var(--lumiere-dessin);}
.guides{list-style:none; padding:0; margin:12px 0; border-top:1px solid var(--filet);}
.guides li{padding:12px 0; border-bottom:1px solid var(--filet);}
.guides a{font-weight:600;}
.guides span{display:block; color:var(--gris); font-size:15px;}
.initiales{display:flex; flex-wrap:wrap; gap:4px; margin:12px 0;}
.initiales a{display:inline-block; min-width:36px; padding:6px 0; text-align:center; text-decoration:none; font-weight:600;}
.noms{list-style:none; padding:0; margin:0; columns:2 14rem; column-gap:24px;}
.noms li{padding:4px 0; break-inside:avoid;}

.texte ul, .texte ol{padding-left:22px;}
.texte .noms{padding-left:0;}
.texte li{margin:6px 0;}
.appli h2{margin-bottom:4px;}

.pied{max-width:46rem; margin:0 auto; padding:20px 16px 40px; border-top:1px solid var(--filet); color:var(--gris); font-size:15px;}
.pied nav{display:flex; flex-wrap:wrap; gap:6px 16px; margin-bottom:12px;}
.pied a{color:var(--gris);}
.pied [aria-current]{color:var(--encre); font-weight:600;}

@media (max-width:480px){
  body{font-size:16px;}
  h1{font-size:27px;}
  .chapeau, .resume{font-size:18px;}
  .bouton{padding:8px 14px;}
}
@media (pointer:coarse){
  .pied a, .initiales a, .fil a{display:inline-block; min-height:44px; line-height:44px;}
  .noms a, .guides a{display:block; min-height:44px; padding:10px 0;}
  .noms li{padding:0;}
  .voisines a{min-height:44px;}
}