/* ==========================================================================
   Design tokens — REM Plomberie Chauffage
   --------------------------------------------------------------------------
   Source de vérité : docs/Claude design /design_handoff_rem_plomberie/README.md
   (section « Design tokens »).

   ⚠️  DÉCISION EN ATTENTE — palette & typographie
   Le dépôt contient deux référentiels graphiques qui divergent :
     · docs/Charte graphique/  → bleu #0F67B1, nuit #0C233C, orange #FF6B2C,
                                 titres en Sora — et le kit logo SVG livré
                                 est colorisé dans ces teintes ;
     · le handoff design       → bleu #1B3A5C, orange #F4772E, titres en Manrope.
   Le handoff fait foi pour le développement (règle imposée au projet). Toutes
   les valeurs concernées sont regroupées ci-dessous : basculer sur la charte
   se fait en modifiant ce seul fichier, sans toucher à un composant.
   ========================================================================== */

:root {
    /* ---- Marque ------------------------------------------------------- */
    --c-blue: #1b3a5c; /* dominante : header, bandeaux, CTA secondaire, sidebar */
    --c-orange: #f4772e; /* accent : CTA principal, chevrons, filets de citation */

    /* ---- Surfaces ----------------------------------------------------- */
    --c-bg: #f5f7f8; /* fond de page */
    --c-surface: #ffffff; /* cartes, sections blanches */

    /* ---- Texte -------------------------------------------------------- */
    --c-heading: #17212b; /* titres */
    --c-body: #2f3a44; /* paragraphes */
    --c-muted: #4b555f; /* sous-titres */
    --c-muted-soft: #5b656e; /* ligne de réassurance du hero */
    --c-meta: #6b757e; /* méta, prix sur les cartes services */
    --c-label: #8b959e; /* micro-labels majuscules, auteurs d'avis */
    --c-proof: #3d4750; /* texte de la pastille de preuve */

    /* ---- Bordures ----------------------------------------------------- */
    --c-border: #e4e7ea; /* cartes, séparateurs de section */
    --c-border-pill: #cfd6dc; /* pastilles communes */
    --c-border-field: #cccccc; /* champs de formulaire au repos */
    --c-border-bar: #dde1e5; /* filet supérieur de la barre d'action fixe */
    --c-chevron: #b3bbc2; /* chevron « › » des lignes services */

    /* ---- États -------------------------------------------------------- */
    --c-green: #247a52; /* succès, étapes franchies, signature validée */
    --c-green-bg: #eaf4ef;
    --c-blue-bg: #eef3fa; /* badge « Planifiée », onglet actif */
    --c-orange-bg: #fff7f0; /* encart « devis à signer » */
    --c-disabled-bg: #cfd8d3;
    --c-disabled-text: #8fa39a;

    /* ---- Alerte ------------------------------------------------------- *
     * ⛔ RÉSERVÉ aux alertes urgentes (onglet « Urgent » du formulaire,
     *    encart d'appel direct, croix de suppression d'une miniature).
     *    Interdit en couleur de CTA ou d'accent décoratif : le site ne doit
     *    pas ressembler à un site de « dépannage urgence ».                */
    --c-alert: #c93b32;
    --c-alert-bg: #fdf0ee;

    /* ---- Fonds sombres ------------------------------------------------ */
    --c-footer-bg: #17212b;
    --c-footer-text: #9aa5ae;
    --c-footer-dim: #7d8790;
    --c-on-blue: #b9c7d6; /* texte secondaire sur fond bleu */

    /* ---- Typographie -------------------------------------------------- */
    --font-heading: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Échelle mobile (base 390 px).
       Règle d'accessibilité imposée : le corps des pages publiques et tous les
       champs de formulaire sont à 16 px minimum sur mobile. Les filaires
       affichent 14 px — l'accessibilité l'emporte, cf. note dans base.css.
       Les méta, micro-labels et légendes ne sont pas du « corps » et gardent
       leur taille de filaire. */
    --fs-h1: 23px;
    --fs-h1-lh: 1.14;
    --fs-h1-ls: -0.4px;
    --fs-h2: 18px;
    --fs-h3: 17px;
    --fs-card-title: 15px;
    --fs-body: 16px;
    --fs-body-lh: 1.5;
    /* Citation d'avis : 13,5 px sur les filaires, remontée à 16 px sur mobile —
       c'est du contenu, et la preuve sociale doit être lue sans effort. */
    --fs-quote: 16px;
    --fs-meta: 13px;
    --fs-small: 12.5px;
    --fs-label: 12px; /* micro-label majuscule */
    --ls-label: 0.14em;
    --fs-phone-banner: 26px; /* numéro du bandeau urgence */
    --fs-phone-header: 14px; /* numéro dans le header */

    /* ---- Espacement — échelle 4 px du handoff ------------------------- */
    --sp-4: 4px;
    --sp-6: 6px;
    --sp-8: 8px;
    --sp-9: 9px;
    --sp-11: 11px;
    --sp-13: 13px;
    --sp-15: 15px;
    --sp-18: 18px;
    --sp-20: 20px;
    --sp-24: 24px;
    --sp-26: 26px;
    --sp-34: 34px;

    /* Padding de section : 20/15 mobile, 26/24 desktop */
    --section-py: var(--sp-20);
    --section-px: var(--sp-15);

    /* ---- Rayons ------------------------------------------------------- */
    --r-5: 5px; /* petites icônes, cases à cocher */
    --r-8: 8px; /* boutons secondaires, miniatures */
    --r-9: 9px;
    --r-10: 10px; /* boutons, cartes */
    --r-11: 11px; /* grandes cartes */
    --r-12: 12px; /* photos */
    --r-14: 14px; /* photo hero desktop */
    --r-pill: 999px;

    /* ---- Ombres — très discrètes -------------------------------------- */
    --shadow-bar: 0 -2px 10px rgb(0 0 0 / 7%);

    /* ---- Gabarit ------------------------------------------------------ */
    --content-max: 1200px;
    --action-bar-h: 78px; /* réserve de scroll sous le footer sur mobile */
    --tap-min: 44px; /* cible tactile minimale */

    /* Hauteur du header collant. Sert aux décalages « sticky » et au
       `scroll-margin-top` des ancres, sans quoi un titre visé par un lien
       interne se retrouve caché derrière le header. */
    --header-h: 68px;

    /* ---- Focus -------------------------------------------------------- */
    --focus-ring: 2px solid var(--c-blue);
    --focus-offset: 2px;
}

@media (min-width: 768px) {
    :root {
        --fs-h1: 32px;
        --fs-h1-lh: 1.1;
        --fs-h1-ls: -0.6px;
        --fs-h2: 19px;
        --fs-body: 15px;
        --fs-quote: 13.5px;
        --fs-phone-banner: 23px;

        --section-py: var(--sp-26);
        --section-px: var(--sp-24);
    }
}