/* LE COMPTOIR À DEUX PORTES — connexion et création de compte (18/09/2026, pages/compte-comptoir.php).
   DA de la fiche « Étal du marché » : scène sable, titre souligné au feutre, tickets à bord pointillé, étiquette.
   Un seul vert (jeton --bio-green et ses teintes), textes bruns, Quicksand, rien sous 12 px.
   Les boutons portent des !important : la règle générale `button:not(…)` de biomonde-frontend.css les peindrait. */

.bio-cpt {
    --cpt-brun: var(--bio-brown, #422E2D);
    --cpt-brun2: var(--bio-brown-dark, #372726);
    --cpt-vert: var(--bio-green, #A8C400);
    --cpt-teinte: rgba(var(--bio-green-rgb, 168, 196, 0), 0.14);
    --cpt-teinte2: rgba(var(--bio-green-rgb, 168, 196, 0), 0.28);
    --cpt-creme: #F9F7F2;
    --cpt-gris: #6f6660;
    --cpt-gris2: #5a4f49;
    --cpt-bord: #e8e3dc;
    --cpt-sable: #EFE6D7;
    --cpt-sable-bord: #d9c7a5;
    --cpt-beige: #F3EEE5;
    --cpt-rouge: #9f2a1d;
    box-sizing: border-box;
    max-width: 1160px;
    margin: 4px auto 48px;
    padding: 0;
    color: var(--cpt-brun);
    font-family: 'Quicksand', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
}
.bio-cpt *, .bio-cpt *::before, .bio-cpt *::after { box-sizing: border-box; }
/* Marges remises à zéro ; PAS les marges intérieures des paragraphes : `.bio-cpt p` l'emporterait sur les classes
   (étiquette, astuce, bande du panier) et le texte toucherait leur bord. */
.bio-cpt p, .bio-cpt h1, .bio-cpt h2, .bio-cpt ul, .bio-cpt ol, .bio-cpt li { margin: 0; }
.bio-cpt ul, .bio-cpt ol, .bio-cpt li { padding: 0; list-style: none; }
.bio-cpt h1, .bio-cpt h2 { color: var(--cpt-brun); font-family: 'Quicksand', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em; text-transform: none; }
.bio-cpt h1:focus, .bio-cpt h2:focus { outline: none; }
.bio-cpt img { max-width: none; margin: 0; border: 0; }
.bio-cpt .bio-cpt-ic { display: block; flex: 0 0 auto; width: 36px; height: 36px; object-fit: contain; }
.bio-cpt a:not(.bio-cpt-btn):not(.bio-cpt-porte):not(.bio-cpt-retour) { color: var(--cpt-brun); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.bio-cpt a:not(.bio-cpt-btn):not(.bio-cpt-porte):not(.bio-cpt-retour):hover { color: var(--cpt-brun); text-decoration-thickness: 2.5px; }

/* Au passage en caisse, l'avis « Vous devez être connecté… » de la page cède la place au comptoir (repli : le script). */
.bio-checkout-login-notice:has(+ .bio-cpt), .bio-checkout-login-notice:has(~ .bio-cpt) { display: none !important; }
/* L'espaceur Elementor (30 px) au-dessus du formulaire : la scène a déjà sa marge. */
.elementor-widget-spacer:has(+ .elementor-element .bio-cpt) { display: none !important; }

/* ── Écrans : un seul à la fois ; sans script, les ancres suffisent (:target). ── */
.bio-cpt.js .bio-cpt-ecran[hidden] { display: none !important; }
.bio-cpt:not(.js) .bio-cpt-ecran:not(.is-actif) { display: none; }
.bio-cpt:not(.js) .bio-cpt-ecran:target { display: block; }
.bio-cpt:not(.js):has(.bio-cpt-ecran:target) .bio-cpt-ecran.is-actif:not(:target) { display: none; }
.bio-cpt.js .bio-cpt-etape { display: none; }
.bio-cpt.js[data-etape="1"] .bio-cpt-etape[data-etape="1"],
.bio-cpt.js[data-etape="2"] .bio-cpt-etape[data-etape="2"] { display: block; }
.bio-cpt:not(.js) .bio-cpt-suivant, .bio-cpt:not(.js) .bio-cpt-email-choisi, .bio-cpt:not(.js) .bio-cpt-afficher { display: none !important; }
.bio-cpt:not(.js) .bio-cpt-etape + .bio-cpt-etape { margin-top: 22px; }

/* ── La scène ── */
.bio-cpt-scene { position: relative; padding: 20px 16px 24px; border-radius: 0; background: var(--cpt-sable); }
.bio-cpt-kicker { display: block; margin: 0 0 10px !important; color: var(--cpt-gris); font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.bio-cpt .bio-cpt-titre { margin: 0; font-size: 28px; line-height: 1.16; }
.bio-cpt-souligne { position: relative; z-index: 0; white-space: nowrap; }
.bio-cpt-souligne .bio-cpt-trait { position: absolute; left: -3%; bottom: -0.06em; z-index: -1; width: 106%; height: 0.44em; fill: var(--cpt-vert); }
.bio-cpt-sous { margin: 10px 0 0 !important; color: var(--cpt-gris2); font-size: 16px; line-height: 1.5; }
.bio-cpt-panier { display: flex; align-items: center; gap: 12px; margin: 0 0 16px !important; padding: 12px 14px; border: 1.5px solid var(--cpt-vert); border-radius: 18px; background: #fff; color: var(--cpt-gris2); font-size: 14.5px; line-height: 1.45; }
.bio-cpt-panier .bio-cpt-ic { width: 38px; height: 38px; }
.bio-cpt-panier b { display: block; color: var(--cpt-brun); font-size: 16px; }

/* ── Les deux portes ── */
.bio-cpt-portes { display: grid; gap: 14px; margin-top: 20px; }
.bio-cpt a.bio-cpt-porte {
    position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) 44px; align-items: center; gap: 14px;
    min-height: 120px; padding: 16px 14px 16px 12px; border: 2px dashed var(--cpt-sable-bord); border-radius: 24px;
    background: #fff; box-shadow: 0 8px 26px rgba(66, 46, 45, 0.08); color: var(--cpt-brun); text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease; -webkit-tap-highlight-color: transparent;
}
.bio-cpt a.bio-cpt-porte:hover { color: var(--cpt-brun); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(66, 46, 45, 0.12); }
.bio-cpt a.bio-cpt-porte:active { transform: scale(0.99); }
.bio-cpt a.bio-cpt-porte:focus-visible { outline: 3px solid var(--cpt-brun); outline-offset: 3px; }
.bio-cpt a.bio-cpt-porte.is-nouveau { border-color: var(--cpt-vert); background: linear-gradient(0deg, var(--cpt-teinte), var(--cpt-teinte)), #fff; }
.bio-cpt-porte-ill { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 22px; background: var(--cpt-creme); }
.bio-cpt-porte.is-nouveau .bio-cpt-porte-ill { background: #fff; }
.bio-cpt .bio-cpt-ill { display: block; width: 58px; height: 58px; object-fit: contain; }
.bio-cpt-porte-titre { display: block; font-size: 21px; font-weight: 700; line-height: 1.2; }
.bio-cpt-porte-sous { display: block; margin-top: 3px; color: var(--cpt-gris2); font-size: 15.5px; font-weight: 500; line-height: 1.4; }
.bio-cpt-pastille { display: inline-block; margin-top: 8px; padding: 0 11px; border-radius: 999px; background: var(--cpt-vert); color: var(--cpt-brun2); font-size: 13.5px; font-weight: 700; line-height: 28px; white-space: nowrap; }
.bio-cpt-porte-fl { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cpt-brun); color: #fff; }
.bio-cpt-porte.is-nouveau .bio-cpt-porte-fl { background: var(--cpt-vert); color: var(--cpt-brun2); }
.bio-cpt-porte-fl svg { width: 22px; height: 22px; }
.bio-cpt a.bio-cpt-porte .bio-cpt-porte-btn.bio-cpt-btn { display: none !important; } /* bouton des portes : ordinateur seulement */

/* Bouton Google (Site Kit) : sa boîte suit la largeur de la colonne. */
.bio-cpt-google { margin-top: 20px; text-align: center; }
.bio-cpt-google > p { margin: 0 0 10px !important; color: var(--cpt-gris2); font-size: 15px; }
.bio-cpt .googlesitekit-sign-in-with-google__frontend-output-button { display: flex !important; justify-content: center; width: 100% !important; max-width: none !important; max-inline-size: none !important; min-height: 44px; }
.bio-cpt .googlesitekit-sign-in-with-google__frontend-output-button > div { max-width: 100% !important; }
.bio-cpt .bio-signin-ou, .bio-cpt-ou { display: flex; align-items: center; gap: 12px; margin: 16px 0 !important; color: var(--cpt-gris); font-size: 14.5px; text-align: center; }
.bio-cpt .bio-signin-ou::before, .bio-cpt .bio-signin-ou::after, .bio-cpt-ou::before, .bio-cpt-ou::after { content: ""; flex: 1 1 24px; min-width: 24px; height: 1px; background: var(--cpt-bord); }
.bio-cpt .bio-cpt-etape .bio-signin-ou { display: none !important; } /* remplacé par « ou » dans le tunnel */
.bio-cpt [data-bio-cpt-google-vide] { display: none !important; } /* Google n'a pas répondu : pas de place vide */

/* ── Haut des écrans : retour et bascule ── */
.bio-cpt-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.bio-cpt a.bio-cpt-retour { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 15px 0 11px; border-radius: 999px; background: #fff; color: var(--cpt-brun); font-size: 15px; font-weight: 700; text-decoration: none; }
.bio-cpt a.bio-cpt-retour:hover { color: var(--cpt-brun); background: #fffdf8; }
.bio-cpt-deja { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 4px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); color: var(--cpt-gris2); font-size: 14.5px; }

/* ── Étapes ── */
.bio-cpt-etapes { display: flex; gap: 5px; margin: 16px 0 18px !important; }
.bio-cpt-etapes li { display: flex; flex: 1 1 auto; align-items: center; gap: 6px; padding: 7px 9px 7px 7px; border-radius: 14px; background: rgba(255, 255, 255, 0.55); color: var(--cpt-gris2); font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.bio-cpt-etapes .bio-cpt-pt { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; font-size: 12.5px; }
.bio-cpt-etapes .bio-cpt-pt svg { display: none; width: 12px; height: 12px; }
.bio-cpt-etapes li[data-n="3"] .bio-cpt-pt svg { display: block; }
.bio-cpt-etapes li.is-actif { background: #fff; color: var(--cpt-brun); box-shadow: 0 2px 10px rgba(66, 46, 45, 0.10); }
.bio-cpt-etapes li.is-actif .bio-cpt-pt { background: var(--cpt-brun); color: #fff; }
.bio-cpt-etapes li.is-fait .bio-cpt-pt { background: var(--cpt-vert); color: var(--cpt-brun2); }
.bio-cpt-etapes li.is-fait .bio-cpt-chiffre { display: none; }
.bio-cpt-etapes li.is-fait .bio-cpt-pt svg { display: block; }

/* ── Grille : ticket et colonne ── */
.bio-cpt-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.bio-cpt-ecran[data-ecran="client"] .bio-cpt-grille { margin-top: 18px; }
.bio-cpt-ticket { position: relative; padding: 22px 18px 24px; border: 2px dashed var(--cpt-sable-bord); border-radius: 24px; background: #fff; box-shadow: 0 8px 26px rgba(66, 46, 45, 0.08); }
.bio-cpt-num { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--cpt-beige); color: var(--cpt-gris2); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.bio-cpt .bio-cpt-ticket h2 { margin: 12px 0 4px; font-size: 24px; line-height: 1.2; }
.bio-cpt-pourquoi { margin: 0 0 16px !important; color: var(--cpt-gris2); font-size: 15px; }
.bio-cpt-astuce { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0 16px !important; padding: 12px; border-radius: 16px; background: var(--cpt-creme); color: var(--cpt-gris2); font-size: 14.5px; line-height: 1.45; }
.bio-cpt-astuce .bio-cpt-ic { width: 34px; height: 34px; }
.bio-cpt-astuce b { color: var(--cpt-brun); }

/* ── Champs ── */
.bio-cpt-champ { margin: 0 0 16px !important; }
.bio-cpt .bio-cpt-champ label, .bio-cpt-perdu form .form-row label { display: block !important; margin: 0 0 7px !important; color: var(--cpt-brun) !important; font-size: 15px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; }
.bio-cpt-perdu form .form-row label .required { color: var(--cpt-gris) !important; }
.bio-cpt-boite, .bio-cpt-mdp { position: relative; display: flex; align-items: center; }
.bio-cpt-boite > svg { position: absolute; left: 15px; top: 50%; width: 21px; height: 21px; color: var(--cpt-gris2); transform: translateY(-50%); pointer-events: none; }
.bio-cpt input.bio-cpt-saisie,
.bio-cpt-perdu form input.input-text {
    display: block !important; width: 100% !important; height: 58px !important; margin: 0 !important; padding: 0 16px !important;
    border: 1.5px solid #d8cfc3 !important; border-radius: 16px !important; background: #fff !important; box-shadow: none !important;
    color: var(--cpt-brun) !important; font-family: 'Quicksand', system-ui, sans-serif !important; font-size: 17px !important; font-weight: 500 !important;
    line-height: 1.2 !important; outline: none !important; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bio-cpt .bio-cpt-boite input.bio-cpt-saisie { padding-left: 48px !important; }
.bio-cpt .bio-cpt-mdp input.bio-cpt-saisie, .bio-cpt-perdu .bio-cpt-mdp input.input-text { padding-right: 122px !important; }
.bio-cpt input.bio-cpt-saisie::placeholder { color: #9d928a; opacity: 1; }
.bio-cpt input.bio-cpt-saisie:focus, .bio-cpt-perdu form input.input-text:focus { border-color: var(--cpt-vert) !important; box-shadow: 0 0 0 4px var(--cpt-teinte2) !important; }
.bio-cpt input.bio-cpt-saisie[aria-invalid="true"] { border-color: var(--cpt-rouge) !important; box-shadow: 0 0 0 4px rgba(159, 42, 29, 0.10) !important; }
.bio-cpt button.bio-cpt-afficher,
.bio-cpt button.bio-cpt-afficher:hover,
.bio-cpt button.bio-cpt-afficher:focus {
    position: absolute !important; top: 8px !important; right: 8px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important;
    width: auto !important; height: 42px !important; min-height: 0 !important; margin: 0 !important; padding: 0 12px !important;
    border: 0 !important; border-radius: 12px !important; background: var(--cpt-beige) !important; background-color: var(--cpt-beige) !important;
    box-shadow: none !important; color: var(--cpt-brun) !important; font: 700 14.5px/1 'Quicksand', system-ui, sans-serif !important;
    letter-spacing: 0 !important; text-transform: none !important; transform: none !important; cursor: pointer !important;
}
.bio-cpt button.bio-cpt-afficher:hover { background-color: #ebe3d6 !important; }
.bio-cpt button.bio-cpt-afficher:focus-visible { outline: 2px solid var(--cpt-brun) !important; outline-offset: 2px !important; }
.bio-cpt .bio-cpt-afficher svg { width: 18px; height: 18px; }
/* Edge ajoute son propre œil dans les champs mot de passe : un seul suffit, le nôtre (qui dit son mot). */
.bio-cpt input::-ms-reveal, .bio-cpt input::-ms-clear { display: none; }
/* Un seul œil : celui de WooCommerce se retire derrière le nôtre (champs du mot de passe perdu). */
.bio-cpt .bio-cpt-mdp .show-password-input { display: none !important; }
.bio-cpt .bio-cpt-mdp .password-input { display: block !important; position: static !important; width: 100%; }

/* ── Règle du mot de passe, fautes d'adresse ── */
.bio-cpt-regle { display: flex; align-items: flex-start; gap: 9px; margin: 10px 0 0 !important; color: var(--cpt-gris2); font-size: 14.5px; line-height: 1.45; }
.bio-cpt-regle .bio-cpt-pt { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; }
.bio-cpt-regle .bio-cpt-pt svg { width: 20px; height: 20px; }
.bio-cpt-regle b { color: var(--cpt-brun); }
.bio-cpt-regle.is-ok { color: var(--cpt-brun); font-weight: 700; }
.bio-cpt-regle.is-ok .bio-cpt-pt { background: var(--cpt-vert); color: var(--cpt-brun2); }
.bio-cpt-regle.is-ok .bio-cpt-pt svg { width: 13px; height: 13px; }
.bio-cpt-regle.is-erreur, .bio-cpt-regle.is-erreur b { color: var(--cpt-rouge); }
.bio-cpt-erreur-champ { display: flex; align-items: flex-start; gap: 9px; margin: 10px 0 0 !important; color: var(--cpt-rouge); font-size: 15px; font-weight: 700; line-height: 1.45; }
.bio-cpt-erreur-champ[hidden] { display: none !important; }
.bio-cpt-erreur-champ svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
.bio-cpt-suggestion { display: flex; align-items: flex-start; gap: 9px; margin: 10px 0 0 !important; padding: 10px 12px; border-radius: 14px; background: var(--cpt-teinte); color: var(--cpt-brun); font-size: 15px; line-height: 1.45; }
.bio-cpt-suggestion[hidden] { display: none !important; }
.bio-cpt-suggestion > svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
.bio-cpt-suggestion b { overflow-wrap: anywhere; }
.bio-cpt-suggestion-choix { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ── Boutons ── */
.bio-cpt .bio-cpt-btn,
.bio-cpt .bio-cpt-btn:hover,
.bio-cpt .bio-cpt-btn:focus,
.bio-cpt-perdu form button[type="submit"],
.bio-cpt-perdu form button[type="submit"]:hover {
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important;
    width: 100% !important; min-height: 58px !important; height: auto !important; margin: 0 !important; padding: 0 10px 0 22px !important;
    border: 0 !important; border-radius: 18px !important; background: var(--cpt-vert) !important; background-color: var(--cpt-vert) !important;
    box-shadow: 0 8px 22px rgba(var(--bio-green-rgb, 168, 196, 0), 0.30) !important; color: var(--cpt-brun2) !important;
    font: 700 17.5px/1.2 'Quicksand', system-ui, sans-serif !important; letter-spacing: 0 !important; text-align: center !important;
    text-decoration: none !important; text-transform: none !important; white-space: normal !important; transform: none !important; cursor: pointer !important;
    transition: filter 0.15s ease !important;
}
.bio-cpt .bio-cpt-btn:hover, .bio-cpt-perdu form button[type="submit"]:hover { filter: brightness(0.97); }
.bio-cpt .bio-cpt-btn:active { transform: scale(0.99) !important; }
.bio-cpt .bio-cpt-btn:focus-visible { outline: 3px solid var(--cpt-brun) !important; outline-offset: 3px !important; }
.bio-cpt .bio-cpt-btn > span:first-child { flex: 1 1 auto; padding-left: 14px; text-align: center; }
.bio-cpt .bio-cpt-fl { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(55, 39, 38, 0.10); }
.bio-cpt .bio-cpt-fl svg { width: 19px; height: 19px; }
.bio-cpt .bio-cpt-btn.is-brun, .bio-cpt .bio-cpt-btn.is-brun:hover, .bio-cpt .bio-cpt-btn.is-brun:focus { background: var(--cpt-brun) !important; background-color: var(--cpt-brun) !important; box-shadow: 0 8px 22px rgba(66, 46, 45, 0.20) !important; color: #fff !important; }
.bio-cpt .bio-cpt-btn.is-brun .bio-cpt-fl { background: rgba(255, 255, 255, 0.14); }
.bio-cpt .bio-cpt-btn.is-petit, .bio-cpt .bio-cpt-btn.is-petit:hover { display: inline-flex !important; width: auto !important; min-height: 44px !important; padding: 0 18px !important; border-radius: 999px !important; font-size: 15px !important; }
.bio-cpt .bio-cpt-btn.is-petit > span:first-child { padding-left: 0; }
.bio-cpt button.bio-cpt-lien,
.bio-cpt button.bio-cpt-lien:hover,
.bio-cpt button.bio-cpt-lien:focus {
    display: inline !important; width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important; background: none !important; background-color: transparent !important; box-shadow: none !important;
    color: var(--cpt-brun) !important; font: inherit !important; font-weight: 700 !important; letter-spacing: 0 !important; text-decoration: underline !important;
    text-decoration-thickness: 1.5px !important; text-underline-offset: 3px !important; text-transform: none !important; transform: none !important; cursor: pointer !important;
}
.bio-cpt button.bio-cpt-lien:focus-visible { outline: 2px solid var(--cpt-brun) !important; outline-offset: 2px !important; }
.bio-cpt button.bio-cpt-oui, .bio-cpt button.bio-cpt-oui:hover, .bio-cpt button.bio-cpt-non, .bio-cpt button.bio-cpt-non:hover {
    display: inline-flex !important; align-items: center !important; width: auto !important; min-height: 36px !important; margin: 0 !important; padding: 0 14px !important;
    border: 1.5px solid var(--cpt-brun) !important; border-radius: 999px !important; background: var(--cpt-brun) !important; background-color: var(--cpt-brun) !important;
    box-shadow: none !important; color: #fff !important; font: 700 14.5px/1 'Quicksand', system-ui, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; transform: none !important; cursor: pointer !important;
}
.bio-cpt button.bio-cpt-non, .bio-cpt button.bio-cpt-non:hover { background: #fff !important; background-color: #fff !important; color: var(--cpt-brun) !important; }

/* ── Étape 2 : l'adresse choisie ── */
.bio-cpt-email-choisi { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px !important; padding: 8px 12px; border-radius: 14px; background: var(--cpt-beige); font-size: 15.5px; font-weight: 700; }
.bio-cpt-email-choisi > svg { flex: 0 0 auto; width: 21px; height: 21px; color: var(--cpt-gris2); }
.bio-cpt-email-choisi > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bio-cpt-email-choisi .bio-cpt-lien { font-size: 14.5px !important; }

/* ── Connexion : rester connecté, mot de passe oublié ── */
.bio-cpt-oubli { margin: -6px 0 14px !important; text-align: right; font-size: 15px; }
.bio-cpt-rester { position: relative; display: flex !important; align-items: center; gap: 12px; margin: 2px 0 18px !important; font-size: 15.5px; font-weight: 600; cursor: pointer; }
.bio-cpt-rester input { position: absolute; opacity: 0; width: 26px; height: 26px; margin: 0; }
.bio-cpt-case { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 26px; height: 26px; border: 2px solid #cfc6ba; border-radius: 8px; background: #fff; color: transparent; }
.bio-cpt-case svg { width: 16px; height: 16px; }
.bio-cpt-rester input:checked + .bio-cpt-case { border-color: var(--cpt-vert); background: var(--cpt-vert); color: var(--cpt-brun2); }
.bio-cpt-rester input:focus-visible + .bio-cpt-case { outline: 2px solid var(--cpt-brun); outline-offset: 2px; }
.bio-cpt-legal { margin: 14px 0 0 !important; color: var(--cpt-gris); font-size: 13.5px; line-height: 1.5; }
.bio-cpt-legal a { font-weight: 600 !important; }

/* ── Colonne : étiquette et avantages ── */
.bio-cpt-cote { display: grid; gap: 14px; align-content: start; }
.bio-cpt-etiquette { position: relative; display: flex; align-items: center; gap: 14px; justify-self: start; padding: 12px 30px 12px 14px; border: 2px dashed var(--cpt-vert); border-radius: 14px 30px 30px 14px; background: #fff; box-shadow: 0 6px 18px rgba(66, 46, 45, 0.10); transform: rotate(-2deg); }
.bio-cpt-etiquette .bio-cpt-ic { width: 46px; height: 46px; }
.bio-cpt-etiquette > span { flex: 0 0 auto; text-align: left; }
.bio-cpt-etiquette b { display: block; font-size: 30px; line-height: 1; }
.bio-cpt-etiquette small { display: block; color: var(--cpt-gris2); font-size: 14px; font-weight: 700; white-space: nowrap; }
/* La même étiquette, plus petite, dans la porte « Je suis nouveau ». */
.bio-cpt-etiquette.is-porte { display: inline-flex; margin-top: 10px; padding: 7px 20px 7px 9px; gap: 10px; border-radius: 12px 26px 26px 12px; box-shadow: 0 4px 12px rgba(66, 46, 45, 0.10); }
.bio-cpt-etiquette.is-porte .bio-cpt-ic { width: 32px; height: 32px; }
.bio-cpt-etiquette.is-porte b { font-size: 23px; }
.bio-cpt-etiquette.is-porte small { font-size: 12.5px; line-height: 1.25; }
.bio-cpt-cote-titre { display: none; margin-top: 14px !important; font-size: 20px; font-weight: 700; }
.bio-cpt-liste { display: none; gap: 10px; }
.bio-cpt-liste li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; }
.bio-cpt-liste .bio-cpt-ic { width: 40px; height: 40px; }

/* ── Coup de main ── */
.bio-cpt-main { display: flex; align-items: center; gap: 12px; margin: 14px 10px 0 !important; padding: 14px; border: 1px solid var(--cpt-bord); border-radius: 18px; background: #fff; color: var(--cpt-gris2); font-size: 14.5px; line-height: 1.45; }
.bio-cpt-main .bio-cpt-ic { width: 40px; height: 40px; }
.bio-cpt-main b { color: var(--cpt-brun); }
.bio-cpt-main a { white-space: nowrap; }

/* ── Messages de WooCommerce dans le ticket ── */
.bio-cpt-avis { margin: 0 0 16px; }
.bio-cpt-avis-portes { margin-top: 16px; }
.bio-cpt .bio-auth-notices { margin: 0; }
.bio-cpt .woocommerce-error, .bio-cpt .woocommerce-message, .bio-cpt .woocommerce-info {
    display: block !important; margin: 0 0 10px !important; padding: 12px 14px 12px 44px !important; position: relative;
    border: 0 !important; border-radius: 14px !important; list-style: none !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.45 !important;
}
.bio-cpt .woocommerce-error { background: #fbeeea !important; color: var(--cpt-rouge) !important; }
.bio-cpt .woocommerce-message, .bio-cpt .woocommerce-info { background: var(--cpt-teinte) !important; color: var(--cpt-brun) !important; }
.bio-cpt .woocommerce-error::before, .bio-cpt .woocommerce-message::before, .bio-cpt .woocommerce-info::before {
    content: "!" !important; position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; background: currentColor; color: inherit; font: 700 14px/22px 'Quicksand', sans-serif !important;
}
.bio-cpt .woocommerce-error::before { background: var(--cpt-rouge); color: #fff !important; }
.bio-cpt .woocommerce-message::before, .bio-cpt .woocommerce-info::before { content: "i" !important; background: var(--cpt-brun); color: #fff !important; }
.bio-cpt .woocommerce-error li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.bio-cpt .woocommerce-error strong { font-weight: 700; }
.bio-cpt-avis-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 4px 0 0 !important; }
.bio-cpt .bio-verif-avis-connexion { margin: 0 0 16px !important; padding: 10px 14px !important; border: 0 !important; border-radius: 14px !important; background: var(--cpt-teinte) !important; color: var(--cpt-brun) !important; font-size: 15px !important; }

/* ── Mot de passe perdu (formulaires de WooCommerce habillés) ── */
.bio-cpt-perdu form { margin: 0; }
.bio-cpt-perdu form > p:not([class]) { margin: 0 0 16px !important; color: var(--cpt-gris2); font-size: 15.5px; line-height: 1.5; }
.bio-cpt-perdu form .form-row { width: 100% !important; float: none !important; margin: 0 0 16px !important; padding: 0 !important; }
.bio-cpt-perdu form .clear { display: none; }
.bio-cpt-perdu .woocommerce-form-row--first, .bio-cpt-perdu .woocommerce-form-row--last { width: 100% !important; }
.bio-cpt-perdu .bio-cpt-regle-reinit { margin-top: 12px !important; }

/* ── Tableau de bord : « C'est prêt », « C'est confirmé » ── */
.bio-cpt-pret {
    display: flex; align-items: flex-start; gap: 16px; margin: 0 0 18px; padding: 20px 18px; border: 2px dashed var(--bio-green, #A8C400); border-radius: 24px;
    background: #fff; box-shadow: 0 8px 26px rgba(66, 46, 45, 0.08); color: var(--bio-brown, #422E2D); font-family: 'Quicksand', system-ui, sans-serif;
}
.bio-cpt-pret .bio-cpt-pret-ic { display: block; flex: 0 0 auto; width: 56px; height: 56px; }
.bio-cpt-pret > div { flex: 1 1 auto; min-width: 0; }
.bio-cpt-pret h2 { margin: 0 0 6px !important; color: var(--bio-brown, #422E2D) !important; font-size: 21px !important; font-weight: 700 !important; line-height: 1.25 !important; }
.bio-cpt-pret p { margin: 0 0 14px !important; color: #5a4f49; font-size: 15.5px; line-height: 1.5; }
.bio-cpt-pret a.bio-cpt-btn, .bio-cpt-pret a.bio-cpt-btn:hover {
    display: inline-flex !important; align-items: center !important; gap: 12px !important; min-height: 50px !important; padding: 0 8px 0 20px !important;
    border-radius: 16px !important; background: var(--bio-green, #A8C400) !important; color: var(--bio-brown-dark, #372726) !important;
    font: 700 16px/1.2 'Quicksand', system-ui, sans-serif !important; text-decoration: none !important;
}
.bio-cpt-pret .bio-cpt-fl { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(55, 39, 38, 0.10); }
.bio-cpt-pret .bio-cpt-fl svg { width: 18px; height: 18px; }
.bio-cpt-pret p:last-child { margin-bottom: 0 !important; }
/* Code de bienvenue à saisir (formule « code », 18/09/2026) : le mot se lit d'un coup d'œil, il se recopie tel quel. */
.bio-cpt-pret p.bio-cpt-pret-code { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(var(--bio-green-rgb, 168, 196, 0), 0.14); color: var(--bio-brown, #422E2D); }
.bio-cpt-pret-code .bio-cpt-ic { display: block; flex: 0 0 auto; width: 36px; height: 36px; }
.bio-cpt-pret-code strong { display: inline-block; padding: 1px 9px; border: 1.5px dashed var(--bio-brown, #422E2D); border-radius: 8px; background: #fff; font-weight: 800; letter-spacing: 0.06em; white-space: nowrap; }
.bio-cpt-etiquette small.bio-cpt-etiquette-code { margin-top: 3px; color: var(--cpt-brun); }
.bio-cpt-etiquette-code strong { display: inline-block; padding: 0 7px; border-radius: 6px; background: var(--cpt-teinte2); font-weight: 800; letter-spacing: 0.06em; }
@media (max-width: 600px) {
    .bio-cpt-pret { flex-direction: column; gap: 10px; padding: 18px 16px; }
    .bio-cpt-pret .bio-cpt-pret-ic { width: 46px; height: 46px; }
}

/* ── Ordinateur ── */
@media (min-width: 900px) {
    .bio-cpt { margin-top: 20px; }
    .bio-cpt-scene { padding: 34px 44px 40px; border-radius: 30px; }
    .bio-cpt .bio-cpt-titre { max-width: 760px; font-size: 42px; }
    .bio-cpt-etapes { max-width: 620px; margin: 22px 0 26px !important; }
    .bio-cpt-etapes li { padding: 9px 12px; font-size: 14.5px; }
    .bio-cpt-grille { grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 48px; align-items: start; }
    .bio-cpt-ticket { padding: 30px 34px 32px; }
    .bio-cpt-cote { padding-top: 10px; }
    .bio-cpt-cote-titre, .bio-cpt-liste { display: grid; }
    .bio-cpt-etiquette { padding: 16px 38px 16px 18px; }
    .bio-cpt-etiquette b { font-size: 40px; }
    .bio-cpt-main { max-width: 760px; margin: 18px auto 0 !important; }
    .bio-cpt-portes { grid-template-columns: 1fr 1fr; gap: 26px; max-width: 940px; margin-top: 28px; }
    .bio-cpt a.bio-cpt-porte { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 32px 30px 28px; text-align: center; }
    .bio-cpt-porte-txt { display: flex; flex-direction: column; align-items: center; }
    .bio-cpt-porte-ill { width: 116px; height: 116px; border-radius: 30px; }
    .bio-cpt .bio-cpt-ill { width: 88px; height: 88px; }
    .bio-cpt-porte-titre { font-size: 26px; }
    .bio-cpt-porte-fl { display: none; }
    .bio-cpt a.bio-cpt-porte .bio-cpt-porte-btn.bio-cpt-btn { display: flex !important; margin-top: auto !important; }
    .bio-cpt-google { max-width: 420px; margin: 26px auto 0; text-align: center; }
    .bio-cpt-google .googlesitekit-sign-in-with-google__frontend-output-button { justify-content: center; }
    /* Tout centré dans la scène (le gérant, 18/09 : « un truc bien centré ») : titres, portes, étapes, ticket et colonne. */
    .bio-cpt-accueil, .bio-cpt-tunnel > .bio-cpt-titre, .bio-cpt-perdu .bio-cpt-titre { text-align: center; }
    .bio-cpt .bio-cpt-titre { margin-left: auto; margin-right: auto; }
    .bio-cpt-portes { margin-left: auto; margin-right: auto; }
    .bio-cpt-etapes { margin-left: auto !important; margin-right: auto !important; }
    .bio-cpt-grille { max-width: 1000px; margin-left: auto; margin-right: auto; }
    .bio-cpt-accueil .bio-cpt-panier { max-width: 940px; margin-left: auto !important; margin-right: auto !important; text-align: left; }
    .bio-cpt-perdu .bio-cpt-grille { grid-template-columns: minmax(0, 540px) minmax(0, 1fr); }
    .bio-cpt-etiquette.is-porte { margin-top: 12px; }
    .bio-cpt-pret { padding: 24px 26px; }
}
@media (max-width: 899px) {
    .bio-cpt .bio-cpt-tunnel .bio-cpt-titre { font-size: 25px; }
    /* Dans la porte, sur téléphone : l'étiquette a sa rangée, sous le titre, sur la largeur du texte et de la flèche. */
    .bio-cpt a.bio-cpt-porte > .bio-cpt-etiquette.is-porte { grid-column: 1 / -1; justify-self: center; max-width: 100%; margin-top: -2px; padding: 6px 20px 6px 8px; gap: 8px; }
    .bio-cpt-etiquette.is-porte .bio-cpt-ic { width: 28px; height: 28px; }
    .bio-cpt-etiquette.is-porte b { font-size: 20px; }
    .bio-cpt-etiquette.is-porte > span { flex: 1 1 auto; min-width: 0; }
    .bio-cpt-etiquette.is-porte small { white-space: normal; }
}
/* Petits téléphones (iPhone SE, Android d'entrée de gamme) : les deux portes tiennent dans le premier écran. */
@media (max-width: 380px) {
    .bio-cpt-scene { padding: 16px 12px 20px; }
    .bio-cpt-accueil .bio-cpt-kicker { display: none; }
    .bio-cpt .bio-cpt-titre { font-size: 24px; }
    .bio-cpt-sous { margin-top: 6px !important; font-size: 15px; }
    .bio-cpt-portes { gap: 10px; margin-top: 14px; }
    .bio-cpt a.bio-cpt-porte { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; min-height: 0; padding: 12px 12px 12px 10px; }
    .bio-cpt-porte-ill { width: 52px; height: 52px; border-radius: 16px; }
    .bio-cpt .bio-cpt-ill { width: 42px; height: 42px; }
    .bio-cpt-porte-titre { font-size: 18.5px; }
    .bio-cpt-porte-sous { font-size: 14.5px; }
    .bio-cpt-pastille { margin-top: 6px; font-size: 12.5px; line-height: 26px; }
    .bio-cpt-etiquette.is-porte { margin-top: 8px; padding: 5px 16px 5px 7px; gap: 8px; }
    .bio-cpt-etiquette.is-porte .bio-cpt-ic { width: 26px; height: 26px; }
    .bio-cpt-etiquette.is-porte b { font-size: 19px; }
    .bio-cpt-etiquette.is-porte small { font-size: 12px; }
    .bio-cpt-porte-fl { display: none; }
    .bio-cpt-google { margin-top: 14px; }
    .bio-cpt-etapes li { padding: 6px 7px 6px 6px; font-size: 12px; gap: 5px; }
    .bio-cpt-ticket { padding: 18px 14px 20px; }
}
@media (max-width: 899px) and (max-height: 700px) {
    .bio-cpt-accueil .bio-cpt-kicker { display: none; }
    .bio-cpt-accueil .bio-cpt-titre { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
    .bio-cpt a.bio-cpt-porte, .bio-cpt .bio-cpt-btn { transition: none !important; }
}