/**
 * Bloc de livraison — habillage aligné sur le design system Fleurs de Cœur.
 *
 * Toutes les règles sont préfixées .fdc-livraison ou .fdc-tunnel : rien ne
 * déborde sur le reste de la fiche produit.
 *
 * ---------------------------------------------------------------------------
 *  COULEURS — comment ce fichier se raccorde à votre thème
 * ---------------------------------------------------------------------------
 *
 *  Chaque couleur est écrite sous la forme var(--fdc-xxx, #HEX).
 *
 *  · Si le bloc de jetons du design system est collé dans le style.css du
 *    thème enfant, ce sont VOS valeurs qui s'appliquent. Changer une couleur
 *    là-bas la change ici, sans toucher au plugin.
 *  · Si les jetons ne sont pas déclarés, le repli en dur prend le relais et
 *    le bloc reste à la charte. Rien à faire, rien à casser.
 *
 *  Les jetons utilisés ici : --fdc-vert, --fdc-vert-survol, --fdc-vert-voile,
 *  --fdc-encre, --fdc-gris, --fdc-ivoire, --fdc-ivoire-filet, --fdc-filet,
 *  --fdc-sable, --fdc-sable-filet, --fdc-sable-texte, --fdc-sable-gras,
 *  --fdc-sans, --fdc-r-carte.
 *
 *  Trois jetons n'existent pas encore dans le design system et sont proposés
 *  ici avec un repli : --fdc-vert-voile-filet (filet du bandeau
 *  d'information), --fdc-blanc et --fdc-focus (contour de focus clavier).
 */

/* ---------------------------------------------------------------
   Réglages locaux du bloc
   --------------------------------------------------------------- */

.fdc-livraison {
	/* Taille de la phrase de promesse. Le design system range la ligne
	   « Date de livraison » à 13,5 px ; on la monte à 14,5 px parce qu'ici
	   c'est la raison d'être du bloc et non une ligne de récapitulatif.
	   Pour revenir à la stricte conformité, passer cette seule valeur
	   à 13.5px. */
	--fdc-liv-promesse: 14.5px;
}

/* ---------------------------------------------------------------
   Le bloc
   --------------------------------------------------------------- */

.fdc-livraison {
	box-sizing: border-box;
	/* Inséré dans form.cart, le bloc peut se retrouver dans un conteneur
	   flex aux côtés de la quantité et du bouton. Sans ces trois lignes,
	   il se dimensionne sur son contenu au lieu de prendre la largeur. */
	display: block;
	width: 100%;
	flex: 0 0 100%;
	border: 1px solid var(--fdc-filet, #E6E3DC);
	border-radius: var(--fdc-r-carte, 5px);
	padding: 13px 14px;
	margin: 0 0 16px;
	font-family: var(--fdc-sans, inherit);
	font-size: 13px;
	line-height: 1.5;
	color: var(--fdc-encre, #232320);
}

.fdc-note {
	width: 100%;
	flex: 0 0 100%;
}

.fdc-livraison *,
.fdc-livraison *::before,
.fdc-livraison *::after {
	box-sizing: border-box;
}

/* Les chiffres s'alignent : règle du design system, valable pour les dates
   comme pour les montants. */
.fdc-livraison__promesse,
.fdc-livraison__precision,
.fdc-livraison__ligne-dates,
.fdc-livraison__ligne-prix,
.fdc-livraison__tel-numero,
.fdc-tunnel-date,
.fdc-tunnel-mode__prix {
	font-variant-numeric: tabular-nums;
}

/* Le focus clavier reste visible partout dans le bloc. */
.fdc-livraison a:focus-visible,
.fdc-livraison button:focus-visible {
	outline: 3px solid var(--fdc-focus, var(--fdc-encre, #232320));
	outline-offset: 2px;
	border-radius: 2px;
}

/* --- En-tête : picto + mode par défaut ----------------------- */
.fdc-livraison__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.fdc-livraison__icone {
	flex-shrink: 0;
	color: var(--fdc-vert, #1F4E3A);
}

/* Motif « libellé de section » du design system : capitales discrètes,
   c'est la valeur en dessous qui porte le sens. */
.fdc-livraison__mode {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fdc-gris, #5F5E5A);
}

/* --- La promesse --------------------------------------------- */
.fdc-livraison__promesse {
	margin: 0 0 6px;
	font-size: var(--fdc-liv-promesse, 14.5px);
	line-height: 1.4;
	color: var(--fdc-encre, #232320);
}

.fdc-livraison__promesse strong {
	font-weight: 700;
	color: var(--fdc-encre, #232320);
}

.fdc-livraison__precision {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--fdc-gris, #5F5E5A);
}

/* --- Bandeau -------------------------------------------------- */
.fdc-bandeau {
	box-sizing: border-box;
	padding: 9px 11px;
	border: 1px solid transparent;
	border-radius: var(--fdc-r-carte, 5px);
	font-size: 12.5px;
	line-height: 1.5;
}

.fdc-bandeau--dans-bloc {
	margin: 10px 0 0;
}

/* Information : le vert voilé du badge « En stock ». Une nouvelle calme. */
.fdc-bandeau--info {
	background: var(--fdc-vert-voile, #EAF0EC);
	border-color: var(--fdc-vert-voile-filet, #D6E2DB);
	color: var(--fdc-vert, #1F4E3A);
}

/* Attention : le sable de l'encart d'urgence. Dans ce système, le sable
   est la seule teinte qui signale une échéance. */
.fdc-bandeau--attention {
	background: var(--fdc-sable, #FBF6EE);
	border-color: var(--fdc-sable-filet, #E8DCC6);
	color: var(--fdc-sable-texte, #6B5230);
}

.fdc-bandeau[hidden] {
	display: none;
}

/* --- Astérisque et sa mention --------------------------------- */
.fdc-livraison__etoile {
	margin-left: 2px;
	color: var(--fdc-gris, #5F5E5A);
}

/* Quand la mention est dépliable, l'astérisque lui-même est le
   bouton : c'est là que le doigt va naturellement. */
.fdc-livraison__etoile--bouton {
	display: inline-block;
	min-width: 30px;
	padding: 0 6px;
	background: none;
	border: 0;
	font: inherit;
	font-size: 1.15em;
	line-height: 1;
	color: var(--fdc-vert, #1F4E3A);
	cursor: pointer;
	vertical-align: baseline;
}

.fdc-livraison__etoile--bouton:hover,
.fdc-livraison__etoile--bouton:focus {
	color: var(--fdc-vert-survol, #163A2A);
}

/* --- Mention en note de bas de page --------------------------- */
.fdc-note {
	margin: 12px 0 0;
	font-family: var(--fdc-sans, inherit);
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--fdc-gris, #5F5E5A);
}

.fdc-note__etoile {
	color: var(--fdc-gris, #5F5E5A);
}

.fdc-livraison__etoile-lien {
	display: inline-flex;
	align-items: center;
	min-height: var(--fdc-cible, 44px);
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--fdc-vert, #1F4E3A);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.fdc-livraison__etoile-lien:hover {
	color: var(--fdc-vert-survol, #163A2A);
}

/* L'ivoire est le seul fond coloré des surfaces de lecture. */
.fdc-livraison__mention {
	margin: 0 0 4px;
	padding: 10px 12px;
	border: 1px solid var(--fdc-ivoire-filet, #DCD6C8);
	border-radius: var(--fdc-r-carte, 5px);
	background: var(--fdc-ivoire, #F1EFE8);
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--fdc-gris, #5F5E5A);
}

.fdc-livraison__mention[hidden] {
	display: none;
}

/* --- Aperçu administrateur ------------------------------------ */
.fdc-livraison--apercu {
	border-style: dashed;
	border-color: var(--fdc-vert, #1F4E3A);
}

.fdc-livraison__apercu {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--fdc-vert, #1F4E3A);
}

/* --- Bascule -------------------------------------------------- */

/* Le filet de séparation n'a plus lieu d'être : la carte ci-dessous porte
   sa propre bordure. Conservé au cas où un gabarit ancien l'imprimerait. */
.fdc-livraison__separateur {
	height: 1px;
	background: var(--fdc-filet, #E6E3DC);
	margin: 12px 0 2px;
}

/* Une carte, et non un lien nu.

   Sous forme de texte souligné d'un chevron, cette ligne avait la forme
   d'un « voir plus » : une commodité, pas une offre. Le contour et le fond
   sable en font une proposition — sans ajouter de couleur au système, le
   sable étant déjà la teinte de l'échéance dans la charte. */
.fdc-livraison__bascule {
	display: flex;
	/* Alignés en haut, et non centrés : la sous-ligne passe souvent sur deux
	   lignes, et un picto centré sur l'ensemble flotte alors à mi-hauteur,
	   sans rapport avec le titre qu'il annonce. */
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	min-height: 52px;
	margin-top: 12px;
	padding: 10px 12px;
	background: var(--fdc-sable, #FBF6EE);
	border: 1px solid var(--fdc-sable-filet, #E8DCC6);
	border-radius: var(--fdc-r-carte, 5px);
	font: inherit;
	color: var(--fdc-sable-gras, #4A3A20);
	text-align: left;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

/* Une fois ouverte, la carte redevient neutre : l'encart sable qu'elle
   révèle prend le relais, et deux surfaces sable empilées se brouillent
   l'une l'autre. Le changement d'état se lit alors sans le chevron. */
.fdc-livraison--ouvert .fdc-livraison__bascule {
	background: transparent;
	border-color: var(--fdc-filet, #E6E3DC);
}

.fdc-livraison__bascule-picto {
	flex-shrink: 0;
	margin-top: 1px;
	color: currentColor;
}

.fdc-livraison__bascule-texte {
	flex: 1 1 auto;
	min-width: 0;
}

.fdc-livraison__bascule-titre {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
	color: currentColor;
}

/* La sous-ligne annonce la date du mode le plus rapide. C'est un fait
   calculé, pas une promesse d'atelier : elle peut donc s'afficher en
   clair, et la date s'y détache en gras. */
.fdc-livraison__bascule-sous {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--fdc-sable-texte, #6B5230);
	font-variant-numeric: tabular-nums;
}

.fdc-livraison__bascule-sous strong {
	font-weight: 700;
	color: var(--fdc-sable-gras, #4A3A20);
}

.fdc-livraison__bascule-sous[hidden] {
	display: none;
}

.fdc-livraison--ouvert .fdc-livraison__bascule-sous {
	color: var(--fdc-gris, #5F5E5A);
}

.fdc-livraison--ouvert .fdc-livraison__bascule-sous strong {
	color: var(--fdc-vert, #1F4E3A);
}

.fdc-livraison__chevron {
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--fdc-gris, #5F5E5A);
	transition: transform 0.18s ease;
}

.fdc-livraison--ouvert .fdc-livraison__chevron {
	transform: rotate(180deg);
}

.fdc-livraison__modes[hidden] {
	display: none;
}

/* --- Détails -------------------------------------------------- */
.fdc-livraison__details {
	margin-top: 6px;
}

.fdc-livraison__modes {
	display: flex;
	flex-direction: column;
	gap: var(--fdc-gap-carte, 9px);
}

.fdc-livraison__ligne {
	display: flex;
	gap: 12px;
	align-items: baseline;
}

.fdc-livraison__ligne-texte {
	flex-grow: 1;
	min-width: 0;
}

.fdc-livraison__ligne-nom {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--fdc-encre, #232320);
}

.fdc-livraison__ligne-dates {
	font-size: 12px;
	line-height: 1.5;
	color: var(--fdc-gris, #5F5E5A);
}

/* Le prix est un montant : il porte l'accent, comme partout ailleurs. */
.fdc-livraison__ligne-prix {
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--fdc-vert, #1F4E3A);
	white-space: nowrap;
}

/* --- Date impérative ------------------------------------------ */
.fdc-livraison__urgence {
	margin-top: 14px;
	padding: 10px 12px;
	border: 1px solid var(--fdc-sable-filet, #E8DCC6);
	border-radius: var(--fdc-r-carte, 5px);
	background: var(--fdc-sable, #FBF6EE);
}

.fdc-livraison__urgence-titre {
	margin: 0 0 4px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--fdc-sable-gras, #4A3A20);
}

.fdc-livraison__urgence-texte {
	margin: 0 0 10px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--fdc-sable-texte, #6B5230);
}

/* Bouton d'appel : contour et non aplat. Le seul aplat vert de la page
   reste « Ajouter au panier ».

   Deux lignes, et non une : le libellé au-dessus, le numéro en dessous.
   Sur une seule ligne, « Appelez-nous au 03 67 10 29 14 » se coupait ou
   rétrécissait selon la largeur d'écran. Empilé, le numéro garde toujours
   la même taille et ne se coupe jamais. */
.fdc-livraison__tel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 100%;
	min-height: 52px;
	padding: 9px 10px;
	box-sizing: border-box;
	background: var(--fdc-blanc, #ffffff);
	border: 1px solid var(--fdc-vert, #1F4E3A);
	border-radius: var(--fdc-r-carte, 5px);
	color: var(--fdc-vert, #1F4E3A);
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.fdc-livraison__tel:hover,
.fdc-livraison__tel:focus {
	background: var(--fdc-vert, #1F4E3A);
	color: var(--fdc-blanc, #ffffff);
	text-decoration: none;
}

/* Ligne 1 : le picto et le libellé, sur la même ligne de base. */
.fdc-livraison__tel-libelle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	color: inherit;
}

/* Ligne 2 : le numéro. Insécable et en chiffres de largeur fixe : il ne
   se coupe jamais et ne bouge pas d'un écran à l'autre. */
.fdc-livraison__tel-numero {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: inherit;
}

.fdc-livraison__tel svg {
	flex-shrink: 0;
}

/* Écrans très étroits : le numéro reste lisible, le libellé s'efface
   légèrement pour ne pas se couper en deux. */
@media (max-width: 359px) {
	.fdc-livraison__tel-libelle {
		font-size: 11.5px;
	}

	.fdc-livraison__tel-numero {
		font-size: 14.5px;
	}
}


/* ---------------------------------------------------------------
   Panier et page de paiement
   --------------------------------------------------------------- */

/* Largeur du bouton radio de votre thème, retrait de la date comprise.
   Si les noms ne s'alignent pas avec le rond, c'est la seule valeur à
   corriger : ajustez-la dans « Apparence > Personnaliser > CSS ». */
:root {
	--fdc-radio: 22px;
}

.fdc-tunnel-date {
	display: block;
	margin: 3px 0 15px var(--fdc-radio);
	font-family: var(--fdc-sans, inherit);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--fdc-gris, #5F5E5A);
}

/* Deux colonnes : le nom à gauche, le prix à droite.

   Le libellé de WooCommerce est un élément en ligne : un bloc placé
   dedans sort à gauche du bouton radio. On en fait donc un inline-block
   de la largeur restante, et tout ce qu'il contient — la ligne de
   colonnes comme la date — s'aligne alors naturellement sur son texte. */
label:has(> .fdc-tunnel-mode) {
	display: inline-block;
	width: calc(100% - var(--fdc-radio));
	vertical-align: top;
}

label:has(> .fdc-tunnel-mode) .fdc-tunnel-date {
	margin-left: 0;
}

.fdc-tunnel-mode {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.fdc-tunnel-mode__nom {
	flex: 1 1 auto;
	min-width: 0;
}

.fdc-tunnel-mode__prix {
	flex: 0 0 auto;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* « Offert » porte l'accent : c'est un avantage, pas une mention. */
.fdc-tunnel-mode__prix--offert {
	font-weight: 700;
	color: var(--fdc-vert, #1F4E3A);
}

.fdc-tunnel-row td {
	padding-top: 12px;
}

.fdc-tunnel-box {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 11px 12px;
	background: var(--fdc-blanc, #ffffff);
	border: 1px solid var(--fdc-filet, #E6E3DC);
	border-radius: var(--fdc-r-carte, 5px);
	color: var(--fdc-vert, #1F4E3A);
}

.fdc-tunnel-box__picto {
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--fdc-vert, #1F4E3A);
}

.fdc-tunnel-box__texte {
	margin: 0;
	font-family: var(--fdc-sans, inherit);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--fdc-encre, #232320);
}

.fdc-tunnel-box__texte strong {
	font-weight: 700;
	color: var(--fdc-encre, #232320);
}

.fdc-tunnel-box + .fdc-tunnel-note {
	margin-top: 8px;
}

.fdc-tunnel-note {
	margin: 0;
	font-family: var(--fdc-sans, inherit);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--fdc-gris, #5F5E5A);
}

.fdc-tunnel-note .fdc-tel,
.fdc-note .fdc-tel,
.fdc-livraison .fdc-tel {
	white-space: nowrap;
	font-weight: 600;
	color: var(--fdc-vert, #1F4E3A);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fdc-tunnel-note .fdc-tel:hover,
.fdc-tunnel-note .fdc-tel:focus,
.fdc-note .fdc-tel:hover,
.fdc-note .fdc-tel:focus,
.fdc-livraison .fdc-tel:hover,
.fdc-livraison .fdc-tel:focus {
	color: var(--fdc-vert-survol, #163A2A);
}