/* Modèle commun des pages d'étape de Cambodge Évasion */
  @font-face { font-display: swap; font-family: "Instrument Serif"; src: url("polices/InstrumentSerif-Regular.woff2") format("woff2"); }
  @font-face { font-display: swap; font-family: "Instrument Serif"; font-style: italic; src: url("polices/InstrumentSerif-Italic.woff2") format("woff2"); }
  @font-face { font-display: swap; font-family: "Inter"; font-weight: 100 900; src: url("polices/Inter.woff2") format("woff2"); }
  @font-face { font-display: swap; font-family: "Fraunces"; font-weight: 900; src: url("polices/Fraunces-900.woff2") format("woff2"); }
  :root { --pierre: #ebe3d5; --encre: #1c1712; --safran: #d97a1f; --nuit: #13100d; --papier: #f6f1e7; }
  * { box-sizing: border-box; margin: 0; }
  html { overflow-x: clip; }
  body { background: var(--nuit); color: var(--pierre); font-family: Inter, sans-serif; overflow-x: clip; }
  img { display: block; }
  a { color: inherit; text-decoration: none; }

  .scene { position: relative; }
  .collant { position: sticky; top: 0; height: 100vh; overflow: hidden; }

  .pastille { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); font: 500 14px Inter; color: var(--pierre); white-space: nowrap; }
  .pastille::before { content: ""; width: 8px; height: 8px; border-radius: 9px; background: var(--safran); }
  .bouton { display: inline-flex; align-items: center; gap: 12px; padding: 15px 24px; border-radius: 999px; background: var(--safran); color: #1a120a; font: 600 15px Inter; white-space: nowrap; }
  .tete { text-align: center; padding: 16vh 7vw 6vh; position: relative; z-index: 1; }
  .tete h2 { margin-top: 22px; font: 400 clamp(48px, 7vw, 120px)/.95 "Instrument Serif"; }
  .tete h2 i { color: var(--safran); }
  .tete p { max-width: 640px; margin: 22px auto 0; font-size: 18px; line-height: 1.55; opacity: .72; }
  .surtitre { font: 600 12px Inter; letter-spacing: .24em; text-transform: uppercase; color: var(--safran); }

  /* photo papier posée */
  .photo { position: absolute; background: var(--papier); padding: 3.7% 3.7% 14.7%; box-shadow: 0 24px 50px rgba(0,0,0,.42); }
  .photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
  .photo figcaption { position: absolute; left: 0; right: 0; bottom: 3.4%; text-align: center; font: italic 400 var(--fc, 17px) "Instrument Serif"; color: var(--encre); white-space: nowrap; }
  .scotch { position: absolute; z-index: 2; top: -4%; left: 50%; width: 38%; height: 9%; max-height: 30px; transform: translateX(-50%) rotate(-4deg); background: repeating-linear-gradient(90deg, rgba(217,122,31,.62) 0 6px, rgba(217,122,31,.5) 6px 11px); clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 55%, 99% 100%, 2% 96%, 0 62%, 4% 34%); }

  /* barre du haut */
  .barre { position: fixed; z-index: 80; top: 18px; left: 22px; right: 22px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
  .barre > * { pointer-events: auto; }
  .barre .pastille { background: rgba(20,16,12,.55); backdrop-filter: blur(14px); }
  .barre nav { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(20,16,12,.55); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); font: 500 13px Inter; }
  .barre nav a { padding: 8px 14px; border-radius: 999px; opacity: .7; }
  .barre nav a b { color: var(--safran); font-weight: 600; margin-right: 6px; }
  .barre nav a.ici { background: var(--safran); color: #1a120a; opacity: 1; }
  .barre nav a.ici b { color: #1a120a; }
  .barre nav a:not(.ici):hover { opacity: 1; }

  /* ===== Hero : le nom-fenêtre qui gonfle jusqu'à la photo ===== */
  #hero { height: 470vh; }
  #hero .collant { background: radial-gradient(90% 80% at 50% 45%, #2a221a 0%, var(--nuit) 70%); }
  .cadre { position: absolute; left: 0; top: 0; will-change: transform; }
  .dedans { position: absolute; overflow: hidden; }
  .dedans > * { position: absolute; inset: 0; width: 100%; height: 100%; }
  .dedans .premier { object-fit: cover; opacity: 0; }
  .photo-h { transform-box: view-box; transform-origin: 50% 50%; }
  .derriere { display: grid; justify-items: center; align-items: start; padding-top: var(--haut-ordi, 32vh); text-align: center; white-space: nowrap; font: 400 clamp(56px, 9.6vw, 180px)/.9 "Instrument Serif"; color: #fff; opacity: 0; text-shadow: 0 10px 60px rgba(0,0,0,.25); }
  .derriere i { color: #ffd9a8; }
  .derriere > div { translate: var(--decal-ordi, 0) 0; }
  .leg-cadre { position: absolute; left: 0; right: 0; bottom: 3.6%; text-align: center; font: italic 400 var(--leg, 20px) "Instrument Serif"; color: var(--encre); opacity: 0; }
  #hero .haut { position: absolute; top: 15vh; left: 0; right: 0; text-align: center; }
  #hero .haut div { margin-top: 14px; font: italic 400 clamp(22px, 2vw, 32px) "Instrument Serif"; }
  #hero .bas { position: absolute; bottom: 8vh; left: 0; right: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 0 20px; }
  .indice { position: absolute; bottom: 3vh; left: 50%; transform: translateX(-50%); font: 600 11px Inter; letter-spacing: .24em; text-transform: uppercase; opacity: .5; }
  .intro { position: absolute; left: 50vw; right: 7vw; top: 50%; transform: translateY(-50%); opacity: 0; }
  .intro h1, .intro h2 { margin-top: 22px; font: 400 clamp(52px, 6vw, 108px)/.92 "Instrument Serif"; }
  .intro h1 i, .intro h2 i { color: var(--safran); }
  .intro p { max-width: 520px; margin-top: 22px; font-size: 18px; line-height: 1.65; opacity: .76; }
  .intro .ligne { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
  .intro .ligne .pastille { padding: 8px 14px; font-size: 13px; }

  /* ===== Histoire : le compteur des siècles ===== */
  #histoire { height: 560vh; }
  #histoire .collant { display: grid; grid-template-columns: 1fr .95fr .75fr; align-items: center; gap: 3.5vw; padding: 0 6vw; }
  #histoire .collant > * { min-width: 0; }
  .fond-histoire { position: absolute; inset: -8vh -8vw; }
  .fond-histoire div { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(60px) saturate(1.3); opacity: 0; transition: opacity 1.2s; }
  .fond-histoire div.ici { opacity: .32; }
  .fond-histoire::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, transparent, var(--nuit) 92%); }
  .pile { position: relative; height: min(62vh, 40vw); }
  .pile .photo { left: 8%; top: 4%; width: 84%; --fc: clamp(13px, 1.1vw, 18px); opacity: 0; transform: translateY(-90px) rotate(calc(var(--r) + 16deg)) scale(1.08); transition: opacity .4s, transform .8s cubic-bezier(.34,1.5,.64,1); }
  .pile .photo.vu { opacity: 1; transform: rotate(var(--r)); }
  .compteur { position: relative; height: 1em; overflow: hidden; font: 900 clamp(100px, 11.5vw, 230px)/1 Fraunces; }
  .rouleau { will-change: transform; }
  .rouleau div { height: 1em; color: transparent; -webkit-text-stroke: 2px var(--safran); white-space: nowrap; }
  .rouleau sup { font-size: .42em; vertical-align: .95em; -webkit-text-stroke-width: 1.5px; }
  .gauche-h .surtitre { display: block; margin-bottom: 26px; }
  .graduation { display: flex; gap: 0; margin-top: 34px; max-width: 560px; }
  .graduation span { flex: 1; position: relative; padding-top: 16px; font: 600 11px Inter; letter-spacing: .14em; opacity: .4; transition: opacity .4s; border-top: 2px solid rgba(235,227,213,.18); }
  .graduation span.vu { opacity: 1; border-top-color: var(--safran); }
  .textes-h { position: relative; height: 340px; }
  .texte-h { position: absolute; inset: 0; opacity: 0; transform: translateY(30px); transition: opacity .6s, transform .6s cubic-bezier(.22,1,.36,1); }
  .texte-h.ici { opacity: 1; transform: none; }
  .texte-h h3 { font: 400 clamp(44px, 4.6vw, 80px)/.95 "Instrument Serif"; }
  .texte-h h3 i { color: var(--safran); }
  .texte-h p { max-width: 480px; margin-top: 22px; font-size: 18px; line-height: 1.65; opacity: .78; }

  /* ===== Les heures ===== */
  .ciel { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .8s; }
  .ciel.vu { opacity: 1; }
  .ciel .degrade { position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 112%, var(--lueur), transparent 72%), linear-gradient(var(--haut), var(--nuit)); opacity: .62; }
  .ciel .soleil { position: absolute; left: 0; top: 0; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: radial-gradient(circle, #ffd9a0 0 22%, rgba(255,190,110,.55) 30%, transparent 68%); filter: blur(2px); }
  #ca .tete, .heures { position: relative; z-index: 1; }
  .heures { padding-bottom: 14vh; }
  .arret { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; min-height: 92vh; padding: 0 7vw; }
  .arret.inverse .cliche { order: 2; }
  .arret .cliche { position: relative; height: min(76vh, 44vw); }
  .cliche .photo { opacity: 0; --fc: clamp(13px, 1.15vw, 18px); }
  .cliche .p1 { left: 4%; top: 2%; width: 56%; }
  .cliche .p2 { right: 2%; top: 26%; width: 44%; }
  .cliche .seule { left: 20%; top: 4%; width: 58%; }
  .recit > * { opacity: 0; }
  .recit .heure { display: block; font: 900 clamp(76px, 9vw, 160px)/.8 Fraunces; color: transparent; -webkit-text-stroke: 1.5px rgba(217,122,31,.85); white-space: nowrap; }
  .recit .heure.long { font-size: clamp(60px, 6.4vw, 116px); }
  .recit h3 { margin-top: 22px; font: 400 clamp(52px, 5.6vw, 100px)/.92 "Instrument Serif"; }
  .recit small { display: block; margin-top: 14px; font: 600 12px Inter; letter-spacing: .24em; text-transform: uppercase; color: var(--safran); }
  .recit blockquote { max-width: 520px; margin-top: 26px; font: italic 400 clamp(26px, 2.2vw, 34px)/1.15 "Instrument Serif"; color: #fff; }
  .recit p { max-width: 500px; margin-top: 20px; font-size: 17px; line-height: 1.65; opacity: .76; }
  .conseil { max-width: 500px; margin-top: 22px; padding-left: 16px; border-left: 2px solid var(--safran); font: italic 400 21px/1.3 "Instrument Serif"; opacity: .92; }
  .conseil b { display: block; margin-bottom: 4px; font: 600 11px Inter; letter-spacing: .24em; text-transform: uppercase; color: var(--safran); font-style: normal; }
  /* les étapes sans photo : un dessin */
  .art { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
  .art-chiffre { text-align: center; }
  .art-chiffre b { display: block; white-space: nowrap; font: 900 clamp(96px, 11vw, 200px)/.85 Fraunces; color: transparent; -webkit-text-stroke: 2px var(--teinte, var(--safran)); }
  .art-chiffre span { display: block; margin-top: 18px; font: italic 400 30px "Instrument Serif"; color: var(--teinte, var(--safran)); }
  .art-chiffre .dentelle { width: min(380px, 70%); height: 26px; margin: 26px auto 0; background: radial-gradient(circle at 13px 0, transparent 9px, var(--teinte) 10px 11px, transparent 12px) 0 0 / 26px 26px repeat-x; opacity: .8; }
  .art-sobre { text-align: center; }
  .art-sobre b { display: block; font: 900 clamp(90px, 10vw, 180px)/.85 Fraunces; color: transparent; -webkit-text-stroke: 1.5px rgba(235,227,213,.5); }
  .art-sobre span { display: block; margin-top: 22px; font: italic 400 28px "Instrument Serif"; opacity: .7; }
  .art-sobre i { display: block; width: 1px; height: 90px; margin: 0 auto 26px; background: rgba(235,227,213,.4); }
  .art-dome svg { width: min(520px, 92%); overflow: visible; }
  .art-soleil svg { width: min(520px, 90%); overflow: visible; }
  .art-poivre svg { width: min(580px, 96%); overflow: visible; }
  .luciole { fill: #fff3a8; opacity: 0; filter: drop-shadow(0 0 3px #ffe66b); animation: luciole 2.6s ease-in-out infinite; }
  .art-plancton svg { width: min(560px, 96%); overflow: visible; }
  .plancton { fill: #7ff9ea; opacity: .08; filter: drop-shadow(0 0 4px #2ee6d0); animation: plancton 2.4s ease-in-out infinite; }
  .plancton.loin { animation-duration: 3.2s; }
  @keyframes plancton { 0%, 100% { opacity: .08; } 18% { opacity: 1; } 45% { opacity: .25; } }
  @keyframes luciole { 0%, 100% { opacity: 0; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-5px); } }
  .art-neon { text-align: center; font: 900 clamp(70px, 8.5vw, 150px)/.9 Fraunces; color: #ffe7f3; text-shadow: 0 0 6px #ff5fb0, 0 0 22px #ff2d95, 0 0 60px #c2186e; transform: rotate(-4deg); }
  .art-neon small { display: block; margin-top: 18px; font: 600 14px Inter; letter-spacing: .3em; color: #9ff3ff; text-shadow: 0 0 6px #2ee6ff, 0 0 20px #0aa7c2; }

  /* ===== Entre deux temples ===== */
  /* titre principal pour les moteurs et les lecteurs d'écran : le nom de la ville est déjà à l'image */
  .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  /* ===== Questions fréquentes ===== */
  #faq { position: relative; z-index: 1; padding: 16vh 7vw 6vh; display: grid; grid-template-columns: .8fr 1.2fr; gap: 6vw; align-items: start; }
  #faq .gauche-f { position: sticky; top: 20vh; }
  #faq h2 { margin-top: 22px; font: 400 clamp(48px, 6vw, 104px)/.95 "Instrument Serif"; }
  #faq h2 i { color: var(--safran); }
  #faq .gauche-f p { max-width: 400px; margin-top: 20px; font-size: 17px; line-height: 1.6; opacity: .72; }
  #faq details { border-top: 1px solid rgba(235,227,213,.16); }
  #faq details:last-child { border-bottom: 1px solid rgba(235,227,213,.16); }
  #faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 34px; align-items: center; gap: 18px; padding: 26px 0; font: 400 clamp(26px, 2.4vw, 36px)/1.1 "Instrument Serif"; transition: color .3s; }
  #faq summary::-webkit-details-marker { display: none; }
  #faq summary::after { content: "+"; justify-self: end; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(235,227,213,.3); font: 400 22px/1 Inter; color: var(--safran); transition: transform .4s cubic-bezier(.22,1,.36,1); }
  #faq details[open] summary { color: #fff; }
  #faq details[open] summary::after { transform: rotate(45deg); }
  #faq summary:hover { color: #fff; }
  #faq details p { max-width: 640px; padding: 0 52px 28px 0; font-size: 16px; line-height: 1.7; opacity: .8; }
  #faq details a { color: var(--safran); text-decoration: underline; text-underline-offset: 3px; }

  #entre { position: relative; z-index: 1; padding: 22vh 7vw 14vh; display: grid; grid-template-columns: .8fr 1.2fr; gap: 6vw; align-items: start; }
  #entre .gauche-e { position: sticky; top: 22vh; }
  #entre h2 { margin-top: 22px; font: 400 clamp(48px, 6vw, 104px)/.95 "Instrument Serif"; }
  #entre h2 i { color: var(--safran); }
  #entre .gauche-e p { max-width: 400px; margin-top: 20px; font-size: 18px; line-height: 1.6; opacity: .72; }
  .activite { display: grid; grid-template-columns: 64px 1fr; gap: 0 18px; padding: 30px 0; border-top: 1px solid rgba(235,227,213,.16); }
  .activite:last-child { border-bottom: 1px solid rgba(235,227,213,.16); }
  .activite { transition: opacity .5s; }
  .activite h3, .activite small { transition: color .5s, transform .5s cubic-bezier(.22,1,.36,1); }
  .activites.pret .activite { opacity: .32; }
  .activites.pret .activite.ici { opacity: 1; }
  .activite.ici h3 { color: #fff; transform: translateX(14px); }
  .activite.ici small { color: #fff; }
  .activite small { font: 600 12px Inter; letter-spacing: .2em; color: var(--safran); padding-top: 14px; }
  .activite h3 { font: 400 clamp(36px, 3.6vw, 58px)/1 "Instrument Serif"; }
  .activite p { grid-column: 2; margin-top: 10px; max-width: 520px; font-size: 16px; line-height: 1.6; opacity: .72; }

  /* ===== Pratique ===== */
  #pratique { position: relative; z-index: 1; padding: 16vh 7vw 10vh; display: grid; grid-template-columns: 1fr 1.15fr; gap: 6vw; align-items: start; }
  #pratique .gauche-p { position: sticky; top: 16vh; }
  #pratique h2 { margin-top: 22px; font: 400 clamp(48px, 6vw, 104px)/.95 "Instrument Serif"; }
  #pratique h2 i { color: var(--safran); }
  .billet-pass { position: relative; margin-top: 40px; max-width: 470px; display: grid; grid-template-columns: 1fr 1fr 1fr; color: #3b2a14; border-radius: 10px; background: linear-gradient(135deg, #f3e7cf, #e6d3ad); box-shadow: 0 30px 70px rgba(0,0,0,.5); transform: rotate(-3deg); overflow: hidden; }
  .billet-pass .en-tete { grid-column: 1 / -1; display: flex; justify-content: space-between; padding: 16px 20px; background: #8a3c1a; color: #f3e7cf; font: 700 11px Inter; letter-spacing: .22em; }
  .billet-pass .talon { padding: 20px 18px 22px; text-align: center; border-left: 2px dashed rgba(59,42,20,.3); }
  .billet-pass .talon:first-of-type { border-left: 0; }
  .billet-pass .talon span { display: block; font: 600 11px Inter; letter-spacing: .18em; opacity: .7; }
  .billet-pass .talon b { display: block; margin-top: 8px; font: 900 42px/1 Fraunces; white-space: nowrap; }
  .billet-pass .talon i { display: block; margin-top: 4px; font: 600 11px Inter; font-style: normal; opacity: .7; }
  .billet-pass .note { grid-column: 1 / -1; padding: 12px 20px 16px; border-top: 1px dashed rgba(59,42,20,.3); font: italic 400 18px/1.3 "Instrument Serif"; }
  .fiche-p { display: grid; grid-template-columns: 80px 1fr; gap: 0 18px; padding: 34px 0; border-top: 1px solid rgba(235,227,213,.16); opacity: 0; }
  .fiche-p .n { font: 900 54px/.9 Fraunces; color: transparent; -webkit-text-stroke: 1.5px rgba(217,122,31,.85); }
  .fiche-p h3 { font: 400 40px/1 "Instrument Serif"; }
  .fiche-p p { margin-top: 12px; font-size: 16px; line-height: 1.6; opacity: .76; }
  .fiche-p .valeurs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .fiche-p .valeurs span { padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); font: 500 13px Inter; }
  .fiche-p .valeurs span b { color: var(--safran); font-weight: 600; margin-left: 6px; }
  .saisons { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-top: 16px; max-width: 520px; }
  .saisons span { padding: 11px 0; text-align: center; border-radius: 6px; font: 600 12px Inter; color: #1a120a; }
  .seche { background: #6f9a4c; } .chaude { background: #5a3720; color: #f3e7cf; } .saisons span.chaude { color: #f3e7cf; } .pluie { background: #b8936a; }

  /* ===== Étape suivante ===== */
  #ensuite { position: relative; z-index: 1; padding: 18vh 6vw 6vh; text-align: center; }
  #ensuite .lettres { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .22em; margin-top: 4vh; font: 900 13.4vw/.86 Fraunces; letter-spacing: -.01em; }
  #ensuite .lettres b { display: flex; white-space: nowrap; }
  #ensuite .lettres span { color: transparent; background-size: cover; -webkit-background-clip: text; background-clip: text; }
  #ensuite .apres { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 4vh; }
  #ensuite .bouton { margin-top: 5vh; }

  /* pied de page commun */
  .pied { position: relative; z-index: 1; padding: 20vh 6vw 4vh; overflow: hidden; }
  .pied .pret { display: grid; grid-template-columns: 1fr 1.2fr; gap: 6vw; align-items: end; }
  .pied h2 { margin-top: 20px; font: 400 clamp(52px, 6.5vw, 112px)/.95 "Instrument Serif"; }
  .pied h2 i { color: var(--safran); }
  .liens-villes a { display: grid; grid-template-columns: 54px 1fr auto; align-items: baseline; padding: 20px 0; border-top: 1px solid rgba(235,227,213,.16); font: 400 clamp(32px, 3.4vw, 54px)/1 "Instrument Serif"; transition: color .3s, padding .4s; }
  .liens-villes a:last-child { border-bottom: 1px solid rgba(235,227,213,.16); }
  .liens-villes a small { font: 600 12px Inter; letter-spacing: .2em; color: var(--safran); }
  .liens-villes a em { font: 500 14px Inter; font-style: normal; opacity: .55; }
  .liens-villes a:hover, .liens-villes a.ici { color: var(--safran); padding-left: 14px; }
  .liens-villes a.infos { font-style: italic; }
  .apercu { position: fixed; z-index: 90; left: 0; top: 0; width: 200px; pointer-events: none; opacity: 0; background: var(--papier); padding: 8px 8px 30px; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
  .apercu img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
  .geant { margin-top: 16vh; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .28em; font: 900 7.9vw/.86 Fraunces; letter-spacing: -.01em; }
  .geant .mot { display: flex; white-space: nowrap; font-weight: inherit; }
  .geant span { color: transparent; background-size: cover; -webkit-background-clip: text; background-clip: text; }
  .bas-pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 5vh; padding-top: 22px; border-top: 1px solid rgba(235,227,213,.14); font: 500 13px Inter; color: rgba(235,227,213,.72); }
  .bas-pied nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
  .bas-pied a:hover { color: var(--safran); }
  .bas-pied .credit b { font-weight: 600; color: var(--safran); }

  /* le logo de l'ancien site, gardé : dans la barre et au pied de page */
  .pastille.marque { padding: 5px 16px 5px 5px; }
  .pastille.marque::before { display: none; }
  .pastille.marque img { width: 30px; height: 30px; border-radius: 50%; }
  .bas-pied .signature { display: inline-flex; align-items: center; gap: 12px; }
  .bas-pied .signature img { width: 44px; height: 44px; }

  @media (max-width: 600px) {
    .barre { top: 12px; left: 12px; right: 12px; }
    .barre nav a { padding: 7px 10px; font-size: 12px; }
    .barre nav a:not(.ici) { display: none; }
    .pastille { padding: 8px 14px; font-size: 13px; }
    .tete { padding: 16vh 24px 5vh; }
    .tete p { font-size: 16px; }

    #hero .haut { top: 11vh; padding: 0 24px; }
    #hero .haut div { font-size: 21px; }
    #hero .bas { bottom: 7vh; gap: 8px; }
    #hero .bas .pastille:nth-child(n+3) { display: none; }
    .derriere { font-size: var(--taille-tel, 15vw); white-space: normal; padding-top: var(--haut-tel, 37vh); }
    .derriere > div { translate: var(--decal-tel, 0) 0; }
    .intro { left: 24px; right: 24px; top: calc(10vh + 68.3vw + 30px); transform: none; }
    .intro h1, .intro h2 { margin-top: 14px; font-size: 46px; }
    #faq { grid-template-columns: 1fr; padding: 12vh 24px 4vh; gap: 4vh; }
    #faq .gauche-f { position: relative; top: 0; }
    #faq summary { font-size: 25px; }
    .intro p { margin-top: 12px; font-size: 15px; line-height: 1.5; }
    .intro p + p, .intro .ligne { display: none; }

    #histoire .collant { grid-template-columns: 1fr; align-content: center; gap: 4vh; padding: 0 24px; }
    .compteur { font-size: 31vw; }
    .gauche-h .surtitre { margin-bottom: 14px; }
    .graduation { margin-top: 18px; }
    .graduation span { font-size: 9px; letter-spacing: .06em; }
    .textes-h { height: 330px; }
    .pile { display: none; }
    .texte-h h3 { font-size: 42px; }
    .texte-h p { font-size: 15px; margin-top: 14px; }

    .arret { grid-template-columns: 1fr; gap: 5vh; min-height: 0; padding: 7vh 24px; }
    .arret.inverse .cliche { order: 0; }
    .arret .cliche { height: 108vw; }
    .cliche .p1 { width: 58%; left: 6%; } .cliche .p2 { width: 50%; top: 30%; }
    .cliche .seule { width: 72%; left: 14%; }
    .recit .heure { font-size: 72px; }
    .recit h3 { font-size: 50px; }
    .recit blockquote { font-size: 24px; }
    .recit p { font-size: 16px; }
    .conseil { font-size: 19px; }
    .art-chiffre b { font-size: 25vw; }
    .art-sobre b { font-size: 24vw; }
    .recit .heure.long { font-size: 56px; }
    .art-neon { font-size: 17vw; }



    #entre, #pratique { grid-template-columns: 1fr; padding: 14vh 24px 8vh; gap: 5vh; }
    #entre .gauche-e, #pratique .gauche-p { position: relative; top: 0; }
    .activite { grid-template-columns: 40px 1fr; padding: 22px 0; }
    .activite h3 { font-size: 32px; }
    .activite p { font-size: 15px; }
    .billet-pass .talon b { font-size: 28px; }
    .billet-pass .en-tete { gap: 12px; letter-spacing: .14em; }
    .billet-pass .talon { padding: 18px 8px 20px; }
    .fiche-p { grid-template-columns: 56px 1fr; padding: 26px 0; }
    .fiche-p .n { font-size: 40px; }
    .fiche-p h3 { font-size: 32px; }
    .saisons span { font-size: 10px; padding: 9px 0; }

    #ensuite { padding: 14vh 22px 4vh; }
    #ensuite .lettres { font-size: 24vw; line-height: .9; }
    .pied { padding: 14vh 22px 3vh; }
    .pied .pret { grid-template-columns: 1fr; gap: 6vh; }
    .liens-villes a { grid-template-columns: 40px 1fr; font-size: 34px; padding: 16px 0; }
    .liens-villes a em { display: none; }
    .geant { font-size: 14.2vw; line-height: .9; margin-top: 10vh; }
    .bas-pied { flex-direction: column; }
  }