/* =========================================================
   BEA PRESTATION — Feuille de style principale
   Thème clair, lumineux — couleurs issues du logo
   ========================================================= */

/* ---------- 1. Réinitialisation ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

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

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

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

ul, ol { list-style: none; }

/* ---------- 2. Jetons de conception ---------- */
:root {
  /* Bleus issus du logo, plus riches et vibrants */
  --bleu: #0d6db3;
  --bleu-fonce: #09375e;
  --bleu-vif: #1c8ee3;
  --bleu-electrique: #0098ea;
  --bleu-clair: #e7f3fd;
  --bleu-brume: #cfe4f7;
  --bleu-voile: #f2f8fd;

  /* Neutres lumineux */
  --blanc: #ffffff;
  --coquille: #f8fbfe;
  --sable: #fef9f1;
  --sable-fonce: #f5e9d3;
  --bord: #dbe7f2;
  --bord-doux: #eaf0f7;

  /* Accents dorés/ambres vibrants */
  --ambre: #d97706;
  --ambre-vif: #f59e0b;
  --ambre-clair: #fef3c7;
  --ambre-voile: #fffbeb;

  /* Encre et textes à fort contraste et excellente lisibilité */
  --encre: #092138;
  --texte: #2d475f;
  --texte-doux: #5f7a95;

  /* Formes */
  --r-xl: 32px;
  --r-l: 24px;
  --r-m: 16px;
  --r-s: 10px;
  --r-plein: 999px;

  /* Ombres avec halo bleuté subtil */
  --ombre-s: 0 2px 6px rgba(9, 33, 56, .05), 0 10px 22px -12px rgba(13, 109, 179, .16);
  --ombre-m: 0 4px 12px rgba(9, 33, 56, .05), 0 24px 48px -22px rgba(13, 109, 179, .28);
  --ombre-g: 0 42px 84px -40px rgba(9, 39, 66, .38);

  /* Rythme */
  --entete-h: 78px;
  --transition: .35s cubic-bezier(.2, .7, .3, 1);

  /* Typographie */
  --police-titre: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --police-texte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- 3. Base ---------- */
body {
  font-family: var(--police-texte);
  font-size: 1.125rem;
  line-height: 1.72;
  color: var(--texte);
  background: var(--blanc);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  color: var(--encre);
  line-height: 1.12;
  letter-spacing: -.024em;
  font-weight: 750;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 6.4vw, 4.35rem); font-weight: 800; }
h2 { font-size: clamp(1.95rem, 4.4vw, 3.05rem); font-weight: 750; }
h3 { font-size: clamp(1.25rem, 2.3vw, 1.55rem); line-height: 1.28; font-weight: 700; }
h4 { font-size: 1.125rem; line-height: 1.38; letter-spacing: -.015em; font-weight: 700; }

p { text-wrap: pretty; }

::selection { background: var(--bleu-brume); color: var(--encre); }

:focus-visible {
  outline: 3px solid var(--bleu-vif);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 4. Structure ---------- */
.contenu {
  width: min(1440px, calc(100% - 3.5rem));
  margin-inline: auto;
}

.contenu--etroit { width: min(980px, calc(100% - 3.5rem)); }

.section { padding: clamp(4rem, 8.5vw, 7.2rem) 0; }
.section--serree { padding: clamp(3.2rem, 6vw, 5rem) 0; }
.section--coquille { background: var(--coquille); }
.section--sable { background: var(--sable); }
.section--voile { background: var(--bleu-voile); }

.section-tete {
  max-width: 800px;
  margin-bottom: clamp(2.4rem, 4.2vw, 3.6rem);
}

.section-tete--centre {
  margin-inline: auto;
  text-align: center;
}

.section-tete p {
  margin-top: 1.1rem;
  font-size: 1.16rem;
  line-height: 1.68;
  color: var(--texte);
}

/* Sur-titre */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--police-texte);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-bottom: 1rem;
}

.surtitre::before {
  content: "";
  width: 28px;
  height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--bleu-vif), var(--ambre-vif));
}

.section-tete--centre .surtitre::before { display: none; }

/* Pastille */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1.1rem .5rem .85rem;
  border-radius: var(--r-plein);
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--bord);
  box-shadow: 0 4px 14px -3px rgba(13, 109, 179, .14);
  font-size: .92rem;
  font-weight: 600;
  color: var(--encre);
  letter-spacing: -.005em;
}

.pastille .point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bleu-vif);
  box-shadow: 0 0 0 4px rgba(28, 142, 227, .2);
  flex: none;
}

/* ---------- 5. Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 54px;
  padding: .9rem 1.8rem;
  border-radius: var(--r-plein);
  font-family: var(--police-texte);
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -.01em;
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition),
              background-color var(--transition), color var(--transition),
              border-color var(--transition);
  will-change: transform;
}

.btn svg { flex: none; }

.btn--primaire {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1c8ee3 0%, #0d6db3 100%);
  color: var(--blanc);
  box-shadow: 0 12px 28px -10px rgba(13, 109, 179, .68);
}

.btn--primaire::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -80%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
  transform: rotate(25deg);
  pointer-events: none;
}

.btn--primaire:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -12px rgba(13, 109, 179, .82);
  background: linear-gradient(135deg, #2ea0f5 0%, #095086 100%);
}

.btn--primaire:hover::before {
  left: 150%;
  transition: left 0.75s ease-in-out;
}

.btn--clair {
  background: var(--blanc);
  color: var(--encre);
  border: 1.5px solid var(--bord);
  box-shadow: var(--ombre-s);
}

.btn--clair:hover {
  transform: translateY(-2px);
  border-color: var(--bleu-vif);
  color: var(--bleu);
  box-shadow: var(--ombre-m);
}

.btn--contour {
  border: 1.5px solid var(--bleu-brume);
  color: var(--bleu-fonce);
  background: transparent;
}

.btn--contour:hover {
  background: var(--bleu-clair);
  border-color: var(--bleu-vif);
  color: var(--bleu);
}

.btn--vert {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: var(--blanc);
  box-shadow: 0 10px 26px -12px rgba(22, 163, 74, .75);
}

.btn--vert:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #27d466, #15803d);
  box-shadow: 0 16px 32px -10px rgba(22, 163, 74, .85);
}

.btn--petit { min-height: 46px; padding: .6rem 1.25rem; font-size: .94rem; }

.groupe-btn {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2.2rem;
}

/* Lien fléché */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 650;
  color: var(--bleu);
  font-size: 1.02rem;
}

.lien-fleche svg { transition: transform var(--transition); color: var(--bleu-vif); }
.lien-fleche:hover { color: var(--bleu-fonce); }
.lien-fleche:hover svg { transform: translateX(6px); color: var(--bleu); }

/* ---------- 6. En-tête / navigation ---------- */
.entete {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(219, 231, 242, .65);
  transition: background-color var(--transition), border-color var(--transition),
              box-shadow var(--transition);
}

.entete.est-defilee {
  background: rgba(255, 255, 255, .96);
  border-bottom-color: var(--bord);
  box-shadow: 0 8px 28px -18px rgba(9, 33, 56, .45);
}

.entete-barre {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  min-height: var(--entete-h);
}

.marque {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex: none;
  margin-right: auto;
}

.marque img {
  width: 48px;
  height: 48px;
  flex: none;
  filter: drop-shadow(0 4px 12px rgba(13, 109, 179, .22));
}

.marque-texte { display: flex; flex-direction: column; line-height: 1.05; }

.marque-nom {
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.018em;
  color: var(--encre);
}

.marque-sous {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .095em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-top: .18rem;
}

.nav-liens {
  display: flex;
  align-items: center;
  gap: .2rem;
}

.nav-liens a {
  position: relative;
  display: block;
  padding: .65rem .85rem;
  border-radius: var(--r-s);
  font-size: 1.02rem;
  font-weight: 550;
  color: var(--texte);
  transition: color var(--transition), background-color var(--transition);
}

.nav-liens a::after {
  content: "";
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: .3rem;
  height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--bleu-vif), var(--ambre-vif));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.nav-liens a:hover { color: var(--encre); background: var(--bleu-clair); }
.nav-liens a:hover::after { transform: scaleX(1); }

.nav-liens a.actif { color: var(--bleu-fonce); font-weight: 700; background: var(--bleu-clair); }
.nav-liens a.actif::after { transform: scaleX(1); }

.entete .btn { flex: none; }

.bouton-menu {
  display: none;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--r-m);
  border: 1px solid var(--bord);
  background: var(--blanc);
  align-items: center;
  justify-content: center;
  box-shadow: var(--ombre-s);
}

.bouton-menu span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--encre);
  position: relative;
  transition: transform var(--transition), background-color .15s;
}

.bouton-menu span::before,
.bouton-menu span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--encre);
  transition: transform var(--transition), top var(--transition);
}

.bouton-menu span::before { top: -6px; }
.bouton-menu span::after { top: 6px; }

.bouton-menu[aria-expanded="true"] span { background: transparent; }
.bouton-menu[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.bouton-menu[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* Panneau mobile */
.nav-mobile {
  position: fixed;
  inset: var(--entete-h) 0 auto 0;
  z-index: 99;
  background: var(--blanc);
  border-bottom: 1px solid var(--bord);
  box-shadow: var(--ombre-g);
  padding: 1rem 0 1.5rem;
  transform: translateY(-118%);
  visibility: hidden;
  transition: transform .42s cubic-bezier(.2, .8, .25, 1), visibility .42s;
  max-height: calc(100dvh - var(--entete-h));
  overflow-y: auto;
}

.nav-mobile.est-ouverte { transform: translateY(0); visibility: visible; }

.nav-mobile ul { display: flex; flex-direction: column; }

.nav-mobile li {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .3s, transform .3s;
}

.nav-mobile.est-ouverte li { opacity: 1; transform: none; }
.nav-mobile.est-ouverte li:nth-child(1) { transition-delay: .06s; }
.nav-mobile.est-ouverte li:nth-child(2) { transition-delay: .1s; }
.nav-mobile.est-ouverte li:nth-child(3) { transition-delay: .14s; }
.nav-mobile.est-ouverte li:nth-child(4) { transition-delay: .18s; }
.nav-mobile.est-ouverte li:nth-child(5) { transition-delay: .22s; }
.nav-mobile.est-ouverte li:nth-child(6) { transition-delay: .26s; }

.nav-mobile li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem .35rem;
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--encre);
  border-bottom: 1px solid var(--bord-doux);
}

.nav-mobile li a.actif { color: var(--bleu); font-weight: 600; }
.nav-mobile li a svg { color: var(--texte-doux); }
.nav-mobile .btn { width: 100%; margin-top: 1.35rem; }

/* ---------- 7. Héros ---------- */
.hero {
  position: relative;
  padding: calc(var(--entete-h) + clamp(2.5rem, 6vw, 4.5rem)) 0 clamp(3.5rem, 7vw, 6rem);
  background-color: var(--bleu-voile);
  background-image: url('../img/hero-bg.svg'), linear-gradient(180deg, var(--bleu-voile) 0%, #fdfcfa 58%, var(--blanc) 100%);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.hero-lueur {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: .55;
}

.hero-lueur--a {
  width: 620px; height: 620px;
  top: -260px; right: -160px;
  background: radial-gradient(circle, rgba(46, 149, 221, .42), transparent 68%);
}

.hero-lueur--b {
  width: 480px; height: 480px;
  bottom: -220px; left: -180px;
  background: radial-gradient(circle, rgba(201, 131, 34, .22), transparent 68%);
}

.hero-grille {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.hero h1 { margin: 1.1rem 0 0; }

.hero h1 .accent {
  background: linear-gradient(135deg, var(--bleu-vif) 0%, var(--bleu-electrique) 50%, var(--bleu-fonce) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-intro {
  margin-top: 1.45rem;
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  line-height: 1.75;
  max-width: 40em;
  color: var(--texte);
}

.hero-domaines {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 2.3rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--bord);
}

.hero-domaines span {
  font-size: .94rem;
  font-weight: 600;
  color: var(--encre);
  background: rgba(255, 255, 255, .95);
  border: 1px solid var(--bord);
  border-radius: var(--r-plein);
  padding: .45rem 1.05rem;
  box-shadow: 0 2px 8px -2px rgba(13, 109, 179, .1);
  transition: border-color var(--transition), color var(--transition), transform var(--transition);
}

.hero-domaines span:hover {
  border-color: var(--bleu-vif);
  color: var(--bleu);
  transform: translateY(-2px);
}

/* Visuel du héros */
.hero-visuel { position: relative; }

.hero-cadre {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--ombre-g);
  background: var(--bleu-clair);
  aspect-ratio: 16 / 11;
}

.hero-cadre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-cadre::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, transparent 45%);
  pointer-events: none;
}

.hero-carte {
  position: absolute;
  left: -14px;
  bottom: -26px;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .9rem 1.3rem .9rem .9rem;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  box-shadow: var(--ombre-m);
  max-width: 86%;
  animation: heroLevitation 6s ease-in-out infinite alternate;
}

.hero-carte img { width: 56px; height: 56px; flex: none; }

.hero-carte strong {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.05rem;
  color: var(--encre);
  letter-spacing: -.01em;
}

.hero-carte span {
  font-size: .88rem;
  color: var(--texte-doux);
  line-height: 1.45;
}

.hero-etiquette {
  position: absolute;
  top: 1.1rem;
  right: -10px;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 1rem;
  border-radius: var(--r-plein);
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--bord);
  box-shadow: var(--ombre-m);
  font-size: .88rem;
  font-weight: 650;
  color: var(--encre);
  animation: heroEtiquetteFloat 5s ease-in-out infinite alternate;
}

@keyframes heroLevitation {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-10px); }
}

@keyframes heroEtiquetteFloat {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-7px) rotate(1.2deg); }
}

/* ---------- 8. Bandeau des domaines ---------- */
.bande {
  border-top: 1px solid var(--bord);
  border-bottom: 1px solid var(--bord);
  background: var(--blanc);
  padding: 1.6rem 0;
}

.bande-liste {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.2rem;
}

.bande-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--encre);
}

.bande-item svg { color: var(--bleu-vif); flex: none; }

/* ---------- 9. Cartes ---------- */
.grille {
  display: grid;
  gap: clamp(1.1rem, 2vw, 1.6rem);
}

.grille--2 { grid-template-columns: repeat(2, 1fr); }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }

.carte {
  position: relative;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  padding: clamp(1.6rem, 2.5vw, 2.2rem);
  box-shadow: var(--ombre-s);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}

.carte:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-m);
  border-color: var(--bleu-vif);
}

.carte h3 { margin-bottom: .7rem; font-size: 1.35rem; }
.carte p { font-size: 1.05rem; line-height: 1.65; }

.icone {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: linear-gradient(140deg, var(--bleu-clair), #fff);
  border: 1px solid var(--bord);
  color: var(--bleu);
  margin-bottom: 1.35rem;
}

.icone--ambre {
  background: linear-gradient(140deg, var(--ambre-clair), #fff);
  color: var(--ambre);
}

/* Liste à puces */
.liste-puces { margin-top: 1.2rem; display: grid; gap: .65rem; }

.liste-puces li {
  position: relative;
  padding-left: 1.65rem;
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--texte);
}

.liste-puces li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--bleu-vif), var(--ambre-vif));
}

/* Carte de service détaillée */
.service {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(1.6rem, 3.2vw, 3.4rem);
  align-items: start;
  padding: clamp(2rem, 3.4vw, 3.2rem);
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-xl);
  box-shadow: var(--ombre-s);
}

.service + .service { margin-top: clamp(1.2rem, 2vw, 1.8rem); }

.service-tete { position: sticky; top: 1.5rem; }
.service h2 { font-size: clamp(1.45rem, 2.5vw, 1.95rem); }

.service-num {
  font-family: var(--police-titre);
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--bleu-vif);
  display: block;
  margin-bottom: .75rem;
}

.service-corps { display: grid; gap: 1.5rem; }
.service-corps p { font-size: 1.08rem; line-height: 1.7; }

.service-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .8rem;
}

.service-liste li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .95rem 1.15rem;
  background: var(--bleu-voile);
  border: 1px solid var(--bord-doux);
  border-radius: var(--r-m);
  font-size: 1.02rem;
  font-weight: 550;
  color: var(--encre);
  line-height: 1.5;
  transition: background-color var(--transition), border-color var(--transition);
}

.service-liste li:hover { background: var(--bleu-clair); border-color: var(--bleu-vif); }

.service-liste svg { color: var(--bleu); flex: none; margin-top: .2rem; }

/* ---------- 10. Bloc duo (texte + image) ---------- */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.2rem, 4.8vw, 4.5rem);
  align-items: center;
}

.duo-texte p { font-size: 1.1rem; line-height: 1.72; }

.duo--inverse .duo-texte { order: 2; }

.duo-media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--ombre-m);
  aspect-ratio: 4 / 3;
  background: var(--bleu-clair);
}

.duo-media img { width: 100%; height: 100%; object-fit: cover; }

.duo-media--haut { aspect-ratio: 3 / 4; }

/* ---------- 11. Valeurs ---------- */
.valeurs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.1rem;
}

.valeur {
  text-align: center;
  padding: 2.1rem 1.2rem;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  transition: transform var(--transition), box-shadow var(--transition);
}

.valeur:hover { transform: translateY(-4px); box-shadow: var(--ombre-m); border-color: var(--bleu-vif); }

.valeur .icone { margin-inline: auto; margin-bottom: 1.1rem; }

.valeur h4 { margin-bottom: .45rem; font-size: 1.15rem; }
.valeur p { font-size: .95rem; color: var(--texte-doux); line-height: 1.55; }

/* ---------- 12. Bénéficiaires ---------- */
.beneficiaires {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

.beneficiaires li {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .8rem 1.3rem;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-plein);
  font-size: 1.04rem;
  font-weight: 550;
  color: var(--encre);
  box-shadow: var(--ombre-s);
}

.beneficiaires svg { color: var(--bleu-vif); flex: none; }

/* ---------- 13. Citation / slogan ---------- */
.citation {
  position: relative;
  padding: clamp(2.2rem, 4vw, 3.4rem);
  background: linear-gradient(135deg, var(--bleu-clair), var(--sable));
  border: 1px solid var(--bord);
  border-radius: var(--r-xl);
  text-align: center;
  overflow: hidden;
}

.citation blockquote {
  font-family: var(--police-titre);
  font-size: clamp(1.35rem, 3.2vw, 2.05rem);
  line-height: 1.28;
  letter-spacing: -.02em;
  color: var(--encre);
  max-width: 20ch;
  margin-inline: auto;
}

.citation cite {
  display: block;
  margin-top: 1.2rem;
  font-style: normal;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bleu-fonce);
}

/* ---------- 14. Direction ---------- */
.direction {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}

.dirigeant {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 1.4rem;
  align-items: center;
  padding: 1.4rem;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-xl);
  box-shadow: var(--ombre-s);
}

.dirigeant-photo {
  width: 148px;
  height: 168px;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--bleu-clair);
  flex: none;
}

.dirigeant-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }

.dirigeant-initiales {
  display: grid;
  place-items: center;
  width: 148px;
  height: 168px;
  border-radius: var(--r-l);
  background: linear-gradient(150deg, var(--bleu-clair), var(--sable));
  border: 1px solid var(--bord);
  font-family: var(--police-titre);
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--bleu-fonce);
  letter-spacing: -.02em;
}

.dirigeant-role {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--bleu-vif);
  margin-bottom: .35rem;
}

.dirigeant h3 { margin-bottom: .55rem; }

.dirigeant a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .95rem;
  font-weight: 500;
  color: var(--texte);
  transition: color var(--transition);
}

.dirigeant a:hover { color: var(--bleu); }
.dirigeant a svg { color: var(--bleu-vif); }

/* ---------- 15. Boîte de recherche et filtres de catalogue ---------- */
.boite-recherche-filtres {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-xl);
  padding: 1.4rem 1.6rem;
  box-shadow: var(--ombre-m);
  margin-bottom: 2rem;
  display: grid;
  gap: 1.2rem;
}

.champ-recherche-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.recherche-icone {
  position: absolute;
  left: 1.15rem;
  color: var(--texte-doux);
  pointer-events: none;
  transition: color var(--transition);
}

.recherche-input {
  width: 100%;
  min-height: 52px;
  padding: .75rem 2.8rem .75rem 3.1rem;
  border-radius: var(--r-m);
  border: 1.5px solid var(--bord);
  background: var(--coquille);
  font-size: 1.02rem;
  color: var(--encre);
  font-family: var(--police-texte);
  transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.recherche-input:focus {
  outline: none;
  background: var(--blanc);
  border-color: var(--bleu-vif);
  box-shadow: 0 0 0 4px rgba(28, 142, 227, .15);
}

.recherche-input:focus + .recherche-icone,
.champ-recherche-wrap:focus-within .recherche-icone {
  color: var(--bleu-vif);
}

.recherche-input::placeholder {
  color: var(--texte-doux);
  opacity: .85;
}

.recherche-effacer {
  position: absolute;
  right: .85rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bleu-clair);
  color: var(--bleu-fonce);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition), transform var(--transition);
}

.recherche-effacer:hover {
  background: var(--bleu-brume);
  transform: scale(1.08);
}

/* Filtres pills */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.filtres--pills {
  margin-bottom: 0;
}

.filtre {
  padding: .55rem 1.15rem;
  min-height: 42px;
  border-radius: var(--r-plein);
  border: 1px solid var(--bord);
  background: #fbf6ee;
  font-size: .94rem;
  font-weight: 550;
  color: var(--encre);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.filtre:hover {
  background: var(--bleu-clair);
  border-color: var(--bleu-vif);
  color: var(--bleu);
  transform: translateY(-1px);
}

.filtre[aria-pressed="true"] {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  border-color: #d97706;
  color: var(--blanc);
  font-weight: 700;
  box-shadow: 0 6px 16px -4px rgba(217, 119, 6, .55);
}

/* État aucun résultat */
.catalogue-vide {
  text-align: center;
  padding: 3.5rem 1.5rem;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-xl);
  margin-top: 1.5rem;
  box-shadow: var(--ombre-s);
}

.catalogue-vide h3 {
  font-size: 1.35rem;
  color: var(--encre);
  margin-bottom: .5rem;
}

.catalogue-vide p {
  font-size: 1.05rem;
  color: var(--texte-doux);
}

/* ---------- 17. Galerie des réalisations ---------- */
.galerie {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  gap: clamp(.8rem, 1.5vw, 1.25rem);
}

.oeuvre {
  position: relative;
  display: grid;
  grid-column: span 4;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--bleu-clair);
  border: 1px solid var(--bord);
  cursor: zoom-in;
  transition: transform var(--transition), box-shadow var(--transition), opacity .35s;
}

.galerie .oeuvre--large { grid-column: span 8; }

.oeuvre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.oeuvre-media { aspect-ratio: 3 / 4; overflow: hidden; }
.galerie .oeuvre-media { height: 100%; }
.galerie .oeuvre--large .oeuvre-media { aspect-ratio: 20 / 13; }

.oeuvre:hover { transform: translateY(-4px); box-shadow: var(--ombre-m); }
.oeuvre:hover img { transform: scale(1.045); }

.oeuvre-legende {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.6rem 1.15rem 1.05rem;
  background: linear-gradient(180deg, transparent, rgba(9, 30, 50, .82));
  color: var(--blanc);
}

.oeuvre-legende strong {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.02rem;
  letter-spacing: -.012em;
}

.oeuvre-legende span {
  display: block;
  font-size: .82rem;
  opacity: .85;
  margin-top: .12rem;
}

.oeuvre.est-masquee { display: none; }

/* Visionneuse */
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(8, 26, 43, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}

.visionneuse.est-ouverte { opacity: 1; visibility: visible; }

.visionneuse figure {
  max-width: min(1000px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.visionneuse img {
  max-height: 76dvh;
  width: auto;
  margin-inline: auto;
  border-radius: var(--r-m);
  box-shadow: var(--ombre-g);
  background: var(--blanc);
}

.visionneuse figcaption {
  text-align: center;
  color: #fff;
  font-size: .95rem;
}

.visionneuse figcaption strong { display: block; font-family: var(--police-titre); font-size: 1.08rem; }
.visionneuse figcaption span { opacity: .8; font-size: .86rem; }

.visionneuse-fermer,
.visionneuse-nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  transition: background-color var(--transition);
}

.visionneuse-fermer:hover,
.visionneuse-nav:hover { background: rgba(255, 255, 255, .3); }

.visionneuse-fermer { top: 1rem; right: 1rem; }
.visionneuse-nav--prec { left: 1rem; top: 50%; transform: translateY(-50%); }
.visionneuse-nav--suiv { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ---------- 18. Catalogue de fournitures ---------- */
.catalogue {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: clamp(.9rem, 1.6vw, 1.35rem);
  align-items: start;
}

.produit {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}

.produit:hover { transform: translateY(-4px); box-shadow: var(--ombre-m); }
.produit.est-choisi { border-color: var(--bleu-vif); box-shadow: 0 0 0 2px rgba(46, 149, 221, .22), var(--ombre-m); }
.produit.est-masque { display: none; }

.produit-media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: linear-gradient(155deg, var(--bleu-voile), var(--blanc) 65%);
  border-bottom: 1px solid var(--bord-doux);
  overflow: hidden;
}

.produit-media img { width: 100%; height: 100%; object-fit: cover; }
.produit-media svg {
  width: 50%;
  max-width: 90px;
  height: auto;
  color: var(--bleu);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 4px 10px rgba(13, 109, 179, 0.15));
  transition: transform var(--transition);
}
.produit:hover .produit-media svg { transform: scale(1.08); }
.produit-media--sable { background: linear-gradient(155deg, var(--sable), var(--blanc) 65%); }
.produit-media--sable svg {
  color: var(--ambre);
  filter: drop-shadow(0 4px 10px rgba(217, 119, 6, 0.15));
}

.produit-corps { padding: 1.15rem 1.15rem 1.3rem; display: flex; flex-direction: column; flex: 1; gap: .55rem; }

.produit h3 { font-size: 1.12rem; line-height: 1.3; font-weight: 700; color: var(--encre); }

/* Accordéon déroulant pour détails produit */
.produit-accordeon {
  margin: .35rem 0 .4rem;
  border-top: 1px dashed var(--bord);
  padding-top: .6rem;
}

.produit-accordeon-titre {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .84rem;
  font-weight: 650;
  color: var(--bleu);
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: color var(--transition);
}

.produit-accordeon-titre::-webkit-details-marker {
  display: none;
}

.produit-accordeon-titre:hover {
  color: var(--bleu-fonce);
}

.produit-accordeon-fleche {
  transition: transform .25s ease;
  flex-shrink: 0;
}

.produit-accordeon[open] .produit-accordeon-fleche {
  transform: rotate(180deg);
}

.produit-accordeon-contenu {
  margin-top: .65rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  animation: apparaitreAccordeon .25s ease-out;
}

@keyframes apparaitreAccordeon {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.produit-detail {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .1rem;
}

.produit-detail span {
  font-size: .82rem;
  font-weight: 500;
  padding: .28rem .65rem;
  border-radius: var(--r-plein);
  background: var(--coquille);
  border: 1px solid var(--bord);
  color: var(--texte);
}

.produit-note { font-size: .88rem; color: var(--texte-doux); line-height: 1.5; }

.produit-choix {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .95rem;
  font-weight: 650;
  color: var(--bleu-fonce);
  align-self: flex-start;
  transition: color var(--transition);
}

.produit-case {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  border: 1.5px solid var(--bord);
  background: var(--blanc);
  color: transparent;
  transition: all var(--transition);
}

.produit-choix:hover .produit-case { border-color: var(--bleu-vif); }
.est-choisi .produit-case { background: var(--bleu-vif); border-color: var(--bleu-vif); color: #fff; }

/* Barre de sélection */
.barre-selection {
  position: fixed;
  left: 50%;
  bottom: 1.1rem;
  z-index: 90;
  width: min(680px, calc(100% - 1.6rem));
  transform: translate(-50%, 160%);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .8rem .8rem .8rem 1.4rem;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid var(--bord);
  border-radius: var(--r-plein);
  box-shadow: var(--ombre-g);
  transition: transform .45s cubic-bezier(.2, .8, .25, 1);
}

.barre-selection.est-visible { transform: translate(-50%, 0); }

/* Quand une demande est en cours : place reservee et bouton flottant masque */
body.a-selection { padding-bottom: 92px; }
body.a-selection .flottant { transform: scale(0); pointer-events: none; }

.barre-selection p { font-size: .98rem; margin-right: auto; line-height: 1.35; }
.barre-selection strong { color: var(--encre); font-weight: 700; }

.barre-effacer {
  font-size: .92rem;
  font-weight: 600;
  color: var(--texte-doux);
  padding: .5rem .3rem;
  transition: color var(--transition);
}

.barre-effacer:hover { color: var(--encre); text-decoration: underline; }

/* Icônes dessinées du catalogue */
.produit-media svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sprite { display: none; }

.compte-articles {
  font-size: .96rem;
  font-weight: 500;
  color: var(--texte-doux);
  margin-bottom: 1.2rem;
}

.note-catalogue {
  margin-top: 2rem;
  padding: 1.25rem 1.45rem;
  background: var(--sable);
  border: 1px solid var(--sable-fonce);
  border-radius: var(--r-m);
  font-size: .96rem;
  color: var(--texte);
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  line-height: 1.6;
}

.note-catalogue svg { color: var(--ambre); flex: none; margin-top: .2rem; }

/* ---------- 18 bis. Vignettes d'entrée de catalogue ---------- */
.vignettes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 1.8vw, 1.4rem);
}

.vignette {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--ombre-s);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}

.vignette:hover {
  transform: translateY(-5px);
  box-shadow: var(--ombre-m);
  border-color: var(--bleu-vif);
}

.vignette-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bleu-clair); }
.vignette-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.vignette:hover .vignette-media img { transform: scale(1.05); }

.vignette-corps {
  padding: 1.3rem 1.4rem 1.45rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 1;
}

.vignette-corps h3 { font-size: 1.15rem; font-weight: 700; }
.vignette-corps p { font-size: .98rem; color: var(--texte-doux); line-height: 1.55; }
.vignette-corps .lien-fleche { margin-top: auto; padding-top: .9rem; font-size: .98rem; }

/* ---------- 17 bis. Aperçu des réalisations ---------- */
.apercu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.8rem, 1.5vw, 1.2rem);
}

.apercu .oeuvre { grid-column: auto; cursor: default; }
.apercu .oeuvre-media { aspect-ratio: 3 / 4; }

/* ---------- 19. Bloc de contact ---------- */
.bloc-contact {
  position: relative;
  overflow: hidden;
  padding: clamp(2.6rem, 5.2vw, 4.2rem);
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, var(--bleu-clair) 0%, var(--sable) 100%);
  border: 1px solid var(--bord);
  text-align: center;
}

.bloc-contact::before {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  top: -220px; right: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .85), transparent 70%);
  pointer-events: none;
}

.bloc-contact > * { position: relative; }
.bloc-contact p { max-width: 52ch; margin-inline: auto; margin-top: 1rem; font-size: 1.14rem; line-height: 1.68; }
.bloc-contact .groupe-btn { justify-content: center; }

.contact-rapide {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 1.9rem;
  margin-top: 2.2rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(13, 109, 179, .15);
}

.contact-rapide a,
.contact-rapide span {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--encre);
}

.contact-rapide svg { color: var(--bleu-vif); flex: none; }
.contact-rapide a:hover { color: var(--bleu); }

/* ---------- 20. Coordonnées & formulaire ---------- */
.contact-grille {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(1.6rem, 3.6vw, 3.2rem);
  align-items: start;
}

.coord {
  display: grid;
  gap: 1rem;
}

.coord-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 1.2rem;
  align-items: start;
  padding: 1.4rem 1.5rem;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  box-shadow: var(--ombre-s);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.coord-item:hover { border-color: var(--bleu-vif); box-shadow: var(--ombre-m); }

.coord-item .icone { width: 52px; height: 52px; margin: 0; border-radius: 16px; }

.coord-item h3 { font-size: 1.12rem; margin-bottom: .4rem; }
.coord-item p, .coord-item a { font-size: 1.02rem; color: var(--texte); display: block; line-height: 1.55; }
.coord-item a:hover { color: var(--bleu); }

.formulaire {
  scroll-margin-top: 100px;
  padding: clamp(1.8rem, 3.2vw, 2.6rem);
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-xl);
  box-shadow: var(--ombre-m);
}

.champ { display: grid; gap: .5rem; margin-bottom: 1.2rem; }

.champ label {
  font-size: .94rem;
  font-weight: 650;
  color: var(--encre);
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: 54px;
  padding: .9rem 1.1rem;
  font-size: 1.05rem;
  color: var(--encre);
  background: var(--coquille);
  border: 1.5px solid var(--bord);
  border-radius: var(--r-m);
  transition: border-color var(--transition), background-color var(--transition),
              box-shadow var(--transition);
}

.champ textarea { min-height: 138px; resize: vertical; line-height: 1.6; }

.champ select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230d6db3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  background: var(--blanc);
  border-color: var(--bleu-vif);
  box-shadow: 0 0 0 4px rgba(28, 142, 227, .18);
}

.champ input::placeholder,
.champ textarea::placeholder { color: var(--texte-doux); }

.formulaire .btn { width: 100%; }

.formulaire-note {
  margin-top: 1rem;
  font-size: .88rem;
  color: var(--texte-doux);
  text-align: center;
  line-height: 1.55;
}

/* ---------- 21. Bannière de page ---------- */
.banniere {
  position: relative;
  padding: calc(var(--entete-h) + clamp(2.8rem, 5.8vw, 4.4rem)) 0 clamp(2.5rem, 5.2vw, 4rem);
  background: linear-gradient(180deg, var(--bleu-voile), var(--blanc));
  border-bottom: 1px solid var(--bord);
  overflow: hidden;
}

.banniere::before {
  content: "";
  position: absolute;
  width: 560px; height: 560px;
  top: -320px; right: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(28, 142, 227, .32), transparent 68%);
  filter: blur(70px);
  pointer-events: none;
}

.banniere > * { position: relative; }
.banniere h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); margin-bottom: 1.1rem; font-weight: 800; }
.banniere p { max-width: 60ch; font-size: 1.16rem; line-height: 1.7; color: var(--texte); }

.fil-ariane {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .92rem;
  font-weight: 550;
  color: var(--texte-doux);
  margin-bottom: 1.3rem;
}

.fil-ariane a:hover { color: var(--bleu); }
.fil-ariane span[aria-current] { color: var(--encre); font-weight: 600; }

/* ---------- 22. Pied de page (Compact & Moderne) ---------- */
.pied {
  background: linear-gradient(180deg, #092138 0%, #061524 100%);
  color: #c7d8e8;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: clamp(2.2rem, 4vw, 3rem) 0 0;
  position: relative;
}

.pied-grille {
  display: grid;
  grid-template-columns: 1.5fr 1.1fr 1.1fr;
  gap: clamp(1.8rem, 3.5vw, 3.5rem);
  padding-bottom: clamp(1.8rem, 3vw, 2.2rem);
}

.pied-marque {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: .75rem;
  text-decoration: none;
}

.pied-marque img {
  width: 44px;
  height: 44px;
  border-radius: var(--r-s);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .3));
}

.pied-marque .marque-nom {
  color: #ffffff;
  font-family: var(--police-titre);
  font-size: 1.18rem;
  font-weight: 750;
  letter-spacing: -.02em;
}

.pied-marque .marque-sous {
  color: var(--bleu-vif);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pied-slogan {
  font-size: .94rem;
  line-height: 1.55;
  color: #9cb5cb;
  max-width: 36ch;
}

.pied-titre {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: .85rem;
}

.pied-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem .8rem;
}

.pied-menu a {
  display: inline-flex;
  align-items: center;
  font-size: .92rem;
  font-weight: 500;
  color: #a8c1d8;
  transition: color var(--transition), transform var(--transition);
}

.pied-menu a:hover {
  color: var(--ambre-vif);
  transform: translateX(3px);
}

.pied-contact-items {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.pied-contact-lien,
.pied-contact-lieu {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: .92rem;
  font-weight: 500;
  color: #c7d8e8;
  transition: color var(--transition), transform var(--transition);
}

.pied-contact-lien:hover {
  color: #ffffff;
  transform: translateX(3px);
}

.pied-contact-lien--wa {
  color: #25d366;
  font-weight: 600;
}

.pied-contact-lien--wa:hover {
  color: #4ade80;
}

.pied-contact-lien svg,
.pied-contact-lieu svg {
  color: var(--bleu-vif);
  flex-shrink: 0;
}

.pied-contact-lien--wa svg {
  color: #25d366;
}

.pied-bas {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1rem 0 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
  align-items: center;
  justify-content: space-between;
  font-size: .82rem;
  color: #7e9bb5;
}

.pied-bas p {
  color: #7e9bb5;
}

.pied-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .7rem;
  font-size: .8rem;
  color: #6c8a9f;
}

.pied-sep {
  opacity: .5;
}

/* ---------- 23. Bouton WhatsApp flottant ---------- */
.flottant {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 95;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(20, 130, 66, .85);
  transform: scale(0);
  transition: transform .4s cubic-bezier(.2, .8, .25, 1), background-color var(--transition);
}

.flottant.est-visible { transform: scale(1); }
.flottant:hover { background: #1eb85a; }

.flottant::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, .4);
  animation: pulsation 2.6s ease-out infinite;
}

@keyframes pulsation {
  0% { transform: scale(1); opacity: .7; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Barre de progression de lecture */
.barre-progression {
  position: absolute;
  top: 0;
  left: 0;
  height: 3.5px;
  width: 0%;
  background: linear-gradient(90deg, var(--bleu-vif), var(--ambre-vif), #00d2ff);
  z-index: 105;
  transition: width 0.12s ease-out;
  box-shadow: 0 0 10px rgba(28, 142, 227, 0.6);
}

/* Animations d'icônes au survol */
.carte:hover .icone,
.valeur:hover .icone,
.service:hover .icone,
.coord-item:hover .icone {
  transform: scale(1.14) rotate(4deg);
  box-shadow: 0 10px 22px -6px rgba(13, 109, 179, .35);
}

.icone {
  transition: transform .45s cubic-bezier(.2, .8, .25, 1), box-shadow .45s cubic-bezier(.2, .8, .25, 1);
}

/* ---------- 24. Animations d'apparition ---------- */
[data-anim] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}

[data-anim].est-visible { opacity: 1; transform: none; }

[data-anim="gauche"] { transform: translateX(-32px); }
[data-anim="droite"] { transform: translateX(32px); }
[data-anim="zoom"] { transform: scale(.92); }

[data-retard="1"] { transition-delay: .09s; }
[data-retard="2"] { transition-delay: .18s; }
[data-retard="3"] { transition-delay: .27s; }
[data-retard="4"] { transition-delay: .36s; }
[data-retard="5"] { transition-delay: .45s; }

/* Le decalage lateral n est conserve que sur les grands ecrans,
   ou la marge disponible garantit l absence de debordement horizontal. */
@media (max-width: 1300px) {
  [data-anim="gauche"], [data-anim="droite"] { transform: translateY(24px); }
}

/* Lien d'évitement */
.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  padding: .9rem 1.4rem;
  background: var(--encre);
  color: #fff;
  border-radius: 0 0 var(--r-m) 0;
}

.evitement:focus { left: 0; }

/* ---------- 25. Adaptatif ---------- */
@media (max-width: 1080px) {
  .nav-liens a { padding: .6rem .6rem; font-size: .9rem; }
  .marque-sous { display: none; }
  .service { grid-template-columns: 250px 1fr; }
  .pied-grille { grid-template-columns: 1.2fr 1fr 1fr; gap: 2rem; }
}

@media (max-width: 960px) {
  .nav-liens, .entete .btn { display: none; }
  .bouton-menu { display: flex; }
  .hero-grille { grid-template-columns: 1fr; gap: 3.2rem; }
  .hero-visuel { max-width: 560px; width: 100%; }
  .hero-intro { max-width: none; }
  .bande-liste { grid-template-columns: repeat(3, 1fr); gap: 1rem 1.5rem; }
  .grille--4 { grid-template-columns: repeat(2, 1fr); }
  .grille--3 { grid-template-columns: repeat(2, 1fr); }
  .valeurs { grid-template-columns: repeat(3, 1fr); }
  .duo { grid-template-columns: 1fr; gap: 2.2rem; }
  .duo--inverse .duo-texte { order: 0; }
  .duo-media { aspect-ratio: 16 / 11; }
  .duo-media--haut { aspect-ratio: 16 / 11; }
  .service { grid-template-columns: 1fr; gap: 1.6rem; }
  .service-tete { position: static; }
  .contact-grille { grid-template-columns: 1fr; }
  .direction { grid-template-columns: 1fr; }
  .oeuvre { grid-column: span 6; }
  .galerie .oeuvre--large { grid-column: span 12; }
  .galerie .oeuvre--large .oeuvre-media { aspect-ratio: 16 / 9; }
  .vignettes { grid-template-columns: 1fr; }
  .apercu { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  body { font-size: 1.0625rem; }
  .contenu, .contenu--etroit { width: min(100% - 2rem, 100%); }
  .section { padding: 3.4rem 0; }
  .grille--2, .grille--3, .grille--4 { grid-template-columns: 1fr; }
  .valeurs { grid-template-columns: repeat(2, 1fr); }
  .bande-liste { grid-template-columns: repeat(2, 1fr); }
  .dirigeant { grid-template-columns: 1fr; text-align: left; }
  .dirigeant-photo, .dirigeant-initiales { width: 100%; height: 220px; }
  .dirigeant-photo img { object-position: 50% 18%; }
  .pied-grille { grid-template-columns: 1fr; gap: 1.8rem; }
  .pied-bas { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .hero-carte { position: static; max-width: none; margin-top: 1rem; }
  .hero-etiquette { top: .8rem; right: .8rem; }
  .catalogue { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .boite-recherche-filtres { padding: 1.1rem 1.1rem; gap: 1rem; border-radius: var(--r-l); }
  .recherche-input { font-size: .96rem; min-height: 48px; }
  /* Filtres : une seule rangee, defilement horizontal jusqu au bord de l ecran */
  .filtres {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-inline: -1rem;
    padding: .15rem 1rem .5rem;
  }
  .filtres--pills { margin-inline: -.3rem; padding: .1rem .3rem .4rem; }
  .filtres::-webkit-scrollbar { display: none; }
  .filtre { flex: none; }
  .produit-corps { padding: .9rem .9rem 1.1rem; }
  .produit h3 { font-size: .95rem; }
  .barre-selection { padding: .65rem .65rem .65rem 1rem; gap: .6rem; flex-wrap: wrap; }
  .barre-selection p { font-size: .86rem; }
  .barre-selection .btn { flex: 1; }
  .groupe-btn .btn { flex: 1 1 100%; }
  .visionneuse-nav { width: 44px; height: 44px; }
  .visionneuse-nav--prec { left: .4rem; }
  .visionneuse-nav--suiv { right: .4rem; }
}

@media (max-width: 560px) {
  .oeuvre, .galerie .oeuvre--large { grid-column: span 12; }
}

@media (max-width: 460px) {
  .valeurs { grid-template-columns: 1fr; }
  .bande-liste { grid-template-columns: 1fr; }
}

/* ---------- 26. Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-anim] { opacity: 1; transform: none; }
}

/* ---------- 27. Impression ---------- */
@media print {
  .entete, .nav-mobile, .flottant, .barre-selection, .visionneuse { display: none !important; }
  body { color: #000; }
}