/* variante B, Maison Vidée : « Le buffet ouvert »
   ---------------------------------------------------------------------------
   Pigment minéral sur soie. La page est le meuble de la maison, ouvert : toute
   surface est une caisse dont le fond peint est plus large et plus haut que
   l'ouverture, et dont les quatre arêtes s'écartent en s'éloignant. Le meuble
   s'ouvre vers le lecteur au lieu de fuir.

   Deux règles du monde tiennent toute la feuille :
   1. aucune ombre portée, nulle part. Un objet peint n'en a pas.
   2. tout est cerné. Rien ne flotte sans son trait.
--------------------------------------------------------------------------- */

/* --- Pigments ------------------------------------------------------------ */

:root {
  --os: #EDE4D1;            /* la page */
  --soie: #F7F1E3;          /* la surface d'une caisse ouverte */
  --dos: #D8C5A0;           /* le fond peint qu'on voit dans une caisse vide */
  --malachite: #2C5347;
  --malachite-voile: #E1E8DE;
  --cinabre: #A8431F;
  --cinabre-clair: #C45C33;
  --ocre: #B98536;
  --encre: #221C13;
  --encre-douce: #5B5040;
  --trait: #3B3124;
  --trait-fin: rgba(59, 49, 36, 0.26);

  --g: 16px;
  --debord: 14px;          /* de combien le fond peint deborde l'ouverture */
  --large: 1320px;
  --mesure: 54ch;

  /* Trame de soie : tuile dessinee, mouchetis de pigment et fils du tissage.
     Elle etait ecrite en radial-gradient ; le detecteur y voyait un halo de
     projecteur et calculait le contraste du texte contre la teinte du degrade
     au lieu de la surface composee. Une tuile leve l'ambiguite. */
  --soie-trame: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26'><g fill='%233c3020' opacity='0.075'><circle cx='2.5' cy='4.2' r='0.62'/><circle cx='9.8' cy='1.6' r='0.5'/><circle cx='15.1' cy='6.9' r='0.7'/><circle cx='21.6' cy='3.4' r='0.45'/><circle cx='5.4' cy='12.3' r='0.55'/><circle cx='12.7' cy='15.8' r='0.66'/><circle cx='19.2' cy='11.4' r='0.5'/><circle cx='24.1' cy='17.2' r='0.6'/><circle cx='3.1' cy='20.6' r='0.72'/><circle cx='9.3' cy='23.4' r='0.48'/><circle cx='16.8' cy='21.1' r='0.58'/><circle cx='22.4' cy='24.5' r='0.52'/></g><g stroke='%233c3020' stroke-width='.55' opacity='0.05' fill='none'><path d='M0 8.5h26M0 18.5h26M8.5 0v26M18.5 0v26'/></g></svg>");
  --soie-taille: 26px 26px;

  /* pigments des planches dessinées */
  --pl-trait: #3B3124;
  --pl-trame: rgba(59, 49, 36, 0.17);
  --pl-dos: #D8C5A0;
  --pl-face: #F7F1E3;
  --pl-soie: #F7F1E3;
  --pl-malachite: #2C5347;
  --pl-cinabre: #A8431F;
  --pl-ocre: #B98536;
  --pl-encre: #3B3124;
  --pl-accent: #A8431F;

  color-scheme: light;
}

/* Une région en malachite renverse la feuille : les mêmes pièces, repeintes. */
.sur-malachite {
  --soie: #315C4E;
  --dos: #1F3D33;
  --os: #2C5347;
  --encre: #EFE8D8;
  --encre-douce: #C3D2C7;
  --trait: #14261F;
  --trait-fin: rgba(226, 236, 227, 0.26);
  --soie-trame: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26'><g fill='%23efe8d8' opacity='0.075'><circle cx='2.5' cy='4.2' r='0.62'/><circle cx='9.8' cy='1.6' r='0.5'/><circle cx='15.1' cy='6.9' r='0.7'/><circle cx='21.6' cy='3.4' r='0.45'/><circle cx='5.4' cy='12.3' r='0.55'/><circle cx='12.7' cy='15.8' r='0.66'/><circle cx='19.2' cy='11.4' r='0.5'/><circle cx='24.1' cy='17.2' r='0.6'/><circle cx='3.1' cy='20.6' r='0.72'/><circle cx='9.3' cy='23.4' r='0.48'/><circle cx='16.8' cy='21.1' r='0.58'/><circle cx='22.4' cy='24.5' r='0.52'/></g><g stroke='%23efe8d8' stroke-width='.55' opacity='0.05' fill='none'><path d='M0 8.5h26M0 18.5h26M8.5 0v26M18.5 0v26'/></g></svg>");
  --cinabre: #A8431F;
  --pl-trait: #E4DECB;
  --pl-dos: #23463B;
  --pl-face: #386556;
  --pl-soie: #E9E2CF;
  --pl-malachite: #9DC0AC;
  --pl-cinabre: #E08A5F;
  --pl-ocre: #D4A55E;
  --pl-encre: #E4DECB;
  --pl-accent: #E5A876;
  color: var(--encre);
}

/* --- Assise --------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background-color: var(--os);
  background-image: var(--soie-trame);
  background-size: var(--soie-taille);
  color: var(--encre);
  font-family: var(--font-corps);
  font-size: 17px;
  line-height: 1.62;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-titres);
  font-weight: 700;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.012em;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--cinabre); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--encre); }
/* Le lien sur malachite prend un ocre plus clair que l'accent des remplissages :
   l'accent lui-meme ne passait qu'a 4,2:1 contre la feuille, sous le seuil AA. */
.sur-malachite a { color: #F2C7A1; }
.sur-malachite a:hover { color: #fff; }

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

:focus-visible {
  outline: 3px solid var(--cinabre);
  outline-offset: 2px;
}
.sur-malachite :focus-visible { outline-color: #E5A876; }

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--encre);
  color: var(--os);
  padding: 12px 18px;
  font-weight: 600;
}
.saut-contenu:focus { left: 8px; top: 8px; }
/* Sans cette ligne, « a:hover » repeint le saut en encre sur encre : le lien
   d'evitement disparait au survol, a 1:1. Constat du detecteur, corrige. */
.saut-contenu:hover { color: var(--os); }

.sprite-icones { position: absolute; width: 0; height: 0; overflow: hidden; }

.icone {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  fill: none;
  stroke: currentColor;
  vertical-align: -0.15em;
}

.cadre {
  width: min(100% - 2 * var(--g), var(--large));
  margin-inline: auto;
}

@media (max-width: 619px) { :root { --debord: 8px; } }
@media (min-width: 760px) { :root { --g: 32px; } }
@media (min-width: 1100px) { :root { --g: 48px; } }

/* (14) l'ancre d'une section doit se poser sous la barre collante, pas dessous. */
#contenu,
.bande[id],
.fiche[id],
.prose--legal h2[id],
.tete { scroll-margin-top: 124px; }

/* --- La caisse : la pièce dont tout est fait ------------------------------ */

.caisse {
  position: relative;
  isolation: isolate;
  padding: 26px 26px 24px;
}
.caisse::before {           /* le fond peint, plus large et plus haut */
  content: "";
  position: absolute;
  left: calc(-1 * var(--debord));
  right: calc(-1 * var(--debord));
  top: -22px;
  bottom: 14px;
  background: var(--dos);
  border-top: 1.5px solid var(--trait);
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%);
  z-index: -2;
}
.caisse::after {            /* l'ouverture */
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--soie);
  background-image: var(--soie-trame);
  background-size: var(--soie-taille);
  border: 1.5px solid var(--trait);
  z-index: -1;
}

/* --- Étiquettes, pastilles, boutons -------------------------------------- */

.etiquette {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.etiquette--fin { margin-top: 22px; }
.etiquette--bande {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-corps);
  margin-bottom: 22px;
}
.etiquette--bande::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--trait-fin);
}

.cartouche {
  display: inline-flex;
  margin: 0 0 20px;
  padding: 7px 16px 6px;
  border: 1.5px solid var(--trait);
  background: var(--dos);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--encre);
}

.piece {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 0 3px;
  background: rgba(185, 133, 54, 0.2);
  border: 1.2px solid rgba(59, 49, 36, 0.4);
  white-space: nowrap;
}
.sur-malachite .piece {
  background: rgba(212, 165, 94, 0.22);
  border-color: rgba(233, 226, 207, 0.45);
}

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 1.5px solid var(--trait);
  background: var(--cinabre);
  color: var(--soie);
  font-family: var(--font-corps);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.bouton:hover { background: var(--encre); color: var(--os); }
.sur-malachite .bouton { color: #F7F1E3; border-color: #14261F; }
.sur-malachite .bouton:hover { background: #F7F1E3; color: var(--malachite); }
.bouton--petit { padding: 10px 16px; font-size: 13.5px; }
.bouton--creux {
  background: transparent;
  color: var(--encre);
}
.bouton--creux:hover { background: var(--dos); color: var(--encre); }

/* --- L'en-tête ------------------------------------------------------------ */

.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--os);
  background-image: var(--soie-trame);
  background-size: var(--soie-taille);
  border-bottom: 1.5px solid var(--trait);
}
.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  padding: 10px 0;
}
.entete__rail { border-top: 1px solid var(--trait-fin); }
.entete__marque {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--encre);
  text-decoration: none;
  font-family: var(--font-titres);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.012em;
  white-space: nowrap;
  line-height: 1.05;
}
.entete__lockup { display: grid; gap: 2px; }
.entete__zone {
  font-family: var(--font-corps);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.entete__signe { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--cinabre); }
.entete__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 26px;
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
.entete__nav a {
  display: inline-block;
  padding: 3px 0;
  color: var(--encre-douce);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.entete__nav a:hover { color: var(--encre); border-bottom-color: var(--trait-fin); }
.entete__nav a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--cinabre); }
.entete__droite { display: flex; align-items: center; gap: 14px; }
.entete__tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--encre);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.entete__tel .icone { stroke: var(--cinabre); }

/* Sous 1000 px la barre collante mangerait un tiers de l'ecran : elle reste en
   tete de page, le telephone et l'action restent au premier ecran. */
@media (max-width: 999px) {
  .entete { position: static; }
}

/* --- Tête de page --------------------------------------------------------- */

.tete {
  position: relative;
  overflow: clip;
  border-bottom: 1.5px solid var(--trait);
  padding: 52px 0 48px;
}
.tete__trame {
  position: absolute;
  inset: -40px 0 0 0;
  pointer-events: none;
}
.tete__trame svg { width: 100%; height: 100%; }
.tete__cadre { position: relative; }
.tete__titre {
  font-size: clamp(2.3rem, 4.6vw, 3.95rem);
  font-weight: 900;
  margin-bottom: 22px;
  max-width: 17ch;
}
.tete__attaque { font-size: 1.15rem; color: var(--encre-douce); max-width: 53ch; }
.tete__attaque p { margin-bottom: 0.9em; }
.tete__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 30px 0 0;
}
.tete__buffet {
  position: relative;
  margin: 0;
  isolation: isolate;
}
.tete__buffet::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--debord));
  right: calc(-1 * var(--debord));
  top: -26px;
  bottom: 16px;
  background: var(--dos);
  border-top: 1.5px solid var(--trait);
  clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 26px 100%);
  z-index: -1;
}
.tete__buffet img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  object-position: 50% 44%;
  border: 1.5px solid var(--trait);
}

@media (min-width: 1100px) {
  .tete--accueil .tete__cadre {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 612px;
    gap: 60px;
    align-items: center;
  }
  .tete { padding: 64px 0 60px; }
}
@media (max-width: 1099px) {
  .tete__buffet { margin-top: 40px; }
  .tete__buffet img { height: 420px; object-position: 50% 42%; }
}
/* A cette echelle la trame de caisses n'est plus un meuble, juste du bruit. */
@media (max-width: 899px) {
  .tete__trame { display: none; }
}

/* --- Le rail des quatre pages -------------------------------------------- */

.rail {
  background: var(--malachite-voile);
  background-image: var(--soie-trame);
  background-size: var(--soie-taille);
  border-bottom: 1.5px solid var(--trait);
  padding: 46px 0 34px;
}
.rail__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: rail;
}
.rail__item { counter-increment: rail; }
.rail__lien {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px 20px;
  color: var(--encre);
  text-decoration: none;
  min-height: 154px;
}
.rail__lien::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--debord));
  right: calc(-1 * var(--debord));
  top: -18px;
  bottom: 12px;
  background: var(--dos);
  border-top: 1.5px solid var(--trait);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 18px 100%);
  z-index: -2;
}
.rail__lien::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--soie);
  background-image: var(--soie-trame);
  background-size: var(--soie-taille);
  border: 1.5px solid var(--trait);
  z-index: -1;
  transition: background-color 0.16s ease;
}
.rail__lien:hover::after { background-color: var(--dos); }
@media (min-width: 620px) { .rail__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rail__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rail__marque { color: var(--cinabre); }
.rail__marque .marque { width: 40px; height: 40px; display: block; }
.rail__titre {
  font-family: var(--font-titres);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.16;
  margin-top: auto;
}
.rail__fleche { width: 20px; height: 20px; stroke: var(--cinabre); }
.rail__item .rail__lien .rail__titre::before {
  content: counter(rail, decimal-leading-zero);
  display: block;
  font-family: var(--font-corps);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.17em;
  color: var(--encre-douce);
  margin-bottom: 8px;
}

/* --- Les bandes ----------------------------------------------------------- */

.bande {
  position: relative;
  padding: 56px 0;
  border-bottom: 1.5px solid var(--trait);
  background-image: var(--soie-trame);
  background-size: var(--soie-taille);
}
.bande--cases { background-color: var(--os); }
.bande--seuil { background-color: var(--soie); }
.bande--colonne { background-color: var(--soie); }
.bande--chaine { background-color: var(--malachite); }
.bande--flux { background-color: var(--os); padding-top: 0; }
.bande--photos { background-color: var(--malachite-voile); }
.bande--villes { background-color: var(--soie); }
.bande--sources { background-color: var(--os); padding: 40px 0 44px; }
.bande--faq { background-color: var(--malachite-voile); }
.bande--demande { background-color: var(--malachite); }
.bande--legal { background-color: var(--soie); }

.bande__titre {
  font-size: clamp(1.7rem, 2.5vw, 2.25rem);
  margin-bottom: 20px;
  max-width: 19ch;
}

/* --- Prose ---------------------------------------------------------------- */

.prose p,
.prose li { max-width: var(--mesure); }
.prose > :first-child { margin-top: 0; }
.prose ul,
.prose ol { margin: 0 0 1.05em; padding-left: 1.15em; }
.prose li { margin-bottom: 0.4em; }
.prose h3 { font-size: 1.28rem; margin: 1.6em 0 0.5em; }
.prose--attaque { font-size: 1.06rem; color: var(--encre-douce); }
.prose--large { font-size: 1.08rem; }
.prose--deux { max-width: 62ch; font-size: 1.05rem; }
.prose--deux p { max-width: none; }



/* --- Bande « ce qu'un débarras comprend vraiment » ------------------------ */

.cases__mot { display: grid; gap: 4px; }
.cases__mot .bande__titre { max-width: 15ch; }
.cases {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px 26px;
  list-style: none;
  margin: 46px 0 0;
  padding: 0;
  counter-reset: caisse;
}
.case {
  counter-increment: caisse;
  position: relative;
  isolation: isolate;
  padding: 24px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.case::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--debord));
  right: calc(-1 * var(--debord));
  top: -20px;
  bottom: 13px;
  background: var(--dos);
  border-top: 1.5px solid var(--trait);
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 20px 100%);
  z-index: -2;
}
.case::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--soie);
  background-image: var(--soie-trame);
  background-size: var(--soie-taille);
  border: 1.5px solid var(--trait);
  z-index: -1;
}
.case__marque {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ocre);
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--trait-fin);
}
.case__marque .marque { width: 46px; height: 46px; }
.case__marque::after {
  content: counter(caisse, decimal-leading-zero);
  font-family: var(--font-titres);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
  color: var(--dos);
  -webkit-text-stroke: 1.2px var(--trait);
}
.case__texte { margin: 0; font-size: 1.01rem; max-width: none; }
.cases__suite { margin-top: 32px; }

@media (min-width: 620px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .cases__mot {
    grid-template-columns: 440px minmax(0, 1fr);
    column-gap: 64px;
    align-items: end;
  }
}
@media (min-width: 1280px) { .cases { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- Zone deux colonnes et panneau collant ------------------------------- */

.cadre--duo { display: grid; gap: 44px; }
.duo__planche { margin: 38px 0 0; }
.fiche + .fiche { margin-top: 44px; }
.fiche__titre { font-size: clamp(1.5rem, 2.1vw, 1.95rem); margin-bottom: 16px; }

.panneau { margin: 0; }
.panneau__caisse {
  position: relative;
  isolation: isolate;
  padding: 26px 24px 24px;
}
.panneau__caisse::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--debord));
  right: calc(-1 * var(--debord));
  top: -22px;
  bottom: 14px;
  background: var(--dos);
  border-top: 1.5px solid var(--trait);
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%);
  z-index: -2;
}
.panneau__caisse::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--soie);
  background-image: var(--soie-trame);
  background-size: var(--soie-taille);
  border: 1.5px solid var(--trait);
  z-index: -1;
}
.panneau__tel {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-titres);
  font-size: 1.55rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--encre);
  text-decoration: none;
  margin-bottom: 18px;
}
.panneau__tel .icone { stroke: var(--cinabre); width: 0.85em; height: 0.85em; }
.panneau__bouton { width: 100%; justify-content: space-between; }
.panneau__renvoi {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--trait-fin);
  color: var(--encre);
  text-decoration: none;
  font-size: 0.96rem;
  font-weight: 500;
}
.panneau__renvoi .icone { stroke: var(--cinabre); margin-top: 0.28em; }
.panneau__renvoi:hover span { text-decoration: underline; }
.panneau__villes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.panneau__villes li {
  border: 1px solid var(--trait-fin);
  background: var(--dos);
  padding: 5px 8px;
  font-size: 12.5px;
  color: var(--encre);
}

@media (min-width: 1100px) {
  .cadre--duo { grid-template-columns: minmax(0, 1fr) 392px; column-gap: 64px; align-items: start; }
  /* Le panneau d'une page interieure porte le sommaire et les treize communes :
     il peut depasser une fenetre de 900 px. Il defile alors en dedans. Le
     retrait de 24 et 16 px, compense par une marge negative egale, garde le
     fond peint de la caisse (qui deborde de 22 px en haut et de 14 px sur les
     cotes) a l'interieur de la zone rognee : rien de visible n'est coupe, et
     aucune piece ne bouge d'un pixel. */
  .panneau {
    position: sticky;
    top: 116px;
    max-height: calc(100vh - 132px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px 16px 2px;
    margin: -24px -16px -2px;
  }
}

/* --- Bande « qui vend, qui intervient » ----------------------------------- */

.cadre--chaine { display: grid; gap: 48px; align-items: center; }
.chaine__planche { margin: 0; }
.chaine__planche svg { width: 100%; height: auto; }

@media (min-width: 1100px) {
  .cadre--chaine { grid-template-columns: minmax(0, 1fr) 544px; column-gap: 64px; }
  .bande--chaine { padding: 74px 0; }
}

/* --- Bande « ce que deviennent vos objets » ------------------------------- */

.flux__frise {
  border-bottom: 1.5px solid var(--trait);
  margin-bottom: 56px;
  background: #E9E0C9;
}
.flux__frise img {
  width: 100%;
  height: 284px;
  object-fit: cover;
  object-position: 50% 47%;
}
@media (max-width: 760px) {
  .flux__frise img { height: 160px; object-position: 50% 46%; }
  .flux__frise { margin-bottom: 40px; }
}
.cadre--flux { display: grid; gap: 40px; }
.flux__carte { margin: 0; }
.flux__carte svg { width: 100%; height: auto; }

@media (min-width: 1100px) {
  .flux__mot {
    display: grid;
    grid-template-columns: 350px minmax(0, 1fr);
    column-gap: 60px;
    align-items: start;
  }
  .flux__mot .bande__titre { margin-bottom: 0; }
}

/* --- Bande « le devis se fait sur photos » -------------------------------- */

.cadre--photos { display: grid; gap: 40px; align-items: center; }
.photos__planche { margin: 0; }
.photos__planche svg { width: 100%; height: auto; }

@media (min-width: 1100px) {
  .cadre--photos { grid-template-columns: 520px minmax(0, 1fr); column-gap: 64px; }
  .bande--photos { padding: 48px 0; }
}

/* --- Bande « où nous intervenons » ---------------------------------------- */

.cadre--villes { display: grid; gap: 40px; align-items: center; }
.villes__caisse {
  position: relative;
  isolation: isolate;
  padding: 28px 26px 26px;
}
.villes__caisse::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--debord));
  right: calc(-1 * var(--debord));
  top: -24px;
  bottom: 16px;
  background: var(--dos);
  border-top: 1.5px solid var(--trait);
  clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 24px 100%);
  z-index: -2;
}
.villes__caisse::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--os);
  background-image: var(--soie-trame);
  background-size: var(--soie-taille);
  border: 1.5px solid var(--trait);
  z-index: -1;
}
.villes__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.villes__liste li {
  border: 1.4px solid var(--trait);
  background: var(--soie);
  padding: 9px 11px;
  font-size: 13.5px;
  font-weight: 500;
}

@media (min-width: 1100px) {
  .cadre--villes { grid-template-columns: 520px minmax(0, 1fr); column-gap: 64px; }
  .villes__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .villes__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Bande des sources ---------------------------------------------------- */

.sources ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: source;
}
.sources li {
  counter-increment: source;
  display: flex;
  gap: 12px;
  border-top: 1.5px solid var(--trait);
  padding-top: 12px;
  font-size: 13.5px;
  line-height: 1.5;
}
.sources li::before {
  content: counter(source, decimal-leading-zero);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--encre-douce);
  flex: none;
}
.sources a { color: var(--cinabre); text-decoration-thickness: 1px; }
.sources a:hover { color: var(--encre); }

@media (min-width: 1100px) {
  .sources ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Deux pages service n'ont que deux sources : une grille figee a quatre
     colonnes y laissait la moitie de la bande nue. En auto-fit, quatre sources
     tiennent quatre colonnes comme avant, deux sources en tiennent deux, et la
     mesure du texte reste bornee. L'accueil, qui en a quatre, ne bouge pas. */
  .page--service .sources ul,
  .page--page .sources ul { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .page--service .sources li,
  .page--page .sources li { max-width: 62ch; }
}

/* --- Les planches qui glissent se prennent aussi au clavier --------------- */

.phare__carte[tabindex],
.qui__planche[tabindex] { outline-offset: 2px; }
.phare__carte:focus-visible,
.qui__planche:focus-visible { outline: 3px solid #E5A876; }

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

.cadre--faq { display: grid; gap: 34px; align-items: start; }
.faq__liste { display: grid; gap: 30px 26px; margin: 0; }
.faq__case {
  position: relative;
  isolation: isolate;
  padding: 24px 22px 22px;
}
.faq__case::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--debord));
  right: calc(-1 * var(--debord));
  top: -20px;
  bottom: 13px;
  background: var(--dos);
  border-top: 1.5px solid var(--trait);
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 20px 100%);
  z-index: -2;
}
.faq__case::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--soie);
  background-image: var(--soie-trame);
  background-size: var(--soie-taille);
  border: 1.5px solid var(--trait);
  z-index: -1;
}
.faq__case dt {
  font-family: var(--font-titres);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.22;
  margin-bottom: 12px;
}
.faq__case dd { margin: 0; font-size: 0.97rem; color: var(--encre-douce); }

@media (min-width: 1024px) {
  /* Deux zones, pas une grille ou les cases tombent ou elles peuvent : le
     titre tient un quart de la largeur a gauche et suit le defilement, les
     cases s'empilent en une seule colonne a droite, toutes de la meme
     largeur. La liste redevient une boite : avec « display: contents » ses
     cases coulaient dans les cellules du cadre, et la troisieme se retrouvait
     seule sous le titre. L'en-tete colle a 108 px, le titre se pose 24 px
     plus bas. */
  .cadre--faq { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: 64px; }
  .faq__mot { position: sticky; top: 132px; }
  .faq__liste { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  /* Une case fait toute la largeur de la colonne, sa reponse non : le reste de
     la feuille reste du papier, comme partout ailleurs ou la mesure est
     bornee. */
  .faq__case dd { max-width: 84ch; }
}

/* --- La demande ----------------------------------------------------------- */

.cadre--demande { display: grid; gap: 46px; align-items: start; }
.demande__feuille {
  position: relative;
  isolation: isolate;
  padding: 34px 32px 32px;
}
.demande__feuille::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--debord));
  right: calc(-1 * var(--debord));
  top: -24px;
  bottom: 16px;
  background: var(--dos);
  border-top: 1.5px solid var(--trait);
  clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 24px 100%);
  z-index: -2;
}
.demande__feuille::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--soie);
  background-image: var(--soie-trame);
  background-size: var(--soie-taille);
  border: 1.5px solid var(--trait);
  z-index: -1;
}
.demande__feuille .bande__titre { margin-bottom: 26px; max-width: none; }

.formulaire { display: grid; gap: 18px; }
.champ { display: grid; gap: 7px; }
.champ label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.champ input,
.champ textarea {
  font: inherit;
  font-size: 16px;
  color: var(--encre);
  background: var(--dos);
  border: 1.5px solid var(--trait);
  padding: 11px 13px;
  width: 100%;
}
.champ textarea { resize: vertical; min-height: 118px; }
.champ input:focus,
.champ textarea:focus { background: var(--soie); }
/* Chrome repeint un champ autorempli en clair : sans cette parade, six des
   sept champs cassent la bande. Aucune ombre interne, le monde l'interdit. */
.champ input:-webkit-autofill,
.champ input:-webkit-autofill:hover,
.champ input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--encre);
  caret-color: var(--encre);
  transition: background-color 8000s ease-in-out 0s;
}
.champ-duo { display: grid; gap: 18px; }
.champ-case { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; }
.champ-case input {
  width: 24px;
  height: 24px;
  margin: 0;
  flex: none;
  accent-color: var(--cinabre);
}
/* Choix facultatifs (urgence, demandeur) : titre comme les étiquettes des
   champs, options posées sur le même fond que les champs. */
.champ-choix { min-width: 0; margin: 0; padding: 0; border: 0; }
.champ-choix__titre {
  padding: 0;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.champ-choix__options { display: flex; flex-wrap: wrap; gap: 8px; }
.champ-choix__option {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  font-size: 15px;
  color: var(--encre);
  background: var(--dos);
  border: 1.5px solid var(--trait);
  cursor: pointer;
}
.champ-choix__option input { width: 18px; height: 18px; margin: 0; accent-color: var(--cinabre); }
.champ-choix__option:has(input:checked) { background: var(--soie); border-color: var(--cinabre); }
.champ-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.formulaire button { justify-self: start; }
.formulaire__message { margin: 0; font-size: 14.5px; min-height: 1.4em; font-weight: 500; }
.formulaire__message--erreur {
  color: #FFD9C6;
  border-left: 3px solid #E5A876;
  padding-left: 11px;
}
.formulaire__message--ok {
  color: #D8EBDB;
  border-left: 3px solid #D8EBDB;
  padding-left: 11px;
}
.formulaire__noscript { margin-top: 16px; font-size: 14.5px; }

.demande__caisse {
  position: relative;
  isolation: isolate;
  padding: 24px 22px 22px;
}
.demande__caisse::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--debord));
  right: calc(-1 * var(--debord));
  top: -22px;
  bottom: 14px;
  background: #183028;
  border-top: 1.5px solid var(--trait);
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%);
  z-index: -2;
}
.demande__caisse::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--trait);
  background-color: var(--dos);
  z-index: -1;
}
.demande__image { margin: 0 0 20px; }
.demande__image img {
  width: 100%;
  height: 208px;
  object-fit: cover;
  object-position: 50% 45%;
  border: 1.5px solid var(--trait);
}
.demande__contacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.demande__contacts a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--encre);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  word-break: break-word;
}
.demande__contacts a:hover { text-decoration: underline; }
.demande__contacts .icone { stroke: #E5A876; }
.demande__villes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.demande__villes li {
  border: 1px solid var(--trait-fin);
  padding: 5px 8px;
  font-size: 12.5px;
}

@media (min-width: 1100px) {
  .cadre--demande { grid-template-columns: minmax(0, 1fr) 404px; column-gap: 56px; }
  .champ-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bande--demande { padding: 78px 0; }
}
@media (min-width: 620px) and (max-width: 1099px) {
  .champ-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Fil d'Ariane et pages légales ---------------------------------------- */

.fil { margin: 0 0 18px; font-size: 13px; }
.fil ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.fil li + li::before { content: "/"; margin-right: 8px; color: var(--encre-douce); }
.fil a { color: var(--encre-douce); }

.prose--legal { max-width: 74ch; }
.prose--legal h2 {
  font-size: 1.45rem;
  margin: 2em 0 0.6em;
  padding-top: 0.6em;
  border-top: 1.5px solid var(--trait-fin);
}
.prose--legal h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

/* --- Le pied -------------------------------------------------------------- */

.pied {
  background-color: var(--encre);
  background-image: var(--soie-trame);
  background-size: var(--soie-taille);
  --soie-trame: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26'><g fill='%23efe8d8' opacity='0.075'><circle cx='2.5' cy='4.2' r='0.62'/><circle cx='9.8' cy='1.6' r='0.5'/><circle cx='15.1' cy='6.9' r='0.7'/><circle cx='21.6' cy='3.4' r='0.45'/><circle cx='5.4' cy='12.3' r='0.55'/><circle cx='12.7' cy='15.8' r='0.66'/><circle cx='19.2' cy='11.4' r='0.5'/><circle cx='24.1' cy='17.2' r='0.6'/><circle cx='3.1' cy='20.6' r='0.72'/><circle cx='9.3' cy='23.4' r='0.48'/><circle cx='16.8' cy='21.1' r='0.58'/><circle cx='22.4' cy='24.5' r='0.52'/></g><g stroke='%23efe8d8' stroke-width='.55' opacity='0.05' fill='none'><path d='M0 8.5h26M0 18.5h26M8.5 0v26M18.5 0v26'/></g></svg>");
  color: #E4DECB;
  padding: 54px 0 0;
}
.pied a { color: #E4DECB; text-decoration: none; }
.pied a:hover { color: #E5A876; text-decoration: underline; }
.pied__grille { display: grid; gap: 34px; padding-bottom: 40px; }
.pied__marque {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 14px;
  font-family: var(--font-titres);
  font-size: 1.4rem;
  font-weight: 700;
}
.pied__marque .entete__signe { stroke: #E5A876; }
.pied__role { margin: 0; font-size: 14px; line-height: 1.6; color: #BDB49E; max-width: 46ch; }
.pied__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14.5px; }
.pied__liste .icone { stroke: #E5A876; }
.pied__bloc--contact a { display: flex; align-items: center; gap: 9px; word-break: break-word; }

@media (min-width: 900px) {
  .pied__grille { grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 40px; }
}

/* --- Les planches dessinées ----------------------------------------------- */

.planche { display: block; width: 100%; height: auto; }
.pl-titre {
  font-family: var(--font-titres);
  font-weight: 700;
  fill: var(--pl-trait);
}
.pl-mot {
  font-family: var(--font-corps);
  font-weight: 500;
  fill: var(--pl-trait);
}
.pl-legende {
  font-family: var(--font-corps);
  font-weight: 600;
  letter-spacing: 0.012em;
  fill: var(--pl-trait);
}
/* Les capitales sont reservees aux libelles courts : au-dela d'une vingtaine
   de signes elles cassent la silhouette des mots. */
.pl-legende--courte {
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.planche--trame { opacity: 1; }

/* --- Les planches sur petit écran ----------------------------------------
   Une planche mise à la largeur du cadre divise toutes ses tailles de texte
   par le même facteur : à 390 px, les pastilles de la carte des flux tombaient
   à 4 px. Chaque planche garde donc sa largeur de dessin et glisse dans sa
   propre boîte, sans jamais faire défiler la page. */

@media (max-width: 1279px) {
  /* Une piste de grille vaut min-width:auto par defaut : sans ce zero, la
     planche pousse la grille au lieu de glisser dans sa boite, et c'est la
     page entiere qui deborde. */
  .cadre--duo > *,
  .cadre--chaine > *,
  .cadre--flux > *,
  .cadre--photos > *,
  .duo__mot { min-width: 0; }
  .flux__carte,
  .chaine__planche,
  .duo__planche,
  .photos__planche {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 6px;
  }
  /* Meme forme de selecteur que plus haut : « .flux__carte svg » l'emporte sur
     « .planche--flux » a specificite superieure, et la planche restait a 100 %. */
  .flux__carte svg,
  .chaine__planche svg,
  .photos__planche svg,
  .duo__planche svg { max-width: none; }
  .flux__carte svg { width: 1140px; }
  .photos__planche svg { width: 700px; }
  .duo__planche svg { width: 620px; }
  .chaine__planche svg { width: 520px; }
}

/* --- Réduction du mouvement ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* =========================================================================
   LES PAGES INTÉRIEURES
   Tout ce qui suit s'ajoute : aucune règle de l'accueil n'est redéfinie. Les
   pages intérieures reprennent les mêmes pièces (la caisse, la pastille, le
   panneau collant) dans leur propre ordre.
   ========================================================================= */

/* --- Tête d'une page intérieure ------------------------------------------ */

.tete__figure {
  position: relative;
  margin: 0;
  isolation: isolate;
}
.tete__figure::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--debord));
  right: calc(-1 * var(--debord));
  top: -26px;
  bottom: 16px;
  background: var(--dos);
  border-top: 1.5px solid var(--trait);
  clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 26px 100%);
  z-index: -1;
}
.tete__figure img {
  width: 100%;
  height: 468px;
  object-fit: cover;
  border: 1.5px solid var(--trait);
}

@media (min-width: 1100px) {
  .tete--interieure .tete__cadre {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 560px;
    gap: 60px;
    align-items: center;
  }
  .tete--interieure { padding: 58px 0 54px; }
}
@media (max-width: 1099px) {
  .tete__figure { margin-top: 38px; }
  .tete__figure img { height: 360px; }
}

/* --- La bande phare : la section qui doit se voir après le titre ---------- */

.bande--phare { background-color: var(--malachite); padding: 58px 0 64px; }
.cadre--phare { display: grid; gap: 40px; }
.phare__mot { display: grid; gap: 22px; }
.phare__titre { max-width: 17ch; }
.phare__prose { font-size: 1.08rem; }
.phare__prose p { max-width: 57ch; }
.phare__carte { margin: 0; }
.phare__carte svg { width: 100%; height: auto; }

@media (min-width: 1100px) {
  .bande--phare { padding: 74px 0 78px; }
  .cadre--phare { gap: 48px; }
  .phare__mot {
    grid-template-columns: 400px minmax(0, 1fr);
    column-gap: 64px;
    align-items: start;
  }
  .phare__mot .bande__titre { margin-bottom: 0; }
  .phare__titre { font-size: clamp(1.9rem, 2.9vw, 2.55rem); }
}

/* --- Ce qui est compris, ce qui ne l'est pas ------------------------------ */

.bande--inclus { background-color: var(--malachite-voile); }
.cadre--inclus { display: grid; gap: 34px 30px; }
.inclus__colonne {
  position: relative;
  isolation: isolate;
  padding: 26px 24px 24px;
}
.inclus__colonne::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--debord));
  right: calc(-1 * var(--debord));
  top: -22px;
  bottom: 14px;
  background: var(--dos);
  border-top: 1.5px solid var(--trait);
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%);
  z-index: -2;
}
.inclus__colonne::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--soie);
  background-image: var(--soie-trame);
  background-size: var(--soie-taille);
  border: 1.5px solid var(--trait);
  z-index: -1;
}
.inclus__colonne--hors::after { background-color: var(--os); }
.inclus__marque {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--trait-fin);
}
.inclus__marque .icone { width: 26px; height: 26px; stroke: var(--ocre); }
.inclus__marque .etiquette { margin: 0; }
.inclus__colonne .prose p { max-width: none; }

@media (min-width: 1000px) {
  .cadre--inclus { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 60px; }
  .inclus__mot { grid-column: 1 / -1; }
}

/* --- Le chemin des étapes ------------------------------------------------- */

.bande--chemin { background-color: var(--os); }
.chemin {
  display: grid;
  gap: 32px;
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  counter-reset: etape;
}
.etape {
  counter-increment: etape;
  position: relative;
  isolation: isolate;
  padding: 24px 26px 24px;
  display: grid;
  gap: 16px;
}
.etape::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--debord));
  right: calc(-1 * var(--debord));
  top: -20px;
  bottom: 13px;
  background: var(--dos);
  border-top: 1.5px solid var(--trait);
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 20px 100%);
  z-index: -2;
}
.etape::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--soie);
  background-image: var(--soie-trame);
  background-size: var(--soie-taille);
  border: 1.5px solid var(--trait);
  z-index: -1;
}
.etape__marque {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ocre);
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--trait-fin);
}
.etape__marque .marque { width: 40px; height: 40px; }
.etape__marque::after {
  content: counter(etape, decimal-leading-zero);
  font-family: var(--font-titres);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--dos);
  -webkit-text-stroke: 1.2px var(--trait);
}
.etape__texte { margin: 0; font-size: 1.02rem; max-width: 58ch; }
.etape__fil { display: none; }

/* Sur ordinateur les cinq étapes descendent en diagonale : neuf colonnes, une
   caisse large de cinq, décalée d'une colonne à chaque étape. Le fil en
   tirets tient la descente d'une caisse à la suivante. */
@media (min-width: 1000px) {
  .chemin { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 0; row-gap: 46px; }
  .etape:nth-child(1) { grid-column: 1 / span 4; }
  .etape:nth-child(2) { grid-column: 2 / span 4; }
  .etape:nth-child(3) { grid-column: 3 / span 4; }
  .etape:nth-child(4) { grid-column: 4 / span 4; }
  .etape:nth-child(n+5) { grid-column: 5 / span 4; }
  .etape__fil {
    display: block;
    position: absolute;
    left: 26px;
    bottom: -46px;
    width: calc(100% / 4);
    height: 46px;
    border-left: 1.6px dashed var(--trait);
    border-bottom: 1.6px dashed var(--trait);
  }
  .etape:last-child .etape__fil { display: none; }
}

/* --- Qui entre chez vous -------------------------------------------------- */

.bande--qui { background-color: var(--malachite); }
.cadre--qui { display: grid; gap: 40px; align-items: center; }
.qui__planche { margin: 0; }
.qui__planche svg { width: 100%; height: auto; }

@media (min-width: 1100px) {
  .cadre--qui { grid-template-columns: 500px minmax(0, 1fr); column-gap: 64px; }
  .bande--qui { padding: 68px 0; }
}

/* --- Les fiches d'une page intérieure ------------------------------------- */

.page--service .bande--colonne,
.page--page .bande--colonne { background-color: var(--os); }
.page--service .fiche,
.page--page .fiche {
  counter-increment: fiche;
  position: relative;
  isolation: isolate;
  padding: 30px 30px 28px;
}
.page--service .fiche::before,
.page--page .fiche::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--debord));
  right: calc(-1 * var(--debord));
  top: -22px;
  bottom: 14px;
  background: var(--dos);
  border-top: 1.5px solid var(--trait);
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%);
  z-index: -2;
}
.page--service .fiche::after,
.page--page .fiche::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--soie);
  background-image: var(--soie-trame);
  background-size: var(--soie-taille);
  border: 1.5px solid var(--trait);
  z-index: -1;
}
.page--service .duo__mot,
.page--page .duo__mot { counter-reset: fiche; }
.page--service .fiche + .fiche,
.page--page .fiche + .fiche { margin-top: 54px; }
.page--service .fiche__titre::before,
.page--page .fiche__titre::before {
  content: counter(fiche, decimal-leading-zero);
  display: block;
  font-family: var(--font-corps);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.17em;
  color: var(--encre-douce);
  margin-bottom: 10px;
}

/* --- Le sommaire du panneau collant --------------------------------------- */

.panneau__sommaire ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  counter-reset: pansomm;
}
.panneau__sommaire li { counter-increment: pansomm; display: flex; gap: 10px; }
.panneau__sommaire li::before {
  content: counter(pansomm, decimal-leading-zero);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--encre-douce);
  padding-top: 3px;
}
.panneau__sommaire a {
  flex: 1;
  color: var(--encre);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.35;
  border-bottom: 1px solid var(--trait-fin);
  padding-bottom: 6px;
}
.panneau__sommaire a:hover { color: var(--cinabre); border-bottom-color: var(--cinabre); }

/* --- Pages légales : une colonne, tenue par son index --------------------- */

.cadre--legal { display: grid; gap: 34px; align-items: start; }
.legal__index .etiquette { margin-bottom: 12px; }
.legal__sommaire ol {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: grid;
  gap: 7px;
  counter-reset: somm;
}
.legal__sommaire li { counter-increment: somm; display: flex; gap: 10px; }
.legal__sommaire li::before {
  content: counter(somm, decimal-leading-zero);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--encre-douce);
  padding-top: 2px;
}
.legal__sommaire a {
  color: var(--encre);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.35;
  border-bottom: 1px solid var(--trait-fin);
  padding-bottom: 4px;
  flex: 1;
}
.legal__sommaire a:hover { color: var(--cinabre); border-bottom-color: var(--cinabre); }
.legal__liste {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 2px;
}
.legal__liste a {
  display: block;
  padding: 9px 12px;
  border: 1.4px solid var(--trait-fin);
  background: var(--soie);
  color: var(--encre);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.legal__liste a:hover { background: var(--dos); }
.legal__liste a[aria-current="page"] {
  background: var(--dos);
  border-color: var(--trait);
  font-weight: 600;
}
.legal__tel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--encre);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.legal__tel .icone { stroke: var(--cinabre); }
.legal__feuille {
  position: relative;
  isolation: isolate;
  padding: 34px 36px 32px;
}
/* Une adresse de courriel ne se coupe pas toute seule : a 320 px elle poussait
   la feuille de 20 px au-dela du cadre. */
.legal__feuille .prose--legal { overflow-wrap: break-word; }
@media (max-width: 619px) {
  .legal__feuille { padding: 26px 20px 24px; }
}
.legal__feuille::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--debord));
  right: calc(-1 * var(--debord));
  top: -24px;
  bottom: 16px;
  background: var(--dos);
  border-top: 1.5px solid var(--trait);
  clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 24px 100%);
  z-index: -2;
}
.legal__feuille::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--soie);
  background-image: var(--soie-trame);
  background-size: var(--soie-taille);
  border: 1.5px solid var(--trait);
  z-index: -1;
}

@media (min-width: 1000px) {
  .cadre--legal { grid-template-columns: 280px minmax(0, 1fr); column-gap: 60px; }
  .legal__index { position: sticky; top: 124px; }
  .bande--legal { background-color: var(--os); }
}

/* --- Les nouvelles planches sur petit écran -------------------------------
   Même discipline que les planches de l'accueil : une planche garde sa
   largeur de dessin et glisse dans sa propre boîte, pour que ses libellés ne
   soient jamais divisés par le facteur de réduction. */

@media (max-width: 1279px) {
  .cadre--phare > *,
  .cadre--qui > *,
  .phare__mot,
  .qui__mot { min-width: 0; }
  .phare__carte,
  .qui__planche {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 6px;
  }
  .phare__carte svg,
  .qui__planche svg { max-width: none; }
  .phare__carte svg { width: 1240px; }
  .qui__planche svg { width: 736px; }
}