/*
Theme Name: Détection Métaux
Theme URI: https://detection-metaux.fr
Author: Détection Métaux
Description: Thème bloc sur mesure pour detection-metaux.fr : portiques et magnétomètres de détection de métaux, guides, boutique WooCommerce. Après activation : Apparence › Installer Détection Métaux.
Version: 1.1.3
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: detectionmetaux
Tags: block-theme, full-site-editing, e-commerce, light
*/

/* Détection Métaux — feuille partagée par toutes les pages.
   Registre : « journal littéraire » — canevas parchemin, serif de titrage en graisse 400,
   sans-serif utilitaire, filets verts-gris, un seul bleu en contour, un seul aplat saturé. */

:root {
  --parchemin: #fefffc;
  --papier: #ffffff;
  --lin: #f9faf7;
  --encre: #171717;
  --graphite: #2c2c2c;
  --charbon: #444141;
  --cendre: #646464;
  --brume: #b4b8b4;
  --filet: #dee2de;
  --crepuscule: #282834;
  --nuit: #1f1f29;
  --signal: #41a1cf;
  --azur: #0081c0;

  --serif: "Fraunces", "Recoleta", Georgia, serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --ombre-carte: rgba(0,0,0,.08) 0 1px 1px 0, rgba(0,0,0,.08) 0 4px 5px 0;
  --ombre-diagramme: rgba(0,0,0,.05) 0 1px 8px 0;
  --ombre-nav: rgba(0,0,0,.15) 0 2px 6px 0;
  --ombre-atmo: rgba(0,0,0,.06) 0 2px 2px 0, rgba(0,0,0,.04) 0 0 0 5px;

  --largeur: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--parchemin); color: var(--charbon);
  font-family: var(--sans); font-size: 16px; line-height: 1.5; letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.enveloppe { width: min(var(--largeur), 100% - 48px); margin-inline: auto; }

/* ---------- Typographie ---------- */
.titre-xl, .titre-lg, .titre, .titre-sm, .hero-titre {
  font-family: var(--serif); font-weight: 400; color: var(--graphite);
  font-feature-settings: "liga" 0; text-wrap: balance; hyphens: none;
}
.hero-titre { font-size: 54px; line-height: 1.1; letter-spacing: -.02em; }
.titre-lg { font-size: 48px; line-height: 1.1; letter-spacing: -.02em; }
.titre { font-size: 40px; line-height: 1.1; letter-spacing: -.02em; }
.titre-sm { font-size: 27px; line-height: 1.3; letter-spacing: -.04em; }
.titre-clair, .hero-titre { color: #ffffff; }
.surtitre { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--cendre); margin-bottom: 16px; letter-spacing: -.01em; }
.surtitre-clair { color: rgba(255,255,255,.82); }
.texte-lead { font-size: 18px; line-height: 1.5; color: var(--charbon); }
.texte { font-size: 16px; line-height: 1.5; color: var(--charbon); }
.texte-sm { font-size: 15px; line-height: 1.45; color: var(--cendre); }
.texte-clair { color: rgba(255,255,255,.9); }
.texte-etroit { max-width: 440px; }
.legende { font-size: 13px; line-height: 1.3; color: var(--cendre); }
.etiquette { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--cendre); }

/* ---------- Boutons et liens ---------- */
.boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.bouton {
  display: inline-flex; align-items: center; gap: 10px; border-radius: 8px; border: 1px solid transparent;
  font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: -.01em; padding: 11px 16px; transition: background .2s, color .2s, border-color .2s;
}
.bouton svg { width: 16px; height: 16px; }
.bouton-rond { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; margin-right: -6px; }
.bouton-rond svg { width: 12px; height: 12px; }
.bouton-signal { border-color: var(--signal); color: var(--signal); background: transparent; }
.bouton-signal:hover { background: rgba(65,161,207,.08); }
.hero .bouton-signal, .atmosphere .bouton-signal { color: #bfe3f4; border-color: #7cc3e6; }
.bouton-contour { border-color: var(--crepuscule); color: var(--crepuscule); }
.bouton-contour:hover { background: var(--lin); }
.bouton-clair { border-color: rgba(255,255,255,.75); color: #ffffff; }
.bouton-clair:hover { background: rgba(255,255,255,.1); }
.bouton-plein { background: var(--nuit); color: #ffffff; border-color: var(--crepuscule); padding: 12px 18px; }
.bouton-plein:hover { background: var(--crepuscule); }
.lien { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: var(--crepuscule); }
.lien svg { width: 16px; height: 16px; transition: transform .2s; }
.lien:hover svg { transform: translateX(3px); }

/* ---------- Navigation en pilule ---------- */
.entete { position: fixed; z-index: 50; top: 18px; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; padding-inline: 12px; }
.pilule {
  pointer-events: auto; display: flex; align-items: center; gap: 28px; padding: 7px 7px 7px 18px;
  border-radius: 50px; border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: var(--ombre-nav);
  color: #ffffff; transition: background .3s, color .3s, border-color .3s;
}
.entete.est-defile .pilule, .page-claire .pilule { background: rgba(254,255,252,.86); color: var(--crepuscule); border-color: var(--crepuscule); }
.logo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: 19px; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.logo-glyphe { width: 24px; height: 24px; }
.nav { display: flex; gap: 24px; }
.nav a { font-size: 15px; font-weight: 500; line-height: 1; opacity: .9; transition: opacity .2s; }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.pilule-cta { border-radius: 50px; padding: 10px 16px; border-color: currentColor; color: inherit; }
.pilule-cta:hover { background: rgba(255,255,255,.12); }
.menu-bascule { display: none; width: 40px; height: 40px; border-radius: 50%; position: relative; }
.menu-bascule span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: currentColor; transition: transform .25s; }
.menu-bascule span:first-child { top: 16px; } .menu-bascule span:last-child { top: 23px; }
.menu-bascule[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-bascule[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- Héros vidéo ---------- */
.hero { position: relative; min-height: min(100vh, 960px); min-height: min(100svh, 960px); overflow: hidden; isolation: isolate; display: flex; align-items: flex-end; padding: 0 0 48px 48px; background: var(--nuit); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.72) contrast(1.02); }
.hero-voile { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, rgba(31,31,41,.35) 0%, rgba(31,31,41,0) 28%, rgba(31,31,41,.05) 55%, rgba(31,31,41,.55) 100%),
  linear-gradient(90deg, rgba(31,31,41,.45) 0%, rgba(31,31,41,0) 55%); }
.hero-carte {
  width: min(640px, 100%); padding: 40px 40px 36px; border-radius: 24px;
  background: rgba(31,31,41,.28); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
}
.hero-texte { margin-top: 20px; font-size: 18px; line-height: 1.5; color: rgba(255,255,255,.9); max-width: 520px; }
.video-pause {
  position: absolute; right: 48px; bottom: 48px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  color: #ffffff; border: 1px solid rgba(255,255,255,.55); background: rgba(31,31,41,.25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.video-pause svg { width: 16px; height: 16px; }
.video-pause .ico-play, .video-pause.est-en-pause .ico-pause { display: none; }
.video-pause.est-en-pause .ico-play { display: block; }

/* ---------- Sections ---------- */
.section { padding: 96px 0 0; }
.section-derniere { padding-bottom: 0; }
.section-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.section-tete .titre { max-width: 680px; }

.intro { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: end; }
.intro-texte { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 64px; border-top: 1px solid var(--filet); }
.chiffre { padding: 28px 24px 0 0; display: flex; flex-direction: column; gap: 8px; }
.chiffre + .chiffre { padding-left: 24px; border-left: 1px solid var(--filet); }
.chiffre-valeur { font-family: var(--serif); font-size: 54px; line-height: 1; letter-spacing: -.03em; color: var(--graphite); }
.chiffre-libelle { font-size: 15px; line-height: 1.4; color: var(--cendre); max-width: 200px; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.duo-texte { display: flex; flex-direction: column; gap: 20px; }
.duo-texte .surtitre { margin-bottom: -4px; }
.liste-check { display: flex; flex-direction: column; gap: 10px; }
.liste-check li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; color: var(--charbon); }
.liste-check svg { width: 18px; height: 18px; color: var(--signal); flex: none; margin-top: 3px; }

/* ---------- Diagramme animé (carte « diagramme ») ---------- */
.diagramme {
  border-radius: 16px; background: rgba(255,255,255,.7); border: 1px solid var(--filet); box-shadow: var(--ombre-diagramme);
  padding: 20px 20px 16px;
}
.diagramme svg { width: 100%; height: auto; display: block; }
.diagramme figcaption { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cendre); margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--filet); }
.point-alerte { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); animation: clignote 6s linear infinite; }
.trait-sol { stroke: var(--brume); stroke-width: 1; }
.trait-cadre { fill: none; stroke: var(--crepuscule); stroke-width: 1.5; }
.zones rect { fill: var(--lin); stroke: var(--brume); stroke-width: 1; }
.zones .zone-alerte { animation: zone 6s linear infinite; }
.champ path { fill: none; stroke: var(--signal); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; animation: champ 6s linear infinite; }
.silhouette { fill: none; stroke: var(--crepuscule); stroke-width: 1.5; stroke-linecap: round; animation: marche 6s linear infinite; }
.silhouette circle { fill: var(--papier); }
.silhouette .objet { fill: var(--charbon); stroke: none; }
.afficheur-texte { font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: .08em; fill: var(--signal); opacity: 0; animation: champ 6s linear infinite; }
@keyframes marche { from { transform: translateX(40px); } to { transform: translateX(400px); } }
@keyframes zone { 0%, 30% { fill: var(--lin); stroke: var(--brume); } 34%, 62% { fill: var(--signal); stroke: var(--signal); } 68%, 100% { fill: var(--lin); stroke: var(--brume); } }
@keyframes champ { 0%, 30% { opacity: 0; } 34%, 62% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes clignote { 0%, 30% { opacity: .25; } 34%, 62% { opacity: 1; } 68%, 100% { opacity: .25; } }

/* ---------- Cartes ---------- */
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grille-serree { margin-top: 20px; }
.carte-produit { background: var(--papier); border: 1px solid var(--filet); border-radius: 12px; box-shadow: var(--ombre-carte); overflow: hidden; display: flex; flex-direction: column; }
.carte-produit-visuel { background: var(--papier); border-bottom: 1px solid var(--filet); aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 28px; }
.carte-produit-visuel img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.carte-produit-texte { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.carte-produit-texte .lien { margin-top: auto; padding-top: 10px; }
.prix { font-family: var(--serif); font-size: 27px; letter-spacing: -.03em; color: var(--graphite); line-height: 1.2; }
.prix span { font-family: var(--sans); font-size: 13px; color: var(--cendre); letter-spacing: 0; }

.atmosphere { position: relative; border-radius: 24px; overflow: hidden; isolation: isolate; min-height: 620px; display: flex; align-items: flex-end; padding: 48px; box-shadow: var(--ombre-atmo); background: var(--nuit); }
.atmosphere-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.72); }
.atmosphere::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(31,31,41,.55) 0%, rgba(31,31,41,.1) 60%), linear-gradient(0deg, rgba(31,31,41,.4), rgba(31,31,41,0) 50%); }
.atmosphere-carte { width: min(560px, 100%); padding: 36px; border-radius: 24px; background: rgba(31,31,41,.3); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.atmosphere-carte .surtitre { margin-bottom: 0; }
.atmosphere-carte .bouton { margin-top: 8px; }
.video-pause-carte { right: 32px; bottom: 32px; }

.carte-mini { display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: 16px; padding: 12px 20px 12px 12px; background: var(--papier); border: 1px solid var(--filet); border-radius: 12px; box-shadow: var(--ombre-carte); transition: border-color .2s; }
.carte-mini:hover { border-color: var(--brume); }
.carte-mini img { width: 88px; height: 88px; object-fit: contain; border-radius: 8px; background: var(--papier); mix-blend-mode: multiply; }
.carte-mini-texte { display: flex; flex-direction: column; gap: 4px; }
.carte-mini-texte strong { font-family: var(--serif); font-weight: 400; font-size: 22px; letter-spacing: -.03em; color: var(--graphite); line-height: 1.1; }
.carte-mini-texte span { font-size: 14px; color: var(--cendre); line-height: 1.3; }
.carte-mini-prix { font-size: 15px; font-weight: 500; color: var(--crepuscule); white-space: nowrap; }

.carte-azur { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 48px; border-radius: 24px; background: var(--azur); padding: 80px; box-shadow: var(--ombre-atmo); overflow: hidden; }
.carte-azur-texte { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.carte-azur-texte .surtitre { margin-bottom: 0; }
.carte-azur-visuel { background: var(--papier); border-radius: 16px; padding: 24px; box-shadow: rgba(0,0,0,.18) 0 12px 30px; }
.carte-azur-visuel img { width: 100%; mix-blend-mode: multiply; }

.secteurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.secteur { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--filet); }
.secteur img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); transition: transform .6s ease; }
.secteur:hover img { transform: scale(1.03); }
.secteur::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(31,31,41,.55), rgba(31,31,41,0) 45%); }
.secteur-nom { position: absolute; z-index: 1; left: 20px; bottom: 16px; font-family: var(--serif); font-size: 22px; letter-spacing: -.03em; color: #ffffff; line-height: 1.2; }

.carte-guide { display: flex; flex-direction: column; gap: 12px; }
.carte-guide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 1px solid var(--filet); filter: saturate(.85); }
.carte-guide-titre { font-family: var(--serif); font-size: 24px; line-height: 1.25; letter-spacing: -.03em; color: var(--graphite); text-wrap: balance; }
.carte-guide:hover .carte-guide-titre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.appel { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 48px; padding: 56px; background: var(--papier); border: 1px solid var(--filet); border-radius: 16px; box-shadow: var(--ombre-carte); }
.appel .texte { margin-top: 16px; max-width: 560px; }
.appel-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Pied ---------- */
.pied { margin-top: 96px; background: var(--papier); border-top: 1px solid var(--filet); padding: 88px 0 32px; }
.pied-manifeste { font-family: var(--serif); font-size: 54px; line-height: 1.1; letter-spacing: -.02em; color: var(--graphite); max-width: 900px; text-wrap: balance; }
.pied-manifeste em { font-style: normal; color: var(--cendre); }
.pied-grille { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 40px; margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--filet); }
.pied-colonne { display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--charbon); }
.pied-colonne a:hover { color: var(--graphite); text-decoration: underline; text-underline-offset: 4px; }
.pied-titre { font-size: 13px; font-weight: 600; color: var(--graphite); margin-bottom: 4px; }
.pied-texte { font-size: 15px; color: var(--cendre); max-width: 320px; }
.logo-sombre { color: var(--graphite); margin-bottom: 8px; }
.pied-bas { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--filet); font-size: 13px; color: var(--cendre); }
.pied-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.pied-legal a:hover { color: var(--graphite); }

/* ---------- Réduction du mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
  .silhouette { animation: none; transform: translateX(207px); }
  .zones .zone-alerte { animation: none; fill: var(--signal); stroke: var(--signal); }
  .champ path, .afficheur-texte { animation: none; opacity: 1; }
  .point-alerte { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav { gap: 18px; }
  .pilule { gap: 18px; }
}
@media (max-width: 900px) {
  .hero-titre { font-size: 38px; }
  .titre-lg { font-size: 36px; }
  .titre { font-size: 32px; }
  .pied-manifeste { font-size: 36px; }
  .nav, .pilule-cta { display: none; }
  .menu-bascule { display: block; }
  .pilule { width: 100%; justify-content: space-between; padding: 6px 6px 6px 16px; }
  .entete.est-ouvert .pilule { flex-wrap: wrap; border-radius: 24px; background: rgba(254,255,252,.96); color: var(--crepuscule); border-color: var(--crepuscule); }
  .entete.est-ouvert .nav { display: flex; flex-direction: column; gap: 0; width: 100%; order: 3; padding: 8px 4px 4px; }
  .entete.est-ouvert .nav a { font-family: var(--serif); font-size: 26px; padding: 12px 0; border-top: 1px solid var(--filet); opacity: 1; }
  .entete.est-ouvert .pilule-cta { display: inline-flex; order: 4; margin: 8px 4px 10px; }
  .hero { padding: 0 16px 16px; }
  .hero-carte { padding: 28px 22px 24px; }
  .hero-texte { font-size: 16px; }
  .video-pause { right: 24px; top: 96px; bottom: auto; }
  .section { padding-top: 72px; }
  .intro, .duo { grid-template-columns: 1fr; gap: 32px; }
  .chiffres { grid-template-columns: 1fr 1fr; margin-top: 40px; }
  .chiffre { padding: 20px 12px 20px 0; }
  .chiffre + .chiffre { padding-left: 0; border-left: 0; }
  .chiffre:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--filet); }
  .chiffre:nth-child(n+3) { border-top: 1px solid var(--filet); }
  .chiffre-valeur { font-size: 40px; }
  .section-tete { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
  .grille-3, .secteurs { grid-template-columns: 1fr; }
  .atmosphere { min-height: 560px; padding: 16px; }
  .atmosphere-carte { padding: 24px 20px; }
  .video-pause-carte { top: 16px; right: 16px; bottom: auto; }
  .carte-azur { grid-template-columns: 1fr; padding: 40px 24px; gap: 32px; }
  .appel { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; }
  .pied { padding-top: 64px; }
  .pied-grille { grid-template-columns: 1fr 1fr; gap: 32px; }
  .pied-grille .pied-colonne:first-child { grid-column: 1 / -1; }
  .enveloppe { width: min(var(--largeur), 100% - 32px); }
}

/* =====================================================================
   Pages intérieures
   ===================================================================== */
.silhouette-corps { fill: var(--papier); }
.titre-xl { font-size: 54px; line-height: 1.1; letter-spacing: -.02em; }
.page-claire .pilule { background: rgba(254,255,252,.86); color: var(--crepuscule); border-color: var(--crepuscule); }
.page-tete { padding: 150px 0 24px; }
.fil { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--cendre); margin-bottom: 28px; }
.fil a:hover { color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; }
.fil [aria-current] { color: var(--graphite); }
.page-tete-grille { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: end; }
.section-serree { padding-top: 40px; }
.bandeau-photo { border-radius: 24px; overflow: hidden; border: 1px solid var(--filet); box-shadow: var(--ombre-atmo); }
.bandeau-photo img { width: 100%; aspect-ratio: 1799 / 486; object-fit: cover; filter: saturate(.85); }

/* Tableaux comparatifs */
.tableau-carte { background: var(--papier); border: 1px solid var(--filet); border-radius: 12px; box-shadow: var(--ombre-carte); overflow-x: auto; }
.comparatif { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
.comparatif th, .comparatif td { text-align: left; padding: 16px 24px; border-bottom: 1px solid var(--filet); vertical-align: top; }
.comparatif thead th { padding-top: 24px; padding-bottom: 20px; }
.comparatif thead a { display: block; font-family: var(--serif); font-weight: 400; font-size: 27px; letter-spacing: -.04em; color: var(--graphite); line-height: 1.2; }
.comparatif thead a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.comparatif thead span { display: block; font-size: 13px; font-weight: 500; color: var(--cendre); margin-top: 2px; }
.comparatif tbody th { font-weight: 500; color: var(--graphite); width: 22%; }
.comparatif td { color: var(--charbon); }
.comparatif tbody tr:last-child th, .comparatif tbody tr:last-child td { border-bottom: 0; }
.ligne-prix td { font-family: var(--serif); font-size: 22px; letter-spacing: -.03em; color: var(--graphite); }

/* Schéma des zones */
.grille-zones rect { fill: var(--lin); stroke: var(--brume); stroke-width: 1; }
.grille-zones .z-actif { fill: var(--signal); stroke: var(--signal); animation: pulse 2.4s ease-in-out infinite; }
.ligne-objet { stroke: var(--signal); stroke-width: 1; stroke-dasharray: 4 5; }
.schema-titre { font-family: var(--serif); font-size: 17px; fill: var(--graphite); }
.schema-sous { font-family: var(--sans); font-size: 11px; fill: var(--cendre); }
.point-fixe { animation: none; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Schéma de la raquette */
.silhouette-fixe { fill: none; stroke: var(--crepuscule); stroke-width: 1.5; stroke-linecap: round; }
.silhouette-fixe circle { fill: var(--papier); }
.silhouette-fixe .objet { fill: var(--charbon); stroke: none; }
.raquette-anim { animation: balayage 5s ease-in-out infinite; }
.raquette-sonde { fill: none; stroke: var(--crepuscule); stroke-width: 1.8; }
.raquette-manche { stroke: var(--crepuscule); stroke-width: 1.8; }
.raquette-poignee { fill: var(--crepuscule); }
.ondes circle { fill: none; stroke: var(--signal); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: onde 5s linear infinite; }
.ondes .onde-2 { animation-delay: .25s; } .ondes .onde-3 { animation-delay: .5s; }
.bulle { fill: var(--papier); stroke: var(--signal); stroke-width: 1; }
.bulle-alerte { opacity: 0; animation: bulle 5s linear infinite; }
.afficheur-fixe { opacity: 1; animation: none; }
.point-raquette { animation: bulle 5s linear infinite; }
@keyframes balayage { 0% { transform: translateY(40px); } 80% { transform: translateY(300px); } 100% { transform: translateY(40px); } }
@keyframes onde { 0%, 34% { opacity: 0; transform: scale(1); } 38% { opacity: .9; } 52% { opacity: 0; transform: scale(3.2); } 100% { opacity: 0; transform: scale(1); } }
@keyframes bulle { 0%, 33% { opacity: .2; } 37%, 52% { opacity: 1; } 58%, 100% { opacity: .2; } }

/* Fiches produit */
.duo-inverse > :first-child { order: 2; }
.duo-produit { align-items: start; }
.produit-visuels { position: relative; padding-bottom: 72px; }
.produit-principal { background: var(--papier); border: 1px solid var(--filet); border-radius: 16px; box-shadow: var(--ombre-carte); aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 40px; }
.produit-principal img { max-height: 100%; width: auto; mix-blend-mode: multiply; }
.produit-situation { position: absolute; right: -24px; bottom: 0; width: 44%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; border: 4px solid var(--papier); box-shadow: rgba(0,0,0,.12) 0 10px 30px; }
.produit-situation-blanc { object-fit: contain; background: var(--papier); padding: 12px; }
.duo-inverse .produit-situation { right: auto; left: -24px; }
.specs { display: flex; flex-direction: column; border-top: 1px solid var(--filet); }
.specs li { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--filet); font-size: 15px; color: var(--charbon); }
.specs li span { color: var(--cendre); font-size: 13px; font-weight: 500; padding-top: 1px; }
.prix-lg { font-size: 40px; margin-top: 8px; }
.boutons-serres { margin-top: 4px; }

/* Vidéo courte et piles de cartes */
.duo-egal { align-items: stretch; }
.atmosphere-courte { min-height: 420px; padding: 24px; }
.atmosphere-courte .atmosphere-carte { padding: 24px; gap: 10px; }
.atmosphere-large { min-height: 520px; }
.pile-cartes { display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.duo-haut { align-items: start; }

/* FAQ */
.faq { border-top: 1px solid var(--filet); }
.faq details { border-bottom: 1px solid var(--filet); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; font-family: var(--serif); font-size: 22px; letter-spacing: -.03em; color: var(--graphite); line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-size: 22px; font-weight: 300; color: var(--cendre); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 48px 22px 0; color: var(--charbon); font-size: 16px; }
.faq a { color: var(--crepuscule); text-decoration: underline; text-underline-offset: 3px; }

/* Guides */
.guide-une { display: grid; grid-template-columns: 1fr 1fr; background: var(--papier); border: 1px solid var(--filet); border-radius: 16px; box-shadow: var(--ombre-carte); overflow: hidden; }
.guide-une img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; filter: saturate(.85); }
.guide-une-texte { padding: 48px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.guide-une:hover .titre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.section-tete-filtres { margin-top: 80px; }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.filtre { border: 1px solid var(--filet); border-radius: 50px; padding: 8px 16px; font-size: 15px; font-weight: 500; color: var(--charbon); background: var(--papier); transition: border-color .2s, color .2s; }
.filtre:hover { border-color: var(--brume); }
.filtre.est-actif { border-color: var(--crepuscule); color: var(--crepuscule); }
.grille-guides { row-gap: 48px; }
.carte-guide .texte-sm { margin-top: -4px; }
.est-masque { display: none !important; }

/* Article */
.article-tete { padding: 150px 0 0; }
.enveloppe-article { width: min(760px, 100% - 48px); margin-inline: auto; }
.article-tete .etiquette { margin-bottom: 16px; }
.article-tete .texte-lead { margin-top: 24px; }
.article-visuel { margin-top: 56px; }
.article-visuel img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 24px; border: 1px solid var(--filet); }
.article-visuel figcaption { font-size: 13px; color: var(--cendre); margin-top: 12px; }
.prose { padding-top: 40px; font-size: 18px; line-height: 1.65; color: var(--charbon); }
.prose > * + * { margin-top: 20px; }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.15; letter-spacing: -.03em; color: var(--graphite); margin-top: 56px; }
.prose h2 span { display: block; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--signal); margin-bottom: 10px; }
.prose a { color: var(--crepuscule); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--graphite); font-weight: 600; }
.note { background: var(--lin); border: 1px solid var(--filet); border-left: 2px solid var(--signal); border-radius: 8px; padding: 20px 24px; font-size: 16px; }
.tableau-prose { width: 100%; border-collapse: collapse; font-size: 16px; border: 1px solid var(--filet); }
.tableau-prose th, .tableau-prose td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--filet); }
.tableau-prose th { font-size: 13px; font-weight: 500; color: var(--cendre); background: var(--lin); }
.tableau-prose td:last-child { white-space: nowrap; font-family: var(--serif); font-size: 19px; color: var(--graphite); }

/* Boutique */
.filtres-boutique { margin-bottom: 32px; }
.grille-boutique { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.carte-achat { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; }
.bouton-petit { padding: 9px 14px; font-size: 14px; }
.reassurance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.reassurance li { display: flex; flex-direction: column; gap: 6px; padding: 24px; background: var(--papier); border: 1px solid var(--filet); border-radius: 12px; }
.reassurance svg { width: 24px; height: 24px; color: var(--crepuscule); margin-bottom: 8px; }
.reassurance strong { font-family: var(--serif); font-weight: 400; font-size: 21px; letter-spacing: -.03em; color: var(--graphite); }
.reassurance span { font-size: 14px; color: var(--cendre); }

/* Contact : champs sur fond lin, simple filet en bas (référence) */
.contact-grille { display: grid; grid-template-columns: 7fr 4fr; gap: 48px; align-items: start; }
.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; background: var(--papier); border: 1px solid var(--filet); border-radius: 16px; box-shadow: var(--ombre-carte); padding: 40px; }
.champ { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.champ-large { grid-column: 1 / -1; }
fieldset.champ { border: 0; margin: 0; padding: 0; }
.champ label, .champ legend { font-size: 13px; font-weight: 500; color: var(--graphite); padding: 0; }
.champ legend { margin-bottom: 8px; }
.champ input, .champ select, .champ textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--charbon); border-radius: 0; background-color: var(--lin); color: var(--charbon);
  font: 400 16px/1.5 var(--sans); padding: 12px 14px; outline: none; transition: border-color .2s, background-color .2s;
}
.champ select { 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='%23444141' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-bottom-color: var(--signal); background-color: #ffffff; }
.champ textarea { resize: vertical; min-height: 140px; }
.choix { display: flex; flex-wrap: wrap; gap: 8px; }
.choix label { position: relative; margin: 0; cursor: pointer; }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix span { display: inline-flex; border: 1px solid var(--filet); border-radius: 50px; padding: 8px 16px; font-size: 15px; font-weight: 500; color: var(--charbon); background: var(--papier); transition: border-color .2s, color .2s; }
.choix input:checked + span { border-color: var(--signal); color: var(--signal); }
.choix input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }
.consentement { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--cendre); }
.consentement input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--crepuscule); flex: none; }
.consentement a { color: var(--crepuscule); text-decoration: underline; text-underline-offset: 3px; }
.formulaire .bouton { grid-column: 1 / -1; justify-self: start; }
.contact-infos { display: flex; flex-direction: column; gap: 4px; }
.info { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--filet); font-size: 16px; color: var(--charbon); }
.info svg { width: 22px; height: 22px; color: var(--crepuscule); flex: none; margin-top: 2px; }
.info-libelle { display: block; font-size: 13px; font-weight: 500; color: var(--cendre); margin-bottom: 2px; }
.info a:hover { color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; }
.carte-demo { margin-top: 24px; display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: center; padding: 16px; background: var(--papier); border: 1px solid var(--filet); border-radius: 12px; box-shadow: var(--ombre-carte); }
.carte-demo img { width: 88px; height: 88px; object-fit: contain; mix-blend-mode: multiply; }
.carte-demo .texte-sm { margin-top: 4px; }

/* 404 */
.erreur { padding: 150px 0 0; }
.erreur-grille { display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: center; }
.erreur-texte .etiquette { margin-bottom: 16px; }
.erreur-texte .texte-lead { margin-top: 24px; max-width: 520px; }
.erreur-liens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 48px; }
.erreur-liens a { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--papier); border: 1px solid var(--filet); border-radius: 12px; font-size: 15px; font-weight: 500; color: var(--graphite); transition: border-color .2s; }
.erreur-liens a:hover { border-color: var(--crepuscule); }
.erreur-liens svg { width: 22px; height: 22px; color: var(--crepuscule); }
.erreur-code { font-family: var(--serif); font-size: 64px; letter-spacing: -.04em; fill: var(--graphite); }
.erreur-diagramme .zones rect { animation: zone-veille 4s ease-in-out infinite; }
@keyframes zone-veille { 0%, 100% { fill: var(--lin); } 50% { fill: #eef3ee; } }

@media (prefers-reduced-motion: reduce) {
  .raquette-anim { animation: none; transform: translateY(160px); }
  .ondes circle, .bulle-alerte, .point-raquette, .grille-zones .z-actif, .erreur-diagramme .zones rect { animation: none; }
  .bulle-alerte { opacity: 1; }
}

@media (max-width: 900px) {
  .titre-xl { font-size: 38px; }
  .page-tete { padding: 120px 0 8px; }
  .page-tete-grille, .guide-une, .contact-grille, .erreur-grille { grid-template-columns: 1fr; gap: 24px; }
  .duo-inverse > :first-child { order: 0; }
  .produit-visuels { padding-bottom: 56px; }
  .produit-situation, .duo-inverse .produit-situation { right: 8px; left: auto; width: 42%; }
  .specs li { grid-template-columns: 104px 1fr; }
  .prix-lg { font-size: 32px; }
  .comparatif th, .comparatif td { padding: 12px 14px; }
  .guide-une-texte { padding: 28px 22px; }
  .grille-boutique, .reassurance { grid-template-columns: 1fr 1fr; gap: 12px; }
  .formulaire { grid-template-columns: 1fr; padding: 24px 18px; }
  .faq summary { font-size: 19px; }
  .erreur { padding-top: 120px; }
  .erreur-liens { grid-template-columns: 1fr 1fr; }
  .enveloppe-article { width: min(760px, 100% - 32px); }
  .prose { font-size: 17px; }
  .prose h2 { font-size: 28px; }
}
@media (max-width: 560px) {
  .grille-boutique, .reassurance { grid-template-columns: 1fr; }
}

/* ---------- À propos ---------- */
.bandeau-photo-haut img { aspect-ratio: 21 / 8; object-position: center 35%; }
.etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: none; }
.etape { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--papier); border: 1px solid var(--filet); border-radius: 12px; box-shadow: var(--ombre-carte); }
.etape-num { font-size: 13px; font-weight: 500; color: var(--signal); }
.liste-claire { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.liste-claire li { display: flex; gap: 12px; align-items: flex-start; color: #ffffff; font-size: 16px; line-height: 1.45; }
.liste-claire svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: #ffffff; }
.carte-azur-visuel img[src*="situation"] { mix-blend-mode: normal; border-radius: 8px; aspect-ratio: 1 / 1; object-fit: cover; }
.diagramme-photo { padding: 12px; }
.diagramme-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
@media (max-width: 900px) {
  .etapes { grid-template-columns: 1fr; gap: 12px; }
}

/* =====================================================================
   Adaptations WordPress — chargées APRÈS la feuille de la maquette (styles.css).
   Le DOM des blocs natifs diffère de la maquette : figures autour des images et des vidéos,
   groupes autour des sections, icônes et flèches en pseudo-éléments, liens étirés sur les cartes.
   WordPress imprime le CSS des blocs après le thème : les surcharges sont plus spécifiques, pas plus tardives.
   ===================================================================== */

/* ---------- Socle ---------- */
:where(.wp-block-group) > :where(*) { margin-block: 0; }
figure.wp-block-image, figure.wp-block-video, .wp-block-post-featured-image, figure.wp-block-table { margin: 0; }
.wp-site-blocks { overflow-x: clip; }
header.wp-block-template-part { position: static; }
.wp-block-post-template { margin: 0; padding: 0; list-style: none; }

/* Icônes : .ico-avant + .i-nom (la classe .i-nom fixe --ico). */
.ico-avant::before {
  content: ""; display: block; flex: none; width: 24px; height: 24px; background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.masque-fleche { -webkit-mask: var(--ico-fleche) center / contain no-repeat; mask: var(--ico-fleche) center / contain no-repeat; }

/* ---------- Logo et navigation en pilule ---------- */
.logo a { display: inline-flex; align-items: center; gap: 9px; }
.logo a::before {
  content: ""; width: 24px; height: 24px; flex: none; background-color: currentColor;
  -webkit-mask: var(--ico-logo) center / contain no-repeat; mask: var(--ico-logo) center / contain no-repeat;
}
.logo-sombre a { color: var(--graphite); }
.entete .pilule { gap: 24px; }
.entete .wp-block-navigation.nav { gap: 0; }
.entete .wp-block-navigation.nav .wp-block-navigation__container { gap: 24px; align-items: center; }
.wp-block-navigation.nav .wp-block-navigation-item__content { font-size: 15px; font-weight: 500; line-height: 1; padding: 0; opacity: .9; color: inherit; }
.wp-block-navigation.nav .wp-block-navigation-item__content:hover,
.wp-block-navigation.nav .est-courant > .wp-block-navigation-item__content { opacity: 1; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.wp-block-navigation.nav .nav-devis { margin-left: 4px; }
.wp-block-navigation.nav .nav-devis > .wp-block-navigation-item__content { border: 1px solid currentColor; border-radius: 50px; padding: 10px 16px; opacity: 1; text-decoration: none; }
.wp-block-navigation.nav .nav-devis > .wp-block-navigation-item__content:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.page-claire .wp-block-navigation.nav .nav-devis > .wp-block-navigation-item__content:hover, .est-defile .wp-block-navigation.nav .nav-devis > .wp-block-navigation-item__content:hover { background: var(--lin); }
.wp-block-navigation.nav .wp-block-navigation__responsive-container-open { color: inherit; }
.wp-block-navigation.nav .wp-block-navigation__responsive-container.is-menu-open {
  background-color: #fefffc !important; color: #282834 !important; padding: 28px 24px;
}
.wp-block-navigation.nav .is-menu-open .wp-block-navigation__container { gap: 0; align-items: flex-start; }
.wp-block-navigation.nav .is-menu-open .wp-block-navigation-item__content { font-family: var(--serif); font-size: 30px; font-weight: 400; letter-spacing: -.03em; padding: 12px 0; }
.wp-block-navigation.nav .is-menu-open .nav-devis > .wp-block-navigation-item__content { font-family: var(--sans); font-size: 16px; margin-top: 16px; padding: 12px 18px; }
.wp-block-navigation.nav .wp-block-navigation__responsive-container-close { color: #282834; }
/* Panier WooCommerce accroché à la navigation */
.entete .wc-block-mini-cart__button { color: inherit; padding: 0 6px; }
.entete .wc-block-mini-cart__badge { background: var(--signal); color: #ffffff; border: 0; font-weight: 600; }

/* ---------- Boutons (core/button : la classe est sur le conteneur) ---------- */
.wp-block-buttons.boutons { display: flex; flex-wrap: wrap; gap: 12px; }
/* Les classes de la maquette visent le lien : on neutralise leur effet sur le conteneur. */
.wp-block-button:is(.bouton-signal, .bouton-clair, .bouton-plein, .bouton-contour) { margin: 0; padding: 0; border: 0; background: none; }
.wp-block-button:is(.bouton-signal, .bouton-clair, .bouton-plein, .bouton-contour) .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 10px; border-radius: 8px; border: 1px solid transparent; background: transparent;
  font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: -.01em; padding: 11px 16px; transition: background .2s, color .2s, border-color .2s;
}
.wp-block-button.bouton-signal .wp-block-button__link { border-color: var(--signal); color: var(--signal); }
.hero .wp-block-button.bouton-signal .wp-block-button__link { color: #bfe3f4; border-color: #7cc3e6; }
.wp-block-button.bouton-signal .wp-block-button__link:hover { background: rgba(65,161,207,.1); }
.wp-block-button.bouton-clair .wp-block-button__link { border-color: rgba(255,255,255,.75); color: #ffffff; }
.wp-block-button.bouton-clair .wp-block-button__link:hover { background: rgba(255,255,255,.1); }
.wp-block-button.bouton-plein .wp-block-button__link { background: var(--nuit); color: #ffffff; border-color: var(--crepuscule); padding: 12px 18px; }
.wp-block-button.bouton-plein .wp-block-button__link:hover { background: var(--crepuscule); }
.wp-block-button.bouton-contour .wp-block-button__link { border-color: var(--crepuscule); color: var(--crepuscule); }
.wp-block-button.bouton-contour .wp-block-button__link:hover { background: var(--lin); }
.wp-block-button.bouton-petit .wp-block-button__link { padding: 9px 14px; font-size: 14px; }
.wp-block-button.fleche-ronde .wp-block-button__link::after {
  /* Cercle fin + flèche : deux calques de masque sur un même aplat currentColor. */
  content: ""; width: 22px; height: 22px; margin-right: -6px; background: currentColor;
  -webkit-mask: var(--ico-fleche) center / 12px 12px no-repeat, radial-gradient(circle closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px), #000 100%, transparent calc(100% + .5px));
  mask: var(--ico-fleche) center / 12px 12px no-repeat, radial-gradient(circle closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px), #000 100%, transparent calc(100% + .5px));
}
.wp-block-button:is(.ico-tel, .ico-panier) .wp-block-button__link::before {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.wp-block-button.ico-tel { --ico: var(--ico-telephone); }
.wp-block-button.ico-panier { --ico: var(--ico-panier); }

/* Liens « ghost » avec flèche */
p.lien a, a.wp-block-read-more.lien, .lien.wp-block-read-more { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: var(--crepuscule); }
p.lien a::after, .wp-block-read-more.lien::after {
  content: ""; width: 16px; height: 16px; background: currentColor; transition: transform .2s;
  -webkit-mask: var(--ico-fleche) center / contain no-repeat; mask: var(--ico-fleche) center / contain no-repeat;
}
p.lien a:hover::after, .wp-block-read-more.lien:hover::after { transform: translateX(3px); }

/* ---------- Héros et sections vidéo ---------- */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, rgba(31,31,41,.35) 0%, rgba(31,31,41,0) 28%, rgba(31,31,41,.05) 55%, rgba(31,31,41,.55) 100%),
  linear-gradient(90deg, rgba(31,31,41,.45) 0%, rgba(31,31,41,0) 55%); }
.hero .hero-video, .atmosphere .atmosphere-video { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; margin: 0; filter: none; }
.hero .hero-video video, .atmosphere .atmosphere-video video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.02); }
.hero-carte .boutons { margin-top: 32px; }
.atmosphere-carte .boutons { margin-top: 8px; }
.carte-azur-texte .boutons { margin-top: 0; }
.video-pause::before {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--ico-pause) center / contain no-repeat; mask: var(--ico-pause) center / contain no-repeat;
}
.video-pause.est-en-pause::before { -webkit-mask-image: var(--ico-play); mask-image: var(--ico-play); }

/* ---------- Chiffres, listes, diagrammes ---------- */
.liste-check { display: flex; flex-direction: column; gap: 10px; }
.liste-check li { display: block; position: relative; padding-left: 28px; font-size: 16px; color: var(--charbon); }
.liste-check li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; background: var(--signal);
  -webkit-mask: var(--ico-check) center / contain no-repeat; mask: var(--ico-check) center / contain no-repeat;
}
.diagramme .wp-block-image img { width: 100%; height: auto; }
.diagramme-legende { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cendre); margin-top: 8px !important; padding-top: 12px; border-top: 1px solid var(--filet); }
.diagramme-legende::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); flex: none; }

/* ---------- Cartes ---------- */
.carte-produit-visuel .wp-block-image { margin: 0; width: 100%; height: 100%; display: grid; place-items: center; }
.carte-produit-visuel .wp-block-image img { max-height: 300px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.prix em { font-style: normal; font-family: var(--sans); font-size: 13px; color: var(--cendre); letter-spacing: 0; }
.carte-mini { position: relative; }
.carte-mini .wp-block-image { margin: 0; }
.carte-mini .wp-block-image img { width: 88px; height: 88px; object-fit: contain; border-radius: 8px; background: var(--papier); mix-blend-mode: multiply; }
.carte-mini-texte { display: flex; flex-direction: column; gap: 4px; }
.carte-mini-nom { font-family: var(--serif); font-size: 22px; letter-spacing: -.03em; color: var(--graphite); line-height: 1.1; }
.carte-mini-nom a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.carte-mini-desc { font-size: 14px; color: var(--cendre); line-height: 1.3; }
.carte-azur-visuel .wp-block-image img { width: 100%; mix-blend-mode: multiply; }
.carte-azur-visuel .visuel-situation img { mix-blend-mode: normal; border-radius: 8px; aspect-ratio: 1 / 1; object-fit: cover; }
.secteur .wp-block-image { margin: 0; height: 100%; }
.secteur .wp-block-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); transition: transform .6s ease; }
.secteur:hover .wp-block-image img { transform: scale(1.03); }
.carte-guide { position: relative; display: flex; flex-direction: column; gap: 12px; }
.carte-guide .wp-block-image img, .carte-guide .wp-block-post-featured-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 1px solid var(--filet); filter: saturate(.85); }
.carte-guide-titre a::after { content: ""; position: absolute; inset: 0; }
.carte-guide-titre { font-family: var(--serif); font-size: 24px; line-height: 1.25; letter-spacing: -.03em; color: var(--graphite); }
.carte-guide-titre a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.carte-guide .etiquette a { position: relative; z-index: 1; }
.appel-texte .texte { margin-top: 16px; max-width: 560px; }

/* ---------- En-tête de page, tableaux, fiches produit ---------- */
.fil strong { color: var(--graphite); font-weight: 400; }
.fil { word-spacing: .15em; }
.bandeau-photo { margin: 0; }
figure.wp-block-table.comparatif { min-width: 0; width: 100%; }
.wp-block-table.comparatif table { width: 100%; min-width: 640px; border-collapse: collapse; table-layout: auto; font-size: 15px; }
.wp-block-table.comparatif :is(td, th) { border: 0; border-bottom: 1px solid var(--filet); text-align: left; padding: 16px 24px; vertical-align: top; }
.wp-block-table.comparatif thead { border: 0; }
.wp-block-table.comparatif thead th { padding-top: 24px; padding-bottom: 20px; font-weight: 400; }
.wp-block-table.comparatif thead em { display: block; font-style: normal; font-size: 13px; font-weight: 500; color: var(--cendre); margin-top: 2px; }
.wp-block-table.comparatif thead br { display: none; }
.wp-block-table.comparatif tbody td:first-child { font-weight: 500; color: var(--graphite); width: 22%; }
.wp-block-table.comparatif tbody tr:last-child td { border-bottom: 0; }
.wp-block-table.comparatif tbody tr:last-child td:not(:first-child) { font-family: var(--serif); font-size: 22px; letter-spacing: -.03em; color: var(--graphite); }
.produit-principal .wp-block-image { margin: 0; width: 100%; height: 100%; display: grid; place-items: center; }
.produit-principal .wp-block-image img { max-height: 440px; width: auto; mix-blend-mode: multiply; }
figure.produit-situation { aspect-ratio: auto; border: 0; box-shadow: none; padding: 0; background: none; border-radius: 0; }
figure.produit-situation img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; border: 4px solid var(--papier); box-shadow: rgba(0,0,0,.12) 0 10px 30px; }
figure.produit-situation-blanc img { object-fit: contain; background: var(--papier); padding: 12px; }
.specs li strong { color: var(--cendre); font-size: 13px; font-weight: 500; padding-top: 1px; }
.faq details > p { padding: 0 48px 22px 0; color: var(--charbon); font-size: 16px; }

/* ---------- Guides (boucles de requête) ---------- */
.requete-une .guide-une-image { margin: 0; height: 100%; }
.requete-une .guide-une-image a, .requete-une .guide-une-image img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; filter: saturate(.85); }
.guide-une .titre a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.guide-une .wp-block-post-excerpt__excerpt, .carte-guide .wp-block-post-excerpt__excerpt { margin: 0; }
.grille-guides > li { display: flex; }
.grille-guides > li > .carte-guide { flex: 1; }
.filtre { cursor: pointer; }
.etiquette a { color: var(--cendre); }

/* ---------- Article ---------- */
.article-tete .enveloppe > .article-visuel { margin-top: 56px; }
.article-visuel img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 24px; border: 1px solid var(--filet); }
.article-tete .titre-xl { margin-top: 4px; }
.article-tete .texte-lead { margin-top: 24px; }
.article-tete .texte-lead p { margin: 0; }
.prose h2 em { display: block; font-family: var(--sans); font-style: normal; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--signal); margin-bottom: 10px; }
.prose .wp-block-list { padding-left: 1.2em; list-style: disc; }
.prose .wp-block-list li + li { margin-top: 8px; }
.prose > p.chapo { font-size: 20px; line-height: 1.55; color: var(--graphite); }
.note p { margin: 0; }
figure.wp-block-table.tableau-prose { border: 0; }
.wp-block-table.tableau-prose table { width: 100%; border-collapse: collapse; font-size: 16px; border: 1px solid var(--filet); table-layout: auto; }
.wp-block-table.tableau-prose :is(td, th) { border: 0; border-bottom: 1px solid var(--filet); text-align: left; padding: 14px 18px; }
.wp-block-table.tableau-prose thead { border: 0; }
.wp-block-table.tableau-prose th { font-size: 13px; font-weight: 500; color: var(--cendre); background: var(--lin); }
.wp-block-table.tableau-prose td:last-child { white-space: nowrap; font-family: var(--serif); font-size: 19px; color: var(--graphite); }

/* Guides étoffés : sommaire, figures légendées, intertitres de niveau 3, FAQ, encadrés, liens internes. */
.prose :is(h2, h3)[id] { scroll-margin-top: 110px; }
.prose h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.25; letter-spacing: -.03em; color: var(--graphite); margin-top: 36px; }
.prose ol.wp-block-list { list-style: decimal; }
.prose figure.wp-block-image { margin-top: 36px; margin-bottom: 0; }
.prose figure.wp-block-image + * { margin-top: 32px; }
.prose figure.wp-block-image img { width: 100%; height: auto; max-height: 480px; object-fit: contain; border-radius: 12px; border: 1px solid var(--filet); background: var(--papier); }
.prose figure.wp-block-image figcaption { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--cendre); text-align: left; }
.sommaire { background: var(--lin); border: 1px solid var(--filet); border-radius: 12px; padding: 22px 26px; margin-top: 32px !important; }
.sommaire-titre { font-size: 13px; font-weight: 500; color: var(--cendre); margin: 0; }
.prose .sommaire-liste { margin: 10px 0 0; padding-left: 1.3em; font-size: 16px; line-height: 1.5; columns: 2; column-gap: 32px; }
.prose .sommaire-liste li { break-inside: avoid; }
.prose .sommaire-liste li + li { margin-top: 6px; }
.prose .sommaire-liste a { text-decoration: none; }
.prose .sommaire-liste a:hover { text-decoration: underline; }
.prose .faq { margin-top: 16px; }
.prose .faq details > p { font-size: 16px; }
.encart-materiel, .voir-aussi { border: 1px solid var(--filet); border-radius: 12px; padding: 22px 26px; background: var(--papier); margin-top: 40px !important; }
.encart-materiel-titre, .voir-aussi-titre { font-size: 13px; font-weight: 500; color: var(--cendre); margin: 0; }
.prose :is(.encart-materiel, .voir-aussi) .wp-block-list { margin: 10px 0 0; padding: 0; list-style: none; font-size: 16px; }
.prose :is(.encart-materiel, .voir-aussi) li { padding: 8px 0; border-top: 1px solid var(--filet); margin: 0 !important; }
.prose :is(.encart-materiel, .voir-aussi) li:first-child { border-top: 0; }
.prose .voir-aussi a { font-family: var(--serif); font-size: 19px; letter-spacing: -.02em; text-decoration: none; color: var(--graphite); }
.prose .voir-aussi a:hover { text-decoration: underline; }
.prose .encart-materiel a { font-weight: 600; }
.wp-block-table.tableau-texte td:last-child { white-space: normal; font-family: var(--sans); font-size: 16px; color: var(--charbon); }
.wp-block-table.tableau-prose th:empty { background: var(--lin); }

/* ---------- Boutique ---------- */
.carte-achat .boutons { margin: 0; }
.reassurance-item { display: flex; flex-direction: column; gap: 6px; padding: 24px; background: var(--papier); border: 1px solid var(--filet); border-radius: 12px; color: var(--crepuscule); }
.reassurance-item::before { margin-bottom: 8px; }
.reassurance-item strong { font-family: var(--serif); font-weight: 400; font-size: 21px; letter-spacing: -.03em; color: var(--graphite); }
.reassurance-item .texte-sm { font-size: 14px; }

/* ---------- Contact : Contact Form 7 ---------- */
.formulaire { display: block; }
.formulaire-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.formulaire-grille .wpcf7-form-control-wrap { display: block; }
.formulaire-grille .champ > label { font-size: 13px; font-weight: 500; color: var(--graphite); }
/* La maquette stylait « .choix span » : chez CF7, les spans s'emboîtent (élément de liste > libellé), seul le libellé est une pastille. */
.choix.wpcf7-radio { display: flex; flex-wrap: wrap; gap: 8px; }
.choix .wpcf7-list-item { display: inline-flex; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.choix .wpcf7-list-item label { position: relative; cursor: pointer; }
.choix .wpcf7-list-item-label { display: inline-flex; border: 1px solid var(--filet); border-radius: 50px; padding: 8px 16px; font-size: 15px; font-weight: 500; color: var(--charbon); background: var(--papier); transition: border-color .2s, color .2s; }
.choix input:checked + .wpcf7-list-item-label { border-color: var(--signal); color: var(--signal); }
.choix input:focus-visible + .wpcf7-list-item-label { outline: 2px solid var(--signal); outline-offset: 2px; }
.consentement { grid-column: 1 / -1; }
.consentement .wpcf7-list-item { margin: 0; }
.consentement label { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--cendre); cursor: pointer; }
.consentement input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--crepuscule); flex: none; }
.envoi { grid-column: 1 / -1; }
.envoi input[type="submit"] { background: var(--nuit); color: #ffffff; border: 1px solid var(--crepuscule); border-radius: 8px; padding: 12px 18px; font: 500 15px/1 var(--sans); cursor: pointer; transition: background .2s; }
.envoi input[type="submit"]:hover { background: var(--crepuscule); }
.envoi input[type="submit"]:disabled { opacity: .45; cursor: not-allowed; }
.wpcf7-spinner { display: none; }
.wpcf7 form .wpcf7-response-output { margin: 20px 0 0; padding: 14px 18px; border: 1px solid var(--signal); border-radius: 8px; color: var(--charbon); font-size: 14px; }
.wpcf7-not-valid-tip { color: #b42318; font-size: 12px; margin-top: 6px; }
.info { display: grid; grid-template-columns: 22px 1fr; column-gap: 14px; color: var(--crepuscule); }
.info::before { grid-row: 1 / 3; width: 22px; height: 22px; margin-top: 2px; }
.info strong { display: block; font-size: 13px; font-weight: 500; color: var(--cendre); margin-bottom: 2px; }
.info a:hover { color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; }
.carte-demo .wp-block-image { margin: 0; }
.carte-demo .wp-block-image img { width: 88px; height: 88px; object-fit: contain; mix-blend-mode: multiply; }
.carte-demo .texte-sm { margin-top: 4px; }

/* ---------- À propos ---------- */
.liste-claire li { display: block; position: relative; padding-left: 32px; }
.liste-claire li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; background: #ffffff; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.diagramme-photo .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }

/* ---------- 404 ---------- */
.erreur-liens p { margin: 0; }
.erreur-liens p a { height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--papier); border: 1px solid var(--filet); border-radius: 12px; font-size: 15px; font-weight: 500; color: var(--graphite); transition: border-color .2s; }
.erreur-liens p a::before { content: ""; width: 22px; height: 22px; background: var(--crepuscule); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.erreur-liens p a:hover { border-color: var(--crepuscule); }
.erreur-diagramme { aspect-ratio: 300 / 340; background: rgba(255,255,255,.7) url(assets/img/schema-404.svg) center / 86% no-repeat; }

/* ---------- WooCommerce ---------- */
body:is(.woocommerce-page, .woocommerce, .woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main.wp-block-group {
  padding: 140px max(24px, calc((100% - 1200px) / 2)) 120px;
}
body:is(.woocommerce-page, .woocommerce) main :is(h1, h2):is(.wp-block-heading, .wp-block-post-title) { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; color: var(--graphite); }
.woocommerce .wp-block-post-title, .woocommerce-page main h1.wp-block-post-title { font-size: 48px; line-height: 1.1; }
.wc-block-components-button:not(.is-link), .woocommerce .single_add_to_cart_button, .wp-block-button__link.add_to_cart_button { border-radius: 8px !important; font-family: var(--sans); font-weight: 500; }
.woocommerce span.onsale, .wc-block-components-product-sale-badge { background: var(--papier) !important; color: var(--crepuscule) !important; border: 1px solid var(--crepuscule) !important; border-radius: 50px !important; font-size: 12px; font-weight: 500; }
.wc-block-components-text-input input, .wc-blocks-components-select .wc-blocks-components-select__select, .wc-block-components-textarea { background-color: var(--lin) !important; border-radius: 0 !important; border-width: 0 0 1px !important; border-color: var(--charbon) !important; }
.wp-block-woocommerce-product-image-gallery { max-width: 100%; overflow: hidden; }
.product_meta > span { display: block; color: var(--cendre); font-size: 13px; }

/* ---------- Bandeau de consentement ---------- */
.cmplz-cookiebanner { font-family: var(--sans); }
.cmplz-cookiebanner .cmplz-title { font-family: var(--serif); font-weight: 400; font-size: 20px; letter-spacing: -.02em; }
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn { font-family: var(--sans); font-weight: 500; }
.texte-legal #cmplz-document, .prose #cmplz-document { max-width: none; font-size: 16px; }
.prose #cmplz-document :is(h2, h3) { font-family: var(--serif); font-weight: 400; color: var(--graphite); letter-spacing: -.02em; }
.prose #cmplz-document details, .prose #cmplz-document .cmplz-dropdown { border-radius: 12px !important; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* La maquette masque .nav sous 900 px (menu maison) : ici core/navigation gère lui-même son bouton sous 600 px. */
  .entete .wp-block-navigation.nav { display: flex; flex: none; }
  .entete .wp-block-navigation.nav .wp-block-navigation__container { gap: 16px; }
  .wp-block-navigation.nav .wp-block-navigation-item__content { font-size: 14px; }
  .wp-block-navigation.nav:not(:has(.is-menu-open)) .nav-devis { display: none; }
  .entete .pilule { justify-content: space-between; }
  .carte-produit-visuel .wp-block-image img { max-height: 240px; }
  .produit-principal .wp-block-image img { max-height: 280px; }
  .formulaire-grille { grid-template-columns: 1fr; }
  body:is(.woocommerce-page, .woocommerce, .woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main.wp-block-group { padding: 110px 16px 80px; }
  .woocommerce .wp-block-post-title, .woocommerce-page main h1.wp-block-post-title { font-size: 34px; }
  .prose .sommaire-liste { columns: 1; }
  .sommaire, .encart-materiel, .voir-aussi { padding: 18px 18px; }
  .prose h3 { font-size: 21px; }
}

/* ——— Icônes (masques CSS, générées depuis le sprite de la maquette) ——— */
:root{--ico-logo:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2032%2032'%3E%3Cpath%20d%3D'M7%2028V6.5A2.5%202.5%200%200%201%209.5%204h13A2.5%202.5%200%200%201%2025%206.5V28'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M11%2010v2M11%2015v2M11%2020v2M21%2010v2M21%2015v2M21%2020v2'%20stroke%3D'%23000'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%2F%3E%3Ccircle%20cx%3D'16'%20cy%3D'16'%20r%3D'2.2'%20fill%3D'%23000'%2F%3E%3Cpath%20d%3D'M4%2028h24'%20stroke%3D'%23000'%20stroke-width%3D'1.8'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E");--ico-portique:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M5%2021V5a1.5%201.5%200%200%201%201.5-1.5h11A1.5%201.5%200%200%201%2019%205v16M3%2021h18M8%207v2M8%2011v2M8%2015v2M16%207v2M16%2011v2M16%2015v2'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");--ico-raquette:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M15.5%203.5a3.5%203.5%200%200%201%205%205l-3%203a3.5%203.5%200%200%201-5-5zM12.5%2011.5%204%2020'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M15%206.5l2.5%202.5'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E");--ico-gant:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M7%2021v-3l-2.5-4.5a1.5%201.5%200%200%201%202.6-1.5L8.5%2014V5a1.5%201.5%200%200%201%203%200v6-7.5a1.5%201.5%200%200%201%203%200V11V5a1.5%201.5%200%200%201%203%200v8c0%204-2%208-5%208z'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");--ico-zones:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M4%204h16v16H4zM4%209.3h16M4%2014.6h16M12%204v16'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");--ico-flux:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Ccircle%20cx%3D'7'%20cy%3D'6'%20r%3D'2.2'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%2F%3E%3Cpath%20d%3D'M4%2020v-4a3%203%200%200%201%206%200v4M14%2012h7m-3-3%203%203-3%203'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");--ico-poids:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M6%209h12l2%2011H4zM9.5%209a2.5%202.5%200%201%201%205%200'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");--ico-batterie:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Crect%20x%3D'3'%20y%3D'7'%20width%3D'16'%20height%3D'10'%20rx%3D'2'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%2F%3E%3Cpath%20d%3D'M21%2010.5v3M6.5%2010v4M9.5%2010v4M12.5%2010v4'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E");--ico-vibration:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Crect%20x%3D'8'%20y%3D'4'%20width%3D'8'%20height%3D'16'%20rx%3D'2'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%2F%3E%3Cpath%20d%3D'M4.5%208.5v7M19.5%208.5v7M2%2010.5v3M22%2010.5v3'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E");--ico-son:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M4%209.5h3.5L12%205.5v13l-4.5-4H4z'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M15.5%209a4%204%200%200%201%200%206M18%206.5a7.5%207.5%200%200%201%200%2011'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E");--ico-bouclier:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M12%203%205%206v5.5c0%204.5%203%207.8%207%209.5%204-1.7%207-5%207-9.5V6z'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'm9%2012%202.2%202.2L15.5%2010'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");--ico-pli:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M4%2020V8l4-4v12zM8%2016l4%204V8L8%204M12%2020l4-4V4l-4%204M16%2016l4%204V8l-4-4'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");--ico-horloge:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'8.5'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%2F%3E%3Cpath%20d%3D'M12%207.5V12l3%202'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");--ico-camion:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M2.5%206.5h11v9h-11zM13.5%209.5h4l3%203v3h-7z'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linejoin%3D'round'%2F%3E%3Ccircle%20cx%3D'6.5'%20cy%3D'17.5'%20r%3D'1.6'%20fill%3D'%23fff'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%2F%3E%3Ccircle%20cx%3D'17'%20cy%3D'17.5'%20r%3D'1.6'%20fill%3D'%23fff'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%2F%3E%3C%2Fsvg%3E");--ico-telephone:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M6.5%203.5h3l1.5%204.5-2%201.5a10%2010%200%200%200%205.5%205.5l1.5-2%204.5%201.5v3a2%202%200%200%201-2%202A16%2016%200%200%201%204.5%205.5a2%202%200%200%201%202-2z'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");--ico-courriel:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Crect%20x%3D'3'%20y%3D'5.5'%20width%3D'18'%20height%3D'13'%20rx%3D'2'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%2F%3E%3Cpath%20d%3D'm3.5%207%208.5%206.5L20.5%207'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");--ico-lieu:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M12%2021s-6.5-5.8-6.5-11a6.5%206.5%200%200%201%2013%200c0%205.2-6.5%2011-6.5%2011z'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linejoin%3D'round'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'10'%20r%3D'2.2'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%2F%3E%3C%2Fsvg%3E");--ico-fleche:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M5%2012h14m-5-5%205%205-5%205'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");--ico-check:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'm5%2012.5%204.5%204.5L19%207.5'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");--ico-panier:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M3%204.5h2.5l2%2010.5h10l2-7.5H7'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3Ccircle%20cx%3D'9'%20cy%3D'19'%20r%3D'1.3'%20fill%3D'%23000'%2F%3E%3Ccircle%20cx%3D'17'%20cy%3D'19'%20r%3D'1.3'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E");--ico-lecture:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M4%205.5h6a2%202%200%200%201%202%202V19a1.5%201.5%200%200%200-1.5-1.5H4zM20%205.5h-6a2%202%200%200%200-2%202V19a1.5%201.5%200%200%201%201.5-1.5H20z'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");--ico-demo:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Crect%20x%3D'3'%20y%3D'5'%20width%3D'18'%20height%3D'12'%20rx%3D'2'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%2F%3E%3Cpath%20d%3D'M10.5%208.5v5l4-2.5zM8%2020.5h8'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");--ico-play:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M8%205.5v13l10-6.5z'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E");--ico-pause:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M7.5%205.5h3v13h-3zM13.5%205.5h3v13h-3z'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E")}
.i-logo{--ico:var(--ico-logo)}
.i-portique{--ico:var(--ico-portique)}
.i-raquette{--ico:var(--ico-raquette)}
.i-gant{--ico:var(--ico-gant)}
.i-zones{--ico:var(--ico-zones)}
.i-flux{--ico:var(--ico-flux)}
.i-poids{--ico:var(--ico-poids)}
.i-batterie{--ico:var(--ico-batterie)}
.i-vibration{--ico:var(--ico-vibration)}
.i-son{--ico:var(--ico-son)}
.i-bouclier{--ico:var(--ico-bouclier)}
.i-pli{--ico:var(--ico-pli)}
.i-horloge{--ico:var(--ico-horloge)}
.i-camion{--ico:var(--ico-camion)}
.i-telephone{--ico:var(--ico-telephone)}
.i-courriel{--ico:var(--ico-courriel)}
.i-lieu{--ico:var(--ico-lieu)}
.i-fleche{--ico:var(--ico-fleche)}
.i-check{--ico:var(--ico-check)}
.i-panier{--ico:var(--ico-panier)}
.i-lecture{--ico:var(--ico-lecture)}
.i-demo{--ico:var(--ico-demo)}
.i-play{--ico:var(--ico-play)}
.i-pause{--ico:var(--ico-pause)}