/* Complexity Lab — pages légales. Même langage visuel que l'accueil,
   même absence de script et de ressource extérieure. */
:root{
  --noir:#06070a; --encre:#e9eef6; --doux:#97a4b8; --faible:#6b7889;
  --verre:rgba(255,255,255,.05); --bord:rgba(255,255,255,.1);
  --bleu:#6ba7ee; --vert:#4fd39a; --orange:#ff8f5e;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--noir);color:var(--encre);line-height:1.68;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;
  letter-spacing:-.011em;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(52vw 42vw at 8% -8%, rgba(37,99,235,.3), transparent 70%),
    radial-gradient(44vw 40vw at 98% 22%, rgba(124,58,237,.26), transparent 70%);
  filter:blur(26px);
}
@keyframes monte{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes descend{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}

.barre{
  position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:18px;
  padding:14px 28px;background:rgba(8,10,14,.62);border-bottom:1px solid var(--bord);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  animation:descend .8s var(--ease) both;
}
.barre a{font-size:15px;font-weight:600;color:var(--encre);text-decoration:none;letter-spacing:-.02em}

.enveloppe{
  max-width:780px;margin:0 auto;padding:130px 28px 110px;
  animation:monte .9s var(--ease) .1s both;
}
h1{font-size:clamp(34px,5.6vw,54px);line-height:1.04;letter-spacing:-.04em;margin:0 0 14px;font-weight:700}
.doux{color:var(--doux);font-size:15px}

h2{
  font-size:19px;font-weight:620;letter-spacing:-.025em;
  margin:56px 0 14px;padding-top:30px;border-top:1px solid var(--bord);
}
p,li{max-width:68ch;color:#cfd8e6}
p{margin:.85em 0}
ul{padding-left:22px}
li{margin:.5em 0}
a{color:var(--bleu);text-decoration:none;border-bottom:1px solid rgba(107,167,238,.3)}
a:hover{border-bottom-color:var(--bleu)}
em{color:var(--doux);font-style:normal;font-family:var(--mono);font-size:.94em}
strong{color:var(--encre);font-weight:580}

.retour{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;margin:0 0 30px}
.retour a{color:var(--faible);border:none}
.retour a:hover{color:var(--encre)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}


/* ══ LA MARQUE ══════════════════════════════════════════════════
   Le logo raconte la méthode en se dessinant : l'anneau (tout ce
   qui est possible) → les candidates (nombreuses, ternes) → le
   trait depuis le centre (le patient) → une seule s'allume.
   Le récit ne se joue QU'UNE FOIS. Une animation en boucle attire
   l'œil en permanence et le vole au texte ; seules la respiration
   du halo et la rotation au survol continuent. */
.marque{display:inline-flex;align-items:center;gap:13px;text-decoration:none;border:none!important}
.logo-boite{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;position:relative}
.logo{width:34px;height:34px;overflow:visible;
  animation:logo-entre 1s var(--ease) both}
@keyframes logo-entre{from{opacity:0;transform:scale(.8) rotate(-30deg)}to{opacity:1;transform:none}}

.logo .anneau{animation:trace-anneau 1.15s var(--ease) .15s forwards}
@keyframes trace-anneau{to{stroke-dashoffset:0}}

.logo .candidates circle{opacity:0;transform-origin:32px 32px;
  animation:pointe .5s var(--ease) forwards;
  animation-delay:calc(.55s + var(--i) * .035s)}
@keyframes pointe{from{opacity:0;transform:scale(.3)}to{opacity:.45;transform:none}}

.logo .trait{animation:trace-trait .7s var(--ease) 1.25s forwards}
@keyframes trace-trait{to{stroke-dashoffset:0}}

.logo .retenue{transform-origin:49.98px 20.48px;transform:scale(0);
  animation:surgit-cible .6s var(--ease) 1.75s forwards}
@keyframes surgit-cible{0%{transform:scale(0)}65%{transform:scale(1.35)}100%{transform:scale(1)}}

/* La seule boucle : une respiration lente, presque imperceptible.
   C'est ce qui fait qu'un logo paraît vivant sans être agité. */
.logo .halo{transform-origin:49.98px 20.48px;opacity:0;
  animation:halo-arrive .5s ease 1.8s forwards, halo-respire 4.2s ease-in-out 2.4s infinite}
@keyframes halo-arrive{to{opacity:1}}
@keyframes halo-respire{0%,100%{transform:scale(.88)}50%{transform:scale(1.14)}}

.logo .coeur{opacity:0;animation:parait .5s ease 1.05s forwards}
@keyframes parait{to{opacity:1}}

/* Au survol : l'anneau pivote d'un cran, comme si on rejouait le choix. */
.marque:hover .logo{transform:rotate(12deg) scale(1.06);transition:transform .6s var(--ease)}

/* ══ LE MOT ════════════════════════════════════════════════════
   « Complexity » en demi-gras serré, « Lab » en dégradé : le nom
   se lit comme une seule respiration, et l'accent tombe sur le
   mot qui dit ce que c'est. */
.mot{display:inline-flex;align-items:baseline;gap:.3em;white-space:nowrap;
  font-size:16.5px;letter-spacing:-.03em;line-height:1}
.mot b{font-weight:620;color:var(--encre,#e9eef6)}
.mot i{
  font-style:normal;font-weight:620;
  background:linear-gradient(100deg,#4fd39a,#6ba7ee 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Un filet sous le mot, qui se tire au chargement. */
.mot::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:linear-gradient(90deg,#4fd39a,transparent);opacity:.5;
  transform-origin:left;animation:grandit .9s var(--ease) 1.5s both}
.marque .mot{position:relative}

@media (prefers-reduced-motion: reduce){
  .logo *{animation:none!important;opacity:1!important;transform:none!important;
    stroke-dashoffset:0!important}
  .logo .candidates circle{opacity:.45!important}
}

/* ══ TÉLÉPHONE ═════════════════════════════════════════════════
   Testé à 390 px (iPhone 15) et 360 px (Android courant). */
@media (max-width:560px){
  .barre{padding:11px 18px;gap:12px}
  .logo,.logo-boite{width:28px;height:28px}
  .mot{font-size:15px}
  .barre .pastille{font-size:9.5px;padding:4px 8px;letter-spacing:.06em}
  .wrap{padding:0 20px}
  header{padding:116px 0 64px;min-height:auto}
  section{padding:72px 0}
  h1{font-size:clamp(34px,10.5vw,52px);letter-spacing:-.035em}
  .chapeau{font-size:17px;max-width:none}
  h2.titre{font-size:clamp(25px,7.6vw,34px)}
  .intro{font-size:16px;margin-bottom:32px}
  .garde{padding:20px 20px;margin-top:34px}
  .grille{grid-template-columns:1fr;gap:14px}
  .carte{padding:24px 22px}
  .gros{font-size:clamp(34px,11vw,46px)}
  .bloc{padding:4px 18px 6px}
  .maxime{font-size:21px;max-width:none}
  .note{padding:20px 20px}
  .frise{padding-left:26px}
  .frise::before{left:8px}
  .jalon::before{left:-26px;width:12px;height:12px}
  /* Un tableau de 3 colonnes à 360 px devient illisible : on le
     dépile en blocs étiquetés plutôt que de le laisser déborder. */
  table,tbody,tr,td,th{display:block;width:100%}
  thead{display:none}
  tr{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.07)}
  tr:last-child{border-bottom:none}
  td{border:none;padding:4px 0}
  td:last-child{margin-top:8px}
  .licence{white-space:normal}
}
@media (max-width:380px){
  .wrap{padding:0 16px}
  .barre{padding:10px 14px}
  .mot{font-size:14px}
}

/* Les liens de la barre. « Comprendre » n'apparaît que lorsque la page
   existe : un menu qui mène à un 404 est pire que pas de menu. */
.barre .menu{display:flex;align-items:center;gap:4px;margin-left:auto}
.barre .menu a{
  font-size:14px;color:var(--doux,#97a4b8);text-decoration:none;border:none;
  padding:7px 13px;border-radius:999px;white-space:nowrap;
  transition:color .3s var(--ease),background .3s var(--ease);
}
.barre .menu a:hover{color:var(--encre,#e9eef6);background:rgba(255,255,255,.07)}
.barre .menu a[aria-current]{color:var(--encre,#e9eef6);background:rgba(255,255,255,.07)}
@media (max-width:560px){
  .barre .menu{gap:0;margin-left:auto}
  .barre .menu a{padding:6px 9px;font-size:13px}
  .barre nav a.secondaire{display:none}
}

/* La barre : marque à gauche, menu collé à DROITE. `margin-left:auto`
   sur le menu suffit, à condition que la barre soit bien en flex et que
   la marque ne s'étire pas. */
.barre{justify-content:space-between}
.barre .marque{margin-right:auto}
.barre .menu{margin-left:auto;display:flex;align-items:center;gap:4px}