/* =====================================================
   RESET
===================================================== */

/* html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; list-style: none; text-decoration: none; quotes: none;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
*, *::before, *::after  {box-sizing: border-box; margin: 0; padding: 0;} */


/* ========== RESET (soft, moderne) ========== */

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

body { min-height: 100vh;}
img, picture, video, canvas, svg {display: block; max-width: 100%;}
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
input, button, textarea, select { font: inherit;   color: inherit; }
ul, ol { padding-left: 1.2em; }
nav ul, nav ol { list-style: none; padding-left: 0; }
a { color: inherit; /* text-decoration-style: wavy;  text-decoration-thickness: 1.5px; text-underline-offset: .4em; */ text-decoration: none; } 
a, button { cursor: pointer; }




/* =====================================================
   VARIABLES
===================================================== */



:root {
      interpolate-size: allow-keywords;
      
      --x: 16px;
      --25x: calc(var(--x) * 0.25);       
      --50x: calc(var(--x) * 0.5);
      --75x: calc(var(--x) * 0.75);
      --85x: calc(var(--x) * 0.85);
      --125x: calc(var(--x) * 1.25);
      --150x: calc(var(--x) * 1.5);
      --200x: calc(var(--x) * 2);
      --250x: calc(var(--x) * 2.5);
      --300x: calc(var(--x) * 3);
      --400x: calc(var(--x) * 4);
      --500x: calc(var(--x) * 5);
      --600x: calc(var(--x) * 6);
      --800x: calc(var(--x) * 8);
      --1000x: calc(var(--x) * 10);

      
      --padding-inline : var(--x);
      --content-max-width : calc(var(--x) * 80 );
      
      --mb-h1: clamp(var(--x), 2.2vw, var(--150x));
      --mb-h2: clamp(var(--50x), 1.8vw, var(--x));
      --mb-h3: clamp(var(--25x), 1.2vw, var(--50x));
      
      --c-1:  #10261D;
      --c-2:  #173126;
      --c-3:  #214637;
      --c-4:  #375749;
      --c-5:  #375749;
      --c-6:  #406d3b;
      --c-7:  #7EB479;
      --c-8:  #7EB479;
      --c-9:  #0BFB9B;
      --c-10:  #b4cfb1;
    
      --n-1: #ccc9c5;
      --n-2: #DDDDDD;
      --n-3: #E5E5E5;
      --n-4: #f5f5f5;
      --n-5: #ffffff;
      
      --picto-size: 30px;
      
}



html {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-size: var(--x);
      color: var(--c-1);
      line-height: 1.5;
      scroll-behavior: smooth;
}



/* =====================================================
   BACKGROUNDS & COLORS
===================================================== */


.bg-dark { background-color: var(--c-1); font-weight: 300;}
.bg-medium { background-color: var(--c-3); font-weight: 300;}
.bg-gradient-dark {background: linear-gradient(21deg, var(--c-1), var(--c-4)); }
.bg-gradient-medium {background: linear-gradient(21deg, var(--c-6), var(--c-7));}
.bg-dark > *, .bg-medium > *, .bg-gradient-dark > *, .bg-gradient-medium > * {color: var(--n-5);}
.bg-neutral-1 { background-color: var(--n-1); color: var(--c-1)} 
.bg-neutral-2 { background-color: var(--n-2); color: var(--c-1)} 
.bg-neutral-3 { background-color: var(--n-3); color: var(--c-1)}  
.bg-white { background-color: var(--n-4); color: var(--c-1)}  

.c-green-dark {color: var(--c-6); }
.c-green-medium {color: var(--c-7); }
.c-green-light {color: var(--c-9);}
.c-green-xlight {color: var(--c-10);}
.c-green-light strong {color: white;}
   

/* =====================================================
   FONTS
===================================================== */   
   
h1, h2, h3, h4, h5, .t-big, .t-edito {font-family: "Poppins", sans-serif; line-height: 130%; text-wrap: balance; font-weight: 500; }

.t-edito, .t-big {font-size: var(--125x); text-wrap: balance; font-weight: 300; opacity: 0.75; }
.t-edito {font-size: var(--200x); }
strong {font-weight: 700;}
.t-center {text-align: center;}

/* = = = = = = == = =     ESPACEMENT SPECIFIQUES      = = = = = = = = = = = */

h1 { font-size: clamp(34px, 5vw, var(--500x)); letter-spacing: -0.05em; margin-bottom: var(--mb-h1); line-height: 110%; }
h2  { font-size: clamp(24px, 3vw, var(--250x)); margin-bottom: var(--mb-h2);}
h3 { font-size: clamp(18px, 2vw, var(--150x)); font-weight: 600; margin-bottom: var(--mb-h3); }
h5 { font-size: clamp(14px, 2vw, var(--x)); font-weight: 600; }

p, .t-big {  margin-bottom: var(--mb-h3); }

div > * + h3 {margin-top: var(--200x);}

[class^="grid-"] :is(h1, h2, h3, .t-big, p):last-child {   margin-bottom: 0; }



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

[class*="cta-"]  {
  display: inline-flex;   align-items: center;   justify-content: center;   gap: var(--x);
   padding: var(--75x) var(--x); border-radius: var(--200x);  border: 1px solid transparent; font-family: "Poppins", sans-serif; font-size: var(--85x); transition: all ease-in-out 0.3s;
  background-color: var(--c-9);   color: var(--c-1);   font-weight: 500; line-height: 1.2; text-decoration: none; opacity: 1;
}

.cta-light {   background-color: var(--n-5); }
.cta-light:hover {   background-color: var(--c-7);  }
.cta-dark {   background-color: var(--c-1);   color: var(--n-5); }

.cta-2 {border-color: var(--c-9); background-color: transparent; color: var(--c-9); }
.cta-2:hover { background-color: var(--c-9); color: var(--c-1);}
.cta-2.cta-light {   border-color: var(--n-5); color: var(--n-5);} 
.cta-2.cta-light:hover { background-color: var(--n-5); color: var(--c-1);}
.cta-2.cta-dark {   border-color: var(--c-1); color: var(--c-1);} 
.cta-2.cta-dark:hover { background-color: var(--c-1); color: var(--n-5);}

.cta-mini {padding-block: var(--50x); font-size: var(--75x);}

[class*="cta-picto-"]::after  {
  content:"";   width: 20px; aspect-ratio: 1/1;   flex: 0 0 auto;   background-color: currentColor;
  -webkit-mask: var(--picto-url) no-repeat center / contain; mask: var(--picto-url) no-repeat center / contain;}

.cta-picto-phone { --picto-url: url("../media/picto_phone.svg"); }
.link {text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .4em; text-decoration-color: rgba(255, 255, 255, 0.3); transition: text-decoration-color linear 0.2s;}
.link:hover {text-decoration-color: rgba(255, 255, 255, 1);}

/* = = = = = = == = =     PICTO DANS LES H3    = = = = = = = = = = = */


h3:has([class*="icon-"]) {   display: inline-flex;   gap: var(--150x);   align-items: center; }

[class*="icon-"] { aspect-ratio: 1 / 1;   padding: clamp(4px, 2vw, 8px);
   display: inline-flex;   align-items: center;   justify-content: center;   border: 1px solid var(--c-9); border-radius: 6px; margin-top: var(--25x); 
}

[class*="icon-"]::before {
  content: "";   width: var(--picto-size);   height: var(--picto-size);   background-color: var(--c-9);
  -webkit-mask: var(--icon-url) no-repeat center / contain; 
  mask: var(--icon-url) no-repeat center / contain; 
}

.icon-phone { --icon-url: url("../media/picto_phone.svg"); }

.icon-main-1 { --icon-url: url("../media/picto-engrenage.svg"); }
.icon-main-2 { --icon-url: url("../media/picto-reseau.svg"); }
.icon-main-3 { --icon-url: url("../media/picto-cle.svg"); }
.icon-main-4 { --icon-url: url("../media/picto-custom.svg"); }
.icon-main-5 { --icon-url: url("../media/picto-drapeau.svg"); }
.icon-main-6 { --icon-url: url("../media/picto-aide.svg"); }
.icon-main-7 { --icon-url: url("../media/picto-performance.svg"); }
.icon-main-8 { --icon-url: url("../media/picto-securite.svg"); }
.icon-main-9 { --icon-url: url("../media/picto-alerte.svg"); }
.icon-main-10 { --icon-url: url("../media/picto-strategie.svg"); }




/* =====================================================
   STRUCTURE
===================================================== */





header, section, footer {
   display: grid;
   grid-template-columns: 
       minmax(var(--padding-inline), 1fr) 
       [content-start] min(100% - (var(--padding-inline) * 2 ), var(--content-max-width)) [content-end] 
       minmax(var(--padding-inline), 1fr);
   row-gap: var(--300x);
   padding-block: var(--500x);   
}

header > *, section > *, footer > * {
   grid-column: content-start / content-end;
   /* border: 1.5px dashed blueviolet; */
}



[class*="grid-"] {
   display: grid;
   gap: var(--150x);
   /* padding: var(--x); */
   border-radius: var(--50x);
}

[class*="grid-"] > * {
  /* border: 1px solid orangered; */
  border-radius: var(--50x);
  /* padding: var(--150x); */
  display: flex;
  gap: clamp(var(--x), 1vw, var(--150x));
  flex-direction: column;
  align-items: flex-start;
}


.grid-11 {grid-template-columns: 1fr;  }
.grid-12-12 {   grid-template-columns: repeat( 2, 1fr);  }
.grid-13-13-13 {   grid-template-columns: repeat( 3, 1fr); }
.grid-14-14-14-14 {   grid-template-columns: repeat( 4, 1fr); }
.grid-15-15-15-15-15 {   grid-template-columns: repeat( 5, 1fr); }
.grid-13-23 {  grid-template-columns: 1fr 2fr;  }
.grid-23-13 {    grid-template-columns: 2fr 1fr;  }

.grid-aabc, .grid-abcc {   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.grid-aabc> :first-child, .grid-abcc> :last-child { grid-column: 1 / -1; }

.grid-aaaab {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-aaaab > :nth-child(5) {   grid-column: 1 / -1; flex-direction: row;  justify-content: stretch; }
.grid-aaaab > :nth-child(5) div { flex-grow: 1;  align-items: flex-start;}


.grid-aabc-deff {   grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-aabc-deff > :nth-child(1), .grid-aabc-deff > :nth-child(6) {   grid-column: span 2; }

.no-gap { gap: 0; }
.big-gap {gap:  var(--500x);}
.medium-gap {gap:  var(--250x); }


.small-gap {gap: var(--x);}

.card, .side-link {
  padding: var(--300x);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--150x);
  border-radius: var(--50x);
}

.card div {
  display: flex;
  flex-direction: column;
  gap : var(--50x);
}

.card .sub-grid-12-12 { display: grid; width: 100%; min-width: 100%; grid-template-columns: repeat( 2, 1fr); gap: var(--300x);  }


.side-link {
  padding: 0;
  padding-left: var(--150x);
  border-left: 1px solid var(--c-9);
  gap: var(--200x);
  border-radius: 0;
  justify-content: flex-start;
}


.outline {
  border: 1px solid var(--c-1);
}

.bg-dark .outline {
  border: 1px solid var(--c-9);
}

.flow {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--x);
}

.card .flow-top {justify-content: flex-start; gap: var(--x);}
.card .flow-center {justify-content: center; gap: var(--150x);}

.shado {
   box-shadow: 5px 5px 10px 0 rgba(18, 2, 2, 0.1), -5px -5px 10px 0 rgba(255, 255, 255, 0.4);   
   justify-content: center;
}




header {background-size: cover; background-position: center center; position: relative;}
header > * {z-index: 1;}



.dark-mode-menu header { color: var(--n-5); }
.dark-mode-menu header::after {content: ""; inset: 0; position: absolute; background-color: rgba(0, 0, 0, 0.3); z-index: 0;}
.dark-mode-menu .ariane li, .dark-mode-menu .ariane li a, .menu-1 .ariane li::after, .menu-0 .ariane li a, .menu-0 .ariane li::after  {color: var(--n-5);}
header .intro {   width: 80%;   gap: var(--300x);   padding-block: var(--800x); }
header .intro p {width: 60%; }

.menu-0 .intro {padding-block: var(--1000x) var(--800x); margin: auto; gap: var(--125x);}
.menu-0 .intro.flow { text-align: center; align-items: center; }

.dark-mode-menu header { position: relative;}
.dark-mode-menu header::before {content: ''; background: linear-gradient(to bottom,   rgba(0, 0, 0, 0.2) 50%,   rgba(0, 0, 0, 0) 100% ); display: block; height: 300px; width: 100%; z-index: 2; position: absolute; top: 0; left: 0; }


header .intro-center { gap: var(--200x);   padding-block: var(--400x); align-items: center; width: 80%; margin: 0 auto; text-align: center;}


.image-cover {   padding: 0;  overflow: hidden;  background-position: center center; background-size: cover;}



hr {   border: none;   height: 0;   border-top: 1px solid rgba(0, 0, 0, 0.2); }
.dark-mode-menu  hr {border-top: 1px solid rgba(255, 255, 255, 0.7);}


.ariane { display: flex; width: 100%; flex-wrap: wrap; padding: 0; padding-block: var(--x);  z-index: 3;}
.ariane li {list-style: none; }
.ariane li::after {    content: '›';    margin-inline: 5px;	    font-size: 12px;    color: var(--c-1);    opacity: 0.5;  }
.ariane li:last-child::after {    content: none;     margin: 0;  }
.ariane li, .ariane li a  {    display: inline;    line-height: 130%;   font-size: var(--75x);     font-weight: 500;    opacity: 0.75;
   transition: all ease-out 0.2s; }
.ariane li:last-child a {    opacity: 1;  }
.ariane li a:hover  {    opacity: 1;    font-size: 600;  }


*.temp {color: rgb(230, 0, 108) !important; font-style: italic;}
*.temp2 {color: blue !important;}


ul.green-bullet{ padding: 0; display: flex; flex-direction: column; gap: 8px; justify-content: space-between; }

ul.green-bullet li {
  position: relative;
  padding-left: 30px;
  list-style: none;
  line-height: 130%;
}

ul.green-bullet li::before {
  content: "";
  display: block;
  width: 18px;
  aspect-ratio: 1 / 1;
  position: absolute;
  top:3px;
  left: 0;
  background-image: url(../media/picto_green_bullet.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  }

.half {
  width: calc(100% - 300px);
}



.deco-star {
  background-image: url(../media/shado-star.png); 
  background-size: 200px;
  background-position: center right 50px;
  background-repeat: no-repeat;
}


.citation {   position: relative;   overflow: hidden;   background-size: cover;   background-position: center center; background-repeat: no-repeat; }
.citation * { z-index: 2; }
.citation q {   font-size: var(--125x);   font-weight: 200;   font-style: italic; }
.citation::before {   content: "";  inset: 0;  position: absolute; background-color: rgba(0, 0, 0, 0.3); }
.citation p { color: var(--c-9);}
.citation p em {font-size: var(--75x); color: white; font-style: normal;}


.fille-card p { color: var(--n-2); font-weight: 300;}
.fille-card span {   display: block;   width: 45px;   aspect-ratio: 1 / 1;   background-size: contain;   background-repeat: no-repeat;   background-position: center center; }
.fille-card .card {padding: var(--150x); }

.card1 #card1, .card2 #card2, .card3 #card3, .card4 #card4, .card5 #card5  {display: none;}

#card1 span,
#card2 span,
#card3 span,
#card4 span,
#card5 span {background-image: url(../media/picto_cyber_2.svg); background-repeat: no-repeat;  width: 32px; }


.liste-solutions { padding: 0;   width: 100%; }
.liste-solutions li { list-style: none; width: 100%; }

.liste-solutions li a {
  position: relative;
  display: inline-flex;
  width: 100%;
  font-weight: 400;
  border-bottom: 1px solid var(--c-9);
  background-color: transparent;
  padding-block: var(--x);
  padding-left: 0;
  padding-right: 50px;
  transition: all linear 0.2s;
  line-height: 120%;
  background-image: url(../media/picto_fleche.svg);
  background-repeat: no-repeat;
  background-position: center right;
  opacity: 0.9;
  background-size: 20px;

  
}


.liste-solutions li a:hover {   background-color: rgba(255, 255, 255, 0.1);    background-position: center right var(--50x); opacity: 1;   padding-left: 10px;
  padding-right: 40px;}

.bg-neutral-3 .liste-solutions li a, .bg-neutral-2 .liste-solutions li a {   border-bottom: 1px solid var(--n-1);     background-image: url(../media/picto_fleche_green.svg); }
.bg-neutral-3 .liste-solutions li a:hover, .bg-neutral-2 .liste-solutions li a:hover  {   background-color: rgba(126, 180, 121, 0.2);  }


.custom-cyber {
  background-color: rgba(0, 0, 0, 0.15);
  font-weight: 300;
  border: 1px solid var(--n-2);
}

.custom-cyber div { display: flex;  gap: var(--x); flex-wrap: wrap;}

.custom-cyber h3 {
  background-image: url(../media/picto_cyber.svg);
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 25px;
  padding-left: 40px;
}


footer > div  { display: flex; gap: var(--200x); justify-content: space-between;}

footer h5 {margin-bottom: 10px;}
footer a img {width: 100%;}

footer a.logo-footer {display: block; width: 150px;}
footer ul {display: flex; flex-direction: column; gap: 0px; padding-left : 14px;}
footer ul li {line-height: 120%; margin-bottom: 5px; line-height: 100%;}
footer ul li a { opacity: 0.7; transition: opacity ease-in-out 0.2s; font-size: var(--85x); }
footer ul li a:hover { opacity: 1}

footer .iso { width: 100px; aspect-ratio: 1/2; min-width: 100px; background-image: url(../media/Picto_iso.svg); background-repeat: no-repeat; background-size: 100%; }



/* Item */
details.faq {
  border-bottom: 1px solid var(--n-1);
  background: transparent;
  background-color: var(--n-5);
  border-radius: 0;
  gap: 0;
  padding-bottom: var(--150x) ;

}

details.faq[open] { background-color: var(--n-4); }

details.faq summary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--150x)  var(--150x) 0;
  cursor: pointer;
  font-weight: 500;
  line-height: 1.5;
  gap: var(--x);
}

details.faq summary::-webkit-details-marker{ display: none; }
details.faq summary::marker{ content: ""; }

details.faq summary::after{
  content: "▾";
  flex: 0 0 auto;
  font-size: 1.1em;
  line-height: 1;
  opacity: .9;
  transition: transform 180ms linear, opacity 180ms linear;
}

details.faq[open] summary::after{
  transform: rotate(180deg);
  opacity: 1;
}

details.faq div{
  padding: var(--x) var(--200x) 0 ;
  color: var(--c-3);  
  font-weight: 300;
}


.portrait-god {
  gap:0;
  border-radius: var(--50x);
  overflow: hidden;
}

.portrait-god  div {border-radius: 0;}
.portrait-god  div.card {justify-content: center; gap:  0; }
.portrait-god  .image-cover {aspect-ratio: 1 / 1;}


.cabinet-paire { gap:0; border-radius: var(--125x);   overflow: hidden; }
.cabinet-paire   div {border-radius: 0;}
.cabinet-paire div.card { padding-block: var(--500x); } 


.team-portrait {aspect-ratio: 1/1.8; background-size: cover; background-position: center center; justify-content: flex-end; overflow: hidden;}

.team-portrait div  { width: 100%;  padding: var(--150x); background: linear-gradient(   to top,   rgba(0, 0, 0, 0.3) 50%,   rgba(0, 0, 0, 0) 100% );}
.team-portrait h3, .team-portrait p {margin: 0; color: white; }

.formation { display: flex; justify-content: center; align-items: center; gap: 50px; padding-block: var(--250x);}
.formation img {width: 150px; }
.formation p {text-transform: uppercase; font-size: var(--75x); color: #666;}


.cabinet-forces div { align-items: center; justify-content: center; gap: var(--50x);}
.cabinet-forces div img {width: 50px;}




ul.services {
  width: 100%;
  list-style: none;
  padding: 0;
}

ul.services li {
  width: 100%;
  border-bottom: 1px solid gray;
}

.bg-dark ul.services li {border-bottom: 1px solid var(--c-9);}

ul.services li a {
  width: 100%;
  padding-right: 10px;
  padding-block: 10px;
  display: flex;
   justify-content: space-between;
   align-items: center;
   transition: padding ease-in-out 200ms;
   font-size: var(--150x);
}

ul.services li a:hover  { padding-right: 0px;}

ul.services li a::after {content: ''; display: block; height: 10px; width: 20px; background-image: url(../media/picto-arrow-left.svg); background-size: cover; background-repeat: no-repeat; background-position: center center;}

.bg-dark ul.services li a::after {background-image: url(../media/picto-arrow-left-dark.svg); }

.besoins p::before { content: 'Besoin en cybersécurité';  border: none; color: var(--c-6); font-size: var(--75x); text-transform: uppercase;}
.besoins p {gap: var(--200x); height: 100%; font-size: var(--125x); line-height: 130%;}
.besoins a.card {padding: var(--125x); transition: all ease-in-out 200ms; }
.besoins a.card:hover {  box-shadow: 5px 5px 10px 0 rgba(18, 2, 2, 0.2), -5px -5px 10px 0 rgba(255, 255, 255, 0.9);  }

.sitemap ul li {font-weight: 600;}
.sitemap ul li a:hover {text-decoration: underline;}
.sitemap ul li ul li {font-weight: 300;}


/* Responsive mobile/tablette */
@media (max-width: 1000px) {
   
[class*="grid"], .card .sub-grid-12-12 { grid-template-columns: 1fr;   }
[class*="grid"] > * { grid-column: auto; }
.half, header .intro p , header .intro{min-width: 100%;}

h1, h2, h3, h4, .t-edito, .t-big { text-wrap: pretty;}
.t-edito {font-size: var(--150x);}
footer {padding-inline: var(--200x);}
footer > div  { flex-flow: column;}

.deco-star {background-image: none;}

header, header .intro, section { padding-block: var(--300x); row-gap:  var(--200x); }
.grid-12-12, [class*="grid-"] { gap: var(--200x); width: 100%;}
[class*="grid-"] > *, .card  {gap : var(--x);}
.grid-aabc-deff {   grid-template-columns: repeat(2, minmax(0, 1fr));  gap : var(--x);}
.grid-aabc-deff > :nth-child(6), .grid-aabc-deff > :nth-child(1) {   grid-column: span 1; }

.card {padding: var(--150x);}
.fille-card span {width: 30px; margin-bottom: var(--50x); }
.fille-card, .fille-card div  {gap: var(--125x);}
.shado {padding: var(--200x);}
.portrait-god {gap: 0;}
/* .portrait-god div {aspect-ratio: 1 / 1;} */
.team-portrait {aspect-ratio: 1/1.2; background-position: top center; }
.no-gap { gap: 0; }
.big-gap { gap:0; row-gap: var(--300x);}

header .intro-center {gap: var(--200x);   padding-block: var(--400x); align-items: flex-start; width: 80%; margin: 0 auto; text-align: left;}
.menu-1 header::after {background-color: rgba(0, 0, 0, 0.6); }

.side-link {padding-left: 0;  padding-top: var(--200x);border-top: 1px solid var(--c-9); border-left: none;}
.cabinet-paire { gap:0; border-radius: var(--50x); }
.cabinet-paire .image-cover {aspect-ratio: 1 / 1;}
.mobile-hide { display: none;}

.menu-2 header::before,
.menu-3 header::before {background: rgba(255, 255, 255, 0.6);   content: "";   position: absolute;   inset: 0;   pointer-events: none; }


}