/* ══════════════════════════════════════════════════════════════════════
   L'ÉCRAN GÉRANT — l'accueil des Réglages, rhabillé, et la page qui
   s'ouvre juste après la connexion.

   CE QU'IL NE REFAIT PAS. Les dix tuiles, leurs libellés et leurs
   étiquettes calculées en direct existaient déjà (`renderSettings`,
   js/admin.js) : `S.shopName`, le libellé du thème, le nombre d'actions
   marketing… Rien de tout cela n'est recalculé ici. Les boutons gardent
   leur `data-open`, donc `ouvrirSection()` continue de fonctionner sans
   être touché.

   CE QU'IL CHANGE. L'en-tête `.adm-top` cède la place à une barre unique.
   Le DOCK RESTE : il fait 78 px, soit exactement le rail gauche de la
   maquette, et il porte les six onglets que la barre du haut ne montre
   pas (Production, Planning, Clients, Sur mesure, Cartes cadeaux, Équipe).
   Le masquer aurait rendu ces écrans inatteignables.

   Tout est cadenassé sous `body.gerant`, posée au rendu des Réglages et
   retirée dès qu'on en sort : aucune règle ne fuit vers les autres onglets.
   ══════════════════════════════════════════════════════════════════════ */

body.gerant{
  --g-fond:#fbfbfc; --g-carte:#fff; --g-trait:#e9e9ee;
  --g-encre:#16161a; --g-doux:#63636e;
  background:var(--g-fond);
}
body.gerant .adm-top{display:none}
body.gerant .adm-main{padding:0;max-width:none;margin:0}

/* ══ PIÈCES PARTAGÉES DE LA BARRE ══════════════════════════════════════
   `.g-liens`, `.g-actions` et `.g-bouton` habillent la barre rendue dans
   `#nav` (voir plus bas). L'ancienne barre propre aux Réglages a été
   retirée : `#nav` la fournit désormais pour tous les écrans. */
.g-liens{display:flex;align-items:center;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none}
.g-liens::-webkit-scrollbar{display:none}
.g-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.g-bouton{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:10px;
          border:1px solid #d9d9e0;background:var(--g-carte);color:#26262c;
          font:500 14.5px/1 system-ui,sans-serif;text-decoration:none;cursor:pointer}
.g-bouton:hover{background:#f6f6f9}

/* ══ LA GRILLE ═════════════════════════════════════════════════════════
   Les rangées n'ont PAS toutes le même nombre de cartes — 3, 2, 3, 2 —
   c'est la maquette : chaque rangée est sa propre grille. */
.g-page{max-width:1150px;margin:0 auto;padding:34px 22px 60px}
.g-page > h1,
.g-page > .g-section{font:400 31px/1.2 'Instrument Serif','Cormorant Garamond',Georgia,serif;
             margin:0 0 22px;color:var(--g-encre);font-weight:400}
/* La seconde catégorie respire : sans cet écart, « Réglages » collerait à la
   dernière rangée de « Boutique » et les deux blocs n'en feraient qu'un. */
.g-page > .g-section{margin-top:38px}
.g-rangee{display:grid;gap:18px;margin-bottom:18px}
.g-rangee.trois{grid-template-columns:repeat(3,1fr)}
.g-rangee.deux {grid-template-columns:repeat(2,1fr)}

.g-carte{position:relative;background:var(--g-carte);border:1px solid var(--g-trait);
         border-radius:14px;padding:20px 20px 22px;box-shadow:0 1px 2px rgba(18,18,30,.04);
         cursor:pointer;transition:box-shadow .16s,border-color .16s,transform .16s;
         text-align:left;font:inherit;color:var(--g-encre);width:100%;display:block}
.g-carte:hover{border-color:#d3d3dd;box-shadow:0 6px 18px rgba(18,18,30,.07);transform:translateY(-1px)}
.g-carte:focus-visible{outline:2px solid #2f6fd0;outline-offset:2px}
.g-carte.on{border-color:#b9c3d8;box-shadow:0 0 0 2px #dbe3f2}

.g-etiq{position:absolute;top:14px;right:14px;font-size:12.5px;font-weight:500;
        padding:3px 9px;border-radius:7px;line-height:1.45}
.g-etiq.vert {background:#e4f4e7;color:#2f6b3c}
.g-etiq.bleu {background:#dde4f6;color:#37507e}
.g-etiq.peche{background:#fdeede;color:#8a5320}
.g-etiq.gris {background:#eeeef2;color:#4c4c57}

.g-ico{width:36px;height:36px;flex:none}
/* `display:block` est INDISPENSABLE : le titre est un <span>, donc en
   ligne par défaut — sur la disposition « pile », où l'icône doit être
   AU-DESSUS, il se plaçait à côté d'elle. */
.g-titre{display:block;font:600 19px/1.3 system-ui,sans-serif;letter-spacing:-.1px;margin:0}
.g-desc{color:var(--g-doux);font-size:14.5px;margin:6px 0 0;max-width:44ch}

/* les trois dispositions relevées sur la maquette */
.g-carte.ligne .g-tete{display:flex;align-items:center;gap:12px}
.g-carte.ligne .g-desc{margin-top:8px}
.g-carte.pile  .g-ico{display:block;margin-bottom:12px}
.g-carte.centre{text-align:center;padding-top:24px}
.g-carte.centre .g-ico{margin:0 auto 10px;display:block}
.g-carte.centre .g-desc{margin-left:auto;margin-right:auto;max-width:52ch}
/* même garde-fou, en plus simple : la première ligne du titre reste à
   distance du coin où vit l'étiquette. */
.g-carte.centre .g-titre{padding:0 8px}

/* ══ MOBILE ════════════════════════════════════════════════════════════
   Une seule colonne, et les trois dispositions fusionnent : icône à
   gauche, titre et étiquette sur la même ligne, description dessous.
   L'étiquette quitte le coin absolu — sur une carte étroite elle passerait
   par-dessus le titre. */
@media(max-width:900px){
  .g-page{padding:16px 14px 40px}
  .g-page > h1,.g-page > .g-section{font-size:30px;margin-bottom:14px}
  .g-page > .g-section{margin-top:28px}
  .g-rangee{grid-template-columns:1fr!important;gap:9px;margin-bottom:9px}
  .g-carte,.g-carte.centre,.g-carte.pile{
    text-align:left;padding:13px 14px;background:#e9ecf3;border-color:#dfe3ec;
    box-shadow:none;display:grid;grid-template-columns:auto 1fr auto;gap:0 12px;align-items:start}
  .g-carte:hover{transform:none;box-shadow:none}
  .g-carte .g-tete,.g-carte.ligne .g-tete{display:contents}
  .g-carte .g-ico{grid-row:1/3;align-self:center;margin:0;width:40px;height:40px}
  .g-carte .g-titre{grid-column:2;font-size:17px}
  .g-carte .g-desc{grid-column:2;margin:2px 0 0;max-width:none;font-size:14px}
  .g-etiq{position:static;grid-column:3;grid-row:1;align-self:center;justify-self:end;
          margin-left:8px;white-space:nowrap}
}

/* ══════════════════════════════════════════════════════════════════════
   LA BARRE DE NAVIGATION — remplace le dock vertical, retiré le
   2026-08-31.

   ELLE N'EST PAS SOUS `body.gerant` : le dock servait TOUS les écrans,
   la barre doit donc les servir aussi. Seul l'accueil des Réglages garde
   sa mise en page propre, plus bas.

   `#nav` est resté le même élément : douze appels à `renderNav()` dans
   js/admin.js rafraîchissent ses pastilles après chaque écriture.
   ══════════════════════════════════════════════════════════════════════ */
.adm-nav{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:4px;
  height:63px;padding:0 18px;background:#fff;border-bottom:1px solid #e9e9ee;
  /* PAS D'OVERFLOW ICI : la grille des écrans est un enfant en
     `position:absolute` qui dépasse largement les 63 px de la barre. Le
     moindre `overflow` autre que `visible` la rognerait — c'est ce qui
     l'empêchait de s'afficher. Le défilement horizontal, quand la barre est
     trop étroite, est porté par `.g-liens` seule. */
  overflow:visible;
}
.adm-nav .g-liens{display:flex;align-items:center;gap:4px;min-width:0;
                  overflow-x:auto;scrollbar-width:none}
.adm-nav .g-liens::-webkit-scrollbar{display:none}
.adm-nav .g-liens button{
  display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:0;
  border-radius:9px;background:none;color:#2c2c33;cursor:pointer;
  font:500 14.5px/1.2 system-ui,sans-serif;white-space:nowrap}
/* Entre 900 et 1180 px la barre ne tient plus : les sept entrées débordent
   et la dernière — « Paramètres » — sortait du champ sans que rien ne le
   signale. On resserre, puis on retire les icônes : un intitulé tronqué est
   pire qu'une icône absente. */
@media(max-width:1180px){
  .adm-nav{padding:0 12px}
  .adm-nav .g-liens button{padding:8px 9px;gap:5px;font-size:14px}
}
@media(max-width:1040px){
  .adm-nav .g-liens svg{display:none}
}
.adm-nav .g-liens button:hover{background:#f3f3f6}
.adm-nav .g-liens button[aria-current]{background:#eef0f5;color:#111}
.adm-nav .g-liens svg{width:16px;height:16px;flex:none;opacity:.72}
.g-pastille{background:#c0433f;color:#fff;border-radius:99px;padding:1px 6px;
            font:600 11px/1.5 system-ui,sans-serif;font-style:normal}

@media(max-width:900px){
  /* LES LIENS RESTENT VISIBLES, en défilement horizontal. La maquette les
     remplaçait par un menu burger ; ce menu a disparu avec le tiroir, et
     les masquer laisserait sans issue quiconque se trouve sur un autre
     écran que l'accueil. Une rangée qui défile ne coûte rien. */
  .adm-nav{height:auto;padding:8px 10px;gap:6px}
  .adm-nav .g-liens{flex:1 1 auto}
  .adm-nav .g-liens button{padding:7px 8px;font-size:13.5px}
  .adm-nav .g-actions .g-bouton{padding:7px 11px;font-size:13px}
}


/* ══════════════════════════════════════════════════════════════════════
   RÉGLAGES — DEUX COLONNES, LISTE NUMÉROTÉE, APERÇU PERMANENT
   Jetons et composants repris de la feuille fournie par le commerçant
   (sept. 2026) : mêmes valeurs exactes, pour que le panneau livré et sa
   maquette ne divergent pas d'un pixel.

   Les noms de classes restent ceux du panneau (.rg-*) : ce sont eux que
   js/admin.js écrit et que les gestionnaires visent. Seules les VALEURS
   viennent de la maquette.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --rg-fond:#F6EFE9;          /* bg-main */
  --rg-carte:#FFFDF9;         /* bg-card */
  --rg-panneau:#4C1A28;       /* bg-preview, bordeaux profond */
  --rg-trait:#E2D5C7;         /* border-color */
  --rg-encre:#22161C;         /* text-dark */
  --rg-doux:#6E5C67;          /* text-muted */
  --rg-bordeaux:#7A2238;      /* bordeaux-accent */
  --rg-bouton:#F2ECE6;
  --rg-bouton-h:#E8DFD7;
  --rg-icone:#F4EBE3;
  --rg-r-lg:16px;
  --rg-r-md:10px;
}

body.gerant{background:var(--rg-fond);color:var(--rg-encre)}

/* UNE COLONNE AU REPOS, DEUX DÈS QU'UNE SECTION EST OUVERTE.
   Trois cellules directes : la liste (#setHome), la page de réglages
   (#setBody), l'aperçu (.rg-apercu). Deux seulement sont visibles à la
   fois, et js/admin.js dit lesquelles par une classe sur la grille :
   rg-avec-page = liste + page en vis-à-vis (maître/détail), rg-avec-apercu
   = page + aperçu (Vitrine, la liste s'efface). L'aperçu n'a de sens que là
   où l'on change l'apparence de la boutique ; ailleurs il prenait la moitié
   de la page pour ne rien montrer d'utile, et comprimait les réglages sur
   une largeur trop étroite pour être lus. */
.rg-deux{display:grid;grid-template-columns:1fr;gap:24px;
  padding:24px;max-width:1400px;margin:0 auto;align-items:start}
/* Maître/détail moitié-moitié : les deux cartes font la même largeur. Une
   cellule cachée (.hide) ne compte pas pour la grille, la cellule restante
   prend la colonne 1 sans laisser de trou. La Vitrine suit la maquette
   « Personnalisation du Design » : réglages souples, aperçu à 440 px fixes
   (.main-layout de la maquette, gap 20 px). */
.rg-deux.rg-avec-page{grid-template-columns:1fr 1fr}
.rg-deux.rg-avec-apercu{grid-template-columns:1fr 440px;gap:20px}
.rg-apercu{display:none}
.rg-avec-apercu .rg-apercu{display:flex}
/* min-width:0 : sans lui, une cellule 1fr s'élargit à son contenu (bande
   de couleurs, tableau) et déborde de la moitié qui lui revient. */
.rg-deux > #setHome,
.rg-deux > #setBody{min-width:0;align-self:start}

/* ── La carte de gauche ─────────────────────────────────────────────── */
.rg-carte{background:var(--rg-carte);border:1px solid var(--rg-trait);
  border-radius:var(--rg-r-lg);padding:20px;box-shadow:0 4px 12px rgba(0,0,0,.03)}
.rg-h1{font-size:22px;font-weight:700;line-height:1.25;margin:0 0 16px;color:var(--rg-encre)}
.rg-h2{font-size:17px;font-weight:700;margin:24px 0 12px;color:var(--rg-encre)}
/* L'en-tête de sous-page : Retour à GAUCHE, puis le titre. */
.rg-entete{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.rg-entete .rg-h1{margin:0;flex:1;min-width:0}
.rg-retour{order:-1;flex:none;background:var(--rg-bouton);border:1px solid var(--rg-trait);
  border-radius:20px;padding:8px 16px;font-weight:600;font-size:13px;
  color:var(--rg-encre);cursor:pointer}
.rg-retour:hover{background:var(--rg-bouton-h)}

/* ── Une rangée ─────────────────────────────────────────────────────── */
.rg-liste{display:flex;flex-direction:column;gap:16px}
.rg-ligne{display:flex;align-items:center;gap:16px;width:100%;text-align:left;
  background:var(--rg-carte);border:1px solid var(--rg-trait);
  border-radius:var(--rg-r-lg);padding:20px;cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.03);transition:transform .2s,box-shadow .2s}
.rg-ligne:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.06)}
.rg-ligne:focus-visible{outline:2px solid var(--rg-bordeaux);outline-offset:2px}
.rg-num{flex:none;order:-1;width:28px;height:28px;border-radius:50%;
  background:var(--rg-bordeaux);color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:14px;font-style:normal}
.rg-ico{flex:none;width:44px;height:44px;background:var(--rg-icone);
  border-radius:var(--rg-r-md);display:flex;align-items:center;justify-content:center}
.rg-ico svg{width:24px;height:24px}
.rg-txt{flex:1;min-width:0;display:block}
.rg-titre{display:block;margin:0 0 4px;font-size:16px;font-weight:700;color:var(--rg-encre)}
.rg-desc{display:block;margin:0;font-size:13px;line-height:1.45;color:var(--rg-doux)}
.rg-go{flex:none;order:4;background:var(--rg-bouton);border:1px solid var(--rg-trait);
  border-radius:20px;padding:8px 16px;font-weight:600;font-size:13px;color:var(--rg-encre)}
.rg-ligne:hover .rg-go{background:var(--rg-bouton-h)}
/* LA RANGÉE OUVERTE. Bordure bordeaux, fond à peine teinté et le bouton
   rempli : en vis-à-vis, le gérant voit d'un coup d'œil à quelle rangée
   correspond la page de droite. Écrit APRÈS les règles de survol, à
   spécificité égale, pour que le bouton reste plein sous la souris. */
.rg-ligne.on{border-color:var(--rg-bordeaux);
  background:#FBF3F1;background:color-mix(in srgb,var(--rg-bordeaux) 6%,var(--rg-carte))}
.rg-ligne.on .rg-go{background:var(--rg-bordeaux);border-color:var(--rg-bordeaux);color:#fff}
.rg-ligne.on:hover .rg-go{filter:brightness(1.12)}
/* L'étiquette d'état se glisse entre le texte et le bouton. Elle redevient
   un élément de flux : l'ancrage absolu des anciennes cartes la collait
   sinon par-dessus le titre de la rangée. */
.rg-ligne .g-etiq{position:static;order:3;flex:none;top:auto;right:auto}
/* EN VIS-À-VIS, LA LISTE VIT SUR UNE DEMI-LARGEUR (476 px de colonne à
   1024 px, 392 px utiles dans une rangée). L'étiquette et le bouton ne
   rétrécissent jamais (flex:none) : « Navigateur • e-mail » + « Ajuster »
   ne laissaient que ~27 px au titre, qui se peignait par-dessus, et un nom
   de boutique un peu long (étiquette de la rangée 1) faisait déborder la
   rangée même à 1400 px. Même enroulement que sur écran étroit, scopé à
   #setHome pour ne pas toucher la liste des cinq étapes de la Vitrine. */
.rg-deux.rg-avec-page #setHome .rg-ligne{flex-wrap:wrap}
.rg-deux.rg-avec-page #setHome .rg-txt{flex:1 1 60%}
.rg-deux.rg-avec-page #setHome .rg-go{margin-left:auto}

/* ── Les douze écrans ───────────────────────────────────────────────── */
.rg-ecrans{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.rg-ecrans .g-carte{background:var(--rg-carte);border-color:var(--rg-trait);
  border-radius:var(--rg-r-md);padding:14px}
.rg-ecrans .g-titre{font-size:15px}
.rg-ecrans .g-desc{font-size:12.5px;margin-top:5px}

/* ── Le pied : une ligne pleine largeur sous les deux colonnes ─────────
   Quatrième cellule de .rg-deux (grid-column:1/-1), comme la barre
   .bottom-actions de la maquette : « Enregistrer » blanc à bordure,
   « Voir en ligne » bordeaux, tous deux en pilule et alignés à droite.
   Il n'apparaît qu'avec une section ouverte : à l'accueil, rien à
   enregistrer. */
.rg-pied{display:none;grid-column:1/-1;justify-content:flex-end;gap:12px;margin:0;padding:0}
.rg-deux.rg-avec-page .rg-pied,
.rg-deux.rg-avec-apercu .rg-pied{display:flex}
/* EN MAÎTRE/DÉTAIL, LE PIED SUIT LA PAGE DE DROITE, pas la liste. Sur une
   ligne pleine largeur il tombait sous la rangée 1, dont la hauteur est
   dictée par la liste (dix rangées + « Aller à un écran », ≈1400 px) :
   sous Notifications ou Sécurité, « Enregistrer » se retrouvait un écran
   plus bas, hors de vue. La liste enjambe deux rangées et la piste 1fr
   absorbe son surplus ; la rangée 1 garde la hauteur de #setBody et le
   pied vient juste dessous, en colonne 2. La Vitrine (rg-avec-apercu)
   garde la ligne pleine largeur de la maquette : sa liste est cachée. */
.rg-deux.rg-avec-page{grid-template-rows:auto 1fr}
.rg-deux.rg-avec-page > #setHome{grid-row:1/3}
.rg-deux.rg-avec-page .rg-pied{grid-column:2;align-self:start}
.rg-enr,.rg-pub{border-radius:20px;cursor:pointer;font-weight:600;font-size:14px}
.rg-enr{background:#fff;border:1px solid var(--rg-trait);color:var(--rg-encre);padding:10px 24px}
.rg-enr:hover{background:var(--rg-bouton-h)}
.rg-pub{background:var(--rg-bordeaux);border:0;color:#fff;padding:10px 28px}
.rg-pub:hover{filter:brightness(1.12)}

/* ── La colonne d'aperçu ────────────────────────────────────────────── */
/* Pas de `display` ici : il est décidé plus haut par .rg-avec-apercu.
   Le remettre à `flex` dans cette règle — écrite APRÈS — annulait le
   masquage et l'aperçu réapparaissait sur toutes les sections. */
.rg-apercu{position:sticky;top:74px;background:var(--rg-panneau);
  border-radius:var(--rg-r-lg);padding:20px;color:#fff;
  flex-direction:column;align-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.15)}
.rg-apercu-tete{width:100%;display:flex;align-items:center;
  justify-content:space-between;gap:12px;margin-bottom:20px}
.rg-apercu-tete b{font-weight:700;font-size:18px}
.rg-bascule{display:flex;background:rgba(255,255,255,.15);border-radius:20px;padding:3px}
.rg-bascule button{background:transparent;border:none;color:#fff;padding:6px 14px;
  border-radius:16px;font-size:12px;font-weight:600;cursor:pointer;text-transform:uppercase}
.rg-bascule button.on{background:#fff;color:var(--rg-encre)}
/* La maquette du téléphone. `.apercu-cadre` porte le châssis ; l'iframe
   à l'intérieur est mise à l'échelle par js/admin.js. */
.rg-scene{position:relative;width:100%;display:grid;place-items:center}
.rg-apercu .apercu-cadre{width:100%;max-width:320px;background:#000;
  border:8px solid #2A2A2A;border-radius:40px;overflow:hidden;position:relative;
  box-shadow:0 20px 40px rgba(0,0,0,.5)}
/* EN MODE BUREAU, LE CHÂSSIS S'ÉLARGIT. Garder le gabarit d'un téléphone
   autour d'une page d'ordinateur écrasait celle-ci dans 320 px : illisible.
   Le cadre prend alors toute la colonne, avec des bords sobres d'écran. */
.rg-scene.bureau .apercu-cadre{max-width:none;border-width:6px;border-radius:12px}
.rg-apercu iframe{border:0;display:block;transform-origin:top left;background:#FAF8F5}
.rg-outils{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  display:flex;gap:2px;background:rgba(20,20,26,.72);border-radius:16px;padding:4px}
.rg-outils button{border:0;background:transparent;color:#fff;cursor:pointer;
  padding:6px 14px;border-radius:14px;font-size:15px;line-height:1}
.rg-outils button:hover{background:rgba(255,255,255,.16)}
.rg-apercu-pied{width:100%;margin:14px 0 0;font-size:12px;line-height:1.45;
  color:rgba(255,255,255,.62)}

/* ── Les réglages EUX-MÊMES, dans le vocabulaire de la maquette ──────
   Le panneau existant écrit .panel, .field, .input, .btn : plutôt que de
   réécrire des centaines de contrôles — et de casser autant de
   gestionnaires — on leur donne ici l'allure de .config-card et de
   .form-control. Un seul endroit à relire, aucun identifiant déplacé. */
.rg-souspage .panel{background:var(--rg-carte);border:1px solid var(--rg-trait);
  border-radius:var(--rg-r-lg);padding:20px;margin:0 0 16px;box-shadow:none}
.rg-souspage .panel h3{margin:0 0 4px;font-size:16px;font-weight:700;color:var(--rg-encre)}
.rg-souspage .field > span{display:block;font-size:13px;font-weight:600;
  margin-bottom:6px;color:var(--rg-encre)}
.rg-souspage .input,
.rg-souspage input[type=text],
.rg-souspage input[type=email],
.rg-souspage input[type=tel],
.rg-souspage input[type=url],
.rg-souspage input[type=number],
.rg-souspage textarea{width:100%;padding:10px 12px;border:1px solid var(--rg-trait);
  border-radius:var(--rg-r-md);background:#fff;font-size:14px;box-sizing:border-box}
.rg-souspage .btn{border-radius:20px;font-weight:600;font-size:13px}
.rg-souspage .btn.primary{background:var(--rg-bordeaux);border-color:var(--rg-bordeaux);color:#fff}

/* ── Écrans étroits : l'aperçu passe devant ─────────────────────────── */
@media (max-width:1023px){
  /* Les deux modificateurs sont nommés exprès : à (0,2,0) ils battaient
     `.rg-deux` seul et la grille restait coupée en deux sur un téléphone,
     chaque carte sur une demi-largeur. */
  .rg-deux,.rg-deux.rg-avec-apercu,.rg-deux.rg-avec-page{
    grid-template-columns:1fr;padding:14px 12px 48px;gap:16px}
  /* Pas de vis-à-vis sur une colonne : la page REMPLACE la liste, comme la
     Vitrine le fait déjà par le JS, et « Fermer » la fait revenir. */
  .rg-deux.rg-avec-page > #setHome{display:none}
  /* Une seule colonne : plus de rangée à enjamber, et le pied en colonne 2
     créerait une colonne implicite hors écran. */
  .rg-deux.rg-avec-page{grid-template-rows:none}
  .rg-deux.rg-avec-page .rg-pied{grid-column:1}
  /* Le gap n'est plus que de 16 px ici : la marge négative n'a plus lieu. */
  .rg-fil{margin-bottom:0}
  .rg-apercu{order:-1;position:static;top:auto}
  .rg-apercu .apercu-cadre{max-height:42vh}
  .rg-apercu.grand .apercu-cadre{max-height:82vh}
  .rg-ligne{flex-wrap:wrap}
  .rg-txt{flex:1 1 60%}
  .rg-go{margin-left:auto}
}

/* ══════════════════════════════════════════════════════════════════════
   VITRINE — TROISIÈME NIVEAU : LA LISTE DES CINQ ÉTAPES
   Reprise des maquettes : on choisit d'abord l'étape dans une liste
   numérotée, puis on entre dedans. Les cinq blocs restent tous dans le
   document — seul l'affichage change — pour ne casser aucun gestionnaire.
   ══════════════════════════════════════════════════════════════════════ */

.vit-liste{margin:0}
.vit-liste.hide{display:none}
/* L'étape non retenue est neutralisée par `hidden`, posé au rendu. */
.vit-etape[hidden]{display:none}
/* Dans une étape ouverte, le sommaire n'a plus de rôle : le fil d'Ariane
   et le titre de la carte disent déjà où l'on est. */
.vit-etape[open] > summary{display:none}
/* box-shadow et overflow : l'étape ouverte vit désormais à nu sur le fond
   de page, son ombre (css/admin.css) dessinerait un halo autour des cartes
   et son overflow:hidden rognerait l'anneau de sélection des tuiles.
   margin:0 : css/admin.css pose 10 px sous chaque étape ; l'étape ouverte
   étant le dernier bloc de la colonne (les quatre autres sont `hidden`),
   ces 10 px s'ajoutaient au gap de 20 px avant le pied. */
.vit-etape[open]{border:0;padding:0;margin:0;background:none;box-shadow:none;overflow:visible}
.vit-corps{padding:0}

/* Le fil d'Ariane, au-dessus des DEUX colonnes : « Configuration > Étape »,
   tout en --rg-doux à 13 px comme le .breadcrumb de la maquette. Seul
   « Configuration » est un bouton, souligné au survol pour le dire.
   CELLULE PLEINE LARGEUR DE .rg-deux (js/admin.js le rend avant #setHome),
   comme la maquette pose .breadcrumb AVANT .main-layout : rendu dans la
   colonne de gauche, il en était la première ligne et l'aperçu se calait
   dessus, 35 px plus haut que l'en-tête de panneau. order:-2 le garde
   devant l'aperçu, qui passe en order:-1 sous 1023 px ; la marge négative
   ramène le gap de 20 px aux 16 px de la maquette. Visible sous
   .rg-avec-apercu seulement : state.vitEtape survit à l'ouverture d'une
   autre section, où le fil n'a rien à dire. */
.rg-fil{display:none;grid-column:1/-1;order:-2;align-items:center;gap:8px;
  margin:0 0 -4px;font-size:13px;color:var(--rg-doux)}
.rg-deux.rg-avec-apercu > .rg-fil{display:flex}
.rg-fil button{background:none;border:0;padding:0;cursor:pointer;
  font-size:13px;color:var(--rg-doux);text-decoration:none}
.rg-fil button:hover{color:var(--rg-bordeaux);text-decoration:underline}
.rg-fil b{color:var(--rg-doux);font-weight:400}

/* ══ UNE ÉTAPE OUVERTE : PLUS DE CARTE ENVELOPPANTE ═════════════════════
   La maquette pose le fil d'Ariane, l'en-tête « ← Retour + titre » et les
   cartes de réglages DIRECTEMENT sur le fond de page. La carte de la
   sous-page et son en-tête « Configuration — Vitrine » s'effacent donc.
   Scopé à .rg-avec-apercu : `state.vitEtape` survit quand on ouvre une
   autre section, et Identité ou Sécurité doivent garder leur carte et
   leur bouton « Fermer ». */
.rg-avec-apercu .rg-souspage.rg-etape-ouverte{background:none;border:0;padding:0;
  box-shadow:none;border-radius:0}
.rg-avec-apercu .rg-souspage.rg-etape-ouverte > .rg-entete{display:none}
/* Le sommaire « 🎨 Vitrine » du groupe s'efface aussi : le fil d'Ariane et
   l'en-tête de panneau nomment déjà la section, et un sommaire cliquable
   replierait tout le contenu (rendreEnGardantLaPlace mémorise `open`, le
   groupe resterait fermé à chaque pastille). Le <details> reste `open`,
   posé par ouvrirSection ; seul son sommaire disparaît, comme .rg-entete.
   Sa marge basse suivrait sinon le gap de 20 px avant le pied. */
.rg-avec-apercu .rg-souspage.rg-etape-ouverte > #grp-vitrine > summary{display:none}
.rg-avec-apercu .rg-souspage.rg-etape-ouverte > #grp-vitrine{margin-bottom:0}
/* L'en-tête de panneau (.panel-header de la maquette) : « ← Retour » en
   pilule transparente, puis le titre à 22 px. */
.rg-panneau-tete{display:flex;align-items:center;gap:16px;margin:0 0 24px}
/* font-family:inherit : app.css met tous les h1/h2 en serif, la maquette
   écrit ses titres dans la police du corps. */
.rg-panneau-tete .rg-h1{margin:0;flex:1;min-width:0;font-size:22px;font-weight:700;font-family:inherit}
.rg-panneau-tete .btn-back{flex:none;background:transparent;border:1px solid var(--rg-trait);
  padding:6px 16px;border-radius:20px;cursor:pointer;font-weight:600;font-size:14px;
  color:var(--rg-encre)}
.rg-panneau-tete .btn-back:hover{background:var(--rg-bouton)}
/* Les étapes pas encore refaites au gabarit de la maquette ne flottent
   pas nues : bas de page et bandeaux reçoivent une carte. La bannière n'en
   a pas besoin, ses deux .panel sont déjà des cartes (règle .rg-souspage
   .panel plus haut) et une carte de plus ferait une boîte dans la boîte ;
   le catalogue a ses rangées-cartes .rg-reglage. */
.rg-avec-apercu .rg-etape-ouverte .vit-etape[data-etape="maison"] > .vit-corps,
.rg-avec-apercu .rg-etape-ouverte .vit-etape[data-etape="bandeaux"] > .vit-corps{
  background:var(--rg-carte);border:1px solid var(--rg-trait);
  border-radius:var(--rg-r-lg);padding:20px}

/* ══ ÉTAPE « PERSONNALISATION DU DESIGN » : LES VALEURS DE LA MAQUETTE ══
   (« design reglage 1.css », sept. 2026.) Les cartes sont des .rg-carte,
   mêmes valeurs que sa .card ; les autres noms de classes sont ceux de la
   maquette, scopés sous .rg-design pour ne rien changer ailleurs.
   .theme-pick, .col-pick et .font-pick de css/admin.css ne sont pas
   modifiés : ils sont surchargés ici, dans la carte « Palette ». */
.rg-design{display:flex;flex-direction:column;gap:16px}
.rg-design .rg-carte{min-width:0;box-shadow:none}
.rg-design .card-title{font-size:16px;font-weight:700;margin:0 0 16px;color:var(--rg-encre);
  font-family:inherit;letter-spacing:0}
.rg-design .grid-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── Thèmes de base : tuiles pleines de l'accent, nom dessous ────────── */
.rg-design .themes-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rg-design .theme-item{display:flex;flex-direction:column;align-items:center;gap:8px;
  width:100%;cursor:pointer;background:none;border:0;padding:0;font:inherit;
  color:var(--rg-encre)}
.rg-design .theme-preview{display:block;width:100%;height:120px;box-sizing:border-box;
  border-radius:var(--rg-r-md);border:2px solid transparent}
.rg-design .theme-item.active .theme-preview{border-color:var(--rg-bordeaux);
  box-shadow:0 0 0 2px rgba(95,29,45,.2)}
.rg-design .theme-item:focus-visible{outline:2px solid var(--rg-bordeaux);outline-offset:2px;
  border-radius:var(--rg-r-md)}
.rg-design .theme-label{font-size:12px;font-weight:600}

/* ── Palette : les cinq champs, un seul actif ───────────────────────── */
.rg-design .color-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.rg-design .cf-label{display:block;font-size:11px;color:var(--rg-doux);margin-bottom:4px}
.rg-design .color-field{display:block;width:100%;min-width:0;text-align:left;background:none;
  border:0;padding:0;cursor:pointer;font:inherit;color:var(--rg-encre)}
.rg-design .color-input-box{display:flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--rg-trait);padding:6px 10px;border-radius:6px;font-size:14px}
.rg-design .color-input-box > span:last-child{min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rg-design .color-field.active .color-input-box{border-color:var(--rg-bordeaux);
  box-shadow:0 0 0 1px var(--rg-bordeaux)}
.rg-design .color-field:focus-visible{outline:none}
.rg-design .color-field:focus-visible .color-input-box{box-shadow:0 0 0 2px var(--rg-bordeaux)}
.rg-design .swatch{flex:none;width:20px;height:20px;border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}

/* ── Palette : les pastilles du champ actif ──────────────────────────
   Les cinq sélecteurs sont tous rendus (les gestionnaires s'y accrochent
   par id) ; `hidden` en cache quatre. `.field` d'app.css n'est plus là,
   mais on verrouille quand même : un display posé ailleurs annulerait
   l'attribut. */
.rg-design .palette-presets{border-top:1px solid var(--rg-trait);padding-top:12px}
.rg-design .palette-presets [hidden]{display:none!important}
/* La grille compacte (colorGrid) prend la forme des .swatch-circle de la
   maquette : 22 px, rondes, liseré à 10 %, anneau bordeaux sur l'élue. */
/* gap 8px 6px : la maquette espace les pastilles de 6 px (.preset-row) et
   les rangées de 8 px (.palette-presets) ; la grille n'est qu'un flex-wrap. */
.rg-palette .col-pick{gap:8px 6px;margin:0;padding:0}
.rg-palette .col-pick button{width:22px;height:22px;border:1px solid rgba(0,0,0,.1);
  box-shadow:none;background:var(--sw)}
.rg-palette .col-pick button:hover{transform:scale(1.12)}
.rg-palette .col-pick button.on{border-color:var(--rg-bordeaux);box-shadow:0 0 0 2px var(--rg-bordeaux)}
.rg-palette .col-pick .sw-ck{font-size:11px}
/* Les boutons texte (« Défaut », « Neutre », « Suivre le site ») : petites
   pilules de 22 px de haut. Le blanc reste une pastille, c'est une couleur. */
.rg-palette .col-pick button.def{width:auto;height:22px;border-radius:11px;padding:0 10px;
  background:#fff;border:1px solid var(--rg-trait);box-shadow:none;
  font-size:11px;font-weight:700;color:var(--rg-doux)}
.rg-palette .col-pick button.def.on{color:var(--rg-encre);border-color:var(--rg-bordeaux);
  box-shadow:0 0 0 1px var(--rg-bordeaux)}
.rg-palette .theme-pick{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;padding:0;overflow:visible}
.rg-palette .theme-pick button{flex:none;display:inline-flex;align-items:center;gap:6px;
  height:22px;border-radius:11px;padding:0 10px;border:1px solid var(--rg-trait);
  font-size:11px;font-weight:700;text-align:left}
.rg-palette .theme-pick button.on{border-color:var(--rg-bordeaux);box-shadow:0 0 0 1px var(--rg-bordeaux)}
.rg-palette .theme-pick .tp-dot{width:10px;height:10px;box-shadow:none}
.rg-palette .theme-pick .tp-aa{display:none}
.rg-palette .theme-pick .tp-label{display:inline;margin:0;font-size:11px;font-weight:700}

/* ── Polices : deux <select>, un troisième pour le nom, l'aperçu ─────── */
.rg-design .fonts-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
/* Même garde-fou que .color-field : 1fr = minmax(auto,1fr), et le minimum
   d'un <div> autour d'un <select> à 100 % est l'option la plus longue
   (« Playfair Display ») ; sans lui la grille sort de la carte à droite
   sur les écrans étroits. */
.rg-design .fonts-options > div{min-width:0}
.rg-design .font-nom{margin-bottom:16px}
.rg-design .select-box{width:100%;padding:8px 10px;border:1px solid var(--rg-trait);
  border-radius:6px;background:#fff;font-size:12px;color:var(--rg-encre);font-family:inherit}
.rg-design .font-preview-box{border-top:1px solid var(--rg-trait);padding-top:12px;
  display:flex;flex-direction:column;gap:8px}
.rg-design .font-title-preview{font-size:18px;font-weight:700;line-height:1.2;color:var(--rg-encre)}
.rg-design .font-body-preview{font-size:13px;line-height:1.3;color:var(--rg-doux)}

/* Les deux cartes restent côte à côte jusqu'à 700 px, comme la maquette
   (aucun point de rupture chez elle) ; en dessous, une colonne. */
@media (max-width:700px){
  .rg-design .grid-cards{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════════
   LES RÉGLAGES EN RANGÉES — segmentés et interrupteurs
   Même gabarit que les rangées de navigation, mais le contrôle remplace le
   bouton « Configurer ». Repris de la maquette « Configuration du
   Catalogue » : icône, intitulé, phrase, contrôle à droite.
   ══════════════════════════════════════════════════════════════════════ */

.rg-reglage{display:flex;align-items:center;gap:16px;
  background:var(--rg-carte);border:1px solid var(--rg-trait);
  border-radius:var(--rg-r-lg);padding:18px 20px;margin:0 0 14px;
  box-shadow:0 4px 12px rgba(0,0,0,.03)}
.rg-reglage .rg-txt{flex:1;min-width:0}
/* Une rangée qui introduit un contrôle posé JUSTE EN DESSOUS (la bande des
   designs de fiche) : pas de marge basse, elle forme un tout avec lui. */
.rg-reglage-large{margin-bottom:8px}

/* ── Le segmenté ────────────────────────────────────────────────────── */
.rg-seg{flex:none;display:flex;gap:4px;background:var(--rg-bouton);
  border:1px solid var(--rg-trait);border-radius:22px;padding:4px}
.rg-seg-b{display:inline-flex;align-items:center;gap:6px;border:0;
  background:transparent;border-radius:18px;padding:7px 14px;cursor:pointer;
  font:600 13px/1 system-ui,sans-serif;color:var(--rg-doux);white-space:nowrap}
.rg-seg-b:hover{color:var(--rg-encre)}
.rg-seg-b.on{background:#fff;color:var(--rg-encre);
  box-shadow:0 1px 3px rgba(0,0,0,.08)}
.rg-seg-n{width:18px;height:18px;border-radius:50%;background:var(--rg-bordeaux);
  color:#fff;font:600 11px/18px system-ui,sans-serif;text-align:center;font-style:normal}
.rg-seg-b:not(.on) .rg-seg-n{background:#cfc3bb;color:#fff}
/* Huit dispositions ne tiennent pas sur une ligne : celle-là s'enroule. */
.rg-seg-souple{flex:1 1 auto;flex-wrap:wrap;justify-content:flex-end;max-width:56%}

/* ── L'interrupteur ─────────────────────────────────────────────────── */
.rg-switch{flex:none;position:relative;width:52px;height:30px;border-radius:30px;
  border:0;background:#d8cec7;cursor:pointer;padding:0;transition:background .22s}
.rg-switch.on{background:var(--rg-bordeaux)}
.rg-switch-p{position:absolute;top:3px;left:3px;width:24px;height:24px;
  border-radius:50%;background:#fff;transition:transform .22s;
  box-shadow:0 1px 3px rgba(0,0,0,.25)}
.rg-switch.on .rg-switch-p{transform:translateX(22px)}

@media (max-width:1023px){
  .rg-reglage{flex-wrap:wrap}
  .rg-seg-souple{max-width:none;justify-content:flex-start}
}