/* c2i-v8-chrome.css — v8 header + footer + popup (lot D2, TB 68/73). Propriétaire : session B. Préfixe c8-, tokens --c8-* (cf c2i-v8.css). * * Source : maquette v8.2 validée le 21/09 (build/v82-parts/chrome-*.css), portée en classes c8-* sur la structure Divi * générée par ops/scripts/generate_tb_v8.js. Les règles v4 encore chargées (c2i-header.css, c2i-footer.css, c2i-v3.css) * visent .et-l--header / .et-l--footer avec !important : on les contre ici avec un sélecteur plus fort (.et-l--x .c8-y …). * Les .c8-burger, .c8-svc-strip, .c8-mnav sont construits par c2i-v8-chrome.js ; la popup et le bouton flottant sont * déplacés sous par le même script (aucun ancêtre transformé ne piège leur position:fixed). */ /* ════════════════════ HEADER (TB 68) ════════════════════ */ /* Header collant : body (overflow-x:hidden) et #page-container (overflow auto/hidden) deviennent des conteneurs de défilement qui ne défilent jamais → position:sticky ne colle pas. overflow:clip coupe pareil sans créer de conteneur. */ html body{overflow-x:clip!important;overflow-y:visible!important} body #page-container{overflow:clip visible!important} .et-l.et-l--header{top:0!important} /* Section / rows / colonnes Divi : neutralise le fond sombre et le flou du v4 (c2i-v3.css §10) */ body .et-l--header .et_pb_section.c8-hdr{background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important; border-bottom:1px solid var(--c8-line)!important;box-shadow:0 6px 20px -16px rgba(10,37,64,.35);transition:box-shadow .4s ease-out; padding:0!important;gap:0!important;color:var(--c8-ink);font-size:16px} .et-l--header .et_pb_section.c8-hdr.is-shrunk{box-shadow:0 10px 26px -16px rgba(10,37,64,.5)} .et-l--header .c8-hdr .et_pb_row{display:block!important;max-width:none!important;width:100%!important;padding:0!important;margin:0!important} .et-l--header .c8-hdr .et_pb_column{width:auto!important;padding:0!important} .c8-hdr .et_pb_module{margin:0!important} .c8-hdr p{padding:0;margin:0} /* preset Divi « texte par défaut » : line-height 1.8em sur .et_pb_text_inner et ses li → on rend la main au composant */ .c8-scope .preset--module--divi-text--default .et_pb_text_inner,.c8-scope .preset--module--divi-text--default .et_pb_text_inner ul>li{line-height:inherit} /* Bande de réassurance : se replie au défilement */ .et-l--header .c8-hdr .c8-topbar-row{background:var(--c8-bg-soft)!important;border-bottom:1px solid #d3dde6;overflow:hidden;max-height:60px;opacity:1; transition:max-height .4s ease-out,opacity .3s ease-out,border-color .3s} .et-l--header .c8-hdr.is-shrunk .c8-topbar-row{max-height:0;opacity:0;border-bottom-color:transparent} .c8-scope .c8-topbar ul{list-style:none;max-width:var(--c8-wrap);margin:0 auto;padding:7px 32px;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 20px; font:12px/1.6 var(--c8-mono);color:var(--c8-ink-2)} .c8-scope .c8-topbar li{display:flex;align-items:center;white-space:nowrap;padding:0;margin:0} .c8-scope .c8-topbar li a{display:inline-flex;align-items:center;gap:7px;color:inherit;font-weight:inherit;transition:color .2s} .c8-scope .c8-topbar b{color:var(--c8-ink);transition:color .2s} .c8-scope .c8-topbar li a:hover,.c8-scope .c8-topbar li a:hover b,.c8-scope .c8-topbar li a:focus-visible b{color:var(--c8-blue)} .c8-topbar .c8-dot{width:8px;height:8px;border-radius:50%;background:var(--c8-green)} .c8-topbar .c8-stars{color:#f5b301;letter-spacing:1px} /* Barre principale */ .et-l--header .c8-hdr .et_pb_column.c8-hdr-in{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center;gap:20px; max-width:var(--c8-wrap);margin:0 auto!important;padding:8px 32px!important;box-sizing:border-box;transition:padding .4s ease-out} .et-l--header .c8-hdr.is-shrunk .et_pb_column.c8-hdr-in{padding-top:4px!important;padding-bottom:4px!important} .c8-hdr-in>.et_pb_module,.c8-hdr-in>.et_pb_button_module_wrapper{flex:none;width:auto!important;max-width:none!important} /* Logo : 78 → 66 px au défilement, grossit au survol */ .c8-hdr .c8-brand a{display:block} .c8-hdr .c8-brand .et_pb_image_wrap{display:block} .c8-hdr .c8-brand img{height:78px!important;width:auto!important;max-width:none!important;transform-origin:left center;transition:height .4s ease-out,transform .3s var(--c8-ease)} .c8-hdr.is-shrunk .c8-brand img{height:66px!important} @media(hover:hover){.c8-hdr .c8-brand a:hover img,.c8-hdr .c8-brand a:focus-visible img{transform:scale(1.1)}} .c8-hdr .et_pb_module.c8-brand-name{display:none!important} .c8-scope .c8-brand-name a{font:800 26px/1 var(--c8-display);letter-spacing:-.01em;color:var(--c8-ink);transition:font-size .4s ease-out,color .2s} .c8-scope .c8-brand-name a:hover{color:var(--c8-blue-deep)} .c8-hdr.is-shrunk .c8-brand-name a{font-size:22px} /* 4 expertises + menus déroulants (24 sous-services) */ .c8-svc-nav{display:grid;grid-template-columns:repeat(4,104px);gap:4px;margin-left:12px} .c8-svc{position:relative} .c8-scope .c8-svc-top{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;border-radius:12px;color:var(--c8-ink);font-weight:700;font-size:13.5px;line-height:1.2;text-align:center;transition:color .15s,gap .4s ease-out,padding .4s ease-out} .c8-svc .c8-ico{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;background:var(--c8-blue-deep); transition:width .4s ease-out,height .4s ease-out,font-size .4s ease-out,background-color .2s,transform .25s var(--c8-ease)} .c8-hdr.is-shrunk .c8-svc .c8-ico{width:42px;height:42px;font-size:18px} .c8-hdr.is-shrunk .c8-svc-top{gap:3px;padding-top:4px;padding-bottom:4px} .c8-scope .c8-svc-top:hover{color:var(--c8-blue)} .c8-svc-top:hover .c8-ico,.c8-svc:focus-within .c8-ico{background:var(--c8-blue);transform:translateY(-2px) scale(1.08)} .c8-svc-drop{position:absolute;top:100%;left:50%;z-index:5;transform:translate(-50%,8px);min-width:320px;background:#fff;border:1px solid var(--c8-line);border-radius:12px; box-shadow:0 24px 40px -20px rgba(10,37,64,.35);padding:16px 18px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;text-align:left} .c8-svc:hover .c8-svc-drop,.c8-svc:focus-within .c8-svc-drop{opacity:1;visibility:visible;transform:translate(-50%,0)} .c8-scope .c8-drop-h{font:700 15px/1.2 var(--c8-display);margin:0 0 8px;padding:0;color:var(--c8-blue-deep)} .c8-scope .c8-svc-drop ul,.c8-scope .c8-m-svc ul{list-style:none;margin:0;padding:0} .c8-scope .c8-svc-drop li{display:flex;align-items:center;font-size:14px;line-height:1.35;color:var(--c8-ink-2);padding:5px 0;margin:0;border-bottom:1px dashed var(--c8-line)} .c8-scope .c8-svc-drop li:last-child{border:0} /* lignes à picto (menus déroulants + accordéon mobile) : fond teinté, glisse, picto qui pivote, flèche */ .c8-scope .c8-svc-drop li a,.c8-scope .c8-m-svc li a{display:flex;align-items:center;gap:10px;flex:1;color:inherit;border-radius:8px;padding:4px 8px;margin:-4px -8px; transition:color .2s,background-color .2s,transform .25s var(--c8-ease)} .c8-svc-drop li a i,.c8-m-svc li a i{width:18px;flex:none;text-align:center;color:var(--c8-blue);font-size:14px;transition:transform .25s var(--c8-ease),color .2s} .c8-svc-drop li a::after,.c8-m-svc li a::after{content:"→";margin-left:auto;padding-left:10px;font-weight:700;opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .25s var(--c8-ease)} .c8-scope .c8-svc-drop li a:hover,.c8-scope .c8-svc-drop li a:focus-visible,.c8-scope .c8-m-svc li a:hover,.c8-scope .c8-m-svc li a:focus-visible{color:var(--c8-blue-deep);background:var(--c8-tint);transform:translateX(6px)} .c8-svc-drop li a:hover i,.c8-svc-drop li a:focus-visible i,.c8-m-svc li a:hover i,.c8-m-svc li a:focus-visible i{color:var(--c8-blue-deep);transform:scale(1.25) rotate(-8deg)} .c8-svc-drop li a:hover::after,.c8-svc-drop li a:focus-visible::after,.c8-m-svc li a:hover::after,.c8-m-svc li a:focus-visible::after{opacity:1;transform:none} .c8-scope .c8-more{display:inline-block;margin-top:10px;font-weight:700;font-size:14px;color:var(--c8-blue);transition:color .2s,transform .25s var(--c8-ease)} .c8-scope .c8-more:hover,.c8-scope .c8-more:focus-visible{color:var(--c8-blue-deep);transform:translateX(6px)} /* 5.0.24 : 2e lien de pied de panneau (« Faire le test cyber → » sous Cybersécurité), sur sa propre ligne */ .c8-scope .c8-svc-drop .c8-more+.c8-more{display:table;margin-top:6px} /* Liens Zone / Approche / Contact : soulignement qui se déroule */ .c8-hdr .et_pb_module.c8-link-nav{margin-left:auto!important} .c8-scope .c8-link-nav p{display:flex;gap:22px;font-weight:600;font-size:15px;line-height:1.4} .c8-scope .c8-link-nav a{color:var(--c8-ink-2);white-space:nowrap} .c8-scope .c8-link-nav a,.c8-scope .c8-legal a,.c8-scope .c8-credit a,.c8-scope .c8-fh a{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;padding-bottom:2px; transition:color .2s,background-size .3s var(--c8-ease)} .c8-scope .c8-link-nav a:hover,.c8-scope .c8-link-nav a:focus-visible,.c8-scope .c8-legal a:hover,.c8-scope .c8-legal a:focus-visible, .c8-scope .c8-credit a:hover,.c8-scope .c8-credit a:focus-visible,.c8-scope .c8-fh a:hover,.c8-scope .c8-fh a:focus-visible{background-size:100% 2px} .c8-scope .c8-link-nav a:hover,.c8-scope .c8-link-nav a:focus-visible,.c8-scope .c8-link-nav a[aria-current]{color:var(--c8-blue-deep)} /* CTA vert « Demande d'intervention » (divi/button : on écrase le bouton Divi + les règles v3) */ .et-l--header .c8-hdr a.et_pb_button.c8-hdr-cta{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:8px;white-space:nowrap;background:var(--c8-green)!important;color:var(--c8-on-green)!important; padding:13px 20px!important;border:0!important;border-radius:8px!important;font:700 15px/1.2 var(--c8-body)!important;letter-spacing:0!important;text-transform:none!important; transition:background-color .2s,transform .25s var(--c8-ease),box-shadow .25s} /* Le preset Divi du bouton (body #page-container .et_pb_section .preset--group--divi-button--…{color:…!important}) porte un ID et repeignait le texte en #bdb8ab sur la plupart des pages (23/09) : même préfixe, ID compris */ body #page-container .et-l--header .c8-hdr a.et_pb_button.c8-hdr-cta,body #page-container .et-l--header .c8-hdr a.et_pb_button.c8-hdr-cta:hover, body #page-container .et-l--header .c8-hdr a.et_pb_button.c8-hdr-cta:focus-visible{color:var(--c8-on-green)!important} .c8-hdr-cta i{font-size:16px;transition:transform .3s var(--c8-ease)} .et-l--header .c8-hdr a.et_pb_button.c8-hdr-cta:hover,.et-l--header .c8-hdr a.et_pb_button.c8-hdr-cta:focus-visible{background:var(--c8-green-hover)!important;padding:13px 20px!important; transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(0,0,0,.55)} .et-l--header .c8-hdr a.et_pb_button.c8-hdr-cta:hover i{transform:scale(1.15) rotate(-8deg)} /* Burger + menu mobile (construits en JS) */ .c8-burger{display:none;margin-left:auto;flex:none;width:44px;height:44px;border:1px solid var(--c8-line);border-radius:8px;background:#fff;font-size:18px;color:var(--c8-ink);cursor:pointer; transition:border-color .2s,color .2s,transform .2s} .c8-burger:hover{border-color:var(--c8-blue);color:var(--c8-blue);transform:translateY(-1px)} .c8-svc-strip{display:none;width:100%;box-sizing:border-box;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--c8-line)} .c8-scope .c8-svc-strip a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;font-size:12px;font-weight:700;color:var(--c8-ink);text-align:center;line-height:1.2;transition:color .2s} .c8-svc-strip i{font-size:18px;color:var(--c8-blue-deep);transition:transform .25s var(--c8-ease),color .2s} .c8-scope .c8-svc-strip a:hover{color:var(--c8-blue)} .c8-svc-strip a:hover i{color:var(--c8-blue);transform:translateY(-2px) scale(1.1)} .c8-mnav{display:none;width:100%;box-sizing:border-box;flex-direction:column;padding:8px 20px 18px;border-top:1px solid var(--c8-line);background:#fff;max-height:calc(100dvh - 140px);overflow-y:auto;overscroll-behavior:contain} .c8-mnav.is-open{display:flex} .c8-scope .c8-mnav>a,.c8-mnav>button{padding:12px 4px;font:600 16px/1.4 var(--c8-body);color:var(--c8-ink);border:0;border-bottom:1px solid var(--c8-line);background:none;text-align:left;cursor:pointer} .c8-m-svc details{border-bottom:1px solid var(--c8-line)} .c8-m-svc summary{list-style:none;display:flex;align-items:center;gap:12px;padding:10px 4px;font-weight:700;color:var(--c8-ink);cursor:pointer} .c8-m-svc summary::-webkit-details-marker{display:none} .c8-m-svc summary::after{content:"\f078";font:900 12px 'Font Awesome 6 Free';margin-left:auto;color:var(--c8-ink-2);transition:transform .2s} .c8-m-svc details[open] summary::after{transform:rotate(180deg)} .c8-m-svc summary .c8-ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--c8-blue-deep);color:#fff;font-size:15px} .c8-scope .c8-m-svc ul{padding:0 0 8px 46px} .c8-scope .c8-m-svc li{display:flex;align-items:center;padding:5px 0;margin:0;font-size:14.5px;line-height:1.35;color:var(--c8-ink-2)} .c8-scope .c8-m-svc .c8-more{display:block;margin:0;padding:4px 0 12px 46px} .c8-scope .c8-m-svc .c8-more:has(+.c8-more){padding-bottom:4px} .c8-mnav .c8-m-cta{margin-top:14px;justify-content:center;display:flex;gap:10px;align-items:center;background:var(--c8-green);color:var(--c8-on-green);border-radius:8px;border:0;padding:13px;font-weight:700} .c8-mnav .c8-m-cta:hover{background:var(--c8-green-hover)} @media(max-width:1180px){ .c8-hdr-in>.et_pb_code,.c8-hdr .et_pb_module.c8-link-nav,.c8-hdr-in>.et_pb_button_module_wrapper{display:none!important} .c8-burger{display:block} .c8-hdr .et_pb_module.c8-brand-name{display:block!important} .c8-svc-strip{display:grid} } @media(max-width:900px){.c8-topbar .c8-opt{display:none!important}} @media(max-width:560px){ .et-l--header .c8-hdr .et_pb_column.c8-hdr-in{padding:8px 20px!important;gap:14px} .c8-scope .c8-topbar ul{padding:6px 12px;gap:4px 14px} .c8-hdr .c8-brand img{height:56px!important} .c8-hdr.is-shrunk .c8-brand img{height:50px!important} .c8-scope .c8-brand-name a,.c8-hdr.is-shrunk .c8-brand-name a{font-size:20px} .c8-mnav{max-height:calc(100dvh - 120px);overflow-y:auto} } @media(max-width:360px){.c8-scope .c8-brand-name a,.c8-hdr.is-shrunk .c8-brand-name a{font-size:18px}} @media(min-width:1181px) and (max-width:1280px){ .et-l--header .c8-hdr .et_pb_column.c8-hdr-in{gap:14px} .c8-svc-nav{margin-left:4px} .c8-scope .c8-link-nav p{gap:14px} .et-l--header .c8-hdr a.et_pb_button.c8-hdr-cta,.et-l--header .c8-hdr a.et_pb_button.c8-hdr-cta:hover{padding:13px 14px!important} } /* ════════════════════ FOOTER (TB 73) ════════════════════ */ body .et-l--footer .et_pb_section.c8-foot{position:relative;background:var(--c8-blue-deep-2)!important;color:var(--c8-on-blue-2);padding:60px 0 96px!important;margin:0!important;gap:0!important; font-size:14.5px;line-height:1.6;box-shadow:0 -26px 50px -18px rgba(7,40,66,.55),0 -6px 14px -6px rgba(7,40,66,.25)} /* liseret dégradé qui défile en haut du pied de page */ .et-l--footer .et_pb_section.c8-foot::before{content:"";position:absolute;inset:0 0 auto;height:4px;z-index:2; background:linear-gradient(90deg,var(--c8-blue),var(--c8-green),var(--c8-sky),var(--c8-blue)) 0 0/1200px 100% repeat-x} @media(prefers-reduced-motion:no-preference){.et-l--footer .et_pb_section.c8-foot::before{animation:c8-liseret 3s linear infinite}} @keyframes c8-liseret{to{background-position:1200px 0}} .et-l--footer .c8-foot .et_pb_row{display:block!important;max-width:var(--c8-wrap)!important;width:100%!important;margin:0 auto!important;padding:0 32px!important;box-sizing:border-box} .et-l--footer .c8-foot .et_pb_column{width:auto!important;padding:0!important;margin:0!important} .c8-foot .et_pb_module{margin:0!important} .c8-foot p{padding:0;margin:0} .c8-scope.c8-foot a{color:#fff;transition:color .2s} .c8-scope.c8-foot a:hover{color:var(--c8-sky)} .c8-foot .et_pb_row.c8-ov-row{display:none!important} /* grille : identité | services | C2i info | zone ; publics sous services + C2i info */ .et-l--footer .c8-foot .et_pb_column.c8-foot-grid{display:grid!important;grid-template-columns:minmax(0,1.9fr) minmax(0,.95fr) minmax(0,.95fr) minmax(0,1.2fr); grid-template-areas:"id svc c2i zone" "id sol sol zone";column-gap:36px;row-gap:26px;align-items:start} .c8-foot .et_pb_group{display:flex;flex-direction:column;gap:0;padding:0!important;margin:0!important;width:auto!important;min-width:0} .c8-foot .c8-f-id{grid-area:id} .c8-foot .c8-f-svc{grid-area:svc} .c8-foot .c8-f-c2i{grid-area:c2i} .c8-foot .c8-f-sol{grid-area:sol;padding-left:28px!important} .c8-foot .c8-f-zone{grid-area:zone} /* identité : logo blanc + label ExpertCyber + citation */ .c8-foot .et_pb_group.c8-id-row{flex-direction:row!important;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:26px!important} @media(min-width:1181px){.c8-foot .et_pb_group.c8-id-row{flex-wrap:nowrap}.c8-foot .c8-label-ec-w{flex:0 1 auto;min-width:0}} .c8-foot .c8-idt{flex:none;width:auto!important} .c8-foot .c8-idt a,.c8-foot .c8-idt .et_pb_image_wrap{display:block} .c8-foot .c8-idt img{width:96px!important;height:auto!important;transition:transform .3s var(--c8-ease)} .c8-foot .c8-idt a:hover img,.c8-foot .c8-idt a:focus-visible img{transform:scale(1.06)} .c8-scope .c8-label-ec{display:inline-flex;align-items:center;gap:12px;padding:6px 16px 6px 6px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.04); transition:border-color .2s,transform .25s var(--c8-ease),background-color .2s} .c8-scope .c8-label-ec:hover,.c8-scope .c8-label-ec:focus-visible{border-color:rgba(127,208,242,.45);background:rgba(255,255,255,.07);transform:translateY(-2px)} .c8-label-ec img{width:62px;height:auto;background:#fff;border-radius:8px;padding:4px;flex:none} .c8-label-ec span{min-width:0;padding-right:2px;font-size:13px;line-height:1.35;color:var(--c8-on-blue-2)} .c8-label-ec b{display:block;color:#fff;font-size:14px;text-wrap:balance} .c8-foot .c8-quote{margin-left:4px!important} .c8-foot .c8-quote p{position:relative;padding:2px 0 2px 16px;border-left:3px solid var(--c8-green);font-style:italic;font-size:17px;line-height:1.55;color:#fff;max-width:400px} /* titres de colonnes (divi/heading h2) */ .c8-scope.c8-foot .c8-fh h2.et_pb_module_header{color:var(--c8-sky)!important;font:700 15px/1.3 var(--c8-mono)!important;letter-spacing:.12em!important;text-transform:uppercase;margin:0 0 16px!important;padding:0!important} .c8-scope.c8-foot .c8-fh a{color:inherit} .c8-scope.c8-foot .c8-fh a:hover{color:#fff} /* listes à picto */ .c8-scope.c8-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .c8-scope.c8-foot li{padding:0;margin:0} .c8-scope.c8-foot .c8-flist a,.c8-scope.c8-foot .c8-cities a{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;transition:color .2s,transform .25s var(--c8-ease)} .c8-scope.c8-foot .c8-flist a:hover,.c8-scope.c8-foot .c8-flist a:focus-visible,.c8-scope.c8-foot .c8-cities a:hover,.c8-scope.c8-foot .c8-cities a:focus-visible{transform:translateX(6px)} .c8-foot .c8-flist i{width:18px;text-align:center;color:var(--c8-sky);font-size:14px;transition:transform .25s var(--c8-ease),color .2s} .c8-foot .c8-flist a:hover i,.c8-foot .c8-flist a:focus-visible i,.c8-foot .c8-cities a:hover i{color:#fff;transform:scale(1.25) rotate(-8deg)} /* publics */ .c8-foot .c8-mini{text-wrap:balance;font:600 12px var(--c8-mono);letter-spacing:.14em;text-transform:uppercase;color:#b7d3e6;margin-bottom:8px} .c8-foot .c8-targets{display:flex;flex-wrap:wrap;gap:6px 12px;color:#fff;font-weight:700;font-size:14px} .c8-foot .c8-targets i{color:#6fd66b;margin-right:6px} /* zone */ .c8-foot .c8-zone-dpt{color:#fff;font-weight:700;font-size:15px;margin-bottom:12px} .c8-scope.c8-foot ul.c8-cities{grid-template-columns:1fr 1fr;gap:7px 14px} .c8-scope.c8-foot .c8-cities a{gap:8px;font-size:14px;font-weight:400;color:var(--c8-on-blue-2)} .c8-scope.c8-foot .c8-cities a:hover{color:#fff} .c8-foot .c8-cities i{color:var(--c8-sky);font-size:11px;transition:transform .25s var(--c8-ease),color .2s} /* bas de page */ .et-l--footer .c8-foot .et_pb_column.c8-foot-bot{display:flex!important;flex-direction:row!important;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 24px; margin-top:40px!important;padding-top:24px!important;border-top:1px solid rgba(255,255,255,.18);font:12px/1.6 var(--c8-mono);color:#b7d3e6} .c8-foot-bot>.et_pb_module{width:auto!important;flex:none} .c8-foot .c8-legal p{display:flex;flex-wrap:wrap;gap:6px 18px} .c8-scope.c8-foot .c8-legal a,.c8-scope.c8-foot .c8-credit a{color:#d6e8f4} .c8-scope.c8-foot .c8-legal a:hover,.c8-scope.c8-foot .c8-credit a:hover{color:#fff} .c8-foot .c8-foot-end .et_pb_text_inner{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px} .c8-scope.c8-foot .c8-label{letter-spacing:.1em;text-transform:uppercase;color:#b7d3e6} .c8-scope.c8-foot .c8-label:hover{color:#fff} .c8-scope.c8-foot ul.c8-social{display:flex;gap:8px} .c8-scope.c8-foot .c8-social a{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28); transition:transform .25s var(--c8-ease),background-color .2s,border-color .2s,box-shadow .25s} .c8-foot .c8-social a i{transition:transform .3s var(--c8-ease)} .c8-scope.c8-foot .c8-social a[aria-label="Facebook"]:hover,.c8-scope.c8-foot .c8-social a[aria-label="Facebook"]:focus-visible{background:#1877f2;border-color:#1877f2;color:#fff} .c8-scope.c8-foot .c8-social a[aria-label="LinkedIn"]:hover,.c8-scope.c8-foot .c8-social a[aria-label="LinkedIn"]:focus-visible{background:#0a66c2;border-color:#0a66c2;color:#fff} .c8-scope.c8-foot .c8-social a:hover,.c8-scope.c8-foot .c8-social a:focus-visible{transform:translateY(-3px);box-shadow:0 12px 24px -12px rgba(0,0,0,.6)} .c8-foot .c8-social a:hover i,.c8-foot .c8-social a:focus-visible i{transform:scale(1.12) rotate(-8deg)} @media(max-width:1180px){ .et-l--footer .c8-foot .et_pb_column.c8-foot-grid{grid-template-columns:1fr 1fr;grid-template-areas:"id id" "svc c2i" "sol sol" "zone zone";row-gap:34px} .c8-foot .c8-f-sol{padding-left:0!important} } @media(max-width:560px){ .et-l--footer .et_pb_section.c8-foot{padding-top:44px!important} .et-l--footer .c8-foot .et_pb_row{padding:0 20px!important} .et-l--footer .c8-foot .et_pb_column.c8-foot-grid{gap:30px 16px} .c8-foot .et_pb_group.c8-id-row{flex-direction:column!important;align-items:center;gap:16px} .c8-foot .c8-idt img{width:124px!important} .c8-scope.c8-foot .c8-flist a{font-size:14px;gap:8px;align-items:flex-start} .c8-foot .c8-flist i{margin-top:3px} .c8-foot .c8-targets{font-size:13.5px;gap:6px 10px} .c8-foot .c8-targets i{margin-right:4px} .et-l--footer .c8-foot .et_pb_column.c8-foot-bot{flex-direction:column!important;align-items:flex-start;gap:10px;margin-top:32px!important} .c8-foot .c8-legal p{gap:6px 14px} } /* ════════════════════ BOUTON FLOTTANT + POPUP (déplacés sous ) ════════════════════ */ .c8-fab{position:fixed;right:22px;bottom:22px;z-index:90;background:var(--c8-green);color:var(--c8-on-green);border:0;border-radius:40px;padding:15px 22px;font:800 15px/1.2 var(--c8-body); box-shadow:0 14px 30px -10px rgba(0,0,0,.45);cursor:pointer;display:flex;align-items:center;gap:10px;transition:background-color .2s,transform .25s var(--c8-ease),opacity .25s,box-shadow .25s} .c8-fab i{font-size:18px;transition:transform .3s var(--c8-ease)} .c8-fab:hover,.c8-fab:focus-visible{background:var(--c8-green-hover);transform:translateY(-3px);box-shadow:0 18px 34px -12px rgba(0,0,0,.5)} .c8-fab:hover i{transform:scale(1.15) rotate(-8deg)} .c8-foot .c8-fab{display:none} /* test cyber (page 197, v4) : sa barre de quiz est fixée en bas (74 px) → le bouton passe au-dessus */ body.page-id-197 .c8-fab{bottom:96px} .c8-nav-open .c8-fab{display:none} @media(max-width:900px){html:not(.c8-fab-on) .c8-fab{opacity:0;transform:translateY(16px);pointer-events:none}} @media(max-width:560px){.c8-fab span{display:none}.c8-fab{padding:16px}} .c8-ov{position:fixed;inset:0;z-index:110001;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(11,37,64,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--c8-ink)} .c8-ov.is-open{display:flex} .c8-ov *{box-sizing:border-box} .c8-ov p{padding:0;margin:0} .c8-panel{width:100%;max-width:860px;max-height:92vh;overflow:auto;border-radius:20px;background:#fff;box-shadow:0 50px 100px -40px rgba(0,0,0,.7);overscroll-behavior:contain} .c8-panel-head{position:relative;padding:26px 32px;border-radius:20px 20px 0 0;color:#fff; background:radial-gradient(ellipse 55% 80% at 85% 10%,rgba(0,159,224,.45),transparent 60%),linear-gradient(160deg,var(--c8-blue-deep-2),var(--c8-blue-deep))} .c8-panel-head .c8-eyebrow{color:var(--c8-sky)} .c8-ov .c8-ovt{font:700 26px/1.15 var(--c8-display);margin-top:4px;color:#fff} .c8-x{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;font-size:18px;cursor:pointer; display:grid;place-items:center;transition:background-color .2s,transform .25s var(--c8-ease)} .c8-x:hover,.c8-x:focus-visible{background:rgba(255,255,255,.25);transform:rotate(90deg)} .c8-panel-body{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;padding:28px 32px 32px} .c8-ov .c8-ph{font:700 17px/1.2 var(--c8-display);margin-bottom:12px;display:flex;gap:8px;align-items:center} .c8-ov .c8-ph i{color:var(--c8-blue)} .c8-ov-form{display:grid;gap:10px} .c8-ov fieldset{border:0;margin:0;padding:0;min-width:0} .c8-ov legend,.c8-ov label{display:block;font-size:13px;font-weight:700;color:var(--c8-ink);margin-bottom:4px;padding:0} .c8-ov input:not([type=radio]),.c8-ov select,.c8-ov textarea{width:100%;font:16px/1.4 var(--c8-body);color:var(--c8-ink);background:#fff;border:1px solid #c9d6e0;border-radius:8px;padding:10px 12px; transition:border-color .2s,box-shadow .2s} .c8-ov input:not([type=radio]):focus,.c8-ov select:focus,.c8-ov textarea:focus{outline:none;border-color:var(--c8-blue);box-shadow:0 0 0 3px rgba(0,159,224,.2)} .c8-ov input[aria-invalid=true]{border-color:#c62a2d} .c8-ov textarea{resize:vertical} .c8-req{color:#c62a2d} .c8-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .c8-subjects{display:grid;grid-template-columns:repeat(5,1fr);gap:6px} .c8-ov .c8-subjects label{margin:0;position:relative} .c8-subjects input{position:absolute;opacity:0;width:1px;height:1px} .c8-subjects span{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 6px;border:1px solid var(--c8-line);border-radius:10px;font-size:12px;font-weight:700;color:var(--c8-ink); cursor:pointer;text-align:center;line-height:1.2;height:100%;transition:border-color .15s,background-color .15s,transform .2s var(--c8-ease)} .c8-subjects span:hover{border-color:var(--c8-blue);transform:translateY(-2px)} .c8-subjects span i{font-size:20px;color:var(--c8-blue-deep)} .c8-subjects input:checked+span{border-color:var(--c8-blue);background:var(--c8-tint);box-shadow:0 0 0 2px var(--c8-blue)} .c8-subjects input:focus-visible+span{outline:3px solid var(--c8-blue);outline-offset:2px} .c8-ov .c8-ov-send{justify-content:center;width:100%} .c8-ov-msg:empty{display:none} .c8-ov-msg,.c8-ov p.c8-ov-msg{font-size:14px;line-height:1.45;padding:10px 12px;border-radius:8px;background:var(--c8-tint);color:var(--c8-blue-deep)} .c8-ov-msg.is-error{background:#fdeceb;color:#9b1c1f} /* envoi serveur (5.0.4) : honeypot, widget Turnstile, bouton occupé, écran « Demande envoyée » */ .c8-ov-form[hidden],.c8-ov-done[hidden]{display:none} .c8-ov .c8-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .c8-ts{min-height:65px} .c8-ts:empty{min-height:0} .c8-scope .c8-ov-msg a{color:inherit;font-weight:700;text-decoration:underline} .c8-ov .c8-ov-send[disabled]{opacity:.7;cursor:progress} .c8-ov-done{display:grid;gap:12px;align-content:start;padding:20px;border:1px solid var(--c8-line);border-radius:12px;background:var(--c8-bg-soft);font-size:15px;line-height:1.5} .c8-ov .c8-done-h{display:flex;gap:10px;align-items:center;font:700 20px/1.2 var(--c8-display);color:var(--c8-blue-deep)} .c8-done-h i{color:var(--c8-green);font-size:24px} .c8-scope .c8-ov-done a{color:var(--c8-blue-deep);font-weight:700} .c8-ov .c8-done-new{justify-self:start;background:#fff;border-color:var(--c8-blue-deep);color:var(--c8-blue-deep)} .c8-ov .c8-done-new:hover{background:var(--c8-blue-deep);color:#fff} .c8-scope .c8-act{display:flex;align-items:center;gap:14px;padding:13px 15px;border:1px solid var(--c8-line);border-radius:12px;margin-bottom:10px;color:var(--c8-ink);font-weight:700;background:#fff; transition:border-color .2s,background-color .2s,transform .25s var(--c8-ease)} .c8-scope .c8-act:hover,.c8-scope .c8-act:focus-visible{border-color:var(--c8-blue);background:var(--c8-bg-soft);transform:translateX(4px)} .c8-act i{font-size:22px;color:var(--c8-blue-deep);width:28px;text-align:center;transition:transform .25s var(--c8-ease)} .c8-act:hover i{transform:scale(1.15) rotate(-8deg)} .c8-act small{display:block;font-weight:500;color:var(--c8-ink-2);font-size:13px} .c8-call{background:var(--c8-green);color:#fff;border-radius:12px;padding:16px 18px;margin-top:6px} .c8-scope .c8-call a{color:#fff;font:800 24px/1.2 var(--c8-display);display:flex;gap:10px;align-items:center;transition:transform .25s var(--c8-ease)} .c8-scope .c8-call a:hover{transform:translateX(4px)} .c8-ov .c8-call p{font-size:14px;margin-top:6px;font-weight:600} .c8-head-call{display:none} @media(max-width:900px){.c8-panel-body{grid-template-columns:1fr}} @media(max-width:560px){ .c8-ov{padding:8px} .c8-panel{max-height:calc(100dvh - 16px)} .c8-row2{grid-template-columns:1fr} .c8-subjects{grid-template-columns:repeat(3,1fr)} .c8-panel-head{position:sticky;top:0;z-index:2;padding:14px 64px 14px 20px} .c8-panel-body{padding-left:20px;padding-right:20px} .c8-panel-head .c8-eyebrow{font-size:11px} .c8-ov .c8-ovt{font-size:21px} .c8-x{top:12px;right:12px} .c8-scope .c8-head-call{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:8px 14px;border-radius:30px;background:var(--c8-green);color:var(--c8-on-green);font-weight:700;font-size:15px} } @media(max-width:360px){.c8-head-call .c8-lbl{display:none}} /* ════════════════════ FORMULAIRE DE LA PAGE CONTACT (5.0.31) ════════════════════ * [c2i_contact_form] (inc/contact-form.php) : mêmes champs et même rendu que le popup, dans un panneau posé * dans la page (module Texte Divi). Demande de Sylvain 24/09 : « les deux formulaires doivent se ressembler ». * Préfixe body #page-container #main-content (2 ID) : passe devant les réglages du module Texte (p, marges, couleurs). */ body #page-container #main-content .c8-cf{box-sizing:border-box;border-radius:20px;background:#fff;color:var(--c8-ink);box-shadow:0 30px 60px -34px rgba(11,37,64,.55);border:1px solid var(--c8-line);text-align:left;font-family:var(--c8-body)} body #page-container #main-content .c8-cf *{box-sizing:border-box} body #page-container #main-content .c8-cf p{padding:0;margin:0;font-size:inherit;line-height:inherit} /* en-tête (24/09) : titre seul à gauche, délai de réponse à droite ; sous le titre sur mobile */ body #page-container #main-content .c8-cf .c8-panel-head{padding:18px 28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 18px} body #page-container #main-content .c8-cf .c8-cf-sla{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--c8-sky)} @media(max-width:560px){body #page-container #main-content .c8-cf .c8-cf-sla{font-size:13px}} body #page-container #main-content .c8-cf .c8-ovt{font:700 22px/1.15 var(--c8-display);margin:0;color:#fff} body #page-container #main-content .c8-cf-body{padding:24px 28px 28px} body #page-container #main-content .c8-cf .c8-ph{font:700 17px/1.2 var(--c8-display);margin-bottom:12px;display:flex;gap:8px;align-items:center;color:var(--c8-ink)} body #page-container #main-content .c8-cf .c8-ph i{color:var(--c8-blue)} body #page-container #main-content .c8-cf fieldset{border:0;margin:0;padding:0;min-width:0} body #page-container #main-content .c8-cf legend,body #page-container #main-content .c8-cf label{display:block;font-size:13px;font-weight:700;color:var(--c8-ink);margin-bottom:4px;padding:0;line-height:1.3} body #page-container #main-content .c8-cf input:not([type=radio]),body #page-container #main-content .c8-cf select,body #page-container #main-content .c8-cf textarea{width:100%;font:16px/1.4 var(--c8-body);color:var(--c8-ink);background:#fff;border:1px solid #c9d6e0;border-radius:8px;padding:10px 12px;margin:0; transition:border-color .2s,box-shadow .2s} body #page-container #main-content .c8-cf input:not([type=radio]):focus,body #page-container #main-content .c8-cf select:focus,body #page-container #main-content .c8-cf textarea:focus{outline:none;border-color:var(--c8-blue);box-shadow:0 0 0 3px rgba(0,159,224,.2)} body #page-container #main-content .c8-cf input[aria-invalid=true]{border-color:#c62a2d} body #page-container #main-content .c8-cf textarea{resize:vertical} body #page-container #main-content .c8-cf .c8-subjects label{margin:0;position:relative} /* pastilles « Sujet » et message : la remise à zéro des pages v8 (:where(.c8-home *) padding:0) les écrasait (24/09) */ body #page-container #main-content .c8-cf .c8-subjects span{padding:12px 6px} body #page-container #main-content .c8-cf .c8-ov-msg{padding:10px 12px} body #page-container #main-content .c8-cf .c8-ov-done{padding:20px} body #page-container #main-content .c8-cf .c8-ov-send,body #page-container #main-content .c8-cf .c8-done-new{padding:14px 26px} body #page-container #main-content .c8-cf .c8-cf-note button{padding:0;margin:0} /* couleurs : .sec.blue p (texte clair des sections bleues) rendait le message et l'écran « envoyé » illisibles */ body #page-container #main-content .c8-cf .c8-ov-msg{color:var(--c8-blue-deep)} body #page-container #main-content .c8-cf .c8-ov-msg.is-error{color:#9b1c1f} body #page-container #main-content .c8-cf .c8-ov-done p{color:var(--c8-ink)} body #page-container #main-content .c8-cf .c8-ov-done .c8-done-h{color:var(--c8-blue-deep)} body #page-container #main-content .c8-cf .c8-ov-send{justify-content:center;width:100%} body #page-container #main-content .c8-cf .c8-ov-send[disabled]{opacity:.7;cursor:progress} body #page-container #main-content .c8-cf .c8-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} body #page-container #main-content .c8-cf .c8-done-h{display:flex;gap:10px;align-items:center;font:700 20px/1.2 var(--c8-display);color:var(--c8-blue-deep)} body #page-container #main-content .c8-cf .c8-done-new{justify-self:start;background:#fff;border-color:var(--c8-blue-deep);color:var(--c8-blue-deep)} body #page-container #main-content .c8-cf .c8-done-new:hover{background:var(--c8-blue-deep);color:#fff} body #page-container #main-content .c8-cf .c8-cf-note{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:12px 14px;border-radius:10px;background:var(--c8-bg-soft);font-size:14px;line-height:1.5;color:var(--c8-ink-2)} body #page-container #main-content .c8-cf .c8-cf-note i{color:var(--c8-blue-deep);margin-top:3px} body #page-container #main-content .c8-cf .c8-cf-note button{all:unset;cursor:pointer;font-weight:700;color:var(--c8-blue-deep);text-decoration:underline;text-underline-offset:2px} body #page-container #main-content .c8-cf .c8-cf-note button:hover,body #page-container #main-content .c8-cf .c8-cf-note button:focus-visible{color:var(--c8-blue)} body #page-container #main-content .c8-cf .c8-cf-note button:focus-visible{outline:3px solid var(--c8-blue);outline-offset:2px} @media(max-width:560px){ body #page-container #main-content .c8-cf .c8-panel-head{padding:16px 20px} body #page-container #main-content .c8-cf .c8-ovt{font-size:21px} body #page-container #main-content .c8-cf-body{padding:18px 20px 22px} } /* ════════════════════ GARDE-FOUS ════════════════════ */ @media(prefers-reduced-motion:reduce){ .c8-hdr,.c8-hdr *,.c8-foot *,.c8-fab,.c8-fab *,.c8-ov *,.c8-cf *{transition:none!important} .c8-hdr .c8-brand a:hover img,.c8-svc-top:hover .c8-ico,.c8-svc:focus-within .c8-ico,.c8-scope .c8-svc-drop li a:hover,.c8-svc-drop li a:hover i,.c8-scope .c8-m-svc li a:hover, .c8-scope .c8-more:hover,.et-l--header .c8-hdr a.et_pb_button.c8-hdr-cta:hover,.c8-scope.c8-foot .c8-flist a:hover,.c8-scope.c8-foot .c8-cities a:hover,.c8-foot .c8-flist a:hover i, .c8-scope.c8-foot .c8-social a:hover,.c8-foot .c8-social a:hover i,.c8-scope .c8-label-ec:hover,.c8-fab:hover,.c8-fab:hover i,.c8-scope .c8-act:hover,.c8-act:hover i,.c8-x:hover,.c8-subjects span:hover{transform:none} } @media(max-width:700px),(hover:none){.c8-svc-drop li a::after,.c8-m-svc li a::after{display:none}} /* tactile : pas de survol « collant » après un tap */ @media(hover:none){ .c8-scope .c8-svc-drop li a:hover,.c8-scope .c8-m-svc li a:hover{background:none;transform:none;color:inherit} .c8-svc-drop li a:hover i,.c8-m-svc li a:hover i,.c8-foot .c8-flist a:hover i,.c8-scope.c8-foot .c8-flist a:hover,.c8-scope.c8-foot .c8-cities a:hover,.c8-scope .c8-more:hover, .c8-fab:hover,.c8-scope .c8-act:hover,.c8-subjects span:hover,.c8-burger:hover,.c8-scope .c8-label-ec:hover{transform:none} }