/**********************************************************************************
 *                        AR AFFAIRES — SOCLE VISUEL
 *
 *  Charte tirée du logo Artisans Réno : terracotta + ardoise.
 *  Polices système : rendu natif sur iPhone, zéro requête réseau.
 *  Mobile d'abord : toutes les tailles sont pensées pour un pouce.
 **********************************************************************************/

:root {
    /* Marque */
    --terracotta:        #B0413E;
    --terracotta-fonce:  #93332F;
    --terracotta-clair:  #F5E7E6;
    --ardoise:           #4A5560;

    /* Surfaces */
    --fond:              #F4F5F7;
    --surface:           #FFFFFF;
    --surface-douce:     #FAFBFC;
    --bordure:           #E4E7EC;

    /* Texte */
    --texte:             #1D2733;
    --texte-doux:        #6B7684;
    --texte-faible:      #98A2B3;

    /* Statuts des affaires — mêmes couleurs partout dans l'app */
    --st-nouvelle:       #6366F1;
    --st-contactee:      #3B82F6;
    --st-rdv:            #8B5CF6;
    --st-devis:          #F59E0B;
    --st-envoye:         #EA8C1C;
    --st-gagnee:         #12A150;
    --st-perdue:         #98A2B3;

    /* Sémantique */
    --succes:            #12A150;
    --alerte:            #E5A00D;
    --erreur:            #D64545;
    --erreur-fond:       #FDECEC;

    /* Formes */
    --r-s:               8px;
    --r-m:               12px;
    --r-l:               16px;
    --r-rond:            999px;

    /* Profondeur — discrète, jamais lourde */
    --ombre-s:           0 1px 2px rgba(16, 24, 40, .05);
    --ombre-m:           0 2px 8px rgba(16, 24, 40, .07);
    --ombre-l:           0 8px 28px rgba(16, 24, 40, .12);

    /* Rythme */
    --touche:            56px;    /* hauteur tactile minimale */
    --bas:                72px;   /* hauteur de la barre de navigation */

    --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --terracotta:        #D2605C;
        --terracotta-fonce:  #B0413E;
        --terracotta-clair:  #3A2422;
        --ardoise:           #8895A5;

        --fond:              #14181D;
        --surface:           #1C2229;
        --surface-douce:     #222932;
        --bordure:           #2E3641;

        --texte:             #E8ECF1;
        --texte-doux:        #9BA6B4;
        --texte-faible:      #6E7A88;

        --erreur:            #F07171;
        --erreur-fond:       #3A2020;

        --ombre-s:           0 1px 2px rgba(0, 0, 0, .3);
        --ombre-m:           0 2px 8px rgba(0, 0, 0, .35);
        --ombre-l:           0 8px 28px rgba(0, 0, 0, .45);
    }
}


/**********************************************************************************
 *                                   RESET
 **********************************************************************************/

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    height: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    font-family: var(--police);
    font-size: 16px;              /* jamais moins : iOS zoome sur les champs < 16px */
    line-height: 1.5;
    color: var(--texte);
    background: var(--fond);
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: contain;
}

h1, h2, h3, p, figure { margin: 0; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    -webkit-tap-highlight-color: transparent;
}

a { color: var(--terracotta); text-decoration: none; }

svg { display: block; }

[hidden] { display: none !important; }


/**********************************************************************************
 *                                 STRUCTURE
 **********************************************************************************/

#app {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.vue {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Contenu défilant, avec la place réservée pour la barre du bas et l'encoche iOS */
.contenu {
    flex: 1;
    padding: 16px;
    padding-bottom: calc(var(--bas) + 24px + env(safe-area-inset-bottom));
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
}

.centre {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
}


/**********************************************************************************
 *                                  TYPO
 **********************************************************************************/

.titre {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.sous-titre {
    font-size: 15px;
    color: var(--texte-doux);
}

.section-titre {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texte-faible);
    margin: 24px 0 10px;
}

.muet { color: var(--texte-doux); }


/**********************************************************************************
 *                              ACCESSIBILITÉ
 **********************************************************************************/

:focus-visible {
    outline: 3px solid var(--terracotta);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

.lecteur-ecran {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}