/* ══ Configurateur, version G (15/10/2026) ════════════════════════════════
   Page d'ESSAI en français seulement. Le moteur est configurateur.js, tel
   quel ; cette feuille l'habille dans la langue de l'accueil G :
   · la NUIT pour ouvrir et pour regarder : l'écran des modèles, et la
     vitrine où la montre tourne sur ses calques, devant les trois bandes de
     livrée inclinées qui prennent les couleurs choisies ;
   · le BLANC pour travailler : l'établi des pièces, en grille de vignettes,
     une étape à la fois ; la TOILE pour relire : le récapitulatif ;
   · la barre du prix, de nuit, collée en bas.
   Règles du moteur respectées : la scène est un carré réservé, positionné,
   sans grille ni `object-fit` sur les calques ; le `hidden` et le `display`
   posés par le moteur ne sont jamais combattus. */

@property --pg-h1{syntax:'<color>';inherits:true;initial-value:#FF3E8E}
@property --pg-h2{syntax:'<color>';inherits:true;initial-value:#FFC414}
@property --pg-h3{syntax:'<color>';inherits:true;initial-value:#1E9BE8}
@property --pg-cfg{syntax:'<color>';inherits:true;initial-value:#FF3E8E}
@property --pg-cfg-clair{syntax:'<color>';inherits:true;initial-value:#E0186F}
@property --pg-cfg-texte{syntax:'<color>';inherits:true;initial-value:#C2135E}

body.cg{
  --pg-nuit:#0B0B0D; --pg-blanc:#fff; --pg-toile:#F3EFE7; --pg-toile2:#EAE4D8; --pg-encre:#15131A; --pg-doux:#4a4651;
  --pg-h1:#FF3E8E; --pg-h2:#FFC414; --pg-h3:#1E9BE8; --pg-cfg:#FF3E8E; --pg-h-sur:#15131A;
  /* Sur le BLANC de l'établi, la livrée ne sert jamais telle quelle : une
     teinte claire (aiguilles blanches, crème) y disparaît. `livree()` publie
     --pg-cfg-clair (filets, anneaux : 3:1 au moins sur blanc) et
     --pg-cfg-texte (texte : 4.5:1 au moins), --pg-clair-sur l'encre posée
     sur --pg-cfg-clair. */
  --pg-cfg-clair:#E0186F; --pg-cfg-texte:#C2135E; --pg-clair-sur:#fff;
  /* Le bord commun : la gouttière, ou la marge du .wrap au-delà de --max. */
  --cg-bord:max(var(--gouttiere),calc((100vw - var(--max,1760px)) / 2 + var(--gouttiere)));
  --pg-ease:cubic-bezier(.2,.7,.2,1);
  --cg-droite:clamp(400px,42vw,680px);
  background:var(--pg-nuit);
  transition:--pg-h1 .9s ease,--pg-h2 .9s ease,--pg-h3 .9s ease,--pg-cfg .9s ease,--pg-cfg-clair .9s ease,--pg-cfg-texte .9s ease;
}
/* `main` porte déjà la hauteur de l'en-tête ; les deux écrans règlent
   eux-mêmes leur rembourrage (la règle générale `section` ne s'applique pas). */
body.cg .cg-atelier{padding-block:0}
body.cg .cg-main{display:block}
body.cg [hidden]{display:none!important}

/* L'en-tête sur la nuit (repris de l'accueil G). */
body.cg .entete{background:linear-gradient(to bottom,rgba(11,11,13,.9) 0%,rgba(11,11,13,.6) 60%,rgba(11,11,13,0) 100%);border-bottom-color:transparent}
body.cg .entete.pose{background:rgba(11,11,13,.9);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:none}
/* Dans l'atelier, la nuit pleine : le blanc de la page ne transparaît plus. */
body.cg.cfg-en-cours .entete{background:var(--pg-nuit);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid rgba(255,255,255,.08);box-shadow:none}
body.cg .entete a,body.cg .entete button{color:#fff}
body.cg .entete .logo img{content:url(logo-brm-hub-clair-282.webp)}
@media(max-width:600px){
  body.cg{--header:62px}
  body.cg .entete .logo{--logo-h:32px}
}

/* Les deux écrans : c'est le moteur qui pose `cfg-en-cours`. */
body.cg:not(.cfg-en-cours) #cfg-atelier{display:none}
body.cg.cfg-en-cours #cfg-racine{display:none}

/* ── Le vocabulaire commun ──────────────────────────────────────────── */
.cg-sur{font-family:var(--display);font-size:var(--micro);letter-spacing:.28em;text-transform:uppercase;
  display:flex;align-items:center;gap:14px;color:rgba(255,255,255,.82)}
.cg-sur::before{content:"";flex:none;width:34px;height:3px;border-radius:2px;background:var(--pg-h1)}
.cg-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border-radius:0;
  font-family:var(--texte);font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;white-space:nowrap;
  transition:transform .25s var(--pg-ease),box-shadow .25s,background-color .6s,border-color .6s,color .3s}
.cg-btn-plein{background:var(--pg-h1);color:var(--pg-h-sur);border:1px solid var(--pg-h1)}
.cg-btn-plein:hover{transform:translateY(-2px);box-shadow:0 14px 34px color-mix(in srgb,var(--pg-h1) 45%,transparent)}
.cg-btn-livree:hover{transform:translateY(-2px);box-shadow:0 14px 34px color-mix(in srgb,var(--pg-cfg-clair) 45%,transparent)}
.cg-btn-livree{background:var(--pg-cfg-clair);color:var(--pg-clair-sur);border:1px solid var(--pg-cfg-clair)}
.cg-btn-ligne{border:1px solid rgba(21,19,26,.3);color:var(--pg-encre);background:#fff}
.cg-btn-ligne:hover{border-color:var(--pg-encre)}
.cg-lien{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:underline;text-underline-offset:5px;cursor:pointer;min-height:44px}

/* ── Le fond de nuit : halo, nom géant qui file, bandes de livrée ────── */
.cg-fond{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cg-halo{position:absolute;inset:0;
  background:radial-gradient(ellipse 52% 56% at 50% 54%,color-mix(in srgb,var(--pg-h1) 32%,transparent),transparent 72%)}
.cg-geant{position:absolute;left:0;right:0;top:50%;translate:0 -50%;white-space:nowrap;overflow:hidden;
  font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.8;letter-spacing:-.02em;
  font-size:clamp(8rem,22vw,22rem);color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.12)}
.cg-geant-piste{display:inline-flex;gap:.35em;padding-left:.35em;animation:cg-file 42s linear infinite}
@keyframes cg-file{to{transform:translateX(-50%)}}
.cg-bandes{position:absolute;inset:0;pointer-events:none}
.cg-bandes i{position:absolute;left:-20%;width:140%;transform:rotate(-14deg);transform-origin:center;
  transition:background-color .9s ease}
.cg-bandes i:nth-child(1){top:52%;height:clamp(30px,4.6vw,70px);background:var(--pg-h1)}
.cg-bandes i:nth-child(2){top:calc(52% + clamp(38px,5.6vw,84px));height:clamp(10px,1.5vw,22px);background:var(--pg-h2)}
.cg-bandes i:nth-child(3){top:calc(52% + clamp(56px,7.9vw,118px));height:clamp(5px,.7vw,10px);background:var(--pg-h3)}
.pg-js .cg-bandes i,html .cg-bandes:not(.peint) i{clip-path:inset(0 100% 0 0)}
.cg-bandes.peint i{animation:cg-balaie 1.05s var(--pg-ease) forwards}
.cg-bandes.peint i:nth-child(2){animation-delay:.12s}
.cg-bandes.peint i:nth-child(3){animation-delay:.22s}
@keyframes cg-balaie{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ══ ÉCRAN 1 — LES MODÈLES ════════════════════════════════════════════ */
.cg-racine{position:relative;isolation:isolate;min-height:calc(100svh - var(--header));background:var(--pg-nuit);color:#fff;
  padding-top:clamp(20px,3.4vw,52px);padding-bottom:clamp(20px,3vw,40px);display:flex;flex-direction:column}
.cg-racine .cg-halo{background:radial-gradient(ellipse 60% 50% at 62% 66%,color-mix(in srgb,var(--pg-h1) 26%,transparent),transparent 72%)}
.cg-racine .cg-bandes i:nth-child(1){top:60%}
.cg-racine .cg-bandes i:nth-child(2){top:calc(60% + clamp(38px,5.6vw,84px))}
.cg-racine .cg-bandes i:nth-child(3){top:calc(60% + clamp(56px,7.9vw,118px))}
.cg-racine .cg-geant{top:58%}
.cg-r-in{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:end;gap:20px clamp(24px,4vw,64px)}
.cg-r-tete{display:contents}
.cg-r-tete > .cg-sur{grid-column:1;grid-row:1}
.cg-r-titre{grid-column:1;grid-row:2;align-self:start}
.cg-r-cote{grid-column:2;grid-row:1 / span 2;align-self:end;padding-bottom:.6em}
.cg-reprendre{grid-column:1 / -1}
.cg-r-titre{margin-top:18px;font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(3rem,6.4vw,6.6rem);line-height:.86;letter-spacing:-.01em}
/* Au bureau, le titre tient sur une ligne, comme sur l'accueil G. */
@media(min-width:901px){.cg-r-titre{white-space:nowrap}}
.cg-r-titre .mot{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em 0 .04em;margin-top:-.14em}
.cg-r-titre .mot > span{display:inline-block;transform:translateY(105%);transition:transform .8s var(--pg-ease)}
.cg-pret .cg-r-titre .mot > span{transform:none}
.cg-r-titre .mot:nth-child(2) > span{transition-delay:.07s}
.cg-r-titre .mot:nth-child(3) > span{transition-delay:.14s}
.cg-r-ligne{margin-top:20px;max-width:46ch;font-weight:300;line-height:1.6;color:rgba(255,255,255,.78)}
.cg-reperes{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px}
.cg-reperes b{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--display);font-weight:600;font-size:1.5rem;
  letter-spacing:.02em;color:#fff}
.cg-reperes b span{font-family:var(--texte);font-weight:400;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.cg-reperes b + b{position:relative;padding-left:26px}
.cg-reperes b + b::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--pg-h2)}
/* 901-1600 : les trois repères sur une ligne, sans pastille orpheline. */
@media(min-width:901px) and (max-width:1600px){.cg-reperes{flex-wrap:nowrap;gap:0 18px}.cg-reperes b{font-size:1.25rem;white-space:nowrap}.cg-reperes b + b{padding-left:18px}}

.cg-reprendre{position:relative;z-index:2;display:flex;align-items:center;gap:18px 28px;flex-wrap:wrap;
  padding:16px 18px 16px 22px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 3px 0 0 var(--pg-h1)}
.cg-reprendre-mot{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.cg-reprendre-nom{margin-top:4px;font-family:var(--display);font-size:1.35rem;font-weight:500;text-transform:uppercase;letter-spacing:.03em}
.cg-reprendre-actions{display:flex;align-items:center;gap:16px}
.cg-reprendre .cg-btn{min-height:46px}
.cg-reprendre .cg-lien{color:rgba(255,255,255,.8)}

/* La piste des modèles : remplie par le moteur. */
.cg-piste-zone{position:relative;z-index:2;margin-top:clamp(20px,2.8vw,44px);display:flex;align-items:flex-start}
/* Les bandes de livrée passent SOUS la piste, qui est un plateau de nuit
   opaque : elles sortent entières au-dessus à droite et au-dessous à
   gauche, jamais en tronçons entre deux cartes. */
.cg-piste-zone::before{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px;z-index:-1;background:var(--pg-nuit);
  box-shadow:0 -18px 26px -8px var(--pg-nuit),0 18px 26px -8px var(--pg-nuit)}
.cfg-piste{position:relative;width:100%}
#cfg-modeles{display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  padding:10px var(--cg-bord) 22px;scroll-padding-inline:var(--cg-bord);scrollbar-width:none}
#cfg-modeles::-webkit-scrollbar{display:none}
.cfg-modele{position:relative;flex:none;width:clamp(210px,16.5vw,270px);scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start;
  text-align:left;color:#fff;padding:12px 16px 16px;border-radius:16px;background:rgba(22,22,27,.72);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  cursor:pointer;transition:transform .45s var(--pg-ease),border-color .35s,background-color .35s;opacity:0;translate:0 24px}
.cg-pret .cfg-modele{opacity:1;translate:0 0;transition:transform .45s var(--pg-ease),border-color .35s,background-color .35s,opacity .7s ease,translate .8s var(--pg-ease)}
.cg-pret .cfg-modele:nth-child(2){transition-delay:0s,0s,0s,.06s,.06s}
.cg-pret .cfg-modele:nth-child(3){transition-delay:0s,0s,0s,.12s,.12s}
.cg-pret .cfg-modele:nth-child(4){transition-delay:0s,0s,0s,.18s,.18s}
.cg-pret .cfg-modele:nth-child(5){transition-delay:0s,0s,0s,.24s,.24s}
.cg-pret .cfg-modele:nth-child(6){transition-delay:0s,0s,0s,.3s,.3s}
.cg-pret .cfg-modele:nth-child(n+7){transition-delay:0s,0s,0s,.36s,.36s}
.cfg-modele:hover,.cfg-modele:focus-visible{transform:translateY(-6px);border-color:color-mix(in srgb,var(--pg-h1) 70%,transparent);background:rgba(34,34,40,.82)}
.cfg-modele:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cfg-modele-vign{position:relative;display:block;width:100%;aspect-ratio:1/.9;margin-bottom:8px}
.cfg-modele-vign::before{content:"";position:absolute;inset:8% 8% 4%;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--pg-h1) 30%,transparent) 0,transparent 66%);opacity:.7;transition:opacity .4s,transform .6s var(--pg-ease)}
.cfg-modele-vign img{position:relative;display:block;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 22px 24px rgba(0,0,0,.55));transition:transform .7s var(--pg-ease)}
.cfg-modele:hover .cfg-modele-vign img{transform:rotate(-6deg) scale(1.05)}
.cfg-modele:hover .cfg-modele-vign::before{opacity:1;transform:scale(1.12)}
.cfg-modele h3{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,2vw,1.9rem);line-height:1;text-transform:uppercase;letter-spacing:.01em}
.cfg-modele small{display:block;margin-top:8px;font-size:.74rem;letter-spacing:.06em;color:rgba(255,255,255,.66)}
.cfg-modele em{display:block;margin-top:6px;font-style:normal;font-size:.9rem;color:#fff}
.cfg-modele em span{font-size:.74rem;color:rgba(255,255,255,.66)}
.cfg-modele-cta{margin-top:14px;display:inline-flex;align-items:center;gap:8px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  padding:10px 16px;border-radius:0;border:1px solid rgba(255,255,255,.3);transition:background-color .3s,border-color .3s,color .3s}
.cfg-modele-cta::after{content:"→"}
.cfg-modele:hover .cfg-modele-cta{background:var(--pg-h1);border-color:var(--pg-h1);color:var(--pg-h-sur)}
.cfg-fantome{min-height:340px;cursor:default;animation:cg-respire 1.4s ease-in-out infinite alternate}
.cfg-modele.cfg-fantome{opacity:1;translate:none}
@keyframes cg-respire{to{background:rgba(255,255,255,.09)}}
.cfg-piste-fleche{position:absolute;z-index:3;top:calc(10px + 14px + var(--cfg-vign-h,240px) / 2);translate:0 -50%;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;font-size:1.5rem;color:#fff;background:rgba(11,11,13,.7);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:opacity .3s,background-color .3s}
.cfg-piste-fleche:hover{background:var(--pg-h1);border-color:var(--pg-h1)}
.cfg-piste-prec{left:calc(var(--cg-bord) - 12px)}
.cfg-piste-suiv{right:calc(var(--cg-bord) - 12px)}
.cfg-piste-fleche:disabled{opacity:0;pointer-events:none}
.cfg-piste-jauge{position:relative;height:2px;margin:4px var(--cg-bord) 0;background:rgba(255,255,255,.14);overflow:hidden}
.cfg-piste-jauge i{position:absolute;left:0;top:0;bottom:0;background:var(--pg-h1)}
.cfg-piste-fixe .cfg-piste-fleche,.cfg-piste-fixe .cfg-piste-jauge{display:none}
@media(min-width:1700px){#cfg-modeles{justify-content:safe center}}
.cg-r-bas{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 24px;margin:clamp(16px,2.4vw,30px) var(--cg-bord) 0;padding:0;list-style:none;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.cg-r-bas li{display:flex;align-items:center;gap:10px;padding:3px 8px;background:var(--pg-nuit)}
.cg-r-bas li + li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--pg-h3)}

/* ══ ÉCRAN 2 — L'ATELIER ══════════════════════════════════════════════ */
.cg-atelier{position:relative;background:var(--pg-blanc);padding-top:var(--header)}
body.cg.cfg-en-cours{background:#fff;padding-bottom:var(--cfg-barre-h,90px)}
body.cg.cfg-en-cours.ckb-ouvert{padding-bottom:calc(var(--cfg-barre-h,90px) + var(--ckb-h,0px))}
.cg-grille{display:grid;grid-template-columns:minmax(0,1fr) var(--cg-droite);grid-template-rows:auto 1fr;align-items:start;
  min-height:calc(100svh - var(--header) - var(--cfg-barre-h,90px));
  background:linear-gradient(90deg,var(--pg-nuit) 0,var(--pg-nuit) calc(100% - var(--cg-droite)),#fff calc(100% - var(--cg-droite)))}

/* ── La vitrine ── */
.cg-vitrine{grid-column:1;grid-row:1 / span 2;position:sticky;top:var(--header);z-index:2;isolation:isolate;overflow:hidden;
  height:calc(100svh - var(--header) - var(--cfg-barre-h,90px));min-height:420px;background:var(--pg-nuit);color:#fff;
  display:flex;align-items:center;justify-content:center}
.cg-vitrine .cg-geant{top:54%}
.cg-hud{position:absolute;z-index:4;left:var(--cg-bord);top:clamp(16px,2.4vw,34px);max-width:min(48%,520px);pointer-events:none}
/* Au bureau, le HUD tient sur UNE rangée en haut de la vitrine (retour, nom,
   diamètre) et la scène se règle sous lui : `--cg-hud-b` est le bas mesuré
   du HUD. Plus rien n'est imprimé sur la montre. */
@media(min-width:901px){
  .cg-hud{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;max-width:none;right:calc(clamp(16px,2.4vw,34px) + 64px)}
  .cg-hud .cg-retour{margin-bottom:0}
  .cg-hud .cg-hud-sur{display:none}
  .cg-hud .cg-hud-titre{margin-top:0;font-size:clamp(1.8rem,2.6vw,2.8rem)}
  .cg-hud .cg-meta{margin-top:0;align-self:center}
}
.cg-hud > *{pointer-events:auto}
.cg-retour{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 10px;margin-bottom:16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.86);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  transition:border-color .3s,background-color .3s}
.cg-retour:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.cg-retour i{font-style:normal;font-size:.95rem}
.cg-hud-titre{margin-top:12px;font-family:var(--display);font-weight:600;text-transform:uppercase;line-height:.88;letter-spacing:-.005em;
  font-size:clamp(2.4rem,4.6vw,4.6rem)}
.cg-meta{margin-top:12px;display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--display);font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.66)}
.cg-meta span:empty{display:none}
/* La référence technique du modèle reste dans la page (le moteur l'écrit) mais ne s'affiche pas : illisible. */
#cfg-ref{display:none}

/* La scène : un carré réservé, positionné. Le moteur centre chaque calque
   en absolu et lui donne sa largeur en % d'un cadre de 700 px. */
#cfg-scene{position:relative;z-index:3;flex:none;aspect-ratio:1;
  width:min(calc(100% - 48px),calc(100svh - var(--header) - var(--cfg-barre-h,90px) - 2 * var(--cg-hud-b,96px)),860px);
  touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;outline:none}
#cfg-scene:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:6px;border-radius:50%}
#cfg-scene.cfg-tourne-en-cours{cursor:grabbing}
#cfg-calques{position:absolute;inset:0}
#cfg-calques.cg-pose{animation:cg-entre-montre .9s var(--pg-ease) backwards}
@keyframes cg-entre-montre{from{opacity:0;transform:translateX(16%) rotate(10deg) scale(.92);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.cfg-calque{pointer-events:none;-webkit-user-drag:none}
.cfg-calque[hidden],.cfg-mort{display:none}
.cg-sol{position:absolute;left:50%;bottom:9%;width:48%;height:7%;translate:-50% 0;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.85) 0%,transparent 70%);filter:blur(10px);opacity:.9}
#cfg-charge{position:absolute;left:50%;bottom:2%;translate:-50% 0;z-index:5;padding:7px 14px;border-radius:999px;
  background:rgba(11,11,13,.72);border:1px solid rgba(255,255,255,.16);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8);white-space:nowrap}
#cfg-charge.cfg-charge-vide{white-space:normal;text-align:center;width:max-content;max-width:90%;bottom:46%}
/* La loupe est sortie de la scène : dans l'axe du compteur 360, en haut à droite de la vitrine. */
#cfg-loupe{position:absolute;z-index:5;right:clamp(16px,2.4vw,34px);top:clamp(16px,2.4vw,34px);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(11,11,13,.5);border:1px solid rgba(255,255,255,.2);opacity:.75;transition:opacity .3s,background-color .3s}
#cfg-loupe svg{width:18px;height:18px}
#cfg-loupe:hover,#cfg-loupe:focus-visible{opacity:1;background:var(--pg-h1);border-color:var(--pg-h1)}

/* L'arc 360, en compte-tours. */
.cg-360{position:absolute;z-index:4;right:clamp(16px,2.4vw,34px);bottom:clamp(16px,2.4vw,30px);width:64px;height:64px;display:grid;place-items:center;pointer-events:none}
.cg-360 svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.cg-360 circle{fill:none;stroke:rgba(255,255,255,.16);stroke-width:2}
.cg-360 .cg-360-arc{stroke:var(--pg-cfg);stroke-linecap:round;stroke-dasharray:100.5;stroke-dashoffset:calc(100.5 - var(--t,.033) * 100.5);transition:stroke-dashoffset .25s}
.cg-360-n{display:flex;align-items:baseline;font-family:var(--display);color:#fff}
.cg-360-n b{font-weight:600;font-size:1rem;letter-spacing:.02em}
.cg-360-n i{font-style:normal;font-size:.6rem;opacity:.6}
.cg-vue-barre{position:absolute;z-index:4;left:50%;bottom:clamp(14px,2vw,26px);translate:-50% 0;width:min(300px,46%);display:grid;justify-items:center;gap:6px}
.cg-aide{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.66);transition:opacity .5s}
.cg-a-tourne .cg-aide{opacity:0}
.cg-vue-barre input,.cfg-zoom-barre input{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;cursor:pointer}
.cg-vue-barre input::-webkit-slider-runnable-track,.cfg-zoom-barre input::-webkit-slider-runnable-track{height:2px;
  background:linear-gradient(to right,var(--pg-cfg) var(--part,0%),rgba(255,255,255,.22) var(--part,0%))}
.cg-vue-barre input::-moz-range-track,.cfg-zoom-barre input::-moz-range-track{height:2px;background:rgba(255,255,255,.22)}
.cg-vue-barre input::-moz-range-progress,.cfg-zoom-barre input::-moz-range-progress{height:2px;background:var(--pg-cfg)}
.cg-vue-barre input::-webkit-slider-thumb,.cfg-zoom-barre input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-7px;border-radius:50%;background:#fff;border:3px solid var(--pg-cfg)}
.cg-vue-barre input::-moz-range-thumb,.cfg-zoom-barre input::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--pg-cfg)}
.cg-vue-barre input:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* La gravure, écrite en capitales d'atelier sous la montre (aucun calque :
   elle n'est pas dessinée sur la pièce). */
.cg-gravure-apercu{position:absolute;z-index:4;left:var(--cg-bord);bottom:clamp(18px,2.6vw,34px);max-width:40%;
  font-family:var(--display);text-transform:uppercase;color:#fff}
.cg-gravure-apercu span{display:block;font-size:.62rem;letter-spacing:.24em;color:rgba(255,255,255,.6)}
.cg-gravure-apercu b{display:block;margin-top:4px;font-weight:500;font-size:clamp(1rem,1.6vw,1.4rem);letter-spacing:.2em;word-break:break-word}

/* ── Le rail des étapes ── */
.cg-rail{grid-column:2;grid-row:1;position:sticky;top:var(--header);z-index:3;background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(21,19,26,.1)}
.cg-rail-piste{display:flex;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;padding:0 clamp(8px,1.2vw,18px)}
.cg-rail.deborde .cg-rail-piste{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 18px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,transparent 0,#000 18px,#000 calc(100% - 36px),transparent)}
.cg-rail-piste::-webkit-scrollbar{display:none}
.cg-etape{position:relative;flex:1 0 auto;min-width:0;min-height:64px;padding:12px 5px;display:grid;justify-items:center;align-content:center;gap:1px;
  text-align:center;color:var(--pg-doux);cursor:pointer;transition:color .3s}
.cg-etape i{font-style:normal;font-family:var(--display);font-weight:500;font-size:.66rem;letter-spacing:.1em;color:var(--pg-doux)}
.cg-etape span{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;white-space:nowrap}
.cg-etape small{max-width:10ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.66rem;color:var(--pg-doux)}
.cg-etape::after{content:"";position:absolute;left:5px;right:5px;bottom:-1px;height:2px;background:var(--pg-cfg-clair);transform:scaleX(0);transition:transform .45s var(--pg-ease)}
.cg-etape[aria-selected="true"]{color:var(--pg-encre)}
.cg-etape[aria-selected="true"] i{color:var(--pg-cfg-texte)}
.cg-etape[aria-selected="true"]::after{transform:scaleX(1)}
.cg-etape[data-vu="1"] i::after{content:" ✓";color:var(--pg-encre)}
.cg-etape:hover{color:var(--pg-encre)}
.cg-etape:focus-visible{outline:2px solid var(--pg-encre);outline-offset:-4px}
.cg-rail-jauge{position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none}
.cg-rail-jauge b{position:absolute;inset:0;background:color-mix(in srgb,var(--pg-cfg-clair) 40%,transparent);transform-origin:left;transform:scaleX(0);transition:transform .6s var(--pg-ease)}
/* 901-1366 px : les huit étapes tiennent dans la colonne, sans fondu. */
@media(min-width:901px) and (max-width:1366px){
  .cg-rail-piste{padding:0 4px}
  .cg-etape{padding:12px 3px;flex:1 1 auto}
  .cg-etape small{display:none}
  .cg-etape span{font-size:.66rem;letter-spacing:.05em}
}

/* ── L'établi ── */
.cg-etabli{grid-column:2;grid-row:2;min-width:0;padding:clamp(20px,2.6vw,36px) clamp(18px,2.4vw,36px) clamp(28px,3vw,44px);color:var(--pg-encre)}
.cg-reprise{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-bottom:18px;padding:8px 14px;border-radius:10px;
  background:var(--pg-toile);font-size:.82rem;color:#3b3742}
.cg-reprise .cg-lien{min-height:36px;color:var(--pg-encre)}
.cg-tete{margin-bottom:clamp(16px,2vw,24px)}
.cg-tete-rang{display:flex;align-items:baseline;gap:6px;font-family:var(--display)}
.cg-tete-rang b{font-weight:600;font-size:.9rem;color:var(--pg-cfg-texte);letter-spacing:.06em}
.cg-tete-rang i{font-style:normal;font-size:.72rem;letter-spacing:.1em;color:var(--pg-doux)}
/* Le nom reçoit le focus quand le bouton pressé disparaît : il l'annonce, sans cadre. */
.cg-tete-nom:focus,.cg-tete-nom:focus-visible{outline:none}
.cg-tete-nom{margin-top:4px;font-family:var(--display);font-weight:600;text-transform:uppercase;line-height:.95;font-size:clamp(2rem,3.2vw,3rem);color:var(--pg-encre)}
.cg-tete-sous{margin-top:6px;font-size:.84rem;color:var(--pg-doux)}
.cg-tete-sous:empty{display:none}
.cg-entre{animation:cg-entre .38s var(--pg-ease)}
@keyframes cg-entre{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cg-note{font-size:.84rem;color:var(--pg-doux);margin-bottom:16px}

/* Les blocs du moteur : seul celui de l'étape courante est montré. */
#cfg-composants > *:not(.cg-actif){display:none}
#cfg-composants > * + *{margin-top:26px}
.cfg-groupe-titre,.cfg-composant-titre{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:12px}
.cfg-groupe-titre > span,.cfg-composant-titre > span{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:var(--pg-encre)}
.cfg-groupe-titre > small,.cfg-composant-titre > small{font-size:.8rem;color:var(--pg-doux)}
.cfg-composant-titre > small:not(:empty)::before{content:"· ";color:var(--pg-cfg-texte)}
.cfg-nb{display:none}
.cg-titre-redit > .cfg-groupe-titre > span,.cg-titre-redit > .cfg-composant-titre > span{display:none}
.cg-titre-redit > .cfg-groupe-titre > small:not(:empty)::before,.cg-titre-redit > .cfg-composant-titre > small:not(:empty)::before{content:"Retenu : ";color:var(--pg-doux)}
.cfg-groupe > .cfg-composant + .cfg-composant{margin-top:22px}
.cfg-groupe > .cfg-composant{padding-top:0}
/* Les familles de bracelet : un sélecteur segmenté. */
.cfg-familles{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.cfg-famille{min-height:44px;padding:6px 16px;border-radius:999px;border:1px solid rgba(21,19,26,.18);background:#fff;color:var(--pg-encre);
  font-size:.78rem;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.cfg-famille:hover{border-color:var(--pg-encre)}
.cfg-famille.on,.cfg-famille[aria-pressed="true"]{background:var(--pg-encre);border-color:var(--pg-encre);color:#fff}
.cfg-famille:focus-visible{outline:2px solid var(--pg-encre);outline-offset:2px}

/* Les options : une grille de vignettes, plus de rangée à flèches. */
.cfg-rangee{position:relative}
.cfg-fleche{display:none}
.cfg-choix{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:12px 10px}
.cfg-option{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0;padding:0;text-align:left;cursor:pointer;color:var(--pg-encre)}
.cfg-option-vignette{display:block;width:100%;aspect-ratio:1;object-fit:contain;padding:7px;border-radius:14px;background:#fff;
  border:1px solid rgba(21,19,26,.12);transition:transform .25s var(--pg-ease),border-color .25s,box-shadow .25s}
.cfg-option:hover .cfg-option-vignette{transform:translateY(-3px);border-color:rgba(21,19,26,.34);box-shadow:0 10px 22px -12px rgba(21,19,26,.4)}
.cfg-option.on .cfg-option-vignette{border-color:var(--pg-encre);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--pg-cfg-clair)}
.cfg-option.on{animation:cg-pulse .32s var(--pg-ease)}
@keyframes cg-pulse{40%{transform:scale(.95)}}
.cfg-option:focus-visible{outline:none}
.cfg-option:focus-visible .cfg-option-vignette{outline:2px solid var(--pg-encre);outline-offset:3px}
.cfg-option-nom{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.72rem;line-height:1.3;padding-inline:2px}
.cfg-option-prix{font-size:.68rem;font-weight:500;color:var(--pg-encre);padding-inline:2px;margin-top:-3px}
.cfg-option-prix.cfg-incluse{font-weight:400;color:var(--pg-doux)}
.cfg-option-defaut{display:none}

/* La gravure. */
.cfg-gravure label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pg-doux)}
.cfg-gravure-compte{white-space:nowrap;font-family:var(--display);font-size:.9rem;letter-spacing:.06em;color:var(--pg-encre)}
.cfg-gravure-compte.plein{color:var(--pg-cfg-texte)}
#cfg-gravure-champ{display:block;width:100%;margin-top:10px;padding:16px 18px;border:1px solid rgba(21,19,26,.22);border-radius:12px;background:#fff;
  font-family:var(--display);font-size:1.25rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pg-encre);transition:border-color .3s,box-shadow .3s}
#cfg-gravure-champ::placeholder{font-family:var(--texte);font-size:.85rem;letter-spacing:0;text-transform:none;color:rgba(21,19,26,.42)}
#cfg-gravure-champ:focus{outline:none;border-color:var(--pg-encre);box-shadow:0 0 0 3px color-mix(in srgb,var(--pg-cfg-clair) 35%,transparent)}
.cfg-gravure p{margin-top:10px;font-size:.84rem;color:var(--pg-doux)}

/* L'étape Modèle. */
.cg-modeles{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
.cg-mod{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px 14px;border-radius:14px;border:1px solid rgba(21,19,26,.12);
  background:#fff;text-align:left;cursor:pointer;transition:transform .3s var(--pg-ease),border-color .3s,box-shadow .3s}
.cg-mod:hover{transform:translateY(-3px);border-color:rgba(21,19,26,.34);box-shadow:0 12px 26px -16px rgba(21,19,26,.5)}
.cg-mod[aria-current="true"]{border-color:var(--pg-encre);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--pg-cfg-clair)}
.cg-mod:focus-visible{outline:2px solid var(--pg-encre);outline-offset:3px}
.cg-mod-vign{display:block;width:100%;aspect-ratio:1;margin-bottom:6px;border-radius:50%;
  background:radial-gradient(circle at 50% 46%,#fff 0,#fff 36%,color-mix(in srgb,var(--pg-cfg-clair) 12%,var(--pg-toile)) 72%,transparent 72.4%)}
.cg-mod-vign img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--pg-ease)}
.cg-mod:hover .cg-mod-vign img{transform:rotate(-6deg) scale(1.04)}
.cg-mod-nom{font-family:var(--display);font-weight:600;font-size:1.1rem;letter-spacing:.03em;text-transform:uppercase}
.cg-mod-dia{font-size:.68rem;color:var(--pg-doux)}
.cg-mod-prix{font-size:.78rem;color:var(--pg-encre)}

/* L'étape Votre montre : la fiche sur toile. */
.cg-fiche{padding:clamp(18px,2.4vw,28px);border-radius:16px;background-color:var(--pg-toile);background-image:url(img/art-car/grain.svg);
  box-shadow:inset 0 3px 0 var(--pg-cfg-clair)}
.cg-fiche-sur{color:var(--pg-doux);margin-bottom:14px}
.cg-fiche-sur::before{background:var(--pg-cfg-clair)}
#cfg-recap{display:grid;gap:0}
.cfg-recap-base,.cfg-recap-ligne{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 14px;align-items:baseline;padding:10px 0;border-bottom:1px solid rgba(21,19,26,.1)}
.cfg-recap-base span:nth-child(1),.cfg-recap-ligne span:nth-child(1){grid-column:1;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pg-doux)}
.cfg-recap-base span:nth-child(2),.cfg-recap-ligne span:nth-child(2){grid-column:1;font-size:.92rem;color:var(--pg-encre)}
.cfg-recap-base span:nth-child(3),.cfg-recap-ligne span:nth-child(3){grid-column:2;grid-row:1 / span 2;align-self:center;font-size:.86rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.cfg-recap-base span:nth-child(2){font-family:var(--display);font-weight:600;font-size:1.15rem;text-transform:uppercase;letter-spacing:.03em}
.cfg-recap-total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-top:16px}
.cfg-recap-total span{font-family:var(--display);font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--pg-doux)}
.cfg-recap-total strong{font-family:var(--display);font-weight:600;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1;font-variant-numeric:tabular-nums}
.cg-fin-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.cg-fin-actions .cg-btn{flex:1 1 200px}
.cg-lien-boite{display:grid;gap:6px;margin-top:16px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pg-doux)}
.cg-lien-boite input{width:100%;padding:12px 14px;border:1px solid rgba(21,19,26,.2);border-radius:10px;font:inherit;font-size:.86rem;letter-spacing:0;text-transform:none;color:var(--pg-encre);background:#fff}
.cg-lien-mot{margin-top:8px;font-size:.84rem;color:var(--pg-doux)}
.cg-lien-mot:empty{display:none}
.cg-mentions{margin-top:clamp(18px,2.4vw,28px)}
.cg-mention{margin-top:16px;font-size:.72rem;line-height:1.55;color:var(--pg-doux)}
.cg-mentions .cg-mention:first-child{margin-top:0}
.cg-mention + .cg-mention{margin-top:8px}

/* Précédent / Suivant, qui nomme l'étape d'après. */
.cg-pied{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:clamp(26px,3vw,40px);padding-top:18px;border-top:1px solid rgba(21,19,26,.1)}
.cg-prec{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 4px;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pg-doux)}
.cg-prec:hover{color:var(--pg-encre)}
.cg-prec:disabled{visibility:hidden}
.cg-suiv{display:inline-flex;align-items:center;gap:0;min-height:52px;padding:0 22px;margin-left:auto;border-radius:0;background:var(--pg-encre);color:#fff;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;position:relative;overflow:hidden;transition:transform .3s var(--pg-ease),box-shadow .3s}
.cg-suiv::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--pg-cfg)}
.cg-suiv b{font-weight:600}
.cg-suiv b::before{content:"\00a0:\00a0"}
.cg-suiv i{margin-left:12px}
.cg-suiv:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px color-mix(in srgb,var(--pg-cfg) 60%,transparent)}
.cg-prec i,.cg-suiv i{font-style:normal;font-size:1rem;letter-spacing:0}
.cg-suiv b:empty::before{content:none}
/* Au bureau, Précédent / Suivant restent à portée : collés au bas de
   l'établi, juste au-dessus de la barre du prix. */
@media(min-width:901px){
  .cg-pied{position:sticky;bottom:var(--cfg-barre-h,90px);z-index:3;margin:clamp(18px,2.2vw,30px) -10px 0;padding:26px 10px 14px;border-top:0;
    background:linear-gradient(to top,#fff 0,#fff 70%,rgba(255,255,255,0) 100%)}
}

/* ── La barre du prix ── */
.cfg-barre{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;align-items:center;gap:14px 26px;
  padding:12px var(--cg-bord) calc(12px + env(safe-area-inset-bottom));background:var(--pg-nuit);color:#fff;
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border-top:1px solid rgba(255,255,255,.1)}
.cfg-barre::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;
  background:linear-gradient(90deg,var(--pg-h1) 0 62%,var(--pg-h2) 62% 86%,var(--pg-h3) 86%)}
.cg-barre-prix{display:grid;gap:2px;min-width:0}
.cg-barre-libelle{font-family:var(--display);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.6)}
#cfg-total{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,2.2vw,2.1rem);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;
  display:inline-block;transition:color .5s}
#cfg-total.cfg-bouge{animation:cg-bouge .7s var(--pg-ease)}
@keyframes cg-bouge{0%{color:var(--pg-cfg);transform:translateY(-6px)}35%{transform:none}100%{color:#fff}}
.cfg-finance{display:grid;gap:2px;min-width:0;max-width:240px}
.cfg-finance-tete{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:.8rem;color:rgba(255,255,255,.8)}
.cfg-finance-montant b{font-family:var(--display);font-weight:500;font-size:1.05rem;color:#fff}
.cfg-finance-duree b{font-weight:500;color:#fff}
#cfg-echeances{-webkit-appearance:none;appearance:none;width:100%;height:18px;background:transparent;cursor:pointer}
#cfg-echeances::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--pg-cfg) var(--part,100%),rgba(255,255,255,.2) var(--part,100%))}
#cfg-echeances::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-6px;border-radius:50%;background:#fff;border:2px solid var(--pg-cfg)}
#cfg-echeances::-moz-range-track{height:2px;background:rgba(255,255,255,.2)}
#cfg-echeances::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--pg-cfg)}
.cfg-barre > #cpt-cfg-enregistrer{margin-left:auto;display:inline-flex;align-items:center;gap:9px;min-height:50px;padding:0 18px;border-radius:0;
  background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transition:border-color .3s,background-color .3s}
.cfg-barre > #cpt-cfg-enregistrer:hover{border-color:#fff;background:rgba(255,255,255,.06);color:#fff}
.cfg-barre > #cpt-cfg-enregistrer[hidden]{display:none}
.cg-ajouter{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 28px;border-radius:0;
  background:var(--pg-h1);color:var(--pg-h-sur);font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:transform .25s var(--pg-ease),box-shadow .25s,filter .25s}
.cg-ajouter::after{content:"→"}
.cg-ajouter:hover{color:var(--pg-h-sur);transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 14px 34px color-mix(in srgb,var(--pg-h1) 45%,transparent)}
.cfg-barre > .cg-ajouter:first-of-type{margin-left:auto}
.cfg-barre > #cpt-cfg-enregistrer:not([hidden]) + .cg-ajouter{margin-left:0}
.cfg-barre :focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Le bandeau cookies et le repentir passent au-dessus de la barre, à
   toutes les largeurs (la règle de site.css, redite ici sous 980 px). */
body.cg:has(.cfg-barre) .ckb{bottom:calc(var(--cfg-barre-h,90px) + 4px)}
@media(max-width:980px){body.cg:has(.cfg-barre) .ckb{bottom:calc(var(--cfg-barre-h,90px) + 4px)}}

/* Ce qui reçoit le focus ne passe jamais sous ce qui est collé : `--cg-haut-fixe`
   et `--cg-bas-fixe` sont mesurés par la page (en-tête, vitrine et rail
   collés ; barre du prix et pied collé). */
html:has(body.cg.cfg-en-cours){scroll-padding-top:calc(var(--cg-haut-fixe,140px) + 8px);scroll-padding-bottom:calc(var(--cg-bas-fixe,90px) + 8px)}
.cg-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Le supplément qui s'envole vers le total. */
.cg-envol{position:fixed;z-index:60;pointer-events:none;padding:5px 10px;border-radius:999px;background:var(--pg-h1);color:var(--pg-h-sur);
  font-family:var(--display);font-size:.8rem;font-weight:500;letter-spacing:.04em;white-space:nowrap;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}

/* ── Le visuel agrandi ── */
#cfg-zoom{position:fixed;inset:0;z-index:1000;display:grid;place-items:center}
.cfg-zoom-voile{position:absolute;inset:0;background:var(--pg-nuit)}
.cg-zoom-bandes{z-index:0;opacity:.55}
.cg-zoom-bandes i{clip-path:none!important}
.cfg-zoom-boite{position:relative;z-index:1;display:grid;justify-items:center;gap:14px;width:100%;padding:16px}
.cfg-zoom-scene{position:relative;aspect-ratio:1;width:min(94vw,calc(100svh - 120px));touch-action:pan-y;cursor:grab}
.cfg-zoom-fermer{position:fixed;top:14px;right:14px;z-index:2;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  font-size:1.6rem;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22)}
.cfg-zoom-fermer:hover{background:var(--pg-h1);border-color:var(--pg-h1)}
.cfg-zoom-barre{display:flex;align-items:center;gap:14px;width:min(420px,86vw);color:#fff}
.cg-zoom-n{display:flex;align-items:baseline;font-family:var(--display)}
.cg-zoom-n b{font-weight:600}
.cg-zoom-n i{font-style:normal;font-size:.66rem;opacity:.6}
body.cfg-zoom-ouvert{overflow:hidden}

/* ── Le changement de modèle, dans la vitrine : la montre part en tournant
   dans un flou de vitesse, les traits passent, le nom suivant s'inscrit,
   puis la nouvelle arrive en freinant, un reflet la balaie et les bandes
   se repeignent à sa livrée. ── */
.cg-vitesse{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.cg-vitesse b{position:absolute;right:-60%;height:2px;width:55%;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85) 60%,transparent)}
.cg-vitesse b:nth-child(1){top:24%}.cg-vitesse b:nth-child(2){top:38%;height:3px;background:linear-gradient(90deg,transparent,var(--pg-h1) 60%,transparent)}
.cg-vitesse b:nth-child(3){top:52%}.cg-vitesse b:nth-child(4){top:63%;height:3px;background:linear-gradient(90deg,transparent,var(--pg-h2) 60%,transparent)}
.cg-vitesse b:nth-child(5){top:76%}
.cg-change .cg-vitesse b{animation:cg-trait .55s cubic-bezier(.4,0,.2,1) infinite}
.cg-change .cg-vitesse b:nth-child(2){animation-delay:.12s}.cg-change .cg-vitesse b:nth-child(3){animation-delay:.05s}
.cg-change .cg-vitesse b:nth-child(4){animation-delay:.2s}.cg-change .cg-vitesse b:nth-child(5){animation-delay:.3s}
@keyframes cg-trait{0%{right:-60%;opacity:0}20%{opacity:1}100%{right:130%;opacity:0}}
.cg-nouveau{position:absolute;left:0;right:0;top:50%;z-index:2;translate:0 -50%;text-align:center;pointer-events:none;
  font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.8;font-size:clamp(3rem,9vw,9rem);
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.9);opacity:0;white-space:nowrap}
.cg-change .cg-nouveau{animation:cg-nouveau-in .7s cubic-bezier(.2,.8,.2,1) .15s forwards}
.cg-arrive .cg-nouveau{opacity:1;animation:cg-nouveau-out .6s cubic-bezier(.6,0,.4,1) forwards}
@keyframes cg-nouveau-in{from{opacity:0;transform:translateX(30%) skewX(-12deg)}to{opacity:1;transform:none}}
@keyframes cg-nouveau-out{to{opacity:0;transform:translateX(-30%) skewX(-12deg)}}
.cg-change .cg-geant{opacity:0;transition:opacity .25s}
.cg-change #cfg-calques{animation:cg-sort-montre .46s cubic-bezier(.6,0,.9,.4) forwards}
@keyframes cg-sort-montre{to{opacity:0;transform:translateX(-55%) rotate(-28deg) scale(.86);filter:blur(10px)}}
.cg-change .cg-sol{opacity:0;transition:opacity .3s}
.cg-arrive #cfg-calques{animation:cg-arrive-montre 1.05s cubic-bezier(.16,1,.3,1) backwards}
@keyframes cg-arrive-montre{0%{opacity:0;transform:translateX(60%) rotate(32deg) scale(.88);filter:blur(12px)}
  55%{opacity:1;transform:translateX(-3%) rotate(-3deg) scale(1.03);filter:none}100%{transform:none}}
#cfg-scene::after{content:"";position:absolute;inset:6%;z-index:4;border-radius:50%;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 48%,transparent 60%);background-size:250% 100%;mix-blend-mode:overlay}
.cg-arrive #cfg-scene::after{animation:cg-reflet .9s ease-out .45s}
@keyframes cg-reflet{0%{opacity:1;background-position:120% 0}100%{opacity:0;background-position:-40% 0}}
.cg-arrive .cg-bandes i{animation-duration:.9s}
@media(prefers-reduced-motion:reduce){.cg-vitesse,.cg-nouveau,#cfg-scene::after{display:none}.cg-change #cfg-calques,.cg-arrive #cfg-calques{animation:none}}

.cg-toast{position:fixed;left:50%;bottom:calc(var(--cfg-barre-h,90px) + 16px);z-index:70;translate:-50% 12px;opacity:0;pointer-events:none;
  max-width:calc(100vw - 32px);padding:11px 18px;border-radius:999px;background:var(--pg-encre);color:#fff;font-size:.8rem;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.5);transition:opacity .35s,translate .35s var(--pg-ease)}
.cg-toast.on{opacity:1;translate:-50% 0}

/* Le pied du site sous l'atelier. */
body.cg footer,body.cg .svc-grid,body.cg .revendeurs{position:relative;z-index:1}

/* ══ TABLETTE ET TÉLÉPHONE ════════════════════════════════════════════
   La montre en haut, collée sous l'en-tête, poussée à droite ; à sa
   gauche, le retour, le nom, la loupe et le 360. Le rail (toutes les
   étapes visibles, décision du 14/10/2026) sous elle, collé quand l'écran
   a la hauteur ; une étape à la fois ; au téléphone, chaque pièce sur UNE
   rangée qui défile de côté ; la barre du prix sous le pouce.
   Fenêtre de travail visée : 250 px au moins en 320 × 568 (15/10/2026). */
@media(max-width:900px){
  body.cg{--cg-vh:clamp(150px,30svh,300px);--cg-scene:min(calc(100% - 150px),calc(var(--cg-vh) - 12px))}
  .cg-grille{display:block;background:#fff;min-height:0}
  .cg-vitrine{position:sticky;top:var(--header);height:var(--cg-vh);min-height:0;justify-content:flex-end;padding-right:var(--gouttiere)}
  /* Les bandes entrent derrière la montre, pas sous le nom (comme le héros G). */
  .cg-vitrine .cg-bandes{-webkit-mask-image:linear-gradient(to right,transparent 0,transparent 34%,#000 52%);mask-image:linear-gradient(to right,transparent 0,transparent 34%,#000 52%)}
  #cfg-scene{width:var(--cg-scene)}
  .cg-hud{left:var(--gouttiere);top:8px;max-width:calc(100% - var(--gouttiere) * 2 - var(--cg-scene))}
  .cg-hud-sur{display:none}
  .cg-retour{margin-bottom:4px;min-height:44px;padding:0 12px 0 8px;font-size:.68rem;letter-spacing:.08em;white-space:nowrap;gap:6px}
  .cg-hud-titre{margin-top:0;font-size:clamp(1.25rem,5.6vw,2.2rem);overflow-wrap:anywhere}
  .cg-meta{margin-top:4px;font-size:.68rem;letter-spacing:.1em}
  .cg-360{right:auto;left:var(--gouttiere);bottom:8px;width:48px;height:48px}
  .cg-360-n b{font-size:.82rem}
  .cg-360-n i{font-size:.66rem}
  .cg-vue-barre{display:none}
  #cfg-loupe{top:auto;right:auto;bottom:10px;left:calc(var(--gouttiere) + 58px)}
  .cg-gravure-apercu{left:var(--gouttiere);right:auto;bottom:64px;max-width:calc(100% - var(--gouttiere) * 2 - var(--cg-scene));text-align:left}
  .cg-gravure-apercu span{font-size:.66rem}
  .cg-gravure-apercu b{font-size:.85rem;letter-spacing:.14em}
  #cfg-charge{bottom:auto;top:8px}
  #cfg-charge.cfg-charge-vide{top:auto;bottom:40%}
  .cfg-familles{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gouttiere));padding-inline:var(--gouttiere);overscroll-behavior-x:contain}
  .cfg-familles::-webkit-scrollbar{display:none}
  .cfg-famille{flex:none}
  /* Le rail : collé sous la vitrine. Une ligne de huit sur tablette. */
  .cg-rail{position:sticky;top:calc(var(--header) + var(--cg-vh));z-index:4}
  .cg-rail-piste{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);overflow:visible;scroll-snap-type:none;padding:0 4px}
  .cg-rail.deborde .cg-rail-piste{-webkit-mask-image:none;mask-image:none}
  .cg-etape{min-width:0;min-height:52px;padding:8px 2px}
  .cg-etape span{font-size:.7rem;letter-spacing:.08em}
  .cg-etape small{display:none}
  .cg-etabli{padding:18px var(--gouttiere) 26px}
  .cg-tete{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-bottom:14px}
  .cg-tete-rang{order:2}
  .cg-tete-nom{margin-top:0;font-size:clamp(1.6rem,7vw,2.2rem)}
  .cg-tete-sous{flex-basis:100%;order:3;margin-top:2px}
  .cfg-choix{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:12px 8px}
  .cfg-option-vignette{padding:5px;border-radius:12px}
  .cfg-option-nom,.cfg-option-prix{font-size:.78rem}
  .cg-modeles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cg-suiv{flex:1;justify-content:center;padding:0 14px}
  /* La gravure : pendant la saisie, plus rien n'est collé au-dessus du champ
     (le clavier prend déjà la moitié de l'écran). */
  body.cg:has(#cfg-gravure-champ:focus) .cg-vitrine,
  body.cg:has(#cfg-gravure-champ:focus) .cg-rail{position:relative;top:auto}
  /* L'en-tête : 44 px de cible au doigt. */
  body.cg .entete-g > button{min-width:44px;min-height:44px;justify-content:center}
  body.cg .entete-d > a,body.cg .entete .lang-trigger{min-height:44px}
  body.cg .ckb .btn{min-height:44px}

  /* La barre : le prix et sa mensualité à gauche, les deux boutons à droite. */
  .cfg-barre{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"prix sauver ajouter" "fin sauver ajouter";
    gap:0 10px;padding:8px var(--gouttiere) calc(8px + env(safe-area-inset-bottom))}
  .cg-barre-prix{grid-area:prix}
  .cg-barre-libelle{display:none}
  #cfg-total{font-size:1.4rem}
  .cfg-finance{grid-area:fin;gap:0;max-width:none}
  .cfg-finance-tete{display:block;font-size:.72rem;line-height:1.35}
  .cfg-finance-montant,.cfg-finance-duree{white-space:nowrap}
  .cfg-finance-montant b{font-size:.86rem}
  .cfg-finance-frais,#cfg-echeances{display:none}
  .cfg-barre > #cpt-cfg-enregistrer{grid-area:sauver;margin-left:0;width:48px;min-height:48px;padding:0;justify-content:center}
  .cfg-barre > #cpt-cfg-enregistrer span:not(.cpt-cfg-icone){position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .cfg-barre > #cpt-cfg-enregistrer .cpt-cfg-icone{width:16px;height:16px}
  .cfg-barre > .cg-ajouter{grid-area:ajouter;margin-left:0}
  .cg-ajouter{min-height:48px;padding:0 16px;font-size:.7rem;letter-spacing:.12em}
  .cg-ajouter::after{display:none}

  /* L'écran des modèles. */
  .cg-r-in{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .cg-r-cote{padding-bottom:0}
  .cg-reprendre{margin-top:20px}
}
/* Tablette étroite et téléphone : le rail en deux lignes de quatre, sans
   numéros (le ✓ des étapes vues passe après le nom). */
@media(max-width:760px){
  .cg-rail-piste{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr))}
  .cg-etape{min-height:40px;padding:4px 2px;gap:0}
  .cg-etape i{display:none}
  .cg-etape span{font-size:clamp(.68rem,2.9vw,.74rem);letter-spacing:.04em}
  .cg-etape[data-vu="1"] span::after{content:" ✓"}
  .cg-etape::after{left:10%;right:10%}
}
/* Écran court (téléphone de 568 à 700 px de haut) : seule la montre reste
   collée ; le rail défile avec l'étape, qui commence par lui. */
@media(max-width:900px) and (max-height:700px){
  .cg-rail{position:relative;top:auto}
}
@media(max-width:600px){
  body.cg .cg-racine{padding-top:18px}
  .cg-r-titre{font-size:clamp(2.7rem,15vw,4.4rem)}
  .cg-r-ligne{font-size:.92rem;margin-top:14px}
  .cg-reperes{gap:6px 18px;margin-top:16px}
  .cg-reperes b{font-size:1.15rem;gap:6px}
  .cg-reperes b span{font-size:.68rem;letter-spacing:.12em}
  .cg-reperes b + b{padding-left:18px}
  .cg-reprendre{width:100%;padding:12px 14px}
  .cg-reprendre-actions{width:100%;justify-content:space-between}
  .cg-reprendre .cg-btn{flex:1}
  .cg-piste-zone{margin-top:18px}
  .cfg-modele{width:74vw;max-width:300px}
  .cfg-piste-fleche{display:none}
  /* Chaque pièce sur une rangée qui défile de côté : l'étape Boîtier passe
     d'un mur de soixante vignettes à une rangée par pièce, son nom au-dessus. */
  .cfg-choix{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;gap:10px;
    margin-inline:calc(-1 * var(--gouttiere));padding:6px var(--gouttiere) 4px;scroll-padding-inline:var(--gouttiere)}
  .cfg-choix::-webkit-scrollbar{display:none}
  .cfg-option{flex:0 0 clamp(78px,24vw,104px);scroll-snap-align:start}
  .cfg-rangee.deborde:not(.a-la-fin) > .cfg-choix{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)}
  #cfg-composants > * + *{margin-top:18px}
  .cfg-groupe > .cfg-composant + .cfg-composant{margin-top:14px}
  .cfg-groupe-titre,.cfg-composant-titre{margin-bottom:4px}
  /* Le bandeau cookies, dans l'atelier : en haut, sur la vitrine, plutôt
     qu'au-dessus de la barre où il mangerait la fenêtre de travail. */
  body.cg.cfg-en-cours:has(.cfg-barre) .ckb{top:var(--header);bottom:auto;border-top:0;border-bottom:1px solid rgba(21,19,26,.12);box-shadow:0 14px 34px rgba(11,11,13,.3)}
  body.cg.cfg-en-cours.ckb-ouvert{padding-bottom:var(--cfg-barre-h,90px)}
}
@media(max-width:380px){
  .cg-aj-suite{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .cg-ajouter{padding:0 14px;letter-spacing:.1em}
  #cfg-total{font-size:1.25rem}
}
/* Petit écran : l'entrée va droit aux montres. */
@media(max-width:360px),(max-width:600px) and (max-height:640px){
  .cg-r-ligne{display:none}
  .cg-r-titre{font-size:clamp(2.2rem,12vw,3rem)}
  .cg-reperes{margin-top:10px}
  .cg-gravure-apercu{display:none}
}
/* Téléphone en paysage : rien de collant, la montre défile avec la page. */
@media(max-width:900px) and (max-height:560px){
  body.cg{--cg-vh:min(78svh,420px)}
  .cg-vitrine{position:relative;top:auto}
  .cg-rail{top:var(--header)}
}
/* Grand écran bas (1280 × 600…) : le titre se resserre. */
@media(min-width:901px) and (max-height:720px){
  .cg-hud .cg-hud-titre{font-size:clamp(1.6rem,2.4vw,2.4rem)}
}
@media(prefers-reduced-motion:reduce){
  .cg-geant-piste{animation:none}
  .cg-bandes i{clip-path:none!important;animation:none!important}
  .cg-r-titre .mot > span{transform:none;transition:none}
  .cfg-modele,.cg-pret .cfg-modele{opacity:1;translate:none;transition:none}
  .cfg-fantome{animation:none}
  #cfg-calques.cg-pose,.cfg-option.on,.cg-entre,#cfg-total.cfg-bouge{animation:none}
  .cg-rideau{display:none}
}
.cg-mod-li{display:flex;min-width:0}
.cg-mod-li > .cg-mod{width:100%}

/* ── Les grosses flèches de la vitrine : Précédent / Suivant à portée de
   l'œil, de part et d'autre de la montre ; Suivant à la livrée, et qui
   appelle quand une pièce vient d'être choisie. ── */
.cg-fleches{position:absolute;inset:0;z-index:6;pointer-events:none}
.cg-fleche{position:absolute;top:50%;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:auto;color:#fff;
  transform:translateY(-50%);transition:transform .3s var(--pg-ease)}
.cg-fleche[hidden]{display:none}
.cg-fleche i{display:grid;place-items:center;width:clamp(64px,5.6vw,84px);aspect-ratio:1;border-radius:50%;font-style:normal;
  font-size:clamp(1.7rem,2.3vw,2.3rem);line-height:1;transition:background .25s,border-color .25s,box-shadow .3s}
.cg-fleche span{font-family:var(--display);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 1px 8px rgba(0,0,0,.8);white-space:nowrap}
.cg-fleche-prec{left:clamp(14px,2vw,30px)}
.cg-fleche-prec i{border:1.5px solid rgba(255,255,255,.45);background:rgba(10,9,14,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cg-fleche-prec:hover i,.cg-fleche-prec:focus-visible i{border-color:#fff;background:rgba(255,255,255,.14)}
.cg-fleche-suiv{right:clamp(14px,2vw,30px)}
.cg-fleche-suiv i{background:#fff;color:var(--pg-encre);box-shadow:0 0 0 4px var(--pg-cfg),0 14px 36px -8px rgba(0,0,0,.7)}
.cg-fleche-suiv:hover{transform:translateY(-50%) translateX(4px)}
.cg-fleche-suiv:hover i,.cg-fleche-suiv:focus-visible i{box-shadow:0 0 0 7px var(--pg-cfg),0 14px 36px -8px rgba(0,0,0,.7)}
.cg-fleche-prec:hover{transform:translateY(-50%) translateX(-4px)}
.cg-fleche:focus-visible{outline:none}
.cg-fleche:focus-visible i{outline:2px solid #fff;outline-offset:4px}
.cg-fleche-suiv.cg-appel i{animation:cg-appel 1.1s var(--pg-ease) 2}
@keyframes cg-appel{0%{box-shadow:0 0 0 4px var(--pg-cfg),0 0 0 4px rgba(255,255,255,.7)}
  70%{box-shadow:0 0 0 4px var(--pg-cfg),0 0 0 26px rgba(255,255,255,0)}100%{box-shadow:0 0 0 4px var(--pg-cfg),0 0 0 4px rgba(255,255,255,0)}}
@keyframes cg-appel-pastille{0%{box-shadow:0 0 0 0 rgba(255,255,255,.75)}70%{box-shadow:0 0 0 16px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 transparent}}
/* Téléphone : la vitrine est basse, la montre à droite ; les deux flèches
   se rangent dans le coin bas droit, Suivant en pastille qui nomme l'étape. */
@media(max-width:900px){
  .cg-fleches{inset:auto var(--gouttiere) 10px auto;display:flex;align-items:center;gap:8px}
  .cg-fleche{position:static;flex-direction:row;gap:0;transform:none}
  .cg-fleche-prec span{display:none}
  .cg-fleche-prec i{width:44px;font-size:1.25rem}
  .cg-fleche-suiv{height:44px;padding:0 6px 0 16px;border-radius:999px;background:#fff;color:var(--pg-encre);
    box-shadow:0 0 0 2px var(--pg-cfg),0 10px 26px -8px rgba(0,0,0,.7);flex-direction:row-reverse}
  .cg-fleche-suiv i{width:34px;font-size:1.25rem;background:none;color:var(--pg-encre);box-shadow:none}
  .cg-fleche-suiv span{font-size:.7rem;letter-spacing:.12em;text-shadow:none}
  .cg-fleche-suiv:hover,.cg-fleche-prec:hover{transform:none}
  .cg-fleche-suiv.cg-appel{animation:cg-appel-pastille 1.1s var(--pg-ease) 2}
  .cg-fleche-suiv.cg-appel i{animation:none}
}
@media(prefers-reduced-motion:reduce){.cg-fleche-suiv.cg-appel,.cg-fleche-suiv.cg-appel i{animation:none}}

/* ── Les pièces d'une étape, en onglets : une pièce à l'écran, les autres
   annoncées avec leur choix — rien ne reste caché sous la ligne de flottaison. ── */
.cg-pieces{display:flex;gap:8px;margin:0 0 22px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px}
.cg-pieces::-webkit-scrollbar{display:none}
.cg-pieces[hidden]{display:none}
.cg-piece{flex:1 1 0;min-width:128px;display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:2px 8px;padding:12px 14px 11px;text-align:left;
  border:1px solid rgba(21,19,26,.14);border-radius:12px;background:#fff;color:var(--pg-encre);position:relative;
  transition:border-color .2s,background .2s,box-shadow .2s}
.cg-piece small{grid-row:1 / span 2;font-family:var(--display);font-size:.72rem;font-weight:600;letter-spacing:.06em;color:var(--pg-doux)}
.cg-piece span{font-family:var(--display);font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.25}
.cg-piece b{grid-column:2;font-weight:400;font-size:.82rem;color:var(--pg-doux);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cg-piece:hover{border-color:rgba(21,19,26,.4)}
.cg-piece[aria-selected="true"]{border-color:var(--pg-encre);background:var(--pg-encre);color:#fff;box-shadow:inset 0 -3px 0 var(--pg-cfg)}
.cg-piece[aria-selected="true"] small,.cg-piece[aria-selected="true"] b{color:rgba(255,255,255,.75)}
.cg-piece:focus-visible{outline:2px solid var(--pg-cfg-clair);outline-offset:2px}
#cfg-composants .cg-piece-ailleurs,#cfg-composants .cg-groupe-ailleurs{display:none}
@media(max-width:900px){
  .cg-pieces{margin:0 calc(var(--gouttiere) * -1) 16px;padding:2px var(--gouttiere) 4px}
  .cg-piece{flex:0 0 auto;min-width:0;max-width:72vw;padding:10px 12px 9px}
}
@media(max-width:900px){.cg-fleche-suiv:hover i,.cg-fleche-suiv:focus-visible i{box-shadow:none}}
/* Au bureau, les onglets passent à la ligne plutôt que de fuir hors champ ;
   un nom long tient sur deux lignes, la flèche et Suivant le bornent. */
@media(min-width:901px){
  .cg-pieces{flex-wrap:wrap;overflow:visible}
  .cg-piece{flex:1 1 150px}
}
.cg-piece span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cg-fleche span{white-space:normal;max-width:15ch;text-align:center;line-height:1.35}
.cg-suiv b{display:inline-block;max-width:22ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
@media(max-width:900px){.cg-fleche-suiv span{max-width:16ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}