/**
 * Licence Leasing - habillage de la landing page.
 * Reprend la palette du site : fond #ededed, accent #777, texte sombre.
 */

.oxz-lic {
	--oxz-bg: #ededed;
	--oxz-card: #ffffff;
	--oxz-ink: #23272b;
	--oxz-mute: #6b7177;
	--oxz-line: #dcdfe2;
	--oxz-accent: #23272b;
	--oxz-yes: #2f7d4f;
	--oxz-no: #a33a3a;
	--oxz-warn-bg: #fdf6e3;
	--oxz-warn-line: #d9c07a;
	background: var(--oxz-bg);
	color: var(--oxz-ink);
	font-size: 16px;
	line-height: 1.65;
	padding-bottom: 64px;
}

.oxz-lic__wrap {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 20px;
}

.oxz-lic__notices {
	padding-top: 24px;
}

/* --- Hero --- */

.oxz-lic__hero {
	background: var(--oxz-ink);
	color: #fff;
	padding: 56px 0;
	margin-bottom: 40px;
}

.oxz-lic__eyebrow {
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: 12px;
	font-weight: 700;
	color: #b9c0c6;
	margin: 0 0 12px;
}

.oxz-lic__h1 {
	font-size: clamp( 28px, 4.2vw, 44px );
	line-height: 1.15;
	margin: 0 0 16px;
	color: #fff;
	font-weight: 700;
}

.oxz-lic__lead {
	font-size: 18px;
	max-width: 62ch;
	color: #dde1e5;
	margin: 0;
}

/* --- Grille --- */

.oxz-lic__grid {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 48px;
	align-items: start;
}

@media ( max-width: 900px ) {
	.oxz-lic__grid { grid-template-columns: 1fr; gap: 32px; }
}

.oxz-lic__section { margin-bottom: 44px; }

.oxz-lic__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 36px;
}

@media ( max-width: 700px ) {
	.oxz-lic__cols { grid-template-columns: 1fr; gap: 28px; }
}

.oxz-lic__h2 {
	font-size: 22px;
	margin: 0 0 16px;
	font-weight: 700;
	color: var(--oxz-ink);
}

.oxz-lic__h3 {
	font-size: 18px;
	margin: 0 0 10px;
	font-weight: 700;
	color: var(--oxz-ink);
}

.oxz-lic__h4 {
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .08em;
	margin: 28px 0 12px;
	color: var(--oxz-mute);
}

.oxz-lic__h2--yes { color: var(--oxz-yes); }

.oxz-lic__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.oxz-lic__list li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 12px;
}

.oxz-lic__list li::before {
	position: absolute;
	left: 0;
	top: -1px;
	font-weight: 700;
	font-size: 17px;
}

.oxz-lic__list--yes li::before { content: "\2713"; color: var(--oxz-yes); }

/* --- Alerte Content ID --- */

.oxz-lic__note {
	background: #fff;
	border-left: 4px solid var(--oxz-mute);
	padding: 16px 20px;
	margin: 0 0 32px;
	font-size: 15px;
}

/* --- Credit --- */

.oxz-lic__credit {
	font-family: Menlo, Consolas, monospace;
	background: #fff;
	border: 1px dashed var(--oxz-line);
	padding: 10px 14px;
	display: inline-block;
	margin: 6px 0 0;
	font-size: 15px;
}

/* --- Etapes --- */

.oxz-lic__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
	counter-reset: oxz;
}

@media ( max-width: 700px ) {
	.oxz-lic__steps { grid-template-columns: 1fr; }
}

.oxz-lic__steps li {
	background: var(--oxz-card);
	border: 1px solid var(--oxz-line);
	border-radius: 6px;
	padding: 22px 20px;
}

.oxz-lic__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--oxz-ink);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 12px;
}

.oxz-lic__steps strong { display: block; margin-bottom: 6px; }
.oxz-lic__steps span:not(.oxz-lic__num) { color: var(--oxz-mute); font-size: 15px; }

/* --- FAQ --- */

.oxz-lic__faq {
	background: var(--oxz-card);
	border: 1px solid var(--oxz-line);
	border-radius: 6px;
	margin-bottom: 10px;
	padding: 0 20px;
}

.oxz-lic__faq summary {
	cursor: pointer;
	padding: 16px 0;
	font-weight: 600;
	list-style: none;
	position: relative;
	padding-right: 28px;
}

.oxz-lic__faq summary::-webkit-details-marker { display: none; }

.oxz-lic__faq summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 14px;
	font-size: 20px;
	color: var(--oxz-mute);
}

.oxz-lic__faq[open] summary::after { content: "\2212"; }
.oxz-lic__faq p { margin: 0 0 18px; color: var(--oxz-mute); }

/* --- Passerelle exclusivite --- */

.oxz-lic__cross {
	background: var(--oxz-card);
	border: 1px solid var(--oxz-line);
	border-radius: 6px;
	padding: 26px 24px;
}

.oxz-lic__cross p { color: var(--oxz-mute); margin: 0 0 14px; }

.oxz-lic__link {
	display: inline-block;
	font-weight: 600;
	color: var(--oxz-ink);
	border-bottom: 2px solid var(--oxz-ink);
	text-decoration: none;
	padding-bottom: 1px;
}

.oxz-lic__link:hover { opacity: .7; color: var(--oxz-ink); }
.oxz-lic__link--muted { display: block; margin-top: 10px; font-weight: 400; font-size: 14px; color: var(--oxz-mute); border-bottom-color: var(--oxz-line); }

/* --- Carte d'achat --- */

.oxz-lic__aside { position: sticky; top: 24px; }

@media ( max-width: 900px ) {
	.oxz-lic__aside { position: static; }
}

.oxz-lic__card {
	background: var(--oxz-card);
	border: 1px solid var(--oxz-line);
	border-radius: 8px;
	padding: 28px 26px;
	box-shadow: 0 2px 14px rgba( 0, 0, 0, .06 );
}

.oxz-lic__small { color: var(--oxz-mute); font-size: 15px; margin: 0 0 20px; }

.oxz-lic__label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
}

.oxz-lic__form textarea,
.oxz-lic__form input[type="text"] {
	width: 100%;
	border: 1px solid var(--oxz-line);
	border-radius: 4px;
	padding: 10px 12px;
	font-size: 15px;
	font-family: inherit;
	background: #fff;
	color: var(--oxz-ink);
	box-sizing: border-box;
}

.oxz-lic__form textarea:focus,
.oxz-lic__form input[type="text"]:focus {
	outline: 2px solid var(--oxz-ink);
	outline-offset: 1px;
	border-color: var(--oxz-ink);
}

.oxz-lic__hint {
	font-size: 13px;
	color: var(--oxz-mute);
	margin: 6px 0 18px;
	line-height: 1.5;
}

.oxz-lic__total {
	border-top: 1px solid var(--oxz-line);
	margin-top: 20px;
	padding-top: 18px;
	min-height: 62px;
}

.oxz-lic__total-empty { color: var(--oxz-mute); font-size: 14px; }
.oxz-lic__total-qty { font-size: 13px; color: var(--oxz-mute); text-transform: uppercase; letter-spacing: .06em; }
.oxz-lic__total-sum { font-size: 32px; font-weight: 700; line-height: 1.2; }
.oxz-lic__total-unit { font-size: 14px; color: var(--oxz-mute); }

.oxz-lic__cta {
	display: block;
	width: 100%;
	margin-top: 18px;
	padding: 15px 20px;
	background: var(--oxz-ink);
	color: #fff;
	border: 0;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: opacity .15s ease;
}

.oxz-lic__cta:hover { opacity: .85; }

.oxz-lic__secure {
	font-size: 12.5px;
	color: var(--oxz-mute);
	margin: 12px 0 0;
	line-height: 1.5;
}

.oxz-lic__warn {
	background: var(--oxz-warn-bg);
	border: 1px solid var(--oxz-warn-line);
	padding: 14px 16px;
	border-radius: 4px;
	font-size: 14px;
}

/* --- Grille tarifaire --- */

.oxz-lic__price { width: 100%; border-collapse: collapse; font-size: 15px; }

.oxz-lic__price th,
.oxz-lic__price td {
	text-align: left;
	padding: 9px 0;
	border-bottom: 1px solid var(--oxz-line);
	vertical-align: baseline;
}

.oxz-lic__price th { font-weight: 400; color: var(--oxz-mute); }
.oxz-lic__price td { text-align: right; }
.oxz-lic__price small { display: block; color: var(--oxz-mute); font-size: 12.5px; font-weight: 400; }

/* --- Bloc d'aide --- */

.oxz-lic__help {
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--oxz-line);
	font-size: 15px;
}

.oxz-lic__help p { color: var(--oxz-mute); margin: 4px 0 10px; font-size: 14px; }

/* -------------------------------------------------------------------------
 * Saisie des instrus : un champ par instru
 * ---------------------------------------------------------------------- */

.oxz-lic__fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 4px;
	min-width: 0;
}

.oxz-lic__fieldset .oxz-lic__label {
	padding: 0;
	float: none;
}

.oxz-lic__lignes {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 10px;
}

.oxz-lic__ligne {
	display: flex;
	align-items: center;
	gap: 8px;
}

.oxz-lic__ligne-num {
	flex: 0 0 22px;
	font-size: 13px;
	font-weight: 700;
	color: var(--oxz-mute);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.oxz-lic__ligne .oxz-lic__ligne-champ {
	flex: 1 1 auto;
	min-width: 0;
}

.oxz-lic__del {
	flex: 0 0 30px;
	height: 30px;
	line-height: 1;
	border: 1px solid var(--oxz-line);
	border-radius: 4px;
	background: #fff;
	color: var(--oxz-mute);
	font-size: 18px;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}

.oxz-lic__del:hover {
	color: #b3261e;
	border-color: #b3261e;
}

.oxz-lic__add {
	border: 1px dashed var(--oxz-line);
	background: transparent;
	color: var(--oxz-ink);
	border-radius: 4px;
	padding: 9px 14px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	width: 100%;
	transition: border-color .15s ease, background .15s ease;
}

.oxz-lic__add:hover:not( :disabled ) {
	border-color: var(--oxz-ink);
	background: rgba( 0, 0, 0, .03 );
}

.oxz-lic__add:disabled {
	opacity: .45;
	cursor: not-allowed;
}

/* Liste des autorisations sur toute la largeur : deux colonnes si la place le permet. */
.oxz-lic__list--large {
	columns: 2;
	column-gap: 40px;
}

.oxz-lic__list--large li {
	break-inside: avoid;
}

@media ( max-width: 700px ) {
	.oxz-lic__list--large { columns: 1; }
}

/* -------------------------------------------------------------------------
 * Tarifs, en tete de la colonne principale
 * ---------------------------------------------------------------------- */

.oxz-lic__paliers {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 14px;
}

.oxz-lic__paliers li {
	border: 1px solid var(--oxz-line);
	border-radius: 8px;
	padding: 18px 16px;
	background: #fff;
	text-align: center;
}

.oxz-lic__palier-qty {
	display: block;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--oxz-mute);
	margin-bottom: 6px;
}

.oxz-lic__palier-sum {
	display: block;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--oxz-ink);
}

.oxz-lic__palier-unit {
	display: block;
	font-size: 13px;
	color: var(--oxz-mute);
	margin-top: 4px;
}

@media ( max-width: 560px ) {
	.oxz-lic__paliers { grid-template-columns: 1fr; gap: 10px; }
	.oxz-lic__paliers li { display: flex; align-items: baseline; gap: 10px; text-align: left; }
	.oxz-lic__palier-qty { margin-bottom: 0; flex: 1 1 auto; }
	.oxz-lic__palier-sum { font-size: 22px; }
	.oxz-lic__palier-unit { margin-top: 0; flex: 0 0 auto; }
}

/* -------------------------------------------------------------------------
 * Hero avec photo de fond
 *
 * Le voile sombre n'est pas decoratif : sans lui, le texte blanc devient
 * illisible des que la photo est changee pour une image plus claire.
 * ---------------------------------------------------------------------- */

.oxz-lic__hero--photo {
	position: relative;
	background-color: var(--oxz-ink);
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
	isolation: isolate;
}

.oxz-lic__hero--photo::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		100deg,
		rgba( 17, 19, 22, .92 ) 0%,
		rgba( 17, 19, 22, .78 ) 42%,
		rgba( 17, 19, 22, .38 ) 100%
	);
}

@media ( max-width: 860px ) {
	/* Sur mobile le texte occupe toute la largeur : voile uniforme et plus dense. */
	.oxz-lic__hero--photo::before {
		background: linear-gradient(
			180deg,
			rgba( 17, 19, 22, .88 ) 0%,
			rgba( 17, 19, 22, .78 ) 100%
		);
	}
}

/* -------------------------------------------------------------------------
 * Page isolee : barre de langue et pied minimal
 *
 * La page ne sort ni le menu ni le pied de page du theme. Ces regles
 * remplacent ce que le theme posait autour, et neutralisent ce qu'il
 * appliquait encore au body.
 * ---------------------------------------------------------------------- */

body.oxz-lic-seul {
	/* Les variables sont declarees sur .oxz-lic ; le pied est en dehors,
	   on les lui redonne ici. */
	--oxz-ink: #23272b;
	--oxz-bg: #ededed;
	margin: 0;
	padding: 0;
	background: var(--oxz-bg);
}

body.oxz-lic-seul .oxz-lic {
	padding-top: 0;
}

/* --- Barre de langue --- */

.oxz-lic__topbar {
	background: var(--oxz-ink);
	border-bottom: 1px solid rgba( 255, 255, 255, .10 );
}

.oxz-lic__topbar-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 56px;
}

/* Volontairement un span, pas un lien : rien ne doit ramener au site. */
.oxz-lic__brand {
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.oxz-lic__langs {
	display: flex;
	align-items: center;
	gap: 10px;
}

.oxz-lic__lang {
	display: block;
	width: 30px;
	height: 20px;
	border-radius: 3px;
	overflow: hidden;
	opacity: .45;
	box-shadow: 0 0 0 1px rgba( 255, 255, 255, .25 );
	transition: opacity .15s ease, box-shadow .15s ease, transform .15s ease;
}

.oxz-lic__lang svg {
	display: block;
	width: 100%;
	height: 100%;
}

.oxz-lic__lang:hover,
.oxz-lic__lang:focus-visible {
	opacity: .9;
	transform: translateY( -1px );
}

.oxz-lic__lang.is-actif {
	opacity: 1;
	box-shadow: 0 0 0 2px #fff;
	cursor: default;
}

/* --- Pied minimal : uniquement les liens legaux, en onglet separe --- */

.oxz-lic__foot {
	background: var(--oxz-ink);
	color: #9aa1a8;
	padding: 22px 0;
	font-size: 13px;
}

.oxz-lic__foot p {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
}

.oxz-lic__foot a {
	color: #cfd4d9;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.oxz-lic__foot a:hover,
.oxz-lic__foot a:focus-visible {
	color: #fff;
}

@media ( max-width: 600px ) {
	.oxz-lic__brand {
		font-size: 13px;
		letter-spacing: .18em;
	}

	.oxz-lic__lang {
		width: 26px;
		height: 18px;
	}

	.oxz-lic__foot p {
		gap: 6px 14px;
	}
}

/* --- Barre claire, pour que le logo officiel garde ses couleurs ---
 *
 * Le logo est noir et rouge sur fond transparent : sur un bandeau sombre, le
 * mot OXYDZ disparaissait. La barre passe donc en clair, le hero sombre
 * commence juste dessous.
 */

.oxz-lic__topbar {
	background: #ffffff;
	border-bottom: 1px solid var( --oxz-line );
}

.oxz-lic__logo {
	display: block;
	height: 30px;
	width: auto;
	max-width: 220px;
}

.oxz-lic__brand {
	color: var( --oxz-ink );
}

.oxz-lic__lang {
	opacity: .5;
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, .18 );
}

.oxz-lic__lang.is-actif {
	opacity: 1;
	box-shadow: 0 0 0 2px var( --oxz-ink );
}

@media ( max-width: 600px ) {
	.oxz-lic__logo {
		height: 24px;
	}
}

/* La note juridique fermee la page : elle respire au-dessus, pas en dessous. */
.oxz-lic__note--bas {
	margin: 8px 0 0;
}

/* Etapes reduites aux titres : la carte se resserre autour du texte. */
.oxz-lic__steps li {
	padding: 18px 20px;
}

.oxz-lic__steps strong {
	margin-bottom: 0;
}

.oxz-lic__num {
	margin-bottom: 10px;
}

/* -------------------------------------------------------------------------
 * Panier et commande
 *
 * Sur ces pages, WooCommerce et Hestia chargent leurs feuilles apres
 * celle-ci : il faut remonter la specificite, sinon le logo reprend sa
 * taille naturelle (111 px de haut) et pousse toute la page.
 * ---------------------------------------------------------------------- */

.oxz-lic .oxz-lic__topbar .oxz-lic__logo {
	height: 30px;
	width: auto;
	max-width: 220px;
}

.oxz-lic__etape {
	padding-top: 32px;
	padding-bottom: 8px;
}

.oxz-lic-tunnel .oxz-lic {
	padding-bottom: 48px;
}

/* Le contenu de WooCommerce reste dans la largeur de la page. */
.oxz-lic__etape .woocommerce {
	max-width: 100%;
}

@media ( max-width: 600px ) {
	.oxz-lic .oxz-lic__topbar .oxz-lic__logo {
		height: 24px;
	}
}

/* Le formulaire de commande de WooCommerce est construit en flottants. Sans
   contexte de formatage ici, la page se replie sur elle-meme et le pied
   remonte au milieu de la colonne « Votre commande ». */
.oxz-lic__etape {
	display: flow-root;
}

/* -------------------------------------------------------------------------
 * Confort tactile et bandeau cookies
 * ---------------------------------------------------------------------- */

/* Les drapeaux mesuraient 26 x 18 px : trop petit pour un doigt, et trois
   cibles collees les unes aux autres. Le drapeau garde sa taille, c'est la
   zone cliquable qui s'agrandit autour. */
.oxz-lic__lang {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	min-width: 44px;
	min-height: 44px;
	overflow: visible;
	border-radius: 6px;
	box-shadow: none;
}

.oxz-lic__lang svg {
	width: 30px;
	height: 20px;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, .18 );
}

.oxz-lic__lang.is-actif {
	box-shadow: none;
}

.oxz-lic__lang.is-actif svg {
	box-shadow: 0 0 0 2px var( --oxz-ink );
}

.oxz-lic__langs {
	gap: 0;
	margin-right: -7px; /* Aligne le dernier drapeau sur la marge du logo. */
}

/* Le bandeau cookies est en position fixe : sans reserve en bas de page, il
   recouvre la fin du formulaire de commande — un tiers de l'ecran sur mobile.
   La classe est posee par le plugin tant que le choix n'a pas ete fait. */
body.oxz-lic-seul.cookies-not-set {
	padding-bottom: 170px;
}

@media ( max-width: 600px ) {
	.oxz-lic__lang svg {
		width: 26px;
		height: 18px;
	}

	body.oxz-lic-seul.cookies-not-set {
		padding-bottom: 320px;
	}
}

/* Champs de saisie confortables au doigt : 36 px etait juste trop court. */
@media ( max-width: 600px ) {
	.oxz-lic__ligne-champ,
	.oxz-lic__form input[type="text"] {
		min-height: 44px;
	}
}

/* -------------------------------------------------------------------------
 * Sur une colonne : la carte d'achat remonte juste apres les tarifs
 *
 * En deux colonnes, la carte est collante a droite et reste toujours visible.
 * Empilee, elle se retrouvait en fin de page, apres la FAQ : le client lisait
 * tout avant de pouvoir commander. Elle est le frere de la colonne principale
 * dans le HTML, donc un simple `order` ne suffit pas a l'inserer au milieu :
 * on dissout les deux colonnes dans la grille pour ordonner leurs contenus.
 *
 * Rien de tout ceci ne s'applique au-dela de 900 px : l'affichage sur ecran
 * est inchange.
 * ---------------------------------------------------------------------- */

@media ( max-width: 900px ) {
	.oxz-lic__grid {
		gap: 0; /* Les marges des sections suffisent une fois empilees. */
	}

	.oxz-lic__main,
	.oxz-lic__aside {
		display: contents;
	}

	.oxz-lic__main > * {
		order: 3;
	}

	.oxz-lic__tarifs {
		order: 1;
	}

	.oxz-lic__card {
		order: 2;
		margin-bottom: 44px;
	}
}

/* -------------------------------------------------------------------------
 * Paliers tarifaires : tenir dans la largeur quelle que soit la langue
 *
 * Sur une ligne, le tarif unitaire etait en `flex: 0 0 auto` : il refusait de
 * retrecir. « soit 49,90 € l'instru » tenait, « es decir 49,90 € por
 * instrumental » debordait de 110 px. On autorise le retour a la ligne plutot
 * que de compter sur la longueur des mots.
 * ---------------------------------------------------------------------- */

@media ( max-width: 700px ) {
	.oxz-lic__paliers li {
		flex-wrap: wrap;
		column-gap: 10px;
		row-gap: 2px;
	}

	.oxz-lic__palier-qty {
		flex: 1 1 auto;
		min-width: 0;
	}

	.oxz-lic__palier-sum {
		flex: 0 0 auto;
	}

	/* Toujours sur sa propre ligne : la quantite et le prix en haut, le detail
	   dessous. Sinon la hauteur des trois paliers depend de la longueur des mots,
	   et change d une langue a l autre. */
	.oxz-lic__palier-unit {
		flex: 1 0 100%;
		min-width: 0;
	}

	.oxz-lic__paliers li > * {
		overflow-wrap: break-word;
	}
}


/* -------------------------------------------------------------------------
 * Case de renonciation au droit de retractation
 *
 * Elle conditionne le paiement : elle doit se voir, sans pour autant crier
 * plus fort que le bouton lui-meme.
 * ---------------------------------------------------------------------- */

.oxz-lic__retract {
	margin: 0 0 18px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var( --oxz-line );
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.5;
}

.oxz-lic__retract label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	cursor: pointer;
	font-weight: 400;
}

.oxz-lic__retract input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
}

.oxz-lic__retract .required {
	color: var( --oxz-no );
	text-decoration: none;
	border: 0;
}


/* Le bouton d'ajout etait en largeur pleine sans compter sa bordure : il
   depassait son cadre de deux pixels. */
.oxz-lic__add,
.oxz-lic__form input[type="text"],
.oxz-lic__ligne-champ {
	box-sizing: border-box;
}


/* -------------------------------------------------------------------------
   Les pages legales

   Elles portent le meme habillage que le tunnel depuis qu'elles ne sortent
   plus le menu et le pied de Hestia. Leur contenu est du HTML nu, sans une
   seule classe : tout se regle ici, au selecteur d'element.
   ---------------------------------------------------------------------- */

.oxz-lic__legal {
	max-width: 780px;
	margin: 32px auto 0;
	padding: 40px 32px 48px;
	background: var(--oxz-card);
	border: 1px solid var(--oxz-line);
	border-radius: 10px;
}

.oxz-lic__legal-titre {
	margin: 0 0 8px;
	font-size: 30px;
	line-height: 1.25;
}

.oxz-lic__legal h2 {
	margin: 34px 0 12px;
	font-size: 20px;
	line-height: 1.35;
	color: var( --oxz-ink );
}

.oxz-lic__legal h3 {
	margin: 26px 0 10px;
	font-size: 17px;
	color: var( --oxz-ink );
}

.oxz-lic__legal p,
.oxz-lic__legal li {
	color: var( --oxz-ink );
}

.oxz-lic__legal ul,
.oxz-lic__legal ol {
	margin: 0 0 18px;
	padding-left: 22px;
}

.oxz-lic__legal li {
	margin: 0 0 8px;
}

/* Adresses e-mail et references longues : sur un telephone, elles debordaient
   du cadre plutot que de passer a la ligne. */
.oxz-lic__legal a {
	color: var( --oxz-ink );
	word-break: break-word;
}

.oxz-lic__legal table {
	width: 100%;
	margin: 0 0 18px;
	border-collapse: collapse;
}

.oxz-lic__legal th,
.oxz-lic__legal td {
	padding: 8px 10px;
	border: 1px solid var( --oxz-line );
	text-align: left;
	vertical-align: top;
}

@media ( max-width: 640px ) {
	.oxz-lic__legal {
		margin-top: 20px;
		padding: 26px 18px 32px;
		border-radius: 8px;
	}

	.oxz-lic__legal-titre {
		font-size: 25px;
	}
}