/* ============================================================ Synatom — site vitrine Noir/blanc/gris monochrome, sections voilées sur le fond animé. ============================================================ */ @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap; src:url(assets/fonts/ibm-plex-mono-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap; src:url(assets/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap; src:url(assets/fonts/ibm-plex-mono-500-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap; src:url(assets/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap; src:url(assets/fonts/sora-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap; src:url(assets/fonts/sora-400-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Sora';font-style:normal;font-weight:500;font-display:swap; src:url(assets/fonts/sora-500-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Sora';font-style:normal;font-weight:500;font-display:swap; src:url(assets/fonts/sora-500-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap; src:url(assets/fonts/sora-600-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap; src:url(assets/fonts/sora-600-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} :root{ /* Palette officielle Synatom (voir synatom-brand/README.txt) : Ink #0A0A0B · Graphite #3A3A3E · Grey #7C7C82 · Light grey #C6C4C0 · Off-white #F4F4F5. Aucune couleur d'accent : la hiérarchie se fait uniquement par la valeur, jamais par la teinte. */ --ink:#0A0A0B; --ink-2:#17171A; --graphite:#3A3A3E; --ligne:rgba(198,196,192,.16); --gris:#C6C4C0; --blanc-casse:#F4F4F5; --focus:#F4F4F5; --blanc:#FFFFFF; --texte:#F4F4F5; --mute:#C6C4C0; --mute-2:#9C9BA0; --voile:rgba(10,10,11,.62); --carte:rgba(255,255,255,.045); /* Contours ÉDITORIAUX : angles nets, à peine adoucis. Deux valeurs suffisent — au-delà, les grands rayons donnent l'aspect « composant générique » que le client ne veut plus. La capsule de navigation et la bascule de langue gardent volontairement leur forme ronde : ce sont des commandes, pas des conteneurs de contenu, et elles ont été demandées ainsi. */ --r:3px; --r-lg:3px; --wrap:1180px; --sans:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --serif:'Sora',system-ui,-apple-system,Helvetica,Arial,sans-serif; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; } *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:114px; color-scheme:dark;} body{ margin:0;background:var(--ink);color:var(--texte); font-family:var(--sans);font-size:15.5px;line-height:1.72; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;height:auto;display:block;} a{color:inherit;} a,button,summary,input,select,textarea,label{touch-action:manipulation;} h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:600;line-height:1.14;letter-spacing:-.035em; text-wrap:balance;} p{margin:0;} ul,ol{margin:0;padding:0;list-style:none;} .sprite{position:absolute;width:0;height:0;overflow:hidden;} .ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none;} /* ---------- fond du site ---------- Trois couches fixes, empilées dans cet ordre : .bg-static : le dégradé marine, socle toujours présent ; .bg-flux : les tracés en écoulement — LE fond du site. Ils remplacent l'ancien canvas WebGL (constellation, orbites elliptiques statiques et courants de bruit), retiré à la demande du client. L'atome 3D interactif du héro d'accueil n'a rien à voir avec cette couche et reste en place ; .bg-voile : voile par-dessus, qui borne l'encre des tracés sous le contenu dense. Bien plus léger qu'avant : les particules additives du WebGL saturaient, pas ces traits-ci. */ .bg-static,.bg-flux,.bg-voile{position:fixed;inset:0;z-index:0;pointer-events:none; width:100%;height:100%;display:block;} .bg-voile{background:rgba(19,19,19,.30);} .bg-static{ background: radial-gradient(1000px 700px at 78% 8%,rgba(66,66,66,.55),transparent 62%), radial-gradient(760px 560px at 12% 88%,rgba(163,163,163,.13),transparent 66%), radial-gradient(900px 620px at 50% 45%,rgba(45,45,45,.5),transparent 70%), linear-gradient(168deg,#141414 0%,#272727 46%,#141414 100%); background-color:var(--ink); } .site-header,main,.site-footer{position:relative;z-index:1;} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px;} .wrap-etroit{max-width:880px;} .skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--gris);color:var(--ink); padding:12px 18px;border-radius:0 0 3px 0;font-weight:600;} .skip:focus{left:0;} :focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px;} /* ---------- boutons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5em; font-family:var(--sans);font-size:16px;font-weight:600;line-height:1.2; padding:15px 28px;border-radius:3px;border:1.5px solid transparent; text-decoration:none;cursor:pointer;text-align:center; transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease; } .btn-gold{background:var(--gris);color:#1A1A1A;box-shadow:0 10px 28px rgba(163,163,163,.24);} .btn-gold:hover{background:var(--blanc-casse);transform:translateY(-2px);} .btn-ghost{background:rgba(255,255,255,.04);color:var(--texte);border-color:rgba(238,238,238,.28);} .btn-ghost:hover{border-color:var(--gris);color:var(--blanc-casse);transform:translateY(-2px);} .btn-sm{padding:11px 20px;font-size:15px;} .btn-full{width:100%;} .btn .ic{width:1.05em;height:1.05em;} /* ---------- en-tête ---------- */ /* La barre n'est plus un bandeau plein : elle devient transparente et c'est la CAPSULE des liens qui porte le verre dépoli. Un dégradé très doux vers le bas garde le logo et le bouton lisibles quand du contenu défile dessous — sans lui, le haut de page redevient une barre franche dès qu'on descend. */ .site-header{ position:sticky;top:0;z-index:300; /* au-dessus de tout le contenu de page */ background:linear-gradient(to bottom,rgba(16,16,16,.90) 0%,rgba(16,16,16,.66) 58%,rgba(16,16,16,0) 100%); /* Le flou porte sur ce qui passe DERRIÈRE l'en-tête. En haut de page le héro est un dégradé lisse : flouter n'y change rien de visible. Dès qu'on défile, le texte qui remonte derrière devient une nappe illisible au lieu de se lire en filigrane entre la capsule et le bouton. */ backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-bottom:0; } .header-in{display:flex;align-items:center;gap:20px;min-height:100px;} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none; position:relative;z-index:2; /* devant le fond flouté de l'en-tête */ overflow:visible;} /* Le PNG est à fond TRANSPARENT : le voile de l'en-tête et le fond animé se voient à travers les vides de l'atome. La lueur portée le détache de tout fond, clair ou sombre, sans rien ajouter au balisage. */ /* LOGOTYPE — fichier fourni par la charte, jamais recomposé en CSS. Dimensionné en hauteur : le lockup est horizontal (ratio ~3.24). */ .brand-marque{ height:68px;width:auto;flex:none;overflow:visible; background:transparent; filter:drop-shadow(0 0 10px rgba(198,196,192,.30)) drop-shadow(0 2px 5px rgba(10,10,10,.55)); transition:filter .25s ease,transform .25s ease;} .brand:hover .brand-marque{ filter:drop-shadow(0 0 15px rgba(244,244,245,.42)) drop-shadow(0 2px 5px rgba(10,10,10,.55)); transform:translateY(-1px);} @media (prefers-reduced-motion:reduce){ .brand-marque,.brand:hover .brand-marque{transition:none;transform:none;} } /* CAPSULE DE NAVIGATION — verre dépoli, centrée entre le logo et le bloc de droite. `margin-inline:auto` sur un élément en `flex` la centre par rapport à l'espace RESTANT, pas à la fenêtre ; c'est le comportement voulu ici, la capsule reste optiquement au milieu sans dépendre de la largeur du logo. */ .nav-desk{display:flex;align-items:center;gap:34px;margin-inline:auto;flex:none; padding:0;background:none;border:0;box-shadow:none;} .nav-desk a{ display:inline-flex;align-items:center;white-space:nowrap; text-decoration:none;font-size:11px;font-weight:500;color:var(--mute-2); letter-spacing:.16em;text-transform:uppercase; padding:6px 0;border:0;border-radius:0; transition:color .2s ease;} .nav-desk a:hover{color:var(--blanc);background:transparent;} /* Page active : la pilule pleine appartenait a la capsule vitree. Sans elle, un simple passage en blanc suffit. Le bouton d'action reste le seul point d'appel plein de l'en-tete. */ .nav-desk a.est-actif{color:var(--blanc);} .hdr-cta{flex:none;} .burger{display:none;width:44px;height:44px;margin-left:auto;background:none;border:1px solid var(--ligne); border-radius:3px;cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px;} .burger span{display:block;width:19px;height:1.8px;background:var(--texte);border-radius:2px;transition:transform .25s ease,opacity .2s ease;} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg);} .burger[aria-expanded="true"] span:nth-child(2){opacity:0;} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg);} .menu-mobile{display:none;flex-direction:column;gap:2px;padding:10px 24px 24px;border-top:1px solid var(--ligne);background:var(--ink);} .menu-mobile a{text-decoration:none;padding:14px 2px;font-size:17px;font-weight:500;color:var(--texte);border-bottom:1px solid rgba(198,198,198,.1);} .menu-mobile .btn{margin-top:16px;border-bottom:none;color:var(--ink);} /* ---------- héro ---------- */ .hero{position:relative;padding:112px 0 104px;text-align:center; background:radial-gradient(1150px 700px at 50% 45%,rgba(26,26,26,.5),rgba(26,26,26,.26) 62%,rgba(26,26,26,.1) 100%);} .hero-in{display:flex;flex-direction:column;align-items:center;} /* EXERGUE DU HÉRO — remplace l'ancienne pastille ronde à étoile. Un filet doré puis des capitales espacées : c'est une entrée en matière de magazine, pas un badge. Aucun cercle, aucun picto. */ .exergue{display:flex;align-items:center;gap:14px;margin-bottom:26px; font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--blanc-casse);} .exergue::before{content:"";width:44px;height:1px;flex:none; background:linear-gradient(90deg,transparent,var(--gris));} .hero .exergue{justify-content:flex-start;} .hero-page .exergue,.hero:not(.hero-clean) .exergue{justify-content:center;} .hero-page .exergue::after,.hero:not(.hero-clean) .exergue::after{ content:"";width:44px;height:1px;flex:none; background:linear-gradient(270deg,transparent,var(--gris));} .hero h1{font-size:clamp(1.85rem,2.9vw,2.55rem);font-weight:600;color:var(--blanc); letter-spacing:-.025em;max-width:16ch;text-wrap:balance;} .hero-lead{margin-top:22px;font-size:16px;line-height:1.68;color:var(--mute-2);max-width:46ch;} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:38px;} .hero-tag{margin-top:44px;font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--mute-2);} .hero-tag span{color:var(--gris);margin-inline:.35em;} /* ---------- sections ---------- */ .sec{padding:136px 0;} .sec-voile{background:var(--voile);border-block:1px solid rgba(198,198,198,.1);} .sec-tete{text-align:center;max-width:56ch;margin-inline:auto;margin-bottom:64px;} h2{font-size:clamp(1.45rem,2.2vw,1.95rem);color:var(--blanc-casse);} .sec-lead{margin-top:14px;font-size:15.5px;line-height:1.7;color:var(--mute-2);} .grand-para{font-size:18.5px;line-height:1.78;color:var(--mute);} .grand-para + .grand-para{margin-top:20px;} .sec-clair{text-align:center;} .sec-clair h2{margin-bottom:22px;} /* ---------- cartes (2 colonnes) ---------- */ .duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:stretch;} .carte{display:flex;flex-direction:column;background:var(--carte);border:1px solid var(--ligne); border-radius:var(--r-lg);padding:34px 32px;} .carte-vedette{border-color:rgba(163,163,163,.4); background:linear-gradient(160deg,rgba(163,163,163,.10),rgba(255,255,255,.04) 55%);} .carte-tete{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px;} /* Les en-têtes de carte n'ont plus de picto du tout : l'étoile et l'engrenage « faisaient IA ». Le titre porte seul, avec l'étiquette sous lui. */ .carte-tete,.prod-tete{gap:0;} .carte h3{font-size:1.42rem;color:var(--blanc);} /* ÉTIQUETTES — la pilule parfaitement ronde est ce qui « fait gabarit ». On garde un cadre, mais rectangulaire à coin coupé : ça évoque une étiquette imprimée plutôt qu'un badge d'interface. */ .etiq{display:inline-block;margin-top:9px;font-family:var(--sans);font-size:11px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;padding:5px 12px;border-radius:0; clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%); background:rgba(16,16,16,.66);color:var(--focus);border:1px solid rgba(198,198,198,.36);} .etiq-or{background:rgba(16,16,16,.6);color:var(--blanc-casse);border-color:rgba(163,163,163,.5);} .carte > p{font-size:16.5px;line-height:1.68;color:var(--mute);} .ex-titre{margin-top:26px;font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--blanc-casse);} .liste-fleche{margin-top:14px;display:flex;flex-direction:column;gap:11px;} .liste-fleche li{display:flex;align-items:flex-start;gap:11px;font-size:16px;line-height:1.6;color:var(--texte);} .liste-fleche .ic{width:15px;height:15px;margin-top:.34em;color:var(--gris);stroke-width:2.6;} .encadre{margin-top:22px;padding:20px 22px;border-radius:var(--r); background:rgba(26,26,26,.5);border:1px solid rgba(163,163,163,.26);} .encadre h4{font-size:1.03rem;color:var(--blanc-casse);} .encadre p{margin-top:10px;font-size:15.5px;line-height:1.64;color:var(--mute);} .carte-lien{margin-top:22px;padding-top:20px;border-top:1px solid var(--ligne);} .carte-lien a{display:inline-flex;align-items:center;gap:8px;font-size:15.5px;font-weight:600; color:var(--blanc-casse);text-decoration:none;text-underline-offset:4px;} .carte-lien a:hover{text-decoration:underline;} .carte-lien .ic{width:16px;height:16px;} .apres-duo{margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;} .apres-duo p{font-size:15.5px;color:var(--mute-2);} /* ---------- 4 domaines ---------- */ .quatre{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;} .dom{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r-lg);padding:30px 26px; transition:transform .25s ease,border-color .25s ease;} .dom:hover{transform:translateY(-4px);border-color:rgba(163,163,163,.4);} /* DOMAINES — traitement volontairement DIFFÉRENT des cartes : ici aucun picto, c'est un filet vertical doré à gauche qui tient la colonne. Deux sections voisines ne doivent pas se traiter pareil, sinon on retombe sur le motif répété qui fait « gabarit ». */ /* Un court filet doré posé AU-DESSUS du titre, à la place de la tuile à icône. Sur une carte déjà bordée et arrondie, un `border-left` se confond avec le cadre et ne se lit pas — d'où ce filet, indépendant du cadre. */ .dom h3::before{content:"";display:block;width:30px;height:2px; background:var(--gris);margin-bottom:15px;} .dom h3{font-size:1.12rem;color:var(--blanc);} .dom p{margin-top:12px;font-size:15.5px;line-height:1.64;color:var(--mute);} .cas{margin-top:40px;border:1px solid var(--ligne);border-radius:var(--r-lg);background:rgba(26,26,26,.34);} .cas summary{display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;list-style:none; padding:22px;font-family:var(--sans);font-size:16px;font-weight:600;color:var(--blanc-casse);} .cas summary::-webkit-details-marker{display:none;} .cas summary .ic{width:17px;height:17px;transition:transform .25s ease;} .cas[open] summary .ic{transform:rotate(90deg);} .cas-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 36px; padding:8px 32px 4px;border-top:1px solid var(--ligne);padding-top:30px;} .cas-grille h4{font-size:1.02rem;color:var(--blanc-casse);} .cas-grille ul{margin-top:13px;display:flex;flex-direction:column;gap:9px;} .cas-grille li{position:relative;padding-left:18px;font-size:15.5px;line-height:1.6;color:var(--mute);} /* Puces : un filet court, pas une bille. */ .cas-grille li::before{content:"";position:absolute;left:0;top:.82em;width:13px;height:1.5px; border-radius:0;background:var(--gris);} .cas-note{padding:24px 32px 30px;font-size:15px;color:var(--mute-2);} /* ---------- étapes ---------- */ .etapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;} .etapes li{position:relative;} /* ÉTAPES — le rond numéroté devient un grand chiffre de chapitre, souligné d'un filet. Rien ne l'enferme : c'est de la typographie, pas un jeton. */ .num{display:block;width:auto;height:auto;margin-bottom:16px;padding-bottom:10px; border-bottom:1px solid rgba(163,163,163,.34); font-family:var(--serif);font-size:2.5rem;font-weight:700;line-height:1; color:rgba(201,201,201,.85);font-variant-numeric:lining-nums;} .etapes li{padding-right:14px;} .etapes h3{font-size:1.14rem;color:var(--blanc);} .etapes p{margin-top:11px;font-size:15.5px;line-height:1.64;color:var(--mute);} /* ---------- sur mesure ---------- */ .sec-mesure{text-align:center;} .trois-points{margin-top:34px;display:inline-flex;flex-direction:column;gap:13px;text-align:left;} .trois-points li{display:flex;align-items:flex-start;gap:12px;font-size:16.5px;line-height:1.6;color:var(--texte);} .trois-points .ic{width:18px;height:18px;margin-top:.3em;color:var(--gris);stroke-width:2.5;} /* ---------- à propos ---------- */ #apropos{text-align:center;} #apropos .grand-para{text-align:left;} /* ---------- faq ---------- */ .faq{border-top:1px solid var(--ligne);} .faq details{border-bottom:1px solid var(--ligne);} .faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer; list-style:none;padding:22px 2px;font-size:17.5px;font-weight:600;color:var(--texte); font-family:var(--serif);transition:color .2s ease;} .faq summary::-webkit-details-marker{display:none;} .faq summary:hover{color:var(--blanc-casse);} .chev{position:relative;width:16px;height:16px;flex:none;} .chev::before,.chev::after{content:"";position:absolute;top:50%;left:50%;background:var(--gris);border-radius:2px; transform:translate(-50%,-50%);transition:transform .25s ease,opacity .25s ease;} .chev::before{width:14px;height:1.8px;} .chev::after{width:1.8px;height:14px;} .faq details[open] .chev::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;} .faq-corps{padding:0 2px 24px;} .faq-corps p{font-size:16px;line-height:1.72;color:var(--mute);max-width:72ch;} /* ---------- contact ---------- */ .contact-in{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:52px;align-items:start;} .contact-liste{display:flex;flex-direction:column;gap:20px;} .contact-liste li{display:flex;gap:15px;align-items:flex-start;font-size:15.5px;color:var(--mute);} /* CONTACT — le picto sort de sa tuile et se cale sur la première ligne, comme un signe de ponctuation. */ .ic-ligne{width:17px;height:17px;flex:none;margin-top:.24em;color:var(--gris);stroke-width:1.9;} .c-lbl{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blanc-casse);margin-bottom:3px;} .contact-liste a{color:var(--texte);text-underline-offset:3px;} .contact-encadre{margin-top:34px;padding:26px 28px;border-radius:var(--r-lg); background:rgba(19,19,19,.56);border:1px solid var(--ligne);} .contact-encadre h3{font-size:1.12rem;color:var(--blanc);} .contact-encadre ul{margin-top:18px;display:flex;flex-direction:column;gap:11px;} .contact-encadre li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.58;color:var(--mute);} .contact-encadre .ic{width:16px;height:16px;margin-top:.3em;color:var(--gris);stroke-width:2.5;} .contact-note{margin-top:20px;padding-top:18px;border-top:1px solid var(--ligne); font-size:14px;line-height:1.58;color:var(--mute-2);font-style:italic;} .contact-form{background:rgba(19,19,19,.62);border:1px solid var(--ligne);border-radius:var(--r-lg);padding:32px 30px;} .form-intro{font-size:14.5px;line-height:1.62;color:var(--mute);margin-bottom:24px;} .form-intro strong{color:var(--texte);} .f-row{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;} .f-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;} .f-row label{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);} .req{color:var(--blanc-casse);} .f-row input,.f-row select,.f-row textarea{ width:100%;font-family:var(--sans);font-size:16px;color:var(--texte); background:rgba(16,16,16,.66);border:1px solid rgba(198,198,198,.22);border-radius:3px; padding:13px 15px;transition:border-color .2s ease,background .2s ease; } .f-row textarea{resize:vertical;min-height:104px;line-height:1.55;} .f-row select{appearance:none;-webkit-appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--gris) 50%),linear-gradient(135deg,var(--gris) 50%,transparent 50%); background-position:calc(100% - 21px) calc(1.28em),calc(100% - 15px) calc(1.28em); background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px;} .f-row select option{background:#17171A;color:#F4F4F5;} .f-row input::placeholder,.f-row textarea::placeholder{color:rgba(205,205,205,.55);} .f-row input:focus,.f-row select:focus,.f-row textarea:focus{border-color:var(--gris);background:rgba(16,16,16,.86);} .f-row input[aria-invalid="true"],.f-row textarea[aria-invalid="true"]{border-color:#A6A6A6;} .form-err{margin-bottom:16px;font-size:14.5px;color:#C7C7C7;} .form-fine{margin-top:16px;font-size:13px;line-height:1.55;color:var(--mute-2);text-align:center;} .contact-form .btn{margin-top:6px;} /* ---------- cta final ---------- */ .sec-final{text-align:center;padding:144px 0;} .sec-final h2{max-width:22ch;margin-inline:auto;} .sec-final .sec-lead{margin-inline:auto;max-width:52ch;} .sec-final .btn{margin-top:34px;} /* ============================================================ FOND DU SITE — « TRACÉS EN ÉCOULEMENT » 72 courbes (2 jeux miroir de 36) en SVG, animées en CSS pur. L'original React animait pathLength/pathOffset ; ici c'est stroke-dashoffset, et l'attribut pathLength="1" sur chaque tracé normalise sa longueur — un même stroke-dasharray donne donc la même proportion de trait sur toutes les courbes, quelles que soient leurs longueurs réelles. Couche FIXE plein écran : elle ne défile pas avec le contenu, ne peut donc ni allonger la page ni créer de barre horizontale. ============================================================ */ .bg-flux{overflow:hidden; /* fondu vers les bords : les tracés se perdent dans le marine au lieu d'être tranchés net par le bord de la fenêtre */ -webkit-mask-image:radial-gradient(125% 135% at 50% 45%,#000 38%,transparent 92%); mask-image:radial-gradient(125% 135% at 50% 45%,#000 38%,transparent 92%);} .flux-svg{width:100%;height:100%;display:block;} .flux-jeu-miroir{transform:scaleY(-1);transform-origin:50% 50%;} .bg-flux path{ fill:none;stroke-linecap:round; stroke-dasharray:.34 .66; animation:flux-ecoulement var(--fd,24s) linear infinite; animation-delay:var(--fr,0s); will-change:stroke-dashoffset;} @keyframes flux-ecoulement{ from{stroke-dashoffset:1;} to {stroke-dashoffset:0;} } /* Onglet caché : on arrête les 72 animations (script.js). */ .bg-flux.est-en-pause path{animation-play-state:paused;} /* Repli : tracés STATIQUES et COMPLETS. Le trait plein est aussi le cas le plus « encrant » du cycle — c'est donc l'état à mesurer pour le contraste. Rien de pire ne peut apparaître pendant l'animation. */ @media (prefers-reduced-motion:reduce){ .bg-flux path{animation:none;stroke-dasharray:none;will-change:auto;} } /* Sur mobile on ne garde qu'une courbe sur deux : même densité perçue, moitié moins de tracés à repeindre sur les appareils modestes. */ @media (max-width:700px){ .bg-flux path:nth-child(even){display:none;} .sec-final{padding:76px 0;} } /* ---------- pied de page ---------- */ .site-footer{background:rgba(13,13,13,.9);border-top:1px solid var(--ligne);padding-top:64px;} .footer-in{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:48px;padding-bottom:48px;} .f-brand img{width:172px;height:auto;} .f-tag{margin-top:18px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-2);} .f-tag span{color:var(--gris);margin-inline:.25em;} .f-coord{margin-top:12px;font-size:15px;color:var(--mute);} .f-coord a{color:var(--mute);text-underline-offset:3px;} .f-coord a:hover{color:var(--blanc-casse);} .site-footer h2{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--blanc-casse);margin-bottom:18px;} .f-nav{display:flex;flex-direction:column;gap:11px;align-items:flex-start;} .f-nav a{font-size:15px;color:var(--mute);text-decoration:none;transition:color .2s ease;} .f-nav a:hover{color:var(--blanc-casse);} .footer-bot{padding-block:22px;border-top:1px solid var(--ligne);} .footer-bot p{font-size:13px;color:var(--mute-2);} /* ---------- page légale ---------- */ /* PAGES LÉGALES `.page-legale` est posée sur le MÊME élément que `.wrap`, qui fournit la gouttière latérale du site (`padding-inline`). Utiliser ici le raccourci `padding` remettait donc padding-left/right à ZÉRO : le texte se collait aux bords. Invisible au-dessus de ~880 px, parce que le `max-width` de `.wrap-etroit` tient le texte à distance — mais collé net dès le mobile. D'où `padding-top` / `padding-bottom` seuls : on ne touche jamais aux côtés. */ .page-legale{padding-top:76px;padding-bottom:96px;} .page-legale h1{font-size:clamp(1.9rem,3.4vw,2.5rem);color:var(--blanc-casse);} .page-legale .maj{margin-top:12px;font-size:14px;color:var(--mute-2);} .page-legale h2{font-size:1.22rem;margin-top:40px;} .page-legale p{margin-top:14px;font-size:16.5px;line-height:1.74;color:var(--mute);} .page-legale ul{margin-top:14px;display:flex;flex-direction:column;gap:10px;} .page-legale li{position:relative;padding-left:18px;font-size:16.5px;line-height:1.7;color:var(--mute);} /* Pages légales : un tiret cadratin, traitement encore différent. */ .page-legale li::before{content:"—";position:absolute;left:0;top:0;width:auto;height:auto; border-radius:0;background:none;color:rgba(163,163,163,.85);font-size:15px;line-height:1.75;} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1180px){ /* La capsule se resserre avant de céder la place au hamburger. */ .nav-desk{gap:20px;} .nav-desk a{font-size:10px;letter-spacing:.13em;} .header-in{gap:14px;} .brand-marque{height:46px;} } @media (max-width:1080px){ /* Sous ce seuil, logo + capsule + bascule + bouton ne tiennent plus sur une ligne : la capsule débordait de 24 à 183 px. On passe au hamburger ICI, et non à 920 px comme avant — la capsule est plus large que les anciens liens nus, le point de bascule devait remonter avec elle. Le reste de la mise en page garde ses propres seuils, plus bas. */ html{scroll-padding-top:80px;} .nav-desk,.hdr-cta{display:none;} .burger{display:flex;} .menu-mobile.open{display:flex;} .langues{margin-left:auto;} .quatre{grid-template-columns:repeat(2,minmax(0,1fr));} .etapes{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 26px;} } @media (max-width:920px){ html{scroll-padding-top:76px;} .nav-desk,.hdr-cta{display:none;} .burger{display:flex;} .menu-mobile.open{display:flex;} .header-in{min-height:66px;} .hero{padding:76px 0 72px;} .duo,.contact-in,.cas-grille{grid-template-columns:minmax(0,1fr);} .contact-in{gap:40px;} .sec{padding:72px 0;} .sec-final{padding:80px 0;} .footer-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;} .f-brand{grid-column:1 / -1;} } @media (max-width:600px){ body{font-size:16px;} .wrap{padding-inline:20px;} .hero{padding:56px 0 60px;} .hero h1{font-size:clamp(1.7rem,7vw,2.1rem);max-width:none;} .hero-lead{font-size:17px;} .hero-cta{flex-direction:column;align-items:stretch;width:100%;} .hero-cta .btn{width:100%;} .hero-tag{font-size:11px;letter-spacing:.16em;margin-top:34px;} .sec{padding:58px 0;} .sec-final{padding:64px 0;} .sec-tete{margin-bottom:36px;} .sec-lead,.grand-para{font-size:16.5px;} .quatre{grid-template-columns:minmax(0,1fr);gap:18px;} .etapes{grid-template-columns:minmax(0,1fr);gap:28px;} .carte{padding:26px 22px;} .dom{padding:26px 22px;} .carte-tete{gap:14px;} .cas-grille{padding:26px 22px 4px;gap:26px;} .cas-note{padding:20px 22px 26px;} .cas summary{padding:18px;font-size:15.5px;} .f-grid{grid-template-columns:minmax(0,1fr);gap:0;} .contact-form{padding:26px 22px;} .contact-encadre{padding:24px 22px;} .faq summary{font-size:16.5px;padding:19px 2px;} .faq-corps p{font-size:15.5px;} .footer-in{grid-template-columns:minmax(0,1fr);gap:32px;} .trois-points{display:flex;} .page-legale{padding-top:56px;padding-bottom:72px;} } @media (max-width:380px){ .brand img{width:38px;} } /* ---------- accessibilité mouvement ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important; } .dom:hover,.btn:hover{transform:none;} } /* ---------- impression ---------- */ @media print{ .site-header,.burger,.menu-mobile,.bg-static,.bg-flux,.bg-voile{display:none !important;} body{background:#fff;color:#000;} .sec,.hero{padding:24px 0;background:#fff;color:#000;} h2,.hero h1{color:#000;} } /* ============================================================ MULTI-PAGES ============================================================ */ /* ---------- fil d'Ariane ---------- */ .fil{margin-bottom:26px;} .fil ol{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;} .fil li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--mute-2);} .fil li + li::before{content:"/";color:rgba(163,163,163,.6);} .fil a{color:var(--mute-2);text-decoration:none;text-underline-offset:3px;} .fil a:hover{color:var(--blanc-casse);text-decoration:underline;} .fil [aria-current]{color:var(--texte);} /* ---------- héro de page intérieure ---------- */ .hero-page{padding:64px 0 72px;} .hero-page h1{font-size:clamp(1.8rem,2.9vw,2.5rem);max-width:20ch;} .hero-page .hero-lead{margin-top:18px;font-size:15.5px;max-width:52ch;} /* ---------- carrousel de titres (accueil) ---------- */ .hero-accueil{padding:104px 0 96px;} .carrousel{position:relative;width:100%;display:grid;margin:0;} .cr-titre{grid-area:1 / 1;display:block;opacity:0;visibility:hidden; transition:opacity .55s ease;justify-self:center;max-width:16ch;text-wrap:balance;} @media (max-width:600px){ .cr-titre{max-width:none;} } .cr-titre.est-visible{opacity:1;visibility:visible;} /* ---------- cartes produits ---------- */ /* GRILLE DES SERVICES — six colonnes, pour pouvoir composer 2 ou 3 cartes par rangée sans jamais laisser de case vide. Par défaut chaque carte occupe 3 colonnes (= deux par rangée). Quand il y en a EXACTEMENT CINQ, on passe à 3 + 2 : trois cartes de 2 colonnes en haut, deux de 3 colonnes en bas. Les deux rangées sont pleines, la composition est volontaire — et non plus une orpheline à côté du vide. Le sélecteur `:first-child:nth-last-child(5)` est une « requête de quantité » : la règle ne s'applique QUE s'il y a cinq cartes. Avec quatre ou six, on retombe tout seul sur deux colonnes, sans rien à modifier. */ .prod-grille{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;} .prod-grille > .prod{grid-column:span 3;} .prod-grille > .prod:first-child:nth-last-child(5), .prod-grille > .prod:first-child:nth-last-child(5) ~ .prod{grid-column:span 2;} .prod-grille > .prod:first-child:nth-last-child(5) ~ .prod:nth-child(n+4){grid-column:span 3;} .prod-grille-2{gap:26px;} .prod{display:flex;flex-direction:column;text-decoration:none;background:var(--carte); border:1px solid var(--ligne);border-radius:var(--r-lg);padding:32px 30px; transition:transform .25s ease,border-color .25s ease,background .25s ease;} .prod:hover{transform:translateY(-4px);border-color:rgba(163,163,163,.5);background:rgba(255,255,255,.07);} .prod-tete{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px;} .prod-titre{display:flex;flex-direction:column;gap:9px;align-items:flex-start;} .prod-titre h2,.prod-titre h3{font-size:1.36rem;color:var(--blanc);} .prod-txt{font-size:16px;line-height:1.66;color:var(--mute);} .prod-points{display:flex;flex-direction:column;gap:9px;margin-top:20px;flex:1 1 auto;} .prod-points span{position:relative;padding-left:19px;font-size:15px;line-height:1.55;color:var(--mute-2);} /* Puces des cartes produits : un petit losange. Encore un autre signe que celui des listes par département et que celui des cas d'usage. */ .prod-points span::before{content:"";position:absolute;left:1px;top:.62em;width:5px;height:5px; border-radius:0;transform:rotate(45deg);background:var(--gris);} .prod-go{display:inline-flex;align-items:center;gap:8px;margin-top:24px;padding-top:20px; border-top:1px solid var(--ligne);font-size:15px;font-weight:600;color:var(--blanc-casse);} .prod-go .ic{width:16px;height:16px;transition:transform .25s ease;} .prod:hover .prod-go .ic{transform:translateX(4px);} /* ---------- listes par département ---------- */ .dom-liste{margin-top:14px;display:flex;flex-direction:column;gap:9px;} .dom-liste li{position:relative;padding-left:17px;font-size:14.8px;line-height:1.56;color:var(--mute);} /* Listes par département : un petit trait vertical, en écho au filet qui tient la carte. Ni bille, ni losange. */ .dom-liste li::before{content:"";position:absolute;left:0;top:.42em;width:2px;height:11px; border-radius:0;background:rgba(163,163,163,.75);} /* ---------- divers ---------- */ .trois{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;} .etapes-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 26px;} .encadre-large{padding:30px 32px;} .encadre-large h2{font-size:1.3rem;color:var(--blanc-casse);} .encadre-large p{margin-top:14px;font-size:17px;} .lien-or{color:var(--blanc-casse);text-decoration:underline;text-underline-offset:3px;} .lien-or:hover{color:var(--blanc);} .apres-para{margin-top:26px;} .apres-para .lien-or{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;} .apres-para .lien-or:hover{text-decoration:underline;} .apres-para .ic{width:16px;height:16px;} .carte h2{font-size:1.42rem;color:var(--blanc);} .encadre h3{font-size:1.03rem;color:var(--blanc-casse);} .contact-encadre h2{font-size:1.12rem;color:var(--blanc);} @media (max-width:1080px){ .trois{grid-template-columns:repeat(2,minmax(0,1fr));} /* Trois de front deviennent trop étroites : on repasse à deux par rangée, et la dernière s'étire sur toute la largeur pour combler la rangée. Les sélecteurs reprennent la même quantité de classes et de pseudo-classes que la règle 3+2 ci-dessus et sont déclarés APRÈS : sinon celle-ci, plus spécifique, l'emporterait et la case vide réapparaîtrait entre 921 et 1080 px — c'est exactement ce qui s'est produit au premier essai. */ .prod-grille > .prod, .prod-grille > .prod:first-child:nth-last-child(5), .prod-grille > .prod:first-child:nth-last-child(5) ~ .prod, .prod-grille > .prod:first-child:nth-last-child(5) ~ .prod:nth-child(n+4){grid-column:span 3;} .prod-grille > .prod:last-child:nth-child(odd), .prod-grille > .prod:first-child:nth-last-child(5) ~ .prod:last-child{grid-column:1 / -1;} } @media (max-width:920px){ .prod-grille,.prod-grille-2,.trois,.etapes-2{grid-template-columns:minmax(0,1fr);} /* Une seule colonne : toute portée résiduelle créerait des colonnes implicites, donc un débordement horizontal. On remet tout à plat. */ .prod-grille > .prod{grid-column:auto !important;} .hero-accueil{padding:72px 0 68px;} .hero-page{padding:48px 0 56px;} } @media (max-width:600px){ .prod{padding:26px 22px;} .hero-accueil{padding:54px 0 56px;} .hero-page{padding:38px 0 46px;} .hero-page h1{font-size:clamp(1.85rem,7.6vw,2.3rem);max-width:none;} .fil li{font-size:12.5px;} .encadre-large{padding:24px 22px;} .cr-points{margin-top:28px;} } /* ---------- note de bas de page légale ---------- */ .note-legale{margin-top:44px;padding:20px 22px;border-radius:var(--r); background:rgba(19,19,19,.5);border:1px solid var(--ligne); font-size:14px;line-height:1.62;color:var(--mute-2);} .note-legale a{color:var(--blanc-casse);text-underline-offset:3px;} .page-legale h2:first-of-type{margin-top:28px;} /* ============================================================ PAGES DE TEST — variantes de héro (test-hero-*.html) Rien ici ne s'applique aux pages du site principal. ============================================================ */ .bandeau-test{background:rgba(163,163,163,.14);border-bottom:1px solid rgba(163,163,163,.34); padding:11px 0;font-size:13.5px;color:var(--mute);text-align:center;} .bandeau-test strong{color:var(--blanc-casse);} .bandeau-test a{color:var(--texte);text-underline-offset:3px;} .bandeau-test a:hover{color:var(--blanc-casse);} /* ---------- héro en deux colonnes (tests 1 et 2) ---------- */ .hero-split{padding:76px 0 88px;text-align:left;} .split-in{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:56px;align-items:center;} .split-txt{display:flex;flex-direction:column;align-items:flex-start;} .hero-split h1{font-size:clamp(1.95rem,3.5vw,3.05rem);max-width:16ch;text-align:left;} .hero-split .hero-lead{margin-top:24px;text-align:left;max-width:46ch;} .hero-cta-gauche{justify-content:flex-start;} .hero-split .hero-tag{margin-top:36px;} .split-visuel{position:relative;width:100%;aspect-ratio:1/1;max-height:560px;} #visuel-filaire,.atome{position:absolute;inset:0;width:100%;height:100%;display:block;} /* cartes de stats flottantes */ .stats-flottantes{position:absolute;inset:0;pointer-events:none;} .stat{position:absolute;display:flex;flex-direction:column;gap:3px; padding:13px 17px;border-radius:3px; background:rgba(19,19,19,.82);border:1px solid rgba(163,163,163,.34); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); box-shadow:0 12px 30px rgba(10,10,10,.42);max-width:16rem;} .stat-h{font-family:var(--serif);font-size:1.02rem;font-weight:600;color:var(--blanc-casse);} .stat-b{font-size:12.5px;line-height:1.4;color:var(--mute);} .stat-1{top:8%;left:-4%;} .stat-2{bottom:19%;right:-5%;} .stat-3{bottom:2%;left:6%;} /* ---------- atome (test 2) ---------- */ .atome{cursor:default;} .atome canvas{display:block;width:100%;height:100%;} .atome-info{position:absolute;transform:translate(-50%,-190%);pointer-events:none; padding:7px 13px;border-radius:3px;white-space:nowrap; background:rgba(19,19,19,.92);border:1px solid rgba(163,163,163,.5); font-size:13px;font-weight:600;color:var(--blanc-casse);z-index:3;} /* [hidden] doit gagner sur display:flex — sinon le repli couvre l'atome et intercepte les clics sur les nœuds. */ .atome-repli[hidden]{display:none !important;} .atome-repli{position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:14px;text-align:center; border:1px solid var(--ligne);border-radius:var(--r-lg);background:rgba(19,19,19,.5);padding:28px;} .atome-repli p{font-size:15px;color:var(--mute);} .atome-repli ul{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;} .atome-repli a{display:inline-block;padding:9px 16px;border-radius:3px; border:1px solid rgba(163,163,163,.42);font-size:14px;font-weight:600; color:var(--blanc-casse);text-decoration:none;} .atome-repli a:hover{background:rgba(163,163,163,.14);} /* ---------- héro épuré (test 3) ---------- */ .hero-clean{position:relative;padding:104px 0 100px;text-align:left;overflow:hidden; background:linear-gradient(180deg,rgba(10,10,10,.72) 0%,rgba(10,10,10,.5) 55%,rgba(10,10,10,.76) 100%);} .onde{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;} /* ============================================================ ARC LUMINEUX DU HÉRO D'ACCUEIL Un « lever de soleil » marine → or en haut du héro. Tout en CSS, sur un seul élément : aucune dépendance, donc rien à replier si WebGL manque — l'arc EST toujours là, y compris quand le fond animé et l'atome ne se chargent pas. Deux couches de dégradé dans le même élément : 1. le LISERÉ — bornes très rapprochées sur une ellipse, ce qui dessine une ligne courbe nette ; 2. le HALO — la même ellipse, en diffus, qui éclaire le haut. L'élément est en z-index 0 et .mix-in passe devant : le texte n'est jamais posé sur le point le plus lumineux. La luminance est bornée volontairement bas (liseré à .5 d'opacité) — au-delà, le titre et le chapô tombent sous le AA sur le fond déjà clair du dégradé. ============================================================ */ /* HALO DU HERO - remplace l'arc courbe. Une source lumineuse unique, basse et centree, qui monte derriere le texte. Trois couches concentriques : un coeur dense, une diffusion large, et un voile tres bas qui empeche la coupure nette en bas de section. Rien que du gris : la hierarchie se fait par la valeur, jamais par la teinte. */ .hero-arc{ position:absolute;left:50%;bottom:-46%;z-index:0; width:min(1700px,160%);aspect-ratio:1.5; transform:translateX(-50%); pointer-events:none; background: /* 1. LE COEUR - concentre, c'est lui qui donne la source. */ radial-gradient(ellipse 40% 44% at 50% 62%, rgba(255,255,255,.26) 0%, rgba(230,229,226,.15) 25%, rgba(198,196,192,.065) 47%, transparent 70%), /* 2. LA DIFFUSION - la nappe large qui remonte derriere le titre. Volontai- rement faible : c'est elle qui passe sous le texte, la renforcer ferait tomber le contraste sous le AA. */ radial-gradient(ellipse 78% 70% at 50% 72%, rgba(198,196,192,.075) 0%, rgba(124,124,130,.04) 44%, transparent 76%); } @keyframes arc-souffle{ 0%,100%{opacity:.86;} 50% {opacity:1;} } .hero-arc{animation:arc-souffle 13s ease-in-out infinite;} @media (prefers-reduced-motion:reduce){ .hero-arc{animation:none;opacity:1;} } /* Sur mobile l'arc est resserré : plein cadre il déborderait du héro et son liseré passerait derrière le titre. */ @media (max-width:900px){ .hero-arc{top:46px;width:420%;} } @media (max-width:600px){ .hero-arc{top:34px;width:520%;} } .clean-in{position:relative;display:flex;flex-direction:column;align-items:flex-start;max-width:920px;} .hero-clean h1{font-size:clamp(1.85rem,2.9vw,2.55rem);max-width:19ch;text-align:left;} .hero-clean .hero-lead{margin-top:24px;text-align:left;max-width:50ch;} .hero-clean .btn-ghost{background:transparent;} .rangee-outils{margin-top:64px;padding-top:26px;border-top:1px solid var(--ligne);width:100%;} .rangee-titre{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--mute-2);margin-bottom:18px;} .rangee-outils ul{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;} .rangee-outils li{font-family:var(--serif);font-size:1.16rem;font-weight:600;color:var(--mute-2); opacity:.72;transition:opacity .25s ease,color .25s ease;} .rangee-outils li:hover{opacity:1;color:var(--texte);} @media (max-width:980px){ .split-in{grid-template-columns:minmax(0,1fr);gap:44px;} .split-visuel{max-width:520px;margin-inline:auto;max-height:none;} .stat-1{left:0;} .stat-2{right:0;} } @media (max-width:600px){ .hero-split{padding:44px 0 56px;} .hero-clean{padding:56px 0 64px;} .hero-split h1,.hero-clean h1{max-width:none;} .hero-cta-gauche{width:100%;} .split-visuel{max-width:none;} /* sur petit écran, le visuel garde sa hauteur et les cartes passent dessous */ .split-visuel{aspect-ratio:auto;} #visuel-filaire,.atome{position:relative;inset:auto;height:min(80vw,340px);} .stats-flottantes{position:static;display:flex;flex-direction:column;gap:10px; margin-top:18px;pointer-events:auto;} .stat{position:static;max-width:none;} .rangee-outils{margin-top:44px;} .rangee-outils ul{gap:12px 24px;} .rangee-outils li{font-size:1rem;} .bandeau-test{font-size:12.5px;line-height:1.7;} } /* ---------- variante 4 : épuré + atome ---------- */ .hero-mix{padding:76px 0 72px;} .mix-in{position:relative;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:48px;align-items:center;} .mix-txt{display:flex;flex-direction:column;align-items:flex-start;} .hero-mix h1{font-size:clamp(2.1rem,4.5vw,3.5rem);max-width:16ch;text-align:left;} .hero-mix .hero-lead{margin-top:22px;text-align:left;max-width:46ch;} /* Le cadre doit etre plus grand que l'atome lui-meme : le halo d'un electron selectionne deborde largement de son orbite, et un canevas trop juste le tranche net. */ .mix-visuel{position:relative;width:100%;aspect-ratio:1/1;max-height:680px;} .hero-mix .rangee-outils{position:relative;margin-top:52px;} /* l'infobulle du nœud survolé : lisible, pas décorative */ .hero-mix .atome-info{padding:8px 15px;font-size:13.5px;letter-spacing:.02em; background:rgba(14,14,14,.94);border-color:rgba(201,201,201,.7); box-shadow:0 10px 26px rgba(10,10,10,.55);} /* petit repère visuel quand un nœud est visé */ .hero-mix .atome[data-survol="oui"]{cursor:pointer;} @media (max-width:980px){ .mix-in{grid-template-columns:minmax(0,1fr);gap:36px;} .mix-visuel{max-width:460px;margin-inline:auto;max-height:none;} } @media (max-width:600px){ .hero-mix{padding:46px 0 52px;} .hero-mix h1{max-width:none;} .mix-visuel{max-width:none;aspect-ratio:auto;} .hero-mix .atome{position:relative;inset:auto;height:min(82vw,330px);} .hero-mix .rangee-outils{margin-top:38px;} } /* ---------- héro d'accueil : mise en page « épuré + atome » ---------- */ .hero-accueil.hero-mix{padding:84px 0 76px;} .hero-accueil.hero-mix h1{max-width:15ch;} .hero-tag-gauche{margin-top:52px;padding-top:26px;border-top:1px solid var(--ligne);} /* l'onde du héros d'accueil porte l'id hero-onde */ #hero-onde{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;} @media (max-width:980px){ .hero-accueil.hero-mix{padding:60px 0 60px;} } @media (max-width:600px){ .hero-accueil.hero-mix{padding:44px 0 48px;} .hero-tag-gauche{margin-top:36px;padding-top:20px;} } /* ---------- bascule de langue FR | EN ---------- */ .langues{display:inline-flex;align-items:center;gap:2px;flex:none; border:1px solid var(--ligne);border-radius:999px;padding:3px; background:rgba(19,19,19,.5);} .langues a,.langues .lg-actif{display:inline-flex;align-items:center;justify-content:center; min-width:34px;padding:5px 9px;border-radius:999px; font-size:12.5px;font-weight:700;letter-spacing:.06em;text-decoration:none;line-height:1;} .langues a{color:var(--mute);transition:color .2s ease,background .2s ease;} .langues a:hover{color:var(--blanc);background:rgba(198,198,198,.12);} .langues .lg-actif{background:var(--gris);color:#1A1A1A;} @media (max-width:920px){ .langues{margin-left:auto;} } @media (max-width:380px){ .langues a,.langues .lg-actif{min-width:30px;padding:5px 7px;font-size:11.5px;} } /* ---------- libellés permanents des électrons ---------- */ .atome-etiquettes{position:absolute;inset:0;pointer-events:none;z-index:4;} .atome-et{position:absolute;top:0;left:0;white-space:nowrap;pointer-events:auto; padding:5px 11px;border-radius:3px;text-decoration:none; font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.01em;line-height:1.15; color:var(--blanc-casse); /* Fond OPAQUE, pas translucide. À .92 les 8 % restants laissaient passer le halo doré de l'électron placé juste derrière, et ces libellés de 12,5 px tombaient jusqu'à 1,5:1 — très loin du AA. L'opacité totale est la seule façon de borner ce qui apparaît derrière les glyphes, puisque le libellé est posé sur un canvas dont le contenu bouge en permanence. */ background:#0E0E0E; border:1px solid rgba(163,163,163,.42); box-shadow:0 6px 18px rgba(10,10,10,.5); transition:opacity .18s ease,color .18s ease,border-color .18s ease,background .18s ease;} .atome-et:hover,.atome-et:focus-visible{color:var(--blanc);background:rgba(14,14,14,.98); border-color:rgba(201,201,201,.85);} .atome-et.est-cache{visibility:hidden;pointer-events:none;} .atome-et.est-vise{color:#1A1A1A;background:var(--blanc-casse);border-color:var(--blanc-casse);} @media (max-width:980px){ .atome-et{font-size:11.5px;padding:4px 9px;} } @media (max-width:600px){ .atome-et{font-size:10.5px;padding:3px 8px;letter-spacing:0;} } /* ============================================================ CALENDRIER DE RENDEZ-VOUS Contours carrés, marine et or, aucune forme ronde. Les cases sont des