/* ATALLES GROUPE : le monde des plaques émaillées de Casablanca.
   Mur de stuc blanc, émail bleu nuit à double filet blanc, plaques vertes pour l'action, deux encres par plaque.
   Lettrage de plaque : Archivo étroit et gras en capitales ; texte : Archivo en largeur normale. */
:root {
  --navy: #10284a; --navy-2: #1b3459; --green: #327451; --white: #ffffff; --stone: #eef1f4; --rivet: #c9d2dc;
  --ink-soft: #4d5d70; --on-navy-soft: #c9d3df; --hair: rgb(16 40 74 / .14);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --enamel-shadow: 0 16px 32px -20px rgb(16 40 74 / .7), 0 3px 6px -2px rgb(16 40 74 / .28);
  --plaque-face: "Archivo", system-ui, sans-serif;
}

/* ---------- surfaces du navigateur (un monde clair : le mode sombre forcé des navigateurs ne repeint pas l'émail) */
:root { color-scheme: only light; }
html { scrollbar-color: var(--navy) var(--stone); -webkit-font-smoothing: antialiased; }
body.world { background: var(--white); color: var(--navy); font-family: var(--font-text); }
::selection { background: var(--navy); color: var(--white); }
input, textarea { caret-color: var(--green); }
.world a { text-underline-offset: .22em; text-decoration-thickness: 1px; }
.world :focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.world h1, .world h2, .world h3 { font-family: var(--font-display); color: inherit; }

/* ---------- la plaque émaillée */
.plaque {
  --pl-bg: var(--navy); --pl-ink: var(--white); --pl-rivet: var(--rivet);
  position: relative; display: inline-block; padding: 7px; border-radius: 14px; color: var(--pl-ink);
  background:
    radial-gradient(circle at 17px 17px, var(--pl-rivet) 0 2.6px, transparent 3.2px),
    radial-gradient(circle at calc(100% - 17px) 17px, var(--pl-rivet) 0 2.6px, transparent 3.2px),
    radial-gradient(circle at 17px calc(100% - 17px), var(--pl-rivet) 0 2.6px, transparent 3.2px),
    radial-gradient(circle at calc(100% - 17px) calc(100% - 17px), var(--pl-rivet) 0 2.6px, transparent 3.2px),
    var(--pl-bg);
  box-shadow: var(--enamel-shadow);
}
/* un seul reflet net, une ligne, jamais un dégradé */
.plaque::after { content: ""; position: absolute; left: 22px; right: 22px; top: 3px; height: 1px; border-radius: 1px; background: rgb(255 255 255 / .32); pointer-events: none; }
/* le double filet blanc : un trait de 2 px, un jour, un trait de 1 px */
.plaque::before { content: ""; position: absolute; inset: 6px; border: 2px solid currentColor; border-radius: 10px; box-shadow: inset 0 0 0 3px var(--pl-bg), inset 0 0 0 4px currentColor; pointer-events: none; }
.plaque__in { position: relative; display: block; padding: 21px 33px; }
.plaque__title {
  margin: 0; font-family: var(--plaque-face); font-stretch: 62%; font-weight: 800; text-transform: uppercase;
  letter-spacing: .03em; word-spacing: .25em; line-height: 1; font-size: clamp(32px, 2vw + 22px, 56px); text-wrap: balance;
}
/* une plaque ne coupe jamais un mot : pas de césure sur les plaques ni sur les titres du mur
   (le kit l'active sur les titres avec une limite de 10 lettres que Safari ignore : il coupait « HÔ-TELS ») */
.world :is(h1, h2, h3, h4), .plaque__title, .hang__text, .board__name, .sp-title { hyphens: manual; -webkit-hyphens: manual; }
/* très petit écran : la plaque de rue resserre ses marges et son lettrage pour garder « RESTAURANTS » entier */
@media (max-width: 400px) {
  .plaque--street .plaque__in { padding: 18px 22px 20px; }
  .hp__signs .plaque__title { font-size: clamp(26px, 6vw + 8px, 32px); }
}
.plaque--white { --pl-bg: var(--white); --pl-ink: var(--navy); --pl-rivet: #9aa8b8; }
.plaque--green { --pl-bg: var(--green); }

/* plaque d'action : un bouton en émail vert à filet blanc */
.plaque-btn {
  display: inline-flex; padding: 5px; border-radius: 11px; background: var(--green); color: var(--white); text-decoration: none;
  box-shadow: var(--enamel-shadow); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.plaque-btn > span {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; box-shadow: inset 0 0 0 2px currentColor; border-radius: 7px;
  font-family: var(--plaque-face); font-stretch: 75%; font-weight: 700; font-size: 16px; letter-spacing: .05em; text-transform: uppercase;
}
.plaque-btn:hover { transform: translateY(-2px); box-shadow: var(--enamel-shadow), 0 22px 34px -22px rgb(16 40 74 / .8); }
.plaque-btn:active { transform: translateY(0) scale(.985); }
.plaque-btn--light, .plaque-btn--outline { background: var(--white); color: var(--navy); }
button.plaque-btn { border: 0; font: inherit; cursor: pointer; }

/* ---------- barre du haut : le logo, des mots en capitales étroites, la plaque d'action */
.world .nav { background: var(--white); }
.world .nav__link {
  font-stretch: 75%; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; color: var(--white); background: var(--navy);
  padding: 9px 14px; border-radius: 7px; box-shadow: inset 0 0 0 2px var(--navy), inset 0 0 0 3px var(--white), 0 6px 12px -8px rgb(16 40 74 / .8);
  transition: transform .25s var(--ease-out);
}
.world .nav__link::after { display: none; }
.world .nav__link:hover, .world .nav__link[aria-current="page"] { transform: translateY(-2px); color: var(--white); }
.world .nav__link[aria-current="page"] { background: var(--green); box-shadow: inset 0 0 0 2px var(--green), inset 0 0 0 3px var(--white), 0 6px 12px -8px rgb(16 40 74 / .8); }
.world .nav__links { gap: 10px; }
/* sur l'accueil, la plaque d'action de la barre attend que celle du premier écran soit sortie */
.world .nav .nav__actions { transition: opacity .3s ease, visibility 0s linear .3s; }
.is-hero-cta .world .nav .nav__actions, html.is-hero-cta .nav .nav__actions { opacity: 0; visibility: hidden; }
.world .nav .btn--primary, .world .actionbar .btn--primary {
  background: var(--green); color: var(--white); border-radius: 10px; font-stretch: 75%; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  box-shadow: inset 0 0 0 3px var(--green), inset 0 0 0 5px var(--white), var(--enamel-shadow);
}
.nav__logo .nav__img { display: block; height: 41px; width: auto; }
@media (min-width: 640px) { .nav__logo .nav__img { height: 50px; } }

/* téléphone et tablette : le bouton du menu est une petite plaque, la feuille du menu empile les plaques de rue */
.world .nav__toggle {
  border: 0; border-radius: 9px; background: var(--navy); color: var(--white);
  box-shadow: inset 0 0 0 2px var(--navy), inset 0 0 0 3.5px var(--white), 0 6px 12px -8px rgb(16 40 74 / .8);
}
@media (max-width: 1023px) {
  .world .nav.is-open .nav__links { padding-top: var(--s-5); gap: 12px; }
  .world .nav.is-open .nav__item { border-bottom: 0; }
  .world .nav.is-open .nav__link { height: 60px; padding: 0 20px; font-size: 18px; background: var(--navy); color: var(--white); border-radius: 10px; transform: none; }
  .world .nav.is-open .nav__link[aria-current="page"] { background: var(--green); }
  html.is-hero-cta .world .nav.is-open .nav__actions, html.is-hero-cta .nav.is-open .nav__actions { opacity: 1; visibility: visible; }
}
/* téléphone : la barre garde le logo et le menu ; la plaque d'action vit dans la feuille du menu et dans la page */
@media (max-width: 639px) {
  .world .nav:not(.is-open) .nav__actions { display: none; }
  .world .nav:not(.is-open) .nav__actions + .nav__toggle { margin-left: auto; }
}

/* ---------- premier écran : la plaque de rue et l'immeuble */
main > section.hero--plaque > .wrap.hp { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); row-gap: var(--s-5); height: 100%; }
.hp__text { display: grid; gap: var(--s-4); align-content: start; }
.hp__side { display: grid; gap: var(--s-4); align-content: end; }
.hp__lead { margin: 0; max-width: 40ch; font-size: 18px; line-height: 1.55; color: var(--ink-soft); }
.hp__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.hp__link { font-weight: 500; color: var(--navy); }
.plaque--street .plaque__in { padding: 23px 33px 25px; }

/* la plaque du devis : suspendue sous la plaque de rue par deux attaches, elle se balance en arrivant (world.js) */
.hp__signs { display: grid; justify-items: start; }
.hang { position: relative; display: block; max-width: 100%; margin-left: clamp(10px, 3vw, 44px); padding-top: 18px; color: var(--navy); text-decoration: none; transform-origin: 50% 0; }
.hang__ties { position: absolute; left: 0; right: 0; top: 0; height: 22px; pointer-events: none; }
.hang__ties::before, .hang__ties::after { content: ""; position: absolute; top: -6px; width: 2px; height: 28px; border-radius: 1px; background: #7d8a99; }
.hang__ties::before { left: 26px; }
.hang__ties::after { right: 26px; }
.hang__plaque { display: block; transform-origin: 50% 0; transition: transform .45s var(--ease-out), box-shadow .3s var(--ease-out); }
.hang .plaque__in {
  display: flex; align-items: center; gap: 12px; padding: 14px 26px 15px; font-family: var(--plaque-face); font-stretch: 62%; font-weight: 800;
  font-size: clamp(20px, 1vw + 15px, 28px); line-height: 1.05; letter-spacing: .04em; word-spacing: .2em; text-transform: uppercase; text-wrap: balance;
}
.hang__text { display: grid; gap: 7px; }
/* dès 640px, l'appel et la promesse tiennent chacun sur une ligne, quel que soit le navigateur */
@media (min-width: 640px) { .hang__text, .hang__text small { white-space: nowrap; } }
/* la promesse sous l'appel : même encre blanche, lettrage étroit plus petit et plus espacé */
.hang__text small { font-size: clamp(12px, .3vw + 10px, 15px); font-stretch: 75%; font-weight: 700; letter-spacing: .12em; word-spacing: .15em; line-height: 1.2; }
.hang svg { width: .8em; height: .8em; flex: none; transition: transform .3s var(--ease-out); }
.hang:hover .hang__plaque { transform: rotate(-1.5deg); box-shadow: var(--enamel-shadow), 0 22px 34px -22px rgb(16 40 74 / .8); }
.hang:hover svg { transform: translateX(4px); }
.hang:focus-visible { outline: none; }
.hang:focus-visible .hang__plaque { outline: 3px solid var(--green); outline-offset: 4px; }
@media (min-width: 1024px) {
  main > section.hero--plaque > .wrap.hp { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter, 24px); row-gap: var(--s-6); }
  .hp__text { grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter, 24px); align-items: end; }
  .hp__text > .hp__signs { grid-column: 1 / span 7; justify-self: start; }
  .hp__side { grid-column: 9 / -1; }
  .hp__building { grid-column: 1 / -1; }
}
.hp__building { position: relative; min-height: 240px; overflow: hidden; isolation: isolate; }

/* la coupe */
.scene__view, .scene__view > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene__svg .f { stroke: var(--navy); stroke-opacity: .2; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.scene__svg .z { transition: opacity .45s var(--ease-out); }
.scene__svg[data-focus] .z { opacity: .18; }
.scene__svg[data-focus] .z.is-on { opacity: 1; }

/* plaques numérotées des pièces : 44 x 34, cible de 44 px */
.scene__spots { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.scene__spot {
  position: absolute; left: var(--x); top: var(--y); width: 48px; height: 44px; margin: -22px 0 0 -24px; display: grid; place-items: center;
  pointer-events: auto; color: var(--navy); text-decoration: none; transition: opacity .25s ease, visibility 0s linear .25s;
}
.scene__spot.is-out, .scene.is-moving .scene__spot, .scene.is-open .scene__spot:not(.is-active) { opacity: 0; visibility: hidden; pointer-events: none; }
.scene__spot { visibility: visible; }
.spot-plaque {
  color: var(--white); display: grid; place-items: center; min-width: 42px; height: 30px; padding: 0 6px; border-radius: 7px; background: var(--navy);
  box-shadow: inset 0 0 0 2px var(--navy), inset 0 0 0 4px var(--white), 0 8px 14px -8px rgb(16 40 74 / .9), 0 2px 3px rgb(16 40 74 / .25);
  font-family: var(--plaque-face); font-stretch: 75%; font-weight: 800; font-size: 14px; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  transform-origin: 50% 0; transition: transform .3s var(--ease-out), background-color .2s ease;
}
.scene__spot:hover .spot-plaque, .scene__spot:focus-visible .spot-plaque { transform: translateY(-2px) rotate(-3deg); }
.scene__spot.is-active .spot-plaque { background: var(--green); box-shadow: inset 0 0 0 2px var(--green), inset 0 0 0 4px var(--white), 0 8px 14px -8px rgb(16 40 74 / .9); }
.scene__tip {
  position: absolute; left: calc(100% - 4px); top: 50%; transform: translate(-6px, -50%); white-space: nowrap; padding: 7px 12px; border-radius: 7px;
  background: var(--white); color: var(--navy); box-shadow: inset 0 0 0 2px var(--white), inset 0 0 0 3.5px var(--navy), 0 10px 18px -10px rgb(16 40 74 / .6);
  font-family: var(--plaque-face); font-stretch: 75%; font-weight: 700; font-size: 14px; letter-spacing: .05em; text-transform: uppercase;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .3s var(--ease-out), visibility 0s linear .2s;
}
.scene__spot:hover .scene__tip, .scene__spot:focus-visible .scene__tip { opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: 0s; }
.scene.is-open .scene__tip { opacity: 0; visibility: hidden; }

/* sur téléphone, les treize plaques en rangée sous la coupe : chaque pièce reste atteignable */
.scene-strip { display: none; }
@media (max-width: 1023px) {
  /* sept colonnes de 44 px au plus : sur un écran de 320 px, elles se serrent au lieu de faire défiler la page */
  .scene-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 44px)); justify-content: space-between; row-gap: 6px; margin-top: var(--s-4); }
  .scene-strip button { width: 100%; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
  .scene-strip .spot-plaque { min-width: 0; width: min(42px, 100%); padding: 0; }
  .scene-strip button[aria-pressed="true"] .spot-plaque { background: var(--green); box-shadow: inset 0 0 0 2px var(--green), inset 0 0 0 4px var(--white), 0 8px 14px -8px rgb(16 40 74 / .9); }
}

/* la grande plaque de la pièce ouverte */
.scene__panel {
  position: absolute; z-index: 3; left: 8px; right: 8px; bottom: 8px; max-height: 76%; overflow: auto; padding: 7px; border-radius: 14px;
  background: var(--navy); color: var(--white); box-shadow: var(--enamel-shadow);
}
@media (min-width: 640px) { .scene__panel { left: auto; top: var(--s-4); bottom: auto; right: var(--s-4); width: min(410px, 40%); max-height: calc(100% - 2 * var(--s-4)); } }
.scene__panel::before { content: ""; position: absolute; inset: 6px; border: 2px solid var(--white); border-radius: 10px; box-shadow: inset 0 0 0 3px var(--navy), inset 0 0 0 4px var(--white); pointer-events: none; }
.sp-in { position: relative; padding: calc(var(--s-5) + 3px); display: grid; gap: var(--s-4); }
.sp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.sp-n { display: inline-grid; place-items: center; min-width: 46px; height: 32px; margin-bottom: var(--s-3); border-radius: 6px; background: var(--white); color: var(--navy);
  font-family: var(--plaque-face); font-stretch: 75%; font-weight: 800; font-size: 15px; letter-spacing: .05em; }
.sp-title { margin: 0; font-family: var(--plaque-face); font-stretch: 62%; font-weight: 800; font-size: 34px; line-height: 1; text-transform: uppercase; letter-spacing: .03em; word-spacing: .22em; outline: none; }
.sp-line { margin: 0; font-size: 16px; line-height: 1.55; color: var(--on-navy-soft); }
.sp-fams { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* ce que la pièce contient : des lignes à lire, pas des liens ; le seul geste du panneau est la plaque d'action */
.sp-fams li { display: flex; align-items: center; min-height: 40px; border-bottom: 1px solid rgb(255 255 255 / .18); color: var(--white); font-size: 16px; }
.sp-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-2); }
.sp-nav { display: flex; gap: var(--s-2); }
.sp-icon { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: var(--white); background: transparent;
  border: 2px solid rgb(255 255 255 / .55); transition: background-color .2s ease, transform .15s ease, border-color .2s ease; }
.sp-icon:hover { background: var(--navy-2); border-color: var(--white); }
.sp-icon:active { transform: scale(.94); }
.sp-icon svg { width: 16px; height: 16px; }
.sp-foot .plaque-btn { box-shadow: none; }

/* ---------- les sections suivent leur contenu ; seul le premier écran tient l'écran entier */
.world main > section.section { height: auto; min-height: 0; padding: clamp(80px, 7vw, 104px) 0; }
.world main > section.section > .wrap { height: auto; }
.world footer.closing.adresse { height: auto; min-height: 0; padding: clamp(88px, 8vw, 120px) 0 calc(var(--s-6) + var(--bar)); }
main > section.hero--plaque { padding-bottom: 0; }
@media (max-width: 1023px) { main > section.hero--plaque { height: auto; min-height: 100svh; padding-bottom: var(--s-6); } .hp__building { min-height: 340px; } }

/* ---------- le tableau des familles */
.fam__h { margin: 0 0 var(--s-6); font-weight: 500; font-size: clamp(32px, 1.6vw + 24px, 48px); line-height: 1.05; letter-spacing: -.02em; }
.plaque--board { display: block; }
.plaque--board .plaque__in { padding: var(--s-5) var(--s-6); }
.board { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--s-6); }
@media (min-width: 640px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(7, auto); } }
/* très petit écran (280 px, écran extérieur d'un téléphone pliant) : le tableau rentre ses marges pour garder les noms sur une ligne */
@media (max-width: 359px) { .plaque--board .plaque__in { padding: var(--s-5) var(--s-4); } }
.board__row { display: flex; align-items: baseline; gap: 12px; min-height: 60px; padding: 16px 0; color: var(--white); text-decoration: none; }
.board__n { font-family: var(--plaque-face); font-stretch: 75%; font-weight: 700; font-size: 15px; color: var(--on-navy-soft); font-variant-numeric: tabular-nums; min-width: 22px; }
.board__name { font-family: var(--plaque-face); font-stretch: 62%; font-weight: 800; font-size: clamp(20px, .4vw + 16px, 23px); line-height: 1.05; text-transform: uppercase; letter-spacing: .03em; word-spacing: .22em; white-space: nowrap; }
.board__dots { flex: 1; align-self: center; height: 1px; margin-top: 6px; background-image: radial-gradient(circle, rgb(255 255 255 / .45) 1px, transparent 1.4px); background-size: 7px 2px; background-repeat: repeat-x; }
.board__arrow { width: 16px; height: 16px; align-self: center; opacity: .55; transition: transform .3s var(--ease-out), opacity .2s ease; }
.board__row:hover .board__arrow, li.is-on .board__arrow { transform: translateX(4px); opacity: 1; }
.board__row:hover .board__name, li.is-on .board__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
.arch { position: relative; margin: 0; overflow: hidden; border-radius: 9999px 9999px 16px 16px; background: var(--stone); outline: 1px solid var(--hair); outline-offset: 10px; }
.fam__arch { aspect-ratio: 3 / 4; align-self: end; max-height: 640px; }
.arch > img, .arch__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) { .fam__arch { display: none; } }

/* ---------- ce que nous équipons : huit lieux de l'établissement, chacun dans son arche, son nom sur une plaque */
.maisons__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-7); max-width: 40rem; }
.maisons__head h2 { margin: 0; font-weight: 500; font-size: clamp(32px, 1.6vw + 24px, 48px); line-height: 1.05; letter-spacing: -.02em; }
.maisons__head p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink-soft); }
.types { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
@media (min-width: 1024px) { .types { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-8) var(--gutter, 24px); } }
.maison { display: grid; justify-items: center; text-decoration: none; color: var(--navy); }
.maison .arch { width: 100%; aspect-ratio: 4 / 5; outline-offset: 6px; }
.maison .arch > img { transition: transform .8s var(--ease-out); }
.maison:hover .arch > img { transform: scale(1.03); }
.plaque--name { margin-top: -26px; max-width: calc(100% - 8px); transition: transform .3s var(--ease-out); }
.plaque--name .plaque__in { padding: 14px 24px; font-family: var(--plaque-face); font-stretch: 70%; font-weight: 800; font-size: 20px; letter-spacing: .05em; word-spacing: .2em; text-transform: uppercase; text-align: center; text-wrap: balance; }
.maison:hover .plaque--name { transform: translateY(-2px); }
@media (max-width: 639px) {
  .plaque--name { margin-top: -20px; }
  .plaque--name .plaque__in { padding: 10px 14px; font-size: 15px; }
}

/* ---------- l'adresse, sur le bleu nuit */
.adresse { background: var(--navy); color: var(--white); }
.adresse > .wrap { display: grid; grid-template-rows: 1fr auto; gap: var(--s-7); }
.adresse__top { display: grid; gap: var(--s-6); align-content: center; }
.adresse__text h2 { margin: 0 0 var(--s-4); max-width: 16ch; font-weight: 500; font-size: clamp(34px, 2.2vw + 22px, 60px); line-height: 1.05; letter-spacing: -.02em; color: var(--white); text-wrap: balance; }
.adresse__text p { margin: 0 0 var(--s-5); max-width: 46ch; font-size: 18px; line-height: 1.55; color: var(--on-navy-soft); }
.adresse .link { color: var(--white); font-weight: 500; }
.adresse__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid rgb(255 255 255 / .2); color: var(--on-navy-soft); font-size: 14px; }
.adresse__foot img { height: 44px; width: auto; }
.adresse__foot nav { display: flex; flex-wrap: wrap; column-gap: var(--s-5); }
.adresse__foot a { color: var(--white); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.adresse__foot a:hover { text-decoration: underline; }
@media (min-width: 1024px) {
  .adresse__top { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter, 24px); align-items: center; }
  .adresse__text { grid-column: 1 / span 9; }
}

/* ---------- icônes dessinées à la place des caractères du kit (flèche des liens, alerte des champs) */
.world .link::after {
  content: ""; display: inline-block; width: .85em; height: .85em; margin-left: .35em; vertical-align: -.08em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.world .field__error::before {
  content: ""; width: 16px; height: 16px; border-radius: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M8 4.6v4.2' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.3' r='1' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M8 4.6v4.2' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.3' r='1' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* boutons secondaires du kit : une plaque blanche à filet bleu nuit, jamais une pilule */
.world .btn--secondary {
  border-radius: 10px; background: var(--white); color: var(--navy); border: 0; font-stretch: 75%; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  box-shadow: inset 0 0 0 2px var(--navy), 0 10px 20px -16px rgb(16 40 74 / .7);
}
.world .btn--secondary:hover { background: var(--stone); }

@media (prefers-reduced-motion: reduce) {
  .plaque-btn, .spot-plaque, .scene__tip, .scene__svg .z, .board__arrow, .maison .arch > img, .plaque--name, .hang__plaque, .hang svg { transition: none; }
  .hang:hover .hang__plaque { transform: none; }
}