/* ==========================================================================
   styles.css — socle visuel partagé par toutes les pages du site.
   Chargé via <link rel="stylesheet" href="/assets/styles.css"> AVANT le
   <style> inline de chaque page : le CSS propre à une page (déclaré inline)
   passe donc APRÈS dans la cascade et l'emporte toujours.
   Contenu : design tokens, reset, header/navbar/nav/effet .roll, menu mobile
   (.mfab*), boutons, hero de page, sections/badge, bande CTA, cartes
   comparatives, watermark, footer, reveal. Le CSS PROPRE À UNE PAGE reste inline.
   ========================================================================== */

:root{
  --paper:#faf7f0; --card:#ffffff; --card2:#f0ebde; --ink:#1a1816; --ink-soft:#5a554f; --ink-mute:#9c958b;
  --yellow:#FFD93D; --yellow-deep:#c9a316; --success:#22a06b;
  --rule: rgba(26,24,22,.08);
  --shadow: 0 2px 6px rgba(26,24,22,.04), 0 20px 50px rgba(26,24,22,.08);
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Work Sans', sans-serif;

  /* Langage de mouvement unique. --ease est la courbe de sortie utilisée par
     défaut : départ franc, arrivée amortie, c'est ce qui donne l'impression de
     réactivité. --dur-press pour le retour au clic (doit être quasi instantané),
     --dur-ui pour les survols et changements d'état, --dur-enter pour les
     apparitions de contenu, plus lentes mais jamais bloquantes. */
  --ease: cubic-bezier(.22,1,.36,1);
  --dur-press: .12s;
  --dur-ui: .18s;
  --dur-enter: .5s;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--paper);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
.mono{font-family:'JetBrains Mono',monospace;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;position:relative;z-index:1;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
section{position:relative;}

/* Lien d'évitement : hors écran au repos, il revient dans le cadre à la
   première tabulation. Sans lui, une personne au lecteur d'écran ou au
   clavier devait reparcourir tout le menu à chaque changement de page avant
   d'atteindre le contenu. Le <main id="contenu"> visé est présent sur les
   9 pages qui partagent l'en-tête. */
.skip-link{
  position:absolute;top:0;left:0;z-index:200;
  transform:translateY(-120%);
  padding:12px 20px;border-radius:0 0 12px 0;
  background:var(--yellow);color:var(--ink);
  font-size:14px;font-weight:700;
  transition:transform var(--dur-ui) var(--ease);
}
.skip-link:focus{transform:translateY(0);}
@media (prefers-reduced-motion:reduce){ .skip-link{transition:none;} }
/* Cible d'ancre focalisée par script (voir site.js) : le focus doit bien s'y
   déplacer, mais un liseré autour d'un bloc entier n'apporte rien — le
   défilement fait déjà office de repère visuel. */
main[tabindex="-1"]:focus, section[tabindex="-1"]:focus{outline:none;}

body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.grad-text{
  background:linear-gradient(100deg,var(--ink) 0%, var(--yellow-deep) 45%, var(--ink) 90%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:gradShift 7s ease infinite;
}
@keyframes gradShift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
@media (prefers-reduced-motion:reduce){ .grad-text, .brand-mark::before{animation:none;} }

/* ---------- header : identique à la page d'accueil (pleine largeur → pilule) ---------- */
/* viewport-fit=cover (voir <meta name="viewport">) laisse la mise en page
   s'étendre derrière l'encoche/Dynamic Island — sans ça, la pilule se
   retrouverait décalée sous la balise <meta name="theme-color"> une fois
   celle-ci en place (voir <head> de chaque page pour le vrai correctif de
   couleur derrière l'encoche). env(safe-area-inset-top) pousse juste la
   pilule EXACTEMENT à sa position actuelle (elle valait 0 avant, donc rien
   ne bouge sur les appareils sans encoche). */
header{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:padding .4s cubic-bezier(.4,0,.2,1);}
.navbar{
  display:flex;align-items:center;justify-content:space-between;
  max-width:100%;margin:0 auto;
  background:rgba(255,255,255,.46);border-radius:0;border:1px solid transparent;border-bottom-color:var(--rule);box-shadow:none;
  padding:22px 32px;
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  transition:max-width .5s cubic-bezier(.4,0,.2,1), margin .5s cubic-bezier(.4,0,.2,1),
    padding .4s cubic-bezier(.4,0,.2,1), background .4s ease, border-radius .4s ease,
    border-color .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
}
header.scrolled{padding:calc(14px + env(safe-area-inset-top,0px)) 24px 0;}
header.scrolled .navbar{
  max-width:1180px;
  background:rgba(255,255,255,.46);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border-radius:999px;border-color:var(--rule);box-shadow:var(--shadow);
  padding:10px 10px 10px 22px;
}
header.scrolled .navbar:hover{border-color:rgba(255,217,61,.5);}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:16px;}
.logo-mark{height:26px;width:auto;flex-shrink:0;display:block;}
/* Lockup logo+slogan éclaté (mark+texte fusionnés dans le SVG) : plus petit
   dans la navbar (espace restreint), plus grand dans le footer (plus de
   place, plus de présence en clôture de page). */
.logo-lockup{height:45px;width:auto;flex-shrink:0;display:block;}
footer.foot .logo-lockup{height:70px;}
nav.mainnav{display:flex;align-items:center;gap:36px;}
nav.mainnav a{font-size:13px;font-weight:600;line-height:1;color:var(--ink-soft);padding:8px 14px;margin:-8px -14px;border-radius:999px;transition:background .15s,color .15s;white-space:nowrap;}
nav.mainnav a[aria-current="page"]{background:var(--yellow);color:var(--ink);}
nav.mainnav a[aria-current="page"]:hover{background:var(--yellow);color:var(--ink);}
.roll-char{display:inline-block;overflow:hidden;height:1.15em;vertical-align:top;}
.roll-char-inner{
  display:flex;flex-direction:column;transform:translateY(0%);
  will-change:transform;
  transition:transform 380ms cubic-bezier(.22,1,.36,1);
  transition-delay:var(--d-out,0ms);
}
.roll-line{display:block;height:1.15em;line-height:1.15em;white-space:pre;}
.roll:hover .roll-char-inner{transform:translateY(-1.15em);transition-delay:var(--d-in,0ms);}
nav.mainnav a:hover{color:var(--ink);background:var(--card2);}
.mainnav-contact{display:none;}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;padding:12px 22px;border-radius:999px;cursor:pointer;border:none;white-space:nowrap;flex-shrink:0;transition:box-shadow var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease);position:relative;overflow:hidden;}
.btn:hover{transform:translateY(-1px);}
/* Retour tactile au clic : le bouton s'enfonce. .btn-nav-cta l'avait déjà, pas
   .btn — les CTA principaux du site restaient donc inertes sous le doigt. */
.btn:active{transform:translateY(1px) scale(.98);transition-duration:var(--dur-press);}
.btn-primary{background:var(--yellow);color:var(--ink);box-shadow:0 10px 26px rgba(255,217,61,.4);}
.btn-primary:hover{box-shadow:0 14px 34px rgba(255,217,61,.55);}
.btn-primary:active{box-shadow:0 4px 12px rgba(255,217,61,.35);}
.btn-ghost{background:var(--card2);color:var(--ink);}
.btn-ghost:hover{background:var(--rule);}
.btn svg{width:15px;height:15px;transition:transform var(--dur-ui) var(--ease);}
.btn:hover svg{transform:translateX(3px);}
.btn-nav-cta{
  display:inline-flex;align-items:center;gap:9px;flex-shrink:0;white-space:nowrap;cursor:pointer;
  background:var(--ink);color:var(--paper);
  font-family:'Work Sans',sans-serif;font-weight:700;font-size:14px;
  padding:12px 22px;border-radius:999px;text-decoration:none;
  border:1.5px solid var(--ink);
  box-shadow:0 10px 26px rgba(26,24,22,.22);
  transition:background .22s cubic-bezier(.4,0,.2,1), color .22s cubic-bezier(.4,0,.2,1),
    border-color .22s cubic-bezier(.4,0,.2,1), box-shadow .22s ease, transform .15s ease;
}
.btn-nav-cta:hover{
  background:var(--yellow);color:var(--ink);border-color:var(--ink);
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(255,217,61,.45);
}
.btn-nav-cta:active{
  transform:translateY(1px) scale(.98);
  box-shadow:0 4px 12px rgba(255,217,61,.35);
}
.btn-nav-cta svg{width:14px;height:14px;transition:transform .2s ease;}
.btn-nav-cta:hover svg{transform:translateX(3px);}

/* Anneau de focus clavier, commun à tous les éléments actionnables. Il n'existait
   que sur le bouton du menu mobile : au clavier, le reste du site ne montrait
   rien d'exploitable. :focus-visible ne s'affiche qu'à la navigation clavier,
   la souris n'est donc pas affectée. */
.btn:focus-visible,
.btn-nav-cta:focus-visible,
nav.mainnav a:focus-visible,
.foot-links a:focus-visible,
.logo:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:999px;
}
.btn-primary:focus-visible{ outline-color:var(--ink); }
.btn-nav-cta:focus-visible{ outline-color:var(--yellow-deep); }

/* ---------- bouton menu mobile (tous les styles sont dans la media query <900px) ---------- */
.mfab{display:none;}

/* ---------- hero de page service ---------- */
.page-hero{padding:166px 0 56px;position:relative;overflow:hidden;background:var(--card2);}
.badge{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;color:var(--paper);background:var(--ink);padding:8px 16px;border-radius:999px;margin-bottom:26px;}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--success);position:relative;}
.page-hero h1{font-family:var(--font-display);font-size:clamp(34px,4.6vw,54px);font-weight:700;letter-spacing:-0.02em;line-height:1.08;max-width:840px;}
.page-hero .lead{margin-top:22px;font-size:16.5px;color:var(--ink-soft);max-width:560px;line-height:1.6;}
.page-hero .lead strong{color:var(--ink);}
.hero-ctas{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap;}

/* ---------- sections génériques ---------- */
.section{padding:70px 0;}
.section-head{max-width:640px;margin-bottom:40px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-family:var(--font-display);font-size:clamp(28px,3.4vw,42px);font-weight:700;letter-spacing:-0.02em;line-height:1.15;}

/* ---------- phrase de définition centrée, réutilisée par les 2 sections ---------- */
.section-def{max-width:560px;margin:-18px auto 44px;text-align:center;font-size:15px;color:var(--ink-soft);line-height:1.6;}
.section-def strong{color:var(--ink);}

/* ---------- distinction : deux cartes comparatives (écho du même composant sur la page intégration IA) ---------- */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch;max-width:900px;margin:0 auto;}
.compare-card{
  background:#f5efdd;border:1px solid var(--rule);border-radius:24px;padding:30px 28px;
  display:flex;flex-direction:column;
}
.compare-card.highlight{background:var(--card);border-color:rgba(255,217,61,.55);box-shadow:var(--shadow);}
.compare-tag{
  align-self:flex-start;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);
  background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:4px 12px;margin-bottom:16px;
}
.compare-card.highlight .compare-tag{background:var(--yellow);color:var(--ink);border-color:transparent;}
.compare-card h3{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-0.01em;margin-bottom:10px;}
.compare-card p{font-size:14.5px;color:var(--ink-soft);line-height:1.65;margin-bottom:18px;}
.compare-link{
  margin-top:auto;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-size:13px;font-weight:700;color:var(--ink);
  border-bottom:1.5px solid var(--yellow);padding-bottom:2px;transition:gap .2s ease;
}
.compare-link:hover{gap:10px;}
.compare-link svg{width:13px;height:13px;}
@media (max-width:700px){ .compare-grid{grid-template-columns:1fr;} }

/* ---------- process/étapes : déroulé du service, propre à chaque page
   (creation-web, automatisation, intelligence-artificielle, formation-ia) —
   cartes reliées par un tracé courbe continu (SVG dessiné en JS à partir de
   la position réelle des cartes, voir initProcessPath() dans site.js), qui
   boucle vers le bas quand une carte passe à la ligne suivante. Placé juste
   avant le CTA final de chaque page. Nombre d'étapes libre (flex+wrap+
   justify-center) : toute rangée incomplète reste centrée, jamais collée à
   gauche comme le ferait une grille. Le tracé n'est dessiné qu'en desktop
   (>760px) : en mobile les cartes s'empilent pleine largeur, un fil n'aurait
   plus grand sens visuellement. ---------- */
.process-path{
  /* Toujours sur une seule ligne (4 étapes maximum) : flex-wrap:nowrap +
     flex:1 sur les cartes, qui se partagent la largeur et rétrécissent
     ensemble plutôt que de passer à la ligne. */
  position:relative;
  display:flex;flex-wrap:nowrap;
  gap:40px;margin-top:52px;
}
.process-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0;}
.process-step{
  /* Même traitement que .compare-card (déjà utilisée sur ces pages) : couleur
     crème chaude + filet fin, pas de gris — reste dans la palette du site. */
  position:relative;z-index:1;flex:1 1 0;min-width:0;text-align:left;
  background:#f5efdd;border:1px solid var(--rule);border-radius:22px;padding:26px 26px 28px;
  transition:background .7s ease, border-color .7s ease, box-shadow .7s ease;
}
/* Pastille "Offert" — encastrée dans le coin haut-droit intérieur de la
   carte (pas à cheval sur la bordure) : le coin haut-droit de la pastille
   reprend EXACTEMENT le même rayon que .process-step (22px), donc les deux
   courbes se prolongent l'une dans l'autre au lieu de trancher. */
.process-flag{
  position:absolute;top:0;right:0;z-index:3;
  display:inline-flex;align-items:center;white-space:nowrap;color:var(--ink);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.03em;
  padding:8px 16px;
  border-radius:0 22px 0 14px;
  background:var(--yellow);
}
/* Surbrillance animée (voir initProcessPath dans site.js) : même recette que
   .compare-card.highlight (bordure + ombre jaune douce), + le beige plus
   foncé déjà utilisé site-wide pour les états actifs/hover (var(--card2),
   nav, menu déroulant, badges) — lent et discret, pas un changement brutal. */
.process-step.active{
  background:var(--card2);
  border-color:rgba(255,217,61,.55);
  box-shadow:var(--shadow), 0 0 26px rgba(255,217,61,.2);
}
/* Anneau d'arrivée : un seul pulse (pas de boucle) qui marque l'instant où le
   point atteint la carte, retiré du DOM une fois joué — voir site.js. */
@keyframes processRingPulse{
  0%{opacity:.6;transform:scale(.85);}
  100%{opacity:0;transform:scale(1.18);}
}
.process-ring{
  position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:2;
  border:1.5px solid rgba(255,217,61,.6);
  animation:processRingPulse 1.1s cubic-bezier(.22,1,.36,1) forwards;
}
.process-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:999px;background:var(--yellow);color:var(--ink);
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;margin-bottom:12px;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.process-step.active .process-num{transform:scale(1.12);}
.process-title{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-0.01em;margin-bottom:8px;line-height:1.25;}
.process-desc{font-size:13.5px;color:var(--ink-soft);line-height:1.6;text-align:center;}
/* Point qui parcourt le tracé — double halo (cœur net + lueur douce), voir
   .process-dot créé/animé en JS. */
.process-dot-core{fill:var(--yellow);}
.process-dot-glow{fill:var(--yellow);opacity:.35;filter:blur(4px);}
@media (max-width:760px){
  .process-path{flex-direction:column;align-items:stretch;gap:20px;}
  .process-svg{display:none;}
  .process-step{flex:none;width:100%;}
  /* Le JS applique .active à la 1ère carte au chargement puis n'anime plus
     rien en dessous de 760px (cf site.js) : sans ce reset, cette carte
     restait visuellement figée en surbrillance en permanence. */
  .process-step.active{background:#f5efdd;border-color:var(--rule);box-shadow:none;}
  .process-step.active .process-num{transform:none;}
}

/* ---------- bande CTA finale ---------- */
.cta-band{
  background:var(--ink);color:var(--paper);border-radius:32px;padding:70px 48px;
  position:relative;overflow:hidden;text-align:center;box-shadow:var(--shadow);
}
.cta-band::after{
  content:'';position:absolute;top:-45%;right:-8%;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,217,61,.25),transparent 70%);filter:blur(12px);pointer-events:none;
}
.cta-band::before{
  content:'';position:absolute;bottom:-55%;left:-6%;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,217,61,.14),transparent 70%);filter:blur(12px);pointer-events:none;
}
.cta-band .cta-eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,217,61,.9);}
.cta-band h2{font-family:var(--font-display);font-size:clamp(28px,3.8vw,46px);font-weight:700;letter-spacing:-0.02em;line-height:1.15;margin:16px auto 30px;max-width:620px;position:relative;z-index:1;}
.cta-band h2 em{font-style:normal;color:var(--yellow);}
.cta-band .btn{position:relative;z-index:1;}
.cta-shine{
  position:absolute;top:-50%;left:-75%;width:50%;height:200%;z-index:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  transform:translateX(0) skewX(-20deg);pointer-events:none;transition:none;
}
/* Transition uniquement sur l'état survolé : aller animé, retour instantané
   (pas d'aller-retour visible) — même mécanisme que .tier-shine. */
.cta-band:hover .cta-shine{transform:translateX(400%) skewX(-20deg);transition:transform .6s var(--ease);}

/* ---------- watermark + footer : identiques à l'accueil ---------- */
/* height:155px avec un texte à font-size:207px (voir ::before) : le bas des
   lettres déborde et se fait couper par overflow:hidden, c'est l'effet
   "filigrane graphique" recherché. Ce rapport hauteur/police (~0.75) doit
   suivre le clamp() du texte à toutes les tailles d'écran, sinon la
   troncature disparaît dès que la police rétrécit plus vite que la boîte —
   c'est ce qui se produisait entre ~560px et ~1030px de large (boîte figée à
   110/155px, déjà plus haute que le texte : plus aucune coupe, le filigrane
   flottait avec de l'air au lieu de mordre sur le cadre). Un clamp() parallèle,
   à 0.75× les mêmes bornes, restaure la même proportion de coupe partout. */
.brand-mark{position:relative;height:clamp(49px,11.25vw,155px);overflow:hidden;pointer-events:none;margin-top:24px;}
.brand-mark::before{
  content:'loangomez.fr';position:absolute;left:50%;top:0;transform:translateX(-50%);
  white-space:nowrap;font-family:var(--font-display);font-weight:800;letter-spacing:-0.02em;line-height:1;
  font-size:clamp(65px,15vw,207px);
  background:linear-gradient(100deg,var(--ink) 0%, var(--yellow-deep) 45%, var(--ink) 90%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:gradShift 7s ease infinite;
}

footer.foot{background:var(--paper);padding:32px 0;border-top:1px solid var(--rule);position:relative;}
/* Logo sorti du .wrap, épinglé près du vrai bord de l'écran (indépendant de
   la largeur centrée du conteneur) — les liens restent dans .wrap et se
   centrent donc par rapport à toute la largeur de l'écran. */
.foot-logo{position:absolute;left:24px;top:50%;transform:translateY(calc(-50% + 9px));}
.foot-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px 32px;}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 28px;font-size:13.5px;color:var(--ink-soft);}
.foot-links a:hover{color:var(--ink);}

/* Apparition au scroll : même courbe que le reste du site (--ease), au lieu de
   la cubic-bezier(.25,.46,.45,.94) d'origine qui montait de façon presque
   linéaire. Départ plus franc, arrivée amortie. Durée ramenée de .7s à --dur-enter
   (.5s) : avec une courbe qui démarre aussi vite, .7s donnait une fin qui traînait. */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur-enter) var(--ease),transform var(--dur-enter) var(--ease);}
.reveal.visible{opacity:1;transform:translateY(0);}
.s1{transition-delay:.06s;} .s2{transition-delay:.12s;} .s3{transition-delay:.18s;} .s4{transition-delay:.24s;} .s5{transition-delay:.3s;} .s6{transition-delay:.36s;}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} }

/* Le CTA de la navbar porte un libellé long ("Démarrer mon projet"). Entre 901px
   (où le menu mobile prend le relais) et 1180px, on resserre progressivement les
   liens pour que la nav tienne sur une seule ligne sans passer sous le CTA. */
@media (min-width:901px) and (max-width:1180px){
  nav.mainnav{gap:18px;}
}
@media (min-width:901px) and (max-width:1060px){
  nav.mainnav{gap:4px;}
  nav.mainnav a{font-size:12.5px;padding:8px 10px;margin:-8px -10px;}
}
@media (min-width:901px) and (max-width:960px){
  nav.mainnav a{font-size:12px;padding:8px 6px;margin:-8px -6px;}
}

@media (max-width:900px){
  nav.mainnav{display:none;}
  .navbar{padding:16px 20px;}
  header.scrolled .navbar{padding:8px 8px 8px 18px;}
  .navbar > .btn-nav-cta{display:none;}
  .mainnav-contact{display:block;font-weight:700;color:var(--ink) !important;}
  /* ---------- Menu mobile — pilule qui se morphe (calqué sur le composant
     FloatingMenu fourni) ----------
     .mfab = empreinte FIXE 128×42 dans le flux de la navbar : le bouton ne
     change jamais de taille, la navbar garde donc son épaisseur. .mfab-panel
     est ABSOLU, ancré au coin haut-droit du bouton ; il grandit vers le bas
     (hauteur) et la gauche (largeur) par-dessus la page, SANS sortir de la
     navbar (pas de reparent, pas de z-index derrière la navbar). */
  .mfab{display:block;position:relative;flex-shrink:0;width:128px;height:42px;}

  .mfab-panel{
    position:absolute;top:0;right:0;
    width:128px;height:42px;border-radius:999px;
    display:flex;flex-direction:column;
    overflow:hidden;cursor:pointer;z-index:60;
    /* Bordure portée par le PANNEAU (pas par le calque jaune interne) : elle suit
       toujours le border-radius arrondi, donc aucun coin carré ne peut fuiter
       quand overflow:hidden + border-radius s'animent (glitch de clip mobile qui
       laissait apparaître un léger rectangle au contour à la fermeture). */
    border:1px solid var(--yellow-deep);
    /* Durées de FERMETURE (l'état "après changement" est l'état de base) :
       la hauteur se referme vite (.15s) pendant que largeur + arrondi prennent
       .8s → le panneau se replie d'abord en hauteur puis se resserre, exactement
       comme le composant de référence (height:{duration: isOpen?0.8:0.15}). */
    transition:width .8s cubic-bezier(.22,1,.36,1),
               height .15s cubic-bezier(.22,1,.36,1),
               border-radius .8s cubic-bezier(.22,1,.36,1),
               border-color .3s ease;
  }
  .mfab-panel.open{
    width:min(280px,86vw);height:min(300px,70vh);border-radius:28px;cursor:default;z-index:70;
    border-color:transparent; /* pas de liseré autour du panneau encre ouvert */
    /* Durées d'OUVERTURE : tout en .8s. */
    transition:width .8s cubic-bezier(.22,1,.36,1),
               height .8s cubic-bezier(.22,1,.36,1),
               border-radius .8s cubic-bezier(.22,1,.36,1),
               border-color .3s ease;
  }

  .mfab-yellow{position:absolute;inset:0;background:var(--yellow);border-radius:inherit;z-index:0;}

  /* Voile encre : grand cercle qui descend depuis le haut (côté barre) pour
     remplir le panneau à mesure qu'il grandit vers le bas (delay .1s à l'ouverture). */
  .mfab-dark{
    position:absolute;left:50%;width:200%;height:200%;border-radius:50%;background:var(--ink);
    transform:translateX(-50%);top:-200%;z-index:1;
    transition:top .8s cubic-bezier(.22,1,.36,1);
  }
  .mfab-panel.open .mfab-dark{top:-20%;transition:top .8s cubic-bezier(.22,1,.36,1) .1s;}

  /* Barre "Menu + croix" : en HAUT du panneau, taille quasi fixe → reste calée
     à la position du bouton dans la navbar pendant que le panneau se déploie. */
  .mfab-bar{
    position:relative;z-index:2;flex-shrink:0;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    width:100%;height:42px;padding:0 14px;
    background:transparent;border:none;cursor:pointer;
    /* pas de surbrillance de tap mobile : la barre est un rectangle pleine
       largeur en haut du panneau quand il est ouvert, et le tap sur la croix
       dessinait sinon ce rectangle une fraction de seconde à la fermeture. */
    -webkit-tap-highlight-color:transparent;
    transition:height .8s cubic-bezier(.22,1,.36,1),padding .8s cubic-bezier(.22,1,.36,1);
  }
  .mfab-bar:focus{outline:none;}
  .mfab-bar:focus-visible{outline:2px solid var(--paper);outline-offset:-8px;border-radius:inherit;}
  .mfab,.mfab-items a{-webkit-tap-highlight-color:transparent;}
  /* Ouvert : la barre ne réserve plus d'espace vertical — elle passe en
     superposition absolue en haut (seule la croix reste, "Menu" ayant disparu),
     ce qui laisse le 1er lien remonter au niveau de la croix. pointer-events:none
     sur la barre + auto sur la croix : le haut du panneau reste cliquable pour
     les liens, mais la croix ferme bien (l'événement remonte au listener). */
  .mfab-panel.open .mfab-bar{
    position:absolute;top:0;left:0;right:0;width:auto;height:48px;z-index:6;
    padding:14px 18px 0;justify-content:flex-end;pointer-events:none;
  }
  .mfab-panel.open .mfab-burger{pointer-events:auto;}
  .mfab-label{font-family:var(--font-body);font-size:14px;font-weight:700;color:var(--ink);transition:opacity .25s ease,color .3s ease;}
  .mfab-panel.open .mfab-label{opacity:0;} /* "Menu" s'efface pendant le déploiement */
  .mfab-burger{position:relative;width:24px;height:24px;flex-shrink:0;}
  .mfab-burger span{position:absolute;left:3px;width:18px;height:2px;border-radius:1px;background:var(--ink);transition:transform .4s cubic-bezier(.22,1,.36,1),background .3s ease,top .4s cubic-bezier(.22,1,.36,1);}
  .mfab-burger span:nth-child(1){top:9px;}
  .mfab-burger span:nth-child(2){top:15px;}
  .mfab-panel.open .mfab-burger span{background:var(--paper);top:12px;}
  .mfab-panel.open .mfab-burger span:nth-child(1){transform:rotate(45deg);}
  .mfab-panel.open .mfab-burger span:nth-child(2){transform:rotate(-45deg);}

  /* Liens : dans l'espace qui se libère sous la barre, centrés. Fondu
     échelonné à l'ouverture (delay .40 + .08·i), fondu simultané à la fermeture. */
  .mfab-items{
    position:relative;z-index:2;flex:1;min-height:0;
    display:flex;flex-direction:column;
    overflow:hidden auto;padding:7px 22px 0;pointer-events:none; /* top : aligne le 1er lien sur la croix */
  }
  .mfab-panel.open .mfab-items{pointer-events:auto;}
  .mfab-items a{
    flex:1;display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;
    font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.02em;
    font-size:16px;line-height:1.05;color:var(--paper);
    border-top:1px solid rgba(255,255,255,.14); /* séparateur léger, cf. .tile-service-row */
    opacity:0;transition:opacity .4s ease; /* fermeture : fondu simultané, sans délai */
  }
  .mfab-items a:first-child{border-top:none;}
  .mfab-panel.open .mfab-items a{opacity:1;}
  .mfab-panel.open .mfab-items a:nth-child(1){transition:opacity .4s ease .40s;}
  .mfab-panel.open .mfab-items a:nth-child(2){transition:opacity .4s ease .48s;}
  .mfab-panel.open .mfab-items a:nth-child(3){transition:opacity .4s ease .56s;}
  .mfab-panel.open .mfab-items a:nth-child(4){transition:opacity .4s ease .64s;}
  .mfab-panel.open .mfab-items a:nth-child(5){transition:opacity .4s ease .72s;}
  .mfab-panel.open .mfab-items a:nth-child(6){transition:opacity .4s ease .80s;}
  .mfab-items a[aria-current="page"]{color:var(--yellow);}
  .cta-band{padding:54px 28px;}
  /* :hover reste actif au toucher sur certains mobiles (tap = hover collé) :
     le reflet se déclenche de façon intempestive. Désactivé sur mobile. */
  .cta-shine{display:none;}

  /* Footer mobile : aligné sur ce même seuil de 900px (celui où le menu bascule
     en hamburger), pas sur 560px comme avant. Avec 560px, tout ce qui allait de
     561 à 900px de large (tablette portrait, iPhone en paysage) affichait encore
     le footer desktop — gros logo, liens en grille — alors que la nav, elle,
     était déjà en mode mobile. Zone morte incohérente, corrigée en réunissant
     les deux seuils. */
  .foot-logo{position:static;transform:none;margin-bottom:20px;padding-left:24px;}
  /* footer.foot .logo-lockup{height:70px} (réglé pour le desktop, où le logo
     partage la ligne avec les liens) devient disproportionné une fois seul et
     empilé en tête du footer mobile : ramené à la taille du logo de la navbar. */
  footer.foot .logo-lockup{height:45px;}
  .foot-row{justify-content:flex-start;}
  /* Un élément par ligne plutôt que le retour à la ligne du flex-wrap desktop
     (qui regroupait 2-3 liens par ligne selon leur longueur) : lecture plus
     simple sur un écran étroit. */
  .foot-links{flex-direction:column;align-items:flex-start;gap:14px;}
}
@media (max-width:560px){
  .page-hero{padding-top:140px;}
}

/* ==========================================================================
   Mouvement réduit — bloc placé EN FIN DE FICHIER volontairement.
   La règle historique en haut du fichier (ligne ~51) était déclarée AVANT
   `.brand-mark::before{animation:gradShift…}` : à spécificité égale, c'est la
   dernière déclaration qui l'emporte, donc le filigrane continuait de s'animer
   malgré `prefers-reduced-motion: reduce`. Vérifié dans Chrome avec la
   fonctionnalité émulée. Toute neutralisation d'animation ajoutée plus tard
   doit venir ici, après les déclarations qu'elle annule.

   On ne coupe PAS toutes les transitions du site en bloc : plusieurs
   composants (dont la carte du hero d'accueil) attendent un événement
   `transitionend` pour révéler leur contenu. Les supprimer masquerait ce
   contenu au lieu de l'apaiser. On ne neutralise donc que les animations qui
   se jouent seules, sans action de l'utilisateur.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .grad-text,
  .brand-mark::before{ animation:none; }
}