/* Socle — checkout et remerciement. Extrait du gabarit maison le 19/09/2026,
   pour être servi par-dessus le flux natif de WooCommerce. Mêmes classes, même rendu. */

	:root{ --ink:#0f172a; --muted:#64748b; --line:#e5e7eb; --link:#1d4ed8; --bg:#fff; --gray:#f8fafc; --teal:#028370; }
	*{box-sizing:border-box}
	body.co-body{margin:0;background:var(--bg);color:var(--ink);
		font-family:'Inter',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:15px;line-height:1.45;}
	a{color:inherit}
	img{max-width:100%}
	.co-det{display:block;font-size:11px;color:#6b7280;margin-top:2px}
	.co-head{border-bottom:1px solid var(--line)}
	.co-promobar{background:#0a7a3f;color:#fff;text-align:center;font-size:14px;font-weight:600;padding:9px 14px;line-height:1.35}
	.co-head-in{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:center;padding:18px 20px}
	.co-logo img{height:40px;width:auto;max-width:220px;object-fit:contain;display:block}
	.co-grid{max-width:1100px;margin:0 auto}
	@media(min-width:1024px){ .co-grid{display:grid;grid-template-columns:1fr minmax(380px,44%)} }
	.co-main{padding:24px 16px;display:flex;flex-direction:column;gap:30px}
	@media(min-width:1024px){ .co-main{padding:28px 48px 40px 20px} }
	.co-h2{font-size:20px;font-weight:700;margin:0 0 12px}
	.co-sub{font-size:12px;color:var(--muted);margin:-6px 0 12px}
	.co-field{position:relative;margin-bottom:10px}
	.co-field input,.co-field select{width:100%;height:56px;border:1px solid #cfd3d8;border-radius:8px;
		padding:8px 12px;font-size:15px;font-family:inherit;background:#fff;outline:none}
	.co-field input::placeholder{color:#8a919b}
	.co-field input:focus,.co-field select:focus{border-color:var(--ink)}
	.co-field.static label{position:absolute;left:12px;top:9px;font-size:11px;color:var(--muted);pointer-events:none}
	.co-field.static select{padding-top:20px}
	.co-addr-wrap{position:relative}
	.co-suggest{position:absolute;left:0;right:0;top:calc(100% - 6px);background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.14);z-index:60;max-height:250px;overflow:auto;display:none}
	.co-suggest.open{display:block}
	.co-suggest button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #f1f5f9;padding:11px 12px;font:inherit;font-size:14px;cursor:pointer}
	.co-suggest button:last-child{border-bottom:0}
	.co-suggest button:hover{background:#f8fafc}
	.co-row{display:grid;gap:10px}
	.co-row.c2{grid-template-columns:1fr 1fr}
	.co-check{display:flex;align-items:center;gap:8px;font-size:14px;color:#374151;margin-top:8px}
	.co-check input{width:16px;height:16px;accent-color:var(--ink)}
	.co-phone{display:flex;gap:8px}
	.co-phone .pfx{display:flex;align-items:center;gap:4px;height:56px;border:1px solid #cfd3d8;border-radius:8px;padding:0 12px;color:#374151;background:#fff;white-space:nowrap}
	.co-phone input{flex:1}
	/* Mode d'expédition */
	.co-ship label{display:flex;align-items:center;justify-content:space-between;cursor:pointer;
		background:var(--gray);border-radius:8px;border:1px solid var(--accent,var(--teal));padding:12px 16px;gap:12px}
	.co-ship{margin-bottom:24px}
	.co-ship .t{font-size:14px;font-weight:700}
	.co-ship .s{font-size:14px;color:var(--muted)}
	.co-ship .r{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
	.co-ship .free{font-size:14px;font-weight:700}
	/* Paiement InSite */
	.co-pay{border:1px solid var(--line);border-radius:10px;background:#fff;min-height:150px;overflow:hidden;padding:6px}
	.co-pay iframe{width:100%;border:0;background:#fff}
	.co-pay .ph{color:var(--muted);font-size:13px;text-align:center;padding:36px 20px}
	.co-pay-btn{width:100%;border:0;border-radius:10px;background:var(--accent,#0a0a0a);color:var(--accent-texte,#fff);padding:16px;font-size:15px;font-weight:700;cursor:pointer;margin-top:16px}
	.co-pay-btn:hover{opacity:.88}
	.co-pay-btn:disabled{opacity:.5;cursor:default}
	.co-paybadges{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px}
	.co-paybadges svg{height:26px;width:auto;display:block}
	/* Dans #payment (rafraîchi en AJAX), une règle de WooCommerce écrase la largeur : les badges
	   tombaient à 0 px, présents dans le DOM mais invisibles. Largeurs posées d'après leur viewBox. */
	#payment .co-paybadges{width:100%;margin-top:14px}
	#payment .co-paybadges svg{flex:none;height:26px;width:38px}
	#payment .co-paybadges svg[aria-label="Google Pay"]{width:50px}
	.co-err{color:#dc2626;font-size:14px;margin-top:10px}
	/* Modal paiement (mode iframe du plugin) */
	.co-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:99999;padding:16px}
	.co-modal-overlay.open{display:flex}
	.co-modal{background:#fff;border-radius:12px;width:100%;max-width:480px;max-height:94vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.35)}
	.co-modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
	.co-modal-head .t{font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px}
	.co-modal-close{background:none;border:0;font-size:24px;line-height:1;cursor:pointer;color:#6b7280}
	.co-modal-body{flex:1;overflow:auto;min-height:440px;background:#fff}
	.co-modal-body iframe{width:100%;height:540px;border:0;display:block}
	/* Paiement : l'iframe remplace le formulaire (colonne gauche) et prend toute la hauteur */
	.co-pay.full{padding:0;border:0;min-height:0;overflow:visible}
	.co-pay.full iframe{width:100%;height:calc(100vh - 160px);min-height:640px;border:0;display:block;background:#fff}
	.co-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;font:inherit;font-weight:700;font-size:14px;color:#0f172a;cursor:pointer;margin-bottom:12px}
	.co-trust{display:none;margin-top:16px;padding:16px;background:#edfcf4;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.08);
		display:flex;flex-direction:column;align-items:center;text-align:center}
	.co-trust .top{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px}
	.co-trust .ex{font-weight:700;font-size:15px;color:#333}
	.co-trust .stars{display:flex;align-items:center;gap:2px}
	.co-trust .st{background:#00b67a;padding:3px 4px;display:flex;align-items:center;justify-content:center}
	.co-trust .st.half{background:linear-gradient(to right,#00b67a 70%,#e5e5e5 70%)}
	.co-trust .st svg{width:14px;height:14px;fill:#fff}
	.co-trust p{font-size:13px;color:#666;margin:0 0 8px;line-height:1.4}
	.co-trust p a{color:#0a0a0a;text-decoration:underline;text-underline-offset:2px}
	.co-trust .tp{display:flex;align-items:center;justify-content:center;gap:6px}
	.co-trust .tp .star{font-size:18px;color:#00b67a;line-height:1}
	.co-trust .tp .nm{font-weight:700;font-size:14px;color:#000}
	.co-legal{font-size:12px;color:#64748b;margin-top:16px;line-height:1.4;text-align:center}
	.co-legal a{color:#0a0a0a;text-decoration:underline;text-underline-offset:2px}
	/* Résumé */
	.co-aside{background:var(--gray);border-top:1px solid var(--line);padding:24px 16px}
	@media(min-width:1024px){ .co-aside{border-top:0;border-left:1px solid var(--line);padding:32px} }
	.co-sticky{position:sticky;top:24px}
	.co-line{display:flex;gap:12px;align-items:center;margin-bottom:14px}
	.co-thumb{width:56px;height:56px;border:1px solid var(--line);border-radius:10px;object-fit:contain;background:#fff;position:relative}
	.co-qty{position:absolute;top:-8px;right:-8px;background:#6b7280;color:#fff;border-radius:999px;min-width:20px;height:20px;font-size:11px;display:flex;align-items:center;justify-content:center;padding:0 5px}
	.co-line .nm{flex:1;font-size:14px}
	.co-line .pr{font-size:14px;font-weight:600;text-align:right;white-space:nowrap}
	.co-line .pr s{display:block;color:var(--muted);font-weight:500;font-size:12px}
	.co-tot{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-size:14px}
	.co-tot .r{display:flex;justify-content:space-between;margin-bottom:8px}
	.co-tot .grand{display:flex;justify-content:space-between;align-items:baseline;padding-top:6px}
	.co-tot .grand .lbl,.co-tot .grand .amt{font-size:18px;font-weight:700}
	.co-tot .grand .cur{font-size:12px;color:var(--muted);margin-right:8px}
	.co-promo{display:flex;gap:8px;margin:6px 0 16px}
	.co-promo input{flex:1;height:44px;border:1px solid #cfd3d8;border-radius:8px;padding:0 12px;font-family:inherit}
	.co-promo button{height:44px;padding:0 16px;border:1px solid #cfd3d8;border-radius:8px;background:#fff;cursor:pointer;font-weight:600}
	.co-promo button:disabled{opacity:.55;cursor:default}
	.co-promo-msg{font-size:13px;margin:6px 0 0}
	.co-coupon-remove{background:none;border:0;color:#0a7a3f;font-size:17px;line-height:1;
		cursor:pointer;padding:0 0 0 6px;opacity:.65}
	.co-coupon-remove:hover{opacity:1}
	.co-empty{max-width:1100px;margin:0 auto;padding:80px 20px;text-align:center;color:#4b5563}
	/* Résumés repliables (mobile) — masqués sur desktop où la sidebar prend le relais */
	.co-summary{display:none}
	/* Sous 1024 px, comme sur A+ / Lamier : le récapitulatif est replié derrière la barre
	   « Résumé de la commande ⌄ prix », en haut et en bas du formulaire. Un clic l'ouvre AU-DESSUS
	   du formulaire. C'est l'unique `#order_review` (rafraîchi par WooCommerce) : les barres ne
	   portent que le prix, renvoyé en fragment. */
	@media(max-width:1023px){
		.co-grid{display:flex;flex-direction:column}
		.co-aside{display:none;order:-1;border-top:0;border-bottom:1px solid var(--line)}
		.co-form.sum-open .co-aside{display:block}
		.co-summary{display:block;background:var(--gray);border-bottom:1px solid var(--line)}
		.co-summary-top{border-top:1px solid var(--line)}
		.co-summary-bottom{border-top:1px solid var(--line);border-bottom:0}
	}
	.co-summary-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:none;border:0;padding:15px 16px;font:inherit;cursor:pointer}
	.co-summary-toggle .lft{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:var(--link)}
	.co-summary-toggle .chev{width:16px;height:16px;transition:transform .2s}
	.co-summary.open .co-summary-toggle .chev,.co-form.sum-open .co-summary-toggle .chev{transform:rotate(180deg)}
	.co-summary-price{display:flex;align-items:baseline;gap:8px;color:var(--ink);white-space:nowrap}
	.co-summary-price s{color:var(--muted);font-size:13px;font-weight:500}
	.co-summary-price b{font-size:17px;font-weight:700}
	.co-summary-body{display:none;padding:0 16px 18px}
	.co-summary.open .co-summary-body{display:block}
	.co-eco{color:var(--teal);font-weight:700;font-size:13px;margin-top:10px}
	/* Liens légaux — tout en bas de page */
	.co-foot{border-top:1px solid var(--line);padding:22px 16px 40px}
	.co-foot nav{max-width:640px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:9px 18px}
	.co-foot a{color:var(--link);font-size:13px;text-decoration:none}
	.co-foot a:hover{text-decoration:underline}
	/* Bannière d'urgence (réservation panier) — sobre, dans la DA Darty */
	/* Express Checkout (Apple Pay / Google Pay) en haut */
	#co-express-wrap{margin-bottom:4px}
	#co-express-element{min-height:44px}
	.co-or{display:flex;align-items:center;gap:12px;color:#94a3b8;font-size:12px;font-weight:600;letter-spacing:.04em;margin:18px 0 2px}
	.co-or::before,.co-or::after{content:"";flex:1;height:1px;background:var(--line)}
	.co-urgency{display:flex;align-items:center;gap:10px;
		background:#fff5f5;border:1px solid #f4d2d2;border-left:4px solid #e21212;
		color:#3d1414;padding:11px 13px;border-radius:8px;font-size:13.5px;font-weight:600;line-height:1.3}
	.co-urgency{margin-bottom:20px}
	.co-urg-ico{width:20px;height:20px;flex:0 0 20px;color:#e21212}
	.co-urg-txt{flex:1}
	.co-urgency-time{background:#e21212;color:#fff;border-radius:6px;padding:3px 9px;
		font-weight:800;font-variant-numeric:tabular-nums;font-size:14px;white-space:nowrap;letter-spacing:.5px}
		
/* ---- Page de remerciement ---- */
:root{ --ty-ink:#0f172a; --ty-muted:#6b7280; --ty-line:#e5e7eb; --ty-accent:#0a0a0a; }
		*{box-sizing:border-box}
		body.dt-ty{margin:0;background:#fff;color:var(--ty-ink);
			font-family:'Inter',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:15px;line-height:1.45}
		.dt-ty-head{text-align:center;padding:26px 20px 10px}
		.dt-ty-head img{height:34px;width:auto;display:inline-block}
		.dt-ty-wrap{max-width:640px;margin:0 auto 60px;padding:0 20px}
		/* En-tête : numéro de commande + date, bouton de rachat à droite */
		.ty-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:18px 0 18px}
		.ty-top h1{font-size:24px;font-weight:700;margin:0 0 4px}
		.ty-top .sub{color:var(--ty-muted);font-size:14px;margin:0}
		.ty-again{flex:0 0 auto;display:inline-block;border:1px solid var(--ty-line);border-radius:8px;
			padding:9px 16px;font-size:14px;font-weight:600;text-decoration:none;color:var(--ty-ink);background:#fff}
		.ty-again:hover{background:#f8fafc}
		/* Cartes */
		.ty-card{border:1px solid var(--ty-line);border-radius:12px;background:#fff;margin-bottom:16px;overflow:hidden}
		.ty-card-in{padding:18px 20px}
		/* Lignes d'articles */
		.ty-line{display:flex;gap:14px;align-items:center;padding:10px 0}
		.ty-thumb{position:relative;flex:0 0 auto;width:56px;height:56px;border:1px solid var(--ty-line);
			border-radius:10px;background:#fff;overflow:hidden}
		.ty-thumb img{width:100%;height:100%;object-fit:contain;display:block}
		.ty-q{position:absolute;top:-8px;right:-8px;background:#1f2937;color:#fff;border-radius:999px;
			min-width:21px;height:21px;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 6px}
		.ty-nm{flex:1;font-size:14px;min-width:0}
		.ty-det{display:block;font-size:12px;color:var(--ty-muted);margin-top:2px}
		.ty-pr{font-size:14px;font-weight:600;white-space:nowrap;text-align:right}
		.ty-pr s{display:block;font-weight:500;font-size:12px;color:var(--ty-muted)}
		/* Totaux */
		.ty-tot{border-top:1px solid var(--ty-line);margin-top:12px;padding-top:14px;font-size:14px}
		.ty-tot .r{display:flex;justify-content:space-between;margin-bottom:8px}
		.ty-tot .r.eco{color:#0a7a3f;font-weight:600}
		.ty-tot .grand{display:flex;justify-content:space-between;align-items:baseline;
			border-top:1px solid var(--ty-line);margin-top:12px;padding-top:14px}
		.ty-tot .grand .lbl,.ty-tot .grand .amt{font-size:19px;font-weight:700}
		.ty-tot .grand .cur{font-size:12px;color:var(--ty-muted);margin-right:8px;font-weight:500}
		/* Coordonnées : libellé gris à gauche, valeur à droite, une ligne par bloc */
		.ty-row{display:flex;gap:20px;padding:15px 20px;border-top:1px solid var(--ty-line);font-size:14px}
		.ty-row:first-child{border-top:0}
		.ty-row .k{flex:0 0 110px;color:var(--ty-muted)}
		.ty-row .v{flex:1;min-width:0}
		.ty-row .v address{font-style:normal;line-height:1.55}
		.ty-foot{text-align:center;margin-top:26px;font-size:13px}
		.ty-foot a{color:var(--ty-muted);text-decoration:underline;text-underline-offset:2px;margin:0 9px}
		@media(max-width:600px){
			.ty-top{flex-direction:column;align-items:stretch}
			.ty-again{align-self:flex-start}
			.ty-row{flex-direction:column;gap:4px}
			.ty-row .k{flex:none}
		}

/* ---- Pied de la page de paiement (gabarit autonome) ---- */
.co-foot{border-top:1px solid var(--line);margin-top:40px;padding:22px 20px;text-align:center;font-size:13px;color:var(--muted)}
.co-foot a{margin:0 10px;color:var(--muted);text-decoration:underline}
.co-paybox{margin:0}
.co-paybody{padding:0}
.co-paybody p{margin:0 0 10px}
/* Le bouton de commande hérite du style maison, jamais de celui de WooCommerce. */
/* Couleur de LA boutique (`dt_couleur_accent`) : la règle d'origine écrivait le noir en dur ici,
   et l'emportait sur la première déclaration. */
.co-pay-btn{width:100%;border:0;border-radius:10px;background:var(--accent,var(--ink));color:var(--accent-texte,#fff);padding:16px;
	font-size:15px;font-weight:700;cursor:pointer;margin-top:16px;font-family:inherit}
.co-pay-btn:hover{opacity:.88}
.woocommerce-privacy-policy-text{font-size:12px;color:var(--muted);margin-top:12px}

/* ---- Règles que le gabarit autonome portait ailleurs, rétablies pour la surcharge ---- */
.co-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){ .co-2{grid-template-columns:1fr} }
.co-sum{padding:22px 20px}
.co-name{font-size:14px;font-weight:500}
.co-grand{font-size:17px;font-weight:700;border-top:1px solid var(--line);margin-top:8px;padding-top:12px}
.co-line-txt{flex:1;min-width:0}
.co-line-price{white-space:nowrap;font-size:14px}
.co-line-price s{color:var(--muted);font-weight:400}

/* ---- Neutraliser le rendu natif de WooCommerce dans le bloc de paiement ----
   Sans ça, le formulaire de carte s'affiche dans l'encadré lavande de WooCommerce, avec sa
   petite flèche : au milieu d'un tunnel dessiné au pixel, ça se voit immédiatement. */
.co-paybox .payment_box{background:transparent !important;border:0;margin:0;padding:0;color:inherit}
.co-paybox .payment_box::before{display:none !important}
.co-paybox ul.payment_methods{margin:0;padding:0;list-style:none;border:0}
.woocommerce-checkout .co-paybox .form-row{padding:0;margin:0}
.woocommerce-privacy-policy-text p{margin:10px 0 0}
/* Le message d'erreur de WooCommerce, au format de la page. */
.woocommerce-error,.woocommerce-NoticeGroup{list-style:none;margin:0 0 16px;padding:12px 14px;
	border:1px solid #f0c2c2;background:#fff5f5;border-radius:8px;font-size:14px;color:#8a1f1f}
/* Le fond lavande vient de `#payment` lui-même (`#payment{background:#ebe9eb}` dans la
   feuille de WooCommerce), pas de `.payment_box` — viser la seconde ne suffit pas. */
.woocommerce-checkout #payment,.co-paybox{background:transparent !important;border-radius:0}
/* La pastille de quantité déborde volontairement de la vignette : sans `overflow:visible`
   sur le cadre, elle est rognée et le chiffre disparaît. */
.ty-thumb{overflow:visible}
.ty-thumb img{border-radius:10px}
.co-thumb{overflow:visible}

/* ---- Récapitulatif : libellé à gauche, montant à droite ----
   Les lignes du total portent `co-row`, la même classe que les rangées du formulaire (une grille
   qui empile). Sans cette précision, chaque montant tombait sous son libellé. Relevé le 10/10/2026. */
.co-tot .co-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.co-tot .co-grand{padding-top:6px;font-size:18px;font-weight:700}
.co-tot .co-row-promo{color:#0a7a3f}
.co-eco{margin-top:6px;font-size:13px;font-weight:700;color:#0a7a3f;text-align:right}

/* ---- Champs de carte (moteur Tagada) ---- */
.co-card .co-field{margin-bottom:10px}
.co-card .co-row.c2{grid-template-columns:1fr 1fr}

/* ---- Messages de WooCommerce : l'icône native chevauchait la première lettre ---- */
body.co-body .woocommerce-error,body.co-body .woocommerce-message,body.co-body .woocommerce-info{
	max-width:1100px;margin:16px auto;padding:14px 16px 14px 44px;border-radius:8px;list-style:none;font-size:14px}

/* ---- Code promo du récapitulatif ---- */
.co-promo{display:flex;gap:8px;margin:14px 0 4px}
.co-promo input{flex:1;height:44px;border:1px solid #cfd3d8;border-radius:8px;padding:0 12px;font:inherit;font-size:14px}
.co-promo-btn{height:44px;border:1px solid var(--accent,var(--ink));background:#fff;color:var(--accent,var(--ink));border-radius:8px;padding:0 16px;font:inherit;font-weight:700;cursor:pointer}
.co-promo-msg{font-size:13px;color:#dc2626;min-height:0;margin-bottom:6px}
.co-promo-msg.ok{color:#0a7a3f}
.co-promo-x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:16px;margin-left:6px;line-height:1}

/* 1.5.10 — éléments du checkout de production repris dans le socle */
.co-tot .co-grand .cur{font-size:12px;color:var(--muted);margin-right:8px;font-weight:500}
.co-foot .co-legal{max-width:640px;margin:0 auto;font-size:12px}
.co-foot .co-legal a{margin:0;color:var(--ink)}
.co-addr-wrap{position:relative}
/* Desktop : le récapitulatif suit le défilement, comme le `.co-sticky` d'A+. */
@media(min-width:1024px){ #order_review .co-sum{position:sticky;top:24px} }
/* Champs carte Tagada — repris du checkout d'A+ (styles en ligne de la référence). */
.co-card .tg-champ{margin-bottom:12px}
.co-card .tg-champ label{display:block;font-size:13px;color:#475569;margin-bottom:6px}
.co-card .tg-champ input{width:100%;box-sizing:border-box;padding:12px;border:1px solid #cfd3d8;border-radius:8px;font-size:16px;background:#fff}
.co-card .tg-champ input:focus{outline:none;border-color:#0a0a0a}
.co-card .tg-ligne{display:flex;gap:10px}
.co-card .tg-ligne .tg-champ{flex:1;min-width:0}