/* ==========================================================================
   REP MOBILE CO — CHARTE GRAPHIQUE
   --------------------------------------------------------------------------
   Source unique des couleurs, espacements et composants du site.
   Toute page doit puiser ici plutôt que redéfinir ses propres teintes.

   PALETTE IMPOSÉE PAR LE CLIENT : noir, gris, marron, or.
   ========================================================================== */

:root {

    /* ---- NOIRS ---------------------------------------------------------
       Du fond le plus profond à la surface la plus claire. */
    --noir-900: #0D0C0A;   /* fond de page */
    --noir-800: #141210;   /* sections alternées */
    --noir-700: #1B1815;   /* cartes, surfaces */
    --noir-600: #232019;   /* surfaces au survol */

    /* ---- MARRONS -------------------------------------------------------
       Teintes chaudes de liaison entre le noir et l'or. */
    --marron-900: #2A2018;  /* bordures sombres */
    --marron-700: #3E2E1E;  /* aplats, dégradés */
    --marron-500: #5C4226;  /* traits, séparateurs marqués */
    --marron-300: #8A6A40;  /* texte d'appoint chaud */

    /* ---- OR ------------------------------------------------------------
       Couleur d'accent : titres, liens actifs, boutons principaux. */
    --or-600: #A8821F;      /* or sombre, dégradés */
    --or-500: #C9A227;      /* OR PRINCIPAL */
    --or-400: #D9B84A;      /* survol */
    --or-300: #E6CE7E;      /* reflets, texte sur fond sombre */

    /* ---- GRIS ----------------------------------------------------------  */
    --gris-800: #2E2B27;    /* bordures discrètes */
    --gris-600: #4A4640;    /* séparateurs */
    --gris-400: #8B857C;    /* texte secondaire faible */
    --gris-300: #A8A299;    /* texte secondaire */
    --gris-100: #D9D5CD;    /* texte courant */
    --blanc:    #F5F2EC;    /* titres, texte fort */

    /* ---- RÔLES ---------------------------------------------------------
       On utilise ces noms dans les pages, pas les couleurs brutes :
       changer une teinte ici la met à jour partout. */
    --fond:            var(--noir-900);
    --fond-alt:        var(--noir-800);
    --surface:         var(--noir-700);
    --surface-haute:   var(--noir-600);
    --bordure:         rgba(201, 162, 39, 0.14);
    --bordure-forte:   rgba(201, 162, 39, 0.35);
    --texte:           var(--gris-100);
    --texte-doux:      var(--gris-300);
    --texte-fort:      var(--blanc);
    --accent:          var(--or-500);
    --accent-clair:    var(--or-300);
    --accent-sombre:   var(--or-600);
    --sur-accent:      #17130A;   /* texte posé sur un aplat or */

    /* ---- ÉTATS ---------------------------------------------------------
       Déclinés dans des teintes chaudes pour rester dans la palette. */
    --succes:  #7A8F3C;
    --alerte:  #B8862B;
    --erreur:  #A8452F;

    /* ---- DÉGRADÉS ------------------------------------------------------ */
    --degrade-or:      linear-gradient(135deg, var(--or-400), var(--or-600));
    --degrade-surface: linear-gradient(165deg, var(--noir-700), var(--noir-800));
    --degrade-marron:  linear-gradient(135deg, var(--marron-700), var(--marron-900));

    /* ---- TYPOGRAPHIE --------------------------------------------------- */
    --police: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* ---- RYTHME -------------------------------------------------------- */
    --espace-xs: 8px;
    --espace-s:  14px;
    --espace-m:  24px;
    --espace-l:  40px;
    --espace-xl: 72px;

    --rayon-s:  8px;
    --rayon-m:  14px;
    --rayon-l:  20px;
    --rayon-rond: 999px;

    --largeur-max: 1280px;

    /* ---- OMBRES -------------------------------------------------------- */
    --ombre-s: 0 4px 14px rgba(0, 0, 0, 0.35);
    --ombre-m: 0 12px 32px rgba(0, 0, 0, 0.45);
    --ombre-l: 0 24px 60px rgba(0, 0, 0, 0.55);
    --lueur-or: 0 6px 22px rgba(201, 162, 39, 0.30);

    /* ---- TRANSITIONS --------------------------------------------------- */
    --transition: .25s cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   COMPOSANTS COMMUNS
   Préfixés « rm- » pour ne jamais entrer en conflit avec l'existant.
   ========================================================================== */

/* ---- Conteneur ---------------------------------------------------------- */
.rm-conteneur {
    width: 100%;
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 0 var(--espace-m);
}

/* ---- Sections ----------------------------------------------------------- */
.rm-section {
    padding: var(--espace-xl) 0;
    background: var(--fond);
    color: var(--texte);
    font-family: var(--police);
}

.rm-section--alt {
    background: var(--fond-alt);
    border-top: 1px solid var(--bordure);
    border-bottom: 1px solid var(--bordure);
}

/* ---- Titres de section -------------------------------------------------- */
.rm-titre-bloc {
    max-width: 64ch;
    margin-bottom: var(--espace-l);
}

.rm-titre-bloc--centre {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.rm-surtitre {
    display: block;
    margin-bottom: var(--espace-xs);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
}

.rm-titre {
    margin: 0 0 var(--espace-s);
    font-size: clamp(1.7rem, 3.2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--texte-fort);
}

.rm-titre em {
    font-style: normal;
    color: var(--accent);
}

.rm-chapo {
    margin: 0;
    font-size: 1.02rem;
    color: var(--texte-doux);
}

/* Filet doré décoratif sous un titre centré */
.rm-filet {
    width: 64px;
    height: 2px;
    margin: var(--espace-s) auto 0;
    background: var(--degrade-or);
    border-radius: 2px;
}

/* ---- Boutons ------------------------------------------------------------ */
.rm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 28px;
    border: 1px solid transparent;
    border-radius: var(--rayon-rond);
    font-family: var(--police);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition),
                background-color var(--transition), color var(--transition),
                border-color var(--transition);
}

.rm-btn svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.rm-btn--or {
    background: var(--degrade-or);
    color: var(--sur-accent);
    box-shadow: var(--lueur-or);
}

.rm-btn--or:hover,
.rm-btn--or:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.07);
    box-shadow: 0 10px 28px rgba(201, 162, 39, 0.42);
}

.rm-btn--contour {
    border-color: var(--bordure-forte);
    background: rgba(201, 162, 39, 0.06);
    color: var(--accent-clair);
}

.rm-btn--contour:hover,
.rm-btn--contour:focus-visible {
    border-color: var(--accent);
    background: rgba(201, 162, 39, 0.13);
    transform: translateY(-2px);
}

.rm-btn--sombre {
    border-color: var(--gris-800);
    background: var(--surface);
    color: var(--texte);
}

.rm-btn--sombre:hover {
    border-color: var(--bordure-forte);
    background: var(--surface-haute);
    transform: translateY(-2px);
}

/* ---- Cartes ------------------------------------------------------------- */
.rm-carte {
    display: flex;
    flex-direction: column;
    padding: var(--espace-m);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-m);
    background: var(--degrade-surface);
    color: var(--texte);
    transition: transform var(--transition), border-color var(--transition),
                box-shadow var(--transition);
}

.rm-carte:hover {
    transform: translateY(-4px);
    border-color: var(--bordure-forte);
    box-shadow: var(--ombre-m);
}

.rm-carte h3 {
    margin: 0 0 var(--espace-xs);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--texte-fort);
}

.rm-carte p {
    margin: 0;
    font-size: .92rem;
    color: var(--texte-doux);
}

/* ---- Pastille d'icône --------------------------------------------------- */
.rm-icone {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--rayon-s);
    background: rgba(201, 162, 39, 0.12);
    color: var(--accent);
}

.rm-icone svg {
    width: 23px;
    height: 23px;
}

.rm-icone--grande {
    width: 60px;
    height: 60px;
    border-radius: var(--rayon-m);
}

.rm-icone--grande svg {
    width: 28px;
    height: 28px;
}

/* ---- Étiquette ---------------------------------------------------------- */
.rm-etiquette {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border: 1px solid var(--bordure-forte);
    border-radius: var(--rayon-rond);
    background: rgba(201, 162, 39, 0.10);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
}

/* ---- Grilles ------------------------------------------------------------ */
.rm-grille {
    display: grid;
    gap: var(--espace-m);
}

.rm-grille--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.rm-grille--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rm-grille--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---- Messages ----------------------------------------------------------- */
.rm-message {
    padding: 15px 20px;
    border-left: 4px solid;
    border-radius: var(--rayon-s);
    font-size: .93rem;
}

.rm-message--succes { border-color: var(--succes); background: rgba(122, 143, 60, .14); color: #D6E2B4; }
.rm-message--erreur { border-color: var(--erreur); background: rgba(168, 69, 47, .14); color: #F0C9C0; }
.rm-message--info   { border-color: var(--accent); background: rgba(201, 162, 39, .12); color: var(--accent-clair); }

/* ---- Apparition au défilement ------------------------------------------- */
.rm-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .6s ease, transform .6s ease;
}

.rm-reveal.est-visible {
    opacity: 1;
    transform: none;
}

/* ---- Accessibilité ------------------------------------------------------ */
.rm-section a:focus-visible,
.rm-section button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .rm-reveal { opacity: 1; transform: none; transition: none; }
    .rm-btn, .rm-carte { transition: none; }
}

@media (max-width: 600px) {
    .rm-section { padding: var(--espace-l) 0; }
    .rm-conteneur { padding: 0 18px; }
    .rm-btn { width: 100%; }
}