/* LudoVisio — style.css
   Les règles sont rangées par époque, dans l'ordre où elles ont été ajoutées ;
   quand deux règles visent le même élément, c'est la plus basse dans le fichier qui s'applique. */

/* ---------- Polices, hébergées en local (aucun appel externe) ---------- */
@font-face{font-family:"Marcellus";src:url(assets/fonts/marcellus-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Grenze Gotisch";src:url(assets/fonts/grenze-gotisch-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Grenze";src:url(assets/fonts/grenze-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Grenze";src:url(assets/fonts/grenze-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Grenze";src:url(assets/fonts/grenze-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IM Fell DW Pica";src:url(assets/fonts/im-fell-dw-pica-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IM Fell DW Pica";src:url(assets/fonts/im-fell-dw-pica-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IM Fell DW Pica SC";src:url(assets/fonts/im-fell-dw-pica-sc-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IM Fell French Canon";src:url(assets/fonts/im-fell-french-canon-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IM Fell French Canon";src:url(assets/fonts/im-fell-french-canon-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(assets/fonts/bodoni-moda-latin-wght-normal.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(assets/fonts/bodoni-moda-latin-wght-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Old Standard TT";src:url(assets/fonts/old-standard-tt-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Old Standard TT";src:url(assets/fonts/old-standard-tt-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Old Standard TT";src:url(assets/fonts/old-standard-tt-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Jost";src:url(assets/fonts/jost-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist";src:url(assets/fonts/geist-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(assets/fonts/geist-mono-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}

/* ---------- Base commune ---------- */
:root{
  --papier:#faf9f4;      /* le fond du logo LudoVisio */
  --marine:#12344a;
  --sarcelle:#248c92;
  --pierre:#d6d0c3;
  --velin:#e6d8b6;
  --chiffon:#f4f0e6;
  --ocre:#edc55a;
  --blanc-moderne:#f5f4f0;
  --nuit:#0b202d;
  --max:1140px;
  --marge:clamp(20px,4vw,48px);
  --nav-h:70px;
  --ui:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--marine);font-family:var(--ui);font-size:17px;line-height:1.55}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--marge)}
.epoque{position:relative;padding-block:clamp(72px,10vw,132px);scroll-margin-top:var(--nav-h)}
.epoque > .wrap{position:relative;z-index:1}
/* fondu entre deux époques : le support précédent s'efface dans le suivant */
.epoque.grain::after{content:"";position:absolute;inset:auto 0 0 0;height:150px;background:linear-gradient(transparent,var(--sol));pointer-events:none}
.epoque.fondu::before{content:"";position:absolute;inset:0 0 auto 0;height:150px;background:linear-gradient(var(--avant),transparent);pointer-events:none}

/* ---------- Barre de navigation = frise chronologique ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(250,249,244,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(18,52,74,.12)}
.nav-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(16px,3vw,40px);min-height:var(--nav-h)}
.marque{display:flex;align-items:center;gap:10px;font-weight:650;font-size:19px;letter-spacing:-.01em}
.marque a{text-decoration:none}
.marque-txt{display:grid;line-height:1.1}
.marque .par{font-size:12px;font-weight:500;letter-spacing:0;color:rgba(18,52,74,.7)}
.marque .par:hover{color:var(--marine);text-decoration:underline}
.marque img{width:42px;height:42px}
.nav-contact{font-size:14px;font-weight:600;text-decoration:none;padding:9px 16px;border-radius:8px;background:var(--marine);color:#fff}
.nav-contact:hover{background:#0b2433}
.frise{position:relative;max-width:640px;width:100%;justify-self:center}
.frise ol{display:grid;grid-template-columns:repeat(6,1fr)}
.frise a{display:grid;justify-items:center;gap:1px;padding:9px 2px 13px;text-decoration:none;color:rgba(18,52,74,.55);position:relative}
.frise a::after{content:"";position:absolute;bottom:-3px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--papier);border:1.5px solid rgba(18,52,74,.35);z-index:1}
.frise a:hover,.frise a[aria-current]{color:var(--marine)}
.frise li.passe a::after,.frise a[aria-current]::after{background:var(--marine);border-color:var(--marine)}
.frise .date{font-size:17px;height:24px;display:flex;align-items:flex-end;line-height:1;white-space:nowrap}
.frise .date sup{font-size:.6em;align-self:flex-start;margin-top:2px}
.frise .nom{font-size:11.5px;font-weight:500;white-space:nowrap}
.frise .rail{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(18,52,74,.14)}
.frise .rail i{position:absolute;inset:0;background:var(--marine);transform-origin:left center;transform:scaleX(var(--p,.0833))}
/* chaque date est composée dans le caractère de son époque */
.d-pierre{font-family:"Marcellus",serif}
.d-manuscrit{font-family:"Grenze Gotisch",serif;font-weight:500;font-size:21px!important}
.d-imprime{font-size:20px!important}
.d-imprime{font-family:"IM Fell DW Pica",serif;padding-bottom:2px}
.d-affiche{font-family:"Bodoni Moda",serif;font-weight:800}
.d-moderne{font-family:"Jost",sans-serif;font-weight:500}
.d-ecran{font-family:"Geist",sans-serif;font-weight:600}

/* ---------- Sélecteur de langue : des gonfanons pendus à une hampe ---------- */
.langues{position:relative;margin-right:4px}
.langue-btn{display:flex;align-items:flex-start;gap:6px;background:none;border:0;padding:4px 2px;cursor:pointer}
.pendu{display:block;filter:drop-shadow(0 1px 1px rgba(18,52,74,.45))}
.pendu::before{content:"";display:block;width:28px;height:3px;margin:0 -4px;border-radius:2px;background:#5a4322}
.gonfanon{display:block;width:20px;height:31px;clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%)}
.langue-btn .code{font-family:"Grenze Gotisch",serif;font-weight:600;font-size:17px;line-height:1;margin-top:6px;letter-spacing:.02em}
.langue-btn:hover .gonfanon{filter:brightness(1.08)}
.g-fr{background:linear-gradient(90deg,#27408b 0 33.4%,#f3efe2 0 66.7%,#b8322b 0)}
.g-en{background:linear-gradient(#b8322b,#b8322b) 50% 36%/100% 20% no-repeat,linear-gradient(#b8322b,#b8322b) 50% 0/26% 100% no-repeat,#f3efe2}
.g-nl{background:linear-gradient(180deg,#a8322d 0 30%,#f3efe2 0 60%,#27408b 0)}
.g-de{background:linear-gradient(180deg,#1c1b19 0 30%,#b8322b 0 60%,#d9a82a 0)}
.g-es{background:linear-gradient(180deg,#b8322b 0 22%,#e0b43a 0 64%,#b8322b 0)}
.langues-liste{position:absolute;z-index:60;left:-8px;top:calc(100% + 12px);display:flex;gap:16px;padding:0 18px 14px;background:var(--papier);border:1px solid rgba(18,52,74,.2);border-top:5px solid #5a4322;border-radius:0 0 6px 6px;box-shadow:0 18px 30px -14px rgba(18,52,74,.5)}
.langues-liste[hidden],.langues-erreur[hidden]{display:none}
.langues-liste button{display:grid;justify-items:center;gap:8px;background:none;border:0;padding:0 0 2px;cursor:pointer;font-family:var(--ui);font-size:12.5px;font-weight:500;color:rgba(18,52,74,.75)}
.langues-liste button:hover,.langues-liste button[aria-current]{color:var(--marine)}
.langues-liste button[aria-current]{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.langues-liste .gonfanon{width:38px;height:60px;filter:drop-shadow(0 2px 2px rgba(18,52,74,.4));transform-origin:top center;animation:deploie .38s cubic-bezier(.2,.8,.3,1) both}
.langues-liste li:nth-child(2) .gonfanon{animation-delay:.04s}
.langues-liste li:nth-child(3) .gonfanon{animation-delay:.08s}
.langues-liste li:nth-child(4) .gonfanon{animation-delay:.12s}
.langues-liste li:nth-child(5) .gonfanon{animation-delay:.16s}
.langues-liste button:hover .gonfanon{transform:translateY(3px)}
@keyframes deploie{from{transform:scaleY(.12)}to{transform:none}}
.langues-erreur{position:absolute;z-index:60;left:-8px;top:calc(100% + 12px);width:260px;padding:10px 12px;background:#fff;border:1px solid rgba(18,52,74,.25);border-radius:6px;font-size:13px;font-weight:400;line-height:1.4;letter-spacing:0}
h1,h2,h3{overflow-wrap:break-word}
@media(max-width:860px){
  .langue-btn .code{display:none}
  .langues-liste{gap:11px;padding:0 13px 12px}
}
@media(prefers-reduced-motion:reduce){.langues-liste .gonfanon{animation:none}}
@media(max-width:860px){
  :root{--nav-h:92px}
  .nav-in{grid-template-columns:1fr auto;row-gap:0;padding-top:8px}
  .marque{grid-area:1/1}
  .nav-contact{grid-area:1/2;padding:7px 13px}
  .frise{grid-area:2/1/3/3;max-width:none}
  .frise a{padding:4px 2px 11px}
  .frise .nom{display:none}
  .frise .date{font-size:15px;height:21px}
  .d-manuscrit{font-size:18px!important}
  .d-imprime{font-size:17px!important}
  .marque img{width:36px;height:36px}
}

/* ==========================================================
   Iᵉʳ siècle : la pierre gravée
   ========================================================== */
.pierre{
  --encre:#3a362e;--sol:#cfc8b9;
  background-color:var(--pierre);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2  0 0 0 0 .18  0 0 0 0 .14  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#dcd7cb,#cfc8b9);
  color:var(--encre);
  font-family:"Marcellus",Georgia,serif;
  padding-top:clamp(16px,2vw,24px);
}
.grave{color:rgba(58,54,46,.9);text-shadow:0 1px 0 rgba(255,255,255,.6),0 -1px 0 rgba(40,34,24,.28)}
/* labels : petits, vieillis comme des marques estampées dans la pierre ; la couleur revient au survol */
.pierre > .wrap{z-index:auto}
.pierre.grain::after{height:60px}
.labels{display:flex;justify-content:flex-end;align-items:center;gap:clamp(16px,2.4vw,30px);margin-bottom:14px}
.labels .logo{display:block}
.labels img{display:block;height:auto;width:auto;max-height:clamp(40px,4.4vw,56px);max-width:clamp(104px,12vw,150px);
  filter:grayscale(1) brightness(1.12) contrast(1.35);mix-blend-mode:multiply;opacity:.75;transition:filter .25s,opacity .25s}
.labels li:hover img,.labels a:focus-visible img{filter:none;opacity:1}
.labels .logo:empty::after{content:attr(data-nom);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(58,54,46,.75)}
.fronton{
  text-align:center;text-transform:uppercase;font-weight:400;
  font-size:clamp(21px,3.7vw,47px);line-height:1.24;letter-spacing:.075em;word-spacing:.12em;
  padding-block:clamp(20px,2.6vw,32px);
  border-block:1px solid rgba(58,54,46,.4);
  box-shadow:0 -5px 0 -4px rgba(255,255,255,.7),0 5px 0 -4px rgba(255,255,255,.7),inset 0 9px 0 -8px rgba(58,54,46,.35),inset 0 -9px 0 -8px rgba(58,54,46,.35);
}
.fronton span{display:block;text-wrap:balance}
.fronton .dedicace{font-size:.42em;letter-spacing:.3em;margin-bottom:.9em}
.fronton .dedicace::before,.fronton .dedicace::after{content:"·";margin-inline:.9em;opacity:.7}
.pierre-grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,72px);align-items:end;margin-top:clamp(36px,5vw,64px)}
.pierre .chapo{font-size:clamp(19px,1.7vw,22px);line-height:1.5;max-width:34em}
.pierre .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.plaque{display:inline-block;padding:13px 22px;font-size:17px;text-decoration:none;border-radius:2px;border:1px solid var(--encre)}
.plaque.pleine{background:var(--encre);color:#e9e4d8;box-shadow:0 2px 0 rgba(255,255,255,.45)}
.plaque.pleine:hover{background:#26231d}
.plaque.creuse{box-shadow:inset 0 2px 3px rgba(40,34,24,.25),0 1px 0 rgba(255,255,255,.55)}
.plaque.creuse:hover{background:rgba(58,54,46,.1)}
    .pierre .avis{margin-top:30px;padding-top:18px;border-top:1px solid rgba(58,54,46,.3);font-size:15.5px;line-height:1.55;max-width:36em;color:rgba(58,54,46,.85)}

.arcade{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,2vw,24px)}
.niche{
  border-radius:999px 999px 0 0;
  background:linear-gradient(180deg,#8f8878 0,#a59e8d 40%,#b4ad9c 100%);
  box-shadow:inset 0 14px 26px rgba(30,25,15,.45),inset 8px 0 16px -6px rgba(30,25,15,.3),inset -8px 0 16px -6px rgba(30,25,15,.2),0 1px 0 rgba(255,255,255,.6);
  padding:clamp(34px,5.5vw,64px) clamp(12px,2vw,26px) 0;
}
.tel{background:#000;border-radius:clamp(12px,1.8vw,22px);padding:clamp(3px,.5vw,6px);box-shadow:0 14px 22px -8px rgba(20,15,5,.6)}
.tel img{width:100%;aspect-ratio:9/17.5;object-fit:cover;object-position:top;border-radius:clamp(9px,1.4vw,17px)}
.socle{height:12px;margin-inline:-6px;background:linear-gradient(180deg,#e4dfd3,#c3bcac);box-shadow:0 3px 5px rgba(30,25,15,.35)}
.arcade figcaption{margin-top:14px;text-align:center;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(10px,1.15vw,13px);line-height:1.3}
.bandeau{margin-top:clamp(36px,5vw,60px);padding-top:18px;border-top:1px solid rgba(58,54,46,.4);box-shadow:inset 0 9px 0 -8px rgba(255,255,255,.6);text-align:center;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(11px,1.1vw,13.5px);line-height:2}
.bandeau li{display:inline-block;white-space:nowrap}
.bandeau li + li::before{content:"·";margin-inline:.7em;opacity:.7}
@media(max-width:860px){
  .pierre-grille{grid-template-columns:1fr;align-items:start}
  .arcade{order:-1}
}

/* ==========================================================
   XIIIᵉ siècle : le manuscrit
   ========================================================== */
.manuscrit{
  --avant:#cfc8b9;--sol:var(--velin);
  --encre:#2a2017;--rubrique:#a32a22;--lapis:#1f4788;--or:#a97c22;
  background-color:var(--velin);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .03' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .3  0 0 0 0 .1  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  color:var(--encre);
  font-family:"Grenze",Georgia,serif;font-size:20px;line-height:1.5;
}
.manuscrit .tete{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,5vw,64px);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.manuscrit h2{font-family:"Grenze Gotisch",serif;font-weight:600;font-size:clamp(42px,6vw,80px);line-height:.98;color:var(--encre);text-wrap:balance}
.manuscrit h2::first-letter{color:var(--rubrique)}
.codex{
  display:grid;grid-template-columns:1fr 1fr;
  background:#f1e6c9;
  background-image:linear-gradient(90deg,transparent calc(50% - 46px),rgba(74,50,20,.16) calc(50% - 1px),rgba(74,50,20,.34) 50%,rgba(74,50,20,.16) calc(50% + 1px),transparent calc(50% + 46px));
  border-radius:3px;
  box-shadow:0 0 0 1px rgba(74,50,20,.25),4px 4px 0 -1px #e7d9b6,4px 4px 0 0 rgba(74,50,20,.25),8px 8px 0 -1px #e7d9b6,8px 8px 0 0 rgba(74,50,20,.25),0 34px 50px -28px rgba(50,30,5,.55);
}
.folio{position:relative;padding:clamp(28px,4vw,52px) clamp(30px,4.5vw,60px) clamp(34px,4vw,56px)}
/* la réglure : deux traits verticaux qui bornent la colonne d'écriture */
.folio::before{content:"";position:absolute;inset:0 clamp(14px,2.2vw,30px);border-inline:1px solid rgba(120,70,30,.22);pointer-events:none}
.marge{font-style:italic;font-size:16.5px;color:var(--rubrique);text-align:right;margin-bottom:6px}
.rubrique{font-family:"Grenze Gotisch",serif;font-weight:700;font-size:clamp(36px,4.2vw,52px);line-height:1;color:var(--rubrique)}
.play .rubrique{color:var(--lapis)}
.incipit{margin-top:18px;font-size:1.2em;line-height:1.3;font-weight:600}
.incipit::first-letter{float:left;font-family:"Grenze Gotisch",serif;font-weight:800;font-size:3.9em;line-height:.66;padding:0 .1em 0 0;margin-top:.02em;color:var(--lapis)}
.play .incipit::first-letter{color:var(--rubrique)}
.folio .suite,.charte .suite{margin-top:14px;clear:both}
.capitula{margin-top:20px;display:grid;gap:8px}
.capitula li{position:relative;padding-left:1.25em;font-size:.93em;line-height:1.42}
.capitula li::before{content:"¶";position:absolute;left:0;top:0;color:var(--rubrique);font-weight:600}
.capitula li:nth-child(even)::before{color:var(--lapis)}
.glose{margin-top:24px;padding:4px 0 4px 16px;border-left:2px solid var(--rubrique);font-size:.86em;line-height:1.42}
.glose b{display:block;font-weight:600;color:var(--rubrique);margin-bottom:3px}
.miniatures{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,20px);margin-top:30px}
.miniatures img{width:100%;aspect-ratio:9/16;object-fit:cover;object-position:top;border:2px solid var(--or);box-shadow:0 0 0 3px #f1e6c9,0 0 0 4.5px var(--lapis)}
.folio .credit{margin-top:18px;font-style:italic;font-size:.84em;color:var(--rubrique)}
.folio .credit a{text-underline-offset:3px}
.play .miniatures img{box-shadow:0 0 0 3px #f1e6c9,0 0 0 4.5px var(--rubrique)}
/* la charte : un feuillet seul, scellé, pour le sur-mesure */
.charte{
  --sinople:#2c6a45;
  position:relative;margin:clamp(40px,5vw,64px) auto 0;max-width:1000px;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,56px);align-items:start;
  background:#f1e6c9;padding:clamp(28px,4vw,48px) clamp(30px,4.5vw,60px) clamp(46px,5vw,64px);
  border-radius:2px;box-shadow:0 0 0 1px rgba(74,50,20,.25),0 30px 44px -28px rgba(50,30,5,.55);
  transform:rotate(-.5deg);
}
.charte .rubrique{color:var(--sinople)}
.charte .incipit::first-letter{color:var(--sinople)}
.charte .capitula{margin-top:clamp(0px,3vw,38px)}
.charte .capitula li:nth-child(3n)::before{color:var(--sinople)}
.charte .glose{border-left-color:var(--sinople)}
/* le sceau de cire, pendu au bas de la charte */
.sceau{position:absolute;left:50%;bottom:-34px;width:68px;height:68px;margin-left:-34px;border-radius:47% 53% 50% 50% / 52% 48% 52% 48%;
  background:radial-gradient(circle at 36% 32%,#c8493c 0,#a32a22 45%,#7c1b16 100%);
  box-shadow:inset 0 0 0 7px rgba(124,27,22,.55),inset 0 0 0 9px rgba(220,110,95,.35),0 6px 10px -3px rgba(50,20,5,.6)}
.sceau::before{content:"LV";position:absolute;inset:0;display:grid;place-items:center;font-family:"Grenze Gotisch",serif;font-weight:700;font-size:25px;color:rgba(70,12,8,.75);text-shadow:0 1px 0 rgba(235,140,125,.5)}
.sceau::after{content:"";position:absolute;left:50%;top:-22px;width:14px;height:26px;margin-left:-7px;background:var(--sinople);z-index:-1;box-shadow:inset 3px 0 0 rgba(0,0,0,.18)}
@media(max-width:860px){
  .charte{grid-template-columns:1fr;transform:none}
}
@media(max-width:860px){
  .manuscrit .tete{grid-template-columns:1fr}
  .codex{grid-template-columns:1fr;background-image:none}
  .folio + .folio{border-top:1px solid rgba(74,50,20,.3)}
}

/* ==========================================================
   1751 : la planche imprimée
   ========================================================== */
.imprime{
  --avant:var(--velin);--encre:#1d1b18;
  background:var(--chiffon);color:var(--encre);
  font-family:"IM Fell DW Pica",Georgia,serif;font-size:21px;line-height:1.48;
}
.imprime .tete{text-align:center;max-width:860px;margin-inline:auto}
.imprime h2{font-family:"IM Fell French Canon",serif;font-weight:400;font-size:clamp(34px,5vw,62px);line-height:1.08;text-wrap:balance}
.imprime h2 em{font-style:italic}
.filet{height:7px;width:min(260px,60%);margin:26px auto;background:radial-gradient(ellipse at center,var(--encre) 0,var(--encre) 28%,transparent 70%)}
.imprime .tete p{max-width:33em;margin-inline:auto;text-align:justify;hyphens:auto;text-align-last:center}
.planche{margin-top:clamp(40px,5vw,64px);padding:clamp(22px,3vw,40px) clamp(16px,3vw,44px) clamp(20px,2.5vw,30px);border:1px solid var(--encre);outline:1px solid var(--encre);outline-offset:4px;position:relative}
.pl-num{text-align:right;font-style:italic;font-size:19px}
.bornes{display:flex;justify-content:space-between;gap:20px;font-style:italic;font-size:clamp(16px,1.7vw,20px);margin:8px 0 12px}
.bornes span:last-child{text-align:right}
.echelle{height:15px;border:1px solid var(--encre);background:
  repeating-linear-gradient(90deg,var(--encre) 0 5%,transparent 5% 10%) top/100% 50% no-repeat,
  repeating-linear-gradient(90deg,transparent 0 5%,var(--encre) 5% 10%) bottom/100% 50% no-repeat}
.reperes{position:relative;height:118px}
.repere{position:absolute;top:0;transform:translateX(-50%);display:grid;justify-items:center;text-align:center;width:max-content;max-width:150px}
.repere::before{content:"";width:1px;height:var(--tige,30px);background:var(--encre)}
.repere span{font-size:clamp(15px,1.7vw,20px);line-height:1.15;padding-top:5px;font-style:italic}
.repere.nous::before{width:3px;height:54px}
.repere.nous::after{content:"";position:absolute;top:-23px;left:50%;width:15px;height:15px;margin-left:-7.5px;background:var(--chiffon);border:1px solid var(--encre);box-shadow:inset 0 0 0 3px var(--chiffon),inset 0 0 0 8px var(--encre);transform:rotate(45deg)}
.repere.nous span{font-family:"IM Fell DW Pica SC",serif;font-style:normal;font-size:clamp(20px,2.4vw,29px);letter-spacing:.02em}
.planche figcaption{border-top:1px solid var(--encre);padding-top:12px;font-size:18px;text-align:center}
.articles{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(3,1fr)}
.articles p{padding-inline:clamp(16px,2.4vw,32px);text-align:justify;hyphens:auto;font-size:20px}
.articles p + p{border-left:1px solid var(--encre)}
.articles p:first-child{padding-left:0}
.articles p:last-child{padding-right:0}
.vedette{font-family:"IM Fell DW Pica SC",serif;font-weight:400;font-size:1.12em;letter-spacing:.02em}
@media(max-width:860px){
  .articles{grid-template-columns:1fr;gap:20px}
  .articles p{padding-inline:0}
  .articles p + p{border-left:0;border-top:1px solid var(--encre);padding-top:20px}
}
@media(max-width:560px){
  .imprime .tete p{text-align:center;hyphens:manual}
  .articles p{text-align:left}
  .repere{max-width:86px}
  .repere:nth-child(2){--tige:74px}
  .repere.nous::before{height:30px}
  .reperes{height:140px}
}

/* ==========================================================
   1889 : le prospectus, l'affiche
   ========================================================== */
.affiche{
  --avant:var(--chiffon);--encre:#15233b;--rouge:#b92b17;--carton:#fbf2d6;
  background:var(--ocre);color:var(--encre);
  font-family:"Old Standard TT",Georgia,serif;font-size:19px;line-height:1.5;
}
.affiche .tete{border-block:6px double var(--encre);padding-block:clamp(22px,3vw,36px);display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(24px,4vw,56px);align-items:center}
.affiche h2{font-family:"Bodoni Moda",serif;font-weight:900;font-size:clamp(38px,6.2vw,84px);line-height:.94;letter-spacing:-.015em}
.affiche h2 i{display:block;text-wrap:balance;font-weight:500;font-size:.56em;line-height:1.1;letter-spacing:0;margin-top:.3em}
.prospectus{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,56px);align-items:start;margin-top:clamp(36px,5vw,60px)}
.billet{background:var(--carton);border:2px solid var(--encre);padding:clamp(24px,3vw,36px);position:relative;box-shadow:7px 7px 0 var(--encre)}
.billet .classe{font-style:italic;font-size:18px}
.billet h3{font-family:"Bodoni Moda",serif;font-weight:800;font-size:clamp(28px,3vw,36px);line-height:1.05;margin:4px 0 10px}
.inclus{margin-top:20px}
.inclus li{padding:10px 0;border-top:1px solid rgba(21,35,59,.35);font-size:17.5px;line-height:1.35;font-weight:700}
.perfo{position:relative;border-top:2px dashed var(--encre);margin:10px calc(-1 * clamp(24px,3vw,36px)) 0;height:0}
.perfo::before,.perfo::after{content:"";position:absolute;top:-13px;width:24px;height:24px;border-radius:50%;background:var(--ocre);border:2px solid var(--encre)}
.perfo::before{left:-14px;clip-path:inset(0 0 0 50%)}
.perfo::after{right:-14px;clip-path:inset(0 50% 0 0)}
.prix{padding-top:22px}
.prix small{display:block;font-size:16px;font-style:italic}
.prix strong{display:block;font-family:"Bodoni Moda",serif;font-weight:900;font-size:clamp(64px,8vw,104px);line-height:.9;color:var(--rouge);letter-spacing:-.02em;margin:6px 0 8px;white-space:nowrap}
.prix strong span{display:block;font-size:.3em;line-height:1.3;font-weight:600;font-style:italic;letter-spacing:0;color:var(--encre);margin-top:.35em}
.tarif h3{font-family:"Bodoni Moda",serif;font-weight:800;font-size:clamp(28px,3vw,38px);line-height:1.05}
.tarif > p{margin-top:8px;max-width:34em}
.lignes{margin-top:22px}
.lignes li{padding:11px 0;border-top:1px solid rgba(21,35,59,.4)}
.lignes li:last-child{border-bottom:1px solid rgba(21,35,59,.4)}
.ligne{display:flex;align-items:baseline;gap:10px}
.ligne b{font-size:19px}
.ligne i{flex:1;border-bottom:2px dotted rgba(21,35,59,.6);transform:translateY(-4px);min-width:20px}
.ligne em{font-size:17px;white-space:nowrap}
.lignes small{display:block;font-size:16px;line-height:1.4;max-width:36em;margin-top:2px;color:rgba(21,35,59,.86)}
.guichet{margin-top:30px;background:var(--carton);border:2px solid var(--encre);padding:clamp(18px,2.4vw,26px)}
.guichet h4{margin:0 0 12px;font-family:"Bodoni Moda",serif;font-weight:800;font-size:22px}
.guichet-haut{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.choix{cursor:pointer;background:transparent;border:2px solid var(--encre);padding:9px 16px;font-weight:700;font-size:17px;border-radius:0}
.choix:hover{background:rgba(21,35,59,.1)}
.choix[aria-pressed="true"]{background:var(--encre);color:var(--carton)}
.estimation{margin-left:auto;text-align:right;line-height:1.1}
.estimation strong{display:block;font-family:"Bodoni Moda",serif;font-weight:900;font-size:34px;color:var(--rouge);white-space:nowrap}
.estimation span{font-size:15px;font-style:italic}
.adresse-apercu{margin-top:16px;padding-top:14px;border-top:1px solid rgba(21,35,59,.4);font-size:17px;overflow-wrap:anywhere}
.adresse-apercu b{font-weight:700}
@media(max-width:860px){
  .affiche .tete,.prospectus{grid-template-columns:1fr}
  .estimation{margin-left:0;text-align:left;width:100%}
}

/* ==========================================================
   1927 : la grille moderne
   ========================================================== */
.moderne{
  --avant:var(--ocre);--rouge:#d8321f;--bleu:#1c4e9c;--jaune:#f2b705;
  background:var(--blanc-moderne);color:#000;
  font-family:"Jost",sans-serif;font-size:19px;line-height:1.45;
}
.moderne .tete{display:grid;grid-template-columns:auto minmax(0,7fr) minmax(0,4fr);gap:clamp(18px,3vw,44px);align-items:end;padding-bottom:clamp(24px,3vw,36px);border-bottom:12px solid #000}
.disque{width:clamp(56px,9vw,128px);aspect-ratio:1;border-radius:50%;background:var(--rouge);align-self:start}
.moderne h2{font-weight:600;font-size:clamp(36px,5.6vw,76px);line-height:.98;letter-spacing:-.025em;text-transform:lowercase}
.cas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);margin-top:clamp(36px,5vw,64px);align-items:start}
.cas article:nth-child(2){margin-top:clamp(0px,5vw,72px)}
.cas article:nth-child(3){margin-top:clamp(0px,10vw,144px)}
.cas h3{font-weight:700;font-size:clamp(26px,2.8vw,36px);line-height:1;letter-spacing:-.02em;text-transform:lowercase}
.cas .genre{font-size:16px;margin:6px 0 18px;font-weight:500}
.cas img{width:100%;aspect-ratio:9/15;object-fit:cover;object-position:top;box-shadow:14px 14px 0 var(--c)}
.cas article:nth-child(1){--c:var(--rouge)}
.cas article:nth-child(2){--c:var(--jaune)}
.cas article:nth-child(3){--c:var(--bleu)}
.cas img + p{margin-top:32px;font-size:17.5px;max-width:30em}
.cas .credit{margin-top:10px;padding-top:10px;border-top:2px solid #000;font-size:16px;font-weight:500;max-width:30em}
.cas .credit a{text-underline-offset:3px}
@media(max-width:860px){
  .moderne .tete{grid-template-columns:auto 1fr}
  .moderne .tete p{grid-column:1/-1}
  .cas{grid-template-columns:1fr;gap:56px}
  .cas article{margin-top:0!important;max-width:420px;padding-right:14px}
}

/* ==========================================================
   2026 : l'écran
   ========================================================== */
.ecran{
  --texte:#e3ecf0;--doux:#9fb4bf;--trait:rgba(255,255,255,.14);--vert:#5fcfc8;
  background:var(--nuit);color:var(--texte);
  font-family:var(--ui);font-size:17px;line-height:1.55;
}
.ecran .tete{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,64px);align-items:end}
.ecran h2{font-weight:600;font-size:clamp(34px,4.6vw,60px);line-height:1.04;letter-spacing:-.035em}
.ecran .tete p{color:var(--doux)}
.etapes{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(40px,5vw,64px);counter-reset:etape}
.etapes li{counter-increment:etape;position:relative;padding:34px 24px 0 0}
.etapes li::before{content:"";position:absolute;top:8px;left:0;right:0;height:1px;background:var(--trait)}
.etapes li::after{content:"";position:absolute;top:4px;left:0;width:9px;height:9px;border-radius:50%;background:var(--vert)}
.etapes h3{font-size:20px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.etapes h3::before{content:counter(etape) ". ";color:var(--vert);font-variant-numeric:tabular-nums}
.etapes p{font-size:15.5px;color:var(--doux);max-width:24em}
.navigateur{margin-top:clamp(40px,5vw,64px);border:1px solid var(--trait);border-radius:14px;background:#0f2a3a;overflow:hidden}
.barre{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--trait);background:#0c2331}
.feux{display:flex;gap:6px}
.feux i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.2)}
.url{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:8px;background:rgba(255,255,255,.07);font-family:"Geist Mono",ui-monospace,Menlo,monospace;font-size:clamp(13px,1.6vw,17px);white-space:nowrap;overflow:hidden}
.url svg{flex:none;opacity:.7}
.url .proto{color:var(--doux)}
.url output{color:var(--vert);font-weight:600}
.essai{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,4vw,56px);padding:clamp(22px,3vw,36px);align-items:center}
.essai label{display:block;font-weight:600;margin-bottom:8px}
.essai input{width:100%;padding:12px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.25);font-size:17px}
.essai input::placeholder{color:rgba(227,236,240,.45)}
.essai input:focus-visible{outline:2px solid var(--vert);outline-offset:1px}
.essai p{color:var(--doux);font-size:15.5px}
@media(max-width:860px){
  .ecran .tete,.essai{grid-template-columns:1fr}
  .etapes{grid-template-columns:1fr 1fr;row-gap:28px}
}
@media(max-width:520px){.etapes{grid-template-columns:1fr}.feux,.url .proto{display:none}}


/* ---------- variante : préhistoire, Égypte, Rome ---------- */
@font-face{font-family:"Finger Paint";src:url(assets/fonts/finger-paint-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Averia Serif Libre";src:url(assets/fonts/averia-serif-libre-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Averia Serif Libre";src:url(assets/fonts/averia-serif-libre-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Julius Sans One";src:url(assets/fonts/julius-sans-one-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hieroglyphes";src:url(assets/fonts/hieroglyphes-ludovisio.woff2) format("woff2");unicode-range:U+13000-1342F;font-display:swap}
.frise{max-width:800px}
.frise ol{grid-template-columns:repeat(8,1fr)}
.frise .rail i{transform:scaleX(var(--p,.0625))}
.d-grotte{font-family:"Finger Paint",cursive;font-size:13.5px!important;padding-bottom:3px;white-space:nowrap}
.d-egypte{font-family:"Julius Sans One",sans-serif;font-size:16px!important;padding-bottom:2px}
@media(max-width:1180px){.frise .nom{display:none}.frise a{padding-bottom:11px}}
@media(max-width:860px){
  .frise .date{font-size:13px;height:20px}
  .d-grotte{font-size:10.5px!important}
  .d-egypte{font-size:12.5px!important}
  .d-manuscrit{font-size:15px!important}
  .d-imprime{font-size:14.5px!important}
}

/* ===== vers -17 000 : la paroi peinte ===== */
.grotte{
  --encre:#2a2320;--ocre-rouge:#8f3418;--sol:#d3c19b;
  background-color:#d9c8a4;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .22  0 0 0 0 .12  0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='700'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .011' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42  0 0 0 0 .27  0 0 0 0 .12  0 0 0 .9 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#dccba8,#d3c19b);
  background-size:auto,100% 100%,auto;background-repeat:repeat,no-repeat,no-repeat;
  color:var(--encre);font-family:"Averia Serif Libre",Georgia,serif;font-size:19px;line-height:1.5;
  padding-top:clamp(16px,2vw,24px);
}
.grotte > .wrap{z-index:auto}
.grotte.grain::after{height:60px}
.grotte-grille{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(8px,2vw,24px)}
.peint{font-family:"Finger Paint",cursive;font-weight:400;color:var(--ocre-rouge);font-size:clamp(25px,3.5vw,45px);line-height:1.2;text-wrap:balance;mix-blend-mode:multiply;opacity:.93}
.peint .dedicace{display:block;font-family:"Averia Serif Libre",serif;font-weight:700;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--encre);margin-bottom:14px}
.grotte .chapo{margin-top:22px;font-size:clamp(18px,1.6vw,20.5px);max-width:35em}
.grotte .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.grotte .plaque{font-family:inherit;font-weight:700;border-radius:14px 10px 16px 9px}
.grotte .avis{margin-top:28px;padding-top:16px;border-top:2px dotted rgba(42,35,32,.45);font-size:15.5px;max-width:36em;color:rgba(42,35,32,.88)}
.paroi{width:100%;height:auto;mix-blend-mode:multiply;overflow:visible}
@media(max-width:860px){.grotte-grille{grid-template-columns:1fr}.paroi{order:-1;max-width:420px;margin-inline:auto}}

/* ===== vers -1250 : le papyrus ===== */
.egypte{
  --encre:#231d14;--rouge:#a8321f;--bleu:#1f5f8b;--vert:#2f7d5b;--or:#c9961a;--papyrus:#dcc58e;
  background-color:var(--papyrus);
  background-image:repeating-linear-gradient(0deg,rgba(120,88,28,.11) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(120,88,28,.08) 0 2px,transparent 2px 7px);
  color:var(--encre);font-family:"Marcellus",Georgia,serif;font-size:19px;line-height:1.5;
}
.frise-egypte{position:absolute;left:0;right:0;height:18px;border-block:2px solid var(--encre);
  background:repeating-linear-gradient(90deg,var(--bleu) 0 20px,var(--papyrus) 20px 24px,var(--rouge) 24px 44px,var(--papyrus) 44px 48px,var(--vert) 48px 68px,var(--papyrus) 68px 72px,var(--or) 72px 92px,var(--papyrus) 92px 96px)}
.frise-egypte.haut{top:0}.frise-egypte.bas{bottom:0}
.egypte .tete{display:grid;grid-template-columns:minmax(0,6fr) auto;gap:clamp(24px,5vw,64px);align-items:center}
.egypte h2{font-family:"Julius Sans One",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(27px,3.9vw,50px);line-height:1.14;text-wrap:balance}
.egypte .tete p{margin-top:16px;max-width:34em}
.cartouche-bloc{text-align:center}
.cartouche{position:relative;display:inline-block;font-family:"Hieroglyphes",serif;font-size:clamp(26px,3.6vw,46px);white-space:nowrap;padding:.12em .7em .2em;border:3px solid var(--encre);border-radius:999px;margin-right:12px}
.cartouche::after{content:"";position:absolute;right:-12px;top:6%;bottom:6%;width:4px;background:var(--encre)}
.cartouche-bloc figcaption{margin-top:10px;font-size:15px;color:rgba(35,29,20,.8)}
.colonnes{display:grid;grid-template-columns:repeat(6,1fr);margin-top:clamp(36px,5vw,60px);border-right:1.5px solid var(--encre)}
.colonnes li{border-left:1.5px solid var(--encre);padding:4px clamp(10px,1.4vw,18px) 10px}
.signe{display:block;font-family:"Hieroglyphes",serif;font-size:50px;line-height:1.2;color:var(--rouge)}
.colonnes li:nth-child(even) .signe{color:var(--bleu)}
.colonnes h3{font-family:"Julius Sans One",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.06em;font-size:15.5px;line-height:1.25;margin:8px 0 8px;min-height:2.5em}
.colonnes p{font-size:16px;line-height:1.42}
@media(max-width:1000px){.colonnes{grid-template-columns:repeat(3,1fr);row-gap:28px}.colonnes h3{min-height:0}}
@media(max-width:860px){.egypte .tete{grid-template-columns:1fr}.cartouche-bloc{text-align:left}}
@media(max-width:520px){.colonnes{grid-template-columns:repeat(2,1fr)}}

/* ===== Iᵉʳ siècle : la pierre, désormais troisième salle ===== */
.pierre{padding-top:clamp(72px,10vw,132px)}
.pierre .arcade{max-width:820px;margin:clamp(36px,5vw,60px) auto 0}
.rome-lien{text-align:center;margin-top:clamp(32px,4vw,48px)}

/* ---------- Contact et pied de page ---------- */
/*CSS10*/
.contact{background:var(--papier);padding-block:clamp(64px,8vw,112px);scroll-margin-top:var(--nav-h)}
.marque img{mix-blend-mode:multiply}
.contact-grille img{mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);mask-composite:intersect}
.contact-grille{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center}
.contact h2{font-weight:600;font-size:clamp(27px,3.3vw,42px);line-height:1.14;letter-spacing:-.025em;text-wrap:balance}
.contact p{margin-top:18px;max-width:38em;color:#284a5c}
.contact-liens{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
    .btn{display:inline-block;padding:13px 20px;border-radius:8px;font-weight:600;text-decoration:none;background:var(--marine);color:#fff;border:1px solid var(--marine)}
.btn:hover{background:#0b2433}
.btn.clair{background:transparent;color:var(--marine)}
.btn.clair:hover{background:rgba(18,52,74,.07)}
.pied{background:#fff;border-top:1px solid rgba(18,52,74,.12);padding-block:22px;font-size:13.5px;color:#56707d}
.pied-in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.pied img{height:38px;width:auto}
.colophon{margin-top:4px}
@media(max-width:860px){.contact-grille{grid-template-columns:1fr}.contact-grille img{max-width:300px}}


/* ---------- l'accrochage : les réalisations exposées comme des œuvres ---------- */
.art-hint{margin-top:12px;font-size:15.5px;font-weight:600}
.cas{margin-top:0}
.cas article{margin-top:0!important;--fil:clamp(28px,4vw,48px);padding-top:var(--fil);
  background:linear-gradient(#000,#000) 24% 0/1.5px var(--fil) no-repeat,linear-gradient(#000,#000) 76% 0/1.5px var(--fil) no-repeat}
.cas article:nth-child(2){--fil:clamp(28px,9vw,120px)}
.cas article:nth-child(3){--fil:clamp(28px,14vw,192px)}
.cadre{position:relative;display:block;width:100%;margin:0;border:0;cursor:pointer;font:inherit;color:inherit;text-align:left;box-shadow:0 24px 30px -18px rgba(0,0,0,.6)}
.cas img{display:block;box-shadow:none}
.cadre.dore{padding:clamp(12px,1.7vw,22px);background:linear-gradient(135deg,#e9c66b,#a8771f 28%,#f3dc92 50%,#9a6a17 72%,#e2bb58);
  box-shadow:inset 0 0 0 2px #7a5412,inset 0 0 0 5px #f5e3a3,inset 0 0 0 7px #8a6118,0 24px 30px -18px rgba(0,0,0,.6)}
.cadre.dore img{outline:2px solid #6d4a10}
.cadre.passe{padding:clamp(14px,2vw,26px);background:#fff;border:clamp(7px,.9vw,11px) solid var(--jaune)}
.cadre.passe img{outline:1px solid rgba(0,0,0,.15)}
.cadre.caisse{padding:clamp(7px,1vw,12px);background:var(--blanc-moderne);border:5px solid #111}
.viseur{--v:var(--rouge);position:absolute;inset:-13px;pointer-events:none;opacity:0;transform:scale(1.06);transition:opacity .25s,transform .3s;background-repeat:no-repeat;
  background-image:linear-gradient(var(--v),var(--v)),linear-gradient(var(--v),var(--v)),linear-gradient(var(--v),var(--v)),linear-gradient(var(--v),var(--v)),linear-gradient(var(--v),var(--v)),linear-gradient(var(--v),var(--v)),linear-gradient(var(--v),var(--v)),linear-gradient(var(--v),var(--v));
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
  background-size:32px 4px,4px 32px,32px 4px,4px 32px,32px 4px,4px 32px,32px 4px,4px 32px}
.badge{position:absolute;left:50%;top:clamp(22px,3vw,38px);transform:translate(-50%,-8px);opacity:0;transition:opacity .25s,transform .3s;background:#111;color:#fff;font:600 14px/1 var(--ui);padding:9px 14px;border-radius:999px;white-space:nowrap}
.badge::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:#42d392;margin-right:8px}
.cadre:hover .viseur,.cadre:focus-visible .viseur{opacity:.5;transform:none}
.reconnu .viseur{opacity:1!important;transform:none}
.reconnu .badge{opacity:1;transform:translate(-50%,0)}
.cartel{margin-top:30px;max-width:330px;background:#fff;border:1px solid rgba(0,0,0,.2);padding:15px 18px 16px;box-shadow:0 3px 0 rgba(0,0,0,.08)}
.cas h3{font-size:clamp(21px,2vw,25px)}
.cas .genre{margin:5px 0 0;font-size:15.5px}
.cartel .details p{font-size:16px;margin-top:12px}
.cas .credit{border-top:1px solid #000;font-size:14.5px}
.js .details{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.js .details > div{overflow:hidden;min-height:0}
.js .reconnu .details{grid-template-rows:1fr}
@media(max-width:860px){
  .moderne .tete > div:last-child{grid-column:1/-1}
  .cas{gap:44px}
  .cas article{--fil:32px!important;padding-right:0}
  .cas article + article{background:none;padding-top:0}
}
@media(prefers-reduced-motion:reduce){.js .details,.viseur,.badge{transition:none}}

/* ---------- le contact en « white cube » : mur blanc, sol gris, une œuvre et son cartel ---------- */
.contact{position:relative;background:radial-gradient(ellipse 55% 75% at 24% 42%,#fff 0,#f5f5f2 65%,#ecece8 100%);padding-bottom:calc(clamp(64px,8vw,112px) + 64px)}
.contact::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(#cdcdc7,#b6b6af);border-top:1px solid #9c9c95}
.contact-grille{align-items:start}
.contact-grille img{mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none;border:10px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 28px 40px -22px rgba(0,0,0,.5)}
.accroche{display:grid;gap:16px;justify-items:start}
.cartel-cube{background:#fff;border:1px solid rgba(0,0,0,.16);padding:10px 14px 11px;font-size:13.5px;line-height:1.45;color:#333}
.cartel-cube b{display:block;font-size:15px;color:#111}
.cartel-cube span{display:block}


/* ===== 1874 : la toile, salon de peinture ===== */
@font-face{font-family:"Cormorant Garamond";src:url(assets/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(assets/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
.d-toile{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;font-size:20px!important}
@media(max-width:860px){.d-toile{font-size:15.5px!important}}
.toile{--creme:#f4e8d2;--dore:#d9b560;color:var(--creme);
  background:radial-gradient(ellipse 60% 55% at 70% 36%,rgba(255,222,170,.17),transparent 70%),linear-gradient(180deg,#75242b,#5f1a20);
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:22px;line-height:1.38;
  padding-bottom:calc(clamp(72px,10vw,132px) + 56px)}
.toile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(#3b1a14,#28110d);border-top:3px solid var(--dore);box-shadow:inset 0 9px 0 -6px rgba(217,181,96,.4)}
.toile-grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,84px);align-items:center}
.toile h2{font-weight:500;font-style:italic;font-size:clamp(36px,4.8vw,64px);line-height:1.02;text-wrap:balance}
.toile-intro{margin-top:18px;max-width:28em}
.gestes{margin-top:30px;counter-reset:g;display:grid;gap:20px}
.gestes li{counter-increment:g;position:relative;padding-left:60px}
.gestes li::before{content:counter(g);position:absolute;left:0;top:-3px;width:42px;height:42px;border:1.5px solid var(--dore);border-radius:50%;display:grid;place-items:center;font-style:italic;font-size:27px;line-height:1;color:var(--dore)}
.gestes h3{font-weight:500;font-size:28px;line-height:1.1}
.gestes p{font-size:20.5px;color:rgba(244,232,210,.88);max-width:24em}
.salon{position:relative;padding-bottom:clamp(70px,9vw,120px)}
.cadre-salon{padding:clamp(16px,2.3vw,30px);background:linear-gradient(135deg,#ecca70,#a47418 26%,#f6e09a 48%,#946512 70%,#e6c05c);
  box-shadow:inset 0 0 0 3px #7a5412,inset 0 0 0 7px #f7e6a8,inset 0 0 0 10px #8a6118,inset 0 0 0 clamp(13px,1.9vw,24px) rgba(120,80,10,.28),0 36px 46px -20px rgba(0,0,0,.8)}
.cadre-salon svg{display:block;width:100%;height:auto;outline:2px solid #5d3f0c}
.cartel-salon{width:min(250px,60%);margin:18px 0 0 auto;background:#f6efe0;color:#2a1c14;padding:10px 14px 11px;font-family:var(--ui);font-weight:400;font-size:13px;line-height:1.4;box-shadow:0 8px 14px -8px rgba(0,0,0,.6)}
.cartel-salon b{display:block;font-size:15px;font-weight:650;margin-bottom:2px}
.cartel-salon span{display:block}
.tel-toile{position:absolute;left:clamp(-34px,-2.4vw,-8px);bottom:0;width:clamp(150px,17vw,205px);background:#000;border-radius:26px;padding:7px;transform:rotate(-5deg);box-shadow:0 28px 38px -14px rgba(0,0,0,.85);font-family:var(--ui);font-weight:400;color:#111;line-height:1.3}
.ecran-toile{background:#17171a;border-radius:20px;padding:12px 9px}
.pastille{display:flex;align-items:center;gap:6px;color:#fff;font-size:11.5px;font-weight:600;margin-bottom:10px;padding-left:4px}
.pastille i{width:8px;height:8px;border-radius:50%;background:#42d392}
.fiche{background:#fff;border-radius:12px;padding:8px 8px 10px;display:grid;gap:7px}
.fiche svg{display:block;width:100%;height:auto;border-radius:7px}
.fiche b{font-size:12.5px;font-weight:650;line-height:1.2}
.lecteur{display:flex;align-items:center;gap:7px;background:#f0f0f2;border-radius:999px;padding:6px 9px}
.lect-tri{width:0;height:0;border-left:8px solid #111;border-block:5px solid transparent}
.piste{flex:1;height:3px;border-radius:2px;background:linear-gradient(90deg,#111 35%,#cfcfd4 0)}
.fl-trait{height:5px;border-radius:3px;background:#e3e3e7}
.fl-trait.court{width:60%}
.fiche em{justify-self:start;font-style:normal;font-size:11px;font-weight:600;background:#111;color:#fff;border-radius:999px;padding:4px 9px}
@media(max-width:860px){.toile-grille{grid-template-columns:1fr}.tel-toile{left:-4px}}

/* le titre du contact, en néon */
.contact h2{font-family:"Jost",sans-serif;font-weight:400;letter-spacing:.005em;color:#d81e63;text-shadow:0 0 1px #fff,0 0 8px rgba(232,50,124,.5),0 0 26px rgba(232,50,124,.33)}


/* ===== 1830 : le jeu de l'oie, sur le tapis vert (exemple LudoVisio Play) ===== */
@font-face{font-family:"Besley";src:url(assets/fonts/besley-latin-wght-normal.woff2) format("woff2");font-weight:400 900;font-display:swap}
.frise ol{grid-template-columns:repeat(9,1fr)}
.frise .rail i{transform:scaleX(var(--p,.0556))}
.d-jeu{font-family:"Besley",serif;font-weight:800;font-size:16px!important;padding-bottom:1px}
@media(max-width:860px){
  .frise .date{font-size:12px}
  .d-jeu{font-size:12px!important}
  .d-grotte{font-size:9px!important}
  .d-egypte{font-size:11.5px!important}
  .d-toile{font-size:14.5px!important}
  .d-manuscrit{font-size:14px!important}
  .d-imprime{font-size:13.5px!important}
}
.jeu{--creme:#f3ecd8;color:var(--creme);
  background-color:#1f5a40;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 .12  0 0 0 0 .05  0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"),radial-gradient(ellipse 60% 60% at 30% 40%,rgba(255,255,220,.13),transparent 70%);
  font-family:"Besley",Georgia,serif;font-weight:400;font-size:18.5px;line-height:1.48}
.jeu-grille{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,84px);align-items:center}
.jeu h2{font-weight:800;font-size:clamp(31px,4vw,54px);line-height:1.06;letter-spacing:-.01em;text-wrap:balance}
.jeu-intro{margin-top:18px;max-width:30em}
.des{margin-top:30px;display:grid;gap:20px}
.des li{position:relative;padding-left:62px}
.des li::before{content:"";position:absolute;left:0;top:0;width:44px;height:44px;border-radius:9px;background-color:#fdf8ea;box-shadow:inset 0 -4px 0 rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.4);
  background-image:radial-gradient(circle at 50% 50%,#1b1b1b 0 4.4px,transparent 5px)}
.des li:nth-child(2)::before{background-image:radial-gradient(circle at 30% 30%,#1b1b1b 0 4.4px,transparent 5px),radial-gradient(circle at 70% 70%,#1b1b1b 0 4.4px,transparent 5px)}
.des li:nth-child(3)::before{background-image:radial-gradient(circle at 27% 27%,#1b1b1b 0 4.4px,transparent 5px),radial-gradient(circle at 50% 50%,#1b1b1b 0 4.4px,transparent 5px),radial-gradient(circle at 73% 73%,#1b1b1b 0 4.4px,transparent 5px)}
.des h3{font-weight:800;font-size:23px;line-height:1.15}
.des p{font-size:17.5px;color:rgba(243,236,216,.9);max-width:25em}
.jeu-credit{margin-top:26px;padding-top:14px;border-top:1px solid rgba(243,236,216,.35);font-size:14.5px;color:rgba(243,236,216,.85)}
.jeu-credit a{text-underline-offset:3px}
.table-jeu{position:relative;padding-bottom:clamp(70px,9vw,120px)}
.planche-jeu{background:#f5ecd3;padding:clamp(6px,.9vw,11px);transform:rotate(-1.6deg);box-shadow:0 34px 44px -20px rgba(0,0,0,.75)}
.planche-jeu svg{display:block;width:100%;height:auto;font-family:"Besley",Georgia,serif}
.table-jeu .cartel-salon{margin:22px auto 0 0}
.tel-jeu{position:absolute;right:clamp(-30px,-2vw,-6px);bottom:0;width:clamp(140px,16vw,192px);transform:rotate(5deg);border-radius:24px;padding:6px;box-shadow:0 28px 38px -14px rgba(0,0,0,.85)}
.tel-jeu img{border-radius:18px}
@media(max-width:860px){.jeu-grille{grid-template-columns:1fr}.table-jeu{order:2}.tel-jeu{right:-4px}}


/* ---------- les deux blocs « exemple » : hors frise, avant « Trois usages » ---------- */
.frise ol{grid-template-columns:repeat(7,1fr)}
.frise .rail i{transform:scaleX(var(--p,.0714))}
@media(max-width:860px){.frise .date{font-size:13.5px}.d-grotte{font-size:10.5px!important}.d-egypte{font-size:12.5px!important}.d-manuscrit{font-size:15.5px!important}.d-imprime{font-size:15px!important}}
.vignette{display:inline-flex;align-items:center;gap:12px;margin-bottom:clamp(16px,2vw,24px);line-height:1}
.vignette b{display:block}
.vignette span{font-size:.5em}
/* Play : une étiquette d'image d'Épinal */
.jeu .vignette{font-family:"Besley",serif;font-size:clamp(21px,2.3vw,29px);background:#ecc04a;color:#1b1b1b;padding:10px 16px 11px;border:2.5px solid #1b1b1b;border-radius:6px;box-shadow:4px 4px 0 #c9413a;transform:rotate(-1.5deg)}
.jeu .vignette b{font-weight:800}
.jeu .vignette span{font-weight:700;text-transform:uppercase;letter-spacing:.12em;background:#1b1b1b;color:#ecc04a;padding:5px 8px 4px;border-radius:3px}
/* Guide : la plaque de laiton d'un cadre */
.toile .vignette{font-family:"Cormorant Garamond",serif;font-size:clamp(23px,2.5vw,32px);color:#3a2408;padding:9px 18px 10px;
  background:linear-gradient(135deg,#ecca70,#b88a2a 30%,#f6e09a 52%,#a87a1c 76%,#e6c05c);
  box-shadow:inset 0 0 0 1.5px #7a5412,inset 0 0 0 4px rgba(247,230,168,.75),0 6px 12px -6px rgba(0,0,0,.7)}
.toile .vignette b{font-weight:500;font-style:italic}
.toile .vignette span{font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.4em;border-left:1px solid rgba(58,36,8,.5);padding-left:12px}


/* ---------- exemple Play : une carte et son tracé, à la place du plateau de jeu ---------- */
.jeu{background-color:#22384d;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 .05  0 0 0 0 .12  0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"),radial-gradient(ellipse 60% 60% at 30% 40%,rgba(220,235,255,.12),transparent 70%)}
.planche-jeu{transform:rotate(-1.2deg)}
.carte{position:relative}
.points{position:absolute;inset:0;font-family:var(--ui)}
.points li{position:absolute;width:0;height:0}
.points .num{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:clamp(17px,2vw,25px);height:clamp(17px,2vw,25px);border-radius:50%;display:grid;place-items:center;background:#b63c26;color:#fff;border:1.5px solid #f4ead0;box-shadow:0 0 0 1.5px #22384d;font-size:clamp(10px,1.1vw,13.5px);font-weight:700;line-height:1}
.points li:first-child .num,.points li:last-child .num{background:#22384d}
.points .etq{position:absolute;white-space:nowrap;background:#fffaf0;color:#22384d;border:1px solid #22384d;border-radius:3px;padding:2px 6px 3px;font-size:clamp(9.5px,1.05vw,12.5px);font-weight:600;line-height:1.15}
.points .h .etq{left:0;bottom:clamp(11px,1.3vw,16px);transform:translateX(-50%)}
.points .b .etq{left:0;top:clamp(11px,1.3vw,16px);transform:translateX(-50%)}
.points .d .etq{left:clamp(12px,1.4vw,17px);top:0;transform:translateY(-50%)}
/* les trois temps : des points de passage reliés par un pointillé */
.des{counter-reset:pas}
.des li{counter-increment:pas}
.des li::before{content:counter(pas);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#b63c26;background-image:none!important;color:#fff;border:2px solid #f4ead0;box-shadow:0 0 0 2px #22384d,0 4px 8px rgba(0,0,0,.35);font-family:var(--ui);font-weight:700;font-size:18px;line-height:1}
.des li:not(:last-child)::after{content:"";position:absolute;left:21px;top:50px;bottom:-14px;border-left:3px dotted rgba(243,236,216,.6)}
/* vignette : un panneau directionnel plutôt qu'une étiquette de jeu */
.jeu .vignette{font-size:clamp(20px,2.2vw,27px);background:#fffaf0;color:#22384d;padding:10px 34px 11px 16px;border:0;border-radius:3px 0 0 3px;box-shadow:none;transform:none;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,0 100%);border-left:7px solid #b63c26}
.jeu .vignette span{font-family:var(--ui);font-weight:600;font-size:.42em;letter-spacing:.14em;background:none;color:#b63c26;padding:0 0 0 12px;border-left:1px solid rgba(34,56,77,.4);border-radius:0}
@media(max-width:860px){.tel-jeu{width:118px;border-radius:18px;padding:4px}.tel-jeu img{border-radius:14px}}


/* la carte déchirée : intérieur à gauche, extérieur à droite ; le téléphone descend pour dégager le plan */
.table-jeu{padding-bottom:clamp(150px,20vw,270px)}
.milieu{position:absolute;top:6.5%;font-family:var(--ui);font-size:clamp(9px,1vw,12px);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#22384d;background:rgba(255,253,246,.85);padding:2px 7px 3px;border-radius:2px}
.milieu.int{left:5%}
.milieu.ext{right:5%}


/* ================= les deux blocs redessinés dans des époques anciennes ================= */
@font-face{font-family:"Uncial Antiqua";src:url(assets/fonts/uncial-antiqua-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
.frise ol{grid-template-columns:repeat(9,1fr)}
.frise .rail i{transform:scaleX(var(--p,.0556))}
.d-vi{font-family:"Uncial Antiqua",serif;font-size:14.5px!important;padding-bottom:1px}
@media(max-width:860px){
  .frise .date{font-size:12px}
  .d-vi{font-size:10.5px!important}
  .d-grotte{font-size:9px!important}
  .d-egypte{font-size:11.5px!important}
  .d-manuscrit{font-size:14px!important}
  .d-imprime{font-size:13.5px!important}
}

/* ===== Iᵉʳ siècle : le marbre gravé (LudoVisio Play) ===== */
.jeu{--encre:#3a362e;color:var(--encre);
  background-color:var(--pierre);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2  0 0 0 0 .18  0 0 0 0 .14  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E"),linear-gradient(180deg,#d3cdbf,#c6bfb0);
  font-family:"Marcellus",Georgia,serif;font-size:19.5px;line-height:1.5}
.jeu h2{font-weight:400;font-size:clamp(31px,4vw,54px);line-height:1.1;letter-spacing:.01em;color:rgba(58,54,46,.92);text-shadow:0 1px 0 rgba(255,255,255,.6),0 -1px 0 rgba(40,34,24,.28)}
.des h3{font-weight:400;font-size:25px}
.des p{color:rgba(58,54,46,.92);font-size:18px}
.des li::before{content:counter(pas,upper-roman);font-family:"Marcellus",serif;font-weight:400;font-size:17px;background:#a8361f;border:2px solid #efeadf;box-shadow:0 0 0 1.5px #3a362e,0 3px 6px rgba(30,25,15,.35)}
.des li:not(:last-child)::after{border-left-color:rgba(58,54,46,.55)}
.jeu-credit{border-top-color:rgba(58,54,46,.4);color:rgba(58,54,46,.9)}
.planche-jeu{background:none;padding:0;box-shadow:none;filter:drop-shadow(0 20px 18px rgba(30,25,15,.5));transform:rotate(-1deg)}
.points{font-family:"Marcellus",serif}
.points .num{background:#a8361f;border-color:#f2eee4;box-shadow:0 0 0 1.5px #3a362e;font-family:var(--ui)}
.points li:first-child .num,.points li:last-child .num{background:#3a362e}
.points .etq{background:#f6f2e7;color:#3a362e;border-color:#6f6757;font-weight:400;letter-spacing:.02em}
.milieu{color:#4a463d;background:none;font-family:"Marcellus",serif;font-weight:400;letter-spacing:.2em;top:5%;text-shadow:0 1px 0 #fff}
.milieu.int{left:6%}
.milieu.ext{right:6%}
/* vignette : une tabula ansata, la tablette à queues d'aronde des inscriptions romaines */
.jeu .vignette{font-family:"Marcellus",serif;font-size:clamp(19px,2vw,25px);text-transform:uppercase;letter-spacing:.12em;background:linear-gradient(135deg,#f2eee4,#e4dfd2);color:#3a362e;padding:12px 40px 11px;border:0;border-radius:0;
  clip-path:polygon(0 50%,18px 18%,18px 0,calc(100% - 18px) 0,calc(100% - 18px) 18%,100% 50%,calc(100% - 18px) 82%,calc(100% - 18px) 100%,18px 100%,18px 82%)}
.jeu .vignette b{font-weight:400;text-shadow:0 1px 0 #fff}

/* ===== VIᵉ siècle : la mosaïque à fond d'or (LudoVisio Guide) ===== */
.toile{--creme:#f3ead2;--dore:#dcb85e;
  background-color:#14264d;
  background-image:radial-gradient(circle,rgba(220,184,94,.5) 0 1.2px,transparent 1.7px),radial-gradient(circle,rgba(220,184,94,.38) 0 .9px,transparent 1.4px),radial-gradient(ellipse 60% 55% at 70% 38%,rgba(120,150,230,.22),transparent 70%);
  background-size:68px 68px,68px 68px,auto;background-position:0 0,34px 34px,0 0;
  font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:19.5px;line-height:1.5}
.toile::after{height:22px;border-top:3px solid var(--dore);box-shadow:none;background:repeating-linear-gradient(90deg,#dcb85e 0 16px,#14264d 16px 19px,#a8361f 19px 35px,#14264d 35px 38px,#2f7d5b 38px 54px,#14264d 54px 57px)}
.toile{padding-bottom:calc(clamp(72px,10vw,132px) + 22px)}
.toile h2{font-family:"Marcellus",serif;font-style:normal;font-weight:400;font-size:clamp(31px,4vw,54px);line-height:1.1;letter-spacing:.01em}
.gestes li::before{font-family:"Uncial Antiqua",serif;font-style:normal;font-size:20px}
.gestes h3{font-weight:400;font-size:25px}
.gestes p{font-size:18px}
.cadre-salon{padding:clamp(12px,1.6vw,20px);background:conic-gradient(#dcb85e 25%,#1b2f5e 0 50%,#dcb85e 0 75%,#1b2f5e 0) 0 0/clamp(12px,1.6vw,20px) clamp(12px,1.6vw,20px);
  box-shadow:0 0 0 3px #f3ead2,0 0 0 6px #a8361f,0 34px 44px -18px rgba(0,0,0,.8)}
.cadre-salon svg{outline:3px solid #3b3326}
.toile .vignette{font-family:"Uncial Antiqua",serif;font-size:clamp(19px,2vw,25px);padding:10px 18px 9px}
.toile .vignette b{font-style:normal;font-weight:400}


/* ===== XIIᵉ siècle : le vitrail (LudoVisio Custom) ===== */
.frise{max-width:880px}
.frise ol{grid-template-columns:repeat(10,1fr)}
.frise .rail i{transform:scaleX(var(--p,.05))}
.frise .nom{font-size:10.5px}
.d-xii{font-family:"Uncial Antiqua",serif;font-size:14.5px!important;padding-bottom:1px}
@media(max-width:860px){
  .frise .date{font-size:11px}
  .d-xii,.d-vi{font-size:9.5px!important}
  .d-grotte{font-size:8.5px!important}
  .d-egypte{font-size:10.5px!important}
  .d-manuscrit{font-size:13px!important}
  .d-imprime{font-size:12.5px!important}
  .frise .date sup{font-size:.55em}
}
.vitrail{--creme:#f3ead2;color:var(--creme);
  background-color:#26211d;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' 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 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 22% 26% at 20% 78%,rgba(168,35,28,.34),transparent 70%),radial-gradient(ellipse 20% 24% at 34% 88%,rgba(29,74,154,.38),transparent 70%),radial-gradient(ellipse 18% 20% at 12% 92%,rgba(219,160,33,.26),transparent 70%),
    radial-gradient(ellipse 50% 60% at 28% 40%,rgba(255,240,200,.12),transparent 70%);
  font-family:"Marcellus",Georgia,serif;font-size:19.5px;line-height:1.5}
.vitrail-grille{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,84px);align-items:center}
.vitrail h2{font-weight:400;font-size:clamp(31px,4vw,54px);line-height:1.1;letter-spacing:.01em;text-wrap:balance}
.vitrail-intro{margin-top:18px;max-width:30em}
.eclats{margin-top:30px;display:grid;gap:22px;counter-reset:ec}
.eclats li{counter-increment:ec;position:relative;padding-left:62px}
.eclats li::before{content:"";position:absolute;left:6px;top:4px;width:30px;height:30px;transform:rotate(45deg);background:#a8231c;border:3px solid #14100c;box-shadow:0 0 0 1px rgba(243,234,210,.35),0 0 18px rgba(255,220,160,.25)}
.eclats li:nth-child(2)::before{background:#1d4a9a}
.eclats li:nth-child(3)::before{background:#dba021}
.eclats li::after{content:counter(ec);position:absolute;left:6px;top:4px;width:30px;height:30px;display:grid;place-items:center;font-family:var(--ui);font-weight:700;font-size:16px;color:#fff8e6}
.eclats li:nth-child(3)::after{color:#14100c}
.eclats h3{font-weight:400;font-size:25px;line-height:1.15}
.eclats p{font-size:18px;color:rgba(243,234,210,.9);max-width:25em}
.verriere{position:relative;padding-bottom:clamp(60px,8vw,110px)}
.rosace{position:relative;width:min(100%,440px);margin-inline:auto;filter:drop-shadow(0 0 34px rgba(255,214,150,.28)) drop-shadow(0 26px 30px rgba(0,0,0,.6))}
.rosace svg{display:block;width:100%;height:auto}
.petales{position:absolute;inset:0;font-family:var(--ui)}
.petales li{position:absolute;transform:translate(-50%,-50%);width:21%;text-align:center;font-size:clamp(8.5px,1vw,11.5px);font-weight:600;line-height:1.12;color:#fff8e6;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.petales .centre{width:26%;color:#14100c;text-shadow:none;font-size:clamp(9.5px,1.1vw,12.5px);font-weight:700}
.verriere .cartel-salon{margin:22px auto 0 0}
.tel-toile.a-droite{left:auto;right:clamp(-30px,-2vw,-6px);transform:rotate(5deg);width:clamp(132px,15vw,186px)}
.vitrail .vignette{font-family:"Marcellus",serif;font-size:clamp(19px,2vw,25px);text-transform:uppercase;letter-spacing:.12em;color:#fff8e6;padding:10px 38px 9px;border:3px solid #14100c;
  background:linear-gradient(90deg,#a8231c 0 18px,#14100c 18px 21px,#1d4a9a 21px calc(100% - 21px),#14100c calc(100% - 21px) calc(100% - 18px),#dba021 calc(100% - 18px));box-shadow:0 0 16px rgba(120,160,255,.25)}
.vitrail .vignette b{font-weight:400}
@media(max-width:860px){.vitrail-grille{grid-template-columns:1fr}.verriere{order:2}.tel-toile.a-droite{right:-4px;width:118px;border-radius:20px}}


/* ---------- « Un peu plus dans le détail » : un seul feuillet à trois colonnes ---------- */
.manuscrit .tete.detail{display:block;margin-bottom:clamp(30px,4vw,48px)}
.manuscrit .pre{font-style:italic;font-size:clamp(20px,2vw,25px);line-height:1.2;color:var(--rubrique);margin-bottom:8px}
.manuscrit .detail h2{font-size:clamp(38px,5.2vw,68px)}
.feuillet3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#f1e6c9;border-radius:3px;
  box-shadow:0 0 0 1px rgba(74,50,20,.25),4px 4px 0 -1px #e7d9b6,4px 4px 0 0 rgba(74,50,20,.25),8px 8px 0 -1px #e7d9b6,8px 8px 0 0 rgba(74,50,20,.25),0 34px 50px -28px rgba(50,30,5,.55)}
.feuillet3 .col{position:relative;padding:clamp(22px,2.8vw,38px) clamp(18px,2.2vw,30px) clamp(26px,3vw,40px)}
.feuillet3 .col + .col{border-left:3px double rgba(120,70,30,.38)}
.feuillet3 .rubrique{font-size:clamp(27px,2.7vw,36px)}
.feuillet3 .capitula{margin-top:16px}
.feuillet3 .glose{margin-top:20px}
.feuillet3 .miniatures{gap:clamp(8px,1vw,14px);margin-top:24px}
.feuillet3 .credit{margin-top:16px;font-style:italic;font-size:.84em;color:var(--rubrique)}
.feuillet3 .credit a{text-underline-offset:3px}
.col.custom{--sinople:#2c6a45}
.col.custom .rubrique,.col.custom .marge{color:var(--sinople)}
.col.custom .capitula li:nth-child(3n)::before{color:var(--sinople)}
@media(max-width:860px){
  .feuillet3{grid-template-columns:1fr}
  .feuillet3 .col + .col{border-left:0;border-top:3px double rgba(120,70,30,.38)}
}


/* ===== vers -450 : le vase grec (positionnement, la juste mesure) ===== */
.d-grec{font-family:"Julius Sans One",sans-serif;font-size:15px!important;padding-bottom:2px}
@media(max-width:860px){.d-grec{font-size:10.5px!important}}
.grec{--encre:#d9783f;--chiffon:#1a1512;--creme:#f1e2c8;background:#1a1512;color:var(--creme);
  background-image:radial-gradient(ellipse 60% 50% at 50% 30%,rgba(217,120,63,.1),transparent 70%);
  font-family:"Marcellus",Georgia,serif;font-size:19.5px;line-height:1.5;padding-bottom:calc(clamp(72px,10vw,132px) + 34px)}
.grec::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;border-block:2px solid #d9783f;
  background:#1a1512 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M0 25 H22 V5 H8 V19 H15 V12' fill='none' stroke='%23d9783f' stroke-width='3'/%3E%3Cpath d='M22 25 H30' fill='none' stroke='%23d9783f' stroke-width='3'/%3E%3C/svg%3E") repeat-x left center/30px 30px}
.grec .tete{text-align:center;max-width:900px;margin-inline:auto}
.grec h2{font-family:"Julius Sans One",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(25px,3.7vw,48px);line-height:1.16;color:var(--encre);text-wrap:balance}
.grec h2 em{font-style:normal;color:var(--creme)}
.grec .tete p{max-width:34em;margin-inline:auto}
.grec .bornes,.grec .repere span{font-style:normal}
.grec .repere.nous span{font-family:"Julius Sans One",sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(17px,2vw,24px);color:var(--creme)}
.grec .planche figcaption{font-size:16.5px}
.grec .planche figcaption i,.grec .articles i{font-style:normal;opacity:.75}
.grec .articles p{font-size:18.5px;text-align:left;hyphens:manual}
.grec .vedette{font-family:"Julius Sans One",sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:.94em;color:var(--encre)}


/* le titre et la phrase du vase grec : plus petits, sur une ligne quand l'écran le permet */
.grec .tete{max-width:none}
.grec h2{font-size:clamp(18px,2.2vw,28px);white-space:nowrap;text-wrap:initial}
.grec .tete p{font-size:clamp(13px,1.18vw,17px);max-width:none;width:92vw;margin-left:50%;transform:translateX(-50%);text-wrap:balance}
.grec .filet{margin:18px auto}
@media(max-width:1000px){.grec .tete p{width:auto;margin-left:auto;transform:none;font-size:16px;max-width:34em}}
@media(max-width:760px){.grec h2{white-space:normal;font-size:21px;text-wrap:balance}}

/* Custom : une verrière en ogive à panneaux, à la place de la rosace */
.rosace{width:min(80%,370px);margin-inline:auto 18%}
.panneaux{position:absolute;inset:0;font-family:var(--ui)}
.panneaux li{position:absolute;transform:translateY(-50%);width:23.3%;font-size:clamp(8px,.9vw,10px);letter-spacing:-.01em;font-weight:600;line-height:1.14;color:#fff8e6;text-shadow:0 1px 2px rgba(0,0,0,.75)}
.panneaux .centre{width:30%;transform:translate(-50%,-50%);text-align:center;color:#14100c;text-shadow:none;font-size:clamp(9px,1.05vw,12px);font-weight:700}
@media(max-width:860px){.rosace{width:min(78%,300px);margin-inline:0 auto}}


/* bouton du haut : libellé long sur ordinateur, court sur mobile */
.nav .wrap{max-width:1400px}
.nav-contact .court{display:none}
.nav-contact{white-space:nowrap}
@media(max-width:1340px){.frise .nom{display:none}.frise a{padding-bottom:11px}}
@media(max-width:1020px){.nav-contact .long{display:none}.nav-contact .court{display:inline}}


/* ---------- Custom : deux versions du même visuel, vitrail et néon ---------- */
.diapos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding-block:40px;margin-block:-40px}
.diapos::-webkit-scrollbar{display:none}
.diapo{flex:0 0 100%;min-width:0;scroll-snap-align:center}
.onglets{display:flex;gap:8px;margin-top:20px}
.onglets button{font:600 13.5px/1 var(--ui);padding:9px 15px;border-radius:999px;border:1.5px solid rgba(243,234,210,.55);background:none;color:var(--creme);cursor:pointer}
.onglets button:hover{border-color:var(--creme)}
.onglets button[aria-selected="true"]{background:var(--creme);border-color:var(--creme);color:#14100c}
.rosace.neon{filter:none}
.rosace.neon::before{content:"";position:absolute;inset:-6% -14%;background:radial-gradient(ellipse 50% 40% at 50% 22%,rgba(255,216,74,.16),transparent 70%),radial-gradient(ellipse 60% 45% at 30% 70%,rgba(63,224,255,.14),transparent 70%),radial-gradient(ellipse 60% 45% at 72% 66%,rgba(255,79,163,.16),transparent 70%);pointer-events:none}
.rosace.neon svg{position:relative;overflow:visible}
.neon .panneaux li{color:#fff;text-shadow:0 0 7px rgba(255,255,255,.55)}
.neon .panneaux .centre{color:#ffe58a;text-shadow:0 0 9px rgba(255,216,74,.75)}


/* troisième version : la grille d'aplats (art moderne) */
.rosace.moderne-v{filter:drop-shadow(0 24px 28px rgba(0,0,0,.65))}
.rosace.moderne-v svg{outline:1px solid rgba(0,0,0,.4)}
.moderne-v .panneaux li{color:#111;text-shadow:none;font-weight:600}
.carrousel,.verriere{min-width:0}
@media(max-width:860px){.vitrail-grille,.jeu-grille,.toile-grille{grid-template-columns:minmax(0,1fr)}}
.moderne-v .panneaux .centre{left:37.7%!important;top:23.5%!important;color:#fff}
.onglets{flex-wrap:wrap}
@media(max-width:860px){.onglets{max-width:62%}}


/* ---------- bouton des ambiances sonores ---------- */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nav-fin{display:flex;align-items:center;gap:10px}
.son-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 11px;border-radius:999px;border:1.5px solid rgba(18,52,74,.3);background:none;color:var(--marine);cursor:pointer;font:600 13px/1 var(--ui)}
.son-btn:hover{border-color:var(--marine)}
.son-btn svg{display:block}
.son-btn .ondes{display:none}
.son-btn[aria-pressed="true"]{background:var(--marine);border-color:var(--marine);color:#fff}
.son-btn[aria-pressed="true"] .ondes{display:inline}
.son-btn[aria-pressed="true"] .muet{display:none}
.son-btn[aria-pressed="true"] .l-off,.son-btn[aria-pressed="false"] .l-on{display:none}
.son-btn.en-attente{opacity:.6}
@media(max-width:1340px){.son-txt{display:none}.son-btn{padding:0 9px}}
@media(max-width:860px){.nav-fin{grid-area:1/2;gap:7px}.son-btn{height:32px;padding:0 7px}}


/* la paroi : relief de roche éclairé à la torche */
.grotte{background-color:#cdb88f;
  background-image:
    radial-gradient(ellipse 75% 85% at 62% 48%,rgba(255,226,170,.28),rgba(120,78,30,0) 55%,rgba(40,22,8,.42) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .22  0 0 0 0 .12  0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800'%3E%3Cfilter id='r' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .013' numOctaves='5' seed='17'/%3E%3CfeDiffuseLighting surfaceScale='9' diffuseConstant='1.05' lighting-color='%23f2dcae'%3E%3CfeDistantLight azimuth='235' elevation='42'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#d3bf98,#c2a97c);
  background-size:auto,auto,100% 100%,auto;background-repeat:no-repeat,repeat,no-repeat,no-repeat;background-blend-mode:normal,multiply,multiply,normal}
@media(max-width:860px){.grotte{background-image:
    radial-gradient(ellipse 120% 70% at 50% 30%,rgba(255,226,170,.25),rgba(120,78,30,0) 60%,rgba(40,22,8,.2) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .22  0 0 0 0 .12  0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='1200'%3E%3Cfilter id='r' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011 .009' numOctaves='5' seed='17'/%3E%3CfeDiffuseLighting surfaceScale='7' diffuseConstant='1.1' lighting-color='%23f2dcae'%3E%3CfeDistantLight azimuth='235' elevation='46'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#d3bf98,#c2a97c)}}

.contact{border-top:1px solid rgba(0,0,0,.1)}


/* ---------- fenêtre d'accueil : proposer le son ---------- */
.pop-son{border:0;padding:0;max-width:min(520px,92vw);background:none;color:#2a2320;overflow:visible}
.pop-son::backdrop{background:radial-gradient(ellipse 60% 50% at 50% 45%,rgba(70,36,10,.5),rgba(14,8,2,.84))}
.pop-son[open]{animation:pop-entree .35s ease-out}
@keyframes pop-entree{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.pop-in{--encre:#2a2320;padding:clamp(26px,5vw,42px) clamp(22px,5vw,40px) clamp(22px,4vw,30px);text-align:center;font-family:"Averia Serif Libre",Georgia,serif;
  background-color:#d6c39a;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .22  0 0 0 0 .12  0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"),radial-gradient(ellipse 80% 70% at 50% 35%,rgba(255,232,180,.5),rgba(150,100,40,.18));
  border-radius:28px 18px 32px 20px / 20px 30px 18px 28px;
  box-shadow:0 0 0 2px rgba(42,35,32,.28),0 34px 60px -20px rgba(0,0,0,.75),inset 0 0 46px rgba(120,78,30,.28)}
.pop-in svg{display:block;margin:0 auto}
.pop-son h2{font-family:"Finger Paint",cursive;font-weight:400;color:#8f3418;font-size:clamp(24px,5vw,33px);line-height:1.18;margin-top:10px;text-wrap:balance}
.pop-son p{margin-top:14px;font-size:18px;line-height:1.45;text-wrap:balance}
.pop-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}
.pop-actions .plaque{font-family:inherit;font-weight:700;font-size:17px;border-radius:14px 10px 16px 9px;cursor:pointer}
.pop-actions .creuse{background:rgba(255,255,255,.2)}
.pop-son .pop-note{font-size:14.5px;color:rgba(42,35,32,.82)}
@media(prefers-reduced-motion:reduce){.pop-son[open]{animation:none}}


/* ---------- contact, 2026 : ciel de fin de journée, fusée au décollage, deux personnes qui discutent du projet ---------- */
.contact{border-top:0;overflow:hidden;color:#e6ecf5;
  background:radial-gradient(1.4px 1.4px at 12% 14%,#fff,transparent),radial-gradient(1.2px 1.2px at 28% 7%,#fff,transparent),radial-gradient(1.6px 1.6px at 44% 18%,#fff,transparent),radial-gradient(1.2px 1.2px at 61% 9%,#fff,transparent),radial-gradient(1.5px 1.5px at 76% 16%,#fff,transparent),radial-gradient(1.2px 1.2px at 90% 6%,#fff,transparent),radial-gradient(1.3px 1.3px at 6% 30%,#fff,transparent),radial-gradient(1.2px 1.2px at 95% 28%,#fff,transparent),radial-gradient(1.3px 1.3px at 36% 30%,#fff,transparent),
    linear-gradient(180deg,#0b1430 0,#1f2a66 34%,#5a3f8f 58%,#c8648d 78%,#f6a26b 92%,#ffd08a 100%);
  padding-bottom:clamp(300px,34vw,440px)}
.contact::after{display:none}
.contact > .wrap{position:relative;z-index:1}
.decor-contact{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(250px,30vw,430px);display:block}
.contact p{color:#dfe7f3}
.contact h2{color:#ff5fa8;text-shadow:0 0 2px #fff,0 0 10px rgba(255,79,163,.75),0 0 30px rgba(255,79,163,.5)}
.contact .btn{background:#fff;border-color:#fff;color:#12344a}
.contact .btn:hover{background:#e6ecf5}
.contact .btn.clair{background:transparent;color:#fff;border-color:rgba(255,255,255,.8)}
.contact .btn.clair:hover{background:rgba(255,255,255,.12)}
.contact .cartel-cube{color:#333}

.decor-contact .fond{opacity:.72}


/* quatrième version : art urbain, affiches et pochoirs sur béton */
.rosace.urbain{filter:drop-shadow(0 24px 28px rgba(0,0,0,.65))}
.urbain .panneaux li{color:#141414;text-shadow:none;font-weight:600}
.onglets{max-width:68%}
.urbain .panneaux .centre{color:#141414}


/* contact : ciel de jour, texte sombre */
.contact{color:var(--marine);
  background:linear-gradient(180deg,#7cc8f2 0,#a9defa 38%,#d6f1fb 66%,#fbf6d4 88%,#fdf3c2 100%)}
.contact p{color:#1d4257}
.contact h2{color:#d81e63;text-shadow:0 0 1px #fff,0 0 8px rgba(255,255,255,.9),0 0 22px rgba(232,50,124,.3)}
.contact .btn{background:var(--marine);border-color:var(--marine);color:#fff}
.contact .btn:hover{background:#0b2433}
.contact .btn.clair{background:rgba(255,255,255,.55);color:var(--marine);border-color:var(--marine)}
.contact .btn.clair:hover{background:rgba(255,255,255,.8)}
.decor-contact .fond{opacity:1}
/* street art */
.rosace.urbain svg{overflow:visible}
.urbain .panneaux li{color:#141414;font-weight:700;letter-spacing:-.02em;text-shadow:none}
.urbain .panneaux .centre{color:#141414;text-shadow:none;font-weight:800}


/* Gaspard le Bourguignon, devant la carte du bloc Play */
.gaspard{position:absolute;left:clamp(-6px,1.5vw,22px);bottom:0;height:clamp(140px,18.6vw,252px);width:auto;filter:drop-shadow(0 14px 12px rgba(30,25,15,.4))}
/* vignettes agrandissables et visionneuse */
.miniatures .zoom{display:block;padding:0;border:0;background:none;cursor:zoom-in;border-radius:0}
.miniatures .zoom:hover img{filter:brightness(1.06)}
.visionneuse{border:0;padding:0;background:none;max-width:94vw;max-height:94vh;overflow:visible}
.visionneuse::backdrop{background:rgba(12,9,6,.86)}
.visionneuse figure{display:grid;justify-items:center;gap:12px}
.visionneuse img{display:block;max-width:92vw;max-height:82vh;width:auto;height:auto;border-radius:10px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);background:#fff}
.visionneuse figcaption{color:#f3ead2;font-family:var(--ui);font-size:15px;text-align:center;max-width:60ch}
.vis-fermer{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:#12344a;font:400 26px/1 var(--ui);cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 14px rgba(0,0,0,.5)}
.vis-fermer:hover{background:#e6ecf5}
@media(max-width:560px){.vis-fermer{top:6px;right:6px}}


/* le guide préhistorique et sa bulle, sous les boutons de l'accueil */
.guide-prehisto{display:flex;align-items:flex-end;gap:clamp(14px,2vw,24px);margin-top:30px;max-width:40em}
.guide-prehisto .homme{flex:none;width:clamp(74px,8.5vw,112px);height:auto;filter:drop-shadow(0 8px 6px rgba(40,22,8,.35))}
.grotte .avis.bulle{position:relative;margin:0 0 clamp(26px,3.4vw,46px);padding:14px 18px 15px;border:2.5px solid #2a2320;border-radius:22px 16px 24px 18px / 18px 24px 16px 22px;
  background:#f4ead0;color:#2a2320;font-size:15.5px;line-height:1.5;max-width:none;box-shadow:3px 4px 0 rgba(42,35,32,.28)}
.grotte .avis.bulle::before{content:"";position:absolute;left:-13px;bottom:22px;width:22px;height:22px;background:#f4ead0;border-left:2.5px solid #2a2320;border-bottom:2.5px solid #2a2320;transform:rotate(45deg) skew(8deg,8deg);border-radius:0 0 0 4px}
@media(max-width:520px){.grotte .avis.bulle{font-size:14.5px;padding:12px 14px}}

.guide-prehisto .homme{width:clamp(82px,9.4vw,124px)}

.feuillet3 .col-intro{margin-top:14px;font-weight:600;font-size:1.02em;line-height:1.35}


/* quatre réalisations sur le mur, et quatre vignettes dans la colonne Play */
.cas{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.6vw,36px)}
.cas article:nth-child(1){--fil:clamp(28px,4vw,48px)}
.cas article:nth-child(2){--fil:clamp(28px,8vw,100px)}
.cas article:nth-child(3){--fil:clamp(28px,12vw,150px)}
.cas article:nth-child(4){--fil:clamp(28px,16vw,200px)}
.cadre.bois{padding:clamp(8px,1.1vw,14px);background:#fffaf2;border:clamp(7px,.8vw,10px) solid #c9975a;box-shadow:inset 0 0 0 1px rgba(90,60,20,.35),0 24px 30px -18px rgba(0,0,0,.6)}
.cadre.bois img{outline:1px solid rgba(0,0,0,.12)}
.cas h3{font-size:clamp(19px,1.8vw,24px)}
.col.play .miniatures{grid-template-columns:repeat(4,1fr);gap:clamp(6px,.8vw,10px)}
@media(max-width:860px){.cas{grid-template-columns:1fr}}


/* bouton « Essayer le parcours » dans les cartels des réalisations */
.essai{display:inline-block;margin-top:12px;padding:9px 14px 10px;background:#000;color:#fff;font-weight:600;font-size:15.5px;line-height:1;text-decoration:none}
.essai::after{content:" ↗";font-weight:400}
.essai:hover{background:var(--rouge)}

.prix strong{font-size:clamp(58px,7.2vw,92px)}


/* offre : sous-titre sur une ligne, mention hors taxe */
@media(min-width:861px){.affiche h2 i{white-space:nowrap;font-size:.46em}}
.prix strong em{font-style:normal;font-weight:800;font-size:.27em;letter-spacing:0;color:var(--encre);margin-left:.35em;white-space:nowrap}
.estimation strong{font-size:30px}
@media(max-width:860px){.estimation strong{white-space:normal;font-size:26px}}
.affiche .tete{grid-template-columns:1fr;gap:clamp(12px,1.6vw,20px)}
.affiche .tete p{max-width:none}
@media(max-width:700px){.affiche .tete p br{display:none}}


/* cinq réalisations sur le mur */
.cas{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.9vw,26px)}
.cas article:nth-child(5){--fil:clamp(28px,12vw,150px)}
.cas article:nth-child(4){--fil:clamp(28px,15vw,190px)}
.cas article:nth-child(3){--fil:clamp(28px,8vw,100px)}
.cas article:nth-child(2){--fil:clamp(28px,11vw,140px)}
.cas h3{font-size:clamp(17px,1.5vw,21px);line-height:1.08}
.cas .genre{font-size:14.5px}
.cartel{padding:13px 14px 15px}
.cartel .details p{font-size:15px}
.cadre.vert{padding:clamp(7px,.9vw,12px);background:#fffdf8;border:clamp(6px,.7vw,9px) solid #3d8b56;box-shadow:inset 0 0 0 1px rgba(20,60,30,.35),0 24px 30px -18px rgba(0,0,0,.6)}
.cadre.vert img{outline:1px solid rgba(0,0,0,.12)}
.essai{font-size:13.5px;padding:8px 10px 9px;line-height:1.15}
.essai::after{content:"\00a0↗"}
.essai.galerie{border:0;cursor:pointer;font-family:inherit}
.essai.galerie::after{content:"\00a0▸"}
@media(max-width:860px){.essai{font-size:15px;padding:9px 13px 10px}}
@media(max-width:1100px){.cas{grid-template-columns:repeat(3,minmax(0,1fr))}.cas article{--fil:32px!important}}
@media(max-width:860px){.cas{grid-template-columns:1fr}}
/* visionneuse : flèches pour passer d'une image à l'autre */
.vis-nav{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;border:0;background:#fff;color:#12344a;font:400 26px/1 var(--ui);cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 14px rgba(0,0,0,.5)}
.vis-nav:hover{background:#e6ecf5}
.vis-nav[hidden]{display:none}
.vis-prec{left:-58px}.vis-suiv{right:-58px}
@media(max-width:700px){.vis-prec{left:6px}.vis-suiv{right:6px}.vis-nav{background:rgba(255,255,255,.9)}}


/* fresque murale : libellés clairs sur les médaillons peints */
.urbain .panneaux li{color:#fff8e6;font-weight:600;letter-spacing:0;text-shadow:0 1px 2px rgba(60,20,10,.75)}
.urbain .panneaux .centre{color:#5a2a1c;text-shadow:none;font-weight:800}


/* street art en kaléidoscope : libellés blancs sur cartouches noirs */
.urbain .panneaux li{color:#fff;font-weight:600;letter-spacing:0;text-shadow:none}
.urbain .panneaux .centre{color:#0d0d12;text-shadow:none;font-weight:800}


/* ---------- formulaire de contact ---------- */
.formulaire{margin-top:26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;padding:clamp(16px,2.2vw,24px);max-width:640px;
  background:rgba(255,255,255,.78);border:1px solid rgba(18,52,74,.18);border-radius:14px;box-shadow:0 18px 34px -22px rgba(18,52,74,.55);backdrop-filter:blur(4px)}
.formulaire{scroll-margin-top:120px}
.formulaire .champ{display:grid;gap:5px;align-content:start}
.formulaire .large{grid-column:1/-1}
.formulaire label{font-family:var(--ui);font-size:14px;font-weight:600;color:var(--marine)}
.formulaire input,.formulaire textarea{width:100%;font:inherit;font-family:var(--ui);font-size:16px;color:#12344a;background:#fff;border:1.5px solid rgba(18,52,74,.35);border-radius:8px;padding:10px 12px}
.formulaire textarea{resize:vertical;min-height:96px;line-height:1.45}
.formulaire input:focus,.formulaire textarea:focus{outline:2px solid #1d7fb8;outline-offset:1px;border-color:#1d7fb8}
.formulaire .calcul-q{font-weight:700}
.formulaire .pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulaire .envoi{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.formulaire .btn{cursor:pointer;font-family:var(--ui)}
.formulaire .btn[disabled]{opacity:.6;cursor:progress}
.contact .formulaire .retour{margin:0;font-size:15px;font-weight:600;color:#12344a;max-width:none}
.contact .formulaire .retour.erreur{color:#b3261e}
.contact .formulaire .retour.ok{color:#17703f}
@media(max-width:560px){.formulaire{grid-template-columns:1fr}}


/* deux amphores en filigrane dans la section du vase grec */
.grec{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 420%22%3E%3Cg opacity=%22.3%22%3E%3Cdefs%3E%3CclipPath id=%22c%22%3E%3Cpath d=%22M76 28 C78 60 80 84 74 108 C40 130 22 176 28 230 C34 300 66 350 84 384 H116 C134 350 166 300 172 230 C178 176 160 130 126 108 C120 84 122 60 124 28 Z%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d=%22M76 46 C34 48 28 98 64 124%22 fill=%22none%22 stroke=%22%23d9783f%22 stroke-width=%2211%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M124 46 C166 48 172 98 136 124%22 fill=%22none%22 stroke=%22%23d9783f%22 stroke-width=%2211%22 stroke-linecap=%22round%22/%3E%3Crect x=%2260%22 y=%2212%22 width=%2280%22 height=%2216%22 rx=%226%22 fill=%22%23d9783f%22/%3E%3Cpath d=%22M76 28 C78 60 80 84 74 108 C40 130 22 176 28 230 C34 300 66 350 84 384 H116 C134 350 166 300 172 230 C178 176 160 130 126 108 C120 84 122 60 124 28 Z%22 fill=%22%23d9783f%22/%3E%3Cpath d=%22M78 384 H122 L136 408 H64Z%22 fill=%22%23d9783f%22/%3E%3Cg clip-path=%22url(%23c)%22%3E%3Crect x=%220%22 y=%2262%22 width=%22200%22 height=%226%22 fill=%22%231a1512%22/%3E%3Crect x=%220%22 y=%22146%22 width=%22200%22 height=%227%22 fill=%22%231a1512%22/%3E%3Crect x=%220%22 y=%22198%22 width=%22200%22 height=%2236%22 fill=%22%231a1512%22/%3E%3Cpath d=%22M22 226 v-20 h16 v13 h-9 v-6%22 fill=%22none%22 stroke=%22%23d9783f%22 stroke-width=%223%22/%3E%3Cpath d=%22M44 226 v-20 h16 v13 h-9 v-6%22 fill=%22none%22 stroke=%22%23d9783f%22 stroke-width=%223%22/%3E%3Cpath d=%22M66 226 v-20 h16 v13 h-9 v-6%22 fill=%22none%22 stroke=%22%23d9783f%22 stroke-width=%223%22/%3E%3Cpath d=%22M88 226 v-20 h16 v13 h-9 v-6%22 fill=%22none%22 stroke=%22%23d9783f%22 stroke-width=%223%22/%3E%3Cpath d=%22M110 226 v-20 h16 v13 h-9 v-6%22 fill=%22none%22 stroke=%22%23d9783f%22 stroke-width=%223%22/%3E%3Cpath d=%22M132 226 v-20 h16 v13 h-9 v-6%22 fill=%22none%22 stroke=%22%23d9783f%22 stroke-width=%223%22/%3E%3Cpath d=%22M154 226 v-20 h16 v13 h-9 v-6%22 fill=%22none%22 stroke=%22%23d9783f%22 stroke-width=%223%22/%3E%3Cpath d=%22M176 226 v-20 h16 v13 h-9 v-6%22 fill=%22none%22 stroke=%22%23d9783f%22 stroke-width=%223%22/%3E%3Crect x=%220%22 y=%22290%22 width=%22200%22 height=%227%22 fill=%22%231a1512%22/%3E%3Cpath d=%22M70 384 L77 334 L84 384Z%22 fill=%22%231a1512%22/%3E%3Cpath d=%22M84 384 L91 334 L98 384Z%22 fill=%22%231a1512%22/%3E%3Cpath d=%22M98 384 L105 334 L112 384Z%22 fill=%22%231a1512%22/%3E%3Cpath d=%22M112 384 L119 334 L126 384Z%22 fill=%22%231a1512%22/%3E%3Cpath d=%22M126 384 L133 334 L140 384Z%22 fill=%22%231a1512%22/%3E%3Ccircle cx=%22100%22 cy=%22262%22 r=%2213%22 fill=%22none%22 stroke=%22%231a1512%22 stroke-width=%223%22/%3E%3Cpath d=%22M60 262 h22 M118 262 h22%22 stroke=%22%231a1512%22 stroke-width=%223%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 420%22%3E%3Cg transform=%22translate(200 0) scale(-1 1)%22 opacity=%22.3%22%3E%3Cdefs%3E%3CclipPath id=%22c%22%3E%3Cpath d=%22M76 28 C78 60 80 84 74 108 C40 130 22 176 28 230 C34 300 66 350 84 384 H116 C134 350 166 300 172 230 C178 176 160 130 126 108 C120 84 122 60 124 28 Z%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d=%22M76 46 C34 48 28 98 64 124%22 fill=%22none%22 stroke=%22%23d9783f%22 stroke-width=%2211%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M124 46 C166 48 172 98 136 124%22 fill=%22none%22 stroke=%22%23d9783f%22 stroke-width=%2211%22 stroke-linecap=%22round%22/%3E%3Crect x=%2260%22 y=%2212%22 width=%2280%22 height=%2216%22 rx=%226%22 fill=%22%23d9783f%22/%3E%3Cpath d=%22M76 28 C78 60 80 84 74 108 C40 130 22 176 28 230 C34 300 66 350 84 384 H116 C134 350 166 300 172 230 C178 176 160 130 126 108 C120 84 122 60 124 28 Z%22 fill=%22%23d9783f%22/%3E%3Cpath d=%22M78 384 H122 L136 408 H64Z%22 fill=%22%23d9783f%22/%3E%3Cg clip-path=%22url(%23c)%22%3E%3Crect x=%220%22 y=%2262%22 width=%22200%22 height=%226%22 fill=%22%231a1512%22/%3E%3Crect x=%220%22 y=%22146%22 width=%22200%22 height=%227%22 fill=%22%231a1512%22/%3E%3Crect x=%220%22 y=%22198%22 width=%22200%22 height=%2236%22 fill=%22%231a1512%22/%3E%3Cpath d=%22M22 226 v-20 h16 v13 h-9 v-6%22 fill=%22none%22 stroke=%22%23d9783f%22 stroke-width=%223%22/%3E%3Cpath d=%22M44 226 v-20 h16 v13 h-9 v-6%22 fill=%22none%22 stroke=%22%23d9783f%22 stroke-width=%223%22/%3E%3Cpath d=%22M66 226 v-20 h16 v13 h-9 v-6%22 fill=%22none%22 stroke=%22%23d9783f%22 stroke-width=%223%22/%3E%3Cpath d=%22M88 226 v-20 h16 v13 h-9 v-6%22 fill=%22none%22 stroke=%22%23d9783f%22 stroke-width=%223%22/%3E%3Cpath d=%22M110 226 v-20 h16 v13 h-9 v-6%22 fill=%22none%22 stroke=%22%23d9783f%22 stroke-width=%223%22/%3E%3Cpath d=%22M132 226 v-20 h16 v13 h-9 v-6%22 fill=%22none%22 stroke=%22%23d9783f%22 stroke-width=%223%22/%3E%3Cpath d=%22M154 226 v-20 h16 v13 h-9 v-6%22 fill=%22none%22 stroke=%22%23d9783f%22 stroke-width=%223%22/%3E%3Cpath d=%22M176 226 v-20 h16 v13 h-9 v-6%22 fill=%22none%22 stroke=%22%23d9783f%22 stroke-width=%223%22/%3E%3Crect x=%220%22 y=%22290%22 width=%22200%22 height=%227%22 fill=%22%231a1512%22/%3E%3Cpath d=%22M70 384 L77 334 L84 384Z%22 fill=%22%231a1512%22/%3E%3Cpath d=%22M84 384 L91 334 L98 384Z%22 fill=%22%231a1512%22/%3E%3Cpath d=%22M98 384 L105 334 L112 384Z%22 fill=%22%231a1512%22/%3E%3Cpath d=%22M112 384 L119 334 L126 384Z%22 fill=%22%231a1512%22/%3E%3Cpath d=%22M126 384 L133 334 L140 384Z%22 fill=%22%231a1512%22/%3E%3Ccircle cx=%22100%22 cy=%22262%22 r=%2213%22 fill=%22none%22 stroke=%22%231a1512%22 stroke-width=%223%22/%3E%3Cpath d=%22M60 262 h22 M118 262 h22%22 stroke=%22%231a1512%22 stroke-width=%223%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),radial-gradient(ellipse 60% 50% at 50% 30%,rgba(217,120,63,.1),transparent 70%);
  background-repeat:no-repeat;background-position:left clamp(-70px,calc(50vw - 760px),40px) center,right clamp(-70px,calc(50vw - 760px),40px) center,center;background-size:auto min(78%,560px),auto min(78%,560px),auto}
@media(max-width:860px){.grec{background-position:left -70px bottom 60px,right -70px top 40px,center;background-size:auto 300px,auto 300px,auto}}
/* cartouche égyptien */
.cartouche{padding:.30em .7em .2em .7em}
/* prix annuel sous le prix mensuel */
.prix .annuel{display:block;margin-top:6px;font-style:normal;font-weight:700;font-size:17px;color:var(--encre)}
/* marque déposée */
sup.reg{font-family:var(--ui);font-size:.42em;font-weight:500;font-style:normal;line-height:0;vertical-align:super;letter-spacing:0;margin-left:.06em;text-transform:none;text-shadow:none}
/* bouton pour remonter en haut */
.vers-haut{position:fixed;right:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);z-index:40;width:48px;height:48px;border-radius:50%;border:2px solid #fff;background:var(--marine);color:#fff;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 10px 22px -8px rgba(0,0,0,.6);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .25s,visibility .25s}
.vers-haut.visible{opacity:1;visibility:visible;transform:none}
.vers-haut:hover{background:#0b2433}
@media(prefers-reduced-motion:reduce){.vers-haut{transition:none}}


/* ---------- frise sur mobile : deux rangées de cinq, date et titre lisibles, étape en cours en pastille ---------- */
@media(max-width:860px){
  :root{--nav-h:138px}
  .nav-in{padding-top:7px}
  .frise{padding:4px 0 7px}
  .frise ol{grid-template-columns:repeat(5,minmax(0,auto));justify-content:space-between;row-gap:3px}
  .frise a{padding:3px clamp(1px,1.3vw,6px) 4px;gap:0;border-radius:9px;color:rgba(18,52,74,.62)}
  .frise a::after{display:none}
  .frise li.passe a{color:rgba(18,52,74,.86)}
  .frise .date{font-size:clamp(10px,3.2vw,12.5px)!important;height:17px;padding-bottom:0}
  .frise .date sup{font-size:.6em;margin-top:1px}
  .frise .nom{display:block;font-size:clamp(8.6px,2.8vw,11px);line-height:1.2;font-weight:500}
  .frise a[aria-current]{background:var(--marine);color:#fff}
  .frise a[aria-current] .nom{font-weight:600}
  .frise .rail{height:3px;border-radius:2px;overflow:hidden}
}
/* première rangée de la barre : elle doit tenir sur les petits écrans, dans toutes les langues */
@media(max-width:860px){
  .nav-in{grid-template-columns:minmax(0,1fr) auto;column-gap:8px}
  .marque{min-width:0}
  .marque > a[aria-hidden],.marque .langues{flex:none}
  .marque{gap:8px}
  .nav-contact{font-size:13px;padding:8px 11px}
}
@media(max-width:420px){
  .nav-contact{font-size:12.5px;padding:8px 9px}
  .marque img{width:30px;height:30px}
  .marque-txt a:first-child{font-size:17px}
  .marque-txt .par{font-size:11.5px}
  .son-btn{height:30px;padding:0 6px}
  .nav-fin{gap:6px}
}
@media(max-width:375px){
  .marque > a[aria-hidden]{display:none}
  .nav-contact{font-size:12px;padding:7px 8px}
}
@media(max-width:335px){
  .marque{gap:6px}
  .marque-txt a:first-child{font-size:15px}
  .marque-txt .par{font-size:10.5px}
  .nav-contact{font-size:11px;padding:7px 6px}
  .son-btn{height:28px;padding:0 4px}
  .nav-fin{gap:4px}
}
/* très petits écrans : les six constantes passent sur une colonne */
@media(max-width:360px){.colonnes{grid-template-columns:1fr}.colonnes li{border-right:0}}


/* exemples de voix IA, sous la note audio de LudoVisio Guide */
.voix-ia{margin-top:16px}
.voix-ia p{font-size:.95em;font-weight:600;line-height:1.35}
.voix-ia ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.voix-ia button{display:inline-flex;align-items:center;gap:7px;font:600 14px/1 var(--ui);padding:8px 12px 8px 10px;border-radius:999px;border:1.5px solid var(--rubrique);background:rgba(255,255,255,.45);color:var(--rubrique);cursor:pointer}
.voix-ia button::before{content:"";width:0;height:0;border-left:9px solid currentColor;border-block:6px solid transparent}
.voix-ia button:hover{background:rgba(255,255,255,.8)}
.voix-ia button[aria-pressed="true"]{background:var(--rubrique);color:#fff}
.voix-ia button[aria-pressed="true"]::before{width:9px;height:10px;border:0;background:currentColor;border-radius:1px}


/* année de chaque réalisation, en étiquette sur le coin du cartel */
.cartel{position:relative}
.cartel .annee{position:absolute;top:-12px;right:10px;padding:4px 8px 5px;background:var(--rouge);color:#fff;font-family:var(--ui);font-weight:700;font-size:13px;line-height:1;letter-spacing:.03em;box-shadow:0 3px 8px -3px rgba(0,0,0,.5)}
.cartel h3{padding-right:6px}


/* contact : le paysage n'est plus rogné en haut sur grand écran, il se fond dans le ciel, et le formulaire n'a plus de fond */
.decor-contact{height:auto;aspect-ratio:1440/430;min-height:250px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 20%);mask-image:linear-gradient(to bottom,transparent 0,#000 20%)}
.contact{padding-bottom:calc(max(250px,29.86vw) * .97)}
.formulaire{background:none;border:0;box-shadow:none;backdrop-filter:none;padding:0;margin-top:30px}
.formulaire input,.formulaire textarea{border-color:rgba(18,52,74,.45);box-shadow:0 6px 14px -10px rgba(18,52,74,.6)}
/* colonnes de détail : la ligne de mention reste réservée pour garder les trois titres alignés */
.feuillet3 .marge.vide{visibility:hidden}
@media(max-width:860px){.feuillet3 .marge.vide{display:none}}


/* ---------- mentions légales, crédits et cookies : lien du pied de page et fenêtre ---------- */
.pied .lien-ml{display:inline-block;margin-top:5px;padding:0;border:0;background:none;font:inherit;color:#12344a;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pied .lien-ml:hover{color:#000}
.mentions{border:0;padding:0;width:min(760px,94vw);max-height:90vh;background:#fff;color:#1d3a4a;border-radius:14px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);font-family:var(--ui);overflow:visible}
.mentions::backdrop{background:rgba(12,22,30,.72)}
.mentions-in{max-height:90vh;overflow:auto;padding:clamp(22px,4vw,40px);border-radius:14px}
.mentions h2{font-family:var(--ui);font-weight:700;font-size:clamp(21px,2.6vw,27px);line-height:1.2;color:#12344a;padding-right:34px}
.mentions h3{font-family:var(--ui);font-weight:700;font-size:16.5px;color:#12344a;margin-top:24px}
.mentions p,.mentions li,.mentions address{font-size:15.5px;line-height:1.55;font-style:normal;margin-top:6px}
.mentions address{padding-left:14px;border-left:3px solid #d5dde2}
.mentions ul{list-style:disc;padding-left:20px}
.mentions a{color:#12344a;text-underline-offset:3px}
.mentions .vis-fermer{top:10px;right:10px;background:#12344a;color:#fff;box-shadow:none}
.mentions .vis-fermer:hover{background:#0b2433}

/* signe ™ en petit exposant */
sup.reg{font-size:.5em;vertical-align:.62em;line-height:0;margin-left:.05em}

/* ce que couvre le prix, dit en clair sous le montant */
.prix .reel{display:block;margin-top:12px;padding-top:11px;border-top:1px solid rgba(21,35,59,.35);font-style:normal;font-weight:600;font-size:15px;line-height:1.42;color:var(--encre)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.avis {
    white-space: pre-line;
}