/* ==========================================================================
   POC ESPACE PHOTO — Design tokens
   Repris de business/public/assets/back/css/global/var.scss
   Les valeurs "source" sont annotées /* DA *​/ : ne pas les inventer.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;600;700&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap");

@font-face {
    font-family : "business-club-icon";
    src         : url("../fonts/business-club-icon.woff2") format("woff2"),
                  url("../fonts/business-club-icon.woff") format("woff"),
                  url("../fonts/business-club-icon.ttf") format("truetype");
    font-weight : normal;
    font-style  : normal;
    font-display: block;
}

:root {
    /* --- PALETTE DA (identique au back-office) --- */
    --da-primary          : #002037; /* DA --color-primary   */
    --da-gold             : #CABFA6; /* DA --color-2         */
    --da-pink             : #D21473; /* DA --color-pink      */
    --da-alert            : #DC6B4E; /* DA --color-alert     */
    --da-valid            : #BDD06C; /* DA --color-valid     */
    --da-standby          : #E7B05C; /* DA --color-stand-by  */
    --da-info             : #4AB7E9; /* DA --color-info      */
    --da-gold-pale        : #F3EDD9; /* DA .corp-anchor      */

    /* --- RÔLES SÉMANTIQUES (bascule light/dark) --- */
    --bg-app              : #F6F8FA; /* DA --color-background-main */
    --bg-surface          : #FFF;
    --bg-surface-2        : #F6F8FA;
    --bg-inset            : #EEE;    /* DA --input-background-color */
    --bg-chip             : #F6F8FA; /* DA --color-nav-club-out */
    --row-alt             : #E7E7E7; /* mesuré : lignes paires  */
    --row-hover           : #F0F2F4;
    --bg-muted            : #DCD8CC; /* bouton secondaire grisé du BO */
    --input-placeholder   : #999;    /* DA --input-placeholder-color */

    --text-strong         : #002037;
    --text-default        : #1B3346;
    --text-muted          : #7A8A97;
    --color-nav           : #999;    /* DA --color-nav : gris de la navigation */
    --text-on-primary     : #CABFA6;
    --text-on-gold        : #002037;

    --border-soft         : #E7E7E7; /* DA --gray */
    --border-strong       : #D1D1D1; /* DA --color-background-form */

    --accent              : #CABFA6;
    --accent-contrast     : #002037;
    --agency              : #D21473;

    --shadow-sm           : 0 1px 2px rgba(0, 32, 55, .06), 0 2px 8px rgba(0, 32, 55, .05);
    --shadow-md           : 0 4px 12px rgba(0, 32, 55, .09), 0 12px 32px rgba(0, 32, 55, .08);
    --shadow-lg           : 0 18px 50px rgba(0, 32, 55, .20);

    --overlay             : rgba(0, 32, 55, .55);
    --scrim               : #0A1620;

    /* --- MÉTRIQUES DA (mesurées sur le back-office) --- */
    --radius-xs           : 3px;     /* DA --border-radius-little */
    --radius-sm           : 4px;     /* DA --border-radius-medium */
    --radius-md           : 10px;    /* DA --border-radius-big    */
    --radius-lg           : 20px;    /* DA --border-radius-xl     */
    --radius-pill         : 999px;

    --gap-xs              : 6px;
    --gap-sm              : 12px;
    --gap                 : 20px;    /* DA --margin-small-fix     */
    --gap-md              : 30px;    /* DA --margin-standard-fix  */
    --gap-lg              : 40px;    /* DA --margin-big-fix       */

    --button-padding-x    : 15px;    /* DA --button-horizontal-padding */
    --input-height        : 40px;    /* DA --input-height         */

    --header-height       : 125px;   /* mesuré : main > header    */
    --rail-width          : 111px;   /* mesuré : .section-nav-club */
    --menu-width          : 285px;   /* mesuré : .section-nav-page */

    --font-size-base      : 16px;    /* DA --font-size-default-fix */
    --size-header-big     : 40px;    /* DA --size-header-big       */

    --font-body           : "Barlow", system-ui, -apple-system, sans-serif;
    --font-display        : "Barlow Condensed", "Barlow", sans-serif;

    --ease                : cubic-bezier(.22, .61, .36, 1);
    --speed               : .4s;     /* DA transition-duration .4s */

    color-scheme          : light;
}

/* --- DARK MODE ---------------------------------------------------------
   Le back-office n'a pas de dark mode : les valeurs ci-dessous sont
   dérivées du navy #002037 (teinte conservée, luminosité inversée) pour
   rester dans la DA. L'or #CABFA6 et le rose agence sont remontés en
   luminosité pour tenir le contraste AA sur fond sombre.
   --------------------------------------------------------------------- */
[data-theme="dark"] {
    --bg-app          : #071320;
    --bg-surface      : #0C1E2E;
    --bg-surface-2    : #102739;
    --bg-inset        : #163246;
    --bg-chip         : #14293B;
    --row-alt         : #0F2536;
    --row-hover       : #16334A;
    --bg-muted        : #1E3A52;
    --input-placeholder : #7F97A8;

    --text-strong     : #EEF4F8;
    --text-default    : #D3E0E9;
    --text-muted      : #8AA0B1;
    --color-nav       : #8AA0B1;
    --text-on-primary : #CABFA6;
    --text-on-gold    : #002037;

    --border-soft     : #1D374D;
    --border-strong   : #27455E;

    --accent          : #D8CEB8;
    --accent-contrast : #05121D;
    --agency          : #FF5CA6;

    --da-gold-pale    : #2A2416;
    --da-valid        : #A9C15A;
    --da-info         : #63C4EE;

    --shadow-sm       : 0 1px 2px rgba(0, 0, 0, .40), 0 2px 8px rgba(0, 0, 0, .30);
    --shadow-md       : 0 4px 14px rgba(0, 0, 0, .45), 0 14px 36px rgba(0, 0, 0, .38);
    --shadow-lg       : 0 20px 56px rgba(0, 0, 0, .60);

    --overlay         : rgba(2, 9, 16, .72);
    --scrim           : #040C14;

    color-scheme      : dark;
}

/* Respect du réglage système tant que l'utilisateur n'a pas tranché */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-app          : #071320;
        --bg-surface      : #0C1E2E;
        --bg-surface-2    : #102739;
        --bg-inset        : #163246;
        --bg-chip         : #14293B;
        --row-alt         : #0F2536;
        --row-hover       : #16334A;
        --bg-muted        : #1E3A52;
        --input-placeholder : #7F97A8;

        --text-strong     : #EEF4F8;
        --text-default    : #D3E0E9;
        --text-muted      : #8AA0B1;
        --color-nav       : #8AA0B1;

        --border-soft     : #1D374D;
        --border-strong   : #27455E;

        --accent          : #D8CEB8;
        --accent-contrast : #05121D;
        --agency          : #FF5CA6;

        --da-gold-pale    : #2A2416;
        --da-valid        : #A9C15A;
        --da-info         : #63C4EE;

        --shadow-sm       : 0 1px 2px rgba(0, 0, 0, .40), 0 2px 8px rgba(0, 0, 0, .30);
        --shadow-md       : 0 4px 14px rgba(0, 0, 0, .45), 0 14px 36px rgba(0, 0, 0, .38);
        --shadow-lg       : 0 20px 56px rgba(0, 0, 0, .60);

        --overlay         : rgba(2, 9, 16, .72);
        --scrim           : #040C14;

        color-scheme      : dark;
    }
}

/* ==========================================================================
   Icônes — police maison business-club-icon
   NB : dans le back-office, .icon-upload réutilise par erreur le glyphe de
   .icon-pencil (\e802). Ici upload/pencil sont dissociés : upload prend un
   SVG inline (cf. .ico[data-svg]), le reste vient bien de la police.
   ========================================================================== */
[class^="icon-"], [class*=" icon-"] {
    font-family             : "business-club-icon";
    font-style              : normal;
    font-weight             : normal;
    font-variant            : normal;
    text-transform          : none;
    line-height             : 1;
    speak                   : never;
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
}

.icon-check::before    { content : "\e800"; }
.icon-cancel::before   { content : "\e801"; }
.icon-pencil::before   { content : "\e802"; }
.icon-eye::before      { content : "\e803"; }
.icon-eye-off::before  { content : "\e804"; }
.icon-bin::before      { content : "\e805"; }
.icon-calendar::before { content : "\e806"; }
.icon-mail::before     { content : "\e807"; }
.icon-search::before   { content : "\e808"; }
.icon-download::before { content : "\e809"; }
.icon-refresh::before  { content : "\e863"; }
.icon-picture::before  { content : "\e80a"; }
.icon-user::before     { content : "\e80b"; }