/* ==========================================================================================
   Pages intérieures : la richesse de l'accueil (retour d'Antoine du 8 octobre 2026 :
   « beaucoup de texte mais peu de mise en forme […] je veux pareil sur toutes les pages »).
   Tout s'appuie sur le balisage existant (section.rubrique, h3, table, blockquote, ul) ;
   js/pages.js ajoute le sommaire replié, le fil de lecture, les questions qui s'ouvrent.
   ========================================================================================== */

/* ---- Sommaire long : une planche numérotée, repliée par défaut ---- */
.sommaire--long { counter-reset: partie; }
.sommaire--long > ul { display: grid; gap: 0 var(--e-6); padding: var(--e-5) var(--e-5) var(--e-4); border-radius: var(--rayon); background: #e7d3ae url("../img/planche-bois.webp") center / cover; box-shadow: var(--ombre-pose); }
@media (min-width: 700px) { .sommaire--long > ul { grid-template-columns: 1fr 1fr; } }
.sommaire--long li { counter-increment: partie; border-bottom: 1px dashed rgb(92 30 12 / 0.35); }
.sommaire--long a { display: flex; align-items: center; gap: var(--e-3); min-height: 2.9rem; padding: var(--e-2) 0; border: 0; border-radius: 0; color: var(--terre-nuit); line-height: 1.2; transition: translate 0.2s var(--ease-douce), color 0.2s; }
.sommaire--long a::before { content: counter(partie); flex: none; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--terre); color: var(--blanc); font-size: 0.9rem; }
.sommaire--long a:hover { background: transparent; border: 0; color: var(--terre); translate: 5px 0; }
.sommaire--long:not(.sommaire--ouvert) li:nth-child(n+7) { display: none; }
.sommaire__plus { display: block; margin: var(--e-3) auto 0; min-height: 2.75rem; padding: 0 var(--e-5); border: 2px solid var(--creme); border-radius: 2rem; background: transparent; color: var(--creme); font: 700 1rem var(--ff-texte); cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.sommaire__plus:hover { background: var(--mais); border-color: var(--mais); color: var(--noir); }

/* ---- Fil de lecture, sur le côté des grands écrans : où l'on en est dans la page ---- */
.rail { position: fixed; z-index: 3; left: max(var(--e-4), calc((100vw - 52rem) / 2 - 16.5rem)); top: calc(var(--haut-entete) + var(--e-6)); width: 14.5rem; max-height: calc(100vh - var(--haut-entete) - 9rem); overflow-y: auto; scrollbar-width: none; opacity: 0; translate: -1rem 0; pointer-events: none; transition: opacity 0.3s, translate 0.3s; }
.rail::-webkit-scrollbar { display: none; }
.rail--visible:not(.rail--bas) { opacity: 1; translate: 0 0; pointer-events: auto; }
.rail ol { list-style: none; margin: 0; padding: 0 0 0 0.9rem; border-left: 2px solid rgb(251 255 228 / 0.25); }
.rail a { position: relative; display: block; padding: 0.32rem 0 0.32rem 0.6rem; color: rgb(251 255 228 / 0.72); font: 700 0.86rem/1.25 var(--ff-texte); text-decoration: none; transition: color 0.2s; }
.rail a::before { content: ""; position: absolute; left: calc(-0.9rem - 6px); top: 0.62rem; width: 10px; height: 10px; border-radius: 50%; background: var(--terre-nuit); border: 2px solid rgb(251 255 228 / 0.5); transition: background-color 0.2s, border-color 0.2s, scale 0.2s; }
.rail a:hover, .rail a[aria-current] { color: var(--blanc); }
.rail a[aria-current]::before { background: var(--mais); border-color: var(--mais); scale: 1.3; }

/* ---- Temps de lecture, sous le titre des articles ---- */
.lecture { display: inline-flex; align-items: center; gap: var(--e-2); margin: 0 0 var(--e-4); padding: var(--e-1) var(--e-3); border-radius: 2rem; background: rgb(0 0 0 / 0.4); color: var(--creme); font-weight: 700; font-size: 0.95rem; }
.lecture::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--mais); }

/* ---- Tableaux habillés ---- */
.rubrique .table-responsive { border-radius: 12px; background: rgb(255 255 255 / 0.55); box-shadow: 0 2px 10px rgb(0 0 0 / 0.16); }
.panneau--vert .table-responsive { background: rgb(0 0 0 / 0.2); }
.rubrique .table thead th { background: var(--terre); color: var(--creme); border-bottom: 0; font-size: 0.86em; letter-spacing: 0.03em; text-transform: uppercase; padding-top: 0.7em; padding-bottom: 0.7em; }
.panneau--vert .table thead th { background: var(--vert-encre); color: var(--beige); }
.rubrique .table td, .rubrique .table th { padding-left: 0.85em; padding-right: 0.85em; }
.rubrique .table tbody tr { transition: background-color 0.2s; }
.rubrique .table tbody tr:nth-child(even) { background: rgb(92 30 12 / 0.06); }
.panneau--vert .table tbody tr:nth-child(even) { background: rgb(255 255 255 / 0.06); }
.rubrique .table tbody tr:hover { background: rgb(250 181 0 / 0.2); }
.rubrique .table tbody tr:last-child td { border-bottom: 0; }
.rubrique .table td:first-child { font-weight: 700; }
.rubrique .table td.prix { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- Questions qui s'ouvrent ---- */
.question { margin: 0 0 var(--e-3); border-radius: 12px; background: rgb(255 255 255 / 0.6); box-shadow: 0 1px 6px rgb(0 0 0 / 0.12); overflow: hidden; }
.panneau--vert .question { background: rgb(0 0 0 / 0.2); }
.question > summary { display: flex; align-items: center; gap: var(--e-3); min-height: 3.25rem; padding: var(--e-2) var(--e-4); cursor: pointer; list-style: none; transition: background-color 0.2s; }
.question > summary::-webkit-details-marker { display: none; }
.question > summary h3 { margin: 0; font-size: 1.12rem; line-height: 1.25; }
.question > summary::after { content: ""; flex: none; margin-left: auto; width: 0.65rem; height: 0.65rem; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; rotate: 45deg; translate: 0 -2px; transition: rotate 0.25s var(--ease-douce), translate 0.25s var(--ease-douce); }
.question[open] > summary::after { rotate: -135deg; translate: 0 3px; }
.question > summary:hover { background: rgb(250 181 0 / 0.22); }
.question__reponse { padding: var(--e-1) var(--e-4) var(--e-3); animation: fiche-entre 0.24s var(--ease-douce); }
.question__reponse > :last-child { margin-bottom: 0; }

/* ---- Avis de clients : une carte, un grand guillemet au pinceau ---- */
.rubrique blockquote { position: relative; margin: var(--e-5) 0; padding: var(--e-4) var(--e-5) var(--e-4) 4rem; border-radius: 12px; background: rgb(255 255 255 / 0.62); box-shadow: 0 2px 10px rgb(0 0 0 / 0.14); rotate: -0.35deg; }
.panneau--vert blockquote { background: rgb(0 0 0 / 0.22); }
.rubrique blockquote::before { content: "«"; position: absolute; left: 0.9rem; top: 0.2rem; font: 400 3.4rem/1 var(--ff-pinceau); color: var(--terre); }
.panneau--vert blockquote::before { color: var(--beige); }
.rubrique blockquote footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin-top: var(--e-2); }
.rubrique blockquote footer::after { content: "Avis Google"; padding: 0.1rem 0.6rem; border-radius: 2rem; background: var(--terre); color: var(--creme); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; }
.panneau--vert blockquote footer::after { background: var(--beige); color: var(--vert-encre); }

/* ---- Listes : des pastilles cochées ; les résumés en cartes ---- */
.rubrique > ul:not([class]), .question__reponse > ul:not([class]) { list-style: none; padding-left: 0; }
.rubrique > ul:not([class]) > li, .question__reponse > ul:not([class]) > li { position: relative; padding-left: 2rem; }
.rubrique > ul:not([class]) > li::before, .question__reponse > ul:not([class]) > li::before { content: ""; position: absolute; left: 0; top: 0.32em; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--terre) url("../img/coche-creme.svg") center / 62% no-repeat; }
.panneau--vert > ul:not([class]) > li::before { background-color: var(--beige); background-image: url("../img/coche-encre.svg"); }
.rubrique:is([id="resume"], [id="en-bref"]) > ul:not([class]) { display: grid; gap: var(--e-3); max-width: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.rubrique:is([id="resume"], [id="en-bref"]) > ul:not([class]) > li { margin: 0; padding: var(--e-3) var(--e-3) var(--e-3) 2.9rem; border-radius: 12px; background: rgb(255 255 255 / 0.6); box-shadow: 0 1px 6px rgb(0 0 0 / 0.12); }
.panneau--vert:is([id="resume"], [id="en-bref"]) > ul:not([class]) > li { background: rgb(0 0 0 / 0.2); }
.rubrique:is([id="resume"], [id="en-bref"]) > ul:not([class]) > li::before { left: 0.85rem; top: 0.95rem; }
.rubrique > ol { list-style: none; counter-reset: etape; padding-left: 0; max-width: 65ch; }
.rubrique > ol > li { counter-increment: etape; position: relative; padding: var(--e-2) 0 var(--e-2) 3rem; }
.rubrique > ol > li::before { content: counter(etape); position: absolute; left: 0; top: 0.35rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--terre); color: var(--blanc); font-weight: 700; }
.panneau--vert > ol > li::before { background: var(--beige); color: var(--vert-encre); }

/* ---- Photos dans le texte : posées sur la page, entières, un peu de travers ---- */
.rubrique__photo:not(:first-child) { max-width: 36rem; margin: var(--e-6) auto; rotate: -1.1deg; transition: rotate 0.35s var(--ease-douce), scale 0.35s var(--ease-douce); }
.rubrique__photo:not(:first-child):nth-of-type(even) { rotate: 1deg; }
.rubrique__photo:not(:first-child):hover { rotate: 0deg; scale: 1.02; }
.rubrique__photo:not(:first-child) img { aspect-ratio: 3 / 2; border: 6px solid var(--blanc); border-radius: 10px; box-shadow: 0 0.6rem 1.4rem rgb(0 0 0 / 0.3); }

/* (Les ornements au coin des encarts beiges sont retirés : ils prenaient la place du cadre, dessiné par ::after. Retour d'Antoine du 8 oct.) */

/* ---- Apparition au défilement (seulement si le script tourne et si le visiteur accepte les animations) ---- */
html.anim .rubrique.panneau { opacity: 0; translate: 0 2rem; transition: opacity 0.6s var(--ease-douce), translate 0.6s var(--ease-douce); }
html.anim .rubrique.panneau.vu { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .rubrique blockquote, .rubrique__photo:not(:first-child), .rubrique__photo:not(:first-child):nth-of-type(even) { rotate: 0deg; }
  .question__reponse { animation: none; }
}

/* Téléphone : la première colonne des tableaux ne coupe plus les mots en deux. */
@media (max-width: 699px) {
  .rubrique .table td:first-child, .rubrique .table th:first-child { overflow-wrap: normal; word-break: normal; min-width: 6.5rem; }
}

/* La photo jointe à un avis Google, posée dans une rubrique : sa légende dit de qui elle vient (11 oct. 2026). */
.rubrique__photo--avis figcaption { margin-top: var(--e-2); text-align: center; font-size: 0.9rem; font-style: italic; }