/* Ce qui est PROPRE à ce site, et ne va donc pas dans la charte commune :
   les cartes de mode, les schémas, les dépliants « comment faire », la
   plaque blanche sous le logo du héros. Tout le reste — jetons de couleur,
   typographie, boutons, encarts, tableaux, pied — vient de
   assets/verdier.css, posé par outils/diffuser_kit.py du dépôt
   atelierduverdier/site. Ne pas y redéfinir ce que la charte sert déjà. */

  
  .hero-art img{width:100%; max-width:360px; height:auto;
    background:#fff; border-radius:14px; padding:20px; box-sizing:border-box}


  
  .group-title{display:flex; align-items:center; gap:11px; margin:34px 0 4px}

  .group-title .gi{width:34px;height:34px;border-radius:9px;background:var(--slate);
    display:grid;place-items:center;flex:none}

  .group-title .gi svg,.group-title .gi img{width:21px;height:21px;filter:brightness(0) invert(1)}

  .group-title h3{margin:0; font-size:1.3rem}

  .group-sub{color:var(--fg-3); font-size:.9rem; margin:0 0 14px 45px}

  .modes{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}

  @media(max-width:760px){ .modes{grid-template-columns:1fr} }

  .mode{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column}

  .mode .shot{background:var(--bg-3); border-bottom:1px solid var(--line); padding:14px;
    display:grid; place-items:center; min-height:150px}

  .mode .shot img{max-width:100%; max-height:340px; height:auto; border-radius:8px;
    box-shadow:0 4px 14px rgba(0,0,0,.14); cursor:zoom-in}

  .mode .body{padding:16px 18px 18px}

  .mode .head{display:flex; align-items:center; gap:10px; margin-bottom:6px}

  .mode .mi{width:30px;height:30px;border-radius:8px;background:var(--orange-soft);
    display:grid;place-items:center;flex:none}

  .mode .mi img{width:19px;height:19px}

  .mode h4{margin:0; font-size:1.08rem}

  .mode p{margin:.35em 0 0; font-size:.92rem; color:var(--fg-2); line-height:1.55}

  .mode .when{margin-top:10px; font-size:.84rem; color:var(--fg); background:var(--bg-2);
    border-left:3px solid var(--orange); padding:7px 11px; border-radius:0 8px 8px 0}

  .mode .when b{color:var(--orange-d)}

  details.howto{margin-top:14px; border-top:1px solid var(--line); padding-top:10px}

  details.howto>summary{cursor:pointer; font-weight:600; color:var(--orange-d); list-style:none; font-size:.9rem}

  details.howto>summary::-webkit-details-marker{display:none}

  details.howto>summary::before{content:"▸\00a0"}

  details.howto[open]>summary::before{content:"▾\00a0"}

  details.howto img{display:block; max-width:220px; margin:12px auto 4px; background:#fdfdfd; border:1px solid var(--line); border-radius:8px; padding:6px}

  details.howto ol{margin:.6em 0 0; padding-left:1.25em; font-size:.9rem; color:var(--fg-2)}

  details.howto li{margin:.4em 0}


  
  .diagram{background:#fdfdfd; border:1px solid var(--line); border-radius:12px;
    padding:16px 18px; margin:8px 0; box-shadow:var(--shadow)}

  .diagram img{display:block; width:100%; max-width:520px; height:auto; margin:0 auto; cursor:zoom-in}

  .diagram figcaption{text-align:center; color:#5a626e; font-size:.85rem; margin-top:10px}

  .diagram figcaption code{background:#eef0f3; color:#2f3540}

  .diagram-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0}

  @media(max-width:640px){ .diagram-row{grid-template-columns:1fr} }