/* ============================================================
   Cévennes Escapades ,  peau « Carnet de Crête »
   Préfixe : cc-
   Deux familles locales : Poppins 700 (titres) + Manrope variable (texte).
   Palette pierre sèche + bleu de source + ocre de relevé.
   Règle négative : l'ocre ne sert jamais de fond plein, seulement de filet
   supérieur ou de pastille. Aucun rouge ni vert de signalisation.
   ============================================================ */

@font-face {
  font-family: 'Poppins Serre';
  src: url('/poppins-v15-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope Bec';
  src: url('/manrope-variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --cc-pierre-seche: #FBF3EC;
  --cc-cendre-froid: #EADED2;
  --cc-bois-flotte: #FFFBF6;
  --cc-encre-gardon: #3B2F28;
  --cc-garrigue-grise: #6E5F52;
  --cc-bleu-source: #2E5E7E;
  --cc-bleu-source-appui: #1F4257;
  --cc-ocre-releve: #9B6A1F;
  --cc-filet-mince: #DCCFC1;
  --cc-selection-calque: #E4D8C6;

  --cc-titre-police: 'Poppins Serre', 'Segoe UI', system-ui, sans-serif;
  --cc-texte-police: 'Manrope Bec', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --cc-mention-police: ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --cc-mesure: 68ch;
  --cc-page-max: 82rem;
  --cc-pas: 1.5rem;
  --cc-interligne: 1.68;
  --cc-t1: clamp(1.9rem, 4.4vw, 3.1rem);
  --cc-t2: clamp(1.35rem, 2.2vw, 1.8rem);
  --cc-t3: clamp(1.05rem, 1.4vw, 1.25rem);

  --cc-rayon-carte: 16px;
  --cc-rayon-vignette: 14px;
  --cc-rayon-bloc: 20px;
  --cc-rayon-pastille: 999px;

  --cc-ombre-douce: 0 6px 18px rgba(59, 47, 40, 0.08);
  --cc-ombre-bloc: 0 14px 34px rgba(46, 94, 126, 0.14);
  --cc-ombre-photo: 0 18px 44px rgba(59, 47, 40, 0.16);
  --cc-ombre-ocre: 0 8px 22px rgba(155, 106, 31, 0.16);

  --cc-ratio-vedette: 16 / 9;
  --cc-ratio-cadre: 4 / 3;
  --cc-ratio-detail: 1 / 1;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--cc-texte-police);
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.08rem);
  line-height: var(--cc-interligne);
  color: var(--cc-encre-gardon);
  background: var(--cc-pierre-seche);
}

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

a { color: var(--cc-bleu-source); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cc-bleu-source-appui); }

:focus-visible {
  outline: 3px solid var(--cc-bleu-source);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--cc-selection-calque); color: var(--cc-encre-gardon); }

h1, h2, h3 {
  font-family: var(--cc-titre-police);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--cc-encre-gardon);
  margin: 0 0 0.6rem;
}

h1 { font-size: var(--cc-t1); text-shadow: 0 1px 0 rgba(255, 251, 246, 0.6), 0 8px 22px rgba(59, 47, 40, 0.10); }
h2 { font-size: var(--cc-t2); }
h3 { font-size: var(--cc-t3); }

p { margin: 0 0 1rem; }

/* --- Conteneurs --- */
.cc-travee {
  width: 100%;
  max-width: var(--cc-page-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
  min-width: 0;
}

.cc-acces-direct {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--cc-bleu-source);
  color: #fff;
  padding: 0.7rem 1rem;
  border-radius: 0 0 var(--cc-rayon-carte) 0;
  z-index: 40;
}
.cc-acces-direct:focus { left: 0; }

/* --- Fronton --- */
.cc-fronton {
  background: var(--cc-cendre-froid);
  border-bottom: 1px solid var(--cc-filet-mince);
  box-shadow: var(--cc-ombre-douce);
}
.cc-fronton__interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
  padding-block: 1rem;
}
.cc-enseigne {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--cc-titre-police);
  font-weight: 700;
  font-size: 1.22rem;
  color: var(--cc-encre-gardon);
  text-decoration: none;
}
.cc-embleme { width: 2rem; height: 2rem; color: var(--cc-bleu-source); flex: none; }
.cc-devise {
  margin: 0;
  font-size: 0.9rem;
  color: var(--cc-garrigue-grise);
  flex: 1 1 14rem;
  min-width: 0;
}
.cc-parcours { flex: 1 1 100%; }
.cc-parcours ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
}
.cc-parcours__lien {
  font-family: var(--cc-mention-police);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cc-garrigue-grise);
  padding-bottom: 0.2rem;
  border-bottom: 2px solid transparent;
}
.cc-parcours__lien:hover { color: var(--cc-bleu-source); border-bottom-color: var(--cc-ocre-releve); }
.cc-parcours__lien[aria-current="page"] { color: var(--cc-bleu-source); border-bottom-color: var(--cc-bleu-source); }

/* --- Préambule --- */
.cc-preambule { padding-block: clamp(1.8rem, 4vw, 3rem); min-width: 0; }
.cc-titre-page { max-width: 24ch; }
.cc-chapeau {
  font-size: 1.06rem;
  color: var(--cc-garrigue-grise);
  max-width: var(--cc-mesure);
}
.cc-bilan {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  margin: 1.4rem 0 0;
  padding: 1rem 1.2rem;
  background: var(--cc-bois-flotte);
  border-radius: var(--cc-rayon-carte);
  box-shadow: var(--cc-ombre-douce);
}
.cc-bilan__poste { display: flex; flex-direction: column; min-width: 0; }
.cc-bilan__chiffre {
  font-family: var(--cc-titre-police);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--cc-bleu-source);
}
.cc-bilan__libelle {
  font-family: var(--cc-mention-police);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cc-garrigue-grise);
}

/* --- Rayon (section) --- */
.cc-rayon { padding-block: clamp(1.6rem, 3.6vw, 2.6rem); min-width: 0; }
.cc-rayon__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.2rem;
  padding-bottom: 0.6rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--cc-filet-mince);
  min-width: 0;
}
.cc-rayon__tete h2 { margin: 0; }
.cc-rayon__tete h2 a { color: inherit; text-decoration: none; }
.cc-rayon__tete h2 a:hover { color: var(--cc-bleu-source); }
.cc-rayon__tete .cc-renvoi { display: inline-block; background: var(--cc-bleu-source); color: #fff; padding: .5rem .8rem; border-radius: .7rem; box-shadow: 0 5px 14px rgba(31,66,87,.22); }
.cc-rayon__phrase {
  margin: 0;
  flex: 1 1 18rem;
  min-width: 0;
  color: var(--cc-garrigue-grise);
  font-size: 0.94rem;
}
.cc-rayon__decompte {
  font-family: var(--cc-mention-police);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--cc-ocre-releve);
}

/* --- Vignettes --- */
.cc-vignette--vedette,
.cc-vignette--cadre,
.cc-vignette--detail {
  margin: 0;
  overflow: hidden;
  border-radius: var(--cc-rayon-vignette);
  background: var(--cc-cendre-froid);
  box-shadow: var(--cc-ombre-douce);
}
.cc-vignette--vedette { aspect-ratio: var(--cc-ratio-vedette); width: 100%; max-width: 100%; }
.cc-vignette--cadre { aspect-ratio: var(--cc-ratio-cadre); width: 100%; max-width: 100%; }
.cc-vignette--detail { aspect-ratio: var(--cc-ratio-detail); width: 100%; max-width: 100%; }

.cc-vignette--vedette img,
.cc-vignette--cadre img,
.cc-vignette--detail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.03);
}

/* --- Vedette --- */
.cc-vedette {
  background: var(--cc-bois-flotte);
  border-radius: var(--cc-rayon-bloc);
  overflow: hidden;
  box-shadow: var(--cc-ombre-photo);
  margin-bottom: 1.6rem;
  min-width: 0;
}
.cc-vedette__lien { display: block; text-decoration: none; color: inherit; }
.cc-vedette__vignette { border-radius: 0; box-shadow: none; }
.cc-vedette__texte {
  position: relative;
  padding: 1.3rem clamp(1rem, 2.4vw, 2rem) 1.6rem;
  margin-top: -4.5rem;
  background: linear-gradient(180deg, rgba(59, 47, 40, 0) 0%, rgba(59, 47, 40, 0.72) 40%, rgba(59, 47, 40, 0.9) 100%);
  color: var(--cc-bois-flotte);
  border-radius: 0 0 var(--cc-rayon-bloc) var(--cc-rayon-bloc);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
.cc-vedette__entete { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.5rem; }
.cc-vedette__entete .cc-cote,
.cc-vedette__entete .cc-mention { color: var(--cc-bois-flotte); border-color: rgba(255, 251, 246, 0.5); }
.cc-vedette__titre { font-size: var(--cc-t2); color: #fff; margin-bottom: 0.5rem; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); }
.cc-vedette__abrege { color: rgba(255, 251, 246, 0.92); max-width: 62ch; margin-bottom: 0.5rem; }
.cc-vedette__legende {
  font-family: var(--cc-mention-police);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  margin: 0;
  color: rgba(255, 251, 246, 0.85);
}
.cc-vedette__lien:hover .cc-vedette__titre { color: var(--cc-selection-calque); }

/* --- Duo de cartes moyennes --- */
.cc-duo-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1.4rem;
  margin-bottom: 1.6rem;
  min-width: 0;
}

/* --- Carte --- */
.cc-carte {
  background: var(--cc-bois-flotte);
  border-radius: var(--cc-rayon-carte);
  overflow: hidden;
  box-shadow: var(--cc-ombre-douce);
  min-width: 0;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.cc-carte:hover { box-shadow: var(--cc-ombre-bloc); transform: translateY(-2px); }
.cc-carte__lien { display: block; text-decoration: none; color: inherit; }
.cc-carte__vignette { border-radius: 0; box-shadow: none; }
.cc-carte__texte { padding: 0.95rem 1.05rem 1.15rem; }
.cc-carte__entete { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.45rem; }
.cc-carte__titre { margin: 0 0 0.5rem; font-size: 1.02rem; }
.cc-carte__titre a { color: var(--cc-encre-gardon); text-decoration: none; }
.cc-carte__titre a:hover { color: var(--cc-bleu-source); }
.cc-carte__abrege { color: var(--cc-garrigue-grise); font-size: 0.93rem; margin: 0 0 0.5rem; }
.cc-carte__date { font-family: var(--cc-mention-police); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--cc-garrigue-grise); margin: 0; }

/* --- Cote / mention --- */
.cc-cote, .cc-mention {
  font-family: var(--cc-mention-police);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cc-cote { color: var(--cc-ocre-releve); }
.cc-mention { color: var(--cc-garrigue-grise); text-decoration: none; }
a.cc-mention:hover { color: var(--cc-bleu-source); }

/* --- Liste compacte --- */
.cc-liste-compacte {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 0 1.6rem;
  min-width: 0;
}
.cc-ligne { min-width: 0; border-top: 1px solid var(--cc-filet-mince); }
.cc-ligne__lien {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.cc-ligne__vignette {
  flex: 0 0 72px;
  width: 72px;
  max-width: 72px;
  margin: 0;
  border-radius: var(--cc-rayon-vignette);
  overflow: hidden;
  box-shadow: var(--cc-ombre-douce);
}
.cc-ligne__vignette img { width: 100%; height: 100%; object-fit: cover; }
.cc-ligne__texte { display: flex; flex-direction: column; min-width: 0; }
.cc-ligne__titre { font-family: var(--cc-titre-police); font-weight: 700; font-size: 0.98rem; color: var(--cc-encre-gardon); }
.cc-ligne__lien:hover .cc-ligne__titre { color: var(--cc-bleu-source); }
.cc-ligne__meta { font-size: 0.82rem; color: var(--cc-garrigue-grise); }

/* --- Registre (liste de cartes d'une rubrique) --- */
.cc-registre {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1.2rem;
  min-width: 0;
}
.cc-registre .cc-carte { display: grid; grid-template-columns: 96px 1fr; align-items: stretch; }
.cc-registre .cc-carte__lien { min-width: 0; }
.cc-registre .cc-carte__vignette { height: 100%; }
.cc-registre .cc-carte__vignette.cc-vignette--detail { aspect-ratio: auto; height: 100%; }
.cc-registre .cc-carte__texte { padding: 0.8rem 1rem; min-width: 0; }
.cc-registre .cc-carte__abrege { display: none; }

/* --- Renvoi --- */
.cc-renvoi-ligne { margin: 1rem 0 0; }
.cc-renvoi { font-family: var(--cc-mention-police); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* --- Marge de terrain (signature A) --- */
.cc-marge-terrain {
  border-top: 3px solid var(--cc-ocre-releve);
  padding-top: 0.65rem;
  font-family: var(--cc-mention-police);
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-garrigue-grise);
  margin-top: 1rem;
}

/* --- Renvoi numéroté (signature B) --- */
.cc-renvoi {
  font-family: var(--cc-mention-police);
  font-weight: 700;
  font-size: 0.62em;
  color: var(--cc-bleu-source);
  margin-inline-end: 0.35em;
  vertical-align: super;
}

/* --- Encart --- */
.cc-encart {
  background: var(--cc-cendre-froid);
  border-radius: var(--cc-rayon-bloc);
  padding: 1.5rem clamp(1rem, 2.4vw, 2rem);
  margin-block: 2rem;
  box-shadow: var(--cc-ombre-ocre);
  min-width: 0;
}

/* --- Réseau « ailleurs » --- */
.cc-ailleurs { background: var(--cc-cendre-froid); border-radius: var(--cc-rayon-bloc); padding: clamp(1.2rem, 3vw, 2rem); margin-block: 2rem; min-width: 0; }
.cc-ailleurs__liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.cc-ailleurs__item p { margin: 0; }

/* --- Remontée --- */
.cc-remontee ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.7rem; font-family: var(--cc-mention-police); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.cc-remontee li + li::before { content: "/"; margin-right: 0.5rem; color: var(--cc-garrigue-grise); }

/* --- Article : pupitre 3 colonnes --- */
.cc-entete-fiche { padding-block: 1.6rem 1rem; min-width: 0; }
.cc-datation { font-family: var(--cc-mention-police); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cc-garrigue-grise); }
.cc-planche-image { margin: 0 auto 1.6rem; padding-inline: clamp(1rem, 3vw, 2.5rem); max-width: var(--cc-page-max); width: 100%; min-width: 0; }
.cc-planche-image img { width: 100%; border-radius: var(--cc-rayon-bloc); box-shadow: var(--cc-ombre-photo); }
.cc-legende { font-family: var(--cc-mention-police); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--cc-garrigue-grise); margin-top: 0.5rem; }

.cc-pupitre {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  min-width: 0;
}

.cc-rail {
  background: var(--cc-bois-flotte);
  border-radius: var(--cc-rayon-carte);
  padding: 1rem 1.1rem;
  box-shadow: var(--cc-ombre-douce);
  min-width: 0;
}
.cc-rail__cle { font-family: var(--cc-mention-police); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cc-garrigue-grise); margin: 0 0 0.6rem; }
.cc-rail__liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.cc-rail__jalon a { display: flex; gap: 0.5rem; text-decoration: none; color: var(--cc-encre-gardon); font-size: 0.92rem; }
.cc-rail__jalon a:hover { color: var(--cc-bleu-source); }
.cc-rail__rang { font-family: var(--cc-mention-police); color: var(--cc-ocre-releve); font-size: 0.78rem; }

.cc-corps { max-width: var(--cc-mesure); min-width: 0; }
.cc-corps h2 { margin-top: 2rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--cc-filet-mince); }
.cc-corps table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cc-corps figure { margin: 1.4rem 0; }
.cc-corps img { border-radius: var(--cc-rayon-vignette); }

.cc-notes {
  background: var(--cc-bois-flotte);
  border-radius: var(--cc-rayon-carte);
  padding: 1rem 1.1rem;
  box-shadow: var(--cc-ombre-douce);
  font-size: 0.92rem;
  min-width: 0;
}
.cc-notes__cle { font-family: var(--cc-mention-police); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cc-garrigue-grise); margin: 1rem 0 0.5rem; }
.cc-notes__sources { padding-left: 0; list-style: none; margin: 0; display: grid; gap: 0.4rem; }
.cc-notes__sources li { display: flex; gap: 0.4rem; min-width: 0; }
.cc-notes__sources a { word-break: break-word; }

.cc-voisinage, .cc-planche, .cc-rayon--vedette { padding-bottom: clamp(1.6rem, 3.6vw, 2.6rem); }

/* --- Pied --- */
.cc-pied {
  background: var(--cc-cendre-froid);
  margin-top: 3rem;
  border-top: 3px solid var(--cc-ocre-releve);
  box-shadow: 0 -6px 18px rgba(59, 47, 40, 0.06);
}
.cc-pied__colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1.6rem;
  padding-block: 2rem;
  min-width: 0;
}
.cc-pied__colonne h2 { font-size: 0.95rem; }
.cc-pied__colonne ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; }
.cc-pied__note { font-size: 0.86rem; color: var(--cc-garrigue-grise); }
.cc-pied__ligne { font-family: var(--cc-mention-police); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cc-garrigue-grise); padding-block: 1rem; border-top: 1px solid var(--cc-filet-mince); }

/* --- Responsive --- */
@media (min-width: 52rem) {
  .cc-pupitre {
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) minmax(0, 17rem);
    align-items: start;
  }
  .cc-rail { position: sticky; top: 1rem; }
}

@media (max-width: 60rem) {
  .cc-notes { order: 3; }
}

@media (max-width: 34rem) {
  .cc-registre .cc-carte { grid-template-columns: 80px 1fr; }
  .cc-vedette__texte { margin-top: -3rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .cc-fronton, .cc-rail, .cc-notes, .cc-pied { display: none; }
  body { background: #fff; }
}