/* ============================================================
   cet-site.css — chrome commun des pages secondaires (08/10/2026)
   En-tête, menu, fil d'Ariane, héros avec photo, deux colonnes,
   « Explorer le site », pied, rubrique Conseils.
   Chargé après cet.css ; palette crème / sapin / terracotta.
   ============================================================ */
:root { --terracotta-texte: #9a432c; --site-head-h: 64px; --site-radius: 14px; --site-shadow: 0 1px 2px rgba(26,26,26,.04), 0 12px 32px -20px rgba(31,61,46,.35); }
@media (max-width: 880px) {
  /* cet.css réserve de la place pour l'en-tête flottant et la barre basse de l'accueil : inutile ici */
  body.cet-site { padding-top: 0; padding-bottom: 0; }
}
@media (max-width: 1023px) { :root { --site-head-h: 60px; } }
body.cet-site .skip-link { top: -120px; border-radius: 0 0 8px 0; }
body.cet-site .skip-link:focus { top: 0; }

/* ---------------------------------------------------------------- en-tête */
/* Une seule ligne à toutes les largeurs : logo + « Clôture Express » + menu + téléphone + « Devis gratuit ».
   Paliers mesurés (sept rubriques) : 1024-1279 logo seul et menu compact ; 1280+ libellé ; 1440+ numéro affiché. */
.site-header { position: sticky; top: 0; z-index: 70; background: var(--creme); border-bottom: 1px solid var(--hairline); transition: box-shadow .2s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 20px -12px rgba(26,26,26,.25); }
.site-header-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); display: flex; align-items: center; gap: .5rem; min-height: var(--site-head-h); }
.site-brand { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; color: var(--sapin); text-decoration: none; min-height: 44px; }
.site-brand img { height: 32px; width: auto; display: block; }
.site-brand-name { font-weight: 800; font-size: .95rem; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; padding-left: .6rem; border-left: 1px solid var(--hairline-strong); }
.site-actions { margin-left: auto; display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.site-tel { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; min-width: 44px; padding: .5rem .55rem; border-radius: 8px; font-weight: 700; font-size: .95rem; color: var(--sapin); letter-spacing: -.01em; white-space: nowrap; }
.site-tel:hover { background: rgba(31,61,46,.07); }
.site-tel svg { width: 19px; height: 19px; flex: none; }
.site-tel .site-tel-num { display: none; }
.site-cta { display: none; padding: .65rem 1rem; font-size: .92rem; white-space: nowrap; }
.site-burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--hairline-strong); background: #fff; color: var(--sapin); flex: none; }
.site-burger svg { width: 22px; height: 22px; }
.site-burger .ic-close { display: none; }
.site-burger[aria-expanded="true"] .ic-burger { display: none; }
.site-burger[aria-expanded="true"] .ic-close { display: block; }
@media (max-width: 599px) { .site-header-inner { padding: 0 1rem; } }
@media (max-width: 379px) { .site-brand-name { display: none; } }
@media (min-width: 600px) { .site-cta { display: inline-flex; } }
@media (min-width: 760px) and (max-width: 1023px) { .site-tel .site-tel-num { display: inline; } }

/* menu principal (ordinateur) */
.site-nav { display: none; }
.site-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .05rem; flex-wrap: nowrap; }
.site-menu > li { position: relative; }
.site-menu > li > a, .site-menu-btn { display: inline-flex; align-items: center; gap: .25rem; min-height: 44px; padding: .5rem .55rem; border-radius: 8px; border: 0; background: none; font: inherit; font-weight: 600; font-size: .9rem; letter-spacing: -.005em; color: var(--encre); cursor: pointer; white-space: nowrap; text-decoration: none; }
.site-menu > li > a:hover, .site-menu-btn:hover, .site-menu > li.open > .site-menu-btn, .site-menu > li > a[aria-current="page"] { background: rgba(31,61,46,.08); color: var(--sapin); }
.site-menu-btn svg { width: 13px; height: 13px; transition: transform .15s ease; color: var(--mute); }
.site-menu > li.open > .site-menu-btn svg { transform: rotate(180deg); }
.site-sub { position: absolute; top: calc(100% + .35rem); left: 0; min-width: 250px; background: #fff; border: 1px solid var(--hairline); border-radius: 12px; box-shadow: 0 24px 48px -20px rgba(26,26,26,.35), 0 2px 8px rgba(26,26,26,.06); padding: .5rem; display: none; z-index: 80; }
.site-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -.5rem; height: .5rem; }
.site-sub ul { list-style: none; margin: 0; padding: 0; }
.site-sub a { display: block; padding: .55rem .75rem; border-radius: 8px; color: var(--encre-soft); font-size: .93rem; font-weight: 500; line-height: 1.35; text-decoration: none; }
.site-sub a:hover, .site-sub a:focus-visible { background: var(--creme); color: var(--sapin); }
.site-sub a[aria-current="page"] { color: var(--sapin); font-weight: 700; background: var(--creme-deep); }
.site-sub-cols ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: .25rem; }
.site-sub-cols { min-width: 440px; }
.site-sub .site-sub-all { margin-bottom: .25rem; padding-bottom: .5rem; border-bottom: 1px solid var(--hairline); grid-column: 1 / -1; }
.site-sub .site-sub-all a { font-weight: 700; color: var(--sapin); }
.site-menu > li.is-current > .site-menu-btn { color: var(--sapin); box-shadow: inset 0 -2px 0 var(--terracotta); border-radius: 8px 8px 2px 2px; }
.site-menu > li.open > .site-sub { display: block; }
.site-menu > li:focus-within > .site-sub { display: block; }
@media (hover: hover) and (min-width: 1024px) { .site-menu > li.has-sub:hover > .site-sub { display: block; } }
@media (min-width: 1024px) {
  .site-header-inner { max-width: 1400px; padding: 0 clamp(1.25rem, 2.6vw, 2.5rem); gap: .75rem; }
  .site-nav { display: flex; flex: 1 1 auto; min-width: 0; justify-content: center; }
  .site-burger { display: none; }
  .site-drawer { display: none !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-brand-name { display: none; }
  .site-menu > li > a, .site-menu-btn { padding: .5rem .4rem; font-size: .86rem; }
  .site-cta { padding: .6rem .8rem; font-size: .88rem; }
}
@media (min-width: 1440px) {
  .site-menu > li > a, .site-menu-btn { padding: .5rem .65rem; font-size: .92rem; }
  .site-tel .site-tel-num { display: inline; }
}

/* panneau mobile */
.site-drawer { position: fixed; left: 0; right: 0; bottom: 0; top: var(--site-head-h); z-index: 69; background: var(--creme); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: .5rem var(--pad-x) 2.5rem; }
.site-drawer[hidden] { display: none; }
body.site-drawer-open { overflow: hidden; }
.drawer-group { border-bottom: 1px solid var(--hairline); }
.drawer-group > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 52px; padding: .6rem 0; font-weight: 700; font-size: 1.05rem; color: var(--sapin); cursor: pointer; }
.drawer-group > summary::-webkit-details-marker { display: none; }
.drawer-group > summary svg { width: 18px; height: 18px; flex: none; color: var(--mute); transition: transform .15s ease; }
.drawer-group[open] > summary svg { transform: rotate(180deg); }
.drawer-group ul { list-style: none; margin: 0; padding: 0 0 .7rem; }
.drawer-group li a { display: flex; align-items: center; min-height: 44px; padding: .35rem .85rem; border-radius: 8px; color: var(--encre-soft); font-weight: 500; text-decoration: none; }
.drawer-group li a:hover, .drawer-group li a[aria-current="page"] { background: #fff; color: var(--sapin); font-weight: 600; }
.drawer-group .drawer-all a { color: var(--sapin); font-weight: 700; }
.drawer-link { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: .6rem 0; border-bottom: 1px solid var(--hairline); font-weight: 700; font-size: 1.05rem; color: var(--sapin); text-decoration: none; }
.drawer-link svg { width: 18px; height: 18px; color: var(--mute); transform: rotate(-90deg); }
.drawer-contact { margin-top: 1.4rem; display: grid; gap: .6rem; }
.drawer-contact .btn { width: 100%; }
.drawer-contact .drawer-tel { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; border: 1px solid var(--hairline-strong); border-radius: 8px; background: #fff; font-weight: 700; font-size: 1.05rem; color: var(--sapin); }
.drawer-contact .drawer-tel svg { width: 18px; height: 18px; }
.drawer-note { font-size: .85rem; color: var(--mute); line-height: 1.5; margin: .2rem 0 0; text-align: center; }

/* ---------------------------------------------------------------- fil d'Ariane */
.site-bcrumb { max-width: var(--maxw); margin: 0 auto; padding: .85rem var(--pad-x) .55rem; font-size: .9rem; color: var(--mute); }
.site-bcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .2rem; }
.site-bcrumb li { display: flex; align-items: center; gap: .2rem; }
.site-bcrumb li + li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 .45rem 0 .25rem; border-right: 1.5px solid var(--hairline-strong); border-bottom: 1.5px solid var(--hairline-strong); transform: translateY(-1px) rotate(-45deg); }
.site-bcrumb a { color: var(--mute); text-decoration: none; border-bottom: 1px solid transparent; padding: .15rem 0; }
.site-bcrumb a:hover { color: var(--terracotta); border-color: var(--terracotta); }
.site-bcrumb [aria-current] { color: var(--encre); font-weight: 600; }
@media (max-width: 600px) {
  .site-bcrumb ol { flex-wrap: nowrap; }
  .site-bcrumb li { flex: none; }
  .site-bcrumb li:last-child { flex: 1 1 auto; min-width: 0; }
  .site-bcrumb li:last-child span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}

/* ---------------------------------------------------------------- héros avec photo */
.cet-site .vhero-grid { max-width: var(--maxw); margin-left: auto; margin-right: auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.vhero-photo .vhero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; align-items: center; }
.vhero-photo .vhero-text { min-width: 0; }
.vhero-photo .vhero-text .lead { max-width: 62ch; }
.vhero-media { margin: 0; position: relative; }
.vhero-media img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-radius: var(--site-radius); background: var(--sapin-deep); box-shadow: 0 30px 50px -30px rgba(0,0,0,.55); }
.vhero-media figcaption { margin-top: .5rem; font-size: .8rem; color: rgba(245,239,228,.6); }
.vhero-light { background: var(--creme-deep); color: var(--encre); }
.vhero-light h1 { color: var(--sapin) !important; }
.vhero-light .lead { color: var(--encre-soft) !important; }
.vhero-light .kicker { color: var(--terracotta-texte) !important; }
.vhero-light .kicker a { color: inherit; text-decoration: none; }
.vhero-light .vhero-media img { background: var(--creme); box-shadow: var(--site-shadow); }
@media (min-width: 1024px) {
  .vhero-photo .vhero-grid { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: clamp(2rem, 4vw, 3.5rem); }
  .vhero-media img { aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------------- deux colonnes */
.site-layout { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.site-content { min-width: 0; max-width: 760px; padding: clamp(1.6rem, 3.5vw, 2.4rem) 0 1rem; }
.site-content .vwrap, .site-content .gwrap { max-width: none; padding: 0; }
.site-content .vsec, .site-content .gsec { padding: .9rem 0; }
.site-content .vsec.band, .site-content .gsec.band { background: var(--creme-deep); border-radius: var(--site-radius); padding: 1.3rem clamp(1rem, 3vw, 1.6rem); margin: 1rem 0; }
.site-content .vsec h2, .site-content .gsec h2 { scroll-margin-top: calc(var(--site-head-h) + 1rem); }
.site-content .toc { margin-bottom: 1.4rem; }
.site-content .related { grid-template-columns: repeat(2, 1fr); }
.site-aside { min-width: 0; padding-bottom: 2rem; }
@media (min-width: 1024px) {
  .site-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
  /* colonne latérale : sur un écran assez haut elle reste collée en entier ; sinon les deux premiers blocs défilent
     et le bloc contact reste collé jusqu'en bas du contenu (jamais de colonne vide, jamais de défilement interne) */
  .site-aside { align-self: stretch; margin-top: clamp(1.6rem, 3.5vw, 2.4rem); padding: 0 0 .5rem; }
  .site-aside .aside-contact { position: sticky; top: calc(var(--site-head-h) + .75rem); }
}
@media (min-width: 1024px) and (max-width: 1180px) { .site-layout { grid-template-columns: minmax(0, 1fr) 270px; } }
@media (min-width: 1024px) and (min-height: 980px) {
  .site-aside { align-self: start; position: sticky; top: calc(var(--site-head-h) + .75rem); max-height: calc(100vh - var(--site-head-h) - 1rem); overflow-y: auto; scrollbar-width: thin; }
  .site-aside .aside-contact { position: static; }
}
.site-wide { max-width: var(--maxw); margin: 0 auto; padding: clamp(1.6rem, 3.5vw, 2.4rem) var(--pad-x) 1rem; }
.site-wide .vwrap { max-width: none; padding: 0; }

/* liens dans le texte : visibles comme des liens (cet.css les rend identiques au texte) */
.cet-site .site-content :is(p, li, td, dd, figcaption) a:not(.btn) { color: var(--sapin); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(31,61,46,.35); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.cet-site .site-content :is(p, li, td, dd, figcaption) a:not(.btn):hover { color: var(--terracotta); text-decoration-color: currentColor; }
.cet-site .site-content .toc li a { color: var(--encre-soft); font-weight: 500; text-decoration: none; }
.cet-site .site-content .toc li a:hover { color: var(--terracotta); }

/* tableaux : à partir de 1024 px ils tiennent dans la colonne de contenu (retour à la ligne, colonnes
   proportionnelles, police un peu plus petite) ; le défilement horizontal (.tscroll) ne sert plus que sur mobile */
@media (min-width: 1024px) {
  .site-content table { width: 100%; max-width: 100%; table-layout: auto; }
  .site-content table th, .site-content table td { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
  .site-content .ptable { font-size: .93rem; }
  .site-content .ptable th, .site-content .ptable td { padding: .7rem .75rem; }
  .cet-art .site-content .tscroll table { min-width: 0; }
}
/* tableaux « libres » (tour 2, 01/11/2026) : texte dans toutes les colonnes, pas de colonne de prix. À toutes les
   largeurs, la dernière colonne se replie et s'aligne à gauche (le style en ligne des pages la garde sur une ligne,
   alignée à droite, pour les tableaux de prix .ptable seuls) */
.site-content .ptable.ptable-libre td:last-child, .site-content .ptable.ptable-libre th:last-child { white-space: normal; text-align: left; }
/* tableaux « libres » sous 600 px (tour 2, 01/11/2026) : marges intérieures et texte resserrés, pour que le
   tableau tienne dans l'écran ou défile peu */
@media (max-width: 599px) {
  .site-content .ptable.ptable-libre { font-size: .95rem; }
  .site-content .ptable.ptable-libre th, .site-content .ptable.ptable-libre td { padding: .7rem .5rem; }
}
/* encadré « Erreur fréquente » (tour 2, 01/11/2026) : distinct du « Bon à savoir » (vert), mêmes teintes que
   l'encadré « Erreur fréquente » des conseils ; contraste AA (libellé 6,1:1, texte 10,6:1) */
.site-content .callout.piege { border-left-color: var(--terracotta); background: #fdf5f1; }
.site-content .callout.piege .ct { color: var(--terracotta-texte); }
/* titre du héros (finition, 01/11/2026) : lignes équilibrées, pas de mot seul sur la dernière ligne (même
   règle que les titres de l'accueil) ; le nombre de lignes ne change pas */
.vhero h1, .ghero h1 { text-wrap: balance; }

/* blocs de la colonne latérale */
.aside-box { background: #fff; border: 1px solid var(--hairline); border-radius: var(--site-radius); padding: .9rem 1.1rem .8rem; margin-bottom: .75rem; box-shadow: var(--site-shadow); }
.aside-box h2 { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin: 0 0 .5rem; line-height: 1.4; }
.aside-box ul { list-style: none; margin: 0; padding: 0; }
.aside-box li a { display: block; padding: .32rem .55rem; margin: 0 -.55rem; border-radius: 8px; color: var(--encre-soft); font-size: .93rem; line-height: 1.35; text-decoration: none; }
.aside-box li a:hover { background: var(--creme); color: var(--sapin); }
.aside-box li a[aria-current="page"] { color: var(--sapin); font-weight: 700; background: var(--creme-deep); }
.aside-box li a[aria-current="page"]::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); margin: 0 .5rem 2px 0; }
.aside-cols ul { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: .35rem; }
.aside-cols li a { margin: 0; padding: .38rem .45rem; font-size: .9rem; line-height: 1.3; }
.aside-cols li.aside-all { grid-column: 1 / -1; margin-bottom: .3rem; padding-bottom: .3rem; border-bottom: 1px solid var(--hairline); }
.aside-cols li.aside-all a { font-weight: 700; color: var(--sapin); }
.aside-recent li a { padding: .38rem .55rem; }
.aside-recent li a small { display: block; font-size: .78rem; color: var(--mute); margin-top: .15rem; }
.aside-note { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--encre-soft); }
.aside-note a { color: var(--sapin); font-weight: 700; }
.aside-recent .aside-more { margin-top: .35rem; padding-top: .45rem; border-top: 1px solid var(--hairline); }
.aside-recent .aside-more a { font-weight: 700; color: var(--sapin); }
.aside-contact { background: var(--sapin); border-color: var(--sapin); color: var(--creme); }
.aside-contact h2 { color: rgba(245,239,228,.7); }
.aside-contact .aside-tel { display: flex; align-items: center; gap: .55rem; font-size: 1.28rem; font-weight: 800; letter-spacing: -.02em; color: #fff; text-decoration: none; margin: 0 0 .6rem; min-height: 44px; }
.aside-contact .aside-tel svg { width: 20px; height: 20px; color: var(--ambre); flex: none; }
.aside-contact .btn { width: 100%; margin-bottom: .75rem; }
.aside-contact ul li { display: flex; gap: .55rem; align-items: flex-start; font-size: .88rem; line-height: 1.4; color: rgba(245,239,228,.9); padding: .15rem 0; }
.aside-contact ul li svg { width: 16px; height: 16px; flex: none; color: var(--ambre); margin-top: 3px; }

/* ---------------------------------------------------------------- Explorer le site */
.site-explore { background: var(--creme-deep); border-top: 1px solid var(--hairline); padding: clamp(2.6rem, 5vw, 4rem) 0; }
.site-explore .vwide { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
.site-explore h2 { font-size: clamp(1.5rem, 2.8vw, 2.05rem); color: var(--sapin); letter-spacing: -.02em; line-height: 1.2; margin: 0 0 .35rem; }
.site-explore .sub { color: var(--mute); margin: 0 0 1.5rem; font-size: 1rem; }
.site-explore h3 { font-size: 1.15rem; color: var(--sapin); letter-spacing: -.015em; margin: 2.2rem 0 1rem; }
.explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 860px) { .explore-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .explore-grid { grid-template-columns: 1fr; } }
.explore-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hairline); border-radius: var(--site-radius); overflow: hidden; color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.explore-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -16px rgba(31,61,46,.4); }
.explore-card img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--creme-deep); }
.explore-card .t { padding: .9rem 1.1rem .15rem; font-weight: 700; color: var(--sapin); font-size: 1.02rem; letter-spacing: -.01em; }
.explore-card .d { padding: 0 1.1rem 1rem; color: var(--mute); font-size: .9rem; line-height: 1.5; }
.explore-card.explore-conseil { padding: 1rem 1.1rem; }
.explore-card.explore-conseil .k { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--terracotta); margin-bottom: .4rem; }
.explore-card.explore-conseil .t { padding: 0 0 .25rem; }
.explore-card.explore-conseil .d { padding: 0; }

/* ---------------------------------------------------------------- pied */
.site-footer-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 2rem 1.75rem; margin-bottom: 2.25rem; }
@media (max-width: 1023px) { .site-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-brand-col { grid-column: 1 / -1; } }
@media (max-width: 640px) { .site-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-conseils { grid-column: 1 / -1; } }
@media (max-width: 360px) { .site-footer-grid { grid-template-columns: 1fr; } }
.site-footer .footer-col ul li { margin-bottom: .3rem; }
.site-footer .footer-col a { color: rgba(245,239,228,.78); }
.site-footer .footer-col a:hover { color: var(--creme); text-decoration: underline; }
.site-footer .footer-col ul li.footer-more { margin-top: .5rem; }
.site-footer .footer-col ul li.footer-more a { color: var(--creme); font-weight: 600; }
.footer-brand-col img { height: 44px; width: auto; display: block; margin-bottom: .9rem; }
.footer-brand-col .footer-tagline { margin: 0 0 1rem; font-size: .9375rem; line-height: 1.6; max-width: 40ch; }
.footer-brand-col address { font-style: normal; line-height: 1.75; font-size: .9375rem; color: rgba(245,239,228,.78); }
.footer-brand-col address a { color: inherit; }
.footer-brand-col address a.footer-ent { color: var(--creme); font-weight: 700; }
.footer-brand-col address .nw { white-space: nowrap; }
.footer-brand-col .footer-links { margin-top: .9rem; }
.footer-reseaux { display: flex; gap: .5rem; margin-top: .9rem; }
.footer-reseaux a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; border: 1px solid rgba(245,239,228,.2); color: rgba(245,239,228,.85); }
.footer-reseaux a:hover { background: rgba(245,239,228,.1); }
.footer-reseaux svg { width: 20px; height: 20px; }
.site-footer .footer-bottom a { color: rgba(245,239,228,.78); }
.site-footer .footer-bottom a:hover { color: var(--creme); }

/* ---------------------------------------------------------------- rubrique Conseils (index et articles) */
.cet-art .vwrap { max-width: 880px; margin: 0 auto; padding: 0 var(--pad-x); }
.cet-art .vwide { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
.cet-art .vsec { padding: clamp(2.6rem, 5vw, 4rem) 0; }
.cet-art .vsec.band { background: var(--creme-deep); }
.cet-art .vhero { padding: clamp(2.6rem, 6vw, 4.2rem) 0 clamp(2.2rem, 4vw, 3rem); }
.cet-art .vhero h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); letter-spacing: -.025em; line-height: 1.12; margin: .6rem 0 1rem; }
.cet-art .vhero .lead { font-size: 1.1rem; line-height: 1.65; max-width: 660px; margin: 0 0 1.2rem; }
.cet-art .vhero .kicker { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.cet-art .vhero .ctas { display: flex; gap: .8rem; flex-wrap: wrap; }
.art-meta { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: .88rem; color: var(--mute); line-height: 1.5; }
.art-meta a { color: var(--sapin); font-weight: 600; text-decoration: none; }
.art-meta a:hover { text-decoration: underline; }
.cet-art .vsec h2 { font-size: clamp(1.5rem, 2.8vw, 2.05rem); color: var(--sapin); letter-spacing: -.02em; margin: 0 0 1rem; line-height: 1.2; scroll-margin-top: calc(var(--site-head-h) + 1rem); }
.cet-art .vsec h3 { font-size: 1.1rem; color: var(--sapin); margin: 1.7rem 0 .5rem; }
.cet-art .vsec p { color: var(--encre-soft); line-height: 1.75; margin: 0 0 1rem; font-size: 1.0625rem; }
.cet-art .vsec ul, .cet-art .vsec ol { color: var(--encre-soft); line-height: 1.75; padding-left: 1.3rem; margin: 0 0 1rem; }
.cet-art .vsec li { margin-bottom: .5rem; }
.cet-art .vsec strong { color: var(--encre); }
.cet-art .vsec a:not(.btn) { color: var(--sapin); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(31,61,46,.35); text-underline-offset: 2px; }
.cet-art .vsec a:not(.btn):hover { color: var(--terracotta); text-decoration-color: currentColor; }
.cet-art .toc { background: #fff; border: 1px solid var(--hairline); border-left: 3px solid var(--terracotta); border-radius: 8px; padding: 1.2rem 1.4rem; margin: 0 0 1.4rem; }
.cet-art .toc .tt { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: .7rem; }
.cet-art .toc ol { margin: 0; padding-left: 1.2rem; line-height: 1.85; }
.cet-art .toc a { color: var(--encre-soft); text-decoration: none; font-size: .95rem; font-weight: 500; }
.cet-art .toc a:hover { color: var(--terracotta); }
.cet-art table { width: 100%; border-collapse: collapse; margin: 1.3rem 0; background: #fff; border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden; font-size: .97rem; }
.cet-art th { background: var(--creme-deep); color: var(--mute); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 600; text-align: left; padding: .8rem 1rem; }
.cet-art td { padding: .75rem 1rem; border-top: 1px solid var(--hairline); color: var(--encre-soft); vertical-align: top; line-height: 1.5; }
.cet-art .tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.3rem 0; }
.cet-art .tscroll table { margin: 0; min-width: 520px; }
.cet-art .site-content .vwrap { max-width: none; padding: 0; }
.cet-art .site-content .vsec { padding: 1rem 0; }
.cet-art .site-content .vsec.band { padding: 1.4rem clamp(1rem, 3vw, 1.6rem); margin: 1rem 0; border-radius: var(--site-radius); }
.cet-art .site-content .vsec h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); margin-top: .6rem; }
.cet-art .vsec .toc a:not(.btn) { color: var(--encre-soft); text-decoration: none; font-weight: 500; }
.cet-art .vsec .toc a:not(.btn):hover { color: var(--terracotta); }
.art-note { background: #fff; border: 1px solid var(--hairline); border-left: 3px solid var(--sapin); border-radius: 8px; padding: 1rem 1.25rem; margin: 1.4rem 0; }
.art-note.art-note-attention { border-left-color: var(--terracotta); background: #fdf5f1; }
.art-note > strong:first-child { color: var(--sapin); }
.art-note.art-note-attention > strong:first-child { color: var(--terracotta-texte); }
.art-retenir { background: #fff; border: 1px solid var(--hairline); border-left: 3px solid var(--terracotta); border-radius: var(--site-radius); padding: 1.4rem clamp(1.2rem, 3vw, 1.8rem); box-shadow: var(--site-shadow); }
.art-retenir h2 { font-size: 1.3rem !important; margin-bottom: .7rem !important; }
.art-retenir ul { margin: 0 !important; padding-left: 1.2rem !important; }
.art-retenir li { margin-bottom: .45rem; }
.cet-art .faqlist { display: grid; gap: 1rem; margin-top: 1.4rem; }
.cet-art .faqit { border: 1px solid var(--hairline); border-radius: 12px; padding: 1.05rem 1.3rem; background: #fff; }
.cet-art .faqit h3 { margin: 0 0 .4rem; font-size: 1.04rem; color: var(--sapin); }
.cet-art .faqit p { margin: 0; color: var(--encre-soft); line-height: 1.6; font-size: 1rem; }
.art-lexique { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.2rem 0 0; }
@media (max-width: 700px) { .art-lexique { grid-template-columns: 1fr; } }
.art-lexique div { background: #fff; border: 1px solid var(--hairline); border-radius: 8px; padding: .95rem 1.15rem; }
.art-lexique dt { color: var(--sapin); font-weight: 700; margin-bottom: .2rem; font-size: .98rem; }
.art-lexique dd { margin: 0; color: var(--encre-soft); font-size: .92rem; line-height: 1.55; }
.cet-art .updated { font-size: .82rem; color: var(--mute); margin: 1.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--hairline); }
.cet-art .related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.4rem; }
@media (max-width: 760px) { .cet-art .related { grid-template-columns: 1fr; } }
.cet-art .related a { display: block; text-decoration: none; background: #fff; border: 1px solid var(--hairline); border-radius: var(--site-radius); padding: 1.1rem 1.25rem; transition: transform .15s ease, box-shadow .15s ease; }
.cet-art .related a:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -16px rgba(31,61,46,.4); }
.cet-art .vsec .related a:not(.btn) { text-decoration: none; font-weight: inherit; }
.cet-art .vsec .related a:not(.btn):hover .rn { color: var(--terracotta); }
.cet-art .related .rk { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--terracotta); margin-bottom: .35rem; }
.cet-art .related .rn { color: var(--sapin); font-weight: 700; font-size: 1.04rem; margin-bottom: .2rem; line-height: 1.3; }
.cet-art .related .rd { color: var(--mute); font-size: .89rem; line-height: 1.5; }
.cet-art .ctaband { background: var(--sapin); color: var(--creme); text-align: center; }
.cet-art .ctaband h2 { color: #fff; }
.cet-art .ctaband p { color: rgba(245,239,228,.85); max-width: 600px; margin: 0 auto 1.5rem; }
.cet-art .ctarow { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.art-author { display: grid; grid-template-columns: 96px 1fr; gap: 1.4rem; align-items: center; background: #fff; border: 1px solid var(--hairline); border-radius: var(--site-radius); padding: 1.4rem clamp(1.2rem, 3vw, 1.8rem); box-shadow: var(--site-shadow); }
@media (max-width: 560px) { .art-author { grid-template-columns: 1fr; } }
.art-author img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--creme); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.art-author .kicker { display: block; margin-bottom: .3rem; color: var(--terracotta); }
.art-author h2 { font-size: 1.25rem !important; margin: 0 0 .45rem !important; }
.art-author p { margin: 0 !important; font-size: 1rem !important; }
.art-author p a { color: var(--sapin); font-weight: 600; }

/* index des conseils */
.conseils-filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
.conseils-filtres a { display: inline-flex; align-items: center; min-height: 40px; padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--hairline-strong); background: #fff; color: var(--sapin); font-weight: 600; font-size: .9rem; text-decoration: none; }
.conseils-filtres a:hover { background: var(--sapin); color: var(--creme); border-color: var(--sapin); }
.conseils-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1.2rem; }
@media (max-width: 960px) { .conseils-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .conseils-grid { grid-template-columns: 1fr; } }
.conseil-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hairline); border-radius: var(--site-radius); overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.conseil-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -16px rgba(31,61,46,.4); }
.cet-art .vsec a.conseil-card:not(.btn) { text-decoration: none; font-weight: inherit; color: inherit; }
.cet-art .vsec a.conseil-card:not(.btn):hover .cc-t { color: var(--terracotta); }
.conseil-card img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--creme-deep); }
.conseil-card .cc-ph { display: flex; align-items: flex-end; aspect-ratio: 16 / 10; padding: 1rem 1.15rem; background: var(--sapin) repeating-linear-gradient(135deg, rgba(245,239,228,.05) 0 14px, transparent 14px 28px); color: rgba(245,239,228,.85); font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; line-height: 1.25; }
.conseil-card .cc-body { padding: 1rem 1.15rem 1.15rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.conseil-card .cc-k { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--terracotta); }
.conseil-card .cc-t { font-weight: 700; color: var(--sapin); font-size: 1.05rem; line-height: 1.3; letter-spacing: -.01em; }
.conseil-card .cc-d { color: var(--encre-soft); font-size: .92rem; line-height: 1.5; }
.conseil-card .cc-m { margin-top: auto; padding-top: .5rem; font-size: .8rem; color: var(--mute); }
.conseils-vide { background: #fff; border: 1px dashed var(--hairline-strong); border-radius: var(--site-radius); padding: 1.6rem; color: var(--encre-soft); line-height: 1.65; max-width: 640px; }
.conseils-section { padding: clamp(1.6rem, 3vw, 2.4rem) 0; }
.conseils-section h2 { font-size: 1.35rem; color: var(--sapin); letter-spacing: -.015em; margin: 0; scroll-margin-top: calc(var(--site-head-h) + 1rem); }
.conseils-section .cs-sub { color: var(--mute); margin: .25rem 0 0; font-size: .95rem; }

/* page mentions légales (anciennement sans feuille de style du site) */
.legal .site-content h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; color: var(--sapin); margin: 1.8rem 0 .5rem; }
.legal .site-content p { color: var(--encre-soft); line-height: 1.7; margin: 0 0 1rem; }
.legal .site-content a { color: var(--sapin); font-weight: 600; }

/* page 404 : l'en-tête est fixe, on resserre le bloc */
.cet-site .e404 { min-height: 0; }

@media print { .site-header, .site-drawer, .site-aside, .site-explore { display: none !important; } }

/* repère principal : simple conteneur, sans effet visuel */
main.site-main { display: block; }

/* ---------------------------------------------------------------- bloc « Ce que comprend le prix » (tools/tarifs.json) */
.cet-prix { background: #fff; border: 1px solid var(--hairline); border-top: 3px solid var(--terracotta); border-radius: var(--site-radius); box-shadow: var(--site-shadow); padding: clamp(1.15rem, 3vw, 1.6rem) clamp(1rem, 3vw, 1.6rem); margin: .5rem 0 1rem; }
.cet-prix h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); color: var(--sapin); letter-spacing: -.02em; line-height: 1.2; margin: 0 0 .45rem; scroll-margin-top: calc(var(--site-head-h) + 1rem); }
.cet-prix .cp-intro { margin: 0 0 1.1rem; color: var(--encre-soft); font-size: 1rem; line-height: 1.6; }
.cet-prix .cp-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
@media (min-width: 640px) { .cet-prix .cp-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cet-prix .cp-col { background: var(--creme); border-radius: 10px; padding: .95rem 1.05rem .9rem; }
.cet-prix .cp-col h3, .cet-prix h3.cp-gt { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin: 0 0 .65rem; line-height: 1.4; }
.cet-prix .cp-col ul { list-style: none; margin: 0; padding: 0; }
.cet-prix .cp-col li { display: flex; gap: .55rem; align-items: flex-start; margin: 0 0 .5rem; color: var(--encre-soft); font-size: .97rem; line-height: 1.5; }
.cet-prix .cp-col li:last-child { margin-bottom: 0; }
.cet-prix .cp-col li svg { width: 17px; height: 17px; flex: none; margin-top: .18rem; }
.cet-prix .cp-in li svg { color: var(--sapin); }
.cet-prix .cp-plus li svg { color: var(--terracotta); }
.cet-prix h3.cp-gt { margin-top: 1.3rem; }
.cet-prix .cp-grille { margin: 0; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; background: #fff; }
.cet-prix .cp-grille > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .15rem 1rem; padding: .62rem .95rem; border-top: 1px solid var(--hairline); }
.cet-prix .cp-grille > div:first-child { border-top: 0; }
.cet-prix .cp-grille dt { font-size: .97rem; color: var(--encre-soft); line-height: 1.4; margin: 0; }
.cet-prix .cp-grille dt a { color: var(--sapin); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(31,61,46,.3); text-underline-offset: 2px; }
.cet-prix .cp-grille dt a:hover { color: var(--terracotta); text-decoration-color: currentColor; }
.cet-prix .cp-grille dd { margin: 0 0 0 auto; font-weight: 800; font-size: 1rem; letter-spacing: -.01em; color: var(--sapin); white-space: nowrap; }
.cet-prix .cp-note { margin: 1rem 0 .45rem; font-size: .9rem; line-height: 1.55; color: var(--mute); }
.cet-prix .cp-devis { margin: 0; font-size: .97rem; line-height: 1.6; color: var(--encre-soft); }
.cet-prix .cp-devis strong { color: var(--sapin); }

/* ---------------------------------------------------------------- « Pour aller plus loin » : conseils liés (site.json) */
.conseils-lies h3.cl-k { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); text-align: center; margin: 1.5rem 0 0; line-height: 1.4; }
/* cartes centrées : un, deux ou cinq conseils publiés selon le jour */
.conseils-lies .related { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: .9rem; }
.conseils-lies .related a { flex: 0 1 calc((100% - 2rem) / 3); min-width: 0; display: block; text-decoration: none; background: #fff; border: 1px solid var(--hairline); border-radius: var(--site-radius); padding: 1.1rem 1.25rem; transition: transform .15s ease, box-shadow .15s ease; }
@media (max-width: 760px) { .conseils-lies .related a { flex-basis: 100%; } }
.conseils-lies .related a:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -16px rgba(31,61,46,.4); }
.conseils-lies .related .rk { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--terracotta-texte); margin-bottom: .35rem; }
.conseils-lies .related .rn { color: var(--sapin); font-weight: 700; font-size: 1.04rem; margin-bottom: .2rem; line-height: 1.3; }
.conseils-lies .related a:hover .rn { color: var(--terracotta-texte); }
.conseils-lies .related .rd { color: var(--mute); font-size: .89rem; line-height: 1.5; }