/* ── Bricolage Grotesque — AUTO-HÉBERGÉE (plus aucun tiers en production). SIL Open Font License 1.1, redistribution permise : licence en assets/fonts/OFL.txt. Une seule graisse embarquée : le corps demande font-weight:300, aucune fonte ≤300 n'existe, l'appariement CSS retombe donc sur la 400 — c'est elle, et elle seule, qui est rendue. Sous-ensembles Google : « latin » (le seul que le texte du site exige, mesuré) + « latin-ext » (filet de sécurité, téléchargé uniquement si un caractère l'exige). ── */ @font-face{ font-family:'Bricolage Grotesque'; font-style:normal;font-weight:400;font-stretch:100%;font-display:swap; src:url(../assets/fonts/bricolage-grotesque-400-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; } @font-face{ font-family:'Bricolage Grotesque'; font-style:normal;font-weight:400;font-stretch:100%;font-display:swap; src:url(../assets/fonts/bricolage-grotesque-400-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root{ --ink:#08070A;--paper:#F2EEE6;--soft:#B9B2A6;--line:#4A4356; --c-name:#F2EEE6;--c-roles:var(--c-name);--c-body:#DAD4C9;--c-label:#8A8377; --mix:#ddb214;--edu:#6e1fd2;--sys:#91cefd;--bg-ei:#34546f;--bg-prat:#473460;--footer-bg:#08070A;--feu-x-ei:0%;--feu-y-ei:89%;--feu-x-prat:100%;--feu-y-prat:78%; --pad:clamp(1.35rem,5vw,4.5rem); --role-size:1.39rem; --name-size:4rem;--font-display:-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif; --font-roles:var(--font-display);--font-titles:var(--font-display);--font-body:'Bricolage Grotesque',system-ui,sans-serif;--font-label:var(--font-display); --lab-size:1.39rem;--txt-size:1.00rem;--ribbon-op:0.65;--offer-op:86;--feu:15;--fmt-scale:1;--mark-scale:1; } *{box-sizing:border-box;margin:0;padding:0} body{background:var(--ink);color:var(--paper);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column} #matiere{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;opacity:1;pointer-events:none} #bg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;opacity:var(--ribbon-op)} #bgGlow{position:fixed;top:0;left:0;display:none;z-index:1;pointer-events:none;filter:blur(22px);mix-blend-mode:plus-lighter;transform:translateZ(0);will-change:filter;opacity:calc(var(--ribbon-op)*0.9)} body.safari #bgGlow{display:block} #scrim{position:fixed;inset:0;z-index:1;pointer-events:none; background:linear-gradient(103deg,var(--ink) 0%,rgba(8,7,10,.93) 16%,rgba(8,7,10,.6) 33%,rgba(8,7,10,.1) 55%,rgba(8,7,10,0) 70%), linear-gradient(to bottom,rgba(8,7,10,0) 60%,rgba(8,7,10,.72) 84%,var(--ink) 100%)} @media(max-width:900px){#scrim{background:linear-gradient(to bottom,rgba(8,7,10,.55) 0%,rgba(8,7,10,.16) 24%,rgba(8,7,10,0) 46%)}} .wrap{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;padding:0 var(--pad)} /* bouton mail rond (icône enveloppe dans un rond de la couleur du thème) */ .mailbtn{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;flex:0 0 auto;color:var(--ink);cursor:pointer;text-decoration:none;box-shadow:0 3px 12px rgba(0,0,0,.4);transition:transform .2s,filter .2s} .mailbtn svg{width:22px;height:22px;display:block} .mailbtn:hover,.mailbtn:focus-visible{transform:translateY(-2px);filter:brightness(1.08)} .a-mix .mailbtn{background:var(--mix)} .a-edu .mailbtn{background:var(--edu)} /* CTA du bloc EI : texte à gauche + même rond mail (couleur --sys) */ .cta-mail{display:inline-flex;align-items:center;gap:1rem;text-decoration:none} .cta-mail b{font-weight:400;font-size:1.32rem;color:var(--sys);white-space:nowrap} .cta-mail .mailbtn{background:var(--sys)} .mk-uni img{filter:invert(1) brightness(1.7)} /* logo sombre → clair sur fond noir */ /* ── Bloc 1 : la société (gros, ≥ moitié) · ruban en petit logo animé à droite du nom ── */ .entreprise{position:relative;overflow:hidden;border:1px solid var(--line); min-height:min(60vh,660px);margin:clamp(1.6rem,5vh,3.6rem) 0 clamp(2rem,6vh,4rem);padding:calc(clamp(1.7rem,4vw,3.1rem) + var(--ribbon-push,0px)) clamp(1.7rem,4vw,3.1rem) clamp(1.7rem,4vw,3.1rem); display:grid;gap:1.5rem;align-content:space-between; background:radial-gradient(130% 150% at var(--feu-x-ei) var(--feu-y-ei),color-mix(in srgb,var(--bg-ei) calc(var(--feu)*1%),transparent),transparent 62%),color-mix(in srgb,var(--bg-ei) 5%,transparent)} /* header : identité à gauche · ruban = logo animé flottant en haut à droite du bloc (grande boîte → halo jamais coupé) */ .ent-head{position:relative} .ribbon-logo{position:absolute;top:clamp(.4rem,1.4vw,1.1rem);right:clamp(.4rem,1.4vw,1.1rem); width:clamp(300px,44vw,580px);aspect-ratio:16/9;pointer-events:none;z-index:0} /* la géométrie (box) + rotation sont pilotées en JS selon la largeur (métamorphose progressive) */ /* le ruban est TOUJOURS derrière le texte : contenu au-dessus (z-index) */ .entreprise>*:not(.ribbon-logo){position:relative;z-index:1} .ent-head .name{font-family:var(--font-display);font-size:min(var(--name-size),9vw);font-weight:400;letter-spacing:-.038em;line-height:.96;margin:0;color:var(--c-name)} .ent-head .name .ei{color:var(--sys);font-weight:400;letter-spacing:.01em} /* bloc 2 : « Mixeur » = couleur Mixage, « Formateur » = couleur Enseignement, « · » normal */ .pratique .name .w-mix{color:var(--mix)} .pratique .name .w-edu{color:var(--edu)} .pratique .name .sep{color:var(--c-name)} .ent-head .role{font-size:min(calc(var(--role-size)*1.2),6.4vw);color:var(--c-roles);font-weight:400;margin:.5rem 0 .3rem;font-family:var(--font-roles)} .ent-lede{font-size:calc(var(--txt-size)*1.05);font-style:italic;color:var(--c-body);max-width:46ch;margin:0;font-family:var(--font-body)} /* 4 blocs compacts : largeur adaptée au texte (2 lignes courtes), un peu d'espace entre eux, responsive */ .offer{display:grid;grid-template-columns:1fr;gap:1.1rem} @media(min-width:640px){.offer{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}} /* 4 activités = 4 blocs frostés : texte lisible par-dessus le ruban (ruban visible entre/autour, adouci derrière le verre) */ .offer-col{display:flex;flex-direction:column;padding:1.45rem 1.35rem;border:1px solid var(--line); background:color-mix(in srgb,var(--ink) calc(var(--offer-op)*1%),transparent);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)} .offer-col h3{font-size:var(--lab-size);font-weight:500;color:var(--sys);margin:0 0 .35rem;font-family:var(--font-titles);letter-spacing:.01em} .offer-col h3 small{font-size:.55em;letter-spacing:.16em;text-transform:uppercase;color:var(--c-label);font-weight:400;margin-left:.7em;vertical-align:middle} .offer-col p{font-size:calc(var(--txt-size)*.94);color:var(--c-body);line-height:1.7;margin:0;font-family:var(--font-body)} /* descriptif sur deux lignes (comme dans Notion) : MÊME police / taille / couleur, simple retour à la ligne */ .offer-col .odesc .ol,.offer-col .odesc .os{display:block} .offer-col .odesc .os{margin-top:.2rem} /* ── Bloc 2 « Mixeur · Formateur » — JUMEAU du bloc EI (même cadre + feu), mêmes blocs que l'offre ── */ .pratique{position:relative;overflow:hidden;border:1px solid var(--line); margin:clamp(1.6rem,5vh,3.6rem) 0 clamp(2rem,6vh,4rem);padding:clamp(1.7rem,4vw,3.1rem); display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;align-content:start; background:radial-gradient(130% 150% at var(--feu-x-prat) var(--feu-y-prat),color-mix(in srgb,var(--bg-prat) calc(var(--feu)*1%),transparent),transparent 62%),color-mix(in srgb,var(--bg-prat) 5%,transparent)} /* badges de format (Atmos / 7.1 / 5.1) — sur la ligne « Ingénieur du son », ferrés à droite ; passent dessous quand ça se resserre */ .role-row{display:flex;align-items:center;justify-content:space-between;gap:.55rem 1.4rem;flex-wrap:wrap} .formats{display:flex;align-items:center;gap:.6em;font-size:calc(.82rem*var(--fmt-scale))} .fmt{display:inline-flex;align-items:center;gap:.4em;padding:.55em .85em;border:1px solid var(--line);border-radius:.6em; font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:.04em;color:var(--c-body); background:color-mix(in srgb,var(--ink) 55%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap} .fmt-ico{height:1.6em;width:1.6em;display:block;flex:0 0 auto;opacity:.85} .fmt-logo{height:2.1em;width:auto;display:block;filter:invert(1) brightness(1.7);opacity:.9} /* logo Dolby Atmos (SVG domaine public), éclairci pour le fond sombre */ /* les 2 activités = blocs au format des 4 blocs du haut (offer-col), avec pied marques + bouton */ .offer-col.a-mix h3{color:var(--mix)} .offer-col.a-edu h3{color:var(--edu)} .offer-col .odesc{flex:0 0 auto} .pratique .odesc{margin-bottom:1.7rem} /* + d'air entre le texte et les marques/icônes */ /* rangée du bas : marques (logos/certifs) à gauche + bouton à droite, même hauteur */ .card-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem 1.4rem;margin-top:auto;flex-wrap:wrap} .card-marks{display:flex;gap:.7rem 1.05rem;flex-wrap:wrap;align-items:center;margin:0} .card-marks a{display:inline-flex;opacity:.9;transition:opacity .22s} .card-marks a:hover,.card-marks a:focus-visible{opacity:1} .me-logos.card-marks img{height:calc(38px*var(--mark-scale));width:auto;display:block} .me-certs.card-marks img{height:calc(46px*var(--mark-scale));width:auto;display:block} /* bascule Logos / Noms : en mode « Noms » on masque les images et on montre les libellés texte */ .mk-txt{display:none;font-family:var(--font-label);font-size:calc(.92rem*var(--mark-scale));color:var(--c-body);border-bottom:1px solid var(--line);padding-bottom:2px;line-height:1.2} body.marks-names .card-marks img{display:none} body.marks-names .card-marks a{opacity:1} body.marks-names .mk-txt{display:inline-block} body.marks-names .card-marks{gap:.5rem 1.3rem} /* bas du bloc société : ligne légale (SIRET · APE · Mentions) ferrée à gauche + CTA à droite ; dépli légal pleine largeur dessous */ .ent-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 2rem} /* étroit : le CTA passe au-dessus, la ligne SIRET · APE · Mentions passe dessous — les deux ferrés à gauche (aucun align-self sur le CTA, sinon il gagnerait sur align-items:flex-start ci-dessous) */ @media(max-width:640px){.ent-foot{flex-direction:column-reverse;align-items:flex-start;gap:1.1rem}} .ent-legal-line{margin:0;font-size:.72rem;letter-spacing:.02em;color:var(--c-label);font-family:var(--font-label)} .ent-legal-line .legal-link{color:var(--c-label)} /* footer OPAQUE pleine largeur (sort du .wrap) → pas de brume à gauche/droite ; contenu centré */ footer{border-top:1px solid var(--line);color:var(--c-label);font-family:var(--font-label);position:relative;z-index:2;background:var(--footer-bg);flex:1 0 auto} /* pied sur UNE ligne : les 3 rôles à gauche · copyright + nom collés à gauche du drapeau, à droite */ .foot-inner{max-width:1180px;margin:0 auto;padding:1.2rem var(--pad) 1.6rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem 2rem;flex-wrap:wrap} .foot-end{display:flex;align-items:center;gap:1rem} footer .langsw{flex:0 0 auto} .copyr-eye{background:none;border:0;color:inherit;font:inherit;padding:0;margin:0;cursor:pointer;line-height:inherit} .copyr-eye:hover,.copyr-eye:focus-visible{color:var(--c-body)} /* les 3 rôles, chacun sa couleur */ .foot-roles{font-size:1.05rem;letter-spacing:.01em;margin:0;font-family:var(--font-roles)} .foot-roles .fr-sys{color:var(--sys)} .foot-roles .fr-mix{color:var(--mix)} .foot-roles .fr-edu{color:var(--edu)} .foot-roles .fr-dot{color:var(--c-label);margin:0 .4em} /* copyright discret (© = déclencheur réglages) */ .foot-copy{font-size:.74rem;opacity:.7;letter-spacing:.02em;color:var(--c-label);margin:0;font-family:var(--font-label);white-space:nowrap} .legal-link{background:none;border:0;color:var(--c-label);font:inherit;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px} .legal{margin-top:1.1rem;max-width:64ch;color:var(--c-label)} .legal[hidden]{display:none} .legal p{font-size:.76rem;line-height:1.65;margin:.35rem 0} a:focus-visible,button:focus-visible{outline:2px solid var(--paper);outline-offset:3px} /* ── Sélecteur de langue : drapeau dans le cluster haut-droit (à droite de SIRET · APE) — défile avec le bloc ── */ .langsw{position:relative;font-family:var(--font-label)} .lang-inner{position:relative} .langsw .lang-cur{display:block;padding:5px;border:1px solid var(--line);background:rgba(10,9,12,.6); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;border-radius:5px;line-height:0; opacity:1;filter:grayscale(0);transition:opacity .55s ease,filter .55s ease,border-color .2s,background .2s} .langsw .lang-cur.dim{opacity:.5;filter:grayscale(1)} /* repos : estompé + N&B */ .lang-inner:hover .lang-cur,.langsw.open .lang-cur,.langsw .lang-cur:focus-visible{opacity:1;filter:grayscale(0);border-color:var(--soft);background:rgba(10,9,12,.8)} .langsw .flag{width:27px;height:18px;display:block;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.1)} .langsw .flag svg{width:100%;height:100%;display:block} /* le seul .langsw vit dans le