/* ==========================================================================
   Profilia - Tokens du design system
   Point de verite unique. Aucune valeur en dur ailleurs dans le theme.
   v1.0 - valide le 02/09/2026
   ========================================================================== */

:root {

  /* --- Marque ----------------------------------------------------------
     Le cyan vient du logotype. Il est reserve a UNE action principale par
     ecran, au point de statut et aux liens. Jamais deux boutons cyan cote
     a cote. --cyan-500 ne porte jamais de texte : 2,5:1 sur blanc.        */
  --cyan-100: #DCF3F6;
  --cyan-300: #7FE3F0;
  --cyan-500: #0FB2C6;   /* accent - aplats et fonds d'action uniquement */
  --cyan-600: #0A97A9;   /* survol de l'action principale                */
  --cyan-700: #0A7C8B;   /* texte et liens sur blanc          - 4,5:1    */
  --cyan-800: #06626E;   /* texte sur --cyan-100              - 5,6:1    */
  --teal-900: #062B31;
  --teal-800: #0D2B30;
  /* Surface d'accent : bleu petrole, reserve aux sections de reassurance
     (Nos engagements). Exception assumee a la regle du foncé unique ;
     texte blanc 7,4:1, texte secondaire a 78 % 5,2:1. */
  --teal-600: #135E6B;

  /* --- Surfaces : deux tons de fond maximum par page ------------------- */
  --paper: #FFFFFF;
  --sand-100: #F6F4F0;
  --sand-200: #F4F2EE;
  --sand-300: #E6E2DA;
  --surface-inverse: var(--teal-900);

  /* --- Encre : alphas teintes teal, jamais de gris neutre -------------- */
  --ink-04: rgba(13, 43, 48, .04);
  --ink-07: rgba(13, 43, 48, .07);
  --ink-12: rgba(13, 43, 48, .12);
  --ink-22: rgba(13, 43, 48, .22);
  --ink-56: rgba(13, 43, 48, .56);
  --ink-72: rgba(13, 43, 48, .72);

  --text-strong: #0D2B30;
  --text-body: var(--ink-72);
  --text-muted: var(--ink-56);
  --text-accent: var(--cyan-700);
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: rgba(255, 255, 255, .62);

  --border-default: var(--ink-12);
  --border-strong: var(--ink-22);
  --border-on-dark: rgba(255, 255, 255, .22);
  --fill-on-dark: rgba(255, 255, 255, .06);

  /* --- Semantique d'action -------------------------------------------- */
  --accent: var(--cyan-500);
  --accent-hover: var(--cyan-600);
  --accent-press: #08808F;
  --accent-text: var(--cyan-700);
  --focus-ring: rgba(15, 178, 198, .35);

  /* --- Etat (proposition, hors regles de marque) ----------------------- */
  --success: #17A673;  --success-soft: #E4F5EE;
  --warning: #E08A1E;  --warning-soft: #FBF0DF;
  --danger:  #D24B3E;  --danger-soft:  #FBE9E7;

  /* Etoiles de notation. Cinquieme couleur du systeme, assumee : une note
     d'avis n'est credible qu'en dore. Reservee a cet usage, jamais decorative. */
  --rating: #F2B01E;

  /* --- Typographie ----------------------------------------------------- */
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --type-display-lg: 600 38px/1.04 var(--font-sans);
  --type-display:    600 33px/1.14 var(--font-sans);
  --type-title:      600 20px/1.28 var(--font-sans);
  --type-body-lg:    400 14.5px/1.55 var(--font-sans);
  --type-label:      500 12.5px/1.35 var(--font-sans);
  --type-caption:    400 12px/1.45 var(--font-sans);
  --type-eyebrow:    500 11px/1.2 var(--font-mono);
  --type-meta-mono:  400 11.5px/1.4 var(--font-mono);
  --type-chip-mono:  500 11px/1.2 var(--font-mono);

  --type-display-tracking: -.025em;
  --type-eyebrow-tracking: .14em;

  /* --- Espacement : rythme vertical 12 / 16 / 22 / 26 ------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 22px;
  --space-7: 26px;
  --space-8: 32px;
  --space-9: 40px;
  --gutter: 20px;

  /* --- Rayons ---------------------------------------------------------- */
  --radius-sm: 12px;    /* boutons-icones      */
  --radius-md: 15px;    /* CTA dans un panneau */
  --radius-lg: 20px;    /* panneaux            */
  --radius-xl: 22px;    /* cartes              */
  --radius-2xl: 26px;   /* feuilles            */
  --radius-pill: 999px;

  /* --- Ombres : une seule couche, teintee teal ------------------------- */
  --shadow-pill:   0 2px 8px rgba(13, 43, 48, .06);
  --shadow-card:   0 6px 22px rgba(13, 43, 48, .07);
  --shadow-raised: 0 12px 34px rgba(13, 43, 48, .10);

  /* --- Mouvement : fondus et glissements, aucun rebond ----------------- */
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);

  /* --- Grille et rythme des sections (ordinateur, >= 1024 px) ----------
     Un seul bord de contenu et un seul rythme vertical pour toutes les
     sections de l'accueil. Le mobile garde ses valeurs propres. */
  --container: 1280px;  /* largeur du conteneur, gouttiere comprise */
  --section-y: 80px;    /* marge haute et basse d'une section        */
  --shead-gap: 12px;    /* titre -> sous-titre                        */
  --shead-mb: 40px;     /* en-tete -> contenu                         */

  /* --- Controles : cibles tactiles >= 44px ----------------------------- */
  --control-h-sm: 38px;
  --control-h-md: 40px;
  --control-h-lg: 52px;
  --icon-btn: 40px;
  --tap-min: 44px;
}

/* --- Palier ordinateur - extension, les regles sont mobile d'abord ------ */
@media (min-width: 1024px) {
  :root {
    --type-display-lg: 600 48px/1.02 var(--font-sans);
    --type-display:    600 38px/1.1 var(--font-sans);
    --type-title:      600 22px/1.3 var(--font-sans);
    --type-body-lg:    400 16px/1.6 var(--font-sans);
    --gutter: 32px;
  }
}

/* --- Mouvement reduit --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
  }
}

/* ==========================================================================
   Socle : ce qui decoule directement des tokens.
   Rien d'autre. Les composants vivent dans leurs propres fichiers.
   ========================================================================== */

body {
  font: var(--type-body-lg);
  color: var(--text-body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--text-strong);
  letter-spacing: var(--type-display-tracking);
  text-wrap: pretty;
}

h1 { font: var(--type-display-lg); letter-spacing: var(--type-display-tracking); }
h2 { font: var(--type-display);    letter-spacing: var(--type-display-tracking); }
h3 { font: var(--type-title); }

p { text-wrap: pretty; }

a { color: var(--text-accent); }

/* Focus visible, uniformement, sur tout ce qui est atteignable au clavier. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

::selection {
  background: var(--cyan-100);
  color: var(--cyan-800);
}