/* =========================================================
   T'COCKTAILS — Feuille de style du Blog
   Reprend à l'identique les couleurs, polices et composants
   (nav, footer, boutons) du site principal (index.html) afin
   que le Blog ait exactement le même univers graphique.
   Ce fichier est PARTAGÉ par toutes les pages du blog :
   on ne le modifie qu'une seule fois, jamais à chaque article.
   ========================================================= */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --noir:#0a0a0a;--blanc:#fff;--creme:#f8f6f2;--beige:#ede9e1;
  --gris:#6d6d6d;--gc:#e0ddd8;--vert:#3a6b3a;--or:#b8953c;
  --fd:'Montserrat',sans-serif;--fb:'DM Sans',sans-serif;
}
html{scroll-behavior:smooth}
body{background:#fff;color:#0a0a0a;font-family:var(--fb);font-weight:300;overflow-x:hidden}
a{color:inherit}
img{max-width:100%}

/* ===== NAV (identique au site principal) ===== */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 32px 12px;display:flex;flex-direction:column;align-items:center;gap:12px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.07);transition:all .35s ease}
nav img{transition:height .35s ease}
nav.sc{padding:6px 32px;gap:4px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
nav.sc img{height:56px!important}
.nl{display:flex;align-items:center;gap:18px;list-style:none}
.nl a{text-decoration:none;color:#0a0a0a;font-size:12px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .2s}
.nl a:hover{opacity:.6}
.nl a.active{opacity:.55;border-bottom:1px solid #0a0a0a;padding-bottom:2px}
.ncta{background:var(--vert)!important;color:#fff!important;padding:6px 12px;border-radius:2px;white-space:nowrap;transition:background .2s}
.nl a.ncta:hover{opacity:1;background:#2d552d!important}
/* Ordinateur : le bouton est un bloc de 26 px (14 + 2×6) qui compte dans la hauteur de la ligne du menu,
   au lieu de déborder de sa ligne ; l'espacement de la barre est réduit d'autant (hauteur totale inchangée). */
@media(min-width:901px){
  nav{gap:9px;padding-bottom:10px}
  nav.sc{gap:5px}
  .nl li{display:flex;align-items:center}
  .nl a.ncta{display:inline-block;line-height:14px}
}
/* Menu à 8 entrées : entre 901 et 1060 px, texte et espacements légèrement resserrés pour rester sur une seule ligne */
@media(min-width:901px) and (max-width:1060px){
  nav,nav.sc{padding-left:20px;padding-right:20px}
  .nl{gap:13px}
  .nl a{font-size:11.5px;letter-spacing:.05em}
  .nl a.ncta{padding:6px 10px}
}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:8px;z-index:110}
.burger span{display:block;width:22px;height:1.5px;background:#0a0a0a;transition:all .3s}

/* ===== TYPO / LAYOUT génériques (identiques au site) ===== */
.container{max-width:1200px;margin:0 auto}
.sec{padding:100px 60px}
.stag{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--or-t,#7a6224);margin-bottom:14px}
.sh{font-family:var(--fd);font-size:clamp(28px,3.5vw,48px);font-weight:600;line-height:1.15;margin-bottom:0}
.sh em{font-style:italic;color:var(--vert)}

/* Décalage sous la nav fixe (même hauteur que sur le site principal) */
.page-top{margin-top:166px}

/* ===== REVEAL (identique au site) ===== */
.r{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.r.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}
/* Immersion (2026-10-23) : apparitions plus douces, même courbe que l'accueil ; délai retiré une fois apparu (.rd) */
.r{transition:opacity .95s cubic-bezier(.22,.61,.36,1),transform 1.05s cubic-bezier(.22,.61,.36,1)}
.r.in.rd{transition-delay:0s}

/* ===== BLOG : en-tête de page ===== */
.blog-header{padding:56px 60px 60px;text-align:center;background:var(--creme)}
.blog-header .sh{margin-top:10px}
.blog-header p.lead{max-width:640px;margin:20px auto 0;color:#555;font-size:15.5px;line-height:1.8}

/* ===== BLOG : grille d'articles (page /blog/index.html) =====
   Pour ajouter un article dans la liste : dupliquer un bloc
   <article class="blog-card"> et modifier son contenu.
   Les plus récents doivent être placés en PREMIER dans le HTML. */
.blog-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:44px;padding:70px 60px;max-width:1200px;margin:0 auto}
.blog-card{display:flex;flex-direction:column;background:#fff}
.blog-card-img{width:100%;height:260px;overflow:hidden;background:var(--creme);border-radius:2px}
.blog-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.blog-card:hover .blog-card-img img{transform:scale(1.04)}
.blog-card-date{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--or-t,#7a6224);margin-top:22px}
.blog-card-title{font-family:var(--fd);font-size:21px;font-weight:600;line-height:1.3;margin-top:10px}
.blog-card-excerpt{font-size:14px;line-height:1.75;color:#666;margin-top:12px}
.blog-card-link{display:inline-block;margin-top:18px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#0a0a0a;text-decoration:none;border-bottom:1px solid #0a0a0a;padding-bottom:3px;transition:opacity .2s}
.blog-card-link:hover{opacity:.6}

/* ===== BLOG : page d'un article ===== */
.blog-article{max-width:760px;margin:0 auto;padding:60px 24px 100px}
.blog-breadcrumb{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6d6d6d;margin-bottom:26px}
.blog-breadcrumb a{color:#6d6d6d;text-decoration:none}
.blog-breadcrumb a:hover{color:#0a0a0a}
.blog-article .stag{text-align:left}
.blog-article h1{font-family:var(--fd);font-size:clamp(30px,4.2vw,46px);font-weight:600;line-height:1.18;margin-bottom:18px}
.blog-meta{font-size:12.5px;color:#6d6d6d;letter-spacing:.03em;margin-bottom:36px}
.blog-cover{width:100%;border-radius:2px;overflow:hidden;background:var(--creme);margin-bottom:48px;display:flex;align-items:center;justify-content:center;max-height:520px}
.blog-cover img{width:100%;height:100%;object-fit:cover;display:block}
.blog-content{font-size:16.5px;line-height:1.9;color:#333}
.blog-content p{margin-bottom:24px}
.blog-content h2{font-family:var(--fd);font-size:26px;font-weight:600;margin:48px 0 18px;line-height:1.3}
.blog-content h3{font-family:var(--fd);font-size:19px;font-weight:600;margin:34px 0 14px;line-height:1.3}
.blog-content ul{margin:0 0 24px 22px}
.blog-content li{margin-bottom:10px}
.blog-content a{color:var(--vert);text-decoration:underline;text-underline-offset:2px}
.blog-content a:hover{color:var(--noir)}
.blog-content blockquote{border-left:2px solid var(--or);padding:4px 0 4px 22px;font-style:italic;color:#555;margin:32px 0}
.blog-inline-img{width:100%;border-radius:2px;overflow:hidden;background:var(--creme);margin:36px 0}
.blog-inline-img img{width:100%;height:auto;display:block}

.blog-cta{margin-top:56px;padding:44px;background:var(--creme);text-align:center;border-radius:2px}
.blog-cta p{font-family:var(--fd);font-size:20px;font-weight:600;margin-bottom:18px}
.blog-cta a.btn{display:inline-block;background:#0a0a0a;color:#fff;padding:14px 30px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;transition:background .2s}
.blog-cta a.btn:hover{background:var(--vert)}

.blog-related{max-width:760px;margin:60px auto 0;padding:0 24px}
.blog-related h2,.blog-related h4{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#6d6d6d;margin-bottom:18px}
.blog-related ul{list-style:none}
.blog-related li{margin-bottom:10px}
.blog-related a{text-decoration:none;color:#0a0a0a;font-family:var(--fd);font-size:15.5px;font-weight:500;border-bottom:1px solid transparent;transition:border-color .2s}
.blog-related a:hover{border-color:#0a0a0a}

/* ===== FOOTER (identique au site principal) ===== */
footer{background:#f2f0ec;padding:60px}
.ftop{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:56px;padding-bottom:48px;border-bottom:1px solid #ddd}
.flogo img{height:38px;margin-bottom:16px}
.fbrand{font-size:12.5px;color:#6d6d6d;line-height:1.8}
.fcol h4,.fcol .fh{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#6d6d6d;margin-bottom:16px}
.fcol a{display:block;font-size:12.5px;color:#555;text-decoration:none;margin-bottom:8px;transition:color .2s}
.fcol a:hover{color:#0a0a0a}
.fbot{max-width:1200px;margin:26px auto 0;display:flex;justify-content:space-between;font-size:11.5px;color:#6d6d6d;border-top:1px solid #ddd;padding-top:26px}

/* ===== MICRO-INTERACTIONS (2026-10-23) : survols et pressions discrets, identiques à l'accueil ===== */
.blog-card-img img{transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.blog-card-title{transition:color .4s ease}
.blog-card:hover .blog-card-title{color:#2d552d}
.blog-card-link{transition:opacity .2s,translate .45s cubic-bezier(.22,.61,.36,1)}
.blog-card:hover .blog-card-link{translate:4px 0}
.blog-cta a.btn{transition:background .3s ease,translate .35s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease,scale .2s ease}
.blog-cta a.btn:active{scale:.985}
@media(hover:hover){.blog-cta a.btn:hover{translate:0 -1px;box-shadow:0 14px 24px -18px rgba(40,60,35,.6)}}
.blog-cover img,.blog-inline-img img{transition:transform 1.4s cubic-bezier(.22,.61,.36,1)}
@media(hover:hover){.blog-cover:hover img,.blog-inline-img:hover img{transform:scale(1.02)}}
.fcol a{width:fit-content;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:color .3s ease,background-size .45s cubic-bezier(.22,.61,.36,1)}
.fcol a:hover{background-size:100% 1px}
@media(min-width:901px){
  .nl a:not(.ncta){background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:opacity .2s,background-size .45s cubic-bezier(.22,.61,.36,1)}
  .nl a:not(.ncta):hover{background-size:100% 1px}
  .nl a.ncta{transition:background .2s,translate .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease}
  .nl a.ncta:hover{translate:0 -1px;box-shadow:0 8px 16px -10px rgba(40,70,35,.6)}
}
@media(prefers-reduced-motion:reduce){
  .r{opacity:1!important;transform:none!important;transition:none!important}
  .blog-card-img img,.blog-cover img,.blog-inline-img img{transition:none!important}
  .blog-card:hover .blog-card-img img,.blog-cover:hover img,.blog-inline-img:hover img{transform:none!important}
  .blog-cta a.btn,.nl a.ncta{translate:none!important;scale:none!important}
}

/* ===== MOBILE ===== */
@media(max-width:900px){
  nav{padding:0 18px}
  nav img{height:70px!important}
  nav.sc img{height:48px!important}
  nav.sc{padding:0 18px}
  .page-top{margin-top:116px}
  .nl{display:none;position:fixed;inset:0;background:#fff;flex-direction:column;justify-content:center;align-items:center;gap:30px;z-index:105}
  .nl.open{display:flex}
  .nl a{color:#0a0a0a!important;font-size:17px!important}
  .nl a.ncta{color:#fff!important;display:inline-block;text-align:center;padding:10px 22px}
  .burger{display:flex}
  .blog-grid{grid-template-columns:1fr;padding:50px 18px;gap:40px}
  .blog-header{padding:40px 18px 44px}
  .sec,.blog-header{padding-left:18px!important;padding-right:18px!important}
  .ftop{grid-template-columns:1fr 1fr;gap:32px}
  .fbot{flex-direction:column;gap:10px}
  .blog-cover{max-height:340px}
}