/* Bricolage Grotesque : les deux fichiers du site public Compagnons IA (licence OFL, assets/bricolage-grotesque-OFL.txt).
   « Titres » : taille optique 96, graisses 500 à 800 ; « Texte » : taille optique 14, graisses 400 à 700. Seul l’axe de graisse existe. */
@font-face{font-family:"Bricolage Titres";src:url('./assets/bricolage-titres.woff2') format('woff2');font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Texte";src:url('./assets/bricolage-texte.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

:root {
  /* ===== Charte V3 Compagnons IA × Darcos (21 octobre 2026) : copie du bloc :root de ../src/styles.css, voir docs/CHARTE_UI.md =====
     Une couleur, un sens : bleu = information ; marine = travail engagé ; jaune = ce que le compagnon a préparé ; rouge = urgent.
     L’orange est réservé au casque du compagnon, jamais dans l’interface. Aucune couleur n’est écrite en dur ailleurs que dans ce bloc. */
  --marine:#0D1B2A;      /* titres, texte, boutons principaux */
  --encre:#4A5B6E;       /* texte secondaire */
  --bleu:#477CA8;        /* information */
  --bleu-fonce:#2F5F86;  /* liens, focus */
  --bleu-clair:#E4EFF8;  /* puces */
  --bleu-pale:#F3F7FB;   /* fond de page, sous-panneaux */
  --bleu-filet:#D3E1EE;  /* bordures */
  --blanc:#FFFFFF;       /* cartes */
  --jaune:#FFD000;       /* ce que le compagnon a préparé, la lumière du déblocage */
  --jaune-pale:#FFF6CC;
  --rouge:#A3341A;       /* urgent, bloquant */
  --rouge-pale:#FBE9E4;
  --orange:#F5A332;      /* réservé au casque du compagnon, jamais dans l’interface */
  /* Dérivés, mêmes valeurs que le site : survol du bouton principal, texte sur jaune pâle, filets discrets. */
  --nuit:#0A1520;
  --jaune-fonce:#7A5A00;
  --trait:#0D1B2A1A;
  --trait-fort:#0D1B2A38;
  --voile:#0D1B2A52;      /* voile sous les dialogues */
  /* Contour des champs de saisie : l’encre éclaircie, contraste 3,3:1 sur blanc (le filet bleu reste aux cartes). */
  --trait-champ:#7D8EA1;
  --ombre-douce:0 1px 2px #0D1B2A0D, 0 8px 20px -12px #0D1B2A2E;
  --ombre-carte:0 1px 2px #0D1B2A0A, 0 18px 40px -24px #0D1B2A42;
  --ombre-haute:0 2px 4px #0D1B2A0A, 0 32px 70px -34px #0D1B2A5C;
  /* Fond de page : halo jaune en haut à droite (côté compagnon), halos bleus, quadrillage très léger. */
  --fond-page:
    radial-gradient(700px 420px at 92% -6%, rgba(255, 208, 0, 0.20), transparent 62%),
    radial-gradient(760px 560px at -12% 18%, rgba(71, 124, 168, 0.18), transparent 60%),
    radial-gradient(600px 500px at 70% 110%, rgba(71, 124, 168, 0.12), transparent 60%),
    linear-gradient(rgba(71, 124, 168, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71, 124, 168, 0.07) 1px, transparent 1px);
  --fond-page-taille:auto, auto, auto, 28px 28px, 28px 28px;
  --rayon-module:14px;
  --rayon-dossier:12px;
  --rayon-champ:10px;
  --rayon-pilule:999px;
  --police-titres:"Bricolage Titres", Arial, Helvetica, sans-serif;
  --police-texte:"Bricolage Texte", Arial, Helvetica, sans-serif;
  --elan:cubic-bezier(.2,.8,.2,1);
  --rebond:cubic-bezier(.3,1.5,.5,1);

  font-family:var(--police-texte);
  font-size:16px;
  line-height:1.5;
  color:var(--marine);
  background:var(--bleu-pale);
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;min-width:280px;min-height:100vh;background-color:var(--bleu-pale);background-image:var(--fond-page);background-size:var(--fond-page-taille);color:var(--marine);font-family:var(--police-texte);font-size:16px;line-height:1.5}
button,input{font:inherit;-webkit-tap-highlight-color:transparent}
.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}
.icon-library{position:absolute;width:0;height:0;overflow:hidden}
.icon{display:block;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
[hidden]{display:none!important}
/* Focus : contour 3 px bleu foncé, une seule règle (comme dans l’application). */
:focus-visible{outline:3px solid var(--bleu-fonce);outline-offset:2px;box-shadow:none}

/* Identités : copies intactes sur un cartouche blanc à filet bleu ; le logo Compagnons est fusionné en « multiply » pour que le rectangle de son PNG disparaisse. */
.site-header{position:absolute;top:28px;left:0;right:0;z-index:5;display:flex;justify-content:center;padding:0 16px;pointer-events:none}
.brand-pair{display:flex;align-items:center;gap:24px;background:var(--blanc);border:1px solid var(--bleu-filet);border-radius:var(--rayon-module);padding:6px 18px;box-shadow:var(--ombre-douce)}
.compagnons-logo{width:236px;height:auto;display:block;mix-blend-mode:multiply}
.brand-times{font-size:21px;line-height:1;color:var(--encre)}
.darcos-logo{width:74px;height:74px;object-fit:contain;display:block}

/* La scène : le fond de page de la charte (halos et quadrillage) porté par body. */
.home{height:100svh;min-height:620px;position:relative;isolation:isolate;overflow:hidden}
.stage{position:absolute;inset:0;pointer-events:none}

/* Avant la connexion, le compagnon est le personnage tracé du logo (2D), debout à côté de la carte de connexion.
   Sa taille et sa ligne de sol sont réglées par portal.js. Il reste sous les cartes : sa lumière ne déborde pas sur elles,
   et à l’arrivée la carte « Mes appels d’offres » passe devant lui pendant qu’il s’efface. */
.compagnon-actor{position:absolute;left:0;bottom:var(--ground,120px);z-index:3;width:var(--actor-w,176px);height:var(--actor-h,262px);opacity:0;transition:opacity .5s}
body[data-auth="login"] .compagnon-actor,body[data-auth="unavailable"] .compagnon-actor,body[data-auth="unlocking"] .compagnon-actor{opacity:1}
body[data-auth="entering"] .compagnon-actor{transition-duration:.35s}
.compagnon-actor.is-offstage{opacity:0!important;visibility:hidden}
.compagnon-actor.is-offstage .compagnon *{animation:none}
.compagnon-actor::after{content:'';position:absolute;left:18%;right:18%;bottom:-7px;height:14px;border-radius:50%;background:radial-gradient(ellipse at center,var(--trait) 0%,transparent 72%);transition:opacity .3s}
.compagnon-actor.is-3d::after{opacity:0}
.compagnon-actor .compagnon{position:relative;z-index:1;width:100%;height:100%;display:block;overflow:visible;transform-origin:50% 100%;transition:transform .32s cubic-bezier(.4,0,.2,1)}
.compagnon-actor.is-flipped .compagnon{transform:scaleX(-1)}
/* Sa vie propre à la connexion : respiration, clignement, étoile qui scintille, gestes sur place (un seul à la fois). */
.compagnon-actor .cp-root{animation:cp-breathe 3.4s ease-in-out infinite;transform-origin:50% 100%}
.compagnon-actor .cp-eyes{animation:cp-blink 4.6s infinite}
.compagnon-actor .cp-star{animation:cp-twinkle 2.2s ease-in-out infinite}
.compagnon-actor :is(.cp-arm-r,.cp-arm-l,.cp-head,.cp-leg,.cp-eyes){transition:transform .38s cubic-bezier(.3,.9,.3,1.15)}
.is-thinking .compagnon .cp-arm-r{transform:rotate(22deg)}
.is-thinking .compagnon .cp-head{transform:rotate(7deg)}
.is-thinking .compagnon .cp-arm-l{transform:rotate(-8deg)}
.is-glancing .compagnon .cp-head{transform:rotate(-6deg)}
.is-glancing .compagnon .cp-eyes{transform:translate(10px,-2px)}
.is-waving .compagnon .cp-arm-r{animation:cp-wave 1.3s ease-in-out 1}
.is-waving .compagnon .cp-head{transform:rotate(-3deg)}
.is-cheering .compagnon .cp-root{animation:cp-hop .6s cubic-bezier(.3,.8,.3,1)}
.is-cheering .compagnon .cp-arm-r{transform:rotate(-34deg)}
.is-cheering .compagnon .cp-arm-l{transform:rotate(-40deg)}
.is-cheering.compagnon-actor::after{animation:cp-shadow-hop .6s cubic-bezier(.3,.8,.3,1)}
@keyframes cp-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.018)}}
@keyframes cp-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes cp-twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.14) rotate(10deg)}}
@keyframes cp-hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-34px)}}
@keyframes cp-wave{0%,100%{transform:rotate(0)}22%{transform:rotate(-42deg)}42%{transform:rotate(-26deg)}62%{transform:rotate(-44deg)}82%{transform:rotate(-28deg)}}
@keyframes cp-shadow-hop{0%,100%{transform:scale(1);opacity:1}40%{transform:scale(.72);opacity:.45}}

/* Sur écran étroit (pas de place à côté de la carte), un petit compagnon 2D immobile se tient dans la carte, au-dessus du surtitre. */
.auth-compagnon{display:none;position:relative;isolation:isolate;width:56px;height:84px;margin:0 auto 12px}
.auth-layer.is-narrow .auth-compagnon{display:block}
.auth-compagnon .compagnon{position:relative;z-index:1;display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 100%}

/* La transformation (2 s, puis 0,4 s pour le voir saluer) : le compagnon 2D se ramasse et sautille, s’illumine jusqu’à
   devenir une silhouette de lumière (contraste nul puis luminosité doublée : il blanchit sans jamais passer par le gris), les étincelles convergent vers lui ; sa silhouette 2D et celle du compagnon 3D
   alternent de plus en plus vite, puis un éclair et une onde jaunes révèlent le compagnon 3D en couleurs, qui rebondit
   et se pose. Le rendu 3D est calé sur le tracé : même hauteur du casque aux pieds, même ligne de sol. */
.compagnon-3d{display:block;max-width:none;user-select:none;-webkit-user-drag:none}
.compagnon-actor .compagnon-3d,.auth-compagnon .compagnon-3d{position:absolute;z-index:2;left:-39.2%;bottom:-4%;height:105.7%;width:auto;opacity:0;transform-origin:50% 96%;pointer-events:none}
.is-3d>.compagnon{opacity:0}
.is-3d>.compagnon-3d,.is-3d>.compagnon-3d-cadre{opacity:1}
.unlock-fx{position:absolute;left:35%;top:48%;z-index:0;width:0;height:0;pointer-events:none}
.unlock-light{position:absolute;left:calc(var(--fx,262px) * -.8);top:calc(var(--fx,262px) * -.8);width:calc(var(--fx,262px) * 1.6);height:calc(var(--fx,262px) * 1.6);border-radius:50%;background:radial-gradient(closest-side,var(--jaune) 0%,var(--jaune-pale) 46%,transparent 100%);opacity:0}
.unlock-flash{position:absolute;left:calc(var(--fx,262px) * -.55);top:calc(var(--fx,262px) * -.55);width:calc(var(--fx,262px) * 1.1);height:calc(var(--fx,262px) * 1.1);border-radius:50%;background:radial-gradient(closest-side,var(--blanc) 0%,var(--blanc) 22%,var(--jaune-pale) 48%,transparent 100%);opacity:0;z-index:3}
.unlock-ring{position:absolute;left:calc(var(--fx,262px) * -.5);top:calc(var(--fx,262px) * -.5);width:calc(var(--fx,262px) * 1);height:calc(var(--fx,262px) * 1);border-radius:50%;border:3px solid var(--jaune);opacity:0}
.unlock-sparkle{--taille:max(10px,calc(var(--fx,262px) * var(--z,.08)));position:absolute;left:calc(var(--taille) / -2);top:calc(var(--taille) / -2);width:var(--taille);height:var(--taille);color:var(--jaune);opacity:0;z-index:3}
.unlock-sparkle svg{display:block;width:100%;height:100%;fill:currentColor;overflow:visible;filter:drop-shadow(0 0 3px var(--jaune))}
.is-unlocking .unlock-light{animation:evo-lumiere 2s cubic-bezier(.3,.6,.3,1) both}
.is-unlocking .unlock-flash{animation:evo-eclair 2s linear both}
.is-unlocking .unlock-ring{animation:evo-onde 2s cubic-bezier(.2,.7,.3,1) both}
.is-unlocking .unlock-sparkle{animation:evo-etincelle 2s linear calc(var(--t,0ms) / 4) both}
/* Sans rendu 3D prêt (réseau lent), le compagnon 2D s’illumine seulement : rien n’attend le chargement. */
.is-unlocking>.compagnon{animation:evo-attente 2s ease-in-out both}
.is-unlocking.is-3d>.compagnon{animation:evo-2d 2s linear both}
.is-unlocking.is-3d>.compagnon-3d,.is-unlocking.is-3d>.compagnon-3d-cadre{animation:evo-3d 2s linear both}
@keyframes evo-2d{
  0%{opacity:1;transform:none;filter:contrast(1) brightness(1) drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent);animation-timing-function:ease-out}
  6%{transform:translateY(0) scale(1.04,.92);animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  14%{transform:translateY(-6%) scale(.98,1.04);animation-timing-function:ease-in}
  21%{transform:translateY(0) scale(1.02,.97);filter:contrast(1) brightness(1.3) drop-shadow(0 0 8px var(--jaune)) drop-shadow(0 0 0 transparent);animation-timing-function:ease-in-out}
  33%{opacity:1;transform:scale(1.03);filter:contrast(0) brightness(2) drop-shadow(0 0 6px var(--jaune)) drop-shadow(0 0 18px var(--jaune));animation-timing-function:steps(1,end)}
  40%{opacity:0;animation-timing-function:steps(1,end)}
  45%{opacity:1;animation-timing-function:steps(1,end)}
  49%{opacity:0;animation-timing-function:steps(1,end)}
  52.5%{opacity:1;animation-timing-function:steps(1,end)}
  55%{opacity:0;animation-timing-function:steps(1,end)}
  57%{opacity:1;animation-timing-function:steps(1,end)}
  58%,100%{opacity:0;transform:scale(1.03);filter:contrast(0) brightness(2) drop-shadow(0 0 6px var(--jaune)) drop-shadow(0 0 18px var(--jaune))}
}
@keyframes evo-3d{
  0%,39.9%{opacity:0;transform:scale(1);filter:contrast(0) brightness(2) drop-shadow(0 0 6px var(--jaune)) drop-shadow(0 0 18px var(--jaune));animation-timing-function:steps(1,end)}
  40%{opacity:1;animation-timing-function:steps(1,end)}
  45%{opacity:0;animation-timing-function:steps(1,end)}
  49%{opacity:1;animation-timing-function:steps(1,end)}
  52.5%{opacity:0;animation-timing-function:steps(1,end)}
  55%{opacity:1;animation-timing-function:steps(1,end)}
  57%{opacity:0;animation-timing-function:steps(1,end)}
  58%{opacity:1;animation-timing-function:steps(1,end)}
  62%{opacity:1;transform:scale(1);filter:contrast(0) brightness(2) drop-shadow(0 0 6px var(--jaune)) drop-shadow(0 0 18px var(--jaune));animation-timing-function:cubic-bezier(.2,.8,.2,1)}
  72%{transform:scale(1.08);filter:contrast(1) brightness(1.15) drop-shadow(0 0 4px var(--jaune)) drop-shadow(0 0 12px var(--jaune));animation-timing-function:ease-in-out}
  82%{transform:scale(.97,1.02)}
  91%{transform:scale(1.01,.99)}
  100%{opacity:1;transform:scale(1);filter:contrast(1) brightness(1) drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent)}
}
@keyframes evo-attente{0%,100%{filter:brightness(1) drop-shadow(0 0 0 transparent);transform:none}45%{filter:brightness(1.25) drop-shadow(0 0 10px var(--jaune));transform:scale(1.04)}}
@keyframes evo-lumiere{0%{opacity:0;transform:scale(.3)}10%{opacity:.35;transform:scale(.55)}33%{opacity:.75;transform:scale(.95)}58%{opacity:.85;transform:scale(1.05)}64%{opacity:.95;transform:scale(1.18)}100%{opacity:0;transform:scale(1.3)}}
@keyframes evo-eclair{0%,57%{opacity:0;transform:scale(.3)}62%{opacity:1;transform:scale(1)}78%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
@keyframes evo-onde{0%,59%{opacity:0;transform:scale(.2)}62%{opacity:.95;transform:scale(.35)}90%{opacity:0;transform:scale(2)}100%{opacity:0;transform:scale(2)}}
/* Les étincelles convergent vers le compagnon pendant qu’il se charge, puis jaillissent avec l’éclair. */
@keyframes evo-etincelle{
  0%,12%{opacity:0;transform:rotate(var(--a)) translateX(calc(var(--fx,262px) * var(--k) * 1.15)) rotate(calc(var(--a) * -1)) scale(.6)}
  22%{opacity:1}
  50%{opacity:.9;transform:rotate(var(--a)) translateX(calc(var(--fx,262px) * var(--k) * .12)) rotate(calc(var(--a) * -1 + 90deg)) scale(.5)}
  56%{opacity:0;transform:rotate(var(--a)) translateX(0) rotate(calc(var(--a) * -1 + 90deg)) scale(.3)}
  60%{opacity:1;transform:rotate(var(--a)) translateX(calc(var(--fx,262px) * var(--k) * .2)) rotate(calc(var(--a) * -1)) scale(1.1)}
  90%,100%{opacity:0;transform:rotate(var(--a)) translateX(calc(var(--fx,262px) * var(--k) * 1.2)) rotate(calc(var(--a) * -1 + 60deg)) scale(.6)}
}

/* Le choix du compagnon, comme une sélection de personnage : chaque module actif montre son compagnon 3D, immobile.
   Seule la carte survolée à la souris (ou qui a le focus clavier) bouge : elle se soulève de 4 px et son compagnon
   se balance (compagnon.js). Sur écran tactile, pas de survol : le toucher ouvre le module. */
.module-dock{position:absolute;left:50%;top:var(--dock-top,52%);transform:translate(-50%,-50%);display:flex;align-items:stretch;gap:20px;z-index:4;max-width:calc(100% - 40px)}
.module-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;width:236px;padding:14px 14px 18px;border:1px solid var(--bleu-filet);border-radius:var(--rayon-module);background:var(--blanc);color:var(--marine);text-decoration:none;box-shadow:var(--ombre-carte);cursor:pointer;transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s}
.module-figure{position:relative;display:flex;align-items:flex-end;justify-content:center;width:100%;height:206px;padding-top:12px;border-radius:var(--rayon-dossier);background:var(--bleu-pale);transition:background .28s}
.module-figure .compagnon-3d{height:184px;width:auto;max-width:100%;object-fit:contain;object-position:50% 100%;transform-origin:50% 96%;opacity:0;transition:opacity .25s}
.module-figure .compagnon-3d.is-ready{opacity:1}
.module-metre .module-figure .compagnon-3d{height:168px}
.module-figure .compagnon{display:block;width:auto;height:172px;overflow:visible}
/* Les compagnons des cartes vivent un tout petit peu (demande de Jean du 22 octobre) : ils respirent, l’étoile scintille,
   chacun à son rythme ; la carte survolée se balance en plus (compagnon.js). Le cadre épouse l’image, l’éclat reste sur l’étoile. */
.compagnon-3d-cadre{position:relative;display:inline-block;line-height:0;transform-origin:50% 96%;animation:c3d-respire 3.6s ease-in-out infinite}
.module-chantier .compagnon-3d-cadre{animation-delay:-1.2s}
.module-metre .compagnon-3d-cadre{animation-delay:-2.3s}
.compagnon-3d-eclat{position:absolute;left:calc(var(--ex,.8) * 100%);top:calc(var(--ey,.3) * 100%);width:22%;aspect-ratio:1;translate:-50% -50%;opacity:0;pointer-events:none;color:var(--blanc);filter:drop-shadow(0 0 2px var(--jaune)) drop-shadow(0 0 6px var(--jaune));animation:c3d-eclat 3.2s ease-in-out 1s infinite}
.compagnon-3d-eclat svg{display:block;width:100%;height:100%;fill:currentColor}
.module-chantier .compagnon-3d-eclat{animation-delay:2s}
.module-metre .compagnon-3d-eclat{animation-delay:2.9s}
@keyframes c3d-respire{0%,100%{scale:1 1}50%{scale:1.008 1.022}}
@keyframes c3d-eclat{0%,58%,100%{opacity:0;scale:.2;rotate:0deg}68%{opacity:1;scale:1;rotate:45deg}80%{opacity:0;scale:.35;rotate:90deg}}
/* L’éveil (espace déjà ouvert, une fois par onglet) : le compagnon tracé du logo, assis, puis la même transformation. */
.module-active .module-figure>.compagnon{display:none}
.module-figure.is-eveil>.compagnon{display:block;position:absolute;left:0;right:0;bottom:12px;z-index:1;margin:0 auto;height:150px}
.module-figure.is-eveil:not(.is-3d)>.compagnon-3d-cadre{opacity:0}
.module-figure>.unlock-fx{left:50%;top:56%;scale:.78}
.module-figure.is-unlocking{z-index:2}
.module-name{flex:1;display:flex;align-items:center;justify-content:center;font-family:var(--police-titres);font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.2;text-align:center;color:var(--marine)}
.module-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:var(--rayon-pilule);background:var(--marine);color:var(--blanc);font-size:15px;font-weight:600;line-height:1.15;transition:background .2s}
.module-cta .icon{width:16px;height:16px}
.module-active:focus-visible{transform:translateY(-4px);border-color:var(--bleu);box-shadow:var(--ombre-haute)}
.module-active:focus-visible .module-figure{background:var(--bleu-clair)}
@media(hover:hover){.module-active:hover{transform:translateY(-4px);border-color:var(--bleu);box-shadow:var(--ombre-haute)}.module-active:hover .module-figure{background:var(--bleu-clair)}.module-active:hover .module-cta{background:var(--nuit)}}
.module-card.is-chosen{transform:translateY(-4px);border-color:var(--marine);box-shadow:0 0 0 1px var(--marine),0 0 0 7px var(--bleu-clair),var(--ombre-carte)}
/* Le module à venir : pas encore débloqué, silhouette grise du logo sans étoile, cadenas, « À venir ». */
.module-soon{cursor:not-allowed;color:var(--encre);border-style:dashed;box-shadow:none}
.module-soon .module-name{color:var(--encre)}
.module-soon .module-cta{min-height:36px;padding:6px 14px;gap:7px;background:var(--bleu-pale);color:var(--encre);font-size:14px}
.module-soon .module-cta .icon{width:15px;height:15px}
.module-soon .module-figure .compagnon{opacity:.85}
/* L’arrivée (1,4 s) : la carte de connexion et le compagnon débloqué s’effacent, puis les cartes montent et chaque compagnon 3D apparaît dans la sienne. */
body[data-auth="entering"] .module-card{animation:card-enter .7s .3s both cubic-bezier(.2,.7,.2,1)}
body[data-auth="entering"] .module-chantier{animation-delay:.38s}
body[data-auth="entering"] .module-metre{animation-delay:.46s}
body[data-auth="entering"] .module-rh{animation-delay:.54s}
body[data-auth="entering"] .module-figure .compagnon-3d{animation:figure-enter .6s var(--elan) .48s both}
body[data-auth="entering"] .module-chantier .module-figure .compagnon-3d{animation-delay:.56s}
body[data-auth="entering"] .module-metre .module-figure .compagnon-3d{animation-delay:.64s}
body[data-auth="entering"] .account-area{animation:fade-in .5s ease-out both}
@keyframes card-enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes figure-enter{from{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

/* Connexion : un état vérifié par le serveur, jamais un simple indicateur local. */
.auth-layer{position:absolute;inset:112px 0 0;z-index:4;display:flex;flex-direction:column;align-items:center;padding:24px 16px 40px;overflow-y:auto;transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
.auth-layer.leaving{opacity:0;transform:translateY(-18px);pointer-events:none}
.auth-card{width:min(100%,420px);margin:auto;flex-shrink:0;padding:32px 34px 26px;background:var(--blanc);border:1px solid var(--bleu-filet);border-radius:var(--rayon-module);box-shadow:var(--ombre-carte);text-align:left}
.auth-kicker{display:block;text-align:center;font-size:13px;font-weight:600;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--encre);margin-bottom:10px}
.auth-card h2{font-family:var(--police-titres);font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--marine);text-align:center;margin:0 0 10px}
.auth-intro{text-align:center;font-size:16px;line-height:1.5;color:var(--encre);margin:0 0 24px}
.auth-card label{display:block;font-size:15px;font-weight:600;line-height:1.3;color:var(--marine);margin:0 0 8px}
.auth-card input{appearance:none;display:block;width:100%;min-width:0;height:48px;padding:0 14px;border:1px solid var(--trait-champ);border-radius:var(--rayon-champ);background:var(--blanc);color:var(--marine);font:400 16px/1.2 var(--police-texte);transition:border-color .2s}
.auth-card input:hover{border-color:var(--marine)}
.auth-card input:focus-visible{border-color:var(--bleu-fonce)}
.auth-card input::placeholder{color:var(--encre);opacity:1}
#login-email,#login-name{margin-bottom:18px}
.password-label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:3px}
.password-label label{margin:0}
/* Lien d’aide : bleu foncé souligné ; sa zone de clic fait 44 px de haut sans écarter les champs. */
.text-action{display:inline-flex;align-items:center;min-height:44px;margin:-7px -6px -5px 0;padding:0 6px;border:0;border-radius:var(--rayon-champ);background:none;font:600 14px/1.2 var(--police-texte);color:var(--bleu-fonce);text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.22em;cursor:pointer}
.text-action:hover{color:var(--marine)}
.password-field{position:relative}
.password-field input{padding-right:52px}
#toggle-password{position:absolute;right:2px;top:2px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:8px;background:none;color:var(--encre);cursor:pointer;transition:background .16s,color .16s}
#toggle-password:hover{background:var(--bleu-pale);color:var(--marine)}
#toggle-password svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.5;fill:none}
.auth-submit{display:flex;justify-content:center;align-items:center;gap:10px;width:100%;min-height:48px;margin-top:22px;padding:12px 22px;border:1px solid var(--marine);border-radius:var(--rayon-pilule);background:var(--marine);color:var(--blanc);font:600 16px/1.2 var(--police-texte);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.auth-submit:hover:not(:disabled){background:var(--nuit);border-color:var(--nuit)}
.auth-submit:disabled{cursor:wait;background:var(--bleu-clair);border-color:var(--bleu-clair);color:var(--encre)}
.auth-submit .icon{width:18px;height:18px}
.auth-submit.is-busy .icon{display:none}
.auth-submit.is-busy::after,.auth-spinner{content:'';width:16px;height:16px;flex-shrink:0;border-radius:50%;border:2px solid var(--bleu-filet);border-top-color:var(--marine);animation:portal-spin .8s linear infinite}
.auth-footnote{font-size:14px;line-height:1.5;color:var(--encre);text-align:center;margin:18px 0 0}
.auth-hint{font-size:14px;line-height:1.5;color:var(--encre);margin:8px 0 0}
.auth-error{font-size:15px;font-weight:600;line-height:1.45;background:var(--rouge-pale);border-radius:var(--rayon-champ);padding:11px 14px;color:var(--rouge);margin:16px 0 0}
.auth-preview{font-size:14px;line-height:1.5;color:var(--encre);border-top:1px solid var(--bleu-filet);text-align:center;padding-top:12px;margin:14px 0 0}
#setup-secret-fields{margin-top:18px}
.auth-loading{display:flex;align-items:center;gap:12px;color:var(--encre);font-size:15px;margin:auto}
.auth-unavailable p{font-size:16px;line-height:1.5;color:var(--encre);text-align:center;margin:0}

/* Compte : pastille blanche à filet bleu, menu en carte. */
.account-area{position:absolute;z-index:6;right:32px;top:44px}
.account-trigger{display:flex;align-items:center;gap:8px;height:44px;padding:0 13px 0 6px;border:1px solid var(--bleu-filet);border-radius:var(--rayon-pilule);background:var(--blanc);color:var(--marine);box-shadow:var(--ombre-douce);cursor:pointer;transition:border-color .2s}
.account-trigger:hover,.account-trigger[aria-expanded="true"]{border-color:var(--marine)}
.account-trigger>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--bleu-clair);font:700 13px/1 var(--police-texte);color:var(--marine)}
.account-trigger svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.account-menu{position:absolute;right:0;top:54px;width:272px;padding:16px;display:flex;flex-direction:column;gap:4px;background:var(--blanc);border:1px solid var(--bleu-filet);border-radius:var(--rayon-module);box-shadow:var(--ombre-haute)}
.account-menu strong{font-size:16px;font-weight:700;line-height:1.3;color:var(--marine);overflow-wrap:anywhere}
.account-menu>span{font-size:14px;line-height:1.5;color:var(--encre);overflow-wrap:anywhere;margin-bottom:10px}
.account-menu button{min-height:44px;padding:10px 12px;border:0;border-radius:var(--rayon-champ);background:transparent;color:var(--marine);font:600 15px/1.2 var(--police-texte);text-align:left;cursor:pointer;transition:background .16s}
.account-menu button:hover{background:var(--bleu-pale)}
.account-menu p{font-size:14px;font-weight:600;line-height:1.5;color:var(--rouge);margin:6px 0 0}

/* Aide « mot de passe oublié » : dialogue natif blanc, voile marine. */
.help-dialog{width:min(420px,calc(100% - 32px));padding:32px 30px 28px;border:1px solid var(--bleu-filet);border-radius:var(--rayon-module);background:var(--blanc);color:var(--marine);box-shadow:var(--ombre-haute)}
.help-dialog::backdrop{background:var(--voile);backdrop-filter:blur(3px)}
.help-dialog h2{font-family:var(--police-titres);font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0 44px 12px 0}
.help-dialog p{font-size:16px;line-height:1.5;color:var(--encre);margin:0}
.dialog-close{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:var(--rayon-pilule);background:none;font:400 26px/1 var(--police-texte);color:var(--marine);cursor:pointer;transition:background .16s}
.dialog-close:hover{background:var(--bleu-clair)}
.noscript-note{position:fixed;inset:35% 16px auto;z-index:15;max-width:420px;margin:0 auto;padding:28px;background:var(--blanc);border:1px solid var(--bleu-filet);border-radius:var(--rayon-module);box-shadow:var(--ombre-carte);text-align:center;font-size:16px}
@keyframes portal-spin{to{transform:rotate(360deg)}}

@media(min-width:1600px){.site-header{top:34px}.compagnons-logo{width:262px}.darcos-logo{width:82px;height:82px}}
@media(max-width:1399px){.module-dock{gap:16px}.module-card{width:220px}.module-figure{height:192px}.module-figure .compagnon-3d{height:170px}.module-metre .module-figure .compagnon-3d{height:156px}.module-figure .compagnon{height:160px}}
@media(max-width:750px){.site-header{top:22px}.brand-pair{gap:18px;padding:6px 14px}.compagnons-logo{width:200px}.darcos-logo{width:62px;height:62px}}
/* Téléphone : deux colonnes (le Métré centré dessous), le module à venir sur une ligne compacte ; cibles de 44 px.
   L’accueil suit le flux sous l’en-tête et le bouton du compte : rien ne se chevauche, la page s’allonge si l’écran est court. */
@media(max-width:600px){
  .home{min-height:560px}
  body[data-auth="home"] .home,body[data-auth="entering"] .home{height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:176px 16px 28px}
  .auth-layer{inset:104px 0 0;padding:20px 16px 28px}
  .auth-card{padding:24px 20px 20px}
  .auth-card h2{font-size:28px}
  .auth-intro{margin-bottom:22px}
  .account-area{right:16px;top:116px}
  .account-menu{top:52px;width:min(272px,calc(100vw - 32px))}
  .module-dock{position:relative;left:auto;top:auto;transform:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:none}
  .module-card{width:auto;min-width:0;gap:10px;padding:10px 10px 12px}
  .module-figure{height:124px;padding-top:8px}
  .module-figure .compagnon-3d{height:112px}
  .module-metre .module-figure .compagnon-3d{height:104px}
  .module-name{font-size:17px}
  .module-cta{min-height:40px;padding:8px 16px;font-size:15px}
  .module-metre{grid-column:1 / -1;justify-self:center;width:calc(50% - 6px)}
  .module-rh{grid-column:1 / -1;flex-direction:row;justify-content:flex-start;gap:12px;min-height:72px;padding:8px 14px 8px 8px}
  .module-rh .module-figure{flex:none;width:54px;height:56px;padding:4px 0 0}
  .module-rh .module-figure .compagnon{height:50px}
  .module-rh .module-name{flex:1;justify-content:flex-start;text-align:left;font-size:16px}
  .module-rh .module-cta{white-space:nowrap}
}
@media(max-width:350px){.brand-pair{gap:12px}.compagnons-logo{width:172px}.darcos-logo{width:54px;height:54px}.module-name{font-size:16px}}
@media(max-height:700px) and (min-width:751px){.home{min-height:520px}.site-header{top:14px}.compagnons-logo{width:190px}.darcos-logo{width:58px;height:58px}.module-figure{height:168px}.module-figure .compagnon-3d{height:148px}.module-metre .module-figure .compagnon-3d{height:136px}.module-figure .compagnon{height:140px}}
@media(max-height:760px){.auth-layer{padding-top:15px}.auth-card{padding-top:24px;padding-bottom:21px}.auth-kicker{margin-bottom:8px}.auth-intro{margin-bottom:20px}.auth-footnote{margin-top:15px}}
/* Mouvement réduit : rien ne bouge ; le rendu 3D remplace simplement le tracé 2D (portal.js). */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.module-active:hover,.module-active:focus-visible,.module-card.is-chosen{transform:none!important}}
/* Éveil : le compagnon tracé garde la taille des rendus 3D de chaque format de carte. */
@media(max-width:1399px){.module-figure.is-eveil>.compagnon{height:140px}}
@media(max-height:700px) and (min-width:751px){.module-figure.is-eveil>.compagnon{height:124px}}
@media(max-width:600px){.module-figure.is-eveil>.compagnon{height:96px;bottom:8px}}