/* Les pages régionales. Charte v4.
   Le hero réutilise .hf-page-hero de la feuille de fidélité (fond navy, cercle
   décoratif) et les classes de fil d'Ariane du blog, pour que les deux gabarits
   PHP du site restent cohérents entre eux. */

.hf-region{
  --g-navy:var(--e-global-color-primary,#1B2140);
  --g-or:var(--e-global-color-secondary,#C9A96E);
  --g-texte:var(--e-global-color-text,#4A4F63);
  --g-accent:var(--e-global-color-accent,#2F8F86);
  --g-sable:var(--e-global-color-hfsable,#F6F1E7);
  --g-creme:var(--e-global-color-hfcreme,#FBF6EC);
  --g-or-fonce:var(--e-global-color-hforfon,#A9884D);
  font-family:"DM Sans",Arial,sans-serif;
  color:var(--g-texte);
}
.hf-region *{box-sizing:border-box}

.hf-region__cadre{width:min(1280px,calc(100% - 3rem));margin:0 auto}
.hf-region__cadre--etroit{max-width:820px}

.hf-region__hero h1{
  font-family:"Bodoni Moda",Georgia,serif;font-weight:500;
  font-size:clamp(34px,4.1vw,58px);line-height:1;letter-spacing:-.033em;
  margin:0 0 18px;max-width:20ch;
}
.hf-region h2{
  font-family:"Bodoni Moda",Georgia,serif;font-weight:500;
  font-size:clamp(26px,3vw,40px);line-height:1.08;letter-spacing:-.025em;
  color:var(--g-navy);margin:0 0 22px;max-width:24ch;
}
.hf-region p{font-size:16.5px;line-height:1.62;margin:0 0 16px}
.hf-region__surtitre{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--g-or-fonce);margin-bottom:14px;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hf-region__hero{padding:80px 0 68px}
.hf-region__hero > div{width:min(1280px,calc(100% - 3rem));margin:0 auto}
.hf-region__chapo{max-width:62ch}
.hf-region__repere{
  display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 0 !important;
}
.hf-region__repere span{
  border:1px solid rgba(201,169,110,.42);border-radius:2px;
  padding:7px 13px;font-size:11.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--g-or);
}

/* ── Départements ─────────────────────────────────────────────────────────── */
.hf-region__bande{background:var(--g-sable);padding:72px 0}
.hf-region__couvre{display:grid;grid-template-columns:1.45fr 1fr;gap:56px;align-items:start}
.hf-region__deps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0;
}
.hf-region__deps li{
  padding:11px 0;border-top:1px solid rgba(27,33,64,.13);
  font-size:14.5px;font-variant-numeric:tabular-nums;
}
.hf-region__villes{background:#fff;border:1px solid rgba(27,33,64,.1);padding:26px 24px}
.hf-region__villes p{font-size:15px;margin-bottom:14px}
.hf-region__note{font-size:13.5px;opacity:.78;margin:0 !important;
  padding-top:14px;border-top:1px solid rgba(27,33,64,.1)}

/* ── Terrain ──────────────────────────────────────────────────────────────── */
.hf-region__texte{padding:78px 0}

/* ── Organisation ─────────────────────────────────────────────────────────── */
.hf-region__trajet{background:var(--g-creme);padding:72px 0}
.hf-region__deux{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:start}
.hf-region__jalons{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.hf-region__jalons li{
  background:#fff;border-left:2px solid var(--g-or);padding:16px 20px;
  display:flex;flex-direction:column;gap:5px;
}
.hf-region__jalons strong{font-size:14.5px;color:var(--g-navy)}
.hf-region__jalons span{font-size:14px;line-height:1.5;opacity:.85}

/* ── Publics et thématiques ───────────────────────────────────────────────── */
.hf-region__publics{padding:78px 0}
.hf-region__themes{background:var(--g-navy);padding:78px 0;color:#fff}
.hf-region__themes h2{color:#fff}
.hf-region__themes .hf-region__surtitre{color:var(--g-or)}

.hf-region__grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.hf-region__carte{
  border:1px solid rgba(27,33,64,.12);padding:22px 20px;
  display:flex;flex-direction:column;gap:7px;background:#fff;
}
.hf-region__carte strong{font-size:16px;color:var(--g-navy)}
.hf-region__carte span{font-size:14px;line-height:1.5;opacity:.85}

.hf-region__theme{
  border:1px solid rgba(255,255,255,.18);padding:24px 22px;text-decoration:none;
  display:flex;flex-direction:column;gap:9px;color:#fff;
  transition:background .22s ease,border-color .22s ease;
}
.hf-region__theme:hover{background:rgba(201,169,110,.12);border-color:var(--g-or)}
.hf-region__theme strong{font-family:"Bodoni Moda",Georgia,serif;font-weight:500;
  font-size:21px;line-height:1.15;letter-spacing:-.015em}
.hf-region__n{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--g-or)}
.hf-region__voir{margin-top:auto;padding-top:12px;font-size:13.5px;font-weight:600;color:var(--g-or)}

/* ── Financement ──────────────────────────────────────────────────────────── */
.hf-region__financement{background:var(--g-sable);padding:78px 0}
.hf-region__financeurs{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:2px}
.hf-region__financeurs li{
  background:#fff;padding:16px 20px;display:grid;grid-template-columns:130px 1fr;
  gap:16px;align-items:baseline;
}
.hf-region__financeurs strong{font-size:14.5px;color:var(--g-navy);
  letter-spacing:.04em}
.hf-region__financeurs span{font-size:14.5px;line-height:1.5}

/* ── Références ───────────────────────────────────────────────────────────── */
.hf-region__refs{padding:78px 0}
.hf-region__ref{margin:0;background:var(--g-creme);border-left:2px solid var(--g-or);
  padding:24px 22px}
.hf-region__ref p{font-size:15.5px;line-height:1.6;font-style:italic}
.hf-region__ref cite{font-style:normal;font-size:13px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--g-or-fonce)}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.hf-region__faq{background:var(--g-creme);padding:78px 0}
.hf-region__faq details{border-top:1px solid rgba(27,33,64,.14);padding:0}
.hf-region__faq details:last-of-type{border-bottom:1px solid rgba(27,33,64,.14)}
.hf-region__faq summary{
  cursor:pointer;list-style:none;padding:20px 34px 20px 0;position:relative;
  font-size:16px;font-weight:600;color:var(--g-navy);
}
.hf-region__faq summary::-webkit-details-marker{display:none}
.hf-region__faq summary::after{
  content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-size:20px;color:var(--g-or-fonce);line-height:1;
}
.hf-region__faq details[open] summary::after{content:"\2212"}
.hf-region__faq details p{padding:0 40px 22px 0;margin:0;font-size:15.5px}

/* ── Appel et navigation ──────────────────────────────────────────────────── */
.hf-region__appel{background:var(--g-navy);padding:78px 0;color:#fff;text-align:center}
.hf-region__appel h2{color:#fff;margin-left:auto;margin-right:auto}
.hf-region__appel p{max-width:60ch;margin-left:auto;margin-right:auto;opacity:.9}
.hf-region__bouton{
  display:inline-flex;align-items:center;gap:9px;margin-top:12px;
  background:var(--g-or);color:var(--g-navy);text-decoration:none;
  padding:15px 28px;font-size:13.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  transition:background .22s ease;
}
.hf-region__bouton:hover{background:#fff}
.hf-region__contact{margin-top:22px !important;font-size:14.5px}
.hf-region__contact a{color:var(--g-or);text-decoration:none}
.hf-region__contact a:hover{text-decoration:underline}

.hf-region__ailleurs{padding:44px 0;border-top:1px solid rgba(27,33,64,.12)}
.hf-region__ailleurs ul{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px}
.hf-region__ailleurs a{
  display:inline-block;border:1px solid rgba(27,33,64,.16);padding:9px 16px;
  font-size:13.5px;text-decoration:none;color:var(--g-navy);
}
.hf-region__ailleurs a:hover{border-color:var(--g-or);color:var(--g-or-fonce)}

/* ── Téléphone et tablette ────────────────────────────────────────────────── */
@media (max-width:980px){
  .hf-region__couvre,.hf-region__deux{grid-template-columns:1fr;gap:36px}
}
@media (max-width:620px){
  .hf-region__hero{padding:56px 0 48px}
  .hf-region__bande,.hf-region__texte,.hf-region__trajet,.hf-region__publics,
  .hf-region__themes,.hf-region__financement,.hf-region__refs,
  .hf-region__faq,.hf-region__appel{padding:52px 0}
  .hf-region__deps{grid-template-columns:1fr}
  .hf-region__financeurs li{grid-template-columns:1fr;gap:5px}
}

/* La carte du pivot est cliquable dans son entier. */
.hf-region__carte--lien{text-decoration:none;transition:border-color .22s ease,box-shadow .22s ease}
.hf-region__carte--lien:hover{border-color:var(--g-or);box-shadow:0 10px 26px rgba(27,33,64,.09)}
.hf-region__carte--lien .hf-region__n{color:var(--g-or-fonce);font-size:12px;letter-spacing:.11em;text-transform:uppercase}
.hf-region__carte--lien .hf-region__voir{margin-top:auto;padding-top:10px;font-size:13.5px;font-weight:600;color:var(--g-or-fonce)}

/* Les chiffres FINESS. Sobres : ce sont des données, pas une vitrine. */
.hf-region__chiffres{padding:70px 0;border-bottom:1px solid rgba(27,33,64,.1)}
.hf-region__nombres{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;margin-top:8px}
.hf-region__nombres > div{background:var(--g-creme);padding:26px 24px;display:flex;flex-direction:column;gap:10px}
.hf-region__nombres strong{font-family:"Bodoni Moda",Georgia,serif;font-weight:500;font-size:clamp(34px,3.6vw,46px);line-height:1;color:var(--g-navy);font-variant-numeric:tabular-nums}
.hf-region__nombres span{font-size:14.5px;line-height:1.5;opacity:.88}
.hf-region__source{margin-top:18px !important;font-size:13px;opacity:.78}
.hf-region__source a{color:var(--g-or-fonce)}
@media (max-width:620px){ .hf-region__chiffres{padding:52px 0} }