@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;800&family=Open+Sans:wght@300;400;600;700&display=swap');

/* =========================================================
   STYLE.CSS GLOBAL - MYD GROUP CONSULTING
   Global uniquement : base, header, menu, footer, FAQ fallback
========================================================= */

:root{
  --bg-primary:#f6f1ea;
  --bg-secondary:#efe5da;
  --surface:#ffffff;
  --text-dark:#2f261f;
  --text-light:#6f6257;
  --accent:#c29a74;
  --accent-dark:#8a6a50;
  --line:rgba(80,58,40,.12);
  --shadow:0 14px 34px rgba(45,31,18,.08);
  --max-width:1200px;
}

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

html{
  scroll-behavior:smooth;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  scroll-padding-top:84px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

html,
body{
  margin:0;
  padding:0;
}

body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  font-family:'Lato','Open Sans',sans-serif;
  background:var(--bg-primary);
  color:var(--text-dark);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

main,
section,
header,
footer{
  max-width:100%;
}

img,
svg,
video,
iframe{
  max-width:100%;
}

img,
video{
  height:auto;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
textarea,
select{
  font:inherit;
}

a,
button{
  -webkit-tap-highlight-color:rgba(194,154,116,.18);
}

.container{
  width:min(100% - 40px, var(--max-width));
  margin-inline:auto;
}

.section{
  padding:clamp(56px,7vw,96px) 0;
}

.section--tint{
  background:#fbf7f3;
}

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

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 24px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:.96rem;
  line-height:1;
  font-weight:700;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    color .2s ease,
    border-color .2s ease;
}

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

.btn-primary,
.btn:not(.btn-outline):not(.btn--ghost):not(.btn-light){
  background:linear-gradient(180deg,#c69c79,#a97c5b);
  color:#fff;
  box-shadow:0 12px 26px rgba(92,55,31,.18);
}

.btn-outline{
  background:rgba(255,255,255,.72);
  border-color:rgba(138,106,80,.22);
  color:#5f4636;
}

.btn--ghost{
  background:transparent;
  border-color:rgba(255,255,255,.65);
  color:#fff;
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid rgba(199,161,114,.72);
  outline-offset:3px;
}

/* =========================================================
   HEADER GLOBAL
========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  overflow:visible;
  background:rgba(247,243,236,.96);
  border-bottom:1px solid rgba(186,152,120,.14);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.header-shell{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:68px;
  gap:18px;
}

.brand{
  flex:0 0 auto;
  max-width:100%;
  text-decoration:none;
}

.brand__text{
  display:block;
  color:#c19a74;
  font-size:clamp(1.05rem,1.4vw,1.28rem);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.1;
}

.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  z-index:1201;
  appearance:none;
}

.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  border-radius:999px;
  background:#2f2a26;
  transition:transform .25s ease, opacity .25s ease;
}

.nav-toggle.is-open span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2){
  opacity:0;
}

.nav-toggle.is-open span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.site-nav ul{
  display:flex;
  align-items:center;
  gap:28px;
  margin:0;
  padding:0;
  list-style:none;
}

.site-nav a{
  color:#2f2a26;
  font-size:.96rem;
  line-height:1;
  font-weight:700;
  text-decoration:none;
  transition:opacity .2s ease, color .2s ease, background .2s ease;
}

.site-nav a:hover{
  opacity:.7;
}

.site-nav a[aria-current="page"]{
  color:#8a6a50;
}

/* =========================================================
   MENU MOBILE GLOBAL
========================================================= */

@media (max-width:991px){
  .container{
    width:min(100% - 32px, var(--max-width));
  }

  .header-shell{
    min-height:64px;
    gap:12px;
  }

  .brand{
    max-width:calc(100% - 58px);
  }

  .brand__text{
    font-size:clamp(1.02rem,4.6vw,1.18rem);
    line-height:1.08;
    letter-spacing:-.025em;
  }

  .nav-toggle{
    display:inline-flex;
    flex:0 0 44px;
  }

  .site-nav{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    display:none;
    max-height:calc(100svh - 88px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:10px;
    background:#fffaf4;
    border:1px solid rgba(90,65,45,.14);
    border-radius:20px;
    box-shadow:0 24px 60px rgba(58,39,24,.20);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    z-index:1200;
  }

  .site-nav.is-open{
    display:block;
  }

  .site-nav ul{
    flex-direction:column;
    align-items:stretch;
    gap:4px;
  }

  .site-nav a{
    display:flex;
    align-items:center;
    min-height:50px;
    padding:0 16px;
    border-radius:12px;
    color:#2f2a26;
    font-size:1rem;
    line-height:1.15;
    font-weight:800;
    border:1px solid transparent;
  }

  .site-nav a:hover,
  .site-nav a:focus-visible,
  .site-nav a[aria-current="page"]{
    background:linear-gradient(180deg, rgba(194,154,116,.16), rgba(194,154,116,.08));
    border-color:rgba(184,139,92,.14);
    color:#8a6a50;
    opacity:1;
  }

  body.menu-open{
    overflow:hidden;
  }
}

/* =========================================================
   FOOTER GLOBAL - MYD GROUP CONSULTING
========================================================= */

.site-footer,
.site-footer *{
  box-sizing:border-box;
}

.site-footer{
  position:relative;
  overflow:hidden;
  margin-top:0;
  padding:clamp(36px,4vw,54px) 0 20px;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.64) 0%, rgba(255,255,255,0) 34%),
    radial-gradient(circle at 88% 12%, rgba(185,133,86,.08), transparent 28%),
    linear-gradient(180deg,#eadfd2 0%,#dfd0bf 100%);
  color:#2f241b;
  border-top:1px solid rgba(96,70,50,.12);
}

.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0) 42%, rgba(65,42,28,.04));
}

.site-footer__inner{
  position:relative;
  z-index:1;
}

.site-footer__main{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,390px);
  gap:clamp(30px,4vw,62px);
  align-items:center;
  padding-bottom:clamp(22px,2.5vw,30px);
  border-bottom:1px solid rgba(96,70,50,.13);
}

/* MARQUE */

.site-footer__brand{
  max-width:820px;
}

.site-footer__eyebrow{
  margin:0 0 10px;
  color:#a77b57;
  font-size:.68rem;
  line-height:1;
  font-weight:800;
  letter-spacing:.24em;
  text-transform:uppercase;
}

.site-footer__title{
  margin:0;
  color:#241912;
  font-size:clamp(1.72rem,2.28vw,2.36rem);
  line-height:1;
  letter-spacing:-.044em;
  font-weight:800;
}

.site-footer__text{
  max-width:700px;
  margin:14px 0 0;
  color:rgba(47,36,29,.76);
  font-size:clamp(.94rem,.96vw,1.02rem);
  line-height:1.55;
  font-weight:600;
}

.site-footer__areas{
  margin:15px 0 0;
  color:rgba(57,40,30,.76);
  font-size:.82rem;
  line-height:1.45;
  font-weight:800;
  letter-spacing:.005em;
}

/* CARTE CTA */

.site-footer__card{
  padding:23px 25px;
  border-radius:28px;
  background:
    linear-gradient(135deg, rgba(255,250,244,.92), rgba(246,236,224,.72));
  border:1px solid rgba(96,70,50,.13);
  box-shadow:
    0 22px 58px rgba(43,28,16,.09),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.site-footer__card-title{
  margin:0;
  color:#241912;
  font-size:1.02rem;
  line-height:1.14;
  letter-spacing:-.028em;
  font-weight:800;
}

.site-footer__card-text{
  max-width:32ch;
  margin:9px 0 0;
  color:rgba(48,37,30,.74);
  font-size:.9rem;
  line-height:1.45;
  font-weight:600;
}

.site-footer__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:max-content;
  min-height:44px;
  margin-top:16px;
  padding:0 21px;
  border-radius:999px;
  color:#fffaf4;
  text-decoration:none;
  font-size:.86rem;
  line-height:1;
  font-weight:800;
  text-align:center;
  white-space:nowrap;
  background:linear-gradient(135deg,#b98556 0%,#8f5f3d 100%);
  border:1px solid rgba(117,75,44,.16);
  box-shadow:0 14px 28px rgba(130,82,48,.19);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease;
}

.site-footer__cta:hover,
.site-footer__cta:focus-visible{
  transform:translateY(-2px);
  filter:brightness(1.03);
  box-shadow:0 18px 34px rgba(130,82,48,.24);
}

/* LIENS */

.site-footer__links{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:18px 0;
  border-bottom:1px solid rgba(96,70,50,.11);
}

.site-footer__nav,
.site-footer__legal{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
}

.site-footer__nav a,
.site-footer__legal a{
  position:relative;
  color:rgba(47,36,29,.76);
  font-size:.82rem;
  line-height:1;
  font-weight:800;
  letter-spacing:-.01em;
  text-decoration:none;
  transition:color .2s ease, opacity .2s ease;
}

.site-footer__legal a{
  color:rgba(47,36,29,.62);
}

.site-footer__nav a::after,
.site-footer__legal a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:1px;
  background:#a77954;
  transition:width .22s ease;
}

.site-footer__nav a:hover,
.site-footer__legal a:hover{
  color:#241912;
}

.site-footer__nav a:hover::after,
.site-footer__legal a:hover::after{
  width:100%;
}

/* BAS FOOTER */

.site-footer__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-top:14px;
}

.site-footer__bottom p{
  margin:0;
  color:rgba(47,36,29,.62);
  font-size:.78rem;
  line-height:1.35;
  font-weight:700;
}

.site-footer__socials{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.site-footer__socials a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  min-width:40px;
  min-height:40px;
  border-radius:999px;
  background:rgba(255,250,244,.74);
  border:1px solid rgba(96,70,50,.12);
  box-shadow:
    0 10px 22px rgba(43,28,16,.065),
    inset 0 1px 0 rgba(255,255,255,.72);
  text-decoration:none;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

.site-footer__socials a:hover,
.site-footer__socials a:focus-visible{
  transform:translateY(-2px);
  background:#fffaf4;
  box-shadow:
    0 15px 30px rgba(43,28,16,.10),
    inset 0 1px 0 rgba(255,255,255,.8);
}

.site-footer__socials svg{
  display:block;
  width:21px;
  height:21px;
  flex:0 0 auto;
}

.site-footer a:focus-visible{
  outline:2px solid rgba(199,161,114,.70);
  outline-offset:3px;
}

/* =========================================================
   FOOTER TABLETTE
========================================================= */

@media (max-width:980px){
  .site-footer__main{
    grid-template-columns:1fr;
    gap:22px;
  }

  .site-footer__card{
    max-width:520px;
  }

  .site-footer__links,
  .site-footer__bottom{
    align-items:flex-start;
    flex-direction:column;
  }

  .site-footer__socials{
    justify-content:flex-start;
  }
}

/* =========================================================
   FOOTER MOBILE - LISIBLE, NON COMPRESSE
========================================================= */

@media (max-width:680px){
  .site-footer{
    padding:clamp(34px,9vw,46px) 0 18px;
    background:
      radial-gradient(circle at 12% 0%, rgba(255,255,255,.68) 0%, rgba(255,255,255,0) 36%),
      radial-gradient(circle at 88% 5%, rgba(185,133,86,.08), transparent 28%),
      linear-gradient(180deg,#eadfd2 0%,#dfd0bf 100%);
  }

  .site-footer__main{
    display:block;
    padding:0 0 22px;
    border:0;
    border-bottom:1px solid rgba(96,70,50,.13);
    background:transparent;
    box-shadow:none;
  }

  .site-footer__brand{
    max-width:100%;
  }

  .site-footer__eyebrow{
    margin:0 0 9px;
    color:#a77b57;
    font-size:.75rem;
    line-height:1.12;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
  }

  .site-footer__title{
    max-width:none;
    margin:0;
    color:#241912;
    font-size:clamp(1.48rem,6vw,1.78rem);
    line-height:1.08;
    letter-spacing:-.034em;
    font-weight:800;
  }

  .site-footer__text{
    width:100%;
    max-width:36rem;
    margin:11px 0 0;
    color:rgba(47,36,29,.76);
    font-size:1rem;
    line-height:1.56;
    font-weight:500;
    letter-spacing:-.004em;
  }

  .site-footer__areas{
    margin:12px 0 0;
    color:rgba(57,40,30,.76);
    font-size:.92rem;
    line-height:1.44;
    font-weight:800;
  }

  .site-footer__card{
    margin-top:18px;
    padding:18px;
    border-radius:22px;
    background:
      linear-gradient(135deg, rgba(255,250,244,.88), rgba(246,236,224,.66));
    border:1px solid rgba(96,70,50,.13);
    box-shadow:
      0 12px 26px rgba(43,28,16,.055),
      inset 0 1px 0 rgba(255,255,255,.72);
  }

  .site-footer__card-title{
    margin:0;
    color:#241912;
    font-size:1.05rem;
    line-height:1.16;
    letter-spacing:-.028em;
    font-weight:800;
  }

  .site-footer__card-text{
    max-width:34ch;
    margin:7px 0 0;
    color:rgba(48,37,30,.73);
    font-size:.95rem;
    line-height:1.45;
    font-weight:600;
  }

  .site-footer__cta{
    width:100%;
    min-height:46px;
    margin-top:14px;
    padding:0 18px;
    font-size:.96rem;
    font-weight:800;
    white-space:normal;
  }

  .site-footer__links{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    margin:0;
    padding:18px 0;
    border:0;
    border-bottom:1px solid rgba(96,70,50,.11);
    background:transparent;
  }

  .site-footer__nav{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 18px;
    width:100%;
  }

  .site-footer__legal{
    display:flex;
    flex-wrap:wrap;
    gap:12px 16px;
    padding-top:13px;
    border-top:1px solid rgba(96,70,50,.10);
  }

  .site-footer__nav a,
  .site-footer__legal a{
    display:inline-flex;
    align-items:center;
    min-height:32px;
    color:rgba(47,36,29,.78);
    font-size:.94rem;
    line-height:1.25;
    font-weight:800;
    letter-spacing:-.01em;
  }

  .site-footer__legal a{
    color:rgba(47,36,29,.64);
    font-size:.88rem;
    line-height:1.32;
  }

  .site-footer__nav a::after,
  .site-footer__legal a::after{
    display:none;
  }

  .site-footer__bottom{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:14px;
    padding-top:16px;
    text-align:left;
  }

  .site-footer__bottom p{
    max-width:24ch;
    margin:0;
    color:rgba(47,36,29,.62);
    font-size:.84rem;
    line-height:1.4;
    font-weight:700;
  }

  .site-footer__socials{
    justify-content:flex-end;
    gap:8px;
    padding-top:0;
  }

  .site-footer__socials a{
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
    background:rgba(255,250,244,.78);
    border:1px solid rgba(96,70,50,.12);
    box-shadow:
      0 8px 18px rgba(43,28,16,.07),
      inset 0 1px 0 rgba(255,255,255,.78);
  }

  .site-footer__socials svg{
    width:18px;
    height:18px;
  }
}

/* =========================================================
   TRES PETIT MOBILE
========================================================= */

@media (max-width:390px){
  .container{
    width:min(100% - 28px, var(--max-width));
  }

  .site-footer{
    padding-top:30px;
  }

  .site-footer__title{
    font-size:1.42rem;
    line-height:1.08;
    letter-spacing:-.03em;
  }

  .site-footer__text{
    width:100%;
    max-width:none;
    font-size:.98rem;
    line-height:1.54;
  }

  .site-footer__areas{
    font-size:.9rem;
    line-height:1.42;
  }

  .site-footer__card{
    padding:17px;
  }

  .site-footer__nav{
    grid-template-columns:1fr;
    gap:7px;
  }

  .site-footer__nav a{
    min-height:31px;
    font-size:.94rem;
  }

  .site-footer__legal a{
    font-size:.87rem;
  }

  .site-footer__bottom{
    grid-template-columns:1fr;
    gap:12px;
    text-align:left;
  }

  .site-footer__bottom p{
    max-width:none;
    font-size:.83rem;
  }

  .site-footer__socials{
    justify-content:flex-start;
  }

  .site-footer__socials a{
    width:40px;
    height:40px;
  }
}

/* =========================================================
   FAQ FALLBACK GLOBAL
========================================================= */

details{
  background:#fff;
  border:1px solid #eadfd6;
  border-radius:16px;
  padding:14px 16px;
  margin:10px 0;
}

summary{
  cursor:pointer;
  list-style:none;
  font-weight:700;
}

summary::-webkit-details-marker{
  display:none;
}

details p{
  margin:10px 0 0;
  color:var(--text-light);
}

/* =========================================================
   RESPONSIVE BASE GLOBAL
========================================================= */

@media (max-width:768px){
  .section{
    padding:48px 0;
  }

  .btn{
    min-height:46px;
    padding:0 20px;
    font-size:1rem;
  }

  details{
    padding:16px;
    border-radius:18px;
  }

  summary{
    font-size:1rem;
    line-height:1.35;
    font-weight:800;
  }

  details p{
    font-size:1rem;
    line-height:1.56;
  }
}

@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }
}