/* K2T — pages de secteur, page Tarifs et ajouts de l'accueil. Complète site.css et site-pages.css. Toujours en clair. */

/* ---------- Fil d'Ariane ---------- */
.sx-ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 20px; font-size: var(--t-note); color: var(--texte-3); }
.sx-ariane li + li::before { content: "/"; margin-right: 10px; color: var(--non-textuel, var(--encre-400)); }
.sx-ariane a { display: inline-flex; align-items: center; min-height: var(--cible); color: var(--texte-2); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- En-tête de secteur ---------- */
.sx-tete { padding-block: clamp(32px, 5vw, 72px) clamp(48px, 6vw, 88px); }
.sx-tete__texte { grid-column: 1 / span 7; align-self: center; }
.sx-tete h1 { margin-top: 18px; font-size: clamp(2.125rem, 4.2vw, 3.625rem); line-height: 1.04; max-width: 18ch; text-wrap: balance; }
.sx-tete .chapo { margin-top: 22px; }
.sx-tete__photo { grid-column: 9 / span 4; align-self: center; }
.sx-tete__photo .photo { aspect-ratio: 4 / 3; }
.sx-etroit { max-width: 760px; }

/* ---------- Situations ---------- */
.sx-cas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 40px; counter-reset: cas; }
.sx-cas__item { padding-block: 24px 28px; border-top: 1px solid var(--encre-900); }
.sx-cas__item h3 { font-size: 1.3125rem; font-weight: 500; line-height: 1.25; }
.sx-cas__item h3::before { counter-increment: cas; content: counter(cas, decimal-leading-zero); display: block; margin-bottom: 10px; font: 600 var(--t-mini)/1.4 var(--font-texte); letter-spacing: .12em; color: var(--accent-texte); }
.sx-cas__item p { margin-top: 10px; font-size: 1rem; line-height: 1.6; color: var(--texte-2); }

/* ---------- Convention ---------- */
.sx-confirmer { display: flex; gap: 12px; margin-top: 24px; font-size: .9375rem; line-height: 1.55; color: var(--texte-2); }
.sx-confirmer .ico { color: var(--accent-trait); margin-top: 2px; }
.regle .lien { margin-top: 10px; font-size: .9375rem; }

/* ---------- Modules et leur état ---------- */
.sx-modules__tete { grid-column: 1 / span 5; }
.sx-modules__liste { grid-column: 7 / span 6; }
.sx-lien-tarifs { margin-top: 20px; }
.sx-mod { border-top: 1px solid var(--encre-900); }
.sx-mod li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--bordure); }
.sx-mod__nom { font-size: 1rem; line-height: 1.4; color: var(--texte); }
.sx-mod__nom small { display: block; font-size: var(--t-mini); color: var(--texte-3); }

/* ---------- Semaine type ---------- */
.sx-semaine__texte { grid-column: 1 / span 7; }
.sx-semaine__photo { grid-column: 9 / span 4; align-self: start; margin-top: 8px; }
.sx-semaine__photo .photo { aspect-ratio: 4 / 5; }
.sx-semaine { margin-top: 32px; border-left: 1px solid var(--filet-300); }
.sx-semaine li { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 4px 20px; padding: 0 0 20px 24px; }
.sx-semaine li::before { content: ""; position: absolute; left: -5px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--fond-2); box-shadow: inset 0 0 0 2px var(--or-600); }
.sx-semaine b { font: 500 1.0625rem/1.4 var(--font-titre); font-variation-settings: var(--titre-axes); }
.sx-semaine p { font-size: 1rem; line-height: 1.55; color: var(--texte-2); }

/* ---------- FAQ ---------- */
.sx-faq__contact { margin-top: 16px; font-size: 1rem; }

/* ---------- Modules sur mesure ---------- */
.sx-mesure__tete { grid-column: 1 / span 5; }
.sx-mesure__suite { grid-column: 7 / span 6; }
.sx-mesure__ex-titre { margin-top: 28px; font-weight: 600; }
.sx-mesure__ex { display: grid; gap: 10px; margin-top: 12px; }
.sx-mesure__ex li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 1rem; line-height: 1.5; color: var(--texte-2); }
.sx-mesure__ex .ico { width: 18px; height: 18px; margin-top: 3px; color: var(--or-600); }
.sx-etapes { counter-reset: etape; border-top: 1px solid var(--encre-900); }
.sx-etapes li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; padding-block: 22px; border-bottom: 1px solid var(--bordure-forte); }
.sx-etapes li::before { counter-increment: etape; content: counter(etape); grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--or-600); font: 500 1.125rem/1 var(--font-titre); color: var(--accent-texte); }
.sx-etapes h3 { font-size: 1.25rem; font-weight: 500; }
.sx-etapes p { margin-top: 6px; font-size: 1rem; line-height: 1.55; color: var(--texte-2); }
.sx-mesure__contact { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.sx-mesure__contact .btn { max-width: 100%; overflow-wrap: anywhere; }
.sx-mesure .note { margin-top: 12px; }

/* ---------- Autres secteurs ---------- */
.sx-autres h2 { font-size: 1.5rem; }
.sx-autres ul { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.sx-autres a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--cible); padding: 0 16px; border: 1px solid var(--bordure-forte); border-radius: var(--r-plein); font-weight: 500; transition: border-color var(--duree-1) var(--courbe); }
.sx-autres a:hover { border-color: var(--encre-900); }
.sx-autres .ico { width: 16px; height: 16px; color: var(--accent-trait); }

/* ---------- Tarifs : Intégral en avant ---------- */
.t-offres--integral { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr); }
.sx-mesure .sx-mesure__ex { margin-top: 24px; }
.t-offre--retrait { background: var(--fond-2); }
.t-offre--retrait h3 { font-size: 1.625rem; }
.t-offre--retrait .t-offre__prix b { font-size: clamp(2.25rem, 3.6vw, 3rem); color: var(--texte-2); }
.t-offre li small, .formule__inclus small { color: var(--texte-3); font-size: var(--t-mini); }
.fonctions .tableau td small { margin-top: 4px; }
.fonctions .tableau td small .puce { min-height: 22px; padding: 0 8px; }
.fonctions .sx-col-mise { background: var(--or-50); }

/* ---------- Accueil : carte des prix ---------- */
.formule--mise { margin-inline: -16px; padding-inline: 16px; background: var(--or-50); box-shadow: inset 0 3px 0 var(--or-600); }
.formule--retrait .formule__tete h3, .formule--retrait .formule__prix { font-size: 1.75rem; color: var(--texte-2); }

/* ---------- Tiroir : liste des secteurs ---------- */
.tiroir nav .tiroir__sous { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; padding-block: 4px 10px; border-bottom: 1px solid var(--bordure); }
.tiroir nav .tiroir__sous a { min-height: 44px; border-bottom: 0; font: 500 .9375rem/1.3 var(--font-texte); color: var(--encre-700); }

/* ---------- Réactif ---------- */
@media (max-width: 1023px) {
  .sx-tete__photo, .sx-modules__liste, .sx-mesure__suite, .sx-semaine__photo { margin-top: 36px; }
  .sx-tete__photo .photo { max-width: 560px; }
  .sx-semaine__photo .photo { max-width: 420px; }
  .sx-cas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-offres--integral { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .sx-cas { grid-template-columns: minmax(0, 1fr); }
  .sx-semaine li { grid-template-columns: minmax(0, 1fr); padding-left: 18px; }
  .sx-mod li { align-items: flex-start; }
  .sx-mesure__contact .btn { flex: 1 1 100%; }
  .formule--mise { margin-inline: -18px; padding-inline: 18px; }
}