/*
Theme Name: Au Tour Du Vrac
Theme URI: https://autourduvrac.fr/
Description: Theme sur mesure pour Au Tour Du Vrac, epicerie bio et vrac a Tours. Palette chaude et coloree (creme, terracotta, vert feuille, ocre, framboise), formes arrondies, accents manuscrits inspires des ardoises de prix.
Author: Au Tour Du Vrac
Template: royal-elementor-kit
Version: 3.4
Text Domain: atdv
*/

:root{
  /* 60 % — fonds chauds */
  --creme:#FDF8EE;
  --creme-2:#F7EDDC;
  --sable:#F0E2CA;

  /* 25 % — ancre terracotta */
  --terre:#C9673B;
  --terre-f:#A24E2B;

  /* 15 % — contrepoints colores */
  --feuille:#5C8F52;
  --feuille-f:#3F6B39;
  --ocre:#E3A130;
  --framboise:#C2455E;
  --prune:#7A4B63;

  --encre:#39291D;
  --encre-2:#6B5745;
  --max:1200px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body.atdv{
  background:var(--creme);
  color:var(--encre);
  font-family:"Karla",system-ui,sans-serif;
  font-size:17.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

.atdv h1,.atdv h2,.atdv h3{
  font-family:"Fraunces",Georgia,serif;
  font-weight:600;line-height:1.02;letter-spacing:-.018em;
  font-variation-settings:"SOFT" 40,"WONK" 1;
}
.atdv a{color:inherit;text-decoration:none}
.atdv img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}

/* mot manuscrit : rappelle les ardoises de la boutique */
.manu{
  font-family:"Caveat",cursive;font-weight:600;
  font-size:1.5em;line-height:1;color:var(--terre);
  display:inline-block;transform:rotate(-3deg);
}

/* ---------- pastilles ---------- */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:8px 16px;border-radius:999px;
  background:var(--feuille);color:#fff;
}
.pill.terre{background:var(--terre)}
.pill.ocre{background:var(--ocre);color:#3A2708}
.pill.framboise{background:var(--framboise)}
.pill.clair{background:rgba(201,103,59,.13);color:var(--terre-f)}

/* ---------- bandeau ---------- */
.topbar{background:var(--feuille-f);color:#EAF2E7;font-size:14.5px}
.topbar .wrap{display:flex;gap:10px 26px;align-items:center;justify-content:center;flex-wrap:wrap;padding:11px 28px}
.topbar .h{color:#fff}
.topbar .h em{font-style:normal;color:#B9D1B3;margin-right:7px;font-size:13px}
.topbar .tel{color:#fff;font-weight:600}
.topbar .sep{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.3)}

.etat{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  letter-spacing:.06em;padding:6px 14px;border-radius:999px;
  background:var(--ocre);color:#3A2708;white-space:nowrap;
}
.etat.ferme{background:rgba(255,255,255,.16);color:#D5E3D1}
.etat i{width:7px;height:7px;border-radius:50%;background:#3A2708;flex:none;animation:bat 2.4s infinite}
.etat.ferme i{background:#9FB89A;animation:none}
@keyframes bat{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:80;
  background:rgba(253,248,238,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(57,41,29,.1);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:13px}
.brand img{width:50px;height:50px;border-radius:50%;border:2px solid var(--terre)}
.brand .nom{font-family:"Fraunces",serif;font-size:21px;font-weight:600;line-height:1.1;display:block;color:var(--terre-f)}
.brand .base{font-size:12px;color:var(--encre-2);letter-spacing:.03em}
nav.principal{display:flex;gap:28px;align-items:center;font-size:16px;font-weight:500}
nav.principal a{position:relative;padding:4px 0}
nav.principal a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2.5px;border-radius:2px;
  background:var(--terre);transition:right .3s cubic-bezier(.22,1,.36,1);
}
nav.principal a:hover::after{right:0}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:15.5px;font-weight:700;
  background:var(--terre);color:#fff;padding:14px 26px;border-radius:999px;
  transition:transform .22s cubic-bezier(.22,1,.36,1),background .22s,box-shadow .22s;
  box-shadow:0 6px 16px rgba(201,103,59,.26);
}
.btn:hover{transform:translateY(-2px);background:var(--terre-f);box-shadow:0 10px 24px rgba(201,103,59,.34)}
.btn.vert{background:var(--feuille);box-shadow:0 6px 16px rgba(92,143,82,.26)}
.btn.vert:hover{background:var(--feuille-f)}
.btn.creux{background:transparent;color:var(--terre-f);box-shadow:inset 0 0 0 2px rgba(201,103,59,.4)}
.btn.creux:hover{background:rgba(201,103,59,.1);box-shadow:inset 0 0 0 2px var(--terre)}

/* ---------- hero ---------- */
.hero{position:relative;padding:76px 0 0;overflow:hidden}
.hero::before{
  content:"";position:absolute;right:-220px;top:-160px;width:660px;height:660px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(227,161,48,.3),rgba(227,161,48,0) 68%);
}
.hero::after{
  content:"";position:absolute;left:-200px;top:180px;width:540px;height:540px;border-radius:50%;
  background:radial-gradient(circle at 60% 40%,rgba(92,143,82,.24),rgba(92,143,82,0) 68%);
}
.hero .wrap{position:relative;z-index:2}
.hero-haut{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:end;margin-bottom:44px}
.hero h1{font-size:clamp(44px,7.4vw,96px);margin:22px 0 0}
.hero h1 .terre{color:var(--terre)}
.hero .accroche{font-size:19.5px;color:var(--encre-2);max-width:34ch;margin-bottom:26px}
.hero .actions{display:flex;gap:13px;flex-wrap:wrap}

.hero-photo{position:relative;margin-top:10px}
.hero-photo figure{position:relative;overflow:hidden;border-radius:26px;box-shadow:0 22px 50px rgba(57,41,29,.16)}
.hero-photo img{
  width:100%;height:clamp(320px,44vw,540px);object-fit:cover;
  transform:scale(1.03);transition:transform 1.4s cubic-bezier(.22,1,.36,1);
}
.hero-photo:hover img{transform:scale(1)}
.credit{
  position:absolute;right:14px;bottom:12px;z-index:3;font-size:11px;
  color:#fff;background:rgba(57,41,29,.6);padding:5px 11px;border-radius:999px;backdrop-filter:blur(4px);
}
.credit a{text-decoration:underline;text-underline-offset:2px}

/* chiffres colores */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.stats div{border-radius:20px;padding:24px 22px;text-align:left}
.stats div:nth-child(1){background:rgba(92,143,82,.16)}
.stats div:nth-child(2){background:rgba(227,161,48,.2)}
.stats div:nth-child(3){background:rgba(201,103,59,.16)}
.stats div:nth-child(4){background:rgba(194,69,94,.14)}
.stats b{display:block;font-family:"Fraunces",serif;font-size:clamp(32px,3.9vw,46px);line-height:1;margin-bottom:5px}
.stats div:nth-child(1) b{color:var(--feuille-f)}
.stats div:nth-child(2) b{color:#A9761A}
.stats div:nth-child(3) b{color:var(--terre-f)}
.stats div:nth-child(4) b{color:var(--framboise)}
.stats span{font-size:13.5px;color:var(--encre-2);font-weight:500}

/* ---------- sections ---------- */
.atdv section{padding:100px 0;position:relative}
.sec-sable{background:var(--creme-2)}
.sec-vert{background:var(--feuille-f);color:#EAF2E7}
.sec-vert h2,.sec-vert h3{color:#fff}
.sec-vert p{color:#CFE0CB}

.titre{margin-bottom:48px}
.titre h2{font-size:clamp(32px,4.8vw,58px);margin:16px 0 0}
.titre h2 .terre{color:var(--terre)}
.chapo{font-size:18.5px;color:var(--encre-2);max-width:58ch;margin-top:16px}

/* vague de separation */
.vague{display:block;width:100%;height:56px}

/* ---------- rayons : une couleur par rayon ---------- */
.rayons{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.rayon{
  border-radius:24px;padding:32px 26px 30px;background:#fff;
  border:1.5px solid rgba(57,41,29,.09);
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s;
}
.rayon:hover{transform:translateY(-7px);box-shadow:0 18px 40px rgba(57,41,29,.13)}
.rayon .rond{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  font-family:"Fraunces",serif;font-size:22px;font-weight:600;color:#fff;margin-bottom:20px;
}
.rayon:nth-child(1) .rond{background:var(--feuille)}
.rayon:nth-child(2) .rond{background:var(--ocre);color:#3A2708}
.rayon:nth-child(3) .rond{background:var(--terre)}
.rayon:nth-child(4) .rond{background:var(--prune)}
.rayon h3{font-size:21px;margin-bottom:10px}
.rayon p{font-size:15.5px;color:var(--encre-2)}

/* ---------- histoire ---------- */
.histoire .cols{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
.histoire figure{position:relative}
.histoire figure img{width:100%;aspect-ratio:3/4;max-height:540px;object-fit:cover;border-radius:24px}
.histoire figure::after{
  content:"";position:absolute;inset:14px -14px -14px 14px;border-radius:24px;
  border:2px dashed rgba(255,255,255,.3);z-index:-1;
}
.histoire p{margin-bottom:17px;max-width:56ch}
.cit{
  font-family:"Fraunces",serif;font-size:clamp(23px,2.8vw,33px);line-height:1.28;
  color:#fff;margin:30px 0;padding:24px 28px;border-radius:20px;
  background:rgba(255,255,255,.1);
}
.cit small{display:block;font-family:"Karla",sans-serif;font-size:14px;color:#B9D1B3;margin-top:14px;letter-spacing:.03em}

/* ---------- engagements ---------- */
.engage{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.eng{background:#fff;border-radius:24px;padding:32px 28px;border:1.5px solid rgba(57,41,29,.09)}
.eng .rond{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  font-family:"Fraunces",serif;font-weight:600;color:#fff;margin-bottom:18px;
}
.eng:nth-child(1) .rond{background:var(--terre)}
.eng:nth-child(2) .rond{background:var(--feuille)}
.eng:nth-child(3) .rond{background:var(--ocre);color:#3A2708}
.eng h3{font-size:21px;margin-bottom:11px}
.eng p{font-size:15.5px;color:var(--encre-2)}

/* ---------- FAQ ---------- */
.faq details{
  background:#fff;border:1.5px solid rgba(57,41,29,.09);border-radius:18px;
  padding:20px 24px;margin-bottom:12px;transition:border-color .25s;
}
.faq details[open]{border-color:rgba(201,103,59,.45)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;
  font-family:"Fraunces",serif;font-size:19.5px;font-weight:600;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--terre);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;
  transition:transform .3s;
}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details p{margin-top:13px;color:var(--encre-2);font-size:16.5px;max-width:70ch}

/* ---------- venir ---------- */
.venir .cols{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.venir figure img{width:100%;height:250px;object-fit:cover;border-radius:22px;margin-bottom:22px}
.adresse{font-family:"Fraunces",serif;font-size:clamp(27px,3.2vw,40px);line-height:1.08;margin-bottom:24px}
.horaires{background:#fff;border-radius:20px;padding:10px 24px;border:1.5px solid rgba(57,41,29,.09)}
.horaires .l{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid rgba(57,41,29,.08);font-size:16px}
.horaires .l:last-child{border-bottom:0}
.horaires .l.off{color:#A0907E}
.horaires .l b{font-weight:600;font-variant-numeric:tabular-nums}
.horaires .l.now{background:rgba(92,143,82,.14);margin:0 -14px;padding-left:14px;padding-right:14px;border-radius:12px}
.horaires .l.now b{color:var(--feuille-f)}
.carte{border-radius:22px;overflow:hidden;border:1.5px solid rgba(57,41,29,.12)}
.carte iframe{width:100%;height:420px;border:0;display:block}
.astuce{
  margin-top:24px;font-size:16px;color:var(--encre-2);
  background:rgba(227,161,48,.16);border-radius:18px;padding:18px 22px;
}

/* ---------- footer ---------- */
.atdv footer{background:var(--encre);color:#C9B9A6;padding:72px 0 32px;font-size:15.5px}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:50px;margin-bottom:44px}
.atdv footer h4{font-family:"Fraunces",serif;color:#fff;font-size:18px;margin-bottom:16px;font-weight:600}
.atdv footer a{display:block;padding:5px 0;color:#DACBB9;transition:color .2s}
.atdv footer a:hover{color:var(--ocre)}
.f-mot{font-family:"Caveat",cursive;font-size:32px;color:var(--ocre);line-height:1.2;max-width:18ch}
.f-bas{
  border-top:1px solid rgba(255,255,255,.12);padding-top:22px;font-size:13px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:#9B8A78;
}

/* ---------- apparitions ---------- */
@media (prefers-reduced-motion:no-preference){
  .rev{opacity:0;transform:translateY(24px);animation:rev .85s cubic-bezier(.22,1,.36,1) forwards}
  .d1{animation-delay:.05s}.d2{animation-delay:.14s}.d3{animation-delay:.23s}.d4{animation-delay:.32s}.d5{animation-delay:.41s}
  @keyframes rev{to{opacity:1;transform:none}}
}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .hero-haut{grid-template-columns:1fr;gap:24px;align-items:start}
  .histoire .cols,.venir .cols{grid-template-columns:1fr;gap:38px}
  .rayons{grid-template-columns:repeat(2,1fr)}
  .engage{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  nav.principal{display:none}
  .f-grid{grid-template-columns:1fr;gap:32px}
  .atdv section{padding:66px 0}
}
@media(max-width:600px){
  .wrap{padding:0 20px}
  .rayons,.stats{grid-template-columns:1fr}
  .hero{padding-top:44px}
}

/* ==================================================================
   Surcharge des styles globaux d'Elementor / du theme parent, qui
   imposent un fond blanc et une police au niveau de body.
   ================================================================== */
html body.atdv{
  background-color:var(--creme) !important;
  color:var(--encre) !important;
  font-family:"Karla",system-ui,sans-serif !important;
}
html body.atdv::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--creme)}
html body.atdv h1,
html body.atdv h2,
html body.atdv h3{font-family:"Fraunces",Georgia,serif !important;color:var(--encre)}
html body.atdv .hero{background:transparent !important}
html body.atdv .sec-sable{background-color:var(--creme-2) !important}
html body.atdv .sec-vert{background-color:var(--feuille-f) !important;color:#EAF2E7 !important}
html body.atdv .sec-vert h2,
html body.atdv .sec-vert h3{color:#fff !important}
html body.atdv .sec-vert p{color:#CFE0CB !important}
html body.atdv .hero h1 .terre,
html body.atdv .titre h2 .terre{color:var(--terre) !important}
html body.atdv .topbar{background-color:var(--feuille-f) !important}
html body.atdv footer{background-color:var(--encre) !important}
html body.atdv header.site{background-color:rgba(253,248,238,.94) !important}
html body.atdv .btn{color:#fff !important}
html body.atdv .btn.creux{color:var(--terre-f) !important}
html body.atdv .pill{color:#fff !important}
html body.atdv .pill.ocre{color:#3A2708 !important}
html body.atdv .pill.clair{color:var(--terre-f) !important}
html body.atdv .rayon,
html body.atdv .eng,
html body.atdv .horaires,
html body.atdv .faq details{background-color:#fff !important}
html body.atdv .manu{font-family:"Caveat",cursive !important;color:var(--terre) !important}
html body.atdv .f-mot{font-family:"Caveat",cursive !important;color:var(--ocre) !important}

/* Elementor imposait sa couleur de lien : le menu ressortait delave. */
html body.atdv nav.principal a{color:var(--encre) !important}
html body.atdv nav.principal a:hover{color:var(--terre-f) !important}
html body.atdv .brand .nom{color:var(--terre-f) !important}
html body.atdv .topbar .tel,
html body.atdv .topbar .h{color:#fff !important}
html body.atdv footer a{color:#DACBB9 !important}
html body.atdv footer a:hover{color:var(--ocre) !important}

/* ==================================================================
   HORAIRES ET CONTACT TOUJOURS VISIBLES
   L'information la plus recherchee sur le site d'un commerce, c'est
   "est-ce ouvert et comment vous joindre". Elle ne doit jamais
   disparaitre au defilement.
   ================================================================== */

/* Le bandeau horaires et l'en-tete defilent ensemble et restent colles. */
html body.atdv .sticky-haut{position:sticky;top:0;z-index:90}
html body.atdv header.site{position:static}

html body.atdv .topbar .jour b{font-weight:700;color:#fff}
html body.atdv .topbar .tel{display:inline-flex;align-items:center;gap:7px}
html body.atdv .topbar .tel:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- barre d'action fixe, mobile uniquement ---------- */
.barre-mobile{display:none}

@media(max-width:820px){
  /* Le bandeau se resserre : etat + horaires du jour + telephone. */
  html body.atdv .topbar .wrap{gap:8px 14px;padding:9px 16px}
  html body.atdv .topbar{font-size:13.5px}
  html body.atdv .topbar .semaine{display:none}
  html body.atdv .topbar .tel span{display:none}

  /* Barre d'action permanente en bas d'ecran. */
  html body.atdv .barre-mobile{
    display:flex;align-items:center;gap:9px;
    position:fixed;left:0;right:0;bottom:0;z-index:95;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(253,248,238,.97);backdrop-filter:blur(12px);
    border-top:1px solid rgba(57,41,29,.14);
    box-shadow:0 -6px 22px rgba(57,41,29,.1);
  }
  html body.atdv .barre-mobile .etat{flex:none;font-size:11.5px;padding:7px 11px}
  html body.atdv .barre-mobile .etat.ferme{background:rgba(57,41,29,.1);color:var(--encre-2)}
  html body.atdv .bm-btn{
    flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
    padding:12px 10px;border-radius:999px;font-weight:700;font-size:14.5px;
    background:var(--terre);color:#fff !important;
  }
  html body.atdv .bm-btn.vert{background:var(--feuille)}

  /* De la place pour que la barre ne masque pas le pied de page. */
  html body.atdv footer{padding-bottom:104px}
}

@media(max-width:420px){
  html body.atdv .topbar .jour em{display:none}
  html body.atdv .bm-btn{font-size:13.5px;padding:11px 8px}
}

/* Decalage sous la barre d'administration WordPress (visible seulement
   pour les utilisateurs connectes, jamais pour les visiteurs). */
html body.atdv.admin-bar .sticky-haut{top:32px}
@media(max-width:782px){
  html body.atdv.admin-bar .sticky-haut{top:46px}
}