/**
 * sections.css — Styles de chaque section de la page one-page.
 *
 * Ordre : Hero → Présentation → Concours → Lauréats → Proximité → Footer
 *
 * @package lafetecontinue-allianz
 */

/* ==========================================================================
   SECTION HERO
   ========================================================================== */

.section-hero {
	width:               100%;
	height:              100dvh;  
	min-height:          600px;   
	display:             flex;
	align-items:         flex-start;
	justify-content:     center;
	padding:             var(--spacing-section-y-sm) var(--spacing-section-x);
	background-size:     cover;
	background-position: center;
	background-repeat:   no-repeat;
	padding-top: 300px;
}

/* Contenu textuel, au-dessus de l'image de fond */
.section-hero__content {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
	gap:            1.5rem;
	max-width:      1283px;
}

.section-hero__subtitle {
	font-family: var(--font-family-base);
	font-size:   var(--font-size-h2);
	font-weight: var(--font-weight-regular);
	color:       var(--color-yellow);
	line-height: 1.2;
}

.section-hero__title {
	color:       var(--color-white);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.section-hero__cta {
	margin-top: 0.5rem;
}

/* ==========================================================================
   SECTION PRÉSENTATION
   ========================================================================== */

.section-presentation {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   10rem; /* 160px */
	align-items:           center;
	padding:               var(--spacing-section-y-lg) var(--spacing-section-x);
}

.section-presentation__title {
	color:         var(--color-blue-dark);
	margin-bottom: var(--spacing-lg);
}

.section-presentation__body {
	color:         var(--color-blue-dark);
	margin-bottom: var(--spacing-lg);
}

/* Image droite — plein hauteur, border-radius */
.section-presentation__image {
	height:   100%;
	min-height: 500px;
}

.section-presentation__img {
	width:         100%;
	height:        100%;
	object-fit:    cover;
	border-radius: var(--btn-radius);
}

/* Items statiques — 3 blocs avec alternance de couleur */
.presentation-items {
	display:        flex;
	flex-direction: column;
	width:          100%;
}

.presentation-items__item {
	padding:     2.25rem;  /* 36px */
	font-family: var(--font-family-base);
	font-size:   1.125rem; /* 18px — SemiBold dans la maquette */
	font-weight: var(--font-weight-bold);
	color:       var(--color-blue-dark);
	text-align:  left;
	line-height: var(--line-height-body);
}

.presentation-items__item--pale {
	background-color: rgba(223, 239, 242, 0.5); /* #DFEFF2 à 50% */
}

.presentation-items__item--white {
	background-color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   SECTION CONCOURS
   ========================================================================== */

.section-concours {
	background-color: var(--color-blue-dark);
	padding:          var(--spacing-section-y-lg) var(--spacing-section-x);
	display:          flex;
	flex-direction:   column;
	gap:              2.25rem; /* 36px */
}

/* En-tête : titre centré + boutons */
.section-concours__header {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	gap:             2rem;
}

.section-concours__title {
	color:       var(--color-white);
	text-align:  center;
}

.section-concours__ctas {
	display:     flex;
	align-items: center;
	gap:         2rem;
	flex-wrap:   wrap;
	justify-content: center;
}

/* Grille des cartes + flèches entre */
.section-concours__cards {
	display:     flex;
	align-items: stretch;
	gap:         0; /* Pas de gap — les flèches occupent l'espace */
}

/* Carte individuelle */
.concours-card {
	flex:           1;
	display:        flex;
	flex-direction: column;
	gap:            var(--spacing-2xl); /* 61px */
	background:     var(--color-blue-primary);
	border:         1px solid var(--color-blue-dark);
	border-radius:  var(--btn-radius);
	padding:        var(--spacing-2xl);
}

.concours-card__icon img {
	width:  61px;
	height: 61px;
	object-fit: contain;
}

.concours-card__title {
	color:       var(--color-white);
	font-size:   var(--font-size-h3);
	font-weight: var(--font-weight-bold);
	margin-bottom: 0.625rem;
}

.concours-card__desc {
	color:     var(--color-white);
	font-size: var(--font-size-body);
}

/* Flèche entre les cartes */
.concours-arrow {
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      var(--color-white);
	border-radius:   50%;
	width:           42px;
	height:          42px;
	flex-shrink:     0;
	align-self:      center;
	margin:          0 -21px; /* Chevauchement sur les cartes */
	z-index:         1;
}

.concours-arrow svg path {
	stroke: var(--color-blue-dark);
}

/* ==========================================================================
   SECTION LAURÉATS
   ========================================================================== */

.section-laureats {
	padding: var(--spacing-section-y-lg) var(--spacing-section-x);
	display: flex;
	flex-direction: column;
	gap:     3.8125rem; /* 61px */
}

/* Intro */
.section-laureats__intro {
	padding:  0 10rem; /* Alignement centré selon maquette */
	display:  flex;
	flex-direction: column;
	gap:      1.5rem;
}

.section-laureats__title {
	color:     var(--color-blue-dark);
	max-width: 789px;
}

.section-laureats__intro-body {
	color:     var(--color-blue-dark);
	max-width: 789px;
}

/* 2 blocs côte à côte */
.section-laureats__blocs {
	display:        flex;
	flex-direction: column;
	gap:            2rem;
}

/* Bloc individuel : fond bleu foncé, texte gauche + image droite */
.laureats-bloc {
	display:    flex;
	background: var(--color-blue-dark);
	overflow:   hidden;
}

.laureats-bloc__content {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	gap:             2rem;
	padding:         var(--spacing-xl); /* 46px */
	width:           541px;
	flex-shrink:     0;
	box-sizing:      border-box;
	overflow-wrap:   break-word;
}

.laureats-bloc__title {
	font-size:   var(--font-size-h2);
	font-weight: var(--font-weight-bold);
	color:       var(--color-white);
	line-height: 1.2;
}

.laureats-bloc__body {
	color: var(--color-white);
}

/* Surcharges spécifiques pour le wysiwyg des blocs lauréats */
.laureats-bloc__body .wysiwyg-content p,
.laureats-bloc__body p {
	color:     var(--color-white);
	font-size: var(--font-size-body);
}

/* Zone image */
.laureats-bloc__image {
	flex: 1;
	min-height: 300px;
}

.laureats-bloc__image img {
	width:      100%;
	height:     100%;
	object-fit: cover;
}

/* ==========================================================================
   SECTION PROXIMITÉ
   ========================================================================== */

.section-proximite {
	padding:        var(--spacing-section-y-lg) var(--spacing-section-x);
	display:        flex;
	flex-direction: column;
	gap:            2rem;
}

.section-proximite__header {
	padding: 0; /* Le titre est dans la même section padding */
}

.section-proximite__title {
	color:     var(--color-blue-dark);
	max-width: 789px;
}

/* Colonnes */
.section-proximite__cols {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	align-items:           stretch;
}

/* Colonne gauche : fond sable */
.section-proximite__text {
	background:      var(--color-sand);
	padding:         var(--spacing-xl);  /* 46px */
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	gap:             2rem;
	box-sizing:      border-box; /* Padding inclus dans la largeur */
	min-width:       0;          /* Empêche le débordement en grid/flex */
	overflow-wrap:   break-word; /* Coupe les mots trop longs */
}

.section-proximite__text .wysiwyg-content {
	color: var(--color-blue-dark);
}

.section-proximite__cta {
	align-self: flex-start;
}

/* Colonne droite : image */
.section-proximite__image {
	min-height: 500px;
	min-width:  0;       /* Empêche le débordement en grid */
	overflow:   hidden;
}

.section-proximite__image img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
	background-color: var(--color-blue-dark);
	padding:          var(--spacing-section-y-sm) var(--spacing-section-x);
}

.footer__inner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
}

.footer-nav {
	display:     flex;
	align-items: center;
	gap:         1.25rem;
	flex-wrap:   wrap;
}

.footer-nav__link {
	font-family:     var(--font-family-base);
	font-size:       var(--font-size-nav);
	font-weight:     var(--font-weight-regular);
	color:           var(--color-white);
	text-decoration: none;
	transition:      opacity var(--transition-base);
}

.footer-nav__link:hover {
	opacity:     0.75;
	text-decoration: underline;
}

/* ==========================================================================
   RESPONSIVE — Laptop large (≤1140px)
   ========================================================================== */

@media (max-width: 1140px) {

	/* Présentation : réduit le gap horizontal */
	.section-presentation {
		gap: 5rem;
	}

	/* Lauréats intro : réduit le padding latéral */
	.section-laureats__intro {
		padding: 0 5rem;
	}

	/* Contenu lauréat : largeur fixe réduite */
	.laureats-bloc__content {
		width: 420px;
	}
}

/* ==========================================================================
   RESPONSIVE — Tablette (≤1024px)
   ========================================================================== */

@media (max-width: 1024px) {

	/* Hero */
	.section-hero {
		padding-left:  2rem;
		padding-right: 2rem;
		min-height:    600px;
	}

	/* Présentation : passe en colonne */
	.section-presentation {
		grid-template-columns: 1fr;
		gap:                   3rem;
		padding:               5rem 2rem;
	}

	.section-presentation__image {
		min-height: 380px;
	}

	/* Concours */
	.section-concours {
		padding: 5rem 2rem;
	}

	.section-concours__cards {
		flex-direction: column;
		gap:            1.5rem;
	}

	.concours-arrow {
		transform: rotate(90deg);
		margin:    -21px auto;
	}

	/* Lauréats */
	.section-laureats {
		padding: 5rem 2rem;
	}

	.section-laureats__intro {
		padding: 0;
	}

	.laureats-bloc {
		flex-direction: column;
	}

	.laureats-bloc__content {
		width: 100%;
	}

	.laureats-bloc__image {
		min-height: 280px;
	}

	/* Proximité */
	.section-proximite {
		padding: 5rem 2rem;
	}

	.section-proximite__cols {
		grid-template-columns: 1fr;
	}

	.section-proximite__image {
		min-height: 350px;
	}

	/* Footer */
	.site-footer {
		padding-left:  2rem;
		padding-right: 2rem;
	}

	.footer__inner {
		flex-wrap: wrap;
		gap:       1.5rem;
	}
}

/* ==========================================================================
   RESPONSIVE — Tablette étroite / Mobile paysage (≤768px)
   ========================================================================== */

@media (max-width: 768px) {

	/* Hero */
	.section-hero {
		min-height: 500px;
		padding:    5rem 1.5rem 3rem;
	}

	.section-hero__title {
		font-size: 3.5rem;
	}

	.section-hero__subtitle {
		font-size: 1.125rem;
	}

	/* Présentation */
	.section-presentation {
		padding: 4rem 1.5rem;
		gap:     2.5rem;
	}

	.section-presentation__image {
		min-height: 300px;
	}

	/* Concours */
	.section-concours {
		padding: 4rem 1.5rem;
		gap:     1.75rem;
	}

	.section-concours__ctas {
		flex-direction: column;
		align-items:    stretch;
	}

	.section-concours__ctas .btn {
		text-align:  center;
		white-space: normal;
	}

	/* Lauréats */
	.section-laureats {
		padding: 4rem 1.5rem;
		gap:     2.5rem;
	}

	.laureats-bloc__content {
		padding: 2rem;
	}

	.laureats-bloc__title {
		font-size: var(--font-size-h3);
	}

	.laureats-bloc__image {
		min-height: 220px;
	}

	/* Proximité */
	.section-proximite {
		padding: 4rem 1.5rem;
	}

	.section-proximite__image {
		min-height: 280px;
	}

	/* Footer */
	.site-footer {
		padding: 3rem 1.5rem;
	}

	.footer__inner {
		flex-direction: column;
		align-items:    flex-start;
		gap:            1.5rem;
	}

	.footer-nav {
		flex-wrap: wrap;
		gap:       0.75rem 1rem;
	}
}

/* ==========================================================================
   RESPONSIVE — Mobile (≤425px)
   ========================================================================== */

@media (max-width: 425px) {

	/* Hero */
	.section-hero {
		min-height:  480px;
		height:      56dvh;
		padding:     4.5rem 1rem 2.5rem;
		padding-top: 125px;
	}

	.section-hero__title {
		font-size: 2.75rem;
	}

	.section-hero__subtitle {
		font-size: 1rem;
	}

	.section-hero__content {
		gap: 1rem;
	}

	/* Présentation */
	.section-presentation {
		padding: 3rem 1rem;
	}

	.presentation-items__item {
		padding:   1.5rem;
		font-size: 1rem;
	}

	/* Concours */
	.section-concours {
		padding: 3rem 1rem;
	}

	.concours-card {
		padding: 1.5rem;
	}

	/* Lauréats */
	.section-laureats {
		padding: 3rem 1rem;
	}

	.laureats-bloc__content {
		padding: 1.5rem;
	}

	/* Proximité */
	.section-proximite {
		padding: 3rem 1rem;
	}

	.section-proximite__text {
		padding: 2rem 1.5rem;
	}

	/* Bouton proximité : wrap + pleine largeur sur mobile */
	.section-proximite__cta.btn {
		white-space: normal;
		text-align:  center;
		width:       100%;
		padding:     var(--btn-padding-y) 1.25rem;
	}

	/* Footer */
	.site-footer {
		padding: 2.5rem 1rem;
	}
}

/* ==========================================================================
   RESPONSIVE — Petit mobile (≤375px)
   ========================================================================== */

@media (max-width: 375px) {

	/* Hero */
	.section-hero {
		padding:    4rem 0.75rem 2rem;
		min-height: 460px;
	}

	.section-hero__title {
		font-size: 2.25rem;
	}

	/* Présentation */
	.section-presentation {
		padding: 2.5rem 0.75rem;
	}

	/* Concours */
	.section-concours {
		padding: 2.5rem 0.75rem;
	}

	/* Lauréats */
	.section-laureats {
		padding: 2.5rem 0.75rem;
	}

	/* Proximité */
	.section-proximite {
		padding: 2.5rem 0.75rem;
	}

	.section-proximite__cta.btn {
		padding: var(--btn-padding-y) 1rem;
	}

	/* Footer */
	.site-footer {
		padding: 2rem 0.75rem;
	}
}