/* ==========================================================================
   WebHopper · home.css
   Sections propres a la page d'accueil. Depend de base.css.
   Genere le 1er aout 2026 depuis la homepage. Charte Ember & Steel.
   ========================================================================== */

/* ============ HERO ============ */
/* ============ HERO ============ */
.hero{padding:clamp(3.5rem,9vw,7.5rem) 0 clamp(3rem,7vw,6rem)}
.hero-tag{margin-bottom:2rem}
.hero h1{font-family:var(--font-display);font-weight:900;font-size:clamp(2.75rem,7.4vw,6.5rem);
  line-height:1.0;letter-spacing:-.035em;color:var(--charbon);max-width:16ch;margin-bottom:2rem}
.hero h1 .accent{color:var(--ambre)}
.word{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .01em .14em;margin-bottom:-.14em}
.word > span{display:inline-block;will-change:transform}
.js .word > span{transform:translateY(115%)}
.js .hero.play .word > span{animation:wordUp 1.05s cubic-bezier(.19,1,.22,1) forwards;animation-delay:var(--d,0ms)}
@keyframes wordUp{to{transform:translateY(0)}}
.hero-sub{font-size:clamp(1.02rem,1.4vw,1.18rem);max-width:60ch;line-height:1.7;margin-bottom:2.4rem;color:var(--ink)}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-bottom:3.4rem}
.hero-stats{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(2rem,5vw,4rem);justify-content:start;padding-top:2.2rem;border-top:1px solid var(--border-clair);max-width:640px}
.stat .num{font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,3.4vw,2.9rem);letter-spacing:-.03em;line-height:1;color:var(--charbon);display:block;font-variant-numeric:tabular-nums}
.stat .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--pierre);margin-top:.7rem;display:block;line-height:1.3}

/* ============ MANIFESTE (mots qui s'allument au defilement) ============ */
/* ============ MANIFESTE (mots qui s'allument au scroll) ============ */
.manifesto{background:var(--ivoire);border-top:1px solid var(--border-clair);border-bottom:1px solid var(--border-clair)}
.manifesto .wrap{padding-top:clamp(5rem,14vh,9rem);padding-bottom:clamp(5rem,14vh,9rem)}
.manifesto .eyebrow{margin-bottom:1.8rem}
.mani-text{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.28;font-size:clamp(1.55rem,3.6vw,3.1rem);max-width:20ch;color:var(--charbon)}
/* Les mots eteints. Deux garde-fous plutot qu'un :
   1. L'etat eteint n'existe que sous html.js, la classe posee par base.js. Sans
      JavaScript, rien n'allume les mots, la phrase resterait donc illisible pour
      toujours. Par defaut elle est en charbon, l'effet est un bonus.
   2. #8F8B85 et non #D9D3CA. L'ancien gris donnait 1,33:1 sur l'ivoire, tres loin
      du compte. Le manifeste fait 24,8px minimum en graisse 800, il releve donc du
      grand texte, seuil 3:1. #8A8781 donne 3,21:1, meme teinte chaude assombrie,
      avec une marge volontaire sur le seuil. L'allumage va de 3,2:1 a 15,7:1,
      l'effet reste franc. */
.mani-text .w{transition:color .35s ease}
html.js .mani-text .w{color:#8A8781}
html.js .mani-text .w.lit{color:var(--charbon)}
html.js .mani-text .w.hot.lit{color:var(--ambre)}
.mani-sign{margin-top:2.2rem;font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--pierre)}

/* ============ 01 · OFFRES (vitrine interactive) ============ */
/* ============ 01 · OFFRES (vitrine interactive) ============ */
.services{background:var(--blanc)}
.os{display:grid;grid-template-columns:1fr;gap:1.4rem;margin-top:clamp(2rem,4vw,3.2rem)}
@media(min-width:900px){.os{grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,4vw,4rem);align-items:start}}
.os-list{display:none}
@media(min-width:900px){.os-list{display:flex;flex-direction:column;border-top:1px solid var(--border-clair)}}
.os-tab{position:relative;text-align:left;background:none;border:0;border-bottom:1px solid var(--border-clair);cursor:pointer;width:100%;
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:baseline;
  padding:1.5rem 1rem 1.5rem 1.2rem;transition:padding-left .25s ease,background-color .25s ease}
.os-tab::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ambre);transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease)}
.os-tab .n{font-family:var(--font-mono);font-size:12px;color:var(--pierre);padding-top:.35rem;transition:color .25s ease}
.os-tab .nm{font-family:var(--font-display);font-weight:800;font-size:clamp(1.3rem,2vw,1.75rem);letter-spacing:-.015em;color:var(--charbon);line-height:1.12;transition:color .25s ease}
.os-tab .sub{display:block;font-family:var(--font-body);font-weight:400;font-size:.92rem;color:var(--pierre);margin-top:.35rem}
.os-tab[aria-selected="true"]{background:var(--ambre-pale);padding-left:1.9rem}
.os-tab[aria-selected="true"]::before{transform:scaleY(1)}
.os-tab[aria-selected="true"] .n,.os-tab[aria-selected="true"] .nm{color:var(--charbon)}

.os-stage{display:grid}
@media(min-width:900px){.os-stage{position:sticky;top:96px}}
.os-panel{border:1px solid var(--border-clair);border-radius:var(--r-card);overflow:hidden;background:var(--blanc)}
@media(min-width:900px){
  .js .os-panel{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .5s ease, transform .5s var(--ease)}
  .js .os-panel.active{opacity:1;visibility:visible;transform:none}
}
@media(max-width:899px){.os-panel{margin-bottom:1.2rem}}
.os-vis{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--ambre-pale) 0%,var(--ambre-pale2) 100%);border-bottom:1px solid var(--border-clair)}
.os-vis .ghostn{position:absolute;right:.04em;bottom:-.24em;font-family:var(--font-display);font-weight:900;font-size:clamp(6rem,15vw,10rem);color:rgba(222,99,0,.15);line-height:.8;letter-spacing:-.04em;pointer-events:none}
.os-motif{width:clamp(96px,15vw,140px);height:auto;color:var(--ambre);position:relative;z-index:1;filter:drop-shadow(0 6px 14px rgba(222,99,0,.16))}
.os-info{padding:clamp(1.5rem,3vw,2.2rem)}
.os-titleline{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-bottom:.7rem}
.os-info h3{font-family:var(--font-display);font-weight:800;font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:-.015em;line-height:1.12;color:var(--charbon)}
.badge{font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--charbon);background:var(--ambre-pale);border:1px solid rgba(222,99,0,.45);padding:.4rem .7rem;border-radius:var(--r-pill);line-height:1;white-space:nowrap}
.os-info p{color:var(--ink);font-size:clamp(.98rem,1.2vw,1.05rem);line-height:1.65;margin-bottom:1.1rem;max-width:56ch}
.os-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.3rem}
.os-tags span{font-family:var(--font-mono);font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--pierre);border:1px solid var(--border-clair);padding:.4rem .65rem;border-radius:var(--r-tag);line-height:1}
.svc-foot{margin-top:clamp(2rem,4vw,3rem)}

/* ============ MA DIFFERENCE (USP) ============ */
/* ============ TRANSPARENCE (USP) ============ */
.promise{background:var(--ivoire)}
.promise .wrap{padding:clamp(3.5rem,8vw,6.5rem) 0}
.promise-card{border:1px solid var(--border-clair);border-radius:var(--r-section);background:linear-gradient(160deg,var(--blanc) 0%,var(--ambre-pale) 135%);padding:clamp(1.8rem,4vw,3.4rem);display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem)}
@media(min-width:900px){.promise-card{grid-template-columns:.95fr 1.05fr;align-items:start}}
.promise-intro .eyebrow{margin-bottom:1.3rem}
.promise-title{font-family:var(--font-display);font-weight:900;font-size:clamp(1.8rem,3.6vw,2.8rem);letter-spacing:-.025em;line-height:1.1;color:var(--charbon);margin-bottom:1.2rem;max-width:16ch}
.promise-intro p{color:var(--ink);font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.7;max-width:46ch}
.promise-list{display:grid;gap:0}
.promise-list li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;padding:1.05rem 0;border-bottom:1px solid var(--border-clair)}
.promise-list li:first-child{padding-top:0}
.promise-list li:last-child{border-bottom:0;padding-bottom:0}
.promise-list .pk{flex-shrink:0;width:30px;height:30px;border-radius:var(--r-tag);background:var(--ambre-pale);color:var(--ambre);border:1px solid rgba(222,99,0,.35);display:flex;align-items:center;justify-content:center;margin-top:1px}
.promise-list .pk svg{width:17px;height:17px}
.promise-list .pt{color:var(--ink);font-size:.98rem;line-height:1.55}
.promise-list .pt strong{display:block;font-family:var(--font-body);font-weight:700;color:var(--charbon);font-size:1.03rem;margin-bottom:.1rem;letter-spacing:-.005em}

/* ============ METHODE (section sombre, etapes + budget) ============ */
/* ============ PROCESSUS (section sombre, timeline + budget) ============ */
.process{background:var(--charbon);color:var(--blanc);overflow:hidden;isolation:isolate}
.process .wrap{padding:clamp(4rem,9vw,7.5rem) 0;position:relative;z-index:1}
.process-mesh{position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(55% 45% at 82% 8%,rgba(222,99,0,.24),transparent 62%)}
.process .sec-marker{color:var(--ambre)}
.process .sec-title{color:#fff;max-width:20ch}
.process .sec-lead{color:#c9c5bf}
.process :focus-visible{outline-color:var(--ambre)}
.process .ghost-link{color:var(--ambre)}

.steps{display:grid;gap:2.4rem;margin:clamp(2.5rem,5vw,4rem) 0 0;padding:0;list-style:none;position:relative}
.step{position:relative;padding-top:1.9rem;border-top:1px solid rgba(255,255,255,.16)}
.step::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;
  background:var(--ambre);box-shadow:0 0 0 4px var(--charbon)}
.step-n{display:block;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:2px;
  color:var(--ambre);margin-bottom:.9rem;line-height:1}
.step h3{font-family:var(--font-display);font-weight:800;font-size:clamp(1.22rem,1.9vw,1.5rem);
  letter-spacing:-.015em;line-height:1.15;color:#fff;margin-bottom:.7rem}
.step p{color:#c9c5bf;font-size:.97rem;line-height:1.65;margin-bottom:1.2rem}
.step-when{display:inline-block;font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:1px;
  text-transform:uppercase;color:var(--tag-dark-text);border:1px solid rgba(255,255,255,.22);
  padding:.42rem .68rem;border-radius:var(--r-tag);line-height:1}
@media(min-width:900px){
  .steps{grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,2.6rem)}
  .steps::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.16)}
  .step{border-top:0}
}

.pricing{margin-top:clamp(3rem,6vw,4.6rem);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-section);
  padding:clamp(1.6rem,3.5vw,2.8rem);background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(222,99,0,.08));
  display:grid;gap:clamp(1.8rem,4vw,3rem)}
@media(min-width:900px){.pricing{grid-template-columns:.85fr 1.15fr;align-items:start}}
.pricing h3{font-family:var(--font-display);font-weight:900;font-size:clamp(1.45rem,2.6vw,2rem);letter-spacing:-.025em;
  line-height:1.12;color:#fff;margin-bottom:.9rem}
.pricing .pl-lead{color:#c9c5bf;font-size:1rem;line-height:1.7;max-width:42ch}
.price-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.6rem;
  padding:.95rem 0;border-bottom:1px solid rgba(255,255,255,.14)}
.price-row:first-child{padding-top:0}
.price-row:last-child{border-bottom:0;padding-bottom:0}
.price-row .pl{color:#fff;font-weight:600;font-size:1.02rem}
.price-row .pl small{display:block;font-weight:400;font-size:.86rem;color:#a9a49e;margin-top:.2rem;line-height:1.4}
.price-row .pv{font-family:var(--font-display);font-weight:800;font-size:clamp(1.05rem,1.7vw,1.3rem);
  letter-spacing:-.015em;color:var(--ambre);white-space:nowrap}
.process-foot{margin-top:clamp(2rem,4vw,2.8rem)}

/* ============ TEMOIGNAGES ============ */
/* ============ TÉMOIGNAGES ============ */
.reviews{background:var(--blanc)}
.reviews-grid{display:grid;grid-template-columns:1fr;gap:1.4rem;margin-top:clamp(2.5rem,5vw,4rem)}
@media(min-width:720px){.reviews-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.reviews-grid{grid-template-columns:repeat(2,1fr);gap:1.6rem}}
.review{position:relative;border:1px solid var(--border-clair);border-radius:var(--r-card);background:var(--blanc);padding:clamp(1.6rem,2.5vw,2.1rem);display:flex;flex-direction:column;gap:1.1rem;transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease}
.review:hover{transform:translateY(-5px);box-shadow:0 20px 40px -22px rgba(26,25,24,.22);border-color:var(--pierre)}
.review .qm{font-family:var(--font-display);font-weight:900;font-size:2.4rem;line-height:.5;color:var(--ambre);height:1rem}
.review .stars{display:flex;gap:.2rem;color:var(--ambre)}
.review .stars svg{width:16px;height:16px}
.review .rq{color:var(--ink);font-size:1.02rem;line-height:1.6;flex:1;margin:0}
.review .author{display:flex;align-items:center;gap:.9rem;padding-top:1.1rem;border-top:1px solid var(--border-clair)}
.review .avatar{width:44px;height:44px;border-radius:50%;background:var(--ambre-pale);color:var(--charbon);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:1rem;flex-shrink:0}
.review .who .n{font-family:var(--font-body);font-weight:700;color:var(--charbon);font-size:.98rem}
.review .who .r{font-family:var(--font-mono);font-size:11px;letter-spacing:.5px;color:var(--pierre);margin-top:.15rem}
.review.ph{border-style:dashed;border-color:rgba(222,99,0,.5);background:linear-gradient(160deg,var(--blanc),var(--ambre-pale))}
.reviews-note{margin-top:1.6rem;font-family:var(--font-mono);font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--charbon);display:flex;align-items:center;gap:.55rem}
.reviews-note svg{width:15px;height:15px;color:var(--ambre)}

/* ============ 02 · A PROPOS ============ */
/* ============ 02 · À PROPOS (v1) ============ */
.about{background:var(--ivoire)}
.about-grid{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
.about-text p{color:var(--ink);font-size:clamp(1.02rem,1.3vw,1.15rem);line-height:1.75;max-width:60ch}
.about-points{margin:2rem 0 2.2rem;display:grid;gap:1rem}
.about-points li{display:flex;gap:.9rem;align-items:flex-start;color:var(--charbon);font-weight:500;max-width:52ch}
.about-points .ck{flex-shrink:0;width:26px;height:26px;border-radius:var(--r-tag);background:var(--ambre-pale);color:var(--ambre);display:flex;align-items:center;justify-content:center;margin-top:2px}
.about-points .ck svg{width:16px;height:16px}
.about-meta{display:flex;flex-wrap:wrap;gap:1.4rem;padding-top:1.6rem;border-top:1px solid var(--border-clair)}
.about-meta .mi{display:flex;align-items:center;gap:.55rem;color:var(--pierre);font-family:var(--font-mono);font-size:12px;letter-spacing:.5px}
.about-meta .mi svg{width:16px;height:16px;color:var(--ambre)}
/* Portrait d'Emilien. Remplace la carte typographique « ES », qui servait
   d'attente tant qu'aucune photo n'etait disponible. Le nom est pose sur un
   voile sombre en bas de l'image : contraste garanti quelle que soit la photo. */
.about-card{position:relative;margin:0;border-radius:var(--r-card);border:1px solid var(--border-clair);
  overflow:hidden;aspect-ratio:4/5;min-height:340px;background:var(--ambre-pale)}
.about-card img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
/* Bandeau CHARBON OPAQUE, et non un degrade semi-transparent : sur un voile
   translucide, le contraste depend de la zone de photo qui passe dessous, et
   l'ambre tombait a 4,18:1 sur une zone claire. Le fond plein le garantit a
   4,92:1 quelle que soit la photo. Le degrade au-dessus adoucit la jonction. */
.about-card .who{position:absolute;left:0;right:0;bottom:0;padding:clamp(1.2rem,2.6vw,1.7rem)
  clamp(1.4rem,3vw,2rem);background:var(--charbon)}
.about-card .who::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:72px;
  pointer-events:none;background:linear-gradient(to top,var(--charbon),rgba(26,25,24,0))}
.about-card .who .n{display:block;font-family:var(--font-display);font-weight:800;font-size:1.25rem;
  letter-spacing:-.01em;color:#fff}
.about-card .who .r{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:1px;
  text-transform:uppercase;color:var(--ambre);margin-top:.45rem}

/* ============ 03 · REALISATIONS (marquee infini) ============ */
/* ============ 03 · RÉALISATIONS (marquee infini) ============ */
.work{background:var(--blanc);overflow:hidden}
.work .wrap{position:relative;z-index:1}
.marquee{position:relative;margin-top:clamp(2.5rem,5vw,4rem)}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:clamp(1.25rem,5vw,6rem);z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--blanc),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--blanc),transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 68s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(var(--marq-x,-50%))}}
.work-card{position:relative;flex:0 0 auto;width:clamp(270px,64vw,400px);min-height:clamp(348px,44vw,452px);
  margin-right:clamp(1rem,2vw,1.75rem);border-radius:var(--r-card);border:1px solid var(--border-clair);
  padding:clamp(1.5rem,2.4vw,2rem);display:flex;flex-direction:column;justify-content:space-between;gap:1.4rem;
  color:var(--charbon);overflow:hidden;isolation:isolate;transition:transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease}
.work-card:hover,.work-card:focus-visible{transform:translateY(-8px);box-shadow:0 22px 44px -22px rgba(26,25,24,.35);border-color:var(--pierre)}
.work-card[data-tint="amber"]{background:linear-gradient(155deg,var(--blanc) 0%,var(--ambre-pale) 100%)}
.work-card[data-tint="stone"]{background:linear-gradient(155deg,var(--blanc) 0%,var(--ivoire) 100%)}
.work-card[data-tint="deep"]{background:linear-gradient(155deg,var(--ambre-pale) 0%,var(--ambre-pale2) 100%)}
.work-card[data-tint="warm"]{background:linear-gradient(155deg,var(--ivoire) 0%,#ece7df 100%)}
.work-top{display:flex;align-items:center;justify-content:space-between}
.work-idx{font-family:var(--font-mono);font-size:12px;letter-spacing:1px;color:var(--pierre)}
.work-arrow{width:40px;height:40px;border-radius:var(--r-tag);border:1px solid var(--border-clair);background:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;color:var(--ambre);transition:transform .3s var(--ease), background-color .25s ease, color .25s ease}
.work-arrow svg{width:20px;height:20px}
.work-card:hover .work-arrow,.work-card:focus-visible .work-arrow{transform:translate(4px,-4px);background:var(--ambre);color:var(--charbon)}
.work-name{font-family:var(--font-display);font-weight:900;letter-spacing:-.03em;line-height:1;font-size:clamp(1.6rem,3.4vw,2.35rem);color:var(--charbon);margin-top:.35rem}
.work-bottom{display:flex;flex-direction:column;gap:.9rem}
.work-desc{color:var(--ink);font-size:1rem;line-height:1.6}
/* La prestation est l'information qui vend : pastille blanche a contour orange,
   posee juste sous le nom du client. Blanche et non creme, parce que certaines
   cartes ont deja un fond creme et la pastille y disparaitrait. */
.work-tag{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;
  color:var(--charbon);background:#fff;border:1px solid rgba(222,99,0,.55);
  padding:.5rem .78rem;border-radius:var(--r-pill);line-height:1}
.marquee-hint{margin-top:1.6rem;font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--pierre);display:flex;align-items:center;gap:.5rem}


/* ---- Logos clients (cartes du carrousel) ----------------------------------
   Chaque logo est pose sur une pastille blanche : les logos fournis ont des
   fonds transparents et des couleurs variees, la pastille garantit qu'ils
   restent lisibles quelle que soit la teinte de la carte. -------------------- */
.work-logo{height:clamp(42px,5.5vw,52px);max-width:158px;background:#fff;border:1px solid var(--border-clair);
  border-radius:var(--r-tag);padding:6px 11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.work-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.work-top{align-items:flex-start}
.work-sector{display:block;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:1px;
  text-transform:uppercase;color:var(--pierre);line-height:1}

/* ---- Note globale Google ---- */
.rating{display:inline-flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:1.6rem;position:relative;z-index:1}
.rating-score{font-family:var(--font-display);font-weight:900;font-size:1.5rem;letter-spacing:-.02em;
  color:var(--charbon);line-height:1}
.rating .stars svg{width:17px;height:17px}
.rating-count{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--pierre)}

/* ---- Logo de l'entreprise dans une fiche d'avis ---- */
.review .rlogo{width:56px;height:56px;flex-shrink:0;background:#fff;border:1px solid var(--border-clair);
  border-radius:var(--r-tag);padding:7px;display:flex;align-items:center;justify-content:center}
.review .rlogo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.reviews-foot{margin-top:clamp(1.8rem,3.5vw,2.6rem)}

/* ============ RESPONSIVE ============ */
@media(min-width:768px){.about-grid{grid-template-columns:1.15fr .85fr}}
@media(max-width:560px){
  .hero-stats{grid-template-columns:1fr;gap:1.6rem;text-align:left}
  .hero-actions .btn{width:100%;justify-content:center}
}
@media(max-width:410px){.hero h1{font-size:clamp(2.15rem,10.2vw,2.75rem);letter-spacing:-.03em}}

/* ============ MOUVEMENT REDUIT ============ */
@media(prefers-reduced-motion:reduce){
  .js .word > span{transform:none !important}
  /* Doit reprendre le selecteur html.js : sinon la regle d'extinction plus haut,
     plus specifique, l'emporterait et l'accommodation serait sans effet. */
  html.js .mani-text .w,
  html.js .mani-text .w.hot{color:var(--charbon)}
  .marquee-track{animation:none;width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x mandatory}
  .marquee-track .work-dup{display:none}
  .work-card{scroll-snap-align:start}
  .marquee::before,.marquee::after{display:none}
  .os-panel{opacity:1 !important;visibility:visible !important;transform:none !important;position:static}
}
@media(prefers-reduced-motion:reduce) and (min-width:900px){
  .os-stage{display:grid;gap:1.2rem}
  .os-panel{grid-area:auto}
}