/* INDUTA — vitrine. Papier clair, encre noire, filets bleu nuit : le style de la bannière. */
:root {
  --papier: #e9e7e1;
  --papier-clair: #f3f1ec;
  --encre: #11131a;
  --encre-douce: #4a4d57;
  --nuit: #2c3a5e;
  --filet: rgba(17, 19, 26, .16);
  --rayon: 999px;
  --police: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--papier);
  /* Grain de papier, comme la bannière. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  color: var(--encre);
  font-family: var(--police);
  line-height: 1.45;
  overflow-x: hidden;
}

/* Décor : globes en fil de fer, filets et croix de repère. */
.decor { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.globe { position: absolute; width: min(62vw, 560px); opacity: .9; }
.globe-gauche { left: max(-30vw, -270px); bottom: -8vh; transform: rotate(-18deg); }
.globe-droite { right: max(-32vw, -300px); top: -10vh; transform: rotate(160deg) scale(.9); }
.trait { position: absolute; height: 2px; background: linear-gradient(90deg, transparent, var(--nuit) 18%, var(--nuit) 70%, transparent); opacity: .55; }
.trait-1 { top: 18vh; left: 0; width: 34vw; }
.trait-2 { bottom: 16vh; right: 0; width: 38vw; }
.trait-3 { top: 6vh; right: 6vw; width: 24vw; height: 1px; opacity: .4; }
.croix { position: absolute; width: 28px; height: 28px; }
.croix::before, .croix::after { content: ""; position: absolute; background: var(--encre-douce); opacity: .55; }
.croix::before { left: 50%; top: 0; width: 1px; height: 100%; }
.croix::after { top: 50%; left: 0; height: 1px; width: 100%; }
.croix-1 { top: 22px; left: 22px; }
.croix-2 { bottom: 22px; right: 22px; }

.barre, main, .pied { position: relative; z-index: 1; }

.barre {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 560px; margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 20px 0;
}
.marque { font-weight: 800; font-style: italic; letter-spacing: .32em; font-size: 12px; }
.langues { display: flex; border: 1.5px solid var(--encre); border-radius: var(--rayon); overflow: hidden; }
.langues button {
  font: 700 11px/1 var(--police); letter-spacing: .14em;
  padding: 7px 11px; border: 0; background: transparent; color: var(--encre); cursor: pointer;
}
.langues button[aria-pressed="true"] { background: var(--encre); color: var(--papier-clair); }
.langues button:focus-visible { outline: 2px solid var(--nuit); outline-offset: -4px; }

main { max-width: 560px; margin: 0 auto; padding: 8px 20px 24px; }

.entete { text-align: center; padding: 28px 0 10px; }
.entete h1 { margin: 0; }
.logo { display: block; width: min(100%, 440px); height: auto; margin: 0 auto; }
.devise {
  margin: 18px 0 0;
  font-size: 11px; font-weight: 600; letter-spacing: .38em; text-transform: uppercase;
}
.devise i, .pied i { font-style: normal; margin: 0 .5em; }

/* « In progress » : jauge rayée façon écran de chargement des années 2000. */
.progression {
  margin: 30px 0 8px; padding: 16px 18px 14px;
  border: 1.5px solid var(--encre); border-radius: 18px;
  background: rgba(243, 241, 236, .7);
}
.progression-tete { display: flex; align-items: center; gap: 10px; }
.progression h2 { margin: 0; font-size: 13px; font-weight: 800; font-style: italic; letter-spacing: .26em; text-transform: uppercase; }
.pourcentage { margin-left: auto; font: 700 12px/1 ui-monospace, Menlo, Consolas, monospace; }
.point { width: 8px; height: 8px; border-radius: 50%; background: var(--nuit); animation: pulse 1.6s ease-in-out infinite; }
.jauge { margin: 12px 0 10px; height: 12px; border: 1.5px solid var(--encre); border-radius: var(--rayon); padding: 2px; }
.jauge span {
  display: block; height: 100%; width: 72%; border-radius: var(--rayon);
  background: repeating-linear-gradient(-45deg, var(--encre) 0 6px, var(--nuit) 6px 12px);
  background-size: 34px 100%;
  animation: defile 1.2s linear infinite;
}
.progression p { margin: 0; font-size: 14px; color: var(--encre-douce); }

.titre {
  display: flex; align-items: center; gap: 12px;
  margin: 34px 0 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase;
}
.titre::after { content: ""; flex: 1; height: 1px; background: var(--filet); }

.liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lien {
  display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto;
  column-gap: 14px; align-items: center;
  padding: 10px 18px 10px 10px;
  border: 1.5px solid var(--encre); border-radius: var(--rayon);
  background: var(--papier-clair); color: var(--encre); text-decoration: none;
  transition: background-color .18s, color .18s, transform .18s;
}
.puce {
  grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid currentColor;
  font-weight: 800; font-style: italic; font-size: 13px; letter-spacing: .02em;
}
.puce svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.puce svg .plein { fill: currentColor; stroke: none; }
.nom { font-weight: 800; font-style: italic; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; align-self: end; }
.detail { grid-column: 2; font-size: 13px; color: var(--encre-douce); align-self: start; }
.fleche { grid-column: 3; grid-row: 1 / 3; font-size: 18px; }
a.lien[href]:hover, a.lien[href]:focus-visible { background: var(--encre); color: var(--papier-clair); transform: translateY(-1px); outline: none; }
a.lien[href]:hover .detail, a.lien[href]:focus-visible .detail { color: #c9cbd3; }
a.lien[href]:active { transform: translateY(0); }
.lien-plein { background: var(--encre); color: var(--papier-clair); }
.lien-plein .detail { color: #c9cbd3; }
a.lien-plein:hover, a.lien-plein:focus-visible { background: var(--nuit) !important; }
.a-venir { border-style: dashed; background: rgba(233, 231, 225, .82); cursor: default; }
.a-venir .nom, .a-venir .puce { opacity: .55; }
.a-venir .fleche { font-size: 13px; opacity: .5; }

.pied { text-align: center; padding: 26px 20px max(30px, env(safe-area-inset-bottom)); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--encre-douce); }
.pied p { margin: 0; }

/* Derniers arrivages : grille de photos, deux colonnes sur téléphone. */
.grille-arrivages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.arrivage { display: flex; flex-direction: column; gap: 4px; color: var(--encre); text-decoration: none; }
.arrivage img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block;
  border: 1.5px solid var(--encre); border-radius: 16px; background: var(--papier-clair);
}
.arrivage-titre { font-weight: 700; font-size: 13px; line-height: 1.25; }
.arrivage-prix { font: 700 12px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--encre-douce); }
a.arrivage:hover img, a.arrivage:focus-visible img { transform: translateY(-2px); box-shadow: 0 6px 0 var(--encre); }
a.arrivage img { transition: transform .18s, box-shadow .18s; }
a.arrivage:focus-visible { outline: none; }
@media (min-width: 560px) { .grille-arrivages { grid-template-columns: repeat(3, 1fr); } }

/* « Tu cherches une pièce ? » */
.demande {
  display: grid; gap: 12px; padding: 16px 18px 18px;
  border: 1.5px solid var(--encre); border-radius: 18px; background: rgba(243, 241, 236, .82);
}
.demande-intro { margin: 0; font-size: 14px; color: var(--encre-douce); }
.demande label { display: grid; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.demande input {
  font: 500 16px/1.2 var(--police); color: var(--encre); letter-spacing: 0; text-transform: none;
  padding: 11px 14px; border: 1.5px solid var(--encre); border-radius: 12px; background: #fbfaf7; width: 100%;
}
.demande input:focus { outline: 2px solid var(--nuit); outline-offset: 1px; }
.demande-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bouton-demande {
  font: 800 italic 15px/1 var(--police); letter-spacing: .06em; text-transform: uppercase;
  padding: 15px 18px; border: 0; border-radius: var(--rayon); background: var(--encre); color: var(--papier-clair); cursor: pointer;
}
.bouton-demande:hover, .bouton-demande:focus-visible { background: var(--nuit); outline: none; }

/* Pourquoi INDUTA */
.atouts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.atouts li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.atout-etoile { font-size: 18px; line-height: 1.2; }
.atouts strong { font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 14px; }
.atouts p { margin: 3px 0 0; font-size: 14px; color: var(--encre-douce); }

/* Carte « Partager INDUTA » en bas de l'accueil. */
.partage { margin-top: 34px; }
.carte-partage {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: center;
  padding: 14px 18px 14px 14px; border: 1.5px dashed var(--encre); border-radius: 20px;
  color: var(--encre); text-decoration: none; background: rgba(243, 241, 236, .82);
}
.carte-partage img { width: 84px; height: 84px; border-radius: 10px; background: #fff; }
.carte-partage h2 { margin: 0; font-size: 15px; font-style: italic; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.carte-partage p { margin: 4px 0 0; font-size: 13px; color: var(--encre-douce); }
.carte-partage:hover, .carte-partage:focus-visible { border-style: solid; outline: none; }

/* Page Partager */
.page-partage { text-align: center; }
.page-partage .logo { width: min(70%, 260px); }
.qr-grand { display: block; width: min(78vw, 300px); height: auto; margin: 26px auto 12px; padding: 14px; background: #fff; border: 1.5px solid var(--encre); border-radius: 22px; }
.adresse-site { font: 800 italic 22px/1 var(--police); letter-spacing: .08em; margin: 6px 0 4px; }
.page-partage .sous-titre { margin: 0 0 22px; font-size: 14px; color: var(--encre-douce); }
.telechargements { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.telechargements .lien { grid-template-columns: 44px 1fr auto; }
.retour { display: inline-block; margin-top: 26px; color: var(--encre); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
button.lien { width: 100%; font: inherit; cursor: pointer; text-align: left; }

@keyframes pulse { 50% { opacity: .25; } }
@keyframes defile { to { background-position: 34px 0; } }
@media (prefers-reduced-motion: reduce) { .point, .jauge span { animation: none; } }
@media (max-width: 420px) {
  .devise { letter-spacing: .24em; font-size: 10px; }
  .pied { letter-spacing: .14em; font-size: 10px; }
}
@media (min-width: 900px) { .entete { padding-top: 48px; } }
a.marque { color: var(--encre); text-decoration: none; }

/* ---------------------------------------------------------------- Menu */
.barre-droite { display: flex; align-items: center; gap: 10px; }
.burger {
  display: flex; align-items: center; gap: 9px;
  height: 31px; padding: 0 13px 0 11px;
  border: 1.5px solid var(--encre); border-radius: var(--rayon);
  background: var(--encre); color: var(--papier-clair); cursor: pointer;
  font: 800 italic 11px/1 var(--police); letter-spacing: .18em; text-transform: uppercase;
}
.burger-traits { display: grid; gap: 3px; width: 16px; }
.burger-traits i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.burger-traits i:nth-child(2) { width: 62%; margin-left: auto; }
.burger:hover, .burger:focus-visible { background: var(--nuit); border-color: var(--nuit); outline: none; }
.burger:focus-visible { box-shadow: 0 0 0 3px rgba(44, 58, 94, .35); }

/* Une fenêtre façon logiciel de l'an 2000 : barre de titre rayée, croix de fermeture, liste numérotée. */
.menu {
  position: fixed; inset: 0; z-index: 10;
  display: grid; align-items: start; justify-items: center;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  background: rgba(17, 19, 26, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  overflow-y: auto;
  animation: menu-fond .18s ease-out;
}
.menu[hidden] { display: none; }
.menu-fenetre {
  width: 100%; max-width: 532px;
  border: 1.5px solid var(--encre); border-radius: 22px; overflow: hidden;
  background-color: var(--papier);
  background-image: radial-gradient(circle at 105% -10%, rgba(44, 58, 94, .2), transparent 46%);
  box-shadow: 7px 7px 0 var(--encre);
  animation: menu-entree .22s cubic-bezier(.2, .9, .3, 1.15);
}
.menu-tete {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 18px;
  background: var(--encre); color: var(--papier-clair);
}
.menu-nom { font: 800 italic 12px/1 var(--police); letter-spacing: .3em; white-space: nowrap; }
.menu-nom i, .menu-devise i { font-style: normal; margin: 0 .5em; }
.menu-rayures {
  flex: 1; height: 12px; border-radius: var(--rayon); opacity: .8;
  background: repeating-linear-gradient(-45deg, var(--papier-clair) 0 2px, transparent 2px 7px);
}
.menu-fermer {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--papier-clair); background: transparent; color: var(--papier-clair);
  font-size: 14px; line-height: 1; cursor: pointer;
}
.menu-fermer:hover, .menu-fermer:focus-visible { background: var(--papier-clair); color: var(--encre); outline: none; }
.menu-liens { list-style: none; margin: 0; padding: 6px 0; }
.menu-liens li + li { border-top: 1px solid var(--filet); }
.menu-liens a {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: baseline; gap: 10px;
  padding: 17px 20px; color: var(--encre); text-decoration: none;
  transition: background-color .15s, color .15s, padding-left .15s;
}
.menu-num { font: 700 11px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--nuit); }
.menu-mot { font: 800 italic clamp(19px, 5.6vw, 25px)/1.1 var(--police); letter-spacing: .03em; text-transform: uppercase; }
.menu-fleche { font-size: 18px; opacity: .35; transition: opacity .15s, transform .15s; }
.menu-liens a:hover, .menu-liens a:focus-visible { background: var(--encre); color: var(--papier-clair); padding-left: 28px; outline: none; }
.menu-liens a:hover .menu-num, .menu-liens a:focus-visible .menu-num { color: #c9cbd3; }
.menu-liens a:hover .menu-fleche, .menu-liens a:focus-visible .menu-fleche { opacity: 1; transform: translateX(3px); }
.menu-liens a[aria-current="page"] .menu-mot { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.menu-liens a[aria-current="page"] .menu-fleche { opacity: 1; }
.menu-pied {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 14px 18px 18px; border-top: 1.5px solid var(--encre);
}
.menu-pied a {
  padding: 8px 14px; border: 1.5px solid var(--encre); border-radius: var(--rayon);
  color: var(--encre); text-decoration: none;
  font: 700 11px/1 var(--police); letter-spacing: .14em; text-transform: uppercase;
}
.menu-pied a:hover, .menu-pied a:focus-visible { background: var(--encre); color: var(--papier-clair); outline: none; }
.menu-devise { margin-left: auto; font-size: 9px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--encre-douce); }
.menu-ouvert { overflow: hidden; }
@keyframes menu-fond { from { opacity: 0; } }
@keyframes menu-entree { from { opacity: 0; transform: translateY(-14px) scale(.97); } }

/* --------------------------------------------------- Pages intérieures */
.page-tete { padding: 34px 0 4px; }
.page-index { margin: 0 0 12px; font: 700 11px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--nuit); }
.page-index i { font-style: normal; margin: 0 .5em; }
.grand-titre {
  margin: 0; font: 800 italic clamp(34px, 11vw, 54px)/.98 var(--police);
  letter-spacing: -.01em; text-transform: uppercase; overflow-wrap: anywhere;
}
.chapeau { margin: 16px 0 0; font-size: 17px; line-height: 1.5; color: var(--encre); }
.texte { margin: 0 0 14px; font-size: 15px; color: var(--encre-douce); }
.vide {
  margin: 20px 0 0; padding: 26px 20px; text-align: center; font-size: 15px; color: var(--encre-douce);
  border: 1.5px dashed var(--encre); border-radius: 20px; background: rgba(243, 241, 236, .7);
}

.suite {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  padding: 10px 16px; border: 1.5px solid var(--encre); border-radius: var(--rayon);
  color: var(--encre); text-decoration: none; background: var(--papier-clair);
  font: 800 italic 12px/1 var(--police); letter-spacing: .1em; text-transform: uppercase;
}
.suite:hover, .suite:focus-visible { background: var(--encre); color: var(--papier-clair); outline: none; }

.carte-lien {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 18px 14px 14px; border: 1.5px solid var(--encre); border-radius: 20px;
  color: var(--encre); text-decoration: none; background: rgba(243, 241, 236, .82);
  transition: transform .18s, box-shadow .18s;
}
.carte-signe {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--encre); color: var(--papier-clair); font: 800 italic 24px/1 var(--police);
}
.carte-lien strong { font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 15px; }
.carte-lien p { margin: 4px 0 0; font-size: 13px; color: var(--encre-douce); }
.carte-lien:hover, .carte-lien:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 0 var(--encre); outline: none; }

.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.etapes li {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start;
  padding: 16px 18px 16px 14px; border: 1.5px solid var(--encre); border-radius: 18px;
  background: rgba(243, 241, 236, .82);
}
.etape-num {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--encre); font: 700 12px/1 ui-monospace, Menlo, Consolas, monospace;
}
.etapes strong { font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 15px; }
.etapes p { margin: 5px 0 0; font-size: 14px; color: var(--encre-douce); }
.etapes-longues li:nth-child(odd) .etape-num { background: var(--encre); color: var(--papier-clair); }
.etapes-longues p { font-size: 15px; line-height: 1.55; }

.etiquettes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.etiquettes li {
  padding: 8px 14px; border: 1.5px solid var(--encre); border-radius: var(--rayon); background: var(--papier-clair);
  font: 700 12px/1 var(--police); letter-spacing: .08em; text-transform: uppercase;
}
.etiquettes li:nth-child(3n+1) { background: var(--encre); color: var(--papier-clair); }

.encart {
  padding: 20px 18px 18px; border: 1.5px solid var(--encre); border-radius: 20px;
  background: var(--encre); color: var(--papier-clair);
}
.encart p { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: #dcdde3; }
.encart .encart-etoiles { font-size: 16px; letter-spacing: .3em; color: var(--papier-clair); margin-bottom: 10px; }
.encart-liens { display: flex; flex-wrap: wrap; gap: 8px; }
.encart-liens a {
  padding: 9px 14px; border: 1.5px solid var(--papier-clair); border-radius: var(--rayon);
  color: var(--papier-clair); text-decoration: none;
  font: 800 italic 12px/1 var(--police); letter-spacing: .1em; text-transform: uppercase;
}
.encart-liens a:hover, .encart-liens a:focus-visible { background: var(--papier-clair); color: var(--encre); outline: none; }

.questions { display: grid; gap: 8px; }
.questions details { border: 1.5px solid var(--encre); border-radius: 18px; background: rgba(243, 241, 236, .82); }
.questions summary {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 15px;
}
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; margin-left: auto; font: 700 18px/1 ui-monospace, Menlo, Consolas, monospace; }
.questions details[open] summary::after { content: "–"; }
.questions summary:focus-visible { outline: 2px solid var(--nuit); outline-offset: -4px; border-radius: 16px; }
.questions p { margin: 0; padding: 0 18px 16px; font-size: 14px; line-height: 1.55; color: var(--encre-douce); }

.demande-note { margin: 0; font-size: 12px; color: var(--encre-douce); }

.pied-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-bottom: 16px; }
.pied-liens a { color: var(--encre); text-decoration: none; letter-spacing: .12em; border-bottom: 1px solid var(--filet); padding-bottom: 2px; }
.pied-liens a:hover, .pied-liens a:focus-visible { border-bottom-color: var(--encre); outline: none; }

section[id] { scroll-margin-top: 16px; }
@media (max-width: 380px) { .burger-mot { display: none; } .burger { padding: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .menu, .menu-fenetre { animation: none; } .menu-liens a, .carte-lien { transition: none; } }

/* -------------------------------------------------- Page d'une pièce */
.arrivage-photo { position: relative; display: block; }
.arrivage-nombre {
  position: absolute; right: 8px; bottom: 8px; padding: 4px 8px; border-radius: var(--rayon);
  background: var(--encre); color: var(--papier-clair); font: 700 10px/1 ui-monospace, Menlo, Consolas, monospace;
}
.retour-haut { margin: 18px 0 12px; text-decoration: none; font-weight: 700; }
.galerie-piste {
  list-style: none; margin: 0 -20px; padding: 0 20px; display: flex; gap: 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.galerie-piste::-webkit-scrollbar { display: none; }
.galerie-piste li { flex: 0 0 100%; scroll-snap-align: center; }
.galerie-piste li:not(:only-child) { flex-basis: 88%; }
.vue { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 20px; }
.vue img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border: 1.5px solid var(--encre); border-radius: 20px; background: var(--papier-clair);
}
.vue:focus-visible { outline: 2px solid var(--nuit); outline-offset: 3px; }
.galerie-points { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.galerie-points i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--encre); }
.galerie-points i.actif { background: var(--encre); width: 20px; border-radius: var(--rayon); }
.galerie-aide { margin: 10px 0 0; text-align: center; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-douce); }
.piece-infos { margin-top: 22px; }
.piece-titre { margin: 0; font: 800 italic clamp(24px, 7.4vw, 34px)/1.05 var(--police); text-transform: uppercase; overflow-wrap: anywhere; }
.piece-prix { margin: 10px 0 0; font: 700 18px/1 ui-monospace, Menlo, Consolas, monospace; }
.piece-infos .liens { margin-top: 20px; }

/* Visionneuse : la photo entière sur fond d'encre. Le zoom et les déplacements passent par transform. */
.visionneuse {
  --voile: 1;
  position: fixed; inset: 0; z-index: 20; display: grid; grid-template-rows: auto 1fr auto;
  background: rgba(17, 19, 26, var(--voile)); color: var(--papier-clair);
  animation: voile-entree .28s ease-out;
}
.visionneuse[hidden] { display: none; }
.visionneuse.part { background: transparent; transition: background-color .2s; }
.visionneuse.part .visionneuse-barre, .visionneuse.part .visionneuse-pied { opacity: 0; transition: opacity .15s; }
.visionneuse-barre {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(10px, env(safe-area-inset-top)) 12px 8px 18px;
  animation: barre-entree .4s cubic-bezier(.2, .85, .25, 1.08) both;
}
.visionneuse-compte { font: 700 12px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .1em; }
.visionneuse-scene {
  overflow: hidden; display: grid; place-items: center; min-height: 0;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: zoom-in;
}
.visionneuse-scene.zoomee { cursor: grab; }
.visionneuse-scene img {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  transform-origin: center; will-change: transform; pointer-events: none; -webkit-user-drag: none;
}
.visionneuse-pied {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 12px max(12px, env(safe-area-inset-bottom));
  animation: pied-entree .4s cubic-bezier(.2, .85, .25, 1.08) both;
}
.visionneuse-bouton {
  min-width: 48px; height: 48px; padding: 0 16px; border-radius: var(--rayon);
  border: 1.5px solid var(--papier-clair); background: transparent; color: var(--papier-clair); cursor: pointer;
  font: 800 italic 13px/1 var(--police); letter-spacing: .1em; text-transform: uppercase;
  transition: transform .12s, background-color .15s, color .15s;
}
.visionneuse-bouton:hover, .visionneuse-bouton:focus-visible { background: var(--papier-clair); color: var(--encre); outline: none; }
.visionneuse-bouton:active { transform: scale(.92); }
.visionneuse-bouton[hidden] { display: none; }
.visionneuse-zoom { min-width: 118px; }
@keyframes voile-entree { from { background: rgba(17, 19, 26, 0); } }
@keyframes barre-entree { from { opacity: 0; transform: translateY(-16px); } }
@keyframes pied-entree { from { opacity: 0; transform: translateY(16px); } }

/* Bande de photos : celle du centre est nette et pleine, les voisines reculent. */
.galerie-piste.suivie li { transition: transform .4s cubic-bezier(.2, .85, .25, 1.08), opacity .3s; transform: scale(.93); opacity: .55; }
.galerie-piste.suivie li.actif, .galerie-piste.suivie li:only-child { transform: none; opacity: 1; }
.galerie-points i { transition: width .3s cubic-bezier(.2, .85, .25, 1.08), background-color .2s; }
.vue img { transition: transform .25s; }
.vue:active img { transform: scale(.98); }

/* Entrée au défilement. Sans script ou en mouvement réduit, tout est visible d'emblée. */
.anime .revele {
  transition: opacity .55s ease-out, transform .65s cubic-bezier(.2, .85, .25, 1.08), letter-spacing .7s cubic-bezier(.2, .85, .25, 1);
  will-change: opacity, transform;
}
.anime .revele:not(.visible) { opacity: 0; transform: translateY(28px) scale(.97); }
.anime .grille-arrivages > li.revele:not(.visible):nth-child(odd) { transform: translateY(30px) rotate(-2deg) scale(.95); }
.anime .grille-arrivages > li.revele:not(.visible):nth-child(even) { transform: translateY(30px) rotate(2deg) scale(.95); }
.anime .liens > li.revele:not(.visible):nth-child(odd), .anime .etapes > li.revele:not(.visible):nth-child(odd) { transform: translateX(-26px); }
.anime .liens > li.revele:not(.visible):nth-child(even), .anime .etapes > li.revele:not(.visible):nth-child(even) { transform: translateX(26px); }
.anime .etiquettes > li.revele:not(.visible) { transform: scale(.6) rotate(-6deg); }
.anime .titre.revele:not(.visible) { transform: none; letter-spacing: .6em; }
.anime .grand-titre.revele:not(.visible) { transform: translateY(40px) skewY(3deg); }
/* Le filet du titre se trace de gauche à droite. */
.anime .titre::after { transform-origin: left; transition: transform .8s cubic-bezier(.2, .85, .25, 1) .15s; }
.anime .titre.revele:not(.visible)::after { transform: scaleX(0); }
a.arrivage:active img { transform: scale(.97); }

/* Arrivée de la page : le logo se pose, la devise se resserre. */
.anime .entete .logo { animation: logo-entree .9s cubic-bezier(.2, .85, .25, 1.08) both; }
.anime .entete .devise { animation: devise-entree 1s cubic-bezier(.2, .85, .25, 1) .25s both; }
.anime .barre { animation: barre-entree .5s cubic-bezier(.2, .85, .25, 1.08) both; }
@keyframes logo-entree { from { opacity: 0; transform: translateY(26px) scale(.9) rotate(-2deg); filter: blur(8px); } }
@keyframes devise-entree { from { opacity: 0; letter-spacing: .9em; } }

/* Le décor suit le défilement : les globes tournent lentement, les filets glissent. */
:root { --defile: 0; --avance: 0; }
.anime .globe-gauche { transform: translateY(calc(var(--defile) * -.06px)) rotate(calc(-18deg + var(--defile) * .035deg)); }
.anime .globe-droite { transform: translateY(calc(var(--defile) * .09px)) rotate(calc(160deg - var(--defile) * .05deg)) scale(.9); }
.anime .trait-1 { transform: translateX(calc(var(--defile) * .12px)); }
.anime .trait-2 { transform: translateX(calc(var(--defile) * -.12px)); }
.anime .croix-1 { transform: rotate(calc(var(--defile) * .2deg)); }
.anime .croix-2 { transform: rotate(calc(var(--defile) * -.2deg)); }
.avance {
  position: fixed; left: 0; top: 0; z-index: 5; height: 4px; width: 100%;
  transform-origin: left; transform: scaleX(var(--avance));
  background: repeating-linear-gradient(-45deg, var(--encre) 0 6px, var(--nuit) 6px 12px);
}
.anime .jauge span { width: 0; transition: width 1.2s cubic-bezier(.2, .85, .25, 1); }
.anime .jauge.remplie span { width: 72%; }

/* Ruban façon bandeau d'écran : il avance avec la page. */
.ruban { margin: 26px -20px 0; overflow: hidden; border-block: 1.5px solid var(--encre); background: var(--encre); color: var(--papier-clair); transform: rotate(-1.2deg); }
.ruban-piste {
  display: flex; align-items: center; gap: 14px; width: max-content; padding: 9px 0;
  font: 800 italic 12px/1 var(--police); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
  transform: translateX(calc(-40px - var(--defile) * .35px));
}
.ruban-piste i { font-style: normal; }

/* Tampon « Vendu », catégories et filtres. */
.tampon {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-12deg);
  padding: 8px 16px; border: 2.5px solid var(--papier-clair); border-radius: 10px; outline: 1.5px solid var(--encre);
  background: var(--encre); color: var(--papier-clair);
  font: 800 italic 18px/1 var(--police); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
}
.arrivage.vendue img { filter: grayscale(1) contrast(.9); opacity: .6; }
.arrivage.vendue .arrivage-prix { text-decoration: line-through; }
.tampon-ligne { position: static; display: inline-block; transform: rotate(-4deg); font-size: 15px; }
.piece-vendue { margin: 14px 0 0; }
.arrivage-categorie, .piece-categorie {
  font: 700 10px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--nuit);
}
.arrivage-categorie { margin-top: 2px; }
.piece-categorie { margin: 0 0 10px; }
.filtres { display: flex; gap: 8px; margin: 0 -20px 16px; padding: 2px 20px; overflow-x: auto; scrollbar-width: none; }
.filtres::-webkit-scrollbar { display: none; }
.filtre {
  flex: none; padding: 10px 16px; border: 1.5px solid var(--encre); border-radius: var(--rayon);
  background: var(--papier-clair); color: var(--encre); cursor: pointer;
  font: 800 italic 12px/1 var(--police); letter-spacing: .1em; text-transform: uppercase;
  transition: background-color .18s, color .18s, transform .18s cubic-bezier(.2, .85, .25, 1.3);
}
.filtre[aria-pressed="true"] { background: var(--encre); color: var(--papier-clair); transform: scale(1.06); }
.filtre:active { transform: scale(.94); }
.filtre:focus-visible { outline: 2px solid var(--nuit); outline-offset: 2px; }
.grille-arrivages > li[hidden] { display: none; }
.vide-filtre[hidden] { display: none; }

.suite-pleine { background: var(--encre); color: var(--papier-clair); margin-top: 18px; }
.suite-pleine:hover, .suite-pleine:focus-visible { background: var(--nuit); border-color: var(--nuit); }
.carte-alerte { border-style: dashed; }
.carte-alerte .carte-signe { animation: signal 2.4s ease-in-out infinite; }
.menu-pied .menu-alerte { background: var(--encre); color: var(--papier-clair); }
@keyframes signal { 50% { transform: rotate(90deg) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .carte-alerte .carte-signe { animation: none; } .ruban-piste { transform: none; } }

/* D'une page à l'autre : fondu, et la photo touchée devient la grande photo de la pièce. */
@view-transition { navigation: auto; }
.galerie-piste li:first-child .vue img { view-transition-name: piece; }
::view-transition-group(piece) { animation-duration: .42s; animation-timing-function: cubic-bezier(.2, .85, .25, 1.06); }
::view-transition-old(root) { animation-duration: .18s; }
::view-transition-new(root) { animation-duration: .28s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .visionneuse, .visionneuse-barre, .visionneuse-pied { animation: none; }
  .galerie-piste.suivie li { transition: none; transform: none; opacity: 1; }
}
@media (min-width: 560px) { .galerie-piste { margin: 0; padding: 0; } }

/* ------------------------------------------------ Arrivée sur une page
   Un écran de chargement façon an 2000 : la jauge rayée se remplit, puis deux volets s'ouvrent.
   Tout est en CSS : même sans script, le rideau s'efface toujours de lui-même. */
.rideau { position: fixed; inset: 0; z-index: 50; pointer-events: none; animation: rideau-fin .01s linear .95s forwards; }
.rideau-volet { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--encre); }
.rideau-haut { top: 0; animation: volet-haut .45s cubic-bezier(.7, 0, .2, 1) .5s forwards; }
.rideau-bas { bottom: 0; animation: volet-bas .45s cubic-bezier(.7, 0, .2, 1) .5s forwards; }
.rideau-haut::after, .rideau-bas::after {
  content: ""; position: absolute; left: 0; right: 0; height: 6px;
  background: repeating-linear-gradient(-45deg, var(--papier-clair) 0 6px, var(--nuit) 6px 12px);
}
.rideau-haut::after { bottom: 0; }
.rideau-bas::after { top: 0; }
.rideau-centre {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px;
  color: var(--papier-clair); animation: rideau-centre .2s ease-in .42s forwards;
}
.rideau-nom { font: 800 italic 34px/1 var(--police); letter-spacing: .3em; margin-right: -.3em; animation: rideau-nom .45s cubic-bezier(.2, .85, .25, 1.08) both; }
.rideau-jauge { width: 190px; height: 12px; padding: 2px; border: 1.5px solid var(--papier-clair); border-radius: var(--rayon); }
.rideau-jauge i {
  display: block; height: 100%; border-radius: var(--rayon); transform-origin: left;
  background: repeating-linear-gradient(-45deg, var(--papier-clair) 0 6px, transparent 6px 12px);
  animation: rideau-jauge .42s cubic-bezier(.4, 0, .2, 1) .05s both;
}
.rideau-mot { font: 700 10px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .3em; text-transform: uppercase; }
.rideau-mot b { animation: pulse .5s ease-in-out infinite; }
.rideau-mot b:nth-child(2) { animation-delay: .12s; }
.rideau-mot b:nth-child(3) { animation-delay: .24s; }
@keyframes volet-haut { to { transform: translateY(-101%); } }
@keyframes volet-bas { to { transform: translateY(101%); } }
@keyframes rideau-centre { to { opacity: 0; transform: scale(1.15); } }
@keyframes rideau-nom { from { opacity: 0; letter-spacing: .9em; } }
@keyframes rideau-jauge { from { transform: scaleX(0); } }
@keyframes rideau-fin { to { visibility: hidden; } }
/* Le contenu attend l'ouverture des volets pour faire son entrée. */
.anime .entete .logo { animation-delay: .55s; }
.anime .entete .devise { animation-delay: .8s; }
.anime .barre { animation-delay: .55s; }
main { animation: page-entree .6s cubic-bezier(.2, .85, .25, 1.05) .5s both; }
@keyframes page-entree { from { opacity: 0; transform: translateY(22px); } }
/* Le rideau fait déjà la transition entre deux pages : pas de fondu en plus. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }

/* --------------------------------------------- Décor toujours en mouvement
   Les globes flottent, tournent et respirent en continu ; le défilement s'ajoute par-dessus
   (transform pour le défilement, translate / rotate / scale pour le mouvement de fond). */
.globe-gauche { animation: flotte-gauche 16s ease-in-out infinite, tourne 70s linear infinite; }
.globe-droite { animation: flotte-droite 19s ease-in-out infinite, tourne-inverse 90s linear infinite; }
@keyframes flotte-gauche {
  0%, 100% { translate: 0 0; scale: 1; }
  33% { translate: 22px -30px; scale: 1.06; }
  66% { translate: -12px 18px; scale: .96; }
}
@keyframes flotte-droite {
  0%, 100% { translate: 0 0; scale: 1; }
  40% { translate: -28px 24px; scale: .94; }
  75% { translate: 14px -20px; scale: 1.07; }
}
@keyframes tourne { to { rotate: 360deg; } }
@keyframes tourne-inverse { to { rotate: -360deg; } }
.trait { animation: balaie 7s ease-in-out infinite; }
.trait-2 { animation-duration: 9s; animation-delay: -3s; }
.trait-3 { animation-duration: 11s; animation-delay: -5s; }
@keyframes balaie { 0%, 100% { opacity: .2; scale: .7 1; } 50% { opacity: .6; scale: 1.15 1; } }
.croix { animation: clignote 4s steps(1) infinite; }
.croix-2 { animation-delay: -2s; }
@keyframes clignote { 0%, 100% { opacity: 1; } 46% { opacity: .25; } 52% { opacity: 1; } 58% { opacity: .4; } 64% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .rideau { display: none; }
  main, .globe, .trait, .croix { animation: none; }
}

/* ------------------------------------------------- Menu : ouverture et fermeture
   Le bouton devient une croix ; la fenêtre tombe en place avec un rebond, sa barre de titre défile,
   les liens arrivent un par un, puis tout se replie à la fermeture. */
.burger-traits i { transition: transform .32s cubic-bezier(.2, .85, .25, 1.3), width .2s, opacity .15s; transform-origin: center; }
.burger[aria-expanded="true"] .burger-traits i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-traits i:nth-child(2) { opacity: 0; width: 0; }
.burger[aria-expanded="true"] .burger-traits i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.burger:active { transform: scale(.93); }
.burger { transition: transform .12s, background-color .15s, border-color .15s; }

.menu { animation: menu-fond .25s ease-out both; }
.menu-fenetre { transform-origin: top right; animation: menu-entree .5s cubic-bezier(.2, .9, .25, 1.18) both; }
.menu-rayures { background-size: 200% 100%; animation: rayures 1.2s linear infinite; }
.menu-nom { animation: menu-nom .5s cubic-bezier(.2, .85, .25, 1) .12s both; }
.menu-fermer { animation: menu-croix .5s cubic-bezier(.2, .85, .25, 1.3) .2s both; }
.menu-liens li { animation: menu-lien .5s cubic-bezier(.2, .85, .25, 1.12) both; }
.menu-liens li:nth-child(1) { animation-delay: .12s; }
.menu-liens li:nth-child(2) { animation-delay: .17s; }
.menu-liens li:nth-child(3) { animation-delay: .22s; }
.menu-liens li:nth-child(4) { animation-delay: .27s; }
.menu-liens li:nth-child(5) { animation-delay: .32s; }
.menu-liens li:nth-child(6) { animation-delay: .37s; }
.menu-liens .menu-num { animation: menu-num .4s steps(4) both; animation-delay: inherit; }
.menu-pied { animation: pied-entree .45s cubic-bezier(.2, .85, .25, 1.08) .42s both; }
.menu-liens a:active { transform: scale(.98); }

.menu.ferme { animation: menu-fond-sortie .26s ease-in both; }
.menu.ferme .menu-fenetre { animation: menu-sortie .24s cubic-bezier(.6, 0, .8, .2) both; }
.menu.ferme .menu-liens li, .menu.ferme .menu-pied, .menu.ferme .menu-nom, .menu.ferme .menu-fermer { animation: none; }

@keyframes menu-fond { from { background: rgba(17, 19, 26, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
@keyframes menu-fond-sortie { to { background: rgba(17, 19, 26, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
@keyframes menu-entree {
  from { opacity: 0; transform: translateY(-30px) scale(.6) rotate(4deg); box-shadow: 0 0 0 var(--encre); }
  60% { opacity: 1; }
}
@keyframes menu-sortie { to { opacity: 0; transform: translateY(-24px) scale(.7) rotate(3deg); box-shadow: 0 0 0 var(--encre); } }
@keyframes menu-lien { from { opacity: 0; transform: translateX(-34px) skewX(-8deg); } }
@keyframes menu-num { from { opacity: 0; } }
@keyframes menu-nom { from { opacity: 0; letter-spacing: .8em; } }
@keyframes menu-croix { from { opacity: 0; transform: rotate(-180deg) scale(.4); } }
@keyframes rayures { to { background-position: -40px 0; } }
@media (prefers-reduced-motion: reduce) {
  .menu, .menu-fenetre, .menu-rayures, .menu-nom, .menu-fermer, .menu-liens li, .menu-liens .menu-num, .menu-pied { animation: none; }
  .burger-traits i { transition: none; }
}

/* ---------------------------------------------- Accueil : accroche et actions */
.accroche { margin: 20px auto 0; max-width: 30ch; font-size: 17px; line-height: 1.45; color: var(--encre); }
.actions-entete { display: grid; gap: 10px; margin-top: 22px; }
.bouton-plein, .bouton-contour {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 22px;
  border: 1.5px solid var(--encre); border-radius: var(--rayon); text-decoration: none;
  font: 800 italic 14px/1 var(--police); letter-spacing: .1em; text-transform: uppercase;
  transition: transform .15s cubic-bezier(.2, .85, .25, 1.3), background-color .18s, color .18s, box-shadow .18s;
}
.bouton-plein { background: var(--encre); color: var(--papier-clair); box-shadow: 4px 4px 0 var(--nuit); }
.bouton-contour { background: var(--papier-clair); color: var(--encre); font-size: 12px; min-height: 46px; }
.bouton-plein:hover, .bouton-plein:focus-visible { background: var(--nuit); border-color: var(--nuit); box-shadow: 6px 6px 0 var(--encre); transform: translate(-1px, -1px); outline: none; }
.bouton-contour:hover, .bouton-contour:focus-visible { background: var(--encre); color: var(--papier-clair); outline: none; }
.bouton-plein:active, .bouton-contour:active { transform: scale(.97); box-shadow: none; }

/* Plus d'air entre les sections, texte courant un peu plus lisible. */
.titre { margin-top: 48px; }
.ruban { margin-top: 34px; }
.atouts p, .etapes p, .demande-intro, .carte-lien p { color: #3d404a; }
.confiance {
  margin: 16px 0 0; padding: 12px 16px; border-left: 3px solid var(--nuit);
  font-size: 13px; line-height: 1.45; color: var(--encre); background: rgba(243, 241, 236, .6); border-radius: 0 12px 12px 0;
}

/* Encart « bientôt » : trois cartes fantômes qui ondulent, jamais une page vide. */
.bientot {
  padding: 22px 18px 20px; border: 1.5px solid var(--encre); border-radius: 22px; text-align: center;
  background: rgba(243, 241, 236, .82);
}
.bientot-cartes { display: flex; justify-content: center; gap: 10px; margin-bottom: 18px; }
.bientot-cartes span {
  width: 26%; max-width: 110px; aspect-ratio: 4 / 5; border: 1.5px dashed var(--encre); border-radius: 14px;
  background: repeating-linear-gradient(-45deg, rgba(44, 58, 94, .16) 0 8px, transparent 8px 16px);
  background-size: 46px 100%; animation: defile 1.6s linear infinite, bientot-vague 3s ease-in-out infinite;
}
.bientot-cartes span:nth-child(1) { rotate: -6deg; }
.bientot-cartes span:nth-child(2) { animation-delay: 0s, -1s; translate: 0 -8px; }
.bientot-cartes span:nth-child(3) { rotate: 6deg; animation-delay: 0s, -2s; }
.bientot-etiquette {
  display: inline-block; margin: 0 0 10px; padding: 5px 12px; border-radius: var(--rayon); background: var(--encre); color: var(--papier-clair);
  font: 700 10px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .2em; text-transform: uppercase;
}
.bientot h3 { margin: 0; font: 800 italic 20px/1.15 var(--police); text-transform: uppercase; letter-spacing: .02em; }
.bientot > p:not(.bientot-etiquette) { margin: 10px auto 0; max-width: 34ch; font-size: 14px; color: #3d404a; }
@keyframes bientot-vague { 50% { transform: translateY(-7px); } }

/* Pages de texte (mentions légales, confidentialité) : sobres et lisibles. */
.page-texte section > p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: #2b2e37; }
.page-texte .titre { margin-top: 38px; }
.maj { margin: 14px 0 0; font: 700 11px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-douce); }
.page-texte .grand-titre { font-size: clamp(30px, 9.5vw, 46px); }

/* Pied : ligne de confiance, pages, informations légales. */
.pied { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--filet); }
.pied-confiance { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin: 0 0 20px; color: var(--encre); font-weight: 700; }
.pied-confiance i { font-style: normal; margin: 0 .7em; color: var(--nuit); }
.pied-legal { margin-bottom: 18px; }
.pied-legal a { border-bottom-color: transparent; color: var(--encre-douce); }
@media (prefers-reduced-motion: reduce) { .bientot-cartes span { animation: none; } }