/* LES QUATRE DOCUMENTS */

.as_docs {
display:grid;
gap:14px;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr))
}

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

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

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

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

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

.as_docVoir:hover .as_docLoupe,
.as_docVoir:focus-visible .as_docLoupe { opacity:1 }

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

.as_docTexte b {
font-size:14.5px;
font-weight:700;
color:var(--v_texte);
line-height:1.35
}

.as_docPoids {
display:flex;
align-items:center;
gap:7px;
font-size:12px;
color:var(--v_texte2)
}

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

.as_docActions {
display:flex;
flex-wrap:wrap;
gap:14px;
margin:3px 0 0
}

.as_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
}

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

.as_lien i { font-size:11px }

/* LA SAISIE */

.as_saisie {
display:flex;
flex-direction:column;
gap:12px
}

.as_champ {
display:flex;
gap:10px
}

.as_champ input {
width:100%;
background:var(--v_encre);
border:1px solid var(--v_ligneChamp);
font-size:16px;
font-family:var(--v_texteff);
color:var(--v_texte);
line-height:1.5;
transition:border-color .3s var(--v_courbe);
flex:1 1 auto;
padding:12px 16px
}

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

.as_champ input:disabled { opacity:.5 }

.as_champ .demo_btn {
white-space:nowrap;
flex-shrink:0
}

.as_suggestions {
display:flex;
flex-wrap:wrap;
gap:8px
}

.as_suggestion {
display:inline-flex;
align-items:center;
gap:8px;
background:var(--v_fond2);
border:1px solid var(--v_ligne);
text-align:left;
font-size:13px;
font-weight:600;
font-family:var(--v_texteff);
color:var(--v_texte2);
cursor:pointer;
transition:border-color .2s var(--v_courbe),color .2s var(--v_courbe);
padding:7px 13px
}

.as_suggestion:hover {
border-color:var(--v_orange);
color:var(--v_texte)
}

.as_suggestion i {
font-size:10px;
color:var(--v_orange);
transform:rotate(90deg)
}

/* ETAT DE REPOS — deux colonnes : le recit a gauche, l'encart a droite.
   Ne pas elargir le texte au-dela de 72ch, on remplit la place, on ne l'etire pas. */

.as_module .demo_attente {
display:grid;
align-items:start;
gap:32px;
grid-template-columns:minmax(0,7fr) minmax(0,5fr)
}

.as_module .demo_attente[hidden] { display:none }

.as_attenteRecit > i {
display:grid;
place-items:center;
width:56px;
height:56px;
background:color-mix(in srgb,var(--v_orange) 14%,transparent);
font-size:22px;
color:var(--v_orange);
margin:0 0 18px
}

.as_attenteRecit h2 {
font-size:22px;
font-weight:750;
color:var(--v_texte);
margin:0 0 12px
}

.as_attenteCote {
background:var(--v_fond);
border:1px solid var(--v_ligne);
padding:20px 22px
}

.as_attenteCote h3 {
letter-spacing:.12em;
text-transform:uppercase;
font-size:12px;
font-weight:700;
color:var(--v_orange);
margin:0 0 16px
}

.as_attenteCote ul {
display:flex;
flex-direction:column;
gap:16px;
list-style:none;
margin:0;
padding:0
}

.as_attenteCote li {
display:grid;
gap:2px 12px;
grid-template-columns:auto 1fr
}

.as_attenteCote li i {
grid-row:1 / 3;
align-self:start;
width:30px;
height:30px;
background:color-mix(in srgb,var(--v_orange) 14%,transparent);
font-size:13px;
color:var(--v_orange);
line-height:30px;
text-align:center
}

.as_attenteCote li b {
font-size:14px;
font-weight:700;
font-family:var(--v_titre);
color:var(--v_texte)
}

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

/* LA REPONSE */

.as_reponse {
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:26px
}

.as_module .as_questionEcho {
display:flex;
align-items:flex-start;
gap:10px;
max-width:100%;
font-size:14px;
font-weight:600;
color:var(--v_texte2);
margin:0 0 14px
}

.as_questionEcho i {
font-size:12px;
color:var(--v_orange);
transform:rotate(90deg);
margin:5px 0 0
}

.as_module .as_reponseTexte {
max-width:70ch;
font-size:clamp(17px,1.9vw,21px);
font-family:var(--v_titre);
color:var(--v_texte);
line-height:1.5;
margin:0
}

.as_absent {
display:grid;
gap:2px 16px;
grid-template-columns:auto 1fr
}

.as_absent > i {
grid-row:1 / 3;
display:grid;
place-items:center;
align-self:start;
width:46px;
height:46px;
background:color-mix(in srgb,var(--v_orange) 14%,transparent);
font-size:19px;
color:var(--v_orange)
}

.as_absent b {
font-size:clamp(17px,1.9vw,21px);
font-weight:750;
font-family:var(--v_titre);
color:var(--v_texte)
}

.as_module .as_absent p {
max-width:64ch;
font-size:14.5px;
color:var(--v_texte2);
margin:4px 0 0
}

/* LES CITATIONS */

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

.as_citation {
background:var(--v_fond2);
border:1px solid var(--v_ligne);
border-left:3px solid var(--v_orange);
padding:16px 18px
}

.as_citationTete {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px 14px;
margin:0 0 12px
}

.as_citationDoc {
display:inline-flex;
align-items:center;
gap:8px;
font-size:13.5px;
font-weight:700;
color:var(--v_texte)
}

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

.as_citationPage {
background:color-mix(in srgb,var(--v_orange) 16%,transparent);
font-size:11.5px;
font-weight:700;
letter-spacing:.05em;
text-transform:uppercase;
color:var(--v_orange2);
padding:2px 9px
}

.as_citationActions {
display:flex;
gap:14px;
margin-left:auto
}

.as_module .as_passage {
max-width:100%;
background:var(--v_encre);
border:1px solid var(--v_ligne);
font-size:14px;
font-family:'DejaVu Serif',Georgia,serif;
color:color-mix(in srgb,var(--v_texte2) 80%,transparent);
line-height:1.9;
margin:0;
padding:14px 16px
}

.as_passage mark {
background:color-mix(in srgb,var(--v_orange) 26%,transparent);
box-decoration-break:clone;
-webkit-box-decoration-break:clone;
color:var(--v_texte);
padding:2px 4px
}

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

/* NOTICE DE BAS DE MODULE — deux colonnes plutot qu'une demi-page vide, jamais trois */

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

.as_module .as_noticeGrille p { max-width:66ch }

/* LISEUSE — lecture des documents page par page sans quitter la demonstration */

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

.as_liseuse[hidden] { display:none }

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

/* La boite borne sa hauteur et c'est la zone des pages qui defile. min-height:0 est
   indispensable : sans lui un enfant flex refuse de retrecir et deborde par le bas. */

.as_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)
}

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

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

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

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

.as_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
}

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

.as_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
}

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

@media (max-width:1100px) {
	.as_docs { grid-template-columns:repeat(2,minmax(0,1fr)) }
}

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

	.as_noticeGrille { grid-template-columns:minmax(0,1fr) }
}

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

	.as_champ { flex-direction:column }

	.as_champ .demo_btn { width:100% }

	.as_citationActions {
	width:100%;
	margin-left:0
	}

	.as_reponse { padding:20px 18px }

	.as_liseuse { padding:0 }

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

	.as_liseuseTete h2 { flex-basis:100% }

	.as_liseusePages { padding:12px }
}

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

	.as_docVoir:hover { transform:none }
}