/* PROMACEO — portail promaceo.com
   Jetons reprise de la charte des sites PROMACEO (promaceo.css).
   Aucune ressource extérieure : les polices de marque, si elles sont
   installées par polices/installer-polices.sh, sont servies depuis ce domaine ;
   sinon la pile système prend le relais sans casser la mise en page. */

@font-face{font-family:'Montserrat PM';src:url('polices/montserrat.woff2') format('woff2');
  font-weight:600 800;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans PM';src:url('polices/public-sans.woff2') format('woff2');
  font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono PM';src:url('polices/plex-mono.woff2') format('woff2');
  font-weight:400 500;font-style:normal;font-display:swap}

:root{
  --paper:#f4f3f1; --sheet:#ffffff; --sheet-2:#faf9f7;
  --ink:#0e0e0e; --ink-2:#55534e; --ink-3:#6e6b63;
  --rule:#ddd9d1; --rule-2:#ebe8e2;
  --or:#a37d1c; --or-vif:#c9a227; --or-soft:#f7f0dc;
  /* l'or de la charte assombri pour le petit texte : en dessous de 18 px,
     #a37d1c ne donne que 3,4 contre 1 sur le papier, la ou il en faut 4,5. */
  --or-texte:#7a5c12;
  --r:2px;
  --fd:'Montserrat PM',Montserrat,"Helvetica Neue",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fb:'Public Sans PM','Public Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fm:'Plex Mono PM','IBM Plex Mono',ui-monospace,"SFMono-Regular",Menlo,monospace;
  --sh:0 1px 0 rgba(14,14,14,.05), 0 10px 30px -18px rgba(14,14,14,.28);
  --max:1180px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0b0b0b; --sheet:#151513; --sheet-2:#1d1d1a;
    --ink:#f2f0eb; --ink-2:#a8a49a; --ink-3:#78746b;
    --rule:#2d2c28; --rule-2:#222120;
    --or:#d8b870; --or-vif:#e0c488; --or-soft:#241f12; --or-texte:#e0c488;
    --sh:0 1px 0 rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#0b0b0b; --sheet:#151513; --sheet-2:#1d1d1a;
  --ink:#f2f0eb; --ink-2:#a8a49a; --ink-3:#78746b;
  --rule:#2d2c28; --rule-2:#222120;
  --or:#d8b870; --or-vif:#e0c488; --or-soft:#241f12; --or-texte:#e0c488;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--fb);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 16px}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--fd);font-weight:800;letter-spacing:-.018em;line-height:1.12;margin:0}
p{margin:0}
.eyebrow{font-family:var(--fm);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--or-texte);font-weight:500}

/* ---------- bandeau ---------- */
.bandeau{position:sticky;top:0;z-index:20;background:var(--paper);
  border-bottom:1px solid var(--rule)}
@supports (background:color-mix(in srgb,red 50%,transparent)){
  .bandeau{background:color-mix(in srgb,var(--paper) 88%,transparent);
    backdrop-filter:saturate(1.2) blur(8px)}
}
.bandeau .wrap{display:flex;align-items:center;gap:18px;min-height:62px;flex-wrap:wrap}
.marque{font-family:var(--fd);font-weight:800;font-size:19px;letter-spacing:.02em;text-decoration:none;
  display:inline-flex;align-items:center;gap:7px}
.marque i{font-style:normal;width:8px;height:8px;border-radius:50%;background:var(--or-vif);
  display:inline-block}
.marque img{height:27px;width:auto;display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .marque img{filter:invert(1) hue-rotate(180deg)}}
.bandeau nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.bandeau nav a{font-size:14px;color:var(--ink-2);text-decoration:none;padding:7px 11px;border-radius:var(--r)}
.bandeau nav a:hover{color:var(--ink);background:var(--sheet-2)}
@media (max-width:620px){
  .bandeau .wrap{flex-wrap:nowrap;gap:10px;min-height:54px}
  .bandeau nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .bandeau nav::-webkit-scrollbar{display:none}
  .bandeau nav a{white-space:nowrap;padding:7px 9px}
}

/* ---------- ouverture ---------- */
.hero{padding:76px 0 56px;border-bottom:1px solid var(--rule);
  background:
    linear-gradient(180deg,var(--or-soft) 0%,transparent 62%),
    repeating-linear-gradient(90deg,transparent 0 68px,color-mix(in srgb,var(--ink) 4%,transparent) 68px 69px)}
.hero h1{font-size:clamp(34px,6vw,60px);max-width:22ch}
.hero h1 span{color:var(--or)}
.hero .chapeau{margin-top:22px;font-size:clamp(17px,2.1vw,20px);color:var(--ink-2);max-width:62ch}
.hero .meta{margin-top:30px;display:flex;gap:10px 28px;flex-wrap:wrap;font-size:14px;color:var(--ink-3);
  font-family:var(--fm)}
.hero .meta b{color:var(--ink);font-weight:500}

/* ---------- sections ---------- */
section.bloc{padding:62px 0;border-bottom:1px solid var(--rule)}
.titre-bloc{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:8px}
.titre-bloc h2{font-size:clamp(23px,3vw,30px)}
.titre-bloc p{color:var(--ink-2);max-width:56ch;font-size:15.5px}

.famille{margin-top:40px}
.famille + .famille{margin-top:52px}
.famille h3{font-size:16px;font-weight:700;letter-spacing:.01em;padding-bottom:9px;
  border-bottom:2px solid var(--or-vif);display:inline-block}
.famille .intro{margin-top:12px;color:var(--ink-2);font-size:15px;max-width:66ch}

.grille{margin-top:22px;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.carte{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r);padding:20px 20px 18px;
  display:flex;flex-direction:column;gap:11px;text-decoration:none;position:relative;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease}
.carte:hover,.carte:focus-visible{border-color:var(--or-vif);box-shadow:var(--sh);transform:translateY(-2px)}
.carte .nom{font-family:var(--fd);font-weight:800;font-size:17.5px;letter-spacing:-.01em;
  display:flex;align-items:center;gap:8px}
.carte .nom em{font-style:normal;color:var(--or);font-weight:700}
.carte .texte{color:var(--ink-2);font-size:14.6px;line-height:1.56;flex:1 1 auto}
.carte .pied{font-family:var(--fm);font-size:11.5px;color:var(--ink-3);letter-spacing:.04em;
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  border-top:1px solid var(--rule-2);padding-top:11px}
.carte .pied span.fleche{color:var(--or-texte);font-size:12.5px;white-space:nowrap;letter-spacing:.02em}
.carte:hover .pied span.fleche,.carte:focus-visible .pied span.fleche{color:var(--or-vif)}

/* ---------- questions ---------- */
.faq{margin-top:26px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:17px 34px 17px 0;position:relative;
  font-family:var(--fd);font-weight:700;font-size:16.5px;letter-spacing:-.005em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--fm);font-weight:400;font-size:19px;color:var(--or);transition:transform .16s ease}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--or-texte)}
.faq details p{margin:0 0 20px;color:var(--ink-2);font-size:15.4px;max-width:78ch}

/* ---------- editeur ---------- */
.editeur{display:grid;gap:30px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);margin-top:34px}
@media (max-width:860px){.editeur{grid-template-columns:1fr}}
.editeur .texte p + p{margin-top:14px}
.editeur .texte p{color:var(--ink-2);font-size:15.6px}
.fiche{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r);padding:22px}
.fiche dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:14.4px}
.fiche dt{font-family:var(--fm);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);padding-top:3px}
.fiche dd{margin:0;color:var(--ink)}
.fiche dd a{color:var(--or-texte);text-decoration:none}
.fiche dd a:hover{text-decoration:underline}

/* ---------- pied ---------- */
footer.pied{padding:42px 0 54px;font-size:14px;color:var(--ink-2)}
footer.pied .lignes{display:flex;gap:8px 20px;flex-wrap:wrap;align-items:center}
footer.pied a{color:var(--ink-2);text-decoration:none}
footer.pied a:hover{color:var(--ink);text-decoration:underline}
footer.pied .sep{color:var(--ink-3)}
footer.pied .bas{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);
  font-family:var(--fm);font-size:11.5px;letter-spacing:.05em;color:var(--ink-3)}

/* ---------- certifications ---------- */
.certifs{margin-top:34px;padding-top:28px;border-top:1px solid var(--rule)}
.certifs h3{font-size:15px;font-weight:700;margin-bottom:6px}
.certifs .intro{color:var(--ink-2);font-size:15px;max-width:72ch}
.certifs .rangee{margin-top:22px;display:flex;gap:30px 42px;flex-wrap:wrap;align-items:flex-end}
.certifs figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:9px;width:116px}
.certifs img{height:72px;width:auto;object-fit:contain}
.certifs figcaption{font-family:var(--fm);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;line-height:1.45}

/* ---------- fiche produit ---------- */
.fil{font-family:var(--fm);font-size:12px;letter-spacing:.04em;color:var(--ink-3);margin-bottom:22px}
.fil a{color:var(--ink-3);text-decoration:none}
.fil a:hover{color:var(--or-texte)}
.fil span{margin:0 7px;opacity:.6}
.fil b{color:var(--ink-2);font-weight:500}
.fiche h1{font-size:clamp(31px,5vw,50px);margin-top:6px}
.fiche h1 span{color:var(--or)}
.fiche .chapeau-fiche,.chapeau-fiche{margin-top:16px;font-size:clamp(17px,2vw,21px);color:var(--ink-2);max-width:60ch}
.fiche p{margin-top:15px;max-width:74ch;color:var(--ink)}
.fiche h2{font-size:clamp(20px,2.4vw,25px);margin:40px 0 4px;padding-bottom:9px;
  border-bottom:2px solid var(--or-vif);display:inline-block}
.liste-fonctions{margin:18px 0 0;padding:0;list-style:none;max-width:78ch;
  display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.liste-fonctions li{position:relative;padding:11px 14px 11px 34px;background:var(--sheet);
  border:1px solid var(--rule);border-radius:var(--r);font-size:14.8px;color:var(--ink-2)}
.liste-fonctions li::before{content:"";position:absolute;left:14px;top:17px;width:7px;height:7px;
  border-radius:50%;background:var(--or-vif)}
.fiche .limites{background:var(--or-soft);border-left:3px solid var(--or);padding:15px 18px;
  border-radius:var(--r);font-size:14.9px;color:var(--ink-2);max-width:78ch;margin-top:16px}
.cta-fiche{margin-top:28px;display:flex;gap:14px 20px;flex-wrap:wrap;align-items:center}
.cta-fiche.bas{margin-top:46px;padding-top:28px;border-top:1px solid var(--rule)}
.cta-fiche .cta-note{font-size:14px;color:var(--ink-3);max-width:44ch}
.bouton{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--paper);
  text-decoration:none;font-weight:600;font-size:15px;padding:12px 20px;border-radius:var(--r);
  border:1px solid var(--ink);transition:background .15s ease,color .15s ease}
.bouton:hover{background:var(--or);border-color:var(--or);color:#0e0e0e}
.bouton span{font-size:17px}
.bouton.creux{background:transparent;color:var(--ink);border-color:var(--rule)}
.bouton.creux:hover{border-color:var(--or);color:var(--or-texte);background:transparent}

/* ---------- corps des fiches conseils ---------- */
.fiche h3{font-size:17.5px;margin:26px 0 2px;font-weight:700}
.fiche ul,.fiche ol{margin:14px 0 0;padding-left:21px;max-width:76ch;color:var(--ink-2);font-size:15.6px}
.fiche ul li,.fiche ol li{margin-bottom:8px;line-height:1.6}
.fiche ul.liste-fonctions{padding-left:0}
.fiche ul.liste-fonctions li{margin-bottom:0}
.fiche .formule{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r);
  padding:17px 20px;font-family:var(--fm);font-size:16px;text-align:center;letter-spacing:.02em;
  max-width:52ch;margin:18px 0 4px}
.fiche strong{color:var(--ink);font-weight:700}
.encadre-produit{margin-top:44px;padding:24px;background:var(--sheet);border:1px solid var(--rule);
  border-left:3px solid var(--or-vif);border-radius:var(--r);
  display:flex;gap:18px 26px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.encadre-produit p{margin:0;max-width:60ch;font-size:15.4px;color:var(--ink-2)}
.avertissement{margin-top:30px;padding-top:18px;border-top:1px solid var(--rule);
  font-size:13.4px;color:var(--ink-3);max-width:80ch;font-style:italic}

/* ---------- pages légales ---------- */
.prose{max-width:76ch;padding:52px 0 64px}
.prose h1{font-size:clamp(27px,4vw,38px)}
.prose .chapeau{margin-top:14px;color:var(--ink-2);font-size:17px}
.prose h2{font-size:19px;margin:34px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--rule)}
.prose p{margin-top:11px;color:var(--ink-2)}
.prose a{color:var(--or-texte)}
.prose table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14.6px}
.prose th{text-align:left;width:38%;vertical-align:top;padding:8px 12px 8px 0;color:var(--ink-3);
  font-family:var(--fm);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  border-bottom:1px solid var(--rule-2)}
.prose td{padding:8px 0;border-bottom:1px solid var(--rule-2)}
.prose .maj{margin-top:34px;font-family:var(--fm);font-size:12px;color:var(--ink-3)}

@media print{
  .bandeau,footer.pied .bas{display:none}
  body{background:#fff;color:#000;font-size:11pt}
}

/* ---------- captures : vignettes de carte ---------- */
.carte .vignette{display:block;margin:-20px -20px 0;border-bottom:1px solid var(--rule-2);
  background:var(--sheet-2);overflow:hidden;line-height:0}
.carte .vignette img{width:100%;height:150px;object-fit:cover;object-position:top center;
  display:block;transition:transform .35s ease;filter:saturate(.97)}
.carte:hover .vignette img,.carte:focus-visible .vignette img{transform:scale(1.025)}

/* ---------- captures : image d'en-tete de fiche ---------- */
.hero-fiche{margin:30px 0 0}
.hero-fiche img{width:100%;height:auto;display:block;border:1px solid var(--rule);
  border-radius:var(--r);background:var(--sheet-2);box-shadow:var(--sh)}
.hero-fiche figcaption,.galerie figcaption{margin-top:9px;font-family:var(--fm);font-size:11.5px;
  letter-spacing:.03em;color:var(--ink-3);line-height:1.5}

/* ---------- ce que ca change ---------- */
.gains{margin-top:38px;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
.gains .gain{background:var(--sheet);border:1px solid var(--rule);border-top:3px solid var(--or-vif);
  border-radius:var(--r);padding:19px 19px 20px}
.gains .gain h3{margin:0;font-family:var(--fd);font-weight:800;font-size:16px;letter-spacing:-.01em;
  line-height:1.3;color:var(--ink)}
.gains .gain p{margin-top:9px;font-size:14.6px;line-height:1.58;color:var(--ink-2);max-width:none}

/* ---------- galerie de captures ---------- */
.galerie{margin-top:20px;display:grid;gap:22px 20px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.galerie figure{margin:0}
.galerie img{width:100%;height:auto;display:block;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--sheet-2)}
@media (max-width:620px){
  .galerie{grid-template-columns:1fr}
  .carte .vignette img{height:132px}
}

/* ======================================================================
   Les apparitions. Tout est visible par defaut : si le JavaScript ne
   s'execute pas, ou si la personne a demande moins d'animations, la page
   est simplement statique. La classe .magie est posee par assets/magie.js.
   ====================================================================== */
.magie .apparait{opacity:0;transform:translateY(14px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1) var(--retard,0ms),
             transform .62s cubic-bezier(.22,.61,.36,1) var(--retard,0ms)}
.magie .apparait.vu{opacity:1;transform:none}

/* le trait dore des titres se trace tout seul */
.magie .fiche h2,.magie .famille h2{border-bottom-color:transparent;position:relative}
.magie .fiche h2::after,.magie .famille h2::after{content:"";position:absolute;left:0;bottom:-2px;
  height:2px;width:100%;background:var(--or-vif);transform:scaleX(0);transform-origin:left center;
  transition:transform .74s cubic-bezier(.22,.61,.36,1) .12s}
.magie .fiche h2.vu::after,.magie .famille h2.vu::after{transform:scaleX(1)}

/* l'aura qui suit le curseur */
.carte::before{content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  opacity:0;transition:opacity .3s ease;z-index:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),
    color-mix(in srgb,var(--or-vif) 16%,transparent), transparent 62%)}
.carte:hover::before,.carte:focus-visible::before{opacity:1}
.carte > *{position:relative;z-index:1}

/* la lueur qui balaie le logo, une fois, a l'ouverture */
.marque{position:relative;overflow:hidden}
.magie .marque::after{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;
  pointer-events:none;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--or-vif) 42%,transparent),transparent);
  animation:lueur 1.5s cubic-bezier(.4,0,.2,1) .45s 1 both}
@keyframes lueur{to{left:150%}}

/* l'etoile des titres de section : elle respire, discretement */
.magie .bloc > .wrap > h2::before,.magie .chapeau-fiche + .cta-fiche{}
.etincelle{display:inline-block;color:var(--or-vif);font-size:.62em;vertical-align:.35em;margin-left:.3em}
.magie .etincelle{animation:scintille 3.4s ease-in-out infinite}
@keyframes scintille{
  0%,100%{opacity:.45;transform:scale(.9) rotate(0deg)}
  50%    {opacity:1;transform:scale(1.12) rotate(90deg)}
}

/* les vignettes arrivent nettes : un leger fondu du flou */
.magie .carte .vignette img{animation:net .8s ease both}
@keyframes net{from{filter:blur(6px) saturate(.6)}to{filter:blur(0) saturate(.97)}}

/* le bouton principal : un reflet qui passe au survol */
.bouton{position:relative;overflow:hidden}
.bouton::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent)}
.magie .bouton:hover::after{animation:lueur .78s ease 1 both}

@media (prefers-reduced-motion:reduce){
  .magie .apparait,.magie .apparait.vu{opacity:1;transform:none;transition:none}
  .magie .marque::after,.magie .etincelle,.magie .carte .vignette img,
  .magie .bouton:hover::after{animation:none}
  .magie .fiche h2::after,.magie .famille h2::after{transform:scaleX(1);transition:none}
}

/* ---------- chiffres clés de la fiche ---------- */
.chiffres{margin-top:30px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.chiffres div{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r);
  padding:15px 16px;display:flex;flex-direction:column;gap:3px}
.chiffres b{font-family:var(--fd);font-size:25px;font-weight:800;letter-spacing:-.02em;color:var(--or)}
.chiffres span{font-size:13px;color:var(--ink-2);line-height:1.4}

/* ---------- fonctions, par groupe ---------- */
.compte{font-family:var(--fm);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-top:16px !important}
.groupes{margin-top:8px}
.groupes .groupe{margin-top:26px}
.groupes .groupe h3{font-family:var(--fd);font-size:15px;font-weight:800;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink);margin:0 0 2px;
  padding-left:13px;border-left:3px solid var(--or-vif)}
.groupes .liste-fonctions{margin-top:11px;max-width:none}
.groupes .liste-fonctions li{font-size:14.4px;line-height:1.52}
.fiche .essai{background:var(--sheet);border:1px solid var(--rule);border-left:3px solid var(--or-vif);
  border-radius:var(--r);padding:14px 18px;font-size:15px;color:var(--ink-2);max-width:72ch;margin-top:16px}