/* En-tête commun : logo animé en haut à gauche, catégories au survol (ordinateur) ou au toucher (téléphone),
   et encadré de résumé à droite des pages de catégorie. */
.haut[data-entete]{position:fixed!important;z-index:100;top:0;left:0;right:0;height:auto!important;display:flex!important;align-items:flex-start;justify-content:space-between;padding:8px 18px!important;background:transparent!important;mix-blend-mode:normal!important;pointer-events:none;color:#fff}
.haut[data-entete]>*{pointer-events:auto}
.lg{position:relative}
.lg-btn{display:block;background:none;border-radius:8px;padding:0;line-height:0}
.lg-btn img{display:block;height:40px;width:auto;filter:drop-shadow(0 0 10px rgba(0,0,0,.5))}
.lg-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* menu des catégories : sous le logo, sans trou de survol (le menu fait partie de la zone au survol) */
.lg-menu{position:absolute;left:0;top:100%;padding-top:10px;min-width:240px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s,transform .28s cubic-bezier(.16,1,.3,1),visibility 0s linear .28s}
.lg-menu>ul{list-style:none;margin:0;padding:8px;border-radius:16px;background:rgba(14,14,18,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 50px -16px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.09)}
.lg-menu a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;color:#efe8d8;text-decoration:none;font:500 .78rem "Geist",system-ui,sans-serif;letter-spacing:.01em;transition:background .18s}
.lg-menu a i{width:11px;height:11px;border-radius:50%;background:var(--c,#fff);flex:0 0 auto;box-shadow:0 0 0 3px color-mix(in srgb,var(--c,#fff) 24%,transparent)}
.lg-menu a:hover,.lg-menu a:focus-visible{background:rgba(255,255,255,.09);outline:none}
.lg-menu a[aria-current="page"]{background:rgba(255,255,255,.12)}
.lg-menu .lg-sep{height:1px;margin:6px 8px;background:rgba(255,255,255,.1)}
.lg-menu .lg-acc i{background:conic-gradient(#ffd43b,#ff6b3d,#f0507e,#7246f5,#3d5afe,#19d3a2,#ffd43b);box-shadow:none}
@media (hover:hover) and (pointer:fine){
  .lg:hover .lg-menu,.lg:focus-within .lg-menu,.lg.open .lg-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
}
.lg.open .lg-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}

.lg-ecrire{font:500 .66rem "Geist Mono",ui-monospace,monospace;letter-spacing:.26em;text-transform:uppercase;color:#fff;text-decoration:none;background:rgba(14,14,18,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:12px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.22);margin-top:3px;transition:background .2s,color .2s}
.lg-ecrire:hover{background:#fff;color:#0e0e12}
.lg-ecrire:focus-visible{outline:2px solid #fff;outline-offset:3px}

@media (max-width:820px){
  .haut[data-entete]{padding:8px 12px!important;background:#000!important;pointer-events:auto}
  .lg-btn img{height:32px}
  .lg-ecrire{padding:9px 12px;font-size:.6rem;margin-top:2px}
  .lg-menu{min-width:min(280px,calc(100vw - 24px))}
}

@media (prefers-reduced-motion:reduce){.lg-menu{transition:none}}

/* tuiles emboîtées : le calcul se fait dans js/emboite.js ; la grille sert de repère de position */
.grille{position:relative}
.grille>.t{overflow:hidden}

/* titre du service : vertical, fixe dans la marge gauche, sur toute la hauteur visible (du haut du cadre à sa marge du bas).
   La taille suit l'épaisseur de la marge (entete.js) ; l'espacement est commun à tous les services, réglé sur le nom le plus long.
   Il entre en s'écartant, et se retire quand le menu des services s'ouvre (survol du logo, focus, ou touche). */
.titre-service{display:none}
@media (min-width:821px){
  .titre-service{display:block;position:fixed;z-index:4;left:calc(var(--marge,40px) / 2);top:var(--haut,68px);bottom:var(--haut,68px);margin:0;pointer-events:none;
    writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);white-space:nowrap;
    font:400 var(--tt,40px)/1 "Instrument Serif","Times New Roman",serif;text-transform:uppercase;color:var(--c,#fff);
    letter-spacing:var(--tl,0);word-spacing:.45em;text-align:start;text-align-last:start;
    animation:titre-entree 1.4s .5s cubic-bezier(.16,1,.3,1) backwards;
    transition:opacity .35s ease,translate .5s cubic-bezier(.65,0,.35,1),filter .35s ease}
  body:has(.lg:hover,.lg:focus-within,.lg.open) .titre-service{opacity:0;translate:0 14px;filter:blur(3px)}
}
@keyframes titre-entree{from{opacity:0;filter:blur(6px);clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@media (prefers-reduced-motion:reduce){.titre-service{animation:none;transition:none}}

/* ── Logo Comm One : le même que l'ancienne accueil (pastille tournante + COMM + pilule ONE, intro « 6 boules → 1 point ») ── */
@font-face{font-family:'Gabarito';font-style:normal;font-weight:600 800;font-display:swap;src:url(../assets/fonts/gabarito-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Gabarito';font-style:normal;font-weight:600 800;font-display:swap;src:url(../assets/fonts/gabarito-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@property --lg-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.logo{--l-bleu:#3D5AFE;--l-violet:#7246F5;--l-tomate:#FF6B3D;--l-citron:#FFD43B;display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#ECEEF4;font:800 1.25rem/1 "Gabarito",system-ui,sans-serif;letter-spacing:-.01em;min-height:48px;flex:0 0 auto;position:relative;isolation:isolate}
.logo-dot{position:relative;width:14px;height:14px;border-radius:50%;flex:0 0 auto;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.9) 0 14%,rgba(255,255,255,0) 46%),conic-gradient(from var(--lg-a),var(--l-citron),var(--l-tomate),#F0507E,var(--l-violet),var(--l-bleu),var(--l-citron));box-shadow:0 0 0 1.5px rgba(255,255,255,.55),0 0 10px 1px rgba(200,169,106,.45)}
.logo-dot::after{content:"";position:absolute;inset:-7px;border-radius:50%;z-index:-1;pointer-events:none;background:conic-gradient(var(--l-citron),var(--l-tomate),#F0507E,var(--l-violet),var(--l-bleu),var(--l-citron));filter:blur(7px);opacity:.55}
.logo-dot{animation:lg-turn 7s linear infinite}
.logo-dot::after{animation:lg-halo 7s linear infinite}
.logo:hover .logo-dot::after{opacity:1;transition:opacity .3s}
.logo-one{display:inline-block;padding:5px 10px 4px;margin-left:4px;border-radius:999px;background:#ECEEF4;color:#1C1B29}
.lg-swarm{position:absolute;left:0;top:50%;width:14px;height:14px;margin-top:-7px;pointer-events:none;z-index:2}
.lg-b{position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.75) 0 12%,rgba(255,255,255,0) 50%),var(--c);box-shadow:0 0 12px 2px color-mix(in srgb,var(--c) 55%,transparent);opacity:0;will-change:transform,opacity}
.logo.lg-show .lg-swarm{animation:lg-swirl 2400ms cubic-bezier(.65,0,.35,1) both}
.logo.lg-show .lg-b{animation:lg-ball 2400ms ease both;animation-delay:calc(var(--i) * 55ms)}
.logo.lg-show .logo-dot{animation:lg-pop 2400ms ease both,lg-turn 7s linear 2400ms infinite}
.logo.lg-show .logo-dot::after{animation:lg-flash 2400ms ease both,lg-halo 7s linear 2400ms infinite}
.logo.lg-show .lg-swarm + span{animation:lg-word 2400ms cubic-bezier(.16,1,.3,1) both}
@keyframes lg-turn{100%{--lg-a:360deg}}
@keyframes lg-halo{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.18)}100%{transform:rotate(360deg) scale(1)}}
@keyframes lg-ball{0%{transform:translate(var(--x),var(--y)) scale(0);opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}16%{transform:translate(var(--x),var(--y)) scale(1);opacity:1;animation-timing-function:ease-in-out}42%{transform:translate(calc(var(--x) * 1.06),calc(var(--y) - 3px)) scale(1.08);opacity:1;animation-timing-function:cubic-bezier(.6,0,.85,.4)}74%{transform:translate(0,0) scale(.55);opacity:1}80%{transform:translate(0,0) scale(.3);opacity:0}100%{transform:translate(0,0) scale(.3);opacity:0}}
@keyframes lg-swirl{0%,42%{transform:rotate(0)}78%,100%{transform:rotate(200deg)}}
@keyframes lg-pop{0%,70%{transform:scale(0)}80%{transform:scale(1.55);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}100%{transform:scale(1)}}
@keyframes lg-flash{0%,72%{transform:scale(0);opacity:0}82%{transform:scale(2.4);opacity:1}100%{transform:scale(1);opacity:.55}}
@keyframes lg-word{0%,6%{opacity:0;transform:translateX(-6px);filter:blur(4px)}30%{opacity:1;transform:none;filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){.logo-dot,.logo-dot::after,.lg-swarm,.lg-b,.lg-swarm + span{animation:none!important}}
.lg-btn.logo{display:inline-flex;line-height:1;padding:0 6px;filter:drop-shadow(0 0 10px rgba(0,0,0,.5))}
/* le logo écrit dans un texte : même dessin, à la taille de la phrase */
.logo.logo-txt{display:inline-flex;vertical-align:middle;min-height:0;height:auto;width:auto;margin:0 .15em;font-size:.72em;gap:.55em;position:relative;top:-.06em;filter:none;pointer-events:none}
.logo.logo-txt .logo-dot{width:.75em;height:.75em}
.pourquoi .mono .logo.logo-txt{font-size:clamp(26px,3.6vw,46px);height:auto;margin:0 .2em;top:-.1em}
.pq-texte .c .logo.logo-txt{visibility:hidden}