/* [FEATURE] 2026-07-11 (Claude, audit tn82) : feuille de style dediee a la demande de
   l'utilisateur - mise en page inspiree de sites MLM/e-commerce reconnus (Forever Living :
   hero d'intro, cartes thematiques groupees, hierarchie visuelle claire, CTA marquee), en
   gardant l'identite de couleur MACOCO existante (accent #ca86a7 deja dominant dans
   css/main-2.css - boutons, liens actifs - noir/blanc en base). Ne redefinit que des
   nouvelles classes (macoco-*) : aucune regle globale (form-control, btn, etc.) n'est
   surchargee ici pour eviter tout effet de bord sur les autres pages qui partagent
   main-1.css/main-2.css. Prevu pour etre reutilisee/etendue sur product-detail.php,
   cart.php et registration-payment.php dans une prochaine etape (une page a la fois). */

:root {
    --macoco-accent: #ca86a7;
    --macoco-accent-dark: #b06d8d;
    --macoco-ink: #231f20;
    --macoco-border: #ebebeb;
    --macoco-muted: #787878;
}

/* --- Hero d'intro (haut de page, avant le formulaire) --- */
.macoco-hero {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 38px 15px 32px;
    margin-bottom: 28px;
}

.macoco-hero h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #fff;
}

.macoco-hero p {
    font-size: 15px;
    color: #e6e6e6;
    max-width: 640px;
    margin: 0 auto 18px;
    line-height: 1.5;
}

.macoco-hero-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.macoco-hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
}

/* --- Cartes thematiques regroupant les champs du formulaire --- */
.macoco-card {
    background: #fff;
    border: 1px solid var(--macoco-border);
    border-radius: 10px;
    margin-bottom: 22px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.macoco-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fafafa;
    border-bottom: 2px solid var(--macoco-accent);
    padding: 14px 20px;
}

.macoco-card-icon {
    font-size: 20px;
    line-height: 1;
}

.macoco-card-header h3 {
    margin: 0;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--macoco-ink);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.macoco-card-body {
    padding: 20px 20px 6px;
}

.macoco-card-final {
    border-color: var(--macoco-accent);
}

/* --- Champs : etat de focus coherent avec l'accent MACOCO --- */
#registration .form-control:focus {
    border-color: var(--macoco-accent);
    box-shadow: 0 0 0 3px rgba(202, 134, 167, 0.15);
    outline: none;
}

/* --- Bouton de soumission final, mis en avant --- */
.macoco-btn-primary {
    background: var(--macoco-accent) !important;
    border-color: var(--macoco-accent) !important;
    color: #fff !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 12px 34px !important;
    border-radius: 24px !important;
    font-size: 15px !important;
    box-shadow: 0 2px 8px rgba(202, 134, 167, 0.35);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.macoco-btn-primary:hover,
.macoco-btn-primary:focus {
    background: var(--macoco-accent-dark) !important;
    border-color: var(--macoco-accent-dark) !important;
    box-shadow: 0 3px 12px rgba(202, 134, 167, 0.45);
}

/* --- Boutons secondaires (envoyer le code / valider) --- */
#btn-send-email-code,
#btn-verify-email-code {
    border-radius: 18px;
    border-color: var(--macoco-accent);
    color: var(--macoco-accent-dark);
    font-weight: 600;
}

#btn-send-email-code:hover,
#btn-verify-email-code:hover {
    background: var(--macoco-accent);
    color: #fff;
}

@media (max-width: 767px) {
    .macoco-hero {
        padding: 28px 15px 24px;
    }

    .macoco-hero h1 {
        font-size: 22px;
    }

    .macoco-card-body {
        padding: 16px 16px 4px;
    }
}

/* [REDESIGN] 2026-08-30 (Claude, audit tn82) : complements visuels demandes par l'utilisateur
   (page jugee "pas assez pro" en l'etat) - la structure hero/cartes ci-dessus etait deja en
   place mais semble ne jamais avoir ete deployee sur tn82 (page vue sans aucun style, champs
   empiles sans hierarchie). Regles ci-dessous purement additives : typographie des labels,
   champs de saisie, indicateurs "obligatoire", numerotation des sections, image laterale -
   toujours aucune classe Bootstrap/form-control globale surchargee, aucun id/name touche. */

#registration .control-label {
    font-weight: 600;
    font-size: 13px;
    color: var(--macoco-ink);
    padding-top: 9px;
}

#registration .form-control {
    border-radius: 8px;
    border-color: var(--macoco-border);
    padding: 9px 12px;
    height: auto;
    font-size: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#registration textarea.form-control {
    resize: vertical;
}

#registration input[type="file"].form-control {
    padding: 6px 10px;
    background: #fafafa;
}

#registration .form-group {
    margin-bottom: 16px;
}

#registration .help-block {
    color: var(--macoco-muted);
    font-size: 12px;
    margin-top: 4px;
}

/* Champs requis (attribut required present) : petit repere visuel discret apres le libelle. */
#registration .form-group .control-label:has(+ .col-sm-8 [required])::after,
#registration .form-group .control-label:has(+ .inputs [required])::after {
    content: " *";
    color: var(--macoco-accent-dark);
    font-weight: 700;
}

/* Numerotation discrete des cartes (1 a 4 dans l'ordre du formulaire). */
.macoco-card { counter-increment: macoco-card-step; }
#registration { counter-reset: macoco-card-step; }
.macoco-card-header { position: relative; }
.macoco-card-header::before {
    content: counter(macoco-card-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--macoco-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

/* Bloc "Finalisation" : conditions/CGV plus lisibles, case a cocher alignee.
   [FIX] 2026-08-30 (Claude, audit tn82) : le "display:flex" applique juste avant faisait
   passer chaque noeud direct de .col-sm-8 (la case a cocher, mais aussi CHAQUE lien <a> et
   chaque fragment de texte brut entre les liens) pour un item flex distinct, aligne en ligne
   sans retour a la ligne -> le texte des conditions debordait hors de la carte au lieu de
   s'enrouler normalement (constate a l'ecran). Remplace par un flux de texte normal (la case
   a cocher reste "inline" au debut du paragraphe, comme du HTML standard) : le texte s'enroule
   a nouveau correctement quelle que soit la largeur d'ecran. */
.macoco-card-final .form-group:first-child .col-sm-8 {
    font-size: 13px;
    line-height: 1.7;
    color: var(--macoco-muted);
}

.macoco-card-final .form-group:first-child input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: -2px;
}

.macoco-card-final .form-group:last-child .col-sm-8 {
    display: flex;
    justify-content: center;
    padding-top: 4px;
}

/* Image laterale (colonne de droite, desktop) : cadre coherent avec les cartes. */
.col-md-4.col-md-pull-8 img.img-responsive {
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

@media (max-width: 991px) {
    .col-md-4.col-md-pull-8 { display: none; }
}