/*
Theme Name: DEAL DO'CAZ
Theme URI: https://dealdocaz.fr
Author: DEAL DO'CAZ
Description: Thème bloc sur mesure de DEAL DO'CAZ, véhicules d'occasion à Tours. Converti depuis la maquette HTML : chaque texte, image et case se modifie dans l'éditeur de blocs.
Version: 1.0.4
Requires at least: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dealdocaz
Tags: block-theme, full-site-editing, one-column
*/

/* Ce fichier est fabriqué par scripts/vers-blocs.ps1 : le CSS de la maquette (site/styles.css),
   suivi des adaptations propres à WordPress (theme-source/adaptations.css). */

/* DEAL DO'CAZ — maquette de l'accueil (phase 2)
   Registre relevé sur la référence : sans-serif, gris clair neutre, cartes blanches
   arrondies en bento, pastilles noires, une seule couleur d'accent. */

/* Polices hébergées avec le site (dossier polices/) : rien n'est chargé depuis un autre serveur,
   la politique de confidentialité s'y engage. Chaque fichier contient toutes les graisses ;
   le second de chaque police (caractères d'Europe centrale) n'est téléchargé que s'il sert. */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/polices/red-hat-display-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: 'Red Hat Display';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/polices/red-hat-display-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('assets/polices/montserrat-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: 500 700;
  font-display: swap;
  src: url('assets/polices/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --gris: #e9e9e9;
  --blanc: #ffffff;
  --noir: #1b1b1b;
  --anthracite: #262626;
  --doux: #6f6f6f;
  --trait: #d3d3d3;
  --vert: #0f8a5f;
  --vert-clair: #32b39b;

  --f-texte: 'Red Hat Display', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-chiffre: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-carte: 14px;
  --r-panneau: 22px;
  --joint: 6px;
  --marge: clamp(20px, 2.9vw, 42px);
  /* même respiration sous l'en-tête sur toutes les pages */
  --sous-entete: clamp(64px, 9.4vw, 144px);
  /* blocs en retrait (mur d'À propos, étapes des Prestations) : marges libres à gauche et à droite,
     et espace qui les détache des blocs voisins */
  --cote: clamp(64px, 10vw, 200px);
  --retrait: clamp(18px, 2.6vw, 38px);
}

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

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

body {
  margin: 0;
  background: var(--gris);
  color: var(--noir);
  font-family: var(--f-texte);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

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

.accent { color: var(--vert); }

/* une photo sur fond blanc se fond dans le gris ou le blanc de son support */
.detoure, .auto {
  mix-blend-mode: multiply;
  filter: brightness(var(--eclat, 1.04)) contrast(var(--contraste, 1.04));
}

/* ---------- Pastilles, ronds, cartes ---------- */

.pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--blanc);
  font-size: 17px;
  font-weight: 400;
  white-space: nowrap;
  transition: background-color .2s, color .2s, transform .2s;
}
.pastille:hover { transform: translateY(-1px); }
.pastille.est-active, .pastille-noire { background: var(--noir); color: var(--blanc); }
.pastille-noire:hover { background: #000; }

.rond {
  display: inline-grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: none;
  border-radius: 50%;
  background: var(--blanc);
}
.rond svg { width: 22px; height: 22px; }

.carte { background: var(--blanc); border-radius: var(--r-carte); }

/* ---------- Titres ---------- */

.titre-vitrine, .titre-xl, .titre-l {
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  hyphens: none;
  text-wrap: balance;
}
.titre-vitrine { font-size: clamp(34px, 4.45vw, 66px); white-space: nowrap; }
.titre-xl { font-size: clamp(32px, 3.9vw, 58px); }
.titre-l { font-size: clamp(28px, 2.9vw, 42px); line-height: 1.06; }

.sous-titre {
  margin-top: 14px;
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 300;
  color: var(--doux);
}

/* ============ EN-TÊTE ============ */

.entete {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: clamp(18px, 2.6vw, 38px) var(--marge) 0;
}
.logo { justify-self: start; }
.logo img { width: clamp(132px, 12.5vw, 182px); height: auto; }

.nav { display: flex; gap: 10px; }
.nav .pastille { min-width: 132px; }

.entete-actions { display: flex; align-items: center; gap: 10px; justify-self: end; }
.burger { display: none; }

/* ============ VITRINE ============ */

.vitrine {
  position: relative;
  overflow: hidden;
  background: var(--gris);
}

.vitrine-titres {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: var(--sous-entete) var(--marge) 0;
}
.vitrine-noms, .vitrine-prix { display: grid; }
.vitrine-prix { text-align: right; }
.fiche-nom, .fiche-prix {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .35s, transform .45s, visibility 0s .45s;
}
.fiche-nom.est-active, .fiche-prix.est-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .45s .12s, transform .5s .12s, visibility 0s;
}
.devise { color: var(--doux); font-weight: 700; }

/* ---------- Scène ---------- */

.scene {
  position: relative;
  height: clamp(230px, 29.5vw, 470px);
  margin-top: clamp(-56px, -2.8vw, -12px);
}

.podium {
  position: absolute;
  left: 50%;
  bottom: 31px;
  width: 58%;
  height: 34%;
  transform: translateX(-50%);
  border: 1px solid rgba(0, 0, 0, .13);
  border-radius: 50%;
  clip-path: inset(52% 0 0 0);
}
.podium::before {
  content: '';
  position: absolute;
  inset: 8% 12% 22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
}

.auto {
  position: absolute;
  left: 50%;
  bottom: 14%;
  width: 70%;
  height: 80%;
  object-fit: contain;
  object-position: 50% 100%;
  transform-origin: 50% 100%;
  transform: translateX(-50%) translate(var(--dx, 0), var(--dy, 0)) scale(var(--echelle, 1));
  transition: transform .8s cubic-bezier(.2, .75, .2, 1), opacity .4s;
}
.auto[data-pos='centre'] { --dx: 0%; --dy: 0%; --echelle: 1; }
.auto[data-pos='gauche'] { --dx: -71%; --dy: -9%; --echelle: .46; cursor: pointer; }
.auto[data-pos='droite'] { --dx: 71%; --dy: -9%; --echelle: .46; cursor: pointer; }
.auto[data-pos='attente'] { --dx: 130%; --dy: -9%; --echelle: .46; opacity: 0; pointer-events: none; }
.auto.sans-transition { transition: none; }

/* un seul véhicule : pas de flèches */
.scene:not(:has(.auto ~ .auto)) .fleches { display: none; }

/* réglages propres à chaque photo : écrêtage du fond, et fondu là où l'ombre est coupée */
.auto-porsche, .photo-porsche { --eclat: 1.14; --contraste: 1.05; }
.auto-kona, .photo-kona { --eclat: 1.2; --contraste: 1.06; }
.auto-sonata, .photo-sonata {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 26%);
  mask-image: linear-gradient(to right, transparent, #000 26%);
}

.fleches {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  display: flex;
  gap: 4px;
  padding: 7px 14px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--blanc);
}
.fleche { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; transition: background-color .2s; }
.fleche:hover { background: var(--gris); }
.fleche svg { width: 24px; height: 24px; }

/* ---------- Bento ---------- */

.bento {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 2.25fr 1fr 1fr 1fr 2.25fr;
  gap: var(--joint);
  padding: clamp(14px, 1.6vw, 24px) var(--joint) var(--joint);
}

.carte-essai, .carte-garantie {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: clamp(204px, 17.4vw, 270px);
  padding: clamp(18px, 1.9vw, 28px);
}
.carte-texte {
  max-width: 10.5em;
  font-size: clamp(16px, 1.42vw, 21px);
  font-weight: 300;
  line-height: 1.24;
  color: var(--doux);
}
.carte-texte strong { font-weight: 500; color: var(--noir); }
.carte-chiffre {
  margin-top: auto;
  font-family: var(--f-chiffre);
  font-size: clamp(24px, 2.5vw, 37px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.carte-essai .carte-chiffre { margin-top: 10px; }
.carte-essai .pastille { margin-top: auto; }

.carte-essai-photo {
  position: absolute;
  right: 2%;
  top: 50%;
  width: 46%;
  transform: translateY(-50%);
  --eclat: 1.1;
  --contraste: 1.14;
}

.carte-garantie { padding-right: clamp(64px, 6.2vw, 92px); }
.carte-garantie .carte-texte { max-width: 9.6em; position: relative; z-index: 1; }
.carte-garantie .carte-chiffre { position: relative; z-index: 1; }
.carte-garantie-photo {
  position: absolute;
  right: clamp(54px, 5.4vw, 80px);
  bottom: -4%;
  width: 46%;
  height: 92%;
  object-fit: cover;
  object-position: 22% 60%;
  --eclat: 1.13;
  --contraste: 1.05;
}
.duree { display: none; }
.duree.est-active { display: inline; }

.choix {
  position: absolute;
  right: clamp(16px, 1.7vw, 26px);
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateY(-50%);
}
.choix-rond {
  width: clamp(34px, 2.9vw, 42px);
  height: clamp(34px, 2.9vw, 42px);
  border-radius: 50%;
  background: var(--gris);
  font-family: var(--f-chiffre);
  font-size: 14px;
  font-weight: 600;
  transition: background-color .2s, color .2s;
}
.choix-rond.est-active { background: var(--noir); color: var(--blanc); }

.specs { grid-column: 2 / 5; display: grid; }
.specs-jeu {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--joint);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility 0s .3s;
}
.specs-jeu.est-active { opacity: 1; visibility: visible; transition: opacity .4s .1s, visibility 0s; }

.spec {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 12px 6px;
  text-align: center;
}
.spec svg { width: 24px; height: 24px; margin-bottom: 8px; }
.spec strong {
  font-family: var(--f-chiffre);
  font-size: clamp(14px, 1.3vw, 19px);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.spec span { font-size: clamp(12px, .95vw, 14px); font-weight: 300; color: var(--doux); }

/* ============ SECTIONS ============ */

.tete {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  justify-content: space-between;
  align-items: end;
  gap: clamp(24px, 6vw, 110px);
}
.tete-cote { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.tete-cote p { font-size: clamp(16px, 1.3vw, 19px); font-weight: 300; line-height: 1.42; color: var(--doux); }

/* ---------- Introduction de page : titre, trois points, chapeau ---------- */

/* Titre et points centrés, paragraphes alignés à gauche dans une colonne centrée :
   demande du client, d'après son exemple. */
.intro { padding: var(--sous-entete) var(--marge) clamp(48px, 6.2vw, 94px); }
.intro h1 { text-align: center; }
.trois-points { display: flex; justify-content: center; gap: 10px; margin-top: clamp(20px, 2.3vw, 34px); }
.trois-points i { width: 12px; height: 12px; border-radius: 50%; background: var(--vert-clair); }
.trois-points i:nth-child(2) { background: var(--vert); }
.trois-points i:nth-child(3) { background: var(--noir); }
.intro-texte {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1040px;
  margin: clamp(30px, 3.6vw, 54px) auto 0;
}
.intro-texte p { font-size: clamp(16px, 1.3vw, 19px); font-weight: 300; line-height: 1.45; color: var(--doux); }
.intro-texte .chapeau { font-size: clamp(19px, 1.75vw, 25px); line-height: 1.3; color: var(--noir); }

/* ---------- Stock ---------- */

.stock { padding: clamp(64px, 8.6vw, 128px) var(--joint) 0; }
.stock .tete { padding: 0 calc(var(--marge) - var(--joint)); }
.pastille-blanche { background: var(--blanc); }

.stock-grille {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--joint);
  margin-top: clamp(32px, 4.4vw, 64px);
}
.annonce {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  min-height: clamp(360px, 33vw, 480px);
  padding: clamp(20px, 2vw, 30px);
  overflow: hidden;
}
.annonce-large { grid-column: span 7; }
.annonce-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.annonce-nom {
  font-size: clamp(22px, 2.15vw, 31px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.annonce-prix {
  font-family: var(--f-chiffre);
  font-size: clamp(19px, 1.8vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.annonce-photo {
  flex: 1;
  width: 100%;
  min-height: 0;
  margin: 8px 0;
  object-fit: contain;
  transition: transform .6s cubic-bezier(.2, .75, .2, 1);
}
.annonce:hover .annonce-photo { transform: scale(1.04); }

.annonce-appel {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  background: var(--noir);
  color: var(--blanc);
}
.annonce-appel .annonce-nom { max-width: 9em; font-size: clamp(26px, 2.9vw, 42px); }
.annonce-appel .pastille { color: var(--noir); }
.annonce-appel-texte { max-width: 21em; margin-top: auto; font-size: clamp(16px, 1.3vw, 19px); font-weight: 300; line-height: 1.42; color: #a9a9a9; }
.annonce-pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puces li {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--gris);
  font-size: 14px;
  line-height: 34px;
  white-space: nowrap;
}

/* ---------- Garanties (panneau noir) ---------- */

.gages {
  margin: var(--joint);
  padding: clamp(48px, 6.4vw, 96px) calc(var(--marge) - var(--joint)) calc(var(--marge) - var(--joint));
  border-radius: var(--r-panneau);
  background: var(--noir);
  color: var(--blanc);
}
.gages .accent { color: var(--vert-clair); }
.gages-grille.par-trois { grid-template-columns: repeat(3, 1fr); }
.gages .tete-cote p { color: #a9a9a9; }
.gages-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--joint);
  margin-top: clamp(36px, 5vw, 76px);
}
.gage {
  display: grid;
  grid-template-rows: 1fr auto minmax(4.3em, auto);
  min-height: clamp(200px, 17.5vw, 250px);
  padding: clamp(18px, 1.9vw, 28px);
  border-radius: var(--r-carte);
  background: var(--anthracite);
}
.gage svg { width: 28px; height: 28px; color: var(--vert-clair); }
.gage h3 {
  font-family: var(--f-chiffre);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.gage p { margin-top: 8px; font-size: 15px; font-weight: 300; line-height: 1.4; color: #a9a9a9; }

/* Variante au contenu en retrait (page À propos) : le bandeau garde toute la largeur, mais son
   titre et ses cases s'alignent sur les bords de la photo du dessus et sont réduits en proportion.
   Sur tablette et téléphone, le mur n'a pas de marges : le contenu du bandeau non plus. */
@media (min-width: 1081px) {
  .gages.en-retrait {
    padding: clamp(40px, 5.4vw, 80px) calc(max(var(--cote), 50% - 660px) - var(--joint)) calc(var(--cote) / 2);
  }
  .gages.en-retrait .titre-xl { font-size: clamp(30px, 3.3vw, 50px); }
  .gages.en-retrait .gages-grille { margin-top: clamp(30px, 4.2vw, 64px); }
  .gages.en-retrait .gage { min-height: clamp(176px, 15vw, 214px); }
}

/* ---------- Étapes ---------- */

/* même retrait que le mur d'À propos : le bloc ne prend pas toute la largeur de l'écran */
.etapes {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--joint);
  width: min(100% - 2 * var(--cote), 1320px);
  margin: 0 auto var(--retrait);
}
/* le titre et son texte partent du bord du bloc */
.etapes-intro {
  --retrait-texte: 0px;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-top: clamp(24px, 2.9vw, 42px);
}
.etapes-intro > .titre-l { margin: 0 var(--retrait-texte); }
.etapes-intro > p {
  max-width: 17em;
  margin: 0 var(--retrait-texte) clamp(20px, 2.6vw, 38px);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 300;
  color: var(--doux);
}

/* Étapes en quinconce : la photo d'un côté, la carte de texte de l'autre, et l'inverse à l'étape
   suivante. La carte mord sur la photo ; le filet gris qui l'entoure reprend le joint entre cartes. */
.etapes-liste { display: grid; gap: var(--joint); }
.etape { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.etape-photo {
  grid-column: 1 / 9;
  grid-row: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-carte);
}
/* photo en hauteur : le cadrage descend vers le sujet */
.etape-photo-haute { object-position: 50% 60%; }
.etape-texte {
  grid-column: 8 / 13;
  grid-row: 1;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(18px, 1.9vw, 28px);
  box-shadow: 0 0 0 var(--joint) var(--gris);
}
.etape:nth-child(even) .etape-photo { grid-column: 5 / 13; }
.etape:nth-child(even) .etape-texte { grid-column: 1 / 6; }
.etape-num {
  font-family: var(--f-chiffre);
  font-size: clamp(26px, 2.5vw, 37px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--trait);
}
.etape h3 { font-family: var(--f-chiffre); font-size: clamp(16px, 1.3vw, 19px); font-weight: 600; letter-spacing: -0.01em; }
.etape p { font-size: 15px; font-weight: 300; line-height: 1.4; color: var(--doux); }

/* sur un écran assez haut, le titre et la carte restent en vue pendant que les étapes défilent */
@media (min-width: 861px) and (min-height: 700px) {
  .etapes-intro { position: sticky; top: var(--joint); }
}

/* ---------- À propos ---------- */

/* Le mur : un grand panneau, sur toute la largeur, que la photo couvre en entier. Le titre et le
   texte d'introduction se posent dessus, puis une fenêtre libre laisse voir le logo peint sur le mur.
   --echelle : largeur de la photo par rapport au panneau, donc taille du logo.
   Le fond reprend la teinte du béton, pour les écrans où la photo ne monte pas jusqu'en haut. */
.mur {
  --echelle: 125%;
  position: relative;
  isolation: isolate;
  margin: var(--retrait) var(--joint) 0;
  overflow: hidden;
  border-radius: var(--r-panneau);
  background: #66605c;
}
/* la photo est accrochée au centre de la fenêtre : son logo y tombe toujours, quelle que soit
   la hauteur du texte au-dessus ; elle déborde en haut et en bas, où le panneau la coupe.
   La fenêtre suit la largeur du mur, pour que le logo y garde la même place. */
.mur-logo { position: relative; aspect-ratio: 100 / 32; }
.mur-photo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: var(--echelle);
  max-width: none;
  height: auto;
  transform: translate(-56.9%, -49.85%);
}
/* un voile clair garde le titre et le texte lisibles sur le béton, et s'efface au-dessus du logo */
.mur .intro {
  padding-top: calc(var(--sous-entete) - var(--retrait));
  padding-bottom: clamp(56px, 7.4vw, 110px);
  background: linear-gradient(to bottom, rgba(233, 233, 233, .62) 0, rgba(233, 233, 233, .62) 62%, rgba(233, 233, 233, 0) 100%);
}
.mur .intro-texte p { font-weight: 400; color: #333; }
.mur .intro-texte .chapeau { color: var(--noir); }
/* sous le logo, le mur continue et montre la suite de la photo : un texte viendra s'y poser.
   Sa hauteur est plafonnée, pour que le panneau ne s'allonge pas sans fin sur les grands écrans. */
.mur::after { content: ''; display: block; aspect-ratio: 100 / 33; max-height: 380px; }

/* carte « Un seul interlocuteur », posée sous le bandeau du parcours : le titre à gauche, le texte
   et le bouton à droite, puis l'un sous l'autre sur les écrans étroits */
.carte-interlocuteur {
  margin: var(--joint) var(--joint) 0;
  padding: clamp(28px, 3.6vw, 54px) calc(var(--marge) - var(--joint));
}
/* sur ordinateur, son contenu prend le même retrait que celui du bandeau noir qui précède */
@media (min-width: 1081px) {
  .carte-interlocuteur { padding-inline: calc(max(var(--cote), 50% - 660px) - var(--joint)); }
}

/* ---------- Contact ---------- */

/* emplacement réservé à un avis client, en bas de chaque page : vide pour l'instant */
.avis { min-height: clamp(200px, 25.6vw, 370px); }

.contact { padding: 0 var(--joint); }
.contact-cartes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--joint);
}
.coordonnee {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: clamp(190px, 16vw, 230px);
  padding: clamp(18px, 1.9vw, 28px);
}
.coordonnee span { font-size: 15px; font-weight: 300; color: var(--doux); }
.coordonnee strong {
  font-family: var(--f-chiffre);
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.coordonnee .pastille { margin-top: auto; }

.coordonnee-carte { position: relative; overflow: hidden; }
.carte-france {
  position: absolute;
  top: 50%;
  right: clamp(14px, 2.4vw, 36px);
  width: auto;
  height: 88%;
  transform: translateY(-50%);
}

/* ---------- Fiche véhicule ---------- */

.fiche-tete { position: relative; padding: var(--sous-entete) var(--marge) 0; }
/* le lien de retour se loge dans la respiration entre l'en-tête et le titre */
.retour {
  position: absolute;
  top: calc((var(--sous-entete) - 50px) / 2);
  left: var(--marge);
  gap: 10px;
  padding: 0 24px 0 18px;
}
.retour svg { width: 20px; height: 20px; }
.fiche-titres { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.fiche-prix-bloc { text-align: right; }

.galerie {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, clamp(120px, 17.5vw, 262px));
  gap: var(--joint);
  padding: clamp(24px, 3vw, 44px) var(--joint) 0;
}
/* la première photo est la grande, les quatre suivantes sont les vignettes,
   les autres ne se voient que dans la visionneuse */
.vue {
  position: relative;
  grid-column: span 2;
  overflow: hidden;
  border-radius: var(--r-carte);
  background: var(--blanc);
}
.vue:first-child { grid-column: 1 / 9; grid-row: 1 / 3; }
.vue:nth-child(n+6) { display: none; }
.vue img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .75, .2, 1); }
.vue:hover img { transform: scale(1.04); }
.vue[data-plus]::after {
  content: attr(data-plus) ' photos';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(27, 27, 27, .66);
  color: var(--blanc);
  font-family: var(--f-chiffre);
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 600;
}

/* ---------- Visionneuse plein écran ---------- */

.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  padding: clamp(74px, 11vh, 104px) clamp(10px, 6.4vw, 112px) clamp(20px, 5vh, 56px);
  background: rgba(17, 17, 17, .96);
}
.visionneuse[hidden] { display: none; }
.visionneuse-photo {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--r-carte);
  object-fit: contain;
  transition: opacity .2s;
}
.visionneuse-photo.en-chargement { opacity: .3; }
.visionneuse .rond { position: absolute; }
.visionneuse-fermer { top: clamp(12px, 1.8vw, 24px); right: clamp(12px, 1.8vw, 24px); }
.visionneuse-prec, .visionneuse-suiv { top: 50%; transform: translateY(-50%); }
.visionneuse-prec { left: clamp(10px, 1.9vw, 28px); }
.visionneuse-suiv { right: clamp(10px, 1.9vw, 28px); }
.visionneuse-compteur {
  position: absolute;
  top: clamp(12px, 1.8vw, 24px);
  left: 50%;
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 22px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--anthracite);
  color: var(--blanc);
  font-family: var(--f-chiffre);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.fiche-specs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--joint);
  padding: var(--joint) var(--joint) 0;
}
.fiche-specs .spec { min-height: clamp(104px, 8.6vw, 128px); }

.fiche-corps {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: start;
  gap: var(--joint);
  padding: var(--joint) var(--joint) 0;
}
.fiche-colonne, .fiche-cote { display: grid; gap: var(--joint); }
.fiche-cote { position: sticky; top: var(--joint); }
.fiche-bloc { display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 2.9vw, 42px); }
.fiche-bloc p { font-size: clamp(16px, 1.3vw, 19px); font-weight: 300; line-height: 1.5; color: var(--doux); }
/* la description est un texte libre, aussi long que nécessaire : elle se lit comme un article */
.fiche-description { gap: 20px; }
.fiche-description p { font-size: clamp(17px, 1.4vw, 20px); font-weight: 400; line-height: 1.62; color: #3a3a3a; }
.fiche-bloc .puces li { height: 40px; padding: 0 18px; font-size: 15px; line-height: 40px; }

.coches { display: grid; gap: 12px; }
.coches li { position: relative; padding-left: 32px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.4; }
.coches li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .08em;
  width: 22px;
  height: 22px;
  background: var(--vert);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.500 4.500L19 7.500'/%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' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.500 4.500L19 7.500'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fiche-achat { min-height: 0; gap: 6px; }
.fiche-achat .fiche-achat-prix {
  font-family: var(--f-texte);
  font-size: clamp(38px, 3.9vw, 56px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.08;
}
.fiche-achat-boutons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(18px, 2vw, 28px); }
.fiche-achat .pastille { color: var(--noir); }
.fiche-achat .pastille-anthracite { background: #353535; color: var(--blanc); }

.caracteristiques { display: grid; margin: 0; }
.caracteristiques div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--gris);
}
.caracteristiques div:first-child { padding-top: 0; border-top: 0; }
.caracteristiques dt { font-size: 15px; font-weight: 300; color: var(--doux); }
.caracteristiques dd { margin: 0; font-family: var(--f-chiffre); font-size: 15px; font-weight: 600; text-align: right; }

/* ---------- Page Contact : formulaire et coordonnées ---------- */

.prise-contact {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--joint);
  padding: 0 var(--joint);
}
.formulaire {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.2vw, 32px);
  padding: clamp(24px, 2.9vw, 42px);
}
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; }
.champ { display: flex; flex-direction: column; gap: 8px; }
.champ-large { grid-column: 1 / -1; }
.champ span { font-size: 15px; font-weight: 300; color: var(--doux); }
.champ input, .champ select, .champ textarea {
  width: 100%;
  height: 50px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--gris);
  color: var(--noir);
  font: inherit;
}
.champ textarea {
  height: auto;
  min-height: 170px;
  padding: 16px 22px;
  border-radius: var(--r-carte);
  line-height: 1.45;
  resize: vertical;
}
.champ select {
  padding-right: 50px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1b1b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 22px;
  cursor: pointer;
}
.accord {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--doux);
  cursor: pointer;
}
.accord input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--vert); }
.formulaire-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.formulaire-etat { font-size: 15px; font-weight: 500; color: var(--vert); }

.coordonnees-cote { display: grid; grid-template-rows: auto auto 1fr; gap: var(--joint); }
.carte-appel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: clamp(190px, 16vw, 230px);
  padding: clamp(18px, 1.9vw, 28px);
  border-radius: var(--r-carte);
  background: var(--noir);
  color: var(--blanc);
}
.carte-appel span { font-size: 15px; font-weight: 300; color: #a9a9a9; }
.carte-appel p { font-family: var(--f-chiffre); font-size: clamp(16px, 1.4vw, 20px); font-weight: 600; letter-spacing: -0.01em; }
.carte-appel > a {
  margin-top: auto;
  font-size: clamp(32px, 3.5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
  transition: color .25s;
}
.carte-appel > a:hover { color: var(--vert-clair); }

/* ---------- Pages de texte (mentions légales, CGV, politique de confidentialité) ---------- */

/* une carte blanche sur toute la largeur ; le texte y tient en colonne étroite, pour se lire
   comme un article */
.texte {
  margin: 0 var(--joint);
  padding: clamp(28px, 4.4vw, 64px) max(var(--marge) - var(--joint), 50% - 400px);
  overflow-wrap: break-word;
}
.texte h2 {
  margin-top: clamp(32px, 3.6vw, 52px);
  font-family: var(--f-chiffre);
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.texte h2:first-child { margin-top: 0; }
.texte p, .texte li { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.62; color: #3a3a3a; }
.texte p { margin-top: 14px; }
.texte ul { margin-top: 10px; padding-left: 1.2em; list-style: disc; }
.texte li + li { margin-top: 4px; }
.texte li::marker { color: var(--vert); }
.texte strong { font-weight: 700; color: var(--noir); }
.texte a { text-decoration: underline; text-decoration-color: var(--vert); text-underline-offset: 3px; transition: color .2s; }
.texte a:hover { color: var(--vert); }
/* un numéro de téléphone ne se coupe pas en fin de ligne */
.texte a[href^='tel:'] { white-space: nowrap; }
/* sous-titre ou phrase d'ouverture du document, en tête de carte */
.texte .texte-chapeau { margin-top: 0; font-size: clamp(19px, 1.75vw, 25px); line-height: 1.3; color: var(--noir); }
/* date de version : sous le sous-titre, ou détachée du texte quand elle ferme la page */
.texte .texte-date { font-size: 15px; font-weight: 300; color: var(--doux); }
.texte .texte-date:last-child { margin-top: clamp(32px, 3.6vw, 52px); }

/* tableau : mêmes filets gris que les caractéristiques d'une fiche véhicule */
.texte table { width: 100%; margin-top: 18px; border-collapse: collapse; }
.texte th, .texte td { padding: 13px 0; border-top: 1px solid var(--gris); text-align: left; vertical-align: top; }
.texte th { padding-top: 0; border-top: 0; font-size: 15px; font-weight: 300; color: var(--doux); }
.texte td { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.5; color: #3a3a3a; }
.texte th:first-child, .texte td:first-child { width: 56%; padding-right: clamp(14px, 2vw, 28px); }
.texte td:first-child { font-weight: 500; color: var(--noir); }

/* encadré gris, comme dans le document papier : l'information légale sur les garanties (article 9.3
   des CGV) et le formulaire de rétractation */
.texte-encadre {
  margin-top: 18px;
  padding: clamp(16px, 1.9vw, 28px);
  border-radius: var(--r-carte);
  background: var(--gris);
}
.texte .texte-encadre p { font-size: 15px; line-height: 1.55; }
.texte .texte-encadre p:first-child { margin-top: 0; }
/* ligne à compléter du formulaire : des pointillés jusqu'au bord de l'encadré ; s'il reste trop
   peu de place après l'intitulé, ils passent dessous, sur toute la largeur */
.texte .a-remplir { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin-top: 20px; }
.texte .a-remplir::after { content: '\00a0'; flex: 1 1 8em; line-height: 1.1; border-bottom: 1px dotted var(--doux); }
/* le lien de l'article 8.3 amène le titre de l'annexe un peu sous le bord de l'écran */
.texte h2[id] { scroll-margin-top: 20px; }

/* ============ PIED DE PAGE ============ */

.pied {
  margin: var(--joint);
  padding: clamp(32px, 4.4vw, 64px) calc(var(--marge) - var(--joint)) calc(var(--marge) - var(--joint));
  border-radius: var(--r-panneau);
  background: var(--noir);
  color: var(--blanc);
}
.pied-haut { display: grid; grid-template-columns: 5fr 7fr; gap: 32px; align-items: start; }
.pied-logo img { width: clamp(180px, 19vw, 270px); height: auto; }
.pied-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pied-nav div { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.pied-nav h3 { margin-bottom: 8px; font-family: var(--f-chiffre); font-size: 15px; font-weight: 600; }
.pied-nav a { font-size: 15px; font-weight: 300; color: #a9a9a9; transition: color .2s; }
.pied-nav a:hover { color: var(--blanc); }
.pied-legal {
  margin-top: clamp(36px, 5vw, 72px);
  padding-top: 20px;
  border-top: 1px solid #3a3a3a;
  font-size: 13px;
  font-weight: 300;
  color: #8d8d8d;
}

/* ============ ADAPTATIF ============ */

@media (max-width: 1080px) {
  .nav .pastille { min-width: 0; padding: 0 22px; }

  /* tablette : essai et garantie côte à côte, les six caractéristiques sur une ligne en dessous */
  .bento { grid-template-columns: repeat(2, 1fr); }
  .carte-essai { grid-column: 1; grid-row: 1; }
  .carte-garantie { grid-column: 2; grid-row: 1; }
  .specs { grid-column: 1 / -1; grid-row: 2; }
  .specs-jeu { grid-template-columns: repeat(6, 1fr); grid-template-rows: auto; }
  .spec { min-height: 104px; }

  /* écrans étroits : la photo est grossie pour que le logo reste lisible. Là où elle ne monte
     pas assez haut derrière le texte, son bord supérieur se fond dans la teinte du béton. */
  .mur { --echelle: 138%; }
  .mur-logo { aspect-ratio: 100 / 40; }
  .mur-photo {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%);
    mask-image: linear-gradient(to bottom, transparent, #000 14%);
  }

  /* les étapes reprennent toute la largeur, et leur titre la marge du site */
  .etapes { width: auto; margin: 0; padding: 0 var(--joint); }
  .etapes-intro { --retrait-texte: calc(var(--marge) - var(--joint)); }
}

@media (max-width: 860px) {
  .entete { grid-template-columns: 1fr auto; }
  .burger { display: inline-grid; }
  .nav {
    position: absolute;
    top: calc(100% + 10px);
    left: var(--marge);
    right: var(--marge);
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border-radius: var(--r-panneau);
    background: var(--noir);
  }
  .nav.est-ouverte { display: flex; }
  .nav .pastille { width: 100%; }
  .nav .pastille.est-active { background: var(--vert); }

  .vitrine-titres, .fiche-titres { flex-direction: column; gap: 14px; }
  .vitrine-prix, .fiche-prix-bloc { text-align: left; }
  .vitrine-prix .sous-titre, .fiche-prix-bloc .sous-titre { margin-top: 6px; }

  .galerie { grid-template-columns: repeat(4, 1fr); grid-template-rows: 58vw 21vw; }
  .vue { grid-column: span 1; }
  .vue:first-child { grid-column: 1 / -1; grid-row: 1; }
  .vue[data-plus]::after { content: attr(data-plus); font-size: 17px; }
  .fiche-specs { grid-template-columns: repeat(3, 1fr); }
  .fiche-corps { grid-template-columns: 1fr; }
  /* sur mobile, le prix et les boutons passent avant la description */
  .fiche-cote { position: static; order: -1; }
  .sous-titre { margin-top: 8px; }
  .scene { height: 62vw; margin-top: 0; }
  .auto { width: 92%; }
  .auto[data-pos='gauche'] { --dx: -64%; --echelle: .3; }
  .auto[data-pos='droite'] { --dx: 64%; --echelle: .3; }
  .podium { width: 84%; }
  .fleche { width: 42px; height: 42px; }

  .bento { grid-template-columns: repeat(3, 1fr); }
  .carte-essai, .carte-garantie, .specs { grid-column: 1 / -1; grid-row: auto; }
  .carte-essai, .carte-garantie { min-height: 220px; }
  .specs-jeu { grid-template-columns: repeat(3, 1fr); }

  .tete { grid-template-columns: 1fr; align-items: start; }
  .annonce, .annonce-large { grid-column: 1 / -1; min-height: 340px; }
  .annonce-appel { min-height: 250px; }
  .gages-grille { grid-template-columns: repeat(2, 1fr); }
  .gages-grille.par-trois { grid-template-columns: 1fr; }
  .etapes, .pied-haut, .prise-contact { grid-template-columns: 1fr; }
  .mur { --echelle: 152%; }
  .mur-logo { aspect-ratio: 100 / 46; }
  .contact-cartes { grid-template-columns: 1fr; }
  .coordonnee { min-height: 170px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .pastille { height: 46px; padding: 0 22px; font-size: 16px; }
  .rond { width: 46px; height: 46px; }
  .mur { --echelle: 170%; }
  .mur-logo { aspect-ratio: 100 / 54; }
  .mur::after { aspect-ratio: 100 / 56; }
  .annonce-tete { flex-direction: column; gap: 4px; }
  .annonce-pied { flex-direction: column; align-items: flex-start; }
  .gages-grille { grid-template-columns: 1fr; }
  .gage { min-height: 170px; }
  .champs { grid-template-columns: 1fr; }
  /* téléphone : la photo en pleine largeur ; la carte, dessous, remonte sur elle,
     calée à droite puis à gauche d'une étape à la suivante */
  .etapes-liste { gap: 14px; }
  .etape { grid-template-columns: minmax(0, 1fr); }
  .etape .etape-photo, .etape:nth-child(even) .etape-photo { grid-column: 1; }
  .etape .etape-texte, .etape:nth-child(even) .etape-texte { grid-column: 1; grid-row: 2; width: 86%; margin-top: -34px; }
  .etape .etape-texte { justify-self: end; }
  .etape:nth-child(even) .etape-texte { justify-self: start; }
  .pied-nav { grid-template-columns: 1fr; }
}

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

/* ==========================================================================
   ADAPTATIONS GUTENBERG
   Ajoutées par scripts/vers-blocs.ps1 à la suite du CSS de la maquette, qui reste tel quel
   au-dessus. Ici, uniquement ce que le passage en blocs natifs change dans la structure :
   une image devient figure > img, un bouton devient div > a, un intitulé devient un paragraphe.

   Rappel : WordPress imprime le CSS d'un bloc après cette feuille. Pour l'emporter sur un style
   de bloc, une règle doit être plus précise, pas seulement plus tardive.
   ========================================================================== */

/* ---------- Espacement automatique ---------- */

/* coupé à la source dans theme.json (blockGap à 0) ; filet de sécurité à spécificité nulle,
   pour ne jamais écraser les marges des composants */
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image { margin: 0; }
img { height: auto; }

/* WordPress remet à zéro la marge haute du premier bloc d'un groupe et la marge basse du dernier :
   les deux composants concernés la reprennent ici */
.wp-block-group.mur { margin-top: var(--retrait); }
.etapes .etapes-intro > p { margin-bottom: clamp(20px, 2.6vw, 38px); }

/* ---------- Mots en couleur ---------- */

/* dans un titre, l'italique de l'éditeur sert d'accent : le mot passe en vert, sans s'incliner */
.wp-block-heading em, .titre-vitrine em { font-style: normal; color: var(--vert); }
.gages .wp-block-heading em { color: var(--vert-clair); }
.vitrine-prix .titre-vitrine em, .fiche-prix-bloc .titre-vitrine em { color: var(--doux); }

/* ---------- Pictogrammes ---------- */

/* les pictogrammes ne sont plus dans la page : ils sont dessinés par un masque, d'après la classe
   de la case (les dessins eux-mêmes sont ajoutés en fin de feuille par le script) */
.spec::before, .gage::before, .fleche::before, .wp-block-button.bouton-retour .wp-block-button__link::before {
  content: '';
  display: block;
  flex: none;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.spec::before { width: 24px; height: 24px; margin-bottom: 8px; }
.gage::before { width: 28px; height: 28px; color: var(--vert-clair); }
.fleche::before { width: 24px; height: 24px; }

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

/* le lien du bloc Bouton reprend la pastille de la maquette */
.wp-block-button.bouton .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--blanc);
  color: var(--noir);
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s, color .2s, transform .2s;
}
.wp-block-button.bouton .wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button.bouton-noir .wp-block-button__link { background: var(--noir); color: var(--blanc); }
.wp-block-button.bouton-noir .wp-block-button__link:hover { background: #000; }
.wp-block-button.bouton-anthracite .wp-block-button__link { background: #353535; color: var(--blanc); }

/* là où la maquette poussait la pastille en bas de sa carte, c'est le bloc Boutons qui est poussé */
.carte-essai > .wp-block-buttons, .coordonnee > .wp-block-buttons { margin-top: auto; }

/* le lien de retour de la fiche : la position va au bloc Boutons, la forme au lien */
.wp-block-buttons.retour { gap: 0; padding: 0; }
.wp-block-button.bouton-retour .wp-block-button__link { gap: 10px; padding: 0 24px 0 18px; }
.wp-block-button.bouton-retour .wp-block-button__link::before { width: 20px; height: 20px; }

/* ---------- Menu (bloc Navigation) ---------- */

.wp-block-navigation.menu { gap: 10px; }
.wp-block-navigation.menu .wp-block-navigation__container { flex-wrap: nowrap; gap: 10px; }
.wp-block-navigation.menu .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  height: 50px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--blanc);
  color: var(--noir);
  font-size: 17px;
  font-weight: 400;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s, color .2s, transform .2s;
}
.wp-block-navigation.menu .wp-block-navigation-item__content:hover { transform: translateY(-1px); }
.wp-block-navigation.menu .current-menu-item > .wp-block-navigation-item__content { background: var(--noir); color: var(--blanc); }

/* ---------- Images ---------- */

/* un logo cliquable : le lien ne laisse pas d'espace de ligne sous l'image */
.wp-block-image.logo a, .wp-block-image.pied-logo a { display: block; }

/* la classe du composant est sur la figure : les règles de place de la maquette s'y appliquent
   telles quelles ; ici, le cadrage de l'image à l'intérieur */
.wp-block-image.auto img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.wp-block-image.carte-essai-photo img { width: 100%; }
.wp-block-image.carte-garantie-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 22% 60%; }
/* la photo d'une annonce garde sa hauteur naturelle et se centre dans la place qui reste,
   comme le faisait object-fit: contain sur l'image seule */
.wp-block-image.annonce-photo { display: grid; align-items: center; margin: 8px 0; }
.wp-block-image.annonce-photo img { width: 100%; height: auto; }
.wp-block-image.etape-photo { overflow: hidden; }
.wp-block-image.etape-photo img { width: 100%; height: 100%; object-fit: cover; }
.wp-block-image.etape-photo-haute img { object-position: 50% 60%; }
.wp-block-image.mur-photo img { width: 100%; max-width: none; height: auto; }
.wp-block-image.vue { cursor: pointer; }
.wp-block-image.vue img { width: 100%; height: 100%; object-fit: cover; }

/* la carte de France est un décor : elle est posée par la feuille de style, plus dans la page */
.coordonnee-carte::after {
  content: '';
  position: absolute;
  top: 50%;
  right: clamp(14px, 2.4vw, 36px);
  height: 88%;
  aspect-ratio: 1036 / 1020;
  transform: translateY(-50%);
  background: url('assets/img/carte-france.svg') center / contain no-repeat;
}

/* ---------- Vitrine ---------- */

/* le podium : un décor, dessiné par la scène elle-même */
.scene::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 31px;
  width: 58%;
  height: 34%;
  transform: translateX(-50%);
  border: 1px solid rgba(0, 0, 0, .13);
  border-radius: 50%;
  clip-path: inset(52% 0 0 0);
  background: radial-gradient(closest-side, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)) 50% 26.67% / 76% 70% no-repeat;
}
/* position de départ de chaque véhicule, portée par une classe de l'image
   (le script la traduit ensuite en data-pos) */
.auto.pos-centre { --dx: 0%; --dy: 0%; --echelle: 1; }
.auto.pos-gauche { --dx: -71%; --dy: -9%; --echelle: .46; cursor: pointer; }
.auto.pos-droite { --dx: 71%; --dy: -9%; --echelle: .46; cursor: pointer; }
.auto.pos-attente { --dx: 130%; --dy: -9%; --echelle: .46; opacity: 0; pointer-events: none; }

/* les flèches et les ronds de choix sont des paragraphes : leur texte reste modifiable et lu
   par les lecteurs d'écran, le script les rend cliquables */
.fleche { font-size: 0; color: var(--noir); cursor: pointer; }
.choix-rond { display: grid; place-items: center; line-height: 1; cursor: pointer; user-select: none; }

/* ---------- Titres d'introduction : les trois points ---------- */

.intro .titre-xl::after {
  content: '';
  display: block;
  width: 56px;
  height: 12px;
  margin: clamp(20px, 2.3vw, 34px) auto 0;
  background:
    radial-gradient(circle at 6px 50%, var(--vert-clair) 5.6px, transparent 6.4px),
    radial-gradient(circle at 28px 50%, var(--vert) 5.6px, transparent 6.4px),
    radial-gradient(circle at 50px 50%, var(--noir) 5.6px, transparent 6.4px);
}

/* ---------- Intitulés et valeurs (anciens span et strong, devenus paragraphes) ---------- */

.spec .valeur { font-family: var(--f-chiffre); font-size: clamp(14px, 1.3vw, 19px); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.spec .etiquette { font-size: clamp(12px, .95vw, 14px); font-weight: 300; color: var(--doux); }

.coordonnee .etiquette { font-size: 15px; font-weight: 300; color: var(--doux); }
.coordonnee .valeur { font-family: var(--f-chiffre); font-size: clamp(16px, 1.4vw, 20px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }

.carte-appel .etiquette { font-family: var(--f-texte); font-size: 15px; font-weight: 300; letter-spacing: 0; color: #a9a9a9; }
.carte-appel .numero {
  margin-top: auto;
  font-family: var(--f-texte);
  font-size: clamp(32px, 3.5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
}
.carte-appel .numero a { transition: color .25s; }
.carte-appel .numero a:hover { color: var(--vert-clair); }

.etape .etape-num { font-family: var(--f-chiffre); font-size: clamp(26px, 2.5vw, 37px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--trait); }

.caracteristiques .terme { font-size: 15px; font-weight: 300; line-height: 1.45; color: var(--doux); }
.caracteristiques .valeur { font-family: var(--f-chiffre); font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--noir); text-align: right; }

.pied-nav p { font-size: 15px; }

/* ---------- Emplacement de l'avis client (bloc Espacement) ---------- */

.wp-block-spacer.avis { height: clamp(200px, 25.6vw, 370px) !important; }

/* ---------- Tableau des pages de texte ---------- */

.texte .wp-block-table { margin: 0; overflow: visible; }
.texte .wp-block-table thead { border-bottom: 0; }
.texte .wp-block-table th, .texte .wp-block-table td { padding: 13px 0; border: 0; border-top: 1px solid var(--gris); text-align: left; vertical-align: top; }
.texte .wp-block-table th { padding-top: 0; border-top: 0; font-size: 15px; font-weight: 300; color: var(--doux); }
.texte .wp-block-table th:first-child, .texte .wp-block-table td:first-child { width: 56%; padding-right: clamp(14px, 2vw, 28px); }

/* ---------- Formulaire (Contact Form 7) ---------- */

/* l'extension enrobe le formulaire et chaque champ : l'enrobage se fait oublier */
.prise-contact > .wpcf7 { display: grid; }
.wpcf7 .hidden-fields-container { display: none; }
.champ .wpcf7-form-control-wrap { display: block; font: inherit; color: inherit; }
.champ .wpcf7-form-control { display: block; }
.accord .wpcf7-form-control-wrap, .accord .wpcf7-acceptance, .accord .wpcf7-list-item { display: block; margin: 0; }
.accord .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.wpcf7-submit { border: 0; font-family: inherit; cursor: pointer; }
.wpcf7-submit:disabled { opacity: .45; cursor: not-allowed; }
.formulaire .wpcf7-spinner { display: none; }
.formulaire .wpcf7-not-valid-tip { margin-top: 6px; font-size: 14px; font-weight: 400; color: #b3261e; }
/* le message de retour : sans cadre, à la manière de la maquette (l'extension le cadre de couleur) */
.wpcf7 form.formulaire .wpcf7-response-output { margin: 0; padding: 0; border: 0; font-size: 15px; font-weight: 500; color: var(--vert); }
.wpcf7 form.formulaire.invalid .wpcf7-response-output,
.wpcf7 form.formulaire.failed .wpcf7-response-output,
.wpcf7 form.formulaire.aborted .wpcf7-response-output,
.wpcf7 form.formulaire.spam .wpcf7-response-output,
.wpcf7 form.formulaire.unaccepted .wpcf7-response-output { color: #b3261e; }

/* ---------- Adaptatif ---------- */

@media (max-width: 1080px) {
  .wp-block-navigation.menu .wp-block-navigation-item__content { min-width: 0; padding: 0 22px; }
}

@media (max-width: 860px) {
  /* le menu passe derrière son bouton dès 860 px, comme dans la maquette (WordPress attend 600 px) */
  .wp-block-navigation.menu .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--blanc);
    color: var(--noir);
  }
  .wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
  /* panneau ouvert : fond noir, pastilles pleine largeur ; sans cela il s'ouvre blanc sur blanc */
  .wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open {
    padding: clamp(18px, 2.6vw, 38px) var(--marge);
    background-color: var(--noir) !important;
    color: var(--blanc) !important;
  }
  .wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch; padding-top: 70px; }
  .wp-block-navigation.menu .is-menu-open .wp-block-navigation__container { flex-direction: column; align-items: stretch; gap: 6px; width: 100%; }
  .wp-block-navigation.menu .is-menu-open .wp-block-navigation-item { display: block; width: 100%; }
  .wp-block-navigation.menu .is-menu-open .wp-block-navigation-item__content { width: 100%; }
  .wp-block-navigation.menu .is-menu-open .current-menu-item > .wp-block-navigation-item__content { background: var(--vert); color: var(--blanc); }
  .wp-block-navigation.menu .wp-block-navigation__responsive-container-close {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--blanc);
    color: var(--noir);
  }

  .scene::before { width: 84%; }
  .auto.pos-gauche { --dx: -64%; --echelle: .3; }
  .auto.pos-droite { --dx: 64%; --echelle: .3; }
}

@media (max-width: 560px) {
  .wp-block-button.bouton .wp-block-button__link,
  .wp-block-navigation.menu .wp-block-navigation-item__content { height: 46px; padding: 0 22px; font-size: 16px; }
  .wp-block-navigation.menu .wp-block-navigation__responsive-container-open:not(.always-shown),
  .wp-block-navigation.menu .wp-block-navigation__responsive-container-close { width: 46px; height: 46px; }
}

/* ---------- Dessins des pictogrammes ---------- */

.spec-energie::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V5.5A1.5 1.5 0 0 1 6.5 4h6A1.5 1.5 0 0 1 14 5.5V20M4 20h11M7 8h5v4H7zM14 11h2a1.5 1.5 0 0 1 1.5 1.5V16a1.5 1.5 0 0 0 3 0V9l-2.5-2.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V5.5A1.5 1.5 0 0 1 6.5 4h6A1.5 1.5 0 0 1 14 5.5V20M4 20h11M7 8h5v4H7zM14 11h2a1.5 1.5 0 0 1 1.5 1.5V16a1.5 1.5 0 0 0 3 0V9l-2.5-2.5'/%3E%3C/svg%3E"); }
.spec-annee::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='14.5' rx='1.5'/%3E%3Cpath d='M4 10h16M8.5 3.5v4M15.5 3.5v4M8 14h2m4 0h2M8 17h2m4 0h2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='14.5' rx='1.5'/%3E%3Cpath d='M4 10h16M8.5 3.5v4M15.5 3.5v4M8 14h2m4 0h2M8 17h2m4 0h2'/%3E%3C/svg%3E"); }
.spec-boite::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2'/%3E%3Ccircle cx='12' cy='6' r='2'/%3E%3Ccircle cx='18' cy='6' r='2'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='12' cy='18' r='2'/%3E%3Cpath d='M6 8v8M12 8v8M18 8v3a1 1 0 0 1-1 1H6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2'/%3E%3Ccircle cx='12' cy='6' r='2'/%3E%3Ccircle cx='18' cy='6' r='2'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='12' cy='18' r='2'/%3E%3Cpath d='M6 8v8M12 8v8M18 8v3a1 1 0 0 1-1 1H6'/%3E%3C/svg%3E"); }
.spec-carrosserie::before, .gage-voiture::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 15.5v-2.2a2 2 0 0 1 1.6-2l3-.6 2.3-3a2 2 0 0 1 1.6-.8h3.2a2 2 0 0 1 1.7.9l2 3.1 1.4.5a2 2 0 0 1 1.3 1.9v2.2h-2M7 15.5h8.5'/%3E%3Ccircle cx='5.5' cy='15.8' r='1.7'/%3E%3Ccircle cx='17.5' cy='15.8' r='1.7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 15.5v-2.2a2 2 0 0 1 1.6-2l3-.6 2.3-3a2 2 0 0 1 1.6-.8h3.2a2 2 0 0 1 1.7.9l2 3.1 1.4.5a2 2 0 0 1 1.3 1.9v2.2h-2M7 15.5h8.5'/%3E%3Ccircle cx='5.5' cy='15.8' r='1.7'/%3E%3Ccircle cx='17.5' cy='15.8' r='1.7'/%3E%3C/svg%3E"); }
.spec-puissance::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V6.5h5V9M9.5 6.5V4.5M4 13H2.5M4 10.5v5M21.5 11v5M7 9H5.5A1.5 1.5 0 0 0 4 10.5v5L6.5 18h8l2.5-2.5h2.5v-5H17L15 9Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V6.5h5V9M9.5 6.5V4.5M4 13H2.5M4 10.5v5M21.5 11v5M7 9H5.5A1.5 1.5 0 0 0 4 10.5v5L6.5 18h8l2.5-2.5h2.5v-5H17L15 9Z'/%3E%3C/svg%3E"); }
.spec-km::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 17.5a9 9 0 1 1 15 0Z'/%3E%3Cpath d='m12 13 4-4.5'/%3E%3Ccircle cx='12' cy='13' r='1.3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 17.5a9 9 0 1 1 15 0Z'/%3E%3Cpath d='m12 13 4-4.5'/%3E%3Ccircle cx='12' cy='13' r='1.3'/%3E%3C/svg%3E"); }
.gage-controle::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3.5h6l1 2.5h2.5A1.5 1.5 0 0 1 20 7.5v11A1.5 1.5 0 0 1 18.5 20h-13A1.5 1.5 0 0 1 4 18.5v-11A1.5 1.5 0 0 1 5.5 6H8Z'/%3E%3Cpath d='m8.5 13 2.5 2.5 4.5-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3.5h6l1 2.5h2.5A1.5 1.5 0 0 1 20 7.5v11A1.5 1.5 0 0 1 18.5 20h-13A1.5 1.5 0 0 1 4 18.5v-11A1.5 1.5 0 0 1 5.5 6H8Z'/%3E%3Cpath d='m8.5 13 2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.gage-document::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h8l4 4V19a1.5 1.5 0 0 1-1.5 1.5h-10.5A1.5 1.5 0 0 1 4.5 19V5A1.5 1.5 0 0 1 6 3.5Z'/%3E%3Cpath d='M14 3.5v4h4M8 12h8M8 16h5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h8l4 4V19a1.5 1.5 0 0 1-1.5 1.5h-10.5A1.5 1.5 0 0 1 4.5 19V5A1.5 1.5 0 0 1 6 3.5Z'/%3E%3Cpath d='M14 3.5v4h4M8 12h8M8 16h5'/%3E%3C/svg%3E"); }
.gage-loupe::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5M11 8v3.5M11 14v.2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5M11 8v3.5M11 14v.2'/%3E%3C/svg%3E"); }
.gage-bouclier::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 5 6v5.5c0 4.3 2.9 7.3 7 9 4.1-1.7 7-4.7 7-9V6Z'/%3E%3Cpath d='m9 12 2.2 2.2L15.5 10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 5 6v5.5c0 4.3 2.9 7.3 7 9 4.1-1.7 7-4.7 7-9V6Z'/%3E%3Cpath d='m9 12 2.2 2.2L15.5 10'/%3E%3C/svg%3E"); }
.gage-diplome::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 9 12 4.5 21.5 9 12 13.5Z'/%3E%3Cpath d='M6.5 11.2v4.3c0 1 2.5 2.5 5.5 2.5s5.5-1.5 5.5-2.5v-4.3M21.5 9v5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 9 12 4.5 21.5 9 12 13.5Z'/%3E%3Cpath d='M6.5 11.2v4.3c0 1 2.5 2.5 5.5 2.5s5.5-1.5 5.5-2.5v-4.3M21.5 9v5'/%3E%3C/svg%3E"); }
.gage-reglage::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3.5v2.5M12 18v2.5M3.5 12H6M18 12h2.5M6 6l1.8 1.8M16.2 16.2 18 18M6 18l1.8-1.8M16.2 7.8 18 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3.5v2.5M12 18v2.5M3.5 12H6M18 12h2.5M6 6l1.8 1.8M16.2 16.2 18 18M6 18l1.8-1.8M16.2 7.8 18 6'/%3E%3C/svg%3E"); }
.fleche-prec::before, .wp-block-button.bouton-retour .wp-block-button__link::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4m6-6-6 6 6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4m6-6-6 6 6 6'/%3E%3C/svg%3E"); }
.fleche-suiv::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6'/%3E%3C/svg%3E"); }