/* Black IP 360 — adaptation responsive des 11 pages uniques.
 *
 * Ces pages sont importées en blocs « HTML personnalisé » pour rester éditables dans
 * WordPress, avec les styles en ligne du design intacts : c'est ce qui garantit le 1:1 au
 * pixel et un diff nul par rapport à la maquette. La contrepartie est qu'un style en ligne
 * ne se surcharge pas en media query — d'où ces règles en !important, scopées à `.bip-page`
 * pour que le chrome et les deux moteurs n'en soient jamais affectés.
 *
 * Les sélecteurs visent les valeurs réellement présentes, relevées sur les 11 DOM rendus.
 * Les grilles `auto 1fr` (pastille + texte) ne sont pas touchées : la pastille doit rester
 * à côté de son texte, comme dans le moteur de landing.
 * Les grilles `auto-fit minmax(...)` s'adaptent déjà d'elles-mêmes.
 * La hauteur de 700px n'est pas touchée non plus : c'est le cadre de l'embed Calendly.
 */

/* ============ Formulaire de contact ============ */
/* États que la maquette n'a pas : erreur par champ, confirmation, erreur réseau. */
.bip-form__error{
	display:block;
	font-size:13px;
	font-weight:400;
	color:#b42318;
}
.bip-form [aria-invalid="true"]{
	border-color:#b42318 !important;
	box-shadow:0 0 0 3px rgba(180,35,24,.12);
}
.bip-form__status{
	margin-top:16px;
	padding:14px 16px;
	border-radius:10px;
	font-size:15px;
	line-height:1.5;
	border:1px solid var(--bip-border);
	background:var(--bip-grey);
	color:var(--bip-ink);
}
.bip-form__status--ok{
	border-color:rgba(63,175,122,.4);
	background:rgba(63,175,122,.1);
	color:var(--bip-green-deep);
}
.bip-form__status--error{
	border-color:rgba(180,35,24,.35);
	background:rgba(180,35,24,.07);
	color:#b42318;
}
.bip-form button[disabled]{ opacity:.6; cursor:progress; }

/* ============ ≤1024px : les deux colonnes asymétriques passent en une ============ */
@media (max-width:1024px){
	.bip-page [style*="1.05fr 0.95fr"],
	.bip-page [style*="0.85fr 1.15fr"],
	.bip-page [style*="0.9fr 1.1fr"],
	.bip-page [style*="1.25fr 0.75fr"]{
		grid-template-columns:1fr !important;
		gap:36px !important;
	}

	.bip-page [style*="repeat(4, 1fr)"]{ grid-template-columns:repeat(2,1fr) !important; }

	/* Visuels de hero : 400 à 460px au design. */
	.bip-page [style*="height: 400px"],
	.bip-page [style*="height: 440px"],
	.bip-page [style*="height: 450px"],
	.bip-page [style*="height: 460px"]{ height:340px !important; }

	.bip-page h1[style]{ font-size:44px !important; }
}

/* ============ ≤768px : une seule colonne ============ */
@media (max-width:768px){
	.bip-page [style*="repeat(3, 1fr)"],
	.bip-page [style*="repeat(4, 1fr)"],
	.bip-page [style*="1fr 1fr"],
	.bip-page [style*="1.05fr 0.95fr"],
	.bip-page [style*="0.85fr 1.15fr"],
	.bip-page [style*="0.9fr 1.1fr"],
	.bip-page [style*="1.25fr 0.75fr"]{
		grid-template-columns:1fr !important;
	}

	/* Rythme vertical : 96-100px → 60px, comme le prescrit le README. */
	.bip-page section[style*="padding: 100px 0px"],
	.bip-page section[style*="padding: 96px 0px"],
	.bip-page section[style*="padding: 92px 0px"],
	.bip-page section[style*="padding: 88px 0px"]{ padding:60px 0 !important; }

	.bip-page section[style*="padding: 76px 0px"]{ padding:48px 0 !important; }
	.bip-page section[style*="padding: 70px 0px 24px"],
	.bip-page section[style*="padding: 66px 0px 20px"]{ padding:40px 0 16px !important; }

	.bip-page h1[style]{ font-size:32px !important; line-height:1.15 !important; letter-spacing:-.3px !important; }
	.bip-page h2[style]{ font-size:26px !important; }

	.bip-page [style*="height: 400px"],
	.bip-page [style*="height: 440px"],
	.bip-page [style*="height: 450px"],
	.bip-page [style*="height: 460px"]{ height:220px !important; }

	/* Champs de formulaire : cibles tactiles de 44px minimum. */
	.bip-page input,
	.bip-page select,
	.bip-page textarea,
	.bip-page button{ min-height:44px; }

	/* Un élément de grille ou de flex ne descend pas sous la largeur minimale de son contenu.
	   Sur la page Contact, l'option la plus longue de la liste déroulante — « Cloud, serveurs,
	   sauvegardes » — imposait 345px à sa carte, marge intérieure comprise, et faisait déborder
	   toute la page sous 370px de fenêtre. On les autorise à rétrécir. */
	.bip-page [style*="grid-template-columns"] > *,
	.bip-page [style*="display: flex"] > *{ min-width:0; }
	.bip-page select,
	.bip-page input,
	.bip-page textarea{ max-width:100%; min-width:0; }

	/* Un tableau ne doit jamais élargir la page. */
	.bip-page table{ display:block; overflow-x:auto; }
}

/* Le widget Calendly porte `min-width:320px`, ce que le handoff reprend du script officiel.
   Sous 370px de fenêtre, l'espace de contenu tombe à moins de 300px et ce minimum faisait
   déborder la page Contact de 24px. L'iframe de Calendly gère sa propre mise en page : le
   minimum n'a pas à être imposé au conteneur. */
@media (max-width:420px){
	.bip-page .calendly-inline-widget{ min-width:0 !important; }
}