/* =========================================================================
   La Grande Tablée — Socle CSS
   Charte partagée par les trois pages du site vitrine.
   Sections :  1. Tokens · 2. Polices · 3. Reset & base · 4. Typographie
               5. Utilitaires de mise en page · 6. Boutons · 7. En-tête
               8. Décors animés · 9. Composants (landing) · 10. Pied de page
               11. Media queries (mobile-first, min-width)
   ========================================================================= */

/* ------- 1. Tokens ------------------------------------------------------- */
:root{
  /* Couleurs relevées dans l'export — ne pas modifier */
  --cream:#FAF3E0;   --warm:#F2E8CC;    --white:#FFFFFF;
  --ink:#2C2010;     --muted:#4A3829;
  --soft:#74624A;       /* texte discret sur fond clair — AA (était #8A7860, 3.8:1) */
  --soft-dim:#AD9E88;   /* libellés discrets sur fond sombre (pied de page) — AA */
  --border:#E2D5B8;  --border-2:#E6DDC9; --border-3:#CBB98F;
  --terra:#B04828;   --terra-dark:#8A3A1F;
  --sun:#F9C74F;
  --sun-ink:#B8790F;    /* or foncé — sun comme TEXTE sur blanc (AA gros texte 3.6:1) */
  --sage:#84A98C;    --sage-dark:#2E5236; --sage-pale:#EAF2EC;

  /* Échelle typographique rationalisée : 72/52/38/26/20/17/15/13/11 */
  --fs-1:72px; --fs-2:52px; --fs-3:38px; --fs-4:26px; --fs-5:20px;
  --fs-6:17px; --fs-7:15px; --fs-8:13px; --fs-9:11px;

  /* Titres fluides (mobile → desktop) */
  --h1:  clamp(40px, 7.4vw, 72px);
  --h2:  clamp(30px, 4.2vw, 38px);
  --cta: clamp(34px, 5.2vw, 52px);

  /* Rayons */
  --r-pill:999px; --r-lg:20px; --r-md:14px; --r-sm:6px;

  /* Polices */
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Rythme */
  --pad:20px;                 /* gouttière latérale — 20 mobile */
  --maxw:1300px;
  --shadow-card:0 30px 60px -20px rgba(44,32,16,.25);
}

/* ------- 2. Polices ----------------------------------------------------- */
@font-face{
  font-family:"Cormorant Garamond"; font-style:normal; font-weight:700;
  font-display:swap;
  src:url("/fonts/cormorant-garamond-700.woff2") format("woff2");
}
@font-face{
  font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:400;
  font-display:swap;
  src:url("/fonts/plus-jakarta-sans-400.woff2") format("woff2");
}
@font-face{
  font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:600;
  font-display:swap;
  src:url("/fonts/plus-jakarta-sans-600.woff2") format("woff2");
}
@font-face{
  font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:700;
  font-display:swap;
  src:url("/fonts/plus-jakarta-sans-700.woff2") format("woff2");
}

/* ------- 3. Reset & base ------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;
  font-family:var(--sans);
  font-size:var(--fs-6);
  line-height:1.6;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:var(--terra);text-decoration:none;transition:color .2s,background .2s,opacity .2s}
a:hover{color:var(--terra-dark)}
ul{list-style:none}
strong{font-weight:700}

/* Focus clavier visible sur tous les éléments interactifs */
:focus-visible{outline:3px solid var(--terra);outline-offset:2px;border-radius:3px}
.reassure :focus-visible,.share :focus-visible,.site-footer :focus-visible{outline-color:var(--sun)}

/* Lien d'évitement — visible uniquement au focus clavier */
.skip-link{position:absolute;left:12px;top:-64px;z-index:100;
  background:var(--ink);color:var(--cream);font-weight:600;font-size:var(--fs-7);
  padding:12px 18px;border-radius:var(--r-sm);transition:top .18s ease}
.skip-link:focus{top:12px}

/* ------- 4. Typographie ------------------------------------------------- */
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.1;color:var(--ink)}
.eyebrow{
  font-size:var(--fs-9);font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--terra);
}
.lead{font-size:var(--fs-5);line-height:1.6;color:var(--muted)}
.muted{color:var(--muted)}

/* ------- 5. Utilitaires de mise en page --------------------------------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.container--wide{--maxw:1400px}
.container--narrow{--maxw:800px}

.section{padding-block:clamp(56px,9vw,120px);position:relative;z-index:1}
.section--tight{padding-block:clamp(40px,7vw,90px)}
.section--band{background:var(--warm)}
.section--sage{background:var(--sage-pale)}

.grid{display:grid;gap:24px}
.center{text-align:center}
.stack{display:flex;flex-direction:column}

/* ------- 6. Boutons ----------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:600;font-size:var(--fs-6);
  line-height:1;text-align:center;cursor:pointer;border:none;
  padding:16px 32px;border-radius:var(--r-pill);
  width:100%;                 /* pleine largeur sous 640 */
  transition:transform .2s,opacity .2s,background .2s,color .2s;
}
.btn:hover{opacity:.92;color:inherit}
.btn--primary{background:var(--terra);color:var(--white)}
.btn--primary:hover{background:var(--terra-dark);color:var(--white)}
.btn--outline{background:transparent;color:var(--terra);border:1.5px solid var(--terra)}
.btn--outline:hover{background:var(--terra);color:var(--white)}
.btn--cta{background:var(--sun);color:var(--ink);font-weight:700;font-size:var(--fs-6);padding:20px 44px}
.btn--cta:hover{background:#f4bd3a;color:var(--ink)}
.btn--sm{padding:12px 24px;font-size:var(--fs-7)}

/* ------- 7. En-tête ----------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;background:var(--cream);
  border-bottom:1px solid var(--border);
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:14px;
}
.logo{font-family:var(--serif);font-weight:700;font-size:clamp(15px,4.2vw,26px);color:var(--ink);white-space:nowrap}
.nav{display:flex;align-items:center;gap:10px}
.nav__links{display:flex;align-items:center;gap:28px}
.nav__link{color:var(--muted);font-size:var(--fs-7);font-weight:500}
.nav__link:hover{color:var(--terra)}
.nav__cta{width:auto;white-space:nowrap}

/* Bouton hamburger — visible seulement sous 900 px */
.nav__toggle{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:10px;border:1px solid var(--border);
  border-radius:var(--r-sm);background:var(--white);cursor:pointer;
}
.nav__toggle span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Menu déroulant mobile */
@media (max-width:899px){
  .site-header__inner{gap:10px}
  .nav__toggle{width:42px;height:42px;padding:11px 9px}
  .nav__cta{padding:10px 16px;font-size:var(--fs-7)}
  .nav__links{
    position:absolute;top:100%;right:var(--pad);left:var(--pad);
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--white);border:1px solid var(--border);
    border-radius:var(--r-md);box-shadow:var(--shadow-card);
    padding:8px;margin-top:8px;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .2s,transform .2s,visibility .2s;
  }
  .nav__links.is-open{opacity:1;visibility:visible;transform:translateY(0)}
  .nav__links .nav__link{padding:12px 14px;border-radius:var(--r-sm);font-size:var(--fs-6)}
  .nav__links .nav__link:hover{background:var(--cream)}
}
/* « Calculer » seul sur téléphone ; libellé complet dès qu'il y a la place */
@media (max-width:639px){
  .nav__cta-more{display:none}
}
@media (min-width:900px){
  .nav__toggle{display:none}
  .nav__links{position:static;opacity:1;visibility:visible;transform:none}
}

/* ------- 8. Décors animés ---------------------------------------------- */
.decor{position:absolute;pointer-events:none;z-index:2;
  animation:float 4s ease-in-out infinite;animation-delay:var(--d,0s)}
.decor img{width:100%;height:100%}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.pulse{animation:pulse 2s ease-in-out infinite}

/* Héros : bande haute réservée sous 640 px pour ne jamais recouvrir le ticket */
.hero__visual{padding-top:48px}
.hero__visual .decor{width:clamp(42px,11vw,56px);height:clamp(42px,11vw,56px)}
.d-tomate {top:0; left:8%;  --d:0s}
.d-vin    {top:0; right:8%; --d:.3s}
.d-raisin, .d-baguette{display:none}          /* 2 décors max sous 640 */

/* Décors de section : cantonnés à la bande de padding haute, jamais sur le texte */
.d-section{display:none;width:clamp(40px,5vw,54px);height:clamp(40px,5vw,54px);
  top:clamp(12px,3vw,36px)}
.d-epi    {right:5%;  --d:.4s}
.d-fromage{right:6%;  --d:.8s}
.d-couverts{left:6%;  --d:.2s}
.d-assiette{right:8%; --d:.6s}
.d-feuille{left:5%;   --d:1.1s}

/* ------- 9. Composants (landing) --------------------------------------- */

/* 9.1 Héros */
.hero{display:grid;gap:clamp(40px,6vw,64px);align-items:center;padding-block:clamp(48px,7vw,100px) clamp(64px,9vw,120px)}
.hero__title{font-size:var(--h1);line-height:1.05;margin:16px 0 24px}
.hero__title .hl{color:var(--terra);background:var(--sun);padding:0 8px;border-radius:var(--r-sm)}
.hero__lead{font-size:var(--fs-5);line-height:1.6;color:var(--muted);max-width:460px;margin-bottom:32px}
.hero__actions{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
.hero__note{font-size:var(--fs-8);color:var(--soft)}
.hero__visual{position:relative;display:flex;justify-content:center;isolation:isolate}

/* 9.2 Ticket de caisse */
.ticket{
  position:relative;background:var(--white);border-radius:var(--r-sm);
  padding:40px 32px 32px;width:100%;max-width:300px;
  box-shadow:var(--shadow-card);transform:rotate(-.5deg);z-index:1;
}
.ticket::before,.ticket::after{
  content:"";position:absolute;left:0;right:0;height:9px;
  background:radial-gradient(circle at 7px 0,var(--cream) 6px,transparent 6.5px);
  background-size:20px 9px;background-repeat:repeat-x;
}
.ticket::before{top:-1px;transform:scaleY(-1)}
.ticket::after{bottom:-1px}
.ticket__badge{
  position:absolute;top:8px;right:24px;background:var(--sage-dark);color:var(--white);
  font-size:var(--fs-9);font-weight:700;letter-spacing:1px;padding:6px 14px;
  border-radius:var(--r-pill);box-shadow:0 4px 10px rgba(0,0,0,.15);z-index:2;
}
.ticket__title{font-family:var(--serif);font-weight:700;font-size:var(--fs-4);margin-bottom:4px}
.ticket__meta{font-size:var(--fs-9);font-weight:600;letter-spacing:1px;color:var(--soft);text-transform:uppercase;margin-bottom:20px}
.ticket__rows{display:flex;flex-direction:column;gap:10px;font-size:var(--fs-7)}
.ticket__row{display:flex;align-items:baseline;gap:6px}
.ticket__row .dots{flex:1;border-bottom:1px dotted var(--border-3)}
.ticket__row .val{font-weight:600}
.ticket__divider{border-top:1px dashed var(--border-3);margin:20px 0 16px}
.ticket__label{font-size:var(--fs-9);font-weight:700;letter-spacing:1px;color:var(--soft);text-transform:uppercase;margin-bottom:4px}
.ticket__budget{font-family:var(--serif);font-weight:700;font-size:var(--fs-3);color:var(--terra);line-height:1}
.ticket__sub{font-size:var(--fs-8);color:var(--soft);margin-top:4px}

/* 9.3 Bande de réassurance */
.reassure{background:var(--ink);padding-block:24px}
.reassure__list{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 40px}
.reassure__item{display:flex;align-items:center;gap:10px;color:var(--cream);font-size:var(--fs-7);font-weight:500}
.reassure__item .check{color:var(--sun);font-weight:800}

/* 9.4 Opposition (avant / après) */
.oppo-grid{display:grid;gap:32px}
.oppo__old{font-size:var(--fs-8);color:var(--soft);margin-bottom:12px}
.oppo__old .strike{text-decoration:line-through}
.oppo__new{font-family:var(--serif);font-weight:700;font-size:var(--fs-4);color:var(--ink)}

/* 9.5 Étapes */
.steps-grid{display:grid;gap:28px}
.step{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:36px 30px;transition:transform .2s,box-shadow .2s}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.step__num{font-family:var(--serif);font-weight:700;font-size:var(--fs-2);color:var(--sun-ink);line-height:1;margin-bottom:16px}
.step__title{font-family:var(--serif);font-weight:700;font-size:var(--fs-4);margin-bottom:12px}
.step__body{font-size:var(--fs-7);line-height:1.6;color:var(--muted)}

/* 9.6 Deux tablées */
.tables__head{max-width:640px;margin:0 auto clamp(36px,5vw,60px);text-align:center}
.tables__head h2{font-size:var(--h2);margin-bottom:14px}
.tables__head p{font-size:var(--fs-6);color:var(--muted)}
.tables-grid{display:grid;gap:32px}
.table-card{background:var(--white);border-radius:var(--r-lg);overflow:hidden}
.table-card__figure{margin:0;width:100%;aspect-ratio:16/10;background:var(--warm) center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;color:var(--soft);font-size:var(--fs-8)}
.table-card__figure img{width:100%;height:100%;object-fit:cover}
.table-card__figure .figure-note{text-transform:uppercase;letter-spacing:1px;font-weight:600;font-size:var(--fs-9)}
.table-card__body{padding:32px}
.table-card__title{font-family:var(--serif);font-weight:700;font-size:var(--fs-4);margin-bottom:8px}
.table-card__meta{font-size:var(--fs-8);color:var(--terra);font-weight:600;margin-bottom:20px}
.qty-list{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-7);margin-bottom:24px}
.qty-list li{display:flex;justify-content:space-between}
.qty-list .val{font-weight:700}
.budget-box{background:var(--cream);border-radius:var(--r-md);padding:16px 20px;font-size:var(--fs-7)}

/* 9.7 Bloc « feature » (texte + téléphone) */
.feature{display:grid;gap:clamp(40px,6vw,64px);align-items:center}
.feature__text h2{font-size:var(--h2);margin-bottom:20px}
.feature__text p{font-size:var(--fs-6);line-height:1.7;color:var(--muted);max-width:460px}
.feature__media{display:flex;justify-content:center}

/* Cadre de téléphone réutilisable */
.phone-frame{background:#111;border-radius:40px;padding:12px;box-shadow:0 40px 60px -25px rgba(44,32,16,.35)}
.section--sage .phone-frame{box-shadow:0 40px 60px -25px rgba(132,169,140,.35)}
.phone-frame__screen{
  width:260px;max-width:70vw;
  background:var(--cream);border-radius:30px;overflow:hidden;
}
.phone-frame__screen img{width:100%;height:auto;display:block}

/* 9.8 Section « Un lien » (verte) */
.share__card{background:var(--sage-dark);border-radius:28px;
  padding:clamp(40px,6vw,80px) clamp(28px,5vw,64px);
  display:grid;gap:clamp(32px,5vw,56px);align-items:center}
.share__text h2{font-size:var(--h2);color:var(--white);margin-bottom:20px}
.share__text p{font-size:var(--fs-6);line-height:1.7;color:#E6EDE8;max-width:460px}
.pills{display:flex;flex-wrap:wrap;gap:12px}
/* Fond opaque = exactement rgba(255,255,255,.15) sur --sage-dark, mais mesurable
   par les outils de contraste (blanc/#4D6C54 = 5.85:1, AA) */
.pill{background:#4D6C54;color:var(--white);font-size:var(--fs-7);
  font-weight:600;padding:12px 22px;border-radius:var(--r-pill)}

/* 9.9 FAQ */
.faq__title{font-size:var(--h2);text-align:center;margin-bottom:clamp(32px,5vw,48px)}
.faq-list{display:flex;flex-direction:column;gap:16px}
.faq-item{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:26px 30px}
.faq-item h3{font-family:var(--serif);font-weight:700;font-size:var(--fs-5);margin-bottom:8px}
.faq-item p{font-size:var(--fs-7);line-height:1.6;color:var(--muted)}

/* 9.10 Appel final */
.final{text-align:center;padding-block:clamp(56px,8vw,60px) clamp(80px,11vw,140px)}
.final h2{font-size:var(--cta);margin-bottom:16px}
.final p{font-size:var(--fs-6);color:var(--muted);margin-bottom:32px}
.final .btn{width:auto;max-width:100%}

/* 9.11 Page 404 */
.error404{text-align:center;padding-block:clamp(72px,12vw,140px);position:relative}
.error404__title{font-size:var(--cta);margin:16px 0 20px}
.error404__lead{font-size:var(--fs-5);color:var(--muted);max-width:520px;margin:0 auto 36px}
.error404__actions{display:flex;flex-direction:column;gap:14px;align-items:center}
.error404__actions .btn{width:100%;max-width:320px}
.d-error{top:clamp(8px,4vw,32px);right:8%;width:clamp(44px,7vw,64px)}
@media (min-width:640px){
  .error404__actions{flex-direction:row;justify-content:center}
  .error404__actions .btn{width:auto}
}

/* ------- 10. Pied de page ---------------------------------------------- */
.site-footer{background:var(--ink);color:var(--cream)}
.footer-grid{display:grid;gap:40px;padding-block:clamp(48px,7vw,70px) 40px;
  border-bottom:1px solid rgba(250,243,224,.15)}
.footer-brand__name{font-family:var(--serif);font-weight:700;font-size:var(--fs-4);margin-bottom:12px}
.footer-brand p{font-size:var(--fs-8);color:#C9BDA3;max-width:320px;line-height:1.6}
.social{display:flex;gap:16px;margin-top:20px}
.social a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:50%;background:rgba(250,243,224,.15);color:var(--cream);font-size:var(--fs-5)}
.social a:hover{background:rgba(250,243,224,.28)}
.footer-col__head{font-size:var(--fs-9);font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--soft-dim);margin-bottom:16px}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{color:#E6DDC9;font-size:var(--fs-8)}
.footer-links a:hover{color:var(--white)}
.footer-bottom{padding-top:24px;font-size:var(--fs-8);color:var(--soft-dim)}

/* ------- 11. Media queries (min-width) ---------------------------------- */
@media (min-width:640px){
  :root{--pad:32px}
  .btn{width:auto}
  .hero__actions{flex-direction:row}
  .oppo-grid{grid-template-columns:repeat(2,1fr)}
  .steps-grid{grid-template-columns:repeat(3,1fr)}
  .tables-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr}

  /* Gouttières larges : les 4 décors du héros reviennent, autour du ticket */
  .hero__visual{padding-top:0}
  .d-raisin,.d-baguette{display:block}
  .d-tomate  {top:4%;    left:2%}
  .d-raisin  {top:10%;   right:2%; --d:.5s}
  .d-baguette{bottom:14%;left:0;   --d:1s}
  .d-vin     {top:auto;bottom:24%; right:2%}
}
@media (min-width:900px){
  .hero{grid-template-columns:1fr 1fr}
  .hero__text{max-width:510px}   /* proportions d'origine (le bloc faisait 510 px) */
  .oppo-grid{grid-template-columns:repeat(4,1fr)}
  .feature{grid-template-columns:1fr 1fr}
  .share__card{grid-template-columns:1.1fr 1fr}
  .ticket{transform:rotate(-3deg);max-width:290px}
  .d-section{display:block}       /* décors de section : gouttières présentes */
}
@media (min-width:1200px){
  :root{--pad:64px}
}

/* ------- 12. Mouvement réduit ------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .decor{animation:none}
}