/* =============================================================================
   regie.css — espace annonceur SimplyCell (regie.simplycell.fr)
   -----------------------------------------------------------------------------
   Autonome, comme site/ : ce sous-domaine ne sert QUE le dossier regie/, il n'a
   donc pas accès à /css/mc-ui.css. On reprend la même identité que le funnel
   (inscription.php, espace-abonnement.php) : Inter + bleu ardoise, cartes
   sobres — un annonceur doit reconnaître SimplyCell, pas découvrir un autre
   produit.
   ============================================================================= */

:root{
  --rg-primary:#2563eb; --rg-primary-d:#1d4ed8;
  --rg-ink:#16233b; --rg-ink-soft:#334155; --rg-muted:#64748b; --rg-label:#94a3b8;
  --rg-line:#e2e8f0; --rg-line-soft:#f1f5f9; --rg-bg:#f5f7fa; --rg-card:#fff;
  --rg-green:#16a34a; --rg-amber:#d97706; --rg-red:#dc2626;
  --rg-r:14px; --rg-r-sm:9px;
  --rg-sh:0 1px 2px rgba(15,24,38,.05); --rg-sh-lg:0 12px 34px rgba(15,24,38,.10);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--rg-bg); color:var(--rg-ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{ color:var(--rg-primary); }

/* ---- Barre haute ---------------------------------------------------------- */
.rg-top{ background:var(--rg-ink); color:#fff; }
.rg-top__in{ max-width:1080px; margin:0 auto; padding:11px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.rg-brand{ display:flex; align-items:center; gap:11px; color:#fff; text-decoration:none; }
.rg-brand img{ height:34px; width:auto; display:block; }
/* Le filet vertical sépare la marque de la mention d'espace sans ajouter de
   mot : « SimplyCell | Espace annonceur » se lit d'un coup. */
.rg-brand__sub{ font-size:12px; font-weight:600; color:#8fa0ba; letter-spacing:.01em;
                padding-left:11px; border-left:1px solid rgba(255,255,255,.18); }
.rg-top nav{ margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.rg-top nav a{ color:#c7d2e4; text-decoration:none; font-size:13px; font-weight:600; padding:7px 12px; border-radius:8px; }
.rg-top nav a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.rg-top nav a.on{ background:rgba(255,255,255,.12); color:#fff; }
.rg-top nav a.rg-top__cta{ background:var(--rg-primary); color:#fff; }
.rg-top nav a.rg-top__cta:hover{ background:var(--rg-primary-d); }
@media (max-width:520px){
  .rg-brand__sub{ display:none; }   /* la barre déborderait sur un téléphone */
}

/* ---- Structure ------------------------------------------------------------ */
.rg-wrap{ max-width:1080px; margin:0 auto; padding:26px 20px 60px; }
.rg-narrow{ max-width:520px; }
.rg-h1{ font-size:23px; font-weight:800; letter-spacing:-.025em; margin:0 0 6px; line-height:1.2; }
.rg-lede{ font-size:14px; color:var(--rg-muted); margin:0 0 22px; line-height:1.6; }

.rg-card{ background:var(--rg-card); border:1px solid var(--rg-line); border-radius:var(--rg-r);
          box-shadow:var(--rg-sh); padding:22px; }
.rg-card + .rg-card{ margin-top:14px; }
.rg-card__t{ font-size:14px; font-weight:700; margin:0 0 4px; letter-spacing:-.01em; }
.rg-card__d{ font-size:13px; color:var(--rg-muted); margin:0 0 16px; line-height:1.55; }

/* ---- Formulaire ----------------------------------------------------------- */
.rg-field{ margin-bottom:14px; }
.rg-field label{ display:block; font-size:12.5px; font-weight:700; color:var(--rg-ink-soft); margin-bottom:5px; }
.rg-field .rg-hint{ font-size:11.5px; color:var(--rg-label); font-weight:500; margin-top:4px; }
.rg-input{
  width:100%; border:1px solid var(--rg-line); border-radius:var(--rg-r-sm); background:#fff;
  /* 16px minimum : sous ce seuil, iOS zoome à la saisie et casse la mise en page. */
  padding:11px 13px; font-size:16px; font-family:inherit; color:var(--rg-ink); transition:border-color .15s, box-shadow .15s;
}
.rg-input:focus{ outline:none; border-color:var(--rg-primary); box-shadow:0 0 0 3px rgba(37,99,235,.13); }
.rg-input::placeholder{ color:#b6bfcc; }
.rg-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:560px){ .rg-row{ grid-template-columns:1fr; } }

.rg-check{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--rg-ink-soft); line-height:1.5; margin-bottom:12px; }
.rg-check input{ width:17px; height:17px; margin:2px 0 0; flex:0 0 auto; accent-color:var(--rg-primary); }

.rg-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
         border:1px solid var(--rg-primary); background:var(--rg-primary); color:#fff;
         font:inherit; font-size:15px; font-weight:700; padding:12px 18px; border-radius:var(--rg-r-sm);
         cursor:pointer; transition:background-color .15s; text-decoration:none; }
.rg-btn:hover{ background:var(--rg-primary-d); border-color:var(--rg-primary-d); color:#fff; }
.rg-btn:disabled{ opacity:.6; cursor:progress; }
.rg-btn--ghost{ background:#fff; color:var(--rg-ink-soft); border-color:#cbd5e1; }
.rg-btn--ghost:hover{ background:#f8fafc; color:var(--rg-ink); border-color:#94a3b8; }
.rg-btn--auto{ width:auto; }

.rg-alt{ text-align:center; font-size:13px; color:var(--rg-muted); margin-top:16px; }

/* Champ mot de passe avec bouton afficher/masquer */
.rg-pw{ position:relative; }
.rg-pw .rg-input{ padding-right:46px; }
.rg-pw button{ position:absolute; right:6px; top:50%; transform:translateY(-50%); border:none; background:none;
               color:var(--rg-muted); cursor:pointer; padding:8px; font-size:13px; font-family:inherit; }
.rg-meter{ height:4px; border-radius:4px; background:var(--rg-line); margin-top:7px; overflow:hidden; }
.rg-meter i{ display:block; height:100%; width:0; background:var(--rg-red); transition:width .2s, background-color .2s; }

/* ---- Messages ------------------------------------------------------------- */
.rg-msg{ border-radius:var(--rg-r-sm); padding:11px 14px; font-size:13px; line-height:1.5; margin-bottom:16px; display:none; }
.rg-msg.on{ display:block; }
.rg-msg--err{ background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
.rg-msg--ok{ background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; }
.rg-msg--info{ background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; }

/* ---- État du compte ------------------------------------------------------- */
.rg-state{ display:flex; gap:14px; align-items:flex-start; border-radius:var(--rg-r); padding:18px 20px; margin-bottom:16px; }
.rg-state__ic{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
               font-size:19px; flex:0 0 auto; }
.rg-state__t{ font-size:15px; font-weight:700; letter-spacing:-.01em; }
.rg-state__d{ font-size:13px; line-height:1.55; margin-top:3px; }
.rg-state--wait{ background:#fffbeb; border:1px solid #fde68a; color:#78350f; }
.rg-state--wait .rg-state__ic{ background:#fef3c7; color:var(--rg-amber); }
.rg-state--ok{ background:#f0fdf4; border:1px solid #bbf7d0; color:#14532d; }
.rg-state--ok .rg-state__ic{ background:#dcfce7; color:var(--rg-green); }
.rg-state--stop{ background:#fef2f2; border:1px solid #fecaca; color:#7f1d1d; }
.rg-state--stop .rg-state__ic{ background:#fee2e2; color:var(--rg-red); }

/* ---- Divers --------------------------------------------------------------- */
.rg-kv{ display:grid; grid-template-columns:auto 1fr; gap:6px 18px; font-size:13px; }
.rg-kv dt{ color:var(--rg-muted); }
.rg-kv dd{ margin:0; font-weight:600; color:var(--rg-ink-soft); }
.rg-soon{ border:1px dashed var(--rg-line); border-radius:var(--rg-r); padding:26px 20px; text-align:center;
          color:var(--rg-muted); font-size:13.5px; line-height:1.6; background:#fcfdfe; }
.rg-soon b{ color:var(--rg-ink-soft); display:block; font-size:14px; margin-bottom:4px; }
.rg-tarif{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; justify-content:center; }
.rg-tarif span{ background:#eff6ff; color:var(--rg-primary); border:1px solid #bfdbfe; border-radius:999px;
                padding:5px 13px; font-size:12.5px; font-weight:700; }

.rg-foot{ max-width:1080px; margin:0 auto; padding:22px 20px 34px; font-size:12px; color:var(--rg-label); line-height:1.6; }
.rg-foot a{ color:var(--rg-muted); text-decoration:none; }
.rg-foot a:hover{ text-decoration:underline; }

/* =============================================================================
   PAGE D'ACCUEIL PUBLIQUE (index.php)
   -----------------------------------------------------------------------------
   Un fournisseur qui arrive ici ne sait pas ce qu'est SimplyCell. La page doit
   répondre à trois questions avant tout formulaire : à qui je parle, ce que
   j'y gagne, ce que ça coûte. D'où la structure ci-dessous.
   ============================================================================= */

.rg-hero{ background:linear-gradient(160deg,#16233b 0%,#1e2f4d 60%,#24406e 100%); color:#fff; }
.rg-hero__in{ max-width:1080px; margin:0 auto; padding:52px 20px 56px; display:grid;
              grid-template-columns:1.15fr .85fr; gap:38px; align-items:center; }
.rg-hero h1{ font-size:clamp(26px,3.6vw,38px); font-weight:800; letter-spacing:-.03em;
             line-height:1.15; margin:0 0 14px; }
.rg-hero h1 em{ font-style:normal; color:#93c5fd; }
.rg-hero p{ font-size:15.5px; line-height:1.65; color:#c7d2e4; margin:0 0 22px; max-width:52ch; }
.rg-hero__btns{ display:flex; gap:10px; flex-wrap:wrap; }
.rg-hero .rg-btn{ width:auto; }
.rg-hero .rg-btn--ghost{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.26); }
.rg-hero .rg-btn--ghost:hover{ background:rgba(255,255,255,.18); color:#fff; }
.rg-hero__note{ font-size:12.5px; color:#8fa0ba; margin-top:14px; }

/* Aperçu : une carte d'offre telle qu'elle apparaît vraiment côté client.
   Montrer le produit vaut mieux que le décrire. */
.rg-demo{ background:#fff; border-radius:14px; box-shadow:0 22px 50px rgba(0,0,0,.34); overflow:hidden;
          transform:rotate(-1.2deg); }
.rg-demo__vis{ height:104px; background:linear-gradient(135deg,#eff6ff,#dbeafe); position:relative;
               display:flex; align-items:center; justify-content:center; }
.rg-demo__vis span.ic{ font-size:34px; }
.rg-demo__flag{ position:absolute; left:10px; top:10px; background:#fff; color:#16233b; font-size:11.5px;
                font-weight:800; padding:4px 10px; border-radius:999px; box-shadow:0 1px 3px rgba(15,24,38,.16); }
.rg-demo__tag{ position:absolute; right:10px; top:10px; background:#fff; color:#7c3aed; font-size:10.5px;
               font-weight:700; padding:4px 9px; border-radius:999px; box-shadow:0 1px 3px rgba(15,24,38,.16); }
.rg-demo__b{ padding:13px 15px 16px; color:var(--rg-ink); }
.rg-demo__who{ font-size:11.5px; font-weight:700; color:var(--rg-ink-soft); }
.rg-demo__loc{ font-size:10.5px; color:var(--rg-label); margin-bottom:9px; }
.rg-demo__t{ font-size:14.5px; font-weight:700; letter-spacing:-.01em; }
.rg-demo__d{ font-size:12.5px; color:var(--rg-muted); line-height:1.5; margin-top:5px; }
.rg-demo__f{ margin-top:12px; display:flex; gap:7px; align-items:center; }
.rg-demo__f b{ background:var(--rg-primary); color:#fff; font-size:11.5px; font-weight:700;
               padding:6px 11px; border-radius:8px; }
.rg-demo__f i{ font-style:normal; background:#f1f5f9; color:#64748b; font-size:10.5px; font-weight:700;
               padding:5px 10px; border-radius:999px; }
.rg-demo__cap{ text-align:center; font-size:11.5px; color:#8fa0ba; margin-top:14px; }

/* Sections claires */
.rg-sec{ max-width:1080px; margin:0 auto; padding:46px 20px 0; }
.rg-sec h2{ font-size:20px; font-weight:800; letter-spacing:-.02em; margin:0 0 6px; }
.rg-sec__d{ font-size:14px; color:var(--rg-muted); margin:0 0 22px; max-width:62ch; line-height:1.6; }

.rg-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.rg-step{ background:var(--rg-card); border:1px solid var(--rg-line); border-radius:var(--rg-r);
          padding:18px; box-shadow:var(--rg-sh); }
.rg-step__n{ width:26px; height:26px; border-radius:8px; background:#eff6ff; color:var(--rg-primary);
             font-size:12.5px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.rg-step__t{ font-size:14px; font-weight:700; letter-spacing:-.01em; margin-bottom:4px; }
.rg-step__d{ font-size:13px; color:var(--rg-muted); line-height:1.55; }

/* Tarifs : deux cartes, la gratuite d'abord — c'est l'offre principale. */
.rg-prix{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; }
.rg-prix__c{ background:var(--rg-card); border:1px solid var(--rg-line); border-radius:var(--rg-r); padding:20px; box-shadow:var(--rg-sh); }
.rg-prix__c--vedette{ border-color:#bfdbfe; background:linear-gradient(180deg,#fbfdff,#f5f9ff); }
.rg-prix__h{ font-size:14px; font-weight:800; letter-spacing:-.01em; }
.rg-prix__v{ font-size:26px; font-weight:800; letter-spacing:-.03em; margin:8px 0 2px; }
.rg-prix__v small{ font-size:13px; font-weight:600; color:var(--rg-muted); letter-spacing:0; }
.rg-prix__d{ font-size:13px; color:var(--rg-muted); line-height:1.55; margin-top:8px; }
.rg-prix__l{ list-style:none; padding:0; margin:12px 0 0; font-size:13px; color:var(--rg-ink-soft); }
.rg-prix__l li{ padding:4px 0 4px 22px; position:relative; line-height:1.5; }
.rg-prix__l li::before{ content:"✓"; position:absolute; left:0; color:var(--rg-green); font-weight:800; }

/* L'engagement de confidentialité : c'est l'objection n°1 d'un fournisseur
   (« qu'est-ce que vous savez de mes clients ? ») et la promesse faite aux
   entreprises abonnées. Elle mérite son propre bloc, pas une note de bas de page. */
.rg-pacte{ background:#f0fdf4; border:1px solid #bbf7d0; border-radius:var(--rg-r); padding:18px 20px;
           display:flex; gap:14px; align-items:flex-start; }
.rg-pacte__ic{ width:38px; height:38px; border-radius:11px; background:#dcfce7; color:var(--rg-green);
               display:flex; align-items:center; justify-content:center; font-size:18px; flex:0 0 auto; }
.rg-pacte__t{ font-size:14px; font-weight:700; color:#14532d; letter-spacing:-.01em; }
.rg-pacte__d{ font-size:13px; color:#166534; line-height:1.6; margin-top:3px; }

.rg-fin{ max-width:1080px; margin:0 auto; padding:40px 20px 10px; text-align:center; }
.rg-fin h2{ font-size:19px; font-weight:800; letter-spacing:-.02em; margin:0 0 8px; }
.rg-fin p{ font-size:14px; color:var(--rg-muted); margin:0 0 18px; }
.rg-fin .rg-btn{ width:auto; }

@media (max-width:840px){
  .rg-hero__in{ grid-template-columns:1fr; gap:30px; padding:40px 20px 44px; }
  .rg-demo{ max-width:340px; margin:0 auto; transform:none; }
}

/* =============================================================================
   MES OFFRES + FORMULAIRE D'OFFRE (lot 3b)
   ============================================================================= */

.rg-titre{ display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.rg-titre > div:first-child{ flex:1 1 auto; min-width:0; }

/* ---- Liste des offres ------------------------------------------------------ */
.rg-liste{ display:flex; flex-direction:column; gap:10px; }
.rg-item{ display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:14px; align-items:center;
          background:var(--rg-card); border:1px solid var(--rg-line); border-radius:var(--rg-r);
          padding:12px; box-shadow:var(--rg-sh); }
.rg-item__vis{ width:120px; height:76px; border-radius:var(--rg-r-sm); overflow:hidden; background:#f1f5f9; flex:0 0 auto; }
.rg-item__vis img{ width:100%; height:100%; object-fit:cover; display:block; }
.rg-item__vis--vide{ display:flex; align-items:center; justify-content:center; border:1px dashed var(--rg-line); }
.rg-item__vis--vide span{ font-size:11px; color:var(--rg-label); }
.rg-item__t{ font-size:14.5px; font-weight:700; letter-spacing:-.01em; line-height:1.3; }
.rg-item__d{ font-size:12.5px; color:var(--rg-muted); line-height:1.5; margin-top:4px;
             display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rg-item__m{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-top:8px;
             font-size:11.5px; color:var(--rg-label); }
.rg-pill{ background:var(--rg-line-soft); color:var(--rg-muted); font-weight:700; font-size:10.5px;
          padding:3px 9px; border-radius:999px; }
.rg-item__a{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.rg-item__btns{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }

.rg-etat{ font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.rg-etat--ok{ background:#dcfce7; color:#15803d; }
.rg-etat--off{ background:var(--rg-line-soft); color:var(--rg-muted); }
.rg-etat--wait{ background:#fef3c7; color:#b45309; }

.rg-mini{ border:1px solid var(--rg-line); background:#fff; color:var(--rg-ink-soft); font:inherit;
          font-size:12px; font-weight:600; padding:6px 11px; border-radius:8px; cursor:pointer;
          text-decoration:none; display:inline-block; }
.rg-mini:hover{ border-color:#94a3b8; background:#f8fafc; }
.rg-mini--p{ background:var(--rg-primary); border-color:var(--rg-primary); color:#fff; }
.rg-mini--p:hover{ background:var(--rg-primary-d); border-color:var(--rg-primary-d); color:#fff; }
.rg-mini--d{ color:var(--rg-red); border-color:#fecaca; }
.rg-mini--d:hover{ background:#fef2f2; border-color:var(--rg-red); }
.rg-mini:disabled{ opacity:.55; cursor:progress; }

/* ---- Formulaire d'offre ---------------------------------------------------- */
.rg-2col{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:16px; align-items:start; }
.rg-apercu-t{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
              color:var(--rg-label); margin-bottom:8px; }
textarea.rg-input{ resize:vertical; line-height:1.55; min-height:78px; }
select.rg-input{ appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
                 background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }

.rg-visuel{ display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; }
.rg-visuel__ap{ width:150px; height:96px; border-radius:var(--rg-r-sm); overflow:hidden; background:#f1f5f9;
                border:1px dashed var(--rg-line); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.rg-visuel__ap img{ width:100%; height:100%; object-fit:cover; }
.rg-visuel__ap span{ font-size:11.5px; color:var(--rg-label); }
.rg-visuel__b{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }

.rg-banque{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; margin-top:14px;
            border-top:1px solid var(--rg-line-soft); padding-top:14px; }
.rg-bq{ border:1px solid var(--rg-line); background:#fff; border-radius:var(--rg-r-sm); padding:0;
        overflow:hidden; cursor:pointer; aspect-ratio:1; }
.rg-bq:hover{ border-color:var(--rg-primary); }
.rg-bq img{ width:100%; height:100%; object-fit:cover; display:block; }

/* L'aperçu réutilise .rg-demo de l'accueil ; il lui faut juste de quoi
   afficher une VRAIE image à la place de l'icône de catégorie. */
.rg-demo__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rg-demo__vis.cat-pieces{ background:linear-gradient(135deg,#eff6ff,#dbeafe); }
.rg-demo__vis.cat-pneumatiques{ background:linear-gradient(135deg,#f1f5f9,#e2e8f0); }
.rg-demo__vis.cat-lubrifiants{ background:linear-gradient(135deg,#fffbeb,#fef3c7); }
.rg-demo__vis.cat-location{ background:linear-gradient(135deg,#f5f3ff,#ede9fe); }
.rg-demo__vis.cat-services{ background:linear-gradient(135deg,#f0fdf4,#dcfce7); }
.rg-demo__vis.cat-autre{ background:linear-gradient(135deg,#f8fafc,#f1f5f9); }

@media (max-width:880px){
  .rg-2col{ grid-template-columns:1fr; }
  .rg-item{ grid-template-columns:96px minmax(0,1fr); }
  .rg-item__vis{ width:96px; height:64px; }
  .rg-item__a{ grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; }
}