/* LES DEUX VERSIONS */

.ct_versions {
display:grid;
align-items:stretch;
gap:16px;
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)
}

.ct_version {
display:flex;
align-items:flex-start;
gap:16px;
background:var(--v_encre);
border:1px solid var(--v_ligne);
padding:16px
}

.ct_version[data-vue="v2"] { border-color:color-mix(in srgb,var(--v_orange) 34%,transparent) }

.ct_versionVoir {
position:relative;
flex-shrink:0;
display:block;
overflow:hidden;
width:88px;
background:none;
border:0;
cursor:pointer;
transition:transform .25s var(--v_courbe);
margin:0;
padding:0
}

.ct_versionVoir img {
display:block;
width:100%;
height:auto;
background:#fff;
border:1px solid var(--v_ligne)
}

.ct_versionVoir:hover { transform:translateY(-2px) }

.ct_versionLoupe {
position:absolute;
display:grid;
place-items:center;
width:100%;
height:100%;
background:color-mix(in srgb,#1c1b1a 62%,transparent);
font-size:17px;
color:var(--v_texte);
opacity:0;
top:0;
left:0;
transition:opacity .25s var(--v_courbe)
}

.ct_versionVoir:hover .ct_versionLoupe,
.ct_versionVoir:focus-visible .ct_versionLoupe { opacity:1 }

.ct_versionActions {
display:flex;
flex-wrap:wrap;
gap:14px;
margin:6px 0 0
}

.ct_lien {
display:inline-flex;
align-items:center;
gap:7px;
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
}

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

.ct_lien i { font-size:11px }

.ct_versionTexte {
display:flex;
flex-direction:column;
gap:5px;
min-width:0
}

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

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

.ct_versionPoids {
display:flex;
align-items:center;
gap:7px;
overflow:hidden;
font-size:12px;
text-overflow:ellipsis;
white-space:nowrap;
margin:3px 0 0
}

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

.ct_fleche {
display:grid;
place-items:center;
font-size:20px;
color:color-mix(in srgb,var(--v_orange) 70%,transparent)
}
/* BARRE D'ACTION */

.ct_bouton { flex-shrink:0 }
/* ETAT DE REPOS */

/* TRAVAIL EN COURS */

/* BLOCS DE SORTIE */

/* VERDICT */

.ct_verdict {
background:linear-gradient(135deg,color-mix(in srgb,var(--v_orange) 13%,var(--v_encre)),var(--v_encre) 62%);
border:1px solid color-mix(in srgb,var(--v_orange) 32%,transparent);
padding:28px 26px
}

.ct_module .ct_verdictLigne {
max-width:100%;
font-size:clamp(19px,2.2vw,26px);
font-weight:400;
font-family:var(--v_titre);
color:var(--v_texte2);
line-height:1.4;
margin:0 0 20px
}

.ct_verdictLigne b {
font-weight:750;
color:var(--v_texte)
}

.ct_verdictLigne[data-alerte="oui"] .ct_verdictDur { color:var(--v_orange2) }

.ct_verdictSup {
display:block;
font-size:14px;
font-family:var(--v_texteff);
color:var(--v_texte2);
margin:8px 0 0
}

.ct_jauges {
display:grid;
gap:1px;
grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
background:var(--v_ligne);
border:1px solid var(--v_ligne)
}

.ct_jaugeItem {
position:relative;
display:flex;
align-items:center;
gap:11px;
overflow:hidden;
background:var(--v_encre);
font-size:13.5px;
color:var(--v_texte2);
padding:15px 16px
}

.ct_jaugeItem::after {
position:absolute;
content:'';
width:var(--part,0%);
height:3px;
background:var(--v_texte2);
bottom:0;
left:0
}

.ct_jaugeItem b {
font-size:22px;
font-weight:750;
font-family:var(--v_titre);
color:var(--v_texte)
}

.ct_jaugeItem i { font-size:15px }

.ct_jaugeItem[data-gravite="grave"] { color:var(--v_texte) }

.ct_jaugeItem[data-gravite="grave"] i { color:var(--v_erreur) }

.ct_jaugeItem[data-gravite="grave"]::after { background:var(--v_erreur) }

.ct_jaugeItem[data-gravite="moyen"] i { color:var(--v_orange) }

.ct_jaugeItem[data-gravite="moyen"]::after { background:var(--v_orange) }

.ct_jaugeItem[data-gravite="cosmetique"] i { color:var(--v_texte2) }
/* FILTRES */

/* LISTE DES ECARTS */

.ct_ecarts {
display:flex;
flex-direction:column;
gap:14px;
list-style:none;
margin:0;
padding:0
}

.ct_ecart {
background:var(--v_fond2);
border:1px solid var(--v_ligne);
border-left:3px solid var(--v_texte2);
transition:border-color .3s var(--v_courbe);
padding:18px 20px
}

.ct_ecart[data-gravite="grave"] { border-left-color:var(--v_erreur) }

.ct_ecart[data-gravite="moyen"] { border-left-color:var(--v_orange) }

.ct_ecart[data-gravite="cosmetique"] { border-left-color:color-mix(in srgb,#f4f1ec 22%,transparent) }

.ct_ecart[data-vise="oui"] {
border-color:var(--v_orange);
box-shadow:0 0 0 3px color-mix(in srgb,var(--v_orange) 20%,transparent)
}

.ct_ecartTete {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:11px;
margin:0 0 8px
}

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

.ct_badge {
display:inline-flex;
align-items:center;
gap:6px;
background:color-mix(in srgb,#f4f1ec 10%,transparent);
font-size:11px;
font-weight:700;
letter-spacing:.05em;
text-transform:uppercase;
color:var(--v_texte2);
padding:3px 9px
}

.ct_badge[data-gravite="grave"] {
background:color-mix(in srgb,var(--v_erreur) 20%,transparent);
color:#ffb9bb
}

.ct_badge[data-gravite="moyen"] {
background:color-mix(in srgb,var(--v_orange) 20%,transparent);
color:var(--v_orange2)
}

.ct_module .ct_ecartOu {
display:flex;
align-items:center;
gap:8px;
font-size:12.5px;
color:var(--v_texte2);
margin:0 0 10px
}

.ct_ecartOu i { font-size:11px;color:var(--v_texte2) }

.ct_module .ct_effet {
max-width:76ch;
font-size:14.5px;
color:var(--v_texte);
line-height:1.65;
margin:0 0 14px
}

/* LE DIFF */

/* demo.css impose max-width:74ch a tout <p> dans .demo_cadre : le diff doit prendre
   toute la largeur du bloc, sinon les longues clauses se lisent sur une colonne. */

.ct_module .ct_diff {
overflow-y:auto;
max-width:100%;
max-height:200px;
background:var(--v_encre);
border:1px solid var(--v_ligne);
font-size:13.5px;
font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
color:var(--v_texte2);
line-height:1.9;
margin:0;
padding:14px 16px
}

.ct_module .ct_diffLong { max-height:260px }

.ct_ctx { color:var(--v_texte2) }

.ct_coupe { color:color-mix(in srgb,#f4f1ec 52%,transparent) }

.ct_diff del {
background:color-mix(in srgb,var(--v_erreur) 22%,transparent);
text-decoration:line-through;
text-decoration-thickness:1px;
color:#ffc6c8;
padding:1px 4px
}

.ct_diff ins {
background:color-mix(in srgb,var(--v_vert) 20%,transparent);
text-decoration:none;
color:#a8ecb3;
padding:1px 4px
}

.ct_bascule::before {
content:'\2192';
color:var(--v_texte2);
padding:0 6px
}

.ct_vide {
font-size:14px;
color:var(--v_texte2);
padding:8px 0
}
/* TABLEAU ARTICLE PAR ARTICLE */

.ct_tableau tbody tr[data-statut="identique"] { cursor:default }

.ct_tableau tbody tr[data-statut="identique"] td { color:var(--v_texte2) }

.ct_tableau .ct_colN {
width:82px;
white-space:nowrap;
font-variant-numeric:tabular-nums
}

.ct_tableau td.ct_colN[data-decale="oui"] {
font-weight:700;
color:var(--v_orange)
}

.ct_tableau .ct_colTitre {
max-width:340px;
font-weight:600
}

.ct_colAvant {
display:block;
font-size:11.5px;
font-weight:400;
color:var(--v_texte2);
margin:2px 0 0
}

.ct_tableau .ct_colEcarts {
width:70px;
text-align:right;
font-variant-numeric:tabular-nums;
color:var(--v_texte2)
}

.ct_etatPuce {
display:inline-flex;
align-items:center;
gap:7px;
white-space:nowrap;
font-size:12px;
font-weight:600;
color:var(--v_texte2)
}

.ct_etatPuce i { font-size:10px }

.ct_etatPuce[data-statut="modifie"] { color:var(--v_orange) }

.ct_etatPuce[data-statut="supprime"] { color:var(--v_erreur) }

.ct_etatPuce[data-statut="ajoute"] { color:var(--v_vert) }

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

	.ct_fleche { transform:rotate(90deg) }

	.ct_version img { width:60px }
}

@media (max-width:760px) {

	.ct_tableau .ct_colTitre { max-width:200px }

	.ct_verdict { padding:22px 18px }

	.ct_module .ct_diff { font-size:12.5px }
}

@media (prefers-reduced-motion:reduce) {

	.ct_ecart,
	.ct_tableau tbody tr { transition:none }
}

/* LISEUSE — lecture des deux versions sans quitter la page */

.ct_liseuse {
position:fixed;
display:grid;
place-items:center;
z-index:60;
top:0;
right:0;
bottom:0;
left:0;
padding:24px
}

.ct_liseuse[hidden] { display:none }

.ct_liseuseFond {
position:absolute;
width:100%;
height:100%;
background:color-mix(in srgb,#141312 88%,transparent);
top:0;
left:0
}

/* La boite ne depasse jamais l'ecran : elle borne sa hauteur, et c'est la zone des pages
   qui absorbe le reste et defile. min-height:0 est indispensable — sans lui un enfant flex
   refuse de retrecir sous sa hauteur de contenu et deborde par le bas, hors de portee. */

.ct_liseuseBoite {
position:relative;
display:flex;
flex-direction:column;
width:min(980px,100%);
max-height:100%;
overflow:hidden;
background:var(--v_encre);
border:1px solid var(--v_ligne)
}

.ct_liseuseTete {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:14px;
border-bottom:1px solid var(--v_ligne);
flex-shrink:0;
padding:16px 18px
}

.ct_liseuseTete h2 {
flex:1 1 auto;
min-width:0;
font-size:17px;
font-weight:700;
color:var(--v_texte);
margin:0
}

.ct_liseusePage {
white-space:nowrap;
font-size:12.5px;
font-weight:600;
color:var(--v_texte2)
}

.ct_liseuseTete .ct_liseusePdf {
white-space:nowrap;
font-size:13px;
padding:9px 14px
}

.ct_liseuseCroix {
display:grid;
place-items:center;
width:36px;
height:36px;
background:none;
border:1px solid var(--v_ligne);
font-size:15px;
color:var(--v_texte2);
cursor:pointer;
transition:border-color .2s var(--v_courbe),color .2s var(--v_courbe);
margin:0;
padding:0
}

.ct_liseuseCroix:hover { border-color:var(--v_ligneChamp);color:var(--v_texte) }

.ct_liseusePages {
display:flex;
flex-direction:column;
gap:14px;
min-height:0;
overflow-x:hidden;
overflow-y:auto;
overscroll-behavior:contain;
background:var(--v_fond);
flex:1 1 auto;
padding:18px
}

.ct_liseusePages img {
flex-shrink:0;
width:100%;
height:auto;
background:#fff;
border:1px solid var(--v_ligne)
}

@media (max-width:760px) {
	.ct_liseuse { padding:0 }

	.ct_liseuseBoite {
	width:100%;
	height:100%;
	max-height:100%;
	border:0
	}

	.ct_liseuseTete h2 { flex-basis:100% }

	.ct_liseusePages { padding:12px }
}

@media (prefers-reduced-motion:reduce) {
	.ct_versionVoir,
	.ct_versionLoupe { transition:none }

	.ct_versionVoir:hover { transform:none }
}