@font-face{
  font-family:'PoliceTitre';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('police-titre.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'PoliceLibelle';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('police-libelle.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --nuit:#05070a;               /* le plus sombre : ruban, pied, bande « la suie » */
  --fond:#0a0e13;               /* le fond courant des bandes sombres */
  --fond-alt:#111820;           /* le second niveau */
  --carte:#161e27;              /* les blocs posés sur le fond */
  --carte-haut:#1b2530;         /* leur haut — la lumière vient d'en haut */
  --encre:#eef3f7;              /* texte courant sur les fonds sombres */
  --encre-douce:#a4b4c2;        /* texte secondaire — jamais plus clair */
  --marque:#f0b23f;             /* LE JOUR : l'accent unique */
  --marque-fonce:#ffc766;       /* survol — sur fond sombre, on ÉCLAIRE */
  --marque-terre:#6b420a;       /* le même accent, mais sur la bande CLAIRE */
  --metal:#93a7b8;              /* étiquettes techniques : jamais un second accent */
  --filet:#26313d;              /* les traits ; ne porte jamais de texte */
  --texte-bouton:#1a1206;       /* sur l'accent plein */
  --jour:#cfe0ee;               /* la lumière au bout du conduit */

  --acier-haut:#dfe4e8;
  --acier:#d5dbe0;
  --acier-bas:#c6ced4;
  --acier-encre:#141a20;
  --acier-douce:#414b54;

  --brique-haut:#532a1a;
  --brique:#422012;
  --brique-bas:#36180c;
  --creme:#f3e9e1;
  --creme-doux:#cbb3a3;

  --titre:'PoliceTitre','Arial Narrow','Helvetica Neue Condensed',Impact,sans-serif;
  --libelle:'PoliceLibelle','Avenir Next',Avenir,'Segoe UI',system-ui,sans-serif;

  --colonne:1120px;
  --rayon:14px;
  --rayon-fut:999px;
  --t:240ms;

  --ombre:0 1px 2px rgba(5,7,10,.34), 0 12px 28px rgba(5,7,10,.46);
  --ombre-forte:0 1px 2px rgba(5,7,10,.34), 0 18px 40px rgba(5,7,10,.58);
  --ombre-claire:0 1px 2px rgba(20,26,32,.08), 0 12px 28px rgba(20,26,32,.14);
  --ombre-claire-forte:0 1px 2px rgba(20,26,32,.08), 0 18px 40px rgba(20,26,32,.20);
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--fond);
  color:var(--encre);
  font-family:var(--libelle);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
figure{margin:0}
a{color:inherit}

h1,h2,h3{
  font-family:var(--titre);
  font-weight:500;
  text-transform:uppercase;
  line-height:1.14;
  margin:0;
}

.plaque__no,.tableau dd{
  font-family:var(--libelle);
  font-variant-numeric:lining-nums tabular-nums;
}

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

.bande{
  width:100%;
  max-width:calc(var(--colonne) + 48px);
  margin-inline:auto;
  padding-inline:24px;
}

.saut-contenu{
  position:absolute;left:-9999px;top:0;
  background:var(--marque);color:var(--texte-bouton);
  padding:12px 20px;border-radius:0 0 var(--rayon) 0;
  font-family:var(--titre);text-transform:uppercase;letter-spacing:.08em;
  text-decoration:none;z-index:60;
}
.saut-contenu:focus{left:0}

.fut,.bouton--plein{
  position:relative;
  border-radius:var(--rayon-fut);
  border:1px solid var(--filet);
  background-color:var(--fut-base);
  background-image:linear-gradient(180deg,
    rgba(0,0,0,.17)      0%,
    rgba(255,255,255,.17) 26%,
    rgba(255,255,255,0)   62%,
    rgba(0,0,0,.17)      100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), var(--ombre);
}

.ruban{
  margin:0;
  padding:9px 24px;
  background:var(--nuit);
  border-bottom:1px solid color-mix(in srgb,var(--filet) 34%,var(--nuit));
  color:var(--encre-douce);
  font-size:.8rem;
  text-align:center;
}
.ruban a{color:var(--marque)}

.entete{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--nuit) 88%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(115%);
  backdrop-filter:blur(14px) saturate(115%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),
             0 16px 26px -16px rgba(0,0,0,.9);
}
.nav{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:72px;
}

.marque{display:flex;align-items:center;gap:12px;text-decoration:none}
.marque__mots{display:grid}
.marque__nom{
  font-family:var(--titre);text-transform:uppercase;
  font-size:1.05rem;letter-spacing:.06em;color:var(--encre);line-height:1.15;
}
.marque__sous{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-douce)}

.anneau{
  display:block;
  position:relative;flex:none;
  width:26px;height:26px;border-radius:50%;
  border:1px solid var(--metal);
}
.anneau::after{
  content:"";position:absolute;inset:6px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%, #ffffff, var(--jour) 72%, #9fbdd4);
}
.anneau--pied{width:34px;height:34px;margin:0 auto}
.anneau--pied::after{inset:8px}

#nav-toggle{
  display:none;
  width:48px;height:48px;padding:0;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  background:transparent;border:1px solid var(--filet);border-radius:var(--rayon);
  cursor:pointer;
}
.nav-toggle__trait{display:block;width:20px;height:2px;background:var(--encre)}

#nav-links{
  display:flex;align-items:center;gap:26px;
  list-style:none;margin:0;padding:0;
}
#nav-links a:not(.bouton){
  position:relative;
  display:inline-block;
  padding:10px 0;
  font-family:var(--titre);text-transform:uppercase;
  font-size:.82rem;letter-spacing:.12em;
  color:var(--encre-douce);text-decoration:none;
  transition:color var(--t);
}
#nav-links a:not(.bouton)::after{
  content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;
  background:var(--metal);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--t);
}
#nav-links a:not(.bouton):hover{color:var(--encre)}
#nav-links a:not(.bouton):hover::after{transform:scaleX(1)}

@media (max-width:61.99rem){
  #nav-toggle{display:flex}
  #nav-links{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:4px;
    padding:12px 0 20px;
    background:var(--nuit);
    border-bottom:1px solid var(--filet);
    box-shadow:var(--ombre);
  }
  #nav-links.is-open{display:flex}
  #nav-links a:not(.bouton){padding:12px 4px}
  #nav-links .bouton{margin-top:8px}
}

.bouton{
  --fut-base:var(--marque);
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:12px 24px;
  font-family:var(--titre);text-transform:uppercase;
  font-size:.86rem;letter-spacing:.1em;
  text-decoration:none;
  transition:background-color var(--t);
}
.bouton--plein{
  color:var(--texte-bouton);
  border-color:rgba(26,18,6,.35);
}
.bouton--plein:hover,.bouton--plein:focus-visible{
  background-color:color-mix(in oklab,var(--marque) 92%,black);
}
.bouton--grand{min-height:56px;padding:16px 32px;font-size:1rem}

.bandeau{
  position:relative;
  display:flex;align-items:flex-end;
  min-height:clamp(540px,80vh,780px);
  padding-block:96px 64px;
  background:var(--nuit);
  overflow:hidden;
}
.bandeau__photo{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;
}
.bandeau__voile{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(5,7,10,.60) 0%, rgba(5,7,10,.90) 100%);
}
.bandeau__dedans{position:relative;z-index:2}

.bandeau__panneau{
  position:relative;
  max-width:660px;
  padding:40px 40px 44px;
  border-radius:var(--rayon);
  background:color-mix(in srgb, var(--nuit) 82%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(115%);
  backdrop-filter:blur(16px) saturate(115%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), var(--ombre-forte);
  overflow:hidden;
}
.bandeau__panneau::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg, var(--marque), color-mix(in srgb, var(--marque) 25%, transparent));
}

.bandeau__etiquette{
  margin:0 0 20px;
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--encre-douce);
}
.bandeau__titre{
  font-size:clamp(2.6rem,6vw,4.6rem);
  letter-spacing:.005em;
  color:var(--encre);
}
.bandeau__accent{
  display:block;
  font-family:var(--titre);font-weight:500;text-transform:uppercase;
  font-size:clamp(2.6rem,6vw,4.6rem);
  line-height:1.06;letter-spacing:.005em;
  color:var(--marque);
}
.bandeau__intro{
  margin:24px 0 0;max-width:46ch;
  color:var(--encre-douce);
}
.bandeau__actions{margin:32px 0 0}

:root{--air-section:clamp(56px,7vw,88px)}
.section{position:relative;padding-block:var(--air-section)}

.suie__tete{display:grid;gap:4px}
@media (min-width:62rem){
  .suie__tete{
    grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
    gap:clamp(2rem,5vw,4.5rem);align-items:start;
  }
  .suie__tete .titre2{max-width:12ch}
  .suie__dire .section__lead{margin-top:.35rem}
}

.section--suie{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(147,167,184,.055), transparent 62%),
    linear-gradient(180deg, #080b10, var(--nuit));
}
.section--contact{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(147,167,184,.05), transparent 62%),
    linear-gradient(180deg, var(--fond), var(--nuit));
}

.section--acier{
  color:var(--acier-encre);
  background-color:#dfe4e8;
}

.section--brique{
  color:var(--creme);
  background-color:#532a1a;background-image:radial-gradient(110% 80% at 50% 0%, rgba(255,226,205,.07), transparent 60%);
}

.jalon{
  margin:0 0 16px;
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--encre-douce);
}
.section--acier .jalon{color:var(--acier-douce)}
.section--brique .jalon{color:var(--creme-doux)}

.titre2{
  font-size:clamp(1.9rem,3.4vw,2.9rem);
  letter-spacing:.015em;
  max-width:20ch;
}
.section__lead{
  margin:24px 0 0;max-width:58ch;
  font-size:1.15rem;line-height:1.6;
  color:var(--encre);
}
.section__intro{
  margin:18px 0 0;max-width:58ch;
  color:var(--encre-douce);
}
.section--acier .section__lead{color:var(--acier-encre)}
.section--acier .section__intro{color:var(--acier-douce)}
.section--brique .section__lead{color:var(--creme)}
.section--brique .section__intro{color:var(--creme-doux)}

main > section:not(.bandeau)::after,
.pied::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  --goutte:max(0px, calc((100% - var(--colonne)) / 2));
  --voile:linear-gradient(90deg,#000 0%,rgba(0,0,0,.62) 14%,
          rgba(0,0,0,.26) 34%,rgba(0,0,0,.17) 50%,rgba(0,0,0,.26) 66%,
          rgba(0,0,0,.62) 86%,#000 100%);
  background-image:
    repeating-radial-gradient(circle at 50% 112%,
      transparent 0 90px,
      var(--joue-onde) 90px 91.5px,
      transparent 91.5px 92px),
    radial-gradient(46% 32% at 19% 24%,var(--joue-suie),transparent 70%),
    radial-gradient(38% 46% at 78% 58%,var(--joue-suie),transparent 68%),
    radial-gradient(58% 26% at 44% 94%,var(--joue-depot),transparent 72%),
    linear-gradient(90deg,var(--joue-fond) 0,transparent var(--goutte),
      transparent calc(100% - var(--goutte)),var(--joue-fond) 100%);
  background-size:auto,100% 100%,100% 100%,100% 100%,100% 100%;
  background-position:center bottom,left top,left top,left top,left top;
  background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  -webkit-mask-image:var(--voile);mask-image:var(--voile);
}
.section--suie,.section--contact,.pied{
  --joue-fond:rgba(206,226,244,.13);
  --joue-onde:rgba(206,226,244,.055);
  --joue-suie:rgba(206,226,244,.05);
  --joue-depot:rgba(0,0,0,.10);
}
.section--acier{
  --joue-fond:rgba(11,16,22,.32);
  --joue-onde:rgba(11,16,22,.05);
  --joue-suie:rgba(11,16,22,.045);
  --joue-depot:rgba(11,16,22,.04);
}
.section--brique{
  --joue-fond:rgba(255,226,205,.06);
  --joue-onde:rgba(255,226,205,.05);
  --joue-suie:rgba(255,226,205,.045);
  --joue-depot:rgba(0,0,0,.09);
}

.signes__titre{
  margin:64px 0 24px;
  font-size:.95rem;letter-spacing:.12em;color:var(--metal);
  position:relative;z-index:1;
}
.signes{
  list-style:none;margin:0;padding:0;
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(264px,1fr));
  position:relative;z-index:1;
}
.signes li{
  --fut-base:#18212b;
  display:flex;align-items:center;
  min-height:56px;
  padding:12px 26px;
  font-size:.95rem;
  color:var(--encre);
}

.cartes{
  display:grid;gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  margin-top:56px;
  position:relative;z-index:1;
}
.carte{
  padding:28px;
  border-radius:var(--rayon);
  background:linear-gradient(180deg,#e9edf0,var(--acier));
  border:1px solid rgba(20,26,32,.14);
  box-shadow:var(--ombre-claire);
  transition:transform var(--t),box-shadow var(--t);
}
.carte:hover{box-shadow:var(--ombre-claire-forte)}
.carte__picto{
  width:34px;height:34px;display:block;margin-bottom:20px;
  fill:none;stroke:var(--marque-terre);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.carte h3{font-size:1.05rem;letter-spacing:.05em;color:var(--acier-encre);margin:0 0 10px}
.carte p{margin:0;font-size:.95rem;color:var(--acier-douce)}

.passage{display:grid;grid-template-columns:minmax(0,1fr)}
.passage__texte{padding-inline:24px;position:relative;z-index:1}
.passage__figure{position:relative;z-index:1;margin-top:40px}
.passage__figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  object-position:50% 50%}

@media (min-width:76rem){
  .passage{
    grid-template-columns:
      minmax(24px,1fr)
      minmax(0,calc(var(--colonne) * .56))
      minmax(0,calc(var(--colonne) * .44))
      minmax(24px,1fr);
    align-items:stretch;
  }
  .passage__texte{grid-column:2;padding:0 56px 0 0}
  .passage__figure{grid-column:3 / 5;margin-top:0;min-height:340px}
  .passage__figure img{position:absolute;inset:0;
    width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
}

.passage__regle{
  margin:40px 0 0;
  padding:20px 24px;
  border-left:3px solid var(--marque);
  border-radius:0 var(--rayon) var(--rayon) 0;
  background:linear-gradient(180deg, rgba(255,226,205,.09), rgba(255,226,205,.045));
  color:var(--creme);
  font-size:.95rem;
}
.passage__note{
  margin:24px 0 0;
  font-size:.95rem;color:var(--creme-doux);
}

.contact{display:grid;gap:40px;position:relative;z-index:1}
@media (min-width:64rem){
  .contact{grid-template-columns:minmax(0,1.68fr) minmax(0,.78fr);gap:48px;align-items:stretch}
  .contact__figure{display:flex}
  .contact__figure img{height:100%;min-height:100%;object-fit:cover}
}
.contact__figure img{
  width:100%;height:auto;border-radius:var(--rayon);
  border:6px solid #35434f;
  box-shadow:var(--ombre-forte);
}

.pierre{
  position:relative;
  padding:44px 40px;
  border-radius:var(--rayon);
  background-color:#1b2530;
  border:1px solid var(--filet);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--ombre-forte);
}
.para{margin:20px 0 0;max-width:56ch;color:var(--encre-douce)}

.plaques{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  margin:32px 0 40px;
}
.plaque{
  --fut-base:#1a232d;
  min-height:56px;
  display:grid;gap:2px;align-content:center;
  padding:10px 26px;
  text-decoration:none;
  transition:background-color var(--t);
}
.plaque:hover,.plaque:focus-visible{
  background-color:color-mix(in oklab,#1a232d 93%,white);
}
.plaque--appel:hover,.plaque--appel:focus-visible{
  background-color:color-mix(in oklab,var(--marque) 92%,black);
}
.plaque--appel{
  --fut-base:var(--marque);
  border-color:rgba(26,18,6,.35);
}
.plaque__quoi{
  font-family:var(--titre);text-transform:uppercase;
  font-size:.7rem;letter-spacing:.16em;color:var(--encre-douce);
}
.plaque__no{font-size:1.3rem;color:var(--encre);line-height:1.2}
.plaque--appel .plaque__quoi{color:rgba(26,18,6,.80)}
.plaque--appel .plaque__no{color:var(--texte-bouton)}

.fiches{display:grid;gap:32px}
@media (min-width:48rem){.fiches{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}}
.fiche__titre{
  margin:0 0 16px;
  font-size:.85rem;letter-spacing:.12em;color:var(--metal);
}
.tableau{margin:0}
.tableau__ligne{
  display:grid;grid-template-columns:minmax(0,1fr);gap:2px;
  padding:10px 0;
  border-bottom:1px dotted var(--filet);
}
@media (min-width:30rem){
  .tableau__ligne{grid-template-columns:5.4rem minmax(0,1fr);gap:12px;align-items:baseline}
}
.tableau dt{
  font-family:var(--titre);text-transform:uppercase;
  font-size:.72rem;letter-spacing:.12em;color:var(--metal);
}
.tableau dd{margin:0;color:var(--encre);font-size:.95rem}
.tableau dd a{color:var(--marque)}
.tableau__ligne--ferme dd{color:var(--encre-douce)}
.tableau__ligne--aujourdhui{background:rgba(240,178,63,.07);border-radius:8px}
.tableau__ligne--aujourdhui dt,.tableau__ligne--aujourdhui dd{padding-inline:8px}
.tableau__aujourdhui{
  display:block;
  font-size:.62rem;letter-spacing:.14em;color:var(--marque);
}

.pied{
  position:relative;
  background:var(--nuit);
  padding-block:64px 48px;
}
.pied__dedans{position:relative;z-index:1;text-align:center}
.pied__nom{
  font-family:var(--titre);text-transform:uppercase;
  font-size:1.5rem;letter-spacing:.08em;color:var(--encre);
  margin:20px 0 4px;
}
.pied__lieu{
  margin:0 0 28px;
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--encre-douce);
}
.pied__credit{margin:0;font-size:.82rem;color:var(--encre-douce)}
.pied__credit a{color:var(--marque)}

html.js .reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity 620ms ease, transform 620ms cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * 90ms);
}
html.js .reveal.est-vu{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html.js .reveal{transform:none;transition:opacity 300ms ease;transition-delay:0s}
  .carte,.plaque,.bouton{transition:none}
}

@media (max-width:47.99rem){
  .section{padding-block:64px}
  .bandeau{padding-block:72px 48px;min-height:auto}
  .bandeau__panneau{padding:28px 24px 32px}
  .pierre{padding:28px 24px 32px}
  .signes li{padding:12px 22px}
  .plaque{padding:10px 22px}
}

@media (max-width:600px){
  .bandeau{display:block;min-height:0;
    padding-block:0 56px}
  .bandeau__photo{position:static;width:100%;
    height:38vh;min-height:210px;max-height:340px;
    object-position:50% 38%}
  .bandeau__voile{display:none}
  .bandeau__dedans{padding-top:32px}
}

.entete{background-color:rgba(5,7,10,0.76)}
.entete{margin-bottom:-72px}

#contact a.plaque.plaque--appel.fut{color:#05070a}