/* Large Desktop
==================================================================================================== */
@media (min-width: 1280px) {
	.rangee {
		width: 95%;
		max-width: 1380px;
	}
	.section-col .banniere .rangee {
		width: calc(95% - 60px);
		max-width: calc(1380px - 60px);
	}
}

/*  Très Large Desktop
==================================================================================================== */
@media (min-width: 1480px) {

}

/*  #Mobile et tablette portrait
==================================================================================================== */

/* Étapes horizontales : cartes empilées, flèche tournée vers le bas
   entre deux cartes. */
@media (max-width: 767px) {
	.widget-etapes--h .liste-etapes {
		display: block;
	}
	.widget-etapes--h .etape {
		margin: 0 0 50px;
	}
	.widget-etapes--h .etape:last-child {
		margin-bottom: 0;
	}
	.widget-etapes--h .etape:not(:last-child)::after {
		top: auto;
		right: auto;
		bottom: -37px;
		left: 50%;
		transform: translateX(-50%) rotate(90deg);
	}
}

/* Navigation de parcours : empilée sur mobile, « suivante » alignée à droite. */
@media (max-width: 767px) {
	.nav-parcours {
		flex-direction: column;
		align-items: stretch;
		gap: 30px;
	}
	.nav-parcours__lien--suiv {
		align-self: flex-end;
	}
}

/* Fiches écoles + widgets Focus/Réassurance : empilements mobiles. */
@media (max-width: 1025px) {
	.widget-reassurance,
	.widget-reassurance--2x2 {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.widget-focus-bouton {
		flex-direction: column;
		align-items: flex-start;
		gap: 25px;
		padding: 30px;
	}
	/* Logo école : dans le flux, au-dessus du bloc titre (en desktop il
	   est posé en absolu en bas à droite du hero). La marge gauche suit
	   le padding des colonnes (.ecart-normal mobile : 20px).
	   align-content : les lignes flex (logo puis colonne titre) se
	   groupent en bas de la rangée pleine hauteur — sans ça, elles se
	   répartissent sur les 100svh et le logo remonte tout en haut. */
	#bloc-titre-page.titre-hero .rangee {
		align-content: flex-end;
	}
	#bloc-titre-page .hero-logo-ecole {
		position: static;
		flex: 0 0 100%;
		padding: 0 20px;
		margin: 0 0 10px;
	}
	#bloc-titre-page .hero-logo-ecole img {
		height: 70px;
		width: auto;
	}
}

/* Stepper du parcours : en colonne sur mobile (5 étapes ne tiennent pas
   en ligne) — pastille + libellé côte à côte, ligne verticale. */
@media (max-width: 767px) {
	.parcours-etapes ol {
		display: block;
		margin-top: 40px;
	}
	.parcours-etapes ol::before {
		display: none;       /* la ligne horizontale n'a pas de sens empilée */
	}
	.parcours-etapes li {
		position: relative;
		text-align: left;
	}
	/* Segment vertical entre les pastilles (centre à 25px pour 50px). */
	.parcours-etapes li + li::before {
		content: "";
		position: absolute;
		top: -18px;
		left: 24px;
		width: 2px;
		height: 24px;
		background: var(--color-primary);
	}
	.parcours-etape__lien {
		flex-direction: row;
		max-width: none;
		gap: 16px;
		padding: 6px 0;
	}
}

@media (max-width: 1025px) {

	header#header nav, .no-mobile{
		display: none !important;
	}
	header#header {
	    position: fixed;
	   width: 100%;
	   margin: 0;
	   border-radius: 0;
	   height: 85px;
	   padding: 0 25px;
	}
	body #main{
		padding-top: 85px;
	}
	/* Hero : mêmes calculs avec le header mobile (85px). */
	#bloc-titre-page.titre-hero .rangee {
		min-height: calc(100vh - 85px);
		min-height: calc(100svh - 85px);
	}
	#bloc-titre-page.titre-hero--avec-fil .rangee {
		min-height: calc(100vh - 85px - 50px);
		min-height: calc(100svh - 85px - 50px);
	}
	/* Overlay des heros / titres image : en portrait le texte occupe toute
	   la largeur — le dégradé gauche→droite laisse les fins de lignes sur
	   la zone claire. On passe en bas→haut : texte sur bleu dense, photo
	   visible en haut. */
	#bloc-titre-page .overlay-titre.gradient-hero,
	#bloc-titre-page .overlay-titre.gradient-titre {
		background: linear-gradient(0deg, rgba(55, 60, 245, 0.92) 45%, rgba(55, 60, 245, 0.25) 100%);
	}
	#logo a img {
		height: 52px;
	}
	.menu-toggle {
		display: inline-flex;
	}
	/* GRILLE
	-------------------------------------------------------------- */

	.ecart-normal{
		flex: 0 0 auto;
		padding: 15px 20px;
	}
	.section-col .banniere .rangee {
		width: calc(100% - 40px)!important;
		max-width: 100%!important;
	}
	.section-col .banniere .rangee {
		padding: 20px;
	}
	.fullwidth, .full {
		width: 100%!important;
		max-width: 100%!important;
	}
	.section-logos .col15 {
		flex-basis:33.3%;
		width: 33.3%;
	}
	.banniere .col50 {
		flex-basis:100% ;
		width: 100%;
	}
	.border-left, .border-col {
		border-left:0px ;
	}
	/* Tous les décalages verticaux de colonnes sont annulés en empilé —
	   le !important répond au margin-bottom !important des classes. */
	.decalage140, .decalage70, .decalage50, .decalage30, .decalage15, .decalage {
		top: 0;
		margin-bottom: 0 !important;
	}
	.reverse-mobile .rangee, .reverse-mobile {
		flex-direction: column-reverse;
	}
	/* Colonnes empilées : on annule seulement le padding ajouté par
	   l'option (50px du côté concerné) — pas les gouttières de base
	   de .ecart-normal (15px 20px), sinon le texte colle au bord. */
	.section-col .col-padding-right {
		padding-right: 20px;
	}
	.section-col .col-padding-left {
		padding-left: 20px;
	}
	.aucun-ecart{
		padding: 0px!important;
	}
	.padding-col-pres.border-left {
	  padding-left: 0px;
	}
	footer#footer,  #credits p {
		text-align: left;
	}
	footer#footer .ecart-normal{
		padding: 0px 25px;
	}
	/* Blocs du footer empilés : écart UNIFORME. Sans ça, l'espacement
	   dépendait de la colonne d'origine (30px à l'intérieur d'une colonne,
	   0 à la frontière entre deux colonnes sans padding vertical). */
	footer#footer .footer-bloc {
		margin: 0 0 45px;
	}
	footer#footer .footer-bloc + .footer-bloc {
		margin-top: 0;
	}
	#credits p a {
		display: block;
		margin-right: 0px;
	}
	.text-right {
		text-align: inherit;
	}
	/* Icônes réseaux : retour à gauche en colonnes empilées. */
	.text-right .widget-reseaux .liste-reseaux {
		justify-content: flex-start;
	}
	/* Story alumni : médaillon réduit. */
	.single-alumni__photo {
		width: 120px;
		height: 120px;
	}
	footer#footer #credits p a {
		display: block;
		margin: 0px 0;
	}
	/* Liens du pied de page empilés, un par ligne, alignés à gauche. */
	#credits li {
		display: block;
		margin: 0 0 12px;
	}
	#credits li:last-of-type {
		margin-bottom: 0;
	}
	/* Logo CCI : de l'air au-dessus quand il passe sous les liens. */
	#credits .logo-credits-lien {
		margin-top: 30px;
	}
	/* « Site par La Confiserie » : à la ligne sous les liens, aligné à
	   gauche comme eux, dégagé du bouton retour en haut. */
	#credits .col30 {
		margin-top: 15px;
		padding-right: 80px;
	}
	#credits .text-right {
		text-align: left;
	}
	.widget-carousel .swiper-button-prev,
	.widget-carousel .swiper-button-next {
		background-size: 16px auto;
		width: 40px;
		height: 40px;
	}
	.widget-carousel .swiper-button-prev { left: 10px; }
	.widget-carousel .swiper-button-next { right: 10px; }

}

/* #Mobile
==================================================================================================== */

@media (max-width: 767px) {

	/* .padding / .padding-top / .padding-bottom : désormais fluides
	   via clamp() dans style.css, plus d'override mobile nécessaire. */
	.col3, .col5, .col15, .col10, .col20, .col30, .col40, .col48, .col50, .col60, .col70, .col80, .col85, .col90, .col25,.col33, .col45, .col55, .col57, .col75, .col65,.col66,.col35, section .col50.deux-tiers:first-of-type,section .col50.un-tiers:last-of-type,section .col50.deux-tiers:last-of-type, section .col50.un-tiers:first-of-type {
		flex-basis:100% ;
		width: 100%;
	}
	.section-reassurance .banniere::before {
		content: "";
		position: absolute;
		inset: -20px;
		border-radius: 20px;
		z-index: -1;
	}
	.decalage,.decalage15, .decalage70,.decalage100, .section-col.banniere .rangee.decalage-image .widget-image {
		top: inherit;
		margin-bottom: inherit;
	}
	.section-col .border-col .ecart-normal {
	  border-left: 0px;
	}
	#titre-simple,
	#titre-simple.titre-parcours,
	#titre-simple.titre-bandeau {
		padding: 40px 0 40px 0;
	}
	#bloc-titre-page .rangee {
		min-height: 350px;
		padding: 100px 0;
		z-index: 9;
		text-align: left;
	}
	.only-mobile {
		display: block !important;
	}
	footer#footer .bouton {
		margin-bottom: 30px;
	}
	#backtotop {
	  bottom: 20px;
	}
	/* Agenda : la ligne s'empile (date / titre / lieu), avec de l'air
	   entre les trois groupes ; le label « Lieu » devient redondant
	   (le marqueur suffit) et saute. */
	.ligne-agenda {
		grid-template-columns: 1fr;
		gap: 16px;
		align-items: start;
	}
	.ligne-agenda__lieu-label {
		display: none;
	}
	/* L'icône « ajouter à mon agenda » se cale à droite de la ligne date,
	   et son menu se déplie vers la gauche pour rester dans l'écran. */
	.ligne-agenda__date {
		position: relative;
		padding-right: 44px;
	}
	.ligne-agenda .ajout-agenda {
		position: absolute;
		top: 0;
		right: 0;
		margin-top: 0;
	}
	.ligne-agenda .ajout-agenda__menu {
		left: auto;
		right: 0;
	}

}