a[data-astro-cid-evkijfd6] {
  display: inline-block;
  text-decoration: none;
}

a[data-astro-cid-evkijfd6].active {
  font-weight: bolder;
  text-decoration: underline;
}
.social-links[data-astro-cid-2tuuk6ci] {
  display: flex;
  align-items: center;
}

.social-links[data-astro-cid-2tuuk6ci] ul[data-astro-cid-2tuuk6ci] {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: .5rem;
  align-items: center;
}

.social-link[data-astro-cid-2tuuk6ci] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem;
  border-radius: .25rem;
  transition: opacity .2s, transform .2s;
  text-decoration: none;
  color: currentColor;
}

.social-link[data-astro-cid-2tuuk6ci]:hover {
  opacity: .8;
  transform: scale(1.1);
}

.social-link[data-astro-cid-2tuuk6ci]:focus-visible {
  outline: 2px solid;
  outline-offset: 4px;
}

.social-link[data-astro-cid-2tuuk6ci]:active {
  transform: scale(.95);
}

.social-link[data-astro-cid-2tuuk6ci] svg[data-astro-cid-2tuuk6ci] {
  fill: currentColor;
}

.sr-only[data-astro-cid-2tuuk6ci] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
/* =========================================================
   HEADER
========================================================= */

.headerH {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-areas:
		"title"
		"text1"
		"text2"
		"social"
		"menu"
		"button";

	width: 100%;
	gap: clamp(0.6rem, 1.5vw, 1rem);
	padding: clamp(0.75rem, 2vw, 1.25rem);
	margin: 0;
	box-sizing: border-box;

	border-bottom: 1px solid var(--light);
	box-shadow: 0 -12px 20px rgba(var(--light), 30%);
	animation: shadowPulseH 7s ease-in-out infinite;

	align-items: stretch;
}

/*
   Les éléments internes deviennent des enfants
   directs de la grille.
*/
.header-topH,
.main-menuH {
	display: contents;
}

/* Tous les blocs doivent pouvoir rétrécir */
.titre,
.text1,
.text2,
.social-links,
.internal-linksH,
.bouton360 {
	min-width: 0;
	width: 100%;
	margin: 0;
	box-sizing: border-box;
}

/* =========================================================
   ZONES DE LA GRILLE
========================================================= */

.titre {
	grid-area: title;
}

.text1 {
	grid-area: text1;
}

.text2 {
	grid-area: text2;
}

.social-links {
	grid-area: social;
}

.internal-linksH {
	grid-area: menu;
}

.bouton360 {
	grid-area: button;
}

/* =========================================================
   TITRE
========================================================= */

.titre .site-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	color: inherit;
	text-decoration: none;
	text-align: left;
}

.titre .site-title p,
.titre .site-title h2 {
	display: block;
	width: 100%;
	margin: 0;
}

.titre .site-title p:first-child {
	font-size: clamp(0.85rem, 1.5vw, 1.25rem);
	line-height: 1.15;
}

.titre .site-title h2 {
	font-size: clamp(1rem, 2.4vw, 1.8rem);
	line-height: 1.1;
	overflow-wrap: anywhere;
}

.titre .site-title p:last-child {
	margin-top: 0.5rem;
	font-size: clamp(0.65rem, 1vw, 0.95rem);
	line-height: 1.2;
}

/* =========================================================
   TEXTES
========================================================= */

.text1,
.text2 {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;

	font-size: clamp(0.75rem, 1.15vw, 1rem);
	line-height: 1.3;

	/*
	   Justification du texte avec dernière ligne
	   alignée à gauche.
	*/
	text-align: justify;
	text-align-last: left;

	overflow-wrap: anywhere;
}

.text1 p,
.text2 p {
	display: block;
	width: 100%;
	margin: 0;

	box-sizing: border-box;
	text-align: justify;
	text-align-last: left;
}

/* =========================================================
   RÉSEAUX SOCIAUX
========================================================= */

.social-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.5rem, 1vw, 1rem);

	font-size: clamp(0.75rem, 1vw, 1rem);
}

/* =========================================================
   MENU
========================================================= */

.internal-linksH {
	display: flex;
	align-items: center;
	justify-content: center;
	margin:1rem 0;
}

.internal-linksH ul {
	display: flex;
	align-items: center;
	justify-content: left;
	flex-wrap: wrap;

	width: 100%;
	gap: clamp(0.35rem, 1vw, 1.25rem);

	margin: 0;
	padding: 0;

	list-style: none;
}

.main-menuH a {
	display: block;
	padding: clamp(0.35rem, 0.8vw, 0.75rem)
			 clamp(0.25rem, 0.6vw, 0.6rem);

	color: var(--black);
	font-size: clamp(0.7rem, 1vw, 1rem);
	line-height: 1.1;
	text-align: center;
	text-decoration: none;

	border: 1px solid color-mix(in srgb,var(--light) 20%, transparent);
	border-radius:0.5rem;

	transition:
		color 0.5s ease,
		border-color 0.5s ease;
}

.main-menuH a:hover {
	color: var(--accent-dark);
	border-bottom: 4px solid var(--accent-dark);
}

.main-menuH a.active {
	border-bottom-color: var(--accent);
}

/* =========================================================
   BOUTON 360
========================================================= */

.bouton360 {
	display: flex;
	align-items: stretch;
	justify-content: center;
	
	max-height: clamp(2rem, 10vw, 6rem);
	margin-bottom: 1rem;
}

.bouton360 > * {
	display: flex;
	flex: 1 1 auto;
	align-items: stretch;
	justify-content: center;

	width: 100%;
	height: 100%;
	min-width: 0;
}

/*
   À utiliser si LogCard possède une classe .cards
*/
.bouton360 :global(.cards) {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;
}

/* =========================================================
   PLUS DE 1300px
=========================================================

   Ligne 1 :
   TITRE | text1 | text2 | réseaux sociaux

   Ligne 2 :
   MENU sur 9 colonnes | bouton360 sur 3 colonnes
========================================================= */

@media (min-width: 1300px) {
	.headerH {
		grid-template-areas:
			"title title title text1 text1 text1 text2 text2 text2 social social social"
			"menu menu menu menu menu menu menu menu menu button button button";
	}

.titre .site-title p:first-child {
	font-size: clamp(0.85rem, 1.5vw, 1.25rem);
	line-height: 1.15;
}

.titre .site-title h2 {
	font-size: clamp(1rem, 2.4vw, 1.8rem);
	line-height: 1.1;
	overflow-wrap: anywhere;
}
	.text1,
	.text2 {
		font-size: clamp(0.85rem, 1vw, 1.1rem);
	}
}

/* =========================================================
   DE 951px À 1300px
=========================================================

   Ligne 1 : TITRE
   Ligne 2 : text1 | text2 | réseaux sociaux
   Ligne 3 : MENU
   Ligne 4 : bouton360
========================================================= */

@media (min-width: 951px) and (max-width: 1299px) {
	.headerH {
		grid-template-areas:
			"title title title title title title title title title title title title"
			"text1 text1 text1 text1 text2 text2 text2 text2 social social social social"
			"menu menu menu menu menu menu menu button button button button button";
	}
	.titre .site-title p, .titre .site-title h2 {
		text-align:center;
	}

	.text1,
	.text2 {
		font-size: clamp(0.8rem, 1.2vw, 1rem);
		display:grid;
		text-align-last: center;
		align-items: center;
		justify-content: center;
	}
	.text1 {
		padding: 0 2rem 0;
		border-left: 1px solid var(--light);
	}
	.text2 {
		padding: 0 2rem;
		border-left: 1px solid var(--light);
		border-right: 1px solid var(--light);
	}
	div.social-links {
		padding: 0 2rem 0;
		border-right: 1px solid var(--light);	
	}
}

/* =========================================================
   DE 700px À 950px
=========================================================

   Ligne 1 : TITRE
   Ligne 2 : text1 | text2
   Ligne 3 : MENU
   Ligne 4 : bouton360
========================================================= */

@media (min-width: 700px) and (max-width: 950px) {
	.headerH {
		grid-template-areas:
			"title title title title title title title title title title title title"
			"text1 text1 text1 text1 text1 text1 text2 text2 text2 text2 text2 text2"
			"menu menu menu menu menu menu menu menu menu menu menu menu"
			"button button button button button button button button button button button button";
	}

	.social-links {
		display: none;
	}

	.titre .site-title p, .titre .site-title h2 {
		text-align:center;
	}	
	.titre .site-title p:first-child {
		font-size: clamp(1rem, 2.5vw, 1.5rem);
	}

	.titre .site-title h2 {
		font-size: clamp(1.5rem, 3.5vw, 2rem);
	}
	
	.text1,
	.text2 {
		font-size: clamp(0.85rem, 1vw, 1.1rem);	
		display:grid;
		text-align-last: center;
		align-items: center;
		justify-content: center;
	}
	.text1 {
		padding: 0 2rem 0;
		border-left: 1px solid var(--light);
	}
	.text2 {
		padding: 0 2rem;
		border-left: 1px solid var(--light);
		border-right: 1px solid var(--light);
	}
	
	.internal-linksH ul {
		gap: 0.5rem;	
		justify-content: center;
	}

	.main-menuH a {
		text-align:center;
		font-size: clamp(0.7rem, 1.5vw, 0.95rem);
	}	
	.border360{
		max-height: clamp(2rem, 4vw, 2.5rem);
	}
}

/* =========================================================
   DE 300px À 700px
=========================================================

   Ligne 1 : TITRE
   Ligne 2 : text1
   Ligne 3 : MENU
   Ligne 4 : bouton360
========================================================= */

@media (min-width: 300px) and (max-width: 699px) {
	.headerH {
		grid-template-areas:
			"title title title title title title title title title title title title"
			"text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1"
			"menu menu menu menu menu menu menu menu menu menu menu menu"
			"button button button button button button button button button button button button";

		gap: 0.75rem;
	}

	.text2,
	.social-links {
		display: none;
	}

	.titre .site-title h2 {
		font-size: clamp(1.6rem, 5.5vw, 1.6rem);
		text-align:center;
	}

	.titre .site-title p:first-child {
		font-size: clamp(1.2rem, 3.5vw, 1.3rem);
		text-align:center;
	}

	.titre .site-title p:last-child {
		font-size: clamp(0.65rem, 2.8vw, 0.9rem);
		text-align:center;
	}
	
	.text1 p {
		text-align: justify;
		text-align-last: center;
	}
	
	.text1 {
		font-size: clamp(0.75rem, 3.2vw, 1rem);
	}

	.internal-linksH ul {
		flex-wrap: wrap;
		gap: 0.35rem 0.5rem;
		justify-content:center;
	}

	.main-menuH a {

    padding: 0.5rem 0.5rem;
    font-size: clamp(0.9rem, 2.8vw, 1rem);
	}
	
}
/* =========================================================
   MOINS DE 500px
========================================================= */
@media (max-width: 500px) {
	.bouton360 {
		max-height: none;
	}
}
/* =========================================================
   MOINS DE 390px
========================================================= */
@media (max-width: 389px) {
	.text1 {
		display: none;
	}
}

/* =========================================================
   MOINS DE 300px
========================================================= */

@media (max-width: 299px) {
	.headerH {
		grid-template-areas:
			"title"
			"menu"
			"button";

		gap: 0.5rem;
		padding: 0.5rem;
	}

	.text2,
	.social-links {
		display: none;
	}

	.text1 {
		font-size: 0.7rem;
	}

	.titre .site-title h2 {
		font-size: 0.9rem;
	}

	.titre .site-title p {
		font-size: 0.7rem;
	}

	.internal-linksH ul {
		gap: 0.25rem;
	}

	.main-menuH a {
		padding: 0.3rem 0.2rem;
		font-size: 0.62rem;
	}

	.bouton360 {
		min-height: 75px;
	}
}

/* =========================================================
   ACCESSIBILITÉ : réduire les animations
========================================================= */

@media (prefers-reduced-motion: reduce) {
	headerT {
		animation: none;
	}
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes shadowPulseH {
	0% {
		box-shadow: 0 8px 12px rgba(var(--flamme), 0%);
	}

	50% {
		box-shadow: 0 25px 50px rgba(var(--flamme), 30%);
	}

	100% {
		box-shadow: 0 8px 12px rgba(var(--flamme), 10%);
	}
}
  /* =========================
   BASE (layout + rendu)
   ========================= */
.cards {
  display: grid;
  gap: 2rem;
  margin:1rem 0rem;
}

.soutien{
  width: 100%;
  max-width: 600px;
/*  margin: 1rem 1rem;*/
  background: rgba(18, 22, 29, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;

  padding: clamp(14px, 2.2vw, 20px);
  display: flex;
  gap: clamp(1rem, 1.6vw, 1.2rem);
  align-items: center;

  box-shadow:
    0 18px 40px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.04);

  position: relative;
  overflow: hidden;

  --text: rgba(255,255,255,0.92);
  --subtext: rgba(165, 172, 190, 0.85);
  --border: rgba(255, 255, 255, 0.08);

  --dot: #ff4ab4;
  --dot-glow: rgba(255, 74, 180, .12);
  --accent: #ff4ab4;
  --accent-glow: rgba(255,74,180,.25);

  --border-glow-a: rgba(255, 74, 180, 0.35);
  --border-glow-b: rgba(130, 92, 255, 0.18);

  transition:
    transform 220ms cubic-bezier(.2,.8,.2,1),
    box-shadow 220ms ease,
    border-color 220ms ease,
    background 220ms ease;
}

.soutien{
  background: var(--bg-1);
  border-color: var(--border);
}

.soutien::after{
  content:"";
  position:absolute;
  inset: -1px;
  border-radius: 14px;
  pointer-events:none;

  background: linear-gradient(135deg,
    var(--border-glow-a),
    var(--border-glow-b),
    rgba(0,0,0,0)
  );

  opacity: .55;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding: 1px;

  transition: opacity 220ms ease, transform 220ms ease;
}

.soutien:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.4);
  box-shadow:
    0 26px 60px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.soutien:hover::after{
  opacity: .9;
  transform: scale(1.01);
}

/* Pour que ce soit une vraie “card cliquable” */
.soutien{
  text-decoration: none;
  display: flex; /* nécessaire si <a> */
  color: inherit;
}

.soutien:focus-visible{
  outline: 2px solid rgba(255, 74, 180, 0.55);
  outline-offset: 3px;
}
/* =========================
   TYPO
   ========================= */
.soutien__text{
  min-width: 0;
  flex: 1 1 auto;
}

.soutien__title{
  color: var(--light);
  font-weight: 700;
  font-size: clamp(15px, 2vw, 16.5px);
  letter-spacing: 0.2px;
  line-height: 1.25;
  margin-bottom: 6px;
}

.soutien__subtitle{
  color: var(--subtext);
  font-size: clamp(12.5px, 1.7vw, 13px);
  line-height: 1.3;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  max-width: 90%;
}

/* =========================
   DOT + CHEVRON
   ========================= */
.soutien__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;

  background: var(--dot);
  box-shadow: 0 0 0 4px var(--dot-glow);

  flex: 0 0 auto;
  margin-left: 2px;

  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease;
}

.soutien:hover .soutien__dot{
  transform: scale(1.08);
  box-shadow: 0 0 0 6px var(--dot-glow);
}

.soutien__chev{
  width: clamp(32px, 5vw, 36px);
  height: clamp(32px, 5vw, 36px);
  border-radius: 10px;

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);

  flex: 0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;

  transition: transform 220ms cubic-bezier(.2,.8,.2,1), border-color 220ms ease, background 220ms ease;
}

.soutien:hover .soutien__chev{
  transform: rotate(-45deg);
  border-color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.2);
}

.soutien__chevArrow{
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--accent);
  border-top: 2px solid var(--accent);

  transform: rotate(45deg) translate(-1px, 1px);
  filter: drop-shadow(0 0 10px var(--accent-glow));

  transition: filter 220ms ease, transform 220ms cubic-bezier(.2,.8,.2,1);
}

.soutien:hover .soutien__chevArrow{
  filter: drop-shadow(0 0 14px var(--accent-glow));
  transform: rotate(45deg) translate(0px, 0px) scale(1.06);
}

/* =========================
   THÈMES
   (assigne les variables)
   ========================= */

/* 1) Dominantes rouge + secondaire dans les noirs */
.soutien.theme-1{
  --bg-1: rgba(22, 10, 14, 0.86);
  --subtext: rgba(220, 170, 180, 0.85);
  --dot: #ff4b4b;
  --dot-glow: rgba(255, 75, 75, .12);
  --accent: #ff4b4b;
  --accent-glow: rgba(255, 75, 75, .28);

  --border-glow-a: rgba(255, 75, 75, 0.38);
  --border-glow-b: rgba(255, 255, 255, 0.14);
  border-radius: 10px 0px 14px 0px; /*coins opposés arrondis*/
}
.soutien.theme-1::after{
  	border-radius: 10px 0px 14px 0px;
}
.soutien.theme-1:hover{
  --border: rgba(255, 255, 255, 100);
}
/* Pour éviter d’avoir un “fond”/tint résiduel du card */
.soutien.theme-1{
  background: transparent;
}

/* 2) Dominantes blanches + secondaire dans les bleus */
.soutien.theme-2{
  --bg-1: rgba(245, 247, 255, 0.16);
  --border: rgba(255, 255, 255, 0.12);
  --text: rgba(255,255,255,0.95);
  --subtext: rgba(165, 200, 255, 0.88);

  --dot: #4aa3ff;
  --dot-glow: rgba(74, 163, 255, .18);
  --accent: #4aa3ff;
  --accent-glow: rgba(74, 163, 255, .30);

  --border-glow-a: rgba(255, 255, 255, 0.34);
  --border-glow-b: rgba(74, 163, 255, 0.22);
}

/* 3) Dominantes noires + secondaire dans les rouges */
.soutien.theme-3{
  --bg-1: rgba(10, 10, 12, 0.88);
  --subtext: rgba(210, 160, 170, 0.85);

  --dot: #ff4b4b;
  --dot-glow: rgba(255, 75, 75, .12);
  --accent: #ff4b4b;
  --accent-glow: rgba(255, 75, 75, .28);

  --border-glow-a: rgba(255, 75, 75, 0.30);
  --border-glow-b: rgba(255, 255, 255, 0.08);
}

/* 4) Dominantes oranges + secondaire dans les rouges */
.soutien.theme-4{
  --bg-1: rgba(26, 16, 8, 0.88);
  --subtext: rgba(255, 205, 150, 0.86);

  --dot: #ff4b4b;
  --dot-glow: rgba(255, 75, 75, .12);
  --accent: #ff4b4b;
  --accent-glow: rgba(255, 75, 75, .28);

  --border-glow-a: rgba(255, 160, 60, 0.35);
  --border-glow-b: rgba(255, 75, 75, 0.22);
}

/* 5) Inverse du 4: dominante rose + secondaire violet */
.soutien.theme-5{
  --bg-1: rgba(30, 10, 24, 0.88);
  --subtext: rgba(215, 180, 245, 0.86);

  --dot: #b86bff; /* secondaire violet */
  --dot-glow: rgba(184, 107, 255, .16);
  --accent: #b86bff;
  --accent-glow: rgba(184, 107, 255, .30);

  --border-glow-a: rgba(255, 74, 180, 0.34);  /* dominante rose */
  --border-glow-b: rgba(184, 107, 255, 0.22); /* secondaire violet */
}
/* 6) Bordure rouge -> orange uniquement (milieu transparent) */
.soutien.theme-6{
  --bg-1: rgba(0,0,0,0);
  --border: rgba(93, 0, 23, 0.9);/*marron*/
  --text: rgba(25,25,25,0.92);
  --subtext: rgba(55,55,55,0.75);

  /* paramètres utilisés par le ::after */
  --border-glow-a: rgba(209, 0, 52, 0.5);     /* rouge */
  --border-glow-b: rgba(255, 154, 60, 0.3);    /* orange */
    border-radius: 10px 0px 14px 0; /* coins opposés arrondis*/
}
.soutien.theme-6::after{
  	border-radius: 10px 0px 14px 0; /*coins opposés arrondis*/
}
.soutien.theme-6:hover{
  --border: rgba(69, 69, 69, 100);
}
/* 7) Dominantes blanches + secondaire dans les bleus + coins opposés */
.soutien.theme-7{
  --bg-1: rgba(245, 247, 255, 0.16);
  --border: rgba(255, 255, 255, 0.9);
  --text: rgba(255,255,255,0.95);
  --subtext: rgba(165, 200, 255, 0.88);
  --dot: #4aa3ff;
  --dot-glow: rgba(74, 163, 255, .18);
  --accent: #4aa3ff;
  --accent-glow: rgba(74, 163, 255, .30);
  --border-glow-a: rgba(255, 255, 255, 0.34);
  --border-glow-b: rgba(74, 163, 255, 0.22);
   	border-radius: 0px 10px 0px 14px; /*coins opposés arrondis*/
}
.soutien.theme-7::after{
  	border-radius: 0px 10px 0px 14px; /*coins opposés arrondis*/
}
.soutien.theme-7:hover{
  --border: rgba(255, 255, 255, 100);
}
/* Pour éviter d’avoir un “fond”/tint résiduel du card */
.soutien.theme-7{
  background: transparent;
}
/* 8) test 0 bord et coins opposés */
.soutien.theme-8{
  background: transparent;
  color: #ff4d4d;
  border: 2px solid #ff4d4d;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  border-radius: 10px 0px 14px 0; /* TL, TR, BR, BL */
}
.soutien.theme-8:hover{
  background: rgba(255, 77, 77, 0.1);
}
.soutien.theme-8::after{
  border-radius: 10px 0px 14px 0;
}
.social-links[data-astro-cid-y2qsmizv] {
  display: flex;
  align-items: center;
}

.social-links[data-astro-cid-y2qsmizv] ul[data-astro-cid-y2qsmizv] {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: .5rem;
  align-items: center;
}

.social-link[data-astro-cid-y2qsmizv] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem;
  border-radius: .25rem;
  transition: opacity .2s, transform .2s;
  text-decoration: none;
  color: currentColor;
}

.social-link[data-astro-cid-y2qsmizv]:hover {
  opacity: .8;
  transform: scale(1.1);
}

.social-link[data-astro-cid-y2qsmizv]:focus-visible {
  outline: 2px solid;
  outline-offset: 4px;
}

.social-link[data-astro-cid-y2qsmizv]:active {
  transform: scale(.95);
}

.social-link[data-astro-cid-y2qsmizv] svg[data-astro-cid-y2qsmizv] {
  fill: currentColor;
}

.sr-only[data-astro-cid-y2qsmizv] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.three-cols[data-astro-cid-hpx3pnvk] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  align-items: start;
  margin: 1rem 0;
}

.col[data-astro-cid-hpx3pnvk] {
  min-width: 0;
}

@media (width <= 900px) {
  .three-cols[data-astro-cid-hpx3pnvk] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

@media (width <= 720px) {
  .three-cols[data-astro-cid-hpx3pnvk] {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
footer {
	display: flex;
	flex-direction: column;
	padding: 2em 1em 6em 1em;
/*	background: linear-gradient(var(--gray-gradient)) no-repeat;*/
	box-shadow: 0 -12px 20px var(--red-primary);
	animation: shadowPulseF 7s ease-in-out infinite;
	color: rgb(var(--gray));
	text-align: center;
	width:100%;
	border-top:1px solid var(--light);
}

.footer-top {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
}

.footer-random {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.footer-grid {
	display: grid;
	gap: 1rem;
	width: 100%;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start;
}
.footer-grid2 {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	width: 100%;
	margin: 0 auto;
}

.footer-grid2 > .social-linksF {
	width: auto;
	min-height: auto;
	flex: 0 1 auto;
}
.footer-grid2 > .social-linksF:last-child {
	width: auto;
	min-width: 0;
}

.footer-grid2 > .social-linksF:last-child p {
	margin: 0;
	text-align: center;
	word-break: normal;
	overflow-wrap: normal;
	white-space: normal;
}

/*
.footer-grid2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	justify-content: center;
}
*/
.footer-menu {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.footer-menu p {
	margin: 0;
}

.menuF ul {
	list-style: none;
	padding: 0rem 1rem;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
}

.menuF li {
	margin: 0;
}

.menuF a {
	display: block;
	border: 1px solid #fff;
	padding: 0.5rem 2rem;
	text-decoration: none;
	text-transform:lowercase;
	text-align:left;
	color: rgb(var(--gray));
	background: rgba(255, 255, 255, 0.03);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.menuF a:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #d10034;
	border-color: rgba(255, 255, 255, 0.85);
	border-right: 1px solid #d10034;
	border-left: 1px solid #d10034;
	transform: translateY(-1px);
}

.social-linksF {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: calc(100% - 1rem);
	min-height: 100%;
}

.social-linksF a {
	text-decoration: none;
	color: rgb(var(--gray));
	padding: 0rem 1rem;
}

.social-linksF a:hover {
	color: rgb(var(--gray-dark));
}
.social-linksF p {text-align: center;
}

.site-titleF {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 100%;
	font-weight:700;
}
.red-text {
	animation: fadeInOutOpacity 10s ease-in-out infinite;
	letter-spacing: 0.1rem;
	font-weight: 700;
}
@keyframes fadeInOutOpacity {
	0% {opacity: 0.9;color: inherit;}
	25% {opacity: 0.2;}
	50% {color: var(--red-primary);}
	75% {opacity: 0.5;}
	100% {opacity: 0.9;color: inherit;}
}

@keyframes shadowPulseF {
	0% { box-shadow: 0px -8px 2rem rgba(var(--flamme), 20%); }
	50% { box-shadow: 0px -15px 5rem rgba(var(--flamme), 60%); }
	80% { box-shadow: 0px -15px 50rem rgba(var(--flamme), 100%); }
	100% { box-shadow: 0px -8px 2rem rgba(var(--flamme), 40%); }
}

@media (max-width: 1024px) {
	.footer-grid {
		/*grid-template-columns: repeat(2, minmax(0, 1fr));*/
		display: block;
		margin: 1rem 0rem;
	}

	.menuF ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem;
		margin: 2rem 0rem;
	}

	.social-linksF {
		grid-column: 1 / -1;
	}
}
@media (max-width: 950px){
	.footer-grid2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.75rem;
		width: 100%;
	}

	.footer-grid2 > .social-linksF {
		width: 100%;
		min-height: auto;
	}

	.footer-grid2 > .social-linksF p {
		margin: 0;
		line-height: 1.3;
		word-break: normal;
		overflow-wrap: break-word;
	}


}

@media (max-width: 640px) {
	.footer-grid {
		grid-template-columns: 1fr;
	}
	
	.menuF ul {
		grid-template-columns: 1fr;
		margin: 2rem 1rem;
	}
	.social-linksF .social-link {
		display: contents;
	}
	.footer-grid2 > .social-linksF p, .social-linksF, .site-titleF {
		font-size: clamp(1rem, 2vw, 1.5rem);
	}
}
@media (max-width: 349px) {
	.footer-grid2 > .social-linksF p, .social-linksF, .site-titleF {
		font-size: clamp(0.8rem, 1vw, 1rem);
	}
	
		/*.footer-grid2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
	}*/
}
/************ CSS GLOBAL DES BANNIÈRES */

/* ===== Styles communs ===== */
section {
  width: 100%;
}

p {
  text-align: left;
}

/* Classe générique pour tous les modules */
[class^="module-fixe"] {
  position: relative;
  border: 2px solid rgba(96, 115, 159);
  overflow: hidden;
  transition:
    border-color .25s ease,
    color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}

/* Contenu au-dessus des overlays */
[class^="module-fixe"] > a,
[class^="module-fixe"] > a * {
  position: relative;
  z-index: 1;
}

/* Textes couleur de base */
[class^="module-fixe"] p,
[class^="module-fixe"] .text-geant,
[class^="module-fixe"] .text-grand,
[class^="module-fixe"] .large {
  color: rgba(96, 115, 159);
  transition: color .25s ease;
}

/* Survol : changement de couleur */
[class^="module-fixe"]:hover {
  border-color: #d10034;
  transform: translateY(-2px);
}

[class^="module-fixe"]:hover p,
[class^="module-fixe"]:hover .text-geant,
[class^="module-fixe"]:hover .text-grand,
[class^="module-fixe"]:hover .large {
  color: #d10034;
}

/* Lien sans décoration */
[class^="module-fixe"] a {
  text-decoration: none;
}


/* ================== MODULE URGENCE 17 ===== */
.module-fixe {
  margin: 1.5rem 1rem;
  padding: 1.5rem;
  border-radius: 1.5rem;
  background: transparent;
  box-shadow:
    0 10px 25px rgba(17, 24, 39, 0.08),   /* ombre discrète */
    0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

/* Effet glossy (bandes + reflet) */
.module-fixe::before {
  content: "";
  position: absolute;
  inset: -2px; /* légèrement plus grand pour éviter les bords visibles */
  background: transparent;
  opacity: .45;
  pointer-events: none;
  transition: opacity .25s ease;
}

/* Overlay qui "remplit" en blanc au survol */
.module-fixe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff;
  transform: translateY(100%);   /* caché au départ */
  transition: transform .35s ease;
  pointer-events: none;
  z-index: 0;
}

/* Survol spécifique module-fixe */
.module-fixe:hover {
  box-shadow:
    0 14px 35px rgba(209, 0, 52, 0.16), /* ombre plus "contrastée" */
    0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

.module-fixe:hover::after {
  transform: translateY(0);       /* remplissage blanc */
}

.module-fixe:hover::before {
  opacity: .65;                   /* glossy plus présent au survol */
}

.module-fixe a {
  display: block;
}


/* =================================== MODULE LIVE POST ===== */
.module-fixeS {
  z-index: 999;
  border:none;
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background: transparent;
  overflow: visible;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Fond blanc en arrière-plan */
.module-fixeS::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1 * clamp(0rem, 6vw, 10rem));
  right: -10rem;  /* Extension de 10rem vers la droite */
  bottom: 0;
  background: transparent;
  border: 1px solid rgba(96, 115, 159);
  z-index: -2;
  pointer-events: none;
  transition:
    border-color .25s ease,
    background .25s ease,
    left .25s ease,
    right .25s ease;  /* Animation de la droite au besoin */
}

/* Gloss permanent */

.module-fixeS::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1 * clamp(0rem, 6vw, 10rem));
  right: calc(-1 * clamp(0rem, 6vw, 10rem));
  height: 45%; 
  z-index: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}

/* Survol spécifique module-fixeS */
.module-fixeS:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.09);
}

.module-fixeS:hover::before {
  border-color: #d10034;
  background: rgba(0, 0, 0, 0.8);
}

.module-fixeS:hover::after {
  opacity: .2;
}


/* Responsive module-fixeS */
@media (max-width: 768px) {
  .module-fixeS {
    padding: 0.75rem;
  }

 /* .module-fixeS::before,*/
  .module-fixeS::after {
    left: 0; right:0;
  }
}

@media (max-width: 480px) {
  .module-fixeS {
    padding: 0.5rem;
    border-width: 1px;
  }

  .module-fixeS::before {
    border-width: 1px;
  }
}


/* ====================== MODULE SOUTIEN FOOTER ===== */
.module-fixeF {
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  background: transparent;
    border: 2px solid rgba(96, 115, 159, 0.1);
  /* overflow: hidden; */
}

/* Effet glossy / nuage */
.module-fixeF::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.5) 0 18%, transparent 19%),
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.35) 0 14%, transparent 15%),
    radial-gradient(circle at 40% 55%, rgba(255, 255, 255, 0.25) 0 20%, transparent 21%),
    linear-gradient(125deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.18) 25%,
      rgba(255, 255, 255, 0.60) 35%,
      rgba(255, 255, 255, 0.28) 50%);

  opacity: .8;
  pointer-events: none;
  transition: opacity .9s ease;
  filter: blur(1px);
}

/* Overlay transparent (pas de remplissage) */
.module-fixeF::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  transform: translateY(100%);
  transition: transform .35s ease;
  pointer-events: none;
  z-index: 0;
}

/* Survol spécifique module-fixeF */
.module-fixeF:hover::after {
  transform: translateY(0);
}

.module-fixeF:hover::before {
  opacity: .35;
}

.module-fixeF a {
  /* display: block; */
}
.scroll-button[data-astro-cid-p774adf7] {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
}

.scroll-button[data-astro-cid-p774adf7].visible {
  opacity: 1;
  visibility: visible;
}

.scroll-button[data-astro-cid-p774adf7] button[data-astro-cid-p774adf7] {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: none;
  background: #7887ab;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px #00000026;
  transition: background .2s;
}

.scroll-button[data-astro-cid-p774adf7] button[data-astro-cid-p774adf7]:hover {
  background: #6ec1e491;
}

.scroll-button[data-astro-cid-p774adf7] svg[data-astro-cid-p774adf7] {
  width: 1.5rem;
  height: 1.5rem;
}