/* flylab.fr — refonte du 04/11/2026 (Claude).
   Je lis ceci comme : site d'une agence web et IA d'Auch pour commerçants, artisans et dirigeants du Gers ; le travail de la
   page = instruire d'abord (guides, secteurs, annuaire), vendre ensuite ; ton clair, utile, sobre ; type hybride (marketing +
   contenu). Curseurs : variance 2 · motion 2 (lune jouable, textes 3D) · densité 2.
   DA « Encre FLY LAB » (module flylab-encre, mesures du 22/08) : papier, encre 950 pour le texte, encre 700 pour l'action
   (≤ 8 % de surface), nuit seulement pour la lune. Typo : Bricolage Grotesque (titres) + Schibsted Grotesk (texte), déjà
   celles de flylab.fr. CSP : aucun style en ligne, aucune ressource externe. */

@font-face { font-family: "Bricolage"; src: url("../fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Schibsted"; src: url("../fonts/schibsted.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }

:root {
  color-scheme: light;
  --encre-950: #02244a; --encre-900: #033a6e; --encre-800: #015da6; --encre-700: #0270ba; --encre-600: #1483cc; --encre-500: #2197dd;
  --encre-300: #7fbce6; --encre-100: #e6f1f8; --encre-50: #f1f7fb;
  --papier: #f5f7fa; --blanc: #ffffff; --nuit: #050a14; --nuit-2: #0b1626;
  --texte: #02244a; --texte-2: #33506e; --texte-3: #5b7590;
  --trait: rgba(2, 36, 74, .11); --trait-fort: rgba(2, 36, 74, .24);
  --f-titre: "Bricolage", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --f-texte: "Schibsted", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --t-xs: .8125rem; --t-s: .9375rem; --t-m: 1.0625rem; --t-l: clamp(1.15rem, 1.05rem + .45vw, 1.35rem);
  --t-xl: clamp(1.45rem, 1.15rem + 1.2vw, 2.05rem); --t-2xl: clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem); --t-3xl: clamp(2.3rem, 1.4rem + 3.6vw, 4.4rem);
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;
  --section: clamp(64px, 8vw, 120px); --large: 1240px; --lecture: 68ch; --rayon: 14px;
  --ombre: 0 1px 2px rgba(2,36,74,.06), 0 14px 34px -14px rgba(2,36,74,.22);
  --ease: cubic-bezier(.2, .8, .2, 1); --d-1: 120ms; --d-2: 240ms; --d-3: 480ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--texte); font: 400 var(--t-m)/1.6 var(--f-texte); -webkit-font-smoothing: antialiased; }
img, video, canvas, svg { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: var(--encre-700); text-underline-offset: 3px; }
p { margin: 0 0 var(--e-4); }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-titre); font-weight: 700; line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; color: var(--encre-950); }
:focus-visible { outline: 2px solid var(--encre-700); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saut { position: absolute; left: var(--e-4); top: -80px; background: var(--encre-950); color: var(--blanc); padding: var(--e-2) var(--e-4); border-radius: 8px; z-index: 60; }
.saut:focus { top: var(--e-4); }
.cadre { width: min(100% - 32px, var(--large)); margin-inline: auto; }
.lecture { max-width: var(--lecture); }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: color-mix(in oklch, var(--papier) 88%, transparent); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid var(--trait); }
@supports not (backdrop-filter: blur(1px)) { .entete { background: var(--papier); } }
.entete__in { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 66px; }
.marque img { height: 30px; width: auto; }
.nav { display: flex; align-items: center; gap: var(--e-5); }
.nav a { font-size: var(--t-s); font-weight: 600; color: var(--texte-2); text-decoration: none; }
@media (hover: hover) { .nav a:hover { color: var(--encre-700); } }
.nav__lien { display: none; }
@media (min-width: 1040px) { .nav__lien { display: inline; } }
.nav a.bouton { color: var(--blanc); }

.bouton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 46px; padding: 0 var(--e-5); border-radius: 999px; font: 600 var(--t-s)/1 var(--f-texte); text-decoration: none; border: 1px solid var(--encre-700); background: var(--encre-700); color: var(--blanc); cursor: pointer; transition: background var(--d-1) var(--ease), border-color var(--d-1) var(--ease), transform var(--d-1) var(--ease); }
.bouton:active { transform: translateY(1px); }
.bouton--creux { background: transparent; color: var(--encre-950); border-color: var(--trait-fort); }
.bouton--clair { background: var(--papier); color: var(--nuit); border-color: var(--papier); }
.bouton--petit { min-height: 40px; padding: 0 var(--e-4); }
@media (hover: hover) { .bouton:hover { background: var(--encre-800); border-color: var(--encre-800); color: var(--blanc); } .bouton--creux:hover { background: var(--encre-50); color: var(--encre-950); border-color: var(--encre-700); } .bouton--clair:hover { background: var(--blanc); color: var(--nuit); } }
.lien-fleche { font-weight: 600; text-decoration: none; }
.lien-fleche::after { content: " →"; }
@media (hover: hover) { .lien-fleche:hover { text-decoration: underline; } }

/* ---------- Accueil : la lune ---------- */
.ciel { background: radial-gradient(120% 80% at 70% 10%, var(--nuit-2) 0%, var(--nuit) 62%); color: #dfe8f3; padding-block: clamp(28px, 4vw, 56px) clamp(40px, 6vw, 80px); }
.ciel h1 { color: var(--blanc); font-size: clamp(2.2rem, 1.3rem + 2.9vw, 3.7rem); line-height: 1.06; }
.ciel h1 span { color: var(--encre-300); }
.ciel__grille { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 1000px) { .ciel__grille { grid-template-columns: .82fr 1.18fr; gap: var(--e-7); } }
.surtitre { display: inline-block; margin: 0 0 var(--e-4); font-size: var(--t-s); font-weight: 600; color: var(--encre-300); }
.ciel__chapo { margin: var(--e-5) 0 var(--e-6); max-width: 44ch; font-size: var(--t-l); color: #c3d2e2; }
.ciel__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.ciel .bouton--creux { color: var(--papier); border-color: rgba(245,247,250,.3); }
@media (hover: hover) { .ciel .bouton--creux:hover { background: rgba(245,247,250,.08); color: var(--blanc); border-color: rgba(245,247,250,.55); } }
.ciel__preuves { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); margin: var(--e-6) 0 0; padding: 0; list-style: none; font-size: var(--t-s); color: #9fb3c8; }
.ciel__preuves strong { color: var(--blanc); }

.lune__cadre { position: relative; border: 1px solid rgba(245,247,250,.12); border-radius: calc(var(--rayon) * 1.3); overflow: hidden; aspect-ratio: 5 / 4; min-height: 380px; background: radial-gradient(110% 90% at 30% 20%, #0d1a2c 0%, var(--nuit) 72%); }
@media (max-width: 640px) { .lune__cadre { aspect-ratio: 4 / 5; } }
.lune__canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; outline: none; }
.lune__canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--encre-300); }
.lune__fixe { position: absolute; inset: 12% 18%; width: 64%; height: auto; margin: auto; opacity: .9; }
.lune--prete .lune__fixe { display: none; }
.lune__haut { position: absolute; top: 10px; left: 16px; right: 10px; display: flex; justify-content: space-between; align-items: center; gap: 12px; pointer-events: none; font-size: var(--t-xs); }
.lune__droite { display: flex; align-items: center; gap: 10px; margin: 0; pointer-events: auto; }
.lune__reparer { min-height: 34px !important; }
.lune__consigne { margin: 0; color: #9fb3c8; }
.lune__compteur { margin: 0; color: var(--blanc); font-variant-numeric: tabular-nums; font-weight: 600; }
.lune__bas { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.lune__projectiles { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.lune__projectiles::-webkit-scrollbar { display: none; }
.lune__projectiles button, .lune__reparer { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(245,247,250,.16); background: rgba(5,10,20,.6); color: var(--papier); font: 600 var(--t-xs)/1 var(--f-texte); cursor: pointer; }
.lune__projectiles svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lune__projectiles button[aria-checked="true"] { background: var(--papier); color: var(--nuit); border-color: var(--papier); }
@media (hover: hover) { .lune__projectiles button:hover, .lune__reparer:hover { border-color: rgba(245,247,250,.45); } }
.lune__reparer { color: #9fb3c8; }
@media (max-width: 640px) { .lune__consigne { display: none; } .lune__haut { justify-content: flex-end; } }
.lune__repli { display: none; position: absolute; inset: auto 16px 16px; margin: 0; color: #9fb3c8; font-size: var(--t-xs); }
.lune--sans-webgl .lune__repli { display: block; }
.lune--sans-webgl .lune__bas, .lune--sans-webgl .lune__haut { display: none; }

/* Le passage : l'astronaute pose la question */
.question { background: linear-gradient(var(--nuit), #0a1424 40%, var(--papier) 100%); color: var(--papier); padding-block: var(--e-7) var(--e-8); }
.question__in { display: grid; justify-items: center; text-align: center; gap: var(--e-4); }
.question__phrase { margin: 0; font-size: var(--t-l); color: #c3d2e2; max-width: 40ch; }
.question__perso { display: grid; grid-template-columns: auto auto; align-items: center; gap: var(--e-3); }
.question__perso img { width: clamp(120px, 18vw, 180px); height: auto; }
.bulle { position: relative; margin: 0; padding: var(--e-4) var(--e-5); border-radius: 20px; background: var(--blanc); color: var(--encre-950); font: 700 var(--t-xl)/1.15 var(--f-titre); text-align: left; max-width: 15ch; box-shadow: var(--ombre); }
.bulle::before { content: ""; position: absolute; left: -9px; bottom: 22px; width: 18px; height: 18px; background: var(--blanc); transform: rotate(45deg); border-radius: 3px; }
.fleche { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--trait-fort); background: var(--blanc); color: var(--encre-950); text-decoration: none; font-size: 22px; box-shadow: var(--ombre); }
@media (prefers-reduced-motion: no-preference) { .fleche { animation: respire 2.4s var(--ease) infinite; } @keyframes respire { 50% { transform: translateY(5px); } } }

/* ---------- Sections génériques ---------- */
.section { padding-block: var(--section); }
.section--blanc { background: var(--blanc); }
.section--encre { background: var(--encre-950); color: #d6e2ee; }
.section--encre h2, .section--encre h3 { color: var(--blanc); }
.entete-section { display: grid; gap: var(--e-4); margin-bottom: var(--e-7); max-width: 760px; }
.entete-section h2 { font-size: var(--t-2xl); }
.entete-section p { margin: 0; font-size: var(--t-l); color: var(--texte-2); }
.section--encre .entete-section p { color: #b8c9da; }
.surtitre-encre { margin: 0; font-size: var(--t-s); font-weight: 600; color: var(--encre-700); }

/* Textes 3D gonflés */
.t3d { position: relative; margin: 0; width: 100%; height: clamp(110px, 17vw, 210px); font: 800 clamp(48px, 10vw, 140px)/1 var(--f-titre); display: grid; place-items: center start; color: var(--encre-700); }
.t3d--pret { color: transparent; }
.t3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Convertir : étapes avec titre collant */
.convertir { display: grid; gap: var(--e-7); }
@media (min-width: 1000px) { .convertir { grid-template-columns: .8fr 1.2fr; } .convertir__titre { position: sticky; top: 100px; align-self: start; } }
.convertir__titre h2 { font-size: var(--t-2xl); }
.convertir__titre p { color: var(--texte-2); font-size: var(--t-l); margin-top: var(--e-4); }
.etapes { margin: 0; padding: 0; list-style: none; counter-reset: e; display: grid; gap: var(--e-4); }
.etapes > li { counter-increment: e; display: grid; grid-template-columns: 56px 1fr; gap: var(--e-4); padding: var(--e-6) var(--e-5); background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); }
.etapes > li::before { content: counter(e); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--encre-50); color: var(--encre-700); font: 800 var(--t-l)/1 var(--f-titre); }
.etapes h3 { font-size: var(--t-xl); }
.etapes p { margin: var(--e-3) 0 0; color: var(--texte-2); }
.etapes .ia { margin-top: var(--e-4); padding: var(--e-3) var(--e-4); border-left: 3px solid var(--encre-500); background: var(--encre-50); border-radius: 0 10px 10px 0; color: var(--texte); font-size: var(--t-s); }
.etapes .ia b { color: var(--encre-800); }

/* Sélecteur de secteur */
.secteurs { display: grid; gap: var(--e-6); }
@media (min-width: 1000px) { .secteurs { grid-template-columns: 340px 1fr; align-items: start; } }
.puces { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
@media (min-width: 1000px) { .puces { flex-direction: column; flex-wrap: nowrap; max-height: 640px; overflow-y: auto; padding-right: var(--e-2); } }
.puces button { width: 100%; min-height: 42px; padding: 0 var(--e-4); border-radius: 10px; border: 1px solid var(--trait); background: var(--blanc); color: var(--texte); font: 600 var(--t-s)/1.2 var(--f-texte); text-align: left; cursor: pointer; }
@media (max-width: 999px) { .puces button { width: auto; border-radius: 999px; } }
.puces button[aria-selected="true"] { background: var(--encre-950); color: var(--blanc); border-color: var(--encre-950); }
@media (hover: hover) { .puces button:hover { border-color: var(--encre-700); } }
.panneau { padding: var(--e-6); background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); }
.js-secteurs .panneau[hidden] { display: none; }
.panneau h3 { font-size: var(--t-xl); }
.panneau__accroche { color: var(--texte-2); margin-top: var(--e-2); }
.leviers { margin: var(--e-5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--e-3); }
.leviers li { display: grid; grid-template-columns: 28px 1fr; gap: var(--e-3); padding-bottom: var(--e-3); border-bottom: 1px solid var(--trait); }
.leviers li::before { content: ""; width: 22px; height: 22px; margin-top: 2px; border-radius: 6px; background: var(--encre-100) url("../img/coche.svg") center / 14px no-repeat; }
.leviers b { display: block; }
.leviers span { color: var(--texte-2); font-size: var(--t-s); }
.duo { display: grid; gap: var(--e-3); margin-top: var(--e-5); }
@media (min-width: 720px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo div { padding: var(--e-4); border-radius: 12px; background: var(--encre-50); font-size: var(--t-s); }
.duo div + div { background: #fbf1f0; }
.duo b { display: block; margin-bottom: var(--e-1); }
.panneau__liens { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5); margin-top: var(--e-5); }

/* Listes de liens (guides, aide, annuaire) */
.liste-liens { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; }
@media (min-width: 720px) { .liste-liens--2 { grid-template-columns: 1fr 1fr; } .liste-liens--3 { grid-template-columns: repeat(3, 1fr); } }
.liste-liens li { background: var(--blanc); }
.liste-liens a { display: block; height: 100%; padding: var(--e-5); text-decoration: none; color: var(--texte); transition: background var(--d-1) var(--ease); }
.liste-liens a b { display: block; font-family: var(--f-titre); font-size: var(--t-l); line-height: 1.25; color: var(--encre-950); }
.liste-liens a span { display: block; margin-top: var(--e-2); color: var(--texte-2); font-size: var(--t-s); }
.liste-liens a em { display: inline-block; margin-top: var(--e-3); font-style: normal; font-size: var(--t-xs); color: var(--encre-700); font-weight: 600; }
@media (hover: hover) { .liste-liens a:hover { background: var(--encre-50); } }
.groupes { display: grid; gap: var(--e-6); }
@media (min-width: 720px) { .groupes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .groupes { grid-template-columns: repeat(4, 1fr); } }
.groupe h3 { font-size: var(--t-m); margin-bottom: var(--e-3); }
.groupe ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e-2); font-size: var(--t-s); }
.groupe a { color: var(--texte); text-decoration: none; }
.groupe a span { color: var(--texte-3); }
@media (hover: hover) { .groupe a:hover { color: var(--encre-700); text-decoration: underline; } }

/* Offres : tableau sobre */
.tableau { overflow-x: auto; border-radius: var(--rayon); background: var(--blanc); border: 1px solid var(--trait); }
.offres { width: 100%; min-width: 660px; border-collapse: collapse; font-size: var(--t-s); }
.offres th, .offres td { padding: var(--e-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--trait); }
.offres thead th { font: 700 var(--t-l)/1.2 var(--f-titre); color: var(--encre-950); border-bottom-color: var(--trait-fort); }
.offres thead th .prix { display: block; margin-top: var(--e-1); font-size: var(--t-2xl); font-weight: 800; color: var(--encre-700); }
.offres tbody th { color: var(--texte-3); font-weight: 600; width: 22%; }
.offres tfoot td { border-bottom: 0; }
.offres-mobile { display: grid; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.offres-mobile li { padding: var(--e-5); background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); }
.offres-mobile h3 { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); font-size: var(--t-l); }
.offres-mobile h3 span { font-size: var(--t-xl); color: var(--encre-700); font-weight: 800; }
.offres-mobile dl { display: grid; grid-template-columns: auto 1fr; gap: var(--e-2) var(--e-4); margin: var(--e-3) 0 var(--e-4); font-size: var(--t-s); }
.offres-mobile dt { color: var(--texte-3); }
.offres-mobile dd { margin: 0; }
@media (min-width: 760px) { .offres-mobile { display: none; } }
@media (max-width: 759px) { .tableau { display: none; } }
.suivis { display: grid; gap: var(--e-3); margin: var(--e-5) 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .suivis { grid-template-columns: repeat(3, 1fr); } }
.suivis li { padding: var(--e-4) var(--e-5); border: 1px solid var(--trait); border-radius: 12px; background: var(--papier); font-size: var(--t-s); }
.suivis b { display: block; font-family: var(--f-titre); font-size: var(--t-m); }
.suivis strong { color: var(--encre-700); }
.petit { font-size: var(--t-xs); color: var(--texte-3); }

/* Film + réalisations */
.film { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 1000px) { .film { grid-template-columns: 1fr 1.05fr; } }
.film__cadre { position: relative; max-width: 640px; border-radius: var(--rayon); overflow: hidden; background: var(--nuit); box-shadow: var(--ombre); aspect-ratio: 16 / 9; }
.film__cadre video { width: 100%; height: 100%; object-fit: cover; }
.film__jouer { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: rgba(2,36,74,.15); cursor: pointer; }
.film__jouer span { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--blanc); color: var(--encre-950); box-shadow: var(--ombre); }
.film__jouer svg { width: 24px; height: 24px; margin-left: 4px; fill: currentColor; }
.film--lecture .film__jouer { display: none; }
.logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--trait); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; }
@media (min-width: 640px) { .logos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .logos { grid-template-columns: repeat(5, 1fr); } }
.logos li { background: var(--blanc); min-width: 0; }
.logos a { display: grid; place-items: center; gap: var(--e-2); min-height: 132px; padding: var(--e-4); text-decoration: none; color: var(--texte-3); font-size: var(--t-xs); text-align: center; }
.logos img { max-height: 52px; width: auto; max-width: min(150px, 100%); object-fit: contain; }
.logos__vous a { background: var(--encre-950); color: #b8c9da; }
.logos__vous b { color: var(--blanc); font: 700 var(--t-l)/1.2 var(--f-titre); }

/* FAQ */
.faq { display: grid; gap: var(--e-2); max-width: 860px; }
.faq details { background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; }
.faq summary { cursor: pointer; padding: var(--e-4) var(--e-5); font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--e-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 22px/1 var(--f-titre); color: var(--encre-700); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0; padding: 0 var(--e-5) var(--e-5); color: var(--texte-2); }

/* Bandeau contact */
.appel { background: var(--encre-700); color: var(--blanc); padding-block: var(--e-8); }
.appel__in { display: grid; gap: var(--e-5); align-items: center; }
@media (min-width: 900px) { .appel__in { grid-template-columns: 1.2fr 1fr; } }
.appel h2 { color: var(--blanc); font-size: var(--t-2xl); }
.appel p { margin: var(--e-3) 0 0; color: #d9ecf8; }
.appel__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); }
@media (min-width: 900px) { .appel__actions { justify-content: flex-end; } }
.appel .bouton { background: var(--blanc); color: var(--encre-950); border-color: var(--blanc); }
.appel .bouton--creux { background: transparent; color: var(--blanc); border-color: rgba(255,255,255,.5); }
@media (hover: hover) { .appel .bouton:hover { background: var(--encre-50); color: var(--encre-950); } .appel .bouton--creux:hover { background: rgba(255,255,255,.12); color: var(--blanc); } }

/* ---------- Pages intérieures ---------- */
.page-titre { padding-block: clamp(36px, 6vw, 80px) var(--e-6); }
.fil { margin: 0 0 var(--e-4); font-size: var(--t-xs); color: var(--texte-3); }
.fil a { color: var(--texte-3); }
.page-titre h1 { font-size: var(--t-3xl); max-width: 22ch; }
.chapo { margin: var(--e-5) 0 0; max-width: 60ch; font-size: var(--t-l); color: var(--texte-2); }
.meta { margin-top: var(--e-4); font-size: var(--t-xs); color: var(--texte-3); }
.mise { display: grid; gap: var(--e-7); padding-bottom: var(--section); }
@media (min-width: 1080px) { .mise { grid-template-columns: minmax(0, 1fr) 300px; } .mise__cote { position: sticky; top: 96px; align-self: start; } }
.prose { max-width: var(--lecture); font-size: var(--t-m); }
.prose h2 { font-size: var(--t-xl); margin: var(--e-7) 0 var(--e-4); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--t-l); margin: var(--e-5) 0 var(--e-2); }
.prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 var(--e-4); }
.prose li { margin-bottom: var(--e-2); }
.prose .etapes-prose { list-style: none; padding: 0; counter-reset: p; display: grid; gap: var(--e-3); }
.prose .etapes-prose li { counter-increment: p; position: relative; padding: var(--e-4) var(--e-4) var(--e-4) 60px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; }
.prose .etapes-prose li::before { content: counter(p); position: absolute; left: 16px; top: 16px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--encre-50); color: var(--encre-700); font: 800 var(--t-s)/1 var(--f-titre); }
.prose .etapes-prose b { display: block; }
.encadre { padding: var(--e-5); border-radius: var(--rayon); background: var(--blanc); border: 1px solid var(--trait); }
.encadre + .encadre { margin-top: var(--e-4); }
.encadre h2, .encadre h3 { font-size: var(--t-l); margin-bottom: var(--e-3); }
.encadre p { font-size: var(--t-s); color: var(--texte-2); }
.encadre ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e-2); font-size: var(--t-s); }
.encadre--encre { background: var(--encre-950); color: #c9d8e7; border-color: var(--encre-950); }
.encadre--encre h2, .encadre--encre h3 { color: var(--blanc); }
.encadre--encre p { color: #c9d8e7; }
.encadre .bouton { width: 100%; margin-top: var(--e-2); }
.prompt { position: relative; margin: var(--e-4) 0; padding: var(--e-5); border-radius: 12px; background: var(--encre-950); color: #e3ecf5; font: 500 var(--t-s)/1.6 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre-wrap; }
.prompt__copier { position: absolute; top: 10px; right: 10px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #e3ecf5; font: 600 var(--t-xs)/1 var(--f-texte); cursor: pointer; }
.sources { margin-top: var(--e-7); padding-top: var(--e-4); border-top: 1px solid var(--trait); font-size: var(--t-xs); color: var(--texte-3); overflow-wrap: anywhere; }
.sources a { color: var(--texte-3); }

/* Annuaire */
.fiches { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e-3); }
@media (min-width: 760px) { .fiches { grid-template-columns: 1fr 1fr; } }
.fiche { display: grid; gap: var(--e-2); padding: var(--e-5); background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; }
.fiche h3 { font-size: var(--t-l); }
.fiche p { margin: 0; font-size: var(--t-s); color: var(--texte-2); }
.fiche__liens { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); font-size: var(--t-s); font-weight: 600; }
.fiche__sans-site { color: var(--texte-3); font-weight: 400; }
.attribution { margin-top: var(--e-5); font-size: var(--t-xs); color: var(--texte-3); }
.compte { display: inline-block; margin-left: var(--e-2); padding: 2px 8px; border-radius: 999px; background: var(--encre-50); color: var(--encre-800); font: 600 var(--t-xs)/1.5 var(--f-texte); }

/* ---------- Pied de page : toutes les pages ---------- */
.pied { background: var(--nuit); color: #b8c9da; padding-block: var(--e-8) var(--e-6); font-size: var(--t-s); }
.pied a { color: #b8c9da; text-decoration: none; }
@media (hover: hover) { .pied a:hover { color: var(--blanc); text-decoration: underline; } }
.pied__haut { display: grid; gap: var(--e-6); padding-bottom: var(--e-6); border-bottom: 1px solid rgba(245,247,250,.12); }
@media (min-width: 960px) { .pied__haut { grid-template-columns: 1.1fr 2fr; } }
.pied__haut img { height: 30px; width: auto; }
.pied__haut p { margin-top: var(--e-4); max-width: 42ch; color: #8ea4bb; }
.pied__colonnes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-5); }
@media (min-width: 760px) { .pied__colonnes { grid-template-columns: repeat(4, 1fr); } }
.pied h2 { font: 700 var(--t-xs)/1.3 var(--f-texte); letter-spacing: .08em; text-transform: uppercase; color: #7f95ad; margin-bottom: var(--e-3); }
.pied ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e-2); }
.plan-pied { padding-block: var(--e-6); border-bottom: 1px solid rgba(245,247,250,.12); }
.plan-pied > h2 { margin-bottom: var(--e-2); }
.plan-pied > p { margin: 0 0 var(--e-5); color: #7f95ad; font-size: var(--t-xs); }
.plan-pied__groupe { margin-top: var(--e-4); }
.plan-pied__groupe h3 { font: 700 var(--t-xs)/1.3 var(--f-texte); color: #dfe8f3; margin-bottom: var(--e-2); }
.plan-pied__liste { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.6; }
.plan-pied__liste a { color: #8ea4bb; }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-3); padding-top: var(--e-5); font-size: var(--t-xs); color: #7f95ad; }

/* ---------- Mouvement ---------- */
.apparait { transition: opacity var(--d-3) var(--ease), transform var(--d-3) var(--ease); }
.apparait.attend { opacity: 0; transform: translateY(14px); }
.apparait.attend.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
  .apparait.attend { opacity: 1; transform: none; }
}
.section--encre .surtitre-encre { color: var(--encre-300); }
.section--encre .groupe h3 { color: var(--blanc); }
.section--encre .groupe a { color: #d6e2ee; }
.section--encre .groupe a span { color: #8ea4bb; }
.section--encre .groupes { margin-bottom: var(--e-6); }
.question--allumee .bulle { animation: none; }

.pied .plan-pied__liste { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.titre-real { font-size: var(--t-2xl); margin: var(--e-2) 0 var(--e-4); }
.film > div p { color: var(--texte-2); font-size: var(--t-l); }
#logos { margin-top: var(--e-7); }

@media (max-width: 999px) {
  .puces { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--e-2); scrollbar-width: thin; margin-inline: -16px; padding-inline: 16px; }
  .puces li { flex: none; }
}
@media (max-width: 640px) {
  .etapes > li { grid-template-columns: 1fr; padding: var(--e-5) var(--e-4); }
  .etapes > li::before { width: 36px; height: 36px; font-size: var(--t-m); }
  .panneau { padding: var(--e-5) var(--e-4); }
}

.t3d--petit { height: clamp(90px, 12vw, 150px); max-width: 640px; }
.entete-section .t3d { margin-bottom: calc(var(--e-2) * -1); }

/* ===== Correctifs du contrôle qualité (04/11) ===== */
.section--encre .t3d--pret, .t3d--pret { color: transparent; }
.encadre--encre .bouton--creux { color: var(--blanc); border-color: rgba(255,255,255,.5); }
@media (hover: hover) { .encadre--encre .bouton--creux:hover { background: rgba(255,255,255,.1); color: var(--blanc); } }
.encadre .bouton { max-width: 320px; }
.encadre--formulaire { margin-bottom: var(--e-7); border-color: var(--encre-300); background: var(--encre-50); }
.encadre--formulaire .bouton { width: auto; margin: var(--e-2) var(--e-2) 0 0; }
.lune__projectiles { flex-wrap: wrap; }
@media (max-width: 640px) {
  .lune__projectiles { flex-wrap: nowrap; -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); padding-right: 24px; }
}
.lune__canvas { touch-action: pan-y; }
@media (min-width: 1000px) { .puces { max-height: none; overflow: visible; } }
.question { padding-block: var(--e-6) var(--e-6); }
.logos img { max-height: 46px; max-width: min(130px, 100%); }
.logos__texte { font: 700 var(--t-m)/1.2 var(--f-titre); color: var(--encre-950); text-align: center; }
.prose .fiches { padding: 0; margin: 0; }
.prose .fiches li { margin: 0; }
.compte { display: table; margin: var(--e-3) 0 0; font-size: var(--t-s); }
.prompt { padding-top: 48px; overflow-wrap: anywhere; }
.sources { font-size: var(--t-s); }
.plan-pied summary { cursor: pointer; list-style: none; display: grid; gap: 4px; }
.plan-pied summary::-webkit-details-marker { display: none; }
.plan-pied summary h2 { display: inline; text-decoration: underline; text-underline-offset: 4px; }
.plan-pied summary span { color: #7f95ad; font-size: var(--t-xs); }
.plan-pied[open] summary { margin-bottom: var(--e-4); }
.menu { position: relative; }
.menu summary { list-style: none; display: grid; gap: 4px; place-content: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--trait-fort); cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 18px; height: 2px; background: var(--encre-950); border-radius: 2px; }
.menu__panneau { position: absolute; right: 0; top: 52px; display: grid; min-width: 230px; padding: var(--e-2); background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; box-shadow: var(--ombre); }
.menu__panneau a { padding: var(--e-3) var(--e-4); border-radius: 8px; color: var(--encre-950) !important; font-weight: 600; }
@media (hover: hover) { .menu__panneau a:hover { background: var(--encre-50); } }
@media (min-width: 1040px) { .menu { display: none; } }
@media (max-width: 420px) { .nav a.bouton { padding: 0 12px; font-size: var(--t-xs); } }
.nav__court { display: none; }
@media (max-width: 480px) { .nav__long { display: none; } .nav__court { display: inline; } }

/* ===== v2 du 04/11 ~8 h (dictée de Paul) : jeu « concurrence », lettres 3D partout, 10 h → 1 h, motion design, créateur ===== */
.t3d { overflow: visible; }
.t3d__canvas { position: absolute; inset: auto; left: calc(var(--t3d-px, 0px) * -1); top: calc(var(--t3d-py, 0px) * -1); width: calc(100% + 2 * var(--t3d-px, 0px)); height: calc(100% + 2 * var(--t3d-py, 0px)); pointer-events: none; }
.t3d--grand { height: clamp(120px, 15vw, 230px); }
.page-titre .t3d--petit { height: clamp(70px, 9vw, 120px); margin-bottom: var(--e-2); }

.jeu { position: relative; }
.jeu__cadre { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 5 / 4; min-height: 400px; border-radius: calc(var(--rayon) * 1.3); border: 1px solid rgba(255, 120, 90, .24);
  background: radial-gradient(85% 70% at 42% 42%, #2c0c0b 0%, #14070c 46%, #050a14 100%); box-shadow: 0 30px 80px -30px rgba(255, 60, 30, .35); }
.jeu--gagne .jeu__cadre { border-color: rgba(143, 220, 255, .35); background: radial-gradient(85% 70% at 72% 72%, #0b2a5c 0%, #071226 50%, #050a14 100%); box-shadow: 0 30px 80px -30px rgba(60, 140, 255, .45); }
.jeu__fixe { position: absolute; inset: 14% 22%; width: 56%; height: auto; margin: auto; opacity: .8; }
.jeu--pret .jeu__fixe { display: none; }
.jeu__canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: manipulation; cursor: crosshair; outline: none; }
.jeu__canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--encre-300); }
.jeu__haut { position: absolute; inset: 14px 14px auto 14px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; pointer-events: none; }
.jeu__alerte { margin: 0; max-width: 23ch; font: 600 var(--t-s)/1.3 var(--f-texte); color: #ffd9cf; transition: opacity var(--d-3) var(--ease); }
.jeu__alerte b { display: block; margin-bottom: 2px; font: 800 .95rem/1 var(--f-titre); letter-spacing: .16em; text-transform: uppercase; color: #ff6a4a; }
.jeu__alerte--fin { opacity: .25; }
.jeu__compteur { margin: 0; max-width: 15ch; text-align: right; font: 500 var(--t-xs)/1.25 var(--f-texte); color: #c9d6e6; }
.jeu__compteur b { display: block; font: 800 clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem)/1 var(--f-titre); color: var(--blanc); font-variant-numeric: tabular-nums; }
.jeu__vie { position: absolute; left: 14px; top: calc(14px + 4.1rem); width: min(44%, 220px); height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; pointer-events: none; }
.jeu__vie span { display: block; height: 100%; width: var(--vie, 100%); background: linear-gradient(90deg, #ff3b1f, #ffa25a); transition: width .45s var(--ease); }
.jeu--gagne .jeu__vie { opacity: 0; }
.jeu__vous { position: absolute; left: var(--x, 82%); top: var(--y, 70%); transform: translate(-50%, -100%); margin: 0; font: 700 .72rem/1.2 var(--f-texte); letter-spacing: .1em; text-transform: uppercase; color: #9fd8ff; white-space: nowrap; pointer-events: none; }
.jeu__consigne { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); margin: 0; max-width: calc(100% - 28px); padding: 10px 18px; border-radius: 999px; background: rgba(5, 10, 20, .66);
  border: 1px solid rgba(255, 255, 255, .16); color: var(--blanc); font: 700 var(--t-s)/1.25 var(--f-texte); text-align: center; pointer-events: none; }
.jeu__consigne:empty { display: none; }
@media (prefers-reduced-motion: no-preference) { .jeu:not(.jeu--gagne) .jeu__consigne { animation: appel 2.2s var(--ease) infinite; } @keyframes appel { 50% { transform: translateX(-50%) scale(1.04); } } }
.jeu__fin { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: var(--e-5); border-radius: 18px; background: rgba(5, 10, 20, .82); border: 1px solid rgba(143, 220, 255, .3); color: #e8f1fb; text-align: center; }
.jeu__fin[hidden] { display: none; }
.jeu__bravo { margin: 0 0 4px; font: 800 clamp(1.15rem, .9rem + 1vw, 1.55rem)/1.2 var(--f-titre); color: var(--blanc); }
.jeu__fin p { margin: 0 0 var(--e-4); }
.jeu__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: center; }
.jeu__fin .bouton--creux { color: var(--papier); border-color: rgba(245, 247, 250, .35); }
.jeu__repli { display: none; }
.jeu--sans-webgl .jeu__repli { display: block; position: absolute; left: 14px; right: 14px; bottom: 14px; margin: 0; padding: var(--e-4); border-radius: 14px; background: rgba(5, 10, 20, .8); color: #e8f1fb; font-size: var(--t-s); text-align: center; }
.jeu--sans-webgl .jeu__canvas, .jeu--sans-webgl .jeu__consigne, .jeu--sans-webgl .jeu__vie, .jeu--sans-webgl .jeu__vous, .jeu--sans-webgl .jeu__compteur { display: none; }
@media (max-width: 640px) { .jeu__cadre { aspect-ratio: 4 / 5; min-height: 0; } .jeu__alerte { max-width: 19ch; } .jeu__consigne { font-size: var(--t-xs); padding: 8px 14px; bottom: 12px; } }

.dix__grille { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 900px) { .dix__grille { grid-template-columns: 1fr 1.05fr; gap: var(--e-8); } }
.dix h2 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); margin: var(--e-2) 0 var(--e-4); }
.dix__liste { list-style: none; margin: var(--e-5) 0 var(--e-6); padding: 0; display: grid; gap: var(--e-3); counter-reset: dix; }
.dix__liste li { position: relative; padding-left: 2.8rem; min-height: 1.9rem; }
.dix__liste li::before { counter-increment: dix; content: counter(dix); position: absolute; left: 0; top: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--encre-100); color: var(--encre-800); font: 800 .9rem/1 var(--f-titre); }

.motion__grille { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 900px) { .motion__grille { grid-template-columns: 1fr minmax(0, 520px); gap: var(--e-8); } }
.motion__prix { display: inline-flex; flex-direction: column; gap: 2px; margin: var(--e-4) 0; padding: var(--e-3) var(--e-5); border-radius: var(--rayon); background: var(--encre-50); border: 1px solid var(--encre-100); color: var(--encre-900); font-size: var(--t-s); }
.motion__prix b { font: 800 clamp(1.4rem, 1.1rem + 1vw, 1.9rem)/1.1 var(--f-titre); color: var(--encre-950); }
.motion__film { max-width: 520px; width: 100%; justify-self: end; }
.motion__film figcaption { position: absolute; left: 12px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(5, 10, 20, .7); color: #e8f1fb; font-size: var(--t-xs); pointer-events: none; }

.createur__in { display: grid; gap: var(--e-5); align-items: center; padding: var(--e-7) var(--e-6); border-radius: calc(var(--rayon) * 1.4); background: var(--encre-950); color: #dbe7f3; }
.createur__in h2 { color: var(--blanc); margin: var(--e-2) 0; }
.createur__in .surtitre-encre { color: var(--encre-300); }
.createur__in p:last-child { display: flex; flex-wrap: wrap; gap: var(--e-3); margin: 0; }
.createur__in .bouton--creux { color: var(--papier); border-color: rgba(245, 247, 250, .35); }
@media (min-width: 900px) { .createur__in { grid-template-columns: 1.2fr auto; } }
.maillage { list-style: none; margin: var(--e-3) 0 var(--e-5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.maillage a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--e-4); border-radius: 999px; border: 1px solid var(--trait); background: var(--blanc); text-decoration: none; font-weight: 600; font-size: var(--t-s); }
.maillage--serre a { min-height: 36px; padding: 0 var(--e-3); font-weight: 500; }
@media (hover: hover) { .maillage a:hover { border-color: var(--encre-700); color: var(--encre-800); } }
/* 04/11 ~9 h : le texte derrière les lettres 3D restait visible (règles de paragraphe plus fortes) : transparent partout, lu par Google */
.t3d.t3d--pret, .entete-section .t3d.t3d--pret, .page-titre .t3d.t3d--pret, .convertir__titre .t3d.t3d--pret, .dix .t3d.t3d--pret { color: transparent !important; -webkit-text-fill-color: transparent; text-shadow: none; }
.t3d { font: 800 clamp(48px, 10vw, 140px)/1 var(--f-titre) !important; letter-spacing: -.02em; }
.jeu__vous { transition: opacity var(--d-3) var(--ease); }
.jeu--centre .jeu__vous { opacity: 0; }
@media (max-width: 640px) {
  .jeu__fin { left: 10px; right: 10px; bottom: 10px; padding: 12px 14px; }
  .jeu__bravo { font-size: 1.02rem; }
  .jeu__fin p { margin-bottom: 8px; font-size: .84rem; }
  .jeu__actions { gap: 8px; }
  .jeu__actions .bouton { min-height: 40px; padding: 0 16px; font-size: .84rem; }
}

/* 04/11 ~10 h : concurrents bien marqués, barre « changer de métier » collante */
.concurrents { margin: var(--e-5) 0 var(--e-7); padding: var(--e-6); border-radius: calc(var(--rayon) * 1.3); background: var(--blanc); border: 2px solid var(--encre-700); color: var(--texte); box-shadow: 0 24px 60px -30px rgba(2, 36, 74, .35); }
.section--encre .concurrents { background: color-mix(in oklch, var(--encre-950) 70%, var(--nuit)); border-color: var(--encre-300); color: #dbe7f3; }
.concurrents__etiquette { display: inline-block; margin: 0 0 var(--e-3); padding: 4px 12px; border-radius: 999px; background: var(--encre-700); color: var(--blanc); font: 700 var(--t-xs)/1.4 var(--f-texte); letter-spacing: .06em; text-transform: uppercase; }
.concurrents__titre { margin: 0 0 var(--e-2); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); }
.section--encre .concurrents__titre { color: var(--blanc); }
.concurrents__texte { margin: 0 0 var(--e-4); max-width: 62ch; }
.concurrents__liste { list-style: none; margin: 0 0 var(--e-4); padding: 0; display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.concurrents__liste a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: var(--e-3) var(--e-4); border-radius: 12px; border: 1px solid var(--trait); background: var(--papier); text-decoration: none; color: inherit; transition: transform var(--d-1) var(--ease), border-color var(--d-1) var(--ease); }
.section--encre .concurrents__liste a { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.concurrents__liste b { font-family: var(--f-titre); font-size: var(--t-m); color: var(--encre-950); }
.section--encre .concurrents__liste b { color: var(--blanc); }
.concurrents__liste span { font-size: var(--t-xs); opacity: .8; }
@media (hover: hover) { .concurrents__liste a:hover { transform: translateY(-2px); border-color: var(--encre-700); } }
.metiers { position: sticky; top: var(--entete-h, 67px); z-index: 30; margin: 0 0 var(--e-5); background: color-mix(in oklch, var(--papier) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block: 1px solid var(--trait); }
.metiers ul { list-style: none; margin: 0 auto; padding: 10px 16px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; max-width: var(--large); scroll-snap-type: x proximity; }
.metiers li { flex: none; scroll-snap-align: start; }
.metiers a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--trait); background: var(--blanc); color: var(--texte); text-decoration: none; font: 600 var(--t-xs)/1 var(--f-texte); white-space: nowrap; }
.metiers a[aria-current="page"] { background: var(--encre-700); border-color: var(--encre-700); color: var(--blanc); }
@media (hover: hover) { .metiers a:hover { border-color: var(--encre-700); color: var(--encre-800); } .metiers a[aria-current="page"]:hover { color: var(--blanc); } }
.jeu__alerte { font: 800 clamp(.98rem, .85rem + .6vw, 1.3rem)/1.25 var(--f-titre); color: #ffe3da; max-width: 20ch; text-shadow: 0 2px 18px rgba(255, 60, 30, .45); }

/* Avis Google en avant (04/11 soir) */
.avis__tete { margin-bottom: var(--e-6); }
.avis__tete h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); margin: var(--e-2) 0; }
.avis__liste { list-style: none; margin: 0 0 var(--e-6); padding: 0; display: grid; gap: var(--e-4); }
@media (min-width: 760px) { .avis__liste { grid-template-columns: repeat(2, 1fr); } }
.avis__carte { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-5) var(--e-6); border-radius: calc(var(--rayon) * 1.2); background: var(--blanc); border: 1px solid var(--trait); box-shadow: 0 20px 50px -34px rgba(2, 36, 74, .45); transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease); }
@media (hover: hover) { .avis__carte:hover { transform: translateY(-3px); box-shadow: 0 26px 60px -30px rgba(2, 36, 74, .5); } }
.etoiles { width: 96px; height: 19px; fill: #f5b301; }
.avis__carte blockquote { margin: 0; font-size: var(--t-l); line-height: 1.5; color: var(--encre-950); quotes: "« " " »"; }
.avis__carte blockquote::before { content: open-quote; } .avis__carte blockquote::after { content: close-quote; }
.avis__qui { margin: auto 0 0; font-size: var(--t-s); color: var(--texte-2, #4a5b6c); }
.avis__qui b { color: var(--encre-900); }
.avis__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.ciel__preuves a { color: inherit; text-decoration: none; }
.credits { grid-column: 1 / -1; margin: var(--e-2) 0 0; font-size: var(--t-xs); color: var(--texte-2, #5a6a7a); }
.encadre--formulaire .formulaire-flylab { margin-top: var(--e-4); }