/* =========================================================================
   RH Outremer — main.css
   Design system : polices, variables de charte, reset, typographie,
   grille responsive (mobile first) et utilitaires.
   Aucune dépendance externe, aucune Google Font (RGPD).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Polices auto-hébergées (woff2, font-display: swap)
   General Sans : titres (fichiers présents dans assets/fonts/).
   Inter : texte courant (fichiers .woff2 À DÉPOSER dans assets/fonts/).
   ------------------------------------------------------------------------- */

/* --- General Sans (titres) --- */
@font-face {
    font-family: 'General Sans';
    src: url('../fonts/GeneralSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'General Sans';
    src: url('../fonts/GeneralSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'General Sans';
    src: url('../fonts/GeneralSans-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'General Sans';
    src: url('../fonts/GeneralSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- Inter (texte courant) — FICHIERS À DÉPOSER --- */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* -------------------------------------------------------------------------
   2. Variables de charte et de design
   ------------------------------------------------------------------------- */
:root {
    /* Couleurs charte (strictes, cf. CLAUDE.md) */
    --bleu:       #0033CC;   /* couleur majeure : boutons, liens, accents */
    --bleu-dark:  #012292;   /* sections sombres, footer, survols */
    --parme:      #A48BFF;   /* accent secondaire : jamais en texte courant sur blanc */
    --blanc:      #FFFFFF;   /* fonds principaux */
    --texte:      #1A1A1A;   /* texte courant */
    --surface:    #F4F5F8;   /* cartes, fonds de section */

    /* Nuances utilitaires dérivées (transparences des couleurs charte) */
    --bleu-05:    rgba(0, 51, 204, 0.05);
    --bleu-10:    rgba(0, 51, 204, 0.10);
    --parme-15:   rgba(164, 139, 255, 0.15);
    --parme-08:   rgba(164, 139, 255, 0.08);
    /* Parme assombri, même teinte : seul parme admis en texte sur fond clair
       (6,4:1 sur blanc). Réservé au prix « Gratuit » de la boutique (10/10/2026). */
    --parme-fonce: #6441D6;
    --texte-70:   rgba(26, 26, 26, 0.70);
    --blanc-70:   rgba(255, 255, 255, 0.70);
    --blanc-15:   rgba(255, 255, 255, 0.15);

    /* Dégradés autorisés (base des deux bleus) */
    --gradient-bleu: linear-gradient(135deg, var(--bleu-dark) 0%, var(--bleu) 100%);

    /* Typographie */
    --police-titre: 'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --police-texte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Échelle typographique fluide (clamp mobile -> desktop) */
    --fs-hero:   clamp(2.1rem, 6vw, 3.5rem);
    --fs-h1:     clamp(1.9rem, 5vw, 3rem);
    --fs-h2:     clamp(1.6rem, 4vw, 2.4rem);
    --fs-h3:     clamp(1.2rem, 2.4vw, 1.5rem);
    --fs-lead:   clamp(1.05rem, 1.6vw, 1.25rem);
    --fs-base:   1rem;
    --fs-small:  0.875rem;

    /* Espacements (échelle 4 px) */
    --esp-1:  0.25rem;
    --esp-2:  0.5rem;
    --esp-3:  0.75rem;
    --esp-4:  1rem;
    --esp-5:  1.5rem;
    --esp-6:  2rem;
    --esp-7:  3rem;
    --esp-8:  4rem;
    --esp-9:  6rem;

    /* Rayons */
    --rayon-sm:  6px;
    --rayon-md:  12px;
    --rayon-lg:  20px;
    --rayon-xl:  32px;   /* grands visuels (hero, ADN) */
    --rayon-pill: 999px;

    /* Ombres douces */
    --ombre-carte: 0 6px 24px rgba(1, 34, 146, 0.08);
    --ombre-carte-survol: 0 12px 32px rgba(1, 34, 146, 0.14);
    --ombre-header: 0 2px 16px rgba(1, 34, 146, 0.10);

    /* Divers */
    --largeur-contenu: 1560px;   /* cadrage large (maquettes), moins de marges sur grand écran */
    --largeur-texte: 68ch;
    --transition: 200ms ease;
    --header-hauteur: 72px;
}

/* -------------------------------------------------------------------------
   3. Reset moderne
   ------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-hauteur) + var(--esp-4));
}

body {
    font-family: var(--police-texte);
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--texte);
    background: var(--blanc);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img, picture, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--bleu);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover {
    color: var(--bleu-dark);
}

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

ul, ol {
    list-style: none;
}

:focus-visible {
    outline: 3px solid var(--parme);
    outline-offset: 2px;
    border-radius: var(--rayon-sm);
}

/* Respect de la préférence « animations réduites » */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* -------------------------------------------------------------------------
   4. Typographie de base
   ------------------------------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--police-titre);
    font-weight: 600;
    line-height: 1.15;
    color: var(--texte);
    text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { text-wrap: pretty; }

strong { font-weight: 600; }

/* -------------------------------------------------------------------------
   5. Structure : conteneur, sections, grille (mobile first)
   ------------------------------------------------------------------------- */
.conteneur {
    width: 100%;
    max-width: var(--largeur-contenu);
    margin-inline: auto;
    padding-inline: var(--esp-4);
}
@media (min-width: 1024px) {
    .conteneur { padding-inline: var(--esp-6); }
}

.section {
    padding-block: var(--esp-8);
}
.section--sombre {
    background: var(--gradient-bleu);
    color: var(--blanc);
}
/* Les titres portent leur propre couleur (--texte) : sur fond sombre il faut la
   reprendre, sinon ils restent presque noirs.
   :where() ramene la specificite a (0,0,1) : cette regle n'est qu'un defaut, et
   toute classe de composant la surclasse. Sans cela, le titre d'une carte claire
   imbriquee redevenait blanc sur blanc. */
:where(.section--sombre) h1,
:where(.section--sombre) h2,
:where(.section--sombre) h3,
:where(.section--sombre) h4 {
    color: var(--blanc);
}
/* Les paragraphes heritent simplement du blanc de la section. On n'enumere plus
   les composants clairs a proteger : chacun declare sa propre couleur de texte
   la ou il declare son fond (voir components.css). Enumerer etait fragile, un
   composant oublie donnait du blanc sur blanc. */
.section--surface {
    background: var(--surface);
}

/* Grille responsive : 1 colonne sur mobile (priorité absolue),
   puis montée en colonnes aux breakpoints. */
.grille {
    display: grid;
    gap: var(--esp-5);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .grille--2,
    .grille--3,
    .grille--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .grille--3 { grid-template-columns: repeat(3, 1fr); }
    .grille--4 { grid-template-columns: repeat(4, 1fr); }
}

/* -------------------------------------------------------------------------
   6. Utilitaires
   ------------------------------------------------------------------------- */
.centre { text-align: center; }

.mesure { max-width: var(--largeur-texte); }
.centre .mesure,
.mesure--centre { margin-inline: auto; }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--esp-4); }
.mt-5 { margin-top: var(--esp-5); }
.mt-6 { margin-top: var(--esp-6); }
.mb-4 { margin-bottom: var(--esp-4); }
.mb-5 { margin-bottom: var(--esp-5); }
.mb-6 { margin-bottom: var(--esp-6); }

/* Souligné « coup de pinceau » : décoration sous un titre. */
.pinceau {
    position: relative;
    display: inline-block;
}
.pinceau::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.35em;
    height: 0.5em;
    background: currentColor;
    -webkit-mask: url('../img/pinceau.svg') no-repeat center / contain;
    mask: url('../img/pinceau.svg') no-repeat center / contain;
    color: var(--parme);
    pointer-events: none;
}
/* Variante bleue du souligné (sur fond clair, en texte courant). */
.pinceau--bleu::after { color: var(--bleu); }

/* Texte accessible masqué visuellement (lecteurs d'écran uniquement). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Lien d'évitement (accessibilité clavier). */
.skip-link {
    position: absolute;
    left: var(--esp-4);
    top: -60px;
    z-index: 1000;
    background: var(--bleu);
    color: var(--blanc);
    padding: var(--esp-2) var(--esp-4);
    border-radius: var(--rayon-sm);
    transition: top var(--transition);
}
.skip-link:focus {
    top: var(--esp-4);
    color: var(--blanc);
}