/* =========================================================
   WEBFAYA — Design tokens
   ========================================================= */
:root {
  --webfaya-cream: #FFF6EC;
  --webfaya-ink: #0B0B0E;
  /* Fond sombre chaud. Porte le texte creme a 8,3:1 : au-dessus du 4,5:1
     exige pour du texte courant. */
  --webfaya-braise: #8C1C03;
  --webfaya-orange: #FF3B0B;
  /* Déclinaisons accessibles du rouge-orangé de la charte.
     --webfaya-orange       : grands titres et aplats décoratifs (texte large, ratio >= 3:1)
     --webfaya-orange-btn   : fonds de boutons pleins avec texte blanc (ratio 4.7:1)
     --webfaya-orange-deep  : petits textes (sur crème, sable ET turquoise, ratio >= 4.7:1) */
  --webfaya-orange-btn: #DD2E06;
  --webfaya-orange-deep: #BC2200;
  --webfaya-aqua: #9BEFE7;
  --webfaya-aqua-strong: #15BDB5;
  /* Couleur de l'anneau de focus clavier.
     Le turquoise --webfaya-aqua-strong ne dépasse pas 2,3:1 sur les fonds du site
     (1,8:1 sur le turquoise clair) : insuffisant pour WCAG 2.2 (3:1 minimum pour
     un indicateur non textuel). L'encre tient 14:1 à 18:1 sur crème, blanc,
     sable ET turquoise, et 5,2:1 sur le rouge-orangé du bandeau CTA. */
  --webfaya-focus: #0B0B0E;
  --webfaya-yellow: #FFC400;
  --webfaya-white: #FFFDF5;
  --webfaya-sand: #FDF0DC;

  --radius-card: 24px;
  --radius-button: 999px;

  /* Mouvement partagé : une seule courbe et deux ombres pour tout le site,
     pour que cartes, boutons et liens réagissent de la même façon. */
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --lift-shadow: 0 10px 26px rgba(11, 11, 14, .12);
  --lift-shadow-strong: 0 16px 34px rgba(11, 11, 14, .18);
  --container: 1240px;
  --space-section: clamp(72px, 8vw, 128px);

  --title-xl: clamp(3.4rem, 8.4vw, 9rem);
  --title-lg: clamp(2.6rem, 6vw, 6.4rem);
  --title-md: clamp(1.9rem, 3vw, 3.2rem);
  --text-lg: clamp(1.05rem, 1.4vw, 1.3rem);

  --font-display: "Bowlby One", "Archivo Black", Impact, "Haettenschweiler", sans-serif;
  --font-text: "Inter", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --header-h: 78px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--webfaya-cream);
  color: var(--webfaya-ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, h3 { margin: 0; font-weight: 400; }

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

.sr-only {
  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: 12px; top: -100px; z-index: 999;
  background: var(--webfaya-ink); color: var(--webfaya-white);
  padding: 12px 18px; border-radius: 12px; font-weight: 600;
  text-decoration: none; transition: top .18s ease;
}
.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 3px solid var(--webfaya-focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* =========================================================
   Typographie partagée
   ========================================================= */
.eyebrow {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--webfaya-orange-deep);
  margin-bottom: 14px;
}

.section-title,
.hero-title,
.approche-title,
.cta-title,
.card-title,
.stat-value,
.logo,
.benefit h2 {
  font-family: var(--font-display);
  letter-spacing: -0.035em;
  line-height: .98;
  font-weight: 400;
}

.section-title {
  font-size: clamp(1.9rem, 3.7vw, 3.6rem);
  letter-spacing: -0.045em;
  line-height: .98;
  margin-bottom: clamp(32px, 4vw, 56px);
}
@media (min-width: 721px) {
  .section-title span { display: block; }
}

/* Soulignement (forme CSS simple, pas un doodle).
   Il était turquoise : c'était le dernier élément froid d'une page
   désormais entièrement chaude, et il tirait l'œil sans raison. */
.underline {
  display: block;
  width: clamp(110px, 22%, 200px);
  height: 10px;
  margin-top: .18em;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--webfaya-orange), var(--webfaya-yellow));
}

/* =========================================================
   Boutons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--radius-button);
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease,
              transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.btn .arrow { transition: transform .2s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

/* Même geste pour tous les boutons : ils se soulèvent, puis s'enfoncent au clic. */
.btn:hover { transform: translateY(-2px); box-shadow: var(--lift-shadow); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn-orange { background: var(--webfaya-orange-btn); color: var(--webfaya-white); }
.btn-orange:hover { background: var(--webfaya-orange-deep); }

.btn-ink { background: var(--webfaya-ink); color: var(--webfaya-white); }
.btn-ink:hover { background: #0d2743; }

.btn-outline { background: transparent; color: var(--webfaya-ink); border-color: var(--webfaya-ink); }
.btn-outline:hover { background: var(--webfaya-ink); color: var(--webfaya-white); }

.btn-cream { background: var(--webfaya-white); color: var(--webfaya-ink); }
.btn-cream:hover { background: var(--webfaya-cream); }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--webfaya-cream);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-stuck {
  border-bottom-color: rgba(6, 20, 38, .12);
}

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--webfaya-orange);
  text-decoration: none;
  letter-spacing: -0.03em;
  line-height: 1;
}
.logo-sm { font-size: 1.55rem; }

.nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); }
.nav ul { display: flex; gap: clamp(16px, 2.2vw, 30px); }
.nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: .97rem;
  padding: 6px 2px;
  position: relative;
}
.nav ul a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--webfaya-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.nav ul a:hover::after,
.nav ul a:focus-visible::after,
.nav ul a.is-active::after,
.nav ul a[aria-current="page"]::after { transform: scaleX(1); }

/* La section lue se repere aussi a l'encre du lien, pas seulement au trait. */
.nav ul a.is-active { color: var(--webfaya-orange-deep); }

/* La page courante était signalée aux lecteurs d'écran (aria-current) mais
   rien ne la distinguait à l'œil : soulignement permanent + encre pleine. */
.nav ul a[aria-current="page"] { font-weight: 700; }

.nav-cta { padding: 12px 22px; font-size: .95rem; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  border: 2px solid var(--webfaya-ink);
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background-color .2s ease;
}
.nav-toggle:hover { background: rgba(6, 20, 38, .07); }
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 50%; translate: -50% 0;
  width: 20px; height: 2.5px;
  border-radius: 2px;
  background: var(--webfaya-ink);
}
.nav-toggle-bars { top: 50%; margin-top: -1px; }
.nav-toggle-bars::before { left: 0; translate: 0 0; top: -7px; }
.nav-toggle-bars::after  { left: 0; translate: 0 0; top: 7px; }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 72px);
  /* Halo chaud très léger derrière la mascotte : donne de la profondeur au
     premier écran sans ajouter d'image ni masquer le fond crème. */
  position: relative;
  isolation: isolate;
  /* Confine le soleil rayonnant (hero-visual::before) qui déborde à droite. */
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -6% -4% -6% 38%;
  background:
    radial-gradient(46% 46% at 58% 46%, rgba(255, 196, 0, .34), transparent 72%),
    radial-gradient(34% 34% at 82% 70%, rgba(255, 59, 11, .16), transparent 74%);
  pointer-events: none;
}
@media (max-width: 720px) {
  .hero::before { inset: 42% -14% -2% -14%; }
}

/* ---- Le nom, en pleine largeur -------------------------------------
   Il occupe toute la largeur disponible et sert de titre d'affiche.
   La taille est en vw pour qu'il remplisse le cadre à toutes les
   largeurs ; `clamp` borne les extrêmes. */
.mot-geant {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 20.1vw, 24rem);
  line-height: .84;
  letter-spacing: -0.055em;
  color: var(--webfaya-orange);
  text-align: center;
  margin: 0 0 clamp(2px, .8vw, 16px);
  padding-inline: clamp(10px, 1.6vw, 24px);
  /* Un mot aussi large ne doit jamais provoquer de barre horizontale. */
  max-width: 100%;
  overflow: hidden;
  /* Chaque lettre est un inline-block, donc un point de cesure possible :
     sans cela le nom se coupe en deux lignes. */
  white-space: nowrap;
}

/* ---- Lueur de braise -------------------------------------------------
   Le feu de la marque passe par la lumière, jamais par une flamme dessinée.
   Deux halos superposés derrière le nom, très étalés, qui réchauffent le
   haut de page sans jamais passer devant le texte. */
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: clamp(-40px, -2vw, 0px);
  width: min(120%, 1500px);
  aspect-ratio: 2.6;
  transform: translateX(-50%);
  background:
    radial-gradient(52% 58% at 50% 42%, rgba(255, 59, 11, .20), transparent 70%),
    radial-gradient(34% 44% at 50% 30%, rgba(255, 196, 0, .26), transparent 72%);
  pointer-events: none;
}

/* ---- Les lettres du nom montent une à une ---------------------------- */
.mot-geant span {
  display: inline-block;
  animation: faya-lettre .62s var(--ease-out) both;
  animation-delay: calc(var(--i) * 60ms);
}
@keyframes faya-lettre {
  from { opacity: 0; transform: translateY(.22em) rotate(-3deg); }
  to   { opacity: 1; transform: none; }
}

/* ---- Groupe de captures sous le nom ----------------------------------
   Trois cartes qui se chevauchent et penchent en alternance : on voit tout
   de suite trois vrais sites, avant d'avoir lu une seule ligne. Au survol
   de l'ensemble, elles se redressent et s'écartent. */
.hero-cartes {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: clamp(10px, 1.6vw, 26px) auto clamp(26px, 3.4vw, 48px);
  padding-inline: clamp(12px, 2vw, 24px);
}
.hero-carte {
  margin: 0;
  width: clamp(150px, 23vw, 330px);
  border: 3px solid var(--webfaya-ink);
  border-radius: 18px;
  overflow: hidden;
  background: var(--webfaya-white);
  box-shadow: var(--lift-shadow-strong);
  transition: transform .45s var(--ease-out);
}
.hero-carte img { width: 100%; height: auto; display: block; }
.hero-carte-1 { transform: rotate(-7deg) translateY(10px); z-index: 1; }
.hero-carte-2 { transform: rotate(1.5deg) scale(1.08); z-index: 3; margin-inline: clamp(-46px, -4.4vw, -18px); }
.hero-carte-3 { transform: rotate(7deg) translateY(10px); z-index: 2; }

.hero-cartes:hover .hero-carte-1 { transform: rotate(-3deg) translate(-14px, 2px); }
.hero-cartes:hover .hero-carte-2 { transform: rotate(0deg) scale(1.1) translateY(-6px); }
.hero-cartes:hover .hero-carte-3 { transform: rotate(3deg) translate(14px, 2px); }

/* Sous 760px, trois captures côte à côte ne montrent plus rien :
   on n'en garde qu'une, centrée et lisible. */
@media (max-width: 760px) {
  .hero-carte-1,
  .hero-carte-3 { display: none; }
  .hero-carte-2 {
    width: min(76vw, 340px);
    margin-inline: 0;
    transform: rotate(-1.5deg);
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: 58fr 42fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  /* Respiration entre le groupe de captures et la promesse. */
  margin-top: clamp(4px, 1vw, 16px);
}

.hero-title {
  /* Volontairement en dessous de --title-xl : le mot géant au-dessus porte
     déjà l’échelle, et à pleine taille le titre chevauchait la mascotte. */
  font-size: clamp(2.5rem, 5.4vw, 5.2rem);
  letter-spacing: -0.045em;
  line-height: .92;
  margin-bottom: clamp(22px, 2.6vw, 34px);
}
.hero-title span { display: block; }
.hero-title .l1 { color: var(--webfaya-orange); }
.hero-title .l2,
.hero-title .l3 { color: var(--webfaya-ink); }
.hero-title .l3 { position: relative; }

.hero-text {
  font-size: var(--text-lg);
  max-width: 34em;
  margin-bottom: clamp(26px, 3vw, 38px);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 320px;
}
/* Soleil qui rayonne derrière la cigale : rayons en conic-gradient, estompés
   en anneau par un masque radial, en rotation très lente. Renforce l'univers
   solaire de la mascotte et fait écho au soleil des sites Torito/Capoeira. */
.hero-visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(126%, 640px);
  aspect-ratio: 1;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  /* Rayons nettement atténués : sous le groupe de captures, la couronne
     jaune pleine puissance faisait concurrence au nom en pleine largeur. */
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255, 196, 0, .26) 0deg 5deg, transparent 5deg 20deg);
  border-radius: 50%;
  -webkit-mask: radial-gradient(closest-side, transparent 30%, #000 46%, #000 58%, transparent 74%);
          mask: radial-gradient(closest-side, transparent 30%, #000 46%, #000 58%, transparent 74%);
  animation: sun-rays 90s linear infinite;
  pointer-events: none;
}
@keyframes sun-rays { to { transform: translate(-50%, -50%) rotate(360deg); } }

.cigale-hero {
  position: relative;
  z-index: 1;
  /* Réduite : le groupe de captures porte désormais la preuve, la mascotte
     accompagne la promesse au lieu de la dominer. */
  width: min(92%, 430px);
  height: auto;
}

.doodle { position: absolute; z-index: 2; pointer-events: none; user-select: none; }

.doodle-hero-arrow {
  width: clamp(80px, 9vw, 126px);
  top: -8%;
  left: -8%;
  transform: rotate(20deg);
  opacity: .95;
}
.doodle-hero-spark {
  width: clamp(42px, 5vw, 68px);
  right: 2%;
  bottom: 14%;
}

/* Flottement de la cigale */
@keyframes webfaya-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.float { animation: webfaya-float 6s ease-in-out infinite; }

/* =========================================================
   Bénéfices
   ========================================================= */
/* Bande de bénéfices : des filets fins la détachent du hero et de la bande
   turquoise qui suit, sans ajouter un troisième aplat de couleur. */
.benefits { padding-block: clamp(36px, 4.5vw, 64px); }

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
}

/* Cartes bénéfices : pastille ronde colorée + picto, dans l'esprit solaire
   de la cigale. Chaque carte porte sa couleur d'accent via --b-accent. */
.benefit {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2vw, 26px);
  background: var(--webfaya-white);
  border: 2px solid var(--webfaya-ink);
  border-radius: var(--radius-card);
  box-shadow: 6px 6px 0 var(--b-accent, var(--webfaya-ink));
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.benefit-yellow { --b-accent: var(--webfaya-yellow); }
.benefit-orange { --b-accent: var(--webfaya-orange); }
.benefit-aqua   { --b-accent: var(--webfaya-aqua-strong); }
.benefit-ink    { --b-accent: var(--webfaya-ink); }
.benefit:hover {
  transform: translate(-2px, -2px);
  box-shadow: 9px 9px 0 var(--b-accent, var(--webfaya-ink));
}

.benefit-ico {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--b-accent);
  color: var(--webfaya-ink);
  border: 2px solid var(--webfaya-ink);
  transition: transform .3s var(--ease-out);
}
.benefit-yellow .benefit-ico { color: var(--webfaya-ink); }
.benefit-orange .benefit-ico { color: var(--webfaya-white); }
.benefit-aqua   .benefit-ico { color: var(--webfaya-ink); }
.benefit-ink    .benefit-ico { color: var(--webfaya-yellow); }
.benefit-ico svg { width: 26px; height: 26px; }
.benefit:hover .benefit-ico { transform: rotate(-8deg) scale(1.08); }

.benefit h2 {
  font-size: clamp(1.12rem, 1.4vw, 1.35rem);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.benefit p { font-size: .98rem; line-height: 1.45; color: rgba(6, 20, 38, .82); }

@media (max-width: 1080px) {
  .benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 560px) {
  .benefits-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Stats
   ========================================================= */
.stats-section { padding-block: clamp(28px, 3.5vw, 48px); }

.stats-band {
  background: var(--webfaya-aqua);
  border-radius: var(--radius-card);
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
}

.stat { padding-left: clamp(16px, 2vw, 36px); border-left: 2px solid rgba(6, 20, 38, .16); }
.stat:first-child { border-left: 0; padding-left: 0; }

.stat-value {
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  color: var(--webfaya-orange-deep);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 12px;
}
.stat-label { font-size: 1.02rem; max-width: 20em; }

/* Mention de source : discrète mais lisible (4,8:1), alignée sur la bande. */
.stats-note {
  margin-top: 12px;
  padding-inline: clamp(24px, 4vw, 56px);
  font-size: .82rem;
  letter-spacing: .04em;
  color: rgba(6, 20, 38, .68);
  text-align: right;
}

/* =========================================================
   Bandeau défilant
   Une bande d'encre qui coupe la page et fait respirer le rythme
   entre deux sections claires. Animation CSS pure : pas de script,
   donc rien à réparer si le JS ne tourne pas.
   ========================================================= */
.bandeau {
  background: var(--webfaya-ink);
  color: var(--webfaya-cream);
  border-block: 3px solid var(--webfaya-ink);
  overflow: hidden;
  padding-block: clamp(12px, 1.4vw, 20px);
}
.bandeau-piste {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 52px);
  width: max-content;
  animation: bandeau-defile 34s linear infinite;
}
.bandeau-piste span {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.1vw, 2.1rem);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
/* Un mot sur deux en orange : la bande reste lisible et rythmée. */
.bandeau-piste span:nth-child(odd) { color: var(--webfaya-orange); }
/* Le contenu est dupliqué dans le HTML : déplacer la piste de la moitié
   de sa largeur ramène exactement au point de départ. */
@keyframes bandeau-defile {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - clamp(12px, 1.5vw, 26px))); }
}

/* =========================================================
   Services
   ========================================================= */
/* Aplat d'encre pleine largeur : c'est la respiration sombre de la page,
   entre le hero crème et l'approche crème. Les cartes restent claires,
   donc le contraste interne ne change pas. */
.services {
  padding-block: var(--space-section);
  background: var(--webfaya-ink);
  color: var(--webfaya-cream);
}
.services .eyebrow { color: var(--webfaya-yellow); }
.services .section-title { color: var(--webfaya-cream); }
/* Les cartes gardent leur fond clair : sans cette reprise, le creme de la
   section descendrait dedans et donnerait du texte creme sur turquoise,
   soit 1,24:1. */
.services .card { color: var(--webfaya-ink); }

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
}

.card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-card);
  padding: clamp(22px, 2vw, 30px);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.card-aqua { background: var(--webfaya-aqua); }
.card-sand { background: var(--webfaya-sand); }
.card:hover,
.card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--lift-shadow);
}
.card-icon,
.card-icon-css { transition: transform .3s var(--ease-out); }
.card:hover .card-icon,
.card:hover .card-icon-css { transform: translateY(-4px) rotate(-3deg); }

.card-num {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .1em;
  color: var(--webfaya-orange-deep);
  margin-bottom: 8px;
}

.card-title {
  font-size: clamp(1.3rem, 1.65vw, 1.7rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin-bottom: 14px;
}

.card-icon {
  width: clamp(96px, 9vw, 132px);
  height: auto;
  margin: 4px 0 18px;
}

.card-text { font-size: 1rem; margin-bottom: 22px; }

.card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
}
.card-link-icon {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 999px;
  background: var(--webfaya-ink);
  color: var(--webfaya-white);
  font-size: 1rem;
  flex: 0 0 auto;
  transition: transform .2s ease, background-color .2s ease;
}
.card-link:hover .card-link-icon { transform: translateX(3px); background: var(--webfaya-orange-btn); }

/* Icône CSS (formes géométriques, aucune illustration redessinée) */
.card-icon-css {
  position: relative;
  display: block;
  width: clamp(96px, 9vw, 132px);
  aspect-ratio: 1 / 1;
  margin: 4px 0 18px;
  flex: 0 0 auto;
}
/* La « page » */
.card-icon-css::before {
  content: "";
  position: absolute;
  left: 0; top: 5%;
  width: 74%; height: 88%;
  background: var(--webfaya-white);
  border: 2.5px solid var(--webfaya-ink);
  border-radius: 16px;
  /* Ombre plate, comme les captures de la page Réalisations : l'icône CSS
     prend la même épaisseur visuelle que les trois icônes illustrées. */
  box-shadow: 5px 6px 0 var(--webfaya-ink);
}
/* Le « clic » / la cible */
.card-icon-css::after {
  content: "";
  position: absolute;
  right: 2%; bottom: 2%;
  width: 34%; aspect-ratio: 1 / 1;
  background: var(--webfaya-aqua);
  border: 2.5px solid var(--webfaya-ink);
  border-radius: 999px;
}
/* Les lignes de contenu + le bouton */
.card-icon-css i {
  position: absolute;
  left: 10%; top: 20%;
  width: 44%; height: 7%;
  min-height: 5px;
  background: var(--webfaya-ink);
  border-radius: 999px;
}
.card-icon-css i::before,
.card-icon-css i::after {
  content: "";
  position: absolute;
  left: 0;
  border-radius: 999px;
}
.card-icon-css i::before {
  top: 230%;
  width: 78%; height: 100%;
  background: rgba(6, 20, 38, .3);
}
.card-icon-css i::after {
  top: 560%;
  width: 100%; height: 160%;
  background: var(--webfaya-orange);
}

/* =========================================================
   Pages intérieures — en-tête de page
   ========================================================= */
.page-hero {
  padding-top: clamp(32px, 4.5vw, 64px);
  padding-bottom: clamp(28px, 3.5vw, 48px);
}

.page-hero-grid {
  display: grid;
  grid-template-columns: 62fr 38fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

.page-title {
  font-family: var(--font-display);
  font-size: var(--title-lg);
  letter-spacing: -0.045em;
  line-height: .94;
  font-weight: 400;
  margin-bottom: clamp(18px, 2.2vw, 28px);
}
.page-title span { display: block; }
.page-title .orange { color: var(--webfaya-orange); }

.page-lead {
  font-size: var(--text-lg);
  max-width: 36em;
}

.page-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-hero-visual img { width: min(100%, 320px); }

/* Bandeau d’honnêteté / mention */
.notice {
  display: block;
  margin-top: clamp(20px, 2.4vw, 28px);
  padding: 14px 18px;
  border-left: 4px solid var(--webfaya-aqua-strong);
  border-radius: 0 12px 12px 0;
  background: var(--webfaya-sand);
  font-size: .92rem;
  color: rgba(6, 20, 38, .84);
  max-width: 58em;
}

/* =========================================================
   Réalisations
   ========================================================= */
.cases { padding-bottom: var(--space-section); }

.case {
  display: grid;
  grid-template-columns: 48fr 52fr;
  align-items: center;
  gap: clamp(22px, 3.4vw, 52px);
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--radius-card);
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.case:last-child { margin-bottom: 0; }
.case-aqua { background: var(--webfaya-aqua); }
.case-sand { background: var(--webfaya-sand); }

/* L'alternance gauche/droite est déclarée en HTML (.case-reverse) et non
   déduite de la position : la page peut accueillir des intertitres de
   groupe sans que les cartes se retournent toutes seules. */
.case-reverse .case-media { order: 2; }

.case-media { display: flex; justify-content: center; }
.case-media img { width: min(100%, 260px); }

.case-tag {
  display: inline-block;
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--webfaya-ink);
  background: var(--webfaya-white);
  border: 2px solid var(--webfaya-ink);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 14px;
}

.case-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.1vw, 2.1rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-bottom: 16px;
}

.case-block { margin-bottom: 14px; }
.case-block-title {
  margin: 0 0 4px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--webfaya-orange-deep);
}
.case-block p { font-size: 1rem; }

.case-list-check { display: grid; gap: 6px; margin-top: 4px; }
.case-list-check li,
.price-includes li {
  position: relative;
  padding-left: 26px;
  font-size: 1rem;
}
.case-list-check li::before,
.price-includes li::before {
  content: "";
  position: absolute;
  left: 0; top: .52em;
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--webfaya-orange);
}

/* =========================================================
   Tarifs
   ========================================================= */
.pricing { padding-bottom: clamp(40px, 5vw, 72px); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 28px);
}

.price-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-card);
  padding: clamp(24px, 2.4vw, 34px);
  border: 2px solid var(--webfaya-ink);
  background: var(--webfaya-white);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.price-card:hover,
.price-card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--lift-shadow);
}
.price-card.is-highlight { background: var(--webfaya-aqua); }

.price-num {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .1em;
  color: var(--webfaya-orange-deep);
  margin-bottom: 8px;
}

.price-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.8vw, 1.8rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin-bottom: 12px;
}

.price-amount {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.6vw, 2.5rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--webfaya-orange-deep);
  margin-bottom: 4px;
}
.price-unit {
  font-size: .88rem;
  font-weight: 600;
  color: rgba(6, 20, 38, .7);
  margin-bottom: 16px;
}

.price-text { font-size: 1rem; margin-bottom: 16px; }

.price-includes { display: grid; gap: 6px; margin-bottom: 24px; }

.price-card .btn { margin-top: auto; align-self: flex-start; }

.pricing-note {
  margin-top: clamp(20px, 2.4vw, 30px);
  font-size: .92rem;
  color: rgba(6, 20, 38, .72);
  max-width: 60em;
}

/* =========================================================
   FAQ
   ========================================================= */
.faq { padding-bottom: var(--space-section); }

.faq-list { display: grid; gap: 12px; max-width: 900px; }

.faq-item {
  border: 2px solid var(--webfaya-ink);
  border-radius: 18px;
  background: var(--webfaya-white);
  overflow: hidden;
  transition: box-shadow .22s var(--ease-out), background-color .22s ease;
}
.faq-item:hover { box-shadow: var(--lift-shadow); }
/* Une question ouverte se voit d'un coup d'œil dans la pile. */
.faq-item[open] { background: var(--webfaya-sand); box-shadow: var(--lift-shadow); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
  transition: color .2s ease;
}
.faq-item summary:hover { color: var(--webfaya-orange-deep); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 14px; height: 14px;
  border-right: 3px solid var(--webfaya-orange);
  border-bottom: 3px solid var(--webfaya-orange);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq-item summary:focus-visible { outline: 3px solid var(--webfaya-focus); outline-offset: -3px; }

.faq-answer { padding: 0 22px 20px; font-size: 1rem; }

/* L'ouverture native d'un <details> est brutale : la reponse se pose
   doucement. Animation pure CSS, donc sans risque de rester masquee. */
@keyframes webfaya-deplie {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.faq-item[open] .faq-answer { animation: webfaya-deplie .3s var(--ease-out) both; }
.faq-answer p + p { margin-top: 10px; }

/* =========================================================
   Approche
   ========================================================= */
.approche { padding-bottom: var(--space-section); }

.approche-grid {
  display: grid;
  grid-template-columns: 54fr 46fr;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}

.approche-title {
  font-size: var(--title-md);
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.approche-title span { display: block; }
.approche-title .ink { color: var(--webfaya-ink); }
.approche-title .orange { color: var(--webfaya-orange); position: relative; }

.approche-text {
  font-size: var(--text-lg);
  max-width: 34em;
  margin-bottom: clamp(24px, 2.6vw, 32px);
}

.approche-visual { position: relative; display: flex; justify-content: center; }
.village { width: min(100%, 540px); height: auto; }

.sticker-surmesure {
  position: absolute;
  width: clamp(88px, 11vw, 140px);
  top: -4%;
  right: 0;
  transform: rotate(8deg);
}

/* =========================================================
   Confiance — « Pourquoi nous faire confiance »
   Uniquement des engagements vérifiables : aucun avis, aucune note,
   aucun compteur. Les cartes reprennent la bordure encre des offres.
   ========================================================= */
.trust { padding-bottom: var(--space-section); }

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
}
.trust-grid > * { min-width: 0; }

.trust-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--webfaya-white);
  border: 2px solid var(--webfaya-ink);
  border-radius: var(--radius-card);
  padding: clamp(20px, 2vw, 28px);
  /* Même geste que les cartes Services et Tarifs : le site réagit partout
     de la même façon au survol. */
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out),
              background-color .25s ease;
}
.trust-item:hover,
.trust-item:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--lift-shadow);
  background: var(--webfaya-sand);
}

.trust-item h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.35vw, 1.3rem);
  letter-spacing: -0.03em;
  line-height: 1.06;
  position: relative;
  padding-left: 22px;
}
.trust-item h3::before {
  content: "";
  position: absolute;
  left: 0; top: .3em;
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--webfaya-orange);
  transition: transform .25s var(--ease-out);
}
.trust-item:hover h3::before { transform: rotate(45deg) scale(1.15); }
/* Puces cyclées dans les 4 teintes de la charte (écho aux cartes bénéfices),
   pour donner de la couleur à la section sans changer sa structure sobre. */
.trust-item:nth-child(4n+1) h3::before { background: var(--webfaya-orange); }
.trust-item:nth-child(4n+2) h3::before { background: var(--webfaya-aqua-strong); }
.trust-item:nth-child(4n+3) h3::before { background: var(--webfaya-yellow); }
.trust-item:nth-child(4n+4) h3::before { background: var(--webfaya-ink); }

.trust-item p { font-size: .98rem; color: rgba(6, 20, 38, .84); }

.trust-link {
  margin-top: auto;
  padding-top: 6px;
  font-weight: 700;
  font-size: .95rem;
  color: var(--webfaya-orange-deep);
  text-underline-offset: 3px;
}
.trust-link .arrow { display: inline-block; transition: transform .2s ease; }
.trust-link:hover .arrow { transform: translateX(3px); }

.trust-note {
  margin-top: clamp(20px, 2.4vw, 30px);
  font-size: .92rem;
  color: rgba(6, 20, 38, .72);
  max-width: 60em;
}

@media (max-width: 1080px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .trust-grid { grid-template-columns: 1fr; }
  .trust-item { padding: clamp(18px, 5vw, 26px); }
}

/* =========================================================
   CTA final
   ========================================================= */
.cta-final {
  background: var(--webfaya-orange);
  color: var(--webfaya-white);
  padding-block: clamp(46px, 5.5vw, 78px);
}

.cta-final { position: relative; overflow: hidden; }
.cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 48px);
  position: relative;
  z-index: 1;
}
.cta-text { flex: 1 1 380px; }

/* La cigale au panneau : jaune sur fond orange se fondrait, on la détache
   sur un grand disque crème (clin d'œil au soleil du Sud). */
.cta-visual {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(200px, 22vw, 280px);
}
.cta-visual::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 118%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--webfaya-cream);
  border: 3px solid var(--webfaya-ink);
}
.cta-cigale {
  position: relative;
  width: 100%;
  height: auto;
  transform: rotate(-3deg);
  transition: transform .3s var(--ease-out);
}
.cta-final:hover .cta-cigale { transform: rotate(0deg) scale(1.03); }
@media (max-width: 720px) {
  .cta-visual { display: none; }
}

.cta-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.1vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
}
@media (min-width: 721px) {
  .cta-title span { display: block; }
}

.cta-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
/* Encre sur le rouge-orangé : 6,2:1. Le blanc n'atteignait que 3,5:1 à cette taille. */
.cta-sub { font-size: .95rem; font-weight: 600; color: var(--webfaya-ink); }
.cta-sub a { color: var(--webfaya-ink); font-weight: 700; text-underline-offset: 3px; }
.cta-final :focus-visible { outline-color: var(--webfaya-ink); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { padding-block: clamp(40px, 5vw, 64px) 28px; }

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.footer-brand { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer-tagline { font-size: .95rem; color: rgba(6, 20, 38, .75); max-width: 32em; }

.footer-nav ul { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 26px); }
/* Même soulignement animé que la navigation d'en-tête. */
.footer-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  position: relative;
  padding-bottom: 3px;
  transition: color .2s ease;
}
.footer-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--webfaya-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s var(--ease-out);
}
.footer-nav a:hover { color: var(--webfaya-orange-deep); }
.footer-nav a:hover::after,
.footer-nav a:focus-visible::after,
.footer-nav a[aria-current="page"]::after { transform: scaleX(1); }
.footer-nav a[aria-current="page"] { font-weight: 700; }

.footer-legal {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(6, 20, 38, .12);
  font-size: .85rem;
  color: rgba(6, 20, 38, .6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
}

/* Ligne discrète vers les pages légales — volontairement en retrait
   de la navigation principale du pied de page. */
.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.footer-legal-links a {
  font-weight: 600;
  color: rgba(6, 20, 38, .72);
  text-underline-offset: 3px;
}
.footer-legal-links a:hover { color: var(--webfaya-orange-deep); }

/* =========================================================
   Reveal au scroll
   ========================================================= */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---- Entree du hero au chargement -------------------------------------
   Animation CSS pure, volontairement non conditionnee a JavaScript : avec
   `both`, l'element part invisible et finit visible quoi qu'il arrive. Si
   un script echouait, rien ne resterait bloque en opacity:0. Le bloc
   « mouvement reduit » plus bas ramene la duree a zero, donc tout
   s'affiche instantanement pour qui le demande. */
@keyframes webfaya-entree {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.js .hero-copy > *,
.js .hero-visual {
  animation: webfaya-entree .55s var(--ease-out) both;
}
.js .hero-copy > *:nth-child(1) { animation-delay: .04s; }
.js .hero-copy > *:nth-child(2) { animation-delay: .12s; }
.js .hero-copy > *:nth-child(3) { animation-delay: .20s; }
.js .hero-copy > *:nth-child(4) { animation-delay: .28s; }
.js .hero-copy > *:nth-child(5) { animation-delay: .36s; }
.js .hero-visual                { animation-delay: .18s; }

/* ---- Reveals directionnels --------------------------------------------
   Les etudes de cas arrivent du cote ou elles sont posees : le mouvement
   suit la mise en page au lieu de la contredire. */
.js .case.reveal              { transform: translateY(14px) translateX(-16px); }
.js .case.case-reverse.reveal { transform: translateY(14px) translateX(16px); }
.js .case.reveal.is-visible   { transform: none; }

/* ---- Titre du hero, ligne par ligne -----------------------------------
   Le <h1> n'anime plus en bloc : chaque ligne monte a son tour, puis le
   trait aqua se dessine. Animations CSS avec `both` : elles aboutissent
   toujours, meme si un script echoue. */
.js .hero-copy > .hero-title { animation: none; opacity: 1; transform: none; }
.js .hero-title span {
  display: block;
  animation: webfaya-entree .6s var(--ease-out) both;
}
.js .hero-title .l1 { animation-delay: .10s; }
.js .hero-title .l2 { animation-delay: .20s; }
.js .hero-title .l3 { animation-delay: .30s; }

@keyframes webfaya-trait {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.js .hero-title .underline {
  transform-origin: left center;
  animation: webfaya-trait .5s var(--ease-out) .58s both;
}

/* ---- Titres de section : les lignes arrivent en cascade ---------------
   Le titre lui-meme ne bouge plus ; ce sont ses lignes qui montent. */
.js .titre-anim.reveal { opacity: 1; transform: none; }
.js .titre-anim.reveal > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.js .titre-anim.reveal.is-visible > span { opacity: 1; transform: none; }
.js .titre-anim.reveal > span:nth-child(2) { transition-delay: .10s; }
.js .titre-anim.reveal > span:nth-child(3) { transition-delay: .20s; }

/* ---- Captures d'ecran : volet qui s'ouvre -----------------------------
   L'image se decouvre de gauche a droite quand la carte entre en vue.
   Un simple clip-path, sans deformation ni effet de profondeur. */
.js .case.reveal .case-shot {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .75s var(--ease-out) .12s;
}
.js .case.reveal.is-visible .case-shot { clip-path: inset(0 0 0 0); }

/* ---- Captures : leger zoom au survol de la carte ---------------------
   Le cadre garde ses coins arrondis, l'image grandit a l'interieur. */
.case-media picture { overflow: hidden; border-radius: inherit; display: block; }
.case-shot { transition: transform .5s var(--ease-out); will-change: transform; }
.case:hover .case-shot,
.case:focus-within .case-shot { transform: scale(1.035); }

/* ---- Logo : la cigale fremit quand on la survole --------------------- */
.logo { transition: transform .25s var(--ease-out); display: inline-block; }
.logo:hover, .logo:focus-visible { transform: rotate(-2deg) scale(1.03); }

/* ---- Chiffres cles : ils se posent avant de defiler ------------------ */
.js .stats-band .stat { transition: transform .45s var(--ease-out), opacity .45s var(--ease-out); }
.js .reveal.is-visible .stats-band .stat { transform: none; opacity: 1; }

/* ---- Listes a puces : les items se posent l'un apres l'autre ---------- */
.js .reveal .case-list-check > li {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.js .reveal.is-visible .case-list-check > li { opacity: 1; transform: none; }
.js .reveal.is-visible .case-list-check > li:nth-child(1) { transition-delay: .18s; }
.js .reveal.is-visible .case-list-check > li:nth-child(2) { transition-delay: .28s; }
.js .reveal.is-visible .case-list-check > li:nth-child(3) { transition-delay: .38s; }
.js .reveal.is-visible .case-list-check > li:nth-child(4) { transition-delay: .48s; }

/* ---- Icones de service : petit rebond a l'arrivee --------------------- */
@keyframes webfaya-pop {
  0%   { transform: scale(.82) rotate(-6deg); opacity: 0; }
  60%  { transform: scale(1.04) rotate(2deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.js .card.reveal.is-visible .card-icon,
.js .card.reveal.is-visible .card-icon-css {
  animation: webfaya-pop .5s var(--ease-out) .16s both;
}

/* ---- Boutons : le fond se remplit depuis la gauche -------------------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .10);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s var(--ease-out);
}
.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); }

/* ---- Jauge de lecture ------------------------------------------------
   Un filet orange sous l'en-tete, large comme la progression dans la page.
   Purement additif : il n'existe que si le script le remplit. */
.jauge-lecture {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--webfaya-orange);
  z-index: 60;
  pointer-events: none;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 56fr 44fr; }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .benefit:nth-child(odd) { border-left: 0; padding-left: 0; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .doodle-hero-arrow { display: none; }
}

@media (max-width: 960px) {
  .case { grid-template-columns: 1fr; }
  .case-media { order: 0 !important; }
  .case-media img { width: min(60%, 200px); }
  .pricing-grid { grid-template-columns: 1fr; }
  .page-hero-grid { grid-template-columns: 1fr; }
  .page-hero-visual { order: -1; }
  .page-hero-visual img { width: min(52%, 220px); }
}

@media (max-width: 900px) {
  :root { --header-h: 68px; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: var(--webfaya-cream);
    border-bottom: 1px solid rgba(6, 20, 38, .12);
    padding: 18px clamp(20px, 4vw, 40px) 26px;
    box-shadow: 0 12px 24px rgba(6, 20, 38, .08);
    /* Sécurité sur les très petits écrans / paysage : le menu reste atteignable */
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav ul { flex-direction: column; gap: 4px; }
  .nav ul a { display: block; padding: 12px 0; font-size: 1.05rem; }
  .nav-cta { justify-content: center; margin-top: 10px; }
  .nav-toggle { display: block; }

  .approche-grid { grid-template-columns: 1fr; }
  .approche-visual { order: 2; max-width: 460px; margin-inline: auto; }
  .stats-band { grid-template-columns: 1fr; gap: 24px; }
  .stat { border-left: 0; padding-left: 0; border-top: 2px solid rgba(6, 20, 38, .16); padding-top: 20px; }
  .stat:first-child { border-top: 0; padding-top: 0; }
  .stats-note { text-align: left; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { order: 1; }
  .hero-visual { order: 2; min-height: 0; margin-top: 8px; }
  .cigale-hero { width: min(86%, 380px); }
  .doodle-hero-spark { right: 4%; bottom: 8%; }

  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }

  .benefits-grid { grid-template-columns: 1fr; row-gap: 22px; }
  .benefit { border-left: 0; padding-left: 0; }

  .cards { grid-template-columns: 1fr; }
  .card-icon { width: 120px; }
  .card-icon-css { width: 120px; }

  /* Titres de page : les lignes se replient, on aère un peu */
  .page-title { line-height: 1.06; }
  .case { padding: clamp(20px, 5vw, 28px); }
  .price-card { padding: clamp(20px, 5vw, 28px); }
  .faq-item summary { font-size: 1rem; padding: 16px 18px; }
  .faq-answer { padding: 0 18px 18px; }

  .cta-inner { flex-direction: column; align-items: flex-start; }

  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* Les enfants de grille ne doivent jamais être poussés par leur contenu
   (min-width: auto par défaut) : sans ça, un mot long en police display
   élargit la colonne et déborde de l'écran sur mobile. */
.hero-grid > *,
.page-hero-grid > *,
.approche-grid > *,
.contact-grid > *,
.cards > *,
.pricing-grid > *,
.benefits-grid > *,
.stats-band > *,
.case > * { min-width: 0; }

/* « ressemblent. » en Bowlby One ne tient pas sous ~460 px à la taille
   minimale du clamp : on passe sur une taille purement fluide. */
@media (max-width: 460px) {
  .hero-title { font-size: min(11.2vw, 3.3rem); }
}

/* =========================================================
   Section Contact (formulaire mailto)
   ========================================================= */
.contact-section {
  padding-block: var(--space-section);
  background: var(--webfaya-cream);
}

.contact-grid {
  display: grid;
  grid-template-columns: 44fr 56fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.contact-intro .section-title { margin-bottom: 18px; }
.contact-intro p { font-size: var(--text-lg); }

.contact-points {
  display: grid;
  gap: 8px;
  margin-top: 22px;
  font-size: .98rem;
  font-weight: 600;
}
.contact-points li { position: relative; padding-left: 26px; }
.contact-points li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--webfaya-orange);
}
.contact-points a { color: var(--webfaya-orange-deep); font-weight: 700; }

.contact-mascotte {
  width: min(52%, 200px);
  margin-top: 28px;
}

.contact-form {
  background: var(--webfaya-white);
  border: 3px solid var(--webfaya-ink);
  border-radius: var(--radius-card);
  padding: clamp(22px, 3vw, 38px);
  display: grid;
  gap: 18px;
}

.field { display: grid; gap: 7px; align-content: start; }

.field label {
  font-weight: 700;
  font-size: .95rem;
  transition: color .2s ease;
}
/* Le champ en cours de saisie se signale aussi par son étiquette : sur un
   questionnaire de 44 questions, on garde le fil beaucoup plus facilement. */
.field:focus-within > label { color: var(--webfaya-orange-deep); }
/* L'étoile « champ obligatoire » est un petit glyphe : il lui faut le
   rouge foncé (4,5:1 minimum). Le --webfaya-orange de la charte ne tenait
   que 3,5:1 sur blanc et 3,2:1 sur le sable des sections légales. */
.field .req,
.choice-legend .req { color: var(--webfaya-orange-deep); }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--webfaya-ink);
  background: var(--webfaya-cream);
  /* .5 d'encre = 3,4:1 sur le fond du champ et 3,2:1 sur la carte blanche :
     la bordure reste perceptible (WCAG 2.2, 1.4.11). En dessous, le champ
     n'était plus identifiable, les deux fonds étant presque identiques. */
  border: 2px solid rgba(6, 20, 38, .5);
  border-radius: 14px;
  padding: 13px 16px;
  transition: border-color .2s ease, background-color .2s ease;
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.55; }

/* Le <select> perd sa flèche native avec appearance:none — on la redessine,
   sinon rien n'indique qu'il s'agit d'une liste déroulante. */
.field select {
  appearance: none;
  cursor: pointer;
  padding-right: 46px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--webfaya-ink) 50%),
    linear-gradient(135deg, var(--webfaya-ink) 50%, transparent 50%);
  background-position:
    calc(100% - 24px) calc(50% - 2px),
    calc(100% - 18px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(6, 20, 38, .7); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 3px solid var(--webfaya-focus);
  outline-offset: 2px;
  border-color: var(--webfaya-ink);
  background: var(--webfaya-white);
}

.field-error {
  font-size: .88rem;
  font-weight: 600;
  color: #b9260a;
  min-height: 0;
}
.field-error:empty { display: none; }

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #b9260a; }

.contact-form .btn { justify-content: center; }

.form-note {
  font-size: .86rem;
  color: rgba(6, 20, 38, .7);
}

.form-status {
  font-size: .95rem;
  font-weight: 700;
  border-radius: 14px;
  padding: 14px 16px;
  border: 2px solid transparent;
}
.form-status:empty { display: none; }
.form-status.is-ok { background: var(--webfaya-aqua); border-color: var(--webfaya-ink); color: var(--webfaya-ink); }
.form-status.is-error { background: #ffe6e0; border-color: #b9260a; color: #7d1a06; }

/* Fallback si le mailto n'a pas pu s'ouvrir */
.form-fallback { font-size: .92rem; margin-top: 8px; }
.form-fallback a { font-weight: 700; color: var(--webfaya-orange-deep); }

@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-mascotte { display: none; }
}

/* =========================================================
   Réalisations — liens vers les sites réels
   ========================================================= */
/* Carte inversée : le texte garde la colonne large */
.case-reverse { grid-template-columns: 52fr 48fr; }
@media (max-width: 960px) {
  .case-reverse { grid-template-columns: 1fr; }
}

/* Les captures passent par <picture> (WebP + repli JPEG) : l'élément
   <picture> devient l'enfant flex, il doit porter la largeur. */
.case-media picture {
  display: block;
  width: 100%;
  max-width: 640px;
  min-width: 0;
}

.case-media .case-shot {
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top center;
  border-radius: 18px;
  box-shadow: 0 10px 0 rgba(6, 20, 38, .12);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
/* La capture se soulève au survol de la carte : on sent que le site derrière
   est cliquable, sans transformer la carte entière en bouton. */
.case:hover .case-shot {
  transform: translateY(-6px);
  box-shadow: 0 16px 0 rgba(6, 20, 38, .14);
}

.case-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.case-visit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: .98rem;
  text-decoration: none;
  background: var(--webfaya-ink);
  color: var(--webfaya-white);
  border-radius: var(--radius-button);
  padding: 12px 22px;
  transition: background-color .2s ease, transform .2s ease;
}
.case-visit:hover { background: var(--webfaya-orange-btn); transform: translateY(-2px); }
.case-visit .arrow { transition: transform .2s ease; }
.case-visit:hover .arrow { transform: translateX(3px); }

.case-url {
  font-size: .9rem;
  font-weight: 600;
  color: rgba(6, 20, 38, .65);
  word-break: break-all;
}

/* ---------------------------------------------------------
   Intertitres de groupe (page Réalisations)
   Séparent explicitement les projets clients réels des projets
   de démonstration : la distinction ne repose plus seulement
   sur le fond de carte et la pastille.
   --------------------------------------------------------- */
.case-group + .case-group { margin-top: clamp(40px, 5vw, 72px); }

.group-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: clamp(18px, 2.2vw, 26px);
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(6, 20, 38, .16);
}

.group-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.group-count {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--webfaya-orange-deep);
}

.group-note {
  flex: 1 1 100%;
  font-size: .94rem;
  color: rgba(6, 20, 38, .78);
  max-width: 62em;
}

/* ---------------------------------------------------------
   Cartes « démo / concept » — projets de démonstration
   réalisés par le studio, sans client réel associé.
   Traitement volontairement distinct des cartes clients :
   fond blanc + contour pointillé + pastille explicite.
   --------------------------------------------------------- */
.case-demo {
  background: var(--webfaya-white);
  border: 2px dashed rgba(6, 20, 38, .38);
}

.case-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--webfaya-white);      /* 18:1 sur --webfaya-ink */
  background: var(--webfaya-ink);
  border: 2px solid var(--webfaya-ink);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 10px;
}
.case-badge::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 999px;
  background: var(--webfaya-yellow);
}

/* Mention en pied de carte, à la place du bouton « Voir le site » */
.case-demo-note {
  margin-top: 18px;
  padding: 12px 18px;
  border-left: 4px solid var(--webfaya-aqua-strong);
  border-radius: 0 12px 12px 0;
  background: var(--webfaya-sand);
  font-size: .9rem;
  color: rgba(6, 20, 38, .84);
}

/* =========================================================
   Page Brief — questionnaire long
   ========================================================= */
/* Bandeau de progression collé sous le header */
.brief-progress {
  position: sticky;
  top: var(--header-h);
  z-index: 90;
  background: var(--webfaya-cream);
  border-bottom: 1px solid rgba(6, 20, 38, .12);
  padding-block: 10px 12px;
}

.brief-progress-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.brief-progress-track {
  flex: 1 1 140px;
  height: 10px;
  border-radius: 999px;
  background: var(--webfaya-sand);
  border: 2px solid var(--webfaya-ink);
  overflow: hidden;
}
.brief-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--webfaya-aqua-strong);
  transition: width .25s ease;
}
.brief-progress-label {
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.35;
  color: rgba(6, 20, 38, .8);
  /* Peut passer à la ligne sur mobile plutôt que d'être coupé. */
  flex: 1 1 180px;
  min-width: 0;
}

/* Badge « 8 sections · ~10 minutes »
   Composant partagé : sert aussi aux micro-badges de réassurance
   (.trust-badges / .trust-badge) sur l'accueil, les tarifs et le choix de brief. */
.brief-badges,
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(18px, 2.2vw, 26px);
}
.brief-badge,
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .04em;
  background: var(--webfaya-white);
  border: 2px solid var(--webfaya-ink);
  border-radius: 999px;
  padding: 7px 16px;
}
.brief-badge::before,
.trust-badge::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--webfaya-orange);
}

/* Sommaire cliquable */
.brief-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(18px, 2.2vw, 26px);
}
.brief-toc a {
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid rgba(6, 20, 38, .25);
  border-radius: 999px;
  padding: 6px 14px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.brief-toc a:hover { background: var(--webfaya-ink); color: var(--webfaya-white); border-color: var(--webfaya-ink); }

/* Corps du formulaire */
.brief { padding-bottom: var(--space-section); }

.brief-form {
  display: grid;
  gap: clamp(18px, 2.2vw, 28px);
  max-width: 900px;
}

.brief-section {
  background: var(--webfaya-white);
  border: 3px solid var(--webfaya-ink);
  border-radius: var(--radius-card);
  padding: clamp(22px, 3vw, 36px);
  display: grid;
  gap: 18px;
  scroll-margin-top: calc(var(--header-h) + 72px);
  transition: box-shadow .25s var(--ease-out);
}
/* Repère visuel de la section en cours de remplissage. */
.brief-form .brief-section:focus-within { box-shadow: var(--lift-shadow-strong); }
.brief-section.is-legal { background: var(--webfaya-sand); }

.brief-section-head { display: grid; gap: 8px; }

.brief-step {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--webfaya-orange-deep);
}

.brief-section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.1vw, 1.95rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.brief-section-intro {
  font-size: .98rem;
  color: rgba(6, 20, 38, .8);
}

/* Note explicative (RGPD, mentions légales…) */
.brief-note {
  padding: 14px 18px;
  border-left: 4px solid var(--webfaya-aqua-strong);
  border-radius: 0 12px 12px 0;
  background: var(--webfaya-white);
  font-size: .92rem;
  color: rgba(6, 20, 38, .84);
}
.brief-section.is-legal .brief-note { background: var(--webfaya-cream); }

/* Deux champs côte à côte quand il y a la place */
.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.field-hint {
  font-size: .86rem;
  font-weight: 500;
  color: rgba(6, 20, 38, .68);
}

/* Groupes de cases à cocher / boutons radio */
.choice-group { display: grid; gap: 10px; }

.choice-legend {
  font-weight: 700;
  font-size: .95rem;
  padding: 0;
}
.choice-group fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.choice-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--webfaya-cream);
  border: 2px solid rgba(6, 20, 38, .5);
  border-radius: 14px;
  padding: 11px 14px;
  font-size: .97rem;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, transform .2s var(--ease-out);
}
.choice:hover {
  border-color: var(--webfaya-ink);
  background: var(--webfaya-white);
  transform: translateY(-1px);
}
.brief-section.is-legal .choice:hover { background: var(--webfaya-cream); }
.choice input {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin: 1px 0 0;
  accent-color: var(--webfaya-orange-btn);
  cursor: pointer;
}
.choice:has(input:checked) {
  border-color: var(--webfaya-ink);
  background: var(--webfaya-aqua);
}
.choice:has(input:focus-visible) {
  outline: 3px solid var(--webfaya-focus);
  outline-offset: 2px;
}
.brief-section.is-legal .choice { background: var(--webfaya-white); }

/* Bas de formulaire */
.brief-submit {
  background: var(--webfaya-aqua);
  border: 3px solid var(--webfaya-ink);
  border-radius: var(--radius-card);
  padding: clamp(22px, 3vw, 34px);
  display: grid;
  gap: 16px;
  justify-items: start;
}
.brief-submit .btn { justify-content: center; }
.brief-submit-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.9vw, 1.75rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
}

@media (max-width: 720px) {
  .field-row { grid-template-columns: 1fr; }
  .brief-section { padding: clamp(20px, 5vw, 28px); }
  .brief-progress-label { font-size: .8rem; }
  .brief-submit .btn { width: 100%; }
}

/* =========================================================
   Pages légales (mentions, confidentialité, CGV)
   Aucun composant nouveau : on réutilise les cartes du brief
   (.brief-section), les listes à puces carrées (.price-includes),
   l'encadré .brief-note et le bandeau .notice.
   ========================================================= */
.legal { padding-bottom: var(--space-section); }

/* La colonne de texte est volontairement étroite (lisibilité) : la place
   qui reste à droite sert de sommaire collant plutôt que de rester vide. */
.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 900px) minmax(0, 250px);
  gap: clamp(24px, 3.5vw, 56px);
  align-items: start;
}

.legal-body {
  display: grid;
  gap: clamp(18px, 2.2vw, 28px);
  max-width: 900px;
  min-width: 0;
}

.legal-toc {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  background: var(--webfaya-white);
  border: 2px solid var(--webfaya-ink);
  border-radius: var(--radius-card);
  padding: 20px 18px;
}
.legal-toc-title {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--webfaya-orange-deep);
  margin-bottom: 12px;
}
.legal-toc ol {
  counter-reset: legal-toc;
  display: grid;
  gap: 2px;
  margin: 0; padding: 0;
  list-style: none;
}
.legal-toc a {
  display: block;
  position: relative;
  padding: 7px 8px 7px 30px;
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.legal-toc li { counter-increment: legal-toc; }
.legal-toc a::before {
  content: counter(legal-toc, decimal-leading-zero);
  position: absolute;
  left: 8px; top: 7px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--webfaya-orange-deep);
}
.legal-toc a:hover { background: var(--webfaya-aqua); }

@media (max-width: 1080px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; order: -1; }
  .legal-toc ol { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

.legal-section p { font-size: 1rem; }
.legal-section a { color: var(--webfaya-orange-deep); font-weight: 600; text-underline-offset: 3px; }
.legal-section .brief-note a { color: var(--webfaya-orange-deep); }
.legal-section { scroll-margin-top: calc(var(--header-h) + 20px); }

/* Intertitre à l'intérieur d'une carte (même graisse que les labels de champ) */
.legal-h4 {
  margin: 4px 0 -8px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1rem;
}

/* Fiche d'identification (éditeur, hébergeur, responsable de traitement) */
.legal-dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px 28px;
  margin: 0;
}
.legal-dl > div { min-width: 0; }
.legal-dl dt {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--webfaya-orange-deep);
  margin-bottom: 2px;
}
.legal-dl dd { margin: 0; font-size: 1rem; }

/* Marqueur « valeur provisoire ».
   En italique gris clair, il se confondait avec une légende et la donnée
   fictive au-dessus pouvait passer pour une vraie. Il porte maintenant une
   étiquette jaune explicite : impossible de la lire comme du texte définitif,
   impossible de la manquer avant la mise en ligne. */
.legal-flag {
  display: block;
  margin-top: 6px;
  padding: 6px 12px 6px 11px;
  border-left: 4px solid var(--webfaya-ink);
  border-radius: 0 8px 8px 0;
  background: var(--webfaya-yellow);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--webfaya-ink);
}
.legal-flag::before {
  content: "À compléter — ";
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .74rem;
}

/* =========================================================
   Réduction des animations
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .bandeau-piste { animation: none; }
  .mot-geant span { animation: none; opacity: 1; transform: none; }
  .hero-carte,
  .hero-cartes:hover .hero-carte-1,
  .hero-cartes:hover .hero-carte-2,
  .hero-cartes:hover .hero-carte-3 { transition: none; }
  .js .hero-copy > *,
  .js .hero-visual,
  .js .hero-title span,
  .js .hero-title .underline,
  .js .card .card-icon,
  .js .card .card-icon-css { animation: none; opacity: 1; transform: none; }
  .js .titre-anim.reveal > span,
  .js .reveal .case-list-check > li { opacity: 1; transform: none; }
  .js .case.reveal .case-shot { clip-path: none; }
  .case-shot { transition: none; }
  .case:hover .case-shot { transform: none; }
  .logo:hover { transform: none; }
  .faq-item[open] .faq-answer { animation: none; }
  .jauge-lecture { display: none; }
}

@media print {
  .site-header, .nav-toggle, .doodle { display: none; }
  body { background: #fff; }
}