/* =========================================================================
   PAGES AGENCES - styles portes par .ag-page
   -------------------------------------------------------------------------
   Charte reprise de la page Géorisques (.ssp-page) : memes couleurs, memes
   polices, meme hero anthracite a filet rouge.
   TOUT est confine sous .ag-page et les classes sont prefixees `ag-` pour ne
   pas toucher l'en-tete, le menu et le pied de page du theme Astra.
   Specificite doublee (.ag-page.ag-page) la ou Astra / Gutenberg imposent
   leurs regles (liens, titres, listes), comme sur la page Géorisques.
   ========================================================================= */
.ag-page{
  --rouge:#E31C17; --rouge-fonce:#B8140F; --anthracite:#2A353B; --texte:#4A4A4C;
  --gris-clair:#F2F2F2; --filet:#D9D9D9; --blanc:#fff;
  --titre:"Bahnschrift","Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --corps:"Barlow","Segoe UI",Arial,sans-serif;
  --largeur:1180px;
}
.ag-page,.ag-page *,.ag-page *::before,.ag-page *::after{box-sizing:border-box}
.ag-page p,.ag-page ul,.ag-page li,.ag-page h1,.ag-page h2,.ag-page h3,.ag-page dl,.ag-page dd{margin:0;padding:0}
.ag-page.ag-page ul{padding-left:0;margin-left:0;list-style:none}

.ag-page{font-family:var(--corps);color:var(--texte);background:var(--blanc);font-size:17px;line-height:1.6}
.ag-page.ag-page a{color:var(--rouge)}
.ag-page a:focus-visible{outline:3px solid var(--rouge);outline-offset:3px}
.ag-page.ag-page h1,.ag-page.ag-page h2,.ag-page.ag-page h3{font-family:var(--titre);color:var(--anthracite);line-height:1.15;font-weight:600;letter-spacing:0;text-transform:none;text-align:left}

/* Neutralisation des regles GLOBALES du site (Simple Custom CSS), comme sur
   la page Géorisques :
   - `h1{text-align:center}`
   - `h2:not(...)` : bandeau rouge arrondi, largeur 80 %, `margin-left:-100px`,
     `color:white !important` et deux carres ::before/::after.
   Ces selecteurs :not() pesent (0,2,2) : on monte a (0,4,1) avec :is(), et
   la couleur, imposee en !important, doit l'etre aussi. */
.ag-page.ag-page.ag-page:is(.ag-page) h2{display:block;width:auto;background:none;border-radius:0;padding:0;
  margin-top:0;margin-left:0;text-align:left;position:static;color:var(--anthracite) !important}
.ag-page.ag-page.ag-page:is(.ag-page) h2::before,
.ag-page.ag-page.ag-page:is(.ag-page) h2::after{content:none;display:none}
.ag-wrap{max-width:var(--largeur);margin:0 auto;padding:0 24px}
.ag-page section{padding:72px 0}

/* Etiquette rouge au-dessus des titres de section */
.ag-etiquette{display:block;font-family:var(--titre);font-weight:600;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;color:var(--rouge);margin-bottom:10px}
.ag-page.ag-page h2{font-size:clamp(1.8rem,3.2vw,2.5rem);margin-bottom:22px !important} /* !important : regle globale h2{margin-bottom:64px !important} */

/* ---- Bloc 1 : hero ---- */
.ag-page .ag-hero{background:var(--anthracite);color:#fff;padding:56px 0 64px}
.ag-fil{font-size:.85rem;color:rgba(255,255,255,.7);margin-bottom:28px}
.ag-page.ag-page .ag-fil a{color:rgba(255,255,255,.7);text-decoration:none}
.ag-page.ag-page .ag-fil a:hover{color:#fff}
.ag-hero .ag-surtitre{font-family:var(--titre);font-size:1.1rem;color:#fff;opacity:.85;margin-bottom:10px}
.ag-page.ag-page .ag-hero h1{color:#fff;font-size:clamp(2.4rem,5vw,4rem);font-weight:700;max-width:18ch}
.ag-hero .ag-regle{width:120px;height:6px;background:var(--rouge);margin:22px 0}
.ag-hero p{max-width:60ch;font-size:1.15rem;margin-bottom:30px}
.ag-actions{display:flex;flex-wrap:wrap;gap:14px}
/* Icône de lien de l'extension « Add Anchor Links » devant les titres : inutile ici */
.ag-page .aal_anchor{display:none}

/* Photo de l'agence fondue à droite du hero : le dégradé du masque la fait disparaître vers le texte. */
.ag-page .ag-hero-photo{position:relative;overflow:hidden}
.ag-hero-photo .ag-wrap{position:relative;z-index:1}
.ag-page.ag-page .ag-hero-photo .ag-photo{position:absolute;top:0;right:0;width:58%;height:100%;max-width:none;object-fit:cover;opacity:.7;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 55%);mask-image:linear-gradient(to right,transparent 0,#000 55%)}
.ag-photo-credit{position:absolute;right:12px;bottom:8px;z-index:1;font-size:.7rem;color:rgba(255,255,255,.6)}
@media (max-width:860px){
  /* Sur mobile le texte occupe toute la largeur : la photo passe en fond, très atténuée. */
  .ag-page.ag-page .ag-hero-photo .ag-photo{width:100%;opacity:.22;-webkit-mask-image:none;mask-image:none}
}

.ag-page .ag-btn{display:inline-block;font-family:var(--titre);font-weight:600;font-size:1.08rem;text-decoration:none;
  padding:13px 26px;border-radius:6px;border:2px solid var(--rouge);transition:background .15s,border-color .15s,color .15s}
.ag-page.ag-page .ag-btn-plein{background:var(--rouge);color:#fff}
.ag-page.ag-page .ag-btn-plein:hover{background:var(--rouge-fonce);border-color:var(--rouge-fonce);color:#fff}
.ag-page.ag-page .ag-btn-contour{color:#fff;border-color:#fff}
.ag-page.ag-page .ag-btn-contour:hover{background:rgba(255,255,255,.12);color:#fff}

/* ---- Bloc 2 : l'agence en bref (pleine largeur) ---- */
.ag-bref p{max-width:75ch;font-size:1.08rem;margin-bottom:16px}
.ag-metiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;margin-top:34px}
.ag-page.ag-page .ag-metiers a{display:block;height:100%;border-top:5px solid var(--rouge);background:#fff;padding:18px 18px 20px;
  box-shadow:0 1px 3px rgba(42,53,59,.10);border-radius:0 0 6px 6px;text-decoration:none;color:var(--anthracite);
  font-family:var(--titre);font-weight:600;font-size:1.12rem;line-height:1.25;transition:box-shadow .2s,transform .2s}
.ag-page.ag-page .ag-metiers a:hover{box-shadow:0 6px 18px rgba(42,53,59,.16);transform:translateY(-2px)}
.ag-metiers small{display:block;font-family:var(--corps);font-weight:400;font-size:.92rem;color:var(--texte);margin-top:6px}

/* ---- Bloc 3 : secteur (gauche) + nous joindre (droite) ---- */
.ag-page .ag-duo{background:var(--gris-clair)}
.ag-duo .ag-grille{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:start}
.ag-secteur p{margin-bottom:16px}
.ag-communes{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ag-page.ag-page .ag-communes li{background:#fff;border:1px solid var(--filet);border-radius:999px;padding:4px 14px;font-size:.92rem}

.ag-joindre{background:#fff;border-top:5px solid var(--rouge);border-radius:0 0 6px 6px;box-shadow:0 1px 3px rgba(42,53,59,.10);padding:28px}
.ag-page.ag-page .ag-joindre h2{font-size:1.7rem;margin-bottom:18px !important}
.ag-joindre dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin-bottom:22px}
.ag-joindre dt{font-family:var(--titre);font-weight:600;color:var(--anthracite)}
.ag-page.ag-page .ag-joindre a{text-decoration:none;font-weight:500}
.ag-carte{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:var(--filet)}
.ag-carte iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- Page « Nos agences » : hero en deux colonnes (texte | chiffres cles + boutons) ---- */
.ag-page .ag-hero-index{padding:40px 0 48px}
.ag-hero-index .ag-fil{margin-bottom:20px}
.ag-hero-grille{display:grid;grid-template-columns:1.6fr 1fr;gap:56px;align-items:center}
.ag-page.ag-page .ag-hero-index h1{font-size:clamp(2.2rem,4vw,3.2rem);max-width:none}
.ag-hero-index .ag-regle{margin:18px 0}
.ag-page .ag-hero-index p{max-width:none;font-size:1.05rem;margin-bottom:14px}
.ag-hero-cote{border-left:1px solid rgba(255,255,255,.18);padding-left:40px}
/* .ag-page.ag-page : le reset .ag-page ul{margin:0} (0,1,1) annulait la marge et collait les boutons aux chiffres */
.ag-page.ag-page .ag-chiffres{display:flex;flex-direction:column;gap:18px;margin-bottom:32px}
.ag-page.ag-page .ag-chiffres li{display:flex;align-items:center;gap:16px;font-size:1rem;line-height:1.3;color:rgba(255,255,255,.85)}
.ag-chiffres strong{flex:none;min-width:3.6em;font-family:var(--titre);font-weight:700;font-size:2.2rem;line-height:1;color:#fff;
  border-left:5px solid var(--rouge);padding-left:12px}
/* Colonne étroite : boutons empilés, de même largeur */
.ag-hero-cote .ag-actions{flex-direction:column;align-items:stretch;max-width:300px}
.ag-page .ag-hero-cote .ag-btn{text-align:center}
/* Photo du hero d'index : plus atténuée, les chiffres passent par-dessus */
.ag-page.ag-page .ag-hero-index .ag-photo{opacity:.4}

/* ---- Page « Nos agences » : boutons a gauche, carte a droite ---- */
.ag-implantations > .ag-wrap > p{max-width:75ch;font-size:1.08rem}
.ag-implantations-grille{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:32px;align-items:stretch;margin-top:30px}
.ag-liste-agences{display:flex;flex-direction:column;gap:10px}
.ag-page.ag-page .ag-liste-agences a{display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:#fff;border-left:5px solid var(--rouge);border-radius:0 6px 6px 0;padding:12px 18px;
  box-shadow:0 1px 3px rgba(42,53,59,.12);text-decoration:none;color:var(--anthracite);
  font-family:var(--titre);font-weight:600;font-size:1.12rem;line-height:1.2;transition:background .15s,color .15s,transform .15s}
.ag-page.ag-page .ag-liste-agences a::after{content:"\203A";font-size:1.6rem;line-height:1;color:var(--rouge);transition:color .15s}
.ag-liste-agences small{display:block;font-family:var(--corps);font-weight:400;font-size:.85rem;color:var(--texte);margin-top:2px}
.ag-page.ag-page .ag-liste-agences a:hover,.ag-page.ag-page .ag-liste-agences a:focus-visible{background:var(--rouge);color:#fff;transform:translateX(4px)}
.ag-page.ag-page .ag-liste-agences a:hover::after,.ag-page.ag-page .ag-liste-agences a:focus-visible::after,
.ag-liste-agences a:hover small,.ag-liste-agences a:focus-visible small{color:#fff}
.ag-carte-agences{min-height:520px;height:100%;border-radius:6px;overflow:hidden;border-top:5px solid var(--rouge);
  box-shadow:0 1px 3px rgba(42,53,59,.10);background:var(--gris-clair);z-index:0}
/* Fond de carte desature : seuls les points rouges ressortent, comme sur la charte */
.ag-carte-agences .leaflet-tile-pane{filter:grayscale(1) contrast(.9) brightness(1.04)}
.ag-point{background:var(--rouge);border:3px solid #fff;border-radius:50%;box-shadow:0 1px 5px rgba(42,53,59,.45);
  transition:transform .15s,background .15s}
.ag-point:hover,.ag-point:focus-visible{background:var(--rouge-fonce);transform:scale(1.2)}
.ag-point:focus-visible{outline:3px solid var(--anthracite);outline-offset:2px}
.ag-point-siege{background:var(--anthracite);border-color:var(--rouge);border-width:4px}
.ag-page .ag-infobulle{font-family:var(--titre);font-weight:600;font-size:.95rem;color:var(--anthracite);
  border:0;border-radius:4px;box-shadow:0 2px 8px rgba(42,53,59,.25);padding:4px 10px}
.ag-page.ag-page .leaflet-control-attribution a{color:var(--anthracite)}
@media (max-width:860px){
  .ag-hero-grille{grid-template-columns:1fr;gap:28px}
  .ag-hero-cote{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.18);padding-top:24px}
  .ag-implantations-grille{grid-template-columns:1fr;gap:20px}
  .ag-carte-agences{min-height:380px;order:-1} /* sur mobile : la carte d'abord, la liste en dessous */
}

/* Info manquante a completer avant publication (visible en brouillon seulement) */
.ag-a-completer{background:#FFF3B0;color:#6B5600;padding:1px 6px;border-radius:3px;font-weight:600}

@media (max-width:860px){
  .ag-page section{padding:52px 0}
  .ag-duo .ag-grille{grid-template-columns:1fr;gap:32px}
}
@media (max-width:480px){
  .ag-wrap{padding:0 16px}
  .ag-joindre{padding:22px 18px}
  .ag-joindre dl{grid-template-columns:1fr;gap:2px 0}
  .ag-joindre dd{margin-bottom:10px}
}

/* Plan d'accès IGN des fiches agences (ingeo-agences-plan.js) */
.ag-plan{position:absolute;inset:0;z-index:0}
.ag-itineraire{margin:10px 0 0;font-size:.95rem}
.ag-page .ag-itineraire a{color:var(--rouge);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Communes desservies : en bas de la section « Nous joindre », pleine largeur, défilement latéral continu */
.ag-page .ag-duo{overflow:hidden}
.ag-defile{margin-top:48px;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.ag-defile-piste{display:flex;width:max-content;animation:ag-defile var(--duree,120s) linear infinite}
.ag-defile:hover .ag-defile-piste,.ag-defile:focus-within .ag-defile-piste{animation-play-state:paused}
.ag-page.ag-page .ag-defile ul{display:flex;gap:12px;margin:0;padding:0 6px 0 6px;list-style:none}
.ag-page.ag-page .ag-defile li{flex:none;margin:0;background:#fff;border:1px solid var(--filet);border-left:4px solid var(--rouge);border-radius:6px;
  padding:9px 16px;font-family:var(--titre);font-weight:600;font-size:1rem;color:var(--anthracite);white-space:nowrap}
@keyframes ag-defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Mouvement réduit demandé : pas d'animation, défilement à la main */
@media (prefers-reduced-motion:reduce){
  .ag-defile{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .ag-defile-piste{animation:none}
  .ag-defile ul[aria-hidden]{display:none}
}
/* Les calques Leaflet ont un z-index de 400 : sans contexte d'empilement propre, ils passeraient
   au-dessus du header fixe (z-index 99) pendant le défilement. */
.ag-carte,.ag-carte-agences{isolation:isolate}

/* =========================================================================
   Pages de contenu dans la charte agences (ex. « Notre politique QRSE ») :
   sections alternées, fiches illustrées, étapes numérotées.
   ========================================================================= */
.ag-page .ag-gris{background:var(--gris-clair)}
.ag-page .ag-intro{max-width:75ch;font-size:1.08rem;margin-bottom:16px}
.ag-fiches{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin-top:30px}
.ag-fiche{display:flex;flex-direction:column;background:#fff;border-top:5px solid var(--rouge);border-radius:0 0 6px 6px;
  box-shadow:0 1px 3px rgba(42,53,59,.10);overflow:hidden}
.ag-gris .ag-fiche{box-shadow:0 1px 3px rgba(42,53,59,.12)}
.ag-fiche-visuel{aspect-ratio:16/10;background:var(--gris-clair)}
.ag-page.ag-page .ag-fiche-visuel img{width:100%;height:100%;max-width:none;object-fit:cover;display:block}
/* Logos et pictogrammes : jamais recadrés */
.ag-fiche-logo{background:#fff;padding:22px 28px;border-bottom:1px solid var(--filet)}
.ag-page.ag-page .ag-fiche-logo img{object-fit:contain}
.ag-fiche-corps{padding:20px 22px 24px}
.ag-page.ag-page .ag-fiche h3{font-size:1.3rem;margin-bottom:8px}
.ag-fiche p{font-size:.98rem;margin-bottom:10px}
.ag-fiche p:last-child{margin-bottom:0}
.ag-page.ag-page .ag-fiche a{text-decoration:underline;text-underline-offset:2px}

/* Puces de la charte (flèche / rond alternés par ingeo-puces.php) */
.ag-page.ag-page .ag-puces{margin-top:6px}
.ag-page.ag-page .ag-puces li{position:relative;padding-left:22px;margin-bottom:8px;font-size:.98rem}
.ag-page .ag-puces li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--rouge)}

/* Étapes numérotées */
.ag-page.ag-page .ag-etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0 22px;padding:0;list-style:none;counter-reset:none}
.ag-page.ag-page .ag-etapes li{display:flex;align-items:center;gap:14px;background:var(--gris-clair);border-radius:6px;padding:16px 18px;
  font-family:var(--titre);font-weight:600;font-size:1.08rem;line-height:1.25;color:var(--anthracite)}
.ag-etapes span{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--rouge);color:#fff;font-size:1.15rem}
.ag-note{font-size:.95rem;color:var(--texte)}

/* Texte + logo côte à côte */
.ag-deux{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:center}
.ag-page.ag-page .ag-deux-logo{width:100%;max-width:300px;height:auto;justify-self:center;mix-blend-mode:multiply}

@media (max-width:860px){
  .ag-page.ag-page .ag-etapes{grid-template-columns:1fr 1fr}
  .ag-deux{grid-template-columns:1fr;gap:20px}
  .ag-page.ag-page .ag-deux-logo{max-width:200px}
}
@media (max-width:520px){
  .ag-page.ag-page .ag-etapes{grid-template-columns:1fr}
  .ag-fiches{grid-template-columns:1fr}
}