/* =====================================================
   ENTREPRISE MARCEAU — CARRELEUR À TOULOUSE
   Feuille de style optimisée / dédupliquée
   ===================================================== */

:root{
  --bg:#f4eee4;
  --surface:#fbf7f0;
  --text:#241811;
  --muted:#3d2b1f;
  --line:rgba(36,24,17,.12);
  --accent:#8a644b;

  /* ---- SYSTÈME DE LARGEUR UNIQUE ----
     Une seule variable pilote la largeur de TOUTES les
     sections du site (calquée sur "Nos Services").
     Elle n'est appliquée qu'UNE seule fois par section,
     via .container, pour éviter tout double-rétrécissement. */
  --container-width: min(92%, 1440px);

  /* Cadre commun à toutes les sections "carte" */
  --radius: 28px;
  --card-padding: clamp(32px, 5vw, 64px);
  --section-padding: clamp(80px, 11vw, 150px);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; touch-action:manipulation; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Cormorant Garamond', serif;
  line-height:1.7;
  overflow-x:hidden;
  position:relative;
}

img{ max-width:100%; display:block; -webkit-user-drag:none; }
button{ touch-action:manipulation; }

h1,h2,h3{
  font-family:'Cormorant Garamond', serif;
  font-weight:300;
  letter-spacing:-0.02em;
  color:var(--text);
}

p{ color:var(--muted); }

a, a:visited, a:hover, a:active{
  color:var(--text);
  text-decoration:none;
}

/* =========================================
   LAYOUT — largeur et rythme des sections
   ========================================= */

.container{
  width:var(--container-width);
  margin:0 auto;
}

.section{
  padding:var(--section-padding) 0;
}

/* Bloc "carte" : encadrement identique pour toutes les
   sections qui en ont besoin (À propos, Réalisations,
   Avis, Process, Contact). */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--card-padding);
  box-shadow:0 25px 70px rgba(36,24,17,.08);
}

.section-head{
  margin-bottom:56px;
}

.section-head p{
  max-width:650px;
  margin-top:18px;
}

.eyebrow{
  display:inline-block;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.35em;
  text-transform:uppercase;
  color:var(--accent);
  position:relative;
  margin-bottom:28px;
}

.eyebrow::after{
  content:"";
  position:absolute;
  left:0; bottom:-12px;
  width:70px; height:2px;
  background:var(--accent);
  opacity:.5;
}

/* =========================================
   BOUTONS
   ========================================= */

.btn{
  display:inline-block;
  padding:16px 32px;
  border-radius:10px;
  border:1px solid var(--text);
  text-decoration:none;
  transition:.35s ease;
}

.btn:not(.btn-primary){
  background:transparent;
  color:var(--text);
}


.btn-primary{
  background:var(--text);
  color:#fff;
  border-color:var(--text);
}

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

a.btn-primary,
a.btn-primary:visited,
a.btn-primary:active {
  background:var(--text);
  color:#fff !important;
  border-color:var(--text);
}

a.btn-primary:hover {
  background:var(--accent);
  color:#fff !important;
  border-color:var(--accent);
}



.btn:hover{ transform:translateY(-2px); }


@media (hover:none){
  .btn:hover{ transform:none; }
}

/* =========================================
   NAVIGATION
   ========================================= */

.nav{
  position:fixed;
  top:0; left:0; right:0;
  width:100%;
  z-index:1000;
  background:rgba(244,238,228,.85);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}

.nav-inner{
  width:var(--container-width);
  margin:auto;
  height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo{
  font-size:1.9rem;
  letter-spacing:.04em;
  color:var(--text);
}

.nav-links{
  display:flex;
  gap:42px;
  font-size:.9rem;
  color:var(--muted);
}

.nav-links a{
  position:relative;
  color:inherit;
  transition:.4s ease;
}

.nav-links a::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:0%; height:1px;
  background:var(--text);
  transition:.4s ease;
}

.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::after{ width:100%; }

.burger{
  display:none;
  font-size:28px;
  background:none;
  border:none;
  color:var(--text);
  cursor:pointer;
}

@media (max-width:768px){
  .burger{ display:block; }
  .logo{ font-size:1.4rem; }

  .nav-links{
    display:none;
    position:absolute;
    top:92px; right:20px;
    flex-direction:column;
    gap:14px;
    background:var(--surface);
    padding:16px;
    border-radius:12px;
    border:1px solid var(--line);
  }

  .nav-links.active{ display:flex; }
}

/* =========================================
   HERO
   ========================================= */

.hero{
  position:relative;
  z-index:2;
  min-height:100vh;
  padding-top:140px;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:visible;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom, rgba(23,17,13,.20), rgba(23,17,13,.60), rgba(15,10,8,.92)),
    url('assets/carrelage/carrelage-travertin.webp');
  background-size:cover;
  background-position:center;
  filter:contrast(1.04) brightness(.88) saturate(.92);
  transform:scale(1.08);
  animation:heroZoom 14s ease forwards;
  z-index:-1;
}

@keyframes heroZoom{ to{ transform:scale(1); } }

.hero-content{
  width:var(--container-width);
  max-width:900px;
  margin:0 auto;
  position:relative;
  z-index:2;
  padding-bottom:60px;
  display:flex;
  flex-direction:column;
  gap:28px;
}

.hero .title,
.hero h2,
.hero .btn{
  color:#fff;
  border-color:rgba(255,255,255,.35);
  justify-content:center;
}

.hero .btn-primary{
  background:var(--text);
  color:#fff;
  border-color:var(--text);
}

.hero .btn-primary:hover{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

.hero .btn-primary:hover{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);

}
.hero .btn-primary:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }

.title{
  font-size:clamp(3.2rem, 8vw, 7.4rem);
  line-height:.95;
  max-width:1100px;
}

.hero h2{ font-weight:300; font-size:clamp(1.2rem,2.5vw,1.7rem); }

.hero-buttons{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  justify-content:center;
}

@media (max-width:768px){
  .hero-content{ text-align:center; align-items:center; }
  .title{ text-align:center; }
  .hero-buttons{ justify-content:center; width:100%; }
  .hero-buttons .btn{ flex:1 1 auto; font-size:13px; padding:14px; }
}

/* Statistiques flottantes du hero */
.manifesto-stats{
  width:min(920px, 92%);
  margin:60px auto 0;
  padding:32px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(12px);
  border-radius:18px;
  box-shadow:0 15px 45px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
  position:relative;
  z-index:2;
}

.stat{ text-align:center; }
.stat-value{ display:flex; justify-content:center; align-items:center; margin-bottom:12px; }

.counter{
  font-size:3.5rem;
  font-weight:700;
  line-height:1;
  color:#fff;
  letter-spacing:-2px;
  text-shadow:0 3px 8px rgba(0,0,0,.45);
}

.suffix{ font-size:1.25rem; font-weight:600; margin-left:5px; color:#fff; }

.stat-label{
  display:block;
  font-size:.85rem;
  line-height:1.4;
  color:rgba(255,255,255,.7);
  text-transform:uppercase;
  letter-spacing:1px;
}

@media (max-width:768px){
  .hero{ min-height:auto; padding-bottom:40px; }
  .manifesto-stats{ margin-top:30px; width:94%; padding:18px 8px; }
  .counter{ font-size:1.7rem; }
  .suffix{ font-size:.75rem; }
  .stat-label{ font-size:.55rem; }
  .stat{ padding:0 5px; }
}

/* =========================================
   À PROPOS (manifesto)
   ========================================= */

.manifesto-text{
  font-size:clamp(1.05rem, 1.8vw, 1.4rem);
  line-height:1.85;
  color:var(--muted);
  max-width:900px;
}

/* =========================================
   SERVICES — largeur de référence du site
   ========================================= */

.folder-tabs{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  position:relative;
  z-index:2;
}

.folder-tab{
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--muted);
  cursor:pointer;
  padding:16px 28px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  border-radius:16px 16px 0 0;
  border-bottom:none;
  transition:.35s ease;
}

.folder-tab:hover{ color:var(--text); transform:translateY(-3px); }

.folder-tab.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

.folder-container{
  position:relative;
  width:100%;
  min-height:620px;
  margin-top:-1px;
  overflow:hidden;
  border-radius:0 var(--radius) var(--radius) var(--radius);
  border:1px solid var(--line);
  box-shadow:0 20px 60px rgba(36,24,17,.10);
}

.folder-page{
  position:absolute;
  inset:0;
  display:flex;
  opacity:0;
  visibility:hidden;
  transform:translateX(40px);
  transition:opacity .45s ease, transform .45s ease;
}

.folder-page.active{ opacity:1; visibility:visible; transform:translateX(0); }

.folder-copy{
  flex:2;
  background:var(--surface);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:70px;
  text-align:center;
}

.folder-visual{ flex:1; height:100%; }
.folder-visual img{ width:100%; height:100%; object-fit:cover; }

.folder-label{
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:30px;
}

.folder-page h3{
  font-size:2rem;
  font-weight:300;
  text-transform:uppercase;
  margin-bottom:26px;
  line-height:1.2;
}

.folder-page p{ max-width:600px; line-height:1.8; color:var(--muted); }

@media (max-width:768px){

  .folder-tabs{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;   /* Alignement à gauche */
    gap:0;
    overflow:visible;
    margin-bottom:0;
  }

  .folder-tab{
    flex:0 0 auto;
    padding:12px 16px;
    font-size:.65rem;
    line-height:1.3;
    white-space:normal;

    /* Léger chevauchement horizontal */
    margin-right:-12px;

    /* Réduit l'espace entre les deux lignes */
    margin-bottom:2px;

    position:relative;
    z-index:1;
  }

  /* La deuxième ligne remonte légèrement sous la première */
  .folder-tab:nth-child(3),
  .folder-tab:nth-child(4){
    margin-top:-8px; /* Ajuste entre -6px et -10px selon le rendu souhaité */
  }

  .folder-tab:hover,
  .folder-tab.active{
    z-index:5;
  }

  .folder-container{
    min-height:0;
    height:auto;
    border-radius:0 20px 20px 20px;
  }

  .folder-page{
    position:relative;
    inset:auto;
    display:none;
    opacity:1;
    visibility:visible;
    transform:none;
    height:75vh;
  }

  .folder-page.active{
    display:flex;
  }

  .folder-copy{
    flex:0 0 62%;
    padding:24px 16px;
  }

  .folder-visual{
    flex:0 0 38%;
  }

  .folder-page h3{
    font-size:1.2rem;
    margin-bottom:16px;
  }

  .folder-page p{
    font-size:.85rem;
    line-height:1.55;
  }

  .folder-label{
    font-size:.55rem;
    margin-bottom:16px;
  }

}
/* =========================================
   RÉALISATIONS
   ========================================= */

.subtitle{ color:var(--muted); margin-top:14px; }

.gallery-wrapper{ position:relative; margin-top:40px; }

.gallery-track{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding:10px 0;
}

.gallery-track::-webkit-scrollbar{ display:none; }

.gallery-item{
  flex:0 0 calc(25% - 15px);
  aspect-ratio:4/5;
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  background:var(--bg);
}

.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery-item:hover img{ transform:scale(1.08); }

.gallery-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:56px; height:56px;
  border:none;
  border-radius:50%;
  background:rgba(36,24,17,.55);
  color:#fff;
  font-size:26px;
  cursor:pointer;
  z-index:10;
  backdrop-filter:blur(10px);
  transition:.25s ease;
}

.gallery-nav.prev{ left:-25px; }
.gallery-nav.next{ right:-25px; }
.gallery-nav:hover{ background:rgba(36,24,17,.75); }

@media (max-width:900px){ .gallery-item{ flex:0 0 calc(50% - 10px); } }

@media (max-width:768px){
  .gallery-track{ padding:0; gap:12px; }
  .gallery-item{ flex:0 0 85%; aspect-ratio:3/4.2; }
  .gallery-nav.prev{ left:8px; }
  .gallery-nav.next{ right:8px; }
}

/* Story viewer (visionneuse plein écran) */
#storyViewer{
  position:fixed; inset:0;
  background:rgba(20,14,10,.96);
  display:flex; justify-content:center; align-items:center;
  opacity:0; visibility:hidden;
  transition:.35s;
  z-index:999999;
}

#storyViewer.active{ opacity:1; visibility:visible; }

.story-container{
  width:min(450px, 95vw);
  height:min(90vh, 850px);
  background:#000;
  position:relative;
  overflow:hidden;
  border-radius:30px;
  box-shadow:0 25px 80px rgba(0,0,0,.6);
}

.story-container img{ width:100%; height:100%; object-fit:cover; }

.story-progress{ position:absolute; top:15px; left:15px; right:15px; display:flex; gap:6px; z-index:20; }
.story-bar{ flex:1; height:3px; background:rgba(255,255,255,.25); border-radius:99px; }
.story-bar.active{ background:#fff; }

.story-header{ position:absolute; top:30px; left:15px; right:15px; display:flex; justify-content:flex-end; z-index:30; }

.story-close{ background:none; border:none; color:#fff; font-size:24px; cursor:pointer; }

.story-nav{
  position:absolute;
  top:50%; transform:translateY(-50%);
  width:55px; height:55px;
  border:none; border-radius:50%;
  background:rgba(0,0,0,.35);
  color:#fff; font-size:26px;
  cursor:pointer;
  z-index:30;
}

.story-prev{ left:15px; }
.story-next{ right:15px; }
.story-nav:hover{ background:rgba(0,0,0,.6); }

@media (max-width:768px){
  .story-container{ width:100vw; height:100vh; border-radius:0; }
}

/* =========================================
   AVIS CLIENTS
   ========================================= */

.reviews-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:50px;
}

.reviews-header h2{ font-size:clamp(2rem,4vw,3.2rem); margin-bottom:12px; }
.reviews-header p{ color:var(--muted); max-width:600px; }

.reviews-score{ text-align:right; flex-shrink:0; }
.reviews-score .rating{ display:block; color:var(--accent); font-size:22px; letter-spacing:4px; margin-bottom:8px; }
.reviews-score strong{ display:block; font-size:34px; }
.reviews-score small{ color:var(--muted); }

.reviews-slider{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding-bottom:10px;
}

.reviews-slider::-webkit-scrollbar{ display:none; }

.review-card{
  flex:0 0 400px;
  scroll-snap-align:center;
  padding:32px;
  border-radius:20px;
  background:var(--bg);
  border:1px solid var(--line);
  transition:.35s ease;
}

.review-card:hover{ transform:translateY(-6px); border-color:var(--accent); }

.stars{ color:var(--accent); letter-spacing:4px; margin-bottom:22px; }
.review-card p{ line-height:1.8; color:var(--muted); margin-bottom:28px; }
.author{ font-weight:600; letter-spacing:.05em; }

.reviews-footer{ margin-top:45px; text-align:center; }

.reviews-btn{
  display:inline-flex;
  align-items:center;
  padding:16px 28px;
  border-radius:999px;
  border:1px solid var(--line);
  transition:.35s;
}

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

@media(max-width:768px){

    .reviews-wrapper{
        width:100%;
        display:block;
    }


    .reviews-slider{
        display:flex;
        flex-wrap:nowrap;
        width:100%;
        overflow-x:scroll;
        overflow-y:hidden;

        gap:16px;

        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;

        padding:0 0 15px 0;

        scrollbar-width:none;
    }


    .reviews-slider::-webkit-scrollbar{
        display:none;
    }


    .review-card{
        flex:0 0 88%;
        max-width:88%;
        scroll-snap-align:start;
    }


    .reviews-nav{
        display:none;
    }

}
/* =========================================
   PROCESS
   ========================================= */

.process{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:40px;
}

.process-item{ padding-top:20px; border-top:1px solid var(--line); }

.process-step{ font-size:1.1rem; color:var(--accent); margin-bottom:16px; font-weight:600; }
.process-item h3{ margin-bottom:12px; }
.process-item p{ color:var(--muted); }

@media (max-width:900px){
  .process{ grid-template-columns:1fr 1fr; }
}

@media (max-width:600px){
  .process{ grid-template-columns:1fr; gap:30px; }
}

/* =========================================
   CONTACT / CTA
   ========================================= */

.cta{ text-align:center; }
.cta .eyebrow{ text-align:left; }
.cta h2{ font-size:clamp(1.8rem,3.5vw,2.6rem); margin:30px 0 40px; }
.cta .hero-buttons{ justify-content:center; margin-bottom:10px; }

.contact-wrapper{ max-width:720px; margin:40px auto 0; text-align:left; }

.contact-form{ display:flex; flex-direction:column; gap:18px; }
.form-row{ display:flex; gap:18px; }

input, select, textarea{
  width:100%;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:10px;
  font-size:1rem;
  font-family:inherit;
  outline:none;
  background:#fff;
  color:var(--text);
  transition:border-color .2s ease;
}

input::placeholder, textarea::placeholder{ color:rgba(61,43,31,.55); }
input:focus, select:focus, textarea:focus{ border-color:var(--accent); }
textarea{ resize:vertical; min-height:150px; }

.contact-form button{
  padding:16px;
  border:none;
  border-radius:10px;
  background:var(--text);
  color:#fff;
  font-size:1rem;
  letter-spacing:.05em;
  cursor:pointer;
  transition:opacity .2s ease;
}

.contact-form button:hover{ opacity:.85; }

@media (max-width:768px){
  .form-row{ flex-direction:row; gap:10px; }
  .form-row input, .form-row select{ flex:1; min-width:0; }
}

/* =========================================
   ANIMATION D'APPARITION
   ========================================= */

.fade-up{ opacity:0; transform:translateY(50px); transition:1.1s cubic-bezier(.2,.8,.2,1); }
.fade-up.visible{ opacity:1; transform:translateY(0); }

/* =========================================
   PIED DE PAGE / ÉLÉMENTS FLOTTANTS
   ========================================= */

.floating-contact{
  position:fixed;
  bottom:16px; left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:70px;
  padding:18px 40px;
  background:rgba(56,42,33,.90);
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  z-index:998;
  box-shadow:0 15px 50px rgba(0,0,0,.25);
}

.floating-contact a{
  color:#fff;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:.35s ease;
}

.floating-contact a:hover{ color:#e6cdb0; }

@media (max-width:768px){
  .floating-contact{
    width:92%; max-width:420px;
    gap:30px;
    padding:14px 18px;
    bottom:70px;
  }
  .floating-contact a{ font-size:.62rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

#backToTop{
  position:fixed;
  bottom:calc(45px + env(safe-area-inset-bottom));
  right:20px;
  width:55px; height:55px;
  border-radius:50%;
  border:none;
  background:rgba(36,24,17,.92);
  color:#fff;
  font-size:24px;
  cursor:pointer;
  z-index:999;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}

#backToTop.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
#backToTop:hover{ background:var(--accent); }

@media (max-width:768px){
  #backToTop{ bottom:calc(140px + env(safe-area-inset-bottom)); }
}

.legal-links{
  text-align:center;
  padding:50px 20px 120px;
  border-top:1px solid var(--line);
}

.legal-links a{
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 10px;
}

.legal-links a:hover{ color:var(--text); }
.legal-links span{ color:var(--line); }

.cookie-banner{
  position:fixed;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);

  /* Largeur : 40% de l'écran */
  width:70vw;
  min-width:500px;
  max-width:800px;

  /* Hauteur : 50% de l'écran */
  height:35vh;
  min-height:150px;

  display:none;

  background:rgba(251,247,240,.98);
  backdrop-filter:blur(12px);
  color:var(--text);

  padding:35px;
  border-radius:20px;
  border:1px solid var(--line);

  z-index:1000002;

  box-shadow:0 15px 50px rgba(36,24,17,.25);
}

/* Contenu de la bannière */
.cookie-content{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:25px;
}

.cookie-content p{
  font-size:15px;
  line-height:1.7;
  max-width:650px;
}

.cookie-actions{
  display:flex;
  justify-content:center;
  gap:15px;
  width:100%;
}

.cookie-btn{
  padding:12px 24px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  font-size:14px;
}

.cookie-btn.accept{
  background:var(--text);
  color:#fff;
}

.cookie-btn.reject{
  background:transparent;
  border:1px solid var(--muted);
  color:var(--text);
}

/* Mobile */
@media (max-width:768px){
  .cookie-banner{
    width:92%;
    min-width:0;
    max-width:none;

    /* Toujours 50% de la hauteur */
    height:50vh;
    min-height:0;

    bottom:20px;
    padding:25px 20px;
  }

  .cookie-content{
    gap:20px;
  }

  .cookie-content p{
    font-size:14px;
    line-height:1.6;
  }

  .cookie-actions{
    flex-direction:column;
    gap:10px;
  }

  .cookie-btn{
    width:100%;
    padding:12px;
  }
}


.section-box{
    padding:120px 0;
}