/* ==================================================================
   The Million's — feuille de style
   1. Polices        6. Navigation      11. Carte & cave
   2. Jetons         7. Héro            12. Frise & rendez-vous
   3. Base           8. Sections        13. Offres & contact
   4. Utilitaires    9. Duo image/texte 14. Pied de page
   5. Boutons       10. Programme       15. Pages légales & divers
   ================================================================== */

/* ---------- 1. Polices ---------- */
@font-face{font-family:'Didot';src:url(fonts/didot-regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Didot';src:url(fonts/didot-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Didot';src:url(fonts/didot-bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Brown';src:url(fonts/brown-light.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Brown';src:url(fonts/brown-regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Brown';src:url(fonts/brown-bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- 2. Jetons ---------- */
:root{
  color-scheme:dark;

  /* Couleurs */
  --nuit:#002858;
  --nuit-profond:#001a3c;
  --nuit-clair:#00376f;
  --encre:#000d1f;
  --bois:#2c1f12;
  --laiton:#C9AB71;
  --laiton-clair:#E0D3B4;
  --lueur:#E8D2A0;
  --pierre:#F0EADC;
  --pierre-2:#C6BCA6;
  --pierre-3:#9A9382;

  /* Filets */
  --filet:1px solid rgba(201,171,113,.22);
  --filet-moyen:1px solid rgba(201,171,113,.4);
  --filet-fort:1px solid rgba(201,171,113,.62);

  /* Mesures */
  --mesure:1180px;
  --mesure-texte:68ch;
  --gouttiere:clamp(20px,5vw,52px);
  --rythme:clamp(76px,10vw,144px);
  --gap:clamp(28px,4vw,56px);

  /* Typographie fluide */
  --t-display:clamp(42px,6.6vw,86px);
  --t-titre:clamp(31px,4.3vw,52px);
  --t-sous:clamp(21px,2.3vw,27px);
  --t-lead:clamp(17px,1.5vw,21px);
  --t-corps:clamp(16px,1.02vw,17.5px);
  --t-menu:14.5px;
  --t-kicker:12.5px;

  /* Hauteur de la barre de navigation, reprise par scroll-margin-top */
  --hauteur-barre:78px;

  /* Ombres */
  --ombre:0 30px 70px -28px rgba(0,8,20,.9);
  --ombre-basse:0 18px 44px -24px rgba(0,8,20,.85);
}

/* ---------- 3. Base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}

html{
  scroll-behavior:smooth;
  background:var(--nuit);
  -webkit-text-size-adjust:100%;
}

/* La barre reste au-dessus du contenu : toute cible d'ancre se réserve
   sa hauteur, faute de quoi le lien « Réserver » s'arrêtait sous elle. */
[id]{scroll-margin-top:calc(var(--hauteur-barre) + 26px)}

body{
  background-color:var(--encre);
  color:var(--pierre);
  font-family:'Brown','Jost',sans-serif;
  font-weight:300;
  font-size:var(--t-corps);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

#fond{
  min-height:100vh;
  background-color:var(--nuit);
  background-image:
    radial-gradient(ellipse 88% 52% at 50% -10%, rgba(232,210,160,.11), transparent 62%),
    radial-gradient(ellipse 120% 70% at 50% 34%, rgba(0,20,46,.42), transparent 70%),
    radial-gradient(ellipse 70% 50% at 108% 102%, rgba(0,13,31,.9), transparent 64%),
    radial-gradient(ellipse 70% 50% at -8% 102%, rgba(0,13,31,.9), transparent 64%);
  /* « clip » et non « hidden » : hidden crée un conteneur de défilement,
     ce qui neutralise le position:sticky de la barre de navigation. */
  overflow-x:hidden;   /* repli pour les navigateurs sans clip */
  overflow-x:clip;
}

h1,h2,h3,h4{font-family:'Didot',Georgia,serif;font-weight:400;line-height:1.12}
strong,b{font-weight:700;color:var(--pierre)}
em,i{font-style:italic}
img{max-width:100%;display:block}
ul,ol{list-style:none}

a{color:var(--laiton-clair);text-decoration:none;transition:color .25s ease}
a:hover{color:var(--lueur)}
:focus-visible{outline:2px solid var(--lueur);outline-offset:4px}
::selection{background:rgba(201,171,113,.3);color:var(--pierre)}

/* ---------- 4. Utilitaires ---------- */
.enveloppe{max-width:var(--mesure);margin-inline:auto;padding-inline:var(--gouttiere)}

.kicker{
  font-family:'Brown','Jost',sans-serif;font-weight:400;
  font-size:var(--t-kicker);letter-spacing:.34em;text-transform:uppercase;
  color:var(--laiton);
  display:flex;align-items:center;gap:14px;
  margin-bottom:20px;
}
.kicker::after{content:"";height:1px;flex:1;max-width:70px;background:linear-gradient(90deg,rgba(201,171,113,.7),transparent)}
.kicker--centre{justify-content:center}
.kicker--centre::before{content:"";height:1px;flex:1;max-width:70px;background:linear-gradient(270deg,rgba(201,171,113,.7),transparent)}

.titre{
  font-size:var(--t-titre);
  color:var(--laiton-clair);
  letter-spacing:.005em;
  margin-bottom:18px;
  text-wrap:balance;
}
.sous-titre{font-size:var(--t-sous);color:var(--laiton-clair);margin-bottom:14px}

.lead{
  font-family:'Didot',Georgia,serif;
  font-size:var(--t-lead);line-height:1.6;
  color:var(--pierre-2);
  max-width:var(--mesure-texte);
  margin-bottom:var(--gap);
}
.lead--centre{margin-inline:auto;text-align:center}

.prose > p + p{margin-top:1.1em}
.prose p{max-width:var(--mesure-texte)}
.note{
  font-family:'Brown','Jost',sans-serif;font-size:14px;
  color:var(--pierre-3);font-style:italic;
  max-width:var(--mesure-texte);
}

.centre{text-align:center}

/* ---------- Chargement : squelettes et entrée de page ---------- */

/* Miroitement commun à tous les squelettes. */
@keyframes miroiter{
  from{background-position:-160% 0}
  to{background-position:260% 0}
}
.squelette{
  background:
    linear-gradient(100deg,
      transparent 20%,
      rgba(232,210,160,.13) 42%,
      rgba(232,210,160,.2) 50%,
      rgba(232,210,160,.13) 58%,
      transparent 80%),
    linear-gradient(165deg, rgba(0,44,96,.55), rgba(0,13,31,.6));
  background-size:220% 100%, 100% 100%;
  animation:miroiter 1.9s ease-in-out infinite;
}

/* Le héro : la photo se révèle une fois chargée, le squelette tient la
   place entre-temps plutôt que de laisser un aplat vide. */
.hero-squelette{
  position:absolute;inset:0;z-index:1;
  transition:opacity .7s ease;
}
.hero-photo.chargee .hero-squelette{opacity:0;pointer-events:none}

/* Images de contenu : elles montent doucement une fois décodées. */
.visuel img{opacity:0;transform:scale(1.02);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.visuel img.chargee{opacity:1;transform:none}

/* Entrée de page : évite le clignotement pendant le chargement des
   polices, sans jamais masquer le contenu plus de la durée prévue. */
body{animation:paraitre .5s ease-out both}
@keyframes paraitre{from{opacity:0}to{opacity:1}}

/* Apparition au défilement */
.revele{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.3,1)}
.revele.vu{opacity:1;transform:none}
.revele:nth-child(2){transition-delay:.08s}
.revele:nth-child(3){transition-delay:.16s}
.revele:nth-child(4){transition-delay:.24s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .revele{opacity:1;transform:none;transition:none}
  .squelette{animation:none}
  body{animation:none}
  .visuel img{opacity:1;transform:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- 5. Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Brown','Jost',sans-serif;font-weight:400;
  font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 32px;border:1px solid var(--laiton);
  background:none;color:var(--laiton-clair);cursor:pointer;
  position:relative;overflow:hidden;
  transition:color .3s ease,border-color .3s ease,transform .3s ease,box-shadow .3s ease;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,var(--laiton),var(--laiton-clair));
  transform:translateY(101%);transition:transform .38s cubic-bezier(.3,.7,.3,1);
}
.btn:hover{color:var(--encre);border-color:var(--laiton-clair);box-shadow:0 14px 34px -18px rgba(232,210,160,.8)}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:translateY(1px)}

.btn--plein{background:linear-gradient(120deg,var(--laiton),var(--laiton-clair));color:var(--encre);border-color:transparent}
.btn--plein::before{background:linear-gradient(120deg,var(--laiton-clair),var(--lueur))}
.btn--plein:hover{color:var(--encre)}

.btn--mini{padding:10px 20px;font-size:12.5px;letter-spacing:.1em}

.lien-fleche{
  font-family:'Brown','Jost',sans-serif;font-size:13.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--laiton);
  display:inline-flex;align-items:center;gap:10px;
  padding-bottom:4px;border-bottom:1px solid rgba(201,171,113,.35);
  transition:gap .3s ease,border-color .3s ease,color .3s ease;
}
.lien-fleche::after{content:"→";transition:transform .3s ease}
.lien-fleche:hover{gap:16px;border-color:var(--lueur)}

.groupe-btn{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}

/* ---------- 6. Navigation ---------- */
.saut{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--nuit-profond);color:var(--laiton-clair);
  border:1px solid var(--laiton);padding:14px 24px;
  font-family:'Brown','Jost',sans-serif;font-size:14px;
}
.saut:focus{left:16px;top:14px}

/* Fond opaque, sans backdrop-filter : un élément sticky flouté à
   l'intérieur d'un conteneur en overflow:clip disparaît par moments
   dans Chrome, notamment quand la hauteur de la page change d'un coup
   (changement d'onglet de la carte). La lisibilité de la barre ne doit
   dépendre d'aucun effet de composition. */
.barre{
  position:sticky;top:0;z-index:100;
  background:#00122c;
  border-bottom:var(--filet);
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.barre.compacte{
  background:#000d21;
  border-bottom-color:rgba(201,171,113,.4);
  box-shadow:0 12px 30px -20px rgba(0,0,0,.9);
}

.barre-inner{
  max-width:var(--mesure);margin-inline:auto;
  padding:16px var(--gouttiere);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.marque{display:flex;align-items:center;flex-shrink:0}
.marque img{
  height:30px;width:auto;
  transition:height .3s ease,filter .35s ease,transform .35s ease;
}
.marque:hover img{filter:drop-shadow(0 0 14px rgba(232,210,160,.45));transform:translateY(-1px)}
.barre.compacte .marque img{height:26px}

.menu{display:flex;gap:clamp(16px,2vw,30px);flex-wrap:wrap}
.menu a{
  font-family:'Brown','Jost',sans-serif;font-weight:400;
  font-size:var(--t-menu);letter-spacing:.03em;color:var(--pierre);
  position:relative;padding-block:4px;
}
.menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--laiton);transform:scaleX(0);transform-origin:left;
  transition:transform .32s cubic-bezier(.3,.7,.3,1);
}
.menu a:hover::after,.menu a[aria-current]::after{transform:scaleX(1)}
.menu a[aria-current]{color:var(--laiton-clair)}

.burger{
  display:none;background:none;cursor:pointer;
  border:1px solid rgba(201,171,113,.5);
  padding:11px 12px;flex-direction:column;gap:5px;
}
.burger span{display:block;width:22px;height:1.5px;background:var(--laiton-clair);transition:transform .3s ease,opacity .25s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Entre 1000 et 1180px, le menu complet ne tient qu'en resserrant :
   sans cela « Infos » passait à la ligne et doublait la hauteur de barre. */
@media(max-width:1180px){
  .menu{gap:clamp(12px,1.7vw,22px)}
  .menu a{font-size:13.5px}
  .barre-inner{gap:14px}
}

@media(max-width:1000px){
  .burger{display:flex;order:5}
  .barre-btn{margin-left:auto}
  .menu{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--nuit-profond);border-bottom:var(--filet-moyen);
    flex-direction:column;gap:0;padding:8px 0 16px;
    box-shadow:0 30px 50px -20px rgba(0,0,0,.8);
  }
  .menu a{padding:14px var(--gouttiere);font-size:16px}
  .menu a::after{display:none}
  .menu.ouvert{display:flex;animation:deplier .3s ease}
}
@keyframes deplier{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(max-width:420px){.barre-btn{display:none}}

/* ---------- 7. Héro ---------- */
/* Deux colonnes d'un bord à l'autre de l'écran. La première colonne
   vaut exactement la marge de la grille du site : le texte démarre donc
   sur la même verticale que le contenu de toutes les autres sections,
   sans que le héro cesse pour autant d'occuper toute la largeur. */
.hero{
  display:grid;
  grid-template-columns:
    max(var(--gouttiere), calc((100% - var(--mesure)) / 2 + var(--gouttiere)))
    minmax(0, calc((var(--mesure) - var(--gouttiere) * 2) * .54))
    1fr;
  min-height:min(88vh,860px);
  position:relative;
  background:
    radial-gradient(ellipse 58% 70% at 0% 110%, var(--nuit-profond), transparent 70%),
    radial-gradient(circle 340px at 4% 6%, rgba(232,210,160,.1), transparent 70%),
    var(--nuit);
}
.hero-texte{
  grid-column:2;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(64px,8vw,104px) clamp(20px,2.2vw,36px) clamp(64px,8vw,104px) 0;
  position:relative;z-index:2;
}
.hero-titre{
  font-size:var(--t-display);line-height:1.04;letter-spacing:.008em;
  max-width:13ch;margin-bottom:26px;
  color:var(--laiton-clair);
  text-wrap:balance;
}
@supports((-webkit-background-clip:text) or (background-clip:text)){
  .hero-titre{
    background:linear-gradient(176deg,#F7F2E7 4%,#E0D3B4 34%,#C9AB71 62%,#E0D3B4 84%,#F7F2E7 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 6px 30px rgba(232,210,160,.26));
  }
}
.hero-sub{font-size:var(--t-lead);color:var(--pierre-2);max-width:46ch;margin-bottom:22px;line-height:1.62}
/* Sans filet avant le texte : ce trait de 34 px se lisait comme un
   tiret cadratin alors qu'il n'était qu'un ornement. */
.hero-adresse{
  font-family:'Didot',Georgia,serif;font-style:italic;
  font-size:18px;color:var(--laiton);margin-bottom:38px;
}
/* Boutons du héro un peu plus compacts : la colonne est plus étroite
   depuis que le héro s’inscrit dans la largeur du site. */
.hero .btn{padding:14px 26px;font-size:13.5px}

/* La photo occupe la troisième colonne, jusqu'au bord droit de l'écran */
.hero-photo{
  grid-column:3;
  position:relative;min-height:440px;
  background:url(img/devanture-the-millions-rue-rossini.jpg) center/cover no-repeat;
}
.hero-photo::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--nuit) 0%,rgba(0,40,88,.42) 22%,transparent 55%);
}
.hero-photo::after{
  content:"";position:absolute;inset:18px;border:var(--filet-fort);pointer-events:none;
}

/* Sous 960px, les deux colonnes se superposent : une seule image plein
   cadre, le propos par-dessus, plutôt qu'une photo puis un pavé. */
@media(max-width:960px){
  .hero{
    grid-template-columns:1fr;
    grid-template-rows:1fr;
    min-height:min(100vh,760px);   /* repli */
    min-height:min(100svh,760px);
  }
  .hero-texte,.hero-photo{grid-area:1/1}

  .hero-photo{min-height:0;background-position:50% center}
  /* Voile monté du bas : lisible sur la pierre claire comme sur les portes */
  .hero-photo::before{
    background:
      linear-gradient(180deg,
        rgba(0,14,34,.44) 0%,
        rgba(0,14,34,.30) 12%,
        rgba(0,16,38,.74) 27%,
        rgba(0,17,40,.93) 41%,
        rgba(0,19,44,.97) 58%,
        rgba(0,21,48,.99) 78%,
        rgba(0,24,54,1) 100%);
  }
  .hero-photo::after{inset:12px;border-color:rgba(201,171,113,.4)}

  .hero-texte{
    justify-content:flex-end;
    padding:clamp(96px,16vh,150px) clamp(28px,7vw,48px) clamp(40px,7vh,60px);
  }
  .hero-texte .kicker{margin-bottom:16px}
  .hero-texte .kicker::after{max-width:52px}
  .hero-titre{
    max-width:11ch;margin-bottom:20px;
    filter:drop-shadow(0 4px 26px rgba(0,8,20,.95));
  }
  .hero-sub{
    color:var(--pierre);max-width:34ch;margin-bottom:18px;
    font-size:clamp(16px,4.2vw,18.5px);
    text-shadow:0 2px 14px rgba(0,10,26,.8);
  }
  .hero-adresse{
    margin-bottom:30px;font-size:17px;
    text-shadow:0 2px 12px rgba(0,10,26,.8);
  }
}

/* Dès que les deux actions ne tiennent plus côte à côte, elles
   passent en pleine largeur plutôt que de rester dépareillées. */
@media(max-width:620px){
  .hero .groupe-btn{flex-direction:column;align-items:stretch;gap:12px}
  .hero .btn{width:100%}
}

.hero-anim{animation:monter .9s cubic-bezier(.2,.7,.3,1) both}
.hero-anim:nth-child(1){animation-delay:.1s}
.hero-anim:nth-child(2){animation-delay:.2s}
.hero-anim:nth-child(3){animation-delay:.32s}
.hero-anim:nth-child(4){animation-delay:.42s}
.hero-anim:nth-child(5){animation-delay:.52s}
@keyframes monter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ---------- 8. Bandeau défilant ---------- */
.ticker{
  border-block:var(--filet);
  background:linear-gradient(90deg,var(--nuit-profond),rgba(0,35,78,.6),var(--nuit-profond));
  overflow:hidden;padding:13px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker-piste{display:flex;gap:56px;white-space:nowrap;width:max-content;animation:defiler 62s linear infinite}
.ticker span{
  font-family:'Brown','Jost',sans-serif;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--pierre-3);
  display:flex;align-items:center;gap:12px;
}
.ticker span::before{content:"";width:5px;height:5px;background:var(--laiton);transform:rotate(45deg)}
.ticker b{color:var(--laiton-clair);font-weight:400}
@keyframes defiler{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker:hover .ticker-piste{animation-play-state:paused}

/* ---------- 9. Sections ---------- */
.section{padding-block:var(--rythme)}
.section > .enveloppe > .kicker{margin-bottom:18px}

/* Quatre fonds nettement distincts, alternés pour rythmer la lecture.
   Chaque bande est opaque : elle ne laisse pas transparaître #fond. */
.bande{position:relative;isolation:isolate}
.bande::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(201,171,113,.5) 22%,rgba(201,171,113,.5) 78%,transparent);
}

/* Claire — respiration, halo de lanterne */
.bande--claire{
  background:
    radial-gradient(ellipse 70% 62% at 50% -8%, rgba(232,210,160,.13), transparent 62%),
    linear-gradient(180deg,#003568,#002b57);
}
/* Nuit — le bleu de référence */
.bande--nuit{background:linear-gradient(180deg,#002450,#001c40)}
/* Profonde — presque noire, pour les blocs denses */
.bande--profonde{
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,40,88,.5), transparent 70%),
    linear-gradient(180deg,#00081a,#00030d);
}
/* Bois — brun chaud des encadrements */
.bande--bois{
  background:
    linear-gradient(180deg,rgba(62,44,24,.5),rgba(26,18,9,.72)),
    linear-gradient(180deg,#0c1322,#070c17);
}

/* En-tête de section centré */
.entete{max-width:760px;margin-inline:auto;text-align:center;margin-bottom:clamp(44px,6vw,76px)}
.entete .lead{margin-inline:auto;margin-bottom:0}
.entete .titre{
  text-shadow:0 0 44px rgba(232,210,160,.18);
  margin-bottom:22px;
}
/* Filet d'appui sous le titre de section */
.entete .titre::after{
  content:"";display:block;width:56px;height:1px;margin:24px auto 0;
  background:linear-gradient(90deg,transparent,var(--laiton),transparent);
}

/* ---------- 10. Duo image / texte ---------- */
.duo{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(36px,6vw,92px);align-items:center;
}
.duo + .duo{margin-top:var(--rythme)}
.duo--inverse .duo-visuel{order:2}

.duo-texte{max-width:min(100%,560px)}
.duo-texte .titre{font-size:clamp(28px,3.5vw,42px)}

.visuel{position:relative;isolation:isolate}
.visuel img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  box-shadow:var(--ombre);
}
/* Cadre décalé, fixe : il n'accompagne pas le survol */
.visuel::before{
  content:"";position:absolute;z-index:-1;
  inset:26px -26px -26px 26px;
  border:var(--filet-fort);
}
.duo--inverse .visuel::before{inset:26px 26px -26px -26px}
.visuel figcaption{
  font-family:'Didot',Georgia,serif;font-style:italic;
  font-size:15px;color:var(--pierre-3);
  margin-top:20px;
}

/* Emplacement réservé, en attendant le reportage photo.
   Même encombrement qu'une photo : la mise en page ne bougera pas
   quand les images arriveront. */
.visuel--attente .attente-cadre{
  aspect-ratio:4/5;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:32px;text-align:center;
  border:1px dashed rgba(201,171,113,.45);
  background:
    repeating-linear-gradient(135deg,
      rgba(201,171,113,.05) 0 2px, transparent 2px 12px),
    linear-gradient(165deg, rgba(0,44,96,.5), rgba(0,13,31,.6));
}
.attente-mention{
  font-family:'Brown','Jost',sans-serif;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--laiton);
}
.attente-sujet{
  font-family:'Didot',Georgia,serif;font-style:italic;
  font-size:clamp(19px,2.2vw,25px);color:var(--pierre-2);
  max-width:20ch;line-height:1.3;
}
@media(max-width:860px){
  .visuel--attente .attente-cadre{aspect-ratio:16/10}
}

@media(max-width:860px){
  .duo{grid-template-columns:1fr;gap:40px}
  .duo--inverse .duo-visuel{order:0}
  .visuel img{aspect-ratio:4/3}
  .visuel::before{inset:16px -16px -16px 16px}
  .duo--inverse .visuel::before{inset:16px 16px -16px -16px}
}

/* Liste de points */
.points{display:grid;gap:26px;margin-top:34px}
.points li{padding-left:24px;position:relative}
.points li::before{
  content:"";position:absolute;left:0;top:11px;
  width:7px;height:7px;background:var(--laiton);transform:rotate(45deg);
}
.points li::before{transition:transform .4s cubic-bezier(.3,.7,.3,1),background .3s ease}
.points li:hover::before{transform:rotate(135deg) scale(1.2);background:var(--lueur)}
.points strong{
  display:block;font-family:'Didot',Georgia,serif;font-weight:400;
  font-size:19px;color:var(--laiton-clair);margin-bottom:4px;
}
.points span{font-size:15.5px;color:var(--pierre-2);line-height:1.62}

/* Trio de cartes */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media(max-width:840px){.trio{grid-template-columns:1fr}}
.carte{
  border:var(--filet);padding:34px 30px;
  background:linear-gradient(165deg,rgba(0,35,78,.4),rgba(0,17,40,.22));
  transition:border-color .35s ease,transform .35s ease,box-shadow .35s ease;
  position:relative;
}
.carte:hover{border-color:rgba(201,171,113,.55);transform:translateY(-4px);box-shadow:var(--ombre-basse)}
.carte h3{font-size:21px;color:var(--laiton-clair);margin-bottom:12px}
.carte p{font-size:15.5px;color:var(--pierre-2)}

/* ---------- 11. Programme ---------- */
.ventes{display:grid;gap:0;border-top:var(--filet)}
.vente{
  display:grid;grid-template-columns:170px 1fr 230px;
  gap:var(--gap);align-items:center;
  padding:28px 4px;border-bottom:var(--filet);
  transition:background .35s ease,padding-left .35s ease;
}
.vente:hover{background:rgba(0,40,88,.4);padding-left:18px}

/* Vente cliquable : toute la ligne mène à la page de la vacation */
.vente--lien{color:inherit;position:relative}
.vente--lien .vente-titre{transition:color .3s ease}
.vente--lien:hover .vente-titre{color:var(--laiton-clair)}
.vente--lien .vente-maison::after{
  content:"↗";display:inline-block;margin-left:8px;
  opacity:0;transform:translateX(-4px);
  transition:opacity .3s ease,transform .3s ease;
}
.vente--lien:hover .vente-maison::after{opacity:1;transform:none}

.vente-date{font-family:'Brown','Jost',sans-serif;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--pierre-3)}
.vente-date b{display:block;font-family:'Didot',Georgia,serif;font-weight:400;font-size:20px;letter-spacing:.01em;text-transform:none;color:var(--laiton-clair);margin-bottom:2px}
.vente-titre{font-family:'Didot',Georgia,serif;font-size:21px;color:var(--pierre);line-height:1.3}
.vente-titre em{display:block;font-size:15px;color:var(--pierre-3);margin-top:5px;line-height:1.5}
.vente-maison{font-family:'Brown','Jost',sans-serif;font-size:14px;color:var(--laiton);text-align:right}
.vente-maison i{display:block;font-size:13px;color:var(--pierre-3);font-style:normal;margin-top:3px}

@media(max-width:820px){
  .vente{grid-template-columns:1fr;gap:10px;padding:24px 4px}
  .vente-maison{text-align:left}
  .vente:hover{padding-left:10px}
}

/* ---------- 12. Étapes ---------- */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,2.6vw,38px)}
@media(max-width:940px){.etapes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.etapes{grid-template-columns:1fr}}
.etape{
  position:relative;display:flex;flex-direction:column;
  padding:26px 20px 24px;
  border-top:var(--filet-moyen);
  transition:transform .4s cubic-bezier(.3,.7,.3,1),background .4s ease,
             border-color .4s ease,box-shadow .4s ease;
}
.etape-num{
  display:block;
  font-family:'Didot',Georgia,serif;font-style:italic;
  font-size:44px;line-height:1;color:rgba(201,171,113,.45);margin-bottom:14px;
  transition:color .35s ease,transform .4s cubic-bezier(.3,.7,.3,1);
}
.etape h3{font-size:19px;color:var(--laiton-clair);margin-bottom:10px}
.etape p{font-size:15px;color:var(--pierre-2);line-height:1.62}

/* Étape cliquable : toute la carte mène au service, pas seulement
   quelques mots au fil du texte. */
.etape--lien{
  color:inherit;cursor:pointer;
  background:linear-gradient(180deg,rgba(0,46,100,.34),rgba(0,17,40,.12));
  border-top-color:var(--laiton);
}
.etape--lien:hover,
.etape--lien:focus-visible{
  transform:translateY(-8px);
  background:linear-gradient(180deg,rgba(0,62,132,.62),rgba(0,26,58,.34));
  border-top-color:var(--lueur);
  box-shadow:0 26px 54px -28px rgba(0,8,20,.95);
}
.etape--lien:hover .etape-num,
.etape--lien:focus-visible .etape-num{color:var(--lueur);transform:translateX(2px)}
.etape--lien:hover h3,
.etape--lien:focus-visible h3{color:var(--lueur)}
.etape--lien:hover p,
.etape--lien:focus-visible p{color:var(--pierre)}
.etape--lien:active{transform:translateY(-4px)}

/* Libellé d'action, poussé en bas pour aligner les cartes entre elles */
.etape-action{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:auto;padding-top:18px;align-self:flex-start;
  font-family:'Brown','Jost',sans-serif;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--laiton);
  transition:gap .3s ease,color .3s ease;
}
.etape-action::after{content:"↗";font-size:13px;transition:transform .35s cubic-bezier(.3,.7,.3,1)}
.etape--lien:hover .etape-action,
.etape--lien:focus-visible .etape-action{color:var(--lueur);gap:13px}
.etape--lien:hover .etape-action::after,
.etape--lien:focus-visible .etape-action::after{transform:translate(2px,-2px)}

/* ---------- 13. Carte & cave ---------- */
.vitrine{border:var(--filet-moyen);background:linear-gradient(180deg,rgba(0,26,58,.5),rgba(0,11,26,.4));padding:clamp(24px,4vw,46px)}
.onglets{display:flex;gap:8px;flex-wrap:wrap;border-bottom:var(--filet);margin-bottom:34px;padding-bottom:0}
.onglet{
  font-family:'Brown','Jost',sans-serif;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;
  background:none;border:none;cursor:pointer;color:var(--pierre-3);
  padding:12px 20px;position:relative;transition:color .3s ease;
}
.onglet::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--laiton);transform:scaleX(0);transition:transform .32s cubic-bezier(.3,.7,.3,1)}
.onglet:hover{color:var(--pierre)}
.onglet.actif{color:var(--laiton-clair)}
.onglet.actif::after{transform:scaleX(1)}

.ligne{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px dashed rgba(201,171,113,.16)}
.ligne:last-of-type{border-bottom:none}
.ligne-nom{font-family:'Didot',Georgia,serif;font-size:19px;color:var(--pierre)}
.ligne-nom em{font-size:14.5px;color:var(--pierre-3);margin-left:8px;font-family:'Brown','Jost',sans-serif}
.ligne-fil{flex:1;border-bottom:1px dotted rgba(201,171,113,.32);min-width:20px;transform:translateY(-4px)}
.ligne-prix{font-family:'Brown','Jost',sans-serif;font-size:15px;color:var(--laiton-clair);white-space:nowrap}
.ligne-prix s{color:var(--pierre-3);font-size:13px;margin-left:6px}
@media(max-width:560px){
  .ligne{flex-wrap:wrap;gap:4px}
  .ligne-fil{display:none}
  .ligne-prix{width:100%}
}

.carte-avenir{
  font-family:'Didot',Georgia,serif;font-style:italic;
  font-size:clamp(30px,4vw,44px);color:rgba(201,171,113,.4);
  text-align:center;padding:40px 0 20px;
}
.carte-avenir--petit{font-size:clamp(20px,2.4vw,26px);padding:14px 0 6px;text-align:left}

/* Intertitre d'un groupe à l'intérieur d'un panneau de carte */
.groupe-titre{
  font-family:'Brown','Jost',sans-serif;font-weight:400;
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--laiton);
  margin:34px 0 10px;padding-bottom:10px;
  border-bottom:1px solid rgba(201,171,113,.28);
}
.panneau > .groupe-titre:first-child{margin-top:0}

/* Ligne de carte : le nom avance légèrement au survol */
.ligne{transition:padding-left .3s cubic-bezier(.3,.7,.3,1)}
.ligne:hover{padding-left:10px}
.ligne-nom,.ligne-prix{transition:color .3s ease}
.ligne:hover .ligne-nom{color:var(--laiton-clair)}
.ligne:hover .ligne-prix{color:var(--lueur)}

/* Mention d'un service encore indisponible */
.etiquette-avenir{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:26px;padding:9px 18px;
  font-family:'Brown','Jost',sans-serif;font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--laiton);
  border:1px solid rgba(201,171,113,.45);
  background:rgba(0,44,96,.35);
}
.etiquette-avenir::before{
  content:"";width:6px;height:6px;background:var(--laiton);transform:rotate(45deg);
}

.casier{border:var(--filet-moyen);padding:clamp(26px,3.6vw,40px);background:linear-gradient(165deg,rgba(0,35,78,.42),rgba(0,13,31,.35));margin-top:var(--gap)}
.casier h3{font-size:23px;color:var(--laiton-clair);margin-bottom:8px}
.casier > .note{margin-top:18px}

/* ---------- 14. Frise ---------- */
.frise{position:relative;display:grid;gap:0;max-width:880px;margin-inline:auto}
.frise::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(201,171,113,.5) 8%,rgba(201,171,113,.5) 92%,transparent);
}
.epoque{position:relative;padding:0 0 46px 44px}
.epoque:last-child{padding-bottom:0}
.epoque::before{
  content:"";position:absolute;left:-4.5px;top:9px;
  width:10px;height:10px;background:var(--nuit);border:1px solid var(--laiton);
  transform:rotate(45deg);transition:background .35s ease,transform .35s ease;
}
.epoque:hover::before{background:var(--laiton);transform:rotate(45deg) scale(1.25)}
.epoque-an{
  font-family:'Brown','Jost',sans-serif;font-size:12.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--laiton);margin-bottom:6px;
}
.epoque-titre{font-family:'Didot',Georgia,serif;font-size:23px;color:var(--laiton-clair);margin-bottom:9px}
.epoque p{font-size:15.5px;color:var(--pierre-2);line-height:1.66;max-width:62ch}

/* ---------- 15. Rendez-vous ---------- */
.rituels{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.2vw,28px)}
@media(max-width:980px){.rituels{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rituels{grid-template-columns:1fr}}
.rituel{
  position:relative;padding:30px 24px 28px;
  border:1px solid rgba(201,171,113,.3);
  background:linear-gradient(168deg,rgba(0,50,106,.6),rgba(0,17,40,.35));
  transition:border-color .35s ease,transform .35s ease,box-shadow .35s ease,background .35s ease;
}
/* Accent laiton : marque l'angle et sert de repère visuel */
.rituel::before{
  content:"";position:absolute;top:-1px;left:-1px;width:42px;height:2px;
  background:var(--laiton);transition:width .4s cubic-bezier(.3,.7,.3,1);
}
.rituel:hover{
  border-color:rgba(201,171,113,.62);transform:translateY(-6px);
  box-shadow:var(--ombre-basse);
  background:linear-gradient(168deg,rgba(0,58,122,.7),rgba(0,20,48,.45));
}
.rituel:hover::before{width:100%}
.rituel h3{font-size:21px;color:var(--laiton-clair);margin-bottom:0}
.rituel h3 span{
  display:block;font-family:'Brown','Jost',sans-serif;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--laiton);
  margin-top:12px;padding-top:12px;border-top:1px solid rgba(201,171,113,.22);
  line-height:1.5;min-height:3em;
}
.rituel p{font-size:14.8px;color:var(--pierre-2);margin-top:16px;line-height:1.66}

/* ---------- 16. Offres ---------- */
.offres{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2.8vw,40px)}
@media(max-width:900px){.offres{grid-template-columns:1fr}}
.offre{
  display:flex;flex-direction:column;
  position:relative;
  border:1px solid rgba(201,171,113,.3);padding:34px 30px 30px;
  background:linear-gradient(172deg,rgba(0,48,102,.5),rgba(0,13,31,.35));
  transition:border-color .35s ease,transform .35s ease,box-shadow .35s ease,background .35s ease;
}
.offre::before{
  content:"";position:absolute;top:-1px;left:-1px;width:42px;height:2px;
  background:var(--laiton);transition:width .4s cubic-bezier(.3,.7,.3,1);
}
.offre:hover{
  border-color:rgba(201,171,113,.62);transform:translateY(-6px);
  box-shadow:var(--ombre-basse);
  background:linear-gradient(172deg,rgba(0,56,118,.6),rgba(0,16,38,.45));
}
.offre:hover::before{width:100%}
.offre-pour{font-family:'Brown','Jost',sans-serif;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--laiton);line-height:1.5;min-height:3em;margin-bottom:12px}
.offre-nom{font-family:'Didot',Georgia,serif;font-size:26px;color:var(--laiton-clair);margin-bottom:16px}
.offre p{font-size:15px;color:var(--pierre-2);line-height:1.64;flex:1}
.offre-prix{font-family:'Didot',Georgia,serif;font-style:italic;font-size:17px;color:var(--laiton);margin:22px 0 20px;flex:none}

/* Aligne intitulé, titre, texte, prix et bouton entre les trois cartes,
   quel que soit le nombre de lignes de chacun. */
@supports(grid-template-rows:subgrid){
  @media(min-width:901px){
    .offres{grid-template-rows:auto auto 1fr auto auto}
    .offre{display:grid;grid-row:span 5;grid-template-rows:subgrid;gap:0}
    .offre-pour{min-height:0;align-self:start}
    .offre p{flex:none}
  }
}

/* ---------- 17. Infos & formulaire ---------- */
.infos{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);margin-bottom:var(--gap)}
@media(max-width:760px){.infos{grid-template-columns:1fr}}
.info h3{font-size:22px;color:var(--laiton-clair);margin-bottom:16px;padding-bottom:12px;border-bottom:var(--filet)}
.info p,.info address{font-size:16px;color:var(--pierre-2);font-style:normal;line-height:1.7}
.info p + p{margin-top:14px}
.horaires li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dashed rgba(201,171,113,.14);font-size:15.5px}
.horaires li:last-child{border-bottom:none}
.horaires b{font-weight:400;color:var(--pierre)}
.horaires span{color:var(--pierre-3)}

/* Prestations : reprend le catalogue de services des données structurées */
.services{margin-bottom:var(--gap)}
.services-titre{
  font-family:'Brown','Jost',sans-serif;font-weight:400;
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--laiton);margin-bottom:22px;
  padding-bottom:12px;border-bottom:var(--filet);
}
.services-liste{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 44px}
.services-liste li{
  padding-left:22px;position:relative;
  transition:padding-left .3s cubic-bezier(.3,.7,.3,1);
}
.services-liste li::before{
  content:"";position:absolute;left:0;top:10px;
  width:6px;height:6px;background:var(--laiton);transform:rotate(45deg);
  transition:transform .4s cubic-bezier(.3,.7,.3,1),background .3s ease;
}
.services-liste li:hover{padding-left:28px}
.services-liste li:hover::before{transform:rotate(135deg) scale(1.2);background:var(--lueur)}
.services-liste strong{
  display:block;font-family:'Didot',Georgia,serif;font-weight:400;
  font-size:18px;color:var(--laiton-clair);margin-bottom:3px;
}
.services-liste span{font-size:14.5px;color:var(--pierre-2);line-height:1.6}
@media(max-width:760px){.services-liste{grid-template-columns:1fr}}

.form-cadre{
  border:var(--filet-moyen);
  background:linear-gradient(180deg,rgba(0,30,66,.45),rgba(0,11,26,.55));
  box-shadow:inset 0 0 90px rgba(0,9,24,.4);
  padding:clamp(28px,4.4vw,52px);
}
.form-titre{font-size:clamp(26px,3vw,34px);color:var(--laiton-clair);margin-bottom:8px}
.form-sous{font-family:'Didot',Georgia,serif;font-style:italic;color:var(--pierre-2);margin-bottom:32px;font-size:17.5px}
.form-ligne{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.champ{margin-bottom:22px;display:flex;flex-direction:column}
.champ label{
  font-family:'Brown','Jost',sans-serif;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--laiton);margin-bottom:9px;
}
.champ input,.champ select,.champ textarea{
  font-family:'Brown','Jost',sans-serif;font-size:15.5px;color:var(--pierre);
  background:rgba(0,20,46,.85);border:1px solid rgba(201,171,113,.3);
  padding:14px 16px;transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.champ input:hover,.champ select:hover,.champ textarea:hover{border-color:rgba(201,171,113,.5)}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--laiton);
  box-shadow:0 0 0 3px rgba(201,171,113,.14);background:rgba(0,24,54,.95);
}
.champ textarea{resize:vertical;min-height:130px;line-height:1.6}
.champ-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-retour{
  font-family:'Brown','Jost',sans-serif;font-size:14.5px;margin-top:18px;
  padding:14px 18px;border:var(--filet-moyen);background:rgba(0,20,46,.6);
}
.form-retour[data-etat="succes"]{border-color:var(--lueur);color:var(--lueur)}
.form-retour[data-etat="erreur"]{border-color:#E08B6B;color:#F0B69C}
.form-note{font-family:'Brown','Jost',sans-serif;font-size:13px;color:var(--pierre-3);margin-top:18px;line-height:1.6}

@media(max-width:640px){.form-ligne{grid-template-columns:1fr;gap:0}}

/* ---------- 18. Pied de page ---------- */
.pied{
  border-top:var(--filet-moyen);
  background:linear-gradient(180deg,rgba(0,26,58,.7),var(--encre));
  padding:clamp(56px,7vw,84px) 0 0;
}
.pied-grille{
  max-width:var(--mesure);margin-inline:auto;padding-inline:var(--gouttiere);
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(30px,4vw,52px);
  padding-bottom:52px;
}
.pied-nom{font-family:'Didot',Georgia,serif;font-size:27px;color:var(--laiton-clair);letter-spacing:.03em}
.pied-baseline{font-family:'Didot',Georgia,serif;font-style:italic;color:var(--pierre-3);font-size:16.5px;margin:8px 0 18px}
.pied h2{
  font-family:'Brown','Jost',sans-serif;font-weight:400;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--laiton);margin-bottom:16px;
}
.pied address{font-style:normal;font-size:16px;color:var(--pierre-2);line-height:1.7}
.pied li{padding:5px 0;font-size:15.5px;color:var(--pierre-2)}
/* Les boutons-icônes sont exclus : sans cela .pied a:hover, plus
   spécifique, leur imposait le laiton clair sur fond laiton. */
.pied a:not(.contact){color:var(--pierre-2)}

/* Texte réservé aux lecteurs d'écran : retiré de la vue sans être
   retiré du document, il porte aussi la valeur des microformats. */
.hors-ecran{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* Contacts du pied de page, réduits à leurs icônes */
.contacts{display:flex;gap:12px;margin-top:20px}
.contact{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;
  border:1px solid rgba(201,171,113,.34);
  color:var(--pierre-2);
  transition:color .3s ease,border-color .3s ease,background .3s ease,transform .3s ease;
}
.contact svg{width:19px;height:19px;display:block}
.contact:hover,.contact:focus-visible{
  /* Bleu de la maison sur le laiton, plutôt que l'encre presque noire :
     le contraste reste élevé et la teinte se lit comme un bleu. */
  color:var(--nuit);
  border-color:var(--laiton-clair);
  background:linear-gradient(120deg,var(--laiton),var(--laiton-clair));
  transform:translateY(-2px);
}
.pied a:not(.contact):hover{color:var(--laiton-clair)}
.pied-bas{
  border-top:var(--filet);
  max-width:var(--mesure);margin-inline:auto;padding:22px var(--gouttiere) 34px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.pied-bas p{font-family:'Brown','Jost',sans-serif;font-size:12.5px;color:var(--pierre-3)}
@media(max-width:900px){.pied-grille{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.pied-grille{grid-template-columns:1fr}}

/* ---------- 19. Pages légales ---------- */
.fil{max-width:var(--mesure);margin-inline:auto;padding:26px var(--gouttiere) 0;font-family:'Brown','Jost',sans-serif;font-size:12.5px;letter-spacing:.06em}
.fil ol{display:flex;flex-wrap:wrap;gap:9px}
.fil li:not(:last-child)::after{content:"›";margin-left:9px;color:var(--laiton);opacity:.65}
.fil a{color:var(--pierre-3)}
.fil [aria-current]{color:var(--laiton)}

.legale{max-width:820px;padding-block:clamp(40px,5vw,64px) var(--rythme)}
.legale h1{font-size:clamp(32px,4.4vw,50px);color:var(--laiton-clair);margin-bottom:8px}
.legale h2{font-family:'Didot',Georgia,serif;font-size:22px;color:var(--laiton-clair);margin:38px 0 12px}
.legale h3{font-family:'Didot',Georgia,serif;font-size:18px;color:var(--pierre);margin:22px 0 8px}
.legale p,.legale li{font-size:15.5px;color:var(--pierre-2);margin-bottom:11px;max-width:76ch;line-height:1.75}
.legale ul,.legale ol{padding-left:22px;margin-bottom:14px}
.legale ul li{list-style:none;position:relative}
.legale ul li::before{content:"";position:absolute;left:-18px;top:10px;width:5px;height:5px;background:var(--laiton);transform:rotate(45deg)}
.legale ol{list-style:decimal}
.legale ol li{list-style:decimal}
.legale a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(201,171,113,.45)}
.legale a:hover{text-decoration-color:var(--lueur)}
.legale code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--laiton-clair);background:rgba(0,20,46,.8);padding:2px 7px;white-space:nowrap}
.legale table{border-collapse:collapse;width:100%;margin:16px 0 22px;font-size:14.5px}
.legale th,.legale td{border:var(--filet);padding:11px 14px;text-align:left;vertical-align:top;color:var(--pierre-2)}
.legale td:first-child{min-width:130px}
.legale th{color:var(--laiton);font-family:'Brown','Jost',sans-serif;font-weight:400;letter-spacing:.08em;font-size:11.5px;text-transform:uppercase;background:rgba(0,35,78,.4)}
/* Libellés en début de ligne : lisibles, sans capitales forcées */
.legale th[scope="row"]{
  font-size:13.5px;letter-spacing:.02em;text-transform:none;
  white-space:nowrap;width:1%;color:var(--pierre-2);
}
.tableau-defilant{overflow-x:auto}
.retour{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Brown','Jost',sans-serif;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--laiton);margin-bottom:30px;
  transition:gap .3s ease;
}
.retour:hover{gap:16px}
.maj{font-family:'Brown','Jost',sans-serif;font-size:12.5px;color:var(--pierre-3);letter-spacing:.06em;margin-bottom:30px}

/* ---------- 20. Page 404 ---------- */
.erreur{text-align:center;padding-block:clamp(70px,10vw,130px);max-width:720px;margin-inline:auto}
.erreur-code{font-family:'Didot',Georgia,serif;font-size:clamp(70px,14vw,140px);color:rgba(201,171,113,.35);line-height:1;margin-bottom:10px}
.erreur .groupe-btn{justify-content:center;margin-top:36px}

/* ---------- 21. Bandeau cookies ---------- */
.bandeau-cookies{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:150;
  max-width:1040px;margin-inline:auto;
  background:#00142e;
  border:var(--filet-fort);box-shadow:0 26px 70px -20px rgba(0,0,0,.85);
  padding:20px 24px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  animation:monter .5s cubic-bezier(.2,.7,.3,1) both;
}
.bandeau-cookies p{font-size:14px;color:var(--pierre-2);flex:1;min-width:250px}
.cookies-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- 22. Impression ---------- */
@media print{
  .barre,.pied,.bandeau-cookies,.ticker,.saut,.fil,.retour,.groupe-btn{display:none!important}
  body,#fond{background:#fff!important;color:#000!important}
  #fond{background-image:none!important}
  .legale p,.legale li,.legale h1,.legale h2,.legale h3,.titre{color:#000!important}
  a{color:#000!important;text-decoration:underline}
  .legale{max-width:none}
}