/* ==========================================================================
   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 <img> 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; }

/* 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); }