/**
 * Socle du site public - Château Courtey
 *
 * Écrit en mobile d'abord : les valeurs par défaut valent pour le téléphone,
 * les media queries n'ajoutent que ce que la place permet. La maquette est
 * en 1440 px figé ; ce fichier en est la version qui tient sur tous les écrans.
 */

/* ───────────────────────────── Remise à zéro ───────────────────────────── */

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

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

body {
  margin: 0;
  background: var(--c-fond);
  color: var(--c-encre);
  font-family: var(--f-texte);
  font-size: var(--t-corps);
  line-height: var(--i-corps);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

/* ───────────────────────────── Typographie ───────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-titre);
  font-weight: 400;
  line-height: var(--i-titre);
  letter-spacing: var(--l-titre-s);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--t-titre-1); line-height: var(--i-serre); letter-spacing: var(--l-titre); }
h2 { font-size: var(--t-titre-2); }
h3 { font-size: var(--t-titre-3); }
h4 { font-size: var(--t-titre-4); }

p { margin: 0 0 var(--e-3); max-width: var(--largeur-txt); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; }

a {
  color: var(--c-vigne);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--c-vigne-fonce); }

::selection { background: var(--c-vigne); color: var(--c-fond); }

/* Le focus doit rester très visible : clientèle âgée, navigation au clavier. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--c-encre);
  outline-offset: 3px;
  border-radius: 4px;
}

/* La voix manuscrite de Norbert - annotations, légendes de photo. */
.cc-main {
  font-family: var(--f-main);
  font-size: var(--t-titre-4);
  line-height: 1.3;
  color: var(--c-vigne);
}

/* ─────────────────────────────── Gabarit ─────────────────────────────── */

.cc-page {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--marge-page);
}

.cc-section { padding-block: var(--e-6); }

@media (min-width: 60rem) {
  .cc-section { padding-block: var(--e-7); }
}

/* Deux colonnes qui deviennent une seule sous 60rem, sans media query
   dans chaque composant : la colonne latérale ne s'installe que si la
   place existe. */
.cc-duo {
  display: grid;
  gap: var(--e-5);
  align-items: start;
}

@media (min-width: 60rem) {
  .cc-duo {
    grid-template-columns: 1fr minmax(0, 470px);
    gap: var(--e-7);
  }
  .cc-duo--large { grid-template-columns: 1fr minmax(0, 380px); }
  .cc-duo__cote { position: sticky; top: var(--e-4); }
}

/* Contenu rédigé dans l'éditeur de blocs : on borne la longueur de ligne
   sans contraindre les blocs larges que l'auteur aurait choisis. */
.cc-contenu > * { max-width: var(--largeur-txt); }
.cc-contenu > .alignwide,
.cc-contenu > .alignfull,
.cc-contenu > figure,
.cc-contenu > .wp-block-image { max-width: none; }

/* Une photo dans le texte : les mêmes coins arrondis que les cartes, et sa
   légende de la même main que les mots manuscrits. */
.cc-illustration { margin-block: var(--e-5); }
.cc-illustration img {
  width: 100%;
  height: auto;
  border-radius: var(--r-bloc);
}
/* WordPress pose sa propre taille sur « .wp-element-caption » dans ses
   styles globaux, qui passent après les nôtres : on la reprend sur la même
   classe pour ne pas avoir à surenchérir en spécificité. */
.cc-illustration figcaption,
.cc-illustration .wp-element-caption {
  margin-top: .7rem;
  font-family: var(--f-main);
  font-size: var(--t-titre-4);
  line-height: 1.3;
  color: var(--c-encre-attenuee);
  text-align: left;
}

/* ────────────────────────── Formes organiques ────────────────────────── */
/* Les taches colorées de la maquette. Décoratives : masquées aux lecteurs
   d'écran et retirées sous 60rem, où elles n'apporteraient que du bruit. */

.cc-tache {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  display: none;
}

@media (min-width: 60rem) {
  .cc-tache { display: block; }
}

.cc-tache--vigne   { background: var(--c-vigne);   opacity: .13; }
.cc-tache--paille  { background: var(--c-paille);  opacity: .30; }
.cc-tache--terre   { background: var(--c-terre);   opacity: .85; }
.cc-tache--ardoise { background: var(--c-ardoise); opacity: .18; }

.cc-tache--a { border-radius: 62% 38% 48% 52% / 44% 62% 38% 56%; transform: rotate(-12deg); }
.cc-tache--b { border-radius: 44% 56% 62% 38% / 58% 42% 58% 42%; transform: rotate(18deg); }
.cc-tache--c { border-radius: 56% 44% 38% 62% / 42% 58% 42% 58%; transform: rotate(24deg); }

.cc-sur-tache { position: relative; z-index: 1; }

/* ──────────────────────────── Blocs et cartes ──────────────────────────── */

.cc-carte {
  background: var(--c-surface);
  border: 1px solid var(--c-filet);
  border-radius: var(--r-carte);
  padding: var(--e-4);
}

@media (min-width: 40rem) {
  .cc-carte { padding: var(--e-5); }
}

.cc-carte--vigne {
  background: var(--c-vigne);
  color: var(--c-fond);
  border-color: transparent;
}

.cc-note {
  background: var(--c-vigne-voile);
  border-radius: var(--r-bloc);
  padding: var(--e-3) var(--e-4);
}

/* ─────────────────────────────── Boutons ─────────────────────────────── */

.cc-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  min-height: var(--cible-min);
  padding: 0 var(--e-5);
  border: none;
  border-radius: var(--r-pilule);
  background: var(--c-vigne);
  color: var(--c-fond);
  font-family: var(--f-texte);
  font-size: var(--t-corps);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease;
}
.cc-bouton:hover { background: var(--c-vigne-fonce); color: var(--c-fond); }
.cc-bouton--pleine { width: 100%; }

.cc-bouton--second {
  background: transparent;
  color: var(--c-encre);
  border: 1.5px solid var(--c-filet-marque);
}
.cc-bouton--second:hover { background: var(--c-surface); color: var(--c-encre); border-color: var(--c-vigne); }

/* Pastille d'état - « Prévente ouverte jusqu'au 20 septembre ». */
.cc-pastille {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: .5rem 1rem .5rem .75rem;
  border-radius: var(--r-pilule);
  background: var(--c-vigne-voile);
  color: var(--c-vigne);
  font-size: var(--t-mention);
  font-weight: 600;
  line-height: 1.3;
}
.cc-pastille::before {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: currentColor;
}

/* L'attribut « hidden » du HTML ne vaut qu'un « display: none » dans la
   feuille du navigateur : la moindre règle d'auteur le supplante. Le champ
   d'adresse, masqué par JavaScript quand le retrait ne le demande pas, est un
   « .cc-champ » donc « display: grid » - il serait resté visible. On rétablit
   la règle, une fois pour tout le site. */
[hidden] { display: none !important; }

/* ────────────────────────────── Formulaires ────────────────────────────── */

.cc-champ { display: grid; gap: var(--e-1); }

.cc-champ > label { font-size: var(--t-petit); font-weight: 500; }

.cc-champ input[type="text"],
.cc-champ input[type="email"],
.cc-champ input[type="tel"],
.cc-champ input[type="number"],
.cc-champ input[type="date"],
.cc-champ textarea,
.cc-champ select {
  width: 100%;
  min-height: var(--cible-min);
  padding: .75rem 1rem;
  border: 1.5px solid var(--c-filet-fort);
  border-radius: var(--r-champ);
  background: var(--c-surface);
  color: var(--c-encre);
  font-size: var(--t-petit);
}

.cc-champ textarea { resize: vertical; min-height: 6rem; }

.cc-champ input::placeholder,
.cc-champ textarea::placeholder { color: var(--c-encre-faible); opacity: 1; }

.cc-champ__aide {
  font-size: var(--t-mention);
  color: var(--c-encre-attenuee);
  max-width: var(--largeur-txt);
}

.cc-champ--requis > label::after {
  content: " *";
  color: var(--c-terre);
}

/* ──────────────────────────── En-tête et pied ──────────────────────────── */

.cc-entete { padding-block: var(--e-3); }

.cc-entete__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}

.cc-entete__nom { margin: 0; font-family: var(--f-titre); font-size: var(--t-titre-4); }
.cc-entete__nom a { color: var(--c-encre); text-decoration: none; }

.cc-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cc-nav a {
  display: inline-block;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  color: var(--c-encre);
  text-decoration: none;
  font-size: var(--t-petit);
}
.cc-nav a:hover { color: var(--c-vigne); border-bottom-color: var(--c-vigne); }
.cc-nav .current-menu-item > a { color: var(--c-vigne); border-bottom-color: var(--c-vigne); }

/* Au doigt, les liens de l'en-tête sont trop bas pour être visés sans se
   tromper de voisin - d'autant que la clientèle du domaine n'est pas jeune.
   On ne les grossit qu'au toucher : à la souris, le dessin serré de la
   maquette reste le bon. */
@media (pointer: coarse) {
  .cc-entete__nom a,
  .cc-nav a,
  .cc-entete__tel,
  .cc-entete__mail,
  .cc-pied__liens a,
  .cc-cuvees-vitrine__suite a,
  .cc-espace__sortie,
  .cc-commande__detail summary,
  /* Les sommaires, les fils d'Ariane et les retours : de petits liens
     empilés les uns sur les autres, où l'on vise forcément le voisin. */
  .cc-sommaire__liste a,
  .cc-fil a,
  .cc-cuvee-page__retour a,
  .cc-passee__action a,
  .cc-cave__lien,
  /* Le téléphone et le courriel sont l'action principale de ces blocs :
     c'est par là que passe la moitié des commandes de Norbert. */
  .cc-trouver__tel a,
  .cc-trouver__mail a,
  .cc-reste__tel a,
  .cc-reste__mail a,
  .cc-commande__titre a,
  .cc-passee__nom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .cc-nav { gap: var(--e-1) var(--e-4); }

  /* Empilés, ces liens deviennent une liste qu'on parcourt au pouce : il
     leur faut de l'air entre eux, pas seulement de la hauteur. */
  .cc-sommaire__liste { gap: .1rem; }
}

/* Les coordonnées et la pastille de compte forment un même bloc à droite. */
.cc-entete__droite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
}

.cc-entete__contact { display: grid; gap: .1rem; font-size: var(--t-mention); }

/* La porte de chez soi, pas une rubrique : une pastille, à part du menu. */
.cc-entete__compte {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .95rem .55rem .6rem;
  border: 1.5px solid var(--c-filet-fort);
  border-radius: var(--r-pilule);
  color: var(--c-encre);
  text-decoration: none;
  font-size: var(--t-petit);
  font-weight: 500;
  white-space: nowrap;
}
.cc-entete__compte:hover { border-color: var(--c-vigne); }
.cc-entete__compte.est-ici { border-color: transparent; background: var(--c-vigne-voile); }

/* Sans initiales - visiteur non connecté - la pastille garde sa place et sa
   forme, mais retrouve un rembourrage symétrique. */
.cc-entete__compte:not(:has(.cc-entete__initiales)) { padding-left: .95rem; }

.cc-entete__initiales {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-vigne);
  color: var(--c-fond);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
  /* La capitale se pose ici : le PHP ne sait pas majusculer un accent. */
  text-transform: uppercase;
}

/* L'alignement à droite n'a de sens que lorsque l'en-tête tient sur une
   ligne. Empilé sur téléphone, il faut repartir de la gauche comme le reste. */
@media (min-width: 56rem) {
  .cc-entete__contact { text-align: right; }
}

/* Empilé, l'en-tête ferait cinq rangées avant le titre de la page. La
   pastille remonte donc à côté du nom du domaine : elle reste en haut à
   droite, comme sur la maquette, et il ne reste que trois rangées. */
@media (max-width: 55.99rem) {
  .cc-entete__barre {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    row-gap: var(--e-3);
  }
  .cc-entete__droite  { display: contents; }
  .cc-entete__nom     { grid-column: 1; grid-row: 1; }
  .cc-entete__compte  { grid-column: 2; grid-row: 1; justify-self: end; }
  .cc-entete__nav     { grid-column: 1 / -1; grid-row: 2; }
  .cc-entete__contact { grid-column: 1 / -1; grid-row: 3; }
}
.cc-entete__tel  { color: var(--c-encre-attenuee); text-decoration: none; }
.cc-entete__mail { color: var(--c-vigne); font-weight: 500; text-decoration: none; }

.cc-pied {
  margin-top: var(--e-8);
  background: var(--c-pied-fond);
  color: var(--c-pied-encre);
}

.cc-pied__contenu {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-5);
  padding-block: var(--e-6);
}

.cc-pied__nom { margin: 0; font-family: var(--f-titre); font-size: var(--t-titre-4); }
.cc-pied__description { margin: .6rem 0 0; opacity: .78; font-size: var(--t-petit); }

.cc-pied__liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin: var(--e-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-mention);
  opacity: .78;
}
.cc-pied__liens a { color: var(--c-pied-encre); }

.cc-pied__mineurs { margin: .6rem 0 0; font-size: var(--t-mention); opacity: .78; }

/* Le message sanitaire est encadré plutôt que relégué en petits caractères :
   la loi impose qu'il soit apparent, autant l'assumer comme un élément du
   dessin. */
.cc-pied__sanitaire {
  max-width: 440px;
  margin: 0;
  padding: var(--e-3) var(--e-4);
  border: 1px solid rgba(251, 247, 236, .35);
  border-radius: var(--r-bloc);
  font-size: var(--t-petit);
  line-height: 1.5;
}

/* ────────────────────────── Retour en haut de page ────────────────────────── */

/* Le bouton est ajouté par le script : sans JavaScript il n'existe pas, et le
   nom du domaine en tête de page reste le chemin du retour. Il ne se montre
   qu'une fois l'en-tête sorti de l'écran. */
.cc-haut {
  position: fixed;
  right: var(--e-4);
  bottom: var(--e-4);
  z-index: 50;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1.5px solid var(--c-filet-fort);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-encre);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(36, 33, 28, .14);

  /* Caché tant que l'en-tête est visible. « visibility » plutôt qu'un simple
     retrait : le bouton sort ainsi du parcours clavier au lieu de rester
     atteignable en étant invisible. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.cc-haut.est-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.cc-haut:hover {
  border-color: var(--c-vigne);
  color: var(--c-vigne);
}

.cc-haut:focus-visible {
  outline: 3px solid var(--c-encre);
  outline-offset: 3px;
}

.cc-haut svg { width: 22px; height: 22px; }

/* Au doigt, la cible passe à 56 px et s'écarte du bord : sur un téléphone,
   un bouton collé au coin se manque une fois sur deux. */
@media (pointer: coarse) {
  .cc-haut {
    right: var(--e-3);
    bottom: var(--e-3);
    width: 56px;
    height: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-haut { transition: opacity .18s ease, visibility .18s; transform: none; }
}

/* ────────────────────────────── Accessibilité ────────────────────────────── */

/* Le champ-piège n'est destiné qu'aux robots : un visiteur ne doit ni le
   voir, ni l'atteindre au clavier, ni l'entendre. On le sort de l'écran
   plutôt que de l'effacer - certains robots ignorent ce qui est en
   « display: none » et rempliraient tout de même le vrai formulaire. */
.cc-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

.cc-lecteur-seul {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cc-saut {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: var(--e-2) var(--e-3);
  background: var(--c-encre);
  color: var(--c-fond);
  text-decoration: none;
}
.cc-saut:focus { left: var(--marge-page); top: var(--e-2); color: var(--c-fond); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────────────────────── Impression ─────────────────────────────── */
/* Norbert imprime sa liste de tournée pour l'emmener dans le camion. */

@media print {
  body { background: #fff; color: #000; font-size: 12pt; }
  .cc-tache, .cc-saut, nav, footer { display: none !important; }
  a { text-decoration: none; color: #000; }
}

/* ─────────────────────────── La carte de tournée ─────────────────────────── */
/* Fond servi par le domaine, points posés depuis la base. Aucune requête vers
   un service tiers : ni tuiles, ni bibliothèque, ni mouchard. */

/* ─────────────────────────── Où me trouver ─────────────────────────── */

.cc-trouver-page__tete {
  position: relative;
  overflow: hidden;
  padding-block: var(--e-6) var(--e-7);
}
.cc-trouver-page__titre {
  margin: 0;
  font-size: clamp(2.75rem, 6.1vw, 5.5rem);
  line-height: .96;
  letter-spacing: -.035em;
}
.cc-trouver-page__accroche {
  margin: var(--e-4) 0 0;
  font-size: var(--t-titre-4);
  color: var(--c-encre-douce);
}
.cc-trouver-page__mail {
  margin: calc(var(--e-4) - .5rem) 0 0;
  font-size: var(--t-titre-4);
  font-weight: 600;
  /* Sur un écran de 320 px l'adresse est plus large que la colonne. Le bloc
     est en « overflow: hidden » pour rogner la tache décorative : sans cette
     coupure autorisée, l'adresse était tronquée au lieu de passer à la ligne. */
  overflow-wrap: anywhere;
}
.cc-trouver-page__tel { margin: 0; font-size: var(--t-grand); color: var(--c-encre-douce); }

/* Ce sont les deux gestes de la page : écrire à Norbert, ou l'appeler. Le
   texte seul ne faisait que 22 à 31 px de haut, sous le minimum tenable au
   doigt. On garde l'apparence et on élargit la zone de touche. */
.cc-trouver-page__mail a,
.cc-trouver-page__tel a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.cc-trouver-page__mail a { color: var(--c-encre); }
.cc-trouver-page__mail a:hover { color: var(--c-vigne); }
.cc-trouver-page__tel a { color: inherit; }

.cc-trouver-page__corps { padding-bottom: var(--e-7); }

/* Le bandeau : l'annonce à gauche, la fourchette de dates à droite, alignées
   sur leur ligne de base comme deux colonnes d'affiche. */
.cc-trouver-page__bandeau { display: grid; gap: var(--e-4); }

@media (min-width: 56rem) {
  .cc-trouver-page__bandeau {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--e-6);
  }
  .cc-trouver-page__quand { text-align: right; }
}

.cc-trouver-page__tournee { margin: 0; font-size: var(--t-titre-2); line-height: 1.04; }
.cc-trouver-page__mot { margin-top: var(--e-2); max-width: 62ch; }
.cc-trouver-page__mot p { font-size: var(--t-grand); line-height: 1.55; color: var(--c-encre-douce); }

.cc-trouver-page__quand-titre {
  margin: 0;
  font-size: var(--t-mention);
  font-weight: 600;
  color: var(--c-vigne);
}
.cc-trouver-page__quand-dates {
  margin: .25rem 0 0;
  font-family: var(--f-titre);
  font-size: var(--t-titre-3);
  line-height: 1.1;
  white-space: nowrap;
}

/* La carte et les étapes, côte à côte. */
.cc-tournee { display: grid; gap: var(--e-4); margin-top: var(--e-5); }

@media (min-width: 62rem) {
  .cc-tournee { grid-template-columns: minmax(0, 1fr) 420px; align-items: stretch; }
}

/* La carte a son cadre, comme dans la maquette : elle cesse d'être un dessin
   posé sur la page pour devenir un objet à part entière. */
.cc-atlas {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--e-3);
  border: 1px solid var(--c-filet);
  border-radius: var(--r-carte);
  background: var(--c-surface-alt);
}

/* Le calque des pastilles se cale sur « inset: 0 », c'est-à-dire sur cette
   boîte : elle doit donc épouser exactement le dessin. Tant que le SVG était
   centré et bridé en hauteur, il était plus étroit que son conteneur, et les
   positions en pourcentage tombaient à côté - les étapes bretonnes finissaient
   dans l'Atlantique. On borne donc la boîte, pas l'image, et on la centre par
   ses marges. */
.cc-atlas__plan {
  position: relative;
  width: 100%;
  /* Assez large pour que la France remplisse son cadre, assez bornée pour
     que le panneau ne devienne pas une tour sur grand écran. */
  max-width: 40rem;
  margin: auto;
}
.cc-atlas__svg { display: block; width: 100%; height: auto; }

.cc-atlas__terre path {
  fill: var(--c-fond);
  stroke: #D8D0BA;
  stroke-width: 1;
  /* Le tracé suit l'échelle de la carte, pas son contour : sans cela le
     trait tombe à un tiers de pixel sur téléphone et les départements
     s'effacent. */
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

/* Les pastilles sont en HTML par-dessus la carte (voir parts/tournee-carte.php) :
   leur position suit le dessin, leur taille reste celle de l'écran. */
.cc-atlas__reperes {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-atlas__repere {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  /* Plus la pastille est petite, moins il faut écarter les villes proches
     de leur vraie position pour qu'on les distingue. */
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-vigne);
  box-shadow: 0 0 0 6px rgba(47, 91, 58, .16);
  color: var(--c-fond);
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Le domaine : la même pastille, en terre et un peu plus grosse, avec une
   lettre au lieu d'un numéro. Il n'est pas une étape de la tournée - il est
   là toute l'année, et la carte doit le dire d'un coup d'œil. */
.cc-atlas__repere--domaine {
  width: 26px;
  height: 26px;
  background: var(--c-terre);
  box-shadow: 0 0 0 6px rgba(184, 83, 58, .18);
  font-size: .8rem;
}

/* Sur un écran étroit, la carte ne fait plus que 340 px : trois villes
   bretonnes distantes de cinquante kilomètres y tiennent dans dix pixels, et
   des pastilles numérotées s'y empilent en bouillie. On les réduit à des
   points, puisque la liste juste dessous donne les numéros, les villes et les
   dates. La carte n'a plus qu'à dire « voilà où, en France ». */
@media (max-width: 44.99rem) {
  .cc-atlas__repere {
    width: 11px;
    height: 11px;
    box-shadow: 0 0 0 4px rgba(47, 91, 58, .18);
    font-size: 0;
  }

  .cc-atlas__repere--domaine {
    width: 14px;
    height: 14px;
    box-shadow: 0 0 0 4px rgba(192, 86, 60, .2);
  }
}

.cc-atlas__mention {
  display: grid;
  gap: .45rem;
  margin: var(--e-3) 0 0;
  font-size: var(--t-mention);
  color: var(--c-encre-attenuee);
}

/* La légende dit ce que la pastille terre veut dire : sans elle, le « C »
   reste une énigme. */
.cc-atlas__legende {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--c-encre-douce);
}

.cc-atlas__puce {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c-terre);
  color: var(--c-fond);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1;
}

/* Les étapes, en carte blanche à droite. */
.cc-etapes-carte {
  padding: var(--e-5);
  border: 1px solid var(--c-filet);
  border-radius: var(--r-carte);
  background: var(--c-surface);
}

.cc-etapes-carte__titre {
  margin: 0;
  font-family: var(--f-titre);
  font-size: var(--t-titre-3);
  line-height: 1.08;
}

.cc-etapes-liste { list-style: none; margin: var(--e-3) 0 0; padding: 0; }

.cc-etape-pas {
  display: flex;
  gap: var(--e-3);
  align-items: baseline;
  padding: .85rem 0;
  border-bottom: 1px solid var(--c-filet);
}
.cc-etape-pas:last-child { border-bottom: 0; padding-bottom: 0; }

.cc-etape-pas__numero {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-vigne);
  color: var(--c-fond);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  /* Aligné sur la ligne de base du nom de ville, pas sur sa boîte. */
  transform: translateY(4px);
}

.cc-etape-pas__texte { flex: 1; min-width: 0; }
.cc-etape-pas__ville { margin: 0; font-size: var(--t-petit); font-weight: 600; }
.cc-etape-pas__relais { margin: .15rem 0 0; font-size: var(--t-mention); color: var(--c-encre-attenuee); }

.cc-etape-pas__quand {
  flex: none;
  margin: 0;
  text-align: right;
  font-size: var(--t-mention);
  font-weight: 600;
  color: var(--c-vigne);
  line-height: 1.25;
}
.cc-etape-pas__jour { display: block; text-transform: lowercase; }
.cc-etape-pas__date { display: block; white-space: nowrap; }

.cc-tournee__vide { color: var(--c-encre-attenuee); }

/* ─────────────────────────── Fiche technique ─────────────────────────── */
/* Partagée par la page de cuvée et la page de prévente : elle ne peut pas
   vivre dans la feuille de l'une des deux. */

.cc-fiche { margin-top: var(--e-6); }
.cc-fiche__titre { font-size: var(--t-titre-3); }
.cc-fiche__liste { margin: var(--e-2) 0 0; display: grid; gap: 0 var(--e-6); }

@media (min-width: 45rem) { .cc-fiche__liste { grid-template-columns: 1fr 1fr; } }

.cc-fiche__ligne {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-3);
  padding: .8rem 0;
  border-bottom: 1px solid var(--c-filet);
  font-size: var(--t-petit);
}
.cc-fiche__ligne dt { color: var(--c-encre-attenuee); }
.cc-fiche__ligne dd { margin: 0; font-weight: 600; text-align: right; }