/* Passion Running : DA du thème (Roboto, lime #aff425, navy #001f3f, verts sombres) sur tout le site.
   Chargé après da.css et home.css : ces variables sont la seule source des couleurs et polices. */
:root {
  --f-titre: var(--font-primary, Roboto), Arial, sans-serif;
  --f-texte: var(--font-primary, Roboto), Arial, sans-serif;
  --f-graisse-titre: 900;
  --r-bouton: 0; --r-carte: 1rem; --r-image: 1rem; --largeur: 1100px;
  --c-fond: #ffffff; --c-fond-2: #fafbfc; --c-texte: #4e4b66; --c-titre: #1a1a1a;
  --c-primaire: #aff425; --c-sur-primaire: #000; --c-primaire-texte: #001f3f; --c-secondaire: #001f3f;
  --c-meta: #334756; --c-voile: #01281d; --c-sombre: #011912; --c-sur-voile: #fff;
  --o-carte: 0 8px 24px #959da533; --o-petite: 0 20px 40px #0000000d;
  --lien-couleur: #001f3f; --pr-marge: clamp(1rem, 4vw, 1.5rem);
  --header-h: 184px;
  color-scheme: light;
}
html { scroll-padding-top: calc(var(--header-h) + 1rem); }
body { font-family: var(--f-texte); color: var(--c-texte); background: #fff; }
h1, h2, h3, h4 { font-family: var(--f-titre); color: var(--c-titre); text-wrap: balance; }
.bh-b953-ico { flex: none; vertical-align: middle; }
.bh-b953-m-sr, .pr-pot { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cs-button-solid { border-radius: 0; text-decoration: none; }
.pr-lien, .pr-texte a, .pr-coord a { color: var(--lien-couleur); text-decoration: underline; text-decoration-color: var(--c-primaire); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pr-tag { display: inline-flex; align-items: center; gap: .4rem; background: var(--c-primaire); color: #000; font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; padding: .35rem .6rem; text-decoration: none; min-height: 2rem; }
.pr-tag:hover { background: #000; color: #fff; }

/* ---------- Header du thème (#cs-navigation), composition centrée, bandeau du mois collant ---------- */
#cs-navigation#cs-navigation { position: sticky; top: 0; left: 0; width: 100%; z-index: 10000; background: #fff; box-shadow: 0 8px 24px #959da533; padding: 0; box-sizing: border-box; }
.pr-bandeau[data-bandeau] { position: static; display: block; padding: 0; background: var(--c-sombre); color: #fff; width: 100%; font-size: .875rem; line-height: 1.4; font-weight: 400; }
.pr-bandeau[hidden] { display: none !important; }
@media (max-width: 40rem) { .pr-bandeau .pr-bandeau-k { display: none; } .pr-bandeau-in { padding-block: .3rem; font-size: .8125rem; } }
.pr-bandeau-in { max-width: var(--largeur); margin: 0 auto; padding: .45rem var(--pr-marge); display: flex; align-items: center; justify-content: center; gap: .75rem; box-sizing: border-box; }
.pr-bandeau-k { display: inline-flex; align-items: center; gap: .35rem; background: var(--c-primaire); color: #000; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; padding: .2rem .5rem; flex: none; }
.pr-bandeau-t { min-width: 0; }
.pr-bandeau-x { flex: none; margin-left: auto; background: transparent; border: 0; color: #fff; width: 44px; height: 44px; margin-block: -.45rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pr-bandeau-x:hover, .pr-bandeau-x:focus-visible { color: var(--c-primaire); }
#cs-navigation#cs-navigation .cs-logo { display: flex; align-items: center; }
#cs-navigation#cs-navigation .pr-logo { height: 38px; width: auto; display: block; }
@media (max-width: 63.99rem) {
  #cs-navigation#cs-navigation .cs-container { padding: .6rem var(--pr-marge); box-sizing: border-box; }
  #cs-navigation#cs-navigation .cs-container { display: flex; justify-content: space-between; align-items: center; }
  #cs-navigation#cs-navigation .cs-logo { width: auto; height: auto; margin: 0 auto 0 0; padding: 0; position: static; transform: none; }
  .pr-bandeau-in { justify-content: flex-start; font-size: .8125rem; }
  .pr-li-contact .cs-button-solid { margin-top: .5rem; }
  #cs-navigation .cs-li-link { min-height: 44px; display: flex; align-items: center; justify-content: center; }
}
@media (min-width: 64rem) {
  #cs-navigation#cs-navigation .cs-container { max-width: var(--largeur); margin: 0 auto; padding: 1rem var(--pr-marge) .5rem; flex-direction: column; justify-content: center; align-items: center; gap: 1.5rem; box-sizing: border-box; }
  #cs-navigation#cs-navigation .cs-logo { width: auto; max-width: none; height: auto; margin: 0 auto; }
  #cs-navigation#cs-navigation .pr-logo { height: 52px; }
  #cs-navigation#cs-navigation .cs-nav { width: 100%; margin: 0; }
  #cs-navigation#cs-navigation .cs-ul { justify-content: center; gap: 2rem; flex-wrap: nowrap; }
  #cs-navigation#cs-navigation .cs-li { padding: 0 0 .5rem; }
  #cs-navigation#cs-navigation .cs-li-link { white-space: nowrap; color: var(--c-titre); font-weight: 700; font-size: .9375rem; }
  #cs-navigation#cs-navigation .pr-li-contact { padding-bottom: .5rem; }
  #cs-navigation#cs-navigation .pr-nav-contact { height: 2.75rem; line-height: 2.75rem; padding: 0 1.5rem; font-size: .875rem; color: #000; }
  #cs-navigation#cs-navigation .pr-nav-contact:hover { color: #fff; }
  #cs-navigation#cs-navigation .pr-nav-contact::before { position: absolute; }
}
#cs-navigation .cs-li-link:focus-visible, #cs-navigation .cs-button-solid:focus-visible { outline: 3px solid #001f3f; outline-offset: 3px; }
main#main { padding-top: 0; }

/* ---------- Footer 4 colonnes (fond --dark du thème) ---------- */
.pr-footer { background: var(--c-sombre); color: #d6dde2; padding: clamp(3rem, 6vw, 4.5rem) var(--pr-marge) 0; margin-top: clamp(3rem, 6vw, 5rem); }
.pr-footer-in { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .pr-footer-in { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .pr-footer-in { grid-template-columns: 1.7fr 1fr 1fr 1.3fr; } }
.pr-f-logo img { height: 48px; width: auto; display: block; background: none; padding: 0; filter: brightness(0) invert(.98); }
.pr-f-marque p { font-size: .9375rem; line-height: 1.6; margin: 1rem 0 1.25rem; color: #d6dde2; }
.pr-f-h { color: #fff; font-size: 1.125rem; font-weight: 900; margin: 0 0 1rem; position: relative; padding-bottom: .6rem; }
.pr-f-h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.5rem; height: 3px; background: var(--c-primaire); }
.pr-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pr-footer li a, .pr-footer li span { color: #d6dde2; text-decoration: none; display: inline-flex; align-items: flex-start; gap: .5rem; font-size: .9375rem; line-height: 1.5; min-height: 1.5rem; }
.pr-footer li .bh-b953-ico { color: var(--c-primaire); margin-top: .15rem; }
.pr-footer li a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--c-primaire); }
.pr-f-legal { max-width: var(--largeur); margin: 2.5rem auto 0; padding: 1.25rem 0 1.5rem; border-top: 1px solid #ffffff22; display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; font-size: .8125rem; }
.pr-f-legal p { margin: 0; }
.pr-f-legal ul { display: flex; gap: 1.5rem; }
.pr-f-legal, .pr-f-legal p { color: #fafbfcd9; }
.pr-f-legal a { color: #fafbfc; }

/* ---------- Pages internes ---------- */
.pr-interne { width: min(var(--largeur), 100% - 2 * var(--pr-marge)); margin: 0 auto; padding-top: clamp(2rem, 5vw, 3.5rem); box-sizing: border-box; }
.pr-entete { margin-bottom: clamp(2rem, 4vw, 3rem); padding-bottom: 1.5rem; border-bottom: 1px solid #33475633; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 64rem) { .pr-entete-img { grid-template-columns: 1.2fr 1fr; } }
.pr-entete .cs-title { margin: .5rem 0 1rem; }
.pr-entete .cs-topper { color: var(--c-secondaire); }
.pr-entete-media img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; border-radius: 1rem; box-shadow: 0 0 40px #0000001a; display: block; }
.pr-intro { font-size: 1.125rem; line-height: 1.6; max-width: min(34em, 100%); margin: 0; }
.pr-texte p, .pr-texte li { max-width: min(68ch, 100%); line-height: 1.65; }
.pr-h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 900; margin: 2.25rem 0 1rem; color: var(--c-titre); }
.pr-h2 a { color: inherit; }
.pr-interne > section { margin-bottom: 2rem; }
.pr-points { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.pr-points li { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; background: #fafbfc; padding: 1.25rem; box-shadow: var(--o-petite); border-radius: 1rem; line-height: 1.55; }
.pr-points .bh-b953-ico { color: #001f3f; background: var(--c-primaire); padding: .35rem; width: 2.2rem; height: 2.2rem; box-sizing: border-box; }
.pr-cartes-rub { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.pr-cartes-rub a { display: grid; gap: .4rem; padding: 1.25rem; background: #fff; box-shadow: var(--o-carte); border-radius: 1rem; text-decoration: none; color: var(--c-texte); height: 100%; box-sizing: border-box; }
.pr-cartes-rub strong { color: var(--c-titre); font-size: 1.125rem; }
.pr-cartes-rub .bh-b953-ico { color: #001f3f; }
.pr-cta { background: var(--c-voile); color: #fff; padding: clamp(1.75rem, 4vw, 2.5rem); border-radius: 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.pr-cta .pr-h2 { color: #fff; margin: 0; }
.pr-cta p { margin: 0; display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.pr-cta .pr-lien { color: #fff; }
.pr-rubriques ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 2rem; }
.pr-plan { display: grid; gap: 0 2.5rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.pr-plan ul { padding-left: 1.1rem; line-height: 1.8; }
.pr-plan a { color: var(--lien-couleur); }
.pr-equipe { list-style: none; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .pr-equipe { grid-template-columns: 1fr 1fr; } .pr-equipe li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.pr-membre { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; background: #fff; box-shadow: var(--o-carte); border-radius: 1rem; padding: 1.25rem; }
.pr-membre img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: center 25%; flex: none; }
.pr-membre h2 { margin: 0 0 .25rem; font-size: 1.25rem; font-weight: 900; }
.pr-membre h2 a { color: var(--c-titre); text-decoration: none; }
.pr-membre p { margin: .35rem 0; line-height: 1.55; }
.pr-role, .pr-meta { color: var(--c-meta); font-size: .875rem; font-weight: 700; }
.pr-auteur { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; }
.pr-auteur-img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; object-position: center 25%; box-shadow: 0 0 40px #0000001a; }
.pr-auteur .pr-texte { flex: 1 1 20rem; }
.pr-contact { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 64rem) { .pr-contact { grid-template-columns: 1.5fr 1fr; } }
.pr-form { display: grid; gap: 1rem; background: #fafbfc; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 1rem; box-shadow: var(--o-petite); }
.pr-form label { display: grid; gap: .35rem; font-weight: 700; color: var(--c-titre); font-size: .875rem; text-transform: uppercase; letter-spacing: .06em; }
.pr-form input, .pr-form textarea { font: inherit; font-size: 1rem; text-transform: none; letter-spacing: 0; padding: .75rem .85rem; border: 1px solid #b4bec6; border-radius: 0; background: #fff; color: var(--c-titre); min-height: 44px; box-sizing: border-box; width: 100%; }
.pr-form input:focus, .pr-form textarea:focus { outline: 3px solid var(--c-primaire); border-color: #001f3f; }
.pr-form button { justify-self: start; border: 0; cursor: pointer; }
.pr-retour { background: var(--c-primaire); color: #000; padding: .75rem 1rem; font-weight: 700; margin: 0; }
.pr-retour-erreur { background: #fde8e8; color: #7a1010; }
.pr-statut { margin: 0; font-weight: 700; color: #001f3f; min-height: 1.5em; }
.pr-statut-erreur { color: #7a1010; }
.pr-pot { left: -9999px; }
.pr-coord ul { list-style: none; padding: 0; display: grid; gap: 1rem; }
.pr-coord li { display: flex; gap: .75rem; align-items: flex-start; line-height: 1.5; }
.pr-coord .bh-b953-ico { color: #001f3f; margin-top: .15rem; }

/* ---------- Article : tête du thème dans le slot « tete » du kit, colonne latérale à gauche ---------- */
.pr-article { width: min(var(--largeur), 100% - 2 * var(--pr-marge)); margin: 0 auto; padding-top: clamp(1.5rem, 4vw, 2.5rem); }
.pr-membre > div { flex: 1 1 18rem; min-width: 0; }
@media (max-width: 40rem) { .pr-article { width: calc(100% - 1.5rem); } .pr-article .ka-auteur { padding: .75rem; } }
.pr-ariane { font-size: .8125rem; color: var(--c-meta); display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.pr-ariane a { color: var(--lien-couleur); }
.pr-tete .pr-h1 { margin: .9rem 0 .75rem; text-align: left; }
.pr-chapo { font-size: 1.1875rem; line-height: 1.55; color: var(--c-texte); margin: 0 0 .75rem; }
.pr-meta { display: flex; gap: 1rem; flex-wrap: wrap; }
.pr-meta a { color: var(--lien-couleur); }
.pr-tete-img { width: 100%; height: auto; max-height: 560px; object-fit: cover; border-radius: 1rem; margin-top: 1.25rem; box-shadow: 0 0 40px #0000001a; display: block; }
/* colonne latérale à gauche en bureau (mise en page du site), largeur du kit gardée (encarts ≥ 300 px de texte) */
@container (min-width: 1000px) {
  html body .ka-cadre .ka-grille { grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr); }
  html body .ka-cadre .ka-grille > .ka-cote { grid-column: 1; grid-row: 1; }
  html body .ka-cadre .ka-grille > .ka-corps { grid-column: 2; grid-row: 1; }
}

/* ---------- 30/09 (tour 2) : même DA sur tous les gabarits ---------- */
/* Avant-footer : variante C1 (logo + promesse + « Découvrir le magazine »), plus de liste d'auteurs répétée ;
   rendu dans la DA : conteneur de 1100 px, titre #1a1a1a 900, sans cadre gris, bouton lime du thème. */
html body section.uf-block[data-avant-footer] { width: min(var(--largeur), 100% - 2 * var(--pr-marge)); max-width: none; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; border: 0; outline: 0; background: #fafbfc; border-radius: 1rem; box-shadow: none; box-sizing: border-box; font-family: var(--font-primary, Roboto), Arial, sans-serif; }
html body section.uf-block[data-avant-footer] * { border-color: transparent; }
html body section.uf-block[data-avant-footer] .af-pad { padding: clamp(1.5rem, 4vw, 2.5rem); }
html body section.uf-block[data-avant-footer] h2 { font-family: var(--font-primary, Roboto), Arial, sans-serif; color: #1a1a1a; font-weight: 900; }
html body section.uf-block[data-avant-footer] p { color: #4e4b66; }
html body section.uf-block[data-avant-footer] .af-button { background: #aff425; color: #000; border: 0; border-radius: 0; font-weight: 700; text-decoration: none; min-height: 44px; }
html body section.uf-block[data-avant-footer] .af-button:hover { background: #000; color: #fff; }
html body section.uf-block[data-avant-footer] .brand-logo { height: 44px; width: auto; }
main#main + section.uf-block[data-avant-footer], section.uf-block[data-avant-footer] + .pr-footer, section.uf-block[data-avant-footer] ~ footer { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.pr-entete .cs-topper, .pr-interne .cs-topper { color: #001f3f; }
.pr-interne :is(h1, h2, h3), .pr-footer :is(h2, h3, .pr-f-h), .pr-article :is(h1, h2, h3, h4, table, th, td) { font-family: var(--font-primary, Roboto), Arial, sans-serif; }
.pr-interne :is(h1, h2) { font-weight: 900; color: #1a1a1a; }
.pr-bandeau-k, .pr-tag, [data-ka-rubrique] { background: #aff425; color: #000; }
.pr-coord p { margin-top: 1.5rem; line-height: 1.6; }
.pr-coord ul + p { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid #33475633; }
.pr-cta { background: #01281d; }
.pr-points .bh-b953-ico { background: #aff425; color: #001f3f; border-radius: 50%; }
/* À propos : « Ce que nous faisons » en SideBySide du thème (texte + image arrondie) */
.pr-sbs { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 48rem) { .pr-sbs { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.pr-sbs .pr-h2 { margin-top: 0; }
.pr-sbs-img { width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 420px; object-fit: cover; border-radius: 1rem; box-shadow: 0 0 40px #0000001a; display: block; }
.pr-entete-media img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; border-radius: 1rem; display: block; }
/* Article (DA : jamais de texte lime sur fond blanc, rayon 0 sur les pastilles et boutons). */
.ka-cadre .ka-lies--numerotee .ka-lie-n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.4rem; height: 2.4rem; min-width: 0; font-size: 1.05rem; background: #aff425; color: #000; border-radius: 0; align-self: center; text-decoration: none; }
.ka-cadre .ka-lies--numerotee .ka-lie-a { align-items: center; }
html body .ka-restant, html body .ka-restant.ka-restant-cote { border-radius: 0; }
html body .ka-restant.ka-restant-cote { background: #aff425 !important; color: #000 !important; }
.ka-cta-b .ka-ico { width: 1em; height: 1em; flex: none; vertical-align: -.15em; }
/* Compagnon de fin de page : bouton aux capitales de cs-button-solid. */
html body section.uf-block[data-avant-footer] .af-button { text-transform: uppercase; letter-spacing: .04em; }