/* ===========================================================
   Dans la sauce — Design system du site public (landing + pages marketing)
   Source de vérité partagée par landing.html, fonctionnalites.html,
   tarifs.html, temoignages.html, ressources.html.
   =========================================================== */

:root{
  --page:#FFFFFF;
  --nuit:#2E2C38;
  --nuit-2:#232130;
  --vert:#8CC63F;
  --rose:#EC1E79;
  --orange:#F5A623;
  --rouge:#D64B2F;
  --ivoire:#F4EEE3;
  --encre:#1F1D22;
  --gris-texte:#7A756C;
  --radius-lg:28px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Inter',sans-serif;
  background:var(--page);
  color:var(--encre);
  line-height:1.5;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:'Fraunces',serif;
  font-weight:500;
  letter-spacing:-0.01em;
  font-variant-ligatures:none;
  font-feature-settings:"liga" 0,"dlig" 0,"clig" 0,"hlig" 0,"calt" 0;
}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px;}

header{padding:26px 0 0;}

/* Header "intelligent" au scroll — activé uniquement quand le JS de la page
   ajoute la classe body.smart-header (landing.html), pour ne pas affecter
   les autres pages qui partagent ce même fichier CSS. */
body.smart-header header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:#FFFFFF;
  border-bottom:1px solid transparent;
  transition:transform .35s ease, border-color .35s ease;
}
body.smart-header header.header-hidden{transform:translateY(-100%);}
body.smart-header header.header-shadow{border-bottom-color:#ECE8DF;}
@media (prefers-reduced-motion: reduce){
  body.smart-header header{transition:none;}
}
.header-inner{display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:center;gap:7px;font-family:'Fraunces',serif;font-size:19px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap;}
.logo img{height:1em;width:1em;flex:none;}
.logo span{color:var(--rose);}
nav{display:flex;gap:36px;font-size:15px;color:var(--gris-texte);}
nav a{transition:color .2s ease;}
nav a:hover{color:var(--encre);}
.header-actions{display:flex;gap:10px;align-items:center;}
.icon-btn{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid #ECE8DF;background:#fff;color:var(--gris-texte);
  transition:border-color .2s ease, color .2s ease;
}
.icon-btn:hover{border-color:var(--encre);color:var(--encre);}
.icon-btn svg{width:16px;height:16px;}
.btn-outline{
  padding:10px 20px;border-radius:999px;border:1px solid #DCD7CC;
  font-size:14px;font-weight:500;background:#fff;
  transition:transform .15s ease, border-color .2s ease;
  display:inline-block;white-space:nowrap;
}
.btn-outline:hover{transform:translateY(-1px);border-color:var(--encre);}
.btn-solid-dark{
  padding:10px 20px;border-radius:999px;border:none;
  font-size:14px;font-weight:600;background:var(--rouge);color:#fff;
  transition:transform .15s ease, background .2s ease;
  display:inline-block;white-space:nowrap;
}
.btn-solid-dark:hover{transform:translateY(-1px);background:#BC4025;}

/* HERO (landing uniquement) */
.hero{
  position:relative;
  margin-top:18px;
  min-height:600px;
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;
  overflow:hidden;
  border-radius:var(--radius-lg);
}
.hero-text{
  position:relative;z-index:2;
  padding:60px 30px 60px 20px;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;color:var(--rose);
  font-family:'IBM Plex Mono',monospace;margin-bottom:20px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rose);}
.hero-text h1{font-size:clamp(28px, 3.6vw, 52px);font-weight:400;line-height:1.05;letter-spacing:-0.02em;color:var(--encre);margin-bottom:20px;}
.hero-text p.lead{font-size:16px;font-weight:400;line-height:1.6;color:var(--gris-texte);max-width:400px;margin-bottom:30px;}
.cta-row{display:flex;align-items:center;gap:16px;margin-bottom:30px;}
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--rouge);color:#fff;
  font-weight:600;font-size:15px;
  padding:16px 26px;border-radius:999px;border:none;cursor:pointer;
  transition:transform .15s ease, background .2s ease;
  animation:btn-primary-bounce 2.4s ease-in-out infinite;
}
.btn-primary:hover{transform:translateY(-2px);background:#BC4025;}
.btn-primary svg{width:15px;height:15px;transition:transform .2s ease;}
.btn-primary:hover svg{transform:translateX(3px);}
@keyframes btn-primary-bounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-5px);}
}
@media (prefers-reduced-motion: reduce){
  .btn-primary{animation:none;}
}
.provider-row{display:flex;gap:10px;}
.provider-pill{
  display:flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:999px;
  background:#fff;border:1px solid #ECE8DF;
  font-size:13px;color:var(--encre);font-weight:500;
}
.trust-line{display:flex;gap:26px;font-size:12.5px;color:var(--gris-texte);margin-top:26px;}
.trust-line b{color:var(--encre);font-weight:600;display:block;font-size:13px;}

.hero-visual{
  position:relative;z-index:2;height:100%;
  display:flex;align-items:center;justify-content:center;
  perspective:1200px;
}
.plate-wrap{
  position:relative;width:400px;height:400px;
  transform-style:preserve-3d;
  transition:transform .35s ease-out;
  will-change:transform;
}
.avatar-dot{
  position:absolute;width:32px;height:32px;border-radius:50%;
  background:#fff;color:var(--encre);
  font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--nuit);
  animation:float 5s ease-in-out infinite;
}
.info-card{
  position:absolute;left:-6px;bottom:-30px;
  background:var(--orange);color:#4A3208;
  border-radius:20px;padding:18px 22px;width:210px;
  box-shadow:0 18px 34px rgba(0,0,0,0.28);
  animation:float 6s ease-in-out infinite;
  animation-delay:.4s;
}
.info-card .dish-name{font-family:'Fraunces',serif;font-size:19px;font-weight:600;color:#3A2A05;}
.info-card .dish-score{display:flex;align-items:center;gap:6px;font-size:13px;margin-top:4px;color:#4A3208;}
.info-card .dish-score svg{width:13px;height:13px;flex:none;color:var(--rouge);}
.info-card .time-pill{
  margin-top:14px;display:inline-flex;align-items:center;gap:6px;
  background:var(--encre);color:#fff;font-size:12px;padding:8px 14px;border-radius:999px;
}
.info-card .time-pill svg{width:13px;height:13px;flex:none;}
.info-card .info-fade{transition:opacity .4s ease;}

.hero-plate-photo{
  width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  box-shadow:0 24px 50px -12px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.06);
  transition:opacity .5s ease;
}
.country-badge{
  position:absolute;right:5%;bottom:9%;z-index:3;
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,0.94);color:var(--encre);
  padding:7px 13px;border-radius:999px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  box-shadow:0 10px 22px rgba(0,0,0,0.3);
  transition:opacity .4s ease;
}
.country-badge .flag{font-size:14px;line-height:1;}
@media (prefers-reduced-motion: reduce){
  .hero-plate-photo,.country-badge,.info-card .info-fade{transition:none;}
}

@keyframes float{
  0%, 100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  .avatar-dot,.info-card{animation:none;}
  .plate-wrap{transition:none;}
  .reveal{opacity:1;transform:none;transition:none;}
}

/* SECTIONS génériques (réutilisées sur toutes les pages) */
.section{padding:80px 0;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px;}
.section-head h2{font-size:28px;}
.section-head p{color:var(--gris-texte);font-size:15px;max-width:340px;}

.page-hero{padding:64px 0 20px;}
.page-hero .eyebrow{margin-bottom:18px;}
.page-hero h1{font-size:clamp(32px,4vw,44px);line-height:1.1;margin-bottom:16px;max-width:640px;}
.page-hero p.lead{font-size:16px;color:var(--gris-texte);max-width:560px;}

.dish-row{
  position:relative;
  width:100vw;left:50%;margin-left:-50vw;
  overflow:hidden;
}
.dish-track{padding-left:16px;padding-right:16px;}
.nav-circle{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:36px;height:36px;border-radius:50%;border:1px solid #ECE8DF;
  display:flex;align-items:center;justify-content:center;flex:none;
  color:var(--gris-texte);background:rgba(255,255,255,0.92);
  box-shadow:0 8px 20px rgba(0,0,0,0.18);
  transition:border-color .2s ease, color .2s ease;
  animation:navGlowPulse 2.6s ease-in-out infinite;
}
#carouselPrev{left:2px;}
#carouselNext{right:2px;}
.nav-circle:hover{border-color:var(--encre);color:var(--encre);animation-play-state:paused;box-shadow:0 8px 20px rgba(0,0,0,0.18);}
.nav-circle svg{width:16px;height:16px;}

/* Halo lumineux discret pour inviter au clic, sans être intrusif */
@keyframes navGlowPulse{
  0%, 100%{box-shadow:0 0 0 0 rgba(245,166,35,0.38);}
  50%{box-shadow:0 0 0 9px rgba(245,166,35,0);}
}
@media (prefers-reduced-motion: reduce){
  .nav-circle{animation:none;}
}
.dish-track{
  display:flex;gap:38px;overflow-x:auto;overflow-y:hidden;
  padding:24px 4px 60px;
  scrollbar-width:none;
  /* Pas de scroll-behavior:smooth ici : le défilement automatique modifie
     scrollLeft à chaque frame, et le combiner avec un scroll CSS lissé fait
     s'accumuler des animations concurrentes qui provoquent des artefacts
     visuels (bribes de cartes voisines qui restent visibles). Le lissage du
     clic manuel sur les flèches est géré explicitement en JS (scrollBy avec
     behavior:'smooth'), indépendamment de cette propriété CSS. */
}
.dish-track::-webkit-scrollbar{display:none;}

/* Grande carte plat — même format que le hero (assiette + badge pays + carte orange) */
.dish-card{
  flex:0 0 auto;width:252px;
  display:flex;flex-direction:column;align-items:center;
  position:relative;z-index:0;
  /* z-index:0 (plutôt que l'absence de valeur) crée un contexte d'empilement
     propre à chaque carte : le badge orange (z-index:2) et l'assiette
     (z-index:1) ne se comparent qu'entre eux, jamais avec ceux de la carte
     voisine — sinon tous les badges du carrousel se seraient empilés
     au-dessus de toutes les assiettes, quelle que soit la carte. */
}
.dish-card-plate{
  position:relative;width:220px;height:220px;
  margin-bottom:-55px;z-index:1;
  transition:transform .25s ease-out;
  will-change:transform;
}
.dish-card-plate--placeholder{
  background:rgba(122,117,108,0.16);border-radius:50%;
}
.dish-card-photo{
  width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  box-shadow:0 20px 40px -10px rgba(0,0,0,0.45);
  transition:box-shadow .25s ease, opacity .5s ease;
  background:var(--orange);
  opacity:0;
}
.dish-card-photo.is-loaded{opacity:1;}
@media (prefers-reduced-motion: reduce){
  .dish-card-photo{transition:box-shadow .25s ease;opacity:1;}
}
.dish-card-plate.is-active .dish-card-photo{
  box-shadow:0 34px 60px -12px rgba(0,0,0,0.55);
}
.dish-card-country{
  position:absolute;right:4%;top:8%;z-index:2;
  display:flex;align-items:center;gap:5px;
  background:rgba(255,255,255,0.94);color:var(--encre);
  padding:5px 10px;border-radius:999px;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;
  box-shadow:0 8px 18px rgba(0,0,0,0.28);
}
.dish-card-country .flag{font-size:12px;line-height:1;}
.dish-card-badge{
  position:relative;z-index:2;
  background:var(--orange);color:#4A3208;
  border-radius:20px;padding:16px 18px;width:184px;
  box-sizing:border-box;
  box-shadow:0 18px 34px rgba(0,0,0,0.28);
  transition:transform .25s ease, box-shadow .25s ease;
}
.dish-card.is-active .dish-card-badge{
  transform:translateY(-4px);
  box-shadow:0 22px 40px rgba(0,0,0,0.3);
}
.dish-card-name{
  font-family:'Fraunces',serif;font-size:19px;font-weight:600;
  color:#3A2A05;line-height:1.25;
  overflow-wrap:break-word;word-break:break-word;
}
.dish-card-score{
  display:flex;align-items:center;gap:6px;font-size:13px;margin-top:6px;
  line-height:1;color:#4A3208;font-weight:600;max-width:100%;
}
.dish-card-score svg{width:13px;height:13px;flex:none;color:var(--rouge);}
.dish-card-score span{min-width:0;overflow-wrap:break-word;line-height:1;}
.dish-card-time{
  margin-top:10px;display:flex;align-items:center;gap:6px;line-height:1;
  background:var(--encre);color:#fff;font-size:12px;padding:8px 14px;border-radius:999px;
  max-width:100%;box-sizing:border-box;width:fit-content;
}
.dish-card-time svg{width:13px;height:13px;flex:none;}
.dish-card-time span{min-width:0;overflow-wrap:break-word;}

@media (prefers-reduced-motion: reduce){
  .dish-card-plate{transition:none;}
  .dish-card-badge{transition:none;}
}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.step-card{background:var(--ivoire);border-radius:22px;padding:28px;}
.step-num{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--rose);margin-bottom:16px;}
.step-card h3{font-size:18px;margin-bottom:8px;}
.step-card p{font-size:14px;color:var(--gris-texte);}

/* Témoignages — profils de démonstration (data/temoignages.js) */
.testimonial-grid-v2{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.testimonial-card-v2{
  background:#FCFAF7;border:1px solid #ECE8DF;border-radius:20px;
  padding:28px 26px;box-shadow:0 4px 16px rgba(0,0,0,0.04);
  display:flex;flex-direction:column;gap:16px;height:100%;
  transition:transform .3s ease, box-shadow .3s ease;
}
.testimonial-card-v2:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 34px rgba(0,0,0,0.09);
}
.testimonial-stars{color:var(--orange);font-size:14px;letter-spacing:3px;}
.testimonial-comment{
  font-size:14.5px;line-height:1.6;color:var(--encre);
  flex:1 1 auto;margin:0;
}
.testimonial-person{display:flex;align-items:center;gap:12px;margin-top:auto;}
.testimonial-avatar{
  width:56px;height:56px;border-radius:50%;object-fit:cover;
  flex:none;border:1px solid #ECE8DF;
}
.testimonial-name{font-weight:600;font-size:14px;color:var(--encre);}
.testimonial-country{font-size:12.5px;color:var(--gris-texte);}

@media (max-width:1024px){
  .testimonial-grid-v2{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .testimonial-grid-v2{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  .testimonial-card-v2{transition:none;}
}

.disclaimer{
  background:var(--ivoire);border-radius:20px;padding:24px 28px;
  display:flex;gap:16px;align-items:flex-start;
}
.disclaimer .dot{width:8px;height:8px;border-radius:50%;background:var(--rose);margin-top:8px;flex:none;}
.disclaimer p{font-size:13.5px;color:var(--gris-texte);}

footer{background:var(--nuit);color:#fff;padding:56px 0 30px;margin-top:20px;}
.footer-grid{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,0.12);}
.footer-grid h2{font-size:24px;max-width:340px;line-height:1.2;color:#fff;}
.footer-bottom{display:flex;justify-content:space-between;padding-top:22px;font-size:13px;color:#9A96A6;}
.footer-legal-link{
  background:none;border:none;padding:0;margin:0;
  font:inherit;color:inherit;text-decoration:underline;
  text-underline-offset:2px;cursor:pointer;
}
.footer-legal-link:hover{color:#fff;}
.footer-disclaimer{
  max-width:640px;margin:0 0 0 auto;
  overflow:hidden;max-height:0;opacity:0;
  transition:max-height .3s ease, opacity .3s ease, margin-top .3s ease;
}
.footer-disclaimer.is-open{
  max-height:200px;opacity:1;margin-top:14px;
}
.footer-disclaimer p{font-size:12.5px;line-height:1.6;color:#9A96A6;text-align:right;}
@media (max-width:880px){
  .footer-disclaimer{margin-left:0;}
  .footer-disclaimer p{text-align:left;}
}

.mobile-menu-btn{display:none;}

@media (max-width:880px){
  .wrap{padding:0 20px;}
  .header-inner{flex-wrap:wrap;row-gap:12px;position:relative;}
  .logo{font-size:16px;}
  .header-actions{gap:8px;}
  .mobile-menu-btn{
    display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:50%;border:1px solid #ECE8DF;
    background:#fff;color:var(--gris-texte);flex:none;order:-1;
  }
  .mobile-menu-btn svg{width:18px;height:18px;}
  nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;z-index:50;
    flex-direction:column;gap:0;
    background:#fff;border-top:1px solid #ECE8DF;border-radius:0 0 16px 16px;
    box-shadow:0 16px 28px rgba(0,0,0,0.1);
    padding:6px 0;
  }
  nav.nav-open{display:flex;}
  nav a{padding:13px 20px;font-size:15px;border-bottom:1px solid #F4F1EB;}
  nav a:last-child{border-bottom:none;}
  .btn-outline,.btn-solid-dark{padding:8px 14px;font-size:13px;}
  .hero{grid-template-columns:1fr;min-height:auto;align-items:stretch;margin-top:12px;}
  .hero-visual{order:-1;}
  .hero-text{padding:20px 6px 30px;}
  .plate-wrap{width:280px;height:280px;}
  .info-card{width:126px;padding:9px 11px;border-radius:12px;left:-4px;bottom:-12px;}
  .info-card .dish-name{font-size:12px;}
  .info-card .dish-score{font-size:9px;margin-top:2px;gap:4px;}
  .info-card .dish-score svg{width:8px;height:8px;}
  .info-card .time-pill{font-size:8px;padding:4px 7px;margin-top:6px;gap:3px;}
  .info-card .time-pill svg{width:8px;height:8px;}
  .country-badge{padding:5px 9px;font-size:9px;gap:4px;right:2%;bottom:5%;}
  .country-badge .flag{font-size:11px;}
  .dish-track{gap:26px;padding:16px 4px 46px;}
  .dish-card{width:224px;}
  .dish-card-plate{width:190px;height:190px;margin-bottom:-47px;}
  .dish-card-badge{width:158px;padding:13px 14px;border-radius:16px;}
  .dish-card-name{font-size:14px;}
  .dish-card-score{font-size:10.5px;margin-top:5px;}
  .dish-card-time{font-size:9.5px;padding:5px 9px;}
  .dish-card-country{padding:4px 8px;font-size:8.5px;}
  .dish-card-country .flag{font-size:11px;}
  .steps{grid-template-columns:1fr;}
  .footer-grid{flex-direction:column;gap:20px;}
}

@media (max-width:400px){
  .header-inner{justify-content:flex-start;}
  .logo{width:100%;}
  .header-actions{width:100%;justify-content:space-between;}
}

/* ---------- Mode révision (repères de section, retiré avant mise en prod) ---------- */
.review-tag{
  display:none;
  position:absolute;
  top:10px;left:10px;
  z-index:600;
  width:26px;height:26px;
  align-items:center;justify-content:center;
  background:#FF3B30;color:#fff;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;font-weight:700;
  border-radius:50%;
  box-shadow:0 4px 10px rgba(0,0,0,0.35);
}
body.review-mode .review-tag{display:flex;}
body.review-mode .tag-zone{outline:2px dashed #FF3B30;outline-offset:4px;}
.review-toggle{
  position:fixed;bottom:22px;right:22px;z-index:999;
  display:flex;align-items:center;gap:8px;
  background:#111;color:#fff;border:none;
  padding:11px 18px;border-radius:999px;
  font-size:13px;font-weight:600;
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
  transition:background .2s ease, transform .15s ease;
}
.review-toggle:hover{background:#000;transform:translateY(-1px);}
.review-toggle .rt-dot{width:8px;height:8px;border-radius:50%;background:#FF3B30;}