/* ============================================================
   LES RECETTES DE CLAIRETTE — Habillage « Magazine » partagé
   Palette éditoriale épurée + terracotta rouille du catalogue.
   Chargé APRÈS brand.css sur chaque page intérieure.
   ============================================================ */
:root{
  --creme:        #F5F2EA;
  --creme-2:      #FBFAF5;
  --grege:        #E7E0D1;
  --grege-soft:   #EFEADD;
  --ink:          #211E18;
  --ink-2:        #211E18;
  --brun:         #211E18;
  --brun-2:       #211E18;
  --ink-soft:     #6E665A;
  --terracotta:   #72281c;
  --terracotta-d: #642E22;
  --kraft:        #CDC3AF;
  --kraft-soft:   #E1D9C8;
  --line:         #E2DACB;
  --line-2:       #D3CAB7;
  --olive:        #555E39;
  --olive-lt:     #C9D472;
  --gold:         #CBA13B;
  --r:4px; --r-sm:4px;
}

body{ background:var(--creme); color:var(--ink); }
.btn-cta{ box-shadow:0 10px 24px -14px rgba(114,40,28,.55); }
.btn-cta:hover{ box-shadow:0 16px 30px -14px rgba(114,40,28,.6); }
.eyebrow{ color:var(--terracotta-d); }
.band-grege{ background:var(--grege); }
.band-creme2{ background:var(--creme-2); }
.band-ink{ background:var(--ink); color:var(--creme); }

/* ---- bandeau olive (sections fortes) ---- */
.band-olive{ background:var(--olive); color:#FBF7EF; }
.band-olive .eyebrow,
.band-olive .headM__n,
.band-olive .prefHead__n{ color:var(--olive-lt); }
.band-olive h2,.band-olive h3,.band-olive h4,.band-olive .h-section{ color:#FBF7EF; }
.band-olive .lede,.band-olive p{ color:rgba(251,247,239,.82); }
.band-olive .btn-link{ color:#FBF7EF; }
.band-olive .btn-cta{ background:var(--olive-lt); color:#2A2A18; box-shadow:0 12px 26px -16px rgba(0,0,0,.55); }
.band-olive .btn-cta:hover{ background:#d6df87; }
.band-olive .cap{ color:rgba(251,247,239,.6); }

/* ================= HEADER — menu pilule centré ================= */
.site-header{ position:sticky; background:transparent; border-color:transparent; box-shadow:none; color:var(--ink); }
.site-header .wrap{ position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; min-height:46px; transition:min-height .3s; }
.site-header .nav--pill{ padding-top:6px; }
.site-header .brandmark{ margin-right:0; justify-self:start; }
.brandmark__favicon{ height:30px; width:auto; }
.header-cta{ justify-self:end; margin-left:0; }
.header-contact{ justify-self:end; width:36px; height:36px; border-radius:50%; border:1px solid var(--olive); display:grid; place-items:center; color:var(--olive); transition:background .2s,border-color .2s,color .2s; }
.header-contact:hover{ background:rgba(85,94,57,.12); color:var(--ink); }
.header-contact svg{ width:17px; height:17px; }
.site-header.scrolled{ background:rgba(245,242,234,.82); backdrop-filter:saturate(1.15) blur(10px); -webkit-backdrop-filter:saturate(1.15) blur(10px); border-color:var(--line); box-shadow:0 8px 26px -20px rgba(33,30,24,.55); }
.nav a::after{ background:var(--terracotta); }
.nav--pill{ position:static; transform:none; justify-self:center; background:transparent; border:0; border-radius:0; padding:0; gap:clamp(18px,2.6vw,42px); box-shadow:none; }
.nav--pill a{ display:inline-flex; align-items:center; gap:.35em; padding:6px 2px; border-radius:0; font-size:.82rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#24291C; opacity:.92; transition:opacity .2s,color .2s; }
.nav--pill a::after{ display:none; }
.nav--pill a:hover{ opacity:1; color:var(--terracotta); background:transparent; }
.nav--pill a.active{ opacity:1; color:var(--terracotta); background:transparent; }
.nav--pill .chev{ display:none; }
@media (max-width:1100px){ .nav--pill{ gap:clamp(14px,2vw,26px); } .nav--pill a{ font-size:.78rem; letter-spacing:.12em; } }
@media (max-width:900px){
  .site-header .wrap{ display:flex; }
  .site-header .brandmark{ margin-right:auto; }
  .nav.nav--pill{ position:absolute; left:0; right:0; top:100%; transform:translateY(-100%); justify-self:auto; background:var(--creme); border:0; border-radius:0; box-shadow:0 24px 40px -28px rgba(43,37,33,.5); padding:8px var(--gutter) 22px; gap:0; max-height:calc(100vh - 100%); overflow:auto; z-index:5; visibility:hidden; }
  .nav.nav--pill.open{ transform:none; visibility:visible; }
  .nav.nav--pill a{ color:var(--brun-2); opacity:1; border-radius:0; padding:14px 0; justify-content:space-between; border-bottom:1px solid var(--line); background:transparent; }
  .nav.nav--pill a.active{ background:transparent; color:var(--terracotta); }
  .nav.nav--pill .chev{ opacity:.4; }
  .header-contact{ margin:0 8px 0 0; }
  .nav-toggle{ display:inline-flex !important; flex-direction:column; gap:5px; justify-content:center; width:44px; height:44px; border:none; background:transparent; padding:10px; color:var(--brun-2); cursor:pointer; }
  .nav-toggle span{ display:block; height:2px; background:currentColor; border-radius:2px; }
}

/* ================= ANNONCE ================= */
.annonce{ background:#555e39; color:#F0ECD8; animation:annonce-in .6s cubic-bezier(.2,.8,.3,1) both; }
@keyframes annonce-in{ from{ transform:translateY(-100%); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.annonce .wrap{ display:flex; align-items:center; justify-content:center; gap:.7em; min-height:32px; font-size:.78rem; text-align:center; letter-spacing:.01em; }
.annonce b{ color:#F0ECD8; font-weight:700; }
.annonce a{ display:inline-flex; align-items:center; gap:.35em; font-weight:600; color:#E0C97A; border-bottom:1px solid transparent; transition:border-color .2s,gap .2s; }
.annonce a:hover{ border-color:#E0C97A; gap:.6em; }

/* ================= FOOTER ================= */
.site-footer{ background:#24291C; }

/* ================= TÊTE DE SECTION éditoriale ================= */
.headM{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,64px); align-items:end; margin-bottom:clamp(36px,4.5vw,60px); }
.headM__n{ font-family:ui-monospace,Menlo,monospace; font-size:.72rem; letter-spacing:.14em; color:var(--ink-soft); }
.headM h2{ font-family:var(--serif); font-weight:600; font-size:clamp(2rem,3.8vw,3.2rem); line-height:1.03; letter-spacing:-.025em; margin:14px 0 0; text-wrap:balance; }
.headM .lede{ font-size:1.1rem; max-width:46ch; }
.headM--center{ grid-template-columns:1fr; text-align:center; max-width:680px; margin-inline:auto; }
.headM--center .lede{ margin-inline:auto; }

/* filets & légendes */
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.eyebrow .cc{ width:14px; height:14px; }
.cap{ font-family:ui-monospace,'SFMono-Regular',Menlo,monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }

/* ================= BANNIÈRE DE PAGE (hero intérieur) ================= */
.pageHero{ padding-top:28px; padding-bottom:clamp(16px,2.5vw,28px); }
.pageHero__inner{ max-width:760px; }
.pageHero__eyebrow{ display:flex; align-items:center; gap:.6em; }
.pageHero h1{ font-family:var(--serif); font-weight:600; font-size:clamp(2.6rem,5.4vw,4.6rem); line-height:1; letter-spacing:-.035em; margin:.34em 0 0; text-wrap:balance; }
.pageHero h1 em{ font-style:normal; color:var(--terracotta); }
.pageHero .lede{ margin:22px 0 0; max-width:56ch; font-size:1.16rem; }
.pageHero__crumb{ display:flex; align-items:center; gap:.55em; font-family:ui-monospace,Menlo,monospace; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.pageHero__crumb a:hover{ color:var(--terracotta); }

/* ================= CARTES CATALOGUE (réutilisables) ================= */
.catGrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,26px); }
.catCard{ display:flex; flex-direction:column; border-radius:var(--r); overflow:hidden; transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s; --c-bg:var(--ink); --c-fg:#FBF7EF; --c-soft:rgba(251,247,239,.78); --tag-bg:#C9D472; --tag-fg:#2A2A18; }
.catCard:hover{ transform:translateY(-6px); box-shadow:0 36px 60px -40px rgba(33,30,24,.45); }
.catCard__shot{ aspect-ratio:5/4; background:var(--grege); position:relative; overflow:hidden; }
.catCard__shot img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.catCard:hover .catCard__shot img{ transform:scale(1.04); }
.catCard__shot .ph{ position:absolute; inset:0; border-radius:0; }
.catTag{ position:absolute; top:16px; left:16px; z-index:2; display:inline-block; font-family:var(--serif); font-weight:700; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; padding:7px 13px; border-radius:var(--r); background:var(--tag-bg); color:var(--tag-fg); }
.catCard__body{ background:var(--c-bg); color:var(--c-fg); padding:clamp(24px,2vw,32px) clamp(24px,2vw,30px) clamp(26px,2.2vw,34px); display:flex; flex-direction:column; flex:1; }
.catCard h3{ font-family:var(--serif); font-weight:700; font-size:clamp(1.5rem,1.9vw,1.85rem); line-height:1.02; letter-spacing:-.015em; margin:0; text-transform:uppercase; }
.catCard__desc{ margin:16px 0 0; font-size:.95rem; line-height:1.5; color:var(--c-soft); }
.catCard__more{ margin-top:auto; padding-top:22px; display:inline-flex; align-items:center; gap:.55em; font-family:var(--serif); font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--c-fg); }
.catCard__more span{ border-bottom:2px solid currentColor; padding-bottom:2px; transition:gap .25s; }
.catCard__more .arr{ border:0; transition:transform .25s; }
.catCard:hover .catCard__more .arr{ transform:translateX(5px); }
.catCard--olive  { --c-bg:#555E39; --tag-bg:#C9D472; --tag-fg:#2A2A18; }
.catCard--rust   { --c-bg:#72281c; --tag-bg:#E0A982; --tag-fg:#3A1E14; }
.catCard--brown  { --c-bg:#6E4A2B; --tag-bg:#E9D27C; --tag-fg:#352712; }
.catCard--teal   { --c-bg:#39524C; --tag-bg:#9CC4DD; --tag-fg:#16313C; }
.catCard--plum   { --c-bg:#5C3A45; --tag-bg:#D8A7A0; --tag-fg:#3A1F22; }
.catCard--ochre  { --c-bg:#9A6A26; --tag-bg:#EBD9A0; --tag-fg:#3A2A0E; }
.catCta{ display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:clamp(36px,4vw,52px); }

/* ================= BLOC PRO (CTA encre/sapin) ================= */
.ctaM{ position:relative; background:#39524C; color:var(--creme); border-radius:var(--r); overflow:hidden; padding:clamp(48px,6vw,84px) clamp(28px,5vw,72px); }
.ctaM__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,56px); align-items:center; }
.ctaM .eyebrow{ color:#9CC4DD; }
.ctaM h2{ font-family:var(--serif); font-weight:600; font-size:clamp(2rem,3.6vw,3.1rem); line-height:1.03; letter-spacing:-.025em; margin:14px 0 16px; color:#fff; }
.ctaM p{ color:rgba(250,249,246,.82); max-width:42ch; }
.ctaM__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.btn-onink{ background:#E1A982; color:#3A1E14; }
.btn-onink:hover{ background:#ecb997; }
.btn-ghost-w{ background:transparent; border-color:rgba(250,249,246,.5); color:#fff; }
.btn-ghost-w:hover{ background:rgba(250,249,246,.12); border-color:#fff; }
.ctaM__min{ display:inline-flex; align-items:center; gap:.6em; margin-top:22px; font-size:.84rem; font-weight:600; color:rgba(250,249,246,.8); }
.ctaM__min .cc{ width:16px; height:16px; }
.ctaM__args{ display:flex; flex-direction:column; gap:1px; background:rgba(250,249,246,.16); border:1px solid rgba(250,249,246,.16); border-radius:var(--r-sm); overflow:hidden; }
.ctaM__arg{ background:#39524C; padding:18px 22px; }
.ctaM__arg h4{ font-family:var(--serif); font-size:1.08rem; font-weight:600; color:#fff; margin:0 0 2px; }
.ctaM__arg p{ margin:0; font-size:.88rem; color:rgba(250,249,246,.72); }

html,body{ overflow-x:clip; }

/* ================= FORMULAIRES ================= */
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:.82rem; font-weight:600; letter-spacing:.02em; color:var(--ink); }
.field label .req{ color:var(--terracotta); }
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--creme-2); border:1px solid var(--line-2); border-radius:var(--r);
  padding:13px 15px; width:100%; transition:border-color .2s, box-shadow .2s;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--terracotta); box-shadow:0 0 0 3px rgba(114,40,28,.12); }
.field--full{ grid-column:1 / -1; }
.formGrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
.form-note{ font-size:.82rem; color:var(--ink-soft); display:flex; gap:.6em; align-items:flex-start; }
.form-note .cc{ width:16px; height:16px; margin-top:2px; flex:none; }

/* segmented profile selector */
.segs{ display:flex; flex-wrap:wrap; gap:8px; }
.seg{ font-size:.9rem; font-weight:600; padding:10px 16px; border-radius:999px; border:1.5px solid var(--line-2); background:var(--creme-2); color:var(--ink); cursor:pointer; transition:all .2s; }
.seg:hover{ border-color:var(--terracotta); }
.seg.active{ background:var(--terracotta); border-color:var(--terracotta); color:#fff; }

/* ================= AVIS GOOGLE ================= */
.reviewsSection{ background:var(--creme-2); }
.reviewsHeader{ display:grid; grid-template-columns:260px 1fr; gap:clamp(32px,4vw,64px); align-items:start; }
.reviewsHeader__left{ display:flex; flex-direction:column; gap:20px; padding-top:8px; }
.reviewsHeader__left h2{ margin:0; }
.reviewsHeader__score{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.reviewsHeader__stars{ color:var(--terracotta); font-size:1.1rem; letter-spacing:3px; }
.reviewsHeader__num{ font-weight:700; font-size:.95rem; }
.reviewsHeader__count{ color:var(--ink-soft); font-size:.85rem; }
.reviewsNav{ display:flex; gap:10px; margin-top:8px; }
.reviewsNav__btn{ width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line-2); background:var(--creme); color:var(--ink); font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.reviewsNav__btn:hover{ background:var(--terracotta); border-color:var(--terracotta); color:#fff; }
.reviewsTrackWrap{ overflow:hidden; }
.reviewsTrack{ display:flex; gap:20px; transition:transform .45s cubic-bezier(.4,0,.2,1); will-change:transform; }
.reviewCard2{ margin:0; background:var(--creme); border:1px solid var(--line-2); border-radius:var(--r); padding:28px 26px 24px; display:flex; flex-direction:column; gap:16px; min-width:calc((100% - 40px)/3); flex-shrink:0; }
.reviewCard2__quote{ font-size:4rem; line-height:.8; color:var(--terracotta); opacity:.25; font-family:Georgia,serif; font-style:italic; margin-bottom:-8px; }
.reviewCard2 blockquote{ margin:0; font-size:.9rem; color:var(--ink); line-height:1.7; flex:1; }
.reviewCard2__stars{ color:var(--terracotta); font-size:.9rem; letter-spacing:3px; }
.reviewCard2__author{ display:flex; align-items:center; gap:12px; margin-top:4px; border-top:1px solid var(--line-2); padding-top:14px; }
.reviewCard2__author .av--sm{ width:38px; height:38px; min-width:38px; border-radius:50%; background:var(--olive); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; }
.reviewCard2__author strong{ display:block; font-size:.88rem; color:var(--ink); }
.reviewCard2__author span{ font-size:.75rem; color:var(--ink-soft); }
@media (max-width:900px){
  .reviewsHeader{ grid-template-columns:1fr; }
  .reviewsNav{ flex-direction:row; }
  .reviewCard2{ min-width:calc((100% - 20px)/2); }
}
@media (max-width:560px){ .reviewCard2{ min-width:100%; } }

/* ================= RESPONSIVE communs ================= */
@media (min-width:1500px){
  .catGrid{ grid-template-columns:repeat(3,1fr); gap:clamp(24px,2vw,36px); }
  .catCard h3{ font-size:clamp(1.7rem,1.6vw,2rem); }
  .headM{ gap:clamp(40px,5vw,80px); }
}
@media (max-width:980px){
  .headM{ grid-template-columns:1fr; }
  .ctaM__grid{ grid-template-columns:1fr; }
  .catGrid{ grid-template-columns:repeat(2,1fr); }
  .formGrid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .catGrid{ grid-template-columns:1fr; }
}