/* Design « Workspace » : le site presente comme l'application.
   Choisi depuis la page privee, onglet Design. */
/* ═══════════════════════════════════════════════════════════════════
   Licornne Workspace — le site vitrine dessiné comme l'application.
   Jetons de couleur : thème clair par défaut, thème sombre redéfini
   plus bas. Le rail reste marine dans les deux : c'est la marque.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* Les deux couleurs reglees dans la page privee (onglet Design). Le
     gabarit les redefinit ; toutes les teintes ci-dessous en decoulent. */
  --iris:#6246EA;
  --encre:#0B2545;
  --nuit:color-mix(in srgb, var(--encre) 72%, #000);
  --encre-2:color-mix(in srgb, var(--encre) 78%, #fff);
  --iris-clair:color-mix(in srgb, var(--iris) 62%, #fff);
  --iris-voile:color-mix(in srgb, var(--iris) 9%, #fff);
  --menthe:#0E9F6E;
  --menthe-voile:#E3F5EE;
  --corail:#E0475F;
  --ambre:#C2830B;

  --fond:#EDF2F9;
  --carte:#FFFFFF;
  --carte-2:#F6F9FD;
  --ligne:#DCE4EF;
  --ligne-forte:#C6D3E4;
  --texte:#0F2440;
  --doux:#566B86;
  --faible:#8797AC;

  --rail-l:272px;
  --large:1240px;        /* largeur de la colonne de travail, centrée */
  --r:14px;
  --r-lg:20px;
  --ombre:0 1px 2px rgba(11,37,69,.05), 0 8px 24px rgba(11,37,69,.06);
  --ombre-h:0 2px 4px rgba(11,37,69,.06), 0 18px 44px rgba(11,37,69,.13);
  --ease:cubic-bezier(.22,.7,.3,1);

  --disp:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --corps:'Public Sans','Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fond:#081426;
    --carte:#0F2038;
    --carte-2:#132844;
    --ligne:#1E3A5C;
    --ligne-forte:#2A4C74;
    --texte:#E8F0FB;
    --doux:#9BB0C9;
    --faible:#6F869F;
    --iris-voile:color-mix(in srgb, var(--iris) 24%, #0A1730);
    --menthe-voile:#0C2B23;
    --ombre:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.34);
    --ombre-h:0 2px 6px rgba(0,0,0,.45), 0 20px 48px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --fond:#081426;
  --carte:#0F2038;
  --carte-2:#132844;
  --ligne:#1E3A5C;
  --ligne-forte:#2A4C74;
  --texte:#E8F0FB;
  --doux:#9BB0C9;
  --faible:#6F869F;
  --iris-voile:color-mix(in srgb, var(--iris) 24%, #0A1730);
  --menthe-voile:#0C2B23;
  --ombre:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.34);
  --ombre-h:0 2px 6px rgba(0,0,0,.45), 0 20px 48px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  /* Un léger halo bleuté en haut à droite : le fond ne reste pas plat. */
  background:
    radial-gradient(1100px 620px at 78% -8%, color-mix(in srgb,var(--iris) 9%,transparent), transparent 62%),
    var(--fond);
  background-attachment:fixed;
  color:var(--texte);
  font-family:var(--corps);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--disp);margin:0;text-wrap:balance;letter-spacing:-.02em;line-height:1.12}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--iris);outline-offset:3px;border-radius:6px}

/* ═══ Ossature : rail fixe + espace de travail ═══ */
.app{display:grid;grid-template-columns:var(--rail-l) minmax(0,1fr);min-height:100dvh}

/* ── Le rail de navigation (marine, comme dans l'application) ── */
.rail{
  position:sticky;top:env(safe-area-inset-top,0px);
  height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--encre) 0%,var(--nuit) 100%);
  border-right:1px solid rgba(255,255,255,.07);
  color:#C3D3E8;
  z-index:40;
}
.rail-marque{display:flex;align-items:center;gap:.7rem;padding:1.15rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.08)}
.sigle{
  width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--iris) 0%,color-mix(in srgb,var(--iris) 66%,#000) 100%);
  box-shadow:0 4px 14px color-mix(in srgb,var(--iris) 45%,transparent);
  font-family:var(--disp);font-weight:800;color:#fff;font-size:1.05rem;
}
.rail-marque b{font-family:var(--disp);font-weight:700;color:#fff;font-size:1.06rem;letter-spacing:-.025em;display:block;line-height:1.1}
.rail-marque span{font-size:.68rem;color:#7E97B8;letter-spacing:.1em;text-transform:uppercase;font-weight:600}

.rail-nav{flex:1;overflow-y:auto;padding:.9rem .7rem 1rem;position:relative;scrollbar-width:thin}
.rail-nav::-webkit-scrollbar{width:6px}
.rail-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
.rail-titre{font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:#5E799C;padding:.9rem .75rem .45rem}

/* Le curseur violet : un seul élément qui glisse d'un lien à l'autre. */
.curseur{
  position:absolute;top:0;left:.7rem;width:calc(100% - 1.4rem);height:40px;border-radius:11px;
  background:linear-gradient(100deg,var(--iris) 0%,color-mix(in srgb,var(--iris) 72%,#000) 100%);
  box-shadow:0 6px 18px color-mix(in srgb,var(--iris) 40%,transparent);
  transition:transform .46s cubic-bezier(.34,1.32,.44,1),height .4s var(--ease),opacity .3s ease;
  pointer-events:none;opacity:0;z-index:0;
}
.rail-lien{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:.75rem;width:100%;
  padding:.62rem .75rem;border-radius:11px;border:0;background:none;cursor:pointer;
  font-size:.895rem;font-weight:500;color:#B7CAE1;text-align:left;
  transition:color .2s ease,background .2s ease;
}
.rail-lien svg{width:18px;height:18px;flex:none;transition:transform .34s var(--ease),opacity .2s ease;opacity:.78}
.rail-lien:hover,.rail-lien:focus-visible{color:#fff}
.rail-lien:hover svg,.rail-lien:focus-visible svg{transform:translateX(3px) scale(1.08);opacity:1}
.rail-lien[aria-current="true"] svg{opacity:1}
.rail-lien .libelle{transition:transform .34s var(--ease)}
.rail-lien:hover .libelle{transform:translateX(2px)}

/* La pastille de survol : un seul objet qui glisse d'un lien a l'autre.
   Elle passe au-dessus du curseur violet, ce qui eclaircit simplement le
   lien actif au lieu d'ajouter un deuxieme surlignage concurrent. */
.survol{
  position:absolute;top:0;left:.7rem;width:calc(100% - 1.4rem);height:40px;border-radius:11px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.1);
  opacity:0;pointer-events:none;z-index:0;
  transition:transform .3s var(--ease),height .3s var(--ease),opacity .22s ease;
}
.rail-nav.survole .survol{opacity:1}
.rail-lien[aria-current="true"]{color:#fff;font-weight:600;background:none}
.rail-lien .compte{
  margin-left:auto;font-family:var(--mono);font-size:.68rem;font-weight:600;
  padding:.1rem .42rem;border-radius:20px;background:rgba(255,255,255,.1);color:#A8BFDA;
}
.rail-lien[aria-current="true"] .compte{background:rgba(255,255,255,.22);color:#fff}

.rail-cta{padding:.9rem 1.1rem 1rem;border-top:1px solid rgba(255,255,255,.08);display:grid;gap:.7rem}
.rail-btn{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem;border-radius:11px;border:0;cursor:pointer;
  background:#fff;color:var(--encre);font-weight:700;font-size:.87rem;
  transition:transform .2s var(--ease),box-shadow .2s ease;
}
.rail-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.rail-pied{font-size:.7rem;color:#5E799C;display:flex;justify-content:space-between;font-family:var(--mono)}
.rail-pied .vert{color:#4ECFA4}

/* Le voile assombrit la page derrière le tiroir, sur téléphone seulement.
   Il est hors du flux dès le départ : sinon il occuperait une case de la
   grille et repousserait tout l'espace de travail hors de l'écran. */
.voile{
  position:fixed;inset:0;z-index:35;display:none;
  background:rgba(6,21,41,.55);opacity:0;pointer-events:none;transition:opacity .3s ease;
}

/* ── Barre du haut ──
   Le remplissage latéral suit la même gouttière que le contenu : la barre
   reste pleine largeur, mais ce qu'elle contient s'aligne sur les panneaux. */
.work{min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:30;
  display:flex;align-items:center;gap:1rem;
  padding:.8rem max(1.6rem,calc((100% - var(--large)) / 2 + 1.6rem));
  background:color-mix(in srgb,var(--fond) 86%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ligne);
}
.burger{display:none;width:40px;height:40px;border-radius:11px;border:1px solid var(--ligne);background:var(--carte);cursor:pointer;place-items:center}
.recherche{
  flex:1;max-width:460px;display:flex;align-items:center;gap:.6rem;
  padding:.55rem .9rem;border-radius:11px;border:1px solid var(--ligne);background:var(--carte);
  color:var(--faible);font-size:.86rem;transition:border-color .2s ease,box-shadow .2s ease;
}
.recherche:hover{border-color:var(--ligne-forte)}
.recherche svg{width:16px;height:16px;flex:none}
.recherche kbd{margin-left:auto;font-family:var(--mono);font-size:.68rem;padding:.1rem .34rem;border:1px solid var(--ligne);border-radius:5px;background:var(--carte-2)}
.pill-agents{
  display:flex;align-items:center;gap:.55rem;margin-left:auto;
  padding:.5rem .95rem;border-radius:30px;border:0;cursor:pointer;
  background:linear-gradient(100deg,var(--iris) 0%,color-mix(in srgb,var(--iris) 72%,#000) 100%);
  color:#fff;font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:0 6px 18px color-mix(in srgb,var(--iris) 35%,transparent);
  transition:transform .2s var(--ease),box-shadow .2s ease;
}
.pill-agents:hover{transform:translateY(-1px);box-shadow:0 10px 26px color-mix(in srgb,var(--iris) 50%,transparent)}
.pill-agents .n{background:rgba(255,255,255,.25);border-radius:20px;padding:0 .4rem;font-family:var(--mono)}
.puce-demo{display:flex;align-items:center;gap:.55rem;padding:.3rem .8rem .3rem .35rem;border-radius:30px;border:1px solid var(--ligne);background:var(--carte);font-size:.76rem;font-weight:600;color:var(--doux)}
.puce-demo i{width:26px;height:26px;border-radius:50%;background:var(--iris-voile);color:var(--iris);display:grid;place-items:center;font-style:normal;font-family:var(--mono);font-size:.68rem;font-weight:600}

/* ── Contenu : colonne centrée dans l'espace qui reste à droite du rail ── */
main{
  width:min(var(--large),100%);margin-inline:auto;
  padding:1.7rem 1.6rem 4rem;display:grid;gap:2.4rem;
}
.fil{display:flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--faible);font-weight:600}
.fil b{color:var(--texte)}

.bloc{scroll-margin-top:90px;display:grid;gap:1.1rem}
.entete{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.sourcil{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--iris);
}
.sourcil::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--iris)}
.entete h2{font-size:1.72rem;font-weight:700;margin-top:.5rem}
.entete p{color:var(--doux);font-size:.92rem;max-width:56ch;margin-top:.35rem}

.panneau{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r-lg);box-shadow:var(--ombre)}

/* ═══ Hero : la thèse — le travail des agents, en direct ═══ */
.hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:1.4rem;align-items:stretch}
.hero-txt{padding:2.1rem 2rem;display:flex;flex-direction:column;justify-content:center;gap:1.1rem}
.etiq{
  display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
  padding:.36rem .8rem;border-radius:30px;background:var(--iris-voile);color:var(--iris);
  font-size:.74rem;font-weight:700;letter-spacing:.02em;
}
.etiq svg{width:14px;height:14px}
.hero h1{font-size:clamp(1.95rem,3.2vw,2.85rem);font-weight:800;line-height:1.06}
.hero h1 em{
  font-style:normal;color:var(--iris);white-space:nowrap;
  background:linear-gradient(to top,color-mix(in srgb,var(--iris) 17%,transparent) 0 .26em,transparent .26em);
}
.hero .accroche{color:var(--doux);font-size:1rem;max-width:52ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.2rem}
.btn{
  display:inline-flex;align-items:center;gap:.55rem;padding:.78rem 1.3rem;border-radius:11px;
  border:1px solid transparent;cursor:pointer;font-weight:700;font-size:.88rem;
  transition:transform .2s var(--ease),box-shadow .2s ease,background .2s ease;
}
.btn svg{width:16px;height:16px}
.btn-iris{background:linear-gradient(100deg,var(--iris) 0%,color-mix(in srgb,var(--iris) 72%,#000) 100%);color:#fff;box-shadow:0 8px 22px color-mix(in srgb,var(--iris) 34%,transparent)}
.btn-iris:hover{transform:translateY(-2px);box-shadow:0 14px 32px color-mix(in srgb,var(--iris) 48%,transparent)}
.btn-fin{background:var(--carte-2);border-color:var(--ligne);color:var(--texte)}
.btn-fin:hover{border-color:var(--ligne-forte);transform:translateY(-2px)}
.connecteurs{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-top:.3rem}
.connecteurs span:first-child{font-size:.72rem;color:var(--faible);font-weight:600;text-transform:uppercase;letter-spacing:.09em;width:100%}
.connecteurs b{
  font-family:var(--mono);font-size:.74rem;font-weight:600;color:var(--doux);
  padding:.28rem .6rem;border:1px solid var(--ligne);border-radius:7px;background:var(--carte-2);
}

/* ── La console : un dossier traverse réellement les agents ── */
.console{background:var(--nuit);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;border:1px solid #16304F}
.console-tete{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-bottom:1px solid #16304F;background:#0A1D33}
.feux{display:flex;gap:.34rem}
.feux i{width:9px;height:9px;border-radius:50%;background:#28486C;display:block}
.feux i:first-child{background:#E0475F}
.feux i:nth-child(2){background:#C2830B}
.console-tete b{font-family:var(--mono);font-size:.73rem;color:#7E97B8;font-weight:400}
.console-etat{margin-left:auto;display:flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.7rem;color:#4ECFA4}
.console-etat i{width:6px;height:6px;border-radius:50%;background:#4ECFA4;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(78,207,164,.5)}50%{opacity:.45;box-shadow:0 0 0 5px rgba(78,207,164,0)}}

.pipeline{flex:1;align-content:center;padding:1.4rem 1.1rem 1.1rem;display:grid;gap:.55rem}
.etape{
  display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:.75rem;
  padding:.6rem .7rem;border-radius:11px;border:1px solid transparent;
  transition:background .35s ease,border-color .35s ease;
}
.etape .rond{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:#14304E;color:#5E799C;transition:background .35s ease,color .35s ease,transform .35s var(--ease);
}
.etape .rond svg{width:15px;height:15px}
.etape .nom{font-size:.83rem;font-weight:600;color:#7E97B8;transition:color .35s ease}
.etape .nom small{display:block;font-weight:400;font-size:.72rem;color:#4E6C90;font-family:var(--mono)}
.etape .duree{font-family:var(--mono);font-size:.7rem;color:#3E5C80}
.etape.actif{background:color-mix(in srgb,var(--iris) 17%,transparent);border-color:color-mix(in srgb,var(--iris-clair) 40%,transparent)}
.etape.actif .rond{background:var(--iris);color:#fff;transform:scale(1.06)}
.etape.actif .nom{color:#fff}
.etape.fait .rond{background:rgba(78,207,164,.16);color:#4ECFA4}
.etape.fait .nom{color:#A8BFDA}
.etape.fait .duree{color:#4ECFA4}

.journal{
  border-top:1px solid #16304F;background:#04101E;padding:.8rem 1.1rem 1rem;
  font-family:var(--mono);font-size:.715rem;line-height:1.85;color:#5E799C;
  height:104px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
}
.journal div{animation:monte .35s var(--ease) backwards}
.journal .h{color:var(--iris-clair)}
.journal .ok{color:#4ECFA4}
@keyframes monte{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* ═══ Tuiles de chiffres ═══ */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.tuile{padding:1.2rem 1.3rem;display:grid;gap:.15rem}
.tuile .v{font-family:var(--disp);font-size:2.15rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.tuile .k{font-size:.8rem;color:var(--doux);font-weight:500}
.tuile .delta{font-family:var(--mono);font-size:.7rem;color:var(--menthe);font-weight:600;margin-top:.3rem}

/* ═══ Sécurité : deux options ═══ */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1rem}
.opt{padding:1.5rem;display:grid;gap:.75rem;align-content:start;transition:transform .25s var(--ease),box-shadow .25s ease}
.opt:hover{transform:translateY(-3px);box-shadow:var(--ombre-h)}
.opt .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--iris-voile);color:var(--iris)}
.opt .ic svg{width:21px;height:21px}
.opt h3{font-size:1.1rem;font-weight:700}
.opt p{color:var(--doux);font-size:.89rem}
.opt ul{list-style:none;margin:.3rem 0 0;padding:0;display:grid;gap:.5rem}
.opt li{display:flex;align-items:flex-start;gap:.55rem;font-size:.855rem;color:var(--texte)}
.opt li svg{width:15px;height:15px;flex:none;margin-top:.24rem;color:var(--menthe)}
.devise{
  grid-column:1/-1;text-align:center;font-family:var(--disp);font-weight:700;font-size:1.22rem;
  padding:1.1rem;border-radius:var(--r);background:var(--menthe-voile);color:var(--menthe);
}

/* ═══ Fonctionnalités ═══ */
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.fonc{padding:1.3rem;display:grid;gap:.55rem;align-content:start;transition:transform .25s var(--ease),box-shadow .25s ease,border-color .25s ease}
.fonc:hover{transform:translateY(-3px);box-shadow:var(--ombre-h);border-color:var(--iris-clair)}
.fonc .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--carte-2);border:1px solid var(--ligne);color:var(--iris)}
.fonc .ic svg{width:19px;height:19px}
.fonc h3{font-size:.98rem;font-weight:700}
.fonc p{color:var(--doux);font-size:.855rem}

/* ═══ Agents ═══ */
.agents{display:grid;gap:.6rem}
.agent{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:1rem;
  padding:.85rem 1.1rem;border-radius:var(--r);border:1px solid var(--ligne);background:var(--carte);
  transition:transform .22s var(--ease),border-color .22s ease,box-shadow .22s ease;
}
.agent:hover{transform:translateX(4px);border-color:var(--iris-clair);box-shadow:var(--ombre)}
.agent .av{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  font-family:var(--mono);font-size:.82rem;font-weight:600;
  background:var(--iris-voile);color:var(--iris);border:1px solid color-mix(in srgb,var(--iris) 18%,transparent);
}
.agent b{display:block;font-size:.93rem;font-weight:700;font-family:var(--disp)}
.agent span{font-size:.84rem;color:var(--doux)}
.agent .jauge{width:96px;display:grid;gap:.3rem;justify-items:end}
.agent .jauge i{font-family:var(--mono);font-size:.7rem;color:var(--faible);font-style:normal}
.agent .barre{width:96px;height:5px;border-radius:3px;background:var(--carte-2);border:1px solid var(--ligne);overflow:hidden}
.agent .barre b{display:block;height:100%;background:linear-gradient(90deg,var(--iris-clair),var(--iris));border-radius:3px}

/* ═══ Tarifs ═══ */
.offres{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1rem;align-items:start}
.offre{padding:1.5rem 1.4rem;display:grid;gap:.85rem;align-content:start;position:relative;transition:transform .25s var(--ease),box-shadow .25s ease}
.offre:hover{transform:translateY(-4px);box-shadow:var(--ombre-h)}
.offre.vedette{border-color:var(--iris);box-shadow:0 0 0 1px var(--iris),0 18px 44px color-mix(in srgb,var(--iris) 18%,transparent)}
.ruban{
  position:absolute;top:-11px;left:1.4rem;padding:.2rem .7rem;border-radius:20px;
  background:linear-gradient(100deg,var(--iris) 0%,color-mix(in srgb,var(--iris) 72%,#000) 100%);color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.offre h3{font-size:1.02rem;font-weight:700;color:var(--doux)}
.prix{display:flex;align-items:baseline;gap:.3rem}
.prix b{font-family:var(--disp);font-size:2.25rem;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.prix span{font-size:.82rem;color:var(--faible);font-weight:500}
.offre ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;border-top:1px solid var(--ligne);padding-top:.9rem}
.offre li{display:flex;align-items:flex-start;gap:.55rem;font-size:.855rem}
.offre li svg{width:15px;height:15px;flex:none;margin-top:.24rem;color:var(--menthe)}
.offre li.non{color:var(--faible)}
.offre li.non svg{color:var(--ligne-forte)}

/* ═══ Avis ═══ */
.avis{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:1rem}
.avis blockquote{margin:0;padding:1.4rem;display:grid;gap:.9rem;align-content:start}
.avis q{font-size:.93rem;line-height:1.65;quotes:"«\00a0" "\00a0»"}
.avis footer{display:flex;align-items:center;gap:.7rem;border-top:1px solid var(--ligne);padding-top:.9rem}
.avis footer i{width:34px;height:34px;border-radius:50%;background:var(--carte-2);border:1px solid var(--ligne);display:grid;place-items:center;font-style:normal;font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--doux)}
.avis footer b{display:block;font-size:.86rem;font-weight:700}
.avis footer span{font-size:.78rem;color:var(--faible)}

/* ═══ Questions ═══ */
.faq{display:grid;gap:.55rem}
details{border:1px solid var(--ligne);border-radius:var(--r);background:var(--carte);overflow:hidden;transition:border-color .2s ease}
details[open]{border-color:var(--iris-clair)}
summary{
  padding:.95rem 1.2rem;cursor:pointer;font-weight:600;font-size:.92rem;
  display:flex;align-items:center;gap:.8rem;list-style:none;
}
summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-left:auto;width:9px;height:9px;flex:none;border-right:2px solid var(--faible);border-bottom:2px solid var(--faible);transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
details p{padding:0 1.2rem 1.1rem;color:var(--doux);font-size:.88rem;max-width:68ch}

/* ═══ Demande d'accès ═══ */
.acces{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:0;overflow:hidden}
.acces-txt{padding:2rem;display:grid;gap:1rem;align-content:center;background:linear-gradient(150deg,var(--encre) 0%,var(--nuit) 100%);color:#C3D3E8}
.acces-txt h2{color:#fff;font-size:1.65rem;font-weight:800}
.acces-txt p{font-size:.91rem}
.acces-txt ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.acces-txt li{display:flex;align-items:flex-start;gap:.6rem;font-size:.88rem}
.acces-txt li svg{width:16px;height:16px;flex:none;margin-top:.2rem;color:#4ECFA4}
.form{padding:2rem;display:grid;gap:.85rem}
.champ{display:grid;gap:.32rem}
.champ label{font-size:.76rem;font-weight:700;color:var(--doux);letter-spacing:.02em}
.champ input,.champ select{
  padding:.68rem .85rem;border-radius:10px;border:1px solid var(--ligne);background:var(--carte-2);
  color:var(--texte);font:inherit;font-size:.88rem;transition:border-color .2s ease,box-shadow .2s ease;
}
.champ input:focus,.champ select:focus{outline:none;border-color:var(--iris);box-shadow:0 0 0 3px var(--iris-voile)}
.duo-champ{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.note{display:flex;align-items:flex-start;gap:.5rem;font-size:.76rem;color:var(--faible)}
.note svg{width:14px;height:14px;flex:none;margin-top:.2rem}

.pied{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:1.4rem;border-top:1px solid var(--ligne);font-size:.8rem;color:var(--faible);
}
.pied b{font-family:var(--disp);color:var(--texte)}

/* ═══ Mouvement ═══
   Quatre familles seulement, chacune avec un rôle : la lueur suit la souris
   sur les surfaces, le reflet récompense le clic, les données se dessinent
   quand elles arrivent, la barre du haut réagit au défilement. */

/* La lueur : un halo violet qui suit le curseur sur une carte. */
.lueur{position:relative;isolation:isolate}
.lueur::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),
    color-mix(in srgb,var(--iris) 13%,transparent), transparent 64%);
  opacity:0;transition:opacity .35s ease;
}
.lueur:hover::before{opacity:1}

/* Le reflet qui traverse le bouton principal au survol. */
.btn-iris{position:relative;overflow:hidden}
.btn-iris::after{
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-18deg);transition:left .65s var(--ease);
}
.btn-iris:hover::after{left:140%}

/* Les barres des agents se dessinent à l'arrivée à l'écran. */
.agent .barre b{transition:width 1.1s cubic-bezier(.2,.75,.3,1)}

/* Les sections montent à leur arrivée. Elles ne partent jamais de
   l'invisible : le plancher est à .35 d'opacité, donc le texte reste
   lisible même si l'animation est sautée. */
@keyframes monter{from{opacity:.35;transform:translateY(22px)}to{opacity:1;transform:none}}
section.reveler{animation:monter .6s var(--ease) both}

/* La barre du haut se détache dès qu'on quitte le sommet. */
.topbar{transition:box-shadow .3s ease,border-color .3s ease}
.topbar.dense{box-shadow:0 8px 28px rgba(11,37,69,.09);border-color:var(--ligne-forte)}

/* Le sigle respire doucement. */
@keyframes respire{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.sigle{animation:respire 5s ease-in-out infinite}



/* ═══ Séquence d'ouverture ═══
   Règle de sûreté : aucune animation ne part de l'invisible. Le texte est
   lisible dès la première image, seul le déplacement est animé. Si le
   navigateur saute l'animation, rien ne disparaît. */
@keyframes glisse{from{transform:translateX(-16px)}to{transform:none}}
@keyframes lever{from{transform:translateY(16px)}to{transform:none}}
.rail-lien,.rail-titre{animation:glisse .4s var(--ease) backwards}
.entre{animation:lever .42s var(--ease) backwards}

/* ═══ Téléphone et tablette ═══ */
@media (max-width:1080px){
  .hero{grid-template-columns:1fr}
  .acces{grid-template-columns:1fr}
}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .rail{
    position:fixed;top:0;left:0;width:min(290px,84vw);height:100dvh;
    transform:translateX(-102%);transition:transform .34s var(--ease);
    box-shadow:0 0 60px rgba(0,0,0,.4);
  }
  .rail.ouvert{transform:none}
  .burger{display:grid}
  .voile{display:block}
  .voile.ouvert{opacity:1;pointer-events:auto}
  main{padding:1.2rem 1.1rem 3rem}
  .topbar{padding:.7rem 1.1rem}
  .recherche{display:none}
  .puce-demo{display:none}
  .hero-txt{padding:1.6rem 1.4rem}
  .form,.acces-txt{padding:1.5rem 1.3rem}
}
@media (max-width:520px){
  .duo-champ{grid-template-columns:1fr}
  .entete h2{font-size:1.4rem}
  .pill-agents span:not(.n){display:none}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ═══════════════════════════════════════════════════════════════════
   Blocs alimentes par le back-office : annonces, bandeau clients,
   agents avec photo, fondateurs, tarifs reels, avis notes, RGPD.
   ═══════════════════════════════════════════════════════════════════ */

/* Le logo du rail : pose sur une pastille claire, il reste lisible quel
   que soit le fichier fourni (fond transparent ou fond blanc). */
.rail-marque{text-decoration:none}
.rail-logo{height:26px;width:auto;display:block;background:#fff;
  padding:.4rem .7rem;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.25)}

/* Un sous-menu se range sous son parent, legerement en retrait. */
.rail-fils{padding-left:1.9rem;font-size:.845rem;color:#93AAC6}
.rail-fils svg{width:15px;height:15px}
.clignote{animation:clignote 1.6s ease-in-out infinite}
@keyframes clignote{0%,100%{opacity:1}50%{opacity:.4}}
.rail-lien .nav-perso{display:inline-block;padding:.12rem .55rem;border-radius:20px}

/* Annonces evenement */
.annonces{display:grid;gap:1rem}
.annonce{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.2rem;padding:1.1rem 1.3rem}
.annonce img{width:54px;height:54px;object-fit:cover;border-radius:12px;flex:none}
.annonce b{font-family:var(--disp);font-size:1.02rem;font-weight:700;display:block}
.annonce-st{font-size:.85rem;color:var(--iris);font-weight:600}
.annonce p{font-size:.87rem;color:var(--doux);margin-top:.3rem}
.annonce-part{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.5rem;font-size:.78rem;color:var(--faible)}
.annonce-part img{width:auto;height:22px;border-radius:0}

/* Bandeau des clients */
.clients-band{display:grid;gap:.7rem;padding:.2rem}
.cb-label{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--faible)}
.cb-logos{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem}
.cb-logo{display:inline-flex;align-items:center;padding:.5rem .9rem;border-radius:11px;
  background:var(--carte);border:1px solid var(--ligne);font-size:.82rem;font-weight:600;color:var(--doux)}
.cb-logo img{height:24px;width:auto;display:block}

/* Agents : la photo remplace les initiales */
.agent .av{overflow:hidden;padding:0}
.agent .av img{width:100%;height:100%;object-fit:cover;display:block}
.agent-tag{font-family:var(--mono);font-size:.68rem;font-weight:600;color:var(--iris);
  background:var(--iris-voile);border-radius:20px;padding:.2rem .6rem;white-space:nowrap}

/* Fonctionnalites : image ou icone dessinee */
.fonc .ic img{width:22px;height:22px;object-fit:contain}
.fonc .ic svg{width:19px;height:19px}
.fonc-lien{font-size:.82rem;font-weight:700;color:var(--iris)}
.fonc-lien:hover{text-decoration:underline}

/* Encart RGPD */
.rgpd{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1.2rem;padding:1.2rem 1.4rem}
.rgpd img{width:76px;height:auto;border-radius:10px}
.rgpd p{font-size:.87rem;color:var(--doux)}

/* Tarifs reels : prix barre, remise, categories depliables, note */
.prix s{font-size:1rem;color:var(--faible);font-weight:500}
/* Remise : sans fond ni rouge, simplement en gras dans la couleur du texte. */
.prix-off{font-family:var(--mono);font-size:.78rem;font-weight:800;color:var(--encre);background:none;padding:0}
.prix-an{font-size:.8rem;color:var(--faible);font-family:var(--mono)}
.prix-cadeau{font-size:.82rem;color:var(--menthe);background:var(--menthe-voile);
  border-radius:10px;padding:.5rem .7rem}
.prix-note{font-size:.85rem;color:var(--doux);text-align:center;max-width:70ch;margin-inline:auto}
.price-list{list-style:none;margin:0;padding:.9rem 0 0;border-top:1px solid var(--ligne);display:grid;gap:.45rem}
.price-list li{display:flex;align-items:baseline;justify-content:space-between;gap:.7rem;font-size:.85rem}
.price-list li b{font-family:var(--mono);font-size:.82rem;white-space:nowrap}
.price-list li b.offert{color:var(--menthe)}
.price-list li b.minus{color:var(--corail)}
.price-cats{display:grid;gap:.4rem}
.price-cat{border:1px solid var(--ligne);border-radius:11px;background:var(--carte-2);overflow:hidden}
.price-cat summary{display:flex;align-items:center;gap:.55rem;padding:.6rem .8rem;cursor:pointer;
  font-size:.85rem;font-weight:600;list-style:none}
.price-cat summary::-webkit-details-marker{display:none}
.price-cat .cat-ico{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;
  background:var(--iris-voile);color:var(--iris);flex:none}
.price-cat .cat-chev{margin-left:auto;transition:transform .25s var(--ease);color:var(--faible)}
.price-cat[open] .cat-chev{transform:rotate(180deg)}
.price-cat .price-list{padding:0 .8rem .7rem;border-top:0}

/* Avis : etoiles et photo */
.avis footer img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.avis footer{flex-wrap:wrap}
.etoiles{margin-left:auto;color:var(--ambre);font-size:.85rem;letter-spacing:.06em}

/* Fondateurs */
.fondateur{display:grid;gap:.5rem;justify-items:start;padding:1.3rem}
.fondateur img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.fondateur b{font-family:var(--disp);font-size:1rem;font-weight:700}
.fondateur > span{font-size:.85rem;color:var(--doux)}
.fond-liens{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.2rem}
.fond-liens a{font-size:.78rem;font-weight:600;color:var(--iris);
  border:1px solid var(--ligne);border-radius:8px;padding:.25rem .6rem}
.fond-liens a:hover{border-color:var(--iris)}

/* Pastille du hero (onglet Fondateurs / pastille) */
.hero-pastille{font-size:.87rem;color:var(--doux);background:var(--carte-2);
  border:1px solid var(--ligne);border-radius:12px;padding:.7rem .9rem}

/* Formulaire : champ piege et message d'erreur */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-erreur{background:#FDEBEE;color:#A3243A;border:1px solid #F3C2CC;border-radius:10px;
  padding:.7rem .9rem;font-size:.85rem;font-weight:600}
.form{position:relative}
.sourcil-clair{color:var(--iris-clair)}
.sourcil-clair::before{background:var(--iris-clair)}

/* Pied de page */
.pied{flex-direction:row}
.pied-socials{display:flex;gap:.8rem}
.pied-socials a{color:var(--iris);font-weight:600}
.puce-demo{text-decoration:none;cursor:pointer}
.puce-demo:hover{border-color:var(--iris);color:var(--iris)}

/* ═══════════════════════════════════════════════════════════════════
   LE RAIL — logo, accordeon, icones dessinees, mouvement.
   Tout decoule des deux couleurs reglees dans la page privee.
   ═══════════════════════════════════════════════════════════════════ */

/* ── La marque : un vrai logo, pas une vignette ── */
.rail-marque{
  display:grid;gap:.45rem;justify-items:center;text-decoration:none;
  padding:1.4rem 1.1rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.08);
  position:relative;overflow:hidden;
}
/* Un halo d'accent derriere le logo : discret, il ancre la couleur choisie. */
.rail-marque::after{
  content:"";position:absolute;top:-60%;left:50%;width:210px;height:210px;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--iris) 40%,transparent),transparent 66%);
  opacity:.5;
}
.rail-logo{
  position:relative;z-index:1;height:46px;width:auto;max-width:100%;display:block;
  background:#fff;padding:.55rem .95rem;border-radius:13px;
  box-shadow:0 6px 22px rgba(0,0,0,.34);
  transition:transform .35s var(--ease);
}
.rail-marque:hover .rail-logo{transform:translateY(-2px) scale(1.03)}
.rail-sous{
  position:relative;z-index:1;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#7E97B8;
}

/* ── Icone du lien : un carre discret qui s'allume ── */
.rail-ico{
  display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:9px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);color:#B7CAE1;
  transition:background .26s var(--ease),color .26s var(--ease),
             border-color .26s var(--ease),transform .3s var(--ease);
}
.rail-ico svg{width:16px;height:16px;display:block}
.rail-lien:hover .rail-ico{background:color-mix(in srgb,var(--iris) 30%,transparent);color:#fff;transform:scale(1.07)}
.rail-lien[aria-current="true"] .rail-ico,
.rail-tete[aria-expanded="true"] .rail-ico{background:rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.22)}

/* Les icones se dessinent au chargement, trait apres trait. */
@keyframes tracer{
  from{stroke-dasharray:90;stroke-dashoffset:90}
  to{stroke-dasharray:90;stroke-dashoffset:0}
}
.rail-ico svg *{animation:tracer .9s var(--ease) backwards}

/* ── Le lien ── */
.rail-lien{gap:.7rem}
.rail-lien .libelle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── L'accordeon ── */
.rail-groupe{position:relative;z-index:1}
.rail-tete{width:100%}
.rail-tete .chevron{margin-left:.1rem;color:#7E97B8;transition:transform .34s var(--ease)}
.rail-tete[aria-expanded="true"] .chevron{transform:rotate(180deg)}
.rail-tete[aria-expanded="true"]{color:#fff}

/* Le tiroir s'ouvre en hauteur : la valeur exacte est posee par le script. */
.rail-tiroir{display:grid;grid-template-rows:0fr;transition:grid-template-rows .36s var(--ease)}
.rail-groupe.ouvert .rail-tiroir{grid-template-rows:1fr}
.rail-tiroir-in{overflow:hidden;min-height:0}

/* Un fil vertical relie les sous-menus a leur parent. */
.rail-fils{
  position:relative;padding-left:2.35rem;font-size:.845rem;color:#93AAC6;
  opacity:0;transform:translateX(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),color .2s ease;
}
.rail-groupe.ouvert .rail-fils{opacity:1;transform:none}
.rail-fils::before{
  content:"";position:absolute;left:1.1rem;top:0;bottom:0;width:1.5px;
  background:rgba(255,255,255,.13);
}
.rail-fils:first-child::before{top:50%}
.rail-fils:last-child::before{bottom:50%}
.rail-puce{
  position:absolute;left:calc(1.1rem - 3px);top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:#2F4B6B;
  transition:background .24s var(--ease),box-shadow .24s var(--ease);
}
.rail-fils:hover{color:#fff}
.rail-fils:hover .rail-puce,
.rail-fils[aria-current="true"] .rail-puce{
  background:var(--iris-clair);box-shadow:0 0 0 4px color-mix(in srgb,var(--iris) 26%,transparent);
}
.rail-fils em{
  display:block;font-style:normal;font-size:.73rem;color:#5E799C;line-height:1.35;
  white-space:normal;margin-top:.1rem;
}

/* Les libelles personnalises depuis l'onglet Menu gardent leur pastille. */
.rail-lien .nav-perso{display:inline-block;padding:.1rem .55rem;border-radius:20px;flex:none}

/* ── Le pied du rail : un indicateur vivant ── */
.rail-pied{align-items:center}
.rail-pied .vert{display:inline-flex;align-items:center;gap:.35rem}

/* Les regles generales du lien ne doivent pas bousculer l'icone ni le
   chevron : chacun a deja son propre mouvement. */
.rail-lien:hover .rail-ico svg,
.rail-lien:focus-visible .rail-ico svg,
.rail-lien:hover .chevron,
.rail-lien:focus-visible .chevron{transform:none}
.rail-tete[aria-expanded="true"] .chevron{transform:rotate(180deg)}
.rail-lien .rail-ico svg{opacity:1}

/* ═══════════════════════════════════════════════════════════════════
   MENU REPLIABLE — le rail se reduit a ses icones.
   Le reglage est memorise dans le navigateur du visiteur.
   ═══════════════════════════════════════════════════════════════════ */

/* Le logo est deja transparent (licornne-blanc.png) : plus de pastille
   blanche, il se fond dans la couleur du rail choisie dans la page privee. */
.rail-logo{
  background:none;padding:0;border-radius:0;box-shadow:none;
  height:52px;
}

.rail-tete-menu{display:flex;align-items:center;gap:.5rem;padding-right:.4rem}
.rail-tete-menu .rail-titre{flex:1;padding-right:0}
.rail-replier{
  display:grid;place-items:center;width:30px;height:30px;flex:none;
  border-radius:9px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);color:#7E97B8;cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .3s var(--ease);
}
.rail-replier:hover{background:rgba(255,255,255,.12);color:#fff}
.rail-replier svg{transition:transform .34s var(--ease)}

/* ── L'etat replie ── */
.app.replie{--rail-l:78px}
.replie .rail-marque{padding:1.1rem .5rem .9rem}
.replie .rail-logo{height:30px}
.replie .rail-sous{display:none}
.replie .rail-marque::after{width:120px;top:-70%}

.replie .rail-nav{padding-left:.55rem;padding-right:.55rem}
.replie .rail-tete-menu .rail-titre{display:none}
.replie .rail-tete-menu{justify-content:center;padding:.8rem 0 .45rem}
.replie .rail-replier svg{transform:rotate(180deg)}

/* Seule l'icone reste : le libelle, le compteur et le chevron s'effacent. */
.replie .rail-lien{justify-content:center;padding:.62rem .3rem}
.replie .rail-lien .libelle,
.replie .rail-lien .compte,
.replie .rail-lien .chevron{display:none}
.replie .curseur,.replie .survol{left:.55rem;width:calc(100% - 1.1rem)}

/* Les sous-menus n'ont plus de place : l'accordeon reste ferme. */
.replie .rail-tiroir{grid-template-rows:0fr!important}

/* Le bouton du bas devient une simple icone. */
.replie .rail-cta{padding:.8rem .55rem}
.replie .rail-btn{padding:.7rem 0}
.replie .rail-btn span{display:none}
.replie .rail-btn svg{margin:0}
.replie .rail-pied{display:none}

/* Une bulle rappelle le nom du lien quand le menu est replie. */
.replie .rail-lien::after{
  content:attr(data-nom);position:absolute;left:calc(100% + 12px);top:50%;
  transform:translateY(-50%) translateX(-6px);
  background:var(--encre-2);color:#fff;font-size:.8rem;font-weight:600;white-space:nowrap;
  padding:.4rem .7rem;border-radius:9px;box-shadow:0 8px 22px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;z-index:60;
  transition:opacity .2s ease,transform .2s var(--ease);
}
.replie .rail-lien:hover::after,
.replie .rail-lien:focus-visible::after{opacity:1;transform:translateY(-50%) translateX(0)}

/* La transition du repli : la largeur glisse, le contenu suit. */
.app{transition:grid-template-columns .34s var(--ease)}
.rail-logo,.rail-marque{transition:height .3s var(--ease),padding .3s var(--ease)}

/* Sur telephone le rail est deja un tiroir : le repli n'a pas de sens. */
@media (max-width:900px){
  .app.replie{--rail-l:272px}
  .rail-replier{display:none}
  .replie .rail-lien{justify-content:flex-start;padding:.62rem .75rem}
  .replie .rail-lien .libelle,.replie .rail-lien .compte,.replie .rail-lien .chevron{display:inline}
  .replie .rail-lien::after{display:none}
  .replie .rail-sous,.replie .rail-pied{display:block}
  .replie .rail-btn span{display:inline}
  .replie .rail-tete-menu .rail-titre{display:block}
}
@media (prefers-reduced-motion: reduce){
  .app,.rail-logo,.rail-marque{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════
   PASSERELLE pour les modules partages (chat « Une question ? »).
   Ils sont ecrits avec les noms de couleurs du design classique :
   on les fait pointer vers les teintes du design Workspace, pour
   qu'ils suivent la couleur choisie dans la page privee.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --grad:linear-gradient(135deg,var(--iris) 0%,color-mix(in srgb,var(--iris) 72%,#000) 100%);
  --blue:var(--iris);
  --blue-deep:color-mix(in srgb,var(--iris) 74%,#000);
  --blue-soft:var(--iris-voile);
  --ink:var(--texte);
  --soft:var(--doux);
  --faint:var(--faible);
  --bg2:var(--carte-2);
  --shadow-lg:var(--ombre-h);
  --shadow:var(--ombre);
}
/* Le chat passe en bas a DROITE dans ce design : a gauche il se posait
   sur le rail, puis sur le bouton du hero. chat.css est charge APRES ce
   fichier, il faut donc une regle plus precise (deux selecteurs). */
body .lc-launch{left:auto;right:1.6rem}
body .lc-panel{left:auto;right:1.6rem}
@media (max-width:520px){
  body .lc-launch{right:1rem;bottom:1rem}
  body .lc-panel{left:.6rem;right:.6rem}
}

/* ═══════════════════════════════════════════════════════════════════
   TABLETTE ET TELEPHONE
   Regle de fond : une colonne de grille ne descend jamais sous la
   largeur du contenu de son element le plus large. Sans minmax(0,…),
   un seul bloc un peu large etire toute la page et le site deborde
   vers la droite. On rend donc chaque grille reellement retrecissable.
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Les colonnes peuvent retrecir. */
main{grid-template-columns:minmax(0,1fr)}
main > *{min-width:0}
/* Le hero garde ses deux colonnes : il est aussi un .bloc, et la regle
   ci-dessus l'aplatirait sur grand ecran. */
.bloc:not(.hero){grid-template-columns:minmax(0,1fr)}
.bloc > *{min-width:0}
@media (min-width:1081px){
  .hero{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr)}
}
.etape{grid-template-columns:30px minmax(0,1fr) auto}
.annonce{grid-template-columns:auto minmax(0,1fr) auto}
.rgpd{grid-template-columns:auto minmax(0,1fr)}
.entete > *{min-width:0}

/* 2. Les grilles de cartes ne forcent plus une largeur minimale plus
      grande que l'ecran : sur un petit telephone elles passent a une
      colonne au lieu de deborder. */
.duo{grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr))}
.grille{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.offres{grid-template-columns:repeat(auto-fit,minmax(min(255px,100%),1fr))}
.avis{grid-template-columns:repeat(auto-fit,minmax(min(275px,100%),1fr))}
.chiffres{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}

/* 3. Rien ne depasse : images, mots tres longs, adresses email. */
img{max-width:100%;height:auto}
h1,h2,h3,p,li,q,summary,.libelle,.annonce-st{overflow-wrap:break-word}
.fond-liens a,.agent span,.cnx-champ input{overflow-wrap:anywhere}

/* ── Tablette ── */
@media (max-width:1080px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .acces{grid-template-columns:minmax(0,1fr)}
  /* La console passe sous le texte : on lui redonne une hauteur lisible. */
  .journal{height:84px}
}

/* ── Telephone ── */
@media (max-width:640px){
  main{padding:1rem .9rem 2.6rem;gap:1.7rem}
  .topbar{padding:.6rem .9rem;gap:.6rem}
  .fil{font-size:.74rem}
  .entete h2{font-size:1.32rem}
  .entete p{font-size:.88rem}
  .hero h1{font-size:1.72rem}
  .hero-txt{padding:1.3rem 1.1rem;gap:.9rem}
  .hero-actions{gap:.5rem}
  .hero-actions .btn{flex:1;justify-content:center;padding:.75rem .9rem;font-size:.84rem}

  /* Un logo partenaire garde ses proportions : sans cela il est ecrase
     en largeur pour tenir dans la ligne. */
  .annonce-part img{max-width:100%;width:auto;height:auto;max-height:22px;
    object-fit:contain;flex:none}

  /* L'annonce se range en colonne : le logo au-dessus du texte. */
  .annonce{grid-template-columns:minmax(0,1fr);gap:.7rem;padding:1rem}
  .annonce img{width:46px;height:46px}
  .annonce .btn{justify-content:center}

  /* La console reste lisible : moins de remplissage, texte plus petit. */
  .console-tete{padding:.65rem .8rem;gap:.5rem}
  .console-tete b{font-size:.66rem}
  .pipeline{padding:.9rem .7rem .8rem}
  .etape{gap:.6rem;padding:.5rem .55rem}
  .etape .nom{font-size:.79rem}
  .etape .nom small{font-size:.68rem}
  .etape .duree{font-size:.66rem}
  .journal{height:74px;padding:.6rem .8rem .7rem;font-size:.66rem;line-height:1.7}
  .jeton{left:.5rem}

  /* Chiffres et cartes : une colonne, moins de vide. */
  .chiffres{gap:.7rem}
  .tuile{padding:1rem 1.1rem}
  .tuile .v{font-size:1.8rem}
  .opt,.fonc,.offre{padding:1.1rem}
  .devise{font-size:1.05rem;padding:.9rem}

  /* Un agent : photo, texte, et l'etiquette passe dessous. */
  .agent{grid-template-columns:40px minmax(0,1fr);gap:.7rem;padding:.75rem .85rem}
  .agent .av{width:40px;height:40px;border-radius:11px}
  .agent-tag{grid-column:1/-1;justify-self:start;font-size:.64rem;
    white-space:normal;line-height:1.4;max-width:100%}
  .agent:hover{transform:none}

  /* L'encart RGPD se range en colonne. */
  .rgpd{grid-template-columns:minmax(0,1fr);gap:.8rem;padding:1rem}
  .rgpd img{width:62px}

  /* Avis : les etoiles passent sous le nom au lieu de serrer le texte. */
  .avis footer{gap:.6rem}
  .etoiles{margin-left:0;width:100%}

  /* Formulaire d'acces. */
  .acces-txt,.form{padding:1.2rem 1.05rem}
  .acces-txt h2{font-size:1.32rem}
  .duo-champ{grid-template-columns:minmax(0,1fr)}

  /* Pied de page en colonne. */
  .pied{flex-direction:column;align-items:flex-start;gap:.5rem;font-size:.76rem}

  /* Bandeau clients : les logos defilent au doigt plutot que de s'empiler. */
  .cb-logos{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.3rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cb-logos::-webkit-scrollbar{display:none}
  .cb-logo{flex:none}

  /* Questions frequentes. */
  summary{padding:.8rem 1rem;font-size:.87rem;gap:.6rem}
  details p{padding:0 1rem 1rem;font-size:.85rem}

  /* Le chat ne doit pas masquer le bouton principal. */
  body .lc-launch{right:.9rem;bottom:.9rem;padding:.65rem 1rem;font-size:.82rem}
}

/* ── Petit telephone (iPhone SE, 320-360 px) ── */
@media (max-width:440px){
  /* Cote a cote, les deux boutons se replient sur deux lignes chacun :
     empiles, ils restent lisibles et faciles a viser au doigt. */
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}
}
@media (max-width:380px){
  main{padding:.9rem .7rem 2.2rem}
  .hero h1{font-size:1.52rem}
  .tuile .v{font-size:1.6rem}
  .prix b{font-size:1.85rem}
  .connecteurs b{font-size:.7rem}
}

/* Le doigt a besoin de cibles d'au moins 44 px. */
@media (hover:none){
  .rail-lien{min-height:46px}
  .mpop-close,.burger,.cnx-oeil{min-width:44px;min-height:44px}
  .btn,.cnx-btn,.rail-btn{min-height:46px}
}

/* ═══════════════════════════════════════════════════════════════════
   IMAGES DU HERO (onglet « Images hero » de la page privee)
   Elles occupent le haut de la colonne droite, au-dessus de la console.
   ═══════════════════════════════════════════════════════════════════ */
.hero-photo{padding:0;overflow:hidden;position:relative}

.hp-cadre{
  position:relative;aspect-ratio:16/9;width:100%;
  background:var(--carte-2);border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;
}
/* Les vues se fondent l'une dans l'autre : une seule visible a la fois. */
.hp-vue{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transform:scale(1.04);
  transition:opacity .8s var(--ease),transform 6s linear;
}
.hp-vue.active{opacity:1;transform:scale(1)}

/* Un voile depuis le bas : l'etiquette reste lisible sur n'importe quelle photo. */
.hp-voile{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    color-mix(in srgb,var(--encre) 78%,transparent) 0%,
    color-mix(in srgb,var(--encre) 26%,transparent) 34%,
    transparent 62%);
}
.hp-etiq{
  position:absolute;left:1rem;bottom:.9rem;z-index:2;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.4rem .85rem;border-radius:30px;
  background:rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:.78rem;font-weight:700;
}
.hp-etiq i{
  width:7px;height:7px;border-radius:50%;background:#4ECFA4;flex:none;
  animation:pulse 1.8s ease-in-out infinite;
}

/* Les points de navigation, sous l'image. */
.hp-points{display:flex;justify-content:center;gap:.4rem;padding:.7rem}
.hp-point{
  width:22px;height:5px;border-radius:3px;border:0;padding:0;cursor:pointer;
  background:var(--ligne-forte);transition:background .25s var(--ease),width .25s var(--ease);
}
.hp-point:hover{background:var(--faible)}
.hp-point.on{background:var(--iris);width:30px}

@media (max-width:1080px){
  /* Colonne unique : l'image garde une hauteur raisonnable. */
  .hp-cadre{aspect-ratio:16/7}
}
@media (max-width:640px){
  .hp-etiq{left:.7rem;bottom:.7rem;font-size:.72rem;padding:.32rem .7rem}
}
@media (prefers-reduced-motion: reduce){
  .hp-vue{transition:none;transform:none}
  .hp-etiq i{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════
   FLECHE DE REMONTEE
   Elle se place AU-DESSUS du chat pour ne jamais le recouvrir, et
   n'apparait qu'une fois la page descendue.
   ═══════════════════════════════════════════════════════════════════ */
.to-haut{
  position:fixed;right:1.6rem;bottom:calc(1.6rem + 62px);z-index:1200;
  width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;
  background:var(--carte);color:var(--iris);
  border:1px solid var(--ligne);box-shadow:var(--ombre-h);
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);
  transition:opacity .25s ease,visibility .25s,transform .28s var(--ease),
             background .2s ease,color .2s ease;
}
.to-haut.visible{opacity:1;visibility:visible;transform:none}
.to-haut:hover{background:var(--iris);color:#fff;border-color:var(--iris);transform:translateY(-3px)}
.to-haut:active{transform:translateY(-1px)}

@media (max-width:640px){
  .to-haut{right:.9rem;bottom:calc(.9rem + 56px);width:44px;height:44px}
}
@media (prefers-reduced-motion: reduce){
  .to-haut{transition:opacity .2s ease,visibility .2s}
  .to-haut:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════
   IMAGE DU HERO — version alignee et animee
   La colonne droite occupe exactement la hauteur de la colonne texte :
   l'image prend la place restante, la console garde sa taille.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Le cadre : revelation a l'ouverture, puis lueur d'accent ── */
.hp-cadre{
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  animation:devoiler .9s var(--ease) both;
}
@keyframes devoiler{
  from{clip-path:inset(0 0 100% 0)}
  to{clip-path:inset(0 0 0 0)}
}
/* Un trait d'accent balaie le haut de l'image au chargement. */
.hp-lueur{
  position:absolute;top:0;left:0;right:0;height:2px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--iris-clair),transparent);
  animation:balayer 2.6s var(--ease) .7s infinite;
  opacity:.9;
}
@keyframes balayer{
  0%{transform:translateX(-100%)}
  55%,100%{transform:translateX(100%)}
}

/* ── Les images respirent : lent rapproche et glissement (Ken Burns) ── */
.hp-vue{transition:opacity .9s var(--ease)}
.hp-vue.active{animation:respirer 14s ease-out both}
@keyframes respirer{
  from{transform:scale(1.005) translate(0,0)}
  to{transform:scale(1.1) translate(-1.6%,-1.4%)}
}
.hp-vue{will-change:transform}

/* ── Les pastilles posees sur l'image ── */
.hp-jeton{
  position:absolute;z-index:2;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.38rem .78rem;border-radius:30px;
  background:rgba(255,255,255,.15);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;font-size:.74rem;font-weight:600;white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
}
.hp-jeton b{font-family:var(--mono);font-weight:700;font-size:.8rem;margin-right:.1rem}
.hp-jeton > span{display:inline}
.hp-jeton svg{opacity:.9}
.hp-e2{top:.9rem;right:.9rem}
.hp-e3{top:3.3rem;right:.9rem}

/* Entree en cascade des trois pastilles. */
.hp-e1,.hp-e2,.hp-e3{animation:poser .6s var(--ease) both}
.hp-e1{animation-delay:.75s}
.hp-e2{animation-delay:.9s}
.hp-e3{animation-delay:1.02s}
@keyframes poser{
  from{opacity:0;transform:translateY(10px) scale(.94)}
  to{opacity:1;transform:none}
}

/* Au survol, l'image se rapproche legerement : la carte reagit. */
.hero-photo{transition:box-shadow .3s ease}
.hero-photo:hover{box-shadow:var(--ombre-h)}
.hero-photo:hover .hp-vue.active{animation-play-state:paused;transform:scale(1.06)}

@media (max-width:640px){
  .hp-e3{display:none}
  .hp-e2{top:.7rem;right:.7rem;font-size:.7rem}
}
@media (prefers-reduced-motion: reduce){
  .hp-cadre,.hp-e1,.hp-e2,.hp-e3{animation:none}
  .hp-lueur{display:none}
  .hp-vue.active{animation:none;transform:none}
}

/* ═══════════════════════════════════════════════════════════════════
   HERO RECOMPOSE — un seul panneau, image a fond perdu
   Fini les deux colonnes de hauteurs differentes qu'on force a
   s'aligner : le texte et l'image partagent la meme carte, donc ils
   font forcement la meme hauteur.
   ═══════════════════════════════════════════════════════════════════ */
.hero{display:block}
.hero-carte{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  overflow:hidden;position:relative;
}
.hero-txt{
  padding:2.6rem 2.4rem;display:flex;flex-direction:column;justify-content:center;gap:1.05rem;
  min-width:0;
}
.hero-photo{position:relative;min-width:0;background:var(--carte-2)}
.hp-cadre{
  position:absolute;inset:0;border-radius:0;overflow:hidden;
  animation:devoiler 1s var(--ease) both;
}

/* Un liseré d'accent marque la jointure texte / image. */
.hero-carte::after{
  content:"";position:absolute;top:0;bottom:0;left:calc(52.5% - 1px);width:2px;z-index:3;
  background:linear-gradient(180deg,transparent,var(--iris),transparent);
  opacity:.35;pointer-events:none;
}

/* Le voile part de la gauche : il fond l'image dans la carte. */
.hp-voile{
  background:
    linear-gradient(to right, var(--carte) 0%, transparent 16%),
    linear-gradient(to top,
      color-mix(in srgb,var(--encre) 70%,transparent) 0%,
      color-mix(in srgb,var(--encre) 16%,transparent) 40%,
      transparent 66%);
}
.hp-points{
  position:absolute;left:0;right:0;bottom:.7rem;z-index:3;
  display:flex;justify-content:center;gap:.4rem;padding:0;
}
.hp-point{background:rgba(255,255,255,.45)}
.hp-point:hover{background:rgba(255,255,255,.75)}
.hp-point.on{background:#fff;width:30px}
.hp-e1{bottom:2.4rem}

/* ═══ LA CHAINE DES AGENTS, EN PLEINE LARGEUR ═══
   Les cinq etapes se lisent de gauche a droite, reliees par un rail
   qui se remplit au fur et a mesure : on voit le dossier avancer. */
.pipeline{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem;
  padding:2.1rem 1.4rem 1.4rem;position:relative;align-content:start;
}
/* Le rail passe par le CENTRE des icones (2,1rem de haut + la moitie
   des 44 px du rond), pas par leur sommet. */
.pipe-rail{
  position:absolute;top:calc(2.1rem + 21px);left:calc(10% + .7rem);right:calc(10% + .7rem);height:3px;
  border-radius:3px;background:#16304F;overflow:hidden;
}
.pipe-fill{
  display:block;height:100%;width:0;border-radius:3px;
  /* La tete de progression est la plus claire : sur fond marine, un
     degrade qui s'assombrit vers la droite disparaitrait. */
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--iris) 80%,#fff) 0%,
    color-mix(in srgb,var(--iris) 30%,#fff) 100%);
  box-shadow:0 0 14px color-mix(in srgb,var(--iris-clair) 80%,transparent);
  transition:width .9s var(--ease);
}
.etape{
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:.45rem;
  padding:0 .3rem;border:0;background:none;text-align:center;position:relative;z-index:1;
}
.etape .rond{
  width:44px;height:44px;border-radius:14px;
  border:2px solid var(--nuit);outline:0;
  transition:background .35s var(--ease),color .35s var(--ease),
             transform .45s cubic-bezier(.34,1.4,.44,1),box-shadow .35s ease;
}
.etape .rond svg{width:19px;height:19px}
.etape .nom{font-size:.82rem;text-align:center;line-height:1.3}
.etape .nom small{display:block;font-size:.68rem;margin-top:.1rem}
.etape .duree{font-size:.7rem}
.etape.actif{background:none;border:0}
.etape.actif .rond{
  transform:scale(1.14);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--iris) 22%,transparent),
             0 8px 22px color-mix(in srgb,var(--iris) 45%,transparent);
}
.etape.fait .rond{border-color:rgba(78,207,164,.35)}

/* Le journal prend toute la largeur : deux colonnes de lignes. */
.journal{height:auto;min-height:76px;padding:.9rem 1.4rem 1.1rem;display:block}
.journal div{display:block}

@media (max-width:1080px){
  .hero-carte{grid-template-columns:minmax(0,1fr)}
  .hero-carte::after{display:none}
  .hero-photo{min-height:300px;order:-1}
  .hp-voile{background:linear-gradient(to top,
    color-mix(in srgb,var(--encre) 72%,transparent) 0%,
    color-mix(in srgb,var(--encre) 18%,transparent) 42%,transparent 68%)}
  .hero-txt{padding:2rem 1.8rem}
}
@media (max-width:940px){
  /* La chaine repasse en liste : a cinq colonnes les libelles se coupent
     en deux et les lignes n'ont plus la meme hauteur. */
  .pipeline{grid-template-columns:minmax(0,1fr);gap:.5rem;padding:1.1rem}
  .pipe-rail{display:none}
  .etape{grid-template-columns:44px minmax(0,1fr) auto;justify-items:start;
    align-items:center;gap:.8rem;text-align:left;padding:.45rem .5rem;border-radius:12px}
  .etape .nom{text-align:left}
  .etape.actif{background:color-mix(in srgb,var(--iris) 17%,transparent)}
  .etape.actif .rond{transform:scale(1.06)}
}
@media (max-width:640px){
  .hero-txt{padding:1.4rem 1.1rem;gap:.85rem}
  .hero-photo{min-height:220px}
  .etape .rond{width:38px;height:38px;border-radius:11px}
  .etape .rond svg{width:16px;height:16px}
}
@media (prefers-reduced-motion: reduce){
  .pipe-fill{transition:none}
  .etape .rond{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════
   HERO — IMAGE PLEINE HAUTEUR + MOTION DESIGN
   L'image couvre toute la hauteur de la carte, du bord haut au bord
   bas. Autour d'elle, des mouvements lents donnent de la vie sans
   distraire : ouverture en diagonale, reflet qui passe, pastilles qui
   flottent, image qui suit la souris.
   ═══════════════════════════════════════════════════════════════════ */
.hero-carte{align-items:stretch;--px:0;--py:0}
.hero-photo{align-self:stretch;height:100%;min-height:100%;overflow:hidden}
.hp-cadre{
  position:absolute;top:0;right:0;bottom:0;left:0;
  width:100%;height:100%;aspect-ratio:auto;
  animation:ouvrir 1.3s cubic-bezier(.7,0,.2,1) .15s both;
}
.hp-vue{height:100%;object-fit:cover;object-position:center}

/* L'image s'ouvre en diagonale, de droite a gauche. */
@keyframes ouvrir{
  from{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}
  to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
}

/* Profondeur : l'ensemble de l'image glisse un peu avec la souris. */
.hp-cadre > .hp-vue{
  translate:calc(var(--px) * -18px) calc(var(--py) * -14px);
  transition:opacity .9s var(--ease),translate .6s cubic-bezier(.2,.7,.2,1);
}
.hp-cadre > .hp-vue{inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px)}

/* Un reflet de lumiere traverse l'image toutes les quelques secondes. */
.hp-cadre::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 48%,transparent 62%);
  transform:translateX(-120%);
  animation:reflet 7s ease-in-out 1.8s infinite;
}
@keyframes reflet{
  0%{transform:translateX(-120%)}
  35%,100%{transform:translateX(120%)}
}

/* Les pastilles flottent doucement, chacune a son rythme. */
.hp-e1{animation:poser .6s var(--ease) .9s both,flotter 5s ease-in-out 1.6s infinite}
.hp-e2{animation:poser .6s var(--ease) 1.05s both,flotter 6s ease-in-out 1.8s infinite}
.hp-e3{animation:poser .6s var(--ease) 1.2s both,flotter 5.5s ease-in-out 2.1s infinite}
@keyframes flotter{
  0%,100%{translate:0 0}
  50%{translate:0 -5px}
}

/* La jointure texte / image : une lumiere descend le long du trait. */
.hero-carte::after{
  background:linear-gradient(180deg,transparent 0%,var(--iris) 50%,transparent 100%);
  background-size:100% 40%;background-repeat:no-repeat;
  opacity:.6;animation:couler 3.6s ease-in-out 1.4s infinite;
}
@keyframes couler{
  from{background-position:0 -60%}
  to{background-position:0 160%}
}

/* Le texte arrive en cascade, element par element. */
.hero-txt > *{animation:monte .7s var(--ease) both}
.hero-txt > :nth-child(1){animation-delay:.1s}
.hero-txt > :nth-child(2){animation-delay:.2s}
.hero-txt > :nth-child(3){animation-delay:.3s}
.hero-txt > :nth-child(4){animation-delay:.4s}
.hero-txt > :nth-child(5){animation-delay:.5s}
.hero-txt > :nth-child(6){animation-delay:.6s}

/* Au survol, l'image se rapproche et s'eclaire legerement. */
.hero-carte:hover .hp-vue.active{filter:saturate(1.08) brightness(1.03)}
.hp-vue{transition:opacity .9s var(--ease),translate .6s cubic-bezier(.2,.7,.2,1),filter .5s ease}

@media (max-width:1080px){
  /* Colonne unique : l'image garde une hauteur fixe au-dessus du texte. */
  .hero-photo{height:auto;min-height:300px}
}
@media (max-width:640px){
  .hero-photo{min-height:220px}
}
@media (prefers-reduced-motion: reduce){
  .hp-cadre,.hp-cadre::after,.hp-e1,.hp-e2,.hp-e3,
  .hero-carte::after,.hero-txt > *{animation:none}
  .hp-cadre > .hp-vue{translate:none}
}

/* ── Contenu remonte au maximum : barre du haut plus fine, aucun vide
   au-dessus du premier bloc (le fil d'Ariane a ete retire). ── */
.topbar{padding-block:.45rem}
main{padding-top:.7rem}
@media (max-width:1080px){ main{padding-top:.6rem} .topbar{padding-block:.45rem} }
@media (max-width:640px){ main{padding-top:.5rem} .topbar{padding-block:.4rem} }

/* ═══════════════════════════════════════════════════════════════════
   AFFICHAGE TELEPHONE
   Sur petit ecran on gagne de la hauteur : cartes plus compactes,
   temoignages qui defilent sur le cote, bouton de chat reduit a son
   icone pour ne plus masquer le contenu.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  main{gap:2.2rem}

  /* Chat : une simple bulle ronde, sans texte. */
  body .lc-launch{padding:0;width:52px;height:52px;justify-content:center;border-radius:50%}
  body .lc-launch span{display:none}

  /* Console : en-tete sur une ligne, titre coupe proprement. */
  .console-tete{gap:.5rem;padding:.7rem .85rem}
  .console-tete b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.68rem}
  .console-etat{flex:none;white-space:nowrap;font-size:.66rem}

  /* Agents : l'etiquette tient sur une ligne. */
  .agent-tag{white-space:normal;font-size:.64rem;line-height:1.35;border-radius:8px;padding:.25rem .55rem}

  /* Fonctionnalites : icone a gauche, texte a droite — deux fois moins haut. */
  .grille{gap:.6rem}
  .fonc{grid-template-columns:38px minmax(0,1fr);column-gap:.85rem;row-gap:.2rem;padding:.95rem 1rem}
  .fonc .ic{grid-row:span 2;align-self:start}
  .fonc h3{font-size:.93rem;align-self:end}
  .fonc p{font-size:.82rem;line-height:1.5}
  .fonc-lien{grid-column:2}
  .fonc:hover{transform:none}

  /* Tarifs : le prix passe a la ligne au lieu de deborder. */
  .prix{flex-wrap:wrap;row-gap:.1rem}
  .prix b{font-size:2rem}

  /* Temoignages : on les fait defiler du doigt, une carte a la fois. */
  .avis{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.75rem;
    margin-inline:-.7rem;padding:0 .7rem .6rem;scrollbar-width:none}
  .avis::-webkit-scrollbar{display:none}
  .avis blockquote{flex:0 0 86%;scroll-snap-align:center;padding:1.15rem}
  .avis q{font-size:.87rem;line-height:1.6}
}

/* ═══════════════════════════════════════════════════════════════════
   FONDATEURS — la grande photo a gauche, les fiches a droite
   Meme principe que le hero : une seule carte, l'image a fond perdu.
   ═══════════════════════════════════════════════════════════════════ */
.fond-carte{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);overflow:hidden}
.fond-photo{position:relative;min-height:320px;background:var(--carte-2)}
.fond-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 15%;transition:transform 6s ease-out}
.fond-carte:hover .fond-photo img{transform:scale(1.04)}
.fond-liste{padding:1.6rem;display:grid;gap:.9rem;align-content:center}

.fondateur{display:grid;gap:.8rem;padding:1.05rem 1.15rem;justify-items:stretch;
  border:1px solid var(--ligne);border-radius:var(--r-md,14px);background:var(--carte-2);
  transition:border-color .25s ease,transform .25s var(--ease)}
.fondateur:hover{border-color:var(--iris-clair);transform:translateY(-2px)}
.fond-tete{display:flex;align-items:center;gap:.85rem}
.fond-pic{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid var(--carte);box-shadow:0 4px 14px rgba(11,37,69,.12)}
.fond-tete .fond-ini{display:grid;place-items:center;font-size:1.05rem;background:var(--iris-voile);color:var(--iris);
  font-family:var(--disp);font-weight:800;font-size:1.05rem}
.fond-tete b{display:block;font-family:var(--disp);font-size:1rem;font-weight:700}
.fond-tete span{display:block;font-size:.84rem;color:var(--doux)}

.fond-liens{display:flex;flex-wrap:wrap;gap:.5rem}
.fond-liens a,.fond-reseaux a{display:inline-flex;align-items:center;gap:.45rem;
  padding:.45rem .8rem;border-radius:30px;border:1px solid var(--ligne);background:var(--carte);
  font-size:.8rem;font-weight:600;color:var(--iris);
  transition:border-color .2s ease,background .2s ease,transform .2s var(--ease)}
.fond-liens a:hover,.fond-reseaux a:hover{border-color:var(--iris);transform:translateY(-1px)}
.fond-liens svg,.fond-reseaux svg{width:15px;height:15px;flex:none}
.fond-liens .fond-wa{background:#25D366;border-color:#25D366;color:#fff}
.fond-liens .fond-wa:hover{background:#1EBE5A;border-color:#1EBE5A}
.fond-reseaux{display:flex;flex-wrap:wrap;gap:.5rem;padding-top:.2rem}

@media (max-width:1080px){
  .fond-carte{grid-template-columns:minmax(0,1fr)}
  .fond-photo{min-height:240px}
}
@media (max-width:640px){
  .fond-photo{min-height:190px}
  .fond-liste{padding:1rem;gap:.7rem}
  .fondateur{padding:.9rem}
  .fond-liens a{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion: reduce){
  .fond-photo img,.fondateur{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════
   COULEURS DE SECOURS POUR LES NAVIGATEURS ANCIENS
   color-mix() n'existe pas avant Safari/iOS 16.2, Chrome 111 et
   Firefox 113. Sans ce bloc, sur ces appareils, les boutons bleus
   perdraient leur fond (texte blanc sur blanc) et le voile des photos
   disparaitrait. Les navigateurs recents ignorent entierement ce bloc.
   ═══════════════════════════════════════════════════════════════════ */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  :root{
    --nuit:#06172B;
    --encre-2:#3C5470;
    --iris-clair:#A49AF0;
    --iris-voile:#EFECFD;
    --grad:var(--iris);
    --blue-deep:var(--iris);
  }
  :root[data-theme="dark"]{--iris-voile:#1C1F4A}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){--iris-voile:#1C1F4A}
  }

  /* Fonds pleins : les boutons, le logo, la pastille des agents. */
  .sigle,.curseur,.pill-agents,.btn-iris,.ruban{background:var(--iris)}
  .sigle,.curseur,.pill-agents,.btn-iris{box-shadow:0 6px 18px rgba(11,37,69,.22)}
  .btn-iris:hover,.pill-agents:hover{box-shadow:0 12px 28px rgba(11,37,69,.28)}
  .offre.vedette{box-shadow:0 0 0 1px var(--iris),0 18px 44px rgba(11,37,69,.14)}

  /* Barre du haut : fond plein au lieu du verre depoli teinte. */
  .topbar{background:var(--fond)}

  /* Voile sombre sur les photos : le texte blanc reste lisible. */
  .hp-voile{background:linear-gradient(to top,rgba(6,20,40,.75) 0%,rgba(6,20,40,.2) 40%,transparent 66%)}

  /* Chaine des agents et menu. */
  .etape.actif{background:rgba(255,255,255,.07)}
  .rail-lien:hover .rail-ico{background:rgba(255,255,255,.14)}
  .pipe-fill{background:var(--iris-clair);box-shadow:none}
  .etape.actif .rond{box-shadow:0 0 0 6px rgba(255,255,255,.1)}
}