/* Styles de la page d'accueil (/fr/ et /ar/). */
  :root{
    --gold:#D4A017;
    --gold-dark:#8A6D1F;
    --marine:#3A2E1A;
    --marine-2:#5C4A2E;
    --marine-soft:#F3E9CE;
    --creme:#FBF6E9;
    --white:#FFFFFF;
    --grey:#6E5E42;
    --radius-lg:22px;
    --radius-md:14px;
    --shadow:0 8px 24px rgba(58,46,26,0.08);
    --shadow-lg:0 18px 40px rgba(58,46,26,0.14);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--creme);
    color:var(--marine);
    font-family:'Karla', sans-serif;
    font-size:16px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Poppins', sans-serif;
    font-weight:700;
    letter-spacing:0;
    line-height:1.18;
    margin:0;
    text-transform:none;
  }
  h1.hero-title{font-family:'Anton', sans-serif; text-transform:uppercase; letter-spacing:0.01em; line-height:1.08;}
  .script{font-family:'Kaushan Script', cursive;}
  a{color:inherit; text-decoration:none;}
  img,svg{display:block; max-width:100%;}
  button{font-family:inherit; cursor:pointer; border:none; background:none;}
  .container{max-width:1200px; margin:0 auto; padding:0 28px;}
  section{position:relative;}
  /* Contour de navigation au clavier : brun sur les fonds clairs (le doré n'y atteignait que 1,8:1), doré sur les fonds bruns */
  :focus-visible{outline:3px solid var(--marine); outline-offset:3px; border-radius:6px;}
  .topbar :focus-visible, footer :focus-visible{outline-color:var(--gold);}
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }

  /* ---------- Feuilletine entrance animation ---------- */
  #feuilletine-overlay{
    position:fixed; inset:0; z-index:9999;
    pointer-events:none; overflow:hidden;
  }
  .flake{
    position:absolute;
    top:-40px;
    opacity:0;
    will-change:transform, opacity;
    animation-name:flakeFall;
    animation-timing-function:ease-in;
    animation-fill-mode:forwards;
  }
  .flake.shard{border-radius:2px 8px 2px 8px;}
  .flake.chip{border-radius:50%;}
  .flake.curl{border-radius:60% 20% 60% 20%;}
  @keyframes flakeFall{
    0%{transform:translate(0,-40px) rotate(0deg) scale(1); opacity:0;}
    8%{opacity:1;}
    85%{opacity:1;}
    100%{transform:translate(var(--drift,0px), 105vh) rotate(600deg) scale(0.9); opacity:0;}
  }

  /* ---------- Topbar ---------- */
  .topbar{
    background:var(--marine);
    color:#E8D9C8;
    font-size:0.8rem;
    padding:8px 0;
  }
  .topbar .container{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px;}
  .topbar a{font-weight:600; color:#fff;}
  .topbar-left{display:flex; gap:20px; flex-wrap:wrap;}
  .topbar-item{display:flex; align-items:center; gap:6px;}
  /* Téléphone : une seule ligne (appel et WhatsApp) ; l'e-mail reste dans Contact, « professionnels uniquement » est écrit dans le haut de page */
  @media (max-width:560px){
    .topbar{padding:7px 0;}
    .topbar .container{justify-content:center;}
    .topbar-left{gap:16px;}
    .topbar-mail,.topbar-pro{display:none;}
  }

  /* ---------- Header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(255,248,239,0.94);
    backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(58,46,26,0.08);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; padding:12px 28px; max-width:1200px; margin:0 auto;}
  .logo{display:flex; align-items:center; gap:12px;}
  .logo img{height:52px; width:auto;}
  .logo-text{display:flex; flex-direction:column; line-height:1.1; justify-content:center;}
  .logo-text .sub{font-size:0.7rem; font-weight:700; letter-spacing:0.08em; color:var(--marine); text-transform:uppercase;}
  .nav-links{display:flex; gap:6px; align-items:center;}
  .nav-links a{font-weight:600; font-size:0.92rem; padding:9px 15px; border-radius:100px; transition:background 0.2s ease;}
  .nav-links a:hover{background:var(--marine-soft);}
  .nav-cta{background:var(--gold) !important; color:var(--marine) !important; font-weight:700; padding:11px 20px !important; box-shadow:0 6px 16px rgba(212,160,23,0.35); display:flex; align-items:center; gap:8px;}
  .nav-cta:hover{background:var(--gold-dark) !important; color:#fff !important;}
  @media (max-width:900px){.nav-links > a:not(.nav-cta){display:none;}}
  @media (max-width:560px){
    .nav{padding:10px 14px; gap:6px;}
    .logo{gap:8px;}
    .logo img{height:36px;}
    .logo-text .sub{font-size:0.58rem;}
    .nav-cta{padding:8px 12px !important; font-size:0.76rem !important; gap:5px;}
    .lang-toggle{margin-inline-start:2px; padding:2px;}
    .lang-btn{padding:5px 9px; font-size:0.7rem;}
  }
  @media (max-width:380px){
    .logo-text{display:none;}
  }

  /* ---------- Hero ---------- */
  .hero{padding:96px 0 76px; overflow:hidden; position:relative; background:var(--creme);}
  .hero::before{
    content:"";
    position:absolute; top:-180px; right:-160px;
    width:560px; height:560px; border-radius:50%;
    background:radial-gradient(circle, rgba(58,46,26,0.10), rgba(58,46,26,0) 70%);
    pointer-events:none;
  }
  .hero::after{
    content:"";
    position:absolute; bottom:-200px; left:-140px;
    width:420px; height:420px; border-radius:50%;
    background:radial-gradient(circle, rgba(212,160,23,0.08), rgba(212,160,23,0) 70%);
    pointer-events:none;
  }
  .hero-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center; position:relative; z-index:2;}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    background:#fff; color:var(--marine);
    font-weight:700; font-size:0.78rem; letter-spacing:0.04em;
    padding:9px 18px; border-radius:100px; margin-bottom:24px;
    border:1px solid rgba(58,46,26,0.12); box-shadow:var(--shadow);
  }
  .eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--gold);}
  .hero h1{font-size:clamp(2.1rem, 4.2vw, 3.3rem); color:var(--marine); margin-bottom:22px;}
  .hero h1 .accent{color:var(--gold-dark);}
  .hero p.lead{font-size:1.05rem; color:var(--grey); max-width:520px; margin-bottom:34px;}
  .hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px;}
  .btn{display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:100px; font-weight:700; font-size:0.96rem; transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;}
  .btn:active{transform:scale(0.97);}
  .btn-primary{background:var(--gold); color:var(--marine); box-shadow:0 10px 22px rgba(212,160,23,0.3);}
  .btn-primary:hover{background:var(--gold-dark); color:#fff; transform:translateY(-2px);}
  .btn-outline{background:#fff; color:var(--marine); border:1.5px solid rgba(58,46,26,0.18);}
  .btn-outline:hover{border-color:var(--marine); background:var(--marine-soft);}
  .btn-dark{background:var(--marine); color:#fff;}
  .btn-dark:hover{background:var(--marine-2);}

  .hero-stats{display:flex; gap:40px; flex-wrap:wrap;}
  .hero-stat b{font-family:'Anton',sans-serif; font-size:1.6rem; color:var(--marine); display:block;}
  .hero-stat span{font-size:0.76rem; color:var(--grey); text-transform:uppercase; letter-spacing:0.04em;}

  .hero-badge-wrap{display:flex; align-items:center; justify-content:center; position:relative;}
  .hero-anim-frame{
    position:relative;
    width:min(250px, 68%);
    aspect-ratio:899/867;      /* ratio du logo original — les 6 déclinaisons sont recadrées pile dessus */
    margin:0 auto;
    border-radius:20%;   /* calé au-dessus du rayon réel mesuré (6.4% à 18% selon la déclinaison) : jamais de coin blanc/noir visible */
    overflow:hidden;
    filter:drop-shadow(0 14px 26px rgba(58,46,26,0.28));
  }
  .hero-badge-start,
  .hero-anim-shimmer{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }
  .hero-anim-shimmer{
    /* Rideau fermé au départ : seul le logo original est visible.
       La descente est ensuite pilotée image par image en JS, calée sur
       la position réelle des paillettes de feuilletine. */
    clip-path:inset(0 0 100% 0);
  }
  .hero-anim-frame::after{
    /* Voile de scintillement : un reflet diagonal qui balaie la déclinaison
       finale en boucle, pour donner vie à une image fixe. */
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.55) 48%, rgba(255,235,180,0.35) 52%, transparent 65%);
    background-size:250% 250%;
    background-position:120% 0%;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.4s ease;
  }
  .hero-anim-frame.shimmer-active::after{
    opacity:1;
    animation:shimmerSweep 3.4s ease-in-out 0.3s infinite;
  }
  @keyframes shimmerSweep{
    0%   {background-position:130% -20%;}
    45%  {background-position:-20% 120%;}
    100% {background-position:-20% 120%;}
  }
  /* ---------- Mini-logo scintillant (kicker "Pourquoi …") ----------
     Reprise exacte de l'effet du hero (rideau + balayage 3.4s) ;
     seules les dimensions changent. Le kicker passe en inline-flex
     pour que la vignette ne déborde jamais sur la ligne du titre. */
  .kicker.kicker-logo{display:inline-flex; align-items:center; gap:8px; line-height:1;}
  .mini-logo{
    position:relative;
    display:inline-block;
    flex:0 0 auto;
    height:26px;
    aspect-ratio:899/867;
    border-radius:20%;
    overflow:hidden;
    filter:drop-shadow(0 4px 9px rgba(58,46,26,0.26));
  }
  .mini-logo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
  .mini-logo .mini-variant{clip-path:inset(0 0 100% 0);}
  .mini-logo.mini-run .mini-variant{animation:miniCurtain 1.15s cubic-bezier(0.42,0,0.58,1) 0.2s forwards;}
  .mini-logo::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.55) 48%, rgba(255,235,180,0.35) 52%, transparent 65%);
    background-size:250% 250%;
    background-position:120% 0%;
    opacity:0;
    pointer-events:none;
  }
  .mini-logo.mini-run::after{
    animation:miniFadeIn 0.4s ease 1.35s forwards, shimmerSweep 3.4s ease-in-out 1.65s infinite;
  }
  @keyframes miniCurtain{
    from{clip-path:inset(0 0 100% 0);}
    to  {clip-path:inset(0 0 0% 0);}
  }
  @keyframes miniFadeIn{ to{opacity:1;} }
  @media (max-width:520px){ .mini-logo{height:22px;} }

  @media (prefers-reduced-motion: reduce){
    .hero-anim-shimmer{display:none;}
    .hero-anim-frame::after{display:none;}
    .mini-logo .mini-variant{display:none;}
    .mini-logo::after{display:none;}
  }
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr; text-align:center;}
    .hero p.lead{margin-left:auto; margin-right:auto;}
    .hero-actions, .hero-stats{justify-content:center;}
    .hero-badge-wrap{order:-1;}
  }

  /* ---------- Trust bar : bulles flottantes ---------- */
  .trust-bar{background:#fff; padding:34px 0; border-bottom:1px solid rgba(58,46,26,0.07);}
  .bubble-cloud{position:relative; margin:0 auto; max-width:920px;}
  .bubble-cloud--compact{height:170px;}
  .bubble-cloud--large{height:270px;}
  .bubble{
    position:absolute; border-radius:50%; background:var(--marine-soft); border:1px solid rgba(58,46,26,0.08);
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:5px;
    padding:8px; box-shadow:0 10px 24px rgba(58,46,26,0.10);
    animation-name:bubbleFloat; animation-timing-function:ease-in-out; animation-iteration-count:infinite;
  }
  .bubble svg{width:24px; height:24px; flex-shrink:0;}
  .bubble span{font-size:0.72rem; font-weight:700; color:var(--marine); line-height:1.15;}
  @keyframes bubbleFloat{
    0%{opacity:0; transform:translateY(16px) scale(0.85);}
    12%{opacity:1; transform:translateY(0) scale(1);}
    45%{opacity:1; transform:translateY(-7px) scale(1.03);}
    80%{opacity:1; transform:translateY(3px) scale(1);}
    100%{opacity:0; transform:translateY(-16px) scale(0.85);}
  }
  @keyframes bubblePulse{
    0%,100%{transform:scale(1); opacity:0.94;}
    50%{transform:scale(1.05); opacity:1;}
  }
  @media (max-width:700px){
    .bubble-cloud{height:auto !important; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; position:static;}
    .bubble{position:static !important; width:auto !important; height:auto !important; aspect-ratio:1/1; border-radius:24px; animation-name:bubblePulse; animation-duration:4.5s !important; animation-delay:0s !important;}
  }
  @media (prefers-reduced-motion: reduce){ .bubble{animation:none; opacity:1; transform:none;} }

  /* ---------- Partner strip ---------- */
  .partner-strip{background:#fff; padding:26px 0; border-top:1px solid rgba(58,46,26,0.07);}
  .partner-strip .container{display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; text-align:center;}
  .partner-strip span.label{font-size:0.84rem; color:var(--grey); font-weight:600;}
  .partner-strip img{height:46px; width:auto;}

  /* ---------- Section heads ---------- */
  .section-head{max-width:680px; margin:0 auto 48px;}
  .section-head.center{text-align:center;}
  .kicker{display:inline-block; color:var(--gold-dark); font-weight:700; font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:10px;}
  .section-head h2{font-size:clamp(1.8rem,3.6vw,2.4rem); margin-bottom:12px; color:var(--marine);}
  .section-head p{color:var(--grey); font-size:1rem;}

  /* ---------- Catalogue ---------- */
  #catalogue{padding:96px 0 70px; background:var(--creme);}
  .prodsearch{position:relative; max-width:460px; margin:0 auto 22px;}
  .prodsearch input{width:100%; padding:14px 44px; border-radius:100px; border:2px solid var(--marine-soft); background:#fff; font-family:inherit; font-size:0.92rem; color:var(--marine); outline:none; transition:border-color .2s, box-shadow .2s;}
  .prodsearch input:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,160,23,0.25);}
  .prodsearch input::-webkit-search-cancel-button{display:none;}
  .prod-icon{position:absolute; inset-inline-start:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--marine-2); pointer-events:none;}
  .prod-clear{position:absolute; inset-inline-end:13px; top:50%; transform:translateY(-50%); width:25px; height:25px; border-radius:50%; background:var(--marine-soft); color:var(--marine-2); border:none; cursor:pointer; display:none; align-items:center; justify-content:center;}
  .prod-clear svg{width:12px; height:12px;}
  .prodsearch.filled .prod-clear{display:flex;}
  .prod-noresult{grid-column:1/-1; text-align:center; padding:40px 20px; color:var(--marine-2);}
  .prod-noresult strong{display:block; font-size:1.05rem; color:var(--marine); margin-bottom:6px;}
  .cat-tabs{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:42px;}
  .cat-tab{padding:11px 20px; border-radius:100px; font-weight:700; font-size:0.86rem; background:#fff; color:var(--marine); border:2px solid var(--marine-soft); transition:all 0.18s ease;}
  .cat-tab:hover{border-color:var(--gold);}
  .cat-tab.active{background:var(--marine); color:#fff; border-color:var(--marine);}

  .menu-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(270px,1fr)); gap:28px;}
  .card{
    background:#fff; border-radius:var(--radius-lg); padding:0;
    box-shadow:var(--shadow); transition:transform 0.2s ease, box-shadow 0.2s ease;
    overflow:hidden; display:flex; flex-direction:column;
  }
  .card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg);}
  .card-top{
    background:repeating-linear-gradient(135deg, var(--marine-soft), var(--marine-soft) 12px, #EFE0B8 12px, #EFE0B8 24px);
    padding:18px; position:relative;
    display:flex; align-items:center; justify-content:center;
    height:180px;
    overflow:hidden;
    border-bottom:1px dashed rgba(58,46,26,0.18);
  }
  .card-top.has-photo{
    border-bottom:1px solid rgba(58,46,26,0.1);
  }
  .product-photo{
    max-width:92%; max-height:92%;
    width:auto; height:auto;
    object-fit:contain;
    position:relative; z-index:1;
    filter:drop-shadow(0 2px 2px rgba(58,46,26,0.35)) drop-shadow(0 8px 14px rgba(58,46,26,0.22));
  }
  .placeholder-visual{display:flex; flex-direction:column; align-items:center; gap:8px; opacity:0.75;}
  .placeholder-visual svg{width:34px; height:34px;}
  .placeholder-visual span{font-size:0.68rem; font-weight:600; color:var(--grey); letter-spacing:0.02em;}
  /* libellé « Photo à venir » affiché en CSS : décor visuel, hors du texte lu par les moteurs */
  .placeholder-visual span::after{content:attr(data-texte);}
  .cat-badge{
    position:absolute; bottom:12px; right:12px;
    width:34px; height:34px; border-radius:50%;
    background:#fff; box-shadow:var(--shadow);
    display:flex; align-items:center; justify-content:center;
  }
  .cat-badge svg{width:18px; height:18px;}
  .moq-tag{
    position:absolute; top:12px; left:12px;
    background:var(--marine); color:#fff; font-size:0.66rem; font-weight:700;
    padding:5px 10px; border-radius:100px; letter-spacing:0.02em;
  }
  .card-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; flex-grow:1;}
  .card-title{font-family:'Poppins',sans-serif; font-weight:700; font-size:1.02rem; text-transform:none; color:var(--marine);} .card-title-link{color:inherit; text-decoration:none;} .card-title-link:hover{text-decoration:underline;}
  .card-desc{color:var(--grey); font-size:0.86rem; flex-grow:1;}

  /* ---------- Tip bubble (astuce & idée recette) ---------- */
  .tip-toggle{
    display:inline-flex; align-items:center; gap:6px;
    background:none; border:none; padding:0; margin-top:-4px;
    color:var(--gold-dark); font-weight:700; font-size:0.78rem;
    cursor:pointer; align-self:flex-start;
  }
  .tip-toggle:hover{text-decoration:underline;}
  .tip-bubble{
    display:none;
    position:relative;
    background:var(--marine-soft);
    border:1px solid rgba(58,46,26,0.12);
    border-radius:14px;
    padding:12px 14px;
    font-size:0.82rem;
    color:var(--marine);
    line-height:1.5;
    margin-top:2px;
  }
  .tip-bubble::before{
    content:"";
    position:absolute; top:-7px; left:18px;
    width:12px; height:12px;
    background:var(--marine-soft);
    border-left:1px solid rgba(58,46,26,0.12);
    border-top:1px solid rgba(58,46,26,0.12);
    transform:rotate(45deg);
  }
  html[dir="rtl"] .tip-bubble::before{left:auto; right:18px;}
  .tip-bubble.open{display:block;}
  .tip-bubble strong{color:var(--gold-dark);}
  .tip-recipe{display:inline-flex; align-items:center; gap:7px; margin-top:14px; padding:9px 15px; border-radius:100px; background:#fff; border:1.5px solid var(--gold); color:var(--gold-dark); font-size:0.8rem; font-weight:600; text-decoration:none;}
  .tip-recipe:hover{background:var(--gold); color:var(--marine);}
  .tip-recipe svg{width:14px; height:14px; flex:none;}
  .tip-recipe b{font-weight:700;}
  .card-footer{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px;}
  .price{font-family:'Anton',sans-serif; font-size:1.3rem; color:var(--gold-dark);}
  .price sub{font-family:'Poppins',sans-serif; font-weight:600; font-size:0.68rem; color:var(--grey); text-transform:none;}
  .stepper{display:flex; align-items:center; background:var(--marine-soft); border-radius:100px;}
  .stepper button{width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:700; color:var(--marine);}
  .stepper span{min-width:20px; text-align:center; font-weight:700; font-size:0.85rem;}
  .qty-note{margin:0; font-size:0.72rem; color:var(--grey); line-height:1.35;}
  .qty-note:empty{display:none;}
  .add-btn{width:100%; padding:12px; border-radius:100px; background:var(--marine); color:#fff; font-weight:700; font-size:0.85rem; transition:background 0.2s ease;}
  .add-btn:hover{background:var(--gold); color:var(--marine);}
  .add-btn.added{background:#2E7D4F;}
  .add-btn.unavailable, .add-btn:disabled{background:#C9BEB4; color:#fff; cursor:not-allowed;}
  .add-btn.unavailable:hover{background:#C9BEB4;}
  /* Rupture : photo et fond estompés (voile blanc 50 % + gris léger, même rendu qu'une opacité de 0,5) SANS estomper
     le badge « Rupture de stock », qui reste au-dessus du voile : contraste réel 4,9:1 (il était à 2,0:1 sous opacité). */
  .card.out-of-stock .card-top::after{content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:rgba(255,255,255,0.5); -webkit-backdrop-filter:grayscale(0.4); backdrop-filter:grayscale(0.4);}
  .card.out-of-stock .stock-badge{z-index:3;}
  .card.out-of-stock .card-top{border-bottom-color:rgba(58,46,26,0.09);}
  .card.out-of-stock .card-top.has-photo{border-bottom-color:rgba(58,46,26,0.05);}
  .card.out-of-stock .card-title, .card.out-of-stock .card-desc{opacity:0.9;}
  .stepper button:disabled{opacity:0.4; cursor:not-allowed;}
  @media (pointer:coarse){ .stepper button{width:40px; height:40px; font-size:1.15rem;} .stepper span{min-width:24px;} } /* au doigt : cibles plus grandes */
  .stock-badge{
    position:absolute; top:12px; right:12px;
    background:var(--gold-dark); color:#fff; font-size:0.66rem; font-weight:700;
    padding:5px 10px; border-radius:100px; letter-spacing:0.02em;
  }

  /* ---------- Floating quote ---------- */
  .cart-fab{
    position:fixed; bottom:26px; right:26px; z-index:60;
    background:var(--gold); color:var(--marine); padding:15px 22px; border-radius:100px;
    display:flex; align-items:center; gap:10px; font-weight:700;
    box-shadow:0 12px 28px rgba(212,160,23,0.5); transition:transform 0.2s ease;
    font-size:0.9rem;
  }
  .cart-fab:hover{transform:translateY(-3px) scale(1.03);}
  .cart-fab.vide,.cart-fab.dans-devis{display:none;} /* devis vide, ou formulaire de devis à l'écran : pas de bouton flottant (accueil.js) */
  .cart-fab .badge{background:#fff; color:var(--gold-dark); width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.8rem;}

  /* ---------- Install app button ---------- */
  .install-fab{
    position:fixed; bottom:26px; left:26px; z-index:60;
    background:var(--marine); color:#fff; padding:13px 20px; border-radius:100px;
    display:none; align-items:center; gap:8px; font-weight:700;
    box-shadow:0 12px 28px rgba(58,46,26,0.35); transition:transform 0.2s ease;
    font-size:0.86rem; border:none;
  }
  .install-fab.visible{display:flex;}
  .install-fab:hover{transform:translateY(-3px) scale(1.03); background:var(--marine-2);}
  .install-fab svg{width:18px; height:18px; flex-shrink:0;}

  .install-modal-overlay{
    display:none; position:fixed; inset:0; z-index:9998;
    background:rgba(58,46,26,0.55); align-items:center; justify-content:center; padding:24px;
  }
  .install-modal-overlay.visible{display:flex;}
  .install-modal{
    background:#fff; border-radius:var(--radius-lg); padding:30px; max-width:360px; width:100%;
    box-shadow:var(--shadow-lg); position:relative;
  }
  .install-modal h3{font-size:1.1rem; color:var(--marine); margin-bottom:16px; font-family:'Poppins',sans-serif; font-weight:700;}
  .install-modal .close-modal{position:absolute; top:14px; right:16px; font-size:1.3rem; color:var(--grey); line-height:1;}
  .install-steps{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:16px;}
  .install-steps li{display:flex; align-items:center; gap:14px; font-size:0.9rem; color:var(--marine);}
  .install-steps .step-num{
    width:28px; height:28px; border-radius:50%; background:var(--marine-soft); color:var(--gold-dark);
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.85rem; flex-shrink:0;
  }
  .install-steps svg{width:20px; height:20px; flex-shrink:0; color:var(--gold);}

  /* ---------- Why us : bulles flottantes ---------- */
  #pourquoi{padding:96px 0; background:#fff;}
  #pourquoi .kicker{color:var(--gold-dark);}
  #pourquoi .section-head h2{color:var(--marine);}
  #pourquoi .section-head p{color:var(--grey);}

  /* ---------- Devis ---------- */
  #devis{padding:96px 0; background:#fff;}
  .order-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:30px; align-items:start;}
  @media (max-width:900px){.order-grid{grid-template-columns:1fr;}}
  .cart-panel, .form-panel{background:var(--creme); border-radius:var(--radius-lg); padding:30px; border:1px solid rgba(58,46,26,0.08);}
  .cart-panel h3, .form-panel h3{margin-bottom:18px; font-size:1.15rem; color:var(--marine); text-transform:none; font-family:'Poppins',sans-serif; font-weight:700;}
  .cart-empty{color:var(--grey); font-size:0.92rem;}
  .cart-line{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid rgba(58,46,26,0.08);}
  .cart-line-name{font-weight:700; font-size:0.92rem;}
  .cart-line-meta{color:var(--grey); font-size:0.8rem;}
  .cart-line-remove{color:var(--gold-dark); font-size:0.78rem; font-weight:700;}
  .cart-line-actions{display:flex; align-items:center; gap:12px; flex-shrink:0;} /* − / + et « Retirer » sur chaque ligne du devis */
  @media (max-width:520px){ .cart-line{flex-wrap:wrap;} .cart-line > div:first-child{flex:1 1 100%;} .cart-line-actions{margin-inline-start:auto;} } /* téléphone : − / + sous le nom du produit */
  .cart-total{display:flex; justify-content:space-between; align-items:center; padding-top:16px; font-size:1.05rem; font-weight:700;}
  .cart-total .val{color:var(--gold-dark); font-family:'Anton',sans-serif; font-weight:400;} /* Anton n'existe qu'en 400 : évite le faux gras */
  .cart-note{font-size:0.76rem; color:var(--grey); margin-top:10px;}

  .field{margin-bottom:15px;}
  .field label{display:block; font-weight:700; font-size:0.82rem; margin-bottom:6px; color:var(--marine);}
  .field input, .field textarea, .field select{
    width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid rgba(58,46,26,0.15);
    background:#fff; color:var(--marine); font-family:'Poppins',sans-serif; font-size:0.9rem;
  }
  .field input:focus, .field textarea:focus, .field select:focus{border-color:var(--gold); outline:none;}
  .field textarea{resize:vertical; min-height:74px;}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  @media (max-width:520px){.form-row{grid-template-columns:1fr;}}
  .submit-note{font-size:0.78rem; color:var(--grey); margin-top:10px;}
  .order-confirm{display:none; margin-top:16px; background:#E7F4EC; border:1px solid #2E7D4F; padding:14px 16px; border-radius:12px; font-size:0.86rem; color:#1E5C38;}

  /* ---------- Contact ---------- */
  #contact{padding:96px 0 110px; background:var(--creme);}
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
  @media (max-width:820px){.contact-grid{grid-template-columns:1fr;}}
  .info-card{background:#fff; border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow);}
  .info-row{display:flex; gap:16px; align-items:flex-start; margin-bottom:22px;}
  .info-row:last-child{margin-bottom:0;}
  .info-icon{width:44px; height:44px; border-radius:12px; background:var(--marine-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .info-icon svg{width:22px; height:22px;}
  .info-row h4{font-family:'Poppins',sans-serif; font-weight:700; font-size:0.98rem; margin-bottom:3px; text-transform:none;}
  .info-row p{margin:0; color:var(--grey); font-size:0.88rem;}
  .social-row{display:flex; gap:12px; margin-top:24px;}
  .social-row a{width:42px; height:42px; border-radius:50%; background:var(--marine); color:#fff; display:flex; align-items:center; justify-content:center; transition:background 0.2s ease;}
  .social-row a:hover{background:var(--gold); color:var(--marine);}
  .social-row svg{width:18px; height:18px;}
  .map-card{
    border-radius:var(--radius-lg); background:var(--marine-soft);
    color:#fff; min-height:320px; position:relative; overflow:hidden;
    border:1px solid rgba(58,46,26,0.10);
  }
  .map-card iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}
  .map-open{
    position:absolute; z-index:3; left:14px; right:14px; bottom:14px;
    display:flex; align-items:center; gap:12px;
    background:rgba(58,46,26,0.94); color:#fff;
    padding:12px 15px; border-radius:14px;
    box-shadow:0 8px 22px rgba(58,46,26,0.28);
    transition:background 0.2s ease, transform 0.2s ease;
  }
  .map-open:hover{background:var(--gold-dark); color:#fff; transform:translateY(-2px);}
  .map-open svg{flex:0 0 auto; width:22px; height:22px;}
  .map-card h4{font-family:'Anton',sans-serif; font-size:1.05rem; margin:0 0 2px; color:#fff;}
  .map-card p{margin:0; opacity:0.9; font-size:0.8rem; color:#fff;}

  /* ---------- Footer ---------- */
  footer{background:var(--marine); color:#B8A696; padding:44px 0 26px;}
  .footer-grid{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; padding-bottom:26px; border-bottom:1px solid rgba(255,255,255,0.1);}
  .footer-logo{display:flex; align-items:center; gap:10px; color:#fff; font-family:'Anton',sans-serif; font-size:1.2rem;}
  .footer-logo img{height:34px;}
  .footer-links{display:flex; gap:22px; flex-wrap:wrap;}
  .footer-links a{font-size:0.88rem; font-weight:600;}
  .footer-links a:hover{color:#fff;}
  .footer-bottom{padding-top:20px; font-size:0.78rem; display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap; text-align:center;}
  .footer-legal a{color:inherit; opacity:0.85;}
  .footer-legal a:hover{opacity:1;}
  .footer-social{display:flex; gap:10px;}
  .footer-social a{width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.10); color:#fff; display:flex; align-items:center; justify-content:center; transition:background 0.2s ease;}
  .footer-social a:hover{background:var(--gold); color:var(--marine);}
  .footer-social svg{width:17px; height:17px;}

  /* ---------- Language toggle ---------- */
  .lang-toggle{
    display:flex; align-items:center; background:var(--marine-soft); border-radius:100px; padding:3px; gap:2px; margin-inline-start:6px;
  }
  .lang-btn{
    padding:7px 13px; border-radius:100px; font-weight:700; font-size:0.78rem; color:var(--grey); transition:all 0.18s ease;
  }
  .lang-btn.active{background:var(--marine); color:#fff;}

  /* ---------- RTL adjustments ---------- */
  html[dir="rtl"] body{font-family:'Cairo', 'Karla', sans-serif;}
  html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .display{font-family:'Cairo', 'Poppins', sans-serif;}
  html[dir="rtl"] h1.hero-title{font-family:'Cairo', 'Anton', sans-serif; text-transform:none;}
  html[dir="rtl"] .cart-fab{right:auto; left:26px;}
  html[dir="rtl"] .install-fab{left:auto; right:26px;}
  html[dir="rtl"] .moq-tag{left:auto; right:12px;}
  html[dir="rtl"] .stock-badge{right:auto; left:12px;}
  html[dir="rtl"] .cat-badge{right:auto; left:12px;}
  html[dir="rtl"] .install-modal .close-modal{right:auto; left:16px;}
  html[dir="rtl"] .hero::before{right:auto; left:-160px;}
  html[dir="rtl"] .hero::after{left:auto; right:-140px;}
  html[dir="rtl"] .eyebrow .dot{order:2;}

  /* ================= Mamie Académie — bandeau compact ================= */
  @font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/caveat.woff2') format('woff2');
    font-display: swap;
}
  .nav-mini-section{padding:10px 0 40px;}
  .nav-mini-card{
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    background:var(--marine-soft); border-radius:18px; padding:16px 24px; max-width:720px; margin:0 auto;
  }
  .nav-mini-left{display:flex; align-items:center; gap:12px;}
  .nav-mini-logo{height:32px;}
  .nav-mini-title{
    font-family:'Caveat','Segoe Script',cursive,Georgia,serif; font-weight:700; font-size:28px;
    color:#8a5a34; margin:0; letter-spacing:0.5px; line-height:1;
  }
  a.nav-mini-title{text-decoration:none;}
  a.nav-mini-title:hover{text-decoration:underline; text-underline-offset:4px;}
  .nav-mini-links{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px;}
  .nav-mini-btn{
    font-size:0.84rem; font-weight:700; padding:9px 20px; border-radius:100px; background:#fff; color:var(--marine);
    border:1px solid rgba(58,46,26,0.12); transition:background 0.18s ease, transform 0.18s ease;
  }
  .nav-mini-btn:hover{background:var(--gold); color:var(--marine); transform:translateY(-1px);}
  html[dir="rtl"] .nav-mini-title{font-family:'Caveat','Cairo',cursive;}
  @media (max-width:480px){
    .nav-mini-card{padding:14px 18px; justify-content:center; text-align:center;}
    .nav-mini-left{justify-content:center;}
    .nav-mini-btn{padding:8px 15px;}
  }

/* Académie (accueil) : titre et bouton d'entrée, puis quatre cartes blanches (icône, titre, une ligne sur le contenu) */
.acad-tete{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;}
.acad-tete h2{margin:0; font-size:1.3rem; line-height:1.2; color:var(--marine);}
.acad-tete p{margin:2px 0 0; font-size:.85rem; line-height:1.35; color:#6B5E4E;}
.acad-tout{flex:none; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 18px; border-radius:100px; background:var(--gold); color:var(--marine); font-weight:700; font-size:.85rem; text-decoration:none; white-space:nowrap; transition:background .18s ease, color .18s ease;}
.acad-tout:hover{background:var(--gold-dark); color:#fff;}
.acad-grille{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.acad-carte{display:flex; flex-direction:column; gap:4px; background:#fff; border:1px solid rgba(58,46,26,.10); border-radius:16px; padding:14px; text-decoration:none; color:var(--marine); box-shadow:0 2px 10px rgba(58,46,26,.06); transition:transform .18s ease, border-color .18s ease;}
.acad-carte:hover{transform:translateY(-2px); border-color:var(--gold);}
.acad-pastille{width:42px; height:42px; border-radius:50%; background:var(--marine-soft); display:grid; place-items:center; font-size:1.3rem; line-height:1; margin-bottom:6px;}
.acad-carte b{font-size:1rem;}
.acad-desc{font-size:.8rem; line-height:1.35; color:#5A4A33;}
@media (min-width:700px){ .acad-grille{grid-template-columns:repeat(4,1fr);} }
@media (max-width:480px){ .acad-tete{flex-direction:column; align-items:flex-start;} }

/* Accueil raccourci : garanties en une ligne, catalogue compact sur mobile, contact en boutons */
.trust-bar.trust-compact{padding:14px 0;}
/* « Distribué par SLCM » fondu dans le même bloc blanc que les garanties (plus de filet ni de bande isolée) */
.trust-bar.trust-compact{border-bottom:0;}
.trust-bar + .partner-strip{border-top:0; padding:2px 0 18px;}
.trust-mini{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; text-align:center; max-width:720px; margin:0 auto;}
.trust-mini > div{display:flex; flex-direction:column; align-items:center; gap:4px; font-size:.78rem; font-weight:700; color:var(--marine); line-height:1.25;}
.trust-mini svg{width:26px; height:26px;}
.trust-lien{text-align:center; font-size:.85rem; margin:10px 0 0;}
.trust-lien a{color:var(--gold-dark); font-weight:700;}
.contact-rapide{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0 4px;}
.contact-rapide a{display:flex; flex-direction:column; align-items:center; gap:4px; background:#fff; border:1px solid rgba(58,46,26,.12); border-radius:12px; padding:10px 4px; font-size:.8rem; font-weight:700; color:var(--marine); text-decoration:none;}
.contact-rapide a.wa{border-color:#25D366; color:#0F7A3D;}
.contact-grid{grid-template-columns:1fr !important; max-width:560px; margin:0 auto;}
@media (max-width:700px){
  /* Téléphone : marge haute et logo réduits pour que « Voir le catalogue » et « Demander un devis » soient visibles sans défiler */
  .hero{padding:28px 0 56px;}
  .hero-grid{gap:20px;}
  .eyebrow{margin-bottom:16px;}
  .hero h1{margin-bottom:14px;}
  .hero p.lead{margin-bottom:22px;}
  .hero-badge-wrap{width:100%; margin:0 auto 6px;}
  .hero-anim-frame{width:112px;}
  .menu-grid{grid-template-columns:1fr 1fr !important; gap:10px !important;}
  .card{border-radius:14px;}
  .card-top{height:auto !important; aspect-ratio:1/1; min-height:0 !important;}
  .moq-tag,.stock-badge{font-size:.58rem !important; padding:3px 8px !important;}
  .stock-badge{font-size:.64rem !important;}
  .cat-badge{display:none !important;}
  .card-body{padding:10px !important; gap:6px !important;}
  .card-title{font-size:.86rem !important; line-height:1.25;}
  .card-desc,.tip-toggle,.tip-bubble{display:none !important;}
  .card-footer{flex-direction:column; align-items:flex-start !important; gap:6px !important;}
  .price{font-size:1.05rem !important;}
  .add-btn{padding:9px !important; font-size:.76rem !important;}
}

/* Cartes produits alignées : même hauteur par rangée, prix et boutons au même niveau */
.menu-grid{align-items:stretch;}
.card{display:flex; flex-direction:column;}
.card-body{flex:1; display:flex; flex-direction:column;}
.card-footer{margin-top:auto !important;}
@media (max-width:700px){
  .card-title{min-height:2.5em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .card-footer{flex-direction:row !important; align-items:center !important; justify-content:space-between; flex-wrap:wrap;}
  .price{font-size:1rem !important;}
  .price sub{display:block; font-size:.6rem !important;}
}

/* Performance : les sections sous le haut de page ne sont mises en page qu'à l'approche du défilement.
   Gain surtout en arabe, où la mise en forme du texte de toute la page retardait le premier affichage (LCP).
   La hauteur réelle est mémorisée après le premier rendu (auto) : pas de saut de défilement au retour. */
#catalogue, #devis, #a-propos, #contact, #academie-nav, body > footer{content-visibility:auto; contain-intrinsic-size:auto 900px;}

/* ---------- Lot UX 1 : visuel neutre, section « Bientôt de retour », installation discrète ---------- */
.placeholder-visual{opacity:1;}
.placeholder-visual svg{width:56px; height:56px; color:var(--gold-dark); opacity:.55;}
.menu-grid .bientot{grid-column:1/-1; margin-top:8px; border-top:1px solid rgba(58,46,26,.12); padding-top:18px;}
.bientot summary{cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--marine); font-size:1rem; padding:8px 18px; border:1.5px solid rgba(58,46,26,.25); border-radius:100px; background:#fff;}
.bientot summary::-webkit-details-marker{display:none;}
.bientot summary::after{content:'▾'; font-size:.8rem; transition:transform .2s ease;}
.bientot[open] summary::after{transform:rotate(180deg);}
.bientot summary span{color:var(--grey); font-weight:600;}
.bientot-intro{margin:14px 0 16px; color:var(--grey); font-size:.9rem;}
.bientot-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:16px;}
.card.compact .card-top{height:150px; min-height:0;}
.card.compact .card-body{padding:14px 16px 16px;}
.card.compact .card-title{font-size:.95rem; margin-bottom:10px;}
.add-btn.prevenir{display:block; text-align:center; text-decoration:none; background:#fff; color:var(--marine); border:1.5px solid var(--marine); padding:9px; font-size:.82rem;}
.add-btn.prevenir:hover{background:var(--marine); color:#fff;}
.card.compact.ouvert{grid-column:1/-1;}
.card.compact [hidden]{display:none;}
.attente{display:grid; gap:8px; margin-top:10px;}
.attente input{width:100%; padding:10px 12px; border:1.5px solid rgba(58,46,26,.25); border-radius:10px; font:inherit; font-size:.9rem; background:#fff;}
.attente .add-btn{padding:10px;}
.attente-wa{text-align:center; font-size:.8rem; color:var(--grey);}
.attente-ok{margin:0; padding:10px; border-radius:10px; background:#E6F2EA; color:#1E5E38; font-size:.85rem; font-weight:600; text-align:center;}
.install-fab.install-pied{position:static; box-shadow:none; background:none; color:inherit; padding:0; font-size:.78rem; font-weight:600; opacity:.85; text-decoration:underline; gap:4px; z-index:auto;}
.install-fab.install-pied:hover{transform:none; background:none; opacity:1;}
.install-fab.install-pied svg{width:14px; height:14px;}
@media (max-width:700px){
  .bientot-grid{grid-template-columns:1fr 1fr; gap:10px;}
  .card.compact .card-top{height:auto; aspect-ratio:4/3;}
}