/* ===============================================
   ALAIN EME MENUISERIE - STYLE CSS
   Mobile-first strict : styles de base = mobile, media queries en min-width (rem).
   Référentiel : RESPONSIVE.md (racine). Aucune déclaration prioritaire (important).
   Ordre : variables, reset, utilitaires, composants, breakpoints,
   survol (hover:hover), mouvement (no-preference), impression.
   =============================================== */

/* ===============================================
   VARIABLES
   =============================================== */
:root {
  --color-green: #297d4d;
  --color-green-hover: #1e5f3a;
  --color-green-light: #8fdc9f;
  --color-brown: #7c5e29;
  --color-brown-80: rgba(124, 94, 41, 0.8);
  --color-brown-50: rgba(124, 94, 41, 0.5);
  --color-brown-30: rgba(124, 94, 41, 0.3);
  --color-brown-10: rgba(124, 94, 41, 0.1);
  --color-white: #ffffff;
  --color-dark: #1a1a1a;
  --color-text: #4a4a4a;
  --color-text-light: #6b6b6b;
  --color-gold: #c9a96e;
  --glass-top: rgba(255, 255, 255, 0.14);
  --glass-scrolled: rgba(45, 74, 62, 0.78);

  /* Fonds de section teintés (marron 8 % et 13 %) */
  --bg-tint-1: rgba(124, 94, 41, 0.08);
  --bg-tint-2: rgba(124, 94, 41, 0.13);

  /* Voiles des visuels : assez sombres pour du texte blanc >= 4,5:1 même sur une photo claire */
  --overlay-hero: rgba(60, 45, 20, 0.68);
  --overlay-page: rgba(60, 45, 20, 0.7);
  --overlay-parallax: rgba(0, 0, 0, 0.55);
  --text-shadow-hero: 0 1px 3px rgba(0, 0, 0, 0.45);

  --container-max: 75rem;

  /* Typographie fluide (fondation 6) : base rem + composante vw + max rem */
  --pas: clamp(0.95rem, 0.85rem + 0.4vw, 1.05rem);
  --h1:  clamp(1.75rem, 1rem + 3.5vw, 4rem);          /* 28 -> 64 px */
  --h2:  clamp(1.5rem, 1.2rem + 1vw, 2rem);           /* 24 -> 32 px */
  --h3:  clamp(1.125rem, 1rem + 0.5vw, 1.375rem);     /* 18 -> 22 px */

  /* Espacements fluides (fondation 8) */
  --e-1: clamp(0.5rem, 1vw, 0.75rem);
  --e-2: clamp(1rem, 2vw, 1.5rem);
  --e-3: clamp(1.5rem, 4vw, 3rem);
  --e-4: clamp(2.5rem, 7vw, 6rem);

  /* Padding container fluide (fondation 9) : 20 -> 60 px */
  --container-padding: clamp(1.25rem, 4vw, 3.75rem);
  /* Marges latérales du header et du hero d'accueil en desktop */
  --header-padding: clamp(1.5rem, 10vw - 4.5rem, 12.125rem);

  --radius-lg: 1.5rem;
  --radius-full: 3.125rem;

  --target: 2.75rem; /* cible tactile minimale : 44 px */

  /* Hauteur du header non défilé : padding vertical x 2 + logo */
  --header-h: calc(2 * clamp(1rem, 2.5vw, 2.1875rem) + var(--logo-h));
  /* Hauteur du logo (couleurs d'origine, sans fond) */
  --logo-h: clamp(3rem, 2.25rem + 1.5vw, 3.75rem);
}

/* ===============================================
   RESET & BASE (fondations 1, 2)
   =============================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  scroll-padding-top: clamp(5.5rem, 4rem + 3vw, 8rem); /* ancres (#contact, #faq, #zone) sous le header fixe */
}

body {
  font-family: "halcom", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--pas);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-white);
  overflow-x: clip;
  text-wrap: pretty;
}

img, picture, video, svg, iframe, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

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

ul, ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* Piège 1 : jamais d'input sous 16 px (zoom iOS) */
input, textarea, select {
  font: inherit;
  font-size: max(1rem, 16px);
}

a, button, [role="button"] {
  touch-action: manipulation;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  text-wrap: balance;
}

h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }

/* Débordements : tout porteur de texte casse les mots trop longs */
:where(p, li, h1, h2, h3, h4, h5, h6, td, dd, dt, span, a, label, strong, em, button, blockquote, figcaption) {
  overflow-wrap: break-word;
}

/* Liens dans le texte courant : soulignés et colorés (distinguables sans la couleur) */
:where(main) :where(p, li, td, dd) a:not(.btn) {
  color: var(--color-green-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* Focus clavier visible partout ; --focus permet d'adapter la couleur au fond */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus, currentColor);
  outline-offset: 2px;
}

/* <main tabindex="-1"> reçoit le focus du lien d'évitement : pas d'anneau sur un bloc entier */
main[tabindex="-1"]:focus {
  outline: none;
}

/* Fondation 3 : min-width: 0 sur les enfants de tous les conteneurs flex/grid */
:where(
  .header__inner, .header__right, .header__phone, .header__email, .nav-desktop__list, .nav-desktop__link,
  .nav-dropdown__link,
  .hamburger, .mobile-nav, .mobile-nav__header, .mobile-nav__close, .mobile-nav__link,
  .mobile-nav__sublink, .mobile-nav__phone, .mobile-nav__email,
  .hero__content, .hero__dots, .hero__toggle, .hero__toggle-icon, .btn,
  .services__grid, .service-card__content, .service-card__arrow,
  .about__grid, .about__content, .about__cta,
  .stats__grid, .stat,
  .section-parallax__content,
  .faq__grid, .accordion__trigger, .accordion__icon,
  .contact__grid, .contact__info, .contact__info-item, .form-row, .form-consent,
  .hero-page, .intro__grid, .zone-grid, .rge-card,
  .features__grid, .feature-card__icon, .process__grid,
  .footer__grid, .footer__bottom, .footer__legal, .footer__legal a, .footer__link,
  .cookies-banner__inner, .cookies-banner__actions, .cookies-banner__btn
) > * {
  min-width: 0;
}

/* ===============================================
   UTILITAIRES
   =============================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Masquage accessible standard (lu par les lecteurs d'écran, invisible) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement : masqué hors focus, visible au clavier */
.skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding: 0.5rem 1rem;
  background: var(--color-white);
  color: var(--color-green-hover);
  font-weight: 700;
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  --focus: var(--color-green-hover);
}

.u-mt-md { margin-top: clamp(1rem, 0.8rem + 1vw, 1.5rem); }     /* ~24 px */
.u-mt-lg { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }     /* ~40 px */

.link-accent {
  color: var(--color-green-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* ===============================================
   HEADER
   =============================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-block: clamp(1rem, 2.5vw, 2.1875rem);
}

/* Effet verre sur la barre de navigation, en haut de page comme au défilement :
   le flou efface le détail de la photo derrière le logo et le menu. */
.header,
.header--transparent {
  background-color: var(--glass-top);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

/* Au défilement, verre teinté plus dense : texte blanc lisible même sur les sections claires */
.header--scrolled {
  padding-block: 0.75rem;
  background-color: var(--glass-scrolled);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

/* Navigateurs sans backdrop-filter : fond plus opaque à la place du flou */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header,
  .header--transparent {
    background-color: rgba(45, 74, 62, 0.6);
  }

  .header--scrolled {
    background-color: rgba(45, 74, 62, 0.95);
  }
}

.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding-inline: var(--container-padding);
}

/* Logo SVG en couleurs d'origine, sans fond */
.header__logo {
  display: block;
  flex: none;
  height: var(--logo-h);
}

.header--scrolled .header__logo {
  height: 2.5rem;
}

.header__logo img {
  height: 100%;
  width: auto;
}

.header__right {
  display: none;
}

.header__phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--target);
  color: var(--color-white);
  font-size: 0.875rem;
  white-space: nowrap;
}

.header__phone svg {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
}

/* E-mail sous le téléphone */
.header__email {
  color: var(--color-white);
  font-size: 0.8125rem;
  opacity: 0.85;
  white-space: nowrap;
}

/* Navigation desktop (affichée à partir de 75rem) */
.nav-desktop {
  display: none;
}

.nav-desktop__list {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 2rem);
}

.nav-desktop__item {
  position: relative;
}

.nav-desktop__link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-height: var(--target);
  font-size: 0.875rem;
  color: var(--color-white);
  white-space: nowrap;
}

.nav-desktop__link.active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.nav-desktop__arrow {
  font-size: 0.625rem;
}

.nav-desktop__link[aria-expanded="true"] .nav-desktop__arrow {
  rotate: 180deg;
}

/* Sous-menu : ouvert par le bouton (aria-expanded), tant que le focus est sur un de ses liens,
   au survol (souris). Sans JS, le focus clavier sur le groupe l'ouvre. */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: -0.625rem;
  min-width: 13.75rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background-color: var(--color-green-hover);
  border-radius: 0.625rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
}

/* Pont invisible : le survol ne se perd pas entre le bouton et le sous-menu */
.nav-dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 0.5rem;
}

.nav-desktop__link[aria-expanded="true"] + .nav-dropdown,
.nav-dropdown:focus-within,
.no-js .nav-desktop__item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-dropdown__link {
  display: flex;
  align-items: center;
  min-height: var(--target);
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  color: var(--color-white);
  border-radius: 0.375rem;
}

.nav-dropdown__link--hub {
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.375rem 0.375rem 0 0;
  margin-bottom: 0.25rem;
}

.nav-dropdown__link[aria-current="page"] {
  background: rgba(255, 255, 255, 0.15);
}

/* Hamburger : cible tactile 44 x 44 */
.hamburger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  width: var(--target);
  height: var(--target);
  margin-inline-end: -0.5rem;
  --focus: var(--color-white);
}

.hamburger__line {
  width: 1.75rem;
  height: 2px;
  background: var(--color-white);
}

/* ===============================================
   MENU MOBILE
   =============================================== */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--color-dark);
  color: var(--color-white);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-100%);
  visibility: hidden; /* fermé : hors de l'ordre de tabulation et ignoré par le script de détection */
}

.mobile-nav.active {
  transform: none;
  visibility: visible;
}

.mobile-nav__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
}

.mobile-nav__logo {
  display: block;
  height: 3rem;
}

.mobile-nav__logo img {
  height: 100%;
  width: auto;
}

.mobile-nav__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--target);
  height: var(--target);
  margin-inline-end: -0.5rem;
  color: var(--color-white);
  font-size: 2rem;
  line-height: 1;
}

.mobile-nav__menu {
  padding-inline: 1.5rem;
}

.mobile-nav__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: var(--target);
  padding-block: 0.75rem;
  color: var(--color-white);
  font-size: 1.125rem;
  text-align: left;
}

.mobile-nav__link.active,
.mobile-nav__link[aria-current="page"],
.mobile-nav__sublink[aria-current="page"] {
  color: var(--color-gold);
}

.mobile-nav__icon {
  flex: none;
  font-size: 1.25rem;
}

.mobile-nav__item.open .mobile-nav__icon,
.mobile-nav__link[aria-expanded="true"] .mobile-nav__icon {
  rotate: 45deg;
}

.mobile-nav__submenu {
  display: none;
  padding: 0 0 1rem 1rem;
}

.mobile-nav__item.open .mobile-nav__submenu,
.mobile-nav__link[aria-expanded="true"] + .mobile-nav__submenu {
  display: block;
}

.mobile-nav__sublink {
  display: flex;
  align-items: center;
  min-height: var(--target);
  padding-block: 0.5rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9375rem;
}

/* Pied du menu : dans le flux, poussé en bas, ne recouvre jamais les liens */
.mobile-nav__footer {
  margin-top: auto;
  padding: 1.5rem;
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--target);
  padding: 0.625rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-full);
  color: var(--color-white);
  font-weight: 700;
}

.mobile-nav__email {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target);
  margin-top: 0.5rem;
  color: var(--color-white);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
  text-align: center;
}

/* ===============================================
   HERO SLIDER (accueil)
   =============================================== */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
}

.hero__slide.active {
  opacity: 1;
  visibility: visible;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--overlay-hero);
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  padding: 5.5rem var(--container-padding) var(--e-3);
  text-shadow: var(--text-shadow-hero);
}

.hero__surtitle {
  font-size: clamp(1.15rem, 0.9rem + 1.2vw, 2.5rem); /* 18 -> 40 px */
  color: var(--color-white);
  margin-bottom: 0.75rem;
  opacity: 0;
  transform: translateY(-1.25rem);
}

.hero__title {
  font-size: clamp(2rem, 1.2rem + 4.5vw, 5rem); /* 32 -> 80 px */
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.05;
  margin-bottom: var(--e-3);
  text-align: left;
  opacity: 0;
  transform: translateY(-1.25rem);
}

.hero .btn {
  opacity: 0;
  transform: translateY(-1.25rem);
  text-shadow: none;
  --focus: var(--color-white);
}

.hero__slide.active .hero__surtitle,
.hero__slide.active .hero__title,
.hero__slide.active .btn {
  opacity: 1;
  transform: none;
}

/* Points de navigation : cible 44 px, point visuel en ::before */
.hero__dots {
  position: absolute;
  right: clamp(0.5rem, 3vw, 3rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.hero__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--target);
  height: var(--target);
  --focus: var(--color-white);
}

.hero__dot::before {
  content: '';
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.hero__dot.active::before,
.hero__dot[aria-current="true"]::before {
  background: var(--color-white);
}

/* Bouton pause / lecture du carrousel (créé par main.js sous les points) */
.hero__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--target);
  height: var(--target);
  color: var(--color-white);
  font-size: 0.75rem;
  line-height: 1;
  text-shadow: var(--text-shadow-hero);
  --focus: var(--color-white);
}

.hero__toggle[hidden] {
  display: none;
}

.hero__toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
}

/* ===============================================
   BOUTONS
   =============================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target);
  padding: 1rem clamp(1.5rem, 1rem + 2vw, 2.5rem);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  max-width: 100%;
  overflow-wrap: anywhere; /* anywhere réduit le min-content du texte (item flex anonyme) */
  border-radius: var(--radius-full);
}

.btn--primary {
  background: var(--color-green);
  color: var(--color-white);
  --focus: var(--color-green-hover);
}

/* ===============================================
   TITRES ET SURTITRES COMMUNS
   =============================================== */
.surtitle {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  color: var(--color-green);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Sur fond teinté, le vert standard passe sous 4,5:1 : vert foncé */
:is(.section-about, .section-services, .section-contact, .section-features) .surtitle {
  color: var(--color-green-hover);
}

.section-services--alt .surtitle {
  color: var(--color-green);
}

.section-title {
  font-size: var(--h2);
  font-weight: 700;
  color: var(--color-brown);
  line-height: 1.25;
  margin-bottom: 1.25rem;
}

/* Le h1 de l'accueil porte .section-title : un cran au-dessus des h2 */
h1.section-title {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
}

/* En-têtes de section centrés */
.services__header,
.features__header,
.process__header {
  text-align: center;
  margin-bottom: var(--e-3);
}

/* Cadres d'image communs (carré arrondi) */
.about__image-frame,
.faq__image-frame,
.intro__image-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.about__image-frame img,
.faq__image-frame img,
.intro__image-frame img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Rythme vertical commun des sections (fondation 8) */
.section-services,
.section-about,
.section-stats,
.section-faq,
.section-contact,
.section-intro,
.section-features,
.section-process {
  padding-block: var(--e-4);
}

/* ===============================================
   SECTION SERVICES (cartes)
   =============================================== */
.section-services {
  padding-inline: var(--container-padding);
  background: var(--bg-tint-1);
}

.section-services .container {
  max-width: 87.5rem;
  padding-inline: 0;
}

.services__title {
  font-size: var(--h2);
  font-weight: 700;
  color: var(--color-brown);
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.services__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

/* Inclinaison par la propriété rotate (indépendante de transform/translate du fade-in) */
.service-card {
  position: relative;
  display: block;
  flex: 0 1 auto;
  width: clamp(8.75rem, 45vw, 16.25rem);
  aspect-ratio: 200 / 320;
  border-radius: 1.25rem;
  overflow: hidden;
}

.service-card:nth-child(1) { rotate: -2deg; }
.service-card:nth-child(2) { rotate: 1deg; }
.service-card:nth-child(3) { rotate: -1deg; }
.service-card:nth-child(4) { rotate: 2deg; }

.service-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dégradé sombre sous le libellé */
.service-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 100%);
  pointer-events: none;
}

.service-card__content {
  position: absolute;
  bottom: 1.25rem;
  left: 1rem;
  right: 1rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.service-card__label {
  max-width: 70%;
  color: var(--color-white);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3;
}

.service-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  background: #c45c35;
  border-radius: 50%;
}

.service-card__arrow svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-white);
}

.section-services--alt {
  background: var(--color-white);
}

/* ===============================================
   SECTION A PROPOS
   =============================================== */
.section-about {
  background: var(--bg-tint-2);
}

.about__grid {
  display: grid;
  gap: var(--e-3);
}

.about__image-wrapper {
  position: relative;
}

.about__content {
  display: flex;
  flex-direction: column;
}

.about__text {
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.about__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin-top: 1rem;
}

.rge-badge {
  height: 3.125rem;
  width: auto;
}

/* ===============================================
   SECTION CHIFFRES
   =============================================== */
.section-stats {
  background: var(--color-white);
  border-top: 1px solid var(--color-brown-10);
  border-bottom: 1px solid var(--color-brown-10);
}

.stats__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-3);
}

.stat {
  flex: 1 1 6.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat__number {
  max-width: 100%;
  font-size: clamp(1.75rem, 1rem + 3vw, 2.625rem); /* 28 -> 42 px */
  font-weight: 700;
  color: var(--color-green);
  line-height: 1;
  overflow-wrap: anywhere;
}

.stat__number sup {
  font-size: 0.5em;
}

.stat__label {
  max-width: 100%;
  margin-top: 0.5rem;
  overflow-wrap: anywhere;
  font-size: 0.8125rem;
  color: var(--color-brown);
}

/* ===============================================
   SECTION PARALLAXE
   =============================================== */
.section-parallax {
  position: relative;
  z-index: 0;
  min-height: clamp(25rem, 60svh, 38.5rem);
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  overflow: hidden;
}

.section-parallax::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--overlay-parallax);
}

.section-parallax__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: inherit;
  padding: var(--e-3) var(--container-padding);
  color: var(--color-white);
  text-align: center;
  text-shadow: var(--text-shadow-hero);
}

.section-parallax__content .btn {
  text-shadow: none;
  --focus: var(--color-white);
}

.section-parallax__title {
  max-width: 100%;
  margin-bottom: 0;
  color: var(--color-white);
  font-size: clamp(1.25rem, 0.9rem + 1.5vw, 2.25rem); /* 20 -> 36 px */
  font-weight: 700;
  text-align: center;
}

/* Liens de texte sur fond sombre : blancs et soulignés */
:is(.hero-page, .section-parallax) :where(p, li) a:not(.btn) {
  color: inherit;
}

/* ===============================================
   SECTION FAQ (accordéon : aria-expanded + attribut hidden)
   =============================================== */
.section-faq {
  background: var(--color-white);
}

.faq__grid {
  display: grid;
  gap: var(--e-3);
}

.faq__header {
  margin-bottom: var(--e-2);
}

.accordion {
  border-bottom: 1px dashed var(--color-brown-50);
}

/* Le h3 n'existe que pour la structure : aucune incidence visuelle */
.accordion__heading {
  margin: 0;
  font: inherit;
  line-height: inherit;
  text-wrap: wrap;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: var(--target);
  padding-block: 1.125rem;
  text-align: left;
  color: var(--color-text);
}

.accordion__question {
  flex: 1;
  font-size: 0.9375rem;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.accordion__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-brown);
  color: var(--color-white);
  font-size: 1.125rem;
  line-height: 1;
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
  rotate: 45deg;
}

/* Sans JS, les réponses restent lisibles (le bouton ne peut pas les ouvrir) */
.no-js .accordion__content[hidden] {
  display: block;
}

.no-js .accordion__icon {
  display: none;
}

/* Aucune hauteur plafonnée : le contenu fermé porte l'attribut hidden */
.accordion__answer {
  padding-bottom: 1.125rem;
  font-size: 0.875rem;
  color: var(--color-text-light);
  line-height: 1.6;
}

/* ===============================================
   SECTION CONTACT ET FORMULAIRE
   =============================================== */
.section-contact {
  background: var(--bg-tint-1);
}

.contact__grid {
  display: grid;
  gap: var(--e-3);
}

.contact__form {
  padding: var(--e-3) var(--e-2);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Sur la carte blanche du formulaire, le vert standard suffit */
.section-contact .contact__form .surtitle {
  color: var(--color-green);
}

.contact__form-title,
.contact__info-title {
  font-size: var(--h2);
  font-weight: 700;
  color: var(--color-brown);
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.form-notice {
  margin-bottom: var(--e-2);
  padding: 0.875rem 1rem;
  border-left: 4px solid currentColor;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.form-notice--ok {
  background: #e7f3ec;
  color: var(--color-green-hover);
}

.form-notice--error {
  background: #fbeaea;
  color: #9b1c1c;
}

.form-notice__list {
  margin-top: 0.5rem;
  padding-left: 1.25rem;
  list-style: disc;
}

.form-notice a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Champ piège anti-spam : hors écran pour les humains, présent pour les robots (pas display:none) */
.form-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.form-trap > * {
  display: block;
  width: 1px;
}

.form-row {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-input {
  width: 100%;
  min-height: var(--target);
  padding: 0.75rem 0;
  border: none;
  border-bottom: 1px solid var(--color-brown-80); /* 3,9:1 sur blanc (contraste non textuel) */
  border-radius: 0;
  background: transparent;
  font-size: max(1rem, 16px);
  color: var(--color-text);
  --focus: var(--color-green);
}

.form-input:focus {
  border-bottom-color: var(--color-brown);
}

.form-input[aria-invalid="true"] {
  border-bottom: 2px solid #b42318; /* erreur : couleur + épaisseur (pas la couleur seule) */
}

/* reCAPTCHA v2 : widget de 304 x 78 px, réduit sur les écrans les plus étroits */
.form-recaptcha {
  margin-top: 1.25rem;
  min-height: 78px;
}

.form-recaptcha__hint {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--color-text-light);
}

.form-recaptcha--done .form-recaptcha__hint {
  display: none;
}

@media (max-width: 359px) {
  .form-recaptcha .g-recaptcha {
    transform: scale(0.88);
    transform-origin: 0 0;
  }
}

.form-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

form[aria-busy="true"] .form-submit {
  opacity: 0.7;
  cursor: progress;
}

.form-input::placeholder {
  color: var(--color-text-light); /* 5,3:1 sur blanc */
  opacity: 1;
}

.form-textarea {
  min-height: 6.25rem;
  resize: vertical;
}

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text);
}

.form-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.5rem;  /* cible 24 x 24 (WCAG 2.5.8) */
  height: 1.5rem;
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-green);
}

.form-consent label {
  flex: 1;
  cursor: pointer;
}

.form-consent a {
  color: var(--color-green-hover);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.form-submit {
  width: 100%;
  margin-top: var(--e-2);
}

/* Coordonnées */
.contact__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact__info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.contact__info-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  color: var(--color-green);
}

.contact__info-label {
  display: block;
  font-size: 0.75rem;
  color: var(--color-brown); /* 5,4:1 sur le fond teinté */
}

.contact__info-value {
  font-size: 0.875rem;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

/* Liens de coordonnées sur leur propre ligne : cible tactile 44 px */
a.contact__info-value {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: var(--target);
}

a.contact__info-value,
.contact__info-value a {
  text-decoration: underline;
  text-decoration-color: var(--color-brown-50);
  text-underline-offset: 0.2em;
}

/* ===============================================
   HERO PAGE (pages internes)
   =============================================== */
.hero-page {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(17.5rem, 45svh, 28.125rem);
  padding-block: 5rem var(--e-2);
  text-align: center;
  overflow: hidden;
}

.hero-page__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.hero-page__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--overlay-page);
}

.hero-page__content {
  position: relative;
  z-index: 1;
  max-width: 100%;
  padding-inline: var(--container-padding);
  color: var(--color-white);
  text-shadow: var(--text-shadow-hero);
}

.hero-page--plain {
  background: var(--color-green-hover);
}

/* Fil d'Ariane (includes/breadcrumb.php), en tête du bandeau de page */
.breadcrumb {
  margin-bottom: var(--e-1, 0.75rem);
  font-size: 0.875rem;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb__item {
  min-width: 0;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: '›';
  margin-right: 0.5rem;
  opacity: 0.8;
}

.hero-page__content .breadcrumb__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.hero-page__surtitle {
  display: block;
  margin-bottom: 1rem;
  font-size: clamp(0.75rem, 0.7rem + 0.3vw, 0.875rem); /* 12 -> 14 px */
  text-transform: uppercase;
  letter-spacing: 0.125rem;
}

.hero-page__title {
  margin-bottom: 1rem;
  font-size: var(--h1);
  font-weight: 700;
  line-height: 1.15;
}

.hero-page__subtitle {
  max-width: 68ch;
  margin-inline: auto;
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.25rem); /* 15 -> 20 px */
  line-height: 1.5;
}

/* Variante compacte (pages légales) */
.hero-page--compact {
  min-height: clamp(15rem, 35svh, 20rem);
}

.hero-page__title--compact {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
}

/* ===============================================
   SECTION INTRO
   =============================================== */
.section-intro {
  background: var(--color-white);
}

.intro__grid {
  display: grid;
  gap: var(--e-3);
}

.intro__content .section-title {
  margin-bottom: 1.5rem;
}

.intro__content--narrow {
  width: 100%; /* item de grille à marges auto : sans width, il prend son min-content (long mot) */
  max-width: 56rem;
  margin-inline: auto;
}

.intro__text {
  margin-bottom: 1rem;
  color: var(--color-text);
  line-height: 1.7;
}

.intro__content .btn {
  margin-top: 1rem;
}

/* Bloc RGE commun (includes/bloc-rge.php) : logo au-dessus du texte sur mobile, à côté dès 48rem */
.rge-card {
  display: grid;
  gap: var(--e-2);
  margin-bottom: 1rem;
}

.rge-card__logo {
  width: clamp(5rem, 20vw, 7.5rem);
  height: auto;
}

.rge-card .intro__text {
  margin-bottom: 0;
}

.legal-list {
  margin-bottom: 1rem;
  padding-left: 1.25rem;
  list-style: disc;
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* Zone d'intervention : cartes texte (h3 + paragraphe) */
.zone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--e-2);
  margin-block: var(--e-2) var(--e-3);
}

.zone-grid > * {
  padding: var(--e-2);
  background: var(--bg-tint-1);
  border-radius: 1rem;
}

.zone-grid h3 {
  margin-bottom: 0.5rem;
  font-size: var(--h3);
  color: var(--color-brown);
}

.zone-grid p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
}

/* ===============================================
   SECTION FEATURES
   =============================================== */
.section-features {
  background: var(--bg-tint-1);
}

.features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-2);
}

.feature-card {
  padding: var(--e-3) var(--e-2);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.feature-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1.25rem;
  background: rgba(41, 125, 77, 0.1);
  border-radius: 50%;
}

.feature-card__icon svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-green);
}

.feature-card__title {
  margin-bottom: 0.75rem;
  font-size: var(--h3);
  font-weight: 700;
  color: var(--color-brown);
}

.feature-card__text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text);
}

/* Texture de matériau en tête de carte (finitions de l'isolation extérieure) */
.feature-card__texture {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: var(--e-2);
  border-radius: var(--radius-lg);
}

/* ===============================================
   SECTION PROCESS
   =============================================== */
.section-process {
  background: var(--color-white);
}

.process__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-3);
}

.process-step {
  text-align: center;
}

.process-step__number {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: clamp(2.25rem, 1.75rem + 2vw, 3rem);
  font-weight: 700;
  color: var(--color-green);
  opacity: 0.3;
}

.process-step__title {
  margin-bottom: 0.75rem;
  font-size: var(--h3);
  font-weight: 700;
  color: var(--color-brown);
}

.process-step__text {
  max-width: 20rem;
  margin-inline: auto;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text);
}

/* ===============================================
   FOOTER (fond marron : textes >= 4,5:1)
   =============================================== */
.footer {
  padding-block: var(--e-4) var(--e-2);
  background: var(--color-brown);
  color: var(--color-white);
  --focus: var(--color-white);
}

.footer__grid {
  display: grid;
  gap: var(--e-3);
  margin-bottom: var(--e-3);
}

.footer__logo {
  display: block;
  height: var(--logo-h);
  margin-bottom: 1rem;
}

.footer__logo img {
  height: 100%;
  width: auto;
}

.footer__desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

.footer__title {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
}

.footer__link {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: var(--target);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, 0.92);
}

.footer__contact-info {
  font-size: 0.875rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.92);
}

.footer__contact-info a,
.footer__bottom p a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Téléphone et e-mail du footer : cible tactile 44 px */
.footer__contact-info a {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: var(--target);
  overflow-wrap: anywhere;
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: var(--e-2);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.75rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.88);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1rem;
}

.footer__legal a,
.footer__cookies {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: var(--target);
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, 0.88);
}

.footer__cookies {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

/* ===============================================
   ANIMATION D'APPARITION
   L'état masqué n'existe qu'avec JS actif et mouvement autorisé (bloc no-preference en fin de fichier) :
   sans JS, à l'impression ou en mouvement réduit, le contenu est visible.
   =============================================== */

/* ===============================================
   BREAKPOINTS (mobile-first, min-width en rem)
   =============================================== */

/* Petit mobile large : bouton d'envoi à sa largeur naturelle */
@media (min-width: 30rem) {
  .form-submit {
    width: auto;
  }
}

/* Tablette */
@media (min-width: 48rem) {
  .rge-card {
    grid-template-columns: auto 1fr;
    align-items: start;
  }

  .hero {
    min-height: max(37.5rem, 100svh);
  }

  .service-card__label {
    font-size: 0.9375rem;
  }

  .about__grid {
    grid-template-columns: 1fr 1.3fr;
    align-items: center;
  }

  .faq__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .contact__grid {
    grid-template-columns: 1fr 1fr;
  }

  .contact__form {
    padding: var(--e-3);
  }

  .form-row {
    grid-template-columns: 1fr 1fr;
  }

  .intro__grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .intro__grid--solo {
    grid-template-columns: 1fr;
  }

  /* Fondation 5 : grille intrinsèque */
  .features__grid,
  .process__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  }

  .zone-grid--duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zone-grid--trio {
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer__bottom {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
}

/* Desktop */
@media (min-width: 64rem) {
  .header__inner,
  .hero__content {
    padding-inline: var(--header-padding);
  }

  /* Téléphone visible dès 64rem, groupé à droite avec le hamburger */
  .header__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-inline-start: auto;
  }

  .section-parallax {
    background-attachment: fixed;
  }

  .footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }

  .hero-page {
    min-height: clamp(28rem, 50svh, 31.25rem);
  }

  .hero-page--compact {
    min-height: clamp(18rem, 35svh, 22rem);
  }
}

/* Navigation desktop : à partir de 75rem, la nav tient entre logo et téléphone sans chevauchement */
@media (min-width: 75rem) {
  .header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
  }

  .nav-desktop {
    display: block;
    justify-self: center;
  }

  .hamburger {
    display: none;
  }
}

/* Paysage mobile (piège 15) : le hero d'accueil garde une hauteur (contenu en absolu),
   les heros de page se resserrent sur leur contenu */
@media (max-height: 30rem) and (orientation: landscape) {
  .hero {
    min-height: max(20rem, 100svh);
  }

  .hero__content {
    padding-block: 4.5rem 1rem;
  }

  .hero__title {
    margin-bottom: 1rem;
  }

  .hero-page,
  .hero-page--compact {
    min-height: auto;
    padding-block: calc(var(--header-h) + var(--e-1)) var(--e-3);
  }
}

/* ===============================================
   SURVOL : uniquement sur appareils à pointeur fin (piège 3)
   =============================================== */
@media (hover: hover) and (pointer: fine) {
  .nav-desktop__link:hover {
    opacity: 0.8;
  }

  .nav-desktop__item:hover .nav-desktop__arrow {
    rotate: 180deg;
  }

  .nav-desktop__item:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-dropdown__link:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  .mobile-nav__sublink:hover {
    color: var(--color-white);
  }

  .hero__dot:hover::before {
    background: var(--color-white);
  }

  .btn--primary:hover {
    background: var(--color-green-hover);
    translate: 0 -2px;
  }

  .service-card:hover {
    rotate: 0deg;
  }

  .service-card:hover .service-card__image {
    transform: scale(1.1);
  }

  a.contact__info-value:hover,
  .contact__info-value a:hover {
    color: var(--color-green-hover);
  }

  :where(main) :where(p, li, td, dd) a:not(.btn):hover,
  .link-accent:hover {
    text-decoration-thickness: 2px;
  }

  .footer__link:hover,
  .footer__legal a:hover,
  .footer__cookies:hover {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  /* Pointeur précis : les liens du footer peuvent être plus serrés */
  .footer__link,
  .footer__legal a,
  .footer__cookies {
    min-height: 2rem;
  }
}

/* ===============================================
   MOUVEMENT : transitions et animations seulement si l'utilisateur ne demande pas
   de réduire les animations (piège 14, sans déclaration prioritaire)
   =============================================== */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .header {
    transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  }

  .header__logo {
    transition: height 0.3s ease;
  }

  .nav-desktop__link {
    transition: opacity 0.3s ease;
  }

  .nav-desktop__arrow,
  .mobile-nav__icon,
  .accordion__icon {
    transition: rotate 0.2s ease;
  }

  .nav-dropdown {
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
  }

  .nav-dropdown__link {
    transition: background-color 0.2s ease;
  }

  .mobile-nav {
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }

  .mobile-nav.active {
    transition: transform 0.3s ease, visibility 0s linear 0s;
  }

  .hero__slide {
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
  }

  .hero__surtitle {
    transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
  }

  .hero__title {
    transition: opacity 0.8s ease 0.5s, transform 0.8s ease 0.5s;
  }

  .hero .btn {
    transition: opacity 0.8s ease 0.7s, transform 0.8s ease 0.7s, background-color 0.3s ease, translate 0.3s ease;
  }

  .hero__dot::before {
    transition: background-color 0.3s ease;
  }

  .btn {
    transition: background-color 0.3s ease, translate 0.3s ease;
  }

  .service-card {
    transition: rotate 0.3s ease, opacity 0.5s ease, translate 0.5s ease;
  }

  .service-card__image {
    transition: transform 0.5s ease;
  }

  .form-input {
    transition: border-color 0.3s ease;
  }

  .footer__link,
  .footer__legal a,
  a.contact__info-value,
  .contact__info-value a {
    transition: color 0.3s ease;
  }

  .accordion__content:not([hidden]) {
    animation: accordion-ouverture 0.25s ease;
  }

  @keyframes accordion-ouverture {
    from { opacity: 0; translate: 0 -0.25rem; }
    to   { opacity: 1; translate: none; }
  }

  /* Apparition au défilement : masqué seulement si JS est actif (classe .js posée dans le head) */
  .js .fade-in {
    opacity: 0;
    translate: 0 1.25rem;
    transition: opacity 0.5s ease, translate 0.5s ease;
  }

  .js .fade-in.visible {
    opacity: 1;
    translate: none;
  }

  .js .service-card.fade-in {
    transition: rotate 0.3s ease, opacity 0.5s ease, translate 0.5s ease;
  }
}

/* ===============================================
   IMPRESSION
   =============================================== */
@media print {
  .header,
  .mobile-nav,
  .cookies-banner,
  .skip-link,
  .hero__dots,
  .hero__toggle,
  .contact__form,
  .section-parallax,
  .service-card__arrow {
    display: none;
  }

  body {
    color: #000;
    background: #fff;
  }

  .fade-in,
  .js .fade-in {
    opacity: 1;
    translate: none;
    transform: none;
  }

  /* Heros : texte foncé sans image */
  .hero,
  .hero-page {
    min-height: auto;
    padding-block: 1rem;
  }

  .hero__slide {
    position: static;
    opacity: 1;
    visibility: visible;
  }

  .hero__bg,
  .hero-page__bg {
    display: none;
  }

  .hero__content {
    height: auto;
    padding: 0 0 1rem;
  }

  .hero__surtitle,
  .hero__title,
  .hero .btn,
  .hero-page__content {
    opacity: 1;
    transform: none;
    color: #000;
    text-shadow: none;
  }

  .hero__title {
    font-size: 1.75rem;
  }

  /* FAQ : toutes les réponses imprimées */
  .accordion__content[hidden] {
    display: block;
  }

  .accordion__icon {
    display: none;
  }

  .section-services,
  .section-about,
  .section-stats,
  .section-faq,
  .section-contact,
  .section-intro,
  .section-features,
  .section-process {
    padding-block: 1rem;
    background: none;
  }

  .footer {
    background: none;
    color: #000;
    padding-block: 1rem;
  }

  .footer__desc,
  .footer__link,
  .footer__contact-info,
  .footer__bottom,
  .footer__legal a {
    color: #000;
  }

  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    overflow-wrap: anywhere;
  }
}