/*
Theme Name: CUBOXO
Theme URI: https://cuboxo.fr
Author: CUBOXO
Description: Thème bloc sur mesure de CUBOXO — vente et transformation de conteneurs maritimes. Accueil, catalogues (conteneurs bruts, gamme CUBO, accessoires), FAQ, contact et dépôts entièrement modifiables depuis l'éditeur de blocs.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cuboxo
Tags: block-theme, full-site-editing, business
*/

/* La feuille de la maquette validée (phase 2-3), préfixée par « body »,
   puis l'adaptation à la structure des blocs, puis la position des repères
   des cartes de dépôts. Les polices sont déclarées dans theme.json. */

/* =========================================================
   CUBOXO — maquette de l'accueil (phase 2)
   Registre relevé sur bluetainer.com : une famille grotesque,
   un accent jaune, un bleu réservé au bouton « Tous nos modèles »,
   fond gris froid, rectangles et arrondis, alignement à gauche.
   ========================================================= */

:root {
  --jaune: #FFD700;
  --bleu: #015095;
  --noir: #000000;
  --encre: #231F20;
  --texte: #0F0F0F;
  --gris-fond: #F1F1F1;
  --gris-carte: #E9E9EA;
  --gris-pastille: #DCDCDC;
  --gris-texte: #8E9194;
  --filet: #D1D1D1;
  --clair: #F9F9F9;
  --blanc: #FFFFFF;
  --gouttiere: 10px;
  --marge: 20px;
  --entete: 80px;
  /* pictogrammes du tableau Références : masques CSS, choisis par classe p1-… / p2-… */
  --picto-restauration: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v9a2 2 0 0 1-1 1.7V22H4.5v-9.3A2 2 0 0 1 3.5 11V2H5v7h.8V2h1.2zm1.5 0H10v7h.8V2h1.2v9a2 2 0 0 1-1 1.7V22H9.5v-9.3a2 2 0 0 1-1-1.7zM17 2c2 0 3.5 2.5 3.5 6 0 2.2-.9 3.7-2 4.3V22H17V2z'/%3E%3C/svg%3E");
  --picto-habitat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11h3v10h5v-6h4v6h5V11h3z'/%3E%3C/svg%3E");
  --picto-travail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v11H3zm-1 13h20v2H2z'/%3E%3C/svg%3E");
  --picto-evenementiel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21V3h2v1l13 4-13 4v9z'/%3E%3C/svg%3E");
  --picto-sport: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10h2V8h2v8H4v-2H2zm4-2h2v8H6zm2 3h8v2H8zm8-3h2v8h-2zm2 0h2v2h2v4h-2v2h-2z'/%3E%3C/svg%3E");
  --picto-cube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4 93 27 50 50 7 27zM5 33l41 23v42L5 75zM54 56l41-23v42L54 98z'/%3E%3C/svg%3E");
  --picto-mobilite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h11v9h2l1-4h4v6h-1.5a2.5 2.5 0 0 1-5 0h-5a2.5 2.5 0 0 1-5 0H3zm4.5 12.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm10 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--gris-fond);
  color: var(--texte);
  font-family: 'General Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body img { display: block; max-width: 100%; }
body a { color: inherit; text-decoration: none; }
body p { margin: 0; }
body h1, body h2, body h3 { margin: 0; font-weight: 600; color: var(--encre); hyphens: none; text-wrap: balance; }
body figure { margin: 0; }
body button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
body sup { font-size: .42em; vertical-align: top; position: relative; top: .18em; margin-left: .04em; }

body .ico { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* ---------- boutons ---------- */
body .bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px; font-size: 15px; line-height: 1.2; white-space: nowrap;
  padding: 12px 24px; transition: filter .2s, background-color .2s, color .2s;
}
body .bouton-jaune { background: var(--jaune); color: var(--noir); }
body .bouton-gris { background: var(--gris-pastille); color: var(--noir); }
body .bouton-jaune:hover, body .bouton-gris:hover, body .bouton-bleu:hover { filter: brightness(.94); }
body .bouton-contour { border: 1px solid var(--encre); padding: 9px 24px; font-size: 16px; color: var(--encre); }
body .bouton-contour:hover { background: var(--encre); color: var(--blanc); }
body .ico-chevron { width: 12px; height: 12px; }
body .bouton-bleu { background: var(--bleu); color: var(--blanc); font-size: 16px; padding: 9px 24px; }
body .bouton-bleu .plus, body .bouton-bleu em { font-size: 20px; font-style: normal; line-height: 1; font-weight: 400; margin-top: -2px; }
body .bouton-blanc { background: var(--blanc); border: 1px solid var(--filet); border-radius: 10px; padding: 11px 40px; font-size: 16px; }
body .bouton-blanc:hover { border-color: var(--encre); }

/* ---------- en-tête ---------- */
body .entete {
  position: sticky; top: 0; z-index: 50;
  min-height: var(--entete);
  display: flex; align-items: center; gap: 48px;
  padding: 12px var(--marge);
  background: var(--gris-fond);
  border-bottom: 1px solid rgba(35, 31, 32, .1);
}
body .entete-logo img { height: 38px; width: auto; }
body .menu { display: flex; flex-wrap: wrap; gap: 10px 46px; margin-left: 60px; }
body .menu a {
  font-size: 16px; letter-spacing: .005em; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px;
}
body .menu a:hover { text-decoration-thickness: 2px; }
body .entete-actions { display: flex; gap: 20px; margin-left: auto; }
body .entete-actions .bouton { min-height: 52px; }
body .langues { display: flex; align-items: center; gap: 2px; }   /* FR · EN · DE, écrit par traduire.py */
body .langues a { padding: 6px 8px; border-radius: 6px; font-size: 14px; font-weight: 600; letter-spacing: .02em; text-decoration: none; }
body .langues a:hover { text-decoration: underline; }
body .langues a[aria-current] { background: var(--bleu); color: var(--blanc); }
body .langues-choix { display: none; }   /* téléphone : FR ⌃⌄ dans la barre, à côté du panier */
body .langues-choix select {
  -webkit-appearance: none; appearance: none; height: 44px; padding: 0 24px 0 8px; border: 0; border-radius: 8px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 6 4-4 4 4M2 12l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 4px center / 10px 15px;
  color: var(--noir); font: 500 17px/1 inherit; letter-spacing: .02em; cursor: pointer;
}
body .burger { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 999px; background: var(--gris-pastille); position: relative; }
body .burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--encre); transition: transform .25s; }
body .burger span:first-child { top: 17px; } body .burger span:last-child { top: 25px; }
body .panneau-mobile { display: none; }

/* ---------- ouverture ---------- */
body .ouverture { padding: 26px var(--marge) 0; }
body .ouverture-titre {
  font-weight: 500; font-size: calc((100vw - 40px) / 12.95); line-height: 1; letter-spacing: -.05em;
  text-wrap: nowrap;
  color: var(--encre);
}
body .ouverture-titre.ligne-droite { text-align: right; }
body .ouverture-titre sup { font-size: .3em; top: .32em; letter-spacing: 0; }

/* ---------- 1 · chapeau ---------- */
body .chapeau {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  padding: 48px var(--marge) 52px;
}
body .chapeau-texte { max-width: 760px; font-size: 20px; line-height: 1.6; color: var(--gris-texte); }
body .chapeau-texte .fleche { color: var(--gris-texte); margin-right: 4px; }

/* ---------- 2 · le container repensé ---------- */
body .repense {
  position: relative; margin: 0 var(--gouttiere);
  height: clamp(640px, 82vw, 1180px);
  border-radius: 15px; overflow: hidden; color: var(--blanc);
}
body .repense-fond, body .repense-fond img { position: absolute; inset: 0; width: 100%; height: 100%; }
body .repense-fond img { object-fit: cover; object-position: 50% 50%; transform: scale(var(--zoom, 1.08)); transform-origin: 50% 40%; will-change: transform; }
body .repense-fond::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.32) 38%, rgba(0,0,0,0) 62%),
              linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.25) 100%);
}
body .repense-contenu { position: relative; padding: 20px; }
body .badge {
  display: inline-block; border: 1px solid var(--blanc); border-radius: 999px;
  padding: 10px 18px; font-size: 14px; line-height: 1.4; letter-spacing: .01em;
}
body .repense-texte { max-width: 560px; margin-top: 52px; font-size: 24px; line-height: 1.46; }
body .repense-texte p + p { margin-top: 1.46em; }
body .produit-vedette {
  position: absolute; right: 20px; bottom: 20px; width: 287px;
  display: flex; flex-direction: column; gap: 10px;
}
body .produit-vedette-label { font-size: 14px; letter-spacing: .02em; }
body .produit-vedette img { width: 100%; aspect-ratio: 287 / 353; object-fit: cover; border-radius: 7.5px; transition: transform .4s; }
body .produit-vedette:hover img { transform: translateY(-4px); }
body .produit-vedette-nom { font-size: 16px; font-weight: 500; line-height: 1.3; margin-top: 4px; }
body .produit-vedette-cat { font-size: 14px; opacity: .72; margin-top: -8px; }

/* ---------- titres de section ---------- */
body .ligne-titre { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
body .titre-moyen { font-size: clamp(30px, 3.55vw, 54px); line-height: 1.05; letter-spacing: -.03em; }
body .titre-geant { font-size: clamp(44px, 6.3vw, 100px); line-height: 1.2; letter-spacing: -.04em; }
body .mention { font-size: 14px; text-align: right; }
body .texte-gris { color: var(--gris-texte); font-size: 20px; line-height: 1.6; }

/* ---------- 3 · nos expertises ---------- */
body .expertises { padding: 110px 0 120px; }
body .expertises .ligne-titre { padding: 0 var(--gouttiere); align-items: center; margin-bottom: 34px; }
body .expertises .mention { padding-right: var(--gouttiere); }
body .expertises-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 0 var(--gouttiere); }
body .expertise figure { aspect-ratio: 413 / 650; overflow: hidden; }
body .expertise figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
body .expertise:hover figure img { transform: scale(1.04); }
body .expertise .numero { display: block; font-size: 14px; margin: 34px 15px 0; }
body .expertise h3 { font-size: clamp(24px, 2.36vw, 34px); line-height: 1.2; letter-spacing: -.04em; margin: 22px 15px 0; }
body .expertise p { margin: 22px 15px 0; max-width: 520px; }

/* ---------- 4 · bandeau vidéo ---------- */
body .bandeau { background: var(--noir); padding: 20px 0; }
body .bandeau-image { position: relative; height: calc(100vh - var(--entete) - 40px); min-height: 560px; overflow: hidden; }
body .bandeau-fond { position: absolute; inset: -6% 0; margin: 0; transform: translateY(var(--parallaxe, 0)); }
body .bandeau-fond img { width: 100%; height: 100%; object-fit: cover; }
body .bandeau-image::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.5); }
body .bandeau-contenu {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 var(--marge); color: var(--blanc);
}
body .bandeau-titre { color: var(--blanc); font-weight: 500; font-size: clamp(30px, 4.1vw, 66px); line-height: 1.18; letter-spacing: 0; max-width: 1340px; }
body .lien-video {
  margin-top: 46px; display: inline-flex; align-items: center; gap: 10px;
  color: var(--blanc); font-size: 16px; letter-spacing: .01em;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
body .lien-video .ico { width: 16px; height: 16px; }

/* ---------- 5 · ils nous font confiance ---------- */
body .confiance { padding: 30px 0 0; }
body .defilant { overflow: hidden; }
body .defilant-piste { display: flex; gap: 20px; width: max-content; animation: defiler 48s linear infinite; }
body .defilant:hover .defilant-piste { animation-play-state: paused; }
@keyframes defiler { to { transform: translateX(calc(-50% - 10px)); } }
body .logo-carte {
  flex: none; width: 200px; height: 150px; border-radius: 15px; background: var(--blanc);
  display: flex; align-items: center; justify-content: center;
}
body .logo-carte span, body .logo-carte p {
  font-size: 13px; font-weight: 500; letter-spacing: .14em; color: #B9BBBD;
  border: 1px dashed #CFD1D3; border-radius: 8px; padding: 14px 18px;
}

/* ---------- 6 · containers bruts ---------- */
body .bruts { padding: 120px 0 0; }
body .bruts .ligne-titre { padding: 0 var(--gouttiere); }
body .bruts .ligne-titre .bouton { margin-bottom: 18px; }
body .carrousel { margin-top: 40px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; padding: 30px 0 20px; }
body .carrousel::-webkit-scrollbar { display: none; }
body .carrousel.glisse { cursor: grabbing; }
body .carrousel-piste { display: flex; gap: 15px; width: max-content; padding: 0 var(--gouttiere); }
body .carte-brut {
  position: relative; flex: none; width: calc((100vw - 20px) / 4.4); max-width: 360px; min-width: 250px;
  aspect-ratio: 279 / 343; background: var(--gris-carte); overflow: hidden;
  transform: translateY(var(--vague, 0px)); transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
body .carte-brut img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); -webkit-user-drag: none; }
body .carte-brut:hover img { transform: scale(1.05); }
body .carte-nom { position: absolute; left: 24px; right: 24px; bottom: 50px; margin: 0; font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: 0; color: var(--texte); text-transform: uppercase; text-wrap: balance; }
body .carte-nom a::after { content: ''; position: absolute; inset: 0; }   /* lien étendu à toute la carte */
body .carte-brut .carte-nom { font-size: 15px; }
body .carte-info { position: absolute; left: 24px; bottom: 24px; max-width: calc(100% - 150px); margin: 0; font-size: 14px; color: var(--gris-texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body .carte-prix { position: absolute; right: 24px; bottom: 23px; margin: 0; font-size: 15px; font-weight: 500; color: var(--texte); white-space: nowrap; }

/* ---------- 7 · gamme CUBO ---------- */
body .cubo { padding: 130px 0 0; overflow: hidden; }
body .cubo-accroche { margin-left: auto; width: min(430px, 40vw); margin-right: var(--marge); font-size: 17px; line-height: 1.5; color: var(--texte); }
/* titre en bandeau continu, de gauche à droite, séparé par le cube CUBOXO qui tourne (référence : 25 s par tour, séparateur 15 s) */
body .cubo-titre-cadre { margin-top: 18px; overflow-x: clip; }
body .cubo-titre-piste { display: flex; align-items: center; width: max-content; animation: titre-defile 25s linear infinite; }
body .cubo-titre { font-size: clamp(48px, 6.7vw, 110px); white-space: nowrap; }
body .cubo-separateur { flex: none; width: .8em; height: .8em; margin: 0 .4em; font-size: clamp(48px, 6.7vw, 110px); background: var(--encre); -webkit-mask: var(--picto-cube) center / contain no-repeat; mask: var(--picto-cube) center / contain no-repeat; animation: tourner 15s linear infinite; }
@keyframes titre-defile { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes tourner { to { transform: rotate(360deg); } }
body .cubo-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding: 30px var(--marge) 0; }
body .cubo-intro .texte-gris { max-width: 430px; }
body .onglets { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; padding: 54px var(--marge) 16px; }
body .onglets::-webkit-scrollbar { display: none; }
body .onglet {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px;
  padding: 3px 20px; border: 1px solid var(--filet); border-radius: 12px; font-size: 16px; line-height: 1;
  transition: background-color .2s, color .2s, border-color .2s;
}
body .onglet:hover { border-color: var(--encre); }
body .onglet { margin: 0; cursor: pointer; white-space: nowrap; }
body .onglet .compteur, body .onglet em { font-size: 12.8px; font-style: normal; color: var(--texte); letter-spacing: .04em; }
body .onglet.actif { background: var(--texte); border-color: var(--texte); color: var(--blanc); }
body .onglet.actif .compteur, body .onglet.actif em { color: var(--blanc); }
body .grille-cubo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 25px; padding: 0 var(--marge); }
body .carte-cubo { position: relative; border-radius: 8px; overflow: hidden; background: var(--gris-carte); aspect-ratio: 289 / 354; }
body .carte-cubo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
body .carte-cubo:hover img { transform: scale(1.04); }
body .grille-vide { display: none; grid-column: 1 / -1; color: var(--gris-texte); padding: 40px 0; }
body .grille-vide a { text-decoration: underline; }
/* filtres : le script pose une classe sur la grille, chaque élément porte sa catégorie en classe ;
   on masque ce qui ne correspond pas, sans toucher à l'affichage de ce qui reste */
body .grille-filtrable.filtre-frigorifique > :not(.cat-frigorifique), body .grille-filtrable.filtre-standards > :not(.cat-standards), body .grille-filtrable.filtre-specifiques > :not(.cat-specifiques), body .grille-filtrable.filtre-habitat > :not(.cat-habitat), body .grille-filtrable.filtre-espace-de-travail > :not(.cat-espace-de-travail), body .grille-filtrable.filtre-restauration > :not(.cat-restauration), body .grille-filtrable.filtre-mobilite > :not(.cat-mobilite), body .grille-filtrable.filtre-sport > :not(.cat-sport), body .grille-filtrable.filtre-evenementiel > :not(.cat-evenementiel), body .grille-filtrable.filtre-sanitaire > :not(.cat-sanitaire), body .grille-filtrable.filtre-medical > :not(.cat-medical), body .grille-filtrable.filtre-sieges-ponton > :not(.cat-sieges-ponton), body .grille-filtrable.filtre-remorques-chariots > :not(.cat-remorques-chariots), body .grille-filtrable.filtre-bateaux > :not(.cat-bateaux), body .grille-filtrable.filtre-kayaks > :not(.cat-kayaks), body .grille-filtrable.filtre-paddles > :not(.cat-paddles), body .grille-filtrable.filtre-conteneur > :not(.cat-conteneur), body .grille-filtrable.filtre-achat > :not(.cat-achat), body .grille-filtrable.filtre-livraison > :not(.cat-livraison), body .grille-filtrable.filtre-transformation > :not(.cat-transformation), body .grille-filtrable.filtre-reglementation > :not(.cat-reglementation), body .grille-filtrable.filtre-securite > :not(.cat-securite), body .grille-filtrable.filtre-durabilite > :not(.cat-durabilite), body .grille-filtrable.filtre-recyclage > :not(.cat-recyclage) { display: none; }
body .zone-filtre.vide .grille-vide { display: block; }
body .voir-plus { display: flex; justify-content: center; padding: 48px 0 0; }

/* ---------- 8 · références ---------- */
body .references { padding: 140px var(--marge) 0; }
body .references-tete { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
body .references-tete .texte-gris { max-width: 460px; font-size: 17px; }
body .references-titre { font-size: clamp(52px, 7.5vw, 124px); line-height: 1.05; letter-spacing: -.035em; text-align: right; }
body .tableau { margin-top: 56px; }
body .tableau-ligne {
  display: grid; grid-template-columns: 1fr 1fr 1fr 120px; align-items: center;
  min-height: 56px; padding: 0 16px; border-bottom: 1px solid var(--encre);
  font-size: 16px; font-weight: 500; transition: background-color .2s;
}
body a.tableau-ligne:hover { background: rgba(255, 255, 255, .55); }
body .tableau-entete { font-weight: 400; min-height: 52px; letter-spacing: .01em; }
body .tableau-entete span:last-child, body .annee { text-align: right; }
body .client { font-weight: 600; font-size: 18px; letter-spacing: .005em; }
body .client .fleche { font-weight: 500; margin-right: 6px; }
body .pictos { display: flex; gap: 14px; margin: 0; min-height: 22px; }
body .pictos::before, body .pictos::after { content: none; width: 22px; height: 22px; flex: none; background: var(--texte); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
body .pictos[class*="p1-"]::before, body .pictos[class*="p2-"]::after { content: ''; }
body .p1-restauration::before, body .p2-restauration::after { -webkit-mask-image: var(--picto-restauration); mask-image: var(--picto-restauration); }
body .p1-habitat::before, body .p2-habitat::after { -webkit-mask-image: var(--picto-habitat); mask-image: var(--picto-habitat); }
body .p1-travail::before, body .p2-travail::after { -webkit-mask-image: var(--picto-travail); mask-image: var(--picto-travail); }
body .p1-evenementiel::before, body .p2-evenementiel::after { -webkit-mask-image: var(--picto-evenementiel); mask-image: var(--picto-evenementiel); }
body .p1-sport::before, body .p2-sport::after { -webkit-mask-image: var(--picto-sport); mask-image: var(--picto-sport); }
body .p1-mobilite::before, body .p2-mobilite::after { -webkit-mask-image: var(--picto-mobilite); mask-image: var(--picto-mobilite); }

/* ---------- 9 · actualités & réseaux ---------- */
body .reseaux { padding: 40px 0 120px; overflow: hidden; }
body .identite {
  margin: 0 15px; display: flex; align-items: center; gap: 22px;
  background: var(--clair); border-radius: 25px; padding: 15px;
}
body .identite-rond { width: 80px; height: 80px; margin: 0; border-radius: 50%; background: var(--blanc); display: grid; place-items: center; flex: none; }
body .identite-rond img { width: 44px; }
body .identite-titre { font-size: 18px; font-weight: 600; letter-spacing: .01em; color: var(--encre); line-height: 1.35; }
body .identite-sous { font-size: 18px; font-weight: 600; color: var(--encre); line-height: 1.35; }
body .vignettes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 10px 15px 0; }
body .vignette { position: relative; aspect-ratio: 1; border-radius: 25px; overflow: hidden; }
body .vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
body .vignette:hover img { transform: scale(1.05); }
body .ico-galerie, body .vignette::after { content: ''; position: absolute; top: 16px; right: 16px; width: 16px; height: 16px; border: 2px solid var(--blanc); border-radius: 3px; box-shadow: 3px 3px 0 -1px rgba(255,255,255,.9); pointer-events: none; }
/* bande de photos en défilement continu ; la marge droite de chaque photo rend la boucle exacte à -50 % */
body .bande-large { display: flex; width: max-content; margin-top: 40px; animation: bande-defile 60s linear infinite; }
body .bande-large figure { flex: none; width: 41vw; height: min(38vw, 560px); margin-right: 12px; overflow: hidden; }
@keyframes bande-defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { body .cubo-titre-piste, body .cubo-separateur, body .bande-large { animation: none; } }
body .bande-large img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- pied de page ---------- */
body .pied { background: var(--bleu); color: var(--blanc); padding: 30px 0 0; }   /* bleu du logo CUBOXO */
body .pied-haut {
  display: grid; grid-template-columns: 2.75fr 1fr 1fr; gap: 0 24px;
  margin: 0 var(--gouttiere); padding: 32px 20px 120px; border-top: 1px solid rgba(255,255,255,.9);
}
body .pied-logo { height: 40px; width: auto; filter: brightness(0) invert(1); }
body .pied-marque p { max-width: 380px; margin-top: 30px; font-size: 18px; line-height: 1.55; }
body .lien-souligne { display: inline-flex; gap: 10px; margin-top: 40px; font-size: 18px; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
body .lien-souligne > a { display: inline-flex; gap: 10px; }
body .lien-souligne em { font-style: normal; }
body .pied-col { display: flex; flex-direction: column; align-items: flex-start; }
body .pied-titre { font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, .62); line-height: 1.6; margin-bottom: 30px; }
body .pied-col a, body .pied-ville { font-size: 20px; line-height: 28px; letter-spacing: -.03em; }
body .pied-col a:not(.lien-souligne):hover { color: var(--jaune); }
body .pied-cgv { margin-top: 26px; }
body .pied-bas {
  display: grid; grid-template-columns: 1.6fr 1.2fr 1.6fr 1fr; align-items: start; gap: 24px;
  margin: 0 var(--gouttiere); padding: 34px 20px 110px; border-top: 1px solid rgba(255,255,255,.55);
}
body .pied-pilules { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
body .pilule-blanche { display: inline-flex; align-items: center; gap: 14px; background: var(--blanc); color: var(--noir); border: 1px solid var(--filet); border-radius: 50px; padding: 9px 24px; font-size: 16px; }
body .pied-adresse, body .pied-horaires { font-size: 18px; line-height: 1.55; }
body .pied-reseaux { display: flex; gap: 2px; justify-content: flex-end; }
body .pied-reseaux a { width: 50px; height: 50px; border-radius: 50%; background: #E6E6E6; display: grid; place-items: center; transition: background-color .2s; }
body .pied-reseaux a:hover { background: var(--jaune); }
body .pied-reseaux svg { width: 26px; height: 26px; fill: var(--noir); }
body .pied-copyright { margin: 0 var(--gouttiere); border-top: 1px solid rgba(255,255,255,.55); text-align: center; font-size: 14px; padding: 18px 0 22px; }

/* ---------- pastille flottante ---------- */
body .pastille {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  height: 40px; padding: 0 26px; display: inline-flex; align-items: center;
  background: var(--jaune); color: var(--noir); border-radius: 50px; font-size: 16px; letter-spacing: .01em;
  transition: transform .2s;
}
body .pastille:hover { transform: translateY(-2px); }

/* ---------- lecteur vidéo ---------- */
body .lecteur { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.86); display: none; align-items: center; justify-content: center; padding: 20px; }
body .lecteur.ouvert { display: flex; }
body .lecteur-boite { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; background: #111; border-radius: 15px; display: grid; place-items: center; color: #ccc; text-align: center; padding: 30px; }
body .lecteur-fermer { position: absolute; top: -48px; right: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--blanc); color: var(--noir); font-size: 24px; line-height: 1; }

/* ---------- apparition au défilement ---------- */
body .apparait { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
body .apparait.vu { opacity: 1; transform: none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1280px) {
  body .menu { margin-left: 20px; gap: 30px; }
  body .entete { gap: 28px; }
}
@media (max-width: 1100px) {
  :root { --entete: 72px; }
  body .menu, body .entete-actions { display: none; }
  body .burger { display: block; }
  body .panneau-mobile {
    display: flex; flex-direction: column; gap: 14px;
    position: fixed; inset: var(--entete) 0 0 0; z-index: 49;
    background: var(--gris-fond); padding: 30px var(--marge);
    transform: translateY(calc(-100% - var(--entete) - 20px)); visibility: hidden; transition: transform .4s cubic-bezier(.2,.7,.2,1), visibility 0s .4s;
  }
  body .panneau-mobile nav { display: flex; flex-direction: column; gap: 18px; margin-bottom: 26px; }
  body .panneau-mobile nav a { font-size: 28px; font-weight: 600; letter-spacing: -.03em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
  body .panneau-mobile .bouton { align-self: flex-start; }
  body.menu-ouvert .panneau-mobile { transform: none; visibility: visible; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
  body.menu-ouvert .burger span:first-child { transform: translateY(4px) rotate(45deg); }
  body.menu-ouvert .burger span:last-child { transform: translateY(-4px) rotate(-45deg); }
  body .grille-cubo { grid-template-columns: repeat(2, 1fr); }
  body .pied-haut { grid-template-columns: 1fr 1fr 1fr; gap: 40px 24px; }
  body .pied-marque { grid-column: 1 / -1; }
  body .pied-bas { grid-template-columns: 1fr 1fr; }
  body .pied-reseaux { justify-content: flex-start; }
}
@media (max-width: 560px) {
  body .grille-cubo { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body .entete-logo img { height: 30px; }
  body .ouverture { padding-top: 22px; }
  body .ouverture-titre { font-size: 11.2vw; text-wrap: wrap; letter-spacing: -.045em; }
  body .chapeau { flex-direction: column; align-items: flex-start; gap: 24px; padding: 34px var(--marge) 36px; }
  body .chapeau-texte { font-size: 18px; }
  body .repense { height: auto; min-height: 760px; display: flex; flex-direction: column; justify-content: space-between; }
  body .repense-fond::after { background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.42) 55%, rgba(0,0,0,.2) 100%); }
  body .repense-texte { font-size: 19px; margin-top: 30px; }
  body .produit-vedette { position: relative; right: auto; bottom: auto; margin: 30px 20px 20px; width: 62%; }
  body .expertises { padding: 80px 0; }
  body .expertises .ligne-titre { flex-direction: column; align-items: flex-start; gap: 6px; }
  body .expertises-grille { grid-template-columns: 1fr; gap: 50px; }
  body .expertise figure { aspect-ratio: 4 / 5; }
  body .bandeau-image { height: 78vh; min-height: 480px; }
  body .bruts { padding-top: 80px; }
  body .ligne-titre { flex-direction: column; align-items: flex-start; gap: 18px; }
  body .bruts .ligne-titre .bouton { margin-bottom: 0; }
  body .carte-brut { width: calc((100vw - 20px) / 1.25); min-width: 0; }
  body .cubo { padding-top: 90px; }
  body .cubo-accroche { width: auto; margin: 0 var(--marge); }
  body .cubo-intro { flex-direction: column; align-items: flex-start; gap: 24px; }
  body .grille-cubo { gap: 20px 12px; }
  body .references { padding-top: 90px; }
  body .references-tete { flex-direction: column-reverse; align-items: flex-end; gap: 20px; }
  body .tableau-ligne { grid-template-columns: 74px 1fr 64px; padding: 0 4px; font-size: 14px; }
  body .tableau-ligne > :nth-child(3) { display: none; }   /* le code postal se lit sur la fiche projet */
  body .tableau-entete { font-size: 12px; }
  body .client { font-size: 14px; }
  body .pictos { gap: 6px; } body .pictos svg { width: 18px; height: 18px; }
  body .identite { gap: 14px; }
  body .identite-rond { width: 60px; height: 60px; } body .identite-rond img { width: 32px; }
  body .identite-titre, body .identite-sous { font-size: 14px; }
  body .vignettes { grid-template-columns: repeat(2, 1fr); }
  body .vignette:last-child { display: none; }
  body .bande-large figure { width: 78vw; height: 70vw; }
  body .pied-haut { grid-template-columns: 1fr 1fr; padding-bottom: 60px; }
  body .pied-col:last-child { grid-column: 1 / -1; }
  body .pied-bas { grid-template-columns: 1fr; padding-bottom: 60px; }
  body .pied-copyright { padding-bottom: 80px; }
}

/* =========================================================
   Pages internes (phase 3) — mêmes jetons, mêmes rayons,
   mêmes boutons que l'accueil : seul l'agencement change.
   ========================================================= */

/* ---------- tête de page et fil d'Ariane ---------- */
body .page-tete { padding: 64px var(--marge) 0; }
body .page-tete .titre-geant { line-height: 1.05; }
body .page-sous-titre { margin-top: 20px; max-width: 780px; font-size: 24px; line-height: 1.4; color: var(--encre); }
body .page-intro { margin-top: 24px; max-width: 720px; }
body .page-accroche { margin-top: 20px; font-size: clamp(22px, 2.2vw, 32px); font-weight: 500; line-height: 1.25; letter-spacing: -.02em; }
body .ariane { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; font-size: 14px; color: var(--gris-texte); }
body .ariane a:hover { color: var(--encre); text-decoration: underline; }
body .ariane .sep { opacity: .6; }
body .section { padding: 100px var(--marge) 0; }
body .section .ligne-titre { margin-bottom: 34px; }
body .section .onglets { padding: 0 0 26px; }
body main > .section:last-child { padding-bottom: 120px; }
body .section-catalogue { padding-top: 52px; }
body .lien-cloture { padding: 80px var(--marge) 120px; }
body .lien-souligne-sombre { color: var(--encre); margin-top: 0; }

/* ---------- cartes produit à deux vues ---------- */
body .grille-produits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 25px; }
body .carte-produit { position: relative; display: block; aspect-ratio: 289 / 354; border-radius: 10px; overflow: hidden; background: var(--gris-carte); }
body .carte-visuels img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
body .carte-visuels .vue-2 { opacity: 0; }
body .carte-produit:hover .vue-1 { opacity: 0; }
body .carte-produit:hover .vue-2 { opacity: 1; transform: scale(1.03); }
body .carte-produit .carte-nom { font-size: 15px; }
/* vraies photos produit (fond blanc) : affichées entières dans la zone photo du cadre produit */
body .carte-photo { background: var(--blanc); }
body .carte-photo .carte-visuels { background: var(--blanc); }
body .carte-photo .carte-visuels img { object-fit: contain; padding: 6%; background: var(--blanc); }
body .galerie-photo .galerie-vues figure, body .galerie-photo .galerie-vignettes button { background: var(--blanc); }
body .galerie-photo .galerie-vues img { object-fit: contain; padding: 4%; }
body .galerie-photo .galerie-vignettes img { object-fit: contain; padding: 6%; }
/* accessoires photographiés par le fournisseur (images en hauteur) : objet entier, bords fondus dans le gris de la zone photo */
body .carte-produit.carte-fournisseur .carte-visuels { background: #e5e6e6; }
body .carte-produit.carte-fournisseur .carte-visuels img { object-fit: contain; padding: 4% 0; background: #e5e6e6;
  -webkit-mask-image: linear-gradient(to right, transparent 26%, #000 33%, #000 67%, transparent 74%);
  mask-image: linear-gradient(to right, transparent 26%, #000 33%, #000 67%, transparent 74%); }

/* ---------- fiche produit ---------- */
body .fiche { padding: 40px var(--marge) 0; }
body .fiche-grille { display: grid; grid-template-columns: 55fr 45fr; gap: 56px; align-items: start; }
body .galerie-vues figure { display: none; aspect-ratio: 5 / 4; border-radius: 12px; overflow: hidden; background: var(--gris-carte); }
body .galerie-vues figure.actif { display: block; }
body .galerie-vues img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; }
body .galerie-vues img[src*="/acc-"], body .galerie-vignettes img[src*="/acc-"] { object-position: 50% 30%; }   /* accessoires : objet cadré haut pour les cartes */
body .galerie-vignettes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
body .galerie-vignettes button { width: 96px; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid transparent; background: var(--gris-carte); opacity: .62; transition: opacity .2s, border-color .2s; }
body .galerie-vignettes button:hover { opacity: 1; }
body .galerie-vignettes button.actif { opacity: 1; border-color: var(--encre); }
body .galerie-vignettes img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; }
/* élévations en paysage : vue entière sur le gris des rendus du fournisseur */
body .galerie-vues figure.paysage, body .galerie-vignettes button.paysage { background: #e8e9e9; }
body .galerie-vues figure.paysage img, body .galerie-vignettes button.paysage img { object-fit: contain; }
body .fiche-titre { font-size: 40px; line-height: 1.1; letter-spacing: -.03em; }
body .pilule-etat { display: inline-flex; margin-top: 18px; padding: 6px 16px; border: 1px solid var(--filet); border-radius: 999px; font-size: 14px; }
body .fiche-pilules { display: flex; flex-wrap: wrap; gap: 8px; }
body .fiche-texte { margin-top: 24px; max-width: 560px; font-size: 17px; line-height: 1.65; }
body .fiche-resume { list-style: none; padding: 0; margin: 30px 0 0; max-width: 560px; border-top: 1px solid var(--encre); }
body .fiche-resume li, body .fiche-resume .resume-ligne { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--filet); font-size: 15px; }
body .fiche-resume li > :first-child, body .fiche-resume .resume-ligne > :first-child { color: var(--gris-texte); }
body .fiche-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 32px; }
body .fiche-actions .bouton { min-width: 220px; }
body .fiche-prix { margin-top: 30px; font-size: 36px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: var(--encre); }
body .fiche-taxe { margin-left: 2px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--gris-texte); }
body .fiche-livraison { margin-top: 8px; font-size: 14px; color: var(--gris-texte); }
body .fiche-dispo { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 15px; }
body .fiche-dispo::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--encre); }
body .fiche-dispo.dispo-rupture::before { background: var(--gris-texte); }
body .fiche-info .fiche-actions { margin-top: 28px; }
body .fiche-info .fiche-actions .bouton { min-width: 320px; min-height: 52px; font-size: 15px; }
body .fiche-sur-mesure { max-width: 320px; font-size: 14px; line-height: 1.5; color: var(--gris-texte); }
body .fiche-info .fiche-texte { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--filet); }
/* mesures : longueur, largeur, hauteur, volume */
body .fiche-mesures { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 560px; margin: 28px 0 0; border-top: 1px solid var(--encre); }
body .fiche-mesures .mesure { padding: 14px 12px 0 0; }
body .fiche-mesures dt { font-size: 13px; color: var(--gris-texte); }
body .fiche-mesures dd { margin: 4px 0 0; font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--encre); }
body .tableau-carac { border-top: 1px solid var(--encre); }
body .carac-ligne { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; min-height: 56px; padding: 10px 16px; border-bottom: 1px solid var(--encre); font-size: 16px; }
body .carac-ligne > :last-child { font-weight: 500; }
body .liste-points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--encre); }
body .liste-points li { display: flex; align-items: baseline; gap: 14px; min-height: 56px; padding: 15px 16px; border-bottom: 1px solid var(--encre); font-size: 16px; line-height: 1.5; }
body .liste-points li::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--encre); transform: translateY(-2px); }
body .note { margin-top: 14px; font-size: 14px; color: var(--gris-texte); }
body .pastilles { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 0; }
body .pastilles > li, body .pastilles > p { margin: 0; padding: 7px 20px; border: 1px solid var(--filet); border-radius: 12px; font-size: 16px; }
body .pastilles-liens > li, body .pastilles-liens > p { padding: 0; }
body .pastilles-liens a { display: block; padding: 7px 20px; }
body .pastilles-liens > :hover { border-color: var(--encre); }
body .encart-sur-mesure { display: grid; grid-template-columns: 1fr 1.4fr; gap: 26px 64px; align-items: start; padding: 52px 48px; border-radius: 15px; background: var(--gris-carte); }
body .encart-sur-mesure p { font-size: 20px; line-height: 1.55; }
body .encart-sur-mesure .bouton { grid-column: 2; justify-self: start; }

/* ---------- gamme CUBO ---------- */
body .visuel-tete { margin: 44px var(--gouttiere) 0; border-radius: 20px; overflow: hidden; background: var(--gris-carte); }
body .visuel-tete img { width: 100%; height: clamp(340px, 50vw, 760px); object-fit: cover; }
body .section-categories { padding-top: 70px; }
/* six usages : photo pleine carte, titre, accroche et pilule « DÉCOUVRIR » en blanc par-dessus */
body .section-usages { padding-top: 48px; }
body .grille-usages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
body .carte-usage { position: relative; display: block; aspect-ratio: 633 / 392; border-radius: 22px; overflow: hidden; background: var(--gris-carte); isolation: isolate; container-type: inline-size; }
body .carte-usage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
body .carte-usage:hover img { transform: scale(1.04); }
body .carte-usage::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.2) 42%, rgba(0,0,0,0) 72%), linear-gradient(0deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 55%); }
body .carte-usage-texte { position: absolute; left: 9%; right: 6%; bottom: 13%; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; color: var(--blanc); text-shadow: 0 1px 14px rgba(0,0,0,.28); }
body .carte-usage h2 { margin: 0; font-size: clamp(24px, 3.1vw, 50px); font-size: 8.2cqi; font-weight: 600; line-height: 1; letter-spacing: .03em; white-space: nowrap; color: var(--blanc); }   /* taille liée à la carte : un titre sur une ligne */
body .carte-usage p { margin: 2.6cqi 0 0; font-size: clamp(15px, 1.35vw, 21px); font-size: max(14px, 3.6cqi); font-weight: 600; line-height: 1.25; color: var(--blanc); }
body .pilule-decouvrir { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; margin-top: 4cqi; padding: 12px 26px; padding: max(9px, 2.2cqi) max(20px, 4.6cqi); border-radius: 999px; background: var(--blanc); color: var(--texte); font-size: 16px; font-size: max(13px, 3cqi); letter-spacing: .02em; text-shadow: none; transition: background-color .2s, color .2s; }
body .carte-usage:hover .pilule-decouvrir { background: var(--jaune); }
body .carte-usage .pilule-decouvrir, body .carte-usage .pilule-decouvrir a { color: var(--texte); }   /* le texte blanc de la carte ne doit pas gagner la pilule (WordPress met le lien dans un paragraphe) */
/* pages d'usage : les modèles directement sous le titre, alignés sur lui (la section porte déjà la marge) */
body .section-modeles-categorie { padding-top: 44px; }
body .section-modeles-categorie .grille-cubo { padding: 0; }
@media (max-width: 1100px) { body .grille-usages { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { body .grille-usages { grid-template-columns: 1fr; gap: 12px; } body .carte-usage { aspect-ratio: 4 / 3; border-radius: 16px; } body .pilule-decouvrir { font-size: 14px; } }
body .bloc-categorie { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; padding: 36px 0; }
body .bloc-categorie + .bloc-categorie { border-top: 1px solid var(--filet); }
body .bloc-inverse { grid-template-columns: 1fr 1.2fr; }
body .bloc-inverse .bloc-categorie-visuel { order: 2; }
body .bloc-categorie-visuel { display: block; border-radius: 16px; overflow: hidden; background: var(--gris-carte); }
body .bloc-categorie-visuel img { width: 100%; aspect-ratio: 1600 / 1040; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
body .bloc-categorie-visuel:hover img { transform: scale(1.03); }
body .bloc-categorie-texte h2 { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -.03em; }
body .bloc-categorie-texte p { margin: 16px 0 30px; font-size: 20px; color: var(--gris-texte); }
body .bloc-categorie-texte .bloc-categorie-compte { margin: 0 0 14px; font-size: 15px; letter-spacing: .02em; color: var(--gris-texte); text-transform: uppercase; }
body .visuel-bas img { object-position: 50% 78%; }
/* accessoires bateaux : cinq sélections, photo de tête cadrée pour garder la bande de mer en haut */
body .visuel-clair img { height: clamp(280px, 36vw, 540px); object-position: 50% 22%; }
body .grille-sous { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
body .carte-sous .carte-info { max-width: none; }
/* photos des sélections : voile sombre en bas de carte, texte en blanc par-dessus */
body .carte-sous::after { content: ''; position: absolute; inset: auto 0 0; height: 58%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.22) 45%, rgba(0,0,0,.62) 100%); pointer-events: none; }
body .carte-sous .carte-nom, body .carte-sous .carte-info { z-index: 1; color: var(--blanc); }
body .carte-sous .carte-info { opacity: .85; }
body .encart-vide { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; padding: 36px; border-radius: 15px; background: var(--gris-carte); }
body .encart-vide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
body .encart-vide p { margin: 18px 0 28px; font-size: 19px; line-height: 1.55; color: var(--texte); max-width: 520px; }
@media (max-width: 1100px) { body .grille-sous { grid-template-columns: repeat(3, 1fr); } body .encart-vide { grid-template-columns: 1fr; } }
@media (max-width: 560px) { body .grille-sous { grid-template-columns: 1fr; gap: 12px; } body .carte-sous { aspect-ratio: 5 / 4; } body .encart-vide { padding: 22px; } }
body .texte-intro { max-width: 980px; font-size: 24px; line-height: 1.5; color: var(--encre); }
body .section-intro { padding-top: 70px; }
body .etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
body .etape { padding-top: 18px; border-top: 1px solid var(--encre); }
body .etape .numero { font-size: 14px; }
body .etape h3 { margin: 22px 0 12px; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.15; letter-spacing: -.03em; }

/* ---------- pages thématiques ---------- */
body .colonnes-usages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 25px; }
body .usage { padding-top: 18px; border-top: 1px solid var(--encre); }
body .usage h3 { margin-bottom: 14px; font-size: clamp(22px, 2vw, 30px); line-height: 1.1; letter-spacing: -.03em; }

/* ---------- actualités ---------- */
body .grille-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 25px; }
body .carte-article figure { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
body .carte-article img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
body .carte-article:hover img { transform: scale(1.04); }
body .carte-article time { display: block; margin-top: 18px; font-size: 14px; color: var(--gris-texte); }
body .carte-article h2 { margin-top: 8px; font-size: 20px; line-height: 1.3; letter-spacing: -.01em; }
body .carte-article p { margin-top: 10px; color: var(--gris-texte); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body .pagination { display: flex; justify-content: center; padding-top: 60px; }
body .page-courante { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--texte); color: var(--blanc); }
body .article { padding: 40px var(--marge) 0; }
body .article-visuel { border-radius: 20px; overflow: hidden; }
body .article-visuel img { width: 100%; height: clamp(300px, 46vw, 640px); object-fit: cover; }
body .article-colonne { max-width: 720px; margin: 60px auto 0; }
body .article-colonne time { font-size: 14px; color: var(--gris-texte); }
body .article-colonne h1 { margin: 12px 0 26px; font-size: clamp(34px, 4vw, 56px); line-height: 1.08; letter-spacing: -.03em; }
body .article-chapeau { font-size: 22px; line-height: 1.5; color: var(--gris-texte); }
body .article-colonne p:not(.article-chapeau) { margin-top: 1.2em; font-size: 18px; line-height: 1.7; }

/* ---------- foire aux questions ---------- */
body .section-faq { padding-top: 52px; }
body .rubrique { display: grid; grid-template-columns: 90px 1fr; gap: 0 24px; padding: 56px 0; border-top: 1px solid var(--encre); }
body .rubrique .numero { padding-top: 12px; font-size: 14px; }
body .rubrique h2 { font-size: clamp(28px, 3vw, 44px); line-height: 1.1; letter-spacing: -.03em; }
body .questions { grid-column: 2; display: grid; gap: 30px; max-width: 900px; margin-top: 30px; }
body .question h3 { font-size: 18px; line-height: 1.4; letter-spacing: 0; }
body .question p { margin-top: 8px; }
body .encart-cloture { padding: 60px 48px; border-radius: 15px; background: var(--gris-carte); }
body .encart-cloture h2 { max-width: 920px; font-size: clamp(32px, 4vw, 60px); line-height: 1.05; letter-spacing: -.03em; }
body .encart-cloture > p { margin-top: 20px; max-width: 760px; font-size: 20px; color: var(--gris-texte); }
body .encart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 34px; }
body .encart-solutions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 46px; padding-top: 28px; border-top: 1px solid var(--filet); }
body .encart-solutions p { margin-right: 12px; }

/* ---------- à propos ---------- */
body .apropos-bloc { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
body .apropos-seul { grid-template-columns: 1fr; }
body .apropos-texte { max-width: 860px; }
body .apropos-texte p { margin-top: 24px; font-size: 20px; line-height: 1.6; }
body .apropos-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body .apropos-photos figure { aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; }
body .apropos-valeurs figure { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; }
body .apropos-bloc img { width: 100%; height: 100%; object-fit: cover; }
body .visuel-plein { margin-top: 100px; }
body .visuel-plein img { width: 100%; height: clamp(320px, 50vw, 760px); object-fit: cover; }

/* ---------- contact ---------- */
body .infos-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
body .info { padding-top: 18px; border-top: 1px solid var(--encre); }
body .info h2 { margin-bottom: 14px; font-size: 20px; font-weight: 500; letter-spacing: 0; color: var(--gris-texte); }
body .info p { font-size: 18px; line-height: 1.5; }
body .info p + p { margin-top: 6px; }
body .info a:hover { text-decoration: underline; }
body .reseaux-ronds { display: flex; gap: 6px; margin-top: 40px; }
body .reseaux-ronds a { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--gris-pastille); transition: background-color .2s; }
body .reseaux-ronds a:hover { background: var(--jaune); }
body .reseaux-ronds svg { width: 24px; height: 24px; fill: var(--noir); }
body .zone-onglets .onglets { padding: 0 0 30px; }
body .formulaire { display: none; grid-template-columns: 1fr 1fr; gap: 20px 25px; max-width: 980px; }
body .formulaire.actif { display: grid; }
body .champ { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
body .champ > span { color: var(--gris-texte); }
body .champ input, body .champ select, body .champ textarea {
  width: 100%; padding: 13px 16px; border: 1px solid var(--filet); border-radius: 10px;
  background: var(--blanc); color: var(--texte); font: inherit; font-size: 16px;
}
body .champ input:focus, body .champ select:focus, body .champ textarea:focus { outline: 2px solid var(--encre); outline-offset: 1px; }
body .champ textarea { resize: vertical; min-height: 150px; }
body .champ-large { grid-column: 1 / -1; }
body .champ-case { flex-direction: row; align-items: flex-start; gap: 12px; }
body .champ-case input { flex: none; width: 18px; height: 18px; margin-top: 2px; padding: 0; }
body .champ-case span { color: var(--texte); }
body .champ-case a { text-decoration: underline; }
body .formulaire-retour { grid-column: 1 / -1; font-size: 15px; }
body .carte-depots { max-width: 900px; }
body .carte-cadre { position: relative; }
body .carte-cadre img { width: 100%; }
body .repere { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 3px solid var(--gris-fond); border-radius: 50%; background: var(--encre); }
body .repere span, body .repere > a { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 500; line-height: 1.6; white-space: nowrap; }
body a.repere:hover span, body .repere > a:hover { text-decoration: underline; }
body .repere { margin: -7px 0 0 -7px; }
body .repere-actif { width: 22px; height: 22px; margin: -11px 0 0 -11px; box-shadow: 0 0 0 7px rgba(35, 31, 32, .14); }
body .repere-actif span, body .repere-actif > a { left: 24px; font-size: 18px; font-weight: 600; }
body .carte-depots figcaption { margin-top: 16px; color: var(--gris-texte); }
body .arguments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
body .argument { padding-top: 18px; border-top: 1px solid var(--encre); }
body .argument h3 { margin-bottom: 12px; font-size: 20px; line-height: 1.25; letter-spacing: -.02em; }

/* ---------- dépôts ---------- */
body .section-depot { padding-top: 60px; }
body .depot-grille { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; }
body .depot-grille .carte-depots { max-width: none; }
body .depot-infos { display: flex; flex-direction: column; gap: 28px; }
body .depot-infos .fiche-actions { margin-top: 0; }

/* ---------- pages légales ---------- */
body .texte-legal { max-width: 800px; padding-top: 40px; }
body .texte-legal h2 { margin: 40px 0 12px; font-size: 24px; letter-spacing: -.02em; }
body .texte-legal h2:first-child { margin-top: 0; }
body .texte-legal p { font-size: 17px; line-height: 1.7; }
body .texte-legal p + p { margin-top: 12px; }
body .texte-legal a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
body .texte-legal .tableau-carac { margin-top: 16px; }
body .formulaire-legal { margin-top: 16px; padding: 28px 32px; border-radius: 15px; background: var(--gris-carte); }
body .formulaire-legal p + p { margin-top: 14px; }

@media (max-width: 1100px) {
  body .grille-produits { grid-template-columns: repeat(2, 1fr); }
  body .fiche-grille, body .depot-grille, body .apropos-bloc { grid-template-columns: 1fr; gap: 40px; }
  body .etapes, body .colonnes-usages, body .grille-articles, body .arguments { grid-template-columns: repeat(2, 1fr); }
  body .bloc-categorie, body .bloc-inverse { grid-template-columns: 1fr; gap: 28px; }
  body .bloc-inverse .bloc-categorie-visuel { order: 0; }
  body .encart-sur-mesure { grid-template-columns: 1fr; }
  body .encart-sur-mesure .bouton { grid-column: 1; }
}
@media (max-width: 760px) {
  body .page-tete { padding-top: 40px; }
  body .page-sous-titre { font-size: 20px; }
  body .section { padding-top: 70px; }
  body .grille-produits, body .etapes, body .colonnes-usages, body .grille-articles, body .arguments, body .infos-contact, body .formulaire { grid-template-columns: 1fr; }
  body .fiche-titre { font-size: 30px; }
  body .galerie-vignettes button { width: 72px; }
  body .carac-ligne { padding: 10px 4px; font-size: 15px; }
  body .rubrique { grid-template-columns: 1fr; padding: 40px 0; }
  body .rubrique .numero { padding-top: 0; margin-bottom: 8px; }
  body .questions { grid-column: 1; }
  body .encart-sur-mesure, body .encart-cloture { padding: 34px 22px; }
  body .texte-intro { font-size: 20px; }
  body .apropos-texte p { font-size: 18px; }
  body .repere span, body .repere > a { font-size: 12px; left: 13px; }
  body .repere-actif span, body .repere-actif > a { font-size: 15px; left: 20px; }
}
body .repere-gauche span, body .repere-gauche > a { left: auto; right: 16px; }
body .repere-actif.repere-gauche span, body .repere-actif.repere-gauche > a { right: 24px; }

/* ---------- panier : bouton d'en-tête et tiroir ---------- */
body .panier-bouton { position: relative; flex: none; display: grid; place-items: center; width: 52px; height: 52px; margin-left: -38px; border-radius: 999px; background: var(--gris-pastille); transition: filter .2s; }
body .panier-bouton:hover { filter: brightness(.94); }
body .panier-bouton .ico { width: 21px; height: 21px; }
body .panier-compteur { display: none; position: absolute; top: -3px; right: -3px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--jaune); color: var(--noir); font-size: 12px; font-weight: 600; line-height: 22px; text-align: center; }
body .panier-bouton.plein .panier-compteur { display: block; }
body .panier { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
body .panier-voile { position: absolute; inset: 0; background: rgba(15, 15, 15, .32); opacity: 0; transition: opacity .3s; }
body .panier-tiroir {
  position: absolute; top: var(--gouttiere); right: var(--gouttiere); bottom: var(--gouttiere);
  width: min(460px, calc(100vw - 2 * var(--gouttiere)));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 15px; background: var(--gris-fond);
  transform: translateX(calc(100% + 2 * var(--gouttiere))); transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
body.panier-ouvert { overflow: hidden; }
body.panier-ouvert .panier { pointer-events: auto; }
body.panier-ouvert .panier-voile { opacity: 1; }
body.panier-ouvert .panier-tiroir { transform: none; }
body .panier-tete { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 20px 20px 24px; border-bottom: 1px solid var(--filet); }
body .panier-titre { font-size: 22px; letter-spacing: -.02em; }
body .panier-fermer { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--gris-pastille); font-size: 26px; font-weight: 400; line-height: 1; transition: filter .2s; }
body .panier-fermer:hover { filter: brightness(.94); }
body .panier-vide { display: none; flex: 1; padding: 28px 24px; font-size: 16px; color: var(--gris-texte); }
body .panier.vide .panier-vide { display: block; }
body .panier.vide .panier-lignes, body .panier.vide .panier-pied { display: none; }
body .panier-lignes { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; overflow-y: auto; }
body .panier-ligne { display: grid; grid-template-columns: 92px 1fr auto; grid-template-rows: auto auto 1fr; gap: 4px 16px; padding: 12px; border-radius: 10px; background: var(--gris-carte); }
body .panier-ligne.panier-ligne-modele { display: none; }
body .panier-ligne img { grid-row: 1 / 4; width: 92px; height: 92px; border-radius: 8px; object-fit: cover; object-position: 50% 56%; background: var(--clair); }
body .panier-ligne-nom { grid-column: 2; font-size: 14px; font-weight: 500; line-height: 1.35; text-transform: uppercase; }
body .panier-ligne-prix { grid-column: 3; grid-row: 1; font-size: 15px; font-weight: 500; white-space: nowrap; }
body .panier-ligne-variante { grid-column: 2 / 4; font-size: 13px; color: var(--gris-texte); }
body .panier-ligne-variante:empty { display: none; }
body .panier-ligne-actions { grid-column: 2 / 4; align-self: end; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
body .panier-quantite { display: inline-flex; align-items: center; border-radius: 999px; background: var(--gris-pastille); }
body .panier-quantite button { width: 36px; height: 34px; font-size: 18px; line-height: 1; }
body .qte-valeur { min-width: 20px; font-size: 15px; font-weight: 500; text-align: center; }
body .panier-retirer { font-size: 13px; color: var(--gris-texte); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
body .panier-retirer:hover { color: var(--encre); }
body .panier-pied { padding: 18px 24px 24px; border-top: 1px solid var(--encre); }
body .panier-total { display: flex; justify-content: space-between; gap: 20px; font-size: 18px; font-weight: 600; color: var(--encre); }
body .panier-note { margin-top: 4px; font-size: 14px; color: var(--gris-texte); }
body .panier-commander { width: 100%; min-height: 52px; margin-top: 18px; font-size: 16px; }
body .panier-commander.en-cours, body .achat.en-cours, body .panier-ligne.en-cours { opacity: .6; pointer-events: none; }
body .panier-message { margin-top: 12px; font-size: 14px; line-height: 1.5; }
body .panier-message:empty { display: none; }
body .section-message { scroll-margin-top: var(--entete); }
@media (max-width: 1280px) {
  body .panier-bouton { margin-left: -18px; }   /* écart d'en-tête 28 px sous 1280 px : 10 px du bouton téléphone */
}
/* le panier rejoint les pastilles d'action (10 px) ; le menu se resserre pour tenir sur une ligne jusqu'à 1281 px */
@media (min-width: 1281px) and (max-width: 1480px) {
  body .menu { margin-left: 32px; gap: 10px 34px; }
}
@media (max-width: 1100px) {
  body .panier-bouton { width: 44px; height: 44px; margin-left: auto; }
  body .panier-bouton .ico { width: 19px; height: 19px; }
  body .burger { margin-left: -18px; }   /* écart d'en-tête 28 px sous 1280 px : 10 px entre panier et menu */
  body .langues-choix { display: block; margin-left: auto; }
  body .langues-choix + .panier-bouton { margin-left: -18px; }
}
@media (max-width: 560px) {
  body .fiche-info { padding: 20px 16px 16px; }
  body .fiche-contacts .bouton { padding: 6px 10px; font-size: 13.5px; white-space: normal; text-align: center; }
  body .fiche-achat { grid-template-columns: 96px 1fr; }
  body .fiche-achat .bouton { padding: 0 12px; font-size: 14px; }
  body .fiche-quantite button { width: 32px; }
  body .fiche-info .fiche-actions, body .fiche-info .fiche-actions .bouton { width: 100%; min-width: 0; }
  body .fiche-prix { font-size: 30px; }
  body .fiche-mesures { grid-template-columns: repeat(2, 1fr); row-gap: 10px; }
}

/* ---------- cadre produit : cartes des grilles et du carrousel (photo en haut, état, nom, dimensions, prix) ---------- */
body .case-produit { position: relative; display: flex; flex-direction: column; aspect-ratio: auto; border: 1px solid #e3e3e3; border-radius: 16px; overflow: hidden; background: var(--blanc); }
body .case-produit:hover { box-shadow: 0 12px 30px rgba(15, 15, 15, .08); }
body .carte-produit.case-produit, body .carte-cubo.case-produit { transition: box-shadow .25s; }
body .case-produit .carte-visuels { position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden; background: var(--gris-carte); }
body .case-produit .carte-visuels img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; }
body .case-etat { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 12px; border-radius: 999px; background: var(--blanc); font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--texte); }
body .case-etat.occasion { background: var(--encre); color: var(--blanc); }
body .case-corps { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 16px 18px 18px; }
body .case-nom { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--texte); text-wrap: balance; }
body .case-info { font-size: 13px; line-height: 1.45; color: var(--gris-texte); }
body .case-bas { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: auto; padding-top: 12px; }
body .case-prix { font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--encre); white-space: nowrap; }
body .case-prix small { font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--gris-texte); }
body .case-livraison { margin-left: auto; font-size: 12.5px; font-weight: 500; color: #2f7a3e; }

/* ---------- cadre produit : fiche (carte d'achat) ---------- */
body .fiche-grille > * { min-width: 0; }
body .fiche-info { padding: 28px 28px 22px; border: 1px solid #e3e3e3; border-radius: 18px; background: var(--blanc); }
body .fiche-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
body .pastille-etat, body .pastille-dispo { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1.4; }
body .pastille-etat { background: var(--gris-fond); color: var(--texte); }
body .pastille-dispo { background: #e3f0e4; color: #2f7a3e; }
body .pastille-dispo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
body .pastille-dispo.dispo-rupture { background: var(--gris-fond); color: var(--gris-texte); }
body .fiche-info .fiche-titre { margin-top: 14px; font-size: 34px; line-height: 1.12; letter-spacing: -.025em; }
body .fiche-accroche { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--gris-texte); }
body .fiche-info .fiche-prix { margin-top: 22px; font-size: 34px; }
body .ico-ligne { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body .fiche-engagements { list-style: none; display: grid; gap: 12px; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid #e9e9e9; font-size: 14.5px; color: var(--gris-texte); }
body .fiche-engagements li { display: flex; gap: 12px; align-items: flex-start; }
body .fiche-engagements .ico-ligne { margin-top: 2px; }
body .fiche-engagements strong { font-weight: 600; color: var(--texte); }
body .fiche-achat { display: grid; grid-template-columns: 120px 1fr; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #e9e9e9; }
body .fiche-quantite { display: flex; align-items: center; justify-content: space-between; height: 48px; border: 1px solid var(--filet); border-radius: 999px; }
body .fiche-quantite button { width: 40px; height: 46px; border: 0; background: none; font-size: 18px; color: var(--texte); cursor: pointer; }
body .fiche-achat .bouton { width: 100%; min-height: 48px; gap: 8px; font-size: 15px; font-weight: 500; }
body .fiche-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
body .fiche-contacts .bouton { min-height: 46px; padding: 0 14px; gap: 8px; font-size: 14.5px; }
body .fiche-note { margin-top: 14px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--gris-texte); }

/* ---------- cadre produit : panneau sous la fiche (description, caractéristiques, livraison, questions) ---------- */
body .fiche-detail { margin: 40px var(--marge) 0; padding: 0 40px; border: 1px solid #e3e3e3; border-radius: 18px; background: var(--blanc); }
body .fiche-onglets { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid #e9e9e9; font-size: 14.5px; }
body .fiche-onglets a { padding: 18px 0 14px; border-bottom: 2px solid transparent; color: var(--gris-texte); white-space: nowrap; }
body .fiche-onglets a:hover, body .fiche-onglets a.actif { color: var(--texte); }
body .fiche-onglets a.actif { border-bottom-color: var(--texte); }
body .fiche-bloc { display: grid; grid-template-columns: 260px 1fr; gap: 40px; padding-block: 36px; scroll-margin-top: calc(var(--entete) + 20px); }
body .fiche-bloc + .fiche-bloc { border-top: 1px solid #e9e9e9; }
body .fiche-bloc h2 { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
body .fiche-bloc-texte { min-width: 0; max-width: 820px; font-size: 15px; line-height: 1.65; }
body .fiche-bloc-texte p + p { margin-top: 12px; }
body .fiche-bloc-texte a { text-decoration: underline; text-underline-offset: 3px; }
body .liste-coches { list-style: none; display: grid; gap: 8px; margin: 16px 0 0; padding: 0; }
body .liste-coches li { display: flex; gap: 10px; align-items: center; }
body .liste-coches .ico-ligne { color: #2f7a3e; }
body .fiche-tableau { width: 100%; border-collapse: collapse; font-size: 14.5px; }
body .fiche-tableau th, body .fiche-tableau td { padding: 13px 12px 13px 0; border-bottom: 1px solid #e9e9e9; text-align: left; vertical-align: top; }
body .fiche-tableau th { width: 45%; font-weight: 400; color: var(--gris-texte); }
body .fiche-tableau td { font-weight: 500; color: var(--texte); }
body .fiche-points { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
body .fiche-bloc .note { margin-top: 12px; font-size: 13px; color: var(--gris-texte); }
body .fiche-questions { margin: 0; font-size: 15px; }
body .fiche-questions dt { font-weight: 600; color: var(--texte); }
body .fiche-questions dd { margin: 4px 0 18px; color: var(--gris-texte); }
body .fiche-questions dd:last-child { margin-bottom: 0; }
@media (max-width: 1100px) {
  body .fiche-bloc { grid-template-columns: 1fr; gap: 14px; }
  body .fiche-detail { padding: 0 20px; }
}
@media (max-width: 760px) {
  body .grille-produits, body .grille-cubo { grid-template-columns: 1fr 1fr; gap: 12px; }
  body .case-corps { padding: 12px 12px 14px; }
  body .case-nom { font-size: 14.5px; }
  body .case-info { font-size: 12px; }
  body .case-prix { font-size: 16px; }
  body .case-livraison { margin-left: 0; width: 100%; font-size: 12px; }
  body .fiche-info .fiche-titre { font-size: 28px; }
}

/* ---------- assistant des visiteurs (assistant.js) : la pastille ouvre une fenêtre de questions ---------- */
body .assistant-ouvrir { border: 0; cursor: pointer; font: inherit; font-size: 16px; }
body .assistant-fenetre { position: fixed; right: 20px; bottom: 72px; z-index: 70; display: flex; flex-direction: column; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 110px));
  border-radius: 18px; overflow: hidden; background: var(--blanc); box-shadow: 0 18px 50px rgba(15, 15, 15, .22); }
body .assistant-fenetre[hidden] { display: none; }
body .assistant-tete { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--bleu); color: var(--blanc); }
body .assistant-titre { margin: 0; font-size: 16px; font-weight: 600; }
body .assistant-fermer { border: 0; background: none; color: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
body .assistant-fil { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--gris-fond); }
body .assistant-bulle { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; }
body .assistant-bulle a { text-decoration: underline; text-underline-offset: 2px; }
body .assistant-bulle ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; }
body .assistant-bot { align-self: flex-start; background: var(--blanc); color: var(--texte); border-bottom-left-radius: 4px; }
body .assistant-moi { align-self: flex-end; background: var(--jaune); color: var(--noir); border-bottom-right-radius: 4px; }
body .assistant-suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
body .assistant-suggestions button { padding: 6px 12px; border: 1px solid var(--filet); border-radius: 999px; background: var(--blanc); font: inherit; font-size: 13px; cursor: pointer; }
body .assistant-suggestions button:hover { border-color: var(--encre); }
body .assistant-saisie { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #e6e6e6; }
body .assistant-saisie input { flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid var(--filet); border-radius: 999px; font: inherit; font-size: 14.5px; }
body .assistant-saisie .bouton { padding: 10px 16px; border: 0; cursor: pointer; font-size: 14px; }
body .assistant-note { margin: 0; padding: 0 14px 12px; font-size: 12px; line-height: 1.4; color: var(--gris-texte); }
body .assistant-note a { text-decoration: underline; }

/* ---------- fiche : référence produit, flèches de la galerie sur téléphone ---------- */
body .fiche-reference { margin-top: 6px; font-size: 13px; letter-spacing: .02em; color: var(--gris-texte); }
body .galerie-nav { display: none; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
body .galerie-fleche { flex: none; width: 44px; height: 44px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--texte); cursor: pointer; }
body .galerie-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
body .galerie-points button { width: 9px; height: 9px; padding: 0; border: 1.5px solid var(--gris-texte); border-radius: 50%; background: var(--gris-texte); cursor: pointer; }
body .galerie-points button.actif { background: transparent; border-color: var(--texte); }
@media (max-width: 760px) {
  body .galerie-nav { display: flex; }
  body .galerie-vignettes { display: none; }
}

/* ---------- barre de recherche ---------- */
body .visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body .recherche-bande { background: var(--bleu); padding: 12px var(--marge); position: relative; z-index: 40; }
body .recherche { position: relative; display: flex; align-items: center; gap: 14px; max-width: 760px; margin: 0 auto; }
body .recherche-ico { width: 26px; height: 26px; flex: none; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
body .recherche input { flex: 1; min-width: 0; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.35); color: #fff; font: inherit; font-size: 17px; padding: 10px 2px; outline: none; }
body .recherche input::placeholder { color: rgba(255,255,255,.75); }
body .recherche input:focus { border-bottom-color: #fff; }
body .recherche-resultats { position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none; background: #fff; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.18); max-height: 60vh; overflow: auto; }
body .recherche-resultats a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--encre); text-decoration: none; }
body .recherche-resultats a:hover, body .recherche-resultats a:focus { background: var(--gris-fond); }
body .recherche-resultats .prix { white-space: nowrap; font-weight: 600; }
body .recherche-resultats .vide { padding: 10px 12px; color: #555; }

/* ---------- lot 28/10 : bandeau d'annonces, disponibilité, galerie glissante, assistant mobile, animations ---------- */
html { touch-action: manipulation; }   /* pas de zoom au double appui sur les flèches et boutons */
body .annonces { overflow: hidden; background: var(--encre, #231f20); color: #fff; font-size: 12px; line-height: 1; letter-spacing: .02em; }
body .annonces-piste { display: flex; width: max-content; animation: annonces 38s linear infinite; }
body .annonces-piste span, body .annonces-piste p { display: inline-flex; align-items: center; margin: 0; padding: 6px 0; white-space: nowrap; }
body .annonces-piste > span:not(.annonces-copie)::after, body .annonces-copie span::after, body .annonces-piste p::after { content: '•'; margin: 0 18px; opacity: .55; }
body .annonces:hover .annonces-piste { animation-play-state: paused; }
@keyframes annonces { to { transform: translateX(-50%); } }

body .case-dispo { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: #16a34a; color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.4; }
body .case-dispo::before, body .pastille-dispo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
body .pastille-dispo { background: #16a34a; color: #fff; }
body .case-livraison { font-weight: 400; }
body .fiche-engagements strong { font-weight: 400; }
body .fiche-engagements a { text-decoration: underline; text-underline-offset: 3px; }

/* recherche : apparition douce des résultats */
body .recherche-resultats:not([hidden]) { animation: deroule .22s ease-out; }
body .recherche-resultats li { animation: monte .28s ease-out both; }
body .recherche-resultats li:nth-child(2) { animation-delay: .03s; } body .recherche-resultats li:nth-child(3) { animation-delay: .06s; }
body .recherche-resultats li:nth-child(4) { animation-delay: .09s; } body .recherche-resultats li:nth-child(n+5) { animation-delay: .12s; }
@keyframes deroule { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes monte { from { opacity: 0; transform: translateY(6px); } }

/* galerie : fondu sur ordinateur, piste glissante au doigt et aux flèches sur téléphone */
body .galerie-vues figure.actif { animation: fondu .35s ease; }
@keyframes fondu { from { opacity: .3; } }
body .galerie-fleche, body .galerie-points button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .15s; }
body .galerie-fleche:active { transform: scale(.88); }
body .galerie-points button { transition: background-color .25s, transform .25s; }
body .galerie-points button.actif { transform: scale(1.25); }
@media (max-width: 760px) {
  body .galerie-vues { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: 12px; overscroll-behavior-x: contain; }
  body .galerie-vues::-webkit-scrollbar { display: none; }
  body .galerie-vues figure { display: block; flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; border-radius: 0; animation: none !important; }
}

/* assistant : plein écran propre sur téléphone, ouverture animée */
body .assistant-fenetre:not([hidden]) { animation: deroule .25s ease-out; transform-origin: bottom right; }
@media (max-width: 600px) {
  body .assistant-fenetre { left: 10px; right: 10px; bottom: 10px; top: auto; width: auto; height: min(78dvh, 620px); max-height: calc(100dvh - 20px); border-radius: 16px; }
  body .assistant-saisie input, body .recherche input { font-size: 16px; }   /* 16 px : iOS ne zoome plus au focus */
  body .assistant-saisie { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  body .assistant-ouvert .assistant-ouvrir { display: none; }
}

/* pied de page (structure transjbsl) */
body .pied-atouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0 var(--marge); padding: 30px 0; border-bottom: 1px solid rgba(255,255,255,.3); }
body .pied-atout { display: flex; gap: 14px; align-items: flex-start; }
body .pied-atout .ico-ligne { width: 30px; height: 30px; color: var(--jaune); }
body .pied-atout p { margin: 0; display: grid; gap: 4px; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.85); }
body .pied-atout strong { font-size: 17px; font-weight: 600; color: #fff; }
body .pied .pied-haut { grid-template-columns: 1.3fr 1fr 1.3fr 1.1fr; }
body .pied .pied-col a, body .pied-contact p { font-size: 16px; line-height: 1.5; letter-spacing: 0; margin: 0 0 6px; }
body .pied .pied-titre { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 18px; }
body .pied-paiement { margin: 0 var(--marge); padding: 26px 0; border-top: 1px solid rgba(255,255,255,.3); font-size: 15px; }
body .pied-paiement p { margin: 0 0 6px; }
body .pied-paiement .pied-titre { margin-bottom: 10px; }
body .pied-note { color: rgba(255,255,255,.7); font-size: 14px; }
@media (max-width: 1100px) { body .pied .pied-haut { grid-template-columns: 1fr 1fr; } body .pied-atouts { grid-template-columns: 1fr; } }
@media (max-width: 600px) { body .pied .pied-haut { grid-template-columns: 1fr; } body .pied-col:last-child { grid-column: auto; } }

/* apparition au défilement (animations.js) */
body .apparait { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
body .apparait.vu { opacity: 1; transform: none; }
body .case-produit { transition: box-shadow .25s, transform .25s; }
body .case-produit:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  body .annonces-piste { animation: none; } body .apparait { opacity: 1; transform: none; transition: none; }
  body .galerie-vues { scroll-behavior: auto; }
}

/* ---------- corrections 28/10 ---------- */
@media (max-width: 1100px) { body .panneau-mobile { inset: 0; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; transform: translateY(-100%); } }
@media (max-width: 760px) { body .case-dispo { display: none; } }   /* téléphone : « En stock » seulement sur la fiche */
/* état puis disponibilité, l'une sous l'autre : plus de chevauchement sur les cartes étroites */
body .case-dispo { top: 44px; left: 12px; right: auto; }
/* onglets de la fiche */
body .fiche-onglets { position: sticky; top: var(--entete); z-index: 5; background: var(--blanc); scroll-behavior: smooth; }
body .fiche-onglets a { position: relative; border-bottom-color: transparent !important; transition: color .25s; }
body .onglets-trait { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--texte); transition: transform .35s cubic-bezier(.2,.7,.2,1), width .35s cubic-bezier(.2,.7,.2,1); pointer-events: none; }

/* aucun élément caché hors écran ne doit élargir la page sur téléphone */
html, body { overflow-x: clip; }
body .texte-legal { overflow-wrap: anywhere; }

body .annonces-copie { padding: 0 !important; }   /* la copie contient déjà des éléments espacés */

/* pied : séparateurs fondus dans le bleu (une seule ligne discrète) */
body .pied .pied-haut { border-top: 0; }
body .pied-atouts, body .pied-paiement, body .pied .pied-copyright { border-color: rgba(255,255,255,.12); }

/* passage en fondu de la page vers le bleu du pied : pas de ligne nette */
body .pied { position: relative; }
body .pied::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 140px; background: linear-gradient(to bottom, rgba(1,80,149,0), var(--bleu)); pointer-events: none; }

/* ---------- promotion : pastille dentelée « −10 % », prix barré rouge, bandeau d'accueil ---------- */
body .pastille-promo {
  display: grid; place-items: center; width: 58px; height: 58px; margin: 0; padding: 0;
  background: #e11d2a; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: -.02em; text-align: center;
  clip-path: polygon(50% 0%, 56.6% 7.4%, 65.5% 3.4%, 69.1% 12.6%, 78.9% 12.1%, 79.6% 21.9%, 88.8% 25.2%, 86.4% 34.7%, 94.4% 40.4%, 88.9% 48.6%, 94.4% 56.7%, 86.4% 62.5%, 88.8% 72%, 79.6% 75.2%, 78.9% 85%, 69.1% 84.5%, 65.5% 93.7%, 56.6% 89.7%, 50% 97%, 43.4% 89.7%, 34.5% 93.7%, 30.9% 84.5%, 21.1% 85%, 20.4% 75.2%, 11.2% 72%, 13.6% 62.5%, 5.6% 56.7%, 11.1% 48.6%, 5.6% 40.4%, 13.6% 34.7%, 11.2% 25.2%, 20.4% 21.9%, 21.1% 12.1%, 30.9% 12.6%, 34.5% 3.4%, 43.4% 7.4%);
}
body .pastille-promo:empty { display: none; }
body .case-produit > .pastille-promo { position: absolute; top: 8px; right: 8px; z-index: 3; }
body .fiche-pastilles .pastille-promo { width: 52px; height: 52px; font-size: 13px; margin-left: auto; }
body .case-barre, body .fiche-barre { color: var(--gris-texte); text-decoration: line-through; text-decoration-color: #e11d2a; text-decoration-thickness: 2px; white-space: nowrap; }
body .case-barre { flex-basis: 100%; margin: 0; font-size: 14px; line-height: 1.2; }
body .fiche-barre { font-size: 22px; font-weight: 500; margin-right: 6px; }
body .case-barre:empty, body .fiche-barre:empty { display: none; }
body .case-prix, body .fiche-montant { color: #e11d2a; }
body .case-produit:not(:has(.case-barre:not(:empty))) .case-prix, body .fiche-prix:not(:has(.fiche-barre:not(:empty))) .fiche-montant { color: var(--encre); }
body .promo-bande { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 18px var(--marge) 0; padding: 16px 22px; border-radius: 16px; background: #fff1f1; border: 1px solid #f5c2c5; }
body .promo-texte { flex: 1; min-width: 220px; margin: 0; display: grid; gap: 4px; font-size: 15px; line-height: 1.45; color: var(--texte); }
body .promo-texte strong { font-size: 18px; color: #b3141f; }
body .pastille-promo-grande { width: 74px; height: 74px; font-size: 18px; flex: none; }
@media (max-width: 600px) { body .promo-bande { padding: 14px; gap: 12px; } body .promo-bande .bouton { width: 100%; justify-content: center; } body .pastille-promo-grande { width: 62px; height: 62px; font-size: 16px; } }
body .fiche-info { position: relative; }
body .fiche-pastilles .pastille-promo { position: absolute; top: -16px; right: -10px; margin: 0; width: 60px; height: 60px; font-size: 14px; }


/* =========================================================
   Adaptation WordPress — ce que la structure des blocs change.
   Tout ce qui précède est la feuille de la maquette, préfixée par
   « body » : elle passe ainsi devant le CSS des blocs, imprimé
   après cette feuille (blocs-gutenberg.md, fait n° 2).
   ========================================================= */

/* ---------- filets de sécurité à spécificité nulle (jamais .wp-block-group > *) ---------- */
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
body figure.wp-block-image, body .wp-block-post-featured-image { margin: 0; }
body img { height: auto; }

/* ---------- en-tête collant : c'est la balise <header> de la partie qui colle ---------- */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; } }
body .entete { position: relative; top: auto; }
body .entete-logo { flex: none; line-height: 0; }
body .entete-logo img { height: 38px; width: auto; }
body .pied-logo img { height: 40px; width: auto; filter: brightness(0) invert(1); }
body .pied-logo { line-height: 0; }

/* ---------- boutons : la classe atterrit sur div.wp-block-button, c'est lui la pilule ---------- */
body .wp-block-button.bouton, body .wp-block-button.pilule-blanche, body .wp-block-button.pastille { position: relative; }
body .wp-block-button > .wp-block-button__link {
  display: inline-flex; align-items: center; gap: inherit; padding: 0; border: 0; border-radius: 0;
  background: none; color: inherit; font: inherit; letter-spacing: inherit; text-decoration: none; white-space: inherit;
}
body .wp-block-button > .wp-block-button__link::before { content: ''; position: absolute; inset: 0; }  /* toute la pilule est cliquable */
body .wp-block-button > .wp-block-button__link em { font-style: normal; }
body .wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; }
body .entete-actions { flex-wrap: nowrap; }
body .fiche-actions { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; }
body .bouton-chevron::after {
  content: ''; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.4'/%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 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- icônes : masques CSS (substitution 1 — aucun SVG dans le contenu) ---------- */
body .ico-tel::before, body .ico-mail::before, body .lien-video::after {
  content: ''; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
body .ico-tel { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E"); }
body .ico-mail { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm9 7 8-5H4z'/%3E%3C/svg%3E"); }
body .lien-video { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h12a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm14 4 5-3v10l-5-3z'/%3E%3C/svg%3E"); cursor: pointer; }
body .lien-video::after { width: 16px; height: 16px; }

/* ---------- navigation : menus éditables (core/navigation) ---------- */
body .menu { flex-wrap: wrap; }
body .menu .wp-block-navigation__container { display: flex; flex-wrap: wrap; gap: 10px 46px; }
body .menu .wp-block-navigation-item__content {
  padding: 0; font-size: 16px; letter-spacing: .005em; white-space: nowrap; color: inherit;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px;
}
body .menu .wp-block-navigation-item__content:hover { text-decoration-thickness: 2px; }
body .menu-mobile { display: none; margin-left: auto; }
body .menu-mobile .wp-block-navigation__responsive-container-open {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--gris-pastille); color: var(--encre);
}
.wp-block-navigation.menu-mobile .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--gris-fond) !important; color: var(--encre) !important; padding: 30px var(--marge) !important;
}
body .menu-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 18px; align-items: flex-start; }
body .menu-mobile .is-menu-open .wp-block-navigation-item__content {
  font-size: 28px; font-weight: 600; letter-spacing: -.03em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px;
}
body .menu-mobile .is-menu-open .lien-devis .wp-block-navigation-item__content,
body .menu-mobile .is-menu-open .lien-tel .wp-block-navigation-item__content {
  margin-top: 10px; padding: 12px 24px; border-radius: 999px; font-size: 15px; font-weight: 400; letter-spacing: 0; text-decoration: none;
}
body .menu-mobile .is-menu-open .lien-devis .wp-block-navigation-item__content { background: var(--jaune); color: var(--noir); }
body .menu-mobile .is-menu-open .lien-tel .wp-block-navigation-item__content { background: var(--gris-pastille); color: var(--noir); }
body .menu-mobile:not(:has(.is-menu-open)) .lien-devis, body .menu-mobile:not(:has(.is-menu-open)) .lien-tel { display: none; }
@media (max-width: 1100px) {
  body .menu, body .entete-actions { display: none; }
  body .menu-mobile { display: flex; }
}
body .pied-nav .wp-block-navigation__container { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
body .pied-nav .wp-block-navigation-item__content { padding: 0; font-size: 20px; line-height: 28px; letter-spacing: -.03em; color: var(--blanc); text-decoration: none; }
body .pied-nav .wp-block-navigation-item__content:hover { color: var(--jaune); }
body .pied-col > .pied-titre { margin-bottom: 30px; }

/* ---------- réseaux sociaux (core/social-links) : ronds clairs, pictos noirs, aucune couleur de marque ---------- */
body .pied-reseaux, body .reseaux-ronds { gap: 2px; padding: 0; margin: 0; }
body .reseaux-ronds { gap: 6px; }
body .pied-reseaux .wp-social-link, body .reseaux-ronds .wp-social-link { width: 50px; height: 50px; margin: 0; border-radius: 50%; background: #E6E6E6; color: var(--noir); transition: background-color .2s; }
body .reseaux-ronds .wp-social-link { background: var(--gris-pastille); }
body .pied-reseaux .wp-social-link a, body .reseaux-ronds .wp-social-link a { display: grid; place-items: center; width: 100%; height: 100%; padding: 0; color: var(--noir); }
body .pied-reseaux .wp-social-link svg, body .reseaux-ronds .wp-social-link svg { width: 26px; height: 26px; fill: currentColor; }
body .pied-reseaux .wp-social-link:hover, body .reseaux-ronds .wp-social-link:hover { background: var(--jaune); transform: none; }

/* ---------- requêtes : la carte est le <li> de core/post-template ---------- */
body .wp-block-post-template { list-style: none; margin: 0; padding: 0; max-width: none; }
body .carte-visuel { position: absolute; inset: 0; margin: 0; }
body .carte-visuel a { display: block; height: 100%; }
body .carte-visuel img { width: 100%; height: 100%; object-fit: cover; }
body .carte-produit:hover .carte-visuel img { transform: scale(1.04); }
body .carte-visuel img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
body .carte-info p { margin: 0; }
body .grille-mixte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 25px; }
body .grille-mixte + .grille-mixte { margin-top: 40px; }
body .carrousel-piste { margin: 0; }
body .grille-vide p { margin: 0; }

/* ---------- pages : sections dans post-content ---------- */
body .wp-block-post-content > .section:last-child { padding-bottom: 120px; }
body .ariane > p { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
body .ariane em { font-style: normal; opacity: .6; }
body .ariane .wp-block-post-title { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: 0; color: inherit; text-transform: none; }
body .article-colonne .article-chapeau p { margin-top: 0; font-size: inherit; line-height: inherit; }
body .article-colonne .wp-block-post-date { font-size: 14px; color: var(--gris-texte); }
body .article-colonne > .wp-block-post-title { margin: 12px 0 26px; font-size: clamp(34px, 4vw, 56px); line-height: 1.08; letter-spacing: -.03em; }
body .article-visuel img { width: 100%; height: clamp(300px, 46vw, 640px); object-fit: cover; }
body .pagination { gap: 8px; }
body .pagination .page-numbers { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
body .pagination .page-numbers.current { background: var(--texte); color: var(--blanc); }
body .lecteur-fermer { cursor: pointer; display: grid; place-items: center; margin: 0; }
body .lecteur .wp-block-embed { width: 100%; margin: 0; }
body .lecteur .wp-block-embed iframe { width: 100%; height: 100%; aspect-ratio: 16 / 9; }

/* ---------- formulaires Contact Form 7 (blocs-gutenberg.md, § Formulaire) ---------- */
body .wpcf7-form-control-wrap { display: block; }
body .wpcf7-form p { margin: 0; }
body .wpcf7-not-valid-tip { margin-top: 6px; font-size: 13px; color: var(--encre); }
body .wpcf7 form .wpcf7-response-output { grid-column: 1 / -1; margin: 0; padding: 12px 16px; border: 1px solid var(--filet); border-radius: 10px; font-size: 15px; }
body .wpcf7-spinner { display: none; }
body .wpcf7-list-item { margin: 0; }
body .champ-case .wpcf7-list-item label { display: flex; gap: 12px; align-items: flex-start; }
body .wpcf7-submit { cursor: pointer; }

/* ---------- cadre produit en blocs (cartes des requêtes, fiche, panneau) ---------- */
body .case-produit { position: relative; }
body .case-produit .carte-visuels { margin: 0; }
body .case-produit .carte-visuels a { display: block; position: absolute; inset: 0; }
body .case-produit .case-nom { margin: 0; }
body .case-produit .case-nom a::after { content: ''; position: absolute; inset: 0; z-index: 1; }   /* toute la carte est cliquable */
body .case-produit p { margin: 0; }
body .case-ttc { font-size: 12.5px; color: var(--gris-texte); }
body .case-bas { gap: 4px 8px; }
body .fiche-prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
body .fiche-prix p, body .fiche-pastilles p, body .fiche-quantite p, body .fiche-info > p { margin: 0; }
body .fiche-info .fiche-accroche { margin-top: 10px; }
body .fiche-info .fiche-note { margin-top: 14px; }
body .fiche-engagements { display: grid; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #e9e9e9; font-size: 14.5px; color: var(--gris-texte); }
body .engagement { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
body .engagement strong { font-weight: 400; color: var(--texte); }
body .engagement::before, body .ico-panier .wp-block-button__link::before, body .liste-coches li::before {
  content: ''; flex: none; width: 18px; height: 18px; margin-top: 2px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
body .eng-camion { --ico: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 9h4l3 3v4h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E"); }
body .eng-repere { --ico: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E"); }
body .eng-bouclier { --ico: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.5 3 8.3 7 10 4-1.7 7-5.5 7-10V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
body .ico-panier { --ico: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 12H6.2z'/%3E%3Cpath d='M9 8V7a3 3 0 0 1 6 0v1'/%3E%3C/svg%3E"); }
body .ico-panier .wp-block-button__link::before { margin-top: 0; }
body .fiche-achat .wp-block-buttons, body .fiche-achat .wp-block-button, body .fiche-achat .wp-block-button__link { width: 100%; }
body .fiche-achat .wp-block-button__link { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; }
body .fiche-quantite .qte-moins, body .fiche-quantite .qte-plus { width: 40px; text-align: center; font-size: 18px; cursor: pointer; user-select: none; }
body .fiche-contacts { flex-wrap: nowrap; }
body .fiche-contacts .wp-block-button, body .fiche-contacts .wp-block-button__link { width: 100%; }
body .fiche-contacts .wp-block-button__link { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; }
body .fiche-onglets { margin: 0; }
body .fiche-onglets a { display: inline-block; margin-right: 28px; }
body .liste-coches { list-style: none; padding: 0; }
body .liste-coches li { display: flex; gap: 10px; align-items: center; --ico: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
body .liste-coches li::before { margin-top: 0; color: #2f7a3e; }
body .fiche-tableau { margin: 0; }
body .fiche-tableau table { width: 100%; border-collapse: collapse; }
body .fiche-tableau td { padding: 13px 12px 13px 0; border: 0; border-bottom: 1px solid #e9e9e9; font-weight: 500; color: var(--texte); vertical-align: top; }
body .fiche-tableau td:first-child { width: 45%; font-weight: 400; color: var(--gris-texte); }
body .fiche-questions h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--texte); letter-spacing: 0; }
body .fiche-questions p { margin: 4px 0 18px; color: var(--gris-texte); font-size: 15px; }
body .fiche-bloc h2 { margin: 0; }
body .carte-usage { position: relative; }
body .carte-usage .pilule-decouvrir a::after { content: ''; position: absolute; inset: 0; }

/* barre de recherche (bloc Recherche) */
.recherche-bande .wp-block-search { max-width: 760px; margin: 0 auto; }
.recherche-bande .wp-block-search__inside-wrapper { border: 0; padding: 0; background: transparent; }
.recherche-bande .wp-block-search__input { background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 17px; padding: 10px 2px 10px 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 24px; background-position: 4px center; }
.recherche-bande .wp-block-search__input::placeholder { color: rgba(255,255,255,.75); }
body .eng-horloge { --ico: 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.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
body .eng-garantie { --ico: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5.5'/%3E%3Cpath d='m8.5 13.5-1.5 7 5-2.5 5 2.5-1.5-7'/%3E%3C/svg%3E"); }
body .eng-mail { --ico: 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.8'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E"); }
/* pied : atouts avec pictogramme jaune */
body .pied-atout::before { content: ''; flex: none; width: 30px; height: 30px; background: var(--jaune); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
body .pied-atout p { display: block; }
/* bandeau d'annonces : paragraphes en ligne */
body .annonces-piste { flex-wrap: nowrap; gap: 0; }

/* ---------- positions des repères des cartes de dépôts ---------- */
body .carte-algesiras .repere-valence { left: 79.62%; top: 15.46%; }
body .carte-algesiras .repere-algesiras { left: 50.00%; top: 50.00%; }
body .carte-anvers .repere-strasbourg { left: 66.74%; top: 76.12%; }
body .carte-anvers .repere-le-havre { left: 28.95%; top: 66.53%; }
body .carte-anvers .repere-dunkerque { left: 40.39%; top: 51.68%; }
body .carte-anvers .repere-montoir-de-bretagne { left: 16.46%; top: 87.16%; }
body .carte-anvers .repere-anvers { left: 50.00%; top: 50.00%; }
body .carte-anvers .repere-rotterdam { left: 50.35%; top: 42.91%; }
body .carte-barcelone .repere-perpignan { left: 54.00%; top: 36.77%; }
body .carte-barcelone .repere-toulouse { left: 46.01%; top: 27.65%; }
body .carte-barcelone .repere-marseille { left: 67.56%; top: 30.34%; }
body .carte-barcelone .repere-lyon { left: 64.05%; top: 5.62%; }
body .carte-barcelone .repere-bordeaux { left: 35.25%; top: 14.94%; }
body .carte-barcelone .repere-barcelone { left: 50.00%; top: 50.00%; }
body .carte-barcelone .repere-valence { left: 35.15%; top: 68.99%; }
body .carte-barcelone .repere-bilbao { left: 21.94%; top: 30.00%; }
body .carte-bilbao .repere-perpignan { left: 82.30%; top: 54.18%; }
body .carte-bilbao .repere-toulouse { left: 73.91%; top: 45.73%; }
body .carte-bilbao .repere-marseille { left: 95.53%; top: 46.65%; }
body .carte-bilbao .repere-lyon { left: 90.87%; top: 22.30%; }
body .carte-bilbao .repere-bordeaux { left: 62.61%; top: 33.93%; }
body .carte-bilbao .repere-montoir-de-bretagne { left: 54.02%; top: 9.03%; }
body .carte-bilbao .repere-barcelone { left: 78.91%; top: 67.72%; }
body .carte-bilbao .repere-valence { left: 64.93%; top: 87.89%; }
body .carte-bilbao .repere-bilbao { left: 50.00%; top: 50.00%; }
body .carte-bordeaux .repere-perpignan { left: 69.27%; top: 70.97%; }
body .carte-bordeaux .repere-toulouse { left: 61.05%; top: 62.22%; }
body .carte-bordeaux .repere-marseille { left: 82.65%; top: 63.91%; }
body .carte-bordeaux .repere-lyon { left: 78.48%; top: 39.41%; }
body .carte-bordeaux .repere-bordeaux { left: 50.00%; top: 50.00%; }
body .carte-bordeaux .repere-strasbourg { left: 91.60%; top: 9.54%; }
body .carte-bordeaux .repere-le-havre { left: 53.37%; top: 3.08%; }
body .carte-bordeaux .repere-montoir-de-bretagne { left: 41.96%; top: 24.81%; }
body .carte-bordeaux .repere-barcelone { left: 65.60%; top: 84.39%; }
body .carte-bordeaux .repere-bilbao { left: 37.05%; top: 65.59%; }
body .carte-dunkerque .repere-strasbourg { left: 76.83%; top: 73.46%; }
body .carte-dunkerque .repere-le-havre { left: 38.87%; top: 65.27%; }
body .carte-dunkerque .repere-dunkerque { left: 50.00%; top: 50.00%; }
body .carte-dunkerque .repere-montoir-de-bretagne { left: 26.82%; top: 86.34%; }
body .carte-dunkerque .repere-anvers { left: 59.57%; top: 47.96%; }
body .carte-dunkerque .repere-rotterdam { left: 59.78%; top: 40.86%; }
body .carte-le-havre .repere-lyon { left: 74.92%; top: 86.51%; }
body .carte-le-havre .repere-bordeaux { left: 46.32%; top: 96.88%; }
body .carte-le-havre .repere-strasbourg { left: 88.10%; top: 56.68%; }
body .carte-le-havre .repere-le-havre { left: 50.00%; top: 50.00%; }
body .carte-le-havre .repere-dunkerque { left: 60.77%; top: 34.29%; }
body .carte-le-havre .repere-montoir-de-bretagne { left: 38.45%; top: 71.54%; }
body .carte-le-havre .repere-anvers { left: 70.29%; top: 31.87%; }
body .carte-le-havre .repere-rotterdam { left: 70.34%; top: 24.76%; }
body .carte-lyon .repere-perpignan { left: 39.23%; top: 80.68%; }
body .carte-lyon .repere-toulouse { left: 31.47%; top: 71.21%; }
body .carte-lyon .repere-marseille { left: 52.94%; top: 74.82%; }
body .carte-lyon .repere-lyon { left: 50.00%; top: 50.00%; }
body .carte-lyon .repere-bordeaux { left: 21.05%; top: 58.02%; }
body .carte-lyon .repere-strasbourg { left: 64.58%; top: 21.38%; }
body .carte-lyon .repere-le-havre { left: 26.80%; top: 11.54%; }
body .carte-lyon .repere-montoir-de-bretagne { left: 14.31%; top: 32.16%; }
body .carte-lyon .repere-barcelone { left: 34.89%; top: 93.76%; }
body .carte-lyon .repere-bilbao { left: 7.34%; top: 72.40%; }
body .carte-marseille .repere-perpignan { left: 36.28%; top: 55.74%; }
body .carte-marseille .repere-toulouse { left: 28.56%; top: 46.23%; }
body .carte-marseille .repere-marseille { left: 50.00%; top: 50.00%; }
body .carte-marseille .repere-lyon { left: 47.18%; top: 25.15%; }
body .carte-marseille .repere-bordeaux { left: 18.19%; top: 32.98%; }
body .carte-marseille .repere-montoir-de-bretagne { left: 11.50%; top: 7.07%; }
body .carte-marseille .repere-barcelone { left: 31.90%; top: 68.77%; }
body .carte-marseille .repere-valence { left: 16.49%; top: 86.99%; }
body .carte-marseille .repere-bilbao { left: 4.45%; top: 47.31%; }
body .carte-montoir-de-bretagne .repere-perpignan { left: 78.05%; top: 95.44%; }
body .carte-montoir-de-bretagne .repere-toulouse { left: 69.67%; top: 86.90%; }
body .carte-montoir-de-bretagne .repere-marseille { left: 91.33%; top: 87.95%; }
body .carte-montoir-de-bretagne .repere-lyon { left: 86.73%; top: 63.56%; }
body .carte-montoir-de-bretagne .repere-bordeaux { left: 58.41%; top: 74.97%; }
body .carte-montoir-de-bretagne .repere-strasbourg { left: 99.31%; top: 33.31%; }
body .carte-montoir-de-bretagne .repere-le-havre { left: 61.07%; top: 28.01%; }
body .carte-montoir-de-bretagne .repere-dunkerque { left: 71.51%; top: 11.88%; }
body .carte-montoir-de-bretagne .repere-montoir-de-bretagne { left: 50.00%; top: 50.00%; }
body .carte-montoir-de-bretagne .repere-bilbao { left: 45.68%; top: 90.92%; }
body .carte-montoir-de-bretagne .repere-anvers { left: 81.00%; top: 9.11%; }
body .carte-montoir-de-bretagne .repere-rotterdam { left: 80.90%; top: 1.98%; }
body .carte-perpignan .repere-perpignan { left: 50.00%; top: 50.00%; }
body .carte-perpignan .repere-toulouse { left: 42.07%; top: 40.79%; }
body .carte-perpignan .repere-marseille { left: 63.59%; top: 43.72%; }
body .carte-perpignan .repere-lyon { left: 60.22%; top: 18.99%; }
body .carte-perpignan .repere-bordeaux { left: 31.41%; top: 27.97%; }
body .carte-perpignan .repere-montoir-de-bretagne { left: 24.13%; top: 2.32%; }
body .carte-perpignan .repere-barcelone { left: 45.91%; top: 63.19%; }
body .carte-perpignan .repere-valence { left: 30.92%; top: 82.01%; }
body .carte-perpignan .repere-bilbao { left: 17.99%; top: 42.84%; }
body .carte-reseau .repere-perpignan { left: 64.52%; top: 63.00%; }
body .carte-reseau .repere-toulouse { left: 59.52%; top: 58.47%; }
body .carte-reseau .repere-marseille { left: 72.85%; top: 59.61%; }
body .carte-reseau .repere-lyon { left: 70.49%; top: 47.17%; }
body .carte-reseau .repere-bordeaux { left: 52.81%; top: 52.15%; }
body .carte-reseau .repere-strasbourg { left: 78.86%; top: 32.25%; }
body .carte-reseau .repere-le-havre { left: 55.31%; top: 28.49%; }
body .carte-reseau .repere-dunkerque { left: 62.08%; top: 20.61%; }
body .carte-reseau .repere-montoir-de-bretagne { left: 48.07%; top: 39.32%; }
body .carte-reseau .repere-barcelone { left: 62.13%; top: 69.74%; }
body .carte-reseau .repere-valence { left: 53.05%; top: 79.50%; }
body .carte-reseau .repere-algesiras { left: 33.47%; top: 95.53%; }
body .carte-reseau .repere-bilbao { left: 44.67%; top: 59.86%; }
body .carte-reseau .repere-anvers { left: 68.01%; top: 19.47%; }
body .carte-reseau .repere-rotterdam { left: 68.09%; top: 15.86%; }
body .carte-rotterdam .repere-strasbourg { left: 66.37%; top: 83.24%; }
body .carte-rotterdam .repere-le-havre { left: 28.57%; top: 73.59%; }
body .carte-rotterdam .repere-dunkerque { left: 40.03%; top: 58.76%; }
body .carte-rotterdam .repere-montoir-de-bretagne { left: 16.05%; top: 94.20%; }
body .carte-rotterdam .repere-anvers { left: 49.64%; top: 57.09%; }
body .carte-rotterdam .repere-rotterdam { left: 50.00%; top: 50.00%; }
body .carte-strasbourg .repere-toulouse { left: 15.45%; top: 98.15%; }
body .carte-strasbourg .repere-lyon { left: 34.63%; top: 77.88%; }
body .carte-strasbourg .repere-bordeaux { left: 5.42%; top: 84.36%; }
body .carte-strasbourg .repere-strasbourg { left: 50.00%; top: 50.00%; }
body .carte-strasbourg .repere-le-havre { left: 12.59%; top: 38.24%; }
body .carte-strasbourg .repere-dunkerque { left: 24.50%; top: 24.04%; }
body .carte-strasbourg .repere-anvers { left: 34.16%; top: 22.91%; }
body .carte-strasbourg .repere-rotterdam { left: 34.75%; top: 15.84%; }
body .carte-toulouse .repere-perpignan { left: 58.05%; top: 59.02%; }
body .carte-toulouse .repere-toulouse { left: 50.00%; top: 50.00%; }
body .carte-toulouse .repere-marseille { left: 71.55%; top: 52.42%; }
body .carte-toulouse .repere-lyon { left: 67.86%; top: 27.78%; }
body .carte-toulouse .repere-bordeaux { left: 39.18%; top: 37.42%; }
body .carte-toulouse .repere-montoir-de-bretagne { left: 31.59%; top: 11.96%; }
body .carte-toulouse .repere-barcelone { left: 54.13%; top: 72.30%; }
body .carte-toulouse .repere-valence { left: 39.37%; top: 91.48%; }
body .carte-toulouse .repere-bilbao { left: 25.95%; top: 52.58%; }
body .carte-valence .repere-perpignan { left: 68.16%; top: 17.06%; }
body .carte-valence .repere-toulouse { left: 59.97%; top: 8.23%; }
body .carte-valence .repere-marseille { left: 81.60%; top: 10.13%; }
body .carte-valence .repere-barcelone { left: 64.43%; top: 30.45%; }
body .carte-valence .repere-valence { left: 50.00%; top: 50.00%; }
body .carte-valence .repere-algesiras { left: 19.01%; top: 82.34%; }
body .carte-valence .repere-bilbao { left: 35.91%; top: 11.54%; }