/*
Theme Name: Kadence Child - Adrien Carlier
Theme URI: https://www.adrien-carlier-architecte.fr
Description: Theme enfant Kadence — charte luxe blanc/noir/or (Futura LT self-hostee), animations reveal + view transitions, base structurelle du site Wix d'origine. 100% editable via l'editeur de blocs.
Author: HB Digitals
Template: kadence
Version: 3.74.1
Text Domain: kadence-child-adrien
*/

/* =====================================================
   Futura LT — self-hostee (fichiers woff2 du site Wix
   d'origine, static.parastorage.com). 2 graisses :
   Light (300, latin + latin-ext) et Book (400).
   Book couvre 400-600 (plage) pour eviter le faux-gras
   synthetique sur les boutons/labels en 500/600.
   ===================================================== */
@font-face {
  font-family: "Futura LT";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/futura-lt-w01-light.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0110, U+0131, U+0152-0153, U+0160-0161, U+0178, U+017D-017E, U+0192, U+0237, U+02C6-02C7, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122;
}
@font-face {
  font-family: "Futura LT";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/futura-lt-w05-light.woff2") format("woff2");
  unicode-range: U+0100-010F, U+0111-012B, U+012E-0130, U+0132-0137, U+0139-0149, U+014C-0151, U+0154-015F, U+0162-0177, U+0179-017C, U+0218-021B, U+02C9, U+02D8-02D9, U+02DB, U+02DD, U+0394, U+03A9, U+03BC, U+03C0, U+1E9E, U+20B9-20BA, U+20BC-20BD, U+2113, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+F8FF, U+FB01-FB02;
}
@font-face {
  font-family: "Futura LT";
  font-style: normal;
  /* ⚠️ La Futura LT du Wix n'existe QU'EN Light (300) et Book (400) : il n'y a
     aucun fichier gras. Tant qu'une PLAGE est declaree ici, le navigateur
     clampe tout poids demande dans la plage et ne synthetise JAMAIS de gras
     (verifie au CDP : un <strong> a 700 rend exactement la meme largeur qu'a
     400). Passer a un poids unique declencherait bien la synthese, mais rendrait
     gras d'un coup tous les 500/600 du site (24 libelles, 3 h2, badges...).
     Le gras est donc obtenu la ou il est voulu via -webkit-text-stroke
     (voir « Gras des articles » en fin de fichier). NE PAS reduire cette plage. */
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/futura-lt-w01-book.woff2") format("woff2");
}

/* =====================================================
   Design tokens — Luxe blanc / noir / or
   ===================================================== */
:root {
  --gold: #D9B421;
  --gold-dark: #B5951A;
  --gold-soft: #F9F4D9;
  --ink: #0A0A0A;
  --ink-soft: #161616;
  --bg: #FFFFFF;
  --bg-alt: #F0F0F0;
  --muted: #6B6B6B;
  --border: #E4E4E4;

  --font-sans: "Futura LT", "Futura", "Century Gothic", "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* La vraie Futura LT du Wix, self-hostee : titres en Light (300) */
  --font-display: "Futura LT", "Futura", "Century Gothic", "Jost", sans-serif;

  --content-width: 1140px;

  --ease-lux: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-card: 0 18px 40px rgba(10, 10, 10, 0.08);
}

/* =====================================================
   Base
   Kadence imprime son CSS global APRES cette feuille :
   on force nos variables et on monte la specificite
   (html body / body h1) pour gagner la cascade.
   ===================================================== */
html:root {
  --global-body-font-family: var(--font-sans);
  --global-heading-font-family: var(--font-display);
}

html body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.7;
}

body h1, body h2, body h3, body h4, .font-display {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 1.25;
}

body h3, body h4 {
  font-weight: 400;
}

body h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
body h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
body h3 { font-size: 1.35rem; }

h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--gold);
}

a {
  transition: color 0.25s ease;
}

/* Liens dans les textes courants : discrets, pas de soulignement */
body .lux-section p a:not(.wp-block-button__link),
body .lux-section li a:not(.wp-block-button__link) {
  text-decoration: none;
  color: inherit;
  box-shadow: none;
}

body .lux-section p a:not(.wp-block-button__link):hover,
body .lux-section li a:not(.wp-block-button__link):hover {
  color: var(--gold-dark);
}

/* Lightbox native WP : pas de zoom sur les logos partenaires
   ni sur les tuiles projets (elles menent a la fiche) */
.partners-row .lightbox-trigger,
.proj-tile .lightbox-trigger {
  display: none !important;
}

/* Bouton loupe de la lightbox : discret, dore au survol */
.lightbox-trigger {
  background: rgba(10, 10, 10, 0.55) !important;
  border-radius: 10px;
}

::selection {
  background: var(--gold);
  color: var(--ink);
}

/* =====================================================
   Utilitaires de charte
   ===================================================== */
.overline {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gold-dark);
}

.overline::before {
  content: "";
  display: inline-block;
  width: 2.5rem;
  height: 1px;
  background: var(--gold);
  vertical-align: middle;
  margin-right: 0.85rem;
}

.lead {
  font-size: 1.15rem;
  line-height: 1.85;
  color: var(--muted);
}

.gold-rule {
  width: 64px;
  height: 1px;
  background: var(--gold);
  border: none;
  margin: 1.5rem 0;
}

.text-center { text-align: center; }
.text-center .overline::before { display: none; }
.text-center .overline::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--gold);
  margin: 0.85rem auto 0;
}

/* =====================================================
   Sections
   ===================================================== */

/* Centrage du contenu : les sections sont pleine largeur,
   leurs enfants directs sont contraints et centres
   (independant du moteur de layout WP/Kadence). */
.page-header-lux > *,
.lux-section > *,
.lux-section-alt > *,
.band-dark > * {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

.lux-section {
  padding: 5.5rem 1.5rem;
}

.lux-section-alt {
  background: var(--bg-alt);
  padding: 5.5rem 1.5rem;
}

/* Section cabinet : ivoire (option 1) */
.lux-section-stone {
  background: var(--bg);
}

/* Pas d interstice entre les sections pleine largeur
   (le block-gap WP laissait une barre blanche entre hero et cabinet) */
.entry-content > .alignfull,
.entry-content > .wp-block-cover.alignfull,
.entry-content > .wp-block-group.alignfull {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Kadence ecrase les gouttieres des .alignfull (padding-left/right: 0) :
   on retablit les 1.5rem lateraux sur nos sections pleine largeur.
   (.reviews-band exclu : full-bleed voulu) */
body .entry-content .alignfull:where(.lux-section, .lux-section-alt, .band-dark, .page-header-lux, .projx-nav, .partners-band) {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.band-dark {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.82);
  padding: 5.5rem 1.5rem;
}

body .band-dark h1, body .band-dark h2, body .band-dark h3, body .band-dark h4 {
  color: #fff;
}

.band-dark .overline { color: var(--gold); }
.band-dark a:not(.wp-block-button__link) { color: var(--gold); }
.band-dark .lead { color: rgba(255, 255, 255, 0.65); }

/* Hero — cover video, textes a gauche, filtre degrade noir->transparent */
.lux-hero.wp-block-cover {
  min-height: 82vh;
  min-height: 82svh; /* barres UI mobiles : svh evite le saut de hauteur */
  padding: 6rem 1.5rem;
  text-align: left;
}

.lux-hero .wp-block-cover__background {
  background: linear-gradient(100deg,
    rgba(10, 10, 10, 0.92) 0%,
    rgba(10, 10, 10, 0.62) 45%,
    rgba(10, 10, 10, 0.15) 100%) !important;
  opacity: 1 !important;
}

.lux-hero .wp-block-cover__video-background,
.lux-hero .wp-block-cover__image-background {
  filter: grayscale(0.35) contrast(1.05) brightness(0.85);
}

/* Diaporama hero : la 1re image est le fond du cover (LCP, dans le markup),
   les suivantes sont injectees par js/hero-slideshow.js avec la meme classe
   .wp-block-cover__image-background (positionnement WP) et fondues par-dessus. */
.lux-hero .lux-hero-slide {
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}

.lux-hero .lux-hero-slide.is-active {
  opacity: 1;
}

.lux-hero .wp-block-cover__inner-container {
  max-width: var(--content-width);
  margin: 0 auto;
  width: 100%;
}

.lux-hero .overline {
  color: var(--gold);
}

body .lux-hero-title {
  color: #fff;
  font-size: clamp(1.9rem, 5vw + 0.9rem, 3.9rem);
  line-height: 1.12;
  max-width: 38rem;
  margin: 1.25rem 0 0;
}

.lux-hero .lead {
  color: rgba(255, 255, 255, 0.78);
  max-width: 34rem;
  margin: 1.5rem 0 2.25rem;
}

.lux-hero .wp-block-buttons { justify-content: flex-start; }

/* Mobile : le degrade lateral laisse le texte illisible sur la moitie droite,
   on passe a un degrade vertical plus couvrant */
@media (max-width: 781px) {
  .lux-hero .wp-block-cover__background {
    background: linear-gradient(180deg,
      rgba(10, 10, 10, 0.85) 0%,
      rgba(10, 10, 10, 0.55) 100%) !important;
  }
}

/* En-tête de page interne */
.page-header-lux {
  padding: 5.5rem 1.5rem 4rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.page-header-lux h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  margin-top: 0.75rem;
}

.page-header-lux .overline::before { display: none; }
.page-header-lux .overline::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--gold);
  margin: 0.85rem auto 0;
}

/* =====================================================
   Grilles
   ===================================================== */
/* WP enrobe les groupes dans .wp-block-group__inner-container :
   la grille s'applique au conteneur interne quand il existe. */
.lux-grid-3 { --grid-cols: 3; }
.lux-grid-4 { --grid-cols: 4; }
.lux-grid-5 { --grid-cols: 5; }

.lux-grid-3 > .wp-block-group__inner-container,
.lux-grid-4 > .wp-block-group__inner-container,
.lux-grid-5 > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 3), minmax(0, 1fr));
  gap: 1.75rem;
  align-items: stretch;
}

.lux-grid-3:not(:has(> .wp-block-group__inner-container)),
.lux-grid-4:not(:has(> .wp-block-group__inner-container)),
.lux-grid-5:not(:has(> .wp-block-group__inner-container)) {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 3), minmax(0, 1fr));
  gap: 1.75rem;
  align-items: stretch;
}

@media (max-width: 960px) {
  .lux-grid-3 { --grid-cols: 2; }
  .lux-grid-4 { --grid-cols: 2; }
  .lux-grid-5 { --grid-cols: 3; }
}

@media (max-width: 620px) {
  .lux-grid-3 { --grid-cols: 1; }
  /* Stats (4 chiffres) : 2x2 plutot qu'une colonne interminable */
  .lux-grid-4 { --grid-cols: 2; }
  .lux-grid-5 { --grid-cols: 1; }
  .stats-band .lux-grid-4,
  .stats-band .lux-grid-4 > .wp-block-group__inner-container {
    gap: 1.5rem 1rem;
  }
}

/* =====================================================
   Cartes
   ===================================================== */
.is-style-card-lux {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 2.75rem 2.25rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(10, 10, 10, 0.04);
  transition: transform 0.5s var(--ease-lux), box-shadow 0.5s var(--ease-lux), border-color 0.4s ease;
}

/* Voile dore diffus qui se revele au survol */
.is-style-card-lux::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(217, 180, 33, 0.10) 0%, transparent 45%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

@media (hover: hover) {
.is-style-card-lux:hover {
  transform: translateY(-8px);
  border-color: rgba(217, 180, 33, 0.55);
  box-shadow: 0 30px 60px rgba(10, 10, 10, 0.12);
}

.is-style-card-lux:hover::before {
  opacity: 1;
}
}

.is-style-card-lux h3 {
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
}

.card-num {
  font-family: var(--font-sans);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--gold);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
}

.card-price {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink);
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: 1.25rem;
}

.card-price small {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--muted);
  display: block;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* =====================================================
   Carte image moderne + badge flottant
   ===================================================== */
.img-card {
  position: relative;
  transition: transform 0.5s var(--ease-lux);
}

.img-card:hover {
  transform: translateY(-4px);
}

.img-card figure {
  margin: 0;
}

.img-card img {
  display: block;
  width: 100%;
  border-radius: 22px;
  box-shadow: 0 28px 60px rgba(10, 10, 10, 0.18);
}

.float-badge {
  position: absolute;
  bottom: -1.4rem;
  left: -1.6rem;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 0.9rem;
  align-items: center;
  background: rgba(250, 248, 243, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1rem 1.5rem;
  box-shadow: 0 18px 44px rgba(10, 10, 10, 0.16);
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.3;
  margin: 0;
  animation: badge-float 4.5s ease-in-out infinite;
}

/* Icone medaille doree (SVG inline, aucun fichier a charger) */
.float-badge::before {
  content: "";
  grid-row: 1 / 3;
  width: 36px;
  height: 36px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B421' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M8.5 13.5 7 21l5-2.5L17 21l-1.5-7.5'/%3E%3Cpath d='M12 6.5l.9 1.8 2 .3-1.45 1.4.35 2-1.8-.95-1.8.95.35-2L9.1 8.6l2-.3z' fill='%23D9B421' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

.float-badge strong {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.9rem;
  color: var(--gold-dark);
  line-height: 1;
}

@keyframes badge-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@media (prefers-reduced-motion: reduce) {
  .float-badge { animation: none; }
}

@media (max-width: 1024px) {
  .float-badge {
    left: 1rem;
    bottom: -1rem;
  }
}

/* Kadence (content.min.css, imprime APRES la feuille enfant) pose
   `.single-content .wp-block-buttons { margin-top: 0 }` = 2 classes.
   Il faut donc AU MOINS 2 classes + 1 element pour gagner : `.intro-buttons`
   seul (1 classe) et `body .intro-buttons` (1 classe + 1 element) perdent tous
   les deux. Sans ca la marge est morte et les boutons CTA de l'accueil se
   collent aux pastilles .cab-valeurs (ecart mesure : 0px). */
body .intro-buttons.wp-block-buttons {
  margin-top: 2rem;
}

/* =====================================================
   Bandeau logos partenaires / certifications
   ===================================================== */
.partners-band {
  padding: 2.75rem 1.5rem 3.25rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.partners-band > * {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

.partners-band .overline {
  margin-bottom: 2rem;
}

.partners-row { --p-gap: 3.5rem; }

.partners-row > .wp-block-group__inner-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--p-gap);
}

.partners-row:not(:has(> .wp-block-group__inner-container)) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--p-gap);
}

.partners-row figure {
  margin: 0;
}

.partners-row img {
  height: 54px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s var(--ease-lux);
}

.partners-row figure:hover img {
  filter: none;
  opacity: 1;
  transform: translateY(-3px);
}

@media (max-width: 620px) {
  .partners-row { --p-gap: 2rem; }
  .partners-row img { height: 40px; }
}

.credentials-list {
  margin-top: 1.5rem;
  padding-left: 0;
  list-style: none;
}

.credentials-list li {
  padding: 0.45rem 0 0.45rem 1.6rem;
  position: relative;
  color: var(--ink-soft);
}

.credentials-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 1rem;
  height: 1px;
  background: var(--gold);
}

/* =====================================================
   Blog — archive et articles
   ===================================================== */

/* Bandeau titre de l'archive : meme langage que les page-headers */
.blog .entry-hero.post-archive-hero-section {
  background: transparent;
  padding: 4.5rem 1.5rem 3rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.blog .entry-hero .hero-section-overlay { display: none; }

body .blog .page-title.archive-title,
body h1.page-title.archive-title {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 300;
  color: var(--ink);
}

body h1.page-title.archive-title::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--gold);
  margin: 1rem auto 0;
}

/* Grille d'articles */
.blog .content-wrap.grid-cols {
  gap: 1.75rem;
  padding-top: 3.5rem;
  padding-bottom: 4.5rem;
}

/* Carte article */
.loop-entry.entry {
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px rgba(10, 10, 10, 0.04);
  transition: transform 0.45s var(--ease-lux), box-shadow 0.45s var(--ease-lux), border-color 0.4s ease;
}

@media (hover: hover) {
.loop-entry.entry:hover {
  transform: translateY(-6px);
  border-color: rgba(217, 180, 33, 0.5);
  box-shadow: 0 26px 54px rgba(10, 10, 10, 0.12);
}
}

.loop-entry .post-thumbnail {
  overflow: hidden;
}

.loop-entry .post-thumbnail img {
  transition: transform 0.8s var(--ease-lux);
}

.loop-entry.entry:hover .post-thumbnail img {
  transform: scale(1.05);
}

.loop-entry .entry-content-wrap {
  padding: 1.5rem 1.6rem 1.6rem;
}

body .loop-entry .entry-title {
  font-size: 1.18rem;
  line-height: 1.35;
  font-weight: 400;
}

.loop-entry .entry-title a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.25s ease;
}

.loop-entry .entry-title a:hover {
  color: var(--gold-dark);
}

.loop-entry .entry-meta {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-dark);
  margin-bottom: 0.5rem;
}

.loop-entry .entry-meta a { color: var(--gold-dark); text-decoration: none; }

.loop-entry .entry-summary {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--muted);
}

.loop-entry .entry-footer {
  border-top: 1px solid var(--border);
  padding-top: 0.9rem;
  margin-top: 1rem;
}

.loop-entry .entry-footer a,
.loop-entry .post-more-link {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-dark);
  text-decoration: none;
}

.loop-entry .entry-footer a::after,
.loop-entry .post-more-link::after {
  content: " \2192";
  transition: margin-left 0.3s var(--ease-lux);
}

.loop-entry .entry-footer a:hover::after {
  margin-left: 0.35rem;
}

/* Stats articles : oeil (vues) + coeur (j'aime) */
.ac-stats {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.single-post .entry-content .ac-stats {
  border-top: 1px solid var(--border);
  padding-top: 1.1rem;
  margin-top: 2rem;
}

.ac-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.ac-stat svg {
  width: 17px;
  height: 17px;
  color: var(--gold-dark);
  flex-shrink: 0;
}

.ac-like-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--muted);
  transition: color 0.25s ease;
}

.ac-like-btn:hover {
  color: var(--ink);
}

.ac-like-btn:hover svg {
  color: #D0433B;
}

.ac-like-btn.is-liked svg {
  color: #D0433B;
}

.ac-like-btn.is-liked .ac-heart-path {
  fill: #D0433B;
}

@keyframes ac-heart-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

.ac-like-btn.is-pop svg {
  animation: ac-heart-pop 0.45s var(--ease-lux);
}

/* Article seul : confort de lecture */
.single-post .entry-content {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.02rem;
  line-height: 1.85;
}

.single-post .entry-content h2 {
  margin-top: 2.25rem;
  padding-top: 0.5rem;
}

.single-post .entry-hero .hero-section-overlay { display: none; }

/* =====================================================
   Avis Google — carrousel infini
   ===================================================== */
.reviews-band {
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}

/* Badge note globale style Google */
.g-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.4rem auto 0 !important;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.6rem 1.4rem 0.6rem 1.1rem;
  box-shadow: 0 8px 24px rgba(10, 10, 10, 0.06);
}

.g-badge::before {
  content: "";
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.g-badge strong {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}

.g-badge-stars {
  color: #FBBC04;
  letter-spacing: 2px;
  font-size: 1rem;
}

.g-badge-label {
  font-size: 0.82rem;
  color: var(--muted);
}

/* Carrousel pleine largeur d'ecran : on leve la contrainte de largeur
   de la section, seul l'en-tete reste centre */
.reviews-band > * {
  max-width: none !important;
}

.reviews-band .text-center {
  max-width: var(--content-width);
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 1.5rem;
}

/* Piste défilante */
.rev-viewport {
  margin-top: 2.75rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.rev-viewport > *,
.rev-track {
  max-width: none !important;
}

.rev-track > .wp-block-group__inner-container,
.rev-track:not(:has(> .wp-block-group__inner-container)) {
  display: flex;
  width: max-content;
  animation: rev-scroll 55s linear infinite;
}

.rev-viewport:hover .rev-track > .wp-block-group__inner-container,
.rev-viewport:hover .rev-track:not(:has(> .wp-block-group__inner-container)) {
  animation-play-state: paused;
}

@keyframes rev-scroll {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .rev-track > .wp-block-group__inner-container,
  .rev-track:not(:has(> .wp-block-group__inner-container)) {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Carte avis, look fiche Google */
.rev-card {
  position: relative;
  width: min(370px, calc(100vw - 3.5rem));
  flex-shrink: 0;
  margin: 0 0.75rem !important;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.35rem 1.45rem 1.5rem;
  box-shadow: 0 10px 26px rgba(10, 10, 10, 0.05);
}

/* Logo G en haut a droite de chaque carte */
.rev-card::after {
  content: "";
  position: absolute;
  top: 1.3rem;
  right: 1.35rem;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Depuis le passage au markup moderne, WP n'emballe plus les groupes dans
   .wp-block-group__inner-container : la grille doit etre portee par .rev-card
   elle-meme, sinon la carte reste en display:block et l'avatar se retrouve
   au-dessus du nom au lieu d'etre a sa gauche.
   /!\ Ne pas remettre de margin ici : .rev-card porte le margin lateral qui
   espace les cartes de la piste. */
.rev-card,
.rev-card > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "av name"
    "stars stars"
    "text text";
  column-gap: 0.8rem;
}

.rev-card > .wp-block-group__inner-container {
  margin: 0 !important;
}

.rev-avatar {
  grid-area: av;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #4285F4;
  color: #fff;
  font-weight: 500;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}

.rev-card:nth-child(5n+2) .rev-avatar { background: #EA4335; }
.rev-card:nth-child(5n+3) .rev-avatar { background: #34A853; }
.rev-card:nth-child(5n+4) .rev-avatar { background: #9C27B0; }
.rev-card:nth-child(5n) .rev-avatar { background: #F29900; }

.rev-name {
  grid-area: name;
  margin: 0 !important;
  line-height: 1.3;
  align-self: center;
  padding-right: 2rem;
}

.rev-name strong {
  font-weight: 500;
  color: var(--ink);
  font-size: 0.95rem;
}

.rev-name span {
  font-size: 0.78rem;
  color: var(--muted);
}

.rev-stars {
  grid-area: stars;
  margin: 0.75rem 0 0 !important;
  color: #FBBC04;
  letter-spacing: 3px;
  font-size: 1rem;
  line-height: 1;
}

.rev-text {
  grid-area: text;
  margin: 0.6rem 0 0 !important;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-soft);
  /* Les vrais avis Google vont de 126 a 603 caracteres. La piste est en flex,
     donc toutes les cartes s'alignent sur la plus haute : sans plafond, un seul
     avis long triple la hauteur de tout le carrousel. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  overflow: hidden;
}

/* Le lien vers la fiche Google, dans le bandeau de note */
.g-badge-label a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.g-badge-label a:hover {
  color: var(--gold);
}

/* =====================================================
   Page contact — formulaire + carte Google
   ===================================================== */
.cta-form-band .cta-form-cols {
  margin-top: 2.75rem;
  text-align: left;
}

.cta-form-band .contact-info-card {
  background: linear-gradient(165deg, #1A1712 0%, #0B0A09 60%);
  border-color: rgba(217, 180, 33, 0.3);
  margin-top: 4.5rem !important;
}

.cta-form-band .contact-info-card .contact-line {
  color: rgba(255, 255, 255, 0.72);
}

.cta-form-band .contact-info-card .contact-line strong {
  color: #fff;
}

.cta-form-band .contact-info-card .contact-line a {
  color: #fff;
}

.cta-form-band .contact-info-card .contact-line a:hover {
  color: var(--gold);
}

/* Formulaire version noire luxe (meme matiere que les cartes prestations) */
.form-card.form-card--dark {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #1A1712 0%, #0B0A09 60%);
  border: 1px solid rgba(217, 180, 33, 0.3);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  transition: border-color 0.4s ease, box-shadow 0.5s var(--ease-lux);
}

/* Reflet lumineux qui balaye la carte au survol, comme les prestations */
.form-card.form-card--dark::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -80%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  transform: skewX(-16deg);
  transition: left 1s var(--ease-lux);
  pointer-events: none;
}

@media (hover: hover) {
.form-card.form-card--dark:hover::after { left: 140%; }

.form-card.form-card--dark:hover {
  border-color: rgba(217, 180, 33, 0.7);
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.5), 0 0 46px rgba(217, 180, 33, 0.1);
}
}

body .form-card.form-card--dark .form-card-title {
  color: #fff;
}

.form-card.form-card--dark .form-card-sub {
  color: rgba(255, 255, 255, 0.6);
}

.form-card.form-card--dark .wpcf7 label {
  color: rgba(255, 255, 255, 0.55);
}

.form-card.form-card--dark .wpcf7 input[type="text"],
.form-card.form-card--dark .wpcf7 input[type="email"],
.form-card.form-card--dark .wpcf7 input[type="tel"],
.form-card.form-card--dark .wpcf7 select,
.form-card.form-card--dark .wpcf7 textarea {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.form-card.form-card--dark .wpcf7 input::placeholder,
.form-card.form-card--dark .wpcf7 textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.form-card.form-card--dark .wpcf7 select option {
  background: #14120F;
  color: #fff;
}

.form-card.form-card--dark .wpcf7 input:focus,
.form-card.form-card--dark .wpcf7 select:focus,
.form-card.form-card--dark .wpcf7 textarea:focus {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(217, 180, 33, 0.2);
}

.form-card.form-card--dark .cf-rgpd,
.form-card.form-card--dark .cf-rgpd label {
  color: rgba(255, 255, 255, 0.55);
}

.form-card.form-card--dark input[type="submit"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.form-card.form-card--dark input[type="submit"]:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 2.5rem 2.4rem;
  box-shadow: 0 18px 44px rgba(10, 10, 10, 0.06);
  height: 100%;
}

body .form-card-title {
  font-size: 1.6rem;
  margin: 0.5rem 0 0.35rem;
}

.form-card-sub {
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 1.75rem !important;
}

/* Champs CF7 */
.form-card .wpcf7 label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--muted);
}

.form-card .wpcf7 .wpcf7-form-control-wrap {
  display: block;
  margin-top: 0.4rem;
}

.form-card .wpcf7 input[type="text"],
.form-card .wpcf7 input[type="email"],
.form-card .wpcf7 input[type="tel"],
.form-card .wpcf7 select,
.form-card .wpcf7 textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--bg);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.form-card .wpcf7 input:focus,
.form-card .wpcf7 select:focus,
.form-card .wpcf7 textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(217, 180, 33, 0.16);
}

.form-card .cf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.1rem;
}

@media (max-width: 620px) {
  .form-card .cf-grid { grid-template-columns: 1fr; }
}

/* Tablette : colonnes serrees -> une seule colonne de champs */
@media (max-width: 1024px) and (min-width: 782px) {
  .form-card .cf-grid { grid-template-columns: 1fr; }
}

/* Mobile : la carte contact ne doit plus flotter tres bas sous le formulaire */
@media (max-width: 781px) {
  .cta-form-band .contact-info-card { margin-top: 1.5rem !important; }
}

@media (max-width: 620px) {
  .form-card { padding: 1.75rem 1.25rem; }
  .form-card input[type="submit"] { width: 100%; }
}

.form-card .wpcf7 form > p,
.form-card .cf-grid p {
  margin: 0 0 1.1rem;
}

.form-card .cf-rgpd {
  font-size: 0.82rem;
  color: var(--muted);
}

.form-card .cf-rgpd .wpcf7-form-control-wrap { display: inline; }
.form-card .cf-rgpd label { display: inline; text-transform: none; letter-spacing: normal; font-size: 0.82rem; }
.form-card .cf-rgpd input[type="checkbox"] { accent-color: var(--gold); margin-right: 0.4rem; }

.form-card input[type="submit"] {
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  padding: 0.9rem 2.4rem;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease-lux), box-shadow 0.3s ease;
}

.form-card input[type="submit"]:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(10, 10, 10, 0.16);
}

.form-card .wpcf7-spinner { margin-left: 0.75rem; }

.form-card .wpcf7-not-valid-tip {
  font-size: 0.75rem;
  color: #B3261E;
  margin-top: 0.3rem;
}

.form-card .wpcf7-response-output {
  border-radius: 12px;
  border-color: var(--gold) !important;
  padding: 0.8rem 1rem !important;
  font-size: 0.88rem;
  margin: 1rem 0 0 !important;
}

/* Carte Google */
.map-card {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 18px 44px rgba(10, 10, 10, 0.08);
  height: 380px;
}

.map-card iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Mobile : carte moins haute */
@media (max-width: 620px) {
  .map-card { height: 300px; }
}

.contact-info-card {
  margin-top: 1.5rem;
}

.contact-line {
  position: relative;
  padding-left: 1.9rem;
  margin: 0.7rem 0 0 !important;
  font-size: 0.93rem;
  color: var(--ink-soft);
}

.contact-line a { text-decoration: none; color: var(--ink); }
.contact-line a:hover { color: var(--gold-dark); }

.contact-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 16px;
  height: 16px;
  background: center / contain no-repeat;
}

.contact-line-tel::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B421' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.contact-line-pin::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B421' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.contact-line-zone::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B421' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 0 20 15.3 15.3 0 0 1 0-20z'/%3E%3C/svg%3E");
}

/* =====================================================
   Cartes prestations — noires premium, tape a l'oeil
   ===================================================== */
.presta-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(165deg, #1A1712 0%, #0B0A09 60%);
  border: 1px solid rgba(217, 180, 33, 0.28);
  padding: 1.9rem 1.8rem 1.6rem;
  color: rgba(255, 255, 255, 0.85);
  height: 100%;
  font-size: 0.95rem;
  transition: transform 0.5s var(--ease-lux), box-shadow 0.5s var(--ease-lux), border-color 0.4s ease;
}

.presta-card > .wp-block-group__inner-container {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}

.presta-card:not(:has(> .wp-block-group__inner-container)) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Reflet lumineux qui balaye la carte au survol */
.presta-card::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -80%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  transform: skewX(-16deg);
  transition: left 0.9s var(--ease-lux);
  pointer-events: none;
}

@media (hover: hover) {
.presta-card:hover::after { left: 140%; }

.presta-card:hover {
  transform: translateY(-10px);
  border-color: rgba(217, 180, 33, 0.75);
  box-shadow: 0 32px 70px rgba(10, 10, 10, 0.35), 0 0 46px rgba(217, 180, 33, 0.12);
}
}

.services-sub {
  max-width: 46rem;
  margin: 1.1rem auto 0;
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--muted);
}

.services-sub strong {
  font-weight: 500;
  color: var(--ink-soft);
}

/* Section elargie (cartes prestations plus larges) */
.section-wide > * {
  max-width: 1320px;
}

/* Picto dore en haut a droite de la carte */
.presta-icon {
  position: absolute;
  top: 1.4rem;
  right: 1.5rem;
  width: 46px;
  margin: 0 !important;
  opacity: 0.8;
  transition: opacity 0.4s ease, transform 0.5s var(--ease-lux), filter 0.4s ease;
  pointer-events: none;
}

.presta-icon img {
  width: 100%;
  height: auto;
  display: block;
}

.presta-card:hover .presta-icon {
  opacity: 1;
  transform: translateY(-3px) scale(1.06);
  filter: drop-shadow(0 0 12px rgba(217, 180, 33, 0.45));
}

body .presta-card h3 {
  color: #fff;
  font-size: 1.18rem;
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(217, 180, 33, 0.35);
  padding-right: 4.5rem;
}

.presta-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
}

.presta-list li {
  position: relative;
  padding: 0.6rem 0 0.6rem 1.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  line-height: 1.5;
}

.presta-list li:last-child { border-bottom: none; }

.presta-list li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 0.85rem;
  color: var(--gold);
}

.presta-list strong {
  color: #fff;
  font-weight: 500;
}

.presta-list span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
}

body .presta-card .wp-block-buttons {
  margin-top: auto !important;
  justify-content: center;
}

body .presta-card .wp-block-button .wp-block-button__link {
  font-size: 0.85rem;
  padding: 0.65rem 1.7rem;
}

.presta-note {
  margin: 0.9rem 0 0 !important;
  text-align: center;
  font-size: 0.74rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.45);
}

.presta-note::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 0.5rem;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B421' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =====================================================
   Section expertise (accueil uniquement) — encadres
   clairs facon site Wix d'origine : fond gris clair,
   picto centre au-dessus, titre centre. Les cartes
   noires restent telles quelles sur /prestations/.
   ===================================================== */
body.home .presta-card {
  background: var(--bg-alt);
  border: 1px solid rgba(10, 10, 10, 0.35);
  color: var(--muted);
}

/* Pas de reflet lumineux sur fond clair */
body.home .presta-card::after { content: none; }

body.home .presta-icon {
  position: static;
  width: 52px;
  margin: 0 auto 1.1rem !important;
  opacity: 1;
}

body.home .presta-card:hover .presta-icon {
  transform: none;
  filter: none;
}

body.home .presta-card h3 {
  color: var(--ink);
  text-align: center;
  padding-right: 0;
  border-bottom: none;
  padding-bottom: 0.35rem;
}

body.home .presta-list li {
  border-bottom-color: rgba(10, 10, 10, 0.08);
}

body.home .presta-list strong { color: var(--ink); }

body.home .presta-list span { color: var(--muted); }

body.home .presta-note { color: var(--muted); }

@media (hover: hover) {
  body.home .presta-card:hover {
    transform: translateY(-8px);
    border-color: var(--gold);
    box-shadow: 0 22px 50px rgba(10, 10, 10, 0.14);
  }
}

/* Variante validee client : la section "Nos prestations" en bande gris
   clair, cartes blanches (la classe presta-dark est posee sur le wrapper —
   nom historique de l'essai bande noire, garde pour ne pas retoucher le
   markup). */
body.home .presta-dark {
  background: var(--bg-alt);
}

body.home .presta-dark .presta-card {
  background: #fff;
  border-color: rgba(10, 10, 10, 0.12);
  box-shadow: 0 14px 35px rgba(10, 10, 10, 0.08);
}

@media (hover: hover) {
  body.home .presta-dark .presta-card:hover {
    border-color: var(--gold);
    box-shadow: 0 22px 50px rgba(10, 10, 10, 0.14);
  }
}

/* =====================================================
   Filtres projets (pilules) + tuiles cachees
   ===================================================== */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: 2.75rem;
}

.filter-pill {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  padding: 0.6rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease-lux);
}

.filter-pill:hover {
  border-color: var(--gold);
  color: var(--ink);
  transform: translateY(-2px);
}

.filter-pill.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.filter-pill.is-active:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.tile-hidden {
  display: none !important;
}

.projets-intro {
  max-width: 44rem;
  margin: 1.25rem auto 0 !important;
}

/* =====================================================
   Vitrine projets recents — tuiles photo immersives
   ===================================================== */
.sec-head > .wp-block-group__inner-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

/* Markup moderne : flex directement sur la classe */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.proj-tile {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  width: 100%;
  background: var(--ink);
  transition: transform 0.5s var(--ease-lux), box-shadow 0.5s var(--ease-lux);
  /* Markup moderne (plus d'inner-container) : le texte est enfant direct */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.4rem 1.5rem;
}

/* Texte au-dessus du voile degrade (::after est z-index:1) ;
   l'image et .proj-tile-cat restent en absolu */
.proj-tile > .proj-tile-title,
.proj-tile > .proj-tile-loc,
.proj-tile > .proj-tile-cta {
  position: relative;
  z-index: 2;
  margin: 0;
}

@media (hover: hover) {
.proj-tile:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 70px rgba(10, 10, 10, 0.25), inset 0 0 0 1px rgba(217, 180, 33, 0.5);
}
}

/* Fleche cercle doree qui apparait au survol */
.proj-tile::before {
  content: "\2192";
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-size: 1.1rem;
  opacity: 0;
  transform: translateY(-8px) rotate(-45deg);
  transition: opacity 0.4s ease, transform 0.5s var(--ease-lux);
}

@media (hover: hover) {
.proj-tile:hover::before {
  opacity: 1;
  transform: none;
}
}

.proj-tile-img,
.proj-tile-img img {
  position: absolute;
  inset: 0;
  margin: 0 !important;
  width: 100%;
  height: 100%;
}

.proj-tile-img img {
  object-fit: cover;
  filter: saturate(0.82);
  transition: transform 0.9s var(--ease-lux), filter 0.6s ease;
}

@media (hover: hover) {
.proj-tile:hover .proj-tile-img img {
  transform: scale(1.07);
  filter: saturate(1.05);
}
}

/* Voile degrade pour la lisibilite du texte */
.proj-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.05) 45%, rgba(5, 5, 5, 0.55) 75%, rgba(5, 5, 5, 0.92) 100%);
  transition: background 0.5s ease;
  pointer-events: none;
  z-index: 1;
}

/* Calque texte en absolu : la hauteur de la tuile ne depend
   QUE de l'aspect-ratio, jamais du contenu */
.proj-tile > .wp-block-group__inner-container {
  position: absolute !important;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: auto;
  margin: 0 !important;
  max-width: none !important;
  padding: 1.4rem 1.5rem;
  overflow: hidden;
}

.proj-tile-cat {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  margin: 0 !important;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
  color: var(--ink);
  background: rgba(250, 248, 243, 0.92);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
}

body .proj-tile-title {
  font-size: 1.2rem;
  margin: 0;
  line-height: 1.3;
}

body .proj-tile-title a {
  color: #fff;
  text-decoration: none;
}

/* Lien etendu : toute la tuile est cliquable */
.proj-tile-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

.proj-tile-loc {
  margin: 0.2rem 0 0 !important;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
}

.proj-tile-cta {
  margin: 0.75rem 0 0 !important;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--gold);
  border-radius: 999px;
  width: max-content;
  line-height: 1.4;
  padding: 0.5rem 1.2rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: background 0.3s ease, transform 0.35s var(--ease-lux);
}

.proj-tile:hover .proj-tile-cta {
  background: #fff;
  transform: translateX(4px);
}

/* Vignette projet (placeholder ou photo) */
.proj-thumb {
  margin: -2.75rem -2.25rem 1.5rem;
}

.proj-thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
  transition: filter 0.6s ease, transform 0.6s var(--ease-lux);
}

.is-style-card-lux:hover .proj-thumb img {
  filter: grayscale(0);
  transform: scale(1.03);
}

.proj-loc {
  color: var(--muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* =====================================================
   Statistiques
   ===================================================== */
/* Bande stats : ruban fin, noir profond ameliore */
.band-dark.stats-band {
  padding: 2.1rem 1.5rem;
  background: linear-gradient(180deg, #17140E 0%, #0C0B09 55%, #0A0A0A 100%);
  border-top: 1px solid rgba(217, 180, 33, 0.4);
  border-bottom: 1px solid rgba(217, 180, 33, 0.4);
}

/* Stat : chiffre au-dessus, libelle en dessous, le tout centre */
.stat > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  text-align: center;
  height: 100%;
}

.stat:not(:has(> .wp-block-group__inner-container)) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  text-align: center;
  height: 100%;
}

/* Verrouillage total des espacements dans la bande stats :
   aucune marge heritee (block-gap WP, Kadence) ne peut decaler un bloc */
body .stats-band .wp-block-group,
body .stats-band .wp-block-group__inner-container,
body .stats-band p {
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

body .stats-band p {
  line-height: 1.25;
}

body .stats-band .stat {
  height: 100%;
}

/* ...mais le conteneur principal reste centre dans la page */
body .stats-band > .wp-block-group__inner-container,
body .stats-band > .wp-block-group {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: var(--content-width);
  width: 100%;
}

.stat-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 2.6vw, 2.3rem);
  line-height: 1;
  color: var(--gold);
  margin-bottom: 0;
}

.stat-label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
}

/* =====================================================
   Boutons
   ===================================================== */
body .wp-block-button .wp-block-button__link {
  border-radius: 999px;
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0.03em;
  font-size: 0.95rem;
  font-weight: 400;
  padding: 0.85rem 2.1rem;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease-lux), box-shadow 0.3s ease;
}

body .wp-block-button .wp-block-button__link:hover {
  box-shadow: 0 8px 22px rgba(10, 10, 10, 0.16);
}

body .is-style-btn-dark .wp-block-button__link {
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
}

body .is-style-btn-dark .wp-block-button__link:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  transform: translateY(-2px);
}

body .is-style-btn-outline .wp-block-button__link {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

body .is-style-btn-outline .wp-block-button__link:hover {
  background: var(--ink);
  color: #fff;
  transform: translateY(-2px);
}

body .is-style-btn-gold .wp-block-button__link {
  background: var(--gold);
  color: var(--ink);
  border: 1px solid var(--gold);
}

body .is-style-btn-gold .wp-block-button__link:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
  transform: translateY(-2px);
}

body .is-style-btn-outline-light .wp-block-button__link {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

body .is-style-btn-outline-light .wp-block-button__link:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: transparent;
  transform: translateY(-2px);
}

/* Lien texte doré avec flèche */
.gold-link a, a.gold-link {
  color: var(--gold-dark);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  font-weight: 500;
  position: relative;
}

.gold-link a::after, a.gold-link::after {
  content: " \2192";
  transition: margin-left 0.3s var(--ease-lux);
}

.gold-link a:hover::after, a.gold-link:hover::after {
  margin-left: 0.4rem;
}

/* =====================================================
   FAQ (bloc details)
   ===================================================== */
/* FAQ editoriale 2 colonnes : entete sticky a gauche, accordeons a droite */
.faq-head > .wp-block-group__inner-container,
.faq-head {
  position: sticky;
  top: 120px;
  align-self: start;
}

/* Mobile : plus de sticky (l'entete empilee bloquait le defilement visuel) */
@media (max-width: 781px) {
  .faq-head,
  .faq-head > .wp-block-group__inner-container {
    position: static;
  }
}


.faq-lead {
  font-size: 1rem;
  margin: 1rem 0 1.75rem;
}

/* Accordeons blancs arrondis, liseret dore a l'ouverture */
.lux-faq {
  counter-reset: faq;
  margin-left: auto;
  margin-right: auto;
}

.lux-faq .wp-block-details {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.15rem 1.5rem;
  margin: 0 0 0.85rem !important;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.lux-faq .wp-block-details:hover {
  border-color: rgba(217, 180, 33, 0.45);
}

.lux-faq .wp-block-details[open] {
  border-color: rgba(217, 180, 33, 0.55);
  box-shadow: 0 14px 34px rgba(10, 10, 10, 0.07);
}

.lux-faq summary {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.lux-faq summary::-webkit-details-marker { display: none; }

.lux-faq summary::before {
  counter-increment: faq;
  content: counter(faq, decimal-leading-zero);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--gold-dark);
  flex-shrink: 0;
  padding-top: 0.2rem;
}

.lux-faq summary {
  justify-content: flex-start;
}

.lux-faq summary::after {
  margin-left: auto;
}

.lux-faq summary::after {
  content: "+";
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform 0.35s var(--ease-lux);
}

.lux-faq .wp-block-details[open] summary::after {
  transform: rotate(45deg);
}

.lux-faq .wp-block-details p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.75;
  margin: 0.85rem 0 0.2rem 2.4rem;
  padding-right: 2rem;
  max-width: 44rem;
}

/* Mobile : reponses pleine largeur (plus d'indentation ni de retrait droit) */
@media (max-width: 620px) {
  .lux-faq .wp-block-details p {
    margin-left: 0;
    padding-right: 0;
  }
}

/* Ouverture animee en douceur (navigateurs recents) */
@supports (interpolate-size: allow-keywords) {
  .lux-faq { interpolate-size: allow-keywords; }

  .lux-faq ::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.4s var(--ease-lux), content-visibility 0.4s allow-discrete;
  }

  .lux-faq [open]::details-content {
    height: auto;
  }
}

/* =====================================================
   Tableaux (tarifs)
   ===================================================== */
.wp-block-table table {
  border-collapse: collapse;
  width: 100%;
}

.wp-block-table th {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: left;
  padding: 0.9rem 1rem;
  border-bottom: 2px solid var(--ink);
  background: transparent;
}

.wp-block-table td {
  padding: 0.9rem 1rem;
  border: none;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}

.wp-block-table tr:hover td {
  background: var(--gold-soft);
}

.wp-block-table td:last-child {
  font-family: var(--font-display);
  white-space: nowrap;
}

/* Tres petits ecrans : le tableau devient une pile de cartes
   (une ligne = un bloc, le prix en evidence en bas) */
@media (max-width: 560px) {
  .wp-block-table thead { display: none; }
  .wp-block-table tr {
    display: block;
    padding: 0.75rem 0;
  }
  .wp-block-table td {
    display: block;
    padding: 0.15rem 0;
    border-bottom: 0;
  }
  .wp-block-table tr + tr { border-top: 1px solid var(--border); }
  .wp-block-table td:last-child {
    white-space: normal;
    color: var(--gold-dark);
    font-size: 1.05rem;
  }
}

/* =====================================================
   Header (Kadence) : integralement deporte dans
   css/navbar.css (position fixed + etat .is-scrolled,
   voir navbar.js). Ne rien rajouter ici.
   ===================================================== */

/* =====================================================
   Footer (Kadence)
   ===================================================== */
#colophon.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.6);
  border-top: 2px solid var(--gold);
}

#colophon.site-footer a {
  color: rgba(255, 255, 255, 0.75);
}

#colophon.site-footer a:hover {
  color: var(--gold);
}

/* =====================================================
   Animations — reveal au scroll
   (activées seulement quand le JS est present : html.has-reveal)
   ===================================================== */
/* .reveal-item est pose par reveal.js (avec un delai en cascade) :
   sans JS, la classe n'existe pas -> rien n'est jamais cache. */
html.has-reveal .reveal,
html.has-reveal .reveal-item {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease-lux), transform 0.7s var(--ease-lux);
}

html.has-reveal .reveal.in-view,
html.has-reveal .reveal-item.in-view {
  opacity: 1;
  transform: none;
}

/* Jamais d'elements caches dans l'editeur de blocs */
.editor-styles-wrapper .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* LCP : le premier ecran (hero / en-tete de page) ne doit JAMAIS
   attendre le JS pour apparaitre */
html.has-reveal .lux-hero .reveal,
html.has-reveal .page-header-lux .reveal,
html.has-reveal .projx-hero .reveal {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.has-reveal .reveal,
  html.has-reveal .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =====================================================
   View Transitions — cross-fade entre pages (façon SPA)
   ===================================================== */
@view-transition {
  navigation: auto;
}

@keyframes lux-vt-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

::view-transition-new(root) {
  animation: lux-vt-in 0.35s ease-out;
}

::view-transition-old(root) {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(root),
  ::view-transition-old(root) {
    animation: none;
  }
}

/* =====================================================
   Vague 3-A — tactile
   Cibles de tap >= 44px, carrousel avis scrollable au
   doigt, couleurs Kadence bleues residuelles du blog
   ramenees a la charte. Les effets hover-lift sont
   neutralises sur tactile via les wrappers
   @media (hover: hover) ajoutes plus haut.
   ===================================================== */

/* 1. Coeur « J'aime » : zone tactile elargie, rendu inchange */
.ac-like-btn {
  padding: 12px;
  margin: -12px;
}

/* 8. Coeur : pas d'animation pop si mouvement reduit */
@media (prefers-reduced-motion: reduce) {
  .ac-like-btn.is-pop svg {
    animation: none;
  }
}

/* 2. FAQ : toute la ligne du summary devient cliquable.
   Le padding vertical de la carte est transfere sur le summary
   (ferme : 1.15rem haut/bas identiques) ; a l'ouverture la carte
   reprend son padding bas et le summary rend le sien pour que
   l'ecart summary/reponse reste identique a avant. */
.lux-faq .wp-block-details {
  padding: 0 1.5rem;
}

.lux-faq summary {
  padding: 1.15rem 0;
}

.lux-faq .wp-block-details[open] {
  padding-bottom: 1.15rem;
}

.lux-faq .wp-block-details[open] summary {
  padding-bottom: 0;
}

/* 3. Pilules filtres projets : cible tactile >= 44px */
.filter-pill {
  min-height: 44px;
}

/* 7. Label categorie tuile projet : 12px mini pour la lisibilite */
.proj-tile-cat {
  font-size: 0.75rem;
}

/* 4. Carrousel avis : sur tactile, defilement libre au doigt
   avec snap (les cartes sont doublees pour la boucle desktop,
   c'est accepte : l'utilisateur scrolle librement). */


/* 6. Blog : couleurs bleues Kadence residuelles → charte.
   Liens categories / meta (or), « Lire la suite » (hover restait
   bleu), bandeau hero (gris-bleu palette7), fond « articles
   similaires », commentaires (lien reponse + bouton envoyer). */
body .entry-taxonomies a,
body .entry-meta a {
  color: var(--gold-dark);
  text-decoration: none;
}

body .entry-taxonomies a:hover,
body .entry-meta a:hover {
  color: var(--gold);
}

body a.post-more-link:hover {
  color: var(--gold);
}

/* Liens dans le corps des articles (bleus par defaut Kadence) */
body.single-post .entry-content a:not(.wp-block-button__link) {
  color: var(--gold-dark);
}

body.single-post .entry-content a:not(.wp-block-button__link):hover {
  color: var(--gold);
}

/* Bandeau hero d'archive et d'article : plus de fond gris-bleu */
body .entry-hero .entry-hero-container-inner {
  background: transparent;
}

/* Fond de la section « articles similaires » */
body .entry-related {
  background: var(--gold-soft);
}

/* Commentaires : lien « Repondre » et bouton envoyer a la charte */
body .comments-area .comment-reply-link {
  color: var(--ink);
  border-color: var(--border);
}

body .comments-area .comment-reply-link:hover,
body .comments-area .comment-reply-link:focus {
  color: var(--gold-dark);
  border-color: var(--gold-dark);
}

body .comment-form #submit {
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  padding: 0.85rem 2.1rem;
  transition: background 0.3s ease, color 0.3s ease;
}

body .comment-form #submit:hover {
  background: var(--gold);
  color: var(--ink);
}

body .comment-respond .logged-in-as a,
body .comment-respond .comment-notes a,
body #cancel-comment-reply-link {
  color: var(--gold-dark);
}

/* =====================================================
   Fix tuiles projets : texte au-dessus de l'image SANS
   confiner le lien etendu (z-index negatifs isoles)
   ===================================================== */
.proj-tile {
  isolation: isolate;
}

.proj-tile .proj-tile-img {
  z-index: -2;
}

.proj-tile::after {
  z-index: -1;
}

/* le texte repasse en flux normal : il peint au-dessus des z negatifs */
.proj-tile > .proj-tile-title,
.proj-tile > .proj-tile-loc,
.proj-tile > .proj-tile-cta {
  position: static;
  z-index: auto;
}

/* le lien etendu se rattache de nouveau a la tuile entiere */
.proj-tile-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* =====================================================
   Page prestations v2 : packs duo, mini-cartes a la carte,
   timeline des phases de mission
   ===================================================== */
.pack-card {
  height: 100%;
}

.pack-card-light {
  background: var(--gold-soft);
  border: 1px solid rgba(217, 180, 33, 0.35);
  border-radius: 24px;
  padding: 2.75rem 2.25rem;
}

body .pack-title {
  font-size: 1.6rem;
  margin: 0.5rem 0 0.75rem;
  text-align: center;
}

body .presta-card .pack-title {
  color: #fff;
  border-bottom: none;
  padding-right: 0;
}

.pack-card-light p {
  color: var(--ink-soft);
}

.pack-card .card-num {
  display: block;
  text-align: center;
}

.pack-card p:not(.card-num) {
  text-align: center;
}

.pack-card .wp-block-buttons {
  margin-top: 1.5rem;
  justify-content: center;
}

/* Mini-cartes services a la carte */
.carte-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.5rem 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  transition: border-color 0.35s ease, box-shadow 0.4s ease;
}

.carte-item:hover {
  border-color: rgba(217, 180, 33, 0.55);
  box-shadow: 0 14px 32px rgba(10, 10, 10, 0.08);
}

body .carte-nom {
  font-size: 1.02rem;
  font-weight: 500;
  margin: 0 0 0.4rem;
}

.carte-desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 1rem !important;
}

.carte-prix {
  margin-top: auto !important;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gold-dark);
  margin-bottom: 0 !important;
}

/* Timeline des phases de mission */
.phase-list {
  list-style: none;
  counter-reset: phase;
  padding: 0;
  margin: 0;
  border-left: 1px solid var(--border);
}

.phase-list li {
  counter-increment: phase;
  position: relative;
  padding: 0.55rem 0 0.55rem 3.2rem;
  color: var(--ink-soft);
}

.phase-list li::before {
  content: counter(phase, decimal-leading-zero);
  position: absolute;
  left: 1.1rem;
  top: 0.65rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--gold-dark);
  font-weight: 500;
}

.phase-list li::after {
  content: "";
  position: absolute;
  left: -4px;
  top: 1.15rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

/* =====================================================
   Sous-pages prestations detaillees (Expertise / Permis /
   Montage) — cartes reutilisables reprises de la maquette
   Next.js, adaptees a la charte luxe blanc/noir/or.
   ===================================================== */
.lux-grid-2 { --grid-cols: 2; }

.lux-grid-2 > .wp-block-group__inner-container,
.lux-grid-2:not(:has(> .wp-block-group__inner-container)) {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 2), minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

@media (max-width: 620px) {
  .lux-grid-2 { --grid-cols: 1; }
}

/* Icone carree or pale (intro pillars, spec-card, link-card) */
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--gold-soft);
  color: var(--gold-dark);
  flex-shrink: 0;
}

.icon-box svg { width: 22px; height: 22px; }

/* Petite carte icone + titre + texte (intro pillars, "pour qui", etapes) */
.icon-card {
  height: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  transition: border-color 0.35s ease, box-shadow 0.4s ease, transform 0.4s var(--ease-lux);
}

.icon-card:hover {
  border-color: rgba(217, 180, 33, 0.5);
  box-shadow: 0 14px 32px rgba(10, 10, 10, 0.08);
  transform: translateY(-4px);
}

.icon-card.icon-card-gray { background: var(--bg-alt); }

.spec-card.spec-card-gray { background: var(--bg-alt); }

.icon-card .icon-box,
.icon-card .num-badge { margin-bottom: 1rem; }

body .icon-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
  padding: 0;
  border: 0;
  color: var(--ink);
}

.icon-card p { font-size: 0.875rem; color: var(--muted); line-height: 1.55; margin: 0; }

/* Badge numerote (etapes d'un processus) */
.num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold-dark);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 500;
  flex-shrink: 0;
}

/* Carte detaillee : icone + pastille prix en tete, titre, checklist */
.spec-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.75rem;
  transition: border-color 0.35s ease, box-shadow 0.4s ease, transform 0.4s var(--ease-lux);
}

.spec-card:hover {
  border-color: rgba(217, 180, 33, 0.5);
  box-shadow: 0 18px 40px rgba(10, 10, 10, 0.09);
  transform: translateY(-4px);
}

.spec-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.spec-card-head .icon-box { width: 40px; height: 40px; }

/* Variante : icone + titre cote a cote dans l'entete (au lieu du titre en dessous) */
.spec-card-head-left {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  min-width: 0;
}

body .spec-card .spec-card-head-left h3 {
  margin: 0;
  padding-top: 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.spec-card-head .icon-box svg { width: 20px; height: 20px; }

.price-pill {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-dark);
  font-size: 0.75rem;
  font-weight: 500;
}

body .spec-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  padding: 0;
  border: 0;
  color: var(--ink);
  line-height: 1.35;
}

.spec-card .spec-code {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.15rem;
}

.spec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.spec-list.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem 1.25rem;
}

@media (max-width: 480px) {
  .spec-list.two-col { grid-template-columns: 1fr; }
}

.spec-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.844rem;
  line-height: 1.5;
  color: var(--muted);
}

.spec-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28rem;
  width: 14px;
  height: 14px;
  background-color: var(--gold-dark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Encart tarif clair (bande large, texte + boutons) */
.tarif-highlight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2.5rem;
}

.tarif-highlight .overline { margin-bottom: 0.6rem; }

.tarif-highlight .tarif-price {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--ink);
  margin: 0;
}

.tarif-highlight .tarif-price small {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  color: var(--muted);
  font-weight: 400;
}

.tarif-highlight .tarif-desc {
  max-width: 30rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.tarif-highlight .wp-block-buttons { margin: 0 !important; }

/* Encart tarif sombre (carte prix, style presta-card) */
.tarif-dark {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2.5rem;
  color: var(--ink-soft);
}

.tarif-dark .tarif-price {
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}

.tarif-dark .tarif-price em { color: var(--gold-dark); font-style: normal; }

.tarif-dark p { font-size: 0.875rem; color: var(--muted); }

.tarif-dark .wp-block-buttons { margin-top: 1.5rem !important; }

.tarif-dark hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1.25rem 0;
}

/* Encart tarif clair "carte" (vertical, style Montage d'operations) */
.tarif-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 14px 34px rgba(10, 10, 10, 0.06);
}

.tarif-card .tarif-price {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}

.tarif-card .tarif-price em { color: var(--gold-dark); font-style: normal; }

.tarif-card p { font-size: 0.875rem; color: var(--muted); }

.tarif-card hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1.5rem 0 1rem;
}

/* En-tete titre + pastille prix pour link-card riche (variante "badge") */
.link-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

body .link-card-head h3 { margin: 0; }

/* Carte de renvoi croise "riche" (eyebrow + titre + texte + Decouvrir) */
.link-card {
  display: block;
  height: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  text-decoration: none;
  transition: border-color 0.35s ease, box-shadow 0.4s ease;
}

.link-card:hover {
  border-color: rgba(217, 180, 33, 0.5);
  box-shadow: 0 14px 32px rgba(10, 10, 10, 0.08);
}

.link-card .overline { margin-bottom: 0.5rem; }

body .link-card h3 { font-size: 1.25rem; font-family: var(--font-display); margin: 0 0 0.5rem; padding: 0; border: 0; color: var(--ink); }

.link-card .link-price { font-size: 0.82rem; color: var(--gold-dark); font-weight: 500; }

.link-card .link-desc { font-size: 0.875rem; line-height: 1.6; color: var(--muted); margin: 0; }

.link-card .link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gold-dark);
  white-space: nowrap;
  transition: gap 0.25s ease;
}

.link-card .link-cta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.link-card:hover .link-cta { gap: 0.55rem; }

/* Carte de renvoi croise "compacte" (titre+prix a gauche, fleche a droite) */
.link-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  text-decoration: none;
  transition: border-color 0.35s ease, box-shadow 0.4s ease;
}

.link-card-row:hover {
  border-color: rgba(217, 180, 33, 0.5);
  box-shadow: 0 14px 32px rgba(10, 10, 10, 0.08);
}

body .link-card-row h3 { font-size: 1rem; font-weight: 600; margin: 0 0 0.25rem; padding: 0; border: 0; color: var(--ink); }

.link-card-row .link-price { font-size: 0.875rem; color: var(--muted); }

.link-card-row svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--gold-dark);
  transition: transform 0.3s var(--ease-lux);
}

.link-card-row:hover svg { transform: translateX(4px); }

/* Prix dans les cartes noires prestations */
.presta-card .presta-price {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  margin-bottom: 1rem !important;
}

.presta-card .presta-price small {
  color: rgba(255, 255, 255, 0.5);
}

/* =====================================================
   Section "Mission / valeurs" (page Agence) — guillemet
   dore, citation centree, sous-texte, 4 cartes blanches
   avec picto or. Fond gris clair facon maquette client.
   ===================================================== */
.mission-band {
  background: var(--bg-alt);
  padding: 5.5rem 1.5rem;
  text-align: center;
}

.mission-quote-mark {
  color: var(--gold);
  line-height: 1;
  margin: 0 auto 1.25rem;
}

.mission-quote-mark svg {
  width: 40px;
  height: auto;
  display: inline-block;
}

body .mission-band .mission-title {
  font-size: clamp(1.7rem, 3.5vw + 0.6rem, 2.6rem);
  margin: 0 auto 1.25rem;
  max-width: 30rem;
  color: var(--ink);
}

/* La citation est un h3 : elle ne double pas le h2 de titre de la section.
   On lui rend la graisse 300 des titres, que la regle h3/h4 ramene a 400. */
body .mission-band h3.mission-title {
  font-weight: 300;
}

/* Respiration entre le titre de section et le guillemet dore : sans elle,
   titre et citation se lisent comme deux titres empiles. */
.mission-band .wp-block-heading + .mission-quote-mark {
  margin-top: 3rem;
}

.mission-lead {
  max-width: 46rem;
  margin: 0 auto 3rem;
  color: var(--muted);
  line-height: 1.75;
}

.mission-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  gap: 1.5rem;
  max-width: 1100px;
  margin-inline: auto;
}

/* Compat markup ancien (inner-container) */
.mission-grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  gap: 1.5rem;
}

body .mission-card {
  height: 100%;
  margin: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2rem 1.4rem;
  text-align: center;
  transition: transform 0.45s var(--ease-lux), box-shadow 0.45s var(--ease-lux), border-color 0.4s ease;
}

.mission-icon {
  color: var(--gold);
  margin: 0 auto 1rem;
  line-height: 0;
}

.mission-icon svg {
  width: 34px;
  height: 34px;
  display: inline-block;
}

body .mission-card h3 {
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0 0 0.7rem;
  color: var(--ink);
}

.mission-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
}

@media (hover: hover) {
  .mission-card:hover {
    transform: translateY(-6px);
    border-color: var(--gold);
    box-shadow: 0 20px 45px rgba(10, 10, 10, 0.1);
  }
}

@media (max-width: 900px) {
  .mission-grid,
  .mission-grid > .wp-block-group__inner-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .mission-grid,
  .mission-grid > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   Section "Champs de competence / Nos domaines d'expertise"
   (page Agence) — reprise du site Next.js : 7 cartes blanches
   grille 3 col, badge picto carre or pale, texte aligne a gauche.
   ===================================================== */
.skills-band {
  background: #fff;
  padding: 5.5rem 1.5rem;
}

/* Cartes sur fond blanc : leger relief pour se detacher */
.skills-band .skill-card {
  box-shadow: 0 10px 30px rgba(10, 10, 10, 0.05);
}

.skills-sub {
  max-width: 46rem;
  margin: 1.1rem auto 0;
  text-align: center;
  color: var(--muted);
  line-height: 1.7;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 1.25rem;
  max-width: 1120px;
  margin: 2.5rem auto 0;
}

.skills-grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 1.25rem;
}

body .skill-card {
  height: 100%;
  margin: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.6rem;
  text-align: left;
  transition: transform 0.45s var(--ease-lux), box-shadow 0.45s var(--ease-lux), border-color 0.4s ease;
}

.skill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--gold-soft);
  color: var(--gold-dark);
  margin-bottom: 1rem;
}

.skill-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

body .skill-card h3 {
  font-size: 1.06rem;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 0.55rem;
  color: var(--ink);
}

.skill-card p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
}

@media (hover: hover) {
  .skill-card:hover {
    transform: translateY(-6px);
    border-color: var(--gold);
    box-shadow: 0 20px 45px rgba(10, 10, 10, 0.1);
  }
}

@media (max-width: 900px) {
  .skills-grid,
  .skills-grid > .wp-block-group__inner-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .skills-grid,
  .skills-grid > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   Section "Garanties & appartenances / Des certifications
   qui engagent" (page Agence) — 4 cartes badges (logo +
   texte), grille 2 col, reprise du site Next.js.
   ===================================================== */
.certs-band {
  background: var(--bg-alt);
  padding: 5.5rem 1.5rem;
}

.certs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  gap: 1.25rem;
  max-width: 1120px;
  margin: 2.5rem auto 0;
}

.certs-grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  gap: 1.25rem;
}

body .cert-card {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.25rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: left;
  transition: transform 0.45s var(--ease-lux), box-shadow 0.45s var(--ease-lux), border-color 0.4s ease;
}

body .cert-card > .wp-block-group__inner-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.25rem;
  width: 100%;
}

.cert-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  height: 64px;
  padding: 0 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

.cert-logo {
  max-height: 40px;
  width: auto;
  object-fit: contain;
  display: block;
}

body .cert-body { margin: 0; }

body .cert-card h3 {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  margin: 0 0 0.4rem;
  color: var(--ink);
}

.cert-card p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted);
}

@media (hover: hover) {
  .cert-card:hover {
    transform: translateY(-5px);
    border-color: var(--gold);
    box-shadow: 0 20px 45px rgba(10, 10, 10, 0.1);
  }
}

@media (max-width: 700px) {
  .certs-grid,
  .certs-grid > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   Galeries des fiches projet (photos Wix) — grille 3 col
   propre, hauteurs uniformes, coins arrondis.
   ===================================================== */
.projx-gallery-sec { background: #fff; }

.projx-gallery.wp-block-gallery {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  max-width: var(--content-width);
  margin: 1.5rem auto 0;
}

.projx-gallery.wp-block-gallery .wp-block-image {
  margin: 0 !important;
  width: 100% !important;
}

.projx-gallery.wp-block-gallery figure.wp-block-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

@media (max-width: 781px) {
  .projx-gallery.wp-block-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .projx-gallery.wp-block-gallery { grid-template-columns: 1fr; }
}

/* =====================================================
   "À voir aussi / Autres projets <cat>" (bas de fiche
   projet) — fond gris pleine largeur, 3 cartes, bouton
   centre. Repris du site Next.js.
   ===================================================== */
.related-projects {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--bg-alt);
  padding: 4.5rem 1.5rem 5rem;
}

.related-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.related-inner .overline {
  text-align: left;
  margin: 0 0 0.6rem;
}

body .related-title {
  text-align: left;
  font-size: clamp(1.6rem, 3vw + 0.6rem, 2.5rem);
  margin: 0 0 2.2rem;
}

/* Carrousel : memes tuiles .proj-tile que /projets/, en scroll horizontal */
.related-carousel {
  position: relative;
  margin-top: 2rem;
  padding-inline: 58px; /* gouttiere pour les fleches, hors des cartes */
}

.related-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 6px 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.related-track::-webkit-scrollbar { display: none; }

.related-track .proj-tile {
  flex: 0 0 340px;
  width: 340px;
  max-width: 82vw;
  scroll-snap-align: start;
}

/* Fleches de defilement */
.related-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(10, 10, 10, 0.14);
  transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.related-arrow:hover { background: var(--ink); color: #fff; }
.related-arrow--prev { left: 2px; }
.related-arrow--next { right: 2px; }

.related-arrow:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.related-carousel.no-scroll .related-arrow { display: none; }

.related-cta {
  text-align: center;
  margin-top: 2.75rem;
}

.related-btn {
  display: inline-block;
  padding: 0.85rem 2.4rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.related-btn:hover {
  background: var(--ink);
  color: #fff;
}

@media (max-width: 700px) {
  .related-arrow { display: none; } /* mobile : defilement tactile */
  .related-carousel { padding-inline: 0; }
}

/* =====================================================
   Page Tarifs — grilles reprises de la maquette Next.js
   (src/app/tarifs/page.tsx), adaptees a la charte luxe.
   ===================================================== */
.price-table-stack {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.price-table h3 {
  font-size: 1.2rem;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  color: var(--ink);
}

.price-table-box {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  font-size: 0.875rem;
}

.price-table-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-alt);
  padding: 0.9rem 1.25rem;
  font-weight: 600;
  color: var(--ink);
}

@media (min-width: 640px) {
  .price-table-head { display: flex; }
}

.price-table-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.price-table-rows > .price-table-row:nth-child(even) { background: var(--bg-alt); }
.price-table-rows > .price-table-row:last-child { border-bottom: 0; }

@media (min-width: 640px) {
  .price-table-row {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
  }
}

.price-table-row .ptr-label { color: var(--ink); }

.price-table-row .ptr-price {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--gold-dark);
}

@media (min-width: 640px) {
  .price-table-row .ptr-price { text-align: right; }
}

/* Carte "Sur demande" (services complementaires) */
.on-demand-card {
  margin-top: 2.5rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem 2.25rem;
}

.on-demand-card h3 {
  font-size: 1.15rem;
  margin: 0 0 0.6rem;
  padding: 0;
  border: 0;
  color: var(--ink);
}

.on-demand-card > p {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0 0 1rem;
}

/* Encart citation + facteurs/TVA (remplace l'ancien bloc 3-cartes) */
.info-card {
  max-width: 760px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2.5rem;
}

.info-quote {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.info-quote svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--gold-dark);
}

.info-quote-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}

.info-grid .overline {
  display: block;
  margin-bottom: 0.85rem;
  white-space: normal;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
}
.info-grid .overline::before { display: none; }

.info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.info-list.dot-list li {
  position: relative;
  padding-left: 1.1rem;
}

.info-list.dot-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.info-list strong { color: var(--ink); font-weight: 600; }

.info-note {
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Cartes "modes de facturation" (tarifs) : icone a gauche du titre */
.icon-card .spec-card-head-left {
  margin-bottom: 0.85rem;
}
.icon-card .spec-card-head-left .icon-box {
  margin-bottom: 0;
}
body .icon-card .spec-card-head-left h3 {
  margin: 0;
  padding-top: 0.4rem;
}

/* =====================================================
   Fix dropdown sous-menu : etat actif/focus bleu par
   defaut du navigateur neutralise + surlignage pleine
   largeur garanti (largeur/box-sizing explicites).
   ===================================================== */
#masthead #primary-menu .sub-menu li > a {
  width: 100%;
  box-sizing: border-box;
  outline: none;
}

#masthead #primary-menu .sub-menu li a:focus,
#masthead #primary-menu .sub-menu li a:focus-visible,
#masthead #primary-menu .sub-menu li a:active {
  outline: none;
  box-shadow: none;
  color: var(--gold-dark);
  background: var(--bg-alt);
}

#masthead #primary-menu .sub-menu li.current-menu-item > a {
  color: var(--gold-dark);
  background: var(--bg-alt);
}

/* =====================================================
   Carte "Tarif indicatif" (.tarif-dark, page Permis) :
   suit le scroll de la section (colonne 42%, plus courte
   que la colonne de contenu en face) + icone a gauche du
   label, comme le reste du site.
   ===================================================== */
@media (min-width: 782px) {
  .tarif-dark {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
  }
}

.tarif-dark .spec-card-head-left {
  margin-bottom: 1rem;
}

.tarif-dark .spec-card-head-left .icon-box {
  margin-bottom: 0;
}

.tarif-dark .spec-card-head-left .overline {
  margin: 0;
}

/* =====================================================
   Timeline "etapes du dossier" (cercles numerotes relies
   par un trait horizontal) — remplace l'ancien empilement
   icon-card+titre+texte sur la page Permis de construire.
   Fidele a la structure de la maquette Next.js de reference
   (circle + connector line dans l'entete de chaque carte).
   ===================================================== */
.step-card {
  height: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  transition: border-color 0.35s ease, box-shadow 0.4s ease, transform 0.4s var(--ease-lux);
}

.step-card:hover {
  border-color: rgba(217, 180, 33, 0.5);
  box-shadow: 0 14px 32px rgba(10, 10, 10, 0.08);
  transform: translateY(-4px);
}

.step-card .step-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.step-connector {
  display: block;
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}

body .step-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
  padding: 0;
  border: 0;
  color: var(--ink);
}

.step-card p { font-size: 0.875rem; color: var(--muted); line-height: 1.55; margin: 0; }

/* Le trait n'a de sens que lorsque les 5 etapes sont sur une
   seule ligne (grille a 5 colonnes) : au-dela, lux-grid-5
   repasse a 3 puis 1 colonne(s) et le connecteur est masque. */
@media (max-width: 960px) {
  .step-connector { display: none; }
}

/* Carte "Tarif" (.tarif-card, page Montage d'operations) :
   meme comportement sticky que .tarif-dark sur la page Permis. */
@media (min-width: 782px) {
  .tarif-card {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
  }
}

/* === Formulaire contact (CF7 id 77) : section "Votre projet" ajoutee 2026-07-29 === */
.form-card .cf-checklist {
  margin-top: 0.2rem;
}
.form-card .cf-checklist .wpcf7-list-item {
  display: block;
  margin: 0 0 0.5rem;
}
.form-card .cf-checklist .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
}
.form-card .cf-checklist input[type="checkbox"] {
  accent-color: var(--gold);
  margin-top: 0.2rem;
  flex: 0 0 auto;
}
.form-card.form-card--dark .cf-checklist .wpcf7-list-item label {
  color: rgba(255, 255, 255, 0.85);
}
/* === Fin section "Votre projet" === */

/* =====================================================
   Sommaire (table des matieres) — articles de blog.
   Genere dynamiquement par functions.php (the_content),
   uniquement quand l'article compte au moins 2 titres.
   Colonne sticky a gauche >960px, <details> replie nativement
   sur mobile (pas de JS).
   ===================================================== */
body.has-blog-toc.single-post .entry-content {
  max-width: 1180px;
}

.ac-toc-wrap {
  display: block;
}

.ac-toc {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-alt);
  padding: 1.5rem 1.6rem 1.7rem;
}

.ac-toc-label {
  cursor: default;
  list-style: none;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--gold-dark);
  margin: 0;
}

.ac-toc-label::-webkit-details-marker { display: none; }
.ac-toc-label::marker { content: ""; }

.ac-toc-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.ac-toc-list a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.86rem;
  line-height: 1.45;
  border-left: 2px solid var(--border);
  padding-left: 0.75rem;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.ac-toc-list a:hover {
  color: var(--gold-dark);
  border-color: var(--gold);
}

.ac-toc-list a.ac-toc-h3 {
  padding-left: 1.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}

@media (min-width: 961px) {
  .ac-toc-wrap {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 3.25rem;
    align-items: start;
  }

  .ac-toc-col {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
  }

  .ac-toc-label {
    cursor: default;
    pointer-events: none;
  }
}

@media (max-width: 960px) {
  .ac-toc {
    margin-bottom: 2.25rem;
  }

  .ac-toc-label {
    cursor: pointer;
  }

  .ac-toc-list {
    max-height: 320px;
    overflow-y: auto;
  }
}

/* =====================================================
   « Publications similaires » (articles) — carrousel
   natif Kadence (entry-related / splide), remis a la
   charte luxe blanc/noir/or plutot que le bleu par defaut.
   ===================================================== */
body h2.entry-related-title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw + 0.5rem, 2rem);
  color: var(--ink);
  text-align: center;
}

.entry-related .loop-entry.entry {
  box-shadow: none;
}

.entry-related .splide__arrow {
  background: #fff;
  border: 1px solid var(--border);
  opacity: 1;
}

.entry-related .splide__arrow svg {
  fill: var(--ink);
}

.entry-related .splide__arrow:hover {
  background: var(--ink);
}

.entry-related .splide__arrow:hover svg {
  fill: #fff;
}

.entry-related .splide__arrow:disabled {
  opacity: 0.35;
}

.entry-related .splide__pagination__page {
  background: var(--border);
}

.entry-related .splide__pagination__page.is-active {
  background: var(--gold-dark);
  transform: scale(1.2);
}

/* =====================================================
   En-tête de page sur fond noir (31/07, demande client)
   S'applique à toutes les pages qui portent .page-header-lux.
   Kadence imprime son CSS APRÈS la feuille enfant : les règles de couleur
   doivent donc être préfixées `body` pour gagner la cascade.
   ===================================================== */
body .page-header-lux {
  background: var(--ink);
  border-bottom: 1px solid rgba(217, 180, 33, 0.35);
  padding-top: 6.5rem;
  padding-bottom: 5rem;
}

body .page-header-lux h1 {
  color: #fff;
}

body .page-header-lux h1 em {
  color: var(--gold);
}

/* Le nom du cabinet / la rubrique : nettement plus lisible qu'avant (0.75rem) */
body .page-header-lux .overline {
  color: var(--gold);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  letter-spacing: 0.22em;
}

body .page-header-lux .lead,
body .page-header-lux p:not(.overline) {
  color: rgba(255, 255, 255, 0.74);
}

@media (max-width: 620px) {
  body .page-header-lux {
    padding-top: 4.5rem;
    padding-bottom: 3.25rem;
  }
  body .page-header-lux .overline {
    letter-spacing: 0.16em;
  }
}

/* =====================================================
   Section « Notre histoire » — /agence/ (31/07, v2)
   Frise centrale alternée AVEC les photos du Wix, sur fond noir : la version
   grise précédente s'enchaînait sans rupture sur la bande Mission, elle aussi
   grise. L'axe est centré, les étapes se répartissent de part et d'autre, le
   texte reste collé à l'axe et la photo part vers l'extérieur.
   ===================================================== */
.hist-band {
  overflow: hidden;
}

.hist-band .hist-intro {
  max-width: 62ch;
  margin-top: 0.9rem;
  color: rgba(255, 255, 255, 0.66);
}

.hist-band .overline {
  color: var(--gold);
}

.hist-timeline {
  --hist-gutter: 3.2rem;
  list-style: none;
  position: relative;
  max-width: 1040px;
  margin: 3.5rem auto 0;
  padding: 0;
}

/* L'axe central : dégradé pour qu'il naisse et s'éteigne en douceur */
.hist-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: linear-gradient(to bottom,
    rgba(217, 180, 33, 0),
    rgba(217, 180, 33, 0.55) 8%,
    rgba(217, 180, 33, 0.55) 92%,
    rgba(217, 180, 33, 0));
}

.hist-item {
  display: grid;
  grid-template-columns: 1fr var(--hist-gutter) 1fr;
  align-items: center;
  margin-bottom: 2.6rem;
}

.hist-item:last-child {
  margin-bottom: 0;
}

/* Le losange sur l'axe */
.hist-dot {
  grid-column: 2;
  justify-self: center;
  width: 10px;
  height: 10px;
  border: 1px solid var(--gold);
  background: var(--ink);
  transform: rotate(45deg);
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

.hist-card {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  text-decoration: none;
}

/* Étape à gauche : photo à l'extérieur, texte contre l'axe */
.hist-item.is-left .hist-card {
  grid-column: 1;
  flex-direction: row;
  justify-content: flex-end;
  text-align: right;
  padding-right: 1.4rem;
}

/* Étape à droite : miroir */
.hist-item.is-right .hist-card {
  grid-column: 3;
  flex-direction: row-reverse;
  justify-content: flex-end;
  text-align: left;
  padding-left: 1.4rem;
}

/* Le trait qui relie la carte à l'axe */
.hist-card::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.4rem;
  height: 1px;
  background: rgba(217, 180, 33, 0.4);
}

.hist-item {
  position: relative;
}

.hist-item.is-left .hist-card::after {
  right: 0;
}

.hist-item.is-right .hist-card::after {
  left: 0;
}

.hist-photo {
  flex: 0 0 auto;
  width: 190px;
  height: 140px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #1a1a1a;
}

.hist-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.5s ease, transform 0.6s var(--ease-lux);
}

.hist-text {
  display: block;
  min-width: 0;
}

.hist-year {
  display: block;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.45rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  line-height: 1.15;
}

.hist-title {
  display: block;
  margin-top: 0.3rem;
  font-size: 1rem;
  line-height: 1.45;
  color: #fff;
}

.hist-place {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.52);
}

/* Étapes marquantes : création puis extension de l'agence */
.hist-item.is-milestone .hist-dot {
  width: 13px;
  height: 13px;
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(217, 180, 33, 0.14);
}

.hist-item.is-milestone .hist-year {
  font-size: 1.75rem;
}

.hist-item.is-milestone .hist-photo {
  border-color: rgba(217, 180, 33, 0.55);
}

.hist-item.is-milestone .hist-photo img {
  filter: none;
}

@media (hover: hover) {
  .hist-item:hover .hist-photo img {
    filter: none;
    transform: scale(1.05);
  }
  .hist-item:hover .hist-dot {
    background: var(--gold);
  }
}

/* ---------- Sous 900px : axe à gauche, tout aligné du même côté ---------- */
@media (max-width: 900px) {
  .hist-timeline {
    --hist-gutter: 1.9rem;
    max-width: 560px;
    margin-top: 2.5rem;
  }

  .hist-timeline::before {
    left: calc(var(--hist-gutter) / 2);
  }

  .hist-item {
    grid-template-columns: var(--hist-gutter) 1fr;
    margin-bottom: 2rem;
  }

  .hist-dot {
    grid-column: 1;
  }

  .hist-item.is-left .hist-card,
  .hist-item.is-right .hist-card {
    grid-column: 2;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 0 0 0 1.1rem;
  }

  .hist-item.is-left .hist-card::after,
  .hist-item.is-right .hist-card::after {
    left: 0;
    right: auto;
    width: 1.1rem;
  }

  .hist-photo {
    width: 128px;
    height: 96px;
  }

  .hist-year {
    font-size: 1.2rem;
  }

  .hist-item.is-milestone .hist-year {
    font-size: 1.4rem;
  }
}

@media (max-width: 520px) {
  .hist-photo {
    width: 96px;
    height: 74px;
  }

  .hist-card {
    gap: 0.85rem;
  }

  .hist-title {
    font-size: 0.94rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hist-photo img {
    transition: none;
  }
}

/* Les étapes « à gauche » déclarent leur carte en colonne 1 alors que le losange
   occupe déjà la colonne 2 : l'auto-placement CSS ne revient jamais en arrière
   et poussait la carte sur une 2e ligne (losange collé en haut, item 10px plus
   haut). On force tout le monde sur la même ligne. */
.hist-item > * {
  grid-row: 1;
}

/* Le connecteur est ancré sur la CARTE, pas sur l'item : sans position:relative
   ici, il se calait sur le bord de la colonne opposée. */
.hist-card {
  position: relative;
}

/* L'intro est un bloc « constrained » : WP la centre en !important, elle ne
   s'alignait donc pas sur le h2 de la section. */
body .hist-band > .hist-intro {
  margin-left: max(0px, calc((100% - var(--content-width, 1140px)) / 2)) !important;
  margin-right: auto !important;
}

/* WP applique padding-left:34px à tout <ol> de contenu, avec une règle plus
   spécifique que notre padding:0 : la grille se retrouvait décalée de 34px
   vers la droite alors que l'axe reste à 50% -> losanges à côté du filet. */
body .hist-timeline {
  padding-left: 0 !important;
  list-style: none;
}

/* =====================================================
   /prestations/ — section « Trois expertises, un interlocuteur » (31/07)
   Les cartes y étaient restées NOIRES avec le picto en absolu dans le coin
   haut-droit, alors que l'accueil avait été repassé (v3.21.x) en cartes
   claires à picto centré au-dessus du titre. Demande client : aligner
   /prestations/ sur ce traitement.
   La section est en lux-section-alt (fond gris) -> cartes blanches, comme la
   bande « Nos prestations » de l'accueil.
   ===================================================== */
body.page-id-21 .presta-card {
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.12);
  box-shadow: 0 14px 35px rgba(10, 10, 10, 0.08);
  color: var(--muted);
}

/* Pas de reflet lumineux sur fond clair */
body.page-id-21 .presta-card::after {
  content: none;
}

/* Le picto : centré au-dessus du titre, plus dans le coin */
body.page-id-21 .presta-icon {
  position: static;
  width: 52px;
  margin: 0 auto 1.1rem !important;
  opacity: 1;
}

body.page-id-21 .presta-card:hover .presta-icon {
  transform: none;
  filter: none;
}

body.page-id-21 .presta-card h3 {
  color: var(--ink);
  text-align: center;
  padding-right: 0;
  border-bottom: none;
  padding-bottom: 0.35rem;
}

/* Le titre du pack « tout-en-un » est un h2, pas un h3 : la regle ci-dessus
   ne l'atteignait pas et « body .presta-card .pack-title { color:#fff } »
   continuait de s'appliquer sur une carte devenue blanche -> titre invisible.
   Signale par le client le 17/08. */
body.page-id-21 .presta-card .pack-title {
  color: var(--ink);
}

body.page-id-21 .presta-list li {
  border-bottom-color: rgba(10, 10, 10, 0.08);
}

body.page-id-21 .presta-list strong {
  color: var(--ink);
}

body.page-id-21 .presta-list span {
  color: var(--muted);
}

body.page-id-21 .presta-note {
  color: var(--muted);
}

body.page-id-21 .presta-price {
  color: var(--ink);
}

@media (hover: hover) {
  body.page-id-21 .presta-card:hover {
    transform: translateY(-8px);
    border-color: var(--gold);
    box-shadow: 0 22px 50px rgba(10, 10, 10, 0.14);
  }
}

/* ---------- Formulaire en bas des pages Prestations (31/07) ----------
   La bande finale garde son titre et son accroche, mais le bouton « devis »
   qui renvoyait vers /contact/ est remplacé par le formulaire lui-même. */
.presta-form {
  max-width: 760px;
  margin-inline: auto !important;
  text-align: left;
  margin-top: 2.2rem;
  padding: 2.2rem 2rem 2rem;
  border-radius: 18px;
}

.presta-form-tel {
  margin-top: 1.6rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.72);
}

.presta-form-tel a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(217, 180, 33, 0.45);
}

.presta-form-tel a:hover {
  color: #fff;
  border-bottom-color: #fff;
}

@media (max-width: 620px) {
  .presta-form {
    padding: 1.6rem 1.2rem 1.4rem;
  }
}

/* Le prix restait aligné à gauche alors que picto, titre et bouton sont centrés */
body.page-id-21 .presta-price {
  text-align: center;
}

/* =====================================================
   Sous-pages Prestations (31/07) — demandes client
   1. Les 3 cartes tarif passent sur fond NOIR :
      « Tarif de la vacation » (149, .tarif-highlight),
      « Tarif indicatif » (150, .tarif-dark, sticky),
      « Tarif » (151, .tarif-card, sticky).
   2. Les mini-cartes .icon-card des 3 sous-pages sont centrées.
   3. « Un pilotage adapté à chaque opération » (151) : cartes blanches.
   ⚠️ Ne PAS toucher aux .icon-card de /tarifs/ : le client y a explicitement
   demandé l'icône À GAUCHE du titre (29/07). D'où le scope par page.
   ===================================================== */

/* ---------- 1. Cartes tarif sur fond noir ---------- */
.tarif-highlight,
.tarif-dark,
.tarif-card {
  background: linear-gradient(165deg, #1A1712 0%, #0B0A09 60%);
  border: 1px solid rgba(217, 180, 33, 0.3);
  color: rgba(255, 255, 255, 0.76);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.tarif-highlight p,
.tarif-dark p,
.tarif-card p {
  color: rgba(255, 255, 255, 0.76);
}

.tarif-highlight .overline,
.tarif-dark .overline,
.tarif-card .overline {
  color: var(--gold);
}

.tarif-highlight .tarif-price,
.tarif-dark .tarif-price,
.tarif-card .tarif-price {
  color: #fff;
}

.tarif-highlight .tarif-price em,
.tarif-dark .tarif-price em,
.tarif-card .tarif-price em,
.tarif-highlight .tarif-price small,
.tarif-dark .tarif-price small,
.tarif-card .tarif-price small {
  color: var(--gold);
}

.tarif-highlight .tarif-desc,
.tarif-dark .tarif-desc,
.tarif-card .tarif-desc {
  color: rgba(255, 255, 255, 0.68);
}

/* L'icône du bandeau « Tarif indicatif » (badge or pâle sur fond clair) */
.tarif-highlight .icon-box,
.tarif-dark .icon-box,
.tarif-card .icon-box {
  background: rgba(217, 180, 33, 0.14);
  color: var(--gold);
}

/* Séparateur interne */
.tarif-highlight hr,
.tarif-dark hr,
.tarif-card hr,
.tarif-highlight .wp-block-separator,
.tarif-dark .wp-block-separator,
.tarif-card .wp-block-separator {
  border-color: rgba(255, 255, 255, 0.16);
  background-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.16);
}

/* Le bouton contour était pensé pour un fond clair : encre sur blanc.
   Sur fond noir il devient invisible -> variante claire. */
.tarif-highlight .is-style-btn-outline .wp-block-button__link,
.tarif-dark .is-style-btn-outline .wp-block-button__link,
.tarif-card .is-style-btn-outline .wp-block-button__link {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  background: transparent;
}

.tarif-highlight .is-style-btn-outline .wp-block-button__link:hover,
.tarif-dark .is-style-btn-outline .wp-block-button__link:hover,
.tarif-card .is-style-btn-outline .wp-block-button__link:hover {
  color: var(--ink);
  background: #fff;
  border-color: #fff;
}

/* ---------- 2. Mini-cartes centrées (sous-pages Prestations) ---------- */
body.page-id-149 .icon-card,
body.page-id-150 .icon-card,
body.page-id-151 .icon-card {
  text-align: center;
}

body.page-id-149 .icon-card .icon-box,
body.page-id-150 .icon-card .icon-box,
body.page-id-151 .icon-card .icon-box,
body.page-id-149 .icon-card .num-badge,
body.page-id-150 .icon-card .num-badge,
body.page-id-151 .icon-card .num-badge {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 3. « Un pilotage adapté à chaque opération » (151) ---------- */
body.page-id-151 .icon-card.icon-card-gray {
  background: #fff;
  border-color: var(--border);
  box-shadow: 0 10px 26px rgba(10, 10, 10, 0.05);
}

/* =====================================================
   Blog (31/07) — demandes client
   ===================================================== */

/* ---------- Sommaire dans la marge, texte recentré ----------
   Le sommaire occupait une colonne À L'INTÉRIEUR de la colonne de lecture :
   le texte de l'article s'en trouvait repoussé vers la droite et n'était plus
   centré dans la page. On fait déborder la grille vers la gauche pour que le
   corps de l'article retrouve exactement la largeur/position qu'il a sur une
   page sans sommaire.
   Seuil 1330px = largeur en-dessous de laquelle la marge gauche ne suffit plus
   à loger le sommaire (colonne de lecture 730px + 290px de sommaire). */
@media (min-width: 1330px) {
  .ac-toc-wrap {
    grid-template-columns: 250px minmax(0, 1fr);
    column-gap: 40px;
    margin-left: -290px;
    width: calc(100% + 290px);
  }
}

/* ---------- Gras réel dans les articles ----------
   ⚠️ La Futura LT auto-hébergée n'a AUCUN fichier gras (Light 300 + Book 400
   seulement) et le navigateur ne synthétise rien tant que la @font-face déclare
   une plage : les <strong> des articles importés du Wix rendaient donc
   exactement comme du texte normal (largeur identique au pixel près, mesuré).
   Passer la police à un poids unique déclencherait la synthèse mais rendrait
   gras d'un coup tous les 500/600 du site. On épaissit donc le trait
   uniquement là où le gras est voulu. */
.single-post .entry-content strong,
.single-post .entry-content b,
.single-post .entry-content th {
  font-weight: 400;
  -webkit-text-stroke: 0.42px currentColor;
  color: var(--ink);
}

/* Dans un tableau ou sur fond sombre, on garde la couleur héritée */
.single-post .entry-content .band-dark strong {
  color: inherit;
}

/* ---------- Partage de l'article ---------- */
.ac-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 3rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--border);
}

.ac-share-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin: 0 0.4rem 0 0;
}

.ac-share a,
.ac-share button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease,
    transform 0.35s var(--ease-lux);
}

.ac-share svg {
  width: 19px;
  height: 19px;
  display: block;
}

@media (hover: hover) {
  .ac-share a:hover,
  .ac-share button:hover {
    color: var(--ink);
    background: var(--gold);
    border-color: var(--gold);
    transform: translateY(-2px);
  }
}

.ac-share a:focus-visible,
.ac-share button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Retour visuel du bouton « copier le lien » */
.ac-share .ac-share-copied {
  background: var(--gold);
  border-color: var(--gold);
}

.ac-share-toast {
  font-size: 0.82rem;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ac-share-toast.is-visible {
  opacity: 1;
}

@media (max-width: 620px) {
  .ac-share {
    gap: 0.55rem;
  }
  .ac-share a,
  .ac-share button {
    width: 40px;
    height: 40px;
  }
}

/* Les liens de partage héritaient du style de lien de contenu (doré + souligné,
   règle plus spécifique) : ils ressortaient dorés au lieu de noirs. */
body .ac-share a,
body .ac-share a:visited {
  color: var(--ink) !important;
  text-decoration: none;
  border: 1px solid var(--border);
}

@media (hover: hover) {
  body .ac-share a:hover {
    color: var(--ink) !important;
    background: var(--gold);
    border-color: var(--gold);
  }
}

/* =====================================================
   /liens-utiles/ (31/07) — 50 ressources officielles reprises du Wix
   ===================================================== */
.liens-band .liens-intro {
  max-width: 62ch;
  margin-top: 0.8rem;
  color: var(--muted);
}

.liens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.1rem;
  margin-top: 2.4rem;
}

.lien-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem 1.4rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none !important;
  transition: border-color 0.35s ease, box-shadow 0.4s ease, transform 0.4s var(--ease-lux);
}

.lux-section-alt .lien-card {
  background: #fff;
}

.lien-nom {
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ink);
}

.lien-desc {
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--muted);
}

.lien-host {
  margin-top: 0.35rem;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.lien-host::after {
  content: " \2197";
}

@media (hover: hover) {
  .lien-card:hover {
    border-color: var(--gold);
    box-shadow: 0 16px 38px rgba(10, 10, 10, 0.09);
    transform: translateY(-3px);
  }
}

.lien-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Intro de section alignée sur le titre (le layout constrained la centrait) */
body .liens-band > .liens-intro {
  margin-left: max(0px, calc((100% - var(--content-width, 1140px)) / 2)) !important;
  margin-right: auto !important;
}

/* =====================================================
   Simulateurs (31/07) — prefixe .simx- pour ne pas entrer en conflit
   avec le simulateur d'honoraires existant (prefixe .sim-).
   ===================================================== */
.simx-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 2.4rem;
  align-items: start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2.2rem;
  box-shadow: var(--shadow-card);
}

.simx-form {
  display: grid;
  gap: 1.15rem;
}

.simx-field {
  display: grid;
  gap: 0.35rem;
}

.simx-label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.simx-unit {
  color: var(--muted);
  letter-spacing: 0.08em;
}

.simx-input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  min-height: 44px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.simx-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(217, 180, 33, 0.16);
}

.simx-checks {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.15rem;
}

.simx-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
  min-height: 30px;
}

.simx-check input {
  margin-top: 0.2rem;
  accent-color: var(--gold);
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.simx-help {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
}

/* ---------- Résultat ---------- */
.simx-result {
  background: linear-gradient(165deg, #1A1712 0%, #0B0A09 60%);
  border: 1px solid rgba(217, 180, 33, 0.3);
  border-radius: 14px;
  padding: 1.9rem 1.7rem;
  position: sticky;
  top: calc(var(--nav-h, 74px) + 20px);
}

.simx-res-label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.simx-res-value {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.15;
  color: #fff;
}

.simx-sep {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.68em;
  padding: 0 0.15em;
}

.simx-detail {
  margin: 1.5rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 1rem;
  display: grid;
  gap: 0.5rem;
}

.simx-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.simx-row dt {
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
}

.simx-row dd {
  margin: 0;
  font-size: 0.9rem;
  color: #fff;
  text-align: right;
  white-space: nowrap;
}

.simx-alerte,
.simx-note,
.simx-warn {
  margin: 1.1rem 0 0;
  font-size: 0.83rem;
  line-height: 1.55;
}

.simx-alerte {
  color: var(--gold);
  border-left: 2px solid var(--gold);
  padding-left: 0.85rem;
}

.simx-note {
  color: rgba(255, 255, 255, 0.7);
}

.simx-warn {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.76rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 0.9rem;
}

.simx-cta {
  margin-top: 1.4rem;
}

.simx-btn {
  display: inline-block;
  background: var(--gold);
  color: var(--ink) !important;
  text-decoration: none !important;
  font-size: 0.92rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  min-height: 44px;
  line-height: 1.6;
  transition: background-color 0.3s ease, transform 0.3s var(--ease-lux);
}

@media (hover: hover) {
  .simx-btn:hover {
    background: #fff;
    transform: translateY(-2px);
  }
}

@media (max-width: 900px) {
  .simx-card {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    padding: 1.5rem;
  }
  .simx-result {
    position: static;
  }
}

/* ---------- Grille du hub ---------- */
.simx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.3rem;
  margin-top: 2.6rem;
}

.simx-tile {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.6rem 1.7rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none !important;
  transition: border-color 0.35s ease, box-shadow 0.4s ease, transform 0.4s var(--ease-lux);
}

.simx-tile-num {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--gold-dark);
}

.simx-tile-titre {
  font-family: var(--font-display);
  font-size: 1.18rem;
  line-height: 1.3;
  color: var(--ink);
}

.simx-tile-desc {
  font-size: 0.89rem;
  line-height: 1.55;
  color: var(--muted);
}

.simx-tile-go {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.simx-tile-go::after { content: " \2192"; }

@media (hover: hover) {
  .simx-tile:hover {
    border-color: var(--gold);
    box-shadow: 0 18px 42px rgba(10, 10, 10, 0.1);
    transform: translateY(-4px);
  }
}

/* =====================================================
   /documents-cerfa/ (31/07) — telechargement des formulaires
   ===================================================== */
.doc-band .doc-intro {
  max-width: 62ch;
  margin-top: 0.8rem;
  color: var(--muted);
}

.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1.2rem;
  margin-top: 2.4rem;
}

.doc-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.5rem 1.6rem 1.4rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.35s ease, box-shadow 0.4s ease;
}

.doc-num {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.doc-titre {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.32;
  color: var(--ink);
}

.doc-desc {
  margin: 0;
  font-size: 0.89rem;
  line-height: 1.55;
  color: var(--muted);
}

.doc-quand {
  margin: 0.15rem 0 0;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--ink);
}

.doc-quand span {
  color: var(--gold-dark);
  letter-spacing: 0.06em;
}

.doc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 1rem;
}

.doc-dl {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ink);
  color: #fff !important;
  text-decoration: none !important;
  font-size: 0.86rem;
  padding: 0.62rem 1.1rem;
  border-radius: 999px;
  min-height: 44px;
  line-height: 1.5;
  transition: background-color 0.3s ease, transform 0.3s var(--ease-lux);
}

.doc-poids {
  font-size: 0.76rem;
  opacity: 0.6;
}

.doc-lire {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dark) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(217, 180, 33, 0.45);
  padding-bottom: 2px;
}

@media (hover: hover) {
  .doc-card:hover {
    border-color: var(--gold);
    box-shadow: 0 16px 38px rgba(10, 10, 10, 0.08);
  }
  .doc-dl:hover {
    background: var(--gold);
    color: var(--ink) !important;
    transform: translateY(-2px);
  }
  .doc-lire:hover {
    color: var(--ink) !important;
    border-bottom-color: var(--ink);
  }
}

.doc-maj {
  padding-top: 0 !important;
}

.doc-note {
  max-width: 78ch;
  margin: 0 auto;
  padding: 1.3rem 1.5rem;
  background: var(--bg-alt);
  border-left: 2px solid var(--gold);
  border-radius: 4px 12px 12px 4px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink);
}

/* Intros de section alignées sur leur titre (le layout constrained les centrait) */
body .doc-band > .doc-intro {
  margin-left: max(0px, calc((100% - var(--content-width, 1140px)) / 2)) !important;
  margin-right: auto !important;
}

/* =====================================================
   Section « Qui sommes-nous » (accueil + agence), reprise du mockup Next.js :
   portrait + 3 compteurs animés, badges de valeurs. (31/07)
   ===================================================== */
.cab-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 1.4rem;
  padding: 1.1rem 0.9rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.cab-stat {
  text-align: center;
}

/* Les compteurs reprennent .stat-num (anime au scroll par js/reveal.js) mais
   sur fond clair : la version du ruban noir de l'accueil est en blanc. */
.cab-stats .stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  line-height: 1.1;
  color: var(--gold-dark);
  margin: 0;
}

.cab-stats .stat-label {
  margin: 0.3rem 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.cab-valeurs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.6rem;
}

.cab-valeur {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: var(--gold-soft);
  border-radius: 999px;
  padding: 0.42rem 0.9rem;
}

@media (max-width: 620px) {
  .cab-stats {
    gap: 0.45rem;
    padding: 0.9rem 0.6rem;
  }
  .cab-stats .stat-label {
    font-size: 0.66rem;
  }
}

/* =====================================================
   /guides/ (31/07) — guides et check-lists gratuits
   ===================================================== */
.guide-band .guide-intro {
  max-width: 64ch;
  margin-top: 0.8rem;
  color: var(--muted);
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.2rem;
  margin-top: 2.4rem;
}

.guide-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.5rem 1.6rem 1.4rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.35s ease, box-shadow 0.4s ease, transform 0.4s var(--ease-lux);
}

.guide-tag {
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: var(--gold-soft);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}

.guide-titre {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.32;
  color: var(--ink);
}

.guide-desc {
  margin: 0;
  font-size: 0.89rem;
  line-height: 1.55;
  color: var(--muted);
}

.guide-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin-top: auto;
  padding-top: 1.1rem;
}

.guide-dl {
  display: inline-flex;
  align-items: center;
  background: var(--ink);
  color: #fff !important;
  text-decoration: none !important;
  font-size: 0.86rem;
  padding: 0.62rem 1.25rem;
  border-radius: 999px;
  min-height: 44px;
  line-height: 1.6;
  transition: background-color 0.3s ease, transform 0.3s var(--ease-lux);
}

.guide-sim {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dark) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(217, 180, 33, 0.45);
  padding-bottom: 2px;
}

.guide-sim::after { content: " \2192"; }

@media (hover: hover) {
  .guide-card:hover {
    border-color: var(--gold);
    box-shadow: 0 16px 38px rgba(10, 10, 10, 0.08);
    transform: translateY(-3px);
  }
  .guide-dl:hover {
    background: var(--gold);
    color: var(--ink) !important;
  }
  .guide-sim:hover {
    color: var(--ink) !important;
    border-bottom-color: var(--ink);
  }
}

/* Intro de section alignée sur le titre (le layout constrained la centrait) */
body .guide-band > .guide-intro {
  margin-left: max(0px, calc((100% - var(--content-width, 1140px)) / 2)) !important;
  margin-right: auto !important;
}
/* =====================================================================
   Simulateurs — ajouts du 07/08/2026 (5 chantiers fusionnes).
   Marqueur « estimation cabinet » : definition UNIQUE ci-dessous,
   les quatre variantes livrees par les agents ont ete ramenees a une.
   ===================================================================== */

.simx-estim {
  display: inline-block;
  vertical-align: middle;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold-dark);
  background: rgba(217, 180, 33, 0.14);
  border: 1px solid rgba(217, 180, 33, 0.45);
  border-radius: 999px;
  padding: 0.08em 0.55em;
  margin-left: 0.35em;
  line-height: 1.5;
  cursor: help;   /* l'agent etudes pose un title explicatif */
}

.simx-result .simx-estim {
  color: var(--gold);
  background: rgba(217, 180, 33, 0.16);
  border-color: rgba(217, 180, 33, 0.4);
}


/* ---- ERP ---- */
/* =====================================================================
   FRAGMENT style.css — a ajouter dans la section « Simulateurs (31/07) »,
   apres la regle .simx-row dd.
   BLOC PARTAGE : .simx-estim et .simx-precision sont susceptibles d'etre
   ecrits aussi par l'agent du simulateur « energie ». Dedoublonner a la
   fusion (une seule definition, identique).
   ===================================================================== */

/* Meme badge sur fond clair (formulaire, aides sous un champ). */
.simx-form .simx-estim,
.simx-help .simx-estim {
  color: var(--gold-dark);
  background: rgba(217, 180, 33, 0.14);
  border-color: rgba(217, 180, 33, 0.5);
}

/* Precision de bareme affichee sous le libelle d'une ligne de resultat
   (tranche de surface appliquee, prix au m2, coefficient). Le <dd> voisin
   est en white-space: nowrap : tout texte long doit passer ici. */
.simx-precision {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.74rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.42);
}

.simx-form .simx-precision {
  color: var(--muted);
}

@media (max-width: 480px) {
  .simx-estim {
    margin-left: 0;
    margin-top: 0.25rem;
    display: table;
  }
}


/* ---- Renovation energetique ---- */
/* =====================================================================
   FRAGMENT CSS — a ajouter dans theme-src/style.css, a la fin de la
   section « Simulateurs (31/07) », juste avant « Grille du hub ».
   Prefixe .simx- comme le reste de la section.

   Quatre marqueurs, tous utilises a la fois dans le formulaire (fond
   clair) et dans le panneau de resultat (fond sombre) : chaque regle a
   donc sa variante `.simx-result …`.
   ===================================================================== */

/* ---------- Aide contextuelle sous une case a cocher -----------------
   Rendue par la branche `checkboxes` de champHtml() quand l'option porte
   une propriete `aide`. */
.simx-check-aide {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}

/* ---------- Quantite retenue pour un poste (ex. « 120 m2 de facade ») */
.simx-qte {
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.42);
  white-space: nowrap;
}

.simx-form .simx-qte {
  color: var(--muted);
}

/* ---------- Marqueur « hors taxes » ----------------------------------
   Les honoraires d'architecte suivent les grilles publiees sur /tarifs/,
   qui sont en HT, alors que tous les postes de travaux sont en TTC. */
.simx-ht {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 3px;
  padding: 0 0.35em;
  margin-left: 0.35em;
}

.simx-form .simx-ht {
  color: var(--muted);
  border-color: var(--border);
}

/* La liste de resultats du simulateur energie compte jusqu'a quinze
   lignes : on autorise le panneau a defiler plutot qu'a depasser
   l'ecran quand il est colle en haut. */
@media (min-width: 901px) {
  .simx-result {
    max-height: calc(100vh - var(--nav-h, 74px) - 40px);
    overflow-y: auto;
  }
}


/* ---- Amenagements exterieurs ---- */
/* =====================================================================
   FRAGMENT style.css — simulateur « amenagements »
   A coller dans theme-src/style.css, section « Simulateurs (31/07) »,
   apres la regle .simx-help et avant « ---------- Resultat ---------- ».
   Aucune regle existante n'est modifiee : ce sont 4 classes nouvelles.
   ===================================================================== */

/* ---------- Intertitre de section (type de champ « groupe ») ----------
   Decoupe un formulaire long en familles de travaux. */
.simx-form .simx-groupe {
  margin: 1.6rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.simx-form > .simx-groupe:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.simx-groupe-aide {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
  color: var(--muted);
}

/* ---------- Fourchette affichee dans un libelle de case a cocher ---------- */
.simx-gamme {
  color: var(--muted);
  font-size: 0.85em;
  white-space: nowrap;
}


/* ---- Etudes techniques ---- */
/* =====================================================================
   FRAGMENT style.css — Simulateurs d'etudes techniques (07/08)
   A ajouter A LA FIN de la section « Simulateurs (31/07) », prefixe .simx-.
   AUCUNE regle existante n'est modifiee : tout est en ajout.
   La seule regle qui touche un selecteur deja present (.simx-row dt) est
   une SURCHARGE de specificite superieure, necessaire pour que le motif de
   declenchement passe a la ligne sous le libelle.
   ===================================================================== */

/* ---------- Titre de groupe dans le detail du resultat ---------- */
.simx-detail .simx-groupe {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 0.7rem;
  margin-top: 0.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.simx-detail .simx-row:first-child .simx-groupe {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

/* Le libelle d'une etude porte un badge + un motif sur plusieurs lignes :
   il doit pouvoir occuper la largeur restante et se replier. */
.simx-detail .simx-row dt {
  flex: 1 1 auto;
  min-width: 0;
}

.simx-detail .simx-row dd {
  flex: 0 0 auto;
}

/* ---------- Badges de statut ---------- */
.simx-tag {
  display: inline-block;
  vertical-align: 0.08em;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.3em 0.55em;
  border-radius: 999px;
  border: 1px solid transparent;
  margin-right: 0.4em;
  white-space: nowrap;
}

.simx-tag--obl {
  background: var(--gold);
  color: #17140F;
}

.simx-tag--cons {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9);
}

.simx-tag--ctx {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- Poste dû mais non chiffre ---------- */
.simx-devis {
  font-size: 0.82rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- Motif de declenchement de l'etude ---------- */
.simx-why {
  display: block;
  margin-top: 0.28rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.42);
}

@media (max-width: 520px) {
  .simx-detail .simx-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }
  .simx-detail .simx-row dd {
    text-align: left;
  }
}


/* ---- Taxes d'urbanisme (recherche de commune) ---- */
/* =====================================================
   Simulateur « Taxes d'urbanisme » — champ de type « commune »
   (autocompletion). A ajouter a la suite de la section
   « Simulateurs (31/07) » de theme-src/style.css.
   Prefixe .simx-ac- : aucune regle existante n'est modifiee.
   ===================================================== */
.simx-ac {
  position: relative;
}

.simx-ac-input::placeholder {
  color: var(--muted);
  opacity: 0.75;
}

/* Liste de suggestions : elle flotte au-dessus du formulaire.
   Le champ vit dans la colonne de gauche de .simx-card, la colonne
   de droite (.simx-result) est en position: sticky et cree un contexte
   d'empilement : z-index eleve pour rester au-dessus sur mobile. */
.simx-ac-list {
  position: absolute;
  z-index: 30;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 17rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 16px 38px rgba(10, 10, 10, 0.14);
}

.simx-ac-list[hidden] {
  display: none;
}

.simx-ac-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.5rem 0.6rem;
  border-radius: 7px;
  cursor: pointer;
  min-height: 40px;
}

.simx-ac-item.is-actif,
.simx-ac-item:hover {
  background: rgba(217, 180, 33, 0.14);
}

.simx-ac-nom {
  font-size: 0.94rem;
  line-height: 1.35;
  color: var(--ink);
}

.simx-ac-meta {
  flex: 0 0 auto;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}

/* Etat du chargement a la demande du fichier des communes */
.simx-ac-etat {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--muted);
  min-height: 1.1em;
}

.simx-ac-etat:empty {
  display: none;
}

.simx-ac[data-etat="chargement"] .simx-ac-etat {
  color: var(--gold-dark);
}

.simx-ac[data-etat="chargement"] .simx-ac-etat::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.45em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: -0.05em;
  animation: simx-ac-spin 0.75s linear infinite;
}

@keyframes simx-ac-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .simx-ac[data-etat="chargement"] .simx-ac-etat::before {
    animation: none;
  }
}

/* Repli : le fichier n'a pas pu etre charge, la saisie manuelle prend
   le relais. Le message doit se voir sans etre alarmant. */
.simx-ac[data-etat="erreur"] .simx-ac-etat {
  color: #9a5b12;
}

.simx-ac[data-etat="erreur"] .simx-ac-input {
  border-color: rgba(154, 91, 18, 0.4);
}

/* Incise « (taux legal) » dans le panneau de resultat sombre */
.simx-millesime {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85em;
}

/* La note du panneau contient un 1<sup>er</sup> janvier */
.simx-note sup {
  font-size: 0.72em;
  vertical-align: super;
  line-height: 0;
}

/* =====================================================
   Bande « Ils nous ont fait confiance » (14/08)
   Carrousel des logos clients sur fond noir. Le markup est produit par
   inc/clients.php (shortcode [clients_confiance]) depuis la mediatheque.

   Deux rendus, parce que tous les logos ne survivent pas au passage en blanc :
     .cli-item--blanc    aplat blanc, deja prepare dans le fichier image ;
     .cli-item--couleur  blason ou logo photographique conserve en couleur,
                         pose sur une pastille blanche (meme motif que les
                         badges de « Garanties & appartenances » sur /agence/).
   ===================================================== */
.clients-band {
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}

/* Pleine largeur d'ecran pour la piste, en-tete recentre */
body .clients-band > * {
  max-width: none !important;
}

body .clients-band .text-center {
  max-width: var(--content-width);
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 1.5rem;
}

.cli-viewport {
  margin-top: 2.6rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.cli-track {
  --cli-gap: 3.25rem;
  display: flex;
  align-items: center;
  width: max-content;
  gap: var(--cli-gap);
  animation: cli-scroll 70s linear infinite;
}

.cli-viewport:hover .cli-track,
.cli-viewport:focus-within .cli-track {
  animation-play-state: paused;
}

/* Une periode vaut une demi-piste PLUS une demi-gouttiere : la piste porte
   57 gouttieres pour 58 logos, sa moitie n'en compte donc que 28,5 alors
   qu'une copie en occupe 29. Sans ce rattrapage la boucle revient 26 px trop
   tot et le defilement saute a chaque tour. */
@keyframes cli-scroll {
  to { transform: translateX(calc(-50% - var(--cli-gap) / 2)); }
}

.cli-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 84px;
  text-decoration: none;
}

.cli-item img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 210px;
  object-fit: contain;
}

/* Les aplats blancs sont volontairement en retrait, et reviennent a pleine
   opacite au survol : c'est ce qui evite un mur de logos qui concurrence le
   titre de section. */
.cli-item--blanc img {
  opacity: 0.72;
  transition: opacity 0.35s ease;
}

.cli-item--blanc:hover img,
.cli-item--blanc:focus-visible img {
  opacity: 1;
}

/* Les logos fournis en couleur (blasons, logos photographiques) etaient
   presentes sur une pastille blanche pour rester lisibles. Le client a
   tranche le 17/08 : plus aucune couleur, nuances de gris sur la bande noire.
   Deux traitements, choisis PAR LOGO d'apres la mesure du fichier source
   (fond et luminance moyenne) — un seul filtre ne peut pas convenir aux deux
   familles :

   --gris    fond deja transparent et trace clair : desaturer suffit.
   --inverse fond opaque clair, trace sombre : la desaturation seule donnerait
             un rectangle blanc. L'inversion rend le trace clair, et le
             melange « screen » fait disparaitre le fond dans le noir de la
             bande (screen(noir, noir) = noir) tout en conservant le detail
             interne, ce qu'un aplat blanc detruirait. */
.cli-item--gris img,
.cli-item--inverse img {
  opacity: 0.78;
  transition: opacity 0.35s ease;
}

.cli-item--gris:hover img,
.cli-item--gris:focus-visible img,
.cli-item--inverse:hover img,
.cli-item--inverse:focus-visible img {
  opacity: 1;
}

.cli-item--gris img {
  filter: grayscale(1) brightness(1.15);
}

.cli-item--inverse img {
  filter: grayscale(1) invert(1);
  mix-blend-mode: screen;
}

/* Un logo cliquable doit se voir : le curseur ne suffit pas au clavier. */
a.cli-item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
  border-radius: 4px;
}

@media (max-width: 781px) {
  .cli-track { --cli-gap: 2.25rem; }
  .cli-item,
  .cli-item--couleur { height: 62px; }
  .cli-item img { max-width: 150px; }
  .cli-item--couleur img { max-width: 122px; }
}

/* Sans animation : les logos s'affichent simplement, en grille centree.
   La copie de la piste est masquee, sinon chaque client apparaitrait deux fois. */
@media (prefers-reduced-motion: reduce) {
  .cli-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 3rem;
  }

  .cli-track [aria-hidden="true"] {
    display: none;
  }
}