/* Le rouge du socle pose sur sa propre pastille tombe a 4,05:1 — sous le seuil pour du
   texte de badge en 10,5 px. On l'eclaircit de 20 % vers le blanc : 4,90:1 sur la carte,
   5,56:1 sur l'encre, et il reste lu comme rouge. */

.st_module { --v_rougeLisible:color-mix(in srgb,var(--v_erreur) 80%,#f4f1ec) }

/* SAISIE DE L'ADRESSE */

/* Le champ et le bouton occupent la premiere ligne, la ligne d'aide passe dessous sur toute
   la largeur. Tant qu'elle etait dans la colonne du champ, align-items:end calait le bouton
   sur le bas du bloc entier — donc sous l'input, decale d'une ligne de texte. */

.st_saisie {
display:grid;
align-items:end;
gap:10px 16px;
grid-template-columns:minmax(0,1fr) auto;
background:var(--v_encre);
border:1px solid var(--v_ligne);
border-left:3px solid var(--v_orange);
padding:22px 24px
}

.st_champ {
grid-row:1;
grid-column:1;
display:flex;
flex-direction:column;
gap:8px;
min-width:0
}

.st_champ label {
font-size:14px;
font-weight:600;
color:var(--v_texte2)
}

.st_champInt {
position:relative;
display:flex;
align-items:center;
width:100%
}

.st_champInt i {
position:absolute;
font-size:15px;
color:var(--v_texte2);
left:16px;
pointer-events:none
}

.st_champInt input {
width:100%;
background:var(--v_fond);
border:1px solid var(--v_ligneChamp);
font-size:18px;
font-family:var(--v_texteff);
color:var(--v_texte);
line-height:1.5;
transition:border-color .3s var(--v_courbe);
padding:14px 16px 14px 44px
}

.st_champInt input::placeholder { color:color-mix(in srgb,var(--v_texte2) 62%,transparent) }

.st_champInt input:focus {
outline:none;
border-color:var(--v_orange)
}

.st_champInt input[disabled] {
opacity:.5;
cursor:not-allowed
}

.st_module .st_champAide {
grid-row:2;
grid-column:1 / -1;
font-size:12.5px;
color:var(--v_texte2);
margin:0
}

.st_bouton {
grid-row:1;
grid-column:2;
align-self:end;
white-space:nowrap;
padding:15px 26px
}

.st_barre { justify-content:space-between }

.st_lien {
display:inline-flex;
align-items:center;
gap:8px;
background:none;
border:0;
text-decoration:underline;
text-underline-offset:3px;
font-size:13px;
font-weight:600;
font-family:var(--v_texteff);
color:var(--v_orange2);
cursor:pointer;
margin:0;
padding:0
}

.st_lien:hover { color:var(--v_texte) }

.st_lien i { font-size:11px }

/* ECRAN DE REPOS
   ----------------------------------------------------------------------------------------------
   demo.css bride les paragraphes de module a 72ch, ce qui est la bonne longueur de ligne. Dans
   un cadre de 1330 px, cela laissait la moitie droite vide : ecran de repos en une seule colonne.
   On ne touche pas a la limite — on occupe la place avec ce que le visiteur a besoin de savoir
   avant de cliquer. */

.st_attente {
display:grid;
align-content:start;
gap:0 40px;
grid-template-columns:minmax(0,1fr) minmax(0,360px)
}

.st_attente > i {
grid-row:1;
grid-column:1
}

.st_attenteTexte {
grid-row:2;
grid-column:1;
min-width:0
}

.st_attenteQuoi {
grid-row:1 / span 2;
grid-column:2;
align-self:start;
min-width:0;
background:var(--v_fond);
border:1px solid var(--v_ligne);
border-top:3px solid var(--v_orange);
padding:20px 22px
}

.st_attenteQuoi h3 {
display:flex;
align-items:center;
gap:10px;
letter-spacing:.06em;
text-transform:uppercase;
font-size:12px;
font-weight:700;
color:var(--v_texte);
margin:0 0 16px
}

.st_attenteQuoi h3 i {
font-size:12px;
color:var(--v_orange)
}

.st_attenteQuoi ul {
display:flex;
flex-direction:column;
gap:1px;
background:var(--v_ligne);
border:1px solid var(--v_ligne);
list-style:none;
margin:0;
padding:0
}

.st_attenteQuoi li {
display:grid;
align-items:baseline;
gap:2px 12px;
grid-template-columns:minmax(0,1fr) auto;
background:var(--v_encre);
padding:10px 14px
}

.st_attenteQuoi li[data-fort="oui"] { background:color-mix(in srgb,var(--v_orange) 9%,var(--v_encre)) }

.st_attenteQuoi b {
font-size:13.5px;
font-weight:700;
color:var(--v_texte)
}

.st_attenteQuoi span {
grid-column:1;
font-size:12px;
color:var(--v_texte2)
}

.st_attenteQuoi em {
grid-row:1 / span 2;
align-self:center;
font-style:normal;
font-variant-numeric:tabular-nums;
font-size:15px;
font-weight:750;
font-family:var(--v_titre);
color:var(--v_orange)
}

.st_attenteQuoi li[data-fort="oui"] em { color:var(--v_orange2) }

.st_module .st_attenteQuoi p {
max-width:none;
font-size:12.5px;
color:var(--v_texte2);
line-height:1.6;
margin:14px 0 0
}

.st_module .st_attente .demo_attenteFictif {
grid-row:3;
grid-column:1 / -1
}

/* NOTICE DE BAS DE MODULE — meme raison : deux colonnes plutot qu'une demi-page vide. */

.st_noticeGrille {
display:grid;
gap:0 48px;
grid-template-columns:repeat(2,minmax(0,1fr))
}

.st_module .st_noticeGrille p { max-width:66ch }

/* LA NOTE */

.st_note {
display:grid;
align-items:center;
gap:28px;
grid-template-columns:auto minmax(0,1fr);
background:var(--v_encre);
border:1px solid var(--v_ligne);
padding:30px
}

.st_noteChiffre {
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:150px;
height:150px;
background:conic-gradient(var(--teinte,var(--v_orange)) calc(var(--part,0) * 1%),color-mix(in srgb,#f4f1ec 9%,transparent) 0);
border-radius:50%;
flex-shrink:0
}

.st_noteChiffre::before {
position:absolute;
width:122px;
height:122px;
content:"";
background:var(--v_encre);
border-radius:50%
}

.st_noteVal {
position:relative;
font-variant-numeric:tabular-nums;
font-size:46px;
font-weight:750;
font-family:var(--v_titre);
color:var(--teinte,var(--v_orange));
line-height:1
}

.st_noteSur {
position:relative;
letter-spacing:.1em;
text-transform:uppercase;
font-size:11px;
font-weight:700;
color:var(--v_texte2);
margin:4px 0 0
}

.st_noteTexte {
display:flex;
flex-direction:column;
gap:8px;
min-width:0
}

.st_module .st_noteQui {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:14px;
color:var(--v_texte2);
margin:0
}

.st_noteQui i { color:var(--v_orange) }

.st_noteQui b {
font-size:16px;
font-weight:700;
color:var(--v_texte)
}

.st_noteQui span {
background:color-mix(in srgb,var(--v_vert) 16%,transparent);
font-size:11.5px;
font-weight:700;
color:var(--v_vert);
padding:2px 8px
}

.st_noteQui span[data-sur="non"] {
background:color-mix(in srgb,var(--v_erreur) 16%,transparent);
color:var(--v_rougeLisible)
}

.st_module .st_noteMention {
letter-spacing:-.01em;
font-size:26px;
font-weight:750;
font-family:var(--v_titre);
color:var(--v_texte);
line-height:1.15;
margin:0
}

.st_module .st_noteVerdict {
max-width:70ch;
font-size:15px;
color:var(--v_texte2);
line-height:1.65;
margin:4px 0 0
}

.st_familles {
display:grid;
gap:1px;
grid-column:1 / -1;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
background:var(--v_ligne);
border:1px solid var(--v_ligne);
margin:6px 0 0
}

.st_famille {
display:flex;
flex-direction:column;
gap:8px;
background:var(--v_fond);
padding:16px 18px
}

.st_familleTete {
display:flex;
align-items:baseline;
justify-content:space-between;
gap:10px
}

.st_familleTete b {
font-size:13px;
font-weight:700;
color:var(--v_texte)
}

.st_familleTete span {
font-variant-numeric:tabular-nums;
font-size:15px;
font-weight:750;
font-family:var(--v_titre);
color:var(--teinte,var(--v_orange))
}

.st_familleJauge {
position:relative;
overflow:hidden;
width:100%;
height:4px;
background:color-mix(in srgb,#f4f1ec 9%,transparent)
}

.st_familleJauge i {
position:absolute;
display:block;
width:var(--part,0%);
height:100%;
background:var(--teinte,var(--v_orange));
top:0;
left:0;
transition:width 1s var(--v_courbe)
}

/* LES CONTROLES */

.st_controles {
display:flex;
flex-direction:column;
gap:1px;
background:var(--v_ligne);
border:1px solid var(--v_ligne);
list-style:none;
margin:0;
padding:0
}

.st_controle {
display:grid;
gap:4px 16px;
grid-template-columns:auto minmax(0,1fr);
background:var(--v_fond);
padding:16px 20px
}

.st_controlePuce {
grid-row:1 / 3;
align-self:start;
display:grid;
place-items:center;
width:32px;
height:32px;
font-size:14px;
margin:2px 0 0
}

.st_controle[data-statut="ok"] .st_controlePuce {
background:color-mix(in srgb,var(--v_vert) 15%,transparent);
color:var(--v_vert)
}

.st_controle[data-statut="faible"] .st_controlePuce {
background:color-mix(in srgb,var(--v_orange) 15%,transparent);
color:var(--v_orange)
}

.st_controle[data-statut="absent"] .st_controlePuce {
background:color-mix(in srgb,var(--v_erreur) 15%,transparent);
color:var(--v_rougeLisible)
}

.st_controleTete {
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:10px
}

.st_controleTete h3 {
font-size:15.5px;
font-weight:700;
color:var(--v_texte);
margin:0
}

.st_badge {
letter-spacing:.05em;
text-transform:uppercase;
font-size:10.5px;
font-weight:700;
padding:2px 8px
}

.st_badge[data-statut="ok"] {
background:color-mix(in srgb,var(--v_vert) 15%,transparent);
color:var(--v_vert)
}

.st_badge[data-statut="faible"] {
background:color-mix(in srgb,var(--v_orange) 15%,transparent);
color:var(--v_orange)
}

.st_badge[data-statut="absent"] {
background:color-mix(in srgb,var(--v_erreur) 15%,transparent);
color:var(--v_rougeLisible)
}

.st_controleCorps { min-width:0 }

.st_module .st_controleTrouve {
overflow-wrap:anywhere;
font-size:13.5px;
color:var(--v_texte);
line-height:1.55;
margin:0
}

.st_module .st_controleEffet {
max-width:80ch;
font-size:13.5px;
color:var(--v_texte2);
line-height:1.6;
margin:6px 0 0
}

.st_module .st_controleAttendu {
display:flex;
align-items:center;
gap:8px;
font-size:12px;
color:color-mix(in srgb,var(--v_texte2) 78%,transparent);
margin:6px 0 0
}

.st_controleAttendu i { font-size:10px }

.st_vide {
background:var(--v_fond);
font-size:14px;
color:var(--v_texte2);
padding:18px 20px
}

/* PRIORITES */

.st_priorites {
display:flex;
flex-direction:column;
gap:1px;
background:var(--v_ligne);
border:1px solid var(--v_ligne);
counter-reset:st_prio;
list-style:none;
margin:0;
padding:0
}

.st_priorite {
display:grid;
gap:3px 16px;
grid-template-columns:auto minmax(0,1fr);
background:var(--v_fond);
counter-increment:st_prio;
padding:16px 20px
}

.st_priorite::before {
grid-row:1 / 3;
align-self:start;
display:grid;
place-items:center;
width:30px;
height:30px;
content:counter(st_prio);
background:color-mix(in srgb,var(--v_orange) 16%,transparent);
font-size:14px;
font-weight:750;
font-family:var(--v_titre);
color:var(--v_orange);
margin:2px 0 0
}

.st_priorite b {
font-size:15px;
font-weight:700;
color:var(--v_texte)
}

.st_module .st_prioriteTexte {
max-width:78ch;
font-size:13.5px;
color:var(--v_texte2);
line-height:1.6;
margin:0
}

/* LA LISTE DES CORRECTIONS */

.st_corrections {
display:grid;
gap:1px;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
background:var(--v_ligne);
border:1px solid var(--v_ligne);
list-style:none;
margin:0;
padding:0
}

.st_correction {
display:grid;
align-items:center;
gap:12px;
grid-template-columns:auto minmax(0,1fr) auto;
background:var(--v_fond);
padding:11px 16px
}

.st_correctionPuce {
display:grid;
place-items:center;
width:22px;
height:22px;
font-size:9px
}

.st_correction[data-poids="lourd"] .st_correctionPuce {
background:color-mix(in srgb,var(--v_erreur) 15%,transparent);
color:var(--v_rougeLisible)
}

.st_correction[data-poids="moyen"] .st_correctionPuce {
background:color-mix(in srgb,var(--v_orange) 15%,transparent);
color:var(--v_orange)
}

.st_correction[data-poids="leger"] .st_correctionPuce {
background:color-mix(in srgb,#f4f1ec 9%,transparent);
color:var(--v_texte2)
}

.st_correctionNom {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:13.5px;
color:var(--v_texte)
}

.st_correctionCle {
letter-spacing:.05em;
text-transform:uppercase;
white-space:nowrap;
font-size:10px;
font-weight:700;
color:var(--v_texte2);
flex-shrink:0
}

.st_correction[data-poids="lourd"] .st_correctionCle { color:var(--v_rougeLisible) }

.st_correction[data-poids="moyen"] .st_correctionCle { color:var(--v_orange) }

/* LES BLOCS FLOUTES */

.st_flou { border-color:color-mix(in srgb,var(--v_orange) 26%,transparent) }

.st_caches {
display:grid;
gap:1px;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
background:var(--v_ligne);
border:1px solid var(--v_ligne);
list-style:none;
margin:0;
padding:0
}

.st_cache {
display:flex;
align-items:center;
gap:12px;
background:var(--v_fond);
font-size:13.5px;
color:var(--v_texte);
filter:blur(4px);
user-select:none;
pointer-events:none;
padding:11px 16px
}

.st_cache i {
font-size:11px;
color:var(--v_orange);
flex-shrink:0
}

.st_module .st_flouPied {
display:flex;
align-items:flex-start;
gap:10px;
border-top:1px solid var(--v_ligne);
font-size:12.5px;
color:var(--v_texte2);
line-height:1.55;
margin:18px 0 0;
padding:14px 0 0
}

.st_flouPied i { color:var(--v_orange) }

.st_perimetreListe {
display:grid;
gap:1px;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
background:var(--v_ligne);
border:1px solid var(--v_ligne);
list-style:none;
margin:0;
padding:0
}

.st_perimetreItem {
position:relative;
display:flex;
flex-direction:column;
gap:6px;
overflow:hidden;
background:var(--v_fond);
padding:20px
}

.st_perimetreItem b {
display:flex;
align-items:center;
gap:10px;
padding:0 32px 0 0;
font-size:14px;
font-weight:700;
color:var(--v_texte)
}

.st_perimetreItem b i { color:var(--v_orange) }

.st_perimetreItem span {
font-size:13px;
color:var(--v_texte2);
line-height:1.55
}

/* Seule la description est masquee. L'intitule reste lisible : un bloc qui cache aussi ce
   qu'il n'a pas analyse ne dit plus rien. */

.st_perimetreFlou {
filter:blur(4.5px);
user-select:none;
pointer-events:none
}

.st_perimetreItem em {
font-style:normal;
font-variant-numeric:tabular-nums;
font-size:12px;
font-weight:700;
color:var(--v_orange)
}

/* Le cadenas etait pose en content avec le nom de la famille FontAwesome ecrit en dur.
   Ce nom change d'une version majeure a l'autre : quand il ne correspond pas, le navigateur
   affiche le carre du glyphe manquant. C'est maintenant un vrai element, pose par le JS. */

.st_perimetreCadenas {
position:absolute;
display:grid;
place-items:center;
width:26px;
height:26px;
background:color-mix(in srgb,var(--v_orange) 16%,transparent);
font-size:11px;
color:var(--v_orange);
top:14px;
right:14px
}

.st_perimetreCadenas i { font-size:11px }

/* RESPONSIVE */

@media (max-width:820px) {
	.st_noticeGrille { grid-template-columns:minmax(0,1fr) }
}

@media (max-width:1100px) {
	.st_attente {
	gap:22px;
	grid-template-columns:minmax(0,1fr)
	}

	.st_attente > i, .st_attenteTexte, .st_attenteQuoi, .st_module .st_attente .demo_attenteFictif {
	grid-row:auto;
	grid-column:1
	}
}

@media (max-width:860px) {
	.st_saisie { grid-template-columns:minmax(0,1fr) }

	.st_bouton { width:100% }

	.st_note {
	justify-items:start;
	gap:20px;
	grid-template-columns:minmax(0,1fr);
	padding:24px 20px
	}

	.st_module .st_noteMention { font-size:22px }
}

@media (max-width:560px) {
	.st_correction {
	gap:10px;
	grid-template-columns:auto minmax(0,1fr);
	padding:10px 14px
	}

	.st_correctionCle { display:none }

	.st_barre {
	flex-direction:column;
	align-items:flex-start
	}

	.st_saisie { padding:18px }

	.st_controle, .st_priorite { padding:14px 16px }

	.st_noteChiffre {
	width:120px;
	height:120px
	}

	.st_noteChiffre::before {
	width:96px;
	height:96px
	}

	.st_noteVal { font-size:36px }
}

@media (prefers-reduced-motion:reduce) {
	.st_familleJauge i { transition:none }
}