/* ====== a ranger ==== */

/* ====== VARIABLES GLOBALES ====== */
:root {
	--accent: #ff6900; /*orange*/
	--accent-dark: #d10034; /*rouge*/
	--black: 15, 18, 25;/*noir*/
	--gray: 96, 115, 159;/*gris bleue*/
	--gray-light: 229, 233, 240;
	--gray-dark: 34, 41, 57;
	--red-primary: #d10034;
	--gray-gradient: rgba(var(--gray-light), 50%), #fff;
	--box-shadow:
		0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
		0 16px 32px rgba(var(--gray), 33%);
}

/* ====== RÉINITIALISATION GLOBALE ====== */
* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	overflow-x: hidden;
}

/* ===== STRUCTURE ===== */
.hero-image {
		width: 100%;
		}

.hero-image img {
		display: block;
		margin: 0 auto;
		border-radius: 10px 0px 14px 0;
		box-shadow: var(--box-shadow);
		}

.prose {
		width: 1024px;
		max-width: calc(100% - 2rem);
		margin: auto;
		padding: 1rem 1.3rem 5rem 1.3rem;
		color: rgb(var(--gray-dark));
		}


footer{
		margin-top: clamp(1rem, 4vw, 5rem);
		}

article{
		position: relative;
		}

/* border-right qui déborde vers le bas */
article::before{
  content: "";
  position: absolute;
  top: 0;                 /* toute la hauteur du conteneur */
  bottom: -5rem;         /* déborde en bas de 2rem */
  right: 0;               /* sur le bord droit */
  width: 1px;
  background: #fff;       /* couleur du “border-right” */
  pointer-events: none;
}

/* border-bottom qui déborde à droite */
article::after{
  content: "";
  position: absolute;
  right: -2rem;
  bottom: 0;              /* sur le bord bas */
  height: 1px;
  width: calc(40% + 2rem); /* déborde à droite de 2rem */
  background: #fff;       /* couleur du “border-bottom” */
  pointer-events: none;
}
/* assure-toi que le conteneur est bien positionné */
article .prose{
  position: relative;
}

/* "border-top" : 2rem débord à gauche, puis 5rem vers la droite (donc longueur totale) */
article .prose::before{
  content: "";
  position: absolute;
  top: 0;
  left: -2rem;
  width: calc(2rem + 20rem);
  height: 2px;          /* épaisseur du trait */
  background: #fff;    /* couleur du trait */
  pointer-events: none;
}

/* "border-left" : 2rem débord vers le haut, puis 5rem vers le bas (longueur totale) */
article .prose::after{
  content: "";
  position: absolute;
  left: 0;
  top: -5rem;
  width: 2px;
  height: calc(5rem + 50rem);
  background: #fff;
  pointer-events: none;
}


/* ====== TYPOGRAPHIE DE BASE ====== */
body {
  font-family: var(--font-atkinson);
  text-align: left;
  background: #dddddd;
/*  background: linear-gradient(var(--gray-gradient)) no-repeat;*/
/*  background-size: 100% 600px;*/
  word-break: break-word;
  overflow-wrap: break-word;
  color: rgb(var(--gray-dark));
  font-size: clamp(0.8rem, 1.5vw, 1rem);
  line-height: 1.7;
}

main {
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	padding: 3em 1em;
	box-sizing: border-box;
}
.title {
	margin-bottom: 1em;
	padding: 1em 0;
	text-align: center;
	line-height: 1;
	}


.title h1 {
	margin: 0 0 0.5em 0;
}
.date {
	margin-bottom: 0.5em;
	color: rgb(var(--gray));
}
.last-updated-on {
	font-style: italic;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5rem 0;
	color: rgb(var(--black));
	line-height: 1.2;
	word-break: break-word;
	overflow-wrap: break-word;
}

h1 {
  font-size: clamp(2.2rem, 5vw, 3.052rem);
  text-transform: uppercase;
}

h2 {
  font-size: clamp(1.9rem, 4.2vw, 2.441rem);
  color: var(--red-primary);
}

h3 {
  font-size: clamp(1.6rem, 3.6vw, 1.953rem);
}

h4 {
  font-size: clamp(1.35rem, 3vw, 1.563rem);
  text-transform: uppercase;
}

h5 {
  font-size: clamp(1.1rem, 2.4vw, 1.25rem);
}

p {
	margin: 0 0 1em 0;
	line-height: 1.4;
}

.prose p {
	margin-bottom: 1.5rem;
}

strong,
b {
	font-weight: 700;
}

a {
	color: rgb(var(--gray-dark));
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--accent-dark);
}

a.active {
	text-decoration: none;
}
article a, main a {
  color:var(--accent); text-transform: none;
}

/* ====== ÉLÉMENTS DE FORMULAIRE ====== */
textarea,
input {
	font-size: 16px;
}

textarea {
	width: 100%;
}

/* ====== CONTENU MÉDIA ====== */
img {
	display: block;
	max-width: 100%;
	height: auto;
	/*border-radius: 8px;*/
}
ul > li:has(img) {
  list-style: none;
}

/* ====== CODE ====== */
code {
	padding: 2px 5px;
	background-color: rgb(var(--gray-light));
	border-radius: 2px;
}

pre {
	padding: 1.5em;
	border-radius: 8px;
}

pre > code {
	all: unset;
}

/* ====== ÉLÉMENTS SPÉCIALISÉS ====== */
table {
	width: 100%;
}

blockquote {
	border-left: 4px solid var(--accent);
	padding: 0 0 0 20px;
	margin: 0;
	font-size: 1.333em;
}

hr {
	border: none;
	border-top: 1px solid rgb(var(--gray-light));
}

ul,
ol {
	list-style: disc;
	list-style-position: inside;	
	margin: 0;
	padding: 0;
}

/* ====== ANIMATIONS ====== */
@keyframes cursorBlink{
  0%, 49%   { border-left-color: var(--red-primary); }
  50%, 100% { border-left-color: transparent; }
}
@keyframes fadeInOutColor {
	0% {
		color: var(--red-primary);
	}
	50% {
		color: #000;
	}
	100% {
		color: var(--red-primary);
	}
}

@keyframes fadeInOutOpacity {
	0% {
		opacity: 0.9;
		color: inherit;
	}
	25% {
		opacity: 1;
	}
	50% {
		color: var(--red-primary);
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0.9;
		color: inherit;
	}
}

.dark-text {
	animation: fadeInOutColor 31s ease-in infinite;
}

.red-text {
	animation: fadeInOutOpacity 23s ease-in-out infinite;
	padding-left: 0.5rem;
}
/* ===== tags ===== */

	.tags {
				display: flex;
				flex-wrap: wrap;
				gap: 0.6rem;
				justify-content: center;
				list-style: none;
				padding: 0;
				margin: 1rem 0 0;
			}
			.tags li {
				margin: 0;
			}
			.tags a {
				display: inline-block;
				padding: 0.5rem 0.75rem;
				border-radius: 0.55rem;
				background: #f2f2f2;
				color: #333;
				text-decoration: none;
				transition: background-color 0.2s ease, color 0.2s ease;
			}
			.tags a:hover {
				background: #333;
				color: #fff;
			}
/*== feed ==*/
.feed-group {
	--a: var(--color-signal);
	border-bottom: 1px solid var(--color-line);
	border-radius: 8px;
	grid-template-columns: auto 2px 1fr auto;
	align-items: start;
	column-gap: 1rem;
	padding: 1.45rem .85rem 1.45rem .25rem;
	transition: background .16s;
	display: grid;
}

/* ====== ACCESSIBILITÉ ====== */
.sr-only {
	border: 0;
	padding: 0;
	margin: 0;
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}
/* réduire animations si sensibles */
@media (prefers-reduced-motion: reduce){
  .text-alert{ animation: none; }
}

/* ====== DARK MODE ====== */
@media (prefers-color-scheme: dark) {
	img {
		background-color: rgba(100, 100, 100, 0.1);
	}
}

/* ====== RESPONSIVE DESIGN ====== */
@media (max-width: 960px) {
body {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    line-height: 1.6;
  }

  main {
    padding: clamp(0.1rem, 2vw, 1rem);
  }

  h1 {
    font-size: clamp(1.8rem, 5vw, 2.4rem);
  }

  h2 {
    font-size: clamp(1.5rem, 4vw, 1.8rem);
  }

  h3 {
    font-size: clamp(1.3rem, 3.2vw, 1.5rem);
  }

  h4{
    font-size: clamp(1.2rem, 2.5vw, 1.2rem);
  }
  h5 {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
  }
}


@media (min-width: 960px) {
	main {
		padding: 2.5rem;
	}
}
@media (min-width: 720px) and (max-width: 959px) {
	main {
		padding: 2rem;
	}
}

/* ============================= CLASSES PERSONNALISÉES ====== */
/* ========== MOBILE FIRST (par défaut) ========== */

/* Image centrée */
.center-img {
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: 100%;
}

/* Espacements */
  .vide1 {min-height: 3vw;}
  .vide2 {min-height: 5vw;}

/* Textes génériques */
.text {
  font-size: 0.8rem;
  text-align: justify;
  word-spacing: 0.1em;
  hyphens: auto;
  text-align-last: left;
}
.text-normal {
  font-size: 0.9rem;
  font-weight: bold;
}

.text-grand,
.text-geant, .text-normal {
  text-align: justify;
  word-spacing: 0.1em;
  hyphens: auto;
  text-align-last: left;
}

/* Texte grand */
.text-grand {
  font-size: 1rem;
  font-weight: bolder;
  text-transform: uppercase;
  letter-spacing: 0.12rem;
  margin: 1rem 0;
}

/* Texte géant avec bordure gauche */
.text-geant {
  font-size: 1.3rem;
  font-weight: bolder;
  text-transform: uppercase;
  border-left: 2rem solid var(--red-primary);
  padding-left: clamp(0.7rem, 2vw, 1rem);
  margin: 1.2rem 0;
}

/* Large letter-spacing */
.large {
  letter-spacing: 0.15rem;
}

/* Bordure gauche */
.border-L {
  border-left: 1.2rem solid var(--red-primary);
  padding-left: 0.8rem;
  font-size: 1.1rem;
  font-weight: 600;
}

/* Alerte avec animation */
.text-alert {
  font-size: 0.9rem;
  border-left: 0.4rem solid var(--red-primary);
  padding-left: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0.75rem 0;
  position: relative;
  animation: cursorBlink 0.95s steps(2, end) infinite;
}

/* Gradient radial */
.gradiant-r {
  color: #d10034;
  background: radial-gradient(
    circle at center,
    rgba(15, 18, 25, 1) 0%,
    #d10034 55%,
    #ff8a00 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Style de base pour le lien externe */
.externe {
    text-decoration: none;
    color: #0066cc; /* Couleur bleue standard, à adapter à ta charte */
    position: relative;
    transition: color 0.2s ease-in-out;
}

/* Ajout de l'icône après le texte */
.externe::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    vertical-align: middle;
    
    /* Icône SVG de flèche sortante (standard pour lien externe) */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    
    /* L'icône hérite de la couleur du texte */
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out;
}

/* Effet Hover sobre */
.externe:hover {
    color: #004499; /* Bleu légèrement plus foncé */
    text-decoration: underline;
}

.externe:hover::after {
    opacity: 1; /* L'icône devient pleinement visible au survol */
}

/* ========== TABLETTE (768px et plus) ========== */
@media (min-width: 768px) {
  .vide1 {min-height: 3vw;}
  .vide2 {min-height: 5vw;}

  .text {
    font-size: 0.8rem;
  }
  .text-normal {
    font-size: clamp(1rem, 2vw, 1.1rem);
  }
  .text-grand {
    font-size: clamp(1.1rem, 3vw, 1.3rem);
    margin: clamp(1.1rem, 2.5vw, 1.8rem) 0;
  }

  .text-geant {
    font-size: clamp(1.5rem, 3.5vw, 1.8rem);
    border-left: 2.5rem solid var(--red-primary);
    padding-left: clamp(0.7rem, 2vw, 0.9rem);
    margin: clamp(1.3rem, 2.5vw, 2rem) 0;
  }

  .border-L {
    border-left: 1.8rem solid var(--red-primary);
    padding-left: 1rem;
    font-size: clamp(1.2rem, 3vw, 1.4rem);
  }

  .text-alert {
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
    border-left: clamp(0.5rem, 1vw, 1rem) solid var(--red-primary);
    padding-left: clamp(0.7rem, 1.5vw, 0.8rem);
    margin: clamp(0.9rem, 2vw, 1.2rem) 0;
  }
}


/* ========== DESKTOP (1120px et plus) ========== */
@media (min-width: 1120px) {
  .vide1 {min-height: 3vw;}
  .vide2 {min-height: 5vw;}

  .text {
    font-size: 0.85rem;
  }
  .text-normal {
    font-size: clamp(1rem, 3vw, 1.1rem);
  }
  .text-grand {
    font-size: clamp(1.1rem, 4.2vw, 1.3rem);
    margin: clamp(1.3rem, 3vw, 2rem) 0;
  }

  .text-geant {
    font-size: clamp(1.5rem, 4.5vw, 1.8rem);
    border-left: 3rem solid var(--red-primary);
    padding-left: clamp(0.7rem, 2vw, 0.8rem);
    margin: clamp(1.5rem, 3vw, 2.5rem) 0;
  }

  .border-L {
    border-left: 2rem solid var(--red-primary);
    padding-left: 1.2rem;
    font-size: clamp(1.3rem, 4.2vw, 1.6rem);
  }

  .text-alert {
    font-size: clamp(1rem, 4.2vw, 1.2rem);
    border-left: clamp(0.35rem, 1.2vw, 1.5rem) solid var(--red-primary);
    padding-left: clamp(0.6rem, 2vw, 1rem);
    margin: clamp(0.75rem, 3vw, 1.5rem) 0;
  }
}