body {
  background: red;
}

:root{
  --bg:#0a0a0a;--panel:#111;--panel2:#0e0e0e;--txt:#f2f2f2;--muted:#b6b6b6;--line:rgba(255,255,255,.08);
  --laser1:#8b5cf6; --laser2:#d946ef; --laser3:#00d1ff;
}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{
  font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--txt);
  background:
    radial-gradient(900px 500px at -10% -10%, rgba(216,70,239,.10), transparent),
    radial-gradient(900px 500px at 110% 110%, rgba(139,92,246,.08), transparent),
    var(--bg);
}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* --- Laser underline --- */
.laser-title{position:relative;padding-bottom:10px;overflow:hidden}
.laser-title::after{
  content:"";
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,transparent,var(--laser1),var(--laser2),transparent);
  opacity:.5;
}
.laser-title::before{
  content:"";
  position:absolute;left:-20%;bottom:0;height:2px;width:20%;
  background:linear-gradient(90deg,var(--laser3),var(--laser1),var(--laser2));
  filter:drop-shadow(0 0 6px var(--laser3));
  transform:translateX(-120%);
  opacity:0;
}
/* Titres principaux = laser permanent */
h1.laser-title::before, h2.laser-title::before{
  animation:beamLoop 3.5s linear infinite;
  opacity:1;
}
/* Autres titres = laser au survol */
h3.laser-title:hover::before,
.faq summary:hover::before{
  animation:beamOnce 1.2s linear forwards;
  opacity:1;
}
@keyframes beamLoop{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(520%)}
}
@keyframes beamOnce{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(520%)}
}
/* --- Fin laser --- */

/* Le reste de ton design (copie identique à la v3.5) */
.header{position:sticky;top:0;z-index:20;background:rgba(10,10,10,.7);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav-links{display:flex;gap:16px;align-items:center}
.menu-btn{display:none;background:transparent;border:1px solid var(--line);color:#fff;padding:8px 12px;border-radius:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);
  padding:10px 14px;border-radius:12px;background:var(--panel);color:var(--txt);cursor:pointer;transition:.25s}
.btn:hover{background:#1a1a1a;box-shadow:0 0 0 2px rgba(255,255,255,.02),0 10px 30px rgba(0,0,0,.35)}
.btn-primary{background:#fff;color:#0a0a0a;border-color:transparent;font-weight:700}
.muted{color:var(--muted)}.sm{font-size:.9rem}
.pill{margin-top:10px;display:inline-block;border:1px solid var(--line);padding:6px 10px;
  border-radius:999px;background:rgba(255,255,255,.04)}
.hero{padding:56px 0;border-bottom:1px solid var(--line)}
.grid2{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:900px){.grid2{grid-template-columns:1.1fr .9fr;gap:40px}}
.title-xl{font-size:clamp(30px,4vw,48px);line-height:1.1;margin:0 0 12px;font-weight:900;
  text-shadow:0 6px 24px rgba(0,0,0,.55)}
.title-lg{font-size:clamp(22px,3vw,32px);margin:0 0 12px;font-weight:900;
  text-shadow:0 4px 16px rgba(0,0,0,.45)}
.fade{background:linear-gradient(90deg,#fff,#cfcfcf);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.section{padding:56px 0}.section-border{border-top:1px solid var(--line)}
.cards{display:grid;gap:14px;margin-top:16px}
@media(min-width:900px){.cards.three{grid-template-columns:repeat(3,1fr)}
  .cards.four{grid-template-columns:repeat(4,1fr)}}
.card{border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));padding:18px}
.card h3{margin:0 0 8px}
.footer{border-top:1px solid var(--line);padding:26px 0;background:#0b0b0b}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-links{display:grid;gap:6px;justify-items:end}/* === Effet laser sur les questions FAQ (version corrigée) === */
.faq summary {
  position: relative;
  padding-bottom: 6px;
  display: block;              /* ✅ nécessaire pour que les pseudo-éléments s'affichent */
  cursor: pointer;
}

.faq summary::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--laser1), var(--laser2), transparent);
  opacity: .4;
}

.faq summary::before {
  content: "";
  position: absolute;
  left: -20%;
  bottom: 0;
  height: 2px;
  width: 20%;
  background: linear-gradient(90deg, var(--laser3), var(--laser1), var(--laser2));
  filter: drop-shadow(0 0 6px var(--laser3));
  transform: translateX(-120%);
  opacity: 0;
}

.faq summary:hover::before {
  animation: beamOnce 1.2s linear forwards;
  opacity: 1;
}
/* === Correction du bloc de droite dans le hero === */
.mock {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(135deg, #121212, #0f0f0f);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  margin-bottom: 16px;
}

.mock-title {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .9rem;
}

.mock-body {
  height: 220px;
  display: grid;
  place-items: center;
  color: #8a8a8a;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.gal {
  height: 82px;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  color: #8a8a8a;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
/* === Apparition fluide des cartes (fade-in) === */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gallery .gal,
.mosaic .tile,
.card {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}

.gallery .gal:nth-child(1) { animation-delay: 0.1s; }
.gallery .gal:nth-child(2) { animation-delay: 0.2s; }
.gallery .gal:nth-child(3) { animation-delay: 0.3s; }

.card:nth-child(1) { animation-delay: 0.15s; }
.card:nth-child(2) { animation-delay: 0.25s; }
.card:nth-child(3) { animation-delay: 0.35s; }
.card:nth-child(4) { animation-delay: 0.45s; }
/* === Apparition fluide + laser actif pour les grands titres === */
@keyframes fadeInTitle {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

h1.laser-title, h2.laser-title {
  opacity: 0;
  animation: fadeInTitle 0.8s ease forwards;
}

/* Délai progressif pour un effet naturel */
h1.laser-title { animation-delay: 0.2s; }
h2.laser-title { animation-delay: 0.4s; }
/* === Apparition fluide de la section À propos === */
@keyframes fadeInApropos {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#apropos {
  opacity: 0;
  animation: fadeInApropos 1s ease forwards;
  animation-delay: 0.4s;
}
<!-- À propos -->
<section class="section section-border" id="apropos">
  <div class="container">
    <h2 class="title-lg laser-title">À propos – Laser &amp; Matière</h2>
    <p class="muted">L’art de graver la matière, avec précision.</p>

    <div class="about-content">
      <p>
        Chez <strong>Laser &amp; Matière</strong>, chaque projet est unique.  
        Pas de production industrielle, pas de sous-traitance : tout est réalisé
        <strong>à la main, dans mon atelier de La Châtaigneraie</strong>, avec le même soin que si c’était pour moi.
      </p>

      <p>
        Chaque gravure est le résultat d’un travail minutieux, d’ajustements précis et de passion.  
        Qu’il s’agisse d’un <strong>capot de console</strong>, d’un <strong>outil professionnel</strong>, d’une <strong>photo sur bois</strong> ou d’un <strong>logo sur métal</strong>,
        je recherche toujours le rendu le plus <strong>net, durable et détaillé</strong> possible.
      </p>

      <h3>⚙️ Une technologie de haute précision</h3>
      <p>
        L’atelier est équipé d’un système laser haute performance, conçu pour offrir une <strong>gravure fine et maîtrisée</strong> sur différents matériaux :
        bois, métal, cuir, acrylique, verre ou plastique technique.  
        Chaque matière réagit différemment à la lumière du laser, et c’est cette expertise qui permet d’obtenir un résultat <strong>propre et fidèle</strong> au visuel d’origine.
      </p>

      <h3>🤝 Une petite structure, un vrai contact humain</h3>
      <p>
        Ici, pas d’intermédiaire ni de plateforme impersonnelle.  
        Vous échangez directement <strong>avec le créateur</strong> — celui qui prépare votre visuel, règle la machine et contrôle chaque pièce avant expédition.  
        Et si un souci survient, je reprends ou rembourse : <strong>transparence totale</strong>.
/* Effet scintillant sur le texte "Laser & Matière" */
@keyframes laserGlow {
  0%, 100% {
    text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #00f;
    color: #fff;
  }
  50% {
    text-shadow: 0 0 20px #0ff, 0 0 40px #00f, 0 0 60px #0ff;
    color: #bff;
  }
}
/* === Effet laser bleu métallique avec relief et reflets vivants === */
.laser-metal {
  font-weight: 800;
  color: #aee2ff;
  letter-spacing: 1px;
  text-transform: none;
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, #8fd6ff, #d7f5ff, #8fd6ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 5px rgba(0,150,255,0.7),
    0 0 10px rgba(0,150,255,0.5),
    0 2px 4px rgba(0,0,0,0.6),   /* relief sombre dessous */
    inset 0 1px 2px rgba(255,255,255,0.5); /* lumière interne */

  /* Animation du reflet lumineux */
  background-size: 200%;
  animation: laserShine 6s linear infinite;
}

/* Reflet laser doux qui glisse */
@keyframes laserShine {
  0% {
    background-position: 200% center;
    filter: brightness(1);
  }
  50% {
    background-position: -200% center;
    filter: brightness(1.4);
  }
  100% {
    background-position: 200% center;
    filter: brightness(1);
  }
}
/* --- BOUTONS REALISATIONS --- */
.realisations-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.real-btn {
  display: inline-block;
  padding: 15px 25px;
width: 200px;
  text-align: center;

 background: linear-gradient(90deg, #0ff, #09f);
  color: #fff;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 0 15px rgba(0,150,255,0.4);
  transition: all 0.3s ease;
}

.real-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 0 25px rgba(0,200,255,0.8);
  background: linear-gradient(90deg, #09f, #0ff);
  animation: laserShine 6s linear infinite;
}
/* === EFFET LASER MÉTALLIQUE SUR LE TITRE PRINCIPAL === */
.laser-metal {
  font-weight: 700;
  background: linear-gradient(90deg, #00ccff, #ffffff, #00ccff);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: laserSweep 6s linear infinite;
  text-shadow: 0 0 10px rgba(0, 204, 255, 0.6), 0 0 20px rgba(0, 204, 255, 0.4);
}

@keyframes laserSweep {
  0% {
    background-position: 200% center;
    filter: brightness(1);
  }
  50% {
    background-position: -200% center;
    filter: brightness(1.5);
  }
  100% {
    background-position: 200% center;
    filter: brightness(1);
  }
}
.footer a {
  color: #0ff; /* bleu laser assorti au style du site */
  text-decoration: none;
  transition: 0.3s ease;
}

.footer a:hover {
  text-decoration: underline;
  color: #fff;
}

/* --- Alignement du footer --- */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 40px;
}

.footer .container.foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.footer .foot-links {
  text-align: right;
}

.footer .foot-links a {
  display: block;
  color: #0ff;
  margin: 5px 0;
}

.footer .foot-links a:hover {
  color: #fff;
}
/* === LOGO LASER & MATIÈRE === */
.logo-lm {
  height: 85px; /* plus grand */
  width: auto;
  margin-right: 20px;
  filter: drop-shadow(0 0 25px rgba(0, 255, 255, 1))
          drop-shadow(0 0 45px rgba(0, 180, 255, 0.8))
          brightness(1.4)
          contrast(1.2);
  animation: logoPulse 3s ease-in-out infinite;
  vertical-align: middle;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.logo-lm:hover {
  transform: scale(1.12);
  filter: drop-shadow(0 0 40px rgba(0, 255, 255, 1))
          drop-shadow(0 0 60px rgba(0, 200, 255, 1))
          brightness(1.6)
          contrast(1.3);
}

/* Effet de pulsation laser intense */
@keyframes logoPulse {
  0% {
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.7))
            drop-shadow(0 0 25px rgba(0, 180, 255, 0.8))
            brightness(1.1);
  }
  50% {
    filter: drop-shadow(0 0 40px rgba(0, 255, 255, 1))
            drop-shadow(0 0 70px rgba(0, 230, 255, 0.9))
            brightness(1.8);
  }
  100% {
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.7))
            drop-shadow(0 0 25px rgba(0, 180, 255, 0.8))
            brightness(1.1);
  }
}
}

.logo-lm:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 0 25px rgba(0, 250, 255, 1)) brightness(1.6);
}

}

.logo-lm:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.8));
}

@keyframes logoGlow {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(0, 200, 255, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(0, 255, 255, 0.8));
  }

/* === LOGO LASER & MATIÈRE (effet laser bleu) === */
.logo-lm {
  height: 68px; /* Taille du logo */
  width: auto;
  margin-right: 18px; /* Espace avec le texte */
  filter: drop-shadow(0 0 8px rgba(0, 200, 255, 0.5)); /* Lueur bleue douce */
  animation: logoSweep 5s linear infinite; /* Animation laser */
  vertical-align: middle;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.logo-lm:hover {
  transform: scale(1.07);
  filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.9));
}

/* Animation du reflet laser bleu */
@keyframes logoSweep {
  0% {
    filter: drop-shadow(0 0 8px rgba(0, 180, 255, 0.5)) brightness(1);
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.9)) brightness(1.4);
  }
  100% {
    filter: drop-shadow(0 0 8px rgba(0, 180, 255, 0.5)) brightness(1);
  }
}
.real-btn.active,
.real-btn:focus {
  background: linear-gradient(90deg, #00bfff, #0080ff);
  color: white;
  box-shadow: 0 0 10px #00bfff, 0 0 20px #0080ff;
}
/* --- Mise en évidence du bouton actif --- */
.real-btn.active {
  background: linear-gradient(90deg, #00bfff, #0080ff);
  color: white;
  box-shadow: 0 0 10px #00bfff, 0 0 20px #0080ff;
}

/* Effet au survol pour uniformiser */
.real-btn:hover {
  background: linear-gradient(90deg, #009fff, #007bff);
  color: white;
}
.btn-snap {
  background-color: #fffc00;
  color: #000;
  font-weight: 700;
  border: 1px solid #e5e200;
  border-radius: 10px;
  padding: 0.8rem 1rem;
  display: inline-block;
  text-align: center;
  transition: transform 0.15s ease;
}
.btn-snap:hover {
  background-color: #f7e600;
  transform: translateY(-2px);
}
.snapcode {
  text-align: center;
  margin-top: 30px;
}

.snapcode p {
  color: #fffc00;
  font-weight: 600;
  margin-bottom: 8px;
}

.snapcode img {
  width: 120px !important;  /* force la taille */
  height: auto !important;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(255, 255, 0, 0.3);
  transition: transform 0.2s ease;
}

.snapcode img:hover {
  transform: scale(1.05);
}
/* --- Snapcode en haut à gauche --- */
.snap-top {
  position: absolute;
  top: 50%;
  left: 15px;         /* Espace depuis le bord gauche */
  transform: translateY(-50%);
}

.snap-top img {
  width: 65px;        /* Taille du Snapcode */
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(255, 255, 0, 0.3);
  transition: transform 0.2s ease;
}

.snap-top img:hover {
  transform: scale(1.08);
}
/* --- Image de fond fixe sur tout le site --- */

}
/* Snap sous La Châtaigneraie aligné à gauche */
.snap-inline {
  text-align: left; /* aligne le bloc sur la gauche */
  margin-top: 8px;
  margin-left: 20px; /* pour l’écarter légèrement du bord */
}

.snap-inline img {
  width: 65px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(255, 255, 0, 0.4);
  transition: transform 0.2s ease;
}

.snap-inline img:hover {
  transform: scale(1.08);
}

.snap-text {
  font-size: 15px;
  color: #ccc;
  margin-top: 6px;
  text-align: left;
  font-weight: 500;
}

.snap-text span {
  color: #ffd700; /* doré */
  font-weight: 600;
}

.snap-text:hover span {
  color: #fff;
  transition: color 0.2s ease;
}
/* --- Correction de l'alignement du bloc Exemple --- */
.hero .container.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 colonnes équilibrées */
  align-items: start;
  gap: 40px;
}

/* Forcer le snap à rester bien à gauche */
.snap-inline {
  grid-column: 1; /* Colonne gauche */
  justify-self: start;
}

/* --- Réalignement propre du bloc Exemple à droite sans casser la mise en page --- */
.mock.shadow-xl {
  position: relative;
  margin-left: auto;
  margin-right: 5%;
  width: 420px; /* 🔥 élargit le bloc */
  max-width: 100%;
  top: -40px;
  transform: none;
  left: 0;
}
.mock-body img.mock-img {
  width: 100%;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
  object-fit: cover;
}
/* --- Carrousel photo automatique --- */
/* --- Diaporama corrigé --- */
.mock-slider {
  width: 100%;                /* 🔹 prend toute la largeur du bloc */
  max-width: 520px;           /* 🔹 limite pour garder un format propre */
  height: 320px;              /* 🔹 plus haut pour les images 16:9 */
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Conteneur des images */
.mock-slider .slides {
  display: flex;
  width: 600%; /* 6 images */
  animation: slide 34s infinite ease-in-out;
}

/* Chaque image dans le diaporama */
.mock-slider img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* ✅ montre l’image entière sans zoom */
  object-position: center;
  border-radius: 20px;
  flex-shrink: 0;
  background-color: #000;
  aspect-ratio: 16 / 9;       /* ✅ garde le bon format horizontal */
  max-height: 100%;           /* ✅ évite tout dépassement du cadre */
}
/* Animation fluide du diaporama */
.slides {
  display: flex;
  width: 600%; /* 100% × 6 images */
  animation: slide 24s infinite; /* durée totale du cycle */
}

@keyframes slide {
  0%   { transform: translateX(0%); }        /* image 1 */
  13%  { transform: translateX(0%); }

  16%  { transform: translateX(-100%); }     /* image 2 */
  29%  { transform: translateX(-100%); }

  32%  { transform: translateX(-200%); }     /* image 3 */
  45%  { transform: translateX(-200%); }

  48%  { transform: translateX(-300%); }     /* image 4 */
  61%  { transform: translateX(-300%); }

  64%  { transform: translateX(-400%); }     /* image 5 */
  77%  { transform: translateX(-400%); }

  80%  { transform: translateX(-500%); }     /* image 6 */
  93%  { transform: translateX(-500%); }

  100% { transform: translateX(0%); }        /* retour à la première */
}

.plus {
  color: #00d4ff; /* même bleu que les lueurs du site */
  font-weight: 600;
  letter-spacing: 0.5px;
  text-shadow: 0 0 6px rgba(0, 212, 255, 0.6);
}
/* Effet lumineux + apparition douce */
.plus {
  color: #00d4ff;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.7);
  opacity: 0;
  animation: fadeInGlow 2.5s ease-out forwards;
}

/* Animation du fondu et halo */
@keyframes fadeInGlow {
  0% {
    opacity: 0;
    text-shadow: 0 0 0 rgba(0, 212, 255, 0);
  }
  50% {
    opacity: 0.6;
    text-shadow: 0 0 6px rgba(0, 212, 255, 0.4);
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 12px rgba(0, 212, 255, 0.7);
  }
}
/* --- Trait lumineux animé sous le titre --- */
.laser-title {
  position: relative;
  display: inline-block; /* garde la largeur du texte */
}

.laser-title::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -8px;                 /* distance sous le titre */
  width: 140px;                  /* longueur du trait */
  height: 2px;
  background: linear-gradient(90deg, transparent, #00d4ff, transparent);
  background-size: 200% 100%;
  animation: laserLineMove 2s linear infinite;
  border-radius: 2px;
  opacity: 0.9;
}

@keyframes laserLineMove {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
/* --- Ligne laser sous le titre --- */
.laser-line {
  width: 180px;
  height: 3px;
  margin: 10px auto 25px;
  border-radius: 3px;
  background: linear-gradient(90deg, #00d4ff, #007bff, #a855f7);
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
}
/* Remonter la section Réalisations juste sous le diaporama */
#realisations {
  margin-top: 10px !important; /* réduit l’espace vertical */
}
/* --- Bouton d'Action Flottant (FAB) --- */
.fab-btn {
  position: fixed;            /* Le bouton reste fixe à l'écran */
  bottom: 25px;               /* 25px du bas */
  right: 25px;                /* 25px de la droite */
  z-index: 1000;              /* Assure qu'il est au-dessus de tout le contenu */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 18px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  
  /* Style Laser & Matière (bleu lumineux) */
  background: linear-gradient(90deg, #00bfff, #0080ff);
  color: white;
  box-shadow: 0 0 10px rgba(0, 191, 255, 0.8), 0 0 20px rgba(0, 128, 255, 0.6);
}

.fab-btn:hover {
  transform: scale(1.05); /* Petit effet de zoom au survol */
  box-shadow: 0 0 15px rgba(0, 220, 255, 1), 0 0 30px rgba(0, 160, 255, 0.8);
}

.fab-text {
  font-size: 14px;
  letter-spacing: 1px;
}

.fab-num {
  font-size: 18px;
  margin-top: 2px;
}

/* Rendre plus petit et moins encombrant sur mobile */
@media (max-width: 600px) {
  .fab-btn {
    bottom: 15px;
    right: 15px;
    padding: 10px 15px;
  }
  .fab-text {
    font-size: 12px;
  }
  .fab-num {
    font-size: 16px;
  }
}
/* --- AMÉLIORATION VISUELLE : Survol des boutons bleus principaux (.btn-primary) --- */

/* Applique un effet de survol lumineux et blanc sur le texte */
.btn-primary:hover {
  background: #00bfff; /* Un bleu vif */
  color: white; /* Garde le texte blanc */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(0, 191, 255, 0.8);
  box-shadow: 0 0 15px rgba(0, 191, 255, 0.8); /* Renforce l'effet laser sur la bordure */
  transform: translateY(-1px); /* Léger effet de soulèvement */
  transition: all 0.3s ease;
}
/* --- NOUVEL EFFET VISUEL : Faisceau mobile sur la maquette (mock-slider) --- */

.mock-slider {
  position: relative; /* Indispensable pour positionner le faisceau */
  overflow: hidden;   /* Assure que le faisceau ne déborde pas */
}

.mock-slider::before {
  content: "";
  position: absolute;
  top: 0;
  left: -200%;
  width: 50%;
  height: 100%;
  /* Le dégradé du faisceau : transparent vers bleu clair */
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 255, 255, 0.1) 50%,
    transparent 100%
  );
  transform: skewX(-20deg); /* Inclinaison du faisceau */
  opacity: 0; /* Caché par défaut */
  transition: opacity 0.4s ease;
}

.mock-slider:hover::before {
  opacity: 1; /* Apparaît au survol */
  animation: laserSweepMove 3.5s infinite linear; /* Lance l'animation */
}

@keyframes laserSweepMove {
  0% {
    left: -200%;
  }
  100% {
    left: 200%;
  }
}
/* --- CORRECTION 2: Réajuster le padding/marge pour aligner correctement --- */

/* La classe .container gère l'alignement central. Assurons-nous qu'elle est bien centrée. */
.container {
    max-width: 1100px;
    margin: 0 auto; /* Centrage horizontal */
    padding: 0 20px;
}

/* On réajuste l'espace en haut des sections pour qu'elles ne soient pas collées au menu */
.section {
    padding-top: 80px; 
}

/* Réinitialise la marge du titre pour qu'il soit bien en haut de la section */
.container h2 {
    margin-top: 0 !important;
}
/* --- CORRECTION SÛRE : Remonter le contenu sous le header --- */
/* Cible le bloc principal du contenu sur les pages de réalisations */
main.section {
    padding-top: 40px; /* Réduit l'espace excessif en haut */
    margin-top: -750px; /* Remonte le bloc de contenu de 30px sous l'en-tête */
}

/* Assure que le conteneur est centré sur les sous-pages */
.container {
    margin: 0 auto;
}
/* --- CORRECTION HORIZONTALE : Centrage des sous-pages --- */

/* Cible le conteneur sur les sections pour forcer le centrage */
.section .container {
    max-width: 1100px; /* Assure que la largeur maximale est respectée */
    margin-left: auto !important; /* Déplace la marge gauche vers la droite */
    margin-right: auto !important; /* Déplace la marge droite vers la gauche */
    margin: 0 auto !important; /* COMMANDE DÉFINITIVE DE CENTRAGE */
    padding: 0 20px; /* Maintient le petit espace sur les bords */
}

/* Vous pouvez réutiliser ce bloc de code si vous annulez le -300px : */
main.section {
    /* Si vous revenez à un margin-top normal, retirez le -300px et utilisez plutôt : */
    margin-top: -60px; 
    padding-top: 80px;
}
/* --- CORRECTION DÉFINITIVE : Alignement et Centrage des sous-pages --- */

/* 1. Correction du décalage vers le bas */
/* (Cible la balise <main class="section"> pour remonter le contenu) */
main.section {
    /* Remonte le bloc de contenu. Le -60px compense la hauteur de la navbar. */
    margin-top: -420px !important; 
    /* Ajoute un espacement sécurisé pour que le titre ne soit pas collé au menu */
    padding-top: -500px !important; 
}

/* 2. Centrage du Conteneur */
/* (Cible la classe .container pour forcer l'alignement au centre) */
.container {
    /* Assure le centrage horizontal, c'est la commande qu'il vous faut ! */
    margin-left: auto !important; 
    margin-right: auto !important; 
    /* On annule la valeur de -300px si vous l'avez mise ailleurs */
    margin: 0 auto; 
}
/* --- CORRECTION DÉFINITIVE : Alignement des pages de Réalisations (Sous-pages) --- */

/* 1. Corriger l'alignement horizontal du menu .navbar qui est décalé */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    width: 100%; /* Assure qu'il prend toute la largeur */
    margin: 0 auto;
}

/* 2. Corriger l'empilement du titre/sous-titre dans le header des sous-pages */
.logo-area {
    display: flex; /* Active le flexbox pour aligner le logo et le texte */
    align-items: center;
    gap: 15px; /* Espace entre le logo et le texte */
}

.logo-area h1, .logo-area p {
    margin: 0; /* Supprime les marges excessives */
    line-height: 1.2;
}

/* 3. Centrage et Remontée du Contenu Principal */
main.section {
    /* Remonte le bloc de contenu au bon niveau */
    margin-top: -350px !important; 
    /* Ajoute un espacement sécurisé pour que le titre ne soit pas collé au menu */
    padding-top: 120px !important; 
}

/* 4. Forcer le centrage horizontal du contenu (Titre, Image, Boutons) */
.container {
    max-width: 1100px;
    margin-left: auto !important; /* Centrage fort */
    margin-right: auto !important; /* Centrage fort */
    margin: 0 auto !important; /* Règle de centrage définitive */
    padding: 0 20px;
}
/* --- CORRECTION DÉFINITIVE : Alignement des pages de Réalisations (Sous-pages) --- */
/* ... autres règles ... */

/* 4. Forcer le centrage horizontal du contenu (Titre, Image, Boutons) */
.container {
    max-width: 1100px;
    
    /* SUPPRIMEZ OU COMMENTEZ CES DEUX LIGNES qui forcent l'alignement à gauche : */
    /* margin-left: 20px !important; */
    /* margin-right: auto !important; */
    
    /* Et assurez-vous que le centrage par défaut est bien là : */
    margin: 0 auto !important; 
    
    padding: 0 20px;
}
/* === CENTRAGE DES PHOTOS ET DES BOUTONS === */

/* 1. Centrer toutes les images des pages de réalisations */
.section img {
  display: block;         /* met les images sur leur propre ligne */
  margin: 30px auto;      /* centre horizontalement */
  max-width: 70%;         /* évite qu'elles soient trop grandes */
  border-radius: 16px;    /* arrondit un peu les bords */
  box-shadow: 0 0 25px rgba(0,255,255,0.2); /* effet de lueur bleue */
}

/* 2. Aligner les boutons de galerie */
.realisations-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start.; /* <-- change par "flex-start" si tu veux les mettre à gauche */
  gap: 20px;
  margin-top: 30px;
}
/* === CENTRAGE DES PHOTOS ET DES BOUTONS === */

/* 1. Centrer toutes les images des pages de réalisations */
.section img {
  display: block;         /* met les images sur leur propre ligne */
  margin: 30px auto;      /* centre horizontalement */
  max-width: 70%;         /* évite qu'elles soient trop grandes */
  border-radius: 16px;    /* arrondit un peu les bords */
  box-shadow: 0 0 25px rgba(0,255,255,0.2); /* effet de lueur bleue */
}

/* 2. Aligner les boutons de galerie */
.realisations-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* <-- change par "flex-start" si tu veux les mettre à gauche */
  gap: 20px;
  margin-top: 30px;
}

/* === Placement des boutons de réalisations sur la gauche de l’écran === */
.realisations-grid {
  position: fixed;        /* on les fixe sur l’écran */
  top: 50%;               /* les place verticalement au milieu */
  left: 20px;             /* distance du bord gauche */
  transform: translateY(-50%); /* centre verticalement */
  display: flex;
  flex-direction: column; /* les empile verticalement */
  gap: 10px;              /* espace entre les boutons */
  z-index: 10;            /* au-dessus du contenu */
}

/* On réduit un peu leur taille pour que ce soit joli en colonne */
.realisations-grid .real-btn {
  padding: 10px 20px;
  font-size: 0.9rem;
}
/* --- Alignement du texte à côté du bouton 3D --- */
.btn-3d {
  display: flex;
  align-items: center;
  gap: 10px; /* espace entre le bouton et le texte */
}

.new-note {
  color: #0ff;          /* bleu clair */
  font-size: 0.9rem;
  opacity: 0.8;
}
/* === Bouton "Retour à l'accueil" avec couleur différente permanente === */
.return-home {
  margin-top: 25px;
  background-color: #ffcc00;     /* 💛 couleur dorée permanente */
  color: #000;                   /* texte noir pour bien contraster */
  font-weight: bold;
  text-align: center;
  box-shadow: 0 0 20px rgba(255, 204, 0, 0.5);
  transition: all 0.3s ease;
  border: none;
}

/* effet doré lumineux quand on survole */
.return-home:hover {
  background-color: #ffdd33;     /* doré plus clair */
  box-shadow: 0 0 30px rgba(255, 221, 51, 0.8);
  transform: scale(1.05);       /* léger agrandissement */
}
/* === Centrage du diaporama sur la page d'accueil === */
.diaporama, .slider, .gallery, .exemples {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}
/* === Centrage du diaporama sur la page d'accueil === */
.mock-slider {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 600px; /* ajuste la taille selon ton goût */
}
.mock {
  display: flex;
  justify-content: center;
}
/* === Réglage complet du diaporama (centrage + taille correcte) === */

/* Conteneur du diaporama */
.mock-slider {
  display: flex;
  justify-content: center;     /* centre horizontalement */
  align-items: center;         /* centre verticalement dans son bloc */
  margin: 0 auto;
  max-width: 700px;            /* largeur maximum du cadre */
  overflow: hidden;            /* évite les débordements */
  border-radius: 16px;         /* coins arrondis comme le reste du site */
}

/* Les images du diaporama */
.mock-slider img {
  display: block;
  width: 100%;                 /* s’adapte à la largeur du cadre */
  height: auto;                /* garde les proportions */
  object-fit: contain;         /* évite qu’elles soient zoomées ou coupées */
  border-radius: 16px;
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.2); /* halo bleu cohérent avec le style */
}
/* === Remise en place correcte du diaporama d'accueil === */

/* Le conteneur global du cadre */
.mock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transform: translateX(-60px);

}

/* Le titre "Exemples de gravures" */
.mock-title {
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Ajustement fin du diaporama : taille + centrage parfait */
.mock-slider {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 3;      /* garde une proportion équilibrée */
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* les images à l'intérieur */
.mock-slider img {
  width: 85%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: 12px;
  transform: translateX(-90%); /* 🔹 recentre légèrement vers la gauche */
}

/* === Correction finale : recentrer le diaporama === */
.grid2 {
  display: flex;
  align-items: center;
  justify-content: center; /* ✅ centre les deux colonnes dans la page */
  gap: 60px; /* espace entre le texte et le diaporama */
}

/* === Réglage final : diaporama centré et non zoomé === */
.mock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.mock-slider {
  width: 100%;
  max-width: 500px;     /* largeur max du cadre */
  height: auto;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}

.mock-slider img {
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: 12px;
}

/* === Diaporama propre, centré et fluide === */
.mock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.mock-slider img {
  display: block;
  margin: 0 auto;          /* centre horizontalement */
  width: auto;             /* garde la taille réelle */
  max-width: 100%;         /* ne dépasse jamais le cadre */
  height: auto;            /* garde les proportions */
  object-fit: contain;     /* ne coupe rien */
}

.mock-slider img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 12px;
  margin: 0 auto;
}
/* === Centrage parfait du bloc de diaporama === */
.mock {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mock-slider img {
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto;
  transform: translateX(-2px); /* 🔹 ajustement fin du centrage */
}
/* --- AMÉLIORATIONS RESPONSIVE POUR MOBILE (smartphones) --- */
@media (max-width: 768px) {
  
  /* 1. CONTENEUR GENERAL : Réduit l'espace autour du contenu */
  .container {
    padding: 0 10px; /* Plus petit padding sur les bords */
  }
  
  /* 2. NAVIGATION : Cache les liens pour laisser la place au logo */
  .nav-links {
    display: none;
  }
  
  /* 3. NAVIGATION : Affiche le bouton du menu mobile (le ☰) */
  .menu-btn {
    display: block; 
  }

  /* 4. LOGO : Réduit la taille du logo pour qu'il tienne à côté du menu */
  .logo-lm {
    height: 48px; 
    margin-right: 10px;
  }

  /* 5. GRILLES DU HERO : Force la grille principale de la section Hero (logo/texte + diaporama) à s'afficher en colonne */
  .hero .container.grid2 {
    grid-template-columns: 1fr; 
  }
  
  /* 6. CARTES : Force les cartes (Pourquoi graver, Services Pro) à s'empiler sur une seule colonne */
  .cards.three,
  .cards.four {
    grid-template-columns: 1fr !important;
  }
  
  /* 7. DIAPORAMA : Assure que le diaporama utilise toute la largeur sans déborder */
  .mock.shadow-xl {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    /* Réduit l'espace vertical */
    top: 0; 
  }
  
  /* 8. SNAPCODE : Supprime la marge qui le décalait vers la droite sur l'accueil */
  .snap-inline {
    margin-left: 0;
  }
}

/* Rend le menu mobile visible verticalement quand le JavaScript lui ajoute la classe .show */
#navLinks.show {
    position: absolute;
    top: 64px; 
    left: 0;
    right: 0;
    width: 100%;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 20px;
    display: flex;
    z-index: 15;
}
/* 🔹 Mise en page mobile : boutons en colonne propre */
@media screen and (max-width: 768px) {
  .realisations-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
  }

  .real-btn {
    width: 80%;
    max-width: 300px;
    text-align: center;
    font-size: 16px;
  }

  img {
    max-width: 90% !important;
    height: auto;
  }

  body.dark-theme {
    overflow-x: hidden;
  }

  .new-note {
    font-size: 12px;
    text-align: center;
    display: block;
  }
}
/* === Effet d'éclat laser pro sur le bouton "Demander un tarif Pro" === */
.btn-primary[href="#contact"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-primary[href="#contact"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 2px; /* épaisseur du contour lumineux */
  background: linear-gradient(130deg, #00d4ff, #a855f7, #00d4ff);
  background-size: 200% 200%;
  animation: proGlow 4s linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.8;
}

@keyframes proGlow {
  0%   { background-position: 200% 0; }
  50%  { background-position: 0 100%; }
  100% { background-position: 200% 0; }
}
/* --- FORCER : cacher header / logo uniquement sur mobile (IMPORTANT : placer en fin du fichier) --- */
@media (max-width: 768px) {
  /* cible large + différentes classes utilisées dans tes fichiers */
  header, header.header, header.navbar, .navbar, .header,
  .logo-area, .logo-zone, .brand, .nav, .container.nav, .nav-links {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* s'assurer que le menu bouton mobile n'apparaît pas non plus */
  .menu-btn, #menuBtn {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* remonter le contenu principal */
  body, html {
    margin: 0 !important;
    padding: 0 !important;
  }
  main, main.section, #top, .hero {
    margin-top: 0 !important;
    padding-top: 8px !important;
  }
}
/* --- Tableau des tarifs pro --- */
.tarif-pro {
  margin-top: 60px;
  text-align: center;
  padding: 20px;
}

.tarif-pro h2 {
  font-size: 1.8rem;
  color: #00c8ff;
  text-shadow: 0 0 8px rgba(0, 200, 255, 0.5);
  margin-bottom: 10px;
}

.tarif-pro p {
  color: #ccc;
  margin-bottom: 25px;
}

.table-container {
  overflow-x: auto;
  margin: 0 auto;
  max-width: 800px;
}

.tarif-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
  text-align: left;
}

.tarif-table th, .tarif-table td {
  padding: 12px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  vertical-align: middle;
}

.tarif-table th {
  background: rgba(0, 255, 255, 0.1);
  color: #00eaff;
  font-weight: bold;
  text-align: center;
}

.tarif-table tr:hover {
  background: rgba(0, 255, 255, 0.1);
}

.remise {
  color: #00ffcc;
  font-weight: bold;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .tarif-table th, .tarif-table td {
    padding: 10px;
    font-size: 0.9rem;
    text-align: center;
  }
  .tarif-pro {
    padding: 10px;
  }
}
/* --- Correction centrage tableau tarifs --- */
.table-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}

.tarif-table {
  width: 80%;
  max-width: 600px;
  border-collapse: collapse;
  text-align: center;
}

.tarif-table th,
.tarif-table td {
  padding: 12px;
}

.tarif-table th {
  color: #00e0ff;
  font-weight: bold;
  text-transform: uppercase;
}

.tarif-table .remise {
  color: #00e0ff;
  font-weight: bold;
}

/* Version mobile */
@media (max-width: 768px) {
  .tarif-table {
    width: 95%;
    font-size: 14px;
  }
}
/* --- Effet laser animé autour du diaporama --- */
.mock-slider {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

/* Bordure laser en mouvement */
.mock-slider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background: linear-gradient(90deg, 
    rgba(0, 255, 255, 0) 0%, 
    rgba(0, 255, 255, 1) 50%, 
    rgba(0, 255, 255, 0) 100%);
  background-repeat: no-repeat;
  background-size: 300% 300%;
  animation: laserOrbit 3s linear infinite;
  z-index: 3;
  pointer-events: none;
}

@keyframes laserOrbit {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 2px, 0 2px);
    background-position: 0 0;
  }
  25% {
    clip-path: polygon(98% 0, 100% 0, 100% 100%, 98% 100%);
    background-position: 100% 0;
  }
  50% {
    clip-path: polygon(0 98%, 100% 98%, 100% 100%, 0 100%);
    background-position: 100% 100%;
  }
  75% {
    clip-path: polygon(0 0, 2px 0, 2px 100%, 0 100%);
    background-position: 0 100%;
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 2px, 0 2px);
    background-position: 0 0;
  }
}
/* Cacher uniquement les liens de menu sur les pages galerie */
.page-galerie header.navbar nav.menu {
  display: none !important;
}

/* ======= STYLE PREMIUM PAGE VIDÉOS ======= */

.videos-page {
    background: radial-gradient(circle at top, #0e1a2b, #050a10 60%);
    padding: 40px 0;
}

.videos-main {
    max-width: 900px;
    margin: auto;
    text-align: center;
}

.videos-main h1 {
    color: #00eaff;
    font-size: 2.4rem;
    font-weight: 700;
    text-shadow: 0 0 18px #00eaff77;
    margin-bottom: 25px;
}

.video-premium-box {
    background: #000000cc;
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 0 25px #00eaff55;
    border: 1px solid #00eaff44;
    backdrop-filter: blur(6px);
}

.video-premium-box video {
    width: 100%;
    border-radius: 12px;
}

/* Miniatures */
.video-thumbs {
    margin-top: 35px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.thumb-box {
    width: 180px;
    background: #0c1625;
    border-radius: 12px;
    padding: 10px;
    border: 1px solid #00eaff33;
    box-shadow: 0 0 12px #00eaff33;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.thumb-box:hover {