@charset "UTF-8";
:root {
  --color-dark: #111111;
  --color-text: #2E2E2E;
  --color-muted: #9A9A9A;
  --color-light: #F5F3F0;
  --color-primary: #B08D57;
  --color-primary-light: #c7a878;
  --color-white: #ffffff;
  --maxw: 1180px;
  --r: 6px;
  --shadow: 0 10px 40px rgba(17, 17, 17, .10);
  --t: .3s cubic-bezier(.4, 0, .2, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  font-family: "Open Sans", system-ui, sans-serif;
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-title {
  font-family: "League Spartan", "League Spartan", sans-serif;
  color: var(--color-dark);
  letter-spacing: 0.5px;
  line-height: 1.15;
  font-weight: 700;
  text-transform: uppercase;
}

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

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

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-family: "League Spartan", sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 14px;
}

.section {
  padding: 92px 0;
}
.section h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  margin-bottom: 18px;
}

.lead {
  max-width: 680px;
  color: var(--color-text);
  font-size: 17px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "League Spartan", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  font-size: 14px;
  padding: 15px 26px 13px;
  border-radius: var(--r);
  border: 1.5px solid var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  transition: var(--t);
}
.btn:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
  transform: translateY(-2px);
}
.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  background: var(--color-muted);
  border-color: var(--color-muted);
}
.btn:disabled:hover {
  background: var(--color-muted);
  border-color: var(--color-muted);
  transform: none;
}
.btn.is-loading {
  cursor: default;
  opacity: .85;
  transform: none;
}
.btn-spinner {
  display: none;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: av-spin .6s linear infinite;
}
.btn.is-loading .btn-spinner {
  display: inline-block;
}
@keyframes av-spin {
  to { transform: rotate(360deg); }
}
.btn.ghost {
  background: transparent;
  color: var(--color-primary);
}
.btn.ghost:hover {
  background: var(--color-primary);
  color: #fff;
}
.btn.light {
  background: #fff;
  border-color: #fff;
  color: var(--color-dark);
}
.btn.light:hover {
  background: var(--color-light);
  border-color: var(--color-light);
}

header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e7e1d8;
  box-shadow: 0 2px 18px rgba(17, 17, 17, 0.05);
}
header .wrap {
  max-width: 1340px;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
  gap: 28px;
  flex-wrap: nowrap;
}

.brand {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.brand img {
  height: 34px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.menu {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.menu a {
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  transition: var(--t);
  white-space: nowrap;
}
.menu a:hover {
  color: var(--color-primary);
}

.nav-cta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav-cta .btn {
  padding: 10px 18px 8px;
  font-size: 12px;
  white-space: nowrap;
}

.nav-devis .lbl-short {
  display: none;
}

.tel {
  color: var(--color-dark);
  font-family: "League Spartan", sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
}
.tel:hover {
  color: var(--color-primary);
}

.burger {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.burger span {
  width: 24px;
  height: 2px;
  background: var(--color-dark);
  transition: var(--t);
}

.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  color: #fff;
  background-color: #111;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Image du hero servie en <img> plutot qu'en background-image, pour que le
   navigateur la decouvre tot, la priorise et choisisse sa taille dans le
   srcset. Elle est placee sous le contenu et cadree comme l'etait le fond. */
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Opacites relevees (etaient .82 / .55 / .35) : le texte du hero passe
     sur une photo librement remplacable depuis Personnaliser, son contraste
     ne peut donc pas dependre d'elle. Mesure sous les glyphes avec la photo
     d'origine : l'eyebrow tombait a 1,9:1 et le mot accentue du titre a
     1,2:1, pour des seuils AA de 4,5 et 3. Ici, meme un fond blanc pur
     reste conforme. */
  background: linear-gradient(105deg, rgba(17, 17, 17, 0.88) 0%, rgba(17, 17, 17, 0.80) 55%, rgba(17, 17, 17, 0.70) 100%);
}
.hero .wrap {
  position: relative;
  z-index: 2;
  padding-top: 60px;
  padding-bottom: 60px;
}
/* Eclairci a partir de l'accent du site : sur une photo, l'accent brut est
   trop sombre pour du petit texte (l'or #B28138 ne tient que 1,9:1). Le
   color-mix garde la teinte de chaque sous-site sans figer une valeur ici.
   Le mot accentue du titre est dans le meme cas. */
.hero .eyebrow,
.hero h1 .ac {
  color: color-mix(in srgb, var(--color-primary-light) 55%, #fff);
}
.hero h1 {
  color: #fff;
  font-size: clamp(34px, 5.4vw, 62px);
  max-width: 880px;
  margin-bottom: 22px;
}
.hero p {
  max-width: 560px;
  font-size: 18px;
  color: #e7e4df;
  margin-bottom: 34px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 38px;
}

.hero-tags span {
  font-size: 12.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 7px 13px;
  border-radius: 40px;
  color: #e7e4df;
}

.trust {
  background: var(--color-dark);
  color: #cfcbc4;
  padding: 20px 0;
  border-top: 1px solid rgba(176, 141, 87, 0.2);
}
.trust .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 38px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.trust div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.trust b {
  color: #fff;
}
.trust .laiton {
  color: var(--color-primary-light);
}

.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}

.about-img {
  position: relative;
}
.about-img img {
  border-radius: var(--r);
  box-shadow: var(--shadow);
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 380px;
}
.about-img .badge {
  position: absolute;
  left: -22px;
  bottom: -22px;
  background: var(--color-dark);
  color: #fff;
  padding: 22px 26px;
  border-radius: var(--r);
  border-left: 3px solid var(--color-primary);
}
.about-img .badge b {
  font-family: "League Spartan", sans-serif;
  font-size: 34px;
  color: #fff;
  display: block;
}
.about-img .badge span {
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-primary-light);
}

.about p + p {
  margin-top: 14px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 34px;
}

.stat {
  background: var(--color-light);
  border-radius: var(--r);
  padding: 22px 18px;
  text-align: center;
  border-bottom: 2px solid var(--color-primary);
}
.stat b {
  font-family: "League Spartan", sans-serif;
  font-size: 34px;
  color: var(--color-dark);
  display: block;
}
.stat span {
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--color-text);
}

.brands {
  background: var(--color-light);
}

/* Alternance des bandes de l'accueil : la vitrine du blog et le bloc
   contact sont sur fond clair, les zones d'intervention passent en blanc
   entre les deux.

   La section des zones partage la classe .brands avec les marques
   partenaires, dont elle reprend la mise en page centree, mais celles-ci
   restent teintees : le fond blanc ne vaut donc que pour #zones. */
.section.brands#zones {
  background: var(--color-white);
}
.brands .wrap {
  text-align: center;
}

.brand-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 30px 48px;
  margin-top: 32px;
}
.brand-row img {
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}
.brand-row img:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-3px);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 42px;
}

.svc {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: var(--r);
  padding: 26px 22px;
  transition: var(--t);
}
/* Seules les cartes qui menent quelque part reagissent au survol : sur les
   sites ou la grille sert de presentation (poles Tablec), le soulevement
   promettait un clic qui n'existe pas. */
a.svc:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
  border-color: transparent;
}
.svc .ic {
  width: 46px;
  height: 46px;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.svc h3 {
  font-size: 17px;
  margin-bottom: 8px;
}
.svc p {
  font-size: 14.5px;
  color: var(--color-muted);
  line-height: 1.55;
}

.real {
  background: var(--color-light);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 34px;
}
.filters button {
  font-family: "League Spartan", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 40px;
  border: 1.5px solid #d9d4cc;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: var(--t);
}
.filters button.active, .filters button:hover {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: #fff;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  background: #111;
  aspect-ratio: 4/3;
  box-shadow: 0 6px 24px rgba(17, 17, 17, 0.08);
}
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s ease;
}
.card .multi {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border-radius: 30px;
  background: rgba(17, 17, 17, 0.55);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  z-index: 2;
}
.card .multi svg {
  display: block;
}
.card:hover img {
  transform: scale(1.06);
  opacity: 0.82;
}
.card .meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px 18px;
  background: linear-gradient(to top, rgba(17, 17, 17, 0.95) 0%, rgba(17, 17, 17, 0.6) 45%, transparent 100%);
  color: #fff;
}
.card .meta .city {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  background: rgba(176, 141, 87, 0.6);
  backdrop-filter: blur(2px);
  padding: 3px 9px;
  border-radius: 30px;
  margin-bottom: 7px;
  opacity: 0.8;
}
.card .meta h3 {
  color: #fff;
  font-size: 16px;
  margin-top: 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  font-weight: 400;
}
.card .plus {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  opacity: 0;
  transition: var(--t);
}
.card:hover .plus {
  opacity: 1;
}

.ba-wrap {
  margin-top: 60px;
  margin-bottom: 72px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.ba {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4/3;
  user-select: none;
}
.ba img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ba .after {
  clip-path: inset(0 0 0 50%);
}
.ba .lab {
  position: absolute;
  top: 14px;
  padding: 5px 12px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: "League Spartan", sans-serif;
  font-weight: 600;
  color: #fff;
  background: rgba(17, 17, 17, 0.7);
  border-radius: 30px;
  opacity: 0.8;
}
.ba .lab.l {
  left: 14px;
}
.ba .lab.r {
  right: 14px;
  background: var(--color-primary);
}
.ba .handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #fff;
  transform: translateX(-50%);
}
.ba .handle::after {
  content: "⇆";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: #fff;
  color: var(--color-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.ba input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
}
.ba.hint .after {
  transition: clip-path 0.9s cubic-bezier(0.45, 0, 0.2, 1);
}
.ba.hint .handle {
  transition: left 0.9s cubic-bezier(0.45, 0, 0.2, 1);
}
.ba.hint .handle::after {
  animation: baPulse 1.4s ease-in-out infinite;
}

@keyframes baPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 6px 20px rgba(176, 141, 87, 0.55);
  }
}
.zones-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 36px;
  text-align: left;
}

.dept {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0;
}
.dept span, .dept a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  font-family: "League Spartan", sans-serif;
  font-weight: 600;
  background: var(--color-light);
  border: 1px solid #e6e1d8;
  border-radius: var(--r);
  padding: 11px 16px;
  font-size: 15px;
  transition: var(--t);
}
.dept span b, .dept a b {
  color: var(--color-primary);
  line-height: 1;
}
.dept a:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.dept a:hover b {
  color: #fff;
}

.cities {
  color: var(--color-muted);
  font-size: 15px;
}

.zones-paris-link {
  margin-top: 24px;
}

.zones-map iframe {
  width: 100%;
  height: 340px;
  border: 0;
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.testi {
  background: var(--color-dark);
  color: #fff;
}
.testi h2 {
  color: #fff;
}
.testi .eyebrow {
  color: var(--color-primary-light);
}

.testi-track {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}

/* Les cartes s'etirent sur toute la hauteur de leur ligne (comportement par
   defaut de la grille) : c'est ce qui aligne un avis video avec l'avis en
   texte seul place a cote de lui. Le texte n'est pas etire pour autant — il
   reste un bloc compact, centre dans la place disponible (.quote-body). Une
   citation courte a cote d'un avis video garde ainsi ses interlignes
   normaux, au lieu de voir sa signature repoussee tout en bas de la carte. */
.quote {
  display: flex;
  flex-direction: column;
  background: #1b1b1b;
  border: 1px solid #2a2a2a;
  border-left: 3px solid var(--color-primary);
  border-radius: var(--r);
  padding: 30px;
}
/* Marges automatiques verticales : le bloc se centre dans l'espace restant,
   sous le lecteur video quand il y en a un, dans toute la carte sinon. */
.quote-body {
  margin: auto 0;
}
.quote .stars {
  color: var(--color-primary-light);
  letter-spacing: 3px;
  margin-bottom: 14px;
}
.quote p {
  color: #e7e4df;
  font-size: 16px;
  font-style: italic;
}
.quote .who {
  margin-top: 18px;
  font-family: "League Spartan", sans-serif;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.quote .who span {
  display: block;
  /* Gris propre a ce bloc, et non --color-muted : les avis sont sur fond
     sombre, ou le gris attenue — calibre pour les fonds clairs — tombe a
     3,4:1. Un meme jeton ne peut pas servir les deux contextes. */
  color: #949494;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-style: normal;
}

/* Temoignages video : le lecteur coiffe la carte d'avis. Ratio fixe pour que
   la grille ne saute pas pendant le chargement de la miniature, et pour que
   deux avis video cote a cote presentent exactement le meme format d'image
   quelles que soient les proportions de la miniature televersee. */
.testi-video {
  /* Marges negatives : le lecteur va de bord a bord malgre le padding de la
     carte. flex-shrink a 0 pour qu'il ne soit pas comprime quand la carte est
     etiree par un voisin plus haut — c'est la citation qui absorbe. */
  flex: none;
  margin: -30px -30px 22px;
  border-radius: var(--r) var(--r) 0 0;
  overflow: hidden;
  background: #000;
}
.testi-video video,
.testi-video-facade {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}

/* Facade YouTube / Vimeo : tant qu'on n'a pas clique, il n'y a ni iframe ni
   requete vers la plateforme (voir assets/js/main.js). */
.testi-video-facade {
  position: relative;
  padding: 0;
  border: 0;
  cursor: pointer;
}
.testi-video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.testi-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  /* Le triangle est optiquement decentre dans son carre : on le decale pour
     qu'il paraisse au milieu de la pastille. */
  padding-left: 4px;
  box-shadow: var(--shadow);
  transition: transform 0.2s, background 0.2s;
}
.testi-video-facade:hover .testi-video-play,
.testi-video-facade:focus-visible .testi-video-play {
  transform: translate(-50%, -50%) scale(1.08);
}
.testi-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* Texte reserve aux lecteurs d'ecran : retire du flux visuel sans etre masque
   pour les technologies d'assistance (display:none les exclurait aussi). */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 38px;
}

.member {
  display: block;
  text-align: center;
  text-decoration: none;
  color: inherit;
  border-radius: var(--r);
  padding: 10px;
  transition: background 0.2s;
}
.member img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 14px;
  border: 3px solid var(--color-light);
  box-shadow: var(--shadow);
}
.member h3 {
  font-size: 16px;
}
.member span {
  font-size: 13px;
  color: var(--color-primary);
  letter-spacing: 0.5px;
}
.member:hover {
  background: var(--color-light);
}
.member .linkedin {
  color: var(--color-primary);
  display: flex;
  justify-content: center;
  line-height: 0;
  margin-top: 8px;
  transition: color 0.2s;
}
.member .linkedin svg {
  width: 15px;
  height: 15px;
}
.member:hover .linkedin {
  color: var(--color-text);
}

.team-follow {
  text-align: center;
  margin-top: 36px;
}

.contact {
  background: var(--color-light);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: start;
  gap: 48px;
  margin-top: 36px;
}
/* Aucune information de contact renseignee : le formulaire est seul et
   occupe toute la largeur, borne pour rester lisible. */
.contact-grid.is-solo {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}

.contact-left {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.info-block .row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid #e3ddd4;
}
.info-block .row .ic {
  width: 22px;
  height: 22px;
  color: var(--color-primary);
  flex: none;
  margin-top: 3px;
}
.info-block .row b {
  font-family: "League Spartan", sans-serif;
  display: block;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.info-block .row a, .info-block .row span {
  color: var(--color-text);
}
/* Seuls les horaires sont dans un span (les autres valeurs sont des liens) :
   meme taille reduite que dans le footer pour rester sur une ligne. */
.info-block .row span {
  font-size: 14px;
}

.contact-map {
  height: 100%;
  min-height: 420px;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
  border-radius: var(--r);
}

form.devis {
  background: #fff;
  border-radius: var(--r);
  padding: 34px;
  box-shadow: var(--shadow);
}
form.devis h3 {
  font-size: 22px;
  margin-bottom: 6px;
}
form.devis .sub {
  color: var(--color-muted);
  font-size: 14px;
  margin-bottom: 22px;
}

.fgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.field.full {
  grid-column: 1/-1;
}

/* span.label : libelle d'un groupe de champs, qu'un <label> ne peut pas
   porter puisqu'il ne reference qu'un seul controle. Meme rendu. */
label,
span.label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
}
span.label {
  display: block;
}
label .req,
span.label .req {
  color: var(--color-primary);
}

input, select, textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border: 1.5px solid #e2ded6;
  border-radius: var(--r);
  background: #fbfaf8;
  transition: var(--t);
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: #fff;
}

textarea {
  resize: vertical;
  min-height: 96px;
}

.checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
}
.checks input {
  width: auto;
}

.consent {
  font-size: 12.5px;
  color: var(--color-muted);
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.5;
}
.consent span {
  flex: 1;
  min-width: 0;
}
.consent a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.consent input {
  width: auto;
  margin-top: 3px;
}

@keyframes av-banner-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.form-submit {
  margin-top: 18px;
}
.form-submit .btn {
  width: 100%;
  justify-content: center;
}

.real-cta {
  margin-top: 18px;
}

.honeypot {
  display: none;
}

.form-ok, .form-error {
  display: none;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 18px;
  font-size: 14.5px;
  animation: av-banner-in .3s ease;
}
.form-submit .form-ok {
  margin-bottom: 0;
}
.form-ok::before, .form-error::before {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.form-ok {
  background: #1d3a1d;
  color: #d8f0d8;
  border-left: 3px solid #5ab15a;
}
.form-ok::before {
  content: "✓";
  background: #5ab15a;
  color: #10240f;
}

.form-error {
  background: #3a1d1d;
  color: #f0d8d8;
  border-left: 3px solid #b15a5a;
}
.form-error::before {
  content: "!";
  background: #b15a5a;
  color: #2a0f0f;
}

.field-invalid {
  background: #fbeeee;
  border-radius: var(--r);
  padding: 10px;
  transition: background-color .2s ease;
}
.field-invalid input,
.field-invalid select,
.field-invalid textarea {
  border-color: #b15a5a;
  background: #fff;
}
.field-invalid input:focus,
.field-invalid select:focus,
.field-invalid textarea:focus {
  border-color: #b15a5a;
}

.field-error {
  display: block;
  color: #b15a5a;
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 6px;
  animation: av-banner-in .25s ease;
}
.checks .field-error {
  grid-column: 1/-1;
}

.form-note {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 14px;
  padding-left: 12px;
  border-left: 2px solid var(--color-primary);
  line-height: 1.5;
}

.field .hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-muted);
}

footer {
  background: var(--color-dark);
  color: #bcb8b1;
  padding: 64px 0 26px;
}
footer img.flogo {
  height: 40px;
  width: auto;
  display: block;
  margin-bottom: 18px;
}
footer h4 {
  color: #fff;
  font-size: 14px;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}
footer a {
  color: #bcb8b1;
  font-size: 14.5px;
  line-height: 2;
  transition: var(--t);
}
footer a:hover {
  color: var(--color-primary-light);
}

.foot-grid {
  display: grid;
  /* Navigation retrecie au profit de Contact : ses liens sont courts, alors
     que les horaires en toutes lettres ont besoin de ~300px pour tenir sur
     une seule ligne. */
  grid-template-columns: 1.4fr 0.75fr 1.25fr 1fr;
  gap: 36px;
}
/* Les horaires en toutes lettres (« Du mardi au samedi, de 11h00 à 19h00 »)
   sont plus longs que les autres lignes de contact : en 14px ils tiennent
   sur une seule ligne dans la colonne du footer. */
.foot-contact span {
  font-size: 14px;
}

.socials {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.socials a {
  width: 38px;
  height: 38px;
  border: 1px solid #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.socials a:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-light);
}
.socials svg {
  width: 18px;
  height: 18px;
}

.filiales {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}
/* Les filiales avec lien doivent s'aligner sur celles sans lien. */
.filiales a {
  font-size: inherit;
  line-height: 1.5;
}

.foot-bottom {
  border-top: 1px solid #2a2a2a;
  margin-top: 48px;
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 13px;
  /* Releve de #7c7870 : ne donnait que 4,30:1 sur le fond sombre du pied
     de page, sous le seuil AA de 4,5. */
  color: #847F76;
}
.foot-bottom a {
  font-size: 13px;
}

.lb {
  position: fixed;
  inset: 0;
  background: rgba(8, 8, 8, 0.94);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.lb.open {
  display: flex;
}
.lb img {
  max-width: 90vw;
  max-height: 84vh;
  border-radius: var(--r);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.lb .cap {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-family: "League Spartan", sans-serif;
  letter-spacing: 1px;
}
.lb .x, .lb .ar {
  position: absolute;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  cursor: pointer;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 22px;
  transition: var(--t);
}
.lb .x:hover, .lb .ar:hover {
  background: var(--color-primary);
}
.lb .x {
  top: 22px;
  right: 22px;
}
.lb .ar.prev {
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
}
.lb .ar.next {
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

@media (max-width: 1360px) {
  .menu {
    display: none;
  }
  .burger {
    display: flex;
  }
  .menu.show {
    display: flex;
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: #fff;
    padding: 18px 24px;
    gap: 16px;
    border-bottom: 1px solid #e7e1d8;
    box-shadow: 0 12px 24px rgba(17, 17, 17, 0.08);
  }
  .menu.show a {
    color: var(--color-text);
    font-size: 15px;
    letter-spacing: 0.4px;
  }
}
@media (max-width: 1280px) {
  .nav {
    gap: 16px;
  }
  .nav-cta {
    gap: 10px;
  }
  .tel {
    display: none;
  }
}
@media (max-width: 980px) {
  .about-grid, .zones-grid, .contact-grid, .ba-wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .services-grid, .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .testi-track {
    grid-template-columns: 1fr;
  }
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
  .about-img .badge {
    left: 16px;
    bottom: 16px;
  }
}
@media (max-width: 760px) {
  .section {
    padding: 64px 0;
  }
  .brand-row {
    gap: 24px 32px;
  }
  .brand-row img {
    height: 32px;
    max-width: 120px;
  }
  .fgrid, .checks {
    grid-template-columns: 1fr;
  }
  .gallery {
    grid-template-columns: 1fr;
  }
  .stats {
    grid-template-columns: 1fr;
  }
  .foot-grid {
    grid-template-columns: 1fr;
  }
  .hero {
    min-height: 82vh;
  }
}
@media (max-width: 480px) {
  header .wrap {
    padding: 0 16px;
  }
  .nav {
    height: 62px;
    gap: 8px;
  }
  .brand img {
    height: 28px;
  }
  .nav-cta {
    gap: 6px;
  }
  .nav-cta .btn {
    padding: 9px 13px 7px;
    font-size: 11px;
    letter-spacing: 0.8px;
  }
  .nav-devis .lbl-full {
    display: none;
  }
  .nav-devis .lbl-short {
    display: inline;
  }
  .burger {
    padding: 8px 4px;
  }
  .menu.show {
    top: 62px;
  }
}
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
  .eyebrow {
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 12px;
  }
  .section h2 {
    font-size: 20px;
  }
  .lead {
    font-size: 16px;
  }
  .hero h1 {
    font-size: 26px;
    margin-bottom: 18px;
  }
  .hero p {
    font-size: 16px;
    margin-bottom: 28px;
  }
  .hero-tags span {
    font-size: 11.5px;
  }
  .svc h3 {
    font-size: 16px;
  }
  .svc p {
    font-size: 14px;
  }
  .about-img .badge b, .stat b {
    font-size: 30px;
  }
  .dept span, .cities {
    font-size: 14px;
  }
  .quote p {
    font-size: 15px;
  }
  .member h3 {
    font-size: 15px;
  }
  form.devis h3 {
    font-size: 20px;
  }
  footer a, .filiales {
    font-size: 14px;
  }
  .trust .wrap {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 12px;
  }
  .trust div {
    align-items: flex-start;
  }
  .trust .txt {
    text-align: left;
  }
}
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 8, 8, 0.6);
  backdrop-filter: blur(3px);
}
.modal.open {
  display: flex;
}

.modal-card {
  background: #fff;
  border-radius: var(--r);
  max-width: 680px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: 40px 44px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  position: relative;
  animation: modalin 0.25s ease;
}
.modal-card h3 {
  font-size: 26px;
  margin-bottom: 6px;
}
.modal-card .modal-sub {
  color: var(--color-muted);
  font-size: 13px;
  margin-bottom: 22px;
}

@keyframes modalin {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.modal-body {
  color: var(--color-text);
  font-size: 14.5px;
  line-height: 1.65;
}
.modal-body h4 {
  font-family: "League Spartan", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  color: var(--color-dark);
  margin: 20px 0 7px;
}
.modal-body p {
  margin-bottom: 10px;
}
.modal-body a {
  color: var(--color-primary);
  font-weight: 600;
}
.modal-body .todo {
  color: #a07b3e;
  background: #f7f1e6;
  border-radius: 4px;
  padding: 0 5px;
}

.modal-x {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--color-light);
  color: var(--color-dark);
  font-size: 18px;
  cursor: pointer;
  transition: var(--t);
}
.modal-x:hover {
  background: var(--color-primary);
  color: #fff;
}

@media (max-width: 600px) {
  .modal-card {
    padding: 32px 22px;
  }
}
.cookie-banner {
  position: fixed;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 200;
  max-width: 560px;
  margin: 0 auto;
  background: var(--color-dark);
  color: #fff;
  border-radius: var(--r);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  padding: 22px 24px;
  transform: translateY(140%);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.cookie-banner.show {
  transform: translateY(0);
}
.cookie-banner h4 {
  font-family: "League Spartan", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 15px;
  color: #fff;
  margin-bottom: 8px;
}
.cookie-banner p {
  font-size: 13.5px;
  line-height: 1.6;
  color: #d8d4cd;
  margin-bottom: 16px;
}
.cookie-banner p a {
  color: var(--color-primary-light);
  font-weight: 600;
  text-decoration: underline;
}

.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cookie-actions .btn {
  padding: 12px 20px 10px;
  font-size: 13px;
}
.cookie-actions .btn.refuse {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.cookie-actions .btn.refuse:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.45);
  transform: none;
}

/* BLOG */
.blog-hero {
  padding-bottom: 0;
}

.blog-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 56px;
  align-items: start;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
/* Sur l'accueil la grille n'a pas de colonne laterale a cote d'elle : les
   trois derniers articles tiennent donc de front. */
.blog-grid.is-home {
  grid-template-columns: repeat(3, 1fr);
}

.articles-more {
  margin-top: 36px;
  display: flex;
  justify-content: center;
}

/* La vitrine du blog est posee sur une bande teintee : les cartes, blanches
   et ombrees, s'en detachent nettement, la ou elles flottaient sur le blanc
   de la page. Le fond est pris dans la palette du site (customizer), et non
   fixe en dur : chaque sous-site du reseau garde donc la sienne.

   La section qui suit dans l'ordre par defaut, les zones d'intervention,
   passe en blanc pour que les deux bandes ne se collent pas (voir la regle
   sur #zones). */
.section.articles {
  background: var(--color-light);
}

.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: sticky;
  top: 100px;
}
.widget {
  background: var(--color-light);
  border-radius: var(--r);
  padding: 28px;
}
.widget h4 {
  font-size: 15px;
  margin-bottom: 18px;
}
.widget ul {
  list-style: none;
}
.widget li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #e7e1d8;
  font-size: 14.5px;
}
.widget li:last-child {
  border-bottom: none;
}
.widget li a:hover {
  color: var(--color-primary);
}
.widget .count {
  color: var(--color-muted);
  font-size: 12.5px;
}

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(17, 17, 17, 0.08);
  transition: var(--t);
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.post-card-media {
  display: block;
  aspect-ratio: 16/10;
  background: var(--color-light);
  overflow: hidden;
}
.post-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-card-body {
  padding: 24px;
}
.post-card-body .eyebrow {
  margin-bottom: 8px;
}
.post-card-body h3 {
  font-size: 19px;
  text-transform: none;
  margin-bottom: 8px;
}
.post-card-body h3 a:hover {
  color: var(--color-primary);
}
.post-card-body .post-meta {
  color: var(--color-muted);
  font-size: 13px;
  margin-bottom: 10px;
}
.post-card-body p:not(.post-meta) {
  font-size: 15px;
  margin-bottom: 18px;
}
.post-card-body .btn {
  padding: 11px 20px 9px;
  font-size: 13px;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 56px;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--r);
  border: 1.5px solid #e7e1d8;
  font-family: "League Spartan", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
  transition: var(--t);
}
.pagination .page-numbers:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.pagination .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.pagination .page-numbers.dots {
  border-color: transparent;
}

/* ARTICLE */
.single-post .blog-sidebar {
  margin-top: 56px;
}
.post-header {
  padding-bottom: 40px;
}
.post-header h1 {
  font-size: clamp(28px, 4vw, 44px);
  margin-bottom: 14px;
}
.post-header .post-meta {
  color: var(--color-muted);
  font-size: 14px;
}
.post-thumb img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.article-body {
  padding: 56px 0 8px;
  font-size: 17px;
}
.article-body h2, .article-body h3, .article-body h4 {
  text-transform: none;
  letter-spacing: normal;
  margin: 40px 0 16px;
}
/* Les intertitres de niveau 3 sont decales : ils marquent une subdivision
   d'une partie (h2) et le retrait rend cette hierarchie lisible d'un coup
   d'oeil, comme dans la notice PDF de redaction. */
.article-body h3 {
  margin-left: 20px;
}
.article-body p {
  margin-bottom: 20px;
}
.article-body ul, .article-body ol {
  margin: 0 0 20px 22px;
}
.article-body li {
  margin-bottom: 8px;
}
.article-body img {
  border-radius: var(--r);
  margin: 8px 0 20px;
}
.article-body a {
  color: var(--color-primary);
  text-decoration: underline;
}
.article-body blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 4px 0 4px 22px;
  margin: 0 0 20px;
  color: var(--color-muted);
  font-style: italic;
}
.back-link {
  padding-bottom: 56px;
}

/* PAGE ARRONDISSEMENT */
.arr-body {
  max-width: 780px;
  margin: 0 auto;
}
.arr-cta {
  max-width: 780px;
  margin: 0 auto 72px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--color-light);
  border-radius: var(--r);
  padding: 32px;
}
.arr-cta h3 {
  font-size: 20px;
  text-transform: none;
  margin-bottom: 6px;
}
.arr-cta p {
  color: var(--color-muted);
  font-size: 15px;
}
.arr-cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* HUB & MAILLAGE INTERNE (arrondissements x prestations) */
.hub-grid-wrap {
  max-width: 780px;
  margin: 0 auto 72px;
}
.hub-grid-wrap h2, .crosslink-group h4 {
  font-size: 18px;
  text-transform: none;
  margin-bottom: 16px;
}
.hub-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hub-pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 30px;
  border: 1.5px solid #e7e1d8;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
  transition: var(--t);
}
.hub-pill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-light);
}
.arr-crosslinks {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-bottom: 64px;
}

/* PAGE VILLE : prestations detaillees (integrees, pas de pages separees) */
.satellite-services {
  max-width: 780px;
  margin: 0 auto 72px;
}
.satellite-services h2 {
  font-size: 18px;
  text-transform: none;
  margin-bottom: 24px;
}
.satellite-service-block {
  scroll-margin-top: 100px;
  padding: 24px 0;
  border-top: 1px solid #e7e1d8;
}
.satellite-service-block:first-of-type {
  border-top: none;
  padding-top: 0;
}
.satellite-service-block h3 {
  font-size: 16px;
  text-transform: none;
  margin-bottom: 8px;
}
.satellite-service-block p {
  color: var(--color-muted);
  margin-bottom: 12px;
}
.satellite-service-block ul {
  padding-left: 20px;
  color: var(--color-muted);
}
.satellite-service-block li {
  margin-bottom: 4px;
}

/* QUESTIONS FREQUENTES (pages hub prestation) */
.faq-list {
  max-width: 780px;
  margin: 0 auto 72px;
}
.faq-list h2 {
  font-size: 18px;
  text-transform: none;
  margin-bottom: 24px;
}
.faq-item {
  border-top: 1px solid #e7e1d8;
  padding: 18px 0;
}
.faq-item:first-of-type {
  border-top: none;
  padding-top: 0;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
/* Le chevron est purement decoratif : il est genere en CSS pour ne pas
   figurer dans le texte lu par un lecteur d'ecran ni dans le contenu
   indexe. */
.faq-item summary::after {
  content: '+';
  color: var(--color-primary);
  font-size: 20px;
  line-height: 1;
  flex: none;
  transition: var(--t);
}
.faq-item[open] summary::after {
  content: '–';
}
.faq-answer {
  color: var(--color-muted);
  margin-top: 12px;
}
.faq-answer p {
  margin-bottom: 10px;
}
.faq-answer p:last-child {
  margin-bottom: 0;
}

/* PAGE PARIS (index arrondissements) */
.paris-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 64px;
}
.paris-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: var(--r);
  padding: 16px 18px;
  transition: var(--t);
}
.paris-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  border-color: transparent;
}
.paris-card-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-light);
  color: var(--color-primary);
  font-family: "League Spartan", sans-serif;
  font-weight: 700;
  font-size: 13px;
}
.paris-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.paris-card-body b {
  font-size: 14.5px;
  color: var(--color-dark);
}
.paris-card-body span {
  font-size: 12.5px;
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .blog-layout {
    grid-template-columns: 1fr;
  }
  .blog-grid.is-home {
    grid-template-columns: repeat(2, 1fr);
  }
  .blog-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .blog-sidebar .widget {
    flex: 1 1 260px;
  }
  .paris-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .blog-grid,
  .blog-grid.is-home {
    grid-template-columns: 1fr;
  }
  .blog-sidebar {
    flex-direction: column;
  }
  .paris-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .cookie-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Renvoi des pages satellites vers les pages hub de prestation : une liste
   de liens la ou vivait le detail des neuf prestations, duplique a
   l'identique sur une cinquantaine de pages. */
.satellite-services-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}
.satellite-services-liens a {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--color-primary-light);
  border-radius: var(--r);
  font-size: 15px;
  transition: var(--t);
}
.satellite-services-liens a:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}