/* annuaire.css — pages géographiques « piscinistes par ville ».
   Tokens du :root du front, via var(--token, fallback). */
.an-hero{padding:64px 0 44px;background:var(--sand,#F6EFE1);border-bottom:1px solid var(--gray-200,var(--line,#DCD5C6))}
.an-hero h1{max-width:900px;margin:0;font:700 clamp(32px,4.4vw,54px)/1.05 var(--serif);letter-spacing:-.055em}
.an-fil{margin:0 0 18px;font-size:12px;color:var(--gray-600,var(--muted,#6B7C86))}
.an-fil a{color:var(--gray-600,var(--muted,#6B7C86));text-decoration:none}
.an-fil a:hover{color:var(--primary-color,var(--primary,#1B3A4B))}
.an-fil span[aria-hidden]{margin:0 6px}
.an-lede{max-width:760px;margin:22px 0 0;font-size:18px;line-height:1.6;color:var(--gray-800,var(--text-secondary,#43606E))}
.an-chiffres{display:flex;flex-wrap:wrap;gap:0;margin:32px 0 0;padding:0;list-style:none;border-left:1px solid var(--gray-200,var(--line,#DCD5C6))}
.an-chiffres li{padding:4px 26px;border-right:1px solid var(--gray-200,var(--line,#DCD5C6))}
.an-chiffres b{display:block;font:700 24px var(--serif);letter-spacing:-.04em;color:var(--dark-color,var(--ink,#0E222D))}
.an-chiffres span{font-size:12px;color:var(--gray-600,var(--muted,#6B7C86))}

.an-bloc{padding:56px 0 0;scroll-margin-top:110px}
.an-bloc h2{margin:0 0 16px;font:700 clamp(24px,2.6vw,34px)/1.14 var(--serif);letter-spacing:-.05em}
.an-bloc h3{font:600 19px var(--serif);letter-spacing:-.03em}
.an-bloc p{max-width:820px;margin:0 0 15px;font-size:16px;line-height:1.68;color:var(--gray-800,var(--text-secondary,#43606E))}
.an-bloc p strong{color:var(--dark-color,var(--ink,#0E222D))}
.an-bloc-lede{margin-bottom:22px!important}
.an-bloc-note{font-size:14px!important;color:var(--gray-600,var(--muted,#6B7C86))!important}

.an-devis{padding:32px 34px;background:var(--surface,var(--white,#FFFFFF));border:1px solid var(--gray-200,var(--line,#DCD5C6));border-top:4px solid var(--secondary-color,#C8A26A)}
.an-devis h2{margin-top:0}
.an-devis-note{margin:20px 0 0!important;font-size:13px!important;line-height:1.55!important;color:var(--gray-600,var(--muted,#6B7C86))!important}

.an-cahier{counter-reset:cah;margin:22px 0;padding:0;list-style:none;border-top:1px solid var(--gray-200,var(--line,#DCD5C6))}
.an-cahier li{counter-increment:cah;display:grid;grid-template-columns:38px 1fr;gap:2px 16px;padding:16px 0;border-bottom:1px solid var(--gray-200,var(--line,#DCD5C6))}
.an-cahier li:before{content:counter(cah,decimal-leading-zero);grid-row:1/3;font:12px var(--mono);color:var(--secondary-hover,#B08B54);padding-top:3px}
.an-cahier b{font:600 16px var(--serif)}
.an-cahier span{font-size:14px;line-height:1.55;color:var(--gray-800,var(--text-secondary,#43606E))}

.an-proches,.an-communes{display:grid;gap:1px;margin:0;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  border-top:1px solid var(--gray-200,var(--line,#DCD5C6));border-left:1px solid var(--gray-200,var(--line,#DCD5C6))}
.an-proches li,.an-communes li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 15px;border-right:1px solid var(--gray-200,var(--line,#DCD5C6));border-bottom:1px solid var(--gray-200,var(--line,#DCD5C6))}
.an-proches a,.an-communes a{color:var(--dark-color,var(--ink,#0E222D));text-decoration:none;font-size:14px;font-weight:600}
.an-proches a:hover,.an-communes a:hover{color:var(--primary-color,var(--primary,#1B3A4B))}
.an-proches span,.an-communes span{font:11px var(--mono);color:var(--gray-600,var(--muted,#6B7C86));white-space:nowrap}

.an-region{margin:0 0 34px}
.an-region h3{margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--gray-200,var(--line,#DCD5C6))}
.an-depts{display:grid;gap:6px 20px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));margin:0;padding:0;list-style:none}
.an-depts a{display:flex;align-items:baseline;gap:9px;padding:5px 0;color:var(--dark-color,var(--ink,#0E222D));text-decoration:none;font-size:14px}
.an-depts a:hover{color:var(--primary-color,var(--primary,#1B3A4B))}
.an-code{font:11px var(--mono);color:var(--secondary-hover,#B08B54);min-width:22px}

.an-sources{padding-bottom:20px}
.an-sources ul{max-width:840px;margin:0;padding-left:20px}
.an-sources li{margin:0 0 9px;font-size:13px;line-height:1.6;color:var(--gray-600,var(--muted,#6B7C86))}
.an-sources li strong{color:var(--gray-800,var(--text-secondary,#43606E))}

@media(max-width:640px){
  .an-hero{padding:44px 0 32px}
  .an-chiffres{border-left:0;gap:18px}
  .an-chiffres li{padding:0;border-right:0}
  .an-devis{padding:22px}
  .an-proches,.an-communes{grid-template-columns:1fr}
}

/* =========================================================================
   Pages ville et département : contenu centré dans la largeur de la home.
   Les blocs de lecture gardent une longueur de ligne confortable mais sont
   centrés au lieu d'être calés à gauche ; les grilles et tableaux occupent
   toute la largeur disponible.
   ========================================================================= */
.an-hero h1,
.an-lede,
.an-fil,
.an-chiffres,
.an-bloc > h2,
.an-bloc > h3,
.an-bloc > p,
.an-bloc > ol,
.an-bloc > .an-devis,
.an-sources ul{margin-left:auto;margin-right:auto}

.an-hero h1{max-width:940px}
.an-lede{max-width:860px}
.an-fil,.an-chiffres{max-width:940px}
.an-bloc > h2,.an-bloc > h3,.an-bloc > p,.an-bloc > ol{max-width:860px}
.an-sources ul{max-width:860px}
.an-bloc > .an-devis{max-width:940px}

/* Grilles et listes : centrées elles aussi, mais sur toute la largeur utile. */
.an-proches,.an-communes,.an-depts,.method-grid,.an-region{margin-left:auto;margin-right:auto}
.an-region{max-width:1160px}

/* Le fil d'Ariane et les compteurs restent alignés sur la colonne de texte. */
.an-chiffres{justify-content:flex-start}

@media(max-width:640px){
  .an-hero h1,.an-lede,.an-fil,.an-chiffres,
  .an-bloc > h2,.an-bloc > h3,.an-bloc > p,.an-bloc > ol,
  .an-bloc > .an-devis,.an-sources ul{max-width:none}
}

/* =========================================================================
   LARGEUR DE LECTURE UNIFORME — posé le 18/08/2026.
   Onze largeurs de colonne cohabitaient (700, 710, 720, 730, 760, 790, 820,
   830, 840, 860, 900, 940 px) selon la famille de page. Tout le texte suivi
   passe désormais par le jeton --lecture, et se centre dans le conteneur.
   Ce bloc vit dans annuaire.css parce que c'est la dernière feuille chargée :
   il doit l'emporter sur guide.css et tools.css à spécificité égale.
   Les largeurs de COMPOSANT (hero de la home, encarts, carte du quiz, panneau
   de dosage, bannière de consentement) ne sont volontairement pas touchées :
   ce sont des blocs de mise en page, pas des colonnes de lecture.
   ========================================================================= */

/* --- Guides et piliers --- */
.guide-hero h1,
.guide-lede,
.guide-content p,
.guide-content ul,
.guide-content .editor-note,
/* --- Outils --- */
.tool-hero h1,
.tool-lede,
.sim-intro,
.sim-section-lede,
.faq-list,
.faq-list p,
/* --- Annuaire --- */
.an-hero h1,
.an-lede,
.an-fil,
.an-chiffres,
.an-bloc > h2,
.an-bloc > h3,
.an-bloc > p,
.an-bloc > ol,
.an-bloc > .an-devis,
.an-sources ul,
/* --- Simulateur de la page prix --- */
.simu-kit-lede,
.simu-kit-delta,
.simu-kit-source{max-width:var(--lecture,860px);margin-left:auto;margin-right:auto}

/* Le fil d'Ariane et les compteurs restent alignés sur le bord gauche de la colonne. */
.an-fil,.an-chiffres{justify-content:flex-start}

/* Dans les guides, la colonne est déjà bornée par la grille : le centrage y est
   sans effet, le plafond suffit à égaliser la largeur avec les autres familles. */
.guide-content p,.guide-content ul,.guide-content .editor-note{margin-left:0;margin-right:0}

@media(max-width:860px){
  .guide-hero h1,.guide-lede,.guide-content p,.guide-content ul,.guide-content .editor-note,
  .tool-hero h1,.tool-lede,.sim-intro,.sim-section-lede,.faq-list,.faq-list p,
  .an-hero h1,.an-lede,.an-fil,.an-chiffres,
  .an-bloc > h2,.an-bloc > h3,.an-bloc > p,.an-bloc > ol,.an-bloc > .an-devis,.an-sources ul,
  .simu-kit-lede,.simu-kit-delta,.simu-kit-source{max-width:none}
}