/**
 * La page de prévente.
 *
 * Mobile d'abord : la colonne d'action passe sous le récit tant que la place
 * manque, et ne devient collante qu'au-delà de 60rem. Les formes organiques
 * de la maquette ne s'affichent qu'à partir de cette même largeur - sur un
 * téléphone elles ne feraient que du bruit derrière le texte.
 */

/* ─────────────────────────── Bandeau d'ouverture ─────────────────────────── */

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

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

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

.cc-prevente__titre {
  margin-top: var(--e-3);
  font-size: var(--t-hero);
  line-height: var(--i-serre);
  letter-spacing: var(--l-titre);
}

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

.cc-prevente__visuel { position: relative; margin: 0; }
.cc-prevente__visuel img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 3px;
  background: var(--c-surface);
}

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

/* Variantes de pastille selon l'état. */
.cc-pastille--recouvrement { background: #F5EEDC; color: #8A6410; }
.cc-pastille--annulee      { background: #F6E7E2; color: #93412C; }
.cc-pastille--livree,
.cc-pastille--lancee       { background: var(--c-vigne-voile); color: var(--c-vigne); }

/* ──────────────────────────────── Corps ──────────────────────────────── */

.cc-prevente__corps { padding-bottom: var(--e-8); }
.cc-prevente__recit { min-width: 0; }
.cc-prevente__cote  { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }

/* ───────────────────────────── Carte livraison ───────────────────────────── */

.cc-livraison { position: relative; overflow: hidden; }
.cc-livraison__intitule { margin: 0; font-size: var(--t-mention); font-weight: 600; opacity: .9; }
.cc-livraison__dates {
  margin: .3rem 0 0;
  font-family: var(--f-titre);
  font-size: var(--t-titre-3);
  line-height: 1.08;
  letter-spacing: var(--l-titre-s);
}
.cc-livraison__note,
.cc-livraison__production {
  margin: .65rem 0 0;
  font-size: var(--t-petit);
  line-height: 1.45;
  opacity: .92;
  max-width: none;
}
.cc-livraison__production { padding-top: .65rem; border-top: 1px solid rgba(251, 247, 236, .28); }

/* ────────────────────────── Comment ça se passe ────────────────────────── */

/* Pas de tache décorative ici, contrairement aux cartes de la confirmation :
   celles-là logent leur voile dans un coin, où le bord de la carte le rogne
   et le transforme en texture. Au milieu d'une liste, rien ne le cadre - il
   passait sous le coin arrondi de la première étape et les deux courbes
   teintées se croisaient. La numérotation en Caveat suffit à animer le bloc. */
.cc-etapes { margin-top: var(--e-6); }
.cc-etapes__titre { font-size: var(--t-titre-2); }
.cc-etapes__liste { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: grid; gap: .75rem; }

.cc-etape {
  display: flex;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: 18px;
}
.cc-etape:first-child { background: var(--c-vigne-voile); }

.cc-etape__numero {
  flex: none;
  width: 2rem;
  font-family: var(--f-main);
  font-size: 2.25rem;
  line-height: .9;
  color: var(--c-vigne);
}
.cc-etape__texte { font-size: var(--t-corps); line-height: 1.5; }

.cc-etapes__mot { margin-top: var(--e-4); max-width: 36ch; }

/* ───────────────────────── Étiquette et fiche ───────────────────────── */

.cc-etiquette {
  display: grid;
  gap: var(--e-4);
  align-items: center;
  margin-top: var(--e-6);
}

@media (min-width: 45rem) {
  .cc-etiquette { grid-template-columns: 280px 1fr; gap: var(--e-6); }
}

/* Empilée, l'image prenait toute la largeur : « object-fit: contain » posait
   l'étiquette, haute et étroite, au milieu d'un grand carré blanc, et le mot
   qui l'accompagne se retrouvait une demi-page plus bas. Une colonne à la
   mesure de l'étiquette suffit, et le mot revient à côté d'elle. */
@media (max-width: 44.99rem) {
  .cc-etiquette { grid-template-columns: 116px minmax(0, 1fr); gap: var(--e-4); }
  .cc-etiquette__image img { max-height: 150px; }
}

.cc-etiquette__image { position: relative; margin: 0; }
.cc-etiquette__image img {
  position: relative;
  width: 100%;
  max-height: 190px;
  object-fit: contain;
  background: var(--c-surface);
  border-radius: 4px;
}
@media (min-width: 45rem) { .cc-etiquette__image { transform: rotate(-2deg); } }

.cc-etiquette__mot p:last-child { margin-top: .4rem; font-size: var(--t-corps); color: var(--c-encre-douce); }

/* ───────────────────────── Formulaire d'engagement ───────────────────────── */

.cc-engagement__titre { font-size: var(--t-titre-3); }

.cc-engagement__bloc { border: 0; margin: var(--e-4) 0 0; padding: 0; min-width: 0; }
.cc-engagement__bloc legend {
  padding: 0;
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--c-encre);
  /* L'intitulé devient une tête d'étape : il lui faut toute la largeur, que
     « legend » ne prend pas de lui-même. */
  width: 100%;
}

/*
 * La tête d'une étape repliable. Elle n'existe que si le script s'exécute :
 * sans lui, l'intitulé reste un intitulé et les trois blocs sont ouverts.
 */
.cc-engagement__tete {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--c-filet);
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.cc-engagement__bloc:first-of-type .cc-engagement__tete { border-top: 0; }
.cc-engagement__tete:hover .cc-engagement__tete-nom { color: var(--c-vigne); }
.cc-engagement__bloc.est-ouverte .cc-engagement__tete-nom { color: var(--c-vigne); }

/* Ce qui a été choisi, rappelé à droite quand l'étape est refermée : on sait
   ce qu'on a fait sans avoir à la rouvrir. */
.cc-engagement__resume {
  margin-left: auto;
  font-weight: 400;
  font-size: var(--t-mention);
  color: var(--c-encre-attenuee);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 55%;
}
.cc-engagement__bloc.est-ouverte .cc-engagement__resume { display: none; }

/* Le chevron, comme ailleurs sur le site : deux traits d'un carré. */
.cc-engagement__tete::after {
  content: "";
  flex: none;
  width: .4rem;
  height: .4rem;
  margin-top: -.18rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.cc-engagement__bloc.est-ouverte .cc-engagement__tete::after {
  margin-top: .14rem;
  transform: rotate(-135deg);
}

.cc-engagement__corps { padding-bottom: var(--e-3); }

.cc-engagement__erreurs {
  margin-top: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-left: 4px solid #93412C;
  border-radius: 0 var(--r-bloc) var(--r-bloc) 0;
  background: #F6E7E2;
  color: #6E3020;
}
.cc-engagement__erreurs ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.cc-engagement__erreurs li { margin-bottom: .3rem; }

.cc-formats { display: grid; gap: .6rem; margin-top: .6rem; }

.cc-format {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: .8rem 1rem;
  border: 1.5px solid var(--c-filet-fort);
  border-radius: var(--r-bloc);
}
.cc-format:focus-within { border-color: var(--c-vigne); }

.cc-format__nom { flex: 1; min-width: 0; display: grid; gap: .1rem; cursor: pointer; }
.cc-format__nom > span:first-child { font-size: var(--t-petit); font-weight: 500; }
.cc-format__prix { font-size: var(--t-mention); color: var(--c-encre-attenuee); }

.cc-format__quantite { flex: none; }
.cc-format__quantite input {
  width: 5.5rem;
  min-height: 52px;
  padding: 0 .5rem;
  border: 1.5px solid var(--c-filet-fort);
  border-radius: var(--r-pilule);
  background: var(--c-surface);
  color: var(--c-encre);
  font-size: var(--t-corps);
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cc-engagement__total {
  margin: var(--e-3) 0 0;
  padding-top: .85rem;
  border-top: 1.5px solid var(--c-filet);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e-3);
  font-size: var(--t-petit);
  font-weight: 600;
}
.cc-engagement__total-vide { font-weight: 400; color: var(--c-encre-attenuee); }
.cc-engagement__total-somme {
  font-family: var(--f-titre);
  font-size: var(--t-titre-4);
  font-weight: 400;
  color: var(--c-vigne);
  white-space: nowrap;
}

/* ── Points de retrait ── */

.cc-retraits { display: grid; gap: .5rem; margin-top: .6rem; }

.cc-retrait {
  display: flex;
  gap: .8rem;
  padding: .8rem 1rem;
  border: 1.5px solid var(--c-filet-fort);
  border-radius: var(--r-bloc);
  cursor: pointer;
}
.cc-retrait:hover { border-color: var(--c-vigne); }
.cc-retrait:has(input:checked) { border-color: var(--c-vigne); background: var(--c-vigne-voile); }
.cc-retrait:focus-within { outline: 3px solid var(--c-encre); outline-offset: 2px; }

.cc-retrait input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: .15rem 0 0;
  accent-color: var(--c-vigne);
}

.cc-retrait__texte { display: grid; gap: .1rem; min-width: 0; }
.cc-retrait__nom { font-size: var(--t-petit); font-weight: 500; }
.cc-retrait__detail { font-size: var(--t-mention); line-height: 1.4; color: var(--c-encre-attenuee); }

.cc-engagement__champs { display: grid; gap: var(--e-3); margin-top: .6rem; }

/* Le choix de l'étape se rattache au point « tournée » : un liseré vert le
   pose sous la liste comme une précision, pas comme une question de plus. */
.cc-engagement__etape {
  margin-top: .75rem;
  padding: .85rem 1rem;
  border-left: 3px solid var(--c-vigne);
  border-radius: 0 var(--r-bloc) var(--r-bloc) 0;
  background: var(--c-vigne-voile);
}
.cc-engagement__etape .cc-champ__aide a { white-space: nowrap; }

/* Le mot pour Norbert, après les coordonnées. */
.cc-engagement__remarque { margin-top: var(--e-4); }
.cc-engagement__remarque textarea { min-height: 5rem; }
.cc-champ__facultatif { font-weight: 400; color: var(--c-encre-attenuee); }

/* ── Paiement et cases ── */

.cc-engagement__paiement { margin-top: var(--e-4); }
.cc-engagement__paiement-titre { font-size: var(--t-petit); font-weight: 600; margin-bottom: .4rem; }
.cc-engagement__paiement p { font-size: var(--t-mention); line-height: 1.5; color: var(--c-encre-douce); }
.cc-engagement__paiement p + p { margin-top: .5rem; }

.cc-cases { display: grid; gap: .6rem; margin-top: var(--e-3); }

.cc-case {
  position: relative;
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: .9rem 1rem;
  border-radius: var(--r-bloc);
  background: var(--c-vigne-voile);
  cursor: pointer;
}

/* Le libellé ne couvre que sa phrase, pour que le nom lu à voix haute soit
   « J'accepte les conditions de vente. » et pas la mention qui suit. Mais on
   veut garder tout le pavé teinté cliquable : une case de 27 px se rate. Ce
   calque invisible rend le libellé aussi large que le pavé, et le lien vers
   les conditions repasse au-dessus pour rester cliquable pour lui-même. */
.cc-case label::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cc-case a { position: relative; }
.cc-case:focus-within { outline: 3px solid var(--c-encre); outline-offset: 2px; }
.cc-case input { flex: none; width: 27px; height: 27px; margin: .1rem 0 0; accent-color: var(--c-vigne); }
.cc-case > span { display: grid; gap: .15rem; font-size: var(--t-petit); line-height: 1.42; }
.cc-case > span > span { font-size: var(--t-mention); color: var(--c-encre-douce); }

.cc-engagement__valider { margin-top: var(--e-3); min-height: 64px; font-size: var(--t-corps); }
.cc-engagement__pied {
  margin-top: .6rem;
  font-size: var(--t-mention);
  line-height: 1.45;
  color: var(--c-encre-attenuee);
}

/* Piège à robots : hors de l'écran plutôt que display:none, que certains
   automates savent détecter. */
.cc-piege {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ──────────────────────── Prévente close ou terminée ──────────────────────── */

.cc-close__titre { font-size: var(--t-titre-3); margin-bottom: var(--e-2); }
.cc-close p { font-size: var(--t-petit); line-height: 1.5; color: var(--c-encre-douce); }
.cc-close p + p { margin-top: .6rem; }

.cc-close__limite {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin: var(--e-3) 0;
  padding: .85rem 1rem;
  border-radius: var(--r-bloc);
  background: var(--c-vigne-voile);
}
.cc-close__limite span { color: var(--c-vigne); font-weight: 600; }
.cc-close__limite strong {
  font-family: var(--f-titre);
  font-size: var(--t-titre-4);
  font-weight: 400;
  color: var(--c-vigne);
}

.cc-close__aide { font-size: var(--t-mention) !important; color: var(--c-encre-attenuee) !important; }

.cc-close--recouvrement { border-color: #E4D5AE; background: #FDF8EA; }
.cc-close--annulee      { border-color: #E8CFC6; background: #FBF1ED; }

/* Le diagnostic réservé à Norbert : ton d'alerte, pour qu'il se distingue des
   panneaux que voient les visiteurs. */
.cc-close--reparer { border-color: #C9A227; background: #FCF6E3; }
.cc-close__manques { margin: var(--e-3) 0 0; padding-left: 1.2rem; font-size: var(--t-petit); line-height: 1.5; }
.cc-close__manques li + li { margin-top: .4rem; }
.cc-close__manques a { display: inline-block; margin-top: .2rem; }

/* ────────────────────────────── Remerciement ────────────────────────────── */

.cc-merci {
  margin-bottom: var(--e-5);
  padding: var(--e-4) var(--e-5);
  border-left: 5px solid var(--c-vigne);
  border-radius: 0 var(--r-carte) var(--r-carte) 0;
  background: var(--c-vigne-voile);
}
.cc-merci:focus { outline: none; }
.cc-merci__titre { font-size: var(--t-titre-2); color: var(--c-vigne); }
.cc-merci__resume { margin-top: .5rem; font-size: var(--t-grand); }
.cc-merci__rappel { margin-top: .7rem; font-size: var(--t-petit); line-height: 1.5; }
.cc-merci__mail   { margin-top: .5rem; font-size: var(--t-mention); color: var(--c-encre-douce); }

/* ══════════════════════ La confirmation ══════════════════════ */

.cc-confirmation__tete { position: relative; overflow: hidden; padding-block: var(--e-5) var(--e-5); }
.cc-confirmation__entete { max-width: 1000px; }

.cc-confirmation__jeton {
  display: inline-block;
  padding: .6rem 1.1rem;
  border-radius: var(--r-pilule);
  background: var(--c-vigne);
  color: var(--c-fond);
  font-size: var(--t-mention);
  font-weight: 600;
}
.cc-confirmation__titre { margin-top: var(--e-4); font-size: clamp(2.75rem, 6.1vw, 5.5rem); line-height: .96; letter-spacing: -.035em; }
.cc-confirmation__mot   { margin-top: var(--e-3); max-width: 26ch; font-size: var(--t-titre-3); line-height: 1.25; }

.cc-confirmation__corps { display: grid; gap: var(--e-5); padding-bottom: var(--e-8); }

@media (min-width: 62rem) {
  .cc-confirmation__corps { grid-template-columns: minmax(0, 1fr) 430px; gap: var(--e-7); align-items: start; }
}

.cc-confirmation__recit { max-width: 680px; min-width: 0; }
.cc-confirmation__cote  { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.cc-confirmation__contact {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--c-filet);
  max-width: 60ch;
  font-size: var(--t-petit);
  line-height: var(--i-corps);
  color: var(--c-encre-douce);
}
.cc-confirmation__contact a { color: var(--c-vigne); white-space: nowrap; }
.cc-confirmation__mail { font-size: var(--t-mention); color: var(--c-encre-attenuee); }

/* ── Le récapitulatif ── */

.cc-recap {
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--c-filet);
  border-radius: var(--r-carte);
  background: var(--c-surface);
}
.cc-recap__titre { font-size: var(--t-titre-3); }
.cc-recap__liste { margin: var(--e-3) 0 0; }

.cc-recap__ligne {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--c-filet);
  font-size: var(--t-petit);
}
.cc-recap__ligne dt { color: var(--c-encre-attenuee); }
.cc-recap__ligne dd { margin: 0; text-align: right; }
.cc-recap__detail { display: block; margin-top: .15rem; font-size: var(--t-mention); font-weight: 400; color: var(--c-encre-attenuee); }
.cc-recap__message { font-style: italic; overflow-wrap: anywhere; }

.cc-recap__cuvee { display: flex; align-items: center; gap: var(--e-3); font-weight: 600; }
.cc-recap__cuvee img { height: 56px; width: auto; background: #fff; border: 1px solid rgba(36, 33, 28, .14); }

.cc-recap__ligne--total { border-bottom: 0; padding-bottom: 0; font-size: var(--t-titre-4); font-weight: 600; }
.cc-recap__ligne--total dt { color: var(--c-encre); }
.cc-recap__ligne--total dd { font-family: var(--f-titre); font-size: var(--t-titre-3); }

/* ── Ce qui se passe ensuite ── */

.cc-suites { margin-top: var(--e-6); }
.cc-suites__titre { font-size: var(--t-titre-2); }
.cc-suites__liste { display: grid; gap: .75rem; margin-top: var(--e-3); }

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

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

.cc-suites__quand { margin: 0; font-size: var(--t-mention); font-weight: 600; color: var(--c-vigne); }
.cc-suites__quoi  { margin: 0; font-size: var(--t-corps); line-height: 1.5; max-width: none; }

/* ── La référence de virement ── */

.cc-jeton {
  padding: var(--e-4) var(--e-5);
  border: 2px solid var(--c-vigne);
  border-radius: var(--r-carte);
  background: var(--c-surface);
}
.cc-jeton__titre { font-size: var(--t-titre-4); }
.cc-jeton__valeur {
  margin: var(--e-2) 0 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--t-titre-4);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--c-vigne);
  user-select: all;
  word-break: break-word;
}
.cc-jeton__aide { margin-top: var(--e-2); font-size: var(--t-mention); line-height: 1.5; color: var(--c-encre-douce); }

/* La question « comment avez-vous connu cette cuvée » : un choix, puis une
   précision libre, l'un sous l'autre pour rester lisible au doigt. */
.cc-engagement__origine { margin-top: var(--e-4); }
.cc-engagement__origine select,
.cc-engagement__origine input { width: 100%; }
.cc-engagement__origine input { margin-top: .5rem; }

/* ───────────────────────── Faire passer le mot ───────────────────────── */

/*
 * Replié, le bloc n'est qu'une ligne : la page sert d'abord à s'engager. Le
 * « details » ouvre et ferme sans JavaScript, et annonce son état aux
 * lecteurs d'écran.
 */
.cc-partage {
  margin-top: var(--e-6);
  border: 1px solid var(--c-filet);
  border-radius: var(--r-carte);
  background: var(--c-surface);
}

.cc-partage__bascule {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 52px;
  padding: 0 var(--e-5);
  color: var(--c-encre);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.cc-partage__bascule::-webkit-details-marker { display: none; }

/* Le même chevron que le menu du téléphone : deux traits d'un carré. */
.cc-partage__bascule::after {
  content: "";
  width: .4rem;
  height: .4rem;
  margin-top: -.18rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.cc-partage[open] > .cc-partage__bascule { color: var(--c-vigne); }
.cc-partage[open] > .cc-partage__bascule::after {
  margin-top: .14rem;
  transform: rotate(-135deg);
}

.cc-partage__contenu {
  display: grid;
  gap: var(--e-4);
  padding: 0 var(--e-5) var(--e-5);
  border-top: 1px solid var(--c-filet);
  padding-top: var(--e-4);
}
.cc-partage__mot { margin: 0; color: var(--c-encre-douce); max-width: 54ch; }

/*
 * Le code, puis ce qu'on en fait, l'un sous l'autre. Deux colonnes seraient
 * tentantes sur grand écran, mais le bloc y vit dans la colonne étroite de
 * la prévente, à peine plus large que sur un téléphone : le bouton s'y
 * coupait en deux. Une seule disposition, qui tient partout.
 */
.cc-partage__qr {
  display: grid;
  gap: var(--e-3);
  justify-items: start;
}
.cc-partage__qr svg {
  display: block;
  width: 148px;
  height: auto;
  border: 1px solid var(--c-filet);
  border-radius: 6px;
}
.cc-partage__qr-mot { display: grid; gap: var(--e-3); justify-items: start; }
.cc-partage__qr-mot p { margin: 0; font-size: var(--t-mention); color: var(--c-encre-attenuee); max-width: 42ch; }

/* Les façons d'envoyer le lien, toutes de la même taille : aucune n'est
   mise en avant, et aucune n'emprunte les couleurs d'une marque. */
.cc-partage__liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cc-partage__lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--e-4);
  border: 1.5px solid var(--c-filet-fort);
  border-radius: var(--r-pilule);
  background: transparent;
  color: var(--c-encre);
  font: inherit;
  font-size: var(--t-petit);
  text-decoration: none;
  cursor: pointer;
}
.cc-partage__lien:hover { border-color: var(--c-vigne); color: var(--c-vigne); }

/* Les deux que le script ajoute, s'il s'exécute : le geste le plus court. */
.cc-partage__lien--systeme,
.cc-partage__lien--copie { border-color: var(--c-vigne); color: var(--c-vigne); }
.cc-partage__lien--copie.est-copie { background: var(--c-vigne-voile); }

.cc-partage__adresse {
  display: grid;
  gap: .15rem;
  margin: 0;
  font-size: var(--t-mention);
}
.cc-partage__intitule { color: var(--c-encre-attenuee); }
/* L'adresse est longue : elle se coupe plutôt que de pousser la carte. */
.cc-partage__url { color: var(--c-vigne); overflow-wrap: anywhere; }