/* PalaoBreeZ — offres et contact (demandes de Sérilo du 07/10/2026) :
   encadré « G – 30 min », fenêtre « Comment ça marche », Tarifs à 4 formules, Nous contacter, Ma formule,
   paiement d'essai, limites de durée (création, salle). Échelle unique : --et (texte) et --eb (encadrés). */

/* ---------- Accueil : encadré « Gratuit jusqu'à 30 min » (G – 30 min) ---------- */
.g30-bloc { display: flex; flex-direction: column; align-items: stretch; gap: calc(12px * var(--eb)); max-width: calc(440px * var(--eb)); margin-top: calc(24px * var(--eb)); min-width: 0; }
/* « ▶ Lancer une palabre gratuite » (Sérilo, 07/10) : sous l'encadré, sans compte. */
.g30-lancer { display: inline-flex; align-items: center; justify-content: center; gap: calc(8px * var(--eb)); min-height: calc(46px * var(--eb)); padding: calc(8px * var(--eb)) calc(16px * var(--eb)); border-radius: var(--r); background: var(--cuivre); color: #fff; font-weight: 700; font-size: max(11px, calc(15px * var(--et))); text-align: center; line-height: 1.2; box-shadow: 0 8px 20px rgba(213, 74, 24, .22); }
.g30-lancer:hover { background: #B93D12; }
.g30-lancer:focus-visible { outline: 3px solid var(--baobab); outline-offset: 2px; }
.g30-lancer .ic { flex: none; }
.g30 { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(12px * var(--eb)); align-items: start; padding: calc(14px * var(--eb)) calc(16px * var(--eb)); background: var(--menthe); border: 1px solid var(--contour); border-radius: var(--r); color: var(--encre); }
.g30-ic { grid-row: span 3; width: calc(40px * var(--eb)); height: calc(40px * var(--eb)); border-radius: 50%; background: #fff; border: 1px solid var(--contour); color: var(--baobab); display: inline-flex; align-items: center; justify-content: center; }
.g30-titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 calc(6px * var(--eb)); font-size: max(11px, calc(15px * var(--et))); font-weight: 600; color: var(--baobab-fonce); line-height: 1.2; }
.g30-titre b { font-size: max(11px, calc(32px * var(--et))); font-weight: 800; letter-spacing: -.6px; color: var(--baobab); }
.g30-texte { margin-top: calc(4px * var(--eb)); font-size: max(11px, calc(13.5px * var(--et))); color: var(--encre-douce); line-height: 1.4; }
.g30-lien { margin-top: calc(6px * var(--eb)); font-size: max(11px, calc(13.5px * var(--et))); font-weight: 600; justify-self: start; }

/* Bureau large : trois colonnes (texte · encadré · aperçu), l'encadré au centre de l'espace libre. */
@media (min-width: 1340px) {
  .heros { grid-template-columns: minmax(0, calc(640px * var(--eb))) minmax(0, 1fr) auto; }
  .maquette-salle { grid-column: 3; grid-row: 1; }
  .g30-bloc { grid-column: 2; grid-row: 1; align-self: center; justify-self: center; width: min(100%, calc(232px * var(--eb))); margin: 0; }
  .g30 { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; row-gap: calc(4px * var(--eb)); padding: calc(18px * var(--eb)) calc(16px * var(--eb)); box-shadow: 0 10px 30px rgba(11, 74, 60, .10); }
  .g30-ic { grid-row: auto; }
  .g30-titre { flex-direction: column; align-items: center; }
  .g30-titre b { font-size: max(11px, calc(44px * var(--et))); line-height: 1; }
  .g30-lien { justify-self: center; }
}
/* 1280–1339 : l'espace libre est trop étroit, l'encadré passe sous le texte (aperçu à droite, sur deux rangées). */
@media (min-width: 1280px) and (max-width: 1339px) {
  .g30-bloc { grid-column: 1; grid-row: 2; }
  .maquette-salle { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- Fenêtre modale « Comment ça marche » ---------- */
body.modale-ouverte { overflow: hidden; }
.modale { border: 1px solid var(--contour); border-radius: var(--r); padding: 0; width: min(calc(1040px * var(--eb)), calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow: auto; background: var(--ivoire-page); color: var(--encre); box-shadow: 0 24px 70px rgba(16, 33, 58, .28); }
.modale::backdrop { background: rgba(16, 33, 58, .45); }
.modale-tete { display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--eb)); padding: calc(18px * var(--eb)) calc(22px * var(--eb)) 0; }
.modale-tete h2 { font-size: max(11px, calc(26px * var(--et))); font-weight: 700; letter-spacing: -.4px; color: #13213A; }
.modale-fermer { width: calc(44px * var(--eb)); height: calc(44px * var(--eb)); flex: none; border: 1px solid var(--contour); border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--encre); }
.modale-fermer:hover { border-color: var(--baobab); color: var(--baobab); }
.modale-fermer:focus-visible, .modale .btn:focus-visible, .modale a:focus-visible { outline: 3px solid var(--baobab); outline-offset: 2px; }
.cm-flux { list-style: none; margin: 0; padding: calc(22px * var(--eb)) calc(22px * var(--eb)) calc(20px * var(--eb)); display: grid; grid-template-columns: minmax(0, 1fr) calc(64px * var(--eb)) minmax(0, 1fr) calc(64px * var(--eb)) minmax(0, 1fr); align-items: stretch; }
/* Modèle dessiné par Sérilo : cartes arrondies à contour foncé, gros numéro. */
.cm-carte { display: flex; flex-direction: column; gap: calc(8px * var(--eb)); padding: calc(18px * var(--eb)) calc(18px * var(--eb)) calc(20px * var(--eb)); background: #fff; border: 2px solid var(--baobab-fonce); border-radius: 18px; min-width: 0; }
.cm-numero { font-size: max(11px, calc(54px * var(--et))); font-weight: 800; line-height: 1; color: var(--cuivre-fonce); letter-spacing: -1px; }
.cm-carte h3 { font-size: max(11px, calc(19px * var(--et))); font-weight: 700; color: #13213A; }
.cm-carte p { font-size: max(11px, calc(14.5px * var(--et))); color: var(--encre-douce); line-height: 1.45; }
.cm-fleche { display: flex; align-items: center; justify-content: center; color: var(--cuivre); }
.cm-fleche svg { width: calc(56px * var(--eb)); height: auto; }
.modale-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(14px * var(--eb)); padding: calc(16px * var(--eb)) calc(22px * var(--eb)) calc(22px * var(--eb)); border-top: 1px solid var(--contour); }
.cm-tarifs { flex: 1 1 calc(420px * var(--eb)); min-width: 0; font-size: max(11px, calc(14px * var(--et))); color: var(--encre-douce); line-height: 1.45; }
.cm-creer { width: auto; height: calc(52px * var(--eb)); padding: 0 calc(22px * var(--eb)); font-size: max(11px, calc(17px * var(--et))); flex: none; }

/* ---------- Tarifs : quatre formules sur une ligne en bureau ---------- */
.vitrine-large { max-width: calc(1240px * var(--eb)); }
.tarifs-grille.tarifs-quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tarif-carte.tarif-g30 { background: var(--menthe); }
.tarif-ou { margin-top: calc(4px * var(--eb)); font-size: max(11px, calc(13.5px * var(--et))); color: var(--encre-douce); }
.tarif-ou b { color: var(--encre); font-weight: 600; }
.tarif-modes { margin: calc(12px * var(--eb)) 0 0; border: 1px solid var(--contour); border-radius: 10px; background: #fff; }
.tarif-modes div { display: flex; justify-content: space-between; align-items: baseline; gap: calc(8px * var(--eb)); padding: calc(7px * var(--eb)) calc(10px * var(--eb)); font-size: max(11px, calc(13px * var(--et))); }
.tarif-modes div + div { border-top: 1px solid var(--contour); }
.tarif-modes dt { color: var(--gris); }
.tarif-modes dd { margin: 0; font-weight: 600; text-align: right; color: var(--encre); }
.tarifs-quatre .tarif-points { flex: 1 1 auto; align-content: start; }
.tarif-action { margin-top: calc(16px * var(--eb)); width: 100%; height: calc(42px * var(--eb)); }
@media (max-width: 1100px) { .tarifs-grille.tarifs-quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .tarifs-grille.tarifs-quatre { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Nous contacter ---------- */
.contact-grille { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: calc(16px * var(--eb)); margin-top: calc(24px * var(--eb)); align-items: start; }
.contact-form { display: flex; flex-direction: column; padding: calc(20px * var(--eb)) calc(24px * var(--eb)) calc(24px * var(--eb)); position: relative; }
.contact-form > .champ-label, .contact-duo .champ-label { margin-top: calc(14px * var(--eb)); }
.contact-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 calc(14px * var(--eb)); }
.contact-form .champ { background: #fff; }
.leurre { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.contact-profils { border: 0; padding: 0; margin: calc(14px * var(--eb)) 0 0; min-width: 0; }
.profils { display: flex; flex-wrap: wrap; gap: calc(8px * var(--eb)); }
.profil { position: relative; }
.profil input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.profil span { display: inline-flex; align-items: center; min-height: calc(40px * var(--eb)); padding: 0 calc(14px * var(--eb)); border: 1px solid var(--contour); border-radius: 20px; background: #fff; font-size: max(11px, calc(14px * var(--et))); cursor: pointer; }
.profil input:checked + span { background: var(--menthe); border-color: var(--baobab); color: var(--baobab-fonce); font-weight: 600; }
.profil input:focus-visible + span { outline: 3px solid var(--baobab); outline-offset: 2px; }
.contact-message { width: 100%; min-height: calc(150px * var(--eb)); padding: calc(10px * var(--eb)) calc(14px * var(--eb)); border: 1px solid var(--contour); border-radius: var(--r); background: #fff; resize: vertical; line-height: 1.45; font-size: max(11px, calc(15px * var(--et))); }
.contact-message:focus { outline: 0; border-color: var(--baobab); box-shadow: 0 0 0 3px rgba(11, 90, 70, .12); }
.contact-consentement { display: flex; gap: calc(10px * var(--eb)); align-items: flex-start; margin-top: calc(16px * var(--eb)); font-size: max(11px, calc(13.5px * var(--et))); color: var(--encre-douce); line-height: 1.45; cursor: pointer; }
.contact-consentement input, .case-declaration input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--baobab); }
.contact-envoyer { align-self: flex-start; margin-top: calc(18px * var(--eb)); height: calc(46px * var(--eb)); padding: 0 calc(24px * var(--eb)); }
.contact-aside { padding: calc(20px * var(--eb)) calc(22px * var(--eb)); background: var(--menthe-pale); }
.contact-aside h2 { font-size: max(11px, calc(18px * var(--et))); font-weight: 700; color: var(--baobab); }
.contact-aside ul { list-style: none; padding: 0; margin: calc(12px * var(--eb)) 0 0; display: grid; gap: calc(10px * var(--eb)); }
.contact-aside li { display: flex; gap: calc(8px * var(--eb)); align-items: flex-start; font-size: max(11px, calc(14px * var(--et))); color: var(--encre-douce); line-height: 1.4; }
.contact-aside .ic { color: var(--baobab); margin-top: 2px; }
.contact-tarifs { margin-top: calc(16px * var(--eb)); padding-top: calc(12px * var(--eb)); border-top: 1px solid var(--contour); font-size: max(11px, calc(14px * var(--et))); }
.contact-merci { display: flex; gap: calc(16px * var(--eb)); align-items: flex-start; margin-top: calc(24px * var(--eb)); padding: calc(22px * var(--eb)) calc(24px * var(--eb)); }
.contact-merci-ic { width: calc(52px * var(--eb)); height: calc(52px * var(--eb)); flex: none; border-radius: 50%; background: var(--menthe); color: var(--baobab); display: inline-flex; align-items: center; justify-content: center; }
.contact-merci h2 { font-size: max(11px, calc(20px * var(--et))); font-weight: 700; }
.contact-merci p { margin-top: calc(6px * var(--eb)); color: var(--encre-douce); }
.contact-merci-liens { display: flex; flex-wrap: wrap; gap: calc(10px * var(--eb)); margin-top: calc(16px * var(--eb)) !important; }
@media (max-width: 900px) { .contact-grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .contact-duo { grid-template-columns: minmax(0, 1fr); }
  .contact-form { padding: calc(16px * var(--eb)) calc(16px * var(--eb)) calc(20px * var(--eb)); }
  .contact-envoyer { align-self: stretch; }
  .contact-merci { flex-direction: column; }
}

/* ---------- Déclaration « famille / association » (inscription, Ma formule) ---------- */
.case-declaration { display: flex; gap: calc(10px * var(--eb)); align-items: flex-start; margin-top: calc(14px * var(--eb)); cursor: pointer; font-size: max(11px, calc(14px * var(--et))); }
.case-declaration b { display: block; font-weight: 600; }
.case-declaration small { display: block; margin-top: 2px; font-size: max(11px, calc(12.5px * var(--et))); color: var(--gris); line-height: 1.4; }

/* ---------- Ma formule ---------- */
.formule-page { padding-top: calc(12px * var(--eb)); display: grid; gap: calc(16px * var(--eb)); max-width: calc(1100px * var(--eb)); }
.formule-actuelle { padding: calc(20px * var(--eb)) calc(22px * var(--eb)); }
.formule-actuelle-tete { display: flex; gap: calc(14px * var(--eb)); align-items: center; }
.formule-sur { font-size: max(11px, calc(12.5px * var(--et))); color: var(--gris); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.formule-actuelle h1 { font-size: max(11px, calc(26px * var(--et))); font-weight: 700; color: var(--baobab); }
.formule-echeance { font-size: max(11px, calc(14.5px * var(--et))); color: var(--encre-douce); }
.formule-droits { list-style: none; padding: 0; margin: calc(14px * var(--eb)) 0 0; display: flex; flex-wrap: wrap; gap: calc(8px * var(--eb)) calc(18px * var(--eb)); }
.formule-droits li { display: inline-flex; gap: calc(6px * var(--eb)); align-items: center; font-size: max(11px, calc(14px * var(--et))); color: var(--encre-douce); }
.formule-droits .ic { color: var(--baobab); }
.formule-declaration { margin-top: calc(16px * var(--eb)); padding-top: calc(4px * var(--eb)); border-top: 1px solid var(--contour); }
.formule-choix h2, .formule-historique h2 { font-size: max(11px, calc(20px * var(--et))); font-weight: 700; color: #13213A; }
.formule-essai-note { display: inline-flex; gap: calc(6px * var(--eb)); align-items: center; margin-top: calc(6px * var(--eb)); padding: calc(4px * var(--eb)) calc(10px * var(--eb)); border: 1px dashed #E9A12B; border-radius: 8px; background: #FFF7E6; color: #7A4B00; font-size: max(11px, calc(13px * var(--et))); font-weight: 600; }
.formule-offres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(14px * var(--eb)); margin-top: calc(12px * var(--eb)); }
.formule-offre { padding: calc(18px * var(--eb)) calc(20px * var(--eb)); display: flex; flex-direction: column; }
.formule-offre-active { border: 2px solid var(--baobab); }
.formule-offre h3 { font-size: max(11px, calc(18px * var(--et))); font-weight: 700; color: var(--baobab); }
.formule-offre .formule-droits { flex: 1 1 auto; align-content: flex-start; }
.formule-paiements { display: flex; flex-wrap: wrap; gap: calc(8px * var(--eb)); margin-top: calc(16px * var(--eb)); }
.formule-paiements .btn { flex: 1 1 calc(220px * var(--eb)); min-width: 0; height: auto; min-height: calc(44px * var(--eb)); padding: calc(8px * var(--eb)) calc(14px * var(--eb)); white-space: normal; text-align: center; }
.formule-renouveler, .formule-mention, .formule-vide { margin-top: calc(10px * var(--eb)); font-size: max(11px, calc(13px * var(--et))); color: var(--gris); }
.formule-historique { padding: calc(18px * var(--eb)) calc(20px * var(--eb)); overflow-x: auto; }
.tableau-simple { width: 100%; margin-top: calc(10px * var(--eb)); border-collapse: collapse; border: 1px solid var(--contour); font-size: max(11px, calc(13.5px * var(--et))); }
.tableau-simple th, .tableau-simple td { border: 1px solid var(--contour); padding: calc(8px * var(--eb)) calc(10px * var(--eb)); text-align: left; vertical-align: top; }
.tableau-simple th { background: var(--menthe-pale); font-weight: 600; }
@media (max-width: 900px) { .formule-offres { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Paiement d'essai (prestataire simulé) ---------- */
.essai-bandeau { display: flex; gap: calc(8px * var(--eb)); align-items: center; justify-content: center; margin-bottom: calc(14px * var(--eb)); padding: calc(10px * var(--eb)) calc(14px * var(--eb)); border: 2px dashed #E9A12B; border-radius: 10px; background: #FFF7E6; color: #7A4B00; font-weight: 800; letter-spacing: .05em; font-size: max(11px, calc(15px * var(--et))); }
.essai-recap { margin: calc(16px * var(--eb)) 0; border: 1px solid var(--contour); border-radius: var(--r); }
.essai-recap div { display: flex; justify-content: space-between; gap: calc(10px * var(--eb)); padding: calc(9px * var(--eb)) calc(12px * var(--eb)); font-size: max(11px, calc(14px * var(--et))); }
.essai-recap div + div { border-top: 1px solid var(--contour); }
.essai-recap dt { color: var(--gris); }
.essai-recap dd { margin: 0; font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.paiement-essai form + form { margin-top: calc(8px * var(--eb)); }
.essai-etat { margin-top: calc(10px * var(--eb)); }

/* ---------- Créer une palabre : limites de la formule ---------- */
.format-carte.format-reserve { opacity: .62; cursor: not-allowed; }
.format-formule { display: block; margin-top: calc(4px * var(--eb)); font-style: normal; font-weight: 600; color: var(--cuivre-fonce); }
.aide-formule .lien { font-weight: 600; }

/* ---------- Salle : compte à rebours et fin imposée (formule gratuite) ---------- */
.salle-echeance { display: inline-flex; align-items: center; height: calc(26px * var(--eb)); margin-left: calc(8px * var(--eb)); padding: 0 calc(10px * var(--eb)); border: 1px solid #F3B48F; border-radius: 13px; background: #FDF0E8; color: #9A3412; font-weight: 700; font-size: max(11px, calc(13px * var(--et))); font-variant-numeric: tabular-nums; white-space: nowrap; }
.salle-echeance[hidden] { display: none; }
.salle-echeance.urgent, .salle-echeance.fini { background: var(--alerte); border-color: var(--alerte); color: #fff; }
.salle-fin-imposee { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 50, 44, .74); }
.salle-fin-imposee[hidden] { display: none; }
.fin-imposee-carte { width: min(calc(460px * var(--eb)), 100%); padding: calc(26px * var(--eb)) calc(24px * var(--eb)); background: #fff; border: 1px solid var(--contour); border-radius: var(--r); text-align: center; color: var(--encre); }
.fin-imposee-ic { width: calc(52px * var(--eb)); height: calc(52px * var(--eb)); margin: 0 auto calc(10px * var(--eb)); border-radius: 50%; background: var(--cuivre-pale); color: var(--cuivre-fonce); display: flex; align-items: center; justify-content: center; }
.fin-imposee-carte h2 { font-size: max(11px, calc(22px * var(--et))); font-weight: 700; }
.fin-imposee-carte p { margin: calc(8px * var(--eb)) 0 calc(18px * var(--eb)); color: var(--encre-douce); line-height: 1.45; }
.fin-imposee-actions { display: flex; flex-wrap: wrap; gap: calc(8px * var(--eb)); justify-content: center; }

/* ---------- Téléphone ---------- */
@media (max-width: 700px) {
  .g30-bloc { margin-top: calc(20px * var(--eb)); max-width: none; }
  .g30-lancer { min-height: 48px; }
  .cm-flux { grid-template-columns: minmax(0, 1fr); padding: calc(16px * var(--eb)); row-gap: 0; }
  .cm-fleche { height: calc(48px * var(--eb)); }
  .cm-fleche svg { transform: rotate(90deg); width: calc(44px * var(--eb)); }
  .modale-tete { padding: calc(14px * var(--eb)) calc(16px * var(--eb)) 0; }
  .modale-pied { padding: calc(14px * var(--eb)) calc(16px * var(--eb)) calc(18px * var(--eb)); }
  .cm-creer { width: 100%; }
  .salle-echeance { margin-left: 0; }
}

/* ---------- Choix du moyen de paiement (07/10/2026) : carte (Stripe) / Mobile Money (FedaPay) ---------- */
.paiement-canaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(calc(300px * var(--eb)), 100%), 1fr)); gap: calc(14px * var(--eb)); }
.paiement-canal { padding: calc(18px * var(--eb)) calc(20px * var(--eb)); display: flex; flex-direction: column; gap: calc(8px * var(--eb)); min-width: 0; }
.paiement-canal h2 { font-size: max(11px, calc(19px * var(--et))); font-weight: 700; color: var(--baobab); }
.paiement-canal p { font-size: max(11px, calc(13.5px * var(--et))); color: var(--encre-douce); overflow-wrap: anywhere; }
.paiement-canal .paiement-montant b { font-size: max(11px, calc(22px * var(--et))); color: var(--encre); }
.paiement-canal .paiement-detail { flex: 1 1 auto; color: var(--gris); }
.paiement-canal .btn { margin-top: calc(6px * var(--eb)); min-height: calc(44px * var(--eb)); height: auto; }
.formule-abonnement { margin-top: calc(14px * var(--eb)); padding: calc(12px * var(--eb)) calc(14px * var(--eb)); border: 1px solid var(--contour); border-radius: var(--r); font-size: max(11px, calc(13.5px * var(--et))); }
.formule-abonnement.suspendue { border-color: #F1C7B4; background: #FDF1E8; color: #7A2C0B; }
.formule-abonnement .barre { display: block; height: calc(8px * var(--eb)); border-radius: 99px; background: var(--ivoire); border: 1px solid var(--contour); margin: calc(8px * var(--eb)) 0; overflow: hidden; }
.formule-abonnement .barre span { display: block; height: 100%; background: var(--baobab); }
.formule-abonnement .btn { margin-top: calc(8px * var(--eb)); }

/* ---------- Palabre gratuite sans compte (07/10/2026) ---------- */
.sc-form .champ-label .optionnel { font-weight: 400; color: var(--gris); }
.sc-modes, .sc-quand { border: 0; padding: 0; margin: 0; min-width: 0; }
.sc-modes-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(calc(170px * var(--eb)), 100%), 1fr)); gap: calc(8px * var(--eb)); }
.sc-mode, .sc-option { display: flex; gap: calc(10px * var(--eb)); align-items: flex-start; padding: calc(10px * var(--eb)) calc(12px * var(--eb)); border: 1px solid var(--contour); border-radius: var(--r); background: #fff; cursor: pointer; min-width: 0; }
.sc-option { margin-top: calc(8px * var(--eb)); }
.sc-mode input, .sc-option input { margin: 3px 0 0; accent-color: var(--baobab); flex: none; width: 16px; height: 16px; }
.sc-mode span, .sc-option span { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: max(11px, calc(14px * var(--et))); }
.sc-mode b .ic, .sc-mode > span > .ic { vertical-align: -4px; }
.sc-mode small, .sc-option small { color: var(--gris); font-size: max(11px, calc(12.5px * var(--et))); line-height: 1.35; }
.sc-mode:has(input:checked), .sc-option:has(input:checked) { border-color: var(--baobab); box-shadow: 0 0 0 2px rgba(11, 90, 70, .15); }
.sc-grise { background: #F4F5F6; color: var(--gris); cursor: not-allowed; border-style: dashed; }
.sc-grise b { color: var(--gris); }
.sc-enreg { margin-top: calc(14px * var(--eb)); }
.sc-date { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 calc(14px * var(--eb)); }
.sc-date[hidden] { display: none; }
.sc-hote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16px * var(--eb)); margin-top: calc(20px * var(--eb)); align-items: start; }
.sc-bloc { padding: calc(20px * var(--eb)) calc(22px * var(--eb)); display: flex; flex-direction: column; gap: calc(12px * var(--eb)); min-width: 0; }
.sc-bloc h2 { display: flex; align-items: center; gap: calc(10px * var(--eb)); font-size: max(11px, calc(19px * var(--et))); font-weight: 700; color: var(--baobab); }
.sc-bloc-hote { border: 2px solid var(--baobab); }
.sc-alerte { display: flex; gap: calc(8px * var(--eb)); align-items: flex-start; padding: calc(10px * var(--eb)) calc(12px * var(--eb)); border: 1px solid #F1C7B4; border-radius: var(--r); background: #FDF1E8; color: #7A2C0B; font-size: max(11px, calc(13.5px * var(--et))); }
.sc-bloc .lien-champ { min-width: 0; }
.sc-bloc .lien-url { overflow-wrap: anywhere; word-break: break-all; min-width: 0; }
.sc-entrer { min-height: calc(48px * var(--eb)); height: auto; width: 100%; }
.sc-note, .sc-ferme { font-size: max(11px, calc(13px * var(--et))); color: var(--gris); }
.sc-qr { width: calc(132px * var(--eb)); height: calc(132px * var(--eb)); padding: 6px; border: 1px solid var(--contour); border-radius: var(--r); background: #fff; }
.sc-qr svg { width: 100%; height: 100%; display: block; }
.sc-compte { margin-top: calc(16px * var(--eb)); display: flex; gap: calc(8px * var(--eb)); align-items: flex-start; flex-wrap: wrap; font-size: max(11px, calc(14px * var(--et))); color: var(--encre-douce); }
@media (max-width: 900px) { .sc-hote { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .sc-date { grid-template-columns: minmax(0, 1fr); } }
.sc-bloc .lien-url { height: auto; min-height: calc(32px * var(--eb)); padding-top: calc(6px * var(--eb)); padding-bottom: calc(6px * var(--eb)); }