/* =====================================================================
   Cot Cot Cot — CSS partagé header/footer
   Extrait à l'identique de la homepage (cotcotcot-accueil.html)
   pour garantir que le blog affiche EXACTEMENT le même rendu.
   À charger en <link rel="stylesheet"> sur toutes les pages qui
   incluent inc-header.php / inc-footer.php.
   ===================================================================== */

:root{
  --eggshell:#F5EBDA;
  --card:#FFFBF2;
  --barnwood:#2E2019;
  --barnwood-soft:#4A362A;
  --barn-red:#C4432E;
  --coral:#E8623F;
  --yolk:#F0AC3C;
  --yolk-deep:#D98A1F;
  --moss:#5C7A4A;
  --sky:#4C90A6;
  --line: rgba(46,32,25,0.14);
  --display: 'Fraunces', serif;
  --body: 'Work Sans', sans-serif;
  --stamp: 'Space Mono', monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px;position:relative;}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--body);font-weight:600;font-size:1rem;
  padding:14px 26px;border-radius:8px;border:none;cursor:pointer;
  text-decoration:none;transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px) rotate(-1deg);}
.btn-primary{background:var(--yolk);color:var(--barnwood);box-shadow:0 4px 0 var(--yolk-deep);}
.btn-primary:hover{box-shadow:0 6px 0 var(--yolk-deep);}
.btn-ghost{background:transparent;color:var(--barnwood);border:1.5px solid var(--barnwood);border-radius:100px;}

@keyframes wiggle{
  0%,100%{transform:rotate(0deg);}
  25%{transform:rotate(-6deg);}
  75%{transform:rotate(6deg);}
}

/* Header */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(245,235,218,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0;}
.logo{font-family:var(--display);font-weight:700;font-size:1.3rem;display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--barnwood);}
.logo-mark{width:32px;height:32px;flex-shrink:0;}
.logo:hover .logo-mark{animation:wiggle .5s ease;}
nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;font-weight:600;font-size:0.95rem;}
nav ul a{text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px;}
nav ul a:hover{border-color:var(--yolk);}
.nav-links,.nav-cta{display:flex;align-items:center;gap:22px;}
.burger{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--barnwood);}

/* Footer */
footer{padding:36px 0;background:var(--eggshell);}
.foot-grid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.foot-links{display:flex;gap:20px;list-style:none;padding:0;margin:0;font-size:0.85rem;flex-wrap:wrap;}
.foot-links a{text-decoration:none;}
.foot-links a:hover{text-decoration:underline;}
.foot-legal{display:flex;gap:20px;list-style:none;padding:0;margin:14px 0 0;font-size:0.78rem;color:var(--barnwood-soft);flex-wrap:wrap;}
.foot-legal a{text-decoration:underline;color:var(--barnwood-soft);}
.foot-copy{font-size:0.82rem;color:var(--barnwood-soft);}

@media (max-width:860px){
  .nav-links{display:none;}
  .burger{display:block;}
}
@media (prefers-reduced-motion: reduce){
  .btn:hover{animation:none;transform:none;}
}