/*
 * DephysTech (Divi 5) — styles du thème enfant.
 *
 * Ce fichier ne reproduit PAS la mise en page : couleurs, typographie et espacements
 * des modules se règlent dans Divi 5 (Design Variables + presets, voir README).
 * Il contient uniquement :
 *   1. les jetons CSS (alias des Design Variables, pour le CSS personnalisé) ;
 *   2. l'accessibilité transverse (focus, lien d'évitement, mouvement réduit) ;
 *   3. la signature « Mesure » (échelle, carte de score, frise) ;
 *   4. quelques compléments Divi (formulaire, menu mobile, classes utilitaires).
 *
 * IMPORTANT : les valeurs de :root doublent les Design Variables de Divi.
 * Toute modification de la palette se reporte aux DEUX endroits.
 */

/* =========================================================================
   1. Jetons
   ========================================================================= */
:root {
	/* Palette officielle */
	--dt-blanc: #FFFFFF;
	--dt-petrole: #006B8D;
	--dt-ardoise: #6F97AF;
	--dt-ciel: #A2D9F3;
	--dt-cyan: #52C1DD;
	--dt-lime: #D3DA3D;

	/* Dérivées (Relative Colors dans Divi) */
	--dt-abysse: #062F3D;
	--dt-texte-2: #3D5A66;
	--dt-brume: #F2F7FA;
	--dt-piste: #E1ECF1;
	--dt-filet-clair: #E3EEF3;
	--dt-filet: #B9D0DC;
	--dt-ciel-40: rgba(162, 217, 243, 0.4);
	--dt-ciel-25: rgba(162, 217, 243, 0.25);

	/* Polices : titres et texte en Manrope (choix « sans contemporain »), données en IBM Plex Mono */
	--dt-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--dt-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* =========================================================================
   2. Accessibilité transverse
   ========================================================================= */

/* Lien d'évitement : invisible jusqu'à la prise de focus clavier */
.dt-skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100000;
	padding: 12px 20px;
	background: var(--dt-abysse);
	color: var(--dt-blanc) !important;
	font: 600 16px/1.2 var(--dt-font);
	text-decoration: none;
}
.dt-skip-link:focus {
	top: 16px;
	outline: 2px solid var(--dt-lime);
	outline-offset: 2px;
}

/* Focus visible : pétrole sur fond clair */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--dt-petrole);
	outline-offset: 3px;
}

/* Sur fond abysse : contour lime (pétrole sur abysse = 2,5:1).
   Ajouter la classe CSS « dt-sur-sombre » aux sections sombres et au pied de page. */
.dt-sur-sombre a:focus-visible,
.dt-sur-sombre button:focus-visible,
.dt-sur-sombre input:focus-visible,
.dt-sur-sombre select:focus-visible,
.dt-sur-sombre textarea:focus-visible,
.dt-sur-sombre [role="button"]:focus-visible {
	outline-color: var(--dt-lime);
}

/* Mouvement réduit : aucune animation ni transition */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   3. Signature « Mesure »
   ========================================================================= */

/* 3.1 Échelle graduée 0–5 — [dt_echelle] */
.dt-echelle {
	position: relative;
	height: 84px;
}
.dt-echelle::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 16px;
	height: 1px;
	background: var(--dt-filet);
}
.dt-echelle__graduations {
	position: absolute;
	left: 0;
	right: 0;
	top: 10px;
	display: flex;
	justify-content: space-between;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.dt-echelle__graduations li {
	width: 1px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	font: 400 13px/1 var(--dt-mono);
	color: var(--dt-texte-2);
}
.dt-echelle__graduations li::before {
	content: "";
	width: 1px;
	height: 13px;
	background: var(--dt-ardoise);
}
.dt-echelle__repere {
	position: absolute;
	left: var(--dt-pos, 68%);
	top: 9px;
	width: 15px;
	height: 15px;
	margin-left: -7px;
	border-radius: 50%;
	background: var(--dt-lime);
	box-shadow: 0 0 0 2px var(--dt-abysse);
}
.dt-echelle__libelle {
	position: absolute;
	left: var(--dt-pos, 68%);
	top: 60px; /* sous les chiffres des graduations, pour ne jamais les chevaucher */
	margin-left: -7px;
	font: 500 13px/1.2 var(--dt-mono);
	color: var(--dt-abysse);
	white-space: nowrap;
}

/* 3.2 Carte de restitution — [dt_score] */
.dt-score {
	margin: 0;
	background: var(--dt-blanc);
	border: 1px solid #DCE8EE;
	padding: clamp(24px, 3.4vw, 48px) clamp(20px, 3.4vw, 48px);
	color: var(--dt-abysse);
	font-family: var(--dt-font);
}
.dt-score p {
	padding: 0;
}
.dt-score__legende {
	font: 500 12px/1.4 var(--dt-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dt-texte-2);
}
.dt-score__global {
	display: flex;
	align-items: flex-end;
	gap: clamp(20px, 2.4vw, 28px);
	margin-top: 28px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--dt-filet-clair);
}
.dt-score__lettre {
	font: 300 clamp(80px, 8vw, 112px)/0.82 var(--dt-font);
	letter-spacing: -0.03em;
	color: var(--dt-petrole);
}
.dt-score__note {
	margin: 0;
	font: 500 clamp(32px, 3vw, 40px)/1 var(--dt-font);
	letter-spacing: -0.02em;
}
.dt-score__note small {
	font-size: 0.55em;
	color: var(--dt-texte-2);
}
.dt-score__statut {
	margin: 10px 0 0;
	font-size: 14px;
	font-weight: 600;
}
.dt-score__domaines {
	display: grid;
	gap: 18px;
	margin: 24px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.dt-score__domaines li {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 16px;
	row-gap: 8px;
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.4;
}
.dt-score__val {
	font: 400 14px/1.4 var(--dt-mono);
}
.dt-score__alerte {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 6px;
	background: var(--dt-lime);
	color: var(--dt-abysse);
	font: 500 11px/1.4 var(--dt-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: 1px;
}
.dt-score__barre {
	grid-column: 1 / -1;
	position: relative;
	height: 6px;
	background: var(--dt-piste);
}
.dt-score__barre::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--dt-val, 0%);
	background: var(--dt-petrole);
	transform-origin: left center;
}
.dt-score__barre::after {
	content: "";
	position: absolute;
	left: var(--dt-cible, 60%);
	top: -4px;
	width: 2px;
	height: 14px;
	background: var(--dt-abysse);
}
.dt-score__repere {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 24px 0 0;
	font: 400 12px/1.4 var(--dt-mono);
	color: var(--dt-texte-2);
}
.dt-score__repere span {
	display: inline-block;
	width: 2px;
	height: 14px;
	background: var(--dt-abysse);
}

/* Animation des barres : seulement si le JS l'a activée (et donc si le mouvement est autorisé).
   Sans JS, les barres sont affichées pleines. */
.dt-anim .dt-score .dt-score__barre::before {
	transform: scaleX(0);
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.dt-anim .dt-score.is-visible .dt-score__barre::before {
	transform: scaleX(1);
}

/* 3.3 Frise de la démarche — [dt_frise] */
.dt-frise {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 32px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	font-family: var(--dt-font);
}
.dt-frise li {
	position: relative;
	margin: 0;
	padding: 36px 0 0;
	border-top: 1px solid var(--dt-filet);
}
.dt-frise li::before {
	content: "";
	position: absolute;
	left: -1px;
	top: -7px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--dt-blanc);
	box-shadow: 0 0 0 2px var(--dt-abysse);
}
.dt-frise li:last-child::before {
	background: var(--dt-lime);
}
.dt-frise__num {
	display: block;
	font: 400 13px/1 var(--dt-mono);
	color: var(--dt-petrole);
}
.dt-frise__titre {
	display: block;
	margin-top: 10px;
	font-size: 19px;
	font-weight: 600;
	color: var(--dt-abysse);
}
.dt-frise__texte {
	display: block;
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--dt-texte-2);
}

/* =========================================================================
   4. Compléments Divi
   ========================================================================= */

/* 4.1 Classes utilitaires, à saisir dans le champ « Classe CSS » des modules */

/* Seconde moitié d'un titre en pétrole : « Maîtriser le risque numérique. <span class="dt-accent">Décider en confiance.</span> » */
.dt-accent {
	color: var(--dt-petrole);
}
/* Sur fond sombre, le pétrole est interdit en texte : l'accent passe en cyan */
.dt-sur-sombre .dt-accent {
	color: var(--dt-cyan);
}

/* Chiffres et surtitres en Plex Mono quand un preset ne suffit pas */
.dt-mono {
	font-family: var(--dt-mono);
}

/* Numéros décoratifs (01 à 04) : rappel, ajouter aussi aria-hidden="true" via Custom Attributes */
.dt-numero {
	font-family: var(--dt-font);
	font-weight: 300;
	line-height: 0.9;
	color: var(--dt-ardoise);
	letter-spacing: -0.03em;
}

/* Encart « à venir » (audit technique) */
.dt-a-venir {
	border: 1px dashed var(--dt-filet) !important;
}

/* 4.2 Formulaire : libellés visibles au-dessus des champs.
   Ajouter la classe « dt-form » au module Contact Form.
   À vérifier en DEV : si Divi 5 affiche déjà les libellés, ce bloc n'a pas d'effet visible. */
.dt-form .et_pb_contact_form_label {
	position: static !important;
	display: block !important;
	width: auto !important;
	height: auto !important;
	margin: 0 0 6px !important;
	clip: auto !important;
	clip-path: none !important;
	overflow: visible !important;
	font: 600 14px/1.4 var(--dt-font);
	color: var(--dt-abysse);
}
.dt-form .et_pb_contact_field {
	margin-bottom: 24px;
}

/* 4.3 Menu mobile : défilement bloqué derrière la superposition (classe posée par le JS) */
body.dt-menu-ouvert {
	overflow: hidden;
}

/* 4.4 Garde-fou contre le défilement horizontal (débordements décoratifs) */
#page-container,
#et-boc {
	overflow-x: clip;
}

/* 4.5 Mobile */
@media (max-width: 760px) {
	.dt-echelle__libelle {
		left: auto;
		right: 0;
		margin-left: 0;
	}
	.dt-score__domaines li {
		font-size: 14px;
	}
}