/* DA « Côte Atlantique » : sable clair, brume, ardoise, sable doré */
:root{
  --cream:#faf8f3;
  --cream-2:#fdfcf9;
  --oak:#c5a77d;
  --caramel:#9fb4ba;
  --walnut:#526b70;
  --dark:#162023;
  --dark-2:#24353a;
  --ink:#1e2a2d;
  --muted:#5b6c70;
  --muted-d:#b9c9ce;
  --line:rgba(30,42,45,.16);
  --line-d:rgba(250,248,243,.22);
  --radius:22px;
  --radius-img:3px; /* photos : angles presque droits, rendu « tirage » */
  --ease:cubic-bezier(.22,.7,.2,1);
  --display:"Urbanist","Helvetica Neue",Arial,sans-serif;
  --sans:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased}
/* grain global */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.17  0 0 0 0 0.18  0 0 0 .45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1240px,92vw);margin-inline:auto;position:relative;z-index:2}

/* Header (clair sur fond sombre, puis crème au scroll) */
.site-header{position:fixed;inset:0 0 auto 0;z-index:90;padding:26px 0;color:var(--cream);transition:background .4s,color .4s,padding .4s,box-shadow .4s}
.site-header.scrolled{background:rgba(250,248,243,.9);backdrop-filter:blur(12px);color:var(--ink);padding:14px 0;box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between}
.brand{font-family:var(--display);font-weight:600;font-size:1.25rem;letter-spacing:-.02em}
.brand span{color:var(--oak)}
.nav ul{display:flex;gap:6px;list-style:none}
.nav a.link{font-size:.7rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;padding:9px 16px;border-radius:999px;transition:background .35s var(--ease),color .35s}
.nav a.link:hover{background:rgba(197,167,125,.25)}
.nav a.link.active{background:var(--oak);color:var(--dark)}
.burger{display:none;background:none;border:0;width:30px;height:20px;position:relative;cursor:pointer}
.burger i{position:absolute;left:0;width:100%;height:2px;background:currentColor;transition:.35s var(--ease)}
.burger i:nth-child(1){top:2px}.burger i:nth-child(2){top:9px}.burger i:nth-child(3){top:16px}
.burger.open i:nth-child(1){top:9px;transform:rotate(45deg)}
.burger.open i:nth-child(2){opacity:0}
.burger.open i:nth-child(3){top:9px;transform:rotate(-45deg)}

/* Hero & page-hero : sombre, poutre de chêne en diagonale */
.hero,.page-hero{position:relative;overflow:hidden;color:var(--cream);
  background:radial-gradient(900px 520px at 85% 20%,rgba(197,167,125,.30),transparent 62%),linear-gradient(165deg,var(--dark-2),var(--dark))}
.hero::after,.page-hero::after{content:"";position:absolute;z-index:1;right:-18%;top:50%;width:84%;height:30%;border-radius:80px;transform:rotate(-17deg);opacity:.55;
  background:repeating-linear-gradient(97deg,rgba(82,107,112,.0) 0 7px,rgba(82,107,112,.22) 7px 8px),linear-gradient(100deg,color-mix(in srgb,var(--sand-2) 80%,var(--caramel)),color-mix(in srgb,var(--oak) 60%,var(--cream)) 45%,var(--oak));
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{from{transform:rotate(-17deg) translateX(0)}to{transform:rotate(-15deg) translateX(-2.5%)}}
.hero{min-height:100svh;display:grid;align-items:center;padding:150px 0 90px}
.page-hero{padding:200px 0 110px}
.eyebrow{font-size:.7rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--oak);margin-bottom:26px}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:.95;letter-spacing:-.045em}
h1{font-size:clamp(3.4rem,12vw,11.5rem);font-weight:400}
h1 em{font-style:normal;color:var(--oak)}
.page-hero h1{font-size:clamp(2.8rem,8.5vw,7.4rem);font-weight:400}
.lead{max-width:520px;margin-top:30px;color:var(--muted);font-size:1.05rem}
.hero .lead,.page-hero .lead,.alt .lead{color:var(--muted-d)}
.btn{display:inline-flex;align-items:center;gap:10px;margin-top:40px;padding:15px 30px;border:1.5px solid currentColor;border-radius:999px;font-size:.7rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;background:transparent;color:inherit;cursor:pointer;transition:.4s var(--ease);font-family:var(--sans)}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.btn.solid{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.btn.solid:hover{background:var(--oak);border-color:var(--oak);color:var(--dark)}
.hero .btn.solid,.alt .btn.solid{background:var(--oak);border-color:var(--oak);color:var(--dark)}
.hero .btn.solid:hover,.alt .btn.solid:hover{background:var(--cream);border-color:var(--cream)}

/* Sections */
section{padding:120px 0}
.alt{background:var(--dark-2);color:var(--cream)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:54px;flex-wrap:wrap}
h2{font-size:clamp(2rem,5vw,3.9rem)}
.section-head p{max-width:380px;color:var(--muted)}
.alt .section-head p{color:var(--muted-d)}
.num{display:inline-block;font-size:.7rem;font-weight:500;letter-spacing:.3em;color:var(--caramel);margin-bottom:16px;border:1.5px solid currentColor;border-radius:999px;padding:5px 14px}
.alt .num{color:var(--oak)}

/* Galerie */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.shot{position:relative;overflow:hidden;border-radius:var(--radius-img);aspect-ratio:4/3;background:linear-gradient(140deg,#c5a77d,#526b70);cursor:zoom-in}
.shot.tall{aspect-ratio:3/4}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s}
.shot:hover img{transform:scale(1.07)}
.shot::after{content:attr(data-label);position:absolute;inset:auto 0 0 0;padding:44px 22px 18px;font-size:.66rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--cream);background:linear-gradient(transparent,rgba(22,32,35,.7));opacity:0;transform:translateY(10px);transition:.5s var(--ease)}
.shot:hover::after{opacity:1;transform:none}
.shot.empty::before{content:"Photo à ajouter";position:absolute;inset:0;display:grid;place-items:center;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(22,32,35,.55)}

/* Cartes (identité) */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.card{background:var(--cream-2);border:1px solid var(--line);border-radius:30px;padding:42px;transition:.5s var(--ease)}
.card:hover{transform:translateY(-8px);box-shadow:0 34px 60px -34px rgba(82,107,112,.6)}
.card h3{font-size:1.5rem;margin-bottom:14px;line-height:1.1}
.card .sub{display:inline-block;color:var(--caramel);font-size:.66rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;margin-bottom:20px}
.card p{color:var(--muted)}
.card ul{margin:18px 0 0 18px;color:var(--muted)}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:20px}
.step{counter-increment:s;border-top:1.5px solid var(--line-d);padding-top:20px}
.step::before{content:"0" counter(s);display:block;font-family:var(--display);font-weight:300;font-size:2.8rem;color:var(--oak);margin-bottom:14px}
.step h3{font-size:1.05rem;letter-spacing:-.02em}
.step p{color:var(--muted-d);font-size:.95rem;margin-top:8px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:70px}
form{display:grid;gap:26px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.field{position:relative}
.field input,.field textarea{width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--line);padding:24px 0 10px;font:inherit;color:var(--ink);outline:0;transition:border-color .3s}
.field textarea{min-height:130px;resize:vertical}
.field label{position:absolute;left:0;top:24px;color:var(--muted);pointer-events:none;transition:.3s var(--ease);font-size:.95rem}
.field input:focus,.field textarea:focus{border-color:var(--caramel)}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{top:0;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--caramel)}
.info{background:var(--dark-2);color:var(--cream);border-radius:30px;padding:42px;align-self:start}
.info h3{font-size:1.5rem;margin-bottom:20px}
.info p{margin-bottom:10px;color:var(--muted-d)}
.info a:hover{color:var(--oak)}
.note{font-size:.85rem;color:var(--muted);min-height:1.2em}

/* Footer */
footer{background:var(--dark);color:var(--cream);padding:70px 0 36px;position:relative;z-index:2}
.foot{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:center}
.foot .brand{font-size:1rem;letter-spacing:0;text-transform:none}
.foot .links{display:flex;gap:28px;font-size:.68rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase}
.foot a:hover{color:var(--oak)}
.legal{margin-top:44px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-d);opacity:.7}

/* Lightbox */
.lb{position:fixed;inset:0;background:rgba(22,32,35,.95);display:grid;place-items:center;z-index:300;opacity:0;pointer-events:none;transition:opacity .4s}
.lb.open{opacity:1;pointer-events:auto}
.lb img{max-height:86vh;max-width:90vw;border-radius:var(--radius-img)}
.lb button{position:absolute;background:none;border:0;font-size:2.2rem;color:var(--cream);cursor:pointer;padding:20px}
.lb .x{top:10px;right:14px}.lb .p{left:10px}.lb .n{right:10px}

/* Apparitions */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.hero .eyebrow,.hero h1,.hero .lead,.hero .btn,.page-hero .eyebrow,.page-hero h1,.page-hero .lead{animation:rise 1.2s var(--ease) backwards}
.hero h1,.page-hero h1{animation-delay:.1s}.hero .lead,.page-hero .lead{animation-delay:.25s}.hero .btn{animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* Responsive */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .cards,.contact-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .burger{display:block;z-index:95}
  .nav ul{position:fixed;inset:0;background:var(--dark);color:var(--cream);flex-direction:column;justify-content:center;align-items:center;gap:14px;opacity:0;pointer-events:none;transition:.4s}
  .nav ul.open{opacity:1;pointer-events:auto}
  .nav a.link{font-size:.9rem}
  .hero::after,.page-hero::after{width:130%;right:-45%}
}
@media (max-width:560px){.grid,.grid.two,.row{grid-template-columns:1fr}section{padding:84px 0}.card,.info{padding:30px}}

/* ===== Version LIGHT : marrons éclaircis, fonds sable/chêne clair ===== */
:root{
  --cream:#faf8f3;
  --cream-2:#fdfcf9;
  --sand:#e6ecec;
  --sand-2:#b9c9ce;
  --oak:#c5a77d;
  --caramel:#526b70;
  --muted:#5b6c70;
  --line:color-mix(in srgb,var(--ink) 18%,transparent);
  --sun:#ddb46e;  /* accent sur la photo d'accueil */
  --veil:.42;     /* voile sur la photo d'accueil (0 à .8) */
}
.site-header{color:var(--ink)}
.site-header.scrolled{background:color-mix(in srgb,var(--cream) 90%,transparent)}
.nav a.link:hover{background:color-mix(in srgb,var(--oak) 28%,transparent)}
.nav a.link.active{background:var(--ink);color:var(--cream)}
.hero,.page-hero{color:var(--ink);
  background:radial-gradient(900px 520px at 85% 15%,color-mix(in srgb,var(--oak) 38%,transparent),transparent 62%),linear-gradient(165deg,var(--cream),color-mix(in srgb,var(--sand-2) 45%,var(--cream)))}
.hero::after,.page-hero::after{opacity:.8;box-shadow:0 40px 80px -36px rgba(82,107,112,.55)}
.eyebrow{color:var(--caramel)}
h1 em{color:var(--caramel)}
.hero .lead,.page-hero .lead,.alt .lead{color:var(--muted)}
.hero .btn.solid,.alt .btn.solid{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.hero .btn.solid:hover,.alt .btn.solid:hover{background:var(--oak);border-color:var(--oak);color:var(--ink)}
.alt{background:var(--sand);color:var(--ink)}
.alt .section-head p,.step p{color:var(--muted)}
.alt .num{color:var(--caramel)}
.step{border-top-color:var(--line)}
.step::before{color:var(--caramel)}
.info{background:var(--sand);color:var(--ink)}
.info p{color:var(--muted)}
.info a:hover,.foot a:hover{color:var(--caramel)}
footer{background:var(--sand-2);color:var(--ink)}
.legal{color:var(--muted);opacity:1}
.shot::after{background:linear-gradient(transparent,color-mix(in srgb,var(--ink) 60%,transparent))}
.shot.empty::before{color:rgba(30,42,45,.5)}
@media (max-width:900px){.nav ul{background:var(--cream);color:var(--ink)}}

/* ===== Galeries dynamiques ===== */
.grid.masonry{display:block;columns:3;column-gap:16px}
.grid.masonry .shot{break-inside:avoid;margin-bottom:16px;aspect-ratio:auto}
.single{margin-top:26px}
.single .shot{aspect-ratio:auto}
.single .shot img{height:auto}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.lb.single .p,.lb.single .n{display:none}
.note{min-height:1.4em}
@media (max-width:900px){.grid.masonry{columns:2}}
@media (max-width:560px){.grid.masonry{columns:1}}

/* Mentions légales */
.legal a{text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--oak)}
.doc-wrap{padding:70px 0 120px}
.doc{max-width:860px;display:grid;gap:28px}
.doc-sec{background:rgba(255,255,255,.45);border:1px solid var(--line,rgba(30,42,45,.14));border-radius:var(--radius);padding:clamp(28px,5vw,52px);scroll-margin-top:110px}
.doc-head{display:flex;align-items:baseline;gap:18px;margin-bottom:30px;padding-bottom:22px;border-bottom:1px solid rgba(30,42,45,.14)}
.doc-head .num{font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--oak)}
.doc h2{font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.15}
.doc h3{font-size:.9rem;letter-spacing:.04em;margin:42px 0 14px}
.doc h3:first-of-type{margin-top:30px}
.doc p,.doc li{color:var(--muted);font-size:1rem;line-height:1.85}
.doc p{margin-bottom:18px}
.doc p:last-child{margin-bottom:0}
.doc ul{list-style:none;padding:0;display:grid;gap:16px}
.doc li{padding-left:22px;position:relative}
.doc li::before{content:"";position:absolute;left:0;top:.8em;width:8px;height:8px;border-radius:50%;background:var(--oak)}
.doc strong{color:var(--ink);font-weight:500}
.doc dl{display:grid;grid-template-columns:minmax(170px,max-content) 1fr;margin:0}
.doc dt,.doc dd{padding:16px 0;border-bottom:1px solid rgba(30,42,45,.1);line-height:1.6}
.doc dt{font-weight:500;color:var(--ink);padding-right:28px}
.doc dd{color:var(--muted)}
.doc dl > :nth-last-child(-n+2){border-bottom:0}
.doc dl + p{margin-top:24px}
.doc a{text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.doc a:hover{color:var(--oak)}
.doc .todo{background:#ffe8a3;color:#5a3d00;padding:2px 8px;border-radius:4px}
.doc-date{text-align:center;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:20px}
@media (max-width:560px){
  .doc dl{grid-template-columns:1fr}
  .doc dt{padding:16px 0 2px;border-bottom:0}
  .doc dd{padding:0 0 16px}
  .doc-head{gap:12px;margin-bottom:22px}
}
.consent{font-size:.78rem;color:var(--muted);margin-top:14px;max-width:520px}
.consent a{text-decoration:underline}

/* Accueil : rangée en fondu + « Voir la suite » */
.shot[hidden]{display:none}
.shot.faded{-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 92%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 92%);cursor:pointer}
.shot.faded:hover img{transform:none}
.shot.faded::after{display:none}
.more-wrap{display:flex;justify-content:center;margin-top:-64px;position:relative;z-index:3}
.more-wrap[hidden]{display:none}
.more{display:inline-flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;cursor:pointer;color:inherit;font-family:var(--sans);font-size:.68rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;padding:8px 16px}
.more i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1.5px solid currentColor;font-style:normal;font-size:1.1rem;letter-spacing:0;background:var(--cream);transition:.4s var(--ease);animation:nudge 2.4s var(--ease) infinite}
.more:hover i{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.alt .more i{background:transparent}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* Bandeau d'accueil avec photo de fond (choisie dans l'admin : galerie « Accueil · photo de fond ») */
.hero.has-photo{color:var(--cream);background:var(--dark) var(--hero-sm) center/cover no-repeat}
@media (min-width:900px){.hero.has-photo{background-image:var(--hero-lg)}}
.hero.has-photo::after{display:none}
.hero.has-photo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(0,0,0,var(--veil)) 0%,rgba(0,0,0,calc(var(--veil) * .48)) 45%,rgba(0,0,0,calc(var(--veil) * .14)) 80%),linear-gradient(to top,rgba(0,0,0,calc(var(--veil) * .62)),transparent 30%)}
.hero.has-photo .eyebrow,.hero.has-photo h1 em{color:var(--sun)}
.hero.has-photo .eyebrow,.hero.has-photo .lead{text-shadow:0 1px 14px rgba(0,0,0,.45)}
.hero.has-photo .lead{color:#e8eef0}
.hero.has-photo h1{text-shadow:0 2px 34px rgba(0,0,0,.35)}
.hero.has-photo .btn.solid{background:var(--sun);border-color:var(--sun);color:var(--dark)}
.hero.has-photo .btn.solid:hover{background:var(--cream);border-color:var(--cream);color:var(--dark)}
body:has(.hero.has-photo) .site-header:not(.scrolled){color:var(--cream)}
body:has(.hero.has-photo) .site-header:not(.scrolled){text-shadow:0 1px 10px rgba(0,0,0,.35)}
body:has(.hero.has-photo) .site-header:not(.scrolled) .nav a.link.active{background:var(--sun);color:var(--dark);text-shadow:none}
@media (max-width:900px){body:has(.hero.has-photo) .site-header:not(.scrolled) .nav ul{color:var(--ink);text-shadow:none}}
/* Titre derrière le sujet : calque détouré (galerie « premier plan détouré ») posé au-dessus du titre,
   avec le même cadrage (cover) et le même voile que le fond pour se fondre sans raccord */
.hero.has-fg .wrap{z-index:auto}
.hero.has-fg h1{position:relative;z-index:2}
.hero.has-fg .eyebrow,.hero.has-fg .lead,.hero.has-fg .btn{position:relative;z-index:4}
.hero-fg{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,rgba(0,0,0,var(--veil)) 0%,rgba(0,0,0,calc(var(--veil) * .48)) 45%,rgba(0,0,0,calc(var(--veil) * .14)) 80%),linear-gradient(to top,rgba(0,0,0,calc(var(--veil) * .62)),transparent 30%),var(--fg-lg) center/cover no-repeat;
  -webkit-mask:var(--fg-lg) center/cover no-repeat;mask:var(--fg-lg) center/cover no-repeat}
/* Mobile : cadrage horizontal réglable (admin → Couleurs), identique pour la photo et le détourage pour rester alignés */
@media (max-width:899px){
  .hero.has-photo{background-position:var(--hero-x,50%) 50%}
  .hero-fg{background-image:linear-gradient(100deg,rgba(0,0,0,var(--veil)) 0%,rgba(0,0,0,calc(var(--veil) * .48)) 45%,rgba(0,0,0,calc(var(--veil) * .14)) 80%),linear-gradient(to top,rgba(0,0,0,calc(var(--veil) * .62)),transparent 30%),var(--fg-sm);
    background-position:var(--hero-x,50%) 50%;-webkit-mask-image:var(--fg-sm);mask-image:var(--fg-sm);-webkit-mask-position:var(--hero-x,50%) 50%;mask-position:var(--hero-x,50%) 50%}
}
/* Parallaxe sur mobile : animation liée au défilement, calculée par le navigateur (fluide, sans JavaScript) */
@supports (animation-timeline:scroll()){
  @media (max-width:900px),(hover:none){
    @media (prefers-reduced-motion:no-preference){
      .hero .eyebrow,.hero h1,.hero .lead,.hero .btn{animation:rise 1.2s var(--ease) backwards,par-1 linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100svh}
      .hero h1{animation-name:rise,par-2;animation-delay:.1s,0s}
      .hero .lead{animation-name:rise,par-3;animation-delay:.25s,0s}
      .hero .btn{animation-name:rise,par-3;animation-delay:.4s,0s}
    }
  }
}
@keyframes par-1{to{translate:0 28svh}}
@keyframes par-2{to{translate:0 36svh}}
@keyframes par-3{to{translate:0 44svh}}

/* ===== Car spotting : cartes à collectionner ===== */
.spot{padding-top:40px}
.spot-bar{display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;align-items:center;margin-bottom:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 .66rem var(--sans);letter-spacing:.22em;text-transform:uppercase;padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:.3s var(--ease)}
.chip:hover{border-color:var(--caramel)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.chip.r-rare::before,.chip.r-epique::before,.chip.r-legendaire::before,.chip.r-commune::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px;background:var(--rc)}
.spot-sel{display:flex;gap:10px;flex-wrap:wrap}
.spot-sel select{font:500 .8rem var(--sans);padding:10px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--cream-2);color:var(--ink);cursor:pointer}
.spot-count{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:30px}
.spot-empty{margin-inline:auto;text-align:center}
.spot-legal{margin-top:60px;text-align:center;font-size:.8rem;color:var(--muted)}
.spot-legal a{text-decoration:underline;text-underline-offset:3px}

.r-commune{--rc:#93a4a8;--f1:#dce4e6;--f2:#93a4a8;--f3:#eef2f3}
.r-rare{--rc:#4f78a8;--f1:#9fc0e6;--f2:#2f5687;--f3:#c9dcf2}
.r-epique{--rc:#8657b8;--f1:#c9a6ee;--f2:#55307f;--f3:#e2cff7}
.r-legendaire{--rc:#c99a2e;--f1:#f8e2a0;--f2:#b07f1f;--f3:#fff1c4}

.tcg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:34px 26px;perspective:1400px}
.tcg{--mx:50%;--my:50%;--rx:0deg;--ry:0deg;position:relative;aspect-ratio:63/88;border-radius:14px;padding:9px;
  background:linear-gradient(145deg,var(--f1),var(--f2) 45%,var(--f3) 70%,var(--f2));
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 18px 40px -22px rgba(22,32,35,.65);
  transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s var(--ease),box-shadow .5s;will-change:transform}
.tcg.live{transition:transform .08s linear,box-shadow .3s;box-shadow:0 30px 60px -24px rgba(22,32,35,.75);z-index:3}
.tcg-in{position:relative;height:100%;display:flex;flex-direction:column;gap:7px;border-radius:8px;padding:10px 11px 9px;overflow:hidden;
  background:linear-gradient(180deg,#fdfcf9,#eef2f3);color:var(--ink);box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.tcg-top{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.tcg-name{font:700 1.02rem/1.15 var(--display);letter-spacing:-.01em;min-width:0}
.tcg-name small{display:block;font:500 .58rem var(--sans);letter-spacing:.24em;color:var(--muted);margin-bottom:2px}
.tcg-hp{font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--caramel)}
.tcg-hp b{font:700 1.3rem var(--display);color:var(--ink)}
.tcg-art{position:relative;flex:1 1 0;min-height:42%;border-radius:3px;overflow:hidden;cursor:zoom-in;
  box-shadow:0 0 0 2px var(--f2),0 0 0 3px var(--f3)}
.tcg-art img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.tcg:hover .tcg-art img{transform:scale(1.04)}
.tcg-type{font-size:.62rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;
  padding:3px 0;border-block:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcg-stats{list-style:none;display:grid;gap:5px}
.tcg-stats li{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:8px;font-size:.66rem}
.tcg-stats span{color:var(--muted);letter-spacing:.04em}
.tcg-stats b{font-weight:600;font-variant-numeric:tabular-nums}
.tcg-stats i{height:5px;border-radius:5px;background:rgba(30,42,45,.12);position:relative;overflow:hidden}
.tcg-stats i::after{content:"";position:absolute;inset:0;width:calc(var(--v)*100%);border-radius:inherit;background:linear-gradient(90deg,var(--f2),var(--rc))}
.tcg-note{font-size:.68rem;line-height:1.45;font-style:italic;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tcg-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tcg-rar{color:var(--rc);font-weight:600;white-space:nowrap}
.tcg-spot{flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcg-num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Reflets : brillance qui suit le pointeur, holographie selon la rareté */
.tcg-shine,.tcg-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;transition:opacity .4s}
.tcg-glare{background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.55),transparent 42%);mix-blend-mode:soft-light;opacity:0}
.tcg.live .tcg-glare{opacity:1}
.tcg-shine{opacity:0;mix-blend-mode:color-dodge;background-size:240% 240%;background-position:var(--mx) var(--my);
  background-image:repeating-linear-gradient(115deg,#ff7a7a 0%,#ffd76a 7%,#8dff9b 14%,#6ad8ff 21%,#b48cff 28%,#ff7a7a 35%)}
.r-rare.live .tcg-shine{opacity:.18}
.r-epique.live .tcg-shine{opacity:.32}
.r-legendaire .tcg-shine{opacity:.16;animation:foil 7s linear infinite}
.r-legendaire.live .tcg-shine{opacity:.45;animation:none}
@keyframes foil{from{background-position:0% 50%}to{background-position:240% 50%}}
.r-legendaire .tcg-in{background:linear-gradient(180deg,#24353a,#162023);color:var(--cream);box-shadow:0 0 0 1px rgba(248,226,160,.35)}
.r-legendaire .tcg-name small,.r-legendaire .tcg-type,.r-legendaire .tcg-stats span,.r-legendaire .tcg-note,.r-legendaire .tcg-foot{color:#b9c9ce}
.r-legendaire .tcg-hp b{color:var(--cream)}
.r-legendaire .tcg-hp{color:#f8e2a0}
.r-legendaire .tcg-type{border-color:rgba(248,226,160,.25)}
.r-legendaire .tcg-stats i{background:rgba(248,226,160,.14)}
.r-legendaire .tcg-rar{color:#f8e2a0}
@media (max-width:560px){.tcg-grid{grid-template-columns:minmax(0,340px);justify-content:center}}
@media (prefers-reduced-motion:reduce){.tcg{transform:none!important}}
/* Menu à 5 entrées : pas de retour à la ligne sur les écrans moyens */
.nav a.link{white-space:nowrap}
@media (min-width:901px) and (max-width:1240px){.nav ul{gap:2px}.nav a.link{letter-spacing:.14em;padding:9px 11px}.brand{font-size:.95rem}}
.hero .btn,.page-hero .btn{transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease)} /* pas de retard sur la parallaxe */
/* Mobile / tactile : effets coûteux retirés pour un défilement fluide.
   Sans backdrop-filter, le menu plein écran (position:fixed) n'est plus enfermé dans l'en-tête et garde son fond */
@media (max-width:900px),(hover:none){
  body::after{display:none}
  .site-header.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--cream)}
  .site-header{transition:background .3s,color .3s,box-shadow .3s}
  .tcg{will-change:auto}
  .nav .brand{position:relative;z-index:95}
}
.tcg-engine{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.66rem;padding:5px 2px 0}
.tcg-engine span{color:var(--muted);letter-spacing:.04em}
.tcg-engine b{font-weight:600;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-legendaire .tcg-engine span{color:#b9c9ce}
.r-legendaire .tcg-engine b{color:#f8e2a0}
/* Carte agrandie */
.tcg-grid .tcg{cursor:zoom-in}
.tcg-grid .tcg:focus-visible{outline:3px solid var(--caramel);outline-offset:4px}
.tcg-modal{position:fixed;inset:0;z-index:250;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;
  background:color-mix(in srgb,var(--dark) 88%,transparent);opacity:0;transition:opacity .25s}
.tcg-modal.open{opacity:1}
.tcg-modal[hidden]{display:none}
.tcg-stage{perspective:1400px;transform:scale(.94);transition:transform .3s var(--ease)}
.tcg-modal.open .tcg-stage{transform:none}
.tcg.big{width:300px}
.tcg.big .tcg-art{cursor:zoom-in}
.tcg-close{position:absolute;top:10px;right:14px;background:none;border:0;color:var(--cream);font-size:2.4rem;line-height:1;padding:8px 14px;cursor:pointer}
.tcg-hint{color:var(--cream);opacity:.7;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
html.modal-open{overflow:hidden}