/******************** Reset (identique aux autres sites Alpify) ********************/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,
strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,
label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,
details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,
section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
*,::after,::before{box-sizing:border-box}

/******************** Tokens ********************/
:root{
  --identity: #EF7223;
  --strong:   #C24C0E;
  --ink:      #191A1C;
  --ink-soft: #565A61;
  --paper: #FFFFFF;
  --mist:  #F2F3F5;
  --line:  #E1E3E7;

  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Hanken Grotesk', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius: 14px;
  --section: clamp(4rem, 8vw, 6.5rem);
  --shadow: 0 10px 30px -12px rgba(25,26,28,.18);
  --container: 1180px;
  --t: .2s ease;
  --ease: cubic-bezier(.4,0,.2,1);

  --error: #D64545; /* usage exclusivement fonctionnel (erreurs de formulaire), hors palette d'identité */
}

html{ scroll-behavior:smooth; }
body{ font-family:var(--font-body); font-size:16px; line-height:1.6; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }

/******************** Typo de base (portée globale, volontairement en tête de fichier) ********************
   Tout composant plus spécifique défini plus bas (.main-nav ul, .footer-col a, etc.)
   continue à gagner sur ces règles grâce à la cascade normale : rien à exclure à la main. */

h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); font-weight:700; line-height:1.2; letter-spacing:-.01em; color:var(--ink); }
h1{ font-size:2rem; }
h2{ font-size:1.6rem; }
h3{ font-size:1.3rem; }
h4{ font-size:1.1rem; }
h5{ font-size:1rem; text-transform:uppercase; letter-spacing:.04em; }
h6{ font-size:.9rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; }

p{ margin:0; }
p + p{ margin-top:1em; }

a{ color:var(--strong); text-decoration:underline; text-underline-offset:.15em; }
a:hover{ color:var(--identity); }

strong, b{ color:var(--ink); font-weight:700; }
em, i{ font-style:italic; }
u{ text-decoration:underline; }
s, del{ text-decoration:line-through; opacity:.7; }

ul, ol{ padding-left:1.3em; margin-bottom:1.2em; }
ul{ list-style:disc; }
ol{ list-style:decimal; }
li{ margin-bottom:.4em; }
li::marker{ color:var(--strong); font-weight:600; }
ul ul, ol ol, ul ol, ol ul{ margin-top:.4em; margin-bottom:0; }

blockquote{
  margin:0 0 1.2em; padding:.3em 0 .3em 1.2em;
  border-left:3px solid var(--strong); color:var(--ink); font-style:italic;
}
blockquote p{ margin-bottom:.5em; }
blockquote p:last-child{ margin-bottom:0; }
blockquote small{ display:block; font-style:normal; font-size:.85em; color:var(--ink-soft); }

code{ font-family:var(--font-mono); font-size:.88em; background:var(--mist); padding:.15em .4em; border-radius:5px; color:var(--strong); }
pre{ background:var(--ink); color:#fff; padding:1.2em 1.4em; border-radius:var(--radius); overflow-x:auto; margin-bottom:1.2em; font-size:.88rem; line-height:1.6; }
pre code{ background:none; color:inherit; padding:0; }

hr{ border:none; border-top:1px solid var(--line); margin:2.2em 0; }

table{ width:100%; margin-bottom:1.2em; font-size:.92em; }
th{ text-align:left; padding:.7em 1em; background:var(--mist); color:var(--ink); font-weight:700; border-bottom:1px solid var(--line); }
td{ padding:.7em 1em; border-bottom:1px solid var(--line); }


.wrap{ max-width:var(--container); margin-inline:auto; padding-inline:1.5rem; }

.kicker{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--font-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--strong);
  margin-bottom:.9rem;
}
.kicker::before{ content:''; width:22px; height:1.5px; background:var(--strong); display:block; flex-shrink:0; }

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

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/******************** Boutons (même grammaire que Scolia : capitales, tracking, radius via variable) ********************/
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.9em 2em;
  font-family:var(--font-display);
  font-size:.78rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  border:2px solid transparent; border-radius:var(--radius);
  cursor:pointer; white-space:nowrap; line-height:1;
  transition:all var(--t) var(--ease);
}
.btn-primary{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn-primary:hover{ background:var(--strong); border-color:var(--strong); transform:translateY(-2px); box-shadow:0 10px 24px rgba(194,76,14,.3); }
.btn-ghost{ background:transparent; color:var(--paper); border-color:rgba(255,255,255,.35); }
.btn-ghost:hover{ background:rgba(255,255,255,.1); border-color:var(--paper); transform:translateY(-2px); }

/******************** Header ********************/
.site-header{ position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--line); }
.header-row{ display:flex; align-items:center; justify-content:space-between; padding-block:1.1rem; }
.logo-mark{ height:26px; width:auto; }

.main-nav ul{ display:flex; align-items:center; gap:1.9rem; list-style:none; padding-left:0; margin-bottom:0; }
.main-nav > ul > li{ position:relative; }
.main-nav a{ display:flex; align-items:center; gap:.35rem; font-weight:600; font-size:.92rem; color:var(--ink); text-decoration:none; position:relative; padding-block:.3rem; }
.main-nav > ul > li > a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--identity); transform:scaleX(0); transform-origin:left; transition:transform var(--t);
}
.main-nav > ul > li > a:hover::after{ transform:scaleX(1); }
.main-nav > ul > li > a.on{ color:var(--strong); }
.main-nav > ul > li > a.on::after{ transform:scaleX(1); }

.main-nav .nav-pill{ border:1.5px solid var(--line); border-radius:999px; padding:.45rem 1rem; }
.main-nav .nav-pill::after{ display:none; }
.main-nav .nav-pill:hover{ border-color:var(--strong); color:var(--strong); }

.nav-toggle{ display:none; background:none; border:none; font-size:1.5rem; color:var(--ink); padding:.25rem; }

@media (max-width:960px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(80vw,320px);
    background:var(--paper); box-shadow:-12px 0 30px rgba(25,26,28,.14);
    transform:translateX(100%); transition:transform .3s ease;
    padding:5rem 1.5rem; display:block; overflow-y:auto;
  }
  .main-nav[data-open="true"]{ transform:translateX(0); }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap:1.5rem; width:100%; }
  .nav-toggle{ display:inline-block; }
}

/******************** Hero ********************/
.hero{ padding-block:3.5rem; }
.hero-inner{ display:grid; grid-template-columns:1fr .82fr; gap:3.5rem; align-items:center; }
.hero h1{ font-size:clamp(2.4rem,4.2vw,3.5rem); margin-bottom:1.4rem; }
.hero p.lede{ font-size:1.15rem; color:var(--ink-soft); max-width:46ch; margin-bottom:2rem; }

.hero-trust{ display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; margin-top:2rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.hero-trust span{ display:flex; align-items:center; gap:.5rem; font-size:.9rem; font-weight:600; color:var(--ink-soft); }
.hero-trust i{ color:var(--strong); font-size:1.1rem; }

.hero-photo{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.hero-photo img{ width:100%; height:560px; object-fit:cover; filter:grayscale(35%) sepia(18%) saturate(180%) hue-rotate(-12deg) brightness(.97); }

@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-photo img{ height:320px; }
}

/******************** Formations (plusieurs catégories) ********************/
.courses{ padding-block:var(--section); border-top:1px solid var(--line); }
.section-head{ max-width:60ch; margin-bottom:3rem; }
.section-head h2{ font-size:clamp(1.9rem,3.2vw,2.5rem); margin-bottom:.9rem; }
.section-head p{ color:var(--ink-soft); font-size:1.05rem; }

.course-category{ margin-bottom:4rem; }
.course-category:last-child{ margin-bottom:0; }
.category-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.6rem; flex-wrap:wrap; }
.category-head h3{ font-size:1.4rem; }
.category-head p{ color:var(--ink-soft); font-size:.95rem; }

.course-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.course-card{ display:flex; flex-direction:column; }
.course-photo{ border-radius:var(--radius); overflow:hidden; margin-bottom:1.2rem; }
.course-photo img{ width:100%; height:190px; object-fit:cover; filter:grayscale(35%) sepia(18%) saturate(180%) hue-rotate(-12deg) brightness(.97); transition:transform .4s ease; }
.course-card:hover .course-photo img{ transform:scale(1.045); }

.course-card h4{ font-family:var(--font-display); font-weight:700; font-size:1.2rem; margin-bottom:.5rem; }
.course-card p.desc{ color:var(--ink-soft); font-size:.94rem; margin-bottom:.9rem; }

.course-meta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:1rem; }
.course-meta span{ display:flex; align-items:center; gap:.35rem; font-size:.82rem; font-weight:600; color:var(--ink-soft); }
.course-meta i{ color:var(--strong); }

.course-link{ display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color:var(--ink); text-decoration:none; font-size:.92rem; margin-top:auto; }
.course-link i{ color:var(--strong); transition:transform var(--t); }
.course-card:hover .course-link i{ transform:translateX(3px); }

@media (max-width:900px){ .course-grid{ grid-template-columns:1fr; } }

/******************** Footer ********************/
.site-footer{ background:var(--ink); color:rgba(255,255,255,.85); padding-block:4rem 2rem; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem; }
.footer-brand .logo-mark{ filter:brightness(0) invert(1); margin-bottom:1rem; }
.footer-brand p{ color:rgba(255,255,255,.55); font-size:.92rem; max-width:30ch; }

.footer-col h4{ font-family:var(--font-mono); font-size:.72rem; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.45); margin-bottom:1rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:.7rem; list-style:none; padding-left:0; margin-bottom:0; }
.footer-col a{ font-size:.94rem; font-weight:500; color:rgba(255,255,255,.85); text-decoration:none; transition:color var(--t); }
.footer-col a:hover{ color:var(--identity); }
.footer-col li.place{ display:flex; align-items:center; gap:.5rem; font-size:.94rem; color:rgba(255,255,255,.85); }
.footer-col li.place i{ color:var(--identity); }

.social-row{ display:flex; gap:.6rem; margin-top:.3rem; }
.social-row a{ width:34px; height:34px; border-radius:var(--radius); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); transition:all var(--t); }
.social-row a:hover{ background:var(--identity); border-color:var(--identity); color:var(--ink); }

/* eduQua : composant repris à l'identique des autres sites Alpify */
.footer__eduqua{ display:flex; align-items:center; gap:.7rem; }
.footer__eduqua-logo{ width:34px; height:34px; flex-shrink:0; }
.footer__eduqua strong{ display:block; font-size:.82rem; color:rgba(255,255,255,.92); font-weight:700; }
.footer__eduqua span{ font-size:.78rem; color:rgba(255,255,255,.55); }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14); padding-top:1.6rem; margin-top:1rem;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
}
.footer-bottom__legal{ display:flex; gap:1.25rem; flex-wrap:wrap; }
.footer-bottom__legal a{ font-size:.82rem; color:rgba(255,255,255,.55); text-decoration:none; }
.footer-bottom__legal a:hover{ color:var(--identity); }
.copyright{ font-size:.82rem; color:rgba(255,255,255,.45); }
.credit{ font-size:.82rem; color:rgba(255,255,255,.45); }
.credit a{ color:rgba(255,255,255,.75); text-decoration:underline; text-underline-offset:.15em; }
.credit a:hover{ color:var(--identity); }

.footer-legalrow{ display:flex; flex-direction:column; gap:.6rem; }

@media (max-width:860px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/******************** Preuve sociale : groupe Alpify ********************/
.proof{ padding-block:var(--section); background:var(--mist); }
.proof-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.proof-intro h2{ font-size:clamp(1.7rem,2.8vw,2.2rem); margin:.6rem 0 1rem; }
.proof-intro p{ color:var(--ink-soft); font-size:1.02rem; max-width:42ch; }

.proof-facts{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; list-style:none; padding-left:0; margin-bottom:0; }
.proof-facts li{ display:flex; align-items:flex-start; gap:.8rem; margin-bottom:0; }
.proof-facts i{ font-size:1.4rem; color:var(--strong); margin-top:.15rem; }
.proof-facts strong{ display:block; font-family:var(--font-display); font-size:1.02rem; margin-bottom:.15rem; }
.proof-facts span{ font-size:.86rem; color:var(--ink-soft); }

@media (max-width:900px){ .proof-grid{ grid-template-columns:1fr; } .proof-facts{ grid-template-columns:1fr 1fr; } }

/******************** Témoignages ********************/
.testimonials{ padding-block:var(--section); border-top:1px solid var(--line); }
.testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.testimonial{ background:var(--mist); border-radius:var(--radius); padding:2rem; display:flex; flex-direction:column; gap:1.4rem; }
.testimonial i.ph-quotes{ font-size:1.8rem; color:var(--strong); }
.testimonial p{ font-size:1rem; color:var(--ink); line-height:1.6; }
.testimonial footer strong{ display:block; font-size:.92rem; }
.testimonial footer span{ display:block; font-size:.82rem; color:var(--ink-soft); margin-top:.1rem; }

@media (max-width:900px){ .testimonial-grid{ grid-template-columns:1fr; } }

/******************** Fil d'Ariane ********************/
.breadcrumb{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-size:.85rem; color:var(--ink-soft); padding-block:1.3rem; }
.breadcrumb a{ color:var(--ink-soft); font-weight:600; text-decoration:none; }
.breadcrumb a:hover{ color:var(--strong); }
.breadcrumb i{ font-size:.7rem; }
.breadcrumb span[aria-current]{ color:var(--ink); font-weight:600; }

/******************** Page catégorie ********************/
.category-hero{ padding-block:1rem 3.5rem; border-bottom:1px solid var(--line); }
.category-hero h1{ font-size:clamp(2.1rem,3.6vw,3rem); margin-bottom:1rem; }
.category-hero p{ font-size:1.08rem; color:var(--ink-soft); max-width:56ch; }
.category-listing{ padding-block:var(--section); }

/******************** Page cours ********************/
.course-hero{ padding-block:1rem 2rem; border-bottom:1px solid var(--line); }
.course-hero h1{ font-size:clamp(2.1rem,3.6vw,3rem); margin-bottom:.9rem; }
.course-hero p.pitch{ font-size:1.1rem; color:var(--ink-soft); max-width:60ch; }

.course-body{ padding-block:var(--section); }
.course-layout{ display:grid; grid-template-columns:1fr 320px; gap:3.5rem; align-items:start; }

.course-sidebar{ position:sticky; top:100px; background:var(--mist); border-radius:var(--radius); padding:1.8rem; display:flex; flex-direction:column; gap:1.2rem; }
.course-fact{ display:flex; align-items:flex-start; gap:.7rem; }
.course-fact i{ color:var(--strong); font-size:1.2rem; margin-top:.1rem; }
.course-fact strong{ display:block; font-size:.86rem; }
.course-fact span{ font-size:.84rem; color:var(--ink-soft); }
.course-sidebar .btn{ width:100%; margin-top:.4rem; }

.eduqua-block{ margin-bottom:2.8rem; }
.eduqua-block:last-child{ margin-bottom:0; }
.eduqua-block h2{ font-size:1.3rem; margin-bottom:.9rem; display:flex; align-items:center; gap:.6rem; }
.eduqua-block h2 i{ color:var(--strong); font-size:1.15rem; }
.eduqua-block p{ color:var(--ink-soft); font-size:.98rem; line-height:1.7; }

.objectives-list{ display:flex; flex-direction:column; gap:.7rem; margin-top:1rem; list-style:none; padding-left:0; margin-bottom:0; }
.objectives-list li{ display:flex; align-items:flex-start; gap:.7rem; font-size:.96rem; color:var(--ink); margin-bottom:0; }
.objectives-list i{ color:var(--strong); font-size:1.1rem; margin-top:.15rem; flex-shrink:0; }

.prereq-block{ background:var(--mist); border-left:3px solid var(--strong); border-radius:8px; padding:1.1rem 1.4rem; display:flex; align-items:center; gap:.8rem; margin-top:.8rem; }
.prereq-block i{ font-size:1.3rem; color:var(--strong); }
.prereq-block strong{ font-size:.98rem; }

.next-courses{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:1.2rem; }
.next-course-card{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.3rem; border:1px solid var(--line); border-radius:var(--radius); color:var(--ink); text-decoration:none; }
.next-course-card span{ font-weight:700; font-size:.95rem; }
.next-course-card i{ color:var(--strong); }

.sessions-block{ background:var(--ink); color:rgba(255,255,255,.9); border-radius:var(--radius); padding:2rem; margin-top:3rem; display:grid; grid-template-columns:1fr 1fr auto; gap:1.5rem; align-items:center; }
.sessions-block h3{ color:var(--paper); font-size:1.15rem; margin-bottom:.4rem; }
.sessions-block p{ color:rgba(255,255,255,.6); font-size:.9rem; margin:0; }

@media (max-width:960px){
  .course-layout{ grid-template-columns:1fr; }
  .course-sidebar{ position:static; }
  .next-courses{ grid-template-columns:1fr; }
  .sessions-block{ grid-template-columns:1fr; text-align:left; }
}

/******************** Page Entreprises ********************/
.biz-hero{ padding-block:1rem 3.5rem; border-bottom:1px solid var(--line); }
.biz-hero h1{ font-size:clamp(2.2rem,3.8vw,3.2rem); margin-bottom:1rem; max-width:20ch; }
.biz-hero p{ font-size:1.1rem; color:var(--ink-soft); max-width:56ch; margin-bottom:1.8rem; }

.why-us{ padding-block:var(--section); border-bottom:1px solid var(--line); }
.why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.8rem 3rem; margin-top:2rem; }
.why-item{ display:flex; gap:1rem; align-items:flex-start; }
.why-item i{ font-size:1.5rem; color:var(--strong); margin-top:.1rem; flex-shrink:0; }
.why-item strong{ display:block; font-family:var(--font-display); font-size:1.05rem; margin-bottom:.3rem; }
.why-item span{ font-size:.92rem; color:var(--ink-soft); }

.domains{ padding-block:var(--section); border-bottom:1px solid var(--line); background:var(--mist); }
.domain-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:2rem; }
.domain-item{ background:var(--paper); border-radius:var(--radius); padding:1.6rem; text-align:center; }
.domain-item i{ font-size:1.8rem; color:var(--strong); margin-bottom:.8rem; }
.domain-item h3{ font-size:1.05rem; margin-bottom:.4rem; }
.domain-item p{ font-size:.86rem; color:var(--ink-soft); }

.process{ padding-block:var(--section); border-bottom:1px solid var(--line); }
.process-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:2rem; counter-reset:step; }
.process-step{ position:relative; padding-left:3rem; }
.process-step::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:0;
  width:2.2rem; height:2.2rem; border-radius:50%;
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
}
.process-step strong{ display:block; font-family:var(--font-display); font-size:1.1rem; margin-bottom:.4rem; }
.process-step p{ font-size:.92rem; color:var(--ink-soft); }

.partners{ padding-block:var(--section); border-bottom:1px solid var(--line); }
.partners .section-head{ margin-bottom:2rem; }
.partner-logos{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.2rem; }
.partner-logo{ aspect-ratio:16/9; background:var(--mist); border-radius:12px; display:flex; align-items:center; justify-content:center; }
.partner-logo i{ font-size:1.6rem; color:var(--ink-soft); opacity:.5; }

.final-cta{ padding-block:var(--section); text-align:center; }
.final-cta h2{ font-size:clamp(1.8rem,3vw,2.4rem); margin-bottom:1rem; }
.final-cta p{ color:var(--ink-soft); font-size:1.05rem; max-width:50ch; margin:0 auto 1.8rem; }

@media (max-width:900px){
  .why-grid{ grid-template-columns:1fr; }
  .domain-grid{ grid-template-columns:1fr 1fr; }
  .process-grid{ grid-template-columns:1fr; }
  .partner-logos{ grid-template-columns:repeat(2,1fr); }
}

/******************** Pages légales ********************/
.legal-header{ padding-block:2rem 3rem; border-bottom:1px solid var(--line); }
.legal-header__title{ font-size:clamp(2rem,3.4vw,2.8rem); margin:1rem 0 .8rem; }
.legal-header__meta{ display:flex; align-items:center; gap:.5rem; font-size:.88rem; color:var(--ink-soft); font-weight:600; }
.legal-header__meta i{ color:var(--strong); }

.legal{ padding-block:var(--section); }
.legal__intro{ font-size:1.05rem; color:var(--ink-soft); max-width:70ch; margin-bottom:3rem; line-height:1.7; }
.legal__grid{ display:grid; grid-template-columns:240px 1fr; gap:3.5rem; align-items:start; }

.legal__toc{ position:sticky; top:100px; }
.legal__toc-list{ display:flex; flex-direction:column; gap:.2rem; margin-top:1rem; }
.legal__toc-link{ display:flex; align-items:center; gap:.7rem; padding:.55rem .6rem; border-radius:8px; font-size:.88rem; font-weight:600; color:var(--ink-soft); text-decoration:none; }
.legal__toc-link:hover{ background:var(--mist); color:var(--ink); }
.legal__toc-num{ font-family:var(--font-mono); font-size:.72rem; color:var(--strong); flex-shrink:0; }

.legal__section{ padding-bottom:2.8rem; margin-bottom:2.8rem; border-bottom:1px solid var(--line); scroll-margin-top:110px; }
.legal__section:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.legal__section-head{ display:flex; align-items:baseline; gap:.9rem; margin-bottom:1.2rem; }
.legal__section-n{ font-family:var(--font-mono); font-size:.85rem; color:var(--strong); font-weight:600; }
.legal__section-title{ font-size:1.35rem; }
.legal__section-body p{ color:var(--ink-soft); font-size:.96rem; line-height:1.75; margin-bottom:1rem; }
.legal__section-body p:last-child{ margin-bottom:0; }
.legal__section-body strong{ color:var(--ink); }
.legal__section-body ul{ margin:0 0 1rem; padding-left:1.3rem; color:var(--ink-soft); font-size:.96rem; line-height:1.75; }
.legal__section-body li{ margin-bottom:.3rem; }

.legal__highlight{
  display:flex; gap:.8rem; background:var(--mist); border-left:3px solid var(--strong);
  border-radius:8px; padding:1.1rem 1.3rem; margin-bottom:1.3rem; font-size:.9rem; color:var(--ink);
}
.legal__highlight i{ color:var(--strong); font-size:1.2rem; flex-shrink:0; margin-top:.1rem; }

.legal__table{ width:100%; border-collapse:collapse; margin-bottom:1.3rem; font-size:.9rem; }
.legal__table th{ text-align:left; padding:.7rem 1rem; background:var(--mist); font-weight:700; color:var(--ink); border-bottom:1px solid var(--line); }
.legal__table td{ padding:.7rem 1rem; border-bottom:1px solid var(--line); color:var(--ink-soft); }

@media (max-width:900px){
  .legal__grid{ grid-template-columns:1fr; }
  .legal__toc{ position:static; margin-bottom:2rem; }
}

/******************** Auth (Breeze) ********************/
.auth-page{ display:flex; justify-content:center; padding:5rem 1.5rem; background:var(--mist); }
.auth-logo{ display:flex; justify-content:center; margin-bottom:2rem; }
.auth-logo .logo-mark{ height:30px; }

.auth-card{ width:100%; max-width:440px; background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow); padding:2.5rem; }
.auth-card h1{ font-size:1.6rem; margin-bottom:.6rem; }
.auth-lede{ color:var(--ink-soft); font-size:.94rem; line-height:1.6; margin-bottom:1.6rem; }

.auth-status{
  display:flex; align-items:center; gap:.6rem;
  background:var(--mist); border-left:3px solid var(--strong); border-radius:8px;
  padding:.9rem 1.1rem; font-size:.88rem; color:var(--ink); margin-bottom:1.6rem;
}
.auth-status i{ color:var(--strong); font-size:1.1rem; flex-shrink:0; }

.auth-form{ display:flex; flex-direction:column; gap:1.3rem; }
.field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:.5rem; color:var(--ink); }
.field input{
  width:100%; font-family:var(--font-body); font-size:.96rem; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:10px;
  padding:.75rem .9rem; transition:border-color var(--t);
}
.field input:focus{ outline:none; border-color:var(--strong); }

.field-error{ display:flex; align-items:center; gap:.4rem; color:var(--error); font-size:.82rem; margin-top:.5rem; }
.field-error i{ flex-shrink:0; }

.auth-checkbox{ display:flex; align-items:center; gap:.55rem; font-size:.9rem; color:var(--ink-soft); cursor:pointer; }
.auth-checkbox input{ width:16px; height:16px; accent-color:var(--strong); cursor:pointer; }

.auth-actions{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.3rem; flex-wrap:wrap; }
.auth-actions .btn{ flex-shrink:0; }
.auth-link{ font-size:.88rem; font-weight:600; color:var(--strong); }
.auth-link:hover{ text-decoration:underline; }

.auth-footer-link{ text-align:center; margin-top:1.6rem; font-size:.9rem; color:var(--ink-soft); }
.auth-footer-link a{ font-weight:600; }

/******************** Typographie de base (dans <main>, jamais header/footer) ********************
   Éléments qui n'avaient encore aucun style : listes, citations, tableaux,
   code, séparateur, titres h4-h6. Scopé à <main> plutôt qu'en sélecteur nu
   pour ne jamais toucher aux listes de nav/footer, qui ont leur propre design. */

main h4, main h5, main h6{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--ink);
  line-height:1.25;
}
main h4{ font-size:1.1rem; margin-bottom:.5em; }
main h5{ font-size:1rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.5em; }
main h6{ font-size:.9rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.5em; }

main strong, main b{ color:var(--ink); font-weight:700; }
main em, main i{ font-style:italic; }
main u{ text-decoration:underline; }
main s, main del{ text-decoration:line-through; opacity:.7; }

main ul, main ol{ padding-left:1.4em; margin-bottom:1em; }
main ul{ list-style:disc; }
main ol{ list-style:decimal; }
main li{ margin-bottom:.5em; }
main li::marker{ color:var(--strong); }
main ul ul, main ol ol, main ul ol, main ol ul{ margin-top:.5em; margin-bottom:0; }

main blockquote{
  padding:.3em 0 .3em 1.3em;
  border-left:3px solid var(--strong);
  color:var(--ink);
  font-style:italic;
  margin-bottom:1.3em;
}
main blockquote p:last-child{ margin-bottom:0; }
main blockquote small{ display:block; font-style:normal; font-size:.85em; color:var(--ink-soft); }

main code{
  font-family:var(--font-mono);
  font-size:.88em;
  background:var(--mist);
  padding:.15em .4em;
  border-radius:5px;
  color:var(--strong);
}
main pre{
  background:var(--ink);
  color:#fff;
  padding:1.2em 1.4em;
  border-radius:var(--radius);
  overflow-x:auto;
  font-size:.88rem;
  line-height:1.6;
  margin-bottom:1.3em;
}
main pre code{ background:none; color:inherit; padding:0; }

main hr{ border:none; border-top:1px solid var(--line); margin:2.4em 0; }

main table{ width:100%; border-collapse:collapse; font-size:.92em; margin-bottom:1.3em; }
main th{ text-align:left; padding:.7em 1em; background:var(--mist); color:var(--ink); font-weight:700; border-bottom:1px solid var(--line); }
main td{ padding:.7em 1em; border-bottom:1px solid var(--line); }

main figure{ margin:1.6em 0; }
main figcaption{ font-size:.85em; color:var(--ink-soft); text-align:center; margin-top:.6em; }