/* =========================================================
   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.
   ========================================================= */

@font-face { font-family: 'General Sans'; src: url('fonts/general-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('fonts/general-sans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('fonts/general-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('fonts/general-sans-600-italique.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }

: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;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; color: var(--encre); hyphens: none; text-wrap: balance; }
figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
sup { font-size: .42em; vertical-align: top; position: relative; top: .18em; margin-left: .04em; }

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

/* ---------- boutons ---------- */
.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;
}
.bouton-jaune { background: var(--jaune); color: var(--noir); }
.bouton-gris { background: var(--gris-pastille); color: var(--noir); }
.bouton-jaune:hover, .bouton-gris:hover, .bouton-bleu:hover { filter: brightness(.94); }
.bouton-contour { border: 1px solid var(--encre); padding: 9px 24px; font-size: 16px; color: var(--encre); }
.bouton-contour:hover { background: var(--encre); color: var(--blanc); }
.ico-chevron { width: 12px; height: 12px; }
.bouton-bleu { background: var(--bleu); color: var(--blanc); font-size: 16px; padding: 9px 24px; }
.bouton-bleu .plus, .bouton-bleu em { font-size: 20px; font-style: normal; line-height: 1; font-weight: 400; margin-top: -2px; }
.bouton-blanc { background: var(--blanc); border: 1px solid var(--filet); border-radius: 10px; padding: 11px 40px; font-size: 16px; }
.bouton-blanc:hover { border-color: var(--encre); }

/* ---------- en-tête ---------- */
.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);
}
.entete-logo img { height: 38px; width: auto; }
.menu { display: flex; flex-wrap: wrap; gap: 10px 46px; margin-left: 60px; }
.menu a {
  font-size: 16px; letter-spacing: .005em; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px;
}
.menu a:hover { text-decoration-thickness: 2px; }
.entete-actions { display: flex; gap: 20px; margin-left: auto; }
.entete-actions .bouton { min-height: 52px; }
.langues { display: flex; align-items: center; gap: 2px; }   /* FR · EN · DE, écrit par traduire.py */
.langues a { padding: 6px 8px; border-radius: 6px; font-size: 14px; font-weight: 600; letter-spacing: .02em; text-decoration: none; }
.langues a:hover { text-decoration: underline; }
.langues a[aria-current] { background: var(--bleu); color: var(--blanc); }
.langues-choix { display: none; }   /* téléphone : FR ⌃⌄ dans la barre, à côté du panier */
.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;
}
.burger { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 999px; background: var(--gris-pastille); position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--encre); transition: transform .25s; }
.burger span:first-child { top: 17px; } .burger span:last-child { top: 25px; }
.panneau-mobile { display: none; }

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

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

/* ---------- 2 · le container repensé ---------- */
.repense {
  position: relative; margin: 0 var(--gouttiere);
  height: clamp(640px, 82vw, 1180px);
  border-radius: 15px; overflow: hidden; color: var(--blanc);
}
.repense-fond, .repense-fond img { position: absolute; inset: 0; width: 100%; height: 100%; }
.repense-fond img { object-fit: cover; object-position: 50% 50%; transform: scale(var(--zoom, 1.08)); transform-origin: 50% 40%; will-change: transform; }
.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%);
}
.repense-contenu { position: relative; padding: 20px; }
.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;
}
.repense-texte { max-width: 560px; margin-top: 52px; font-size: 24px; line-height: 1.46; }
.repense-texte p + p { margin-top: 1.46em; }
.produit-vedette {
  position: absolute; right: 20px; bottom: 20px; width: 287px;
  display: flex; flex-direction: column; gap: 10px;
}
.produit-vedette-label { font-size: 14px; letter-spacing: .02em; }
.produit-vedette img { width: 100%; aspect-ratio: 287 / 353; object-fit: cover; border-radius: 7.5px; transition: transform .4s; }
.produit-vedette:hover img { transform: translateY(-4px); }
.produit-vedette-nom { font-size: 16px; font-weight: 500; line-height: 1.3; margin-top: 4px; }
.produit-vedette-cat { font-size: 14px; opacity: .72; margin-top: -8px; }

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

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

/* ---------- 4 · bandeau vidéo ---------- */
.bandeau { background: var(--noir); padding: 20px 0; }
.bandeau-image { position: relative; height: calc(100vh - var(--entete) - 40px); min-height: 560px; overflow: hidden; }
.bandeau-fond { position: absolute; inset: -6% 0; margin: 0; transform: translateY(var(--parallaxe, 0)); }
.bandeau-fond img { width: 100%; height: 100%; object-fit: cover; }
.bandeau-image::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.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);
}
.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; }
.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;
}
.lien-video .ico { width: 16px; height: 16px; }

/* ---------- 5 · ils nous font confiance ---------- */
.confiance { padding: 30px 0 0; }
.defilant { overflow: hidden; }
.defilant-piste { display: flex; gap: 20px; width: max-content; animation: defiler 48s linear infinite; }
.defilant:hover .defilant-piste { animation-play-state: paused; }
@keyframes defiler { to { transform: translateX(calc(-50% - 10px)); } }
.logo-carte {
  flex: none; width: 200px; height: 150px; border-radius: 15px; background: var(--blanc);
  display: flex; align-items: center; justify-content: center;
}
.logo-carte span, .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 ---------- */
.bruts { padding: 120px 0 0; }
.bruts .ligne-titre { padding: 0 var(--gouttiere); }
.bruts .ligne-titre .bouton { margin-bottom: 18px; }
.carrousel { margin-top: 40px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; padding: 30px 0 20px; }
.carrousel::-webkit-scrollbar { display: none; }
.carrousel.glisse { cursor: grabbing; }
.carrousel-piste { display: flex; gap: 15px; width: max-content; padding: 0 var(--gouttiere); }
.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);
}
.carte-brut img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); -webkit-user-drag: none; }
.carte-brut:hover img { transform: scale(1.05); }
.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; }
.carte-nom a::after { content: ''; position: absolute; inset: 0; }   /* lien étendu à toute la carte */
.carte-brut .carte-nom { font-size: 15px; }
.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; }
.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 ---------- */
.cubo { padding: 130px 0 0; overflow: hidden; }
.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) */
.cubo-titre-cadre { margin-top: 18px; overflow-x: clip; }
.cubo-titre-piste { display: flex; align-items: center; width: max-content; animation: titre-defile 25s linear infinite; }
.cubo-titre { font-size: clamp(48px, 6.7vw, 110px); white-space: nowrap; }
.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); } }
.cubo-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding: 30px var(--marge) 0; }
.cubo-intro .texte-gris { max-width: 430px; }
.onglets { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; padding: 54px var(--marge) 16px; }
.onglets::-webkit-scrollbar { display: none; }
.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;
}
.onglet:hover { border-color: var(--encre); }
.onglet { margin: 0; cursor: pointer; white-space: nowrap; }
.onglet .compteur, .onglet em { font-size: 12.8px; font-style: normal; color: var(--texte); letter-spacing: .04em; }
.onglet.actif { background: var(--texte); border-color: var(--texte); color: var(--blanc); }
.onglet.actif .compteur, .onglet.actif em { color: var(--blanc); }
.grille-cubo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 25px; padding: 0 var(--marge); }
.carte-cubo { position: relative; border-radius: 8px; overflow: hidden; background: var(--gris-carte); aspect-ratio: 289 / 354; }
.carte-cubo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.carte-cubo:hover img { transform: scale(1.04); }
.grille-vide { display: none; grid-column: 1 / -1; color: var(--gris-texte); padding: 40px 0; }
.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 */
.grille-filtrable.filtre-frigorifique > :not(.cat-frigorifique),
.grille-filtrable.filtre-standards > :not(.cat-standards),
.grille-filtrable.filtre-specifiques > :not(.cat-specifiques),
.grille-filtrable.filtre-habitat > :not(.cat-habitat),
.grille-filtrable.filtre-espace-de-travail > :not(.cat-espace-de-travail),
.grille-filtrable.filtre-restauration > :not(.cat-restauration),
.grille-filtrable.filtre-mobilite > :not(.cat-mobilite),
.grille-filtrable.filtre-sport > :not(.cat-sport),
.grille-filtrable.filtre-evenementiel > :not(.cat-evenementiel),
.grille-filtrable.filtre-sanitaire > :not(.cat-sanitaire),
.grille-filtrable.filtre-medical > :not(.cat-medical),
.grille-filtrable.filtre-sieges-ponton > :not(.cat-sieges-ponton),
.grille-filtrable.filtre-remorques-chariots > :not(.cat-remorques-chariots),
.grille-filtrable.filtre-bateaux > :not(.cat-bateaux),
.grille-filtrable.filtre-kayaks > :not(.cat-kayaks),
.grille-filtrable.filtre-paddles > :not(.cat-paddles),
.grille-filtrable.filtre-conteneur > :not(.cat-conteneur),
.grille-filtrable.filtre-achat > :not(.cat-achat),
.grille-filtrable.filtre-livraison > :not(.cat-livraison),
.grille-filtrable.filtre-transformation > :not(.cat-transformation),
.grille-filtrable.filtre-reglementation > :not(.cat-reglementation),
.grille-filtrable.filtre-securite > :not(.cat-securite),
.grille-filtrable.filtre-durabilite > :not(.cat-durabilite),
.grille-filtrable.filtre-recyclage > :not(.cat-recyclage) { display: none; }
.zone-filtre.vide .grille-vide { display: block; }
.voir-plus { display: flex; justify-content: center; padding: 48px 0 0; }

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

/* ---------- 9 · actualités & réseaux ---------- */
.reseaux { padding: 40px 0 120px; overflow: hidden; }
.identite {
  margin: 0 15px; display: flex; align-items: center; gap: 22px;
  background: var(--clair); border-radius: 25px; padding: 15px;
}
.identite-rond { width: 80px; height: 80px; margin: 0; border-radius: 50%; background: var(--blanc); display: grid; place-items: center; flex: none; }
.identite-rond img { width: 44px; }
.identite-titre { font-size: 18px; font-weight: 600; letter-spacing: .01em; color: var(--encre); line-height: 1.35; }
.identite-sous { font-size: 18px; font-weight: 600; color: var(--encre); line-height: 1.35; }
.vignettes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 10px 15px 0; }
.vignette { position: relative; aspect-ratio: 1; border-radius: 25px; overflow: hidden; }
.vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.vignette:hover img { transform: scale(1.05); }
.ico-galerie, .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 % */
.bande-large { display: flex; width: max-content; margin-top: 40px; animation: bande-defile 60s linear infinite; }
.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) { .cubo-titre-piste, .cubo-separateur, .bande-large { animation: none; } }
.bande-large img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- pied de page ---------- */
.pied { background: var(--bleu); color: var(--blanc); padding: 30px 0 0; }   /* bleu du logo CUBOXO */
.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);
}
.pied-logo { height: 40px; width: auto; filter: brightness(0) invert(1); }
.pied-marque p { max-width: 380px; margin-top: 30px; font-size: 18px; line-height: 1.55; }
.lien-souligne { display: inline-flex; gap: 10px; margin-top: 40px; font-size: 18px; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.lien-souligne > a { display: inline-flex; gap: 10px; }
.lien-souligne em { font-style: normal; }
.pied-col { display: flex; flex-direction: column; align-items: flex-start; }
.pied-titre { font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, .62); line-height: 1.6; margin-bottom: 30px; }
.pied-col a, .pied-ville { font-size: 20px; line-height: 28px; letter-spacing: -.03em; }
.pied-col a:not(.lien-souligne):hover { color: var(--jaune); }
.pied-cgv { margin-top: 26px; }
.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);
}
.pied-pilules { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.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; }
.pied-adresse, .pied-horaires { font-size: 18px; line-height: 1.55; }
.pied-reseaux { display: flex; gap: 2px; justify-content: flex-end; }
.pied-reseaux a { width: 50px; height: 50px; border-radius: 50%; background: #E6E6E6; display: grid; place-items: center; transition: background-color .2s; }
.pied-reseaux a:hover { background: var(--jaune); }
.pied-reseaux svg { width: 26px; height: 26px; fill: var(--noir); }
.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 ---------- */
.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;
}
.pastille:hover { transform: translateY(-2px); }

/* ---------- lecteur vidéo ---------- */
.lecteur { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.86); display: none; align-items: center; justify-content: center; padding: 20px; }
.lecteur.ouvert { display: flex; }
.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; }
.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 ---------- */
.apparait { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.apparait.vu { opacity: 1; transform: none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1280px) {
  .menu { margin-left: 20px; gap: 30px; }
  .entete { gap: 28px; }
}
@media (max-width: 1100px) {
  :root { --entete: 72px; }
  .menu, .entete-actions { display: none; }
  .burger { display: block; }
  .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;
  }
  .panneau-mobile nav { display: flex; flex-direction: column; gap: 18px; margin-bottom: 26px; }
  .panneau-mobile nav a { font-size: 28px; font-weight: 600; letter-spacing: -.03em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
  .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); }
  .grille-cubo { grid-template-columns: repeat(2, 1fr); }
  .pied-haut { grid-template-columns: 1fr 1fr 1fr; gap: 40px 24px; }
  .pied-marque { grid-column: 1 / -1; }
  .pied-bas { grid-template-columns: 1fr 1fr; }
  .pied-reseaux { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .grille-cubo { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .entete-logo img { height: 30px; }
  .ouverture { padding-top: 22px; }
  .ouverture-titre { font-size: 11.2vw; text-wrap: wrap; letter-spacing: -.045em; }
  .chapeau { flex-direction: column; align-items: flex-start; gap: 24px; padding: 34px var(--marge) 36px; }
  .chapeau-texte { font-size: 18px; }
  .repense { height: auto; min-height: 760px; display: flex; flex-direction: column; justify-content: space-between; }
  .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%); }
  .repense-texte { font-size: 19px; margin-top: 30px; }
  .produit-vedette { position: relative; right: auto; bottom: auto; margin: 30px 20px 20px; width: 62%; }
  .expertises { padding: 80px 0; }
  .expertises .ligne-titre { flex-direction: column; align-items: flex-start; gap: 6px; }
  .expertises-grille { grid-template-columns: 1fr; gap: 50px; }
  .expertise figure { aspect-ratio: 4 / 5; }
  .bandeau-image { height: 78vh; min-height: 480px; }
  .bruts { padding-top: 80px; }
  .ligne-titre { flex-direction: column; align-items: flex-start; gap: 18px; }
  .bruts .ligne-titre .bouton { margin-bottom: 0; }
  .carte-brut { width: calc((100vw - 20px) / 1.25); min-width: 0; }
  .cubo { padding-top: 90px; }
  .cubo-accroche { width: auto; margin: 0 var(--marge); }
  .cubo-intro { flex-direction: column; align-items: flex-start; gap: 24px; }
  .grille-cubo { gap: 20px 12px; }
  .references { padding-top: 90px; }
  .references-tete { flex-direction: column-reverse; align-items: flex-end; gap: 20px; }
  .tableau-ligne { grid-template-columns: 74px 1fr 64px; padding: 0 4px; font-size: 14px; }
  .tableau-ligne > :nth-child(3) { display: none; }   /* le code postal se lit sur la fiche projet */
  .tableau-entete { font-size: 12px; }
  .client { font-size: 14px; }
  .pictos { gap: 6px; } .pictos svg { width: 18px; height: 18px; }
  .identite { gap: 14px; }
  .identite-rond { width: 60px; height: 60px; } .identite-rond img { width: 32px; }
  .identite-titre, .identite-sous { font-size: 14px; }
  .vignettes { grid-template-columns: repeat(2, 1fr); }
  .vignette:last-child { display: none; }
  .bande-large figure { width: 78vw; height: 70vw; }
  .pied-haut { grid-template-columns: 1fr 1fr; padding-bottom: 60px; }
  .pied-col:last-child { grid-column: 1 / -1; }
  .pied-bas { grid-template-columns: 1fr; padding-bottom: 60px; }
  .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 ---------- */
.page-tete { padding: 64px var(--marge) 0; }
.page-tete .titre-geant { line-height: 1.05; }
.page-sous-titre { margin-top: 20px; max-width: 780px; font-size: 24px; line-height: 1.4; color: var(--encre); }
.page-intro { margin-top: 24px; max-width: 720px; }
.page-accroche { margin-top: 20px; font-size: clamp(22px, 2.2vw, 32px); font-weight: 500; line-height: 1.25; letter-spacing: -.02em; }
.ariane { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; font-size: 14px; color: var(--gris-texte); }
.ariane a:hover { color: var(--encre); text-decoration: underline; }
.ariane .sep { opacity: .6; }
.section { padding: 100px var(--marge) 0; }
.section .ligne-titre { margin-bottom: 34px; }
.section .onglets { padding: 0 0 26px; }
main > .section:last-child { padding-bottom: 120px; }
.section-catalogue { padding-top: 52px; }
.lien-cloture { padding: 80px var(--marge) 120px; }
.lien-souligne-sombre { color: var(--encre); margin-top: 0; }

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

/* ---------- gamme CUBO ---------- */
.visuel-tete { margin: 44px var(--gouttiere) 0; border-radius: 20px; overflow: hidden; background: var(--gris-carte); }
.visuel-tete img { width: 100%; height: clamp(340px, 50vw, 760px); object-fit: cover; }
.section-categories { padding-top: 70px; }
/* six usages : photo pleine carte, titre, accroche et pilule « DÉCOUVRIR » en blanc par-dessus */
.section-usages { padding-top: 48px; }
.grille-usages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.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; }
.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); }
.carte-usage:hover img { transform: scale(1.04); }
.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%); }
.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); }
.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 */
.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); }
.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; }
.carte-usage:hover .pilule-decouvrir { background: var(--jaune); }
.carte-usage .pilule-decouvrir, .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) */
.section-modeles-categorie { padding-top: 44px; }
.section-modeles-categorie .grille-cubo { padding: 0; }
@media (max-width: 1100px) { .grille-usages { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grille-usages { grid-template-columns: 1fr; gap: 12px; } .carte-usage { aspect-ratio: 4 / 3; border-radius: 16px; } .pilule-decouvrir { font-size: 14px; } }
.bloc-categorie { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; padding: 36px 0; }
.bloc-categorie + .bloc-categorie { border-top: 1px solid var(--filet); }
.bloc-inverse { grid-template-columns: 1fr 1.2fr; }
.bloc-inverse .bloc-categorie-visuel { order: 2; }
.bloc-categorie-visuel { display: block; border-radius: 16px; overflow: hidden; background: var(--gris-carte); }
.bloc-categorie-visuel img { width: 100%; aspect-ratio: 1600 / 1040; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.bloc-categorie-visuel:hover img { transform: scale(1.03); }
.bloc-categorie-texte h2 { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -.03em; }
.bloc-categorie-texte p { margin: 16px 0 30px; font-size: 20px; color: var(--gris-texte); }
.bloc-categorie-texte .bloc-categorie-compte { margin: 0 0 14px; font-size: 15px; letter-spacing: .02em; color: var(--gris-texte); text-transform: uppercase; }
.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 */
.visuel-clair img { height: clamp(280px, 36vw, 540px); object-position: 50% 22%; }
.grille-sous { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.carte-sous .carte-info { max-width: none; }
/* photos des sélections : voile sombre en bas de carte, texte en blanc par-dessus */
.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; }
.carte-sous .carte-nom, .carte-sous .carte-info { z-index: 1; color: var(--blanc); }
.carte-sous .carte-info { opacity: .85; }
.encart-vide { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; padding: 36px; border-radius: 15px; background: var(--gris-carte); }
.encart-vide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.encart-vide p { margin: 18px 0 28px; font-size: 19px; line-height: 1.55; color: var(--texte); max-width: 520px; }
@media (max-width: 1100px) { .grille-sous { grid-template-columns: repeat(3, 1fr); } .encart-vide { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .grille-sous { grid-template-columns: 1fr; gap: 12px; } .carte-sous { aspect-ratio: 5 / 4; } .encart-vide { padding: 22px; } }
.texte-intro { max-width: 980px; font-size: 24px; line-height: 1.5; color: var(--encre); }
.section-intro { padding-top: 70px; }
.etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
.etape { padding-top: 18px; border-top: 1px solid var(--encre); }
.etape .numero { font-size: 14px; }
.etape h3 { margin: 22px 0 12px; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.15; letter-spacing: -.03em; }

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

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

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

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

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

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

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

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

/* ---------- panier : bouton d'en-tête et tiroir ---------- */
.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; }
.panier-bouton:hover { filter: brightness(.94); }
.panier-bouton .ico { width: 21px; height: 21px; }
.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; }
.panier-bouton.plein .panier-compteur { display: block; }
.panier { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.panier-voile { position: absolute; inset: 0; background: rgba(15, 15, 15, .32); opacity: 0; transition: opacity .3s; }
.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; }
.panier-tete { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 20px 20px 24px; border-bottom: 1px solid var(--filet); }
.panier-titre { font-size: 22px; letter-spacing: -.02em; }
.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; }
.panier-fermer:hover { filter: brightness(.94); }
.panier-vide { display: none; flex: 1; padding: 28px 24px; font-size: 16px; color: var(--gris-texte); }
.panier.vide .panier-vide { display: block; }
.panier.vide .panier-lignes, .panier.vide .panier-pied { display: none; }
.panier-lignes { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; overflow-y: auto; }
.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); }
.panier-ligne.panier-ligne-modele { display: none; }
.panier-ligne img { grid-row: 1 / 4; width: 92px; height: 92px; border-radius: 8px; object-fit: cover; object-position: 50% 56%; background: var(--clair); }
.panier-ligne-nom { grid-column: 2; font-size: 14px; font-weight: 500; line-height: 1.35; text-transform: uppercase; }
.panier-ligne-prix { grid-column: 3; grid-row: 1; font-size: 15px; font-weight: 500; white-space: nowrap; }
.panier-ligne-variante { grid-column: 2 / 4; font-size: 13px; color: var(--gris-texte); }
.panier-ligne-variante:empty { display: none; }
.panier-ligne-actions { grid-column: 2 / 4; align-self: end; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
.panier-quantite { display: inline-flex; align-items: center; border-radius: 999px; background: var(--gris-pastille); }
.panier-quantite button { width: 36px; height: 34px; font-size: 18px; line-height: 1; }
.qte-valeur { min-width: 20px; font-size: 15px; font-weight: 500; text-align: center; }
.panier-retirer { font-size: 13px; color: var(--gris-texte); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.panier-retirer:hover { color: var(--encre); }
.panier-pied { padding: 18px 24px 24px; border-top: 1px solid var(--encre); }
.panier-total { display: flex; justify-content: space-between; gap: 20px; font-size: 18px; font-weight: 600; color: var(--encre); }
.panier-note { margin-top: 4px; font-size: 14px; color: var(--gris-texte); }
.panier-commander { width: 100%; min-height: 52px; margin-top: 18px; font-size: 16px; }
.panier-commander.en-cours, .achat.en-cours, .panier-ligne.en-cours { opacity: .6; pointer-events: none; }
.panier-message { margin-top: 12px; font-size: 14px; line-height: 1.5; }
.panier-message:empty { display: none; }
.section-message { scroll-margin-top: var(--entete); }
@media (max-width: 1280px) {
  .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) {
  .menu { margin-left: 32px; gap: 10px 34px; }
}
@media (max-width: 1100px) {
  .panier-bouton { width: 44px; height: 44px; margin-left: auto; }
  .panier-bouton .ico { width: 19px; height: 19px; }
  .burger { margin-left: -18px; }   /* écart d'en-tête 28 px sous 1280 px : 10 px entre panier et menu */
  .langues-choix { display: block; margin-left: auto; }
  .langues-choix + .panier-bouton { margin-left: -18px; }
}
@media (max-width: 560px) {
  .fiche-info { padding: 20px 16px 16px; }
  .fiche-contacts .bouton { padding: 6px 10px; font-size: 13.5px; white-space: normal; text-align: center; }
  .fiche-achat { grid-template-columns: 96px 1fr; }
  .fiche-achat .bouton { padding: 0 12px; font-size: 14px; }
  .fiche-quantite button { width: 32px; }
  .fiche-info .fiche-actions, .fiche-info .fiche-actions .bouton { width: 100%; min-width: 0; }
  .fiche-prix { font-size: 30px; }
  .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) ---------- */
.case-produit { position: relative; display: flex; flex-direction: column; aspect-ratio: auto; border: 1px solid #e3e3e3; border-radius: 16px; overflow: hidden; background: var(--blanc); }
.case-produit:hover { box-shadow: 0 12px 30px rgba(15, 15, 15, .08); }
.carte-produit.case-produit, .carte-cubo.case-produit { transition: box-shadow .25s; }
.case-produit .carte-visuels { position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden; background: var(--gris-carte); }
.case-produit .carte-visuels img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; }
.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); }
.case-etat.occasion { background: var(--encre); color: var(--blanc); }
.case-corps { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 16px 18px 18px; }
.case-nom { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--texte); text-wrap: balance; }
.case-info { font-size: 13px; line-height: 1.45; color: var(--gris-texte); }
.case-bas { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: auto; padding-top: 12px; }
.case-prix { font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--encre); white-space: nowrap; }
.case-prix small { font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--gris-texte); }
.case-livraison { margin-left: auto; font-size: 12.5px; font-weight: 500; color: #2f7a3e; }

/* ---------- cadre produit : fiche (carte d'achat) ---------- */
.fiche-grille > * { min-width: 0; }
.fiche-info { padding: 28px 28px 22px; border: 1px solid #e3e3e3; border-radius: 18px; background: var(--blanc); }
.fiche-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastille-etat, .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; }
.pastille-etat { background: var(--gris-fond); color: var(--texte); }
.pastille-dispo { background: #e3f0e4; color: #2f7a3e; }
.pastille-dispo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pastille-dispo.dispo-rupture { background: var(--gris-fond); color: var(--gris-texte); }
.fiche-info .fiche-titre { margin-top: 14px; font-size: 34px; line-height: 1.12; letter-spacing: -.025em; }
.fiche-accroche { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--gris-texte); }
.fiche-info .fiche-prix { margin-top: 22px; font-size: 34px; }
.ico-ligne { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.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); }
.fiche-engagements li { display: flex; gap: 12px; align-items: flex-start; }
.fiche-engagements .ico-ligne { margin-top: 2px; }
.fiche-engagements strong { font-weight: 600; color: var(--texte); }
.fiche-achat { display: grid; grid-template-columns: 120px 1fr; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #e9e9e9; }
.fiche-quantite { display: flex; align-items: center; justify-content: space-between; height: 48px; border: 1px solid var(--filet); border-radius: 999px; }
.fiche-quantite button { width: 40px; height: 46px; border: 0; background: none; font-size: 18px; color: var(--texte); cursor: pointer; }
.fiche-achat .bouton { width: 100%; min-height: 48px; gap: 8px; font-size: 15px; font-weight: 500; }
.fiche-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.fiche-contacts .bouton { min-height: 46px; padding: 0 14px; gap: 8px; font-size: 14.5px; }
.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) ---------- */
.fiche-detail { margin: 40px var(--marge) 0; padding: 0 40px; border: 1px solid #e3e3e3; border-radius: 18px; background: var(--blanc); }
.fiche-onglets { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid #e9e9e9; font-size: 14.5px; }
.fiche-onglets a { padding: 18px 0 14px; border-bottom: 2px solid transparent; color: var(--gris-texte); white-space: nowrap; }
.fiche-onglets a:hover, .fiche-onglets a.actif { color: var(--texte); }
.fiche-onglets a.actif { border-bottom-color: var(--texte); }
.fiche-bloc { display: grid; grid-template-columns: 260px 1fr; gap: 40px; padding-block: 36px; scroll-margin-top: calc(var(--entete) + 20px); }
.fiche-bloc + .fiche-bloc { border-top: 1px solid #e9e9e9; }
.fiche-bloc h2 { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.fiche-bloc-texte { min-width: 0; max-width: 820px; font-size: 15px; line-height: 1.65; }
.fiche-bloc-texte p + p { margin-top: 12px; }
.fiche-bloc-texte a { text-decoration: underline; text-underline-offset: 3px; }
.liste-coches { list-style: none; display: grid; gap: 8px; margin: 16px 0 0; padding: 0; }
.liste-coches li { display: flex; gap: 10px; align-items: center; }
.liste-coches .ico-ligne { color: #2f7a3e; }
.fiche-tableau { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.fiche-tableau th, .fiche-tableau td { padding: 13px 12px 13px 0; border-bottom: 1px solid #e9e9e9; text-align: left; vertical-align: top; }
.fiche-tableau th { width: 45%; font-weight: 400; color: var(--gris-texte); }
.fiche-tableau td { font-weight: 500; color: var(--texte); }
.fiche-points { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.fiche-bloc .note { margin-top: 12px; font-size: 13px; color: var(--gris-texte); }
.fiche-questions { margin: 0; font-size: 15px; }
.fiche-questions dt { font-weight: 600; color: var(--texte); }
.fiche-questions dd { margin: 4px 0 18px; color: var(--gris-texte); }
.fiche-questions dd:last-child { margin-bottom: 0; }
@media (max-width: 1100px) {
  .fiche-bloc { grid-template-columns: 1fr; gap: 14px; }
  .fiche-detail { padding: 0 20px; }
}
@media (max-width: 760px) {
  .grille-produits, .grille-cubo { grid-template-columns: 1fr 1fr; gap: 12px; }
  .case-corps { padding: 12px 12px 14px; }
  .case-nom { font-size: 14.5px; }
  .case-info { font-size: 12px; }
  .case-prix { font-size: 16px; }
  .case-livraison { margin-left: 0; width: 100%; font-size: 12px; }
  .fiche-info .fiche-titre { font-size: 28px; }
}

/* ---------- assistant des visiteurs (assistant.js) : la pastille ouvre une fenêtre de questions ---------- */
.assistant-ouvrir { border: 0; cursor: pointer; font: inherit; font-size: 16px; }
.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); }
.assistant-fenetre[hidden] { display: none; }
.assistant-tete { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--bleu); color: var(--blanc); }
.assistant-titre { margin: 0; font-size: 16px; font-weight: 600; }
.assistant-fermer { border: 0; background: none; color: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.assistant-fil { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--gris-fond); }
.assistant-bulle { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; }
.assistant-bulle a { text-decoration: underline; text-underline-offset: 2px; }
.assistant-bulle ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.assistant-bot { align-self: flex-start; background: var(--blanc); color: var(--texte); border-bottom-left-radius: 4px; }
.assistant-moi { align-self: flex-end; background: var(--jaune); color: var(--noir); border-bottom-right-radius: 4px; }
.assistant-suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
.assistant-suggestions button { padding: 6px 12px; border: 1px solid var(--filet); border-radius: 999px; background: var(--blanc); font: inherit; font-size: 13px; cursor: pointer; }
.assistant-suggestions button:hover { border-color: var(--encre); }
.assistant-saisie { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #e6e6e6; }
.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; }
.assistant-saisie .bouton { padding: 10px 16px; border: 0; cursor: pointer; font-size: 14px; }
.assistant-note { margin: 0; padding: 0 14px 12px; font-size: 12px; line-height: 1.4; color: var(--gris-texte); }
.assistant-note a { text-decoration: underline; }

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

/* ---------- barre de recherche ---------- */
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.recherche-bande { background: var(--bleu); padding: 12px var(--marge); position: relative; z-index: 40; }
.recherche { position: relative; display: flex; align-items: center; gap: 14px; max-width: 760px; margin: 0 auto; }
.recherche-ico { width: 26px; height: 26px; flex: none; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.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; }
.recherche input::placeholder { color: rgba(255,255,255,.75); }
.recherche input:focus { border-bottom-color: #fff; }
.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; }
.recherche-resultats a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--encre); text-decoration: none; }
.recherche-resultats a:hover, .recherche-resultats a:focus { background: var(--gris-fond); }
.recherche-resultats .prix { white-space: nowrap; font-weight: 600; }
.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 */
.annonces { overflow: hidden; background: var(--encre, #231f20); color: #fff; font-size: 12px; line-height: 1; letter-spacing: .02em; }
.annonces-piste { display: flex; width: max-content; animation: annonces 38s linear infinite; }
.annonces-piste span, .annonces-piste p { display: inline-flex; align-items: center; margin: 0; padding: 6px 0; white-space: nowrap; }
.annonces-piste > span:not(.annonces-copie)::after, .annonces-copie span::after, .annonces-piste p::after { content: '•'; margin: 0 18px; opacity: .55; }
.annonces:hover .annonces-piste { animation-play-state: paused; }
@keyframes annonces { to { transform: translateX(-50%); } }

.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; }
.case-dispo::before, .pastille-dispo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.pastille-dispo { background: #16a34a; color: #fff; }
.case-livraison { font-weight: 400; }
.fiche-engagements strong { font-weight: 400; }
.fiche-engagements a { text-decoration: underline; text-underline-offset: 3px; }

/* recherche : apparition douce des résultats */
.recherche-resultats:not([hidden]) { animation: deroule .22s ease-out; }
.recherche-resultats li { animation: monte .28s ease-out both; }
.recherche-resultats li:nth-child(2) { animation-delay: .03s; } .recherche-resultats li:nth-child(3) { animation-delay: .06s; }
.recherche-resultats li:nth-child(4) { animation-delay: .09s; } .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 */
.galerie-vues figure.actif { animation: fondu .35s ease; }
@keyframes fondu { from { opacity: .3; } }
.galerie-fleche, .galerie-points button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .15s; }
.galerie-fleche:active { transform: scale(.88); }
.galerie-points button { transition: background-color .25s, transform .25s; }
.galerie-points button.actif { transform: scale(1.25); }
@media (max-width: 760px) {
  .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; }
  .galerie-vues::-webkit-scrollbar { display: none; }
  .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 */
.assistant-fenetre:not([hidden]) { animation: deroule .25s ease-out; transform-origin: bottom right; }
@media (max-width: 600px) {
  .assistant-fenetre { left: 10px; right: 10px; bottom: 10px; top: auto; width: auto; height: min(78dvh, 620px); max-height: calc(100dvh - 20px); border-radius: 16px; }
  .assistant-saisie input, .recherche input { font-size: 16px; }   /* 16 px : iOS ne zoome plus au focus */
  .assistant-saisie { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .assistant-ouvert .assistant-ouvrir { display: none; }
}

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

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

/* ---------- corrections 28/10 ---------- */
@media (max-width: 1100px) { .panneau-mobile { inset: 0; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; transform: translateY(-100%); } }
@media (max-width: 760px) { .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 */
.case-dispo { top: 44px; left: 12px; right: auto; }
/* onglets de la fiche */
.fiche-onglets { position: sticky; top: var(--entete); z-index: 5; background: var(--blanc); scroll-behavior: smooth; }
.fiche-onglets a { position: relative; border-bottom-color: transparent !important; transition: color .25s; }
.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; }
.texte-legal { overflow-wrap: anywhere; }

.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) */
.pied .pied-haut { border-top: 0; }
.pied-atouts, .pied-paiement, .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 */
.pied { position: relative; }
.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 ---------- */
.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%);
}
.pastille-promo:empty { display: none; }
.case-produit > .pastille-promo { position: absolute; top: 8px; right: 8px; z-index: 3; }
.fiche-pastilles .pastille-promo { width: 52px; height: 52px; font-size: 13px; margin-left: auto; }
.case-barre, .fiche-barre { color: var(--gris-texte); text-decoration: line-through; text-decoration-color: #e11d2a; text-decoration-thickness: 2px; white-space: nowrap; }
.case-barre { flex-basis: 100%; margin: 0; font-size: 14px; line-height: 1.2; }
.fiche-barre { font-size: 22px; font-weight: 500; margin-right: 6px; }
.case-barre:empty, .fiche-barre:empty { display: none; }
.case-prix, .fiche-montant { color: #e11d2a; }
.case-produit:not(:has(.case-barre:not(:empty))) .case-prix, .fiche-prix:not(:has(.fiche-barre:not(:empty))) .fiche-montant { color: var(--encre); }
.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; }
.promo-texte { flex: 1; min-width: 220px; margin: 0; display: grid; gap: 4px; font-size: 15px; line-height: 1.45; color: var(--texte); }
.promo-texte strong { font-size: 18px; color: #b3141f; }
.pastille-promo-grande { width: 74px; height: 74px; font-size: 18px; flex: none; }
@media (max-width: 600px) { .promo-bande { padding: 14px; gap: 12px; } .promo-bande .bouton { width: 100%; justify-content: center; } .pastille-promo-grande { width: 62px; height: 62px; font-size: 16px; } }
.fiche-info { position: relative; }
.fiche-pastilles .pastille-promo { position: absolute; top: -16px; right: -10px; margin: 0; width: 60px; height: 60px; font-size: 14px; }