/* Gabarit commun des pages SEO du 02/11 (villes, communes, services par ville, métiers, guides).
   Composants repris de publicite-nettoyage.css et commande-en-ligne-snack.css, plus le tableau de chiffres. */
/* ═══ page secteur : composants repris de google-ads.css ═══ */
/* ---------- les trois conditions, puis les trois limites ----------
   Même composant que la cartographie : trois faces sur le bandeau graphite.
   Ici deux sections l'emploient, l'une avec titre de face, l'autre sans. */
.duo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--deep-line);border:1px solid var(--deep-line)}
.duo--trois{grid-template-columns:repeat(3,minmax(0,1fr))}
.face{background:var(--deep);padding:clamp(24px,3vw,34px)}
.face .k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-2);font-weight:700}
.face strong{display:block;margin:12px 0 14px;font-size:clamp(18px,2.1vw,22px);
  font-weight:700;letter-spacing:-.026em;line-height:1.18}
.face .quoi{font-size:14.5px;color:var(--deep-mut);line-height:1.66}
.face .quoi b{color:var(--on-deep)}
/* sur graphite, le vert d'accent du corps de texte n'a pas assez de contraste :
   c'est l'accent clair qui sert de couleur de lien, ici et dans le paragraphe
   de bascule. */
.face .quoi a,.apres a{color:var(--accent-2);text-decoration:underline;
  text-underline-offset:2px}

.apres{margin-top:clamp(24px,3vw,34px);font-size:clamp(15.5px,1.5vw,17px);
  color:var(--deep-mut);max-width:74ch;line-height:1.66}
.apres b{color:var(--on-deep)}

/* ---------- ce que contient la gestion ---------- */
.prose-liste{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:11px}
.prose-liste li{position:relative;padding-left:19px;
  font-size:15px;color:var(--muted);line-height:1.6}
.prose-liste li::before{content:"";position:absolute;left:0;top:9px;
  width:6px;height:6px;background:var(--accent)}
.prose-liste li b{color:var(--ink);font-weight:700}
/* deux colonnes, pas trois : les entrées commencent par un intitulé en gras
   suivi d'une phrase entière, et à trois colonnes chaque ligne ne tient plus
   que quatre ou cinq mots. */
.prose-liste--deux{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px clamp(24px,4vw,56px)}
@media (max-width:760px){
  .prose-liste--deux{grid-template-columns:minmax(0,1fr)}
}

/* ---------- les quatre premières semaines ---------- */
.jours{margin:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.jours .j{background:var(--surface);padding:18px 22px;
  display:grid;grid-template-columns:minmax(0,92px) minmax(0,1fr);gap:22px;align-items:start}
.jours .d{font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent-txt);padding-top:3px}
.jours div{font-size:14.5px;color:var(--muted);line-height:1.66}
.jours b{color:var(--ink);font-weight:700}

/* ---------- les trois lignes de tarif ----------
   Une seule carte est sombre : celle qui engage. Les deux autres restent
   parfaitement lisibles : on met en avant, on ne dévalorise pas. */
.offres{margin-top:clamp(28px,3.6vw,44px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,20px);align-items:start}

.of{background:var(--surface);border:1px solid var(--line);
  padding:clamp(24px,2.8vw,32px);display:flex;flex-direction:column;height:100%}
/* deux lignes réservées : sinon un intitulé qui passe à la ligne décale son
   prix et les trois montants ne s'alignent plus */
.of .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-txt);display:block;line-height:1.5;
  min-height:calc(2 * 1.5em)}
.of .k em{font-style:normal;color:var(--muted)}
.of .montant{margin:14px 0 8px;font-family:var(--mono);
  font-variant-numeric:tabular-nums;letter-spacing:-.04em;line-height:1}
.of .montant .n{font-size:clamp(34px,4.4vw,48px);font-weight:600}
.of .montant .u{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0}
.of .cond{font-size:13.5px;color:var(--muted);line-height:1.55}
.of ul{list-style:none;margin:22px 0 24px;padding:22px 0 0;display:grid;gap:11px;
  border-top:1px solid var(--line-soft)}
/* puce en position absolue, jamais en flexbox : un <b> dans un li en
   display:flex devient un élément de flex et part en colonne */
.of li{position:relative;padding-left:19px;
  font-size:13.8px;color:var(--muted);line-height:1.55}
.of li::before{content:"";position:absolute;left:0;top:7px;
  width:6px;height:6px;background:var(--accent)}
.of li b{color:var(--ink);font-weight:700}
/* ce que la ligne ne contient pas : dit, pas caché */
.of li.non::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
.of li.non{color:var(--muted);opacity:.82}
.of .btn-row{margin-top:auto}
.of .btn{width:100%}
.of .fin{margin-top:16px;font-size:12.5px;color:var(--muted);line-height:1.55}

.of--phare{background:var(--deep);color:var(--on-deep);border-color:var(--deep)}
.of--phare .k{color:var(--accent-2)}
.of--phare .k em{color:var(--deep-mut)}
.of--phare .cond,.of--phare li{color:var(--deep-mut)}
.of--phare .montant .u{color:var(--deep-mut)}
.of--phare ul{border-top-color:var(--deep-line)}
.of--phare li b{color:var(--on-deep)}
.of--phare .fin{color:var(--accent-2)}

.offres-note{margin-top:clamp(20px,2.4vw,28px);font-size:14px;color:var(--muted);
  line-height:1.65;max-width:74ch}
.offres-note b{color:var(--ink);font-weight:700}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .duo,.duo--trois{grid-template-columns:minmax(0,1fr)}
  .offres{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .jours .j{grid-template-columns:minmax(0,1fr);gap:8px}
}

/* ---------- propre aux pages secteurs ---------- */
.of .montant .dep{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:0;
  font-family:var(--sans,inherit)}
.of--phare .montant .dep{color:var(--deep-mut)}
.of--phare .fin a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
.offres-note a{color:var(--accent-txt);text-decoration:underline;text-underline-offset:2px}
.apres-clair{margin-top:clamp(24px,3vw,34px);font-size:15px;color:var(--muted);
  line-height:1.66;max-width:74ch;padding:18px 22px;background:var(--surface);
  border-left:3px solid var(--accent)}
.apres-clair b{color:var(--ink)}
.apres-clair a{color:var(--accent-txt);text-decoration:underline;text-underline-offset:2px}

/* ---------- tableau de chiffres (Statbel, comparatifs) ---------- */
.chiffres{overflow-x:auto;border:1px solid var(--line);background:var(--surface);margin-top:24px}
.chiffres table{width:100%;border-collapse:collapse;min-width:520px;font-size:14.5px}
.chiffres th,.chiffres td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line-soft);
  vertical-align:top;line-height:1.5}
.chiffres thead th{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:700}
.chiffres tbody th{font-weight:600;color:var(--ink)}
.chiffres td{color:var(--muted);font-variant-numeric:tabular-nums}
.chiffres td.n{text-align:right;font-family:var(--mono);color:var(--ink);white-space:nowrap}
.chiffres .moi{background:var(--accent-dim)}
.chiffres tr:last-child th,.chiffres tr:last-child td{border-bottom:0}
.lecture{margin-top:16px;font-size:13.5px;color:var(--muted);line-height:1.6;max-width:80ch}
.lecture a,.sources a,.texte a{color:var(--accent-txt);text-decoration:underline;text-underline-offset:2px}
.sources{margin-top:14px;font-size:12.5px;color:var(--muted);line-height:1.6;max-width:90ch}
.sources li{margin:4px 0}
/* un paragraphe de texte courant dans une section */
.texte{max-width:74ch}
.texte p{margin:0 0 15px;color:var(--muted);font-size:15.5px;line-height:1.68}
.texte p b{color:var(--ink)}
.texte h3{font-size:17px;margin:26px 0 9px}

/* ---------- petit calculateur ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,3vw,36px);margin-top:24px;align-items:start}
.calc-champs{display:grid;gap:14px}
.calc-champs label{display:grid;gap:7px;font-size:13px;font-weight:600;color:var(--muted)}
.calc-champs input,.calc-champs select{font:600 17px/1.2 var(--mono);color:var(--ink);background:var(--surface);
  border:1px solid var(--line);padding:12px 14px;width:100%}
.calc-champs input:focus,.calc-champs select:focus{outline:2px solid var(--accent);outline-offset:-1px}
.calc-res{background:var(--deep);color:var(--on-deep);padding:clamp(24px,3vw,34px)}
.calc-res .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--deep-mut)}
.calc-gros{display:block;margin:10px 0 18px;font-family:var(--mono);font-size:clamp(34px,5vw,52px);
  font-weight:600;letter-spacing:-.03em;line-height:1.05;color:var(--accent-2);font-variant-numeric:tabular-nums}
.calc-ligne{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--deep-line);
  font-size:14.5px;color:var(--deep-mut)}
.calc-ligne b{color:var(--on-deep);font-family:var(--mono);font-variant-numeric:tabular-nums}
.calc-note{margin-top:14px;font-size:12.5px;color:var(--deep-mut);line-height:1.6}
@media (max-width:760px){.calc{grid-template-columns:minmax(0,1fr)}}

/* ═══ 03/11/2026 · Ressources Meta Ads et journal des changements ═══ */

/* ---------- choix de la situation (hero) ---------- */
.sit-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,3vw,32px)}
.sit-nav a{display:inline-block;padding:9px 15px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-size:14px;font-weight:600;
  text-decoration:none}
.sit-nav a:hover,.sit-nav a:focus-visible{border-color:var(--accent);color:var(--accent-txt)}

/* ---------- les six situations ---------- */
.situations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line)}
.sit{background:var(--surface);padding:clamp(24px,3vw,34px);scroll-margin-top:90px}
.sit-k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-txt);font-weight:700}
.sit h2{margin:10px 0 10px;font-size:clamp(19px,2.1vw,23px);line-height:1.2;letter-spacing:-.02em}
.sit .quand{font-size:14.5px;color:var(--muted);line-height:1.6}
.parcours{list-style:none;margin:18px 0 0;padding:0;counter-reset:etape;display:grid;gap:12px}
.parcours li{counter-increment:etape;position:relative;padding-left:38px}
.parcours li::before{content:counter(etape);position:absolute;left:0;top:0;
  width:26px;height:26px;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-family:var(--mono);font-size:12.5px;font-weight:700}
.parcours a{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.parcours span{display:block;font-size:14px;color:var(--muted);line-height:1.55;margin-top:2px}
.sit .outil{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:14px;color:var(--muted);line-height:1.6}
.sit .outil a,.entree a{color:var(--accent-txt);text-decoration:underline;text-underline-offset:2px}
@media (max-width:760px){.situations{grid-template-columns:minmax(0,1fr)}}

/* ---------- journal ---------- */
.j-maj{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}
.journal{max-width:860px}
.j-annee{font-size:clamp(22px,2.6vw,28px);margin:clamp(30px,4vw,44px) 0 14px;
  padding-bottom:8px;border-bottom:2px solid var(--ink)}
.journal .j-annee:first-child{margin-top:0}
.entree{padding:22px 0;border-bottom:1px solid var(--line);scroll-margin-top:90px}
.j-date{display:flex;align-items:center;gap:12px;font-family:var(--mono);
  font-size:12.5px;font-weight:700;color:var(--ink)}
.j-pf{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 8px;border:1px solid var(--line)}
.j-pf--meta{color:var(--accent-txt);border-color:var(--accent)}
.j-pf--google{color:var(--ink)}
.entree h3{margin:10px 0 8px;font-size:clamp(17px,1.9vw,20px);line-height:1.3}
.entree p{font-size:15px;color:var(--muted);line-height:1.65;max-width:72ch}
.entree .j-vous{margin-top:10px;padding:12px 16px;background:var(--accent-dim);color:var(--ink)}
.entree .j-src{margin-top:10px;font-size:13px}