/* Detail produit — handoff. */
.crumb{padding-top:22px;font-size:13px;color:var(--ink-soft);display:flex;align-items:center;gap:9px;}
.crumb a:hover{color:var(--petrol);}
.crumb span{opacity:.5;}
.crumb b{color:var(--ink);font-weight:600;}

.product{padding:18px 0 26px;}
.product .wrap{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:start;}

/* Galerie */
.gallery{display:grid;grid-template-columns:84px 1fr;gap:16px;position:sticky;top:96px;}
.thumbs{display:flex;flex-direction:column;gap:12px;}
.thumb{aspect-ratio:1;border-radius:11px;border:1px solid var(--line);cursor:pointer;transition:.2s;
  overflow:hidden;background:var(--bg-soft);padding:0;}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.thumb:hover{border-color:var(--ink-soft);}
.thumb.active,.thumb.active:hover{border-color:var(--petrol);
  box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--petrol);}
.stage{position:relative;aspect-ratio:4/4.7;border-radius:var(--radius);overflow:hidden;background:#fff;}
.stage img{width:100%;height:100%;object-fit:contain;display:block;}
/* Zoom au survol (desktop) : l'image NE BOUGE PAS ; une lentille suit le curseur
   et un panneau a droite montre la zone survolee, agrandie depuis le HD (`full`).
   Le panneau est SORTI du stage (overflow:hidden le clipperait). */
.stage.is-zoomable{cursor:crosshair;}
.pd-zoom-lens{position:absolute;top:0;left:0;z-index:3;pointer-events:none;
  border:1px solid oklch(0% 0 0/.4);background:oklch(100% 0 0/.28);
  opacity:0;transition:opacity .12s ease;}
.pd-zoom-pane{position:fixed;top:0;left:0;z-index:1000;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff no-repeat;
  box-shadow:0 24px 60px -28px oklch(24% .05 235/.5);
  opacity:0;visibility:hidden;transition:opacity .12s ease;pointer-events:none;}
.stage.is-zooming .pd-zoom-lens{opacity:1;}
.pd-zoom-pane.is-on{opacity:1;visibility:visible;}
@media(max-width:980px){.pd-zoom-lens,.pd-zoom-pane{display:none;}}
.stage .badge-marq{position:absolute;top:16px;left:16px;background:#fff;border:1px solid var(--line);
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--petrol);
  padding:6px 13px;border-radius:999px;z-index:2;display:inline-flex;align-items:center;gap:7px;}

/* Info */
.info .ref{font-size:12.5px;color:var(--ink-soft);letter-spacing:.04em;text-transform:uppercase;font-weight:600;}
.info h1{font-size:clamp(22px, 2vw, 27px);font-weight:800;color:var(--ink);margin-top:8px;line-height:1.12;}
.pd-bullets{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 20px;}
.pd-bullets li{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.4;color:var(--ink-soft);}
.pd-bullet-ic{flex:none;width:17px;height:17px;margin-top:1px;color:var(--petrol,#0f766e);}
.price-row{margin-top:22px;display:flex;align-items:baseline;gap:12px;}
.price-row .now{font-family:"Archivo";font-weight:800;font-size:34px;color:var(--ink);}
/* Prix boutique barre : reference quand une population reduit le prix (D53). */
.price-row .was{font-family:"Archivo";font-weight:600;font-size:20px;color:var(--ink-soft);order:-1;}
.price-row .unit{font-size:13.5px;color:var(--ink-soft);}

.opt{margin-top:26px;}
.opt .opt-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.opt .opt-head h2{font-family:"Hanken Grotesk";font-size:13px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink);margin:0;}
.opt .opt-head .pick{font-size:13.5px;color:var(--ink-soft);}
.opt .opt-head .pick b{color:var(--ink);font-weight:600;}

/* Grille a 12 colonnes : avec le seuil de repli a 24 (cf. product.html.twig), l'etat
   replie = exactement 2 lignes pleines (24 = 2x12), pas de derniere ligne a moitie vide.
   12 colonnes -> swatches ~38px (taille d'origine). */
.colors{display:grid;grid-template-columns:repeat(12,1fr);gap:10px;align-items:start;}
.color{aspect-ratio:1/1;border-radius:10px;cursor:pointer;position:relative;
  border:1px solid oklch(0% 0 0/.12);transition:box-shadow .15s ease;padding:0;display:flex;overflow:hidden;}
/* Une bande par hex distinct : coloris uni = 100%, composé = bandes égales. */
.color-band{flex:1;min-width:0;}
.color-band + .color-band{box-shadow:inset 1px 0 0 oklch(0% 0 0/.14);}
/* Anneau de selection/hover en box-shadow : non clippe par overflow:hidden des
   bandes (l'ancien ::after a inset negatif l'etait). Liseré papier puis anneau. */
.color:hover{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--line);}
.color.active,.color.active:hover{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--petrol);}

/* Coloris secondaires du coloris choisi (cordon, contour, fermeture...) */
.color-compo{display:flex;flex-wrap:wrap;gap:7px 18px;margin-top:14px;}
.color-compo:empty{display:none;}
.color-compo .ca{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft);}
.color-compo .ca i{width:13px;height:13px;border-radius:4px;border:1px solid oklch(0% 0 0/.12);flex:none;}
.color-compo .ca .ca-label{color:var(--ink-soft);}
.color-compo .ca b{color:var(--ink);font-weight:600;}

/* « Voir plus » coloris (disclosure 100% CSS). Masque les swatches au-dela du 24e
   tant que la case n'est pas cochee. Le seuil 24 DOIT rester aligne avec
   product.html.twig (color_collapse). */
.colors-toggle{position:absolute;width:1px;height:1px;opacity:0;}
.colors-toggle:not(:checked) ~ .colors .color:nth-child(n+25){display:none;}
.see-more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;cursor:pointer;
    font-family:"Hanken Grotesk";font-size:13px;font-weight:700;color:var(--petrol);user-select:none;}
.see-more i{font-style:normal;font-weight:600;color:var(--ink-soft);}
.see-more .chev{transition:transform .2s ease;}
.see-more-off{display:none;}
.colors-toggle:checked ~ .see-more .see-more-on{display:none;}
.colors-toggle:checked ~ .see-more .see-more-off{display:inline;}
.colors-toggle:checked ~ .see-more .chev{transform:rotate(180deg);}
.colors-toggle:focus-visible ~ .see-more{outline:2px solid var(--petrol);outline-offset:3px;border-radius:8px;}

.sizes{display:flex;gap:9px;flex-wrap:wrap;}
.size{min-width:48px;padding:11px 8px;text-align:center;border:1px solid var(--line);border-radius:10px;
  font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;background:#fff;transition:.15s;font-family:inherit;}
.size:hover{border-color:var(--ink-soft);}
.size.active{border-color:var(--petrol);background:var(--petrol);color:#fff;}

/* Encart personnalisation (upload logo) */
.perso{margin-top:28px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;}
.perso-top{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;background:var(--petrol-tn);}
.perso-top .pic{width:42px;height:42px;border-radius:11px;background:var(--petrol);color:#fff;flex:none;display:grid;place-items:center;}
.perso-top .pic svg{width:22px;height:22px;color:#fff;}
.perso-top .pic svg *{stroke-width:1.7;}
.perso-top h2{font-size:16px;font-weight:700;color:var(--petrol-dk);margin:0;font-family:"Hanken Grotesk";}
.perso-top p{font-size:13.5px;color:var(--petrol-dk);opacity:.85;margin:3px 0 0;}
.perso-body{padding:16px 20px;}
.perso-body input[type="file"]{font:inherit;font-size:13.5px;}
.perso-body .hint{display:block;margin-top:7px;font-size:12.5px;color:var(--ink-soft);}

/* Quantite + CTA */
.buy{margin-top:26px;display:flex;gap:14px;align-items:stretch;flex-wrap:wrap;}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#fff;}
.qty button{width:46px;height:100%;border:none;background:#fff;font-size:20px;color:var(--ink);cursor:pointer;transition:.15s;font-family:inherit;}
.qty button:hover{background:var(--bg-soft);}
.qty input{width:56px;text-align:center;border:none;font-size:16px;font-weight:700;font-family:"Archivo";color:var(--ink);background:#fff;}
.qty input:focus{outline:none;}
.buy .btn-primary{flex:1;justify-content:center;}
.buy .buy-devis{flex:1 1 100%;justify-content:center;gap:8px;}
.buy .buy-devis svg{width:17px;height:17px;}

.reassure{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.re{display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--ink);}
.re .ri{width:34px;height:34px;border-radius:9px;background:var(--bg-soft);border:1px solid var(--line);display:grid;place-items:center;color:var(--petrol);flex:none;}
.re .ri svg{width:17px;height:17px;}
.re .ri svg *{stroke-width:1.7;}
.re b{font-weight:600;}
.re span{display:block;color:var(--ink-soft);font-size:12px;}

/* ── Emplacements du logo : lignes cochables + selecteur de logo ──────────
   Chaque ligne = un emplacement (coeur, dos...). La cocher revele le choix du
   logo quand plusieurs logos y sont posables. Mini-visuel t-shirt en ::after,
   etats (coche / indispo / logo choisi) pilotes par le script. */
.placements{display:flex;flex-direction:column;gap:10px;}
.pl-row{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;
  transition:border-color .15s ease,box-shadow .15s ease;}
.pl-row.is-active{border-color:var(--petrol);box-shadow:0 0 0 1px var(--petrol);}
.pl-row.is-unavailable{opacity:.5;}

.pl-toggle{display:flex;align-items:center;gap:13px;width:100%;padding:13px 15px;background:transparent;
  border:0;cursor:pointer;font-family:inherit;text-align:left;}
.pl-row.is-active .pl-toggle{background:var(--petrol-tn);}

.pl-check{width:22px;height:22px;border-radius:7px;border:2px solid var(--line);background:#fff;flex:none;
  display:grid;place-items:center;color:#fff;transition:.15s;}
.pl-check svg{width:14px;height:14px;opacity:0;transition:.15s;}
.pl-row.is-active .pl-check{background:var(--petrol);border-color:var(--petrol);}
.pl-row.is-active .pl-check svg{opacity:1;}

.pl-vis{width:34px;height:34px;border:2px solid var(--ink-soft);border-radius:7px;color:var(--ink-soft);
  position:relative;flex:none;transition:.15s;}
.pl-vis::after{content:"";position:absolute;width:11px;height:9px;background:var(--petrol);border-radius:2px;
  top:6px;left:50%;transform:translateX(-50%);}
.pl-vis.placement-vis--dos::after{width:16px;height:15px;top:7px;}
.pl-vis.placement-vis--poitrine::after{width:15px;height:10px;top:7px;}
.pl-vis.placement-vis--manches::after,.pl-vis.placement-vis--manche::after{width:7px;height:7px;top:6px;left:6px;transform:none;}
.pl-row.is-active .pl-vis{border-color:var(--petrol);color:var(--petrol);}

.pl-label{font-size:14.5px;font-weight:700;color:var(--ink);flex:1;}
.pl-hint{font-size:11.5px;font-weight:600;color:var(--petrol-dk);background:var(--petrol-tn);
  padding:3px 9px;border-radius:999px;white-space:nowrap;}
.pl-hint:empty{display:none;}

.pl-logos{padding:4px 15px 15px;border-top:1px dashed var(--line);}
.pl-logos[hidden]{display:none;}
.pl-logos-label{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft);margin:12px 0 9px;}
.pl-logos-list{display:flex;gap:14px;flex-wrap:wrap;}

/* Tuile logo : vignette large, sans libelle (le nom est en title/aria-label).
   Selection = anneau petrol + pastille check ; indispo = estompe. */
.logo-chip{position:relative;display:inline-grid;place-items:center;width:96px;height:96px;padding:10px;
  border:1.5px solid var(--line);border-radius:16px;background:#fff;cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease;}
.logo-chip:hover{border-color:var(--ink-soft);}
.logo-chip.is-active{border-color:var(--petrol);box-shadow:0 0 0 2px var(--petrol-tn);}
.logo-chip.is-unavailable{opacity:.35;cursor:not-allowed;}
.logo-chip.is-unavailable:hover{border-color:var(--line);}
.logo-chip[hidden]{display:none;}
.logo-chip-thumb{width:100%;height:100%;border-radius:10px;background:var(--bg-soft);
  overflow:hidden;display:grid;place-items:center;transition:background .2s ease;}
.logo-chip-thumb img{width:100%;height:100%;object-fit:contain;padding:9px;display:block;}
/* Logo majoritairement clair (blanc) -> fond fonce pour rester visible (detecteur
   de luminance logo-thumb-bg, comme catalogs/visuals). */
.logo-chip-thumb.is-light-logo{background:var(--ink);}
.logo-chip-ph{font-size:26px;font-weight:800;color:var(--ink-soft);font-family:"Archivo";}
.logo-chip-check{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;
  background:var(--petrol);color:#fff;border:2px solid #fff;display:none;place-items:center;
  box-shadow:0 2px 6px oklch(0% 0 0/.18);}
.logo-chip-check svg{width:13px;height:13px;}
.logo-chip.is-active .logo-chip-check{display:grid;}

/* Surbrillance du palier courant dans la grille (toggle JS). */
#pd-grid td.is-current{background:var(--petrol-tn);}

@media(max-width:980px){
  .product .wrap{grid-template-columns:1fr;gap:32px;}
  .gallery{position:static;}
  .reassure{grid-template-columns:1fr;}
}

/* Section description (contenu produit configure cote catalogs) */
.product-desc{padding:8px 0 48px;}
.product-desc h2{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:0 0 14px;}
.product-desc p{font-size:15px;line-height:1.7;color:var(--ink-soft,#444);max-width:760px;margin:0;}
.re .ri img{width:20px;height:20px;object-fit:contain;}

/* A+ : sections argumentaires editoriales (image alternee, rythme chaud) */
.aplus{margin-top:24px;border-top:1px solid var(--line);}
.aplus-row{padding:clamp(40px,6vw,68px) 0;}
.aplus-row.aplus-tint{background:var(--bg-soft);}
.aplus-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;}
.aplus-right .aplus-media{order:2;}
.aplus-media img{width:100%;display:block;border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover;box-shadow:0 18px 50px -30px oklch(24% .05 235 / .45);}
.aplus-media.is-empty img{display:none;}
.aplus-ph{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;border-radius:var(--radius);background:var(--petrol-tn);color:var(--petrol-dk);font-family:ui-monospace,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;}
.aplus-kicker{display:block;width:38px;height:3px;border-radius:2px;background:var(--petrol);margin-bottom:20px;}
.aplus-text h2{font-size:clamp(23px,3vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.12;color:var(--ink);margin:0 0 16px;}
.aplus-text p{max-width:60ch;font-size:16px;line-height:1.75;color:var(--ink-soft);margin:0;}
@media(max-width:800px){
  .aplus-grid{grid-template-columns:1fr;gap:22px;}
  .aplus-right .aplus-media{order:0;}
}