/* ============================================================
   DIRECTION ARTISTIQUE : Agence IA x Greenbull (v1)
   Dégradé : #2C7CF6 0% -> #8E5CE8 35% -> #E0509C 68% -> #F4783A 100%
   Un seul groupe de mots en dégradé par section.
   ============================================================ */
:root{
  --grad: linear-gradient(90deg, #2C7CF6 0%, #8E5CE8 35%, #E0509C 68%, #F4783A 100%);

  --bg-light:#FBFBFD;
  --ink:#1D1D1F;
  --bg-dark:#0A0A0C;
  --off-white:#F5F5F7;
  --card:#FFFFFF;

  --blue:#2C7CF6;
  --violet:#8E5CE8;
  --pink:#E0509C;
  --orange:#F4783A;
  --green:#34C759;

  --ink-64: rgba(29,29,31,.64);
  --ink-42: rgba(29,29,31,.42);
  --ink-09: rgba(29,29,31,.09);

  --light-64: rgba(245,245,247,.64);
  --light-42: rgba(245,245,247,.42);
  --light-09: rgba(245,245,247,.09);

  /* ---- Le CTA porte l'accent de la charte active ----
     Six jetons, redefinis par chaque habillage : un nouvel habillage n'a que
     ca a ecrire pour que tous ses boutons suivent, presents comme futurs.
     Les valeurs ci-dessous sont celles de la charte d'origine.

     Le fond n'est pas le --violet tel quel : a #8E5CE8 le libelle blanc n'est
     qu'a 4,33, sous le 4,5 exige pour du 17 px en graisse 600. Un cran plus
     fonce le met a 4,91, et la forme du bouton a 4,75 sur le fond de page.

     --cta-bord sert aux chartes dont l'accent est pale : sans lui, un bouton
     beurre ou lime a un libelle parfaitement lisible mais une forme invisible
     sur son fond clair (1,2 a 1,3 de contraste). */
  --cta-fond:#8552E0;
  --cta-texte:#fff;
  --cta-bord:transparent;
  /* Variante des sections sombres */
  --cta-clair-fond:#8552E0;
  --cta-clair-texte:#fff;
  --cta-clair-bord:transparent;

  --radius:20px;
  /* Largeur de page alignee sur kokoro-ai.fr, releve dans son site.css :
     --site-max:1240px et --site-pad:clamp(20px,4vw,48px), sur un modele de
     boite border-box comme le notre. La zone de texte utile fait donc
     1240 - 2x48 = 1144 px au large, contre 1040 px avant.
     Le clamp remplace l'ancien palier (24 px, puis 40 px au-dela de 700 px) :
     il couvre les deux, en continu. */
  --pad: clamp(20px, 4vw, 48px);
  --maxw: 1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg-light);
  color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  font-size:16px;
  font-weight:500;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto}
/* L'attribut hidden vient de la feuille du navigateur : la moindre règle de
   classe posant un display (ici .grid) l'emporte et l'élément reste visible. */
[hidden]{display:none!important}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
section,.hero{position:relative;overflow:hidden}
.nav{overflow:visible}
section{padding:72px 0}
.section-dark{background:var(--bg-dark);color:var(--off-white)}
.section-dark p{color:var(--light-64)}

/* ---------- Halos pastel (angles uniquement, jamais au centre) ----------
   Une seule couche fixe derriere toute la page claire : pas de coupure
   nette aux frontieres de section, et aucun filtre blur a repeindre. */
body::before{
  content:"";position:fixed;z-index:-1;pointer-events:none;
  /* Déborde de 120 px en haut et en bas : la dérive au scroll ne doit jamais
     découvrir le bord du calque, sinon une arête nette traverse la page. */
  top:-120px;bottom:-120px;left:0;right:0;
  background:
    radial-gradient(62% 46% at 100% 0%, rgba(224,80,156,.20) 0%, rgba(244,120,58,.13) 42%, rgba(244,120,58,0) 72%),
    radial-gradient(62% 50% at 0% 100%, rgba(44,124,246,.20) 0%, rgba(142,92,232,.14) 42%, rgba(142,92,232,0) 72%);
}
/* Les sections sombres sont opaques : elles portent leurs propres halos. */
.section-dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(58% 44% at 100% 0%, rgba(224,80,156,.22) 0%, rgba(244,120,58,.12) 42%, rgba(244,120,58,0) 72%),
    radial-gradient(58% 48% at 0% 100%, rgba(44,124,246,.22) 0%, rgba(142,92,232,.14) 42%, rgba(142,92,232,0) 72%);
}
.wrap{position:relative;z-index:1}

/* ---------- Typographie ---------- */
h1,h2,h3{margin:0;font-weight:700;color:inherit}
h1{font-size:clamp(38px,8.6vw,76px);line-height:1.05;letter-spacing:-.025em}
h2{font-size:clamp(28px,7.2vw,52px);line-height:1.1;letter-spacing:-.022em}
h3{font-size:clamp(18px,4.6vw,21px);line-height:1.3;letter-spacing:-.012em;font-weight:700}
p{margin:0}

.grad{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.lead{font-size:clamp(18px,4.8vw,22px);font-weight:500;line-height:1.5;color:var(--ink-64)}
.lead strong{color:var(--ink);font-weight:700}
.section-dark .lead strong{color:var(--off-white)}
.section-dark .lead{color:var(--light-64)}
.body{font-size:16px;font-weight:500;color:var(--ink-64)}
/* Le corps est en encre 64 % : le gras doit passer en encre pleine, sinon il
   ne se détache pas. */
.body strong{font-weight:700;color:var(--ink)}
.section-dark .body strong{color:var(--off-white)}
.section-dark .body{color:var(--light-64)}
.muted{color:var(--ink-42);font-size:14px}
.section-dark .muted{color:var(--light-42)}

.tag{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--violet);margin-bottom:16px;
}
.section-dark .tag{color:#A98BF0}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--ink-64);
  border:1px solid var(--ink-09);border-radius:999px;
  padding:7px 14px;background:rgba(255,255,255,.6);
}
.section-dark .badge{color:var(--light-64);border-color:var(--light-09);background:rgba(255,255,255,.03)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:inherit;font-size:17px;font-weight:600;letter-spacing:-.01em;
  padding:17px 28px;border-radius:999px;border:1px solid transparent;
  background:var(--cta-fond);color:var(--cta-texte);border-color:var(--cta-bord);
  cursor:pointer;text-decoration:none;
  transition:transform .18s ease,opacity .18s ease;
  width:100%;
}
.btn:hover{opacity:.88}
.btn:active{transform:scale(.985)}
/* L'anneau de focus est decale de 3 px, donc il se lit sur le fond de page et
   pas sur le bouton : l'encre y contraste dans les huit chartes. En var(--violet)
   il devenait quasi invisible des que le bouton porte lui-meme l'accent. */
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.section-dark .btn:focus-visible{outline-color:var(--off-white)}
.btn-light{
  background:var(--cta-clair-fond);color:var(--cta-clair-texte);
  border-color:var(--cta-clair-bord);
}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink-09)}
.btn-arrow{font-size:18px;line-height:1;transform:translateY(-1px)}

.cta-block{margin-top:32px}
.reassure{margin-top:14px;font-size:14px;color:var(--ink-42);text-align:center}
.section-dark .reassure{color:var(--light-42)}

/* ---------- Cartes ---------- */
.card{
  background:var(--card);
  border:1px solid var(--ink-09);
  border-radius:var(--radius);
  padding:24px;
}
.section-dark .card{background:rgba(255,255,255,.035);border-color:var(--light-09)}
/* Variantes sombres des composants : à garder ici, groupées avec les autres
   règles .section-dark, et non dans le bloc de chaque composant : elles y ont
   déjà été perdues deux fois lors de refontes voisines. */
.section-dark .contrast-list li{border-color:var(--light-09)}
.section-dark .chev{color:var(--light-42)}
.section-dark .placeholder-note{color:var(--light-42);border-color:var(--light-09)}
.section-dark .list-check li{color:var(--off-white)}
.section-dark .mark-no{background:rgba(245,245,247,.3)}
.section-dark .card-no{background:rgba(255,255,255,.035)}
.grid{display:grid;gap:16px;margin-top:32px}

/* ---------- NAV STICKY ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(251,251,253,.78);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--ink-09);
}
.nav-inner{
  position:relative;
  width:100%;max-width:var(--maxw);margin:0 auto;
  padding:12px var(--pad);
  display:flex;align-items:center;gap:20px;
}
/* Le logo est une image, la meme sur les 9 habillages : c'est une marque, elle
   ne se reteinte pas d'une charte a l'autre. Deux fichiers, parce qu'un seul ne
   peut pas tenir sur les deux fonds : le mot est bleu nuit sur la pilule de
   navigation, blanc cassé dans le pied de page, qui est sombre partout. La
   pastille et la vague gardent leur degrade dans les deux cas.
   Le fond blanc du fichier d'origine a ete detoure : la pilule de navigation
   est translucide (86 %), un rectangle blanc opaque s'y serait vu. */
.brandbar{display:flex;align-items:center;text-decoration:none;color:inherit;flex:none}
/* 30 px et non 26 : le logo est un mot long et bas, sa hauteur de boite n'est
   pas sa hauteur de lecture. A 26 px, « avec » tombait sous la taille des
   entrees du menu. */
.brandlogo{display:block;height:30px;width:auto}
.brandsub{font-size:13px;color:var(--ink-42);font-weight:500}
.nav-links{
  display:none;list-style:none;margin:0;padding:0;
  gap:26px;margin-left:auto;
}
.nav-links a{
  text-decoration:none;color:var(--ink-64);font-size:15px;font-weight:500;
  letter-spacing:-.01em;transition:color .15s ease;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:focus-visible{outline:3px solid var(--violet);outline-offset:4px;border-radius:6px}
.nav-cta{display:none;margin-left:auto;flex:none}

/* Bouton burger, visible tant que les liens ne tiennent pas dans la barre */
.nav-menu{display:contents}
.nav-burger{
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:44px;height:44px;flex:none;margin-left:auto;
  background:none;border:0;padding:0;cursor:pointer;
}
.nav-burger span{
  display:block;width:22px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .2s ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-burger:focus-visible{outline:3px solid var(--violet);outline-offset:2px;border-radius:10px}

/* Le menu deroulant prend la main sous 1200 px, et non sous 900 px.
   Le calcul tient au fait que les entrees sont CENTREES en absolu sur le
   milieu de la pilule, et non posees dans l'espace restant : la contrainte
   n'est donc pas « logo + entrees + bouton », mais la symetrie. Il faut
   W/2 >= entrees/2 + bouton + marge, soit W >= entrees + 2 x bouton.
   Mesure dans les chartes en Archivo, les plus larges : entrees 548 px,
   bouton 257 px, d'ou une pilule de 1090 px et un viewport de 1186 px une fois
   les gouttieres comptees. 1200 px laisse la marge.
   Entre 900 et 1186 px, les entrees se cassaient en deux lignes puis
   chevauchaient le bouton. */
@media (max-width:1199px){
  .nav-burger{display:flex}
  .nav-cta{margin-left:0}
  .nav-menu{
    display:block;position:absolute;top:100%;left:0;right:0;
    /* Fond plein : un panneau translucide laisse lire le titre du hero au
       travers, et le flou d'arriere-plan n'est pas rendu partout. */
    background:var(--bg-light);
    border-bottom:1px solid var(--ink-09);
    box-shadow:0 18px 40px -28px rgba(29,29,31,.55);
    padding:6px var(--pad) 18px;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .25s ease,transform .25s cubic-bezier(.22,.61,.36,1),visibility .25s;
  }
  .nav-menu.is-open{opacity:1;visibility:visible;transform:none}
  .nav-menu .nav-links{display:block;margin:0}
  .nav-menu .nav-links a{
    display:block;padding:15px 0;font-size:17px;color:var(--ink);
    border-bottom:1px solid var(--ink-09);
  }
  .nav-menu .nav-links li:last-child a{border-bottom:0}
}
.btn-sm{padding:11px 18px;font-size:14px;width:auto}

/* Les ancres ne doivent pas passer sous la barre collante */
:target,[id]{scroll-margin-top:78px}

/* ---------- HERO ---------- */
.hero{padding:64px 0 56px;text-align:center}
.hero-inner{display:flex;flex-direction:column;align-items:center}
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--violet);margin-bottom:20px;
}
.hero h1{margin-bottom:22px}
/* 46ch et non 36 : a 36 l'accroche tombait sur trois lignes dans les neuf
   chartes. Mesure par habillage et par largeur (1920 a 760 px) : 38ch donne
   encore trois lignes, 40ch passe a deux, et de 40 a 52ch le compte ne bouge
   plus. On se pose au milieu de cette plage pour qu'une metrique de police un
   peu differente ne fasse pas rebasculer. L'unite ch suit la police active,
   Archivo etant plus large qu'Inter. */
.hero .hero-lead{max-width:46ch;margin-bottom:32px}
.hero-actions{display:flex;flex-direction:column;gap:12px;width:100%;max-width:340px}
.hero .reassure{margin-top:14px;text-align:center}

.social-proof{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:40px}
.avatars{display:flex}
.avatar{
  position:relative;overflow:hidden;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#fff;letter-spacing:-.01em;
  border:2px solid var(--bg-light);margin-left:-13px;
}
.avatar i{font-style:normal}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.avatar:first-child{margin-left:0}
.social-proof-text{font-size:14px;font-weight:500;color:var(--ink-64);max-width:30ch}

/* ---------- BANDE DE LOGOS (defilement) ---------- */
.logos-section{padding:8px 0 56px;overflow:hidden}
.logos-title{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-42);text-align:center;margin-bottom:24px;
}
.marquee{
  position:relative;width:100%;overflow:hidden;
  /* overflow:hidden rogne la tuile soulevée au survol : on lui laisse la place. */
  padding:10px 0 12px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
/* La duree est indexee sur la LONGUEUR du ruban, pas fixee une fois pour
   toutes : l'animation parcourt la moitie de la piste, donc ajouter des logos
   accelere le defilement a duree constante. Viser ~45 px/s.
   Les durees reelles de chaque bande sont posees plus bas. */
.marquee-track{display:flex;width:max-content;animation:scroll-logos 45s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.logos-row{display:flex;list-style:none;margin:0;padding:0}
.logo-tile{
  flex:none;width:158px;height:72px;margin-right:12px;padding:0 20px;
  display:flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--ink-09);border-radius:16px;
}
.logo-tile span{
  font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-42);text-align:center;
}
/* Les logos fournis n'ont ni le meme ratio ni la meme masse visuelle :
   contain + hauteur plafonnee les remet sur un pied d'egalite. */
/* Réassurance discrète sous la bande de logos */
.powered{margin-top:26px;text-align:center}
.powered-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:500;color:var(--ink-64);letter-spacing:.01em;
  border:1px solid var(--ink-09);border-radius:999px;
  padding:7px 15px;background:rgba(255,255,255,.66);
}
.powered-badge strong{font-weight:700;color:var(--ink)}

.logo-img{
  max-height:28px;max-width:100%;width:auto;height:auto;
  object-fit:contain;object-position:center;
  opacity:.86;transition:opacity .35s ease;
}
@keyframes scroll-logos{from{transform:translateX(0)}to{transform:translateX(-50%)}}


/* ---------- STAT SUR UNE LIGNE (dans « Ça vous parle ? ») ---------- */
.stat-line{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;
  margin-top:32px;padding-top:26px;border-top:1px solid var(--ink-09);
}
.stat-line-num{
  font-weight:800;font-size:clamp(40px,10vw,58px);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;flex:none;word-spacing:-.14em;
}
.stat-line-text{font-size:clamp(16px,4.4vw,19px);font-weight:500;color:var(--ink-64);line-height:1.4}
.stat-line-src{font-size:13px;color:var(--ink-42);font-weight:500;white-space:nowrap}

/* ---------- MIROIR ---------- */
.mirror-ico{
  width:40px;height:40px;border-radius:12px;margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:800;color:#fff;letter-spacing:-.02em;
}
.card h3{margin-bottom:8px}

/* ---------- CONTRASTE ---------- */
.contrast-list{list-style:none;padding:0;margin:28px 0 0}
.contrast-list li{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px 0;border-top:1px solid var(--ink-09);
  font-size:clamp(17px,4.5vw,22px);font-weight:600;letter-spacing:-.015em;line-height:1.35;
}
.contrast-list li:last-child{border-bottom:1px solid var(--ink-09)}
.chev{color:var(--ink-42);font-weight:700;flex:none;line-height:1.35}

/* ---------- LE RENDEZ-VOUS (parcours selon le besoin) ---------- */
.besoins{display:grid;gap:10px;margin-top:30px}
.besoin{
  display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink-64);
  background:var(--card);border:1px solid var(--ink-09);border-radius:14px;padding:14px 16px;
  transition:border-color .3s ease,color .3s ease,background-color .3s ease,transform .3s cubic-bezier(.22,.61,.36,1);
}
.besoin-titre{display:block;line-height:1.35;min-width:0}
/* La pastille de selection remplace l'icone : c'est elle qui dit qu'il faut
   choisir, et qu'on ne peut en choisir qu'un. Elle est ronde parce qu'une
   forme ronde veut dire choix unique, carree elle dirait case a cocher.
   Teinte par les jetons, donc elle suit les neuf chartes sans une ligne de
   plus dans habillages.css. */
.besoin-radio{
  flex:none;width:20px;height:20px;border-radius:50%;margin-top:1px;
  /* 64 % d'encre et pas 9 % : la limite d'un composant demande 3 de contraste,
     et le filet des cartes y est a 1,2. Un bouton de selection qu'on ne voit
     pas ne dit plus qu'il faut choisir. */
  border:2px solid var(--ink-64);
  background:var(--card);
  position:relative;
  transition:border-color .25s ease,background-color .25s ease;
}
.besoin-radio::after{
  content:"";position:absolute;inset:3px;border-radius:50%;
  background:var(--violet);
  transform:scale(0);opacity:0;
  transition:transform .25s cubic-bezier(.34,1.4,.5,1),opacity .2s ease;
}
.besoin.is-active .besoin-radio{border-color:var(--violet)}
.besoin.is-active .besoin-radio::after{transform:scale(1);opacity:1}
.besoin.is-active{
  color:var(--ink);border-color:rgba(29,29,31,.24);background:rgba(29,29,31,.04);
}
.besoin:focus-visible{outline:3px solid var(--violet);outline-offset:3px}

/* La zone des etapes est fermee par le script tant qu'aucun besoin n'est
   choisi. Elle n'est PAS marquee hidden dans le HTML : sans JavaScript, le
   premier parcours doit rester lisible et indexable. */
.parcours-zone{margin-top:24px}
.parcours{margin-top:0;gap:16px}
/* Fondu discret au changement de besoin, sans cascade ni deplacement marque. */
.parcours.is-active .etape{animation:etape-in .38s ease both}
.parcours.is-active .etape:nth-child(2){animation-delay:.05s}
.parcours.is-active .etape:nth-child(3){animation-delay:.1s}
.parcours.is-active .etape:nth-child(4){animation-delay:.15s}
@keyframes etape-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- ÉTAPES (déroulé du diagnostic) ---------- */
.step-num{
  font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-42);margin-bottom:12px;display:block;
}
.section-dark .step-num{color:var(--light-42)}
/* Le bouton d'action vit dans la carte « Etape 1 » : c'est la que le visiteur
   vient de lire ce qui se passe en premier, donc la que l'envie de demarrer se
   forme. Le bloc d'action qui suivait les etapes a ete retire, il faisait
   doublon. Le bouton reste a sa largeur de contenu, via .btn-sm. */
.etape-cta{margin-top:18px}

/* ---------- SERVICES (grille, toutes les cartes visibles) ---------- */
.offers{display:grid;gap:16px;margin-top:32px}
.offers .offer{display:flex;flex-direction:column}

/* CTA discret en bas de chaque carte */
.offer-cta{
  align-self:flex-start;margin-top:18px;padding:0;
  font-family:inherit;font-size:14px;font-weight:600;letter-spacing:-.01em;
  color:var(--violet);background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:gap .28s cubic-bezier(.22,.61,.36,1),color .25s ease;
}
.offer-cta:focus-visible{outline:3px solid var(--violet);outline-offset:4px;border-radius:6px}

.offer-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.offer-head > div{min-width:0}
.offer-icon{
  width:44px;height:44px;border-radius:13px;flex:none;margin-top:1px;
  transform:scale(.82) rotate(-8deg);opacity:0;
  transition:transform .6s cubic-bezier(.34,1.4,.5,1) .12s,opacity .5s ease .12s;
  display:flex;align-items:center;justify-content:center;
}
.offer-icon svg{width:23px;height:23px}
/* Sans pile explicite, Windows peut retomber sur un glyphe monochrome ou un
   carré vide selon la police du texte. */
.offer-emoji{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",
              "Noto Color Emoji","Android Emoji",sans-serif;
  font-size:21px;line-height:1;font-weight:400;
  font-variant-emoji:emoji;
}
.reveal.in .offer-icon,.card.in .offer-icon,.in .offer-icon{transform:none;opacity:1}
.ico-blue{background:rgba(44,124,246,.11);color:var(--blue)}
.ico-violet{background:rgba(142,92,232,.11);color:var(--violet)}
.ico-pink{background:rgba(224,80,156,.11);color:var(--pink)}
.ico-orange{background:rgba(244,120,58,.12);color:var(--orange)}
.ico-green{background:rgba(52,199,89,.12);color:#26953f}

/* Pastilles pleines : icônes du miroir, avatars des preuves, avatars du hero */
.i-blue{background:var(--blue)}.i-violet{background:var(--violet)}
.i-pink{background:var(--pink)}.i-orange{background:var(--orange)}

.offer-name{font-size:21px;letter-spacing:-.02em;margin-bottom:3px;line-height:1.2}
.offer-promesse{font-size:14px;font-weight:600;color:var(--ink-64);letter-spacing:-.01em;line-height:1.35}
.offer-desc{flex:1}

/* ---------- QUI SOMMES-NOUS ---------- */
/* Les marques d'appartenance, en bande sous le titre : le sceau du groupe et
   les marques territoriales. Les deux viennent d'ailleurs, le badge de la
   colonne de texte et les marques du bloc « Nous trouver », d'ou le fait
   qu'elles gardent leurs classes d'origine et qu'on neutralise seulement
   leurs marges basses. */
.agence-marques{
  display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;
  margin:26px 0 0;
}
.agence-marques .agence-badge{margin-bottom:0}
.agence{display:grid;gap:32px;margin-top:32px}
.agence-texte .lead{margin-bottom:18px}
.agence-texte .body{margin-bottom:14px;max-width:62ch}
.agence-visuel{
  position:relative;overflow:hidden;
  border-radius:var(--radius);border:1px solid var(--ink-09);background:var(--card);
  aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;
}
.agence-visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.agence-visuel-repli{
  font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-42);
}
/* La boite commune aux marques de la bande : le sceau du groupe et les deux
   armoiries territoriales la partagent, c'est ce qui leur donne la meme
   structure. Elle est seule a porter le fond, le filet et le rayon : tout
   element qui veut ce cadre prend la classe .agence-cadre, badge compris
   (la page « Qui sommes-nous » l'ajoute aussi sur son badge isole).
   align-items:stretch sur la bande donne a chaque cadre la hauteur du plus
   haut de sa ligne, les trois boites sont donc exactement de meme hauteur. */
.agence-cadre{
  display:inline-flex;align-items:center;
  background:var(--card);border:1px solid var(--ink-09);border-radius:16px;
}
/* Un logo seul dans son cadre : centre, sans legende. 40 px de haut et non 54,
   pour que la boite reste a la hauteur du badge au lieu de l'etirer. */
.agence-cadre-logo{justify-content:center;padding:12px 20px}
.agence-cadre-logo img{
  height:40px;width:auto;max-width:100%;object-fit:contain;display:block;
}

/* Badge d'appartenance au groupe, façon sceau de certification */
.agence-badge{
  gap:14px;margin-bottom:24px;
  padding:14px 20px 14px 16px;
}
.agence-badge-check{
  width:26px;height:26px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(52,199,89,.14);color:#26953f;
}
.agence-badge-check svg{width:15px;height:15px}
.agence-badge-texte{display:flex;flex-direction:column;gap:5px;min-width:0}
.agence-badge-label{
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-42);
}
.agence-badge-logo{display:flex;align-items:center;min-height:22px}
.agence-badge-logo img{height:22px;width:auto;max-width:100%;object-fit:contain}
.agence-badge-repli{font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}

/* ---------- CAS CLIENTS ---------- *//* ---------- CAS CLIENTS ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.cas-entete{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.cas-grid{align-items:stretch}
.cas-card{
  display:flex;flex-direction:column;padding:0;overflow:hidden;
  text-decoration:none;color:inherit;
}
.cas-visuel{
  display:flex;align-items:center;justify-content:center;
  height:150px;padding:0 28px;background:#fff;
  border-bottom:1px solid var(--ink-09);
}
.cas-visuel img{max-height:44px;max-width:100%;width:auto;object-fit:contain}
.cas-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:18px 24px 0}
.cas-tag{
  font-size:11px;font-weight:600;color:var(--ink-64);letter-spacing:.01em;
  border:1px solid var(--ink-09);border-radius:999px;padding:4px 9px;
  background:rgba(255,255,255,.6);white-space:nowrap;
}
/* Une couleur par taille d'entreprise, prise dans les accents de la DA. */
.cas-type{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;
}
.cas-type-tpe{color:var(--blue);border-color:rgba(44,124,246,.3);background:rgba(44,124,246,.1)}
.cas-type-pme{color:var(--violet);border-color:rgba(142,92,232,.3);background:rgba(142,92,232,.1)}
.cas-type-startup{color:#c2551f;border-color:rgba(244,120,58,.32);background:rgba(244,120,58,.12)}
.cas-nom{
  display:block;padding:14px 24px 0;text-align:center;
  font-size:clamp(19px,5vw,22px);font-weight:700;letter-spacing:-.02em;line-height:1.2;
}
/* Chiffre phare de la carte : meme langage que le bloc resultats des pages de
   cas, a une echelle qui tient dans une colonne de grille. */
.cas-chiffre{display:block;padding:16px 24px 0;text-align:center}
.cas-chiffre-valeur{
  display:block;font-weight:800;font-size:clamp(34px,8vw,44px);
  line-height:1;letter-spacing:-.03em;margin-bottom:7px;
}
.cas-chiffre-label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-64);line-height:1.35;
  /* Deux lignes reservees : sans ca, un libelle court et un libelle qui passe
     a la ligne decalent le debut des descriptions d'une carte a l'autre. */
  min-height:2.7em;
}
.cas-accroche{display:block;padding:12px 24px 0;flex:1}
.cas-lien{
  display:inline-flex;align-items:center;gap:8px;
  padding:18px 24px 24px;font-size:15px;font-weight:600;color:var(--violet);
}
.cas-lien .btn-arrow{transition:transform .28s cubic-bezier(.22,.61,.36,1)}

/* Page de cas : bandeau, métriques, récit, navigation */
.cas-hero{padding:56px 0 40px;text-align:center}
/* Le nom du client est dans le H1, le logo se pose dessous, sans cartouche :
   les fichiers sont detoures, ils s'assoient directement sur le fond pastel. */
.cas-logo{display:flex;justify-content:center;margin-top:26px}
.cas-logo img{
  /* Cale optique : les logotypes vont du tres large (AdsBack) au tres etroit
     (pby.), une hauteur commune basse les garde tous sous le titre. */
  height:clamp(26px,6.5vw,40px);width:auto;
  max-width:min(260px,72%);object-fit:contain;
}
.cas-hero .lead{max-width:52ch;margin:20px auto 0}
.cas-hero .cas-tags{margin-top:22px;padding:0}
.metriques{display:grid;gap:28px;margin-top:22px}
.metrique-valeur{
  display:block;font-weight:800;font-size:clamp(48px,12vw,76px);
  line-height:1;letter-spacing:-.03em;margin-bottom:10px;
}
/* Valeur longue (« 10 minutes ») : un cran en dessous, sinon elle deborde
   de sa colonne. Posee par le generateur au dela de 6 caracteres.
   Le padding rattrape l'ecart de corps : sans lui, la valeur reduite occupe
   moins de hauteur et le libelle de sa colonne remonte au-dessus des autres. */
.metrique-valeur.est-long{
  font-size:clamp(32px,7.5vw,50px);
  padding-top:calc(clamp(48px,12vw,76px) - clamp(32px,7.5vw,50px));
}
/* Le « environ » ne doit pas peser autant que le chiffre qu'il nuance. */
.metrique-approx{font-size:.6em;font-weight:700;margin-right:.1em;vertical-align:.12em}
.metrique-label{
  display:block;font-size:13px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);margin-bottom:4px;
}
.metrique-detail{display:block;font-size:15px;font-weight:500;color:var(--ink-64)}
.briques{display:grid;gap:16px;margin-top:26px}
.brique{display:flex;gap:16px;align-items:flex-start}
.brique h3{font-size:18px;margin-bottom:6px}
.brique > div{min-width:0}
.cas-bloc{margin-bottom:32px}
.cas-bloc:last-child{margin-bottom:0}
.cas-bloc h3{margin-bottom:10px}
.cas-main section{padding:44px 0}

/* ---------- POUR QUI ---------- *//* ---------- POUR QUI ---------- */
.list-check{list-style:none;padding:0;margin:0}
.list-check li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;font-size:16px;font-weight:500;color:var(--ink-64);line-height:1.45}
.mark{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;margin-top:1px}
.mark-yes{background:var(--green)}
.mark-no{background:var(--ink-42)}
.card-no{background:transparent}

/* Le titre de la section « contraste » a besoin de la pleine largeur pour
   tenir sur une ligne. Le corps garde la largeur de lecture que portait le
   conteneur avant, soit celle de .narrow une fois ses marges retirees. */
.contraste-corps{max-width:780px}
/* Ce titre doit tenir sur une ligne : sa taille est donc indexee sur la
   largeur plutot que sur l'echelle courante des h2.

   La regle passe par une CLASSE et non par un identifiant. Un #contraste-title
   l'emporte sur html[data-ux="4"] h2 et imposait son echelle aux habillages,
   qui ont la leur. A specificite de classe, chaque charte reprend la main.

   Le plafond est a 48 et non 52 : les habillages en Archivo graisse 800
   demandent environ 8 % de largeur en plus, et 52 les faisait casser. */
.titre-une-ligne{font-size:clamp(28px,4.3vw,48px)}

/* ---------- USE CASES ----------
   Deux colonnes au meme dessin. Ce qui les separe est porte par le badge
   d'horizon et par le titre de colonne, pas par la forme des cartes.

   .uc-liste et .uc-ligne ne servent plus ici, mais restent utilisees par la
   page /use-cases, ou 36 cartes empilees feraient un mur : le catalogue garde
   la liste separee par des filets.
   ------------------------------------------------------------ */
.usecases{display:grid;grid-template-columns:1fr;gap:44px;margin-top:38px}

.uc-entete{margin-bottom:24px}
.uc-horizon{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-42);
  border:1px solid var(--ink-09);border-radius:999px;
  padding:5px 13px;margin-bottom:14px;
}
/* La teinte suit la charte active plutot que d'etre ecrite en dur : un
   rgba de violet resterait fige dans les cinq autres habillages. La premiere
   declaration sert de repli aux navigateurs sans color-mix. */
.uc-horizon-fort{
  color:var(--violet);
  border-color:var(--ink-09);
  border-color:color-mix(in srgb, var(--violet) 32%, transparent);
  background:color-mix(in srgb, var(--violet) 8%, transparent);
}
/* 26ch et non 22 : depuis que les deux titres commencent par « Exemples
   de », celui de droite passait sur trois lignes en Inter alors que celui de
   gauche tenait sur deux, et la rangee d'entetes prenait la hauteur du plus
   haut. Mesure par habillage : 22ch donne 2/3 en Inter, 24ch passe a 2/2
   partout et le compte ne bouge plus au-dela. On se cale deux crans plus
   haut. */
.uc-entete h3{font-size:clamp(19px,4.4vw,22px);line-height:1.35;max-width:26ch}

/* Colonne 1 : la liste */
.uc-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink-09)}
.uc-ligne{padding:20px 0;border-bottom:1px solid var(--ink-09)}
.uc-ligne h4{
  margin:0 0 6px;font-size:17px;font-weight:700;letter-spacing:-.015em;
  line-height:1.35;color:var(--ink);
}
.uc-ligne p{font-size:15px;line-height:1.55;color:var(--ink-64);max-width:46ch}

/* Colonne 2 : les cartes */
.uc-cartes{display:grid;gap:14px}
/* Une icone par carte, POSEE DANS LE TITRE et non au-dessus : sur une tuile,
   elle ajoutait 50 px de hauteur a chaque carte, donc a chaque rangee de la
   grille. En ligne devant le texte, elle tient dans l'interligne du titre et
   ne coute rien. La teinte passe par les jetons, sinon elle resterait figee
   dans les sept autres habillages. */
.uc-carte-ico{
  display:inline-flex;align-items:center;justify-content:center;
  vertical-align:-.16em;margin-right:9px;
  color:var(--violet);
}
.uc-carte-ico svg{width:19px;height:19px;display:block}
.uc-carte h4{
  margin:0 0 8px;font-size:18px;font-weight:700;letter-spacing:-.018em;
  line-height:1.3;color:var(--ink);
}
.uc-carte .body{font-size:15px;line-height:1.55;max-width:46ch}

/* Pied du bloc : le bouton seul, centre. Le filet et la note de comptage ont
   ete retires, ils dedoublaient ce que le bouton dit deja. */
.uc-pied{display:flex;justify-content:center;margin-top:40px}
.uc-bouton{width:auto}

@media (min-width:760px){
  /* La colonne des projets est un peu plus large : ses cartes portent plus de
     texte, et l'asymetrie appuie la difference de registre. */
  .usecases{grid-template-columns:1fr 1.12fr;gap:clamp(32px,5vw,56px)}

  /* ---- Alignement des cartes d'une colonne a l'autre ----
     Les deux piles etaient deux grilles independantes : des qu'une carte de
     gauche portait une ligne de texte de plus, tout ce qui suivait se
     decalait par rapport a la droite, et l'ecart s'accumulait de rangee en
     rangee.

     Avec subgrid, les deux colonnes ne dessinent plus leurs propres lignes :
     elles reprennent celles de la grille mere. Chaque rangee prend donc la
     hauteur de la plus haute des deux cartes, et les hauts de cartes se
     retrouvent au meme y.

     ⚠️ Le nombre de lignes est ecrit en dur : 1 entete + 4 cartes. Ajouter
     une carte dans une colonne demande de passer repeat(4, ...) a 5, sinon
     la carte en trop retombe dans une ligne implicite de sa colonne et
     recommence a se decaler.

     Sous @supports parce que sans subgrid ces regles laisseraient les piles
     sans aucun ecart : le repli est la mise en page d'avant, decalee mais
     correcte. */
  @supports (grid-template-rows: subgrid){
    .usecases{
      grid-template-rows:auto repeat(4, auto);
      /* L'ecart de 14 px vivait sur .uc-cartes, qui n'a plus de boite :
         il devient l'ecart de lignes de la grille mere. */
      row-gap:14px;
    }
    .uc-col{display:grid;grid-template-rows:subgrid;grid-row:1 / -1}
    .uc-cartes{display:contents}
  }
}

/* Page du catalogue : un pole par section, chacune reprenant la liste du
   bloc de la page d'accueil. Un filet separe les poles, pas une carte : a
   huit blocs empiles, huit cartes feraient un mur. */
.uc-pole{
  padding:clamp(38px,6vw,56px) 0;
  /* Dégagement pour scrollIntoView : la hauteur de la barre de navigation,
     mesurée par le script, plus une respiration. La barre de filtres n'entre
     plus dans le calcul depuis qu'elle n'est plus collante. */
  scroll-margin-top:calc(var(--uc-nav-h,84px) + 18px);
}
.uc-pole + .uc-pole{border-top:1px solid var(--ink-09)}
.uc-pole-entete{margin-bottom:26px;max-width:62ch}
.uc-pole-entete h2{font-size:clamp(24px,5vw,34px);line-height:1.15}
.uc-pole-chapo{margin-top:10px;font-size:18px;line-height:1.6;color:var(--ink-64)}
.uc-compte{
  display:inline-block;margin-top:14px;
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-64);border:1px solid var(--ink-09);border-radius:999px;padding:5px 13px;
}
/* Une carte par usage, et non une ligne de liste.
   Le public de cette page, ce sont des dirigeants de PME qui lisent souvent
   avec une presbytie : chaque usage prend donc de l'air, un titre a 20 px et
   un texte a 17 px en encre pleine, au lieu de 17 / 15 px dont le texte a
   64 % d'encre. La densite perdue ne coute plus une page interminable, parce
   que le filtre n'affiche qu'un service a la fois, soit 4 ou 5 cartes.
   Sur la page d'accueil, .uc-ligne garde ses filets : ces regles sont toutes
   portees par .uc-pole, qui n'existe que sur le catalogue.

   Le titre d'usage est un h3 : la hierarchie part du h1 de la page, passe par
   le h2 du pole, et ne saute aucun niveau. */
.uc-pole .uc-liste{border-top:0;display:grid;gap:14px}
/* Colonne flex et non bloc : les cartes d'une meme rangee prennent deja la
   meme hauteur, et le gain, pousse en bas par sa marge automatique, se lit
   alors sur une seule ligne d'un bout a l'autre de la rangee au lieu de
   flotter au milieu de la carte la plus courte. */
.uc-pole .uc-ligne{
  border:1px solid var(--ink-09);border-radius:var(--radius);
  background:var(--card);padding:clamp(20px,3.2vw,26px);
  display:flex;flex-direction:column;gap:10px;
}
.uc-pole .uc-ligne h3{
  margin:0;font-size:clamp(18px,2.2vw,20px);font-weight:700;
  letter-spacing:-.015em;line-height:1.32;color:var(--ink);
}
/* Encre pleine et non 64 % : a 17 px, 64 % donne 5,0 de contraste, ce qui
   passe la norme mais fatigue. La hierarchie est portee par la taille et le
   poids (20 px / 700 contre 17 px / 500), pas par un gris. 52ch et non 58 :
   au-dela, l'oeil perd sa ligne en revenant a la marge. */
.uc-pole .uc-ligne p{
  margin:0;font-size:17px;line-height:1.62;font-weight:500;
  color:var(--ink);max-width:52ch;
}
.uc-pole .uc-gain{margin-top:auto;align-self:flex-start}

/* Deux colonnes a partir de 900 px et non 760 : une carte a besoin de plus de
   place qu'une ligne de liste, et sur une tablette en portrait deux colonnes
   de cartes cassent les titres sur trois lignes. */
@media (min-width:900px){
  .uc-pole .uc-liste{
    grid-template-columns:1fr 1fr;
    column-gap:clamp(16px,2vw,22px);
  }
}

/* ---------- Catalogue : filtre par service ----------
   Elle est masquee tant que le script ne l'a pas revelee, pour que la page
   reste entiere sans JavaScript.

   ⚠️ Elle ETAIT collante sous la navigation. Avec des puces lisibles (16 px,
   46 px de haut), 10 puces qui reviennent a la ligne font une barre de 158 px
   au bureau et de 210 px vers 760 px : avec la navigation, un quart de l'ecran
   gele en permanence, sur une page dont le seul sujet est le confort de
   lecture. Elle est donc redevenue un bloc normal. Ce qui le permet : le
   filtre n'affiche plus 40 usages mais un service, soit une page d'un ecran ou
   deux, ou remonter au filtre ne coute presque rien. Ne pas la recoller sans
   remesurer sa hauteur. */
.uc-filtre-barre{
  padding:18px 0 20px;
  background:var(--bg-light);
  border-bottom:1px solid var(--ink-09);
}
/* L'intitule de la barre : sur une page qui n'affiche plus qu'un service a
   l'arrivee, il dit en clair que ces puces sont un choix. Masque sous 760 px,
   ou il ajouterait une ligne a une barre collante deja haute : a cette largeur
   le titre du pole juste dessous joue le meme role. */
.uc-filtre-titre{
  display:none;
  margin:0 0 10px;font-size:15px;font-weight:600;color:var(--ink);
}
@media (min-width:760px){.uc-filtre-titre{display:block}}
.uc-filtre-puces{
  display:flex;flex-wrap:wrap;gap:8px;
}
/* Au telephone, 10 puces qui reviennent a la ligne font une barre de 231 px :
   un tiers de l'ecran, collee en haut. On passe donc en une seule rangee qui
   defile horizontalement, et on la laisse filer jusqu'aux bords. */
@media (max-width:759px){
  .uc-filtre-puces{
    flex-wrap:nowrap;overflow-x:auto;
    margin:0 calc(var(--pad) * -1);
    padding:2px var(--pad);
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
  }
  .uc-filtre-puces::-webkit-scrollbar{display:none}
  .uc-filtre{flex:none}
  /* Une rangee qui defile horizontalement ne se voit pas : beaucoup de
     visiteurs ne devinent jamais qu'il reste des services a droite, et
     « Tout voir » est justement au bout. Le degrade sur le bord droit le
     dit sans texte. */
  .uc-filtre-barre .wrap{position:relative}
  .uc-filtre-barre .wrap::after{
    content:"";position:absolute;top:0;bottom:0;right:0;width:34px;
    pointer-events:none;
    background:linear-gradient(to right, transparent, var(--bg-light));
  }
}
/* 16 px et 46 px de haut, contre 14 px et 34 px : une puce est une cible a
   toucher autant qu'un mot a lire, et 44 px est le minimum recommande au
   doigt. Le bord passe de 9 % a 64 % d'encre : la limite d'un composant
   demande 3 de contraste, 9 % plafonne a 1,1 et la puce ne ressemblait pas a
   un bouton. Le fond blanc la detache de la barre, qui est en --bg-light. */
.uc-filtre{
  font-family:inherit;font-size:16px;font-weight:600;letter-spacing:-.01em;
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 18px;border-radius:999px;
  border:1px solid var(--ink-64);background:var(--card);color:var(--ink);
  cursor:pointer;
  transition:border-color .2s var(--courbe,cubic-bezier(.22,.61,.36,1)),
             color .2s ease,background-color .2s ease;
}
/* 64 % d'encre et pas 42 % : a 12 px, 42 % tombe a 2,6 de contraste, loin
   du 4,5 exige par la norme AA. */
.uc-filtre-n{
  font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--ink-64);
}
.uc-filtre[aria-pressed="true"]{
  background:var(--ink);color:var(--off-white);border-color:var(--ink);
}
@media (hover:hover) and (pointer:fine){
  .uc-filtre:hover{border-color:var(--ink)}
  .uc-filtre[aria-pressed="true"]:hover{border-color:var(--ink)}
}
.uc-filtre[aria-pressed="true"] .uc-filtre-n{color:var(--light-64)}
.uc-filtre:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.uc-filtre-vide{margin-top:14px;font-size:16px;color:var(--ink)}

/* Le filet qui separe deux poles n'a de sens que quand ils sont tous
   affiches. Des qu'un filtre n'en garde qu'un, le script marque le premier
   pole visible : sans cela, un pole choisi au milieu de la page arriverait
   sous un filet qui ne separe plus rien. */
.uc-pole.est-premier{border-top:0}

/* Le gain estime, sous chaque usage. Le « ≈ » passe un cran en dessous du
   chiffre, comme sur les metriques des cas clients : a taille egale il pesait
   autant que le nombre lui-meme. */
/* Le chiffre est en encre pleine et non dans la couleur d'accent : releve a
   13 px, l'accent tombait a 3,59 de contraste sur l'habillage 3 et a 3,71 sur
   le premier, sous les 4,5 exiges. Or c'est la ligne qu'on lit en premier sur
   cette page. L'accent reste, mais sur le fond et le filet, ou la norme ne
   demande que 3. Taille 15 px et non 13. */
.uc-gain{
  display:inline-block;margin-top:14px;
  font-size:15px;font-weight:700;letter-spacing:-.005em;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  border:1px solid var(--ink-09);
  border-color:color-mix(in srgb, var(--violet) 42%, transparent);
  background:color-mix(in srgb, var(--violet) 10%, transparent);
  border-radius:999px;padding:6px 13px;
}
.uc-gain-approx{font-size:.82em;font-weight:700;margin-right:.18em;vertical-align:.06em}

/* ---------- PAGES DE CONTENU ---------- */
/* Sections de texte suivi, hors landing : « qui sommes-nous », et demain les
   mentions légales. Sur la landing, un titre de section est toujours suivi
   d'une grille ou d'une carte qui apporte sa propre marge haute ; ici le
   paragraphe vient directement après le titre, qui doit donc porter l'espace. */
.page-texte h2{margin-bottom:20px}
.page-texte .body{margin-bottom:14px;max-width:68ch}

/* ---------- FAQ ---------- */
.faq{margin-top:32px;border-top:1px solid var(--ink-09)}
.faq details{border-bottom:1px solid var(--ink-09)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;
  font-size:clamp(16px,4.4vw,19px);font-weight:600;letter-spacing:-.012em;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;
  margin-top:-6px;transition:transform .22s ease;
  background:
    linear-gradient(var(--ink-42),var(--ink-42)) center/12px 2px no-repeat,
    linear-gradient(var(--ink-42),var(--ink-42)) center/2px 12px no-repeat;
}
.faq details[open] summary::after{transform:rotate(90deg);background:linear-gradient(var(--ink-42),var(--ink-42)) center/12px 2px no-repeat}
.faq summary:focus-visible{outline:3px solid var(--violet);outline-offset:2px;border-radius:8px}
.faq-answer{padding:0 8px 24px 0;font-size:16px;color:var(--ink-64);font-weight:500}
.faq-answer p{margin:0}
.faq-punch{color:var(--ink);font-weight:600;margin-bottom:8px!important;letter-spacing:-.01em}

/* ---------- CTA FINAL + CAL ---------- */
.final h2{margin-bottom:20px}
.cal-shell{
  margin-top:36px;background:#fff;border-radius:var(--radius);
  border:1px solid var(--light-09);overflow:hidden;padding:8px;
  /* Cal bascule en colonne sous ~900 px : il lui faut toute la largeur. */
  width:100%;max-width:1040px;margin-left:auto;margin-right:auto;
}
#my-cal-inline-30min{width:100%;min-height:620px;overflow:auto}
.cal-fallback{padding:28px 20px;text-align:center}
.cal-fallback h3{color:var(--ink);margin-bottom:10px}
.cal-fallback p{color:var(--ink-64);font-size:15px;margin-bottom:20px}
.cal-loading{padding:60px 20px;text-align:center;color:var(--ink-42);font-size:14px}

/* ---------- FOOTER ---------- */
footer{padding:56px 0 120px;background:var(--bg-dark);color:var(--light-42);font-size:14px}
.footer-inner{display:grid;gap:36px}
.footer-brand .brandbar{margin-bottom:16px}
.footer-brand .brandlogo{height:34px}
.footer-pitch{color:var(--light-64);font-size:15px;font-weight:500;max-width:34ch;margin-bottom:22px}
.footer-adresse{
  color:var(--light-64);font-size:14px;font-weight:500;line-height:1.5;
  margin:20px 0 0;max-width:34ch;
}
.footer-titre{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--light-42);margin-bottom:14px;
}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer-col a{
  color:var(--light-64);text-decoration:none;font-size:15px;font-weight:500;
  transition:color .25s ease;
}
.footer-col a:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}
.footer-zones{color:var(--light-64);font-size:15px;font-weight:500;line-height:1.6;max-width:22ch}
.footer-bas{
  display:flex;flex-direction:column;gap:8px;
  margin-top:44px;padding-top:24px;border-top:1px solid var(--light-09);
  font-size:13px;color:var(--light-42);
}

/* ---------- Animations d'apparition ---------- */
.reveal{
  opacity:0;transform:translateY(26px) scale(.985);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:none}
.reveal.in.done{will-change:auto}

/* ============================================================
   MICRO-INTERACTIONS
   Toutes desactivees plus bas si prefers-reduced-motion.
   Aucune ombre sur les cartes : la DA l'interdit, on joue sur
   l'elevation et la bordure.
   ============================================================ */

/* Barre de nav : se densifie une fois qu'on a quitte le haut */
.nav{transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease}
.nav.is-scrolled{
  background:rgba(251,251,253,.92);
  box-shadow:0 10px 30px -24px rgba(29,29,31,.55);
}
.nav-progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--ink);opacity:.22;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .12s linear;
}

/* Halos : derive tres lente au scroll */
body::before{transform:translate3d(0,var(--halo-y,0px),0)}

/* Boutons */
.btn{transition:transform .22s cubic-bezier(.22,.61,.36,1),opacity .22s ease,background-color .22s ease,border-color .22s ease}
.btn .btn-arrow{display:inline-block;transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.btn:active{transform:scale(.975)}

/* Cartes */
.card{transition:transform .4s cubic-bezier(.22,.61,.36,1),border-color .4s ease}
.mirror-ico,.proof-avatar,.offer-icon,.mode-ico{transition:transform .4s cubic-bezier(.22,.61,.36,1),background-color .3s ease,color .3s ease,border-color .3s ease}

/* Listes */
.contrast-list li{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.chev{transition:transform .35s cubic-bezier(.22,.61,.36,1),color .3s ease}

/* Tuiles de logos */
.logo-tile{transition:transform .35s cubic-bezier(.22,.61,.36,1),border-color .35s ease}
.logo-tile span{transition:color .35s ease}

/* Avatars du hero */
.avatar{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.avatar:hover{z-index:2}

/* FAQ */
.faq summary{transition:color .25s ease}
.faq-answer{overflow:hidden}

/* Le survol n'existe que sur les vrais pointeurs : rien ne se declenche
   au premier tap sur mobile. */
@media (hover:hover) and (pointer:fine){
  .btn:hover{opacity:.9}
  .btn:hover .btn-arrow{transform:translateX(5px)}
  .card:hover{transform:translateY(-4px);border-color:rgba(29,29,31,.18)}
  .card:hover .mirror-ico,.card:hover .proof-avatar,.card:hover .offer-icon{transform:scale(1.1) rotate(-4deg)}
  .offers .offer:hover{transform:translateY(-6px);border-color:rgba(29,29,31,.2)}
  .offers .offer:hover .offer-cta{gap:12px}
  .offer-cta:hover{gap:12px}
  .mode-tab:hover{border-color:rgba(29,29,31,.2);color:var(--ink);transform:translateX(3px)}
  .mode-tab:hover .mode-ico{transform:scale(1.12)}
  .contrast-list li:hover{transform:translateX(8px)}
  .contrast-list li:hover .chev{color:var(--violet);transform:translateX(3px)}
  .logo-tile:hover{transform:translateY(-3px);border-color:rgba(29,29,31,.2)}
  .logo-tile:hover span{color:var(--ink-64)}
  .logo-tile:hover .logo-img{opacity:1}
  .cas-card:hover .cas-lien .btn-arrow{transform:translateX(5px)}
  .besoin:not(.is-active):hover{border-color:rgba(29,29,31,.2);color:var(--ink);transform:translateY(-2px)}
  .carousel-btn:hover:not([disabled]){border-color:rgba(29,29,31,.28);transform:translateY(-2px)}
  .avatar:hover{transform:translateY(-5px) scale(1.08)}
  .faq summary:hover{color:var(--violet)}
  .nav-links a:hover{color:var(--ink)}
  .footer-col a:hover{color:var(--off-white)}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *{animation:none!important}
  /* Sans animation, la bande de logos redevient une grille lisible */
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none}
  /* Micro-interactions : on coupe tout mouvement, on garde les changements
     de couleur qui restent des reperes utiles. */
  .nav,.btn,.btn .btn-arrow,.card,.mirror-ico,.proof-avatar,.offer-num,.sub-num,
  .contrast-list li,.chev,.logo-tile,.logo-tile span,.avatar,.faq summary,.offer-cta,.besoin,.besoin-radio,
  .cas-lien .btn-arrow,
  .nav-progress{transition:none!important}
  .btn:hover,.card:hover,.contrast-list li:hover,.logo-tile:hover,.avatar:hover,
  .btn:hover .btn-arrow,.card:hover .mirror-ico,.card:hover .proof-avatar,
  .card:hover .offer-icon,.offers .offer:hover,.besoin:hover,
  .contrast-list li:hover .chev{transform:none!important}
  .offer-icon{transform:none!important}
  .parcours.is-active .etape{animation:none}
  body::before{transform:none!important}
  .nav-progress{display:none}
}

/* ---------- Tablette / Desktop ---------- */
@media (min-width:700px){
  /* --pad n'est plus redefini ici : le clamp de :root s'en charge en continu. */
  section{padding:104px 0}
  .hero{padding:56px 0 96px}
  .btn{width:auto}
  .grid{gap:20px;margin-top:44px}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .card{padding:28px}
  .reassure{text-align:left}
  .cta-center .reassure{text-align:center}
  .hero .reassure,.hero .lead{text-align:center}
  .hero{padding:88px 0 72px}
  .hero .lead{font-size:23px}
  .hero-actions{flex-direction:row;justify-content:center;max-width:none;width:auto}
  .nav-cta{display:inline-flex}
  .logos-section{padding:8px 0 72px}
  .logo-tile{width:178px;height:78px;margin-right:14px}
  .logo-img{max-height:32px}
  .offers{gap:20px;margin-top:44px}
  .offers{grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
  /* La photo prend EXACTEMENT la hauteur du texte : les deux colonnes
     s'etirent sur la hauteur de la rangee (align-items par defaut), et le
     cadre abandonne son rapport 3/4, qui lui imposait sinon sa propre hauteur.
     L'image est deja en position absolue avec object-fit:cover, elle remplit
     donc ce que la grille lui donne, quel que soit le texte.
     Sous ce seuil la grille n'a qu'une colonne : le rapport 3/4 reprend, il n'y
     a plus de hauteur de texte a epouser. */
  .agence{grid-template-columns:.8fr 1.2fr;gap:44px}
  .agence-visuel{aspect-ratio:auto}
  .besoins{grid-template-columns:repeat(2,1fr);gap:12px}
  .parcours{grid-template-columns:repeat(2,1fr);gap:20px}
  .metriques{grid-template-columns:repeat(3,1fr);gap:36px;margin-top:28px}
  /* Flex plutot que grid : le nombre de briques varie d'un cas a l'autre et
     une derniere rangee incomplete (5 briques sur 3 colonnes) doit se centrer
     au lieu de laisser un trou a droite. La base reproduit 3 colonnes. */
  .briques{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
  .briques > *{flex:0 1 calc((100% - 40px) / 3)}
  .brique{flex-direction:column;gap:14px}
  .cas-hero{padding:72px 0 48px}
  .cas-main section{padding:60px 0}
  .faq summary{padding:26px 48px 26px 0}
  .footer-inner{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
  .footer-bas{flex-direction:row;justify-content:space-between;align-items:center}
}
@media (min-width:1200px){
  /* Centre optique dans la barre, quelles que soient les largeurs du logo
     et du bouton, que des marges automatiques ne pourraient pas égaliser.
     white-space:nowrap pour qu'une entree ne se coupe jamais en deux : le bloc
     etant en position absolue depuis left:50%, sa largeur disponible n'est que
     la moitie de la pilule, et c'est ce qui cassait « Cas clients » en deux. */
  .nav-links{
    display:flex;position:absolute;left:50%;transform:translateX(-50%);margin:0;
    white-space:nowrap;
  }
  .brandsub{display:none}
  .nav-cta{margin-left:auto}
}
@media (min-width:960px){
  section{padding:112px 0}
  .cas-main section{padding:68px 0}
  .offers{grid-template-columns:repeat(3,1fr)}
  .besoins{grid-template-columns:repeat(4,1fr)}
  .besoin{gap:12px;padding:18px}
  .parcours{grid-template-columns:repeat(4,1fr)}
  .narrow{max-width:840px}
  .center{text-align:center;margin-left:auto;margin-right:auto}
}


/* ============================================================
   MISE EN PAGE DU SITE
   ------------------------------------------------------------
   Ce bloc etait assets/site-v2.css, le fichier d'ecarts de la
   variante d'A/B test. La v1 ayant ete supprimee, la v2 EST le
   site : ses regles rejoignent donc la feuille principale, dans
   l'ordre ou elles s'appliquaient, pour que la cascade soit
   exactement celle qui tournait en production.

   Ce qui suit redefinit donc volontairement des regles ecrites
   plus haut : menu en pilule, offres en lignes numerotees,
   bandes defilantes. C'est voulu, ne pas « nettoyer » les
   doublons sans verifier lequel des deux gagne.

   Les 6 habillages, eux, restent dans assets/habillages.css.
   ============================================================ */

/* ---------- Barre de navigation flottante ---------- */
.nav{
  background:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:0;
  padding:14px var(--pad) 0;
}
.nav-inner{
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border:1px solid var(--ink-09);
  border-radius:999px;
  padding:10px 10px 10px 22px;
  /* La pilule suit --maxw, comme la .site-nav de kokoro-ai.fr suit son
     --site-max : ses bords exterieurs tombent donc exactement sur ceux de la
     boite de contenu. La valeur etait figee a 1080 px, heritee de l'epoque ou
     --maxw valait 1120 : elle n'a pas suivi l'elargissement a 1240 et la
     pilule s'est retrouvee 80 px en retrait de chaque cote. */
  max-width:var(--maxw);
  transition:box-shadow .3s ease,background-color .3s ease;
}
/* site.js pose « is-scrolled » au-dela de 16px de scroll. Ce fichier a
   longtemps vise « scrolled » tout court : les deux ne se rencontraient
   jamais, la pilule ne se densifiait pas au defilement, et le fond bleute
   de la barre v1 reapparaissait derriere elle. */
.nav.is-scrolled .nav-inner{
  background:rgba(255,255,255,.95);
  box-shadow:0 6px 26px rgba(29,29,31,.09);
}
.nav.is-scrolled{background:none;box-shadow:none}
.nav-progress{left:var(--pad);right:var(--pad);border-radius:999px}

/* ============================================================
   BANDE DE LOGOS CLIENTS
   Plus de tuiles blanches, les logos se posent sur le fond, en noir.
   La bande est ramenee a la largeur du contenu : elle defilait d'un
   bord a l'autre de l'ecran, ce qui la noyait.
   ============================================================ */
.marquee{
  max-width:960px;margin:0 auto;padding:6px 0 8px;
}
.logo-tile{
  /* Jamais deux fois le meme logo a l'ecran. Deux exemplaires sont distants
     d'un groupe, soit n cellules, donc il faut n*c >= largeur + c, c'est a
     dire c >= largeur / (n - 1). Avec 8 logos dans une bande plafonnee a
     960px : c >= 137px, et le masque degrade des bords retire encore 24 %
     de largeur visible. Le clamp couvre aussi les ecrans plus etroits, ou
     la bande retrecit avec la page. */
  flex:0 0 clamp(170px, 25vw, 250px);
  width:auto;height:auto;margin-right:0;padding:0 10px;
  background:none;border:0;border-radius:0;
}
.logo-img{
  /* Monochrome noir : grayscale seul laisserait des gris colores selon la
     teinte d'origine, brightness(0) aplatit tout sur du noir franc. */
  max-height:26px;
  filter:grayscale(1) brightness(0);
  opacity:.62;
}
/* Un logo reduit a son SYMBOLE, sans le nom de la marque, n'a pas la largeur
   d'un logotype : plafonne a la meme hauteur que les autres, il pese
   optiquement deux fois moins et se lit comme un detail perdu dans la
   cellule. On lui laisse la hauteur qui retablit l'equilibre. */
.logo-img.logo-symbole{max-height:42px}

.logo-tile span{color:var(--ink-42);font-size:13px}

/* ============================================================
   NOS SERVICES : lignes numerotees au lieu de la grille de cartes
   ============================================================ */
.offres-liste{margin-top:34px;border-top:1px solid var(--ink-09)}
.offre-ligne{
  display:grid;grid-template-columns:1fr;gap:14px;
  align-items:center;
  padding:26px 0;
  border-bottom:1px solid var(--ink-09);
}
/* ---------- La bulle ----------
   Carre, comme la reference : son viewBox est 311.034 x 311.034. La silhouette
   est une courbe de Bezier, pas un carre arrondi, d'ou le clipPath defini en
   bas de index.html. Un border-radius, meme asymetrique, garde des flancs
   d'ellipse ou de rectangle et ne reproduit pas cette forme.

   Trois elements imbriques, et c'est necessaire :
     .offre-medaillon  repere de position, porte l'accent, JAMAIS detoure,
                       sinon le numero serait rogne lui aussi ;
     .offre-bulle      porte le detourage et la rotation ;
     img               contre-pivote, pour que la photo reste d'aplomb.
   ------------------------------------------------------------ */
.offre-medaillon{
  position:relative;flex:none;
  width:112px;height:112px;
  display:flex;align-items:center;justify-content:center;
  overflow:visible;
}
/* Les classes d'accent du medaillon s'appellent acc-* et non ico-*, et ce
   n'est pas cosmetique. Les ico-* servent aux icones de service, et portent un
   aplat de couleur, dans site.css comme dans CHAQUE habillage. Posees sur le
   medaillon, elles y dessinaient un carre plein de 112px derriere la bulle,
   que les habillages 2 a 6 remettaient meme apres une remise a plat, leur
   selecteur etant plus specifique. Le medaillon ne peint donc rien : il ne
   transmet que --accent au numero et --accent-doux a la bulle. */

.offre-bulle{
  position:absolute;inset:0;
  clip-path:url(#bulle-offre);
  display:block;
}
.offre-bulle img{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* Sans photo, la bulle est une teinte de la couleur d'accent de l'offre.
   La classe a-photo est posee par site.js quand une image a reellement
   charge : on evite ainsi :has(), et l'aplat disparait sous la photo. */
.offre-bulle{background:var(--accent-doux)}
.offre-medaillon.a-photo .offre-bulle{background:none}
.offre-medaillon.acc-blue{--accent:var(--blue);--accent-doux:rgba(44,124,246,.16)}
.offre-medaillon.acc-violet{--accent:var(--violet);--accent-doux:rgba(142,92,232,.16)}
.offre-medaillon.acc-pink{--accent:var(--pink);--accent-doux:rgba(224,80,156,.16)}
.offre-medaillon.acc-orange{--accent:var(--orange);--accent-doux:rgba(244,120,58,.16)}
.offre-medaillon.acc-green{--accent:var(--green);--accent-doux:rgba(52,199,89,.16)}
/* La silhouette de la bulle ne bouge plus au survol : seule la photo s'agrandit
   a l'interieur du detourage, qui reste fixe. La rotation d'un tiers de tour a
   ete retiree, ainsi que la contre-rotation de la photo qui l'accompagnait et
   le grossissement de 1,42 qui servait a couvrir les creux du trace pendant le
   mouvement. */
.offre-bulle img{
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}

/* La pastille numerotee sert de reperage, et de badge par-dessus la photo. */
.offre-num{
  position:absolute;left:-6px;bottom:-4px;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;letter-spacing:.02em;
  background:var(--ink);color:#fff;
  border:3px solid var(--accent);
}

.offre-nom h3{font-size:clamp(20px,5vw,25px);letter-spacing:-.025em}
.offre-promesse{
  font-size:14px;font-weight:600;color:var(--ink-42);margin-top:4px;
}
.offre-texte{color:var(--ink-64)}
.offre-lien{
  justify-self:start;
  background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:600;color:var(--violet);
  display:inline-flex;align-items:center;gap:8px;
  transition:gap .28s cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   LE RENDEZ-VOUS : icones au trait au lieu des emoji
   ============================================================ */
/* ============================================================
   COMPATIBLE AVEC VOS OUTILS
   Deuxieme bande defilante, plus dense : 19 outils, donc des cellules
   bien plus etroites que la bande clients (c >= largeur / 8).
   ============================================================ */
.outils-section{padding-top:0}
.outils-lead{max-width:48ch;margin-top:16px}
.outils-marquee{max-width:960px;margin:22px auto 0}

/* Chaque bande a sa propre duree, calee sur ce qu'elle a a parcourir, pour
   que les deux avancent a la meme vitesse apparente, environ 45 px/s.
   Clients : 2 groupes de 8 cellules de 250px, soit 2000px parcourus.
   Outils  : 2 groupes de 19 cellules de 168px, soit 3192px parcourus. */
#marquee .marquee-track{animation-duration:45s}
.outils-marquee .marquee-track{animation-duration:72s}
.app-tile{
  flex:0 0 clamp(140px, 16vw, 168px);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:10px;padding:0 8px;
}
.app-tile img{
  height:30px;width:auto;max-width:100%;
  object-fit:contain;
  filter:grayscale(1) brightness(0);opacity:.62;
}
.app-nom{
  font-size:13px;font-weight:600;letter-spacing:-.005em;
  color:var(--ink-42);white-space:nowrap;
}
.outils-note{
  font-size:13px;color:var(--ink-42);margin-top:14px;
}

/* ============================================================
   Tablette et desktop
   ============================================================ */
@media (min-width:700px){
  .nav{padding:16px var(--pad) 0}
  .offre-ligne{
    grid-template-columns:112px minmax(170px,1fr) minmax(0,1.5fr) auto;
    gap:28px;
    padding:30px 0;
  }
  .offre-lien{justify-self:end}
}

@media (hover:hover) and (pointer:fine){
  /* Le survol rend au logo sa couleur et sa densite. */
  .logo-tile:hover .logo-img,.app-tile:hover img{filter:none;opacity:1}
  .logo-tile:hover{transform:none}
  .offre-ligne:hover .offre-lien{gap:11px}
  /* La photo s'avance dans la bulle, qui ne bouge pas. Le detourage etant
     fixe, le zoom est la seule chose qui se passe au survol : il doit donc se
     voir. A 1,25 la photo gagne un quart de taille, ce qui reste sous le seuil
     ou le sujet sort du cadre. */
  .offre-ligne:hover .offre-bulle img{transform:scale(1.25)}
}

@media (prefers-reduced-motion: reduce){
  .nav-inner,.offre-lien,.besoin-radio,
  .offre-bulle img{transition:none}
}