/* ==========================================================================
   Pacific Agency — socle : jetons de design, reset, typographie
   ========================================================================== */

:root {
  /* Marque */
  --pa-green:       #156528;
  --pa-green-dark:  #0E4A1D;
  --pa-green-light: #E8F1EA;
  --pa-orange:      #EA6723;
  --pa-orange-dark: #B04513;
  --pa-orange-light:#FDEDE4;  /* teinte deja mesuree (composants) : --pa-orange-dark dessus = 4,97 */
  --pa-orange-darker:#8D370F;  /* survol des boutons --pa-orange-dark : blanc dessus = 7,82 */

  /* Neutres */
  --pa-ink:    #14181A;
  --pa-muted:  #5A6468;
  --pa-line:   #E2E6E4;
  --pa-bg:     #FFFFFF;
  --pa-bg-alt: #F6F8F7;

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

  --fs-xs:   0.8125rem;  /* 13px */
  --fs-sm:   0.9375rem;  /* 15px */
  --fs-base: 1.0625rem;  /* 17px */
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.75rem;
  --fs-4xl:  3.5rem;

  /* Espacement — échelle de 4px */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(20, 24, 26, 0.06);
  --shadow:    0 4px 16px rgba(20, 24, 26, 0.08);

  --container: 1200px;
  --header-h:  76px;

  /* Mouvement -- deux durees, deux courbes, partout. */
  --motion-fast:  200ms;  /* micro-interactions : survol, bascule, menu */
  --motion-enter: 500ms;  /* entrees : hero au chargement, sections au defilement */
  --ease-out: cubic-bezier(.22, .61, .36, 1);  /* entrees : ca ralentit en douceur */
  --ease-io:  cubic-bezier(.4, 0, .2, 1);      /* interactions : va-et-vient */
}

/* Reset ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--pa-ink);
  background: var(--pa-bg);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-title);
  line-height: 1.15;
  margin: 0 0 var(--space-4);
  letter-spacing: -0.02em;
  color: var(--pa-ink);
}

h1 { font-size: clamp(2.125rem, 5vw, var(--fs-4xl)); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.5vw, var(--fs-3xl)); font-weight: 700; }
h3 { font-size: var(--fs-xl); font-weight: 700; }
h4 { font-size: var(--fs-lg); font-weight: 600; }

p  { margin: 0 0 var(--space-4); }
ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }

a { color: var(--pa-green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* L'orange signale l'action : au survol, le soulignement d'un lien de
   contenu passe a --pa-orange-dark (5,67 sur blanc), la couleur du texte
   reste verte -- seul le trait, discret, porte l'orange. Les liens de
   navigation/pied de page/boutons ont leur propre regle sans soulignement
   (text-decoration:none) et ne sont pas concernes par cette regle. */
a:hover { color: var(--pa-green-dark); text-decoration-color: var(--pa-orange-dark); }

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

/* Mise en page générique -------------------------------------------------- */

.container {
  width: min(100% - 2 * var(--space-6), var(--container));
  margin-inline: auto;
}

.section { padding-block: var(--space-16); }
.section--alt { background: var(--pa-bg-alt); }
.section--green { background: var(--pa-green); color: #fff; }
.section--green h2, .section--green h3 { color: #fff; }

.section__head { max-width: 62ch; margin-bottom: var(--space-12); }

/* REGLE, pas un choix au cas par cas : un .section__head est centre --
   bloc et texte, lede compris -- uniquement quand il introduit une grille
   d'elements equivalents juste en dessous (grille de services, flotte
   vedette, partenaires, catalogue, references : voir .section__head--center
   ci-dessous). Il reste aligne a gauche par defaut -- ci-dessus, sans rien
   ajouter -- quand il ouvre un bloc texte + image asymetrique (.split) ou
   un texte seul sans grille en dessous. Ne jamais ajouter --center a la
   main pour une simple preference visuelle : la regle est le type de
   contenu qui suit, pas le gout du moment. */
.section__head--center {
  margin-inline: auto;
  text-align: center;
}
.section__head--center .lede {
  max-width: 48ch;
  margin-inline: auto;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-title);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* --pa-orange en texte ne fait que 3,25 sur blanc : échec AA à 13 px.
     --pa-orange-dark tient sur tous les fonds clairs de la charte :
     5,67 sur --pa-bg, 5,31 sur --pa-bg-alt, 4,91 sur --pa-green-light. */
  color: var(--pa-orange-dark);
  margin-bottom: var(--space-3);
}
/* Sur fond vert ou photo sombre, le surtitre passe au blanc (7,18 sur
   --pa-green, 10,42 sur --pa-green-dark). */
.section--green .eyebrow { color: #fff; }

.lede { font-size: var(--fs-lg); color: var(--pa-muted); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-4); top: -100px;
  z-index: 200; padding: var(--space-3) var(--space-4);
  background: var(--pa-green); color: #fff; border-radius: var(--radius);
  transition: top var(--motion-fast);
}
.skip-link:focus { top: var(--space-4); color: #fff; }

/* Apparition au defilement -- amelioration progressive commune a toutes les
   sections/cartes/figures revelees par IntersectionObserver (main.js) : les
   elements ciblees restent visibles par defaut en CSS -- .js-reveal n'est
   ajoutee (puis retiree) que par le script, jamais presente au chargement
   initial du HTML. Un visiteur sans JavaScript, ou dont le navigateur ne
   supporte pas IntersectionObserver, voit donc toujours tout immediatement.
   Regle generique : les selecteurs plus specifiques (.card--service.js-reveal,
   .stat.js-reveal) restent prioritaires par specificite CSS et gardent leurs
   propres valeurs. */
.js-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--motion-enter) var(--ease-out),
              transform var(--motion-enter) var(--ease-out);
}

@media (min-width: 900px) {
  .section { padding-block: var(--space-24); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  /* Filet de securite : si .js-reveal a deja ete ajoutee avant que ce
     media ne s'applique (changement de preference en cours de session),
     le contenu reste visible -- en pratique setupScrollReveal (main.js) ne
     l'ajoute meme jamais dans ce cas, il sort des l'entree. */
  .js-reveal { opacity: 1; transform: none; }
}