/* =============================================================
   Aplastic94 — Sections Gutenberg
   Règles CSS pour tous les styles du panneau "Style Aplastic94" :
   Hero · mat-card · Boite avantages · Section gris · FAQ · CTA
   ============================================================= */

/* ─── Montserrat auto-hébergée (variable font, subset latin) ───
   Remplace le <link> Google Fonts externe render-blocking.       */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/montserrat-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/montserrat-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── Sections parentes — supprime le margin-top du 1er enfant ─ */
/* Évite le double-espacement quand la section a un padding-top   */
.wp-block-group[style*="padding-top"] > .wp-block-heading:first-child,
.wp-block-group[style*="padding-top"] > .wp-block-paragraph:first-child,
.wp-block-group[style*="padding-top"] > .wp-block-group:first-child {
  margin-top: 0 !important;
}

/* ─── Hero Ressources (res-hero) — fond navy ────────────────── */
.res-hero {
  background-color: var(--c-navy);
  overflow: hidden;
  height: 450px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Groupe enfant : image ancrée à droite, contenu à gauche */
.res-hero > .wp-block-group {
  width: 100%;
  max-width: 1440px;
  height: 100%;
  margin: 0;
  padding: clamp(1rem, 3vw, 2rem);
  box-sizing: border-box;
  position: relative;
  background-size: auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
}
/* Dégradé : navy opaque à gauche → transparent à droite (révèle l'image) */
.res-hero > .wp-block-group::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--c-navy) 28%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}
/* Dégradé : transparent à gauche → navy opaque à droite */
.res-hero > .wp-block-group::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, var(--c-navy) 0%, transparent 5%);
  pointer-events: none;
  z-index: 0;
}
/* Contenu au-dessus du dégradé */
.res-hero > .wp-block-group > * {
  position: relative;
  z-index: 1;
}
.res-hero .svc-label {
  color: var(--c-teal) !important;
}
.res-hero h1 {
  color: var(--c-white) !important;
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
  line-height: 1.15 !important;
  margin: 0 0 1.25rem !important;
}
.res-hero .hero-h1__accent {
  color: var(--c-teal) !important;
  font-style: italic;
}
.res-hero .svc-hero__lead {
  color: rgba(255, 255, 255, 0.80) !important;
}
/* Cartes ressources — grid plutôt que flex+align-items:stretch : le CSS
   natif du bloc columns (wp-block-columns-inline-css) impose déjà
   align-items:normal !important avec la même spécificité, résultat
   imprévisible selon l'ordre de chargement. La grille CSS n'a pas ce
   conflit et étire nativement chaque carte à la hauteur de sa ligne. */
.wp-block-columns:has(.res-card) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  align-items: stretch;
  gap: 2rem 1.5rem;
}
.wp-block-columns:has(.res-card) > .wp-block-column {
  flex-basis: auto !important;
  width: auto !important;
}
/* ─── .svc-cap-card : jamais stylée jusqu'ici (utilisée pour les 3
   mini-cartes avantages de .svc-what sur /applications/*, ET pour les
   grandes cartes comparatif matières de /ressources/guide-technique-
   plastique/) — d'où un rendu texte brut sans relief à ces deux endroits. */
.svc-cap-card {
  background: var(--c-white);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem !important;
  box-shadow: var(--shadow-card);
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
/* Rangée de cartes côte à côte (ex. guide-technique-plastique, chaque
   carte = une colonne) : grid plutôt que flex+align-items:stretch, pour
   les mêmes raisons que .res-card plus bas (conflit de spécificité avec
   le CSS natif du bloc columns). */
.wp-block-columns:has(> .wp-block-column.svc-cap-card) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2rem 1.5rem;
}
.wp-block-columns:has(> .wp-block-column.svc-cap-card) > .wp-block-column {
  flex-basis: auto !important;
  width: auto !important;
}
.wp-block-column.svc-cap-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Cartes empilées dans une seule colonne (ex. .svc-what sur /applications/) :
   pas de hauteur forcée (sinon la 1re carte s'étire sur toute la colonne et
   masque les suivantes) — juste un espace entre les cartes. */
.wp-block-group.svc-cap-card + .wp-block-group.svc-cap-card {
  margin-top: 1.25rem;
}
.svc-cap-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--c-teal);
}
.svc-cap-card__title,
.svc-cap-card h3,
.svc-cap-card h4 {
  color: var(--c-navy) !important;
  font-weight: 700 !important;
  margin: 0 0 0.75rem !important;
}
.svc-cap-card__desc,
.svc-cap-card p {
  color: var(--c-text-mid) !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
}
.svc-cap-card ul {
  margin: 0.5rem 0 1.25rem !important;
}
.svc-cap-card > a,
.svc-cap-card p:last-child a {
  margin-top: auto;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--c-teal-text);
}
.svc-cap-card a:hover { color: var(--c-fuchsia) !important; }
.res-card {
  background: var(--c-white);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem !important;
  box-shadow: var(--shadow-card);
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
}
.res-card a:last-child {
  margin-top: auto;
  padding-top: 1rem;
  display: inline-block;
}
.res-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(11, 61, 52, 0.4);
}
.res-card__icon {
  font-size: 2.25rem !important;
  line-height: 1 !important;
  margin: 0 0 1rem !important;
}
.res-card h3 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--c-navy) !important;
  margin: 0 0 0.5rem !important;
}
.res-card p {
  font-size: 0.875rem !important;
  color: var(--c-text-mid) !important;
  line-height: 1.6 !important;
  margin: 0 0 1.25rem !important;
}
.res-card a {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0B3D34;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.res-card:hover a { color: var(--c-fuchsia); }
/* Cartes blog */
.blog-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--trans), box-shadow var(--trans);
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.blog-card__img {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.blog-card__img .wp-block-image,
.blog-card__img figure {
  height: 100%;
  margin: 0;
  display: block;
}
.blog-card__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.blog-card:hover .blog-card__img img { transform: scale(1.05); }
.blog-card__body {
  padding: 1.25rem 1.5rem 1.5rem !important;
}
.blog-card__cat {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #0B3D34 !important;
  margin: 0 0 0.5rem !important;
}
.blog-card h3 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--c-navy) !important;
  margin: 0 0 0.5rem !important;
  line-height: 1.3 !important;
}
.blog-card p {
  font-size: 0.83rem !important;
  color: var(--c-text-mid) !important;
  line-height: 1.55 !important;
  margin: 0 0 1rem !important;
}
.blog-card a {
  font-size: 0.8rem; font-weight: 700;
  color: #0B3D34; text-decoration: none;
  text-transform: uppercase; letter-spacing: 0.05em;
}
/* Glossaire */
.glossary-letter {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: #0B3D34 !important;
  border-bottom: 3px solid #0B3D34;
  padding-bottom: 0.25rem !important;
  margin: 2rem 0 1rem !important;
}
.glossary-term {
  font-weight: 700 !important;
  color: var(--c-navy) !important;
  margin: 0 !important;
}
.glossary-def {
  color: var(--c-text-mid) !important;
  font-size: 0.9rem !important;
  margin: 0 0 1rem !important;
  padding-left: 1rem;
  border-left: 3px solid var(--c-border);
}
/* Normes table */
.normes-table {
  width: 100%;
  border-radius: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-card);
}
.normes-table table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.wp-block-table.normes-table thead {
  border-bottom: none;
}
.wp-block-table.normes-table th,
.wp-block-table.normes-table td {
  border: none;
}
.normes-table th {
  background: var(--c-navy);
  color: #fff;
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.normes-table td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
  line-height: 1.5;
  background: #fff;
}
.normes-table tr:last-child td { border-bottom: none; }
.normes-table tr:hover td { background: rgba(158, 27, 90, 0.05); }
@media (max-width: 767px) {
  .normes-table table { min-width: 560px; }
}
/* Responsive res-hero */
@media (max-width: 767px) {
  .res-hero { background-image: none !important; }
}

/* ─── Hero (svc-hero) ───────────────────────────────────────── */

/* Groupe enfant : image de fond, hauteur = 100% du parent, pleine largeur ≤ 1440px.
   margin:0 auto (et non margin:0) pour centrer cette colonne de contenu dans le
   bandeau plein écran — sans ça le texte se retrouve plaqué au bord gauche du
   viewport au lieu d'être aligné avec le reste des sections (colonne 1440px).
   Important : l'image de fond doit être posée sur CE groupe enfant (svc-hero__inner),
   jamais sur .svc-hero lui-même (alignfull, 100vw) — sinon elle s'ancre au bord réel
   de l'écran au lieu du bord de la colonne de contenu, et se désolidarise du texte
   sur les écrans larges. */
.svc-hero > .wp-block-group {
  box-sizing: border-box;
  /* Image ancrée à droite, glisse vers la droite quand la largeur diminue */
  background-size: auto 100% !important;
  background-position: right center !important;
  /* Quand ce groupe porte l'image de fond via l'attribut de bloc natif
     (style.background.backgroundImage), le core lui ajoute la classe
     has-background et donc son padding par défaut :where(.wp-block-group.
     has-background){padding:1.25em 2.375em}, ce qui décale le texte vers
     la droite par rapport au reste des sections. */
  padding: 0;
  /* Sans hauteur explicite, ce groupe (qui porte l'image de fond ET le texte)
     ne prend que la hauteur de son propre contenu texte — background-size:
     auto 100% se calant alors sur cette hauteur de texte, pas sur les 360px
     du bandeau .svc-hero. Résultat observé (page "Décor événementiel", texte
     hero plus court) : l'image apparaît petite, flottant dans une zone plus
     claire au milieu du bandeau gris, au lieu de remplir toute sa hauteur.
     min-height aligné sur le .svc-hero > style.dimensions.minHeight (360px
     partout sur le site, cf. audit 2026-08-08) force ce groupe à occuper
     toute la hauteur du bandeau quelle que soit la longueur du texte. */
  min-height: 360px;
}
.svc-hero__inner {

  align-items: center !important;
}
.svc-hero__text {
  padding-right: 2rem;
}
@media (min-width: 768px) {
  /* L'image de fond est ancrée à droite en largeur fixe (background-size:
     auto 100%, voir plus haut) — sans limite de largeur, un texte un peu
     long s'étend sous l'image et devient illisible. On plafonne la colonne
     de texte pour qu'elle reste dans la moitié gauche du bandeau. */
  .svc-hero__text { max-width: 600px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .svc-hero__text { max-width: 380px; }
}
.svc-label {
  display: inline-block;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-fuchsia) !important;
  padding: 0;
  margin: 0 0 1rem !important;
}
.svc-hero h1 {
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
  line-height: 1.15 !important;
  color: var(--c-navy) !important;
  margin: 0 0 1.25rem !important;
}
.text-accent {
  color: var(--c-fuchsia);
}
.svc-hero__lead {
  font-size: 1.05rem !important;
  color: var(--c-text-mid) !important;
  line-height: 1.7 !important;
  margin: 0 0 2rem !important;
}
.svc-hero__cover {
  border-radius: var(--radius-xl) !important;
  overflow: hidden;
}
.svc-hero__placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 0.875rem !important;
  margin: 0 !important;
}

/* ─── mat-cat-grid (grille dynamique "Nos matières") ──────────
   Grille générée par [aplastic94_material_categories] (voir functions.php),
   plus la carte CTA statique "Toutes nos matières" à la suite. Mêmes leçons
   que .prod-cat-grid : min-width:0 + box-sizing:border-box pour empêcher le
   contenu (image) de forcer une largeur de carte supérieure au flex-basis. */
/* !important sur gap : depuis que .mat-cat-grid est un wp:group en layout
   "flex" (nos-matieres, 2026-08-08), la règle native Gutenberg
   ":root :where(.is-layout-flex){gap:0px}" a la même spécificité qu'un
   simple sélecteur de classe et l'emportait selon l'ordre de chargement,
   collant les cartes les unes aux autres. */
.mat-cat-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem !important;
}
.mat-cat-grid .mat-card {
  flex: 1 1 calc(25% - 0.6rem);
  max-width: calc(25% - 0.6rem);
  min-width: 0;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .mat-cat-grid .mat-card { flex-basis: calc(33.33% - 0.534rem); max-width: calc(33.33% - 0.534rem); }
}
@media (max-width: 600px) {
  .mat-cat-grid .mat-card { flex-basis: calc(50% - 0.4rem); max-width: calc(50% - 0.4rem); }
}
@media (max-width: 480px) {
  .mat-cat-grid .mat-card { flex-basis: 100%; max-width: 100%; }
}
.mat-card__img-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.mat-card__img-slot:hover img {
  transform: scale(1.07);
}

/* ─── mat-card (cartes matériaux) ──────────────────────────── */
.mat-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  /* La tuile "Toutes nos matières" porte has-background (couleur de fond en
     inline) : le core lui ajoute alors son padding par défaut
     :where(.wp-block-group.has-background){padding:1.25em 2.375em} (même
     piège que .svc-hero plus haut), qui décalait son image vers l'intérieur
     sur les 4 côtés au lieu de la laisser pleine largeur comme les autres
     cartes .mat-card. */
  padding: 0;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
  /* Pas de height:100% : une valeur explicite (non "auto") désactive
     align-items:stretch sur un enfant flex, chaque carte reprenait alors sa
     propre hauteur de contenu au lieu de s'aligner sur les autres cartes de
     sa ligne (visible sur la tuile "Toutes nos matières", plus haute que ses
     voisines). "auto" est la valeur qui déclenche le stretch. */
  height: auto;
  display: flex;
  flex-direction: column;
}
.mat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(109, 183, 178, 0.4);
}
.mat-card__img-slot {
  width: 100%;
  /* Hauteur fixe (pas aspect-ratio) : garder synchronisée avec
     .prod-card__media (index.css) — même hauteur de carte entre "Nos
     produits" (5 colonnes sur l'accueil) et "Nos matières" (4 colonnes),
     ce qu'un ratio ne peut pas garantir puisque les cartes n'ont pas la
     même largeur. */
  height: 180px;
  background: var(--c-border);
  flex-shrink: 0;
}
.mat-card .wp-block-image {
  margin: 0;
  flex-shrink: 0;
  overflow: hidden;
  cursor: zoom-in;
}
.mat-card .wp-block-image figure {
  height: 100%;
  margin: 0;
  display: block;
}
.mat-card .wp-block-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.mat-card .wp-block-image:hover img {
  transform: scale(1.07);
}
.mat-card__body {
  padding: 1rem 1rem 1.25rem !important;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.mat-card .wp-block-heading {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--c-navy) !important;
  line-height: 1.3 !important;
  margin: 0 0 0.4rem !important;
  min-height: calc(1.3em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Tuile "Toutes nos matières" (fond navy) : le !important ci-dessus écrasait
   la couleur blanche du titre définie en inline sur cette carte, le rendant
   invisible (texte navy sur fond navy). */
.mat-card.has-background .wp-block-heading {
  color: var(--c-white) !important;
}
.mat-card__desc {
  font-size: 0.82rem;
  color: var(--c-text-mid);
  line-height: 1.5;
  margin: 0 0 0.75rem !important;
  min-height: calc(1.5em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mat-card__cta {
  margin: auto 0 0 !important;
  text-align: left !important;
}
.mat-card__cta a {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--c-teal-text);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color var(--trans);
}
.mat-card:hover .mat-card__cta a {
  color: var(--c-fuchsia);
}
.mat-card__label {
  margin: 0 !important;
  padding: 0.9rem 1.1rem !important;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-navy);
  line-height: 1.45;
  border-top: 1px solid var(--c-border);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--trans), color var(--trans);
}
.svc-card.mat-card:hover .mat-card__label {
  background: rgba(109, 183, 178, 0.08);
  color: var(--c-teal-text);
}

/* ─── Nos réalisations (svc-cards-row) — cartes plus vivantes ── */
.svc-cards-row .wp-block-column:nth-child(4n+1) .svc-card { border-top: 3px solid var(--c-teal); }
.svc-cards-row .wp-block-column:nth-child(4n+2) .svc-card { border-top: 3px solid var(--c-fuchsia); }
.svc-cards-row .wp-block-column:nth-child(4n+3) .svc-card { border-top: 3px solid var(--c-gold); }
.svc-cards-row .wp-block-column:nth-child(4n+4) .svc-card { border-top: 3px solid var(--c-navy); }
.svc-cards-row .svc-card > .wp-block-image img {
  height: 220px;
  object-position: center 35%;
}

/* ─── Boite avantages (svc-why-box) ────────────────────────── */
.svc-why-section {
  padding: clamp(3rem, 8vw, 5rem) 0;
  background: #EFF3F7;
}
.svc-why-box {
  border-radius: var(--radius-xl) !important;
  padding: clamp(2rem, 5vw, 3.5rem) !important;
}
.svc-why-inner {
  align-items: center !important;
  gap: 2rem !important;
}
.svc-why-box h2 {
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  line-height: 1.2 !important;
  margin: 0 0 1rem !important;
  text-align: center !important;
}
.svc-why-text__lead {
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  opacity: 0.8;
  margin: 0 !important;
}
.svc-why-icons {
  gap: 0 !important;
}
.svc-why-icon-col {
  text-align: center;
  padding: 0 0.75rem;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.svc-why-icon-col:last-child { border-right: none; }
.svc-why-icon {
  font-size: 1.5rem !important;
  margin: 0 0 0.5rem !important;
  line-height: 1 !important;
}
.svc-why-icon-col h4 {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.35rem !important;
}
.svc-why-icon-col p {
  font-size: 1rem !important;
  color: rgba(157, 180, 200, 0.8) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* ─── Section fond gris (générique) ────────────────────────── */
.section-gray {
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  background: #EFF3F7;
}

/* ─── Section FAQ (svc-faq-section) ────────────────────────── */
.svc-faq-section {
  padding: clamp(3rem, 8vw, 5rem) 0;
  background: var(--c-white);
}
.svc-faq-section > .wp-block-group {
  margin-top: 60px;
  margin-bottom: 60px;
}

/* ── FAQ list : auto-formatage du 3e groupe (pas de classe à poser) ── */
.svc-faq-section > .wp-block-group > .wp-block-group {
  border-top: 1px solid var(--c-border);
  gap: 0 !important;
}
.svc-faq-section > .wp-block-group > .wp-block-group .wp-block-details {
  border-bottom: 1px solid var(--c-border);
  border-left: none !important;
  padding-left: 0 !important;
  transition: background var(--trans);
}
.svc-faq-section > .wp-block-group > .wp-block-group .wp-block-details:hover {
  background: rgba(109, 183, 178, 0.04);
  border-radius: 4px;
}
.svc-faq-section > .wp-block-group > .wp-block-group .wp-block-details summary {
  padding: 1.1rem 0;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--c-navy) !important;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  user-select: none;
}
.svc-faq-section > .wp-block-group > .wp-block-group .wp-block-details summary:hover {
  color: var(--c-teal) !important;
}
.svc-faq-section > .wp-block-group > .wp-block-group .wp-block-details summary::-webkit-details-marker {
  display: none;
}
.svc-faq-section > .wp-block-group > .wp-block-group .wp-block-details summary::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--c-teal-text);
  flex-shrink: 0;
  transition: transform 0.2s ease;
  line-height: 1;
}
.svc-faq-section > .wp-block-group > .wp-block-group .wp-block-details[open] summary::after {
  content: '\2212';
}
.svc-faq-section > .wp-block-group > .wp-block-group .wp-block-details > p {
  padding: 0 0 1.1rem !important;
  color: var(--c-text-mid) !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

.svc-faq-section h2 {
  font-weight: 800 !important;
  color: var(--c-navy) !important;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem !important;
}
.svc-faq-section p {
  color: var(--c-text-mid) !important;
  font-size: 1rem !important;
  margin: 0 0 2.5rem !important;
}

/* ─── Section CTA (svc-cta) ────────────────────────────────── */
.svc-cta {
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}
.svc-cta__inner {
  align-items: center !important;
}
.svc-cta .svc-cta__icon {
  font-size: 2rem !important;
  margin: 0 0 0.5rem !important;
  line-height: 1 !important;
}
.svc-cta h2 {
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem !important;
}
.svc-cta p {
  font-size: 1rem !important;
  opacity: 0.88;
  margin: 0 !important;
  line-height: 1.55 !important;
}
.svc-cta__btn-col {
  display: flex;
  justify-content: flex-end;
}
.svc-cta__buttons {
  justify-content: flex-end !important;
}
/* CTA newsletter (accueil) uniquement : bouton centré dans sa colonne,
   plutôt qu'aligné à droite comme les autres usages de .svc-cta (ex.
   /applications/mobilier-agencement/), pour ne pas changer leur alignement. */
.svc-cta--newsletter .svc-cta__btn-col {
  justify-content: center;
}
.svc-cta--newsletter .svc-cta__buttons {
  justify-content: center !important;
}
.svc-cta .wp-block-button__link {
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 0.9rem 2rem !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
}
.svc-cta .wp-block-button__link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

/* ─── Bandeau infos (garanties / livraison / aide / recyclage) ───────────────
   4 colonnes juste avant le CTA newsletter (accueil). Inspiré d'une page
   concurrente montrée par la cliente, mais contenu entièrement réécrit avec
   les informations réelles d'Aplastic94 et mise en forme dans le vocabulaire
   visuel du site (navy/teal/fuchsia) plutôt que le bandeau noir de la page
   source. */
.info-strip {
  padding: clamp(1.75rem, 4vw, 2.5rem) 0;
}
.info-strip__row {
  gap: 1.5rem !important;
}
.info-strip__col {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.info-strip__col:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(109, 183, 178, 0.4);
}
/* Le dernier paragraphe de la carte (celui du lien "En savoir plus" /
   "Nous contacter", quand il existe) est poussé en bas — cartes alignées
   même si le texte au-dessus fait plus ou moins de lignes selon la colonne. */
.info-strip__col > p:last-child {
  margin-top: auto;
  padding-top: 0.5rem;
}
.info-strip__title {
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-navy) !important;
  margin: 0 0 0.9rem !important;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--c-teal);
  display: flex !important;
  align-items: center;
  gap: 0.6rem;
}
.info-strip__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(109, 183, 178, 0.14);
  transition: transform var(--trans), background-color var(--trans);
}
/* Petite animation "fun" au survol : l'icône du titre rebondit et pivote
   légèrement, la pastille se colore. */
.info-strip__col:hover .info-strip__icon {
  background: var(--c-teal);
  transform: rotate(-8deg) scale(1.12);
}
.info-strip__col:hover .info-strip__icon svg {
  stroke: #FFFFFF;
}
.info-strip__icon svg {
  transition: stroke var(--trans);
}
@media (prefers-reduced-motion: reduce) {
  .info-strip__col,
  .info-strip__icon {
    transition: none;
  }
}
.info-strip__line {
  font-size: 0.85rem !important;
  color: var(--c-text-mid);
  line-height: 1.5 !important;
  margin: 0 0 0.35rem !important;
}
.info-strip__line strong {
  color: var(--c-teal-text);
  font-weight: 700;
}
.info-strip__desc {
  font-size: 0.85rem !important;
  color: var(--c-text-mid);
  line-height: 1.6 !important;
  margin: 0.5rem 0 0 !important;
}
.info-strip__payments {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.6rem 0 0.35rem;
}
.info-strip__payments svg {
  display: block;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--c-border);
  transition: transform var(--trans);
}
.info-strip__payments svg:hover {
  transform: translateY(-2px);
}
.info-strip__link {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--c-fuchsia);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color var(--trans), transform var(--trans);
}
.info-strip__link:hover {
  color: var(--c-teal-text);
  transform: translateX(3px);
}
@media (max-width: 900px) {
  .info-strip__row { flex-wrap: wrap !important; }
  .info-strip__col { flex-basis: calc(50% - 0.75rem) !important; }
}
@media (max-width: 600px) {
  .info-strip__col { flex-basis: 100% !important; }
}

/* ─── Bandeau services (services-band) ─────────────────────── */
.services-band {
  padding: clamp(1.75rem, 4vw, 2.5rem) 0;
  background: #f5f4f6;
  border-top: 1px solid var(--c-border);
}
.services-band__label {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-text-mid) !important;
  text-align: center !important;
  margin: 0 0 1rem !important;
}
.services-band .wp-block-buttons {
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}
.services-band .wp-block-button__link {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--c-navy) !important;
  background: var(--c-white) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: 999px !important;
  padding: 0.45rem 1.1rem !important;
  text-decoration: none !important;
  transition: border-color var(--trans), color var(--trans), background var(--trans) !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}
.services-band .wp-block-button__link:hover {
  border-color: var(--c-teal) !important;
  color: var(--c-teal) !important;
  background: rgba(109, 183, 178, 0.08) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Hero : image masquée sur mobile — l'image de fond peut être posée sur
     .svc-hero (usage historique) ou sur son groupe enfant .wp-block-group
     (usage recommandé, voir commentaire plus haut) : on couvre les deux. */
  .svc-hero,
  .svc-hero > .wp-block-group {
    background-image: none !important;
  }
}

@media (max-width: 900px) {
  /* Hero */
  .svc-hero__inner .wp-block-column { flex-basis: 100% !important; }
  .svc-hero__text { padding-right: 0; }
  .svc-hero__img-col { display: none; }

  /* Why */
  .svc-why-inner .wp-block-column  { flex-basis: 100% !important; }
  .svc-why-icons .wp-block-column  { flex-basis: calc(33.33% - 0.5rem) !important; }
  .svc-why-icon-col { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 0.75rem 0; }
  .svc-why-icon-col:last-child { border-bottom: none; }

  /* CTA */
  .svc-cta__inner .wp-block-column { flex-basis: 100% !important; }
  .svc-cta__btn-col { justify-content: flex-start; }
  .svc-cta__buttons { justify-content: flex-start !important; }
}

@media (max-width: 640px) {
  /* Why */
  .svc-why-icons .wp-block-column { flex-basis: calc(50% - 0.5rem) !important; }
}

/* =============================================================
   Page Contact — styles spécifiques
   ============================================================= */

/* ─── Mini-features hero (contact-mini-feats) ─────────────── */
.contact-mini-feats {
  gap: 0 !important;
  margin-top: 1.75rem !important;
}
.mini-feat {
  padding: 0 1rem 0 0 !important;
}
.mini-feat .mini-feat__ico {
  display: block;
  margin-bottom: 0.5rem;
}
.mini-feat__title {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--c-navy) !important;
  margin: 0 0 0.15rem !important;
  line-height: 1.3 !important;
}
.mini-feat__sub {
  font-size: 0.77rem !important;
  color: var(--c-text-mid) !important;
  margin: 0 !important;
}

/* ─── Section formulaire + coordonnées ────────────────────── */
.contact-form-section {
  padding: clamp(3rem, 8vw, 5rem) 0;
}
.contact-form-layout {
  gap: 2rem !important;
  align-items: flex-start !important;
}

/* Carte formulaire */
.contact-form-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 4vw, 2.25rem) !important;
  box-shadow: var(--shadow-card);
}
.contact-form-card h2 {
  font-size: clamp(1.25rem, 2.5vw, 1.6rem) !important;
  font-weight: 800 !important;
  color: var(--c-navy) !important;
  margin: 0 0 0.35rem !important;
}
.contact-form-card .form-lead {
  font-size: 0.83rem !important;
  color: var(--c-text-mid) !important;
  margin: 0 0 1.5rem !important;
}

/* CF7 — structure en 2 colonnes */
.wpcf7-form .cf7-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
/* Sans min-width:0, un <select> dont le texte d'option le plus long dépasse
   la largeur de sa colonne force la piste de grille à s'agrandir au-delà de
   1fr (les éléments de grille ont un min-width:auto implicite, non annulé
   par width:100% sur le champ) — les deux champs se chevauchent alors. */
.wpcf7-form .cf7-two-col > div {
  min-width: 0;
  box-sizing: border-box;
}

/* CF7 — labels */
.wpcf7-form .cf7-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--c-navy);
  margin-bottom: 1rem;
}
.wpcf7-form .cf7-req { color: var(--c-fuchsia); }

/* CF7 — champs texte / email / tel / select / textarea */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.875rem;
  color: var(--c-text);
  background: var(--c-gray);
  transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  background: var(--c-white);
  border-color: var(--c-teal);
  box-shadow: 0 0 0 3px rgba(109, 183, 178, 0.18);
}
.wpcf7-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%235A6B80' stroke-width='2' stroke-linecap='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.wpcf7-form textarea { min-height: 130px; resize: vertical; }

/* CF7 — pièce jointe */
.cf7-file-wrap { margin-bottom: 1rem; }
.wpcf7-form input[type="file"] {
  box-sizing: border-box;
  width: 100%;
  padding: 1rem;
  border: 2px dashed var(--c-border);
  border-radius: var(--radius);
  background: var(--c-gray);
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.83rem;
  color: var(--c-text-mid);
  transition: border-color var(--trans);
  display: block;
}
.wpcf7-form input[type="file"]:hover { border-color: var(--c-teal); }
.cf7-hint {
  font-size: 0.75rem !important;
  color: var(--c-text-mid) !important;
  margin: 0.3rem 0 0 !important;
}

/* CF7 — RGPD */
.cf7-rgpd {
  font-size: 0.79rem;
  color: var(--c-text-mid);
  display: flex !important;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 1rem 0 !important;
}
.cf7-rgpd a { color: var(--c-fuchsia); text-decoration: underline; }
.cf7-rgpd .wpcf7-list-item { margin: 0 !important; }

/* CF7 — bouton submit */
.wpcf7-form input[type="submit"],
.wpcf7-submit {
  background: var(--c-fuchsia) !important;
  color: var(--c-white) !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 0.9rem 2rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  cursor: pointer !important;
  transition: background var(--trans), transform var(--trans), box-shadow var(--trans) !important;
  margin-top: 0.5rem;
  width: 100%;
}
.wpcf7-form input[type="submit"]:hover {
  background: var(--c-fuchsia-h) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-btn) !important;
}

/* CF7 — messages de réponse */
.wpcf7 .wpcf7-response-output {
  margin: 1rem 0 0 !important;
  padding: 0.75rem 1rem !important;
  border-radius: var(--radius) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
}
.wpcf7 .wpcf7-mail-sent-ok { background: #edfdf4; border-color: #34d399 !important; color: #065f46 !important; }
.wpcf7 .wpcf7-validation-errors,
.wpcf7 .wpcf7-mail-sent-ng { background: #fef2f2; border-color: var(--c-fuchsia) !important; color: var(--c-fuchsia) !important; }

/* ─── Carte coordonnées ────────────────────────────────────── */
.contact-coords {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 4vw, 2.25rem) !important;
  box-shadow: var(--shadow-card);
}
.contact-coords h2 {
  font-size: clamp(1.15rem, 2vw, 1.4rem) !important;
  font-weight: 800 !important;
  color: var(--c-navy) !important;
  margin: 0 0 1.5rem !important;
}

/* Coords items (HTML natif) */
.coords-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
.coords-icon {
  width: 2.4rem;
  height: 2.4rem;
  background: rgba(109, 183, 178, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.coords-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-text-mid);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 0.18rem;
  line-height: 1.3;
}
.coords-value {
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--c-navy);
  margin: 0;
  line-height: 1.45;
}
.coords-value a { color: var(--c-navy); text-decoration: none; }
.coords-value a:hover { color: var(--c-fuchsia); }

/* Carte Google Maps */
.contact-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 1.25rem 0 1rem;
  border: 1px solid var(--c-border);
  line-height: 0;
}
.contact-map iframe { display: block; width: 100%; height: 195px; border: 0; }

/* Bouton itinéraire */
.btn-coords-itinerary .wp-block-button__link {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--c-teal-text) !important;
  background: transparent !important;
  border: 1.5px solid var(--c-teal-text) !important;
  border-radius: 4px !important;
  padding: 0.6rem 1.25rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: background var(--trans), color var(--trans) !important;
}
.btn-coords-itinerary .wp-block-button__link:hover {
  background: rgba(109, 183, 178, 0.1) !important;
  transform: none !important;
}

/* ─── Bandeau statistiques (stats-band) ────────────────────── */
.stats-band {
  padding: clamp(2.5rem, 6vw, 3.5rem) 0;
}
.stats-band .wp-block-columns { gap: 0 !important; }
.stat-col {
  text-align: center !important;
  padding: 0 1.25rem !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.stat-col:last-child { border-right: none; }
.stat-col .stat-ico { margin: 0 auto 0.75rem !important; display: block; }
.stats-number {
  font-size: clamp(1.9rem, 4vw, 2.75rem) !important;
  font-weight: 800 !important;
  color: var(--c-white) !important;
  margin: 0 0 0.3rem !important;
  line-height: 1.1 !important;
}
.stats-label {
  font-size: 0.8rem !important;
  color: rgba(157, 180, 200, 0.85) !important;
  margin: 0 !important;
  line-height: 1.45 !important;
}

/* ─── FAQ layout contact page ──────────────────────────────── */
.faq-layout {
  gap: 3rem !important;
  align-items: flex-start !important;
}

/* ─── CTA devis rapide card ────────────────────────────────── */
.contact-cta-card {
  border-radius: var(--radius-xl) !important;
  padding: clamp(1.5rem, 4vw, 2.25rem) !important;
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
}
.contact-cta-card h3 {
  font-size: clamp(1.1rem, 2vw, 1.4rem) !important;
  font-weight: 800 !important;
  color: var(--c-white) !important;
  margin: 0 0 0.5rem !important;
}
.contact-cta-card p {
  color: rgba(157, 180, 200, 0.85) !important;
  font-size: 0.87rem !important;
  margin: 0 0 1.25rem !important;
  line-height: 1.55 !important;
}
.contact-cta-card .wp-block-button__link {
  width: 100% !important;
  text-align: center !important;
  justify-content: center !important;
  display: block !important;
}

/* ─── Bandeau urgence (urgence-band) ───────────────────────────
   Fond bleu marine + photo usinage CNC + badge hexagonal, conforme
   à la maquette contractuelle (voir .claude/doc/plexi paris_page
   home.png, section "Besoin d'un produit sur-mesure ?" — cf.
   [[homepage-design-plexiparis]]). Couleur de fond = navy de la
   charte (--c-navy), pas la teinte exacte de la maquette source. */
.urgence-band {
  padding: clamp(1.5rem, 4vw, 2.5rem) 0;
}
.urgence-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  height: 270px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--c-navy);
  box-shadow: var(--shadow-card);
}
.urgence-band__text {
  flex: 1 1 300px;
  max-width: 44%;
  height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem clamp(2rem, 5vw, 3rem) 2rem clamp(1.5rem, 4vw, 2.25rem);
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  background: var(--c-navy);
  /* « Effet flèche » : le panneau bleu se termine en pointe vers la photo,
     comme sur la maquette contractuelle (voir .claude/doc/plexi paris_page
     home.png) — cf. [[homepage-design-plexiparis]]. Élément jugé intéressant
     par l'utilisateur : à conserver dans toute évolution future.
     Piège #1 : clip-path sur ce conteneur flex masquait tout son contenu
     tant que sa hauteur dépendait de align-items:stretch (min-height)
     plutôt que d'une valeur "height" explicite.
     Piège #2 : le fond navy vivait sur .urgence-band__inner (parent), donc
     clipper .urgence-band__text ne découpait rien de visible — il faut le
     fond directement sur l'élément clippé pour que la pointe apparaisse.
     Pointe nette, remontée (0.40, pas pile centrée) à la demande de la
     cliente : la forme vit dans un clipPath SVG en objectBoundingBox (donc
     toujours fluide en %, quelle que soit la largeur du panneau), injecté
     en pied de page par functions.php et référencé ici via
     clip-path: url(#...). La ligne polygon() ci-dessous reste en premier
     comme repli pour les (rares) navigateurs qui ne comprennent pas
     clip-path: url() vers un clipPath SVG — la cascade CSS ignore alors la
     seconde déclaration et garde la première. */
  clip-path: polygon(0 0, 88% 0, 100% 40%, 88% 100%, 0 100%);
  clip-path: url(#urgence-chevron-clip);
}
.urgence-band__text h2 {
  font-size: clamp(0.95rem, 1.8vw, 1.15rem) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--c-white) !important;
  line-height: 1.25 !important;
  margin: 0 0 0.35rem !important;
}
.urgence-band__text p {
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 0 0.85rem !important;
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
}
.urgence-band__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  background: transparent;
  border: 2px solid var(--c-white);
  color: var(--c-white) !important;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.55rem 1.25rem;
  border-radius: 4px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background var(--trans), transform var(--trans);
}
.urgence-band__btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}
.urgence-band__media {
  position: relative;
  flex: 1 1 64%;
  height: 270px;
  margin-left: -4%; /* la photo remonte sous la pointe de la flèche */
}
/* Motif décoratif (hexagones + lignes fines façon plan technique) à la
   jonction panneau bleu / photo, conforme à la maquette contractuelle
   (voir .claude/doc/plexi paris_page home.png) — absent jusqu'ici. Purement
   décoratif : en CSS (pas dans le contenu de la page) pour rester assemblé
   au composant quel que soit l'endroit où le bandeau est réutilisé. */
.urgence-band__media::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 260px;
  max-width: 45%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='240' viewBox='0 0 300 240'%3E%3Cg fill='none' stroke='%236DB7B2' stroke-width='1.5' opacity='0.4'%3E%3Cpolygon points='38,18 66,18 80,42 66,66 38,66 24,42'/%3E%3Cpolygon points='4,96 26,96 37,115 26,134 4,134 -7,115'/%3E%3Cline x1='80' y1='42' x2='150' y2='42'/%3E%3Cline x1='37' y1='115' x2='37' y2='66'/%3E%3Cline x1='37' y1='66' x2='80' y2='42'/%3E%3Ccircle cx='150' cy='42' r='3' fill='%236DB7B2' stroke='none'/%3E%3Ccircle cx='37' cy='115' r='3' fill='%236DB7B2' stroke='none'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center / contain;
  pointer-events: none;
  z-index: 1;
}
.urgence-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: contrast(1.25) saturate(1.1);
}
.urgence-band__hexagon {
  position: absolute;
  top: 50%;
  right: clamp(0.75rem, 4vw, 2rem);
  transform: translateY(-50%);
  z-index: 2;
  width: 150px;
  height: 150px;
  background: rgba(47, 122, 117, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.25rem;
}
.urgence-band__hexagon span {
  color: var(--c-white);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════
   FAQ accueil — présentation standard .faq-block (colonne
   éditoriale + accordéon, voir main.css et /applications/),
   avec des blocs natifs "Détails" (core/details) pour la liste
   au lieu du HTML .faq-item habituel (édition visuelle directe
   dans l'éditeur de blocs). .faq-block / .faq-block__intro /
   .faq-block__list sont déjà stylés dans main.css — il ne
   manque que l'habillage de <details>/<summary> natifs pour
   retrouver le même langage visuel que .faq-accordion__* (icône
   +/× ronde, carte blanche, accent teal à l'ouverture). Le
   schema.org FAQPage est généré à part en PHP en lisant cette
   structure (voir functions.php).
   ═══════════════════════════════════════════════════════════ */
.faq-block__list .wp-block-details {
  margin: 0;
}
.faq-block__list details {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.faq-block__list details[open] {
  border-color: var(--c-teal);
}
.faq-block__list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--c-navy);
}
.faq-block__list summary::-webkit-details-marker {
  display: none;
}
.faq-block__list summary::marker {
  content: "";
}
.faq-block__list summary::after {
  content: "";
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  --icon-color: var(--c-teal-text);
  background-color: var(--c-gray);
  background-image: linear-gradient(var(--icon-color), var(--icon-color)),
    linear-gradient(var(--icon-color), var(--icon-color));
  background-size: 12px 2px, 2px 12px;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  transition: transform var(--trans), background-color var(--trans);
}
.faq-block__list details[open] summary::after {
  --icon-color: var(--c-white);
  background-color: var(--c-teal);
  transform: rotate(45deg);
}
.faq-block__list details > *:not(summary) {
  padding: 0 1.4rem 1.1rem;
  color: var(--c-text-mid);
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0;
}

/* ─── Responsive contact ────────────────────────────────────── */
@media (max-width: 900px) {
  /* Form + coords */
  .contact-form-layout .wp-block-column { flex-basis: 100% !important; }
  .contact-cta-card { position: static; }
  /* Stats */
  .stat-col { flex-basis: calc(50% - 0.5rem) !important; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 1.25rem 0 !important; }
  .stat-col:nth-child(2n) { border-bottom: none; }
  /* FAQ */
  .faq-layout .wp-block-column { flex-basis: 100% !important; }
  /* Urgence */
  .urgence-band__inner { height: auto; }
  .urgence-band__media { flex-basis: 100%; height: 200px; margin-left: 0; order: -1; }
  .urgence-band__text { flex-basis: 100%; max-width: 100%; height: auto; padding: 1.75rem 1.5rem; clip-path: none; }
  /* CF7 2-col */
  .wpcf7-form .cf7-two-col { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .stat-col { flex-basis: 100% !important; }
  .contact-mini-feats .wp-block-column { flex-basis: 100% !important; }
}

/* ─── Réalisations homepage — carousel cards ─────────────────── */
.realisation-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 4/3;
  background: var(--c-gray);
  cursor: pointer;
}
.realisation-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.realisation-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22,38,61,.88) 0%, transparent 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: .9rem;
  opacity: 0;
  transition: opacity .28s ease;
}
.carousel-slide:hover .realisation-card__overlay { opacity: 1; }
.realisation-card__cat {
  display: inline-block;
  background: var(--c-teal-text);
  color: #fff;
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: 4px;
  padding: .12rem .4rem;
  margin-bottom: .35rem;
  width: fit-content;
}
.realisation-card__title {
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  font-family: Montserrat, sans-serif;
}

/* ─── Lightbox mat-card ────────────────────────────────────────── */
.aplastic-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(14, 20, 32, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 2rem;
  cursor: zoom-out;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.aplastic-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.aplastic-lightbox__img {
  max-width: min(90vw, 1100px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 16px 64px rgba(0,0,0,0.6);
  pointer-events: none;
  cursor: default;
}
.aplastic-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  line-height: 1;
  color: #fff;
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
}
.aplastic-lightbox__close:hover {
  background: rgba(255,255,255,0.25);
}

/* ─── Tableau gravure laser matériaux ──────────────────────────── */
.gravure-mat-table {
  margin: 2rem 0;
}
.gravure-mat-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(22, 38, 61, 0.10);
  border: none;
  font-size: 0.95rem;
}

/* Header */
.gravure-mat-table thead tr th {
  background: var(--c-teal, #6DB7B2);
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 1rem 1.25rem;
  border: none;
}
.gravure-mat-table thead tr th:first-child { border-radius: 12px 0 0 0; }
.gravure-mat-table thead tr th:last-child  { border-radius: 0 12px 0 0; }

/* Corps : lignes alternées + accent couleur à gauche */
.gravure-mat-table tbody tr {
  transition: background 0.18s ease, transform 0.18s ease;
  cursor: default;
}
.gravure-mat-table tbody tr:hover {
  background: rgba(109, 183, 178, 0.08) !important;
  transform: translateX(3px);
}
.gravure-mat-table tbody tr td {
  padding: 0.9rem 1.25rem;
  border: none;
  border-bottom: 1px solid #eef0f3;
  vertical-align: middle;
  line-height: 1.45;
}
.gravure-mat-table tbody tr:last-child td {
  border-bottom: none;
}
.gravure-mat-table tbody tr:nth-child(even) {
  background: #f8f9fb;
}

/* Colonne matériau : accent coloré à gauche via border-left */
.gravure-mat-table tbody tr td:first-child {
  border-left: 4px solid transparent;
  font-weight: 600;
  color: var(--c-navy, #16263D);
}
.gravure-mat-table tbody tr:nth-child(1) td:first-child { border-left-color: #6DB7B2; }
.gravure-mat-table tbody tr:nth-child(2) td:first-child { border-left-color: #D71361; }
.gravure-mat-table tbody tr:nth-child(3) td:first-child { border-left-color: #F2C34A; }
.gravure-mat-table tbody tr:nth-child(4) td:first-child { border-left-color: #16263D; }
.gravure-mat-table tbody tr:nth-child(5) td:first-child { border-left-color: #6DB7B2; }

/* Colonne résultat : badge visuel */
.gravure-mat-table tbody tr td:nth-child(2) {
  color: #4a5568;
  font-style: italic;
}

/* Colonne applications : tags légers */
.gravure-mat-table tbody tr td:last-child {
  color: #6b7280;
  font-size: 0.88rem;
}

@media (max-width: 640px) {
  .gravure-mat-table table { font-size: 0.82rem; border-radius: 8px; }
  .gravure-mat-table tbody tr td { padding: 0.7rem 0.75rem; }
  .gravure-mat-table thead tr th { padding: 0.75rem 0.75rem; }
}

/* Compare cards — hauteur égale (grid, cf. .res-card / .svc-cap-card
   plus haut : évite le conflit de spécificité avec le CSS natif du
   bloc columns qui impose align-items:normal !important). */
.wp-block-columns:has(.collage-compare-card) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem 1.5rem;
}
.wp-block-columns:has(.collage-compare-card) > .wp-block-column {
  flex-basis: auto !important;
  width: auto !important;
  display: flex;
  flex-direction: column;
}
.collage-compare-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.collage-compare-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: var(--c-fuchsia) !important;
}

/* ─── Matériaux — index cards (page 311) ─────────────────────── */
.mat-index-grid {
  gap: 1.5rem !important;
}
.mat-index-grid + .mat-index-grid {
  margin-top: 1.5rem;
}
.mat-index-grid .wp-block-column {
  display: flex;
  flex-direction: column;
}
.mat-index-card {
  border: 2px solid var(--c-teal);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.mat-index-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: var(--c-fuchsia);
}
.mat-index-card .mat-index-card__img {
  margin: 0;
  overflow: hidden;
}
.mat-index-card .mat-index-card__img figure,
.mat-index-card .mat-index-card__img .wp-block-image {
  margin: 0;
  display: block;
}
.mat-index-card .mat-index-card__img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
/* Cas où l'image est un enfant direct (pas de wrapper .mat-index-card__img), ex. /applications/
   L'image est enveloppée dans un <a> (linkDestination:"custom"), inline par défaut : un
   width:100% simple sur l'img peut alors se résoudre de façon incohérente selon le navigateur.
   On fixe donc explicitement la hauteur du cadre (figure) et on positionne l'image en absolute
   inset:0, qui ne dépend d'aucune résolution de pourcentage ambiguë. */
.mat-index-card > .wp-block-image {
  margin: 0;
  overflow: hidden;
  display: block;
  position: relative;
  height: 200px;
}
.mat-index-card > .wp-block-image a {
  display: block;
  width: 100%;
  height: 100%;
}
.mat-index-card > .wp-block-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.mat-index-card:hover > .wp-block-image img {
  transform: scale(1.06);
}
.mat-index-card .wp-block-heading {
  padding: 1rem 1.25rem 0.25rem;
  margin: 0;
  font-size: 1.15rem;
}
.mat-index-card .wp-block-heading a {
  color: var(--c-teal-text);
  text-decoration: none;
}
.mat-index-card .wp-block-heading a:hover {
  color: var(--c-fuchsia);
}
.mat-index-card .mat-index-card__desc {
  padding: 0 1.25rem;
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #555;
}
.mat-index-card .mat-index-card__tags {
  padding: 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: auto;
  margin-bottom: 1rem;
}
.mat-index-card .wp-block-buttons {
  padding: 0 1.25rem 1.25rem;
}

/* Matériaux — tableau comparatif */
.mat-compare-table {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.mat-compare-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.mat-compare-table thead th {
  background: var(--c-teal-text);
  color: #fff;
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
.mat-compare-table tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
}
.mat-compare-table tbody tr:last-child td {
  border-bottom: none;
}
.mat-compare-table tbody tr:nth-child(even) td {
  background: #f8fafc;
}
.mat-compare-table tbody tr:hover td {
  background: #e6f7f7;
}
.mat-compare-table tbody td:first-child a {
  color: var(--c-teal-text);
  font-weight: 600;
  text-decoration: none;
}
.mat-compare-table tbody td:first-child a:hover {
  color: var(--c-fuchsia);
}

@media (max-width: 768px) {
  .mat-index-grid .wp-block-column {
    flex-basis: 100% !important;
  }
  .mat-compare-table table { font-size: 0.78rem; }
  .mat-compare-table thead th,
  .mat-compare-table tbody td { padding: 0.5rem 0.6rem; }
}

/* ─── Applications — process steps (alias dl-steps) ─────────── */
.dl-process-cols {
  display: flex;
  gap: 0;
  align-items: flex-start;
  width: 100%;
  margin-top: 2.5rem;
}
.dl-process-step {
  flex: 1;
  text-align: center;
  padding: 0 0.75rem;
  position: relative;
}
.dl-process-step:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: -0.6rem;
  top: 1.55rem;
  color: var(--c-teal-text);
  font-size: 1.4rem;
  font-weight: 400;
}
.dl-process-step h3 {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--c-navy) !important;
  margin: 0 0 0.3rem !important;
}
.dl-process-step p:not(.dl-step__num) {
  font-size: 0.75rem !important;
  color: var(--c-text-mid) !important;
  margin: 0 !important;
  line-height: 1.55 !important;
}
@media (max-width: 640px) {
  .dl-process-cols { flex-direction: column; gap: 1.5rem; }
  .dl-process-step:not(:last-child)::after { display: none; }
}

/* ─── Liste à puces avec icône (svc-check-list) ────────────────
   Remplace la puce native par une icône "check" ronde en CSS pur
   (masque SVG en data-URI), sans toucher au bloc wp:list natif. */
.svc-check-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.svc-check-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.65rem;
  line-height: 1.5;
}
.svc-check-list li:last-child {
  margin-bottom: 0;
}
.svc-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--c-teal-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / 60%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / 60%;
}

/* ─── Applications — photo placeholder & idea cards ──────────── */
.app-photo-slot {
  background: #eef9f9;
  border: 2px dashed var(--c-teal);
  border-radius: 8px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--c-teal-text);
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 0;
}
.app-idea-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  padding: 1.25rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.app-idea-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: var(--c-fuchsia);
}
.app-idea-card .app-photo-slot {
  margin: -1.25rem -1.25rem 1rem;
  border-radius: 10px 10px 0 0;
  border-left: none;
  border-right: none;
  border-top: none;
}
.app-idea-card .wp-block-heading {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
  color: var(--c-teal-text);
}
.app-idea-card .app-idea-card__desc {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.55;
  flex: 1;
  margin-bottom: 0.75rem;
}
.app-idea-card .mat-index-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: auto;
}
/* Image réelle dans app-idea-card */
.app-idea-card .wp-block-image {
  margin: -1.25rem -1.25rem 1rem;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  cursor: zoom-in;
  flex-shrink: 0;
}
.app-idea-card .wp-block-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.app-idea-card .wp-block-image:hover img {
  transform: scale(1.05);
}

/* Equal height columns in idea grid */
.mat-index-grid .wp-block-column:has(.app-idea-card) {
  display: flex;
  flex-direction: column;
}
.mat-index-grid .wp-block-column:has(.app-idea-card) > .wp-block-group.app-idea-card {
  flex: 1;
}

/* ─── Titres de section "carte" (au-dessus des grilles de cartes) ───
   Ces H2 (Idées & inspirations, Quelle matière, De votre choix à la
   livraison, Nos réalisations) n'avaient qu'un style de titre générique,
   plus terne que les autres titres "punchy" du site (dl-process__h2 etc.).
   Petite barre dégradée fuchsia→teal + gros titre navy pour plus de peps. */
.app-idea-section > h2.wp-block-heading,
.section-gray > h2.wp-block-heading,
.dl-process-section > h2.wp-block-heading,
.section-white > h2.wp-block-heading,
.svc-app-ideas > h2.wp-block-heading {
  position: relative;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--c-navy);
  letter-spacing: -0.02em;
  padding-top: 1.1rem;
  margin-bottom: 0.85rem;
}
/* Le CSS natif du bloc columns/group (":root :where(.is-layout-constrained)
   > * { margin-block-start:0; margin-block-end:0 }") a une spécificité NULLE
   (:where() ne compte jamais dans le calcul de spécificité) — cette simple
   règle de classe suffit à le neutraliser, sans !important, et évite que les
   titres/paragraphes de ces sections "carte" restent collés les uns aux
   autres (H2 collé au paragraphe, paragraphe collé au bloc suivant). */
.app-idea-section > p.wp-block-paragraph,
.section-gray > p.wp-block-paragraph,
.dl-process-section > p.wp-block-paragraph,
.section-white > p.wp-block-paragraph,
.svc-app-ideas > p.wp-block-paragraph {
  margin-bottom: 1rem;
}
.app-idea-section > p.wp-block-paragraph:last-of-type,
.section-gray > p.wp-block-paragraph:last-of-type,
.dl-process-section > p.wp-block-paragraph:last-of-type,
.section-white > p.wp-block-paragraph:last-of-type,
.svc-app-ideas > p.wp-block-paragraph:last-of-type {
  margin-bottom: 2rem;
}
.app-idea-section > h2.wp-block-heading::before,
.section-gray > h2.wp-block-heading::before,
.dl-process-section > h2.wp-block-heading::before,
.section-white > h2.wp-block-heading::before,
.svc-app-ideas > h2.wp-block-heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--c-fuchsia) 0%, var(--c-teal) 100%);
}
.section-gray > h2.wp-block-heading.has-text-align-center::before,
.dl-process-section > h2.wp-block-heading.has-text-align-center::before,
.section-white > h2.wp-block-heading.has-text-align-center::before,
.svc-app-ideas > h2.wp-block-heading.has-text-align-center::before {
  left: 50%;
  transform: translateX(-50%);
}

/* CTA card variant */
.app-idea-cta-card {
  background: var(--c-teal-text) !important;
  border-color: var(--c-teal-text) !important;
  border-radius: 12px !important;
  padding: 1.75rem !important;
}
.app-idea-cta-card .wp-block-heading {
  color: #fff !important;
  font-size: 1.1rem !important;
}
.app-idea-cta-card p,
.app-idea-cta-card .wp-block-list li {
  color: rgba(255,255,255,.9) !important;
}

/* Réalisations — coins arrondis sur les images */
.app-realisation-img img {
  border-radius: 10px;
  display: block;
  width: 100%;
}

/* Matières — cartes blanches égales en hauteur */
.mat-material-cols {
  align-items: stretch !important;
}
.mat-material-cols > .wp-block-column {
  display: flex;
  flex-direction: column;
}
.mat-material-cols > .wp-block-column > .wp-block-group.has-white-background-color {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.mat-material-cols > .wp-block-column > .wp-block-group.has-white-background-color .wp-block-buttons {
  margin-top: auto;
}

@media (max-width: 768px) {
  .app-photo-slot { min-height: 150px; }
}

/* =============================================================
   Blog listing — Query Loop (post 790)
   ============================================================= */

/* ─── Card article ──────────────────────────────────────────── */

/* Chaque li de la grille CSS doit être flex pour que la card s'étire à hauteur égale */
.wp-block-post-template.is-layout-grid > li {
  display: flex;
}
/* Aucun gap défini nulle part (ni theme.json, ni le bloc) pour cette grille
   de cartes articles — le core ne pose un gap par défaut que si un
   blockGap est explicitement déclaré. Sans ça les cartes se touchent. */
.wp-block-post-template.is-layout-grid {
  gap: 2rem 1.5rem !important;
}

.blog-post-card {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-white);
  box-shadow: var(--shadow-card);
  transition: transform var(--trans), box-shadow var(--trans);
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.blog-post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.blog-post-card .wp-block-post-featured-image {
  overflow: hidden;
  line-height: 0;
}
/* Ratio 850:350 imposé via l'attribut aspectRatio du bloc post-featured-image
   (aspect-ratio natif posé sur la figure) — l'image doit donc suivre cette
   même proportion à toute largeur, jamais une hauteur fixe en pixels
   (sinon le ratio dérive dès que la largeur de carte change). */
.blog-post-card .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.blog-post-card:hover .wp-block-post-featured-image img {
  transform: scale(1.04);
}
.blog-post-card__body {
  padding: 1.5rem 1.75rem 1.75rem !important;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.blog-post-card .wp-block-read-more {
  margin-top: auto !important;
}
.blog-post-card .wp-block-post-terms {
  margin: 0 0 0.5rem !important;
}
.blog-post-card .wp-block-post-terms a {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--c-teal-text) !important;
  text-decoration: none !important;
}
.blog-post-card .wp-block-post-title {
  margin: 0 0 0.75rem !important;
}
.blog-post-card .wp-block-post-title a {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--c-navy) !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  transition: color var(--trans);
}
.blog-post-card .wp-block-post-title a:hover {
  color: var(--c-teal) !important;
}
.blog-post-card .wp-block-post-excerpt__excerpt {
  font-size: 0.9rem !important;
  color: var(--c-text-mid) !important;
  line-height: 1.65 !important;
  margin: 0 0 1rem !important;
}
.blog-post-card .wp-block-post-excerpt__more-link,
.blog-post-card .wp-block-read-more {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--c-teal-text) !important;
  text-decoration: none !important;
}
.blog-post-card .wp-block-post-excerpt__more-link:hover,
.blog-post-card .wp-block-read-more:hover {
  color: var(--c-fuchsia) !important;
}

/* ─── Sidebar blog ──────────────────────────────────────────── */
.blog-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.blog-sidebar-cat {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem !important;
  box-shadow: var(--shadow-card);
}
.blog-sidebar-cat > h3 {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--c-text-mid) !important;
  margin: 0 0 1rem !important;
}
.blog-sidebar-cat .wp-block-categories__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.blog-sidebar-cat .wp-block-categories__list li {
  margin: 0 !important;
  padding: 0 !important;
}
.blog-sidebar-cat .wp-block-categories__list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--c-navy) !important;
  text-decoration: none !important;
  transition: color var(--trans), padding-left var(--trans);
}
.blog-sidebar-cat .wp-block-categories__list li:last-child a {
  border-bottom: none;
}
.blog-sidebar-cat .wp-block-categories__list a:hover {
  color: var(--c-teal) !important;
  padding-left: 0.4rem;
}

/* ─── Card diagnostic (sidebar) ────────────────────────────── */
.blog-diag-card {
  border-radius: var(--radius-lg) !important;
  padding: 2rem 1.5rem !important;
}
.blog-diag-card h3 {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: var(--c-white) !important;
  margin: 0 0 0.75rem !important;
  line-height: 1.3 !important;
}
.blog-diag-card p {
  color: rgba(157, 180, 200, 0.9) !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  margin: 0 0 1.5rem !important;
}
.blog-diag-card .wp-block-button__link {
  width: 100% !important;
  text-align: center !important;
  display: block !important;
}

/* ─── Bouton Load More ──────────────────────────────────────── */
.wp-block-query-pagination:has(.btn-load-more) {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}
.btn-load-more.wp-block-query-pagination-next {
  display: inline-block !important;
  padding: 0.9rem 2.5rem !important;
  border: 2px solid var(--c-teal-text) !important;
  border-radius: 4px !important;
  color: var(--c-teal-text) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: background var(--trans), color var(--trans) !important;
}
.btn-load-more.wp-block-query-pagination-next:hover {
  background: var(--c-teal) !important;
  color: var(--c-white) !important;
}
.btn-load-more.wp-block-query-pagination-next.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* ─── Responsive blog listing ───────────────────────────────── */
@media (max-width: 900px) {
  .blog-sidebar { position: static; }
}
@media (max-width: 640px) {
  .blog-post-card__body { padding: 1.25rem !important; }
}

/* ─── Page Découpe Laser (dl-*) ──────────────────────────────── */
.dl-what-section { padding: clamp(3rem,8vw,5rem) 0; background: var(--c-white); }
.dl-what__h2 { font-size: clamp(1.75rem,3.5vw,2.25rem) !important; font-weight: 800 !important; color: var(--c-navy) !important; letter-spacing: -0.02em; margin: 0 0 1.25rem !important; }
.dl-what__lead { font-size: 1.05rem !important; color: var(--c-text) !important; line-height: 1.85 !important; margin: 0 0 1rem !important; }
.dl-what__text { color: var(--c-text-mid) !important; font-size: 0.925rem !important; line-height: 1.8 !important; margin: 0 0 0.875rem !important; }

.dl-capability {
  border: 1px solid var(--c-border);
  border-left-width: 4px;
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem !important;
  margin-bottom: 0.875rem !important;
  background: var(--c-white);
  transition: transform var(--trans), box-shadow var(--trans);
}
.dl-capability:hover { transform: translateX(4px); box-shadow: var(--shadow-card); }
.dl-capability--cut     { border-left-color: var(--c-fuchsia) !important; }
.dl-capability--engrave { border-left-color: var(--c-teal)    !important; }
.dl-capability--mark    { border-left-color: var(--c-gold)    !important; }
.dl-capability__icon  { font-size: 1.4rem !important; line-height: 1 !important; margin: 0 0 0.4rem !important; }
.dl-capability__title { font-size: 0.95rem !important; font-weight: 700 !important; color: var(--c-navy) !important; margin: 0 0 0.3rem !important; }
.dl-capability__text  { font-size: 0.875rem !important; color: var(--c-text-mid) !important; margin: 0 !important; line-height: 1.6 !important; }

.dl-specs-section { padding: clamp(3rem,8vw,5rem) 0; background: #F8FAFC; }
.dl-specs__h2 { font-size: clamp(1.75rem,3.5vw,2.25rem) !important; font-weight: 800 !important; color: var(--c-navy) !important; letter-spacing: -0.02em; margin: 0 0 0.5rem !important; }
.dl-specs__sub { color: var(--c-text-mid) !important; font-size: 1rem !important; margin: 0 0 2.5rem !important; }
.dl-specs-cols { align-items: stretch !important; }
.dl-spec-card { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 1.75rem !important; box-sizing: border-box; display: flex; flex-direction: column; }
.dl-spec-card__title {
  font-size: 0.68rem !important; font-weight: 700 !important; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--c-teal-text) !important;
  margin: 0 0 1.25rem !important; padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--c-border);
}
.dl-spec-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.45rem 0; border-bottom: 1px solid #F3F5F7; margin: 0 !important; font-size: 0.875rem !important; }
.dl-spec-row:last-child { border-bottom: none; }
.dl-spec-label { color: var(--c-text-mid); margin: 0 !important; }
.dl-spec-val   { font-weight: 700; color: var(--c-navy); margin: 0 !important; text-align: right; }
.dl-file-item  { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid #F3F5F7; margin: 0 !important; }
.dl-file-item:last-child { border-bottom: none; }
.dl-file-badge {
  background: rgba(109,183,178,0.12); color: var(--c-teal-text); font-weight: 700;
  font-size: 0.7rem !important; padding: 0.15rem 0.5rem; border-radius: 4px;
  letter-spacing: 0.05em; flex-shrink: 0; white-space: nowrap; margin: 0 !important;
}
.dl-file-label { font-size: 0.875rem !important; color: var(--c-navy); margin: 0 !important; }

.dl-process-section { padding: clamp(3rem,8vw,5rem) 0; background: var(--c-white); box-shadow: var(--shadow-card); }
.dl-process__h2 { font-size: clamp(1.75rem,3.5vw,2.25rem) !important; font-weight: 800 !important; color: var(--c-navy) !important; letter-spacing: -0.02em; margin: 0 0 0.5rem !important; }
.dl-process__sub { color: var(--c-text-mid) !important; font-size: 1rem !important; margin: 0 0 2.5rem !important; }
.dl-steps { gap: 0 !important; align-items: flex-start !important; }
.dl-step { text-align: center; padding: 0 0.75rem; position: relative; }
.dl-step:not(:last-child)::after {
  content: '→'; position: absolute; right: -0.6rem; top: 1.4rem;
  color: var(--c-teal-text); font-size: 1.1rem; font-weight: 300;
}
.dl-step__num {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--c-fuchsia); color: var(--c-white);
  font-weight: 800; font-size: 0.78rem;
  display: flex; align-items: center; justify-content: center;
  text-align: center; line-height: 1.35;
  padding: 0.5rem; box-sizing: border-box;
  margin: 0 auto 0.85rem !important;
  box-shadow: 0 8px 20px rgba(22, 38, 61, 0.18);
  transition: transform var(--trans), box-shadow var(--trans);
}
.dl-process-step:hover .dl-step__num {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 12px 26px rgba(22, 38, 61, 0.26);
}
.dl-process-step:nth-child(4n+1) .dl-step__num { background: linear-gradient(135deg, var(--c-teal) 0%, var(--c-teal-text) 100%); }
.dl-process-step:nth-child(4n+2) .dl-step__num { background: linear-gradient(135deg, var(--c-fuchsia) 0%, var(--c-fuchsia-h) 100%); }
.dl-process-step:nth-child(4n+3) .dl-step__num { background: linear-gradient(135deg, var(--c-gold) 0%, #D9A52E 100%); color: var(--c-navy); }
.dl-process-step:nth-child(4n+4) .dl-step__num { background: linear-gradient(135deg, var(--c-navy) 0%, #223A58 100%); }
.dl-step__title { font-size: 0.82rem !important; font-weight: 700 !important; color: var(--c-navy) !important; margin: 0 0 0.3rem !important; }
.dl-step__text  { font-size: 0.75rem !important; color: var(--c-text-mid) !important; margin: 0 !important; line-height: 1.55 !important; }

.dl-sectors-section { padding: clamp(2.5rem,6vw,4rem) 0; background: #EFF3F7; }
.dl-sectors__h2 { font-size: clamp(1.5rem,3vw,1.875rem) !important; font-weight: 800 !important; color: var(--c-navy) !important; letter-spacing: -0.02em; margin: 0 0 1.5rem !important; }
.dl-sector-pill {
  display: inline-block; background: var(--c-white); border: 1.5px solid var(--c-border);
  border-radius: var(--radius); padding: 0.55rem 1rem;
  font-size: 0.875rem !important; font-weight: 600; color: var(--c-navy) !important;
  margin: 0 !important; transition: border-color var(--trans), color var(--trans);
  white-space: nowrap;
}
.dl-sector-pill:hover { border-color: var(--c-teal); color: var(--c-teal) !important; }
.dl-sector-pills { display: flex; flex-wrap: wrap; gap: 0.625rem; margin: 0 !important; }

/* ─── Services v2 — Grid, Cards, Géo ─────────────────────────── */
.svc-grid-section {
  background: #F8FAFC;
  padding: clamp(3rem, 8vw, 6rem) 0;
}

/* ─── Section vidéo (atelier / réalisations) — reprise à l'identique de
   ap94.skuria.fr (même thème, mêmes classes dl-video-*), absente de ce
   fichier jusqu'ici : le HTML collé depuis le site source n'avait donc
   aucun style (pastille, cadre, bouton lecture) tant que ces règles
   n'existaient pas ici. ─────────────────────────────────────────── */
.dl-video-badge {
  display: inline-block;
  background: var(--c-teal);
  color: var(--c-white) !important;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.dl-video-frame {
  max-width: 720px;
  margin: 0 auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--c-border);
  background: var(--c-navy);
}
.dl-video-frame.dl-video-frame--portrait { max-width: 380px; }
.dl-video-frame video { display: block; width: 100%; height: auto; }
.dl-video-frame--playable { position: relative; cursor: pointer; }
.dl-video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  background: rgba(22, 38, 61, 0.35);
  transition: background var(--trans, 0.2s ease), opacity 0.25s ease;
}
.dl-video-frame--playable:hover .dl-video-play-overlay { background: rgba(22, 38, 61, 0.5); }
.dl-video-play-overlay__btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c-fuchsia);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  transition: transform var(--trans, 0.2s ease);
}
.dl-video-frame--playable:hover .dl-video-play-overlay__btn { transform: scale(1.08); }
.dl-video-play-overlay__btn svg { margin-left: 4px; }
.dl-video-play-overlay__label {
  color: var(--c-white);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.dl-video-play-overlay.is-hidden { opacity: 0; pointer-events: none; }
.dl-video-teaser-subtitle {
  color: var(--c-text-mid) !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  margin: 0 0 1.5rem !important;
}
.dl-video-caption {
  text-align: center;
  color: var(--c-text-mid) !important;
  font-size: 0.9rem !important;
  max-width: 520px;
  margin: 1.25rem auto 0 !important;
}
.dl-video-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
  align-items: flex-start;
}
.dl-video-row .dl-video-col { flex: 0 1 340px; }
.dl-video-row .dl-video-frame { max-width: 100%; }
@media (max-width: 640px) {
  .dl-video-row { gap: 1.5rem; }
}

.svc-grid__h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem) !important;
  font-weight: 800 !important;
  color: var(--c-navy) !important;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem !important;
}
.svc-grid__subtitle {
  color: var(--c-text-mid) !important;
  font-size: 1rem !important;
  max-width: 600px;
  margin: 0 auto 2.5rem !important;
}
.svc-cards-row {
  gap: 1.25rem !important;
  margin-top: 1.5rem !important;
  align-items: stretch !important;
}
.svc-card {
  background: var(--c-white);
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  transition: box-shadow var(--trans), transform var(--trans), border-color var(--trans);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
.svc-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
  border-color: var(--c-teal);
}
.svc-card__cover.wp-block-cover {
  border-radius: 0 !important;
  width: 100% !important;
  min-height: 200px !important;
  overflow: hidden !important;
  position: relative !important;
}
.svc-card__cover.wp-block-cover img.wp-block-cover__image-background {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Image wp:image directe dans svc-card (figure.wp-block-image enfant immédiat) */
.svc-card > .wp-block-image {
  margin: 0;
  overflow: hidden;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}
.svc-card > .wp-block-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Label texte superposé en bas-gauche de l'image
   Positionné par rapport à .svc-card (position:relative)
   L'image fait 200px → on place le label à top: calc(200px - hauteur_label - gap) */
.svc-card__img-label {
  position: absolute;
  top: calc(200px - 2.75rem);
  left: 0.75rem;
  display: flex !important;
  align-items: center;
  gap: 0.45rem;

  backdrop-filter: blur(4px);
  border-radius: var(--radius);
  padding: 0.35rem 0.7rem 0.35rem 0.5rem;
  pointer-events: none;
  margin: 0 !important;
  z-index: 2;
}
.svc-card__img-label p,
.svc-card__img-label .wp-block-paragraph {
  margin: 0 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff !important;
  line-height: 1.2 !important;
}
.svc-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 1.1rem !important;
  line-height: 1 !important;
  margin: 0 0 0.875rem 0.875rem !important;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.svc-badge--fuchsia { background: var(--c-fuchsia); color: var(--c-white) !important; }
.svc-badge--teal    { background: var(--c-teal-text); color: var(--c-white) !important; }
.svc-badge--gold    { background: var(--c-gold);    color: var(--c-navy)  !important; }
.svc-card__body {
  padding: 1.25rem 1.25rem 1.5rem !important;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.svc-card h3 { font-size: 1rem !important; font-weight: 700 !important; color: var(--c-navy) !important; margin: 0 0 0.6rem !important; }
.svc-card h3 a { color: inherit !important; text-decoration: none; }
.svc-card h3 a:hover { color: var(--c-fuchsia) !important; }
.svc-card__body > p:not(:last-child) { color: var(--c-text-mid) !important; font-size: 0.875rem !important; line-height: 1.65 !important; margin: 0 0 1rem !important; flex: 1; }
.svc-card__body > p:last-child { margin: 0 !important; font-weight: 600; }
.svc-card__body > p:last-child a { color: var(--c-teal-text) !important; text-decoration: none; font-size: 0.875rem; transition: color var(--trans); }
.svc-card__body > p:last-child a:hover { color: var(--c-fuchsia) !important; }
.svc-geo-section {
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  background: #EFF3F7;
}
.svc-geo__inner { display: flex; gap: 3rem; align-items: flex-start !important; }
.svc-geo__h2 { font-size: clamp(1.25rem, 2.5vw, 1.6rem) !important; font-weight: 800 !important; color: var(--c-navy) !important; margin: 0 0 0.75rem !important; }
.svc-geo__text { color: var(--c-text-mid) !important; font-size: 0.925rem !important; line-height: 1.8 !important; margin: 0 0 0.75rem !important; }
.svc-geo__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 !important; }
.svc-geo__tag {
  display: inline-block;
  background: var(--c-white);
  border: 1px solid #D0DAE6;
  border-radius: 100px;
  padding: 0.2rem 0.75rem;
  font-size: 0.8rem;
  color: var(--c-navy);
  font-weight: 600;
  margin: 0 !important;
  transition: background var(--trans), color var(--trans), border-color var(--trans), transform var(--trans), box-shadow var(--trans);
}
.svc-geo__tag:hover {
  background: var(--c-teal-text);
  color: var(--c-white);
  border-color: var(--c-teal-text);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(47, 122, 117, 0.3);
}

@media (max-width: 900px) {
  .svc-cards-row .wp-block-column { flex-basis: calc(50% - 0.75rem) !important; }
}
@media (max-width: 640px) {
  .svc-cards-row .wp-block-column { flex-basis: 100% !important; }
}

/* Les styles du template article sont dans assets/css/article.css */