/* Bannière « 25 randonnées à moins de 2 h de Montréal » des fiches de sentier — maquette de François (ChatGPT, 27/10/2026).
   Relevé sur la maquette (1467 × 358 px) : photo 0 → 815 px, panneau vert #123126 de 815 à 1467 px, couverture inclinée de -7,4° dont le coin
   haut-gauche est à (555, 46), 259 px de large, qui déborde sur le panneau et sort par le bas ; texte à 908 px.
   Les mesures sont en cqw (1 % de la largeur de la bannière) : la bannière garde les proportions de la maquette à toute largeur ≥ 1024 px.
   Dessous : photo et couverture au-dessus, panneau vert en dessous.
   Préfixe af- : rien ne touche les autres pages. Texte sur le panneau uni SEULEMENT (jamais sur la photo) ; bouton #d63a30 (blanc dessus : 4,7:1). */

.af{margin-top:1.5rem;font-family:Poppins,system-ui,sans-serif;color:#fff}
.af *{box-sizing:border-box}
.af :where(h3,p,img){margin:0;padding:0}

.af-bande{position:relative;overflow:hidden;background:#123126;container-type:inline-size;container-name:af}
.af-visuel{position:relative;height:clamp(200px,58vw,300px);overflow:hidden;background:#123126}
.af-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.af-couv{position:absolute;z-index:2;display:block;height:auto;transform-origin:0 0;transform:rotate(-7.4deg);
  left:53%;top:8%;width:40%;max-width:230px;
  box-shadow:0 10px 28px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.25);background:#f5f1e8}

.af-panneau{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:24px 20px 26px;background:#123126}
.af-sur{font-size:12px;line-height:1.3;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#c9d6cf}
.af-titre{margin-top:10px!important;font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.af-sous{margin-top:10px!important;font-size:15px;line-height:1.55;font-weight:400;color:#e6ede9;max-width:34em}
.af-bouton{display:inline-flex;align-items:center;justify-content:center;gap:.5em;margin-top:18px;min-height:48px;padding:0 24px;
  border-radius:8px;background:#d63a30;color:#fff;font-size:16px;font-weight:600;line-height:1.2;text-decoration:none;
  transition:background-color .15s}
.af-bouton:hover{background:#b8302a;color:#fff}
.af-bouton:focus-visible{outline:3px solid #fff;outline-offset:3px}
.af-fin{margin-top:14px!important;font-size:12px;line-height:1.6;font-weight:400;color:#bccac2;text-wrap:pretty}
.af-fin span{display:block}
.af-credit{margin-top:6px!important;font-size:12px;line-height:1.4;color:#5a6470;text-align:right}
.af-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}

@media (min-width:1024px){
  .af-bande{display:grid;grid-template-columns:55.55% 1fr;aspect-ratio:1467/358}
  /* .af-visuel disparaît du dessin : la photo et la couverture se positionnent par rapport à la bannière, la couverture déborde sur le panneau. */
  .af-visuel{display:contents}
  .af-visuel .af-photo{position:absolute;left:0;top:0;width:55.55%;height:100%}
  .af-couv{left:37.83cqw;top:3.14cqw;width:17.65cqw;max-width:none}
  .af-panneau{grid-column:2;justify-content:center;padding:0 3cqw 0 6.34cqw}
  .af-sur{font-size:clamp(11px,.886cqw,14px)}
  .af-titre{margin-top:1.1cqw!important;font-size:clamp(20px,2.32cqw,34px);text-wrap:nowrap}
  .af-sous{margin-top:1.1cqw!important;font-size:clamp(13px,1.16cqw,17px)}
  .af-bouton{margin-top:1.7cqw;min-height:clamp(44px,4.3cqw,63px);width:min(100%,24.9cqw);min-width:15em;padding:0 1em;font-size:clamp(14px,1.295cqw,19px)}
  .af-fin{margin-top:1.4cqw!important;font-size:clamp(12px,.85cqw,13px)}
}