/*
 * La page « Livraison et delais » (page 2969), 30/09/2026.
 *
 * Demande de Remy : « cette page, c'est un torche-cul ». Elle n'etait qu'un
 * titre, du texte et deux tableaux nus dans la colonne de 720 px. Elle reste
 * rendue par page.php (photo d'ouverture, carte a moitie dessus), son texte
 * vit dans post_content (3 - Site/Contenu/livraison-delais.html) et prend le
 * vocabulaire de l'accueil et de la page grande quantite : titres centres
 * soulignes de bleu, cartes blanches, fil qui deroule les etapes (.ap-fil,
 * anime par theme.js), bande taupe pour la date de Noel.
 *
 * Chargee sur cette seule page (is_page( 'livraison-delais' ), functions.php),
 * apres theme.css. Toutes les classes propres a la page sont en
 * .ap-livraison__* ; les briques communes (.ap-titre-centre, .ap-fiche__cartes,
 * .ap-fil) viennent de theme.css et ne sont qu'ajustees ici.
 *
 * Attention a wpautop : dans le texte, un element en ligne pose seul a cote
 * d'un bloc (un <span> a cote d'un <div>) recoit un </p> orphelin. D'ou le
 * numero des etapes en <div>, et non en <span> comme dans devis-pro.php.
 */

/* --- Le cadre : la page sort de la colonne de lecture ---------------------- */

.ap-page .ap-prose {
	max-width: none;
}

.ap-page .ap-prose > h2.ap-titre-centre {
	margin-top: 72px;
}

.ap-page .ap-prose > .ap-chapeau-centre {
	max-width: 44rem;
	margin: 0 auto;
	color: var(--ap-doux);
	font-size: 1.05rem;
	text-align: center;
}

/* --- Les trois reperes du haut --------------------------------------------- */

.ap-livraison__reperes {
	display: grid;
	gap: 16px;
	margin-top: 28px;
}

@media (min-width: 760px) {
	.ap-livraison__reperes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}
}

.ap-livraison__repere {
	padding: 26px 22px 22px;
	border: 1px solid var(--ap-trait);
	border-radius: var(--ap-rayon);
	background: var(--ap-carte);
	text-align: center;
}

.ap-livraison__repere > p {
	margin: 0;
	color: var(--ap-doux);
	font-size: 0.95rem;
}

/* L'icone : un dessin au trait, pose en masque et peint au bleu de texte. */
.ap-livraison__repere::before {
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	margin: 0 auto 12px;
	background: var(--ap-bleu-texte);
	-webkit-mask: var(--ap-livraison-icone) center / contain no-repeat;
	mask: var(--ap-livraison-icone) center / contain no-repeat;
}

.ap-livraison__repere--delai {
	--ap-livraison-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.ap-livraison__repere--noel {
	--ap-livraison-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='9' width='17' height='11.5' rx='1.5'/%3E%3Cpath d='M2.5 9h19M12 9v11.5M12 9c-1.5-3.5-5.5-4.5-5.5-2 0 1.6 3 2 5.5 2zM12 9c1.5-3.5 5.5-4.5 5.5-2 0 1.6-3 2-5.5 2z'/%3E%3C/svg%3E");
}

.ap-livraison__repere--offerte {
	--ap-livraison-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h11v10h-11zM13.5 10h4l3 3.2v3.3h-7'/%3E%3Ccircle cx='6.5' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E");
}

.ap-page .ap-prose .ap-livraison__chiffre {
	margin: 0 0 4px;
	color: var(--ap-taupe);
	font-family: var(--ap-serif);
	font-size: clamp(2rem, 1.6rem + 1.2vw, 2.5rem);
	font-weight: 600;
	/* Chiffres alignes : ceux de Cormorant, a l'ancienne, font lire « 10 »
	   comme « Io ». */
	font-variant-numeric: lining-nums;
	line-height: 1.1;
}

/* --- Le fil des etapes : la duree en pastille au-dessus du titre --------- */

.ap-page .ap-prose .ap-fil__carte .ap-livraison__duree {
	display: inline-block;
	margin: 0 0 10px;
	padding: 3px 11px;
	border-radius: 999px;
	background: var(--ap-bleu-050);
	color: var(--ap-bleu-texte);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* --- Les cartes a tableau (le delai, les frais) ------------------------------ */

.ap-livraison__carte {
	max-width: 52rem;
	margin: 40px auto 0;
	padding: 28px 28px 24px;
	border: 1px solid var(--ap-trait);
	border-radius: var(--ap-rayon);
	background: var(--ap-carte);
	box-shadow: 0 10px 28px rgba(27, 42, 50, 0.06);
}

h2.ap-titre-centre + .ap-livraison__carte {
	margin-top: 22px;
}

/* Les titres de carte : le filet bleu cale a gauche, comme sur les fiches. */
.ap-livraison__carte h3,
.ap-page .ap-fiche__carte h3 {
	position: relative;
	margin: 0 0 0.8em;
	padding-bottom: 0.5em;
	font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.75rem);
	font-weight: 600;
	line-height: 1.18;
}

.ap-livraison__carte h3::after,
.ap-page .ap-fiche__carte h3::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 44px;
	height: 3px;
	border-radius: 2px;
	background: var(--ap-bleu);
}

.ap-page .ap-fiche__carte p:last-child {
	margin-bottom: 0;
}

.ap-page .ap-prose > .ap-fiche__cartes {
	margin-top: 22px;
}

.ap-livraison__tableau {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.97rem;
}

.ap-livraison__tableau th,
.ap-livraison__tableau td {
	padding: 13px 14px;
	border-top: 1px solid var(--ap-trait);
	text-align: left;
	vertical-align: middle;
}

.ap-livraison__tableau thead th {
	padding-top: 0;
	border-top: 0;
	color: var(--ap-doux);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ap-livraison__tableau th:last-child,
.ap-livraison__tableau td:last-child {
	text-align: right;
}

.ap-livraison__tableau td:last-child {
	color: var(--ap-encre);
	font-weight: 500;
}

/* Le total, au taupe du site, comme la ligne de total des fiches. */
.ap-livraison__total td,
.ap-livraison__tableau .ap-livraison__total td:last-child {
	color: var(--ap-taupe);
	font-weight: 700;
}

/* La ligne de la livraison offerte ressort sur un bleu tres pale. */
.ap-livraison__offerte td {
	background: var(--ap-bleu-050);
	font-weight: 700;
}

.ap-livraison__offerte td:first-child {
	border-radius: 10px 0 0 10px;
}

.ap-livraison__offerte td:last-child {
	border-radius: 0 10px 10px 0;
	color: var(--ap-bleu-texte);
}

.ap-livraison__offerte + tr td {
	border-top-color: transparent;
}

.ap-page .ap-prose .ap-livraison__duo {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--ap-trait);
	color: var(--ap-doux);
	font-size: 0.95rem;
}

/*
 * Au telephone, chaque ligne passe en deux blocs empiles, libelle puis
 * valeur : deux colonnes cote a cote n'y laissaient rien a la seconde (meme
 * choix que le tableau des fiches, theme.css).
 */
@media (max-width: 640px) {
	.ap-livraison__carte {
		padding: 22px 18px 20px;
	}

	.ap-livraison__tableau,
	.ap-livraison__tableau tbody,
	.ap-livraison__tableau tr,
	.ap-livraison__tableau td {
		display: block;
	}

	.ap-livraison__tableau thead {
		display: none;
	}

	.ap-livraison__tableau tr {
		padding: 12px 12px;
		border-top: 1px solid var(--ap-trait);
	}

	.ap-livraison__tableau tbody tr:first-child {
		border-top: 0;
	}

	.ap-livraison__tableau td,
	.ap-livraison__tableau td:last-child {
		padding: 0;
		border: 0;
		text-align: left;
	}

	.ap-livraison__tableau td:first-child {
		margin-bottom: 2px;
		color: var(--ap-doux);
		font-size: 0.9rem;
	}

	.ap-livraison__offerte {
		border-radius: 10px;
		background: var(--ap-bleu-050);
	}

	.ap-livraison__offerte td,
	.ap-livraison__offerte td:first-child,
	.ap-livraison__offerte td:last-child {
		border-radius: 0;
		background: none;
	}

	.ap-livraison__offerte + tr {
		border-top-color: transparent;
	}
}

/*
 * --- Noel : la bande taupe, d'un bord a l'autre ----------------------------
 * Comme la bande des fiches : c'est son OMBRE qui s'etend (100vw compterait
 * la barre de defilement et ferait deborder la page), clip-path la coupe en
 * haut et en bas.
 */
.ap-page .ap-prose > .ap-livraison__noel {
	margin: 72px 0;
	padding: 56px 0;
	background: var(--ap-taupe);
	box-shadow: 0 0 0 100vmax var(--ap-taupe);
	clip-path: inset(0 -100vmax);
	color: #fff;
	text-align: center;
}

.ap-livraison__noel::before {
	content: "";
	display: block;
	width: 38px;
	height: 38px;
	margin: 0 auto 14px;
	background: var(--ap-bleu-200);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5v19M3.8 7.25l16.4 9.5M3.8 16.75l16.4-9.5M9.5 3.8 12 6.3l2.5-2.5M9.5 20.2 12 17.7l2.5 2.5M3 10.4l3.4.9-.9 3.4M21 13.6l-3.4-.9.9-3.4M3 13.6l3.4-.9-.9-3.4M21 10.4l-3.4.9.9 3.4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5v19M3.8 7.25l16.4 9.5M3.8 16.75l16.4-9.5M9.5 3.8 12 6.3l2.5-2.5M9.5 20.2 12 17.7l2.5 2.5M3 10.4l3.4.9-.9 3.4M21 13.6l-3.4-.9.9-3.4M3 13.6l3.4-.9-.9-3.4M21 10.4l-3.4.9.9 3.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ap-page .ap-prose .ap-livraison__noel > * {
	margin-top: 0;
}

.ap-page .ap-prose .ap-livraison__surtitre {
	margin: 0 0 6px;
	color: var(--ap-bleu-200);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ap-page .ap-prose .ap-livraison__noel h2 {
	margin: 0 0 0.45em;
	color: #fff;
	font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem);
	font-weight: 500;
	font-variant-numeric: lining-nums;
	line-height: 1.1;
}

.ap-page .ap-prose .ap-livraison__noel p:last-child {
	max-width: 36rem;
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.9);
}

/* --- Le contact, pour finir -------------------------------------------------- */

.ap-page .ap-prose > .ap-livraison__contact {
	max-width: 52rem;
	margin: 72px auto 0;
	padding: 36px 28px 32px;
	border: 1px solid var(--ap-bleu-100);
	border-radius: var(--ap-rayon);
	background: var(--ap-bleu-050);
	text-align: center;
}

.ap-page .ap-prose .ap-livraison__contact h2 {
	margin: 0 0 0.4em;
	font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.1rem);
	font-weight: 500;
}

.ap-page .ap-prose .ap-livraison__contact p {
	margin: 0;
}

.ap-page .ap-prose .ap-livraison__contact .ap-livraison__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 22px;
}

@media (max-width: 520px) {
	.ap-livraison__actions .ap-bouton {
		flex: 1 1 100%;
		text-align: center;
	}
}