/* ==========================================================================
   valreas.toovaucluse.fr | feuille de style unique
   Palette : lavande #6B5B95, pierre #C8964E, vigne #6F8055.
   Polices Newsreader et Figtree, hébergées dans /polices.
   Aucune ressource externe : ni Google Fonts, ni CDN.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------
     Palette propre à Valréas, et pas au département.

     LAVANDE, la couleur de marque. Le Corso de la Lavande occupe la ville
     quatre jours au premier week-end d'août, et trois établissements de
     fabrication d'huiles essentielles sont toujours déclarés sur la commune,
     dont le plus ancien depuis 1946. Ce n'est pas un décor, c'est une
     économie.

     PIERRE, l'accent. L'ocre du centre ancien, celui des dix monuments
     protégés et des bornes papales relevées sur le territoire.

     VIGNE, la couleur secondaire. 174 établissements liés à la vigne, et une
     dénomination « Côtes du Rhône Villages Valréas » dont l'aire s'arrête aux
     limites de la commune.

     Les jetons sont nommés par leur RÔLE et non par leur couleur : un jeton
     « --bleu » contenant du lavande piégerait la prochaine reprise.
     -------------------------------------------------------------------- */
  --marque:        #6B5B95;   /* lavande */
  --marque-fonce:  #4E4270;   /* survol et texte : la lavande claire ne passe pas sur blanc */
  --marque-nuit:   #241E33;   /* bandeaux et pied de page */
  --marque-pale:   #EFECF7;
  --marque-brume:  #F8F6FC;
  --marque-titre:  #4E4270;

  --accent:        #C8964E;   /* pierre du centre ancien */
  --accent-pale:   #FAF1E2;
  --accent-texte:  #8A6224;   /* le seul ocre lisible en texte, sur fond pâle */

  --second:        #6F8055;   /* vigne */
  --second-pale:   #EEF2E7;
  --second-fonce:  #56663F;

  --tierce:        #9A8CC0;   /* lavande claire, pour les troisièmes niveaux */
  --tierce-pale:   #F3F0FA;
  --tierce-fonce:  #5C4F87;

  /* Neutres tirés vers le violet, pour qu'ils ne jurent pas avec la marque */
  --encre:       #211D2B;
  --encre-douce: #575167;
  --encre-pale:  #8A8399;
  --papier:      #ffffff;
  --papier-creux:#F8F6FB;
  --trait:       #E5E1EE;
  --trait-fort:  #CFC8DE;

  --rayon:    14px;
  --rayon-s:  10px;
  --rayon-xs: 999px;
  --ombre:    0 1px 2px rgba(33,29,43,.04), 0 8px 24px rgba(33,29,43,.06);
  --ombre-f:  0 4px 10px rgba(33,29,43,.07), 0 22px 54px rgba(33,29,43,.12);

  /* Newsreader pour les titres, Figtree pour le corps, toutes deux
     HÉBERGÉES ICI, dans /polices. Aucune requête vers un serveur tiers :
     le rendu ne dépend pas d'un CDN et la page ne fuite pas l'adresse IP du
     lecteur. Voir css/polices.css. */
  --titre: 'Newsreader', Georgia, "Times New Roman", serif;
  --serif: 'Newsreader', Georgia, "Times New Roman", serif;
  --sans:  'Figtree', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --largeur: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.75;
  color: var(--encre);
  /* Fond legerement lavande, articles en carte blanche : la profondeur fait
     le gros du travail, et aucun HTML ne bouge. */
  background: var(--papier-creux);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--marque-fonce); font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--accent-texte); }

/* Newsreader est une serif de labeur : elle tient a 600, elle s'empate a 800. */
h1, h2, h3 {
  font-family: var(--titre); font-weight: 600; line-height: 1.18;
  margin: 0 0 .45em; letter-spacing: -.012em; color: var(--encre);
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.15rem); letter-spacing: -.018em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); margin-top: 2.4em; }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); margin-top: 1.9em; }
/* Les H4 repassent en sans, en capitales : ils servent d'intertitres courts
   dans les encadres, pas de titres de section. */
h4 {
  font-family: var(--sans); font-size: .82rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .075em; color: var(--marque-titre);
  margin: 1.5em 0 .6em; line-height: 1.4;
}
h2 + h3, h3 + h4 { margin-top: 1em; }

/* Filet vertical devant le H2, trait fin dessous : le decoupage se lit d'un
   coup d'oeil dans une page longue, sans peser comme une barre pleine. */
.corps-article > h2,
.bloc-texte > h2 {
  display: flex; align-items: baseline; gap: .55rem;
  padding-bottom: .34em;
  border-bottom: 1px solid var(--trait);
}
.corps-article > h2::before,
.bloc-texte > h2::before {
  content: ""; flex: 0 0 5px; align-self: center;
  width: 5px; height: .92em; border-radius: 3px;
  background: linear-gradient(180deg, var(--marque) 50%, var(--accent) 50%);
}

p { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.25em; padding-left: 1.3em; }
li { margin-bottom: .5em; }
li::marker { color: var(--marque); }
strong { font-weight: 700; }
small { font-size: .86rem; }

.zone { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }
/* Colonne de lecture. Elargie a 1080 px le 13 aout 2026 : a 860 px, le texte
   revenait a la ligne alors qu'il restait 500 px de vide de chaque cote. */
.zone-etroite { max-width: 1080px; }

.lien-evitement {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--marque); color: #fff; padding: 14px 20px; border-radius: 0 0 var(--rayon-s) 0;
  font-weight: 700;
}
.lien-evitement:focus { left: 0; }
:focus-visible { outline: 3px solid var(--marque); outline-offset: 3px; border-radius: 4px; }

/* Contenu reserve aux lecteurs d'ecran : un label doit exister pour le champ
   qu'il decrit, meme quand le placeholder suffit a l'oeil. On ne le masque pas
   avec display:none, qui le retirerait aussi de l'arbre d'accessibilite. */
.hors-ecran {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ==========================================================================
   En-tete
   ========================================================================== */
.entete {
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
  position: sticky; top: 0; z-index: 100;
}
.entete-barre { display: flex; align-items: center; gap: 26px; min-height: 76px; }
.logo { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.logo img { height: 38px; width: 152px; }

.nav { margin-left: auto; }
.nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav li { margin: 0; }
.nav a {
  display: block; padding: 9px 15px; border-radius: var(--rayon-xs);
  color: var(--encre-douce); text-decoration: none; font-size: .95rem; font-weight: 650;
  white-space: nowrap;
}
.nav a:hover { background: var(--marque-pale); color: var(--marque-fonce); }
.nav a.actif { color: #fff; background: var(--marque); }

.nav-bouton {
  display: none; margin-left: auto; background: var(--marque); color: #fff;
  border: 0; border-radius: var(--rayon-xs); padding: 11px 20px; cursor: pointer;
  font-size: .95rem; font-family: inherit; font-weight: 700;
}

/* --- En-tete : navigation courte au centre, recherche puis btn Menu ---- */
.nav-principale { margin-left: 34px; }
.nav-principale ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav-principale li { margin: 0; }
.nav-principale a {
  display: block; padding: 10px 16px; border-radius: var(--rayon-xs);
  color: var(--encre-douce); text-decoration: none; font-family: var(--sans);
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
  white-space: nowrap; position: relative;
}
.nav-principale a::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px;
  border-radius: 2px; background: var(--marque-titre); transform: scaleX(0);
  transform-origin: left; transition: transform .18s;
}
.nav-principale a:hover { color: var(--marque-fonce); }
.nav-principale a:hover::after { transform: scaleX(1); }
.nav-principale a.actif { color: var(--marque-fonce); background: var(--marque-pale); }
.nav-principale a.actif::after { transform: scaleX(1); }
@media (max-width: 1080px) { .nav-principale { display: none; } }

/* Le btn Menu ouvre le panneau des neuf territoires, a toutes les tailles. */
.entete-barre .nav-bouton { display: block; margin-left: 14px; background: var(--marque-nuit); }
.entete-barre .nav-bouton::after { content: " \2261"; }
.entete-barre .nav-bouton:hover { background: var(--marque-fonce); }
.entete-barre .nav {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-bottom: 1px solid var(--trait);
  box-shadow: var(--ombre-f); padding: 14px 24px 20px; margin-left: 0;
}
.entete-barre .nav.ouvert { display: block; }
.entete-barre .nav ul {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 4px 18px; max-width: var(--largeur); margin: 0 auto; padding: 0; list-style: none;
}
.entete-barre .nav a { padding: 12px 16px; border-radius: var(--rayon-s); font-family: var(--sans); }
@media (max-width: 430px) { .entete-barre .nav ul { grid-template-columns: 1fr; } }
@media (max-width: 430px) {
  .logo img { height: 34px; }
  .entete-barre { gap: 12px; min-height: 64px; }
  .zone { padding: 0 18px; }
  .nav-bouton { padding: 10px 16px; }
}

/* ==========================================================================
   Bandeau
   ========================================================================== */
.entete-page { position: relative; background: var(--marque-nuit); color: #fff; overflow: hidden; }

/* Couche photo : elle n'existe que si la page a declare une illustration.
   Le voile qui la couvre est pose par ::after, deja present ci-dessous. */
.entete-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 42%;
  background-color: var(--marque-nuit);
}

/* Sur-titre : le nom de la rubrique, en capitales espacees, dans l'ocre de la
   pierre. Il situe la page avant que le titre ne soit lu. */
.entete-surtitre {
  display: inline-block; margin-bottom: .85rem;
  font-family: var(--sans); font-size: .74rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .16em;
  color: #E8C48A;
}
/* Voile pose sur la photo. Il etait repris du site principal, avec un halo
   BLEU (0,156,222) qui n'a rien a faire sur une palette lavande : c'est lui
   qui donnait au bandeau sa teinte flottante. Voile neutre, du sombre en bas
   vers le clair en haut, pour que le titre se detache sans laver la photo. */
.entete-page::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(26,20,42,.94) 0%, rgba(38,30,58,.70) 45%, rgba(38,30,58,.24) 100%);
}
.entete-bloc { position: relative; z-index: 2; padding-top: 88px; padding-bottom: 74px; }
.entete-page h1 { color: #fff; margin-bottom: .3em; text-shadow: 0 2px 26px rgba(0,0,0,.34); }
/* L'accroche occupe toute la largeur : pas de max-width court, sinon le texte
   casse au tiers de la ligne. */
.entete-accroche {
  font-size: clamp(1.12rem, 2.05vw, 1.45rem); line-height: 1.5; font-weight: 450;
  color: rgba(255,255,255,.95); margin: 0; text-shadow: 0 1px 16px rgba(0,0,0,.4);
}
.entete-reperes {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; list-style: none; padding: 0;
}
.entete-reperes li {
  margin: 0; font-size: .92rem; font-weight: 750;
  background: rgba(255,255,255,.94); border: 0;
  color: var(--marque-nuit); padding: 9px 19px; border-radius: var(--rayon-xs);
}
.entete-reperes li:nth-child(2) { background: var(--accent); color: #33230A; }
.entete-reperes li:nth-child(3) { background: var(--tierce); color: #241E33; }
.entete-reperes li:nth-child(4) { background: var(--second-fonce); color: #fff; }
.entete-court .entete-bloc { padding-top: 58px; padding-bottom: 50px; }
/* Degrade lavande pour les pages sans photo. */
.entete-plein { background: linear-gradient(135deg, var(--marque-nuit) 0%, #4A3E6B 52%, var(--marque) 100%); }
.entete-plein::after {
  background: radial-gradient(760px 380px at 92% 0%, rgba(200,150,78,.22), transparent 60%);
}
/* Des qu'une photo est posee, le voile reprend la main : sans lui, un ciel clair
   avale le titre blanc. Il est plus dense en bas, la ou le texte se trouve. */
.entete-page:has(.entete-photo)::after,
.entete-plein:has(.entete-photo)::after {
  background: linear-gradient(to top,
    rgba(23,19,33,.95) 0%, rgba(36,30,51,.78) 46%, rgba(36,30,51,.34) 100%);
}

/* ==========================================================================
   Fil d'Ariane
   ========================================================================== */
.fil { background: var(--marque-brume); border-bottom: 1px solid var(--trait); font-size: .9rem; }
.fil ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 13px 0; color: var(--encre-pale); }
.fil li { margin: 0; display: flex; gap: 8px; align-items: center; }
.fil li + li::before { content: "›"; color: var(--trait-fort); font-weight: 700; }
.fil a { color: var(--encre-douce); text-decoration: none; font-weight: 600; }
.fil a:hover { color: var(--marque-fonce); text-decoration: underline; }

/* ==========================================================================
   Mise en page. Les colonnes sont posees explicitement : le rendu ne doit
   jamais dependre de l'ordre du HTML.
   ========================================================================== */
.corps-page { padding: 48px 0 84px; }
/* Le texte est pose a meme le fond de page, sans carte : c'est ce qui donne
   aux pages internes leur respiration. Une carte blanche encadree ajoute un
   bord, une ombre et 44 px de marge interne autour de chaque paragraphe, et
   la lecture se retrouve enfermee dans une boite. Les seules cartes de la
   page sont les encadres et la colonne laterale, qui doivent, eux, se
   detacher. La colonne de lecture tombe a environ 700 px, soit 75 signes a
   18 px : la mesure recommandee. */
.corps-article, .bloc-texte {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.avec-colonne {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 60px; align-items: start;
}
.avec-colonne > .corps-article { grid-column: 1; min-width: 0; }
.avec-colonne > .aside-col,
.avec-colonne > .colonne-cote { grid-column: 2; min-width: 0; position: sticky; top: 100px; }
@media (max-width: 1080px) {
  .avec-colonne { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .avec-colonne > .corps-article,
  .avec-colonne > .aside-col,
  .avec-colonne > .colonne-cote { grid-column: 1; position: static; }
}

.corps-article > *:first-child { margin-top: 0; }
.corps-article figure { margin: 2.2em 0; }
.corps-article figure img { border-radius: var(--rayon); box-shadow: var(--ombre-f); width: 100%; }
.corps-article figcaption { font-size: .86rem; color: var(--encre-pale); margin-top: .7em; line-height: 1.5; }

/* Photo hors article : hubs et accueil. La zone y est plus large que la
   colonne d'article, et nos fichiers plafonnent a 1600 px : sans max-width,
   le navigateur agrandit l'image et la rend floue. */
.photo-large { margin: 2.4em auto; max-width: 1080px; }
.photo-large img { display: block; width: 100%; height: auto; border-radius: var(--rayon); box-shadow: var(--ombre-f); }
.photo-large figcaption { font-size: .86rem; color: var(--encre-pale); margin-top: .7em; line-height: 1.5; }

.intro {
  font-size: clamp(1.12rem, 1.55vw, 1.3rem); line-height: 1.62; color: var(--encre-douce); font-weight: 450;
}
.intro strong { color: var(--encre); font-weight: 750; }

/* ==========================================================================
   Sommaire
   ========================================================================== */
.plan-page {
  background: var(--marque-brume); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 24px 28px; margin: 0 0 36px;
}
.plan-page p {
  font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .11em; color: var(--marque); margin: 0 0 14px;
}
.plan-page ol { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 36px; }
.plan-page li { margin-bottom: .45em; font-size: .96rem; break-inside: avoid; }
.plan-page a { color: var(--encre-douce); text-decoration: none; font-weight: 600; }
.plan-page a:hover { color: var(--marque-fonce); text-decoration: underline; }
@media (max-width: 640px) { .plan-page ol { columns: 1; } }

/* ==========================================================================
   Encadres. Un seul vc-cle par page, un seul vc-methode.
   ========================================================================== */
.vc-methode, .vc-cle, .vc-note {
  border-radius: var(--rayon); padding: 22px 26px; margin: 2em 0; line-height: 1.62;
}
.vc-methode {
  background: var(--papier-creux); border: 1px solid var(--trait);
  color: var(--encre-douce); font-size: .93rem;
}
.vc-cle {
  background: linear-gradient(135deg, var(--tierce-pale), #f7f4fc);
  border: 1px solid #ded7ee; border-left: 6px solid var(--tierce);
  font-size: 1.02rem;
}
.vc-note { background: var(--marque-pale); border: 1px solid #bde4f6; border-left: 6px solid var(--marque); }
.vc-methode > *:last-child, .vc-cle > *:last-child, .vc-note > *:last-child { margin-bottom: 0; }
.vc-methode > *:first-child, .vc-cle > *:first-child, .vc-note > *:first-child { margin-top: 0; }
.vc-titre {
  display: block; font-weight: 800; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .11em; color: var(--tierce); margin-bottom: .6em;
}
.vc-note .vc-titre { color: var(--marque-fonce); }
.vc-methode .vc-titre { color: var(--encre-pale); }

/* Fiche de lieu */
.vc-lieu {
  background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 26px 28px; margin: 1.5em 0; box-shadow: var(--ombre);
  border-top: 5px solid var(--marque);
}
.vc-lieu h3 { margin-top: 0; margin-bottom: .45em; font-size: 1.3rem; }
.vc-lieu-meta {
  list-style: none; margin: 0 0 1em; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 10px; font-size: .87rem;
}
.vc-lieu-meta li {
  margin: 0; background: var(--marque-brume); border: 1px solid var(--trait);
  border-radius: var(--rayon-xs); padding: 4px 13px; color: var(--encre-douce);
}
.vc-lieu-meta b { font-weight: 750; color: var(--encre); }
.vc-lieu > p:last-child { margin-bottom: 0; }

/* Chiffres cles */
/* Deux colonnes tant que la place manque, quatre quand elle existe. Le
   « auto-fit, minmax(168px) » precedent produisait 3 + 1 sur la colonne de
   lecture, et la quatrieme tuile restait seule sur sa ligne. */
/* Les chiffres cles tiennent sur une seule ligne, centres, a la maniere d'une
   frise. En grille de deux ils occupaient un demi-ecran de haut et coupaient
   la lecture ; en ligne ils se lisent d'un coup d'oeil et rendent la main au
   texte. flex-wrap fait le reste sur mobile. */
.vc-chiffres {
  display: flex; flex-wrap: wrap;
  gap: 14px; margin: 1.9em 0; padding: 0; list-style: none;
}
.vc-chiffres li {
  flex: 1 1 150px; min-width: 150px;
  background: var(--marque-brume); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 18px 16px; margin: 0;
  text-align: center;
}
.vc-chiffres li:nth-child(2) { background: var(--accent-pale); border-color: #f3e2b0; }
.vc-chiffres li:nth-child(3) { background: var(--tierce-pale); border-color: #ded7ee; }
.vc-chiffres li:nth-child(4) { background: var(--second-pale); border-color: #d7e0c8; }
.vc-chiffres b {
  display: block; font-family: var(--serif); font-size: 2rem; font-weight: 700;
  line-height: 1.05; letter-spacing: -.02em; color: var(--marque-fonce);
  /* Pas de coupure au milieu d'un mot : elle avait rendu « Très satisfaisant »
     en « Très satisfaisan / t », sans meme un trait d'union. Une valeur qui ne
     tient pas dans la case est une valeur a reecrire, pas a casser : le
     controle refuse desormais toute valeur de plus de neuf lettres. */
  overflow-wrap: normal; hyphens: manual;
}
.vc-chiffres li:nth-child(2) b { color: var(--accent-texte); }
.vc-chiffres li:nth-child(3) b { color: var(--tierce-fonce); }
.vc-chiffres li:nth-child(4) b { color: var(--second-fonce); }
.vc-chiffres span {
  display: block; font-size: .8rem; color: var(--encre-pale);
  margin-top: 6px; line-height: 1.35;
}

/* ==========================================================================
   Tableaux : ils defilent dans leur conteneur, jamais la page
   ========================================================================== */
.tableau-large {
  overflow-x: auto; margin: 2em 0; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--trait); border-radius: var(--rayon); background: #fff;
}

/* Une carte dessinee garde une largeur minimale, sinon ses libelles de commune
   tombent sous 7 px sur telephone. Elle defile alors dans son cadre, comme les
   tableaux, plutot que de se reduire jusqu'a l'illisible. */
.carte-large { overflow-x: auto; margin: 2em 0; -webkit-overflow-scrolling: touch; }
.carte-large img { display: block; width: 100%; min-width: 760px; height: auto; }
.carte-large + figcaption { margin-top: -1.4em; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; min-width: 480px; }
caption {
  caption-side: bottom; text-align: left; font-size: .84rem;
  /* --encre-pale tombait a 3,63:1 sur blanc : la legende porte la source et la
     methode, elle doit se lire. --encre-douce donne 7,3:1. */
  color: var(--encre-douce); padding: 12px 20px 16px; line-height: 1.5;
}
th, td { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--trait); vertical-align: top; }
thead th {
  background: var(--marque); color: #fff; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .08em; font-weight: 800; white-space: nowrap; border-bottom: 0;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--marque-brume); }
tbody tr:hover { background: var(--marque-pale); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { margin: 2em 0 0; }
.faq details {
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: #fff; margin-bottom: 12px; overflow: hidden;
}
.faq details[open] { border-color: var(--marque); box-shadow: var(--ombre); }
.faq summary {
  cursor: pointer; padding: 20px 26px; font-weight: 700; font-size: 1.08rem;
  list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
/* Le « + » pivote en croix a l'ouverture : evite un caractere tiret dans le CSS. */
.faq summary::after {
  content: "+"; color: #fff; background: var(--marque); width: 30px; height: 30px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; line-height: 1; flex-shrink: 0; transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-rep { padding: 0 26px 20px; font-size: 1rem; color: var(--encre-douce); }
.faq-rep > *:last-child { margin-bottom: 0; }

/* ==========================================================================
   Colonne laterale
   ========================================================================== */
/* Quatre variantes, quatre roles, et elles doivent se DISTINGUER. Avant le
   21 aout 2026, « --accent » etait declare deux fois : la version sombre etait
   morte, ecrasee six lignes plus bas, et la colonne alignait deux blocs creme
   identiques. « --jaune » n'etait meme pas defini et sortait blanc sur huit
   pages. Rien dans le code ne le signalait : il a fallu mesurer le style
   calcule dans le navigateur. */
.encart {
  background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon);
  border-top: 3px solid var(--marque);
  padding: 22px 24px 24px; margin-bottom: 20px; box-shadow: var(--ombre);
}
.encart h2, .encart h3 {
  font-family: var(--sans);
  font-size: .74rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--marque-titre); margin: 0 0 14px;
}
.encart h2::before { display: none; }
.encart ul { list-style: none; margin: 0; padding: 0; font-size: .93rem; }
.encart li { margin-bottom: .75em; line-height: 1.5; }
.encart li:last-child { margin-bottom: 0; }
.encart a { text-decoration: none; }
.encart a:hover { text-decoration: underline; }
.encart .precision { display: block; font-size: .8rem; color: var(--encre-pale); font-weight: 400; }

/* 1. L'essentiel : le bloc le plus important de la colonne, donc le seul sombre. */
.encart--accent {
  background: linear-gradient(155deg, var(--marque-nuit) 0%, var(--tierce-fonce) 100%);
  border-color: transparent; color: rgba(255,255,255,.93);
}
.encart--accent h2 { color: #E8C48A; }
.encart--accent a { color: #fff; }
.encart--accent .precision { color: rgba(255,255,255,.62); }

/* 2. Le piege a connaitre : l'ocre de la pierre, en avertissement. */
.encart--ambre {
  background: var(--accent-pale); border-color: #EBD9B6; border-top-color: var(--accent);
}
.encart--ambre h2 { color: var(--accent-texte); }

/* 3. Une liste de reperes secondaire : le vert de la vigne, pour qu'elle ne se
      confonde pas avec l'avertissement juste au-dessus. */
.encart--vigne {
  background: var(--second-pale); border-color: #DCE4CF; border-top-color: var(--second);
}
.encart--vigne h2 { color: var(--second-fonce); }

.fiche-reperes { list-style: none; margin: 0; padding: 0; font-size: .96rem; }
.fiche-reperes li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--trait); margin: 0;
}
.fiche-reperes li:last-child { border-bottom: 0; }
.fiche-reperes span { color: var(--encre-pale); flex-shrink: 0; }
.fiche-reperes b { font-weight: 750; text-align: right; }

/* ==========================================================================
   Cartes
   ========================================================================== */
.grille-articles {
  /* min() : sous 320 px de viewport, la vignette ne doit pas imposer sa largeur
     minimale, sinon la page deborde. */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 24px; margin: 2.4em 0; list-style: none; padding: 0;
}
.grille-articles > li { margin: 0; min-width: 0; }
.vignette {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon);
  overflow: hidden; box-shadow: var(--ombre); transition: box-shadow .2s, transform .2s;
  position: relative;
}
.vignette::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: linear-gradient(90deg, var(--marque), var(--accent));
}
.grille-articles > li:nth-child(3n+2) .vignette::before { background: linear-gradient(90deg, var(--accent), var(--tierce)); }
.grille-articles > li:nth-child(3n+3) .vignette::before { background: linear-gradient(90deg, var(--tierce), var(--marque)); }
a.vignette { text-decoration: none; color: inherit; }
a.vignette:hover { box-shadow: var(--ombre-f); transform: translateY(-4px); }
.vignette-corps { padding: 26px 28px; flex: 1; display: flex; flex-direction: column; min-width: 0; }
.vignette h3 { margin: 0 0 .45em; font-size: 1.3rem; }
a.vignette:hover h3 { color: var(--marque-fonce); }
.vignette p { font-size: .97rem; color: var(--encre-douce); margin: 0 0 1.3em; }
.vignette-pied {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--trait);
  font-size: .84rem; color: var(--encre-pale);
  display: flex; flex-wrap: wrap; gap: 6px 18px;
}
.vignette-pied b { color: var(--marque-fonce); font-weight: 800; }

/* ==========================================================================
   Liste des communes
   ========================================================================== */
@media (max-width: 900px) { .liste-communes { columns: 2; } }
@media (max-width: 540px) { .liste-communes { columns: 1; } }

/* Index alphabetique */
.champ-filtre {
  width: 100%; padding: 16px 22px; font-size: 1.05rem; font-family: inherit;
  border: 2px solid var(--trait-fort); border-radius: var(--rayon); background: #fff;
  margin: 8px 0 6px; color: var(--encre);
}
.champ-filtre:focus { outline: 3px solid var(--marque); outline-offset: 1px; border-color: var(--marque); }
.filtre-resultat { font-size: .92rem; color: var(--encre-pale); margin: 0 0 18px; }

/* ==========================================================================
   Carte Leaflet
   ========================================================================== */
.plan-lieu {
  height: 470px; border-radius: var(--rayon); border: 1px solid var(--trait);
  margin: 2em 0 .7em; z-index: 1; box-shadow: var(--ombre);
}
.plan-legende { font-size: .86rem; color: var(--encre-pale); margin-top: -.3em; }
@media (max-width: 640px) { .plan-lieu { height: 360px; } }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.pied { background: var(--marque-nuit); color: rgba(255,255,255,.74); margin-top: 80px; font-size: .96rem; }
/* Le pied portait quatre colonnes parce qu'il imprimait les 53 pages du site.
   Depuis qu'il ne garde que les neuf rubriques, il n'a plus que deux blocs : la
   presentation, puis la liste. Une grille a quatre colonnes laisserait deux
   colonnes vides et un bloc de liens etire sur toute la largeur. */
.pied-grille { display: grid; grid-template-columns: 1.7fr 1.3fr; gap: 44px; padding: 64px 0 48px; }
.pied-nav ul { columns: 2; column-gap: 30px; }
.pied-nav li { break-inside: avoid; }
.pied-toutes { margin: 22px 0 0; }
.pied-toutes a { color: var(--accent); font-weight: 600; }
/* Derniere entree du menu deroulant : elle mene a l'annuaire complet de l'accueil,
   que le menu ne porte plus. Elle se detache de la rubrique qui la precede. */
.nav-toutes { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--trait); }
.nav-toutes a { font-weight: 700; }
.pied h2 {
  font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .11em; color: var(--accent); margin: 0 0 18px;
}
.pied h2::before { display: none; }
/* Chaque colonne de pied porte trois rubriques a la suite. Sans marge haute,
   « Sortir » se colle au dernier lien de « Decouvrir » et se lit comme une
   entree de plus au lieu d'un intertitre. */
.pied ul + h2 { margin-top: 30px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: .65em; }
.pied a { color: rgba(255,255,255,.86); text-decoration: none; font-weight: 500; }
.pied a:hover { color: var(--accent); text-decoration: underline; }
.pied-logo { margin: 0 0 1em; }
.pied-logo img { height: 38px; width: 152px; }
.pied-desc { line-height: 1.65; margin: 0; color: rgba(255,255,255,.62); }
.pied-bas {
  border-top: 1px solid rgba(255,255,255,.13); padding: 22px 0 32px;
  font-size: .88rem; color: rgba(255,255,255,.52);
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
}
@media (max-width: 900px) { .pied-grille { grid-template-columns: 1fr 1fr; gap: 34px; padding: 48px 0 34px; } }
@media (max-width: 640px) { .pied-nav ul { columns: 1; } }
@media (max-width: 540px) { .pied-grille { grid-template-columns: 1fr; } }

/* ==========================================================================
   Divers
   ========================================================================== */
.mention-src { font-size: .89rem; color: var(--encre-pale); }
/* URL de source, en clair et non cliquable : le lecteur peut verifier, et le
   site ne distribue pas de lien sortant. overflow-wrap est indispensable, une
   URL longue deborde sinon la aside-col sur mobile. */
.src-url,
.source-url {
  display: inline-block;
  font-size: .82em;
  color: var(--encre-pale);
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.btn {
  display: inline-block; background: var(--marque); color: #fff; text-decoration: none;
  padding: 15px 30px; border-radius: var(--rayon-xs); font-weight: 750; font-size: 1rem;
  border: 2px solid var(--marque); box-shadow: 0 6px 18px rgba(0,156,222,.24);
}
.btn:hover { background: var(--marque-fonce); color: #fff; border-color: var(--marque-fonce); }

/* Bandeau de rupture pleine largeur */
@media (max-width: 640px) { .ruban { padding: 30px 24px; } }

hr { border: 0; border-top: 1px solid var(--trait); margin: 3em 0; }

@media print {
  .entete, .pied, .nav, .aside-col, .plan-page { display: none; }
  body { font-size: 12pt; }
}

/* ==========================================================================
   Accueil : mise en page editoriale (13 aout 2026)
   Prefixe .acc- : ces regles ne servent qu'a la page d'accueil et a
   /territoires/. Elles n'affectent aucune page commune.
   ========================================================================== */

/* --- Heros ---------------------------------------------------------------- */
.acc-hero {
  position: relative;
  background: linear-gradient(180deg, #fafcfd 0%, #eef4f8 100%);
  overflow: hidden;
}
.acc-hero-photo {
  position: absolute; inset: 0 0 0 40%;
  background-size: cover; background-position: 50% 45%;
  /* La photo d'accueil est l'element le plus lourd du premier ecran. Elle est
     declaree ici et non en style inline : un style inline l'emporte sur toute
     regle, et il n'y aurait alors aucun moyen d'en servir une version plus
     petite au telephone. */
  background-image: url("../img/accueil-hero-gordes-1200.jpg");
}
@media (max-width: 1080px) {
  .acc-hero-photo { background-image: url("../img/accueil-hero-gordes-800.jpg"); }
}
@media (max-width: 560px) {
  .acc-hero-photo { background-image: url("../img/accueil-hero-gordes-480.jpg"); }
}
.acc-hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #f4f8fa 0%, rgba(244,248,250,.88) 15%, rgba(244,248,250,0) 48%);
}
.acc-hero-grille {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 660px) minmax(0, 1fr);
  gap: 40px; padding-top: 74px; padding-bottom: 120px;
}
.acc-hero h1 {
  font-family: var(--serif); font-size: clamp(2.15rem, 4.1vw, 3.3rem);
  line-height: 1.07; letter-spacing: -.032em; margin: 0 0 .55em;
}
.acc-hero h1 .acc-italique {
  display: block; font-style: italic; font-weight: 700; color: var(--marque-titre);
}
.acc-hero-texte {
  font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.62;
  color: var(--encre-douce); margin: 0 0 30px; max-width: 30em;
}
.acc-chiffres { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 0; padding: 0; }
.acc-chiffres li {
  margin: 0; display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--trait); border-radius: 14px;
  padding: 12px 20px 12px 14px; box-shadow: 0 1px 2px rgba(11,43,64,.04), 0 8px 22px rgba(11,43,64,.06);
}
.acc-pastille {
  width: 38px; height: 38px; border-radius: 11px; flex: 0 0 38px;
  display: grid; place-items: center;
}
.acc-pastille svg { width: 19px; height: 19px; }
.acc-pastille-bleu  { background: var(--marque-pale); color: var(--marque-fonce); }
.acc-pastille-jaune { background: var(--accent-pale); color: #8a5a00; }
.acc-pastille-lavande{ background: var(--tierce-pale); color: #574a80; }
.acc-chiffre-b { display: block; font-weight: 800; font-size: 1.12rem; line-height: 1.15; color: var(--encre); }
.acc-chiffre-l { display: block; font-size: .8rem; color: var(--encre-pale); }

/* Barre de recherche a cheval sur le bas du heros */
.acc-recherche-enveloppe {
  /* La barre chevauche le bas du heros, mais il faut de l'air en dessous :
     sans ce padding, elle colle a la limite de la photo. */
  position: relative; z-index: 3; margin-top: -46px; padding-bottom: 40px;
}
.acc-recherche {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon-xs);
  padding: 10px 10px 10px 24px; box-shadow: var(--ombre-f); max-width: 720px; margin: 0 auto;
}
.acc-recherche svg { width: 20px; height: 20px; color: var(--encre-pale); flex: 0 0 20px; }
.acc-recherche input {
  flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 1rem;
  color: var(--encre); padding: 12px 0;
}
.acc-recherche input::placeholder { color: var(--encre-pale); }
.acc-recherche input:focus { outline: none; }
.acc-recherche button {
  flex: 0 0 auto; border: 0; cursor: pointer; font: inherit; font-weight: 750; font-size: .98rem;
  background: var(--marque-titre); color: #fff; padding: 14px 30px; border-radius: var(--rayon-xs);
}
.acc-recherche button:hover { background: var(--marque-fonce); }

@media (max-width: 900px) {
  .acc-hero-photo { inset: 0; opacity: .2; }
  .acc-hero-photo::after { background: linear-gradient(180deg, rgba(244,248,250,.55), rgba(244,248,250,.92)); }
  .acc-hero-grille { grid-template-columns: minmax(0, 1fr); padding-top: 52px; padding-bottom: 96px; }
  .acc-recherche { flex-wrap: wrap; padding: 14px; }
  /* La loupe reste sur la meme ligne que le champ : en la laissant se replier
     seule, elle occupait une ligne entiere au-dessus d'un champ vide. Seul le
     bouton passe dessous, sur toute la largeur. */
  .acc-recherche input { flex: 1 1 auto; min-width: 0; padding: 6px 8px; }
  .acc-recherche button { flex: 1 1 100%; }
}

/* --- Titres de section de l'accueil -------------------------------------- */
.acc-section { padding: 66px 0 0; }
/* La partie editoriale de l'accueil respire plus large que la aside-col de
   lecture : 1480 px au lieu de 1240. */
.acc-large { max-width: 1480px; }
.acc-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 26px;
}
.acc-tete h2 {
  font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.05rem); margin: 0;
  letter-spacing: -.02em; padding-left: 18px; position: relative;
}
.acc-tete h2::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 5px; border-radius: 999px; background: var(--marque-titre);
}
.acc-lien-tete {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon-xs);
  padding: 11px 22px; font-size: .93rem; font-weight: 650; color: var(--encre-douce);
  box-shadow: 0 1px 2px rgba(11,43,64,.04);
}
.acc-lien-tete:hover { border-color: var(--marque-titre); color: var(--marque-fonce); }

/* --- Rangee de cartes territoire ---------------------------------------- */
/* Grille 3 x 3 : les neuf territoires tiennent en trois rangees pleines, sans
   vignette coupee au bord ni defilement horizontal. */
.acc-rangee {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px; list-style: none; margin: 0; padding: 0;
}
.acc-rangee > li { margin: 0; min-width: 0; }
@media (max-width: 1080px) { .acc-rangee { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .acc-rangee { grid-template-columns: minmax(0, 1fr); } }

/* Dix rubriques dans une grille de trois : la derniere resterait seule au bord
   gauche de sa ligne, ce qui se lit comme un oubli. Quand le dernier element
   ouvre une nouvelle ligne, il occupe toute la largeur et passe en vignette
   horizontale. La regle ne se declenche que dans ce cas precis, donc elle ne
   genera pas un decoupage a neuf ou a douze. */
@media (min-width: 1081px) {
  .acc-rangee > li:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .acc-rangee > li:last-child:nth-child(3n + 1) .acc-vignette {
    flex-direction: row; align-items: stretch;
  }
  .acc-rangee > li:last-child:nth-child(3n + 1) .acc-vignette img {
    width: 34%; height: auto; flex: 0 0 34%; min-height: 210px;
  }
  .acc-rangee > li:last-child:nth-child(3n + 1) .acc-vignette-corps { justify-content: center; }
}
@media (min-width: 701px) and (max-width: 1080px) {
  .acc-rangee > li:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
}

.acc-vignette {
  display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--trait); border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(11,43,64,.04), 0 10px 24px rgba(11,43,64,.05);
  transition: box-shadow .2s, transform .2s;
}
.acc-vignette:hover { transform: translateY(-4px); box-shadow: var(--ombre-f); color: inherit; }
.acc-vignette img { width: 100%; height: 210px; object-fit: cover; }
.acc-vignette-corps { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.acc-vignette h3 { font-family: var(--serif); font-size: 1.24rem; margin: 0 0 .5em; letter-spacing: -.015em; }
.acc-vignette p { font-size: .93rem; line-height: 1.55; color: var(--encre-douce); margin: 0 0 1.3em; }
.acc-vignette-pied {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--trait);
  font-size: .83rem; color: var(--encre-pale); display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap;
}
.acc-vignette-pied b { color: var(--encre); font-weight: 800; }
.acc-vignette-pied span + span::before { content: "\2022"; color: var(--trait-fort); margin-right: 8px; }

/* --- Panneau des mille visages ------------------------------------------- */
.acc-panneau {
  background: var(--papier-creux); border-radius: 22px; padding: 48px;
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 48px;
  align-items: center; margin-top: 34px;
}
.acc-panneau-texte > *:first-child { margin-top: 0; }
.acc-etiquette {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .8rem; font-weight: 750; color: var(--marque-titre); margin: 0 0 .5em;
}
.acc-etiquette svg { width: 17px; height: 17px; }
.acc-panneau h2 {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  margin: 0 0 .6em; letter-spacing: -.02em;
}
.acc-panneau h2::before { display: none; }
.acc-panneau p { font-size: .96rem; line-height: 1.62; color: var(--encre-douce); }
.acc-btn-fonce {
  display: inline-block; background: var(--marque-nuit); color: #fff; text-decoration: none;
  padding: 14px 26px; border-radius: var(--rayon-xs); font-weight: 700; font-size: .95rem;
}
.acc-btn-fonce:hover { background: var(--marque-fonce); color: #fff; }
.acc-mosaique {
  display: grid; grid-template-columns: 1.55fr 1fr .95fr; grid-template-rows: 1fr 1fr;
  gap: 12px; min-width: 0; padding: 0; margin: 0; list-style: none;
}
.acc-mosaique li { margin: 0; min-width: 0; }
.acc-mosaique img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.acc-mosaique > li:nth-child(1) { grid-row: 1 / 3; }
.acc-mosaique > li:nth-child(2) { grid-row: 1 / 3; }
@media (max-width: 900px) {
  .acc-panneau { grid-template-columns: minmax(0, 1fr); padding: 28px; }
  .acc-mosaique { grid-template-columns: 1fr 1fr; grid-template-rows: 150px 150px; }
  .acc-mosaique > li:nth-child(1) { grid-row: 1 / 2; }
  .acc-mosaique > li:nth-child(2) { grid-row: 2 / 3; }
}

/* Recadrages : l'objet interessant n'est pas toujours au centre du cliche. */
.acc-mosaique > li:nth-child(2) img { object-position: 45% 42%; }
/* Le theatre d'Orange : cadre par defaut sur le haut sombre du mur de scene,
   alors que ce qui se reconnait, ce sont les gradins. */
.acc-mosaique > li:nth-child(3) img { object-position: 50% 62%; }

/* --- A la une ------------------------------------------------------------ */
.acc-une {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 22px; list-style: none; margin: 0; padding: 0;
}
.acc-une > li { margin: 0; min-width: 0; }
.acc-une-vignette {
  display: grid; grid-template-columns: minmax(0, 1fr) 42%;
  background: #fff; border: 1px solid var(--trait); border-radius: 16px; overflow: hidden;
  text-decoration: none; color: inherit; height: 100%;
  box-shadow: 0 1px 2px rgba(11,43,64,.04), 0 10px 24px rgba(11,43,64,.05);
  transition: box-shadow .2s, transform .2s;
}
.acc-une-vignette:hover { transform: translateY(-4px); box-shadow: var(--ombre-f); color: inherit; }
.acc-une-texte { padding: 22px 20px; display: flex; flex-direction: column; min-width: 0; }
.acc-cat {
  font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  margin-bottom: 12px;
}
.acc-cat-bleu { color: var(--marque-titre); }
.acc-cat-jaune { color: #8a5a00; }
.acc-cat-lavande { color: var(--tierce); }
.acc-une-vignette h3 {
  font-family: var(--serif); font-size: 1.1rem; line-height: 1.25; margin: 0 0 1.1em;
  letter-spacing: -.01em;
}
.acc-lire {
  margin-top: auto; font-size: .85rem; font-weight: 700; color: var(--encre);
  display: inline-flex; align-items: center; gap: 8px;
}
.acc-une-vignette:hover .acc-lire { color: var(--marque-fonce); }
.acc-une-vignette img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; object-position: 50% 42%; }

/* --- Recherche de l'en-tete ---------------------------------------------- */
.entete-recherche {
  display: flex; align-items: center; gap: 9px; margin-left: auto;
  background: var(--papier-creux); border: 1px solid var(--trait);
  border-radius: var(--rayon-xs); padding: 7px 16px; min-width: 210px;
}
.entete-recherche svg { width: 16px; height: 16px; color: var(--encre-pale); flex: 0 0 16px; }
.entete-recherche input {
  border: 0; background: none; font: inherit; font-size: .88rem; width: 100%; min-width: 0;
  color: var(--encre); padding: 3px 0;
}
.entete-recherche input:focus { outline: none; }
.entete-recherche input::placeholder { color: var(--encre-pale); }
@media (max-width: 1080px) {
  .entete-recherche { display: none; }
  /* Sans le champ de recherche, plus rien ne pousse le btn Menu a droite. */
  .entete-barre .nav-bouton { margin-left: auto; }
}

/* --- Pied de page : icones rondes ---------------------------------------- */
.pied-icones { display: flex; gap: 12px; margin-top: 22px; padding: 0; list-style: none; }
.pied-icones li { margin: 0; }
.pied-icones a {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.86);
}
.pied-icones a:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.pied-icones svg { width: 18px; height: 18px; }

/* --- Grille des neuf territoires (page /territoires/) -------------------- */

/* --- Ne jamais renvoyer a la ligne pour rien -----------------------------
   Un tableau de donnees enferme dans la aside-col de lecture (860 px) casse ses
   cellules sur deux lignes alors qu'il reste 300 px de vide de chaque cote.
   Au-dela de 1240 px de fenetre, les tableaux debordent donc symetriquement
   de leur aside-col. Verifie : a 1240 px le bord gauche reste a +30 px, il n'y
   a aucun debordement de page. */
@media (min-width: 1400px) {
  .corps-article .tableau-large,
  .bloc-texte .tableau-large {
    width: calc(100% + 200px);
    margin-left: -100px;
  }
  /* Sauf quand l'article partage la ligne avec une colonne : la debordait de
     100 px a gauche et recouvrait la colonne de droite de 40 px. Le
     debordement symetrique n'a de sens que sur une page en pleine largeur. */
  .avec-colonne > .corps-article .tableau-large {
    width: 100%;
    margin-left: 0;
  }
}


/* ==========================================================================
   Pages communes : classes employees par les gabarits et qui n'avaient
   jamais ete declarees ici. Elles etaient donc rendues sans aucun style, et
   .source-url faisait deborder la page a 320 px sur 54 pages. Verifie au
   rendu avec _dev/verif-debordement.html, pas en relisant le HTML.
   ========================================================================== */
.fiche-commune {
  background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 24px 26px; margin-bottom: 20px; box-shadow: var(--ombre);
}
.fiche-commune h2 {
  font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .11em; color: var(--marque); margin: 0 0 12px;
}
.fiche-commune h2::before { display: none; }

/* La variante ambre est desormais definie plus haut, avec les trois autres. */

/* La carte occupe la largeur de l'article et ne la depasse jamais : Leaflet
   pose ses tuiles bien au-dela du cadre et compte sur ce rognage. */
.carte-lieux {
  width: 100%; max-width: 100%; overflow: hidden;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--papier-creux); margin: 2em 0;
}

.liste-sources { list-style: none; margin: 1.4em 0 0; padding: 0; font-size: .93rem; }
.liste-sources li {
  padding: 13px 0; border-bottom: 1px solid var(--trait);
  margin: 0; line-height: 1.55; color: var(--encre-douce);
}
.liste-sources li:last-child { border-bottom: 0; }

/* Ce que nous n'avons pas pu verifier. Le lecteur doit voir que c'est nous qui
   parlons, pas la source. */
/* La date tient en six mots : une carte pleine largeur autour d'elle donnait
   une boite vide en tete d'article. Elle devient une simple etiquette. */
/* Date de derniere verification, en tete de contenu. Une ligne discrete
   soulignee d'un filet, et non une pastille coloree : c'est une mention de
   service, elle ne doit pas peser autant qu'un chiffre cle. */
.note-verif {
  display: block;
  background: none; border: 0; border-bottom: 1px solid var(--trait); border-radius: 0;
  padding: 0 0 .9rem; margin: 0 0 1.4rem;
  font-size: .82rem; font-weight: 400; line-height: 1.5; color: var(--encre-pale);
}
.note-verif time { font-weight: 600; color: var(--encre-douce); }

/* ------------------------------------------------------------------
   Ajouts propres au sous-domaine de Valréas.

   Quatre classes sont posées par les gabarits de ce site et n'existent
   pas dans la feuille reprise du site principal. Sans elles, rien ne
   casse visiblement dans le HTML : c'est le RENDU qui trahit le défaut,
   et le logo sortait « Valréasle guide », collé, faute d'espacement.
   ------------------------------------------------------------------ */

/* Le logo typographique de secours a ete remplace le 21 aout 2026 par le
   logo dessine : ses regles .logo-texte et .pied-logo-texte ont ete
   retirees avec lui, sans quoi elles seraient restees dans la feuille
   sans jamais s'appliquer. */

/* Intertitre de rubrique dans le panneau de navigation complet. */
.nav-titre {
  margin: .9rem 0 .15rem;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .6;
  font-weight: 700;
  list-style: none;
}
.nav-titre:first-child { margin-top: 0; }

/* Cases à cocher qui filtrent les familles de la carte. */
.filtre-famille { margin-right: .35em; vertical-align: -.08em; }

/* ------------------------------------------------------------------ agenda
   Bloc des prochains evenements, alimente par data/events.json (cron).
   Reprend les couleurs de marque du site : aucune valeur en dur, sinon un
   changement de palette laisserait l'agenda dans l'ancienne. */
.agenda-live { margin: 0 0 2.4rem; }
.agenda-live-head { margin-bottom: 1rem; }
.agenda-live-head h2 { margin-bottom: .2rem; }
.agenda-maj { font-size: .82rem; color: var(--encre-pale); margin: 0; }
.agenda-maj a { color: var(--encre-pale); text-decoration: underline; }

.agenda-mois {
  font-family: var(--titre);
  font-size: 1.2rem;
  color: var(--marque-titre);
  margin: 1.6rem 0 .75rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}

.agenda-liste { display: flex; flex-direction: column; gap: .65rem; }

.agenda-event {
  display: flex;
  gap: 1rem;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-s);
  padding: .9rem 1rem;
  box-shadow: var(--ombre);
  /* min-width: 0 sur le corps, sinon un titre long deborde la carte au lieu
     de revenir a la ligne : le piege classique du flex. */
}
.agenda-event:hover { box-shadow: var(--ombre-f); }

.agenda-date {
  flex: 0 0 58px;
  height: 58px;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--marque-nuit);
  color: #fff;
  border-radius: var(--rayon-s);
  padding: .5rem 0;
}
.agenda-jour { font-family: var(--titre); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.agenda-mois-abr { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; opacity: .9; margin-top: 2px; }

.agenda-corps { flex: 1; min-width: 0; }
.agenda-tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  color: var(--marque-titre);
  background: var(--marque-pale);
  padding: .1rem .6rem;
  border-radius: var(--rayon-xs);
  margin-bottom: .3rem;
}
.agenda-titre {
  font-size: 1rem;
  margin: 0 0 .3rem;
  line-height: 1.3;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.agenda-titre a { color: var(--encre); text-decoration: none; }
.agenda-titre a:hover { color: var(--marque-fonce); text-decoration: underline; }

.agenda-meta {
  display: flex; flex-wrap: wrap;
  gap: .35rem .9rem;
  font-size: .85rem; color: var(--encre-douce);
  margin: 0;
}
.agenda-quand { font-weight: 700; color: var(--encre); }
.agenda-prix {
  color: var(--second-fonce); font-weight: 700;
  background: var(--second-pale);
  padding: 0 .5rem; border-radius: var(--rayon-xs);
}
.agenda-note {
  font-size: .8rem; color: var(--encre-douce); font-style: italic;
  margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--trait);
}
.agenda-vide {
  background: var(--accent-pale); border: 1px solid var(--accent);
  border-radius: var(--rayon-s); padding: 1rem 1.2rem;
}

@media (max-width: 480px) {
  .agenda-event { padding: .75rem .8rem; gap: .7rem; }
  .agenda-date { flex-basis: 50px; height: 50px; }
  .agenda-jour { font-size: 1.25rem; }
}

/* ==========================================================================
   Notre sélection

   Un bloc mis en avant en tête de liste. Il doit se distinguer d'une fiche
   ordinaire SANS jamais se faire passer pour un classement : le libellé et la
   ligne de transparence qui l'accompagne sont obligatoires, et la page dit
   toujours sur quel critère vérifiable la sélection repose.
   ========================================================================== */
.selection {
  position: relative;
  background: linear-gradient(155deg, var(--marque-nuit) 0%, var(--tierce-fonce) 100%);
  color: rgba(255,255,255,.94);
  border-radius: var(--rayon);
  padding: 30px 32px 28px;
  margin: 2em 0 1.4em;
  box-shadow: var(--ombre-f);
}
.selection-etiquette {
  display: inline-block; margin-bottom: 14px;
  font-family: var(--sans); font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--marque-nuit); background: #E8C48A;
  padding: 5px 14px; border-radius: var(--rayon-xs);
}
.selection h3 {
  color: #fff; margin: 0 0 .5rem; font-size: clamp(1.3rem, 2.4vw, 1.65rem);
}
.selection p { color: rgba(255,255,255,.9); }
.selection p:last-child { margin-bottom: 0; }
.selection strong { color: #fff; }
.selection a { color: #E8C48A; }
.selection a:hover { color: #fff; }

.selection-meta {
  list-style: none; margin: 0 0 1.1rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 26px;
  font-size: .93rem;
}
.selection-meta li { margin: 0; line-height: 1.5; color: rgba(255,255,255,.86); }
.selection-meta b {
  display: block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .09em; color: #E8C48A; font-weight: 800; margin-bottom: 1px;
}
/* La ligne de transparence : elle dit ce qu'est cette mise en avant, et elle
   n'est pas facultative. */
.selection-transparence {
  margin-top: 1.2rem; padding-top: .95rem;
  border-top: 1px solid rgba(232,196,138,.32);
  font-size: .84rem; font-style: italic; color: rgba(255,255,255,.72);
}
/* Bouton de sortie vers le prestataire. Il vient APRES la ligne de
   transparence : on lit d'abord ce qu'est cette mise en avant, on clique
   ensuite. Fond ocre plein pour ressortir sur le bloc sombre. */
.selection-action {
  display: inline-flex; align-items: center; gap: .55em;
  margin-top: 1.15rem;
  background: #E8C48A; color: var(--marque-nuit);
  font-family: var(--sans); font-size: .95rem; font-weight: 800;
  padding: 12px 24px; border-radius: var(--rayon-xs);
  text-decoration: none; border: 2px solid #E8C48A;
  transition: background .15s, color .15s;
}
.selection a.selection-action { color: var(--marque-nuit); }
.selection a.selection-action:hover,
.selection a.selection-action:focus-visible {
  background: transparent; color: #E8C48A;
}
.selection-action .fleche { font-size: 1.05em; line-height: 1; }
.selection-action-note {
  display: block; margin-top: .55rem;
  font-size: .78rem; color: rgba(255,255,255,.66);
}
@media (max-width: 700px) { .selection { padding: 24px 20px 22px; } }

/* ==========================================================================
   Bandeau de non-affiliation

   Il passe AVANT l'en-tete, sur toutes les pages. Un guide qui porte le nom
   d'une commune est pris pour le site de la mairie : le dire une fois en haut
   coute deux lignes et evite qu'on nous demande un acte d'etat civil.
   ========================================================================== */
.bandeau-independant {
  background: var(--marque-nuit);
  color: rgba(255,255,255,.92);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  padding: 8px 0;
}
.bandeau-independant span { color: var(--accent); margin-right: .45em; font-size: .6rem; vertical-align: .18em; }
@media (max-width: 700px) { .bandeau-independant { font-size: .8rem; text-align: left; } }

/* ==========================================================================
   Repertoire de l'accueil

   Soixante liens ranges par rubrique. En liste a puces, ils formaient une
   colonne de trois ecrans dans laquelle personne ne retrouvait sa rubrique.
   En cartes, l'oeil saute de titre en titre et le tri redevient lisible.
   ========================================================================== */
.repertoire {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 16px; margin: 1.9em 0 2.4em;
  /* Sans « start », chaque carte prend la hauteur de la plus haute de sa
     ligne : « Travailler », qui compte deux liens, se retrouvait avec cinq
     lignes de vide sous le dernier. */
  align-items: start;
}
.repertoire-bloc {
  background: var(--papier); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 18px 20px 16px;
  break-inside: avoid; min-width: 0;
}
.repertoire-bloc h3 {
  margin: 0 0 .7rem; padding-bottom: .55rem;
  border-bottom: 2px solid var(--accent);
  font-family: var(--sans); font-size: .74rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .11em;
  color: var(--marque-fonce);
}
/* L'accueil ne liste plus les 53 pages mais neuf portes d'entree : le titre de
   la carte EST le lien, et il doit donc se voir comme tel. Sans cette regle il
   heritait du style de rubrique, en petites capitales ocre, que personne ne
   songe a cliquer. */
.repertoire-bloc h3 a {
  display: block; color: var(--marque-fonce); text-decoration: none;
  font: inherit; letter-spacing: inherit;
}
.repertoire-bloc h3 a:hover { color: var(--accent-texte); text-decoration: underline; }
.repertoire-bloc > p {
  margin: 0; font-size: .93rem; line-height: 1.5; color: var(--encre-douce);
}
.repertoire-bloc:has(> p):hover { border-color: var(--marque); }

.repertoire-bloc ul { list-style: none; margin: 0; padding: 0; }
.repertoire-bloc li { margin: 0; }
.repertoire-bloc li + li { border-top: 1px solid var(--trait-clair, rgba(0,0,0,.06)); }
.repertoire-bloc a {
  display: block; padding: .42em 0;
  font-size: .93rem; line-height: 1.4; font-weight: 600;
  color: var(--encre-douce); text-decoration: none;
}
.repertoire-bloc a:hover,
.repertoire-bloc a:focus-visible { color: var(--marque-fonce); text-decoration: underline; }