/* ============================================================
   Souvenirs.photo — Galerie Pro (vitrine)
   Feuille de style autonome. DA crème & terracotta.
   Tailwind sert de base utilitaire ; ce fichier porte la DA
   et les composants spécifiques à la vitrine galerie.
   ============================================================ */

:root {
    --cream:      #faf6f0;
    --cream-deep: #f3ebe0;
    --sand:       #e9ddcc;
    --terra:      #c6603f;
    --terra-deep: #a84e30;
    --terra-soft: #e8a78b;
    --clay-bg:    #f6ede3;
    --ink:        #2b2018;
    --brown:      #5e4d3b;
    --brown-soft: #877256;
    --line:       #e6dac9;
    --white:      #ffffff;

    --serif: 'Fraunces', Georgia, serif;
    --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --radius: 18px;
    --shadow-sm: 0 1px 3px rgba(74,52,32,.06);
    --shadow:    0 18px 50px rgba(74,52,32,.12);
    --shadow-lg: 0 50px 90px rgba(74,52,32,.18);
    --maxw: 1240px;
}

/* Reset minimal scoped à la galerie (le body est partagé, on ne casse rien) */
.galerie-page { margin: 0; }
.galerie-page *, .galerie-page *::before, .galerie-page *::after { box-sizing: border-box; }
.galerie-page {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--cream);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
.galerie-page a { color: inherit; text-decoration: none; }
.galerie-page img { max-width: 100%; display: block; }
.galerie-page .container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ===== Header minimal ===== */
.g-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 36px;
    background: rgba(250,246,240,.85);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid transparent;
    transition: padding .3s, box-shadow .3s, border-color .3s, background .3s;
}
.g-header.scrolled {
    padding: 12px 36px;
    background: rgba(250,246,240,.95);
    border-bottom-color: var(--line);
    box-shadow: 0 6px 24px rgba(74,52,32,.06);
}
.g-brand {
    display: flex; align-items: center; gap: 11px;
    font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink);
    letter-spacing: -0.01em;
}
.g-brand-dot {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--terra); display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px;
}
.g-header-nav { display: flex; align-items: center; gap: 30px; }
.g-header-right { display: flex; align-items: center; gap: 22px; }
.g-header-link { font-size: 15px; font-weight: 500; color: var(--ink); transition: color .15s; }
.g-header-link:hover { color: var(--terra); }
.g-header-link-muted { color: var(--brown-soft); font-size: 14px; }

/* ===== Boutons ===== */
.g-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: var(--sans); font-size: 15px; font-weight: 600;
    padding: 12px 26px; border-radius: 100px; cursor: pointer;
    border: 1.5px solid transparent; transition: all .18s; white-space: nowrap;
    color: var(--ink); background: transparent; text-decoration: none;
}
/* Bouton plein terracotta → texte TOUJOURS blanc */
.g-btn-primary, .g-btn-primary:link, .g-btn-primary:visited { background: var(--terra); color: #fff; border-color: var(--terra); }
.g-btn-primary:hover { background: var(--terra-deep); border-color: var(--terra-deep); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow); }
/* Bouton foncé → texte crème */
.g-btn-dark, .g-btn-dark:link, .g-btn-dark:visited { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.g-btn-dark:hover { color: var(--cream); transform: translateY(-1px); box-shadow: var(--shadow); }
/* Bouton fantôme → texte sombre sur fond clair */
.g-btn-ghost { color: var(--ink); background: transparent; }
.g-btn-ghost:hover { color: var(--terra); }
/* Bouton contour → texte sombre, bordure */
.g-btn-outline { background: transparent; color: var(--ink); border-color: var(--sand); }
.g-btn-outline:hover { border-color: var(--terra); color: var(--terra); }
.g-btn-lg { padding: 17px 38px; font-size: 17px; }
.g-btn-xl { padding: 21px 50px; font-size: 18px; }
/* Bouton danger (suppression) */
.g-btn-danger, .g-btn-danger:link, .g-btn-danger:visited { background: transparent; color: #c0392b; border-color: #e3b3ab; }
.g-btn-danger:hover { background: #c0392b; color: #fff; border-color: #c0392b; }

/* ===== Hero plein écran avec mot animé ===== */
.g-hero {
    min-height: 100dvh; display: flex; align-items: center; position: relative;
    padding: 140px 0 90px;
}
.g-hero-inner { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 60px; align-items: center; width: 100%; }
.g-hero-inner > div:first-child { align-self: center; }
.g-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: var(--terra-deep);
    background: var(--white); border: 1px solid var(--line);
    padding: 8px 16px; border-radius: 100px; margin-bottom: 26px;
    box-shadow: var(--shadow-sm);
}
.g-hero h1 {
    font-family: var(--serif); font-weight: 500;
    font-size: 56px; line-height: 1.05; letter-spacing: -0.025em;
    color: var(--ink); margin-bottom: 18px;
}
.g-hero h1 em { font-style: italic; color: var(--terra); }
/* Sous-titre avec mot animé */
.g-hero-sub { font-family: var(--serif); font-size: 23px; color: var(--brown); margin-bottom: 22px; font-weight: 400; }
.g-rotator { display: inline-block; position: relative; color: var(--terra); font-style: italic; font-weight: 500; min-width: 5.7em; text-align: left; }
.g-rotator-word { display: inline-block; transition: opacity .4s ease, transform .4s ease; }
.g-rotator-word.out { opacity: 0; transform: translateY(-8px); }
.g-rotator-word.in  { opacity: 1; transform: translateY(0); }
.g-hero-lead { font-size: 19px; color: var(--brown); max-width: 500px; margin-bottom: 36px; }
.g-hero-cta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.g-hero-note { font-size: 14px; color: var(--brown-soft); margin-top: 22px; }
.g-hero-note strong { color: var(--brown); }

/* ===== Aperçu interactif : sélecteur de style de galerie ===== */
.g-hero-visual { position: relative; padding: 18px; }
.g-preview {
    background: var(--white); border: 1px solid var(--line); border-radius: 22px;
    box-shadow: var(--shadow-lg); overflow: hidden;
}
.g-preview-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--cream-deep);
}
.g-preview-dots { display: flex; gap: 6px; }
.g-preview-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--sand); display: block; }
.g-preview-url { font-size: 12px; color: var(--brown-soft); font-weight: 500; }

/* Hauteur FIXE quel que soit le layout → plus de saut au changement d'onglet */
.g-preview-stage { padding: 18px; display: grid; gap: 10px; height: 380px; transition: opacity .25s; }
.g-pcell { border-radius: 11px; background: linear-gradient(150deg, var(--terra-soft), var(--terra)); position: relative; overflow: hidden; }
.g-pcell::after { content:''; position:absolute; inset:0; background: linear-gradient(160deg, rgba(255,255,255,.18), transparent 60%); }
.g-pcell:nth-child(2) { background: linear-gradient(150deg,#edd2bd,#cf9a72); }
.g-pcell:nth-child(3) { background: linear-gradient(150deg,#e0b095,#bd7a56); }
.g-pcell:nth-child(4) { background: linear-gradient(150deg,#e8c8ad,#c88f63); }
.g-pcell:nth-child(5) { background: linear-gradient(150deg,#dcae90,#b87a55); }
.g-pcell:nth-child(6) { background: linear-gradient(150deg,#e5c4a6,#c2855e); }

/* Layout "Carré" : grille régulière 1:1, 2 rangées */
.g-preview-stage[data-layout="grid"] { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }

/* Layout "Aligné" : lignes paysage régulières, 3 rangées */
.g-preview-stage[data-layout="rows"] { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }

/* Layout "Adapté" : mosaïque, ratios variés mais hauteur totale identique */
.g-preview-stage[data-layout="masonry"] { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(6, 1fr); }
.g-preview-stage[data-layout="masonry"] .g-pcell:nth-child(1) { grid-row: span 4; }
.g-preview-stage[data-layout="masonry"] .g-pcell:nth-child(2) { grid-row: span 2; }
.g-preview-stage[data-layout="masonry"] .g-pcell:nth-child(3) { grid-row: span 3; }
.g-preview-stage[data-layout="masonry"] .g-pcell:nth-child(4) { grid-row: span 2; }
.g-preview-stage[data-layout="masonry"] .g-pcell:nth-child(5) { grid-row: span 4; }
.g-preview-stage[data-layout="masonry"] .g-pcell:nth-child(6) { grid-row: span 3; }

.g-float {
    position: absolute; background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg);
    padding: 12px 16px; display: flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 600; color: var(--ink);
}
.g-float .ic { width: 30px; height: 30px; border-radius: 9px; background: var(--clay-bg); color: var(--terra); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.g-float.f1 { bottom: 6px; right: 6px; }

/* ===== Sélecteur de style (section dédiée, gros) ===== */
.g-styler-section { background: var(--clay-bg); }
.g-styler { max-width: 1040px; margin: 0 auto; }

/* Onglets layout — gros, avec mini-icône schématique */
.g-styler-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.g-styler-tab {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--brown);
    background: var(--white); border: 2px solid var(--line); border-radius: 16px;
    padding: 18px 26px; cursor: pointer; transition: all .2s; min-width: 110px;
}
.g-styler-tab:hover { border-color: var(--terra-soft); transform: translateY(-2px); }
.g-styler-tab.active { border-color: var(--terra); color: var(--terra); box-shadow: var(--shadow); }
/* Mini-icône schématique du layout */
.g-styler-ico { display: grid; gap: 3px; width: 34px; height: 26px; }
.g-styler-ico i { background: var(--sand); border-radius: 2px; display: block; }
.g-styler-tab.active .g-styler-ico i { background: var(--terra-soft); }
.g-styler-ico { grid-template-columns: 1fr 1fr; }                 /* Carré : 4 carrés */
.g-styler-ico.rows { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; } /* Aligné : 3 bandes */
.g-styler-ico.mas { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
.g-styler-ico.mas i:nth-child(1) { grid-row: span 2; }            /* Mosaïque */
.g-styler-ico.mag { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.g-styler-ico.mag i:nth-child(1) { grid-row: span 2; }            /* Magazine : 1 grande + 2 */
.g-styler-ico.hero { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 2fr 1fr; }
.g-styler-ico.hero i:nth-child(1) { grid-column: span 3; }        /* Plein écran : 1 grande + bande */

/* Scène : hauteur fixe, fond commutable clair/sombre */
.g-styler-stage {
    --sgap: 10px; --sbg: var(--white);
    background: var(--sbg); border: 1px solid var(--line); border-radius: 20px;
    box-shadow: var(--shadow); padding: 22px; display: grid; gap: var(--sgap);
    height: 440px; transition: background .3s, gap .3s;
}
.g-styler-stage[data-bg="dark"] { --sbg: #241a13; border-color: #241a13; }
.g-styler-stage[data-gap="tight"]  { --sgap: 5px; }
.g-styler-stage[data-gap="normal"] { --sgap: 12px; }
.g-styler-stage[data-gap="wide"]   { --sgap: 22px; }

.g-scell { border-radius: 12px; overflow: hidden; position: relative; background: linear-gradient(150deg, var(--terra-soft), var(--terra)); }
.g-scell::after { content:''; position:absolute; inset:0; background: linear-gradient(160deg, rgba(255,255,255,.16), transparent 62%); }
.g-scell:nth-child(2) { background: linear-gradient(150deg,#edd2bd,#cf9a72); }
.g-scell:nth-child(3) { background: linear-gradient(150deg,#e0b095,#bd7a56); }
.g-scell:nth-child(4) { background: linear-gradient(150deg,#e8c8ad,#c88f63); }
.g-scell:nth-child(5) { background: linear-gradient(150deg,#dcae90,#b87a55); }
.g-scell:nth-child(6) { background: linear-gradient(150deg,#e5c4a6,#c2855e); }
.g-scell:nth-child(7) { background: linear-gradient(150deg,#e2b99c,#c5835d); }
.g-scell:nth-child(8) { background: linear-gradient(150deg,#ecd0b9,#caa078); }
.g-scell:nth-child(9) { background: linear-gradient(150deg,#ddb295,#ba7c58); }

/* Carré : grille 3x3 régulière */
.g-styler-stage[data-layout="grid"] { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }

/* Aligné : 3 lignes justifiées (largeurs variables) */
.g-styler-stage[data-layout="rows"] { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, 1fr); }
.g-styler-stage[data-layout="rows"] .g-scell:nth-child(1) { grid-column: span 2; }
.g-styler-stage[data-layout="rows"] .g-scell:nth-child(2) { grid-column: span 3; }
.g-styler-stage[data-layout="rows"] .g-scell:nth-child(3) { grid-column: span 1; }
.g-styler-stage[data-layout="rows"] .g-scell:nth-child(4) { grid-column: span 3; }
.g-styler-stage[data-layout="rows"] .g-scell:nth-child(5) { grid-column: span 1; }
.g-styler-stage[data-layout="rows"] .g-scell:nth-child(6) { grid-column: span 2; }
.g-styler-stage[data-layout="rows"] .g-scell:nth-child(7) { grid-column: span 1; }
.g-styler-stage[data-layout="rows"] .g-scell:nth-child(8) { grid-column: span 2; }
.g-styler-stage[data-layout="rows"] .g-scell:nth-child(9) { grid-column: span 3; }

/* Mosaïque : briques verticales */
.g-styler-stage[data-layout="masonry"] { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(8, 1fr); }
.g-styler-stage[data-layout="masonry"] .g-scell:nth-child(1) { grid-row: span 3; }
.g-styler-stage[data-layout="masonry"] .g-scell:nth-child(2) { grid-row: span 2; }
.g-styler-stage[data-layout="masonry"] .g-scell:nth-child(3) { grid-row: span 3; }
.g-styler-stage[data-layout="masonry"] .g-scell:nth-child(4) { grid-row: span 3; }
.g-styler-stage[data-layout="masonry"] .g-scell:nth-child(5) { grid-row: span 3; }
.g-styler-stage[data-layout="masonry"] .g-scell:nth-child(6) { grid-row: span 2; }
.g-styler-stage[data-layout="masonry"] .g-scell:nth-child(7) { grid-row: span 2; }
.g-styler-stage[data-layout="masonry"] .g-scell:nth-child(8) { grid-row: span 3; }
.g-styler-stage[data-layout="masonry"] .g-scell:nth-child(9) { grid-row: span 3; }

/* Magazine : 1 photo phare + remplissage éditorial */
.g-styler-stage[data-layout="magazine"] { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); }
.g-styler-stage[data-layout="magazine"] .g-scell:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.g-styler-stage[data-layout="magazine"] .g-scell:nth-child(6) { grid-column: span 2; }
.g-styler-stage[data-layout="magazine"] .g-scell:nth-child(9) { grid-column: span 2; }

/* Plein écran : 1 photo dominante + bande de vignettes */
.g-styler-stage[data-layout="hero"] { grid-template-columns: repeat(5, 1fr); grid-template-rows: 3fr 1fr; }
.g-styler-stage[data-layout="hero"] .g-scell:nth-child(1) { grid-column: 1 / -1; }
.g-styler-stage[data-layout="hero"] .g-scell:nth-child(n+7) { display: none; }

/* Options secondaires (ambiance, espacement) */
.g-styler-options { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.g-styler-opt-label { font-size: 14px; font-weight: 600; color: var(--brown); }
.g-styler-toggle { display: inline-flex; background: var(--white); border: 1px solid var(--line); border-radius: 100px; padding: 4px; gap: 2px; }
.g-styler-toggle button {
    font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--brown);
    border: none; background: transparent; padding: 8px 16px; border-radius: 100px;
    cursor: pointer; transition: all .18s;
}
.g-styler-toggle button:hover { color: var(--terra); }
.g-styler-toggle button.active { background: var(--terra); color: #fff; }

/* ===== Chips séances (élégant, sobre) ===== */
.g-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 820px; margin: 0 auto; }
.g-chip {
    font-family: var(--serif); font-size: 19px; font-style: italic; color: var(--brown);
    background: var(--white); border: 1px solid var(--line);
    padding: 11px 24px; border-radius: 100px; transition: all .2s; cursor: default;
    box-shadow: var(--shadow-sm);
}
.g-chip:hover { color: #fff; background: var(--terra); border-color: var(--terra); transform: translateY(-2px); }

/* ===== Sections ===== */
.g-section { padding: 100px 0; }
.g-section-head { max-width: 660px; margin: 0 auto 60px; text-align: center; }
.g-section-head .g-eyebrow { margin-bottom: 18px; }
.g-section-head h2 { font-family: var(--serif); font-weight: 500; font-size: 44px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 16px; }
.g-section-head h2 em { font-style: italic; color: var(--terra); }
.g-section-head p { font-size: 18px; color: var(--brown); }

/* Features — disposition alternée, pas la grille 3 col du scolaire */
.g-feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; margin-bottom: 110px; }
.g-feature-row:last-child { margin-bottom: 0; }
.g-feature-row.reverse .g-feature-text { order: 2; }
.g-feature-num { font-family: var(--serif); font-size: 15px; color: var(--terra); font-weight: 600; letter-spacing: .04em; margin-bottom: 14px; display: block; }
.g-feature-text h3 { font-family: var(--serif); font-weight: 500; font-size: 32px; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 16px; line-height: 1.15; }
.g-feature-text p { font-size: 17px; color: var(--brown); }
.g-feature-visual {
    aspect-ratio: 5/4; border-radius: 22px; box-shadow: var(--shadow); overflow: hidden;
    display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); font-size: 64px;
}
.g-fv1 { background: linear-gradient(150deg,#e0b49a,#c07d5b); }
.g-fv2 { background: linear-gradient(150deg,#e8cdb4,#caa078); }
.g-fv3 { background: linear-gradient(150deg,#d9a98c,#b87a5a); }

.g-seances-bg { background: var(--clay-bg); }

/* Pricing */
.g-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1000px; margin: 0 auto; }
.g-plan { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 36px 30px; position: relative; box-shadow: var(--shadow-sm); }
.g-plan.featured { border-color: var(--terra); box-shadow: var(--shadow); transform: scale(1.04); }
.g-plan-tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--terra); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 16px; border-radius: 100px; white-space: nowrap; }
.g-plan h3 { font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.g-plan .price { font-family: var(--serif); font-size: 44px; color: var(--ink); margin: 12px 0 4px; }
.g-plan .price small { font-family: var(--sans); font-size: 15px; color: var(--brown-soft); font-weight: 500; }
.g-plan .price-desc { font-size: 14px; color: var(--brown-soft); margin-bottom: 24px; }
.g-plan ul { list-style: none; margin-bottom: 28px; padding: 0; }
.g-plan li { font-size: 14px; color: var(--brown); padding: 9px 0; display: flex; gap: 11px; }
.g-plan li::before { content: '✓'; color: var(--terra); font-weight: 700; }
.g-plan .g-btn { width: 100%; }

/* FAQ */
.g-faq { max-width: 780px; margin: 0 auto; }
.g-faq-item { border-bottom: 1px solid var(--line); padding: 24px 0; }
.g-faq-item h4 { font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 9px; }
.g-faq-item p { font-size: 15px; color: var(--brown); }

/* CTA final */
.g-cta-final { background: linear-gradient(140deg, var(--terra), var(--terra-deep)); border-radius: 28px; padding: 76px 40px; text-align: center; color: #fff; position: relative; overflow: hidden; }
.g-cta-final::before { content:'◍'; position:absolute; font-size: 380px; opacity:.06; top:-90px; right:-40px; line-height:1; }
.g-cta-final h2 { font-family: var(--serif); font-weight: 500; font-size: 46px; letter-spacing: -0.02em; margin-bottom: 16px; position: relative; }
.g-cta-final p { font-size: 19px; color: rgba(255,255,255,.88); max-width: 500px; margin: 0 auto 32px; position: relative; }

/* ===== Footer ===== */
.g-footer { background: var(--ink); color: #cdbfae; padding: 64px 0 38px; }
.g-footer-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.09); flex-wrap: wrap; }
.g-footer-big { font-family: var(--serif); font-weight: 500; font-size: 38px; color: #fff; letter-spacing: -0.02em; max-width: 480px; line-height: 1.15; }
.g-footer-big em { font-style: italic; color: var(--terra-soft); }
.g-footer-links { display: flex; gap: 40px; flex-wrap: wrap; }
.g-footer-links a { font-size: 15px; color: #cdbfae; transition: color .15s; }
.g-footer-links a:hover { color: #fff; }
.g-footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; font-size: 13px; color: #a08e7c; flex-wrap: wrap; gap: 12px; }

/* ===== Responsive ===== */
@media (max-width: 860px) {
    .g-hero-inner, .g-feature-row, .g-feature-row.reverse .g-feature-text { grid-template-columns: 1fr; gap: 44px; }
    .g-feature-row.reverse .g-feature-text { order: 0; }
    .g-hero h1 { font-size: 40px; }
    .g-pricing { grid-template-columns: 1fr; }
    .g-chip { font-size: 16px; padding: 9px 18px; }
    .g-styler-tab { min-width: 0; flex: 1 1 40%; padding: 14px 12px; font-size: 13px; }
    .g-styler-stage { height: 320px; padding: 14px; }
    .g-plan.featured { transform: none; }
    .g-section-head h2 { font-size: 32px; }
    .g-hero-visual { max-width: 440px; margin: 0 auto; }
    .g-footer-big { font-size: 28px; }
}
@media (max-width: 1000px) {
    .g-header-nav { display: none; }
}
@media (max-width: 760px) {
    .g-header { padding: 16px 20px; }
    .g-header-right .g-header-link { display: none; }
}

/* ===== Pages simples (auth, recherche, contact, intérieures) ===== */
.g-page { padding: 150px 0 90px; min-height: 70vh; }
.g-page-narrow { max-width: 540px; margin: 0 auto; }
.g-page-head { text-align: center; margin-bottom: 40px; }
.g-page-head .g-eyebrow { margin-bottom: 16px; }
.g-page-head h1 { font-family: var(--serif); font-weight: 500; font-size: 42px; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; margin-bottom: 14px; }
.g-page-head h1 em { font-style: italic; color: var(--terra); }
.g-page-head p { font-size: 18px; color: var(--brown); }

/* Alertes formulaire */
.g-alert { border-radius: 12px; padding: 13px 16px; font-size: 14px; margin-bottom: 18px; }
.g-alert-error { background: #fdecea; border: 1px solid #f5c6c0; color: #a8341f; }
.g-alert-success { background: #eaf6ec; border: 1px solid #bfe3c6; color: #2e6b3a; }

/* Carte formulaire */
.g-card { background: var(--white); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 40px; }
.g-field { margin-bottom: 18px; }
.g-field label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.g-input {
    width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink);
    background: var(--cream); border: 1.5px solid var(--line); border-radius: 12px;
    padding: 13px 16px; transition: border-color .18s, background .18s;
}
.g-input::placeholder { color: var(--brown-soft); }
.g-input:focus { outline: none; border-color: var(--terra); background: #fff; }
.g-input-error { border-color: #c0392b; background: #fdecea; }
.g-field-row { display: flex; gap: 14px; }
.g-field-row .g-field { flex: 1; }
.g-form-foot { font-size: 14px; color: var(--brown); text-align: center; margin-top: 20px; }
.g-form-foot a { color: var(--terra); font-weight: 600; }
.g-form-aside { font-size: 13px; color: var(--brown-soft); margin-top: 8px; }
.g-divider { display: flex; align-items: center; gap: 14px; margin: 24px 0; color: var(--brown-soft); font-size: 13px; }
.g-divider::before, .g-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.g-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--brown); }
.g-checkbox input { margin-top: 3px; accent-color: var(--terra); }

/* Recherche d'album */
.g-search-box { display: flex; gap: 10px; }
.g-search-box .g-input { flex: 1; }
.g-search-help { background: var(--clay-bg); border-radius: 16px; padding: 22px 24px; margin-top: 28px; }
.g-search-help h4 { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.g-search-help p { font-size: 14px; color: var(--brown); }

/* Exemples */
.g-examples-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.g-example {
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
    background: var(--white); border: 1px solid var(--line); transition: transform .2s, box-shadow .2s;
}
.g-example:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.g-example-cover { aspect-ratio: 4/3; position: relative; }
.g-example-meta { padding: 16px 18px; }
.g-example-meta h3 { font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--ink); margin-bottom: 3px; }
.g-example-meta span { font-size: 13px; color: var(--brown-soft); }

/* Labo */
.g-labo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 10px; }
.g-labo-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; box-shadow: var(--shadow-sm); }
.g-labo-ic { width: 50px; height: 50px; border-radius: 14px; background: var(--clay-bg); color: var(--terra); display: flex; align-items: center; justify-content: center; font-size: 21px; margin-bottom: 18px; }
.g-labo-card h3 { font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 9px; }
.g-labo-card p { font-size: 15px; color: var(--brown); }

@media (max-width: 860px) {
    .g-examples-grid, .g-labo-grid { grid-template-columns: 1fr; }
    .g-page { padding: 120px 0 70px; }
    .g-page-head h1 { font-size: 32px; }
    .g-card { padding: 28px 22px; }
    .g-field-row { flex-direction: column; gap: 0; }
}

/* ============================================================
   ESPACE PHOTOGRAPHE (dashboard) — layout sidebar
   ============================================================ */
.g-espace { display: flex; min-height: 100vh; background: var(--cream); }

.g-side {
    width: 252px; flex-shrink: 0; background: var(--white); border-right: 1px solid var(--line);
    display: flex; flex-direction: column; padding: 26px 20px; position: sticky; top: 0; height: 100vh;
}
.g-side-brand { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 9px; margin-bottom: 34px; }
.g-side-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.g-side-link { font-size: 15px; font-weight: 500; color: var(--brown); padding: 11px 14px; border-radius: 10px; transition: all .15s; }
.g-side-link:hover { background: var(--clay-bg); color: var(--terra); }
.g-side-link.active { background: var(--clay-bg); color: var(--terra); font-weight: 600; }
.g-side-foot { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.g-side-logout { font-size: 14px; color: var(--brown-soft); text-align: center; }
.g-side-logout:hover { color: var(--terra); }

.g-main { flex: 1; padding: 44px 56px; min-width: 0; }
.g-espace-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 38px; flex-wrap: wrap; }
.g-espace-head h1 { font-family: var(--serif); font-weight: 500; font-size: 36px; letter-spacing: -0.02em; color: var(--ink); }
.g-espace-head p { font-size: 16px; color: var(--brown); margin-top: 4px; }

/* Stats */
.g-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 52px; }
.g-stat { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 26px 28px; }
.g-stat-label { display: block; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--brown-soft); margin-bottom: 14px; }
.g-stat-val { display: block; font-family: var(--serif); font-size: 38px; color: var(--ink); line-height: 1; margin-bottom: 10px; }
.g-stat-sub { font-size: 13px; color: var(--brown-soft); }

.g-espace-section { margin-top: 16px; }
.g-section-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.g-espace-section h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--ink); }

/* État vide */
.g-empty { text-align: center; background: var(--white); border: 1px dashed var(--sand); border-radius: 20px; padding: 64px 30px; }
.g-empty svg { margin: 0 auto 18px; display: block; }
.g-empty-ic { font-size: 44px; margin-bottom: 16px; }
.g-empty h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--ink); margin-bottom: 8px; }
.g-empty p { font-size: 15px; color: var(--brown); margin-bottom: 24px; }

/* Grille galeries */
.g-gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.g-gal-card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.g-gal-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.g-gal-cover { aspect-ratio: 4/3; position: relative; background: var(--clay-bg); }
.g-gal-cover img { width: 100%; height: 100%; object-fit: cover; }
.g-gal-cover-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--brown-soft); font-size: 14px; }
.g-gal-badge { position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 100px; background: #fff; }
.g-gal-badge-publiee { background: #eaf6ec; color: #2e6b3a; }
.g-gal-badge-brouillon { background: var(--clay-bg); color: var(--brown); }
.g-gal-badge-archivee { background: #f1ece6; color: var(--brown-soft); }
.g-gal-meta { padding: 16px 18px; }
.g-gal-meta h3 { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--ink); margin-bottom: 3px; }
.g-gal-meta span { font-size: 13px; color: var(--brown-soft); }

/* Formulaire large (création) */
.g-form-wide { display: flex; flex-direction: column; gap: 22px; max-width: 760px; }
.g-card-title { font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--ink); margin-bottom: 20px; }

/* ===== Wizard (création en étapes) ===== */
.g-steps { display: flex; align-items: center; gap: 12px; max-width: 680px; margin: 0 0 36px; }
.g-step { display: flex; align-items: center; gap: 12px; }
.g-step-num {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px; border: 2px solid var(--line);
    color: var(--brown-soft); background: var(--white); transition: all .2s;
}
.g-step-label { font-size: 14px; font-weight: 600; color: var(--brown-soft); white-space: nowrap; transition: color .2s; }
.g-step.active .g-step-num { border-color: var(--terra); background: var(--terra); color: #fff; }
.g-step.active .g-step-label { color: var(--ink); }
.g-step.done .g-step-num { border-color: var(--terra); background: var(--clay-bg); color: var(--terra); }
.g-step.done .g-step-label { color: var(--brown); }
.g-step.done { cursor: pointer; }
.g-step-line { flex: 1; height: 2px; background: var(--line); min-width: 24px; }

/* Choix de durée — état actif via :has (pas de dépendance JS) */
.g-duree-choices { display: flex; gap: 12px; flex-wrap: wrap; }
.g-duree-choice { border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 22px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--brown); transition: all .15s; }
.g-duree-choice:hover { border-color: var(--terra-soft); }
.g-duree-choice:has(input:checked) { border-color: var(--terra); color: var(--terra); background: var(--clay-bg); }
.g-duree-choice:focus-within { outline: 2px solid var(--terra); outline-offset: 2px; }
.g-duree-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.g-duree-choice em { font-style: normal; font-weight: 500; color: var(--brown-soft); font-size: 13px; }
.g-duree-choice:has(input:checked) em { color: var(--terra); }

/* Wizard — pleine page (largeur confortable, pas 100% brut pour la lisibilité) */
.g-wizard { max-width: 1080px; }
.g-wizard-panel { display: none; gap: 22px; }
.g-wizard-panel.active { display: flex; flex-direction: column; animation: gFade .25s ease; }
/* Étape 2 : 3 cartes sur 2 colonnes pour exploiter la largeur */
.g-wizard-panel[data-panel="2"].active { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.g-wizard-panel[data-panel="2"] .g-wizard-nav { grid-column: 1 / -1; }
@keyframes gFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.g-wizard-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.g-dropzone.drag { border-color: var(--terra); background: var(--clay-bg); }

@media (max-width: 860px) {
    .g-wizard-panel[data-panel="2"].active { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .g-step-label { display: none; }
    .g-steps { gap: 8px; }
}
.g-input[type="date"], select.g-input { cursor: pointer; }
select.g-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23877256' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }

/* Radio cards */
.g-radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.g-radio-card { display: flex; gap: 11px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: border-color .15s; }
.g-radio-card:has(input:checked) { border-color: var(--terra); background: var(--clay-bg); }
.g-radio-card input { margin-top: 3px; accent-color: var(--terra); }
.g-radio-card strong { display: block; font-size: 15px; color: var(--ink); margin-bottom: 2px; }
.g-radio-card small { font-size: 13px; color: var(--brown-soft); }

/* Choix de layout — état actif via :has, input masqué mais focusable */
.g-layout-choices { display: flex; flex-wrap: wrap; gap: 12px; }
.g-layout-choice { display: flex; flex-direction: column; align-items: center; gap: 9px; border: 1.5px solid var(--line); border-radius: 14px; padding: 16px 20px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--brown); transition: all .15s; min-width: 88px; flex: 1; }
.g-layout-choice:hover { border-color: var(--terra-soft); }
.g-layout-choice:has(input:checked) { border-color: var(--terra); color: var(--terra); }
.g-layout-choice:focus-within { outline: 2px solid var(--terra); outline-offset: 2px; }
.g-layout-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.g-layout-choice .g-styler-ico { width: 30px; height: 24px; }
.g-layout-choice:has(input:checked) .g-styler-ico i { background: var(--terra-soft); }

/* Dropzone */
.g-dropzone { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 2px dashed var(--sand); border-radius: 16px; padding: 40px; cursor: pointer; text-align: center; transition: all .18s; }
.g-dropzone:hover { border-color: var(--terra); background: var(--clay-bg); }
.g-dropzone.has-files { border-color: var(--terra); background: var(--clay-bg); }
.g-dropzone-ic { display: block; }
.g-dropzone strong { font-size: 16px; color: var(--ink); }
.g-dropzone small { font-size: 13px; color: var(--brown-soft); }
.g-dropzone-count { font-size: 14px; color: var(--terra); font-weight: 600; margin-top: 12px; text-align: center; }

/* Photos d'une galerie */
.g-gal-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.g-gal-photo { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--clay-bg); }
.g-gal-photo img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
    .g-espace { flex-direction: column; }
    .g-side { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px; }
    .g-side-nav { flex-direction: row; flex: 1 1 100%; order: 3; flex-wrap: wrap; }
    .g-side-foot { flex-direction: row; border-top: none; padding-top: 0; }
    .g-main { padding: 28px 20px; }
    .g-stats { grid-template-columns: 1fr 1fr; }
    .g-gal-grid { grid-template-columns: 1fr 1fr; }
    .g-radio-cards { grid-template-columns: 1fr; }
    .g-gal-photos { grid-template-columns: 1fr 1fr; }
}

/* ===== Page détail galerie (gestion du reportage) ===== */
.g-detail-kicker { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--terra); margin-bottom: 4px; }
.g-detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.g-detail-main { display: flex; flex-direction: column; gap: 24px; }
.g-detail-side { display: flex; flex-direction: column; gap: 24px; }

.g-deflist { display: flex; flex-direction: column; }
.g-deflist > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.g-deflist > div:last-child { border-bottom: none; }
.g-deflist dt { font-size: 14px; color: var(--brown-soft); font-weight: 500; }
.g-deflist dd { font-size: 15px; color: var(--ink); font-weight: 600; text-align: right; }
.g-muted { color: var(--brown-soft); font-weight: 400; }

.g-link { color: var(--terra); font-weight: 600; font-size: 14px; }
.g-link:hover { text-decoration: underline; }
.g-link-danger { color: #c0392b; }

.g-copyfield { display: flex; gap: 10px; }
.g-copyfield .g-input { flex: 1; font-size: 14px; color: var(--brown); }

@media (max-width: 1000px) {
    .g-detail-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CÔTÉ CLIENT (galerie publique vue par les invités)
   ============================================================ */

/* Page d'accès (mot de passe) */
.g-client-acces { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.g-acces-box { background: var(--white); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 44px 40px; max-width: 420px; width: 100%; text-align: center; }
.g-acces-box h1 { font-family: var(--serif); font-weight: 500; font-size: 28px; color: var(--ink); margin-bottom: 10px; }
.g-acces-sub { font-size: 15px; color: var(--brown); margin-bottom: 26px; }
.g-acces-box .g-alert { text-align: left; }

/* En-tête galerie client */
.g-client { background: var(--cream); -webkit-tap-highlight-color: transparent; }
.g-client-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: nowrap; padding: 14px 40px; position: sticky; top: 0; z-index: 20; background: rgba(250,246,240,.9); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); }
.g-client-head .g-client-actions { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; flex: 0 0 auto; }
/* En-tête compact (page panier) */
.g-client-head-slim { padding: 10px 40px; }
/* Nom du photographe : centré sur toute la largeur du header (indépendant du logo/actions) */
.g-head-photographe { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 50%; font-size: 14px; color: var(--brown-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; pointer-events: none; }
.g-head-photographe a, .g-head-photographe strong { pointer-events: auto; }
.g-head-photographe strong { color: var(--ink); font-weight: 600; }
.g-head-tel strong { color: var(--terra); }
.g-client-dark .g-head-photographe { color: #b9a892; }
.g-client-dark .g-head-photographe strong { color: #f3e9dd; }
/* Barre d'actions au-dessus de la grille : filtre favoris (gauche) + télécharger/panier (droite) */
.g-grid-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 0 24px 18px; flex-wrap: wrap; }
.g-toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Onglets de sections (albums) côté client */
.g-client-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; margin: 0 0 26px; padding: 0 24px; }
.g-client-tab { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--brown); background: transparent; border: 1.5px solid var(--line); padding: 9px 18px; border-radius: 100px; cursor: pointer; transition: all .15s; }
.g-client-tab:hover { border-color: var(--terra-soft); color: var(--terra); }
.g-client-tab.is-active { background: var(--terra); border-color: var(--terra); color: #fff; }
.g-client-dark .g-client-tab { border-color: #3a2d22; color: #d8c8b6; }
.g-client-dark .g-client-tab.is-active { background: var(--terra); border-color: var(--terra); color: #fff; }
.g-client-hero { text-align: center; padding: 60px 24px 44px; max-width: 760px; margin: 0 auto; }
.g-client-hero h1 { font-family: var(--serif); font-weight: 500; font-size: 46px; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; overflow-wrap: break-word; hyphens: auto; }
.g-client-date { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--terra); margin-top: 10px; }
.g-client-desc { font-size: 17px; color: var(--brown); margin-top: 16px; }
.g-client-count { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--brown-soft); margin-top: 22px; }
.g-client-empty { text-align: center; color: var(--brown-soft); padding: 60px 0; }

/* Grilles client selon le layout choisi — pleine largeur immersive */
.g-client-grid { padding: 0 24px 64px; gap: 12px; width: 100%; margin: 0; }
/* Espacement personnalisable */
.g-client-grid[data-gap="tight"] { gap: 4px; }
.g-client-grid[data-gap="tight"][data-layout="masonry"] { column-gap: 4px; }
.g-client-grid[data-gap="tight"][data-layout="masonry"] .g-client-cell { margin-bottom: 4px; }
.g-client-grid[data-gap="wide"] { gap: 24px; }
.g-client-grid[data-gap="wide"][data-layout="masonry"] { column-gap: 24px; }
.g-client-grid[data-gap="wide"][data-layout="masonry"] .g-client-cell { margin-bottom: 24px; }
.g-client-cell { margin: 0; overflow: hidden; border-radius: 6px; cursor: zoom-in; background: var(--clay-bg); position: relative; }
.g-client-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease, opacity .4s ease; }
/* Zoom au survol uniquement sur appareils avec vrai hover (pas le tactile) */
@media (hover: hover) { .g-client-cell:hover img { transform: scale(1.03); } }

/* Spinner pendant le chargement d'une photo : image masquée, spinner centré */
.g-client-cell.is-loading img { opacity: 0; }
.g-cell-spinner { position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 2.5px solid rgba(0,0,0,.12); border-top-color: var(--terra); border-radius: 50%; animation: gSpin .7s linear infinite; opacity: 0; transition: opacity .2s; pointer-events: none; }
.g-client-cell.is-loading .g-cell-spinner { opacity: 1; }
.g-client-dark .g-cell-spinner { border-color: rgba(255,255,255,.18); border-top-color: var(--terra-soft); }
@keyframes gSpin { to { transform: rotate(360deg); } }

/* Sentinelle de chargement progressif (en bas de grille) */
.g-grid-sentinel { display: flex; align-items: center; justify-content: center; padding: 30px 0 50px; }
.g-spinner-lg { position: static; margin: 0; width: 32px; height: 32px; opacity: 1; }

/* Carré : grille régulière 1:1 */
.g-client-grid[data-layout="grid"] { display: grid; grid-template-columns: repeat(4, 1fr); }
.g-client-grid[data-layout="grid"] .g-client-cell { aspect-ratio: 1; }

/* Aligné : lignes paysage régulières */
.g-client-grid[data-layout="rows"] { display: grid; grid-template-columns: repeat(3, 1fr); }
.g-client-grid[data-layout="rows"] .g-client-cell { aspect-ratio: 3/2; }

/* Mosaïque : colonnes verticales (masonry CSS columns) */
.g-client-grid[data-layout="masonry"] { column-count: 4; column-gap: 12px; }
.g-client-grid[data-layout="masonry"] .g-client-cell { break-inside: avoid; margin-bottom: 12px; aspect-ratio: var(--ratio, 3/4); }
.g-client-grid[data-layout="masonry"] .g-client-cell img { height: 100%; }

/* Magazine : 1 grande tous les 5 + remplissage */
.g-client-grid[data-layout="magazine"] { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; }
.g-client-grid[data-layout="magazine"] .g-client-cell { aspect-ratio: 1; }
.g-client-grid[data-layout="magazine"] .g-client-cell:nth-child(8n+1) { grid-column: span 2; grid-row: span 2; }

/* Plein écran : une photo par ligne, grande (centrée pour rester lisible) */
.g-client-grid[data-layout="hero"] { display: flex; flex-direction: column; gap: 16px; max-width: 1100px; margin: 0 auto; }
.g-client-grid[data-layout="hero"] .g-client-cell { aspect-ratio: 3/2; cursor: zoom-in; }

/* Grands écrans : plus de colonnes pour exploiter la pleine largeur sans agrandir les photos à l'excès */
@media (min-width: 1600px) {
    .g-client-grid[data-layout="grid"] { grid-template-columns: repeat(5, 1fr); }
    .g-client-grid[data-layout="rows"] { grid-template-columns: repeat(4, 1fr); }
    .g-client-grid[data-layout="masonry"] { column-count: 5; }
    .g-client-grid[data-layout="magazine"] { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 2100px) {
    .g-client-grid[data-layout="grid"] { grid-template-columns: repeat(6, 1fr); }
    .g-client-grid[data-layout="rows"] { grid-template-columns: repeat(5, 1fr); }
    .g-client-grid[data-layout="masonry"] { column-count: 6; }
    .g-client-grid[data-layout="magazine"] { grid-template-columns: repeat(6, 1fr); }
}

/* Ambiance sombre */
.g-client-dark { background: #1a130d; }
.g-client-dark .g-client-head { background: rgba(26,19,13,.9); border-bottom-color: #2e231a; }
.g-client-dark .g-brand, .g-client-dark .g-client-hero h1 { color: #f3e9dd; }
.g-client-dark .g-client-desc, .g-client-dark .g-client-count { color: #b9a892; }
.g-client-dark .g-client-cell { background: #2e231a; }
.g-client-dark .g-client-footer { color: #b9a892; }

.g-client-footer { text-align: center; padding: 36px; font-size: 13px; color: var(--brown-soft); border-top: 1px solid var(--line); }
.g-client-footer a { color: var(--terra); font-weight: 600; }

/* Actions sur une vignette client (favori, panier) — la cellule est déjà position:relative */
/* Favori : haut à droite */
.g-cell-fav { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(255,255,255,.92); color: #6b5b4d; cursor: pointer; opacity: 0; transition: opacity .15s, transform .12s, background .15s, color .15s; backdrop-filter: blur(2px); }
.g-client-cell:hover .g-cell-fav { opacity: 1; }
.g-cell-fav:hover { transform: scale(1.08); background: #fff; color: #e8568f; }
.g-cell-fav:hover svg path { fill: #e8568f; }
.g-cell-fav.is-fav { opacity: 1; background: #fff; color: #e8568f; animation: gPop .28s ease; }
.g-cell-fav.is-fav svg path { fill: #e8568f; }

/* Boutons au milieu : icônes seules (panier toujours + télécharger si gratuit) avec tooltip */
.g-cell-mid { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; opacity: 0; transition: opacity .15s; pointer-events: none; }
.g-client-cell:hover .g-cell-mid { opacity: 1; }
.g-cell-midbtn { position: relative; pointer-events: auto; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--ink); cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.18); transition: transform .12s, background .15s, color .15s; backdrop-filter: blur(2px); }
.g-cell-midbtn:hover { transform: translateY(-1px) scale(1.05); background: var(--terra); color: #fff; }
.g-cell-midbtn:hover svg path { stroke: #fff; }
.g-cell-cart.is-in { background: var(--terra); color: #fff; }
.g-cell-cart.is-in svg path { stroke: #fff; }
/* Tooltip au survol du bouton (libellé) */
.g-cell-midbtn[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: #1a130d; color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; padding: 5px 10px; border-radius: 7px; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.g-cell-midbtn[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
@keyframes gPop { 0% { transform: scale(.8); } 55% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* Bouton filtre favoris dans le header */
.g-client-favtoggle { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1.5px solid var(--line); color: var(--brown); border-radius: 100px; padding: 8px 14px; font-family: var(--sans); font-weight: 600; font-size: 14px; cursor: pointer; transition: all .15s; }
.g-client-favtoggle:hover { border-color: #f3a9c6; color: #e8568f; }
.g-client-favtoggle.is-on { background: #e8568f; border-color: #e8568f; color: #fff; }
.g-client-favtoggle.is-on svg path { fill: #fff; }
.g-client-dark .g-client-favtoggle { border-color: #3a2d22; color: #d8c8b6; }

/* Pastille compteur panier */
.g-cart-link { position: relative; }
.g-cart-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 100px; background: #fff; color: var(--terra); font-size: 12px; font-weight: 700; }
.g-cart-count[hidden] { display: none; }

/* Lightbox */
.g-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(20,14,9,.94); display: flex; align-items: center; justify-content: center; }
.g-lightbox[hidden] { display: none; }
.g-lb-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 92vw; }
.g-lightbox img { max-width: 90vw; max-height: 80vh; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.g-lb-name { color: #f3e9dd; font-size: 13px; font-weight: 500; opacity: .8; max-width: 80vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }

/* Barre d'icônes en haut de la lightbox (icônes seules + tooltip) */
.g-lb-topbar { position: absolute; top: 18px; right: 22px; display: flex; gap: 8px; z-index: 2; }
.g-lb-ico { position: relative; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #f3e9dd; border-radius: 50%; cursor: pointer; font-size: 26px; line-height: 1; transition: background .15s, color .15s, transform .12s; }
.g-lb-ico:hover { background: rgba(255,255,255,.24); transform: translateY(-1px); }
.g-lb-ico.is-on { background: var(--terra); border-color: var(--terra); color: #fff; }
.g-lb-ico.is-on svg path { fill: #fff; }
#lbFav.is-on { background: #e8568f; border-color: #e8568f; }
.g-lb-ico-warn:hover { background: rgba(192,57,43,.9); border-color: rgba(192,57,43,.9); color: #fff; }
/* Tooltip au survol */
.g-lb-ico[data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: #1a130d; color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; padding: 5px 10px; border-radius: 7px; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.g-lb-ico[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

.g-lb-prev, .g-lb-next { position: absolute; background: rgba(0,0,0,.45); border: none; color: #fff; cursor: pointer; border-radius: 50%; width: 48px; height: 48px; font-size: 26px; line-height: 1; transition: background .15s; z-index: 2; }
.g-lb-prev:hover, .g-lb-next:hover { background: rgba(0,0,0,.7); }
.g-lb-prev { left: 26px; top: 50%; transform: translateY(-50%); }
.g-lb-next { right: 26px; top: 50%; transform: translateY(-50%); }

/* Sélecteur de langue */
.g-lang { position: relative; }
.g-lang-btn { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1.5px solid var(--line); color: var(--brown); border-radius: 100px; padding: 7px 12px; font-family: var(--sans); font-weight: 600; font-size: 13px; cursor: pointer; transition: all .15s; }
.g-lang-btn:hover { border-color: var(--terra-soft); color: var(--terra); }
.g-lang-caret { opacity: .6; flex: 0 0 auto; }
.g-lang-menu { position: absolute; top: calc(100% + 6px); right: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; min-width: 170px; z-index: 50; }
.g-lang-menu[hidden] { display: none; }
.g-lang-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--ink); font-weight: 500; }
.g-lang-item:hover { background: var(--clay-bg); color: var(--terra); }
.g-lang-item.is-active { color: var(--terra); font-weight: 700; }
.g-client-dark .g-lang-btn { border-color: #3a2d22; color: #d8c8b6; }
/* Drapeaux (flag-icons) : taille homogène, coins légèrement arrondis */
.g-flag.fi { width: 22px; height: 15px; border-radius: 3px; line-height: 1; box-shadow: 0 0 0 1px rgba(0,0,0,.06); flex: 0 0 auto; }

/* Bloc photographe en pied de galerie */
.g-photographe { max-width: 900px; margin: 20px auto 0; padding: 0 24px; }
.g-photographe-inner { display: flex; align-items: center; gap: 24px; padding: 28px 30px; background: var(--clay-bg); border-radius: 18px; flex-wrap: wrap; }
.g-photographe-logo { flex: 0 0 auto; }
.g-photographe-logo img { height: 64px; width: auto; max-width: 140px; object-fit: contain; }
.g-photographe-kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brown-soft); }
.g-photographe-info h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--ink); margin: 4px 0 12px; }
.g-photographe-contacts { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.g-photographe-line { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--brown); }
.g-photographe-line:hover { color: var(--terra); }
.g-client-dark .g-photographe-inner { background: #2e231a; }
.g-client-dark .g-photographe-info h3 { color: #f3e9dd; }
.g-client-dark .g-photographe-line { color: #c8b8a4; }

/* Toast client */
.g-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 400; background: #2b2018; color: #fff; padding: 13px 22px; border-radius: 12px; font-size: 14px; font-weight: 500; box-shadow: 0 14px 40px rgba(0,0,0,.3); opacity: 0; transition: opacity .3s, transform .3s; max-width: 90vw; text-align: center; }
.g-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Modale côté client (réutilise .g-modal mais fond clair forcé) */
.g-client-modal .g-modal-box { background: #fff; }

/* Page panier client */
.g-cart-wrap { max-width: 1000px; margin: 0 auto; padding: 40px 24px 60px; }
.g-cart-title { font-family: var(--serif); font-weight: 500; font-size: 34px; color: var(--ink); }
.g-client-dark .g-cart-title { color: #f3e9dd; }
.g-cart-sub { color: var(--brown-soft); margin-top: 4px; margin-bottom: 28px; }
.g-cart-empty { text-align: center; padding: 60px 20px; color: var(--brown-soft); }
.g-cart-empty p { margin-bottom: 18px; }

/* Liste du panier : une ligne par photo (vignette / nom+album / supprimer) */
.g-cart-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.g-cart-row { display: flex; align-items: flex-start; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--line); }
/* Miniature au RATIO de la photo (largeur fixe, hauteur libre bornée), sans rognage. */
.g-cart-thumb { width: 72px; height: auto; max-height: 96px; flex: 0 0 auto; object-fit: contain; border-radius: 10px; background: var(--clay-bg); }
.g-cart-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.g-cart-name { font-size: 15px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-cart-album { font-size: 13px; color: var(--brown-soft); }
.g-cart-remove { flex: 0 0 auto; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--line); border-radius: 9px; color: #c0392b; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.g-cart-remove:hover { background: #c0392b; border-color: #c0392b; color: #fff; }
.g-client-dark .g-cart-name { color: #f3e9dd; }
.g-client-dark .g-cart-row { border-color: #2e231a; }
.g-client-dark .g-cart-list { border-color: #2e231a; }

/* En-tête de colonnes (style tableau) */
.g-cart-head { display: grid; grid-template-columns: 1fr 90px 90px 40px; gap: 12px; padding: 0 22px; margin-top: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brown-soft); }
.g-cart-head-qte, .g-cart-head-prix { text-align: right; }

/* Bloc photo : vignette + nom, puis ses rangées d'articles */
/* Chaque photo = une carte blanche pour aérer le panier */
.g-cart-list { border-top: none; display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.g-cart-photo { padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: var(--shadow-sm); }
.g-cart-photohead { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.g-client-dark .g-cart-photo { background: #241a12; border-color: #3a2d22; }
.g-client-dark .g-cart-photohead { border-color: #3a2d22; }
.g-cart-photoinfo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.g-cart-subtotal { display: none; }

/* Rangée d'article (un format) en grille tableau */
.g-art-row { display: grid; grid-template-columns: 1fr 90px 90px 40px; gap: 12px; align-items: center; padding: 10px 4px; }
.g-art-row + .g-art-row { border-top: 1px solid var(--line); }
.g-art-article { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.g-art-nom { font-size: 15px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.g-art-size { font-size: 12px; color: var(--brown-soft); }
.g-art-qte { display: flex; justify-content: flex-end; }
/* Stepper quantité : − 1 + */
.g-qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 100px; overflow: hidden; background: var(--white); }
.g-qty-btn { width: 30px; height: 32px; border: none; background: transparent; color: var(--brown); font-size: 17px; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.g-qty-btn:hover { background: var(--clay-bg); color: var(--terra); }
.g-qty-val { width: 34px; height: 32px; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink); background: transparent; -moz-appearance: textfield; }
.g-qty-val:focus { outline: none; }
.g-client-dark .g-qty-stepper { background: #2e231a; border-color: #3a2d22; }
.g-client-dark .g-qty-btn { color: #d8c8b6; }
.g-client-dark .g-qty-btn:hover { background: #3a2d22; }
.g-client-dark .g-qty-val { color: #f3e9dd; border-color: #3a2d22; }

/* Options finition / bord (chips) */
.g-art-options { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 10px; }
.g-opt-group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.g-opt-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--brown-soft); margin-right: 4px; }
.g-opt-sep { color: var(--line); font-weight: 300; margin: 0 2px; user-select: none; }
.g-client-dark .g-opt-sep { color: #3a2d22; }

/* Bandeau d'info sur la qualité d'impression */
.g-quality-note { display: flex; gap: 12px; align-items: flex-start; background: #fff8ef; border: 1px solid #f0d9b8; border-radius: 12px; padding: 14px 16px; margin-bottom: 20px; }
.g-quality-note svg { color: #b06a1d; flex: 0 0 auto; margin-top: 2px; }
.g-quality-note strong { display: block; font-size: 14px; color: #8a5414; margin-bottom: 2px; }
.g-quality-note p { font-size: 13px; color: var(--brown); margin: 0; line-height: 1.45; }
.g-client-dark .g-quality-note { background: #2a2114; border-color: #4a3a22; }
.g-client-dark .g-quality-note strong { color: #e0b878; }
.g-client-dark .g-quality-note p { color: #c8b8a4; }
.g-opt-chip { font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--brown); background: var(--white); border: 1px solid var(--line); border-radius: 100px; padding: 4px 12px; cursor: pointer; transition: all .15s; }
.g-opt-chip:hover { border-color: var(--terra-soft); }
.g-opt-chip.is-on { background: var(--terra); border-color: var(--terra); color: #fff; }
.g-client-dark .g-opt-chip { background: #2e231a; border-color: #3a2d22; color: #d8c8b6; }
.g-client-dark .g-opt-chip.is-on { background: var(--terra); border-color: var(--terra); color: #fff; }
.g-art-prix { text-align: right; font-weight: 700; color: var(--ink); white-space: nowrap; }
.g-art-act { text-align: right; }
.g-cart-fmtline-remove { background: none; border: none; color: var(--brown-soft); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.g-cart-fmtline-remove:hover { color: #c0392b; }

/* Fondu de sortie à la suppression (ligne d'article ou carte photo). */
.g-art-row, .g-cart-photo { transition: opacity .25s ease, transform .25s ease; }
.g-art-row.g-removing, .g-cart-photo.g-removing { opacity: 0; transform: translateX(-12px); pointer-events: none; }

/* Fondu d'apparition du panier après une maj AJAX (ajout/retrait de format). */
#cartRoot { transition: opacity .22s ease; }
#cartRoot.g-cart-entering { opacity: 0; }
/* Carte photo : transition d'apparition (maj ciblée). La transition est déjà déclarée plus haut. */
.g-cart-photo.g-cart-entering { opacity: 0; transform: translateY(6px); }

/* Bouton « Commander » désactivé (lien stylé sans href bloqué via JS + pointer-events). */
.g-btn.is-disabled { opacity: .5; pointer-events: none; cursor: default; }

/* Icônes recadrage + qualité (avec tooltip g-tip) */
.g-art-icons { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; }
.g-art-warn, .g-fmt-opt-warn { color: #d98324; display: inline-flex; }
.g-qual-ico { display: inline-flex; }
.g-qual-excellent { color: #2e7d46; }
.g-qual-bon { color: #d98324; }
.g-qual-faible { color: #c0392b; }

/* Tooltip générique au survol (qualité, recadrage) */
.g-tip { position: relative; cursor: help; }
.g-tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: #1a130d; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.35; white-space: normal; width: max-content; max-width: 240px; padding: 7px 11px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 50; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.g-tip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Zone d'ajout + panneau PLEINE LARGEUR (fondu, formats en grille de colonnes) */
.g-cart-addzone { margin-top: 12px; }
.g-fmt-panel { margin-top: 12px; padding: 16px 18px; background: var(--clay-bg); border: 1px solid var(--line); border-radius: 14px; opacity: 1; transform: translateY(0); transition: opacity .2s ease, transform .2s ease; overflow: hidden; }
.g-fmt-panel[hidden] { display: block; opacity: 0; transform: translateY(-8px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; border-width: 0; pointer-events: none; }
.g-fmt-tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--line); padding-bottom: 12px; flex-wrap: wrap; }
.g-fmt-tab { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--brown); background: var(--white); border: 1px solid var(--line); border-radius: 100px; padding: 6px 16px; cursor: pointer; transition: all .15s; }
.g-fmt-tab:hover { color: var(--terra); border-color: var(--terra-soft); }
.g-fmt-tab.is-active { background: var(--terra); color: #fff; border-color: var(--terra); }
/* Les formats de la catégorie active : grille de colonnes pleine largeur, triés par taille */
/* La famille active = des colonnes par ratio, côte à côte */
.g-fmt-group { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.g-fmt-group[hidden] { display: none; } /* sinon le display:flex annule l'attribut hidden */
.g-fmt-rcol { display: flex; flex-direction: column; gap: 6px; min-width: 150px; flex: 1 1 0; }
.g-fmt-rcol-titre { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--brown-soft); padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.g-client-dark .g-fmt-rcol-titre { color: #b9a892; border-color: #3a2d22; }
.g-fmt-opt { display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.g-fmt-opt:hover { border-color: var(--terra); }
.g-fmt-opt-nom { font-weight: 600; color: var(--ink); }
.g-fmt-opt-dim { font-size: 12px; color: var(--brown-soft); flex: 1 1 auto; }
.g-fmt-opt-prix { font-weight: 700; color: var(--terra); white-space: nowrap; }
.g-fmt-opt.is-crop { border-style: dashed; }

/* Mode sombre des nouveaux éléments */
.g-client-dark .g-art-nom, .g-client-dark .g-art-prix { color: #f3e9dd; }
.g-client-dark .g-fmt-panel { background: #241a12; border-color: #3a2d22; }
.g-client-dark .g-fmt-tab { background: #2e231a; color: #d8c8b6; }
.g-client-dark .g-fmt-opt { background: #2e231a; border-color: #3a2d22; }
.g-client-dark .g-fmt-opt:hover { background: #3a2d22; }
.g-client-dark .g-fmt-opt-nom { color: #f3e9dd; }
.g-client-dark .g-cart-photo, .g-client-dark .g-cart-head, .g-client-dark .g-art-row + .g-art-row { border-color: #3a2d22; }

/* Barre actions globales du panier */
.g-cart-applyall { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 14px; background: var(--clay-bg); border-radius: 14px; padding: 14px 18px; margin-bottom: 18px; flex-wrap: wrap; }
/* Zone « appliquer à tout » : bouton + panneau déroulant (réutilise .g-fmt-panel) */
.g-applyall-zone { position: static; }
/* Le panneau s'ouvre sur TOUTE la largeur du bandeau (cohérence avec le reste du panier). */
.g-applyall-panel { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; }

/* Total */
.g-cart-total-bar { display: flex; justify-content: flex-end; align-items: baseline; gap: 16px; padding: 18px 4px 0; }
.g-cart-total-lbl { font-size: 15px; color: var(--brown); }
.g-cart-total-val { font-family: var(--serif); font-weight: 600; font-size: 26px; color: var(--terra); }

/* Modale « tous les tarifs » en colonnes par famille — même largeur que le panier (1000px).
   Spécificité renforcée car .g-modal-box (max-width:460px) est redéclarée plus bas dans le fichier. */
.g-modal-box.g-modal-box-lg { max-width: 1000px; width: 96vw; }
/* Onglets de la modale tarifs (réutilise le style des onglets de format) */
.g-prices-tabs { margin-bottom: 20px; }
.g-prices-fam { margin-bottom: 8px; }
.g-prices-fam[hidden] { display: none; }
.g-prices-fam-titre { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--ink); margin: 0; }
.g-client-dark .g-prices-fam-titre { color: #f3e9dd; }
/* En-tête « vitrine » d'une famille : image d'illustration + description */
.g-prices-intro { display: flex; gap: 18px; align-items: center; margin-bottom: 22px; }
.g-prices-intro-img { flex: 0 0 auto; width: 110px; height: 110px; border-radius: 14px; overflow: hidden; background: var(--clay-bg); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.g-prices-intro-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-prices-intro-ph { color: var(--terra-soft); display: flex; }
.g-prices-intro-txt { flex: 1 1 auto; min-width: 0; }
.g-prices-intro-desc { font-size: 14px; color: var(--brown-soft); line-height: 1.5; margin-top: 6px; }
@media (max-width: 560px) {
    .g-prices-intro { flex-direction: column; align-items: flex-start; gap: 12px; }
    .g-prices-intro-img { width: 84px; height: 84px; }
}
.g-prices-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
.g-prices-col-titre { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--terra); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.g-prices-item { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.g-prices-nom { font-weight: 600; color: var(--ink); }
.g-prices-dim { font-size: 12px; color: var(--brown-soft); flex: 1 1 auto; }
.g-prices-prix { font-weight: 700; color: var(--terra); white-space: nowrap; }

/* ===== MODE SOMBRE du panier (correction complète) ===== */
.g-client-dark .g-cart-title,
.g-client-dark .g-cart-name,
.g-client-dark .g-cart-subtotal,
.g-client-dark .g-fmt-opt-nom,
.g-client-dark .g-prices-nom { color: #f3e9dd; }
.g-client-dark .g-cart-album,
.g-client-dark .g-cart-total-lbl,
.g-client-dark .g-cart-qtylbl,
.g-client-dark .g-fmt-col-titre,
.g-client-dark .g-fmt-opt-dim,
.g-client-dark .g-prices-dim { color: #b9a892; }
.g-client-dark .g-cart-list,
.g-client-dark .g-cart-row,
.g-client-dark .g-prices-item { border-color: #3a2d22; }
.g-client-dark .g-cart-applyall,
.g-client-dark .g-fmt-panel { background: #241a12; border-color: #3a2d22; }
.g-client-dark .g-fmt-trigger,
.g-client-dark .g-fmt-opt,
.g-client-dark .g-cart-qty,
.g-client-dark .g-cart-applyall-ctrl .g-input { background: #2e231a; border-color: #3a2d22; color: #f3e9dd; }
.g-client-dark .g-fmt-trigger.is-empty { color: #b9a892; }
.g-client-dark .g-cart-thumb { background: #2e231a; }
/* La modale tarifs garde un fond clair (.g-client-modal force déjà #fff) → texte sombre conservé */

.g-cart-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.g-cart-foot-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.g-cart-clear { color: #c0392b; }
.g-cart-clear:hover { color: #a02d20; }

@media (max-width: 900px) {
    .g-client-grid[data-layout="grid"], .g-client-grid[data-layout="magazine"] { grid-template-columns: repeat(3, 1fr); }
    .g-client-grid[data-layout="masonry"] { column-count: 3; }
    .g-client-grid[data-layout="hero"] .g-client-cell { aspect-ratio: 4/3; }
}
@media (max-width: 600px) {
    .g-client-head { padding: 10px 14px; }
    .g-client-head-slim { padding: 10px 14px; }
    .g-head-photographe { display: none; } /* trop étroit en mobile, le nom reste visible sur desktop */
    .g-grid-toolbar { padding: 0 12px 14px; }
    .g-client-grid { padding-left: 12px; padding-right: 12px; padding-bottom: 40px; gap: 8px; }
    .g-brand { font-size: 18px; gap: 8px; }
    .g-brand-dot { width: 24px; height: 24px; font-size: 11px; }
    .g-client-actions { gap: 8px; }
    .g-client-actions .g-btn { padding: 9px 14px; font-size: 13px; }
    .g-cart-thumb { width: 56px; height: auto; max-height: 76px; }
    .g-cart-foot-left { width: 100%; }
    .g-cart-foot .g-btn-primary { width: 100%; }
    /* Tableau articles → empilé sur mobile (l'en-tête de colonnes est masqué) */
    .g-cart-head { display: none; }
    .g-art-row { grid-template-columns: 1fr auto; grid-template-areas: "article prix" "qte act"; gap: 8px 10px; align-items: start; }
    .g-art-article { grid-area: article; }
    .g-art-prix { grid-area: prix; }
    .g-art-qte { grid-area: qte; justify-content: flex-start; }
    .g-art-act { grid-area: act; }
    .g-fmt-group { flex-direction: column; gap: 14px; }
    .g-fmt-rcol { min-width: 0; width: 100%; }
    .g-cart-applyall { flex-direction: column; align-items: stretch; }
    .g-applyall-zone { width: 100%; }
    .g-applyall-zone > .g-btn { width: 100%; }
    .g-applyall-panel { position: static; min-width: 0; width: 100%; margin-top: 10px; }
    .g-client-hero { padding: 36px 18px 28px; }
    .g-client-hero h1 { font-size: 29px; }
    .g-client-date, .g-client-desc { font-size: 15px; }
    .g-client-grid[data-layout="grid"], .g-client-grid[data-layout="rows"], .g-client-grid[data-layout="magazine"] { grid-template-columns: repeat(2, 1fr); }
    .g-client-grid[data-layout="masonry"] { column-count: 2; column-gap: 8px; }
    .g-client-grid[data-layout="masonry"] .g-client-cell { margin-bottom: 8px; }
    .g-client-grid[data-layout="magazine"] .g-client-cell:nth-child(8n+1) { grid-column: span 2; grid-row: auto; aspect-ratio: 3/2; }
    /* Lightbox plein écran sur mobile + safe-area iOS */
    .g-lightbox img { max-width: 100vw; max-height: 70vh; border-radius: 0; }
    .g-lb-topbar { top: calc(8px + env(safe-area-inset-top)); right: 10px; gap: 6px; }
    .g-lb-ico { width: 40px; height: 40px; }
    /* Tooltip plus discrète au doigt : on la garde mais sans bloquer */
    .g-lb-prev { left: 8px; width: 44px; height: 44px; } .g-lb-next { right: 8px; width: 44px; height: 44px; }
    .g-acces-box { padding: 32px 24px; }
    /* Mobile : grille épurée, aucune icône sur les vignettes (elles cachaient la photo).
       Le tap ouvre la photo en plein écran (lightbox) où se trouvent favori / panier / téléchargement.
       On garde le coup de cœur visible UNIQUEMENT s'il est déjà actif (repère discret en coin). */
    .g-cell-mid { display: none; }
    .g-cell-fav { opacity: 0; pointer-events: none; }
    .g-cell-fav.is-fav { opacity: 1; pointer-events: auto; top: 8px; right: 8px; width: 30px; height: 30px; }
    .g-lb-name { max-width: 88vw; }
}

/* ===== Popups (modales gestion galerie) ===== */
.g-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 16px; }
.g-card-danger { border-color: #e3b3ab; }
.g-card-danger .g-card-title { color: #c0392b; }
/* Badge statut inline (page détail) — version non absolue */
.g-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 5px 13px; border-radius: 100px; }
.g-badge-publiee { background: #eaf6ec; color: #2e6b3a; }
.g-badge-brouillon { background: var(--clay-bg); color: var(--brown); }
.g-badge-archivee { background: #f1ece6; color: var(--brown-soft); }
.g-modal { position: fixed; inset: 0; z-index: 300; background: rgba(43,32,24,.5); display: flex; align-items: center; justify-content: center; padding: 24px; }
.g-modal[hidden] { display: none; }
.g-modal-box { background: var(--white); border-radius: 20px; box-shadow: var(--shadow-lg); width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; padding: 28px; animation: gFade .2s ease; }
.g-modal-wide { max-width: 620px; }
.g-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.g-modal-head h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--ink); }
.g-modal-close { background: none; border: none; font-size: 28px; line-height: 1; color: var(--brown-soft); cursor: pointer; padding: 0 4px; }
.g-modal-close:hover { color: var(--terra); }
.g-modal-foot { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }

@media (max-width: 600px) {
    .g-modal { padding: 14px; align-items: flex-end; }
    .g-modal-box { max-width: 100%; padding: 22px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .g-modal-foot { flex-direction: column-reverse; }
    .g-modal-foot .g-btn { width: 100%; }
}

/* ===== Page personnalisation ===== */
.g-perso { display: flex; flex-direction: column; gap: 22px; max-width: 1000px; }
.g-perso-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.g-perso-block { margin-bottom: 22px; }
.g-perso-block:last-child { margin-bottom: 0; }
.g-perso-label { display: block; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--brown-soft); margin-bottom: 12px; }
.g-perso-preview { position: sticky; top: 20px; }

/* Aperçu live (mini-galerie) */
.g-pv-stage { --pvgap: 8px; --pvbg: var(--white); background: var(--pvbg); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: var(--pvgap); height: 340px; transition: background .3s, gap .3s; }
.g-pv-stage[data-bg="dark"] { --pvbg: #241a13; border-color: #241a13; }
.g-pv-stage[data-gap="tight"] { --pvgap: 4px; }
.g-pv-stage[data-gap="normal"] { --pvgap: 9px; }
.g-pv-stage[data-gap="wide"] { --pvgap: 18px; }
.g-pvc { border-radius: 7px; background: linear-gradient(150deg, var(--terra-soft), var(--terra)); }
.g-pvc:nth-child(2){background:linear-gradient(150deg,#edd2bd,#cf9a72);} .g-pvc:nth-child(3){background:linear-gradient(150deg,#e0b095,#bd7a56);}
.g-pvc:nth-child(4){background:linear-gradient(150deg,#e8c8ad,#c88f63);} .g-pvc:nth-child(5){background:linear-gradient(150deg,#dcae90,#b87a55);}
.g-pvc:nth-child(6){background:linear-gradient(150deg,#e5c4a6,#c2855e);} .g-pvc:nth-child(7){background:linear-gradient(150deg,#e2b99c,#c5835d);}
.g-pvc:nth-child(8){background:linear-gradient(150deg,#ecd0b9,#caa078);} .g-pvc:nth-child(9){background:linear-gradient(150deg,#ddb295,#ba7c58);}
.g-pv-stage[data-layout="grid"] { grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); }
.g-pv-stage[data-layout="rows"] { grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(4,1fr); }
.g-pv-stage[data-layout="rows"] .g-pvc:nth-child(n+7){display:none;}
.g-pv-stage[data-layout="masonry"] { grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(8,1fr); }
.g-pv-stage[data-layout="masonry"] .g-pvc:nth-child(1){grid-row:span 3;} .g-pv-stage[data-layout="masonry"] .g-pvc:nth-child(2){grid-row:span 2;}
.g-pv-stage[data-layout="masonry"] .g-pvc:nth-child(3){grid-row:span 3;} .g-pv-stage[data-layout="masonry"] .g-pvc:nth-child(4){grid-row:span 3;}
.g-pv-stage[data-layout="masonry"] .g-pvc:nth-child(5){grid-row:span 3;} .g-pv-stage[data-layout="masonry"] .g-pvc:nth-child(6){grid-row:span 2;}
.g-pv-stage[data-layout="masonry"] .g-pvc:nth-child(7){grid-row:span 2;} .g-pv-stage[data-layout="masonry"] .g-pvc:nth-child(8){grid-row:span 3;} .g-pv-stage[data-layout="masonry"] .g-pvc:nth-child(9){grid-row:span 3;}
.g-pv-stage[data-layout="magazine"] { grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(3,1fr); }
.g-pv-stage[data-layout="magazine"] .g-pvc:nth-child(1){grid-column:span 2;grid-row:span 2;}
.g-pv-stage[data-layout="magazine"] .g-pvc:nth-child(9){display:none;}
.g-pv-stage[data-layout="hero"] { grid-template-columns: repeat(5,1fr); grid-template-rows: 3fr 1fr; }
.g-pv-stage[data-layout="hero"] .g-pvc:nth-child(1){grid-column:1/-1;}
.g-pv-stage[data-layout="hero"] .g-pvc:nth-child(n+7){display:none;}

/* Image à la une (édition) */
.g-cover-zone { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: center; }
.g-cover-preview { aspect-ratio: 16/9; border-radius: 14px; background: var(--clay-bg) center/cover no-repeat; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.g-cover-empty { color: var(--brown-soft); font-size: 14px; }
.g-cover-actions label.g-btn { display: inline-flex; }

/* Couverture côté client */
.g-client-cover { height: 56vh; min-height: 340px; background-size: cover; background-position: center; background-color: var(--clay-bg); position: relative; display: flex; align-items: flex-end; }
.g-client-cover::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(43,32,24,.05), rgba(43,32,24,.55)); }
/* Tant que la couverture charge : fond neutre, gradient masqué, spinner visible */
.g-client-cover.is-loading::after { opacity: 0; }
.g-client-cover.is-loading { background-color: var(--clay-bg); }
.g-cover-spinner { position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; opacity: 1; z-index: 2; }
.g-client-cover:not(.is-loading) .g-cover-spinner { display: none; }
.g-client-dark .g-client-cover, .g-client-dark .g-client-cover.is-loading { background-color: #2e231a; }
.g-client-cover-overlay { position: relative; z-index: 1; padding: 40px; color: #fff; max-width: 800px; }
.g-client-cover-overlay h1 { font-family: var(--serif); font-weight: 500; font-size: 50px; letter-spacing: -0.02em; line-height: 1.05; }
.g-client-cover-overlay p { font-family: var(--serif); font-style: italic; font-size: 18px; margin-top: 8px; opacity: .92; }

@media (max-width: 860px) {
    .g-perso-grid { grid-template-columns: 1fr; }
    .g-perso-preview { position: static; }
    .g-cover-zone { grid-template-columns: 1fr; }
    .g-client-cover { height: 42vh; min-height: 240px; }
    .g-client-cover-overlay { padding: 24px; }
    .g-client-cover-overlay h1 { font-size: 32px; }
}

/* ===== Page détail v2 : barre de pilotage + onglets ===== */
.g-pilot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.g-pilot-back { font-size: 14px; color: var(--brown-soft); display: inline-block; margin-bottom: 10px; }
.g-pilot-back:hover { color: var(--terra); }
.g-pilot-info h1 { font-family: var(--serif); font-weight: 500; font-size: 32px; letter-spacing: -0.02em; color: var(--ink); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.g-pilot-meta { font-size: 14px; color: var(--brown-soft); margin-top: 6px; }
.g-pilot-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.g-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.g-tab-btn { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--brown-soft); background: none; border: none; padding: 12px 18px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.g-tab-btn:hover { color: var(--terra); }
.g-tab-btn.active { color: var(--terra); border-bottom-color: var(--terra); }
.g-tab-panel { display: none; }
.g-tab-panel.active { display: block; animation: gFade .25s ease; }

/* Cartes réglages : titre sobre (sans serif), moins d'ombre, padding réduit */
.g-card-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brown-soft); margin-bottom: 16px; }
.g-reglages-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.g-reglages-grid .g-card { padding: 26px; box-shadow: var(--shadow-sm); }
.g-tab-panel[data-panel="acces"] .g-card { padding: 28px; box-shadow: var(--shadow-sm); }
.g-sep { border: none; border-top: 1px solid var(--line); margin: 24px 0; }

/* Sections / dossiers (chips) */
.g-sections-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.g-sec-chip { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--brown); background: var(--white); border: 1.5px solid var(--line); padding: 8px 16px; border-radius: 100px; cursor: pointer; transition: all .15s; }
.g-sec-chip:hover { border-color: var(--terra-soft); }
.g-sec-chip.active { background: var(--terra); color: #fff; border-color: var(--terra); }
.g-sec-add { color: var(--terra); border-style: dashed; }
.g-sec-add:hover { background: var(--clay-bg); }
.g-sec-manage { display: flex; justify-content: space-between; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 14px; color: var(--ink); }
.g-sec-manage small { color: var(--brown-soft); }
.g-sec-manage form { margin: 0; }

/* Zone de danger isolée */
.g-danger-zone { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 36px; padding: 22px 26px; border: 1px solid #e3b3ab; border-radius: 14px; background: #fdf4f2; flex-wrap: wrap; }
.g-danger-zone strong { font-size: 15px; color: #c0392b; }
.g-danger-zone p { font-size: 13px; color: var(--brown); margin-top: 3px; }

/* Onglet Accès : 2 colonnes */
.g-acces-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.g-acces-grid .g-card { padding: 26px; box-shadow: var(--shadow-sm); }

/* Boutons à code couleur dans la barre de pilotage */
.g-btn-view, .g-btn-view:link, .g-btn-view:visited { background: #fff; color: var(--terra); border-color: var(--terra); }
.g-btn-view:hover { background: var(--clay-bg); color: var(--terra-deep); border-color: var(--terra-deep); }
.g-btn-publish, .g-btn-publish:link, .g-btn-publish:visited { background: #2e7d46; color: #fff; border-color: #2e7d46; }
.g-btn-publish:hover { background: #256138; border-color: #256138; color: #fff; transform: translateY(-1px); box-shadow: var(--shadow); }
.g-btn-offline, .g-btn-offline:link, .g-btn-offline:visited { background: #fff; color: #b06a1d; border-color: #d9b48a; }
.g-btn-offline:hover { background: #fbf3e7; border-color: #b06a1d; color: #b06a1d; }

/* Zone d'ajout de photos */
#addPhotosForm { padding: 24px; box-shadow: var(--shadow-sm); margin-bottom: 24px; }
#addPhotosForm .g-dropzone { margin-top: 4px; }
.g-add-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.g-add-foot .g-dropzone-count { margin: 0; }

/* Barre de progression de l'upload */
.g-progress { margin-top: 16px; }
.g-progress-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--brown); margin-bottom: 6px; }
.g-progress-track { height: 8px; border-radius: 100px; background: var(--clay-bg); overflow: hidden; }
.g-progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--terra), var(--terra-deep)); border-radius: 100px; transition: width .15s ease; }

/* Vignette : sélecteur de section, suppression, drag & drop */
.g-gal-photo { position: relative; }
.g-gal-photo[draggable="true"] { cursor: grab; }
.g-gal-photo.g-dragging { opacity: .4; }
.g-gal-photo.g-moved { animation: gMoved .6s ease; }
@keyframes gMoved { 0% { box-shadow: 0 0 0 3px #2e7d46; } 100% { box-shadow: 0 0 0 0 transparent; } }

.g-photo-sec { position: absolute; left: 8px; right: 8px; bottom: 8px; width: calc(100% - 16px); font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--ink); background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; cursor: pointer; opacity: 0; transition: opacity .15s; backdrop-filter: blur(2px); }
.g-gal-photo:hover .g-photo-sec, .g-photo-sec:focus { opacity: 1; }
.g-photo-sec.g-saved { border-color: #2e7d46; color: #2e7d46; }

.g-photo-del { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 8px; background: rgba(255,255,255,.92); color: #c0392b; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; backdrop-filter: blur(2px); }
.g-gal-photo:hover .g-photo-del { opacity: 1; }
.g-photo-del:hover { background: #c0392b; color: #fff; }

/* Compteur de favoris (vue photographe) */
.g-photo-favcount { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 3px; background: rgba(255,255,255,.92); color: #e8568f; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 100px; backdrop-filter: blur(2px); }

/* Pastille sur un onglet + badge inline */
.g-tab-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 100px; background: #c0392b; color: #fff; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.g-inline-badge { display: inline-block; margin-left: 8px; background: #fdecea; color: #c0392b; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 100px; text-transform: none; letter-spacing: 0; }
.g-btn-sm { padding: 7px 13px; font-size: 13px; }

/* Liste des demandes de retrait */
.g-demandes { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.g-demande { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); flex-wrap: wrap; }
.g-demande.is-done { opacity: .6; }
.g-demande-info strong { font-size: 14px; color: var(--ink); }
.g-demande-meta { display: block; font-size: 12px; color: var(--brown-soft); margin-top: 2px; }
.g-demande-motif { font-size: 13px; color: var(--brown); font-style: italic; margin-top: 6px; }
.g-demande-actions { display: flex; align-items: center; gap: 12px; }
.g-demande-actions form { margin: 0; }
.g-demande-status { font-size: 12px; font-weight: 700; color: #b06a1d; }
.g-demande-status-done { color: #2e7d46; }

.g-drag-hint { font-size: 13px; color: var(--brown-soft); margin: -14px 0 22px; }

/* Chip cible de drop pendant un drag */
.g-sec-chip.g-drop-over { border-color: var(--terra); background: var(--clay-bg); color: var(--terra); border-style: dashed; }

@media (max-width: 860px) {
    .g-reglages-grid { grid-template-columns: 1fr; }
    .g-acces-grid { grid-template-columns: 1fr; }
    .g-pilot-actions { width: 100%; }
    .g-pilot-actions .g-btn { flex: 1; }
    .g-photo-sec, .g-photo-del { opacity: 1; }
}

/* ===== Page Tarifs (vitrine) ===== */
.g-tarifs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; max-width: 1000px; margin: 0 auto; }
.g-tarif { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; }
.g-tarif-featured { border-color: var(--terra); box-shadow: var(--shadow); }
.g-tarif-tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--terra); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 16px; border-radius: 100px; white-space: nowrap; }
.g-tarif-nom { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--ink); }
.g-tarif-prix { display: flex; align-items: baseline; gap: 8px; }
.g-tarif-montant { font-family: var(--serif); font-size: 38px; font-weight: 600; color: var(--terra); }
.g-tarif-unite { font-size: 14px; color: var(--brown-soft); }
.g-tarif-desc { font-size: 14px; color: var(--brown); margin: 0; }
.g-tarif-list { list-style: none; padding: 0; margin: 4px 0 8px; display: flex; flex-direction: column; gap: 10px; }
.g-tarif-list li { position: relative; padding-left: 26px; font-size: 14px; color: var(--ink); }
.g-tarif-list li::before { content: '✓'; position: absolute; left: 0; color: var(--terra); font-weight: 700; }
.g-tarif .g-btn { margin-top: auto; }

@media (max-width: 860px) {
    .g-tarifs-grid { grid-template-columns: 1fr; max-width: 420px; }
}

/* ===== Espace photographe : table des tarifs de tirages ===== */
.g-tarif-cat-titre { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--ink); margin: 0 0 4px; }
.g-tarif-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 8px; }
.g-tarif-table thead th { text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brown-soft); padding: 8px 12px; border-bottom: 1px solid var(--line); }
.g-tarif-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
.g-tarif-table tbody tr:last-child td { border-bottom: none; }
.g-tarif-nom { font-weight: 600; }
.g-tarif-prix-input { display: inline-flex; align-items: center; gap: 6px; }
.g-tarif-prix-input input { width: 90px; border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 10px; font-family: var(--sans); font-size: 14px; }
.g-tarif-prix-input input:focus { outline: none; border-color: var(--terra); }
.g-tarif-marge { font-weight: 600; }
.g-tarif-conseil { background: var(--clay-bg); border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px; font-size: 13px; font-weight: 600; color: var(--terra); cursor: pointer; transition: background .15s; }
.g-tarif-conseil:hover { background: var(--terra); color: #fff; border-color: var(--terra); }
.g-tarif-pct { font-weight: 600; }

/* Barre d'application de marge en masse */
.g-marge-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.g-marge-choices { display: flex; gap: 8px; flex-wrap: wrap; }
.g-marge-btn { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--brown); background: var(--white); border: 1.5px solid var(--line); padding: 9px 16px; border-radius: 100px; cursor: pointer; transition: all .15s; }
.g-marge-btn:hover { border-color: var(--terra-soft); color: var(--terra); }
.g-marge-btn.is-active { background: var(--terra); border-color: var(--terra); color: #fff; }

/* Onglet Ventes & tarifs (page détail galerie) */
.g-ventes-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.g-vente-stat { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 20px; text-align: center; box-shadow: var(--shadow-sm); }
.g-vente-stat-val { display: block; font-family: var(--serif); font-weight: 500; font-size: 28px; color: var(--ink); }
.g-vente-stat-lbl { display: block; font-size: 13px; color: var(--brown-soft); margin-top: 4px; }
.g-ventes-empty { text-align: center; padding: 44px 24px; }
.g-ventes-empty svg { margin-bottom: 14px; }
.g-ventes-empty h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--ink); margin-bottom: 8px; }
.g-ventes-empty p { font-size: 14px; color: var(--brown-soft); max-width: 420px; margin: 0 auto; }
@media (max-width: 760px) { .g-ventes-stats { grid-template-columns: 1fr 1fr; } }

/* Liste des grilles tarifaires */
.g-grilles-list { display: flex; flex-direction: column; gap: 12px; }
.g-grille-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; flex-wrap: wrap; box-shadow: var(--shadow-sm); }
.g-grille-info h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.g-grille-info p { font-size: 13px; color: var(--brown-soft); margin-top: 3px; }
.g-grille-badge { display: inline-block; background: #eaf6ec; color: #2e6b3a; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 100px; }
.g-grille-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.g-grille-actions form { margin: 0; }
@media (max-width: 760px) {
    .g-tarif-table { font-size: 13px; }
    .g-tarif-table thead { display: none; }
    .g-tarif-table tbody td { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; border: none; }
    .g-tarif-table tbody tr { display: block; border: 1px solid var(--line); border-radius: 12px; padding: 8px 0; margin-bottom: 12px; }
    .g-tarif-table tbody td::before { content: attr(data-label); font-weight: 600; color: var(--brown-soft); }
}

/* ---- Bouton « recadrer » : bouton texte inline dans les options de la ligne ---- */
.g-art-act { display: inline-flex; align-items: center; gap: 4px; }
.g-art-crop-btn {
    background: none; border: 1px solid var(--line); border-radius: 100px;
    color: var(--brown-soft); cursor: pointer; padding: 5px 12px;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--sans); font-size: 12.5px; font-weight: 600; line-height: 1;
    transition: color .15s, border-color .15s, background .15s;
}
.g-art-crop-btn svg { flex: 0 0 auto; }
.g-art-crop-btn:hover { color: var(--terra); border-color: var(--terra-soft); }
.g-art-crop-btn.is-set { color: var(--terra); border-color: var(--terra-soft); background: var(--clay-bg); }

/* ---- Modale de recadrage (Cropper.js) ---- */
.g-crop-box { max-width: 680px; width: 96vw; }
.g-crop-fmt { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--terra); margin-left: 6px; }
.g-crop-help { font-size: 13px; color: var(--brown-soft); margin: -10px 0 14px; line-height: 1.45; }
/* Sélecteur de mode : Remplir / Garder toute l'image */
.g-crop-modes { display: inline-flex; background: var(--clay-bg); border: 1px solid var(--line); border-radius: 100px; padding: 4px; gap: 2px; margin-bottom: 8px; }
.g-crop-mode { border: none; background: transparent; color: var(--brown-soft); font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 100px; cursor: pointer; transition: all .15s; }
.g-crop-mode:hover { color: var(--terra); }
.g-crop-mode.is-on { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); }
.g-crop-mode-info { font-size: 12.5px; color: var(--brown-soft); margin: 0 0 14px; line-height: 1.45; }
/* Le stage prend en JS le RATIO de la photo (ajusterStageAuRatioPhoto) → image plein cadre.
   PAS de padding ni de border-radius ici : ils rogneraient les poignées/bordures de la zone
   de recadrage dans les coins (bug « le sélecteur passe derrière le coin »).
   La hauteur ici n'est qu'un fallback avant calcul. */
.g-crop-stage { background: var(--cream-deep, #f3ece0); border-radius: 14px; min-height: 220px; width: 100%; max-width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
/* Avant l'init Cropper, l'image brute reste bornée. */
.g-crop-stage > #cropImg { display: block; max-width: 100%; max-height: 100%; margin: 0 auto; }
/* Cropper crée .cropper-container : il occupe tout le stage. On ne met pas overflow:hidden
   sur le stage (sinon les poignées de la crop box sont coupées) ; c'est Cropper qui borne sa zone. */
.g-crop-stage .cropper-container { max-width: 100% !important; max-height: 100% !important; border-radius: 14px; }
/* Cadre net + poignées de la zone de recadrage (rendu soigné). */
.g-crop-stage .cropper-view-box { outline: 2px solid #fff; outline-color: rgba(255,255,255,.95); }
.g-crop-stage .cropper-line { background-color: rgba(255,255,255,.5); }
.g-crop-stage .cropper-point { background-color: #fff; width: 8px; height: 8px; opacity: 1; box-shadow: 0 0 0 1px rgba(43,32,24,.25); }
.g-crop-stage .cropper-dashed { border-color: rgba(255,255,255,.6); }
.g-crop-stage .cropper-bg { background-image: none; background: #2b2018; }
/* Mode « Garder toute l'image » : cadre au ratio du tirage, fond blanc = on voit les bandes blanches. */
.g-crop-fit-preview { background: #fff; box-shadow: 0 2px 14px rgba(43,32,24,.18); display: flex; align-items: center; justify-content: center; overflow: hidden; max-width: 100%; }
.g-crop-fit-preview[hidden] { display: none; }
.g-crop-fit-preview img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.g-crop-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.g-crop-actions-right { display: flex; gap: 12px; }

@media (max-width: 560px) {
    .g-crop-actions { flex-direction: column; align-items: stretch; }
    .g-crop-actions-right { flex-direction: column-reverse; }
    .g-crop-actions .g-btn, .g-crop-actions-right .g-btn { width: 100%; }
}

/* ---- Page commande (formulaire + récap) ---- */
.g-order-wrap { max-width: 1040px; margin: 0 auto; padding: 40px 22px 80px; }
.g-order-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: start; margin-top: 24px; }
.g-order-sec-titre { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--ink); margin-bottom: 18px; }
.g-order-form { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 28px; box-shadow: var(--shadow-sm); }
.g-order-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.g-field-cp { max-width: 160px; }
.g-input.is-error { border-color: #c0392b; }
.g-field-err { display: block; font-size: 12px; color: #c0392b; margin-top: 4px; }
.g-order-submit { width: 100%; margin-top: 8px; }

.g-order-recap { background: var(--clay-bg); border: 1px solid var(--line); border-radius: 18px; padding: 24px; position: sticky; top: 24px; }
.g-order-items { display: flex; flex-direction: column; gap: 14px; }
.g-order-item { display: grid; grid-template-columns: 48px 1fr auto auto; align-items: center; gap: 12px; }
/* Miniature récap au RATIO de la photo (largeur fixe, hauteur libre bornée), sans rognage. */
.g-order-thumb { width: 48px; height: auto; max-height: 64px; object-fit: contain; border-radius: 8px; background: var(--clay-bg); }
.g-order-item-info { display: flex; flex-direction: column; min-width: 0; }
.g-order-item-fmt { font-weight: 600; font-size: 14px; color: var(--ink); }
.g-order-item-meta { font-size: 12px; color: var(--brown-soft); }
.g-order-item-qte { font-size: 13px; color: var(--brown-soft); }
.g-order-item-prix { font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; }
.g-order-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink); }
.g-order-total-val { font-family: var(--serif); font-size: 26px; color: var(--terra); }

/* ---- Page de confirmation ---- */
.g-confirm-wrap { max-width: 620px; margin: 0 auto; padding: 56px 22px 80px; }
.g-confirm-card { background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 40px; box-shadow: var(--shadow); text-align: center; }
.g-confirm-ico { display: inline-flex; color: #2e9e5b; margin-bottom: 14px; }
.g-confirm-titre { font-family: var(--serif); font-weight: 500; font-size: 28px; color: var(--ink); line-height: 1.2; margin-bottom: 12px; }
.g-confirm-ref { font-size: 15px; color: var(--ink); margin-bottom: 8px; }
.g-confirm-ref strong { font-family: var(--serif); color: var(--terra); letter-spacing: .5px; }
.g-confirm-text { font-size: 14px; color: var(--brown-soft); line-height: 1.55; margin-bottom: 24px; }
.g-confirm-items { text-align: left; margin: 22px 0; }
.g-confirm-back { margin-top: 24px; }

@media (max-width: 820px) {
    .g-order-grid { grid-template-columns: 1fr; }
    .g-order-recap { position: static; order: -1; }
}
@media (max-width: 520px) {
    .g-order-row { grid-template-columns: 1fr; }
    .g-field-cp { max-width: none; }
}

/* ===== Commandes (espace photographe) ===== */
/* Badges de statut de commande */
.g-badge-cmd-en_attente   { background: #fdf3e3; color: #9a6a1c; }
.g-badge-cmd-payee        { background: #eaf6ec; color: #2e6b3a; }
.g-badge-cmd-en_production{ background: #e8f0fb; color: #2b5b9a; }
.g-badge-cmd-expediee     { background: #e9f7f4; color: #1f7a68; }
.g-badge-cmd-annulee      { background: #fbeaea; color: #9a2e2e; }

/* Détail commande : 2 colonnes (bon de production / client+statut) */
.g-cmd-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; margin-top: 20px; }
.g-cmd-side { display: block; }

.g-cmd-lignes { display: flex; flex-direction: column; gap: 14px; }
.g-cmd-ligne { display: grid; grid-template-columns: 56px 1fr auto auto; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.g-cmd-ligne:last-child { border-bottom: none; padding-bottom: 0; }
.g-cmd-thumb { width: 56px; height: auto; max-height: 72px; object-fit: contain; border-radius: 8px; background: var(--clay-bg); }
.g-cmd-ligne-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.g-cmd-ligne-fmt { font-weight: 600; color: var(--ink); }
.g-cmd-ligne-meta { font-size: 13px; color: var(--brown-soft); }
.g-cmd-ligne-crop { font-size: 11px; color: var(--brown-soft); opacity: .8; font-variant-numeric: tabular-nums; }
.g-cmd-ligne-qte { font-size: 14px; color: var(--brown-soft); white-space: nowrap; }
.g-cmd-ligne-prix { text-align: right; white-space: nowrap; }
.g-cmd-prix-vente { display: block; font-weight: 700; color: var(--ink); }
.g-cmd-prix-labo { display: block; font-size: 12px; color: var(--brown-soft); }
.g-cmd-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--line); font-size: 15px; color: var(--ink); }
.g-cmd-total-val { font-family: var(--serif); font-size: 24px; color: var(--terra); }
.g-cmd-note { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.g-cmd-note p { font-size: 14px; color: var(--ink); margin-top: 6px; line-height: 1.5; }
.g-cmd-client { font-size: 14px; color: var(--ink); line-height: 1.55; margin-top: 6px; }
.g-cmd-statut-form { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.g-cmd-statut-form .g-input { flex: 1 1 auto; min-width: 0; }

@media (max-width: 860px) {
    .g-cmd-grid { grid-template-columns: 1fr; }
    .g-cmd-ligne { grid-template-columns: 48px 1fr auto; }
    .g-cmd-ligne-prix { grid-column: 2 / -1; text-align: left; }
}