/*
 * Politique de confidentialité (privacy-policy.php), chargée sur cette page seulement.
 *
 * Un texte à consulter. Sur grand écran, le sommaire reste en vue à gauche et suit la lecture.
 * Chaque partie ouvre sur un rond à pictogramme et son numéro, comme les étapes de « Comment ça
 * marche ». Ce qui se compare se met en forme : les destinataires en cartes, les durées en grands
 * chiffres, les droits en tuiles. Rien ici ne se clique à part les liens, le sommaire et le
 * formulaire : les cartes et les tuiles ne réagissent pas au survol.
 */

/* ---------------------------------------------------------------- Tête */

.doc-tete {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: clamp(26px, 4vw, 40px) clamp(44px, 6vw, 72px);
	border-bottom: 1px solid var(--line);
}

/* La lueur de surface des autres pages rédigées. */
.doc-tete::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(55% 70% at 88% 0%, rgba(88, 152, 214, 0.15), rgba(88, 152, 214, 0) 70%),
		linear-gradient(180deg, rgba(18, 33, 58, 0.35), rgba(6, 13, 22, 0) 420px);
}

.doc-tete__repere { margin-top: clamp(28px, 4.4vw, 52px); }

.doc-tete__titre {
	max-width: 16ch;
	margin-top: 18px;
	font-size: clamp(38px, 6.2vw, 72px);
	line-height: 1.02;
	letter-spacing: -0.015em;
}

.doc-tete__date {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: clamp(22px, 3vw, 30px);
	padding: 7px 14px 7px 10px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	font-size: 13.5px;
	color: var(--text-2);
}

.doc-tete__date .picto { width: 22px; height: 22px; flex: none; color: var(--text-3); }

.doc-tete__intro { max-width: 64ch; margin-top: 22px; color: var(--text-2); }

/* Le sceau : le bouclier des droits dans un grand rond, à droite du titre sur grand écran. */
.doc-tete__sceau { display: none; }

@media (min-width: 960px) {
	.doc-tete__sceau {
		position: absolute;
		right: max(var(--gutter), calc((100vw - var(--rail)) / 2 + var(--gutter)));
		bottom: clamp(44px, 6vw, 72px);
		display: grid;
		place-items: center;
		width: 188px;
		height: 188px;
		border: 1px solid var(--line-strong);
		border-radius: 50%;
		background: radial-gradient(circle at 50% 30%, #13283f, var(--ink) 72%);
		box-shadow: 0 0 0 14px rgba(111, 168, 220, 0.04), 0 0 0 28px rgba(111, 168, 220, 0.025);
		color: var(--text-2);
	}

	.doc-tete__sceau .picto { width: 42%; height: 42%; }
}

/* ---------------------------------------------------------------- Corps et sommaire */

.doc-corps {
	display: grid;
	gap: clamp(28px, 4vw, 40px);
	padding-block: clamp(32px, 5vw, 56px) var(--chapter);
}

@media (min-width: 1024px) {
	.doc-corps {
		grid-template-columns: 250px minmax(0, 1fr);
		column-gap: clamp(48px, 5vw, 72px);
		align-items: start;
	}

	.doc-cote {
		position: sticky;
		top: calc(var(--entete) + 32px);
		max-height: calc(100vh - var(--entete) - 48px);
		overflow-y: auto;
		scrollbar-width: none;
	}
}

.doc-sommaire__titre {
	font-size: 11.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-3);
}

.doc-sommaire__liste {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	border-left: 1px solid var(--line);
}

.doc-sommaire a {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	gap: 6px;
	margin-left: -1px;
	padding: 9px 0 9px 16px;
	border-left: 1px solid transparent;
	color: var(--text-2);
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
	transition: color var(--dur-lente) var(--ease), border-color var(--dur-lente) var(--ease);
}

.doc-sommaire a:hover { color: var(--text); }

/* La partie à l'écran (sommaire.js) : un trait d'eau, jamais la seule couleur. */
.doc-sommaire a[aria-current] { color: var(--text); border-left-color: var(--water); }

.doc-sommaire__num {
	padding-top: 1px;
	font-family: var(--display);
	font-size: 12.5px;
	letter-spacing: 0.06em;
	color: var(--water);
}

.doc-cote__action {
	display: grid;
	justify-items: start;
	gap: 14px;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--text-3);
}

.doc-cote__action a:not(.bouton) { color: var(--water); overflow-wrap: anywhere; }

/* Le PDF du texte : un lien à picto, cible au doigt de 44 px. */
.doc-cote__pdf {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-size: 14px;
	text-underline-offset: 3px;
}

.doc-cote__pdf .picto { width: 20px; height: 20px; flex: 0 0 auto; }

/* Sous 1024 px, le sommaire ouvre la page dans un cadre, puis le texte suit. */
@media (max-width: 1023.98px) {
	.doc-cote {
		padding: 20px 20px 22px;
		border: 1px solid var(--line-strong);
		border-radius: var(--r-md);
		background: rgba(11, 22, 36, 0.55);
	}

	.doc-sommaire__liste { border-left: 0; }
	.doc-sommaire li + li a { border-top: 1px solid var(--line); }
	.doc-sommaire a { margin-left: 0; padding: 11px 0; border-left: 0; }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
	.doc-sommaire__liste { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
	.doc-sommaire li:nth-child(2) a { border-top: 0; }
}

/* ---------------------------------------------------------------- Parties */

.doc-partie {
	padding-block: clamp(36px, 5vw, 60px);
	border-top: 1px solid var(--line);
	scroll-margin-top: calc(var(--entete) + 12px);
}

.doc-partie:first-child { padding-top: 0; border-top: 0; }

.doc-partie__tete {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 20px;
	align-items: center;
	margin-bottom: clamp(22px, 3vw, 30px);
}

.doc-partie__rond {
	grid-row: 1 / 3;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 30%, #11243b, var(--ink) 74%);
	color: var(--text-2);
}

.doc-partie__rond .picto { width: 54%; height: 54%; }

.doc-partie__num {
	align-self: end;
	font-family: var(--display);
	font-size: 12.5px;
	letter-spacing: 0.2em;
	color: var(--water);
}

.doc-partie__titre {
	align-self: start;
	margin-top: 4px;
	font-size: clamp(24px, 2.8vw, 32px);
}

/* Le texte rédigé : la mesure de lecture, le gras en blanc, les liens à l'eau. Une liste, un
   tableau ou un cadre prend un peu plus d'air que deux paragraphes. */
.doc-partie__corps > * { margin-block: 0; }
.doc-partie__corps > * + * { margin-top: 1.1em; }
.doc-partie__corps > * + :is(ul, figure, form) { margin-top: 1.4em; }
.doc-partie__corps > :is(ul, figure, form) + * { margin-top: 1.6em; }

.doc-partie__corps p,
.doc-partie__corps li {
	max-width: 68ch;
	color: var(--text-2);
	font-size: 16.5px;
	line-height: 1.75;
}

.doc-partie__corps strong { color: var(--text); font-weight: 600; }
.doc-partie__corps a { color: var(--water); overflow-wrap: anywhere; }

.doc-liste { padding: 0; list-style: none; }
.doc-liste > li { position: relative; padding-left: 24px; }
.doc-liste > li + li { margin-top: 0.6em; }

/* La puce : un court filet d'eau, comme les repères. */
.doc-liste > li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 0.86em;
	width: 11px;
	height: 1px;
	background: var(--water);
}

/* Qui est responsable : l'adresse comme une carte de visite, la première chose à retrouver. */
.doc-partie--responsable .doc-partie__corps > p:first-child {
	padding: 20px 24px;
	border: 1px solid var(--line-strong);
	border-left: 2px solid var(--water);
	border-radius: var(--r-md);
	background: rgba(11, 22, 36, 0.55);
	color: var(--text);
	font-size: 16.5px;
	line-height: 1.85;
}

/* Le compte Google des techniciens ne concerne pas les clients : une partie à part, en retrait. */
.doc-partie--agenda {
	margin-block: clamp(20px, 3vw, 32px);
	padding: clamp(24px, 3.4vw, 40px);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-md);
	background: #08111c;
}

.doc-partie--agenda + .doc-partie { border-top: 0; }

/* ---------------------------------------------------------------- Tableaux */

/* Les styles du bloc Tableau de WordPress (bordures, filet épais) s'effacent devant la page. */
.doc-partie__corps .wp-block-table { margin-inline: 0; overflow: visible; }
.doc-partie__corps .wp-block-table table { border: 0; }

.doc-tableau,
.doc-tableau tbody,
.doc-tableau tr,
.doc-tableau td { display: block; }

.doc-tableau td,
.doc-tableau th { padding: 0; border: 0; text-align: left; }

/* Les intitulés restent lus par les lecteurs d'écran, les cases les répètent à l'œil. */
.doc-tableau thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Destinataires : une carte par ligne, le nom en titre, le pays en pied. */
.doc-cartes tbody {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 14px;
}

.doc-cartes tr {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px 22px 18px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-md);
	background: rgba(11, 22, 36, 0.55);
}

.doc-cartes td {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--text-2);
}

.doc-cartes td:first-child {
	font-family: var(--display);
	font-size: 20px;
	line-height: 1.3;
	color: var(--text-2);
}

.doc-cartes td:first-child strong { font-weight: 400; color: var(--text); }

.doc-cartes td:nth-child(2) { color: var(--text); font-size: 15px; }
.doc-cartes td:nth-child(2)::first-letter { text-transform: uppercase; }

.doc-cartes td:nth-child(n+3)::before {
	content: attr(data-libelle);
	display: block;
	margin-bottom: 3px;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-3);
}

.doc-cartes td:last-child {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	color: var(--water-2);
}

/* Durées : le chiffre en grand à gauche, ce qui est gardé et la phrase exacte à droite. */
.doc-durees tbody { border-top: 1px solid var(--line); }

.doc-durees tr {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	grid-template-areas:
		'chiffre donnees'
		'chiffre duree';
	column-gap: 28px;
	row-gap: 4px;
	padding-block: 20px;
	border-bottom: 1px solid var(--line);
}

.doc-durees td:first-child {
	grid-area: donnees;
	font-size: 16px;
	line-height: 1.55;
	color: var(--text);
}

.doc-durees td:last-child { display: contents; }

.doc-duree__chiffre {
	grid-area: chiffre;
	font-family: var(--display);
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 200;
	line-height: 1.05;
	color: var(--water-2);
	font-variant-numeric: tabular-nums;
}

.doc-duree__chiffre::first-letter { text-transform: uppercase; }
.doc-duree__chiffre--picto .picto { width: 34px; height: 34px; color: var(--text-3); }

.doc-duree__texte {
	grid-area: duree;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--text-3);
}

.doc-duree__texte::first-letter { text-transform: uppercase; }
.doc-duree__texte strong { color: var(--text-2); font-weight: 600; }

@media (max-width: 560px) {
	.doc-durees tr { grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; }
	.doc-duree__chiffre { font-size: 24px; }
}

/* ---------------------------------------------------------------- Listes à intitulé */

/* Vos droits : une tuile par droit, son pictogramme, le verbe en titre. */
.doc-tuiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 12px;
	padding: 0;
	list-style: none;
}

.doc-partie__corps .doc-tuiles > li {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 16px;
	align-items: center;
	max-width: none;
	margin: 0;
	padding: 18px 20px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-md);
	background: rgba(11, 22, 36, 0.55);
	line-height: 1.5;
}

.doc-tuile__rond {
	grid-row: 1 / 3;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 30%, #11243b, var(--ink) 74%);
	color: var(--text-2);
}

.doc-tuile__rond .picto { width: 56%; height: 56%; }

.doc-tuiles .doc-intitule {
	align-self: end;
	font-family: var(--display);
	font-size: 18.5px;
	font-weight: 400;
}

.doc-tuiles .doc-intitule::first-letter { text-transform: uppercase; }

.doc-tuiles .doc-intitule__suite {
	grid-column: 2;
	align-self: start;
	font-size: 14px;
	color: var(--text-2);
}

/* Transferts, compte Google : l'intitulé à gauche, son explication à droite. */
.doc-libelles {
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.doc-partie__corps .doc-libelles > li {
	display: grid;
	grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
	gap: 6px 26px;
	max-width: none;
	margin: 0;
	padding-block: 16px;
	border-bottom: 1px solid var(--line);
}

.doc-libelles .doc-intitule { font-size: 15px; line-height: 1.6; }
.doc-libelles .doc-intitule__suite { font-size: 15.5px; line-height: 1.7; }
.doc-intitule__suite::first-letter { text-transform: uppercase; }

@media (max-width: 640px) {
	.doc-partie__corps .doc-libelles > li { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- Formulaire de demande */

/*
 * Le formulaire de helveor-core (Confidentialite\Demande), dans son cadre : les deux demandes en
 * cases à choisir, l'e-mail, l'envoi. Le bouton n'est pas rouge : le rouge sert à réserver et
 * payer, rien d'autre.
 */
.demande-donnees {
	position: relative;
	display: grid;
	gap: 20px;
	padding: clamp(22px, 3vw, 32px);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-md);
	background: var(--surface);
	scroll-margin-top: calc(var(--entete) + 24px);
}

.doc-partie__corps .demande-donnees > * + * { margin-top: 0; }
.demande-donnees p { max-width: none; margin: 0; }

.demande-donnees legend {
	margin-bottom: 12px;
	font-size: 11.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-3);
}

.demande-donnees fieldset {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: 12px;
}

/* Chaque demande est une case entière : la case à cocher, native, couvre tout le cadre. */
.demande-donnees__choix { position: relative; }

.demande-donnees__choix input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-md);
	background: var(--ink);
	cursor: pointer;
	transition: border-color var(--dur-lente) var(--ease), background-color var(--dur-lente) var(--ease);
}

.demande-donnees__choix input:hover { border-color: rgba(169, 207, 240, 0.45); }
.demande-donnees__choix input:checked { border-color: var(--water); background: rgba(111, 168, 220, 0.1); }

.doc-partie__corps .demande-donnees__choix label,
.demande-donnees__choix label {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 68px;
	padding: 14px 16px 14px 50px;
	color: var(--text);
	font-size: 15px;
	line-height: 1.4;
	pointer-events: none;
}

/* Le rond de la case, puis le point quand elle est choisie. */
.demande-donnees__choix label::before {
	content: '';
	position: absolute;
	left: 18px;
	top: 50%;
	width: 18px;
	height: 18px;
	border: 1px solid var(--field);
	border-radius: 50%;
	transform: translateY(-50%);
	transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.demande-donnees__choix input:checked + label::before {
	border-color: var(--water-2);
	background: radial-gradient(circle, var(--water-2) 0 4px, transparent 4.5px);
}

/* Le dessin de la demande, au bout de la case. */
.demande-donnees__choix label::after {
	content: '';
	flex: none;
	width: 28px;
	height: 28px;
	margin-left: auto;
	background: var(--text-3);
	-webkit-mask: var(--dessin) center / contain no-repeat;
	mask: var(--dessin) center / contain no-repeat;
	transition: background-color var(--dur-lente) var(--ease);
}

.demande-donnees__choix input:checked + label::after { background: var(--water-2); }

label[for='demande-export_personal_data'] { --dessin: url('../img/pictos/copie.svg'); }
label[for='demande-remove_personal_data'] { --dessin: url('../img/pictos/supprimer.svg'); }

.demande-donnees > p:has(input[type='email']) { display: grid; gap: 8px; }

/* Le piège à robots : hors de l'écran, jamais atteint au clavier (tabindex -1 dans le formulaire). */
.demande-donnees__piege {
	position: absolute !important;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.demande-donnees .bouton {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.22);
	color: var(--text);
}

.demande-donnees .bouton:hover,
.demande-donnees .bouton:focus-visible {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

@media (max-width: 560px) {
	.demande-donnees .bouton { width: 100%; }
}

/* La réponse après l'envoi : reçue en vert d'eau, un souci en ambre avec son « ! », jamais en rouge. */
.demande-donnees__message {
	position: relative;
	padding: 14px 16px 14px 48px;
	border: 1px solid;
	border-radius: var(--r-md);
	font-size: 15px;
	line-height: 1.6;
	color: var(--text);
}

.demande-donnees__message::before {
	position: absolute;
	left: 16px;
	top: 15px;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: var(--ink);
}

.demande-donnees__message.est-envoyee { border-color: rgba(143, 224, 190, 0.5); background: rgba(143, 224, 190, 0.07); }
.demande-donnees__message.est-envoyee::before { content: '\2713'; background: var(--ok); }

.demande-donnees__message.est-invalide,
.demande-donnees__message.est-attente { border-color: rgba(240, 192, 105, 0.55); background: rgba(240, 192, 105, 0.07); }

.demande-donnees__message.est-invalide::before,
.demande-donnees__message.est-attente::before { content: '!'; background: var(--warn); }