/*
 * stepper.css — Formulaire Stepper · NounouTop
 * Design System : CLAUDE.md §1–8
 * Typographie   : Rubik Medium 500 (titres) + Inter (corps)
 * Palette       : --blue/600 #2da3ed · --main/800 #1b4159 · --blue/100 #eef8fe
 */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500&family=Inter:ital,wght@0,400;0,500;0,700;1,500&display=swap');


/* ═══════════════════════════════════════════════════════════════
   VARIABLES CSS — Design System NounouTop (CLAUDE.md §1 & §2)
═══════════════════════════════════════════════════════════════ */

.custom-stepper-form {

    /* Palette CLAUDE.md §1 */
    --white:       #ffffff;
    --blue-600:    #2da3ed;
    --main-800:    #1b3a5c;
    --blue-100:    #eef8fe;
    --blue-800:    #0e6ba6;
    --grey-500:    #7a8fa0;
    --navy:        #1b3a5c;

    /* Tokens dérivés */
    --border:      #c5dff4;
    --border-soft: #daedfb;
    --card:        #ffffff;

    /* Tailles de police CLAUDE.md §2 */
    --fs-h3:       22px;
    --fs-h4:       15px;
    --fs-h5:       17px;
    --fs-default:  17px;
    --fs-s:        16px;
    --fs-xs:       14px;
    --fs-btn:      14px;
    --fs-tag:      12px;

    /* Border-radius CLAUDE.md §3 */
    --radius-tag:  8px;

    /* Layout pleine largeur — topbar/tabs sont hors du wrapper */
    display:       block;
    width:         100%;
    max-width:     100%;
    margin:        0;
    font-family:   'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size:     var(--fs-default);
    font-weight:   500;
    line-height:   1.55;
    color:         var(--main-800);
    background:    #e8eef4;
    border:        none;
    border-radius: 0;
    box-shadow:    none;
    -webkit-font-smoothing: antialiased;
    box-sizing:    border-box;
    padding:       0;
    overflow-x:    hidden;
    overflow-y:    visible;
    position:      relative;
    left:          0;
}

/* Contenu centré à l'intérieur du wrapper full-width */
.custom-stepper-form .sf-content {
    max-width:  720px;
    width:      100%;
    margin:     0 auto;
    padding:    3rem 2rem 4rem;
    box-sizing: border-box;
}

/* Indicateur "Étape X/Y" dans le contenu */
.custom-stepper-form .sf-step-counter {
    font-family:    'Inter', sans-serif;
    font-size:      .78rem;
    font-weight:    600;
    color:          var(--grey-500);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom:  1.5rem;
    display:        block;
}

.custom-stepper-form *,
.custom-stepper-form *::before,
.custom-stepper-form *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}


/* ═══════════════════════════════════════════════════════════════
   TOPBAR — pleine largeur, injectée AVANT le wrapper
═══════════════════════════════════════════════════════════════ */

.sf-topbar {
    width:         100%;
    padding:       .65rem 1.5rem 0;
    background:    #f0f5f9;
    border-bottom: 1px solid #dde8ef;
    box-sizing:    border-box;
}

.sf-topbar-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             .75rem;
    padding-bottom:  .625rem;
    flex-wrap:       wrap;
}

/* Logo image (vrai logo WP) */
.sf-logo-link {
    display:     inline-flex;
    align-items: center;
    line-height: 0;
}
.sf-logo-img {
    max-height:  36px;
    width:       auto;
    display:     block;
    object-fit:  contain;
}

/* Logo texte fallback */
.sf-logo-text {
    font-family:    'Rubik', sans-serif;
    font-size:      1.05rem;
    font-weight:    500;
    color:          #1b4159;
    letter-spacing: -.01em;
    line-height:    1;
}
.sf-logo-acc { color: #2da3ed; }

/* Badge "Livret" */
.sf-badge {
    display:        inline-flex;
    align-items:    center;
    height:         20px;
    padding:        0 7px;
    border-radius:  8px;
    border:         1.5px solid #c5dff4;
    background:     #eef8fe;
    color:          #0e6ba6;
    font-family:    'Inter', sans-serif;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-left:    .5rem;
    vertical-align: middle;
}

/* Côté gauche — logo + badge alignés */
.sf-topbar-left {
    display:     flex;
    align-items: center;
    gap:         .5rem;
}

/* Côté droit */
.sf-topbar-right {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    flex-wrap:   wrap;
}

/* Statut sauvegarde */
.sf-autosave {
    font-family: 'Inter', sans-serif;
    font-size:   11px;
    font-weight: 400;
    color:       #5f707c;
    white-space: nowrap;
}
.sf-autosave-ok   { color: #10b981; }
.sf-autosave-warn { color: #f59e0b; }

/* Boutons topbar */
.sf-btn-preview,
.sf-btn-save {
    display:       inline-flex;
    align-items:   center;
    gap:           .3rem;
    height:        28px;
    padding:       0 .875rem;
    border-radius: 50px;
    font-family:   'Inter', sans-serif;
    font-size:     12px;
    font-weight:   700;
    line-height:   1;
    cursor:        pointer;
    transition:    all .15s;
    white-space:   nowrap;
    flex-shrink:   0;
}
.sf-btn-preview {
    border:     1.5px solid #c5dff4;
    background: #ffffff;
    color:      #5f707c;
}
.sf-btn-preview:hover {
    border-color: #2da3ed;
    color:        #2da3ed;
    background:   #eef8fe;
}
.sf-btn-save {
    border:     none;
    background: #2da3ed;
    color:      #ffffff;
    box-shadow: 0 2px 8px rgba(45,163,237,.25);
}
.sf-btn-save:hover { background: #0e6ba6; }

/* Compteur X/7 — masqué, remplacé par le compteur inline dans le contenu */
.sf-counter { display: none; }

/* Barre de progression */
.sf-progress-wrap {
    height:     4px;
    background: #dde8ef;
    margin:     0;
}
.sf-progress-fill {
    height:     100%;
    background: linear-gradient(90deg, #10b981, #06b6d4);
    transition: width .5s cubic-bezier(.4,0,.2,1);
    width:      0%;
}


/* ═══════════════════════════════════════════════════════════════
   ONGLETS D'ÉTAPES — Design numéroté professionnel
═══════════════════════════════════════════════════════════════ */

.sf-tabs {
    display:       flex;
    gap:           0;
    padding:       16px 24px 12px;
    background:    #f0f5f9;
    border-bottom: 1px solid #dde8ef;
    width:         100%;
    box-sizing:    border-box;
    overflow-x:    auto;
    scrollbar-width: none;
}
.sf-tabs::-webkit-scrollbar { display: none; }

.sf-tab {
    flex:              1;
    min-width:         0;
    display:           flex;
    flex-direction:    column;
    align-items:       center;
    gap:               8px;
    border:            none;
    background:        transparent !important;
    padding:           0 4px;
    cursor:            pointer;
    position:          relative;
    user-select:       none;
    transition:        opacity .2s;
    -webkit-appearance: none;
    appearance:        none;
    outline:           none;
    box-shadow:        none !important;
}

/* Ligne de connexion — moitié gauche (entre tab précédente et cette icône) */
.sf-tab:not(:first-child)::before {
    content:    '';
    position:   absolute;
    height:     2px;
    background: #e8e4e1;
    top:        13px;
    left:       0;
    right:      50%;
    z-index:    0;
}

/* Ligne de connexion — moitié droite (entre cette icône et la tab suivante) */
.sf-tab:not(:last-child)::after {
    content:    '';
    position:   absolute;
    height:     2px;
    background: #e8e4e1;
    top:        13px;
    left:       50%;
    right:      0;
    z-index:    0;
}

/* Lignes colorées pour les étapes complétées */
.sf-tab.done::before,
.sf-tab.done::after  { background: #10b981; }
.sf-tab.active::before { background: #10b981; }

/* Cercle de l'icône / numéro */
.sf-tab-ic {
    width:          26px;
    height:         26px;
    border-radius:  50%;
    border:         2px solid #ddd8d4;
    background:     #ffffff;
    color:          #c5bfba;
    font-family:    'Inter', sans-serif;
    font-size:      10px;
    font-weight:    800;
    display:        flex;
    align-items:    center;
    justify-content: center;
    line-height:    1;
    position:       relative;
    z-index:        1;
    flex-shrink:    0;
    transition:     all .2s;
}

/* Label sous le cercle */
.sf-tab-lbl {
    font-family:    'Inter', sans-serif;
    font-size:      10px;
    font-weight:    500;
    color:          #c5bfba;
    line-height:    1;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    max-width:      100%;
    display:        block;
    text-align:     center;
    transition:     color .2s;
}

/* Complétée — cercle vert ✓ */
.sf-tab.done .sf-tab-ic {
    background:   #10b981;
    border-color: #10b981;
    color:        #ffffff;
    font-size:    12px;
}
.sf-tab.done .sf-tab-lbl { color: #4b5563; font-weight: 600; }
.sf-tab.done:hover .sf-tab-ic { background: #059669; border-color: #059669; transform: scale(1.1); }

/* Active — cercle navy */
.sf-tab.active { background: transparent !important; }
.sf-tab.active .sf-tab-ic {
    background:   #1b3a5c;
    border-color: #1b3a5c;
    color:        #ffffff;
    box-shadow:   0 2px 12px rgba(27,58,92,.35);
    font-size:    12px;
    transform:    scale(1.12);
}
.sf-tab.active .sf-tab-lbl { color: #1b3a5c; font-weight: 700; }

/* À venir — semi-transparent mais cliquable */
.sf-tab.future { opacity: .45; }
.sf-tab.future:hover { opacity: .75; }
.sf-tab.future:hover .sf-tab-ic { border-color: #aaa; color: #555; transform: scale(1.05); }

/* Transition douce sur le cercle pour tous les états */
.sf-tab-ic { transition: all .2s; }


/* ═══════════════════════════════════════════════════════════════
   INDICATEURS D'ÉTAPES (legacy — masqués par JS)
═══════════════════════════════════════════════════════════════ */

.custom-stepper-form .step-indicator {
    display:         flex;
    justify-content: center;
    gap:             10px;
    margin-bottom:   24px;
}

.custom-stepper-form .indicator {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    background:    var(--border);
    transition:    background 0.3s, transform 0.2s;
    flex-shrink:   0;
}

.custom-stepper-form .indicator.active {
    background: var(--blue-600);
    transform:  scale(1.4);
}

.custom-stepper-form .indicator.done {
    background: var(--blue-800);
    opacity:    0.7;
}


/* ═══════════════════════════════════════════════════════════════
   BARRE DE PROGRESSION
═══════════════════════════════════════════════════════════════ */

.custom-stepper-form .stepper-progress {
    height:        4px;
    background:    var(--border-soft);
    border-radius: 4px;
    overflow:      hidden;
    margin-bottom: 1.75rem;
}

.custom-stepper-form .stepper-progress-bar {
    height:        100%;
    background:    linear-gradient(90deg, var(--blue-600), var(--blue-800));
    border-radius: 4px;
    transition:    width 0.4s ease;
}


/* ═══════════════════════════════════════════════════════════════
   ÉTAPES
═══════════════════════════════════════════════════════════════ */

.custom-stepper-form .step {
    display: none;
}

.custom-stepper-form .step.active {
    display: block;
}

/* Icône emoji — bloc au-dessus du titre */
.custom-stepper-form .step-icon {
    display:     block;
    font-size:   2.4rem;
    line-height: 1;
    margin-bottom: .6rem;
    margin-top:  0;
    user-select: none;
}

/* Titre d'étape — Rubik Medium 500, title/h3 (CLAUDE.md §2) */
.custom-stepper-form .step h3 {
    font-family:   'Rubik', sans-serif;
    font-size:     clamp(20px, 2.5vw, 26px);
    font-weight:   700;
    line-height:   1.22;
    color:         var(--main-800);
    margin-bottom: .4rem;
    margin-top:    0;
    letter-spacing: -.01em;
}

/* Sous-titre — Inter Regular/Medium, text/S (CLAUDE.md §2) */
.custom-stepper-form .step-subtitle {
    font-family:   'Inter', sans-serif;
    font-size:     var(--fs-s);
    font-weight:   400;
    color:         var(--grey-500);
    line-height:   1.55;
    margin-bottom: 1.75rem;
    margin-top:    0;
}


/* ═══════════════════════════════════════════════════════════════
   INPUTS / TEXTAREA / SELECT
═══════════════════════════════════════════════════════════════ */

.custom-stepper-form input[type="text"],
.custom-stepper-form input[type="email"],
.custom-stepper-form input[type="url"],
.custom-stepper-form input[type="tel"],
.custom-stepper-form textarea,
.custom-stepper-form select {
    width:              100%;
    padding:            .9rem 1.1rem;
    border:             1.5px solid #dde8ef;
    border-radius:      12px;
    font-family:        'Inter', sans-serif;
    font-size:          var(--fs-s);
    font-weight:        400;
    color:              var(--main-800);
    background:         #ffffff;
    outline:            none;
    resize:             none;
    transition:         border-color .2s, box-shadow .2s;
    margin-top:         6px;
    display:            block;
    -webkit-appearance: none;
    box-shadow:         0 2px 8px rgba(27,58,92,.06);
}

.custom-stepper-form input[type="text"]:focus,
.custom-stepper-form input[type="email"]:focus,
.custom-stepper-form input[type="url"]:focus,
.custom-stepper-form input[type="tel"]:focus,
.custom-stepper-form textarea:focus,
.custom-stepper-form select:focus {
    border-color: #06b6d4;
    box-shadow:   0 0 0 3px rgba(6,182,212,.14), 0 2px 8px rgba(27,58,92,.06);
    outline:      none;
}

.custom-stepper-form textarea {
    min-height: 130px;
    resize:     vertical;
}


/* ═══════════════════════════════════════════════════════════════
   LABELS — Inter Bold 700, uppercase, letter-spacing 1.8px
   Équivalent title/h4 dans CLAUDE.md §2
═══════════════════════════════════════════════════════════════ */

.custom-stepper-form .lbl {
    display:        block;
    font-family:    'Inter', sans-serif;
    font-size:      var(--fs-tag);      /* 12px */
    font-weight:    700;
    color:          var(--blue-800);
    margin-bottom:  .35rem;
    margin-top:     1.25rem;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    line-height:    14px;
}

.custom-stepper-form .fg {
    margin-bottom: 1.25rem;
}

.custom-stepper-form .fg:last-child {
    margin-bottom: 0;
}

/* Hint — Inter Regular 12px, mention style (CLAUDE.md §2) */
.custom-stepper-form .fg-hint {
    font-family:  'Inter', sans-serif;
    font-size:    var(--fs-tag);
    font-weight:  400;
    color:        var(--grey-500);
    margin-top:   .35rem;
    line-height:  14px;
}

.custom-stepper-form .row-2 {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   .75rem;
    align-items:           end;   /* aligne les inputs en bas quand les labels ont des hauteurs différentes */
}

/* Chaque colonne de row-2 empile label + input, input toujours en bas */
.custom-stepper-form .row-2 > * {
    display:        flex;
    flex-direction: column;
    justify-content: flex-end;
}


/* ═══════════════════════════════════════════════════════════════
   CHIPS / TAGS — Inter Bold 700, 12px, radius 8px (CLAUDE.md §4)
═══════════════════════════════════════════════════════════════ */

.custom-stepper-form .chips {
    display:    flex;
    gap:        .45rem;
    flex-wrap:  wrap;
    margin-top: .5rem;
}

.custom-stepper-form .chip {
    display:       inline-flex;
    align-items:   center;
    height:        32px;
    padding:       0 12px;
    border-radius: var(--radius-tag);
    border:        1.5px solid var(--border);
    background:    var(--white);
    color:         var(--grey-500);
    font-family:   'Inter', sans-serif;
    font-size:     var(--fs-tag);
    font-weight:   700;
    line-height:   14px;
    cursor:        pointer;
    transition:    all .15s;
    user-select:   none;
}

.custom-stepper-form .chip:hover {
    border-color: var(--blue-600);
    color:        var(--blue-800);
    background:   var(--blue-100);
}

/* État actif via CSS natif :has() */
.custom-stepper-form label.chip:has(input[type="checkbox"]:checked),
.custom-stepper-form label.chip:has(input[type="radio"]:checked) {
    border-color: var(--blue-600);
    background:   var(--blue-100);
    color:        var(--blue-800);
}


/* ═══════════════════════════════════════════════════════════════
   PICK CARDS (type de lieu, repas, layout)
═══════════════════════════════════════════════════════════════ */

.custom-stepper-form .pick-row {
    display:    flex;
    gap:        .625rem;
    margin-top: .5rem;
}

.custom-stepper-form .pick-card {
    flex:          1;
    padding:       1rem .75rem;
    border:        2px solid var(--border);
    border-radius: 12px;
    text-align:    center;
    cursor:        pointer;
    transition:    all .15s;
    background:    var(--white);
    user-select:   none;
}

.custom-stepper-form .pick-card .pi {
    font-size:     1.5rem;
    margin-bottom: .35rem;
    display:       block;
}

.custom-stepper-form .pick-card .pl {
    font-family: 'Inter', sans-serif;
    font-size:   var(--fs-xs);
    font-weight: 700;
    color:       var(--grey-500);
    display:     block;
    line-height: 14px;
}

.custom-stepper-form label.pick-card:has(input:checked) {
    border-color: var(--blue-600);
    background:   var(--blue-100);
}

.custom-stepper-form label.pick-card:has(input:checked) .pl {
    color: var(--blue-800);
}


/* ═══════════════════════════════════════════════════════════════
   CAPACITÉ (boutons ronds 1–4)
═══════════════════════════════════════════════════════════════ */

.custom-stepper-form .caps {
    display:     flex;
    gap:         .625rem;
    align-items: center;
    flex-wrap:   wrap;
    margin-top:  .5rem;
}

.custom-stepper-form .cap-n {
    width:           48px;
    height:          48px;
    border-radius:   50%;
    border:          2px solid var(--border);
    background:      var(--white);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     'Inter', sans-serif;
    font-weight:     700;
    font-size:       var(--fs-default);
    color:           var(--grey-500);
    cursor:          pointer;
    transition:      all .15s;
    flex-shrink:     0;
    user-select:     none;
}

.custom-stepper-form label.cap-n:has(input:checked) {
    border-color: var(--blue-600);
    color:        var(--blue-800);
    background:   var(--blue-100);
}


/* ═══════════════════════════════════════════════════════════════
   JOURS DE LA SEMAINE
═══════════════════════════════════════════════════════════════ */

.custom-stepper-form .days {
    display:    flex;
    gap:        .45rem;
    flex-wrap:  wrap;
    margin-top: .5rem;
}

.custom-stepper-form .day {
    width:           40px;
    height:          40px;
    border-radius:   var(--radius-tag);
    border:          2px solid var(--border);
    background:      var(--white);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     'Inter', sans-serif;
    font-size:       var(--fs-xs);
    font-weight:     700;
    color:           var(--grey-500);
    cursor:          pointer;
    transition:      all .15s;
    user-select:     none;
}

.custom-stepper-form label.day:has(input:checked) {
    border-color: var(--blue-600);
    background:   var(--blue-100);
    color:        var(--blue-800);
}


/* ═══════════════════════════════════════════════════════════════
   GRILLE PHOTOS
═══════════════════════════════════════════════════════════════ */

.custom-stepper-form .pgrid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   .625rem;
    margin-top:            .5rem;
}

.custom-stepper-form .pslot {
    aspect-ratio:    4/3;
    border:          2px dashed var(--border);
    border-radius:   12px;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    background:      var(--blue-100);
    position:        relative;
    overflow:        hidden;
    transition:      border-color .15s, background .15s;
}

.custom-stepper-form .pslot:hover {
    border-color: var(--blue-600);
    background:   #daeefb;
}

.custom-stepper-form .pslot:active {
    transform: scale(.98);
}

.custom-stepper-form .pslot img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    position:   absolute;
    inset:      0;
    z-index:    2;
    display:    block;
}

/* Quand une photo est chargée via background-image — masquer overlay + vider le background par défaut */
.custom-stepper-form .pslot.has-photo {
    border-style: solid;
    border-color: var(--blue-600);
}
.custom-stepper-form .pslot.has-photo .pslot-icon,
.custom-stepper-form .pslot.has-photo .pslot-label,
.custom-stepper-form .pslot.has-photo .pslot-add {
    display: none;
}

/* Indicateur "photo chargée" : coche verte en coin */
.custom-stepper-form .pslot.has-photo::after {
    content:      '✓';
    position:     absolute;
    top:          8px;
    right:        8px;
    z-index:      3;
    width:        24px;
    height:       24px;
    border-radius: 50%;
    background:   var(--blue-600);
    color:        var(--white);
    font-size:    13px;
    font-weight:  700;
    line-height:  24px;
    text-align:   center;
    box-shadow:   0 2px 6px rgba(0,0,0,.2);
}

.custom-stepper-form .pslot-label {
    font-family: 'Inter', sans-serif;
    font-size:   var(--fs-xs);
    font-weight: 700;
    color:       var(--blue-800);
    text-align:  center;
    margin-top:  .25rem;
}

.custom-stepper-form .pslot-add {
    font-family: 'Inter', sans-serif;
    font-size:   var(--fs-tag);
    font-weight: 400;
    color:       var(--grey-500);
    margin-top:  .15rem;
}

.custom-stepper-form .pslot-icon {
    font-size: 1.4rem;
}


/* ═══════════════════════════════════════════════════════════════
   TOGGLES
═══════════════════════════════════════════════════════════════ */

.custom-stepper-form .tgl-row {
    display:       flex;
    align-items:   center;
    gap:           .875rem;
    padding:       .75rem 1rem;
    border:        1.5px solid var(--border);
    border-radius: 10px;
    cursor:        pointer;
    margin-bottom: .5rem;
    background:    var(--white);
    transition:    border-color .15s, background .15s;
    user-select:   none;
}

.custom-stepper-form .tgl-row:hover,
.custom-stepper-form label.tgl-row:has(input:checked) {
    border-color: var(--blue-600);
    background:   var(--blue-100);
}

.custom-stepper-form .tgl {
    width:         40px;
    height:        22px;
    border-radius: 50px;
    background:    var(--border);
    position:      relative;
    transition:    background .2s;
    flex-shrink:   0;
}

.custom-stepper-form .tgl::after {
    content:       "";
    position:      absolute;
    top:           3px;
    left:          3px;
    width:         16px;
    height:        16px;
    border-radius: 50%;
    background:    var(--white);
    transition:    left .2s;
    box-shadow:    0 1px 4px rgba(0,0,0,.2);
}

.custom-stepper-form label.tgl-row:has(input:checked) .tgl {
    background: var(--blue-600);
}

.custom-stepper-form label.tgl-row:has(input:checked) .tgl::after {
    left: 19px;
}

/* Label du toggle — Inter Bold 700, text/S (CLAUDE.md §2) */
.custom-stepper-form .tgl-label {
    font-family: 'Inter', sans-serif;
    font-size:   var(--fs-s);
    font-weight: 700;
    color:       var(--main-800);
}

/* Hint du toggle — Inter Regular 12px, mention (CLAUDE.md §2) */
.custom-stepper-form .tgl-hint {
    font-family: 'Inter', sans-serif;
    font-size:   var(--fs-tag);
    font-weight: 400;
    color:       var(--grey-500);
    margin-top:  .1rem;
    line-height: 14px;
}


/* ═══════════════════════════════════════════════════════════════
   AVATAR
═══════════════════════════════════════════════════════════════ */

.custom-stepper-form .avatar-wrap {
    display:       flex;
    align-items:   center;
    gap:           1rem;
    margin-bottom: 1.25rem;
}

.custom-stepper-form .avatar-circle {
    width:           76px;
    height:          76px;
    border-radius:   50%;
    background:      var(--blue-100);
    border:          2px dashed var(--blue-600);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       2rem;
    flex-shrink:     0;
    overflow:        hidden;
    position:        relative;
}

.custom-stepper-form .avatar-circle img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

/* Bouton avatar — Inter Bold 700, 14px (CLAUDE.md §6) */
.custom-stepper-form .avatar-btn {
    display:       inline-block;
    padding:       .55rem 1.1rem;
    border-radius: 50px;
    border:        1.5px solid var(--blue-600);
    color:         var(--blue-800);
    font-family:   'Inter', sans-serif;
    font-size:     var(--fs-btn);
    font-weight:   700;
    line-height:   var(--fs-btn);
    cursor:        pointer;
    background:    var(--white);
    transition:    background .15s, color .15s;
}

.custom-stepper-form .avatar-btn:hover {
    background: var(--blue-100);
}

.custom-stepper-form .avatar-hint {
    font-family: 'Inter', sans-serif;
    font-size:   var(--fs-tag);
    font-weight: 400;
    color:       var(--grey-500);
    margin-top:  .35rem;
}


/* ═══════════════════════════════════════════════════════════════
   TEMPLATES GRAPHIQUES
═══════════════════════════════════════════════════════════════ */

.custom-stepper-form .tpl-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   .75rem;
    margin-bottom:         1rem;
    margin-top:            .5rem;
}

.custom-stepper-form .tpl-card {
    border:        2px solid var(--border);
    border-radius: 12px;
    overflow:      hidden;
    cursor:        pointer;
    transition:    border-color .15s;
    background:    var(--white);
}

.custom-stepper-form label.tpl-card:has(input:checked) {
    border-color: var(--blue-600);
    background:   var(--blue-100);
}

.custom-stepper-form .tpl-preview {
    height:          70px;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             .3rem;
}

.custom-stepper-form .tpl-info {
    padding:         .55rem .75rem;
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             .5rem;
}

.custom-stepper-form .tpl-name {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size:   var(--fs-xs);
    color:       var(--main-800);
    line-height: 1.2;
}

.custom-stepper-form .tpl-desc {
    font-family: 'Inter', sans-serif;
    font-size:   var(--fs-tag);
    font-weight: 400;
    color:       var(--grey-500);
    line-height: 1.2;
}


/* ═══════════════════════════════════════════════════════════════
   PASTILLES DE COULEUR D'ACCENT
═══════════════════════════════════════════════════════════════ */

.custom-stepper-form .cdots {
    display:    flex;
    gap:        .7rem;
    flex-wrap:  wrap;
    padding:    .25rem 0;
    margin-top: .5rem;
}

.custom-stepper-form .cdot {
    width:          40px;
    height:         40px;
    border-radius:  50%;
    cursor:         pointer;
    transition:     transform .15s, outline-color .15s;
    box-shadow:     0 2px 8px rgba(0,0,0,.15);
    border:         3px solid var(--white);
    outline:        2px solid transparent;
    outline-offset: 2px;
}

.custom-stepper-form label.cdot:has(input:checked) {
    outline-color: var(--main-800);
}

.custom-stepper-form .cdot:active {
    transform: scale(.95);
}


/* ═══════════════════════════════════════════════════════════════
   BLOCS INFO / TIP
═══════════════════════════════════════════════════════════════ */

.custom-stepper-form .tip {
    border-radius: 10px;
    padding:       .8rem 1rem;
    margin-bottom: 1.25rem;
    display:       flex;
    gap:           .7rem;
    font-family:   'Inter', sans-serif;
    font-size:     var(--fs-s);
    font-weight:   400;
    line-height:   1.55;
    align-items:   flex-start;
}

.custom-stepper-form .tip-emoji {
    flex-shrink: 0;
    font-size:   1.1rem;
}

.custom-stepper-form .tip-info {
    background: var(--blue-100);
    border:     1px solid var(--border);
    color:      var(--blue-800);
}

.custom-stepper-form .tip-warn {
    background: #fffbf0;
    border:     1px solid #f9e0a0;
    color:      #7a5c00;
}


/* ═══════════════════════════════════════════════════════════════
   BOUTONS DE NAVIGATION
═══════════════════════════════════════════════════════════════ */

.custom-stepper-form .step-buttons {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             .75rem;
    margin-top:      2rem;
}

/* Bouton "Suivant" — pill plein, navy */
.custom-stepper-form .next-btn,
.custom-stepper-form .submit-btn {
    padding:       .85rem 2rem;
    border:        none;
    border-radius: 50px;
    background:    var(--navy);
    color:         #ffffff;
    font-family:   'Inter', sans-serif;
    font-weight:   700;
    font-size:     .9rem;
    line-height:   1;
    cursor:        pointer;
    text-align:    center;
    box-shadow:    0 4px 16px rgba(27,58,92,.25);
    transition:    background .2s, transform .15s, box-shadow .2s;
    white-space:   nowrap;
}

.custom-stepper-form .next-btn:hover,
.custom-stepper-form .submit-btn:hover {
    background: #274e72;
    transform:  translateY(-1px);
    box-shadow: 0 6px 22px rgba(27,58,92,.32);
}

.custom-stepper-form .next-btn:active,
.custom-stepper-form .submit-btn:active {
    transform: scale(.97);
}

/* Bouton "Précédent" — pill contour navy */
.custom-stepper-form .prev-btn {
    padding:       .82rem 1.6rem;
    border-radius: 50px;
    border:        2px solid var(--navy);
    background:    transparent;
    color:         var(--navy);
    font-family:   'Inter', sans-serif;
    font-weight:   600;
    font-size:     .9rem;
    line-height:   1;
    cursor:        pointer;
    transition:    background .2s, color .2s;
    white-space:   nowrap;
}

.custom-stepper-form .prev-btn:hover {
    background: rgba(27,58,92,.07);
}

/* Submit — même style, accentué */
.custom-stepper-form .submit-btn {
    background: var(--navy);
    box-shadow: 0 4px 18px rgba(27,58,92,.28);
    padding:    .9rem 2.2rem;
}

/* Bouton seul sans wrapper .step-buttons */
.custom-stepper-form .step > .next-btn {
    display:    block;
    width:      100%;
    margin-top: 2rem;
}


/* ═══════════════════════════════════════════════════════════════
   CHAMPS CONDITIONNELS
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   ÉTAPE FINALE — espacement entre les blocs
═══════════════════════════════════════════════════════════════ */

.custom-stepper-form .step:last-child > .lbl {
    display:      block;
    margin-top:   1.5rem;
    margin-bottom: .6rem;
}

.custom-stepper-form .step:last-child > .pick-row {
    margin-bottom: 1.25rem;
}

.custom-stepper-form .step:last-child > .tgl-row {
    margin-bottom: 1rem;
}

.custom-stepper-form .step:last-child > .step-buttons {
    margin-top: 2rem;
}


/* ═══════════════════════════════════════════════════════════════
   PANNEAU D'ERREURS DE VALIDATION GLOBALE
═══════════════════════════════════════════════════════════════ */

.custom-stepper-form .sf-val-errors {
    background:    #FEF2F2;
    border:        1.5px solid #FCA5A5;
    border-radius: 12px;
    padding:       16px 20px;
    margin-bottom: 1.25rem;
    animation:     sfErrIn .25s ease;
}

@keyframes sfErrIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.custom-stepper-form .sf-val-errors-title {
    font-weight:   700;
    color:         #B91C1C;
    font-size:     .88rem;
    margin-bottom: 10px;
    display:       flex;
    align-items:   center;
    gap:           6px;
}

.custom-stepper-form .sf-val-error-item {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       7px 0;
    border-bottom: 1px solid #FECACA;
    cursor:        pointer;
    font-size:     .85rem;
    color:         #7F1D1D;
    transition:    color .15s;
}

.custom-stepper-form .sf-val-error-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.custom-stepper-form .sf-val-error-item:hover { color: #B91C1C; }

.custom-stepper-form .sf-val-error-step {
    background:   #FCA5A5;
    color:        #7F1D1D;
    font-size:    .7rem;
    font-weight:  700;
    padding:      3px 9px;
    border-radius: 50px;
    flex-shrink:  0;
    white-space:  nowrap;
}

.custom-stepper-form .sf-val-error-item:hover .sf-val-error-step {
    background: #F87171;
    color:      #fff;
}


/* ═══════════════════════════════════════════════════════════════
   CHAMPS CONDITIONNELS
═══════════════════════════════════════════════════════════════ */

.custom-stepper-form .mam-section,
.custom-stepper-form .animaux-detail-field,
.custom-stepper-form .qr-url-field {
    display: none;
}

.custom-stepper-form .mam-section.visible,
.custom-stepper-form .animaux-detail-field.visible,
.custom-stepper-form .qr-url-field.visible {
    display: block;
}


/* ═══════════════════════════════════════════════════════════════
   TOAST DE VALIDATION — Inter Bold 700
═══════════════════════════════════════════════════════════════ */

.custom-stepper-form .stepper-toast {
    display:       none;
    position:      fixed;
    bottom:        90px;
    left:          50%;
    transform:     translateX(-50%);
    background:    #dc2626;
    color:         var(--white);
    padding:       .75rem 1.25rem;
    border-radius: 50px;
    font-family:   'Inter', sans-serif;
    font-size:     var(--fs-s);
    font-weight:   700;
    z-index:       9999;
    box-shadow:    0 8px 24px rgba(220,38,38,.4);
    max-width:     90vw;
    text-align:    center;
    white-space:   nowrap;
}

.custom-stepper-form .stepper-toast.visible {
    display: block;
}


/* ═══════════════════════════════════════════════════════════════
   VALIDATION — Champs requis & erreurs
═══════════════════════════════════════════════════════════════ */

/* Astérisque requis */
.custom-stepper-form .req-star {
    color:       #E8457A;
    font-weight: 700;
    margin-left: 2px;
}

/* Note « au moins un moment requis » */
.custom-stepper-form .req-note {
    font-family: 'Inter', sans-serif;
    font-size:   13px;
    color:       #E8457A;
    margin:      .25rem 0 .75rem;
    padding:     .4rem .75rem;
    background:  #FFF0F5;
    border-left: 3px solid #E8457A;
    border-radius: 0 6px 6px 0;
}

/* Conteneur de champ en erreur */
.custom-stepper-form .field-error input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
.custom-stepper-form .field-error textarea {
    border-color: #E8457A !important;
    background:   #FFF5F8 !important;
    outline:      none;
    animation:    field-shake .3s ease;
}
.custom-stepper-form .field-error .pick-card {
    border-color: #E8457A !important;
}
.custom-stepper-form .field-error .cap-n {
    border-color: #E8457A !important;
}

@keyframes field-shake {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

/* Compteur de caractères personnalité */
.custom-stepper-form .char-counter {
    font-family: 'Inter', sans-serif;
    font-size:   12px;
    color:       #9399A8;
    margin-top:  5px;
    text-align:  right;
    transition:  color .2s;
}
.custom-stepper-form .char-counter.char-counter-warn { color: #E8457A; font-weight: 600; }
.custom-stepper-form .char-counter.char-counter-ok   { color: #10b981; font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet MD : 768px (CLAUDE.md §8)
═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    .custom-stepper-form .sf-content {
        padding: 1.75rem 1.25rem 2.5rem;
    }

    .custom-stepper-form .step h3 {
        font-size: 24px;   /* Tablet MD CLAUDE.md §8 */
    }
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile HDM : 480px (CLAUDE.md §8)
═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

    .custom-stepper-form .sf-content {
        padding: 1rem .75rem 2rem;
    }

    .sf-autosave { display: none; }
    .sf-counter  { display: none; }

    .sf-tabs {
        padding: 14px 12px 10px;
    }
    .sf-tab { padding: 0 2px; gap: 5px; }
    .sf-tab-ic { width: 22px; height: 22px; font-size: 9px; }
    .sf-tab::before, .sf-tab::after { top: 11px; }
    .sf-tab-lbl { display: none; }

    .custom-stepper-form .step h3 {
        font-size: 23px;   /* Mobile HDM CLAUDE.md §8 */
    }

    .custom-stepper-form .row-2 {
        grid-template-columns: 1fr;
    }

    .custom-stepper-form .pick-row {
        gap: .4rem;
    }

    .custom-stepper-form .tpl-grid {
        grid-template-columns: 1fr 1fr;
    }

    .custom-stepper-form .next-btn,
    .custom-stepper-form .submit-btn {
        padding: .8rem 1rem;
    }

    .custom-stepper-form .prev-btn {
        padding: .8rem 1rem;
    }

    .custom-stepper-form .cap-n {
        width:  44px;
        height: 44px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile XS : 375px (CLAUDE.md §8)
═══════════════════════════════════════════════════════════════ */

@media (max-width: 375px) {

    .custom-stepper-form .step h3 {
        font-size: 21px;   /* Mobile XS CLAUDE.md §8 */
    }
}