/* ===== HERO ===== */ .hero{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 100% -10%,#eef3fb 0,var(--white) 58%);padding:var(--space-12) 0 var(--space-16)} .hero__grid{display:grid;grid-template-columns:1fr;gap:var(--space-12);align-items:center} .hero__topo{position:absolute;top:0;left:0;width:60%;height:100%;opacity:.5;pointer-events:none} /* clamp conserve : aucun token de l'echelle ne coincide. --text-6xl vaut 72 px des 1200 px la ou ce titre en fait 64,8 px puis 68 px ; le rebaser changerait le rendu desktop. Exception assumee, cf. rapport. */ .hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(38px,5.4vw,68px);line-height:1.0;letter-spacing:-.02em;color:var(--navy);margin-top:var(--space-5)} .hero h1 em{font-style:italic;color:var(--blue-500)} .hero__lead{margin-top:var(--space-6);font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--neutral-600);max-width:46ch} .hero__cta{margin-top:var(--space-8);display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center} .hero__trust{margin-top:var(--space-10);display:flex;align-items:center;gap:var(--space-4);font-size:var(--text-sm);color:var(--neutral-500)} .hero__trust .avs{display:flex} .hero__trust .avs span{width:34px;height:34px;border-radius:50%;border:2px solid #fff;margin-left:-10px;background:var(--blue-300);display:grid;place-items:center;font-family:var(--font-data);font-size:11px;font-weight:600;color:#fff} .hero__trust .avs span:nth-child(2){background:var(--cyan-500)} .hero__trust .avs span:nth-child(3){background:var(--navy-500)} .hero__trust .avs span:first-child{margin-left:0} /* hero visual panel */ .hero__visual{position:relative;max-width:440px} /* Panneau décoratif : carré (1/1.04) uniquement quand il est POSÉ À CÔTÉ du texte (palier 1000). En pile mobile/tablette il occupait une pleine hauteur d'écran pour une valeur purement ornementale ; on le resserre en 3/2 (~-40 % de hauteur) sans rien perdre de la métaphore réseau. */ .hero__panel{position:relative;background:var(--navy-800);border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:3/2;box-shadow:var(--shadow-xl)} .hero__panel .grid-bg{position:absolute;inset:0;opacity:.55;background-image:linear-gradient(rgba(0,159,227,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(0,159,227,.13) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(90% 90% at 70% 30%,#000,transparent)} /* Photo optionnelle du hero (Customizer → Accueil). Elle occupe le fond du panneau ; un voile navy la coiffe pour que les courbes cyan et le tracé orange restent lisibles quel que soit le cliché — et pour garder l'unité de marque du panneau d'origine. Empilement explicite : photo (0) < voile (1) < grille + courbes (2). Les repères texte (« Conakry / Marchés int. ») sont MASQUÉS sur photo : ils figuraient une carte sur le panneau abstrait d'origine, mais flottent sur un cliché réel. Sans photo, le panneau conserve son graphisme complet, repères inclus. */ .hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .hero__panel--img::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(150deg,rgba(4,20,45,.82),rgba(4,20,45,.5) 55%,rgba(4,20,45,.62))} .hero__panel--img .grid-bg{z-index:2;opacity:.28} .hero__panel--img svg.contours{z-index:2} .hero__panel--img .ploc{display:none} .hero__panel svg.contours{position:absolute;inset:0;width:100%;height:100%} .node{fill:var(--orange)} .node-ring{fill:none;stroke:var(--orange);transform-origin:center;animation:pulse 2.6s var(--ease-out) infinite} @keyframes pulse{0%{opacity:.7;transform:scale(.5)}70%{opacity:0;transform:scale(1.8)}100%{opacity:0}} .hero__panel .ploc{position:absolute;font-family:var(--font-data);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-200)} .float-card{position:absolute;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);box-shadow:var(--shadow-lg)} .float-card .n{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--navy);line-height:1} .float-card .n b{color:var(--orange);font-weight:400} .float-card .l{font-family:var(--font-data);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--neutral-500);margin-top:6px} .fc-1{top:4%;right:8px} .fc-2{bottom:5%;left:8px} /* ===== Clients strip ===== */ .clients{border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .clients__inner{display:flex;align-items:center;gap:var(--space-10);flex-wrap:wrap;justify-content:space-between;padding:var(--space-6) 0} .clients__label{font-family:var(--font-data);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--neutral-400);flex:none} .clients__logos{display:flex;align-items:center;gap:var(--space-10);flex-wrap:wrap;opacity:.65} .logo-ph{display:flex;align-items:center;gap:8px;color:var(--navy-400);font-family:var(--font-display);font-size:var(--text-lg);font-weight:500} .logo-ph svg{width:22px;height:22px} /* ===== Services ===== */ /* auto-fill : ce sont les domaines « à la une » (case à cocher au back-office) — leur nombre peut retomber à 1 si un seul est coché. auto-fit aurait alors étiré cette carte unique sur toute la largeur ; auto-fill garde la largeur naturelle de la piste, comme .team dans about.css. */ .services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:var(--space-6);margin-top:var(--space-12)} /* Mobile (< 640 px, une seule colonne) : on n'affiche que les 4 premiers domaines à la une — au-delà, la pile devient interminable pour peu de valeur, alors que le bouton « Voir les N domaines » mène déjà à la liste complète. Le DOM reste intact (SEO/a11y) ; on ne fait que masquer. Dès 640 px (deux colonnes ou plus) tous les domaines reviennent. */ .services-grid .svc:nth-child(n+5){display:none} .svc{display:flex;flex-direction:column} .svc .card__body{flex:1} /* ===== Pourquoi nous ===== */ .why{display:grid;grid-template-columns:1fr;gap:var(--space-10);align-items:center} /* auto-fit reste sûr ici : les 4 propositions de valeur sont codées en dur ci-dessous (tableau $vprops, aucune saisie back-office) — leur nombre ne peut jamais retomber à 1. */ .why__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--space-8)} .vprop{display:flex;flex-direction:column;gap:var(--space-3)} .vprop .vnum{font-family:var(--font-data);font-size:var(--text-sm);font-weight:600;color:var(--cyan-600)} .vprop h3{font-family:var(--font-display);font-size:var(--text-xl);color:var(--navy);line-height:1.2} .vprop p{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--neutral-600)} .vprop::before{content:"";width:40px;height:2px;background:var(--orange)} /* ===== Processus ===== */ /* auto-fit reste sûr ici : les 4 étapes sont codées en dur ci-dessous (tableau $process, aucune saisie back-office) — leur nombre ne peut jamais retomber à 1. */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--space-6);margin-top:var(--space-12);counter-reset:st} .step{position:relative;padding-top:var(--space-8)} .step::before{counter-increment:st;content:"0" counter(st);font-family:var(--font-display);font-size:var(--text-4xl);color:var(--navy-100);line-height:1;position:absolute;top:-6px;left:0} .step__bar{height:3px;background:var(--border);border-radius:2px;margin-bottom:var(--space-5);position:relative;overflow:hidden} .step__bar i{position:absolute;inset:0;width:0;background:var(--orange);transition:width 1s var(--ease-out)} .step.in .step__bar i{width:36%} .step h3{font-family:var(--font-display);font-size:var(--text-lg);color:var(--navy);margin-bottom:var(--space-2)} .step p{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--neutral-600)} /* ===== Chiffres-clés (dark, Flux) ===== */ .figures{background:var(--navy-900);color:#fff;position:relative;overflow:hidden} .figures__topo{position:absolute;inset:0;opacity:.4;pointer-events:none} .figures .grid-bg{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(0,159,227,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(0,159,227,.1) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(100% 80% at 50% 0,#000,transparent)} .figures .sec-head h2{color:#fff} .figures .sec-head h2 em{color:var(--cyan-300)} .figures .sec-head p{color:var(--text-ondark-muted)} /* Exception : le filet vertical entre chiffres (.fig border-left) suppose des colonnes explicites, bascule en filet horizontal a 1 colonne. Le nombre de colonnes est ici une decision de design, pas une contrainte de place. */ .fig-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6);margin-top:var(--space-12);position:relative} .fig{border-top:1px solid rgba(255,255,255,.14);padding-top:var(--space-4)} /* Rebase sur le token fluide : le clamp ad hoc valait deja exactement --text-5xl des 1200 px (5vw = 60 px = plafond du token). Rendu desktop inchange ; seul le mobile suit desormais l'echelle (40 -> 36 px). */ .fig .n{font-family:var(--font-display);font-size:var(--text-5xl);line-height:1;letter-spacing:-.02em} .fig .n b{color:var(--orange);font-weight:400} .fig .l{font-family:var(--font-data);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-200);margin-top:var(--space-3)} .fig p{font-size:var(--text-sm);color:var(--text-ondark-muted);margin-top:var(--space-2);line-height:1.5} /* sortie vers la liste complète des domaines */ .services-more{display:flex;justify-content:center;margin-top:var(--space-10)} /* ===== FAQ ===== */ .faq{display:grid;grid-template-columns:1fr;gap:var(--space-8);align-items:start} /* ===== Actualités ===== */ /* auto-fill : ce sont les 3 derniers articles publiés — un site jeune (ou en tout début de vie éditoriale) peut n'en avoir qu'1. auto-fit aurait étiré .post__cover (aspect-ratio 16/10) sur toute la largeur ; auto-fill garde la largeur naturelle de la piste, comme .team dans about.css. */ .news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:var(--space-6);margin-top:var(--space-12)} .post{display:flex;flex-direction:column;text-decoration:none;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);background:#fff;transition:box-shadow var(--dur-base),transform var(--dur-base),border-color var(--dur-base)} .post:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:transparent} .post__cover{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--navy-800)} .post__cover .gb{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(0,159,227,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(0,159,227,.14) 1px,transparent 1px);background-size:26px 26px} .post__cover svg{position:absolute;inset:0;width:100%;height:100%} .post__cat{position:absolute;top:12px;left:12px;z-index:2} .post__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);flex:1} .post__date{font-family:var(--font-data);font-size:var(--text-xs);color:var(--neutral-500);letter-spacing:.04em} .post__title{font-family:var(--font-display);font-size:var(--text-lg);color:var(--navy);line-height:1.25;transition:color var(--dur-base)} .post:hover .post__title{color:var(--blue-600)} .post__more{margin-top:auto;font-size:var(--text-sm);font-weight:600;color:var(--blue-500)} /* (chrome, .cta-band & .cta-form partagés via site.css) */ /* ---- Paliers (mobile-first) ---- Le chrome partage (.ds-nav, .mnav-toggle, .section, .cta-band) N'EST PLUS redeclare ici : il vivait en max-width:760/980 et, cette feuille etant chargee apres site.css, il annulait l'inversion mobile-first du chrome sur la seule page d'accueil (bouton de menu a 30x30 au lieu de 44x44, bande de contact a une colonne a 900 px). */ @media(min-width:640px){ /* Deux colonnes de domaines ou plus : la liste complète des « à la une » tient sans allonger démesurément la page — on rétablit tout. */ .services-grid .svc:nth-child(n+5){display:flex} } @media(min-width:900px){ .hero{padding:var(--space-20) 0 var(--space-24)} .fc-1{top:7%;right:-22px} .fc-2{bottom:9%;left:-26px} .float-card .n{font-size:var(--text-3xl)} .fig-grid{grid-template-columns:1fr 1fr;gap:var(--space-10)} .fig{border-top:none;padding-top:0;border-left:1px solid rgba(255,255,255,.14);padding-left:var(--space-5)} } /* Quatrieme palier — 1000 px, hors de la serie 640/900/1200. Il existe parce que le seuil de bascule a deux colonnes de ce theme est historiquement a ~980 px (les blocs @media(max-width:980px) d'avant la refonte mobile-first) : la composition a deux colonnes etait donc active des 981 px. Le forcer a 1200 pour respecter la serie a trois paliers laissait toute la bande 981-1199 px — celle des portables — empilee sur une seule colonne, au prix de +54 % de hauteur sur /contact/ a 1024 px. La regle des trois paliers a cede, pas le rendu. */ @media(min-width:1000px){ .hero__grid{grid-template-columns:1.05fr .95fr;gap:var(--space-16)} .hero__visual{max-width:none} /* Le panneau reprend son format carré une fois posé à côté du texte. */ .hero__panel{aspect-ratio:1/1.04} .why{grid-template-columns:.85fr 1.15fr;gap:var(--space-16)} /* Une fois .why passe a deux colonnes, sa colonne droite ne fait plus que ~510 px a 1000 px : le plancher de 260 px du auto-fit de base n'y loge plus deux pistes et la liste retombait a une colonne, alors qu'elle en avait deux des 981 px avant la refonte. On abaisse le plancher pour ce palier seulement — auto-fit est conserve, donc une liste a une seule entree ne s'etire toujours pas sur toute la largeur. */ .why__list{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))} .fig-grid{grid-template-columns:repeat(4,1fr);gap:var(--space-8)} .faq{grid-template-columns:.8fr 1.2fr;gap:var(--space-16)} }