:root{--sapin:#0f2e25;--sapin_vif:#194544;--sapin_clair:#306e5d;--jade:#89dac4;--brume:#9bebea;--menthe:#aefcd2;--filet:#78c99d;--gris_vert:#245a3d;--blanc_casse:#f2fff7}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Mulish',system-ui,sans-serif;color:var(--sapin);background:var(--menthe);font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Marcellus',Georgia,serif;font-weight:400;letter-spacing:-.01em}
img{display:block;max-width:100%;height:auto}
a{color:var(--sapin_vif);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.qv-cadre{max-width:1120px;margin:0 auto;padding:0 18px}

/* ---- entête : volontairement NON collante, contrairement à la maquette ---- */
.qv-entete{border-bottom:3px double var(--filet);background:var(--menthe)}
.qv-entete-ligne{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:17px 0;gap:14px}
.qv-marque{font-family:'Marcellus',serif;font-size:1.3rem;color:var(--sapin);letter-spacing:.01em}
.qv-marque:hover{text-decoration:none;color:var(--sapin_clair)}
.qv-nav a{color:var(--gris_vert);font-weight:600;font-size:.89rem;margin-left:24px}
.qv-nav a:hover{color:var(--sapin_vif);text-decoration:none}

/* ---- bandeau d'ouverture ---- */
.qv-bandeau{background:var(--brume);border-bottom:1px solid var(--filet);padding:50px 0 54px}
.qv-bandeau-grille{display:grid;grid-template-columns:7fr 5fr;gap:44px;align-items:center}
.qv-bandeau-volet{min-width:0}
.qv-rubrique{display:inline-block;border:1px solid var(--sapin_vif);color:var(--sapin_vif);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:4px 11px;margin-bottom:18px}
.qv-titre{font-size:clamp(1.95rem,4vw,2.9rem);line-height:1.12;margin-bottom:18px}
.qv-titre em{font-style:italic;color:var(--sapin_clair)}
.qv-chapeau{font-size:1.12rem;color:var(--gris_vert);max-width:35rem}
.qv-compteurs{display:flex;gap:30px;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1px solid var(--filet)}
.qv-compteur strong{display:block;font-family:'Marcellus',serif;font-size:1.45rem;color:var(--sapin);line-height:1.2}
.qv-compteur span{font-size:.81rem;color:#2f6b4e}
.qv-visuel img{width:100%;border:1px solid var(--filet)}
.qv-ersatz{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--jade);border:1px solid var(--filet)}
.qv-ersatz span{font-family:'Marcellus',serif;font-size:4rem;color:var(--sapin_vif)}

/* ---- colonne de lecture ---- */
.qv-lecture{padding:54px 0 6px}
.qv-colonne{max-width:43rem;margin:0 auto}
.qv-colonne p{margin-bottom:1.3rem;color:var(--gris_vert)}
.qv-titre-partie{font-size:1.5rem;line-height:1.26;margin:2.3rem 0 .7rem;color:var(--sapin)}
.qv-titre-partie:before{content:"\00B7 ";color:var(--sapin_clair)}
.qv-titre-sous-partie{font-size:1.12rem;margin:1.7rem 0 .5rem}

/* ---- progression : ce que la page traite, dans l'ordre ---- */
.qv-progression{background:var(--blanc_casse);border:1px solid var(--filet);padding:20px 24px;margin:0 0 32px}
.qv-progression-titre{font-family:'Marcellus',serif;font-size:1.02rem;color:var(--sapin);margin-bottom:12px}
.qv-progression-liste{list-style:none;margin:0;counter-reset:qv}
.qv-progression-liste li{counter-increment:qv;position:relative;padding-left:34px;margin-bottom:9px;font-size:.96rem;color:var(--gris_vert)}
.qv-progression-liste li:last-child{margin-bottom:0}
.qv-progression-liste li:before{content:counter(qv);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--jade);color:var(--sapin);font-size:.76rem;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:'Mulish',sans-serif}

/* ---- relevé de l'exemple ---- */
.qv-exemple{border-left:4px solid var(--jade);padding:4px 0 4px 22px;margin:0 0 30px}
.qv-exemple-titre{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--sapin_clair);margin-bottom:10px}
.qv-exemple-ligne{display:flex;flex-wrap:wrap;gap:10px;font-size:.95rem;padding:5px 0;border-bottom:1px dotted var(--filet)}
.qv-exemple-ligne:last-child{border-bottom:0}
.qv-exemple-cle{flex:0 0 11rem;color:var(--sapin_clair);font-weight:600}
.qv-exemple-valeur{flex:1;min-width:12rem;color:var(--gris_vert)}
.qv-points{list-style:none;margin:0 0 1.3rem}
.qv-points li{position:relative;padding-left:26px;margin-bottom:8px;color:var(--gris_vert)}
.qv-points li:before{content:"\2713";position:absolute;left:0;color:var(--sapin_clair);font-weight:700}
.qv-manques{list-style:none;margin:0 0 1.3rem}
.qv-manques li{position:relative;padding-left:26px;margin-bottom:8px;color:var(--gris_vert)}
.qv-manques li:before{content:"\003F";position:absolute;left:4px;color:var(--sapin_clair);font-weight:700}

/* ---- cartes à visuel latéral ---- */
.qv-serie{margin:56px 0 0}
.qv-serie-entete{border-bottom:1px solid var(--filet);padding-bottom:10px;margin-bottom:24px}
.qv-serie-titre{font-size:1.4rem;margin:0}
.qv-serie-note{font-size:.86rem;color:var(--gris_vert);margin-top:4px}
.qv-liste-fiches{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.qv-carte-fiche{display:flex;gap:16px;background:var(--blanc_casse);border:1px solid var(--filet);padding:14px}
.qv-carte-fiche:hover{background:#e6fff1}
.qv-carte-visuel{flex:0 0 132px}
.qv-carte-visuel img{width:100%;border:1px solid var(--filet)}
.qv-carte-ersatz{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--jade)}
.qv-carte-ersatz span{font-family:'Marcellus',serif;font-size:1.9rem;color:var(--sapin_vif)}
.qv-carte-corps{flex:1;min-width:0}
.qv-carte-sur{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sapin_clair);margin-bottom:6px}
.qv-carte-titre{font-size:1.06rem;line-height:1.3;margin-bottom:6px}
.qv-carte-titre a{color:var(--sapin)}
.qv-carte-resume{font-size:.92rem;color:var(--gris_vert);margin-bottom:8px}
.qv-carte-lien{font-size:.79rem;font-weight:700;color:var(--sapin_clair)}
.qv-carte-lien:after{content:" \203A"}

/* ---- clôture : CLAIRE, là où les gabarits voisins la mettent en sombre ---- */
.qv-cloture{background:var(--jade);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);padding:52px 0;margin-top:62px}
.qv-cloture-surtitre{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sapin_vif);margin-bottom:14px}
.qv-cloture h2{font-size:1.7rem;margin-bottom:12px;max-width:34rem}
.qv-cloture p{color:var(--gris_vert);max-width:42rem;margin-bottom:1.1rem}
.qv-acquis{list-style:none;margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;max-width:46rem}
.qv-acquis li{position:relative;padding-left:24px;font-size:.96rem;color:var(--sapin)}
.qv-acquis li:before{content:"\2192";position:absolute;left:0;color:var(--sapin_vif)}
.qv-sommaire-nu{list-style:none;margin:0;max-width:28rem}
.qv-sommaire-nu li{padding:10px 0;border-bottom:1px solid var(--filet)}

/* ---- pied ---- */
.qv-pied{background:var(--sapin);color:#7fc3ae;padding:38px 0;font-size:.9rem}
.qv-pied a{color:var(--menthe)}
.qv-pied-grille{display:grid;grid-template-columns:3fr 2fr;gap:30px}
.qv-pied-titre{font-family:'Marcellus',serif;color:var(--menthe);font-size:.95rem;margin-bottom:10px}

@media(max-width:900px){
.qv-bandeau-grille{grid-template-columns:1fr;gap:28px}
.qv-liste-fiches,.qv-acquis,.qv-pied-grille{grid-template-columns:1fr}
/* Sans min-width:0 ni passage à la ligne, la barre de navigation déborde du viewport sur
   un téléphone : un élément flex ne se réduit pas sous la largeur de son contenu, et toute
   la page se met alors à défiler horizontalement. */
.qv-nav{flex:1 1 100%;min-width:0}
.qv-nav a{margin-left:0;margin-right:18px;display:inline-block}
}
@media(max-width:560px){
/* La carte à visuel latéral passe en pile : à 132 px de visuel, il ne reste pas de place
   pour un titre de deux lignes. */
.qv-carte-fiche{flex-direction:column}
.qv-carte-visuel{flex:0 0 auto}
}
/* Titres mesurés au navigateur à 375 px : au-delà de deux lignes, un intitulé de partie
   cesse de se lire d'un coup d'œil. C'est la taille qui descend, pas l'intitulé. */
@media(max-width:480px){
.qv-titre{font-size:1.85rem}
.qv-titre-partie{font-size:1.2rem}
.qv-serie-titre{font-size:1.18rem}
.qv-cloture h2{font-size:1.38rem}
.qv-exemple-cle{flex:1 1 100%}
}