/* ========================================================================== Site Wi-Fi (wifi-bcominfo.com / wifi-bretagne.com) — complements au theme B COM INFO (style.css, repris tel quel). Memes jetons, memes composants ; ici seulement ce que la page Wi-Fi a en plus. ========================================================================== */ /* ========================================================================== La marque « wifi – B COM INFO » de la plateforme (repris de bci.css) : le mot wifi en trace vectoriel, l'onde animee, le logo, le slogan. Une seule valeur commande tout : --mq-l, la largeur du logo. ========================================================================== */ .marque{--mq-l:186px;display:flex;flex-direction:column;align-items:center; margin-bottom:calc(var(--mq-l) * .21)} .marque-bloc{display:flex;align-items:flex-end;justify-content:center; gap:calc(var(--mq-l) * .065);color:var(--bci-heading)} .marque.sombre, .marque-bloc.sombre{color:#fff} .marque.sombre{margin-bottom:0} /* Le nom du produit, sous la marque. Petites capitales espacees : il nomme sans se mettre en avant, et il ne repete pas le logo. */ .mq-produit{margin-top:calc(var(--mq-l) * .05); font-family:var(--bci-font-body);font-weight:600; font-size:calc(var(--mq-l) * .062);letter-spacing:.28em;text-indent:.28em; color:var(--bci-text-muted);white-space:nowrap} .marque.sombre .mq-produit{color:var(--bci-on-dark-muted)} /* .3252 : le haut du f et le point du i affleurent le haut du logo, la ligne de base reste commune. (.3474 mettait le f au-dessus du logo.) */ .mq-wifi{height:calc(var(--mq-l) * .3252);width:auto;flex:none;display:block} .mq-logo{width:var(--mq-l);height:auto;flex:none;display:block} .mq-tiret{flex:none;width:calc(var(--mq-l) * .080); height:calc(var(--mq-l) * .027);border-radius:1px;background:currentColor; margin-bottom:calc(var(--mq-l) * .1118)} .mq-arc1{stroke:var(--bci-red)} .mq-arc2{stroke:var(--bci-navy-soft)} .marque-bloc.sombre .mq-arc2{stroke:#b6bcd2} .mq-pt{fill:var(--bci-red)} .marque-bloc.sombre .mq-pt{fill:#fff} /* L'onde qui part. Les deux arcs fixes restent visibles en permanence : la marque n'est jamais incomplete, l'animation ne fait qu'ajouter. L'origine est le point emetteur, exprimee en pourcentage du cadre. */ .mq-onde{stroke:var(--bci-red);opacity:0; transform-box:view-box;transform-origin:54.68% 28.93%; animation:mq-emission 3.4s cubic-bezier(.22,.61,.36,1) infinite} .marque-bloc.sombre .mq-onde{stroke:#8f9ac2} @keyframes mq-emission{ 0% {opacity:0; transform:scale(.55)} 18% {opacity:.62; transform:scale(.85)} 58% {opacity:0; transform:scale(1.55)} 100% {opacity:0; transform:scale(1.55)} } /* Une marque qui clignote toute la journee sur un poste de reception, c'est fatigant : on la coupe pour qui a demande moins d'animations. */ @media (prefers-reduced-motion: reduce){ .mq-onde{animation:none} } .mq-slogan{margin-top:calc(var(--mq-l) * .085);font-family:var(--bci-font-head); font-size:calc(var(--mq-l) * .072);font-weight:500;font-style:italic; color:var(--bci-navy-soft);letter-spacing:.005em} .marque.sombre .mq-slogan{color:var(--bci-on-dark-muted)} /* dans l'en-tete du site : la marque a gauche, alignee sur le bandeau ; le theme borne les du bloc marque a 46 px : pas le logo de la marque */ .bci-brand--marque { display: inline-block; text-decoration: none; } .bci-brand--marque img.mq-logo, .bci-footer__brand--marque img.mq-logo { width: var(--mq-l); max-height: none; height: auto; } .bci-brand--marque svg.mq-wifi, .bci-footer__brand--marque svg.mq-wifi { height: calc(var(--mq-l) * .3252); width: auto; max-height: none; } .bci-brand--marque .marque { margin-bottom: 0; align-items: flex-start; } .bci-brand--marque .mq-slogan { margin-top: calc(var(--mq-l) * .05); font-size: calc(var(--mq-l) * .11); } @media (max-width: 640px) { .bci-brand--marque .marque { --mq-l: 112px !important; } .bci-brand--marque .mq-slogan { display: none; } } /* le menu sur une ligne : jamais de libelle coupe, et de la place gagnee avant le passage au menu replie (960 px) : marque plus petite, entrees plus serrees, texte du telephone masque */ .bci-nav a { white-space: nowrap; } @media (max-width: 1320px) { .bci-header__inner { gap: 1rem; } .bci-brand--marque .marque { --mq-l: 128px !important; } .bci-nav a { padding: 0.55rem 0.6rem; font-size: 0.9rem; } .bci-header__phone-text { display: none; } } @media (max-width: 1120px) and (min-width: 961px) { .bci-brand--marque .marque { --mq-l: 112px !important; } .bci-brand--marque .mq-slogan { display: none; } .bci-nav a { padding: 0.5rem 0.45rem; font-size: 0.86rem; } .bci-header__phone { display: none; } } /* dans le pied de page */ /* pas de cartouche blanc : la marque en reserve, directement sur le fond sombre */ .bci-footer__brand--marque { background: none; padding: 0; border-radius: 0; margin-bottom: 18px; } .bci-footer__brand--marque .marque { align-items: flex-start; margin-bottom: 0; } .bci-footer__brand--marque .mq-slogan { color: var(--bci-on-dark-muted, #b6bcd2); } /* sous le logo, dans l'en-tete : le domaine du site */ .bci-brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; } .wifi-brand__baseline { font-family: var(--bci-font-head); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bci-mauve); line-height: 1; padding-left: 2px; } @media (max-width: 640px) { .wifi-brand__baseline { display: none; } } /* l'etat « prise en charge » dans le panneau du hero : ambre, pas vert */ .bci-panel__state--warn { color: var(--bci-amber); } .bci-panel__state--warn i { background: var(--bci-amber); box-shadow: 0 0 0 4px rgba(224, 161, 42, .18); } /* carte mise en avant (supervision & maintenance) */ .bci-card--accent { border-color: var(--bci-red-20); box-shadow: var(--bci-shadow); } .bci-card--accent .bci-card__icon { background: var(--bci-red-08); color: var(--bci-red); } /* hotels : bandeau sous les quatre cartes de l'offre */ .wifi-hotels { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 44px); align-items: center; margin-top: clamp(22px, 3vw, 32px); padding: clamp(20px, 3vw, 30px); background: var(--bci-surface); border: 1px solid var(--bci-border); border-left: 4px solid var(--bci-red); border-radius: var(--bci-radius-lg); box-shadow: var(--bci-shadow-sm); } .wifi-hotels h3 { margin: 6px 0 10px; font-family: var(--bci-font-head); font-size: 1.35rem; color: var(--bci-heading); } .wifi-hotels p { margin: 0; color: var(--bci-text-muted); line-height: 1.65; } .wifi-hotels__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .wifi-hotels__liste li { position: relative; padding-left: 22px; color: var(--bci-text); line-height: 1.5; } .wifi-hotels__liste li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--bci-red-08); box-shadow: inset 0 0 0 3px var(--bci-red); } @media (max-width: 860px) { .wifi-hotels { grid-template-columns: 1fr; } } /* ecran de demarrage : la marque wifi - B COM INFO a la place du logo compact, le slogan en italique (police de titre) a la place de la ligne mono */ .bci-splash__mark .marque { margin-bottom: 0; } .bci-splash__mark .mq-slogan { display: none; } .bci-splash__baseline { font-family: var(--bci-font-head); font-style: italic; font-weight: 500; font-size: clamp(1rem, 2.4vw, 1.35rem); letter-spacing: .005em; text-transform: none; color: var(--bci-navy-soft); margin-top: 1.1rem; } .bci-splash__bar { width: min(300px, 52vw); } @media (prefers-reduced-motion: reduce) { .bci-splash { display: none; } } /* B COM INFO : logo, metiers, lien vers le site principal */ .wifi-bci { background: var(--bci-surface); border: 1px solid var(--bci-border); border-radius: var(--bci-radius-lg); box-shadow: var(--bci-shadow-sm); padding: clamp(24px, 3.5vw, 40px); } .wifi-bci__tete { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(22px, 4vw, 44px); align-items: center; } .wifi-bci__logo { display: block; padding: 18px; border: 1px solid var(--bci-border); border-radius: var(--bci-radius); background: #fff; } .wifi-bci__logo img { display: block; width: 100%; height: auto; } .wifi-bci__tete h2 { margin: 6px 0 10px; font-family: var(--bci-font-head); color: var(--bci-heading); font-size: clamp(1.5rem, 2.6vw, 2rem); } .wifi-bci__tete .bci-lead { margin: 0; } .wifi-bci__metiers { list-style: none; margin: clamp(22px, 3vw, 32px) 0 0; padding: clamp(20px, 3vw, 28px) 0 0; border-top: 1px solid var(--bci-border); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; } .wifi-bci__metiers li { display: grid; gap: 4px; padding-left: 16px; position: relative; } .wifi-bci__metiers li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--bci-red); } .wifi-bci__metiers strong { font-family: var(--bci-font-head); color: var(--bci-heading); font-size: 1.02rem; } .wifi-bci__metiers span { color: var(--bci-text-muted); font-size: .94rem; line-height: 1.55; } .wifi-bci__pied { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: clamp(22px, 3vw, 30px); } .wifi-bci__pied span { color: var(--bci-text-muted); font-size: .92rem; } @media (max-width: 960px) { .wifi-bci__metiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .wifi-bci__tete { grid-template-columns: 1fr; } .wifi-bci__logo { width: 200px; } .wifi-bci__metiers { grid-template-columns: 1fr; } } /* la plateforme : illustration + trois points cles */ .wifi-plateforme { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; margin: 0 0 clamp(36px, 5vw, 56px); padding: clamp(18px, 3vw, 28px); background: var(--bci-surface); border: 1px solid var(--bci-border); border-radius: var(--bci-radius-lg); box-shadow: var(--bci-shadow-sm); } .wifi-plateforme__illu { margin: 0; border-radius: var(--bci-radius); overflow: hidden; background: var(--bci-surface-2); } .wifi-plateforme__illu img { display: block; width: 100%; height: auto; } .wifi-plateforme__points { display: grid; gap: 16px; } .wifi-point { display: grid; gap: 4px; padding-left: 18px; position: relative; } .wifi-point::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--bci-red); box-shadow: 0 0 0 4px var(--bci-red-08); } .wifi-point strong { font-family: var(--bci-font-head); font-size: 1.08rem; color: var(--bci-heading); } .wifi-point span { color: var(--bci-text-muted); font-size: .97rem; line-height: 1.6; } @media (max-width: 860px) { .wifi-plateforme { grid-template-columns: 1fr; } } .wifi-features .bci-sector h3 { margin-top: 6px; } /* acces clients sous la grille */ .wifi-acces { text-align: center; margin-top: clamp(24px, 3vw, 36px); color: var(--bci-text-muted); } .wifi-acces a { font-weight: 600; color: var(--bci-navy); } /* bloc « ce qu'il nous faut pour chiffrer » a la place du formulaire */ .wifi-devis { background: var(--bci-surface); border: 1px solid var(--bci-border); border-radius: var(--bci-radius-lg); padding: clamp(22px, 3vw, 32px); box-shadow: var(--bci-shadow-sm); } .wifi-devis h3 { margin: 0 0 12px; font-family: var(--bci-font-head); color: var(--bci-heading); } .wifi-devis .bci-btn { margin-top: 14px; } .bci-form-note { font-size: .92rem; color: var(--bci-text-muted); margin: 14px 0 0; } .nowrap { white-space: nowrap; } /* page mentions legales */ .wifi-page { padding: clamp(40px, 6vw, 72px) 0; } .wifi-page h1 { font-family: var(--bci-font-head); color: var(--bci-heading); font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin: 0 0 .4em; } .wifi-page h2 { font-family: var(--bci-font-head); color: var(--bci-heading); font-size: 1.3rem; margin: 2em 0 .5em; } .wifi-page .bci-container { max-width: var(--bci-container-narrow); } .wifi-page p, .wifi-page li { color: var(--bci-text); } /* --------------------------------------------------------------- * Galerie de la supervision : vision réception / vision direction, * vignettes uniformes (fenêtre de navigateur), visionneuse avec zoom * ------------------------------------------------------------ */ .wifi-galerie { margin: clamp(28px, 4vw, 48px) 0 clamp(40px, 6vw, 72px); } .wifi-galerie__tete { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; } .wifi-galerie__tete h3 { font-family: var(--bci-font-head); font-size: clamp(1.25rem, 2.3vw, 1.6rem); color: var(--bci-heading); margin: 0 0 4px; } .wifi-galerie__tete p { margin: 0; color: var(--bci-text-muted); font-size: .95rem; } .wifi-galerie__onglets { display: inline-flex; background: var(--bci-surface-2); border: 1px solid var(--bci-border); border-radius: 999px; padding: 4px; gap: 4px; } .wifi-galerie__onglets button { border: 0; background: transparent; color: var(--bci-text-muted); font: 600 .92rem var(--bci-font-body); padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; } .wifi-galerie__onglets button[aria-selected="true"] { background: var(--bci-navy); color: #fff; box-shadow: 0 2px 8px var(--bci-navy-10); } .wifi-galerie__onglets button:focus-visible { outline: 2px solid var(--bci-navy); outline-offset: 2px; } .wifi-galerie__groupe { display: flex; align-items: center; gap: 12px; white-space: nowrap; font-family: var(--bci-font-head); font-size: 1.05rem; color: var(--bci-navy); margin: 26px 0 12px; } .wifi-galerie__groupe::after { content: ""; flex: 1; height: 1px; background: var(--bci-border); } .wifi-galerie__groupe[hidden] { display: none; } .wifi-galerie__groupe:first-of-type { margin-top: 0; } .wifi-galerie__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; } .wifi-galerie__grille[hidden] { display: none; } .wifi-vignette[hidden] { display: none; } .wifi-vignette { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--bci-surface); border: 1px solid var(--bci-border); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 16px var(--bci-navy-05); transition: transform .2s, box-shadow .2s; } .wifi-vignette:hover, .wifi-vignette:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 30px var(--bci-navy-10); outline: none; } .wifi-vignette--large { grid-column: span 2; } /* la barre d'une fenêtre de navigateur, au-dessus de chaque capture */ .wifi-vignette::before { content: ""; display: block; height: 22px; background: linear-gradient(#f3f5fa, #e9edf5); border-bottom: 1px solid var(--bci-border); background-image: radial-gradient(circle, #e0284a 0 3.5px, transparent 4px), radial-gradient(circle, #f2b134 0 3.5px, transparent 4px), radial-gradient(circle, #1f9d6b 0 3.5px, transparent 4px); background-repeat: no-repeat; background-position: 12px 50%, 26px 50%, 40px 50%; background-size: 8px 8px, 8px 8px, 8px 8px; background-color: #eef1f7; } .wifi-vignette img { display: block; width: 100%; height: auto; background: var(--bci-surface-2); } .wifi-vignette figcaption { display: grid; gap: 3px; padding: 12px 16px 14px; border-top: 1px solid var(--bci-border); margin-top: auto; } .wifi-vignette figcaption strong { font-family: var(--bci-font-head); color: var(--bci-heading); font-size: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .wifi-vignette figcaption strong::after { content: "\2922"; font-size: .85em; color: var(--bci-navy-soft); font-weight: 400; flex: none; } .wifi-vignette figcaption span { color: var(--bci-text-muted); font-size: .9rem; line-height: 1.45; } /* tuile « plaquette PDF » */ .wifi-vignette--pdf { background: linear-gradient(160deg, var(--bci-navy) 0%, var(--bci-navy-soft) 100%); color: #fff; border-color: transparent; } .wifi-vignette--pdf::before { display: none; } .wifi-pdf { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; flex: 1; } .wifi-pdf__icone { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 56px; border: 2px solid rgba(255, 255, 255, .7); border-radius: 6px 14px 6px 6px; font: 800 .8rem var(--bci-font-head); letter-spacing: .06em; margin-bottom: 6px; } .wifi-pdf strong { font-family: var(--bci-font-head); font-size: 1.1rem; } .wifi-pdf span { color: rgba(255, 255, 255, .8); font-size: .92rem; line-height: 1.5; } .wifi-pdf em { margin-top: auto; font-style: normal; font-weight: 700; font-size: .95rem; } .wifi-pdf em::after { content: " \2193"; } @media (max-width: 900px) { .wifi-galerie__grille { grid-template-columns: 1fr 1fr; } .wifi-vignette--large { grid-column: span 2; } } @media (max-width: 560px) { .wifi-galerie__grille { grid-template-columns: 1fr; } .wifi-vignette--large { grid-column: auto; } } /* Visionneuse plein écran */ .wifi-lb { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 24, 40, .94); color: #fff; } .wifi-lb[hidden] { display: none; } .wifi-lb__scene { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; } .wifi-lb__scene.is-drag { cursor: grabbing; } .wifi-lb__scene img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; user-select: none; -webkit-user-drag: none; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); background: #fff; } .wifi-lb__btn { position: absolute; z-index: 2; border: 0; background: rgba(255, 255, 255, .12); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 30px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; } .wifi-lb__btn:hover, .wifi-lb__btn:focus-visible { background: rgba(255, 255, 255, .28); outline: none; } .wifi-lb__btn--fermer { top: 14px; right: 14px; } .wifi-lb__btn--prec { left: 14px; top: 50%; transform: translateY(-50%); } .wifi-lb__btn--suiv { right: 14px; top: 50%; transform: translateY(-50%); } .wifi-lb__outils { position: absolute; z-index: 2; top: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; background: rgba(255, 255, 255, .12); border-radius: 999px; padding: 4px; } .wifi-lb__outils button { border: 0; background: transparent; color: #fff; font: 600 .95rem var(--bci-font-body); min-width: 40px; height: 36px; border-radius: 999px; cursor: pointer; } .wifi-lb__outils button:hover, .wifi-lb__outils button:focus-visible { background: rgba(255, 255, 255, .22); outline: none; } .wifi-lb__legende { position: absolute; z-index: 2; left: 50%; bottom: 16px; transform: translateX(-50%); max-width: min(900px, calc(100% - 32px)); margin: 0; padding: 10px 16px; background: rgba(20, 24, 40, .8); border-radius: 10px; font-size: .95rem; line-height: 1.5; text-align: center; } .wifi-lb__legende:empty { display: none; } @media (max-width: 700px) { .wifi-lb__btn--prec, .wifi-lb__btn--suiv { top: auto; bottom: 90px; transform: none; } .wifi-lb__legende { bottom: 12px; font-size: .85rem; } } /* --------------------------------------------------------------- * Thème Wi-Fi : un parc de bornes et de switchs. Sur l'accueil, des * bornes (SVG intégré dans la page) avec leurs zones de couverture, * quelques switchs en coffret, trois bornes * principales qui émettent (animation SMIL, sans script) ; le même * parc, figé et plus léger, reste en fond fixe derrière toute la page. Pictogramme Wi-Fi sur les * surtitres et les chiffres clés. CSP : img-src data:, pas de script. * ------------------------------------------------------------ */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 1000%22 width=%221600%22 height=%221000%22%3E%3Ccircle cx=%22730%22 cy=%22553%22 r=%2214%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.120%22/%3E%3Ccircle cx=%22730%22 cy=%22553%22 r=%2228%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.072%22/%3E%3Ccircle cx=%22730%22 cy=%22553%22 r=%2242%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.036%22/%3E%3Ccircle cx=%22730%22 cy=%22553%22 r=%223.5%22 fill=%22%232c3457%22 fill-opacity=%220.28%22/%3E%3Ccircle cx=%221428%22 cy=%22470%22 r=%2214%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.120%22/%3E%3Ccircle cx=%221428%22 cy=%22470%22 r=%2228%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.072%22/%3E%3Ccircle cx=%221428%22 cy=%22470%22 r=%2242%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.036%22/%3E%3Ccircle cx=%221428%22 cy=%22470%22 r=%223.5%22 fill=%22%232c3457%22 fill-opacity=%220.28%22/%3E%3Ccircle cx=%22333%22 cy=%22510%22 r=%2214%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.120%22/%3E%3Ccircle cx=%22333%22 cy=%22510%22 r=%2228%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.072%22/%3E%3Ccircle cx=%22333%22 cy=%22510%22 r=%2242%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.036%22/%3E%3Ccircle cx=%22333%22 cy=%22510%22 r=%223.5%22 fill=%22%232c3457%22 fill-opacity=%220.28%22/%3E%3Ccircle cx=%22992%22 cy=%22758%22 r=%2214%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.120%22/%3E%3Ccircle cx=%22992%22 cy=%22758%22 r=%2228%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.072%22/%3E%3Ccircle cx=%22992%22 cy=%22758%22 r=%2242%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.036%22/%3E%3Ccircle cx=%22992%22 cy=%22758%22 r=%223.5%22 fill=%22%232c3457%22 fill-opacity=%220.28%22/%3E%3Ccircle cx=%22194%22 cy=%22772%22 r=%2214%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.120%22/%3E%3Ccircle cx=%22194%22 cy=%22772%22 r=%2228%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.072%22/%3E%3Ccircle cx=%22194%22 cy=%22772%22 r=%2242%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.036%22/%3E%3Ccircle cx=%22194%22 cy=%22772%22 r=%223.5%22 fill=%22%232c3457%22 fill-opacity=%220.28%22/%3E%3Ccircle cx=%221086%22 cy=%2297%22 r=%2214%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.120%22/%3E%3Ccircle cx=%221086%22 cy=%2297%22 r=%2228%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.072%22/%3E%3Ccircle cx=%221086%22 cy=%2297%22 r=%2242%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.036%22/%3E%3Ccircle cx=%221086%22 cy=%2297%22 r=%223.5%22 fill=%22%232c3457%22 fill-opacity=%220.28%22/%3E%3Ccircle cx=%221514%22 cy=%22909%22 r=%2214%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.120%22/%3E%3Ccircle cx=%221514%22 cy=%22909%22 r=%2228%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.072%22/%3E%3Ccircle cx=%221514%22 cy=%22909%22 r=%2242%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.036%22/%3E%3Ccircle cx=%221514%22 cy=%22909%22 r=%223.5%22 fill=%22%232c3457%22 fill-opacity=%220.28%22/%3E%3Ccircle cx=%22293%22 cy=%2273%22 r=%2214%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.120%22/%3E%3Ccircle cx=%22293%22 cy=%2273%22 r=%2228%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.072%22/%3E%3Ccircle cx=%22293%22 cy=%2273%22 r=%2242%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.036%22/%3E%3Ccircle cx=%22293%22 cy=%2273%22 r=%223.5%22 fill=%22%232c3457%22 fill-opacity=%220.28%22/%3E%3Ccircle cx=%22527%22 cy=%22262%22 r=%2214%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.120%22/%3E%3Ccircle cx=%22527%22 cy=%22262%22 r=%2228%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.072%22/%3E%3Ccircle cx=%22527%22 cy=%22262%22 r=%2242%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.036%22/%3E%3Ccircle cx=%22527%22 cy=%22262%22 r=%223.5%22 fill=%22%232c3457%22 fill-opacity=%220.28%22/%3E%3Ccircle cx=%2261%22 cy=%22245%22 r=%2214%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.120%22/%3E%3Ccircle cx=%2261%22 cy=%22245%22 r=%2228%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.072%22/%3E%3Ccircle cx=%2261%22 cy=%22245%22 r=%2242%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.036%22/%3E%3Ccircle cx=%2261%22 cy=%22245%22 r=%223.5%22 fill=%22%232c3457%22 fill-opacity=%220.28%22/%3E%3Ccircle cx=%22510%22 cy=%22839%22 r=%2214%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.120%22/%3E%3Ccircle cx=%22510%22 cy=%22839%22 r=%2228%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.072%22/%3E%3Ccircle cx=%22510%22 cy=%22839%22 r=%2242%22 fill=%22none%22 stroke=%22%232c3457%22 stroke-width=%221.4%22 stroke-opacity=%220.036%22/%3E%3Ccircle cx=%22510%22 cy=%22839%22 r=%223.5%22 fill=%22%232c3457%22 fill-opacity=%220.28%22/%3E%3Cg transform=%22translate%281172,337%29%22 stroke=%22%232c3457%22 stroke-opacity=%220.128%22 fill=%22none%22 stroke-width=%221.4%22%3E%3Crect x=%220%22 y=%220%22 width=%2264%22 height=%2224%22 rx=%224%22/%3E%3Crect x=%228%22 y=%228%22 width=%226%22 height=%228%22 rx=%221%22/%3E%3Crect x=%2217%22 y=%228%22 width=%226%22 height=%228%22 rx=%221%22/%3E%3Crect x=%2226%22 y=%228%22 width=%226%22 height=%228%22 rx=%221%22/%3E%3Crect x=%2235%22 y=%228%22 width=%226%22 height=%228%22 rx=%221%22/%3E%3Crect x=%2244%22 y=%228%22 width=%226%22 height=%228%22 rx=%221%22/%3E%3Crect x=%2253%22 y=%228%22 width=%226%22 height=%228%22 rx=%221%22/%3E%3C/g%3E%3Ccircle cx=%221231%22 cy=%22345%22 r=%221.8%22 fill=%22%231f9d6b%22 fill-opacity=%220.28%22/%3E%3Cg transform=%22translate%28911,306%29%22 stroke=%22%232c3457%22 stroke-opacity=%220.128%22 fill=%22none%22 stroke-width=%221.4%22%3E%3Crect x=%220%22 y=%220%22 width=%2264%22 height=%2224%22 rx=%224%22/%3E%3Crect x=%228%22 y=%228%22 width=%226%22 height=%228%22 rx=%221%22/%3E%3Crect x=%2217%22 y=%228%22 width=%226%22 height=%228%22 rx=%221%22/%3E%3Crect x=%2226%22 y=%228%22 width=%226%22 height=%228%22 rx=%221%22/%3E%3Crect x=%2235%22 y=%228%22 width=%226%22 height=%228%22 rx=%221%22/%3E%3Crect x=%2244%22 y=%228%22 width=%226%22 height=%228%22 rx=%221%22/%3E%3Crect x=%2253%22 y=%228%22 width=%226%22 height=%228%22 rx=%221%22/%3E%3C/g%3E%3Ccircle cx=%22970%22 cy=%22314%22 r=%221.8%22 fill=%22%231f9d6b%22 fill-opacity=%220.28%22/%3E%3Cg transform=%22translate%281202,853%29%22 stroke=%22%232c3457%22 stroke-opacity=%220.128%22 fill=%22none%22 stroke-width=%221.4%22%3E%3Crect x=%220%22 y=%220%22 width=%2264%22 height=%2224%22 rx=%224%22/%3E%3Crect x=%228%22 y=%228%22 width=%226%22 height=%228%22 rx=%221%22/%3E%3Crect x=%2217%22 y=%228%22 width=%226%22 height=%228%22 rx=%221%22/%3E%3Crect x=%2226%22 y=%228%22 width=%226%22 height=%228%22 rx=%221%22/%3E%3Crect x=%2235%22 y=%228%22 width=%226%22 height=%228%22 rx=%221%22/%3E%3Crect x=%2244%22 y=%228%22 width=%226%22 height=%228%22 rx=%221%22/%3E%3Crect x=%2253%22 y=%228%22 width=%226%22 height=%228%22 rx=%221%22/%3E%3C/g%3E%3Ccircle cx=%221261%22 cy=%22861%22 r=%221.8%22 fill=%22%231f9d6b%22 fill-opacity=%220.28%22/%3E%3Cg transform=%22translate%281320,85%29%22 stroke=%22%232c3457%22 stroke-opacity=%220.128%22 fill=%22none%22 stroke-width=%221.4%22%3E%3Crect x=%220%22 y=%220%22 width=%2264%22 height=%2224%22 rx=%224%22/%3E%3Crect x=%228%22 y=%228%22 width=%226%22 height=%228%22 rx=%221%22/%3E%3Crect x=%2217%22 y=%228%22 width=%226%22 height=%228%22 rx=%221%22/%3E%3Crect x=%2226%22 y=%228%22 width=%226%22 height=%228%22 rx=%221%22/%3E%3Crect x=%2235%22 y=%228%22 width=%226%22 height=%228%22 rx=%221%22/%3E%3Crect x=%2244%22 y=%228%22 width=%226%22 height=%228%22 rx=%221%22/%3E%3Crect x=%2253%22 y=%228%22 width=%226%22 height=%228%22 rx=%221%22/%3E%3C/g%3E%3Ccircle cx=%221379%22 cy=%2293%22 r=%221.8%22 fill=%22%231f9d6b%22 fill-opacity=%220.28%22/%3E%3C/svg%3E") no-repeat center / cover; } .bci-hero { background: linear-gradient(180deg, rgba(251, 252, 254, .9) 0%, rgba(242, 245, 251, .9) 100%); } .bci-hero__grid-bg { opacity: .5; } .bci-hero::after { display: none; } .bci-hero__reseau { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: .7; mask-image: linear-gradient(90deg, rgba(0, 0, 0, .3) 0 42%, #000 62%); -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .3) 0 42%, #000 62%); } @media (max-width: 900px) { .bci-hero__reseau { mask-image: none; -webkit-mask-image: none; opacity: .45; } } .bci-hero__reseau svg { position: absolute; left: 50%; top: 50%; width: max(100%, 1600px); height: auto; min-height: 100%; transform: translate(-50%, -50%); } /* surtitres et chiffres clés : le pictogramme Wi-Fi */ .bci-eyebrow::before { width: 18px; height: 18px; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M2 8.5a15 15 0 0 1 20 0M5.5 12a10 10 0 0 1 13 0M9 15.5a5 5 0 0 1 6 0%22 fill=%22none%22 stroke=%22%23c61f44%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%2212%22 cy=%2219%22 r=%221.6%22 fill=%22%23c61f44%22/%3E%3C/svg%3E") no-repeat center / contain; border-radius: 0; } .bci-section__head--center .bci-eyebrow::before, .bci-section__head--cen .bci-eyebrow::before { display: inline-block; } .bci-stat { position: relative; padding-left: 26px; } .bci-stat::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M2 8.5a15 15 0 0 1 20 0M5.5 12a10 10 0 0 1 13 0M9 15.5a5 5 0 0 1 6 0%22 fill=%22none%22 stroke=%22%23c61f44%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%2212%22 cy=%2219%22 r=%221.6%22 fill=%22%23c61f44%22/%3E%3C/svg%3E") no-repeat center / contain; opacity: .9; } /* ========================================================================== 2026-11 — Styles en classes (CSP style-src 'self' : plus aucun style="") ========================================================================== */ .marque--splash { --mq-l: min(300px, 52vw); } .marque--l150 { --mq-l: 150px; } .marque--l170 { --mq-l: 170px; } .wifi-mt-section { margin-top: clamp(40px, 5vw, 64px); } .wifi-h2-sm { font-size: clamp(1.4rem, 2.6vw, 1.9rem); } .wifi-h2-md { font-size: clamp(1.5rem, 2.8vw, 2rem); } .wifi-mb-2 { margin-bottom: 2rem; } .wifi-mt-18 { margin-top: 1.8rem; } .wifi-mb-cta { margin-bottom: clamp(46px, 6vw, 74px); } .wifi-mb-06 { margin-bottom: .6rem; } .wifi-muted { color: var(--bci-text-muted); } /* ========================================================================== 2026-11 — Panneau de supervision « vivant » (repris du thème 2.15.0) ========================================================================== */ .bci-panel__live { display: inline-flex; align-items: center; gap: .35rem; margin-left: .7rem; padding: .12rem .5rem; border-radius: 99px; background: rgba(198, 31, 68, .22); font-family: var(--bci-font-mono); font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; } .bci-panel__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff4d6d; animation: bci-live-pulse 1.6s ease-in-out infinite; } @keyframes bci-live-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 109, .7); opacity: 1; } 50% { box-shadow: 0 0 0 5px rgba(255, 77, 109, 0); opacity: .6; } } .bci-panel__clock { margin-left: .6rem; font-family: var(--bci-font-mono); font-size: .72rem; color: #7fe0b5; font-variant-numeric: tabular-nums; } .bci-hero__panel.is-live .bci-panel__bar i:nth-child(1) { background: #ff5f57; } .bci-hero__panel.is-live .bci-panel__bar i:nth-child(2) { background: #febc2e; } .bci-hero__panel.is-live .bci-panel__bar i:nth-child(3) { background: #28c840; } .bci-hero__panel.is-live .bci-panel__state { flex-wrap: wrap; justify-content: flex-end; row-gap: 3px; width: 5.8rem; white-space: nowrap; } .bci-panel__spark { display: block; flex: 0 0 100%; height: 14px; order: -1; overflow: visible; } .bci-panel__spark polyline { fill: none; stroke: var(--bci-green); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .55; transition: opacity .3s; } .bci-panel__row { position: relative; overflow: hidden; } .bci-panel__row::before { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%); background: linear-gradient(90deg, rgba(31, 157, 107, 0) 0%, rgba(31, 157, 107, .1) 70%, rgba(31, 157, 107, .22) 100%); } .bci-panel__row.is-check::before { animation: bci-row-scan 1.1s var(--bci-ease) forwards; } @keyframes bci-row-scan { to { transform: translateX(0); opacity: 0; } } .bci-panel__row.is-check .bci-panel__state { color: var(--bci-amber); } .bci-panel__row.is-check .bci-panel__spark polyline { opacity: 1; } .bci-panel__row.is-ok .bci-panel__state { color: var(--bci-green); } .bci-panel__row.is-ok .bci-panel__state i { box-shadow: 0 0 0 5px rgba(31, 157, 107, .2); } .bci-panel__row.is-check .bci-panel__icon { background: rgba(31, 157, 107, .12); color: var(--bci-green); transition: background-color .3s, color .3s; } .bci-panel__log { display: flex; align-items: center; gap: .2rem; min-height: 2.4rem; padding: .6rem 1.2rem; border-top: 1px solid var(--bci-border); background: #0f1428; font-family: var(--bci-font-mono); font-size: .72rem; color: #7fe0b5; white-space: nowrap; overflow: hidden; } .bci-panel__log i { width: .5em; height: 1em; background: currentColor; animation: wifi-curseur 1.05s steps(1) infinite; } @keyframes wifi-curseur { 50% { opacity: 0; } } /* ========================================================================== 2026-11 — « Le camping connecté » : scène animée + onglets ========================================================================== */ .cc { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.5fr); gap: clamp(22px, 4vw, 48px); align-items: start; } .cc-onglets { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; } .cc-onglet { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--bci-border); border-radius: var(--bci-radius); background: var(--bci-surface); font: 600 1rem/1.2 var(--bci-font-head); color: var(--bci-heading); text-align: left; cursor: pointer; position: relative; overflow: hidden; transition: border-color .25s, box-shadow .25s, transform .25s; } .cc-onglet svg { width: 22px; height: 22px; flex: none; color: var(--bci-navy-soft, #4a5480); } .cc-onglet small { display: block; margin-top: 2px; font: 500 .8rem/1.3 var(--bci-font-body); color: var(--bci-text-muted); } .cc-onglet:hover { border-color: var(--bci-red-20, #f1c1cd); transform: translateX(3px); } .cc-onglet[aria-selected="true"] { border-color: var(--bci-red); box-shadow: var(--bci-shadow); } .cc-onglet[aria-selected="true"] svg { color: var(--bci-red); } /* barre de progression de la rotation automatique */ .cc-onglet::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--bci-red); transform: scaleX(0); transform-origin: left; } .cc.is-auto .cc-onglet[aria-selected="true"]::after { animation: cc-progression var(--cc-duree, 7s) linear forwards; } @keyframes cc-progression { to { transform: scaleX(1); } } .cc-onglet--cyber { background: linear-gradient(135deg, #fff 60%, var(--bci-red-08, #fbe9ee)); } .cc-panneau h3 { margin: 0 0 8px; font-family: var(--bci-font-head); font-size: 1.3rem; color: var(--bci-heading); } .cc-panneau p { margin: 0 0 10px; color: var(--bci-text-muted); line-height: 1.6; } .cc-panneau ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; } .cc-panneau li { position: relative; padding-left: 20px; line-height: 1.5; } .cc-panneau li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--bci-red-08, #fbe9ee); box-shadow: inset 0 0 0 3px var(--bci-red); } .cc-panneau a { color: var(--bci-red); font-weight: 600; } .cc-panneau:not([hidden]) { animation: cc-entree .45s var(--bci-ease) both; } @keyframes cc-entree { from { opacity: 0; transform: translateY(8px); } } .cc-scene { position: relative; margin: 0; border-radius: var(--bci-radius-lg, 18px); overflow: hidden; box-shadow: var(--bci-shadow-lg); background: #e9f1ea; } .cc-svg { display: block; width: 100%; height: auto; } .cc-telephone { position: absolute; right: 14px; bottom: 14px; width: min(46%, 230px); padding: 10px 12px; border-radius: 14px; background: rgba(15, 20, 40, .92); color: #fff; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5); font-family: var(--bci-font-mono); font-size: .72rem; line-height: 1.35; } .cc-telephone b { display: block; margin-bottom: 3px; font-family: var(--bci-font-body); font-size: .8rem; color: #7fe0b5; } .cc-telephone.is-alerte b { color: #ff6b85; } .cc-telephone span { color: #c9cfe6; } .cc-telephone.is-change { animation: cc-entree .4s var(--bci-ease) both; } /* --- plan v2 : décor de base */ .cc-herbe__fond { fill: #e3eedf; } .cc-herbe__brin { stroke: #cfe0c9; stroke-width: 1; stroke-linecap: round; } .cc-sol { fill: url(#cc-herbe); } .cc-mer { fill: url(#cc-mer-deg); } .cc-mer__haut { stop-color: #a9d8ec; } .cc-mer__bas { stop-color: #6fb6d8; } .cc-plage { fill: #f1e3bf; } .cc-vagues path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; opacity: .75; animation: cc-vague 6s ease-in-out infinite; } @keyframes cc-vague { 50% { transform: translateX(14px); } } .cc-voilier__coque { fill: #2c3457; } .cc-voilier__voile { fill: #fff; stroke: #c8cede; stroke-width: 1; } .cc-allee { fill: none; stroke: #fbfaf6; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; } .cc-allee__axe { fill: none; stroke: #ece8dc; stroke-width: 1; stroke-dasharray: 6 8; } .cc-parking rect:first-child { fill: #d9dbe2; } .cc-parking path { stroke: #fff; stroke-width: 1.5; } .cc-auto { fill: #8a91b0; } .cc-auto--2 { fill: #c97b7b; } .cc-piscine rect { fill: #7cc4e4; stroke: #fff; stroke-width: 4; } .cc-piscine__eau { fill: none; stroke: #fff; stroke-width: 1.6; opacity: .8; } .cc-toboggan { fill: none; stroke: #e0a12a; stroke-width: 5; stroke-linecap: round; } .cc-sanit rect:last-of-type { fill: #fff; stroke: #c8cede; stroke-width: 1.5; } .cc-arbre circle { fill: #9cc79a; } .cc-arbre .cc-arbre__reflet { fill: #b4d6b1; } .cc-arbre__ombre { fill: rgba(44, 52, 87, .1); } .cc-haie { fill: rgba(156, 199, 154, .25); stroke: #9cc79a; stroke-width: 3; } .cc-tente { fill: #f7d2a8; stroke: #d7a46f; stroke-width: 1.5; stroke-linejoin: round; } .cc-mh__ombre { fill: rgba(44, 52, 87, .12); } .cc-mh__corps { fill: #fff; stroke: #c8cede; stroke-width: 1.5; } .cc-mh__toit { fill: #2c3457; } .cc-mh__terrasse { fill: #e8d5b5; } .cc-mh__porte { fill: #dfe3ee; } .cc-mh__num { font: 600 9px var(--bci-font-mono); fill: #64698a; text-anchor: middle; } .cc-accueil__corps { fill: #fff; stroke: #c8cede; stroke-width: 1.5; } .cc-accueil__toit { fill: #c61f44; } .cc-accueil__porte { fill: #dfe3ee; } .cc-local rect:last-of-type { fill: #fff; stroke: #2c3457; stroke-width: 1.5; } .cc-etiquette { font: 600 10px var(--bci-font-body); fill: #2c3457; text-anchor: middle; } .cc-etiquette--petit { font-size: 8.5px; } .cc-etiquette--clair { fill: #fff; font-size: 9px; } .cc-etiquette--debit { font: 600 8.5px var(--bci-font-mono); fill: #2c3457; text-anchor: middle; opacity: 0; transition: opacity .4s; } .cc-etiquette--fibre { fill: #c46a14; } .cc-internet path { fill: #64698a; } .cc-starlink ellipse { fill: #fff; stroke: #2c3457; stroke-width: 1.5; } .cc-starlink path { fill: none; stroke: #2c3457; stroke-width: 1.5; stroke-linecap: round; } .cc-starlink .cc-starlink__onde { stroke: #4a8fd8; opacity: .5; } .cc-fibre-op { stroke: #e98a2b; stroke-width: 2.4; } .cc-fibre-op--2 { stroke: #c46a14; } .cc-etiquette--wan { font: 600 8.5px var(--bci-font-mono); fill: #c46a14; } .cc-rass rect { fill: #1f9d6b; } .cc-rass path, .cc-rass circle { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .cc-rass circle { fill: #fff; } .cc-pers { fill: #2c3457; stroke: #fff; stroke-width: 1.4; } /* --- couches : estompées sauf la couche active */ .cc-l { opacity: .2; transition: opacity .5s; } .cc-l--coeur { opacity: .55; } .cc-scene[data-actif="wifi"] .cc-l--wifi, .cc-scene[data-actif="tv"] .cc-l--tv, .cc-scene[data-actif="acces"] .cc-l--acces, .cc-scene[data-actif="video"] .cc-l--video, .cc-scene[data-actif="alerte"] .cc-l--alerte, .cc-scene[data-actif="cyber"] .cc-l--cyber, .cc-scene[data-actif="wifi"] .cc-l--coeur, .cc-scene[data-actif="cyber"] .cc-l--coeur { opacity: 1; } /* la cybersécurité protège tout : sur son onglet, chaque réseau prend sa couleur */ .cc-scene[data-actif="cyber"] .cc-l { opacity: .9; } .cc-scene[data-actif="cyber"] .cc-onde, .cc-scene[data-actif="cyber"] .cc-camera__champ { visibility: hidden; } /* liens */ .cc-lien { fill: none; stroke-linecap: round; stroke-linejoin: round; } .cc-coeur-lien { stroke: #2c3457; stroke-width: 6; } .cc-coeur-lien--flux { stroke: #7fe0b5; stroke-width: 2; stroke-dasharray: 4 10; } .cc-coeur rect { fill: #2c3457; } .cc-coeur path { stroke: #7fe0b5; stroke-width: 1.6; stroke-linecap: round; } .cc-fibre { stroke: #e98a2b; stroke-width: 2.2; transform: translate(-2px, -2px); } .cc-fibre--2 { transform: translate(2px, 2px); } .cc-cuivre { stroke: #4a5480; stroke-width: 1.8; } .cc-coffret { fill: #2c3457; stroke: #fff; stroke-width: 1.5; } .cc-paquet { fill: #1f9d6b; visibility: hidden; } .cc-scene[data-actif="wifi"] .cc-paquet { visibility: visible; } .cc-scene[data-actif="wifi"] .cc-etiquette--debit { opacity: 1; } .cc-scene[data-actif="wifi"] .cc-coeur-lien--flux { animation: cc-tirets 1s linear infinite; } .cc-scene[data-actif="wifi"] .cc-cuivre { stroke: #2c3457; stroke-width: 2.2; stroke-dasharray: 5 4; animation: cc-tirets 1.6s linear infinite; } /* wifi */ .cc-borne__mat { stroke: #64698a; stroke-width: 2; } .cc-borne__tete { fill: #fff; stroke: #2c3457; stroke-width: 1.8; } .cc-borne__wifi { fill: none; stroke: #c61f44; stroke-width: 1.4; stroke-linecap: round; } .cc-borne--mh .cc-borne__tete { stroke: #c61f44; stroke-width: 1.6; } .cc-onde { fill: none; stroke: #c61f44; stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; } .cc-scene[data-actif="wifi"] .cc-onde { animation: cc-onde 2.4s ease-out infinite; } .cc-scene[data-actif="wifi"] .cc-onde--b { animation-delay: 1.2s; } .cc-d1 { animation-delay: .4s !important; } .cc-d2 { animation-delay: .8s !important; } @keyframes cc-onde { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(3.4); opacity: 0; } } @keyframes cc-tirets { to { stroke-dashoffset: -28; } } /* tv */ .cc-tv__ecran { fill: #1b2140; } .cc-tv__image { fill: #3a4370; } .cc-tv__cast path { fill: none; stroke: #c61f44; stroke-width: 1.6; stroke-linecap: round; opacity: .2; } .cc-tv__tel { fill: #2c3457; } .cc-scene[data-actif="tv"] .cc-tv__image { animation: cc-image 4s linear infinite; } .cc-scene[data-actif="tv"] .cc-tv__image--1 { animation-delay: -1.3s; } .cc-scene[data-actif="tv"] .cc-tv__image--2 { animation-delay: -2.6s; } .cc-scene[data-actif="tv"] .cc-tv__cast path { animation: cc-cast 1.5s ease-in-out infinite; } .cc-scene[data-actif="tv"] .cc-tv__cast path:nth-child(2) { animation-delay: .2s; } .cc-scene[data-actif="tv"] .cc-tv__cast path:nth-child(3) { animation-delay: .4s; } @keyframes cc-image { 0%, 100% { fill: #4a8fd8; } 33% { fill: #e5677f; } 66% { fill: #4fbf8f; } } @keyframes cc-cast { 0%, 100% { opacity: .15; } 50% { opacity: 1; } } /* accès */ .cc-poteau { fill: #2c3457; } .cc-barriere { fill: #c61f44; transform-box: fill-box; transform-origin: 0% 50%; } .cc-lecteur rect { fill: #2c3457; } .cc-lecteur__grille { fill: #64698a; } .cc-led { fill: #e0a12a; } .cc-voiture rect { fill: #4a5480; } .cc-voiture circle { fill: #1b2140; } .cc-voiture .cc-voiture__vitre { fill: #cfe6f2; } .cc-scene[data-actif="acces"] .cc-barriere { animation: cc-barriere 6s ease-in-out infinite; } .cc-scene[data-actif="acces"] .cc-voiture { animation: cc-voiture 6s ease-in-out infinite; } .cc-scene[data-actif="acces"] .cc-led { animation: cc-led 6s steps(1) infinite; } @keyframes cc-barriere { 0%, 30% { transform: rotate(0); } 40%, 70% { transform: rotate(-72deg); } 82%, 100% { transform: rotate(0); } } @keyframes cc-voiture { 0% { transform: translateX(0); } 28%, 36% { transform: translateX(130px); } 75% { transform: translateX(360px); opacity: 1; } 76%, 100% { transform: translateX(360px); opacity: 0; } } @keyframes cc-led { 0%, 28% { fill: #e0a12a; } 29%, 80% { fill: #1f9d6b; } 81%, 100% { fill: #e0a12a; } } /* vidéosurveillance */ .cc-cable { stroke: #8a5cc4; stroke-width: 1.8; } .cc-camera__mat { stroke: #64698a; stroke-width: 2; } .cc-camera rect { fill: #fff; stroke: #2c3457; stroke-width: 1.6; } .cc-camera__tete { transform-box: fill-box; transform-origin: 30% 50%; } .cc-camera__champ { fill: rgba(138, 92, 196, .14); stroke: rgba(138, 92, 196, .4); stroke-width: 1; } .cc-rec { fill: #c61f44; } .cc-nvr rect { fill: #2c3457; } .cc-nvr path { stroke: #7fe0b5; stroke-width: 1.6; stroke-linecap: round; } .cc-scene[data-actif="video"] .cc-camera__tete { animation: cc-balayage 6s ease-in-out infinite; } .cc-scene[data-actif="video"] .cc-rec { animation: cc-clignote-rec 1.2s steps(1) infinite; } .cc-scene[data-actif="video"] .cc-cable { stroke-width: 2.4; stroke-dasharray: 5 4; animation: cc-tirets 1.6s linear infinite reverse; } @keyframes cc-balayage { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } } @keyframes cc-clignote-rec { 50% { fill: #ffd0d8; } } /* alertes */ .cc-cable-hp { stroke: #c61f44; stroke-width: 1.8; } .cc-scene[data-actif="alerte"] .cc-cable-hp { stroke-width: 2.4; stroke-dasharray: 5 4; animation: cc-tirets 1.6s linear infinite reverse; } .cc-alerte-voile { fill: #c61f44; opacity: 0; pointer-events: none; } .cc-hp__mat { stroke: #64698a; stroke-width: 2; } .cc-hp__pav { fill: #2c3457; } .cc-hp__son path { fill: none; stroke: #c61f44; stroke-width: 2; stroke-linecap: round; opacity: .2; } .cc-evac { fill: none; stroke: #1f9d6b; stroke-width: 2.4; stroke-dasharray: 3 7; stroke-linecap: round; opacity: 0; } .cc-pers--evac { fill: #1f9d6b; visibility: hidden; } .cc-telalerte rect { fill: #2c3457; } .cc-telalerte .cc-telalerte__ecran { fill: #c61f44; } .cc-telalerte path { stroke: #fff; stroke-width: 2.2; stroke-linecap: round; } .cc-scene[data-actif="alerte"] .cc-alerte-voile { animation: cc-voile 2s ease-in-out infinite; } .cc-scene[data-actif="alerte"] .cc-hp__son path { animation: cc-son 1.2s ease-out infinite; } .cc-scene[data-actif="alerte"] .cc-hp__son path:nth-child(2) { animation-delay: .2s; } .cc-scene[data-actif="alerte"] .cc-hp__son path:nth-child(3) { animation-delay: .4s; } .cc-scene[data-actif="alerte"] .cc-evac { opacity: .85; animation: cc-tirets-evac 1s linear infinite; } .cc-scene[data-actif="alerte"] .cc-pers--evac { visibility: visible; } .cc-scene[data-actif="alerte"] .cc-base .cc-pers { visibility: hidden; } .cc-scene[data-actif="alerte"] .cc-telalerte__ecran { animation: cc-clignote .8s steps(1) infinite; } .cc-scene[data-actif="alerte"] .cc-rass rect { animation: cc-clignote-vert 1.6s ease-in-out infinite; } @keyframes cc-voile { 0%, 100% { opacity: 0; } 50% { opacity: .07; } } @keyframes cc-son { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } } @keyframes cc-tirets-evac { to { stroke-dashoffset: 20; } } @keyframes cc-clignote { 50% { fill: #ff8aa0; } } @keyframes cc-clignote-vert { 50% { fill: #37c08a; } } /* cybersécurité : couleurs des réseaux séparés */ .cc-seg--vac { fill: #1f9d6b; stroke: #1f9d6b; } .cc-seg--tv { fill: #4a8fd8; stroke: #4a8fd8; } .cc-seg--acces { fill: #e0a12a; stroke: #e0a12a; } .cc-seg--video { fill: #8a5cc4; stroke: #8a5cc4; } .cc-seg--alerte { fill: #c61f44; stroke: #c61f44; } .cc-seg--gestion { fill: #2c3457; stroke: #2c3457; } .cc-scene[data-actif="cyber"] .cc-cuivre { stroke: #1f9d6b; stroke-width: 2.2; } .cc-scene[data-actif="cyber"] .cc-cable { stroke: #8a5cc4; stroke-width: 2.2; } .cc-scene[data-actif="cyber"] .cc-tv__ecran { stroke: #4a8fd8; stroke-width: 2; } .cc-scene[data-actif="cyber"] .cc-hp__pav { fill: #c61f44; } .cc-scene[data-actif="cyber"] .cc-poteau, .cc-scene[data-actif="cyber"] .cc-lecteur rect { fill: #e0a12a; } .cc-scene[data-actif="cyber"] .cc-mh__toit { fill: #1f9d6b; } .cc-bouclier path:first-child { fill: #2c3457; stroke: #fff; stroke-width: 2; } .cc-bouclier__coche { fill: none; stroke: #7fe0b5; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .cc-halo { fill: none; stroke: #c61f44; stroke-width: 2; opacity: .25; stroke-dasharray: 4 6; transform-box: fill-box; transform-origin: center; } .cc-menace circle { fill: #c61f44; } .cc-menace path { stroke: #fff; stroke-width: 1.4; stroke-linecap: round; } .cc-menace, .cc-impact { visibility: hidden; } .cc-impact { fill: none; stroke: #c61f44; stroke-width: 2; } .cc-legende { opacity: 0; transition: opacity .4s; } .cc-legende__fond { fill: rgba(255, 255, 255, .94); stroke: #e2e6f0; } .cc-legende__titre { font: 700 10px var(--bci-font-body); fill: #2c3457; } .cc-legende__txt { font: 500 9.5px var(--bci-font-body); fill: #3f4560; } .cc-scene[data-actif="cyber"] .cc-legende { opacity: 1; } .cc-scene[data-actif="cyber"] .cc-menace, .cc-scene[data-actif="cyber"] .cc-impact { visibility: visible; } .cc-scene[data-actif="cyber"] .cc-halo { opacity: .7; animation: cc-tourne 14s linear infinite; } @keyframes cc-tourne { to { transform: rotate(360deg); } } /* --- plan de l'hôtel (coupe) */ .ch-ciel { fill: url(#ch-ciel); } .ch-ciel__haut { stop-color: #dcebf6; } .ch-ciel__bas { stop-color: #f4f8fb; } .ch-nuages path { fill: #fff; opacity: .9; animation: cc-vague 14s ease-in-out infinite; } .ch-sol { fill: #e6dccb; } .ch-herbe { fill: #a9cfa6; } .ch-ombre { fill: rgba(44, 52, 87, .12); } .ch-facade { fill: #fbf7f0; stroke: #c8bfae; stroke-width: 1.5; } .ch-toit { fill: #2c3457; } .ch-enseigne rect { fill: #2c3457; } .ch-enseigne text { font: 700 11px var(--bci-font-head, sans-serif); letter-spacing: .2em; fill: #e9c98a; text-anchor: middle; } .ch-soussol { fill: #ebe5da; stroke: #c8bfae; stroke-width: 1.5; } .ch-chambre__fond { fill: #fffdf9; stroke: #e2d9c8; stroke-width: 1; } .ch-fenetre { fill: #cfe6f2; stroke: #b9cddd; stroke-width: 1; } .ch-lit { fill: #e9d9bd; } .ch-oreiller { fill: #fff; stroke: #e2d9c8; stroke-width: 1; } .ch-porte { fill: #d8cbb4; } .ch-local { fill: #eef0f5; stroke: #d5d9e4; stroke-width: 1; } .ch-plancher { stroke: #c8bfae; stroke-width: 2; } .ch-gaine { fill: #e9ecf3; stroke: #d5d9e4; stroke-width: 1; } .ch-cabine rect { fill: #b08d57; } .ch-cabine path { stroke: #8a6c3f; stroke-width: 1; } .ch-zone { fill: #fffdf9; stroke: #e2d9c8; stroke-width: 1; } .ch-zone--tech { fill: #eef0f5; stroke: #d5d9e4; } .ch-portes { fill: #8fb9d4; } .ch-comptoir { fill: #b08d57; } .ch-table { fill: #e9d9bd; stroke: #d0bd9b; stroke-width: 1; } .ch-ecran { fill: #2c3457; } .ch-terrasse rect { fill: #e9d9bd; } .ch-terrasse path { fill: #c61f44; stroke: #8a6c3f; stroke-width: 1.2; } .cc-l--seminaire { opacity: .2; } .cc-scene[data-actif="seminaire"] .cc-l--seminaire { opacity: 1; } .ch-sem-halo { fill: rgba(176, 141, 87, .12); stroke: #b08d57; stroke-width: 2; stroke-dasharray: 5 4; } .ch-appareil { fill: #2c3457; } .ch-sem-debit { fill: #8a6c3f; font-size: 9px; opacity: 0; } .cc-scene[data-actif="seminaire"] .ch-sem-debit { opacity: 1; } .cc-scene[data-actif="seminaire"] .ch-sem-halo { animation: cc-tirets 1.4s linear infinite; } .cc-scene[data-actif="seminaire"] .ch-appareil { animation: ch-appareil 1.6s ease-in-out infinite; } .cc-scene[data-actif="seminaire"] .ch-appareil--1 { animation-delay: .5s; } .cc-scene[data-actif="seminaire"] .ch-appareil--2 { animation-delay: 1s; } @keyframes ch-appareil { 50% { fill: #1f9d6b; } } .cc-seg--sem { fill: #b08d57; stroke: #b08d57; } .cc-scene[data-actif="cyber"] .cc-cuivre--tv { stroke: #4a8fd8; } .cc-scene[data-actif="cyber"] .ch-sem-halo { stroke: #b08d57; opacity: 1; } /* infobulles et clic sur le plan */ [data-info] { cursor: pointer; } [data-info]:hover > *:not(.cc-onde):not(.cc-camera__champ) { filter: drop-shadow(0 0 3px rgba(198, 31, 68, .7)); } .cc-bulle { position: absolute; left: 0; top: 0; z-index: 2; max-width: 240px; padding: 7px 10px; border-radius: 8px; background: #1b2140; color: #fff; font: 500 .78rem/1.35 var(--bci-font-body); pointer-events: none; transform: translate(calc(var(--bx, 0px) - 50%), calc(var(--by, 0px) - 100% - 12px)); opacity: 0; transition: opacity .15s; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); } .cc-bulle.is-on { opacity: 1; } .cc-aide { margin: 8px 0 0; font-size: .82rem; color: var(--bci-text-muted); text-align: center; } @media (max-width: 960px) { .cc { grid-template-columns: 1fr; } .cc-droite { order: -1; } .cc-onglets { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } .cc-onglet small { display: none; } } @media (max-width: 560px) { .cc-telephone { position: static; width: auto; margin: 0; border-radius: 0; } } @media (prefers-reduced-motion: reduce) { .cc-scene *, .cc-onglet::after, .bci-panel__live::before, .bci-panel__log i { animation: none !important; } .cc-menace, .cc-impact, .cc-paquet, .cc-pers, .cc-voilier { display: none; } } /* ========================================================================== 2026-11 — Cybersécurité : bandeau sombre ========================================================================== */ .wifi-cyber { background: #1b2140; color: #d9ddec; position: relative; overflow: hidden; } .wifi-cyber::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: radial-gradient(600px 300px at 85% 10%, rgba(198, 31, 68, .25), transparent 70%), radial-gradient(500px 300px at 10% 90%, rgba(74, 143, 216, .18), transparent 70%); } .wifi-cyber .bci-container { position: relative; } .wifi-cyber h2, .wifi-cyber h3 { color: #fff; } .wifi-cyber .bci-eyebrow { color: #ff8aa0; } .wifi-cyber .bci-lead { color: #c3c8de; } .wifi-cyber__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(24px, 3vw, 36px); padding: 0; list-style: none; } .wifi-cyber__item { padding: 18px 18px 16px; border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--bci-radius); background: rgba(255, 255, 255, .04); transition: border-color .3s, transform .3s, background-color .3s; } .wifi-cyber__item:hover { border-color: rgba(255, 138, 160, .55); background: rgba(255, 255, 255, .07); transform: translateY(-3px); } .wifi-cyber__item svg { width: 26px; height: 26px; color: #ff8aa0; } .wifi-cyber__item h3 { margin: 10px 0 6px; font-family: var(--bci-font-head); font-size: 1.08rem; } .wifi-cyber__item p { margin: 0; font-size: .94rem; line-height: 1.55; color: #c3c8de; } .wifi-cyber__note { margin: clamp(22px, 3vw, 30px) 0 0; padding: 14px 18px; border-left: 3px solid #ff8aa0; border-radius: 6px; background: rgba(255, 255, 255, .05); color: #d9ddec; line-height: 1.6; } .wifi-cyber__note a { color: #fff; font-weight: 600; } @media (max-width: 960px) { .wifi-cyber__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .wifi-cyber__grille { grid-template-columns: 1fr; } } /* ========================================================================== 2026-11 — Questions fréquentes ========================================================================== */ .wifi-faq { display: grid; gap: 10px; max-width: 860px; margin: clamp(22px, 3vw, 32px) auto 0; } .wifi-faq details { border: 1px solid var(--bci-border); border-radius: var(--bci-radius); background: var(--bci-surface); padding: 0 18px; transition: box-shadow .25s, border-color .25s; } .wifi-faq details[open] { border-color: var(--bci-red-20, #f1c1cd); box-shadow: var(--bci-shadow-sm); } .wifi-faq summary { list-style: none; cursor: pointer; padding: 16px 28px 16px 0; position: relative; font: 600 1.02rem/1.35 var(--bci-font-head); color: var(--bci-heading); } .wifi-faq summary::-webkit-details-marker { display: none; } .wifi-faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font: 600 1.3rem/1 var(--bci-font-mono); color: var(--bci-red); transition: transform .25s; } .wifi-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); } .wifi-faq details p { margin: 0 0 16px; color: var(--bci-text-muted); line-height: 1.6; } /* ========================================================================== 2026-11 — Bannière animée (reprise du thème b-com-info 2.13.0) ========================================================================== */ .bci-hero__fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .wifi-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .55) 40%, #000 70%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .55) 40%, #000 70%); } .bci-hero.is-anime .bci-hero__reseau { display: none; } .bci-hero__lueur { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 0v34' fill='none' stroke='%23c61f44' stroke-opacity='0.45' stroke-width='1.2'/%3E%3C/svg%3E"); background-size: 34px 61px; -webkit-mask-image: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), #000 0%, transparent 100%); mask-image: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), #000 0%, transparent 100%); opacity: 0; transition: opacity .4s var(--bci-ease); } .bci-hero.is-survole .bci-hero__lueur { opacity: 1; } .bci-hero.is-anime { cursor: crosshair; } .bci-hero a, .bci-hero button { cursor: pointer; } @media (hover: hover) { .bci-hero__actions .bci-btn:hover { transform: translate(var(--bx, 0px), calc(var(--by, 0px) - 2px)); } } .bci-hero__panel { transform: translate3d(0, var(--py, 0px), 0); } /* chiffres clés sur une seule ligne en grand écran */ @media (min-width: 640px) { .bci-hero__stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; } } @media (prefers-reduced-motion: reduce) { .bci-hero, .bci-hero a { cursor: auto; } .bci-hero__panel { transform: none; } } /* ========================================================================== 2026-11 — Offres dédiées : TV-B COM INFO et ALERTES-B COM INFO ========================================================================== */ .wifi-offres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 28px); margin-top: clamp(24px, 3vw, 36px); } .wifi-offre { position: relative; display: flex; flex-direction: column; padding: clamp(22px, 3vw, 32px); background: var(--bci-surface); border: 1px solid var(--bci-border); border-radius: var(--bci-radius-lg, 18px); box-shadow: var(--bci-shadow-sm); overflow: hidden; transition: transform .35s var(--bci-ease), box-shadow .35s var(--bci-ease), border-color .3s; } .wifi-offre::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--bci-navy), var(--bci-red)); } .wifi-offre:hover { transform: translateY(-4px); box-shadow: var(--bci-shadow-lg); border-color: var(--bci-red-20, #f1c1cd); } .wifi-offre__logo { display: flex; align-items: center; min-height: 72px; margin-bottom: 18px; } .wifi-offre__logo img { display: block; height: 70px; width: auto; max-width: 100%; } .wifi-offre--alertes .wifi-offre__logo img { height: 62px; } .wifi-offre h3 { margin: 0 0 8px; font-family: var(--bci-font-head); font-size: 1.3rem; color: var(--bci-heading); } .wifi-offre > p { margin: 0 0 14px; color: var(--bci-text-muted); line-height: 1.6; } .wifi-offre__liste { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; } .wifi-offre__liste li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; line-height: 1.5; } .wifi-offre__liste svg { width: 18px; height: 18px; margin-top: 2px; color: var(--bci-green); } .wifi-offre__pied { margin-top: auto; display: grid; gap: 14px; justify-items: start; } .wifi-offre__note { margin: 0; padding: 10px 14px; border-left: 3px solid var(--bci-red); border-radius: 6px; background: var(--bci-bg-alt); font-size: .9rem; color: var(--bci-text-muted); line-height: 1.55; } /* ========================================================================== 2026-11 — Deux univers : camping (par défaut) et hôtel ========================================================================== */ html:not([data-univers="hotel"]) [data-pour="hotel"] { display: none !important; } html[data-univers="hotel"] [data-pour="camping"] { display: none !important; } html.is-bascule main { animation: wifi-bascule .6s var(--bci-ease); } @keyframes wifi-bascule { from { opacity: .35; } } .wifi-univers { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 1.4rem; } .wifi-univers__titre { font: 600 .74rem var(--bci-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bci-text-muted); margin-right: 4px; } .wifi-univers__choix { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; cursor: pointer; border: 1.5px solid var(--bci-border); border-radius: 14px; background: rgba(255, 255, 255, .85); font: 600 1rem/1.15 var(--bci-font-head); color: var(--bci-heading); text-align: left; transition: border-color .25s, box-shadow .25s, transform .25s, background-color .25s; } .wifi-univers__choix svg { width: 26px; height: 26px; flex: none; color: var(--bci-navy-soft, #4a5480); } .wifi-univers__choix small { display: block; font: 500 .74rem var(--bci-font-body); color: var(--bci-text-muted); margin-top: 2px; } .wifi-univers__choix:hover { transform: translateY(-2px); border-color: var(--bci-red-20, #f1c1cd); } .wifi-univers__choix[aria-pressed="true"] { border-color: var(--univers, #1f9d6b); box-shadow: 0 10px 24px -14px var(--univers, #1f9d6b); background: #fff; } .wifi-univers__choix[aria-pressed="true"] svg { color: var(--univers, #1f9d6b); } .wifi-univers-mini { display: inline-flex; gap: 2px; padding: 2px; margin-right: 14px; border-radius: 99px; background: rgba(255, 255, 255, .12); } .wifi-univers-mini button { padding: 3px 12px; border: 0; border-radius: 99px; background: transparent; cursor: pointer; font: 600 .72rem var(--bci-font-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .75); } .wifi-univers-mini button[aria-pressed="true"] { background: #fff; color: var(--bci-navy); } /* ambiances */ :root { --univers: #1f9d6b; } html[data-univers="hotel"] { --univers: #b08d57; } html[data-univers="hotel"] .bci-hero { background: linear-gradient(180deg, rgba(252, 249, 244, .95) 0%, rgba(244, 238, 228, .95) 100%); } html[data-univers="hotel"] .bci-hero__badge .bci-dot { background: #b08d57; box-shadow: 0 0 0 4px rgba(176, 141, 87, .2); } html[data-univers="hotel"] .bci-section--alt { background: #faf7f2; } html:not([data-univers="hotel"]) .bci-hero__badge .bci-dot { background: #1f9d6b; } @media (max-width: 1199px) { .wifi-univers-mini { display: none; } } /* sites campings / hôtels : le choix d'univers devient un lien vers l'autre site */ a.wifi-univers__choix { text-decoration: none; } .wifi-univers__choix[aria-current="page"] { border-color: var(--univers, #1f9d6b); box-shadow: 0 10px 24px -14px var(--univers, #1f9d6b); background: #fff; cursor: default; } .wifi-univers__choix[aria-current="page"] svg { color: var(--univers, #1f9d6b); } .wifi-univers-mini a, .wifi-univers-mini span { padding: 3px 12px; border-radius: 99px; font: 600 .72rem var(--bci-font-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .75); text-decoration: none; } .wifi-univers-mini [aria-current="page"] { background: #fff; color: var(--bci-navy); } /* sites campings / hôtels : logos du site ; la marque wifi accompagne les services */ .bci-brand--logo { display: inline-flex; align-items: center; } .bci-brand--logo .wifi-logo-site, .wifi-logo-site { display: block; height: 64px; width: auto; max-height: none; max-width: none; } .bci-footer .wifi-logo-pied, .wifi-logo-pied { display: block; height: 60px; max-height: none; width: auto; max-width: 100%; margin-bottom: 14px; } .wifi-logo-splash { display: block; width: min(420px, 74vw); height: auto; } .wifi-marque-services { display: flex; margin: 0 0 18px; } .wifi-marque-services .marque { align-items: flex-start; margin-bottom: 0; } @media (max-width: 1279px) { .bci-brand--logo .wifi-logo-site { height: 54px; } } @media (max-width: 600px) { .bci-brand--logo .wifi-logo-site { height: 46px; } } /* en-tête : deux accès de supervision (Wi-Fi, alertes) */ .bci-header__cta .bci-btn + .bci-btn { margin-left: 8px; } .wifi-btn-alertes { background: var(--bci-navy); border-color: var(--bci-navy); } .wifi-btn-alertes:hover { background: #1b2140; border-color: #1b2140; } @media (max-width: 1199px) { .wifi-btn-alertes { display: none; } } .bci-nav > ul > li > a { white-space: nowrap; } @media (min-width: 1200px) and (max-width: 1439px) { .bci-header__phone-text { display: none; } } /* hôtel : téléphonie IP */ .cc-l--telephonie { opacity: .2; } .cc-scene[data-actif="telephonie"] .cc-l--telephonie { opacity: 1; } .cc-scene[data-actif="cyber"] .cc-l--telephonie { opacity: .9; } .cc-cable-tel { stroke: #0e9aa7; stroke-width: 1.6; } .ch-tel rect { fill: #0e9aa7; } .ch-tel path { stroke: #fff; stroke-width: 1.2; stroke-linecap: round; } .cc-scene[data-actif="telephonie"] .ch-tel rect { animation: ch-sonne 1.4s ease-in-out infinite; } .cc-scene[data-actif="telephonie"] .cc-cable-tel { stroke-width: 2.2; stroke-dasharray: 5 4; animation: cc-tirets 1.6s linear infinite; } @keyframes ch-sonne { 0%, 60%, 100% { fill: #0e9aa7; } 70%, 90% { fill: #c61f44; } } .cc-seg--tel { fill: #0e9aa7; stroke: #0e9aa7; } /* offres : trois cartes pour les campings, deux pour les hôtels */ /* trois offres côte à côte (TV, vidéo, VoIP) ; ALERTES (campings) en pleine largeur dessous */ .wifi-offres { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wifi-offre--alertes { grid-column: 1 / -1; } .wifi-offre--alertes .wifi-offre__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } @media (max-width: 1100px) { .wifi-offres { grid-template-columns: 1fr; } .wifi-offre--alertes .wifi-offre__liste { grid-template-columns: 1fr; } } .wifi-card-large { grid-column: 1 / -1; } /* ========================================================================== 2026-11 — Câblage et baies informatiques (campings) ========================================================================== */ .wifi-baies { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); align-items: center; } .wifi-baies__texte h2 { margin: 6px 0 10px; } .wifi-baies__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; margin: clamp(18px, 3vw, 28px) 0 24px; padding: 0; list-style: none; } .wifi-baies__item svg { width: 26px; height: 26px; color: var(--bci-red); } .wifi-baies__item h3 { margin: 6px 0 4px; font-family: var(--bci-font-head); font-size: 1.05rem; color: var(--bci-heading); } .wifi-baies__item p { margin: 0; color: var(--bci-text-muted); font-size: .94rem; line-height: 1.55; } .baie { position: relative; margin: 0; padding: 18px 18px 14px; border-radius: var(--bci-radius-lg, 18px); background: #1b2140; box-shadow: var(--bci-shadow-lg); } .baie__boutons { display: flex; justify-content: center; gap: 4px; margin: 0 auto 10px; padding: 3px; width: max-content; border-radius: 99px; background: rgba(255, 255, 255, .1); } .baie__boutons button { padding: 6px 18px; border: 0; border-radius: 99px; background: transparent; cursor: pointer; font: 600 .82rem var(--bci-font-head); color: #c9cfe6; } .baie__boutons button[aria-pressed="true"] { background: #fff; color: var(--bci-navy); } .baie-svg { display: block; width: 100%; height: auto; } .baie__legende { margin-top: 8px; min-height: 2.6em; text-align: center; font-size: .86rem; line-height: 1.4; color: #c9cfe6; } .baie[data-etat="apres"] .baie__legende-avant, .baie[data-etat="avant"] .baie__legende-apres { display: none; } .baie-caisson { fill: #262d52; stroke: #3a4370; stroke-width: 2; } .baie-montant { fill: #8a91b0; } .baie-equip { fill: #3a4370; stroke: #4a5480; stroke-width: 1; } .baie-equip--panneau { fill: #e9ecf3; stroke: #c8cede; } .baie-equip--onduleur { fill: #2c3457; } .baie-port { fill: #2c3457; } .baie-port--sw { fill: #1b2140; } .baie-led { fill: #1f9d6b; } .baie-led--1 { fill: #7fe0b5; } .baie-etiq { font: 600 9px var(--bci-font-mono); fill: #c9cfe6; letter-spacing: .1em; } .baie-etiq--rep { fill: #e0a12a; text-anchor: end; font-size: 8px; } .baie-voyant { fill: #1f9d6b; } .baie-cordon { fill: none; stroke-width: 2.6; stroke-linecap: round; } .baie-cordon--vrac { stroke-width: 2.2; opacity: .9; } .baie-cordon--bleu { stroke: #4a8fd8; } .baie-cordon--vert { stroke: #1f9d6b; } .baie-cordon--rouge { stroke: #e5677f; } .baie-cordon--jaune { stroke: #e0a12a; } .baie-passe { fill: #1b2140; stroke: #4a5480; stroke-width: 1; } .baie-anneau { fill: none; stroke: #8a91b0; stroke-width: 1.2; } .baie-etiquette { fill: #fff; stroke: #c8cede; stroke-width: .6; } .baie-coche circle { fill: #1f9d6b; } .baie-coche path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .baie-avant, .baie-apres { transition: opacity .7s var(--bci-ease); } .baie[data-etat="apres"] .baie-avant { opacity: 0; } .baie[data-etat="avant"] .baie-apres { opacity: 0; } .baie[data-etat="apres"] .baie-apres .baie-cordon { stroke-dasharray: 60; stroke-dashoffset: 60; animation: baie-trace .9s var(--bci-ease) forwards; } .baie[data-etat="avant"] .baie-cordon--vrac { animation: baie-pend 3s ease-in-out infinite alternate; transform-box: view-box; } @keyframes baie-trace { to { stroke-dashoffset: 0; } } @keyframes baie-pend { to { transform: translateY(4px); } } .baie-led { animation: baie-led 1.4s steps(2) infinite; } .baie-led--1 { animation-delay: .5s; } .baie-led--2 { animation-delay: .9s; } @keyframes baie-led { 50% { opacity: .25; } } .baie-etiq { font-size: 6px; letter-spacing: .06em; text-anchor: end; fill: #c9cfe6; } .baie-u { font: 600 6px var(--bci-font-mono); fill: #8a91b0; text-anchor: end; } .baie-titre-u { font: 700 8px var(--bci-font-mono); fill: #8a91b0; text-anchor: middle; letter-spacing: .2em; } .baie-equip--passe { fill: #1b2140; stroke: #4a5480; } .baie-equip--obturateur { fill: #232a4d; stroke: #2f3760; } .baie-equip--switch { fill: #3a4370; } .baie-equip--coeur { fill: #2c3457; stroke: #7fe0b5; } .baie-equip--optique { fill: #e9ecf3; stroke: #c8cede; } .baie-equip--parefeu { fill: #c61f44; stroke: #e5677f; } .baie-equip--etagere { fill: #1b2140; stroke: #4a5480; } .baie-equip--serveur, .baie-equip--nvr { fill: #343c66; } .baie-equip--console { fill: #2c3457; } .baie-equip--onduleur, .baie-equip--batterie { fill: #262d52; stroke: #4a5480; } .baie-equip--pdu { fill: #1b2140; stroke: #4a5480; } .baie-etiq--sombre { fill: #2c3457; } .baie-sfp { fill: #1b2140; stroke: #7fe0b5; stroke-width: .8; } .baie-lc { fill: #e98a2b; } .baie-disque { fill: #262d52; stroke: #4a5480; stroke-width: .6; } .baie-voyant-rond { fill: #1f9d6b; } .baie-box { fill: #e9ecf3; } .baie-ecran { fill: #4a8fd8; opacity: .8; } .baie-grille { stroke: #3a4370; stroke-width: 2; } .baie-prise { fill: #0f1428; stroke: #4a5480; stroke-width: .6; } .baie-etiquette { fill: #fff; stroke: none; } .baie-cordon { stroke-width: 1.6; } .baie-cordon--vrac { stroke-width: 1.5; opacity: .9; } .baie-cordon--violet { stroke: #8a5cc4; } .baie-cordon--fibre { stroke: #e98a2b; stroke-width: 1.6; } .baie-cordon--alim { stroke: #0f1428; stroke-width: 2.4; opacity: 1; } .baie[data-etat="apres"] .baie-apres .baie-cordon { stroke-dasharray: 40; stroke-dashoffset: 40; } .wifi-baies { align-items: start; } .baie { position: sticky; top: 90px; } @media (max-width: 960px) { .wifi-baies { grid-template-columns: 1fr; } .baie { position: relative; top: 0; max-width: 420px; margin: 0 auto; } } @media (max-width: 560px) { .wifi-baies__grille { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .baie *, .baie-led { animation: none !important; } .baie[data-etat="apres"] .baie-apres .baie-cordon { stroke-dashoffset: 0; } } .wifi-devis__boutons { margin-top: 14px; gap: 10px; } .wifi-devis .wifi-devis__boutons .bci-btn { margin-top: 0; } /* 2026-11-12 — Partenaire du programme UniFi d'Ubiquiti (mention texte) */ .wifi-partenaire { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: center; margin-top: clamp(22px, 3vw, 32px); padding: clamp(20px, 3vw, 28px); background: var(--bci-surface); border: 1px solid var(--bci-border); border-left: 4px solid var(--bci-navy); border-radius: var(--bci-radius-lg, 18px); box-shadow: var(--bci-shadow-sm); } .wifi-partenaire h3 { margin: 6px 0 8px; font-family: var(--bci-font-head); font-size: 1.3rem; color: var(--bci-heading); } .wifi-partenaire p { margin: 0; color: var(--bci-text-muted); line-height: 1.6; } .wifi-partenaire__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; } .wifi-partenaire__liste li { display: grid; gap: 2px; padding-left: 22px; position: relative; } .wifi-partenaire__liste li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; border-radius: 50%; background: var(--bci-red-08, #fbe9ee); box-shadow: inset 0 0 0 3px var(--bci-red); } .wifi-partenaire__liste strong { font-family: var(--bci-font-head); color: var(--bci-heading); } .wifi-partenaire__liste span { color: var(--bci-text-muted); font-size: .94rem; } @media (max-width: 860px) { .wifi-partenaire { grid-template-columns: 1fr; } } /* en-tête : logo + menu + deux accès supervision sans débordement */ .bci-header .bci-container.bci-header__inner { max-width: 1440px; } .bci-header__cta:has(.wifi-btn-alertes) .bci-header__phone { display: none; } .bci-header__cta { flex-wrap: nowrap; } .bci-header__cta .bci-btn { white-space: nowrap; } @media (max-width: 1499px) { .bci-header__phone-text { display: none; } .bci-brand--logo .wifi-logo-site { height: 54px; } } @media (max-width: 1399px) { .bci-header__cta .wifi-btn-alertes { display: none; } } /* ========================================================================== 2026-11-13 — Pages d'offre (une page par offre et par site) + liens « en détail » ========================================================================== */ .wifi-plus { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 14px; font-weight: 600; color: var(--bci-red); text-decoration: none; } .wifi-plus:hover { text-decoration: underline; } .wifi-plus .bci-btn__icon { width: 16px; height: 16px; } .wifi-offre .wifi-plus { margin: 2px 0 16px; } .wifi-ariane ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; font-size: .9rem; color: var(--bci-text-muted); } .wifi-ariane li + li::before { content: "›"; margin-right: 6px; color: var(--bci-text-dim); } .wifi-ariane a { color: var(--bci-text-muted); } .wifi-op__hero { padding-bottom: clamp(24px, 3vw, 40px); background: var(--bci-bg-alt); } .wifi-op__hero-grille { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; } .wifi-op__hero-grille--illu { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } .wifi-op__hero h1 { font-family: var(--bci-font-head); color: var(--bci-heading); font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.12; margin: 8px 0 14px; } .wifi-op__hero .bci-lead { margin-bottom: 1.6rem; } .wifi-op__logo { display: block; width: auto; height: 46px; margin-bottom: 14px; } .wifi-op__illu { margin: 0; border-radius: var(--bci-radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--bci-border); box-shadow: var(--bci-shadow); } .wifi-op__illu img { display: block; width: 100%; height: auto; } .wifi-op__corps { display: grid; gap: clamp(28px, 4vw, 56px); } .wifi-op__corps--aside { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } .wifi-op__texte { max-width: 820px; } .wifi-op__bloc + .wifi-op__bloc { margin-top: clamp(26px, 3vw, 38px); padding-top: clamp(26px, 3vw, 38px); border-top: 1px solid var(--bci-border); } .wifi-op__bloc h2 { font-family: var(--bci-font-head); color: var(--bci-heading); font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin: 0 0 .55em; } .wifi-op__bloc p { color: var(--bci-text); } .wifi-op__bloc .wifi-offre__liste { margin-top: 12px; } .wifi-op__note { font-size: .92rem; color: var(--bci-text-muted); border-left: 3px solid var(--bci-border-strong); padding-left: 12px; } .wifi-op__aside { position: sticky; top: calc(var(--bci-header-h) + 20px); } .wifi-op__aside img { display: block; width: 100%; height: auto; border-radius: var(--bci-radius); } .wifi-op__etapes { counter-reset: etape; margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; } .wifi-op__etapes li { counter-increment: etape; position: relative; display: grid; gap: 2px; padding: 14px 16px 14px 60px; border: 1px solid var(--bci-border); border-radius: var(--bci-radius); background: var(--bci-surface); } .wifi-op__etapes li::before { content: counter(etape); position: absolute; left: 16px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--bci-red); color: #fff; font-family: var(--bci-font-head); font-weight: 700; display: grid; place-items: center; } .wifi-op__etapes strong { font-family: var(--bci-font-head); color: var(--bci-heading); } .wifi-op__etapes span { color: var(--bci-text-muted); } .wifi-op__voir-titre { font-family: var(--bci-font-head); color: var(--bci-heading); font-size: 1.3rem; margin: 0 0 14px; } .wifi-op__voir { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .wifi-op__voir a { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; height: 100%; padding: 16px 18px; border: 1px solid var(--bci-border); border-radius: var(--bci-radius); background: var(--bci-surface); text-decoration: none; transition: border-color .2s, box-shadow .2s; } .wifi-op__voir a:hover { border-color: var(--bci-red); box-shadow: var(--bci-shadow-sm); } .wifi-op__voir strong { font-family: var(--bci-font-head); color: var(--bci-heading); } .wifi-op__voir span { grid-row: 2; font-size: .85rem; color: var(--bci-text-muted); } .wifi-op__voir .bci-btn__icon { grid-row: 1 / 3; grid-column: 2; width: 18px; height: 18px; color: var(--bci-red); } @media (max-width: 960px) { .wifi-op__hero-grille--illu, .wifi-op__corps--aside { grid-template-columns: 1fr; } .wifi-op__aside { position: static; max-width: 300px; } .wifi-op__voir { grid-template-columns: 1fr; } }