/* Pages de prestation (création de site, fiche Google, hébergement) : correctifs communs de mise en page.
   VULCAN, 07.11.2026, après « des textes qui se touchent, des trucs trop proches » (Paul, 06.11 23 h 58).
   Chargée après la feuille propre à chaque page ; rien ici n'atteint l'accueil (feuille absente de index.html).
   Échelle d'espacement utilisée : 8 · 14 · 18 · 24 · 32 · 48. */

/* D3 · en-tête : les signes de code restent à droite, jamais sous le titre ni le chapô */
.tete-page canvas { -webkit-mask-image: linear-gradient(90deg, transparent 0 52%, #000 82%); mask-image: linear-gradient(90deg, transparent 0 52%, #000 82%); }
@media (max-width: 860px) { .tete-page canvas { display: none; } }

/* D1 · cartes à icône : le corps porte le fond, le cadre et l'empilement icône, titre, texte (comme l'accueil) */
.cadre.inclinable > .inclinable__corps { display: flex; flex-direction: column; }
.bloc .cadres { gap: 18px; margin: 32px 0; }
.bloc .cadre h3 { margin: 0 0 8px; }
.cadres--cinq .cadre__icone { width: 34px; height: 34px; margin-bottom: 14px; }

/* D2 · FAQ sur fond nuit : filets et signe « + » visibles (style.css les règle pour le cadre crème de l'accueil) */
.bloc .faq__liste { border-top: 1px solid var(--trait); }
.bloc .faq__liste .question { border-bottom: 1px solid rgba(255,255,255,.12); }
.bloc .faq__liste .question:first-child summary { padding-top: 22px; }
.bloc .faq__liste .question summary { font: 600 clamp(17px, 1.4vw, 20px)/1.3 var(--serif); }
.bloc .faq__liste .question summary:hover { color: #fff; }
.bloc .faq__liste .question summary i { border-color: rgba(255,255,255,.22); }
.bloc .faq__liste .question summary i::before, .bloc .faq__liste .question summary i::after { background: var(--texte); }
.bloc .faq__liste .question[open] summary i::before, .bloc .faq__liste .question[open] summary i::after { background: #fff; }
.bloc .faq__liste .question__reponse p { color: var(--doux); }

/* D4 · trois prix dans une demi-colonne : sur une seule ligne, chiffre un cran plus petit */
.paire .prix-ligne { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.paire .prix-ligne li { padding: 18px 16px; }
.paire .prix-ligne b { font-size: clamp(28px, 2.4vw, 36px); }

/* D7 · titre de FAQ de l'hébergement : même échelle que les deux autres pages */
.heb-faq .titre-section, .deux-colonnes .titre-section { font-size: clamp(28px, 3.2vw, 44px); max-width: 16ch; }
.heb-faq > .entete { position: sticky; top: 110px; margin: 0; }

/* D6 · « Et ce que nous ne mettons pas » : un paragraphe, une colonne de lecture */
.heb-sans { columns: auto; max-width: 70ch; margin-top: 48px; }

/* D12 · « Ce qu'il y a derrière » : le titre reste en vue à côté de la fiche */
.bloc--papier > .deux-colonnes > .entete:has(+ .heb-fiche) { position: sticky; top: 110px; margin: 0; }

/* D8 · jauges : le prix, son libellé et la barre respirent */
.heb-paliers { height: 250px; }
.heb-paliers .palier { gap: 6px; }
.heb-paliers .palier b small { margin-left: 2px; }
.heb-paliers .palier__jauge { margin-top: 14px; }

/* D9 · « Voir aussi » : un lien ne se coupe jamais en deux lignes */
.appel__voir a, .heb-voir a { white-space: nowrap; }
.appel p.appel__voir, .appel p.heb-voir { max-width: none; }

/* D11 · listes de prose : le trait violet de l'accueil au lieu des puces du navigateur */
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 24px; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .78em; width: 12px; height: 2px; border-radius: 2px; background: var(--violet); }

/* D10 · téléphone : 18 px entre un titre de section et son texte, pas 50 */
@media (max-width: 860px) {
  .deux-colonnes--titre > .entete, .heb-faq > .entete, .bloc--papier > .deux-colonnes > .entete:has(+ .heb-fiche) { position: static; margin-bottom: 0; }
  .deux-colonnes--titre > .entete > .titre-section:last-child { margin-bottom: 0; }
}
@media (max-width: 560px) {
  .bloc .cadre.inclinable { padding: 0; }
  .bloc .cadre.inclinable > .inclinable__corps { padding: 20px 18px; }
  .paire .prix-ligne { grid-template-columns: 1fr; gap: 10px; }
  .cadres--cinq .cadre:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .heb-paliers { height: 270px; }
  .heb-paliers .palier b small { margin: 4px 0 0; }
}

/* Revue ARGUS du 07.11 (ULTRON) · M1 : titres de 2 ou 3 lignes, les queues du q et du p touchaient la ligne du dessous (1,02 de style.css) */
.titre-section { line-height: 1.12; }
/* m1 · jauges à 1280 : « par an » et le « CHF » voisin ne se lisent plus comme une seule ligne */
.heb-paliers { column-gap: 28px; }
/* m2 · cartes « Sous le capot » : 12 px entre le titre et son texte */
.bloc .cadre .inclinable__corps h3 { margin: 0 0 12px; }
/* m4 · chapôs : pas de mot seul sur la dernière ligne */
.chapo { text-wrap: pretty; }
/* m1 (suite) · « par an » passe sous le prix à toutes les largeurs : à 1280, celui de 390 touchait le bord de sa colonne */
.heb-paliers .palier b small { display: block; margin: 4px 0 0; }
.heb-paliers { height: 270px; }