:root{--accent:#7a1f2b;--bandeau:#ffffff;--chant:#55121c;--doux:#5e4a4f;--filet:#dccdc5;--focus:#1d4ed8;--fond:#f5eeea;--mur:#ebe0da;--police-texte:Charter,"Bitstream Charter","Sitka Text",Cambria,serif;--police-titre:Seravek,"Gill Sans Nova",Ubuntu,Calibri,"DejaVu Sans",source-sans-pro,sans-serif;--poteau:#85807d;--poteau-clair:#c9c3bf;--sur-accent:#ffffff;--sur-accent-doux:#f2d9dc;--texte:#24161a;--vis:#f6f0ed;--vis-fente:#7c706c;}
/* Plaques émaillées (t2b089) : chaque article est une plaque de rue émaillée (liseré clair, fronton numéroté, deux vis),
   vissée sur un mur clair sous sa capture ; sur téléphone, les plaques sont fixées l'une sous l'autre le long d'un poteau. */
:root {
  --tete: radial-gradient(circle closest-side, var(--vis) 0 56%, var(--vis-fente) 66% 84%, #0000 95%);
  --fente: linear-gradient(135deg, #0000 41%, var(--vis-fente) 41% 59%, #0000 59%);
  --lisere: inset 0 0 0 5px var(--accent), inset 0 0 0 7px var(--sur-accent);
  --lisere-double: inset 0 0 0 5px var(--accent), inset 0 0 0 7px var(--sur-accent), inset 0 0 0 10px var(--accent), inset 0 0 0 11px var(--sur-accent);
  --relief: 0 2px 0 var(--chant), 0 14px 24px -16px #000000b8;
  --collier: linear-gradient(var(--poteau-clair) 0 1px, var(--poteau) 1px calc(100% - 1px), var(--vis-fente) 0);
  --fut: linear-gradient(90deg, var(--poteau), var(--poteau-clair) 40%, var(--poteau));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  display: flex; flex-direction: column; min-height: 100vh; margin: 0;
  background: var(--fond); color: var(--texte);
  font: 1.0625rem/1.6 var(--police-texte); overflow-wrap: break-word;
}
main { flex: 1 0 auto; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--police-titre); line-height: 1.15; }
.vh, .evitement:not(:focus) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.evitement {
  position: absolute; top: .75rem; left: .75rem; z-index: 5; padding: .75rem 1.25rem; border-radius: 6px;
  background: var(--accent); color: var(--sur-accent); font-weight: 700; text-decoration: none;
}

/* Bandeau : nom à l'accent, menu en petites plaques */
.bandeau { background: var(--bandeau); border-bottom: 1px solid var(--filet); }
.bandeau-cadre {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem;
  max-width: 75rem; margin: 0 auto; padding: .875rem 1.5rem;
}
.marque {
  display: inline-flex; align-items: center; gap: .75rem; min-width: 0; min-height: 2.75rem; color: var(--accent); text-decoration: none;
  font: 700 1.25rem/1.1 var(--police-titre); letter-spacing: .07em; text-transform: uppercase;
}
.marque:hover .marque-nom { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.marque-image { flex: none; width: 2.75rem; height: 2.75rem; }
.marque-nom { min-width: 0; overflow-wrap: anywhere; }
.menu ul { display: flex; gap: .625rem; margin: 0; padding: 0; list-style: none; }
.menu a, .numero, .sens, .retour a {
  display: flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .25rem 1.125rem;
  border-radius: 6px; background: var(--accent); color: var(--sur-accent); text-decoration: none; text-align: center;
  box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 0 4px var(--sur-accent), 0 2px 0 var(--chant);
  font: 700 .8125rem/1.15 var(--police-titre); letter-spacing: .08em; text-transform: uppercase;
}
.menu a:hover, a.numero:hover, .sens:hover, .retour a:hover { text-decoration: underline; text-underline-offset: .2em; }
.menu a[aria-current], .numero[aria-current] {
  background: var(--bandeau); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent);
}

/* Plaque émaillée : corps à liseré, deux vis, fronton qui se fond dans le liseré */
.plaque { display: flex; flex-direction: column; }
.plaque-corps {
  --vx: 15px; --vs: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .375rem;
  padding: 1rem 1.5rem; border-radius: 10px; color: var(--sur-accent); text-align: center;
  background:
    var(--fente) left calc(var(--vx) - var(--vs) * .3) center / calc(var(--vs) * .6) calc(var(--vs) * .6) no-repeat,
    var(--fente) right calc(var(--vx) - var(--vs) * .3) center / calc(var(--vs) * .6) calc(var(--vs) * .6) no-repeat,
    var(--tete) left calc(var(--vx) - var(--vs) / 2) center / var(--vs) var(--vs) no-repeat,
    var(--tete) right calc(var(--vx) - var(--vs) / 2) center / var(--vs) var(--vs) no-repeat,
    var(--accent);
  box-shadow: var(--lisere), var(--relief);
}
.fronton {
  position: relative; z-index: 0; order: -1; align-self: center; min-width: 3.5rem; max-width: calc(100% - 4rem);
  margin: 0 0 -5px; padding: 9px 14px; border-radius: 10px 10px 0 0;
  background: var(--accent); color: var(--sur-accent); text-align: center;
  font: 700 .75rem/1.2 var(--police-titre); letter-spacing: .12em; text-transform: uppercase; overflow-wrap: anywhere;
}
.fronton::before, .fronton::after {
  content: ""; position: absolute; z-index: -1; inset: 5px 5px -2px;
  border: 2px solid var(--sur-accent); border-bottom: 0; border-radius: 5px 5px 0 0; background: var(--accent);
}
.fronton::after { display: none; }
.plaque-double .plaque-corps, .carte-une .plaque-corps {
  --vx: 25px; --vs: 14px; padding: 1.5rem 2.75rem; box-shadow: var(--lisere-double), var(--relief);
}
.plaque-double .fronton, .carte-une .fronton { padding: 15px 22px 10px; }
.plaque-double .fronton::after, .carte-une .fronton::after {
  display: block; inset: 10px 10px -6px; border-width: 1px; border-radius: 2px 2px 0 0;
}
.fronton-large, .carte-une .fronton { font-size: .8125rem; letter-spacing: .1em; }
/* Titre court : taille liée à la largeur de la carte, pour qu'un domaine de 27 lettres d'un seul tenant tienne sur ordinateur
   (26 sur tablette et à 360 px) ; overflow-wrap en dernier recours seulement */
.plaque-titre {
  font: 700 min(1.125rem, 4.6cqi)/1.2 var(--police-titre); letter-spacing: .015em; text-transform: uppercase;
  overflow-wrap: anywhere;
}
.plaque-date {
  font: 600 .75rem/1.3 var(--police-titre); letter-spacing: .1em; text-transform: uppercase; color: var(--sur-accent-doux);
}
.plaque-date::before {
  content: ""; display: block; width: 2rem; height: 2px; margin: .125rem auto .5rem; background: var(--sur-accent-doux);
}

/* Accueil : la grande plaque du nom, sur un pan de mur en pierre de taille */
.carrefour {
  position: relative; padding: 3rem 1.5rem 3.25rem; border-bottom: 1px solid var(--filet);
  background:
    conic-gradient(from 270deg at 2px 50%, var(--mur) 0 90deg, #0000 0) 0 0 / 10rem 7rem,
    conic-gradient(from 270deg at 2px 50%, var(--mur) 0 90deg, #0000 0) 5rem 3.5rem / 10rem 7rem,
    repeating-linear-gradient(180deg, #0000 0 3.375rem, var(--mur) 3.375rem 3.5rem);
}
.plaque-h1 { width: fit-content; min-width: min(100%, 30rem); max-width: 100%; margin: 0 auto; }
.plaque-h1 .plaque-corps { --vx: 30px; --vs: 16px; min-height: 8.5rem; padding: 1.75rem 3.75rem; }
/* Un nom d'un seul mot de 28 lettres tient sur une ligne dès 640 px (100vw moins les marges et le padding de la plaque) */
.h1-site {
  font-size: clamp(1rem, 4.85vw - .51rem, 2.625rem); letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere;
}
.cadre { max-width: 75rem; margin: 0 auto; padding: 3.25rem 1.5rem 0; }
.vide { text-align: center; color: var(--doux); }

/* Cartes : grille de plaques sur le mur, capture au-dessus comme une vitrine */
.cartes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2rem; margin: 0; padding: 0; list-style: none;
}
.carte { position: relative; container-type: inline-size; display: flex; flex-direction: column; gap: .875rem; }
.vitrine { order: -1; }
.carte:not(.carte-nue) > .plaque { margin-top: -2rem; }
.vitrine img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: var(--mur);
  box-shadow: 0 0 0 1px var(--filet), 0 12px 22px -16px #000000b8;
}
.carte .plaque-corps { min-height: 6.25rem; }
.carte-nue .plaque-corps { min-height: 150px; }
.carte-lien { color: inherit; text-decoration: none; }
.carte-lien::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 10px; }
.carte-lien:focus-visible { outline: 0; }
.carte-lien:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 6px; }
.carte:hover .carte-lien { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.carte-extrait {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
  color: var(--doux); font-size: .9375rem; line-height: 1.55;
}

/* La une : grande capture à gauche, grande plaque à droite ; sans image, plaque géante et extrait à côté */
.carte-une {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "v p" "v e"; gap: 1.25rem 2rem; align-items: center;
}
.carte-une .vitrine { grid-area: v; }
.carte-une > .plaque { grid-area: p; align-self: end; }
.carte-une:not(.carte-nue) > .plaque { margin-top: 0; }
.carte-une .carte-extrait { grid-area: e; align-self: start; -webkit-line-clamp: 6; font-size: 1.0625rem; color: var(--texte); }
.carte-une .plaque-corps { --vx: 23px; min-height: 11rem; padding-inline: 2.25rem; }
.carte-une .plaque-titre { font-size: min(1.75rem, 2.25cqi); }
.carte-une.carte-nue { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "p e"; }
.carte-une.carte-nue > .plaque { align-self: stretch; }
.carte-une.carte-nue .plaque-corps { flex: 1; min-height: 15rem; }
.carte-une.carte-nue .plaque-titre { font-size: min(2.375rem, 3cqi); }
.carte-une.carte-nue .carte-extrait { align-self: center; }

/* Pagination : plaques de numéros de maison */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; margin-top: 4.5rem; }
.numeros { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.numero { min-width: 3rem; min-height: 3rem; padding: 0 .5rem; font-size: 1.125rem; letter-spacing: 0; }
.numero[aria-current] { background: var(--sur-accent); }
.sens { min-height: 3rem; gap: .625rem; }
.sens-prec::before { content: "←"; content: "←" / ""; }
.sens-suiv::after { content: "→"; content: "→" / ""; }

/* Pied : une grande plaque, vis aux quatre coins, le domaine sur son fronton */
.pied { width: 100%; max-width: 75rem; margin: 5rem auto 0; padding: 0 1.5rem 2.5rem; }
.pied .pied-corps {
  gap: 1rem; padding: 2.25rem 3.5rem;
  background:
    var(--fente) left 21px top 21px / 8px 8px no-repeat, var(--fente) right 21px top 21px / 8px 8px no-repeat,
    var(--fente) left 21px bottom 21px / 8px 8px no-repeat, var(--fente) right 21px bottom 21px / 8px 8px no-repeat,
    var(--tete) left 18px top 18px / 14px 14px no-repeat, var(--tete) right 18px top 18px / 14px 14px no-repeat,
    var(--tete) left 18px bottom 18px / 14px 14px no-repeat, var(--tete) right 18px bottom 18px / 14px 14px no-repeat,
    var(--accent);
}
.pied-nom { font: 700 clamp(1.125rem, 4.75vw - .5rem, 1.875rem)/1.1 var(--police-titre); letter-spacing: .09em; text-transform: uppercase; overflow-wrap: anywhere; }
.pied-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2rem; margin: 0; padding: 0; list-style: none; }
.pied-liens a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--sur-accent); font-size: .9375rem; }
.pied :focus-visible { outline-color: var(--sur-accent); }

/* Article et pages : en-tête en grande plaque, texte sur le mur */
.principal-lecture { width: 100%; max-width: 75rem; margin: 0 auto; padding: 3.25rem 1.5rem 0; }
.entete-lecture { max-width: 56rem; margin: 0 auto 3rem; }
.plaque-grande .plaque-corps { min-height: 8rem; }
.titre-lecture { font-size: clamp(1.125rem, 5.15vw - .45rem, 2.2rem); letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; }
.titre-suite { display: block; margin-top: .625rem; font-size: max(.45em, .8125rem); letter-spacing: .14em; color: var(--sur-accent-doux); }
.texte { max-width: 46rem; margin: 0 auto; line-height: 1.7; }
.texte > * + * { margin-top: 1.1em; }
.texte a { overflow-wrap: anywhere; }
.texte img {
  width: 100%; margin-top: 1.75em; margin-bottom: .65em; padding: 5px; border: 3px solid var(--accent); border-radius: 10px;
  background: var(--sur-accent);
}
.texte h2 {
  margin-top: 2em; padding-bottom: .375rem; border-bottom: 3px solid var(--accent);
  font-size: 1.1875rem; letter-spacing: .05em; text-transform: uppercase;
}
.texte ul { padding-left: 1.25rem; }
.retour { display: flex; justify-content: center; max-width: 46rem; margin: 3.5rem auto 0; }
.retour a::before { content: "←"; content: "←" / ""; margin-right: .625rem; }

/* Plan du site : trois colonnes, chaque intertitre sur une petite plaque */
.page-plan_du_site .texte { max-width: 72rem; }
.page-plan_du_site .texte h2 {
  display: table; margin: 2.5rem 0 1.25rem; padding: .625rem 1.5rem; border: 0; border-radius: 6px;
  background: var(--accent); color: var(--sur-accent); font-size: .875rem; letter-spacing: .1em;
  box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 0 4px var(--sur-accent), 0 2px 0 var(--chant);
}
.page-plan_du_site .texte ul { margin: 0; padding: 0; list-style: none; }
.page-plan_du_site .texte > ul { columns: 3 15rem; column-gap: 2.5rem; }
.page-plan_du_site .texte > ul:first-child { display: flex; flex-wrap: wrap; gap: 0 2rem; columns: auto; }
.page-plan_du_site .texte > ul > li { break-inside: avoid; padding: .25rem 0; line-height: 1.4; }
.page-plan_du_site nav ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.page-plan_du_site nav a, .page-plan_du_site nav b {
  display: flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 2px solid var(--accent); border-radius: 6px;
}
.page-plan_du_site nav b { background: var(--accent); color: var(--sur-accent); }

/* Contact : cadre du formulaire blanc à coins de 10 px */
.page-contact iframe {
  margin-top: 1.75rem; border-radius: 10px; background: #fff;
  box-shadow: 0 0 0 1px var(--filet), 0 0 0 6px var(--bandeau), 0 0 0 9px var(--accent), 0 18px 32px -20px #000000b8;
}

/* 404 : une plaque vide, liserés seuls */
.page-erreur { text-align: center; }
.plaque-vide { width: min(100%, 26rem); margin: 0 auto 2.5rem; }
.plaque-vide .fronton { min-width: 6rem; min-height: 2.25rem; }
.plaque-vide .plaque-corps { min-height: 8.5rem; }
.titre-erreur { font-size: clamp(1.75rem, 5vw, 2.5rem); letter-spacing: .05em; text-transform: uppercase; }
.texte-erreur { margin-top: 1rem; color: var(--doux); }
.page-erreur .retour { margin-top: 2.5rem; }

/* Tablette : deux colonnes, la une au-dessus */
@media (max-width: 63.99rem) {
  .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.75rem 1.5rem; }
  .carte-une, .carte-une.carte-nue { display: flex; }
  .carte-une > .plaque { align-self: stretch; }
  .carte-une:not(.carte-nue) > .plaque { margin-top: -2rem; }
  .carte-une .plaque-titre, .carte-une.carte-nue .plaque-titre { font-size: min(2rem, 4.4cqi); }
  .carte-une.carte-nue .plaque-corps { min-height: 12rem; }
}

/* Téléphone : le poteau, les plaques fixées l'une sous l'autre par deux colliers, la capture en vignette dessous */
@media (max-width: 39.99rem) {
  body { font-size: 1rem; }
  .bandeau-cadre { flex-direction: column; align-items: stretch; gap: .75rem; padding: .75rem 1rem .875rem; }
  .marque { font-size: 1.0625rem; }
  .marque-image { width: 2.5rem; height: 2.5rem; }
  .menu ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .menu a { padding: .25rem .375rem; font-size: .75rem; letter-spacing: .04em; }
  .carrefour { padding: 2.25rem 1rem 2rem 2rem; }
  .carrefour::before, .cartes::before {
    content: ""; position: absolute; top: 5rem; bottom: -1px; left: 1.125rem; width: .625rem;
    border-radius: .3125rem .3125rem 0 0; background: var(--fut);
  }
  .plaque-h1 { width: auto; min-width: 0; }
  .plaque-h1 .plaque-corps { --vx: 22px; --vs: 14px; min-height: 6rem; padding: 1.25rem 2rem; }
  .h1-site { font-size: max(.9375rem, 4.6vw); letter-spacing: .05em; }
  .plaque-double .fronton { max-width: calc(100% - 2.5rem); padding: 15px 18px 10px; font-size: .75rem; letter-spacing: .06em; }
  .carte > .plaque, .plaque-h1 {
    margin-left: -.875rem; padding-left: .875rem;
    background: var(--collier) left top 2.75rem / .875rem .5rem no-repeat, var(--collier) left bottom .875rem / .875rem .5rem no-repeat;
  }
  .plaque-h1 { background-position: left top 3.5rem, left bottom .875rem; }
  .cadre { padding: 2.75rem 1rem 0; }
  .cartes { position: relative; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; padding-left: 1rem; }
  .cartes::before { top: -2.75rem; bottom: 0; left: .125rem; border-radius: 0; }
  .vitrine { order: 0; }
  .carte:not(.carte-nue) > .plaque, .carte-une:not(.carte-nue) > .plaque { margin-top: 0; }
  .carte { gap: .625rem; }
  .carte-une .plaque-corps { --vx: 20px; --vs: 12px; min-height: 7.5rem; padding: 1.25rem 1.875rem; }
  .carte-nue .plaque-corps { min-height: 7.5rem; }
  .carte-une .plaque-titre, .carte-une.carte-nue .plaque-titre { font-size: min(1.25rem, 4.6cqi); }
  .carte-une.carte-nue .plaque-corps { min-height: 9rem; }
  .carte-extrait, .carte-une .carte-extrait { -webkit-line-clamp: 3; font-size: .9375rem; }
  .numeros { order: -1; width: 100%; }
  .sens { flex: 1 1 100%; padding: .25rem .5rem; }
  .pied { margin-top: 4rem; padding: 0 1rem 1.5rem; }
  .pied .pied-corps { padding: 2.25rem 1.5rem 2rem; }
  .pied-nom { letter-spacing: .05em; }
  .pied-liens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
  .pied-liens a { justify-content: center; width: 100%; }
  .principal-lecture { padding: 3rem 1rem 0; }
  .entete-lecture { margin-bottom: 2.25rem; }
  .plaque-grande .plaque-corps { --vx: 19px; --vs: 11px; padding: 1.5rem 1.75rem; min-height: 7rem; }
  .titre-lecture { font-size: calc(3.4vw + .2rem); }
  .page-contact iframe { box-shadow: 0 0 0 1px var(--filet), 0 0 0 4px var(--bandeau), 0 0 0 6px var(--accent), 0 14px 26px -18px #000000b8; }
  .page-plan_du_site .texte > ul > li { padding: 0; }
  .page-plan_du_site .texte > ul a { display: block; padding: .7rem 0; }
}