/* ElixArt Studio — site vitrine
   Mise en page : bandes pleine largeur alternant Encre et Papier ; le grand chevron
   (symbole du logo, en transparence) sort du cadre d'un côté puis de l'autre et
   rythme chaque section. Un seul accent Vermillon par écran.
   Toutes les valeurs viennent de la charte v1.1 et du design system. */

@font-face { font-family: "Jost"; src: url("fonts/jost-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* Couleurs de marque */
  --encre: #101216;
  --vermillon: #ff4a1c;
  --papier: #f6f4ef;
  --blanc: #ffffff;
  --sable: #e7e2d8;
  --ardoise: #5b6068;
  --graphite: #2b2e35;
  --vermillon-profond: #c8340c;   /* texte vermillon sur fond clair (4,8:1) */
  --vermillon-sombre-texte: #ff6a43; /* texte vermillon sur Encre et Graphite */
  --gris-sombre-texte: #b9bdc4;   /* texte secondaire sur fond sombre */
  --filet-clair: #ddd7cb;
  --filet-sombre: #3a3e46;

  /* Typographie */
  --police-titre: "Jost", Arial, sans-serif;
  --police-texte: "Inter", Arial, sans-serif;
  --police-main: "Caveat", "Comic Sans MS", cursive;

  --taille-h1: clamp(2.5rem, 1.55rem + 4.4vw, 5.25rem);
  --taille-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  --taille-h3: 1.25rem;
  --taille-chapeau: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --taille-texte: 1.0625rem;
  --taille-legende: 0.8125rem;

  /* Espaces (pas de 4 px) et gabarit */
  --gouttiere: clamp(16px, 5vw, 64px);
  --largeur: 1200px;
  --section: clamp(64px, 9vw, 128px);
  --rayon-sm: 6px;
  --rayon-md: 12px;
  --rayon-pilule: 999px;

  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--encre);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: var(--taille-texte);
  line-height: 1.55;
  overflow-x: clip;
}

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

h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--taille-h1); line-height: 1.02; letter-spacing: -0.015em; }
h2 { font-size: var(--taille-h2); line-height: 1.1; letter-spacing: -0.01em; }
h3 { font-size: var(--taille-h3); line-height: 1.2; }
p { margin: 0; }

a { color: inherit; }

/* ---------- Bandes de couleur ---------- */

.bande { position: relative; overflow: hidden; overflow: clip; }
.bande--encre {
  background: var(--encre);
  color: var(--papier);
  --secondaire: var(--gris-sombre-texte);
  --accent-texte: var(--vermillon-sombre-texte);
  --filet: var(--filet-sombre);
  --focus: var(--papier);
}
.bande--papier {
  background: var(--papier);
  color: var(--encre);
  --secondaire: var(--ardoise);
  --accent-texte: var(--vermillon-profond);
  --filet: var(--filet-clair);
  --focus: var(--encre);
}

.enveloppe {
  position: relative;
  z-index: 1;
  max-width: calc(var(--largeur) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-left: max(var(--gouttiere), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gouttiere), env(safe-area-inset-right, 0px));
}

/* ---------- Le grand chevron ---------- */

.chevron {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  max-width: none;
}
.bande--encre .chevron { opacity: 0.06; }
.bande--papier .chevron { opacity: 0.045; }
.bande--sable .chevron { opacity: 0.05; }

/* Ouverture : coupé à droite et en bas. */
.chevron--ouverture { width: clamp(420px, 62vw, 980px); right: -18%; bottom: -34%; }
/* Constat : coupé à gauche. */
.chevron--constat { width: clamp(360px, 48vw, 760px); left: -22%; top: -10%; }
/* Principe : coupé à droite. */
.chevron--principe { width: clamp(380px, 52vw, 820px); right: -24%; top: 50%; transform: translateY(-50%); }
/* Cibles : coupé à gauche, en bas. */
.chevron--cibles { width: clamp(300px, 36vw, 560px); left: -16%; bottom: -30%; }
/* Fin : coupé à droite, en haut. */
.chevron--fin { width: clamp(380px, 54vw, 860px); right: -20%; top: -30%; }

/* ---------- Éléments communs ---------- */

.sur-titre {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-texte);
  line-height: 1.4;
}
/* Le filet orange sous chaque sur-titre, signature des titres de section. */
.sur-titre::after {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  margin-top: 16px;
  background: var(--vermillon);
  transform-origin: left center;
}

.chapeau {
  font-size: var(--taille-chapeau);
  line-height: 1.4;
  font-weight: 600;
  max-width: 34ch;
}

.legende { font-size: var(--taille-legende); line-height: 1.45; color: var(--secondaire); }

.note {
  font-family: var(--police-main);
  font-weight: 600;
  font-size: 1.625rem;
  line-height: 1.1;
  color: var(--accent-texte);
}

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.evitement {
  position: absolute;
  left: max(16px, env(safe-area-inset-left, 0px));
  top: -100px;
  z-index: 20;
  background: var(--papier);
  color: var(--encre);
  padding: 12px 16px;
  border-radius: var(--rayon-sm);
  font-weight: 600;
}
.evitement:focus { top: 12px; }

:focus-visible {
  outline: 3px solid var(--focus, var(--encre));
  outline-offset: 3px;
  border-radius: 2px;
}

/* Bouton principal : pilule Vermillon, texte Encre. */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: var(--rayon-pilule);
  background: var(--vermillon);
  color: var(--encre);
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}
.bouton-fleche { display: inline-block; transition: transform 160ms ease; }
.bouton:hover { background: var(--papier); }
.bouton:hover .bouton-fleche { transform: translateX(4px); }
.bouton:focus-visible { outline-color: var(--focus); outline-offset: 4px; border-radius: var(--rayon-pilule); }

/* ---------- En-tête ---------- */

.entete-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
}
.marque { flex: none; display: block; padding-block: 6px; }
.marque img { width: clamp(88px, 8vw + 56px, 132px); }

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(12px, 2.5vw, 32px);
}
.menu a {
  display: inline-block;
  padding-block: 10px;
  font-size: clamp(0.875rem, 0.82rem + 0.3vw, 0.9375rem);
  font-weight: 400;
  text-decoration: none;
  color: var(--secondaire);
  border-bottom: 1px solid transparent;
}
.menu a:hover { color: var(--papier); }
.menu a[aria-current="page"] { color: var(--papier); border-bottom-color: currentColor; }

/* ---------- Ouverture ---------- */

.ouverture-contenu {
  display: grid;
  gap: 20px;
  justify-items: start;
  padding-block: clamp(32px, 7vw, 112px) clamp(56px, 9vw, 144px);
}
.ouverture h1 { max-width: 12ch; }
/* Titre de l'accueil sur deux lignes : « Des outils pensés » / « pour votre métier. » */
.ouverture h1.titre-deux-lignes { max-width: none; font-size: min(var(--taille-h1), 9.2vw); }
.titre-deux-lignes span { display: block; white-space: nowrap; }
.ouverture .chapeau { color: var(--papier); font-weight: 400; max-width: 46ch; text-wrap: balance; }
.actions { margin-top: 12px; }
.ouverture-pour { color: var(--secondaire); font-size: 0.9375rem; max-width: 40ch; }

/* ---------- Constat : le « 10 % utilisé » ---------- */

.constat-grille {
  display: grid;
  gap: clamp(40px, 5vw, 72px);
  padding-block: var(--section);
}
.constat-texte { display: grid; gap: 20px; align-content: start; max-width: 62ch; min-width: 0; }
.constat-texte > p:last-child { color: var(--secondaire); max-width: 52ch; }

.logiciel { margin: 0; min-width: 0; }
.logiciel-entete,
.logiciel-pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 12px 16px;
  font-size: var(--taille-legende);
  color: var(--ardoise);
  background: var(--blanc);
  border: 1px solid var(--filet);
}
.logiciel-entete { border-radius: var(--rayon-md) var(--rayon-md) 0 0; border-bottom: 0; }
.logiciel-pied { border-radius: 0 0 var(--rayon-md) var(--rayon-md); border-top: 0; align-items: baseline; }
.logiciel-total, .logiciel-compte { font-variant-numeric: tabular-nums; }
.logiciel-compte strong { font-family: var(--police-titre); font-size: 1.25rem; font-weight: 600; color: var(--encre); }

.fonctions {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 8px;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-block: 1px solid var(--sable);
}
.fonctions li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 8px;
  font-size: 0.8125rem;
  line-height: 1.25;
  color: var(--ardoise);
  border-radius: 4px;
  transition: background-color 360ms ease, color 360ms ease;
}
.fonctions li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 1px;
}
.fonctions li.utilisee {
  background: var(--vermillon);
  color: var(--encre);
  font-weight: 600;
}
.fonctions li.utilisee::before { background: var(--encre); border-color: var(--encre); }

/* État de départ de l'allumage (posé par le script seulement si le mouvement est permis). */
.logiciel.eteint .fonctions li.utilisee { background: transparent; color: var(--ardoise); font-weight: 400; }
.logiciel.eteint .fonctions li.utilisee::before { background: transparent; border-color: currentColor; }

.logiciel figcaption { display: grid; gap: 8px; margin-top: 16px; }
.logiciel .note { transform: rotate(-1.5deg); transform-origin: left center; }

/* ---------- Principe ---------- */

.principe-grille {
  display: grid;
  gap: clamp(40px, 6vw, 96px);
  padding-block: var(--section);
  align-items: center;
}
.principe-texte { display: grid; gap: 24px; min-width: 0; }
.principe-texte > p:last-child { color: var(--secondaire); max-width: 52ch; }

.citation { margin: 0; }
.citation p {
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.2rem + 2.3vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 20ch;
}
.citation p::before { content: "« "; }
.citation p::after { content: " »"; }

.outil { margin: 0; min-width: 0; display: grid; gap: 16px; }
.outil-entete {
  font-size: var(--taille-legende);
  color: var(--secondaire);
  letter-spacing: 0.04em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--filet);
}
.outil-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.outil-liste li {
  display: grid;
  gap: 2px;
  padding-block: 16px;
  border-bottom: 1px solid var(--filet);
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.2;
}
.outil-avant {
  font-family: var(--police-texte);
  font-weight: 400;
  font-size: var(--taille-legende);
  color: var(--secondaire);
}

/* ---------- Cibles ---------- */

.cibles .enveloppe { display: grid; gap: 20px; padding-block: var(--section); }
.cibles h2 { max-width: 24ch; }
.cibles-liste {
  display: grid;
  gap: 40px;
  margin-top: clamp(20px, 3vw, 44px);
}
.cible {
  display: grid;
  align-content: start;
  gap: 12px;
  padding-top: 20px;
  border-top: 2px solid var(--encre);
  min-width: 0;
}
.cible-besoin { font-weight: 600; }
/* « Nous » en orange : on voit d'un coup d'œil la situation du client, puis notre réponse. */
.cible-nous { color: var(--vermillon-profond); font-weight: 600; }
.cible > p:not(.cible-besoin):not(.cible-exemples) { color: var(--secondaire); }
.cible-exemples {
  font-size: var(--taille-legende);
  color: var(--secondaire);
  padding-top: 12px;
  border-top: 1px solid var(--filet);
}

/* ---------- Fin ---------- */

.fin-contenu { display: grid; gap: 20px; justify-items: start; padding-block: var(--section); }
.fin h2 { max-width: 18ch; }
.fin .chapeau { font-weight: 400; color: var(--secondaire); max-width: 44ch; }
.fin-direct { color: var(--secondaire); font-size: 0.9375rem; max-width: 60ch; }
.fin-direct a { color: var(--papier); text-underline-offset: 3px; white-space: nowrap; }

/* ---------- Pied de page ---------- */

.pied { border-top: 1px solid var(--filet-sombre); }
.pied-ligne {
  display: grid;
  gap: 24px;
  padding-block: 40px 32px;
}
.menu--pied a { padding-block: 6px; }
.baseline {
  font-family: var(--police-main);
  font-weight: 600;
  font-size: min(1.5rem, 5.4vw);
  line-height: 1.1;
  color: var(--papier);
}
.baseline-ligne { display: block; white-space: nowrap; }
.pied-mention { font-size: var(--taille-legende); color: var(--secondaire); }

/* ---------- Réalisations ---------- */

.bande--sable {
  background: var(--sable);
  color: var(--encre);
  --secondaire: var(--ardoise);      /* 5:1 sur Sable */
  --accent-texte: var(--encre);      /* le Vermillon profond ne tient pas 4,5:1 sur Sable */
  --filet: #cfc8ba;
  --focus: var(--encre);
}
.chevron--realisations { width: clamp(360px, 46vw, 760px); right: -20%; top: 4%; }

.realisations .enveloppe { display: grid; gap: clamp(72px, 10vw, 144px); padding-block: var(--section); }
.realisations-tete { display: grid; gap: 20px; max-width: 62ch; }
.realisations-intro { color: var(--secondaire); max-width: 54ch; }

.projet {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.projet-texte { display: grid; gap: 16px; align-content: start; min-width: 0; max-width: 46ch; }
.projet-metier {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--secondaire);
}
.projet h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1.1; }
.projet-texte > p:not(.projet-metier) { color: var(--secondaire); }
.projet-points { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.projet-points li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding-block: 10px;
  border-top: 1px solid var(--filet);
  font-weight: 600;
  font-size: 0.9375rem;
}
.projet-points li::before {
  content: "";
  flex: none;
  width: 10px;
  height: 2px;
  background: var(--encre);
  transform: translateY(-4px);
}
.projet-visuel { position: relative; min-width: 0; }
.projet-visuel--duo { padding-right: 6%; }
.projet-visuel--duo .ecran-onglets { padding-right: 30%; }

/* iMac : maquettes en fondu (chaque image contient l'iMac entier, fond transparent). */
.ecran { margin: 0; max-width: 100%; }
.ecran-vues { position: relative; aspect-ratio: 1200 / 1032; }
.ecran-vues img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 700ms ease;
}
.ecran-vues img.actif { opacity: 1; }

.ecran-onglets {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
.ecran-onglets button {
  position: relative;
  appearance: none;
  border: 0;
  background: none;
  padding: 8px 0 10px;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--secondaire);
  cursor: pointer;
}
.ecran-onglets button::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--filet);
}
.ecran-onglets button[aria-pressed="true"] { color: var(--encre); font-weight: 600; }
.ecran-onglets .progression {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 0;
  background: var(--encre);
  z-index: 1;
}
.ecran-onglets button[aria-pressed="true"] .progression { width: 100%; }
.en-lecture .ecran-onglets button[aria-pressed="true"] .progression {
  width: 0;
  animation: progression var(--duree, 4500ms) linear forwards;
}
@keyframes progression { to { width: 100%; } }

/* iPhone : maquette complète (cadre, barre d'état, Dynamic Island), fond transparent. */
.telephone { margin: 0; }
.telephone img { width: 100%; height: auto; }
.telephone--pose {
  position: absolute;
  right: 0;
  bottom: 4%;
  width: 25%;
  z-index: 2;
}

/* Éventail de trois téléphones, inclinés comme des supports posés. */
.eventail {
  position: relative;
  aspect-ratio: 1 / 0.92;
  max-width: 620px;
  margin-inline: auto;
}
.eventail .telephone {
  position: absolute;
  width: 38%;
  top: 6%;
  transition: transform 900ms cubic-bezier(.2,.7,.2,1);
}
.eventail .telephone:nth-child(1) { left: 2%; transform: rotate(-7deg); z-index: 1; }
.eventail .telephone:nth-child(2) { left: 31%; top: 0; transform: none; z-index: 3; }
.eventail .telephone:nth-child(3) { right: 2%; transform: rotate(7deg); z-index: 2; }
.eventail.ferme .telephone:nth-child(1) { transform: translateX(76%) rotate(0deg); }
.eventail.ferme .telephone:nth-child(3) { transform: translateX(-76%) rotate(0deg); }
.eventail .telephone:nth-child(3) { transition-delay: 80ms; }

@media (min-width: 960px) {
  .projet { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .projet--inverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .projet--inverse .projet-texte { order: 2; }
  .projet--inverse .projet-visuel { order: 1; }
}

/* ---------- Petits écrans ---------- */

@media (max-width: 359px) {
  .bouton { font-size: 0.9375rem; padding-inline: 20px; gap: 10px; }
}

/* ---------- Écrans larges ---------- */

@media (min-width: 720px) {
  .fonctions { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 12px; }
  .cibles-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
}

@media (min-width: 1024px) {
  .constat-grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .principe-grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .pied-ligne {
    grid-template-columns: auto 1fr;
    grid-template-areas: "menu baseline" "mention baseline";
    align-items: end;
  }
  .menu--pied { grid-area: menu; }
  .pied-mention { grid-area: mention; }
  .baseline { grid-area: baseline; justify-self: end; text-align: right; white-space: nowrap; }
  .baseline { font-size: 1.5rem; }
  .baseline-ligne { display: inline; }
}

/* Lien vers le site d'un projet. */
.projet-lien { margin-top: 8px; }
.projet-lien a {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--vermillon);
  text-underline-offset: 5px;
}
.projet-lien a:hover { text-decoration-thickness: 3px; }
.pied-mention a { color: inherit; text-underline-offset: 3px; }
.pied-mention a:hover { color: var(--papier); }

/* ---------- Pages intérieures ---------- */

.ouverture--page .ouverture-contenu { padding-block: clamp(32px, 6vw, 96px) clamp(48px, 7vw, 112px); }
.ouverture--page h1 { max-width: 16ch; }

/* Services : deux rangées de trois, séparées par des filets. */
.services .enveloppe { display: grid; gap: 20px; padding-block: var(--section); }
.services h2 { max-width: 22ch; }
.services-intro { color: var(--secondaire); max-width: 62ch; }
.services-liste { display: grid; gap: 40px; margin-top: clamp(20px, 3vw, 44px); }
.service {
  display: grid;
  align-content: start;
  gap: 12px;
  padding-top: 20px;
  border-top: 2px solid var(--encre);
  min-width: 0;
}
.service > p:not(.service-exemples) { color: var(--secondaire); }
.service-exemples { font-size: var(--taille-legende); color: var(--secondaire); padding-top: 12px; border-top: 1px solid var(--filet); }
.service, .service.apparition { transition: opacity 800ms ease, transform 800ms cubic-bezier(.2,.7,.2,1), border-color 300ms ease; }
.service:hover { border-top-color: var(--vermillon); }

/* La méthode : quatre étapes numérotées, c'est une vraie séquence. */
.methode .enveloppe { display: grid; gap: 20px; padding-block: var(--section); }
.etapes { list-style: none; margin: clamp(20px, 3vw, 44px) 0 0; padding: 0; display: grid; gap: 40px; counter-reset: none; }
.etape { display: grid; gap: 12px; align-content: start; min-width: 0; }
.etape-numero {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  line-height: 1;
  color: var(--encre);
  padding-bottom: 16px;
  border-bottom: 4px solid var(--vermillon);
  justify-self: start;
  min-width: 2.2ch;
}
.etape p { color: var(--secondaire); }

/* Contact */
.contact-grille { display: grid; gap: clamp(48px, 6vw, 96px); padding-block: var(--section); }
.formulaire { display: grid; gap: 24px; max-width: 640px; min-width: 0; }
.champ { display: grid; gap: 8px; }
.champ label { font-weight: 600; font-size: 0.9375rem; }
.facultatif { font-weight: 400; color: var(--secondaire); }
.champ input, .champ textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid var(--ardoise);
  border-radius: var(--rayon-sm);
  padding: 12px 14px;
  min-height: 48px;
}
.champ textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.champ input:focus-visible, .champ textarea:focus-visible { outline: 3px solid var(--encre); outline-offset: 1px; border-color: var(--encre); }
.champ [aria-invalid="true"] { border-color: var(--vermillon-profond); border-width: 2px; }
.champ-aide { font-size: var(--taille-legende); color: var(--secondaire); }
.champ-erreur { font-size: var(--taille-legende); font-weight: 600; color: var(--vermillon-profond); }
.champ--piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire .bouton { border: 0; cursor: pointer; }
.formulaire .bouton:disabled { opacity: .6; cursor: progress; }
.formulaire-statut:empty { display: none; }
.formulaire-statut { font-weight: 600; padding: 16px; border-left: 4px solid var(--vermillon); background: var(--blanc); }
.formulaire-rgpd { font-size: var(--taille-legende); color: var(--secondaire); max-width: 56ch; }
.formulaire-rgpd a { color: inherit; text-underline-offset: 3px; }
.formulaire-merci { display: grid; gap: 16px; max-width: 560px; }
.formulaire-merci h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.contact-aparte { display: grid; gap: 40px; align-content: start; }
.contact-email a { font-family: var(--police-titre); font-weight: 600; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); text-decoration-color: var(--vermillon); text-underline-offset: 5px; word-break: break-word; }
.suite { margin: 0; padding-left: 1.25em; display: grid; gap: 10px; color: var(--secondaire); }
.contact-aparte .sur-titre { margin-bottom: 12px; }

/* Mentions légales */
.legal-texte { display: grid; gap: 16px; padding-block: var(--section); }
.legal-texte > * { max-width: 68ch; }
.legal-texte h2 { font-size: 1.375rem; margin-top: 24px; }
.legal-texte h2:first-child { margin-top: 0; }
.legal-texte p { color: var(--secondaire); }
.legal-texte a { color: var(--encre); text-underline-offset: 3px; }
.a-completer { background: #ffe1d8; color: var(--encre); font-weight: 600; padding: 0 4px; border-radius: 3px; }

@media (min-width: 720px) {
  .services-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(24px, 4vw, 56px); }
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(24px, 4vw, 56px); }
}
@media (min-width: 1024px) {
  .etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .contact-grille { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
}

/* Services : haut de page avec maquettes, visuel par service, frise de la méthode. */
.ouverture-visuel { position: relative; width: 100%; max-width: 560px; margin-top: 16px; padding-right: 6%; }
.ouverture-imac { width: 94%; }
.ouverture-iphone {
  position: absolute;
  right: 0;
  bottom: 6%;
  width: 27%;
  animation: flotter 6s ease-in-out 1.2s infinite;
}
@keyframes flotter { 50% { transform: translateY(-10px); } }

.service-visuel {
  margin: 0 0 8px;
  aspect-ratio: 4 / 3;
  background: var(--sable);
  overflow: hidden;
}
.service-visuel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 600ms cubic-bezier(.2,.7,.2,1);
}
.service-visuel--photo img { object-fit: cover; }
.service:hover .service-visuel img { transform: scale(1.04); }
.service { border-top: 0; padding-top: 0; }
.service h3 { padding-top: 16px; border-top: 2px solid var(--encre); transition: border-color 300ms ease; }
.service:hover h3 { border-top-color: var(--vermillon); }

.etape-numero { border-bottom: 0; padding-bottom: 0; }
.etape-trait { display: block; height: 4px; background: var(--filet); position: relative; overflow: hidden; }
.etape-trait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--vermillon);
  transform-origin: left center;
  transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}
.etapes .etape:nth-child(2) .etape-trait::after { transition-delay: 350ms; }
.etapes .etape:nth-child(3) .etape-trait::after { transition-delay: 700ms; }
.etapes .etape:nth-child(4) .etape-trait::after { transition-delay: 1050ms; }
.etapes.frise-attente .etape-trait::after { transform: scaleX(0); }
.etape-numero { transition: color 400ms ease; }
.etapes.frise-attente .etape-numero { color: var(--filet); }
.etapes .etape:nth-child(2) .etape-numero { transition-delay: 350ms; }
.etapes .etape:nth-child(3) .etape-numero { transition-delay: 700ms; }
.etapes .etape:nth-child(4) .etape-numero { transition-delay: 1050ms; }

@media (min-width: 1024px) {
  .ouverture-contenu--visuel { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(32px, 4vw, 72px); }
  .ouverture-contenu--visuel > * { grid-column: 1; }
  .ouverture-contenu--visuel > .ouverture-visuel { grid-column: 2; grid-row: 1 / span 5; align-self: center; margin-top: 0; justify-self: end; }
  .etapes .etape-trait { margin-right: calc(-1 * clamp(24px, 4vw, 56px)); }
  .etapes .etape:last-child .etape-trait { margin-right: 0; }
}

/* Identité visuelle : trois photos de supports qui se succèdent en fondu. */
.service-visuel--fondu { position: relative; }
.service-visuel--fondu img { position: absolute; inset: 0; }
.service-visuel--fondu img:nth-child(n+2) { opacity: 0; animation: fondu-photos 12s infinite; }
.service-visuel--fondu img:nth-child(2) { animation-delay: 4s; }
.service-visuel--fondu img:nth-child(3) { animation-delay: 8s; }
@keyframes fondu-photos { 0%, 100% { opacity: 0; } 8%, 33% { opacity: 1; } 41% { opacity: 0; } }

/* ---------- Notes manuscrites (touches d'humour) ---------- */

.griffe {
  font-family: var(--police-main);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
  line-height: 1.15;
  color: var(--accent-texte);
  transform: rotate(-2deg);
  transform-origin: left center;
  max-width: 40ch;
}
.bande--sable .griffe, .projet-texte > p.griffe { color: var(--vermillon-profond); }
.services .griffe { margin-top: 16px; }
.cibles .griffe { justify-self: center; text-align: center; transform-origin: center; margin-top: 16px; }
.formulaire .griffe { margin-top: -8px; }
/* Écriture de la note de gauche à droite quand elle apparaît. */
.griffe-encre { display: inline-block; clip-path: inset(-20% -5% -20% -5%); transition: clip-path 1400ms cubic-bezier(.4,.1,.2,1) 200ms; }
.griffe.apparition { transition: none; }
.griffe.apparition.a-venir { opacity: 1; transform: rotate(-2deg); }
.griffe.apparition.a-venir .griffe-encre { clip-path: inset(-20% 105% -20% -5%); }

/* ---------- Accueil : indice « il y a une suite » et fil conducteur ---------- */

.indice-defiler {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: max-content;
  margin: -32px auto 0;
  padding: 0 16px 20px;
  color: var(--gris-sombre-texte);
  text-decoration: none;
  animation: monter 800ms cubic-bezier(.2,.7,.2,1) 900ms both;
}
.indice-texte { font-family: var(--police-main); font-weight: 600; font-size: 1.25rem; }
.indice-chevron { color: var(--vermillon); animation: rebond 1.8s ease-in-out 1.8s infinite; }
.indice-defiler:hover { color: var(--papier); }
@keyframes rebond { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

section[id] { scroll-margin-top: 16px; }
html { scroll-behavior: smooth; }

/* Le serpent : une courte comète orange qui descend dans la marge de gauche en
   suivant la lecture. Elle passe sous le contenu, au-dessus des fonds. */
main { position: relative; }
.serpent {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.serpent-trace { fill: none; stroke: var(--vermillon); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.serpent-tete { fill: var(--vermillon); }
.serpent-halo { fill: var(--vermillon); opacity: .18; animation: respirer 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes respirer { 50% { transform: scale(1.35); opacity: .08; } }
@media (max-width: 719px) {
  /* Sur téléphone, pas de comète : la marge est trop étroite. */
  .serpent { display: none; }
}

/* La comète cliquable (ordinateur) : survol = mini sommaire, clic = section suivante,
   et une note d'humour tous les trois clics. */
.comete { display: none; }
@media (min-width: 1024px) {
  .comete {
    display: block;
    position: absolute;
    z-index: 5;
    left: 0; top: 0;
    width: 44px; height: 44px;
    transform: translate(var(--cx, -100px), var(--cy, -100px));
  }
  .comete[hidden] { display: none; }
  .comete-bouton {
    position: absolute;
    inset: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
  }
  .comete-bouton:focus-visible { outline: 3px solid var(--vermillon); outline-offset: 2px; }
  .comete-menu {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    min-width: 200px;
    padding: 14px 18px 16px;
    background: var(--papier);
    color: var(--encre);
    border: 1px solid var(--encre);
    border-radius: var(--rayon-md);
    opacity: 0;
    visibility: hidden;
    transform: translate(-6px, -50%);
    transition: opacity 250ms ease, transform 250ms ease, visibility 0s linear 250ms;
  }
  .comete:hover .comete-menu, .comete:has(:focus-visible) .comete-menu {
    opacity: 1; visibility: visible; transform: translate(0, -50%);
    transition: opacity 250ms ease, transform 250ms ease, visibility 0s;
  }
  .comete-aide { font-family: var(--police-main); font-weight: 600; font-size: 1.125rem; color: var(--vermillon-profond); margin-bottom: 8px; }
  .comete-menu ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: c; }
  .comete-menu li { counter-increment: c; }
  .comete-menu a {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 4px 0;
    font-size: 0.875rem;
    color: var(--ardoise);
    text-decoration: none;
  }
  .comete-menu a::before { content: "0" counter(c); font-family: var(--police-titre); font-weight: 600; font-size: 0.75rem; color: var(--filet-clair); }
  .comete-menu a:hover, .comete-menu a.ici { color: var(--encre); font-weight: 600; }
  .comete-menu a.ici::before { color: var(--vermillon); }
  /* Bulle de bande dessinée : fond blanc, contour Encre, pointe vers la comète. */
  .comete-bulle {
    position: absolute;
    left: calc(100% + 16px);
    top: 50%;
    width: max-content;
    max-width: 260px;
    font-family: var(--police-main);
    font-weight: 600;
    font-size: 1.375rem;
    line-height: 1.15;
    color: var(--encre);
    background: var(--blanc);
    border: 2.5px solid var(--encre);
    border-radius: 22px;
    padding: 10px 16px 12px;
    opacity: 0;
    transform: translateY(-50%) scale(.6) rotate(-3deg);
    transform-origin: left center;
    pointer-events: none;
    visibility: hidden;
  }
  /* La pointe : un triangle Encre, puis un triangle blanc par-dessus. */
  .comete-bulle::before, .comete-bulle::after {
    content: "";
    position: absolute;
    top: 50%;
    border-style: solid;
    transform: translateY(-50%);
  }
  .comete-bulle::before { left: -15px; border-width: 9px 15px 9px 0; border-color: transparent var(--encre) transparent transparent; }
  .comete-bulle::after { left: -10px; border-width: 6px 11px 6px 0; border-color: transparent var(--blanc) transparent transparent; }
  .comete-bulle.visible {
    visibility: visible;
    animation: bulle-pop 520ms cubic-bezier(.3,1.6,.5,1) forwards;
  }
  @keyframes bulle-pop {
    0% { opacity: 0; transform: translateY(-50%) scale(.6) rotate(-3deg); }
    100% { opacity: 1; transform: translateY(-50%) scale(1) rotate(-2deg); }
  }
  .comete:hover .comete-bulle { visibility: hidden; }
}
.serpent-tete.frisson { animation: frisson 600ms ease; transform-box: fill-box; transform-origin: center; }
@keyframes frisson { 25% { transform: translateX(-4px) scale(1.2); } 50% { transform: translateX(4px) scale(1.2); } 75% { transform: translateX(-2px); } }

/* ---------- Animations ---------- */

@keyframes monter { from { opacity: 0; transform: translateY(18px); } }
@keyframes filet { from { transform: scaleX(0); } }

/* Ouverture : le texte monte ligne par ligne au chargement, le filet se trace. */
.ouverture-contenu > * { animation: monter 800ms cubic-bezier(.2,.7,.2,1) both; }
.ouverture-contenu > :nth-child(2) { animation-delay: 100ms; }
.ouverture-contenu > :nth-child(3) { animation-delay: 200ms; }
.ouverture-contenu > :nth-child(4) { animation-delay: 300ms; }
.ouverture-contenu > :nth-child(5) { animation-delay: 400ms; }
.ouverture .sur-titre::after { animation: filet 800ms 450ms cubic-bezier(.2,.7,.2,1) both; }

/* Apparition au défilement : la classe a-venir n'est posée par le script que sur
   ce qui est encore sous l'écran ; sans script, tout reste visible. */
.apparition { transition: opacity 800ms ease, transform 800ms cubic-bezier(.2,.7,.2,1); }
.apparition.a-venir { opacity: 0; transform: translateY(28px); }
.sur-titre.apparition::after { transition: transform 800ms 300ms cubic-bezier(.2,.7,.2,1); }
.sur-titre.apparition.a-venir::after { transform: scaleX(0); }

/* Le grand chevron glisse légèrement au défilement (décalage posé par le script). */
.chevron { translate: 0 var(--decalage, 0px); }

/* Les colonnes « Pour qui » réagissent au survol. */
.cible, .cible.apparition { transition: opacity 800ms ease, transform 800ms cubic-bezier(.2,.7,.2,1), border-color 300ms ease; }
.cible:hover { border-top-color: var(--vermillon); }

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .bouton:hover .bouton-fleche { transform: none; }
}

/* Mentions légales : case « Compter ma visite » */
.choix-stats label { display: inline-flex; gap: 10px; align-items: center; font-weight: 600; cursor: pointer; }
.choix-stats input { width: 20px; height: 20px; accent-color: var(--vermillon); }
.choix-stats span { font-size: var(--taille-legende); color: var(--ardoise); }

/* Lien vers l'autre langue, dans le menu principal */
.menu-langue a { font-size: 0.8125rem; letter-spacing: 0.08em; padding: 3px 10px; margin-top: 7px; border: 1px solid var(--filet-sombre); border-radius: 999px; }
.menu-langue a:hover { border-color: var(--gris-sombre-texte); }
@media (max-width: 400px) {
  .entete .menu { gap: 10px; }
  .marque img { width: 78px; }
  .menu-langue a { padding-inline: 7px; letter-spacing: 0.04em; }
}
@media (max-width: 359px) {
  .entete .menu { gap: 8px; }
  .entete .menu a { font-size: 0.8125rem; }
  .marque img { width: 70px; }
  .menu-langue a { font-size: 0.75rem; padding-inline: 6px; }
}

/* ---------- Questions fréquentes ---------- */
.faq .enveloppe { display: grid; gap: 20px; padding-block: var(--section); }
.questions { display: grid; max-width: 820px; margin-top: clamp(8px, 2vw, 24px); border-top: 1px solid var(--filet-clair); }
.question { border-bottom: 1px solid var(--filet-clair); }
.question summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; font-family: var(--police-titre); font-weight: 500; font-size: 1.125rem; line-height: 1.3;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-right: 4px;
  border-right: 2px solid var(--vermillon); border-bottom: 2px solid var(--vermillon);
  transform: translateY(-3px) rotate(45deg); transition: transform .25s ease;
}
.question[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.question summary:focus-visible { outline: 2px solid var(--focus, var(--vermillon)); outline-offset: 4px; }
.question p { margin: 0 0 20px; max-width: 68ch; color: var(--ardoise); }
@media (prefers-reduced-motion: reduce) { .question summary::after { transition: none; } }