/* Shortcode [dgs_antenne_responsables] sur la fiche d'une antenne :
   avatar à gauche, nom et courriel empilés à droite. Couleurs prises sur
   la palette réelle du thème GreenLight (--gs-color*), jamais inventées. */
.dgs-antenne-responsables {
	display: flex;
	flex-direction: column;
	gap: 1.2em;
}

.dgs-antenne-responsable {
	display: flex;
	align-items: center;
	gap: 1em;
}

.dgs-antenne-responsable img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.dgs-antenne-responsable-info p {
	margin: 0;
}

.dgs-antenne-responsable-nom {
	margin-bottom: 0.2em;
	font-size: 1rem;
	color: var(--gs-colordeep-teal, #0b414a);
}

.dgs-antenne-responsable-courriel {
	font-size: 0.875rem;
}

.dgs-antenne-responsable-courriel a {
	color: var(--gs-colorocean-teal, #11606b);
	text-decoration: none;
}

.dgs-antenne-responsable-courriel a:hover {
	text-decoration: underline;
}

/*
 * Grille commune des formulaires front-end « Mon profil » et « Publier un
 * événement » (.dgs-formulaire-grille) : tous les champs s'alignent sur
 * les mêmes bords. Par défaut un champ occupe toute la largeur ; les
 * champs courts passent en demi-largeur (.dgs-champ--demi, dates) ou en
 * tiers (tarifs). Sous ~560px de largeur disponible, tout repasse sur une
 * colonne.
 */
.dgs-tableau-de-bord .woocommerce-MyAccount-content {
	container-type: inline-size;
}

.dgs-formulaire-grille {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	column-gap: 1.5em;
	row-gap: 1.4em;
	align-items: start;
}

.dgs-formulaire-grille > * {
	grid-column: 1 / -1;
	min-width: 0;
	margin: 0;
}

.dgs-formulaire-grille > .dgs-champ--demi,
.dgs-formulaire-grille > .dgs-champ-_dgs_event_date_debut,
.dgs-formulaire-grille > .dgs-champ-_dgs_event_date_fin {
	grid-column: span 3;
}

.dgs-formulaire-grille > .dgs-champ-_dgs_event_prix_public,
.dgs-formulaire-grille > .dgs-champ-_dgs_event_prix_promo,
.dgs-formulaire-grille > .dgs-champ-_dgs_event_prix_membre {
	grid-column: span 2;
}

/* Spécificité renforcée : un style externe fixait sinon les champs à
   ~420px, quelle que soit la colonne. */
.dgs-formulaire-grille .dgs-champ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.dgs-formulaire-grille .dgs-champ textarea,
.dgs-formulaire-grille .dgs-champ select,
.dgs-formulaire-grille [class^="dgs-champ-"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.dgs-formulaire-grille [class^="dgs-champ-"] select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin-top: 0.35em;
}

.dgs-formulaire-grille .wp-editor-wrap {
	margin-top: 0.35em;
}

/* Listes recherchables (Antenne régionale, Région) : combobox de
   assets/js/blog-filtres.js, comme les filtres de l'annuaire. Le champ
   de saisie reprend le style des autres champs ; la liste reprend celle
   de .puqc-blog-filtres. */
.dgs-formulaire-grille .puqc-blog-combo {
	position: relative;
}

.dgs-formulaire-grille .dgs-champ .puqc-blog-combo-input {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311606B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
}

.dgs-formulaire-grille .puqc-blog-combo-liste {
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: 264px;
	overflow-y: auto;
	margin: 0;
	padding: 6px;
	list-style: none;
	background-color: var(--gs-colorcloud-white, #fafcfc);
	border: 1px solid var(--gs-colorsoft-aqua, #8bafb5);
	border-radius: 10px;
	box-shadow: 0 16px 32px rgba(11, 65, 74, 0.12);
}

.dgs-formulaire-grille .puqc-blog-combo-liste[hidden],
.dgs-formulaire-grille .puqc-blog-combo-liste li[hidden] {
	display: none;
}

.dgs-formulaire-grille .puqc-blog-combo-liste li {
	margin: 0;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 16px;
	line-height: 22px;
	color: var(--gs-colordeep-teal, #0b414a);
	cursor: pointer;
}

.dgs-formulaire-grille .puqc-blog-combo-liste li:hover,
.dgs-formulaire-grille .puqc-blog-combo-liste li.is-actif {
	background-color: color-mix(in srgb, var(--gs-colorsoft-aqua, #8bafb5) 18%, var(--gs-colorcloud-white, #fafcfc));
}

.dgs-formulaire-grille .puqc-blog-combo-liste li.is-choisi {
	font-weight: 600;
	color: var(--gs-colorocean-teal, #11606b);
}

.dgs-formulaire-grille .puqc-blog-combo-liste .puqc-blog-combo-vide {
	color: var(--gs-colormuted-teal, #54808a);
	cursor: default;
}

.dgs-formulaire-grille .puqc-blog-combo-liste .puqc-blog-combo-vide:hover {
	background-color: transparent;
}

.dgs-formulaire-grille .description {
	display: inline-block;
	margin-top: 0.35em;
	font-size: 0.9em;
}

/* Groupe de cases à cocher (type « checkboxes » de DGS_PUQC_Member_Fields,
   ex. moyens de contact partagés dans l'annuaire des membres). */
.dgs-formulaire-grille .dgs-cases {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	margin-top: 0.5em;
}

.dgs-formulaire-grille .dgs-cases-description {
	display: block;
}

@container (max-width: 560px) {
	.dgs-formulaire-grille > .dgs-champ,
	.dgs-formulaire-grille > [class^="dgs-champ-"] {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.dgs-formulaire-grille > .dgs-champ,
	.dgs-formulaire-grille > [class^="dgs-champ-"] {
		grid-column: 1 / -1;
	}
}

/*
 * Case à cocher des catégories (wp_terms_checklist, .dgs-categories-checklist),
 * y compris ses <ul> imbriqués pour les catégories enfants.
 */
.dgs-categories-checklist,
.dgs-categories-checklist ul {
	list-style: none;
	margin: 0.3em 0 0;
	padding: 0 0 0 1.2em;
}

.dgs-categories-checklist {
	padding-left: 0;
}

/* Champs participant (billetterie d'événement) : uniquement de la mise en
   page ici (espacement, largeur) — pas de couleur ni de bordure sur les
   input/label, pour que le style du thème actif s'applique tel quel. */
.dgs-participants-billet {
	margin-bottom: 1em;
}

.dgs-participant-bloc {
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 6px;
	padding: 0.85em;
	margin-bottom: 0.75em;
}

.dgs-participant-titre {
	margin: 0 0 0.5em;
	font-weight: 600;
}

.dgs-participant-champs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
}

.dgs-participant-champs + .dgs-participant-champs {
	margin-top: 0.75em;
}

.dgs-participant-champ {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	flex: 1 1 160px;
}

.dgs-participant-champ label {
	font-size: 0.85em;
}

.dgs-participant-champ input {
	width: 100%;
}

.dgs-calendrier {
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	padding: 1.5em;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	box-sizing: border-box;
}

.dgs-calendrier * {
	box-sizing: border-box;
}

.dgs-calendrier-entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1em;
	margin: 0 0 1.5em;
}

.dgs-calendrier-titre {
	margin: 0;
	font-size: 1.2em;
	line-height: 1.2;
}

.dgs-calendrier-navigation {
	display: flex;
	flex-wrap: nowrap;
	flex-shrink: 0;
	gap: 0.5em;
}

/* La classe wp-element-button fait hériter le style de bouton défini par
   le thème actif ; on ne gère ici que la disposition (les thèmes donnent
   souvent width:100% aux boutons par défaut, ce qui les ferait s'étirer
   et pousserait le titre à la ligne — on neutralise ça explicitement). */
.dgs-calendrier-navigation .wp-element-button {
	width: auto;
	flex: 0 0 auto;
	white-space: nowrap;
	cursor: pointer;
}

.dgs-calendrier-chargement {
	opacity: 0.5;
}

.dgs-calendrier-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed !important;
}

.dgs-calendrier-table th,
.dgs-calendrier-table td {
	width: 14.2857% !important;
}

.dgs-calendrier-table th {
	padding: 0.5em;
	font-size: 0.8em;
	text-align: left;
	border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.dgs-calendrier-table td {
	vertical-align: top;
	border: 1px solid rgba(0, 0, 0, 0.06);
	padding: 0.4em;
	min-height: 5em;
}

.dgs-jour-hors-mois {
	background: rgba(0, 0, 0, 0.02);
}

.dgs-jour-numero {
	font-size: 0.8em;
	color: #666;
	margin-bottom: 0.3em;
}

.dgs-jour-aujourdhui {
	background: rgba(67, 97, 238, 0.08);
}

.dgs-jour-aujourdhui .dgs-jour-numero {
	font-weight: bold;
	color: #000;
}

.dgs-evenement-pastille {
	position: relative;
	display: block;
	font-size: 0.75em;
	color: #fff;
	border-radius: 4px;
	padding: 0.2em 0.4em;
	margin-bottom: 0.2em;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: filter 0.15s ease;
}

.dgs-evenement-pastille:hover,
.dgs-evenement-pastille:focus {
	filter: brightness(0.9);
	color: #fff;
}

.dgs-evenement-pastille[data-tooltip]:hover::after,
.dgs-evenement-pastille[data-tooltip]:focus::after {
	content: attr(data-tooltip);
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%);
	margin-bottom: 0.4em;
	background: #1f2430;
	color: #fff;
	font-size: 1em;
	line-height: 1.3;
	padding: 0.5em 0.7em;
	border-radius: 6px;
	white-space: normal;
	width: max-content;
	max-width: 220px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
	z-index: 20;
	pointer-events: none;
}

/*
 * Liste des événements du mois, affichée sous la grille du calendrier
 * (activable/désactivable par bloc via l'attribut afficherListeEvenements).
 * Couleurs prises sur la palette réelle du thème GreenLight (--gs-color*).
 */
.dgs-calendrier-liste {
	margin-top: 2em;
}

.dgs-calendrier-liste-vide {
	color: var(--gs-colormuted-teal, #54808a);
}

.dgs-calendrier-liste-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.5em;
}

.dgs-carte-evenement {
	display: flex;
	flex-direction: column;
	background: var(--gs-colorcloud-white, #fafcfc);
	background: color-mix(in srgb, var(--gs-colorsoft-aqua, #8bafb5) 10%, var(--gs-colorcloud-white, #fafcfc));
	border-radius: 16px;
	overflow: hidden;
	box-sizing: border-box;
}

.dgs-carte-evenement-image {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.dgs-carte-evenement-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dgs-carte-evenement-contenu {
	padding: 1em 1.25em 1.25em;
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	flex: 1;
}

.dgs-carte-evenement-titre {
	margin: 0;
	font-size: 1.05em;
	line-height: 1.3;
}

.dgs-carte-evenement-titre a {
	color: var(--gs-colordeep-teal, #0b414a);
	text-decoration: none;
}

.dgs-carte-evenement-date,
.dgs-carte-evenement-organisateur {
	margin: 0;
	font-size: 0.9em;
	color: var(--gs-colormuted-teal, #54808a);
}

.dgs-carte-evenement-bouton {
	align-self: flex-start;
	margin-top: 0.75em;
	display: inline-flex;
	align-items: center;
	background: var(--gs-colordeep-teal, #0b414a);
	color: var(--gs-colorpure-white, #ffffff);
	border-radius: 999px;
	padding: 0.5em 1.2em;
	font-size: 0.85em;
	font-weight: 600;
	text-decoration: none;
}

.dgs-carte-evenement-bouton:hover,
.dgs-carte-evenement-bouton:focus {
	background: var(--gs-colorocean-teal, #11606b);
	color: var(--gs-colorpure-white, #ffffff);
}

/*
 * Disposition « Tuiles en 1 colonne » : les mêmes cartes, empilées les unes
 * sous les autres au lieu d'une grille, chacune en ligne (image à gauche,
 * contenu à droite) plutôt qu'en colonne.
 */
.dgs-calendrier-liste--colonne .dgs-calendrier-liste-items {
	grid-template-columns: 1fr;
}

.dgs-calendrier-liste--colonne .dgs-carte-evenement {
	flex-direction: row;
}

.dgs-calendrier-liste--colonne .dgs-carte-evenement-image {
	flex: 0 0 40%;
	aspect-ratio: 16 / 9;
}

@media (max-width: 600px) {
	.dgs-calendrier-liste--colonne .dgs-carte-evenement {
		flex-direction: column;
	}

	.dgs-calendrier-liste--colonne .dgs-carte-evenement-image {
		flex-basis: auto;
		aspect-ratio: 16 / 9;
	}
}

/*
 * Téléphone : la grille du mois reste en 7 colonnes, compacte ; chaque
 * événement y devient une pastille ronde de sa couleur, et le détail est
 * donné par la liste d'événements affichée sous la grille. (Une liste de
 * jours empilés donnait 30 lignes presque vides.)
 */
@media (max-width: 600px) {
	.dgs-calendrier {
		padding: 1em 0.75em;
	}

	.dgs-calendrier-entete {
		margin-bottom: 1em;
	}

	.dgs-calendrier-table th {
		padding: 0.35em 0;
		font-size: 0.7em;
		text-align: center;
	}

	.dgs-calendrier-table td {
		height: 3.25em;
		padding: 0.25em 0.15em;
		text-align: center;
	}

	.dgs-jour-numero {
		margin-bottom: 0.15em;
	}

	.dgs-evenement-pastille {
		display: inline-block;
		width: 9px;
		height: 9px;
		margin: 0 1px;
		padding: 0;
		border-radius: 50%;
		font-size: 0;
		vertical-align: top;
	}

	.dgs-evenement-pastille[data-tooltip]:hover::after,
	.dgs-evenement-pastille[data-tooltip]:focus::after {
		display: none;
	}
}

/*
 * Bloc de connexion sans mot de passe : carte inspirée d'une section
 * existante du site. Couleurs prises sur la palette réelle du thème
 * GreenLight (Stylebook, variables --gs-color*) — jamais de couleur
 * inventée. Le second `background` (color-mix) n'est utilisé que si le
 * navigateur le supporte ; sinon la carte reste sur le premier
 * `background` (cloud-white), déclaré juste avant comme repli.
 */
.dgs-connexion-carte {
	background: var(--gs-colorcloud-white, #fafcfc);
	background: color-mix(in srgb, var(--gs-colorsoft-aqua, #8bafb5) 18%, var(--gs-colorcloud-white, #fafcfc));
	border-radius: 24px;
	padding: 2.5em;
	max-width: 480px;
	width: 100%;
	box-sizing: border-box;
}

/*
 * Quand la personne est déconnectée, [woocommerce_my_account] n'affiche
 * que la carte de connexion (pas de navigation ni de second élément) :
 * on centre la ligne flex dans ce cas précis, sans toucher à la mise en
 * page navigation/contenu à deux colonnes une fois connecté·e.
 */
.dgs-tableau-de-bord .woocommerce:has(> .dgs-connexion-carte) {
	justify-content: center;
}

.dgs-connexion-titre {
	margin: 0 0 0.5em;
	color: var(--gs-colordeep-teal, #0b414a);
	font-size: 1.8em;
	line-height: 1.2;
}

.dgs-connexion-intro,
.dgs-connexion-confirmation,
.dgs-connexion-deja {
	color: var(--gs-colormuted-teal, #54808a);
	margin: 0 0 1.5em;
}

/*
 * Mode « espace membres » (section protégée) : surtitre et phrase
 * d'explication, intégrés à la carte plutôt que
 * flottant au-dessus.
 */
.dgs-connexion-surtitre {
	margin: 0 0 0.4em;
	color: var(--gs-colormuted-teal, #54808a);
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.dgs-connexion-reserve {
	color: var(--gs-colordeep-teal, #0b414a);
	margin: 0 0 0.75em;
}

.dgs-connexion-carte label {
	color: var(--gs-colordeep-teal, #0b414a);
	font-weight: 600;
}

.dgs-formulaire-connexion p {
	margin-bottom: 1em;
}

.dgs-formulaire-connexion input[type="email"] {
	width: 100%;
	max-width: 360px;
	box-sizing: border-box;
	padding: 0.65em 0.9em;
	border: 1px solid var(--gs-colorsoft-aqua, #8bafb5);
	border-radius: 10px;
}

/*
 * Le Toolkit met les champs en `background: transparent` : ils prenaient
 * la teinte de la carte. Fond blanc, préfixé par la carte pour l'emporter
 * quel que soit l'ordre de chargement des feuilles.
 */
.dgs-connexion-carte .dgs-formulaire-connexion input[type="email"],
.dgs-connexion-carte .dgs-formulaire-connexion input.dgs-connexion-code {
	background: var(--gs-colorpure-white, #ffffff);
	color: var(--gs-colordeep-teal, #0b414a);
}

.dgs-connexion-bouton {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: var(--gs-colorpure-white, #ffffff);
	color: var(--gs-colordeep-teal, #0b414a);
	border: 1px solid var(--gs-colorsoft-aqua, #8bafb5);
	border-radius: 999px;
	padding: 0.75em 1.5em;
	font-weight: 600;
	cursor: pointer;
	margin-top: 0.5em;
}

.dgs-connexion-bouton:hover,
.dgs-connexion-bouton:focus {
	background: var(--gs-colorcloud-white, #fafcfc);
}

/* Code à 6 chiffres (connexion dans l'application installée) et message d'erreur. */
.dgs-formulaire-connexion input.dgs-connexion-code {
	width: 100%;
	max-width: 220px;
	box-sizing: border-box;
	padding: 0.5em 0.9em;
	border: 1px solid var(--gs-colorsoft-aqua, #8bafb5);
	border-radius: 10px;
	font-size: 1.5em;
	letter-spacing: 0.3em;
	font-variant-numeric: tabular-nums;
}

.dgs-connexion-erreur {
	margin: 0 0 1.25em;
	padding: 0.75em 1em;
	border-left: 3px solid var(--gs-colorocean-teal, #11606b);
	background: var(--gs-colorpure-white, #ffffff);
	color: var(--gs-colordeep-teal, #0b414a);
	border-radius: 0 10px 10px 0;
}

.dgs-connexion-renvoi {
	margin: 1.25em 0 0;
}

.dgs-connexion-renvoi a {
	color: var(--gs-colordeep-teal, #0b414a);
}

@media (max-width: 560px) {
	.dgs-connexion-carte {
		padding: 1.75em 1.25em;
	}
}

/*
 * Bandeau de bienvenue (avatar + salutation), affiché au-dessus de la
 * navigation/contenu du tableau de bord pour une personne connectée.
 */
.dgs-tableau-de-bord-accueil {
	display: flex;
	align-items: center;
	gap: 1em;
	margin: 0 0 2em;
}

.dgs-tableau-de-bord-accueil .dgs-avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.dgs-tableau-de-bord-accueil p {
	margin: 0;
	color: var(--gs-colordeep-teal, #0b414a);
	font-size: 18px;
	line-height: 1.5;
}

.dgs-tableau-de-bord-accueil .dgs-tableau-de-bord-membre-depuis {
	display: inline-block;
	margin-top: 0.5em;
	padding: 0.2em 0.85em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--gs-colorsoft-aqua, #8bafb5) 22%, var(--gs-colorpure-white, #ffffff));
	color: var(--gs-colorocean-teal, #11606b);
	font-size: 0.9em;
	font-weight: 600;
}

/*
 * Onglet « Tableau de bord » : grille de raccourcis (woocommerce/myaccount/
 * dashboard.php) vers ce qu'on peut faire une fois connecté.
 */
.dgs-tableau-de-bord .woocommerce-MyAccount-content .dgs-raccourcis-titre {
	margin: 0 0 1em;
	font-size: 1.35em;
}

.dgs-raccourcis {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.25em;
}

.dgs-raccourcis li {
	margin: 0;
	padding: 0;
}

.dgs-raccourci {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	height: 100%;
	box-sizing: border-box;
	padding: 1.5em;
	border-radius: 16px;
	background: var(--gs-colorpure-white, #ffffff);
	border: 1px solid color-mix(in srgb, var(--gs-colorsoft-aqua, #8bafb5) 45%, transparent);
	color: var(--gs-colordeep-teal, #0b414a);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dgs-raccourci:hover,
.dgs-raccourci:focus-visible {
	transform: translateY(-3px);
	border-color: var(--gs-colorocean-teal, #11606b);
	box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--gs-colordeep-teal, #0b414a) 35%, transparent);
}

.dgs-raccourci-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 0.5em;
	border-radius: 14px;
	background: var(--gs-colorocean-teal, #11606b);
	color: var(--gs-colorpure-white, #ffffff);
	transition: background 0.2s ease;
}

.dgs-raccourci:hover .dgs-raccourci-icone,
.dgs-raccourci:focus-visible .dgs-raccourci-icone {
	background: var(--gs-colordeep-teal, #0b414a);
}

.dgs-raccourci-icone svg {
	width: 28px;
	height: 28px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.dgs-raccourci-titre {
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.3;
}

.dgs-raccourci-texte {
	color: var(--gs-colormuted-teal, #54808a);
	font-size: 0.95em;
	line-height: 1.5;
}

/*
 * Confirmation de commande : mot de remerciement + la même grille de
 * raccourcis (DGS_PUQC_WooCommerce_Order_Confirmation), à la place du
 * bloc « Statut de la commande » de WooCommerce.
 */
.dgs-confirmation-commande {
	margin-bottom: 3em;
}

.dgs-confirmation-merci {
	max-width: 46em;
	margin: 0 0 2.5em;
	font-size: 1.2em;
	line-height: 1.6;
	color: var(--gs-colordeep-teal, #0b414a);
}

.dgs-confirmation-merci strong {
	display: block;
	margin-bottom: 0.25em;
	font-size: 1.5em;
	color: var(--gs-colorocean-teal, #11606b);
}

.dgs-confirmation-commande .dgs-raccourcis-titre {
	margin: 0 0 1em;
	font-size: 1.35em;
}

@media (prefers-reduced-motion: reduce) {
	.dgs-raccourci,
	.dgs-raccourci:hover,
	.dgs-raccourci:focus-visible {
		transition: none;
		transform: none;
	}
}

/*
 * Bloc « Tableau de bord (mon compte) » : habille le rendu natif du
 * shortcode [woocommerce_my_account] (navigation + contenu du point de
 * terminaison courant), sans toucher au balisage ni au comportement gérés
 * par WooCommerce — on ne cible ici que ses classes réelles
 * (woocommerce-MyAccount-*). Couleurs prises sur la palette réelle du
 * thème GreenLight (--gs-color*), jamais inventées.
 */
.dgs-tableau-de-bord .woocommerce {
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
	align-items: flex-start;
}

/*
 * WooCommerce fixe lui-même `.woocommerce-account main .woocommerce` à
 * 1000px (woocommerce-blocktheme.css), sans le centrer : ça rétrécissait
 * la ligne flex sur son bord droit seulement (asymétrique par rapport à
 * .dgs-tableau-de-bord, qui fait 1200px), décentrant la carte de
 * connexion. On annule cette limite pour occuper toute la largeur du
 * bloc.
 */
.woocommerce-account .dgs-tableau-de-bord .woocommerce {
	max-width: none;
}

.dgs-tableau-de-bord .woocommerce-notices-wrapper:empty {
	display: none;
}

.dgs-tableau-de-bord .woocommerce-notices-wrapper {
	flex-basis: 100%;
}

.dgs-tableau-de-bord .woocommerce-MyAccount-navigation {
	flex: 0 0 220px;
	background: var(--gs-colorcloud-white, #fafcfc);
	background: color-mix(in srgb, var(--gs-colorsoft-aqua, #8bafb5) 12%, var(--gs-colorcloud-white, #fafcfc));
	border-radius: 16px;
	padding: 0.75em;
	box-sizing: border-box;
}

.dgs-tableau-de-bord .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dgs-tableau-de-bord .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link {
	margin: 0;
	padding: 0;
}

.dgs-tableau-de-bord .woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: 0.65em 1em;
	border-radius: 10px;
	color: var(--gs-colordeep-teal, #0b414a);
	text-decoration: none;
	font-weight: 600;
}

.dgs-tableau-de-bord .woocommerce-MyAccount-navigation-link a:hover,
.dgs-tableau-de-bord .woocommerce-MyAccount-navigation-link a:focus {
	background: var(--gs-colorpure-white, #ffffff);
}

.dgs-tableau-de-bord .woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--gs-colordeep-teal, #0b414a);
	color: var(--gs-colorpure-white, #ffffff);
}

.dgs-tableau-de-bord .woocommerce-MyAccount-content {
	flex: 1 1 420px;
	min-width: 0;
	box-sizing: border-box;
}

.dgs-tableau-de-bord .woocommerce-MyAccount-content h1,
.dgs-tableau-de-bord .woocommerce-MyAccount-content h2,
.dgs-tableau-de-bord .woocommerce-MyAccount-content h3 {
	color: var(--gs-colordeep-teal, #0b414a);
}

.dgs-tableau-de-bord .woocommerce-MyAccount-content mark {
	background: none;
	color: var(--gs-colorocean-teal, #11606b);
	font-weight: 600;
}

/*
 * Tableaux du tableau de bord (commandes, abonnements, détail d'une
 * commande, moyens de paiement) : carte blanche arrondie, en-tête teinté,
 * lignes séparées par un simple filet horizontal. Les bordures
 * verticales et le rayon de 5px de WooCommerce (.woocommerce
 * table.shop_table) sont neutralisés. Dans orders.php, le numéro de
 * commande est un <th> dans <tbody> : on le traite comme une cellule.
 */
.dgs-tableau-de-bord table.shop_table,
.dgs-tableau-de-bord table.woocommerce-orders-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 0 0 1.5em;
	background: var(--gs-colorpure-white, #ffffff);
	border: 1px solid var(--gs-colorsoft-aqua, #8bafb5);
	border: 1px solid color-mix(in srgb, var(--gs-colorsoft-aqua, #8bafb5) 45%, transparent);
	border-radius: 16px;
	overflow: hidden;
}

.dgs-tableau-de-bord table.shop_table th,
.dgs-tableau-de-bord table.shop_table td {
	border: 0;
	padding: 1em 1.25em;
	text-align: left;
	vertical-align: middle;
	color: var(--gs-colordeep-teal, #0b414a);
	background: none;
}

.dgs-tableau-de-bord table.shop_table thead th {
	background: var(--gs-colorcloud-white, #fafcfc);
	background: color-mix(in srgb, var(--gs-colorsoft-aqua, #8bafb5) 12%, var(--gs-colorcloud-white, #fafcfc));
	padding-top: 0.8em;
	padding-bottom: 0.8em;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.dgs-tableau-de-bord table.shop_table tbody th,
.dgs-tableau-de-bord table.shop_table tbody td,
.dgs-tableau-de-bord table.shop_table tfoot th,
.dgs-tableau-de-bord table.shop_table tfoot td {
	border-top: 1px solid var(--gs-colorsoft-aqua, #8bafb5);
	border-top: 1px solid color-mix(in srgb, var(--gs-colorsoft-aqua, #8bafb5) 35%, transparent);
}

.dgs-tableau-de-bord table.shop_table tbody tr {
	transition: background-color 0.2s ease-in-out;
}

.dgs-tableau-de-bord table.shop_table tbody tr:hover {
	background: color-mix(in srgb, var(--gs-colorsoft-aqua, #8bafb5) 6%, var(--gs-colorpure-white, #ffffff));
}

.dgs-tableau-de-bord table.shop_table tbody th,
.dgs-tableau-de-bord table.shop_table tfoot th {
	font-weight: 600;
}

.dgs-tableau-de-bord table.shop_table td a:not(.button),
.dgs-tableau-de-bord table.shop_table th a:not(.button) {
	color: var(--gs-colorocean-teal, #11606b);
	font-weight: 600;
	text-decoration: none;
}

.dgs-tableau-de-bord table.shop_table td a:not(.button):hover,
.dgs-tableau-de-bord table.shop_table th a:not(.button):hover {
	text-decoration: underline;
}

.dgs-tableau-de-bord .woocommerce-orders-table__cell-order-date,
.dgs-tableau-de-bord .woocommerce-orders-table__cell-order-status {
	white-space: nowrap;
}

/* État de la commande : point de couleur devant le libellé. */
.dgs-tableau-de-bord .woocommerce-orders-table__cell-order-status::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 0.5em;
	border-radius: 50%;
	vertical-align: 0.1em;
	background: var(--gs-colormuted-teal, #54808a);
}

.dgs-tableau-de-bord .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status::before {
	background: var(--gs-colorocean-teal, #11606b);
}

.dgs-tableau-de-bord .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status::before,
.dgs-tableau-de-bord .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status::before,
.dgs-tableau-de-bord .woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status::before {
	background: var(--gs-colorsoft-aqua, #8bafb5);
}

/*
 * Colonne d'actions alignée à droite, boutons compacts au style du bouton
 * secondaire global (puqc-btn-secondary, buttons.css) : répétés sur
 * chaque ligne, des boutons pleins pleine taille alourdissaient le
 * tableau.
 */
.dgs-tableau-de-bord table.shop_table thead th:last-child:not(:first-child),
.dgs-tableau-de-bord table.shop_table tbody td:last-child:has(.button) {
	text-align: right;
	white-space: nowrap;
}

.dgs-tableau-de-bord table.shop_table .button.button {
	padding: 7px 18px;
	margin: 2px 0 2px 6px;
	font-size: 0.875em;
	line-height: 20px;
	background: var(--gs-colorpure-white, #ffffff);
	color: var(--gs-colorocean-teal, #11606b);
	border: 1px solid var(--gs-colorsoft-aqua, #8bafb5);
}

.dgs-tableau-de-bord table.shop_table .button.button:hover,
.dgs-tableau-de-bord table.shop_table .button.button:focus {
	background: var(--gs-colorocean-teal, #11606b);
	color: var(--gs-colorcloud-white, #fafcfc);
	border-color: var(--gs-colorocean-teal, #11606b);
}

/*
 * Téléphone : chaque ligne devient une petite carte, libellé à gauche
 * (data-title, fourni par WooCommerce et par l'onglet Abonnements) et
 * valeur à droite ; l'en-tête est masqué.
 */
@media (max-width: 767px) {
	.dgs-tableau-de-bord table.shop_table_responsive thead {
		display: none;
	}

	.dgs-tableau-de-bord table.shop_table_responsive,
	.dgs-tableau-de-bord table.shop_table_responsive tbody,
	.dgs-tableau-de-bord table.shop_table_responsive tr {
		display: block;
	}

	.dgs-tableau-de-bord table.shop_table_responsive tbody tr + tr {
		border-top: 1px solid var(--gs-colorsoft-aqua, #8bafb5);
		border-top: 1px solid color-mix(in srgb, var(--gs-colorsoft-aqua, #8bafb5) 45%, transparent);
	}

	.dgs-tableau-de-bord table.shop_table_responsive tbody th,
	.dgs-tableau-de-bord table.shop_table_responsive tbody td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1em;
		padding: 0.5em 1.1em;
		border-top: 0;
		text-align: right;
		white-space: normal;
	}

	.dgs-tableau-de-bord table.shop_table_responsive tbody tr > :first-child {
		padding-top: 1em;
	}

	.dgs-tableau-de-bord table.shop_table_responsive tbody tr > :last-child {
		padding-bottom: 1em;
	}

	/* Libellé de colonne ; remplace aussi le point d'état. */
	.dgs-tableau-de-bord table.shop_table_responsive tbody [data-title]::before {
		content: attr(data-title);
		display: block;
		width: auto;
		height: auto;
		margin: 0;
		border-radius: 0;
		background: none;
		font-size: 0.8em;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		text-align: left;
		color: var(--gs-colormuted-teal, #54808a);
	}

	.dgs-tableau-de-bord table.shop_table_responsive tbody td:last-child:has(.button) {
		justify-content: flex-end;
	}

	.dgs-tableau-de-bord table.shop_table_responsive tbody td:last-child:has(.button)::before {
		display: none;
	}
}

.dgs-tableau-de-bord .woocommerce-Addresses {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dgs-tableau-de-bord .woocommerce-Address {
	flex: 1 1 260px;
	background: var(--gs-colorcloud-white, #fafcfc);
	background: color-mix(in srgb, var(--gs-colorsoft-aqua, #8bafb5) 10%, var(--gs-colorcloud-white, #fafcfc));
	border-radius: 16px;
	padding: 1.25em;
	box-sizing: border-box;
}

.dgs-tableau-de-bord .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin: 0 0 0.75em;
}

.dgs-tableau-de-bord .woocommerce-Address-title h2,
.dgs-tableau-de-bord .woocommerce-Address-title h3 {
	margin: 0;
	font-size: 1.1em;
}

.dgs-tableau-de-bord .woocommerce-Address address {
	font-style: normal;
	color: var(--gs-colormuted-teal, #54808a);
}

.dgs-tableau-de-bord form p.form-row,
.dgs-tableau-de-bord form p.woocommerce-form-row {
	margin-bottom: 1.2em;
}

.dgs-tableau-de-bord form label,
.dgs-onboarding-page form label {
	color: var(--gs-colordeep-teal, #0b414a);
	font-weight: 600;
}

.dgs-tableau-de-bord form input[type="text"],
.dgs-tableau-de-bord form input[type="email"],
.dgs-tableau-de-bord form input[type="tel"],
.dgs-tableau-de-bord form input[type="password"],
.dgs-tableau-de-bord form input[type="url"],
.dgs-tableau-de-bord form input[type="datetime-local"],
.dgs-tableau-de-bord form input[type="date"],
.dgs-tableau-de-bord form select,
.dgs-tableau-de-bord form textarea,
.dgs-onboarding-page form input[type="text"],
.dgs-onboarding-page form input[type="email"],
.dgs-onboarding-page form input[type="tel"],
.dgs-onboarding-page form input[type="password"],
.dgs-onboarding-page form input[type="url"],
.dgs-onboarding-page form input[type="datetime-local"],
.dgs-onboarding-page form input[type="date"],
.dgs-onboarding-page form select,
.dgs-onboarding-page form textarea {
	width: 100%;
	max-width: 420px;
	box-sizing: border-box;
	padding: 0.65em 0.9em;
	border: 1px solid var(--gs-colorsoft-aqua, #8bafb5);
	border-radius: 10px;
}

/*
 * Même style que le bouton du hero de la page d'accueil (.puqc-btn
 * .puqc-btn-ocean, généré par le page builder) : couleurs, rayon, espacements
 * et transition repris à l'identique pour que les boutons du tableau de bord
 * s'accordent avec ceux du reste du site.
 *
 * « .button.button » : le CSS WooCommerce du thème GreenLight
 * (.woocommerce a.button, chargé après ce fichier) l'emporterait sinon
 * avec sa couleur, son ombre et son agrandissement au survol.
 */
.dgs-tableau-de-bord .button.button,
.dgs-tableau-de-bord button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	background: var(--gs-colorocean-teal, #11606b);
	color: var(--gs-colorpure-white, #ffffff);
	border: none;
	border-radius: var(--wp--custom--border-radius--xlarge, 35px);
	padding: 13px 30px;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--s, 16px);
	line-height: var(--wp--custom--line-height--s, 24px);
	font-family: inherit;
	cursor: pointer;
	text-decoration: none;
	box-shadow: none;
	transform: none;
	transition: var(--wp--custom--transition--ease-in-out, all 0.3s ease-in-out);
}

.dgs-tableau-de-bord .button.button:hover,
.dgs-tableau-de-bord .button.button:focus,
.dgs-tableau-de-bord button[type="submit"]:hover,
.dgs-tableau-de-bord button[type="submit"]:focus {
	background: var(--gs-colormuted-teal, #54808a);
	color: var(--gs-colorpure-white, #ffffff);
	box-shadow: none;
	transform: none;
}

.dgs-tableau-de-bord .button.button:focus-visible,
.dgs-tableau-de-bord button[type="submit"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--gs-colorpure-white, #ffffff), 0 0 0 4px var(--gs-colorocean-teal, #11606b);
}

.dgs-tableau-de-bord .woocommerce-message,
.dgs-tableau-de-bord .woocommerce-error,
.dgs-tableau-de-bord .woocommerce-info {
	list-style: none;
	margin: 0 0 1.5em;
	padding: 1em 1.25em;
	border-radius: 10px;
	background: color-mix(in srgb, var(--gs-colorsoft-aqua, #8bafb5) 18%, var(--gs-colorcloud-white, #fafcfc));
	color: var(--gs-colordeep-teal, #0b414a);
}

/*
 * Notices générés par WooCommerce Blocks (ex. : « Aucune commande n'a
 * encore été passée. »), rendus même sur les gabarits classiques comme
 * myaccount/orders.php et myaccount/payment-methods.php. Le style par
 * défaut de WooCommerce utilise un bleu générique (#007cba) pour
 * « is-info » : on le remplace par la palette du thème. Le lien
 * « .wc-forward » à l'intérieur (ex. : « Parcourir les produits ») prend
 * l'apparence du bouton principal global (puqc-btn puqc-btn-primary,
 * buttons.css) ; WooCommerce le force en lien gris souligné via
 * !important (fond, couleur, marges internes), d'où le !important en
 * retour ici.
 */
.dgs-tableau-de-bord .wc-block-components-notice-banner.is-info,
.dgs-tableau-de-bord .wc-block-components-notice-banner.is-success {
	background: color-mix(in srgb, var(--gs-colorsoft-aqua, #8bafb5) 18%, var(--gs-colorcloud-white, #fafcfc));
	border-color: var(--gs-colordeep-teal, #0b414a);
	color: var(--gs-colordeep-teal, #0b414a);
}

.dgs-tableau-de-bord .wc-block-components-notice-banner.is-info > svg,
.dgs-tableau-de-bord .wc-block-components-notice-banner.is-success > svg {
	background-color: var(--gs-colordeep-teal, #0b414a);
}

.dgs-tableau-de-bord .wc-block-components-notice-banner .wc-forward {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 13px 30px !important;
	border: none;
	border-radius: var(--wp--custom--border-radius--xlarge, 35px);
	background: var(--gs-colorocean-teal, #11606b) !important;
	color: var(--gs-colorcloud-white, #fafcfc) !important;
	opacity: 1 !important;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--s, 16px);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--s, 24px);
	text-decoration: none;
	transition: var(--wp--custom--transition--ease-in-out, all 0.3s ease-in-out);
}

.dgs-tableau-de-bord .wc-block-components-notice-banner .wc-forward:hover,
.dgs-tableau-de-bord .wc-block-components-notice-banner .wc-forward:focus-visible {
	background: var(--gs-colormuted-teal, #54808a) !important;
	color: var(--gs-colorpure-white, #ffffff) !important;
}

.dgs-tableau-de-bord .wc-block-components-notice-banner .wc-forward:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--gs-colorpure-white, #ffffff), 0 0 0 4px var(--gs-colorocean-teal, #11606b);
}

/* Texte et bouton alignés au centre, le bouton poussé à droite. */
.dgs-tableau-de-bord .wc-block-components-notice-banner__content:has(> .wc-forward) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
}

.dgs-tableau-de-bord .wc-block-components-notice-banner__content > .wc-forward {
	float: none;
	margin: 0;
}

.dgs-tableau-de-bord .wc-block-components-notice-banner + .button {
	margin-top: 1em;
}

@media (max-width: 700px) {
	.dgs-tableau-de-bord .woocommerce-MyAccount-navigation {
		flex-basis: 100%;
	}

	.dgs-tableau-de-bord .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.dgs-tableau-de-bord .woocommerce-Addresses {
		flex-direction: column;
	}
}

/*
 * Instructions « Virement Interac » sur la page de confirmation de commande
 * (DGS_PUQC_Gateway_Interac::thankyou_page), reprises de L'Art d'Être
 * Humain. Couleurs de la palette GreenLight (--gs-color*).
 */
.dgs-interac {
	margin: 0 0 48px;
	padding: 32px 36px;
	border-radius: var(--wp--custom--border-radius--small, 10px);
	background: color-mix(in srgb, var(--gs-colorsoft-aqua, #8bafb5) 10%, var(--gs-colorcloud-white, #fafcfc));
	color: var(--gs-colordeep-teal, #0b414a);
}

.dgs-interac p {
	margin: 0 0 0.75em;
}

.dgs-interac p:last-child {
	margin-bottom: 0;
}

.dgs-interac .dgs-interac-details {
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
}

.dgs-interac .dgs-interac-details li {
	margin: 0 0 0.35em;
}

/* Prix d'un produit « Abonnement » : « 20,00 $ par mois » (DGS_PUQC_Subscription_Product). */
.dgs-abonnement-periode {
	font-size: 0.8em;
	font-weight: 400;
	color: var(--gs-colormuted-teal, #54808a);
}

@media (max-width: 560px) {
	.dgs-interac {
		padding: 24px 20px;
	}
}

/*
 * Bloc « Installer l'application » (DGS_PUQC_App_Installer_Block) : même
 * carte que le bloc de connexion. Les panneaux sont révélés par
 * assets/js/app-installer.js ; [hidden] doit l'emporter sur les règles
 * d'affichage ci-dessous. Les boutons sont les boutons globaux
 * (puqc-btn puqc-btn-primary, buttons.css).
 */
.dgs-app[hidden],
.dgs-app [hidden] {
	display: none !important;
}

.dgs-app {
	background: var(--gs-colorcloud-white, #fafcfc);
	background: color-mix(in srgb, var(--gs-colorsoft-aqua, #8bafb5) 18%, var(--gs-colorcloud-white, #fafcfc));
	border-radius: 24px;
	padding: 2.5em;
	max-width: 640px;
	box-sizing: border-box;
	color: var(--gs-colordeep-teal, #0b414a);
	text-align: left;
}

.dgs-app:not(.dgs-app--compact) {
	margin-left: auto;
	margin-right: auto;
}

.dgs-app--compact {
	padding: 1.5em;
	margin-top: 2em;
}

.dgs-app-titre {
	margin: 0 0 0.5em;
	color: var(--gs-colordeep-teal, #0b414a);
}

.dgs-app-intro {
	margin: 0 0 1.5em;
	color: var(--gs-colormuted-teal, #54808a);
}

.dgs-app-etapes {
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.dgs-app-etapes li {
	display: flex;
	align-items: flex-start;
	gap: 0.9em;
	margin: 0;
}

.dgs-app-icone {
	flex: 0 0 auto;
	/* Taille explicite : le CSS global réduit les svg sans dimension CSS. */
	width: 44px;
	height: 44px;
	box-sizing: border-box;
	padding: 8px;
	border-radius: 12px;
	background: var(--gs-colorpure-white, #ffffff);
	color: var(--gs-colorocean-teal, #11606b);
}

.dgs-app-etapes span {
	padding-top: 0.45em;
}

.dgs-app-note {
	margin: 1em 0 0;
	font-size: 0.9em;
	color: var(--gs-colormuted-teal, #54808a);
}

.dgs-app-panneau--ordinateur {
	display: flex;
	align-items: center;
	gap: 1.5em;
}

.dgs-app-qr {
	flex: 0 0 150px;
	width: 150px;
	background: var(--gs-colorpure-white, #ffffff);
	border-radius: 12px;
	padding: 8px;
	box-sizing: border-box;
}

.dgs-app-qr svg {
	display: block;
	width: 100%;
	height: auto;
}

.dgs-app-panneau--ordinateur p {
	margin: 0 0 1em;
}

/* Vidéo explicative (choisie dans Pour un Québec conscient > Application mobile). */
.dgs-app-video {
	display: block;
	width: 100%;
	max-width: 280px;
	max-height: 60vh;
	margin: 0 auto 1.5em;
	border-radius: 16px;
	background: var(--gs-colordeep-teal, #0b414a);
}

/* « Ouvrir dans Safari / Chrome » + « Copier le lien ». */
.dgs-app-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75em 1.25em;
	margin: 0;
}

.dgs-app-lien {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: var(--gs-colordeep-teal, #0b414a);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.dgs-app-ou {
	margin: 1.5em 0 0.75em;
	color: var(--gs-colormuted-teal, #54808a);
}

@media (max-width: 700px) {
	.dgs-app {
		padding: 1.5em 1.25em;
	}

	.dgs-app-panneau--ordinateur {
		flex-direction: column;
		align-items: flex-start;
	}
}

/*
 * Téléphone : champs de formulaire à 16 px au minimum. En dessous, iOS
 * agrandit la page à chaque fois qu'on touche un champ (connexion, tri
 * de la boutique, quantité, etc.).
 */
@media (max-width: 767px) {
	.dgs-formulaire-connexion input,
	.woocommerce input.input-text,
	.woocommerce select,
	.woocommerce textarea,
	.wp-block-search__input {
		font-size: 16px;
	}

	/* Boutique : nombre de résultats et tri sur deux lignes, tri pleine largeur. */
	.woocommerce .woocommerce-result-count,
	.woocommerce .woocommerce-ordering {
		float: none;
		width: 100%;
		margin: 0 0 1em;
	}

	.woocommerce .woocommerce-ordering select.orderby {
		width: 100%;
		min-height: 44px;
	}

	/* Même chose dans le gabarit en blocs de la boutique (rangée flex). */
	:has(> .wp-block-woocommerce-catalog-sorting) {
		flex-wrap: wrap;
	}

	.wp-block-woocommerce-product-results-count,
	.wp-block-woocommerce-catalog-sorting {
		flex: 1 1 100%;
		width: 100%;
	}

	.wp-block-woocommerce-catalog-sorting .woocommerce-ordering {
		width: 100%;
	}

	/* Fiche produit : champ quantité assez large pour le toucher. */
	.woocommerce .quantity input.qty {
		width: 4em;
		min-height: 44px;
	}
}

/*
 * Tableau de bord sur téléphone : la navigation passe en pleine largeur,
 * ses liens en pastilles sur plusieurs lignes (au lieu d'une colonne de
 * 220px laissant un vide à droite), puis le contenu dessous.
 */
@media (max-width: 767px) {
	.dgs-tableau-de-bord .woocommerce {
		gap: 1.25em;
	}

	.dgs-tableau-de-bord .woocommerce-MyAccount-navigation,
	.dgs-tableau-de-bord .woocommerce-MyAccount-content {
		flex: 1 1 100%;
	}

	.dgs-tableau-de-bord .woocommerce-MyAccount-navigation {
		padding: 0.5em;
	}

	.dgs-tableau-de-bord .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4px;
	}

	.dgs-tableau-de-bord .woocommerce-MyAccount-navigation-link a {
		padding: 0.5em 0.9em;
		font-size: 0.9em;
		white-space: nowrap;
	}

	.dgs-tableau-de-bord-accueil .dgs-avatar {
		width: 48px;
		height: 48px;
	}
}

/*
 * Parcours d'accueil « Premiers pas » (DGS_PUQC_Onboarding) : page pleine
 * hauteur sans en-tête ni pied de page (templates/onboarding.php), une
 * carte centrée par étape.
 */
body.dgs-onboarding-page {
	margin: 0;
	background: var(--gs-colorcloud-white, #fafcfc);
	background: color-mix(in srgb, var(--gs-colorsoft-aqua, #8bafb5) 18%, var(--gs-colorcloud-white, #fafcfc));
}

.dgs-onboarding-page__cadre {
	box-sizing: border-box;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	padding: 2rem 16px;
}

.dgs-onboarding-page__logo img {
	display: block;
	width: auto;
	max-width: 220px;
	max-height: 72px;
	height: auto;
}

.dgs-onboarding-page__logo span {
	font-weight: 600;
	color: var(--gs-colordeep-teal, #0b414a);
}

.dgs-onboarding-page__carte {
	box-sizing: border-box;
	width: 100%;
	max-width: 760px;
	padding: clamp(1.5rem, 5vw, 3rem);
	background: var(--gs-colorpure-white, #ffffff);
	border: 1px solid color-mix(in srgb, var(--gs-colorsoft-aqua, #8bafb5) 45%, transparent);
	border-radius: 20px;
	container-type: inline-size;
}

.dgs-onboarding-page__deconnexion {
	margin: 0;
	font-size: 0.875rem;
}

.dgs-onboarding-page__deconnexion a {
	color: var(--gs-colormuted-teal, #54808a);
}

.dgs-onboarding__progression {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.dgs-onboarding__compteur {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--gs-colormuted-teal, #54808a);
}

.dgs-onboarding__points {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dgs-onboarding__point {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--gs-colorsoft-aqua, #8bafb5) 50%, transparent);
	transition: width 0.2s ease;
}

.dgs-onboarding__point.is-fait {
	background: var(--gs-colormuted-teal, #54808a);
}

.dgs-onboarding__point.is-active {
	width: 28px;
	border-radius: 5px;
	background: var(--gs-colorocean-teal, #11606b);
}

a.dgs-onboarding__point:focus-visible {
	outline: 2px solid var(--gs-colorocean-teal, #11606b);
	outline-offset: 3px;
}

.dgs-onboarding__titre {
	margin: 0 0 0.75rem;
	color: var(--gs-colordeep-teal, #0b414a);
}

.dgs-onboarding__intro {
	margin: 0 0 1.5rem;
	font-size: 1.0625rem;
}

.dgs-onboarding__erreur {
	margin: 0 0 1.5rem;
	padding: 0.75em 1em;
	border-left: 3px solid var(--gs-colorocean-teal, #11606b);
	background: var(--gs-colorcloud-white, #fafcfc);
	background: color-mix(in srgb, var(--gs-colorsoft-aqua, #8bafb5) 18%, var(--gs-colorcloud-white, #fafcfc));
	color: var(--gs-colordeep-teal, #0b414a);
	border-radius: 0 10px 10px 0;
}

.dgs-onboarding__video {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	aspect-ratio: 16 / 9;
	margin: 0 0 1.5rem;
	border-radius: 14px;
	overflow: hidden;
}

.dgs-onboarding__video--a-venir {
	background: var(--gs-colorcloud-white, #fafcfc);
	background: color-mix(in srgb, var(--gs-colorsoft-aqua, #8bafb5) 22%, var(--gs-colorcloud-white, #fafcfc));
	border: 2px dashed var(--gs-colorsoft-aqua, #8bafb5);
	color: var(--gs-colorocean-teal, #11606b);
	font-weight: 600;
}

.dgs-onboarding__video iframe,
.dgs-onboarding__video video {
	width: 100%;
	height: 100%;
	border: 0;
}

/* Champs du questionnaire : même style que Mon profil (règles
   .dgs-tableau-de-bord form ci-dessus, étendues à cette page). Hors du
   thème, les champs prendraient sinon la police système. */
.dgs-onboarding-page form input,
.dgs-onboarding-page form select,
.dgs-onboarding-page form textarea {
	font: inherit;
	color: var(--gs-colordeep-teal, #0b414a);
	background-color: var(--gs-colorpure-white, #ffffff);
}

.dgs-onboarding-page form input:focus,
.dgs-onboarding-page form select:focus,
.dgs-onboarding-page form textarea:focus {
	outline: none;
	border-color: var(--gs-colorocean-teal, #11606b);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--gs-colorsoft-aqua, #8bafb5) 35%, transparent);
}

.dgs-onboarding-page form textarea {
	resize: vertical;
}

.dgs-onboarding__navigation {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-top: 2rem;
}

.dgs-onboarding__navigation .puqc-btn-secondary {
	margin-right: auto;
}

@media (max-width: 480px) {
	.dgs-onboarding__navigation {
		flex-direction: column-reverse;
	}

	.dgs-onboarding__navigation .puqc-btn {
		width: 100%;
		margin-right: 0;
	}
}