/*
 * Réglages du site public : polices et jetons (docs/cadrage/direction.md, direction « Monolithe »).
 * Aucune valeur brute de couleur, de taille de texte ou d'espacement ailleurs que dans ce fichier.
 */

/* Archivo en largeur 125 % (titres, mot-marque) et Manrope (texte), OFL. Sous-ensembles latins de
   Google Fonts, variables en graisse, servis par le site. */
@font-face {
    font-family: Archivo;
    font-style: normal;
    font-weight: 500 900;
    font-display: swap;
    src: url("../fonts/archivo-latin-125-9woAQ93.woff2") format('woff2');
}

@font-face {
    font-family: Manrope;
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/manrope-latin-aA_waSK.woff2") format('woff2');
}

:root {
    /* Palette : brun presque noir, crème et champagne (page E bis 2, retenue par David le 24/09/2026). */
    --color-night: #100c09;
    --color-night-raised: #1f1812;
    --color-night-high: #2a2118;
    --color-cream: #e9dfcf;
    --color-cream-deep: #ddd0bb;
    --color-champagne: #d8c3a0;
    --color-champagne-hover: #e6d5b8;
    --color-bronze: #8a6a45;
    /* Bronze des liens et icônes sur crème : le bronze d'accent (3,8:1) est sous AA pour du texte. */
    --color-bronze-text: #735737;
    --color-bone: #f3eadb;
    --color-dust: #a99d8a;
    --color-dust-deep: #8a7d6b;
    --color-ink: #1a120c;
    --color-ink-muted: #5e5043;
    --color-line-night: #2b221a;
    --color-line-night-strong: #4a3d30;
    --color-line-cream: #cebfa8;
    --color-white: #fff;
    --color-error: #9b1c1c;
    --color-error-bg: #fbe4e4;
    --color-success: #1f5f2e;
    --color-success-bg: #e3f1e5;

    /* Téléphone dessiné de l'accueil (app-phone.css) : gris d'écran, hors palette de la charte. */
    --phone-frame: #1a1a1a;
    --phone-screen: #0a0a0a;
    --phone-card: #141414;
    --phone-track: #262626;
    --phone-text: #d8d8d8;
    --phone-muted: #7e7e7e;
    --phone-bar: #c9cdd2;
    --phone-alert: #f2f2f2;
    --phone-edge: #2e2e2e;

    /* Rôles : un composant lit les rôles, jamais la palette. Par défaut, le champ sombre ; les
       champs clairs (.section--cream et ses alias) les remappent en encre (layout.css). */
    --bg-page: var(--color-night);
    --bg-surface: var(--color-night-raised);
    --text-primary: var(--color-bone);
    --text-secondary: var(--color-dust);
    --text-link: var(--color-champagne);
    --text-link-hover: var(--color-bone);
    --focus-ring: var(--color-champagne);
    --btn-bg: var(--color-champagne);
    --btn-bg-hover: var(--color-champagne-hover);
    --btn-text: var(--color-night);
    --btn-line: var(--color-line-night-strong);
    --field-line: var(--color-line-night-strong);
    --rule: var(--color-line-night);

    /* Typographie : Archivo large pour les titres, Manrope pour le texte. */
    --font-display: Archivo, 'Arial Black', system-ui, sans-serif;
    --font-body: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fw-regular: 400;
    --fw-medium: 600;
    --fw-bold: 700;
    --fw-display: 800;
    --fw-black: 900;
    --text-xs: 0.8125rem;
    --text-sm: 0.9375rem;
    --text-base: 1rem;
    --text-md: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    --text-lg: 1.25rem;
    --text-xl: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
    /* Titres de section : Archivo 125 % prend beaucoup de place, plafond à 42 px (utilisateur, 25/09/2026). */
    --text-2xl: clamp(1.75rem, 1.3rem + 1.4vw, 2.625rem);
    --text-3xl: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem);
    --text-num: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
    --leading-tight: 1.04;
    --leading-snug: 1.3;
    --leading-body: 1.6;
    --tracking-display: -0.01em;
    --tracking-wordmark: 0.08em;
    --tracking-label: 0.18em;

    /* Espacements */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3.5rem;
    --space-9: 4.5rem;
    --space-10: 6rem;
    --section-space: clamp(4.5rem, 2.8rem + 6vw, 8rem);
    --gutter: 1rem;

    /* Formes : pilules pour ce qui s'actionne, grands rayons pour les planches. */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-pill: 999px;
    --container: 78rem;
    --measure: 40rem;
    --reading: 46rem;
    --header-height: 4rem;
    --tap-size: 2.75rem;

    /* Profondeur : ombres noires, le fond est déjà sombre. */
    --shadow-plate: 0 2.5rem 5.5rem -1.5rem rgb(0 0 0 / 60%);

    /* Photos de machine sous éclairage « argent » (désaturées, sans sépia : il jaunit les blancs). Celles
       du bras gardent sinon un reflet magenta : désaturation presque totale, comme la maquette. */
    --photo-silver: saturate(0.03) brightness(1.05) contrast(1.08);

    /* Mouvement */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* Icônes Tabler (MIT, tabler.io/icons), en masques CSS : elles prennent la couleur du texte. */
    --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l14 0M13 18l6 -6M13 6l6 6'/%3E%3C/svg%3E");
    --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
    --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E");
    --icon-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19l16 0'/%3E%3Cpath d='M4 15l4 -6l4 2l4 -5l4 4'/%3E%3C/svg%3E");
    --icon-robot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z'/%3E%3Cpath d='M12 2v2M9 12v9M15 12v9M5 16l4 -2M15 14l4 2M9 18h6M10 8v.01M14 8v.01'/%3E%3C/svg%3E");
    --icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E");
    --icon-tool: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10h3v-3l-3.5 -3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1 -3 3l-6 -6a6 6 0 0 1 -8 -8l3.5 3.5'/%3E%3C/svg%3E");
    --icon-plug: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.785 6l8.215 8.215l-2.054 2.054a5.81 5.81 0 1 1 -8.215 -8.215l2.054 -2.054z M4 20l3.5 -3.5 M15 4l-3.5 3.5 M20 9l-3.5 3.5'/%3E%3C/svg%3E");
    --icon-wifi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18l.01 0 M9.172 15.172a4 4 0 0 1 5.656 0 M6.343 12.343a8 8 0 0 1 11.314 0 M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0'/%3E%3C/svg%3E");
    --icon-droplet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.502 19.423c2.602 2.105 6.395 2.105 8.996 0c2.602 -2.105 3.262 -5.708 1.566 -8.546l-4.89 -7.26c-.42 -.625 -1.287 -.803 -1.936 -.397a1.376 1.376 0 0 0 -.41 .397l-4.893 7.26c-1.695 2.838 -1.035 6.441 1.567 8.546z'/%3E%3C/svg%3E");
    --icon-weight: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6a3 3 0 1 0 6 0a3 3 0 1 0 -6 0 M6.835 9h10.33a1 1 0 0 1 .984 .821l1.637 9a1 1 0 0 1 -.984 1.179h-15.604a1 1 0 0 1 -.984 -1.179l1.637 -9a1 1 0 0 1 .984 -.821z'/%3E%3C/svg%3E");
    --icon-surface: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8v-2a2 2 0 0 1 2 -2h2 M4 16v2a2 2 0 0 0 2 2h2 M16 4h2a2 2 0 0 1 2 2v2 M16 20h2a2 2 0 0 0 2 -2v-2'/%3E%3C/svg%3E");
    --icon-height: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l4 -4l4 4 M8 17l4 4l4 -4 M12 3l0 18'/%3E%3C/svg%3E");
    --icon-cup: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11h14v-3h-14z M17.5 11l-1.5 10h-8l-1.5 -10 M6 8v-1a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v1 M15 5v-2'/%3E%3C/svg%3E");
    --icon-coin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0 M14.8 9a2 2 0 0 0 -1.8 -1h-2a2 2 0 1 0 0 4h2a2 2 0 1 1 0 4h-2a2 2 0 0 1 -1.8 -1 M12 7v10'/%3E%3C/svg%3E");
    --icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z M3 7l9 6l9 -6'/%3E%3C/svg%3E");
    --icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2'/%3E%3C/svg%3E");
    --icon-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0 M12 16v.01 M12 13a2 2 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483'/%3E%3C/svg%3E");
    --icon-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l18 0 M5 21v-14l8 -4v18 M19 21v-10l-6 -4 M9 9l0 .01 M9 12l0 .01 M9 15l0 .01 M9 18l0 .01'/%3E%3C/svg%3E");
    --icon-user-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.18 8.189a4.01 4.01 0 0 0 2.616 2.627m3.507 -.545a4 4 0 1 0 -5.59 -5.552'/%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4 -4h4c.412 0 .81 .062 1.183 .178m2.633 2.618c.12 .38 .184 .785 .184 1.204v2'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
    --icon-receipt-tax: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14l6 -6'/%3E%3Cpath d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16l-3 -2l-2 2l-2 -2l-2 2l-2 -2l-3 2'/%3E%3C/svg%3E");
    --icon-cash-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 9h6a2 2 0 0 1 2 2v6m-2 2h-10a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2'/%3E%3Cpath d='M12.582 12.59a2 2 0 0 0 2.83 2.826'/%3E%3Cpath d='M17 9v-2a2 2 0 0 0 -2 -2h-6m-4 0a2 2 0 0 0 -2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
    --icon-messages-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M11 11a1 1 0 0 1 -1 -1m0 -3.968v-2.032a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10l-3 -3h-3'/%3E%3Cpath d='M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2'/%3E%3C/svg%3E");
    --icon-calendar-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5h9a2 2 0 0 1 2 2v9m-.184 3.839a2 2 0 0 1 -1.816 1.161h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 1.158 -1.815'/%3E%3Cpath d='M16 3v4'/%3E%3Cpath d='M8 3v1'/%3E%3Cpath d='M4 11h7m4 0h5'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
    --icon-adjustments-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10a2 2 0 1 0 4 0a2 2 0 0 0 -4 0'/%3E%3Cpath d='M6 6v2'/%3E%3Cpath d='M6 12v8'/%3E%3Cpath d='M10 16a2 2 0 1 0 4 0a2 2 0 0 0 -4 0'/%3E%3Cpath d='M12 4v4m0 4v2'/%3E%3Cpath d='M12 18v2'/%3E%3Cpath d='M16 7a2 2 0 1 0 4 0a2 2 0 0 0 -4 0'/%3E%3Cpath d='M18 4v1'/%3E%3Cpath d='M18 9v5m0 4v2'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
    --icon-percentage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 17m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0'/%3E%3Cpath d='M7 7m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0'/%3E%3Cpath d='M6 18l12 -12'/%3E%3C/svg%3E");
    --icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E");
    --icon-credit-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z'/%3E%3Cpath d='M3 10l18 0'/%3E%3Cpath d='M7 15l.01 0'/%3E%3Cpath d='M11 15l2 0'/%3E%3C/svg%3E");
}

@media (min-width: 48rem) {
    :root {
        --gutter: 2rem;
        --header-height: 5rem;
    }
}

/* Mobile et tablette : le fond de page remonte d'un cran, l'écran y paraissait trop noir (David,
   26/09/2026). Texte secondaire et pied de page restent AA (recontrôlés : dust 7,0:1, dust-deep 4,7:1). */
@media (max-width: 55.99rem) {
    :root {
        --color-night: #16110d;
    }
}