/* =========================================================================
   ELEKTRO MUSTERMANN GMBH — feuille de style unique
   -------------------------------------------------------------------------
   SOMMAIRE
   01 · Variables (:root)          10 · Étapes (Ablauf)
   02 · Réinitialisation           11 · Références
   03 · Typographie                12 · Témoignages
   04 · Conteneurs / sections      13 · FAQ
   05 · En-tête + navigation       14 · Bande d'appel (CTA)
   06 · Boutons                    15 · Contact + formulaire
   07 · Héros                      16 · Pages légales
   08 · Bandeau de chiffres        17 · Pied de page
   09 · Cartes de prestations      18 · WhatsApp / a11y / animation
                                   19 · Impression
   ========================================================================= */


/* == 01 · VARIABLES ======================================================
   Changer --or et --electrique suffit à changer l'identité du site.      */

:root{
  /* Fonds sombres */
  --nuit:        #0B1120;
  --nuit-2:      #131C2E;
  --nuit-3:      #1C2740;
  --ligne-nuit:  rgba(255,255,255,.10);

  /* Fonds clairs */
  --creme:       #F8F7F4;
  --creme-2:     #F1EFEA;
  --blanc:       #FFFFFF;
  --bord:        #E7E4DD;

  /* Textes */
  --encre:       #0B1120;
  --gris:        #566072;   /* 5.9:1 sur crème */
  --gris-clair:  #A7B0C0;   /* 8.5:1 sur nuit */

  /* Accents */
  --or:          #FFB020;
  --or-2:        #FF8A3D;
  --or-fonce:    #C97E00;
  --electrique:  #3D6BFF;

  /* Dégradés — réservés aux fonds sombres et aux accents */
  --deg-or:      linear-gradient(135deg, #FFC24D 0%, #FFB020 45%, #FF8A3D 100%);
  --deg-titre:   linear-gradient(100deg, #FFD37A 0%, #FFB020 55%, #FF8A3D 100%);

  /* Rayons */
  --r-xs: 8px;
  --r-s:  12px;
  --r-m:  18px;
  --r-l:  26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* Ombres douces et étagées */
  --ombre-s: 0 1px 2px rgba(11,17,32,.05), 0 4px 12px -4px rgba(11,17,32,.08);
  --ombre-m: 0 2px 4px rgba(11,17,32,.04), 0 16px 36px -12px rgba(11,17,32,.14);
  --ombre-l: 0 4px 8px rgba(11,17,32,.05), 0 32px 64px -20px rgba(11,17,32,.22);
  --lueur-or: 0 12px 30px -10px rgba(255,138,61,.55);

  /* Typographie */
  --f-titre: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --f-texte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Rythme */
  --air:       clamp(4.5rem, 9vw, 7.5rem);
  --gouttiere: clamp(1.15rem, 4vw, 2.5rem);
  --largeur:   1200px;
  --largeur-eng: 780px;
  --h-entete:  4.5rem;

  /* Mouvement */
  --vite:  180ms cubic-bezier(.2,.7,.3,1);
  --doux:  340ms cubic-bezier(.2,.7,.3,1);
}

@media (min-width: 901px){ :root{ --h-entete: 5.25rem; } }


/* == 02 · RÉINITIALISATION =============================================== */

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

html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: 1rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img{
  display: block;
  max-width: 100%;
  height: auto;
  background-color: var(--creme-2); /* fond de repli si l'image manque */
}

ul, ol{ margin: 0; padding: 0; list-style: none; }
figure{ margin: 0; }
p{ margin: 0 0 1.1rem; }
p:last-child{ margin-bottom: 0; }
svg{ display: block; }

[id]{ scroll-margin-top: calc(var(--h-entete) + 2rem); }


/* == 03 · TYPOGRAPHIE ==================================================== */

h1, h2, h3, h4{
  margin: 0;
  font-family: var(--f-titre);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
  /* Les mots composes allemands portent un trait conditionnel (­) pose a
     la jointure : « Elektro-installation ». « break-word » coupait un
     caractere APRES ce trait, parce qu'il autorise la coupure partout et
     remplit la ligne au maximum. Il est donc reserve aux ecrans tres
     etroits, ou un mot sans trait deborderait. */
  overflow-wrap: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
}

@media (max-width: 400px) {
  h1, h2, h3, h4 { overflow-wrap: break-word; }
}

h1{ font-size: clamp(2.2rem, 6.2vw, 4.4rem); }
h2{ font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3{ font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 700; line-height: 1.25; }
h4{ font-size: 1.05rem; font-weight: 700; }

/* Mot mis en avant dans un titre, sur fond sombre */
.eclat{
  background: var(--deg-titre);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Petite étiquette au-dessus des titres */
.etiquette{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.15rem;
  padding: .42rem .85rem .42rem .6rem;
  border: 1px solid var(--bord);
  border-radius: var(--r-pill);
  background: var(--blanc);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gris);
}
.etiquette::before{
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--deg-or);
  box-shadow: 0 0 0 3px rgba(255,176,32,.20);
}
.sombre .etiquette,
.cta-bloc .etiquette{
  background: rgba(255,255,255,.06);
  border-color: var(--ligne-nuit);
  color: var(--gris-clair);
}

.chapeau{
  max-width: 60ch;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--gris);
}
.sombre .chapeau{ color: var(--gris-clair); }

.petit{ font-size: .9rem; color: var(--gris); }
.sombre .petit{ color: var(--gris-clair); }

.nombres{ font-variant-numeric: tabular-nums; }


/* == 04 · CONTENEURS ET SECTIONS ========================================= */

.wrap{
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.wrap--eng{ max-width: var(--largeur-eng); }

.section{ padding-block: var(--air); }
.section--court{ padding-block: clamp(3rem, 6vw, 4.5rem); }
.section--creme{ background: var(--creme-2); }

/* Bloc sombre : coins arrondis généreux, dégradés lumineux discrets */
.sombre{
  position: relative;
  background: var(--nuit);
  color: var(--blanc);
  overflow: hidden;
}
.sombre h1, .sombre h2, .sombre h3, .sombre h4{ color: var(--blanc); }
.sombre p{ color: var(--gris-clair); }

/* Halos colorés — c'est ce qui donne la profondeur */
.sombre::before{
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130%;
  background:
    radial-gradient(48% 60% at 12% 8%,  rgba(255,176,32,.20), transparent 62%),
    radial-gradient(42% 55% at 88% 22%, rgba(61,107,255,.26), transparent 64%);
  pointer-events: none;
}
/* Trame technique très légère par-dessus le halo */
.sombre::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 78%);
  pointer-events: none;
}
.sombre > *{ position: relative; z-index: 1; }

.entete-section{ max-width: 60ch; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.entete-section h2{ margin-bottom: 1.1rem; }

/* Titre à gauche + lien à droite */
.entete-ligne{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}
.entete-ligne .entete-section{ margin-bottom: 0; }


/* == 05 · EN-TÊTE ET NAVIGATION ========================================== */

.entete{
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(248,247,244,.82);
  border-bottom: 1px solid var(--bord);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .entete{
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
  }
}

.entete-inner{
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 3vw, 2rem);
  min-height: var(--h-entete);
}

/* Logo : pastille en dégradé + nom */
.logo{
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-right: auto;
  text-decoration: none;
  color: var(--encre);
}
.logo-marque{
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--deg-or);
  box-shadow: var(--lueur-or);
  flex: none;
}
.logo-marque svg{ width: 22px; height: 22px; color: var(--nuit); }
.logo-nom{
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.logo-sous{
  display: block;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris);
}

/* Navigation de bureau : liens en pastille au survol */
.nav ul{ display: flex; align-items: center; gap: .2rem; }
.nav a{
  position: relative;
  display: block;
  padding: .55rem .85rem;
  border-radius: var(--r-pill);
  font-size: .93rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  color: var(--gris);
  transition: color var(--vite), background-color var(--vite);
}
.nav a:hover{ color: var(--encre); background: rgba(11,17,32,.05); }
.nav a[aria-current="page"]{ color: var(--encre); font-weight: 600; }
.nav a[aria-current="page"]::after{
  content: "";
  position: absolute;
  left: 50%; bottom: .1rem;
  width: 18px; height: 3px;
  transform: translateX(-50%);
  border-radius: var(--r-pill);
  background: var(--deg-or);
}

.entete-tel{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: var(--encre);
  white-space: nowrap;
}
.entete-tel svg{ width: 17px; height: 17px; color: var(--or-fonce); }
.entete-tel:hover{ color: var(--or-fonce); }

/* Menu mobile : <details> natif — fonctionne sans JavaScript */
.burger{ display: none; margin-left: auto; }
.burger summary{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem .9rem;
  border: 1px solid var(--bord);
  border-radius: var(--r-pill);
  background: var(--blanc);
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.burger summary::-webkit-details-marker{ display: none; }
.burger-traits{
  width: 15px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}
.burger .ferme{ display: none; }
.burger[open] .ouvre{ display: none; }
.burger[open] .ferme{ display: inline; }

/* Ancré sous l'en-tête (qui est « sticky », donc positionné).
   Volontairement en `absolute` et non `fixed` : le filtre d'arrière-plan
   de l'en-tête crée un bloc conteneur qui casserait `position: fixed`. */
.burger-panneau{
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  z-index: 70;
  max-height: calc(100vh - var(--h-entete));
  padding: 1.25rem var(--gouttiere) 2rem;
  background: var(--creme);
  border-top: 1px solid var(--bord);
  box-shadow: var(--ombre-l);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.burger-liste li + li{ border-top: 1px solid var(--bord); }
.burger-liste a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem .25rem;
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.025em;
  text-decoration: none;
  color: var(--encre);
}
.burger-liste a[aria-current="page"]{ color: var(--or-fonce); }
.burger-liste a::after{ content: "\2192"; color: var(--gris); font-size: 1rem; }
.burger-pied{ display: grid; gap: 1rem; margin-top: 2rem; }

/* Sélecteurs volontairement plus spécifiques que .btn, défini plus bas */
@media (max-width: 960px){
  .entete .nav,
  .entete .entete-cta,
  .entete .entete-tel{ display: none; }
  .entete .burger{ display: block; }
}


/* == 06 · BOUTONS ======================================================== */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--vite), box-shadow var(--vite),
              background-color var(--vite), color var(--vite), border-color var(--vite);
}
.btn svg{ width: 18px; height: 18px; }

.btn--or{
  background: var(--deg-or);
  color: var(--nuit);
  box-shadow: var(--lueur-or);
}
.btn--or:hover{ transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(255,138,61,.65); }
.btn--or:active{ transform: translateY(0); }

.btn--nuit{ background: var(--encre); color: var(--blanc); }
.btn--nuit:hover{ transform: translateY(-2px); box-shadow: var(--ombre-m); }
.btn--nuit:active{ transform: translateY(0); }

.btn--contour{
  background: transparent;
  color: var(--encre);
  border-color: var(--bord);
}
.btn--contour:hover{ border-color: var(--encre); background: var(--blanc); }

.sombre .btn--contour,
.cta-bloc .btn--contour{
  color: var(--blanc);
  border-color: var(--ligne-nuit);
  background: rgba(255,255,255,.04);
}
.sombre .btn--contour:hover,
.cta-bloc .btn--contour:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }

.btn--large{ padding: 1.1rem 2rem; font-size: 1rem; }

/* Groupe de boutons */
.actions{ display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.25rem; }

/* Lien fléché discret */
.lien-fleche{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  color: var(--encre);
}
.lien-fleche::after{
  content: "\2192";
  transition: transform var(--vite);
}
.lien-fleche:hover{ color: var(--or-fonce); }
.lien-fleche:hover::after{ transform: translateX(4px); }
.sombre .lien-fleche,
.cta-bloc .lien-fleche{ color: var(--blanc); }
.sombre .lien-fleche:hover,
.cta-bloc .lien-fleche:hover{ color: var(--or); }


/* == 07 · HÉROS ========================================================== */

.hero{
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.hero-grille{
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.hero h1{ margin-bottom: 1.35rem; }
.hero .chapeau{ margin-bottom: 2.25rem; max-width: 46ch; }

/* Petite ligne de réassurance sous les boutons */
.hero-preuves{
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.6rem;
  margin-top: 2.25rem;
  font-size: .9rem;
  color: var(--gris-clair);
}
.hero-preuves li{ display: flex; align-items: center; gap: .5rem; }
.hero-preuves svg{ width: 17px; height: 17px; color: var(--or); flex: none; }

/* Visuel : image arrondie + carte flottante */
.hero-visuel{ position: relative; }
.hero-visuel img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-xl);
  border: 1px solid var(--ligne-nuit);
}
.hero-carte{
  position: absolute;
  left: -1.25rem;
  bottom: -1.5rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  max-width: min(20rem, 82%);
  padding: 1rem 1.25rem;
  border-radius: var(--r-m);
  background: rgba(255,255,255,.94);
  box-shadow: var(--ombre-l);
  text-decoration: none;
  color: var(--encre);
  transition: transform var(--vite);
}
.hero-carte:hover{ transform: translateY(-3px); }
.hero-carte-icone{
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--deg-or);
  flex: none;
}
.hero-carte-icone svg{ width: 20px; height: 20px; color: var(--nuit); }
.hero-carte-label{
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris);
}
.hero-carte-num{
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

@media (max-width: 900px){
  .hero-grille{ grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .hero-visuel img{ aspect-ratio: 16 / 11; }
  .hero-carte{ left: 1rem; bottom: -1.25rem; }
}


/* == 08 · BANDEAU DE CHIFFRES ============================================ */

.chiffres{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--ligne-nuit);
  border: 1px solid var(--ligne-nuit);
  border-radius: var(--r-l);
  overflow: hidden;
}
.chiffres li{
  padding: clamp(1.4rem, 3vw, 2rem);
  background: rgba(255,255,255,.03);
}
.chiffre{
  display: block;
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  background: var(--deg-titre);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.chiffre-note{
  display: block;
  margin-top: .35rem;
  font-size: .88rem;
  color: var(--gris-clair);
}
@media (max-width: 760px){
  .chiffres{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* == 09 · CARTES DE PRESTATIONS ========================================== */

.grille-cartes{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.carte{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  background: var(--blanc);
  box-shadow: var(--ombre-s);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform var(--vite), box-shadow var(--vite), border-color var(--vite);
}
/* Liseré lumineux qui se révèle au survol */
.carte::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--deg-or);
  opacity: 0;
  transition: opacity var(--vite);
}
.carte:hover{
  transform: translateY(-4px);
  box-shadow: var(--ombre-m);
  border-color: #DAD5CA;
}
.carte:hover::before{ opacity: 1; }

.carte-icone{
  display: grid; place-items: center;
  width: 48px; height: 48px;
  margin-bottom: 1.35rem;
  border-radius: 14px;
  background: linear-gradient(150deg, #FFF3DC, #FFE7C4);
  color: var(--or-fonce);
  flex: none;
}
.carte-icone svg{ width: 24px; height: 24px; }

.carte-num{
  position: absolute;
  top: 1.35rem; right: 1.5rem;
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  color: var(--gris);   /* 5,9:1 — lisible, pas seulement décoratif */
}
.carte h3{ margin-bottom: .65rem; }
.carte p{ color: var(--gris); font-size: .96rem; }
.carte .lien-fleche{ margin-top: 1.35rem; font-size: .9rem; }

/* Carte détaillée (page Leistungen) */
.carte--detail{ padding: clamp(1.75rem, 3vw, 2.5rem); }
.carte--detail h2{ font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin-bottom: .8rem; }
.carte--detail p{ font-size: 1rem; }
.liste-puces{ margin-top: 1.35rem; display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr); }
.liste-puces li{
  position: relative;
  padding-left: 1.75rem;
  font-size: .94rem;
  color: var(--gris);
}
.liste-puces li::before{
  content: "";
  position: absolute;
  left: 0; top: .55rem;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--deg-or);
}

/* Carte sur fond sombre */
.sombre .carte{
  background: rgba(255,255,255,.045);
  border-color: var(--ligne-nuit);
  box-shadow: none;
}
.sombre .carte:hover{ background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.22); }
.sombre .carte p{ color: var(--gris-clair); }
.sombre .carte-icone{
  background: rgba(255,176,32,.14);
  color: var(--or);
}
.sombre .carte-num{ color: rgba(255,255,255,.20); }


/* Réduction du logo sur très petits écrans */
@media (max-width: 400px){
  .logo-marque{ width: 34px; height: 34px; border-radius: 10px; }
  .logo-marque svg{ width: 19px; height: 19px; }
  .logo-nom{ font-size: .98rem; }
  .logo-sous{ font-size: .66rem; }
  .burger summary{ padding: .55rem .75rem; font-size: .85rem; }
}


/* == 09b · EN-TÊTE DES PAGES INTÉRIEURES ================================= */

.page-hero{ padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(2.75rem, 6vw, 4.25rem); }
.page-hero h1{ font-size: clamp(2.1rem, 5vw, 3.6rem); margin-bottom: 1.1rem; }
.page-hero .chapeau{ max-width: 56ch; }

/* Fil d'Ariane */
.fil{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.25rem;
  font-size: .85rem;
  color: var(--gris-clair);
}
.fil a{ color: var(--gris-clair); text-decoration: none; }
.fil a:hover{ color: var(--blanc); text-decoration: underline; }
.fil span[aria-hidden]{ opacity: .5; }


/* == 09c · BLOC TEXTE + IMAGE ============================================ */

.duo{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.duo img{ width: 100%; border-radius: var(--r-xl); }
@media (max-width: 860px){ .duo{ grid-template-columns: minmax(0, 1fr); } }

.texte{ max-width: 64ch; }
.texte h3{ margin: 2rem 0 .7rem; }
.texte h3:first-child{ margin-top: 0; }
.texte p{ color: var(--gris); }
.sombre .texte p{ color: var(--gris-clair); }


/* == 09d · ÉQUIPE ET QUALIFICATIONS ====================================== */

.equipe{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.membre{
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  background: var(--blanc);
  box-shadow: var(--ombre-s);
  overflow: hidden;
  transition: transform var(--vite), box-shadow var(--vite);
}
.membre:hover{ transform: translateY(-4px); box-shadow: var(--ombre-m); }
.membre img{ width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.membre-corps{ padding: 1.25rem; }
.membre h3{ font-size: 1.1rem; margin-bottom: .2rem; }
.membre .role{ font-size: .88rem; color: var(--gris); }

/* minmax(0,1fr) borne la piste : sinon un mot composé allemand
   impose sa largeur min-content et fait déborder la grille. */
.qualif{ display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
.qualif li{
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  background: var(--blanc);
  font-size: .95rem;
}
.qualif svg{ width: 20px; height: 20px; margin-top: .25rem; color: var(--or-fonce); flex: none; }
/* Sans min-width:0, un mot comme « Betriebshaftpflichtversicherung »
   empêche l'élément flex de rétrécir sous 400 px. */
.qualif li > span{ min-width: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.sombre .qualif li{ background: rgba(255,255,255,.045); border-color: var(--ligne-nuit); }
.sombre .qualif svg{ color: var(--or); }


/* == 10 · ÉTAPES (Ablauf) ================================================ */

.etapes{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.etape{ position: relative; padding-top: 3.5rem; }
.etape-num{
  position: absolute;
  top: 0; left: 0;
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--deg-or);
  color: var(--nuit);
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
/* Trait de liaison entre les étapes */
.etape::after{
  content: "";
  position: absolute;
  top: 1.3rem; left: 3.2rem; right: -1.5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--ligne-nuit), transparent);
}
.etape:last-child::after{ display: none; }
.etape h3{ margin-bottom: .6rem; }
@media (max-width: 760px){ .etape::after{ display: none; } }


/* == 11 · RÉFÉRENCES ===================================================== */

.grille-refs{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.ref{
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  background: var(--blanc);
  box-shadow: var(--ombre-s);
  overflow: hidden;
  transition: transform var(--vite), box-shadow var(--vite);
}
.ref:hover{ transform: translateY(-4px); box-shadow: var(--ombre-m); }
.ref-image{ position: relative; }
.ref-image img{
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--doux);
}
.ref:hover .ref-image img{ transform: scale(1.03); }
.ref-annee{
  position: absolute;
  top: 1rem; left: 1rem;
  padding: .35rem .8rem;
  border-radius: var(--r-pill);
  background: rgba(11,17,32,.88);
  color: var(--blanc);
  font-size: .8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ref-corps{ padding: clamp(1.35rem, 2.4vw, 1.85rem); display: flex; flex-direction: column; flex: 1; }
.ref-lieu{
  display: flex; align-items: center; gap: .4rem;
  margin-bottom: .8rem;
  font-size: .85rem;
  font-weight: 500;
  color: var(--gris);
}
.ref-lieu svg{ width: 15px; height: 15px; color: var(--or-fonce); }
.ref h3{ margin-bottom: .7rem; }
.ref > .ref-corps > p{ color: var(--gris); font-size: .95rem; }

/* Fiche de données du chantier */
.fiche{ margin: 1.35rem 0 0; border-top: 1px solid var(--bord); }
.fiche div{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--bord);
  font-size: .89rem;
}
.fiche dt{ color: var(--gris); }
.fiche dd{ margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }


/* == 12 · TÉMOIGNAGES ==================================================== */

.grille-avis{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.avis{
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 2.8vw, 2.25rem);
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  background: var(--blanc);
  box-shadow: var(--ombre-s);
}
.etoiles{ display: flex; gap: .2rem; margin-bottom: 1.15rem; }
.etoiles svg{ width: 17px; height: 17px; color: var(--or); }
.avis blockquote{
  margin: 0 0 1.5rem;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: clamp(1.02rem, 1.5vw, 1.12rem);
  line-height: 1.55;
  letter-spacing: -0.015em;
}
.avis footer{ margin-top: auto; font-size: .88rem; color: var(--gris); }
.avis footer strong{ display: block; color: var(--encre); font-weight: 600; }


/* == 13 · FAQ ============================================================ */

.faq{ display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
.faq details{
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  background: var(--blanc);
  overflow: hidden;
  transition: border-color var(--vite), box-shadow var(--vite);
}
.faq details[open]{ border-color: #DAD5CA; box-shadow: var(--ombre-s); }
.faq summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem clamp(1.1rem, 2vw, 1.5rem);
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: 1.02rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: "";
  flex: none;
  width: 12px; height: 12px;
  border-right: 2px solid var(--gris);
  border-bottom: 2px solid var(--gris);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--vite);
}
.faq details[open] summary::after{ transform: rotate(225deg) translate(-2px, -2px); }
.faq-corps{
  padding: 0 clamp(1.1rem, 2vw, 1.5rem) 1.35rem;
  color: var(--gris);
  font-size: .96rem;
  max-width: 68ch;
}


/* == 14 · BANDE D'APPEL ================================================== */

.cta-bloc{
  position: relative;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  border-radius: var(--r-xl);
  background: var(--nuit);
  color: var(--blanc);
  overflow: hidden;
}
.cta-bloc::before{
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(55% 90% at 8% 0%,   rgba(255,176,32,.28), transparent 60%),
    radial-gradient(45% 80% at 95% 100%, rgba(61,107,255,.30), transparent 62%);
  pointer-events: none;
}
.cta-inner{ position: relative; z-index: 1; }
.cta-grille{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.cta-bloc h2{ font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin-bottom: 1rem; }
.cta-bloc p{ color: rgba(255,255,255,.78); }
@media (max-width: 820px){ .cta-grille{ grid-template-columns: minmax(0, 1fr); } }


/* == 15 · CONTACT ET FORMULAIRE ========================================== */

.contact-grille{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (max-width: 900px){ .contact-grille{ grid-template-columns: minmax(0, 1fr); } }

.panneau{
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  background: var(--blanc);
  box-shadow: var(--ombre-s);
}

.form{ display: grid; gap: 1.15rem; grid-template-columns: minmax(0, 1fr); }
.form-duo{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }
@media (max-width: 560px){ .form-duo{ grid-template-columns: minmax(0, 1fr); } }

.champ{ display: grid; gap: .45rem; }
.champ label{ font-size: .86rem; font-weight: 600; color: var(--encre); }
.champ .option{ font-weight: 400; color: var(--gris); }

.champ input,
.champ select,
.champ textarea{
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid #CFCBC2;
  border-radius: var(--r-s);
  background: var(--creme);
  color: var(--encre);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--vite), box-shadow var(--vite), background-color var(--vite);
}
.champ textarea{ min-height: 9.5rem; resize: vertical; }
.champ input:hover, .champ select:hover, .champ textarea:hover{ border-color: #A9A498; }
.champ input:focus, .champ select:focus, .champ textarea:focus{
  outline: none;
  background: var(--blanc);
  border-color: var(--or-fonce);
  box-shadow: 0 0 0 4px rgba(255,176,32,.22);
}
/* Le texte indicatif doit aussi passer le contraste AA (4,5:1) */
.champ input::placeholder, .champ textarea::placeholder{ color: var(--gris); opacity: 1; }

/* Case de consentement obligatoire */
.consentement{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  background: var(--creme);
  font-size: .89rem;
  color: var(--gris);
}
.consentement input{
  width: 1.15rem; height: 1.15rem;
  margin: .3rem 0 0;
  accent-color: var(--or-fonce);
  flex: none;
}
.consentement a{ color: var(--encre); font-weight: 600; }

/* Colonne latérale */
.info + .info{ margin-top: 1.25rem; }
.info h3{ margin-bottom: 1rem; font-size: 1.15rem; }

.contact-liste li + li{ margin-top: 1rem; }
.contact-liste li{ min-width: 0; }
.contact-liste a, .contact-liste span{ text-decoration: none; color: var(--encre); }
.contact-ligne{ display: flex; align-items: flex-start; gap: .85rem; }
.contact-ligne svg{ width: 18px; height: 18px; margin-top: .35rem; color: var(--or-fonce); flex: none; }
.contact-ligne > span{ min-width: 0; overflow-wrap: break-word; }
.contact-ligne .label{
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gris);
}
.contact-ligne .valeur{ font-weight: 600; font-variant-numeric: tabular-nums; }
.contact-ligne a.valeur:hover{ color: var(--or-fonce); }

.horaires{ font-size: .92rem; }
.horaires li{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--bord);
}
.horaires li:last-child{ border-bottom: 0; }
.horaires .heures{ font-variant-numeric: tabular-nums; color: var(--gris); white-space: nowrap; }

/* Emplacement de carte statique — aucun traqueur, aucune iframe */
.carte-statique{
  position: relative;
  display: grid;
  align-items: end;
  min-height: 15rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  background:
    repeating-linear-gradient(0deg,  rgba(11,17,32,.05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(11,17,32,.05) 0 1px, transparent 1px 30px),
    radial-gradient(60% 60% at 30% 40%, rgba(255,176,32,.16), transparent 70%),
    var(--creme-2);
  overflow: hidden;
}
.carte-statique .epingle{
  position: absolute;
  top: 38%; left: 30%;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--or-2);
  box-shadow: 0 0 0 6px rgba(255,138,61,.25), 0 0 0 14px rgba(255,138,61,.12);
}
.carte-adresse{
  position: relative;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-m);
  background: var(--blanc);
  box-shadow: var(--ombre-m);
  font-style: normal;
  font-size: .93rem;
}
.carte-adresse strong{ display: block; font-family: var(--f-titre); font-weight: 700; margin-bottom: .2rem; }

/* Bouton WhatsApp intégré à la page */
/* Vert assombri : #1FA855 ne donne que 3,1:1 avec du texte blanc. */
.btn--whatsapp{ background: #157A3F; color: var(--blanc); }
.btn--whatsapp:hover{ background: #0F5E30; transform: translateY(-2px); box-shadow: var(--ombre-m); }
.btn--whatsapp .wa-bulle{ fill: currentColor; }
.btn--whatsapp .wa-combine{ fill: #157A3F; }
.btn--whatsapp:hover .wa-combine{ fill: #0F5E30; }


/* == 16 · PAGES LÉGALES ================================================== */

.juridique h2{ font-size: 1.35rem; margin: 2.75rem 0 .9rem; }
.juridique h2:first-of-type{ margin-top: 0; }
.juridique h3{ font-size: 1.02rem; margin: 1.75rem 0 .5rem; }
.juridique p, .juridique li{ font-size: .96rem; color: var(--gris); }
.juridique strong{ color: var(--encre); }
.juridique ul{ margin: 0 0 1.1rem; display: grid; gap: .4rem; }
.juridique ul li{ position: relative; padding-left: 1.4rem; }
.juridique ul li::before{
  content: "";
  position: absolute; left: 0; top: .68rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--or);
}
.juridique a{ color: var(--encre); font-weight: 600; }

/* Marqueur des informations à compléter par le client */
.completer{
  display: inline-block;
  padding: .12em .5em;
  border: 1px dashed var(--or-fonce);
  border-radius: var(--r-xs);
  background: #FFF6E4;
  font-size: .88em;
  font-weight: 600;
  color: #8A5A00;
}

.encadre{
  display: flex;
  gap: .9rem;
  padding: 1.15rem 1.35rem;
  margin-bottom: 2.5rem;
  border: 1px solid #F0DFB8;
  border-radius: var(--r-m);
  background: #FFFBF2;
  font-size: .92rem;
  color: #6B5220;
}
.encadre svg{ width: 20px; height: 20px; margin-top: .2rem; color: var(--or-fonce); flex: none; }


/* == 17 · PIED DE PAGE =================================================== */

.pied{
  position: relative;
  background: var(--nuit);
  color: var(--blanc);
  padding-top: clamp(3.5rem, 7vw, 5rem);
  overflow: hidden;
}
.pied::before{
  content: "";
  position: absolute; inset: -60% -20% auto -20%; height: 120%;
  background: radial-gradient(40% 60% at 20% 0%, rgba(255,176,32,.14), transparent 65%);
  pointer-events: none;
}
.pied > *{ position: relative; z-index: 1; }

.pied-grille{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.pied .logo{ color: var(--blanc); margin: 0 0 1.25rem; }
.pied .logo-sous{ color: var(--gris-clair); }
.pied address{ font-style: normal; font-size: .94rem; color: var(--gris-clair); }
.pied address a{ color: var(--gris-clair); text-decoration: none; }
.pied address a:hover{ color: var(--blanc); }

.pied-titre{
  margin-bottom: 1.15rem;
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blanc);
}
.pied-liste li{ padding: .28rem 0; }
.pied-liste a{
  font-size: .94rem;
  color: var(--gris-clair);
  text-decoration: none;
  transition: color var(--vite);
}
.pied-liste a:hover{ color: var(--or); }

.pied-bas{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--ligne-nuit);
  font-size: .85rem;
  color: var(--gris-clair);
}
@media (max-width: 820px){
  .pied-grille{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-grille > *:first-child{ grid-column: 1 / -1; }
}
@media (max-width: 430px){ .pied-grille{ grid-template-columns: minmax(0, 1fr); } }


/* == 18 · WHATSAPP FLOTTANT · A11Y · ANIMATION ========================== */

.wa-flottant{
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 50;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #1FA855;
  color: var(--blanc);
  box-shadow: 0 10px 26px -8px rgba(31,168,85,.7);
  transition: transform var(--vite), box-shadow var(--vite);
}
.wa-flottant:hover{ transform: translateY(-3px); box-shadow: 0 16px 32px -10px rgba(31,168,85,.85); }
.wa-flottant svg{ width: 28px; height: 28px; }
.wa-bulle{ fill: currentColor; }
.wa-flottant .wa-combine{ fill: #1FA855; }

/* Lien d'évitement */
.saut{
  position: absolute;
  left: -9999px; top: 0;
  z-index: 100;
  padding: .9rem 1.25rem;
  border-radius: 0 0 var(--r-s) 0;
  background: var(--encre);
  color: var(--blanc);
  font-weight: 600;
  text-decoration: none;
}
.saut:focus{ left: 0; top: 0; }

/* Focus toujours visible */
:focus-visible{
  outline: 3px solid var(--or-fonce);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.sombre :focus-visible, .pied :focus-visible, .cta-bloc :focus-visible{ outline-color: var(--or); }

.marge-haut{ margin-top: 1rem; }

.sr{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Apparition au défilement — uniquement si JavaScript est actif.
   Sans JS, la classe .js est absente et tout reste visible. */
.js .reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms cubic-bezier(.2,.7,.3,1), transform 600ms cubic-bezier(.2,.7,.3,1);
}
.js .reveal.vu{ opacity: 1; transform: none; }
.js .reveal:nth-child(2){ transition-delay: 70ms; }
.js .reveal:nth-child(3){ transition-delay: 140ms; }
.js .reveal:nth-child(4){ transition-delay: 210ms; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal{ opacity: 1; transform: none; }
}


/* == 19 · IMPRESSION ==================================================== */

@media print{
  .entete, .burger, .wa-flottant, .saut, .btn, .form, .carte-statique{ display: none !important; }

  html, body{ background: #FFF; color: #000; font-size: 11pt; }
  .sombre, .pied, .cta-bloc{ background: #FFF !important; color: #000 !important; }
  .sombre::before, .sombre::after, .pied::before, .cta-bloc::before{ display: none !important; }
  .sombre h1, .sombre h2, .sombre h3, .sombre p,
  .pied address, .pied-titre, .pied-bas, .cta-bloc p{ color: #000 !important; }
  .chiffre, .eclat{ -webkit-text-fill-color: #000; color: #000 !important; background: none !important; }

  .section{ padding-block: 1.25rem; }
  .carte, .ref, .avis, .panneau{ box-shadow: none; border: 1px solid #CCC; }
  img{ max-width: 65mm; }

  .carte, .ref, .avis, .etape{ break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3{ break-after: avoid; page-break-after: avoid; }

  a[href^="http"]::after{ content: " (" attr(href) ")"; font-size: 9pt; }
}