/* Identité TAg29, limitée au contenu de la page /tag29/ (en-tête et pied du site restent à la charte ESS).
   Charte TAg29 : Quicksand, jaune, orange foncé, noir, blanc ; le hashtag en puce, en repère et en découpe des photos.
   Fond topographique repris de tag.bzh (content/tag29/fond-topographie.png). */
@font-face { font-family: "Quicksand"; src: url("/assets/fonts/quicksand-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Quicksand"; src: url("/assets/fonts/quicksand-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

.page-tag29 main {
  --font-ui: var(--font-tag29);
  --weight-bold: 700;
  --color-text: var(--color-tag29-noir);
  --color-text-soft: color-mix(in srgb, var(--color-tag29-noir) 80%, var(--color-white));
  --color-link: var(--color-tag29-noir);
  --color-surface-alt: color-mix(in srgb, var(--color-tag29-jaune) 13%, var(--color-white));
  --color-line: color-mix(in srgb, var(--color-tag29-jaune) 45%, var(--color-white));
  --color-focus: var(--color-tag29-noir);
  --color-focus-on-dark: var(--color-tag29-jaune);
  --diese: url("/assets/img/tag29/diese.svg");
  font-family: var(--font-tag29);
  color: var(--color-text);
  background: var(--color-white) url("/assets/img/tag29/fond-topographie.webp") 0 0 / 1920px auto repeat;
}
/* Fond topographique visible sous toutes les sections claires : pas d'aplat teinté. */
.page-tag29 main .section--fond { background: none; }
.page-tag29 main a { text-decoration-color: var(--color-tag29-orange); }

/* Hashtag : forme de la charte, couleur portée par le fond. */
.page-tag29 .bloc__diese,
.page-tag29 .section__head h2::before,
.page-tag29 .prose ul:not([role="list"]) > li::before {
  -webkit-mask: var(--diese) center / contain no-repeat;
  mask: var(--diese) center / contain no-repeat;
}

/* Photos vues à travers deux grands hashtags, comme sur tag.bzh : l'image n'apparaît que dans les hashtags,
   séparés pour rester reconnaissables ; disposition propre à chaque photo, sans rotation. */
.page-tag29 :is(.page-head__media, .split__media) img { border-radius: 0; box-shadow: none; }
.page-tag29 .page-head__media img {
  -webkit-mask:
    var(--diese) 0% 12% / 49% auto no-repeat,
    var(--diese) 100% 88% / 49% auto no-repeat;
  mask:
    var(--diese) 0% 12% / 49% auto no-repeat,
    var(--diese) 100% 88% / 49% auto no-repeat;
}
.page-tag29 .split__media img {
  -webkit-mask:
    var(--diese) 0% 92% / 49% auto no-repeat,
    var(--diese) 100% 8% / 49% auto no-repeat;
  mask:
    var(--diese) 0% 92% / 49% auto no-repeat,
    var(--diese) 100% 8% / 49% auto no-repeat;
}

/* En-tête : bleu nuit uni. */
.page-tag29 .page-head { background: var(--color-tagbzh-nuit); }
.page-tag29 .page-head__logo { width: clamp(5.5rem, 4.5rem + 3vw, 8rem); padding: 0; border-radius: 0; background: none; }
.page-tag29 .page-head a { color: var(--color-white); text-decoration-color: currentColor; }

/* Boutons : jaune du logo, texte noir. */
.page-tag29 main .button,
.page-tag29 main .button--accent { border-color: var(--color-tag29-jaune); color: var(--color-tag29-noir); background: var(--color-tag29-jaune); }
.page-tag29 main .button:hover { border-color: var(--color-white); color: var(--color-tag29-noir); background: var(--color-white); }
.page-tag29 main .button--ghost { border-color: var(--color-white); color: var(--color-white); background: transparent; }
.page-tag29 main .button--ghost:hover { color: var(--color-tagbzh-nuit); }

/* Sous-navigation */
.page-tag29 .subnav__link:hover,
.page-tag29 .subnav__link[aria-current="true"] { color: var(--color-tag29-noir); }
.page-tag29 .subnav__link[aria-current="true"]::after { background: var(--color-tag29-orange); }

/* Titres de section précédés du hashtag orange. */
.page-tag29 main :is(h1, h2, h3) { font-family: var(--font-tag29); font-weight: 700; }
.page-tag29 .section__head h2::before { display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.3em; content: ""; background: var(--color-tag29-orange); vertical-align: -0.04em; }

/* Listes : le hashtag comme puce. */
.page-tag29 .prose ul:not([role="list"]) { padding-left: 0; list-style: none; }
.page-tag29 .prose ul:not([role="list"]) > li { position: relative; padding-left: 1.5em; }
.page-tag29 .prose ul:not([role="list"]) > li::before { position: absolute; top: 0.4em; left: 0; width: 0.85em; height: 0.85em; content: ""; background: var(--color-tag29-jaune); }

/* Blocs : un hashtag par carte, aux couleurs du logo. */
.page-tag29 .bloc { border-color: var(--color-line); }
.page-tag29 .bloc__diese { display: block; flex-shrink: 0; width: 3.25rem; height: 3.25rem; margin-bottom: var(--space-5); background: var(--color-tag29-jaune); }
.page-tag29 .bloc:nth-child(3n + 2) .bloc__diese { background: var(--color-tag29-orange); }
.page-tag29 .bloc:nth-child(3n) .bloc__diese { background: var(--color-tagbzh-nuit); }
.page-tag29 .bloc .prose :where(h4, h5, h6) { color: var(--color-tag29-noir); }
.page-tag29 .more summary { border-color: var(--color-tag29-jaune); color: var(--color-tag29-noir); }

/* Étapes : carte blanche, numéro dans la pastille de tag.bzh à cheval sur le haut de la carte. */
.page-tag29 .section--etapes { --pastille: 3.5rem; }
.page-tag29 .section--etapes .prose > ol { row-gap: var(--space-8); }
.page-tag29 .section--etapes .prose > ol > li { padding: 0 var(--space-6) var(--space-6); border-radius: 0; background: none; isolation: isolate; }
.page-tag29 .section--etapes .prose > ol > li::after { position: absolute; inset: calc(var(--pastille) / 2) 0 0; content: ""; border: var(--border-width) solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-sm); z-index: -1; }
.page-tag29 .section--etapes .prose > ol > li::before {
  position: static;
  display: grid;
  place-items: center;
  width: var(--pastille);
  height: var(--pastille);
  margin-bottom: var(--space-4);
  content: counter(etape);
  font: 700 var(--text-xl)/1 var(--font-tag29);
  color: var(--color-tag29-noir);
  background: var(--color-tag29-jaune);
  -webkit-mask: url("/assets/img/tag29/pastille.svg") center / contain no-repeat;
  mask: url("/assets/img/tag29/pastille.svg") center / contain no-repeat;
}
.page-tag29 .section--etapes .prose > ol > li strong { margin-bottom: var(--space-3); font-size: var(--text-lg); line-height: 1.3; color: var(--color-tag29-noir); }

/* Chiffres : bandeau bleu nuit et pastilles jaunes, comme sur tag.bzh. */
.page-tag29 .section:has(.stats) { --color-focus: var(--color-focus-on-dark); color: var(--color-white); background: var(--color-tagbzh-nuit); }
.page-tag29 .stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--space-6); }
/* Pastille de tag.bzh : disque jaune au coin décollé ; libellé en capitales, dernier mot (en italique dans le contenu) en minuscules. */
.page-tag29 .stat { position: relative; justify-content: center; align-items: center; gap: var(--space-1); width: 100%; max-width: 13rem; aspect-ratio: 1; margin-inline: auto; padding: var(--space-6) var(--space-5); border-radius: 0; text-align: center; background: none; isolation: isolate; }
.page-tag29 .stat::before,
.page-tag29 .stat::after { position: absolute; inset: 0; content: ""; z-index: -1; }
.page-tag29 .stat::before { background: var(--color-tag29-jaune); -webkit-mask: url("/assets/img/tag29/pastille.svg") center / contain no-repeat; mask: url("/assets/img/tag29/pastille.svg") center / contain no-repeat; }
.page-tag29 .stat::after { background: color-mix(in srgb, var(--color-tagbzh-nuit) 25%, var(--color-white)); -webkit-mask: url("/assets/img/tag29/pastille-coin.svg") center / contain no-repeat; mask: url("/assets/img/tag29/pastille-coin.svg") center / contain no-repeat; }
.page-tag29 .stat__value { font: 700 var(--text-stat)/1 var(--font-tag29); color: var(--color-tag29-noir); }
.page-tag29 .stat__label { font-size: var(--text-xs); font-weight: 700; line-height: 1.2; text-transform: uppercase; color: var(--color-tag29-noir); }
.page-tag29 .stat__label em { display: block; font-size: var(--text-sm); font-style: normal; font-weight: 400; text-transform: none; }

/* Bandeau de contact */
.page-tag29 .section--sombre { background: var(--color-tagbzh-nuit); }