/* 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-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat PM';src:url('polices/montserrat-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat PM';src:url('polices/montserrat-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans PM';src:url('polices/public-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans PM';src:url('polices/public-sans-400-italique.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Public Sans PM';src:url('polices/public-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono PM';src:url('polices/plex-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono PM';src:url('polices/plex-mono-600.woff2') format('woff2');font-weight:600;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:76px;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:40px;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}

/* ------------------------------------------------ illustration d'une fiche */
.fiche figure.illus{margin:28px 0 0;max-width:none}
.fiche figure.illus img{display:block;width:100%;height:auto;border-radius:var(--r);
  border:1px solid var(--rule);background:var(--sheet)}
.fiche figure.illus figcaption{margin-top:9px;font-size:13.2px;color:var(--ink-3);max-width:74ch}

/* ------------------------------------------- drapeau « Entreprise francaise » */
.fr-mention{display:inline-flex;align-items:center;gap:7px}
.drapeau-fr{width:30px;height:auto;flex:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.pied .fr-mention .drapeau-fr{width:26px}

/* --------------------------------------- developpement confidentiel (vitrine) */
.confid{margin-top:0;border-radius:14px;overflow:hidden;position:relative;background:#07080a;
  border:1px solid #1b1f1c}
.confid .fondcode{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;
  pointer-events:none}
.confid .dedans{position:relative;padding:52px 46px;display:grid;
  grid-template-columns:1.25fr .85fr;gap:38px;align-items:start}
.confid .eyebrow{font-family:var(--fm);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#7fd79a}
.confid h2{font-size:clamp(25px,3vw,38px);margin:12px 0 0;color:#f2f0ea;line-height:1.1;
  letter-spacing:-.02em;border:0;padding:0}
.confid p{color:#c4c8c2;margin-top:16px;max-width:60ch;line-height:1.65;font-size:15.6px}
.confid ul.domaines{margin:18px 0 0;padding-left:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.confid ul.domaines li{font-size:13px;color:#cfd4cd;border:1px solid #2c3630;border-radius:999px;
  padding:6px 13px;background:rgba(255,255,255,.03)}
.confid .carte-confid{background:rgba(12,16,13,.72);border:1px solid #243029;border-radius:11px;
  padding:22px 24px}
.confid .carte-confid h3{margin:0 0 10px;color:#9fe7b5;font-size:11.5px;font-family:var(--fm);
  letter-spacing:.1em;text-transform:uppercase}
.confid .carte-confid p{margin-top:0;font-size:14.6px}
.confid .bouton{display:inline-flex;align-items:center;gap:8px;margin-top:18px;background:#e8e4da;
  color:#13170f;text-decoration:none;border-radius:8px;padding:11px 18px;font-weight:600;font-size:15px}
.confid .bouton:hover{background:#fff}
@media(max-width:880px){.confid .dedans{grid-template-columns:1fr;padding:34px 24px;gap:26px}}

/* =======================================================================
   promaceo.com — le vivant.
   Alveoles sur les cotes, apparition en nuage, evaporation vers le haut,
   bandeau qui s'anime, drapeaux qui se posent.
   Tout est pilote par des classes posees par magie.js. Sans JavaScript,
   rien de tout cela ne s'applique et la page reste entiere.
   ======================================================================= */

/* ------------------------------------------------- 1. les alveoles ----- */
.alveoles{
  position:fixed; top:0; bottom:0; width:168px; z-index:0; pointer-events:none;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);
}
.alveoles-gauche{left:0}
.alveoles-droite{right:0; transform:scaleX(-1)}
.alveoles .ruche{
  position:absolute; left:-30px; right:-30px; height:300%; top:-100%;
  background-repeat:repeat;
  background-size:58px 100px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='100' viewBox='0 0 58 100'%3E%3Cg fill='none' stroke='%23b08d2a' stroke-width='1.6'%3E%3Cpath d='M29 2 L54 16.5 L54 45.5 L29 60 L4 45.5 L4 16.5 Z'/%3E%3Cpath d='M0 52 L25 66.5 L25 95.5 L0 110'/%3E%3Cpath d='M58 52 L33 66.5 L33 95.5 L58 110'/%3E%3C/g%3E%3C/svg%3E");
  opacity:.115;
  animation:derive 46s linear infinite;
}
.alveoles .ruche-2{
  background-size:34px 59px; opacity:.065;
  animation:derive 74s linear infinite reverse;
  filter:blur(.4px);
}
@keyframes derive{ from{transform:translateY(0)} to{transform:translateY(-100px)} }

/* une poignee d'alveoles qui respirent, par-dessus */
.alveoles::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 24% 22%, rgba(176,141,42,.22), transparent 42%),
    radial-gradient(circle at 70% 58%, rgba(176,141,42,.16), transparent 38%),
    radial-gradient(circle at 36% 84%, rgba(176,141,42,.20), transparent 40%);
  animation:respire 9s ease-in-out infinite alternate;
}
@keyframes respire{ from{opacity:.45} to{opacity:1} }

/* le contenu passe devant */
body > header, body > main, body > footer{position:relative; z-index:1}

@media (max-width:1239px){ .alveoles{display:none} }

/* ------------------------------------------- 2. l'apparition en nuage --- */
.magie .nuage{
  opacity:0;
  filter:blur(17px) saturate(.45);
  transform:translateY(30px) scale(1.045);
  transition:opacity .72s cubic-bezier(.22,.7,.26,1),
             filter .82s cubic-bezier(.22,.7,.26,1),
             transform .82s cubic-bezier(.22,.7,.26,1);
  will-change:opacity,filter,transform;
}
.magie .nuage.condense{
  opacity:1; filter:blur(0) saturate(1); transform:none;
}
/* la buee qui se dissipe au moment ou l'image se forme */
.magie .nuage{position:relative}
.magie .nuage::after{
  content:""; position:absolute; inset:-9% -6%;
  pointer-events:none; opacity:0;
  background:
    radial-gradient(42% 46% at 22% 30%, rgba(255,252,243,.95), transparent 64%),
    radial-gradient(38% 42% at 72% 24%, rgba(248,240,220,.85), transparent 62%),
    radial-gradient(46% 50% at 54% 74%, rgba(255,250,236,.80), transparent 66%),
    radial-gradient(30% 34% at 86% 62%, rgba(243,232,205,.75), transparent 60%);
  filter:blur(13px);
  transition:opacity .62s ease, transform .9s cubic-bezier(.22,.7,.26,1);
  transform:scale(.92);
}
.magie .nuage:not(.condense)::after{ opacity:.88; transform:scale(1); }
.magie .nuage.condense::after{ opacity:0; transform:scale(1.14); }

/* ----------------------------------------- 3. l'evaporation vers le haut */
.magie .nuage.evapore{
  opacity:0;
  filter:blur(19px) saturate(.3);
  transform:translateY(-40px) scale(1.03);
}
/* les volutes qui montent quand ca s'evapore */
.magie .nuage::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:
    radial-gradient(5px 9px at 18% 70%, rgba(255,251,240,.9), transparent 70%),
    radial-gradient(4px 8px at 38% 82%, rgba(250,243,225,.8), transparent 70%),
    radial-gradient(6px 11px at 61% 66%, rgba(255,250,236,.85), transparent 70%),
    radial-gradient(4px 7px at 80% 78%, rgba(246,236,212,.8), transparent 70%),
    radial-gradient(5px 10px at 50% 90%, rgba(255,252,244,.75), transparent 70%);
  filter:blur(2.5px);
}
.magie .nuage.evapore::before{
  opacity:1;
  animation:volutes .95s ease-out forwards;
}
@keyframes volutes{
  from{ transform:translateY(0) scale(1); opacity:.9 }
  to  { transform:translateY(-56px) scale(1.5); opacity:0 }
}

/* une image dans une carte : on calme le jeu, ce sont de petites vignettes */
.magie .carte img.nuage{ filter:blur(10px) saturate(.6) }
.magie .carte img.nuage.condense{ filter:none }
.magie .carte img.nuage::after,.magie .carte img.nuage::before{ display:none }

/* ---------------------------------------------- 4. le bandeau vivant --- */
.hero .meta .bribe{
  opacity:0; transform:translateY(12px);
  transition:opacity .6s ease var(--retard,0ms), transform .6s cubic-bezier(.22,.7,.26,1) var(--retard,0ms);
}
.hero .meta.anime .bribe{ opacity:1; transform:none }
.hero .meta b{ position:relative }
/* un reflet dore qui passe une fois, a l'arrivee */
.hero .meta.anime b::after{
  content:""; position:absolute; inset:-2px -6px; pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(176,141,42,.34) 50%,transparent 62%);
  background-size:260% 100%;
  animation:reflet 1.5s ease-out .5s 1 both;
}
@keyframes reflet{ from{background-position:180% 0; opacity:1} to{background-position:-80% 0; opacity:0} }

/* ------------------------------------------- 5. les drapeaux se posent -- */
.fr-mention,.ch-mention{display:inline-flex;align-items:center;gap:7px}
.drapeau-fr,.drapeau-ch{flex:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.drapeau-fr{width:30px;height:auto}
.drapeau-ch{width:17px;height:17px}
.pied .drapeau-fr{width:26px}
.pied .drapeau-ch{width:16px;height:16px}

.magie .fr-mention .drapeau-fr,
.magie .ch-mention .drapeau-ch{
  transition:opacity .62s ease, transform .78s cubic-bezier(.2,1.5,.38,1), filter .62s ease;
}
.magie .fr-mention.en-attente .drapeau-fr,
.magie .ch-mention.en-attente .drapeau-ch{
  opacity:0; filter:blur(9px); transform:translateY(-9px) scale(1.5) rotate(-7deg);
}
.magie .fr-mention.pose .drapeau-fr,
.magie .ch-mention.pose .drapeau-ch{
  opacity:1; filter:drop-shadow(0 1px 1px rgba(0,0,0,.18)); transform:none;
}
/* la bouffee de nuage d'ou sort le drapeau */
.magie .fr-mention,.magie .ch-mention{position:relative}
.magie .fr-mention.pose::before,.magie .ch-mention.pose::before{
  content:""; position:absolute; left:-10px; top:50%; width:52px; height:34px;
  transform:translateY(-50%); pointer-events:none;
  background:radial-gradient(50% 60% at 40% 50%, rgba(255,252,244,.95), transparent 70%);
  filter:blur(7px);
  animation:bouffee .85s ease-out forwards;
}
@keyframes bouffee{
  from{ opacity:.95; transform:translateY(-50%) scale(.6) }
  to  { opacity:0;   transform:translateY(-62%) scale(1.5) }
}

/* ------------------------------------------------------- 6. le repos --- */
@media (prefers-reduced-motion: reduce){
  .alveoles{display:none}
  .magie .nuage,.magie .nuage.condense,.magie .nuage.evapore{
    opacity:1!important; filter:none!important; transform:none!important
  }
  .magie .nuage::before,.magie .nuage::after{display:none}
  .hero .meta .bribe{opacity:1!important; transform:none!important}
  .magie .fr-mention .drapeau-fr,.magie .ch-mention .drapeau-ch{
    opacity:1!important; filter:none!important; transform:none!important
  }
}


/* ------------------------------------- les quatre marques du bandeau --- */
.meta .mention{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.marque-ico{flex:none;width:26px;height:26px;display:block}
.pied .marque-ico{width:22px;height:22px}
@media (max-width:640px){ .marque-ico{width:22px;height:22px} }

/* elles arrivent dans le nuage, l'une apres l'autre, puis se posent */
.magie .meta .mention .marque-ico{
  opacity:0; filter:blur(9px); transform:translateY(-8px) scale(1.45) rotate(-8deg);
  transition:opacity .6s ease var(--pose,0ms),
             filter .6s ease var(--pose,0ms),
             transform .76s cubic-bezier(.2,1.5,.38,1) var(--pose,0ms);
}
.magie .meta.anime .mention .marque-ico{
  opacity:1; filter:drop-shadow(0 1px 1px rgba(0,0,0,.16)); transform:none;
}
.magie .meta.anime .mention::before{
  content:""; position:absolute; left:-6px; top:50%; width:46px; height:30px;
  transform:translateY(-50%); pointer-events:none;
  background:radial-gradient(50% 60% at 40% 50%, rgba(255,252,244,.95), transparent 70%);
  filter:blur(6px); animation:bouffee .8s ease-out var(--pose,0ms) both;
}
.meta .mention{position:relative}

/* =======================================================================
   Second passage : les alveoles deviennent de l'or en mouvement, et le
   bloc confidentiel recoit son halo.
   ======================================================================= */

/* ---------------------------------- les alveoles, en or degrade mouvant */
.alveoles .ruche{
  /* l'or coule derriere, le nid d'abeilles sert de pochoir */
  background-image:linear-gradient(152deg,
      #f0d894 0%, #c9a33c 18%, #8d6e1c 36%, #e3c164 54%, #a9842a 72%, #f5e2a6 88%, #b08d2a 100%);
  background-size:260% 260%;
  background-repeat:no-repeat;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='100' viewBox='0 0 58 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.1'%3E%3Cpath d='M29 2 L54 16.5 L54 45.5 L29 60 L4 45.5 L4 16.5 Z'/%3E%3Cpath d='M0 52 L25 66.5 L25 95.5 L0 110'/%3E%3Cpath d='M58 52 L33 66.5 L33 95.5 L58 110'/%3E%3C/g%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='100' viewBox='0 0 58 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.1'%3E%3Cpath d='M29 2 L54 16.5 L54 45.5 L29 60 L4 45.5 L4 16.5 Z'/%3E%3Cpath d='M0 52 L25 66.5 L25 95.5 L0 110'/%3E%3Cpath d='M58 52 L33 66.5 L33 95.5 L58 110'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size:58px 100px; mask-size:58px 100px;
  -webkit-mask-repeat:repeat; mask-repeat:repeat;
  opacity:.5;
  animation:derive 46s linear infinite, chatoie 17s ease-in-out infinite alternate;
}
.alveoles .ruche-2{
  -webkit-mask-size:34px 59px; mask-size:34px 59px;
  background-size:300% 300%;
  opacity:.28; filter:blur(.3px);
  animation:derive 74s linear infinite reverse, chatoie 23s ease-in-out infinite alternate-reverse;
}
/* l'or qui se deplace dans les alveoles */
@keyframes chatoie{
  from{ background-position:0% 10% }
  to  { background-position:100% 90% }
}
/* quelques cellules qui s'allument au passage */
.alveoles::after{
  background:
    radial-gradient(circle at 24% 20%, rgba(233,197,106,.40), transparent 40%),
    radial-gradient(circle at 72% 56%, rgba(201,163,60,.30), transparent 36%),
    radial-gradient(circle at 34% 86%, rgba(240,216,148,.34), transparent 38%);
  mix-blend-mode:multiply;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .alveoles .ruche{opacity:.34}
  :root:not([data-theme="light"]) .alveoles::after{mix-blend-mode:screen;opacity:.5}
}

/* ------------------------------- le bloc confidentiel : code et halo --- */
.confid{
  box-shadow:0 0 0 1px rgba(63,182,106,.16),
             0 0 34px -6px rgba(63,182,106,.30),
             0 0 90px -18px rgba(63,182,106,.22);
  transition:box-shadow .8s ease;
}
.confid:hover{
  box-shadow:0 0 0 1px rgba(63,182,106,.26),
             0 0 46px -4px rgba(63,182,106,.42),
             0 0 120px -16px rgba(63,182,106,.30);
}
/* le halo interieur, qui respire */
.confid::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(58% 64% at 50% 46%, rgba(63,182,106,.16), transparent 72%);
  animation:halo 6.5s ease-in-out infinite alternate;
}
@keyframes halo{ from{opacity:.5} to{opacity:1} }

/* la toile du code : elle remplace l'image fixe */
.confid .pluie{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; opacity:.62; pointer-events:none; z-index:0;
}
.confid .fondcode{ z-index:0 }
.confid .dedans{ z-index:1 }

@media (prefers-reduced-motion: reduce){
  .alveoles .ruche{animation:none}
  .confid::after{animation:none}
  .confid .pluie{display:none}
}