/* ---------- 0. REMISE A ZERO ------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} /* ---------- 2. JETONS DE DESIGN ------------------------------------------ */ :root{ --blue:#143384; --blue-900:#0A1B4C; --blue-800:#102A6E; --blue-600:#2B54B8; --blue-50:#EFF3FD; --green:#5ED167; --green-600:#3FB44B; --green-ink:#0F7A31; --green-50:#EDFAEF; --orange:#FC914A; --orange-ink:#C2410C; --orange-50:#FFF3EA; --body:#39415C; --muted:#69739A; --line:#E3E8F4; --soft:#F5F7FC; --r-md:16px; --r-lg:24px; --r-xl:32px; /* Mesure de lecture unique. En deca de ~50 caracteres l'oeil saute trop souvent a la ligne, au-dela de ~75 il perd le debut de la suivante. */ --measure:65ch; --shadow-m:0 4px 12px rgba(15,32,80,.07),0 22px 48px rgba(15,32,80,.10); --pad:20px; --sec:36px; color:var(--body);font-size:16px;line-height:1.65; } html{scroll-behavior:smooth} body{margin:0;background:var(--bg,#fff);color:var(--body);font-size:16px;line-height:1.65; font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} @media (min-width:760px){:root{--pad:36px;--sec:44px}} @media (min-width:1120px){:root{--pad:48px;--sec:48px}} h1,h2,h3,h4{color:var(--blue);font-weight:700; line-height:1.16;letter-spacing:-.022em;margin:0; /* Repartit les mots sur des lignes de longueur voisine : evite le titre large suivi d'une ligne d'un seul mot, principale source de desordre. */ text-wrap:balance} /* ---------- EQUILIBRAGE DES LIGNES -------------------------------------- Le bord droit en dents de scie vient de lignes de longueurs tres inegales. « balance » repartit les mots pour que toutes les lignes d'un bloc fassent a peu pres la meme longueur, derniere ligne comprise. Pourquoi pas « text-align: justify », qui alignerait les deux bords au pixel pres : mesure faite sur ce site, sans cesure l'espace mot y passe a 2,8x sa largeur naturelle, ce qui creuse des rivieres blanches verticales. Et la cesure automatique ne peut pas etre garantie : elle depend d'un dictionnaire fourni par le systeme du visiteur, absent de certaines versions de Chrome. La justification aurait par ailleurs laisse la derniere ligne courte, donc sans effet sur le defaut visé. « balance » n'a aucun effet sur l'espacement : il ne deplace que les points de coupure. La ou le navigateur ne peut pas l'appliquer — blocs tres longs — le rendu reste celui d'avant, jamais moins bon. */ p,li, /* Les listes a puce cochee sont des conteneurs flex : leur texte vit dans un enfant, seul element sur lequel l'equilibrage puisse porter. */ .checks li span{text-wrap:balance} /* Cesure automatique. Elle s'appuie sur et sur un dictionnaire fourni par le systeme : la ou il manque, le texte reste simplement non cesure. Le gain porte surtout sur les colonnes etroites — cartes et affichage mobile — ou un mot long impose sinon une ligne presque vide. Bride a trois lettres minimum de part et d'autre. */ p,li,.lede,.checks li span{ -webkit-hyphens:auto;hyphens:auto; -webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3; hyphenate-limit-chars:6 3 3} /* Jamais dans un titre : une coupure y est trop visible. */ h1,h2,h3,h4{-webkit-hyphens:manual;hyphens:manual} p{margin:0} img{max-width:100%;height:auto;display:block} a{color:var(--blue);text-decoration:none} ul,ol{margin:0;padding:0;list-style:none} :focus-visible{outline:3px solid var(--green-600);outline-offset:3px;border-radius:8px} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;transition-duration:.01ms!important} } /* ---------- 3. COMPOSANTS ------------------------------------------------ */ .wrap{width:100%;max-width:1340px;margin-inline:auto;padding-inline:var(--pad)} .sec{padding-block:var(--sec)} /* ---------- RYTHME INTERNE D'UNE SECTION --------------------------------- L'enchainement sur-titre, titre, chapeau, contenu se repetait sur 54 sections avec des marges posees une a une dans le balisage, et cinq valeurs differentes pour le meme rapport. D'ou une impression de desequilibre d'une section a l'autre. Le rapport est desormais decrit une seule fois. La portee est limitee aux enfants directs de .wrap : dans les blocs .stack, qui sont des conteneurs flex, l'espacement vient de leur propriete gap et une marge s'y ajouterait au lieu de s'y substituer. */ .wrap:not(.stack)>.eyebrow+h2,.wrap:not(.stack)>.eyebrow+h3, /* Le meme rapport partout ou il se presente : bandeau sombre, encart d'appel, colonne d'une mise en page en deux parties. */ .dark-head>div>.eyebrow+h2,.phead .in>.eyebrow+h1, .band>div>.eyebrow+h2,.band>div>.eyebrow+h3, .cta-band>.eyebrow+h2,.split>div>.eyebrow+h2{margin-top:14px} .wrap:not(.stack)>h2+p,.wrap:not(.stack)>h3+p, .band>div>h2+p,.band>div>h3+p,.cta-band>h2+p, .split>div>h2+p,.dark-head>div>h2+p{margin-top:12px} /* Deux paragraphes qui se suivent dans un meme .wrap : sans marge, ils se soudent en un seul pave, et le lecteur perd l'articulation du propos. Le pas est celui du rapport titre / paragraphe ci-dessus. Sans portee dans les .stack et les cartes, qui espacent deja leurs enfants par gap. */ .wrap:not(.stack)>p+p{margin-top:12px} .wrap:not(.stack)>*+.grid,.wrap:not(.stack)>*+.sect-grid, .wrap:not(.stack)>*+.tbl,.wrap:not(.stack)>*+.faq{margin-top:28px} .wrap:not(.stack)>*+.btns{margin-top:26px} /* Un .wrap qui est lui-meme un .stack espace ses enfants par sa gouttiere. Elle vaut le meme pas que la regle ci-dessus, pour un resultat identique d'une section a l'autre. */ .wrap.stack{gap:28px} .sec.soft{background:var(--soft)} /* Bandeau teinte, borde en haut et en bas : contrairement a .sec.soft, la bordure garantit une separation visible meme accolee a une autre section de fond clair (page Transport, sommaire des solutions). */ .sec.tinted{background:#F4F7FC;border-block:1px solid var(--line)} /* Gouttiere unique pour tous les blocs empiles : elle etait posee au cas par cas dans le balisage, avec trois valeurs pour un meme usage. */ .stack{display:flex;flex-direction:column;gap:18px} /* Le sur-titre se distingue par sa graisse, sa casse et son interlettrage. Le petit trait vert qui le precedait a ete retire : purement decoratif, il n'apportait aucune information et se lisait comme un tic de mise en page. Les chevrons du menu et de la FAQ sont conserves : eux indiquent une action possible. */ /* Les sur-titres sont composes en Space Grotesk, la seule exception a Poppins sur le site. Son dessin plus resserre et un peu anguleux tient mieux en capitales espacees de petit corps. Un seul poids charge, et un repli sur Poppins tant que le fichier n'est pas arrive. */ .eyebrow{display:inline-flex;align-items:center; font-family:'Space Grotesk','Poppins',system-ui,sans-serif; font-size:12px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--green-ink)} .eyebrow.light{color:#A6EBAE} .h-xl{font-size:clamp(31px,7vw,66px);line-height:1.05;letter-spacing:-.035em} .h-lg{font-size:clamp(25px,4.1vw,43px);letter-spacing:-.03em} .h-md{font-size:clamp(19px,2.3vw,26px)} /* Chapeau seul sous un titre de section (.lede, .phead p) : sans colonne voisine a border, il n'a aucune raison de rester plafonne a une largeur fixe en caracteres (ch), qui ne suit pas celle du conteneur — plus l'ecran s'elargit, plus l'ecart entre les deux se creuse, jusqu'a laisser le texte cale a gauche avec un vide manifeste a droite. La largeur suit desormais celle du conteneur (.wrap ou .stack), en pourcentage. En dessous de 760px il n'y a pas de marge a economiser : le texte garde 100 % de la largeur disponible, sans media query dediee. */ .lede{font-size:clamp(15px,1.3vw,18px)} @media (min-width:760px){.lede{max-width:95%}} /* Variante utilisee sur les pages secteurs : le chapeau y introduit un long developpement (listes, tableaux), pas un simple sous-titre. Le plafonner a 95 % laissait un vide net a droite sur grand ecran, avec l'air d'une colonne etroite collee a gauche. */ .lede.wide{max-width:none} /* Dans une mise en page a deux colonnes (.split), la grille borne deja le texte a la largeur de sa colonne : une limite supplementaire ici ferait revenir le probleme inverse, une colonne de texte qui n'atteint plus le bord de la sienne. */ .split .lede{max-width:none} .small{font-size:14px;color:var(--muted)} .on-dark,.on-dark p,.on-dark li{color:#D3DBF0} .on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff} .accent{color:var(--orange-ink)} .accent-d{color:var(--orange)} .txt-green{color:var(--green)} /* Boutons — fond vert, texte bleu (charte) */ .btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:8px 8px 8px 24px; border:0;border-radius:999px;background:var(--green);color:var(--blue);cursor:pointer; font:600 15px/1.25 'Poppins',sans-serif; transition:background .2s,color .2s,transform .2s,box-shadow .2s} .btn .bdg{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;flex:none; background:#0D2260;color:#fff;transition:transform .28s cubic-bezier(.2,.8,.25,1),background .2s} .btn .bdg svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round} .btn:hover{background:var(--green-600);color:#fff;box-shadow:0 10px 26px rgba(63,180,75,.34)} .btn:hover .bdg{transform:translate(2px,-2px)} .btn:active{transform:translateY(1px)} .btn.ghost{background:transparent;color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--line);padding-left:22px} .btn.ghost .bdg{background:var(--blue-50);color:var(--blue)} .btn.ghost:hover{background:var(--blue-50);color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue-600)} .btn.ghost.light{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)} .btn.ghost.light .bdg{background:rgba(255,255,255,.16);color:#fff} .btn.ghost.light:hover{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)} .btn.sm{min-height:44px;font-size:14px;padding-left:19px} .btn.sm .bdg{width:30px;height:30px} .btn.sm .bdg svg{width:14px;height:14px} .btns{display:flex;flex-wrap:wrap;gap:12px} .pill{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px; background:var(--blue-50);color:var(--blue);font-size:12.5px;font-weight:600;line-height:1.35} .pill.light{background:rgba(255,255,255,.14);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .pill.green{background:var(--green-50);color:var(--green-ink)} .pill svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;flex:none; background:var(--green-50);color:var(--green-ink)} .ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .ico.blue{background:var(--blue-50);color:var(--blue)} .ico.dark{background:rgba(255,255,255,.13);color:#9FE8A7} /* Pastille portant un chiffre plutot qu'une icone : les etapes d'un accompagnement se lisent mieux numerotees. */ .ico.num{font-size:19px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums} .ico.lg{width:56px;height:56px;border-radius:17px} .ico.lg svg{width:27px;height:27px} .card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px; transition:border-color .25s,box-shadow .25s,transform .25s} .card:hover{border-color:#C8D6F3;box-shadow:var(--shadow-m);transform:translateY(-3px)} .card h3{margin-bottom:8px} .card .ico{margin-bottom:18px} .card.dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)} .card.dark:hover{border-color:rgba(159,232,167,.5);background:rgba(255,255,255,.09)} .grid{display:grid;gap:18px} @media (min-width:620px){.g2{grid-template-columns:repeat(2,1fr)}.g4{grid-template-columns:repeat(2,1fr)}.g6{grid-template-columns:repeat(2,1fr)}} @media (min-width:900px){.g3{grid-template-columns:repeat(3,1fr)}} @media (min-width:1120px){.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}.g6{grid-template-columns:repeat(3,1fr)}} /* L'etat visible est declare explicitement : si l'animation ne s'execute pas (onglet en arriere-plan, moteur bride), le contenu reste affiche. */ .reveal{opacity:0;transform:translateY(20px)} .reveal.is-in{opacity:1;transform:none;animation:rise 1.5s cubic-bezier(.22,.8,.3,1) backwards} @keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}} /* ---------- 4. EN-TETE --------------------------------------------------- */ .hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92); -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line)} .hdr-in{display:flex;align-items:center;gap:16px;min-height:102px;padding-block:10px} .logo{display:flex;align-items:center;gap:10px;flex:none} .logo img{height:64px;width:auto} .nav{display:none} .nav ul{display:flex;align-items:center;gap:2px;background:var(--soft);border-radius:999px;padding:5px} .nav a{display:block;padding:9px 15px;border-radius:999px;font-size:14px;font-weight:500;color:#26325A; transition:background .2s,color .2s} /* Les six onglets ne se coupent jamais : un intitule sur deux lignes double la hauteur de la barre. Porte sur les seuls liens de premier niveau — la meme regle sur « .nav a » atteignait aussi les liens du panneau deroulant, dont les descriptions debordaient alors du cadre blanc. */ .nav>ul>li>a{white-space:nowrap} .nav a:hover{background:#fff;color:var(--blue)} .nav a[aria-current="page"]{background:var(--blue);color:#fff} .hdr .btn{display:none} .burger{margin-left:auto;display:grid;place-items:center;width:46px;height:46px;border-radius:14px; border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--blue)} .burger svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round} /* Seuil de la navigation deployee. Le logo (238 px), les six onglets sur une seule ligne (730 px), le bouton (200 px) et les deux gouttieres de 16 px totalisent 1184 px, soit 1301 px de fenetre avec les marges de l'en-tete. En dessous, les intitules se coupaient sur deux ou trois lignes et l'en-tete doublait de hauteur : le menu deroulant prend le relais. Ce seuil suit la largeur du logo : le remonter est la contrepartie de tout nouvel agrandissement. */ @media (min-width:1320px){ .nav{display:block;margin-inline:auto} .hdr .btn{display:inline-flex} .burger{display:none} } /* Menu deroulant : le survol (ou le focus) ouvre le panneau ; le clic sur l'onglet parent conduit toujours a la page « Nos solutions ». */ .nav li{position:relative} .nav .has-sub>a{display:flex;align-items:center;gap:7px} .nav .has-sub>a::after{content:"";width:6px;height:6px;margin-top:-3px;border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;transform:rotate(45deg);transition:transform .22s,margin-top .22s} .nav .has-sub[data-open="true"]>a::after{transform:rotate(225deg);margin-top:2px} .submenu{position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,4px);z-index:70; width:min(700px,86vw);padding:14px;border-radius:var(--r-lg);background:#fff; border:1px solid var(--line);box-shadow:0 12px 28px rgba(15,32,80,.10),0 34px 70px rgba(15,32,80,.16); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .12s ease,transform .12s ease,visibility .12s} .nav .has-sub[data-open="true"] .submenu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)} /* Pont invisible entre le bouton et le panneau : sans lui, l'espace de 14px qui les separe n'appartient a aucun des deux elements, et la souris y « sort » du
  • le temps de le traverser, ce qui referme le menu avant qu'elle n'atteigne le panneau. */ .submenu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px} .submenu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px} /* Intitule de groupe : occupe toute la largeur et separe les familles de secteurs. L'habitat collectif releve des bailleurs, pas des entreprises. */ .submenu-titre{grid-column:1/-1;margin:8px 0 2px;padding:0 13px;font-size:11px;font-weight:600; letter-spacing:.13em;text-transform:uppercase;color:var(--green-ink)} .submenu-titre:first-child{margin-top:2px} .submenu-grid>a{display:flex;align-items:flex-start;gap:12px;padding:12px 13px;border-radius:14px; transition:background .18s} /* Entree seule sous son intitule : elle occupe les deux colonnes, sans quoi la moitie droite de la ligne reste vide et se lit comme un defaut. */ .submenu-grid>a.full{grid-column:1/-1} .submenu-grid>a:hover,.submenu-grid>a:focus-visible{background:var(--soft)} .submenu .si{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px; background:var(--green-50);color:var(--green-ink)} .submenu .si svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .submenu b{display:block;font-size:14px;font-weight:600;color:var(--blue);line-height:1.3} .submenu .d{display:block;font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:3px} .submenu-foot{margin-top:8px;padding-top:12px;border-top:1px solid var(--line)} .submenu-foot a{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;font-size:13.5px; font-weight:600;color:var(--green-ink)} .submenu-foot a:hover{text-decoration:underline} .submenu-foot svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2} .drawer{position:fixed;inset:0;z-index:80;display:none;background:var(--blue-900)} .drawer[data-open="true"]{display:flex;flex-direction:column;animation:fade .25s ease} @keyframes fade{from{opacity:0}to{opacity:1}} .drawer-top{display:flex;align-items:center;justify-content:space-between;padding:16px var(--pad); border-bottom:1px solid rgba(255,255,255,.14)} .drawer-logo{display:flex;align-items:center;flex:none} .drawer-logo img{height:38px;width:auto} .drawer-close{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;cursor:pointer; border:1px solid rgba(255,255,255,.24);background:transparent;color:#fff} .drawer-close svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round} .drawer nav{padding:12px var(--pad) 28px;overflow:auto} .drawer nav a{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:17px 4px;color:#fff;font-size:19px;font-weight:600; border-bottom:1px solid rgba(255,255,255,.1)} .drawer nav a svg{width:18px;height:18px;stroke:var(--green);fill:none;stroke-width:2} .drawer .btn{margin-top:24px;width:100%;justify-content:space-between} .drawer .sub-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%; padding:17px 4px;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.1); color:#fff;font-family:inherit;font-size:19px;font-weight:600;line-height:1.3;text-align:left;cursor:pointer} .drawer .sub-toggle .chev{width:11px;height:11px;flex:none;margin-right:4px;border-right:2px solid var(--green); border-bottom:2px solid var(--green);transform:rotate(45deg);transition:transform .25s} .drawer .sub-toggle[aria-expanded="true"] .chev{transform:rotate(225deg)} .drawer .sub-list{display:none;padding:4px 0 8px} .drawer .sub-list[data-open="true"]{display:block} .drawer .sub-list a{font-size:15.5px;font-weight:500;color:#C7D2F0;padding:13px 4px 13px 18px; border-bottom:1px solid rgba(255,255,255,.07)} .drawer .sub-list a svg{width:15px;height:15px} /* ---------- HERO --------------------------------------------------------- */ .hero{padding:14px var(--pad) 0} .hero-box{position:relative;border-radius:var(--r-xl);overflow:hidden;isolation:isolate; min-height:600px;display:flex;flex-direction:column;justify-content:flex-end; padding:26px 22px 28px;max-width:1340px;margin-inline:auto} .hero-box>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .hero-box::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(10,27,76,.62) 0%,rgba(10,27,76,.34) 26%,rgba(10,27,76,.88) 68%,rgba(10,27,76,.96) 100%)} .hero h1{color:#fff;margin-bottom:20px} .hero-grid{display:flex;flex-direction:column;gap:22px} .hero-side{display:flex;flex-direction:column;gap:20px;max-width:430px} /* Les deux appels a l'action se suivent en colonne, avec des libelles de longueurs differentes : laisses libres, ils donnaient deux largeurs inegales. Ils partagent desormais la meme, la fleche venant se caler au bord droit. */ .hero-side .btns{flex-direction:column;align-items:stretch;max-width:288px} .hero-side .btns .btn{justify-content:space-between} .hero-side p{color:#DCE3F6;font-size:15.5px} /* Le contenu du bloc d'accueil est cale en bas. Augmenter cette marge remonte donc la ligne de pastilles sans deplacer le titre. Elle reste modeste en petit ecran, ou la hauteur est comptee. */ /* Les cinq badges restent tous visibles a chaque largeur, y compris sur mobile : ils s'enchainent puis reviennent proprement a la ligne plutot que d'en masquer une partie. Taille et graisse legerement relevees par rapport a .pill pour rester lisibles sur les petits ecrans, sans toucher au design (fond, flou, couleur) herite de .pill.light. */ .hero-badges{display:flex;flex-wrap:wrap;gap:10px 9px;margin-bottom:22px} .hero-badges .pill{padding:9px 17px;font-size:13.5px;gap:9px;line-height:1.3} .hero-badges .pill svg{width:17px;height:17px} @media (min-width:760px){ .hero{padding-top:20px} .hero-box{min-height:660px;padding:34px 34px 38px} .hero-badges{gap:11px;margin-bottom:52px} } @media (min-width:1060px){ /* 760 px laissaient 265 px de ciel vide au-dessus des pastilles, contre 38 px sous le contenu : composition tres lestee vers le bas. */ .hero-box{min-height:min(700px,74vh)} .hero-badges{margin-bottom:72px} .hero-grid{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px} .hero h1{max-width:14ch;margin-bottom:0} /* Les deux colonnes se calent sur le meme bas. La correction de 6 px qui figurait ici remontait la colonne droite sans raison apparente : le titre, a interligne serree, deborde deja de sa propre boite vers le bas, ce qui accentuait l'ecart au lieu de le corriger. */ .hero-side{padding-bottom:0} } /* ---------- BANDEAU DE CONFIANCE ----------------------------------------- */ .trust{display:flex;flex-direction:column;align-items:center;gap:22px; padding-block:48px;border-bottom:1px solid var(--line);text-align:center} .trust-title{font-family:'Space Grotesk','Poppins',system-ui,sans-serif; font-size:clamp(16px,2.1vw,21px);font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--blue)} /* Piste de defilement : les logos sont domines en deux exemplaires identiques places bout a bout (voir index.njk), et la piste glisse de la largeur d'un exemplaire avant de reboucler — la coupure ne se voit jamais. Le masque en degrade evite un bord nettement tranche au debut et a la fin du bandeau. */ .trust-marquee{width:100%;max-width:960px;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)} .trust-track{display:flex;width:max-content;animation:trust-scroll 32s linear infinite} /* Ralentit puis reprend au survol plutot que de s'arreter net : un arret brutal se lit comme un incident, une decceleration comme une intention. */ .trust-marquee:hover .trust-track{animation-play-state:paused} /* Les logos sont normalises a surface egale a l'export (ecart 3 %), et non a hauteur egale : a hauteur identique, un logo carre parait plus petit qu'un logo allonge. La feuille se contente donc de les aligner sans les redimensionner, sauf sur les tres petits ecrans. */ .trust-logos{display:flex;flex-shrink:0;align-items:center;gap:20px 46px;padding-inline:23px} /* Aucune contrainte de taille ici : ce sont les attributs width et height de chaque image qui portent la normalisation par surface. Une hauteur commune imposee en CSS l'annulerait, en ramenant tous les logos au meme gabarit. Les fichiers font le double de la taille affichee, pour les ecrans a forte densite. */ .trust-logos img{display:block;opacity:.85;transition:opacity .2s} .trust-logos img:hover{opacity:1} @keyframes trust-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.trust-track{animation:none}} /* Sur petit ecran, on reduit l'ensemble d'un meme facteur : les rapports de surface entre logos sont conserves. */ @media (max-width:480px){.trust-logos{zoom:.8}} @media (min-width:1000px){.trust{padding-block:56px}} /* ---------- BLOC INTRO --------------------------------------------------- */ .intro{display:grid;gap:18px} .tile-green{background:var(--green);border-radius:var(--r-lg);padding:28px;color:#0A1B4C; display:flex;flex-direction:column;justify-content:space-between;gap:26px;min-height:250px; position:relative;overflow:hidden} .tile-green::after{content:"";position:absolute;right:-40px;bottom:-40px;width:190px;height:190px; border-radius:50%;background:rgba(255,255,255,.16)} /* Le sigle etait compose en Poppins, avec « Eco » en blanc : 1,95:1 sur le vert, donc sous le seuil de lisibilite. On affiche desormais le logo lui-meme, en aplat du bleu de la marque (#143384) : 5,88:1, et des lettres exactes plutot qu'une approximation typographique. */ /* align-self : sans cela, l'etirement du conteneur flex impose la largeur totale a l'image et ecrase ses proportions. */ .tile-logo{position:relative;height:40px;width:auto;display:block;align-self:flex-start} .tile-green .big{position:relative} .tile-green .big i{display:block;font-style:normal;font-size:13.5px;font-weight:500;opacity:.78} .tile-green .big b{display:block;font-size:clamp(40px,5.4vw,60px);font-weight:800;line-height:1; letter-spacing:-.04em;margin:6px 0 4px} .tile-green .big em{display:block;font-style:normal;font-size:17px;font-weight:600} .intro-txt{font-size:clamp(16px,1.5vw,20px);line-height:1.6;color:#1E2748} .intro-txt b{color:var(--blue);font-weight:600} .photo-card{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:200px} .photo-card img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0} /* Le voile ::after est le dernier enfant de la carte : sans z-index, il se peignait PAR-DESSUS la legende et en delavait le blanc. Le texte est donc remonte d'un cran, et le degrade renforce pour tenir sur un ciel clair. */ .photo-card span{position:absolute;left:16px;bottom:15px;right:16px;z-index:2; color:#fff;font-weight:600;font-size:14px;line-height:1.35; text-shadow:0 1px 2px rgba(6,17,48,.9),0 2px 14px rgba(6,17,48,.8)} .photo-card::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,transparent 28%,rgba(8,20,55,.45) 52%,rgba(8,20,55,.88) 82%,rgba(8,20,55,.96))} @media (min-width:900px){ .intro{grid-template-columns:1fr 1.35fr;align-items:start} .intro-right{display:grid;grid-template-columns:1fr 1fr;gap:18px} .intro-txt{grid-column:1/-1} } /* ---------- SECTION SOMBRE / SOLUTIONS ----------------------------------- */ .dark-sec{position:relative;isolation:isolate;overflow:hidden;background:var(--blue-900); padding-block:var(--sec)} .dark-sec>img.bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.36} .dark-sec::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(10,27,76,.94),rgba(10,27,76,.78) 45%,rgba(10,27,76,.97))} /* Pas de marge propre : l'ecart avec le contenu qui suit est donne par la regle de rythme .wrap>*+.grid, comme partout ailleurs. */ .dark-head{display:flex;flex-direction:column;gap:18px} @media (min-width:900px){ .dark-head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:44px} .dark-head>div:first-child{max-width:56%} } .rail{display:grid;gap:16px} .sol{display:flex;flex-direction:column;gap:14px;height:100%} .sol h3{font-size:19px} .sol p{font-size:14.5px;color:#C6D0EA} .sol .lnk{margin-top:auto;display:inline-flex;align-items:center;gap:9px;color:#9FE8A7;font-size:14px; font-weight:600;cursor:pointer;background:none;border:0;padding:0;font-family:inherit} .sol .lnk svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .25s} .sol .lnk:hover svg{transform:translate(3px,-3px)} /* ---------- FRISE ETAPES ------------------------------------------------- */ .steps{display:grid;gap:16px;counter-reset:s} .step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:24px 22px;transition:border-color .25s,box-shadow .25s} .step:hover{border-color:#C8D6F3;box-shadow:var(--shadow-m)} .step .n{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;margin-bottom:16px; background:var(--blue);color:#fff;font-weight:700;font-size:16px;font-variant-numeric:tabular-nums} .step h3{font-size:17px;margin-bottom:7px} .step p{font-size:14px} @media (min-width:640px){.steps{grid-template-columns:repeat(2,1fr)}} @media (min-width:1120px){.steps{grid-template-columns:repeat(5,1fr)}} /* ---------- CARTES SECTEURS ---------------------------------------------- */ /* Les familles de secteurs ne comptent pas toutes un multiple de trois. En grille, la derniere rangee incomplete se calait a gauche et laissait un vide franc a droite. Une disposition en flex centre cette rangee : le vide se repartit de part et d'autre, ce qui se lit comme voulu. */ .sect-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px} .sect-grid>*{flex:1 1 100%} @media (min-width:620px){.sect-grid>*{flex:0 1 calc((100% - 16px)/2)}} @media (min-width:1000px){.sect-grid>*{flex:0 1 calc((100% - 32px)/3)}} .sect{position:relative;display:block;width:100%;text-align:left;border:0;padding:0;cursor:pointer; border-radius:var(--r-lg);overflow:hidden;background:#0A1B4C;aspect-ratio:16/11;font-family:inherit} .sect img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1)} .sect::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(8,20,55,.05) 30%,rgba(8,20,55,.9))} .sect-txt{position:absolute;left:18px;right:18px;bottom:16px;z-index:2} .sect-txt b{display:block;color:#fff;font-size:19px;font-weight:700;letter-spacing:-.02em} .sect-txt span{display:block;color:#C9D5F0;font-size:13px;line-height:1.4;margin-top:4px} .sect .go{position:absolute;top:14px;right:14px;z-index:2;display:grid;place-items:center; width:38px;height:38px;border-radius:50%;background:var(--green);color:var(--blue); opacity:0;transform:scale(.7);transition:opacity .25s,transform .25s} .sect .go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .sect:hover img{transform:scale(1.06)} .sect:hover .go,.sect:focus-visible .go{opacity:1;transform:scale(1)} /* ---------- BANDEAU BLEU CEE --------------------------------------------- */ .band{background:var(--blue);border-radius:var(--r-xl);padding:34px 26px;display:grid;gap:26px; position:relative;overflow:hidden} .band::before{content:"";position:absolute;top:-90px;right:-70px;width:280px;height:280px;border-radius:50%; background:radial-gradient(circle,rgba(94,209,103,.32),transparent 68%)} .band .fig{position:relative} .band .fig b{display:block;font-size:clamp(34px,4.6vw,54px);font-weight:800;color:var(--orange); line-height:1.02;letter-spacing:-.04em} .band .fig span{display:block;color:#C5D0EC;font-size:14px;margin-top:8px;max-width:30ch} @media (min-width:900px){ .band{grid-template-columns:1.55fr 1fr;align-items:center;gap:48px;padding:52px 48px} } /* ---------- CHIFFRES / VALEURS ------------------------------------------- */ .kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px} .kpi b{display:block;font-size:clamp(32px,3.8vw,46px);font-weight:800;color:var(--orange-ink); line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums} .kpi span{display:block;margin-top:10px;font-size:14px;color:var(--body);line-height:1.5} .val{display:flex;gap:16px;align-items:flex-start} .val h3{font-size:17px;margin-bottom:5px} .val p{font-size:14px} /* ---------- SCHEMA / MEDIA ----------------------------------------------- */ .media{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff} .media img{width:100%;height:auto} /* Schemas explicatifs : ratio natif preserve, jamais rogne ni etire */ .media.schema{padding:10px;background:#fff} .media.schema img{aspect-ratio:1600/900;object-fit:contain;border-radius:14px} /* Sur petit ecran, le schema reste lisible et defile horizontalement */ .media.schema{overflow-x:auto;-webkit-overflow-scrolling:touch} .media.schema figcaption{display:block;padding:10px 6px 4px;font-size:12.5px;color:var(--muted)} @media (max-width:759px){ .media.schema img{width:700px;max-width:none} } @media (min-width:760px){ .media.schema{overflow-x:visible} .media.schema figcaption{display:none} } .split{display:grid;gap:26px;align-items:center} @media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:52px}.split.wide{grid-template-columns:1.15fr 1fr}} /* ---------- TABLEAUX ------------------------------------------------------ */ .tblwrap{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow-x:auto} .tbl{width:100%;min-width:560px;border-collapse:collapse;font-size:14.5px} .tbl caption{text-align:left;padding:18px 20px 0;font-size:13px;color:var(--muted)} .tbl th,.tbl td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)} .tbl thead th{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--blue); background:var(--soft);font-weight:600;white-space:nowrap} .tbl tbody tr:last-child td{border-bottom:0} .tbl td b{color:var(--blue);font-weight:600} .tbl .num{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--orange-ink);font-weight:600} /* Colonne coche (ex. bonification fabrication EEE) : centree, et l'intitule de l'en-tete peut revenir a la ligne pour ne pas etirer la colonne au-dela de ce que demande une simple coche. */ .tbl th.chk{text-align:center;white-space:normal;min-width:110px} .tbl td.chk{text-align:center} .tbl td.chk svg{width:19px;height:19px;stroke:var(--green-600);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .note{display:flex;gap:12px;align-items:flex-start;padding:18px 20px;border-radius:var(--r-md); background:var(--blue-50);border:1px solid #CFDCF8;font-size:14.5px} .note svg{width:20px;height:20px;flex:none;margin-top:2px;stroke:var(--blue);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .note.warn{background:var(--orange-50);border-color:#F8CFAE} .note.warn svg{stroke:var(--orange-ink)} .note.pouce{color:var(--blue);font-weight:500} /* ---------- FAQ ---------------------------------------------------------- */ .faq{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden} .faq+.faq{margin-top:10px} .faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between; gap:16px;padding:19px 22px;font-weight:600;color:var(--blue);font-size:15.5px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--green-600); border-bottom:2px solid var(--green-600);transform:rotate(45deg);transition:transform .25s} .faq[open] summary::after{transform:rotate(225deg)} .faq .a{padding:0 22px 21px;font-size:15px} /* ---------- FAQ renforcee (Conditions / Exigences / Avantages secteurs) -- */ .faq.strong summary{background:var(--blue);color:#fff} .faq.strong summary::after{border-color:#fff} .faq.strong .a{background:#fff;color:var(--body)} /* ---------- LISTES A PUCES ----------------------------------------------- */ /* L'ecart entre deux points passe de 14 a 18 px. Avec la mesure ci-dessous, davantage de points tiennent sur deux lignes : il faut que l'espace entre points reste franchement superieur a l'interligne, sans quoi la liste se lit comme un seul bloc. */ .checks li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:15px} /* Meme mesure de lecture que le reste du site. Sans elle, un point courait jusqu'a 917 px quand son voisin s'arretait a 602 : les lignes ne se ressemblaient pas d'un point a l'autre. Le texte vit dans le , seul element sur lequel la contrainte puisse porter, le
  • etant un conteneur flex qui porte aussi la coche. */ /* Mesure propre a la liste, plus large que --measure : un point de liste court deja la lecture a chaque puce, la contrainte de confort de lecture d'un paragraphe continu (65 caracteres) y est plus stricte que necessaire et laissait, hors mise en page a deux colonnes, un vide marque a droite. */ .checks li span{max-width:min(88ch,100%)} .split .checks li span{max-width:var(--measure)} .checks svg{flex:none;width:19px;height:19px;margin-top:3px;stroke:var(--green-600);fill:none; stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .checks.light li{color:#D3DBF0} /* ---------- CTA FINAL + PIED --------------------------------------------- */ .cta-band{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-xl); padding:30px 24px;text-align:center;background:var(--blue-900)} .cta-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.32} .cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(10,27,76,.72)} .cta-band h2{margin-bottom:9px;font-size:clamp(21px,3.2vw,32px)} .cta-band p{color:#CFD8F0;max-width:52ch;margin:0 auto 18px;font-size:14.5px} .cta-band .btns{justify-content:center} .cta-band .btns+p{margin-top:14px} @media (min-width:900px){.cta-band{padding:38px 48px}} .ftr{background:var(--blue-900);color:#B9C4E4;padding-block:44px 0;margin-top:var(--sec)} .ftr-grid{display:grid;gap:34px;padding-bottom:36px} .ftr h4{color:#fff;font-size:13px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:16px} .ftr a{color:#B9C4E4;font-size:14.5px;display:block;padding:6px 0;transition:color .2s} .ftr a:hover{color:var(--green)} .ftr .brandmark{margin-bottom:14px} .ftr .brandmark img{height:34px;width:auto;display:block} .ftr .desc{font-size:14.5px;max-width:36ch;margin-bottom:18px} .ftr .co{font-size:14.5px;line-height:1.9} .ftr .co a{display:inline;padding:0} .ftr-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px} .ftr-bot{border-top:1px solid rgba(255,255,255,.13);padding-block:20px;display:flex;flex-wrap:wrap; gap:10px 22px;align-items:center;justify-content:space-between;font-size:13px} .ftr-bot nav{display:flex;flex-wrap:wrap;gap:6px 20px} .ftr-bot a{display:inline;padding:0;font-size:13px} @media (min-width:760px){.ftr-grid{grid-template-columns:1.5fr 1fr 1fr}} @media (min-width:1060px){.ftr-grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}} /* ---------- EN-TETE DE PAGE INTERIEURE ----------------------------------- */ .phead{position:relative;isolation:isolate;overflow:hidden;background:var(--blue-900); padding:38px var(--pad) 32px} .phead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.45} .phead::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(10,27,76,.86),rgba(10,27,76,.95))} .phead .in{max-width:1340px;margin-inline:auto} .phead h1{margin:14px 0 16px} .phead p{color:#D3DBF0;font-size:clamp(15px,1.4vw,18.5px)} @media (min-width:760px){.phead p{max-width:95%}} .crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:#A9B6DC} /* Sans cette regle, le lien prend a{color:var(--blue)} : contraste 1,44:1 sur le fond --blue-900, soit un mot illisible. Ici 10,68:1. */ /* Le vert de la marque sur le bleu nuit : 8,47:1, et surtout une couleur franchement differente de celle du texte courant, ce qui distingue le lien du libelle de la page en cours sans compter sur le seul soulignement. */ .crumb a{color:var(--green);text-decoration:underline;text-underline-offset:3px} .crumb a:hover,.crumb a:focus-visible{color:#fff} /* Libelle de la page courante : blanc casse, non clicable. */ .crumb>span{color:#EAF0FF;font-weight:500} .crumb button{background:none;border:0;padding:0;color:#A9B6DC;cursor:pointer;font:inherit;font-size:13px} .crumb button:hover{color:#fff;text-decoration:underline} .crumb svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2} @media (min-width:900px){.phead{padding:52px var(--pad) 36px}} /* ---------- FORMULAIRE --------------------------------------------------- */ .form{display:grid;gap:16px} @media (min-width:700px){.form{grid-template-columns:1fr 1fr}.form .full{grid-column:1/-1}} .field label{display:block;font-size:13.5px;font-weight:600;color:var(--blue);margin-bottom:7px} .field .req{color:var(--orange-ink)} .field input,.field select,.field textarea{width:100%;min-height:50px;padding:13px 15px;font:400 15px/1.5 'Poppins',sans-serif; color:#131A33;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md); transition:border-color .2s,box-shadow .2s} .field textarea{min-height:130px;resize:vertical} .field select{appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--blue) 50%),linear-gradient(135deg,var(--blue) 50%,transparent 50%); background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px;background-repeat:no-repeat} .field input:hover,.field select:hover,.field textarea:hover{border-color:#BFCDEC} .field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--green-600); box-shadow:0 0 0 4px rgba(94,209,103,.22)} .field .help{font-size:12.5px;color:var(--muted);margin-top:6px} .form-note{font-size:13px;color:var(--muted)} .ok-msg{display:none;align-items:center;gap:12px;padding:16px 18px;border-radius:var(--r-md); background:var(--green-50);border:1px solid #B6E9BD;color:#0C5F26;font-size:14.5px;font-weight:500} .ok-msg svg{width:22px;height:22px;flex:none;stroke:var(--green-600);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .ok-msg[data-show="true"]{display:flex} /* ---------- ONGLETS PAGE ------------------------------------------------- */ .page{display:none} .page[data-active="true"]{display:block;animation:pagein .4s ease} @keyframes pagein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ---------- VERSION DECOUPEE : liens transformes en ------------------ */ .nav{position:relative} /* Les blocs .reveal ne sont masques que si le JS a demarre : sans JS, ou si le script echoue, tout le contenu reste visible. */ .reveal{opacity:1;transform:none;animation:none} /* Duree de l'apparition portee de 0,6 a 1,5 s a la demande, soit 2,5 fois la valeur d'origine. Le decalage entre elements d'un meme groupe suit le meme facteur, cote script : 150 ms par element, plafonnes a 600 ms. « backwards » n'est pas optionnel ici. La notation abregee « animation » remet le mode de remplissage a « none » : pendant le delai d'attente, l'element prend alors l'etat final pose par la meme regle, soit opacity:1, et s'affiche d'un coup avant que l'animation ne demarre. Invisible avec un delai de 60 ms, franchement genant a 600 ms. */ .js .reveal{opacity:0;transform:translateY(20px)} .js .reveal.is-in{opacity:1;transform:none;animation:rise 1.5s cubic-bezier(.22,.8,.3,1) backwards} @media (prefers-reduced-motion:reduce){.js .reveal,.js .reveal.is-in{opacity:1;transform:none;animation:none}} a.sect,a.card,a.lnk{text-decoration:none} a.card{display:block;color:inherit} a.card h3{color:var(--blue)} .skip{position:absolute;left:0;top:0;z-index:200;padding:12px 20px;border-radius:0 0 12px 0; background:var(--blue);color:#fff;font-weight:600;transform:translateY(-130%);transition:transform .18s} .skip:focus{transform:none} /* ---------- FENETRE DE CONSENTEMENT AUX COOKIES -------------------------- */ .cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:300;max-width:420px; padding:20px 22px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line); box-shadow:0 8px 20px rgba(10,27,76,.12),0 24px 60px rgba(10,27,76,.24); display:none;animation:cookie-in .32s cubic-bezier(.22,.8,.3,1)} .cookie[data-show="true"]{display:block} @keyframes cookie-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.cookie{animation:none}} .cookie h2{font-size:16px;margin-bottom:8px} .cookie p{font-size:13.5px;line-height:1.55;margin-bottom:16px;color:var(--body)} .cookie p a{color:var(--green-ink);text-decoration:underline} .cookie-actions{display:flex;gap:10px} .cookie-actions button{flex:1;min-height:44px;padding:0 16px;border-radius:999px;cursor:pointer; font-family:inherit;font-size:14px;font-weight:600;border:1.5px solid var(--line); background:#fff;color:var(--blue);transition:background .2s,border-color .2s,color .2s} .cookie-actions button:hover{border-color:var(--blue-600);background:var(--blue-50)} .cookie-actions .accept{background:var(--green);border-color:var(--green);color:var(--blue)} .cookie-actions .accept:hover{background:var(--green-600);border-color:var(--green-600);color:#fff} @media (min-width:520px){.cookie{right:auto}} /* ---------- PAGES LEGALES ------------------------------------------------ */ .legal{max-width:78ch} /* Le conteneur reste large pour les tableaux, mais le texte courant suit la mesure commune : c'est la lecture au long cours qui fatigue, pas un tableau. */ .legal p,.legal li,.legal h2,.legal h3{max-width:var(--measure)} .legal h2{font-size:clamp(20px,2.4vw,27px);margin:38px 0 14px} .legal h3{font-size:18px;margin:26px 0 10px} .legal p,.legal li{font-size:15.5px;margin-bottom:12px} .legal ul{margin:0 0 16px;padding-left:22px;list-style:disc} .legal ul li{margin-bottom:8px;padding-left:4px} .legal a{text-decoration:underline} .legal .maj{font-size:13.5px;color:var(--muted)} .legal .todo{display:block;padding:14px 18px;margin-bottom:16px;border-radius:12px; background:var(--orange-50);border:1px solid #F8CFAE;font-size:14px} .legal table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:14.5px} .legal th,.legal td{padding:12px 14px;text-align:left;vertical-align:top;border:1px solid var(--line)} .legal thead th{background:var(--soft);color:var(--blue);font-size:12.5px; letter-spacing:.06em;text-transform:uppercase} .ftr-bot .lien-cookies{background:none;border:0;padding:0;cursor:pointer;color:#B9C4E4; font:inherit;font-size:13px;text-decoration:underline;transition:color .2s} .ftr-bot .lien-cookies:hover{color:var(--green)} /* ---------- FORMULAIRE : erreurs, consentement, champs annexes ----------- */ .champ-annexe{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .err-msg{display:none;align-items:flex-start;gap:12px;padding:16px 18px;margin-bottom:20px; border-radius:var(--r-md);background:#FEF2F2;border:1px solid #FBC9C9;color:#8E1B1B;font-size:14.5px} .err-msg[data-show="true"]{display:flex} .err-msg svg{width:20px;height:20px;flex:none;margin-top:2px;stroke:#B91C1C;fill:none;stroke-width:2} .consent label{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;font-weight:400; color:var(--body);cursor:pointer;line-height:1.55} .consent input[type="checkbox"]{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--green-600);cursor:pointer} .consent .help{margin-top:10px;padding-left:33px} .consent a{text-decoration:underline} .btn[aria-busy="true"]{opacity:.75;cursor:progress} .btn[disabled]{opacity:.6;cursor:not-allowed} /* ---------- RETOUR EN HAUT DE PAGE -------------------------------------- Pastille discrete, en bas a droite, qui n'apparait qu'apres un debut de defilement. Fond translucide et flou d'arriere-plan : elle se pose sur le contenu sans le masquer. « visibility » compte autant que « opacity » : un bouton simplement transparent resterait atteignable au clavier et annonce par un lecteur d'ecran alors qu'il est invisible. Ici il sort de l'ordre de tabulation tant qu'il n'est pas affiche. Rang d'empilement 60 : au-dessus du contenu, sous le tiroir mobile (80) et sous la fenetre de consentement (300), qui ne doivent jamais passer derriere lui. */ .haut{position:fixed;right:20px;bottom:20px;z-index:60; width:46px;height:46px;display:grid;place-items:center;padding:0; border:1px solid rgba(20,51,132,.16);border-radius:50%; background:rgba(255,255,255,.58);color:var(--blue);cursor:pointer; -webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4); box-shadow:0 2px 10px rgba(10,27,76,.10); opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .3s ease,transform .3s ease,visibility .3s, background .2s ease,border-color .2s ease} .haut[data-show="true"]{opacity:1;visibility:visible;transform:none} .haut:hover{background:rgba(255,255,255,.92);border-color:rgba(20,51,132,.34)} .haut svg{width:19px;height:19px;stroke:currentColor;fill:none; stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} /* Sur fond sombre, la pastille claire resterait lisible : on la garde telle quelle, le flou suffit a la detacher. */ @media (prefers-reduced-motion:reduce){.haut{transition:opacity .01ms,visibility .01ms}} /* Sous 520 px, la fenetre de consentement occupe toute la largeur du bas : le bouton s'efface tant qu'un choix n'est pas fait. */ @media (max-width:519px){.cookie[data-show="true"] ~ .haut{display:none}} /* ---------- SOMMAIRE PAR ANCRES (page Transport) ------------------------- */ /* Ancre de saut : sans cette marge, l'en-tete collant recouvre le debut de la section visee au clic. Portee au conteneur de page pour ne rien changer ailleurs, ou aucune autre page n'utilise d'ancre interne. */ #contenu [id]{scroll-margin-top:96px} .jumpnav{display:flex;flex-wrap:wrap;gap:10px} .jumpnav a{display:inline-flex;align-items:center;gap:9px;padding:8px 16px 8px 10px; border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--blue); font-size:13.5px;font-weight:600;transition:border-color .2s,box-shadow .2s,transform .2s} .jumpnav a:hover{border-color:#C8D6F3;box-shadow:var(--shadow-m);transform:translateY(-2px)} .jumpnav .si{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:none; background:var(--green-50);color:var(--green-ink)} .jumpnav .si svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} @media (max-width:759px){ .jumpnav{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity} .jumpnav a{flex:none;scroll-snap-align:start} } /* ---------- EMPLACEMENT VISUEL EN ATTENTE --------------------------------- */ .ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px; text-align:center;padding:28px 20px;border:1.5px dashed #C3CFEE;border-radius:var(--r-lg); background:var(--blue-50);color:var(--muted);min-height:200px} .ph svg{width:30px;height:30px;stroke:var(--blue-600);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .ph b{display:block;color:var(--blue);font-size:13.5px;font-weight:600} .ph span{display:block;font-size:12.5px;max-width:32ch} .ph.wide{min-height:280px} .ph.dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.24)} .ph.dark b{color:#fff} .ph.dark span{color:#C6D0EA} .ph.dark svg{stroke:#9FE8A7} /* ---------- PASTILLE « AIDE PUBLIQUE » ------------------------------------ */ /* Distingue visuellement un dispositif d'aide publique (Prime a la Pince) d'une fiche CEE (deja signalee par .pill.green). */ .pill.orange{background:var(--orange-50);color:var(--orange-ink)} /* ---------- EN-TETE D'OFFRE ------------------------------------------------ */ .offer-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px} .offer-head h3{font-size:20px;margin-bottom:6px} .offer-head .pill{margin-top:2px} /* ---------- PARCOURS CLE EN MAIN ------------------------------------------ */ /* Meme grammaire visuelle que .steps (cartes, pastille .ico), mais reliees par un connecteur : ce parcours porte une notion d'enchainement, la ou .steps presente cinq etapes independantes. */ .flow{display:flex;flex-direction:column;gap:0} .flow-step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:22px 20px;display:flex;flex-direction:column;gap:8px} .flow-step h3{font-size:16px} .flow-step p{font-size:13.5px} .flow-step:not(:last-child){margin-bottom:30px} .flow-step:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-30px; transform:translateX(-50%);width:2px;height:22px;background:var(--line)} .flow-step:not(:last-child)::before{content:"";position:absolute;z-index:1;width:9px;height:9px; border-right:2px solid var(--green-600);border-bottom:2px solid var(--green-600); left:50%;bottom:-25px;transform:translateX(-50%) rotate(45deg)} @media (min-width:900px){ .flow{flex-direction:row;align-items:stretch;gap:0} .flow-step{flex:1;margin-bottom:0!important} .flow-step:not(:last-child){margin-right:34px} .flow-step:not(:last-child)::after{left:auto;right:-30px;top:50%;bottom:auto; transform:translateY(-50%);width:22px;height:2px} .flow-step:not(:last-child)::before{left:auto;bottom:auto;right:-25px;top:50%; transform:translateY(-50%) rotate(-45deg)} }