/* Design system « Alpilles en Provence — Art + Shopping & Bien-être » — préfixe as-
   Origine de chaque jeton : RAPPORT.md (section Jetons). Aucune couleur ni taille hors jetons. */

@import url('https://fonts.googleapis.com/css2?family=Cookie&family=Jost:wght@300;500&family=Mulish:ital,wght@0,400;0,600;0,700;0,800;1,500;1,600;1,700&display=swap');

:root {
  /* Couleurs — valeurs exactes du PDF (source/analyse.json, aplats vectoriels) */
  --as-encre: #231f20;          /* texte courant */
  --as-blanc: #ffffff;
  --as-magenta: #c9428c;        /* titres manuscrits, bandeau Shopping, navettes */
  --as-framboise: #b7255e;      /* « Rencontrer » (couverture) */
  --as-turquoise: #27838b;      /* « S'informer », pavé 2026, fleuron de couverture */
  --as-violet: #74489d;         /* bandeau Art & Artisans créateurs */
  --as-violet-nuit: #3d0f63;    /* titre « Notes pour votre voyage » */
  --as-vert-nuit: #1b462e;      /* 3237 */
  --as-bleu: #4e86aa;           /* bandeau Numéros d'urgence, « À très vite… » */
  --as-olive: #6f8a36;          /* 15 SAMU, logo, étiquette Randonnée */
  --as-rouge: #ef4023;          /* 18 Sapeurs-pompiers, étiquette Gastronomie */
  --as-orange: #f7941d;         /* 17 Police secours, étiquette Villages */
  --as-or: #c09c16;             /* cadre alpillesenprovence.com, « Getting to the Alpilles », navettes or */
  --as-taupe: #b6aaa7;          /* panneau « Comment venir », « Nos partenaires » */
  --as-gris: #939598;           /* signes + et flèches du tri */
  --as-gris-clair: #e6e7e8;     /* fond neutre de l'encart déchets */
  --as-beige: #eee1bf;          /* fleuron en filigrane derrière les titres (p. 6 à 9) */
  --as-ciel: #b6e4f5;           /* ruban adhésif des polaroïds */
  /* Filigrane du fleuron dans chaque bandeau (même dessin, couleur du PDF) */
  --as-violet-clair: #835ea8;
  --as-magenta-clair: #cf619a;
  --as-bleu-clair: #6693b4;
  /* Tri (aplats vectoriels de la p. 7) */
  --as-tri-jaune: #ffe48a;
  --as-tri-gris: #bcbec0;
  --as-tri-papiers: #57c5c9;
  --as-tri-verres: #8ec290;
  --as-tri-cartons: #d3c0ae;
  --as-tri-textiles: #d2232a;
  /* Échantillonnées sur les panneaux JPEG des éco-gestes (rendu de la page, pas analyse.json) */
  --as-eau-maison: #52bec4;
  --as-eau-jardin: #70c6cd;
  --as-eau-exterieur: #83cbd2;     /* aussi la grande goutte du panneau « À la maison » */
  --as-goutte-jardin: #88badb;
  /* Dérivées (absentes du PDF) : même teinte, assombrie pour le contraste avec le blanc */
  --as-taupe-fonce: #84726e;    /* panneaux taupe : texte blanc à 4,5:1 (le #b6aaa7 fait 2,3:1) */
  --as-bleu-texte: #487c9e;     /* texte bleu courant à 4,5:1 (le #4e86aa fait 3,9:1) */
  --as-or-fonce: #b19014;       /* bande ALPILLESENPROVENCE.COM, grand texte blanc à 3:1 */
  --as-orange-fonce: #db7b08;   /* « 17 », étiquette Villages : grand texte à 3:1 */
  --as-or-texte: #8d7310;       /* mot EMBALLAGES sur la bande jaune (3:1) — le PDF le met en #fff2c9 */
  --as-gris-fonce: #616265;     /* mot ORDURES MÉNAGÈRES sur la bande grise (3:1) — le PDF : #e6e7e8 */
  --as-voile: rgba(35, 31, 32, 0.42);   /* --as-encre, voile sur photo */
  --as-ombre: rgba(35, 31, 32, 0.22);   /* --as-encre, ombre des polaroïds (présente dans le PDF) */

  /* Polices — reconnues à l'œil (les sous-ensembles du PDF ne couvrent pas le texte) */
  --as-police-texte: 'Mulish', system-ui, sans-serif;     /* Semplicita Pro */
  --as-police-script: 'Cookie', cursive;                  /* Lemon Brush */
  --as-police-futura: 'Jost', 'Futura', sans-serif;       /* Futura BT (tri) */

  /* Échelle de texte : 9 tailles, 13 px au minimum, texte courant 17 px */
  --as-t-xs: 13px;
  --as-t-s: 15px;
  --as-t-m: 17px;
  --as-t-l: 19px;
  --as-t-xl: 24px;
  --as-t-2xl: clamp(40px, 5.2vw, 62px);
  --as-t-3xl: clamp(54px, 7.4vw, 96px);
  --as-t-titre: clamp(66px, 9.6vw, 132px);
  --as-t-chiffre: clamp(46px, 4.6vw, 60px);

  /* Espaces */
  --as-e-1: 4px;
  --as-e-2: 8px;
  --as-e-3: 12px;
  --as-e-4: 16px;
  --as-e-5: 24px;
  --as-e-6: 40px;
  --as-e-7: 64px;
  --as-e-8: 96px;

  --as-largeur: 1200px;
  --as-marge: clamp(16px, 4vw, 48px);
  --as-bandeau-pointe: clamp(40px, 6vw, 84px);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--as-police-texte);
  font-size: var(--as-t-m);
  line-height: 1.5;
  color: var(--as-encre);
  background: var(--as-blanc);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
sup { line-height: 0; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[id] { scroll-margin-top: 72px; }
.as-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.as-dedans { width: 100%; max-width: var(--as-largeur); margin: 0 auto; padding: 0 var(--as-marge); }
.as-section { padding: var(--as-e-8) 0 0; }

/* Titre manuscrit (Lemon Brush → Cookie) + navette + sous-titre trilingue */
.as-script {
  font-family: var(--as-police-script); font-weight: 400;
  font-size: var(--as-t-2xl); line-height: 0.95; letter-spacing: 0.005em;
  color: var(--as-script, var(--as-magenta));
}
.as-navette {
  display: block; width: 30px; height: 6px; margin: var(--as-e-3) auto;
  border-radius: 50%; background: var(--as-navette, var(--as-magenta));
}
.as-sous-titre {
  font-style: italic; font-weight: 600; font-size: var(--as-t-s);
  color: var(--as-sous-titre, var(--as-magenta));
}
/* En-tête des pages pratiques : fleuron beige en filigrane derrière le titre (p. 6 à 10) */
.as-tete {
  position: relative; text-align: center;
  padding: clamp(32px, 4vw, 56px) var(--as-marge) 0;
  max-width: var(--as-largeur); margin: 0 auto var(--as-e-6);
}
.as-tete--fleuron::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 0;
  width: min(560px, 92%); aspect-ratio: 1210 / 396; transform: translateX(-50%);
  background: url('decor/fleuron-haut.png') center top / contain no-repeat;
}
.as-tete { isolation: isolate; }

/* ---------------------------------------------------------------- couverture */
.as-couv { position: relative; padding: 0 var(--as-marge); }
.as-couv__tete {
  max-width: var(--as-largeur); margin: 0 auto;
  display: flex; align-items: stretch; justify-content: space-between; gap: var(--as-e-4);
  padding-top: var(--as-e-4);
}
.as-couv__guide {
  align-self: center;
  font-size: var(--as-t-xl); line-height: 1.15; letter-spacing: 0.01em; color: var(--as-turquoise);
  font-weight: 400;
}
.as-couv__guide strong { font-weight: 700; }
.as-couv__annee {
  font-family: var(--as-police-script); font-size: var(--as-t-2xl); line-height: 1;
  color: var(--as-blanc); background: var(--as-turquoise);
  padding: var(--as-e-2) var(--as-e-5) var(--as-e-1);
  display: flex; align-items: center;
}
.as-couv__photo {
  position: relative; max-width: var(--as-largeur); margin: 0 auto;
  height: min(76svh, 780px); min-height: 520px;
  display: grid; place-items: center; isolation: isolate;
}
.as-couv__fond {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; z-index: -2;
}
.as-couv__photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--as-voile) 0%, transparent 42%);
}
.as-couv__lieu {
  position: absolute; top: var(--as-e-4); right: var(--as-e-5);
  color: var(--as-blanc); font-size: var(--as-t-xl); letter-spacing: 0.06em; font-weight: 400;
}
.as-couv__bloc { display: flex; flex-direction: column; align-items: center; margin-top: -9%; }
.as-couv h1 { margin: 0; font-weight: 400; display: contents; }
.as-couv__mot {
  display: block; font-family: var(--as-police-script); font-size: var(--as-t-titre);
  line-height: 0.82; white-space: nowrap;
}
.as-couv__mot--1 { color: var(--as-blanc); position: relative; z-index: 1; margin-bottom: -0.12em; }
.as-couv__cadre {
  background: var(--as-blanc);
  width: clamp(250px, 34vw, 420px);
  display: flex; flex-direction: column; align-items: center;
  padding: 0.2em 0 var(--as-e-5);
}
.as-couv__mot--2 { color: var(--as-framboise); align-self: flex-start; margin-left: -18%; }
.as-couv__mot--3 { color: var(--as-turquoise); align-self: flex-end; margin-right: -16%; margin-top: -0.06em; }
.as-couv__logo { width: 62%; margin-top: var(--as-e-4); }
.as-couv__fleuron {
  position: absolute; left: 50%; bottom: 0; width: min(400px, 40%);
  transform: translate(-50%, 46%);
}

/* ---------------------------------------------------------------- navigation (ajout web) */
.as-nav {
  position: sticky; top: 60px; z-index: 10; margin-top: clamp(64px, 8vw, 120px);
  background: var(--as-blanc); border-bottom: 2px solid var(--as-beige);
}
.as-nav ul {
  max-width: var(--as-largeur); margin: 0 auto; padding: var(--as-e-2) var(--as-marge);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--as-e-1) var(--as-e-4);
}
.as-nav a {
  display: inline-block; padding: var(--as-e-2) 0; text-decoration: none;
  font-weight: 700; font-size: var(--as-t-s); color: var(--as-encre);
}
.as-nav a:hover, .as-nav a:focus-visible { color: var(--as-magenta); }

/* ---------------------------------------------------------------- choix de la langue (ajout web) */
.as-outils {
  /* Barre blanche au-dessus de la couverture : les boutons ne recouvrent rien. */
  position: sticky; top: 0; z-index: 20; height: 60px; padding: 0 var(--as-e-4);
  display: flex; align-items: center; justify-content: flex-end; gap: var(--as-e-2);
  background: var(--as-blanc); border-bottom: 1px solid var(--as-gris-clair);
}
.as-pdf {
  display: inline-flex; align-items: center; gap: var(--as-e-2); min-height: 44px; padding: 0 var(--as-e-4);
  border-radius: 999px; background: var(--as-magenta); color: var(--as-blanc); text-decoration: none;
  font-family: var(--as-police-texte); font-weight: 700; font-size: var(--as-t-s);
}
.as-pdf:hover, .as-pdf:focus-visible { background: var(--as-encre); }
.as-pdf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Sur téléphone : « (PDF) » seul, pour ne pas couvrir la couverture. */
@media (max-width: 699px) { .as-pdf span { display: none; } }
.as-langues {
  display: flex; background: var(--as-blanc); border: 2px solid var(--as-encre); border-radius: 999px; overflow: hidden;
}
.as-langues a {
  display: inline-block; min-width: 44px; padding: var(--as-e-2) var(--as-e-3); text-align: center; text-decoration: none;
  font-family: var(--as-police-texte); font-weight: 700; font-size: var(--as-t-s); color: var(--as-encre);
}
.as-langues a[aria-current] { background: var(--as-encre); color: var(--as-blanc); }
.as-langues a:not([aria-current]):hover, .as-langues a:not([aria-current]):focus-visible { color: var(--as-magenta); }
/* En anglais, les sous-titres EN / DE de la brochure sont retirés (langue.js) : pas de ligne vide. */
html[lang="en"] #page p:empty { display: none; }

/* ---------------------------------------------------------------- comment venir */
.as-acces__grille {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--as-e-6); align-items: stretch;
}
.as-acces__titre { --as-script: var(--as-magenta); }
.as-acces__titre .as-script { display: block; }
.as-acces__titre .as-script + .as-script { padding-left: 1.2em; }
.as-acces__getting { color: var(--as-or-fonce); font-weight: 700; font-size: var(--as-t-l); margin: 0 0 var(--as-e-4) 3.2em; }
.as-acces__gauche .as-navette { margin: var(--as-e-3) 0 var(--as-e-3) 5.4em; }
.as-acces__carte img { width: 100%; height: auto; }
.as-panneau {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--as-taupe-fonce); color: var(--as-blanc);
  padding: var(--as-e-7) var(--as-e-6) var(--as-e-6);
}
.as-panneau::before {   /* fleuron en filigrane, comme en tête du panneau du PDF */
  content: ""; position: absolute; z-index: -1; left: 50%; top: 0;
  width: min(420px, 90%); aspect-ratio: 1210 / 396; transform: translateX(-50%);
  background: url('decor/fleuron-taupe.png') center top / contain no-repeat;
}
.as-moyens { display: grid; grid-template-columns: 1fr 1fr; gap: var(--as-e-5) var(--as-e-6); }
.as-moyen__titre { display: flex; align-items: center; gap: var(--as-e-3); }
.as-moyen__titre .as-script { --as-script: var(--as-blanc); font-size: var(--as-t-2xl); }
.as-moyen__titre img { height: 22px; width: auto; }
.as-moyen .as-navette { margin: var(--as-e-2) 0 var(--as-e-3); width: 24px; height: 5px; }
.as-moyen li { font-size: var(--as-t-s); line-height: 1.45; padding-left: 1em; text-indent: -0.8em; margin-bottom: var(--as-e-1); }
.as-moyen li::before { content: "•"; margin-right: 0.45em; }
.as-moyen li span { display: block; text-indent: 0; font-size: var(--as-t-xs); }
.as-acces__routes { margin-top: var(--as-e-6); }
.as-acces__routes img { width: 100%; height: auto; }
.as-acces__routes .as-acces__centre { display: none; }

/* ---------------------------------------------------------------- ouverture de chapitre */
.as-ouv { padding-top: var(--as-e-8); --as-ouv: var(--as-violet); --as-fleuron: url('decor/fleuron-violet.png'); }
.as-ouv--magenta { --as-ouv: var(--as-magenta); --as-fleuron: url('decor/fleuron-magenta.png'); }
.as-bandeau {
  position: relative; isolation: isolate; overflow: hidden; text-align: center; color: var(--as-blanc);
  background: var(--as-ouv);
  padding: clamp(56px, 7vw, 104px) var(--as-marge) calc(var(--as-bandeau-pointe) + var(--as-e-5));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--as-bandeau-pointe)), 50% 100%, 0 calc(100% - var(--as-bandeau-pointe)));
}
.as-bandeau::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 0;
  width: min(900px, 120%); aspect-ratio: 1210 / 396; transform: translateX(-50%);
  background: var(--as-fleuron) center top / contain no-repeat;
}
.as-bandeau__titre { font-family: var(--as-police-script); font-weight: 400; font-size: var(--as-t-3xl); line-height: 1; }
.as-bandeau__sous-titre {
  margin-top: var(--as-e-3); font-style: italic; font-weight: 700; font-size: var(--as-t-s); letter-spacing: 0.02em;
}
.as-ouv__photo {
  position: relative; z-index: -1; max-width: 1040px; margin: calc(-1 * var(--as-bandeau-pointe) - var(--as-e-5)) auto 0;
  padding: 0 var(--as-marge);
}
.as-ouv { position: relative; isolation: isolate; }
.as-ouv__photo img { width: 100%; height: clamp(320px, 50vw, 700px); object-fit: cover; }
.as-ouv__fleuron { width: min(240px, 44%); margin: calc(-1 * clamp(24px, 3vw, 40px)) auto 0; position: relative; }

/* ---------------------------------------------------------------- fiches (sections « activities ») */
.as-fiches { padding: var(--as-e-7) 0 0; --as-theme: var(--as-violet); }
.as-fiches--magenta { --as-theme: var(--as-magenta); }
.as-grille {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--as-e-7) var(--as-e-6);
}
.as-cellule {
  display: flex; flex-direction: column; gap: var(--as-e-3);
  padding-bottom: var(--as-e-5); border-bottom: 2px solid var(--as-theme);
}
.as-cellule__photo { aspect-ratio: 8 / 3.4; overflow: hidden; background: var(--as-beige); margin-bottom: var(--as-e-1); }
.as-cellule__photo img { width: 100%; height: 100%; object-fit: cover; }
.as-cellule__pastilles { display: flex; flex-wrap: wrap; gap: var(--as-e-2); }
.as-pastille {
  display: inline-block; background: var(--as-theme); color: var(--as-blanc);
  font-size: var(--as-t-xs); font-weight: 700; line-height: 1.3; padding: var(--as-e-1) var(--as-e-3);
}
.as-cellule__titre { font-size: var(--as-t-l); line-height: 1.25; font-weight: 800; color: var(--as-theme); }
.as-cellule__desc { font-size: var(--as-t-s); line-height: 1.55; white-space: pre-line; }
.as-cellule__suite summary {
  cursor: pointer; font-size: var(--as-t-s); font-weight: 700; color: var(--as-theme);
  list-style: none; display: inline-block; padding: var(--as-e-1) 0;
}
.as-cellule__suite summary::-webkit-details-marker { display: none; }
.as-cellule__suite summary::after { content: " +"; }
.as-cellule__suite[open] summary { display: none; }
.as-cellule__suite[open] + .as-cellule__desc, .as-cellule__desc:has(+ .as-cellule__suite[open]) { display: none; }
.as-cellule__suite p { font-size: var(--as-t-s); line-height: 1.55; white-space: pre-line; }
.as-cellule__info { display: flex; gap: var(--as-e-2); align-items: flex-start; font-size: var(--as-t-s); line-height: 1.45; }
.as-cellule__info svg { flex: none; width: 18px; height: 18px; margin-top: 2px; stroke: var(--as-theme); }
.as-cellule__info span { white-space: pre-line; }
.as-cellule__info--adresse span { font-weight: 700; }
.as-cellule__contact { overflow: hidden; font-size: var(--as-t-s); font-weight: 700; line-height: 1.45; }
.as-cellule__contact > p { display: flex; flex-wrap: wrap; margin-left: -1.1em; }
.as-cellule__contact a { text-decoration: none; display: inline-block; padding: 3px 0; }
.as-cellule__lien { position: relative; padding-left: 1.1em; overflow-wrap: anywhere; }
.as-cellule__lien + .as-cellule__lien::before { content: "|"; position: absolute; left: 0.35em; font-weight: 400; color: var(--as-theme); }
.as-cellule__contact a:hover { color: var(--as-theme); text-decoration: underline; }
.as-encart { margin: 0; min-height: 320px; background: var(--as-beige); }
.as-encart img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- numéros d'urgence */
.as-urg { --as-ouv: var(--as-bleu); --as-fleuron: url('decor/fleuron-bleu.png'); padding-top: var(--as-e-7); }
.as-urg .as-bandeau { padding-top: clamp(40px, 5vw, 72px); }
.as-urg .as-bandeau__titre { font-size: var(--as-t-2xl); }
.as-urg .as-bandeau__sous-titre { font-size: var(--as-t-l); }
.as-urg .as-navette { margin-top: var(--as-e-4); }
.as-urg__grille {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--as-e-7) var(--as-e-6);
  margin-top: var(--as-e-7); text-align: center;
}
.as-urg__item { --c: var(--as-encre); }
.as-urg__item .as-urg__numero { font-weight: 800; font-size: var(--as-t-chiffre); line-height: 1; color: var(--c); }
.as-urg__item .as-urg__nom { font-weight: 800; font-size: var(--as-t-l); line-height: 1.2; color: var(--c); margin: var(--as-e-4) 0 var(--as-e-4); }
.as-urg__item p { font-size: var(--as-t-s); line-height: 1.45; margin-top: var(--as-e-3); }
.as-urg__fr { font-weight: 700; }
.as-urg__numero sup, .as-bandeau__titre sup { font-size: var(--as-t-xl); vertical-align: super; }
.as-urg__item--olive { --c: var(--as-olive); }
.as-urg__item--orange { --c: var(--as-orange-fonce); }
.as-urg__item--rouge { --c: var(--as-rouge); }
.as-urg__item--violet { --c: var(--as-violet); }
.as-urg__item--vert { --c: var(--as-vert-nuit); }
.as-urg__item--magenta { --c: var(--as-magenta); }
.as-urg__poison { text-align: center; margin-top: var(--as-e-7); color: var(--as-turquoise); }
.as-urg__poison h3 { font-size: var(--as-t-l); font-weight: 800; line-height: 1.25; }
.as-urg__poison .as-urg__poison-en { font-size: var(--as-t-l); font-weight: 700; }
.as-urg__poison p:last-child { color: var(--as-encre); font-weight: 700; margin-top: var(--as-e-3); }
.as-urg__poison a { white-space: nowrap; }
.as-urg a, .as-dos__credit a, .as-eau__contact a { display: inline-block; padding: 4px 0; }
.as-urg__note { font-size: var(--as-t-xs); margin-top: var(--as-e-6); }

/* ---------------------------------------------------------------- éco-gestes d'eau */
.as-eau .as-tete { --as-navette: var(--as-or); }
.as-eau__panneaux { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--as-e-4); }
.as-eau__panneau { padding: var(--as-e-6) var(--as-e-6) var(--as-e-6); background: var(--as-eau-maison); }
.as-eau__panneau--maison { grid-column: 1 / -1; }
.as-eau__panneau--jardin { background: var(--as-eau-jardin); }
.as-eau__panneau--exterieur { grid-column: 1 / -1; background: var(--as-eau-exterieur); }
.as-eau__titre {
  position: relative; isolation: isolate;
  font-family: var(--as-police-futura); font-weight: 300; font-size: var(--as-t-2xl); line-height: 1;
  letter-spacing: 0.01em; text-align: center; margin-bottom: var(--as-e-6);
}
.as-eau__titre::before {   /* grande goutte du PDF, passée sous le titre */
  content: ""; position: absolute; z-index: -1; left: 50%; top: -0.2em; width: 1.5em; height: 1.5em;
  background: var(--goutte, var(--as-eau-exterieur)); border-radius: 0 50% 50% 50%;
  transform: translateX(-50%) rotate(45deg); transform-origin: center;
}
.as-eau__panneau--jardin { --goutte: var(--as-goutte-jardin); }
.as-eau__panneau--exterieur { --goutte: var(--as-bleu-clair); }
.as-eau__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--as-e-6) var(--as-e-6); align-items: start; }
.as-eau__panneau--jardin .as-eau__liste { grid-template-columns: 1fr; gap: var(--as-e-5); }
.as-conseil { display: grid; grid-template-columns: 18px 1fr auto; gap: var(--as-e-3) var(--as-e-4); align-items: start; font-size: var(--as-t-s); line-height: 1.5; }
.as-conseil::before {   /* goutte blanche du PDF */
  content: ""; grid-row: 1; align-self: start; width: 15px; height: 15px; margin-top: 4px; background: var(--as-blanc);
  border-radius: 0 50% 50% 50%; transform: rotate(45deg);
}
.as-conseil p::first-letter { font-weight: 800; }
.as-conseil p { grid-column: 2; grid-row: 1; }
.as-conseil img { grid-column: 3; grid-row: 1; align-self: center; height: 120px; width: auto; max-width: 180px; object-fit: contain; }
.as-eau__panneau--exterieur .as-eau__liste { grid-template-columns: 1.7fr 1fr 1.3fr; }
.as-eau__panneau--exterieur .as-conseil img { grid-column: 2; grid-row: 2; justify-self: start; height: 120px; max-width: 260px; }
.as-eau__contact {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: var(--as-e-6) var(--as-e-5); gap: var(--as-e-2);
}
.as-eau__contact img { width: min(260px, 80%); margin-bottom: var(--as-e-4); }
.as-eau__contact h3 { font-size: var(--as-t-l); font-weight: 800; line-height: 1.3; }
.as-eau__contact .as-eau__service { font-size: var(--as-t-l); margin-top: var(--as-e-4); }
.as-eau__contact a { display: inline-block; padding: 2px 0; }

/* ---------------------------------------------------------------- tri */
.as-tri .as-tete { --as-navette: var(--as-or); }
.as-tri__intertitre {
  font-weight: 600; font-size: var(--as-t-xl); text-align: center; letter-spacing: 0.01em;
  margin: var(--as-e-7) 0 var(--as-e-5);
}
.as-bande { background: var(--as-tri-jaune); padding: var(--as-e-5) var(--as-e-6) var(--as-e-5); margin-bottom: var(--as-e-4); }
.as-bande--ordures { background: var(--as-tri-gris); }
.as-bande__titre, .as-borne__titre {
  font-family: var(--as-police-futura); font-weight: 300; font-size: var(--as-t-2xl); line-height: 1; letter-spacing: 0.01em;
}
.as-bande__titre { color: var(--as-or-texte); font-size: var(--as-t-3xl); margin-bottom: -0.42em; }
.as-bande--ordures .as-bande__titre { color: var(--as-gris-fonce); }
.as-bande__rang { position: relative; display: flex; align-items: flex-end; gap: var(--as-e-3); margin-top: 0; }
.as-bande__objets { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--as-e-5); }
.as-objet { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--as-e-2); text-align: center; }
.as-objet img { height: 72px; width: auto; max-width: 100%; object-fit: contain; }
.as-objet figcaption { font-family: var(--as-police-futura); font-weight: 500; font-size: var(--as-t-s); line-height: 1.3; }
.as-bande__objets .as-objet + .as-objet::before {  /* « + » dessiné dans le PDF */
  content: "+"; position: absolute; left: calc(-1 * var(--as-e-5) / 2); top: 22px; transform: translateX(-50%);
  font-family: var(--as-police-futura); font-weight: 500; font-size: var(--as-t-xl); color: var(--as-gris);
}
.as-bande__bac { position: relative; flex: none; display: flex; align-items: flex-end; gap: var(--as-e-3); }
.as-bande__bac::before { content: ""; border: 12px solid transparent; border-left: 16px solid var(--as-gris); margin-bottom: 40px; }
.as-bande__bac img { height: 118px; width: auto; }
.as-bande__ou { position: absolute; right: 0; top: -6px; font-family: var(--as-police-futura); font-weight: 500; font-size: var(--as-t-s); }
.as-bornes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--as-e-8) var(--as-e-5); align-items: stretch; padding-bottom: var(--as-e-8); --borne-k: 1.3; }
.as-borne {
  position: relative; display: flex; flex-direction: column; gap: var(--as-e-3);
  background: var(--as-tri-papiers); padding: var(--as-e-4) var(--as-e-4) 0;
  padding-bottom: calc(var(--borne-l) * var(--borne-k) * var(--borne-r) * var(--borne-d) * 1% + var(--as-e-3));
}
.as-borne--verres { background: var(--as-tri-verres); }
.as-borne--cartons { background: var(--as-tri-cartons); }
.as-borne--textiles { background: var(--as-tri-textiles); color: var(--as-blanc); }
.as-borne__titre { font-size: var(--as-t-xl); }
.as-borne .as-objet { align-items: stretch; text-align: left; }
.as-borne .as-objet img { height: auto; max-height: 64px; align-self: flex-start; }
.as-borne .as-objet figcaption { font-size: var(--as-t-s); border-top: 1px solid currentColor; padding-top: var(--as-e-1); }
.as-borne__note { font-family: var(--as-police-futura); font-size: var(--as-t-s); line-height: 1.35; }
.as-borne__img {
  position: absolute; bottom: 0; right: calc((100 - var(--borne-x) - var(--borne-l)) * 1%); width: calc(var(--borne-l) * var(--borne-k) * 1%);
  transform: translateY(calc((1 - var(--borne-d)) * 100%));
}
.as-tri__encart { display: flex; justify-content: center; }
.as-tri__encart figure { margin: 0; }
.as-tri__encart img { width: min(520px, 100%); height: auto; }

/* ---------------------------------------------------------------- alpillesenprovence.com */
.as-web { --as-cadre: 2px solid var(--as-or); }
.as-web__haut, .as-web__bas { max-width: 1040px; margin: 0 auto; border: var(--as-cadre); }
.as-web__haut { border-bottom: 0; text-align: center; padding: var(--as-e-6) var(--as-marge) var(--as-e-6); position: relative; isolation: isolate; }
.as-web__haut::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: min(300px, 70%); aspect-ratio: 1210 / 396;
  transform: translateX(-50%); background: url('decor/fleuron-haut.png') center top / contain no-repeat;
}
.as-web__adresse {
  display: inline-block; background: var(--as-or-fonce); color: var(--as-blanc); text-decoration: none;
  font-weight: 800; font-size: var(--as-t-xl); letter-spacing: 0.06em; padding: var(--as-e-2) var(--as-e-5);
}
.as-web__adresse:hover { text-decoration: underline; }
.as-web__titre { margin-top: var(--as-e-2); transform: rotate(-3deg); }
.as-web__haut .as-sous-titre { font-style: normal; font-weight: 500; transform: rotate(-2deg); margin-top: var(--as-e-3); }
.as-web__photo { max-width: 1440px; margin: 0 auto; }
.as-web__photo img { width: 100%; height: clamp(220px, 34vw, 480px); object-fit: cover; object-position: 50% 45%; }
.as-web__bas { border-top: 0; padding: var(--as-e-7) var(--as-marge) var(--as-e-7); }
.as-polaroids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--as-e-2) var(--as-e-5); max-width: 860px; margin: 0 auto; }
/* Quinconce du PDF : les polaroïds se chevauchent légèrement */
.as-polaroid:nth-child(3n+2) { margin-top: var(--as-e-6); }
.as-polaroid:nth-child(n+4) { margin-top: calc(-1 * var(--as-e-4)); }
.as-polaroid:nth-child(5) { margin-top: var(--as-e-5); }
.as-polaroid:nth-child(-n+3) { z-index: 1; }
.as-polaroid { position: relative; background: var(--as-blanc); padding: 10px 10px 34px; box-shadow: 0 6px 16px var(--as-ombre); transform: rotate(var(--r, -3deg)); }
.as-polaroid:nth-child(2) { --r: 2deg; }
.as-polaroid:nth-child(3) { --r: 4deg; }
.as-polaroid:nth-child(4) { --r: 3deg; }
.as-polaroid:nth-child(5) { --r: -2deg; }
.as-polaroid:nth-child(6) { --r: -4deg; }
.as-polaroid::before {   /* ruban adhésif bleu ciel du PDF */
  content: ""; position: absolute; top: -14px; right: -18px; width: 76px; height: 26px;
  background: var(--as-ciel); opacity: 0.85; transform: rotate(38deg);
}
.as-polaroid:nth-child(even)::before { right: auto; left: -18px; transform: rotate(-36deg); }
.as-polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.as-polaroid figcaption {
  position: absolute; right: -10px; bottom: 6px; max-width: 92%;
  background: var(--c, var(--as-magenta)); color: var(--as-blanc);
  font-weight: 800; font-size: var(--as-t-l); line-height: 1.15; letter-spacing: 0.06em; text-align: right;
  padding: var(--as-e-1) var(--as-e-3); transform: rotate(-4deg);
}
.as-polaroid--orange { --c: var(--as-orange-fonce); }
.as-polaroid--olive { --c: var(--as-olive); }
.as-polaroid--rouge { --c: var(--as-rouge); }
.as-polaroid--bleu { --c: var(--as-bleu); }
.as-polaroid--magenta { --c: var(--as-magenta); }
.as-polaroid--violet { --c: var(--as-violet); }

/* ---------------------------------------------------------------- notes */
.as-notes__boite { max-width: 900px; margin: 0 auto; padding: 0 var(--as-marge); }
.as-notes__cadre { position: relative; border: clamp(14px, 2vw, 22px) solid var(--as-magenta); background: var(--as-blanc); padding: var(--as-e-6) clamp(20px, 5vw, 56px) var(--as-e-7); }
.as-notes__soleil { position: absolute; left: clamp(-34px, -3vw, -20px); top: clamp(-34px, -3vw, -20px); width: clamp(84px, 13vw, 130px); }
.as-notes .as-tete { margin-bottom: var(--as-e-5); padding-top: var(--as-e-3); --as-script: var(--as-violet-nuit); --as-sous-titre: var(--as-violet-nuit); }
.as-notes .as-sous-titre { font-weight: 500; }
.as-notes__lignes { height: 200px; background: repeating-linear-gradient(180deg, transparent 0 38px, var(--as-violet-clair) 38px 40px); opacity: 0.45; }

/* ---------------------------------------------------------------- accueils */
.as-raisons { position: relative; isolation: isolate; overflow: hidden; background: var(--as-taupe-fonce); color: var(--as-blanc); padding: var(--as-e-7) var(--as-marge) var(--as-e-7); text-align: center; }
.as-raisons::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: min(640px, 110%); aspect-ratio: 1210 / 396;
  transform: translateX(-50%); background: url('decor/fleuron-taupe.png') center top / contain no-repeat;
}
.as-raisons .as-script { --as-script: var(--as-blanc); }
.as-raisons .as-sous-titre { --as-sous-titre: var(--as-blanc); }
.as-raisons__liste { counter-reset: raison; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--as-e-6) var(--as-e-5); max-width: 1000px; margin: var(--as-e-6) auto 0; }
.as-raison { flex: 0 1 300px; counter-increment: raison; }
.as-raison__n::before { content: counter(raison); }
.as-raison__n {
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto var(--as-e-3); border-radius: 50%;
  background: var(--as-magenta); font-family: var(--as-police-script); font-size: var(--as-t-xl); line-height: 1;
}
.as-raison__fr { font-weight: 700; font-size: var(--as-t-m); line-height: 1.35; }
.as-raison p + p { font-style: italic; font-weight: 500; font-size: var(--as-t-xs); line-height: 1.4; margin-top: var(--as-e-2); }
.as-accueils { text-align: center; padding-top: var(--as-e-7); }
.as-accueils .as-script { --as-script: var(--as-bleu); }
.as-accueils .as-sous-titre { --as-sous-titre: var(--as-bleu-texte); }
.as-bureaux { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--as-e-6) var(--as-e-7); align-items: center; max-width: 1000px; margin: var(--as-e-6) auto 0; }
.as-bureaux__col { display: grid; gap: var(--as-e-6); }
.as-bureaux__logo img { width: clamp(150px, 16vw, 200px); }
.as-bureau { color: var(--as-bleu-texte); font-size: var(--as-t-s); line-height: 1.45; font-style: normal; }
.as-bureau__nom { color: var(--as-magenta); font-weight: 800; }
.as-bureau a { display: inline-block; padding: 2px 0; }
.as-bureau__tel { font-weight: 800; }
.as-accueils__site { display: inline-block; margin-top: var(--as-e-6); color: var(--as-magenta); font-weight: 800; font-size: var(--as-t-l); }
.as-accueils .as-navette { margin-top: var(--as-e-5); }
.as-partenaires { position: relative; max-width: 1000px; margin: var(--as-e-7) auto 0; border: 2px solid var(--as-taupe); padding: var(--as-e-6) var(--as-e-5) var(--as-e-5); }
.as-partenaires h3.as-script {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -55%); padding: 0 var(--as-e-4);
  background: var(--as-blanc); white-space: nowrap; --as-script: var(--as-taupe-fonce); font-size: var(--as-t-2xl);
}
.as-partenaires ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--as-e-5) var(--as-e-5); }
.as-partenaires img { height: 46px; width: auto; }
.as-mentions { display: flex; align-items: center; justify-content: center; gap: var(--as-e-4); margin: var(--as-e-6) auto 0; color: var(--as-bleu-texte); font-size: var(--as-t-xs); font-weight: 700; font-style: italic; }
.as-mentions img { width: 52px; }

/* ---------------------------------------------------------------- dos */
.as-dos { padding-top: var(--as-e-8); padding-bottom: var(--as-e-6); }
.as-dos figure { border: 1px solid var(--as-or); }
.as-dos img { width: 100%; height: clamp(360px, 56vw, 760px); object-fit: cover; object-position: 50% 32%; }
.as-dos__credit { font-size: var(--as-t-xs); letter-spacing: 0.04em; margin-top: var(--as-e-3); text-align: right; }
.as-dos__credit a { white-space: nowrap; }

/* ---------------------------------------------------------------- tablette */
@media (max-width: 1000px) {
  .as-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-urg__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-acces__grille { grid-template-columns: 1fr; }
  .as-eau__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-eau__panneau--maison .as-eau__liste > :last-child { grid-column: 1 / -1; }
  .as-eau__panneaux { grid-template-columns: 1fr; }
  .as-bornes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-bande__objets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-eau__panneau--exterieur .as-eau__liste { grid-template-columns: 1fr; }
  .as-bornes { --borne-k: 0.8; }
  .as-bande__objets .as-objet:nth-child(odd)::before { display: none; }
  .as-bureaux { grid-template-columns: 1fr 1fr; }
  .as-bureaux__logo { order: -1; grid-column: 1 / -1; justify-self: center; }
}

/* ---------------------------------------------------------------- téléphone */
@media (max-width: 640px) {
  .as-section, .as-ouv, .as-urg, .as-dos { padding-top: var(--as-e-7); }
  .as-couv__tete { flex-direction: column-reverse; align-items: center; text-align: center; gap: var(--as-e-2); }
  .as-couv__annee { font-size: var(--as-t-2xl); padding: var(--as-e-1) var(--as-e-4) 0; }
  .as-couv__photo { height: min(66svh, 600px); min-height: 460px; }
  .as-couv__lieu { font-size: var(--as-t-l); right: var(--as-e-3); top: var(--as-e-3); }
  .as-couv__cadre { width: 64%; }
  .as-couv__mot--2 { margin-left: -22%; }
  .as-couv__mot--3 { margin-right: -22%; }
  .as-couv__fleuron { width: 78%; }
  .as-nav { position: static; margin-top: 104px; }
  .as-nav ul { gap: 0 var(--as-e-4); }
  .as-grille { grid-template-columns: 1fr; gap: var(--as-e-6); }
  .as-cellule__photo { aspect-ratio: 16 / 9; }
  .as-urg__grille { grid-template-columns: 1fr; gap: var(--as-e-6); }
  .as-moyens { grid-template-columns: 1fr; }
  .as-panneau { padding: var(--as-e-6) var(--as-e-5); }
  .as-eau__panneau { padding: var(--as-e-5) var(--as-e-4); }
  .as-eau__liste, .as-eau__panneau--exterieur .as-eau__liste { grid-template-columns: 1fr; }
  .as-eau__panneau--maison .as-eau__liste > :last-child { grid-column: auto; }
  .as-bande { padding: var(--as-e-4); }
  .as-bande__titre { font-size: var(--as-t-2xl); margin-bottom: var(--as-e-4); }
  .as-bande__rang { flex-direction: column; align-items: center; }
  .as-bande__objets { gap: var(--as-e-5) var(--as-e-4); width: 100%; }
  .as-bande__objets .as-objet:nth-child(odd)::before { display: none; }
  .as-bornes { grid-template-columns: 1fr; gap: var(--as-e-8); --borne-k: 0.62; }
  .as-bande__bac::before { display: none; }
  .as-acces__routes .as-acces__centre { display: block; }
  .as-acces__routes img:first-child { display: none; }
  .as-conseil img, .as-eau__panneau--exterieur .as-conseil img { height: 84px; max-width: 120px; }
  .as-polaroid:nth-child(odd)::before { right: auto; left: -14px; transform: rotate(-36deg); }
  .as-polaroid:nth-child(even)::before { left: auto; right: -14px; transform: rotate(38deg); }
  .as-notes__cadre { border-width: 10px; padding-left: var(--as-e-3); padding-right: var(--as-e-3); }
  .as-notes__titre-1 { white-space: nowrap; }
  .as-borne { padding-left: var(--as-e-3); padding-right: var(--as-e-3); }
  .as-borne__titre { font-size: var(--as-t-l); }
  .as-borne__note { max-width: none; }
  .as-polaroids { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--as-e-6) var(--as-e-5); }
  .as-polaroid:nth-child(n) { margin-top: 0; }
  .as-polaroid { padding: 6px 6px 26px; }
  .as-web__adresse { font-size: var(--as-t-l); letter-spacing: 0.02em; padding: var(--as-e-2) var(--as-e-3); }
  .as-polaroid figcaption { letter-spacing: 0; right: -4px; max-width: calc(100% + 4px); padding: 2px var(--as-e-2); }
  .as-web__haut, .as-web__bas { margin: 0 var(--as-e-3); }
  .as-bureaux { grid-template-columns: 1fr; }
  .as-bureaux__logo { order: -1; justify-self: center; }
  .as-partenaires img { height: 40px; }
  .as-partenaires h3.as-script { font-size: var(--as-t-2xl); }
  .as-dos__credit { text-align: left; }
}