/* =========================================================
   Sim's Pizza — Soulac-sur-Mer
   Palette héritée du print (ardoise / rouge / crème),
   mise en page pensée pour l'écran.
   ========================================================= */

:root{
  --ardoise:      #4c545c;
  --ardoise-fonce:#343a41;   /* gris des aplats : tétière, cartouches, folio */
  --creme:        #faf8f3;
  --blanc:        #ffffff;
  --rouge:        #d81f2a;
  --rouge-fonce:  #a8161f;
  --encre:        #1e2226;
  --gris:         #6d757d;
  --gris-clair:   #aeb5bc;
  --trait:        #e4e0d7;

  --rayon:  10px;
  --rayon-s: 6px;
  --wrap:  1120px;
  --ombre: 0 4px 14px rgba(30,34,38,.05), 0 18px 44px rgba(30,34,38,.08);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:"Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.55;
  color:var(--encre);
  background:var(--creme);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:24px;
}

.skip{ position:absolute; left:-9999px; background:var(--rouge); color:#fff; padding:12px 18px; z-index:99; }
.skip:focus{ left:12px; top:12px; }

:focus-visible{ outline:3px solid var(--rouge); outline-offset:3px; }

/* ---------- éléments partagés ---------- */
.eyebrow{
  margin:0 0 6px;
  font-size:.74rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--rouge);
}
.eyebrow--clair{ color:#ff9ba1; }
/* Dans le hero, sur la photo du four : rouge plutôt que rose.
   On prend --rouge-fonce : sur ce fond clair et chaud, il contraste
   nettement mieux (3,9:1 contre 2,6:1 pour --rouge, 1,0:1 pour le rose). */
.hero .eyebrow{ color:var(--rouge-fonce); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 26px;
  border-radius:50px;
  font-weight:700;
  font-size:clamp(.88rem, 3.4vw, 1rem);
  white-space:nowrap;
  text-decoration:none;
  border:2px solid transparent;
  transition:background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.btn i{ font-size:1.25em; }
.btn:hover{ transform:translateY(-2px); }

.btn--rouge{ background:var(--rouge); color:#fff; border-color:var(--rouge); }
.btn--rouge:hover{ background:var(--rouge-fonce); border-color:var(--rouge-fonce); }

.btn--clair{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn--clair:hover{ background:rgba(255,255,255,.14); border-color:#fff; }

.btn--sombre{ background:transparent; color:var(--encre); border-color:var(--encre); }
.btn--sombre:hover{ background:var(--encre); color:#fff; }

/* =========================================================
   ENTÊTE — identité avant le hero
   ========================================================= */
.entete{
  position:relative;
  z-index:10;        /* la tétière garde la main sur les clics (tél, drapeaux) */
  background:var(--ardoise-fonce);
  color:#fff;
  border-bottom:3px solid var(--rouge);
}
.entete__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding-block:18px;
}

.marque{
  display:flex;
  align-items:center;
  gap:16px;
  text-decoration:none;
  min-width:0;
  flex:0 1 auto;      /* ne s'étire pas : sinon le lien déborde sur les drapeaux */
  align-self:center;  /* et ne s'étale pas sur toute la largeur en mode colonne */
}
.marque__logo{
  width:76px; height:76px;
  flex:0 0 auto;
}
.marque__txt{ display:flex; flex-direction:column; min-width:0; }
.marque__nom{
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.1;
  color:#fff;
}
.marque__tag{
  font-family:"Pinyon Script", cursive;
  font-size:1.35rem;
  line-height:1.25;
  color:#fff;
}

.entete__contact{
  display:flex;
  align-items:center;
  gap:28px;
  min-width:0;
}

.tel{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-size:clamp(1.15rem, 4.6vw, 1.55rem);
  font-weight:800;
  line-height:1.1;
  white-space:nowrap;
  transition:color .18s ease;
}
.tel{ color:#fff; }
.tel i{ font-size:.85em; color:var(--rouge); }
.tel:hover{ color:#ff9ba1; }

.infos{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  font-size:.88rem;
  color:var(--gris-clair);
}
.infos li{ display:flex; align-items:center; gap:7px; }
.infos i{ font-size:1.05rem; color:var(--rouge); flex:0 0 auto; }
.infos b{ color:#fff; font-weight:700; }

/* =========================================================
   HERO
   ========================================================= */
/* La photo est le FOND du hero (background-image), pas un enfant flex :
   un enfant absolu d'un conteneur flex se fait d'abord dimensionner par
   align-items avant que les offsets soient résolus -> il ne couvrait pas
   toute la hauteur, laissant apparaître une bande du fond gris. */
.hero{
  position:relative;
  min-height:clamp(440px, 62vh, 620px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background-color:var(--ardoise-fonce);
  background-image:url(../images/hero.jpg);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
.hero__texte{
  position:relative;
  z-index:1;        /* au-dessus du fond photo */
  padding-block:0 clamp(44px, 6vw, 72px);
  color:#fff;
  max-width:var(--wrap);
}
.hero h1{
  margin:0 0 14px;
  font-size:clamp(2.1rem, 5.4vw, 3.6rem);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.hero__sous{
  margin:0 0 28px;
  font-size:clamp(1rem, 1.5vw, 1.12rem);
  color:#dde1e5;
  text-wrap:balance;
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* La baseline tient sur une ligne dès qu'il y a la place */
@media (min-width: 760px){
  .hero__sous{ white-space:nowrap; }
}

/* =========================================================
   ATOUTS — trois visuels
   ========================================================= */
.atouts{
  background:var(--creme);
  padding-block:clamp(56px, 8vw, 92px);
}
.atouts__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
}
.atout{ margin:0; }
.atout__vis{
  margin:0 0 20px;
  overflow:hidden;
  border-radius:var(--rayon);
  box-shadow:var(--ombre);
}
.atout__vis img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .5s ease;
}
.atout:hover .atout__vis img{ transform:scale(1.04); }
.atout h2{
  margin:0 0 6px;
  font-size:1.18rem;
  font-weight:800;
  letter-spacing:-.005em;
}
.atout p{
  margin:0;
  color:var(--gris);
  font-size:.96rem;
}

/* =========================================================
   CARTE
   ========================================================= */
.carte{
  background:var(--blanc);
  padding-block:clamp(56px, 8vw, 96px);
  border-block:1px solid var(--trait);
}

/* Cartouche de section : photo à gauche, titre sur aplat gris à droite */
.cartouche{
  display:grid;
  grid-template-columns:minmax(0, 42%) 1fr;
  align-items:stretch;
  margin-bottom:34px;
  border-radius:var(--rayon);
  overflow:hidden;
  background:var(--ardoise-fonce);
  box-shadow:var(--ombre);
}
.cartouche--seconde{ margin-top:64px; }

.cartouche__vis{ margin:0; position:relative; min-height:170px; }
.cartouche__vis img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}
/* dégradé de raccord vers l'aplat gris */
.cartouche__vis::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to right, rgba(52,58,65,0) 55%, var(--ardoise-fonce) 100%);
}

.cartouche__txt{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:26px clamp(24px, 4vw, 44px);
  color:#fff;
}
.cartouche__titre{
  margin:0;
  font-family:"Pinyon Script", cursive;
  font-weight:400;
  font-size:clamp(2.4rem, 5vw, 3.4rem);
  line-height:1;
  color:#fff;
}

.pizzas{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0 48px;
}
.pizzas li{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:16px 0;
  border-bottom:1px solid var(--trait);
}
.pizza__txt{ flex:1 1 auto; min-width:0; }
.pizzas h3{
  margin:0 0 3px;
  font-size:1.06rem;
  font-weight:800;
}
.pizzas p{
  margin:0;
  font-size:.9rem;
  color:var(--gris);
  line-height:1.45;
}
.prix{
  flex:0 0 auto;
  font-size:1.15rem;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.carte__note{
  margin:34px 0 0;
  font-size:.82rem;
  color:var(--gris);
  letter-spacing:.02em;
}

/* =========================================================
   SIGNATURE — Tartuffo (le morceau de bravoure)
   ========================================================= */
.signature{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--ardoise-fonce);
  color:#fff;
}
.signature__vis{ margin:0; position:relative; min-height:420px; }
.signature__vis img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.signature__txt{
  padding:clamp(44px, 6vw, 84px) clamp(24px, 5vw, 72px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}
.signature h2{
  margin:0 0 24px;
  font-family:"Pinyon Script", cursive;
  font-weight:400;
  font-size:clamp(2.6rem, 5vw, 3.8rem);
  line-height:1;
}

/* Horaires */
.horaires{
  list-style:none;
  margin:0 0 28px;
  padding:0;
  width:100%;
  max-width:340px;
}
.horaires li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.horaires li:first-child{ border-top:1px solid rgba(255,255,255,.14); }
.horaires__jour{
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--gris-clair);
}
.horaires__h{
  font-size:1.18rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* Téléphone en très gros */
.tel-geant{
  display:inline-flex;
  align-items:center;
  gap:16px;
  text-decoration:none;
  color:#fff;
  font-size:clamp(1.5rem, 7vw, 3.1rem);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.1;
  white-space:nowrap;
  transition:color .2s ease;
}
.tel-geant i{
  font-size:.62em;
  color:var(--rouge);
  transition:transform .2s ease;
}
.tel-geant:hover{ color:#ff9ba1; }
.tel-geant:hover i{ transform:rotate(-12deg) scale(1.06); }

/* =========================================================
   VENIR
   ========================================================= */
.venir{
  background:var(--creme);
  padding-block:clamp(56px, 8vw, 92px);
}
.venir__inner{ text-align:center; }
.venir h2{
  margin:0 0 26px;
  font-size:clamp(1.5rem, 3.6vw, 2.05rem);
  font-weight:800;
  letter-spacing:-.015em;
  text-wrap:balance;
}

/* =========================================================
   PIED
   ========================================================= */
.pied{ background:var(--ardoise-fonce); }
.pied__inner{
  padding-block:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  text-align:center;
}
.pied img{ width:66px; height:66px; }
.pied__mentions{
  margin:0;
  font-size:.8rem;
  line-height:1.7;
  color:#9aa3ab;
}
.pied__mentions a{ color:#fff; text-decoration:none; font-weight:600; white-space:nowrap; }
.pied__mentions a:hover{ text-decoration:underline; }

/* =========================================================
   BARRE D'APPEL MOBILE
   ========================================================= */
.appel-mobile{
  position:fixed;
  left:12px; right:12px; bottom:12px;
  z-index:50;
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px;
  background:var(--rouge);
  color:#fff;
  font-weight:800;
  font-size:clamp(.9rem, 3.8vw, 1.02rem);
  white-space:nowrap;
  text-decoration:none;
  border-radius:50px;
  box-shadow:0 8px 26px rgba(0,0,0,.3);
  transform:translateY(140%);
  transition:transform .3s ease;
}
.appel-mobile i{ font-size:1.3rem; }
.appel-mobile.is-visible{ transform:translateY(0); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1000px){
  .entete__contact{ flex-direction:column; align-items:flex-end; gap:6px; }
  .infos{ align-items:flex-end; }
  .atouts__grid{ gap:22px; }
}

@media (max-width: 880px){
  .entete__inner{ flex-direction:column; align-items:center; gap:16px; text-align:center; }
  .entete__contact{ align-items:center; }
  .infos{ align-items:center; }
  .marque{ flex-direction:column; text-align:center; gap:8px; align-self:center; }
  .marque__logo{ width:104px; height:104px; }

  .pizzas{ grid-template-columns:1fr; gap:0; }

  .cartouche{ grid-template-columns:1fr; }
  /* On garde position:relative : sans lui, le ::after (absolute) perd son
     ancêtre de référence et s'étire sur toute la page. */
  .cartouche__vis{ position:relative; min-height:0; aspect-ratio:16/7; }
  .cartouche__vis::after{
    background:linear-gradient(to bottom, rgba(52,58,65,0) 55%, var(--ardoise-fonce) 100%);
  }
  .cartouche__txt{ padding:20px 24px 26px; text-align:center; align-items:center; }

  .signature{ grid-template-columns:1fr; }
  .signature__vis{ min-height:0; aspect-ratio:4/3; }
  .signature__vis img{ position:static; height:100%; }
  .signature__txt{ align-items:center; text-align:center; }
  .horaires{ max-width:100%; }
}

@media (max-width: 660px){
  .atouts__grid{ grid-template-columns:1fr; gap:34px; }
  .atout__vis img{ aspect-ratio:16/10; }

  .hero{ background-position:center center; }
  .hero__actions .btn{ width:100%; }

  .tel{
    padding:12px 22px;
    background:var(--rouge);
    color:#fff;
    border-radius:50px;
  }
  .tel i{ color:#fff; }
  .tel:hover{ color:#fff; background:var(--rouge-fonce); }

  .appel-mobile{ display:flex; }
  .pied__inner{ padding-bottom:92px; }
}

/* Très petits écrans : on resserre le bouton pour que le numéro tienne */
@media (max-width: 380px){
  .btn{ padding:15px 16px; gap:8px; }
  .appel-mobile{ padding:15px 12px; gap:8px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}

/* =========================================================
   SÉLECTEUR DE LANGUE (tétière)
   ========================================================= */
.langues{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  flex:0 0 auto;      /* ne rétrécit jamais */
  position:relative;
  z-index:2;          /* garde la main sur les clics */
}
.langues a{
  position:relative;
  display:block;
  width:22px; height:15px;
  border-radius:2px;
  opacity:.45;
  transition:opacity .18s ease, transform .18s ease;
  box-shadow:0 0 0 1px rgba(255,255,255,.25);
}
/* cible de clic élargie (confort tactile) sans changer le visuel */
.langues a::after{
  content:"";
  position:absolute;
  inset:-4px -8px;   /* < gap/2 vertical : les cibles ne se chevauchent pas */
}
.langues a:hover{ opacity:1; transform:scale(1.12); }
.langues a[aria-current="true"]{
  opacity:1;
  box-shadow:0 0 0 2px var(--rouge);
}
.langues svg{ display:block; width:100%; height:100%; border-radius:2px; }

/* Sur mobile, la tétière passe en colonne : les drapeaux repassent en ligne */
@media (max-width:880px){
  .langues{
    order:3;
    flex-direction:row;
    margin-left:0;
    gap:10px;
  }
}