/* Le Studio : assets UI et fonds noirs texturés.
   Fichier chargé dans l'ordre fixé par src/layouts/Base.astro : base.css, styles de la page, megamenu.css, ambiance.css. */

/* ---------- V5.3 : assets et ambiance (V5.4 : Noir texturé ; ambiances animées retirées) ---------- */
.asset{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.chap__vid .asset,.svc__vid .asset,.step__vid .asset{position:absolute;inset:0;block-size:100%;height:100%;object-position:50% 50%}   /* recette du 27 oct. : l'asset héritait des 118 % de haut des vidéos, calé en haut (bas coupé, visuel décentré) */
.step__vid,.chap__vid,.svc__vid{position:relative}
/* Calque d'ambiance : il se glisse derrière le contenu du cadre (z-index négatif dans un contexte isolé) */
.has-amb{isolation:isolate}
:where(section.has-amb){position:relative}   /* sinon le calque se cale sur <main> (section « pace » de la Méthode) */
.amb{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;border-radius:inherit}
.amb__glow{position:absolute;inline-size:min(70vw,980px);aspect-ratio:1;inset-inline-end:-22%;inset-block-end:-46%;border-radius:50%;background:#FF4D00;filter:blur(min(10vw,140px));opacity:.5}
.amb__ring{position:absolute;inline-size:min(56vw,820px);aspect-ratio:1;inset-inline-start:-18%;inset-block-start:-42%;border-radius:50%;border:min(9vw,140px) solid rgb(242 242 239 / .55);filter:blur(min(5vw,70px));opacity:.32}
.amb__dots{position:absolute;inline-size:min(22vw,300px);block-size:min(18vw,220px);inset-inline-end:4%;inset-block-start:12%;background-image:radial-gradient(circle,rgb(242 242 239 / .26) 1.1px,transparent 1.7px);background-size:14px 14px}
.amb::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.85%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%20.5%200%200%200%200%20.5%200%200%200%200%20.5%200%200%200%201%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E");opacity:.13;mix-blend-mode:overlay}
/* Variante claire (chapitres blancs d'Expertises) : lueur plus douce, anneau sombre, points sombres */
.amb--clair .amb__glow{opacity:.32}
.amb--clair .amb__ring{border-color:rgb(13 13 13 / .7);opacity:.12}
.amb--clair .amb__dots{background-image:radial-gradient(circle,rgb(13 13 13 / .22) 1.1px,transparent 1.7px)}
/* Placement selon le cadre */
.phero .amb__glow{inset-block-end:-58%}
.chap .amb__glow{inset-inline-end:-30%;inset-block-end:-60%}
.footer .amb__glow{inset-inline-end:auto;inset-inline-start:-20%;inset-block-end:-70%;opacity:.42}
.footer .amb__dots{inset-block-start:auto;inset-block-end:16%}
/* Couvertures d'articles : l'aplat reçoit la même lumière et le même grain ; les articles illustrés ont leur image */
.cover{position:relative;overflow:hidden;isolation:isolate}
.cover::before{content:"";position:absolute;inline-size:90%;aspect-ratio:1;inset-inline-end:-35%;inset-block-end:-70%;border-radius:50%;background:#FF4D00;filter:blur(60px);opacity:.38;z-index:-1}
.cover--accent::before{background:#0D0D0D;opacity:.25}
.cover::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.85%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%20.5%200%200%200%200%20.5%200%200%200%200%20.5%200%200%200%201%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E");opacity:.14;mix-blend-mode:overlay;pointer-events:none}
.cover--img{background:var(--night)}
.cover--img::before{display:none}
.cover--img img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
/* Méga-menu, couleur Sombre : la même lueur dans le panneau */
@media (prefers-reduced-motion:reduce){.amb__glow,.amb__ring{filter:blur(min(8vw,110px))}}
/* Ambiances texturées : les fonds de section restent unis (noir ou clair) pour la lisibilité ; la texture vit dans les assets UI et les couvertures (retour de Jeremy, 26 oct.) */
/* À plat : la V5.2 d'origine (aplats noir, gris et orange, motifs animés en vidéo dans Expertises et Méthode, couvertures à logo), sans aucun asset ni texture */
html:not([data-amb="plat"]) [data-plat]{display:none}
:is([data-amb="plat"],[data-amb="noir"],[data-amb="braise"]) .cover::before,:is([data-amb="plat"],[data-amb="noir"],[data-amb="braise"]) .cover::after,:is([data-amb="plat"],[data-amb="noir"],[data-amb="braise"]) .cover--img img{display:none}
:is([data-amb="plat"],[data-amb="noir"],[data-amb="braise"]) .cover--img{background:var(--grey)}:is([data-amb="plat"],[data-amb="noir"],[data-amb="braise"]) .cover--img.cover--white{background:var(--white)}
:is([data-amb="plat"],[data-amb="noir"],[data-amb="braise"]) .cover--img.cover--night{background:var(--night)}:is([data-amb="plat"],[data-amb="noir"],[data-amb="braise"]) .cover--img.cover--accent{background:var(--accent)}
.cover--img .cover__logo{display:none}:is([data-amb="plat"],[data-amb="noir"],[data-amb="braise"]) .cover--img .cover__logo{display:inline-flex}
/* Atmosphère et Spectral : les fonds noirs prennent une texture discrète (une variante par section), les heros une texture forte (une par page) */
.amb__atm{position:absolute;inset:0;display:none;background:var(--atm) center/cover no-repeat}
.amb__atm::before{content:"";position:absolute;inset:0;z-index:1;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.85%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%20.5%200%200%200%200%20.5%200%200%200%200%20.5%200%200%200%201%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E");opacity:.05;pointer-events:none}   /* grain posé par le navigateur à l'affichage : il casse les derniers paliers des noirs */
[data-amb="noir"] .amb__ring,[data-amb="noir"] .amb__glow,[data-amb="noir"] .amb__dots{display:none}
[data-amb="noir"] .amb:not(.amb--clair) .amb__atm{display:block}
[data-amb="noir"] .amb--clair{display:none}
[data-amb="noir"] .has-amb:not(.chap:not(.night)){--on-night-2:#D9D4CC}
[data-amb="noir"] .amb__atm--h0{--atm:url(/img/ambiances/noir-hero-rayons.jpg)}[data-amb="noir"] .amb__atm--h1{--atm:url(/img/ambiances/noir-hero-faisceau.jpg)}[data-amb="noir"] .amb__atm--h2{--atm:url(/img/ambiances/noir-hero-flou.jpg)}[data-amb="noir"] .amb__atm--h3{--atm:url(/img/ambiances/noir-hero-faisceau-b.jpg)}[data-amb="noir"] .amb__atm--h4{--atm:url(/img/ambiances/noir-hero-raies.jpg)}[data-amb="noir"] .amb__atm--h5{--atm:url(/img/ambiances/noir-hero-faisceau.jpg)}[data-amb="noir"] .amb__atm--h6{--atm:url(/img/ambiances/noir-hero-rayons.jpg)}[data-amb="noir"] .amb__atm--h7{--atm:url(/img/ambiances/noir-hero-rayons-b.jpg)}[data-amb="noir"] .amb__atm--h8{--atm:url(/img/ambiances/noir-hero-faisceau-b.jpg)}[data-amb="noir"] .amb__atm--h9{--atm:url(/img/ambiances/noir-hero-raies-b.jpg)}
[data-amb="noir"] .amb__atm--s1{--atm:url(/img/ambiances/noir-sec-faisceau.jpg)}[data-amb="noir"] .amb__atm--s2{--atm:url(/img/ambiances/noir-sec-flou.jpg)}[data-amb="noir"] .amb__atm--s3{--atm:url(/img/ambiances/noir-sec-raies.jpg)}[data-amb="noir"] .amb__atm--s4{--atm:url(/img/ambiances/noir-sec-satin.jpg)}[data-amb="noir"] .amb__atm--f{--atm:url(/img/ambiances/noir-pied.jpg)}
.footer .amb__atm::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(10 9 8 / .62),rgb(10 9 8 / .42) 55%,rgb(10 9 8 / .38))}   /* la colonne de droite reste lisible sur les lueurs vives */   /* la texture du pied est déjà sombre */   /* dégradé inversé : le noir derrière le bouton « Parlons de votre projet », à droite (Jeremy, 27 oct.) */
.amb--clair .amb__atm::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(255 255 255 / .75),rgb(255 255 255 / .2) 60%,transparent)}   /* le même fond que les sections sombres du site : graphite lisse, lueur dans l'angle (recette, 26 oct.) */
/* Méga-menu Actualités en Spectral : vignettes sombres dans les dégradés des heros, logo blanc, comme les couvertures de la page Actualités */
.mm-shell .mm-ncard__img .mm-logo{display:none}
.phero .amb__atm::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(10 9 8 / .45),transparent 22%),linear-gradient(0deg,rgb(10 9 8 / .42),transparent 45%),linear-gradient(90deg,rgb(10 9 8 / .62),rgb(10 9 8 / .28) 45%,transparent 75%)}   /* lisibilité : texte à gauche, petits libellés en bas à droite */
@media (max-width:959px){.phero .amb__atm{-webkit-mask-image:linear-gradient(180deg,rgb(0 0 0 / .25) 30%,#000 85%);mask-image:linear-gradient(180deg,rgb(0 0 0 / .25) 30%,#000 85%)}.phero .amb__atm::after{background:rgb(10 9 8 / .35)}}
html:not([data-amb="flou"]) .cover:not(.cover--img):not(.cover--accent){background:var(--tex-c) center/cover}
html:not([data-amb="flou"]) .cover--night{background-image:var(--tex)}
html:not([data-amb="flou"]) .cover:not(.cover--accent)::before{display:none}
/* Pied de page : boutons en blanc au survol, comme sur les autres fonds sombres (retour de recette, 26 oct.) */
@media (hover:hover) and (pointer:fine){.footer .pill:not(.pill--accent):hover{background:var(--on-night);color:var(--night);border-color:var(--on-night)}}
/* Spectral : couvertures d'articles sombres, dans les dégradés des heros, au lieu de la brume pastel (retour de recette, 26 oct.) */   /* voile : ni pastel ni orange vif */
/* Spectral : plus de maquettes d'interface en couverture (Jeremy, recette du 26 oct.) ; en attendant les vraies images d'articles, dégradé et logo */
/* Hero de l'accueil : la bobine passe devant la texture ; voile à gauche pour le titre */
.hero.has-amb{background:var(--night)}
.hero .amb__atm::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(10 9 8 / .45),transparent 22%),linear-gradient(0deg,rgb(10 9 8 / .5),transparent 50%),linear-gradient(90deg,rgb(10 9 8 / .62),rgb(10 9 8 / .2) 50%,transparent 80%)}
/* Marges latérales plus larges en tablette et mobile, sur tout le site (recette du 26 oct. : « trop collé sur le bord ») ; inchangées sur grand écran */
:root{--gutter:clamp(24px,4.6vw,44px)}
@media (max-width:767.98px){.hero .wordmark{font-size:22.4vw}}   /* le grand mot de l'accueil tient dans la nouvelle marge */
/* Réglage Ambiance (bas à gauche, au-dessus du réglage du méga-menu) */
.ambx{position:fixed;z-index:var(--z-dock);inset-inline-start:calc(16px + env(safe-area-inset-left));inset-block-end:calc(16px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:6px;padding:5px;
  max-inline-size:calc(100vw - 32px);overflow-x:auto;scrollbar-width:none;border-radius:var(--r-pill);background:var(--night);color:var(--on-night);font-size:var(--fs-xs);box-shadow:0 12px 40px -12px rgb(0 0 0 / .45),0 0 0 1px rgb(242 242 239 / .12)}
.ambx__t{flex:none;font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.02em;text-transform:uppercase;color:var(--on-night-2);padding-inline:10px 2px}
.ambx__g{display:flex;gap:2px;padding-inline-start:6px;border-inline-start:1px solid var(--line-night)}
.ambx button{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px 0 6px;border-radius:var(--r-pill);color:var(--on-night-2);transition:background-color var(--d-1) ease,color var(--d-1) ease}
.ambx button i{inline-size:20px;block-size:20px;border-radius:50%;background:var(--sw) center/cover;box-shadow:0 0 0 1px rgb(242 242 239 / .2)}
.ambx button[aria-pressed="true"]{background:var(--on-night);color:var(--night)}
.ambx :focus-visible{outline-color:var(--accent)}
@media (hover:hover) and (pointer:fine){.ambx button:hover{color:var(--on-night)}.ambx button[aria-pressed="true"]:hover{color:var(--night)}}
@media (min-width:960px){.ambx{inset-block-end:calc(16px + 52px + env(safe-area-inset-bottom))}}
/* Mobile : au-dessus du dock d'appel (56 px), pastilles seules pour que les ambiances tiennent */
@media (max-width:959px){
  .ambx{inset-block-end:calc(16px + 56px + 8px + env(safe-area-inset-bottom))}
  .ambx button{padding:0 6px}
  .ambx button span{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ambx button i{inline-size:22px;block-size:22px}
  .ambx button[aria-pressed="true"] i{box-shadow:0 0 0 2px var(--accent)}
}

/* Assets UI vectoriels : cadres en 16:10 (le format des visuels) dans les ambiances qui les montrent, rien n'est coupé (recette du 27 oct.) */
.uix{display:block;overflow:hidden}
:is([data-amb="braise"],[data-amb="spectral"],[data-amb="noir"]) :is(.chap__vid,.step__vid){aspect-ratio:16/10;block-size:auto}
[data-amb="noir"]{--ui-fond:url(/img/ambiances/noir-sec-faisceau.jpg)}   /* Noir texturé : série Nuit animée sur un faisceau discret (Jeremy, 27 oct.) */
.asx{inset-block-end:calc(16px + 52px + 48px + env(safe-area-inset-bottom))}
.asx button{padding:0 12px}
.ambx__g[hidden]{display:none}
.asx[data-ab] [data-g="f"]{opacity:.35;pointer-events:none}   /* séries A et B : des cartes, pas de choix de format */
@media (max-width:959px){.asx{inset-block-end:calc(16px + 56px + 8px + 48px + env(safe-area-inset-bottom))}.ambx.asx button{padding:0 10px}}

.mm-shell .mm-ncard__img{display:grid;place-items:center}
.mm-shell .mm-ncard__img .mm-logo{display:inline-flex}
:is([data-amb="noir"],[data-amb="braise"]) .cover::before,:is([data-amb="noir"],[data-amb="braise"]) .cover::after{display:none}
html[data-amb="noir"] .cover.cover.cover{background:var(--cv,url(/img/ambiances/noir-hero-faisceau.jpg)) center/cover;color:var(--on-night)}
/* Noir texturé : un seul fond pour toutes les couvertures d'actualités, le faisceau diagonal (Jeremy, 27 oct. : « trop de versions différentes ») */
:is([data-amb="noir"],[data-amb="braise"]) .cover .cover__logo{display:inline-flex}
[data-amb="noir"] .mm-shell .mm-feat__cover,[data-amb="noir"] .mm-shell .mm-ncard__img,[data-amb="noir"] .mm-shell .mm-art__img,[data-amb="noir"] .mm-shell .mm2-cover{background:url(/img/ambiances/noir-hero-faisceau.jpg) center/cover;color:var(--on-night)}

/* Vignette « braise » (test du 10 nov., d'après Design Me) : nuit, lueur braise qui monte du bas, carré du logo, titre et catégorie.
   Le fond est un élément à part : les règles d'ambiance ci-dessus ne le remplacent pas. Corps en unités du conteneur : le titre suit la taille de la carte. */
.cover--braise{container-type:inline-size;display:grid;place-items:center;color:#F2F2EF;inline-size:100%;block-size:100%}
.cover--braise::before{display:none}
.cover__fond{position:absolute;inset:0;z-index:-2;background:
  radial-gradient(ellipse 120% 95% at 50% 128%,#FF4D00 0%,rgb(255 77 0 / .82) 24%,rgb(176 40 0 / .5) 48%,rgb(60 14 0 / .25) 66%,rgb(13 13 13 / 0) 84%),
  radial-gradient(ellipse 60% 50% at 18% 0%,rgb(255 77 0 / .10),rgb(13 13 13 / 0) 70%),#0D0D0D}
.cover__corps{display:grid;justify-items:center;gap:3.4cqi;padding-inline:8cqi;text-align:center}
.cover__carre{display:block;inline-size:3.6cqi;block-size:3.6cqi;min-inline-size:10px;min-block-size:10px;background:#FF4D00}
.cover__titre{font-weight:500;font-size:clamp(1rem,6.2cqi,3.25rem);letter-spacing:-.045em;line-height:1.02;text-wrap:balance;max-inline-size:18em}
.cover__cat{font-family:var(--mono,"Fragment Mono",monospace);font-size:clamp(.625rem,1.9cqi,.8125rem);letter-spacing:.06em;text-transform:uppercase;color:rgb(242 242 239 / .78)}
@media (hover:hover) and (pointer:fine){ .cover__fond{transition:transform var(--d-3) cubic-bezier(.16,1,.3,1)} :is(.post__link,.une__link,.pick,.mm-feat,.mm-ncard,.mm-art):hover .cover__fond{transform:scale(1.06)} }

/* Miniatures (« À ne pas manquer », méga-menu) : sous 260 px de large, le titre est déjà écrit à côté de la vignette ;
   elle montre donc le carré et la catégorie, pas le titre (retour de Sacha validé par Jeremy, 11 nov. 2026) */
@container (max-width: 260px){
  .cover--braise .cover__corps{gap:7cqi;padding-inline:8cqi}
  .cover--braise .cover__titre{display:none}
  .cover--braise .cover__cat{font-size:clamp(.5625rem,5.4cqi,.75rem);letter-spacing:.06em;line-height:1.3;color:rgb(242 242 239 / .86)}
  .cover--braise .cover__carre{inline-size:7cqi;block-size:7cqi;min-inline-size:8px;min-block-size:8px}
}
/* Exception : les miniatures « À ne pas manquer » de la page Actualités gardent le titre en petit, sur quatre lignes au plus
   (demande de Jeremy, 11 nov. 2026) ; le méga-menu garde la catégorie */
@container (max-width: 260px){
  .pick__media .cover--braise .cover__corps{gap:6cqi;padding-inline:9cqi}
  .pick__media .cover--braise .cover__titre{display:-webkit-box;font-size:clamp(.6875rem,6.6cqi,.9375rem);line-height:1.08;letter-spacing:-.03em;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .pick__media .cover--braise .cover__cat{display:none}
  .pick__media .cover--braise .cover__carre{inline-size:5cqi;block-size:5cqi;min-inline-size:7px;min-block-size:7px}
}