@charset "utf-8";

/* =================== Variables =================== */
:root{
  --bg-color: rgb(255,255,255);
  --text-color: #000;
  --text-inverse: #fff;
  --heading-color: #000;

  --btn-bg: rgba(214,214,214,1);
  --btn-hover-bg: rgba(180,180,180,1);
  --btn-active-bg: #666;
  --btn-active-text: #fff;
  --btn-text: #2A2A2A;
  --btn-bg-drawer: rgba(214,214,214,0.75);

  --lien:#6685E7;
  --font-lien:"Oswald",sans-serif;

  --popup-bg-projet: rgba(200,200,200,0.56);
  --popup-titre-projet: rgba(214,214,214,1);
  --popup-technic-projet: rgba(214,214,214,1);
  --popup-relatation-projet: rgba(200,200,200,0.56);
  --popup-text-projet: rgba(200,200,200,0.56);
  --popup-scrollbox-projet: rgba(200,200,200,0.56);
  --popup-scrollbar-projet: rgba(200,200,200,0.56);
  --popup-point-projet: rgba(200,200,200,0.56);

  --overlay-bg: rgba(0,0,0,0.7);
  --popup-bg: rgba(200,200,200,0.4);
  --popup-scroll-bg: rgba(200,200,200,0.7);
 
  --popup-text:#000;
  --exit-bg: rgba(40,40,40,1);
  --exit-hover-bg: rgba(75,75,75,1);

  --dot-bg:#bbb;
  --dot-active-bg:#717171;

  /* Colonne gauche */
  --side-margin: 1%;
  --sidebar-width: 8%;
  --stack-top: 16px;
  --stack-gap: 12px;

  /* Z-index (UI / Overlays / Exit) */
  --z-ui: 1700;        /* boutons flottants (filtres, etc.) */
  --z-overlay: 3000;   /* voiles et cartes de popups */
  --z-exit: 4000;      /* croix de fermeture & close fullscreen */

  --font-body: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: "Bebas Neue", sans-serif;
  --font-accent: "Oswald", "Lato", Arial, sans-serif;

  --social-h: calc(56px + env(safe-area-inset-bottom,0px));
  --top-anchor: 120px;
}

/* Thème sombre */
.dark-theme{
  --bg-color: rgba(31,31,31,1);
  --text-color:#C5C5C5;
  --heading-color:#f0f0f0;

  --btn-bg: rgba(65,65,65,1);
  --btn-hover-bg: rgba(80,80,80,1);
  --btn-active-bg:#737373;
  --btn-active-text:#fff;
  --btn-text:#C5C5C5;
  --btn-bg-drawer : rgba(65,65,65,0.80);

  --lien:#6A6AAC;

  --popup-bg-projet: rgba(62,62,62,0.66);
  --popup-titre-projet: rgba(60,60,60,1);
  --popup-technic-projet: rgba(214,214,214,1);
  --popup-relatation-projet: rgba(200,200,200,0.56);
  --popup-text-projet: rgba(200,200,200,0.56);
  --popup-scrollbox-projet: rgba(43,43,43,0.78);
  --popup-scrollbar-projet: rgba(200,200,200,0.56);
  --popup-point-projet: rgba(200,200,200,0.56);

  --overlay-bg: rgba(0,0,0,0.85);
  --popup-bg: rgba(46,46,46,1);
  --popup-scroll-bg: rgba(30,30,30,0.9);
  --popup-text:#f0f0f0;
  --exit-bg: rgba(100,100,100,1);
  --exit-hover-bg: rgba(150,150,150,1);

  --dot-bg:#555;
  --dot-active-bg:#aaa;

  --font-body: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: "Bebas Neue", sans-serif;
  --font-accent: "Oswald", "Lato", Arial, sans-serif;
}

/* =================== Reset + base =================== */
html{ font-size:16px; }
body{
  margin:0; padding:0;
  background-color:var(--bg-color); color:var(--text-color);
  font-size:1rem; line-height:1.45;
}

h1{ color:var(--heading-color); }
h2{
  color:var(--text-color);
  font-family:var(--font-accent);
  font-optical-sizing:auto;
  font-weight:400; font-style:normal;
}
h3,h5,p,a{ font-family:var(--font-body); }
h3{ font-weight:600; font-size:1.2rem; color:var(--text-color); }
h5{ font-weight:600; font-size:1rem; color:var(--text-color); }
p{ font-weight:400; font-size:1rem; color:var(--text-color); }
a{ font-style:italic; color:var(--lien); }

/* =========================================================
   A. COLONNE GAUCHE FIXE
   ========================================================= */
#left-stack{
  position:fixed;
  top:var(--stack-top);
  left:var(--side-margin);
  width:var(--sidebar-width);
  display:flex; flex-direction:column; gap:var(--stack-gap);
  z-index:20; max-height:calc(100vh - var(--stack-top) - 16px);
  overflow:auto; background:transparent;
}

/* Titre */
#PrenomNom{
  margin:0; width:100%; display:block; text-align:left;
  font-size:3em;
  font-family:var(--font-heading);
  font-weight:400; color:var(--text-color);
}
#ArditoKevin{ margin:0; }

/* Barre de 3 boutons */
#apropos-section{
  width:100%; display:flex; flex-direction:column; gap:8px; margin:0;
}

/* Boutons du haut */
#apropos-section .btn,
#apropos-btn,#contact-btn,#dark-btn{
  width:100%; box-sizing:border-box; border:none; outline:none;
  border-radius:15px; padding:10px 16px; background-color:var(--btn-bg);
  color:var(--btn-text); cursor:pointer;
  font-weight:500; font-size:1.3rem; line-height:1.2; text-align:center;
  transition:background .25s ease;
}
#apropos-section .btn:hover,
#apropos-btn:hover,#contact-btn:hover,#dark-btn:hover{ background-color:var(--btn-hover-bg); }
#apropos-section .btn.active,
#apropos-btn.active,#contact-btn.active,#dark-btn.active{
  background-color:var(--btn-active-bg); color:var(--btn-active-text);
}

/* Tags */
#myBtnContainer{
  width:100%; display:flex; flex-direction:column; gap:.5em;
  z-index:10; overflow:hidden; transition:max-height 300ms ease; color:var(--btn-text);
}
#myBtnContainer .btn{
  width:auto; box-sizing:border-box; border:none; outline:none;
  border-radius:15px; padding:5px 12px; background-color:var(--btn-bg);
  color:var(--btn-text); cursor:pointer; font-weight:500; font-size:1rem; line-height:1.2;
}

/* Generic .btn */
.btn{
  box-sizing:border-box; border:none; outline:none; border-radius:15px;
  padding:5px 12px; background-color:var(--btn-bg); color:var(--btn-text);
  cursor:pointer; font-weight:500; font-size:1rem; line-height:1.2;
}
#myBtnContainer .btn:hover,.btn:hover{ background-color:var(--btn-hover-bg); }
#myBtnContainer .btn.active,.btn.active{
  background-color:var(--btn-active-bg); color:var(--btn-active-text);
}

/* ========= Réseaux sociaux ========= */
#social-icons{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:clamp(12px,2vw,18px); width:100%; margin:14px auto; max-width:90%;
}
#social-icons .social-icon{
  width:clamp(40px,3.8vw,52px); height:clamp(40px,3.8vw,52px);
  display:grid; place-items:center; text-decoration:none; color:var(--text-color);
  transition:transform .15s ease, opacity .2s ease;
}
#social-icons .social-icon svg{
  width:70%; height:70%; fill:currentColor; display:block; opacity:.9;
  transition:opacity .2s ease, transform .15s ease;
}
#social-icons .social-icon:hover svg{ opacity:1; transform:scale(1.08); }
.dark-theme #social-icons .social-icon{ color:var(--btn-text); }

@media (max-width:1100px){
  #social-icons{ gap:clamp(10px,4vw,14px); max-width:95%; }
  #social-icons .social-icon{ width:clamp(34px,6vw,42px); height:clamp(34px,6vw,42px); }
}

/*////////////////// Filtres //////////////////*/
#filters-toggle{
  width:100%; box-sizing:border-box; border:none; outline:none; border-radius:15px;
  padding:12px 16px; background-color:var(--btn-bg); cursor:pointer;
  font-weight:500; font-size:clamp(.95rem,.9rem + .2vw,1.05rem); text-align:center;
  transition:background .25s ease;
}
#filters-toggle:hover{ background:var(--btn-hover-bg); }
#filters-toggle:active{ background:var(--btn-active-bg); color:var(--btn-active-text); }

/*////////////////// Toggle dark mode //////////////////*/
.theme-pill{
  --w:56px; --h:28px; --pad:3px;
  --track:#cfd4db; --track-dark:#56595e;
  --border:#1f2430; --thumb-bg:#fff;
  --icon-size:16px; --shadow:0 0 0 0px var(--border) inset;

  position:relative; display:inline-block; width:var(--w); height:var(--h);
  border-radius:calc(var(--h)/2); padding:0; border:none;
  background:transparent; cursor:pointer; outline:none;
}
.theme-pill .pill-track{ position:absolute; inset:0; border-radius:inherit; background:var(--track); box-shadow:var(--shadow); }
.theme-pill .pill-thumb{
  position:absolute; top:50%; left:var(--pad);
  width:calc(var(--h) - (var(--pad) * 2)); height:calc(var(--h) - (var(--pad) * 2));
  transform:translateY(-50%); border-radius:50%; background:var(--thumb-bg);
  display:grid; place-items:center; transition:transform .25s ease, background .2s ease;
  box-shadow:0 0 0 2px var(--border);
}
.theme-pill svg{ width:var(--icon-size); height:var(--icon-size); fill:var(--border); }
.theme-pill .icon-moon{ display:none; }
.theme-pill[aria-checked="true"] .pill-thumb{ transform:translateY(-50%) translateX(calc(var(--w) - var(--h))); }
html[data-theme="dark"] .theme-pill .pill-track{ background:var(--track-dark); }
html[data-theme="dark"] .theme-pill .icon-sun{ display:none; }
html[data-theme="dark"] .theme-pill .icon-moon{ display:block; }
@media (prefers-reduced-motion:reduce){ .theme-pill .pill-thumb{ transition:none; } }

/* =========================================================
   B. GRILLE DES VIGNETTES
   ========================================================= */
#projects-container{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem;
  margin-left:calc(var(--side-margin) + var(--sidebar-width) + 1.5rem);
  margin-right:calc(var(--side-margin) + .5rem);
  margin-top:.5rem;
}
.filterDiv{ position:relative; display:none; margin:0; }
.filterDiv.show{ display:block; }
.container{ position:relative; width:auto; }
.thumbnailprojet{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; display:block;
}
.overtitle{
  position:absolute; bottom:0; left:0; right:0; width:100%; height:0; overflow:hidden; transition:height .5s ease;
  border-radius:10px; background:rgba(255,255,255,.4); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; text-align:center; margin:0 auto; box-sizing:border-box; pointer-events:none;
}
.filterDiv:hover .overtitle{ height:30%; }
.texttitle{
  margin:0; padding:0 .6em; white-space:normal; word-wrap:break-word; width:100%;
  font-weight:900; color:#000; text-align:center; font-size:clamp(2rem,1.5vw,1.6rem); line-height:1.2; overflow:hidden;
}

/* =========================================================
   C. POPUPS (A PROPOS / CONTACT / PROJET)
   ========================================================= */
#about-popupoverlay,
#contact-popupoverlay,
#pop-upoverlay{
  position:fixed; inset:0; display:none; z-index:var(--z-overlay);
}
#about-popupoverlay.open,
#contact-popupoverlay.open,
#pop-upoverlay.open{ display:block !important; }

/* ABOUT */
#about-popupoverlay{ background:rgba(255,255,255,0); }
#about-popupoverlay .popup-content{
  width:60vw; height:80vh; max-width:1500px; box-sizing:border-box;
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  border-radius:15px; box-shadow:1px 55px 45px rgba(0,0,0,.5);
  background:var(--popup-bg-projet); backdrop-filter:blur(10px);
  padding:.5em 1em; display:flex; flex-direction:row; gap:20px; overflow:hidden;
}
#about-popupoverlay .popup-left{ flex:1; display:flex; flex-direction:column; gap:.5em; }
#about-popupoverlay .titrepopup{
  font-family:var(--font-heading); font-weight:400; font-size:2.8em; text-transform:uppercase; letter-spacing:.5px;
  color:var(--heading-color); text-align:center; margin-top:.3em; background:var(--btn-bg);
  box-shadow:1px 25px 45px rgba(0,0,0,.5); padding:.3em; border-radius:15px; margin-bottom:.6em;
}
#about-popupoverlay .scrollerpopup{
  flex:1; background:var(--popup-scrollbox-projet); border-radius:15px;
  box-shadow:0 35px 25px rgba(0,0,0,.3); color:#000; padding:1em; overflow-y:auto; max-height:calc(80vh - 4em);
  white-space:pre-wrap; word-break:break-word;
}
#about-popupoverlay .about-buttons{ margin-top:.8em; display:flex; gap:1em; justify-content:center; }
#about-popupoverlay .cv-btn{ background:#222; color:#fff; padding:.6em 1.2em; border-radius:8px; text-decoration:none; font-weight:bold; transition:background .3s ease; }
#about-popupoverlay .cv-btn:hover{ background:#444; }

/* CONTACT */
#contact-popupoverlay{ background:var(--overlay-bg); backdrop-filter:blur(6px); }
#contact-popupoverlay .popup-content{
  position:absolute; top:25%; left:50%; transform:translate(-50%,-50%);
  width:min(520px,90vw); height:auto; padding:1.25em 1.5em;
  display:block; border-radius:15px; box-shadow:1px 55px 45px rgba(0,0,0,.5);
  background:var(--popup-bg); backdrop-filter:blur(10px);
}
#contact-popupoverlay .titrepopup,
#contact-popupoverlay h2{
  margin:.2em 0 .6em; font-family:var(--font-heading); font-weight:400;
  font-size:clamp(1.6rem,3.6vw,2.2rem); text-align:center; color:var(--popup-text);
  background:var(--btn-bg); border-radius:12px; padding:.25em .5em;
}
#contact-popupoverlay p{ margin:0; text-align:center; font-size:clamp(1rem,1.8vw,1.1rem); color:var(--popup-text); }
#contact-popupoverlay a{ color:var(--lien); font-family:var(--font-lien); font-weight:600; text-decoration:none; font-size:24px; }
#contact-popupoverlay a:hover{ text-decoration:underline; }

/* POPUP PROJET */
#pop-upoverlay{ background:transparent; }
.popup-content{
  width:60vw; height:80vh; max-width:1500px; box-sizing:border-box;
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  border-radius:15px; box-shadow:1px 55px 45px rgba(0,0,0,.5);
  background:var(--popup-bg-projet); backdrop-filter:blur(10px);
  padding:1em; display:flex; flex-direction:row; gap:20px; overflow:hidden;
}
.popup-left{ flex:1; display:flex; flex-direction:column; gap:1.4em; }
.titrepopup{
  font-size:1.5em; color:var(--btn-text); text-align:center; margin-top:1em;
  background:var(--btn-bg); box-shadow:1px 25px 45px rgba(0,0,0,.5);
  padding:.3em; border-radius:15px; margin-bottom:.3rem;
}
.popup-info-container{ text-align:center; color:var(--btn-text); font-size:1.1rem; }
.popup-date{ font-weight:400; font-size:1.3rem; margin-bottom:1em; }
.popup-techniques{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:.5em; }
.technique-item{ background:var(--btn-bg); color:var(--btn-text); border-radius:15px; padding:5px 10px; font-size:.9rem; font-weight:600; }
.popup-link{ margin-bottom:.1em; }
.popup-link a{ color:rgba(90,90,90,1); text-decoration:none; font-style:italic; font-size:1rem; }
.popup-link a:hover{ text-decoration:underline; }

.scrollerpopup{
  flex:1; background-color:var(--popup-scrollbox-projet); border-radius:15px;
  box-shadow:0 35px 25px rgba(0,0,0,.3); color:var(--text-color);
  padding:20px; overflow-y:auto; max-height:100%; margin-bottom:10px;
  white-space:pre-wrap; word-break:break-word;
}

/* ===== Croix de fermeture – commune aux 3 popups ===== */
#about-popupoverlay .popup-exit,
#contact-popupoverlay .popup-exit,
#pop-upoverlay .popup-exit{
  position:fixed;
  top:10px;
  right:10px;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--btn-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 12px rgba(0,0,0,0.25);
  z-index:99999;
  transition:background .3s ease, transform .2s ease;
}
#about-popupoverlay .popup-exit:hover,
#contact-popupoverlay .popup-exit:hover,
#pop-upoverlay .popup-exit:hover{
  background:var(--exit-hover-bg);
  transform:scale(1.05);
}
#about-popupoverlay .popup-exit .popup-exit-x,
#contact-popupoverlay .popup-exit .popup-exit-x,
#pop-upoverlay .popup-exit .popup-exit-x{
  font-size:14px;
  color:#fff;
  line-height:1;
}

/* =========================================================
   D. SLIDER PROJET
   ========================================================= */
.slider-wrapper{
  position:relative; width:66%; height:100%;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
}
.slide-img, video.slide-img{
  flex:2; position:relative; border-radius:15px; box-shadow:1px 5px 5px rgba(0,0,0,.5);
  width:100%; height:100%; object-fit:contain; object-position:center; max-width:100%; max-height:100%; display:block;
}
.slide-container{
  margin-top:6.7em; position:relative; width:100%; height:100%;
  display:flex; justify-content:center; align-items:center; overflow:hidden;
}
.prev,.next{
  cursor:pointer; position:absolute; top:50%;
  width:60px; height:60px; display:flex; align-items:center; justify-content:center; border-radius:50%;
  color:#000; font-size:30px; background-color:rgba(200,200,200,0.8);
  transition:background-color .6s ease; z-index:20;
}
.prev{ left:15px; } .next{ right:15px; }
.prev:hover,.next:hover{ background-color:rgba(200,200,200,0.5); }

.full-screen-overlay{
  position:fixed; inset:0; background:rgba(255,255,255,0.9);
  display:flex; align-items:center; justify-content:center; z-index:var(--z-overlay); animation:fadeIn .5s ease;
}
.full-screen-img{
  max-width:90%; max-height:90%;
  border-radius:15px; box-shadow:0 0 20px rgba(0,0,0,.8); animation:growIn .5s ease;
}
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes growIn{ from{ transform:scale(.8);} to{ transform:scale(1);} }
.full-screen-close{
  position:fixed; top:12px; right:12px;
  width:48px; height:48px; background:rgba(40,40,40,1);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .3s ease; box-shadow:0 10px 16px rgba(0,0,0,.3);
  z-index:calc(var(--z-exit)); color:#fff; font-size:22px; font-weight:bold;
}
.full-screen-close:hover{ background:rgba(75,75,75,1); }

/* Dots */
.slide-dot-wrapper{ margin-top:-3.3em; display:flex; justify-content:center; text-align:center; width:66%; flex-direction:column; z-index:10; }
.slide-dot-container{ margin-bottom:1%; }
.slide-counter{ margin-bottom:5px; color:var(--text-color); font-weight:500; font-size:1.2rem; }
.slide-description{ color:var(--text-color); font-weight:370; font-size:1.2rem; margin-top:2%; }
.dot{ cursor:pointer; height:.8em; width:.8em; margin:10px 2px; background-color:#bbb; border-radius:50%; display:inline-block; transition:background-color .6s ease; }
.dot.active,.dot:hover{ background-color:#717171; }

/* =========================================================
   E. RESPONSIVE GRID
   ========================================================= */
@media (max-width:1100px){
  #projects-container{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1100px){
  #left-stack{ position:static; width:auto; max-height:none; overflow:visible; margin-left:5%; margin-right:5%; }
  #projects-container{ grid-template-columns:1fr; margin-left:5%; margin-right:5%; }
}

/* ====== CARROUSEL MOBILE (=1100px) ====== */
@media (max-width:1100px){
  #projects-container{ display:none !important; }

  #mobile-carousel[hidden]{ display:none !important; }
  #mobile-carousel{
    display:block; margin:0 0 28px 0; padding:.1rem 0 60px; position:relative;
    perspective:1000px; perspective-origin:50% 50%;
    overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(black 0, black calc(100% - 2px), transparent 100%);
            mask-image:linear-gradient(black 0, black calc(100% - 2px), transparent 100%);
    scrollbar-gutter:stable both-edges;
  }
  #mobile-carousel::-webkit-scrollbar{ height:0 !important; background:transparent !important; }

  #mobile-carousel .mc-track{ display:flex; flex-flow:row nowrap; gap:clamp(16px,4vw,24px); align-items:stretch; padding:0 8%; height:100%; }
  #mobile-carousel .mc-slide{
    flex:0 0 auto; width:clamp(68vw,78vw,86vw); scroll-snap-align:center;
    transform-style:preserve-3d; transform-origin:center center;
    transition:transform .35s ease, opacity .35s ease, filter .35s ease; will-change:transform;
    opacity:.75; filter:saturate(.9);
    display:flex; flex-direction:column; height:100%;
  }
  #mobile-carousel .mc-thumb{
    flex:1 1 auto; width:100%; height:auto; object-fit:cover; border-radius:16px; box-shadow:0 12px 26px rgba(0,0,0,.44); background:#ddd;
  }
  #mobile-carousel .mc-caption{
    flex:0 0 auto; margin-top:8px; text-align:left; font-weight:700;
    font-size:clamp(.98rem,1rem + .4vw,1.1rem); color:var(--text-color); line-height:1.3; padding:0 2px; opacity:.95; user-select:none;
  }
  #mobile-carousel .mc-slide.is-center{ opacity:1; filter:none; }

  /* Frise réseaux fixée */
  body,#left-stack{ padding-bottom:calc(56px + env(safe-area-inset-bottom,0px)); }
  #social-icons{
    position:fixed; left:0; right:0; bottom:calc(8px + env(safe-area-inset-bottom,0px));
    z-index:1400; display:flex; align-items:center; gap:12px; padding:8px 12px; margin:0;
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; backdrop-filter:blur(6px); background:transparent;
  }
  #social-icons::-webkit-scrollbar{ display:none; }
  #social-icons .social-icon{ flex:0 0 auto; width:clamp(28px,6vw,36px); height:clamp(28px,6vw,36px); padding:0; }
  #social-icons .social-icon svg{ width:70%; height:70%; opacity:.95; }
}

/* ===================== BURGER + MENU MOBILE ===================== */
@media (min-width:1101px){
  .mm-wrap,
  #mobile-menu-toggle,
  #mobile-menu-panel {
    display:none !important;
  }

  #apropos-btn,
  #contact-btn {
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    text-align:center;
    line-height:1.2;
    padding:10px 16px;
  }

  #themeSwitch {
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
  }

  #themeSwitchMobile {
    display:none !important;
  }
}
@media (max-width:1100px){
  #apropos-btn,#contact-btn{ display:none !important; }
  #left-stack{ position:relative; }

  .mm-wrap{
    position:absolute !important;
    top:0 !important;
    right:4px !important;
    z-index:calc(var(--z-ui) + 10) !important;
    display:block !important;
  }
  .mm-toggle{
    position:absolute; top:10px; right:4px;
    width:42px; height:42px; border:none; border-radius:10px; background:transparent;
    display:grid; place-items:center; cursor:pointer; z-index:calc(var(--z-ui) + 10);
    transition:background .2s ease, transform .2s ease;
  }
  .mm-toggle:hover{ background:transparent; }
  .mm-toggle:active{ transform:scale(.98); background:transparent; }
  .mm-toggle .mm-bar{
    display:block; width:22px; height:2px; background:var(--btn-text);
    border-radius:2px; transition:transform .25s ease, opacity .2s ease, width .2s ease;
  }
  .mm-toggle .mm-bar:nth-child(2){ margin:5px 0; }
  .mm-toggle.is-open .mm-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .mm-toggle.is-open .mm-bar:nth-child(2){ opacity:0; width:0; }
  .mm-toggle.is-open .mm-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .mm-panel[hidden]{ display:none !important; }
  .mm-panel{
    position:fixed; top:100px; right:5%;
    width:min(280px,86vw); max-width:50vw; min-width:220px; padding:10px;
    background:var(--popup-bg); color:var(--popup-text); border-radius:14px; box-shadow:0 22px 40px rgba(0,0,0,.35);
    backdrop-filter:blur(10px);
    z-index:calc(var(--z-ui) + 5);
    display:grid; gap:8px; transform:translateY(-10px); opacity:0; pointer-events:none; transition:transform .25s ease, opacity .25s ease;
  }
  .mm-panel.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .mm-panel::after{
    content:""; position:absolute; top:-8px; right:16px; width:12px; height:12px;
    background:var(--popup-bg); transform:rotate(45deg); box-shadow:-2px -2px 4px rgba(0,0,0,.06); z-index:-1;
  }
  .mm-panel .btn{ font-size:1.1rem; font-weight:700; padding:12px 14px; }

  .mm-divider{ height:1px; background:rgba(0,0,0,.1); margin:6px 0 8px; }
  .dark-theme .mm-divider{ background:rgba(255,255,255,.12); }
  .mm-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .mm-label{ font-size:1rem; font-weight:600; color:var(--popup-text); }

  #themeSwitch{ display:none !important; }
  #themeSwitchMobile{ display:inline-flex !important; }
  #mobile-menu-panel .theme-pill{ --w:52px; --h:28px; }
}

@media (min-width:1101px){
  .mm-wrap,#mobile-menu-toggle,#mobile-menu-panel{
    display:none !important; pointer-events:none !important;
  }
}
#themeSwitch{ position:relative; z-index:5; pointer-events:auto; }
#mobile-menu-panel[hidden]{ display:none !important; pointer-events:none !important; }

/* ======= FILTRES MOBILE ======= */
@media (min-width:1101px){ #filters-drawer{ display:none !important; } }
@media (max-width:1100px){
  #myBtnContainer{ display:none !important; }

  #filters-toggle{
    position:fixed;
    top:90px;
    left:5px;
    z-index:var(--z-ui);
    display:inline-flex;
    align-items:center;
    justify-content:left;
    width:auto !important;
    max-width:none;
    white-space:nowrap;
    padding:0;
    border-radius:0 12px 12px 0;
    font-size:.8rem;
    line-height:1.2;
    background:rgba(0,0,0,0.25);
    color:var(--btn-text);
    border:1px solid rgba(255,255,255,.22);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    box-shadow:0 3px 10px rgba(0,0,0,.15);
  }
  #filters-toggle:hover{ background:rgba(0,0,0,0.35); box-shadow:0 6px 18px rgba(0,0,0,.25); }
  #filters-toggle[aria-expanded="true"]{ background:var(--btn-active-bg); color:var(--btn-active-text); border-color:transparent; }
  html.dark-theme #filters-toggle{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,.18); }

  #filters-drawer{
    position:fixed; inset:0 auto 0 0; width:auto; background:transparent;
    z-index:calc(var(--z-ui) - 1); pointer-events:none;
  }
  #filters-drawer[hidden]{ display:none !important; }
  #filters-drawer.open{ pointer-events:auto; }
  #filters-drawer .filters-drawer-inner{
    width:min(44vw,240px); min-width:140px; margin-top:140px; height:calc(100vh - 60px);
    padding:4px 2px 6px; display:flex; flex-direction:column; gap:3px;
    background:transparent; overflow-y:auto; overscroll-behavior:contain;
    transform:translateX(-12px); opacity:.98; transition:transform .2s ease, opacity .2s ease;
  }
  #filters-drawer.open .filters-drawer-inner{ transform:translateX(0); }
  #filters-drawer .btn{
    background:var(--btn-bg-drawer); color:var(--btn-text);
    border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    padding:6px 10px; border-radius:12px; font-size:.82rem; line-height:1.2; text-align:left;
    width:auto; max-width:100%; white-space:normal;
  }
  html.dark-theme #filters-drawer .btn{ background:var(--btn-bg-drawer); border-color:rgba(255,255,255,.18); }
  #filters-drawer .btn:hover{ background:rgba(0,0,0,0.35); }
  #filters-drawer .btn.active{ background:var(--btn-active-bg); color:var(--btn-active-text); border-color:transparent; }
}
.filters-fab{ display:none !important; }

/* POPUP PROJET — MOBILE */
@media (max-width:1100px){
  #pop-upoverlay{
    background:rgba(0,0,0,.55);
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  }
  #pop-upoverlay .popup-content{
    inset:10px !important; width:auto; height:auto; position:fixed;
    top:10px; left:10px; right:10px; bottom:10px; transform:none !important;
    display:flex; flex-direction:column; gap:10px; border-radius:16px; padding:10px;
    overflow:auto; padding-top:80px !important;
  }
  #pop-upoverlay .titrepopup{
    position:absolute; top:20px; left:10px; right:10px; z-index:calc(var(--z-overlay) + 1);
    margin:0 !important; border-radius:12px; background:var(--btn-bg); color:var(--btn-text);
    font-size:clamp(1.3rem,2.6vw,1.8rem); padding:.35em .6em;
  }
  #pop-upoverlay .popup-exit{
    width:28px; height:28px; top:5px; right:5px;
    box-shadow:0 6px 12px rgba(0,0,0,0.25);
  }
  #pop-upoverlay .popup-exit-x{ font-size:18px; font-weight:bold; color:var(--btn-text); }

  #pop-upoverlay .slider-wrapper{
    order:0;
    width:100%;
    height:60vh;
    margin-top:0;
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }
  #pop-upoverlay .slide-container{
    margin-top:8px;
    height:auto !important;
    aspect-ratio:16/9;
  }
  #pop-upoverlay .slide-img, #pop-upoverlay video.slide-img{ border-radius:12px; }
  #pop-upoverlay .prev,#pop-upoverlay .next{ width:48px; height:48px; font-size:24px; background-color:rgba(200,200,200,0.9); }

  #pop-upoverlay .slide-dot-wrapper{
    width:100%;
    margin-top:6px;
    flex:0 0 auto;
    min-height:80px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }
  #pop-upoverlay .dot{ width:10px; height:10px; }

  #pop-upoverlay .slide-description{
    font-size:0.95rem;
    line-height:1.2;
    max-height:2.4em;
    overflow:hidden;
    margin-top:6px;
  }

  #pop-upoverlay .popup-left{ order:1; width:100%; gap:8px; }
  #pop-upoverlay .popup-info-container{
    display:grid; grid-template-rows:auto auto auto; gap:0;
    border-top:1px solid rgba(0,0,0,.9); border-bottom:1px solid rgba(0,0,0,.9);
    overflow:visible;
  }
  .dark-theme #pop-upoverlay .popup-info-container{
    border-top-color:rgba(255,255,255,.9); border-bottom-color:rgba(255,255,255,.9);
  }
  #pop-upoverlay .popup-info-container > *{ padding:8px 4px; border-top:1px solid currentColor; }
  #pop-upoverlay .popup-info-container > *:first-child{ border-top:none; }
  #pop-upoverlay .popup-date{ font-size:clamp(1rem,1.8vw,1.2rem); font-weight:700; }
  #pop-upoverlay .popup-techniques{ gap:6px; justify-content:flex-start; }
  #pop-upoverlay .technique-item{ padding:4px 8px; border-radius:10px; font-size:.85rem; background:var(--btn-bg); color:var(--btn-text); }
  #pop-upoverlay .popup-link a{ font-weight:700; text-decoration:none; color:var(--lien); }
  #pop-upoverlay .popup-link a:hover{ text-decoration:underline; }

  #pop-upoverlay .scrollerpopup{
    flex:0 0 auto;
    max-height:none;
    overflow:visible;
    padding:12px;
    padding-top:8px;
    padding-bottom:40px;
    box-sizing:border-box;
  }
  #pop-upoverlay .scrollerpopup p{ font-size:1rem; line-height:1.45; }

  #projects-container{ display:none !important; }
}

/* ===== PAGE D’ARRIVEE — MOBILE ===== */
@media (max-width:1100px){
  html,body{ height:100%; overflow:hidden; }

  #mobile-carousel{
    position:fixed; left:0; right:0; top:var(--top-anchor); bottom:calc(var(--social-h) + 8px);
    overflow-y:hidden; overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  #mobile-carousel .mc-track{ height:100%; align-items:stretch; }
  #mobile-carousel .mc-slide{ display:flex; flex-direction:column; height:100%; }
  #mobile-carousel .mc-thumb{
    flex:1 1 auto; width:100%; height:auto; object-fit:cover;
    border-radius:16px; box-shadow:0 12px 26px rgba(0,0,0,.44); background:#ddd;
  }
  #mobile-carousel .mc-caption{ flex:0 0 auto; margin-top:8px; }
}

/* Petite optimisation accessibilité / perf */
@media (prefers-reduced-motion:reduce){
  #myBtnContainer{ transition:none; }
}

/* =================== POLICES GLOBALES =================== */
html, body{
  font-family: var(--font-body);
}
h1{
  font-family: var(--font-heading);
}
h2{
  font-family: var(--font-accent);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
h3, h4, h5, h6{
  font-family: var(--font-body);
}
p{ font-family: var(--font-body); }
a{
  font-family: var(--font-body);
  font-style: italic;
}
.btn,
#filters-toggle,
#apropos-btn,
#contact-btn,
#dark-btn{
  font-family: var(--font-body);
}

/* Zones “identité / titres UI” */
#PrenomNom,
#ArditoKevin,
.titrepopup{
  font-family: var(--font-heading) !important;
}

/* Popups : forcer la police de base */
#about-popupoverlay .popup-content,
#contact-popupoverlay .popup-content,
#pop-upoverlay .popup-content{
  font-family: var(--font-body) !important;
}
#about-popupoverlay .titrepopup,
#contact-popupoverlay .titrepopup,
#pop-upoverlay .titrepopup{
  font-family: var(--font-heading) !important;
}

/* Étiquettes/puces techniques et légendes */
.technique-item,
.popup-date,
.popup-link a,
.slide-counter,
.slide-description,
#mobile-carousel .mc-caption{
  font-family: var(--font-body);
}

/* Sécurité : héritage de font */
#about-popupoverlay .popup-content *:not(.titrepopup),
#contact-popupoverlay .popup-content *:not(.titrepopup),
#pop-upoverlay .popup-content *:not(.titrepopup){
  font-family: inherit;
}

/* ======= A PROPOS : bulle avatar + prénom + 3 colonnes CV ======= */
@media (min-width:1101px){

  #about-popupoverlay .popup-content.about-popup{
    display:grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
    column-gap:18px;
    align-items:stretch;
  }

  /* Colonne gauche : header + bio */
  #about-popupoverlay .about-left{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  /* Header = avatar + nom */
  #about-popupoverlay .about-header{
    display:flex;
    align-items:center;
    gap:12px;
  }

  /* Bulle avatar (ronde) */
  #about-popupoverlay .about-avatar{
    --size: 200px;
    width: var(--size);
    height: var(--size);
    border-radius: 999px;
    overflow: hidden;
    background: var(--popup-scrollbox-projet);
    box-shadow: 0 12px 24px rgba(0,0,0,.4);
    padding: 0;
    position: relative;
  }
  #about-popupoverlay .about-avatar #about-slide-container{
    margin-top:0;
    height:100%;
  }
  #about-popupoverlay .about-avatar #about-slide-container .custom-slider{
    height:100%;
  }
  #about-popupoverlay .about-avatar #about-slide-container img,
  #about-popupoverlay .about-avatar #about-slide-container video{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:999px;
  }
  #about-popupoverlay .about-avatar .prev,
  #about-popupoverlay .about-avatar .next{
    width:28px;
    height:28px;
    font-size:16px;
    background:rgba(0,0,0,0.45);
  }
  #about-popupoverlay .about-avatar .slide-dot-wrapper{
    margin-top:4px;
    width:100%;
  }
  #about-popupoverlay .about-avatar .slide-counter,
  #about-popupoverlay .about-avatar .slide-description{
    font-size:.7rem;
    text-align:center;
  }

  /* Nom dans A propos */
  #about-popupoverlay .about-name {
    font-family: "Bebas Neue", sans-serif !important;
    font-weight: 400;
    font-size: 2.3rem !important;
    letter-spacing: .02em;
    text-transform: uppercase;
    background: var(--btn-bg);
    color: var(--btn-text);
    border-radius: 15px;
    padding: 0.3em 0.6em;
    box-shadow: 1px 25px 45px rgba(0,0,0,0.5);
    text-align: center;
    display: inline-block;
  }

  #about-popupoverlay .about-roles{
    margin:4px 0 0;
    padding:0;
    list-style:none;
    font-size:.9rem;
    line-height:1.3;
  }

  /* Bio colonne gauche */
  #about-popupoverlay .about-bio{
    flex:1 1 auto;
    max-height:calc(80vh - 280px);
    max-width:none;
    overflow:auto;
    background:var(--popup-scrollbox-projet);
    border-radius:16px;
    padding:16px 20px;
  }

  /* Colonne droite (3 CV) */
  #about-popupoverlay .about-right{
    display:flex;
    flex-direction:column;
  }
  #about-popupoverlay .about-cv-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:16px;
    height:55%;
  }
  #about-popupoverlay .about-cv-col{
    background:var(--popup-scrollbox-projet);
    border-radius:16px;
    padding:14px 16px;
    overflow:auto;
    font-family:var(--font-body);
    font-size:.9rem;
  }
  #about-popupoverlay .about-cv-col h3{
    margin-top:0;
    font-family:var(--font-heading);
    font-size:1.1rem;
  }
  #about-popupoverlay .about-cv-col ul{
    padding-left:1.2em;
    margin:0;
  }
}
/* ===== Fix police de la CROIX des popups ===== */
#about-popupoverlay .popup-exit-x,
#contact-popupoverlay .popup-exit-x,
#pop-upoverlay .popup-exit-x {
  font-family: var(--font-body);   /* Lato comme le reste de l’UI */
  font-size: 14px;
  font-weight: 700;
}

/* ===== Fix police des descriptions / compteurs de slides ===== */
.slide-counter,
.slide-description,
#about-popupoverlay .about-avatar .slide-counter,
#about-popupoverlay .about-avatar .slide-description {
  font-family: var(--font-body);   /* pareil : Lato */
  font-size: 1.2rem;               /* moins énorme */
  font-weight: 400;
  font-style: normal;
}

/* Colonnes CV belles, scrollables et respirantes */
#about-popupoverlay .about-cv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

#about-popupoverlay .about-cv-col {
    background: var(--popup-scrollbox-projet);
    border-radius: 14px;
    padding: 16px 18px;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px rgba(0,0,0,.25);
}

/* Titres des colonnes */
#about-popupoverlay .about-cv-col h3 {
    margin-top: 2;
    margin-bottom: .28em;
    font-family: var(--font-heading);
    font-size: 1.45rem;
}

/* Listes propres + respirantes */
#about-popupoverlay .about-cv-col ul {
    margin: 0;
    padding-left: 1.1em;
    display: flex;
    flex-direction: column;
    gap: .35em;   /* espace entre chaque ligne */
}

#about-popupoverlay .about-cv-col li {
    line-height: 1.35;
}
/* Descendre légèrement les trois colonnes CV */
#about-popupoverlay .about-cv-grid {
    margin-top: 13.2rem; 
}
/* Zone des deux boutons de téléchargement */
#about-popupoverlay .about-downloads {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* Styles des boutons "Télécharger" */
#about-popupoverlay .dl-btn {
    background: var(--btn-bg);
    color: var(--btn-text);
    padding: 10px 18px;
	
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25);
    transition: background 0.3s ease, transform 0.2s ease;
	margin-bottom: 80px;
	font-style: normal !important;
    font-weight: 700;
}

#about-popupoverlay .dl-btn:hover {
    background: var(--btn-hover-bg);
    transform: scale(1.04);
}

#about-popupoverlay .dl-btn:active {
    background: var(--btn-active-bg);
    color: var(--btn-active-text);
    transform: scale(1);
}

/* ====================== */
/*  SCROLLBARS MINIMALIST */
/* ====================== */

/* Chrome, Edge, Safari (WebKit) */
.scrollerpopup::-webkit-scrollbar,
.about-cv-col::-webkit-scrollbar,
.about-bio::-webkit-scrollbar {
    width: 6px;          /* finesse élégante */
    background: transparent !important; /* enlève le fond */
}

.scrollerpopup::-webkit-scrollbar-track,
.about-cv-col::-webkit-scrollbar-track,
.about-bio::-webkit-scrollbar-track {
    background: transparent !important; /* plus de fond gris */
}

.scrollerpopup::-webkit-scrollbar-thumb,
.about-cv-col::-webkit-scrollbar-thumb,
.about-bio::-webkit-scrollbar-thumb {
    background: rgba(120,120,120,0.45);   /* barre chic, semi-transparente */
    border-radius: 10px;
}

.scrollerpopup::-webkit-scrollbar-thumb:hover,
.about-cv-col::-webkit-scrollbar-thumb:hover,
.about-bio::-webkit-scrollbar-thumb:hover {
    background: rgba(120,120,120,0.7);
}

/* Firefox */
.scrollerpopup,
.about-cv-col,
.about-bio {
    scrollbar-width: thin;                /* fin */
    scrollbar-color: rgba(120,120,120,0.5) transparent !important;
}
/* ============================= */
/*  A PROPOS : enlever navigation */
/* ============================= */

/* Flèches dans la bulle */
#about-popupoverlay .about-avatar .prev,
#about-popupoverlay .about-avatar .next {
    display: none !important;
}

/* Points (dots) */
#about-popupoverlay .about-avatar .slide-dot-container,
#about-popupoverlay .about-avatar .dot {
    display: none !important;
}

/* Compteur (ex : 1 / 3) */
#about-popupoverlay .about-avatar .slide-counter {
    display: none !important;
}

/* Description sous le portrait */
#about-popupoverlay .about-avatar .slide-description {
    display: none !important;
}

/* Wrapper en dessous (supprime toute la zone inutile) */
#about-popupoverlay .about-avatar .slide-dot-wrapper {
    display: none !important;
}
/* === A PROPOS --- layout mobile propre (<=1100px) === */

/* ============================= */
/*  A PROPOS : enlever navigation */
/* ============================= */

/* Flèches dans la bulle */
#about-popupoverlay .about-avatar .prev,
#about-popupoverlay .about-avatar .next {
    display: none !important;
}

/* Points (dots) */
#about-popupoverlay .about-avatar .slide-dot-container,
#about-popupoverlay .about-avatar .dot {
    display: none !important;
}

/* Compteur (ex : 1 / 3) */
#about-popupoverlay .about-avatar .slide-counter {
    display: none !important;
}

/* Description sous le portrait */
#about-popupoverlay .about-avatar .slide-description {
    display: none !important;
}

/* Wrapper en dessous (supprime toute la zone inutile) */
#about-popupoverlay .about-avatar .slide-dot-wrapper {
    display: none !important;
}

/* === A PROPOS --- layout mobile (<=1100px) : clean + scroll + centrage === */
@media (max-width:1100px) {

  /* Overlay about avec léger fond sombre, comme les projets */
  #about-popupoverlay {
    background: rgba(0,0,0,0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  /* Carte principale A PROPOS : fixe, avec scroll interne */
  #about-popupoverlay .popup-content.about-popup {
    /* propriétés "clean" de base */
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    /* propriétés "scroll" prioritaires */
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    height: auto !important;
    transform: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 16px !important;
    padding: 10px !important;
  }

  /* Colonne gauche (header + bio) */
  #about-popupoverlay .about-left {
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
  }

  /* Bio */
  #about-popupoverlay .about-bio {
    width: 100% !important;
    margin: 8px 0 12px 0 !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    max-height: none !important;
  }

  /* Colonne droite (les 3 CV) */
  #about-popupoverlay .about-right {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
  }

  /* Grille des CV -> une colonne verticale qui prend toute la largeur */
  #about-popupoverlay .about-cv-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Chaque bloc CV */
  #about-popupoverlay .about-cv-col {
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Boutons sous les CV */
  #about-popupoverlay .about-buttons {
    width: 100% !important;
    margin: 16px 0 4px 0 !important; /* valeur "scroll" gardée en priorité */
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
  }

  /* Header centré */
  #about-popupoverlay .about-header {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 0 14px 0 !important;
  }

  /* Avatar centré */
  #about-popupoverlay .about-avatar {
    margin: 0 auto !important;
  }

  /* Nom centré et largeur auto */
  #about-popupoverlay .about-name {
    text-align: center !important;
    display: inline-block !important;
    margin: 0 auto !important;
  }

  /* Roles (si présents) centrés aussi */
  #about-popupoverlay .about-roles {
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}