/*
Theme Name: Armadam
Theme URI: https://armadam.com/
Author: La petite boîte web
Author URI: https://lapetiteboiteweb.com/
Description: Thème WordPress pour Armadam Batardeaux.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: armadam
*/

/* Fonts locales */

@font-face {
  font-family: 'DM Sans';
  src: url('./assets/font/DMSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('./assets/font/DMSans-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('./assets/font/DMSans-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('./assets/font/DMSans-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('./assets/font/DMSans-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('./assets/font/DMSans-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('./assets/font/DMSans-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-primary: 'DM Sans', sans-serif;

  --color-blue-dark: #14202E;
  --color-red: #C2323C;
  --color-red-dark: #8F2C38;
  --color-slate: #3B444F;
  --color-gray: #DAD9DA;
  --color-light: #F6F7F8;
  --color-w: #FFFFFF;
  --color-b: #000000;

  --container: 1400px;
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--font-primary);
}

html,
body {
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

/* Container global */

.armadam-container {
  width: min(calc(100% - clamp(2rem, 6vw, 7rem)), var(--container));
  max-width: var(--container);
  margin-inline: auto;
}

/* Maintenance */

/* Section 1 - Bannière */

.armadam-hero {
  position: relative;
  background: var(--color-blue-dark);
  padding-block: clamp(3.5rem, 8vw, 7rem);
  min-height: clamp(10rem, 20vw, 18rem);
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: visible;
  z-index: 5;
}

.armadam-hero .armadam-container,
.armadam-hero__inner,
.armadam-hero__content {
  position: relative;
  z-index: 3;
}

.armadam-hero__content {
  max-width: clamp(18rem, 40vw, 40rem);
}

.armadam-hero__title-main,
.armadam-hero__title-sub {
  margin: 0;
  color: var(--color-w);
  letter-spacing: -0.05em;
  line-height: 0.92;
  font-family: var(--font-primary);
}

.armadam-hero__title-tag,
.armadam-hero__title-text {
  margin: 0;
  color: var(--color-w);
  line-height: 0.92;
  font-family: var(--font-primary);
}

.armadam-hero__title-main {
  font-size: clamp(3.8rem, 9vw, 8.58rem);
  font-weight: 800;
	position:relative;
	padding-top:30px;
}

.armadam-hero__title-sub {
  margin-top: clamp(0.2rem, 0.7vw, 0.6rem);
  font-size: clamp(2.2rem, 5.8vw, 5.5rem);
  font-weight: 500;
}

.armadam-hero__motif {
  position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: auto;
    height: 115%;
    display: block;
    z-index: 1;
    pointer-events: none;
    max-width: none;
}

/* Section 2 - Intro + cartes */

.armadam-intro {
  position: relative;
  background: var(--color-w);
  padding-block: clamp(8rem, 13vw, 13rem) clamp(4rem, 8vw, 8rem);
  z-index: 1;
  padding-top: 75px;
}

.armadam-intro__title-row,
.armadam-intro__content-row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0rem, 1.2fr);
  gap: clamp(0rem, 7vw, 5rem);
}

.armadam-intro__title-row {
  align-items: start;
  margin-bottom: clamp(1rem, 4vw, 2rem);
}

.armadam-intro__content-row {
  align-items: start;
}

.armadam-intro__title-col,
.armadam-intro__content {
  max-width: clamp(30rem, 42vw, 44rem);
}

.armadam-intro__title-col h2 {
  margin: 0;
  color: var(--color-b);
  font-size: clamp(2.1rem, 2.08vw, 2.5rem);
  line-height: 1.08;
  font-weight: 800;
  text-transform: uppercase;
}

.armadam-intro__content p {
  margin: 0 0 clamp(1rem, 1.4vw, 1.4rem);
  color: var(--color-b);
  font-size: clamp(1rem, 1.05vw, 1.15rem);
  line-height: 1.38;
  font-weight: 400;
  letter-spacing: -0.025em;
}

.armadam-intro__signature {
  margin-top: clamp(1.3rem, 2vw, 2rem) !important;
  font-weight: 800 !important;
}

/* Cartes */

.armadam-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
  align-items: stretch;
}

.armadam-service-card {
  position: relative;
  background: var(--color-w);
  border: 1px solid rgba(20, 32, 46, 0.16);
  border-radius: clamp(0.35rem, 0.55vw, 0.55rem);
  overflow: hidden;
  min-height: clamp(14rem, 18vw, 21rem);
}

.armadam-service-card__image {
  position: relative;
  height: 11rem;
  overflow: hidden;
  background: var(--color-light);
}

.armadam-service-card__image::after {
  content: "";
  position: absolute;
  right: clamp(-0.4rem, -0.5vw, -0.2rem);
  bottom: 0;
  width: 48%;
  height: clamp(0.85rem, 1.4vw, 1.45rem);
  background: var(--color-red);
  transform: skewX(-22deg);
  transform-origin: right bottom;
  z-index: 2;
}

.armadam-service-card:nth-child(2) .armadam-service-card__image::after {
  background: var(--color-blue-dark);
}

.armadam-service-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.armadam-service-card:hover .armadam-service-card__image img {
  transform: scale(1.05);
}

.armadam-service-card__body {
  position: relative;
  min-height: clamp(7rem, 8vw, 9.5rem);
  padding: clamp(1.3rem, 1.8vw, 2rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* Diagonale grise derrière le titre */

.armadam-service-card__body::before {
  content: "";
  position: absolute;
  left: clamp(-2.8rem, -3vw, -1.6rem);
  bottom: clamp(-2.8rem, -3vw, -1.6rem);
  width: clamp(6.8rem, 8vw, 9.8rem);
  height: clamp(8rem, 12vw, 12rem);
  background: rgba(20, 32, 46, 0.05);
  transform: skewX(-24deg);
  transform-origin: bottom left;
  z-index: 1;
}

.armadam-service-card h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--color-b);
  font-size: clamp(0.95rem, 1.05vw, 1.25rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.045em;
  max-width: 12ch;
}

/* Section 3 + Footer */

.armadam-bottom {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.armadam-bottom__motif {
  position: absolute;
  left: -5px;
  top: clamp(0rem, 2vw, 2rem);
  width: clamp(30rem, 34vw, 42rem);
  height: auto;
  display: block;
  z-index: 3;
  pointer-events: none;
  max-width: none;
}

/* Section 3 */

.armadam-protection {
  position: relative;
  background: var(--color-w);
  padding-block: clamp(5rem, 8vw, 8rem) clamp(5rem, 7vw, 7rem);
  z-index: 1;
}

.armadam-protection__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(0rem, 7vw, 5rem);
  align-items: start;
}

.armadam-protection__content {
  max-width: clamp(34rem, 43vw, 46rem);
}

.armadam-protection__content h2 {
  margin: 0 0 clamp(2.2rem, 3vw, 3rem);
  color: var(--color-b);
  font-size: clamp(2.1rem, 2.08vw, 2.5rem);
  line-height: 1.08;
  font-weight: 800;
  text-transform: uppercase;
}

.armadam-protection__content p {
  margin: 0 0 clamp(1.3rem, 1.8vw, 1.8rem);
  color: var(--color-b);
  font-size: clamp(1rem, 1.05vw, 1.15rem);
  line-height: 1.38;
  font-weight: 400;
  letter-spacing: -0.025em;
}

/* Footer */

.armadam-footer {
  position: relative;
  background: var(--color-blue-dark);
  color: var(--color-w);
  padding-block: clamp(4.5rem, 7vw, 7rem);
  z-index: 1;
}

.armadam-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(0rem, 7vw, 5rem);
  align-items: start;
}

.armadam-footer__content {
  max-width: clamp(34rem, 43vw, 46rem);
}

.armadam-footer__heading {
  margin-bottom: clamp(4rem, 6vw, 6rem);
}

.armadam-footer__heading h2 {
  margin: 0;
  color: var(--color-w);
  font-size: clamp(2.6rem, 2.86vw, 3.4375rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.armadam-footer__heading p {
  margin: clamp(0.9rem, 1.2vw, 1.2rem) 0 0;
  color: var(--color-w);
  font-size: clamp(1.4rem, 1.56vw, 1.875rem);
  line-height: 1.2;
  font-weight: 400;
}

.armadam-footer__contacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(3rem, 6vw, 7rem);
}

.armadam-footer__contact {
  position: relative;
  padding-top: clamp(1.3rem, 1.6vw, 1.6rem);
}

.armadam-footer__contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(4rem, 4.2vw, 5rem);
  height: 2px;
  background: var(--color-red);
}

.armadam-footer__contact h3 {
  margin: 0 0 clamp(2rem, 2.8vw, 3rem);
  color: var(--color-w);
  font-size: clamp(1.1rem, 1.15vw, 1.375rem);
  line-height: 1.2;
  font-weight: 700;
}

.armadam-footer__contact a {
  display: block;
  width: fit-content;
  color: var(--color-w);
  text-decoration: none;
  font-size: clamp(0.95rem, 1vw, 1.05rem);
  line-height: 1.45;
  font-weight: 400;
  transition: opacity 0.2s ease;
}

.armadam-footer__contact a:hover {
  opacity: 0.7;
}

/* Responsive */

@media (max-width: 1100px) {
  .armadam-hero__content {
    max-width: clamp(16rem, 52vw, 34rem);
  }

  /*.armadam-hero__motif {
    top: 0;
    right: clamp(0rem, -22vw, -7rem);
    width: clamp(26rem, 58vw, 40rem);
    opacity: 1;
    z-index: 1;
    transform: translateY(0);
  }*/

  .armadam-intro__title-row,
  .armadam-intro__content-row,
  .armadam-protection__grid,
  .armadam-footer__grid {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 4rem);
  }

  .armadam-intro__title-row {
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  }

  .armadam-intro__empty-col,
  .armadam-protection__empty,
  .armadam-footer__empty {
    display: none;
  }

  .armadam-intro__title-col,
  .armadam-intro__content,
  .armadam-protection__content,
  .armadam-footer__content {
    max-width: 52rem;
    margin-left: clamp(12rem, 26vw, 18rem);
  }

  .armadam-protection__content,
  .armadam-intro__content,
  .armadam-intro__title-col {
    margin-left: 0;
  }

  .armadam-bottom__motif {
    opacity: 1;
    left: -5px;
    top: auto;
    bottom: clamp(18rem, 28vw, 24rem);
    width: clamp(12rem, 26vw, 18rem);
    z-index: 2;
  }
}

@media (max-width: 760px) {
  .armadam-container {
    width: min(calc(100% - clamp(2rem, 8vw, 3rem)), var(--container));
  }

  .armadam-hero {
    min-height: clamp(5rem, 54vw, 8rem);
    padding-block: clamp(3rem, 10vw, 4.5rem);
    overflow: visible;
  }

 

  .armadam-hero__title-main {
    font-size: clamp(2rem, 13vw, 4.5rem);
  }

  .armadam-hero__title-sub {
    font-size: clamp(1.8rem, 8vw, 2.7rem);
  }

  /*.armadam-hero__motif {
    top: 0;
    right: clamp(0rem, -54vw, -12rem);
    width: clamp(28rem, 92vw, 36rem);
    opacity: 1;
    z-index: 1;
    transform: translateY(-10%);
  }*/

  .armadam-intro {
    padding-block: clamp(4rem, 12vw, 5.5rem) clamp(3rem, 10vw, 5rem);
  }

  .armadam-intro__title-row {
    margin-bottom: clamp(1.5rem, 6vw, 2rem);
  }

  .armadam-intro__content p {
    font-size: clamp(1rem, 3.9vw, 1.08rem);
    line-height: 1.42;
  }

  /* Cartes en scroll horizontal mobile */

  .armadam-services {
    display: flex;
    gap: clamp(1rem, 4vw, 1.4rem);
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: clamp(0.8rem, 3vw, 1.2rem);
    margin-inline: calc((100vw - 100%) / -2);
    padding-inline: max(clamp(1rem, 8vw, 1.5rem), calc((100vw - var(--container)) / 2));
    scrollbar-width: none;
	  margin-left: 2px;
  }

  .armadam-services::-webkit-scrollbar {
    display: none;
  }

  .armadam-service-card {
    flex: 0 0 clamp(16rem, 78vw, 22rem);
    scroll-snap-align: start;
    min-height: auto;
  }

  .armadam-service-card__image {
    height: clamp(11rem, 52vw, 18rem);
  }

  .armadam-service-card__body {
    min-height: clamp(6rem, 22vw, 8rem);
    padding: clamp(1.2rem, 5vw, 1.8rem);
  }

  .armadam-intro__title-col h2 {
    font-size: clamp(1rem, 7vw, 2.5rem);
  }

  .armadam-bottom__motif {
    opacity: 1;
    left: 0;
    top: auto;
    bottom: clamp(22rem, 68vw, 28rem);
    width: clamp(10rem, 42vw, 15rem);
    z-index: 2;
    transform: translateY(70px);
  }

  .armadam-protection {
    padding-block: clamp(4rem, 12vw, 6rem) clamp(4.5rem, 14vw, 6.5rem);
  }

  .armadam-protection__content h2 {
    font-size: clamp(1rem, 7vw, 2.5rem);
  }

  .armadam-protection__content p {
    font-size: clamp(1rem, 4.3vw, 1.15rem);
    line-height: 1.42;
  }

  .armadam-footer {
    padding-block: clamp(4rem, 12vw, 6rem);
  }

  .armadam-footer__heading {
    margin-bottom: clamp(3rem, 10vw, 4.5rem);
  }

  .armadam-footer__heading h2 {
    font-size: clamp(2.6rem, 11vw, 3.4375rem);
  }

  .armadam-footer__heading p {
    font-size: clamp(1.4rem, 6vw, 1.875rem);
  }

  .armadam-footer__contacts {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 8vw, 4rem);
  }
}

@media (max-width: 650px) {
.armadam-footer__content {
    margin-left: clamp(5rem, 20vw, 15rem);
}.armadam-bottom__motif {
        opacity: 1;
        left: 0;
        top: auto;
        bottom: clamp(21rem, 80vw, 28rem);
        width: clamp(8rem, 30vw, 15rem);
        z-index: 2;
        transform: translateY(-153px);
    }
	.armadam-footer__heading{margin-top: 30px;}
	}

p.armadam-hero__title-tag {
    margin-bottom: 15px;
}
p.armadam-hero__title-text {
    margin-top: 30px;
    font-size: clamp(1rem, 3.9vw, 1.08rem);
    line-height: clamp(1.5rem, 3.9vw, 1.5rem);
}

p.armadam-hero__title-main:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(4rem, 4.2vw, 5rem);
    height: 2px;
    background: var(--color-red);
}