/* ════════════════════════════════════════════════════════════════════
   WEBMA — PAGES
   Blocs propres a une page (hero, illustrations des cartes, process,
   comparatif, realisations, blog, contact).
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero accueil ──────────────────────────────────────────────── */
/* Le hero remonte sous l en-tete (qui est transparent et flotte au-dessus)
   puis recupere la hauteur en padding : la teinte bleutee part du bord
   superieur de la page, et le contenu ne bouge pas d un pixel. */
.hero,
.page-hero{
  margin-top:calc(-1 * var(--nav-h));
  padding-top:var(--nav-h);
}
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#F2F2FF 0%,rgba(242,242,255,0) 70%);
}
.hero__inner{
  max-width:var(--container-narrow);margin-inline:auto;
  padding:96px var(--gutter) 0;text-align:center;
}
.hero__title{margin-top:24px}
.hero__text{max-width:60ch;margin:24px auto 0}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:36px}

/* ── Bandeau de realisations (hero) ────────────────────────────── */
/* Chaque realisation montre sa version desktop et sa version mobile cote
   a cote, le nom du client sous la version desktop. La piste est doublee
   par ui.js ; l animation jouee a l envers fait defiler l ensemble de la
   gauche vers la droite. */
.showcase{overflow:hidden;margin-top:56px;padding-bottom:72px}
.showcase__track{display:flex;align-items:flex-start;width:max-content;--marquee-speed:var(--showcase-speed)}
/* Duree de secours : ui.js la remplace d apres --marquee-speed. */
.showcase__track.is-looping{animation:wm-marquee 80s linear infinite reverse}
/* Marge plutot que gap : la piste doublee vaut alors exactement deux fois
   la meme largeur, et la boucle se referme au pixel pres. */
.showcase__item{margin-inline-end:var(--showcase-space)}
.showcase__pair{display:flex;align-items:flex-start;gap:var(--showcase-gap)}
.showcase__shot{
  display:block;height:var(--showcase-h);width:auto;
  border:1px solid var(--border-card);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);background:var(--surface);
}
.showcase__shot--mobile{border-radius:var(--radius-card)}
/* Alignee a gauche, donc sous le bord gauche de la capture desktop. */
.showcase__caption{
  margin-top:18px;text-align:left;white-space:nowrap;
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-tertiary);
}

/* Hero des pages interieures */
.page-hero{background:var(--gradient-wash)}
.page-hero__inner{
  max-width:var(--container);margin-inline:auto;
  padding:88px var(--gutter) 56px;text-align:center;
}
.page-hero__inner--narrow{max-width:var(--container-text)}
.page-hero__title{margin-inline:auto;max-width:22ch}
.page-hero__text{margin:20px auto 0;max-width:58ch}

/* ── Cartes services (accueil) ─────────────────────────────────── */
/* Deux colonnes : l intro tient la gauche pendant que les cartes
   defilent a droite. Les deux colonnes sont collantes, l intro pour
   rester lisible, les cartes pour s empiler. */
.services{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:var(--space-16);align-items:start;
}
.services__intro{position:sticky;top:var(--stack-top)}
.services__stack{display:flex;flex-direction:column;gap:var(--stack-gap)}
.service{position:relative;min-height:392px;overflow:hidden}
/* Chaque carte se colle 18 px plus bas que la precedente : le haut des
   cartes deja passees reste visible sous la pile. Le retrecissement
   vient de --prog, que ui.js fait monter d un cran par carte venue se
   poser dessus ; sans JS la valeur reste a 0 et les cartes s empilent
   simplement, a taille pleine. La promotion en couche evite de
   repeindre la carte et ses ombres a chaque image du defilement. */
.services__card{
  position:sticky;top:calc(var(--stack-top) + var(--i,0) * var(--stack-step));
  transform-origin:top center;will-change:transform;
  transform:scale(calc(1 - var(--stack-shrink) * var(--prog,0)));
}
.service__text{max-width:28ch}
.service__art{position:relative;flex:1;min-height:188px;margin-top:28px}

/* Maquette : petites cartes empilees */
.mock{
  position:absolute;background:var(--surface);
  box-shadow:var(--shadow-md);border-radius:var(--radius-lg);
}
.mock--top{left:14%;right:0;top:0;border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:13px}
.mock--mid{left:0;right:14%;top:62px;padding:18px;display:flex;align-items:center;gap:15px}
.mock--bottom{
  left:8%;right:22%;top:152px;border-radius:var(--radius-md);padding:12px 14px;
  box-shadow:var(--shadow-xs);display:flex;align-items:center;gap:10px;opacity:.7;
}
.mock__avatar{width:34px;height:34px;border-radius:var(--radius-full);background:var(--brand-100);flex:none}
.mock__lines{display:flex;flex-direction:column;gap:6px;min-width:0}
.mock__line{height:9px;border-radius:4px;background:var(--slate-200)}
.mock__line--short{height:8px;background:var(--slate-100)}
.mock__dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--success);flex:none}
.mock__label{display:block;font-family:var(--font-display);font-size:var(--text-h4);font-weight:600;letter-spacing:-.03em}
.mock__sub{display:block;font-size:13.5px;color:var(--text-tertiary);margin-top:2px}

/* Maquette : cartes inclinees (visibilite Google) */
.mock-tilt{
  position:absolute;top:14px;width:47%;background:var(--surface);
  border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-md);
}
.mock-tilt--left{left:0;transform:rotate(-4deg)}
.mock-tilt--right{right:0;top:36px;transform:rotate(4deg)}
.mock-tilt__caption{font-family:var(--font-display);font-size:15px;font-weight:600;margin-top:12px;letter-spacing:-.02em}
.mock-tilt__legend{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);margin-top:12px}
.keyword-bars{display:flex;flex-direction:column;gap:9px}
.keyword-bars span{height:9px;border-radius:4px;display:block}

/* Graphe de vitesse */
.chart-frame{
  position:relative;flex:1;min-height:188px;margin-top:28px;
  border-radius:var(--radius-lg);background:var(--surface);
  box-shadow:0 0 0 1px var(--border-card);overflow:hidden;
}
.chart-frame svg{position:absolute;inset:0;width:100%;height:100%}
.chart-badge{
  position:absolute;display:inline-flex;align-items:center;gap:7px;
  background:var(--surface);border-radius:var(--radius-sm);padding:6px 11px;
  box-shadow:var(--ring-card);
  font-family:var(--font-mono);font-size:11.5px;color:var(--text-primary);
}
.chart-badge--bl{left:16px;bottom:16px}
.chart-badge--tr{right:16px;top:16px;background:var(--brand-050);color:var(--brand-600);box-shadow:none}

/* ── Cartes « notre difference » ───────────────────────────────── */
.diff{min-height:300px}
.diff__legend{display:flex;flex-direction:column;gap:9px;flex:1;min-width:0}
.diff__legend-row{display:flex;align-items:center;gap:9px}
.diff__key{width:9px;height:9px;border-radius:3px;flex:none}
.diff__bar{height:8px;border-radius:4px;background:var(--slate-100);flex:1}
.diff__val{
  flex:none;min-width:34px;text-align:right;
  font-family:var(--font-mono);font-size:var(--text-caption);color:var(--text-tertiary);
}
.diff__ring{display:flex;align-items:center;gap:14px}

/* La marge haute degage le chiffre pose au-dessus : les blocs se
   soulevent de 6 px et viendraient sinon mordre sur la legende. */
.layout-preview{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;height:58px;margin-top:16px}
.layout-preview__block{border-radius:var(--radius-sm);background:var(--brand-600)}
.layout-preview__block--outline{
  background:var(--surface);box-shadow:0 0 0 1px var(--brand-border);
  display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 8px;
}
.layout-preview__block--outline span{height:6px;border-radius:3px;background:var(--slate-200)}
.layout-preview__block--outline span:last-child{width:70%;background:var(--slate-100)}
.layout-preview__row{display:flex;gap:8px;margin-top:8px}
.layout-preview__row div{height:14px;border-radius:var(--radius-xs);background:var(--brand-100)}

.bar-chart{display:flex;align-items:flex-end;gap:12px;height:96px}
.bar-chart__bar{width:20px;border-radius:5px;background:var(--brand-200)}

.timeline{position:relative;height:8px;border-radius:var(--radius-full);background:var(--slate-200);margin-top:22px}
.timeline__fill{position:absolute;inset:0 auto 0 0;width:72%;border-radius:var(--radius-full);background:var(--brand-600)}
.timeline__dot{
  position:absolute;top:-4px;width:16px;height:16px;border-radius:var(--radius-full);
  background:var(--brand-600);box-shadow:0 0 0 4px var(--surface);
}
.timeline__dot--end{background:var(--surface);box-shadow:0 0 0 1px var(--border-strong) inset,0 0 0 4px var(--surface)}
.timeline__labels{
  display:flex;justify-content:space-between;margin-top:16px;
  font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);
}

/* Les deux dernieres cartes de la grille : meme gabarit que les autres,
   leur illustration tient dans le meme filet. */
.equalizer{display:flex;align-items:flex-end;gap:6px;height:96px}
.equalizer > span{width:6px;border-radius:var(--radius-full);background:var(--slate-300);display:block}
.equalizer > span.is-active{background:var(--brand-600)}
/* Largeur fixe, centree dans la carte ; le score se pose dans
   l ouverture de l arc. */
.gauge{position:relative;width:170px;height:104px;margin-inline:auto}
.gauge svg{position:absolute;left:0;top:0;width:170px;height:98px}
.gauge__value{
  position:absolute;left:0;right:0;bottom:0;text-align:center;
}

/* ── Illustrations animees ─────────────────────────────────────── */
/* Chaque animation part de l etat de repos et y revient : en pause, la
   carte est exactement dans son etat normal, rien ne saute au premier
   survol. Un seul interrupteur les commande toutes, --jeu : au survol
   sur grand ecran, en continu sous 810 px ou le survol n existe pas. */
.diff{--jeu:paused;transition:box-shadow .25s ease}
.diff:hover,
.diff:focus-within{--jeu:running;box-shadow:var(--shadow-md)}

/* L Analyse : l anneau tourne, les barres de legende respirent. */
.diff__ring svg{animation:wm-tourne 7s linear infinite}
.diff__bar{transform-origin:left;animation:wm-respire 2.2s ease-in-out infinite}
.diff__legend-row:nth-child(2) .diff__bar{animation-delay:.15s}
.diff__legend-row:nth-child(3) .diff__bar{animation-delay:.3s}

/* Strategie & design : les blocs de la maquette se soulevent. */
.layout-preview__block{animation:wm-souleve 1.9s ease-in-out infinite}
.layout-preview__block:nth-child(2){animation-delay:.13s}
.layout-preview__block:nth-child(3){animation-delay:.26s}

/* Succes prouves : les barres poussent en vague. */
.bar-chart__bar{transform-origin:bottom;animation:wm-pousse 1.7s ease-in-out infinite}
.bar-chart__bar:nth-child(2){animation-delay:.09s}
.bar-chart__bar:nth-child(3){animation-delay:.18s}
.bar-chart__bar:nth-child(4){animation-delay:.27s}
.bar-chart__bar:nth-child(5){animation-delay:.36s}

/* Delais garantis : les jalons pulsent l un apres l autre. */
.timeline__dot{animation:wm-jalon 1.8s ease-in-out infinite}
.timeline__dot:nth-of-type(2){animation-delay:.16s}
.timeline__dot:nth-of-type(3){animation-delay:.32s}
.timeline__dot--end{animation-delay:.48s}

/* Experience fluide : l equaliseur ondule, par vagues de quatre barres.
   Courbe quasi sinusoidale plutot que ease-in-out : le mouvement n a ni
   temps mort en haut ni a-coup en bas, la vague coule. */
.equalizer > span{transform-origin:bottom;animation:wm-onde 2.4s cubic-bezier(.45,0,.55,1) infinite}
.equalizer > span:nth-child(4n+2){animation-delay:.24s}
.equalizer > span:nth-child(4n+3){animation-delay:.48s}
.equalizer > span:nth-child(4n+4){animation-delay:.72s}

/* Suivi transparent : l aiguille redescend puis remonte au score. */
.gauge__arc{stroke-dasharray:140;animation:wm-jauge 2.4s ease-in-out infinite}

/* Declare apres les animations : la forme courte `animation` remet
   sinon l etat de lecture a `running` et l interrupteur ne sert plus. */
.diff__ring svg,
.diff__bar,
.layout-preview__block,
.bar-chart__bar,
.timeline__dot,
.equalizer > span,
.gauge__arc{animation-play-state:var(--jeu)}

@keyframes wm-tourne{to{transform:rotate(360deg)}}
@keyframes wm-respire{50%{transform:scaleX(.62)}}
@keyframes wm-souleve{50%{transform:translateY(-6px)}}
@keyframes wm-pousse{50%{transform:scaleY(.58)}}
@keyframes wm-jalon{40%{transform:scale(1.28)}}
@keyframes wm-onde{50%{transform:scaleY(.6)}}
@keyframes wm-jauge{50%{stroke-dashoffset:44}}

/* Pas de survol sur telephone : les illustrations tournent en continu. */
@media (max-width:809px){
  .diff{--jeu:running}
}

/* Un seul interrupteur a couper pour tout arreter. */
@media (prefers-reduced-motion:reduce){
  .diff,
  .diff:hover,
  .diff:focus-within{--jeu:paused}
}

.mission{
  max-width:34ch;margin-top:28px;
  font-family:var(--font-display);font-size:clamp(20px,2.4vw,28px);
  font-weight:500;letter-spacing:-.03em;line-height:1.35;
}
.mission span{color:var(--text-muted)}

/* ── Process ───────────────────────────────────────────────────── */
/* Vignette d icone a gauche, numero d etape a droite, le tout pose sur
   un papier millimetre : le fond de plan d une maquette de travail.
   Le quadrillage s efface vers le coin haut-gauche pour laisser la
   vignette et le titre au net. */
.step{position:relative;overflow:hidden;min-height:264px;
  background:var(--gradient-card);padding:28px}
.step::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grid-paper);
  background-size:var(--grid-mesh) var(--grid-mesh);
  -webkit-mask-image:linear-gradient(105deg,transparent 20%,#000 70%);
          mask-image:linear-gradient(105deg,transparent 20%,#000 70%);
}
.step > *{position:relative}
.step__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:38px;
}
.step__icon{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:var(--radius-lg);
  background:var(--brand-050);border:1px solid var(--brand-border);
  color:var(--brand-600);
}
.step__icon svg{width:24px;height:24px}
.step__n{
  flex:none;font-family:var(--font-mono);font-size:11.5px;color:var(--brand-600);
  background:var(--surface);border:1px solid var(--border-lavender);
  border-radius:var(--radius-full);padding:7px 14px;
}
.step__title{margin-bottom:10px}

/* ── Comparatif ────────────────────────────────────────────────── */
/* Une barre par opposition, coupee en deux par un filet bleu : le defaut
   des agences classiques a gauche sur le gris plein des cartes, ce que
   nous faisons a la place a droite sur la lueur de marque. Les deux moities
   sont les colonnes d une meme grille : meme hauteur, toujours. */
.versus__heads{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  margin-bottom:20px;
}
.versus__head{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);font-size:18px;font-weight:600;
  color:var(--text-tertiary);text-align:center;
}
.versus__head--brand{color:var(--text-primary)}
.versus__head img{width:24px;height:24px}
/* La pastille est detachee : elle se pose sur la couture des deux
   colonnes, quelle que soit la largeur des titres. */
.versus__vs{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:var(--radius-full);
  background:var(--gradient-brand);color:var(--text-on-dark);
  font-family:var(--font-mono);font-size:13px;box-shadow:var(--shadow-md);
}
.versus__rows{display:flex;flex-direction:column;gap:14px;list-style:none;margin:0;padding:0}
.versus__row{
  display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--border-card);border-radius:var(--radius-lg);
  overflow:hidden;
}
.versus__side{
  display:flex;align-items:center;gap:14px;
  padding:clamp(16px,2vw,24px);
  background:var(--gradient-card);color:var(--text-secondary);
}
.versus__side--new{
  background:var(--gradient-versus);
  border-left:2px solid var(--brand-600);color:var(--text-primary);
}
.versus__icon{
  flex:none;width:26px;height:26px;border-radius:var(--radius-full);
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-chip);color:var(--text-muted);
}
.versus__side--new .versus__icon{background:var(--brand-100);color:var(--brand-600)}
.versus__icon svg{width:15px;height:15px}
.versus__text{font-size:15px;line-height:1.55}
/* Sur large, la colonne dit deja de qui on parle : l etiquette ne sert
   qu aux lecteurs d ecran, pour que chaque moitie se suffise. */
.versus__label{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Sous 810 px les deux moities s empilent : la ligne de titres n a plus
   rien a surmonter, c est l etiquette cachee qui reprend son role. */
@media (max-width:809px){
  .versus__heads{display:none}
  .versus__row{grid-template-columns:1fr}
  .versus__side--new{border-left:0;border-top:2px solid var(--brand-600)}
  .versus__label{
    position:static;display:block;width:auto;height:auto;
    margin:0 0 4px;clip:auto;white-space:normal;
    font-family:var(--font-mono);font-size:var(--text-2xs);
    color:var(--text-tertiary);
  }
  .versus__side--new .versus__label{color:var(--brand-600)}
}

/* ── Integrations (accueil) ────────────────────────────────────── */
/* Le site du client au centre, ses outils autour : une grille de tuiles
   de 3 x 3. Un voile radial efface les cadres vers les bords ; les logos,
   eux, passent par-dessus (z-index) et restent nets — c est l outil qu on
   doit reconnaitre, pas la tuile. Ils gardent donc leurs couleurs, a
   l inverse des logos clients du bandeau. */
.integrations{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--space-12)}
.integrations__visual{position:relative;isolation:isolate;justify-self:center}
.integrations__visual::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(transparent,var(--surface) 75%);
}
.integrations__grid{
  display:grid;grid-template-columns:repeat(3,var(--integration-card));
  gap:var(--integration-gap);list-style:none;margin:0;padding:0;
}
.integrations__card{
  display:flex;align-items:center;justify-content:center;
  width:var(--integration-card);height:var(--integration-card);
  border:1px solid var(--border-strong);border-radius:var(--radius-md);
  background:var(--surface);
}
.integrations__logo{
  position:relative;z-index:2;
  width:var(--integration-logo);height:var(--integration-logo);
}
/* La tuile du centre est le site : cadre de marque et ombre portee. */
.integrations__card--hub{border-color:var(--brand-300);box-shadow:var(--shadow-lg)}
.integrations__text .lead{margin:16px 0 32px;max-width:44ch}

/* Sous 810 px, une seule colonne : chapeau, titre et texte d abord, les
   tuiles juste dessous, le bouton en dernier. Comme dans la section
   Services, le bloc de texte passe en display:contents — ses elements
   deviennent ceux de la colonne et se replacent avec order, sans toucher
   au balisage du desktop. La marge du texte fait l ecart avant les
   tuiles, celle des tuiles l ecart avant le bouton. */
@media (max-width:809px){
  .integrations{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center}
  .integrations__text{display:contents}
  .integrations__visual{order:1;margin-bottom:var(--space-8)}
  .integrations__text .btn{order:2}
}

/* ── Apercus d articles (accueil) ─────────────────────── */
/* Trois cartes qui s empilent au defilement, comme celles de la section
   Services : meme mecanique collante, meme --stack-step, meme --prog pose
   par initStack. La pile est ici pleine largeur, et chaque carte se lit en
   trois colonnes — vignette, texte, puis le temps de lecture et le lien,
   detaches par un filet. Ce filet court sur toute la hauteur de la carte :
   les cases ne sont donc pas centrees par la grille (elles s etirent),
   chacune se recentre elle-meme. */
.digest{display:flex;flex-direction:column;gap:var(--stack-gap)}

/* L ombre n est pas decorative : c est elle qui fait lire l arrivee d une
   carte par-dessus la precedente. Le fond des cartes etant opaque, la
   carte du dessus couvre bien celle d en dessous. */
.digest__card{
  display:grid;
  grid-template-columns:var(--digest-cover) 1fr var(--digest-aside);
  gap:var(--digest-gap);
  box-shadow:var(--shadow-md);
  position:sticky;top:calc(var(--stack-top) + var(--i,0) * var(--stack-step));
  transform-origin:top center;will-change:transform;
  transform:scale(calc(1 - var(--stack-shrink) * var(--prog,0)));
}

.digest__cover{display:block;align-self:center}
.digest__thumb{height:var(--digest-thumb-h)}

.digest__body{align-self:center;min-width:0}
/* Le titre est celui des cartes (.card__title) : seul l ecart avec la
   ligne de categorie au-dessus s ajoute. */
.digest__title{margin-top:var(--space-3)}
.digest__text{
  font-size:var(--text-sm);line-height:var(--lh-sm);color:var(--text-secondary);
}

/* Le bout de carte reprend le chiffre des cartes « notre difference » :
   .stat--end fait deja l alignement a droite, et son flex:1 pousse le
   lien au bas de la colonne. */
.digest__aside{
  display:flex;flex-direction:column;align-items:flex-end;
  justify-content:center;gap:var(--space-4);
  padding-left:var(--digest-gap);
  border-left:1px solid var(--border);
}
.digest__link{
  display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap;
  font-size:var(--text-sm);font-weight:600;color:var(--brand-600);
}
.digest__link svg{width:var(--icon-sm);height:var(--icon-sm);transition:transform .18s ease}
.digest__link:hover svg,.digest__link:focus-visible svg{transform:translateX(3px)}

.digest__more{text-align:center;margin-top:var(--space-9)}

/* Sous 810 px la carte devient une colonne : la vignette prend toute la
   largeur, et le bout de carte repasse a l horizontale sous le texte —
   le filet qui le detachait a gauche le souligne desormais. Le chiffre
   revient a gauche : .stat--end n a plus de bout de ligne a tenir.
   L empilement, lui, est conserve, comme pour les cartes Services. */
@media (max-width:809px){
  /* La carte doit tenir sous --stack-top une fois collee, sinon elle ne se
     pose jamais vraiment sur les petits ecrans : marges resserrees ici,
     et vignette ramenee a 150 px par --digest-thumb-h (tokens.css). */
  .digest__card{grid-template-columns:1fr;gap:var(--space-4);padding:var(--space-5)}
  .digest__aside{
    flex-direction:row;align-items:center;justify-content:space-between;
    padding:var(--space-4) 0 0;
    border-left:0;border-top:1px solid var(--border);
  }
  .digest__aside .stat--end{flex:0 1 auto;align-items:flex-start;text-align:left}
}

/* ── Realisations ──────────────────────────────────────────────── */
/* La vignette garde ses proportions plutot qu une hauteur fixe : la
   meme carte sert la liste (trois colonnes) et le bandeau « Autres
   realisations » des pages projet (quatre colonnes). */
.work__cover{display:block}
.work__thumb{
  display:block;width:100%;height:auto;aspect-ratio:16/10;
  object-fit:cover;border-radius:var(--radius-thumb);
}
.work__body{padding:22px 10px 10px}
.work__title{
  font-family:var(--font-display);font-size:22px;font-weight:500;
  letter-spacing:-.02em;line-height:1.3;margin:16px 0 10px;
}
.work__title a{color:inherit}
.work__title a:hover,.work__title a:focus-visible{color:var(--brand-600)}
.work__link{font-size:15px;font-weight:600;color:var(--brand-600);margin-top:20px;display:inline-block}

/* ── Page de projet (realisation-*.html) ───────────────────────── */
/* Une page par realisation : en-tete, capture de couverture, puis le
   recit (approche, processus, points forts, conclusion) ponctue des
   deux autres captures. Les trois visuels se suivent dans l ordre de
   leur nom de fichier : -1-cover, -2, -3. */
.case-back{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:var(--text-2xs);
  color:var(--text-tertiary);margin-bottom:26px;
}
.case-back svg{width:16px;height:16px}
.case-back:hover,.case-back:focus-visible{color:var(--brand-600)}
.case-tag{margin-bottom:18px}
.case-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px}

/* Fiche du projet : secteur, service, delai — les trois mesures que
   l ancien site posait sous le titre. */
.case-facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-card);
  margin:48px 0 0;padding-top:30px;border-top:1px solid var(--border-card);
}
.case-facts__label{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-muted)}
.case-facts__value{
  margin:8px 0 0;font-family:var(--font-display);font-size:var(--text-h5);
  font-weight:500;color:var(--text-primary);
}

/* Captures et blocs de texte partagent un meme rythme vertical ; la
   couverture, elle, se cale directement sous l en-tete. */
.case-shot{margin:var(--space-20) 0 0}
.case-shot:first-child{margin-top:0}
/* Deux captures de detail ne font que 768 px de large : les agrandir a
   la colonne les rendrait floues. Le cadre se cale sur leur largeur
   native et se centre. La largeur reste sur la figure, pas sur l image,
   pour que le couple width/height reserve la place avant le chargement
   differe — sinon la page sauterait. */
.case-shot--detail{max-width:768px;margin-inline:auto}
.case-shot img{
  display:block;width:100%;height:auto;
  border:1px solid var(--border-card);border-radius:var(--radius-card);
  box-shadow:var(--shadow-lg);
}
.case-block{margin-top:var(--space-20)}
.case-block__title{margin-bottom:22px}
.case-prose{max-width:var(--measure-prose)}

/* Les trois etapes reprennent la pastille des cartes « Notre methode »
   (.step__n) : un seul dessin de pastille pour tout le site. */
.case-steps,.case-wins{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap-card)}
.case-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.case-step__n{align-self:flex-start;margin-bottom:20px}
.case-step__title{margin-bottom:10px}

.case-wins{grid-template-columns:repeat(2,minmax(0,1fr))}
.win{display:flex;gap:16px;align-items:flex-start}
.win__icon{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--radius-full);
  background:var(--brand-050);border:1px solid var(--brand-border);
  color:var(--brand-600);
}
.win__icon svg{width:18px;height:18px}
.win__title{margin-bottom:8px}

/* Les etapes tombent en colonne avant les points forts : leur texte est
   plus long, elles etouffent plus tot. */
@media (max-width:899px){
  .case-steps{grid-template-columns:1fr}
}
@media (max-width:809px){
  .case-facts{grid-template-columns:1fr;gap:22px}
  .case-wins{grid-template-columns:1fr}
}

/* ── Blog ──────────────────────────────────────────────────────── */
.blog-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;margin-top:28px}
.blog-search{
  font-family:var(--font-body);font-size:15px;color:var(--text-primary);
  padding:14px 20px;border-radius:var(--radius-full);
  background:var(--surface);border:1px solid var(--border);
  min-width:240px;flex:1 1 240px;max-width:340px;
}
.blog-search::placeholder{color:var(--text-muted)}
.post__thumb{height:180px}
/* Photos d articles (vignettes, apercus de l accueil, couvertures, photo
   du corps) : des WebP de assets/img/blog/, recadres par leur cadre, dont
   chaque classe fixe deja la hauteur. --focus-y deplace le recadrage
   quand le sujet n est pas au milieu de l image, 50 % sinon. Le fond
   tient la place pendant le chargement. */
.post__thumb,.digest__thumb,.article__cover,.article__shot{
  display:block;width:100%;object-fit:cover;
  object-position:50% var(--focus-y,50%);
  border-radius:var(--radius-thumb);background:var(--surface-muted);
}
.post__body{padding:20px 10px 10px;display:flex;flex-direction:column;flex:1}
.post__meta{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--text-tertiary)}
.post__cat{color:var(--brand-600);font-weight:600}
.post__title{
  font-family:var(--font-display);font-size:20px;font-weight:500;
  letter-spacing:-.02em;line-height:1.35;margin:14px 0 22px;flex:1;
}
.post__title a,.digest__title a{color:inherit}
.post__title a:hover,.post__title a:focus-visible,
.digest__title a:hover,.digest__title a:focus-visible{color:var(--brand-600)}
.post__cover{display:block}
.post__link{font-size:15px;font-weight:600;color:var(--brand-600)}
.section-label{font-family:var(--font-display);font-size:18px;font-weight:600;margin-bottom:24px}


/* ── Article de blog (blogs/<slug>.html) ───────────────────────── */
/* Le texte suivi vit sur la mesure de lecture, pas sur la largeur du
   conteneur : le cadre reste large pour les visuels, la colonne de
   texte se recentre dedans. */
.article__byline{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
  margin-top:26px;
  font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-tertiary);
}

/* Le portrait de l auteur. Le fichier est cadre large — buste, fond
   d atelier — et a cette taille le visage n occuperait qu un coin de
   la pastille. On agrandit donc l image dans un cadre qui deborde,
   cale sur la tete : dans les 768 x 692 d origine, elle tient entre
   x 262-500 et y 55-330. Les trois valeurs ci-dessous amenent son
   centre au centre de la pastille et lui font occuper 73 % de sa
   hauteur — c est une region de 375 px de cote, d ou les 205 %
   (768/375). Au-dessous de 200 % l image ne couvrirait plus le haut
   du cercle : c est la borne, la photo n ayant que 55 px de ciel
   au-dessus des cheveux.
   Recadrer le fichier lui-meme reste preferable le jour ou on peut. */
.article__avatar{
  position:relative;flex:none;
  width:30px;height:30px;
  border-radius:var(--radius-full);overflow:hidden;
  background:var(--surface-muted);
}
.article__avatar img{
  position:absolute;
  width:205%;max-width:none;height:auto; /* max-width:none : base.css plafonne a 100 % */
  left:-52%;top:-1%;
}

/* Trois colonnes : une gouttiere, la colonne de texte, une gouttiere.
   Tout se range au centre par defaut ; ce qui ne se lit pas ligne a
   ligne — un tableau, un visuel — s'etale d'un bord a l'autre. La
   mesure de lecture ne depend donc plus de la largeur du cadre.

   Avec --measure-article a la largeur de l'ancien site, les deux
   gouttieres tombent a zero et tout s'aligne : c'est voulu. La grille
   reste, elle permet de resserrer le texte plus tard sans avoir a
   restructurer le balisage. */
.article-prose{
  display:grid;
  grid-template-columns:
    [large-debut] minmax(0,1fr)
    [texte-debut] min(var(--measure-article),100%) [texte-fin]
    minmax(0,1fr) [large-fin];
  font-size:var(--text-lg);line-height:var(--lh-lg);color:var(--text-secondary);
}
.article-prose > *{grid-column:texte-debut/texte-fin}
.article-prose > .article-table,
.article-prose > .article__shot{grid-column:large-debut/large-fin}
/* Un seul rythme vertical : chaque bloc pousse le suivant. Les titres
   reprennent la main plus bas, ils ouvrent une section. */
.article-prose > * + *{margin-top:var(--space-5)}
.article-prose h2,.article-prose h3{
  font-family:var(--font-display);color:var(--text-primary);text-wrap:balance;
}
.article-prose h2{
  font-size:var(--text-prose-h2);font-weight:500;
  line-height:var(--lh-h3);letter-spacing:var(--ls-h3);
  margin-top:var(--space-12);
}
.article-prose h3{
  font-size:var(--text-prose-h3);font-weight:600;
  line-height:var(--lh-h4);letter-spacing:var(--ls-h4);
  margin-top:var(--space-8);
}
.article-prose strong{color:var(--text-primary);font-weight:600}
/* Un lien au fil du texte se souligne : dans un paragraphe, la couleur
   seule ne suffit pas a le distinguer. Ailleurs sur le site les liens
   sont des boutons ou des titres, le contexte fait le travail. */
.article-prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.article-prose a:hover{text-decoration-thickness:2px}
.article-prose ul,.article-prose ol{margin:0;padding-left:1.4em}
.article-prose li + li{margin-top:var(--space-3)}
.article-prose li::marker{color:var(--brand-600)}

/* Sur petit ecran le tableau ne tient toujours pas : il defile dans
   son cadre. Celui-ci porte un tabindex dans le HTML, sinon la zone
   serait inatteignable au clavier. */
.article-table{
  overflow-x:auto;margin-top:var(--space-8);
  border:1px solid var(--border-card);border-radius:var(--radius-card);
}
.article-prose table{width:100%;min-width:620px;border-collapse:collapse;font-size:var(--text-sm)}
.article-prose th,.article-prose td{
  padding:14px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--border-card);
}
.article-prose tr:last-child td{border-bottom:0}
.article-prose th{
  font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:400;
  color:var(--text-muted);background:var(--surface-subtle);
}

/* Les reperes de visuels. Ils tiennent la place des images tant que
   celles-ci ne sont pas fournies ; leur brief attend en commentaire
   dans le HTML, juste au-dessus. */
.article__cover{height:clamp(220px,34vw,420px);margin-bottom:var(--space-12)}
.article__shot{height:clamp(200px,30vw,360px);margin:var(--space-12) 0}

/* ── Page legale (politique-de-confidentialite.html) ───────── */
/* Colonne etroite et alignee a gauche, mesure relevee sur l'ancien
   site. Rien de commun avec le corps d'un article : on ne lit pas une
   mention legale d'un trait, on y cherche un paragraphe. */
.legal-maj{
  margin-top:20px;
  font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-tertiary);
}
.legal-prose{
  max-width:var(--measure-legal);margin-inline:auto;
  font-size:var(--text-md);line-height:var(--lh-md);color:var(--text-secondary);
}
.legal-prose > * + *{margin-top:var(--space-4)}
.legal-prose h2{
  font-family:var(--font-display);font-size:var(--text-h4);font-weight:600;
  line-height:var(--lh-h4);letter-spacing:var(--ls-h4);color:var(--text-primary);
  margin-top:var(--space-9);
}
.legal-prose strong{color:var(--text-primary);font-weight:600}
.legal-prose ul{margin:0;padding-left:1.4em}
.legal-prose li + li{margin-top:var(--space-3)}
.legal-prose li::marker{color:var(--brand-600)}
/* Une adresse e-mail au fil du texte : la couleur seule ne suffit pas
   a la reperer, c'est la meme regle que dans un article. */
.legal-prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.legal-prose a:hover{text-decoration-thickness:2px}

/* ── Contact ───────────────────────────────────────────────────── */
/* Pastille d icone des cartes : un picto au trait, du meme dessin que les
   reseaux du pied de page (24 x 24, currentColor, 1,6). */
.contact-card__icon{
  width:38px;height:38px;border-radius:var(--radius-sm);
  background:var(--brand-050);display:flex;align-items:center;justify-content:center;
  color:var(--brand-600);
}
.contact-card__icon svg{width:var(--icon-md);height:var(--icon-md)}
.contact-card__title{
  font-family:var(--font-display);font-size:22px;font-weight:500;
  letter-spacing:-.02em;margin:22px 0 8px;
}
.contact-card__text{margin-bottom:22px}
.contact-card__note{font-family:var(--font-mono);font-size:12.5px;color:var(--text-tertiary);margin-top:18px}

/* ── Respirations mobiles ──────────────────────────────────────── */
/* L en-tete a ses propres mesures dans components.css : on n y touche pas ici. */
@media (max-width:809px){
  /* Une colonne, et l empilement des cartes est conserve. L intro passe
     en display:contents : ses trois elements deviennent des cases de la
     grille, ce qui permet de centrer le chapeau et le titre puis de
     faire descendre la phrase de mission sous les cartes — sans la
     sortir du bloc colle du desktop, ou elle suit le titre. */
  .services{grid-template-columns:1fr;gap:18px}
  .services__intro{display:contents}
  .services .eyebrow{order:1;justify-self:center;margin-bottom:0}
  .services .h2{order:2;text-align:center}
  .services__stack{order:3;margin-top:14px}
  .services .mission{order:4;justify-self:center;text-align:center}

  .showcase{margin-top:40px;padding-bottom:56px}
  .showcase__caption{margin-top:12px;font-size:var(--text-2xs)}
}
@media (max-width:640px){
  .hero__inner{padding-top:64px}
}