:root{--vgtenc:#11090c;--vgtoli:#885654;--vgtolifon:#5b3534;--vgtpap:#e4c7b0;--vgtsab:#f0bed0;--vgtlis:#ca94a8;--vgtfeu:#3a2a1f;--vgtcre:#fbd0ce;--vgtdis:#6b523e;--vgtcor:#291514;--vgtter:#79495a;--vgtbri:#4b2935}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--vgtpap);color:var(--vgtenc);font-family:'Work Sans',system-ui,sans-serif;font-size:16px;line-height:1.7}
h1,h2,h3{font-family:'Unna',Georgia,serif;font-weight:700}
img{max-width:100%;display:block}
a{color:var(--vgtolifon);text-decoration:none}
a:hover{text-decoration:underline}
.vgtcad{max-width:1040px;margin:0 auto;padding:0 20px}

/* ---------- accroche, en-tete comprise ---------- */
/* L'en-tête n'est pas un bandeau collant : elle fait partie de la bande sable. Une barre
   fixée en haut d'écran est la silhouette du moteur voisin, pas de celui-ci. */
.vgtacc{background:var(--vgtsab);border-bottom:2px solid var(--vgtlis);padding:22px 0 44px}
.vgtent{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:30px}
.vgtens{font-weight:700;font-size:1.2rem;letter-spacing:-.2px}
.vgtens a{color:var(--vgtenc)}
.vgtens a:hover{text-decoration:none;color:var(--vgtolifon)}
.vgtmen{min-width:0;font-size:.85rem}
.vgtmen a{color:var(--vgtfeu);margin-left:22px}
.vgtsur{font-size:.74rem;text-transform:uppercase;letter-spacing:1.6px;font-weight:600;color:var(--vgtdis);margin-bottom:12px}
.vgttit{font-size:clamp(1.7rem,3.5vw,2.45rem);line-height:1.16;max-width:27ch;margin-bottom:16px}
.vgttit em{font-style:italic;font-weight:400;color:var(--vgtolifon)}
.vgtint{color:var(--vgtfeu);max-width:43rem;margin-bottom:12px}
.vgtjal{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.vgtjal2{background:var(--vgtcre);border:1px solid var(--vgtlis);border-radius:14px;padding:5px 14px;font-size:.8rem;color:var(--vgtfeu)}
.vgtjal2 b{font-weight:600;color:var(--vgtenc)}

/* ---------- le fil de la selection ---------- */
.vgtfil{background:var(--vgtcre);border-left:3px solid var(--vgtoli);padding:18px 22px;margin-top:24px;max-width:46rem}
.vgtfiltit{font-size:.74rem;text-transform:uppercase;letter-spacing:1.4px;font-weight:600;color:var(--vgtdis);margin-bottom:6px}
.vgtfil p{color:var(--vgtcor);font-size:.95rem}

/* ---------- colonne de lecture ---------- */
.vgtcol{max-width:44rem;padding:40px 0 4px}
.vgtcol p{margin-bottom:1.2rem;color:var(--vgtcor)}
.vgtsec{font-size:1.4rem;margin:2.1rem 0 .6rem}
.vgtsou{font-size:1.08rem;margin:1.6rem 0 .4rem}
.vgtlis{list-style:none;margin:0 0 1.3rem}
.vgtlis li{position:relative;padding-left:20px;margin-bottom:6px;color:var(--vgtcor)}
.vgtlis li:before{content:"\2014";position:absolute;left:0;color:var(--vgtoli)}

/* ---------- entrees de la selection ---------- */
.vgtsom{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;margin:46px 0 22px}
.vgtsom h2{font-size:1.35rem}
.vgtdec{font-size:.83rem;color:var(--vgtdis)}
.vgtent2{display:flex;gap:26px;flex-wrap:wrap;padding:24px 0;border-top:1px solid var(--vgtlis)}
.vgtent2:last-of-type{border-bottom:1px solid var(--vgtlis)}
/* Gouttière : la méthode annoncée dans la marge, et le fil vertical qui relie les entrées
   entre elles. C'est le seul « rang » visible de la page, et il ne range rien. */
.vgtgou{flex:0 0 136px;position:relative;padding-left:16px}
.vgtgou:before{content:"";position:absolute;left:0;top:6px;bottom:-24px;width:1px;background:var(--vgtlis)}
.vgtgou:after{content:"";position:absolute;left:-3px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--vgtoli)}
.vgtmet{font-size:.78rem;text-transform:uppercase;letter-spacing:.9px;font-weight:600;color:var(--vgtdis);line-height:1.5}
.vgtcor{flex:1;min-width:260px}
.vgtnom{font-size:1.22rem;margin-bottom:5px}
.vgtnom a{color:var(--vgtenc)}
.vgtnom a:hover{color:var(--vgtolifon);text-decoration:none}
.vgtsit{font-size:.82rem;color:var(--vgtdis);margin-bottom:10px}
.vgtmot{font-size:.96rem;color:var(--vgtcor);margin-bottom:12px}
.vgtapp{list-style:none;font-size:.89rem;margin-bottom:10px}
.vgtapp li{padding:2px 0 2px 18px;position:relative;color:var(--vgtcor)}
.vgtapp li:before{content:"\203A";position:absolute;left:0;color:var(--vgtter);font-weight:700}
.vgtres{font-size:.86rem;color:var(--vgtbri);margin-bottom:14px}
.vgtlie{display:inline-block;background:var(--vgtoli);color:var(--vgtcre);font-weight:600;font-size:.88rem;padding:9px 20px;border-radius:4px;box-shadow:0 2px 0 var(--vgtolifon)}
.vgtlie:hover{background:var(--vgtolifon);color:var(--vgtcre);text-decoration:none;box-shadow:0 1px 0 var(--vgtolifon);transform:translateY(1px)}
.vgtsob{display:inline-block;border:1px solid var(--vgtlis);background:var(--vgtcre);color:var(--vgtfeu);font-size:.85rem;padding:8px 17px;border-radius:4px}
.vgtsob:hover{border-color:var(--vgtenc);color:var(--vgtenc);text-decoration:none}
/* Vignette à DROITE : c'est ce déplacement qui empêche de confondre cette page avec celle
   du moteur bâti sur la même maquette. */
.vgtvue{flex:0 0 212px;order:3}
.vgtvig{width:100%;height:auto;border:1px solid var(--vgtlis);border-radius:4px}
.vgtape{max-width:30rem;margin:28px 0 0}
.vgtvigvid{width:100%;aspect-ratio:16/10;border:1px dashed var(--vgtlis);border-radius:4px;background:var(--vgtsab);display:flex;align-items:center;justify-content:center;color:var(--vgtdis);font-size:1.4rem;font-weight:700}

/* ---------- le reste de la selection, sur une fiche ---------- */
.vgtaut{background:var(--vgtcre);border:1px solid var(--vgtlis);border-radius:5px;padding:20px 24px;margin:34px 0 0;max-width:44rem}
.vgtauttit{font-size:1.02rem;margin-bottom:12px}
.vgtaut2{padding:8px 0;border-top:1px dotted var(--vgtlis)}
.vgtaut2:first-of-type{border-top:0}
.vgtaut2 a{color:var(--vgtenc);font-weight:600;font-size:.96rem}
.vgtaut2 span{display:block;font-size:.8rem;color:var(--vgtdis)}

/* ---------- cloture et pied ---------- */
.vgtclo{background:var(--vgtenc);color:#d7a3a1;border-radius:5px;padding:30px 32px;margin:40px 0 0}
.vgtclo h2{color:var(--vgtcre);font-size:1.3rem;margin-bottom:12px}
.vgtclo p{margin-bottom:.9rem}
.vgtclo p:last-child{margin-bottom:0}
.vgtnot{font-size:.86rem;color:var(--vgtdis);border-top:1px solid var(--vgtlis);margin-top:30px;padding-top:16px;max-width:46rem}
.vgtsomlie{list-style:none;max-width:30rem;margin:30px 0}
.vgtsomlie li{padding:10px 0;border-bottom:1px solid var(--vgtlis)}
.vgtpie{background:var(--vgtenc);color:#a26d80;font-size:.85rem;padding:30px 0;margin-top:48px}
.vgtpielig{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.vgtpie a{color:#bd9e86}

@media(max-width:860px){
.vgtvue{order:2;flex:0 0 160px}
.vgtgou{flex:1 1 100%;padding-left:16px}
.vgtgou:before{bottom:auto;height:100%}
}
@media(max-width:620px){
/* Sans passage à la ligne, les libellés de navigation débordent du viewport et toute la
   page défile horizontalement : un élément flex ne se réduit pas sous son contenu. */
.vgtmen{flex:1 1 100%}
.vgtmen a{margin-left:0;margin-right:18px;display:inline-block}
.vgtvue{flex:1 1 100%}
}
/* Mesuré à 375 px : au-delà de deux lignes, un intitulé de section cesse de se lire d'un
   coup d'œil. C'est la taille qui cède, pas l'intitulé. */
@media(max-width:480px){
.vgttit{font-size:1.55rem}
.vgtsec{font-size:1.16rem;line-height:1.3}
.vgtsou{font-size:1.01rem}
.vgtsom h2{font-size:1.15rem}
.vgtclo{padding:22px 20px}
}