:root{
    --c0:#0D0D0D;--c1:#404040;--c2:#737373;--c3:#BFBFBF;--c4:#F2F2F2;
    color-scheme: dark light;
}
*{box-sizing:border-box} html,body{height:100%;margin:0;padding:0;overflow-x:hidden;scrollbar-gutter:stable both-edges;}
a{color:inherit;text-decoration:none} 

body{
  margin:0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family:'Cinzel',serif,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,"Noto Sans";
  color:var(--c4);
  background-color:#1B1B1B;
  background-image:url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M82.42 180h-1.415L0 98.995v-2.827L6.167 90 0 83.833V81.004L81.005 0h2.827L90 6.167 96.167 0H98.996L180 81.005v2.827L173.833 90 180 96.167V98.996L98.995 180h-2.827L90 173.833 83.833 180H82.42zm0-1.414L1.413 97.58 8.994 90l-7.58-7.58L82.42 1.413 90 8.994l7.58-7.58 81.006 81.005-7.58 7.58 7.58 7.58-81.005 81.006-7.58-7.58-7.58 7.58z' fill='%231e1e1e' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Layout */
.wrap{
  min-height: calc(100svh - 72px);
  display:grid;
  place-items:center;
  padding:
    max(32x, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(32px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  position:relative;
  z-index:3
}
.wrap > section{ min-height:0; overflow:auto; display:grid; place-items:center; }
main{width:100%;max-width:720px;text-align:center;container-type: inline-size;}
.card{margin:0 auto;padding: 0 clamp(18px, 3vw, 32px) clamp(6px, 1.2vw, 14px);}
main, .card { container-type: inline-size; }

@container (min-width: 40rem) {
  .card { padding: 0 32px 14px; }
  p { font-size: clamp(16px, 0.95rem + 0.35vw, 18px); }
}

footer{font-size:13px;color:var(--c2);font-family:'Cinzel',serif,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,"Noto Sans";}
.social{display:flex;gap:16px;justify-content:center;margin:8px 0 0}
.social a{padding:2px 4px;color:var(--c3);}
.legal{margin-top:8px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.legal a{color:var(--c3)}

.divider-gothic{
  width:100%;
  display:grid;
  place-items:center;
  margin: clamp(10px, 3vw, 24px) 0;
}
.divider-svg{
  width:min(100%, 720px);
  height:auto;
  display:block;
}
@media (min-width:768px){
  .divider-gothic{ margin: clamp(8px, 1.5vw, 16px) 0; }
}

.divider-gothic.is-rotated .divider-svg{
  transform: rotate(180deg);
  transform-origin: 50% 50%;
}

/* ================================
            Header Menu 
===================================*/
.louve-header{
  position: relative;
  --bg-menu:#2A2A2A;
  --bg-hover:#282828;
  --bg-active:#1B1B1B;
  --txt:#7e7e7e;
  --txt-active:#FFFFFF;

  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  height: 72px;
  padding:12px;
}

.louve-header .logo{
  font-family: inherit; /* remplacera par ta police plus tard */
  font-weight:700;
  font-size: clamp(16px, 1rem + .3vw, 20px);
  color: var(--txt-active);
  letter-spacing:.5px;
}

/* ========== Menu centré ========== */
.nav-wrap{
  justify-self:center;
  background: var(--bg-menu);
  border-radius: 999px;
  padding:6px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.nav-list{
  display:flex;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}
.nav-link{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  line-height:1;
  color: var(--txt);
  font-weight: bold;
  text-decoration:none;
  white-space:nowrap;
}
.nav-link:hover,
.nav-link:focus-visible{
  background: var(--bg-hover);
  outline:none;
}
.nav-link.is-active,
.nav-link[aria-current="page"]{
  background: var(--bg-active);
  color: var(--txt-active);
}

/* Switch langue à droite */
.lang-switch {
  top:0;
  height: 32px;
}
.lang-switch select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background: #282828;
  color:#fff;
  border:1px solid #333;
  border-radius:999px;
  padding:8px 14px;
  font: inherit;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.lang-switch select:focus-visible{ 
    outline:2px solid #666; outline-offset:2px;
}

/* Accessibilité visuelle */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Bouton burger (caché en desktop) */
.burger{
  display:none;
  background:transparent;
  border:0;
  padding:4px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
.burger img{ 
    width:28px; height:28px; display:block;
    transform: rotate(0deg);
    transition: transform .2s ease;
    transform-origin: 50% 50%;
}
/* menu ouvert */
.burger[aria-expanded="true"] img{
  transform: rotate(90deg);
}

/* Petits écrans: le menu défile horizontalement si besoin */
@media (max-width:380px){
  .louve-header {
    position: relative;
  }
  .burger{ display:inline-flex; }
  .nav-wrap{
    position:absolute;        /* ne pousse plus le contenu */
    top:100%; 
    width: 100%;
    z-index:20;
    background:#191B1D;
    border-radius:12px;
    box-shadow:0 10px 24px rgba(0,0,0,.35);
    height: 128px;

    /* ouverture fluide sans reflow */
    transform:scaleY(0);
    transform-origin:top;
    opacity:0;
    pointer-events:none;
    transition:transform .22s ease, opacity .22s ease;
    overflow:hidden;
  }
  /* liste horizontale qui peut défiler si ça déborde */
  .nav-list{
    display:flex; gap:6px; padding:8px; margin:0;
    flex-direction: column;
    overflow-x:auto; /* horizontal si besoin */
  }
  .nav-list li {
      margin-top: 8px;
  }
  /* état ouvert */
  .louve-header.is-open .nav-wrap{
    transform:scaleY(1);
    opacity:1;
    pointer-events:auto;
  }
}