/**
 * La vitrine : accueil, pages, cuvées.
 *
 * Mobile d'abord, comme le reste. Les formes organiques de la maquette ne
 * s'installent qu'au-delà de 60rem - sur un téléphone elles ne feraient que
 * du bruit derrière le texte.
 */

/* ─────────────────────────────── Accueil ─────────────────────────────── */

.cc-accueil__ouverture {
  position: relative;
  overflow: hidden;
  padding-block: var(--e-5) var(--e-6);
}

/* Le héros : le récit à gauche, le portrait à droite, comme la maquette.
   Une seule colonne tant que la place manque. */
.cc-accueil__grille {
  display: grid;
  gap: var(--e-5);
  align-items: end;
}

@media (min-width: 60rem) {
  .cc-accueil__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: var(--e-7); }
}

.cc-accueil__portrait { position: relative; margin: 0; min-width: 0; }
.cc-accueil__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 3px;
  /* Les photos du domaine sont prises au téléphone : la désaturation les
     ramène toutes dans le même registre, quel que soit l'éclairage. */
  filter: saturate(.45) contrast(1.05);
}

@media (min-width: 60rem) {
  .cc-accueil__portrait { transform: rotate(2.4deg); }
}

.cc-accueil__legende { margin-top: var(--e-3); color: #4A4531; }

@media (min-width: 60rem) {
  .cc-accueil__legende { transform: rotate(-1.4deg); }
}

/* Le récit d'accueil est écrit en blocs : on lui donne du souffle plutôt que
   des règles serrées, pour que l'auteur reste libre de sa mise en page. */
.cc-accueil__mot > * + * { margin-top: var(--e-3); }
.cc-accueil__mot h1 { max-width: 14ch; }
.cc-accueil__mot h2 { max-width: 20ch; }
.cc-accueil__mot p { font-size: var(--t-grand); color: var(--c-encre-douce); max-width: 46ch; }

.cc-accueil__tournee { padding-bottom: var(--e-7); }
.cc-accueil__renvoi { max-width: 60ch; }
.cc-accueil__renvoi-titre { font-size: var(--t-titre-3); margin-bottom: var(--e-2); }
.cc-accueil__renvoi p { font-size: var(--t-petit); color: var(--c-encre-douce); }
.cc-accueil__renvoi p + p { margin-top: var(--e-3); }

/* ────────────────────── L'annonce de prévente ────────────────────── */

.cc-annonce { padding-block: var(--e-5); }
.cc-annonce__grille { align-items: start; }
.cc-annonce__texte { min-width: 0; }

.cc-annonce__titre { margin-top: var(--e-3); font-size: var(--t-titre-1); line-height: var(--i-serre); letter-spacing: var(--l-titre); }
.cc-annonce__titre a { color: inherit; text-decoration: none; }
.cc-annonce__titre a:hover { color: var(--c-vigne); }

.cc-annonce__chapo {
  margin-top: var(--e-3);
  max-width: 52ch;
  font-size: var(--t-grand);
  line-height: 1.58;
  color: var(--c-encre-douce);
}

.cc-annonce__etiquette {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4);
  margin: var(--e-4) 0;
}
.cc-annonce__etiquette img {
  width: auto;
  max-height: 170px;
  background: var(--c-surface);
  border: 1px solid rgba(36, 33, 28, .14);
}
@media (min-width: 45rem) { .cc-annonce__etiquette img { transform: rotate(-1.8deg); } }
.cc-annonce__etiquette .cc-main { max-width: 22ch; }

.cc-annonce__cote { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.cc-annonce__livraison .cc-livraison__intitule { margin: 0; font-size: var(--t-mention); font-weight: 600; opacity: .9; }
.cc-annonce__livraison .cc-livraison__dates {
  margin: .3rem 0 0;
  font-family: var(--f-titre);
  font-size: var(--t-titre-3);
  line-height: 1.08;
}

/* ─────────────────────────── Vitrine des cuvées ─────────────────────────── */

.cc-cuvees-vitrine { padding-block: var(--e-6); }
.cc-cuvees-vitrine__titre { font-size: var(--t-titre-2); margin-bottom: var(--e-4); }

.cc-cuvees-vitrine__grille {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}

.cc-cuvees-vitrine__suite { margin-top: var(--e-4); font-size: var(--t-petit); }

.cc-vignette { min-width: 0; }
.cc-vignette__lien { display: block; color: inherit; text-decoration: none; }

.cc-vignette__image {
  overflow: hidden;
  border-radius: 4px;
  background: var(--c-surface);
  aspect-ratio: 4 / 5;
  /* Une cuvée sans photo n'a aucun contenu à faire tenir : sans repli, le
     cadre s'effondrerait partout où aspect-ratio n'est pas honoré. */
  min-height: 12rem;
}
.cc-vignette__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-vignette__image--vide {
  background: var(--c-surface-alt);
  border: 1px dashed var(--c-filet);
}

.cc-vignette__nom {
  margin-top: var(--e-2);
  font-size: var(--t-titre-4);
  line-height: 1.1;
}
.cc-vignette__lien:hover .cc-vignette__nom { color: var(--c-vigne); }
.cc-vignette__millesime { color: var(--c-encre-attenuee); }

.cc-vignette__cepage { margin: .15rem 0 0; font-size: var(--t-mention); color: var(--c-encre-attenuee); }
.cc-vignette__prix   { margin: .15rem 0 0; font-size: var(--t-mention); color: var(--c-encre-douce); }

/* L'état de stock se lit à la couleur avant même d'être lu. */
.cc-vignette__stock {
  display: inline-block;
  margin: .5rem 0 0;
  padding: .2rem .7rem;
  border-radius: var(--r-pilule);
  font-size: var(--t-mention);
  font-weight: 600;
}
.cc-vignette--disponible   .cc-vignette__stock { background: var(--c-vigne-voile); color: var(--c-vigne); }
.cc-vignette--bientot_fini .cc-vignette__stock { background: #F5EEDC; color: #8A6410; }
.cc-vignette--epuise       .cc-vignette__stock { background: var(--c-surface-alt); color: var(--c-encre-attenuee); }
.cc-vignette--en_cuve      .cc-vignette__stock { background: var(--c-surface-alt); color: var(--c-encre-attenuee); }

.cc-vignette--epuise .cc-vignette__image { filter: saturate(.35) opacity(.75); }

/* Pastilles d'état sur la fiche de cuvée. */
.cc-pastille--disponible   { background: var(--c-vigne-voile); color: var(--c-vigne); }
.cc-pastille--bientot_fini { background: #F5EEDC; color: #8A6410; }
.cc-pastille--epuise,
.cc-pastille--en_cuve      { background: var(--c-surface-alt); color: var(--c-encre-attenuee); }

/* ─────────────────────────── Pages ordinaires ─────────────────────────── */

.cc-simple__tete {
  position: relative;
  overflow: hidden;
  padding-block: var(--e-5) var(--e-4);
}
.cc-simple__titre { max-width: 18ch; }
.cc-simple__chapo {
  margin-top: var(--e-3);
  max-width: 52ch;
  font-size: var(--t-grand);
  color: var(--c-encre-douce);
}

.cc-simple__visuel { margin: var(--e-4) auto 0; }
.cc-simple__visuel img {
  width: 100%;
  /* Une photo prise au téléphone est souvent en portrait : sans cadrage
     imposé, elle occupe la moitié de l'écran avant qu'on ait lu une ligne. */
  aspect-ratio: 16 / 9;
  max-height: 30rem;
  object-fit: cover;
  border-radius: 4px;
  filter: saturate(.5) contrast(1.04);
}

.cc-simple__corps { padding-block: var(--e-4) var(--e-7); }
.cc-simple__corps .cc-contenu > * + * { margin-top: var(--e-3); }
.cc-simple__corps .cc-contenu h2 { margin-top: var(--e-5); }

/* ───────────────────────────── Fiche de cuvée ───────────────────────────── */

.cc-cuvee-page__tete { position: relative; overflow: hidden; padding-block: var(--e-5) var(--e-5); }

.cc-cuvee-page__grille { display: grid; gap: var(--e-5); align-items: end; }

@media (min-width: 60rem) {
  .cc-cuvee-page__grille { grid-template-columns: 1fr minmax(0, 340px); gap: var(--e-7); }
}

.cc-cuvee-page__titre { margin-top: var(--e-3); font-size: var(--t-titre-1); line-height: var(--i-serre); letter-spacing: var(--l-titre); }
.cc-cuvee-page__millesime { color: var(--c-vigne); font-style: italic; }
.cc-cuvee-page__chapo { margin-top: var(--e-3); max-width: 48ch; font-size: var(--t-grand); color: var(--c-encre-douce); }

.cc-cuvee-page__visuel { position: relative; margin: 0; }
.cc-cuvee-page__visuel img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
@media (min-width: 60rem) { .cc-cuvee-page__visuel { transform: rotate(1.8deg); } }

.cc-cuvee-page__corps { padding-bottom: var(--e-6); }
.cc-cuvee-page__recit { min-width: 0; }
.cc-cuvee-page__cote { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }

.cc-cuvee-page__prevente-titre,
.cc-cuvee-page__prix-titre { font-size: var(--t-titre-4); margin-bottom: var(--e-2); }

.cc-cuvee-page__prevente p { font-size: var(--t-petit); opacity: .95; }
.cc-cuvee-page__prevente p + p { margin-top: var(--e-3); }

/* Bouton clair, pour les cartes vertes. */
.cc-bouton--clair { background: var(--c-fond); color: var(--c-vigne); }
.cc-bouton--clair:hover { background: #fff; color: var(--c-vigne-fonce); }

.cc-prix-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cc-prix-liste li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-3);
  padding: .7rem 0;
  border-bottom: 1px solid var(--c-filet);
  font-size: var(--t-petit);
}
.cc-prix-liste li:last-child { border-bottom: 0; }

.cc-cuvee-page__meme-prix {
  margin-top: var(--e-2);
  font-size: var(--t-mention);
  line-height: 1.45;
  color: var(--c-encre-attenuee);
}

.cc-cuvee-page__commander p { font-size: var(--t-petit); color: var(--c-encre-douce); }

/* ══════════════════════ Ce qu'il y a en cave ══════════════════════ */
/*
 * Le dispositif central du dessin, que j'avais manqué : chaque cuvée porte
 * une couleur qui teinte tout - le fond de sa carte, son quart-de-rond en
 * angle, son nom manuscrit, son libellé. Une cuvée épuisée retombe au gris.
 */

.cc-cave { padding-block: var(--e-7) 0; }

.cc-cave__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
}
.cc-cave__titre { font-size: clamp(2rem, 3.2vw, 2.875rem); line-height: 1.04; letter-spacing: -.025em; }
.cc-cave__lien  { font-size: var(--t-titre-4); text-decoration: underline; text-underline-offset: 4px; }

.cc-cave__chapo {
  margin-top: var(--e-2);
  max-width: 60ch;
  font-size: var(--t-corps);
  line-height: 1.55;
  color: var(--c-encre-douce);
}

.cc-cave__grille {
  display: grid;
  gap: var(--e-4);
  margin-top: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.cc-fiole {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 290px;
  padding: var(--e-5);
  border-radius: var(--r-carte);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform .15s ease;
}
.cc-fiole:hover { transform: translateY(-2px); color: inherit; }

/* Le quart-de-rond en angle, dans une teinte plus soutenue que le fond. */
.cc-fiole__coin {
  position: absolute;
  right: -60px;
  top: -50px;
  width: 200px;
  height: 190px;
  border-radius: 56% 44% 48% 52% / 44% 56% 44% 56%;
}

.cc-fiole > *:not(.cc-fiole__coin) { position: relative; }

.cc-fiole__libelle { font-size: var(--t-mention); font-weight: 600; }

.cc-fiole__etiquette {
  display: flex;
  height: 150px;
  margin: var(--e-4) 0 auto;
}
.cc-fiole__etiquette img {
  height: 100%;
  width: auto;
  background: #fff;
  border: 1px solid rgba(36, 33, 28, .14);
  transform: rotate(-1.6deg);
}

.cc-fiole__nom { margin-top: var(--e-4); font-size: 2.625rem; line-height: 1; }
.cc-fiole__prix { margin-top: .25rem; font-size: var(--t-petit); color: var(--c-encre-attenuee); }

/* Les quatre identités. */
.cc-fiole--vigne  { background: #EDF1EA; }
.cc-fiole--vigne  .cc-fiole__coin { background: var(--c-vigne); opacity: .24; }
.cc-fiole--vigne  .cc-fiole__libelle,
.cc-fiole--vigne  .cc-fiole__nom { color: var(--c-vigne); }

.cc-fiole--paille { background: #F6F0DF; }
.cc-fiole--paille .cc-fiole__coin { background: var(--c-paille); opacity: .42; border-radius: 44% 56% 58% 42% / 52% 44% 56% 48%; }
.cc-fiole--paille .cc-fiole__libelle,
.cc-fiole--paille .cc-fiole__nom { color: #7A5E12; }
.cc-fiole--paille .cc-fiole__etiquette img { transform: rotate(1.4deg); }

.cc-fiole--terre  { background: #F7EBE7; }
.cc-fiole--terre  .cc-fiole__coin { background: var(--c-terre); opacity: .30; border-radius: 52% 48% 42% 58% / 56% 46% 54% 44%; }
.cc-fiole--terre  .cc-fiole__libelle,
.cc-fiole--terre  .cc-fiole__nom { color: #9B432B; }
.cc-fiole--terre  .cc-fiole__etiquette img { transform: rotate(-1.2deg); }

.cc-fiole--eteint { background: #F1EFE8; color: var(--c-encre-attenuee); }
.cc-fiole--eteint .cc-fiole__coin { display: none; }
.cc-fiole--eteint .cc-fiole__etiquette img { opacity: .62; transform: rotate(1deg); }

/* ══════════════════════ Une terre que… ══════════════════════ */

.cc-amorce {
  display: grid;
  gap: var(--e-5);
  align-items: center;
  padding-block: var(--e-7) 0;
}

@media (min-width: 60rem) {
  .cc-amorce { grid-template-columns: 340px 1fr; gap: var(--e-7); }
}

.cc-amorce__visuel { position: relative; margin: 0; }
.cc-amorce__visuel img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  filter: saturate(.5) contrast(1.04);
}
@media (min-width: 60rem) { .cc-amorce__visuel { transform: rotate(-2deg); } }

.cc-amorce__titre { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.04; letter-spacing: -.025em; }
.cc-amorce__accent { font-style: italic; color: var(--c-vigne); }
.cc-amorce__chapo {
  margin-top: var(--e-3);
  max-width: 58ch;
  font-size: var(--t-grand);
  line-height: 1.62;
  color: var(--c-encre-douce);
}
.cc-amorce__texte p:last-child { margin-top: var(--e-4); }

/* ══════════════════════ Où me trouver ══════════════════════ */

.cc-trouver { padding-block: var(--e-7) var(--e-8); }

.cc-trouver__panneau {
  display: grid;
  gap: var(--e-5);
  padding: var(--e-5);
  border-radius: 28px;
  background: var(--c-vigne-voile);
}

@media (min-width: 60rem) {
  .cc-trouver__panneau { grid-template-columns: .8fr 1.2fr; gap: var(--e-7); padding: var(--e-6) var(--e-7); }
}

.cc-trouver__titre { font-size: clamp(1.75rem, 2.9vw, 2.625rem); line-height: 1.06; letter-spacing: -.02em; }
.cc-trouver__mot   { margin-top: var(--e-2); color: #4E4A42; }
.cc-trouver__mail  { margin-top: var(--e-3); font-size: var(--t-grand); font-weight: 600; }
.cc-trouver__mail a { color: inherit; text-decoration: none; }
.cc-trouver__mail a:hover { text-decoration: underline; }
.cc-trouver__tel   { margin-top: .25rem; font-size: var(--t-corps); color: var(--c-encre-douce); }
.cc-trouver__tel a { color: inherit; text-decoration: none; }

.cc-trouver__liste { display: grid; gap: .7rem; align-content: start; }

.cc-trouver__ligne {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: 14px;
  background: var(--c-fond);
  font-size: var(--t-corps);
}
.cc-trouver__note { color: var(--c-encre-attenuee); }

.cc-trouver__bouton {
  margin-top: .25rem;
  padding: var(--e-3) var(--e-4);
  border: 1.5px solid var(--c-vigne);
  border-radius: 14px;
  color: var(--c-vigne);
  font-size: var(--t-petit);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  min-height: var(--cible-min);
  display: grid;
  place-items: center;
}
.cc-trouver__bouton:hover { background: var(--c-vigne); color: var(--c-fond); }

/* ══════════════════════ La liste des cuvées ══════════════════════ */

.cc-cuvees-archive__tete {
  position: relative;
  overflow: hidden;
  padding-block: var(--e-5) var(--e-5);
}
/* Borner la largeur du texte, pas celle du bloc : .cc-page se centre, et un
   max-width posé dessus décalerait tout l'en-tête vers la droite. */
.cc-cuvees-archive__tete > .cc-sur-tache { max-width: 1000px; }
.cc-cuvees-archive__titre { font-size: clamp(2.75rem, 6.1vw, 5.5rem); line-height: .96; letter-spacing: -.035em; }
.cc-cuvees-archive__chapo {
  margin-top: var(--e-4);
  max-width: 54ch;
  font-size: var(--t-grand);
  line-height: 1.58;
  color: var(--c-encre-douce);
}

.cc-rangs { display: grid; gap: var(--e-3); }

/* Le nom d'une famille ouvre son groupe : il n'a pas la même fonction qu'un
   titre de page, on le pose plus discrètement, comme une intercalaire. */
.cc-rangs__famille {
  margin: var(--e-5) 0 0;
  font-family: var(--f-titre);
  font-size: var(--t-titre-3);
  line-height: 1.1;
  color: var(--c-encre);
}
.cc-rangs__famille:first-child { margin-top: 0; }

/*
 * Cinq colonnes à partir de 68rem : l'étiquette, le nom, le terroir, les
 * prix, la suite. En dessous, tout s'empile - un rang de cinq colonnes sur
 * un téléphone ne serait qu'un tableau illisible.
 */
.cc-rang {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--e-4);
  align-items: center;
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-carte);
}

/* Entre les deux, sur une tablette, il y a la place pour l'étiquette à
   gauche et le texte à droite, avec les prix et la disponibilité côte à
   côte en bas. Empilé, ce rang laissait la moitié de la page vide. */
@media (min-width: 45rem) and (max-width: 67.99rem) {
  .cc-rang { grid-template-columns: 150px minmax(0, 1fr) 170px; }
  /* Sans lignes explicites, « 1 / -1 » ne couvre qu'une ligne : on nomme
     donc chaque place plutôt que de laisser la grille improviser. */
  .cc-rang__etiquette { grid-column: 1; grid-row: 1 / span 3; }
  .cc-rang__identite  { grid-column: 2 / -1; grid-row: 1; }
  .cc-rang__terroir   { grid-column: 2 / -1; grid-row: 2; }
  .cc-rang__prix      { grid-column: 2; grid-row: 3; }
  .cc-rang__suite     { grid-column: 3; grid-row: 3; }
}

@media (min-width: 68rem) {
  /* L'étiquette garde ses 120 px, mais sa colonne en fait 150 : penchée de
     1,6°, sa boîte tournée déborde de deux pixels, et le nom manuscrit qui
     suit - dont l'accent du « à » avance encore - venait buter dessus. Les
     trente pixels de rabiot tombent à droite de l'image, là où il les faut. */
  .cc-rang { grid-template-columns: 150px 200px minmax(0, 1fr) 190px 190px; gap: var(--e-5); }
}

.cc-rang__coin {
  position: absolute;
  left: -40px;
  top: -60px;
  width: 220px;
  height: 200px;
  border-radius: 56% 44% 48% 52% / 44% 56% 44% 56%;
}

.cc-rang > *:not(.cc-rang__coin) { position: relative; min-width: 0; }

.cc-rang__etiquette img {
  width: 100%;
  max-width: 120px;
  /* Les étiquettes sont peintes à la main : leurs formats varient du simple
     au double. Sans hauteur bornée, la plus haute étire son rang et la liste
     perd son rythme. */
  max-height: 150px;
  object-fit: contain;
  object-position: center;
  background: #fff;
  border: 1px solid rgba(36, 33, 28, .14);
  transform: rotate(-1.6deg);
}

.cc-rang__nom { font-size: 2.625rem; line-height: 1; }
.cc-rang__nom a { color: inherit; text-decoration: none; }
.cc-rang__nom a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cc-rang__libelle { margin: .4rem 0 0; font-size: var(--t-mention); font-weight: 600; }

.cc-rang__parcelle {
  margin: 0;
  font-family: var(--f-titre);
  font-size: var(--t-titre-3);
  line-height: 1.08;
  color: var(--c-encre);
}
.cc-rang__caractere { margin: .4rem 0 0; font-size: var(--t-petit); line-height: 1.45; color: #4E4A42; }

.cc-rang__prix p { margin: 0; font-size: var(--t-petit); line-height: 1.5; }
.cc-rang__prix-fort { font-weight: 600; color: var(--c-encre); }
.cc-rang__prix-autre { color: var(--c-encre-attenuee); }

.cc-rang__suite { text-align: left; }
@media (min-width: 68rem) { .cc-rang__suite { text-align: right; } }

.cc-rang__etat    { margin: .5rem 0 0; font-size: var(--t-petit); font-weight: 600; color: #4E4A42; }
.cc-rang__mention { margin: .15rem 0 0; font-size: var(--t-mention); line-height: 1.4; color: var(--c-encre-attenuee); }
.cc-rang__bouton  { margin-top: .6rem; min-height: 48px; padding: 0 var(--e-4); font-size: var(--t-petit); }

/* L'indicateur de stock : trois barres, remplies selon ce qu'il reste. */
.cc-barres { display: flex; gap: 4px; }
@media (min-width: 68rem) { .cc-barres { justify-content: flex-end; } }

.cc-barres__barre {
  width: 26px;
  height: 8px;
  border-radius: 4px;
  background: var(--c-filet-fort);
}

/* Teintes des rangs, mêmes identités que les cartes de l'accueil. */
.cc-rang--vigne  { background: #EDF1EA; }
.cc-rang--vigne  .cc-rang__coin { background: var(--c-vigne); opacity: .18; }
.cc-rang--vigne  .cc-rang__nom,
.cc-rang--vigne  .cc-rang__libelle { color: var(--c-vigne); }
.cc-rang--vigne  .cc-barres__barre.est-pleine { background: var(--c-vigne); }

.cc-rang--paille { background: #F6F0DF; }
.cc-rang--paille .cc-rang__coin { background: var(--c-paille); opacity: .34; border-radius: 44% 56% 58% 42% / 52% 44% 56% 48%; }
.cc-rang--paille .cc-rang__nom,
.cc-rang--paille .cc-rang__libelle { color: #7A5E12; }
.cc-rang--paille .cc-barres__barre.est-pleine { background: #7A5E12; }
.cc-rang--paille .cc-rang__etiquette img { transform: rotate(1.4deg); }

.cc-rang--terre  { background: #F7EBE7; }
.cc-rang--terre  .cc-rang__coin { background: var(--c-terre); opacity: .26; border-radius: 52% 48% 42% 58% / 56% 46% 54% 44%; }
.cc-rang--terre  .cc-rang__nom,
.cc-rang--terre  .cc-rang__libelle { color: #9B432B; }
.cc-rang--terre  .cc-barres__barre.est-pleine { background: #9B432B; }
.cc-rang--terre  .cc-rang__etiquette img { transform: rotate(-1.2deg); }

.cc-rang--eteint { background: #F1EFE8; color: var(--c-encre-attenuee); }
.cc-rang--eteint .cc-rang__parcelle,
.cc-rang--eteint .cc-rang__caractere,
.cc-rang--eteint .cc-rang__prix p,
.cc-rang--eteint .cc-rang__etat { color: var(--c-encre-attenuee); }
.cc-rang--eteint .cc-rang__etiquette img { opacity: .62; transform: rotate(1deg); }
.cc-rang--eteint .cc-barres__barre { background: #DCD8CC; }

/* ── Les étiquettes en éventail ── */

.cc-eventail {
  display: grid;
  gap: var(--e-5);
  align-items: center;
  padding-block: var(--e-7) var(--e-8);
}

@media (min-width: 60rem) {
  .cc-eventail { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--e-7); }
}

.cc-eventail__titre { font-size: var(--t-titre-2); }
.cc-eventail__texte p { margin-top: var(--e-2); max-width: 56ch; font-size: var(--t-grand); line-height: 1.6; color: var(--c-encre-douce); }

.cc-eventail__images { position: relative; }
@media (min-width: 60rem) { .cc-eventail__images { transform: rotate(1.6deg); } }

.cc-eventail__rangee {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  justify-content: center;
}
.cc-eventail__rangee img {
  width: auto;
  /* La hauteur suit l'écran, la largeur suit la colonne : sur grand écran
     l'éventail tient dans 380 px, et trois étiquettes hautes en sortaient.
     Les deux bornes ensemble, et l'image se met à l'échelle sans se
     déformer - c'est la plus serrée des deux qui décide. */
  max-width: 31%;
  background: #fff;
  border: 1px solid rgba(36, 33, 28, .14);
}
/* Les trois étiquettes restent côte à côte : c'est ce qui fait l'éventail,
   les empiler n'aurait plus de sens. Leur hauteur suit donc la largeur de
   l'écran tant qu'il est étroit, et retrouve la taille de la maquette dès
   qu'il y a la place. Sans cela, sur un téléphone, la troisième sortait de
   la page et faisait défiler tout le site sur le côté. */
.cc-eventail__rangee { --etiquette: clamp(96px, 24vw, 180px); }

.cc-eventail__rangee img:nth-child(1) { max-height: var(--etiquette); transform: rotate(-2.4deg); }
.cc-eventail__rangee img:nth-child(2) { max-height: calc(var(--etiquette) * 1.09); transform: rotate(1.6deg); }
.cc-eventail__rangee img:nth-child(3) { max-height: calc(var(--etiquette) * .72); transform: rotate(-1.2deg); }

/* ══════════════════════ Fiche de cuvée ══════════════════════ */

.cc-fil { padding-block: var(--e-3) 0; font-size: var(--t-mention); color: var(--c-encre-attenuee); max-width: none; }
.cc-fil a { color: inherit; }

.cc-cuvee-page__parcelle {
  margin-top: .25rem;
  font-family: var(--f-titre);
  font-style: italic;
  font-size: clamp(1.75rem, 3.6vw, 3.25rem);
  line-height: 1;
  color: var(--c-vigne);
}
.cc-cuvee-page__note {
  margin-top: var(--e-3);
  max-width: 46ch;
  font-size: var(--t-grand);
  line-height: 1.58;
  color: var(--c-encre-douce);
}

.cc-cuvee-page__cote-visuel { display: grid; gap: var(--e-4); min-width: 0; }
@media (min-width: 60rem) { .cc-cuvee-page__cote-visuel { transform: rotate(2.2deg); } }
@media (min-width: 60rem) { .cc-cuvee-page__visuel { transform: none; } }

.cc-cuvee-page__etiquette { display: flex; align-items: flex-end; gap: var(--e-3); }
.cc-cuvee-page__etiquette img {
  max-height: 150px;
  width: auto;
  background: #fff;
  border: 1px solid rgba(36, 33, 28, .14);
  transform: rotate(-2.6deg);
}
.cc-cuvee-page__etiquette p { margin: 0 0 .5rem; max-width: 14ch; font-size: var(--t-grand); color: #4A4531; }

.cc-cuvee-page__accroche {
  font-family: var(--f-titre);
  font-size: var(--t-titre-2);
  line-height: 1.12;
  letter-spacing: -.02em;
  /* 22ch en Instrument Serif donne des lignes de cinq mots : le « ch » se
     mesure sur le zéro, étroit dans cette fonte. */
  max-width: 28ch;
  color: var(--c-encre);
  margin-bottom: var(--e-4);
}

.cc-cuvee-page__retour {
  margin-top: var(--e-6);
  padding-top: var(--e-4);
  border-top: 1px solid var(--c-filet);
  font-size: var(--t-petit);
}

@media (min-width: 60rem) {
  .cc-cuvee-page__corps { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--e-7); align-items: start; }
  .cc-cuvee-page__cote { position: sticky; top: var(--e-4); }
}
.cc-cuvee-page__recit { max-width: 660px; min-width: 0; }

/* ── « Ce qu'il en reste » ── */

.cc-reste {
  position: relative;
  overflow: hidden;
  padding: var(--e-5);
  border: 2px solid var(--c-vigne);
  border-radius: var(--r-carte);
  background: var(--c-surface);
}
.cc-reste--eteint { border-color: var(--c-filet-marque); }

.cc-reste__intitule { margin: 0; font-size: var(--t-mention); font-weight: 600; color: var(--c-vigne); }
.cc-reste--eteint .cc-reste__intitule { color: var(--c-encre-attenuee); }

.cc-reste__barres { display: flex; gap: 6px; margin-top: var(--e-3); }
.cc-reste__barre { flex: 1; height: 14px; border-radius: 7px; background: var(--c-surface-alt); }
.cc-reste__barre.est-pleine { background: var(--c-vigne); }

.cc-reste__phrase {
  margin-top: var(--e-3);
  font-family: var(--f-titre);
  font-size: var(--t-titre-3);
  line-height: 1.1;
}
.cc-reste__texte { margin-top: var(--e-3); font-size: var(--t-petit); line-height: 1.55; color: var(--c-encre-douce); }

.cc-reste__facons { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: grid; gap: .75rem; }
.cc-reste__facons li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--t-petit);
  line-height: 1.45;
}
.cc-reste__facons li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c-vigne);
}

.cc-reste__mail { margin-top: var(--e-4); font-size: var(--t-grand); font-weight: 600; }
.cc-reste__mail a { color: inherit; text-decoration: none; }
.cc-reste__mail a:hover { text-decoration: underline; }
.cc-reste__tel  { margin-top: .15rem; font-size: var(--t-grand); color: var(--c-encre-douce); }
.cc-reste__tel a { color: inherit; text-decoration: none; }

.cc-reste__bouton {
  display: grid;
  place-items: center;
  min-height: var(--cible-min);
  margin-top: var(--e-3);
  padding: var(--e-3);
  border: 1.5px solid var(--c-encre);
  border-radius: var(--r-pilule);
  color: var(--c-encre);
  font-size: var(--t-petit);
  font-weight: 500;
  text-decoration: none;
}
.cc-reste__bouton:hover { background: var(--c-encre); color: var(--c-fond); }

/* ── Le prix, si vous venez ── */

.cc-prix-carte { padding: var(--e-4) var(--e-5); border-radius: var(--r-carte); background: #F6F0DF; }
.cc-prix-carte__intitule { margin: 0; font-size: var(--t-mention); color: var(--c-encre-attenuee); }
.cc-prix-carte__liste { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: grid; gap: .2rem; }
.cc-prix-carte__liste li { font-size: var(--t-grand); line-height: 1.5; }
.cc-prix-carte__mention { margin-top: var(--e-3); font-size: var(--t-mention); line-height: 1.45; color: var(--c-encre-douce); }

/* ── L'appel vers la prévente ── */

.cc-appel-prevente {
  display: block;
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-carte);
  background: var(--c-vigne);
  color: var(--c-fond);
  text-decoration: none;
}
.cc-appel-prevente:hover { background: var(--c-vigne-fonce); color: var(--c-fond); }
.cc-appel-prevente__titre { display: block; font-family: var(--f-titre); font-size: var(--t-titre-4); line-height: 1.1; }
.cc-appel-prevente__texte { display: block; margin-top: .5rem; font-size: var(--t-petit); line-height: 1.5; opacity: .92; }
.cc-appel-prevente__bouton {
  display: inline-block;
  margin-top: var(--e-3);
  padding: .8rem 1.4rem;
  border-radius: var(--r-pilule);
  background: var(--c-fond);
  color: var(--c-encre);
  font-size: var(--t-petit);
  font-weight: 600;
}

/* ══════════════════════ Pages longues ══════════════════════ */

.cc-simple__entete { max-width: 1000px; }
.cc-simple__accent { font-style: italic; color: var(--c-vigne); }
.cc-simple__mot { margin-top: var(--e-3); font-size: var(--t-titre-3); color: #4E4A42; }

/* Le sommaire ne s'installe à gauche que s'il y a la place. */
.cc-simple__corps.a-sommaire { display: grid; gap: var(--e-5); }

@media (min-width: 62rem) {
  .cc-simple__corps.a-sommaire { grid-template-columns: 230px minmax(0, 1fr); gap: var(--e-7); align-items: start; }
  .cc-simple__cote { position: sticky; top: var(--e-4); }
}

.cc-simple__texte { max-width: 660px; }

.cc-sommaire__titre { margin: 0; font-size: var(--t-titre-4); }
.cc-sommaire__liste { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: grid; gap: .6rem; }
.cc-sommaire__liste a {
  font-size: var(--t-petit);
  color: var(--c-encre-attenuee);
  text-decoration: none;
}
.cc-sommaire__liste a:hover { color: var(--c-vigne); text-decoration: underline; }

/* Le texte long : plus grand et plus aéré que le corps courant. */
.cc-simple__texte > h2 {
  margin-top: var(--e-6);
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  line-height: 1.1;
  scroll-margin-top: var(--e-4);
}
.cc-simple__texte > h2:first-child { margin-top: 0; }
.cc-simple__texte > p { margin-top: var(--e-3); font-size: var(--t-grand); line-height: 1.62; color: var(--c-encre-douce); }

/* Le premier paragraphe fait office de chapô. */
.cc-simple__texte > p:first-child {
  font-size: clamp(1.3rem, 2vw, 1.6875rem);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--c-encre);
}

/* ── Un mot à la main ── */

.cc-mot-main {
  position: relative;
  margin: var(--e-6) 0 !important;
  padding: var(--e-5);
  border-radius: var(--r-carte);
  overflow: hidden;
}
.cc-mot-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-paille);
  opacity: .28;
  border-radius: 48% 52% 56% 44% / 58% 42% 58% 42%;
}
.cc-mot-main p {
  position: relative;
  margin: 0;
  max-width: none;
  font-family: var(--f-main);
  font-size: clamp(1.6rem, 2.6vw, 2.125rem);
  line-height: 1.25;
  color: var(--c-encre);
}

/* ── Le domaine en quelques chiffres ── */

.cc-chiffres-cles {
  margin: var(--e-6) 0 !important;
  padding: var(--e-5);
  border-radius: var(--r-carte);
  background: var(--c-vigne-voile);
}
.cc-chiffres-cles__titre {
  margin: 0 0 var(--e-3) !important;
  font-family: var(--f-main);
  font-size: var(--t-titre-4);
  color: var(--c-vigne);
}
.cc-chiffres-cles__grille { gap: var(--e-4) var(--e-6) !important; margin-bottom: var(--e-4) !important; }
.cc-chiffres-cles__grille:last-child { margin-bottom: 0 !important; }
.cc-chiffres-cles__nombre {
  margin: 0 !important;
  font-family: var(--f-titre);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--c-encre);
}
.cc-chiffres-cles__legende { margin: .25rem 0 0 !important; font-size: var(--t-petit) !important; color: #4E4A42 !important; }

/* ── Une année de travail ── */

.cc-annee { margin: var(--e-5) 0 !important; display: grid; gap: .75rem; }

.cc-annee__ligne {
  display: grid;
  gap: .35rem var(--e-4);
  padding: var(--e-3) var(--e-4);
  border-radius: 18px;
  margin: 0 !important;
}
.cc-annee__ligne:first-child { background: var(--c-vigne-voile); }

@media (min-width: 45rem) {
  .cc-annee__ligne { grid-template-columns: 150px minmax(0, 1fr); }
}

.cc-annee__periode { margin: 0 !important; font-size: var(--t-mention) !important; font-weight: 600; color: var(--c-vigne) !important; }
.cc-annee__texte   { margin: 0 !important; font-size: var(--t-corps) !important; line-height: 1.5; color: var(--c-encre) !important; }