/* =========================================================================
   Aktory : styles communs à toutes les pages.
   Tout ce qui est propre à une page vit dans accueil.css ou entreprises.css.
   ========================================================================= */

/* ── Polices, servies par le site : aucune dépendance distante ── */
@font-face{font-family:'Satoshi';src:url("polices/satoshi-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url("polices/satoshi-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url("polices/satoshi-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url("polices/inter-variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url("polices/jetbrains-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url("polices/jetbrains-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --ivoire:#F8F5F2;
  --blanc:#FFFFFF;
  --charbon:#2B223A;
  --gris-encre:#5D5666;
  --texte-3:#9A8FA3;
  --rose-sable:#EED9D2;
  --corail:#FF7A59;
  --corail-fonce:#E05F3C;
  --corail-doux:rgba(255,122,89,.10);
  --trait:rgba(43,34,58,.10);
  --trait-fort:rgba(43,34,58,.18);
  --ombre:0 1px 2px rgba(43,34,58,.04), 0 14px 40px -18px rgba(43,34,58,.16);
  --ombre-survol:0 2px 4px rgba(43,34,58,.05), 0 26px 60px -22px rgba(43,34,58,.26), 0 0 46px -20px rgba(255,122,89,.4);
}
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--corail);color:var(--blanc)}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--ivoire);color:var(--charbon);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.mono{font-family:'JetBrains Mono',monospace}

/* ── Atmosphère ─────────────────────────── */
.fond{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(880px 500px at 85% -12%, rgba(255,122,89,.12), transparent 60%),
    radial-gradient(720px 520px at -10% 40%, rgba(238,217,210,.5), transparent 65%);
}
.quadrillage{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(rgba(43,34,58,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,34,58,.035) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 65% at 50% 15%, black 25%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 15%, black 25%, transparent 75%);
}
.grain{position:fixed;inset:0;z-index:-1;opacity:.4;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.13 0 0 0 0 0.23 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.page{max-width:1240px;margin:0 auto;padding:0 32px}
[id]{scroll-margin-top:104px}

/* ── En-tête ────────────────────────────── */
.entete-zone{position:fixed;top:0;left:0;right:0;z-index:40;padding:16px 0;transition:padding .35s cubic-bezier(.2,.7,.3,1)}
.entete-zone.compact{padding:8px 0}
header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:9px 9px 9px 18px;border-radius:18px;border:1px solid rgba(43,34,58,.06);
  background:rgba(255,255,255,.42);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 10px 34px -26px rgba(43,34,58,.5);
  transition:background .35s, border-color .35s, box-shadow .35s}
header::before{content:"";position:absolute;top:-1px;left:22%;right:22%;height:1px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,122,89,.55),transparent);opacity:.5;transition:opacity .35s}
.entete-zone.compact header{background:rgba(255,255,255,.86);border-color:rgba(43,34,58,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 14px 40px -26px rgba(43,34,58,.6)}
.entete-zone.compact header::before{opacity:1}

.marque{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--charbon)}
.marque-logo{position:relative;width:34px;height:34px;display:grid;place-items:center;flex-shrink:0}
.marque-logo::before{content:"";position:absolute;inset:-7px;border-radius:13px;
  background:radial-gradient(circle at 50% 55%, rgba(255,122,89,.32), transparent 70%);opacity:0;transition:opacity .35s}
.marque:hover .marque-logo::before{opacity:1}
.marque-logo svg{position:relative;z-index:1;width:100%;height:100%;display:block}
.marque-logo .fleche-logo{transition:filter .35s}
.marque:hover .marque-logo .fleche-logo{filter:drop-shadow(0 0 5px rgba(255,122,89,.8))}
.marque-nom{font-family:'Satoshi',sans-serif;font-weight:900;font-size:21px;letter-spacing:-.025em}
.marque-tag{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--corail-fonce);border:1px solid rgba(255,122,89,.38);background:var(--corail-doux);
  padding:3px 7px;border-radius:6px;margin-left:2px}

nav{display:flex;align-items:center;gap:2px}
nav a{position:relative;font-size:13.5px;font-weight:500;color:var(--gris-encre);text-decoration:none;
  padding:9px 14px;border-radius:10px;transition:color .2s, background .2s}
nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:1.5px;border-radius:2px;
  background:var(--corail);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
nav a:hover{color:var(--charbon);background:rgba(43,34,58,.045)}
nav a:hover::after{transform:scaleX(1)}
nav a.actif{color:var(--charbon);font-weight:600}
nav a.actif::after{transform:scaleX(1)}

/* ── Surtitre et pouls ──────────────────── */
.surtitre{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--corail-fonce);margin-bottom:22px}
.surtitre .pouls{width:7px;height:7px;border-radius:50%;background:var(--corail);box-shadow:0 0 10px var(--corail);animation:pouls 2.2s ease-in-out infinite}
@keyframes pouls{0%,100%{opacity:1}50%{opacity:.25}}

h1{font-family:'Satoshi',sans-serif;font-weight:900;line-height:1.01;letter-spacing:-.026em}
h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.7px var(--corail)}
.heros-sous{margin-top:24px;font-size:17px;line-height:1.7;color:var(--gris-encre)}
.heros-sous b{color:var(--charbon);font-weight:600}

/* ── Boutons ────────────────────────────── */
.actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:11px;font-size:15px;font-weight:600;
  padding:11px 12px 11px 24px;border-radius:14px;text-decoration:none;transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s, background .25s}
.btn .rond{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;transition:transform .25s, background .25s}
.btn svg{width:16px;height:16px;transition:transform .25s}
.btn .rond svg{width:13px;height:13px}
.btn:hover .rond svg{transform:translateX(2px)}
.btn::after{content:"";position:absolute;top:0;left:-130%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);transition:left .8s ease}
.btn:hover::after{left:170%}
.btn.plein{color:#fff;background:linear-gradient(135deg,#FF8C6B 0%,var(--corail) 42%,var(--corail-fonce) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 12px 30px -12px rgba(255,122,89,.85)}
.btn.plein .rond{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.28)}
.btn.plein:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 18px 40px -14px rgba(255,122,89,.95)}
.btn.plein:hover .rond{background:rgba(255,255,255,.3)}
.btn.contour{color:var(--charbon);border:1px solid var(--trait-fort);background:rgba(255,255,255,.62);
  backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 8px 24px -18px rgba(43,34,58,.6)}
.btn.contour .rond{background:var(--corail-doux);border:1px solid rgba(255,122,89,.3);color:var(--corail-fonce)}
.btn.contour:hover{transform:translateY(-2px);border-color:rgba(255,122,89,.55);background:rgba(255,255,255,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 14px 32px -16px rgba(255,122,89,.5)}
.btn.contour .onde{position:relative;display:block;width:7px;height:7px;border-radius:50%;background:var(--corail)}
.btn.contour .onde::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--corail);
  animation:onde 2.2s ease-out infinite}
@keyframes onde{0%{transform:scale(1);opacity:.6}100%{transform:scale(3.2);opacity:0}}

/* ── Bande de chiffres ──────────────────── */
.bande{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--trait);border:1px solid var(--trait);border-radius:16px;overflow:hidden;margin:-46px auto 0;position:relative;z-index:3;box-shadow:var(--ombre-survol)}
.bande .cellule{background:var(--blanc);padding:22px 26px}
.bande b{font-family:'Satoshi',sans-serif;font-weight:900;font-size:30px;letter-spacing:-.02em;display:block}
.bande span{font-size:12.5px;color:var(--gris-encre)}

/* ── Sections ───────────────────────────── */
section.bloc{padding-top:84px}
.section-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px}
.kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--corail-fonce);display:block;margin-bottom:10px}
.section-tete h2{font-family:'Satoshi',sans-serif;font-weight:900;font-size:clamp(27px,3.1vw,36px);letter-spacing:-.02em}
.section-tete .lien{font-size:14px;font-weight:600;color:var(--corail-fonce);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.section-tete .lien svg{width:15px;height:15px;transition:transform .2s}
.section-tete .lien:hover svg{transform:translateX(3px)}

/* ── Méthode et pied de page ────────────── */
.methode{display:flex;align-items:center;gap:16px;padding:22px 26px;border:1px solid var(--trait);border-radius:16px;background:var(--blanc);box-shadow:var(--ombre);position:relative;overflow:hidden}
.methode::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--corail);box-shadow:0 0 12px rgba(255,122,89,.6)}
.methode p{font-size:14px;line-height:1.65;color:var(--gris-encre)}
.methode a{color:var(--corail-fonce);font-weight:600;text-decoration:none}
.methode a:hover{text-decoration:underline}
footer{border-top:1px solid var(--trait);margin-top:70px;padding:44px 0 30px}
.pied-haut{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:34px}
.pied-marque .pied-logo{display:inline-flex;align-items:center;gap:10px}
.pied-marque .pied-logo svg{width:28px;height:28px}
.pied-marque .pied-logo b{font-family:'Satoshi',sans-serif;font-weight:900;font-size:19px;letter-spacing:-.02em}
.pied-marque p{margin-top:12px;font-size:13px;line-height:1.7;color:var(--gris-encre);max-width:34em}
.pied-etat{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--corail-fonce)}
.pied-etat .pouls{width:6px;height:6px;border-radius:50%;background:var(--corail);box-shadow:0 0 8px var(--corail);animation:pouls 2.2s ease-in-out infinite}
.pied-col{display:flex;flex-direction:column;gap:9px}
.pied-col h4{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--texte-3);margin-bottom:5px}
.pied-col a{font-size:13.5px;color:var(--gris-encre);text-decoration:none;transition:color .18s;align-self:flex-start}
.pied-col a:hover{color:var(--corail-fonce)}
.pied-chiffres span{font-size:13px;color:var(--gris-encre)}
.pied-chiffres b{font-family:'Satoshi',sans-serif;font-weight:700;color:var(--charbon);margin-right:4px}
.pied-bas{border-top:1px solid var(--trait);padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.pied-bas .mono{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;color:var(--texte-3)}
.pied-legal{display:flex;gap:18px;flex-wrap:wrap}
.pied-legal a{font-size:12.5px;color:var(--gris-encre);text-decoration:none;transition:color .18s}
.pied-legal a:hover{color:var(--corail-fonce)}
.pied-signature{margin-top:26px;padding-top:20px;border-top:1px solid var(--trait);display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.pied-signature span{font-size:12px;color:var(--texte-3)}
.pied-signature a{font-family:'Satoshi',sans-serif;font-weight:700;font-size:13.5px;color:var(--charbon);text-decoration:none;transition:color .18s}
.pied-signature a:hover{color:var(--corail-fonce)}
@media (max-width:900px){
  .pied-haut{grid-template-columns:1fr 1fr;gap:30px}
  .pied-marque{grid-column:1 / -1}
}
@media (max-width:600px){
  .pied-haut{grid-template-columns:1fr}
}

/* ── Apparitions ────────────────────────── */
.apparait{opacity:0;translate:0 20px;animation:entree .6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes entree{to{opacity:1;translate:0 0}}
[data-revele]{opacity:0;translate:0 26px;filter:blur(7px);
  transition:opacity .75s cubic-bezier(.2,.7,.3,1), translate .75s cubic-bezier(.2,.7,.3,1), filter .75s ease;
  transition-delay:calc(var(--i,0) * 95ms)}
[data-revele].vu{opacity:1;translate:0 0;filter:blur(0)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-revele]{opacity:1;translate:0 0;filter:none;transition:none}
  .apparait{animation:none;opacity:1;translate:0 0}
}

/* ── Réactif commun ─────────────────────── */
@media (max-width:1000px){
  .bande{grid-template-columns:repeat(2,1fr)}
}
/* Au doigt, un lien de 16 px de haut se rate : on épaissit la zone tactile
   sans toucher au dessin du texte (WCAG 2.2, cible de 24 px minimum). */
@media (max-width:820px){
  .pied-col a{padding:5px 0}
  .pied-legal{gap:14px}
  .pied-legal a{padding:5px 0}
  .section-tete .lien{padding:5px 0}
}
@media (max-width:600px){
  .page{padding:0 20px}
  /* Le titre et son lien de renvoi ne tiennent plus côte à côte. */
  .section-tete{flex-direction:column;align-items:flex-start;gap:14px}
  .section-tete .lien{white-space:normal}
  .marque-tag{display:none}
  header{padding:8px 8px 8px 14px;gap:10px}
  nav a{padding:8px 9px;font-size:12.5px}
  nav a::after{left:9px;right:9px}
  .btn{width:100%;justify-content:space-between}
  .bande .cellule{padding:18px 20px}
  .bande b{font-size:26px}
}
/* Quatre entrées de navigation ne tiennent plus à côté du nom : sous cette
   largeur, le logo seul identifie le site et les liens gardent la place. */
@media (max-width:430px){
  .marque-nom{display:none}
  .marque{gap:0}
  header{padding:8px 6px 8px 10px;gap:4px}
  nav{gap:0}
  nav a{padding:8px 7px;font-size:12px}
  nav a::after{left:7px;right:7px}
}