.home-hero {
	--hero-width: min(100%, 720px);

	display: flex;
	flex-direction: column;
	gap: var(--spacing-m);
	width: var(--hero-width);
	margin-inline: auto;
	align-items: center;
	margin-top: 15vh;
}

.home-hero-title {
	width: min(70vw, 720px);
	display: flex;
	flex-direction: column;
}

.fit-line {
	display: block;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	color: var(--color-quaternary);
	line-height: 1;
	overflow: hidden;
	box-sizing: border-box;
}

.fit-line__text {
	display: inline-block;
	font-family: var(--font-family-title);
	text-transform: inherit;
	white-space: nowrap;
	will-change: font-size;
	line-height: 1;
}

.home-hero-subtitle {
}

@media screen and (max-width: 600px) {
    .home-hero-subtitle {
        text-align: center;
    }
    .home-hero {
        margin-top: 20vh;
    }
    .home-hero-title {
        width: 90vw;
    }
}

.home-hero-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-2xs) var(--spacing-l);
	border-radius: 5px;
	background: var(--color-quaternary);
	color: var(--color-primary);
	font-size: 20px;
	font-weight: 300;
	text-transform: uppercase;
	max-width: min-content;
	white-space: nowrap;
	text-align: center;
}

.doki-doki-illu {
	position: absolute;
	top: 60%;
	left: 1%;
	width: 500px;
}

@media screen and (min-width: 1400px) {
	.doki-doki-illu {
	left: calc(50% - 800px);
	}
}

@media screen and (max-width: 1200px) {
	.doki-doki-illu {
	top: 70%;
	width: 400px;
	}
}

@media screen and (max-width: 1000px) {
	.doki-doki-illu-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding-top: var(--spacing-2xl);
	}
	.doki-doki-illu {
	position: static;
	width: 80%;
	}
}

.scrolling-partenaires {
	background: var(--color-tertiary);
	width: 105vw;
	height: 175px;
	display: flex;
	align-items: center;
	border-bottom: 3px dashed var(--grey);
	border-top: 3px dashed var(--grey);
	transform-origin: 35%;
	transform: translateX(-0px) rotate(-6deg);
}
.scrolling-partenaires .rail {
	display: flex;
	gap: var(--spacing-l);
}
.scrolling-partenaires .rail .rail-box {
	white-space: nowrap;
	font-size: 200px;
	font-weight: 900;
	letter-spacing: ls(120);
	line-height: 1em;
	margin: 0 2rem 0 0;
	color: white;
}
.scrolling-partenaires .rail .rail-box img {
	height: 100px;
	width: auto;
	vertical-align: middle;
	margin-left: 20px;
}
.scrolling-partenaires .rail a {
	height: 100%;
	display: flex;
}

.scrolling-partenaires.reverse {
	transform: rotate(6deg);
	position: absolute;
	background: var(--color-quaternary);
}

.partenaires {
	margin-top: 450px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

@media (max-width: 800px) {
    .partenaires {
        margin-top: 250px;
    }
}

.title-container {
  padding: 40px 0;
  margin-top: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5vw;
  transform: rotate(6deg);
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
}

.title-container h2 {
  white-space: nowrap;
  color: var(--color-quaternary);
  font-size: 3rem;
  margin: 0;
}

.title-container hr {
  flex: 1 1 0;
  height: 3px;
  border: 0;
  background: var(--color-quaternary);
  border-radius: 2px;
  width: auto;
}

.title-container.mini {
    gap: 2vw;
    transform: none;
}
.title-container.mini hr {
    width: 30px;
    flex: none;
}

.i-heart {
  position: relative;
  display: inline-block;
}

.i-heart::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.5em;
  transform: translateX(-50%);
  width: 0.35em;
  aspect-ratio: 20/18;
  background: currentColor;
  -webkit-mask: url("../svg/heart.svg") no-repeat center / contain;
          mask: url("../svg/heart.svg") no-repeat center / contain;
}

.client-section {
    width: auto;
	height: 100vh;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	padding-top: 5vh;
}

.client-scrollable {
  position: relative;
  display: inline-block;
  margin: 0 40px;
}

.client-scrollable:first-of-type {
  margin-left: 10vw;
}

.client-scrollable__frame {
  display: block;
  height: 60vh;
  width: 300px;
  overflow: hidden;
  transform: rotate(var(--rot-img));
  transform-origin: center;
  transition: transform 0.35s ease;
}

.client-scrollable__frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1);
  transform-origin: center;
  transition: transform 0.35s ease;
  will-change: transform;
}

.client-scrollable p {
  position: absolute;
  left: 50%;
  bottom: -2rem;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 24px;
  font-family: var(--font-family-title);
  font-size: 20px;
  color: var(--color-primary);
  background: var(--color-quaternary);
  z-index: 1;
  pointer-events: none;
}

.client-scrollable {
  --rot-img: 0deg;
  --rot-p: 0deg;
}
.client-scrollable p {
  transform: translateX(-50%) rotate(var(--rot-p));
}

.client-scrollable:hover .client-scrollable__frame img,
.client-scrollable:focus-visible .client-scrollable__frame img {
  transform: scale(1.12);
}

.client-scrollable:nth-of-type(1) { --rot-img: 3.1deg;  --rot-p: -2.4deg; }
.client-scrollable:nth-of-type(2) { --rot-img: -3.6deg; --rot-p: 2.3deg;  }
.client-scrollable:nth-of-type(3) { --rot-img: 2.7deg;  --rot-p: -3.2deg; }
.client-scrollable:nth-of-type(4) { --rot-img: -2.1deg; --rot-p: 3.9deg;  }
.client-scrollable:nth-of-type(5) { --rot-img: 3.8deg;  --rot-p: -2.6deg; }

.services-container { margin-block: var(--spacing-3xl); }

.services-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: clamp(var(--spacing-l), 3vw, var(--spacing-2xl));
  align-items: stretch;
  margin-top: 100px;
}

@media (max-width: 600px){
  .services-grid{
      gap: var(--spacing-xl);
  }

  .service-card:not(.service-card:first-of-type) {
        margin-top: 150px;
  }
}

.service-card{
  --rot: 0deg;
  position: relative;
  background: var(--color-tertiary);
  color: var(--color-primary);
  border-radius: 8px;
  /* Titre plus haut : on réduit le padding-top */
  padding: clamp(22px, 3vw, 38px);
  padding-top: clamp(90px, 12vw, 130px);
  transform: rotate(var(--rot));
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;

}

/* (Changé) — on supprime la bordure décalée autour de la carte  */
/* .service-card::before { ... }  --> retiré */

/* Légères variations d'inclinaison */
.services-grid > .service-card:nth-child(1){ --rot:-1.8deg; }
.services-grid > .service-card:nth-child(2){ --rot: 1.6deg; }
.services-grid > .service-card:nth-child(3){ --rot:-1.1deg; }

/* (Changé) Icône 1.5x plus grande */
.service-illu{
  position:absolute;
  top:0;
  left:50%;
  transform: translate(-50%, -62%) rotate(calc(var(--rot) * -0.4));
  width: clamp(220px, 45%, 360px);
  pointer-events:none;
}

/* (Changé) Titre : centré et 1.5x plus grand */
.service-title{
  font-family: var(--font-family-title);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-secondary);
  font-size: clamp(36px, 4.5vw, 54px);
  line-height: 1;
  text-align:center;
  margin: 0 0 var(--spacing-l);
}

.service-desc{
  color: var(--color-primary);
  opacity: .95;
  margin-bottom: var(--spacing-l);
}

/* (Changé) Tags : moins de padding, pas de point décoratif */
.service-tags{
  display:flex;
  flex-wrap:wrap;
  gap: var(--spacing-s);
  margin: 0 0 var(--spacing-xl);
}

.service-tags a,
.service-tags .chip{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;            /* réduit */
  border: 2px solid var(--color-primary);
  border-radius: 999px;
  font-size: 14px;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}

.service-tags a:hover{
  background: var(--color-primary);
  color: var(--color-tertiary);
  border-color: var(--color-primary);
}

/* (Changé) Bouton : bonne fonte, plus grand, moins de radius */
.service-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-family: var(--font-family-title);         /* fonte titre */
  font-size: clamp(18px, 3vw, 30px);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing:.09em;
  background: transparent;
  border: 2px solid var(--color-secondary);
  color: var(--color-primary);
  padding: 14px 18px;
  border-radius: 6px;                             /* moins arrondi */
  font-weight: 400;
  position: relative;
  width: min(100%, 280px);
  transition: background .2s, color .2s, border-color .2s;
  text-align: center;
}

.service-btn::before,
.service-btn::after{
  content:"";
  position:absolute;
  top:50%; transform: translateY(-50%);
  width: 8px; height: 8px;
  background: var(--color-secondary);
  border-radius: 50%;
}
.service-btn::before{ left: 10px; }
.service-btn::after { right:10px; }

.service-btn span{ margin-inline:18px; }

.service-btn:hover{
  background: var(--color-secondary);
  color: var(--color-tertiary);
  border-color: var(--color-secondary);
}

.service-btn:hover::before,
.service-btn:hover::after{
    background: var(--color-tertiary);
}

@media (max-width: 900px){
  .service-card{ padding-top: 110px; }
}

.equipes-container {
    display:flex;
    flex-direction: column;
    align-items: center;
}

.equipes-container .equipes-title {
    white-space: nowrap;
    padding: 24px;
    font-family: var(--font-family-title);
    font-size: 20px;
    color: var(--color-primary);
    background: var(--color-quaternary);
    z-index: 1;
    pointer-events: none;
    text-transform: uppercase;
    transform: translateY(35%);
}

.equipes-grid {
    display: flex;
    align-items:center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 clamp(20px, 3vw, 120px);
}

.equipes-grid .equipes-item {
    max-width: 25vw;
    min-width: 200px;
    height: 35vh;
}

.equipes-grid .equipes-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.equipes-container a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-family: var(--font-family-title);
  font-size: clamp(18px, 3vw, 30px);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing:.09em;
  background: transparent;
  border: 2px solid var(--color-tertiary);
  color: var(--color-tertiary);
  padding: 14px 18px;
  border-radius: 6px;
  font-weight: 400;
  position: relative;
  width: min(100%, 280px);
  transition: background .2s, color .2s, border-color .2s;
  text-align: center;
  margin-top: 40px;
}

.equipes-container a::before,
.equipes-container a::after{
  content:"";
  position:absolute;
  top:50%; transform: translateY(-50%);
  width: 8px; height: 8px;
  background: var(--color-tertiary);
  border-radius: 50%;
}
.equipes-container a::before{ left: 10px; }
.equipes-container a::after { right:10px; }

.equipes-container a span{ margin-inline:18px; }

.equipes-container a:hover{
  background: var(--color-secondary);
  color: var(--color-tertiary);
  border-color: var(--color-secondary);
}

.equipes-container a:hover::before,
.equipes-container a:hover::after{
    background: var(--color-tertiary);
}

.equipes-container {
  --rot-title: 0deg;
}

.equipes-grid .equipes-item {
  --rot-img: 0deg;
  overflow: hidden;
  border-radius: 8px;
}

.equipes-container .equipes-title {
  transform: translateY(35%) rotate(var(--rot-title));
  will-change: transform;
  transition: transform .25s ease;
}

.equipes-grid .equipes-item img {
  transform: rotate(var(--rot-img));
  transition: transform .25s ease;
}

.equipes-grid .equipes-item:hover img,
.equipes-grid .equipes-item:focus-within img {
  transform: rotate(var(--rot-img)) scale(1.12);
}

.equipes-container .equipes-title { --rot-title: 2.4deg; }

.equipes-grid .equipes-item:nth-of-type(1)  { --rot-img:  3.1deg; }
.equipes-grid .equipes-item:nth-of-type(2)  { --rot-img: -3.6deg; }
.equipes-grid .equipes-item:nth-of-type(3)  { --rot-img:  2.7deg; }
.equipes-grid .equipes-item:nth-of-type(4)  { --rot-img: -2.1deg; }
.equipes-grid .equipes-item:nth-of-type(5)  { --rot-img:  3.8deg; }

.equipes-grid .equipes-item:nth-of-type(5n + 1) { --rot-img:  3.1deg; }
.equipes-grid .equipes-item:nth-of-type(5n + 2) { --rot-img: -3.6deg; }
.equipes-grid .equipes-item:nth-of-type(5n + 3) { --rot-img:  2.7deg; }
.equipes-grid .equipes-item:nth-of-type(5n + 4) { --rot-img: -2.1deg; }
.equipes-grid .equipes-item:nth-of-type(5n + 5) { --rot-img:  3.8deg; }

.contact-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 150px;
}

.contact-background {
    padding: var(--spacing-xl);
}
.contact-title {
    white-space: nowrap;
    padding: 14px 30px;
    font-family: var(--font-family-title);
    font-size: 20px;
    color: var(--color-primary);
    background: var(--color-quaternary);
    z-index: 1;
    pointer-events: none;
    text-transform: uppercase;
    transform: translateY(35%) rotate(1deg) scale(1.4);
    text-align: center;
}

.contact-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 90vh;
    z-index: -1;
    margin-top: 5vh
}

.contact-background svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    padding: var(--spacing-2xl);
    border-radius: 8px;
    border: 3px solid var(--color-tertiary);
    transform: rotate(-1deg);
    gap: var(--spacing-2xl  );
}

.contact-box .contact-box-text {
    flex: 60%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
}

.contact-box .doki-doki-animal-crossing {
    width: 250px;
}

.contact-box .contact-box-text a {

}

.contact-box .contact-box-text a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-family: var(--font-family-title);
  font-size: clamp(18px, 3vw, 30px);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing:.09em;
  background: transparent;
  border: 2px solid var(--color-tertiary);
  color: var(--color-tertiary);
  padding: 14px 18px;
  border-radius: 6px;
  font-weight: 400;
  position: relative;
  width: min(100%, 280px);
  transition: background .2s, color .2s, border-color .2s;
  text-align: center;
  margin-top: 40px;
  transform: rotate(3deg);
}

.contact-box .contact-box-text a::before,
.contact-box .contact-box-text a::after{
  content:"";
  position:absolute;
  top:50%; transform: translateY(-50%);
  width: 8px; height: 8px;
  background: var(--color-tertiary);
  border-radius: 50%;
}
.contact-box .contact-box-text a::before{ left: 10px; }
.contact-box .contact-box-text a::after { right:10px; }

.contact-box .contact-box-text a span{ margin-inline:18px; }

.contact-box .contact-box-text a:hover{
  background: var(--color-secondary);
  color: var(--color-tertiary);
  border-color: var(--color-secondary);
}

.contact-box .contact-box-text a:hover::before,
.equipes-container a:hover::after{
    background: var(--color-tertiary);
}

@media (max-width: 1024px) {
  .contact-container {
    margin-top: var(--spacing-3xl);
  }

  .contact-background {
    width: min(110vw, 760px);
    height: auto;
  }

  .contact-box {
    gap: var(--spacing-xl);
    padding: var(--spacing-2xl) var(--spacing-xl);
  }

  .contact-box .doki-doki-animal-crossing {
    width: clamp(220px, 32vw, 280px);
  }
}

@media (max-width: 768px) {
  .contact-title {
    font-size: clamp(18px, 6vw, 24px);
    transform: translateY(15%) rotate(0.8deg) scale(1.05);
    padding: 12px 22px;
    letter-spacing: 0.28rem;
  }

  .contact-box {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    transform: rotate(-0.5deg);
    padding: var(--spacing-2xl) var(--spacing-l);
  }

  .contact-box .contact-box-text {
    flex: initial;
    align-items: center;
    text-align: center;
  }

  .contact-box .contact-box-text p {
    margin: 0;
  }

  .contact-box .contact-box-text a {
    margin-top: var(--spacing-l);
    width: 100%;
    max-width: 320px;
    transform: rotate(0deg);
  }

  .contact-box .doki-doki-animal-crossing {
    width: min(220px, 70vw);
    margin-inline: auto;
  }

  .contact-background {
    width: 120%;
    max-width: 620px;
  }
}

@media (max-width: 520px) {
  .contact-background {
    display: none;
  }

  .contact-title {
    transform: none;
    font-size: clamp(18px, 7vw, 22px);
    padding: 10px 18px;
    margin-bottom: var(--spacing-m);
    letter-spacing: 0.2rem;
  }

  .contact-box {
    border-width: 2px;
    padding: var(--spacing-xl) var(--spacing-m);
    transform: none;
  }

  .contact-box .contact-box-text {
    gap: var(--spacing-s);
  }
}

/* QUOTE SECTION */
.quote-section {
  width: 100%;
  max-width: 65vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  margin-bottom: 120px;
}

.title-container.mini {
  position: sticky;
  top: 20px;
  z-index: 2;
  padding: 10px 0;
  padding-top: 10vw;
}

.title-container.mini.is-unpinned {
  position: relative;
}

.wrapper {
  position: relative;
  z-index: 1;
  padding-top: 60px;
}

.quote-section p {
  color: rgba(69, 26, 10, 0.3);
  text-align: center;
  font-size: clamp(20px, 5vw, 34px);
  line-height: 1.2;
}

.test { height: 100vh; background: red; }

.cal-section {

}

.cal-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: var(--spacing-2xl);
}

.cal-box {
    width: 100%;
    height: 35vh;
    background: var(--color-tertiary);
    display:flex;
    align-items: center;
    justify-content: center;
}

.cal-box h3 {
    color: var(--color-primary);
    font-family: var(--font-family-title);
    font-size: clamp(24px, 4vw, 40px);
    text-align: center;
    padding: var(--spacing-l);
}


/* ---------- FOOTER ---------- */

.site-footer {
  background: var(--color-quaternary);
  position: relative;
  margin-top: 350px;
  min-height: 400px;
  padding: var(--spacing-l);
}

.site-footer::before {
  content: "";
  display: block;
  height: 200px;
  width: 250vw;
  top: -200px;
  transform: translateX(-120px) rotate(-3deg);
  position: absolute;
  background: var(--color-quaternary);
}

.doki-doki-illu-footer {
  position: absolute;
  top: -55%;
  left: 10%;
  transform: translateX(-50%);
  width: 350px;
}

.footer-container {
  border: var(--spacing-l) solid var(--color-primary);
  border-radius: 20px;
  background-color: var(--color-primary);
  transform: translateY(-100px);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 10% center; /* fix de la coquille */
  background-image: url("data:image/svg+xml,%3csvg width='1645' height='508' viewBox='0 0 1645 508' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg opacity='0.03'%3e%3cg clip-path='url(%23clip0_3000_5097)'%3e%3cpath d='M1594.57 41.0342C1555.21 25.6463 1518.92 44.2401 1494.32 74.3749C1491.86 76.2984 1488.17 80.1454 1485.1 78.2219C1483.87 77.5807 1482.64 76.2984 1482.02 75.016C1470.34 44.2401 1451.27 17.3111 1419.29 5.77014C1376.86 -9.61784 1330.73 8.3348 1314.74 52.5752C1309.82 65.3985 1307.36 78.863 1307.36 91.6863C1304.9 120.539 1312.28 148.75 1321.51 176.32C1330.12 200.685 1341.19 224.408 1353.49 247.49C1354.1 249.413 1355.33 251.337 1355.95 253.26C1365.79 274.419 1378.09 293.654 1391 312.888C1393.46 316.736 1396.54 321.865 1399.61 326.353C1402.69 337.253 1411.3 341.741 1421.75 339.817C1436.51 337.253 1451.27 330.841 1464.8 325.071C1494.94 312.888 1523.23 293.654 1550.29 274.419C1582.88 251.337 1614.86 220.561 1629.62 182.091C1632.7 175.679 1636.39 169.909 1638.85 162.856C1652.99 117.974 1641.31 58.9869 1594.57 41.0342ZM1483.87 83.9923C1483.87 83.9923 1483.87 83.9923 1483.87 83.3512V83.9923ZM1483.25 79.5042C1483.25 79.5042 1483.25 78.863 1483.25 78.2219C1483.25 78.2219 1483.25 78.863 1483.87 79.5042H1483.25Z' fill='%23451A0A'/%3e%3c/g%3e%3cg clip-path='url(%23clip1_3000_5097)'%3e%3cpath d='M883.273 172.394C852.847 186.516 842.275 218.042 844.454 249.311C844.09 251.823 844.058 256.133 841.297 256.829C840.26 257.18 838.882 257.169 837.851 256.802C814.845 246.198 789.723 242.043 765.514 254.06C733.352 269.964 716.883 306.83 731.443 341.074C735.503 351.165 741.293 360.193 748.13 367.432C762.125 385.148 781.333 396.798 801.241 407.018C819.093 415.784 837.992 422.762 857.243 428.666C858.616 429.395 860.336 429.769 861.708 430.498C878.545 436.741 895.745 440.473 913.293 443.848C916.733 444.595 921.203 445.708 925.333 446.46C932.88 450.832 940.134 448.376 945.011 441.232C951.977 431.23 956.892 419.056 961.454 407.957C971.972 383.616 977.688 356.361 982.71 329.82C988.806 297.899 990.452 261.99 978.273 231.717C976.591 226.315 975.597 220.918 973.226 215.511C957.282 181.974 919.234 155.443 883.273 172.394ZM843.679 260.8C843.679 260.8 843.679 260.8 843.337 260.438L843.679 260.8ZM840.939 258.623C840.939 258.623 840.597 258.261 840.255 257.899C840.255 257.899 840.597 258.261 841.286 258.266L840.939 258.623Z' fill='%23451A0A'/%3e%3c/g%3e%3cg clip-path='url(%23clip2_3000_5097)'%3e%3cpath d='M229.79 201.785C208.766 184.439 183.294 189.054 162.767 203.202C160.917 203.931 157.963 205.63 156.455 203.822C155.827 203.179 155.319 202.133 155.184 201.207C153.813 179.582 147.248 158.938 129.987 145.448C107.097 127.503 75.773 129.796 57.8501 154.489C52.482 161.591 48.4875 169.576 46.1048 177.637C39.251 195.294 38.4872 214.467 38.9621 233.597C39.6594 250.591 41.9686 267.662 45.1433 284.57C45.1591 285.899 45.5481 287.348 45.5638 288.677C47.6032 303.896 51.4927 318.385 55.7554 332.994C56.5333 335.892 57.4461 339.716 58.478 343.137C58.3186 350.588 62.7091 355.088 69.4105 355.917C78.8433 357.182 88.9909 356.029 98.273 355.039C118.822 353.256 139.562 346.68 159.556 339.863C183.623 331.708 208.747 318.596 224.851 297.29C227.909 293.859 231.22 290.951 234.023 286.997C250.946 261.541 254.816 222.183 229.79 201.785ZM154.636 207.209C154.636 207.209 154.636 207.209 154.755 206.806L154.636 207.209ZM155.097 204.268C155.097 204.268 155.216 203.865 155.335 203.462C155.335 203.462 155.216 203.865 155.47 204.388L155.097 204.268Z' fill='%23451A0A'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_3000_5097'%3e%3crect width='337.633' height='339.818' fill='white' transform='translate(1307.37)'/%3e%3c/clipPath%3e%3cclipPath id='clip1_3000_5097'%3e%3crect width='273.17' height='263.887' fill='white' transform='matrix(0.697813 -0.71628 0.6866 0.727036 699.245 315.666)'/%3e%3c/clipPath%3e%3cclipPath id='clip2_3000_5097'%3e%3crect width='215.188' height='222.753' fill='white' transform='matrix(0.952071 0.305876 -0.28346 0.958984 63.1416 120)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
  width: 100%;
  z-index: 2;
  position: relative;
}

/* grille + colonnes du panneau */
.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  gap: clamp(var(--spacing-l), 4vw, var(--spacing-2xl));
  align-items: start;
  padding: clamp(20px, 3vw, 40px);
}

@media (max-width: 600px) {
  .footer-container {
      background-position: top center;
  }
  .footer-top {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  .footer-top * {
      text-align: center;
}

.footer-brand .logo-footer {
  max-width: 180px;
  width: min(40vw, 180px);
}

.footer-title {
  font-family: var(--font-family-title);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-tertiary);
  font-size: clamp(18px, 2vw, 22px);
  margin-bottom: var(--spacing-m);
}

.footer-list {
  display: grid;
  gap: 10px;
}
.footer-list a {
  position: relative;
  display: inline-block;
  padding: 2px 0;
}
.footer-list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
  opacity: .3;
}
.footer-list a:hover::after { transform: scaleX(1); }

.footer-cta {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

/* séparateur + bas de panneau */
.footer-sep {
  border: 0;
  height: 1px;
  width: 100%;
  background: rgba(69,26,10,.15);
  margin-block: clamp(10px, 2vw, 20px);
}

.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--spacing-l);
  padding: clamp(10px, 2.5vw, 24px);
}

.footer-bottom .legal {
  font-size: 12px;
  line-height: 1.5;
  opacity: .9;
}

.footer-socials {
  display: flex;
  gap: var(--spacing-m);
}
.footer-socials .icon svg {
  width: 24px; height: 24px;
  display: block;
  fill: var(--color-primary);
  color: var(--color-tertiary);
  transition: transform .15s ease, opacity .15s ease;
}
.footer-socials a:hover svg { transform: scale(1.08); opacity: .8; }

@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
  .footer-cta { justify-content: flex-start; }
  .doki-doki-illu-footer {
      position: absolute;
        top: -45%;
        left: 50%;
        transform: translateX(-50%) translateY(50px);
  }
  .footer-bottom {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-family-title);
  text-transform: uppercase;
  letter-spacing: .09em;
  border-radius: 6px;
  padding: 14px 18px;
  line-height: 1;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, transform .02s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

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

.btn-outline-dark {
  background: transparent;
  border: 2px solid var(--color-tertiary);
  color: var(--color-tertiary);
}

.btn-outline-dark:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-tertiary);
}

/* petits points décoratifs à gauche/droite, comme sur tes CTA */
.btn-with-dots { position: relative; }
.btn-with-dots::before,
.btn-with-dots::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: .9;
}
.btn-with-dots::before { left: 10px; }
.btn-with-dots::after  { right: 10px; }
.btn-with-dots span { margin-inline: 18px; }