/* === DEBUT DU BLOC DES POLICES, GENERE PAR outils/polices.mjs === */
/* ---------- Polices hébergées sur notre serveur ----------
   Les trois polices sont servies depuis ce domaine, et non plus depuis
   Google. Deux raisons. L'affichage n'attend plus une feuille de styles
   distante. Et l'adresse IP du visiteur n'est plus transmise à Google sans
   son accord, ce que la CNIL reproche et qui a déjà valu des condamnations
   en France.

   Licence : SIL Open Font License 1.1 pour les trois familles, qui autorise
   explicitement cet hébergement. Voir src/assets/fonts/LICENCE.txt.

   Bloc généré. Pour le refaire, voir DEVELOPPEMENT.md, section
   « Regénérer les polices ». Ne pas le modifier à la main.

   Les fichiers latin-ext ne sont téléchargés par le navigateur que si une
   page contient un caractère qui sort du latin de base. En français cela
   n'arrive pas : les accents, le e dans l'o et le signe euro sont tous dans
   le sous-ensemble latin. */
@font-face{
  font-family:'Dancing Script';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(/assets/fonts/dancing-script-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Dancing Script';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(/assets/fonts/dancing-script-600-latin.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:'Dancing Script';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(/assets/fonts/dancing-script-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Dancing Script';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(/assets/fonts/dancing-script-700-latin.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:'EB Garamond';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url(/assets/fonts/eb-garamond-400-italique-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'EB Garamond';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url(/assets/fonts/eb-garamond-400-italique-latin.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:'EB Garamond';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/assets/fonts/eb-garamond-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'EB Garamond';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/assets/fonts/eb-garamond-400-latin.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:'EB Garamond';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(/assets/fonts/eb-garamond-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'EB Garamond';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(/assets/fonts/eb-garamond-500-latin.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:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/assets/fonts/inter-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/assets/fonts/inter-400-latin.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:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(/assets/fonts/inter-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(/assets/fonts/inter-500-latin.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:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(/assets/fonts/inter-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(/assets/fonts/inter-600-latin.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;
}
/* === FIN DU BLOC DES POLICES === */

/* Valeurs Bois - feuille de style unique
   Mise en page : sections pleine largeur, aucun cadre. Photo plein ecran en ouverture,
   fondu lent entre les vues, respiration verticale large, lecture en colonne etroite.
   Le theme sombre est pret mais desactive : decommenter le bloc en bas pour l'activer. */

:root{
  --bg:#F7F5F0;
  --surface:#FFFFFF;
  --surface-2:#EFEBE2;
  --fg:#2A2E28;
  --fg-soft:#5C6359;
  --moss:#5E7355;
  --moss-deep:#43523D;
  --bark:#A67B5B;
  --line:#DED8CB;
  --shadow:0 1px 2px rgba(42,46,40,.05), 0 8px 24px rgba(42,46,40,.06);

  --script:"Dancing Script","Brush Script MT",cursive;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --wrap:1180px;
  --read:66ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
/* height:auto est indispensable : sans lui, les attributs width/height du HTML
   (poses pour reserver la place et eviter les sauts de mise en page)
   l'emportent sur aspect-ratio et imposent la hauteur d'origine. */
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--moss);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;background:var(--moss);color:#fff;padding:.7em 1.2em;z-index:100}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
section{padding-block:clamp(56px,8vw,104px)}

/* ---------- Typographie ----------
   Dancing Script : uniquement sur de courts fragments, jamais en capitales,
   jamais d'interlettrage (il casse les liaisons), interligne genereux. */
.script{
  font-family:var(--script);
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  line-height:1.25;
  color:var(--bark);
}
h1,h2,h3{font-family:var(--serif);font-weight:400;text-wrap:balance;margin:0}
h1{font-size:clamp(2rem,1.3rem + 3vw,3.4rem);line-height:1.15}
h1 .script{display:block;font-size:1.22em;margin-bottom:.06em}
h2{font-size:clamp(1.6rem,1.2rem + 1.7vw,2.5rem);line-height:1.2}
h3{font-size:1.2rem;line-height:1.35}
p{margin:0;max-width:var(--read)}
.eyebrow{
  font-family:var(--sans);font-size:.76rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--moss-deep);margin:0;
}
.lead{font-family:var(--serif);font-size:clamp(1.12rem,1rem + .5vw,1.4rem);line-height:1.6;color:var(--fg-soft)}
.stack{display:flex;flex-direction:column;gap:18px;align-items:flex-start}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--sans);font-size:.95rem;font-weight:600;
  padding:.82em 1.5em;border-radius:100px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s;
}
.btn-main{background:var(--moss);color:#fff}
.btn-main:hover{background:var(--moss-deep)}
.btn-ghost{border-color:var(--line);color:var(--fg);background:transparent}
.btn-ghost:hover{border-color:var(--moss);color:var(--moss)}
.btn-light{background:rgba(255,255,255,.94);color:#2A2E28}
.btn-light:hover{background:#fff}

/* ---------- En-tete ---------- */
header{
  position:sticky;top:0;z-index:40;
  background:rgba(247,245,240,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.bar{display:flex;align-items:center;gap:20px;min-height:68px}
.logo{font-family:var(--script);font-weight:700;font-size:1.75rem;color:var(--fg);text-decoration:none;line-height:1;white-space:nowrap}

/* Libelle reserve aux lecteurs d'ecran */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Menu de bureau : de vrais liens vers les pages, et des sous-menus deroulants.
   Les ancres vers la page d'accueil ont ete abandonnees : on ne voyait pas le
   contenu des rubriques, et le clic renvoyait au milieu de l'accueil. */
.nav-desk{margin-left:auto;display:flex;align-items:center;gap:18px}
.menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px}
.menu > li{position:relative}
.menu-lien{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--sans);font-size:.92rem;color:var(--fg-soft);
  background:none;border:0;cursor:pointer;text-decoration:none;
  padding:10px 12px;border-radius:9px;
  transition:color .2s,background .2s;
}
.menu-lien:hover,.has-sub:hover > .menu-lien{color:var(--moss);background:rgba(94,115,85,.08)}
.menu-lien.actif{color:var(--moss);font-weight:600}
.chev{
  width:7px;height:7px;flex:none;margin-top:-3px;
  border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;
  transform:rotate(45deg);transition:transform .2s,margin .2s;
}
.has-sub:hover .chev,[aria-expanded="true"] .chev{transform:rotate(225deg);margin-top:3px}

.sous-menu{
  position:absolute;top:100%;left:-6px;min-width:240px;
  list-style:none;margin:0;padding:8px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(7px);
  transition:opacity .18s,transform .18s,visibility .18s;
}
.has-sub:hover > .sous-menu,
.menu-lien[aria-expanded="true"] + .sous-menu{opacity:1;visibility:visible;transform:translateY(0)}
.sous-menu a{display:block;padding:10px 12px;border-radius:9px;font-size:.92rem;color:var(--fg-soft);text-decoration:none;white-space:nowrap}
.sous-menu a:hover{background:var(--surface-2);color:var(--moss)}
.sous-menu a[aria-current="page"]{color:var(--moss);font-weight:600}

/* Burger : invisible en bureau, seule commande de navigation en mobile. */
.burger{
  display:none;margin-left:auto;align-items:center;justify-content:center;
  width:46px;height:46px;flex:none;padding:0;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:13px;
  transition:background .2s,border-color .2s;
}
.burger:hover{border-color:var(--moss)}
.burger-traits{display:flex;flex-direction:column;gap:5px;width:20px}
.burger-traits i{display:block;height:2px;background:var(--fg);border-radius:2px}

@media (max-width:980px){
  .nav-desk{display:none}
  .burger{display:inline-flex}
}

/* ---------- Modale mutualisee ----------
   Un seul squelette pour le menu mobile, la visionneuse de photos et la video.
   Reference demandee par le client : la modale d'ajout au panier de geiler92.
   Les quatre marqueurs de cette reference sont tenus ici : coins arrondis,
   marge entre la boite et les bords, flou applique au site derriere,
   et fermeture en pastille ronde bien visible. */
.modale{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.modale[hidden]{display:none}
.modale-fond{
  position:absolute;inset:0;
  background:rgba(42,46,40,.42);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  animation:modale-fondu .22s ease both;
}
.modale-boite{
  position:relative;z-index:1;
  width:100%;max-width:440px;
  max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--bg);
  border-radius:22px;
  box-shadow:0 18px 60px rgba(42,46,40,.3);
  padding:26px 22px 22px;
  animation:modale-monte .26s cubic-bezier(.2,.8,.3,1) both;
}
@supports (max-height:100dvh){
  .modale-boite{max-height:calc(100dvh - 40px)}
}
@keyframes modale-fondu{from{opacity:0}to{opacity:1}}
@keyframes modale-monte{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

.modale-x{
  position:absolute;top:14px;right:14px;z-index:3;
  width:40px;height:40px;flex:none;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--line);border-radius:50%;
  box-shadow:0 2px 10px rgba(42,46,40,.14);
  transition:background .2s,transform .2s;
}
.modale-x:hover{background:var(--surface-2);transform:rotate(90deg)}
.modale-x svg{width:17px;height:17px;fill:none;stroke:var(--fg);stroke-width:2.1;stroke-linecap:round}

/* Le defilement du site est bloque pendant qu'une modale est ouverte. */
body.modale-ouverte{overflow:hidden}

/* ---------- Menu mobile dans la modale ---------- */
.modale-boite--menu{max-width:420px}
.modale-titre{
  font-family:var(--script);font-weight:700;font-size:1.65rem;line-height:1;
  color:var(--fg);margin:0 0 10px;padding-right:46px;
}
.nav-mob ul{list-style:none;margin:0;padding:0}
.nav-mob > ul > li + li{border-top:1px solid var(--line)}
.nav-mob-parent{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  font-family:var(--serif);font-size:1.16rem;color:var(--fg);text-align:left;
  background:none;border:0;padding:15px 2px;cursor:pointer;text-decoration:none;
}
.nav-mob-parent[aria-current="page"]{color:var(--moss)}
.nav-mob-sous{display:none;padding:0 0 12px 2px}
.nav-mob-parent[aria-expanded="true"] + .nav-mob-sous{display:block}
.nav-mob-sous a{display:block;padding:9px 0;font-size:.98rem;color:var(--fg-soft);text-decoration:none}
.nav-mob-sous a:hover{color:var(--moss)}
.nav-mob-sous a[aria-current="page"]{color:var(--moss);font-weight:600}
.modale-tel{width:100%;justify-content:center;margin-top:18px}


/* ---------- Visionneuse de photos ----------
   Le role de bouton et le focus sont poses par le script : sans JavaScript
   il n'y a pas de visionneuse, donc rien ne doit laisser croire le contraire. */
.galerie img.zoomable{cursor:zoom-in}
.galerie img.zoomable:focus-visible{outline:2px solid var(--moss);outline-offset:3px}

.modale-boite--photo{width:-moz-fit-content;width:fit-content;max-width:min(1080px,100%);padding:14px 14px 4px;background:var(--surface)}
.visionneuse{position:relative;line-height:0}
.visionneuse img{
  display:block;width:auto;max-width:100%;max-height:calc(100vh - 190px);
  border-radius:12px;background:var(--surface-2);
}
@supports (max-height:100dvh){
  .visionneuse img{max-height:calc(100dvh - 190px)}
}
.vis-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:50%;
  box-shadow:0 2px 10px rgba(42,46,40,.18);
}
.vis-nav:hover{background:#fff}
.vis-nav svg{width:20px;height:20px;fill:none;stroke:var(--fg);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.vis-prec{left:12px}
.vis-suiv{right:12px}
.visionneuse-legende{
  display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  margin:12px 4px;font-size:.88rem;color:var(--fg-soft);max-width:none;
}
.visionneuse-compteur{flex:none;font-variant-numeric:tabular-nums;color:var(--fg)}

/* Une seule photo : les fleches et le compteur n'ont pas lieu d'etre. */
.visionneuse.seule .vis-nav,
.visionneuse.seule ~ .visionneuse-legende .visionneuse-compteur{display:none}

/* ---------- Video en modale ----------
   La video est filmee en portrait. La hauteur est bornee par les deux
   contraintes a la fois, l'ecran et la largeur disponible, et la largeur
   se deduit du format. */
.modale-boite--video{
  max-width:none;width:auto;padding:0;
  background:transparent;box-shadow:none;overflow:visible;
}
.modale-video{
  aspect-ratio:9/16;
  height:min(calc(100vh - 110px), calc((100vw - 48px) * 16 / 9));
  max-width:calc(100vw - 48px);
  border-radius:18px;overflow:hidden;background:#000;
  box-shadow:0 18px 60px rgba(42,46,40,.4);
}
@supports (height:100dvh){
  .modale-video{height:min(calc(100dvh - 110px), calc((100vw - 48px) * 16 / 9))}
}
.modale-video iframe{display:block;width:100%;height:100%;border:0}
.modale-boite--video .modale-x{top:-54px;right:0}
/* ---------- Ouverture ---------- */
.hero{position:relative;isolation:isolate;min-height:clamp(440px,70vh,660px);display:flex;align-items:flex-end;overflow:hidden}
.hero-slides{position:absolute;inset:0;z-index:-2;background:var(--surface-2)}
.hero-slides picture{position:absolute;inset:0}
.hero-slides img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1600ms ease-in-out;transform:scale(1.02);
}
.hero-slides img.on{opacity:1}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,24,18,.42) 0%,rgba(20,24,18,.12) 38%,rgba(20,24,18,.72) 100%);
}
.hero-inner{padding-block:clamp(40px,7vw,72px);color:#fff}
.hero-inner h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-inner h1 .script{color:#F1E3D2}
.hero-sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);color:rgba(255,255,255,.93);margin-top:14px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;align-items:center}
.hero-meta{font-size:.9rem;color:rgba(255,255,255,.82)}
.dots{position:absolute;right:12px;bottom:12px;display:flex;gap:0;z-index:2}
.dot{width:24px;height:24px;padding:8px;border:0;cursor:pointer;border-radius:50%;background:rgba(255,255,255,.42);background-clip:content-box}
/* background-color et non background : le raccourci reinitialiserait
   background-clip, et la pastille active reprendrait 24px au lieu de 8. */
.dot[aria-current="true"]{background-color:#fff}

/* ---------- Adrien + video ---------- */
/* La video est filmee en portrait (1080x1920). Sa vignette est donc decoupee
   au meme format (video-poster-portrait.jpg, 405x720) et la colonne de droite
   est volontairement etroite : une carte portrait large ecraserait le texte.
   Le texte recupere la place rendue. */
.split{display:grid;grid-template-columns:1fr minmax(0,300px);gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.video-card{
  display:block;position:relative;border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow);background:var(--surface-2);
  padding:0;border:0;margin:0;width:100%;cursor:pointer;font:inherit;color:inherit;
}
.video-card img{width:100%;height:auto;transition:transform .5s ease}
.video-card:hover img{transform:scale(1.03)}
.video-card iframe{display:block;width:100%;border:0;background:#000}
.video-card::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(18,22,16,.62) 100%);
}
.play{
  position:absolute;inset:0;margin:auto;width:66px;height:66px;border-radius:50%;
  background:rgba(255,255,255,.93);display:grid;place-items:center;z-index:2;
}
.play svg{width:22px;height:22px;margin-left:3px;fill:#2A2E28}
.video-label{position:absolute;left:18px;bottom:16px;z-index:2;color:#fff;font-size:.9rem;text-align:left}
.video-card.playing::after,
.video-card.playing .play,
.video-card.playing .video-label{display:none}
/* Doit rester APRES la regle .video-card ci-dessus : a specificite egale,
   c'est l'ordre d'ecriture qui tranche, et son margin:0 annulerait le
   centrage. En une seule colonne la carte prendrait toute la largeur et
   deviendrait tres haute en portrait : on la plafonne et on la centre. */
@media (max-width:860px){
  .video-card{max-width:300px;margin-inline:auto}
}

/* ---------- Cartes ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media (max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.grid3,.grid2{grid-template-columns:1fr}}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:26px 24px 28px;display:flex;flex-direction:column;gap:12px;min-width:0;
}
.card h3{color:var(--fg)}
.card p{color:var(--fg-soft);font-size:.97rem;line-height:1.65}
.card .more{margin-top:auto;padding-top:8px;font-size:.9rem;font-weight:600;color:var(--moss);text-decoration:none}
.card .more:hover{text-decoration:underline}

.bande{background:var(--surface-2)}

.prestations{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.prestations li{
  font-size:.86rem;padding:.35em .85em;border-radius:100px;
  background:var(--bg);border:1px solid var(--line);color:var(--fg-soft);
}

/* ---------- Galerie ---------- */
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:760px){.galerie{grid-template-columns:repeat(2,1fr);gap:10px}}
.galerie picture{line-height:0}
.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;max-width:100%}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,56px);align-items:start}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.tel-bloc{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:6px}
.tel{
  font-family:var(--serif);font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);
  color:var(--fg);text-decoration:none;letter-spacing:.01em;
}
.tel:hover{color:var(--moss)}
.infos{display:flex;flex-direction:column;gap:18px}
.info-l{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--moss);margin-bottom:2px}
.info-v{color:var(--fg-soft);font-size:.97rem}


/* ---------- Plan du site en pied de page ----------
   Donne a chaque page un lien depuis toutes les autres. Le menu seul ne le
   faisait pas pour les pages de second niveau, qui dependaient d'un survol. */
.pied-liens{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:28px;
  padding-block:8px 28px;border-bottom:1px solid var(--line);margin-bottom:24px;
}
@media (max-width:760px){.pied-liens{grid-template-columns:repeat(2,1fr);gap:22px}}
.pied-titre{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--moss-deep);margin:0 0 10px}
.pied-liens ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.pied-liens a{text-decoration:none;color:var(--fg-soft);font-size:.9rem}
.pied-liens a:hover{color:var(--moss)}
.pied-liens a[aria-current="page"]{color:var(--moss);font-weight:600}
.pied-liens li{font-size:.9rem;color:var(--fg-soft)}
/* ---------- Pied ---------- */
footer{border-top:1px solid var(--line);padding-block:32px 40px;font-size:.88rem;color:var(--fg-soft)}
.foot{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.foot a{text-decoration:none}
.foot a:hover{color:var(--moss)}
.foot .logo{font-size:1.3rem;color:var(--fg-soft)}

/* ---------- Barre d'appel mobile ---------- */
.callbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--moss);
  padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));
  justify-content:center;
}
.callbar a{
  color:#fff;text-decoration:none;font-weight:600;font-size:1.02rem;
  display:inline-flex;align-items:center;gap:.6em;
}
@media (max-width:760px){
  .callbar{display:flex}
  body{padding-bottom:72px}
}

/* ---------- Pages de contenu ---------- */
.page-head{
  background:var(--surface-2);
  padding-block:clamp(32px,5vw,56px) clamp(26px,4vw,42px);
  border-bottom:1px solid var(--line);
}
.page-head h1{margin-top:12px}
.page-head .lead{margin-top:16px}
.contenu{max-width:var(--read);display:flex;flex-direction:column;gap:20px}
.contenu h2{margin-top:18px;font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem)}
.contenu ul{margin:0;padding-left:1.3em;color:var(--fg-soft)}
.contenu li{margin-block:.3em}
.contenu .prestations{padding-left:0}
.contenu dl{margin:0;display:flex;flex-direction:column;gap:14px}
.contenu dt{font-weight:600;color:var(--fg)}
.contenu dd{margin:0;color:var(--fg-soft)}
.ariane{font-size:.85rem;color:var(--fg-soft)}
.ariane a{text-decoration:none}
.ariane a:hover{color:var(--moss)}

/* ---------- Appel a l'action de bas de page ---------- */
.bande-contact{background:var(--moss);padding-block:clamp(44px,6vw,76px)}
.cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.bande-contact h2{color:#fff}
.bande-contact p{color:rgba(255,255,255,.9);max-width:52ch}
.bande-contact .btn-main{background:#fff;color:var(--moss-deep);margin-top:6px}
.bande-contact .btn-main:hover{background:#F1EDE4}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}