/* ==========================================================================
   Bouclisse, feuille de style unique
   Univers: plan cadastral, parcelles, cachet de cire et rubans
   Vocabulaire de classes: cad (cadastre), pcl (parcelle), sceau, ruban, mention
   ========================================================================== */

:root {
  --fond: #FFFFFF;
  --fond-alt: #F4F1F3;
  --surface: #FBFAFB;
  --texte: #221C22;
  --texte-doux: #6B6270;
  --accent: #7A2E7A;
  --accent-sombre: #5F2260;
  --accent-texte: #FFFFFF;
  --accent-clair: #A845A8;
  --bordure: #D7D0D4;

  --pas: 72px;
  --coupe: 12px;
  --coupe-large: 16px;
  --montant: 1224px;
  --gouttiere: 28px;

  --police-titre: "Anton", "Arial Narrow", Impact, sans-serif;
  --police-texte: "Commissioner", "Segoe UI", Helvetica, Arial, sans-serif;
  --police-main: "Caveat", "Segoe Script", cursive;

  --tempo: 420ms;
}

/* ---------- Reinitialisation mesuree ---------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

h1, h2, h3, h4 { margin: 0 0 .6em; }

h1, h2 {
  font-family: var(--police-titre);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .015em;
  line-height: .95;
  color: var(--texte);
}

h1 { font-size: 3.4rem; }
h2 { font-size: 2.15rem; }

h3 {
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

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

ul { margin: 0 0 1.1em; padding: 0 0 0 1.1em; }

blockquote { margin: 0; }

:focus-visible {
  outline: 2px solid var(--accent-clair);
  outline-offset: 3px;
}

.cad-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-texte);
  padding: 12px 20px;
  font-weight: 700;
  z-index: 999;
}
.cad-evitement:focus { left: 12px; top: 12px; }

/* ---------- Trames de parcelles ---------- */

.trame {
  background-image:
    repeating-linear-gradient(to right, var(--bordure) 0 1px, transparent 1px var(--pas)),
    repeating-linear-gradient(to bottom, var(--bordure) 0 1px, transparent 1px var(--pas));
  background-position: 0 0;
}

.trame-double {
  background-image:
    repeating-linear-gradient(to right, var(--accent-clair) 0 1px, transparent 1px calc(var(--pas) * 4)),
    repeating-linear-gradient(to bottom, var(--accent-clair) 0 1px, transparent 1px calc(var(--pas) * 4)),
    repeating-linear-gradient(to right, var(--bordure) 0 1px, transparent 1px var(--pas)),
    repeating-linear-gradient(to bottom, var(--bordure) 0 1px, transparent 1px var(--pas));
}

/* ---------- Coin coupe et double filet ---------- */

.encoche {
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--coupe)), calc(100% - var(--coupe)) 100%, 0 100%);
}

.encoche::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--bordure);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--coupe)), calc(100% - var(--coupe)) 100%, 0 100%);
  pointer-events: none;
  z-index: 2;
}

/* ---------- Curseur clignotant, signature d animation ---------- */

.curseur {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: .22em;
  vertical-align: -.14em;
  background: var(--accent);
  animation: clignote 1.05s step-end infinite;
}

@keyframes clignote {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.curseur--titre { width: 6px; height: .82em; vertical-align: -.02em; }

/* ---------- Mentions manuscrites ---------- */

.mention {
  font-family: var(--police-main);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--accent);
  display: inline-block;
  transform: rotate(-2deg) translateX(-3px);
}

.cad-surtitre {
  font-family: var(--police-main);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  transform: rotate(-2deg) translateX(-3px);
}

.cad-surtitre::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--accent-clair);
}

.cad-surtitre::after {
  content: "";
  width: 2px;
  height: 1.05em;
  background: var(--accent);
  animation: clignote 1.05s step-end infinite;
}

/* ---------- Cachet de cire et rubans ---------- */

.sceau {
  display: block;
  width: 64px;
  height: 64px;
  color: var(--accent);
  flex: none;
}

.sceau--grand { width: 108px; height: 108px; }
.sceau--petit { width: 40px; height: 40px; }

.ruban-paire {
  position: relative;
  width: 40px;
  height: 74px;
  margin: -6px auto 0;
}

.ruban-paire i {
  position: absolute;
  top: 0;
  width: 10px;
  height: 100%;
  background: var(--accent-clair);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 12px), 0 100%);
}

.ruban-paire i:first-child { left: 4px; transform: rotate(4deg); transform-origin: top center; }
.ruban-paire i:last-child { right: 4px; transform: rotate(-4deg); transform-origin: top center; }

.ruban-diagonale {
  height: 8px;
  width: 100%;
  background: var(--accent-clair);
  transform: rotate(-2deg);
  margin: 26px 0 34px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 14px 100%);
  opacity: .85;
}

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

.bouton,
.bouton-second {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 14px 26px;
  font-family: var(--police-texte);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background-color var(--tempo) ease, clip-path var(--tempo) ease, color var(--tempo) ease;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--coupe)), calc(100% - var(--coupe)) 100%, 0 100%);
}

.bouton {
  background: var(--accent);
  color: var(--accent-texte);
}

.bouton .curseur { background: var(--accent-texte); transition: margin-left var(--tempo) ease; }

.bouton:hover {
  background: var(--accent-sombre);
  color: var(--accent-texte);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--coupe-large)), calc(100% - var(--coupe-large)) 100%, 0 100%);
}

.bouton:hover .curseur { margin-left: .55em; }

.bouton-second {
  background: var(--fond);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--bordure), inset 0 0 0 4px var(--fond), inset 0 0 0 5px var(--bordure);
}

.bouton-second:hover {
  background: var(--fond-alt);
  color: var(--accent-sombre);
  box-shadow: inset 0 0 0 1px var(--bordure), inset 0 0 0 4px var(--fond-alt), inset 0 0 0 5px var(--accent);
}

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

.cad-entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--bordure);
  transition: height var(--tempo) ease, box-shadow var(--tempo) ease;
  height: 72px;
}

.cad-entete--pose {
  background: var(--fond);
  height: 56px;
  border-bottom: 1px solid var(--bordure);
  box-shadow: 0 3px 0 -1px var(--bordure);
}

.cad-entete__rang {
  max-width: var(--montant);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gouttiere);
  display: flex;
  align-items: center;
  gap: 22px;
}

.logotype {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--police-titre);
  font-size: 1.42rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--texte);
  text-decoration: none;
}

.logotype:hover { color: var(--texte); }
.logotype .sceau { width: 30px; height: 30px; }

.cad-nav { margin-left: auto; }

.cad-nav__liste {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cad-nav__liste a {
  position: relative;
  font-weight: 500;
  font-size: .96rem;
  color: var(--texte);
  text-decoration: none;
  padding: 6px 0;
}

.cad-nav__liste a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--accent);
  transition: width var(--tempo) ease;
}

.cad-nav__liste a:hover::after,
.cad-nav__liste a.est-active::after { width: 100%; }

.cad-entete .bouton { padding: 11px 20px; min-height: 44px; }

.cad-bascule {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 46px;
  background: var(--fond);
  color: var(--texte);
  box-shadow: inset 0 0 0 1px var(--bordure);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.cad-bascule i { display: block; width: 20px; height: 2px; background: var(--texte); }

.cad-panneau {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--fond);
  background-image:
    repeating-linear-gradient(to right, var(--bordure) 0 1px, transparent 1px var(--pas)),
    repeating-linear-gradient(to bottom, var(--bordure) 0 1px, transparent 1px var(--pas));
  padding: 78px 22px 32px;
  overflow-y: auto;
}

.cad-panneau[hidden] { display: none; }

.cad-panneau__fermer {
  position: absolute;
  top: 16px;
  right: 18px;
  min-height: 44px;
  padding: 10px 18px;
  background: var(--fond);
  color: var(--accent);
  font-family: var(--police-texte);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--bordure);
  cursor: pointer;
}

.cad-panneau__liste { list-style: none; margin: 0; padding: 0; }

.cad-panneau__liste li { border-bottom: 1px solid var(--bordure); }
.cad-panneau__liste li:first-child { border-top: 1px solid var(--bordure); }

.cad-panneau__liste a {
  display: block;
  padding: 18px 6px;
  font-family: var(--police-titre);
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: .015em;
  color: var(--texte);
  text-decoration: none;
  background: rgba(255, 255, 255, .86);
}

.cad-panneau__liste a:hover { color: var(--accent); }
.cad-panneau .bouton { margin-top: 26px; width: 100%; }

/* ---------- Ossature de page ---------- */

main { padding-top: 72px; }

.releve {
  position: relative;
  padding: 82px 0;
}

.releve--claire { background: var(--fond); }
.releve--grise { background: var(--fond-alt); }

.releve--grise::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right, var(--bordure) 0 1px, transparent 1px var(--pas)),
    repeating-linear-gradient(to bottom, var(--bordure) 0 1px, transparent 1px var(--pas));
  opacity: .55;
  pointer-events: none;
}

.montant {
  position: relative;
  z-index: 1;
  max-width: var(--montant);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

.chapeau {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--texte-doux);
  max-width: 62ch;
}

.borne {
  position: absolute;
  font-family: var(--police-main);
  font-size: 1.05rem;
  color: var(--accent);
  opacity: .8;
  transform: rotate(-2deg);
}

/* ---------- Hero, plan quadrille de type cadastre ---------- */

.cad-plan {
  position: relative;
  padding: 46px 0 64px;
  background: var(--fond);
}

.cad-plan__grille {
  position: relative;
  max-width: var(--montant);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  min-height: 760px;
  gap: 0;
}

.cad-plan__trame {
  position: absolute;
  inset: 0 var(--gouttiere);
  background-image:
    linear-gradient(to right, var(--bordure) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bordure) 1px, transparent 1px);
  background-size: calc(100% / 12) calc(100% / 8);
  opacity: .75;
  pointer-events: none;
}

.pcl {
  position: relative;
  z-index: 1;
}

.pcl--separative {
  border: 1px solid var(--bordure);
  background: var(--fond);
}

.pcl-titre {
  grid-column: 1 / 8;
  grid-row: 1 / 6;
  padding: 34px 34px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pcl-titre h1 { margin-bottom: .35em; }

.pcl-titre .chapeau { margin-bottom: 26px; }

.cad-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

.cad-gage {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: .95rem;
  color: var(--texte-doux);
  border-top: 1px solid var(--bordure);
  padding-top: 14px;
  max-width: 54ch;
}

.cad-gage b {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--accent);
  letter-spacing: .015em;
}

.pcl-vue {
  grid-column: 9 / 13;
  grid-row: 1 / 7;
  padding: 14px;
}

.pcl-chiffre {
  grid-column: 1 / 5;
  grid-row: 6 / 9;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pcl-chiffre strong {
  display: block;
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: .015em;
  color: var(--texte);
}

.pcl-chiffre span { font-size: .93rem; color: var(--texte-doux); }

.pcl-sceau {
  grid-column: 5 / 8;
  grid-row: 6 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 10px 0;
}

.pcl-sceau .mention { margin-top: 4px; text-align: center; }

.borne--haut { top: -26px; left: calc(var(--gouttiere) + 6px); }
.borne--gauche { top: 40%; left: 2px; }
.borne--bas { bottom: 18px; right: calc(var(--gouttiere) + 6px); }

/* ---------- Vignette photographique ---------- */

.vignette {
  position: relative;
  background: var(--surface);
}

.vignette img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--coupe)), calc(100% - var(--coupe)) 100%, 0 100%);
}

.vignette::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid var(--bordure);
  pointer-events: none;
}

.vignette__quadrille {
  position: absolute;
  top: 0;
  left: 0;
  width: 46%;
  height: 34%;
  z-index: 2;
  background-image:
    repeating-linear-gradient(to right, var(--texte) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, var(--texte) 0 1px, transparent 1px 24px);
  opacity: .08;
  pointer-events: none;
}

.vignette__sceau {
  position: absolute;
  left: -14px;
  bottom: -14px;
  z-index: 3;
  width: 56px;
  height: 56px;
}

.legende {
  font-family: var(--police-main);
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--accent);
  margin: 20px 0 0;
  transform: rotate(-2deg) translateX(-3px);
  max-width: 40ch;
}

/* ---------- Section probleme, deux parcelles inegales ---------- */

.cad-double {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 0;
  border: 1px solid var(--bordure);
  background: var(--fond);
}

.cad-double > * { padding: 34px 36px; }
.cad-double > * + * { border-left: 1px solid var(--bordure); }

.cad-cout {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cad-cout li {
  padding: 16px 0;
  border-bottom: 1px solid var(--bordure);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: baseline;
}

.cad-cout li:last-child { border-bottom: 0; }

.cad-cout b {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: .015em;
  color: var(--accent);
  white-space: nowrap;
}

/* ---------- Section solution, quatre parcelles numerotees ---------- */

.cad-etapes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--bordure);
  border-left: 1px solid var(--bordure);
}

.cad-etape {
  border-right: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  padding: 28px 26px 32px;
  background: var(--fond);
}

.cad-etape__rang {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: .015em;
  color: var(--bordure);
  display: block;
  margin-bottom: 10px;
}

.cad-etape:hover .cad-etape__rang { color: var(--accent-clair); }
.cad-etape p { font-size: 1rem; margin-bottom: 0; }

/* ---------- Fonctionnalites, trois colonnes de parcelles ---------- */

.cad-releves {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.fiche {
  background: var(--surface);
  padding: 26px 26px 30px;
  box-shadow: inset 0 0 0 1px var(--bordure);
  transition: box-shadow var(--tempo) ease, transform var(--tempo) ease;
}

.fiche:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--accent-clair); }

.fiche__tete {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.fiche__num {
  font-family: var(--police-main);
  font-size: 1.15rem;
  color: var(--accent);
}

.fiche p { font-size: 1rem; margin-bottom: 0; }

/* ---------- Avantages, bandeau de quatre parcelles etroites ---------- */

.cad-bandeau {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--bordure);
  background: var(--fond);
}

.cad-bandeau > div { padding: 30px 24px; }
.cad-bandeau > div + div { border-left: 1px solid var(--bordure); }

.cad-bandeau strong {
  display: block;
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: .015em;
  color: var(--accent);
  margin-bottom: 10px;
}

.cad-bandeau h3 { font-size: 1.05rem; }
.cad-bandeau p { font-size: .97rem; margin-bottom: 0; color: var(--texte-doux); }

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

.cad-temoins {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 34px;
}

.temoin {
  position: relative;
  background: var(--fond);
  padding: 30px 28px 26px;
  box-shadow: inset 0 0 0 1px var(--bordure);
}

.temoin__sceau { display: block; margin: 0 0 14px; }

.temoin blockquote p { font-size: 1.06rem; }

.temoin figcaption {
  border-top: 1px solid var(--bordure);
  padding-top: 14px;
  font-size: .93rem;
  color: var(--texte-doux);
}

.temoin figcaption b {
  display: block;
  font-family: var(--police-main);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--accent);
}

.cad-chiffres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--bordure);
  background: var(--fond);
}

.cad-chiffres div { padding: 24px 20px; text-align: left; }
.cad-chiffres div + div { border-left: 1px solid var(--bordure); }

.cad-chiffres b {
  display: block;
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 2.2rem;
  letter-spacing: .015em;
  color: var(--texte);
  line-height: 1.05;
}

.cad-chiffres span { font-size: .92rem; color: var(--texte-doux); }

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

.cad-tarifs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: start;
}

.tarif {
  position: relative;
  background: var(--fond);
  padding: 30px 28px 34px;
  box-shadow: inset 0 0 0 1px var(--bordure);
}

.tarif--phare {
  margin-top: -34px;
  padding-top: 34px;
  box-shadow: inset 0 0 0 2px var(--accent);
  background: var(--surface);
}

.tarif__sceau { display: block; margin: 0 0 12px; }

.tarif h3 {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 1.7rem;
  text-transform: uppercase;
  letter-spacing: .015em;
  margin-bottom: 6px;
}

.tarif__prix {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: .015em;
  color: var(--accent);
  display: block;
  margin: 12px 0 2px;
}

.tarif__unite { font-size: .92rem; color: var(--texte-doux); display: block; margin-bottom: 14px; }

.tarif__cible { font-size: 1rem; border-top: 1px solid var(--bordure); padding-top: 14px; }

.tarif ul { list-style: none; padding: 0; margin: 0 0 22px; }

.tarif li {
  position: relative;
  padding: 8px 0 8px 26px;
  font-size: .99rem;
  border-bottom: 1px solid var(--bordure);
}

.tarif li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 12px;
  height: 12px;
  background: var(--accent-clair);
  clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
}

.tarif .bouton, .tarif .bouton-second { width: 100%; }

.tarif__note { font-size: .92rem; color: var(--texte-doux); margin: 26px 0 0; }

/* ---------- Foire aux questions ---------- */

.cad-registre {
  max-width: 66.66%;
  border-top: 1px solid var(--bordure);
}

.registre__entree { border-bottom: 1px solid var(--bordure); }

.registre__bouton {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 4px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--police-texte);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--texte);
}

.registre__bouton:hover { color: var(--accent); }

.registre__signe {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  position: relative;
}

.registre__signe::before,
.registre__signe::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform var(--tempo) ease;
}

.registre__signe::before { top: 10px; left: 0; width: 22px; height: 2px; }
.registre__signe::after { top: 0; left: 10px; width: 2px; height: 22px; }

.registre__bouton[aria-expanded="true"] .registre__signe::after { transform: scaleY(0); }

.registre__reponse { padding: 0 4px 22px 38px; }
.registre__reponse[hidden] { display: none; }
.registre__reponse p { font-size: 1.02rem; margin-bottom: .8em; }
.registre__reponse p:last-child { margin-bottom: 0; }

/* ---------- Contact ---------- */

.cad-contact {
  display: grid;
  grid-template-columns: 7fr 4fr;
  gap: 34px;
  align-items: start;
}

.formulaire {
  background: var(--fond);
  padding: 32px 32px 36px;
  box-shadow: inset 0 0 0 1px var(--bordure);
}

.champ { margin-bottom: 18px; }

.champ label {
  display: block;
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 6px;
}

.champ input[type="text"],
.champ input[type="email"],
.champ select,
.champ textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--police-texte);
  font-size: 1rem;
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 0;
}

.champ textarea { resize: vertical; min-height: 132px; }

.champ input:focus,
.champ select:focus,
.champ textarea:focus { border-color: var(--accent); background: var(--fond); }

.champ--accord {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size: .95rem;
  border-top: 1px solid var(--bordure);
  padding-top: 18px;
}

.champ--accord input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--accent); }

.formulaire .bouton { width: 100%; margin-top: 8px; }

.formulaire__delai { font-size: .93rem; color: var(--texte-doux); margin: 16px 0 0; }

.reperes {
  background: var(--surface);
  padding: 28px 26px 30px;
  box-shadow: inset 0 0 0 1px var(--bordure);
}

.reperes h3 { font-size: 1.08rem; }
.reperes ul { list-style: none; padding: 0; margin: 0 0 18px; }

.reperes li {
  padding: 12px 0;
  border-bottom: 1px solid var(--bordure);
  font-size: .98rem;
}

.reperes li:last-child { border-bottom: 0; }

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

.cad-pied {
  background: var(--fond-alt);
  border-top: 1px solid var(--bordure);
  padding: 62px 0 0;
}

.cad-pied__colonnes {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 34px;
  padding-bottom: 44px;
}

.cad-pied h2 {
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 14px;
}

.cad-pied ul { list-style: none; padding: 0; margin: 0; }
.cad-pied li { margin-bottom: 9px; font-size: .96rem; }

.cad-pied a { color: var(--texte); text-decoration: none; }
.cad-pied a:hover { color: var(--accent); text-decoration: underline; }

.cad-pied p { font-size: .96rem; color: var(--texte-doux); }

.cad-pied__profils { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.cad-pied__profils a { font-size: .93rem; font-weight: 500; }

.cad-pied__barre {
  border-top: 1px solid var(--bordure);
  padding: 20px 0 26px;
  font-size: .9rem;
  color: var(--texte-doux);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}

/* ---------- Pages internes ---------- */

.cad-entree {
  background: var(--fond);
  border-bottom: 1px solid var(--bordure);
  padding: 54px 0 44px;
}

.fil {
  font-size: .9rem;
  color: var(--texte-doux);
  margin-bottom: 14px;
}

.fil a { color: var(--texte-doux); }

.prose h2 { margin-top: 1.6em; font-size: 1.75rem; }
.prose h3 { margin-top: 1.5em; }
.prose li { margin-bottom: 8px; }

.prose {
  max-width: 74ch;
}

.bloc-legal {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--bordure);
  padding: 24px 26px;
  margin: 26px 0;
}

.bloc-legal ul { list-style: none; padding: 0; margin: 0; }
.bloc-legal li { padding: 7px 0; border-bottom: 1px solid var(--bordure); font-size: .98rem; }
.bloc-legal li:last-child { border-bottom: 0; }

.portrait-auteur {
  float: right;
  margin: 0 0 22px 28px;
  width: 220px;
}

.portrait-auteur img { width: 220px; height: auto; }

.cad-plan-site {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.cad-plan-site article {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--bordure);
  padding: 22px 24px;
}

.cad-plan-site h3 { margin-bottom: 6px; }
.cad-plan-site p { font-size: .98rem; margin-bottom: 0; }

.cad-etroit {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 96px 0 84px;
}

.cad-etroit p { margin-left: auto; margin-right: auto; }
.cad-etroit .cad-actions { justify-content: center; }
.cad-etroit .cad-surtitre { justify-content: center; }

/* ---------- Animations au defilement ---------- */

.apparait {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 620ms ease, transform 620ms ease;
}

.apparait.est-visible { opacity: 1; transform: none; }

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

@media (max-width: 1080px) {
  .cad-releves { grid-template-columns: repeat(2, 1fr); }
  .cad-temoins { grid-template-columns: 1fr; }
  .cad-tarifs { grid-template-columns: 1fr; }
  .tarif--phare { margin-top: 0; padding-top: 30px; }
  .cad-registre { max-width: 100%; }
  .cad-pied__colonnes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .cad-nav { display: none; }
  .cad-entete .bouton { display: none; }
  .cad-bascule { display: flex; }
  .cad-plan__grille { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; min-height: 0; }
  .cad-plan__trame { background-size: calc(100% / 4) 96px; }
  .pcl-titre { grid-column: 1 / 5; grid-row: auto; padding: 28px 22px; }
  .pcl-vue { grid-column: 1 / 5; grid-row: auto; }
  .pcl-chiffre { grid-column: 1 / 3; grid-row: auto; }
  .pcl-sceau { grid-column: 3 / 5; grid-row: auto; }
  .cad-double { grid-template-columns: 1fr; }
  .cad-double > * + * { border-left: 0; border-top: 1px solid var(--bordure); }
  .cad-etapes { grid-template-columns: repeat(2, 1fr); }
  .cad-bandeau { grid-template-columns: repeat(2, 1fr); }
  .cad-bandeau > div:nth-child(3) { border-left: 0; }
  .cad-bandeau > div:nth-child(n+3) { border-top: 1px solid var(--bordure); }
  .cad-chiffres { grid-template-columns: repeat(2, 1fr); }
  .cad-chiffres div:nth-child(3) { border-left: 0; }
  .cad-chiffres div:nth-child(n+3) { border-top: 1px solid var(--bordure); }
  .cad-contact { grid-template-columns: 1fr; }
  .portrait-auteur { float: none; margin: 0 0 24px; }
}

@media (max-width: 640px) {
  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.7rem; }
  .releve { padding: 58px 0; }
  .cad-releves { grid-template-columns: 1fr; }
  .cad-etapes { grid-template-columns: 1fr; }
  .cad-bandeau { grid-template-columns: 1fr; }
  .cad-bandeau > div + div { border-left: 0; border-top: 1px solid var(--bordure); }
  .cad-chiffres { grid-template-columns: 1fr; }
  .cad-chiffres div + div { border-left: 0; border-top: 1px solid var(--bordure); }
  .cad-pied__colonnes { grid-template-columns: 1fr; }
  .cad-plan-site { grid-template-columns: 1fr; }
  .formulaire { padding: 24px 20px 28px; }
  .cad-double > * { padding: 26px 22px; }
  .borne--haut, .borne--gauche { display: none; }
}

@media print {
  .cad-entete, .cad-bascule, .cad-panneau { display: none; }
  body { font-size: 11pt; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .curseur, .cad-surtitre::after { animation: none; opacity: 1; }
  .apparait { opacity: 1; transform: none; }
  .bouton:hover .curseur { margin-left: .22em; }
}
/* ==========================================================================
   LE REGISTRE DU RESSORT, section magazine
   Ajoutee a la fin de la feuille: aucune regle precedente n est modifiee.
   Le magazine n est pas un module rapporte, il reprend telles quelles les
   variables de couleur, les trois polices, la forme signature (coin inferieur
   droit coupe a quarante cinq degres, double d un filet interieur gris
   tourterelle a trois pixels du bord), le motif du cachet de cire et de ses
   rubans, le quadrillage de parcelles et le curseur clignotant.
   Vocabulaire de classes: mag, en complement de cad, pcl, sceau et ruban.
   Le corps redactionnel ne porte aucune classe: les balises nues sont mises
   en forme comme descendantes de .mag-corps, plus bas dans cette section.
   ========================================================================== */

/* ---------- Ossature des pages du magazine ---------- */

.mag-page { padding-top: 72px; }

.mag-entree { padding-bottom: 40px; }

.mag-fil { display: block; margin-bottom: 16px; }
.mag-fil span[aria-current] { color: var(--texte); }

.mag-titre-section {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 2.15rem;
  line-height: .95;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--texte);
  margin: 0 0 .6em;
  max-width: none;
}

.mag-rubrique {
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texte);
  margin: 0 0 14px;
  max-width: none;
}

.cad-pied .mag-rubrique { color: var(--texte); font-size: 1rem; }

/* Le bandeau du maillage garde exactement la mise en page posee par l outil de
   reseau, meme quand son intitule emprunte la classe ci dessus. */
.cad-pied [data-reseau-titre].mag-rubrique {
  font-size: .8rem;
  line-height: 1.3;
  letter-spacing: .09em;
  font-weight: 600;
  margin: 0 0 12px;
}

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

.mag-mur {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mag-mur > li { margin: 0; display: flex; }

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

.mag-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--bordure);
  transition: box-shadow var(--tempo) ease, transform var(--tempo) ease, clip-path var(--tempo) ease;
}

.mag-carte:hover,
.mag-carte:focus-within {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--accent-clair);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--coupe-large)), calc(100% - var(--coupe-large)) 100%, 0 100%);
}

.mag-carte__vue {
  position: relative;
  display: block;
  background: var(--fond-alt);
  border-bottom: 1px solid var(--bordure);
}

.mag-carte__vue img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Quadrillage de parcelles en surimpression sur le quart superieur gauche,
   arrete net, comme sur les vignettes photographiques du reste du site. */
.mag-carte__vue::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 46%;
  height: 34%;
  background-image:
    repeating-linear-gradient(to right, var(--texte) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, var(--texte) 0 1px, transparent 1px 24px);
  opacity: .08;
  pointer-events: none;
}

.mag-carte__corps {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 24px 26px;
}

.mag-carte__reperes {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  max-width: none;
}

.mag-carte__angle {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
}

.mag-carte__rang {
  font-family: var(--police-main);
  font-size: 1.05rem;
  color: var(--texte-doux);
  transform: rotate(-2deg);
  white-space: nowrap;
}

.mag-carte__titre {
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 1.14rem;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 10px;
}

.mag-carte__titre a {
  color: var(--texte);
  text-decoration: none;
}

.mag-carte__titre a:hover { color: var(--accent); text-decoration: underline; }

.mag-carte__extrait {
  font-size: .99rem;
  color: var(--texte-doux);
  margin: 0 0 16px;
  max-width: none;
}

.mag-carte__jalons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--bordure);
  font-size: .88rem;
  color: var(--texte-doux);
  max-width: none;
}

.mag-carte__jalons time { white-space: nowrap; }

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

.mag-article { max-width: 880px; }

.mag-tete { margin-bottom: 30px; }

.mag-tete h1 { margin-bottom: .3em; }

.mag-jalons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 22px;
  padding: 14px 0;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  font-size: .92rem;
  color: var(--texte-doux);
  max-width: none;
}

.mag-jalons b {
  font-weight: 700;
  color: var(--texte);
}

/* ---------- Exergue du chapeau ---------- */

.mag-chapo {
  position: relative;
  background: var(--fond-alt);
  border-left: 3px solid var(--accent);
  padding: 22px 26px 24px;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--texte);
  max-width: 68ch;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--coupe)), calc(100% - var(--coupe)) 100%, 0 100%);
}

.mag-chapo::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--bordure);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--coupe)), calc(100% - var(--coupe)) 100%, 0 100%);
  pointer-events: none;
}

/* ---------- Photographie a la une ---------- */

.mag-photo { margin: 34px 0 40px; }

/* ---------- Corps d article, mesure de lecture confortable ----------
   Le texte insere n a ni classe, ni style, ni identifiant: tout se joue
   sur les balises nues, descendantes de .mag-corps. */

.mag-corps {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.mag-corps p { margin: 0 0 1.15em; max-width: none; }

.mag-corps h2 {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 2rem;
  line-height: .95;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--texte);
  margin: 1.9em 0 .55em;
  padding-top: 18px;
  border-top: 1px solid var(--bordure);
  position: relative;
}

/* Le ruban court de l accent tient lieu de limite separative de parcelle. */
.mag-corps h2::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 72px;
  height: 3px;
  background: var(--accent);
}

.mag-corps > h2:first-child { margin-top: 0; }

.mag-corps h3 {
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
  color: var(--texte);
  margin: 1.7em 0 .5em;
}

.mag-corps ul,
.mag-corps ol {
  margin: 0 0 1.3em;
  padding: 0;
  list-style: none;
  counter-reset: parcelle;
}

.mag-corps li {
  position: relative;
  padding: 8px 0 8px 28px;
  border-bottom: 1px solid var(--bordure);
}

.mag-corps li:last-child { border-bottom: 0; }

.mag-corps ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 12px;
  height: 12px;
  background: var(--accent-clair);
  clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
}

.mag-corps ol > li { counter-increment: parcelle; }

.mag-corps ol > li::before {
  content: counter(parcelle);
  position: absolute;
  left: 0;
  top: 7px;
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: .015em;
  color: var(--accent);
}

.mag-corps li > ul,
.mag-corps li > ol { margin: 8px 0 0; }
.mag-corps li > ul > li:last-child,
.mag-corps li > ol > li:last-child { padding-bottom: 0; }

.mag-corps strong { font-weight: 700; color: var(--texte); }
.mag-corps em { font-style: italic; }

.mag-corps a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.mag-corps a:hover { color: var(--accent-sombre); }

/* ---------- Tableau recapitulatif ---------- */

.mag-corps table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.6em;
  font-size: .98rem;
  background: var(--fond);
  border: 1px solid var(--bordure);
}

.mag-corps thead { background: var(--fond-alt); }

.mag-corps th {
  text-align: left;
  vertical-align: top;
  font-weight: 700;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texte);
  padding: 12px 14px;
  border: 1px solid var(--bordure);
}

.mag-corps td {
  vertical-align: top;
  padding: 12px 14px;
  border: 1px solid var(--bordure);
  color: var(--texte);
}

.mag-corps tbody tr:nth-child(even) { background: var(--surface); }
.mag-corps tbody th { background: var(--surface); font-size: .95rem; text-transform: none; letter-spacing: 0; }

/* ---------- Encadre ---------- */

.mag-corps aside {
  position: relative;
  margin: 0 0 1.6em;
  padding: 24px 26px 22px;
  background: var(--fond-alt);
  background-image:
    repeating-linear-gradient(to right, var(--bordure) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, var(--bordure) 0 1px, transparent 1px 24px);
  box-shadow: inset 0 0 0 1px var(--bordure);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--coupe)), calc(100% - var(--coupe)) 100%, 0 100%);
}

.mag-corps aside::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--bordure);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--coupe)), calc(100% - var(--coupe)) 100%, 0 100%);
  pointer-events: none;
}

/* Ruban de scellement, motif signature, pose en haut a droite de l encadre. */
.mag-corps aside::after {
  content: "";
  position: absolute;
  top: 0;
  right: 26px;
  width: 10px;
  height: 42px;
  background: var(--accent-clair);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
}

.mag-corps aside > *:last-child { margin-bottom: 0; }
.mag-corps aside p { position: relative; }

/* ---------- Citation ---------- */

.mag-corps blockquote {
  position: relative;
  margin: 0 0 1.6em;
  padding: 26px 62px 24px 26px;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  box-shadow: inset 0 0 0 1px var(--bordure);
  font-size: 1.14rem;
  font-weight: 500;
  line-height: 1.6;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--coupe)), calc(100% - var(--coupe)) 100%, 0 100%);
}

.mag-corps blockquote::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--bordure);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--coupe)), calc(100% - var(--coupe)) 100%, 0 100%);
  pointer-events: none;
}

/* Cachet de cire miniature, en rappel du motif du site. */
.mag-corps blockquote::after {
  content: "";
  position: absolute;
  top: 22px;
  right: 20px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 0 4px var(--fond), inset 0 0 0 7px var(--accent);
}

.mag-corps blockquote > *:last-child { margin-bottom: 0; }

.mag-corps figure { margin: 0 0 1.6em; }
.mag-corps figcaption {
  font-family: var(--police-main);
  font-size: 1.12rem;
  color: var(--accent);
  margin-top: 12px;
  transform: rotate(-2deg) translateX(-3px);
}

/* ---------- Appel a l action de fin d article ---------- */

.mag-appel {
  position: relative;
  margin: 44px 0 0;
  padding: 30px 32px 34px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--bordure);
  max-width: 68ch;
}

.mag-appel__sceau { display: block; margin: 0 0 14px; }

.mag-appel__titre {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: .015em;
  text-transform: uppercase;
  margin: 0 0 12px;
  max-width: none;
}

.mag-appel p { font-size: 1rem; }
.mag-appel .bouton { margin-top: 6px; }

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

.mag-auteur {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  align-items: start;
  margin: 44px 0 0;
  padding: 28px 30px 30px;
  background: var(--fond);
  box-shadow: inset 0 0 0 1px var(--bordure);
}

.mag-auteur img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--coupe)), calc(100% - var(--coupe)) 100%, 0 100%);
}

.mag-auteur__nom {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: .015em;
  text-transform: uppercase;
  margin: 0 0 4px;
  max-width: none;
}

.mag-auteur__role {
  display: block;
  font-family: var(--police-main);
  font-size: 1.15rem;
  color: var(--accent);
  margin-bottom: 12px;
  transform: rotate(-2deg) translateX(-3px);
}

.mag-auteur p { font-size: 1rem; }
.mag-auteur p:last-child { margin-bottom: 0; }

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

.mag-aussi {
  margin: 52px 0 0;
  padding-top: 34px;
  border-top: 1px solid var(--bordure);
}

.mag-aussi__titre {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: .95;
  letter-spacing: .015em;
  text-transform: uppercase;
  margin: 0 0 22px;
  max-width: none;
}

.mag-aussi__mur {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.mag-lien {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--bordure);
  transition: box-shadow var(--tempo) ease, transform var(--tempo) ease, clip-path var(--tempo) ease;
}

.mag-lien:hover,
.mag-lien:focus-within {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--accent-clair);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--coupe-large)), calc(100% - var(--coupe-large)) 100%, 0 100%);
}

.mag-lien__vue {
  display: block;
  border-bottom: 1px solid var(--bordure);
  background: var(--fond-alt);
}

.mag-lien__vue img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.mag-lien__corps { padding: 18px 20px 22px; }

.mag-lien__titre {
  font-weight: 700;
  font-size: 1.04rem;
  line-height: 1.35;
  margin: 0 0 8px;
  max-width: none;
}

.mag-lien__titre a { color: var(--texte); text-decoration: none; }
.mag-lien__titre a:hover { color: var(--accent); text-decoration: underline; }

.mag-lien__accroche {
  font-size: .94rem;
  color: var(--texte-doux);
  margin: 0;
  max-width: none;
}

/* ---------- Derniers articles, section de la page d accueil ---------- */

.mag-derniers .mag-mur { margin-top: 30px; }

.mag-derniers__suite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--bordure);
}

.mag-derniers__suite p {
  margin: 0;
  font-size: .96rem;
  color: var(--texte-doux);
  max-width: 52ch;
}

/* ---------- Listes de renvoi vers les articles, auteur et plan du site ---------- */

.mag-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 920px;
  border-top: 1px solid var(--bordure);
}

.mag-liste li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 24px;
  align-items: baseline;
  padding: 14px 4px;
  border-bottom: 1px solid var(--bordure);
}

.mag-liste a { color: var(--texte); text-decoration: none; font-weight: 500; }
.mag-liste a:hover { color: var(--accent); text-decoration: underline; }

.mag-liste__jalon {
  font-size: .88rem;
  color: var(--texte-doux);
  white-space: nowrap;
}

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

@media (max-width: 1080px) {
  .mag-mur { grid-template-columns: repeat(2, 1fr); }
  .mag-aussi__mur { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .mag-corps { max-width: none; }
  .mag-chapo { max-width: none; }
  .mag-appel { max-width: none; }
}

@media (max-width: 640px) {
  .mag-mur { grid-template-columns: 1fr; }
  .mag-aussi__mur { grid-template-columns: 1fr; }
  .mag-corps h2 { font-size: 1.6rem; }
  .mag-corps table { font-size: .9rem; }
  .mag-corps th, .mag-corps td { padding: 10px 10px; }
  .mag-auteur { grid-template-columns: 1fr; gap: 16px; }
  .mag-appel { padding: 24px 22px 28px; }
  .mag-liste li { grid-template-columns: 1fr; }
}

/* 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}