/* @FONT-FACE */
@font-face {
  font-family: 'Sign Panthers 2 Sans';
  src: url('../_fonts/sign_panthers.eot');
  src: url('../_fonts/sign_panthers.eot?#iefix') format('embedded-opentype'),
       url('../_fonts/sign_panthers.woff2') format('woff2'),
       url('../_fonts/sign_panthers.woff') format('woff'),
       url('../_fonts/sign_panthers.ttf')  format('truetype'),
       url('../_fonts/sign_panthers.svg#svgFontName') format('svg');
}
@font-face {
  font-family: 'Sign Panthers 2 Script';
  src: url('../_fonts/sign_panthers_script.eot');
  src: url('../_fonts/sign_panthers_script.eot?#iefix') format('embedded-opentype'),
       url('../_fonts/sign_panthers_script.woff2') format('woff2'),
       url('../_fonts/sign_panthers_script.woff') format('woff'),
       url('../_fonts/sign_panthers_script.ttf')  format('truetype'),
       url('../_fonts/sign_panthers_script.svg#svgFontName') format('svg');
}

.figtree { font-family: "Figtree", sans-serif; font-optical-sizing: auto; font-style: normal; }
.figtree_bold { font-family: "Figtree", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 800; }

/* COULEURS */
.red { color:#FC4236; }
.yellow { color:#FFE74C; }
.white { color:#FFFFFF; }
.green { color:#9BC53D; }

/* VARIABLES / BLOCS */
.chalk {
  max-width: 1280px;
  width:90%;
  margin: 24px auto;
  border-radius: 32px;
  padding: 24px 40px 48px;
  background: url(../_img/bck.jpg);
}

/* Dot blink */
.dot { height: 8px; width: 8px; margin-right:3px; display: inline-block; border-radius: 20px; background-color: #9BC53D; outline: 3px rgba(155,197,61,0.4) solid; animation: blink 1s linear infinite; }
@keyframes blink { 0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;} }

/* STRUCTURE GLOBALE */
*, *::before, *::after { box-sizing: border-box; }
html { background:#FFF; background-repeat: repeat; max-width:100%; overflow-x:hidden; }
body {
  color:#000; font-family:'Sign Panthers 2 Sans', Helvetica, Arial, sans-serif; font-weight:bold;
  font-style:normal; font-size:16px; line-height:1.5; margin:0 auto; -webkit-font-smoothing:antialiased;
  max-width:100%; overflow-x:hidden;
}
header { margin:32px 32px; padding:132px 64px 64px; border-radius:24px; }
section { max-width:1280px; margin:0px auto; border-radius:32px; padding:24px 0 36px; text-align:center; }

/* MENU */
.menu_open{
  font-size:20px; color:#000; cursor:pointer; padding:6px 8px; border-radius:100px; background:#fff;
  position:absolute; top:32px; right:32px; width:50px; height:50px; text-align:center; border:0; display:none;}
.overlay {
  height:0%; width:100%; position:fixed; inset:0; z-index:200; top:0; left:0;
  background-color:rgba(0,0,0,0.9); overflow-x:hidden; transition:0.5s; scrollbar-width:none; -ms-overflow-style:none;
}
.overlay-content { position:absolute; z-index:9999; top:25%; width:100%; text-align:center; margin-top:30px; }
.overlay-content .spacer { display:block; height:32px; }
.overlay a, .overlay a.small { padding:8px; text-decoration:none; color:#FFF; display:block; }
.overlay a { font-size:24px; }
.overlay a.small { font-size:16px; }
a.closebtn{
  position:absolute; top:64px; right:64px; width:50px; height:50px; padding-top:10px; font-size:20px; font-weight:100;
  color:#000; cursor:pointer; border-radius:100px; background:#fff; text-align:center;
}

@media screen and (max-height:450px){
  .overlay a { font-size:20px; }
  .overlay .closebtn { font-size:40px; top:15px; right:35px; }
}

.logo { position:fixed; left:50%; top:0; margin-left:-85px; z-index:9999; }
.review {padding:0 300px; }


/* ====== HERO VIDEO ====== */
:root{
  --hero-min-h: clamp(60vh, 70vh, 80vh);
  --hero-pad: clamp(16px, 4vw, 48px);
  --hero-max-w: 1100px;
  --hero-max-h: 700px;
  --overlay: rgba(0,0,0,.50);
  --text: #ffffff;
  --cta-bg: #3031E4;
  --cta-bg-hover: #1f20b8;
  --cta-text: #ffffff;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}
.hero, .hero * { box-sizing: border-box; }
.hero{
  position:relative; min-height:var(--hero-min-h); display:grid; place-items:center;
  padding: calc(var(--hero-pad) + env(safe-area-inset-top)) var(--hero-pad) calc(var(--hero-pad) + env(safe-area-inset-bottom));
  color:var(--text); isolation:isolate; overflow:clip;
}
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:-2; filter:saturate(1.05) contrast(1.05); }
.hero__overlay{ position:absolute; inset:0; background:linear-gradient(0deg, var(--overlay), var(--overlay)); z-index:-1; }
.hero__content{ margin-top:48px; max-width:var(--hero-max-w); display:grid; }
.hero__title, .hero__subtitle{ font-size:120px; text-align:center; font-weight:100; margin:0 0 24px 0; line-height:.9; }
.hero__subtitle{ font-family:'Sign Panthers 2 Script', Helvetica, Arial, sans-serif; text-transform:none; }

/* TEXTE DÉFILANT */
.animated-text-strip{ display:flex; flex-flow:row nowrap; align-items:center; overflow:hidden; position:relative; z-index:1; width:100%; }
.animated-text-strip .marquee{ white-space:nowrap; animation:marquee 30s linear infinite; max-width:none; }
@keyframes marquee { 0%{transform:translate(0,0);} 100%{transform:translate(-100%,0);} }
.animated-text-strip{ width:100%; border-top:3px dotted #FC4236; border-bottom:3px dotted #FC4236; padding:8px 0; }
.marquee{ font-family:'Sign Panthers 2 Sans', Helvetica, Arial, sans-serif; font-size:24px; font-weight:100; text-transform:uppercase; color:#FC4236; }

/* ====== PIZZAS (GRILLE) ====== */
.pizzas_container{
  max-width:1280px;
  margin:0 auto;
}

/* Base mobile (ex: 375px) → 2 colonnes, sans débordement */
.pizzas{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:16px;
}

/* Tablette ≥ 768px → 2 colonnes */
@media (min-width:768px){
  .pizzas{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:18px;
  }
}

/* Desktop ≥ 1280px → 3 colonnes */
@media (min-width:1280px){
  .pizzas{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:20px;
  }
}

/* Cartes */
.pizza{
  min-width:0; /* crucial: permet au contenu de rétrécir dans la grille */
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  /*background:#000000;*/
  border-radius:14px;
  overflow-wrap:anywhere;
  word-break: normal;;
}
.pizza img{ width:100%; margin-bottom:16px; height:auto; display:block; }

/* TITRAGES / TEXTE */
.hero__clients{ position:relative; width:100%; top:72px; }
.hero__clients span{ display:block; text-transform:uppercase; text-align:center; font-size:32px; font-weight:100; }
span.clients{ display:flex; padding:8px; }
.slogan{ width:400px; }
h1, h2, h3, h4, h5, h6{ font-family:'Sign Panthers 2 Sans', Helvetica, Arial, sans-serif; font-weight:normal; text-transform:uppercase; margin:0; }
h1{ text-align:center; font-size:64px; margin:32px 0; }
.title{ font-family:'Sign Panthers 2 Sans', Helvetica, Arial, sans-serif; font-weight:normal; }
.subtitle{ font-family:'Sign Panthers 2 Script', Helvetica, Arial, sans-serif; font-weight:normal; text-transform:none; }
h2{ text-align:center; font-size:72px; line-height:.8; margin:40px 0; }
h3{ text-align:center; font-size:48px; line-height:.8; margin:0; }
h4{ margin:8px 0 6px; font-size:32px; line-height:.8; }

p{ margin:auto; text-align:center; font-weight:500; }
a{ color:#000; }

/* Divers */
.big_number{ font-family:'Sign Panthers 2 Sans', Helvetica, Arial, sans-serif; font-size:120px; font-weight:normal; text-transform:uppercase; margin:0; padding:0; }
.price {line-height: 0.8;font-family:'Sign Panthers 2 Sans'; font-weight: 100; font-size: 24px;}
.prices {display:flex;}
strong{ font-family:'Sign Panthers 2 Sans'; font-weight:bold; }
footer{ width:100%; margin:0 0 32px 0; }
ul li{ font-size:16px; list-style:none; }

a.primary-cta{
  background-color:#FFE74C; border:none; color:#000; padding:16px 24px; text-align:center; text-decoration:none;
  display:inline-block; font-size:16px; margin:16px auto; border-radius:60px; width:fit-content;
}
a.secondary-cta{
  background-color:#000; border:none; color:#fff; padding:16px 24px; text-align:center; text-decoration:none;
  display:inline-block; font-size:16px; margin:16px auto; border-radius:60px; width:fit-content;
}

/* Images & vidéos fluides partout (anti-overflow) */
img, video{ max-width:100%; height:auto; display:block; background:transparent; margin:auto;}


/* SOCIAL */
/* === SOCIAL ICONS === */
.social{
  /* enlève les puces et le padding par défaut du ul */
  list-style: none;
  padding: 0;
  margin: 24px 0;

  /* aligne les 3 icônes sur une seule ligne et centrées */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;              /* espace régulier entre icônes */
}

.social li{
  list-style: none;       /* ceinture et bretelles */
}

.social a{
  display: flex;          /* centre parfaitement l'icône dans le lien */
  align-items: center;
  justify-content: center;
  line-height: 0;         /* évite tout décalage vertical */
}

.social img{
  width: 32px;            /* taille uniforme */
  height: 32px;           /* force un carré (utile si SVGs différents) */
  display: block;         /* supprime l’espace baseline des images inline */
}

/* un peu plus grand sur desktop si tu veux */
@media (min-width: 1025px){
  .social img{
    width: 36px;
    height: 36px;
  }
}

/* FAQ */
.collapsible{
  background-color:#000; color:#fff; cursor:pointer; padding:18px 18px 18px 24px; width:100%; border:none;
  text-align:left; outline:none; font-size:16px; font-weight:700; margin-bottom:8px; border-radius:100px;
}
.active, .collapsible:hover{ background-color:#FC4236; color:#FFF; }
.content{ padding:0 18px; max-height:0; overflow:hidden; transition:max-height .2s ease-out; }
.content p{ text-align:left; padding:16px 0 16px 8px; display:block; }
.content ul{ text-align:left; padding:8px 0 16px 8px; display:block; }
.content ul li {color: #FFFFFF;list-style: disc; font-weight: 500;}

/* CALCULATEUR */
.tdp-calculator { --bg:#000000; --card:#000000; --muted:#FFFFFF; --text:#FFFFFF; --accent:#FFFFFF; --ring:#FFFFFF; --sep:#545454; --danger:#FC4236; --danger-bg:#FC4236; font-family: Figtree, system-ui, -apple-system, Segoe UI, Roboto, Inter, ui-sans-serif; color:var(--text); }
.tdp-calculator .tdp-card{/*padding:clamp(16px,2.5vw,28px);*/max-width:960px;margin:0px auto;box-shadow:0 10px 30px rgba(0,0,0,.25);}
.tdp-calculator h2{margin:0 0 12px;font-size:clamp(20px,3.2vw,30px);}
.tdp-calculator .tdp-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:10px;}
@media (min-width:431px){.tdp-calculator .tdp-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:768px){.tdp-calculator .tdp-grid{grid-template-columns:repeat(3,1fr);} }
.tdp-calculator .tdp-field{/*background:#000;*/border-radius:16px;padding:12px;}
.tdp-calculator .tdp-label{font-weight:700;font-size:15px;}
.tdp-calculator .tdp-field em{color:var(--muted);font-weight:500;}
.tdp-calculator .tdp-note{grid-column:1/-1;color:var(--muted);font-size:14px; margin-bottom: 24px;}
.tdp-calculator .tdp-stepper{display:flex;align-items:center;gap:8px;}
.tdp-calculator .tdp-stepper input{width:100%;text-align:center;padding:12px;border-radius:8px;border:none;/*border:1px solid var(--sep)*/;background:#FFFFFF;color:var(--card);font-size:16px;-moz-appearance:textfield;}
.tdp-calculator .tdp-stepper input::-webkit-outer-spin-button,
.tdp-calculator .tdp-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.tdp-calculator .tdp-btn{width:50px;height:38px;border-radius:100px;border:none;/*1px solid var(--sep);*/background:#000000;color:var(--text);font-size:22px;cursor:pointer;touch-action: manipulation;}
.tdp-calculator .tdp-btn:hover{outline:1px solid var(--accent);touch-action: manipulation;}
.tdp-calculator .tdp-warning{background:var(--danger-bg);color:#FFFFFF;border-radius:16px;padding:12px;margin-top:12px;text-align:center;font-weight:bold;}
.tdp-calculator .tdp-breakdown{margin-top:18px;width:100%;}
.tdp-calculator .tdp-breakdown h3{margin:0 0 10px;color:#FFF;font-size:24px;font-weight:100;}
.tdp-calculator .tdp-breakdown ul{list-style:none;padding:0;margin:0;border-radius:8px;overflow:hidden;}
.tdp-calculator .tdp-breakdown li{display:flex;justify-content:space-between;padding:12px 16px;background:#FFF; border-radius: 0px; /*margin-bottom:4px;border-bottom:1px solid var(--sep);*/; font-family: 'Courier New', Courier, monospace; color:#000; }
.tdp-calculator .tdp-breakdown li.tdp-sep{background:#FFFFFF;font-weight:bold;}
.tdp-calculator .tdp-breakdown li.tdp-total{background:#FFFFFF;font-size:16px;font-weight:bold; font-family: 'Courier New', Courier, monospace; color:#000;}
.tdp-calculator .tdp-breakdown li.tdp-deposit{background:#FFFFFF;font-weight:bold;/*border-top:2px solid var(--ring);*/}
.tdp-calculator .tdp-percap{display:flex;justify-content:space-between;color:var(--muted);padding:8px 4px;font-size:16px;font-weight:normal;}
.tdp-calculator .tdp-footer{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px;}
.tdp-calculator .tdp-reset{background:var(--card);border:none;color:var(--text);border-radius:100px;padding:16px 24px;cursor:pointer;font-weight:bold;}
.tdp-calculator .tdp-reset:hover{outline:1px solid var(--accent);}
.tdp-calculator .tdp-legal{color:var(--muted);font-size:16px;text-align:center;margin:16px 0;}


/* CARROUSEL PHOTOS */
.carousel-container {
      position: relative;
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      overflow: hidden;
      padding: 24px 0;
    }

    /* === PISTE (1 ligne, défilement horizontal) === */
    .carousel-track {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 280px;     /* largeur d’une tuile (modifie ici si besoin) */
      gap: 16px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-behavior: smooth;
      padding: 0 56px;              /* place pour les flèches */
      list-style: none;
      margin: 0;
      scrollbar-width: none;        /* Firefox */
      -webkit-overflow-scrolling: touch;
      user-select: none;
      cursor: grab;
    }
    .carousel-track::-webkit-scrollbar { display: none; }
    .carousel-track.dragging {
      cursor: grabbing;
      scroll-behavior: auto;
    }

    /* === TUILES (ratio 3:4, coins arrondis) === */
    .carousel-item {
      border-radius: 16px;
      overflow: hidden;
      background: #f4f4f4;
      /* Ratio 3:4 => largeur:hauteur = 3:4 (portrait) */
      aspect-ratio: 3 / 4;
      /* Important : la hauteur découle du ratio et de grid-auto-columns */
      /* Pas besoin de fixer une hauteur explicite */
    }

    .carousel-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      pointer-events: none;
      -webkit-user-drag: none;
    }

    /* === FLÈCHES === */
    .carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,1);
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      display: grid;
      place-items: center;
      font-size: 16px;
      line-height: 1;
      cursor: pointer;
      z-index: 10;
      transition: background .2s ease;
    }
    .carousel-btn:hover { background: rgba(0,0,0,1); }
    .carousel-btn.left  { left: 8px; }
    .carousel-btn.right { right: 8px; }

    /* === RESPONSIVE (même ratio partout, tailles adaptées si souhaité) === */
    @media (max-width: 1024px) {
      .carousel-track { grid-auto-columns: 240px; }
    }
    @media (max-width: 430px) {
      .carousel-track { grid-auto-columns: 220px; }
      .carousel-btn { width: 50px; height: 50px; font-size: 16px; }
    }




/* --- MOBILE --- */
@media screen and (max-width:430px){
  header{ padding-top:10px; margin:16px; }
  h1{ font-size:40px; line-height:0.8; }
  h2{ font-size:48px; line-height:1; margin:24px 0; padding:0 8px; }
  h3 { font-size: 40px; }
  h4{ margin:8px 0 6px; font-size:40px; }
  footer{ width:100%; }
  a.primary-cta{ margin:32px auto; }
  a[href^=tel]{ color:#000; }
  .slogan{ max-width:296px; }
  section{ width:90%; padding:24px 0 0; }
  .hero {padding: 32px 0 32px;}
  .logo { width:120px; margin-left:-60px; }
  .menu_open{ position:absolute; top:16px; right:16px; }
  .overlay .closebtn{ position:absolute; top:32px; right:32px; }
  .hero__title, .hero__subtitle{ font-size:48px; margin:0 0 16px 0; }
  .chalk{ width:100%; padding-left:16px; padding-right:16px; padding-bottom:56px; border-radius: 0;}
  .marquee{font-size:20px;}
  .pizza {padding: 0 8px 16px; word-break: normal;}
  .review {padding:0; }

}

/* --- TABLET <= 1024px --- */
@media screen and (max-width:1024px){
  header{ padding-top:10px; margin:16px; }
  h1{ font-size:40px; line-height:0.8; }
  h2{ font-size:48px; line-height:1; margin:24px 0; padding:0 8px;  }
  h3 { font-size: 40px; }
  h4{ margin:8px 0 6px; font-size:24px; }
  footer{ width:100%; }
  a.primary-cta{ margin:auto; }
  a[href^=tel]{ color:#000; }
  .slogan{ max-width:300px; }
  section{ width:90%; padding:32px 0 32px; }
  .hero {padding: 32px 0 32px;}
  section.pizzas{ width:100%; }
  .logos-clients{ width:40%; }
  .logo { width:120px; margin-left:-60px; }
  .menu_open{ position:fixed; top:32px; right:32px; }
  .overlay .closebtn{ position:absolute; top:32px; right:32px; }
  .hero__title, .hero__subtitle{ font-size:72px; margin:0 0 16px 0; }
  .chalk{ width:100%; padding-left:16px; padding-right:16px; padding-bottom:56px; border-radius: 0;}
  .pizza {padding: 0 8px 16px; word-break: normal;}
  .review {padding:0; }
}