/*
 * Habillage des pages de contenu natives : points de vente, contact, mon compte,
 * bientôt disponible. Tokens uniquement (voir tokens.css), mobile d'abord. Aucune
 * règle sur des sélecteurs d'élément nus (h1, p, label...) : la typographie de base
 * vient du socle (base.css), ce fichier ne pose que la mise en page propre à ces
 * quatre pages.
 */

.od-page {
	padding-block: clamp(32px, 6vw, 72px);
}

.od-page__inner {
	max-width: 960px;
	margin-inline: auto;
	padding-inline: var(--od-gutter);
}

.od-page__title {
	margin-block-end: clamp(20px, 4vw, 36px);
}

/* Points de vente */

.od-pdv-grid {
	display: grid;
	gap: clamp(16px, 3vw, 28px);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.od-pdv-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.od-pdv-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.od-pdv-card__nom {
	margin: 0;
}

.od-pdv-card__adresse {
	font-style: normal;
	color: var(--od-muted);
	line-height: 1.5;
}

.od-pdv-card__horaires {
	margin: 0;
}

.od-pdv-card__label {
	display: block;
	font-weight: 700;
	color: var(--od-ink);
}

.od-pdv-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: 8px;
}

.od-pdv-card__action {
	text-decoration: none;
}

/* Formulaire de contact */

.od-contact-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 640px;
}

.od-contact-form__row {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr;
}

@media (min-width: 560px) {
	.od-contact-form__row {
		grid-template-columns: 1fr 1fr;
	}
}

/* Piège à robots : entièrement retiré de la mise en page et de l'ordre de
   tabulation. Volontairement différent d'un utilitaire "accessible mais invisible" :
   ce champ ne doit être atteint ni par un visiteur, ni par un lecteur d'écran. */
.od-contact-form__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	left: -9999px;
}

.od-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.od-field label {
	font-weight: 700;
	color: var(--od-ink);
}

.od-field input,
.od-field textarea {
	font: inherit;
	color: var(--od-ink);
	background: var(--od-surface);
	border: var(--od-line) solid var(--od-border);
	border-radius: var(--od-radius-sm);
	padding: 14px 16px;
	min-height: 48px;
}

.od-field textarea {
	min-height: 160px;
	resize: vertical;
}

.od-field input:focus-visible,
.od-field textarea:focus-visible {
	outline: 3px solid var(--od-accent);
	outline-offset: 2px;
}

/* Message de retour du formulaire. Les couleurs "carbet" (verte) et "maison" (rouge
   orange) sont reprises comme les teintes les plus proches d'un succès ou d'une erreur
   dans la palette existante : aucune nouvelle couleur n'est introduite hors tokens. */
.od-alert {
	padding: clamp(16px, 3vw, 22px);
	border-radius: var(--od-radius-md);
	border: var(--od-line) solid var(--od-border);
	margin-block-end: clamp(20px, 4vw, 32px);
}

.od-alert p {
	margin: 0;
}

.od-alert ul {
	margin: 8px 0 0;
	padding-inline-start: 20px;
}

.od-alert--success {
	background: var(--od-carbet-tint);
	color: var(--od-ink-on-tint);
	border-color: var(--od-carbet);
}

.od-alert--error {
	background: var(--od-maison-tint);
	color: var(--od-ink-on-tint);
	border-color: var(--od-maison);
}

.od-alert:focus-visible {
	outline: 3px solid var(--od-accent);
	outline-offset: 2px;
}

/* Mon compte */

.od-account {
	background: var(--od-surface);
	border: var(--od-line) solid var(--od-border);
	border-radius: var(--od-radius-lg);
	padding: clamp(20px, 4vw, 36px);
}

.od-account table {
	width: 100%;
}

/* Bientôt disponible */

.od-page--soon .od-page__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 18px;
}

.od-page-soon__logo {
	max-width: min(420px, 80vw);
	height: auto;
}

.od-page-soon__text {
	color: var(--od-muted);
}

/* =====================================================================
   En-tete et actions communs des pages de contenu (vitrine :
   app/magasin/page.module.css, app/faq/page.module.css).
   ===================================================================== */

.od-page-head {
	padding: clamp(20px, 4vw, 34px) 0 clamp(18px, 3vw, 26px);
	max-width: 62ch;
}

.od-page-head__eyebrow {
	display: inline-block;
	background: var(--od-bg-2);
	border: var(--od-line) solid var(--od-border);
	color: var(--od-ink);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: var(--od-radius-pill);
	margin-bottom: 14px;
}

.od-page-head__title {
	font-size: clamp(2rem, 5.4vw, 3.2rem);
	margin: 0 0 12px;
}

.od-page-head__lede {
	font-size: clamp(0.96rem, 1.7vw, 1.08rem);
	color: var(--od-muted);
	line-height: 1.55;
	margin: 0;
}

.od-page-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding: clamp(26px, 4vw, 40px) 0 clamp(44px, 6vw, 70px);
}

/* ---------- Le magasin ---------- */

.od-magasin__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-top: clamp(18px, 3vw, 28px);
}

@media (min-width: 720px) {
	.od-magasin__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1080px) {
	.od-magasin__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.od-magasin__card {
	background: var(--od-surface);
	border: var(--od-line) solid var(--od-border);
	border-radius: var(--od-radius-lg);
	padding: clamp(16px, 3vw, 24px);
}

.od-magasin__card-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-display, inherit);
	font-size: 1.05rem;
	margin: 0 0 10px;
}

.od-magasin__badge {
	background: var(--od-accent);
	color: var(--od-on-accent);
	border-radius: var(--od-radius-pill);
	padding: 2px 10px;
	font-size: 0.7rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.od-magasin__card-body {
	color: var(--od-muted);
	font-size: 0.94rem;
	line-height: 1.55;
}

.od-magasin__card-body p {
	margin: 0 0 8px;
}

.od-magasin__card-body a {
	color: var(--od-ink);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.od-magasin__days {
	list-style: none;
	margin: 0;
	padding: 0;
}

.od-magasin__days li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid var(--od-border);
	color: var(--od-ink);
	font-weight: 600;
}

.od-magasin__days li:last-child {
	border-bottom: 0;
}

.od-magasin__trust {
	margin-top: clamp(24px, 4vw, 38px);
}

/* ---------- FAQ ---------- */

.od-faq__list {
	list-style: none;
	margin: clamp(18px, 3vw, 28px) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 760px;
}

.od-faq__item details {
	background: var(--od-surface);
	border: var(--od-line) solid var(--od-border);
	border-radius: var(--od-radius-md);
	overflow: hidden;
}

.od-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 18px;
	cursor: pointer;
	list-style: none;
	font-weight: 700;
	font-size: 0.98rem;
}

.od-faq__question::-webkit-details-marker {
	display: none;
}

.od-faq__mark {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: var(--od-line) solid var(--od-border);
	border-radius: 50%;
	font-weight: 900;
	transition: transform 0.15s ease;
}

.od-faq__item details[open] .od-faq__mark {
	transform: rotate(45deg);
}

.od-faq__answer {
	padding: 0 18px 16px;
	color: var(--od-muted);
	line-height: 1.6;
	font-size: 0.94rem;
}

.od-faq__answer a {
	color: var(--od-ink);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* =====================================================================
   Selecteur TOUC (vitrine : components/SelecteurTouc.module.css, adapte
   aux rayons de la direction Marche). Uniquement des tokens --od-*.
   ===================================================================== */

.od-selecteur {
	margin: 6px 0 56px;
}

.od-selecteur__stepnav {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 22px;
	list-style: none;
	padding: 0;
}

.od-selecteur__step {
	font-size: 0.78rem;
	padding: 8px 12px;
	border: var(--od-line) solid var(--od-border);
	border-radius: var(--od-radius-pill);
	color: var(--od-muted);
	font-weight: 600;
	background: var(--od-surface);
}

.od-selecteur__step b {
	color: var(--od-muted);
	margin-right: 4px;
}

.od-selecteur__step.is-active {
	color: var(--od-ink);
	border-color: var(--od-accent);
	background: var(--od-accent);
	color: var(--od-on-accent);
}

.od-selecteur__step.is-active b {
	color: var(--od-on-accent);
}

.od-selecteur__step.is-done {
	color: var(--od-ink);
}

.od-selecteur__panel {
	border: var(--od-line) solid var(--od-border);
	border-radius: var(--od-radius-lg);
	background: var(--od-surface);
	padding: clamp(20px, 4vw, 28px);
	margin-bottom: 22px;
}

.od-selecteur__panel h2 {
	font-family: var(--font-display, inherit);
	font-weight: 800;
	font-size: clamp(1.15rem, 3vw, 1.3rem);
	color: var(--od-ink);
	margin: 0 0 6px;
}

.od-selecteur__hint {
	color: var(--od-muted);
	font-size: 0.88rem;
	line-height: 1.5;
	margin: 0 0 18px;
	max-width: 560px;
}

.od-selecteur__tiles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

@media (min-width: 620px) {
	.od-selecteur__tiles {
		grid-template-columns: repeat(3, 1fr);
	}
}

.od-selecteur__tile,
.od-selecteur__chip {
	font: inherit;
	font-weight: 700;
	border: var(--od-line) solid var(--od-border);
	border-radius: var(--od-radius-pill);
	background: var(--od-surface);
	color: var(--od-ink);
	cursor: pointer;
	padding: 12px 18px;
	text-align: left;
}

.od-selecteur__tile {
	width: 100%;
	font-size: 0.92rem;
}

.od-selecteur__chip {
	font-size: 0.86rem;
	padding: 11px 18px;
}

.od-selecteur__tile.is-selected,
.od-selecteur__chip.is-selected {
	background: var(--od-ink);
	color: var(--od-bg);
}

.od-selecteur__tile:hover,
.od-selecteur__chip:hover {
	background: var(--od-accent);
	color: var(--od-on-accent);
}

.od-selecteur__chips {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.od-selecteur__capacite {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.od-selecteur__capacite-valeur {
	font-family: var(--font-display, inherit);
	font-weight: 800;
	font-size: 1.15rem;
	color: var(--od-ink);
	min-width: 74px;
}

.od-selecteur__slider {
	flex: 1 1 220px;
	min-width: 180px;
	accent-color: var(--od-accent);
	height: 6px;
	cursor: pointer;
}

.od-selecteur__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 22px;
}

.od-selecteur__actions button {
	cursor: pointer;
	font: inherit;
}

.od-selecteur__actions .od-btn-primary[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.od-selecteur__results-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 6px 0 16px;
	flex-wrap: wrap;
}

.od-selecteur__results-head h2 {
	font-family: var(--font-display, inherit);
	font-weight: 800;
	font-size: clamp(1.15rem, 3vw, 1.3rem);
	color: var(--od-ink);
	margin: 0;
}

.od-selecteur__results-count {
	color: var(--od-muted);
	font-size: 0.85rem;
	font-weight: 600;
}

.od-selecteur__empty {
	border: var(--od-line) dashed var(--od-border);
	border-radius: var(--od-radius-md);
	padding: 24px;
	text-align: center;
	color: var(--od-muted);
}

.od-selecteur__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}

.od-selecteur__card {
	display: flex;
	flex-direction: column;
	background: var(--od-surface);
	border: var(--od-line) solid var(--od-border);
	border-radius: var(--od-radius-md);
	overflow: hidden;
}

.od-selecteur__shot {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--od-bg-2);
	border-bottom: var(--od-line) solid var(--od-border);
}

.od-selecteur__shot img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 11%;
	box-sizing: border-box;
	mix-blend-mode: multiply;
}

.od-selecteur__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 13px 14px 15px;
	flex: 1;
}

.od-selecteur__name {
	font-weight: 700;
	font-size: 0.94rem;
	line-height: 1.3;
	margin: 0;
}

.od-selecteur__name a:hover,
.od-selecteur__name a:focus-visible {
	text-decoration: underline;
}

.od-selecteur__capa {
	color: var(--od-muted);
	font-size: 0.8rem;
	font-weight: 600;
	margin: 0;
}

.od-selecteur__meta {
	font-family: var(--font-display, inherit);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--od-ink);
	margin: 0;
}

.od-selecteur__score {
	display: flex;
	align-items: center;
	gap: 10px;
}

.od-selecteur__score-bar {
	flex: 1;
	height: 8px;
	border: 1px solid var(--od-border);
	border-radius: var(--od-radius-pill);
	overflow: hidden;
	background: var(--od-bg-2);
}

.od-selecteur__score-fill {
	display: block;
	height: 100%;
	background: var(--od-accent);
}

.od-selecteur__score-val {
	font-weight: 900;
	font-size: 0.8rem;
	color: var(--od-ink);
	min-width: 38px;
	text-align: right;
}

.od-selecteur__card-actions {
	margin-top: auto;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.od-selecteur__card-actions .od-btn-primary,
.od-selecteur__card-actions .od-btn-ghost {
	padding: 9px 16px;
	font-size: 0.86rem;
}

/* ---------- Finitions panier / commande (titres maquette) ---------- */

.od-cart > h1,
.od-cart .od-cart__title,
.woocommerce-cart .od-main .entry-title,
.woocommerce-checkout .od-main .entry-title {
	font-size: clamp(2rem, 5.4vw, 3.2rem);
}