/*
Theme Name: Réolys Creative
Theme URI: https://reolys.com
Author: Réolys Creative
Author URI: https://reolys.com
Description: Thème sur mesure pour Réolys Creative — brand studio & agence de communication 360°. Landing page à sections (hero, défis, expertises, méthode, projets, engagement, CTA, FAQ), projets et FAQ gérés depuis l'administration.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: reolys
Tags: one-page, custom-logo, custom-menu, featured-images, translation-ready, threaded-comments
*/

/* ============================================================
   RÉOLYS CREATIVE — feuille de style du thème
   Sommaire
     1 → 15 : design system de la landing page
     16     : pages internes (blog, page, projet, 404, commentaires)
     17     : ajustements WordPress (admin bar, alignements, légendes)
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --violet:        #5b2689;
  --violet-light:  #cf75fc;
  --orange:        #ff5b3f;
  --cream:         #eae9d9;

  --violet-deep:   #3a1758;
  --violet-mid:    #7c33bb;
  --orange-dark:   #e8462a;

  --ink:           #0a0510;
  --ink-2:         #0d0715;
  --line:          rgba(234,233,217,.13);
  --line-soft:     rgba(234,233,217,.08);

  --text:          #ffffff;
  --text-soft:     rgba(234,233,217,.62);
  --text-mute:     rgba(234,233,217,.40);
  --text-ink:      #1a1020;

  --font-display: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "Space Grotesk", ui-monospace, "SF Mono", Menlo, monospace;

  --shell:  1280px;
  --gut:    clamp(20px, 5.2vw, 72px);
  --r-card: 26px;
  --r-pill: 999px;

  /* Géométrie de la barre flottante, source unique de vérité : le panneau du
     menu mobile s'y accroche et les ancres s'en servent comme dégagement.
     Hauteur = padding vertical (12px × 2) + le plus haut de ses enfants,
     le logo ou le burger (44px, plancher tactile). */
  --header-top: clamp(14px, 2.9vw, 45px);
  --header-x:   clamp(12px, 4vw, 62px);
  --header-h:   calc(24px + max(clamp(38px, 3.7vw, 58px), 44px));

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* le header est fixe : sans cela une ancre dépose le titre de section
     dessous, caché par la barre */
  scroll-padding-top:calc(var(--header-top) + var(--header-h) + 16px);
}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-display);
  font-size:16px; line-height:1.7; font-weight:300;
  -webkit-font-smoothing:antialiased;
  /* clip (et non hidden) : hidden ferait du body un conteneur de défilement
     et casserait le position:sticky des cartes projets */
  overflow-x:clip;
}
@supports not (overflow-x: clip){
  body{ overflow-x:hidden; }
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
::selection{ background:var(--violet-light); color:var(--text-ink); }
:focus-visible{ outline:2px solid var(--violet-light); outline-offset:3px; border-radius:6px; }

.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--orange); color:#fff; padding:12px 20px; }
.skip-link:focus{ left:0; }

/* ---------- 3. Primitives ---------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }
.section{ position:relative; padding:clamp(70px, 8.5vw, 128px) 0; }

/* pastille de section : pilule à contour orange, texte blanc */
.tag{
  display:inline-block;
  font-family:var(--font-display);
  font-size:clamp(10px, .98vw, 13px);
  font-weight:400;
  letter-spacing:.045em;
  text-transform:uppercase;
  color:#fff;
  border:1px solid var(--orange);
  border-radius:var(--r-pill);
  background:rgba(22,12,30,.45);
  padding:7px 20px;
  margin-bottom:clamp(14px, 1.5vw, 20px);
  white-space:nowrap;
}

.h2{
  font-size:clamp(32px, 4.6vw, 62px);
  line-height:1.08;
  font-weight:700;
  letter-spacing:-.03em;
  margin-bottom:clamp(20px, 2.6vw, 34px);
}
.h2 em{ font-style:normal; color:var(--violet-light); }
/* titre à deux niveaux : ligne 1 grasse et violette, ligne 2 ~30 % plus petite,
   fine et blanche (cf. « Des réalisations / qui parlent d'elles-même ») */
.h2-stack{ display:flex; flex-direction:column; }
.h2-stack em{ font-weight:700; }
.h2-stack span{
  color:#fff;
  font-weight:300;
  font-size:.7em;
  letter-spacing:-.02em;
  margin-top:.06em;
}

/* boutons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 30px;
  border-radius:var(--r-pill);
  font-size:14.5px; font-weight:400; letter-spacing:-.005em;
  white-space:nowrap;
  transition:transform .35s var(--ease), background-color .3s, border-color .3s, color .3s, box-shadow .35s;
}
.btn-primary{ background:var(--orange); color:#fff; box-shadow:0 12px 32px -14px rgba(255,91,63,.85); }
.btn-primary:hover{ background:var(--orange-dark); transform:translateY(-2px); }
.btn-ghost{ border:1px solid var(--line); color:var(--cream); }
.btn-ghost:hover{ border-color:rgba(234,233,217,.4); transform:translateY(-2px); }
.btn-outline-dark{ border:1px solid rgba(26,16,32,.28); color:var(--text-ink); }
.btn-outline-dark:hover{ background:var(--text-ink); color:var(--cream); border-color:var(--text-ink); }
.btn-sm{ padding:10px 22px; font-size:13px; }
.btn-lg{ padding:17px 44px; font-size:15.5px; }

/* ---------- 4. Header ---------- */
/* barre flottante : pilule arrondie détachée des bords,
   dégradé horizontal violet → anthracite + grain */
.site-header{
  position:fixed; z-index:100;
  top:var(--header-top);
  left:var(--header-x);
  right:var(--header-x);
  padding:12px 0;
  /* extrémités semi-circulaires : pilule pleine, pas un rectangle arrondi */
  border-radius:var(--r-pill);
  background:linear-gradient(90deg,
    #5f3090 0%,
    #5a2d88 22%,
    #4e2778 40%,
    #3a2154 56%,
    #241a2e 72%,
    #16121c 88%,
    #131017 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 24px 60px -34px rgba(0,0,0,.9);
  transition:padding .4s var(--ease), box-shadow .4s var(--ease);
}
/* grain sablé : bruit fractal SVG en surimpression.
   color-interpolation-filters='sRGB' est indispensable — en linearRGB (défaut)
   le bruit ressort à une moyenne de 187/255 et délave la barre au lieu de la
   texturer. Ici : gris opaque centré sur 128, contraste réglé par le `slope`
   du feComponentTransfer, donc `overlay` ne change que le relief. */
.site-header::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:.68;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.6' intercept='-.8'/%3E%3CfeFuncG type='linear' slope='2.6' intercept='-.8'/%3E%3CfeFuncB type='linear' slope='2.6' intercept='-.8'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.site-header.is-stuck{
  box-shadow:0 26px 64px -30px rgba(0,0,0,.95);
}

/* la barre n'est pas bornée par la largeur du .shell : elle suit ses inserts */
.header-inner{ display:flex; align-items:center; position:relative; z-index:1; }
.site-header .shell{ max-width:none; padding-inline:clamp(16px, 2.8vw, 43px); }
.brand{ flex:none; margin-right:auto; }
.brand-logo{ height:clamp(38px, 3.7vw, 58px); width:auto; }

/* nav : liens nus en capitales, police display, blancs */
.nav{
  display:flex; align-items:center;
  gap:clamp(12px, .8vw, 13px);
  margin-right:clamp(22px, 8.79vw, 137px);
}
.nav > a:not(.btn){
  font-family:var(--font-display);
  font-size:clamp(12.5px, 1.29vw, 20.5px);
  font-weight:400;
  letter-spacing:.012em;
  text-transform:uppercase;
  color:#fff;
  position:relative;
  padding:5px 0;
  transition:color .28s;
}
.nav > a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1.5px; background:var(--violet-light);
  transform:scaleX(0); transform-origin:right;
  transition:transform .38s var(--ease);
}
.nav > a:not(.btn):hover{ color:var(--violet-light); }
.nav > a:not(.btn):hover::after{ transform:scaleX(1); transform-origin:left; }
.nav > a:not(.btn).is-active::after{ transform:scaleX(1); }
.nav-cta-mobile{ display:none; }

.header-actions{ display:flex; align-items:center; gap:12px; flex:none; }
/* CTA du header : pilule orange plus généreuse que le .btn-sm générique */
.header-actions .btn{
  padding:12px clamp(20px, 2.3vw, 34px);
  font-size:clamp(13px, 1.07vw, 17px);
  font-weight:600;
  line-height:1.15;
  letter-spacing:.01em;
  word-spacing:.22em;
  background:linear-gradient(180deg, #ff6d52 0%, var(--orange) 55%, #f74d30 100%);
  box-shadow:0 10px 30px -8px rgba(255,91,63,.75);
}
.header-actions .btn:hover{ background:linear-gradient(180deg, #ff7d64 0%, #ff5f44 55%, #ef4526 100%); }

/* 44px : plancher de cible tactile (WCAG 2.5.8). Les trois barres gardent
   leur géométrie propre, les rotations restent donc valables. */
.burger{ display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; padding:0 11px; }
.burger span{ display:block; height:1.4px; background:var(--cream); margin:4px 0; border-radius:2px; transition:transform .35s var(--ease), opacity .25s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.4px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.4px) rotate(-45deg); }

/* Voile derrière le panneau du menu : injecté par main.js, il ferme au tap
   hors du menu — le raccourci Échap n'existe pas sur mobile.
   z-index 99 : sous le header (100), donc sous le panneau qui en est issu. */
.nav-backdrop{
  position:fixed; inset:0; z-index:99;
  background:rgba(6,3,10,.6);
  /* bloque le défilement au doigt là où `overflow:hidden` sur body ne suffit
     pas toujours (WebKit iOS) */
  touch-action:none;
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s;
}
.nav-backdrop.is-open{ opacity:1; visibility:visible; }
/* le fond ne défile plus derrière le panneau ouvert */
body.nav-open{ overflow:hidden; }

/* ---------- 5. Hero ---------- */
.hero{
  position:relative;
  padding-top:clamp(130px, 15vw, 190px);
  overflow:hidden;
  background:linear-gradient(180deg, #1d0b33 0%, #170a26 55%, var(--ink) 100%);
}
.hero-aura{
  position:absolute; left:30%; top:-46%;
  width:min(1620px, 168vw); aspect-ratio:1/1;
  transform:translateX(-50%);
  background:radial-gradient(circle,
    rgba(140,60,208,.95) 0%,
    rgba(114,48,171,.62) 21%,
    rgba(94,39,143,.35) 37%,
    rgba(78,32,119,.17) 53%,
    rgba(62,26,95,.06) 69%,
    transparent 82%);
  filter:blur(40px);
  pointer-events:none;
}
.hero-mesh{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(234,233,217,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(234,233,217,.045) 1px, transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(90% 60% at 40% 15%, #000 20%, transparent 72%);
  -webkit-mask-image:radial-gradient(90% 60% at 40% 15%, #000 20%, transparent 72%);
  pointer-events:none;
}
.hero-inner{ position:relative; z-index:2; padding-bottom:clamp(58px, 7vw, 96px); }

/* pastille du hero : plus grande, texte blanc, contour orange (cf. maquette) */
.hero .tag{
  font-family:var(--font-display);
  font-size:clamp(11px, 1vw, 15.7px);
  font-weight:400;
  letter-spacing:.09em;
  line-height:1.15;
  color:#fff;
  border-color:var(--orange);
  border-radius:var(--r-pill);
  padding:5px clamp(14px, 1.6vw, 25px);
  margin-bottom:clamp(30px, 4.6vw, 72px);
}

/* preuve sociale */
.proof{ display:flex; align-items:center; gap:clamp(10px, 1.3vw, 20px); margin-bottom:6px; }
/* décalage horizontal repris de la maquette */
.proof{ margin-left:clamp(0px, 7.6vw, 119px); }
.proof-avatars{ display:flex; --av:clamp(32px, 3.6vw, 56px); }
.av{
  width:var(--av); height:var(--av); border-radius:50%;
  border:2px solid rgba(20,6,2,.32);
  margin-right:calc(var(--av) * -.76);
  background:linear-gradient(140deg, #ff6a4a, var(--orange) 60%, var(--orange-dark));
}
.av-4{ margin-right:0; }
.proof-text p{
  font-size:clamp(12px, 1.25vw, 20px);
  font-weight:400;
  color:#fff;
  letter-spacing:.005em;
  line-height:1.25;
}
.stars{ display:flex; gap:clamp(1.5px, .26vw, 4px); margin-bottom:clamp(3px, .4vw, 6px); }
.stars svg{ width:clamp(12px, 1.6vw, 25px); height:clamp(12px, 1.6vw, 25px); fill:#ffc93c; }

.hero-title{
  font-size:clamp(36px, 4.9vw, 76px);
  line-height:1.22;
  font-weight:500;
  letter-spacing:-.012em;
  max-width:17ch;
  margin-bottom:clamp(18px, 2.25vw, 35px);
}
.hero-lead{
  max-width:23.5em;
  color:rgba(255,255,255,.9);
  font-size:clamp(15px, 1.92vw, 30px);
  line-height:1.29;
  margin-bottom:clamp(24px, 3.15vw, 49px);
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:clamp(10px, 1.35vw, 21px); }
/* boutons du hero : plus généreux que le .btn générique (cf. maquette) */
.hero-cta .btn{
  padding:clamp(13px, 1.65vw, 17px) clamp(26px, 3vw, 47px);
  font-size:clamp(14px, 1.05vw, 16px);
  font-weight:500;
  line-height:1.15;
}

/* bandeau logos */
.logos{
  position:relative; z-index:2;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:rgba(10,5,16,.55);
  padding:20px 0;
}
.logos-track{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(14px, 2.6vw, 40px);
  flex-wrap:wrap;
}
.client{
  font-family:var(--font-mono);
  font-size:clamp(12px, 1.25vw, 16px);
  font-weight:600;
  letter-spacing:.04em;
  color:var(--cream);
  opacity:.42;
  transition:opacity .3s;
  white-space:nowrap;
}
.client:hover{ opacity:.9; }
.client-script{ font-family:Georgia, "Times New Roman", serif; font-style:italic; font-size:1.25em; }
.client-boxed{ border:1.5px solid currentColor; border-radius:4px; padding:3px 8px; font-size:.78em; }

/* ---------- 6. Douleur du client ---------- */
/* Le fond de section est légèrement remonté par rapport au noir de la page,
   avec un halo violet côté droit qui éclaire progressivement les 4 cartes. */
.section-pain{
  background:
    radial-gradient(56% 66% at 74% 56%, rgba(124,51,187,.34) 0%, transparent 66%),
    linear-gradient(180deg,
      rgba(48,34,66,0)   0%,
      rgba(48,34,66,.50) 18%,
      rgba(48,34,66,.50) 80%,
      rgba(48,34,66,0)  100%);
}
.pain-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px, 4vw, 56px);
  align-items:start;
}
.pain-copy p{
  color:rgba(255,255,255,.92);
  font-size:clamp(15.5px, 1.85vw, 24px);
  line-height:1.35;
  font-weight:300;
  max-width:38ch;
}

/* 4 cartes translucides : le halo de section transparaît au travers,
   ce qui rend la carte bas-droite nettement plus lumineuse que la haut-gauche */
.pain-panel{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(14px, 1.7vw, 21px);
}
.pain-panel::before{
  content:"";
  position:absolute; inset:-14%;
  background:radial-gradient(52% 52% at 64% 72%,
    rgba(150,66,215,.55) 0%,
    rgba(91,38,137,.24) 46%,
    transparent 72%);
  filter:blur(46px);
  pointer-events:none;
}
.pain-panel > li{
  position:relative;
  display:flex; flex-direction:column;
  gap:clamp(6px, .7vw, 10px);
  min-height:clamp(148px, 14.5vw, 196px);
  padding:clamp(18px, 2vw, 26px);
  border-radius:clamp(20px, 2.4vw, 30px);
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(145deg,
    rgba(120,56,175,.34) 0%,
    rgba(88,40,132,.30) 48%,
    rgba(142,70,205,.44) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.pain-panel h3{
  font-size:clamp(14px, 1.25vw, 17.5px);
  font-weight:600; line-height:1.25; letter-spacing:-.01em;
  color:#fff;
}
.pain-panel p{
  font-size:clamp(12.5px, 1.02vw, 14px);
  line-height:1.5; font-weight:300;
  color:rgba(255,255,255,.74);
}

/* transition vers la section suivante, juste au-dessus du slider */
.pain-next{
  margin-top:clamp(34px, 4.4vw, 62px);
  font-family:var(--font-mono);
  font-size:clamp(11px, 1vw, 13px);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--violet-light);
}
.pain-next span{ display:inline-block; margin-left:5px; }

/* slider */
.slider{
  display:flex; align-items:center; gap:0;
  margin-top:clamp(44px, 5.5vw, 78px);
}
/* le micro-texte porte déjà l'écart : le slider se rapproche */
.pain-next + .slider{ margin-top:clamp(14px, 1.6vw, 22px); }
.slider-bar{
  flex:0 0 0;
  height:13px;
  border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--violet) 0%, var(--violet-light) 100%);
  transition:flex-basis 1.1s var(--ease) .25s;
}
.slider.is-in .slider-bar{ flex-basis:clamp(120px, 21%, 300px); }
.slider-rail{
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(207,117,252,.35), rgba(234,233,217,.14));
}
.slider-go{
  flex:none;
  width:clamp(38px, 3.6vw, 48px); aspect-ratio:1/1;
  border-radius:50%;
  background:var(--orange);
  display:grid; place-items:center;
  box-shadow:0 12px 30px -12px rgba(255,91,63,.9);
  transition:transform .35s var(--ease), background-color .3s;
}
.slider-go:hover{ transform:scale(1.08) rotate(8deg); background:var(--orange-dark); }
.slider-go svg{
  width:42%; height:42%;
  fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- 7. Expertises ---------- */
.split{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(24px, 4vw, 70px);
  align-items:start;
  margin-bottom:clamp(36px, 4.5vw, 58px);
}
.split .h2{ margin-bottom:0; }
.split-lead{ color:var(--text-soft); font-size:14.5px; line-height:1.75; padding-top:32px; }

/* accordéons */
.accordion{ border-top:1px solid var(--line-soft); }
.acc-item{ border-bottom:1px solid var(--line-soft); }
.acc-head{
  display:flex; align-items:center; gap:clamp(16px, 4vw, 60px);
  width:100%; text-align:left;
  padding:clamp(17px, 2.2vw, 26px) 2px;
}
.acc-num{
  flex:none; min-width:24px;
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.1em;
  color:var(--violet-light); opacity:.85;
}
.acc-title{
  flex:1;
  font-size:clamp(15px, 1.85vw, 23px);
  font-weight:500;
  letter-spacing:.005em;
  text-transform:uppercase;
  transition:color .3s, transform .4s var(--ease);
}
.acc-head:hover .acc-title{ color:var(--violet-light); transform:translateX(6px); }

.acc-arrow{ flex:none; width:20px; height:20px; opacity:.55; transition:transform .45s var(--ease), opacity .3s; }
.acc-arrow svg{ width:100%; height:100%; fill:none; stroke:var(--cream); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.acc-head:hover .acc-arrow{ opacity:1; }
.acc-item.is-open .acc-arrow{ transform:rotate(-90deg); opacity:1; }
.acc-item.is-open .acc-arrow svg{ stroke:var(--violet-light); }

.acc-plus{ position:relative; flex:none; width:14px; height:14px; }
.acc-plus::before,.acc-plus::after{
  content:""; position:absolute; top:50%; left:0; right:0;
  height:1.5px; background:var(--cream); border-radius:2px;
  transform:translateY(-50%); transition:transform .4s var(--ease), background-color .3s;
}
.acc-plus::after{ transform:translateY(-50%) rotate(90deg); }
.acc-item.is-open .acc-plus::after{ transform:translateY(-50%) rotate(0); }
.acc-item.is-open .acc-plus::before,
.acc-item.is-open .acc-plus::after{ background:var(--violet-light); }

.acc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.acc-item.is-open .acc-body{ grid-template-rows:1fr; }
.acc-body-inner{ overflow:hidden; }
.acc-body-inner > p{
  color:var(--text-soft); font-size:14.5px; max-width:66ch;
  padding:0 0 20px clamp(40px, 6vw, 84px);
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; padding:0 0 24px clamp(40px, 6vw, 84px); }
.chips li{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.06em;
  padding:5px 12px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  color:var(--violet-light);
}

/* FAQ : rangées plus compactes, titres en casse normale */
.accordion-faq .acc-head{ padding:clamp(13px, 1.5vw, 17px) 2px; gap:clamp(12px, 1.6vw, 20px); }
.accordion-faq .acc-title{
  text-transform:none;
  font-size:clamp(13.5px, 1.25vw, 16px);
  font-weight:300;
  color:var(--text-soft);
}
.accordion-faq .acc-head:hover .acc-title{ color:#fff; transform:translateX(4px); }
.accordion-faq .acc-item.is-open .acc-title{ color:#fff; }
.accordion-faq .acc-body-inner > p{ padding-left:clamp(26px, 3vw, 34px); }

/* ---------- 8. Méthode (bento) ---------- */
/* les rangées ont un plancher (rythme de la maquette) mais s'étirent
   si le texte de l'étape déborde */
.bento{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  grid-template-rows:
    minmax(clamp(170px, 15vw, 215px), auto)
    minmax(clamp(140px, 12vw, 172px), auto)
    minmax(clamp(150px, 13vw, 190px), auto);
  gap:clamp(12px, 1.3vw, 18px);
  margin-top:clamp(30px, 3.6vw, 46px);
}
.bento-card{
  background:var(--cream);
  color:var(--text-ink);
  border-radius:var(--r-card);
  padding:clamp(20px, 2.3vw, 32px);
  display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(14px, 1.6vw, 24px);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.bento-card:hover{ transform:translateY(-5px); box-shadow:0 34px 70px -40px rgba(124,51,187,.9); }
.bento-a{ grid-column:1; grid-row:1; }
.bento-b{ grid-column:1; grid-row:2; }
.bento-c{ grid-column:2; grid-row:1 / span 2; }
.bento-d{ grid-column:1 / span 2; grid-row:3; }

.bento-num{
  font-family:var(--font-mono);
  font-size:clamp(32px, 3.6vw, 50px);
  font-weight:700; line-height:1;
  color:var(--violet-light);
}
.bento-b .bento-num,
.bento-c .bento-num,
.bento-d .bento-num{ color:rgba(91,38,137,.32); }
.bento-txt{ display:flex; flex-direction:column; gap:clamp(5px, .6vw, 9px); }
.bento-card h3{
  font-size:clamp(15px, 1.4vw, 19px);
  font-weight:600; letter-spacing:-.01em;
  color:rgba(26,16,32,.88);
}
.bento-card p{
  font-size:clamp(12.5px, 1.05vw, 14.5px);
  line-height:1.55; font-weight:300;
  color:rgba(26,16,32,.62);
  max-width:52ch;
}

/* ---------- 9. Projets ---------- */
/* Deck de cartes empilées : chaque carte se fige au centre du viewport,
   la suivante glisse par-dessus pendant que les précédentes reculent
   (recul piloté par --stack-d, mis à jour au scroll dans main.js). */
.projets-lead{
  max-width:56ch;
  color:var(--text-soft);
  font-size:clamp(14px, 1.2vw, 16.5px);
  line-height:1.7;
}

.stack{
  /* flex + gap plutôt que des marges : une marge sur une carte sticky rogne
     d'autant sa plage d'épinglage, alors qu'un gap allonge la content box
     du conteneur — c'est elle qui borne le sticky */
  display:flex;
  flex-direction:column;
  gap:clamp(26px, 3.2vw, 44px);
  margin-top:clamp(28px, 3.4vw, 44px);

  --stack-top:  110px;   /* recalculé en JS pour centrer la carte épinglée */
  --stack-lift: -26px;   /* remontée par niveau de profondeur */
  --stack-shrink: .05;   /* réduction d'échelle par niveau */
  --stack-dim: .05;      /* assombrissement par niveau */
}
/* réserve de défilement : sans elle la dernière carte, dont le bas touche
   celui de la content box, ne pourrait jamais rester épinglée */
.stack::after{
  content:"";
  flex:none;
  height:min(16vh, 160px);
}
/* le deck apparaît d'un bloc (et sans translation : un transform sur
   l'ancêtre perturberait le sticky des cartes) — sinon des cartes déjà
   empilées resteraient translucides et se traverseraient */
.stack.reveal{ transform:none; }

/* repli posé par le JS quand l'épinglage n'a pas la place de se jouer :
   viewport trop court, ou carte dont le bas serait rogné une fois figée */
.stack.is-flat::after{ display:none; }
.stack.is-flat .work{ position:static; }
.stack.is-flat .work-inner{ transform:none; box-shadow:none; }
.stack.is-flat .work-inner::after{ display:none; }

.work{
  position:sticky;
  top:var(--stack-top);
}
/* le JS neutralise le sticky le temps de mesurer les positions naturelles */
.stack.is-measuring .work{ position:static; }

.work-inner{
  --stack-d:0;
  position:relative;
  display:grid;
  grid-template-columns:1fr .78fr;
  gap:clamp(22px, 3.2vw, 48px);
  align-items:center;
  background:#f2f0e7;
  color:var(--text-ink);
  border-radius:clamp(24px, 2.6vw, 34px);
  padding:clamp(26px, 3.4vw, 50px);
  transform:translateY(calc(var(--stack-d) * var(--stack-lift)))
            scale(calc(1 - var(--stack-d) * var(--stack-shrink)));
  box-shadow:0 -18px 50px -28px rgba(10,5,16,.7);
  will-change:transform;
}
/* voile de profondeur sur les cartes passées en arrière-plan */
.work-inner::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:var(--ink);
  opacity:calc(var(--stack-d) * var(--stack-dim));
  pointer-events:none;
}
.work-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--orange);
  margin-bottom:14px;
}
.work-body h3{
  font-size:clamp(20px, 2.3vw, 32px);
  font-weight:600; line-height:1.16; letter-spacing:-.02em;
  color:var(--violet);
  margin-bottom:14px;
}
.work-body p{ font-size:14px; line-height:1.7; color:rgba(26,16,32,.62); max-width:42ch; margin-bottom:22px; }
.work-media{ border-radius:16px; overflow:hidden; aspect-ratio:4/3; background:#d8d6c4; }
.work-media img{ width:100%; height:100%; object-fit:cover; }

/* 2 rectangles de chiffres clés sous le descriptif */
.work-stats{
  display:flex; flex-wrap:wrap;
  gap:clamp(10px, 1.1vw, 14px);
  margin-bottom:clamp(20px, 2.2vw, 28px);
}
.work-stats li{
  flex:1 1 130px; max-width:200px;
  padding:clamp(11px, 1.2vw, 16px) clamp(13px, 1.4vw, 19px);
  border-radius:14px;
  border:1px solid rgba(26,16,32,.13);
  background:rgba(255,255,255,.55);
}
.work-stats b{
  display:block;
  font-family:var(--font-mono);
  font-size:clamp(19px, 1.9vw, 26px);
  font-weight:700; line-height:1.1;
  color:var(--violet);
}
.work-stats span{
  display:block; margin-top:3px;
  font-size:11px; line-height:1.35; letter-spacing:.03em;
  color:rgba(26,16,32,.55);
}

.projets-cta{ display:flex; justify-content:center; margin-top:clamp(24px, 3vw, 40px); }

/* ---------- 10. Agence (Vision / Mission) ---------- */
/* fond neutre légèrement remonté (gris chaud), fondu haut/bas pour éviter la couture */
.section-agence{
  background:linear-gradient(180deg,
    rgba(44,41,48,0)   0%,
    rgba(44,41,48,.55) 16%,
    rgba(44,41,48,.55) 82%,
    rgba(44,41,48,0)  100%);
}
.agence-grid{
  display:grid;
  grid-template-columns:1.57fr 1fr;
  gap:clamp(28px, 3.6vw, 52px);
  align-items:center;
  margin-top:clamp(26px, 3.2vw, 46px);
}
.vm{ margin-bottom:clamp(26px, 3.4vw, 46px); }
.vm:last-child{ margin-bottom:0; }
.vm h3{
  font-size:clamp(21px, 2.6vw, 34px);
  font-weight:700; letter-spacing:-.025em;
  margin-bottom:clamp(8px, .9vw, 12px);
}
/* filet violet sous chaque intitulé, sur toute la largeur de la colonne */
.vm h3::after{
  content:"";
  display:block;
  height:1.5px;
  margin-top:clamp(7px, .8vw, 11px);
  background:linear-gradient(90deg, var(--violet-light) 0%, rgba(124,51,187,.55) 65%, rgba(124,51,187,.18) 100%);
}
.vm p{
  color:rgba(255,255,255,.88);
  font-size:clamp(14px, 1.35vw, 17.5px);
  line-height:1.5;
  font-weight:300;
  text-align:justify;
  text-wrap:pretty;
}

/* Portrait : deux rectangles arrondis inclinés d'angles différents.
   L'écart de rotation fait dépasser l'orange en bas-gauche et en haut-droite,
   exactement comme sur la maquette — ajuster les deux rotate() pour doser. */
.agence-photo{
  position:relative;
  width:100%; max-width:360px;
  margin-inline:auto;
  aspect-ratio:7 / 10;
}
.agence-photo::before{
  content:"";
  position:absolute; inset:0;
  border-radius:clamp(24px, 3.4vw, 38px);
  background:var(--orange);
  transform:rotate(-2.4deg) translate(-9px, 7px);
  box-shadow:0 44px 90px -46px rgba(255,91,63,.7);
}
.agence-photo img{
  position:relative;
  width:100%; height:100%;
  object-fit:cover; object-position:center 18%;
  border-radius:clamp(24px, 3.4vw, 38px);
  transform:rotate(2deg);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}

/* ---------- 11. Offres / CTA ---------- */
.section-offres{ overflow:hidden; }
.cta{
  position:relative;
  border-radius:clamp(28px, 3.4vw, 46px);
  padding:clamp(48px, 7vw, 110px) clamp(24px, 5vw, 80px);
  text-align:center;
  background:linear-gradient(165deg, #d98cff 0%, var(--violet-light) 42%, #b45ef0 100%);
  color:#2a0f45;
  box-shadow:0 60px 130px -60px rgba(207,117,252,.75);
}
.cta-title{
  font-size:clamp(25px, 3.4vw, 44px);
  font-weight:600; line-height:1.12; letter-spacing:-.03em;
  color:#2a0f45;
  margin-bottom:18px;
}
.cta-lead{
  font-size:15px; line-height:1.75;
  color:rgba(42,15,69,.72);
  max-width:54ch; margin:0 auto clamp(32px, 4vw, 52px);
}
.cta-btn{ min-width:clamp(220px, 30vw, 380px); }

/* ---------- 12. FAQ ---------- */
.section-faq{ position:relative; overflow:hidden; }
.faq-aura{
  position:absolute; left:50%; top:-30%;
  width:min(1100px, 130vw); aspect-ratio:1/1;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(124,51,187,.42) 0%, rgba(91,38,137,.12) 42%, transparent 66%);
  filter:blur(40px);
  pointer-events:none;
}
.section-faq .shell{ position:relative; z-index:2; }
.section-faq .accordion{ margin-top:clamp(26px, 3.2vw, 40px); }

/* ---------- 13. Footer ---------- */
.site-footer{ background:var(--ink); border-top:1px solid var(--line-soft); padding:clamp(46px, 5.5vw, 76px) 0 30px; }
.footer-top{ display:grid; grid-template-columns:1.1fr 2fr; gap:clamp(28px, 5vw, 70px); padding-bottom:clamp(30px, 3.8vw, 48px); }
.footer-brand .brand-logo{ height:34px; margin-bottom:16px; }
.footer-brand p{ color:var(--text-mute); font-size:13.5px; max-width:32ch; }
.footer-cols{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(18px, 3vw, 40px); }
.footer-cols h4{
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--violet-light); margin-bottom:14px;
}
.footer-cols a{ display:block; font-size:13.5px; color:var(--text-mute); padding:5px 0; transition:color .25s, transform .3s var(--ease); }
.footer-cols a:hover{ color:var(--cream); transform:translateX(3px); }
/* le `space-between` datait des deux blocs (copyright / mentions légales) :
   il ne reste que la ligne de copyright, centrée sous le filet */
.footer-bottom{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px;
  padding-top:24px; border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--text-mute);
  text-align:center;
}
.footer-bottom a:hover{ color:var(--cream); }

/* ---------- 14. Reveal ---------- */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:calc(var(--d, 0) * 90ms);
}
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }

  .stack::after{ display:none; }
  .work{ position:static; }
  .work-inner{ transform:none; box-shadow:none; }
  .work-inner::after{ display:none; }
}

/* ---------- 15. Responsive ---------- */
@media (max-width: 1140px){
  .nav{ gap:15px; margin-right:26px; }
  .nav > a:not(.btn){ font-size:12.5px; letter-spacing:.02em; }
  .header-actions .btn{ padding:11px 20px; font-size:13px; }
}

@media (max-width: 940px){
  .burger{ display:block; }
  .header-actions > .btn{ display:none; }
  .nav-cta-mobile{ display:inline-flex; margin-top:8px; }

  /* Panneau déroulant aligné sur la barre (mêmes inserts latéraux) et
     décroché de sa hauteur réelle — un `top` en dur chevauchait le header
     dans le haut de cette plage, là où la barre est la plus basse. */
  .nav{
    position:fixed;
    inset:auto var(--header-x) auto var(--header-x);
    top:calc(var(--header-top) + var(--header-h) + 10px);
    /* en paysage sur téléphone la liste dépasse le bas de l'écran :
       elle défile au lieu de rendre le CTA inatteignable */
    max-height:calc(100vh - var(--header-top) - var(--header-h) - 26px);
    max-height:calc(100dvh - var(--header-top) - var(--header-h) - 26px);
    overflow-y:auto;
    overscroll-behavior:contain;
    flex-direction:column; align-items:stretch; gap:0;
    margin-right:0;
    padding:12px;
    border-radius:20px;
    background:rgba(13,7,21,.97);
    border:1px solid var(--line);
    box-shadow:0 34px 80px -40px #000;
    opacity:0; visibility:hidden; transform:translateY(-12px);
    transition:opacity .3s var(--ease), transform .35s var(--ease), visibility .3s;
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:none; }
  .nav > a:not(.btn){ font-size:13px; padding:14px 10px; letter-spacing:.05em; }
  .nav > a:not(.btn)::after{ display:none; }
  /* filets de séparation : sans le soulignement au survol, les rangées
     manquaient de découpe une fois empilées */
  .nav > a:not(.btn) + a:not(.btn){ border-top:1px solid var(--line-soft); }
  .nav > a:not(.btn).is-active{ color:var(--violet-light); }
  .nav-cta-mobile{ padding:13px 26px; font-size:13.5px; }

  .pain-grid,
  .split,
  .agence-grid,
  .footer-top{ grid-template-columns:1fr; }
  .split-lead{ padding-top:0; }
  .split .h2{ margin-bottom:0; }

  .bento{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto;
  }
  .bento-a{ grid-column:1; grid-row:1; min-height:170px; }
  .bento-b{ grid-column:2; grid-row:1; min-height:170px; }
  .bento-c{ grid-column:1 / span 2; grid-row:2; min-height:170px; }
  .bento-d{ grid-column:1 / span 2; grid-row:3; min-height:170px; }

  /* le deck empilé est conservé : la carte passe en 1 colonne et se compacte
     pour tenir dans le viewport — condition de l'épinglage (cf. main.js, qui
     bascule en .is-flat si elle reste trop haute) */
  .stack{
    --stack-lift: -17px;
    --stack-shrink: .04;
  }
  .work-inner{
    grid-template-columns:1fr;
    gap:16px;
    padding:20px;
    border-radius:22px;
  }
  .work-media{ order:-1; aspect-ratio:16/10; max-height:26vh; }
  .work-tag{ margin-bottom:10px; }
  .work-body h3{ font-size:clamp(19px, 4.6vw, 25px); margin-bottom:10px; }
  /* le descriptif est la seule hauteur vraiment variable : on le borne */
  .work-body p{
    font-size:13.5px; line-height:1.6; margin-bottom:16px;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
    overflow:hidden;
  }
  .work-stats{ gap:10px; margin-bottom:16px; }
  .work-stats li{ flex:1 1 0; min-width:0; max-width:none; padding:10px 13px; }
  .work-stats b{ font-size:19px; }
  .work-stats span{ font-size:10.5px; }

  .agence-photo{ margin-inline:auto; }
}

@media (max-width: 600px){
  /* la pastille la plus longue déborderait en nowrap sur petit écran */
  .tag{ white-space:normal; line-height:1.5; }
  .logos-track{ justify-content:center; gap:16px 26px; }
  .slider.is-in .slider-bar{ flex-basis:90px; }
  .hero-cta .btn{ flex:1 1 100%; }
  .pain-panel{ grid-template-columns:1fr; }
  .pain-panel > li{ min-height:0; }
  .bento{ grid-template-columns:1fr; }
  .bento-a,.bento-b,.bento-c,.bento-d{ grid-column:1; grid-row:auto; }
  .footer-cols{ grid-template-columns:1fr 1fr; }
  .acc-head{ gap:14px; }

  /* sur deux lignes, 5px de padding vertical serraient le texte contre le filet */
  .hero .tag{ padding:9px 18px; }
  /* la césure dessinée pour le format large tombe n'importe où sur 335px :
     on laisse le texte se répartir seul */
  .hero-title br{ display:none; }
  .hero-title{ max-width:none; }
  /* 12px (plancher du clamp) passait sous le seuil de lisibilité */
  .proof-text p{ font-size:13.5px; }

  /* justifier une colonne d'environ 35 caractères creuse des rivières
     entre les mots : on repasse au fer à gauche */
  .vm p{ text-align:left; }

  /* aligner les réponses sous le titre coûtait 12 % de la largeur utile —
     à ce format elles prennent toute la colonne */
  .acc-body-inner > p,
  .chips,
  .accordion-faq .acc-body-inner > p{ padding-left:0; }

  /* min-width + nowrap : le libellé débordait de la carte dès 320px */
  .cta-btn{ min-width:0; width:100%; white-space:normal; }

  /* cibles tactiles : 5px de padding donnaient des rangées de 29px */
  .footer-cols a{ padding:9px 0; }

  /* écran court : on resserre encore la carte pour garder l'épinglage */
  .work-inner{ padding:17px; gap:14px; }
  .work-media{ max-height:21vh; }
  .work-body p{ -webkit-line-clamp:2; margin-bottom:14px; }
  .work-stats{ gap:8px; margin-bottom:14px; }
  .work-stats li{ padding:9px 11px; }
  .work-stats b{ font-size:17px; }
}

/* Dernier cran de compacité : sans lui la carte dépasse d'une poignée de pixels
   sur les petits téléphones (320 × 568) et le deck retombe en défilement simple. */
@media (max-width: 380px), (max-width: 940px) and (max-height: 620px){
  .work-inner{ padding:15px; gap:12px; }
  .work-media{ max-height:18vh; }
  .work-tag{ margin-bottom:8px; }
  .work-body h3{ font-size:18px; margin-bottom:8px; }
  .work-body p{ -webkit-line-clamp:2; margin-bottom:12px; }
  .work-stats{ gap:8px; margin-bottom:12px; }
  .work-stats li{ padding:8px 10px; }
  .work-stats b{ font-size:16px; }
  .work-stats span{ font-size:10px; }
  .stack .btn-sm{ padding:9px 18px; font-size:12.5px; }
}

/* ---------- 16. Pages internes ---------- */
/* Toutes les vues hors landing page : article, page, projet, archive, 404.
   Le header étant fixe, chaque page s'ouvre sur un en-tête qui lui laisse la place. */
.page-hero{
  position:relative;
  padding:clamp(150px, 17vw, 220px) 0 clamp(40px, 5vw, 70px);
  background:linear-gradient(180deg, #1d0b33 0%, #170a26 55%, var(--ink) 100%);
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute; left:50%; top:-52%;
  width:min(1200px, 140vw); aspect-ratio:1/1;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(124,51,187,.5) 0%, rgba(91,38,137,.14) 42%, transparent 68%);
  filter:blur(40px);
  pointer-events:none;
}
.page-hero .shell{ position:relative; z-index:2; }
.page-title{
  font-size:clamp(30px, 4.2vw, 56px);
  line-height:1.1; font-weight:700; letter-spacing:-.03em;
}
.page-title em{ font-style:normal; color:var(--violet-light); }
.page-sub{ color:var(--text-soft); font-size:15px; margin-top:14px; max-width:62ch; }

/* fil d'Ariane léger */
.crumbs{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); margin-bottom:16px; }
.crumbs a:hover{ color:var(--violet-light); }

/* corps de contenu : la mise en forme de l'éditeur WordPress */
.entry{
  max-width:76ch;
  color:rgba(255,255,255,.86);
  font-size:16.5px; line-height:1.8;
}
.entry > * + *{ margin-top:1.15em; }
.entry h2{ font-size:clamp(23px, 2.6vw, 34px); font-weight:700; letter-spacing:-.02em; margin-top:1.7em; }
.entry h3{ font-size:clamp(19px, 2vw, 25px); font-weight:600; letter-spacing:-.015em; margin-top:1.5em; }
.entry h4{ font-size:17px; font-weight:600; margin-top:1.4em; }
.entry a{ color:var(--violet-light); text-decoration:underline; text-underline-offset:3px; }
.entry a:hover{ color:var(--orange); }
.entry ul, .entry ol{ padding-left:1.3em; }
.entry ul{ list-style:disc; }
.entry ol{ list-style:decimal; }
.entry li + li{ margin-top:.5em; }
.entry li::marker{ color:var(--violet-light); }
.entry blockquote{
  border-left:2px solid var(--violet-light);
  padding:2px 0 2px 22px;
  color:#fff; font-size:1.06em;
}
.entry code{ font-family:var(--font-mono); font-size:.88em; background:rgba(234,233,217,.08); padding:2px 7px; border-radius:6px; }
.entry pre{ background:rgba(234,233,217,.06); border:1px solid var(--line-soft); border-radius:14px; padding:20px; overflow-x:auto; }
.entry pre code{ background:none; padding:0; }
.entry img, .entry iframe, .entry video{ border-radius:18px; }
.entry hr{ border:0; height:1px; background:var(--line); margin:2.2em 0; }
.entry table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.entry th, .entry td{ border:1px solid var(--line); padding:10px 14px; text-align:left; }
.entry th{ color:#fff; font-weight:600; }

.entry-media{ margin-bottom:clamp(26px, 3.4vw, 44px); border-radius:24px; overflow:hidden; }
.entry-media img{ width:100%; height:auto; }
.entry-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-mute);
  margin-top:14px;
}
.entry-footer{ margin-top:clamp(32px, 4vw, 52px); padding-top:24px; border-top:1px solid var(--line-soft); }
.entry-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.entry-tags a{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  padding:5px 12px; border:1px solid var(--line); border-radius:var(--r-pill);
  color:var(--violet-light);
}
.entry-tags a:hover{ border-color:var(--violet-light); }

/* grille d'articles / d'archives */
.post-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:clamp(18px, 2.2vw, 30px);
}
.post-card{
  display:flex; flex-direction:column;
  border:1px solid var(--line-soft);
  border-radius:var(--r-card);
  overflow:hidden;
  background:rgba(234,233,217,.03);
  transition:transform .45s var(--ease), border-color .35s, box-shadow .45s var(--ease);
}
.post-card:hover{ transform:translateY(-5px); border-color:rgba(207,117,252,.35); box-shadow:0 34px 70px -44px rgba(124,51,187,.9); }
.post-card-media{ aspect-ratio:16/10; background:#1a1224; overflow:hidden; }
.post-card-media img{ width:100%; height:100%; object-fit:cover; }
.post-card-body{ padding:clamp(18px, 2vw, 26px); display:flex; flex-direction:column; gap:10px; flex:1; }
.post-card-body h2{ font-size:clamp(17px, 1.6vw, 21px); font-weight:600; letter-spacing:-.015em; line-height:1.3; }
.post-card:hover h2{ color:var(--violet-light); }
.post-card-body p{ font-size:14px; line-height:1.65; color:var(--text-soft); }
.post-card-date{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-mute); }

/* pagination */
.pagination{ margin-top:clamp(34px, 4vw, 56px); display:flex; justify-content:center; }
.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 12px;
  border:1px solid var(--line); border-radius:var(--r-pill);
  margin:0 4px; font-size:14px;
  transition:border-color .3s, color .3s, background-color .3s;
}
.pagination .page-numbers:hover{ border-color:var(--violet-light); color:var(--violet-light); }
.pagination .page-numbers.current{ background:var(--orange); border-color:var(--orange); color:#fff; }

/* navigation article précédent / suivant */
.post-nav{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:clamp(30px, 3.6vw, 46px); }
.post-nav a{ font-size:14px; color:var(--text-soft); }
.post-nav a:hover{ color:var(--violet-light); }

/* état vide + 404 */
.empty-state{ text-align:center; padding:clamp(40px, 6vw, 80px) 0; }
.empty-state p{ color:var(--text-soft); font-size:15.5px; max-width:52ch; margin:0 auto 26px; }
.error-code{
  font-family:var(--font-mono);
  font-size:clamp(80px, 15vw, 190px); font-weight:700; line-height:1;
  letter-spacing:-.04em;
  background:linear-gradient(120deg, var(--violet-light), var(--orange));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* formulaire de recherche */
.search-form{ display:flex; gap:10px; max-width:440px; margin:0 auto; }
.search-form input[type="search"]{
  flex:1; min-width:0;
  padding:13px 20px;
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:rgba(234,233,217,.05); color:var(--text);
  font:inherit; font-size:14.5px;
}
.search-form input[type="search"]::placeholder{ color:var(--text-mute); }
.search-form input[type="search"]:focus{ outline:none; border-color:var(--violet-light); }

/* commentaires */
.comments{ margin-top:clamp(40px, 5vw, 70px); padding-top:clamp(30px, 3.6vw, 46px); border-top:1px solid var(--line-soft); max-width:76ch; }
.comments h2{ font-size:clamp(19px, 2vw, 25px); font-weight:600; margin-bottom:24px; }
.comment-list li{ padding:18px 0; border-bottom:1px solid var(--line-soft); }
.comment-list .children{ padding-left:clamp(16px, 3vw, 38px); }
.comment-author{ font-size:14.5px; font-weight:500; }
.comment-author img{ border-radius:50%; margin-right:10px; float:left; }
.comment-metadata{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute); margin-bottom:8px; }
.comment-content{ font-size:14.5px; line-height:1.7; color:var(--text-soft); clear:both; }
.comment-reply-link{ font-size:12.5px; color:var(--violet-light); }
.comment-respond{ margin-top:30px; }
.comment-respond label{ display:block; font-size:12.5px; color:var(--text-soft); margin-bottom:6px; }
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea{
  width:100%; padding:12px 16px; margin-bottom:16px;
  border:1px solid var(--line); border-radius:14px;
  background:rgba(234,233,217,.05); color:var(--text);
  font:inherit; font-size:14.5px;
}
.comment-respond textarea{ border-radius:18px; resize:vertical; }
.comment-respond input:focus, .comment-respond textarea:focus{ outline:none; border-color:var(--violet-light); }
.comment-respond input[type="submit"]{
  background:var(--orange); color:#fff; border:0; cursor:pointer;
  padding:14px 30px; border-radius:var(--r-pill);
  font:inherit; font-size:14.5px;
  box-shadow:0 12px 32px -14px rgba(255,91,63,.85);
}
.comment-respond input[type="submit"]:hover{ background:var(--orange-dark); }

/* fiche projet */
.projet-stats{ display:flex; flex-wrap:wrap; gap:clamp(12px, 1.4vw, 18px); margin-top:clamp(24px, 3vw, 36px); }
.projet-stats li{
  flex:1 1 160px; max-width:240px;
  padding:clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 24px);
  border:1px solid var(--line); border-radius:18px;
  background:rgba(234,233,217,.04);
}
.projet-stats b{ display:block; font-family:var(--font-mono); font-size:clamp(22px, 2.4vw, 32px); font-weight:700; line-height:1.1; color:var(--violet-light); }
.projet-stats span{ display:block; margin-top:4px; font-size:11.5px; letter-spacing:.04em; color:var(--text-mute); }

/* ---------- 17. Ajustements WordPress ---------- */
/* La barre d'admin est fixe en haut : le header flottant descend d'autant.
   On décale le token plutôt que la barre elle-même — le panneau du menu
   mobile se cale dessus et suit sans règle dédiée. */
.admin-bar{ --header-top: calc(clamp(14px, 2.9vw, 45px) + 32px); }
@media screen and (max-width: 782px){
  .admin-bar{ --header-top: calc(clamp(14px, 2.9vw, 45px) + 46px); }
}

.screen-reader-text{
  border:0; clip-path:inset(50%); height:1px; width:1px;
  margin:-1px; overflow:hidden; padding:0; position:absolute; white-space:nowrap;
}
.screen-reader-text:focus{
  clip-path:none; height:auto; width:auto; z-index:200;
  background:var(--orange); color:#fff; padding:12px 20px;
  top:0; left:0;
}

.alignleft{ float:left; margin:0 1.6em 1.2em 0; }
.alignright{ float:right; margin:0 0 1.2em 1.6em; }
.aligncenter{ display:block; margin-inline:auto; }
.alignwide, .alignfull{ max-width:none; }
.wp-caption{ max-width:100%; }
.wp-caption-text, .wp-element-caption{
  font-size:12.5px; color:var(--text-mute); text-align:center; margin-top:10px;
}
.sticky .post-card{ border-color:rgba(255,91,63,.4); }
.gallery{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:14px; }
.gallery-item img{ border-radius:14px; width:100%; }

/* Le walker du thème (Reolys_Nav_Walker) produit des <a> nus, enfants directs
   de .nav : les styles de la maquette s'appliquent sans adaptation.
   Les règles ci-dessous ne servent que si une extension réintroduit une
   structure ul/li dans le menu. */
.nav ul{ display:flex; align-items:center; gap:inherit; }
.nav li{ display:block; }
.nav li a{
  font-family:var(--font-display);
  font-size:clamp(12.5px, 1.29vw, 20.5px);
  font-weight:400;
  letter-spacing:.012em;
  text-transform:uppercase;
  color:#fff;
  padding:5px 0;
  transition:color .28s;
}
.nav li a:hover{ color:var(--violet-light); }
@media (max-width: 940px){
  .nav ul{ display:block; }
  .nav li a{ display:block; font-size:13px; padding:13px 8px; letter-spacing:.05em; }
}