/* ─────────────────────────────────────────────────────────────
   Guide des bracelets — « trouver le bracelet de ma montre »
   Pages des bracelets (section .gb) et fiches de bracelet (.gb-fiche).
   Jetons du site (site.css) : --encre, --laque, --creme, --trait…
   Aucune barre fixe : rien ne se pose sur le bandeau cookies ni sur
   la bulle du conseiller.
   ───────────────────────────────────────────────────────────── */
.gb{background:var(--creme,#F4F2EF);border-block:1px solid var(--trait,#E3E0DB)}
.gb-in{max-width:1180px;margin:0 auto;padding:clamp(28px,4vw,52px) var(--gouttiere,24px)}
.gb-tete{max-width:760px}
.gb-tete .sur{color:var(--laque,#C8102E);margin:0 0 10px}
.gb-tete h2{font-family:var(--display);font-weight:500;text-transform:uppercase;
  letter-spacing:.04em;font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.15;margin:0 0 12px;color:var(--encre)}
.gb-intro{color:var(--encre-doux,#55585F);font-size:.95rem;line-height:1.6;margin:0}

.gb-choix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px;max-width:760px}
.gb-onglet{display:flex;align-items:center;gap:12px;min-height:56px;padding:14px 18px;text-align:start;
  background:#fff;border:1px solid var(--trait,#E3E0DB);color:var(--encre);font:inherit;font-size:.9rem;
  font-weight:600;line-height:1.35;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.gb-onglet::before{content:'';flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:var(--sable,#EBE8E3) center/16px no-repeat}
.gb-onglet[data-gb-voie="modele"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111114' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M12 8v4l3 2M9 2h6M9 22h6'/%3E%3C/svg%3E")}
.gb-onglet[data-gb-voie="photo"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111114' stroke-width='2'%3E%3Cpath d='M4 7h3l2-3h6l2 3h3v13H4z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E")}
.gb-onglet:hover{border-color:var(--encre)}
.gb-onglet:focus-visible,.gb-question:focus-visible,.gb-lien:focus-visible{outline:2px solid var(--laque);outline-offset:2px}
.gb-onglet.on{border-color:var(--encre);box-shadow:inset 0 -3px 0 var(--laque)}

.gb-corps{max-width:760px}
.gb-corps:not(:empty){margin-top:20px}
.gb-champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gb-champ{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
.gb-etiquette{font-size:var(--micro,.68rem);letter-spacing:var(--piste,.22em);text-transform:uppercase;
  font-weight:600;color:var(--encre-tres-doux,#686D75)}
.gb-select,.gb-input{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--encre-tres-doux,#686D75);
  background:#fff;color:var(--encre);font:inherit;font-size:1rem;border-radius:0}
.gb-select:disabled{opacity:.5}
.gb-select:focus,.gb-input:focus{outline:2px solid var(--laque);outline-offset:1px}
.gb-accord{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;line-height:1.5;
  color:var(--encre-doux,#55585F);margin:4px 0 16px;cursor:pointer}
.gb-accord input{flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;accent-color:var(--laque)}
.gb-intro-photo,.gb-conseil{font-size:.92rem;line-height:1.6;color:var(--encre-doux,#55585F);margin:0 0 14px}

.gb-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.gb-btn{padding:13px 22px}
.gb-btn[disabled]{opacity:.55;cursor:wait}
.gb-fichier{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.gb-lien{background:none;border:0;padding:8px 0;margin-top:12px;color:var(--encre);font:inherit;font-size:.85rem;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:start;min-height:44px}
.gb-lien:hover{color:var(--laque)}

.gb-msg{font-size:.9rem;line-height:1.5;margin:10px 0 0;color:var(--encre-doux,#55585F)}
.gb-erreur{color:#A50E26}
.gb-ok{color:#1E6B3A;font-weight:600}
.gb-attente::before{content:'';display:inline-block;width:12px;height:12px;margin-inline-end:8px;vertical-align:-1px;
  border:2px solid var(--trait,#E3E0DB);border-top-color:var(--laque);border-radius:50%;animation:gb-tourne 1s linear infinite}
@keyframes gb-tourne{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.gb-attente::before{animation:none}}

.gb-verdict{background:#fff;border:1px solid var(--trait,#E3E0DB);border-inline-start:4px solid var(--encre);
  padding:18px 20px;margin-top:4px}
.gb-verdict.gb-oui{border-inline-start-color:#1E6B3A}
.gb-verdict.gb-non{border-inline-start-color:var(--laque)}
.gb-verdict.gb-revue{border-inline-start-color:var(--encre-tres-doux,#686D75)}
.gb-verdict-tete{display:flex;gap:16px;align-items:center}
.gb-vignette{width:72px;height:72px;object-fit:contain;background:#fff;flex:0 0 auto}
.gb-vignette-l{width:120px;height:120px}
.gb-modele{font-family:var(--display);font-size:1.15rem;letter-spacing:.04em;text-transform:uppercase;margin:0;color:var(--encre)}
.gb-ecart{margin:4px 0 0;font-weight:600;color:var(--encre)}
.gb-reponse{margin:12px 0 0;font-size:.98rem;line-height:1.55;color:var(--encre)}
.gb-question-ia>.gb-reponse{margin:0 0 12px;font-weight:600}
.gb-note{margin:6px 0 0;font-size:.85rem;line-height:1.5;color:var(--encre-doux,#55585F)}
.gb-form .gb-msg.gb-erreur{margin:0 0 12px}

/* QR code (ordinateur) */
.gb-qr{display:flex;gap:24px;align-items:flex-start;background:#fff;border:1px solid var(--trait,#E3E0DB);padding:20px}
.gb-qr-img{width:184px;height:184px;flex:0 0 auto;background:#fff;image-rendering:pixelated}
.gb-qr-titre{font-weight:600;margin:0 0 8px;color:var(--encre)}
.gb-etapes{margin:0;padding-inline-start:20px;font-size:.9rem;line-height:1.7;color:var(--encre-doux,#55585F)}
.gb-autre{margin-top:14px;font-size:.88rem}
.gb-autre summary{cursor:pointer;min-height:44px;display:flex;align-items:center;text-decoration:underline;text-underline-offset:3px}
.gb-autre>div{padding-top:6px}

/* Fiche bracelet : le bouton sous « Compatible avec » */
.gb-fiche{background:none;border:0;margin:14px 0 4px}
/* Pages des bracelets : une ligne discrète, dépliée au clic. */
.gb-discret{background:none;border:0;padding:0}
.gb-discret .gb-in{max-width:none;padding:14px var(--gouttiere,24px) 0}
.gb-discret .gb-question{width:auto;max-width:100%;min-height:40px;padding:8px 14px;font-size:.82rem;
  background:#fff;justify-content:flex-start}
.gb-discret .gb-panneau{max-width:760px;border-top:1px solid var(--trait,#E3E0DB);margin-top:8px;padding-top:14px}
.gb-discret .gb-intro{font-size:.88rem;margin:0}
.gb-question{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;
  padding:12px 16px;background:var(--creme,#F4F2EF);border:1px solid var(--trait,#E3E0DB);color:var(--encre);
  font:inherit;font-size:.9rem;font-weight:600;text-align:start;cursor:pointer}
.gb-question::after{content:'+';font-size:1.2rem;line-height:1;transition:transform .2s}
.gb-question[aria-expanded="true"]::after{transform:rotate(45deg)}
.gb-panneau{border:1px solid var(--trait,#E3E0DB);border-top:0;padding:4px 16px 16px;background:#fff}
.gb-fiche .gb-choix{grid-template-columns:1fr 1fr;margin-top:12px}
.gb-fiche .gb-onglet{font-size:.82rem;padding:10px 12px;min-height:48px}
.gb-fiche .gb-champs{grid-template-columns:1fr}
.gb-fiche .gb-qr{flex-direction:column;align-items:center;text-align:center}
.gb-fiche .gb-etapes{text-align:start}

/* La page du téléphone */
.gb-tel{max-width:560px;margin:0 auto;padding:calc(var(--header,78px) + 28px) var(--gouttiere,20px) 64px}
.gb-tel h1{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(1.5rem,6vw,2rem);margin:0 0 10px}
.gb-tel .gb-corps{margin-top:18px}

@media(max-width:700px){
  .gb-choix,.gb-champs,.gb-fiche .gb-choix{grid-template-columns:1fr}
  .gb-qr{flex-direction:column;align-items:center}
  .gb-actions .gb-btn{width:100%;justify-content:center}
  .gb-verdict{padding:16px}
  .gb-verdict-tete{align-items:flex-start;gap:12px}
  .gb-vignette-l{width:88px;height:88px}
  .gb-modele{font-size:1.05rem}
}