/* Page « Livraison » (page-livraison-commandes.php, inc/livraison.php) ------------------------------------- */

.livraison { max-width: 1000px; margin: 0 auto; padding: 6px 0 64px; color: var(--c-texte-2); }
.livraison > :first-child { margin-top: 0; }

.livraison__chapo { max-width: 66ch; margin: 0 auto 30px; text-align: center; font-size: var(--t-courant); line-height: 1.65; color: #55554a; text-wrap: pretty; }

/* Atouts : trois cartes avec icône (traits du jeu d'icônes du thème, apdt_icone). */
.livraison-atouts, .livraison-atouts > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.livraison-atouts:has(> .wp-block-group__inner-container) { display: block; }
.livraison-atouts { margin: 0 0 48px; }
.livraison-atouts p {
	position: relative; margin: 0; padding: 20px 20px 20px 64px; border: 1px solid var(--c-creme); background: var(--c-creme-clair);
	font-size: var(--t-petit); line-height: 1.5; color: var(--c-texte-2);
}
.livraison-atouts p strong { display: block; margin-bottom: 4px; font: 600 1.0625rem/1.3 var(--f-titre); color: var(--c-texte); }
.livraison-atouts p::before {
	content: ""; position: absolute; top: 20px; left: 20px; width: 28px; height: 28px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23669602' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='7' width='13' height='9.5' rx='1'/%3E%3Cpath d='M14.5 10h4l3 3v3.5h-7z'/%3E%3Ccircle cx='5.5' cy='18.5' r='1.8'/%3E%3Ccircle cx='17.5' cy='18.5' r='1.8'/%3E%3C/svg%3E");
}
.livraison-atouts p:nth-of-type(2)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23669602' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='13' rx='1'/%3E%3Cpath d='M3 12h18M12 8v13'/%3E%3Cpath d='M12 8s-1-4.5-3.6-4.5A2.4 2.4 0 0 0 8 8zM12 8s1-4.5 3.6-4.5A2.4 2.4 0 0 1 16 8z'/%3E%3C/svg%3E");
}
.livraison-atouts p:nth-of-type(3)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23669602' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
}

/* Titres de section : trait vert dessous, comme l'ancienne page. */
.livraison h2 { margin: 0 0 18px; font: 600 clamp(1.5rem, 2.4vw, 1.875rem)/1.2 var(--f-titre); color: var(--c-texte); }
.livraison h2::after { content: ""; display: block; width: 44px; height: 2px; margin-top: 10px; background: var(--c-vert); }
.livraison h2:not(:first-child) { margin-top: 52px; }
.livraison p { line-height: 1.65; }
.livraison a { color: var(--c-prune-texte); text-underline-offset: 3px; }

/* Tableaux des tarifs */
.tableau-livraison { margin: 0 0 14px; }
.tableau-livraison table { width: 100%; border: 1px solid var(--c-creme); border-collapse: collapse; background: #fff; font-size: var(--t-compact); }
.tableau-livraison thead { border: 0; }
.tableau-livraison th {
	padding: 13px 16px; border: 0; border-bottom: 1px solid var(--c-creme); background: var(--c-creme-clair); text-align: left; vertical-align: bottom;
	font: 600 var(--t-label)/1.3 var(--f-texte); letter-spacing: 0.08em; text-transform: uppercase; color: #77776a;
}
.tableau-livraison td { padding: 15px 16px; border: 0; border-top: 1px solid var(--c-creme); vertical-align: middle; font-variant-numeric: tabular-nums; color: var(--c-texte-2); }
.tableau-livraison tbody tr:first-child td { border-top: 0; }
.tableau-livraison td:first-child { width: 34%; color: #77776a; font-size: var(--t-petit); }
.tableau-livraison td:first-child strong { display: block; margin-bottom: 2px; font-size: var(--t-compact); font-weight: 600; color: var(--c-texte); }
.tableau-livraison td.est-offert { font-weight: 600; color: var(--c-vert-fonce); }
.tableau-livraison--europe td:nth-child(2) { color: #77776a; font-size: var(--t-petit); }
.tableau-livraison--europe td:nth-child(2) strong { display: block; margin-bottom: 2px; font-size: var(--t-compact); font-weight: 600; color: var(--c-texte); }
.tableau-livraison--europe td:first-child { width: 24%; }

.livraison__note { margin: 0; font-size: var(--t-petit); color: #77776a; }

/* Mobile : chaque ligne devient une carte, l'intitulé de colonne en regard de chaque valeur. */
@media (max-width: 759px) {
	.livraison { padding-bottom: 44px; }
	.livraison__chapo { margin-bottom: 22px; }
	.livraison-atouts, .livraison-atouts > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.livraison-atouts { margin-bottom: 36px; }
	.livraison-atouts p { padding: 16px 16px 16px 58px; }
	.livraison-atouts p::before { top: 16px; left: 16px; width: 26px; height: 26px; }
	.livraison h2:not(:first-child) { margin-top: 40px; }

	.tableau-livraison table, .tableau-livraison tbody, .tableau-livraison tr, .tableau-livraison td { display: block; width: auto; }
	.tableau-livraison table { border: 0; background: none; }
	.tableau-livraison thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.tableau-livraison tbody tr { margin: 0 0 12px; border: 1px solid var(--c-creme); background: #fff; }
	.tableau-livraison td, .tableau-livraison tbody tr:first-child td { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 16px; border-top: 1px solid #efeae4; text-align: right; }
	.tableau-livraison td::before { content: attr(data-label); flex: 0 1 auto; text-align: left; font-size: var(--t-petit); font-weight: 400; color: #77776a; }
	.tableau-livraison td:first-child, .tableau-livraison tbody tr:first-child td:first-child { display: block; width: auto; padding: 14px 16px 12px; border-top: 0; background: var(--c-creme-clair); text-align: left; }
	.tableau-livraison td:first-child::before { content: none; }
	.tableau-livraison--europe td:first-child strong { font-family: var(--f-titre); font-size: 1.0625rem; }
	/* Même poids que la règle des cellules de la première ligne, sinon la première carte reste en ligne. */
	.tableau-livraison--europe tbody tr td:nth-child(2), .tableau-livraison--europe tbody tr:first-child td:nth-child(2) { display: block; text-align: left; }
	.tableau-livraison--europe tbody tr td:nth-child(2)::before { display: block; margin-bottom: 4px; }
}