/* Hackeys - feuille de style unique. Charte reprise du visuel de Rudolf (Images/Fond/5.png et fond.mp4) : rubans de couleur qui traversent un ivoire chaud, sphères concentriques, traits fins verticaux. Les couleurs sont relevées directement sur l'image source. Mouvements lents et continus, comme la vidéo. Rien ne clignote. */ /* Jetons du système de design. Les couleurs de marque sont ÉCHANTILLONNÉES dans Images/Logos/hackeys-H.png, pas approchées à l'oeil : le H vaut #691C35 et le liseré #8EFC92. La version précédente utilisait #7d1b2e pour l'accent, plus rouge et plus clair que le logo, et l'écart se voyait dès que les deux étaient dans le même écran. Référence : _bmad-output/planning-artifacts/ux-designs/.../DESIGN.md */ :root{ /* Surfaces */ --fond:#f7f5ef; --fond2:#efebe0; --fond3:#fdfcf9; --trait:#dcd7c8; --texte:#1a1016; /* pas un noir : un bordeaux désaturé jusqu'à l'encre */ --mut:#5e5749; /* Les six rubans, un par savoir-faire, RELEVÉS DANS Images/Fond/5.png : ce sont les teintes des ondulations du visuel, pas des tons choisis à l'oeil. L'attribution ne change jamais : la carte 04 est verte parce que l'IA est verte, et la quatrième roue du mécanisme aussi. Tous à 5:1 minimum sur le fond, donc tous utilisables en texte. */ --ruban-1:#8a0e22; /* 01 Sécurité réseau carmin 8.89:1 */ --ruban-2:#b02255; /* 02 ISO 27001 magenta 6.01:1 */ --ruban-3:#0e3762; /* 03 Cyber-gouvernance bleu nuit 11.06:1 */ --ruban-4:#385c11; /* 04 IA vert olive 7.12:1 */ --ruban-5:#8f5a06; /* 05 Visibilité or profond 5.30:1 */ --ruban-6:#982d0d; /* 06 SI et CRM terre brûlée 7.09:1 */ /* Les mêmes, en version vive : décor seulement, jamais de texte dessus. Ce sont les couleurs telles quelles dans 5.png. */ --vif-orange:#d6761b; --vif-magenta:#e6588f; --vif-turquoise:#3992a4; --vif-or:#fbd65b; /* Marque */ --accent:#691c35; /* le H du logo, au pixel */ --accent-fonce:#4e1428; --accent-clair:#8e2f4c; --accent-pale:#efe7e6; --vert-logo:#8efc92; /* le liseré. 1.27:1 sur fond clair : JAMAIS de texte. */ --vert-profond:#346d47; /* le palier lisible du vert, 5.62:1 */ --focus:#1e5f86; --erreur:#a31621; /* Alias conservés pour ne pas casser les pages secondaires. */ --rose:var(--ruban-2); --rouge:var(--ruban-1); --vert:var(--ruban-4); --rayon:14px; --rayon-lg:20px; --large:1180px; --laize-texte:68ch; --tr:.35s cubic-bezier(.22,.61,.36,1); } /* Police du logo ERM (Space Grotesk), hébergée en local (CSP font-src 'self'). */ @font-face{ font-family:"Space Grotesk"; src:url("fonts/space-grotesk-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--fond); color:var(--texte); font-family:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3{line-height:1.18; margin:0 0 .5em; font-weight:650; letter-spacing:-.015em} h1{font-size:clamp(2.3rem,5.6vw,4rem); font-weight:700} h2{font-size:clamp(1.7rem,3.4vw,2.5rem)} h3{font-size:1.14rem} p{margin:0 0 1em} a{color:inherit} img,svg{max-width:100%} ul,ol{margin:0; padding:0; list-style:none} .skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;z-index:200} .skip:focus{left:12px;top:12px;border-radius:8px} :focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:6px} /* Les ancres doivent s'arrêter sous l'en-tête collante, sinon le titre visé passe dessous et le visiteur atterrit au milieu d'un paragraphe. */ :target, [id]{scroll-margin-top:92px} /* ---------- En-tête ---------- */ .entete{ position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px clamp(16px,4vw,42px); background:rgba(255,255,255,.86); backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color var(--tr), background var(--tr); } .entete.colle{border-bottom-color:var(--trait); background:rgba(255,255,255,.96)} .marque{display:flex; align-items:center; min-height:44px; gap:11px; text-decoration:none; color:var(--accent)} .marque-logo{width:38px; height:38px; flex:none; border-radius:9px; display:block} .marque-nom{font-weight:700; letter-spacing:.15em; font-size:1.32rem; color:var(--texte)} .nav{display:flex; align-items:center; gap:26px} .nav a{position:relative; display:inline-flex; align-items:center; min-height:44px; text-decoration:none; font-size:.93rem; color:var(--mut); padding:6px 0; transition:color var(--tr)} .nav a:hover{color:var(--texte)} /* Section courante : le liseré vert du logo, doublé d'un changement de graisse et de couleur. La couleur seule ne doit jamais porter l'information. */ .nav a.nav-courant{color:var(--texte); font-weight:600} .nav a.nav-courant::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:999px; background:var(--vert-logo); box-shadow:0 0 0 1px rgba(52,109,71,.45); } .nav a.nav-cta.nav-courant::after{display:none} /* Selecteur double a dessein : `.nav a` porte deja un padding et l'emportait sur `.nav-cta` par specificite. Le texte se retrouvait colle au contour. Les `!important` ont ete retires. Ils creaient un piege : la regle de repos `.nav a.nav-cta` (0,2,1) l'emportait sur `.nav-cta:hover` (0,2,0), puisque entre deux declarations `!important` c'est la specificite qui departage. Au survol, le fond devenait bordeaux mais la couleur du texte ne suivait pas : bordeaux sur bordeaux, le libelle disparaissait. Avec le selecteur double, `!important` n'a plus aucune utilite : la regle passe deja devant `.nav a`. Les etats se declinent a la meme specificite. */ .nav a.nav-cta{ border:1px solid var(--accent); color:var(--accent); padding:12px 24px; border-radius:999px; transition:background var(--tr), color var(--tr), border-color var(--tr); } .nav a.nav-cta:hover, .nav a.nav-cta:focus-visible{ background:var(--accent); border-color:var(--accent); color:#fff; } .burger{display:none; background:none; border:0; cursor:pointer; padding:14px 11px; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-width:45px; min-height:44px} .burger span{display:block; width:23px; height:2px; background:var(--texte); transition:transform var(--tr), opacity var(--tr)} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav-mobile{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; padding:8px 24px 22px; background:var(--fond2); border-bottom:1px solid var(--trait); box-shadow:0 20px 30px -20px rgba(0,0,0,.32); max-height:calc(100dvh - 62px); overflow-y:auto} .nav-mobile a{padding:13px 0; text-decoration:none; color:var(--texte); border-bottom:1px solid var(--trait)} /* ---------- Héros ---------- */ .hero{ position:relative; min-height:min(94vh,860px); display:flex; align-items:center; padding:clamp(60px,10vh,120px) clamp(16px,4vw,42px); overflow:hidden; } /* Nappe de rubans, sur toute la largeur du hero : elle passe DERRIERE le titre, les piliers et le carrousel. Elle est estompee en haut et en bas pour ne pas buter contre l'en-tete ni contre le bas de section. */ .hero-nappe{ position:absolute; inset:0; z-index:0; pointer-events:none; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 14%, #000 84%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0, #000 14%, #000 84%, transparent 100%); } .hero-nappe canvas{display:block; width:100%; height:100%} .hero-nappe:empty, .hero-nappe:not(:has(canvas)){display:none} /* Voile de lisibilite. Avant, un aplat opaque couvrait le tiers gauche : le fond y paraissait mort. On garde juste ce qu'il faut sous le texte. */ .hero::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1; background:radial-gradient(78% 62% at 24% 30%, rgba(247,245,239,.86) 0%, rgba(247,245,239,.52) 42%, rgba(247,245,239,0) 74%); } /* Cale sur le bord droit du heros. Le mecanisme doit rester un ENFANT DIRECT de .hero (voir le commentaire dans index.html) : place dans .hero-txt, qui est en position:relative, il s'y ancrait et les roues venaient se poser sur les cellules du carrousel. */ .mecanisme{ position:absolute; top:50%; right:clamp(8px,2vw,40px); transform:translateY(-50%); width:min(760px,48vw); aspect-ratio:755/461; pointer-events:none; z-index:2; } .mecanisme-svg, .mecanisme-toile{display:block; width:100%; height:100%} /* Sans JavaScript, le mécanisme n'est pas monté. Un conteneur vide de 400 px de haut laisserait un trou au milieu de la page : on l'efface plutôt que de faire semblant. Même chose pour le carrousel, dont la piste est générée. */ .mecanisme:empty{display:none} .carrousel:has(.carr-piste:empty){display:none} /* La toile est peinte par le script : sans lui, le bloc reste vide. */ .mecanisme:not(:has(canvas)){display:none} .hero-txt{position:relative; z-index:3; max-width:min(660px,92%); margin:0 auto 0 max(0px,calc(50vw - var(--large)/2))} .surtitre{ color:var(--accent); font-size:.79rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; margin:0 0 14px; } .accent{color:var(--accent)} .chapo{color:var(--mut); font-size:1.09rem; max-width:56ch; margin-bottom:32px} .hero-btn{display:flex; flex-wrap:wrap; gap:13px; margin-bottom:34px} .btn{ display:inline-block; padding:14px 27px; border-radius:999px; text-decoration:none; font-weight:600; font-size:.97rem; cursor:pointer; border:1px solid transparent; transition:transform var(--tr), background var(--tr), border-color var(--tr), color var(--tr); } .btn:hover{transform:translateY(-2px)} .btn-plein{background:var(--accent); color:#fff} .btn-plein:hover{background:var(--accent-fonce)} .btn-vide{border-color:var(--trait); color:var(--texte)} .btn-vide:hover{border-color:var(--accent); color:var(--accent)} .btn-large{width:100%; padding:16px; font-size:1.02rem; border:0} .hero-tags{display:flex; flex-wrap:wrap; gap:9px} .hero-tags li{ font-size:.8rem; color:var(--mut); border:1px solid var(--trait); padding:6px 13px; border-radius:999px; background:var(--accent-pale); } /* ---------- Sections ---------- */ .section{padding:clamp(64px,9vw,120px) clamp(16px,4vw,42px)} .section-sombre{background:var(--fond2); border-block:1px solid var(--trait)} .entete-sec{max-width:var(--large); margin:0 auto clamp(34px,5vw,58px)} .intro{color:var(--mut); max-width:62ch} /* Ce paragraphe est justifié à la demande de Rudolf : le drapeau à droite lui faisait des fins de ligne en dents de scie. La césure automatique est indispensable ici, sans elle la justification creuse des rivières de blanc, et `text-wrap:pretty` équilibre les dernières lignes quand le navigateur le sait faire. C'est la seule exception à la règle du système de design. */ .apropos-intro{ text-align:justify; text-justify:inter-word; hyphens:auto; text-wrap:pretty; text-indent:1.6em; max-width:var(--laize-texte); } .intro, .carte > p, .secteur p, .etapes li p, .faq-rep p{hyphens:auto; max-width:var(--laize-texte)} .grille{ max-width:var(--large); margin:0 auto; display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); } .carte{ position:relative; background:var(--fond2); border:1px solid var(--trait); border-radius:var(--rayon); padding:30px 26px 26px; transition:transform var(--tr), border-color var(--tr), background var(--tr); } .carte::before{ content:""; position:absolute; inset:0; border-radius:var(--rayon); pointer-events:none; background:linear-gradient(160deg, var(--teinte, var(--accent)), transparent 46%); opacity:0; transition:opacity var(--tr); } /* Le liseré de gauche porte la couleur du domaine, comme un ruban du visuel. */ .carte::after{ content:""; position:absolute; left:0; top:18px; bottom:18px; width:3px; border-radius:0 3px 3px 0; background:var(--teinte, var(--accent)); transform:scaleY(.35); transform-origin:top; transition:transform var(--tr); } .carte:hover::after{transform:scaleY(1)} /* Une carte, une roue, une couleur. La carte 04 est verte, la quatrième roue du mécanisme aussi : le mécanisme raconte l'offre au lieu de l'illustrer. */ .carte:nth-child(1){--teinte:var(--ruban-1)} .carte:nth-child(2){--teinte:var(--ruban-2)} .carte:nth-child(3){--teinte:var(--ruban-3)} .carte:nth-child(4){--teinte:var(--ruban-4)} .carte:nth-child(5){--teinte:var(--ruban-5)} .carte:nth-child(6){--teinte:var(--ruban-6)} .carte-num{color:var(--teinte, var(--accent)) !important} .carte .puces li::before{border-color:var(--teinte, var(--accent))} /* Les cartes ne mènent nulle part : l'effet reste une élévation, sans changement de fond. Six fonds qui changent font clignoter la grille, et un fond teinté laisse croire à un lien. */ .carte:hover{transform:translateY(-3px); border-color:#cbb8a0; box-shadow:0 4px 12px rgba(26,16,22,.09), 0 12px 28px rgba(26,16,22,.07)} .carte-num{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.2em; color:var(--accent); margin-bottom:12px; } .carte p{color:var(--mut); font-size:.96rem} .puces{margin-top:14px; display:grid; gap:7px} .puces li{ position:relative; padding-left:19px; font-size:.9rem; color:var(--mut); } .puces li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; border:1.5px solid var(--accent); } .secteurs{ max-width:var(--large); margin:0 auto; display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); } .secteur{ background:var(--fond3); border:1px solid var(--trait); border-radius:var(--rayon); padding:26px 24px; transition:transform var(--tr), border-color var(--tr); } .secteur:hover{transform:translateY(-4px); border-color:var(--rose); box-shadow:0 12px 30px rgba(219,39,119,.10)} /* Icônes tracées, pas d'emoji : le rendu doit être le même partout. */ .ico{width:32px; height:32px; display:block; margin-bottom:12px; fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; overflow:visible; transition:stroke var(--tr), transform var(--tr)} .ico .plein{fill:var(--accent); stroke:none} .secteur:hover .ico{stroke:var(--accent-fonce); transform:rotate(-6deg)} .secteur:hover .ico .plein{fill:var(--accent-fonce)} .secteur p{color:var(--mut); font-size:.93rem; margin:0} .etapes{ max-width:var(--large); margin:0 auto; display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); counter-reset:et; } .etapes li{position:relative; padding:26px 24px; background:var(--fond2); border:1px solid var(--trait); border-radius:var(--rayon)} .etape-n{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; margin-bottom:13px; border:1px solid var(--accent); color:var(--accent); font-weight:700; font-size:.92rem; } .etapes p{color:var(--mut); font-size:.94rem; margin:0} /* ---------- Contact ---------- */ .section-contact{background:var(--fond2); border-top:1px solid var(--trait)} .contact-grille{ max-width:var(--large); margin:0 auto; display:grid; gap:clamp(32px,5vw,64px); grid-template-columns:1fr 1fr; align-items:start; } .contact-points{margin-top:22px; display:grid; gap:10px} .contact-points li{position:relative; padding-left:26px; color:var(--mut); font-size:.94rem} .contact-points li::before{ content:"✓"; position:absolute; left:0; top:-1px; color:var(--accent); font-weight:700; } .mecanisme-mini{margin-top:34px; width:min(320px,72%); aspect-ratio:23/16; opacity:.8} .form{background:var(--fond3); border:1px solid var(--trait); border-radius:18px; padding:clamp(22px,3vw,34px)} .champ{margin-bottom:17px} .champ-duo{display:grid; gap:17px; grid-template-columns:1fr 1fr} label{display:block; font-size:.87rem; font-weight:600; margin-bottom:7px} .req{color:var(--accent)} .opt{color:var(--mut); font-weight:400} input[type=text],input[type=email],input[type=tel],textarea{ width:100%; padding:13px 15px; font:inherit; font-size:.97rem; color:var(--texte); background:var(--fond); border:1px solid var(--trait); border-radius:10px; transition:border-color var(--tr), box-shadow var(--tr); } input::placeholder,textarea::placeholder{color:var(--mut)} input:focus,textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,58,237,.15); } textarea{resize:vertical; min-height:130px} .champ.invalide input,.champ.invalide textarea{border-color:var(--rouge)} .aide{font-size:.81rem; color:var(--mut); margin:6px 0 0} .err{font-size:.83rem; color:var(--rouge); margin:6px 0 0; min-height:0} .err:empty{margin:0} .pot-de-miel{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden} .consent{display:flex; gap:11px; align-items:flex-start; font-weight:400; font-size:.9rem; color:var(--mut); margin:6px 0 4px} .consent input{margin-top:4px; accent-color:var(--accent); width:17px; height:17px; flex:none} .form-etat{margin:14px 0 0; font-size:.93rem; min-height:1.2em} .form-etat.ok{color:var(--vert)} .form-etat.ko{color:var(--rouge)} #envoyer[disabled]{opacity:.6; cursor:progress} /* ---------- Pied ---------- */ .pied{background:var(--fond); border-top:1px solid var(--trait); padding:52px clamp(16px,4vw,42px) 26px} .pied-in{max-width:var(--large); margin:0 auto; display:grid; gap:30px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .pied-marque{color:var(--accent); font-weight:700; letter-spacing:.16em; margin:0 0 9px} .pied-t{font-weight:600; margin:0 0 9px; font-size:.95rem} .pied-p{color:var(--mut); font-size:.87rem; margin:0; hyphens:auto} .pied-p a{color:var(--accent); display:inline-block; padding:11px 2px} .pied-bas a{color:var(--accent); display:inline-block; padding:12px 2px} .pied-bas{max-width:var(--large); margin:34px auto 0; padding-top:20px; border-top:1px solid var(--trait); color:var(--mut); font-size:.81rem} /* ---------- Mécanisme (engrenages) ---------- AUCUNE animation CSS ici, et c'est délibéré. La position de chaque roue est calculée par assets/mecanisme.js et posée en attribut `transform` à chaque image, depuis une horloge unique. Une animation CSS sur `transform` prend le pas sur le style inline tant qu'elle joue : elle écraserait le calcul, toutes les roues tourneraient à la même vitesse, et les dents se traverseraient. C'est exactement ce qui s'est produit le 31/07/2026 : la règle `.roue{animation:tourne var(--duree,30s)}` avait survécu à la réécriture, `--duree` n'était plus posée, et les six roues tournaient toutes en 30 s. Le contrôle outils/controle.html vérifie désormais les rapports de vitesse pour que la régression ne puisse pas revenir en silence. */ /* ---------- Apparition ---------- */ [data-anim]{transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1)} /* Seul le script, une fois qu'il a pris la main, se permet de masquer avant de reveler. Sans lui, ou s'il echoue, tout reste lisible. */ .js-anim [data-anim]{opacity:0; transform:translateY(22px)} .js-anim [data-anim].vu{opacity:1; transform:none} /* ---------- Adaptatif ---------- */ /* Sous 1000px, le mécanisme ne se cache pas hors de l'écran : il passe en bandeau sous le texte. La version précédente le décalait à right:-28vw avec opacity:.24, ce qui revenait à effacer l'identité visuelle sur téléphone, c'est-à-dire sur l'écran par lequel arrivent la plupart des visiteurs. */ @media (max-width:1200px){ .hero{flex-direction:column; align-items:stretch; min-height:auto} .hero::after{display:none} .hero-txt{max-width:min(var(--large),100%); margin:0 auto; width:100%} /* Le mécanisme reprend sa place dans le flux, juste sous le titre : les vagues accompagnent les titres au lieu d'attendre en bas de page. */ .mecanisme{ position:static; transform:none; width:100%; height:clamp(200px,30vw,330px); aspect-ratio:auto; margin:clamp(6px,2vw,18px) 0 clamp(18px,4vw,30px); opacity:.95; } } @media (max-width:900px){ .contact-grille{grid-template-columns:1fr} } @media (max-width:760px){ .nav{display:none} .burger{display:flex} .nav-mobile[hidden]{display:none} .nav-mobile:not([hidden]){display:flex} .champ-duo{grid-template-columns:1fr} .hero{min-height:auto; padding-top:52px} } /* Le mouvement doit pouvoir s'arrêter : certaines personnes en ont besoin. */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important} [data-anim]{opacity:1; transform:none} } /* ---------- Carrousel ---------- Rythme demandé : la diapositive centrale reste 5 s, puis la piste se translate pendant 3 s. Le cycle complet fait donc 8 s. Les deux durées sont déclarées ici et lues par le script, pour qu'il n'y ait qu'un seul endroit à modifier. */ .carrousel{ --pause:3000ms; --glisse:3000ms; /* Fenêtre étroite : la cellule centrale domine, les voisines ne montrent qu'un fin bord. */ position:relative; max-width:820px; margin:0 auto; } /* La scène porte les flèches : elles se centrent sur les vignettes, pas sur l'ensemble légende et puces comprises. */ .carr-scene{position:relative} .carr-fenetre{overflow:hidden; padding:10px 0 6px} .carr-piste{ display:flex; align-items:center; gap:20px; will-change:transform; transition:transform var(--glisse) cubic-bezier(.42,0,.22,1); } .diapo{ /* Large et bornée en hauteur : l'ensemble tient dans une demi-page. */ position:relative; flex:0 0 auto; width:min(700px,86vw); margin:0; background:var(--fond3); border:1px solid var(--trait); border-radius:18px; overflow:hidden; transform:scale(.92); transition:transform var(--glisse) cubic-bezier(.42,0,.22,1), border-color var(--glisse) ease, box-shadow var(--glisse) ease; } /* Plus de voile : une seule vignette est visible a la fois, il n'y a plus de voisines a estomper. Les deux fines bandes qu'on apercevait de part et d'autre venaient de la, elles ont disparu avec le chevauchement. */ .diapo.centre{ transform:scale(1); border-color:#cbb8a0; box-shadow:0 10px 30px rgba(26,16,22,.12); } .diapo img{display:block; width:100%; aspect-ratio:100/44; object-fit:cover; max-height:40vh} .diapo figcaption{ padding:15px 20px 17px; font-weight:600; font-size:1rem; border-top:1px solid var(--trait); } .diapo .diapo-sous{display:block; font-weight:400; font-size:.87rem; color:var(--mut); margin-top:3px} .carr-fleche{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:46px; height:46px; border-radius:50%; cursor:pointer; background:var(--fond); border:1px solid var(--trait); color:var(--accent); display:flex; align-items:center; justify-content:center; transition:background var(--tr), border-color var(--tr), color var(--tr); } .carr-fleche:hover{background:var(--accent); border-color:var(--accent); color:#fff} .carr-fleche svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round} .carr-prec{left:-6px} .carr-suiv{right:-6px} .carr-legende{ text-align:center; margin:16px 0 0; min-height:1.5em; color:var(--mut); font-size:.93rem; } .carr-points{display:flex; justify-content:center; gap:2px; margin-top:4px; flex-wrap:wrap} .carr-point{ position:relative; width:26px; height:44px; padding:0; cursor:pointer; border:0; background:transparent; } .carr-point::before{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:9px; height:9px; border-radius:50%; border:1px solid var(--accent); background:transparent; transition:background var(--tr), width var(--tr); } .carr-point[aria-selected="true"]::before{background:var(--accent); width:22px; border-radius:999px} /* Une seule vignette, entière, à toutes les largeurs. La version précédente laissait les voisines dépasser de part et d'autre (largeur 90% plus une gouttière de 16px), ce qui donnait trois moitiés illisibles sur 390px et un débordement horizontal de la page. */ @media (max-width:1200px){ .carr-fenetre{overflow:hidden; padding:8px 0 6px} .carr-piste{gap:0} /* La largeur est posée en pixels par le script, depuis la largeur réelle de la fenêtre. Un flex-basis en pourcentage se résout contre la taille du conteneur flex, laquelle dépend de son contenu : la circularité se résolvait différemment selon le contexte de rendu, et la vignette centrée n'était plus celle qu'annonçait la légende. */ .diapo{width:var(--l-diapo,100%); flex:0 0 var(--l-diapo,100%); transform:none} .diapo.centre{transform:none} .hero-carrousel .diapo{width:var(--l-diapo,100%)} .carr-fleche{width:44px; height:44px; background:rgba(255,255,255,.94)} .carr-prec{left:6px} .carr-suiv{right:6px} } /* Bouton d'arrêt du défilement. Un arrêt implicite au survol ne suffit pas : au doigt, il n'y a pas de survol, et il faut pouvoir le dire explicitement. */ .carr-outils{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:10px} .carr-pause{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; min-height:44px; padding:8px 16px; border-radius:999px; background:transparent; border:1px solid var(--trait); color:var(--mut); font:inherit; font-size:.86rem; transition:border-color var(--tr), color var(--tr); } .carr-pause:hover{border-color:var(--accent); color:var(--accent)} .carr-pause svg{width:15px; height:15px; fill:currentColor} .carr-pause .icone-lecture{display:none} .carr-pause[aria-pressed="true"] .icone-lecture{display:block} .carr-pause[aria-pressed="true"] .icone-pause{display:none} /* Sans mouvement : on empile, plus de translation ni de défilement automatique. */ @media (prefers-reduced-motion:reduce){ .carr-piste{flex-wrap:wrap; justify-content:center; transform:none !important} .diapo{transform:none; width:min(340px,86vw)} .diapo::after{display:none} /* Ne montrer qu'un seul exemplaire : les copies servent au défilement infini. */ .diapo[aria-hidden="true"]{display:none} .carr-fleche, .carr-points{display:none} } /* ---------- Pages secondaires (404, retour de formulaire) ---------- Ces règles existent pour qu'aucune page n'ait besoin d'attribut style : la politique de sécurité du contenu peut alors refuser 'unsafe-inline'. */ .page-simple{max-width:640px; margin:0 auto; min-height:70vh} .page-simple h1{font-size:clamp(1.9rem,4vw,2.8rem)} .page-simple .actions{margin-top:26px; display:flex; flex-wrap:wrap; gap:12px} /* ---------- Pages légales ---------- */ .legal{max-width:800px; margin:0 auto} .legal h1{font-size:clamp(1.9rem,4vw,2.7rem)} .legal h2{font-size:1.24rem; margin-top:2em} .legal p, .legal li{color:var(--mut)} .legal strong{color:var(--texte)} .legal a{color:var(--accent)} .legal .puces{margin:12px 0 0} .legal-maj{font-size:.85rem; margin-top:2.4em} .tbl-legal{width:100%; border-collapse:collapse; margin:14px 0 0; font-size:.92rem} .tbl-legal th, .tbl-legal td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--trait); vertical-align:top; } .tbl-legal th{color:var(--texte); font-weight:600; white-space:nowrap} .tbl-legal td{color:var(--mut)} .tbl-wrap{overflow-x:auto} /* ================================================================ CHARTE VISUELLE (Images/Fond/5.png) — accents de couleur partout ================================================================ */ /* Séparateur : un ruban multicolore fin entre les grandes sections. */ .ruban-sep{ height:5px; border:0; margin:0; background:linear-gradient(90deg, var(--ruban-1) 0%, var(--ruban-2) 20%, var(--ruban-3) 40%, var(--ruban-4) 60%, var(--ruban-5) 80%, var(--ruban-6) 100%); opacity:.9; } /* La section sombre reçoit un lavis des couleurs du visuel, très estompé, plus les traits verticaux fins qu'on retrouve sur l'image source. */ .section-sombre{ position:relative; overflow:hidden; background: linear-gradient(120deg, rgba(190,15,25,.05), transparent 30%), linear-gradient(300deg, rgba(18,112,172,.05), transparent 34%), radial-gradient(60% 80% at 82% 20%, rgba(214,152,12,.07), transparent 60%), var(--fond2); } .section-sombre::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image:repeating-linear-gradient(90deg, rgba(42,36,24,.08) 0 1px, transparent 1px 34px); -webkit-mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); } .section-sombre > *{position:relative} /* Les surtitres prennent la couleur d'un ruban, différente à chaque section, pour dérouler la palette au fil de la page. */ #savoirfaire .surtitre{color:var(--ruban-1)} #domaines .surtitre{color:var(--ruban-3)} #secteurs .surtitre{color:var(--ruban-4)} #methode .surtitre{color:var(--ruban-6)} #contact .surtitre{color:var(--ruban-2)} #partenaires .surtitre{color:var(--ruban-3)} /* Les étapes de la méthode : un cercle numéroté par couleur de ruban. */ .etapes li:nth-child(1) .etape-n{border-color:var(--ruban-1); color:var(--ruban-1)} .etapes li:nth-child(2) .etape-n{border-color:var(--ruban-6); color:var(--ruban-6)} .etapes li:nth-child(3) .etape-n{border-color:var(--ruban-3); color:var(--ruban-3)} .etapes li:nth-child(4) .etape-n{border-color:var(--ruban-4); color:var(--ruban-4)} /* Les secteurs : liseré haut coloré, qui se révèle au survol. */ .secteur{position:relative; overflow:hidden} .secteur::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; transform:scaleX(0); transform-origin:left; transition:transform var(--tr); background:var(--tsecteur, var(--accent)); } .secteur:hover::before{transform:scaleX(1)} .secteurs .secteur:nth-child(1){--tsecteur:var(--ruban-1)} .secteurs .secteur:nth-child(2){--tsecteur:var(--ruban-6)} .secteurs .secteur:nth-child(3){--tsecteur:var(--ruban-3)} .secteurs .secteur:nth-child(4){--tsecteur:var(--ruban-4)} .secteurs .secteur:nth-child(5){--tsecteur:var(--ruban-3)} .secteurs .secteur:nth-child(6){--tsecteur:var(--ruban-2)} .secteur:hover .ico{stroke:var(--tsecteur)} .secteur:hover .ico .plein{fill:var(--tsecteur)} /* Les puces de la marque (hero-tags) : petit point de couleur en tête. */ .hero-tags li{position:relative; padding-left:24px} .hero-tags li::before{ content:""; position:absolute; left:11px; top:50%; transform:translateY(-50%); width:7px; height:7px; border-radius:50%; } .hero-tags li:nth-child(1)::before{background:var(--ruban-1)} .hero-tags li:nth-child(2)::before{background:var(--ruban-3)} .hero-tags li:nth-child(3)::before{background:var(--ruban-4)} .hero-tags li:nth-child(4)::before{background:var(--ruban-5)} /* Le pied de page : un filet de ruban en haut, comme signature. */ .pied{position:relative} .pied::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--ruban-1), var(--ruban-6), var(--ruban-5), var(--ruban-4), var(--ruban-4), var(--ruban-3), var(--ruban-3), var(--ruban-2), var(--ruban-2)); } /* Le bouton plein : un dégradé bordeaux vers framboise plutôt qu'un aplat. */ .btn-plein{background:linear-gradient(120deg, var(--accent), var(--ruban-2)); color:#fff} .btn-plein:hover{background:linear-gradient(120deg, var(--ruban-2), var(--ruban-1))} /* ---------- Piliers du hero : les quatre mots en gros ---------- */ /* ---------- Les six piliers, en escalier montant sur un circuit ---------- */ /* Le padding bas loge la boucle de retour du circuit, qui passe sous la ligne de base : sans lui elle mordrait sur le carrousel. */ .piliers-zone{position:relative; margin:0 0 26px; padding-bottom:34px} /* En grand ecran la colonne de texte est bridee a 660px pour laisser le champ au mecanisme. Les piliers, eux, ont besoin de largeur : sans quoi il faut les redresser presque a la verticale ou reduire le texte des deux tiers. On les laisse donc deborder de la colonne, par-dessus le decor. */ @media (min-width:1201px){ .piliers-zone{width:min(880px, calc(100vw - 330px))} } /* La piste est tracee par le script, en coordonnees pixel du bloc. overflow visible : la boucle de retour passe volontairement sous la ligne de base. */ .piliers-circuit{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; } .piliers-circuit .piste{fill:none; stroke:var(--trait); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round} .piliers-circuit .piste-vive{fill:none; stroke:var(--vert-logo); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; opacity:.85} .piliers-circuit .noeud{fill:var(--fond); stroke:var(--trait); stroke-width:1.6} /* La bille et ses deux enveloppes : un noyau blanc, un halo net, puis une aura large en dégradé. L'aura est un dégradé radial et non un flou : un filtre SVG serait recalculé à chaque image. */ .piliers-circuit .bille{fill:#fff} .piliers-circuit .halo{fill:var(--vert-logo); opacity:.8} .piliers-circuit .aura{opacity:.95} /* Les piliers sont posés par le script, en absolu : un texte tourné garde sa largeur d'avant rotation dans le flux, donc six mots obliques mis côte à côte par flex se chevauchent. Le script mesure la largeur PROJETÉE de chacun et enchaîne les positions lui-même. Tant qu'il n'a pas tourné, la liste reste une liste lisible. */ .hero-piliers{ position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 18px; font-weight:700; letter-spacing:.01em; font-size:clamp(.85rem, 1.2vw, .97rem); } /* Chaque pilier vit dans son boudin : la pastille reprend sa teinte en contour, le fond reste clair pour que le mot garde son contraste. */ .hero-piliers li{ position:relative; white-space:nowrap; padding:.42em 1.05em; border-radius:999px; border:1.5px solid currentColor; background:rgba(255,255,255,.66); transition:color var(--tr), background var(--tr), border-color var(--tr), text-shadow var(--tr), box-shadow var(--tr); } /* Mode oblique, activé par le script une fois les positions calculées. */ .hero-piliers.en-barres{display:block; gap:0} .hero-piliers.en-barres li{ position:absolute; left:0; bottom:0; transform-origin:left bottom; transform:translate(var(--x), var(--y)) rotate(var(--angle)); } .hero-piliers li:nth-child(1){color:var(--ruban-3)} .hero-piliers li:nth-child(2){color:var(--ruban-1)} .hero-piliers li:nth-child(3){color:var(--ruban-4)} .hero-piliers li:nth-child(4){color:var(--ruban-2)} /* Les six piliers reprennent les six couleurs de roues, une chacune. L'or de SEO/GEO est celle du savoir-faire 05, "Visibilité : SEO, GEO, ASO" : le pilier et la carte se répondent. */ .hero-piliers li:nth-child(5){color:var(--ruban-6)} .hero-piliers li:nth-child(6){color:var(--ruban-5)} /* ---- Téléphone : deux lignes de trois, et pas trois lignes ---- L'ordre d'affichage est réarrangé pour équilibrer les longueurs. On ne touche pas au DOM : l'ordre de lecture, celui du circuit en grand écran et l'attribution des couleurs par :nth-child restent ceux du HTML. Le resserrement est nécessaire en plus du réordonnancement : à 390px, la ligne la plus lourde mesurait 355px pour 343 disponibles. */ @media (max-width:560px){ /* Tout le bloc du heros est centre : le titre etait cale a gauche et ne remplissait pas la colonne, ce qui le faisait pencher des que les boudins sont passes au centre. Le carrousel garde son alignement propre. */ .hero-txt{text-align:center} .hero-btn{justify-content:center} .hero-carrousel{margin-left:auto; margin-right:auto} .hero-piliers{ gap:9px 8px; font-size:clamp(.78rem, 3.1vw, .92rem); align-items:center; /* Les deux lignes n'ont pas la meme largeur : alignees a gauche, le bloc paraissait bancal. Centrees, les deux rangees se repondent. */ justify-content:center; } .hero-piliers li{padding:.4em .7em} .hero-piliers li:nth-child(5){order:1} /* Site Web */ .hero-piliers li:nth-child(2){order:2} /* Cybersécurité */ .hero-piliers li:nth-child(4){order:3} /* Souveraineté */ .hero-piliers li:nth-child(6){order:4} /* Référencement */ .hero-piliers li:nth-child(1){order:5} /* IA */ .hero-piliers li:nth-child(3){order:6} /* Post-quantique */ } /* Très petits écrans (iPhone SE et assimilés) : la ligne la plus lourde dépassait encore de 28px. On resserre d'un cran de plus plutôt que de laisser filer une troisième ligne. */ @media (max-width:359px){ .hero-piliers{gap:7px 6px; font-size:.72rem} .hero-piliers li{padding:.38em .55em; border-width:1.2px} } /* Le passage du courant. Ce bloc vient APRES les :nth-child de couleur : ils ont la meme specificite, donc c'est l'ordre du fichier qui tranche. Place avant, la teinte du savoir-faire reprenait le dessus et le mot n'eclairait pas. Le blanc seul se perdrait sur l'ivoire : l'ombre sombre le detache, le halo vert fait le reste. L'etat est transitoire, la couleur revient des que la bille est passee. */ .hero-piliers li.sous-tension{ color:#fff; background:var(--vert-profond); border-color:var(--vert-logo); text-shadow: 0 1px 2px rgba(12,32,18,.95), 0 0 9px rgba(142,252,146,.95), 0 0 20px rgba(142,252,146,.7); /* Le halo du boudin : un anneau net, puis deux nappes de plus en plus larges. C'est ce qui donne l'impression que le courant vient d'arriver. */ box-shadow: 0 0 0 2px rgba(142,252,146,.55), 0 0 16px rgba(142,252,146,.9), 0 0 34px rgba(142,252,146,.6), 0 0 66px rgba(142,252,146,.34); } /* Plus de point de separation : c'est la piste du circuit qui relie les piliers entre eux, un point de plus ferait doublon. */ /* ---------- À propos ---------- */ .apropos-grille{ max-width:var(--large); margin:0 auto; display:grid; grid-template-columns:minmax(280px,420px) 1fr; gap:clamp(24px,4vw,48px); align-items:start; } /* La photo est montrée ENTIÈRE, dans son cadrage d'origine : on doit voir la Fosse Dionne autant que le portrait. Donc pas d'`object-fit:cover`, qui rognerait, et pas de rapport imposé. */ .apropos-photo{position:relative} .apropos-photo img{ width:100%; height:auto; display:block; border-radius:var(--rayon-lg); box-shadow:0 10px 26px rgba(26,16,22,.16); } /* Orbite de la bille : le fil court sur le bord même de la photo. Le SVG se cale donc exactement sur elle, overflow visible pour que le halo puisse déborder sans être coupé. */ .photo-orbite{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; } .photo-orbite .rail{fill:none; stroke:var(--trait); stroke-width:1.4; opacity:.75} .photo-orbite .sillage{fill:none; stroke:var(--vert-logo); stroke-width:2.6; stroke-linecap:round; opacity:.9} .photo-orbite .aura{opacity:.95} .photo-orbite .halo{fill:var(--vert-logo); opacity:.8} .photo-orbite .bille{fill:#fff} /* Les puces débordaient du paragraphe : elles n'avaient pas sa largeur maximale, donc leurs lignes couraient plus loin que lui. On leur donne la même laize et la même justification, pour que le bloc de texte forme un rectangle net. */ .apropos-points{margin:18px 0 0; display:grid; gap:10px; max-width:var(--laize-texte)} .apropos-points li{position:relative; padding-left:24px; color:var(--mut); font-size:.96rem; text-align:justify; text-justify:inter-word; hyphens:auto; text-wrap:pretty} .apropos-points li::before{ content:""; position:absolute; left:0; top:.5em; width:9px; height:9px; border-radius:50%; background:linear-gradient(120deg, var(--accent), var(--ruban-2)); } .apropos-lien{margin-top:18px} /* Cible autonome, et non un lien en ligne dans une phrase : elle doit offrir une zone d'appui complete de 44 px. */ .apropos-lien a{ display:inline-flex; align-items:center; min-height:44px; padding:2px 0; color:var(--accent); font-weight:600; text-decoration:none; border-bottom:2px solid transparent; transition:border-color var(--tr); } .apropos-lien a:hover{border-bottom-color:var(--accent)} @media (max-width:640px){ .apropos-grille{grid-template-columns:1fr} .apropos-photo img{width:100%; max-width:none} } /* ---------- Partenaires ---------- */ .partenaires{ max-width:var(--large); margin:0 auto; display:grid; gap:18px; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); } /* Chaque partenaire est un carré strictement uniforme (aspect-ratio 1). */ .partenaire{ aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:12px; background:#fff; border:1px solid var(--trait); border-radius:var(--rayon); transition:transform var(--tr), border-color var(--tr), box-shadow var(--tr); } .partenaire:hover{transform:translateY(-4px); border-color:#cbb8a0; box-shadow:0 12px 30px rgba(125,27,46,.10)} /* Logo cliquable : le lien remplit et centre toute la carte. */ .part-lien{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:100%; height:100%; text-decoration:none} .part-nom{font-weight:700; font-size:1.02rem; letter-spacing:.01em; color:var(--texte); line-height:1.2; hyphens:auto} .part-sous{font-size:.78rem; color:var(--mut); font-weight:500} /* Quand un vrai logo remplace le texte : il reste contenu dans le carré. */ .part-logo{max-width:90%; max-height:74%; object-fit:contain; display:block} /* LONATO : logo haut, on le laisse prendre plus de place. */ .part-logo-lonato{max-width:84%; max-height:96%} /* Lyon 1 : « Claude Bernard » doit rester lisible. */ .part-logo-lyon1{max-width:94%; max-height:92%} /* Logos larges qu'on pousse davantage. */ .part-logo-bourso{max-width:98%; max-height:80%} .part-logo-evry{max-width:97%; max-height:88%} /* Carte ERM : icône + le nom « ERM » dans la police de leur site. */ .part-logo-erm{max-width:72%; max-height:60%} .part-erm{font-family:"Space Grotesk","Inter",sans-serif; letter-spacing:.01em} /* ---------- FAQ ---------- */ /* Meme laize que l'en-tete de section : les questions etaient centrees dans la page alors que le titre restait a gauche, les deux blocs ne s'alignaient pas. Les items gardent leur largeur de lecture. */ .faq{max-width:var(--large); margin:0 auto; display:grid; gap:12px; justify-items:start} .faq-item{ width:100%; max-width:820px; background:var(--fond); border:1px solid var(--trait); border-radius:14px; overflow:hidden; transition:border-color var(--tr); } .faq-item[open]{border-color:#cbb8a0} .faq-item summary{ cursor:pointer; padding:18px 22px; font-weight:600; font-size:1.02rem; list-style:none; position:relative; padding-right:52px; } .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{ content:""; position:absolute; right:22px; top:50%; width:12px; height:12px; margin-top:-6px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg); transition:transform var(--tr); } .faq-item[open] summary::after{transform:rotate(-135deg)} .faq-item summary:hover{color:var(--accent)} .faq-rep{padding:0 22px 20px} .faq-rep p{color:var(--mut); margin:0} /* ---------- Diapositive vidéo (réalisation) ---------- */ .diapo-video .diapo-play{ display:block; width:100%; padding:0; border:0; cursor:pointer; background:none; position:relative; line-height:0; } .diapo-video img{aspect-ratio:88/56; object-fit:cover} .play-badge{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; background:linear-gradient(120deg, var(--accent), var(--ruban-2)); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(93,17,34,.45); transition:transform var(--tr); } .diapo-video .diapo-play:hover .play-badge{transform:translate(-50%,-50%) scale(1.1)} .play-badge svg{width:26px; height:26px; fill:#fff; margin-left:3px} .diapo-ruban{ position:absolute; top:12px; left:12px; z-index:2; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; padding:5px 11px; border-radius:999px; background:linear-gradient(90deg, var(--ruban-1), var(--ruban-6)); } /* ---------- Fenêtre de lecture ---------- */ .video-modale{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(26,20,10,.86); backdrop-filter:blur(4px); } .video-modale.on{display:flex} .video-cadre{position:relative; width:min(1000px,94vw)} .video-cadre video{ width:100%; max-height:80vh; border-radius:14px; display:block; background:#000; box-shadow:0 24px 60px rgba(0,0,0,.5); } .video-titre{ color:var(--fond); font-weight:600; margin:0 0 12px; font-size:1.05rem; } .video-fermer{ position:absolute; top:-14px; right:-14px; z-index:2; width:44px; height:44px; border-radius:50%; cursor:pointer; background:var(--fond); border:1px solid var(--trait); color:var(--accent); display:flex; align-items:center; justify-content:center; transition:background var(--tr), color var(--tr); } .video-fermer:hover{background:var(--accent); color:#fff} .video-fermer svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round} @media (max-width:640px){ .video-fermer{top:-10px; right:-6px; width:40px; height:40px} } /* ---------- Carrousel remonté et compact ---------- La section des domaines colle à son titre et ne prend qu'une demi-page : on voit surtout la cellule centrale, avec un fin bord des voisines. */ #domaines{padding-top:clamp(34px,4vw,54px); padding-bottom:clamp(40px,5vw,64px)} #domaines .entete-sec{margin-bottom:clamp(16px,2.4vw,26px)} /* ================================================================ HERO REMANIÉ : titre sur une ligne, carrousel dans la colonne gauche ================================================================ */ /* Marge du haut réduite d'environ 20 %. */ .hero{padding-top:clamp(48px,8vh,96px)} /* Titre resserré pour tenir sur une seule ligne sur grand écran. */ .hero-titre{font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.15; margin-bottom:.55em} .hero-piliers{margin-bottom:22px} /* Le carrousel vit dans la colonne gauche : il ne prend pas toute la largeur. */ .hero-carrousel{max-width:min(640px,100%); margin:0 0 26px} .hero-carrousel .carr-fenetre{padding:6px 0 4px} .hero-carrousel .diapo img{aspect-ratio:100/50; max-height:32vh} /* Les voisines entrevues n'ont de sens qu'a partir du moment ou il reste de la place autour de la vignette centrale. Sous 900px il n'y en a plus : trois moities valent moins qu'une vignette entiere. */ /* Au-dela de 1200px le mecanisme reprend sa place a droite du titre. Le carrousel se borne alors pour lui laisser le champ : deux blocs qui se disputent la meme largeur finissent toujours par se superposer. */ @media (min-width:1201px){ .hero-carrousel{max-width:520px} } .hero-carrousel .diapo figcaption{padding:11px 16px 13px; font-size:.92rem} .hero-carrousel .diapo .diapo-sous{font-size:.8rem} /* Les fleches restent dans le cadre : sans voisines a deborder, rien ne justifie qu'elles mordent sur l'exterieur. */ .hero-carrousel .carr-prec{left:6px} .hero-carrousel .carr-suiv{right:6px} .hero-carrousel .carr-legende{font-size:.82rem; margin-top:10px} .hero-carrousel .carr-points{margin-top:8px} /* Diapositive de texte : l'ancien chapeau, mis en carte. */ .diapo-texte{display:flex; align-items:center; min-height:210px; background:var(--fond3) url("visuels/intro.svg?v=10") right center / cover no-repeat} /* Voile depuis la gauche : le texte reste lisible, la boussole apparaît à droite. */ .diapo-texte-in{width:63%; padding:22px 10px 22px 26px; background:linear-gradient(100deg, rgba(249,248,242,.97) 82%, rgba(249,248,242,.7) 100%)} .diapo-texte-sur{color:var(--accent); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; margin:0 0 10px} .diapo-texte-corps{color:var(--texte); font-size:.98rem; line-height:1.5; margin:0; text-indent:1.6em; hyphens:none} /* ---------- Une seule vignette, a toutes les largeurs ---------- */ /* Ces trois regles closent la feuille a dessein. Une media query n'ajoute aucune specificite : seul l'ordre departage. Les poser ici garantit qu'une declaration anterieure, comme la largeur de 700 px heritee du carrousel a voisines entrevues, ne puisse plus tronquer la cellule. La largeur exacte est posee en pixels par le script, depuis la largeur reelle de la fenetre du carrousel. */ .diapo{width:var(--l-diapo,100%); flex:0 0 var(--l-diapo,100%)} .hero-carrousel .diapo{width:var(--l-diapo,100%); flex:0 0 var(--l-diapo,100%)} .carr-piste{gap:0} /* ============================================================ Panneaux de domaine : les six lampes sont de vrais boutons ------------------------------------------------------------ Les testeurs prenaient les boudins pour des boutons et attendaient une reaction. Ce sont donc des