/*
 * pages-v4.css — passe design v4 (rubriques, page ville, à propos).
 * Chargée après reprise.css sur toutes les pages : tout est préfixé par
 * body.category / body.page-template-page-ville / body.page-template-page-qui-sommes-nous
 * pour ne rien toucher ailleurs. Mode clair uniquement (passe en cours).
 */

/* ======================================================================
   RUBRIQUES (category.php)
   ====================================================================== */

/* « À la une » : le 1er guide en grand, photo + chapô — donne du corps aux
   rubriques qui n'ont que 1 à 3 guides (correction n°6). */
body.category .rub-apla{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:center;margin-bottom:48px}
body.category .rub-apla-photo .tirage-photo{border-radius:var(--r-carte);box-shadow:var(--ombre)}
body.category .rub-apla-titre{font-size:clamp(26px,1.6vw + 18px,34px);line-height:1.12;margin:12px 0 10px}
body.category .rub-apla-chapo{font-size:17px;line-height:1.55;max-width:56ch;margin-bottom:0}
body.category .rub-grille-suite{margin-top:4px}
@media (max-width:860px){
  body.category .rub-apla{grid-template-columns:1fr;gap:20px;margin-bottom:36px}
}

/* Bloc d'appoint : calculateur HMT (accueil) + communes desservies — donne du
   corps à une rubrique mince au lieu du compteur « N guides » retiré. */
body.category .rub-appoint{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:16px 0 48px}
body.category .rub-appoint-carte{display:flex;gap:16px;align-items:flex-start;background:var(--pierre);border-radius:var(--r-tuile);padding:22px;transition:transform .15s ease,box-shadow .15s ease}
body.category .rub-appoint-carte:hover{transform:translateY(-2px);box-shadow:var(--ombre)}
body.category .rub-appoint-carte:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
body.category .rub-appoint-chiffre{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:999px;background:var(--blanc);color:var(--accent-fonce);font-family:var(--f-titre);font-weight:800;font-size:15px;box-shadow:0 1px 2px rgba(30,36,40,.08)}
body.category .rub-appoint-texte{color:var(--encre-douce);font-size:14px;margin:4px 0 0}
@media (max-width:700px){
  body.category .rub-appoint{grid-template-columns:1fr;margin-bottom:36px}
}

/* Cartes de grille de rubrique : coins arrondis (manquaient), cohérent avec
   le reste du site (P-207, hiérarchie avant décoration). */
body.category .tirage-photo{border-radius:var(--r-tuile)}

/* ======================================================================
   PAGE VILLE (page-ville.php)
   ====================================================================== */

/* Intro courte avant le 1er bloc visuel (correction n°7 : plus de mur de texte). */
body.page-template-page-ville .ville-intro{margin-bottom:28px}
body.page-template-page-ville .ville-intro p:last-child{margin-bottom:0}

/* Repères chiffrés : réutilise les tuiles ic-* déjà posées par les articles. */
body.page-template-page-ville .ville-reperes{margin-bottom:36px}

/* Accordéons du corps de page — même langage visuel que la FAQ (carte blanche,
   ombre, +/- rond), premier ouvert. */
body.page-template-page-ville .ville-accordeon{background:var(--blanc);border-radius:var(--r-tuile);box-shadow:var(--ombre);padding:4px 22px;margin-bottom:14px}
body.page-template-page-ville .ville-accordeon summary{list-style:none;cursor:pointer;position:relative;padding:18px 40px 18px 0}
body.page-template-page-ville .ville-accordeon summary::-webkit-details-marker{display:none}
body.page-template-page-ville .ville-accordeon summary h2{display:inline;margin:0;font-size:20px;line-height:1.3}
body.page-template-page-ville .ville-accordeon summary::after{content:"+";position:absolute;right:0;top:14px;width:26px;height:26px;border-radius:999px;background:var(--accent-pale);color:var(--accent-fonce);display:flex;align-items:center;justify-content:center;font-size:18px}
body.page-template-page-ville .ville-accordeon[open] summary::after{content:"–"}
body.page-template-page-ville .ville-accordeon-corps{padding-bottom:20px}
body.page-template-page-ville .ville-accordeon-corps > *:first-child{margin-top:0}
body.page-template-page-ville .ville-accordeon-corps > *:last-child{margin-bottom:0}

/* Bloc « La commune » : la photo de mairie redescend en petit, avec son crédit. */
body.page-template-page-ville .ville-commune-bloc{display:flex;gap:20px;align-items:center;background:var(--pierre);border-radius:var(--r-tuile);padding:20px;margin:40px 0 8px}
body.page-template-page-ville .ville-photo-commune{flex:none;width:160px;margin:0}
body.page-template-page-ville .ville-photo-commune img{width:100%;height:120px;object-fit:cover;border-radius:var(--r-tuile);display:block}
body.page-template-page-ville .ville-commune-texte{color:var(--encre-douce);font-size:15px;line-height:1.5;margin:4px 0 8px}
@media (max-width:600px){
  body.page-template-page-ville .ville-commune-bloc{flex-direction:column;text-align:center}
  body.page-template-page-ville .ville-photo-commune{width:100%;max-width:280px}
}

/* Communes voisines : phrase d'intro + 6 communes (au lieu de 4) pour ne plus
   laisser de vide face à la carte et aux guides liés. */
body.page-template-page-ville .ville-voisines-intro{color:var(--encre-douce);font-size:14px;margin:4px 0 14px}

/* ======================================================================
   À PROPOS — Qui sommes-nous (page-qui-sommes-nous.php)
   ====================================================================== */

/* Photo principale : légende créditée, cohérente avec le reste du site. */
body.page-template-page-qui-sommes-nous .qsn-photo-principale .tirage-legende{margin-top:12px}

/* Trois cartes « Informer / Qualifier / Mettre en relation » : photo du sujet
   en tête de carte (manquait), texte en dessous. */
body.page-template-page-qui-sommes-nous .qsn-carte-mission{padding:0;overflow:hidden;display:flex;flex-direction:column}
body.page-template-page-qui-sommes-nous .qsn-carte-mission-photo{display:block;aspect-ratio:16/10;background:var(--pierre)}
body.page-template-page-qui-sommes-nous .qsn-carte-mission-photo img{width:100%;height:100%;object-fit:cover}
body.page-template-page-qui-sommes-nous .qsn-carte-mission-texte{padding:20px 22px 24px}
body.page-template-page-qui-sommes-nous .qsn-carte-mission-texte h3{margin:0 0 8px}

/* Carte auteur élargie (auteur unique) : monogramme agrandi, parcours, lien. */
body.page-template-page-qui-sommes-nous .auteur-grande-carte{display:flex;gap:32px;align-items:center;background:var(--blanc);border-radius:var(--r-carte);box-shadow:var(--ombre);padding:36px;max-width:820px;margin-inline:auto}
body.page-template-page-qui-sommes-nous .auteur-grande-photo{flex:none}
body.page-template-page-qui-sommes-nous .auteur-grande-texte{min-width:0}
@media (max-width:640px){
  body.page-template-page-qui-sommes-nous .auteur-grande-carte{flex-direction:column;text-align:center;padding:26px;gap:18px}
}

/* Rubrique : 1 ou 2 guides restants → cartes horizontales pleine largeur (pas de case vide à droite) */
@media (min-width:700px){
  body.category .grille-tirages--centree{grid-template-columns:repeat(auto-fit,minmax(0,1fr));justify-content:stretch}
  body.category .grille-tirages--centree .carte-tirage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:24px;align-items:center}
  body.category .grille-tirages--centree .carte-tirage .carte-meta{padding:0}
}

/* ===== Passe v5 (juge visuel 2, 03/10) ===== */
/* Qui sommes-nous : en-tête en deux zones, photo en cadre décalé + capsule auteur à cheval */
body.page-template-page-qui-sommes-nous .qsn-hero{padding-block:56px 72px}
.qsn-hero-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.qsn-hero-texte .chapo{max-width:46ch}
.qsn-hero-chiffres{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.qsn-hero-chiffres li{background:var(--blanc);border-radius:999px;padding:9px 16px;font-size:14px;color:var(--encre-douce);box-shadow:0 6px 18px rgba(30,36,40,.06)}
.qsn-hero-chiffres strong{color:var(--encre);margin-right:4px}
.qsn-hero-photo{position:relative;margin:0;isolation:isolate}
.qsn-hero-cadre{display:block;position:relative;border-radius:28px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 30px 70px rgba(30,36,40,.20);background:var(--pierre)}
.qsn-hero-cadre::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.qsn-hero-photo::before{content:"";position:absolute;inset:22px -22px -22px 22px;border-radius:28px;background:var(--accent);opacity:.18;z-index:-1}
.qsn-hero-cadre img{width:100%;height:100%;object-fit:cover;display:block}
.qsn-hero-capsule{position:absolute;left:-28px;bottom:42px;display:flex;align-items:center;gap:12px;background:var(--blanc);border-radius:999px;padding:8px 18px 8px 8px;box-shadow:0 14px 34px rgba(30,36,40,.18);font-size:14px;color:var(--encre);text-decoration:none}
.qsn-hero-capsule img,.qsn-hero-capsule svg{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.qsn-hero-credit{margin-top:30px;font-size:11px;color:var(--encre-douce);padding-left:2px}
@media (max-width:860px){
  .qsn-hero-grille{grid-template-columns:1fr;gap:36px}
  .qsn-hero-photo::before{inset:14px -10px -14px 14px}
  .qsn-hero-capsule{left:12px;bottom:-22px}
}
/* Qui sommes-nous : le récit en cartes avec pictogramme */
.qsn-recit{max-width:1080px}
.qsn-recit-intro{max-width:760px;margin:0 auto 36px;font-size:19px;line-height:1.6;color:var(--encre)}
.qsn-recit-cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.qsn-recit-carte{background:var(--blanc);border-radius:var(--r-carte,18px);padding:28px 26px;box-shadow:0 14px 34px rgba(30,36,40,.08)}
.qsn-recit-carte h2{font-size:24px;line-height:1.15;margin:16px 0 12px}
.qsn-recit-corps p{font-size:15.5px;line-height:1.6;color:var(--encre-douce);margin:0 0 10px}
.qsn-recit-icone{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--pierre)}
.qsn-recit-icone svg{width:24px;height:24px;fill:none;stroke:var(--accent-fonce,#3D7A1A);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.qsn-recit-cartes{grid-template-columns:1fr}}

/* Page ville : les 3 cartes du bas à hauteur de leur contenu, centrées */
body.page-template-page-ville .ville-blocs{align-items:start}

/* Articles : 5 tuiles sur une ligne, jamais une tuile orpheline */
.ic-grille:has(> :nth-child(5)){grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
.ic-4 > :last-child:nth-child(odd),.ic-2 > :last-child:nth-child(odd){grid-column:1/-1}
@media (max-width:700px){.ic-grille:has(> :nth-child(5)){grid-template-columns:1fr 1fr}.ic-grille:has(> :nth-child(5)) > :last-child{grid-column:1/-1}}

/* Pied de page : les communes prennent toute la largeur sur mobile/tablette, 4 colonnes en grand écran */
.pied-liens-communes{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px}
@media (max-width:900px){
  .pied-haut .pied-communes{grid-column:1/-1}
  .pied-liens-communes{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media (min-width:1100px){
  .pied-haut{grid-template-columns:1.2fr .7fr 2.6fr .75fr}
  .pied-liens-communes{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ===== Passe v6 (juge visuel 3, 03/10) ===== */
/* Médaillon d'accueil : la nouvelle photo se cadre normalement (plus de zoom 140 %) */
.hero-disque img{position:absolute;inset:0;top:0;left:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%}
/* Vignettes : jamais un trou blanc pendant le chargement */
.tirage-photo{background-color:var(--pierre)}
/* Accueil : la rubrique en pastille posée sur la photo */
.tirage-photo{position:relative}
.tirage-pastille{position:absolute;left:12px;top:12px;z-index:2;background:var(--blanc);color:var(--encre);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700;box-shadow:0 6px 16px rgba(30,36,40,.16)}
/* Qui sommes-nous : cartes à hauteur de leur texte */
.qsn-recit-cartes{align-items:start}
@media (max-width:860px){.qsn-hero-credit{margin-top:40px;text-align:right}}
/* Page ville : en-tête en relief (bande pierre, photo en cadre décalé) */
body.page-template-page-ville .ville-haut{background:linear-gradient(180deg,var(--pierre) 0,var(--pierre) 520px,var(--blanc) 520px);padding-top:36px}
body.page-template-page-ville .ville-photo{position:relative;isolation:isolate}
body.page-template-page-ville .ville-photo img{border-radius:24px;box-shadow:0 26px 60px rgba(30,36,40,.20)}
body.page-template-page-ville .ville-photo::before{content:"";position:absolute;inset:18px -16px 22px 18px;border-radius:24px;background:var(--accent);opacity:.18;z-index:-1}
@media (max-width:700px){body.page-template-page-ville .ville-haut{background:linear-gradient(180deg,var(--pierre) 0,var(--pierre) 360px,var(--blanc) 360px);padding-top:20px}body.page-template-page-ville .ville-photo::before{inset:12px -8px 18px 12px}}
/* Pied de page en grand écran : marque | rubriques + le site | communes sur 3 colonnes sans coupure */
@media (min-width:1100px){
  .pied-haut{grid-template-columns:1.15fr .75fr 2.5fr;row-gap:28px}
  .pied-haut > :nth-child(1){grid-column:1;grid-row:1 / span 2}
  .pied-haut > :nth-child(2){grid-column:2;grid-row:1}
  .pied-haut > .pied-communes{grid-column:3;grid-row:1 / span 2}
  .pied-haut > :nth-child(4){grid-column:2;grid-row:2}
  .pied-liens-communes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pied-liens-communes a,.pied-liens-communes span{white-space:nowrap}
}
/* Contact : une photo du sujet en tête de l'encart « Après l'envoi » */
.contact-photo{margin:-6px -6px 18px}
.contact-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:16px;display:block;background:var(--pierre)}
.contact-photo figcaption{font-size:11px;color:var(--encre-douce);margin-top:6px}
/* Grand écran : la tête de forage décalée à droite, hors de la carte du formulaire */
@media (min-width:1181px){.hero-disque img{width:125%;height:125%;left:5%;top:-12%}}