/* Agremine, feuille de style unique.
   Systeme de nommage: prefixe agr, vocabulaire du classeur d agrement.
   Mode clair integral, aucune variante sombre. */

:root {
  --fond: #F7F3E8;
  --fond-alt: #F4EAE4;
  --surface: #FFFFFF;
  --texte: #2B2A24;
  --texte-doux: #5E5B4F;
  --accent: #1A6E3C;
  --accent-sombre: #145730;
  --accent-clair: #D8E7DC;
  --accent-voile: #EDF4EF;
  --accent-texte: #FFFFFF;
  --brique: #9C4A45;
  --brique-voile: #F3E2DF;
  --bordure: #DED8C6;
  --bordure-forte: #C7BFA6;

  --colonne-libelles: 260px;
  --gouttiere: 32px;
  --marge-exterieure: 72px;
  --rebond: cubic-bezier(0.34, 1.56, 0.64, 1);

  --titre: "Oswald", "Arial Narrow", Helvetica, sans-serif;
  --courant: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --fiche: "Sarabun", "Trebuchet MS", Arial, sans-serif;
}

/* Carte de contours cadastraux, tuile de 420 pixels, motif signature du projet. */
:root {
  --cadastre: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%231A6E3C' stroke-opacity='0.14' stroke-width='1'%3E%3Cpolygon points='6,48 74,22 138,54 146,122 78,152 12,126'/%3E%3Cpolygon points='146,122 214,96 268,134 258,196 190,214 138,180'/%3E%3Cpolygon points='268,134 336,108 402,142 396,208 330,228 258,196'/%3E%3Cpolygon points='12,126 78,152 92,222 46,268 4,244'/%3E%3Cpolygon points='92,222 190,214 206,286 138,318 46,268'/%3E%3Cpolygon points='206,286 258,196 330,228 344,300 268,336'/%3E%3Cpolygon points='344,300 396,208 418,266 414,346'/%3E%3Cpolygon points='46,268 138,318 122,382 38,394 4,338'/%3E%3Cpolygon points='138,318 268,336 262,404 176,416 122,382'/%3E%3Cpolygon points='262,404 268,336 344,300 414,346 408,414'/%3E%3Cpolygon points='74,22 138,54 196,18 188,2 82,4'/%3E%3Cpolygon points='196,18 268,52 336,108 402,142 412,64 330,6'/%3E%3Cpolygon points='138,54 196,18 268,52 214,96'/%3E%3Cpolygon points='4,244 46,268 4,338'/%3E%3Cpolygon points='396,208 418,266 420,180'/%3E%3C/g%3E%3Cg fill='%231A6E3C' fill-opacity='0.06' stroke='none'%3E%3Cpolygon points='166,232 226,224 236,272 178,286'/%3E%3Cpolygon points='300,146 352,138 360,180 306,190'/%3E%3Cpolygon points='58,306 112,314 106,360 54,352'/%3E%3C/g%3E%3Cg fill='none' stroke='%231A6E3C' stroke-opacity='0.26' stroke-width='1.6'%3E%3Cpath d='M0 196 L92 176 L206 220 L318 190 L420 224'/%3E%3Cpath d='M190 0 L212 92 L176 198 L214 302 L186 420'/%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--courant);
  font-size: 1.06rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }

a { color: var(--accent-sombre); text-underline-offset: 3px; }
a:hover { color: var(--brique); }

:focus-visible {
  outline: 3px solid var(--brique);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 0.5em;
  max-width: 22ch;
}

h1 {
  font-size: 3.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  max-width: 15ch;
}

h2 { font-size: 2.1rem; max-width: 20ch; }
h3 { font-size: 1.32rem; max-width: 26ch; }

p { margin: 0 0 1.1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.agr-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-texte);
  padding: 12px 20px;
  z-index: 90;
  font-family: var(--fiche);
  font-weight: 600;
}
.agr-evitement:focus { left: 12px; top: 12px; }

.agr-cadre {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--marge-exterieure);
  padding-right: var(--marge-exterieure);
}

/* ---------- Fiche technique tabulaire a deux colonnes ---------- */

.agr-fiche {
  display: grid;
  grid-template-columns: var(--colonne-libelles) minmax(0, 1fr);
  column-gap: var(--gouttiere);
  align-items: start;
}

.agr-fiche > .agr-libelles { padding-right: var(--gouttiere); }

.agr-fiche > .agr-valeurs {
  border-left: 1px solid var(--bordure);
  padding-left: var(--gouttiere);
  min-width: 0;
}

.agr-surtitre {
  font-family: var(--fiche);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
  display: block;
}

.agr-libelle {
  font-family: var(--fiche);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin: 0;
}

.agr-mention {
  font-family: var(--fiche);
  font-size: 0.88rem;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}

.agr-releve {
  list-style: none;
  margin: 0;
  padding: 0;
  font-variant-numeric: tabular-nums;
}
.agr-releve li {
  border-top: 1px solid var(--bordure);
  padding: 12px 0 10px;
}
.agr-releve li:first-child { border-top: 0; }
.agr-releve .agr-libelle { display: block; margin-bottom: 2px; }
.agr-releve b {
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
}

/* ---------- Onglet d intercalaire, forme signature ---------- */

.agr-onglet {
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 16px;
  background: var(--accent-clair);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 100%, 0 100%);
}
.agr-onglet::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 3px;
  background: linear-gradient(to bottom, var(--bordure) 0 1px, var(--accent) 1px 3px);
}

.agr-onglet--large { width: 108px; }
.agr-onglet--brique { background: var(--brique-voile); }
.agr-onglet--brique::after {
  background: linear-gradient(to bottom, var(--bordure) 0 1px, var(--brique) 1px 3px);
}

/* ---------- Boutons ---------- */

.agr-bouton {
  display: inline-block;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  padding: 14px 26px;
  border: 0;
  cursor: pointer;
  background: var(--accent);
  color: var(--accent-texte);
  border-radius: 4px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  box-shadow: 0 2px 10px rgba(43, 42, 36, 0.14);
  transition: background-color 180ms ease, clip-path 180ms ease, transform 140ms var(--rebond);
}
.agr-bouton:hover {
  background: var(--accent-sombre);
  color: var(--accent-texte);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.agr-bouton:active { transform: translateY(1px); }

.agr-bouton--second {
  background: var(--surface);
  color: var(--texte);
  border: 1.5px solid var(--accent);
  box-shadow: none;
}
.agr-bouton--second:hover {
  background: var(--fond);
  color: var(--texte);
  border-color: var(--brique);
}

.agr-bouton--clair {
  background: var(--surface);
  color: var(--accent-sombre);
}
.agr-bouton--clair:hover { background: var(--fond); color: var(--accent-sombre); }

.agr-bouton--pleine { display: block; width: 100%; text-align: center; }

/* ---------- En tete ---------- */

.agr-bandeau {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(247, 243, 232, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordure);
  box-shadow: 0 2px 0 -1px var(--accent);
}

.agr-bandeau-interne {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 86px;
  transition: height 200ms ease;
}
.est-epingle .agr-bandeau-interne { height: 62px; }

.agr-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--texte);
  flex: 0 0 auto;
}
.agr-logo svg { width: 40px; height: 40px; flex: 0 0 auto; }
.agr-logo-marque {
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.42rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.agr-ancres {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0 auto 0 12px;
  padding: 0;
}
.agr-ancre {
  position: relative;
  text-decoration: none;
  color: var(--texte);
  font-size: 0.95rem;
  padding-bottom: 6px;
}
.agr-ancre::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: var(--accent);
  clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 100%, 0 100%);
  transition: width 180ms ease;
}
.agr-ancre:hover::after, .agr-ancre[aria-current="true"]::after { width: 100%; }

.agr-tirette {
  display: none;
  margin-left: auto;
  background: var(--surface);
  border: 1.5px solid var(--accent);
  border-radius: 4px;
  padding: 9px 12px;
  cursor: pointer;
}
.agr-tirette span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--accent);
  margin: 4px 0;
}

.agr-languette {
  display: none;
  position: fixed;
  inset: 86px 0 0;
  background: var(--fond);
  z-index: 70;
  padding: 32px var(--marge-exterieure) 48px;
  overflow-y: auto;
  border-top: 1px solid var(--bordure);
}
.agr-languette.est-tiree { display: block; animation: agr-tirer 320ms var(--rebond) both; }
.agr-languette ul { list-style: none; margin: 0 0 24px; padding: 0; }
.agr-languette li { border-bottom: 1px solid var(--bordure); }
.agr-languette a {
  display: block;
  padding: 16px 0;
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.3rem;
  text-decoration: none;
  color: var(--texte);
}

@keyframes agr-tirer {
  from { transform: translateY(-24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ---------- Registres, rythme vertical ---------- */

.agr-registre { padding: 92px 0; position: relative; }
.agr-registre--serre { padding: 64px 0; }
.agr-registre--rose { background: var(--fond-alt); }
.agr-registre--blanche { background: var(--surface); }
.agr-registre--amande {
  background: var(--accent);
  color: var(--accent-texte);
  padding: 56px 0;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 28px 100%, 0 calc(100% - 28px));
}
.agr-registre--amande h2,
.agr-registre--amande .agr-surtitre,
.agr-registre--amande .agr-libelle { color: var(--accent-texte); }
.agr-registre--amande .agr-fiche > .agr-valeurs { border-left-color: rgba(255, 255, 255, 0.42); }

.agr-registre + .agr-registre--rose,
.agr-registre--rose + .agr-registre { border-top: 1px solid var(--bordure); }

/* Motif cadastral, pose en fond de plusieurs registres. */
.agr-cadastre { position: relative; isolation: isolate; }
.agr-cadastre::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--cadastre);
  background-repeat: repeat;
  background-size: 420px 420px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 80%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}
.agr-registre--amande.agr-cadastre::before { filter: brightness(0) invert(1); opacity: 0.5; }

.agr-titre-registre { margin-bottom: 40px; }
.agr-titre-registre h2 { margin-bottom: 14px; }
.agr-chapo { color: var(--texte-doux); }

/* ---------- Hero ---------- */

.agr-hero { padding: 76px 0 84px; }
.agr-hero h1 { margin-bottom: 20px; }
.agr-hero-soustitre { font-size: 1.16rem; color: var(--texte-doux); max-width: 60ch; }

.agr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 26px 0 30px;
}

.agr-encadre-reassurance {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 30px 26px 22px;
  max-width: 560px;
}
.agr-encadre-reassurance .agr-chiffre-fort {
  font-family: var(--fiche);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 6px;
}

.agr-hero-fiche { margin-bottom: 48px; }

/* ---------- Tirages photographiques ---------- */

.agr-tirage {
  position: relative;
  background: var(--fond);
  border: 1px solid var(--accent-clair);
  padding: 12px;
  margin: 0;
}
.agr-tirage img {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
.agr-tirage figcaption {
  font-family: var(--fiche);
  font-size: 0.88rem;
  color: var(--texte-doux);
  padding: 12px 4px 2px;
  border-top: 1px solid var(--bordure);
  margin-top: 12px;
}
.agr-tirage--debord { margin-left: calc(var(--gouttiere) * -1 - 32px); }
.agr-tirage--serre { max-width: 520px; }

/* ---------- Lignes de fiche, section probleme ---------- */

.agr-constats { margin: 0; padding: 0; list-style: none; }
.agr-constat {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 132px;
  gap: var(--gouttiere);
  align-items: baseline;
  border-top: 1px solid var(--bordure);
  padding: 22px 0;
}
.agr-constat:last-child { border-bottom: 1px solid var(--bordure); }
.agr-constat p { margin: 0; }

.agr-etiquette {
  font-family: var(--fiche);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--bordure-forte);
  background: var(--surface);
  color: var(--texte-doux);
  white-space: nowrap;
  justify-self: start;
}
.agr-etiquette--manque { color: var(--brique); border-color: var(--brique); background: var(--brique-voile); }
.agr-etiquette--jour { color: var(--accent-sombre); border-color: var(--accent); background: var(--accent-voile); }

/* ---------- Gestes, tableau numerote ---------- */

.agr-gestes { border-top: 1px solid var(--bordure); }
.agr-geste {
  display: grid;
  grid-template-columns: var(--colonne-libelles) minmax(0, 1fr);
  column-gap: var(--gouttiere);
  border-bottom: 1px solid var(--bordure);
  padding: 26px 0;
}
.agr-geste-rang {
  font-family: var(--fiche);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  padding-right: var(--gouttiere);
  font-variant-numeric: tabular-nums;
}
.agr-geste-rang b {
  display: block;
  font-family: var(--titre);
  font-weight: 500;
  font-size: 2.4rem;
  color: var(--texte);
  line-height: 1;
  margin-bottom: 6px;
}
.agr-geste-corps { border-left: 1px solid var(--bordure); padding-left: var(--gouttiere); }
.agr-geste-corps h3 { margin-bottom: 8px; }

/* ---------- Cartes de fonctionnalites ---------- */

.agr-grille-trois {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
}
.agr-grille-deux {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gouttiere) 48px;
}

.agr-pochette {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 34px 26px 26px;
}
.agr-pochette h3 { font-size: 1.2rem; margin-bottom: 10px; }
.agr-pochette p { font-size: 1rem; margin: 0; }
.agr-pochette .agr-libelle { display: block; margin-bottom: 10px; }

.agr-avantage {
  position: relative;
  border-top: 1px solid var(--bordure);
  padding: 30px 0 6px;
}
.agr-avantage .agr-gain {
  font-family: var(--fiche);
  font-weight: 700;
  font-size: 2.1rem;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 8px;
}
.agr-avantage h3 { font-size: 1.24rem; }

/* ---------- Preuve sociale ---------- */

.agr-paroles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
}
.agr-parole {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 36px 26px 24px;
  margin: 0;
}
.agr-parole blockquote { margin: 0 0 18px; }
.agr-parole blockquote p { font-style: italic; font-size: 1rem; }
.agr-parole figcaption {
  border-top: 1px solid var(--bordure);
  padding-top: 14px;
  font-family: var(--fiche);
  font-size: 0.88rem;
  color: var(--texte-doux);
}
.agr-parole figcaption b {
  display: block;
  font-weight: 600;
  color: var(--texte);
  letter-spacing: 0.03em;
}

.agr-chiffres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gouttiere);
  list-style: none;
  margin: 0;
  padding: 0;
}
.agr-chiffres li { border-left: 1px solid rgba(255, 255, 255, 0.42); padding-left: 20px; }
.agr-chiffres b {
  display: block;
  font-family: var(--fiche);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.agr-chiffres span { font-size: 0.95rem; display: block; margin-top: 4px; }

/* ---------- Tarifs ---------- */

.agr-panneaux {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
  align-items: start;
}
.agr-panneau {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 38px 26px 30px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.agr-panneau--releve {
  margin-top: -24px;
  border: 1px solid var(--accent);
  box-shadow: 0 12px 30px rgba(26, 110, 60, 0.12);
}
.agr-panneau h3 { font-size: 1.44rem; margin-bottom: 6px; }
.agr-panneau-cible { color: var(--texte-doux); font-size: 0.98rem; min-height: 3.4em; }
.agr-prix {
  font-family: var(--fiche);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--texte);
  display: block;
  margin: 14px 0 2px;
}
.agr-unite {
  font-family: var(--fiche);
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texte-doux);
  display: block;
  margin-bottom: 18px;
}
.agr-inclus {
  list-style: none;
  margin: 0 0 24px;
  padding: 16px 0 0;
  border-top: 1px solid var(--bordure);
  font-size: 0.99rem;
}
.agr-inclus li {
  position: relative;
  padding: 0 0 12px 26px;
  line-height: 1.55;
}
.agr-inclus li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 12px;
  background: var(--accent-clair);
  border: 1px solid var(--accent);
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 100%, 0 100%);
}
.agr-panneau .agr-bouton { margin-top: auto; }
.agr-note-tarifs { margin-top: 30px; color: var(--texte-doux); font-size: 0.95rem; }

/* ---------- FAQ ---------- */

.agr-questions { border-top: 1px solid var(--bordure); }
.agr-question { border-bottom: 1px solid var(--bordure); }
.agr-question summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 16px;
  align-items: center;
  cursor: pointer;
  padding: 22px 0;
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.2rem;
  list-style: none;
}
.agr-question summary::-webkit-details-marker { display: none; }
.agr-question summary::after {
  content: "";
  width: 16px;
  height: 16px;
  justify-self: end;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 220ms var(--rebond);
}
.agr-question[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.agr-question[open] summary { color: var(--accent-sombre); }
.agr-reponse { padding: 0 0 24px; max-width: 74ch; }
.agr-reponse p { font-size: 1rem; }

/* ---------- Formulaire ---------- */

.agr-panneau-contact {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 42px 34px 34px;
}
.agr-champ {
  display: grid;
  grid-template-columns: var(--colonne-libelles) minmax(0, 1fr);
  column-gap: var(--gouttiere);
  align-items: start;
  border-top: 1px solid var(--bordure);
  padding: 16px 0;
}
.agr-champ:first-of-type { border-top: 0; }
.agr-champ > label {
  font-family: var(--fiche);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texte-doux);
  padding-top: 12px;
}
.agr-champ input[type="text"],
.agr-champ input[type="email"],
.agr-champ select,
.agr-champ textarea {
  width: 100%;
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--bordure-forte);
  border-radius: 3px;
  padding: 11px 12px;
}
.agr-champ textarea { resize: vertical; min-height: 128px; }
.agr-champ input:focus, .agr-champ select:focus, .agr-champ textarea:focus { background: var(--surface); }
.agr-aide { font-size: 0.88rem; color: var(--texte-doux); margin: 6px 0 0; font-family: var(--fiche); }

.agr-consentement {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border-top: 1px solid var(--bordure);
  padding: 18px 0 22px;
  font-size: 0.96rem;
}
.agr-consentement input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--accent); }

.agr-relance {
  font-family: var(--fiche);
  font-size: 0.92rem;
  color: var(--texte-doux);
  margin-top: 18px;
}

/* ---------- Pied de page ---------- */

.agr-pied {
  background: var(--fond-alt);
  border-top: 1px solid var(--bordure);
  padding: 64px 0 0;
  position: relative;
}
.agr-pied-colonnes {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 40px var(--gouttiere);
}
.agr-pied h2 {
  font-size: 0.82rem;
  font-family: var(--fiche);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  max-width: none;
}
.agr-pied ul { list-style: none; margin: 0; padding: 0; }
.agr-pied li { padding: 5px 0; }
.agr-pied a { color: var(--texte); text-decoration: none; font-size: 0.97rem; }
.agr-pied a:hover { color: var(--brique); text-decoration: underline; }
.agr-pied-position { color: var(--texte-doux); font-size: 0.97rem; max-width: 34ch; }
.agr-profils { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 14px; }
.agr-profils a { font-family: var(--fiche); font-size: 0.86rem; letter-spacing: 0.04em; text-decoration: underline; }
.agr-coordonnees { font-size: 0.92rem; color: var(--texte-doux); margin-top: 14px; }
.agr-barre-pied {
  margin-top: 52px;
  border-top: 1px solid var(--bordure);
  padding: 20px 0 26px;
  font-size: 0.9rem;
  color: var(--texte-doux);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: space-between;
}

/* ---------- Pages interieures ---------- */

.agr-entete-page { padding: 64px 0 40px; }
.agr-entete-page h1 { font-size: 2.6rem; max-width: 20ch; }
.agr-fil { font-family: var(--fiche); font-size: 0.82rem; letter-spacing: 0.06em; color: var(--texte-doux); margin-bottom: 18px; }
.agr-fil a { color: var(--accent-sombre); }

.agr-texte-long { padding-bottom: 88px; }
.agr-texte-long h2 { margin-top: 44px; }
.agr-texte-long h3 { margin-top: 28px; font-size: 1.22rem; }
.agr-texte-long ul, .agr-texte-long ol { max-width: 68ch; padding-left: 22px; }
.agr-texte-long li { padding: 4px 0; }

.agr-portrait {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 18px;
  max-width: 300px;
}
.agr-portrait img { width: 100%; }
.agr-portrait figcaption { font-family: var(--fiche); font-size: 0.86rem; color: var(--texte-doux); margin-top: 12px; }

.agr-bloc-note {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 34px 28px 26px;
  margin: 32px 0;
}

.agr-tableau-legal {
  width: 100%;
  border-collapse: collapse;
  max-width: 78ch;
  margin: 18px 0 26px;
  font-size: 0.98rem;
}
.agr-tableau-legal th, .agr-tableau-legal td {
  border: 1px solid var(--bordure);
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
}
.agr-tableau-legal th {
  background: var(--accent-voile);
  font-family: var(--fiche);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.agr-centre { text-align: center; padding: 96px 0 110px; }
.agr-centre h1 { margin-left: auto; margin-right: auto; }
.agr-centre p { margin-left: auto; margin-right: auto; }
.agr-centre .agr-actions { justify-content: center; }

/* ---------- Signature d animation, rebond elastique ---------- */

.agr-pose {
  opacity: 0;
  transform: translateY(18px);
}
.agr-pose.est-posee {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 340ms ease var(--retard, 0ms), transform 520ms var(--rebond) var(--retard, 0ms);
}
.agr-pose .agr-onglet { transition: transform 520ms var(--rebond) calc(var(--retard, 0ms) + 60ms); transform: translateY(-10px); }
.agr-pose.est-posee .agr-onglet { transform: translateY(0); }

/* ---------- Adaptations ---------- */

@media (max-width: 1100px) {
  :root { --marge-exterieure: 40px; --colonne-libelles: 210px; }
  .agr-grille-trois, .agr-paroles, .agr-panneaux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agr-panneau--releve { margin-top: 0; }
  .agr-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agr-pied-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  h1 { font-size: 2.7rem; }
}

@media (max-width: 900px) {
  .agr-ancres { display: none; }
  .agr-tirette { display: block; }
}

@media (max-width: 860px) {
  :root { --marge-exterieure: 20px; --gouttiere: 20px; }
  .agr-fiche { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .agr-fiche > .agr-libelles { padding-right: 0; border-bottom: 1px solid var(--bordure); padding-bottom: 18px; }
  .agr-fiche > .agr-valeurs { border-left: 0; padding-left: 0; }
  .agr-geste { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .agr-geste-rang { padding-right: 0; display: flex; align-items: baseline; gap: 12px; }
  .agr-geste-rang b { margin-bottom: 0; font-size: 1.8rem; }
  .agr-geste-corps { border-left: 0; padding-left: 0; border-top: 1px solid var(--bordure); padding-top: 12px; }
  .agr-constat { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .agr-champ { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .agr-champ > label { padding-top: 0; }
  .agr-grille-trois, .agr-paroles, .agr-panneaux, .agr-grille-deux { grid-template-columns: minmax(0, 1fr); }
  .agr-tirage--debord { margin-left: 0; }
  .agr-languette { inset: 62px 0 0; }
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.55rem; }
  .agr-registre { padding: 60px 0; }
  .agr-hero { padding: 44px 0 56px; }
  .agr-panneau-contact { padding: 30px 20px 26px; }
  .agr-entete-page h1 { font-size: 2rem; }
}

@media (max-width: 520px) {
  .agr-cadastre::before { display: none; }
  .agr-chiffres { grid-template-columns: minmax(0, 1fr); }
  .agr-pied-colonnes { grid-template-columns: minmax(0, 1fr); }
  .agr-actions .agr-bouton { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .agr-pose, .agr-pose.est-posee { opacity: 1; transform: none; transition: none; }
  .agr-pose .agr-onglet, .agr-pose.est-posee .agr-onglet { transform: none; transition: none; }
  .agr-languette.est-tiree { animation: none; }
  .agr-bouton, .agr-question summary::after { transition: none; }
}

@media print {
  .agr-bandeau, .agr-languette, .agr-tirette, .agr-actions { display: none; }
  body { background: #FFFFFF; }
}
/* ============================================================================
   MAGAZINE, L INTERCALAIRE D AGREMENT
   Section ajoutee a la fin de la feuille: aucune regle ecrite plus haut n est
   modifiee. Le magazine reprend la palette ivoire et rose brique, la grille en
   fiche technique a deux colonnes, l onglet d intercalaire souligne du filet
   double, le motif de contours cadastraux et le rebond elastique du site.
   Le corps des articles est du HTML nu: les balises h2, h3, p, ul, ol, li,
   table, blockquote, aside, figure, strong, em et a sont mises en forme ici
   en tant que descendantes de .agr-corps, sans aucune classe.
   ============================================================================ */

/* ---------- Grille de cartes d article ---------- */

.agr-sommaire {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px var(--gouttiere);
}

/* ---------- Carte d article ---------- */

.agr-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 30px 24px 24px;
  transition: border-color 180ms ease, box-shadow 220ms ease;
}
.agr-carte .agr-onglet {
  transition: transform 520ms var(--rebond) calc(var(--retard, 0ms) + 60ms), width 180ms ease;
}
.agr-carte:hover { border-color: var(--accent); box-shadow: 0 12px 28px rgba(43, 42, 36, 0.12); }
.agr-carte:hover .agr-onglet { width: 108px; }
.agr-carte:focus-within { border-color: var(--accent); }

.agr-carte-tirage {
  background: var(--fond);
  border: 1px solid var(--accent-clair);
  padding: 8px;
  margin: 0 0 18px;
}
.agr-carte-tirage img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.agr-carte-texte { display: flex; flex-direction: column; flex: 1 1 auto; }

.agr-carte .agr-etiquette { align-self: flex-start; margin: 0 0 14px; }

.agr-carte-titre {
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.18rem;
  line-height: 1.22;
  letter-spacing: 0;
  margin: 0 0 12px;
  max-width: none;
}
.agr-carte-titre a { color: var(--texte); text-decoration: none; }
.agr-carte-titre a:hover { color: var(--accent-sombre); text-decoration: underline; }

.agr-carte-accroche {
  font-size: 0.99rem;
  line-height: 1.6;
  color: var(--texte-doux);
  margin: 0 0 18px;
  max-width: none;
}

.agr-carte-pied {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--bordure);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-family: var(--fiche);
  font-size: 0.84rem;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
  max-width: none;
}

/* ---------- Entete d article ---------- */

.agr-entete-article { padding: 56px 0 8px; }
.agr-entete-article h1 {
  font-size: 2.35rem;
  line-height: 1.14;
  max-width: 24ch;
  margin-bottom: 20px;
}
.agr-entete-article .agr-releve b { font-size: 1.02rem; }
.agr-entete-article .agr-releve a { color: var(--accent-sombre); }

.agr-fil-magazine { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.agr-fil-magazine span[aria-current] { color: var(--texte); }

.agr-tirage--une { max-width: none; margin: 34px 0 0; }
.agr-tirage--une img { width: 100%; }

/* ---------- Corps d article, mesure de lecture confortable ---------- */

.agr-fiche-article { padding: 40px 0 8px; }

.agr-rail { position: sticky; top: 108px; }
.agr-rail .agr-releve { margin-bottom: 24px; }

.agr-appui {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 30px 22px 22px;
}
.agr-appui p { font-size: 0.96rem; color: var(--texte-doux); margin-bottom: 18px; }

.agr-exergue {
  font-size: 1.18rem;
  line-height: 1.62;
  color: var(--texte);
  background: var(--accent-voile);
  border-left: 3px solid var(--accent);
  padding: 22px 26px 22px 22px;
  margin: 0 0 8px;
  max-width: 66ch;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

.agr-corps { max-width: 68ch; }
.agr-corps > :first-child { margin-top: 0; }
.agr-corps > :last-child { margin-bottom: 0; }

/* Intertitres du corps: chaque h2 porte l onglet d intercalaire et son filet double. */
.agr-corps h2 {
  position: relative;
  font-size: 1.78rem;
  line-height: 1.16;
  max-width: 26ch;
  margin: 54px 0 16px;
  padding-top: 30px;
  border-top: 1px solid var(--bordure);
}
.agr-corps h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: -15px;
  width: 64px;
  height: 14px;
  background: var(--accent-clair);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}
.agr-corps h2::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 64px;
  height: 2px;
  background: var(--accent);
}

.agr-corps h3 {
  position: relative;
  font-size: 1.24rem;
  max-width: 30ch;
  margin: 32px 0 10px;
  padding-left: 22px;
}
.agr-corps h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 12px;
  height: 12px;
  background: var(--accent-clair);
  border: 1px solid var(--accent);
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 100%, 0 100%);
}

.agr-corps p { max-width: 68ch; }
.agr-corps strong { font-weight: 600; color: var(--texte); }
.agr-corps em { font-style: italic; }
.agr-corps a {
  color: var(--accent-sombre);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.agr-corps a:hover { color: var(--brique); }

/* Listes a puces et listes numerotees, marqueur en biais d intercalaire. */
.agr-corps ul,
.agr-corps ol {
  list-style: none;
  max-width: 68ch;
  margin: 0 0 1.3em;
  padding: 0;
}
.agr-corps li { position: relative; padding: 0 0 10px 28px; line-height: 1.62; }
.agr-corps li:last-child { padding-bottom: 0; }
.agr-corps ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 12px;
  background: var(--accent-clair);
  border: 1px solid var(--accent);
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 100%, 0 100%);
}
.agr-corps ol { counter-reset: agr-rang; }
.agr-corps ol > li { counter-increment: agr-rang; padding-left: 36px; }
.agr-corps ol > li::before {
  content: counter(agr-rang, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--fiche);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.agr-corps li > ul,
.agr-corps li > ol { margin: 10px 0 0; }

/* Tableau recapitulatif, defilement horizontal sur petit ecran. */
.agr-corps table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--bordure);
  margin: 30px 0 32px;
  font-size: 0.97rem;
  font-variant-numeric: tabular-nums;
}
.agr-corps th,
.agr-corps td {
  border: 1px solid var(--bordure);
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
}
.agr-corps thead th {
  background: var(--accent-voile);
  border-bottom: 2px solid var(--accent);
  font-family: var(--fiche);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texte-doux);
  white-space: nowrap;
}
.agr-corps tbody th {
  font-family: var(--fiche);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--texte);
  background: var(--fond);
}
.agr-corps tbody tr:nth-child(even) td { background: var(--fond); }

/* Encadre recapitulatif, traite comme une fiche a onglet. */
.agr-corps aside {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 34px 26px 26px;
  margin: 34px 0;
  max-width: 68ch;
  font-size: 1rem;
}
.agr-corps aside::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 64px;
  height: 16px;
  background: var(--accent-clair);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 100%, 0 100%);
}
.agr-corps aside::after {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 64px;
  height: 3px;
  background: linear-gradient(to bottom, var(--bordure) 0 1px, var(--accent) 1px 3px);
}
.agr-corps aside > :last-child { margin-bottom: 0; }
.agr-corps aside h3 { margin-top: 0; }

/* Citation d assistante maternelle, seul endroit ou l italique est admis. */
.agr-corps blockquote {
  margin: 32px 0;
  padding: 2px 0 2px 24px;
  border-left: 3px solid var(--brique);
  max-width: 64ch;
}
.agr-corps blockquote p {
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.64;
  color: var(--texte);
}

.agr-corps figure {
  background: var(--fond);
  border: 1px solid var(--accent-clair);
  padding: 12px;
  margin: 32px 0;
}
.agr-corps figcaption {
  font-family: var(--fiche);
  font-size: 0.88rem;
  color: var(--texte-doux);
  border-top: 1px solid var(--bordure);
  margin-top: 12px;
  padding: 12px 4px 2px;
}

/* ---------- Encart auteur ---------- */

.agr-encart-auteur {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 26px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 32px 26px 26px;
  margin: 52px 0 0;
  max-width: 68ch;
}
.agr-encart-auteur img {
  width: 96px;
  height: 96px;
  background: var(--fond);
  border: 1px solid var(--accent-clair);
  padding: 4px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.agr-nom-auteur {
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.3rem;
  margin: 2px 0 10px;
}
.agr-encart-auteur p { font-size: 0.99rem; }
.agr-encart-auteur .agr-libelle { display: block; margin-bottom: 6px; }

/* ---------- Bloc A lire aussi ---------- */

.agr-lire-aussi {
  background: var(--fond-alt);
  border-top: 1px solid var(--bordure);
  padding: 76px 0 84px;
  margin-top: 76px;
}
.agr-titre-bloc {
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.68rem;
  line-height: 1.16;
  max-width: 26ch;
  margin: 0 0 30px;
}

/* ---------- Bande d appel a l action de fin d article ---------- */

.agr-bande-magazine { padding: 52px 0; }
.agr-bande-magazine p { max-width: 62ch; margin-bottom: 22px; }
.agr-bande-magazine .agr-titre-bloc { color: var(--accent-texte); margin-bottom: 16px; }

/* ---------- Section Derniers articles de la page d accueil ---------- */

.agr-derniers .agr-sommaire { margin-bottom: 34px; }
/* ---------- Liste des articles publies, page auteur ---------- */

.agr-parution {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: var(--gouttiere);
  border-top: 1px solid var(--bordure);
  padding: 18px 0;
  align-items: baseline;
}
.agr-parutions { list-style: none; margin: 0; padding: 0; }
.agr-parutions .agr-parution:last-child { border-bottom: 1px solid var(--bordure); }
.agr-parution .agr-libelle { font-variant-numeric: tabular-nums; }
.agr-parution p { margin: 0; }
.agr-parution .agr-mention { display: block; margin-top: 4px; }
.agr-parution a { color: var(--texte); text-decoration: none; }
.agr-parution a:hover { color: var(--brique); text-decoration: underline; }

/* ---------- Intitules de colonne du pied de page, hors hierarchie de titres ----------
   Les pages du magazine reservent les balises h2 et h3 au corps redactionnel:
   les intitules du pied de page reprennent donc l apparence exacte de .agr-pied h2
   sur un paragraphe. */

.agr-pied .agr-pied-rubrique {
  font-family: var(--fiche);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
  max-width: none;
}

.agr-appui .agr-libelle { display: block; margin-bottom: 10px; }

/* ---------- Adaptations du magazine ---------- */

@media (max-width: 1100px) {
  .agr-sommaire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agr-entete-article h1 { font-size: 2.05rem; }
}

@media (max-width: 860px) {
  .agr-sommaire { grid-template-columns: minmax(0, 1fr); }
  .agr-rail { position: static; }
  .agr-fiche-article { padding-top: 24px; }
  .agr-entete-article { padding: 36px 0 4px; }
  .agr-entete-article h1 { font-size: 1.86rem; }
  .agr-exergue { font-size: 1.08rem; padding: 18px 20px; }
  .agr-corps h2 { font-size: 1.5rem; margin-top: 42px; }
  .agr-corps h3 { font-size: 1.16rem; }
  .agr-encart-auteur { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .agr-lire-aussi { padding: 56px 0 62px; margin-top: 56px; }
  .agr-parution { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .agr-carte, .agr-carte .agr-onglet { transition: none; }
}

@media print {
  .agr-lire-aussi, .agr-bande-magazine, .agr-appui { display: none; }
  .agr-corps { max-width: none; }
}

/* Maillage du reseau, bandeau de pied de page. Mise en page seulement:
   les couleurs, la police et le survol restent ceux du site.
   grid-column et flex-basis font tenir le bandeau sur toute la largeur,
   que le pied de page soit une grille ou une boite flexible.
   Les raccourcis margin et padding sont evites: ils ecraseraient le retrait
   interieur d une colonne dont le bandeau herite la classe. */
[data-reseau-bloc]{grid-column:1/-1;flex-basis:100%;width:100%;margin-top:26px;padding-top:18px}
[data-reseau-titre]{font-size:.8rem;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;margin:0 0 12px}
ul[data-reseau]{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0}
ul[data-reseau] li{margin:0;padding:0}