/* ========================================================================= Luca Di Stefano — Portfolio HTML / CSS / JS uniquement. Mobile-first ; le rendu "maquette" (1512px) est reproduit à l'échelle à partir de 1100px via --u (1u = 1px Figma). ========================================================================= */ /* ---------- Polices ---------- */ /* Geist et Geist Mono : sous-ensembles latins (français, anglais, latin étendu) limités aux graisses utilisées (Geist 400–700, Geist Mono 300–800) */ @font-face{font-family:"Geist";src:url("../assets/fonts/Geist-Variable-latin.woff2") format("woff2");font-weight:400 700;font-display:swap} @font-face{font-family:"Geist Mono";src:url("../assets/fonts/GeistMono-Variable-latin.woff2") format("woff2");font-weight:300 800;font-display:swap} /* « Geist Mono Outline » : intégré directement dans la feuille de style (data:) pour qu'il s'affiche à l'identique quelle que soit la façon d'ouvrir le site (double-clic sur index.html, serveur local, hébergement) ; les .woff2 du dossier assets/fonts servent de secours. Ces deux graisses n'ont pas de contours superposés : c'est ce qui garde le « A » propre quand on ne dessine que le trait. */ @font-face{font-family:"Geist Mono Outline";src:url("data:font/woff2;base64,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") format("woff2"),url("../assets/fonts/GeistMono-Medium-Outline.woff2") format("woff2");font-weight:500;font-display:swap} @font-face{font-family:"Geist Mono Outline";src:url("data:font/woff2;base64,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") format("woff2"),url("../assets/fonts/GeistMono-SemiBold-Outline.woff2") format("woff2");font-weight:600;font-display:swap} @font-face{font-family:"Nothing You Could Do";src:url("../assets/fonts/NothingYouCouldDo-Regular.woff2") format("woff2");font-display:swap} /* Police d'accent « Instrument Serif » (italique, sous-ensemble latin, licence SIL OFL : assets/fonts/InstrumentSerif-OFL.txt) : quelques mots clés des sous-titres et des textes (.accent-font) */ @font-face{font-family:"Instrument Serif";src:url("../assets/fonts/InstrumentSerif-Italic.woff2") format("woff2");font-style:italic;font-weight:400;font-display:swap} /* repli aux métriques ajustées : un mot d'accent garde la même largeur et la même hauteur de ligne avant et après le chargement de la police (pas de décalage de mise en page) */ @font-face{font-family:"Instrument Serif Fallback";src:local("Georgia Italic"),local("Georgia-Italic"),local("Georgia");font-style:italic;size-adjust:80.3%;ascent-override:123.3%;descent-override:38.6%;line-gap-override:0%} /* ---------- Tokens ---------- */ :root{ --site-max-width:1512px; /* largeur maximale du site (≈ fenêtre d'un MacBook 14") : au-delà, le contenu cesse de grandir, reste centré et seules les marges s'étendent */ --edge:max(0px,calc((100% - var(--site-max-width)) / 2)); /* marge latérale au-delà de cette largeur (0 en dessous) ; à employer dans une propriété dont le % vaut la largeur de la page (right, transform-origin…) */ --bg:#f4f3ef; --dot:#e9e9e6; --ink:#191c23; --navy:#102a56; --blue:#1754b8; --royal:#1754b8; /* bleu du bouton « Télécharger mon CV » (identique en thème sombre, contrairement à --blue) */ --bright:#397ff6; --gray:#6c6c6a; --gray-d:#3d3d3c; --outline:#bdbdbc; --text:#000; /* texte courant le plus contrasté */ --title:#102a56; /* titres et accents foncés (bleu nuit) */ --grad-a:#102a56;--grad-b:#2f6df0; /* dégradé des titres de section : bleu nuit -> bleu vif */ --hand-ink:#595959; /* annotations manuscrites */ --gray-lab:#646466; /* petits libellés */ --gray-eyebrow:#6b6b6d; /* sur-titre de la section À propos */ --dot-off:#878785; /* points de pagination inactifs (contraste ≥ 3:1 sur le fond) */ --rule:#102a56;--rule-50:rgba(16,42,86,.5);--rule-35:rgba(16,42,86,.35);--rule-20:rgba(16,42,86,.2); /* verre liquide du menu hamburger (clair) */ --lg-blur:24px;--lg-sat:160%; --lg-tint:rgba(247,246,242,.86);--lg-hl:rgba(255,255,255,.6);--lg-glow:rgba(255,255,255,.4); --lg-edge:rgba(255,255,255,.95);--lg-edge-lo:rgba(255,255,255,.4);--lg-shade:rgba(16,42,86,.14);--lg-solid:rgb(245,244,240); /* filets et frise */ --hover-fill:#102a56; /* fond des lignes « Services » au survol */ --surface-ink:#0f1c38; /* texte de la pastille « disponible » */ --accent:#0e63f4;--accent-lg:var(--bright); /* mots d'accent : bleu vif à contraste AA (4,6:1) sur le texte courant, bleu plus clair sur les grands titres (≥ 3:1) */ --card-bg:rgba(255,255,255,.55);--card-line:rgba(16,42,86,.14);--card-shadow:rgba(16,42,86,.35);--plate:rgba(255,255,255,.8); /* cards des projets (tablette / téléphone) */ --mq-bg:#ebebe8;--mq-bg-b:#e1e1dc;--mq-line:rgba(16,42,86,.18);--mq-stroke:rgba(16,42,86,.6);--mq-shadow:rgba(16,42,86,.4); /* double bandeau défilant : fonds unis (devant / derrière), filets, contour des mots au trait, ombre */ --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --sans:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --hand:"Nothing You Could Do","Bradley Hand","Segoe Print",cursive; --font-accent:"Instrument Serif","Instrument Serif Fallback",Georgia,"Times New Roman",serif; /* police d'accent : quelques mots clés (.accent-font) */ --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1); /* échelle typographique : paliers du texte courant et des libellés (px). Les titres et les grands boutons gardent les valeurs de la maquette. */ --fs-label:11px; /* libellés en capitales, sur-titres, numéros */ --fs-caption:12px; /* légendes, mentions, notes */ --fs-small:13px; /* texte secondaire, petits boutons */ --fs-body:14px; /* texte courant (paragraphes) */ --fs-ui:15px; /* liens, champs, interface */ --fs-lead:16px; /* accroches */ --gut:20px; --ft-bg:#0b1424;--ft-ink:#e9e7e1;--ft-rgb:233,231,225; /* pied de page : fond, encre, encre en rgb (sombre dans les deux thèmes) */ --ok:#56ff4d;--ok-rgb:86,255,77; /* voyant « disponible » */ --u:1px; /* surchargé ≥ 1100px */ --half-m:calc(576 * 68 * var(--vw) / 529 * var(--bk)); /* hauteur du demi-cercle en mobile / tablette */ --vw:1vw; /* largeur réelle de la page ÷ 100 (hors barre de défilement) : réajustée par le script ; 1vw tant qu'il n'a pas tourné */ --bk:.9; /* taille du bloc demi-cercle + portrait, 1 = maquette */ color-scheme:light; } html{scrollbar-gutter:stable} /* la largeur de la page ne bouge pas quand la barre de défilement apparaît / disparaît (chargement, formulaire ouvert) */ /* ---------- Base ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%} body{ margin:0; background-color:var(--bg); background-image:radial-gradient(circle at center,var(--dot) 1.6px,transparent 1.9px); background-size:24px 24px; background-position:-1px -3px; color:var(--ink); font-family:var(--mono); font-size:var(--fs-ui); line-height:1.35; overflow-x:clip; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } img,svg{max-width:100%} img{display:block;height:auto} a{color:inherit} h1,h2,h3,p,ul,ol{margin:0} ul,ol{padding:0;list-style:none} button{font:inherit;color:inherit} /* Curseur : flèche partout, jamais le curseur de saisie de texte (champs du formulaire compris) ; main uniquement au survol des liens et des boutons (et de tout ce qu'ils contiennent) */ html,body,*,*::before,*::after{cursor:default} a[href],a[href] *,button:not(:disabled),button:not(:disabled) *,[role="button"],[role="button"] *, label[for],label[for] *,summary,select,.cchip,.cchip *,input[type="radio"],input[type="checkbox"]{cursor:pointer} ::selection{background:var(--bright);color:#fff} :focus-visible{outline:2px solid var(--bright);outline-offset:3px;border-radius:6px} .skip-link{position:fixed;left:12px;top:-60px;z-index:999;padding:10px 16px;border-radius:999px;background:var(--navy);color:#fff;font-size:var(--fs-small);text-decoration:none;transition:top .3s var(--ease)} .skip-link:focus{top:12px} .br-lg{display:none} /* mot d'accent : serif d'affichage en italique au milieu d'un texte (À propos, accroche du hero, texte d'intro du contact…). 1 ou 2 mots par phrase au plus. Les serifs d'affichage paraissent plus petits à taille égale : on agrandit un peu, avec un interligne réduit pour ne pas écarter les lignes. */ .accent-font{font-family:var(--font-accent);font-style:italic;font-weight:400;font-synthesis:none;font-size:calc(var(--accent-scale,1.12) * 1em);line-height:.8;letter-spacing:-.005em;word-spacing:.1em;color:var(--accent)} .about__title .accent-font{color:var(--accent-lg)} .hero__lead,.contact__lead,.about__text p,.pd-text p{--accent-scale:1.2} /* dans les textes en Geist Mono (lettres larges), le serif étroit paraît plus petit : on l'agrandit davantage */ /* ---------- Système d'apparition au scroll ---------- */ .js [data-reveal="up"],.js [data-reveal="down"],.js [data-reveal="left"], .js [data-reveal="fade"],.js [data-reveal="btn"],.js [data-reveal="about-visual"],.js [data-reveal="eyebrow"], .js [data-reveal="line"],.js [data-reveal="tl"]{opacity:0} .js [data-reveal].is-in{opacity:1} [data-reveal="up"].is-in{animation:r-up 1s var(--ease) var(--d,0s) backwards} [data-reveal="down"].is-in{animation:r-down .9s var(--ease) var(--d,0s) backwards} [data-reveal="left"].is-in{animation:r-left .9s var(--ease) var(--d,0s) backwards} [data-reveal="fade"].is-in{animation:r-fade 1.2s ease var(--d,0s) backwards} [data-reveal="btn"].is-in{animation:r-btn 1.1s var(--ease) var(--d,0s) backwards} [data-reveal="about-visual"].is-in{animation:r-about 1.3s var(--ease) var(--d,0s) backwards} [data-reveal="tl"].is-in{animation:r-up .9s var(--ease) var(--d,0s) backwards} @keyframes r-up{from{opacity:0;translate:0 38px}} @keyframes r-down{from{opacity:0;translate:0 -26px}} @keyframes r-left{from{opacity:0;translate:-52px 0}} @keyframes r-fade{from{opacity:0}} @keyframes r-btn{from{opacity:0;translate:0 14px;scale:.9;filter:blur(7px)}} @keyframes r-about{from{opacity:0;translate:0 70px;scale:.94}} /* lettres (titres) */ .ch{display:inline-block} .js .ch{opacity:0} .is-in .ch{opacity:1;animation:ch-in .95s var(--ease) calc(var(--d,0s) + var(--i,0) * 48ms) backwards} @keyframes ch-in{from{opacity:0;translate:0 .55em;rotate:5deg}} .w{white-space:nowrap} p,dd,figcaption,blockquote{text-wrap:pretty} /* paragraphes : pas de mot seul sur la dernière ligne (navigateurs qui le gèrent ; js/typo.js lie aussi les deux derniers mots) */ .nb{white-space:nowrap} /* groupe de mots insécable : « E-business » ne se coupe pas au tiret, un nom ne se coupe pas entre le prénom et le nom */ /* changement de langue en douceur (js/main.js · changeLanguage) : le texte s'efface en 0,2 s (ci-dessous), est remplacé, puis réapparaît avec l'animation d'apparition (playTextIn). Le fondu passe par « filter: opacity() » pour ne pas toucher à l'opacité des animations d'apparition. */ html.lang-fade :where([data-i18n],.orbit__caption,.pcar__name,.pcar__meta,.pcar__desc,.pd-t){transition:filter .2s ease!important} html.lang-out :where([data-i18n],.orbit__caption,.pcar__name,.pcar__meta,.pcar__desc,.pd-t){filter:opacity(0)} /* ---------- Composants ---------- */ /* Les effets de survol (:hover) sont enveloppés dans @media (hover:hover) : sur écran tactile, un appui ne laisse plus le bouton « collé » à l'état survolé (BTN-01). */ /* ========================================================================= Liquid Glass — matériau commun à tous les boutons (pastille « disponible », boutons, réseaux, navigation flottante, commandes du carrousel) : verre translucide, flou + saturation du fond, liseré spéculaire en dégradé, lueur interne. Les animations restent volontairement discrètes. ========================================================================= */ .pill,.fnav,.prefs,.ctl:not(.ctl--pause){ --tint:rgba(255,255,255,.36); --tint-hover:rgba(255,255,255,.5); --sh:rgba(16,42,86,.32); --drop:0 10px 26px -12px var(--sh); --mx:50%;--my:0%;--hl:.5; position:relative;isolation:isolate; background-color:var(--tint); background-image:linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.08) 48%,rgba(255,255,255,0) 100%); -webkit-backdrop-filter:blur(18px) saturate(1.9);backdrop-filter:blur(18px) saturate(1.9); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.55), inset 2px 3px 4px -3px rgba(255,255,255,.95), inset -2px -3px 4px -3px rgba(255,255,255,.5), inset 0 -8px 14px -10px rgba(16,42,86,.22), var(--drop), 0 1px 2px rgba(16,42,86,.14); transition:background-color .45s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease),color .3s; } /* liseré spéculaire : la lumière accroche les bords haut-gauche et bas-droite */ .pill::before,.fnav::before,.prefs::before,.ctl:not(.ctl--pause)::before{ content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;padding:1px;pointer-events:none; background:linear-gradient(140deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.2) 30%,rgba(255,255,255,0) 50%,rgba(255,255,255,.25) 72%,rgba(255,255,255,.8) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; } /* reflet doux qui suit le curseur (positionné par le JS) */ .pill::after,.ctl:not(.ctl--pause)::after{ content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;opacity:0; background:radial-gradient(100px circle at var(--mx) var(--my),rgba(255,255,255,var(--hl)),rgba(255,255,255,0) 70%); transition:opacity .5s var(--ease); } @media (hover:hover){.pill:hover::after,.ctl:not(.ctl--pause):hover::after{opacity:1}} .pill>*,.ctl>*,.fnav>*,.prefs>*{position:relative;z-index:2} @media (hover:hover){.pill:hover,.ctl:not(.ctl--pause):hover{ --drop:0 14px 30px -12px var(--sh); background-color:var(--tint-hover);transform:translateY(-1px); }} .pill:active,.ctl:not(.ctl--pause):active{transform:translateY(0) scale(.985);transition-duration:.15s} /* ========================================================================= Boutons d'action — « Disponible pour de nouveaux projets », Contact, Collaborons, Télécharger mon CV Verre liquide teinté : liseré spéculaire, lueur interne, légère inclinaison vers le curseur, reflet qui traverse le verre à l'apparition et au survol, ressort à la relâche. ========================================================================= */ .avail,.btn-glass,.btn{ --tint:rgba(255,255,255,.4);--tint-hover:rgba(255,255,255,.6); --sh:rgba(16,42,86,.34);--inner:rgba(16,42,86,.18);--edge:rgba(16,42,86,.16); --drop:0 12px 28px -14px var(--sh); --tx:0;--ty:0;--lift:0px;--sc:1;--spring:cubic-bezier(.34,1.32,.64,1); position:relative;isolation:isolate;overflow:hidden;cursor:pointer; text-decoration:none;white-space:nowrap;border:0;-webkit-tap-highlight-color:transparent; background-color:var(--tint); background-image:linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.05) 46%,rgba(6,20,60,.16) 100%); -webkit-backdrop-filter:blur(18px) saturate(1.9);backdrop-filter:blur(18px) saturate(1.9); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.5), inset 0 1px 0 rgba(255,255,255,.7), inset 2px 3px 4px -3px rgba(255,255,255,.9), inset -2px -3px 4px -3px rgba(255,255,255,.4), inset 0 -10px 16px -10px var(--inner), 0 0 0 .5px var(--edge), var(--drop), 0 1px 2px rgba(16,42,86,.18); transform:perspective(700px) translateY(var(--lift)) rotateX(calc(var(--ty) * -3deg)) rotateY(calc(var(--tx) * 4deg)) scale(var(--sc)); transition:background-color .5s var(--ease),box-shadow .5s var(--ease),transform .6s var(--spring),color .3s; } /* liseré spéculaire */ .avail::before,.btn-glass::before,.btn::before{ content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;padding:1px;pointer-events:none; background:linear-gradient(140deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.2) 30%,rgba(255,255,255,0) 50%,rgba(255,255,255,.25) 72%,rgba(255,255,255,.8) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; } /* reflet qui traverse le verre */ .avail::after,.btn-glass::after,.btn::after{ content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%); transform:translateX(-125%); } .is-in.avail::after,.is-in.btn-glass::after,.is-in.btn::after{animation:glint 1.4s var(--ease-io) calc(var(--d,0s) + .8s) backwards} @keyframes glint{from{transform:translateX(-125%)}to{transform:translateX(125%)}} .avail>*,.btn-glass>*,.btn>*{position:relative;z-index:2} @media (hover:hover){.avail:hover,.btn-glass:hover,.btn:hover{ --lift:-2px;--sc:1.012;--drop:0 20px 36px -14px var(--sh); background-color:var(--tint-hover); transition:background-color .4s var(--ease),box-shadow .4s var(--ease),transform .3s var(--ease),color .3s; }} @media (hover:hover){.avail:hover::after,.btn-glass:hover::after,.btn:hover::after{transform:translateX(125%);transition:transform 1s var(--ease)}} .avail:active,.btn-glass:active,.btn:active{--lift:0px;--sc:.965;transition-duration:.12s} /* icône flèche */ .ico{flex:none;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease),opacity .3s} @media (hover:hover){.btn-glass:hover .ico,.btn:hover .ico{transform:translate(2px,2px)}} @media (hover:hover){.btn--royal:hover .ico{transform:translate(2px,-2px)}} /* Pastille « Disponible pour de nouveaux projets » */ .avail{ --tint:rgba(238,245,255,.5);--tint-hover:rgba(248,251,255,.72);--inner:rgba(23,84,184,.22);--edge:rgba(23,84,184,.16); display:inline-flex;align-items:center;gap:10px; padding:0 14px 0 12px;height:38px;border-radius:999px; font:600 13px/1 var(--sans);letter-spacing:-.012em;color:var(--surface-ink); background-image:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.08) 50%,rgba(23,84,184,.06) 100%); } .avail .ico{width:.95em;height:.95em;margin-left:.2em;opacity:.45} @media (hover:hover){.avail:hover .ico{opacity:1;transform:translate(2px,-2px)}} .avail__dot{ position:relative;flex:none;width:14px;height:14px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#c6ffc1 0%,var(--ok) 46%,#1ed418 100%); box-shadow:0 0 0 3px rgba(var(--ok-rgb),.2),0 0 10px rgba(var(--ok-rgb),.7),inset 0 -1px 1px rgba(0,90,0,.3); } .avail__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ok);animation:ping 2.6s ease-out infinite} @keyframes ping{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.8);opacity:0}} /* Contact / Contactez moi / Collaborons / CV : verre teinté */ .btn-glass,.btn{ --h:44px;--pf:.5; display:inline-flex;align-items:center;justify-content:center;gap:.6em; height:var(--h);padding:0 calc(var(--h) * var(--pf));border-radius:999px; color:#fff;text-shadow:0 1px 1px rgba(6,20,60,.3); background-image:linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.04) 50%,rgba(6,20,60,.22) 100%); } .btn-glass{ --h:40px;--pf:.52;--tint:rgba(38,78,160,.92);--tint-hover:rgba(44,88,178,.96);--sh:rgba(23,84,184,.55);--inner:rgba(4,14,44,.55);--edge:rgba(16,42,100,.5); font:500 17px/1 var(--sans);letter-spacing:-.012em; } .btn-glass--xl{--h:48px;font-size:22px} /* Contact de la barre du hero : saphir plus vif, même hauteur que la pastille « Disponible », arrière-plan de la flèche en pastille de verre (au survol : la pastille s'éclaircit et la flèche est remplacée par une autre qui entre depuis le coin opposé). */ .topnav .btn-glass{ --h:42px;--tint:rgba(29,88,212,.95);--tint-hover:rgba(38,102,232,.98);--sh:rgba(37,99,235,.6);--inner:rgba(4,20,80,.5);--edge:rgba(10,46,140,.55); gap:calc(var(--h) * .26);padding:0 calc(var(--h) * .12) 0 calc(var(--h) * .4); font-size:17px;letter-spacing:-.01em; background-image:linear-gradient(180deg,rgba(255,255,255,.36) 0%,rgba(255,255,255,.06) 46%,rgba(4,18,70,.26) 100%); } .btn-glass__chip{ position:relative;flex:none;display:grid;place-items:center;overflow:hidden; width:calc(var(--h) * .76);height:calc(var(--h) * .76);border-radius:50%; background:linear-gradient(180deg,rgba(255,255,255,.36) 0%,rgba(255,255,255,.14) 100%); box-shadow:inset 0 0 0 .5px rgba(255,255,255,.6),inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(4,20,80,.28); transition:background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease); } .btn-glass__chip .ico{grid-area:1 / 1;width:48%;height:48%;stroke-width:2.1} .btn-glass__chip .ico + .ico{transform:translate(-170%,-170%)} @media (hover:hover){.topnav .btn-glass:hover .btn-glass__chip{background:#fff;color:#1b4cae;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.9),0 4px 10px -3px rgba(4,20,80,.45)}} @media (hover:hover){.topnav .btn-glass:hover .btn-glass__chip .ico:first-child{transform:translate(170%,170%)}} @media (hover:hover){.topnav .btn-glass:hover .btn-glass__chip .ico + .ico{transform:none}} .btn{--h:46px;--pf:.34;font:500 16px/1 var(--mono);letter-spacing:-.005em} .btn--bright{--tint:rgba(44,106,230,.96);--tint-hover:rgba(47,111,232,1);--sh:rgba(57,127,246,.6);--inner:rgba(8,40,130,.5);--edge:rgba(20,70,190,.5)} .btn--royal{ --h:48px;--pf:.44;--tint:rgba(23,84,184,.95);--tint-hover:rgba(30,98,208,.98);--sh:rgba(23,84,184,.6);--inner:rgba(3,14,44,.6);--edge:rgba(10,38,100,.55); font-size:12.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase; } .btn--royal>span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px} button.btn{font-family:var(--mono)} /* Pastilles réseaux sociaux */ .socials{display:flex;flex-wrap:wrap;gap:10px} .pill{ --tint:rgba(255,255,255,.55);--tint-hover:rgba(255,255,255,.7); display:inline-flex;align-items:center;gap:.5em; height:40px;padding:0 18px 0 12px;border-radius:999px; font:500 var(--fs-ui)/1 var(--mono);color:var(--text);text-decoration:none;white-space:nowrap; } .pill__icon{position:relative;flex:none;display:block;width:22px;height:22px} .pill__icon img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .4s ease} .pill__icon .color{opacity:0} .pill__icon svg{display:block;width:100%;height:100%;transition:color .3s} @media (hover:hover){.pill:hover .pill__icon .bw{opacity:0}} @media (hover:hover){.pill:hover .pill__icon .color{opacity:1}} @media (hover:hover){.pill:hover .pill__icon--dribbble svg{color:#ea4c89}} /* ombre portée de la couleur du logo au survol (--brand = r,g,b de la marque) */ .pill[href*="dribbble.com"]{--brand:234,76,137} .pill[href*="linkedin.com"]{--brand:0,122,187} .pill[href*="behance.net"]{--brand:10,123,255} .pill[href*="github.com"]{--brand:92,107,192} .pill[href*="instagram.com"]{--brand:252,36,91} @media (hover:hover){.pill[href*="dribbble.com"]:hover,.pill[href*="linkedin.com"]:hover,.pill[href*="behance.net"]:hover,.pill[href*="github.com"]:hover,.pill[href*="instagram.com"]:hover{ --drop:0 16px 28px -10px rgba(var(--brand),.62),0 5px 12px -5px rgba(var(--brand),.4); }} /* Instagram : dégradé violet → rose → orange, repris en trois ombres */ @media (hover:hover){.pill[href*="instagram.com"]:hover{ --drop:-8px 14px 26px -12px rgba(158,48,165,.6),8px 14px 26px -12px rgba(255,133,13,.62),0 18px 28px -12px rgba(252,36,91,.6); }} /* ---------- Préférences d'affichage : thème (et langue) ---------- */ .prefs{ --p-ink:var(--ink); display:inline-flex;align-items:center;gap:2px;height:38px;padding:0 5px;border-radius:999px; --tint:rgba(255,255,255,.5);--sh:rgba(16,42,86,.28);--drop:0 10px 22px -12px var(--sh); } .prefs button{ position:relative;z-index:2;display:grid;place-items:center;border:0;padding:0;cursor:pointer;background:none;color:var(--p-ink); font:600 var(--fs-label)/1 var(--mono);letter-spacing:.06em;-webkit-tap-highlight-color:transparent; transition:background .35s var(--ease),color .3s,transform .4s var(--ease); } .theme-btn{width:30px;height:30px;border-radius:50%} .theme-btn svg{grid-area:1/1;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .55s var(--ease),opacity .35s} .theme-btn .i-moon{opacity:0;transform:rotate(-70deg) scale(.5)} html[data-theme="dark"] .theme-btn .i-sun{opacity:0;transform:rotate(70deg) scale(.5)} html[data-theme="dark"] .theme-btn .i-moon{opacity:1;transform:none} @media (hover:hover){.theme-btn:hover{background:rgba(23,84,184,.12)}} .theme-btn:active{transform:scale(.92)} /* sélecteur de langue FR / EN */ .lang{display:inline-flex;align-items:center;gap:1px;margin-left:3px;padding:2px;height:30px;border-radius:999px;background:rgba(16,42,86,.07);position:relative;z-index:2} .lang button{height:26px;padding:0 9px;border-radius:999px;font:600 var(--fs-label)/1 var(--mono);letter-spacing:.08em;color:var(--p-ink);opacity:.72;transition:background .35s var(--ease),color .3s,opacity .3s,box-shadow .35s} @media (hover:hover){.lang button:hover{opacity:1}} .lang button[aria-pressed="true"]{background:#fff;color:var(--blue);opacity:1;box-shadow:0 1px 3px rgba(16,42,86,.2),inset 0 0 0 .5px rgba(255,255,255,.9)} .fnav .lang{height:30px;margin-left:2px} .fnav .lang button{height:26px;padding:0 8px;font-size:var(--fs-label)} .sitefooter .lang{background:rgba(255,255,255,.08)} .sitefooter .lang button[aria-pressed="true"]{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.3)} html[data-theme="dark"] .lang{background:rgba(255,255,255,.08)} html[data-theme="dark"] .lang button[aria-pressed="true"]{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.3)} /* dans la barre flottante : sans capsule, séparé des liens */ .fnav__sep,.fnav .prefs{display:none} .fnav .prefs{height:auto;padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;--p-ink:var(--ink)} .fnav .prefs::before{display:none} .fnav .theme-btn{width:26px;height:26px} /* dans le pied de page (toujours sombre) */ .sitefooter .prefs{--p-ink:var(--ft-ink);--tint:rgba(255,255,255,.08);--sh:rgba(0,0,0,.5)} @media (hover:hover){.sitefooter .theme-btn:hover{background:rgba(255,255,255,.12)}} /* réglages thème / langue : en haut à droite du pied de page (téléphone : sur la ligne au-dessus de l'accroche) */ .sitefooter__cta .prefs{flex:none;order:-1;align-self:flex-end} /* Annotations manuscrites */ .handnote{font-family:var(--hand);color:var(--hand-ink);line-height:1.2;letter-spacing:.06em} .handnote span{display:block;white-space:nowrap} .handarrow{color:var(--hand-ink);overflow:visible} .handarrow .draw{stroke-dasharray:1;stroke-dashoffset:1} .is-in .handarrow .draw,.is-in.handarrow .draw{animation:draw 1.4s var(--ease-io) .7s forwards} .is-in .handarrow .draw:nth-child(2){animation-delay:1.7s;animation-duration:.6s} @keyframes draw{to{stroke-dashoffset:0}} .js .handnote{opacity:0} .is-in .handnote{opacity:1;animation:r-fade 1s ease .5s backwards} /* ---------- Fond de points réactif au curseur (canvas derrière le contenu) ---------- */ .dotfield{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none} /* ---------- Barre de progression de lecture ---------- */ .progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;pointer-events:none;opacity:0;transition:opacity .45s ease} .progress.is-on{opacity:1} .progress i{ display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--p,0)); background:linear-gradient(90deg,#6aa5ff 0%,#397ff6 45%,#1754b8 100%); border-radius:0 3px 3px 0; box-shadow:0 0 10px rgba(57,127,246,.55),0 1px 2px rgba(23,84,184,.35); will-change:transform; } /* ---------- Navigation flottante ---------- */ .fnav{ position:fixed;z-index:60;left:50%;bottom:max(12px,env(safe-area-inset-bottom)); display:flex;align-items:center;gap:clamp(10px,calc(3.6 * var(--vw)),18px); max-width:calc(calc(100 * var(--vw)) - 24px);padding:0 16px;height:40px;border-radius:999px; --tint:rgba(255,255,255,.28);--sh:rgba(16,42,86,.38);--mx:50%;--my:0%; font:400 var(--fs-label)/1 var(--mono);white-space:nowrap; /* Liquid Glass : verre très translucide, reflets doux, bord lumineux, lueur interne et épaisseur */ background-image: radial-gradient(130% 170% at 16% -40%,rgba(255,255,255,.78),rgba(255,255,255,0) 56%), radial-gradient(90% 130% at 92% 150%,rgba(190,215,255,.42),rgba(255,255,255,0) 60%), linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.04) 55%,rgba(255,255,255,.2)); -webkit-backdrop-filter:blur(22px) saturate(2.3) brightness(1.08);backdrop-filter:blur(22px) saturate(2.3) brightness(1.08); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.78), inset 1.5px 2px 3px -1px rgba(255,255,255,.95), inset -1.5px -2px 3px -1px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,.3), inset 0 -9px 14px -9px rgba(23,84,184,.22), 0 22px 40px -16px var(--sh), 0 2px 6px rgba(16,42,86,.12); translate:-50% 180%;opacity:0;pointer-events:none;visibility:hidden; transition:translate .8s var(--ease),opacity .5s ease,visibility 0s linear .8s; } .fnav.is-visible{translate:-50% 0;opacity:1;pointer-events:auto;visibility:visible;transition:translate .8s var(--ease),opacity .5s ease,visibility 0s} /* reflet doux qui suit le curseur */ .fnav::after{ content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;opacity:0; background:radial-gradient(120px circle at var(--mx) var(--my),rgba(255,255,255,.6),rgba(255,255,255,0) 70%); transition:opacity .5s var(--ease); } @media (hover:hover){.fnav:hover::after{opacity:1}} .fnav a{position:relative;padding:8px 2px;color:var(--ink);text-decoration:none;transition:color .3s} .fnav a::after{content:"";position:absolute;left:2px;right:2px;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)} .fnav a.is-active::after{transform:scaleX(1);transform-origin:left} @media (hover:hover){.fnav a:hover::after{transform:scaleX(1);transform-origin:left}} .fnav a.is-active{color:var(--blue)} /* ---------- Hero ---------- */ .hero{position:relative;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;padding:16px var(--gut) 0;overflow:clip;max-width:var(--site-max-width);margin-inline:auto} .topbar{position:relative;z-index:6;order:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px} .topbar .prefs{margin-left:auto} /* mobile : le groupe se place à droite */ .topnav{display:none;align-items:center;gap:clamp(24px,calc(4.5 * var(--vw)),68px)} .topnav__link{--roll:var(--blue);display:none;font:400 14px/calc(1em + 12px) var(--mono);color:var(--ink);text-decoration:none;position:relative;overflow:hidden} /* survol « Simple Floating Nav » (liens de la barre du hero uniquement) : le texte monte et sort par le haut pendant qu'une copie de la couleur --roll monte à sa place. La copie est l'ombre portée du texte (text-shadow décalé d'une ligne, sans doublon dans le HTML : la traduction suit toute seule) ; le lien rogne ce qui dépasse d'une ligne. Au retour du curseur, le mouvement s'inverse. */ .topnav__link .roll{--roll-h:calc(1em + 12px);display:inline-block;text-shadow:0 var(--roll-h) 0 var(--roll);transition:transform .45s var(--ease)} .topnav__link:focus-visible .roll{transform:translateY(calc(-1 * var(--roll-h)))} @media (hover:hover){.topnav__link:hover .roll{transform:translateY(calc(-1 * var(--roll-h)))}} .hero__name{ position:relative;z-index:3;order:2;margin:clamp(30px,calc(9 * var(--vw)),64px) 0 0; font-size:clamp(56px,calc(19.5 * var(--vw)),150px);line-height:.93;font-weight:700;letter-spacing:0; } .hero__line{display:block;white-space:nowrap} .hero__line--outline{font-family:"Geist Mono Outline",var(--mono);font-weight:600;color:transparent;-webkit-text-stroke:.0155em var(--ink);paint-order:stroke fill} .hero__line--outline .w{display:block} .hero__line--solid{color:var(--title)} .hero__line--solid{font-size:1.012em} .hero__line--outline{font-size:1.03em;line-height:.838;letter-spacing:-.01em} .hero__intro{position:relative;z-index:3;order:3;margin-top:clamp(28px,calc(6 * var(--vw)),44px);max-width:440px} .hero__role{font:600 clamp(20px,calc(5.4 * var(--vw)),26px)/1.2 var(--mono);letter-spacing:-.01em;margin-bottom:12px} .hero__lead{font:300 clamp(16px,calc(4.3 * var(--vw)),19px)/1.5 var(--mono);color:var(--gray-d);max-width:15.5em;margin-bottom:26px;text-wrap:balance} /* lignes équilibrées : le mot d'accent, plus étroit, ne doit pas laisser un mot seul à la dernière ligne */ .socials--hero{position:relative;z-index:3;order:4;margin-top:30px;display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));align-items:stretch} .socials--hero li{display:block;min-width:0} .socials--hero .pill{display:flex;width:100%} .hero__portrait-wrap{position:absolute;right:calc(-.09 * var(--bk,1) * min(100%,var(--site-max-width)) + var(--edge));bottom:-3%;width:calc(.74 * var(--bk,1) * min(100%,var(--site-max-width)))} .hero__portrait{width:100%;height:auto} /* ========================================================================= Bloc visuel unique : le demi-cercle, le portrait et le dégradé clair du bas, dans le hero. Un seul élément, au premier plan : il apparaît, suit le défilement et réagit au survol d'un seul tenant. Il s'arrête à la jonction avec le bandeau défilant (le masque fond le bas du bloc dans le fond de la page : le fond reste fixe pendant que le contenu glisse dedans avec la parallaxe). ========================================================================= */ .hero__spacer{order:5;height:calc(var(--half-m) + 14px);margin-top:18px} .seam{position:relative;height:0;pointer-events:none} .fusion{ --s:calc(calc(68 * var(--vw)) / 529 * var(--bk)); /* pixels par unité de la maquette */ --hh:calc(576 * var(--s)); /* hauteur du bloc = moitié haute du demi-cercle (son centre est sur la jonction) */ --fade:clamp(64px,calc(16 * var(--vw)),130px); /* hauteur du dégradé clair */ --tx:0;--ty:0;--hv:0;--par:0px; /* survol (tx, ty, hv) et parallaxe de défilement (par) : pilotés par le JS */ position:absolute;left:0;right:0;top:calc(var(--hh) * -1 - var(--free,0px));height:var(--hh);z-index:8;pointer-events:none; overflow-x:clip; /* ce qui dépasse à droite de la page est coupé (pas de défilement horizontal) */ --m:linear-gradient(to bottom, #000 calc(var(--hh) - var(--fade)),rgba(0,0,0,.9) calc(var(--hh) - var(--fade) * .8),rgba(0,0,0,.68) calc(var(--hh) - var(--fade) * .58), rgba(0,0,0,.4) calc(var(--hh) - var(--fade) * .36),rgba(0,0,0,.16) calc(var(--hh) - var(--fade) * .17),transparent var(--hh)); -webkit-mask-image:var(--m);mask-image:var(--m); } .fusion__in{ position:absolute;inset:0;transform-origin:calc(var(--edge) + (100% - 2 * var(--edge)) * .8) 100%;will-change:transform; /* pivot à 80 % de la colonne, comme avant à 80 % de la page */ transform:translate3d(0,var(--par),0) perspective(1400px) rotateX(calc(var(--ty) * -2deg)) rotateY(calc(var(--tx) * 2.6deg)) scale(calc(1 + var(--hv) * .012)); } /* le demi-cercle : 580 × 576 unités (moitié haute), centre sur la jonction ; son bord gauche est à 529 unités du bord droit de la page (comme la maquette) */ .fusion__circle{position:absolute;right:calc(-51 * var(--s) + var(--edge));top:0;width:calc(580 * var(--s));height:calc(576 * var(--s));max-width:none;transform-origin:99% 100%} /* le demi-cercle est un quart de disque dont le bord droit est vertical (51 u au-delà de la colonne) : sur grand écran, ce bord deviendrait visible. Il s'efface donc en dégradé sur ses derniers 100 u (progressivement : --ov va de 0 à 1 entre 1512 et 1612 px). Le 1513 px est la largeur maximale (une requête média ne peut pas lire --site-max-width) */ @media (min-width:1513px){ .fusion__circle{ --mf:calc(100 * var(--s) * var(--ov,0)); -webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--mf)),transparent 100%); mask-image:linear-gradient(to right,#000 calc(100% - var(--mf)),transparent 100%); } } .fusion__hero{position:absolute;left:0;right:0;top:0;height:var(--hh);overflow:clip} /* profondeur au survol : le portrait et le demi-cercle se décalent légèrement en sens inverse */ .fusion .hero__portrait-wrap{transform:translate3d(calc(var(--tx) * -10px),calc(var(--ty) * -6px),0)} .fusion__circle{translate:calc(var(--tx) * 5px) calc(var(--ty) * 3px)} /* apparition : le demi-cercle grandit depuis la jonction, puis le portrait se lève dans le bleu */ .js:not(.loader-done) .fusion:not(.is-in) .fusion__in{opacity:0} .fusion.is-in .fusion__in{animation:fusion-fade .9s ease .55s both} .fusion.is-in .fusion__circle{animation:fusion-grow 1.6s var(--ease) .55s both} .fusion.is-in .hero__portrait-wrap{animation:fusion-rise 1.5s var(--ease) .95s both} @keyframes fusion-fade{from{opacity:0}} @keyframes fusion-grow{from{scale:.55;opacity:0}} @keyframes fusion-rise{from{translate:0 9%;opacity:0}} /* ========================================================================= Double bandeau défilant (entre le hero et Projets) : deux bandeaux inclinés, superposés, qui défilent en sens inverse. Devant : domaines d'expertise. Derrière : mots-clés. Même dessin pour les deux : fond uni, filets fins, texte en Geist Mono gras ; les entrées paires sont dessinées au trait (Geist Mono Outline), les autres en plein ; séparateur : petit losange bleu. Dans chaque bandeau, deux groupes identiques côte à côte ; le défilement les décale de 50 % puis recommence : la boucle est invisible. ========================================================================= */ .marquee{ --mq-size:clamp(24px,calc(4 * var(--vw)),64px); --mq-h:calc(var(--mq-size) * 1.84); /* hauteur d'un bandeau */ position:relative;z-index:9;overflow-x:clip;height:calc(var(--mq-h) * 2.12); font:700 var(--mq-size)/1 var(--mono);letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;color:var(--title); -webkit-user-select:none;user-select:none; } /* chaque bandeau déborde de la page des deux côtés : une fois incliné, ses extrémités restent hors de l'écran */ .marquee__band{position:absolute;left:-6%;width:112%;height:var(--mq-h);display:flex;align-items:center;overflow:hidden;border-block:1px solid var(--mq-line)} .marquee__band--a{top:calc(var(--mq-h) * .12);z-index:2;rotate:-2deg;background:var(--mq-bg);box-shadow:0 14px 30px -16px var(--mq-shadow)} .marquee__band--b{top:calc(var(--mq-h) * .92);z-index:1;rotate:-1.4deg;background:var(--mq-bg-b)} /* durée d'un tour : réglée par taille d'écran pour garder une vitesse de lecture tranquille (≈ 28 à 50 px/s) ; l'anglais est plus court d'un cinquième */ .marquee{--mq-dur-a:144s;--mq-dur-b:54s} @media (min-width:700px){.marquee{--mq-dur-a:160s;--mq-dur-b:64s}} @media (min-width:1100px){.marquee{--mq-dur-a:208s;--mq-dur-b:80s}} html[lang="en"] .marquee{--mq-k:.81} .marquee__track{display:flex;width:max-content;animation:marquee calc(var(--mq-dur-a) * var(--mq-k,1)) linear infinite;will-change:transform} .marquee__band--b .marquee__track{animation-duration:var(--mq-dur-b);animation-direction:reverse} .marquee__group{display:flex;flex:none;align-items:center;margin:0;padding:0;list-style:none} .marquee__item{display:flex;flex:none;align-items:center} .marquee__item::after{ content:"";flex:none;width:.24em;height:.24em;margin:0 .95em;rotate:45deg;border-radius:.03em; background:linear-gradient(135deg,#8fc5ff,var(--bright) 55%,#1f63d8);box-shadow:0 0 .55em rgba(57,127,246,.45); } .marquee__item:nth-child(even){font-family:"Geist Mono Outline",var(--mono);font-weight:500;color:transparent;-webkit-text-stroke:.02em var(--mq-stroke);paint-order:stroke fill} @keyframes marquee{to{transform:translateX(-50%)}} /* bouton pause (ANIM-02) : pastille de verre posée à l'extrémité droite du bandeau de derrière */ .marquee{--mq-btn:clamp(30px,calc(3 * var(--vw)),42px)} .marquee .marquee__pause{position:absolute;z-index:5;right:calc(var(--gut) + var(--edge));bottom:calc(var(--mq-h) * .7 + var(--vw) * 1.2 - var(--mq-btn) / 2);width:var(--mq-btn);height:var(--mq-btn)} .marquee .marquee__pause svg{width:52%;height:52%;fill:currentColor} .marquee__pause .mq-play,.cvbadge__pause .mq-play{display:none} .marquee__pause[aria-pressed="true"] .mq-pause,.cvbadge__pause[aria-pressed="true"] .mq-pause{display:none} .marquee__pause[aria-pressed="true"] .mq-play,.cvbadge__pause[aria-pressed="true"] .mq-play{display:block} .marquee.is-paused .marquee__track{animation-play-state:paused} /* ---------- Sections ---------- */ .stage{display:contents} .hero .stage{display:flex;flex-direction:column} .section{position:relative;min-height:100vh;min-height:100svh;padding:clamp(72px,calc(14 * var(--vw)),104px) var(--gut) clamp(64px,calc(10 * var(--vw)),96px);overflow:clip;max-width:var(--site-max-width);margin-inline:auto} .section__head{position:relative} .eyebrow{display:flex;align-items:center;gap:8px;font:400 var(--fs-label)/1 var(--mono);color:var(--blue);margin-bottom:clamp(4px,calc(1.4 * var(--vw)),10px)} .eyebrow b{font-weight:700} .eyebrow i{display:block;width:40px;height:1px;background:var(--blue);transform-origin:left} .is-in.eyebrow i{animation:grow 1s var(--ease) .15s backwards} .is-in.eyebrow span{animation:r-left .9s var(--ease) .25s backwards} @keyframes grow{from{transform:scaleX(0)}} .section-title{ --t:min(115px,calc((calc(100 * var(--vw)) - 2 * var(--gut)) / max(7, calc(var(--tn, 11) * .63636)))); /* 7 = « EXPÉRIENCES » (11 lettres de 0,6 em + interlettrage) : le plus long titre tient dans la largeur de contenu ; --tn : nombre de lettres d'un titre plus long (sous-section d'un projet) */ --st:.47; /* position du texte plein : fraction de --t depuis le haut (reprise par le menu hamburger) */ position:relative;height:calc(var(--t) * 1.02); } .section-title .outline{ display:block;font-family:"Geist Mono Outline",var(--mono);font-weight:500; font-size:var(--t);line-height:1;letter-spacing:.035em;color:transparent;-webkit-text-stroke:max(.6px,.012em) var(--outline);paint-order:stroke fill;white-space:nowrap;will-change:transform; } .section-title .solid{ position:absolute;left:0;top:calc(var(--t) * var(--st)); font-size:calc(var(--t) * .556);font-weight:700;line-height:1.05;letter-spacing:0;color:var(--title);white-space:nowrap; } /* dégradé horizontal dans les lettres du titre : chaque lettre (.ch, créée par js/main.js) reçoit sa tranche du même dégradé, calculée avec sa colonne (--x) sur le nombre total de colonnes (--n) ; la police est à chasse fixe (1ch par lettre). Par lettre plutôt que sur le titre entier, pour que l'animation d'apparition (glissement et rotation de chaque lettre) reste intacte. Sans JavaScript, ou si background-clip:text n'est pas pris en charge, la couleur pleine ci-dessus s'applique. */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ .section-title .solid .ch{ background:linear-gradient(90deg,var(--grad-a),var(--grad-b)) no-repeat; background-size:calc(var(--n,1) * 1ch) 100%;background-position:calc(var(--x,0) * -1ch) 0; -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } } .is-in .outline{animation:outline-in 1.4s var(--ease) backwards} @keyframes outline-in{from{opacity:0;letter-spacing:.12em}} /* ---------- 02 · Projets ---------- */ .projects{padding-bottom:clamp(36px,calc(7 * var(--vw)),64px)} .orbit{ position:relative;container-type:inline-size; width:100%; touch-action:pan-y;-webkit-user-select:none;user-select:none; } .orbit__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none} .orbit__ring{stroke:var(--bright);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:0} .js .orbit__ring{stroke-dashoffset:1} .js .orbit.is-in .orbit__ring{stroke-dashoffset:0;transition:stroke-dashoffset 2.6s var(--ease-io) .25s} .orbit__inner{stroke:var(--bright);stroke-width:1.3;stroke-dasharray:7 6;animation:dash 60s linear infinite} .js .orbit__inner{opacity:0} .js .orbit.is-in .orbit__inner{opacity:1;transition:opacity 1.2s ease .8s} @keyframes dash{to{stroke-dashoffset:-520}} .orbit__nodes circle{fill:var(--bright)} .js .orbit:not(.is-in) .orbit__nodes{opacity:0} .orbit__nodes{transition:opacity 1s ease 1.2s} .orbit__items{position:absolute;inset:0;pointer-events:none} .orbit__item{ position:absolute;left:0;top:0;display:grid;align-items:center;min-height:26px; width:max(58px,calc(var(--w) * var(--k))); padding:0;border:0;background:none;cursor:pointer;pointer-events:auto; will-change:transform;-webkit-tap-highlight-color:transparent; } .orbit__item img{ width:100%;height:auto;pointer-events:none; filter:grayscale(1) contrast(1.05);opacity:1; transition:filter .7s ease,opacity .7s ease,transform .7s var(--ease); } .orbit__item:focus-visible img,.orbit__item.is-active img{filter:none;opacity:1} @media (hover:hover){.orbit__item:hover img{filter:none;opacity:1}} @media (hover:hover){.orbit__item:hover img{transform:scale(1.07)}} .orbit__item:focus-visible{outline-offset:10px;border-radius:14px} .js .orbit:not(.is-in) .orbit__item img{opacity:0} .orbit.is-in .orbit__item img{animation:pop 1s var(--ease) calc(.55s + var(--n,0) * .13s) backwards} @keyframes pop{from{opacity:0;scale:.4;rotate:-12deg}} .orbit__center{ position:absolute;left:51.45%;top:50%;translate:-50% -50%; display:grid;justify-items:center;text-align:center;pointer-events:none; } .orbit__kicker{font:500 max(13px,2.12cqw)/1 "Geist Mono Outline",var(--mono);letter-spacing:.2em;color:transparent;-webkit-text-stroke:.04em var(--title);margin-right:-.2em} .orbit__title{margin-top:max(6px,.8cqw);font:700 max(13px,2.12cqw)/1.1 var(--mono);letter-spacing:.09em;color:var(--blue);margin-right:-.09em} .orbit__pager{pointer-events:auto;display:flex;gap:0;margin-top:max(8px,calc(4.1cqw - 8px))} /* chaque point est un bouton de 24 × 24 px (cible tactile WCAG 2.2) ; seul le centre (--dot) est dessiné */ .orbit__pager button{ --dot:max(8px,.72cqw); width:24px;height:24px;padding:calc((24px - var(--dot)) / 2);border:0;border-radius:50%; background:var(--dot-off);background-clip:content-box;cursor:pointer;transition:background .4s,transform .5s var(--ease); } @media (hover:hover){.orbit__pager button:hover{background:#9bbcf7;background-clip:content-box}} .orbit__pager button[aria-current="true"]{background:var(--bright);background-clip:content-box;transform:scale(1.2)} .orbit__center>*{transition:opacity .6s ease} .js .orbit:not(.is-in) .orbit__center>*{opacity:0} .orbit__bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px} .orbit__caption{display:grid;gap:3px;font:400 var(--fs-caption)/1.35 var(--mono);color:var(--gray-d);min-width:0;transition:opacity .35s ease,translate .5s var(--ease)} .orbit__caption.is-swap{opacity:0;translate:0 6px} .orbit__count{color:var(--blue);font-weight:600;letter-spacing:.12em} .orbit__name{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .orbit__meta{color:var(--gray)} .orbit__controls{display:flex;align-items:center;gap:12px;flex:none} /* ========================================================================= Projets — tablette et téléphone : carrousel de cards en boucle infinie (js/main.js · initProjectCarousel) L'orbite ne s'affiche que sur le layout desktop (≥ 1100 px de large et ≥ 590 px de haut) ; partout ailleurs, ce sont ces cards. Une card centrale bien visible, ses voisines qui dépassent de chaque côté ; position et opacité pilotées par le script. ========================================================================= */ .pcar{display:none;position:relative;margin-top:clamp(8px,calc(2 * var(--vw)),20px)} @media (max-width:1099px),(max-height:589px){ .has-pcar .orbit,.has-pcar .orbit__bar{display:none} .has-pcar .pcar{display:block} } .pcar__viewport{ --pc-w:calc(70 * var(--vw)); /* largeur d'une card : ≈ 70 % de l'écran sur téléphone */ margin:0 calc(-1 * var(--gut));padding:6px 0 22px;overflow-x:clip; touch-action:pan-y;-webkit-user-select:none;user-select:none; } @media (min-width:700px){.pcar__viewport{--pc-w:min(calc(58 * var(--vw)),560px)}} .pcar__track{display:grid;margin:0;padding:0;list-style:none} .pcar__card{ grid-area:1 / 1;justify-self:center;width:var(--pc-w);box-sizing:border-box; display:flex;flex-direction:column;gap:6px;padding:clamp(10px,calc(2.6 * var(--vw)),18px); border-radius:clamp(22px,calc(6 * var(--vw)),30px); background:var(--card-bg);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5); box-shadow:inset 0 0 0 1px var(--card-line),0 24px 40px -26px var(--card-shadow); will-change:transform,opacity; } .pcar__plate{display:grid;place-items:center;aspect-ratio:16 / 10;overflow:hidden;border-radius:calc(clamp(22px,calc(6 * var(--vw)),30px) - clamp(10px,calc(2.6 * var(--vw)),18px));background:var(--plate)} @media (min-width:700px){.pcar__plate{aspect-ratio:2 / 1}} .pcar__plate img{display:block;width:auto;height:auto;max-width:76%;max-height:68%;object-fit:contain;pointer-events:none} .pcar__name{margin:8px 4px 0;font:600 clamp(16px,calc(4.4 * var(--vw)),22px)/1.25 var(--mono);letter-spacing:-.01em;color:var(--ink)} .pcar__meta{margin:0 4px;font:500 clamp(var(--fs-label),calc(2.9 * var(--vw)),13px)/1.45 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)} .pcar__desc{margin:4px 4px 6px;font:300 clamp(var(--fs-body),calc(3.6 * var(--vw)),16px)/1.55 var(--mono);color:var(--gray-d)} .pcar__desc:empty{display:none} .pcar__bar{display:flex;align-items:center;justify-content:space-between;gap:16px} .pcar__pager{margin-top:0} .ctl{ position:relative;display:grid;place-items:center;padding:0;cursor:pointer; width:46px;height:46px;border-radius:50%;border:0;color:var(--title); -webkit-tap-highlight-color:transparent; } .ctl svg{width:44%;height:44%;transition:transform .4s var(--ease)} @media (hover:hover){.ctl--prev:hover svg{transform:translateX(-2px)}} .ctl.ctl--next{--tint:rgba(16,42,86,.92);--tint-hover:rgba(16,42,86,1);--sh:rgba(16,42,86,.5);--hl:.18;color:#fff;background-image:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.03) 50%,rgba(6,20,60,.2) 100%)} @media (hover:hover){.ctl--next:hover svg{transform:translateX(2px)}} .ctl--pause{width:32px;height:32px;border:0;background:none;box-shadow:none;color:var(--title)} @media (hover:hover){.ctl--pause:hover{box-shadow:none}} .ctl--pause svg{width:100%;height:100%} .ctl__track{fill:none;stroke:var(--title);stroke-width:1.6} .ctl__progress{fill:none;stroke:var(--bright);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(-90deg);transform-origin:50% 50%} .ctl__pause{fill:var(--title)} .ctl__play{fill:var(--title);display:none} .ctl--pause.is-paused .ctl__pause{display:none} .ctl--pause.is-paused .ctl__play{display:block} /* ---------- 02 · Projets : détail d'un projet (sous-section entre « Projets » et « À propos ») ---------- Une coquille vide (index.html) remplie par js/main.js (initProjectDetail) à partir de js/projects.js. Elle se déploie par la hauteur (grid-template-rows 0fr → 1fr) ; masquée (hidden) tant qu'aucun projet n'a été ouvert. */ .pdetail{display:grid;grid-template-rows:0fr;max-width:var(--site-max-width);margin-inline:auto;overflow-anchor:none;transition:grid-template-rows .9s var(--ease)} .pdetail[hidden]{display:none} .pdetail.is-open{grid-template-rows:1fr} .pdetail__clip{min-height:0;overflow:hidden} .pdetail__page{position:relative;padding:clamp(68px,calc(8 * var(--vw)),88px) var(--gut) clamp(56px,calc(9 * var(--vw)),96px)} /* le haut laisse passer le bouton du menu (téléphone) et la barre flottante (tablette) */ .pdetail__page::before{content:"";position:absolute;top:0;left:var(--gut);right:var(--gut);height:1px;background:var(--rule-35)} .pdetail__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px} /* ordre du DOM : catégorie, titre, bouton « Fermer » (Tab depuis le titre y mène) ; en haut à droite à l'écran */ .pdetail__head .eyebrow{text-wrap:balance;grid-area:1 / 1;margin-bottom:clamp(4px,calc(1.4 * var(--vw)),10px);min-width:0} .pdetail__head .section-title{grid-area:2 / 1 / 3 / -1} .pdetail .pdetail__close{grid-area:1 / 2;--h:max(44px,calc(48 * var(--u,1)))} .pdetail .section-title:focus{outline:none} .pdetail__body{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,calc(5 * var(--vw)),56px);margin-top:clamp(18px,calc(3.6 * var(--vw)),36px);min-width:0} .pd-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* textes */ .pd-text{display:grid;gap:16px;max-width:62ch;font:400 clamp(var(--fs-body),calc(3.6 * var(--vw)),16px)/1.5 var(--mono);color:var(--text)} .pd-text p,.pd-text h4{margin:0} .pd-text h4{font:600 var(--fs-label)/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)} .pd-text strong{font-weight:700} .pd-hint{margin:0 0 clamp(12px,calc(2.4 * var(--vw)),20px);font:400 var(--fs-label)/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gray-eyebrow)} /* galerie : lignes justifiées. Chaque photo garde son ratio d'origine (--ar = largeur / hauteur ; aucun recadrage : la signature incrustée dans les photos n'est jamais coupée) et sa largeur est proportionnelle à ce ratio, donc toutes les photos d'une ligne ont la même hauteur et la ligne remplit la largeur. Les règles ci-dessous sont la base en CSS pur ; js/main.js (justify) choisit les coupures de lignes pour que la dernière ligne soit pleine aussi. */ .pd-gal{--rh:clamp(190px,calc(26 * var(--vw)),340px);--gap:clamp(8px,calc(1.2 * var(--vw)),16px);--rad:clamp(8px,calc(1.4 * var(--vw)),14px); display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--gap);margin:0;padding:0;list-style:none} .pd-gal>li{flex:calc(var(--ar) * 100) 1 calc(var(--ar) * var(--rh));aspect-ratio:var(--ar);min-width:0;max-width:calc(var(--ar) * var(--rh) * 1.7)} .pd-ph{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:var(--rad,12px);overflow:hidden;cursor:zoom-in; background-color:var(--ph,var(--plate));background-image:var(--lq,none);background-size:cover;background-position:center;-webkit-tap-highlight-color:transparent} .pd-ph picture{display:block;width:100%;height:100%} .pd-ph::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--card-line);pointer-events:none} /* liseré : une photo à ciel blanc ne se fond pas dans la page */ .pd-ph img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease),transform .9s var(--ease)} .pd-ph img.is-ready{opacity:1} .pd-ph:focus-visible{border-radius:var(--rad,12px)} @media (hover:hover){.pd-ph:hover img{transform:scale(1.035)}} /* image seule, capture d'écran, logo */ .pd-fig{--rad:clamp(10px,calc(1.8 * var(--vw)),18px);margin:0;display:grid;gap:10px;justify-items:start;min-width:0} .pd-fig .pd-ph{width:100%;max-width:min(100%,calc(var(--ar) * 78svh));aspect-ratio:var(--ar);height:auto} .pd-fig--screenshot .pd-ph{box-shadow:inset 0 0 0 1px var(--card-line),0 24px 40px -26px var(--card-shadow)} .pd-fig--logo .pd-ph{cursor:default;display:grid;place-items:center;max-width:min(100%,420px);background-color:var(--plate);background-image:none;padding:clamp(18px,calc(4 * var(--vw)),36px)} .pd-fig--logo .pd-ph{aspect-ratio:auto;height:auto} /* la plaque épouse le logo (un logo large ne doit pas être rogné) */ .pd-fig--logo img{width:100%;height:auto;object-fit:contain} .pd-fig figcaption{font:400 var(--fs-caption)/1.4 var(--mono);color:var(--gray-eyebrow)} /* liens externes */ .pd-links{display:flex;flex-wrap:wrap;gap:6px 28px;margin:0;padding:0;list-style:none} .pd-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:500 15px/1.2 var(--mono);color:var(--blue);text-decoration:underline;text-underline-offset:4px} .pd-link .ico{width:14px;height:14px} .pd-link .pd-t{text-wrap:balance} /* un libellé qui passe sur deux lignes (téléphone étroit) se répartit : pas de mot seul */ .pd-link--btn{justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;background:var(--royal);color:#fff;font-weight:600;text-decoration:none;transition:background .35s var(--ease)} .pd-link--btn:focus-visible{border-radius:999px} @media (hover:hover){.pd-link--btn:hover{background:var(--hover-fill)}.pd-link--btn:hover .ico{transform:translate(2px,-2px)}} /* étude de cas (Burnout Fuel) : fiche, logo + palette, accroches, gamme interactive, captures de site, équipe */ .pd-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:0 clamp(16px,calc(3 * var(--vw)),32px);max-width:76rem;margin:0} .pd-facts>div{display:grid;gap:4px;align-content:start;padding:12px 0 2px;border-top:1px solid var(--rule-35)} .pd-facts dt{font:400 var(--fs-label)/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gray-eyebrow)} .pd-facts dd{margin:0;font:500 clamp(var(--fs-body),calc(3.6 * var(--vw)),16px)/1.4 var(--mono);color:var(--text)} .pd-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(18px,calc(3 * var(--vw)),30px) clamp(18px,calc(3 * var(--vw)),36px);margin:0;padding:0;list-style:none} .pd-features li{display:grid;gap:6px;align-content:start;padding-top:14px;border-top:1px solid var(--rule-35)} .pd-features h5{margin:0;font:600 clamp(var(--fs-body),calc(3.6 * var(--vw)),16px)/1.3 var(--mono);color:var(--title)} .pd-features p{margin:0;font:400 var(--fs-body)/1.5 var(--mono);color:var(--text)} .pd-slogans{display:grid;gap:clamp(2px,calc(.8 * var(--vw)),10px);margin:0;padding:0 0 0 clamp(14px,calc(3 * var(--vw)),28px);border-left:2px solid var(--blue);list-style:none} .pd-slogans li{font:italic 400 clamp(28px,calc(6.4 * var(--vw)),64px)/1.05 var(--font-accent);letter-spacing:-.01em;color:var(--title)} .pd-identity{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,calc(4 * var(--vw)),48px);align-items:center} .pd-identity .pd-fig--logo .pd-ph{max-width:none} .pd-identity__side{display:grid;gap:16px;align-content:center} .pd-palette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,calc(2.4 * var(--vw)),24px);margin:0;padding:0;list-style:none} .pd-palette li{display:grid;gap:3px;align-content:start;min-width:0} .pd-palette__sw{aspect-ratio:4 / 5;margin-bottom:6px;border-radius:clamp(8px,calc(1.4 * var(--vw)),14px);background:var(--sw);box-shadow:inset 0 0 0 1px var(--card-line)} .pd-palette__name{font:500 14px/1.3 var(--mono);color:var(--text)} .pd-palette__hex{font:400 var(--fs-caption)/1.3 var(--mono);letter-spacing:.06em;color:var(--gray-eyebrow)} /* gamme interactive : onglets des saveurs ; la teinte de la saveur choisie (--fcr) colore le cadre, celle de chaque onglet (--tc, --tcr) son point et son état actif. Les teintes ne servent qu'à décorer : le texte garde la couleur du thème (les teintes claires n'ont pas assez de contraste comme texte). */ .pd-range{--fcr:242,85,107;position:relative;isolation:isolate;display:grid;gap:clamp(16px,calc(3 * var(--vw)),28px);padding:clamp(14px,calc(3 * var(--vw)),32px);border-radius:clamp(18px,calc(3 * var(--vw)),28px);background:var(--card-bg);box-shadow:inset 0 0 0 1px var(--card-line)} .pd-range::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(var(--fcr),.2);transition:background-color .7s var(--ease)} .pd-range__tabs{display:flex;flex-wrap:wrap;gap:8px} .pd-range__tab{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px var(--rule-35);color:var(--text);font:500 13px/1 var(--mono);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .3s,box-shadow .3s} .pd-range__tab:focus-visible{border-radius:999px} .pd-range__tab[aria-selected="true"]{background:rgba(var(--tcr),.28);box-shadow:inset 0 0 0 2px var(--tc)} @media (hover:hover){.pd-range__tab:hover{background:rgba(var(--tcr),.16)}.pd-range__tab[aria-selected="true"]:hover{background:rgba(var(--tcr),.28)}} .pd-range__dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--tc);box-shadow:inset 0 0 0 1px rgba(16,42,86,.3)} .pd-range__stage:focus-visible{border-radius:12px} .pd-range__panel{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(18px,calc(4 * var(--vw)),48px);align-items:center} .pd-range__panel.is-swap{animation:pd-swap .55s var(--ease)} @keyframes pd-swap{from{opacity:0;transform:translateY(10px)}} .pd-range__pics{display:grid;gap:clamp(8px,calc(1.4 * var(--vw)),16px);align-items:start} .pd-range__pic{--rad:clamp(10px,calc(1.8 * var(--vw)),18px);height:auto;cursor:default} @media (hover:hover){.pd-range__pic:hover img{transform:none}} .pd-range__txt{display:grid;gap:14px;align-content:center;min-width:0} .pd-range__name{margin:0;font-size:clamp(34px,calc(6.4 * var(--vw)),56px);line-height:.95;color:var(--title)} .pd-range__notes{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none} .pd-range__notes li{padding:7px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--rule-35);font:500 var(--fs-caption)/1 var(--mono);color:var(--text)} .pd-range__txt p{max-width:46ch;margin:0;font:400 clamp(var(--fs-body),calc(3.6 * var(--vw)),16px)/1.5 var(--mono);color:var(--text)} /* captures de site : fenêtre d'ordinateur + téléphone côte à côte (le téléphone passe sous la fenêtre sur téléphone) */ .pd-devices{display:grid;grid-template-columns:minmax(0,1fr) 23%;gap:clamp(12px,calc(2 * var(--vw)),28px);align-items:end} .pd-win{margin:0;min-width:0;overflow:hidden;border:1px solid var(--card-line);border-radius:clamp(10px,calc(1.8 * var(--vw)),16px);background:var(--card-bg);box-shadow:0 24px 40px -26px var(--card-shadow)} .pd-win__bar{display:flex;align-items:center;gap:6px;height:clamp(20px,calc(3.4 * var(--vw)),28px);padding:0 12px;border-bottom:1px solid var(--card-line)} .pd-win__bar i{width:8px;height:8px;border-radius:50%;background:var(--rule-35)} .pd-win__screen{aspect-ratio:var(--ar)} .pd-win__screen .pd-ph{--rad:0;height:100%} .pd-win__screen .pd-ph::after{display:none} .pd-phone{margin:0;min-width:0;padding:clamp(3px,calc(.55 * var(--vw)),6px);border-radius:clamp(14px,calc(2.8 * var(--vw)),26px);background:#16161a;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 24px 40px -22px var(--card-shadow)} .pd-phone .pd-ph{--rad:clamp(10px,calc(2.1 * var(--vw)),20px);aspect-ratio:var(--ar);height:auto} .pd-phone .pd-ph::after{display:none} /* équipe : « Ma contribution » et membres du groupe */ .pd-team{display:grid;gap:22px;max-width:62rem} .pd-team__note{margin:0;max-width:62ch;font:400 clamp(var(--fs-body),calc(3.6 * var(--vw)),16px)/1.5 var(--mono);color:var(--text)} .pd-team h4{margin:0 0 12px;font:600 var(--fs-label)/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)} .pd-team ul{display:grid;gap:10px;margin:0;padding:0;list-style:none;font:400 clamp(var(--fs-body),calc(3.6 * var(--vw)),16px)/1.5 var(--mono);color:var(--text)} .pd-team li{padding-top:10px;border-top:1px solid var(--rule-35)} .pd-team .pd-team__row{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:10px clamp(16px,calc(3 * var(--vw)),32px)} @media (max-width:699px){ .pd-identity,.pd-range__panel{grid-template-columns:minmax(0,1fr)} .pd-range__tabs{gap:6px} .pd-range__tab{gap:7px;padding:0 12px;font-size:12px} .pd-devices{grid-template-columns:minmax(0,1fr);justify-items:center} .pd-phone{width:46%} } /* projet sans contenu : « bientôt disponible » */ .pd-soon{justify-self:start;display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--rule-50); font:500 var(--fs-label)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)} .pd-soon::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);animation:pd-pulse 2.4s var(--ease-io) infinite} @keyframes pd-pulse{50%{opacity:.3}} .pd-note{margin:0;max-width:62ch;font:400 var(--fs-caption)/1.5 var(--mono);color:var(--gray-eyebrow)} /* tablette / téléphone : la card centrale s'ouvre (bouton « Voir le projet »), les cards voisines se recentrent au toucher */ .pcar__more{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:2px 4px 0;padding:0 2px;border:0;background:none;cursor:pointer; font:500 var(--fs-label)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue);-webkit-tap-highlight-color:transparent} .pcar__more .ico{width:14px;height:14px} @media (hover:hover){.pcar__more:hover .ico{transform:translate(2px,2px)}} .pcar__card[aria-hidden="true"] .pcar__more{visibility:hidden} @media (max-width:699px){ /* téléphone : un vrai bouton plutôt qu'un simple texte */ .pcar__more{margin:6px 0 2px;min-height:46px;padding:0 22px;border-radius:999px;background:var(--royal);color:#fff;font-weight:600;letter-spacing:.12em;box-shadow:0 10px 18px -12px var(--card-shadow);transition:background .3s var(--ease),transform .2s var(--ease)} .pcar__more:focus-visible{border-radius:999px} .pcar__more:active{background:var(--hover-fill);transform:scale(.97)} } /* visionneuse plein écran (, même principe que le formulaire de contact) */ .lbox{--lb-pad:clamp(12px,calc(3 * var(--vw)),40px);--lb-bar:64px; position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;color:var(--ink); background:var(--bg);opacity:0;transition:opacity .35s var(--ease)} .lbox[open]{display:block} .lbox::backdrop{background:transparent} .lbox.is-in{opacity:1} .lbox__stage{position:absolute;inset:0 0 var(--lb-bar) 0;touch-action:pan-y;-webkit-user-select:none;user-select:none} .lbox__pic{position:absolute;inset:var(--lb-pad);display:grid;place-items:center;opacity:0;transition:opacity .4s var(--ease),translate .5s var(--ease)} .lbox__pic.is-in{opacity:1} .lbox__pic.is-out{opacity:0} .lbox__pic img{display:block;outline:1px solid var(--card-line);outline-offset:-1px;border-radius:clamp(6px,calc(1 * var(--vw)),10px);background-color:var(--ph,var(--plate));background-image:var(--lq,none);background-size:cover;pointer-events:none;-webkit-user-drag:none} .lbox__bar{position:absolute;left:0;right:0;bottom:0;height:var(--lb-bar);padding:0 calc(var(--lb-pad) + 64px) env(safe-area-inset-bottom);box-sizing:content-box;display:flex;align-items:center;justify-content:center;gap:18px;text-align:center} .lbox__cap{margin:0;font:400 var(--fs-body)/1.35 var(--mono);color:var(--text)} .lbox__count{margin:0;flex:none;font:500 var(--fs-label)/1 var(--mono);letter-spacing:.14em;color:var(--gray-lab);font-variant-numeric:tabular-nums} .lbox .lbox__btn{position:absolute;z-index:3} .lbox .lbox__close{top:max(12px,env(safe-area-inset-top));right:max(12px,calc(var(--lb-pad) - 8px))} .lbox .lbox__nav{top:calc((100% - var(--lb-bar)) / 2);translate:0 -50%} .lbox .lbox__prev{left:max(12px,calc(var(--lb-pad) - 8px))} .lbox .lbox__next{right:max(12px,calc(var(--lb-pad) - 8px))} @media (max-width:699px){ .lbox{--lb-bar:72px} .lbox .lbox__nav{top:auto;bottom:calc((var(--lb-bar) - 46px) / 2 + env(safe-area-inset-bottom));translate:none} .lbox .lbox__prev{left:12px} .lbox .lbox__next{right:12px} .lbox__bar{padding-inline:calc(46px + 24px)} } /* ---------- 03 · À propos ---------- */ .about__grid{position:relative;margin-top:clamp(36px,calc(7 * var(--vw)),60px)} .about__eyebrow{font:400 var(--fs-caption)/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--gray-eyebrow);margin-bottom:clamp(18px,calc(4 * var(--vw)),34px)} .about__title{font:400 clamp(28px,calc(7.4 * var(--vw)),40px)/1.3 var(--sans);letter-spacing:-.025em;color:var(--text);max-width:17.5em;margin-bottom:clamp(22px,calc(4 * var(--vw)),34px);text-wrap:balance} .about__copy{display:grid;gap:16px;max-width:62ch;font:400 clamp(var(--fs-body),calc(3.6 * var(--vw)),15px)/1.4 var(--mono);color:var(--text)} .about__copy strong{font-weight:700} .about .btn--royal{margin-top:clamp(28px,calc(5 * var(--vw)),44px)} /* « Télécharger mon CV » : badge circulaire (disque bleu, texte sur le cercle, flèche au centre), base commune au desktop, à la tablette et au téléphone. C'est le même lien que la pilule : son texte reste lu par les lecteurs d'écran et, sans JavaScript, la pilule reste affichée. Chaque affichage ne règle que la taille (--bd) et la position. Le texte de l'anneau suit la langue (initCvBadge, js/main.js) ; l'anneau tourne lentement et un bouton pause l'arrête (WCAG 2.2.2) ; avec « mouvement réduit », l'anneau démarre à l'arrêt et le bouton lecture le fait tourner à la demande. La rotation passe par l'API Web Animations (js/main.js) : Safari sur iPhone n'anime pas une règle CSS @keyframes sur un SVG (constaté sur iPhone 13), alors que cette API fonctionne. Par défaut (fenêtre desktop très basse) : dans le flux, sous le texte. */ .cvbadge,.ctl.cvbadge__pause{display:none} .about{--bd:clamp(120px,calc(12 * var(--vw)),170px)} .about__text{position:relative} .js .about .btn--royal{display:flex;--h:var(--bd);width:var(--bd);height:var(--bd);padding:0;border-radius:50%} .js .about .btn--royal>span,.js .about .btn--royal>.ico{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .js .cvbadge{display:block;position:relative;z-index:2;width:100%;height:100%;overflow:visible} .cvbadge text{font:500 16.5px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;fill:#fff;text-shadow:none} html[lang="en"] .cvbadge text{letter-spacing:4.4px} .cvbadge circle{fill:#fff} .cvbadge .cvbadge__core{filter:drop-shadow(0 2px 3px rgba(4,20,80,.35))} .cvbadge__arrow{fill:none;stroke:var(--royal);stroke-width:7;stroke-linecap:round;stroke-linejoin:round} .cvbadge__ring{transform-origin:100px 100px} /* centre du viewBox ; la rotation est lancée par js/main.js (initCvBadge) */ .js .ctl.cvbadge__pause{display:grid;position:absolute;left:calc(.854 * var(--bd) - 22px);bottom:calc(.146 * var(--bd) - 22px);z-index:4;width:44px;height:44px} /* sur le bord, en bas à droite du badge */ .cvbadge__pause svg{width:52%;height:52%;fill:currentColor} .about__visual{position:relative;width:min(calc(70 * var(--vw)),320px);margin:clamp(112px,calc(28 * var(--vw)),150px) 0 0 auto} .about__img--m{display:none} /* composition recomposée pour le téléphone : visible uniquement ≤ 699 px */ .about__img{width:100%;height:auto;will-change:transform} .handnote--about{position:absolute;z-index:2;left:-4%;top:-84px;font-size:clamp(15px,calc(4 * var(--vw)),20px);rotate:-9deg} .handnote--about span:nth-child(2){margin-left:.35em} .handnote--about span:nth-child(3){margin-left:.6em} .handarrow--about{position:absolute;z-index:2;left:calc(-4% + 1.87 * clamp(15px,calc(4 * var(--vw)),20px));top:-31px;width:clamp(42px,calc(11 * var(--vw)),64px);height:auto} .stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(44px,calc(8 * var(--vw)),80px)} .stat{padding:2px 0 4px clamp(10px,calc(3 * var(--vw)),40px);border-left:1px solid var(--gray-d)} .stat:first-child{border-left:0;padding-left:0} .stat__num{display:flex;align-items:baseline;font:600 clamp(32px,calc(9 * var(--vw)),48px)/1 var(--sans);letter-spacing:-.02em;color:var(--ink);margin-bottom:8px} .stat__num .plus{color:var(--blue);margin-right:.04em} .stat__num--inf{line-height:.9} .stat__num .inf{display:inline-block;font-family:var(--mono);font-weight:800;line-height:.7;font-size:1.35em} .stat__label{font:400 clamp(var(--fs-label),calc(2.6 * var(--vw)),15px)/1.35 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gray-lab)} /* petits téléphones : libellés à 11 px minimum, colonnes inégales et interlettrage resserré pour que « D'EXPÉRIENCE » reste dans sa colonne */ @media (max-width:399px){.stats{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr) minmax(0,.85fr)}.stat__label{letter-spacing:.1em}} .is-in .inf{animation:inf-in 1.4s var(--ease) .3s backwards} @keyframes inf-in{from{opacity:0;rotate:-180deg;scale:.3}} /* ---------- 04 · Services ---------- */ .service-list{margin-top:clamp(28px,calc(6 * var(--vw)),48px)} .service-wrap{position:relative} .service-wrap::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink); transform-origin:left; } .js .service-wrap::after{transform:scaleX(0)} .js .service-wrap.is-in::after{transform:scaleX(1);transition:transform 1.4s var(--ease) calc(var(--d,0s) + .2s)} .service{ position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"t a" "d a"; align-items:center;gap:10px 18px;padding:26px 0 22px; color:var(--ink);text-decoration:none;overflow:hidden;isolation:isolate; transition:color .5s var(--ease); } .service::before{ content:"";position:absolute;inset:0;z-index:-1;background:var(--hover-fill); transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease); } .service__title{grid-area:t;font:400 clamp(30px,calc(9.4 * var(--vw)),64px)/1.12 var(--sans);letter-spacing:-.045em;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em} .service__title span{display:inline-block;transition:translate .6s var(--ease)} /* titres français plus longs (« Conception & Développement Web », « Création de contenu visuel ») : taille réduite et uniforme pour que les quatre lignes restent alignées et tiennent dans leur colonne */ html[lang="fr"] .service__title{font-size:clamp(26px,calc(6.4 * var(--vw)),38px)} .js .service__title span{translate:0 105%} .js .service-wrap.is-in .service__title span{translate:0 0;transition:translate 1.1s var(--ease) calc(var(--d,0s) + .15s)} .service__desc br{display:none} .service__desc{grid-area:d;font:400 clamp(var(--fs-body),calc(3.3 * var(--vw)),18px)/1.3 var(--mono);color:var(--gray-d);transition:color .5s,translate .6s var(--ease)} .service__arrow{grid-area:a;width:clamp(32px,calc(8 * var(--vw)),54px);color:var(--bright);transition:transform .7s var(--ease),color .5s,translate .6s var(--ease)} .service__arrow svg{display:block;width:100%;height:auto} .service:focus-visible{color:#fff} @media (hover:hover){.service:hover{color:#fff}} .service:focus-visible::before{transform:scaleY(1)} @media (hover:hover){.service:hover::before{transform:scaleY(1)}} @media (hover:hover){.service:hover .service__desc{color:rgba(255,255,255,.82)}} @media (hover:hover){.service:hover .service__arrow{color:#fff;transform:rotate(45deg) scale(1.05)}} /* ---------- 05 · Expériences ---------- */ .timeline{position:relative;margin-top:clamp(36px,calc(8 * var(--vw)),64px);--p:0} .tl-item{display:grid;grid-template-columns:82px 22px 1fr;position:relative;transition:background-color .5s ease} .tl-item+.tl-item .tl-date{border-top:1px solid var(--rule-50)} .tl-item+.tl-item .tl-body{border-top:1px solid var(--rule)} .tl-date{padding:10px 2px 10px 2px;font:400 var(--fs-label)/1.45 var(--mono);text-transform:uppercase;color:var(--text)} .tl-date span{display:block} .tl-date .yr{padding-left:min(calc(var(--m,0) * 1ch + .6em),calc(100% - 4ch - 6px))} /* décalage « en escalier » selon le mois, plafonné pour que l'année (4 caractères) garde 6 px d'air avant la frise, qui passe au bord droit de la colonne : sur téléphone (78 px utiles), « septembre » la faisait déborder dessus */ .tl-axis{position:relative} .tl-axis::before,.tl-axis::after{content:"";position:absolute;left:0;top:0;bottom:0;width:1.5px;translate:-50% 0} .tl-axis::before{background:var(--rule-20)} .tl-axis::after{background:var(--rule);transform:scaleY(var(--fill,0));transform-origin:top} /* première ligne (la plus ancienne) : la ligne commence au point */ .tl-item--start .tl-axis::before,.tl-item--start .tl-axis::after{top:50%} /* dernière ligne (la plus récente) : la ligne s'arrête au point puis se prolonge en pointillés, comme « à suivre » */ .tl-item--now{--nodeY:38px} .tl-item--now .tl-axis::before{ background: linear-gradient(var(--rule-20),var(--rule-20)) 0 0/100% var(--nodeY) no-repeat, repeating-linear-gradient(to bottom,var(--rule-35) 0 4px,transparent 4px 8px) 0 var(--nodeY)/100% min(44px,calc(100% - var(--nodeY))) no-repeat; } .tl-item--now .tl-axis::after{bottom:auto;height:var(--nodeY)} .tl-node{ position:absolute;left:0;top:50%;z-index:2;width:13px;height:13px;border-radius:50%; background:var(--bright);border:2.5px solid var(--ink);translate:-50% -50%; transition:scale .5s var(--ease),box-shadow .5s; } .tl-item--now .tl-node{top:var(--nodeY)} .is-in .tl-node{animation:node-pop .8s var(--ease) calc(var(--d,0s) + .25s) backwards} @keyframes node-pop{from{scale:0}} .tl-body{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding:12px 0 16px 12px;min-width:0} .tl-item--now .tl-body{padding-top:10px} .tl-text{min-width:0;transition:translate .6s var(--ease)} .tl-text h3{font:700 var(--fs-body)/1.35 var(--mono);color:var(--text);margin-bottom:5px} .tl-org{font:400 var(--fs-body)/1.35 var(--mono);color:var(--text);margin-bottom:6px} .tl-desc{font:300 var(--fs-body)/1.45 var(--mono);color:var(--gray-d);text-wrap:wrap} /* retour à la ligne classique : Safari (text-wrap:pretty) ajoutait une ligne à chaque description et la dernière entrée de la frise dépassait du bas de la section sur les écrans de portable */ .tl-logo{flex:none;width:var(--lw,70px);transition:translate .6s var(--ease)} .tl-logo img{width:100%;height:auto;filter:grayscale(1);opacity:.85;transition:filter .6s,opacity .6s,transform .7s var(--ease)} .tl-logo--camera{--lw:62px} .tl-logo--auberge{--lw:108px} .tl-logo--dans{--lw:104px} .tl-logo--burnout{--lw:58px} .tl-logo--condorcet{--lw:118px} @media (hover:hover){.tl-item:hover .tl-text{translate:8px 0}} @media (hover:hover){.tl-item:hover .tl-logo{translate:-8px 0}} @media (hover:hover){.tl-item:hover .tl-logo img{filter:none;opacity:1;transform:scale(1.06)}} @media (hover:hover){.tl-item:hover .tl-node{scale:1.45;box-shadow:0 0 0 7px rgba(57,127,246,.22)}} /* ---------- 06 · Contact ---------- */ .contact{padding-bottom:clamp(40px,calc(8 * var(--vw)),64px)} .contact__body{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:clamp(36px,calc(10 * var(--vw)),80px)} .avail--center{height:40px} .contact__title{margin-top:clamp(30px,calc(7 * var(--vw)),50px);font:700 clamp(22px,calc(6.3 * var(--vw)),44px)/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--title);text-wrap:balance} .contact__lead{margin-top:clamp(18px,calc(4 * var(--vw)),42px);max-width:32.5em;font:300 clamp(14.5px,calc(3.9 * var(--vw)),24px)/1.3 var(--mono);color:var(--text);text-wrap:pretty} .contact__cta{position:relative;margin-top:clamp(44px,calc(9 * var(--vw)),86px);display:flex;justify-content:center} /* tablette et petites fenêtres larges : note en haut à gauche du bouton, flèche dessous qui le pointe ; rien ne recouvre le bouton */ .handnote--contact{position:absolute;right:calc(100% + 14px);bottom:calc(50% + 14px);font-size:clamp(14px,calc(3.6 * var(--vw)),18px);rotate:-9deg;text-align:left} .handnote--contact span:nth-child(2){margin-left:1.6em} .handarrow--contact{position:absolute;right:calc(100% + 8px);top:calc(50% - 4px);width:clamp(56px,calc(14 * var(--vw)),100px);height:auto;rotate:-6deg} /* téléphone : même composition qu'ailleurs (flèche à gauche du bouton, note au-dessus d'elle). Le bouton est décalé de la largeur de la flèche (--pl) : le groupe flèche + bouton reste centré et tient dans l'écran dès 320 px ; la note passe au-dessus du bouton, sans le toucher */ @media (max-width:699px){ .contact__cta{--pl:clamp(52px,calc(15 * var(--vw)),68px);padding-left:var(--pl);margin-top:clamp(84px,calc(21 * var(--vw)),104px)} .contact__cta .btn-glass--xl{--h:clamp(44px,calc(12.3 * var(--vw)),48px);font-size:clamp(18px,calc(5.6 * var(--vw)),22px)} .handnote--contact{right:auto;left:0;bottom:calc(100% + 14px);font-size:clamp(14px,calc(3.7 * var(--vw)),17px)} .handarrow--contact{--aw:calc(var(--pl) - 8px);right:auto;left:0;width:var(--aw);top:calc(50% - .34 * var(--aw))} /* sa pointe vise le milieu du bouton */ } /* adresse e-mail sous le bouton « Contactez-moi » : texte d'introduction, adresse en lien, bouton « Copier » */ .contact__mail{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 14px;margin:clamp(18px,calc(4 * var(--vw)),30px) 0 0;font:400 clamp(13px,calc(3.5 * var(--vw)),16px)/1.4 var(--mono);color:var(--gray-lab)} .contact__addr{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 10px} .contact__addr a{display:inline-flex;align-items:center;min-height:40px;color:var(--title);font-weight:500;text-decoration:underline;text-underline-offset:4px;white-space:nowrap} .contact__copy{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px var(--rule-50);color:var(--blue);font:600 var(--fs-label)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .3s,color .3s} .contact__copy:focus-visible{border-radius:999px} @media (pointer:fine){.contact__copy,.contact__addr a{min-height:32px}} /* souris : plus compact ; au doigt, 40 px minimum */ .contact__copy.is-done{background:var(--blue);color:var(--bg);box-shadow:none} @media (hover:hover){.contact__copy:hover{background:rgba(23,84,184,.1)}.contact__copy.is-done:hover{background:var(--blue)}} .socials--row{justify-content:center;margin-top:clamp(56px,calc(11 * var(--vw)),120px)} /* ========================================================================= Téléphone (≤ 699 px) : Héro et À propos recomposés d'après les maquettes mobiles (references/01-mobile-hero.png et 03-mobile-about.png). La tablette (≥ 700 px) et le desktop gardent leurs mises en page : tout ce qui suit est limité à cette plage. ========================================================================= */ @media (max-width:699px){ :root{--bk:.85} /* ---------- Héro : un écran, du haut vers le bas ---------- pastille et réglages · nom sur une seule ligne · intro centrée au milieu de l'espace libre · réseaux en colonne à gauche, portrait à droite */ .topbar{flex-direction:column;align-items:flex-start;flex-wrap:nowrap} /* pastille sur la première ligne, capsule thème/langue en dessous à droite : jamais sous le bouton hamburger */ .topbar .prefs{align-self:flex-end} .topbar .avail{height:34px;font-size:clamp(var(--fs-label),calc(3.1 * var(--vw)),var(--fs-caption));padding:0 12px 0 10px;gap:8px;max-width:calc(100% - 54px)} /* 54 px = bouton hamburger (44) + espace */ .hero__name{ margin:clamp(22px,calc(6.5 * var(--vw)),34px) -8px 0; font-size:calc((100 * var(--vw) - 24px) / 6.08); /* « DI STEFANO » (10 lettres de 0,6 em) remplit la largeur de la page */ line-height:.93; } .hero__line--outline .w{display:inline-block} .hero__line--solid{margin-top:.07em} .hero .stage{flex:1 1 auto} /* le contenu occupe tout l'écran : l'intro se centre dans l'espace libre */ .hero__intro{align-self:center;width:100%;max-width:none;margin:auto 0;padding:clamp(26px,calc(7 * var(--vw)),44px) 0;text-align:center} .hero__role{font-size:clamp(19px,calc(5 * var(--vw)),22px);font-weight:700;margin-bottom:12px} .hero__lead{font-size:clamp(17px,calc(5 * var(--vw)),21px);line-height:1.35;max-width:15.5em;margin:0 auto 26px} .hero__spacer{display:none} .socials--hero{ order:4;align-self:flex-start;margin:0;box-sizing:border-box; display:grid;grid-template-columns:minmax(0,1fr);align-content:end;gap:8px; width:max-content;max-width:100%; min-height:calc(var(--half-m) + 6px);padding-bottom:22px; /* réserve la hauteur du demi-cercle : l'intro reste au-dessus du portrait */ } /* les pastilles gardent les dimensions de celles de la section Contact (.pill : 40 px de haut, 15 px, icône 22 px) */ /* ---------- À propos : texte à gauche, photo à droite, chiffres en colonne ---------- */ .about__img--d{display:none} .about__img--m{display:block} /* chiffres + composition : proportions de la maquette Figma, exprimées en « mv » (= 1 vw, plafonné à 5,2 px pour ne pas grossir sans fin vers 700 px) */ .about{--mv:min(var(--vw),5.2px);--av:calc(49.25 * var(--mv));--rm:calc(1.75 * var(--mv));--bt:clamp(26px,calc(7 * var(--vw)),40px);--ph:48px;display:grid;grid-template-columns:minmax(0,1fr) calc(var(--av) - var(--gut) + var(--rm));grid-template-rows:repeat(4,auto) minmax(calc(var(--bt) + var(--ph)),auto) auto 1fr;align-content:start} /* 5e ligne : garde la hauteur de l'ancienne pilule (le badge n'y est plus) pour que les chiffres restent en place ; 7e ligne : absorbe la hauteur de la composition sans pousser les chiffres */ .about{--bd:min(calc(30 * var(--vw)),130px,calc(100 * var(--vw) - 2 * var(--gut) - max(calc(56 * var(--vw)),190px) - 10px))} /* badge : 30 vw, sans toucher la colonne de texte */ .about .section__head{grid-area:1 / 1 / 2 / -1} .about__grid,.about__text{display:contents} /* leurs enfants se placent directement dans la grille de la section */ .about__eyebrow{grid-area:2 / 1 / 3 / -1;margin-top:clamp(36px,calc(7 * var(--vw)),60px);margin-bottom:12px} .about__title{grid-area:3 / 1 / 4 / -1;font-size:clamp(24px,calc(6.4 * var(--vw)),30px);max-width:15em;margin-bottom:clamp(16px,calc(4 * var(--vw)),24px)} .about__copy{grid-area:4 / 1 / 5 / -1;max-width:max(calc(56 * var(--vw)),190px)} .about .btn--royal{grid-area:5 / 1 / 6 / -1;justify-self:start;position:relative;z-index:3;margin-top:var(--bt)} /* pilule : seulement sans JavaScript */ /* « Télécharger mon CV » : badge circulaire (apparence : voir la base commune), à droite du paragraphe, en haut, au-dessus de la note et de la photo */ .js .about .btn--royal{grid-area:4 / 2 / 5 / 3;justify-self:end;align-self:start;margin:0} .js .ctl.cvbadge__pause{position:static;grid-area:4 / 2 / 5 / 3;justify-self:end;align-self:start;margin:0;translate:calc(22px - .146 * var(--bd)) calc(.854 * var(--bd) - 22px)} .about__visual{--wa:clamp(36px,calc(10 * var(--vw)),52px);grid-area:5 / 2 / 8 / 3;align-self:start;justify-self:end;width:var(--av);margin:calc(var(--bt) + 8.6 * var(--mv)) calc(var(--rm) - var(--gut)) 0 0} .stats{grid-area:6 / 1 / 7 / 2;align-self:start;justify-self:start;width:max-content;grid-template-columns:minmax(0,1fr);margin-top:calc(14.4 * var(--mv))} .stat{padding:calc(3.2 * var(--mv)) 0 calc(5.3 * var(--mv)) calc(1.3 * var(--mv));border-left:0;border-top:1px solid var(--gray-d)} .stat:first-child{padding-top:0;border-top:0} .stat__num{font-size:calc(7.2 * var(--mv));margin-bottom:calc(.4 * var(--mv))} .stat__label{font-size:max(var(--fs-label),calc(3.5 * var(--mv)));letter-spacing:.12em;white-space:nowrap} html[lang="en"] .stat__label{font-size:max(var(--fs-label),calc(3.05 * var(--mv)));letter-spacing:.08em} /* libellés anglais plus longs (19 caractères contre 16) */ /* la flèche (même dessin, transposé : elle part vers la droite puis plonge) pointe le haut de la photo ; sa pointe est à (70 % ; -2,2 mv) */ .handarrow--about{width:var(--wa);left:calc(70% - .857 * var(--wa));top:calc(-2.2 * var(--mv) - .843 * var(--wa));rotate:-90deg;scale:-1 1} .handnote--about{left:calc(70% - .857 * var(--wa) - 4px);top:auto;bottom:calc(100% + 2.2 * var(--mv) + .843 * var(--wa) + 7px)} } /* petits téléphones : photo et bouton un peu plus petits pour que le bouton ne recouvre pas le portrait */ @media (max-width:399px){ .about{--ph:42px} .about .btn--royal{--h:42px;--pf:.34;font-size:11.5px;letter-spacing:.08em} } /* 320 px : libellés anglais (11 px minimum) resserrés pour ne pas toucher la forme grise */ @media (max-width:339px){ html[lang="en"] .stat__label{letter-spacing:.04em} } /* ========================================================================= Menu hamburger : bouton + menu plein écran (styles dans le bloc « largeur < 1100 px », plus bas) ; masqués au-delà ========================================================================= */ .ctl.menu-btn,.mmenu{display:none} /* 320–349 px : la pastille « Disponible… » passe sur deux lignes pour laisser la place du bouton */ @media (max-width:349px){ .topbar .avail{height:auto;min-height:34px;padding-block:5px;white-space:normal;line-height:1.2} } /* ========================================================================= Tablette ≥ 700px ========================================================================= */ @media (min-width:700px){ :root{--gut:clamp(28px,calc(5 * var(--vw)),56px)} :root{--bk:.8} .fnav__sep{display:block;width:1px;height:16px;background:var(--rule-20)} .fnav .prefs{display:inline-flex} .topnav{margin-left:auto} .topbar .prefs{margin-left:clamp(10px,calc(1.6 * var(--vw)),22px)} .fnav{left:auto;right:calc(var(--gut) + var(--edge));bottom:auto;top:18px;height:38px;gap:clamp(12px,calc(2 * var(--vw)),21px);font-size:var(--fs-caption);translate:0 -180%} .fnav.is-visible{translate:0 0} .avail{height:42px;font-size:15px} .topnav{display:flex} .topnav__link{font-size:15px} .btn-glass{--h:44px;font-size:20px} .topnav .btn-glass{--h:42px;font-size:17px} .hero__name{font-size:clamp(56px,calc(15.1 * var(--vw)),170px);letter-spacing:0} .hero__line--outline .w{display:inline-block} .hero__intro{max-width:480px} .pill{height:42px;font-size:var(--fs-lead)} .about__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,34%);gap:40px;align-items:start} .about__visual{width:100%;margin:-20px 0 0} .handnote--about{left:-52%;top:-26px} .handarrow--about{left:calc(-52% + 37.4px);top:42px} .service{grid-template-columns:minmax(0,1fr) minmax(0,.62fr) auto;grid-template-areas:"t d a";gap:18px 34px;padding:34px 0 28px} .service__desc{font-size:var(--fs-body)} .tl-item{grid-template-columns:130px 40px 1fr} .tl-date{font-size:var(--fs-small);padding:12px 8px 12px 6px} .tl-body{flex-direction:row;align-items:center;justify-content:space-between;gap:18px;padding:12px 0 14px 18px} .tl-text h3{font-size:var(--fs-ui)} .tl-org{font-size:var(--fs-body)} .tl-desc{font-size:var(--fs-body)} .tl-logo--camera{--lw:76px}.tl-logo--auberge{--lw:140px}.tl-logo--dans{--lw:136px}.tl-logo--burnout{--lw:70px}.tl-logo--condorcet{--lw:150px} .ctl{width:56px;height:56px} .ctl--pause{width:34px;height:34px} } /* ========================================================================= Desktop ≥ 1100px : reproduction de la maquette (1 unité = 1px Figma) ========================================================================= */ @media (min-width:980px){ .topnav__link{display:block} } /* de 700 à 1100 px, la barre du haut doit rester sur une seule ligne malgré le sélecteur thème / langue */ @media (min-width:700px) and (max-width:1099px){ .topbar .avail{height:38px;font-size:13px;padding-right:12px} .topbar .prefs{padding:0 4px} .topbar .prefs .lang button{padding:0 7px} .topbar .prefs{margin-left:clamp(8px,calc(1.2 * var(--vw)),14px)} } @media (min-width:980px) and (max-width:1099px){ .topnav{gap:clamp(14px,calc(2.4 * var(--vw) - 9px),20px)} /* quatre liens + Contact : espacement resserré à l'entrée de cette plage */ } /* ========================================================================= Tablette (700 – 1099 px) : Héro et À propos recomposés d'après references/01-tablet-hero.png et 03-tablet-about.png Tout ce bloc est borné à cette plage : le téléphone (≤ 699 px) et le desktop (≥ 1100 px) ne changent pas. Écran haut (largeur / hauteur ≤ 0,86, tablette en portrait) : la mise en page de la référence ; sinon (paysage, fenêtre presque carrée) : mêmes éléments, disposés en largeur pour tenir dans l'écran. ========================================================================= */ @media (min-width:700px) and (max-width:1099px){ /* ---------- À propos (portrait et paysage) : texte à gauche, badge CV et composition à droite, chiffres en colonne ---------- */ .about__img--d{display:none} .about__img--m{display:block} .about{ --tv:min(var(--vw),9px); /* 1 vw, plafonné à 9 px (≈ 900 px d'écran) : au-delà, les blocs ne grossissent plus */ --av:calc(37.6 * var(--tv));--bd:calc(24.6 * var(--tv));--em:clamp(28px,calc(4 * var(--vw)),44px);--bm:calc(var(--em) + 1.2 * var(--tv)); display:grid;grid-template-columns:minmax(0,1fr) var(--av);column-gap:calc(2.4 * var(--tv));grid-template-rows:repeat(6,auto) 1fr;align-content:start; } .about .section__head{grid-area:1 / 1 / 2 / -1} .about__grid,.about__text{display:contents} .about__eyebrow{grid-area:2 / 1 / 3 / 2;margin-top:var(--em);margin-bottom:calc(1.6 * var(--tv))} .about__title{grid-area:3 / 1 / 4 / 2;font-size:max(26px,calc(3.9 * var(--tv)));max-width:calc(46 * var(--tv));margin-bottom:calc(2.4 * var(--tv))} .about__copy{grid-area:4 / 1 / 5 / 2;max-width:calc(44 * var(--tv))} .stats{grid-area:5 / 1 / 6 / 2;align-self:start;justify-self:start;width:max-content;min-width:calc(43 * var(--tv));grid-template-columns:minmax(0,1fr);margin-top:calc(10.4 * var(--tv))} .stat{padding:calc(3.4 * var(--tv)) 0 calc(6 * var(--tv)) calc(1.3 * var(--tv));border-left:0;border-top:1px solid var(--gray-d)} .stat:first-child{padding-top:0;border-top:0} .stat__num{font-size:calc(6.1 * var(--tv));margin-bottom:calc(.4 * var(--tv))} .stat__label{font-size:max(var(--fs-label),calc(3.2 * var(--tv)));letter-spacing:.12em;white-space:nowrap} html[lang="en"] .stat__label{font-size:max(var(--fs-label),calc(2.85 * var(--tv)));letter-spacing:.08em} /* libellés anglais plus longs */ /* composition recomposée (même image qu'en téléphone) à droite, sous le badge ; la note et la flèche pointent son haut */ .about__visual{--wa:calc(5.6 * var(--tv));grid-area:5 / 2 / 8 / 3;align-self:start;justify-self:end;width:var(--av);margin:0} .handarrow--about{width:var(--wa);left:calc(72% - .857 * var(--wa));top:calc(-1.6 * var(--tv) - .843 * var(--wa));rotate:-90deg;scale:-1 1} .handnote--about{font-size:max(15px,calc(2.3 * var(--tv)));left:calc(72% - .857 * var(--wa) - 6px);top:auto;bottom:calc(100% + 1.6 * var(--tv) + .843 * var(--wa) + 8px)} /* « Télécharger mon CV » : badge circulaire (apparence : voir la base commune plus haut), à droite du texte, au-dessus de la note */ .js .about .btn--royal{ grid-area:2 / 2 / 5 / 3;justify-self:center;align-self:start;margin:var(--bm) 0 calc(17.5 * var(--tv)); /* marge basse = place de la note et de la flèche : elles ne recouvrent jamais le badge */ } .js .ctl.cvbadge__pause{ position:static;grid-area:2 / 2 / 5 / 3;justify-self:center;align-self:start;margin:var(--bm) 0 0; translate:calc(var(--bd) * .354) calc(var(--bd) * .854 - 22px); /* sur le bord, en bas à droite du badge */ } } /* ---------- Héro, tablette en portrait ---------- */ @media (min-width:700px) and (max-width:1099px) and (max-aspect-ratio:86/100){ .hero{--tu:min(var(--vw),calc(100svh / 143))} /* 1 vw, réduit si l'écran est moins haut que la référence (hauteur = 1,43 × largeur) */ .hero .stage{flex:1 1 auto} /* le contenu occupe tout l'écran : l'intro se centre dans l'espace libre */ .hero__intro{align-self:center;width:100%;max-width:none;margin:auto 0;padding:calc(3 * var(--tu)) 0 calc(1 * var(--tu));text-align:center} .hero__role{font-size:calc(4.8 * var(--tu));font-weight:700;margin-bottom:calc(2.4 * var(--tu))} .hero__lead{font-size:calc(3.8 * var(--tu));line-height:1.35;max-width:15.5em;margin:0 auto calc(3 * var(--tu))} .hero .btn--bright{--h:calc(7.6 * var(--tu));font-size:calc(3.6 * var(--tu))} .hero__spacer{display:none} .socials--hero{ order:4;align-self:flex-start;margin:0 0 0 calc(2.4 * var(--tu));box-sizing:border-box; display:grid;grid-template-columns:max-content;align-content:end;gap:calc(3.7 * var(--tu));width:max-content;max-width:100%; min-height:calc(var(--half-m) + 6px);padding-bottom:calc(4.4 * var(--tu)); /* réserve la hauteur du demi-cercle : l'intro reste au-dessus du portrait */ } .socials--hero .pill{height:max(40px,calc(5.1 * var(--tu)));font-size:max(15px,calc(2.5 * var(--tu)));gap:calc(1.3 * var(--tu));padding:0 calc(2.4 * var(--tu)) 0 calc(1.5 * var(--tu))} .socials--hero .pill__icon{width:max(20px,calc(2.9 * var(--tu)));height:max(20px,calc(2.9 * var(--tu)))} } @media (min-width:700px) and (max-width:1099px) and (max-aspect-ratio:86/100) and (min-aspect-ratio:7/10){ :root{--bk:.69} /* écrans plus carrés (4:3) : demi-cercle un peu plus petit pour que l'intro tienne */ } @media (min-width:700px) and (max-width:1099px) and (max-aspect-ratio:86/100) and (min-aspect-ratio:4/5){ :root{--bk:.6} /* fenêtres presque carrées : encore un peu plus petit */ } /* ---------- Héro, tablette en paysage : nom en haut, puis trois colonnes (réseaux · intro centrée · portrait) ---------- */ @media (min-width:700px) and (max-width:1099px) and (min-aspect-ratio:86001/100000){ .about__title{max-width:calc(56 * var(--tv))} .about__copy{max-width:calc(54 * var(--tv))} /* paysage : colonne de texte un peu plus large */ :root{--bk:.56} .hero{--tl:min(var(--vw),calc(100svh / 75))} .hero .stage{ flex:1 1 auto;display:grid;grid-template-rows:auto auto minmax(0,1fr); grid-template-columns:max-content minmax(0,1fr) calc(68 * var(--vw) * var(--bk) - var(--gut) + 8px); /* 3e colonne = la place du demi-cercle et du portrait */ column-gap:calc(2 * var(--tl)); } .topbar{grid-area:1 / 1 / 2 / -1} .hero__name{grid-area:2 / 1 / 3 / -1;font-size:min(calc(15.1 * var(--vw)),20svh)} .hero__spacer{display:none} .socials--hero{grid-area:3 / 1 / 4 / 2;align-self:end;margin:0;padding-bottom:calc(2.2 * var(--tl));display:grid;grid-template-columns:max-content;gap:calc(1.25 * var(--tl))} .socials--hero .pill{height:max(38px,calc(4.1 * var(--tl)));font-size:max(14px,calc(1.9 * var(--tl)))} .hero__intro{grid-area:3 / 2 / 4 / 3;align-self:center;max-width:none;margin:0;padding:0;text-align:center} .hero__role{font-size:clamp(17px,calc(2.2 * var(--tl)),24px);font-weight:700;margin-bottom:calc(1.1 * var(--tl))} .hero__lead{font-size:clamp(15px,calc(2 * var(--tl)),22px);line-height:1.35;max-width:15.5em;margin:0 auto calc(1.8 * var(--tl))} .hero .btn--bright{--h:max(40px,calc(4.4 * var(--tl)));font-size:max(15px,calc(2 * var(--tl)))} } @media (min-width:700px) and (max-width:1099px) and (min-aspect-ratio:86001/100000) and (min-aspect-ratio:3/2){ :root{--bk:.5} } @media (min-width:700px) and (max-width:1099px) and (min-aspect-ratio:86001/100000) and (min-aspect-ratio:7/4){ :root{--bk:.43} } @media (min-width:1100px) and (min-height:590px){ /* 1 unité = 1px Figma. --ux : échelle HORIZONTALE, elle suit la largeur de la fenêtre (positions, écarts et largeurs de blocs : le contenu occupe toute la largeur, comme le pied de page) ; --u : échelle VERTICALE et typographique, elle suit la dimension la plus contraignante (largeur OU hauteur) : tout tient toujours dans l'écran. Quand la fenêtre a les proportions de la maquette, ux = u (rendu identique à la maquette). */ :root{--sw:min(calc(100 * var(--vw)),var(--site-max-width));--ux:calc(var(--sw) / 1512);--u:min(var(--ux),100svh / 982);--gut:calc(66 * var(--ux))} /* fenêtre plus haute que le cadre (982 u) : le cadre est centré dans la hauteur ; le bloc portrait suit le bas du cadre plutôt que le bas de la fenêtre. --ov (0 → 1 entre 1512 et 1612 px, posé par le script) applique ce recalage progressivement au-delà de la largeur maximale : rien ne bouge en dessous */ :root{--free:calc(max(0px,calc((100svh - 982 * var(--u)) / 2)) * var(--ov,0))} body{font-size:max(var(--fs-body),calc(15 * var(--u)))} /* Nav flottante */ .fnav{top:calc(63 * var(--u));right:calc(55 * var(--ux) + var(--edge));height:max(34px,calc(36 * var(--u)));padding:0 calc(16 * var(--u));gap:calc(21 * var(--u));font-size:max(var(--fs-label),calc(10.25 * var(--u)))} /* Composants */ .avail{height:max(36px,calc(46 * var(--u)));padding:0 calc(20 * var(--u)) 0 calc(16 * var(--u));gap:calc(11 * var(--u));font-size:max(13px,calc(17.5 * var(--u)))} .avail__dot{width:max(13px,calc(20 * var(--u)));height:max(13px,calc(20 * var(--u)))} .btn-glass{--h:max(40px,calc(52 * var(--u)));font-size:max(18px,calc(32 * var(--u)))} .topnav .btn-glass{--h:max(38px,calc(46 * var(--u)));font-size:max(16px,calc(23 * var(--u)))} .btn-glass--xl{--h:max(44px,calc(50 * var(--u)));font-size:max(20px,calc(32 * var(--u)))} .btn{--h:max(42px,calc(50 * var(--u)));font-size:max(15px,calc(22 * var(--u)))} .btn--royal{--h:max(42px,calc(48 * var(--u)));font-size:max(12px,calc(14 * var(--u)))} .pill{height:max(38px,calc(44 * var(--u)));padding:0 calc(22 * var(--u)) 0 calc(13 * var(--u));font-size:max(var(--fs-body),calc(22 * var(--u)));gap:calc(18 * var(--u))} .pill__icon{width:max(18px,calc(25 * var(--u)));height:max(18px,calc(25 * var(--u)))} .socials{gap:calc(33 * var(--u))} .eyebrow{font-size:max(var(--fs-label),calc(10.3 * var(--u)))} /* --- Hero --- */ /* chaque section = exactement la hauteur de la fenêtre ; le cadre de design (.stage) y est centré */ .hero,.section{display:flex;flex-direction:row;align-items:center;justify-content:center;height:100vh;height:100svh;min-height:0;padding:0} .stage,.hero .stage{display:block;position:relative;flex:none;box-sizing:border-box;width:var(--sw);height:calc(982 * var(--u))} .topbar{position:absolute;left:calc(90 * var(--ux));right:calc(90 * var(--ux));top:calc(56 * var(--u));flex-wrap:nowrap} .topnav{gap:calc(76 * var(--ux))} .topbar .prefs{margin-left:calc(26 * var(--ux))} /* le groupe thème / langue suit la même échelle que la pastille et le bouton Contact */ .topbar .prefs{height:max(38px,calc(42 * var(--u)))} .topbar .theme-btn{width:max(30px,calc(34 * var(--u)));height:max(30px,calc(34 * var(--u)))} .topbar .theme-btn svg{width:max(16px,calc(18 * var(--u)));height:max(16px,calc(18 * var(--u)))} .topbar .lang{height:max(30px,calc(34 * var(--u)))} .topbar .lang button{height:max(26px,calc(30 * var(--u)));font-size:max(var(--fs-label),calc(12 * var(--u)));padding:0 max(9px,calc(11 * var(--u)))} .topnav__link{font-size:max(13px,calc(18 * var(--u)))} .topnav .btn-glass{margin-left:calc(-2 * var(--u))} .hero__name{position:absolute;left:calc(92 * var(--ux));top:calc(155 * var(--u));margin:0;font-size:calc(197 * var(--u));line-height:.863} .hero__line--outline{margin-left:calc(2 * var(--u))} .hero__line--solid{margin-left:calc(-3 * var(--u))} .hero__line--outline .w{display:inline-block} .socials--hero{position:absolute;left:calc(94 * var(--ux));top:calc(570 * var(--u));grid-template-columns:max-content;gap:calc(29 * var(--u));margin:0} /* bloc centré sur l'axe de la page : titre, texte et bouton « Collaborons » */ .hero__intro{position:absolute;left:0;right:0;top:calc(634 * var(--u));margin:0 auto;max-width:none;width:calc(470 * var(--u));text-align:center} .hero__role{font-size:max(18px,calc(32 * var(--u)));font-weight:700;margin-bottom:calc(18 * var(--u))} .hero__lead{font-size:max(15px,calc(24 * var(--u)));line-height:1.3;margin:0 auto calc(50 * var(--u));max-width:15em} html[lang="en"] .hero__lead{max-width:19em} .hero__intro .btn{margin-left:0} .hero__spacer{display:none} :root{--bk:1} .fusion{--s:calc(var(--u) * var(--bk));--fade:calc(150 * var(--s))} .hero__portrait-wrap{width:calc(550 * var(--s));right:calc(-78 * var(--s) + var(--edge));bottom:calc(-22 * var(--s))} /* --- Sections --- */ .section .stage{padding-top:calc(55 * var(--u))} .section__head{padding-left:calc(66 * var(--ux))} .section-title{--t:calc(115 * var(--u));--st:.485} .section-title .outline{margin-left:calc(3 * var(--u))} .pdetail__page{padding-top:calc(140 * var(--u))} /* la barre flottante reste au-dessus du bouton « Fermer » quand la sous-section est calée en haut de l'écran */ /* Projets */ .orbit{position:relative;margin-top:calc(-2 * var(--u));aspect-ratio:auto;height:calc(664 * var(--u))} .orbit__item{--k:var(--u)} /* textes du carrousel : mêmes tailles qu'avant (en unités verticales), indépendantes de la largeur */ .orbit__kicker{font-size:max(13px,calc(32.05 * var(--u)))} .orbit__title{margin-top:max(6px,calc(12.1 * var(--u)));font-size:max(13px,calc(32.05 * var(--u)))} .orbit__pager{margin-top:max(8px,calc(62 * var(--u) - 8px))} .orbit__pager button{--dot:max(8px,calc(10.89 * var(--u)))} .orbit__bar{position:absolute;left:calc(66 * var(--ux));right:calc(89 * var(--ux));bottom:calc(60 * var(--u));margin:0} .orbit__caption{font-size:max(var(--fs-caption),calc(14 * var(--u)))} .ctl{width:max(50px,calc(64 * var(--u)));height:max(50px,calc(64 * var(--u)))} .ctl--pause{width:max(28px,calc(32 * var(--u)));height:max(28px,calc(32 * var(--u)))} .orbit__controls{gap:calc(11 * var(--u))} .ctl--pause{margin-right:calc(24 * var(--u))} .projects{padding-bottom:0} /* À propos */ .about__grid{position:static;display:block;margin:0} /* --cw : largeur de la colonne de texte ; badge « Télécharger mon CV » : au milieu de l'espace libre entre le texte et le portrait (--bx), le haut sous le titre (--by) ; son diamètre (--bd) vaut ≈ 0,7 fois la largeur du portrait, réduit si l'espace libre est étroit */ .about{--cw:calc(560 * var(--u));--bd:min(calc(225 * var(--u)),calc(var(--sw) - 237 * var(--ux) - 322 * var(--u) - var(--cw) - 48px));--bx:calc((var(--cw) + var(--sw) - 237 * var(--ux) - 322 * var(--u) - var(--bd)) / 2);--by:calc(44 * var(--u))} .about__text{position:absolute;left:calc(157 * var(--ux));top:calc(281 * var(--u));width:calc(620 * var(--u))} .about__eyebrow{font-size:max(var(--fs-label),calc(16 * var(--u)));margin-bottom:calc(34 * var(--u))} .about__title{font-size:max(26px,calc(40 * var(--u)));letter-spacing:0;max-width:none;margin:calc(4 * var(--u)) 0 calc(32 * var(--u))} .about__title{width:calc(560 * var(--u))} .about__copy{font-size:max(var(--fs-body),calc(15 * var(--u)));gap:calc(20 * var(--u));max-width:none;width:var(--cw)} .about .btn--royal{margin-top:calc(66 * var(--u))} /* pilule : seulement sans JavaScript */ .js .about .btn--royal{position:absolute;left:var(--bx);top:var(--by);z-index:3;margin:0} .js .ctl.cvbadge__pause{left:calc(var(--bx) + .854 * var(--bd) - 22px);top:calc(var(--by) + .854 * var(--bd) - 22px);bottom:auto;margin:0} .about__visual{position:absolute;right:calc(80 * var(--ux));top:calc(188 * var(--u));width:calc(322 * var(--u));margin:0} .handnote--about{left:calc(-132 * var(--u));top:calc(-26 * var(--u));font-size:max(15px,calc(22 * var(--u)));letter-spacing:.15em} .handarrow--about{left:calc(-86 * var(--u));top:calc(46 * var(--u));width:calc(62 * var(--u))} .stats{position:absolute;left:calc(80 * var(--ux));right:calc(67 * var(--ux));top:calc(853 * var(--u));margin:0} .stat{padding-left:calc(96 * var(--ux))} .stat:first-child{padding-left:calc(105 * var(--ux))} .stat__num{font-size:max(32px,calc(48 * var(--u)));margin-bottom:calc(12 * var(--u))} .stat__label{font-size:max(var(--fs-label),calc(20 * var(--u)))} /* Services */ .service-list{margin:calc(8 * var(--u)) calc(130 * var(--ux)) 0 calc(125 * var(--ux))} .service{grid-template-columns:minmax(0,1fr) calc(462 * var(--u)) calc(54 * var(--u));column-gap:calc(52 * var(--ux));padding:calc(77 * var(--u)) 0 calc(29 * var(--u))} .service-wrap:nth-child(2) .service{padding:calc(81 * var(--u)) 0 calc(22 * var(--u))} .service-wrap:nth-child(3) .service{padding:calc(85 * var(--u)) 0 calc(29 * var(--u))} .service-wrap:nth-child(4) .service{padding:calc(77 * var(--u)) 0 calc(34 * var(--u))} .service__title{font-size:calc(68 * var(--u));font-weight:400;white-space:nowrap} html[lang="fr"] .service__title{font-size:calc(43 * var(--u))} .service__desc{font-size:max(var(--fs-body),calc(17.9 * var(--u)));white-space:nowrap} .service__arrow{width:calc(54 * var(--u));margin-right:calc(10 * var(--u))} .service__desc br{display:inline} @media (hover:hover){.service:hover .service__title span{translate:calc(24 * var(--u)) 0}} @media (hover:hover){.service:hover .service__arrow{translate:calc(-22 * var(--u)) 0;transform:rotate(45deg) scale(1.05)}} @media (hover:hover){.service:hover .service__desc{translate:calc(-10 * var(--u)) 0}} /* Expériences */ .timeline{margin:calc(118 * var(--u)) 0 0 calc(100 * var(--ux));width:calc(1310 * var(--ux))} .tl-item{grid-template-columns:calc(165 * var(--ux)) calc(46 * var(--ux)) 1fr} .tl-date{font-size:max(var(--fs-caption),calc(16 * var(--u)));line-height:1.25;padding:calc(10 * var(--u)) 0 0 calc(10 * var(--u))} .tl-body{padding:calc(10 * var(--u)) 0 calc(11 * var(--u)) 0;gap:calc(18 * var(--u))} .tl-item--now{--nodeY:calc(39 * var(--u))} .tl-item--now .tl-body{padding-bottom:calc(16 * var(--u))} .tl-text h3{font-size:max(var(--fs-body),calc(16 * var(--u)));margin-bottom:calc(8 * var(--u))} .tl-org{font-size:max(var(--fs-body),calc(16 * var(--u)));margin-bottom:calc(9 * var(--u))} .tl-desc{font-size:max(var(--fs-body),calc(15 * var(--u)));line-height:1.35} .tl-item--burnout .tl-org{margin-bottom:calc(1 * var(--u))} .tl-item--burnout .tl-body{padding-top:calc(6 * var(--u))} .tl-item--school .tl-body{padding-top:calc(3 * var(--u))} .br-lg{display:inline} .tl-node{width:max(12px,calc(14 * var(--u)));height:max(12px,calc(14 * var(--u)))} .tl-logo{margin-right:calc((190 * var(--u) - var(--lw)) / 2)} /* la frise occupe toute la hauteur disponible : le cadre s'étend jusqu'en bas de la fenêtre (le titre reste à sa place habituelle) et les quatre premières lignes se partagent l'espace libre ; la dernière (« Récemment », suivie de pointillés) garde sa hauteur */ .experiences{align-items:flex-start} .experiences .stage{display:flex;flex-direction:column;margin-top:calc((100svh - 982 * var(--u)) / 2);height:calc(100svh - (100svh - 982 * var(--u)) / 2)} .experiences .timeline{flex:1 1 auto;display:flex;flex-direction:column;margin-bottom:calc(40 * var(--u))} .experiences .tl-item:not(.tl-item--now){flex:1 1 auto} .tl-logo--camera{--lw:calc(88 * var(--u))} .tl-logo--auberge{--lw:calc(190 * var(--u))} .tl-logo--dans{--lw:calc(180 * var(--u))} .tl-logo--burnout{--lw:calc(84 * var(--u))} .tl-logo--condorcet{--lw:calc(184 * var(--u))} /* Contact */ .contact{padding-bottom:0} .contact__body{margin-top:calc(93 * var(--u))} .avail--center{height:max(36px,calc(42 * var(--u)))} .contact__title{margin-top:calc(52 * var(--u));font-size:max(22px,calc(44 * var(--u)))} .contact__lead{margin-top:calc(46 * var(--u));font-size:max(15px,calc(24 * var(--u)));max-width:calc(800 * var(--u))} .contact__cta{margin-top:calc(88 * var(--u))} .handnote--contact{right:calc(100% + 297 * var(--u));bottom:calc(100% + 13 * var(--u));font-size:max(14px,calc(22 * var(--u)))} .handarrow--contact{right:calc(100% + 270 * var(--u));top:calc(-8 * var(--u));width:calc(100 * var(--u))} .contact__mail{margin-top:calc(30 * var(--u));font-size:max(13px,calc(17 * var(--u)))} .socials--row{margin-top:max(22px,calc(98 * var(--u) - 32px));gap:calc(33 * var(--u))} /* la ligne e-mail (30 u + 32 px) prend la place de l'ancien espace : les réseaux restent où ils étaient (128 u sous le bouton) */ /* pied de page : même largeur que les sections */ .sitefooter .sitefooter__inner{max-width:calc(var(--sw) - 2 * var(--gut))} footer.sitefooter{padding-top:calc(78 * var(--u))} .sitefooter .sitefooter__cta{padding-bottom:calc(52 * var(--u))} .sitefooter .sitefooter__title{font-size:max(24px,calc(56 * var(--u)))} .sitefooter .sitefooter__grid{padding:calc(44 * var(--u)) 0} .sitefooter .sitefooter__markwrap{margin-top:calc(26 * var(--u))} } /* fenêtres desktop peu hautes (portables, jusqu'à 849 px de haut) : le texte garde sa taille minimale (14 px) alors que l'échelle verticale diminue ; la frise des expériences se resserre pour continuer à tenir dans la hauteur de l'écran (RESP-01) */ @media (min-width:1100px) and (min-height:590px) and (max-height:849px){ .timeline{margin-top:calc(60 * var(--u))} .tl-body{padding-top:calc(5 * var(--u));padding-bottom:calc(5 * var(--u));gap:calc(14 * var(--u))} .tl-item--now .tl-body{padding-bottom:calc(8 * var(--u))} .tl-item--burnout .tl-body,.tl-item--school .tl-body{padding-top:calc(3 * var(--u))} .tl-text h3{margin-bottom:calc(3 * var(--u))} .tl-org,.tl-item--burnout .tl-org{margin-bottom:calc(4 * var(--u))} .tl-desc{line-height:1.28} .tl-desc .br-lg{display:none} } /* fenêtres desktop très peu hautes (≤ 649 px) : les pastilles du Héro se rapprochent et la frise remonte encore pour tenir dans l'écran (RESP-01) */ @media (min-width:1100px) and (min-height:590px) and (max-height:649px){ .socials--hero{gap:calc(14 * var(--u))} .timeline{margin-top:calc(34 * var(--u))} .tl-body{padding-top:calc(3 * var(--u));padding-bottom:calc(3 * var(--u));gap:calc(10 * var(--u))} .tl-desc{line-height:1.2} } /* « À propos » en fenêtre desktop peu haute (≤ 765 px) ou peu large (≤ 1189 px), là où l'échelle --u tombe sous ≈ 0,78 : le texte garde sa taille minimale (14 px) alors que la maquette se réduit, la colonne de texte devenait trop haute et le bouton « Télécharger mon CV » (la pilule, sans JavaScript) arrivait sur les chiffres. Les largeurs se calent sur la taille de police (em) pour garder les retours à la ligne de la maquette (le plus grand des deux : rien ne change tant que la police n'est pas au minimum) et l'espace avant la pilule se réduit. --cw sert aussi à placer le badge. */ @media (min-width:1100px) and (min-height:590px) and (max-width:1189px),(min-width:1100px) and (min-height:590px) and (max-height:765px){ .about__title{width:max(calc(560 * var(--u)),13.99em)} .about{--cw:max(calc(560 * var(--u)),calc(37.33 * max(var(--fs-body),15 * var(--u))))} .about .btn--royal{margin-top:calc(40 * var(--u))} } @media (min-width:1100px) and (min-height:590px) and (max-height:649px){ .about .btn--royal{margin-top:calc(24 * var(--u))} } /* Barre du Héro (tablette et desktop) : thème + langue en colonne, dans une capsule verticale à droite. Les autres éléments restent alignés en haut ; la capsule descend sous la ligne. Sur téléphone, il n'y a pas la place à côté de la pastille « Disponible… » : le groupe reste horizontal. */ @media (min-width:700px){ .topbar{align-items:flex-start} .topbar .prefs{--pv:max(30px,calc(34 * var(--u)));flex-direction:column;gap:3px;height:auto;padding:4px;border-radius:999px;align-self:flex-start} .topbar .theme-btn{width:var(--pv);height:var(--pv)} .topbar .lang{flex-direction:column;height:auto;margin:0;padding:2px;gap:1px;border-radius:999px;width:var(--pv)} .topbar .lang button{width:100%;height:max(26px,calc(30 * var(--u)));padding:0} } @media (min-width:700px) and (max-width:1099px){ .topbar .prefs{margin-bottom:-60px} /* tablette : la capsule déborde sur l'espace libre au-dessus du nom au lieu de pousser toute la page vers le bas */ } /* fenêtres un peu plus étroites : les liens du hero se resserrent pour laisser de l'air autour de la pastille « Disponible… » */ @media (min-width:1280px) and (max-width:1599px) and (min-height:590px){ .topnav{gap:calc(54 * var(--ux))} } @media (min-width:1100px) and (max-width:1279px) and (min-height:590px){ .topnav{gap:calc(40 * var(--ux))} } /* ========================================================================= Menu hamburger (largeur < 1100 px, comme le passage de l'orbite aux cards) : remplace la barre flottante et les liens de la barre du héro Le bloc thème / langue du héro est déplacé dans le menu par js/main.js sous la même largeur. Sans JavaScript, la barre du héro reste affichée. ========================================================================= */ @media (max-width:1099px){ .fnav,.js .topnav{display:none} .ctl.menu-btn{display:grid;position:fixed;z-index:70;top:11px;right:var(--gut);width:44px;height:44px} .menu-btn__bars{position:relative;display:block;width:18px;height:12px} .menu-btn__bars i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform .45s var(--ease),opacity .25s ease} .menu-btn__bars i:nth-child(1){top:0} .menu-btn__bars i:nth-child(2){top:5px} .menu-btn__bars i:nth-child(3){top:10px} .menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(1){transform:translateY(5px) rotate(45deg)} .menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(2){opacity:0;transform:scaleX(.2)} .menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)} html.menu-open{overflow:hidden} /* menu plein écran en « verre liquide » (variables --lg-* : une valeur claire, une valeur sombre) ; les liens reprennent le design des titres de section */ .mmenu{ position:fixed;inset:0;z-index:65;display:flex;flex-direction:column; padding:calc(var(--gut) + 56px) var(--gut) calc(var(--gut) + env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain; background-color:var(--lg-tint); background-image: linear-gradient(180deg,var(--lg-hl) 0,rgba(255,255,255,0) clamp(80px,14vh,150px)), /* reflet spéculaire en haut */ radial-gradient(120% 50% at 10% 0%,var(--lg-glow),rgba(255,255,255,0) 70%); /* lueur douce en haut à gauche */ -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)); box-shadow: inset 0 1px 0 var(--lg-edge),inset 1px 0 0 var(--lg-edge), /* liseré 1 px plus clair en haut et à gauche */ inset 0 -1px 0 var(--lg-edge-lo),inset -1px 0 0 var(--lg-edge-lo), inset 0 0 36px var(--lg-glow), /* lueur intérieure */ inset 0 -56px 70px -60px var(--lg-shade); /* épaisseur du verre en bas */ opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility 0s linear .4s; /* seule l'opacité s'anime : jamais le flou */ } .mmenu.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .4s ease,visibility 0s} .mmenu__inner{margin-block:auto;width:100%;display:flex;flex-direction:column;gap:clamp(24px,5vh,44px)} /* margin auto : centré quand ça tient, défilable depuis le haut sinon */ .mmenu__list{list-style:none;margin:0;padding:0} .mmenu__list li{--d:calc(.1s + var(--k) * .07s);border-top:1px solid var(--rule-20);opacity:0;transition:opacity .3s ease} .mmenu__list li:last-child{border-bottom:1px solid var(--rule-20)} .mmenu.is-open .mmenu__list li{opacity:1;transition:opacity .5s ease calc(.05s + var(--k) * .06s)} .mmenu__list a{display:flex;align-items:baseline;gap:14px;padding:clamp(10px,2.2vh,18px) 0;color:var(--title);text-decoration:none;-webkit-tap-highlight-color:transparent} .mmenu__n{flex:none;width:30px;font:500 var(--fs-label)/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.12em;color:var(--blue);transition:color .3s} /* 30 + 14 d'écart = 44 px, retranchés de --t ci-dessous */ /* titres : classes .section-title / .outline / .solid du site (police en contour, texte plein en dégradé, même --t) ; seule la position change : le texte plein passe dans le flux pour que le numéro s'aligne sur sa ligne de base, le contour reste derrière, à la même place relative que sur la page */ .mmenu .section-title{--t:min(96px,calc((100 * var(--vw) - 2 * var(--gut) - 44px) / 7));flex:1 1 0;min-width:0;height:auto;padding-top:calc(var(--t) * var(--st))} .mmenu .section-title .outline{position:absolute;left:0;top:0;z-index:0;pointer-events:none} .mmenu .section-title .solid{position:relative;top:auto;left:auto;z-index:1} /* devant le contour, comme sur la page (là, il est absolu et se peint donc au-dessus) */ .mmenu__list a.is-active .outline{-webkit-text-stroke-color:var(--blue)} .mmenu__list a.is-active .mmenu__n{font-weight:700} /* bloc thème / langue (déplacé ici depuis le héro par js/main.js) : zones tactiles de 44 px */ .mmenu__prefs{display:flex} .mmenu .prefs{height:auto;padding:4px;gap:4px;margin:0} .mmenu .theme-btn{width:44px;height:44px} .mmenu .theme-btn svg{width:20px;height:20px} .mmenu .lang{height:auto;margin:0;padding:2px;gap:2px} .mmenu .lang button{min-width:44px;height:44px;padding:0 12px;font-size:var(--fs-small);opacity:.8} /* langue non active : 0,8 au lieu de 0,6 pour tenir le contraste AA sur le verre */ .mmenu .lang button[aria-pressed="true"]{opacity:1} } @media (min-width:700px) and (max-width:1099px){ .ctl.menu-btn{width:48px;height:48px} .mmenu__inner{max-width:760px} /* écrans larges : colonne de liens de largeur raisonnable, alignée à gauche */ .mmenu{padding-top:80px;padding-bottom:calc(32px + env(safe-area-inset-bottom))} .mmenu .section-title{--t:min(96px,calc((100 * var(--vw) - 2 * var(--gut) - 44px) / 7),9svh)} /* ...et jamais plus haut que l'écran ne le permet : liens et bloc thème / langue tiennent sans défilement */ } } /* sans backdrop-filter : fond opaque assorti au thème ; transparence réduite demandée dans le système : idem */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .mmenu{background-color:var(--lg-solid)} } @media (prefers-reduced-transparency:reduce){ .mmenu{background-color:var(--lg-solid);-webkit-backdrop-filter:none;backdrop-filter:none} } /* ========================================================================= Mini-formulaire de contact : fenêtre modale en verre ========================================================================= */ [hidden]{display:none!important} html.is-modal{overflow:hidden} .cmodal{ position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0; padding:clamp(14px,calc(3 * var(--vw)),32px);border:0;color:var(--ink);overflow:auto;background:transparent; } .cmodal[open]{display:flex} .cmodal::backdrop{background:transparent} /* voile flouté + légèrement teinté derrière le panneau */ .cmodal::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background:rgba(11,20,36,.18); -webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4); opacity:0;transition:opacity .4s ease; } .cmodal.is-in::before{opacity:1} .cmodal__panel{ position:relative;isolation:isolate;margin:auto;width:min(100%,520px); padding:clamp(24px,calc(3.6 * var(--vw)),36px);border-radius:30px; --base:.17;--base2:.07; background: radial-gradient(130% 75% at 0% 0%,rgba(255,255,255,.62) 0%,rgba(255,255,255,0) 56%), radial-gradient(100% 70% at 100% 100%,rgba(200,222,255,.42) 0%,rgba(255,255,255,0) 62%), linear-gradient(165deg,rgba(255,255,255,calc(var(--base) + .17)),rgba(255,255,255,var(--base2)) 42%,rgba(255,255,255,calc(var(--base) + .09))); -webkit-backdrop-filter:blur(36px) saturate(2.4) brightness(1.12) contrast(1.03);backdrop-filter:blur(36px) saturate(2.4) brightness(1.12) contrast(1.03); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.72), inset 3px 4px 10px -5px #fff, inset -3px -4px 10px -5px rgba(255,255,255,.7), inset 0 0 70px rgba(255,255,255,.2), inset 0 -26px 40px -28px rgba(57,127,246,.3), 0 50px 100px -36px rgba(11,20,36,.6), 0 2px 8px rgba(11,20,36,.14); transform:translateY(20px) scale(.965);opacity:0; transition:transform .6s var(--ease),opacity .4s ease; } .cmodal.is-in .cmodal__panel{transform:none;opacity:1} /* sur un fond sombre (pied de page), le verre reste assez clair pour que le texte soit lisible */ .cmodal.over-dark .cmodal__panel{--base:.5;--base2:.4} .cmodal.over-dark .cform__note,.cmodal.over-dark .cchips legend em{color:#2f3340} .cmodal.over-dark .cfield input::placeholder,.cmodal.over-dark .cfield textarea::placeholder{color:#686b75} .cmodal.is-out .cmodal__panel{transform:translateY(10px) scale(.985);opacity:0;transition-duration:.3s} .cmodal__panel::before{ content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.5px;pointer-events:none; background:linear-gradient(140deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.35) 28%,rgba(255,255,255,0) 50%,rgba(255,255,255,.4) 74%,rgba(255,255,255,1) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; } /* reflet diagonal + lueur bleutée en bas du verre */ .cmodal__panel::after{ content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none; background: linear-gradient(118deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.22) 35%,rgba(255,255,255,0) 50%), linear-gradient(to top,rgba(120,170,255,.18),rgba(255,255,255,0) 30%); } .cmodal__close{ position:absolute;top:16px;right:16px;z-index:3;width:38px;height:38px;border-radius:50%;border:0;padding:0; display:grid;place-items:center;color:var(--title);cursor:pointer; background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); box-shadow:inset 0 0 0 .5px rgba(255,255,255,.85),inset 0 0 0 1px rgba(16,42,86,.08),0 6px 14px -8px rgba(16,42,86,.35); transition:background .3s,transform .5s var(--ease); } .cmodal__close svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round} @media (hover:hover){.cmodal__close:hover{background:#fff;transform:rotate(90deg)}} .cf-in{opacity:0;translate:0 12px;transition:opacity .6s ease,translate .7s var(--ease)} .cmodal.is-in .cf-in{opacity:1;translate:0 0;transition-delay:calc(.14s + var(--i,0) * .055s)} .cmodal__status{display:flex;align-items:center;gap:10px;max-width:calc(100% - 52px);margin-bottom:16px;font:500 var(--fs-label)/1.35 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gray-d)} .cmodal__title{font:700 clamp(22px,calc(3.4 * var(--vw)),28px)/1.15 var(--mono);letter-spacing:.02em;text-transform:uppercase;color:var(--title);margin-bottom:8px;outline:none} .cmodal__lead{font:300 var(--fs-body)/1.5 var(--mono);color:var(--gray-d);margin-bottom:22px;max-width:36em} .cform{display:grid;gap:14px} .cfield{display:grid;gap:7px} .cfield label,.cchips legend{font:500 var(--fs-label)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gray-d)} .cchips legend{display:block;padding:0;margin-bottom:14px} .cchips legend em{font-style:normal;letter-spacing:.06em;text-transform:none;color:var(--gray)} .cfield input,.cfield textarea{ width:100%;font:400 var(--fs-ui)/1.4 var(--mono);color:var(--ink);padding:13px 15px;border-radius:14px; border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.46);outline:none; box-shadow:inset 0 1px 3px rgba(16,42,86,.1),inset 0 0 0 .5px rgba(16,42,86,.08); transition:border-color .25s,box-shadow .25s,background .25s; } .cfield textarea{resize:vertical;min-height:112px} .cfield input::placeholder,.cfield textarea::placeholder{color:#74747a} .cfield input:focus,.cfield textarea:focus{border-color:var(--bright);background:#fff;box-shadow:0 0 0 4px rgba(57,127,246,.16)} .cfield [aria-invalid="true"]{border-color:#d64545;box-shadow:0 0 0 4px rgba(214,69,69,.11)} .cfield__err{min-height:0;font:400 var(--fs-caption)/1.3 var(--mono);color:#c0392b} .cfield__err:empty{display:none} .cchips{display:grid;gap:9px;margin:0;padding:0;border:0;min-width:0} .cchips__row{display:flex;flex-wrap:wrap;gap:8px} .cchip{position:relative;cursor:pointer} .cchip input{position:absolute;opacity:0;pointer-events:none} .cchip span{ display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;cursor:pointer; font:500 var(--fs-small)/1 var(--mono);color:var(--ink);background:rgba(255,255,255,.5); box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 1px 0 rgba(255,255,255,.8),0 2px 6px -3px rgba(16,42,86,.25); transition:background .3s,color .3s,box-shadow .3s,transform .3s var(--ease); } @media (hover:hover){.cchip span:hover{background:#fff;transform:translateY(-1px)}} .cchip input:checked+span{background:var(--blue);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 8px 16px -10px rgba(23,84,184,.9)} .cchip input:focus-visible+span{outline:2px solid var(--bright);outline-offset:2px} .cform__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none} .cform__alert{font:400 var(--fs-small)/1.45 var(--mono);color:#b42318;background:rgba(214,69,69,.09);border-radius:12px;padding:10px 13px} .cform__alert a{color:inherit;text-decoration:underline;text-underline-offset:2px} .cform__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px} .cform__note{flex:1 1 200px;font:300 var(--fs-caption)/1.45 var(--mono);color:var(--gray)} .cform.is-sending .cform__submit{pointer-events:none;opacity:.85} .cform.is-sending .cform__submit .ico{display:none} .cdone{display:grid;justify-items:start;padding-top:6px} .cdone__check{width:60px;height:60px;margin-bottom:18px;fill:none;stroke:#1ea34a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .cdone__check circle{stroke-dasharray:151;stroke-dashoffset:151;animation:draw-c .9s var(--ease-io) forwards} .cdone__check path{stroke-dasharray:44;stroke-dashoffset:44;animation:draw-c .6s var(--ease-io) .55s forwards} @keyframes draw-c{to{stroke-dashoffset:0}} .cdone__mail{margin-top:-8px;font:500 var(--fs-small)/1.4 var(--mono);color:var(--blue);text-decoration:underline;text-underline-offset:3px} .cdone .btn{margin-top:22px} @media (max-width:520px){.cmodal__status{letter-spacing:.08em;font-size:var(--fs-label)}.cmodal{padding:12px}.cmodal__panel{border-radius:26px}.cchip span{height:32px;padding:0 12px}} /* ========================================================================= Pied de page : fond bleu nuit, navigation, réseaux, contact, grand nom en contour ========================================================================= */ .sitefooter{ position:relative;isolation:isolate;overflow:hidden; background:var(--ft-bg);color:var(--ft-ink); border-radius:clamp(24px,calc(3.2 * var(--vw)),44px) clamp(24px,calc(3.2 * var(--vw)),44px) 0 0; padding:clamp(32px,calc(6 * var(--vw)),104px) var(--gut) 0; display:flex;flex-direction:column;min-height:100vh;min-height:100svh; /* même hauteur que les autres sections */ } .sitefooter::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:radial-gradient(circle at center,rgba(255,255,255,.06) 1.6px,transparent 1.9px); background-size:24px 24px;background-position:-1px -3px; -webkit-mask:linear-gradient(#000,transparent 75%);mask:linear-gradient(#000,transparent 75%); } .sitefooter::after{ content:"";position:absolute;right:calc(-14 * var(--vw));top:calc(-18 * var(--vw));width:calc(46 * var(--vw));height:calc(46 * var(--vw));z-index:-1;pointer-events:none;border-radius:50%; background:radial-gradient(circle,rgba(57,127,246,.22),rgba(57,127,246,0) 68%); } .sitefooter__inner{width:100%;max-width:1600px;margin:0 auto;flex:1 0 auto;display:flex;flex-direction:column;justify-content:space-between} /* l'espace libre se répartit entre l'accroche, les colonnes et la barre du bas */ .sitefooter__cta{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-bottom:clamp(22px,calc(4 * var(--vw)),68px);border-bottom:1px solid rgba(var(--ft-rgb),.14)} .sitefooter__eyebrow{margin-bottom:16px;font:500 var(--fs-label)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--ft-rgb),.55)} .sitefooter__title{max-width:15em;font:700 clamp(24px,calc(4 * var(--vw)),56px)/1.1 var(--mono);letter-spacing:.02em;text-transform:uppercase;color:#f4f3ef;text-wrap:balance} .sitefooter__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 24px;padding:clamp(22px,calc(3.6 * var(--vw)),60px) 0} .sitefooter__brand{grid-column:1 / -1} .sitefooter__grid>.sitefooter__col:last-child{grid-column:1 / -1} .sitefooter__name{margin-bottom:8px;font:italic 400 clamp(28px,calc(2.3 * var(--vw)),36px)/1.05 var(--font-accent);font-synthesis:none;letter-spacing:-.005em;color:#fff} /* nom en police d'accent (le serif d'affichage est plus petit à taille égale) */ .sitefooter__role{max-width:26em;font:300 var(--fs-body)/1.65 var(--mono);color:rgba(var(--ft-rgb),.68)} .sitefooter__status{display:inline-flex;align-items:center;gap:11px;margin-top:20px;font:500 var(--fs-label)/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--ft-rgb),.78)} .sitefooter__status .avail__dot{margin-left:3px} .sitefooter__col h3{margin-bottom:18px;font:500 var(--fs-label)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--ft-rgb),.64)} .sitefooter__col ul{display:grid;gap:6px} .sitefooter__col a{ position:relative;display:inline-flex;align-items:center;gap:.5em; font:400 var(--fs-ui)/1.3 var(--mono);color:rgba(var(--ft-rgb),.86);text-decoration:none;transition:color .3s; } .sitefooter__col a{padding-block:5px} .sitefooter__mail{white-space:nowrap} @media (max-width:359px){.sitefooter__mail{white-space:normal;overflow-wrap:break-word}} /* très petit écran : repli avant le @ */ .sitefooter__col a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)} @media (hover:hover){.sitefooter__col a:hover{color:#fff}} @media (hover:hover){.sitefooter__col a:hover::after{transform:scaleX(1);transform-origin:left}} .sitefooter__col .ico{width:.85em;height:.85em;opacity:.5;transition:transform .45s var(--ease),opacity .3s} @media (hover:hover){.sitefooter__col a:hover .ico{opacity:1;transform:translate(2px,-2px)}} .sitefooter__bar{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px; padding:14px 0;border-top:1px solid rgba(var(--ft-rgb),.14); font:400 var(--fs-caption)/1.5 var(--mono);color:rgba(var(--ft-rgb),.64); } .sitefooter__legal{margin-left:.5em;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;white-space:nowrap} .sitefooter__legal:hover,.sitefooter__legal:focus-visible{color:var(--ft-ink)} .totop{ position:relative;display:grid;place-items:center;width:44px;height:44px;margin-left:auto;padding:0;border:0;border-radius:50%;cursor:pointer; color:var(--ft-ink);background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.22); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); transition:background .35s var(--ease),transform .45s var(--ease),box-shadow .35s var(--ease); } .totop svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease)} @media (hover:hover){.totop:hover{background:rgba(255,255,255,.14);transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 1px 0 rgba(255,255,255,.35)}} @media (hover:hover){.totop:hover svg{transform:translateY(-2px)}} .totop:active{transform:scale(.95)} .sitefooter__markwrap{margin:clamp(8px,calc(2.2 * var(--vw)),34px) calc(-1 * var(--gut)) 0;container-type:inline-size;overflow:hidden} /* Le texte est calé sur les bords EXACTS de la page, d'après le dessin de la police (Geist Mono Outline Medium) : - largeur : de l'encre du « L » (marge gauche de la lettre = .098 em) à l'encre du « O » ; hors tout 8,74 em avec le contour - hauteur : line-height .73 → le bas des capitales touche le bas de la page */ .sitefooter__mark{ margin:0 0 0 -.09em;text-align:left;white-space:nowrap;user-select:none; font:500 calc(100cqw / 8.74)/.73 "Geist Mono Outline";letter-spacing:-.01em; color:transparent;-webkit-text-stroke:.016em rgba(var(--ft-rgb),.32);paint-order:stroke fill; } @media (min-width:700px){ .sitefooter__cta{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:40px} .sitefooter__cta .prefs{order:0;align-self:flex-start} .sitefooter__grid{grid-template-columns:1.6fr 1fr 1fr auto;gap:40px 32px} /* la colonne Contact prend la largeur de l'adresse e-mail, écrite sur une seule ligne */ .sitefooter__brand,.sitefooter__grid>.sitefooter__col:last-child{grid-column:auto} } @media (min-width:700px) and (max-width:1099px){.sitefooter__grid{column-gap:24px}} @media (min-width:700px) and (max-width:959px){ /* tablette : la colonne Contact passe sous les trois autres, pleine largeur, pour que l'adresse tienne sur une ligne */ .sitefooter__grid{grid-template-columns:1.2fr 1fr 1fr} .sitefooter__grid>.sitefooter__col:last-child{grid-column:1 / -1} } @media (max-width:699px){ footer.sitefooter{padding-top:23px;padding-bottom:0} /* téléphone : le bouton « retour en haut » se place à droite des deux lignes de texte (une rangée de moins) */ .sitefooter__bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center} .sitefooter__bar .totop{grid-column:2;grid-row:1 / span 2} } /* ========================================================================= Écran de chargement : la grille de points du fond du site s'anime en vagues, puis se retire de gauche à droite ========================================================================= */ .loader{display:none} .js .loader{ --r:-600px;--soft:min(240px,calc(18 * var(--vw))); display:block;position:fixed;inset:0;z-index:1000;overflow:hidden; background:var(--bg); -webkit-mask-image:linear-gradient(to right,transparent calc(var(--r) - var(--soft)),#000 var(--r)); mask-image:linear-gradient(to right,transparent calc(var(--r) - var(--soft)),#000 var(--r)); } .loader-done .loader{display:none} html.is-loading{overflow:hidden} .loader__canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .loader__hud{ position:absolute;left:50%;bottom:clamp(28px,7vh,72px);translate:-50% 0;z-index:2; display:flex;align-items:center;gap:16px;height:40px;padding:0 22px;border-radius:999px;pointer-events:none; font:500 var(--fs-label)/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--title);white-space:nowrap; background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.2)); -webkit-backdrop-filter:blur(14px) saturate(1.7);backdrop-filter:blur(14px) saturate(1.7); box-shadow:inset 0 0 0 .5px rgba(255,255,255,.85),inset 1.5px 2px 3px -1px #fff,0 14px 30px -16px rgba(16,42,86,.45),0 1px 3px rgba(16,42,86,.1); opacity:0;transition:opacity .7s ease; } .loader.is-on .loader__hud{opacity:1} .loader__hud.is-off{opacity:0;transition-duration:.35s} .loader__brand{margin-right:-.24em} .loader__pct{min-width:4.2ch;text-align:right;letter-spacing:.08em;color:var(--blue);font-variant-numeric:tabular-nums} .loader__pct b{font-weight:600} /* ========================================================================= Thème sombre — activé par (réglage du système par défaut, ou choix de l'utilisateur). Le thème clair reste le rendu de référence : tout ce qui suit ne s'applique qu'en mode sombre. ========================================================================= */ html[data-theme="dark"]{ color-scheme:dark; --grad-a:#f4f7ff;--grad-b:#7fb0ff; --ft-bg:#060910; --bg:#0b0f17;--dot:#1a2030; --ink:#ecebe6;--text:#f3f2ee;--title:#e4ecff; --gray:#8d93a1;--gray-d:#b7bcc8;--gray-lab:#9aa1b0;--gray-eyebrow:#8f96a5;--outline:#4a5365; --hand-ink:#a8afbd;--dot-off:#5b6579; --blue:#6ea3ff;--bright:#4f8dff; --rule:#aebfe6;--rule-50:rgba(174,191,230,.45);--rule-35:rgba(174,191,230,.3);--rule-20:rgba(174,191,230,.18); --lg-tint:rgba(12,17,27,.78);--lg-hl:rgba(255,255,255,.13);--lg-glow:rgba(255,255,255,.07); --lg-edge:rgba(255,255,255,.36);--lg-edge-lo:rgba(255,255,255,.13);--lg-shade:rgba(0,0,0,.4);--lg-solid:rgb(11,15,23); --hover-fill:#1c3c7c;--surface-ink:#e6edff; --accent:var(--blue);--accent-lg:var(--bright); --card-bg:rgba(255,255,255,.06);--card-line:rgba(255,255,255,.14);--card-shadow:rgba(0,0,0,.7);--plate:rgba(244,243,239,.94); --mq-bg:#12161e;--mq-bg-b:#0d1118;--mq-line:rgba(255,255,255,.09);--mq-stroke:rgba(228,236,255,.42);--mq-shadow:rgba(0,0,0,.7); } html[data-theme="dark"] ::selection{background:#4f8dff;color:#fff} /* verre : plus sombre, liseré plus discret */ html[data-theme="dark"] .pill,html[data-theme="dark"] .fnav,html[data-theme="dark"] .prefs,html[data-theme="dark"] .ctl:not(.ctl--pause){ --tint:rgba(255,255,255,.07);--tint-hover:rgba(255,255,255,.13);--sh:rgba(0,0,0,.6); background-image:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.02) 50%,rgba(255,255,255,0) 100%); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.2), inset 2px 3px 4px -3px rgba(255,255,255,.35), inset -2px -3px 4px -3px rgba(255,255,255,.12), inset 0 -8px 14px -10px rgba(0,0,0,.4), var(--drop), 0 1px 2px rgba(0,0,0,.4); } html[data-theme="dark"] .pill::before,html[data-theme="dark"] .fnav::before,html[data-theme="dark"] .prefs::before,html[data-theme="dark"] .ctl:not(.ctl--pause)::before{ background:linear-gradient(140deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.1) 30%,rgba(255,255,255,0) 50%,rgba(255,255,255,.12) 72%,rgba(255,255,255,.4) 100%); } html[data-theme="dark"] .fnav{ --tint:rgba(18,24,38,.55); background-image:radial-gradient(130% 170% at 16% -40%,rgba(255,255,255,.14),rgba(255,255,255,0) 56%),linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.01) 55%,rgba(255,255,255,.04)); } @media (hover:hover){html[data-theme="dark"] .pill:hover::after,html[data-theme="dark"] .fnav:hover::after{filter:opacity(.45)}} html[data-theme="dark"] .pill__icon .bw{filter:invert(1)} html[data-theme="dark"] .prefs{--tint:rgba(255,255,255,.07)} @media (hover:hover){html[data-theme="dark"] .theme-btn:hover{background:rgba(255,255,255,.12)}} html[data-theme="dark"] .fnav .prefs{background:none;box-shadow:none} /* pastille « disponible » */ html[data-theme="dark"] .avail{ --tint:rgba(255,255,255,.08);--tint-hover:rgba(255,255,255,.14);--inner:rgba(0,0,0,.35);--edge:rgba(255,255,255,.12); background-image:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.03) 50%,rgba(57,127,246,.06) 100%); } /* boutons bleus : un peu plus sombres sur fond sombre */ html[data-theme="dark"] .btn-glass{--tint:rgba(33,68,150,.94);--tint-hover:rgba(46,86,184,.98)} html[data-theme="dark"] .topnav .btn-glass{--tint:rgba(36,90,204,.94);--tint-hover:rgba(52,112,230,.98);--sh:rgba(57,127,246,.5)} html[data-theme="dark"] .ctl.ctl--next{--tint:rgba(37,76,160,.92);--tint-hover:rgba(57,100,200,1)} html[data-theme="dark"] .ctl__progress{stroke:#6ea3ff} /* logos : posés sur une plaque claire pour rester lisibles */ html[data-theme="dark"] .orbit__item img{ background:rgba(244,243,239,.94);border-radius:16px;padding:10px 12px; box-shadow:0 12px 26px -14px rgba(0,0,0,.7),inset 0 0 0 .5px rgba(255,255,255,.5); } html[data-theme="dark"] .tl-logo img{background:rgba(244,243,239,.94);border-radius:12px;padding:8px 10px;box-shadow:0 10px 22px -14px rgba(0,0,0,.7)} html[data-theme="dark"] .tl-node{border-color:#0b0f17} html[data-theme="dark"] .hero__portrait{filter:none} /* formulaire de contact */ html[data-theme="dark"] .cmodal::before{background:rgba(3,6,12,.5)} html[data-theme="dark"] .cmodal__panel{ background: radial-gradient(130% 75% at 0% 0%,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 56%), radial-gradient(100% 70% at 100% 100%,rgba(70,120,255,.2) 0%,rgba(255,255,255,0) 62%), linear-gradient(165deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 42%,rgba(255,255,255,.07)); -webkit-backdrop-filter:blur(36px) saturate(1.7) brightness(.85);backdrop-filter:blur(36px) saturate(1.7) brightness(.85); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.2), inset 3px 4px 10px -5px rgba(255,255,255,.4), inset -3px -4px 10px -5px rgba(255,255,255,.12), inset 0 0 70px rgba(255,255,255,.03), inset 0 -26px 40px -28px rgba(57,127,246,.3), 0 50px 100px -36px rgba(0,0,0,.85), 0 2px 8px rgba(0,0,0,.45); } html[data-theme="dark"] .cmodal__panel::before{background:linear-gradient(140deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 28%,rgba(255,255,255,0) 50%,rgba(255,255,255,.14) 74%,rgba(255,255,255,.45) 100%)} html[data-theme="dark"] .cmodal__panel::after{background:linear-gradient(118deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.06) 35%,rgba(255,255,255,0) 50%),linear-gradient(to top,rgba(70,120,255,.12),rgba(255,255,255,0) 30%)} html[data-theme="dark"] .cmodal__close{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.2),0 6px 14px -8px rgba(0,0,0,.6)} @media (hover:hover){html[data-theme="dark"] .cmodal__close:hover{background:rgba(255,255,255,.18)}} html[data-theme="dark"] .cfield input,html[data-theme="dark"] .cfield textarea{ background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:var(--ink);box-shadow:inset 0 1px 3px rgba(0,0,0,.35); } html[data-theme="dark"] .cfield input::placeholder,html[data-theme="dark"] .cfield textarea::placeholder{color:#8a91a1} html[data-theme="dark"] .cfield input:focus,html[data-theme="dark"] .cfield textarea:focus{background:rgba(255,255,255,.1);border-color:#4f8dff;box-shadow:0 0 0 4px rgba(79,141,255,.25)} html[data-theme="dark"] .cfield__err,html[data-theme="dark"] .cform__alert{color:#ff8a80} html[data-theme="dark"] .cform__alert{background:rgba(255,100,90,.12)} html[data-theme="dark"] .cchip span{background:rgba(255,255,255,.07);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} @media (hover:hover){html[data-theme="dark"] .cchip span:hover{background:rgba(255,255,255,.14)}} html[data-theme="dark"] .cmodal.over-dark .cform__note,html[data-theme="dark"] .cmodal.over-dark .cchips legend em{color:var(--gray)} html[data-theme="dark"] .cmodal.over-dark .cfield input::placeholder,html[data-theme="dark"] .cmodal.over-dark .cfield textarea::placeholder{color:#8a91a1} /* pied de page : un cran plus sombre que le fond */ html[data-theme="dark"] .sitefooter{box-shadow:inset 0 1px 0 rgba(255,255,255,.07)} /* chargement */ html[data-theme="dark"] .loader__hud{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));box-shadow:inset 0 0 0 .5px rgba(255,255,255,.2),inset 1.5px 2px 3px -1px rgba(255,255,255,.3),0 14px 30px -16px rgba(0,0,0,.7)} /* bascule douce entre les thèmes (classe posée 0,4 s par le script) */ html.theme-switching *,html.theme-switching *::before,html.theme-switching *::after{ transition:background-color .35s ease,color .35s ease,border-color .35s ease,fill .35s ease,stroke .35s ease,box-shadow .35s ease !important; } /* ========================================================================= Écrans tactiles : zones d'appui agrandies (≈ 40 px) sans changer le dessin des commandes (BTN-02) Une zone invisible déborde du bouton ; les liens du pied de page gagnent de la hauteur d'appui à la place de l'espace entre eux. ========================================================================= */ @media (pointer:coarse){ .lang button,.theme-btn,.orbit__pager button,.pcar__pager button,.ctl--pause{position:relative} .lang button::after,.theme-btn::after,.ctl--pause::after,.fnav a::before{content:"";position:absolute;inset:-7px -3px} .marquee__pause::after{content:"";position:absolute;inset:-7px} .fnav a::before{inset:-6px -4px} .lang button::after{inset:-7px 0} /* FR / EN : zone agrandie vers le haut et le bas seulement, pour ne pas empiéter l'un sur l'autre */ .orbit__pager button::after,.pcar__pager button::after{content:"";position:absolute;inset:-8px 0} .sitefooter__col ul{gap:0} .sitefooter__col a{padding-block:10px} } /* ========================================================================= Impression : tout le contenu est visible, sans éléments fixes ni animations ========================================================================= */ @media print{ .loader,.progress,.fnav,.menu-btn,.mmenu,.dotfield,.skip-link,.fusion,.marquee,.cmodal,.prefs,.totop,.hero__spacer,.orbit__bar,.pcar__bar{display:none!important} html,body{background:#fff!important} html.is-loading{overflow:visible!important} .js [data-reveal],.js .ch,.js .handnote,.js .service__title span{opacity:1!important;translate:0 0!important;transform:none!important;animation:none!important;filter:none!important} .js .service-wrap::after{transform:none!important} .hero,.section{display:block!important;height:auto!important;min-height:0!important;page-break-inside:avoid;overflow:visible!important} .stage,.hero .stage{display:block!important;position:static!important;width:auto!important;height:auto!important} .section{padding:24px 0!important} .sitefooter{background:#fff!important;color:#000!important;border-radius:0!important} *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important} a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#444} } /* ========================================================================= Accessibilité : mouvement réduit ========================================================================= */ @media (prefers-reduced-motion:reduce){ .js .loader{display:none} html.is-loading{overflow:auto} html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important} .js [data-reveal],.js .ch,.js .handnote{opacity:1!important} .js .fusion__in{opacity:1!important} .fusion__in{transform:none!important} /* bandeaux fixes : droits, l'un sous l'autre, mots à la ligne et centrés */ .marquee{--mq-size:clamp(15px,calc(2.4 * var(--vw)),34px);height:auto} .marquee__band{position:relative;left:0;top:auto;width:100%;height:auto;rotate:none;padding:.35em var(--gut);box-shadow:none} .marquee__track{animation:none!important;display:block;width:auto} .marquee__group[aria-hidden="true"],.marquee__item[aria-hidden="true"]{display:none} .marquee__pause{display:none} .marquee__group{flex:0 1 auto;flex-wrap:wrap;justify-content:center;row-gap:.25em} .marquee__item{flex:0 1 auto;white-space:normal;text-align:center} .marquee__band--a .marquee__item:nth-child(5)::after,.marquee__band--b .marquee__item:nth-child(4)::after{display:none} .marquee__band--b .marquee__group:nth-child(2),.marquee__band--b .marquee__item:nth-child(n+5){display:none} .js .service__title span{translate:0 0!important} .js .service-wrap::after{transform:scaleX(1)!important} .js .orbit__ring{stroke-dashoffset:0!important} .handarrow .draw{stroke-dashoffset:0!important} } @media (prefers-reduced-motion:reduce) and (max-width:699px){ .marquee__item::after{display:none} /* en statique, les mots passent à la ligne : plus de séparateurs en fin de ligne */ .marquee__group{column-gap:1.1em} }