/* Karine Fromages Fins — copie statique du site Wix (septembre 2026) */
@import url("fonts.css");

:root{
  --noir:#000;
  --gris:#1f1f1f;
  --gris-2:#2b2b2b;
  --or:#f9ca52;
  --or-clair:#fad46c;
  --blanc:#fff;
  --texte:#e9e9e9;
  --largeur:980px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--noir);color:var(--texte);font-family:"Jura",Tahoma,Verdana,sans-serif;font-size:16px;line-height:1.5}
img{max-width:100%;height:auto;display:block}
a{color:var(--or)}
.cadre{max-width:var(--largeur);margin:0 auto;padding:0 20px}
.script{font-family:"Sacramento","Brush Script MT",cursive;font-weight:400}
.affiche{font-family:"Passion One","Arial Black",Impact,sans-serif;text-transform:uppercase;letter-spacing:.02em}
.surligne{display:inline-block;background:var(--or);color:#111;padding:.05em .35em;font-family:"Spinnaker","Jura",sans-serif;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* --- en-tête --- */
.entete{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.92);border-bottom:1px solid #111}
.entete .cadre{display:flex;align-items:center;justify-content:space-between;height:78px;max-width:1100px}
.entete .k img{height:46px;width:auto}
.menu{display:flex;gap:clamp(18px,7vw,90px);list-style:none;margin:0;padding:0}
.menu a,.menu button{font:inherit;font-size:14px;color:#ddd;text-decoration:none;background:none;border:0;cursor:pointer;padding:10px 4px;border-top:3px solid transparent}
.menu a[aria-current="page"]{border-top-color:var(--or);color:var(--or)}
.menu a:hover,.menu button:hover{color:var(--or)}
.menu a:focus-visible,.menu button:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.badge img{height:58px;width:auto}

/* --- bandes photo en parallaxe --- */
.bande{min-height:520px;background-size:cover;background-position:center;background-attachment:fixed;display:flex;align-items:center;justify-content:center;text-align:center;position:relative}
.bande.basse{min-height:340px}
.bande .voile{position:absolute;inset:0;background:rgba(0,0,0,.25)}
.bande .contenu{position:relative;padding:40px 20px}
@media (hover:none),(max-width:900px){.bande{background-attachment:scroll}}

/* --- accueil --- */
.hero{text-align:center;padding:40px 20px 10px}
.hero .logo{width:min(320px,70%);margin:0 auto}
.hero .selection{width:min(420px,80%);margin:4px auto 10px}
.hero .ville{width:120px;margin:0 auto 22px}
.hero .portrait{width:150px;height:150px;object-fit:cover;border-radius:50%;margin:0 auto}
.intro{display:grid;grid-template-columns:70px 1fr;gap:12px 18px;max-width:760px;margin:24px auto 0;align-items:start}
.intro p{margin:0;font-size:17px}
.signature{display:flex;justify-content:space-between;align-items:flex-end;max-width:760px;margin:18px auto 0;gap:20px;flex-wrap:wrap}
.signature .karine{font-family:"Sacramento",cursive;font-size:44px;color:var(--blanc);line-height:1}
.signature small{color:var(--or);font-size:13px}
.lien-loupe{display:inline-flex;align-items:center;gap:10px;color:#ddd;font-size:13px;text-decoration:none;margin-top:10px}
.lien-loupe img{width:34px}

.capucins{padding:60px 0 70px;text-align:center}
.capucins .retrouvez{color:var(--or);font-family:"Spinnaker",sans-serif;font-size:32px;line-height:1.2;margin:0}
.capucins .a-bdx{color:var(--or);font-size:15px;margin:0 0 -6px}
.capucins h2{font-family:"Sacramento",cursive;font-weight:400;font-size:clamp(56px,9vw,96px);color:var(--blanc);margin:0;line-height:1.05}
.infos-capucins{display:grid;grid-template-columns:1fr auto auto 1fr;align-items:center;gap:20px;margin-top:10px}
.infos-capucins .icone{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--or);font-size:13px;text-decoration:underline;background:none;border:0;cursor:pointer;font-family:inherit}
.infos-capucins .icone img{width:44px}
.horaires{display:grid;grid-template-columns:auto auto;gap:0 12px;text-align:right;font-size:14px}
.horaires span:nth-child(even){color:var(--or);text-align:left}

.creations{display:grid;grid-template-columns:1fr 1fr;min-height:420px}
.creations .texte{background:#000;padding:50px 40px;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center}
.creations h2{color:var(--or);font-size:44px;line-height:1;margin:0}
.creations .sous{color:var(--blanc);font-family:"Passion One",sans-serif;text-transform:uppercase;font-size:17px;margin:12px 0 4px}
.creations .main{font-family:"Sacramento",cursive;color:var(--blanc);font-size:30px;margin:0 0 14px}
.creations .detail{display:grid;grid-template-columns:120px 1fr;gap:16px;text-align:left;max-width:360px;font-size:14px}
.creations .photo{background:url(../img/truffes.jpg) center/cover}

.fromages{padding:50px 0 0;text-align:center}
.fromages h2{font-family:"Sacramento",cursive;font-weight:400;color:var(--blanc);font-size:clamp(56px,8vw,84px);margin:0;line-height:1}
.fromages .sous{color:var(--or);font-family:"Passion One",sans-serif;text-transform:uppercase;font-size:22px;margin:8px 0 0}
.fromages .sous2{color:var(--or);font-family:"Passion One",sans-serif;text-transform:uppercase;font-size:16px;margin:0 0 30px}
.collage{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:150px;gap:4px;grid-auto-flow:dense}
.collage a{display:block;overflow:hidden}
.collage img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.collage a:hover img{transform:scale(1.05)}
.collage .l2{grid-column:span 2}.collage .l4{grid-column:span 4}.collage .h2{grid-row:span 2}

.affinage{background:var(--gris);padding:50px 0;text-align:center}
.affinage h2{margin:0;font-size:26px;font-weight:400}
.affinage .s{margin:6px 0 22px;font-size:18px}
.affinage p{max-width:760px;margin:0 auto;font-size:15px;text-align:left}
.affinage .fin{margin-top:26px;font-size:18px}

.hiver{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:30px 20px;background:#000}
.carte-hiver{position:relative;aspect-ratio:2/3;background-size:cover;background-position:center;overflow:hidden}
.carte-hiver .titre{position:absolute;top:0;left:0;right:0;padding:10px 10px 28px;text-align:center;background:linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,0))}
.carte-hiver .titre b{display:inline-block;background:var(--or);color:#111;font-family:"Passion One",sans-serif;text-transform:uppercase;font-size:20px;padding:0 .3em;line-height:1.2}
.carte-hiver .titre span{display:block;color:var(--blanc);font-family:"Passion One",sans-serif;text-transform:uppercase;font-size:14px;margin-top:2px;text-shadow:0 1px 3px #000}
.carte-hiver a{position:absolute;bottom:14px;left:50%;transform:translateX(-50%)}
.carte-hiver a img{width:36px}

.plateaux-bande h2{font-family:"Sacramento",cursive;font-weight:400;color:var(--blanc);font-size:clamp(56px,8vw,90px);margin:0;line-height:1}
.plateaux-bande .s{font-family:"Sacramento",cursive;color:var(--blanc);font-size:clamp(30px,4vw,44px);margin:0 0 14px}

.facebook{background:#000;padding:50px 20px;text-align:center}
.facebook a.bouton{display:inline-flex;align-items:center;gap:12px;background:#1877f2;color:#fff;text-decoration:none;padding:14px 22px;border-radius:4px;font-family:"Spinnaker",sans-serif;font-size:16px}

/* --- page Moi --- */
.bandeau-mof{background:#111 url(../img/mof-bandeau.jpg) left center/cover;min-height:120px;display:flex;align-items:center}
.bandeau-mof .cadre{display:grid;grid-template-columns:auto 1fr;gap:14px 26px;align-items:center;width:100%}
.bandeau-mof .annee{font-size:44px;letter-spacing:.12em;color:var(--blanc);grid-row:span 2;padding-left:18%}
.bandeau-mof .titre{color:var(--or);font-size:20px}
.bandeau-mof .classe{justify-self:end;font-size:14px;letter-spacing:.08em}
.moi-grille{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:var(--largeur);margin:18px auto;padding:0 20px}
.moi-photo{position:relative}
.moi-photo .legende{position:absolute;right:12px;bottom:70px;text-align:center;color:var(--or);font-size:13px;line-height:1.3}
.moi-photo .legende .karine{font-family:"Sacramento",cursive;font-size:30px;color:var(--blanc);display:block}
.reseaux{display:flex;gap:10px;margin-top:8px}
.reseaux img{height:28px;width:auto}
.guerriere{font-family:"Spinnaker",sans-serif;font-size:26px;margin:0}
.mentor{font-size:22px;letter-spacing:.04em;color:var(--or);margin:4px 0 20px;line-height:1.2}
.rodolphe{display:grid;grid-template-columns:auto auto;gap:8px 16px;align-items:center;width:max-content;margin:0 auto 18px}
.rodolphe img{height:80px;width:auto}
.rodolphe .nom{grid-column:span 2;text-align:center;font-size:13px}
.rodolphe .nom a{color:var(--or)}
.rodolphe .nom small{display:block;color:var(--or)}
.moi-texte p{font-size:18px}
.diaporama{position:relative;max-width:var(--largeur);margin:10px auto 0;padding:0 20px}
.diaporama .piste{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.diaporama .piste::-webkit-scrollbar{display:none}
.diaporama .piste img{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:4/3;object-fit:cover}
.diaporama button{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.45);color:#fff;border:0;font-size:36px;width:48px;height:64px;cursor:pointer}
.diaporama .prec{left:24px}.diaporama .suiv{right:24px}
.diaporama button:focus-visible{outline:2px solid var(--or)}
.points{display:flex;justify-content:center;gap:8px;margin-top:10px}
.points button{position:static;transform:none;width:11px;height:11px;border-radius:50%;padding:0;background:#666;font-size:0}
.points button[aria-current="true"]{background:var(--or)}
.merci{background:#3a3a3a;color:var(--or);text-align:center;padding:30px 20px;margin-top:20px}
.merci p{max-width:760px;margin:0 auto;font-size:16px}

/* --- page Brillat --- */
.titre-brillat{background:#111 url(../img/brillat-10.jpg) center/cover;text-align:center;padding:40px 20px 30px;position:relative}
.titre-brillat::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55)}
.titre-brillat>*{position:relative}
.titre-brillat h1{font-family:"Sacramento",cursive;font-weight:400;font-size:clamp(46px,7vw,70px);margin:0;line-height:1;color:#fff}
.titre-brillat .s{font-family:"Sacramento",cursive;font-size:34px;margin:0 0 10px;color:#fff}
.galerie-brillat{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;padding:26px 20px;max-width:1200px;margin:0 auto}
.galerie-brillat a{display:block;aspect-ratio:4/3;overflow:hidden}
.galerie-brillat img{width:100%;height:100%;object-fit:cover}
.saviez{background:var(--gris-2);padding:34px 0}
.saviez h2{font-size:34px;font-weight:400;margin:0 0 8px;color:#fff}
.saviez p{font-size:17px;margin:0 0 10px}

/* --- pages texte (mentions) --- */
.page-texte{max-width:760px;margin:0 auto;padding:40px 20px 60px}
.page-texte h1{color:var(--or);font-family:"Spinnaker",sans-serif;font-weight:400}
.page-texte h2{color:var(--or);font-size:18px;margin:28px 0 6px}
.page-texte p{margin:0 0 8px}

/* --- pied de page --- */
.pied{text-align:center;padding:40px 20px 30px;background:#000;font-size:13px;color:#aaa}
.pied img{width:120px;margin:0 auto 8px}
.pied .sel{width:170px;margin:0 auto 14px}
.pied a{color:#aaa}
.nowrap{white-space:nowrap}

/* --- fenêtre contact --- */
dialog.contact{border:0;padding:0;background:#000;color:var(--texte);max-width:640px;width:calc(100% - 30px);box-shadow:0 0 0 1px #333,0 20px 60px rgba(0,0,0,.8)}
dialog.contact::backdrop{background:rgba(0,0,0,.7)}
.contact .haut{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:22px 26px 8px}
.contact .haut .portrait{width:74px;height:74px;object-fit:cover;border-radius:50%}
.contact .tel{display:block;color:var(--or);font-size:15px;text-align:center;margin-top:6px;text-decoration:none}
.contact .logo{width:190px;margin:0 auto}
.contact .trouver{display:flex;flex-direction:column;align-items:center;color:var(--or);font-size:12px}
.contact .trouver img{width:38px}
.contact form{display:grid;gap:8px;padding:10px 26px 24px}
.contact input,.contact textarea{font:inherit;font-size:14px;padding:6px 8px;border:1px solid #bbb;background:#fff;color:#111;width:100%}
.contact textarea{min-height:110px;resize:vertical}
.contact .envoyer{justify-self:end;background:var(--or);color:#111;border:0;padding:6px 16px;font:inherit;cursor:pointer}
.contact .rgpd{font-size:11px;color:#999;margin:0}
.contact .fermer{position:absolute;top:8px;right:12px;background:none;border:0;color:#fff;font-size:28px;cursor:pointer}
.piege{position:absolute;left:-9999px}

/* --- visionneuse --- */
.visionneuse{position:fixed;inset:0;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.visionneuse img{max-height:90vh;max-width:95vw;width:auto}
.visionneuse button{position:absolute;top:10px;right:16px;background:none;border:0;color:#fff;font-size:34px;cursor:pointer}

/* --- mobile --- */
@media (max-width:760px){
  .menu{gap:14px}
  .badge img{height:44px}
  .intro{grid-template-columns:1fr;justify-items:center}
  .intro img{width:50px}
  .signature{justify-content:center;text-align:center;flex-direction:column;align-items:center}
  .capucins .a-bdx{margin:2px 0 6px}
  .infos-capucins{grid-template-columns:1fr auto 1fr;gap:18px 10px}
  .horaires{grid-column:1/-1;justify-content:center;order:-1}
  .creations{grid-template-columns:1fr}
  .creations .texte{padding:40px 20px}
  .creations .photo{min-height:260px}
  .collage{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px}
  .collage a,.collage a.l2,.collage a.h2{grid-column:auto;grid-row:auto}
  .collage a.l4{grid-column:1/-1}
  .hiver{grid-template-columns:1fr 1fr;padding:24px 14px;gap:14px}
  .carte-hiver .titre b{font-size:17px}
  .carte-hiver .titre span{font-size:12px}
  .moi-grille{grid-template-columns:1fr}
  .moi-photo .legende{position:static;margin:10px 0 4px}
  .bandeau-mof{background:linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.72)),#111 url(../img/mof-bandeau.jpg) left center/cover;padding:16px 0}
  .bandeau-mof .cadre{grid-template-columns:1fr;gap:4px;text-align:center}
  .bandeau-mof .annee{grid-row:auto;padding-left:0;font-size:34px}
  .bandeau-mof .classe{justify-self:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}