/* =========================================================
   J.GOUEZ PHOTO — feuille de style unique
   Palette : noir profond / cyan instrument / glace
   ========================================================= */

:root{
  --void:#050607;
  --carbon:#0b0e10;
  --graphite:#14181b;
  --ice:#e9f1f3;
  --mute:#7e8a8f;
  --cyan:#16c8d6;
  --cyan-deep:#0a7f8c;
  --line:rgba(233,241,243,.10);
  --line-strong:rgba(233,241,243,.22);
  --display:"Saira Condensed","Arial Narrow",sans-serif;
  --text:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(20px,5vw,72px);
  --shell:1340px;
  --head:72px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head) + 20px);
}

body{
  margin:0;
  background:var(--void);
  color:var(--ice);
  font-family:var(--text);
  font-size:16px;
  line-height:1.65;
  font-weight:380;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

body.no-scroll{overflow:hidden}

img{max-width:100%;display:block}

a{color:inherit;text-decoration:none}

button,input,select,textarea{
  font:inherit;
  color:inherit;
}

::selection{
  background:var(--cyan);
  color:#001315;
}

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Trame de fond : légère lueur cyan, façon logo ---------- */

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(120% 70% at 50% -20%, rgba(22,200,214,.16), transparent 60%),
    radial-gradient(90% 60% at 0% 100%, rgba(10,127,140,.10), transparent 65%);
}

/* =========================================================
   STRUCTURE
   ========================================================= */

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
  position:relative;
  z-index:1;
}

.section{
  padding-block:clamp(72px,10vw,140px);
  position:relative;
  z-index:1;
}

.section--tight{
  padding-block:clamp(52px,7vw,90px);
}

/* =========================================================
   TYPOGRAPHIE
   ========================================================= */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:.94;
  letter-spacing:.005em;
  margin:0;
  text-transform:uppercase;
}

.h-xl{
  font-size:clamp(3.1rem,12.5vw,9.5rem);
  font-weight:700;
  letter-spacing:-.012em;
}

.h-lg{
  font-size:clamp(2.3rem,7vw,4.6rem);
}

.h-md{
  font-size:clamp(1.7rem,4vw,2.7rem);
}

.h-sm{
  font-size:clamp(1.25rem,2.4vw,1.6rem);
}

p{
  margin:0 0 1.05em;
  max-width:66ch;
}

p:last-child{
  margin-bottom:0;
}

.lead{
  font-size:clamp(1.02rem,1.6vw,1.22rem);
  color:#c6d3d7;
  line-height:1.62;
  max-width:58ch;
}

.muted{color:var(--mute)}

.small{
  font-size:.86rem;
  line-height:1.6;
}

/* Sur-titre discret */

.kicker{
  font-family:var(--text);
  font-size:.8rem;
  font-weight:500;
  color:var(--cyan);
  letter-spacing:.02em;
  margin:0 0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  text-transform:none;
}

.kicker::before{
  content:"";
  width:26px;
  height:1px;
  background:var(--cyan);
  flex:none;
}

/* =========================================================
   HEADER
   ========================================================= */

.head{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--head);
  z-index:90;
  display:flex;
  align-items:center;
  transition:
    background .4s var(--ease),
    border-color .4s var(--ease),
    backdrop-filter .4s;
  border-bottom:1px solid transparent;
}

.head.is-stuck{
  background:rgba(5,6,7,.78);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}

.head__in{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex:none;
}

.brand img{
  height:34px;
  width:auto;
}

.brand__fallback{
  font-family:var(--display);
  font-size:1.35rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.nav{
  display:flex;
  align-items:center;
  gap:clamp(18px,2.4vw,34px);
}

.nav a{
  font-size:.93rem;
  font-weight:450;
  color:#b9c6ca;
  position:relative;
  padding-block:6px;
  transition:color .25s var(--ease);
}

.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:1px;
  width:0;
  background:var(--cyan);
  transition:width .35s var(--ease);
}

.nav a:hover{
  color:var(--ice);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after{
  width:100%;
}

.nav a[aria-current="page"]{
  color:var(--ice);
}

.burger{
  display:none;
  width:44px;
  height:44px;
  background:none;
  border:1px solid var(--line-strong);
  border-radius:2px;
  cursor:pointer;
  position:relative;
  flex:none;
}

.burger span{
  position:absolute;
  left:12px;
  right:12px;
  height:1.5px;
  background:var(--ice);
  transition:transform .35s var(--ease),opacity .2s;
}

.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:21.5px}
.burger span:nth-child(3){top:27px}

.burger[aria-expanded="true"] span:nth-child(1){
  transform:translateY(5.5px) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}

.burger[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-5.5px) rotate(-45deg);
}

/* Panneau mobile */

.drawer{
  position:fixed;
  inset:0;
  z-index:85;
  background:rgba(5,6,7,.97);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:var(--head) var(--gutter) 40px;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .55s var(--ease);
  pointer-events:none;
}

.drawer.is-open{
  clip-path:inset(0 0 0 0);
  pointer-events:auto;
}

.drawer a{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(2rem,9vw,3rem);
  line-height:1.16;
  padding-block:8px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  opacity:0;
  transform:translateY(14px);
  transition:
    opacity .4s var(--ease),
    transform .4s var(--ease),
    color .25s;
}

.drawer.is-open a{
  opacity:1;
  transform:none;
  transition-delay:calc(.08s * var(--i,0) + .12s);
}

.drawer a:hover,
.drawer a[aria-current="page"]{
  color:var(--cyan);
}

.drawer a small{
  font-family:var(--text);
  font-size:.72rem;
  color:var(--mute);
  text-transform:none;
  letter-spacing:.02em;
}

/* =========================================================
   BOUTONS
   ========================================================= */

.btn{
  --bg:transparent;
  --fg:var(--ice);
  --bd:var(--line-strong);

  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:14px 26px;
  background:var(--bg);
  color:var(--fg);
  border:1px solid var(--bd);
  border-radius:2px;
  font-size:.92rem;
  font-weight:500;
  letter-spacing:.01em;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:
    color .3s var(--ease),
    border-color .3s var(--ease),
    background .3s var(--ease);
}

.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--cyan);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .42s var(--ease);
  z-index:0;
}

.btn:hover{
  border-color:var(--cyan);
  color:#001315;
}

.btn:hover::before{
  transform:scaleX(1);
}

.btn span{
  position:relative;
  z-index:1;
}

.btn--solid{
  --bg:var(--cyan);
  --fg:#001315;
  --bd:var(--cyan);
}

.btn--solid::before{
  background:var(--ice);
}

.btn--solid:hover{
  color:#001315;
  border-color:var(--ice);
}

.btn--ghost{
  --bd:var(--line);
}

.btns{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:32px;
}

/* Lien texte souligné */

.link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--cyan);
  font-weight:500;
  font-size:.94rem;
  border-bottom:1px solid rgba(22,200,214,.35);
  padding-bottom:3px;
  transition:border-color .3s,gap .3s var(--ease);
}

.link:hover{
  border-color:var(--cyan);
  gap:14px;
}

/* =========================================================
   HERO — ouverture d'obturateur, composition centrée
   ========================================================= */

.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:calc(var(--head) + 40px) var(--gutter) clamp(76px,13vh,130px);
  overflow:hidden;
  isolation:isolate;
}

.hero__media{
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(180deg,#0a1214,#050607 70%);
}

.hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.12);
  animation:heroIn 3.2s var(--ease) .35s forwards;
}

@keyframes heroIn{
  to{
    opacity:.55;
    transform:scale(1);
  }
}

.hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(58% 48% at 50% 48%,rgba(5,6,7,.82),rgba(5,6,7,.35) 70%,transparent 100%),
    linear-gradient(to top,var(--void) 2%,transparent 34%),
    linear-gradient(to bottom,rgba(5,6,7,.75) 0%,transparent 30%);
}

/* ---------- Rideau d'ouverture ---------- */

.shutter{
  position:fixed;
  inset:0;
  z-index:95;
  pointer-events:none;
  animation:shutterOff 0s linear 1.9s forwards;
}

@keyframes shutterOff{
  to{visibility:hidden}
}

.shutter i{
  position:absolute;
  left:0;
  right:0;
  height:50.2%;
  background:var(--void);
  will-change:transform;
}

.shutter i:first-child{
  top:0;
  animation:shutUp 1.35s cubic-bezier(.76,0,.18,1) .58s forwards;
}

.shutter i:last-child{
  bottom:0;
  animation:shutDown 1.35s cubic-bezier(.76,0,.18,1) .58s forwards;
}

@keyframes shutUp{
  to{transform:translateY(-100%)}
}

@keyframes shutDown{
  to{transform:translateY(100%)}
}

.shutter i::after{
  content:"";
  position:absolute;
  left:50%;
  width:0;
  height:2px;
  transform:translateX(-50%);
  background:linear-gradient(
    90deg,
    transparent,
    var(--cyan) 20%,
    var(--cyan) 80%,
    transparent
  );
  box-shadow:
    0 0 24px 3px rgba(22,200,214,.65),
    0 0 60px 10px rgba(22,200,214,.25);
  animation:
    seamOpen .7s var(--ease) .1s forwards,
    seamRide 1.35s cubic-bezier(.76,0,.18,1) .58s forwards;
}

.shutter i:first-child::after{
  bottom:-1px;
}

.shutter i:last-child::after{
  top:-1px;
}

@keyframes seamOpen{
  to{width:min(70vw,620px)}
}

@keyframes seamRide{
  0%{
    opacity:1;
    filter:blur(0);
  }

  55%{
    opacity:.9;
    filter:blur(.5px);
  }

  100%{
    opacity:0;
    filter:blur(3px);
    width:min(70vw,620px);
  }
}

/* ---------- Contenu centré ---------- */

.hero__in{
  max-width:900px;
  margin-inline:auto;
  position:relative;
  z-index:1;
}

.hero__title{
  opacity:0;
  filter:blur(16px);
  transform:scale(1.05);
  animation:focusIn 1.4s var(--ease) 1.15s forwards;
  will-change:filter,transform;
}

.hero__title span{
  display:block;
}

@keyframes focusIn{
  to{
    opacity:1;
    filter:blur(0);
    transform:none;
  }
}

.hero__line{
  width:0;
  height:1px;
  margin:clamp(22px,3vw,32px) auto;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  animation:lineOpen 1.1s var(--ease) 1.75s forwards;
}

@keyframes lineOpen{
  to{width:min(320px,62vw)}
}

.hero__sub{
  margin-inline:auto;
  opacity:0;
  animation:softUp 1s var(--ease) 1.95s forwards;
}

.hero .btns{
  justify-content:center;
  opacity:0;
  animation:softUp 1s var(--ease) 2.15s forwards;
}

@keyframes softUp{
  from{
    opacity:0;
    transform:translateY(10px);
  }

  to{
    opacity:1;
    transform:none;
  }
}

.hero__scroll{
  position:absolute;
  left:50%;
  bottom:clamp(30px,6vh,58px);
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  font-size:.72rem;
  color:var(--mute);
  opacity:0;
  animation:softUp 1s var(--ease) 2.45s forwards;
}

.hero__scroll i{
  display:block;
  width:1px;
  height:46px;
  background:linear-gradient(to bottom,var(--cyan),transparent);
  transform-origin:top;
  animation:pulseDown 2.6s ease-in-out 3.4s infinite;
}

@keyframes pulseDown{
  0%,100%{
    transform:scaleY(1);
    opacity:1;
  }

  50%{
    transform:scaleY(.55);
    opacity:.5;
  }
}

/* =========================================================
   RÉVÉLATION AU SCROLL
   ========================================================= */

[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:calc(90ms * var(--d,0));
}

[data-reveal].is-in{
  opacity:1;
  transform:none;
}

/* =========================================================
   BLOCS DE CONTENU
   ========================================================= */

.rule{
  height:1px;
  background:linear-gradient(
    90deg,
    var(--cyan),
    rgba(22,200,214,.05) 42%,
    transparent
  );
  border:0;
  margin:0;
}

.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,6vw,90px);
  align-items:center;
}

.split--text{
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:start;
}

.frame{
  position:relative;
  border:1px solid var(--line);
  background:var(--graphite);
  overflow:hidden;
  aspect-ratio:4/3;
}

.frame img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.frame--tall{
  aspect-ratio:3/4;
}

/* cartes services / offres */

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}

.card{
  background:var(--carbon);
  padding:clamp(26px,3.4vw,40px);
  display:flex;
  flex-direction:column;
  gap:12px;
  position:relative;
  transition:background .4s var(--ease);
}

.card:hover{
  background:#101619;
}

.card h3{
  font-size:1.5rem;
}

.card p{
  font-size:.94rem;
  color:#aab6ba;
  margin:0;
}

.card__price{
  margin-top:auto;
  padding-top:18px;
  font-family:var(--display);
  font-size:1.1rem;
  color:var(--cyan);
  letter-spacing:.03em;
}

/* Bandeau devis */

.quote{
  border:1px solid var(--line-strong);
  background:
    linear-gradient(135deg,rgba(22,200,214,.07),transparent 58%),
    var(--carbon);
  padding:clamp(30px,5vw,58px);
  display:grid;
  grid-template-columns:minmax(0,1.3fr) auto;
  gap:32px;
  align-items:center;
}

/* Liste d'événements */

.events{
  border-top:1px solid var(--line);
}

.event{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:20px;
  align-items:center;
  padding:clamp(22px,3vw,34px) 0;
  border-bottom:1px solid var(--line);
  transition:
    padding-left .4s var(--ease),
    background .4s var(--ease);
}

.event:hover{
  padding-left:16px;
}

.event h3{
  font-size:clamp(1.5rem,3.4vw,2.2rem);
}

.event__meta{
  font-size:.84rem;
  color:var(--mute);
  margin-top:8px;
}

.event__count{
  font-family:var(--display);
  font-size:1.4rem;
  color:var(--cyan);
  white-space:nowrap;
}

/* =========================================================
   GALERIE
   ========================================================= */

.toolbar{
  position:sticky;
  top:var(--head);
  z-index:40;
  background:rgba(5,6,7,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-block:1px solid var(--line);
  padding-block:16px;
}

.toolbar__in{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  justify-content:space-between;
}

.search{
  position:relative;
  flex:1 1 300px;
  max-width:420px;
}

.search input{
  width:100%;
  background:var(--graphite);
  border:1px solid var(--line-strong);
  border-radius:2px;
  padding:13px 44px 13px 16px;
  font-size:.95rem;
  transition:border-color .3s;
}

.search input::placeholder{
  color:#63706f;
}

.search input:focus{
  border-color:var(--cyan);
  outline:none;
}

.search__clear{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  background:none;
  border:0;
  color:var(--mute);
  cursor:pointer;
  font-size:1.1rem;
  line-height:1;
  display:none;
}

.search__clear.is-on{
  display:block;
}

.search__clear:hover{
  color:var(--cyan);
}

.chips{
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:2px;
  -webkit-overflow-scrolling:touch;
}

.chips::-webkit-scrollbar{
  display:none;
}

.chip{
  flex:none;
  padding:10px 18px;
  background:transparent;
  border:1px solid var(--line-strong);
  border-radius:100px;
  font-size:.86rem;
  color:#b9c6ca;
  cursor:pointer;
  white-space:nowrap;
  transition:all .3s var(--ease);
}

.chip:hover{
  border-color:var(--cyan);
  color:var(--ice);
}

.chip[aria-pressed="true"] .muted{
  color:rgba(0,19,21,.6);
}

.chip[aria-pressed="true"]{
  background:var(--cyan);
  border-color:var(--cyan);
  color:#001315;
  font-weight:500;
}

.count{
  font-size:.82rem;
  color:var(--mute);
  flex:none;
}

.count b{
  color:var(--ice);
  font-weight:500;
}

.grid{
  column-width:270px;
  column-gap:clamp(12px,1.6vw,22px);
  margin-top:clamp(24px,4vw,44px);
}

.tile{
  position:relative;
  border:1px solid var(--line);
  background:var(--graphite);
  overflow:hidden;
  cursor:pointer;
  padding:0;
  width:100%;
  min-height:140px;
  text-align:left;
  display:inline-block;
  break-inside:avoid;
  margin-bottom:clamp(12px,1.6vw,22px);
  animation:tileIn .5s var(--ease) both;
}

@keyframes tileIn{
  from{
    opacity:0;
    transform:translateY(12px);
  }

  to{
    opacity:1;
    transform:none;
  }
}

.tile img{
  width:100%;
  height:auto;
  display:block;
  transition:transform .8s var(--ease),filter .5s;
  filter:saturate(.92);
}

/* Accueil : l'aperçu garde la grille d'origine (vignettes 3/2, recadrées) */

#grid[data-limit]{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:clamp(12px,1.6vw,22px);
}

#grid[data-limit] .tile{
  display:block;
  aspect-ratio:3/2;
  break-inside:auto;
  margin-bottom:0;
  min-height:0;
}

#grid[data-limit] .tile img{
  height:100%;
  object-fit:cover;
}

.tile:hover img,
.tile:focus-visible img{
  transform:scale(1.05);
  filter:saturate(1.06);
}

.tile__cap{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:26px 16px 14px;
  background:linear-gradient(to top,rgba(5,6,7,.92),transparent);
  transform:translateY(8px);
  opacity:0;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}

.tile:hover .tile__cap,
.tile:focus-visible .tile__cap{
  opacity:1;
  transform:none;
}

.tile__cap strong{
  display:block;
  font-size:.98rem;
  font-weight:500;
}

.tile__cap span{
  font-size:.78rem;
  color:var(--cyan);
}

@media (hover:none){
  .tile__cap{
    opacity:1;
    transform:none;
  }
}

.empty{
  border:1px dashed var(--line-strong);
  padding:clamp(40px,7vw,80px);
  text-align:center;
  margin-top:40px;
}

.empty h3{
  font-size:1.6rem;
  margin-bottom:12px;
}

/* =========================================================
   VISIONNEUSE — IMAGE EN GRAND
   ========================================================= */

.viewer{
  position:fixed;
  inset:0;
  z-index:100;

  background:rgba(4,5,6,.97);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  display:flex;
  align-items:center;
  justify-content:center;

  padding:clamp(14px,3vw,48px);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .3s var(--ease),
    visibility .3s var(--ease);
}

.viewer.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.viewer__img{
  display:block;

  width:auto;
  height:auto;

  max-width:90vw;
  max-height:85svh;

  object-fit:contain;

  border:1px solid var(--line);

  box-shadow:0 20px 80px rgba(0,0,0,.55);
}

.viewer__cap{
  position:absolute;
  left:0;
  right:0;
  bottom:clamp(16px,3vw,34px);

  text-align:center;

  padding-inline:60px;

  pointer-events:none;
}

.viewer__cap strong{
  display:block;
  font-family:var(--display);
  font-size:1.5rem;
  text-transform:uppercase;
  letter-spacing:.02em;
}

.viewer__cap span{
  display:block;
  font-size:.82rem;
  color:var(--cyan);
  margin-top:4px;
}

.viewer__btn{
  position:absolute;
  z-index:2;

  width:50px;
  height:50px;

  display:grid;
  place-items:center;

  background:rgba(11,14,16,.75);

  border:1px solid var(--line-strong);
  border-radius:50%;

  color:var(--ice);

  cursor:pointer;

  font-size:1.2rem;

  transition:
    background .3s var(--ease),
    border-color .3s var(--ease),
    color .3s var(--ease),
    transform .3s var(--ease);
}

.viewer__btn:hover{
  background:rgba(22,200,214,.12);
  border-color:var(--cyan);
  color:var(--cyan);
}

.viewer__prev{
  left:clamp(10px,2vw,32px);
  top:50%;
  transform:translateY(-50%);
}

.viewer__prev:hover{
  transform:translateY(-50%) scale(1.06);
}

.viewer__next{
  right:clamp(10px,2vw,32px);
  top:50%;
  transform:translateY(-50%);
}

.viewer__next:hover{
  transform:translateY(-50%) scale(1.06);
}

.viewer__close{
  top:clamp(12px,2vw,28px);
  right:clamp(10px,2vw,32px);
}

.viewer__close:hover{
  transform:scale(1.06);
}

/* =========================================================
   FORMULAIRE
   ========================================================= */

.form{
  display:grid;
  gap:18px;
  max-width:620px;
}

.row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.field label{
  font-size:.82rem;
  color:var(--mute);
}

.field input,
.field select,
.field textarea{
  background:var(--graphite);
  border:1px solid var(--line-strong);
  border-radius:2px;
  padding:13px 15px;
  font-size:.95rem;
  transition:border-color .3s;
  width:100%;
}

.field textarea{
  resize:vertical;
  min-height:150px;
  line-height:1.6;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--cyan);
  outline:none;
}

.field select{
  appearance:none;
  cursor:pointer;

  background-image:
    linear-gradient(45deg,transparent 50%,var(--mute) 50%),
    linear-gradient(135deg,var(--mute) 50%,transparent 50%);

  background-position:
    calc(100% - 19px) 22px,
    calc(100% - 14px) 22px;

  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}

.field select option{
  background:var(--carbon);
}

.form__note{
  font-size:.8rem;
  color:var(--mute);
  max-width:60ch;
}

.form__status{
  font-size:.9rem;
  padding:14px 16px;
  border:1px solid var(--line-strong);
  display:none;
}

.form__status.is-on{
  display:block;
}

.form__status.is-ok{
  border-color:var(--cyan);
  color:var(--cyan);
}

.form__status.is-err{
  border-color:#d9534f;
  color:#ff8d89;
}

/* liste d'infos contact */

.info{
  display:grid;
  gap:26px;
  align-content:start;
}

.info__item{
  border-top:1px solid var(--line);
  padding-top:16px;
}

.info__item span{
  display:block;
  font-size:.78rem;
  color:var(--mute);
  margin-bottom:5px;
}

.info__item a,
.info__item p{
  font-size:1.02rem;
  margin:0;
}

/* =========================================================
   DONATEURS
   ========================================================= */

.donors{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:40px;
}

.donor{
  background:var(--carbon);
  padding:28px 20px;
  text-align:center;
  transition:background .35s;
}

.donor:hover{
  background:#101619;
}

.donor img{
  width:76px;
  height:76px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto 14px;
  border:1px solid var(--line-strong);
}

.donor strong{
  display:block;
  font-size:1rem;
  font-weight:500;
}

.donor span{
  font-size:.78rem;
  color:var(--mute);
}

/* =========================================================
   TEXTE LÉGAL / PAGES SIMPLES
   ========================================================= */

.prose h2{
  font-size:clamp(1.4rem,3vw,1.9rem);
  margin:48px 0 14px;
}

.prose h2:first-child{
  margin-top:0;
}

.prose p,
.prose li{
  color:#b4c0c4;
  font-size:.98rem;
}

.prose ul{
  padding-left:20px;
  margin:0 0 1em;
}

.prose li{
  margin-bottom:6px;
}

.prose a{
  color:var(--cyan);
  border-bottom:1px solid rgba(22,200,214,.3);
}

/* =========================================================
   FOOTER
   ========================================================= */

.foot{
  border-top:1px solid var(--line);
  padding-block:clamp(44px,6vw,72px) 30px;
  margin-top:clamp(60px,9vw,120px);
  position:relative;
  z-index:1;
}

.foot__top{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
  gap:40px;
  padding-bottom:44px;
}

.foot__top h4{
  font-size:1.15rem;
  margin-bottom:16px;
  color:var(--ice);
}

.foot__links{
  display:grid;
  gap:10px;
}

.foot__links a{
  font-size:.92rem;
  color:#a9b5b9;
  width:fit-content;
  transition:color .25s;
}

.foot__links a:hover{
  color:var(--cyan);
}

.foot__brand img{
  height:40px;
  margin-bottom:16px;
}

.foot__brand p{
  font-size:.9rem;
  color:var(--mute);
  max-width:36ch;
}

.social{
  display:flex;
  gap:10px;
  margin-top:20px;
}

.social a{
  width:42px;
  height:42px;
  border:1px solid var(--line-strong);
  border-radius:2px;
  display:grid;
  place-items:center;
  transition:all .3s var(--ease);
}

.social a:hover{
  border-color:var(--cyan);
  color:var(--cyan);
  transform:translateY(-2px);
}

.social svg{
  width:19px;
  height:19px;
  fill:currentColor;
}

.foot__bottom{
  border-top:1px solid var(--line);
  padding-top:24px;
  display:flex;
  flex-wrap:wrap;
  gap:14px 26px;
  justify-content:space-between;
  align-items:center;
  font-size:.82rem;
  color:var(--mute);
}

.foot__bottom a:hover{
  color:var(--cyan);
}

/* =========================================================
   IMAGES MANQUANTES — repère visuel pendant l'intégration
   ========================================================= */

.ph{
  position:absolute;
  inset:0;
  display:none;
  place-items:center;
  text-align:center;
  padding:16px;
  font-size:.72rem;
  color:#4d5a5e;
  background:
    repeating-linear-gradient(
      135deg,
      #0d1113 0 9px,
      #0a0e10 9px 18px
    );
  word-break:break-all;
}

.is-missing .ph{
  display:grid;
}

.is-missing img{
  opacity:0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:1024px){

  .foot__top{
    grid-template-columns:1fr 1fr;
  }

  .foot__brand{
    grid-column:1/-1;
  }

  .split--text{
    grid-template-columns:1fr;
    gap:28px;
  }
}

@media (max-width:860px){

  :root{
    --head:64px;
  }

  .nav{
    display:none;
  }

  .burger{
    display:block;
  }

  .split{
    grid-template-columns:1fr;
    gap:30px;
  }

  .quote{
    grid-template-columns:1fr;
    gap:24px;
  }

  .row{
    grid-template-columns:1fr;
  }

  .hero__scroll{
    display:none;
  }

  .event{
    grid-template-columns:1fr;
    gap:10px;
    align-items:start;
  }

  .event__count{
    font-size:1.1rem;
  }

  .toolbar__in{
    gap:12px;
  }

  .search{
    max-width:none;
    flex-basis:100%;
  }

  .count{
    width:100%;
  }

  .grid{
    column-width:210px;
  }

  #grid[data-limit]{
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  }
}

@media (max-width:560px){

  body{
    font-size:15.5px;
  }

  .grid{
    column-width:150px;
    column-gap:10px;
  }

  .tile{
    margin-bottom:10px;
  }

  #grid[data-limit]{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  #grid[data-limit] .tile{
    aspect-ratio:1/1;
    margin-bottom:0;
  }

  .tile__cap{
    padding:20px 10px 10px;
  }

  .tile__cap strong{
    font-size:.8rem;
  }

  .tile__cap span{
    font-size:.68rem;
  }

  .btns{
    gap:10px;
  }

  .btn{
    padding:13px 20px;
    font-size:.88rem;
    flex:1 1 auto;
    justify-content:center;
  }

  .donors{
    grid-template-columns:1fr 1fr;
  }

  .foot__top{
    grid-template-columns:1fr;
    gap:32px;
  }

  /* Visionneuse mobile */

  .viewer{
    padding:20px;
  }

  .viewer__img{
    max-width:96vw;
    max-height:80svh;
  }

  .viewer__btn{
    width:42px;
    height:42px;
    font-size:1rem;
  }

  .viewer__prev{
    left:10px;
  }

  .viewer__next{
    right:10px;
  }

  .viewer__close{
    top:15px;
    right:15px;
  }

  .viewer__cap{
    padding-inline:20px;
    bottom:15px;
  }

  .viewer__cap strong{
    font-size:1.1rem;
  }
}

@media (min-width:1900px){

  :root{
    --shell:1560px;
  }

  .grid{
    column-width:320px;
  }

  #grid[data-limit]{
    grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
  }
}

/* =========================================================
   ACCESSIBILITÉ — mouvement réduit
   ========================================================= */

@media (prefers-reduced-motion:reduce){

  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }

  .hero__media img{
    opacity:.55;
    transform:none;
  }

  .hero__title{
    opacity:1;
    filter:none;
    transform:none;
  }

  .hero__line{
    width:min(320px,62vw);
  }

  .hero__sub,
  .hero .btns,
  .hero__scroll{
    opacity:1;
  }

  .shutter{
    display:none;
  }

  [data-reveal]{
    opacity:1;
    transform:none;
  }
}

/* =========================================================
   IMPRESSION
   ========================================================= */

@media print{

  .head,
  .drawer,
  .toolbar,
  .foot,
  .shutter{
    display:none;
  }

  body{
    background:#fff;
    color:#000;
  }
}

/* =========================================================
   INITIALES QUAND UN DONATEUR N'A PAS DE PHOTO
   ========================================================= */

.donor__ini{
  width:76px;
  height:76px;
  border-radius:50%;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-strong);
  background:var(--graphite);
  font-family:var(--display);
  font-size:1.5rem;
  color:var(--cyan);
  letter-spacing:.04em;
}

/* =========================================================
   LIBELLÉ RÉSERVÉ AUX LECTEURS D'ÉCRAN
   ========================================================= */

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* =========================================================
   HEADPOT — LOGO HEADER
   ========================================================= */

.headpot{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  text-decoration:none;
  line-height:0;
}

.headpot img{
  display:block;
  width:auto;
  height:55px;
  max-width:190px;
  object-fit:contain;

  transition:
    opacity .3s var(--ease),
    transform .3s var(--ease);
}

.headpot:hover img{
  opacity:.85;
  transform:scale(1.03);
}

@media (max-width:700px){
  .headpot img{
    height:36px;
    max-width:160px;
  }
}