/* The French Selection · feuille de style · v2 2026-10-02
   Charte (brand book 30/08, mini charte) :
   ENCRE #23291F fond dominant · PARCHEMIN #EDE7D8 texte et fond clair
   VERT-DE-GRIS #5C7A68 accent nature · LAITON #A9793F accents, repères, CTA sur encre
   Typographies : Fraunces (titres), Archivo (texte), IBM Plex Mono (repères) */

/* ---------- Polices auto-hébergées ---------- */
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}

/* ---------- Jetons ---------- */
:root{
  --parchemin:#EDE7D8;
  --parchemin-ombre:#E2DAC6;
  --parchemin-voile:#C9C3B2;   /* parchemin atténué pour le texte secondaire sur encre */
  --encre:#23291F;
  --encre-claire:#2C3327;      /* encre légèrement éclaircie pour les surfaces sur encre */
  --encre-douce:#4A5243;
  --vdg:#5C7A68;
  --laiton:#A9793F;
  --laiton-clair:#C0955E;
  --mesure:66ch;
  --ligne:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%2224%22%20viewBox%3D%220%200%20600%2024%22%3E%3Cpath%20d%3D%22M0%2017%20L70%2017%20C95%2017%20103%207%20128%207%20C150%207%20160%2017%20196%2017%20L260%2017%20C285%2017%20295%2011%20318%2011%20C340%2011%20350%2017%20388%2017%20L452%2017%20C476%2017%20487%205%20512%205%20C534%205%20545%2017%20600%2017%22%20fill%3D%22none%22%20stroke%3D%22%23A9793F%22%20stroke-width%3D%221.3%22%2F%3E%3C%2Fsvg%3E");
  --rayon:10px;
}

/* ---------- Base : l'encre domine ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}
body{
  margin:0;
  background:var(--encre);
  color:var(--parchemin);
  font-family:'Archivo',system-ui,sans-serif;
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block;}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.15;margin:0 0 .75em;}
h1{font-size:clamp(1.9rem,5.5vw,3.1rem);}
h2{font-size:clamp(1.45rem,3.5vw,2rem);margin-top:0;}
h3{font-size:1.2rem;}
p{margin:0 0 1em;max-width:var(--mesure);}
ul,ol{max-width:var(--mesure);padding-left:1.2em;}
li{margin-bottom:.4em;}
a{color:inherit;text-decoration-color:var(--laiton-clair);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{text-decoration-thickness:2px;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--laiton-clair);outline-offset:3px;border-radius:2px;}
strong{font-weight:600;}
hr{border:0;border-top:1px solid var(--laiton);max-width:120px;margin:2.5rem 0;}
::selection{background:var(--laiton);color:#FFFDF7;}

/* Repères pratiques : IBM Plex Mono en laiton (accent métal, repères) */
.reperes{
  font-family:'IBM Plex Mono',monospace;
  font-size:.82rem;
  letter-spacing:.01em;
  color:var(--laiton-clair);
  margin:.25rem 0 1.5rem;
}

/* ---------- Accessibilité ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--parchemin);color:var(--encre);padding:.6em 1em;z-index:100;}
.skip:focus{left:0;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- Bandeau (encre, logo parchemin >= 200 px de large) ---------- */
.bandeau{
  background:var(--encre) var(--ligne) left bottom repeat-x;
  position:sticky;top:0;z-index:50;
}
.bandeau__inner{
  max-width:1120px;margin:0 auto;padding:.7rem 1.1rem;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding-bottom:1.1rem;
}
.bandeau__logo{flex:0 1 auto;}
.bandeau__logo img{width:clamp(200px,24vw,250px);height:auto;}
.bandeau__spacer{flex:1;}
.nav{display:flex;gap:1.3rem;align-items:center;font-weight:600;font-size:.92rem;}
.nav a{text-decoration:none;}
.nav a:hover,.nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--laiton-clair);text-decoration-thickness:2px;text-underline-offset:5px;}
.lang{
  font-family:'IBM Plex Mono',monospace;font-size:.8rem;
  border:1px solid var(--laiton);color:var(--laiton-clair);padding:.25em .7em;text-decoration:none;border-radius:4px;
}
.lang:hover{background:var(--laiton);color:#FFFDF7;}

/* menu mobile sans script */
.nav-toggle{display:none;}
.nav-burger{display:none;}
@media (max-width:900px){
  .nav-burger{
    display:block;cursor:pointer;border:1px solid var(--laiton);color:var(--laiton-clair);border-radius:4px;
    padding:.35em .7em;font-family:'IBM Plex Mono',monospace;font-size:.8rem;user-select:none;
  }
  .nav{
    display:none;width:100%;flex-direction:column;align-items:flex-start;
    gap:.9rem;padding:.8rem 0 .4rem;border-top:1px solid rgba(237,231,216,.2);
  }
  .nav-toggle:checked ~ .nav{display:flex;}
}

/* ---------- Hero (encre, continuité avec le corps) ---------- */
.hero{
  background:var(--encre);color:var(--parchemin);
  text-align:center;
  padding:clamp(3.2rem,9vw,6.5rem) 1.2rem clamp(3rem,8vw,5.5rem);
}
.hero__logo{max-width:min(560px,82vw);margin:0 auto 1.8rem;animation:apparait .9s ease-out both;}
.hero__tagline{
  font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(1.25rem,3.4vw,1.9rem);letter-spacing:.04em;
  margin:0 auto 1rem;animation:apparait .9s ease-out .45s both;
}
.hero__filet{border:0;background:var(--ligne) center/auto 24px no-repeat;height:24px;width:150px;margin:1rem auto;animation:apparait .9s ease-out .7s both;}
.hero__sub{max-width:44ch;margin:0 auto 2rem;animation:apparait .9s ease-out .9s both;}
.hero__cta{animation:apparait .9s ease-out 1.1s both;}
@keyframes apparait{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* En-tête de page intérieure, sur encre */
.entete-page{max-width:1120px;margin:0 auto;padding:clamp(2.2rem,6vw,3.8rem) 1.1rem 0;}

/* ---------- Boutons : laiton sur encre (association préférée du brand book) ---------- */
.btn{
  border-radius:4px;
  display:inline-block;font-family:'Archivo',sans-serif;font-weight:600;font-size:.95rem;
  padding:.75em 1.5em;border:1px solid var(--laiton);text-decoration:none;cursor:pointer;
  background:var(--laiton);color:#FFFDF7;
  transition:background .15s ease;
}
.btn:hover{background:#8F6430;}
.btn--creux{background:transparent;color:var(--laiton-clair);}
.btn--creux:hover{background:var(--laiton);color:#FFFDF7;}
.section--feuille .btn--creux,.carte .btn--creux{color:var(--laiton);}
.section--feuille .btn--creux:hover,.carte .btn--creux:hover{color:#FFFDF7;}
.btn + .btn{margin-left:.7rem;}

/* ---------- Sections ---------- */
.section{max-width:1120px;margin:0 auto;padding:clamp(2.4rem,6vw,4.2rem) 1.1rem;}
/* Bande parchemin : le fond clair de la charte, pour les moments de lecture */
.section--feuille{
  max-width:none;background:var(--parchemin) var(--ligne) left top repeat-x;color:var(--encre);
}
.section--feuille > .section__inner{max-width:1120px;margin:0 auto;padding:clamp(2.6rem,6vw,4.4rem) 1.1rem;}
.section--feuille a{text-decoration-color:var(--laiton);}
.section--feuille .reperes{color:var(--laiton);}
/* Conservée pour compatibilité : bande encre explicite */
.section--encre{max-width:none;background:var(--encre);color:var(--parchemin);}
.section--encre > .section__inner{max-width:1120px;margin:0 auto;padding:clamp(2.6rem,6vw,4.4rem) 1.1rem;}
.section__titre{display:flex;align-items:baseline;gap:1rem;}
.section__titre::after{content:"";flex:1;height:24px;background:var(--ligne) left center repeat-x;transform:translateY(2px);}

/* ---------- Grille des parcours : feuillets parchemin sur l'encre ---------- */
.grille{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));}
.titre-ligne{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;margin:2.6rem 0 1rem;}
.titre-ligne h3{margin:0;}
.carte{
  background:var(--parchemin);color:var(--encre);
  border-radius:var(--rayon);
  padding:1.7rem 1.6rem 1.6rem;display:flex;flex-direction:column;
}
.carte::before{content:"";width:46px;border-top:1px solid var(--laiton);margin-bottom:1rem;}
.carte h3{font-size:1.45rem;margin-bottom:.2em;}
.carte a{text-decoration-color:var(--laiton);}
.carte .reperes{margin-bottom:1rem;color:var(--laiton);}
.carte p{flex:1;}
.carte__prix{font-family:'IBM Plex Mono',monospace;font-size:.85rem;margin:.6rem 0 1.1rem;color:var(--encre-douce);}
/* En préparation : accent nature en vert-de-gris, jamais collé au laiton */
.carte--sourde{
  background:transparent;color:var(--parchemin);
  border:1px dashed var(--vdg);border-radius:var(--rayon);opacity:.9;
}
.carte--sourde::before{border-top-color:var(--vdg);}
.carte--sourde .reperes{color:var(--vdg);}
/* Belle Époque : encre sur encre, cerclée de laiton (le bec de gaz) */
.carte--nuit{background:var(--encre-claire);color:var(--parchemin);border:1px solid var(--laiton);border-radius:var(--rayon);}
.carte--nuit a{text-decoration-color:var(--laiton-clair);}
.carte--nuit .carte__prix,.carte--nuit .reperes{color:var(--laiton-clair);}

/* ---------- Page parcours ---------- */
.deux-colonnes{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));max-width:1120px;}
.scene{
  font-family:'Fraunces',Georgia,serif;font-size:clamp(1.1rem,2.4vw,1.3rem);
  line-height:1.6;max-width:58ch;
}
.scene::first-letter{color:var(--laiton-clair);font-size:1.6em;line-height:1;}
.section--feuille .scene::first-letter{color:var(--laiton);}
.etapes{counter-reset:etape;list-style:none;padding:0;max-width:var(--mesure);}
.etapes li{
  counter-increment:etape;position:relative;padding:0 0 1.1rem 2.6rem;margin:0;
  border-left:1px solid var(--laiton);margin-left:.6rem;
}
.etapes li::before{
  content:counter(etape,decimal-leading-zero);
  position:absolute;left:-1rem;top:-.1rem;background:var(--encre);
  font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--laiton-clair);
  padding:.1em .2em;
}
.etapes li:last-child{border-left-color:transparent;}
/* Bloc des prix : feuillet parchemin (fond clair de la charte) */
.prix-bloc{
  background:var(--parchemin);color:var(--encre);
  border-radius:var(--rayon);padding:1.4rem 1.5rem;max-width:var(--mesure);margin:1.5rem 0;
}
.prix-bloc::before{content:"";display:block;width:46px;border-top:1px solid var(--laiton);margin-bottom:.9rem;}
.prix-bloc p{margin:0 0 .4em;}
.prix-bloc a{text-decoration-color:var(--laiton);}

/* Barre de réservation fixe sur mobile */
.barre-resa{display:none;}
@media (max-width:700px){
  .barre-resa{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;
    background:var(--encre);color:var(--parchemin);
    align-items:center;justify-content:space-between;gap:1rem;
    padding:.7rem 1rem;border-top:1px solid var(--laiton);
  }
  .barre-resa .reperes{margin:0;}
  body.avec-barre{padding-bottom:4.2rem;}
}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid rgba(237,231,216,.25);max-width:var(--mesure);}
.faq summary{
  cursor:pointer;font-weight:600;padding:1rem 0;list-style:none;position:relative;padding-right:2rem;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:.3rem;top:.9rem;color:var(--laiton-clair);font-family:'IBM Plex Mono',monospace;}
.faq details[open] summary::after{content:"\2212";}
.faq details > div{padding:0 0 1.1rem;}
.section--feuille .faq details{border-bottom-color:var(--parchemin-ombre);}
.section--feuille .faq summary::after{color:var(--laiton);}

/* ---------- Formulaires ---------- */
form{max-width:580px;}
.champ{margin-bottom:1.1rem;}
.champ label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.3rem;}
.champ input,.champ select,.champ textarea{
  width:100%;padding:.65em .8em;font:inherit;color:var(--encre);
  background:#FFFDF7;border:1px solid var(--laiton);border-radius:5px;
}
.champ textarea{min-height:120px;resize:vertical;}
.champ--note{font-size:.85rem;color:var(--parchemin-voile);max-width:var(--mesure);}
.section--feuille .champ--note{color:var(--encre-douce);}
.champs-ligne{display:grid;gap:1rem;grid-template-columns:1fr 1fr;}
@media (max-width:540px){.champs-ligne{grid-template-columns:1fr;}}

/* ---------- Journal ---------- */
.article{max-width:var(--mesure);margin:0 auto;padding:clamp(2.2rem,6vw,3.5rem) 1.1rem;}
.article time{font-family:'IBM Plex Mono',monospace;font-size:.8rem;color:var(--laiton-clair);}
.article h1{margin-top:.4rem;}

/* ---------- Fil d'Ariane ---------- */
.ariane{max-width:1120px;margin:0 auto;padding:1.1rem 1.1rem 0;font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--parchemin-voile);}
.ariane a{text-decoration:none;}
.ariane a:hover{text-decoration:underline;}

/* ---------- Pied de page ---------- */
.pied{background:var(--encre) var(--ligne) left top repeat-x;color:var(--parchemin);margin-top:3rem;}
.pied__inner{max-width:1120px;margin:0 auto;padding:3rem 1.1rem 2rem;}
.pied__logo{max-width:280px;margin-bottom:1.2rem;}
.pied__tagline{font-family:'Fraunces',Georgia,serif;font-size:1.05rem;margin-bottom:1.6rem;}
.pied__cols{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.pied h2{font-size:1rem;font-family:'Archivo',sans-serif;font-weight:600;}
.pied ul{list-style:none;padding:0;margin:0;}
.pied li{margin-bottom:.45em;}
.pied a{text-decoration:none;}
.pied a:hover{text-decoration:underline;text-decoration-color:var(--laiton-clair);}
.pied__fiche{font-size:.92rem;max-width:52ch;opacity:.95;}
.pied__legal{
  border-top:1px solid rgba(169,121,63,.5);margin-top:2.2rem;padding-top:1.2rem;
  font-size:.82rem;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;opacity:.9;
}

/* ---------- Divers ---------- */
.filet-promenade{border:0;border-top:1px solid var(--laiton);max-width:1120px;margin:0 auto;}
.note-laiton{border-left:3px solid var(--laiton);padding:.2rem 0 .2rem 1rem;color:var(--parchemin-voile);font-size:.95rem;max-width:var(--mesure);}
.section--feuille .note-laiton{color:var(--encre-douce);}
.table-simple{border-collapse:collapse;font-size:.95rem;}
.table-simple td,.table-simple th{border:1px solid rgba(237,231,216,.3);padding:.5em .9em;text-align:left;}

/* ---------- Pied de page : marque à gauche, réseaux à droite ---------- */
.pied__haut{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap;margin-bottom:2.4rem;}
.pied__marque .pied__logo{margin-bottom:1.2rem;}
.pied__marque .pied__tagline{margin-bottom:0;}
.pied__social{text-align:right;}
.pied__social-titre{
  font-family:'IBM Plex Mono',monospace;font-size:.88rem;letter-spacing:.06em;
  color:var(--parchemin);margin:0 0 .9rem;max-width:none;
}
.pied .reseaux{list-style:none;display:flex;gap:.9rem;padding:0;margin:0;justify-content:flex-end;}
.pied .reseaux li{margin:0;}
.reseaux a{
  display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;
  border:1.5px solid var(--laiton-clair);border-radius:50%;color:var(--parchemin);
  transition:background .15s ease,border-color .15s ease;
}
.reseaux a:hover{background:var(--laiton);border-color:var(--laiton);color:#FFFDF7;text-decoration:none;}
.reseaux svg{width:23px;height:23px;fill:currentColor;}
@media (max-width:640px){
  .pied__social{text-align:left;}
  .pied .reseaux{justify-content:flex-start;}
}