/*
Theme Name: AG Cleaning
Theme URI: https://www.agcleaning.be
Description: Thème WordPress personnalisé AG Cleaning — Design épuré corporate Bleu/Blanc/Orange, optimisé conversion et SEO.
Version: 1.1.0
Author: AG Cleaning
Author URI: https://www.agcleaning.be
Text Domain: agcleaning
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
*/
/* ═══════════════════════════════════════════════
   AG CLEANING — DESIGN SYSTEM
   Bleu · Blanc · Orange — Corporate & Épuré
═══════════════════════════════════════════════ */
/* ─── POLICES (auto-hébergées) ───────────────────────────────
   Sora et Playfair Display sont servies depuis ce thème et non depuis
   Google Fonts. Cela supprime du chemin critique du LCP la requête CSS
   bloquante vers fonts.googleapis.com ainsi que la connexion à froid vers
   fonts.gstatic.com : tout arrive désormais de l'origine (TTFB ~30 ms).

   Ne JAMAIS remettre d'@import ici — il sérialiserait les requêtes et
   rebloquerait le rendu. Les 2 fichiers latin sont préchargés depuis
   functions.php (agcleaning_preload_fonts).

   Déclarations reprises telles quelles de l'API Google Fonts CSS2 : mêmes
   descripteurs, mêmes unicode-range. Sora étant une police variable, ses
   5 graisses pointent volontairement vers le même fichier.
   Sous-ensembles retenus : latin + latin-ext (cyrillic et vietnamese écartés).
   Licence des deux familles : SIL Open Font License 1.1.
─────────────────────────────────────────────────────────────── */
/* Playfair Display — latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/playfair-display-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Playfair Display — latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/playfair-display-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Sora — latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Sora — latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Sora — latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Sora — latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Sora — latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Sora — latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Sora — latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Sora — latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Sora — latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Sora — latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Le systeme herite a disparu.
   28 variables, 297 usages, migrees vers --agc-* au chantier 5 en cinq lots,
   chacun mesure au pixel. La note du lot 4b sur les rayons et les ombres n'a
   plus d'objet : les jetons qu'elle protegeait sont partis avec leurs regles.

   Ce qui reste ici : rien. Les jetons du design system sont declares plus
   bas, dans le bloc `:root` prefixe --agc-*. */

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--agc-white); color: var(--agc-text); font-family: var(--agc-font); font-size: 16px; line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ─── NAV ─── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  background: rgba(255,255,255,.97); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--agc-border);
  height: var(--agc-nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5vw;
  transition: box-shadow .3s;
}
/* Sans ombre, c'est un filet qui detache la barre du contenu defilant. */
.nav.scrolled { border-bottom: 1px solid var(--agc-border); }
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo img { height: 38px; width: auto; }
.nav-logo-fallback {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--agc-font); font-size: 1rem; font-weight: 500;
  color: var(--agc-navy); text-decoration: none;
}
.nav-logo-fallback .logo-box {
  width: 36px; height: 36px; background: var(--agc-navy); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 500; color: var(--agc-white); letter-spacing: .02em;
}
.nav-logo-fallback span { color: var(--agc-orange); }
.nav-menu { display: flex; align-items: center; gap: 0; list-style: none; }
.nav-menu > li { position: relative; }
.nav-menu > li > a {
  display: flex; align-items: center; gap: 5px;
  padding: .5rem .9rem; font-size: .82rem; font-weight: 400;
  color: var(--agc-text-2); text-decoration: none;
  transition: color .2s; white-space: nowrap;
}
.nav-menu > li > a:hover { color: var(--agc-blue); }
.nav-menu > li > a .chevron { font-size: .6rem; opacity: .5; }
.nav-dropdown {
  display: none; position: absolute; top: 100%; left: 0;
  background: var(--agc-white); border: 1px solid var(--agc-border);
  border-radius: var(--agc-r-media); padding: .5rem 0;
  min-width: 220px; z-index: 100;
}
.nav-menu > li:hover .nav-dropdown { display: block; }
.nav-dropdown a {
  display: block; padding: .55rem 1.1rem;
  font-size: .82rem; color: var(--agc-text-2); text-decoration: none;
  transition: background .15s, color .15s;
}
.nav-dropdown a:hover { background: var(--agc-surface); color: var(--agc-blue); }
.nav-actions { display: flex; align-items: center; gap: .75rem; }
.nav-tel {
  font-size: .82rem; font-weight: 500; color: var(--agc-navy);
  text-decoration: none; display: flex; align-items: center; gap: 5px;
}
.nav-tel svg { width: 13px; height: 13px; }
.nav-cta {
  background: var(--agc-orange); color: var(--agc-white);
  font-size: .8rem; font-weight: 500; padding: .55rem 1.1rem;
  border-radius: var(--agc-r-card); text-decoration: none;
  letter-spacing: .02em; transition: background .2s, transform .15s;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--agc-orange-hover); transform: translateY(-1px); }
.nav-hamburger { display: none; background: none; border: none; cursor: pointer; padding: .4rem; }
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--agc-text-2); margin: 4px 0; border-radius: 2px; transition: .3s; }

/* ─── BREADCRUMB ─── */
.breadcrumb {
  padding: calc(var(--agc-nav-h) + 1rem) 5vw .75rem;
  font-size: .75rem; color: var(--agc-text-3);
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.breadcrumb a { color: var(--agc-text-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--agc-blue); }
.breadcrumb .sep { opacity: .4; }
.breadcrumb .current { color: var(--agc-text-2); font-weight: 500; }

/* ─── PAGE HERO (inner pages) ─── */
/* Le surtitre etait une pastille orange a 20 px de rayon. Un surtitre ne
   se met pas en pastille : texte seul, comme .agc-ds-eyebrow. Sur marine
   il prend l'orange clair — le marine plein y serait invisible. */

/* ─── BUTTONS ─── */
.btn-primary {
  background: var(--agc-orange); color: var(--agc-white);
  font-family: var(--agc-font); font-weight: 500; font-size: .9rem;
  padding: .8rem 1.6rem; border-radius: var(--agc-r-control);
  text-decoration: none; letter-spacing: .01em;
  transition: background .2s; display: inline-flex; align-items: center; gap: 7px;
  border: none; cursor: pointer;
}

/* ─── SECTION PATTERNS ─── */
.section { padding: 6rem 5vw; }

/* Surtitre en marine plein, graisse 500 : l'orange ne titre pas. */
.section-label {
  font-size: .68rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--agc-text); margin-bottom: .65rem; display: block;
}

.section-title {
  font-size: clamp(1.7rem, 2.8vw, 2.6rem); font-weight: 500;
  color: var(--agc-navy); line-height: 1.15; letter-spacing: -.02em; margin-bottom: .9rem;
}

/* ─── CARDS ─── */
.card {
  background: var(--agc-white); border: 1px solid var(--agc-border);
  border-radius: var(--agc-r-media); padding: 2rem;
  transition: all .25s; position: relative; overflow: hidden;
}
.card:hover { border-color: var(--agc-blue); }

.card:hover .card-accent-bar { transform: scaleX(1); }

.tag {
  font-size: .64rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  background: var(--agc-surface); color: var(--agc-blue); padding: .18rem .55rem; border-radius: 4px;
}

/* ─── LOGO BAR ─── */
.logo-bar { padding: 2.2rem 0; border-top: 1px solid var(--agc-border); border-bottom: 1px solid var(--agc-border); overflow: hidden; }

/* Le defilement automatique est retire : « nulle part sur le site ». Les
   deux degrades de bord n'existaient que pour estomper l'entree et la
   sortie des noms — sans defilement ils n'ont plus d'objet, et un degrade
   est proscrit. La liste se replie desormais sur plusieurs lignes. */
.logo-bar-inner { display: flex; flex-wrap: wrap; justify-content: center; row-gap: .4rem; }

/* ─── TESTIMONIAL ─── */
.tcard {
  background: var(--agc-white); border: 1px solid var(--agc-border); border-radius: var(--agc-r-media);
  padding: 2rem; transition: all .25s; position: relative; overflow: hidden;
}
.tcard:hover { border-color: var(--agc-blue); }

.tcard-role { font-size: .73rem; color: var(--agc-text-3); }

/* ─── FORM ─── */
.form-card {
  background: var(--agc-white); border: 1px solid var(--agc-border);
  border-radius: var(--agc-r-media); padding: 2.2rem;
}
.form-card h3 { font-size: 1.1rem; font-weight: 500; color: var(--agc-navy); margin-bottom: .3rem; }

.fgroup label { display: block; font-size: .7rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--agc-text-2); margin-bottom: .35rem; }
.fgroup input, .fgroup select, .fgroup textarea {
  width: 100%; border: 1.5px solid var(--agc-border); border-radius: var(--agc-r-card);
  background: var(--agc-white); color: var(--agc-text); font-family: var(--agc-font);
  font-size: .88rem; padding: .65rem .85rem; outline: none;
  transition: border-color .2s, box-shadow .2s; appearance: none;
}
.fgroup input:focus, .fgroup select:focus, .fgroup textarea:focus {
  border-color: var(--agc-blue); box-shadow: 0 0 0 3px rgba(59,114,196,.1);
}
.fgroup textarea { resize: vertical; min-height: 85px; }
.fgroup select option { background: var(--agc-white); }

/* Mention d'information sur le traitement des donnees (RGPD, article 13). */
.form-legal { font-size: .68rem; line-height: 1.55; color: var(--agc-text-3); margin-top: .8rem; text-align: center; }
.form-legal a { color: var(--agc-orange-hover); text-decoration: underline; }

/* Champ pot de miel : retire visuellement et du parcours clavier, mais present
   dans le DOM pour piéger les robots. On evite display:none, que certains
   robots detectent pour ignorer le champ. */
.agc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-success h3 { font-size: 1.2rem; font-weight: 500; color: var(--agc-navy); margin-bottom: .4rem; }
.form-success p { font-size: .85rem; color: var(--agc-text-3); }

/* ─── CTA BAND ─── */
.cta-band {
  background: var(--agc-navy); padding: 4rem 5vw;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.cta-band h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 500; color: var(--agc-white); line-height: 1.2; }
.cta-band p { font-size: .9rem; color: rgba(255,255,255,.55); margin-top: .4rem; }

/* ─── PROMISE LIST ─── */
.promise-list { display: flex; flex-direction: column; gap: .65rem; }

/* ─── FAQ ─── */
.faq-item { border-bottom: 1px solid var(--agc-border); }
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 0; font-family: var(--agc-font); font-size: .92rem;
  font-weight: 500; color: var(--agc-navy); text-align: left;
}
.faq-q .faq-icon { font-size: .9rem; color: var(--agc-orange); transition: transform .3s; flex-shrink: 0; margin-left: 1rem; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

.faq-item.open .faq-a { display: block; }

/* ─── FOOTER ─── */
footer {
  background: var(--agc-navy); color: var(--agc-white);
  padding: 5rem 5vw 2.5rem;
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.6rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 2rem; }
.footer-brand-logo img { height: 36px; width: auto; margin-bottom: .9rem; filter: brightness(0) invert(1); }
.footer-brand-desc { font-size: .83rem; color: rgba(255,255,255,.62); line-height: 1.75; font-weight: 300; max-width: 270px; margin-bottom: 1.3rem; }
.footer-social { display: flex; gap: .5rem; margin-top: 1.2rem; }
.social-btn { width: 33px; height: 33px; background: rgba(255,255,255,.07); border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: .8rem; text-decoration: none; color: rgba(255,255,255,.6); transition: background .2s, color .2s; }
.social-btn:hover { background: rgba(186,79,13,.25); color: var(--agc-white); }
/* Bloc de credibilite — filet, puis trois faits verifiables. Les icones
   prennent l'orange sur marine : #ba4f0d y tombe a 3,29:1, en echec. */
.footer-cred { list-style: none; margin: 1.3rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--agc-navy-line); }
.footer-cred li { display: flex; gap: .5rem; align-items: flex-start; font-size: .8rem; line-height: 1.5; color: var(--agc-navy-text); margin-bottom: .45rem; }
.footer-cred li:last-child { margin-bottom: 0; }
.footer-cred svg { width: 14px; height: 14px; color: var(--agc-orange-on-navy); flex: none; margin-top: .25rem; }
.footer-col h2 { font-size: .66rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: .9rem; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: .45rem; }
.footer-col ul a { font-size: .83rem; color: rgba(255,255,255,.5); text-decoration: none; transition: color .2s; font-weight: 300; }
.footer-col ul a:hover { color: var(--agc-orange); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: .73rem; color: rgba(255,255,255,.55); flex-wrap: wrap; gap: .5rem 1.5rem; }
.footer-mention { margin: 0; }
/* Les liens legaux : une ligne a droite, qui se replie plutot que de deborder.
   `column-gap` porte le separateur visuel, pas un caractere — un « · » ecrit
   entre deux liens se retrouve lu par les lecteurs d'ecran. */
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem; justify-content: flex-end; }
.footer-legal a { color: rgba(255,255,255,.7); text-decoration: none; transition: color .2s; }
.footer-legal a:hover { color: var(--orange); }
.footer-bottom a { color: rgba(255,255,255,.7); text-decoration: none; }
.footer-bottom a:hover { color: var(--agc-orange); }

/* ─── SCROLL REVEAL ─── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s cubic-bezier(.25,.46,.45,.94), transform .65s cubic-bezier(.25,.46,.45,.94); }
.reveal.in { opacity: 1; transform: none; }
 .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; } .d4 { transition-delay: .32s; }

/* ─── ZONE VISUAL ─── */
.ring-wrap { position: relative; display: flex; align-items: center; justify-content: center; height: 340px; }
.ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); animation: rpulse 5s ease-in-out infinite; }

@keyframes rpulse { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:.9;transform:scale(1.04)} }

/* ─── RESPONSIVE ─── */
@media(max-width:980px){
  .nav-menu,.nav-tel{display:none}
  .nav-hamburger{display:block}

}
/* Le pied se replie a 900 px, pas a 980 : entre les deux, quatre colonnes
   tiennent encore, alors que la navigation est deja passee en menu. */
@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .section,.section-sm{padding:4rem 1.2rem}
  footer{padding:4rem 1.2rem 2rem}
  .nav{padding:0 1.2rem}
  .footer-grid{grid-template-columns:1fr;gap:2.2rem}
  .footer-bottom{flex-direction:column;text-align:center}
  .footer-legal{justify-content:center}

  .cta-band{flex-direction:column;text-align:center}

  .breadcrumb{padding-left:1.2rem;padding-right:1.2rem}
}

/* ─────────────────────────────────────────
   COMPOSANTS SPÉCIFIQUES AG CLEANING
   (sans !important — Homedroid désactivé)
───────────────────────────────────────── */

/* Logo dans la nav */
.nav-logo img,
.nav-logo .custom-logo {
  height: 42px;
  width: auto;
  max-height: 42px;
  max-width: 200px;
  display: block;
}
.custom-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* Logo dans le footer */
.footer-brand-logo img,
.footer-brand-logo .custom-logo {
  height: 36px;
  width: auto;
  max-height: 36px;
  filter: brightness(0) invert(1);
}

/* Barre admin WordPress */
.admin-bar .nav {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .nav { top: 46px; }
}

/* ── GRILLES AG CLEANING ── */
.agc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

/* ── CARDS SERVICES & BLOG ── */
.agc-card {
  display: block;
  background: #fff;
  border: 1px solid #e5e9f0;
  border-radius: var(--agc-r-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .25s, transform .25s;
}
.agc-card:hover {
  box-shadow: 0 4px 16px rgba(13,31,60,.1);
  transform: translateY(-3px);
}

.agc-card-img img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
}

.agc-card-body p,
.agc-card-body h3 {
  display: block;
  width: auto;
  white-space: normal;
  word-break: normal;
}

/* ── TÉMOIGNAGES ── */
.agc-tcard {
  background: #fff;
  border: 1px solid #e5e9f0;
  border-radius: var(--agc-r-card);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: box-shadow .25s, transform .25s;
}
.agc-tcard:hover { border-color: var(--agc-blue); }
.agc-tcard p {
  display: block;
  white-space: normal;
  word-break: normal;
  line-height: 1.75;
}
.agc-author {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .75rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e9f0;
  margin-top: 1.5rem;
}
.agc-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 500;
  color: #fff;
  flex-shrink: 0;
}

/* ── HERO ── */
.hero {
  padding: calc(var(--agc-nav-h) + 3rem) 5vw 0;
  min-height: 92vh;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 3rem;
  position: relative;
  overflow: hidden;
  background: var(--agc-white);
}
.hero::after {
  content: '';
  position: absolute;
  /* Halo radial retire : degrade decoratif. La regle est conservee vide
     pour ne pas casser le positionnement de ce qui l'entoure. */
  display: none;
}

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }
.hero h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.8rem); font-weight: 500;
  line-height: 1.08; letter-spacing: -.025em; color: var(--agc-navy); margin-bottom: 1.3rem;
}
.hero-sub {
  font-size: 1rem; color: var(--agc-text-3); max-width: 480px;
  line-height: 1.78; font-weight: 300; margin-bottom: 2.2rem;
}
.hero-actions { display: flex; gap: .85rem; flex-wrap: wrap; margin-bottom: 2.2rem; }

/* ── HERO VISUEL ── */
.hero-right { position: relative; z-index: 1; }

.stat-bubble:nth-of-type(2) { bottom: 105px; left: -24px; animation-delay: 0s; }
.stat-bubble:nth-of-type(3) { bottom: 38px; right: 0; animation-delay: 2s; }
.stat-bubble:nth-of-type(4) { top: 258px; right: -14px; animation-delay: 4s; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }

.sb-icon.orange { background: var(--agc-warm-bg); }

/* ── GRILLES AUTRES ── */
.services-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.4rem; }

.bcard-img img { width: 100%; height: 160px; object-fit: cover; display: block; }

/* ── PROCESS ── */
.process-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.8rem; position: relative; }

/* Le double anneau etait dessine en box-shadow pour masquer le trait de
   liaison derriere la pastille. Une bordure blanche epaisse fait la meme
   chose, sans ombre. */
.pstep-num { width: 44px; height: 44px; border-radius: var(--agc-r-card); background: var(--agc-navy); color: var(--agc-white); font-size: .88rem; font-weight: 500; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.3rem; position: relative; z-index: 1; border: 4px solid var(--agc-white); }

.pstep h3 { font-size: .9rem; font-weight: 500; color: var(--agc-navy); margin-bottom: .5rem; }
.pstep p { font-size: .81rem; color: var(--agc-text-3); line-height: 1.65; font-weight: 300; }

/* ── ZONES ── */
.zones-grid-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; align-items: center; }

/* ── CONTENT GRID (pages internes) ── */
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 3rem; align-items: start; }

.sidebar-cta h4 { font-size: .95rem; font-weight: 500; margin-bottom: .4rem; }
.sidebar-cta p { font-size: .8rem; color: rgba(255,255,255,.55); margin-bottom: 1.1rem; font-weight: 300; }

.sidebar-contact h4 { font-size: .8rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--agc-text-3); margin-bottom: .9rem; }
.sidebar-contact a { display: flex; align-items: center; gap: .6rem; font-size: .87rem; color: var(--agc-text-2); text-decoration: none; margin-bottom: .6rem; transition: color .2s; }
.sidebar-contact a:hover { color: var(--agc-blue); }

/* ════════════════════════════════════════════════════════════════
   CONTENU EDITORIAL — .entry-content

   S'applique a la sortie de the_content() dans page-service.php,
   page-zones.php et page-services.php, colonne de 760 px.

   .prose est aliasee sur .entry-content via :is(). Elle etait posee dans
   7 gabarits sans etre definie nulle part : single.php, page.php, index.php
   et single-realisation.php ne portent QUE .prose, leur contenu n'avait donc
   aucun style — les 11 articles de blog compris.

   :is() plutot que de dupliquer chaque selecteur : la specificite est
   inchangee, les deux arguments etant des classes. .entry-content reste en
   premier, c'est la classe de reference.

   Orange : var(--agc-orange) #ba4f0d et non #f07224. Voir le commentaire
   des variables en tete de fichier — l'orange vif plafonne a 2.94:1 sur
   blanc et echoue WCAG AA, y compris le seuil 3:1 du non-textuel.
════════════════════════════════════════════════════════════════ */

/* ── Titres ── */
/* Le H1 du hero est en clamp(2rem, 4vw, 3.2rem), le corps a 1rem.
   Le H2 se cale entre les deux, et non a 1.5rem fixe comme avant. */
:is(.entry-content, .prose) h2 {
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--agc-navy);
  margin: 3.2rem 0 1rem;
  padding-top: 1rem;
  position: relative;
}
/* Filet orange court au-dessus du titre. Purement decoratif :
   aria-hidden implicite, aucune information ne repose dessus. */
:is(.entry-content, .prose) h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 3px;
  border-radius: 2px;
  background: var(--agc-orange);
}
/* Pas de marge superieure sur le tout premier titre du contenu. */
:is(.entry-content, .prose) > h2:first-child { margin-top: 0; }

:is(.entry-content, .prose) h3 {
  font-size: clamp(1.08rem, 1.5vw, 1.22rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--agc-navy);
  margin: 2rem 0 .6rem;
}
:is(.entry-content, .prose) h4 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--agc-text-2);
  margin: 1.5rem 0 .5rem;
}

/* ── Paragraphes ── */
/* Longueur de ligne ramenee a environ 72 caracteres.
   Attention au piege de l'unite ch : elle mesure l'avance du glyphe « 0 »,
   soit 12.00 px en Sora 16 px, alors que la largeur moyenne reelle d'un
   caractere en francais courant est de 8.31 px — mesure faite sur la page.
   « 72ch » vaudrait donc 864 px, plus large que la colonne de 760 px, et
   n'aurait aucun effet. 50ch = 598 px = environ 72 caracteres.
   La colonne de 760 px en laisse passer 91 sans cette regle.
   Les titres, listes et tableaux gardent la pleine largeur. */
:is(.entry-content, .prose) p {
  margin-bottom: 1.2rem;
  line-height: 1.75;
  max-width: 68ch;
}
:is(.entry-content, .prose) > *:last-child { margin-bottom: 0; }

/* ── Listes ── */
/* Puces orange obtenues par ::marker plutot que par une image de fond :
   la puce reste alignee sur la premiere ligne quel que soit le zoom. */
:is(.entry-content, .prose) ul,
:is(.entry-content, .prose) ol {
  padding-left: 1.35rem;
  margin-bottom: 1.4rem;
  max-width: 70ch; /* legerement plus large que les p : le retrait des puces mange 1.35rem */
}
:is(.entry-content, .prose) ul { list-style: disc; }
:is(.entry-content, .prose) ol { list-style: decimal; }
:is(.entry-content, .prose) ul li,
:is(.entry-content, .prose) ol li {
  margin-bottom: .55rem;
  line-height: 1.7;
  padding-left: .25rem;
}
:is(.entry-content, .prose) ul li::marker { color: var(--agc-orange); font-size: 1.05em; }
:is(.entry-content, .prose) ol li::marker { color: var(--agc-orange); font-weight: 500; }
:is(.entry-content, .prose) li > ul,
:is(.entry-content, .prose) li > ol { margin: .55rem 0 0; }

/* ── Emphase et liens ── */
:is(.entry-content, .prose) strong { font-weight: 500; color: var(--agc-navy); }
:is(.entry-content, .prose) em { font-style: italic; color: var(--agc-text-2); }
/* Souligne discret : le lien reste identifiable sans surcharger le
   paragraphe. Au survol et au focus il passe a l'orange et le trait
   s'epaissit. */
:is(.entry-content, .prose) a {
  color: var(--agc-blue);
  text-decoration: underline;
  text-decoration-color: var(--agc-navy-text);
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  transition: color .15s, text-decoration-color .15s;
}
:is(.entry-content, .prose) a:hover,
:is(.entry-content, .prose) a:focus-visible {
  color: var(--agc-orange);
  text-decoration-color: var(--agc-orange);
  text-decoration-thickness: 2px;
}
:is(.entry-content, .prose) a:focus-visible {
  outline: 2px solid var(--agc-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Citation ── */
:is(.entry-content, .prose) blockquote {
  margin: 2rem 0;
  padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--agc-orange);
  color: var(--agc-text-2);
  font-style: italic;
  max-width: 68ch;
}
:is(.entry-content, .prose) blockquote p:last-child { margin-bottom: 0; }

/* ── Tableaux ──
   Aucune regle de tableau n'existait : un tableau debordait de la
   colonne de 760 px, sans defilement.

   Le defilement horizontal est porte par le conteneur, jamais par la
   page. Deux cas couverts :
   - bloc Tableau de l'editeur -> <figure class="wp-block-table">
   - tableau colle en HTML brut -> :is(.entry-content, .prose) > table, via
     display:block, seule facon de rendre un <table> defilable sans
     conteneur parent.
   tabindex="0" n'est pas pose ici : Firefox et Chrome rendent
   focalisables les conteneurs defilants depuis 2022, le clavier peut
   donc faire defiler la zone. */
:is(.entry-content, .prose) figure.wp-block-table,
:is(.entry-content, .prose) .table-scroll {
  margin: 2rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
:is(.entry-content, .prose) > table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 2rem 0;
}
:is(.entry-content, .prose) table {
  border-collapse: collapse;
  width: 100%;
  font-size: .92rem;
  background: var(--agc-white);
  border: 1px solid var(--agc-border);
  border-radius: var(--agc-r-card);
}
:is(.entry-content, .prose) thead th,
:is(.entry-content, .prose) table th {
  background: var(--agc-surface);
  color: var(--agc-navy);
  font-weight: 500;
  text-align: left;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .85rem 1rem;
  border-bottom: 2px solid var(--agc-border-chip);
  white-space: nowrap;
}
:is(.entry-content, .prose) table td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--agc-border);
  line-height: 1.65;
  color: var(--agc-text-2);
  vertical-align: top;
}
:is(.entry-content, .prose) table tbody tr:last-child td { border-bottom: none; }
:is(.entry-content, .prose) table tbody tr:nth-child(even) { background: var(--agc-surface); }
:is(.entry-content, .prose) table caption {
  caption-side: bottom;
  font-size: .8rem;
  color: var(--agc-text-3);
  padding-top: .6rem;
  text-align: left;
}
/* Le bloc Tableau de l'editeur ajoute sa propre legende. */
:is(.entry-content, .prose) .wp-block-table figcaption {
  font-size: .8rem;
  color: var(--agc-text-3);
  margin-top: .6rem;
}

/* ── Medias et separateurs ── */
:is(.entry-content, .prose) img { max-width: 100%; height: auto; border-radius: var(--agc-r-card); }
:is(.entry-content, .prose) figure { margin: 2rem 0; }
:is(.entry-content, .prose) figure img { display: block; }
:is(.entry-content, .prose) hr {
  border: none;
  border-top: 1px solid var(--agc-border);
  margin: 2.5rem 0;
}

@media (max-width: 600px) {
  :is(.entry-content, .prose) h2 { margin-top: 2.4rem; }
  :is(.entry-content, .prose) table { font-size: .86rem; }
  :is(.entry-content, .prose) thead th,
  :is(.entry-content, .prose) table th,
  :is(.entry-content, .prose) table td { padding: .7rem .8rem; }
}

/* ── RESPONSIVE ── */
@media(max-width: 980px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-bottom: 4rem; }

  .agc-grid { grid-template-columns: 1fr; }

}
@media(max-width: 600px) {
  .agc-grid { grid-template-columns: 1fr; }

}

@media (max-width: 980px) {
  .hero::after {
    display: none;
  }
}

@media (max-width: 768px) {
  .agc-grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .agc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {

}
@media (max-width: 640px) {

}

@media (max-width: 768px) {
  .agc-2col {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

@media (max-width: 768px) {
}
/* ════════════════════════════════════════════════════════════════
   IMAGE DE HERO — modele Page Service (facultative)

   Rendue seulement si une image est choisie dans wp-admin. Sans image,
   la colonne droite ne porte pas la classe --media et rien de ce bloc
   ne s'applique : le hero reste identique a l'existant.
════════════════════════════════════════════════════════════════ */

/* Sous 768 px, la regle existante masque toute la colonne droite, carte
   comprise. On la reaffiche uniquement quand elle porte une image — sinon
   l'element LCP serait telecharge puis jamais montre — et on garde la carte
   masquee, comme aujourd'hui. */
@media (max-width: 768px) {
  /* « div » est indispensable dans le selecteur : la regle existante
     .agc-hero-grid > div:last-child pese (0,2,1). Sans lui on serait a (0,2,0)
     et la colonne resterait masquee — l'image serait alors telechargee en
     priorite haute sans jamais s'afficher. A egalite, c'est l'ordre du fichier
     qui tranche, et ce bloc vient apres. */
}

/* ════════════════════════════════════════════════════════════════
   COMPARATEUR AVANT / APRES — modele Page Service

   Sort uniquement quand les deux photos sont renseignees.
   Le curseur est un <input type="range"> natif rendu transparent :
   clavier, tactile et semantique ARIA sont fournis par le navigateur.
════════════════════════════════════════════════════════════════ */
.agc-ba { margin: 0; }
.agc-ba-stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--agc-r-media);
  line-height: 0; /* supprime l'espace sous les images inline */
  background: var(--agc-surface);
  /* --pos est pilote par le script ; 50 % au chargement, ce qui correspond
     a la valeur initiale de l'input range. Aucun saut au premier rendu. */
  --pos: 50%;
}
.agc-ba-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* Les deux volets se superposent. « avant » dans le flux donne la hauteur,
   « apres » par-dessus, devoilee par la droite. */
.agc-ba-pane { position: relative; }
.agc-ba-after {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--pos));
}
.agc-ba-after .agc-ba-img { height: 100%; }

.agc-ba-tag {
  position: absolute;
  top: .8rem;
  z-index: 2;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: 20px;
  line-height: 1.4;
  color: var(--agc-white);
  background: rgba(13, 31, 60, .78);
  pointer-events: none;
}
.agc-ba-tag--before { left: .8rem; }
.agc-ba-tag--after  { right: .8rem; background: rgba(186, 79, 13, .88); }

/* Poignee visible. Purement decorative : c'est l'input qui recoit le focus. */
.agc-ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  margin-left: -1.5px;
  background: var(--agc-white);
  box-shadow: 0 0 0 1px rgba(13, 31, 60, .25);
  z-index: 3;
  pointer-events: none;
}
.agc-ba-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--agc-white) center / 18px 18px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1f3c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6 3 12l6 6M15 6l6 6-6 6'/%3E%3C/svg%3E");
  border: 1px solid var(--agc-border-chip);
}

.agc-ba-range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: ew-resize;
}
.agc-ba-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 44px;   /* zone de saisie confortable au doigt */
  height: 44px;
  border-radius: 50%;
  background: transparent;
  cursor: ew-resize;
}
.agc-ba-range::-moz-range-thumb {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: ew-resize;
}
.agc-ba-range::-moz-range-track { background: none; }
/* Anneau de focus porte par le conteneur : le pouce etant transparent,
   un outline sur l'input seul serait invisible. */
.agc-ba-range:focus-visible {
  outline: none;
}
.agc-ba-stage:has(.agc-ba-range:focus-visible) {
  outline: 3px solid var(--agc-blue);
  outline-offset: 3px;
}

.agc-ba-caption {
  margin: .9rem 0 0;
  font-size: .82rem;
  color: var(--agc-text-3);
  text-align: center;
  font-weight: 300;
  line-height: 1.6;
}

/* ── Repli mobile ──
   Sous 700 px, la zone de glissement devient trop etroite pour etre
   manipulable au doigt : on abandonne le comparateur et on presente les deux
   photos cote a cote, chacune etiquetee. Le curseur et la poignee disparaissent
   du rendu ET du parcours clavier. */
@media (max-width: 700px) {
  .agc-ba-stage {
    display: grid;
    grid-template-columns: 1fr;   /* empilement : cote a cote, chaque photo
                                     ne ferait que 174 px de large a 390 px,
                                     trop petit pour lire un detail */
    gap: .6rem;
    overflow: visible;
    box-shadow: none;
    background: none;
  }
  .agc-ba-pane {
    border-radius: var(--agc-r-card);
    overflow: hidden;
  }
  .agc-ba-after {
    position: static;
    clip-path: none;
  }
  .agc-ba-after .agc-ba-img { height: auto; }
  .agc-ba-range,
  .agc-ba-handle { display: none; }
  .agc-ba-tag {
    top: auto;
    bottom: .5rem;
    font-size: .62rem;
  }
  .agc-ba-tag--before { left: .5rem; }
  .agc-ba-tag--after  { left: .5rem; right: auto; }
}

/* ════════════════════════════════════════════════════════════════
   CARROUSEL GALERIE — modele Page Service

   Aspect repris a l'identique de la version precedente : piste en flex,
   vues de 420 px, fleches rondes de 40 px, puces de 8 px.
   Ce qui change : plus de defilement automatique, des libelles
   accessibles, et un focus clavier visible.
════════════════════════════════════════════════════════════════ */
.agc-gal { position: relative; overflow: hidden; border-radius: 14px; }
.agc-gal-track {
  display: flex;
  transition: transform .4s ease;
  will-change: transform;
}
.agc-gal-slide { min-width: 100%; height: 420px; flex-shrink: 0; }
.agc-gal-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.agc-gal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--agc-navy);
  border: 1px solid var(--agc-border-chip);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.agc-gal-arrow--prev { left: 1rem; }
.agc-gal-arrow--next { right: 1rem; }
.agc-gal-arrow:hover { background: #fff; }

.agc-gal-dots {
  position: absolute;
  bottom: .8rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .4rem;
  z-index: 2;
}
.agc-gal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, .5);
  transition: background .2s;
}
.agc-gal-dot[aria-selected="true"] { background: #fff; }

/* Les commandes sont posees sur la photo : un contour seul serait parfois
   illisible. On double d'un halo sombre pour garantir le contraste. */
.agc-gal-arrow:focus-visible,
.agc-gal-dot:focus-visible {
  outline: 3px solid var(--agc-white);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(13, 31, 60, .55);
}

@media (prefers-reduced-motion: reduce) {
  .agc-gal-track { transition: none; }
}
@media (max-width: 700px) {
  .agc-gal-slide { height: 260px; }
}

/* ════════════════════════════════════════════════════════════════════════
   LOT 0 — VOCABULAIRE DU DESIGN SYSTEM

   Source : AG-Cleaning_Specification-Design.md, validee le 29/07/2026.

   CE BLOC EST VOLONTAIREMENT INERTE. Il declare des variables et des classes
   que RIEN n'utilise encore : aucun gabarit ne porte de classe agc-ds-*, et
   les variables --agc-* ne sont referencees que dans ce bloc. Le rendu du site
   est donc rigoureusement inchange. Les lots suivants viendront appliquer ce
   vocabulaire, section par section.

   Prefixe agc-ds- : « agc-card » existe deja dans le theme (grille du blog) et
   designe autre chose que la carte de la specification. Le prefixe evite la
   collision pendant la transition et se supprimera d'un seul remplacement le
   jour ou l'ancien composant disparaitra.
════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Marine ── */
  /* ── Reprises du systeme herite, sans equivalent --agc-* ──
     Elles n'avaient pas de correspondance : plutot que d'en inventer une
     approchante, on les reprend a l'identique sous le bon prefixe. Aucune
     valeur ne change. */
  --agc-white:           #ffffff;
  --agc-orange-hover:    #9d430b;
  --agc-font:            'Sora', sans-serif;
  --agc-nav-h:           68px;
  --agc-r-media:         6px;

  --agc-navy:            #0D1F3C;
  --agc-navy-line:       #24405F;
  --agc-navy-text:       #A9B8CE;
  /* --agc-navy-line ne monte qu'a 1,6:1 sur marine : c'est un separateur, il
     doit s'effacer. Un contour de composant, lui, doit se voir — 3,4:1 ici,
     au-dessus du seuil de 3:1 des elements non textuels. Ne pas confondre. */
  --agc-navy-contour:    rgba(255, 255, 255, .4);

  /* ── Accent ──
     Deux valeurs, deux contextes. --agc-orange ne tient pas le contraste sur
     marine : 3.29:1, en echec AA pour du texte. Sur marine, et seulement la,
     utiliser --agc-orange-on-navy, qui monte a 6.28:1.
     Contrastes releves : orange 4.99 sur blanc, 4.65 sur surface, 4.59 sur
     warm-bg, 4.99 pour du blanc pose dessus. */
  --agc-orange:          #ba4f0d;
  --agc-orange-on-navy:  #e08c4f;
  --agc-blue:            #1B447D;

  /* ── Fonds — trois seulement : blanc, surface, marine ── */
  --agc-surface:         #f5f7fa;
  --agc-surface-alt:     #e9eef4;
  --agc-warm-bg:         #fdf4ec;
  --agc-warm-border:     #f2ddc9;

  /* ── Filets ── */
  --agc-border:          #e2e8f0;
  --agc-border-soft:     #eef2f6;
  --agc-border-chip:     #dbe2ea;

  /* ── Texte — 7.00, 5.67 et 16.43 sur blanc ── */
  --agc-text:            #0D1F3C;
  --agc-text-2:          #4d5a6d;
  --agc-text-3:          #5d6875;

  --agc-media:           #dde2e8;

  /* ── Rayons — jamais au-dela de 4 px ── */
  --agc-r-control:       3px;
  --agc-r-card:          4px;

  /* ── Grille ── */
  --agc-container:       1200px;
  --agc-measure:         min(820px, 100%);  /* environ 100 caracteres en Sora 16 px,
                                    mesure sur la page : 8.31 px par caractere.
                                    Ne pas ecrire 72ch, qui vaudrait 864 px —
                                    l'unite ch mesure le glyphe « 0 » (12 px). */
}

/* ── Le systeme herite a disparu — chantier 5 ──
   28 variables, 297 usages, migres en cinq lots mesures au pixel.

   Trois etaient IDENTIQUES : --blue-900, --orange, --radius.
   Cinq n'avaient AUCUN equivalent et ont ete reprises telles quelles sous le
   bon prefixe : --agc-white, --agc-orange-hover, --agc-font, --agc-nav-h,
   --agc-r-media.
   Les quatorze autres etaient PROCHES MAIS DIFFERENTES. Chacune a change une
   couleur, et c'etait le but : aligner le site sur le design system. L'ecart
   le plus visible, --gray-500 vers --agc-text-3 sur le texte courant, fait
   MONTER le contraste de 4,83:1 a 5,67:1.

   Ne jamais substituer une variable par simple ressemblance de nom :
   --gray-50 et --agc-surface different de 8 unites, --gray-600 et
   --agc-text-2 de 5. Invisible sur une bordure, visible sur un aplat. */

/* ════════ Typographie ════════
   Sora, graisses 300 / 400 / 500. Aucune graisse au-dela de 500 : le theme
   actuel utilise 147 fois 600 a 800, ce sera l'objet du lot 4. */
.agc-ds-h1 {
  font-size: clamp(2rem, 3.4vw, 2.85rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.03em;
  color: var(--agc-text);
}
.agc-ds-h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--agc-text);
}
.agc-ds-h3 {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--agc-text);
}
/* Le surtitre est en marine plein, ni bleu moyen ni orange : l'orange ne titre pas. */
.agc-ds-eyebrow {
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--agc-text);
}
.agc-ds-body  { font-size: 1rem;    font-weight: 300; line-height: 1.72; color: var(--agc-text-2); }
.agc-ds-lede  { font-size: 1.15rem; font-weight: 300; line-height: 1.7;  color: var(--agc-text); }
.agc-ds-caption { font-size: .8rem; font-weight: 300; line-height: 1.5;  color: var(--agc-text-3); }

/* Sur fond marine, le texte courant bascule sur --agc-navy-text (8.16:1). */
.agc-ds-on-navy .agc-ds-h1,
.agc-ds-on-navy .agc-ds-h2,
.agc-ds-on-navy .agc-ds-h3,
.agc-ds-on-navy .agc-ds-eyebrow { color: var(--agc-white); }
.agc-ds-on-navy .agc-ds-body,
.agc-ds-on-navy .agc-ds-caption { color: var(--agc-navy-text); }

/* ════════ Grille ════════
   Le texte est plus etroit que les modules : c'est ce contraste de largeur qui
   donne le rythme. Un module peut sortir de la colonne de texte. */
/* Le conteneur porte la respiration laterale, comme `.wrap` de la maquette :
   1200 px de large, 5vw de retrait de chaque cote — soit 1056 px de contenu
   a 1440 px de viewport. Sans ce retrait, le contenu faisait 1200 px et
   toutes les grilles etaient 14 % plus larges que la reference. */
.agc-ds-container { max-width: var(--agc-container); margin-inline: auto; padding-inline: 5vw; }
.agc-ds-measure   { max-width: var(--agc-measure); }
.agc-ds-section   { padding: 4rem 5vw; }
.agc-ds-section--surface { background: var(--agc-surface); border-top: 1px solid var(--agc-border); border-bottom: 1px solid var(--agc-border); }
/* Pas de bordure sur la bande marine. `--agc-border` vaut #e2e8f0, un gris
   clair pense pour separer deux surfaces claires ; pose au bord du marine,
   il y dessine un filet clair au lieu de s'effacer. La bande se separe deja
   de ce qui l'entoure par son fond — une bordure en plus n'a rien a
   delimiter. La variante --surface, elle, garde les siennes : c'est la
   qu'elles servent, entre deux blancs. */
.agc-ds-section--navy    { background: var(--agc-navy); }

/* ════════ Boutons ════════
   La classe est doublee pour peser (0,2,0). En dessous, la typographie
   editoriale reprend la main : `:is(.entry-content, .prose) a` pese
   (0,1,1) et repeignait le libelle en --agc-blue — texte bleu sur fond
   orange. Un bouton pose dans du contenu redige doit rester un bouton. */
.agc-ds-btn.agc-ds-btn {
  display: inline-block;
  background: var(--agc-orange);
  color: var(--agc-white);
  border: 1px solid var(--agc-orange);
  border-radius: var(--agc-r-control);
  padding: .8rem 1.4rem;
  font-size: .95rem;
  font-weight: 400;
  font-family: var(--agc-font);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.agc-ds-btn.agc-ds-btn:hover { background: var(--agc-orange-hover); border-color: var(--agc-orange-hover); }
.agc-ds-btn--secondary.agc-ds-btn--secondary {
  background: var(--agc-white);
  color: var(--agc-text);
  border-color: var(--agc-border-chip);
}
.agc-ds-btn--secondary.agc-ds-btn--secondary:hover { background: var(--agc-surface); }
.agc-ds-on-navy .agc-ds-btn--secondary.agc-ds-btn--secondary { background: none; color: var(--agc-white); border-color: var(--agc-navy-contour); }
.agc-ds-on-navy .agc-ds-btn--secondary.agc-ds-btn--secondary:hover { background: var(--agc-navy-line); }
.agc-ds-btn:focus-visible {
  outline: 2px solid var(--agc-blue);
  outline-offset: 2px;
}
.agc-ds-on-navy .agc-ds-btn:focus-visible { outline-color: var(--agc-white); }

/* ════════ Chip de confiance ════════ */
.agc-ds-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--agc-white);
  border: 1px solid var(--agc-border-chip);
  border-radius: var(--agc-r-control);
  padding: .35rem .7rem;
  font-size: .8rem;
  font-weight: 400;
  color: var(--agc-text);
}
/* Icone Tabler 14 px en --agc-orange, libelle 0.8rem --agc-text, sur fond
   blanc borde --agc-border-chip, rayon 3 px. currentColor porte la couleur :
   c'est la couleur du .agc-ds-chip-icone qui s'applique au trace. */
.agc-ds-chip svg { color: var(--agc-orange); flex-shrink: 0; }
.agc-ds-chip-libelle { font-size: .8rem; font-weight: 400; color: var(--agc-text); line-height: 1.3; }
.agc-ds-chip .agc-ds-icon { width: 14px; height: 14px; color: var(--agc-orange); flex-shrink: 0; }

/* ════════ Carte ════════ */
.agc-ds-card {
  background: var(--agc-white);
  border: 1px solid var(--agc-border);
  border-radius: var(--agc-r-card);
  padding: 1.1rem;
}
.agc-ds-card .agc-ds-icon { width: 20px; height: 20px; color: var(--agc-orange); margin-bottom: .6rem; }
.agc-ds-card p { color: var(--agc-text-3); }

/* ════════ Tableau ════════
   Le defilement horizontal est porte par le conteneur, jamais par la page —
   meme regle que .entry-content, deja en place. */
.agc-ds-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.agc-ds-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--agc-border);
  border-radius: var(--agc-r-card);
  overflow: hidden;
  background: var(--agc-white);
}
.agc-ds-table th {
  background: var(--agc-surface);
  color: var(--agc-text);
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-align: left;
  padding: .8rem 1rem;
}
.agc-ds-table td {
  padding: .8rem 1rem;
  border-top: 1px solid var(--agc-border-soft);
  color: var(--agc-text-2);
  font-weight: 300;
}

/* ════════ Bandeau de chiffres ════════ */
.agc-ds-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  background: var(--agc-navy);
  border-radius: var(--agc-r-card);
}
.agc-ds-stat { padding: 1.1rem 1.3rem; }
.agc-ds-stat + .agc-ds-stat { border-left: 1px solid var(--agc-navy-line); }
.agc-ds-stat-value { display: block; font-size: 1.75rem; font-weight: 500; line-height: 1.1; color: var(--agc-white); }
.agc-ds-stat-label { display: block; margin-top: .25rem; font-size: .72rem; font-weight: 300; color: var(--agc-navy-text); }

/* ════════ Bandeau de references clients ════════
   Noms qualifies, pas de logos. Defilement par accrochage CSS, sans minuteur :
   la decision prise pour la galerie s'applique ici. */
.agc-ds-refs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 1rem) / 3);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Pas de `scroll-behavior: smooth` : avec l'accrochage obligatoire, il fait
     animer le calage initial au chargement et Chrome n'emet plus de mesure
     LCP. Voir le meme commentaire sur .agc-refs-piste, ou c'est mesure. */
  scrollbar-width: none;
}
.agc-ds-refs::-webkit-scrollbar { display: none; }

/* Le 4e element reste partiellement visible et attenue : c'est ce qui signale
   qu'il y a une suite. */
/* Vocabulaire du lot 0, non utilise : l'implementation reelle est
   .agc-refs-piste, ou l'attenuation depend de la visibilite et non du rang.
   Conserve tel quel pour ne rien changer au rendu ; a reprendre si ce
   vocabulaire venait a servir. */
.agc-ds-refs > .agc-ds-ref:nth-child(n+4) { opacity: .4; }

.agc-ds-refs-dot[aria-selected="true"] { background: var(--agc-orange); }
@media (min-width: 701px) {

}
@media (max-width: 700px) {
   /* 1,5 element visible */
}
@media (prefers-reduced-motion: reduce) {
  .agc-ds-refs > .agc-ds-ref:nth-child(n+4) { transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   BLOCS AG CLEANING — lot 1

   Les blocs sont rendus par the_content(), donc dans la colonne
   editoriale de 760 px. Ceux qui doivent occuper la pleine largeur du
   conteneur en sortent par une marge negative calculee, et seulement
   quand ils sont enfants DIRECTS de la colonne : imbriques dans un
   groupe ou des colonnes, ils restent dans leur cadre.
════════════════════════════════════════════════════════════════ */

/* Sortie de colonne. calc(50% - L/2) vaut -220px dans une colonne de
   760 px pour une largeur cible de 1200 px, et retombe naturellement a 0
   sur mobile ou 90vw est plus etroit que la colonne. */
.entry-content > .agc-block-photo {
  width: min(var(--agc-container), 90vw);
  margin-left: calc(50% - min(var(--agc-container), 90vw) / 2);
  max-width: none;
}

/* ── Bloc Photo ── */
.agc-block-photo {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
/* Le cadre porte la proportion : elle est ainsi hors de portee de
   `:is(.entry-content, .prose) img { height: auto }`, qui la reprenait. */
.agc-block-photo-cadre {
  display: block;
  aspect-ratio: var(--agc-photo-ratio, 16 / 10);
  overflow: hidden;
  border-radius: 6px;              /* grand media : 6 px */
  background: var(--agc-media);    /* fond neutre le temps du chargement */
}
/* Deux classes pour passer devant la regle editoriale sur img. */
.agc-block-photo .agc-block-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center var(--agc-photo-cadrage, center);
  border-radius: 0;                /* le rayon est porte par le cadre */
}
.agc-block-photo-caption {
  margin: .6rem 0 0;
  font-size: .8rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--agc-text-3);
}

/* ── Bloc Appel a l'action ──
   Ses regles vivent avec les autres modules, plus bas, prefixees par
   `.agc-ds-section`. `.agc-block-cta` et `.agc-block-btn` ont ete
   supprimes : le premier n'etait pas prefixe par une racine de module et
   perdait donc contre la remise a zero editoriale — texte a
   rgb(17, 24, 39) sur marine, boutons reduits a du texte nu. Le second
   dupliquait `.agc-ds-btn`, qui gere deja le fond clair et le fond
   marine. Reparer les deux revenait a entretenir le doublon. */

/* ── Message d'aide, editeur uniquement ──
   Cote public un bloc sans donnees n'emet rien ; ce bloc n'apparait donc
   que dans l'apercu par rendu serveur. */
.agc-block-placeholder {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.2rem;
  border: 1px dashed var(--agc-border-chip);
  border-radius: var(--agc-r-card);
  background: var(--agc-surface);
  color: var(--agc-text-3);
  font-size: .85rem;
}
.agc-block-placeholder strong { color: var(--agc-text); font-weight: 500; }

/* ════════════════════════════════════════════════════════════════
   ZONES — cartes liees a leur page

   Les villes etaient de simples pastilles en texte brut. Les lier cree
   36 liens internes contextuels depuis les 6 pages service vers les
   pages villes — le maillage qui manquait, et qui explique que
   /zones/fosses-la-ville/ ne soit pas indexee.

   Cartes blanches et non pastilles translucides : les couleurs du
   libelle sont prevues pour un fond clair. --agc-text vaut #0D1F3C,
   exactement le fond marine de la section — le nom de la ville y serait
   invisible (1.00:1). Sur blanc : 16.43:1 et 5.67:1.

   Le libelle tient sur deux lignes a l'interieur du lien, ce qui rend la
   carte lisible sans allonger la page : c'est l'ancre en une seule ligne
   qui ajoutait 90 px sur mobile.
════════════════════════════════════════════════════════════════ */
.agc-zones-list {
  display: grid;
  /* `minmax(150px, minmax(0, 1fr))` est invalide — un minmax ne s'imbrique
     pas — et la declaration entiere etait ignoree : la grille retombait sur
     UNE colonne et chaque carte de zone occupait toute la largeur.
     `auto-fit` avec un minimum explicite de 150 px suffit : il n'y a pas de
     blocage a `min-content` a corriger ici. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .5rem;
  /* Le plafond de 1 000 px etait le dernier vestige des largeurs ecrites
     en dur : la liste des zones etait 56 px plus etroite que le bloc
     Methode juste au-dessus. Elle remplit maintenant le conteneur. */
  margin: 0;
  text-align: left;
}
/* Les regles .agc-zone-card ont ete retirees : le module Zones rend
   desormais les cartes .agc-zones-bloc-*, partagees avec l'accueil. */

/* ════════════════════════════════════════════════════════════════
   TEMOIGNAGE
   Photo carree a gauche, citation, puis auteur. Ni guillemets
   decoratifs ni etoiles — voir les interdits.
════════════════════════════════════════════════════════════════ */
.agc-temoignage {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.4rem;
  align-items: start;
  margin: 2.5rem 0;
  padding: 1.4rem;
  background: var(--agc-white);
  border: 1px solid var(--agc-border);
  border-radius: var(--agc-r-card);
}
.agc-temoignage-photo {
  display: block;
  width: 140px;
  height: 140px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--agc-r-card);
  background: var(--agc-media);
}
.agc-temoignage-citation {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.7;
  font-style: normal;      /* pas d'italique : le registre reste sobre */
  color: var(--agc-text);
}
.agc-temoignage-auteur {
  margin-top: .8rem;
  font-size: .8rem;
  font-weight: 300;
  color: var(--agc-text-3);
}
@media (max-width: 700px) {
  .agc-temoignage { grid-template-columns: 1fr; gap: 1rem; }
  .agc-temoignage-photo { width: 96px; height: 96px; }
  .agc-temoignage-citation { font-size: 1.05rem; }
}

/* ── Perimetre : cartes du format enrichi ──
   N'apparaissent que pour les items « icone::titre::description ».
   Les items simples gardent leur rendu historique, intact. */
.agc-inclus-carte { padding: 1.3rem; text-align: left; }
/* Sans icone reconnue, le disque d'origine : un nom mal saisi ne doit pas
   laisser un trou dans la carte. */
.agc-inclus-icone {
  display: block;
  width: 20px;
  height: 20px;
  margin-bottom: .6rem;
  border-radius: 50%;
  background: var(--agc-orange);
  opacity: .9;
}
.agc-inclus-icone--svg {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  opacity: 1;
  color: var(--agc-orange);
  line-height: 0;
}
.agc-inclus-titre {
  margin: 0 0 .3rem;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--agc-text);
}
.agc-inclus-desc {
  margin: 0;
  font-size: .85rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--agc-text-3);
}

/* Categories dans le surtitre d'un article : le surtitre est une pastille
   orange clair sur fond marine, un lien y doit rester lisible et distinct
   sans casser la pastille. */

/* ════════════════════════════════════════════════════════════════
   LOT 4a — HERO DE LA PAGE SERVICE

   Refondu selon la maquette. Ne concerne que page-service.php : les
   autres gabarits gardent leurs anciennes regles jusqu'a leur propre
   passage.

   align-items: start et non center — c'est le defaut signale. En center,
   le H1 descendait des que la photo etait haute, et le premier mot de la
   page se retrouvait au milieu du bloc.
════════════════════════════════════════════════════════════════ */

/* Media : ratio 4/3 contraint, et bandeau de chiffres en debord bas. */
/* Sans photo, le bandeau reprend sa place dans le flux. */

@media (max-width: 900px) {
}

/* ── Marqueurs de liste, en remplacement des emoji ──
   Dessines en CSS et poses en aria-hidden : ils sont decoratifs, le sens
   est porte par le texte a cote. C'est ce qui permet de supprimer les
   emoji sans perdre la lecture au lecteur d'ecran. */
.agc-marqueur {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

/* Icone des cartes « ce qui fait la difference » : l'emoji est retire, un
   point orange tient la place jusqu'a la fonte Tabler. */
.agc-ds-icon {
  display: inline-block;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--agc-orange);
  flex-shrink: 0;
}

/* Preuve directe sous les boutons du hero. */

/* ════════════════════════════════════════════════════════════════
   MODALE « ÊTRE RAPPELÉ »

   Presente sur toutes les pages via footer.php. Elle etait restee en
   dehors du lot 4a — fichier partage — alors qu'elle s'affiche sur les
   6 pages service deja refondues : trois emoji, des graisses en 700 et
   des rayons de 10 et 16 px y detonnaient.

   L'ouverture se fait en retirant l'attribut hidden, plus en pilotant
   style.display : un attribut se teste, se lit dans l'inspecteur et ne
   se laisse pas ecraser par une regle CSS.
════════════════════════════════════════════════════════════════ */
.agc-ds-modale {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(13, 31, 60, .6);
}
.agc-ds-modale[hidden] { display: none; }

.agc-ds-modale-boite {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 2rem;
  background: var(--agc-white);
  border: 1px solid var(--agc-border);
  border-radius: var(--agc-r-card);   /* 4 px : conteneur */
}

.agc-ds-modale-fermer {
  position: absolute;
  top: .8rem;
  right: .8rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--agc-surface);
  border: 1px solid var(--agc-border);
  border-radius: var(--agc-r-control); /* 3 px : controle */
  color: var(--agc-text-2);
  cursor: pointer;
}
.agc-ds-modale-fermer:hover { background: var(--agc-surface-alt); color: var(--agc-text); }
.agc-ds-modale-fermer:focus-visible { outline: 2px solid var(--agc-blue); outline-offset: 2px; }

.agc-ds-modale-entete { margin-bottom: 1.4rem; padding-right: 2.5rem; }
.agc-ds-modale-picto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: .8rem;
  border-radius: var(--agc-r-card);
  background: var(--agc-warm-bg);
  color: var(--agc-orange);
}
.agc-ds-modale-titre {
  margin: 0 0 .3rem;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--agc-text);
}
.agc-ds-modale-intro {
  margin: 0;
  font-size: .85rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--agc-text-3);
}

.agc-ds-modale-form { display: flex; flex-direction: column; gap: .85rem; }
.agc-ds-champ { display: block; }
.agc-ds-label {
  display: block;
  margin-bottom: .3rem;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--agc-text-2);
}
.agc-ds-input {
  width: 100%;
  box-sizing: border-box;
  padding: .7rem .9rem;
  font-family: var(--agc-font);
  font-size: .88rem;
  font-weight: 300;
  color: var(--agc-text);
  background: var(--agc-white);
  border: 1px solid var(--agc-border-chip);
  border-radius: var(--agc-r-control);
}
/* L'anneau de focus remplace l'ancien changement de bordure pilote par
   onfocus/onblur en JavaScript inline : c'est de l'accessibilite, conserve. */
.agc-ds-input:focus-visible {
  outline: 2px solid var(--agc-blue);
  outline-offset: 1px;
  border-color: var(--agc-blue);
}
.agc-ds-modale-envoi { width: 100%; text-align: center; }

.agc-ds-modale-mention {
  margin: 0;
  font-size: .72rem;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
  color: var(--agc-text-3);
}
.agc-ds-modale-mention a { color: var(--agc-orange); }

.agc-ds-modale-succes { text-align: center; padding: 1rem 0; }
.agc-ds-modale-succes[hidden] { display: none; }
.agc-ds-modale-succes-picto { display: block; margin-bottom: .6rem; color: var(--agc-orange); }

/* ════════════════════════════════════════════════════════════════
   LOT 3 — MODULES SUPPLEMENTAIRES
════════════════════════════════════════════════════════════════ */

/* ── Neutralisation de la typographie editoriale sur les listes de modules ──
   Les blocs rendent dans .entry-content, ou la regle
   `:is(.entry-content, .prose) ul li` (0,1,2) impose marge basse .55rem,
   interligne 1.7 et retrait .25rem. Dans une grille ces trois valeurs sont
   fausses : elles se cumulaient au `gap` et decalaient le filet de gauche.
   Deux classes suffisent a reprendre la main — inutile de monter plus haut. */
.agc-refs-piste > .agc-ref,
.agc-process > .agc-process-etape,
.agc-facturation > .agc-facturation-points > li {
  margin-bottom: 0;
  line-height: inherit;
  padding-left: 0;
}
/* Le retrait de la reference porte le filet : on le repose apres coup. */
.agc-refs-piste > .agc-ref { padding-left: .8rem; }
.agc-facturation > .agc-facturation-points > li { line-height: 1.5; }

/* ── Motifs de changement ── */
.agc-motifs { margin-top: 1.2rem; }
.agc-motifs .agc-ds-table thead th { background: var(--agc-surface-alt); }

/* ── Demarrage en etapes ── */
.agc-process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.6rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.agc-process-etape { position: relative; padding-top: .3rem; }
.agc-process-num {
  display: block;
  margin-bottom: .5rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  color: var(--agc-orange-on-navy);  /* sur marine, l'orange clair, 6.28:1 */
}
.agc-process-titre {
  margin: 0 0 .3rem;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--agc-white);
}
.agc-process-desc {
  margin: 0;
  font-size: .85rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--agc-navy-text);
}

/* ── Encart facturation ──
   Il tient a cote d'une colonne de texte : il ne sort donc PAS de la
   colonne editoriale, contrairement aux autres modules. */
.agc-facturation {
  margin: 2rem 0;
  padding: 1.2rem 1.3rem;
  background: var(--agc-warm-bg);
  border: 1px solid var(--agc-warm-border);
  border-radius: var(--agc-r-card);
}
.agc-facturation-surtitre { display: block; margin-bottom: .5rem; color: var(--agc-orange); }
.agc-facturation-titre {
  margin: 0 0 .4rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--agc-text);
}
.agc-facturation-texte {
  margin: 0 0 .8rem;
  font-size: .9rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--agc-text-2);
}
.agc-facturation-points { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; }
.agc-facturation-points li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .85rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--agc-text-2);
}
.agc-facturation-points svg { color: var(--agc-orange); flex-shrink: 0; margin-top: .1rem; }

/* ── Bandeau de chiffres ── */
.agc-chiffres { margin: 2rem 0; }

/* ════════════════════════════════════════════════════════════════
   REFERENCES CLIENTS

   Noms qualifies, pas de logos. Defilement par accrochage CSS et
   JAMAIS de minuteur — meme decision que pour la galerie.
   Sous quatre references, grille statique : des fleches pour trois
   elements ne servent a rien.
════════════════════════════════════════════════════════════════ */
.agc-refs-bandeau .agc-ds-eyebrow { display: block; margin-bottom: 1rem; }
.agc-refs-zone { position: relative; }

/* L'ecart est une variable : la largeur de colonne s'en deduit, les deux
   ne peuvent plus diverger. */
.agc-refs-piste {
  --agc-refs-ecart: .9rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--agc-refs-ecart);
  margin: 0;
  padding: 0;
  list-style: none;
}
/*
 * En mode defilement, la piste passe en flux flexible et non en grille.
 * `grid-auto-columns` en pourcentage ne se resout pas sur la largeur du
 * conteneur mais sur une base plus petite : a 1200 px de piste, trois
 * colonnes plus deux ecarts ne faisaient que 1178 px. Une base flex en
 * pourcentage, elle, se resout bien sur la boite de contenu.
 */
.agc-refs-zone--defile .agc-refs-piste {
  display: flex;
  flex-wrap: nowrap;
}
/* 3,4 elements par vue et non 3 : le quatrieme reste partiellement visible,
   et c'est lui qui signale qu'il y a une suite. Trois pleins exactement
   donnaient un bandeau qui semblait complet, fleches comprises. */
.agc-refs-zone--defile .agc-ref {
  flex: 0 0 calc((100% - 3 * var(--agc-refs-ecart)) / 3.4);
}
/* Pas de `scroll-behavior: smooth` ici, volontairement : combine a
   `scroll-snap-type: mandatory`, il fait ANIMER l'accrochage initial pendant
   le chargement, et Chrome n'emet alors plus aucune entree LCP — mesure a
   l'appui, la page passe de 430 ms a rien du tout. Le defilement doux est
   porte par main.js, ou il ne s'applique qu'aux gestes de l'utilisateur. */
.agc-refs-zone--defile .agc-refs-piste {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: .3rem;
}
.agc-refs-zone--defile .agc-refs-piste::-webkit-scrollbar { display: none; }
.agc-refs-zone--defile .agc-refs-piste:focus-visible {
  outline: 2px solid var(--agc-blue);
  outline-offset: 4px;
}

.agc-ref {
  scroll-snap-align: start;
  border-left: 2px solid var(--agc-border);
  padding-left: .8rem;
}
.agc-ref-nom  { display: block; font-size: .95rem; font-weight: 500; line-height: 1.35; color: var(--agc-text); }
.agc-ref-qual { display: block; font-size: .8rem;  font-weight: 300; line-height: 1.4;  color: var(--agc-text-3); }

/* Le 4e element reste partiellement visible et attenue : c'est ce qui
   signale qu'il y a une suite. Seulement en mode defilement. */
/* ── Attenuation de l'element coupe ──
   Elle disait « il y a une suite ». Elle etait posee sur le 4e element et
   les suivants, par leur RANG : une fois amenes a l'ecran par defilement,
   ils restaient gris. Et le survol de la piste les rallumait tous, y
   compris celui qui etait reellement coupe — l'indice disparaissait au
   moment ou il servait.
   La classe est maintenant posee par main.js sur le seul element
   partiellement hors du cadre, quel que soit son rang. */
.agc-refs-zone--defile .agc-ref { transition: opacity .2s; }
.agc-refs-zone--defile .agc-ref--tronque { opacity: .4; }

.agc-refs-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.agc-refs-fleches { display: flex; gap: .4rem; flex-shrink: 0; }
.agc-refs-fleche {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--agc-white);
  border: 1px solid var(--agc-border-chip);
  border-radius: var(--agc-r-control);
  color: var(--agc-text);
  cursor: pointer;
}
.agc-refs-fleche:hover { border-color: var(--agc-orange); color: var(--agc-orange); }
.agc-refs-fleche:focus-visible { outline: 2px solid var(--agc-blue); outline-offset: 2px; }
.agc-refs-fleche[disabled] { opacity: .35; cursor: default; }

/* Indicateurs en segments, pas en pastilles. */
.agc-refs-segments { display: flex; gap: .3rem; justify-content: center; margin-top: 1rem; }
.agc-refs-segment {
  width: 18px;
  height: 2px;
  padding: 0;
  border: none;
  background: var(--agc-border-chip);
  cursor: pointer;
}
.agc-refs-segment[aria-selected="true"] { background: var(--agc-orange); }
.agc-refs-segment:focus-visible { outline: 2px solid var(--agc-blue); outline-offset: 3px; }

@media (max-width: 700px) {
  /* 1,5 element visible, defilement natif au doigt, aucune fleche.
     Les segments restent : ils disent ou l'on se trouve. */
  .agc-refs-zone--defile .agc-ref { flex-basis: 66%; }
  .agc-refs-fleches { display: none; }
}
@media (min-width: 701px) and (max-width: 1000px) {
  /* Deux pleins et un debut de troisieme : a cette largeur, trois noms de
     client se couperaient en trois lignes chacun. */
  .agc-refs-zone--defile .agc-ref { flex: 0 0 calc((100% - 2 * var(--agc-refs-ecart)) / 2.4); }
}
@media (prefers-reduced-motion: reduce) {
  /* Le defilement doux est decide dans main.js, qui lit la meme preference ;
     il ne reste ici que l'attenuation du 4e element. */
  .agc-refs-zone--defile .agc-ref { transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   MODULES DANS LA COLONNE EDITORIALE — echappement et corrections

   Constate en production sur le bloc References, mais la cause est
   commune a tous les modules : inseres dans le contenu, ils heritaient
   de la largeur de .entry-content — 760 px — au lieu de deborder.
════════════════════════════════════════════════════════════════ */

/* ── 1. Echappement de la colonne ──
   .entry-content est centre dans son parent et plafonne a 760 px. Les
   modules doivent atteindre la largeur du conteneur du design system.
   Marges negatives symetriques : le module reste centre sur la colonne,
   qui est elle-meme centree dans la page.

   Le min(0px, …) est le garde-fou : sur un ecran plus etroit que la
   colonne, le calcul deviendrait positif et RETRECIRAIT le module au
   lieu de l'elargir. Plafonne a zero, on retombe simplement sur la
   largeur de la colonne.

   Les 3rem retranches au viewport tiennent compte de la barre de
   defilement et evitent un debordement horizontal du document. */
:is(.entry-content, .prose) > .agc-ds-section,
:is(.entry-content, .prose) > .agc-ds-stats {
  --agc-echappe: min(var(--agc-container), calc(100vw - 3rem));
  margin-inline: min(0px, calc((var(--agc-echappe) - 100%) / 2 * -1));
}
/* Le rembourrage lateral de la section ferait doublon avec le conteneur
   une fois la section elargie : la marge du texte est deja donnee par
   la page. */
:is(.entry-content, .prose) > .agc-ds-section { padding-inline: 0; }
/* Le bandeau de chiffres n'a pas de conteneur interne : il garde une
   respiration laterale propre. */
:is(.entry-content, .prose) > .agc-ds-stats { max-width: var(--agc-container); }

/* ── 2. Puces orange parasites ──
   `:is(.entry-content, .prose) ul { list-style: disc }` pese (0,1,1) et
   ecrasait le `list-style: none` de la piste, pose a (0,1,0). Le
   ::marker heritait alors de la couleur orange des listes editoriales et
   se posait en bout de chaque reference. Deux classes suffisent. */
/* `max-width: 52ch` vient de la meme famille de regles : c'est la mesure
   de lecture des listes editoriales. Elle bridait la piste a 624 px alors
   que la section faisait deja 1200 — le module debordait, son contenu non. */
/* Le retrait de 1,35 rem des listes editoriales s'appliquait aussi a la
   piste : sa boite de contenu faisait 1178 px pour 1200 px de large, et
   les colonnes calculees en pourcentage tombaient 22 px trop court. */
:is(.entry-content, .prose) .agc-refs-piste,
:is(.entry-content, .prose) .agc-facturation-points,
:is(.entry-content, .prose) .agc-process {
  list-style: none;
  max-width: none;
  padding-inline: 0;
}
.agc-refs-piste > .agc-ref::marker,
.agc-facturation-points > li::marker,
.agc-process > .agc-process-etape::marker {
  content: "";
}

/* ── 3. Le filet reste a gauche, et se rapproche de son element ──
   Il etait bien a gauche, mais l'ecart de 1,2 rem entre colonnes le
   detachait de la reference qu'il borde : lu de gauche a droite, il
   semblait appartenir a la precedente. Ecart resserre, retrait accru :
   le filet accompagne desormais son propre texte. */
.agc-refs-piste > .agc-ref {
  border-left: 2px solid var(--agc-border);
  border-right: 0;
  padding-left: 1rem;
}

/* ── 4. Hauteurs egales ──
   Deux lignes reservees au nom : les qualificatifs se posent alors sur
   la meme ligne de base d'une reference a l'autre, que le nom tienne
   sur une ligne ou sur deux. Au-dela de deux lignes, le nom continue —
   on ne coupe pas un nom de client. */
/* Les qualificatifs s'alignent sur une ligne de base commune parce que les
   elements sont etires a la meme hauteur et que le qualificatif est pousse
   en bas. Aucune hauteur reservee : quand tous les noms tiennent sur une
   ligne — le cas courant — il n'y a aucun espace vide. La version
   precedente reservait deux lignes en toutes circonstances. */
.agc-refs-piste > .agc-ref { display: flex; flex-direction: column; }
.agc-ref-nom  { margin-bottom: .15rem; }
.agc-ref-qual { margin-top: auto; }

/* ── Grille des prestations (parts/services-grid.php) ── */
.agc-service-carte-corps { padding: 1.6rem; }

.agc-service-carte-tags li {
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--agc-surface-alt);
  color: var(--agc-blue);
  padding: .2rem .55rem;
  border-radius: var(--agc-r-control);
}

/* ── Temoignages de repli (parts/temoignages-default.php) ── */
.agc-tcard-texte {
  margin: 0 0 1.4rem;
  font-size: .87rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--agc-text-2);
}
.agc-tcard-nom  { margin: 0 0 2px; font-size: .87rem; font-weight: 500; color: var(--agc-text); }
.agc-tcard-role { margin: 0; font-size: .73rem; font-weight: 300; color: var(--agc-text-3); }
/* Les trois pastilles etaient colorees a la main dans le gabarit. Une seule
   couleur : ce sont des initiales, pas un code couleur qui voudrait dire
   quelque chose. */
.agc-tcard .agc-avatar { background: var(--agc-navy); }

/* ════════════════════════════════════════════════════════════════
   LOT 4b — PAGE CATEGORIE SERVICES
════════════════════════════════════════════════════════════════ */

/* Le hero n'a pas de colonne droite ici : une seule colonne, mesuree. */
.agc-cat-hero-grid { grid-template-columns: 1fr; }

/* Bandeau marine intercalaire. */
.agc-cat-bandeau { background: var(--agc-navy); padding: 1.6rem 5vw; text-align: center; }
.agc-cat-bandeau p { margin: 0; font-size: 1rem; font-weight: 300; color: var(--agc-white); }
.agc-cat-bandeau strong { font-weight: 500; color: var(--agc-orange-on-navy); }

.agc-cat-entete { text-align: center; margin-bottom: 2rem; }
.agc-cat-entete .agc-ds-eyebrow { display: block; margin-bottom: .6rem; }
.agc-cat-entete .agc-ds-lede { margin-left: auto; margin-right: auto; }

/* ── Cartes de prestation ── */
.agc-cat-grille {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}
.agc-cat-carte { display: flex; flex-direction: column; padding: 1.5rem; }
.agc-cat-carte-picto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: .9rem;
  border-radius: var(--agc-r-card);
  background: var(--agc-surface-alt);
  color: var(--agc-blue);
}
.agc-cat-carte-titre { margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 500; color: var(--agc-text); }
.agc-cat-carte-tags {
  list-style: none;
  margin: 0 0 .9rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.agc-cat-carte-tags li {
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--agc-surface-alt);
  color: var(--agc-blue);
  padding: .2rem .55rem;
  border-radius: var(--agc-r-control);
}
.agc-cat-carte-desc {
  margin: 0 0 1rem;
  font-size: .88rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--agc-text-2);
}
/* Rayon symetrique : le 0/8/8/0 d'origine donnait une carte a deux
   geometries. Filet a gauche, comme les references. */
.agc-cat-carte-pb {
  margin: 0 0 1.1rem;
  padding: .7rem .9rem;
  background: var(--agc-warm-bg);
  border-left: 2px solid var(--agc-orange);
  border-radius: var(--agc-r-card);
  font-size: .78rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--agc-text-2);
}
.agc-cat-carte-pb span {
  display: block;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--agc-orange);
}
.agc-cat-carte-lien {
  margin-top: auto;
  font-size: .84rem;
  font-weight: 500;
  color: var(--agc-blue);
  text-decoration: none;
}
.agc-cat-carte-lien:hover { color: var(--agc-orange); text-decoration: underline; }

/* Le contenu libre garde la mesure de lecture, centre dans la page. */
.agc-cat-contenu { max-width: var(--agc-measure); margin-inline: auto; }

/* ════════════════════════════════════════════════════════════════
   LOT 4b — PAGE CATEGORIE ZONES
════════════════════════════════════════════════════════════════ */

.agc-zones-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  margin-top: 2rem;
}
/* La hauteur vient du conteneur .agc-carte-zone, qui la reserve pour les
   deux etats — encart d'attente et carte. */
.agc-zones-carte {
  border: 1px solid var(--agc-border);
  border-radius: var(--agc-r-media);
  overflow: hidden;
}

/* ── Habillage de la carte ──
   Ces classes sont les NOTRES : marqueurs, infobulle et legende sont
   produits par le gabarit, pas par Leaflet. On ne surcharge aucune
   classe `leaflet-*`, qui appartient a la bibliotheque. */
.agc-map-pt {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;            /* un point, pas un coin arrondi */
  background: var(--agc-navy);
  border: 2px solid var(--agc-white);
  vertical-align: middle;
}
.agc-map-pt--siege { width: 16px; height: 16px; background: var(--agc-orange); border-width: 3px; }
.agc-map-tooltip {
  background: var(--agc-white);
  border: 1px solid var(--agc-border);
  border-radius: var(--agc-r-card);
  font-size: .75rem;
  font-weight: 500;
  color: var(--agc-text);
  padding: 4px 10px;
}
.agc-map-tooltip::before { display: none; }
.agc-map-legende {
  background: var(--agc-white);
  border: 1px solid var(--agc-border);
  border-radius: var(--agc-r-card);
  padding: .5rem .8rem;
  font-size: .7rem;
}
.agc-map-legende p { margin: 0; line-height: 1.8; }
.agc-map-legende .agc-map-pt { margin-right: 5px; }

/* ── Liste des regions ── */
.agc-zones-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.agc-zone-lien {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--agc-white);
  border: 1px solid var(--agc-border);
  border-left: 3px solid var(--agc-navy);
  border-radius: var(--agc-r-card);
  padding: 1rem 1.2rem;
  text-decoration: none;
}
.agc-zone-lien:hover { border-color: var(--agc-orange); border-left-color: var(--agc-orange); }
.agc-zone-lien--siege { background: var(--agc-warm-bg); border-left-color: var(--agc-orange); }
.agc-zone-sigle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--agc-r-card);
  background: var(--agc-surface-alt);
  /* --agc-text-3 et non --agc-blue : le composant n'a que deux tons de
     texte, et le sigle est un reperage, pas une information. */
  color: var(--agc-text-3);
  font-size: .78rem;
  font-weight: 500;
}
.agc-zone-corps { flex: 1; }
.agc-zone-nom { display: block; font-size: .92rem; font-weight: 500; line-height: 1.25; color: var(--agc-text); }
.agc-zone-nom span { font-weight: 300; color: var(--agc-text-3); }
.agc-zone-desc { display: block; margin-top: 2px; font-size: .75rem; font-weight: 300; line-height: 1.5; color: var(--agc-text-3); }

/* ── Reassurance ── */
.agc-zones-reassurance {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.2rem;
}
.agc-zones-reassurance > li { padding: 1.4rem; text-align: center; }
.agc-zones-reassurance-picto { display: inline-flex; margin-bottom: .6rem; color: var(--agc-orange); }
.agc-zones-reassurance-titre { margin: 0 0 .3rem; font-size: .9rem; font-weight: 500; color: var(--agc-text); }
.agc-zones-reassurance-texte { margin: 0; font-size: .78rem; font-weight: 300; line-height: 1.55; color: var(--agc-text-3); }

/* Une colonne sous 900 px, et non 768 : a 800 px les deux colonnes tiennent
   sur le papier, mais la liste des six regions y devient illisible — trois
   lignes de texte par region dans 380 px. La carte reste en PREMIER, c'est
   l'ordre du DOM. */
@media (max-width: 900px) {
  .agc-zones-grille { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
}

/* ── Graisse de base de <strong> ──
   Sans regle, le navigateur applique `bolder`, soit 700. La specification
   plafonne a 500 : on le pose une fois, a la racine, plutot que de le
   rattraper contexte par contexte. */
strong, b { font-weight: 500; }

/* Exception assumee sur la carte : `.leaflet-tooltip` porte une ombre, et
   notre infobulle en herite parce qu'elle cumule les deux classes. La
   feuille de Leaflet est chargee apres la notre, donc a egalite de poids
   c'est elle qui gagne : on double la classe pour passer devant. Toujours
   NOTRE classe, jamais la famille `leaflet-*`. */
.agc-map-tooltip.agc-map-tooltip { box-shadow: none; }

/* ── Lot 4b — gabarits d'archive, pied de page et en-tete ── */
.agc-card-img-vide--haut { height: 220px; }
.agc-real-corps { padding: 1rem; }

.agc-footer-marque { margin-bottom: .9rem; font-size: 1.2rem; font-weight: 500; color: var(--agc-white); }
.agc-footer-marque span { color: var(--agc-orange-on-navy); }
.nav-dropdown-tout {
  font-weight: 500;
  color: var(--agc-orange);
  border-bottom: 1px solid var(--agc-border);
  padding-bottom: .6rem;
  margin-bottom: .2rem;
}

.quick-contact a svg, .sidebar-contact a svg { flex-shrink: 0; }

/* ── Carte : encart d'attente avant consentement ──
   La hauteur est portee par le conteneur, pas par l'un ou l'autre de ses
   deux etats : l'encart et la carte occupent exactement la meme place,
   donc afficher la carte ne decale rien. */
.agc-carte-zone { position: relative; height: 460px; }
/* Avec une proportion, la hauteur fixe imposerait la largeur : 460 px de haut
   en 21/7 donnent 1 380 px de large, soit 132 px hors ecran a 1440. La
   proportion prend le relais, la hauteur se calcule. */
.agc-carte-zone--ratio {
  /* `width: 100%` rend la largeur definie : sans elle, la proportion calcule
     encore la largeur DEPUIS la hauteur du contenu, et l'encart de
     consentement — haut sur mobile — produisait 960 px de large a 390. */
  width: 100%;
  height: auto;
}
.agc-carte-zone > * { height: 100%; }
.agc-carte-attente {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .7rem;
  padding: 1.6rem;
  background: var(--agc-surface-alt);
  border: 1px solid var(--agc-border);
  border-radius: var(--agc-r-media);
}
.agc-carte-attente[hidden] { display: none; }
.agc-carte-attente-titre { margin: 0; font-size: 1rem; font-weight: 500; color: var(--agc-text); }
.agc-carte-attente-texte {
  margin: 0;
  max-width: 42ch;
  font-size: .85rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--agc-text-2);
}
.agc-carte-attente-note { margin: 0; font-size: .75rem; font-weight: 300; color: var(--agc-text-3); }
.agc-zones-carte[hidden] { display: none; }

@media (max-width: 768px) {
  .agc-carte-zone { height: 320px; }
  /* 21/7 sur un telephone donnerait 130 px de haut : l'encart de consentement
     n'y tient pas. La proportion est une intention de mise en page large. */
  .agc-carte-zone--ratio { aspect-ratio: auto; height: 320px; }
}

/* ════════════════════════════════════════════════════════════════
   PERIMETRE DE LA PRESTATION — refonte

   Cartes blanches bordées sur fond blanc, comme la maquette. Le fond
   bleu clair et son liseré, le surtitre orange et le titre centré ont
   ete retires : ils venaient d'une version anterieure a la
   specification.
════════════════════════════════════════════════════════════════ */
.agc-inclus-h2 { margin: 0 0 1.6rem; }
.agc-inclus-grille {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
/* Pastille de 44 px : l'icone avait 20 px et flottait seule dans l'angle. */
.agc-inclus-icone--svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: .9rem;
  border-radius: var(--agc-r-card);
  background: var(--agc-surface-alt);
  color: var(--agc-blue);
  line-height: 0;
}
.agc-inclus-titre { margin: 0 0 .35rem; font-size: 1rem; font-weight: 500; line-height: 1.35; color: var(--agc-text); }
.agc-inclus-desc  { margin: 0; font-size: .85rem; font-weight: 300; line-height: 1.6; color: var(--agc-text-2); }

/* Items au format simple : une ligne a coche, meme carte. */
.agc-inclus-ligne {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem 1.1rem;
  font-size: .88rem;
  font-weight: 400;
  color: var(--agc-text);
}
.agc-inclus-coche { display: inline-flex; flex-shrink: 0; color: var(--agc-orange); }

@media (max-width: 1000px) { .agc-inclus-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .agc-inclus-grille { grid-template-columns: minmax(0, 1fr); } }

/* ════════════════════════════════════════════════════════════════
   MODULES — ISOLATION DE LA TYPOGRAPHIE EDITORIALE

   Les modules sont inseres dans .entry-content. La typographie
   editoriale y pese de (0,1,1) a (0,1,2) et capturait tout ce qu'ils
   contiennent : couleur de lien, soulignement, puces, marges, mesure
   de lecture a 52ch, couleur des titres. C'est la cause unique de
   l'orange, des soulignements et de l'aspect non stylé constates sur
   quatre blocs a la fois.

   Un module ne doit RIEN heriter de la colonne editoriale. La remise a
   zero ci-dessous pese (0,2,0) grace a la racine de module ; `:where()`
   n'ajoute rien, si bien que les regles de module qui suivent — elles
   aussi prefixees par la racine — reprennent la main normalement.

   ── Pourquoi il n'y a pas de `:not([class*="agc-"])` ici ──
   Ce garde-fou a ete essaye. Il coute un cran de poids : un selecteur
   d'attribut vaut une classe, la remise a zero passait a (0,3,0) et
   depassait alors les regles de module elles-memes — les cellules de
   `.agc-ds-table` (0,2,2) perdaient leur marge interieure. Et en
   epargnant les elements a classe, il laissait `ul.agc-inclus-grille`
   garder la mesure de lecture et `h2.agc-ds-h2` garder son filet
   orange. La remise a zero doit donc porter sur TOUS les descendants.
   La contrepartie : une regle de module doit peser au moins (0,2,0) et
   venir apres — en pratique, etre prefixee par la racine de module.

   ── L'exception des primitives ──
   Un bouton, une puce de confiance : ce ne sont pas des elements de
   typographie editoriale, ce sont des composants du design system, poses
   deliberement DANS un module. Les remettre a zero leur retire fond,
   bordure et rembourrage — un `.agc-ds-btn` redevient du texte nu.
   Ils sont donc exclus, et l'exclusion est enveloppee dans `:where()`
   pour ne rien couter en poids : c'est ce qu'avait oublie la version
   `:not([class*="agc-"])`, qui poussait la regle a (0,3,0).
   Liste courte et fermee — des composants, jamais de la mise en page.

   La seule chose a tenir a jour est la liste des racines.
════════════════════════════════════════════════════════════════ */
:is(.entry-content, .prose) :is(.agc-ds-section, .agc-ds-stats, .agc-facturation,
  .agc-block-photo, .agc-refs-bandeau)
  :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, table, thead, tbody, tr, th, td,
         a, strong, em, span, figure, figcaption, blockquote, img):not(:where(.agc-ds-btn, .agc-ds-chip)) {
  margin: 0;
  padding: 0;
  max-width: none;
  color: inherit;
  font-style: normal;
  font-weight: inherit;
  text-decoration: none;
  list-style: none;
  border: 0;
  background: none;
  line-height: inherit;
}
:is(.entry-content, .prose) :is(.agc-ds-section, .agc-ds-stats, .agc-facturation,
  .agc-block-photo, .agc-refs-bandeau)
  :where(li)::marker { content: ""; }
/* Les pseudo-elements decoratifs de la colonne editoriale — le filet orange
   au-dessus des h2, les puces construites en ::before — traversent la
   remise a zero, qui ne porte que sur les elements. Ils sont neutralises
   ici. Un module qui veut le sien le redeclare, prefixe par sa racine. */
:is(.entry-content, .prose) :is(.agc-ds-section, .agc-ds-stats, .agc-facturation,
  .agc-block-photo, .agc-refs-bandeau)
  :where(h1, h2, h3, h4, h5, h6, p, li, a, span)::before,
:is(.entry-content, .prose) :is(.agc-ds-section, .agc-ds-stats, .agc-facturation,
  .agc-block-photo, .agc-refs-bandeau)
  :where(h1, h2, h3, h4, h5, h6, p, li, a, span)::after {
  content: none;
}

/* ════════════════════════════════════════════════════════════════
   MODULES — VALEURS DE LA MAQUETTE

   Reprises de _context/maquette-page-service.html. Toutes les regles
   sont prefixees par la racine de module : meme poids que la remise a
   zero, et elles viennent apres.
════════════════════════════════════════════════════════════════ */

/* ── Section et surtitre ── */
.agc-ds-section { padding: 4rem 0; }
:is(.entry-content, .prose) > .agc-ds-section { padding-block: 4rem; }
.agc-ds-section .agc-ds-eyebrow {
  display: block;
  margin-bottom: .6rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--agc-text);
}
:is(.agc-ds-section--navy, .agc-ds-on-navy) .agc-ds-eyebrow { color: var(--agc-orange-on-navy); }
.agc-ds-section .agc-ds-h2 {
  margin: 0 0 .6rem;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--agc-text);
}
:is(.agc-ds-section--navy, .agc-ds-on-navy) .agc-ds-h2 { color: var(--agc-white); }
/* `font-size` et `font-weight` sont repris ici : la remise a zero pose
   `font-weight: inherit` sur les `p`, et la declaration de base du design
   system ne pese que (0,1,0). Sans ces deux lignes, le chapeau d'un module
   insere dans le contenu passait en 400 quand le meme module rendu par le
   gabarit restait en 300. */
.agc-ds-section .agc-ds-lede { margin: 0 0 1rem; font-size: 1.15rem; font-weight: 300; line-height: 1.7; color: var(--agc-text-2); }
:is(.agc-ds-section--navy, .agc-ds-on-navy) .agc-ds-lede { color: var(--agc-navy-text); }

/* ── Périmètre : cartes de la maquette ── */
.agc-ds-section .agc-inclus-h2 { margin-bottom: 1.2rem; }
.agc-ds-section .agc-inclus-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.agc-ds-section .agc-inclus-carte {
  background: var(--agc-white);
  border: 1px solid var(--agc-border);
  border-radius: var(--agc-r-card);
  padding: 1.15rem;
}
/* Icône de 20 px en orange, posée directement — la maquette ne montre
   aucune pastille derrière elle. */
.agc-ds-section .agc-inclus-icone--svg {
  display: block;
  width: auto;
  height: auto;
  margin-bottom: .55rem;
  background: none;
  border-radius: 0;
  color: var(--agc-orange);
  line-height: 0;
}
.agc-ds-section .agc-inclus-icone--svg svg { width: 20px; height: 20px; }
.agc-ds-section .agc-inclus-titre { margin: 0 0 .25rem; font-size: 1.05rem; font-weight: 500; line-height: 1.4; color: var(--agc-text); }
.agc-ds-section .agc-inclus-desc  { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--agc-text-3); }
.agc-ds-section .agc-inclus-ligne {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--agc-white);
  border: 1px solid var(--agc-border);
  border-radius: var(--agc-r-card);
  padding: .9rem 1.15rem;
  font-size: .9rem;
  color: var(--agc-text);
}
.agc-ds-section .agc-inclus-coche { display: inline-flex; flex: none; color: var(--agc-orange); }
.agc-ds-section .agc-inclus-mention { margin: 1rem 0 0; font-size: .8rem; color: var(--agc-text-3); }

/* ── Motifs : tableau de la maquette, sans zébrure ── */
.agc-ds-section .agc-ds-table-wrap { border: 0; border-radius: 0; overflow: visible; }
.agc-ds-section .agc-ds-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--agc-border);
  border-radius: var(--agc-r-card);
  overflow: hidden;
}
.agc-ds-section .agc-ds-table thead th {
  background: var(--agc-surface);
  color: var(--agc-text);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  padding: .7rem 1rem;
}
.agc-ds-section .agc-ds-table tbody td {
  padding: .75rem 1rem;
  border-top: 1px solid var(--agc-border-soft);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--agc-text-2);
  background: none;
}
.agc-ds-section .agc-ds-table tbody td:first-child { color: var(--agc-text); }

/* ── Démarrage : quatre colonnes sur marine ── */
.agc-ds-section .agc-process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; margin-top: 1.4rem; }
.agc-ds-section .agc-process-etape { padding: 0; border: 0; }
.agc-ds-section .agc-process-num { display: block; margin-bottom: .35rem; font-size: .8rem; font-weight: 400; color: var(--agc-orange-on-navy); }
.agc-ds-section .agc-process-picto { display: none; }
.agc-ds-section .agc-process-titre { margin: 0 0 .2rem; font-size: 1.05rem; font-weight: 500; line-height: 1.4; color: var(--agc-white); }
.agc-ds-section .agc-process-desc  { margin: 0; font-size: .85rem; line-height: 1.6; color: var(--agc-navy-text); }

/* ── Références : bandeau resserré de la maquette ── */
:is(.entry-content, .prose) > .agc-refs-bandeau { padding-block: 1.6rem; border-bottom: 1px solid var(--agc-border); }
.agc-refs-bandeau .agc-refs-entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.agc-refs-bandeau .agc-refs-entete .agc-ds-eyebrow { margin: 0; }
.agc-refs-bandeau .agc-refs-fleches { display: flex; gap: .4rem; flex: none; }
.agc-refs-bandeau .agc-refs-fleche {
  width: 30px;
  height: 30px;
  border: 1px solid var(--agc-border-chip);
  border-radius: var(--agc-r-control);
  background: var(--agc-white);
  color: var(--agc-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.agc-refs-bandeau .agc-refs-fleche svg { width: 15px; height: 15px; }
.agc-refs-bandeau .agc-ref { border-left: 2px solid var(--agc-border); padding-left: .9rem; }
.agc-refs-bandeau .agc-ref-nom  { display: block; font-size: .95rem; font-weight: 500; line-height: 1.35; color: var(--agc-text); }
.agc-refs-bandeau .agc-ref-qual,
.agc-refs-bandeau .agc-ref-qual * { display: block; font-size: .8rem; line-height: 1.4; color: var(--agc-text-3); }
.agc-refs-bandeau .agc-refs-segments { display: flex; gap: .3rem; justify-content: center; margin-top: 1.1rem; }
.agc-refs-bandeau .agc-refs-segment { width: 18px; height: 2px; border: 0; padding: 0; background: var(--agc-border); cursor: pointer; }
.agc-refs-bandeau .agc-refs-segment[aria-selected="true"] { background: var(--agc-orange); }

/* ── Modules hors .agc-ds-section ──
   La remise a zero porte aussi sur eux : leurs couleurs et leurs marges
   doivent etre redeclarees au meme poids, sinon `color: inherit` gagne.
   C'est ce qui a fait passer le bandeau de chiffres a 1,08:1. */
.agc-ds-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--agc-navy); border-radius: var(--agc-r-card); }
.agc-ds-stats .agc-ds-stat { padding: 1rem 1.2rem; text-align: center; }
.agc-ds-stats .agc-ds-stat + .agc-ds-stat { border-left: 1px solid var(--agc-navy-line); }
.agc-ds-stats .agc-ds-stat-value { display: block; font-size: 1.5rem; font-weight: 500; line-height: 1.2; color: var(--agc-white); }
.agc-ds-stats .agc-ds-stat-label { display: block; font-size: .72rem; line-height: 1.4; color: var(--agc-navy-text); }

.agc-facturation { background: var(--agc-warm-bg); border: 1px solid var(--agc-warm-border); border-radius: var(--agc-r-card); padding: 1.2rem; }
.agc-facturation .agc-ds-eyebrow { display: block; margin-bottom: .5rem; font-size: .72rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--agc-orange); }
.agc-facturation .agc-facturation-titre { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 500; color: var(--agc-text); }
.agc-facturation .agc-facturation-texte { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--agc-text-2); }
.agc-facturation .agc-facturation-points { margin: .7rem 0 0; padding: .7rem 0 0; border-top: 1px solid var(--agc-warm-border); display: grid; gap: .35rem; }
.agc-facturation .agc-facturation-points li { display: flex; gap: .5rem; align-items: center; font-size: .9rem; line-height: 1.5; color: var(--agc-text-2); }
.agc-facturation .agc-facturation-points svg { width: 16px; height: 16px; color: var(--agc-orange); flex: none; }

.agc-block-photo { margin: 2.5rem 0; }
.agc-block-photo .agc-block-photo-caption { display: block; margin: .5rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--agc-text-3); }

/* ── Appel a l'action ──
   Composition demandee : surtitre, H2, une ligne de description, puis les
   boutons. Reprise de la maquette d'accueil : section a fond clair, un
   bouton plein orange et un bouton a contour, alignes a droite. La
   variante marine reste disponible par l'attribut « Fond ». */
.agc-ds-section .agc-cta-grille {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.agc-ds-section .agc-cta-texte  { max-width: 34rem; }
.agc-ds-section .agc-cta-desc   { margin: 0; font-size: .9rem; font-weight: 300; line-height: 1.55; color: var(--agc-text-2); }
:is(.agc-ds-section--navy, .agc-ds-on-navy) .agc-cta-desc { color: var(--agc-navy-text); }
.agc-ds-section .agc-cta-actions { display: flex; flex-wrap: wrap; gap: .6rem; flex: none; }
.agc-ds-section .agc-cta-h2      { margin-bottom: .3rem; }

@media (max-width: 700px) {
  .agc-ds-section .agc-cta-grille  { flex-direction: column; align-items: stretch; }
  .agc-ds-section .agc-cta-actions { width: 100%; }
  .agc-ds-section .agc-cta-actions .agc-ds-btn { flex: 1 1 auto; text-align: center; }
}

/* Les redeclarations ci-dessus pesent (0,2,0) et passaient devant les
   regles d'alignement et les media queries, restees a (0,1,0). Meme poids,
   meme place dans la cascade. */
.agc-refs-bandeau .agc-ref { display: flex; flex-direction: column; }
.agc-refs-bandeau .agc-ref-nom  { margin-bottom: .15rem; }
.agc-refs-bandeau .agc-ref-qual { margin-top: auto; }

@media (max-width: 700px) {
  .agc-refs-bandeau .agc-refs-fleches { display: none; }
}

/* ── En-tête de module, deux colonnes (.mhead de la maquette) ── */
.agc-ds-section .agc-ds-mhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.2rem;
}
.agc-ds-section .agc-ds-mhead .agc-ds-eyebrow { margin-bottom: .6rem; }
.agc-ds-section .agc-ds-mhead .agc-ds-h2 { margin: 0; }
.agc-ds-section .agc-ds-mhead-note { flex: none; font-size: .8rem; color: var(--agc-blue); }

/* Motifs : H2 a 1,2 rem du tableau, tableau blanc sur la bande grise. */
.agc-ds-section--surface .agc-ds-h2 { margin-bottom: 1.2rem; }
.agc-ds-section--surface .agc-ds-table { background: var(--agc-white); }

/* Démarrage : H2 a 2 rem des colonnes. */
.agc-ds-section--navy .agc-ds-h2 { margin-bottom: 2rem; }

/* Facturation : tailles de la maquette. */
.agc-facturation .agc-facturation-titre { font-size: 1.25rem; margin-bottom: .4rem; }
.agc-facturation .agc-facturation-texte { font-size: .9rem; }

@media (max-width: 780px) {
  .agc-ds-section .agc-ds-mhead { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* Region sans page de zone : meme carte, sans affordance de lien. */
.agc-zone-lien--sans-page { cursor: default; }
.agc-zone-lien--sans-page:hover { border-color: var(--agc-border); border-left-color: var(--agc-navy); }

/* ════════════════════════════════════════════════════════════════
   PAGE D'ACCUEIL — valeurs de _context/maquette-page-accueil.html
════════════════════════════════════════════════════════════════ */

/* ── Hero, sur marine ── */

/* Quatre chiffres, séparés du reste par un filet — pas de bandeau plein. */

/* ── Médias ── */
.agc-accueil-media {
  display: block;
  overflow: hidden;
  border-radius: 6px;              /* grand média */
  background: var(--agc-media);
}
.agc-accueil-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Sans photo, un aplat étiqueté plutôt qu'un trou dans la grille. */
.agc-accueil-media--vide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--agc-text-3);
}

/* ── Lien de tête de section ── */
.agc-ds-lien {
  flex: none;
  font-size: .85rem;
  color: var(--agc-blue);
  text-decoration: none;
  border-bottom: 1px solid var(--agc-border-chip);
  padding-bottom: 2px;
}
.agc-ds-lien:hover { color: var(--agc-orange); border-bottom-color: var(--agc-orange); }

/* ── Cartes de secteur et de réalisation ── */
.agc-accueil-grille4,
.agc-accueil-grille3 { list-style: none; margin: 0; padding: 0; display: grid; }
.agc-accueil-grille4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }

.agc-accueil-carte {
  display: block;
  height: 100%;
  background: var(--agc-white);
  border: 1px solid var(--agc-border);
  border-radius: var(--agc-r-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.agc-accueil-carte:hover { border-color: var(--agc-orange); }
/* Le média de la carte perd son rayon : c'est la carte qui le porte. */
.agc-accueil-carte .agc-accueil-media { border-radius: 0; }
.agc-accueil-carte-corps { display: block; padding: 1.05rem; }
.agc-accueil-carte-picto { display: block; margin-bottom: .5rem; color: var(--agc-orange); line-height: 0; }

.agc-accueil-carte-titre { display: block; margin-bottom: .2rem; font-size: 1.05rem; font-weight: 500; line-height: 1.4; color: var(--agc-text); }
.agc-accueil-carte-texte { display: block; font-size: .875rem; font-weight: 300; line-height: 1.6; color: var(--agc-text-3); }

/* ── Notre différence ── */
.agc-accueil-diff-grille {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 3rem;
  align-items: center;
}
.agc-accueil-pourquoi {
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .8rem;
}
.agc-accueil-pourquoi > li {
  background: var(--agc-white);
  border: 1px solid var(--agc-border);
  border-radius: var(--agc-r-card);
  padding: 1rem;
}
.agc-accueil-pourquoi-picto  { display: block; margin-bottom: .45rem; color: var(--agc-orange); line-height: 0; }
.agc-accueil-pourquoi-titre  { margin: 0 0 .2rem; font-size: 1.05rem; font-weight: 500; line-height: 1.4; color: var(--agc-text); }
.agc-accueil-pourquoi-texte  { margin: 0; font-size: .85rem; font-weight: 300; line-height: 1.55; color: var(--agc-text-3); }

/* ── Zones, sur marine ──
   ── Pourquoi les classes sont doublees ──
   Ce module est le seul rendu DANS le contenu par un bloc ET hors du
   contenu par un gabarit. Dans le contenu, la remise a zero editoriale
   pese (0,2,0) : a (0,1,0), ces regles perdaient. La carte recevait
   `border: 0` et `color: inherit`, soit un cadre absent et un texte a
   rgb(17, 24, 39) sur marine — invisible. Rendue par le gabarit, la meme
   carte etait correcte, ce qui rendait le defaut difficile a croire.

   Doubler la classe donne (0,2,0) et vaut dans les deux contextes, la ou
   un prefixe de racine de module n'aurait servi que dans l'un des deux. */
.agc-zones-bloc-grille.agc-zones-bloc-grille {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 3rem;
  align-items: center;
}
.agc-zones-bloc-liste.agc-zones-bloc-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
}
.agc-zones-bloc-carte.agc-zones-bloc-carte {
  display: block;
  border: 1px solid var(--agc-navy-contour);
  border-radius: var(--agc-r-control);
  padding: .8rem .95rem;
  text-decoration: none;
  transition: border-color .15s ease;
}
.agc-zones-bloc-carte.agc-zones-bloc-carte:hover,
.agc-zones-bloc-carte.agc-zones-bloc-carte:focus-visible { border-color: var(--agc-orange-on-navy); }
/* Les deux lignes sont blanches ; la hierarchie tient a la taille et a la
   graisse, pas a la couleur. */
.agc-zones-bloc-kicker.agc-zones-bloc-kicker { display: block; font-size: .72rem; font-weight: 300; color: var(--agc-white); }
.agc-zones-bloc-nom.agc-zones-bloc-nom       { display: block; font-size: 1.05rem; font-weight: 500; color: var(--agc-white); }
/* Une région sans page : même carte, sans affordance de lien. */
span.agc-zones-bloc-carte.agc-zones-bloc-carte { cursor: default; }
span.agc-zones-bloc-carte.agc-zones-bloc-carte:hover { border-color: var(--agc-navy-contour); }

/* ── Appel à l'action ── */
.agc-accueil-cta-grille {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.agc-accueil-cta-grille .agc-ds-h2 { margin-bottom: .3rem; }

@media (max-width: 1000px) {
  .agc-accueil-grille4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}
@media (max-width: 860px) {
  .agc-accueil-diff-grille { grid-template-columns: 1fr; gap: 2rem; }
  /* Doublee comme sa declaration de base, sans quoi la media query
     passerait derriere elle. */
  .agc-zones-bloc-grille.agc-zones-bloc-grille { grid-template-columns: 1fr; gap: 2rem; }

}
@media (max-width: 640px) {
  .agc-accueil-grille4,
  .agc-accueil-grille3 { grid-template-columns: 1fr; }
  .agc-accueil-pourquoi { grid-template-columns: 1fr; }
  .agc-zones-bloc-liste.agc-zones-bloc-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Liste d'atouts sur marine (page-services.php) ──
   Ces classes s'appelaient agc-accueil-diff-* alors qu'elles ne servent que
   sur la page catégorie : le nom laissait croire à une dépendance à la page
   d'accueil, qui ne les utilise plus. */
.agc-atouts {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
}
.agc-ds-section .agc-atouts-item  { padding: 0; border: 0; }
.agc-ds-section .agc-atouts-num   { display: block; margin-bottom: .35rem; font-size: .8rem; font-weight: 400; color: var(--agc-orange-on-navy); }
.agc-ds-section .agc-atouts-picto { display: block; margin-bottom: .5rem; color: var(--agc-orange-on-navy); line-height: 0; }
.agc-ds-section .agc-atouts-titre { margin: 0 0 .2rem; font-size: 1.05rem; font-weight: 500; line-height: 1.4; color: var(--agc-white); }
.agc-ds-section .agc-atouts-texte { margin: 0; font-size: .85rem; font-weight: 300; line-height: 1.6; color: var(--agc-navy-text); }

@media (max-width: 1000px) { .agc-atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .agc-atouts { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — GARDE-FOUS

   `1fr` vaut `minmax(auto, 1fr)`, et ce `auto` prend pour minimum la
   taille min-content de l'element. Une image de 3 002 px de large y
   imposait une colonne de 3 002 px : la grille de l'accueil poussait le
   document a 6 300 px et la page defilait lateralement de 5 000 px.
   Toutes les pistes sont donc en `minmax(0, 1fr)`, et les elements de
   grille et de flex recoivent `min-width: 0` — c'est le meme mecanisme.
════════════════════════════════════════════════════════════════ */
.agc-accueil-grille4 > li,
.agc-accueil-grille3 > li,
.agc-zones-bloc-liste > li,
.agc-inclus-grille > li,
.agc-cat-grille > li,
.agc-zones-reassurance > li,
.content-grid > *,
.agc-zones-grille > * { min-width: 0; }

/* Un media ne doit jamais imposer sa largeur intrinseque a son parent. */
.agc-accueil-media,
.agc-block-photo-cadre { max-width: 100%; }
.agc-accueil-media img { max-width: 100%; }

/* ── Cibles tactiles ──
   Le bouton du menu mobile faisait 35 x 35 : sous le seuil confortable,
   et c'est LA commande de navigation sur telephone. */
.nav-hamburger { min-width: 44px; min-height: 44px; }
/* Le numero de telephone de l'en-tete est un lien d'appel : la ou il est
   visible, il doit se toucher sans viser.
   `display` n'est PAS repose ici : une media query le masque sous 980 px, et
   la redeclarer le reaffichait — l'en-tete debordait alors de 31 px a 390. */
.nav-tel { align-items: center; min-height: 44px; }

/* ── Contenu editorial hors gabarit ──
   Les blocs `alignfull` de Gutenberg debordaient la colonne sur petit
   ecran. On les contient dans leur conteneur plutot que dans le viewport. */
/* Un bloc `alignfull` dans une colonne contrainte deborde : il vise la
   largeur de la fenetre. Les colonnes de lecture le brident.
   `.content-main` a disparu au chantier 4 avec la barre laterale — sans
   ajouter les deux nouvelles ici, les images a la une en pleine largeur
   ressortaient de 107 px a 320. */
/* La classe est doublee pour peser (0,3,0). Gutenberg pose
   `.wp-container-core-group-is-layout-XXXX .alignfull { max-width: none }`
   dans un <style> en tete, donc APRES la feuille du theme et au meme poids :
   a (0,2,0) la regle perdait, et une image a la une en pleine largeur faisait
   deborder le document de 107 px a 320.

   C'est une exception assumee aux styles tiers, et elle n'est pas cosmetique :
   un `alignfull` dans une colonne de lecture contrainte deborde la page
   entiere. */
/* Les boucles de requete de Gutenberg sont des grilles dont les items ont le
   plancher `min-content` par defaut : un item plus large que sa piste la fait
   grandir, et la page deborde. `min-width: 0` retire ce plancher sans toucher
   au nombre de colonnes. Meme remede que pour les grilles du theme. */
:is(.agc-page-corps, .agc-article-corps) .wp-block-post-template > li { min-width: 0; }

:is(.content-main, .agc-page-corps, .agc-article-corps) .alignfull.alignfull,
:is(.content-main, .agc-page-corps, .agc-article-corps) .alignwide.alignwide {
  max-width: 100%;
  margin-inline: 0;
}
.content-main :is(figure, img, iframe, video) { max-width: 100%; }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE DES MODULES — remise au meme poids

   Les regles alignees sur la maquette sont prefixees `.agc-ds-section`,
   soit (0,2,0). Les media queries des memes modules etaient restees en
   classe simple, (0,1,0) : elles ne s'appliquaient plus, et la grille du
   perimetre gardait trois colonnes a 320 px — le document defilait
   lateralement de 54 px.

   Meme cause que la barre de navigation, ou une redeclaration de
   `.nav-tel` reaffichait un lien que la media query masquait.
════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .agc-ds-section .agc-inclus-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agc-ds-section .agc-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .agc-ds-section .agc-inclus-grille { grid-template-columns: minmax(0, 1fr); }
  .agc-ds-section .agc-process { grid-template-columns: minmax(0, 1fr); }
  .agc-ds-section .agc-ds-mhead { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* ── Boucles de requete Gutenberg ──
   `.wp-block-post-template.columns-3` est une grille `repeat(3, 1fr)` de
   Gutenberg. Le meme blocage s'y produit : les articles y faisaient 378 px
   dans un conteneur de 268. On ne restyle pas la famille `wp-block-*` —
   on lui applique le seul garde-fou de grille, dans NOTRE colonne. */
.content-main .wp-block-post-template > li { min-width: 0; }
@media (max-width: 780px) {
  .content-main .wp-block-post-template { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ════════════════════════════════════════════════════════════════
   HARMONISATION

   Les surtitres existaient en quatre tailles — .66, .68, .70 et .72 rem —
   selon le gabarit qui les portait. La maquette en fixe une : .72 rem.
   C'est aussi le seuil sous lequel un texte en capitales espacees devient
   penible a lire.
════════════════════════════════════════════════════════════════ */
.section-label,
.logo-bar-label,
.bcard-cat,
.agc-card-surtitre,
.agc-ds-eyebrow,
.agc-ds-section .agc-ds-eyebrow {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* Les etiquettes de formulaire etaient a 11,2 px : trop petit pour un
   libelle qu'on lit avant de saisir. */
.agc-ds-label, .fgroup label { font-size: .78rem; }

/* ── Cibles tactiles des liens de carte ──
   « Voir le service », « Lire l'article » : ce sont des commandes, pas des
   liens de paragraphe. Elles avaient 21 a 25 px de haut. */
.agc-cat-carte-lien,
.agc-service-carte-lien,
.agc-ds-lien,
.agc-inclus-mention a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
/* La pagination du blog : des chiffres de 36 x 13 px, impossibles a viser. */
.pagination .page-numbers,
.nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 .5rem;
  border-radius: var(--agc-r-control);
}
.pagination .page-numbers:hover,
.nav-links .page-numbers:hover { background: var(--agc-surface-alt); }

/* Les micro-etiquettes — pastilles de secteur, tags de carte — existaient
   a .60, .63, .66 et .68 rem. Une seule valeur : .70 rem. En dessous, des
   capitales espacees deviennent penibles a lire. */
.agc-cat-carte-tags li,
.agc-service-carte-tags li,
.agc-ds-chip-libelle,
.zone-name,
.logo-chip-name { font-size: .7rem; }

/* Le substitut d'image doit remplir le cadre de la carte, quelle que soit
   la hauteur que celle-ci lui donne. Il gardait sa hauteur propre et
   l'icone se posait dans l'angle. */
.bcard-img .agc-card-img-vide,
.agc-card-img .agc-card-img-vide { width: 100%; height: 100%; }
.bcard-img, .agc-card-img { display: block; }

/* Accent sur fond marine. `--agc-orange` y plafonne a 3,29:1 ; l'orange
   clair passe a 6,28:1. La regle des deux oranges, appliquee. */
.agc-accent-navy { color: var(--agc-orange-on-navy); font-weight: 500; }
/* Le libelle du substitut d'image etait a 4,35:1 sur son aplat — sous le
   seuil de 4,5. */
.agc-accueil-media--vide { color: var(--agc-text-2); }

/* ════════════════════════════════════════════════════════════════
   RYTHME VERTICAL

   Trois defauts de la meme famille, mesures sur la page service et
   l'accueil.
════════════════════════════════════════════════════════════════ */

/* ── 1. Le hero de l'accueil passait sous la barre fixe ──
   Son rembourrage haut valait 4,2 rem, soit 67 px, pour une barre de
   68 px : le surtitre commencait exactement au ras de celle-ci. La
   hauteur de barre est une variable, on s'en sert plutot que d'ecrire
   une valeur qui se desynchronise. */

/* ── 2. Les modules ne se detachaient pas du texte qui les entoure ──
   Ils portent un rembourrage interieur mais aucune marge : le paragraphe
   suivant collait a 0 px, celui d'avant n'etait separe que par sa propre
   marge basse — 19 px d'un cote, 0 de l'autre. L'ecart est desormais le
   meme au-dessus et en dessous, quel que soit le module.

   `margin-block` et non `margin-top` seul : deux modules consecutifs
   fusionnent alors leurs marges au lieu de les additionner. */
:is(.entry-content, .prose) > :is(.agc-ds-section, .agc-ds-stats, .agc-facturation,
  .agc-block-photo) {
  margin-block: 2.5rem;
}

/* ── Respiration entre le contenu et l'appel a l'action ──
   Le gabarit enchaine la colonne editable puis l'appel a l'action. Sans
   rien, l'ecart dependait du dernier element du contenu :

     dernier element = un module   40 px, sa marge basse traversant la
                                   section, qui n'a ni marge ni
                                   rembourrage propre
     dernier element = du texte     0 px — le paragraphe collait au CTA,
                                   sa marge basse etant annulee par la
                                   regle de dernier enfant editoriale

   Le rembourrage est pose sur la SECTION, pas une marge : une marge
   fusionnerait avec celle du dernier module et ne s'ajouterait pas. Et
   la marge basse du dernier enfant est annulee, sans quoi le cas
   « module » cumulerait 40 + 32 px quand le cas « texte » n'en aurait
   que 32. L'ecart est le meme dans les deux cas. */
.agc-page-contenu { padding-bottom: 2rem; }
.agc-page-contenu > .entry-content > :last-child { margin-bottom: 0; }
/* Un module SANS fond n'a pas besoin de rembourrage vertical : il ferait
   doublon avec la marge. Le perimetre cumulait 64 px de rembourrage et
   40 px de marge, soit 104 px de blanc au-dessus comme en dessous, quand
   une bande coloree — qui, elle, doit respirer a l'interieur de sa
   couleur — en affichait 66. */
:is(.entry-content, .prose) > .agc-ds-section:not(.agc-ds-section--surface):not(.agc-ds-section--navy):not(.agc-refs-bandeau) {
  padding-block: 0;
}
/* Les bandes colorees : meme rembourrage interieur pour toutes. */
:is(.entry-content, .prose) > :is(.agc-ds-section--surface, .agc-ds-section--navy) {
  padding-block: 2.5rem;
}

/* ════════════════════════════════════════════════════════════════
   BLOCS DE CARTES — SECTEURS, NOTRE DIFFERENCE, REALISATIONS

   Valeurs reprises de _context/maquette-page-accueil.html : .card,
   .media, .body, .why, .city, .link, .grid4, .grid3.

   Toutes prefixees par `.agc-ds-section` : (0,2,0) minimum, apres la
   remise a zero. C'est la contrainte posee plus haut, et la seule.
════════════════════════════════════════════════════════════════ */
.agc-ds-section .agc-cartes-h2 { margin: 0; }
.agc-ds-section .agc-ds-mhead  { margin-bottom: 1.3rem; }

/* Le lien de tete et le lien de pied : meme composant. */
.agc-ds-section .agc-ds-lien {
  font-size: .85rem;
  color: var(--agc-blue);
  text-decoration: none;
  border-bottom: 1px solid var(--agc-border-chip);
  padding-bottom: 2px;
  white-space: nowrap;
}
.agc-ds-section .agc-ds-lien:hover { border-bottom-color: var(--agc-blue); }
/* Le lien de « Realisations » passe SOUS la rangee, aligne a droite. */
.agc-ds-section .agc-cartes-pied { margin: 1.1rem 0 0; text-align: right; }

.agc-ds-section .agc-cartes-grille {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .8rem;
}
.agc-ds-section .agc-cartes-grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.agc-ds-section .agc-cartes-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }

/* La carte est cliquable en entier : c'est le <a> lui-meme, pas un lien
   pose sur le titre. Une seule cible, et le focus clavier la designe. */
.agc-ds-section .agc-carte {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--agc-white);
  border: 1px solid var(--agc-border);
  border-radius: var(--agc-r-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease;
}
.agc-ds-section .agc-carte:hover { border-color: var(--agc-orange); }
.agc-ds-section .agc-carte:focus-visible { outline: 2px solid var(--agc-blue); outline-offset: 2px; }

/* Le cadre porte la proportion, jamais l'image : `height: auto` de la
   colonne editoriale reprendrait un ratio pose sur <img>. Meme piege que
   pour le bloc Photo. Sans image, l'aplat garde la place : decalage nul. */
.agc-ds-section .agc-carte-media {
  display: block;
  width: 100%;
  background: var(--agc-media);
  overflow: hidden;
}
.agc-ds-section .agc-carte-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  border-radius: 0;
}
.agc-ds-section .agc-carte-corps { padding: 1.05rem; }
.agc-ds-section .agc-carte-corps svg { width: 20px; height: 20px; color: var(--agc-orange); margin-bottom: .5rem; }
.agc-ds-section .agc-carte-ville {
  display: block;
  margin-bottom: .2rem;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--agc-text-3);
}
.agc-ds-section .agc-carte-titre { margin: 0 0 .2rem; font-size: 1.05rem; font-weight: 500; line-height: 1.4; color: var(--agc-text); }
.agc-ds-section .agc-carte-texte { margin: 0; font-size: .875rem; font-weight: 300; line-height: 1.55; color: var(--agc-text-3); }

/* ── Notre différence ── */
.agc-ds-section .agc-difference-grille {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 3rem;
  align-items: center;
}
.agc-ds-section .agc-difference-media {
  aspect-ratio: 1 / 1;
  background: var(--agc-media);
  border-radius: 6px;              /* grand media : 6 px */
  overflow: hidden;
}
.agc-ds-section .agc-difference-chapeau { margin-bottom: 1.3rem; }
.agc-ds-section .agc-difference-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}
.agc-ds-section .agc-difference-carte {
  background: var(--agc-white);
  border: 1px solid var(--agc-border);
  border-radius: var(--agc-r-card);
  padding: 1rem;
}
.agc-ds-section .agc-difference-carte svg { width: 20px; height: 20px; color: var(--agc-orange); margin-bottom: .45rem; }
.agc-ds-section .agc-difference-carte .agc-carte-texte { font-size: .85rem; }

/* ── Adaptation ──
   Quatre colonnes deviennent deux sur tablette puis une sur telephone ;
   trois passent directement a une, une carte de realisation a deux
   colonnes serait trop etroite pour son image en 16/10. */
/* 1100 et non 1000 : une tablette en paysage fait 1024 px, et quatre
   colonnes y donnent des cartes de 221 px — trop etroites pour une image
   en 4/3 surmontee de deux lignes de texte. */
@media (max-width: 1100px) {
  .agc-ds-section .agc-cartes-grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agc-ds-section .agc-difference-grille { grid-template-columns: 1fr; gap: 2rem; }
  .agc-ds-section .agc-difference-media  { max-width: 420px; }
}
@media (max-width: 720px) {
  /* `minmax(0, 1fr)` et non `1fr` : ce dernier vaut `minmax(auto, 1fr)`, dont
     le plancher min-content laisse une carte deborder sa piste. Le cadre
     d'image, qui porte une proportion sans largeur definie, produisait des
     cartes de 3 002 px de large a 390. */
.agc-ds-section .agc-cartes-grille--4,
  .agc-ds-section .agc-cartes-grille--3 { grid-template-columns: minmax(0, 1fr); }
  .agc-ds-section .agc-difference-liste { grid-template-columns: minmax(0, 1fr); }
  /* L'en-tete a deux colonnes se replie : le lien sous le titre plutot
     que serre contre lui. */
  .agc-ds-section .agc-ds-mhead { flex-direction: column; align-items: flex-start; gap: .7rem; }
  .agc-ds-section .agc-cartes-pied { text-align: left; }
}

/* ── Problèmes clients, atouts, pour qui ──
   Sections reprises du gabarit page-service.php, remises au design system :
   elles portaient des styles en ligne et des couleurs hors palette. */
.agc-ds-section .agc-problemes-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin-top: 1.3rem;
}
.agc-ds-section .agc-problemes-liste {
  list-style: none;
  margin: 0;
  padding: 1.2rem;
  background: var(--agc-white);
  border: 1px solid var(--agc-border);
  border-radius: var(--agc-r-card);
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.agc-ds-section .agc-problemes-liste li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--agc-text-2);
}
/* Un tiret plutot qu'une croix rouge : ce sont des constats, pas des
   erreurs, et le rouge n'est pas dans la palette. */
.agc-ds-section .agc-problemes-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: .55rem;
  height: 1px;
  background: var(--agc-orange);
}

/* `.agc-svc-atouts` et non `.agc-atouts` : ce dernier existe deja pour la
   liste d'atouts de page-services.php, et il met son element en grille de
   quatre colonnes. Reutiliser le nom transformait la SECTION du bloc en
   grille — titre coupe mot par mot, cartes de 26 px. */
.agc-ds-section .agc-svc-atouts-liste { gap: .8rem; }
.agc-ds-section .agc-svc-atouts-carte {
  background: var(--agc-white);
  border: 1px solid var(--agc-border);
  border-radius: var(--agc-r-card);
  padding: 1.15rem;
}

.agc-ds-section .agc-pourqui-grille {
  display: grid;
  grid-template-columns: 1fr .72fr;
  gap: 2.5rem;
  align-items: start;
}
.agc-ds-section .agc-pourqui-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.agc-ds-section .agc-pourqui-liste li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--agc-text-2);
}
.agc-ds-section .agc-pourqui-liste svg { width: 16px; height: 16px; flex: none; margin-top: .25rem; color: var(--agc-orange); }

@media (max-width: 720px) {
  .agc-ds-section .agc-problemes-grille { grid-template-columns: 1fr; }
  .agc-ds-section .agc-pourqui-grille   { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ── Pleine largeur ────────────────────────────────────────────────────
   Une bande coloree qui s'arrete a 1200 px au milieu d'un fond blanc se
   lit comme une carte, pas comme une bande. Ce modificateur la fait
   sortir jusqu'aux bords de la fenetre ; son `.agc-ds-container` garde sa
   largeur et son rembourrage, si bien que le texte reste aligne sur le
   reste de la page.

   Une seule declaration, et elle est juste dans les deux contextes :
   dans une colonne de 820 px, 50% vaut 410 et 50vw 720, la marge vaut
   -310 px de chaque cote et le bloc atteint exactement le bord ; rendue
   par un gabarit, la section occupe deja toute la largeur, 50% egale
   50vw, la marge tombe a 0 et la regle ne fait rien.

   Elle suppose la colonne CENTREE dans son parent — c'est le cas de
   .agc-mesure et de .entry-content, tous deux en margin-inline: auto.

   Sur la barre de defilement : la sortie de colonne a 1200 px retranche
   3rem au viewport pour ne pas en dependre. Une pleine largeur, elle, ne
   peut pas — 100vw inclut la barre par definition. Le debordement est
   absorbe par `body { overflow-x: hidden }`, deja en place, et il ne
   rogne que du fond, jamais du texte : le contenu reste dans son
   conteneur centre.

   Le selecteur double : la version prefixee passe devant la sortie de
   colonne, qui pese (0,2,0) ; la version nue sert quand la section est
   rendue par un gabarit, hors de .entry-content. */
.agc-ds-section--pleine { margin-inline: calc(50% - 50vw); }
:is(.entry-content, .prose) > .agc-ds-section--pleine { margin-inline: calc(50% - 50vw); }

/* ── 3. Le bandeau de references reste plus serre a l'interieur ──
   C'est une bande, pas une section : 1,6 rem de rembourrage comme la
   maquette. Mais son ecart AVEC le texte doit etre celui des autres
   modules, sinon il parait colle. */
:is(.entry-content, .prose) > .agc-refs-bandeau { padding-block: 1.6rem; }

/* ════════════════════════════════════════════════════════════════
   LE CONTENEUR GARDE LA MAIN SUR L'AXE HORIZONTAL

   Plusieurs modules portent `.agc-ds-container` sur la liste elle-meme —
   `<ul class="agc-ds-container agc-cat-grille">`. Les regles de liste y
   remettent `margin: 0; padding: 0`, a poids egal et plus loin dans le
   fichier : le conteneur perdait son rembourrage lateral ET son
   centrage. Sur la page Nos services, « Ce qui fait la difference »
   touchait les deux bords de l'ecran, a 1440 comme a 390.

   Le conteneur reprend donc l'axe horizontal a (0,2,0). Les modules
   gardent la main sur l'axe vertical, ou ils ont de bonnes raisons de
   remettre les compteurs a zero.
════════════════════════════════════════════════════════════════ */
.agc-ds-container.agc-ds-container {
  max-width: var(--agc-container);
  margin-inline: auto;
  /* 5vw comme la maquette, mais jamais moins de 20 px : a 320 px d'ecran
     5vw ne fait que 16 px, et le texte frole le bord. */
  padding-inline: max(1.25rem, 5vw);
}

/* ════════════════════════════════════════════════════════════════
   UNE SEULE LARGEUR DE CONTENU

   La page service cumulait huit largeurs ecrites en dur — 760, 800,
   900, 960, 1000, 1013, 1056, 1200 — et la section Zones n'avait aucun
   conteneur : elle s'etalait sur 1 296 px quand le bloc Methode juste
   en dessous etait plafonne a 960. Deux sections voisines, deux
   largeurs, et les cartes de zone qui frolaient le bord.

   Toutes passent par `.agc-ds-container`. Une valeur, un seul endroit.
════════════════════════════════════════════════════════════════ */
.agc-centre { text-align: center; }
.agc-centre .agc-ds-lede { margin-inline: auto; }

/* La bande Zones reprend le fond marine et le rythme des sections. */
/* .agc-zones-bande : plus rendu, la section porte --navy directement. */

/* Les deux colonnes des sections « pour qui / la difference ». */
.agc-2col--grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
@media (max-width: 780px) {

}

/* ── Colonne de lecture ──
   Elle valait 600 px par la variable, 760 en dur sur la page service.
   Une seule valeur, et plus large : sur un conteneur de 1 200 px, 600
   laissait deux tiers de blanc de chaque cote. 820 px reste une mesure
   tenable — environ 100 caracteres en Sora 16 px — et le `min()` la
   rend fluide jusqu'au plus petit ecran. */
/* `.agc-mesure` vit dans une section deja rembourree : la mesure suffit.
   `.agc-cat-contenu` vit dans une section a rembourrage nul — il porte
   donc le sien, et sa largeur maximale l'integre pour que le TEXTE fasse
   bien 820 px, pas 820 moins le rembourrage. */
.agc-mesure { max-width: var(--agc-measure); margin-inline: auto; }
.agc-cat-contenu {
  max-width: calc(820px + 2 * max(1.25rem, 5vw));
  margin-inline: auto;
  padding-inline: max(1.25rem, 5vw);
}

/* ── Le hero et la bande finale rejoignent la meme largeur ──
   Le hero s'ouvrait a 1 200 px et la bande d'appel a 1 013 : trois
   largeurs differentes sur une meme page, avec les 1 056 des sections.
   Le rembourrage lateral passe du bord de la section a une enveloppe
   interne, comme partout ailleurs. */
/* Le hero garde sa pleine largeur : la marge vient du rembourrage de la
   section, pas d'un conteneur interne. Le ramener a 1 056 px comme les
   sections le resserrait de 144 px — un hero n'a pas la meme fonction
   qu'une section de contenu, il s'ouvre. */
/* La bande d'appel est un flex : on ne peut pas y glisser un conteneur
   sans toucher au balisage de six gabarits. Son contenu est donc borne
   par un rembourrage calcule, qui aboutit a la meme largeur utile —
   1 056 px — que les sections. La repartition d'origine, titre a gauche
   et boutons a droite, est conservee. */
.cta-band {
  padding-inline: max(1.25rem, calc((100% - var(--agc-container)) / 2 + 5vw));
}

/* Le hero de l'accueil s'ouvre comme les autres : son contenu commence au
   meme endroit — x=120 a 1440 — et non 72 px plus loin. La marge vient du
   rembourrage de la section, la grille ne remet pas le sien par-dessus. */

/* ── Espace entre le hero et le contenu ──
   Le hero fermait sur 4 rem de rembourrage bas, et la section suivante
   ouvrait sur 4 rem : 128 px de blanc empiles, alors qu'aucun des deux
   n'en avait besoin seul. Le hero se referme desormais sur 2 rem — la
   section qui suit porte sa propre respiration, et c'est elle qui doit
   la porter quand elle a un fond. */

/* ════════════════════════════════════════════════════════════════
   HERO — COMPOSANT UNIQUE

   Remplace trois familles etanches : `agc-hero` (service, pivots),
   `page-hero` (page simple, article, archive, realisation) et
   `agc-accueil-hero` (l'accueil a lui seul). Aucune ne partageait la
   moindre regle avec les autres.

   Cinq types, un seul jeu de classes. Valeurs reprises des maquettes
   page-service, types-de-page et pages-pivots.
════════════════════════════════════════════════════════════════ */
.agc-hero {
  padding-block: 3.5rem;
  padding-inline: max(1.25rem, 5vw);
  background: var(--agc-surface);
  border-bottom: 1px solid var(--agc-border);
}
/* La barre de navigation est fixe : le premier bloc de la page doit
   commencer en dessous, sans quoi le surtitre passe sous elle. */
.agc-hero { padding-top: calc(var(--agc-nav-h) + 3rem); }

.agc-hero-grille { display: block; }
.agc-hero--service .agc-hero-grille,
.agc-hero--navy .agc-hero-grille {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 3rem;
}
.agc-hero--service .agc-hero-grille { align-items: start; }
.agc-hero--navy .agc-hero-grille    { align-items: center; }
/* Sans media, la seconde colonne laisserait un vide : une seule colonne. */
.agc-hero--sans-media .agc-hero-grille { display: block; }

/* ── Fonds ── */
.agc-hero--navy {
  background: var(--agc-navy);
  border-bottom: 0;
  padding-block: 3rem;
  padding-top: calc(var(--agc-nav-h) + 3rem);
}
/* Le hero nu ne pose aucun bandeau : il ne porte que le titre. C'est la
   reponse au « aucun hero » des pages legales — aucun BANDEAU, pas aucun
   titre. Un H1 rendu puis masque en CSS serait un ecart entre ce qui est
   indexe et ce qui est affiche. */
.agc-hero--nu {
  background: none;
  border-bottom: 0;
  padding-block: 0;
  padding-top: calc(var(--agc-nav-h) + 2.5rem);
}

/* ── Texte ── */
.agc-hero-surtitre { display: block; margin-bottom: .8rem; }
.agc-hero-h1 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 3.4vw, 2.85rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.03em;
  color: var(--agc-text);
}
.agc-hero-chapeau {
  margin: 0 0 1.3rem;
  max-width: 34rem;
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--agc-text);
}
.agc-hero-meta {
  margin: 0;
  font-size: .875rem;
  font-weight: 300;
  color: var(--agc-text-3);
}
.agc-hero-preuve { margin: 0 0 .9rem; font-size: .875rem; font-weight: 300; color: var(--agc-text-3); }
.agc-hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.1rem; }
.agc-hero-chips {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .45rem; margin: 0; padding: 0; list-style: none;
}
.agc-hero-chips .agc-ds-chip { list-style: none; }

/* Sur marine : titre blanc, chapeau et meta en bleu clair. */
.agc-hero--navy .agc-hero-h1      { color: var(--agc-white); }
.agc-hero--navy .agc-hero-chapeau,
.agc-hero--navy .agc-hero-meta,
.agc-hero--navy .agc-hero-preuve  { color: var(--agc-navy-text); }
.agc-hero--navy .agc-hero-chapeau { max-width: 32rem; }

/* L'article : une colonne etroite, pas de boutons — le hero ne doit pas
   repousser la lecture. */
.agc-hero--article,
.agc-hero--nu { padding-block: 2.2rem; padding-top: calc(var(--agc-nav-h) + 2.2rem); }
.agc-hero--article .agc-hero-texte,
.agc-hero--nu .agc-hero-texte { max-width: 800px; }
.agc-hero--article .agc-hero-h1 { font-size: clamp(1.7rem, 2.8vw, 2rem); }
.agc-hero--article .agc-hero-chapeau { margin-bottom: .6rem; }

/* ── Media ──
   Le cadre porte la proportion, jamais l'image : `height: auto` de la
   colonne editoriale reprendrait un ratio pose sur <img>. Meme piege que
   pour le bloc Photo et les cartes. */
.agc-hero-cadre {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;              /* grand media */
  background: var(--agc-media);
}
.agc-hero-cadre > img,
.agc-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  border-radius: 0;
}
.agc-hero-media { position: relative; }
/* Sur fond clair, le bandeau de chiffres deborde le bas de la photo. */
.agc-hero--service .agc-hero-media { padding-bottom: 2.2rem; }

/* ── Chiffres ── */
.agc-hero-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.agc-hero-stats-valeur, .agc-hero-stat-valeur {
  display: block; font-size: 1.4rem; font-weight: 500; line-height: 1.2;
}
.agc-hero-stat-libelle { display: block; font-size: .72rem; font-weight: 300; }
/* Sous le texte, sur marine : filet de separation, pas de fond. */
.agc-hero-stats--texte {
  margin-top: 1.1rem;
  max-width: 26rem;
  border-top: 1px solid var(--agc-navy-line);
  padding-top: 1.1rem;
}
.agc-hero--navy .agc-hero-stat-valeur  { color: var(--agc-white); }
.agc-hero--navy .agc-hero-stat-libelle { color: var(--agc-navy-text); }
/* En debord de la photo, sur fond clair : bandeau marine plein. */
.agc-hero-stats--media {
  position: absolute;
  left: 1.2rem; right: 1.2rem; bottom: 0;
  background: var(--agc-navy);
  border-radius: var(--agc-r-card);
  padding: 1rem 1.2rem;
  text-align: center;
}
.agc-hero-stats--media .agc-hero-stat-valeur  { color: var(--agc-white); }
.agc-hero-stats--media .agc-hero-stat-libelle { color: var(--agc-navy-text); }
.agc-hero-stats--seul {
  margin-top: 1.4rem;
  max-width: 26rem;
  border-top: 1px solid var(--agc-border);
  padding-top: 1.1rem;
}
.agc-hero-stats--seul .agc-hero-stat-valeur  { color: var(--agc-text); }
.agc-hero-stats--seul .agc-hero-stat-libelle { color: var(--agc-text-3); }

/* L'encart de consentement de la carte est une surface CLAIRE posee dans un
   hero marine. Sans cette regle, son bouton heritait de
   `.agc-ds-on-navy .agc-ds-btn--secondary` — texte blanc sur fond clair,
   1,17:1. Le contexte visuel d'un composant est celui de la surface qui le
   porte, pas celui de la section. */
.agc-hero .agc-carte-attente .agc-ds-btn--secondary.agc-ds-btn--secondary {
  background: var(--agc-white);
  color: var(--agc-text);
  border-color: var(--agc-border-chip);
}
.agc-hero .agc-carte-attente .agc-ds-btn--secondary.agc-ds-btn--secondary:hover {
  background: var(--agc-surface);
}

/* ── Adaptation ── */
@media (max-width: 900px) {
  .agc-hero--service .agc-hero-grille,
  .agc-hero--navy .agc-hero-grille { grid-template-columns: 1fr; gap: 2rem; }
  .agc-hero--service .agc-hero-media { padding-bottom: 0; }
  .agc-hero-stats--media { position: static; margin-top: .8rem; }
}
@media (max-width: 560px) {
  /* Quatre chiffres cote a cote deviennent illisibles : deux par ligne. */
  .agc-hero-stats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .9rem; }
}

/* ════════════════════════════════════════════════════════════════
   PAGE CONTACT
   Valeurs de _context/maquette-page-contact.html.
════════════════════════════════════════════════════════════════ */
.agc-ds-section .agc-contact-grille {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 2.6rem;
  align-items: start;
}
.agc-ds-section .agc-contact-h2 { margin-bottom: 1.1rem; }

/* La carte du formulaire. */
.agc-ds-section .agc-contact-carte {
  background: var(--agc-white);
  border: 1px solid var(--agc-border);
  border-radius: var(--agc-r-card);
  padding: 1.5rem;
}
.agc-ds-section .agc-contact-rgpd {
  margin: .85rem 0 0;
  font-size: .78rem;
  font-weight: 300;
  color: var(--agc-text-3);
}

/* ── Coordonnées ── */
.agc-ds-section .agc-contact-liste {
  list-style: none;
  margin: .9rem 0 0;
  padding: 0;
}
.agc-ds-section .agc-contact-liste li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin-bottom: .95rem;
}
.agc-ds-section .agc-contact-liste li:last-child { margin-bottom: 0; }
.agc-ds-section .agc-contact-liste svg { width: 17px; height: 17px; flex: none; margin-top: .28rem; color: var(--agc-orange); }
.agc-ds-section .agc-contact-libelle {
  display: block;
  margin-bottom: .1rem;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--agc-text-3);
}
.agc-ds-section .agc-contact-liste span,
.agc-ds-section .agc-contact-liste a { font-size: .95rem; color: var(--agc-text); }
.agc-ds-section .agc-contact-liste a { text-decoration: none; border-bottom: 1px solid var(--agc-border-chip); }
.agc-ds-section .agc-contact-liste a:hover { border-bottom-color: var(--agc-blue); color: var(--agc-blue); }

.agc-ds-section .agc-contact-renvoi {
  margin: 1.4rem 0 0;
  border-top: 1px solid var(--agc-border);
  padding-top: 1.1rem;
  font-size: .85rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--agc-text-2);
}
.agc-ds-section .agc-contact-renvoi a { color: var(--agc-blue); }

/* ── Le formulaire, rendu par Fluent Forms ──
   EXCEPTION ASSUMEE a la regle des styles tiers, decidee dans la maquette :
   c'est le point de conversion de la page, et le bouton d'envoi y arrivait
   en jaune, hors palette. On ne touche qu'a la peinture — champs, etiquettes,
   bouton — jamais a la structure ni au comportement de l'extension. */
.agc-contact-form .ff-el-group { margin-bottom: .85rem; }
.agc-contact-form .ff-el-input--label label {
  font-size: .82rem;
  font-weight: 500;
  color: var(--agc-text);
  margin-bottom: .28rem;
}
.agc-contact-form .ff-el-form-control {
  height: 42px;
  padding: 0 .75rem;
  border: 1px solid var(--agc-border-chip);
  border-radius: var(--agc-r-control);
  background: var(--agc-white);
  font-family: var(--agc-font);
  font-size: .92rem;
  font-weight: 300;
  color: var(--agc-text);
  box-shadow: none;
}
.agc-contact-form textarea.ff-el-form-control { height: 110px; padding-top: .6rem; }
.agc-contact-form .ff-el-form-control:focus-visible {
  outline: 2px solid var(--agc-blue);
  outline-offset: 1px;
  border-color: var(--agc-blue);
}
/* La COULEUR du bouton n'est pas posee ici. Fluent Forms l'injecte par
   `form.fluent_form_4 .ff-btn-submit:not(.ff_btn_no_style)`, soit (0,3,1) :
   surencherir demanderait un selecteur artificiel, et la valeur resterait en
   double — dans la feuille du theme et dans les reglages de l'extension.
   Elle se change la ou l'extension l'attend : Fluent Forms → Demande contact
   → Styling. Voir OP-23. Ici, seule la FORME du bouton est reprise, que
   l'extension ne fixe pas. */
.agc-contact-form .ff-btn-submit,
.agc-contact-form .ff-btn.ff-btn-submit {
  border: 0;
  border-radius: var(--agc-r-control);
  padding: .8rem 1.4rem;
  font-family: var(--agc-font);
  font-size: .95rem;
  font-weight: 400;
  box-shadow: none;
}
/* Deux champs par ligne sur les colonnes courtes, comme la maquette. */
.agc-contact-form .ff-t-cell { padding-inline: 0; }
.agc-contact-form .ff-t-container { gap: .85rem; }

@media (max-width: 860px) {
  .agc-ds-section .agc-contact-grille { grid-template-columns: 1fr; gap: 2rem; }
}

/* ── Bandeau de réassurance, page devis ──
   Il remplace l'appel à l'action : le visiteur est déjà sur le formulaire.
   Valeurs de _context/maquette-types-de-page.html. */
.agc-ds-section .agc-reassurance-grille {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.6rem;
}
.agc-ds-section .agc-reassurance-grille li { display: flex; align-items: flex-start; gap: .7rem; }
.agc-ds-section .agc-reassurance-grille svg { flex: none; margin-top: .15rem; color: var(--agc-orange-on-navy); }
.agc-ds-section .agc-reassurance-titre {
  display: block;
  margin-bottom: .1rem;
  font-size: .95rem;
  font-weight: 500;
  color: var(--agc-white);
}
.agc-ds-section .agc-reassurance-texte {
  display: block;
  font-size: .8rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--agc-navy-text);
}
.agc-ds-section.agc-reassurance { padding-block: 2.2rem; }

@media (max-width: 1000px) { .agc-ds-section .agc-reassurance-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .agc-ds-section .agc-reassurance-grille { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════
   PAGE DEVIS
   Valeurs de _context/maquette-types-de-page.html, section 4.
════════════════════════════════════════════════════════════════ */
.agc-ds-section .agc-devis-grille {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 3rem;
  align-items: start;
}
.agc-ds-section .agc-devis-h2 { font-size: 1.15rem; margin-bottom: 1rem; }

.agc-ds-section .agc-devis-engagements { list-style: none; margin: 0; padding: 0; }
.agc-ds-section .agc-devis-engagements li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: .7rem;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--agc-text-2);
}
.agc-ds-section .agc-devis-engagements svg { flex: none; margin-top: .2rem; color: var(--agc-orange); }

/* L'encart d'appel : une surface marine dans une section claire. */
.agc-ds-section .agc-devis-appel {
  margin-top: 1.4rem;
  padding: 1.2rem;
  background: var(--agc-navy);
  border-radius: var(--agc-r-card);
}
.agc-ds-section .agc-devis-appel-titre {
  margin: 0 0 .6rem;
  font-size: .95rem;
  font-weight: 500;
  color: var(--agc-white);
}
.agc-ds-section .agc-devis-appel-heures {
  margin: 0 0 .8rem;
  font-size: .85rem;
  font-weight: 300;
  color: var(--agc-navy-text);
}
.agc-ds-section .agc-devis-appel-lien { display: inline-flex; align-items: center; gap: .45rem; }

.agc-ds-section .agc-devis-confiance {
  margin: 1.4rem 0 0;
  border-top: 1px solid var(--agc-border);
  padding-top: 1rem;
  font-size: .8rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--agc-text-3);
}

/* La carte du formulaire. Le style des champs est celui de la page contact —
   `.agc-contact-form` — pour ne pas tenir deux jeux de regles pour deux
   formulaires identiques a l'oeil. */
.agc-ds-section .agc-devis-carte {
  background: var(--agc-white);
  border: 1px solid var(--agc-border);
  border-radius: var(--agc-r-card);
  padding: 1.6rem;
}

@media (max-width: 860px) {
  .agc-ds-section .agc-devis-grille { grid-template-columns: 1fr; gap: 2rem; }
}

/* ════════════════════════════════════════════════════════════════
   BLOG — ARCHIVE ET ARTICLE
   Valeurs de _context/maquette-types-de-page.html, sections 1 et 2.
════════════════════════════════════════════════════════════════ */

/* ── Filtres par catégorie ── */
.agc-ds-section .agc-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.6rem;
}
.agc-ds-section .agc-filtre {
  padding: .4rem .85rem;
  border: 1px solid var(--agc-border-chip);
  border-radius: var(--agc-r-control);
  font-size: .85rem;
  color: var(--agc-text-2);
  text-decoration: none;
}
.agc-ds-section .agc-filtre:hover { border-color: var(--agc-text-2); color: var(--agc-text); }
.agc-ds-section .agc-filtre--actif { border-color: var(--agc-text); color: var(--agc-text); }
.agc-ds-section .agc-filtre:focus-visible { outline: 2px solid var(--agc-blue); outline-offset: 2px; }

/* ── Pagination ── */
.agc-blog-pagination { margin-top: 2rem; }
.agc-blog-pagination .nav-links {
  display: flex;
  gap: .4rem;
  justify-content: center;
  align-items: center;
}
.agc-blog-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 .4rem;
  border: 1px solid var(--agc-border-chip);
  border-radius: var(--agc-r-control);
  font-size: .85rem;
  color: var(--agc-text-2);
  text-decoration: none;
}
.agc-blog-pagination .page-numbers.current { border-color: var(--agc-text); color: var(--agc-text); }
.agc-blog-pagination .page-numbers:hover { border-color: var(--agc-text-2); }
.agc-blog-pagination .page-numbers.dots { border: 0; }

/* ── L'article ──
   800 px pour la colonne, comme la maquette. La barre laterale a ete
   retiree : elle reduisait la largeur de lecture pour afficher un encart
   devis que l'appel a l'action final porte mieux. */
.agc-ds-section .agc-article-corps,
.agc-ds-section .agc-page-corps { max-width: 800px; }
.agc-article-corps .prose > p { max-width: 600px; }

/* Le premier paragraphe d'un article ouvre la lecture. */
.agc-article-corps .prose > p:first-child {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--agc-text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RÉALISATIONS — chantier 9
   Archive, page detail, fiche technique, resultats chiffres.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Etiquettes chiffrees sur la carte ────────────────────────────────────
   Surfaces et frequence. La maquette en fait le point cle : « c'est ce qui
   distingue une realisation d'une photo ». */
.agc-real-tags { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.agc-real-tag {
  font-size: .72rem; line-height: 1.4; padding: .2rem .55rem;
  background: var(--agc-surface); border: 1px solid var(--agc-border);
  border-radius: 3px; color: var(--agc-text-3);
}

/* ── Archive ──────────────────────────────────────────────────────────── */
.agc-real-archive .agc-filtres { margin-bottom: 1.6rem; }

.agc-real-vide { max-width: 42rem; margin: 0 0 2.4rem; }
.agc-real-vide-texte { font-size: 1.05rem; color: var(--agc-text-2); margin: 0; }

.agc-pagination { margin-top: 2.4rem; }
.agc-pagination .nav-links { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.agc-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.2rem; padding: .4rem .7rem; border: 1px solid var(--agc-border-chip);
  border-radius: 3px; font-size: .9rem; color: var(--agc-text-2); text-decoration: none;
}
.agc-pagination .page-numbers:hover { border-color: var(--agc-text); color: var(--agc-text); }
.agc-pagination .page-numbers.current { border-color: var(--agc-text); color: var(--agc-text); font-weight: 500; }

/* ── Page realisation : la preuve avant le texte ──────────────────────── */
.agc-real-mea { margin: 1.8rem 0 0; }
.agc-real-mea-img {
  display: block; width: 100%; height: auto; aspect-ratio: 21 / 9;
  object-fit: cover; border-radius: var(--agc-r-media, 6px);
}

/* ── Deux colonnes : texte a gauche, fiche collante a droite ───────────── */
.agc-real-colonnes {
  display: grid;
  /* minmax(0,…) et non 1.35fr seul : le plancher `auto` d'une piste `fr` vaut
     min-content, et un tableau ou un bloc de code y ferait deborder la grille. */
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: 2.6rem;
  align-items: start;
}

.agc-real-fiche {
  background: var(--agc-white); border: 1px solid var(--agc-border);
  border-radius: 4px; padding: 1.2rem;
  position: sticky; top: 1rem;
}
.agc-real-fiche .agc-ds-eyebrow { display: block; margin-bottom: .8rem; }
.agc-real-fiche-ligne {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .6rem 0; border-bottom: 1px solid var(--agc-border-soft);
}
.agc-real-fiche-ligne:last-of-type { border-bottom: none; }
.agc-real-fiche-ligne svg { width: 16px; height: 16px; color: var(--agc-orange); flex: none; margin-top: .28rem; }
.agc-real-fiche-ligne small {
  display: block; font-size: .7rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--agc-text-3); margin-bottom: .05rem;
}
.agc-real-fiche-ligne span { font-size: .92rem; color: var(--agc-text); }
.agc-real-fiche-ligne a { color: var(--agc-blue); text-decoration: none; }
.agc-real-fiche-ligne a:hover { text-decoration: underline; }
.agc-real-fiche-pied { border-top: 1px solid var(--agc-border); margin-top: .8rem; padding-top: .9rem; }
.agc-real-fiche-pied .agc-ds-btn { display: block; text-align: center; }

/* ── Resultats chiffres ────────────────────────────────────────────────────
   Autant de colonnes que de lignes renseignees : deux resultats donnent deux
   colonnes, pas trois dont une vide. */
.agc-real-res {
  display: grid;
  grid-template-columns: repeat(var(--agc-real-res-n, 3), minmax(0, 1fr));
  gap: 1rem; margin: 1.4rem 0;
}
.agc-real-res > div { border-left: 2px solid var(--agc-orange); padding-left: .9rem; }
.agc-real-res b { display: block; font-size: 1.5rem; font-weight: 500; line-height: 1.2; color: var(--agc-text); }
.agc-real-res span { font-size: .8rem; color: var(--agc-text-3); }

/* Le bloc traverse le reset de module : il est insere DANS le contenu, et le
   reset y remet la mesure de lecture et les marges de paragraphe. (0,2,0) et
   apres, comme les autres modules. */
:is(.entry-content, .prose) .agc-real-res.agc-real-res { margin: 1.4rem 0; max-width: none; }
:is(.entry-content, .prose) .agc-real-res.agc-real-res > div { margin: 0; }

/* ── Repli ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Une colonne, et la fiche AU-DESSUS du texte : ses donnees verifiables
     sont ce qu'un prospect cherche en premier sur petit ecran. */
  .agc-real-colonnes { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .agc-real-fiche { position: static; order: -1; }
}
@media (max-width: 600px) {
  .agc-real-res { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOC ÉQUIPE

   ── Pourquoi chaque regle porte `.agc-equipe.agc-equipe` ────────────────────
   Le bloc est inserable DANS le contenu, et sa racine est un `.agc-ds-section`
   — donc une racine de la remise a zero des modules, qui pese (0,2,0) et
   annule `border`, `color`, `font-weight` et `line-height` sur tout ce qu'elle
   couvre : h3, p, ul, li, blockquote.

   Ecrites en (0,1,0), les regles du composant perdaient. Le filet orange de la
   citation ne sortait pas — mesure : `border-left: 0px none`.

   La classe doublee porte l'ancetre a (0,2,0), et chaque regle a (0,3,0) avec
   sa propre classe : au-dessus de la remise a zero, et posee apres elle.
   C'est la regle que CLAUDE.md enonce — « un module doit peser au moins
   (0,2,0) et venir apres ».
═══════════════════════════════════════════════════════════════════════════ */

.agc-equipe.agc-equipe .agc-equipe-chapeau { margin: 0 0 .4rem; }

/* La grille suit le NOMBRE REEL de membres, plafonne a quatre par le PHP :
   deux membres donnent deux colonnes, pas quatre dont deux vides.
   minmax(0,1fr) et non 1fr : le plancher `auto` d'une piste `fr` vaut
   min-content, et un nom long y ferait deborder la grille. */
.agc-equipe.agc-equipe .agc-equipe-grille {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(var(--agc-equipe-n, 4), minmax(0, 1fr));
  gap: 1.1rem;
}

.agc-equipe.agc-equipe .agc-equipe-membre {
  margin: 0;
  padding: 0;
  background: var(--agc-white);
  border: 1px solid var(--agc-border);
  border-radius: 4px;
  overflow: hidden;
  /* Colonne flexible : c'est elle qui cale la citation en bas et donne aux
     cartes d'une meme rangee la meme hauteur. */
  display: flex;
  flex-direction: column;
}

/* Le conteneur porte la proportion, l'image le remplit.
   `overflow: hidden` n'est pas cosmetique : sans lui, la boite grandit pour
   contenir l'image, dont `height: 100%` d'un parent en hauteur `auto` retombe
   sur la hauteur INTRINSEQUE — un portrait de 1500 px donnait une carte de
   1669 px de haut, proportion 0,17 au lieu de 0,75. */
.agc-equipe.agc-equipe .agc-equipe-media {
  aspect-ratio: 3 / 4;
  background: var(--agc-media);
  flex: none;
  overflow: hidden;
}
.agc-equipe.agc-equipe .agc-equipe-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Sans photo : aplat marine et initiales. Plus honnete qu'une image
   d'illustration, et la grille reste homogene. */
.agc-equipe.agc-equipe .agc-equipe-media--initiales {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--agc-navy);
  color: var(--agc-white);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1;
}

.agc-equipe.agc-equipe .agc-equipe-corps {
  padding: .95rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.agc-equipe.agc-equipe .agc-equipe-nom {
  margin: 0 0 .1rem;
  padding: 0;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--agc-text);
}
.agc-equipe.agc-equipe .agc-equipe-fonction {
  margin: 0 0 .55rem;
  padding: 0;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--agc-text-3);
}
/* `flex: 1` pousse la citation en bas de carte. Sans description, la citation
   remonte d'elle-meme : la carte ne garde pas d'espace vide. */
.agc-equipe.agc-equipe .agc-equipe-desc {
  margin: 0 0 .8rem;
  padding: 0;
  font-size: .85rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--agc-text-3);
  flex: 1;
}
.agc-equipe.agc-equipe .agc-equipe-citation {
  margin: 0;
  padding: 0 0 0 .75rem;
  border: 0;
  border-left: 2px solid var(--agc-orange);
  font-size: .85rem;
  font-weight: 300;
  font-style: normal;
  line-height: 1.6;
  color: var(--agc-text);
}

@media (max-width: 900px) {
  .agc-equipe.agc-equipe .agc-equipe-grille {
    grid-template-columns: repeat(min(var(--agc-equipe-n, 2), 2), minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  /* Une colonne, et le portrait passe en 16:10 : un 3:4 pleine largeur
     occuperait tout l'ecran et ferait de la liste un defilement interminable. */
  .agc-equipe.agc-equipe .agc-equipe-grille { grid-template-columns: minmax(0, 1fr); }
  .agc-equipe.agc-equipe .agc-equipe-media { aspect-ratio: 16 / 10; }
  .agc-equipe.agc-equipe .agc-equipe-media--initiales { font-size: 1.6rem; }
}