/* =================================================================== AFRINOVA — Feuille de style Couleurs issues du logo : bleu marine + orange =================================================================== */ /* ---------- Jetons de couleur ---------- Deux familles à ne pas confondre : • les couleurs de MARQUE (--navy, --orange…) sont les mêmes dans les deux thèmes. Elles servent d'aplats : bandeau défilant, pied de page, encarts de statistiques. Un aplat marine reste lisible sur fond sombre, il n'a donc aucune raison de changer. • les jetons de THÈME (fonds, textes, filets) sont redéfinis plus bas dans [data-theme="dark"]. Le piège est --navy, qui servait aux deux : couleur de titre ET fond d'aplat. En sombre, un titre marine sur fond noir devient illisible alors que l'aplat, lui, doit rester marine. Les usages « texte » sont donc passés à --titre, qui bascule ; les aplats gardent --navy. */ :root{ color-scheme:light; /* Marque — identiques dans les deux thèmes */ --navy:#1B2A63; --navy-deep:#121E47; --navy-soft:#243375; --orange:#F47920; --orange-soft:#ff9244; /* Thème clair */ --ink:#16203f; /* texte courant */ --titre:#1B2A63; /* titres et libellés forts */ --muted:#5b647d; --bg:#ffffff; /* fond de page */ --bg-alt:#f5f7fc; /* sections alternées */ --carte:#ffffff; /* cartes, formulaires, menu déroulant */ --carte-douce:#fbfcff; /* champs de saisie, haut du dégradé du hero */ --entete:rgba(255,255,255,.85); --line:#e6eaf4; --white:#ffffff; --pouce:#c3ccdf; /* barre de défilement */ --voile:rgba(255,255,255,.92); /* pastilles et badges translucides */ --puce:rgba(27,42,99,.07); /* petites étiquettes de fond */ --halo-chaud:rgba(244,121,32,.12);/* auréoles du fond de hero */ --halo-froid:rgba(27,42,99,.10); --pt:rgba(27,42,99,.26); /* trame de la carte d'Afrique */ --pt-accent:rgba(244,121,32,.55); /* Couleur du pôle affiché, dérivée de --svc que service.js pose sur . Voir la note « Couleurs de pôle » plus bas. */ --svc-lisible:var(--svc,var(--titre)); --svc-marque:var(--svc,var(--orange)); --shadow:0 18px 50px -20px rgba(27,42,99,.28); --shadow-sm:0 8px 24px -12px rgba(27,42,99,.25); --radius:18px; --radius-sm:12px; --max:1180px; --ease:cubic-bezier(.22,.61,.36,1); } /* ---------- Thème sombre ---------- Le fond est volontairement plus noir que le marine de la marque (#0a0f1e contre #1B2A63) : sans cet écart, bandeau défilant, pied de page et encarts se fondraient dans la page et le rythme visuel disparaîtrait. color-scheme prévient le navigateur : listes déroulantes, curseurs et barres de défilement natives suivent alors le thème d'eux-mêmes. Les ombres passent au noir — une ombre bleutée ne se voit pas sur fond sombre — et gagnent en opacité pour continuer à détacher les cartes. */ [data-theme="dark"]{ color-scheme:dark; --ink:#dfe6f5; --titre:#eef2fc; --muted:#93a0bf; --bg:#0a0f1e; --bg-alt:#0f1730; --carte:#131d38; --carte-douce:#0e1630; --entete:rgba(10,15,30,.85); --line:#243154; --pouce:#2b3757; --voile:rgba(19,29,56,.92); --puce:rgba(255,255,255,.08); --halo-chaud:rgba(244,121,32,.16); --halo-froid:rgba(94,124,214,.13); --pt:rgba(190,205,240,.30); --pt-accent:rgba(244,121,32,.72); --shadow:0 18px 50px -20px rgba(0,0,0,.75); --shadow-sm:0 8px 24px -12px rgba(0,0,0,.65); --svc-lisible:color-mix(in srgb,var(--svc,var(--titre)) 42%,#eaf0ff); --svc-marque:color-mix(in srgb,var(--svc,var(--orange)) 55%,#eaf0ff); } /* ---------- Couleurs de pôle ---------- --c (cartes de service) et --svc (page d'un pôle) sont posés en ligne dans le HTML, ou par service.js sur : des teintes soutenues, choisies pour un fond clair. Sur une carte sombre, le marine du pôle BTP tombe à un rapport de contraste de 1,3 — le texte disparaît. Plutôt que de tenir une seconde liste de couleurs en double, on éclaircit celle qui arrive : color-mix la ramène vers le blanc juste assez pour repasser le seuil de lisibilité, en gardant la teinte qui identifie le pôle. Toute couleur ajoutée plus tard en bénéficie sans rien à déclarer. Les APLATS (vignette de réalisation, bandeau du hero de pôle, pastille de puce) gardent --c/--svc bruts : le texte y est blanc, ils doivent donc rester foncés. */ .service-card{ --accent:var(--c,var(--titre)); /* usages « texte » : icône, intitulé, lien */ --marque:var(--c,var(--orange)); /* filets et puces décoratifs */ } [data-theme="dark"] .service-card{ --accent:color-mix(in srgb,var(--c,var(--titre)) 42%,#eaf0ff); --marque:color-mix(in srgb,var(--c,var(--orange)) 55%,#eaf0ff); } /* ---------- Barres de défilement ---------- Firefox utilise scrollbar-width/-color ; les navigateurs WebKit (Chrome, Edge, Safari) utilisent les pseudo-éléments ci-dessous. La bordure transparente + background-clip donnent un pouce affiné avec de l'air autour, sans réduire la zone cliquable. */ html{scrollbar-width:thin;scrollbar-color:var(--pouce) transparent} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background-color:transparent} ::-webkit-scrollbar-thumb{ background-color:var(--pouce); border:3px solid transparent; background-clip:content-box; border-radius:999px; } ::-webkit-scrollbar-thumb:hover{background-color:var(--navy-soft)} ::-webkit-scrollbar-thumb:active{background-color:var(--navy)} ::-webkit-scrollbar-corner{background-color:transparent} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; color:var(--ink); background:var(--bg); line-height:1.65; -webkit-font-smoothing:antialiased; /* « clip » plutôt que « hidden » : même effet visuel, mais sans créer de conteneur de défilement — sinon position:sticky cesse de fonctionner pour ses descendants (barre de filtres de la page Location). */ overflow-x:hidden; overflow-x:clip; } h1,h2,h3,h4{font-family:'Poppins',sans-serif;line-height:1.15;color:var(--titre)} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} ul{list-style:none} .container{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px} .accent{color:var(--orange)} .grad{ background:linear-gradient(100deg,var(--orange),var(--orange-soft)); -webkit-background-clip:text;background-clip:text;color:transparent; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; font-family:'Poppins',sans-serif;font-weight:600;font-size:.95rem; padding:.85rem 1.6rem;border-radius:999px;cursor:pointer;border:2px solid transparent; transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s; } .btn:active{transform:translateY(1px)} .btn-primary{background:var(--orange);color:#fff;box-shadow:0 12px 26px -10px rgba(244,121,32,.7)} .btn-primary:hover{background:#e96c12;transform:translateY(-3px);box-shadow:0 18px 34px -10px rgba(244,121,32,.75)} .btn-ghost{background:transparent;color:var(--titre);border-color:var(--line)} .btn-ghost:hover{border-color:var(--titre);transform:translateY(-3px)} .btn-light{background:#fff;color:var(--navy)} .btn-light:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)} .btn-sm{padding:.6rem 1.1rem;font-size:.88rem} .btn-block{width:100%} .kicker{ display:inline-block;font-family:'Poppins',sans-serif;font-weight:600; font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange); margin-bottom:.7rem; } /* ---------- Header ---------- */ .site-header{ position:sticky;top:0;z-index:50;background:var(--entete); backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.3s var(--ease); } .site-header.scrolled{border-color:var(--line);box-shadow:0 6px 24px -16px rgba(27,42,99,.4)} .nav-wrap{display:flex;align-items:center;justify-content:space-between;height:76px} .brand{display:flex;align-items:center;gap:.6rem} .brand-logo{width:42px;height:42px;border-radius:10px;object-fit:cover} .brand-name{font-family:'Poppins',sans-serif;font-weight:800;font-size:1.3rem;letter-spacing:.02em;color:var(--titre)} /* margin-left:auto colle la navigation à droite. Sans lui, le bouton de thème devient un troisième enfant et justify-content:space-between renverrait la navigation au milieu de la barre. */ .nav{display:flex;align-items:center;gap:1.8rem;margin-left:auto} /* ---------- Bascule clair / sombre ---------- Les deux icônes cohabitent dans le bouton ; le CSS n'en montre qu'une, celle du thème vers lequel on bascule. Les permuter en CSS plutôt qu'en JS évite que le bouton s'affiche vide le temps que le script arrive. */ .theme-toggle{ flex:none;margin-left:1.5rem;width:40px;height:40px;border-radius:50%; display:grid;place-items:center;cursor:pointer; background:var(--puce);border:1px solid transparent;color:var(--titre); transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease); } .theme-toggle:hover{border-color:var(--line);color:var(--orange)} .theme-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:2px} .theme-toggle svg{width:19px;height:19px} .theme-toggle .ico-soleil{display:none} [data-theme="dark"] .theme-toggle .ico-lune{display:none} [data-theme="dark"] .theme-toggle .ico-soleil{display:block} .nav a{font-weight:600;font-size:.95rem;color:var(--ink);position:relative;transition:color .2s} .nav a:not(.nav-cta)::after{ content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px; background:var(--orange);transition:width .25s var(--ease); } .nav a:not(.nav-cta):hover{color:var(--titre)} /* « .nav a » compte un sélecteur de plus que « .btn-primary » et gagne donc sur lui : sans cette règle, le bouton orange du menu prend la couleur du texte courant. En clair c'était déjà limite ; en sombre ce texte devient clair et disparaît sur l'orange. */ .nav a.nav-cta{color:#fff} .nav a:not(.nav-cta):hover::after{width:100%} .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px} .burger span{width:26px;height:3px;background:var(--titre);border-radius:3px;transition:.3s var(--ease)} .burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden;padding:72px 0 0} .hero-bg{ position:absolute;inset:0;z-index:-1; background: radial-gradient(900px 500px at 85% -5%,var(--halo-chaud),transparent 60%), radial-gradient(700px 500px at 0% 20%,var(--halo-froid),transparent 55%), linear-gradient(180deg,var(--carte-douce),var(--bg-alt)); } .hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding-bottom:60px} /* ---------- Accroche qui s'écrit ---------- inline-grid avec les deux calques dans la même cellule : le gabarit (texte complet) impose la largeur, la frappe se superpose dessus. Une superposition en position:absolute aurait obligé à recopier ici le padding de la pastille, et à le tenir à jour à chaque retouche. */ .eyebrow{ display:inline-grid;background:var(--puce);color:var(--titre); font-weight:600;font-size:.85rem;padding:.4rem 1rem;border-radius:999px;margin-bottom:1.2rem; } .eyebrow>*{grid-area:1/1} /* Repli par défaut : sans JavaScript, le gabarit est le texte visible. Le script n'ajoute .eyebrow--anime qu'une fois prêt à animer. */ .eyebrow-frappe{display:none} .eyebrow--anime .eyebrow-frappe{display:block} /* color:transparent plutôt que visibility:hidden : le gabarit doit rester dans l'arbre d'accessibilité pour être lu. user-select:none évite de le copier en double avec le texte frappé par-dessus. */ .eyebrow--anime .eyebrow-gabarit{color:transparent;user-select:none} /* Curseur de frappe : un trait collé à la dernière lettre. Il occupe de la place. S'il n'existait que sur le calque de frappe, la pastille gagnerait ses quelques pixels au moment où le texte est complet, et le titre juste en dessous sauterait. Le gabarit porte donc le même curseur, sans couleur : les deux calques ont exactement la même géométrie, et c'est toujours le gabarit qui dicte la taille. Une seule déclaration pour les deux, sinon elles finiraient par diverger à la première retouche. */ .eyebrow--anime .eyebrow-gabarit::after, .eyebrow-frappe::after{ content:"";display:inline-block;width:2px;height:1em;vertical-align:-.15em;margin-left:2px; } .eyebrow-frappe::after{ background:var(--orange);animation:curseur 1.05s steps(2,start) infinite; } @keyframes curseur{to{visibility:hidden}} /* Pendant la frappe le curseur ne clignote pas : il ne doit s'interrompre qu'aux pauses, sinon il disparaît au milieu d'un mot. */ .eyebrow-frappe.ecrit::after{animation:none} .hero h1{font-size:clamp(2.3rem,5vw,3.7rem);font-weight:800;margin-bottom:1.2rem} .lead{font-size:1.1rem;color:var(--muted);max-width:560px;margin-bottom:1.8rem} .hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.4rem} .hero-badges{display:flex;gap:2.2rem;flex-wrap:wrap} .hero-badges div{display:flex;flex-direction:column} .hero-badges strong{font-family:'Poppins',sans-serif;font-size:1.8rem;color:var(--titre);line-height:1} .hero-badges span{font-size:.85rem;color:var(--muted)} .hero-card{position:relative;display:flex;align-items:center;justify-content:center} /* ---------- Champ « antigravité » ---------- Les pastilles des pôles flottent en apesanteur. Le CSS ne pose que l'apparence et la position de repos (--x/--y, en pourcentages du champ) ; la dérive et la répulsion au curseur sont écrites image par image dans --dx/--dy par js/hero-antigravity.js. Le champ garde une taille fixe en ratio : la place est réservée avant l'exécution du script, le titre à côté ne saute donc pas. */ /* flex:none est indispensable : le champ n'a que des enfants en position absolue, donc une taille intrinsèque nulle. Laissé rétractable dans .hero-card, il s'écrasait à ~48 px et toutes les pastilles se retrouvaient empilées dans un coin. */ .hero-orbit{ position:relative;z-index:2;flex:none;width:min(400px,100%);aspect-ratio:4/5; /* Décoratif : le champ ne doit jamais intercepter un clic ni un survol. Le curseur est suivi sur la fenêtre, pas sur l'élément. */ pointer-events:none; } /* La carte de l'Afrique en pointillé, peinte au canvas : elle est le fond du champ, les pastilles passent au-dessus. Les dimensions du bitmap sont posées par le JS d'après la densité de l'écran ; ici on ne fixe que la taille d'affichage. */ .orbit-carte{position:absolute;inset:0;width:100%;height:100%;z-index:0} .orbit-chip{ position:absolute;left:var(--x);top:var(--y);z-index:1; display:inline-flex;align-items:center;gap:.5rem; padding:.5rem .9rem;border-radius:999px;white-space:nowrap; font-family:'Poppins',sans-serif;font-weight:600;font-size:.82rem; color:var(--titre);background:var(--voile); border:1px solid var(--line);box-shadow:var(--shadow-sm); opacity:var(--o,1); /* L'ordre compte : translate(-50%,-50%) centre la pastille sur --x/--y, puis le décalage du JS s'applique, et l'échelle en dernier — sinon elle multiplierait aussi le décalage. */ transform:translate(-50%,-50%) translate(var(--dx,0),var(--dy,0)) scale(var(--s,1)); will-change:transform; } /* Les deux pastilles de premier plan sont pleines : le contraste renforce la profondeur donnée par l'échelle et la parallaxe. */ .orbit-chip--plein{ background:var(--navy);color:#fff;border-color:transparent;box-shadow:var(--shadow); } .orbit-chip svg{width:18px;height:18px;flex:none;color:var(--orange)} /* Sur fond marine, l'orange perd en lisibilité : l'icône passe en clair. */ .orbit-chip--plein svg{color:var(--orange-soft)} .hero-card-glow{ position:absolute;width:75%;height:75%;border-radius:50%; background:radial-gradient(circle,rgba(244,121,32,.35),transparent 70%); filter:blur(40px);z-index:1; } @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} /* ---------- Marquee ---------- */ .marquee{background:var(--navy);overflow:hidden;padding:14px 0} .marquee-track{display:flex;gap:1.5rem;white-space:nowrap;width:max-content;animation:scroll 28s linear infinite} .marquee-track span{font-family:'Poppins',sans-serif;font-weight:600;color:#fff;opacity:.92;font-size:1rem;letter-spacing:.03em} .marquee-track span:nth-child(even){color:var(--orange-soft)} @keyframes scroll{to{transform:translateX(-50%)}} /* ---------- Sections ---------- */ .section{padding:96px 0} .section-alt{background:var(--bg-alt)} .section-head{max-width:640px;margin:0 auto 56px;text-align:center} .section-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:800;margin-bottom:1rem} .section-head p{color:var(--muted);font-size:1.05rem} /* ---------- Services ---------- */ .services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .service-card{ background:var(--carte);border:1px solid var(--line);border-radius:var(--radius); padding:30px 26px;position:relative;overflow:hidden; transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s; } .service-card::before{ content:"";position:absolute;left:0;top:0;height:4px;width:100%; background:var(--marque);transform:scaleX(0);transform-origin:left; transition:transform .35s var(--ease); } .service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:transparent} .service-card:hover::before{transform:scaleX(1)} .service-icon{ width:58px;height:58px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px; color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--carte)); } .service-icon svg{width:30px;height:30px} .service-icon.photo{padding:0;overflow:hidden;background:none} .service-icon.photo img{width:100%;height:100%;object-fit:cover;border-radius:16px} .service-icon .ic-letter{font-family:'Poppins',sans-serif;font-weight:800;font-size:1.7rem;color:var(--accent)} .service-card h3{font-size:1.25rem;margin-bottom:.6rem} .service-card p{color:var(--muted);font-size:.95rem;margin-bottom:1rem} .service-card ul li{ font-size:.88rem;color:var(--ink);padding-left:1.3rem;position:relative;margin-bottom:.3rem;font-weight:500; } .service-card ul li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--marque)} .cta-card{ background:linear-gradient(150deg,var(--navy),var(--navy-deep)); display:flex;flex-direction:column;justify-content:center;align-items:flex-start;border:none; } .cta-card::before{display:none} .cta-card h3{color:#fff} .cta-card p{color:rgba(255,255,255,.8)} .cta-card:hover{transform:translateY(-8px)} /* ---------- About ---------- */ .about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center} .about-visual{position:relative;display:flex;justify-content:center} .about-emblem{ width:min(380px,100%);aspect-ratio:1;border-radius:30px;overflow:hidden; background:var(--carte);box-shadow:var(--shadow);display:grid;place-items:center;padding:24px; } .about-emblem img{border-radius:18px} .float-tag{ position:absolute;background:var(--carte);padding:.6rem 1rem;border-radius:14px; font-weight:600;font-size:.9rem;color:var(--titre);box-shadow:var(--shadow-sm); animation:floaty 5s ease-in-out infinite; } .tag-1{top:6%;left:-4%;animation-delay:.2s} .tag-2{bottom:14%;right:-6%;animation-delay:1s} .tag-3{bottom:-4%;left:18%;animation-delay:1.6s} .about-text h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:1.2rem} .about-text>p{color:var(--muted);font-size:1.05rem;margin-bottom:2rem;max-width:560px} .values{display:grid;grid-template-columns:1fr 1fr;gap:24px} .value{padding-left:1.1rem;border-left:3px solid var(--orange)} .value h4{font-size:1.05rem;margin-bottom:.3rem} .value p{color:var(--muted);font-size:.92rem} /* ---------- Process ---------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .step{position:relative;padding:34px 26px;border-radius:var(--radius);background:var(--bg-alt);transition:transform .35s var(--ease),background .35s} .step:hover{transform:translateY(-8px);background:var(--carte);box-shadow:var(--shadow)} .step-num{font-family:'Poppins',sans-serif;font-weight:800;font-size:2.4rem;color:var(--orange);opacity:.45;display:block;margin-bottom:.4rem} .step h3{font-size:1.2rem;margin-bottom:.5rem} .step p{color:var(--muted);font-size:.92rem} /* ---------- Stats ---------- */ .stats{background:linear-gradient(135deg,var(--navy),var(--navy-deep));padding:70px 0;position:relative;overflow:hidden} .stats::after{content:"";position:absolute;top:-40%;right:-5%;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(244,121,32,.3),transparent 70%);filter:blur(30px)} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;position:relative;z-index:2} .stat{display:flex;flex-direction:column;align-items:center} .stat-num,.stat-suffix{font-family:'Poppins',sans-serif;font-weight:800;font-size:3rem;color:#fff;line-height:1} .stat-suffix{color:var(--orange-soft)} .stat{flex-direction:row;flex-wrap:wrap;justify-content:center} .stat p{width:100%;color:rgba(255,255,255,.75);font-size:.95rem;margin-top:.4rem} /* ---------- Contact ---------- */ .contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start} .contact-info h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin-bottom:1rem} .contact-info>p{color:var(--muted);margin-bottom:2rem} .contact-list{display:flex;flex-direction:column;gap:1.1rem;margin-bottom:2rem} .contact-list li{display:flex;gap:1rem;align-items:center} .ci-icon{width:48px;height:48px;border-radius:14px;background:var(--bg-alt);display:grid;place-items:center;font-size:1.3rem;flex-shrink:0} .contact-list strong{display:block;font-family:'Poppins',sans-serif;color:var(--titre);font-size:.95rem} .contact-list span,.contact-list a{color:var(--muted);font-size:.95rem} .contact-list a{display:block;line-height:1.45} .contact-list a:hover{color:var(--orange)} .hours{background:var(--bg-alt);border-radius:var(--radius-sm);padding:1rem 1.2rem;display:flex;flex-direction:column} .hours strong{font-family:'Poppins',sans-serif;color:var(--titre)} .hours span{color:var(--muted);font-size:.95rem} .contact-form{background:var(--carte);border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow-sm)} .field{display:flex;flex-direction:column;margin-bottom:1.1rem} .field label{font-weight:600;font-size:.88rem;color:var(--titre);margin-bottom:.4rem} .field input,.field select,.field textarea{ font-family:inherit;font-size:.95rem;padding:.8rem 1rem;border:1.5px solid var(--line); border-radius:var(--radius-sm);background:var(--carte-douce);color:var(--ink);transition:border-color .2s,box-shadow .2s; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(244,121,32,.12) } .field textarea{resize:vertical} .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .form-note{margin-top:1rem;text-align:center;color:#1AAA5E;font-weight:600} .form-note .meta-ico{vertical-align:-3px;margin-right:.15rem} /* ---------- Footer ---------- */ .site-footer{background:var(--navy-deep);color:rgba(255,255,255,.8);padding:64px 0 28px} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)} .footer-brand .brand-name{color:#fff} .footer-brand p{margin-top:1rem;font-size:.95rem;color:rgba(255,255,255,.65)} .footer-col h4{color:#fff;font-size:1rem;margin-bottom:1rem} /* Une adresse e-mail est un mot insécable : sans cela elle impose sa largeur à la colonne de grille et fait déborder la page sur un petit téléphone. */ .footer-col a,.footer-brand p{overflow-wrap:anywhere} .footer-col a{display:block;color:rgba(255,255,255,.7);font-size:.93rem;padding:.3rem 0;transition:color .2s,padding-left .2s} .footer-col a:hover{color:var(--orange-soft);padding-left:5px} .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:1rem} .footer-bottom p{font-size:.9rem;color:rgba(255,255,255,.6)} .socials{display:flex;gap:1.4rem} .socials a{font-size:.9rem;color:rgba(255,255,255,.7)} .socials a:hover{color:var(--orange-soft)} /* ---------- To top ---------- */ .to-top{ position:fixed;left:24px;bottom:24px;width:48px;height:48px;border-radius:50%; background:var(--navy);color:#fff;display:grid;place-items:center;font-size:1.3rem; box-shadow:0 12px 26px -10px rgba(27,42,99,.6);opacity:0;visibility:hidden; transform:translateY(12px);transition:.3s var(--ease);z-index:55; } .to-top.show{opacity:1;visibility:visible;transform:translateY(0)} .to-top:hover{background:#e96c12;transform:translateY(-3px)} /* ---------- Réalisations ---------- */ .filters{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:40px} .filter-btn{ font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.9rem; padding:.55rem 1.2rem;border-radius:999px;border:1.5px solid var(--line); background:var(--carte);color:var(--muted);cursor:pointer;transition:.25s var(--ease); } .filter-btn:hover{border-color:var(--titre);color:var(--titre)} .filter-btn.active{background:var(--navy);border-color:var(--navy);color:#fff} .work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .work-card{ background:var(--carte);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; display:flex;flex-direction:column; transition:transform .35s var(--ease),box-shadow .35s var(--ease),opacity .35s,border-color .35s; } .work-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:transparent} .work-card.hide{display:none} .work-cover{ position:relative;aspect-ratio:16/11;display:grid;place-items:center;overflow:hidden; background: radial-gradient(120px 80px at 70% 20%,rgba(255,255,255,.25),transparent 60%), linear-gradient(145deg,var(--c,var(--navy)),color-mix(in srgb,var(--c,var(--navy)) 60%,#000)); } .work-emoji{display:grid;place-items:center;color:#fff;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));transition:transform .4s var(--ease)} .work-emoji svg{width:56px;height:56px} .work-card:hover .work-emoji{transform:scale(1.12) rotate(-4deg)} .work-badge{ position:absolute;top:12px;left:12px;background:var(--voile);color:var(--titre); font-size:.72rem;font-weight:700;letter-spacing:.02em;padding:.3rem .7rem;border-radius:999px; } .work-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1} .work-body h3{font-size:1.1rem;margin-bottom:.5rem} .work-body p{color:var(--muted);font-size:.9rem;margin-bottom:1rem;flex:1} .work-meta{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;color:var(--titre);font-weight:600;border-top:1px solid var(--line);padding-top:.8rem} /* ---------- Icônes en ligne (remplacent les anciens emojis) ---------- */ .work-meta span{display:inline-flex;align-items:center;gap:.35rem} .meta-ico{width:15px;height:15px;flex:0 0 auto;stroke-width:1.9} .tag-ico{width:16px;height:16px;flex:0 0 auto;margin-right:.4rem;vertical-align:-3px;color:var(--orange)} .ci-icon svg{width:22px;height:22px;color:var(--titre)} .work-emoji .svc-ico{width:46px;height:46px;color:#fff} .work-meta span:last-child{color:var(--orange)} .work-note{text-align:center;color:var(--muted);font-size:.88rem;margin-top:32px;font-style:italic} /* ---------- Fondateur ---------- */ .founder-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center} .founder-media{position:relative;display:flex;justify-content:center} .founder-avatar{ width:min(320px,82%);aspect-ratio:4/5;border-radius:26px;display:grid;place-items:center; background:linear-gradient(150deg,var(--navy),var(--navy-deep));box-shadow:var(--shadow); position:relative;overflow:hidden;padding:7px; } .founder-avatar::before{ content:"";position:absolute;inset:0;z-index:3;border-radius:26px;pointer-events:none; border:3px solid transparent; background:linear-gradient(150deg,var(--navy),var(--orange)) border-box; -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; } .founder-photo{width:100%;height:100%;object-fit:cover;object-position:50% 45%;border-radius:20px;display:block;position:relative;z-index:2} .founder-monogram{font-family:'Poppins',sans-serif;font-weight:800;font-size:5rem;color:#fff;letter-spacing:.05em;position:relative;z-index:2} .founder-content h2{font-size:clamp(1.9rem,3.6vw,2.6rem);margin-bottom:.2rem} .founder-role{color:var(--orange);font-weight:600;margin-bottom:1.4rem} .founder-quote{ border-left:4px solid var(--orange);padding:.4rem 0 .4rem 1.4rem;margin-bottom:1.4rem; font-size:1.12rem;line-height:1.6;color:var(--titre);font-weight:500;font-style:italic; } .founder-content>p{color:var(--muted);margin-bottom:1.4rem;max-width:560px} .founder-sign{ font-family:'Poppins',sans-serif;font-weight:700;font-size:1.5rem;color:var(--titre); font-style:italic;transform:rotate(-3deg);display:inline-block; } /* ---------- Page Service (détail) ---------- */ .svc-hero{ position:relative;overflow:hidden;padding:52px 0 62px;border-bottom:1px solid var(--line); background: radial-gradient(700px 380px at 88% -10%, color-mix(in srgb,var(--svc,var(--navy)) 20%, transparent), transparent 60%), linear-gradient(180deg,var(--carte-douce),var(--bg-alt)); } .crumb{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.85rem;color:var(--muted);margin-bottom:26px} .crumb a{color:var(--muted);font-weight:600} .crumb a:hover{color:var(--svc-lisible)} .crumb span{opacity:.5} .crumb em{color:var(--svc-lisible);font-style:normal;font-weight:700} .svc-hero-grid{display:grid;grid-template-columns:1.5fr .5fr;gap:32px;align-items:center} .svc-kicker{display:inline-block;font-family:'Poppins',sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--svc-marque);margin-bottom:.6rem} .svc-hero h1{font-size:clamp(2.1rem,4.6vw,3.2rem);font-weight:800;margin-bottom:.8rem} .svc-tagline{font-size:1.15rem;color:var(--muted);max-width:560px;margin-bottom:1.8rem} .svc-hero-actions{display:flex;gap:1rem;flex-wrap:wrap} .svc-hero-icon{ justify-self:center;width:130px;height:130px;border-radius:30px;display:grid;place-items:center;color:#fff; background:linear-gradient(150deg,var(--svc,var(--navy)),color-mix(in srgb,var(--svc,var(--navy)) 55%,#000)); box-shadow:0 22px 44px -18px color-mix(in srgb,var(--svc,var(--navy)) 75%, transparent); } .svc-hero-icon svg{width:64px;height:64px} .svc-intro-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:48px;align-items:start} .svc-intro p{color:var(--muted);font-size:1.06rem;margin-bottom:1.1rem} .svc-intro p:first-child{color:var(--ink);font-size:1.16rem} .svc-aside{background:var(--bg-alt);border-radius:var(--radius);padding:26px;border:1px solid var(--line)} .svc-stats{display:flex;flex-direction:column;gap:14px;margin-bottom:22px} .svc-stat{display:flex;align-items:baseline;gap:.6rem;padding-bottom:12px;border-bottom:1px dashed var(--line)} .svc-stat:last-child{border-bottom:none;padding-bottom:0} .svc-stat strong{font-family:'Poppins',sans-serif;font-size:1.5rem;color:var(--svc-lisible);min-width:78px} .svc-stat span{color:var(--muted);font-size:.92rem} .svc-atouts h4{font-size:1rem;margin-bottom:.8rem} .svc-atouts ul{display:flex;flex-direction:column;gap:.55rem} .svc-atouts li{position:relative;padding-left:1.6rem;font-weight:500;font-size:.94rem;color:var(--ink)} .svc-atouts li::before{content:"✓";position:absolute;left:0;top:0;color:var(--svc-marque);font-weight:800} .presta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .presta-card{display:flex;gap:.9rem;background:var(--carte);border:1px solid var(--line);border-radius:var(--radius-sm);padding:22px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s} .presta-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm);border-color:transparent} .presta-check{flex-shrink:0;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--svc,var(--navy))} .presta-card h3{font-size:1.05rem;margin-bottom:.35rem} .presta-card p{color:var(--muted);font-size:.9rem} .svc-cta{background:linear-gradient(135deg,var(--svc,var(--navy)),color-mix(in srgb,var(--svc,var(--navy)) 50%,#000));color:#fff;text-align:center;padding:70px 0} .svc-cta h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:.7rem} .svc-cta p{color:rgba(255,255,255,.85);max-width:560px;margin:0 auto 1.8rem} .svc-cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap} .btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)} .btn-ghost-light:hover{background:rgba(255,255,255,.12);transform:translateY(-3px)} /* lien « voir le détail » sur les cartes service de l'accueil */ .service-link{position:relative;text-decoration:none;display:flex;flex-direction:column} .service-more{display:inline-flex;align-items:center;gap:.35rem;margin-top:auto;padding-top:16px;font-weight:700;font-size:.9rem;color:var(--accent);transition:gap .25s var(--ease)} .service-more svg{width:16px;height:16px} .service-link:hover .service-more{gap:.7rem} /* ---------- Reveal animation ---------- */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} /* ---------- Responsive ---------- */ @media (max-width:980px){ .hero-inner{grid-template-columns:1fr;text-align:center} .hero-text{order:1}.hero-card{order:0} /* La carte passe au-dessus du texte : on bride le champ pour que le titre reste visible sans avoir à faire défiler. Les pastilles sont réduites dans la même proportion — leur largeur tient au texte, pas au champ, et elles se chevaucheraient sinon. */ .hero-orbit{width:min(320px,86%)} .orbit-chip{font-size:.72rem;padding:.42rem .7rem;gap:.4rem} .orbit-chip svg{width:16px;height:16px} .lead{margin-left:auto;margin-right:auto} .hero-actions,.hero-badges{justify-content:center} .services-grid{grid-template-columns:repeat(2,1fr)} .work-grid{grid-template-columns:repeat(2,1fr)} .svc-hero-grid{grid-template-columns:1fr;gap:24px} .svc-hero-icon{justify-self:start} .svc-intro-grid{grid-template-columns:1fr;gap:32px} .presta-grid{grid-template-columns:repeat(2,1fr)} .founder-wrap{grid-template-columns:1fr;gap:48px;text-align:center} .founder-content>p,.founder-quote{margin-left:auto;margin-right:auto} .founder-quote{text-align:left} .about-grid,.contact-grid{grid-template-columns:1fr;gap:40px} .steps{grid-template-columns:repeat(2,1fr)} .stats-grid{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr} /* Colonne dépilée : l'emblème occupe toute la largeur, les étiquettes flottantes doivent rentrer dans le cadre au lieu de dépasser à droite. */ .about-visual{max-width:380px;margin-inline:auto} .tag-1{left:0} .tag-2{right:0} .tag-3{left:8%} } /* Avec neuf entrées, le menu horizontal réclame ~1060px une fois comptés le logo et le bouton de thème : en dessous on bascule sur le burger, bien avant le seuil mobile, sinon il déborde de la barre. Mesuré : à 1040px il débordait encore, à 1100px il tient. Si vous ajoutez ou retirez une entrée, ce seuil est à revérifier. */ @media (max-width:1100px){ .nav{ position:fixed;inset:76px 0 auto 0;background:var(--carte);flex-direction:column;gap:0; padding:1rem 24px 1.5rem;border-bottom:1px solid var(--line);box-shadow:var(--shadow); transform:translateY(-130%);transition:transform .35s var(--ease); } .nav.open{transform:translateY(0)} .nav a{width:100%;padding:.9rem 0;border-bottom:1px solid var(--line)} .nav a:not(.nav-cta)::after{display:none} .nav-cta{margin-top:.8rem;justify-content:center} .burger{display:flex} /* La navigation sort du flux (position:fixed) : c'est au bouton de thème de reprendre le margin-left:auto, sinon il resterait planté au milieu de la barre, entre le logo et le burger. */ .theme-toggle{margin-left:auto;margin-right:.7rem} } @media (max-width:680px){ .services-grid,.steps,.values,.row,.work-grid,.presta-grid{grid-template-columns:1fr} .section{padding:70px 0} .footer-grid{grid-template-columns:1fr 1fr} .footer-bottom{flex-direction:column;text-align:center} } /* Très petits écrans : deux colonnes de pied de page deviennent illisibles */ @media (max-width:420px){ .footer-grid{grid-template-columns:1fr;gap:28px} .stats-grid{grid-template-columns:1fr} }