/* ==========================================================================
   Kaizen Services - feuille de style principale
   Palette issue de la plaquette : bleu nuit dominant, cyan Assainissement,
   rouge Kaizen 3D, vert Hygiene de l'air.
   ========================================================================== */

:root {
  /* Bleus de marque, cales sur le logo officiel : #1F4788 et #3E92CC */
  --navy-900: #0C1F3D;
  --navy-800: #143257;
  --navy-700: #1F4788;    /* bleu du logo */
  --navy-600: #2C5FA8;
  --navy-050: #E9EFF7;

  /* Couleurs des trois univers */
  --aqua: #3E92CC;        /* bleu clair du logo */
  --aqua-dark: #2E76A8;
  --aqua-050: #E8F3FA;
  --red: #D0212B;         /* Kaizen 3D */
  --red-dark: #A5161E;
  --red-050: #FDECEC;
  --green: #5A8A2C;       /* Hygiene de l'air */
  --green-dark: #46691F;
  --green-050: #EFF6E7;

  /* Neutres */
  --bg: #F4F6FA;
  --surface: #FFFFFF;
  --border: #DFE5EE;
  --text: #16202E;
  --text-soft: #4C5A6E;
  --text-faint: #78859A;

  /* Mesures */
  --wrap: 1200px;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(8, 25, 43, .06), 0 2px 8px rgba(8, 25, 43, .05);
  --shadow-md: 0 4px 12px rgba(8, 25, 43, .08), 0 12px 32px rgba(8, 25, 43, .07);

  /* Typographie */
  --font-title: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --header-h: 76px;
}

/* Themes par metier : la couleur d'accent bascule pour toute la page
   (boutons, badges, puces, focus) sans dupliquer une regle par composant. */
body.theme-red {
  --aqua: var(--red);
  --aqua-dark: var(--red-dark);
  --aqua-050: var(--red-050);
}
body.theme-green {
  --aqua: var(--green);
  --aqua-dark: var(--green-dark);
  --aqua-050: var(--green-050);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.005em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 2.9vw, 3.5rem); text-transform: uppercase; }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.5rem); text-transform: uppercase; }
h3 { font-size: 1.22rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy-600); text-decoration: none; }
a:hover { color: var(--aqua-dark); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1rem; padding-left: 1.2rem; }

:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Lien d'evitement pour la navigation au clavier */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy-800);
  color: #fff;
  padding: .8rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

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

/* --------------------------------------------------------------------------
   En-tete
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

/* Trois colonnes dont les deux laterales sont de largeur egale : la
   navigation tombe donc au centre exact de l'en-tete, quelles que soient les
   largeurs du logo et du numero de telephone. */
.header-inner {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}

/* Reserve au desktop : sous 1080 px la navigation passe en position fixed et,
   le backdrop-filter de l'en-tete en faisant son bloc conteneur, un
   justify-self la reduirait a sa largeur intrinseque au lieu de la laisser
   occuper toute la largeur du panneau deroulant. */
@media (min-width: 1081px) {
  .header-inner > .brand { justify-self: start; }
  .header-inner > .nav { justify-self: center; }
  .header-inner > .header-actions { justify-self: end; }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-cta {
  padding: .7rem 1.15rem;
  font-size: .88rem;
  white-space: nowrap;
}

/* Le logo porte deja le nom : aucun texte ne l'accompagne dans l'en-tete.
   flex-shrink a 0 : sans cela, la barre de navigation comprime le logo et
   seul le carre reste visible. */
.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.brand img {
  height: 50px;
  width: auto;
  max-width: none;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .brand img { height: 38px; }
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  font-size: .93rem;
  font-weight: 500;
  color: var(--text);
  padding: .4rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav-link:hover, .nav-link[aria-current="page"] {
  color: var(--navy-800);
  border-bottom-color: var(--aqua);
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  font-size: .93rem;
  color: var(--navy-800);
  white-space: nowrap;
}
.header-phone svg { width: 17px; height: 17px; color: var(--aqua); }

.burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.burger span {
  display: block;
  width: 20px; height: 2px;
  margin: 3px auto;
  background: var(--navy-800);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1080px) {
  /* La navigation sort du flux (position fixed) : la grille a trois colonnes
     n'a plus lieu d'etre, on revient a une simple ligne. */
  .header-inner {
    display: flex;
    gap: .75rem;
  }
  .brand { margin-right: auto; }

  .burger { display: grid; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    /* Le panneau est ancre sous l'en-tete : pour sortir de l'ecran il doit
       remonter de sa propre hauteur PLUS cette hauteur d'en-tete. Un simple
       pourcentage ne suffit pas et depend du nombre d'entrees du menu :
       a -120 % il restait 15 px de bordure et d'ombre visibles en haut,
       par transparence de l'en-tete. Les 24 px couvrent l'ombre portee. */
    transform: translateY(calc(-100% - var(--header-h) - 24px));
    transition: transform .28s ease;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav.open { transform: translateY(0); }
  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem 1.25rem 1.25rem;
  }
  .nav-list li { border-bottom: 1px solid var(--border); }
  .nav-link { display: block; padding: .95rem 0; border-bottom: none; }
  .header-phone .header-phone-label { display: none; }
  .header-actions { gap: .6rem; }
  .header-cta { padding: .65rem .9rem; font-size: .84rem; }
}

/* Sous 768 px, la barre fixe du bas porte deja l'appel et le devis : les
   repeter dans l'en-tete encombre la ligne du logo pour rien.
   Le seuil est exactement celui de .barre-mobile : entre 769 et 1080 px, le
   menu est deja replie en burger mais la barre du bas n'existe pas encore,
   et ces deux boutons restent le seul appel a l'action visible. */
@media (max-width: 768px) {
  .header-actions { display: none; }
}

@media (max-width: 420px) {
  .brand img { height: 34px; }
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  padding: .85rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color .2s, color .2s, border-color .2s, transform .12s;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-primary { background: var(--aqua); color: #fff; }
.btn-primary:hover { background: var(--aqua-dark); color: #fff; }

.btn-navy { background: var(--navy-800); color: #fff; }
.btn-navy:hover { background: var(--navy-700); color: #fff; }

.btn-ghost { background: transparent; color: var(--navy-800); border-color: var(--border); }
.btn-ghost:hover { background: var(--navy-050); color: var(--navy-800); border-color: var(--navy-600); }

.btn-light { background: #fff; color: var(--navy-800); }
.btn-light:hover { background: var(--navy-050); color: var(--navy-800); }

.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn-outline-light:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding: clamp(3rem, 6vw, 5.5rem) 0; }

/* La section qui suit la barre bleue demarre au ras : avec le padding
   habituel, elle laissait une large bande vide juste sous la barre, en bas du
   premier ecran. */
.reassurance + .section { padding-top: clamp(1.6rem, 2.5vw, 2.4rem); }
.section-dark { background: var(--navy-800); color: #fff; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: rgba(255,255,255,.82); }
.section-alt { background: var(--surface); }

.section-head { max-width: 760px; margin-bottom: 2.5rem; }
.section-head.centered { margin-inline: auto; text-align: center; }
.section-head p { color: var(--text-soft); font-size: 1.05rem; }
.section-dark .section-head p { color: rgba(255,255,255,.75); }

.kicker {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--aqua);
  margin-bottom: .7rem;
}
.kicker.red { color: var(--red); }
.kicker.green { color: var(--green); }
.section-dark .kicker { color: var(--aqua); }

/* --------------------------------------------------------------------------
   Grilles et cartes
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: 1.35rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: .45rem; }
.card p { color: var(--text-soft); font-size: .95rem; }

.card-icon {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--aqua-050);
  color: var(--aqua-dark);
  margin-bottom: 1rem;
}
.card-icon svg { width: 23px; height: 23px; }
.card-icon.red { background: var(--red-050); color: var(--red-dark); }
.card-icon.green { background: var(--green-050); color: var(--green-dark); }

.section-dark .card {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
}
.section-dark .card p { color: rgba(255,255,255,.72); }
.section-dark .card-icon { background: rgba(62,146,204,.18); color: #6EC5EC; }

/* Carte d'univers (les 3 metiers).

   En-tete colore avec un grand pictogramme, corps blanc avec la liste des
   prestations. La version precedente etait entierement blanche, avec un
   pictogramme de 23 px : rien n'accrochait l'oeil et les trois metiers -- le
   coeur de l'offre -- passaient inapercus. */
.univers-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s, transform .25s;
}
.univers-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }

.univers-tete {
  position: relative;
  padding: 1.6rem 1.5rem 1.4rem;
  background: linear-gradient(145deg, var(--navy-700) 0%, var(--navy-900) 100%);
  color: #fff;
  overflow: hidden;
}

/* Photo d'illustration, quand elle existe. Le degrade reste dessous : une
   carte sans photo garde exactement la meme allure. */
.univers-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Voile en diagonale : dense en bas a gauche, la ou se trouvent le titre et
   l'accroche, et nettement plus leger en haut a droite pour laisser voir la
   photo. Un voile uniforme assombrissait tout et le camion disparaissait. */
.univers-tete::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right,
    rgba(10, 26, 52, .93) 0%,
    rgba(10, 26, 52, .78) 38%,
    rgba(10, 26, 52, .45) 70%,
    rgba(10, 26, 52, .28) 100%);
}

.univers-tete > *:not(.univers-photo) { position: relative; z-index: 1; }

.univers-icone {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: .9rem;
  border-radius: 13px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .2);
}
.univers-icone svg { width: 28px; height: 28px; color: #fff; }

.univers-tete h3 {
  text-shadow: 0 1px 8px rgba(8, 21, 43, .6);
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #fff;
  margin-bottom: .35rem;
}
.univers-tete p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 6px rgba(8, 21, 43, .55);
  /* Deux lignes reservees : l'accroche de l'assainissement n'en occupe
     qu'une, ce qui raccourcissait son en-tete de 22 px et desalignait les
     trois listes de prestations. */
  min-height: calc(2 * 1.45 * .92rem);
}

/* Alignement exact quel que soit le nombre de lignes : les trois cartes
   partagent les rangees de la grille parente, en-tete sur la premiere, corps
   sur la seconde. Sans support de subgrid, le min-height ci-dessus suffit
   dans les cas courants. */
@supports (grid-template-rows: subgrid) {
  .grid-3:has(> .univers-card) { grid-template-rows: auto 1fr; }

  .univers-card {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
}

.univers-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.4rem 1.5rem 1.5rem;
}

.univers-card ul { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.univers-card li {
  position: relative;
  padding-left: 1.7rem;
  font-size: .93rem;
  color: var(--text-soft);
  margin-bottom: .55rem;
}
/* Coche plutot qu'une puce ronde : ce sont des prestations assurees, pas une
   simple enumeration. */
.univers-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--aqua);
  border-bottom: 2px solid var(--aqua);
  transform: rotate(-45deg);
}

.univers-card .btn { margin-top: auto; align-self: flex-start; }

/* --------------------------------------------------------------------------
   Bandeau de reassurance
   -------------------------------------------------------------------------- */

.reassurance {
  background: var(--navy-900);
  color: #fff;
  /* Resserre pour que la bande entiere tienne sous la banniere et les
     references, sans avoir a faire defiler. */
  padding: 1rem 0;
}
.reassurance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
}
.reassurance-item {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .9rem;
  font-weight: 500;
}
.reassurance-item svg { width: 26px; height: 26px; color: var(--aqua); flex-shrink: 0; }
.reassurance-item strong { display: block; font-size: .95rem; }
.reassurance-item span { color: rgba(255,255,255,.65); font-size: .82rem; }

/* --------------------------------------------------------------------------
   Chiffres cles
   -------------------------------------------------------------------------- */

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.2rem; }
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
  text-align: center;
}
.kpi .value {
  font-family: var(--font-title);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--navy-800);
  line-height: 1.1;
}
.kpi .label { font-size: .82rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .07em; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { display: grid; gap: .7rem; max-width: 860px; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.3rem;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { flex-shrink: 0; transition: transform .25s; color: var(--aqua); }
.faq summary .chev svg { width: 18px; height: 18px; }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq details[open] summary { border-bottom: 1px solid var(--border); }
.faq-body { padding: 1.05rem 1.3rem; color: var(--text-soft); font-size: .95rem; }

/* --------------------------------------------------------------------------
   Appel a l'action
   -------------------------------------------------------------------------- */

.cta-band {
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(2rem, 4vw, 3.2rem);
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.82); max-width: 620px; margin-inline: auto; }
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: center;
  margin-top: 1.6rem;
}

/* Bandeau urgence 24/7 */
.urgence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  background: var(--red);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.4rem 1.8rem;
}
.urgence-text { flex: 1 1 300px; }
.urgence strong { font-family: var(--font-title); font-size: 1.4rem; text-transform: uppercase; display: block; }
.urgence p { color: rgba(255,255,255,.9); font-size: .93rem; margin: 0; }

/* --------------------------------------------------------------------------
   Formulaire
   -------------------------------------------------------------------------- */

.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-sm);
}
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.field label { font-size: .87rem; font-weight: 600; color: var(--navy-800); }
.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: .95rem;
  color: var(--text);
  padding: .75rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--aqua);
  outline: none;
  box-shadow: 0 0 0 3px rgba(62,146,204,.16);
}
.field textarea { resize: vertical; min-height: 110px; }
.field-hint { font-size: .8rem; color: var(--text-faint); }

/* Piege a robots : masque a l'oeil, pas au robot */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-legal { font-size: .8rem; color: var(--text-faint); margin-top: .9rem; }

/* --------------------------------------------------------------------------
   Fil d'Ariane
   -------------------------------------------------------------------------- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  font-size: .84rem;
  color: var(--text-faint);
  padding: 1.1rem 0;
}
.breadcrumb a { color: var(--text-soft); }
.breadcrumb a:hover { color: var(--aqua-dark); }
.breadcrumb .sep { color: var(--border); }
.breadcrumb strong { color: var(--navy-800); font-weight: 600; }

/* --------------------------------------------------------------------------
   Barre d'action fixe (mobile)
   -------------------------------------------------------------------------- */

/* Masquee par defaut : sur grand ecran, le bouton de l'en-tete suffit et
   reste visible puisque l'en-tete est collante. */
.barre-mobile { display: none; }

@media (max-width: 768px) {
  .barre-mobile {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(8, 25, 43, .08);
    /* env() reserve la place de la barre systeme des iPhone recents. */
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  }

  .barre-mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
  }

  .barre-mobile .btn {
    width: 100%;
    padding-inline: .6rem;
    padding-block: .95rem;
    font-size: 1rem;
  }

  /* L'appel est le geste secondaire : contour plutot qu'aplat, pour que le
     devis reste l'action mise en avant. */
  .barre-mobile-tel {
    background: var(--surface);
    border-color: var(--border);
    color: var(--navy-800);
  }
  .barre-mobile-tel svg {
    width: 18px;
    height: 18px;
    color: var(--aqua);
  }

  /* Sans cette reserve, la barre recouvre la fin du pied de page. */
  .site-footer .footer-bottom {
    padding-bottom: calc(1.3rem + 4.6rem + env(safe-area-inset-bottom, 0px));
  }
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--navy-900);
  color: rgba(255,255,255,.72);
  padding: clamp(2.6rem, 5vw, 4rem) 0 0;
  font-size: .92rem;
}

/* En-tete du pied de page : le logo principal, la promesse, et l'appel a
   l'action. Separe des colonnes par un filet, il donne un point d'entree
   clair plutot que de noyer le logo dans une colonne. */
.footer-tete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  padding-bottom: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: clamp(1.8rem, 3vw, 2.4rem);
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.footer-logo-principal { height: 58px; width: auto; }

.footer-tete p {
  margin: 0;
  color: rgba(255,255,255,.7);
  font-size: .93rem;
  max-width: 60ch;
}

.footer-cta { white-space: nowrap; }

@media (max-width: 900px) {
  .footer-tete { grid-template-columns: 1fr; text-align: left; }
  .footer-cta { justify-self: start; }
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3rem);
  padding-bottom: 2.5rem;
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

.site-footer h3 {
  color: #fff;
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.site-footer a { color: rgba(255,255,255,.72); }
.site-footer a:hover { color: var(--aqua); }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: .55rem; }

/* Les deux societes, cote a cote quand la place le permet. */
.footer-col-societes .footer-entity + .footer-entity { margin-top: 1.4rem; }

.footer-entity {
  border-left: 2px solid var(--aqua);
  padding-left: 1rem;
}

/* Variante claire du logo : sur ce fond bleu nuit, la version d'origine
   verrait son mot "Kaizen", en bleu marine, disparaitre completement. */
.footer-logo {
  height: 42px;
  width: auto;
  max-width: 100%;
  margin-bottom: .55rem;
}

.footer-adresse {
  display: block;
  font-style: normal;
  font-size: .84rem;
  color: rgba(255,255,255,.55);
  margin-bottom: .35rem;
}

.footer-tel {
  display: block;
  font-weight: 600;
  color: #fff !important;
}
.footer-tel:hover { color: var(--aqua) !important; }

/* Contact commun aux deux societes, pose sous les deux fiches. */
.footer-contact-commun {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.footer-contact-commun a { display: block; word-break: break-word; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 1.3rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: .84rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   Apparition au defilement
   Le contenu reste visible si le script echoue : seule la classe js-anim,
   posee par le script lui-meme, active le masquage initial.
   -------------------------------------------------------------------------- */

.js-anim .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}
.js-anim .reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Bandeau des references clients
   Present sur l'accueil, les pages metier, departement et commune : le style
   appartient donc a la feuille commune. Il vivait dans accueil.css, ou les
   3890 autres pages ne le chargeaient pas -- les logos s'y empilaient a leur
   taille naturelle.
   -------------------------------------------------------------------------- */

.bandeau-refs {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: clamp(.7rem, 1.1vw, .95rem) 0 clamp(.75rem, 1.2vw, 1rem);
}

/* Selecteur double : la regle generique p:last-child remet la marge basse a
   zero et l'emporterait sur une simple classe. */
.bandeau-refs .bandeau-refs-titre {
  text-align: center;
  font-family: var(--font-title);
  font-size: clamp(1rem, .8rem + .55vw, 1.25rem);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--navy-800);
  margin: 0 0 clamp(.5rem, 1vw, .75rem);
}

/* Les logos defilent en continu, d'un bord a l'autre de l'ecran.

   La fenetre deborde volontairement du .wrap : un bandeau defilant qui
   s'arrete au meme endroit que le texte donne l'impression d'un bug. */
.refs-fenetre {
  overflow: hidden;
  /* Fondu sur les bords : les logos apparaissent et disparaissent au lieu
     d'etre tranches net. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.refs-piste {
  display: flex;
  width: max-content;
  animation: refs-defilement 48s linear infinite;
}
/* Au survol, le defilement s'arrete : un visiteur qui cherche a lire un nom
   ne doit pas courir apres. */
.refs-fenetre:hover .refs-piste { animation-play-state: paused; }

@keyframes refs-defilement {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* La regle globale de prefers-reduced-motion ramene toutes les durees a
   .01ms, ce qui ferait sauter la piste au lieu de l'immobiliser. */
@media (prefers-reduced-motion: reduce) {
  .refs-piste { animation: none !important; }
  .refs-fenetre { overflow-x: auto; }
}

.refs-liste {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  /* Hauteur calee sur la plus haute boite, sinon le logo en portrait
     deborderait de la fenetre et serait tronque. */
  min-height: clamp(54px, 5.4vw, 70px);
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: 0 clamp(1rem, 2vw, 1.75rem);
  list-style: none;
  margin: 0;
}

/* Boite de taille identique pour chaque logo.

   Sans elle, a hauteur egale, La Poste (6,8:1) s'etalait sur 276 px quand
   Notre-Dame de Paris (0,75:1) n'en occupait que 31 : un rapport de 1 a 9.
   Chaque logo occupe desormais la meme boite et s'y inscrit en entier, quelle
   que soit son orientation. */
.ref-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(96px, 10vw, 132px);
  height: clamp(40px, 4vw, 50px);
}

.ref-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Un logo en portrait est bride par la hauteur de la boite alors que les
   logos allonges le sont par la largeur : a boite egale, il occupe deux fois
   moins de surface. On lui accorde donc une boite plus haute. Les elements
   de la piste etant centres verticalement, il reste aligne sur les autres. */
.ref-logo-portrait {
  height: clamp(54px, 5.4vw, 70px);
  width: clamp(64px, 6vw, 82px);
}

@media (max-width: 700px) {
  .refs-liste { gap: 1.75rem; }
  .ref-logo { width: 92px; height: 42px; }
  /* Sans cette reprise, la regle generique ci-dessus ecrase la boite portrait
     et le logo redevient le plus petit de la ligne sur mobile. */
  .ref-logo-portrait { width: 58px; height: 60px; }
}