/**
 * Police Archivo embarquée dans le module (mêmes fichiers que ceux
 * déjà livrés avec Easy MultiPromo Pro et OnePage Order Pro). Remplace
 * l'appel direct à "Inter" chez Google Fonts sur les pages vues par les
 * clients : plus aucune requête externe depuis la boutique.
 * Voir views/fonts/ATTRIBUTION.txt et LICENSE-OFL.txt.
 */
@font-face{font-family:"Archivo";src:url("../fonts/archivo-v25-latin-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-v25-latin-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-v25-latin-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-v25-latin-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-v25-latin-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap;}

.oco-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}
.oco-overlay.active { display: flex; }

.oco-modal {
    width: 100%;
    max-width: 470px;
    border-radius: 32px;
    padding: 38px;
    border: 1px solid rgba(255,255,255,0.06);
    position: relative;
    animation: ocoSlideIn 0.25s ease;
    font-family: Archivo, sans-serif;
}

@keyframes ocoSlideIn {
    from { transform: translateY(30px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.oco-modal-close {
    position: absolute;
    top: 16px; right: 20px;
    background: none; border: none;
    font-size: 24px; cursor: pointer;
    line-height: 1; padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.2s;
}
.oco-modal-close:hover { background: rgba(255,255,255,0.08); }

.oco-modal h2 {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: 10px;
}
.oco-modal h2 span { color: var(--oco-accent); }

.oco-modal .oco-subtitle {
    font-size: 15px;
    margin-bottom: 32px;
}

.oco-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 22px;
    padding: 22px;
    margin-bottom: 14px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.08);
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    text-align: left;
    width: 100%;
    font-family: Archivo, sans-serif;
}
.oco-card:hover {
    transform: translateY(-4px);
    border-color: var(--oco-accent);
    box-shadow: 0 12px 36px rgba(0,0,0,0.3);
}

.oco-card-left { display: flex; align-items: center; gap: 18px; }

.oco-card-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.07);
}

.oco-card-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.oco-card-desc  { font-size: 14px; }

.oco-card-arrow { font-size: 22px; opacity: 0.5; transition: opacity 0.2s, transform 0.2s; }
.oco-card:hover .oco-card-arrow { opacity: 1; transform: translateX(5px); }

.oco-account-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 22px;
    padding: 20px 22px;
    margin-top: 6px;
    border: 1px solid rgba(255,255,255,0.06);
}
.oco-account-title { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.oco-account-desc  { font-size: 14px; }

.oco-account-btn {
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    margin-left: 16px;
    font-family: Archivo, sans-serif;
    transition: transform 0.2s;
}
.oco-account-btn:hover { transform: scale(1.05); }

.oco-footer-band {
    margin-top: 24px;
    background: #000;
    border-radius: 12px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.oco-footer-dev { color: #555; font-size: 11px; letter-spacing: 0.05em; }
.oco-fcs { display: flex; align-items: center; gap: 7px; }
.oco-fcs-letters { font-size: 17px; font-weight: 800; font-style: italic; letter-spacing: -1px; }
.oco-fcs-f { color: #fff; }
.oco-fcs-c, .oco-fcs-s { color: #2563eb; }
.oco-fcs-sep { width: 1px; height: 18px; background: #333; }
.oco-fcs-name { display: flex; flex-direction: column; line-height: 1.3; }
.oco-fcs-n1 { color: #fff; font-size: 8px; font-weight: 600; letter-spacing: 0.12em; }
.oco-fcs-n2 { color: #2563eb; font-size: 8px; font-weight: 600; letter-spacing: 0.2em; }

.oco-phone-step { display: none; }
.oco-phone-step.active { display: block; }
.oco-phone-input-wrap { margin: 18px 0; }
.oco-phone-input-wrap input {
    width: 100%;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.15);
    font-size: 18px;
    font-weight: 600;
    font-family: Archivo, sans-serif;
    outline: none;
    background: rgba(255,255,255,0.05);
    color: #fff;
    letter-spacing: 2px;
}
.oco-phone-input-wrap input:focus { border-color: var(--oco-accent); }

.oco-btn-submit {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: Archivo, sans-serif;
    transition: transform 0.2s;
}
.oco-btn-submit:hover { transform: scale(1.02); }

.oco-back-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    margin-bottom: 16px;
    padding: 0;
    font-family: Archivo, sans-serif;
    opacity: 0.6;
    display: flex; align-items: center; gap: 6px;
}
.oco-back-btn:hover { opacity: 1; }

.oco-msg-denied {
    border-radius: 14px;
    padding: 16px 18px;
    font-size: 14px;
    line-height: 1.6;
    border: 1px solid rgba(255,150,0,0.3);
    background: rgba(255,150,0,0.08);
    color: #f59e0b;
    margin-top: 8px;
}

.oco-loading { text-align: center; padding: 20px 0; font-size: 14px; opacity: 0.7; }

.oco-float-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9998;
    border: none;
    padding: 14px 22px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: Archivo, sans-serif;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    transition: transform 0.2s;
    color: #fff;
}
.oco-float-btn:hover { transform: scale(1.05); }

.oco-btn-wrap { margin: 14px 0; }
.oco-btn-wrap button { font-family: Archivo, sans-serif; }

@media (max-width: 520px) {
    .oco-modal { padding: 24px 20px; border-radius: 24px; }
    .oco-modal h2 { font-size: 26px; }
    .oco-card { padding: 16px; }
    .oco-card-icon { width: 46px; height: 46px; font-size: 22px; }
    .oco-card-title { font-size: 16px; }
    .oco-account-row { flex-direction: column; align-items: flex-start; gap: 12px; }
    .oco-account-btn { margin-left: 0; width: 100%; }
}


/* ==========================================================
   Bouton Fast Order — 6 styles, toutes couleurs configurables
   Zone 1 : bloc principal        --fo-1bg / --fo-1fg
   Zone 2 : pastille, bandeau bas --fo-2bg / --fo-2fg
   Ligne 3 sur le bloc principal  --fo-3c
   Bordures et filets             --fo-bd
   ========================================================== */
.fo-btn-reset{
  background:none;border:none;padding:0;margin:0;cursor:pointer;width:100%;
  display:block;text-align:left;font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:-.01em;-webkit-tap-highlight-color:transparent;
  --fo-1bg:#000000; --fo-1fg:#FFFFFF;
  --fo-2bg:#FFFFFF; --fo-2fg:#000000;
  --fo-3c:#B3B3B3;  --fo-bd:#000000;
}
.fo-b{display:block;width:100%;transition:transform .12s;}
.fo-btn-reset:active .fo-b{transform:scale(.985);}
.fo-b .fo-l1{display:block;}
.fo-b .fo-l3{display:block;}
.fo-chk{
  width:16px;height:16px;flex:0 0 auto;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;font-size:9px;font-weight:900;
  line-height:1;margin:0 7px 0 0;
  background:var(--fo-2fg);color:var(--fo-2bg);
}

/* 1. Bloc plein */
.fo-b1{background:var(--fo-1bg);color:var(--fo-1fg);border-radius:16px;padding:18px 20px;text-align:center;}
.fo-b1 .fo-l1{font-size:19px;font-weight:800;line-height:1.2;}
.fo-b1 .fo-l2{
  display:flex;width:-moz-fit-content;width:fit-content;
  align-items:center;justify-content:center;margin:10px auto 8px;
  background:var(--fo-2bg);color:var(--fo-2fg);
  border-radius:999px;padding:7px 14px;font-size:12px;font-weight:700;line-height:1;
}
.fo-b1 .fo-l3{font-size:11.5px;font-weight:500;line-height:1.3;color:var(--fo-3c);}

/* 2. Contour fin */
.fo-b2{
  background:var(--fo-1bg);color:var(--fo-1fg);
  border:1.5px solid var(--fo-bd);border-radius:16px;padding:16px 18px;
  display:flex;align-items:center;gap:14px;transition:background .15s,color .15s;
}
.fo-btn-reset:hover .fo-b2{background:var(--fo-2bg);color:var(--fo-2fg);}
.fo-b2-txt{flex:1;min-width:0;}
.fo-b2 .fo-l1{font-size:17px;font-weight:800;line-height:1.2;}
.fo-b2 .fo-l2{display:block;font-size:12.5px;font-weight:600;margin-top:3px;}
.fo-b2 .fo-l3{font-size:11px;font-weight:500;margin-top:5px;color:var(--fo-3c);}
.fo-b2-arrow{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;
}

/* 3. Deux étages */
.fo-b3{border-radius:16px;overflow:hidden;text-align:center;}
.fo-b3-top{display:block;background:var(--fo-1bg);color:var(--fo-1fg);padding:16px 18px 14px;}
.fo-b3 .fo-l1{font-size:19px;font-weight:800;line-height:1.15;}
.fo-b3 .fo-l2{display:block;font-size:12px;font-weight:500;color:var(--fo-3c);margin-top:4px;}
.fo-b3-bot{
  display:flex;align-items:center;justify-content:center;gap:7px;
  background:var(--fo-2bg);color:var(--fo-2fg);padding:10px 18px;font-size:11.5px;font-weight:700;
}
.fo-dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;}

/* 4. Barre avec icône */
.fo-b4{
  background:var(--fo-1bg);color:var(--fo-1fg);
  border-radius:14px;padding:15px 18px;display:flex;align-items:center;gap:14px;
}
.fo-b4-icon{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;
  background:var(--fo-2bg);color:var(--fo-2fg);
  display:flex;align-items:center;justify-content:center;
}
.fo-b4-icon svg{width:20px;height:20px;}
.fo-b4-txt{flex:1;min-width:0;}
.fo-b4 .fo-l1{font-size:16.5px;font-weight:800;line-height:1.2;}
.fo-b4 .fo-l2{display:block;font-size:12px;font-weight:600;margin-top:2px;}
.fo-b4 .fo-l3{font-size:10.5px;font-weight:500;margin-top:3px;color:var(--fo-3c);}

/* 5. Inversé */
.fo-b5{background:var(--fo-1bg);color:var(--fo-1fg);border-radius:16px;padding:17px 20px;text-align:center;}
.fo-b5 .fo-l1{font-size:19px;font-weight:800;line-height:1.15;}
.fo-b5 .fo-l2{
  display:flex;width:-moz-fit-content;width:fit-content;
  align-items:center;justify-content:center;margin:9px auto 7px;
  background:var(--fo-2bg);color:var(--fo-2fg);
  border-radius:999px;padding:6px 13px;font-size:11.5px;font-weight:700;line-height:1;
}
.fo-b5 .fo-l3{font-size:11.5px;font-weight:500;color:var(--fo-3c);}

/* 6. Aligné à gauche */
.fo-b6{background:var(--fo-1bg);color:var(--fo-1fg);border-radius:16px;padding:17px 20px;}
.fo-eyebrow{
  display:block;font-size:10px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fo-3c);margin-bottom:7px;
}
.fo-b6 .fo-l1{font-size:21px;font-weight:800;line-height:1.1;}
.fo-b6 .fo-l3{
  display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--fo-bd);font-size:11.5px;font-weight:600;color:var(--fo-3c);
}