/* Identité « Littoral » — générée par moteur/identite.py depuis moteur/identites/littoral/. Ne pas modifier ici. */
@font-face{font-family:"Archivo";src:url("/static/polices/archivo-400-800.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap;font-stretch:100% 125%}
:root{--fond:#f4eee2;--fond-2:#e9dfcb;--encre:#1b2326;--encre-2:#5d5648;--trait:#c9bc9f;--trait-fort:#1b2326;--accent:#0b5866;--accent-texte:#0b5866;--accent-doux:#dde3d6;--sur-accent:#f4eee2;--bandeau:#0b5866;--sur-bandeau:#f4eee2;--sur-bandeau-2:#cfe1e3;--vif:#0b5866;--sur-vif:#f4eee2;--pied:#e9dfcb;--sur-pied:#3a3a33;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--fond:#0f1a1d;--fond-2:#16252a;--encre:#efe7d8;--encre-2:#b8ad98;--trait:#2c3d42;--trait-fort:#efe7d8;--accent:#7cccd8;--accent-texte:#7cccd8;--accent-doux:#18343a;--sur-accent:#0f1a1d;--bandeau:#0b4651;--sur-bandeau:#f4eee2;--sur-bandeau-2:#bcd6da;--vif:#7cccd8;--sur-vif:#0f1a1d;--pied:#0b1416;--sur-pied:#b8ad98;color-scheme:dark}}
/* Littoral (S3b) — la signalétique d'un poste de plage : fond de sable, bandeau pétrole,
   capitales élargies (Archivo, largeur 125 %), filets noirs de 3 px, étiquettes à gauche. */
:root {
  --police-texte: "Archivo", system-ui, sans-serif;
  --police-titres: "Archivo", system-ui, sans-serif;
  --graisse-titres: 800;
  --t-h1: clamp(2.3rem, 1.5rem + 3.4vw, 3.5rem);
  --t-h2: .8125rem;
  --t-chiffre: clamp(3.25rem, 2.2rem + 4.4vw, 6rem);
  --filet: 3px;
}
h1 { font-stretch: 112%; line-height: 1.04; letter-spacing: -.01em; }

.entete { background: var(--bandeau); color: var(--sur-bandeau); }
.marque-signe { display: none; }
.marque-nom { display: flex; flex-direction: column; }
.marque-avant { font-size: .8125rem; font-weight: 500; letter-spacing: .04em; }
.marque-sport { font-size: 1.5rem; font-weight: 800; font-stretch: 125%; text-transform: uppercase; letter-spacing: .02em; }
.entete-nav a { color: var(--sur-bandeau); text-decoration: underline; }

/* Une grille de 12 : les étiquettes sur 3 colonnes, le contenu sur 9. */
.ouverture { padding-block: 1.5rem 3rem; }
.ouverture .cadre, .bloc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; }
.ouverture .cadre > * { grid-column: 4 / -1; }
.ouverture .fil { grid-column: 1 / span 3; grid-row: 1 / span 4; }
.fil ol { flex-direction: column; gap: .35rem; margin-top: 2.6rem; font-size: .75rem; font-weight: 700; font-stretch: 125%;
  text-transform: uppercase; letter-spacing: .08em; color: var(--accent-texte); }
.fil li + li::before { content: none; }
.fil a { color: var(--accent-texte); }
.titre { margin-top: 2.5rem; }
.fil + .titre { margin-top: 2.5rem; }
.maj, .titre-sous { color: var(--encre-2); }
.titre-sous { font-weight: 600; font-stretch: 100%; }
.accroche { color: var(--encre-2); }
.resume { font-stretch: 125%; text-transform: uppercase; letter-spacing: .06em; font-size: .875rem; color: var(--accent-texte); }
.chiffres { border-top: 3px solid var(--trait-fort); }
.chiffres li { padding-top: 1rem; }
.chiffres strong { color: var(--vif); font-stretch: 125%; }
.chiffres span { font-weight: 600; }

.bloc { border-top: 3px solid var(--trait-fort); padding-top: 1.75rem; }
.bloc + .bloc { margin-top: 3rem; }
.bloc-titre { grid-column: 1 / span 3; margin: 0 0 1rem; padding-top: .2rem; font-size: .8125rem; font-stretch: 125%;
  text-transform: uppercase; letter-spacing: .08em; color: var(--accent-texte); line-height: 1.4; }
.bloc-corps { grid-column: 4 / -1; }
.etat-chiffre strong { font-size: 6rem; font-stretch: 125%; }
.etapes li { border-top: 1px solid var(--trait); padding-top: .9rem; }
.etapes li::before { font-stretch: 125%; }
.tuiles a, .carte-lieu a { background: var(--fond-2); }
.tuile-code, .carte-code, .lieu-rang { font-stretch: 125%; color: var(--accent-texte); }
.carte-nom { font-stretch: 100%; font-weight: 700; }
.lieu { background: transparent; border-top: 1px solid var(--trait); padding-inline: 0; }
.etiquette { background: transparent; padding: 0; font-size: .75rem; font-stretch: 125%; text-transform: uppercase; letter-spacing: .08em; }
.motif { background: var(--fond-2); }
.motif h2, .texte h2 { font-size: .8125rem; font-stretch: 125%; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-texte); }
.texte h2 { border-top: 3px solid var(--trait-fort); padding-top: 1.25rem; }
.carte-bouton { font-size: .9375rem; font-stretch: 125%; text-transform: uppercase; letter-spacing: .06em; }
.appel-lien { font-size: 1.125rem; }

.pied { border-top: 3px solid var(--trait-fort); }

@media (max-width: 48rem) {
  .ouverture .cadre > *, .ouverture .fil, .bloc-titre, .bloc-corps { grid-column: 1 / -1; grid-row: auto; }
  .fil ol { flex-direction: row; flex-wrap: wrap; margin-top: 0; }
  .fil li + li::before { content: "/"; margin-right: .5rem; }
}