/* Surcouche du site au-dessus de Pico CSS (css/pico.min.css) */

/* Taille de base fixe : Pico l'augmente par défaut avec la largeur d'écran */
:root {
  --pico-font-size: 100%;
  /* police sans-serif par défaut du navigateur, emojis conservés */
  --pico-font-family-sans-serif: sans-serif, var(--pico-font-family-emoji);

  /* tailles de police (1rem = 16px) : n'utiliser que celles-ci */
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.75rem;  /* 28px */
  --font-size-4xl: 2.25rem;  /* 36px */
  --font-size-intro: 2rem;   /* accroche, 2.5rem au-delà de 768px */

  /* palette « Encre & signal » : base chaude, un accent, un signal */
  --color-white: #fff;
  --color-ink: #14161b;          /* titres, texte fort */
  --color-text: #4a5060;         /* paragraphes, listes */
  --color-muted: #646a78;        /* légendes, pastilles inactives */
  --color-surface-alt: #f5f3ee;  /* fond de page, sous l'intro et la Méthode */
  --color-border: #e4e0d8;
  --color-accent: #1f4e8c;       /* bouton principal, liens */
  --color-accent-hover: #173c6d;
  --color-accent-focus: rgb(31 78 140 / 0.5);
  --color-accent-selection: rgb(31 78 140 / 0.25);
  --color-accent-underline: rgb(31 78 140 / 0.4);
  --color-linkedin: #0a66c2;
  --color-surface-services: #faf9f5; /* fond du bandeau services : variante chaude de surface-alt, un cran plus douce */

  /* couleurs des sections */
  --section-background: var(--color-white);
  --section-border-color: var(--color-border);
  --services-background: var(--color-surface-services);
  --services-card-background: var(--color-white);
  --services-card-border-color: var(--color-border);
  --methode-background: var(--color-surface-alt);
  --methode-card-background: var(--color-white);
  --methode-card-border-color: var(--color-border);

  /* colonne de contenu, coupée en deux moitiés séparées par --middle-gap */
  --content-width: 48rem;
  --middle-gap: 1rem;
  --gutter: 1rem; /* marge minimale de chaque côté de la colonne */
}

@media (min-width: 768px) {
  :root {
    --gutter: 0;
    --font-size-intro: 2.5rem;
  }
}

/* thème clair de Pico, même sélecteur que dans pico.min.css pour le surcharger */
:root:not([data-theme=dark]),
[data-theme=light] {
  --pico-color: var(--color-text);
  --pico-h1-color: var(--color-ink);
  --pico-h2-color: var(--color-ink);
  --pico-h3-color: var(--color-ink);
  --pico-h4-color: var(--color-ink);
  --pico-muted-color: var(--color-muted);
  --pico-muted-border-color: var(--color-border);
  --pico-background-color: var(--color-white);
  --pico-text-selection-color: var(--color-accent-selection);

  --pico-card-background-color: var(--color-white);
  --pico-card-border-color: var(--color-border);
  --pico-card-sectioning-background-color: var(--color-white);

  --pico-primary: var(--color-accent);
  --pico-primary-background: var(--color-accent);
  --pico-primary-border: var(--color-accent);
  --pico-primary-underline: var(--color-accent-underline);
  --pico-primary-hover: var(--color-accent-hover);
  --pico-primary-hover-background: var(--color-accent-hover);
  --pico-primary-hover-border: var(--color-accent-hover);
  --pico-primary-hover-underline: var(--color-accent-hover);
  --pico-primary-focus: var(--color-accent-focus);
  --pico-primary-inverse: var(--color-white);
}

/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.header-anchor {
  /* a11y, cf eleventy.config.js */
  display: none;
}

/* ------------------------- general */

body {
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  background-color: var(--color-surface-alt);
}

/* grille de page : un segment passe en pleine largeur avec grid-column: full,
   et recentre son contenu sur la colonne avec grid-template-columns: subgrid */
#root {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [content-start] minmax(0, calc(var(--content-width) / 2 - var(--middle-gap) / 2))
    [middle-start] var(--middle-gap) [middle-end]
    minmax(0, calc(var(--content-width) / 2 - var(--middle-gap) / 2))
    [content-end] minmax(var(--gutter), 1fr) [full-end];
}

#root > *,
main > * {
  grid-column: content;
}

/* les marges ne fusionnent pas dans une grille : l'espacement entre blocs
   est porté par margin-top */
#root > main {
  grid-column: full;
  display: grid;
  grid-template-columns: subgrid;
  align-content: start;
}

/* ------------------------- header */

header {
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}

header nav {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5em;
}
.flex-spacer {
  flex-grow: 1;
}

header nav div {
  margin: 0;
  padding: 0;
}

header h2 {
  --pico-font-size: var(--font-size-xl);
  /* le span hérite de 400 ; le nom garde son 700 via .site-title */
  --pico-font-weight: 400;
  margin: 0;
}

/* color direct : Pico colore les liens [aria-current] via un sélecteur plus spécifique */
.site-title {
  color: var(--pico-h2-color);
  font-weight: 700;
  text-decoration: none;
}

.site-title:hover {
  text-decoration: underline;
}

.icons {
  display: block;
}

.icons svg {
  display: block;
  fill: var(--pico-contrast);
}

.icons.linkedin:hover svg {
  fill: var(--color-linkedin);
}

/* CTA : même hauteur que l'icône LinkedIn (24px = 22px + 2 bordures de 1px).
   block : en inline-block, il se cale sur la ligne de base du li et descend selon la police */
header nav div [role="button"] {
  display: block;
  margin: 0;
  padding: 0;
  padding-inline: 0.75rem;
  font-size: var(--font-size-sm);
  line-height: 1.375rem;
  white-space: nowrap;
}

/* ------------------------- components */

.none { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0.25rem 0.75rem;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  background-color: var(--color-white);
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.25rem;
}
.chip.small {
  font-size: var(--font-size-sm);
  line-height: 1rem;
  gap: 0.2rem;
  padding: 0.125rem 0.5rem;
}

/* chip cliquable : color direct, cf. spécificité des liens Pico */
a.chip {
  color: var(--color-ink);
  text-decoration: none;
  vertical-align: 0.125em;
}

a.chip:hover {
  border-color: var(--color-ink);
}

/* Zones d'intervention, en chips (icônes Heroicons map-pin / globe-alt) */
.locations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.875rem;
  padding: 0;
}

.locations li{
  display: inline-flex;
  align-items: center;
  margin: 0;
  gap: 0.2rem;
  padding: 0.125rem 0.375rem;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  background-color: var(--color-white);
  color: var(--pico-muted-color);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1rem;
}

.locations li::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M9.69 18.933l.003.001C9.89 19.02 10 19 10 19s.11.02.308-.066l.002-.001.006-.003.018-.008a5.741 5.741 0 0 0 .281-.14c.186-.096.446-.24.757-.433.62-.384 1.445-.966 2.274-1.765C15.302 14.988 17 12.493 17 9A7 7 0 1 0 3 9c0 3.492 1.698 5.988 3.355 7.584a13.731 13.731 0 0 0 2.273 1.765 11.842 11.842 0 0 0 .976.544l.062.029.018.008.006.003ZM10 11.25a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.locations li.remote::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.555 5.412a8.028 8.028 0 0 0-3.503-2.81 14.899 14.899 0 0 1 1.663 4.472 8.547 8.547 0 0 0 1.84-1.662ZM13.326 7.825a13.43 13.43 0 0 0-2.413-5.773 8.087 8.087 0 0 0-1.826 0 13.43 13.43 0 0 0-2.413 5.773A8.473 8.473 0 0 0 10 8.5c1.18 0 2.304-.24 3.326-.675ZM6.514 9.376A9.98 9.98 0 0 0 10 10c1.226 0 2.4-.22 3.486-.624a13.54 13.54 0 0 1-.351 3.759A13.54 13.54 0 0 1 10 13.5c-1.079 0-2.128-.127-3.134-.366a13.538 13.538 0 0 1-.352-3.758ZM5.285 7.074a14.9 14.9 0 0 1 1.663-4.471 8.028 8.028 0 0 0-3.503 2.81c.529.638 1.149 1.199 1.84 1.66ZM17.334 6.798a7.973 7.973 0 0 1 .614 4.115 13.47 13.47 0 0 1-3.178 1.72 15.093 15.093 0 0 0 .174-3.939 10.043 10.043 0 0 0 2.39-1.896ZM2.666 6.798a10.042 10.042 0 0 0 2.39 1.896 15.196 15.196 0 0 0 .174 3.94 13.472 13.472 0 0 1-3.178-1.72 7.973 7.973 0 0 1 .615-4.115ZM10 15c.898 0 1.778-.079 2.633-.23a13.473 13.473 0 0 1-1.72 3.178 8.099 8.099 0 0 1-1.826 0 13.47 13.47 0 0 1-1.72-3.178c.855.151 1.735.23 2.633.23ZM14.357 14.357a14.912 14.912 0 0 1-1.305 3.04 8.027 8.027 0 0 0 4.345-4.345c-.953.542-1.971.981-3.04 1.305ZM6.948 17.397a8.027 8.027 0 0 1-4.345-4.345c.953.542 1.971.981 3.04 1.305a14.912 14.912 0 0 0 1.305 3.04Z'/%3E%3C/svg%3E");
}

/* ville principale : couleurs inversées */
.locations li.main {
  border-color: var(--color-ink);
  background-color: var(--color-ink);
  color: var(--color-white);
}

/* ------------------------- main */

main {
  padding-top: 0.75rem;
  padding-bottom: 3rem;
  font-size: var(--font-size-lg);
}

/* espace entre texte de paragraphe et liste qui suit */
main p:has(+ :is(ul, ol)) {
  margin-bottom: 0.35rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.actions.center {
  justify-content: center;
}

.actions [role="button"] {
  font-size: var(--font-size-lg);
}

/* ------------------------- homepage */

/* CTA sous l'intro à droite, CTA de fin de page centré */
.homepage main > p + .actions {
  justify-content: center;
}

/* chips + titre à gauche, photo à droite */
.intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
  margin-bottom: 1.5rem;
}

.intro img {
  flex-shrink: 0;
  width: 6rem;
  border-radius: 9999px;
}

@media (min-width: 768px) {
  .intro img {
    width: 150px;
  }
}

/* « Vision produit + Expertise full-stack = », au-dessus de l'accroche */
.pitch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  color: var(--pico-muted-color);
}

main .post-intro p {
  font-size: var(--font-size-xl);
}
main .post-intro {
  margin-bottom: 2rem;
  > :last-child { margin-bottom: 0; }
}

/* filet de sécurité contre le défilement horizontal si un bloc déborde */
.homepage {
  overflow-x: clip;
}

/* bandeau de logos pleine largeur ; la piste, plus large, est rognée */
.logos {
  grid-column: full;
  margin-top: 3rem;
  overflow: hidden;
}

.logos p {
  margin-bottom: 1rem;
  color: var(--pico-muted-color);
  font-size: var(--font-size-base);
  font-variant: small-caps;
  letter-spacing: 0.05em;
  text-align: center;
}

/* deux copies identiques : décaler de -50 % boucle sans saut */
.logos-track {
  display: flex;
  width: max-content;
  animation: logos-defilement 40s linear infinite;
}

.logos-track:hover {
  animation-play-state: paused;
}

.logos-track > div {
  display: flex;
  align-items: center;
}

/* marge plutôt que gap, pour que les deux copies aient exactement la même largeur */
/* logos en gris, discrets */
.logos img {
  height: 40px;
  margin-right: 2.5rem;
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity 0.2s;
}

/* bloc noir plein : plus estompé pour ne pas écraser la bande */
.logos img[src$="canalplus.png"] {
  opacity: 0.4;
}

.logos img:hover {
  opacity: 0.9;
}

@keyframes logos-defilement {
  to { transform: translateX(-50%); }
}

/* sans animation : une seule ligne défilable à la main */
@media (prefers-reduced-motion: reduce) {
  .logos {
    overflow-x: auto;
  }
  .logos-track {
    animation: none;
  }
  .logos-track > div[aria-hidden] {
    display: none;
  }
}

/* sections en cartes */
main > section {
  margin-top: 3rem;
  margin-bottom: 0;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--section-border-color);
  border-radius: 0.75rem;
  background-color: var(--section-background);
  box-shadow: none;
  > :last-child { margin-bottom: 0; }
}

@media (min-width: 768px) {
  main > section {
    padding: 2rem;
  }
}

main > section + section {
  margin-top: 2rem;
}

main > section + .actions {
  margin-top: 2rem;
}


/* Titres de section */
.homepage h3 {
  --pico-font-size: var(--font-size-2xl);
  --pico-font-weight: 600;
  margin-top: 3rem;
}

/* titre de carte collé au haut de la carte */
.homepage section h3 {
  margin-top: 0;
}

/* accroche : plus grande que les titres de section, collée aux chips */
.homepage .intro h3 {
  --pico-font-size: var(--font-size-intro);
  letter-spacing: -0.02em;
  margin: 0;
}

/* ------------------------- services */

/* bandeau pleine largeur ; ses enfants se placent sur les colonnes de #root */
main > section.services {
  grid-column: full;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: 1rem;
  padding-inline: 0;
  padding-block: 2.5rem;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background-color: var(--services-background);
}

.services > * {
  grid-column: content;
}

@media (min-width: 768px) {
  /* deux cartes de part et d'autre de la gouttière centrale */
  .services > article:nth-of-type(1) {
    grid-column: content-start / middle-start;
  }

  .services > article:nth-of-type(2) {
    grid-column: middle-end / content-end;
  }

  /* dernière carte seule sur sa ligne, centrée, de la largeur d'une moitié */
  .services > article:last-child {
    justify-self: center;
    width: calc(50% - 0.5rem);
  }
}

/* titre discret, dans le style du nom dans la nav (.site-title), un cran plus grand */
.homepage .services h3 {
  --pico-font-size: var(--font-size-2xl);
  --pico-font-weight: 600;
  --pico-color: var(--pico-h2-color);
  margin-bottom: 0.5rem;
  text-align: center;
}

.services article {
  margin: 0;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--services-card-border-color);
  border-radius: 0.75rem;
  background-color: var(--services-card-background);
  box-shadow: none;
  > :last-child { margin-bottom: 0; }
}

.services h4 {
  --pico-font-size: var(--font-size-lg);
  --pico-font-weight: 600;
  margin-bottom: 0.75rem;
  text-align: center;
}

.services h4:has(+ p) {
  margin-bottom: 0.375rem; 
}

/* chip en bas de carte (années d'expérience) */
.services article > p {
  text-align: center;
}

.services .chip {
  background-color: transparent;
}

/* puces alignées sur le bord gauche du titre de carte */
.services ul {
  padding-left: 1rem;
}

.services li::marker {
  color: var(--color-ink);
}

/* ------------------------- méthode */

/* bandeau pleine largeur, même traitement que .services ; fond propre pour alterner les couleurs de section */
main > section.methode {
  grid-column: full;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: 1rem;
  padding-inline: 0;
  padding-block: 2.5rem;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background-color: var(--methode-background);
  /* même fond que la page : sans ça, le margin-top de "section + section" s'additionne au padding et se voit comme un double espace avant le titre */
  margin-top: 0;
}

.methode > * {
  grid-column: content;
}

@media (min-width: 768px) {
  /* cartes deux par deux, de part et d'autre de la gouttière centrale */
  .methode > article:nth-of-type(odd) {
    grid-column: content-start / middle-start;
  }

  .methode > article:nth-of-type(even) {
    grid-column: middle-end / content-end;
  }

  /* dernière carte seule sur sa ligne (nombre impair), centrée, de la largeur d'une moitié */
  .methode > article:last-child:nth-of-type(odd) {
    grid-column: content;
    justify-self: center;
    width: calc(50% - 0.5rem);
  }
}

.homepage .methode h3 {
  --pico-font-size: var(--font-size-2xl);
  --pico-font-weight: 600;
  --pico-color: var(--pico-h2-color);
  margin-bottom: 0.5rem;
  text-align: center;
}

.methode article {
  margin: 0;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--methode-card-border-color);
  border-radius: 0.75rem;
  background-color: var(--methode-card-background);
  box-shadow: none;
  > :last-child { margin-bottom: 0; }
}

.methode h4 {
  --pico-font-size: var(--font-size-lg);
  --pico-font-weight: 600;
  margin-bottom: 0.75rem;
  text-align: center;
}

.methode ul {
  padding-left: 1rem;
}

.methode li::marker {
  color: var(--color-ink);
}

.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }