/* ==========================================================================
   Cuisiniste Lyon — feuille de style globale
   Palette de marque (--cl-*) + tokens typographiques (Inter, display 330).
   Convertie depuis le design Claude Design (Cuisiniste Lyon.dc.html).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300..700&display=swap");

:root{
  /* Familles */
  --font-display: "Neue Haas Grotesk Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Palette de marque */
  --cl-page:#FBF8F1; --cl-cream:#F5EFE3; --cl-sand:#EDE4D3; --cl-sand-deep:#E1D5BE;
  --cl-taupe:#A2917A; --cl-taupe-deep:#6E6253; --cl-charcoal:#2A2621; --cl-ink:#2A2621;
  --cl-muted:#756B5D; --cl-sage:#7C8A6E; --cl-sage-soft:#E7EBDD; --cl-gold:#B0894C;
  --cl-hairline:#E6DECF; --cl-white:#FFFFFF;
  --cl-link-cool-3:#bdbdca;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--cl-page);color:var(--cl-ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{max-width:100%;}
a{color:inherit;}

/* Tuile image : l'image remplit exactement le cadre (aspect-ratio ou height sur le wrapper),
   sans subir l'étirement vertical d'une grille (align-items:stretch). */
.cl-tile{display:block;overflow:hidden;border-radius:16px;position:relative;background:var(--cl-sand);}
.cl-tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

@keyframes clFade{from{opacity:.55;transform:translateY(8px)}to{opacity:1;transform:none}}
.cl-anim{animation:clFade .4s ease;}

.cl-burger{display:none;}
.cl-navlink{transition:color .15s ease;}
.cl-navlink:hover{color:var(--cl-charcoal)!important;}
.cl-card-hover{transition:transform .18s ease, box-shadow .18s ease;}
.cl-card-hover:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(42,38,33,.10);}
/* zoom doux de l'image dans les cartes à fond (services) */
.cl-card-hover .cl-tile>img{transition:transform .45s ease;}
.cl-card-hover:hover .cl-tile>img{transform:scale(1.05);}
/* Cartes "image + texte" sans fond (inspiration) : on anime la tuile arrondie, pas un rectangle */
.cl-photo-card{display:block;text-decoration:none;}
.cl-photo-card .cl-tile{transition:box-shadow .22s ease, transform .22s ease;}
.cl-photo-card .cl-tile>img{transition:transform .5s ease;}
.cl-photo-card:hover .cl-tile{transform:translateY(-4px);box-shadow:0 16px 34px rgba(42,38,33,.16);}
.cl-photo-card:hover .cl-tile>img{transform:scale(1.06);}
.cl-photo-card:hover .cl-photo-title{color:var(--cl-sage)!important;}
.cl-pill-primary{transition:background .15s ease;}
.cl-pill-primary:hover{background:#1c1916!important;}
.cl-pill-ghost:hover{background:var(--cl-sand)!important;}

/* Contenu rédactionnel (rendu des sections d'article) */
.cl-prose h2{font-family:var(--font-display);font-weight:330;font-size:clamp(24px,2.8vw,34px);line-height:1.12;margin:0 0 14px;color:var(--cl-charcoal);}
.cl-prose h3{font-family:var(--font-display);font-weight:400;font-size:clamp(19px,2.1vw,24px);line-height:1.2;margin:26px 0 10px;color:var(--cl-charcoal);}
.cl-prose p{font-size:16.5px;color:var(--cl-taupe-deep);line-height:1.78;margin:0 0 16px;}
.cl-prose ul,.cl-prose ol{font-size:16px;color:var(--cl-taupe-deep);line-height:1.7;margin:0 0 18px;padding-left:22px;}
.cl-prose li{margin-bottom:7px;}
.cl-prose strong{color:var(--cl-charcoal);font-weight:600;}
.cl-prose a{color:var(--cl-charcoal);font-weight:600;text-decoration:none;border-bottom:1px solid var(--cl-gold);}
.cl-prose a:hover{border-bottom-width:2px;}
/* Tables : scroll horizontal propre sur mobile. Les contenus enveloppent chaque table dans .cl-tablewrap. */
.cl-tablewrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 20px;border-radius:14px;}
.cl-tablewrap table{margin:0!important;}
.cl-tablewrap::-webkit-scrollbar{height:6px;}
.cl-tablewrap::-webkit-scrollbar-thumb{background:var(--cl-sand-deep);border-radius:999px;}
.cl-prose table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.5px;border:1px solid var(--cl-hairline);border-radius:14px;overflow:hidden;}
.cl-prose th{background:var(--cl-cream);text-align:left;padding:13px 16px;font-weight:600;color:var(--cl-charcoal);border-bottom:1px solid var(--cl-hairline);font-size:13px;}
.cl-prose td{padding:13px 16px;border-bottom:1px solid var(--cl-hairline);color:var(--cl-taupe-deep);}
.cl-prose tr:last-child td{border-bottom:none;}
.cl-callout{background:var(--cl-sage-soft);border:1px solid #d4dcc8;border-radius:14px;padding:20px 24px;margin:8px 0 22px;font-size:15.5px;color:var(--cl-taupe-deep);line-height:1.65;}
.cl-callout strong{color:var(--cl-charcoal);}

/* Détails / FAQ : retirer le marqueur natif */
details summary{list-style:none;}
details summary::-webkit-details-marker{display:none;}
details summary::after{content:"+";float:right;color:var(--cl-sage);font-weight:600;margin-left:12px;}
details[open] summary::after{content:"–";}

/* Accessibilité focus */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--cl-sage);outline-offset:2px;}

@media(max-width:1080px){
  .cl-desktop-nav{display:none!important;}
  .cl-burger{display:inline-flex!important;}
}
@media(max-width:760px){
  /* tables larges : on garde une largeur lisible et on laisse .cl-tablewrap scroller */
  .cl-prose table{min-width:540px;}
  .cl-prose{font-size:15.5px;}
  .cl-prose h2{font-size:clamp(22px,6vw,28px);}
  .cl-prose h3{font-size:clamp(18px,5vw,21px);}
}
@media(max-width:560px){
  .cl-hide-mobile{display:none!important;}
}
@media(max-width:400px){
  /* confort de lecture sur très petits écrans */
  .cl-prose ul,.cl-prose ol{padding-left:18px;}
}