/* ==========================================================================
   AMOPI — Design system web (issu de la charte graphique v2)
   Activateur de projets d'aménagement
   ========================================================================== */

/* --- Typographie : Poppins (Google Font, police web officielle) ----------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');

:root {
  /* ---------- Palette officielle ---------- */
  --amopi-violet:        #402C67;   /* Violet sombre — couleur maîtresse (40%) */
  --amopi-terra:         #EC665C;   /* Terra — accent chaud (25%) */
  --amopi-lavande:       #A591C5;   /* Lavande (25%) */
  --amopi-azur:          #46BABC;   /* Azur (10%) */

  /* Nuances dérivées (usage web : hover, fonds, bordures) */
  --amopi-violet-900:    #2B1D46;
  --amopi-violet-700:    #402C67;
  --amopi-violet-500:    #5C4189;
  --amopi-violet-100:    #EDE9F3;
  --amopi-terra-600:     #C4534F;   /* hover / ombre du terra */
  --amopi-lavande-100:   #F1EDF7;
  --amopi-azur-100:      #E4F5F5;

  /* Neutres */
  --amopi-noir:          #1C1626;
  --amopi-gris-texte:    #4A4457;
  --amopi-gris:          #B5B5B5;
  --amopi-gris-clair:    #F6F5F8;
  --amopi-blanc:         #FFFFFF;

  /* ---------- Rôles sémantiques ---------- */
  --color-bg:            var(--amopi-blanc);
  --color-bg-alt:        var(--amopi-gris-clair);
  --color-bg-invert:     var(--amopi-violet);
  --color-text:          var(--amopi-gris-texte);
  --color-heading:       var(--amopi-violet);
  --color-primary:       var(--amopi-violet);
  --color-accent:        var(--amopi-terra);
  --color-border:        #E3E0EA;

  /* ---------- Typographie ---------- */
  --font-heading: 'Poppins', 'Gilroy', 'Century Gothic', system-ui, sans-serif;
  --font-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-display: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  --fs-h1:      clamp(2rem, 3.5vw + 1rem, 3.25rem);
  --fs-h2:      clamp(1.6rem, 2vw + 0.8rem, 2.25rem);
  --fs-h3:      clamp(1.25rem, 1vw + 0.9rem, 1.5rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;

  --lh-tight: 1.15;
  --lh-body:  1.65;

  /* Le logotype AMOPI est très lettre-espacé : on reprend ce trait
     pour les sur-titres et labels. */
  --ls-label: 0.22em;

  /* ---------- Espacement / rythme ---------- */
  --space-1: 0.5rem;  --space-2: 1rem;   --space-3: 1.5rem;
  --space-4: 2rem;    --space-5: 3rem;   --space-6: 4rem;
  --space-7: 6rem;    --space-8: 8rem;
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---------- Formes & ombres ---------- */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(64, 44, 103, 0.07);
  --shadow:    0 8px 28px rgba(64, 44, 103, 0.10);
  --shadow-lg: 0 20px 60px rgba(64, 44, 103, 0.16);
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Reset léger ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }

/* --- Titres --------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-heading);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-2);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
.display { font-size: var(--fs-display); font-weight: 700; letter-spacing: -0.01em; }

/* Sur-titre / label — reprend l'interlettrage du logotype */
.eyebrow {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--amopi-terra);
  margin-bottom: var(--space-1);
}

.lead { font-size: 1.2rem; color: var(--color-text); }
p { margin: 0 0 var(--space-2); }

a { color: var(--amopi-violet); text-decoration-color: var(--amopi-terra); text-underline-offset: 3px; }
a:hover { color: var(--amopi-terra); }

/* --- Layout --------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--space-7); }
.section--alt { background: var(--color-bg-alt); }
.section--violet { background: var(--amopi-violet); color: rgba(255,255,255,0.85); }
.section--violet h1, .section--violet h2, .section--violet h3 { color: #fff; }
.section--violet .eyebrow { color: var(--amopi-lavande); }

.grid { display: grid; gap: var(--space-3); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* --- Boutons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.9em 1.9em;
  border: 2px solid transparent; border-radius: var(--radius-pill);
  cursor: pointer; text-decoration: none;
  transition: var(--transition);
}
.btn--primary  { background: var(--amopi-terra); color: #fff; }
.btn--primary:hover  { background: var(--amopi-terra-600); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--violet   { background: var(--amopi-violet); color: #fff; }
.btn--violet:hover   { background: var(--amopi-violet-500); color: #fff; transform: translateY(-2px); }
.btn--ghost    { background: transparent; color: var(--amopi-violet); border-color: var(--amopi-violet); }
.btn--ghost:hover    { background: var(--amopi-violet); color: #fff; }
.btn--light    { background: #fff; color: var(--amopi-violet); }
.btn--light:hover    { background: var(--amopi-lavande-100); color: var(--amopi-violet); }

/* --- Cartes --------------------------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4);
  transition: var(--transition);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.card__icon {
  width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: var(--radius); background: var(--amopi-lavande-100);
  color: var(--amopi-violet); margin-bottom: var(--space-2);
}

/* --- Éléments de marque --------------------------------------------------- */
/* Filet de séparation terra, rappel du point orange du logotype AMOPI */
.rule { width: 56px; height: 4px; border-radius: 2px; background: var(--amopi-terra); border: 0; margin: 0 0 var(--space-3); }

/* Fond violet texturé façon "trame hexagonale" de l'isotype */
.bg-mesh {
  background-color: var(--amopi-violet);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(165,145,197,0.28), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(70,186,187,0.22), transparent 45%);
}

.logo-nav { height: 44px; width: auto; }
.logo-footer { height: 64px; width: auto; }

/* --- Formulaires ---------------------------------------------------------- */
.field { width: 100%; font-family: var(--font-body); font-size: 1rem;
  padding: 0.85em 1.1em; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: #fff; color: var(--color-text); }
.field:focus { outline: none; border-color: var(--amopi-violet); box-shadow: 0 0 0 3px var(--amopi-violet-100); }

/* --- Accessibilité -------------------------------------------------------- */
:focus-visible { outline: 3px solid var(--amopi-azur); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto; }
}