/*
 * Office Plus — feuille unique, mobile d'abord.
 * Les styles de base valent pour le téléphone ; les @media montent en min-width
 * (600 px : tablette, 900 px : ordinateur, maquette validée en 1440 px).
 */

/* Polices servies par le site ------------------------------------------- */
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 800; font-display: swap; src: url("../fonts/poppins-800.woff2") format("woff2"); }

/* Couleurs de l'identité -------------------------------------------------- */
:root {
	--orange: #F1551F;
	--orange-texte: #C2410C;
	--peche: #FFF0E8;
	--noir: #1E1E1E;
	--noir-profond: #141416;
	--anthracite: #2A2B2F;
	--gris-fond: #F4F5F7;
	--gris-trait: #E1E2E5;
	--gris-filet: #ECEDF0;
	--gris-texte: #4A4D52;
	--gris-doux: #5F6368;
	--bleu: #5F96D6;
	--bleu-texte: #2F5E96;
	--bleu-clair: #E7F0FB;
	--vert: #51C17C;
	--vert-action: #1E7B45;
	--vert-clair: #E5F5EB;
	--blanc: #FFFFFF;
	--rayon-carte: 16px;
	--gouttiere: 16px;
}

/* Base ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body {
	margin: 0;
	background: var(--gris-fond);
	color: var(--noir);
	font: 400 15px/1.5 "Poppins", system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img, svg { max-width: 100%; height: auto; }
a { color: inherit; }
a:hover { color: var(--orange-texte); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.15; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
[hidden] { display: none !important; }

.conteneur { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--gouttiere); }
/* Un montant ne se coupe jamais en fin de ligne (« 250 / 000 FCFA »). */
.woocommerce-Price-amount { white-space: nowrap; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-evitement { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--noir); color: var(--blanc); padding: 10px 16px; border-radius: 10px; }
.lien-evitement:focus { top: 8px; }

/* Motif signature : les quatre traits du logo. */
.motif { display: block; flex: 0 0 auto; }
.motif path { fill: none; stroke-width: 3; stroke-linecap: round; }

/* Boutons -------------------------------------------------------------------- */
.bouton {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px;
	background: var(--noir); color: var(--blanc);
	font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer;
	transition: transform .1s ease, background-color .2s ease;
}
.bouton:hover { color: var(--blanc); }
.bouton:active { transform: scale(.96); }
.bouton--sombre { background: var(--noir); color: var(--blanc); }
.bouton--orange { background: var(--orange); color: var(--noir); }
.bouton--orange:hover { color: var(--noir); background: #FF6A36; }
.bouton--vert, .bouton--whatsapp { background: var(--vert-action); color: var(--blanc); }
.bouton--blanc { background: var(--blanc); color: var(--noir); }
.bouton--blanc:hover { color: var(--noir); }
.bouton--contour { border: 2px solid var(--noir); background: var(--blanc); color: var(--noir); }
.bouton--contour:hover { color: var(--noir); background: var(--gris-fond); }

/* Bandeau orange ------------------------------------------------------------- */
.bandeau { background: var(--orange); color: var(--noir); font-size: 12px; font-weight: 600; }
.bandeau__interieur { min-height: 34px; display: flex; align-items: center; justify-content: center; text-align: center; padding-block: 6px; }
.bandeau__lien { display: none; color: var(--noir); font-weight: 700; text-underline-offset: 3px; }
.bandeau__lien:hover { color: var(--noir); }

/* En-tête -------------------------------------------------------------------- */
.entete { background: var(--blanc); }
.entete__haut {
	display: grid; grid-template-columns: 44px 1fr 44px; grid-template-areas: "menu logo actions" "recherche recherche recherche";
	align-items: center; gap: 10px 8px; padding-block: 8px 14px;
}
.entete__menu { grid-area: menu; width: 44px; height: 44px; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.entete__logo { grid-area: logo; justify-self: center; display: block; }
.entete__logo img { display: block; height: 36px; width: auto; }
.recherche { grid-area: recherche; display: flex; height: 48px; border: 2px solid var(--noir); border-radius: 14px; overflow: hidden; background: var(--blanc); }
.recherche__rayon { display: none; }
.recherche__texte { flex: 1; min-width: 0; border: 0; padding: 0 14px; font-size: 14px; outline: none; background: none; }
.recherche__texte:focus-visible { outline: none; }
.recherche:focus-within { box-shadow: 0 0 0 3px rgba(95, 150, 214, .45); }
.recherche__bouton { width: 52px; border: 0; background: var(--noir); color: var(--blanc); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.entete__actions { grid-area: actions; display: flex; justify-content: flex-end; }
.action { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 44px; min-height: 44px; justify-content: center; text-decoration: none; font-size: 13px; font-weight: 600; }
.action > span:last-child { display: none; }
.action--compte, .action--devis, .action-panier { display: none; }
.action__icone, .action-panier__icone, .barre-bas__icone { position: relative; display: flex; }
.pastille-compte, .panier-compte {
	position: absolute; top: -8px; right: -10px; min-width: 18px; height: 18px; padding: 0 4px;
	border-radius: 9px; background: var(--orange); color: var(--noir);
	font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
}
.pastille-compte[hidden] { display: none; }
.liens-rapides { display: none; }

/* Tiroir des rayons (téléphone) ---------------------------------------------- */
.tiroir { position: fixed; inset: 0; z-index: 80; }
.tiroir[hidden] { display: none; }
.tiroir__fond { position: absolute; inset: 0; background: rgba(20, 20, 22, .5); }
.tiroir__panneau { position: absolute; inset: 0 auto 0 0; width: min(340px, 88vw); background: var(--blanc); overflow-y: auto; padding: 12px 12px 24px; display: flex; flex-direction: column; gap: 6px; }
.tiroir__tete { display: flex; align-items: center; justify-content: space-between; background: var(--noir); color: var(--blanc); border-radius: 12px; padding: 4px 4px 4px 14px; }
.tiroir__titre { font-weight: 700; }
.tiroir__fermer { width: 44px; height: 44px; border: 0; background: none; color: var(--blanc); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tiroir__rayons { list-style: none; margin: 0; padding: 0; }
.tiroir__rayons a, .ouverture__rayons a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: 10px; text-decoration: none; font-size: 14px; font-weight: 500; }
.tiroir__rayons a:hover, .ouverture__rayons a:hover { background: var(--peche); color: var(--noir); }
.tiroir__rayons a > span:nth-child(2), .ouverture__rayon-nom { flex: 1; }
.tiroir__rayons .icone, .ouverture__rayons .icone--chevron-d { color: #9AA0A6; }
.vignette { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; background: var(--teinte, var(--gris-fond)); display: flex; align-items: center; justify-content: center; }
.vignette img { max-width: 26px; max-height: 26px; width: auto; height: auto; object-fit: contain; }
.tiroir__appel { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--gris-fond); font-weight: 700; text-decoration: none; }
body.tiroir-ouvert { overflow: hidden; }

/* Ouverture : diaporama (+ rayons et bannières sur ordinateur) ----------------- */
.ouverture { padding-top: 14px; display: grid; gap: 20px; }
.ouverture__rayons, .ouverture__bannieres { display: none; }

.diaporama {
	position: relative; overflow: hidden; height: 470px; border-radius: 22px; color: var(--blanc);
	background-color: var(--noir); background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px); background-size: 18px 18px;
}
.diaporama__motif { position: absolute; right: 18px; top: 20px; width: 48px; z-index: 3; }
.diapo {
	position: absolute; inset: 0; padding: 26px 22px 60px; display: grid; gap: 12px;
	grid-template-rows: auto 1fr auto; grid-template-areas: "texte" "visuel" "bouton";
	opacity: 0; transform: translateX(20px); pointer-events: none; z-index: 1;
	transition: opacity .6s ease, transform .6s ease;
}
.diapo.est-active { opacity: 1; transform: none; pointer-events: auto; z-index: 2; }
.diapo__bande { position: absolute; right: -30%; top: 50%; width: 130%; height: 60px; border-radius: 40px; transform: rotate(-28deg); background: var(--orange); }
.diapo--gros .diapo__bande { background: var(--blanc); opacity: .12; }
.diapo--informatique .diapo__bande { background: var(--bleu); }
.diapo--machines .diapo__bande { background: var(--vert); }
.diapo__texte { grid-area: texte; position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 300px; }
.diapo__titre { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.diapo__titre span { display: block; color: var(--orange); }
.diapo--informatique .diapo__titre span { color: #8DB6E6; }
.diapo--machines .diapo__titre span { color: #7DD3A0; }
.diapo__sous-titre { margin: 0; font-size: 14px; color: #D6D7DA; }
.diapo__visuel { grid-area: visuel; position: relative; min-height: 0; }
.diapo__image { position: absolute; bottom: 0; width: auto; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .4)); }
.diapo__bouton { grid-area: bouton; position: relative; height: 56px; border-radius: 14px; font-size: 18px; font-weight: 800; background: var(--orange); color: var(--noir); }
.diapo__bouton:hover { color: var(--noir); }
.diapo--informatique .diapo__bouton, .diapo--machines .diapo__bouton { background: var(--blanc); }
.diapo__bouton .icone { display: none; }

/* Position des produits détourés, diapositive par diapositive (téléphone). */
.diapo--cartouches .diapo__image--1 { right: 6px; height: 150px; }
.diapo--cartouches .diapo__image--2 { left: 0; bottom: 14px; width: 180px; }
.diapo--gros .diapo__image--1 { left: 0; bottom: 8px; height: 140px; transform: rotate(-4deg); }
.diapo--gros .diapo__image--2 { left: 36px; bottom: 4px; height: 140px; }
.diapo--gros .diapo__image--3 { left: 72px; height: 140px; transform: rotate(4deg); }
.diapo--gros .diapo__image--4 { right: 0; bottom: 56px; width: 110px; }
.diapo--gros .diapo__image--5 { right: 12px; width: 118px; }
.diapo--informatique .diapo__image--1 { right: 0; bottom: 10px; height: 140px; }
.diapo--informatique .diapo__image--2 { left: 0; width: 176px; }
.diapo--machines .diapo__image--1 { right: 0; bottom: 6px; width: 166px; }
.diapo--machines .diapo__image--2 { left: 6px; height: 134px; }
.diapo--machines .diapo__image--3 { display: none; }

.diaporama__commandes { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 3; display: flex; justify-content: center; }
.diaporama__points { display: flex; }
.diaporama__point { width: 44px; height: 44px; border: 0; background: none; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.diaporama__point span { display: block; width: 6px; height: 6px; border-radius: 3px; background: var(--gris-doux); transition: width .3s ease; }
.diaporama__point[aria-current="true"] span { width: 22px; background: var(--orange); }
.diaporama__fleches { display: none; }

/* Réassurance ------------------------------------------------------------------ */
.reassurance { padding-top: 12px; }
.reassurance__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.reassurance__element { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--blanc); font-size: 12px; font-weight: 700; line-height: 1.3; }
.reassurance__element--ordinateur { display: none; }
.reassurance__rond { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.reassurance__rond .icone { width: 18px; height: 18px; }

/* Rayons défilants (téléphone) --------------------------------------------------- */
.defilant { list-style: none; margin: 0; display: flex; gap: 14px; overflow-x: auto; padding: 0 var(--gouttiere) 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
.defilant::-webkit-scrollbar { display: none; }
.rayons-defilants { padding-top: 22px; }
.rayons-defilants a { flex: 0 0 76px; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center; }
.rayons-defilants li { scroll-snap-align: start; }
.rond { width: 72px; height: 72px; border-radius: 50%; background: var(--teinte); display: flex; align-items: center; justify-content: center; }
.rond img { max-width: 46px; max-height: 46px; width: auto; height: auto; object-fit: contain; }

/* Sections et titres -------------------------------------------------------------- */
.section { padding-top: 26px; }
.titre-section { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.titre-section__texte { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 21px; font-weight: 800; }
.titre-section__motif { width: 32px; }
.titre-section__lien { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--orange-texte); font-size: 13px; font-weight: 700; text-decoration: none; }
.titre-section__lien .icone { display: none; }

/* Cartes produit -------------------------------------------------------------------- */
.produits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.produits--defilants { display: flex; gap: 10px; overflow-x: auto; margin-inline: calc(-1 * var(--gouttiere)); padding: 0 var(--gouttiere) 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.produits--defilants::-webkit-scrollbar { display: none; }
.produits--defilants > .produits__element { flex: 0 0 172px; scroll-snap-align: start; }
.produits__element { display: flex; min-width: 0; }
.carte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 12px; border-radius: var(--rayon-carte); background: var(--blanc); transition: transform .25s ease, box-shadow .25s ease; }
.carte__visuel { position: relative; height: 130px; margin-bottom: 4px; border-radius: 12px; overflow: hidden; background: var(--teinte, var(--gris-fond)); display: flex; align-items: center; justify-content: center; }
.produits--selection .carte__visuel { background: var(--teinte-forcee); }
.carte__motif { position: absolute; left: -12px; bottom: -16px; width: 110px; opacity: .3; }
.carte__motif path { stroke-width: 2.4; }
.carte__image { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.carte__image img { max-width: 78%; max-height: 100px; width: auto; height: auto; object-fit: contain; transition: transform .35s ease; }
.carte__favori { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; border: 0; background: none; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--noir); }
.carte__favori .icone { box-sizing: content-box; padding: 7px; border-radius: 50%; background: var(--blanc); width: 16px; height: 16px; }
.carte__favori[aria-pressed="true"] { color: var(--orange-texte); }
.carte__favori[aria-pressed="true"] .icone path { fill: currentColor; }
.carte__rayon { font-size: 11px; font-weight: 700; }
.carte__nom { margin: 0; min-height: 36px; font-size: 13px; font-weight: 600; line-height: 1.35; }
.carte__nom a { text-decoration: none; }
.carte__ref { display: none; font-size: 12px; color: var(--gris-doux); }
.carte__prix { margin: 0 0 4px; font-size: 15px; font-weight: 800; }
.carte__prix del { color: var(--gris-doux); font-weight: 500; font-size: .85em; }
.carte__prix ins { text-decoration: none; }
.prix-sur-demande { font-size: 14px; font-weight: 700; color: var(--gris-texte); }
.carte__bouton { margin-top: auto; height: 44px; border-radius: 10px; background: var(--orange-texte); font-size: 13px; padding: 0 10px; }
.carte__bouton .icone { display: none; }
.carte__bouton-long { display: none; }
.carte__bouton--devis { background: var(--noir); }
.carte__bouton.loading { opacity: .6; }
.carte__bouton.added { background: var(--vert-action); }
.added_to_cart.wc-forward { display: none !important; }

/* La sélection --------------------------------------------------------------------- */
.selection__tete .titre-section { margin-bottom: 4px; }
.onglets { display: flex; gap: 20px; overflow-x: auto; margin-bottom: 14px; border-bottom: 1px solid var(--gris-trait); scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; }
.onglet { flex: 0 0 auto; min-height: 46px; margin-bottom: -1px; padding: 0 2px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--gris-doux); font-size: 14px; font-weight: 700; cursor: pointer; }
.onglet[aria-selected="true"] { color: var(--noir); border-bottom-color: var(--orange); }
.panneau[hidden] { display: none; }

/* Tuiles (services, devis, agencement) ----------------------------------------------- */
.duo { display: grid; gap: 12px; }
.tuile { position: relative; overflow: hidden; border-radius: 22px; padding: 20px; display: flex; align-items: center; gap: 14px; }
.tuile--sombre { color: var(--blanc); background-color: var(--noir); background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px); background-size: 18px 18px; }
.tuile--bleue { background: var(--bleu-clair); }
.tuile--peche { background: var(--peche); }
.tuile__motif { position: absolute; left: -30px; bottom: -50px; width: 240px; opacity: .25; pointer-events: none; }
.tuile__motif path { stroke-width: 2.4; }
.tuile__texte { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.tuile__titre { margin: 0; font-size: 21px; font-weight: 800; }
.tuile__titre span { display: block; }
.tuile__sous-titre { margin: -4px 0 0; font-size: 14px; font-weight: 600; color: var(--gris-texte); }
.tuile--sombre .tuile__sous-titre { color: #D6D7DA; font-weight: 400; }
.accent-orange { color: var(--orange); }
.accent-bleu { color: var(--bleu-texte); }
.tuile .bouton { white-space: nowrap; font-size: 14px; padding: 0 14px; }
.tuile__plan { position: relative; flex: 0 0 108px; padding: 7px; border-radius: 14px; background: var(--anthracite); }
.tuile__plan svg { display: block; width: 100%; }
.tuile__produits { position: relative; flex: 0 0 112px; height: 100px; }
.tuile__produit { position: absolute; bottom: 0; filter: drop-shadow(0 10px 14px rgba(30, 30, 30, .2)); }
.tuile__produit--pc { left: 0; bottom: 10px; width: 96px; }
.tuile__produit--onduleur { right: 0; width: 58px; }

/* Devis + agencement : deux cartes qui défilent au doigt sur téléphone. */
.duo--defilant { display: flex; gap: 12px; overflow-x: auto; margin-inline: calc(-1 * var(--gouttiere)); padding: 0 var(--gouttiere) 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.duo--defilant::-webkit-scrollbar { display: none; }
.duo--defilant > .tuile { flex: 0 0 300px; scroll-snap-align: start; flex-direction: column; align-items: stretch; padding: 22px; }
.duo--defilant .tuile__texte { flex: 0 0 auto; }
.duo--defilant .tuile__plan { flex: 1; padding: 10px; }
.duo--defilant .tuile__bouton { width: 100%; height: 48px; font-size: 15px; }
.section--serree { padding-top: 22px; }

.document { position: relative; background: var(--blanc); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; transform: rotate(1.5deg); box-shadow: 0 12px 24px rgba(193, 65, 12, .12); color: var(--noir); }
.document__tete { display: flex; justify-content: space-between; align-items: baseline; }
.document__tete strong { font-size: 13px; font-weight: 800; }
.document__tete span { font-size: 10px; color: var(--gris-doux); }
.document__ligne { display: flex; justify-content: space-between; gap: 10px; }
.document__ligne b { font-weight: 700; white-space: nowrap; }
.document__ligne--trait { border-top: 1px solid var(--gris-filet); padding-top: 6px; }
.document__ligne--remise { color: var(--vert-action); font-weight: 700; }
.document__ligne--total { font-weight: 800; font-size: 13px; }
.document__ligne--total b { font-weight: 800; }

/* Nous trouver ------------------------------------------------------------------------- */
.trouver { overflow: hidden; border-radius: 22px; background: var(--blanc); display: flex; flex-direction: column; }
.trouver__plan { height: 150px; }
.trouver__plan svg { display: block; width: 100%; height: 100%; }
.trouver__infos { position: relative; overflow: hidden; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.trouver__motif { position: absolute; right: -30px; bottom: -40px; width: 200px; opacity: .2; pointer-events: none; }
.trouver__motif path { stroke-width: 2.4; }
.trouver .titre-section { margin-bottom: 0; }
.trouver .titre-section__motif { display: none; }
.trouver__ligne { position: relative; margin: 0; display: flex; gap: 10px; align-items: flex-start; font-size: 13px; font-weight: 600; }
.trouver__ligne .icone { flex: 0 0 auto; color: var(--orange-texte); width: 18px; height: 18px; }
.trouver__boutons { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.trouver__boutons .bouton { flex: 1; height: 46px; font-size: 14px; }

/* Pied de page ------------------------------------------------------------------------- */
.accueil { padding-bottom: 28px; }
.pied { background: var(--blanc); border-top: 4px solid var(--orange); padding: 28px 0 130px; font-size: 13px; color: var(--gris-texte); }
.pied__colonnes { display: flex; flex-direction: column; gap: 22px; }
.pied__marque { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pied__marque img { height: 42px; width: auto; }
.pied__telephone { font-weight: 700; color: var(--noir); text-decoration: none; }
.pied__email { text-decoration: none; }
.pied__paiements { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pied__paiements li { padding: 5px 9px; border: 1px solid var(--gris-trait); border-radius: 8px; background: var(--gris-fond); color: var(--noir); font-size: 11px; font-weight: 700; }
.pied__titre { margin: 0 0 8px; color: var(--noir); font-size: 15px; font-weight: 800; }
.pied__menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pied__menu a { text-decoration: none; }
.pied__bas { margin-top: 24px; font-size: 12px; color: var(--gris-doux); }

/* Barre du bas (téléphone) et boutons flottants (ordinateur) --------------------------- */
.barre-bas {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
	padding: 6px 8px calc(12px + env(safe-area-inset-bottom)); background: var(--blanc);
	border-top: 1px solid var(--gris-filet); box-shadow: 0 -8px 24px rgba(30, 30, 30, .06);
	font-size: 11px; font-weight: 600;
}
.barre-bas__lien { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 48px; border: 0; background: none; padding: 0; text-decoration: none; cursor: pointer; }
.barre-bas__lien.est-actif { color: var(--orange-texte); }
.barre-bas__rond { width: 56px; height: 56px; margin-top: -24px; border-radius: 50%; background: var(--vert-action); color: var(--blanc); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(30, 123, 69, .35); }
.barre-bas__lien--whatsapp:hover { color: var(--noir); }
.barre-bas .panier-compte { top: -6px; right: -12px; min-width: 16px; height: 16px; font-size: 10px; line-height: 16px; }
.flottant { display: none; }

/* Toast d'ajout au panier */
.toast {
	position: fixed; left: 50%; bottom: 96px; z-index: 90; transform: translateX(-50%);
	width: calc(100% - 32px); max-width: 420px; display: flex; align-items: center; gap: 10px;
	padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--noir); color: var(--blanc);
	font-size: 13px; font-weight: 600; box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
	animation: toast .35s ease both;
}
.toast[hidden] { display: none; }
.toast__coche { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px; background: var(--vert-action); display: flex; align-items: center; justify-content: center; }
.toast__texte { flex: 1; }
.toast a { color: var(--orange); white-space: nowrap; }
@keyframes toast { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Pages : contenu, devis, favoris ---------------------------------------------------- */
.gabarit { padding-top: 24px; padding-bottom: 48px; min-height: 50vh; }
.gabarit__titre { margin: 0 0 18px; font-size: 26px; font-weight: 800; }
.gabarit__contenu { max-width: 860px; }
.gabarit__contenu > * + * { margin-top: 1em; }
.formulaire-devis { max-width: 560px; display: flex; flex-direction: column; gap: 4px; }
.formulaire-devis p { margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
.formulaire-devis label { font-size: 14px; font-weight: 700; }
.formulaire-devis label span { font-weight: 400; color: var(--gris-doux); }
.formulaire-devis input, .formulaire-devis textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 2px solid var(--gris-trait); border-radius: 12px; background: var(--blanc); font-size: 16px; }
.formulaire-devis input:focus, .formulaire-devis textarea:focus { border-color: var(--noir); outline: none; }
.formulaire-devis .bouton { width: 100%; height: 52px; font-size: 16px; }
.formulaire-devis__piege { position: absolute !important; left: -9999px; }
.formulaire-devis__erreur { padding: 12px 14px; border-radius: 12px; background: var(--peche); color: var(--orange-texte); font-weight: 700; }
.devis-envoye { max-width: 560px; padding: 22px; border-radius: 22px; background: var(--vert-clair); }
.devis-envoye__titre { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.devis-envoye .bouton { margin-top: 12px; }
.favoris-vide { padding: 22px; border-radius: 18px; background: var(--blanc); }

/* Boutique (rayons, recherche, fiche) ------------------------------------------------- */
.page-boutique { padding-top: 18px; padding-bottom: 48px; }
.ariane { margin-bottom: 12px; font-size: 12px; color: var(--gris-doux); }
.ariane a { text-decoration: none; }
.ariane__sep { margin: 0 6px; }
.woocommerce-products-header__title, .product_title { margin: 0 0 12px; font-size: 24px; font-weight: 800; }
.pastilles { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--gouttiere)) 14px; padding: 0 var(--gouttiere) 4px; scrollbar-width: none; }
.pastille { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 2px solid var(--gris-trait); border-radius: 999px; background: var(--blanc); font-size: 13px; font-weight: 700; text-decoration: none; }
.woocommerce-result-count { margin: 0 0 8px; font-size: 13px; color: var(--gris-doux); }
.woocommerce-ordering { margin: 0 0 14px; }
.woocommerce-ordering select { min-height: 44px; padding: 0 12px; border: 2px solid var(--gris-trait); border-radius: 12px; background: var(--blanc); }
ul.products { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
ul.products::before, ul.products::after { content: none !important; }
.woocommerce-pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; }
.woocommerce-pagination a, .woocommerce-pagination span { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border-radius: 10px; background: var(--blanc); text-decoration: none; font-weight: 700; }
.woocommerce-pagination .current { background: var(--noir); color: var(--blanc); }

.related > h2, .upsells > h2 { font-size: 21px; font-weight: 800; }
.onsale { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; background: var(--orange); color: var(--noir); font-size: 12px; font-weight: 800; }

/* Formulaires de WooCommerce (compte, connexion, adresses) — dans le contenu seulement,
   pas dans la recherche de l'en-tête. */
.form-row { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.form-row label { font-size: 14px; font-weight: 700; }
.form-row .input-text, .form-row select { width: 100%; min-height: 48px; padding: 10px 14px; border: 2px solid var(--gris-trait); border-radius: 12px; background: var(--blanc); font-size: 16px; }
.form-row .input-text:focus { border-color: var(--noir); outline: none; }
:is(.gabarit, .page-boutique) .button:not(.carte__bouton), :is(.gabarit, .page-boutique) form:not(.formulaire-devis) button[type="submit"]:not(.bouton) { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--noir); color: var(--blanc); font-weight: 700; cursor: pointer; text-decoration: none; }
:is(.gabarit, .page-boutique) .button:hover { color: var(--blanc); }
/* Blocs Panier et Commande : bouton principal aux couleurs de la boutique. */
.wc-block-components-button:not(.is-link) { border-radius: 12px; background: var(--orange-texte); color: var(--blanc); font-weight: 700; }
.wc-block-components-button:not(.is-link):hover { background: var(--noir); color: var(--blanc); }
/* Produit sans photo dans le catalogue : le pictogramme du logo, discret. */
img.woocommerce-placeholder { opacity: .3; max-width: 46% !important; }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.woocommerce-MyAccount-navigation a { display: inline-flex; min-height: 40px; align-items: center; padding: 0 14px; border-radius: 999px; background: var(--blanc); text-decoration: none; font-weight: 600; font-size: 14px; }
.woocommerce-MyAccount-navigation .is-active a { background: var(--noir); color: var(--blanc); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: var(--blanc); border-left: 4px solid var(--vert-action); }
.woocommerce-error { border-left-color: var(--orange-texte); }
.woocommerce-message .button { float: right; margin-left: 12px; }

/* ============================================================================
 * Parcours d'achat (maquettes validées : fiche, devis, panier, commande)
 * ========================================================================== */

/* Sélecteur de quantité − n + */
.quantite { display: inline-flex; align-items: center; flex: 0 0 auto; height: 48px; border: 2px solid var(--gris-trait); border-radius: 12px; background: var(--blanc); }
.quantite__bouton { width: 44px; height: 100%; border: 0; background: none; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.quantite__bouton:active { transform: scale(.9); }
.quantite__champ { width: 46px; height: 100%; border: 0; background: none; padding: 0; text-align: center; font-size: 16px; font-weight: 800; -moz-appearance: textfield; appearance: textfield; }
.quantite__champ::-webkit-outer-spin-button, .quantite__champ::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantite__champ:focus { outline: none; }
.quantite:focus-within { border-color: var(--noir); }
.quantite--petite { height: 40px; }
.quantite--petite .quantite__bouton { width: 36px; }
.quantite--petite .quantite__champ { width: 40px; font-size: 15px; }

/* Puces de choix (variantes, rayons) */
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { min-width: 56px; min-height: 44px; padding: 0 14px; border: 2px solid var(--gris-trait); border-radius: 12px; background: var(--blanc); font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.puce[aria-checked="true"], .puce[aria-pressed="true"] { border-color: var(--noir); background: var(--noir); color: var(--blanc); }
.puces--petites .puce { min-width: 0; min-height: 34px; padding: 0 12px; border-radius: 999px; font-size: 12px; }

/* Barre d'action collante en bas du téléphone (fiche, devis, panier, commande) */
.barre-action {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
	display: flex; align-items: center; gap: 12px;
	padding: 10px 12px calc(14px + env(safe-area-inset-bottom)); background: var(--blanc);
	border-top: 1px solid var(--gris-filet); box-shadow: 0 -10px 30px rgba(30, 30, 30, .06);
}
.barre-action .bouton { flex: 1; height: 54px; font-size: 15px; font-weight: 800; }
.barre-action .bouton[hidden] { display: none; }
.avec-barre-action .barre-bas { display: none; }
.avec-barre-action .toast { bottom: 100px; }

/* Fiche produit */
.fiche__haut { display: flex; flex-direction: column; gap: 6px; }
.fiche__visuel { position: relative; height: 280px; border-radius: 20px; overflow: hidden; background: var(--teinte, var(--gris-fond)); display: flex; align-items: center; justify-content: center; }
.fiche__motif { position: absolute; left: -36px; bottom: -60px; width: 280px; opacity: .35; }
.fiche__motif path { stroke-width: 2.4; }
.fiche__image { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 24px; }
.fiche__image img { max-width: 86%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(30, 30, 30, .14)); }
.fiche__favori { position: absolute; top: 10px; right: 10px; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--blanc); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fiche__favori[aria-pressed="true"], .fiche__favori-texte[aria-pressed="true"] { color: var(--orange-texte); }
.fiche__favori[aria-pressed="true"] .icone path, .fiche__favori-texte[aria-pressed="true"] .icone path { fill: currentColor; }
.fiche__vignettes { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; }
.fiche__vignette { width: 52px; height: 52px; padding: 4px; border: 2px solid transparent; border-radius: 10px; background: var(--blanc); cursor: pointer; }
.fiche__vignette[aria-pressed="true"] { border-color: var(--noir); }
.fiche__vignette img { width: 100%; height: 100%; object-fit: contain; }
.fiche__infos { display: flex; flex-direction: column; gap: 6px; }
.fiche__rayon { align-self: flex-start; margin-top: 8px; font-size: 13px; font-weight: 700; text-decoration: none; }
.fiche__titre { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.15; }
.fiche__ref { font-size: 12px; color: var(--gris-doux); }
.fiche__ref[hidden] { display: none; }
.fiche__prix { margin-top: 6px; font-size: 24px; font-weight: 800; }
.fiche__prix .prix-sur-demande { font-size: 20px; }
.fiche__prix del { color: var(--gris-doux); font-size: .7em; font-weight: 500; }
.fiche__prix ins { text-decoration: none; }
.fiche__texte { margin: 0 0 8px; font-size: 14px; color: var(--gris-texte); }
.fiche__achat { display: flex; flex-direction: column; gap: 8px; }
.fiche__variantes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.fiche__etiquette { font-size: 14px; font-weight: 700; }
.fiche__ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fiche__quantite-libelle { font-size: 14px; font-weight: 700; }
.fiche__panier { display: none; }
.fiche__devis { width: 100%; min-height: 50px; margin-top: 4px; border: 2px solid var(--noir); background: var(--blanc); color: var(--noir); }
.fiche__devis:hover { color: var(--noir); }
.fiche__devis--principal { display: none; border-color: var(--orange); background: var(--orange); } /* téléphone : déjà dans la barre du bas */
.fiche__liens { display: flex; align-items: center; justify-content: center; gap: 12px; }
.fiche__whatsapp { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--vert-action); font-size: 14px; font-weight: 700; text-decoration: none; }
.fiche__favori-texte { display: none; align-items: center; gap: 8px; min-height: 44px; border: 0; background: none; padding: 0; font-size: 14px; font-weight: 700; cursor: pointer; }
.fiche__garanties { list-style: none; margin: 4px 0 0; padding: 0 14px; border-radius: 16px; background: var(--blanc); }
.fiche__garanties li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--gris-filet); font-size: 13px; font-weight: 600; }
.fiche__garanties li:first-child { border-top: 0; }
.fiche__garanties .icone { flex: 0 0 auto; color: var(--gris-texte); }
.fiche__garanties a { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.fiche__section { margin-top: 26px; }
.fiche__description { padding: 16px 14px; border-radius: 16px; background: var(--blanc); font-size: 14px; color: var(--gris-texte); }
.fiche__description > :first-child { margin-top: 0; }
.fiche__description > :last-child { margin-bottom: 0; }
.carac { margin: 0; padding: 4px 14px; border-radius: 16px; background: var(--blanc); }
.carac__ligne { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--gris-filet); font-size: 14px; }
.carac__ligne:first-child { border-top: 0; }
.carac dt { color: var(--gris-doux); }
.carac dd { margin: 0; text-align: right; font-weight: 700; }
.produits--fiche { display: flex; gap: 12px; overflow-x: auto; margin-inline: calc(-1 * var(--gouttiere)); padding: 0 var(--gouttiere) 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.produits--fiche::-webkit-scrollbar { display: none; }
.produits--fiche > .produits__element { flex: 0 0 172px; scroll-snap-align: start; }
.fiche__barre-prix { display: flex; flex-direction: column; line-height: 1.2; }
.fiche__barre-prix b { font-size: 15px; font-weight: 800; }
.fiche__barre-prix b .prix-sur-demande { font-size: 14px; }
.fiche__barre-prix span { font-size: 12px; color: var(--gris-doux); }

@media (min-width: 900px) {
	.barre-action { display: none; }
	.avec-barre-action .toast { bottom: 28px; }

	.fiche__haut { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 48px; align-items: start; }
	.fiche__visuel { height: 560px; border-radius: 24px; }
	.fiche__motif { left: -50px; bottom: -90px; width: 460px; }
	.fiche__image { padding: 48px; }
	.fiche__image img { max-width: 80%; }
	.fiche__favori { top: 16px; right: 16px; width: 52px; height: 52px; }
	.fiche__rayon { margin-top: 0; }
	.fiche__titre { font-size: 40px; line-height: 1.1; }
	.fiche__ref { font-size: 13px; }
	.fiche__prix { margin: 14px 0 2px; font-size: 32px; }
	.fiche__prix .prix-sur-demande { font-size: 26px; }
	.fiche__texte { margin-bottom: 18px; font-size: 15px; }
	.fiche__variantes { margin-bottom: 14px; }
	.fiche__ligne { justify-content: flex-start; }
	.fiche__quantite-libelle { display: none; }
	.fiche__ligne .quantite { height: 56px; }
	.fiche__ligne .quantite__bouton { width: 48px; }
	.fiche__panier { display: inline-flex; flex: 1; height: 56px; font-size: 17px; font-weight: 800; }
	.fiche__panier[hidden] { display: none; }
	.fiche__devis { min-height: 52px; margin-top: 2px; }
	.fiche__devis--principal { display: inline-flex; }
	.fiche__liens { justify-content: space-between; margin: 4px 0 14px; }
	.fiche__favori-texte { display: inline-flex; }
	.fiche__garanties { margin: 0; padding: 0; background: none; border-radius: 0; }
	.fiche__garanties li { font-size: 14px; }
	.fiche__garanties li:first-child { border-top: 1px solid var(--gris-filet); }
	.fiche__section { margin-top: 56px; }
	.fiche__description { padding: 22px 28px; font-size: 15px; }
	.carac { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; padding: 6px 28px 10px; border-radius: 18px; }
	.carac__ligne:nth-child(2) { border-top: 0; }
	.produits.produits--fiche { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; overflow: visible; margin: 0; padding: 0; }
}

/* Pages pleine largeur (devis, panier, commande) : leur propre titre. */
.gabarit--plein { padding-top: 16px; }
.gabarit--plein .gabarit__contenu { max-width: none; }
.gabarit--plein .gabarit__contenu > * + * { margin-top: 0; }

/* En-tête de page avec motif, titre et onglets (devis, panier, commande) */
.page-tete { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.devis__tete { display: flex; flex-direction: column; margin-bottom: 16px; }
.devis__titre, .page-tete__titre { display: flex; align-items: center; gap: 12px; }
.devis__motif, .page-tete__motif { width: 36px; }
.devis__titre h1, .page-tete__titre h1 { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.15; }
.devis__titre p { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--gris-texte); }
.devis__onglets { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; border-bottom: 1px solid var(--gris-trait); }
.devis__onglets button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; margin-bottom: -1px; padding: 0 2px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--gris-doux); font-size: 14px; font-weight: 700; cursor: pointer; }
.devis__onglets button[aria-selected="true"] { color: var(--noir); border-bottom-color: var(--orange); }
.devis__erreur { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--peche); color: var(--orange-texte); font-weight: 700; }
.devis__piege { position: absolute !important; left: -9999px; }

/* Étapes : Ma liste › Coordonnées › Envoi */
.etapes { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; font-weight: 600; color: #8A8F96; }
.etapes__etape + .etapes__etape::before { content: "›"; margin-right: 6px; color: #9AA0A6; font-weight: 400; }
.etapes__etape.est-courante { color: var(--noir); font-weight: 800; }
.etapes__etape.est-faite { color: var(--vert-action); }

/* Composer ma liste */
.devis__choix { display: flex; flex-direction: column; gap: 12px; }
.devis__recherche { display: flex; align-items: center; height: 48px; border: 2px solid var(--noir); border-radius: 14px; background: var(--blanc); overflow: hidden; }
.devis__recherche > .icone { flex: 0 0 auto; margin: 0 10px 0 14px; color: var(--gris-doux); }
.devis__recherche input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font-size: 16px; }
.devis__recherche input:focus { outline: none; }
.devis__recherche:focus-within { box-shadow: 0 0 0 3px rgba(95, 150, 214, .35); }
.devis__rayons-titre { display: none; }
.devis__rayons-liste { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--gouttiere)); padding: 2px var(--gouttiere); scrollbar-width: none; }
.devis__rayons-liste::-webkit-scrollbar { display: none; }
.rayon-choix { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px 0 5px; border: 2px solid var(--gris-trait); border-radius: 999px; background: var(--blanc); font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; }
.rayon-choix[aria-pressed="true"] { border-color: var(--noir); background: var(--noir); color: var(--blanc); }
.rayon-choix__vignette { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; background: var(--teinte); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rayon-choix__vignette img { max-width: 24px; max-height: 24px; object-fit: contain; }
.rayon-choix__nom--long { display: none; }
.rayon-choix__nb { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--vert-action); color: var(--blanc); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.devis__articles { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.devis__rayon-titre { margin: 4px 0 0; font-size: 17px; font-weight: 800; }
.devis__introuvable { margin: 0; padding: 16px; border-radius: 14px; background: var(--blanc); font-size: 14px; }
.devis__introuvable button { border: 0; background: none; padding: 0; color: var(--orange-texte); font-weight: 700; text-decoration: underline; cursor: pointer; }
.devis__produits { list-style: none; margin: 0; padding: 0 12px; border-radius: 16px; background: var(--blanc); }
.devis__produits:empty { display: none; }
.ligne-produit { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--gris-filet); }
.ligne-produit:last-child { border-bottom: 0; }
.ligne-produit__vignette { grid-row: span 2; width: 60px; height: 60px; border-radius: 12px; background: var(--teinte); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ligne-produit__vignette img { max-width: 46px; max-height: 46px; object-fit: contain; }
.ligne-produit__infos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ligne-produit__nom { font-size: 14px; font-weight: 600; line-height: 1.3; }
.ligne-produit__ref { font-size: 11px; color: var(--gris-doux); }
.ligne-produit__infos .puces { margin-top: 2px; }
.ligne-produit__action { display: flex; align-items: center; gap: 8px; }
.ligne-produit__ajouter { min-height: 40px; padding: 0 14px; font-size: 13px; gap: 6px; }
.ligne-produit__dix { height: 40px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--gris-fond); font-size: 13px; font-weight: 800; cursor: pointer; }

/* Ma liste : panneau à droite sur ordinateur, feuille qui monte sur téléphone */
.devis__liste {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 82vh; overflow-y: auto;
	display: flex; flex-direction: column; gap: 4px; padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
	border-radius: 22px 22px 0 0; background: var(--blanc); box-shadow: 0 -20px 50px rgba(0, 0, 0, .2);
	transform: translateY(110%); visibility: hidden; transition: transform .3s ease, visibility .3s;
}
.devis__liste::before { content: ""; align-self: center; width: 40px; height: 4px; margin-bottom: 8px; border-radius: 2px; background: var(--gris-trait); }
.devis__liste.est-ouverte { transform: none; visibility: visible; }
.devis__voile { position: fixed; inset: 0; z-index: 55; background: rgba(14, 14, 16, .5); }
.feuille-ouverte { overflow: hidden; }
.devis__liste-tete { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; margin-bottom: 6px; }
.devis__liste-tete h2 { margin: 0; font-size: 19px; font-weight: 800; }
.devis__liste-tete [data-devis-resume] { grid-row: 2; font-size: 12px; font-weight: 600; color: var(--gris-doux); }
.devis__fermer { grid-row: 1 / span 2; grid-column: 2; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--gris-fond); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.devis__vide { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 0; font-size: 14px; color: var(--gris-doux); }
.devis__vide .motif { width: 52px; }
.devis__lignes { list-style: none; margin: 0; padding: 0; }
.ligne-liste { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--gris-filet); }
.ligne-liste__vignette { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 10px; background: var(--teinte); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ligne-liste__vignette img { max-width: 34px; max-height: 34px; object-fit: contain; }
.ligne-liste__infos { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ligne-liste__infos b { font-size: 13px; font-weight: 600; }
.ligne-liste__infos span { font-size: 11px; color: var(--gris-doux); }
.ligne-liste__qte { white-space: nowrap; font-size: 13px; }
.ligne-liste__retirer { width: 36px; height: 44px; flex: 0 0 auto; border: 0; background: none; color: #9AA0A6; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ligne-liste .quantite { height: 36px; }
.ligne-liste .quantite__bouton { width: 32px; }
.ligne-liste .quantite__champ { width: 38px; font-size: 14px; }
.devis__continuer { width: 100%; height: 52px; margin-top: 12px; border-radius: 14px; font-size: 16px; font-weight: 800; }
.est-inactif { background: #C9CBCF !important; cursor: default; }
.devis__reprendre { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin-top: 4px; border: 0; background: none; color: var(--orange-texte); font-size: 13px; font-weight: 700; cursor: pointer; }
.devis__barre-liste { flex: 1; min-width: 0; display: flex; align-items: center; height: 54px; padding: 0 10px; border: 2px solid var(--gris-trait); border-radius: 14px; background: var(--blanc); text-align: left; cursor: pointer; }
.devis__apercu { display: flex; flex: 0 0 auto; }
.devis__apercu-rond { width: 30px; height: 30px; margin-right: -9px; border: 2px solid var(--blanc); border-radius: 50%; background: var(--teinte); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.devis__apercu-rond img { max-width: 20px; max-height: 20px; object-fit: contain; }
.devis__barre-texte { display: flex; flex-direction: column; margin-left: 14px; min-width: 0; line-height: 1.25; }
.devis__barre-texte b { font-size: 13px; }
.devis__barre-texte span { font-size: 11px; color: var(--gris-doux); }
.barre-action .devis__barre-continuer { flex: 0 0 auto; padding: 0 18px; gap: 6px; }

/* Coordonnées et « Écrire ma demande » */
.devis__coordonnees { display: flex; flex-direction: column; gap: 14px; }
.devis__recap-court { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 16px; background: var(--blanc); text-align: left; cursor: pointer; }
.devis__recap-court .devis__barre-texte { flex: 1; }
.devis__modifier { color: var(--orange-texte); font-size: 13px; font-weight: 700; }
.devis__carte { padding: 18px 14px; border-radius: 16px; background: var(--blanc); }
.devis__carte--champs { display: flex; flex-direction: column; gap: 14px; }
.devis__carte h2 { margin: 0; font-size: 19px; font-weight: 800; }
.champ { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.champ label { font-size: 14px; font-weight: 700; }
.champ label span { font-weight: 400; color: var(--gris-doux); }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 48px; padding: 0 14px; border: 2px solid var(--gris-trait); border-radius: 12px; background: var(--blanc); font-size: 16px; font-weight: 500; }
.champ textarea { padding: 12px 14px; resize: vertical; }
.champ :is(input, select, textarea):focus { outline: none; border-color: var(--noir); }
.devis__actions { display: none; }
.devis__recap { display: none; }
.piece { display: flex; align-items: center; gap: 12px; padding: 12px; border: 2px dashed #C9CBCF; border-radius: 14px; background: #FAFAFB; cursor: pointer; }
.piece:focus-within { border-color: var(--noir); }
.piece__icone { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; background: var(--blanc); display: flex; align-items: center; justify-content: center; }
.piece__texte { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.piece__texte b { font-size: 14px; overflow-wrap: anywhere; }
.piece__texte span { font-size: 12px; color: var(--gris-doux); }
.piece__bouton { display: none; }
.devis__illustration { display: none; }

/* Confirmation */
.devis__envoye-grille { display: flex; flex-direction: column; gap: 14px; }
.envoye { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px 20px; border-radius: 20px; background: var(--vert-clair); }
.envoye__motif { position: absolute; right: -40px; top: -48px; width: 170px; opacity: .3; }
.envoye__motif path { stroke-width: 2.4; }
.envoye > :not(.envoye__motif) { position: relative; }
.envoye__coche { width: 50px; height: 50px; border-radius: 50%; background: var(--vert-action); color: var(--blanc); display: flex; align-items: center; justify-content: center; }
.envoye__titre { margin: 4px 0 0; font-size: 26px; font-weight: 800; }
.envoye__texte { margin: 0; font-size: 15px; font-weight: 600; color: #34495E; }
.envoye__numero { font-size: 12px; color: var(--gris-doux); }
.envoye__boutons { align-self: stretch; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.envoye__boutons .bouton { height: 50px; border-radius: 14px; }
.envoye__nouvelle { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; }

@media (min-width: 900px) {
	.gabarit--plein { padding-top: 26px; }
	.devis__tete { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; border-bottom: 1px solid var(--gris-trait); }
	.devis__titre { gap: 14px; padding-bottom: 16px; }
	.devis__motif, .page-tete__motif { width: 44px; }
	.devis__titre h1, .page-tete__titre h1 { font-size: 32px; }
	.devis__titre p { font-size: 15px; }
	.devis__onglets { display: flex; gap: 28px; margin: 0; border-bottom: 0; }
	.devis__onglets button { min-height: 52px; font-size: 15px; gap: 8px; }
	.etapes { margin-bottom: 18px; gap: 6px 10px; font-size: 13px; }
	.etapes__etape + .etapes__etape::before { margin-right: 10px; }

	.devis__choix { display: grid; grid-template-columns: 250px minmax(0, 1fr) 380px; grid-template-areas: "rayons recherche liste" "rayons articles liste"; grid-template-rows: auto 1fr; gap: 12px 20px; align-items: start; }
	.devis__recherche { grid-area: recherche; height: 50px; }
	.devis__recherche input { font-size: 15px; }
	.devis__rayons { grid-area: rayons; display: flex; flex-direction: column; padding: 10px; border-radius: 18px; background: var(--blanc); }
	.devis__rayons-titre { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 12px 14px; border-radius: 12px; background: var(--noir); color: var(--blanc); font-size: 14px; font-weight: 700; }
	.devis__rayons-liste { flex-direction: column; gap: 0; overflow: visible; margin: 0; padding: 0; }
	.rayon-choix { height: auto; min-height: 46px; padding: 5px 8px; border: 0; border-radius: 10px; background: transparent; font-weight: 500; }
	.rayon-choix:hover { background: var(--gris-fond); }
	.rayon-choix[aria-pressed="true"] { background: var(--peche); color: var(--noir); font-weight: 700; }
	.rayon-choix__vignette { border-radius: 8px; }
	.rayon-choix__nom--long { display: block; flex: 1; }
	.rayon-choix__nom--court { display: none; }
	.devis__articles { grid-area: articles; }
	.devis__rayon-titre { margin-top: 0; font-size: 18px; }
	.devis__produits { padding: 4px 16px; border-radius: 18px; }
	.ligne-produit { display: flex; align-items: center; gap: 14px; }
	.ligne-produit__vignette { width: 64px; height: 64px; flex: 0 0 auto; }
	.ligne-produit__vignette img { max-width: 50px; max-height: 50px; }
	.ligne-produit__infos { flex: 1; }
	.ligne-produit__nom { font-size: 15px; }
	.ligne-produit__ref { font-size: 12px; }
	.ligne-produit__ajouter { min-height: 42px; padding: 0 16px; font-size: 14px; }
	.ligne-produit .quantite { height: 42px; }

	.devis__liste { grid-area: liste; position: sticky; top: 20px; z-index: auto; max-height: none; overflow: visible; padding: 20px; border-radius: 18px; box-shadow: 0 12px 30px rgba(30, 30, 30, .06); transform: none; visibility: visible; transition: none; }
	.devis__liste::before, .devis__fermer, .devis__voile { display: none; }
	.devis__liste-tete { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
	.devis__liste-tete h2 { font-size: 20px; }
	.devis__vide .motif { width: 56px; }

	.devis__coordonnees { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: start; }
	.devis__recap-court { display: none; }
	.devis__carte { padding: 28px; border-radius: 18px; }
	.devis__carte--champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
	.devis__carte--champs h2, .champ--large { grid-column: 1 / -1; }
	.devis__carte h2 { font-size: 22px; }
	.champ input, .champ select, .champ textarea { font-size: 15px; }
	.devis__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
	.devis__envoyer { height: 54px; padding: 0 28px; border-radius: 14px; font-size: 17px; font-weight: 800; }
	.devis__retour { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border: 0; background: none; font-size: 14px; font-weight: 700; cursor: pointer; }
	.devis__recap { display: block; padding: 22px; }
	.devis__recap-tete { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
	.devis__recap-tete h2 { font-size: 18px; }
	.devis__recap-tete button { min-height: 40px; border: 0; background: none; color: var(--orange-texte); font-size: 13px; font-weight: 700; cursor: pointer; }
	.devis__recap-total { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--gris-filet); font-size: 13px; font-weight: 600; color: var(--gris-texte); }
	.devis__message-grille { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: start; }
	.piece { gap: 14px; padding: 16px 18px; }
	.piece__icone { width: 44px; height: 44px; }
	.piece__bouton { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border: 2px solid var(--noir); border-radius: 10px; font-size: 13px; font-weight: 700; }
	.devis__illustration { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 18px; padding: 28px 28px 96px; border-radius: 22px; background: var(--peche); }
	.devis__illustration-motif { position: absolute; left: -30px; bottom: -110px; width: 300px; opacity: .35; }
	.devis__illustration-motif path { stroke-width: 2.4; }
	.devis__illustration-titre { position: relative; margin: 0; font-size: 22px; font-weight: 800; }
	.feuille-devis { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 18px 20px; border-radius: 14px; background: var(--blanc); box-shadow: 0 20px 40px rgba(193, 65, 12, .15); transform: rotate(2deg); font-size: 13px; }
	.feuille-devis__ligne { display: flex; justify-content: space-between; gap: 10px; }
	.feuille-devis__ligne--tete { align-items: baseline; }
	.feuille-devis__ligne--tete b { font-size: 15px; font-weight: 800; }
	.feuille-devis__ligne--tete span { font-size: 11px; color: var(--gris-doux); }
	.feuille-devis__ligne--tete + .feuille-devis__ligne, .feuille-devis__ligne--remise { padding-top: 9px; border-top: 1px solid var(--gris-filet); }
	.feuille-devis__ligne--remise { color: var(--vert-action); font-weight: 700; }
	.feuille-devis__ligne--total { font-size: 14px; font-weight: 800; }

	.devis__envoye-grille { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: start; }
	.envoye { gap: 14px; padding: 36px; border-radius: 22px; }
	.envoye__motif { right: -50px; top: -40px; width: 320px; }
	.envoye__coche { width: 56px; height: 56px; }
	.envoye__titre { margin: 0; font-size: 32px; }
	.envoye__texte { font-size: 16px; }
	.envoye__boutons { flex-direction: row; flex-wrap: wrap; align-self: flex-start; gap: 10px; }
	.envoye__boutons .bouton { padding: 0 20px; }
	.devis--envoye .devis__recap { padding: 22px; }
	.devis--envoye .devis__recap h2 { margin-bottom: 8px; font-size: 18px; }
	.offre__action .envoye__motif { width: 200px; right: -50px; top: -70px; }
	.offre__action .envoye__titre { font-size: 26px; padding-right: 60px; }
}

/* Panier */
.page-tete--parcours { margin-bottom: 14px; }
.page-tete--parcours .etapes { margin: 6px 0 0; }
.panier { display: flex; flex-direction: column; gap: 14px; }
.panier__articles { padding: 4px 14px; border-radius: 16px; background: var(--blanc); }
.panier__entetes { display: none; }
.ligne-panier { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto auto; grid-template-areas: "v i i x" "v q t t"; gap: 6px 12px; padding: 14px 0; border-top: 1px solid var(--gris-filet); }
.ligne-panier:first-child { border-top: 0; }
.ligne-panier__vignette { grid-area: v; width: 68px; height: 68px; border-radius: 12px; background: var(--teinte); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ligne-panier__vignette img { max-width: 54px; max-height: 54px; width: auto; height: auto; object-fit: contain; }
.ligne-panier__infos { grid-area: i; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ligne-panier__nom { font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.ligne-panier__details { font-size: 11px; color: var(--gris-doux); }
.ligne-panier__gros { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; color: var(--orange-texte); font-size: 12px; font-weight: 700; }
.ligne-panier__prix { display: none; }
.ligne-panier__quantite { grid-area: q; }
.ligne-panier__quantite .quantite { height: 40px; }
.ligne-panier__quantite .quantite__bouton { width: 38px; }
.ligne-panier__quantite .quantite__champ { width: 42px; font-size: 15px; }
.ligne-panier__total { grid-area: t; align-self: center; justify-self: end; font-size: 15px; white-space: nowrap; }
.ligne-panier__retirer { grid-area: x; }
.ligne-panier__retirer a { width: 36px; height: 36px; margin: -6px -6px 0 0; display: flex; align-items: center; justify-content: center; color: #9AA0A6; }
.panier__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 8px; border-top: 1px solid var(--gris-filet); }
.panier__continuer { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 700; text-decoration: none; }
.panier__maj { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.panier__maj:focus { position: static !important; width: auto; height: auto; clip: auto; min-height: 40px; padding: 0 14px; border: 2px solid var(--noir); border-radius: 10px; background: var(--blanc); font-weight: 700; }
.panier__totaux { padding: 16px 14px; border-radius: 16px; background: var(--blanc); }
.panier__totaux h2 { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.totaux { font-size: 14px; }
.totaux__ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; }
.totaux__ligne:first-child { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--gris-filet); }
.totaux__frais { color: var(--gris-doux); font-weight: 600; }
.totaux__frais.est-offerte { color: var(--vert-action); font-weight: 700; }
.totaux__ligne--total { margin-top: 6px; padding-top: 12px; border-top: 2px solid var(--noir); }
.totaux__ligne--total b:first-child { font-size: 16px; }
.totaux__ligne--total b:last-child { font-size: 20px; font-weight: 800; }
.livraison-offerte { margin-top: 14px; }
.livraison-offerte__jauge { display: block; height: 6px; border-radius: 3px; background: var(--gris-filet); overflow: hidden; }
.livraison-offerte__jauge span { display: block; height: 100%; border-radius: 3px; background: var(--orange); }
.livraison-offerte.est-atteinte .livraison-offerte__jauge span { background: var(--vert-action); }
.livraison-offerte__texte { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--gris-texte); }
.livraison-offerte__texte b { color: var(--orange-texte); }
.livraison-offerte.est-atteinte .livraison-offerte__texte { color: var(--vert-action); }
.panier__boutons { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.panier__commander { display: none; }
.panier__devis { min-height: 50px; border-radius: 14px; font-size: 14px; }
.panier__paiement { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; font-size: 13px; font-weight: 600; color: var(--gris-texte); }
.panier__barre-total { display: flex; flex-direction: column; line-height: 1.2; }
.panier__barre-total span { font-size: 12px; color: var(--gris-doux); }
.panier__barre-total b { font-size: 16px; font-weight: 800; white-space: nowrap; }
.panier-vide { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 20px; border-radius: 18px; background: var(--blanc); text-align: center; }
.panier-vide__motif { width: 70px; }
.panier-vide__titre { margin: 0; font-size: 18px; font-weight: 700; color: var(--gris-texte); }
.panier-vide__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.panier-vide__boutons .bouton { min-height: 50px; border-radius: 14px; }

/* Commande */
.commande { display: flex; flex-direction: column; gap: 14px; }
.commande > .woocommerce-NoticeGroup, .commande > .woocommerce-error, .commande > .woocommerce-message { grid-column: 1 / -1; }
.commande__sections { display: flex; flex-direction: column; gap: 14px; }
.commande__carte { padding: 16px 14px; border-radius: 16px; background: var(--blanc); }
.titre-numero { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 18px; font-weight: 800; }
.titre-numero__n { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: var(--noir); color: var(--blanc); font-size: 14px; display: flex; align-items: center; justify-content: center; }
.commande__champs, .commande__adresse { display: flex; flex-direction: column; gap: 14px; }
.commande__adresse { margin-top: 14px; }
.commande .form-row { margin: 0; }
.commande .form-row .input-text, .commande .form-row select { font-weight: 500; }
.commande .required { color: var(--orange-texte); text-decoration: none; border: 0; }
.commande .optional { font-weight: 400; color: var(--gris-doux); }
#billing_country_field { display: none; }
.choix-cartes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.choix-carte { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; border: 2px solid var(--gris-trait); border-radius: 14px; background: #FAFAFB; cursor: pointer; }
.choix-carte__rond { width: 22px; height: 22px; flex: 0 0 auto; border: 2px solid var(--gris-trait); border-radius: 50%; }
.choix-carte__texte { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.choix-carte__texte b { font-size: 14px; }
.choix-carte__texte span { font-size: 12px; color: var(--gris-doux); }
.choix-carte > .icone { flex: 0 0 auto; color: var(--gris-texte); }
.choix-carte:has(input:checked), input:checked + .choix-carte { border-color: var(--noir); background: var(--blanc); }
.choix-carte:has(input:checked) .choix-carte__rond, input:checked + .choix-carte .choix-carte__rond { border-color: var(--noir); background: var(--orange); box-shadow: inset 0 0 0 4px var(--blanc); }
.choix-carte:has(input:focus-visible), input:focus-visible + .choix-carte { outline: 3px solid var(--bleu); outline-offset: 2px; }
.payment_box { margin-top: 12px; }
.commande__boutique { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 13px; font-weight: 600; }
.commande__recap-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.commande__recap h2 { margin: 0; font-size: 18px; font-weight: 800; }
.commande__recap-tete a { color: var(--orange-texte); font-size: 13px; font-weight: 700; }
.recap__lignes { list-style: none; margin: 6px 0 0; padding: 0; }
.ligne-recap { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--gris-filet); font-size: 13px; }
.ligne-recap__vignette { position: relative; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 9px; background: var(--teinte); display: flex; align-items: center; justify-content: center; }
.ligne-recap__vignette img { max-width: 30px; max-height: 30px; width: auto; height: auto; object-fit: contain; }
.ligne-recap__qte { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--noir); color: var(--blanc); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ligne-recap__nom { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; line-height: 1.3; }
.ligne-recap__nom span { font-size: 11px; font-weight: 400; color: var(--gris-doux); }
.ligne-recap__montant { white-space: nowrap; }
.recap__infos { margin: 0; font-size: 13px; }
.recap__infos div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--gris-filet); }
.recap__infos dt { color: var(--gris-doux); }
.recap__infos dd { margin: 0; font-weight: 700; text-align: right; }
.commande__valider {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0;
	padding: 10px 12px calc(14px + env(safe-area-inset-bottom)); background: var(--blanc);
	border-top: 1px solid var(--gris-filet); box-shadow: 0 -10px 30px rgba(30, 30, 30, .06);
}
.commande__bouton { width: 100%; height: 54px; border-radius: 14px; font-size: 16px; font-weight: 800; }
.commande__note { display: none; }
.envoye__note { position: relative; font-size: 12px; color: var(--gris-texte); }
.totaux__ligne--remise { color: var(--vert-action); }
.offre { padding-top: 8px; }
.offre .recap__lignes { margin-top: 0; }
.offre__note { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--gris-fond); font-size: 13px; color: var(--gris-texte); }
.offre__action form { margin: 0; }
.offre__action .envoye__motif { width: 150px; right: -40px; top: -52px; }
.offre__action .envoye__titre { font-size: 22px; }
.offre__action .bouton--orange { min-width: 220px; }
.quantite-fixe { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 40px; border-radius: 12px; background: var(--gris-fond); font-weight: 800; }

@media (min-width: 900px) {
	.page-tete--parcours { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
	.page-tete--parcours .etapes { margin: 0; }
	.panier { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
	.panier__articles { padding: 8px 24px 12px; border-radius: 18px; }
	.panier__entetes { display: grid; grid-template-columns: 84px minmax(0, 1fr) 130px 140px 140px 44px; gap: 16px; padding: 10px 0; font-size: 12px; font-weight: 700; color: var(--gris-doux); }
	.panier__entetes span:nth-child(3), .panier__entetes span:nth-child(5) { text-align: right; }
	.panier__entetes span:nth-child(4) { text-align: center; }
	.ligne-panier { grid-template-columns: 84px minmax(0, 1fr) 130px 140px 140px 44px; grid-template-areas: "v i p q t x"; align-items: center; gap: 16px; padding: 16px 0; }
	.ligne-panier:first-child { border-top: 1px solid var(--gris-filet); }
	.ligne-panier__vignette { width: 84px; height: 84px; border-radius: 14px; }
	.ligne-panier__vignette img { max-width: 66px; max-height: 66px; }
	.ligne-panier__nom { font-size: 15px; }
	.ligne-panier__details { font-size: 12px; }
	.ligne-panier__gros { margin-top: 4px; font-size: 13px; }
	.ligne-panier__prix { grid-area: p; display: block; text-align: right; font-size: 14px; color: var(--gris-texte); }
	.ligne-panier__quantite { justify-self: center; }
	.ligne-panier__total { text-align: right; }
	.ligne-panier__retirer a { width: 44px; height: 44px; margin: 0; }
	.panier__recap { position: sticky; top: 20px; }
	.panier__totaux { padding: 22px; border-radius: 18px; box-shadow: 0 12px 30px rgba(30, 30, 30, .06); }
	.panier__totaux h2 { font-size: 20px; }
	.totaux__ligne--total b:last-child { font-size: 24px; }
	.panier__boutons { margin-top: 18px; }
	.panier__commander { display: inline-flex; height: 56px; border-radius: 14px; font-size: 17px; font-weight: 800; }
	.panier__paiement { justify-content: flex-start; }

	.commande { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: start; }
	.commande__sections { gap: 16px; }
	.commande__carte { padding: 24px 26px; border-radius: 18px; }
	.titre-numero { gap: 12px; margin-bottom: 16px; font-size: 20px; }
	.commande__champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
	.commande__adresse { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px 18px; }
	.choix-cartes { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
	.choix-carte { min-height: 64px; }
	.commande__recap { position: sticky; top: 20px; padding: 22px; box-shadow: 0 12px 30px rgba(30, 30, 30, .06); }
	.commande__recap h2 { font-size: 20px; }
	.commande__valider { position: static; padding: 0; margin-top: 18px; border: 0; box-shadow: none; background: none; }
	.commande__bouton { height: 56px; font-size: 17px; }
	.commande__note { display: block; margin: 12px 0 0; font-size: 12px; color: var(--gris-doux); text-align: center; }
}

/* ============================================================================
 * Tablette (≥ 600 px)
 * ========================================================================== */
@media (min-width: 600px) {
	:root { --gouttiere: 24px; }
	.produits, ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.duo--defilant > .tuile { flex-basis: 340px; }
}

/* ============================================================================
 * Ordinateur (≥ 900 px) — maquette validée en 1440 px
 * ========================================================================== */
@media (min-width: 900px) {
	:root { --gouttiere: 28px; --rayon-carte: 18px; }

	.bandeau { font-size: 13px; }
	.bandeau__interieur { min-height: 40px; justify-content: space-between; }
	.bandeau__lien { display: inline; }

	.entete__haut { display: flex; flex-wrap: wrap; gap: 24px; padding-block: 16px; }
	.entete__menu { display: none; }
	.entete__logo img { height: 50px; }
	.recherche { flex: 1 1 340px; height: 50px; }
	.recherche__rayon { display: block; flex: 0 0 auto; max-width: 180px; border: 0; padding: 0 12px 0 16px; background: var(--gris-fond); font-size: 13px; font-weight: 600; cursor: pointer; }
	.recherche__bouton { width: 58px; }
	.entete__actions { gap: 18px; align-items: center; }
	.action > span:last-child { display: inline; }
	.action--compte, .action--devis { display: flex; }
	.action-panier { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 14px; background: var(--noir); color: var(--blanc); text-decoration: none; }
	.action-panier:hover { color: var(--blanc); }
	.action-panier__texte { display: flex; flex-direction: column; line-height: 1.2; }
	.action-panier__libelle { font-size: 11px; color: #C9CBCF; }
	.panier-total { font-size: 13px; font-weight: 700; }
	.liens-rapides { display: block; border-top: 1px solid var(--gris-filet); }
	.liens-rapides__liste { list-style: none; margin: 0; padding: 0; min-height: 52px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; font-size: 14px; font-weight: 600; }
	.liens-rapides__liste a { text-decoration: none; }
	.liens-rapides__liste li:last-child a { color: var(--orange-texte); }

	/* Ouverture : rayons | diaporama | bannières */
	.ouverture { padding-top: 24px; grid-template-columns: 290px minmax(0, 2fr) minmax(260px, 1fr); }
	.ouverture__rayons { display: flex; flex-direction: column; padding: 10px; border-radius: 18px; background: var(--blanc); }
	.ouverture__rayons ul { list-style: none; margin: 0; padding: 0; }
	.ouverture__rayons a { min-height: 46px; }
	.ouverture__rayons li:last-child { margin-top: 4px; border-top: 1px solid var(--gris-filet); padding-top: 4px; }
	.ouverture__rayons-titre { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 12px 14px; border-radius: 12px; background: var(--noir); color: var(--blanc); font-size: 14px; font-weight: 700; }
	.ouverture__bannieres { display: flex; flex-direction: column; gap: 20px; }

	.diaporama { height: auto; min-height: 540px; background-size: 22px 22px; }
	.diaporama__motif { right: 36px; top: 36px; width: 76px; }
	.diapo { padding: 44px; grid-template-rows: auto auto 1fr; grid-template-areas: "texte" "bouton" "visuel"; gap: 0; }
	.diapo__bande { right: -18%; top: 52%; width: 110%; height: 84px; border-radius: 50px; }
	.diapo__texte { gap: 16px; max-width: 420px; }
	.diapo__titre { font-size: 50px; }
	.diapo__titre span { display: inline; }
	.diapo__sous-titre { font-size: 17px; }
	.diapo__bouton { justify-self: start; margin-top: 24px; height: auto; padding: 16px 28px; }
	.diapo__bouton .icone { display: block; }
	.diapo__visuel { margin-bottom: 30px; }
	.diapo--cartouches .diapo__image--1 { right: 4%; bottom: 0; height: 200px; }
	.diapo--cartouches .diapo__image--2 { left: auto; right: 34%; bottom: 10px; width: 240px; }
	.diapo--gros .diapo__image--1 { left: auto; right: 44%; height: 196px; bottom: 8px; }
	.diapo--gros .diapo__image--2 { left: auto; right: 36%; height: 196px; bottom: 4px; }
	.diapo--gros .diapo__image--3 { left: auto; right: 28%; height: 196px; }
	.diapo--gros .diapo__image--4 { right: 3%; bottom: 70px; width: 150px; }
	.diapo--gros .diapo__image--5 { right: 9%; width: 160px; }
	.diapo--informatique .diapo__image--1 { right: 6%; bottom: 10px; height: 190px; }
	.diapo--informatique .diapo__image--2 { left: auto; right: 36%; width: 230px; }
	.diapo--machines .diapo__image--1 { right: 4%; bottom: 0; width: 220px; }
	.diapo--machines .diapo__image--2 { left: auto; right: 42%; height: 180px; }
	.diapo--machines .diapo__image--3 { display: block; right: 28%; width: 124px; }
	.diaporama__commandes { left: 44px; right: 32px; bottom: 22px; justify-content: space-between; align-items: center; }
	.diaporama__points { gap: 4px; }
	.diaporama__point span { height: 8px; width: 8px; border-radius: 4px; }
	.diaporama__point[aria-current="true"] span { width: 28px; }
	.diaporama__fleches { display: flex; gap: 8px; }
	.diaporama__fleche { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--gris-doux); background: transparent; color: var(--blanc); display: flex; align-items: center; justify-content: center; cursor: pointer; }
	.diaporama__fleche--suivante { border: 0; background: var(--blanc); color: var(--noir); }

	.banniere { position: relative; flex: 1; min-height: 260px; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 22px; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease; }
	.banniere:hover { color: var(--noir); transform: translateY(-4px); box-shadow: 0 20px 40px rgba(30, 30, 30, .1); }
	.banniere--vert { background: var(--vert-clair); }
	.banniere--bleu { background: var(--bleu-clair); }
	.banniere__motif { position: absolute; left: -30px; bottom: -40px; width: 300px; opacity: .3; }
	.banniere__motif path { stroke-width: 2.4; }
	.banniere__titre { position: relative; font-size: 26px; font-weight: 800; }
	.banniere__lien { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #1E6B3E; }
	.banniere--bleu .banniere__lien { color: #1F4E8A; }
	.banniere__image { position: absolute; filter: drop-shadow(0 12px 18px rgba(30, 30, 30, .18)); transition: transform .4s ease; }
	.banniere:hover .banniere__image { transform: scale(1.05); }
	.banniere__image--classeur { right: 108px; bottom: 16px; height: 150px; width: auto; }
	.banniere__image--post-it { right: 14px; bottom: 18px; width: 130px; }
	.banniere__image--split { left: 20px; bottom: 26px; width: 150px; }
	.banniere__image--frigo { right: 18px; bottom: 0; height: 170px; width: auto; }

	.reassurance { padding-top: 20px; }
	.reassurance__liste { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; border-radius: 18px; background: var(--blanc); }
	.reassurance__element { padding: 16px 20px; border-radius: 0; background: none; font-size: 14px; gap: 12px; }
	.reassurance__element--ordinateur { display: flex; }
	.reassurance__rond { width: 44px; height: 44px; }
	.reassurance__rond .icone { width: 22px; height: 22px; }
	.rayons-defilants { display: none; }

	.section { padding-top: 56px; }
	.section--serree { padding-top: 20px; }
	.titre-section { margin-bottom: 22px; }
	.titre-section__texte { gap: 14px; font-size: 30px; }
	.titre-section__motif { width: 44px; }
	.titre-section__lien { font-size: 14px; }
	.titre-section__lien .icone { display: block; }

	.produits, ul.products { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
	.produits--defilants { display: grid; overflow: visible; margin-inline: 0; padding: 0; }
	.produits--defilants > .produits__element { flex: none; }
	.carte { gap: 6px; padding: 12px 12px 14px; }
	.carte:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(30, 30, 30, .1); }
	.carte:hover .carte__image img { transform: scale(1.07); }
	.carte__visuel { height: 180px; border-radius: 14px; margin-bottom: 6px; }
	.produits--selection .carte__visuel { height: 190px; }
	.carte__motif { left: -16px; bottom: -22px; width: 150px; }
	.carte__image img { max-width: 74%; max-height: 140px; }
	.carte__favori { top: 6px; right: 6px; }
	.carte__favori .icone { width: 18px; height: 18px; padding: 13px; }
	.carte__rayon { font-size: 12px; }
	.carte__nom { min-height: 40px; font-size: 15px; }
	.carte__ref { display: block; }
	.carte__prix { margin: 2px 0 8px; font-size: 19px; }
	.carte__bouton { height: 44px; border-radius: 12px; font-size: 14px; gap: 8px; }
	.carte__bouton .icone, .carte__bouton-long { display: inline; }
	.carte__bouton .icone { display: block; }

	.selection__tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 22px; border-bottom: 1px solid var(--gris-trait); }
	.selection__tete .titre-section { margin-bottom: 0; padding-bottom: 14px; }
	.onglets { gap: 26px; margin-bottom: 0; border-bottom: 0; }
	.onglet { min-height: 48px; font-size: 15px; }

	.duo, .duo--defilant { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 20px; overflow: visible; margin-inline: 0; padding: 0; }
	.tuile, .duo--defilant > .tuile { min-height: 280px; padding: 32px 32px 32px 36px; border-radius: 26px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; background-size: 22px 22px; }
	.tuile:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(30, 30, 30, .1); }
	.tuile { transition: transform .3s ease, box-shadow .3s ease; }
	.tuile__motif { left: -40px; bottom: -70px; width: 380px; }
	.tuile__texte { flex: 1 1 200px; gap: 18px; }
	.tuile__titre { font-size: 32px; line-height: 1.1; }
	.tuile__sous-titre { margin: -6px 0 0; font-size: 15px; }
	.tuile .bouton { font-size: 16px; padding: 14px 22px; min-height: 48px; }
	.tuile__plan, .duo--defilant .tuile__plan { flex: 0 1 270px; padding: 14px; border-radius: 18px; }
	.tuile__produits { flex: 0 1 270px; height: 210px; }
	.tuile__produit--pc { bottom: 20px; width: 190px; }
	.tuile__produit--onduleur { bottom: 6px; width: 110px; }

	/* Devis et agencement : texte et bouton à gauche, illustration à droite. */
	.tuile--devis, .tuile--agencement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 270px); grid-template-areas: "texte visuel" "bouton visuel"; align-content: center; column-gap: 24px; row-gap: 18px; }
	.tuile--devis .tuile__texte, .tuile--agencement .tuile__texte { grid-area: texte; align-self: end; gap: 12px; flex: none; }
	.tuile--devis .document, .tuile--agencement .tuile__plan { grid-area: visuel; }
	.duo--defilant .tuile__bouton { grid-area: bouton; align-self: start; justify-self: start; width: auto; }
	.document { padding: 18px 20px; gap: 9px; font-size: 13px; transform: rotate(2.5deg); box-shadow: 0 20px 40px rgba(193, 65, 12, .15); }
	.document__tete strong { font-size: 15px; }
	.document__tete span { font-size: 11px; }
	.document__ligne--trait { padding-top: 9px; }
	.document__ligne--total { font-size: 14px; }

	.trouver { flex-direction: row; flex-wrap: wrap; border-radius: 26px; }
	.trouver__plan { flex: 1.4 1 460px; min-width: 0; height: auto; min-height: 300px; }
	.trouver__infos { flex: 1 1 340px; min-width: 0; padding: 36px; gap: 16px; }
	.trouver__motif { right: -50px; bottom: -70px; width: 320px; opacity: .22; }
	.trouver .titre-section__motif { display: block; }
	.trouver__ligne { font-size: 15px; gap: 12px; }
	.trouver__ligne .icone { width: 22px; height: 22px; }
	.trouver__boutons { margin-top: auto; padding-top: 6px; }
	.trouver__boutons .bouton { flex: 0 0 auto; height: auto; padding: 13px 20px; font-size: 15px; }
	.accueil { padding-bottom: 72px; }

	.pied { padding: 56px 0 28px; font-size: 14px; }
	.pied__colonnes { flex-direction: row; flex-wrap: wrap; gap: 44px; }
	.pied__marque { flex: 1.4 1 280px; gap: 16px; }
	.pied__marque img { height: 52px; }
	.pied__menu { flex: 1 1 160px; }
	.pied__menu ul { gap: 10px; }
	.pied__paiements li { font-size: 12px; padding: 5px 10px; }
	.pied__bas { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--gris-filet); font-size: 13px; }

	.barre-bas { display: none; }
	.flottant {
		position: fixed; bottom: 24px; z-index: 40; display: inline-flex; align-items: center; gap: 10px;
		padding: 14px 20px; border-radius: 999px; font-size: 15px; font-weight: 700; text-decoration: none;
		box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
	}
	.flottant--appel { left: 24px; background: var(--noir); color: var(--blanc); }
	.flottant--appel .icone { color: var(--orange); }
	.flottant--whatsapp { right: 24px; background: var(--vert-action); color: var(--blanc); }
	.flottant:hover { color: var(--blanc); }
	.toast { bottom: 28px; width: auto; max-width: 520px; padding: 12px 18px 12px 12px; font-size: 14px; }
	.tiroir { display: none; }

	.gabarit__titre { font-size: 32px; }
	.product_title { font-size: 30px; }
	.pastilles { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; }
}

/* Éléments réservés à l'ordinateur : masqués en dessous de 900 px. */
@media (max-width: 899.98px) {
	.seulement-ordinateur { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}