/* SoussGrill — identité lumineuse 2026
   Blanc généreux, encre profonde et accents feu issus du logo. */
:root{
  --noir:#191815;
  --nuit:#fff8f2;
  --papier:#fffaf6;
  --creme:#191815;
  --texte:#36332e;
  --doux:#756f67;
  --or:#f3a51f;
  --or-clair:#ffbe3f;
  --orange:#f15a24;
  --filet:rgba(58,45,34,.12);
  --blanc:#ffffff;
  --sable:#fff7ee;
  --ombre:0 24px 70px rgba(80,45,20,.10);
}

html{background:#fff}
body{
  background:#fff;
  color:var(--texte);
  letter-spacing:.005em;
}

body::before{
  content:'';
  position:fixed;
  inset:0 0 auto 0;
  height:520px;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 12% 5%,rgba(255,190,63,.14),transparent 31%),
    radial-gradient(circle at 88% 12%,rgba(241,90,36,.09),transparent 29%);
}

::selection{background:rgba(241,90,36,.18);color:var(--noir)}
:focus-visible{outline-color:var(--orange)}

/* Navigation claire et aérienne */
header.nav,header.barre{
  background:rgba(255,255,255,.90);
  border-bottom:1px solid rgba(58,45,34,.09);
  box-shadow:0 8px 30px rgba(52,31,15,.05);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.nav .wrap,.barre .wrap{height:88px}
.nav img,.barre img{height:66px}
.nav nav{gap:30px;font-size:12.5px;font-weight:500;letter-spacing:.08em}
.nav nav a{color:#5d5750}
.nav nav a:hover,.nav nav a.actif{color:var(--orange)}
.nav nav a::after{background:linear-gradient(90deg,var(--orange),var(--or));height:2px}
.nav .tel,.retour{
  border:0;
  background:var(--noir);
  color:#fff;
  box-shadow:0 10px 25px rgba(25,24,21,.16);
  font-weight:500;
}
.nav .tel:hover,.retour:hover{background:var(--orange);color:#fff}
.burger{color:var(--noir)}

/* Hero */
.une{
  border:0;
  padding:38px 0 68px;
  background:transparent;
}
.une .grille{
  min-height:min(720px,calc(100svh - 126px));
  grid-template-columns:.92fr 1.08fr;
  gap:34px;
  align-items:center;
}
.une .mot{align-items:flex-start;text-align:left;padding:66px 34px 66px 4px}
.une .folio.centre{justify-content:flex-start}
.une h1{font-size:clamp(44px,5.6vw,76px);color:var(--noir);letter-spacing:-.035em}
.une h1 em{color:var(--orange)}
.une .chapo{color:#5c5650;margin:26px 0 0;max-width:500px;font-size:19px;line-height:1.65}
.une .bienvenue{justify-content:flex-start;margin:26px 0 0;max-width:500px;color:#a14b25;border-color:rgba(241,90,36,.18)}
.une .bienvenue .arabe{color:var(--orange)}
.une .actions{justify-content:flex-start;margin-top:34px}
.une .img{border-radius:30px;box-shadow:var(--ombre);isolation:isolate}
.une .img img{min-height:560px;max-height:700px;border-radius:30px}
.une .img::after{
  background:linear-gradient(180deg,transparent 54%,rgba(20,15,10,.24));
  border-radius:30px;
}

.btn{min-height:52px;padding:0 28px;font-weight:500;border-radius:14px}
.b1{background:linear-gradient(135deg,var(--orange),#ff7a24);color:#fff;box-shadow:0 12px 28px rgba(241,90,36,.22)}
.b1:hover{background:linear-gradient(135deg,#df4718,var(--orange));color:#fff;box-shadow:0 16px 34px rgba(241,90,36,.28)}
.b2{border:1px solid rgba(25,24,21,.16);color:var(--noir);background:#fff}
.b2:hover{border-color:var(--orange);color:var(--orange);background:#fff}

/* Bande de confiance */
.chiffres{background:transparent;border:0;padding:0 0 58px}
.chiffres .grille{
  overflow:hidden;
  border:1px solid rgba(241,90,36,.11);
  border-radius:22px;
  background:linear-gradient(110deg,#fff9f3,#fff);
  box-shadow:0 16px 50px rgba(80,45,20,.06);
}
.chiffres div{padding:28px 22px;border-color:rgba(58,45,34,.09)}
.chiffres b{color:var(--orange);font-size:clamp(26px,3vw,38px)}
.chiffres span{color:#6f675f;font-weight:500}

/* Sections et titres */
section.art{padding:100px 0;border:0;background:#fff}
section.art.pap,section.art.news{background:var(--sable)}
.titre{margin-bottom:58px}
.titre h2{color:var(--noir);letter-spacing:-.025em}
.titre h2 em{color:var(--orange)}
.titre p{color:var(--doux);font-size:16.5px}
.folio{color:var(--orange);font-weight:600}
.folio::after,.folio.centre::before,.folio.centre::after{background:rgba(241,90,36,.20)}

.article{gap:72px;align-items:center}
.article .corps p{color:#504b45}
.article .corps p.ouvre::first-letter{color:var(--orange)}
.article .cote{position:relative;top:auto}
.article .cote img{border-radius:24px;box-shadow:var(--ombre)}
.article .cote .legende{border-color:rgba(241,90,36,.25);color:var(--doux)}
.exergue{border:0;border-radius:18px;background:linear-gradient(135deg,#fff5ea,#fffaf6);box-shadow:inset 4px 0 0 var(--orange)}
.exergue p{color:var(--noir)}
.exergue .ar{color:#9b4928}

.trois{gap:18px;border:0}
.trois article{
  border:1px solid var(--filet)!important;
  border-radius:18px;
  padding:34px;
  background:#fff;
  box-shadow:0 14px 45px rgba(69,42,22,.05);
}
.trois .n{color:var(--orange)}
.trois h3{color:var(--noir)}
.trois p{color:var(--doux)}

/* Plats */
.defile{padding:22px 0}
.defile::before{background:linear-gradient(90deg,#fff 12%,transparent)}
.defile::after{background:linear-gradient(270deg,#fff 12%,transparent)}
.rangee{gap:24px;padding:20px 0}
.assiette{
  width:238px;
  padding:18px 14px 20px;
  border:1px solid rgba(58,45,34,.08);
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 34px rgba(74,45,24,.07);
}
.assiette img{filter:drop-shadow(0 14px 14px rgba(77,48,27,.15))}
.assiette:hover img{filter:drop-shadow(0 20px 20px rgba(77,48,27,.22))}
.assiette .rub{color:var(--orange);font-weight:600}
.assiette b{color:var(--noir)}
.fl,.fleche{
  background:#fff;
  border-color:rgba(25,24,21,.13);
  color:var(--noir);
  box-shadow:0 10px 28px rgba(52,31,15,.12);
}
.fl:hover,.fl:focus-visible,.fleche:hover:not(:disabled){background:var(--orange);border-color:var(--orange);color:#fff}

/* Adresses, galerie, réseaux */
.duo{gap:24px;border:0}
.lieu{
  padding:18px 18px 28px!important;
  border:1px solid var(--filet)!important;
  border-radius:24px;
  background:#fff;
  box-shadow:0 18px 50px rgba(70,42,20,.07);
}
.lieu img{border-radius:16px;margin-bottom:26px}
.lieu h3,.lieu dd,.lieu dd a{color:var(--noir)}
.lieu h3,.lieu dl,.lieu .liens{margin-left:10px;margin-right:10px}
.lieu dt{color:var(--orange)}
.lieu .ouvert{color:#2c8d58;font-weight:500}
.mosaique{gap:16px}
.mosaique a{overflow:hidden;border-radius:18px;box-shadow:0 12px 30px rgba(64,40,22,.09)}
.reseaux{gap:14px}
.reseaux a{border-color:var(--filet);border-radius:18px;color:var(--noir);background:#fff;box-shadow:0 10px 32px rgba(65,40,20,.04)}
.reseaux a:hover{border-color:rgba(241,90,36,.4);color:var(--orange);box-shadow:0 18px 38px rgba(84,45,16,.09)}
.reseaux span{color:var(--doux)}

/* Newsletter et mentions */
.news .boite{padding:54px;border-radius:28px;background:#fff;box-shadow:var(--ombre)}
.news input[type=email]{background:#fff;color:var(--noir);border-color:rgba(25,24,21,.15)}
.news input[type=email]:focus{background:#fff;border-color:var(--orange)}
.news .consent{color:var(--doux)}
.legal details{border-color:var(--filet)}
.legal summary{color:var(--noir)}
.legal summary::after,.legal .txt h4{color:var(--orange)}
.legal .txt{color:var(--doux)}
footer{background:#201d19;border:0;color:#bdb5ac}
footer .pied h4{color:#ffb13b}
footer .pied ul,footer .pied a{color:#c9c2b9}
footer .pied a:hover{color:#fff}
footer .mentions{color:#8f877e;border-color:rgba(255,255,255,.10)}

/* Page carte */
.barre+.chapeau{background:transparent}
.chapeau{padding-top:64px}
.chapeau h1{color:var(--noir);letter-spacing:-.025em}
.chapeau h1 em{color:var(--orange)}
.chapeau p{color:var(--doux)}
.sommaire button{background:#fff;border-color:rgba(25,24,21,.13);color:#605a54;font-weight:500}
.sommaire button:hover{border-color:var(--orange);color:var(--orange)}
.sommaire button[aria-current="true"]{background:var(--orange);border-color:var(--orange);color:#fff}
.livre{filter:drop-shadow(0 30px 48px rgba(69,42,22,.20))}
.livre .demi,.tourne .face{background:#f2ece6}
.livre .vide{background:linear-gradient(135deg,#fffaf5,#f6eee6)}
.livre .vide::after{background-image:url(images/logo-couleur.png);opacity:.08}
.livre .vide::before{border-color:rgba(241,90,36,.14)}
.jauge{background:rgba(241,90,36,.14)}
.jauge i{background:linear-gradient(90deg,var(--orange),var(--or))}
.compteur,.indice{color:var(--doux)}
.compteur b,.indice em{color:var(--orange)}
.visio{background:rgba(23,20,17,.96)}
.visio .fermer,.visio .compte{background:#fff;color:var(--noir);border-color:rgba(255,255,255,.2)}

@media (max-width:940px){
  .nav nav{top:88px;background:rgba(255,255,255,.98);box-shadow:0 18px 35px rgba(50,30,15,.10)}
  .nav nav a{border-color:var(--filet)}
  .une{padding:0 0 46px}
  .une .grille{gap:0}
  .une .mot{align-items:center;text-align:center;padding:42px 8px 20px}
  .une .folio.centre,.une .actions,.une .bienvenue{justify-content:center}
  .une .chapo,.une .bienvenue{margin-left:auto;margin-right:auto}
  .une .img{order:1;border-radius:0 0 26px 26px;margin:0 -26px}
  .une .img img{min-height:52vh;max-height:620px;border-radius:0 0 26px 26px}
  .une .img::after{background:linear-gradient(180deg,transparent 62%,rgba(20,15,10,.24));border-radius:0 0 26px 26px}
  .une .mot{order:2}
  .article{gap:42px}
  .trois{gap:14px}
  .duo{gap:18px}
  .lieu{padding:16px 16px 26px!important}
}

@media (max-width:620px){
  .wrap{padding-left:20px;padding-right:20px}
  .nav .wrap,.barre .wrap{height:76px}
  .nav img,.barre img{height:55px}
  .nav nav{top:76px}
  .une h1{font-size:clamp(40px,13vw,56px)}
  .une .img{margin:0 -20px}
  .une .actions{width:100%}
  .une .actions .btn{flex:1;padding:0 18px}
  .chiffres .grille{border-radius:18px}
  .chiffres div{padding:24px 10px}
  section.art{padding:72px 0}
  .news .boite{padding:38px 20px}
  .assiette{width:188px}
  .assiette img{width:154px;height:154px}
  .mosaique a{border-radius:13px}
  .retour{padding:0 16px;font-size:13px}
}

@media (prefers-reduced-motion:no-preference){
  .une .img{animation:entree-image .75s var(--e) both}
  .une .mot{animation:entree-texte .7s .08s var(--e) both}
  @keyframes entree-image{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
  @keyframes entree-texte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}