/* ============================================================
   QYLINE — PAGES DE CONTENU · « Papier, bleu, jaune »
   ------------------------------------------------------------
   Chargée APRÈS assets/accueil.css, qui fournit la police, les
   couleurs, la barre, le sommaire, les boutons, la FAQ et le
   pied. Ici, seulement ce que l'accueil n'a pas : le fil
   d'Ariane, le bandeau d'une page, la lecture longue (titres,
   listes), le sommaire de page, les prix en liste, les cartes
   de liens et l'appel à l'action jaune. Même vocabulaire : aplats,
   ombres dures sans flou, cadres bordés, pas de dégradé.
   ============================================================ */

/* ---------- Le fil d'Ariane, posé sur le bleu, sous la barre ---------- */
.fil{
  padding:calc(var(--h-tete) + 22px) 24px 0;
  color:#E6ECFA;
  background-color:var(--bleu);background-image:var(--grille);background-size:36px 36px;
  font-size:1rem;font-weight:600;
}
.fil ol{display:flex;flex-wrap:wrap;gap:4px 0;margin:0;padding:0;list-style:none;}
.fil li{display:inline-flex;align-items:center;}
.fil li + li::before{content:"/";margin:0 10px;color:var(--jaune);font-weight:800;}
.fil a{color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;}
.fil a:hover{text-decoration-thickness:4px;}
.fil [aria-current]{color:#E6ECFA;}

/* ---------- Le bandeau d'une page ---------- */
.vt-bandeau{
  padding:calc(var(--h-tete) + 40px) 24px clamp(56px,7vw,92px);
  color:#fff;
  background-color:var(--bleu);background-image:var(--grille);background-size:36px 36px;
}
.fil + .vt-bandeau{padding-top:30px;}
.vt-bandeau .conteneur{display:flex;flex-direction:column;align-items:flex-start;gap:30px;}
.vt-bandeau h1{
  max-width:1050px;
  font-size:clamp(2.4rem,6.6vw,5.4rem);
  font-weight:800;line-height:.96;letter-spacing:-.035em;text-wrap:balance;
}
.vt-bandeau h1 .fin{display:block;color:var(--jaune);}
.vt-chapo{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 64px;width:100%;}
.vt-chapo p{flex:1 1 340px;max-width:44rem;font-size:1.25rem;line-height:1.5;color:#E6ECFA;}

/* ---------- Le corps : sommaire de page à gauche, texte à droite ---------- */
.vt-grille{display:grid;gap:40px clamp(40px,5vw,80px);align-items:start;}
@media (min-width:1040px){
  .vt-grille{grid-template-columns:minmax(0,17rem) minmax(0,1fr);}
  .vt-toc{position:sticky;top:calc(var(--h-tete) + 28px);}
}
.vt-toc{
  padding:20px 22px;
  background:var(--blanc);
  border:2px solid var(--bleu);border-radius:4px;
  box-shadow:6px 6px 0 var(--jaune);
  margin:0 6px 6px 0;
}
.vt-toc-t{font-weight:800;font-size:1.05rem;margin-bottom:10px;}
.vt-toc ol{margin:0;padding:0 0 0 1.3em;display:flex;flex-direction:column;gap:7px;font-size:1rem;}
.vt-toc li::marker{color:var(--bleu-fonce);font-weight:800;}
.vt-toc a{color:var(--encre);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;}
.vt-toc a:hover{text-decoration-thickness:3px;color:var(--bleu-fonce);}

/* ---------- La lecture longue ---------- */
.vt-prose{max-width:46rem;min-width:0;}
.vt-prose section + section{margin-top:clamp(48px,6vw,72px);}
.vt-prose h2{
  font-size:clamp(1.85rem,3.8vw,2.7rem);
  font-weight:800;line-height:1.04;letter-spacing:-.03em;
  margin-bottom:22px;
  scroll-margin-top:calc(var(--h-tete) + 24px);
}
.vt-prose h3{font-size:clamp(1.25rem,2.2vw,1.5rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:30px 0 10px;}
.vt-prose p{margin:0 0 16px;}
.vt-prose p,.vt-prose li{max-width:68ch;}
.vt-prose strong{font-weight:700;}
.vt-prose ul,.vt-prose ol{margin:0 0 18px;padding:0;}
.vt-prose ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.vt-prose ul > li{position:relative;padding-left:28px;}
.vt-prose ul > li::before{
  content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border-radius:2px;
  background:var(--jaune);box-shadow:2px 2px 0 var(--encre);
}
.vt-prose ol{padding-left:1.4em;display:flex;flex-direction:column;gap:10px;}
.vt-prose ol > li::marker{font-weight:800;color:var(--bleu-fonce);}
.vt-prose a{color:var(--bleu-fonce);}

/* ---------- Les prix d'une page : une cote par ligne ---------- */
.vt-prose ul.vt-tarifs{gap:16px;margin:26px 0 14px;}
.vt-prose ul.vt-tarifs > li{padding-left:0;}
.vt-prose ul.vt-tarifs > li::before{content:none;}
.vt-tarifs .cote{flex-wrap:wrap;max-width:none;padding-bottom:14px;border-bottom:2px solid var(--filet);}
.vt-tarifs .cote-etiq{color:var(--encre);font-weight:700;white-space:normal;}
.vt-tarifs .cote-etiq small{display:block;margin-top:3px;font-size:.95rem;font-weight:500;color:var(--gris);}
.vt-tarifs .cote-val{font-size:clamp(1.5rem,2.8vw,2.1rem);}
.vt-note{font-size:1rem;color:var(--gris);}

/* ---------- Pour aller plus loin : les cartes de liens ---------- */
.vt-suite .conteneur{display:flex;flex-direction:column;gap:18px;}
.vt-suite h2{font-size:clamp(2rem,4.6vw,3.3rem);line-height:1;letter-spacing:-.03em;margin-bottom:18px;}
.vt-liens{list-style:none;margin:0;padding:0;display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));}
.vt-liens a{
  display:flex;flex-direction:column;gap:10px;height:100%;
  padding:22px 22px 20px;margin:0 6px 6px 0;
  background:var(--blanc);color:var(--encre);text-decoration:none;
  border:2px solid var(--encre);border-radius:4px;
  box-shadow:6px 6px 0 var(--bleu);
  transition:transform .12s ease, box-shadow .12s ease;
}
.vt-liens a:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--bleu);}
.vt-liens strong{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;}
.vt-liens span{color:var(--gris);font-size:1rem;line-height:1.45;}
.vt-liens em{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font-style:normal;font-weight:700;color:var(--bleu-fonce);}

/* ---------- L'appel à l'action : le grand aplat jaune ---------- */
.vt-appel{padding:clamp(56px,7vw,96px) 24px;background:var(--jaune);}
.vt-appel .conteneur{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px 64px;}
.vt-appel-texte{display:flex;flex-direction:column;align-items:flex-start;gap:18px;flex:1 1 420px;min-width:0;}
.vt-appel .repere{background:var(--blanc);}
.vt-appel h2{max-width:22ch;font-size:clamp(2rem,4.4vw,3.5rem);line-height:1;letter-spacing:-.035em;text-wrap:balance;}
.vt-appel-texte p:not(.repere){font-size:1.2rem;max-width:34rem;}
.vt-appel-act{display:flex;flex-direction:column;align-items:flex-start;gap:12px;flex:0 1 24rem;}
.vt-appel-act .bouton{background:var(--encre);color:#fff;box-shadow:5px 5px 0 var(--bleu);}
.vt-appel-act .bouton:hover{box-shadow:3px 3px 0 var(--bleu);}
.vt-appel-act .lien{font-size:1.15rem;overflow-wrap:anywhere;}

/* Le bouton « haut de page », jaune, reste visible sur l'aplat jaune. */
.vt .haut{border:2px solid var(--encre);}

/* ---------- Pied : quatre colonnes de liens ---------- */
@media (min-width:760px){ .vt-pied-grille{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));} }

/* ---------- Page introuvable ---------- */
.vt-404 .vt-liens{margin-top:10px;}

/* ---------- Téléphone ---------- */
@media (max-width:599px){
  .fil,.vt-bandeau,.vt-appel{padding-left:18px;padding-right:18px;}
  .vt-chapo .actions{width:100%;}
  .vt-chapo .actions .bouton,.vt-appel-act .bouton{width:100%;justify-content:center;}
  .vt-appel-act{width:100%;}
  .vt-toc{box-shadow:5px 5px 0 var(--jaune);margin:0 5px 5px 0;}
  .vt-liens a{box-shadow:5px 5px 0 var(--bleu);margin:0 5px 5px 0;}
}

/* ---------- Impression ---------- */
@media print{
  .fil,.vt-toc,.vt-appel-act{display:none !important;}
  .vt-bandeau,.vt-appel{background:#fff !important;color:#000 !important;padding:12pt 0;}
  .vt-chapo p{color:#000 !important;}
  .vt-liens a{box-shadow:none;}
}