/**
 * Charte v2 — tableau des tarifs de livraison, lien « Voir tous les tarifs » et sa fenêtre
 * Découpé de charte.css (Phase 16 sexdecies F1, vitesse) : cette feuille n'est chargée que sur les écrans qui en ont besoin
 * (voir Charte\Module::satellite), pour ne pas alourdir le premier affichage des autres. Chargée sur l'accueil, les fiches produit, la page Livraison et partout où le lien ou le tableau s'affiche (Livraison\Fenetre, Reglages).
 */

/* --------------------------------------------------------------------------------------------
 * Livraison : tableau des tarifs par zone (Reglages::tableau_html : page Livraison, fenêtre « Voir tous les tarifs »,
 * aperçu de l'écran de réglage), le lien qui ouvre la fenêtre et la fenêtre elle-même (Livraison\Fenetre). Sélecteurs
 * préfixés par leur racine pour l'emporter sur le texte des pages (.df-prose). Téléphone (≤ 600 px) : une carte par mode.
 * ------------------------------------------------------------------------------------------ */

.df-livraison-tableau { width: 100%; font-family: var(--df-police-texte); color: var(--df-encre); }
.df-livraison-tableau .df-livraison-tableau__zone { margin: var(--df-esp-6) 0 var(--df-esp-3); font-family: var(--df-police-titre); font-size: var(--df-ft-bloc); font-weight: var(--df-fw-regulier); line-height: 1.2; color: var(--df-vert); }
.df-livraison-tableau .df-livraison-tableau__zone:first-child { margin-top: 0; }
.df-livraison-tableau > p { margin: 0 0 var(--df-esp-3); font-size: var(--df-fs-texte); line-height: 1.5; color: var(--df-texte); }
/* Un bloc par groupe de zones (« Europe proche ») ou par zone seule ; dans un groupe, chaque zone sous un petit titre. */
.df-livraison-tableau .df-livraison-tableau__bloc + .df-livraison-tableau__bloc { margin-top: var(--df-esp-6); }
.df-livraison-tableau .df-livraison-tableau__bloc > .df-livraison-tableau__zone, .df-livraison-tableau .df-livraison-tableau__groupe { margin: 0 0 var(--df-esp-3); font-family: var(--df-police-titre); font-size: var(--df-ft-bloc); font-weight: var(--df-fw-regulier); line-height: 1.2; color: var(--df-vert); }
.df-livraison-tableau .df-livraison-tableau__sous-zone { padding-left: var(--df-esp-4); border-left: 2px solid var(--df-trait-doux); }
.df-livraison-tableau .df-livraison-tableau__sous-zone + .df-livraison-tableau__sous-zone { margin-top: var(--df-esp-4); }
.df-livraison-tableau h4.df-livraison-tableau__zone { margin: 0 0 var(--df-esp-2); font-family: var(--df-police-texte); font-size: var(--df-fs-texte); font-weight: var(--df-fw-gras); line-height: 1.3; color: var(--df-encre); }
.df-livraison-tableau .df-livraison-tableau__pays { margin: 0 0 var(--df-esp-2); font-size: var(--df-fs-petit); line-height: 1.45; color: var(--df-texte-doux); }
.df-livraison-tableau .df-livraison-tableau__bloc > p:not([class]) { margin: 0; font-size: var(--df-fs-texte); line-height: 1.5; color: var(--df-texte); }
.df-livraison-tableau .df-livraison-tableau__table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; overflow: hidden; border: var(--df-filet); border-radius: var(--df-rayon-md); background: var(--df-blanc); font-size: var(--df-fs-texte); line-height: 1.45; table-layout: auto; }
.df-livraison-tableau .df-livraison-tableau__table :is(th, td) { padding: 12px var(--df-esp-4); border: 0; border-bottom: 1px solid var(--df-trait-doux); text-align: left; vertical-align: top; background: none; }
.df-livraison-tableau .df-livraison-tableau__table th { font-size: var(--df-fs-mini); font-weight: var(--df-fw-gras); letter-spacing: .06em; text-transform: uppercase; color: var(--df-texte-doux); background: var(--df-sauge-brume); }
.df-livraison-tableau .df-livraison-tableau__table tbody tr:last-child td { border-bottom: 0; }
/* Mêmes colonnes d'une zone à l'autre. */
.df-livraison-tableau .df-livraison-tableau__table { display: table; table-layout: fixed; }
.df-livraison-tableau .df-livraison-tableau__table th:nth-child(1) { width: 30%; }
.df-livraison-tableau .df-livraison-tableau__table th:nth-child(2) { width: 30%; }
.df-livraison-tableau .df-livraison-tableau__table td:first-child { font-weight: var(--df-fw-demi); }
.df-livraison-tableau .df-livraison-tableau__table td:nth-child(2) { color: var(--df-vert); font-weight: var(--df-fw-demi); }
.df-livraison-tableau .df-livraison-tableau__table td:nth-child(3) { color: var(--df-texte-doux); }
.df-livraison-tableau .df-livraison-tableau__seuil { margin: var(--df-esp-3) 0 0; padding: 10px var(--df-esp-4); border-radius: var(--df-rayon); background: var(--df-sauge-pale); color: var(--df-vert-fonce); font-size: var(--df-fs-petit); font-weight: var(--df-fw-demi); }
@media (max-width: 600px) {
	.df-livraison-tableau .df-livraison-tableau__table, .df-livraison-tableau .df-livraison-tableau__table tbody { display: block; border: 0; background: none; }
	.df-livraison-tableau .df-livraison-tableau__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.df-livraison-tableau .df-livraison-tableau__table tbody { display: flex; flex-direction: column; gap: var(--df-esp-2); }
	.df-livraison-tableau .df-livraison-tableau__table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--df-esp-3); row-gap: 2px; padding: 12px 14px; border: var(--df-filet); border-radius: var(--df-rayon-md); background: var(--df-blanc); }
	.df-livraison-tableau .df-livraison-tableau__table td { padding: 0; border: 0; }
	.df-livraison-tableau .df-livraison-tableau__table td:nth-child(2) { max-width: 11em; text-align: right; white-space: normal; }
	.df-livraison-tableau .df-livraison-tableau__table td:nth-child(3) { grid-column: 1 / -1; font-size: var(--df-fs-petit); }
}

/* Lien « Voir tous les tarifs » (code court [df_livraison champ="lien_tarifs"]). */
.df-tarifs-lien { font-family: var(--df-police-texte); font-size: var(--df-fs-petit); font-weight: var(--df-fw-demi); line-height: 1.35; color: var(--df-vert); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; cursor: pointer; }
.df-tarifs-lien:hover, .df-tarifs-lien:focus-visible { color: var(--df-vert-fonce); text-decoration-thickness: 2px; }
/* forme="icone" (bandeau de réassurance de l'accueil) : une icône « i » après le prix ; sa zone de clic couvre toute la
   case, qui réagit au survol (prix souligné, icône foncée). */
.df-tarifs-lien--icone { display: inline-flex; color: var(--df-texte-doux); text-decoration: none; }
.df-montant > :has(> .df-tarifs-lien--icone) { display: inline-flex; align-self: center; margin-left: .1em; }
.df-tarifs-lien--icone::after { content: ""; position: absolute; inset: -8px -12px; border-radius: var(--df-rayon-md); }
.df-tarifs-lien--icone:focus-visible { outline: none; }
.df-tarifs-lien--icone:focus-visible::after { outline: 2px solid var(--df-vert); outline-offset: 0; }
:where(.df-reassurance__item):has(.df-tarifs-lien--icone) { position: relative; cursor: pointer; }
:where(.df-reassurance__item):has(.df-tarifs-lien--icone):hover .df-montant__valeur { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:where(.df-reassurance__item):has(.df-tarifs-lien--icone):hover .df-tarifs-lien--icone { color: var(--df-vert); }
/* Téléphone : même lien que sur ordinateur dans la pastille « Point Relais dès » (icône « i » après le prix) ; toute la pastille (≥ 44 px) est la zone d'appui. */
:where(.df-pastille-accueil):has(.df-tarifs-lien--icone) { position: relative; cursor: pointer; }
.df-pastille-accueil__texte strong > .df-tarifs-lien--icone { margin-left: .3em; vertical-align: -3px; }
.df-pastille-accueil .df-tarifs-lien--icone::after { inset: 0; border-radius: 12px; }

/* La fenêtre. */
.df-tarifs {
	max-width: 760px;
	width: calc(100% - 32px);
	max-height: calc(100dvh - 32px);
	overflow: auto;
	overscroll-behavior: contain;
	border: none;
	border-radius: var(--df-rayon-lg);
	box-shadow: var(--df-ombre-panneau);
	padding: var(--df-esp-6);
	font-family: var(--df-police-texte);
	background: var(--df-creme);
	color: var(--df-encre);
}
.df-tarifs::backdrop { background: var(--df-voile); }
html.df-tarifs-ouverte { overflow: hidden; }
.df-tarifs__fermer { position: sticky; top: 0; float: right; margin: calc(-1 * var(--df-esp-3)) calc(-1 * var(--df-esp-3)) 0 0; z-index: 1; }
.df-tarifs__fermer button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; background: var(--df-creme); font-size: 26px; line-height: 1; cursor: pointer; color: var(--df-texte-doux); }
.df-tarifs__fermer button:hover, .df-tarifs__fermer button:focus-visible { background: var(--df-sauge-pale); color: var(--df-vert); }
.df-tarifs__titre { margin: 0 0 var(--df-esp-2); font-family: var(--df-police-titre); font-size: var(--df-ft-carte); font-weight: var(--df-fw-regulier); line-height: 1.2; color: var(--df-encre); }
.df-tarifs__intro { margin: 0 0 var(--df-esp-5); font-size: var(--df-fs-texte); line-height: 1.5; color: var(--df-texte-doux); }
.df-tarifs__pied { margin: var(--df-esp-5) 0 0; font-size: var(--df-fs-petit); }
.df-tarifs__pied a { color: var(--df-vert); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .df-tarifs { padding: var(--df-esp-5) var(--df-esp-4); } }
@media (prefers-reduced-motion: no-preference) { .df-tarifs[open] { animation: df-bienvenue-entree .22s ease-out; } }
/* Fiche produit, rubrique « Livraison et retrait » (téléphone) : le lien s'aligne sur le texte des lignes (icône 18 px + 8 px). */
.df-fiche-livraison .df-tarifs-lien { margin-left: 26px; }