/* =====================================================================
   LES 4 PAGES DE FORMATION (recherche.php) -- Samy 16/10/2026
   Demande : « etendre le contenu sur toute la largeur et ce qui se trouve
   sur la sidebar a droite bascule tout en bas ».
   Toutes les regles portent sur des classes pe-fp-* qui n'existent que
   sur ces quatre pages : aucune autre page du site n'est touchee.
   Retour arriere : retirer le lien vers ce fichier dans recherche.php.
   ===================================================================== */

/* ---- le contenu, pleine largeur ---- */
.pe-fp-contenu{padding:34px 38px 30px;border:1px solid #e4e6ef;border-radius:6px;
	box-shadow:0 1px 4px rgba(16,24,64,.05);line-height:1.7}
.pe-fp-contenu h1{font-size:31px;line-height:1.25;margin:0 0 18px;color:#151c64}
.pe-fp-contenu h2{font-size:22px;line-height:1.3;margin:28px 0 14px}
.pe-fp-contenu p{line-height:1.7;margin:0 0 14px}
.pe-fp-contenu ul{margin-bottom:16px}
.pe-fp-contenu li{line-height:1.6;margin:5px 0}
/* l'illustration du haut occupait 1 000 px dans un cadre devenu plus large : elle
   laissait un vide a droite. Elle suit maintenant la largeur du cadre. */
.pe-fp-contenu img.img-responsive{width:100%;height:auto}

/* ---- les deux rangees de cartes, sous le contenu ---- */
.pe-fp-bas,.pe-fp-reassurance{clear:both;float:none;width:100%;
	display:-webkit-box;display:-ms-flexbox;display:flex;
	-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;
	margin-top:26px}
.pe-fp-bas:after,.pe-fp-reassurance:after{content:"";display:table;clear:both}

.pe-fp-bas .pe-fp-carte,.pe-fp-reassurance .pe-fp-carte{border:1px solid #e4e6ef;border-radius:6px;
	background:#fff;box-shadow:0 1px 4px rgba(16,24,64,.05);padding:24px 26px;margin:0 0 26px;
	font-size:16px;line-height:1.6}
.pe-fp-bas .pe-fp-carte h3,.pe-fp-reassurance .pe-fp-carte h3{margin-top:0}
.pe-fp-bas #exploitation li{border-bottom:1px solid #f1f2f7;line-height:1.5;padding:8px 0;margin:0}
.pe-fp-bas #exploitation li:last-child{border-bottom:0}
.pe-fp-bas #exploitation a{color:#3a3f52;font-size:16px}
.pe-fp-bas #exploitation a:hover{color:#151c64}
.pe-fp-bas #exploitation2 img{max-width:100%;height:auto}

/* les traits gris decoratifs (.separation) n'ont plus de sens dans des cartes */
.pe-fp-bas .pe-fp-carte .separation,.pe-fp-reassurance .pe-fp-carte .separation{display:none}

/* les intitules des cartes : le bleu du site, comme sur les pages de centre */
.pe-fp-bas .pe-fp-carte h3,.pe-fp-reassurance .pe-fp-carte h3{color:#151c64;font-size:13px;
	font-weight:700;text-transform:uppercase;letter-spacing:.07em;text-align:left;
	padding:0 0 10px;margin:0 0 12px;border-bottom:1px solid #edeff6}
/* ces deux encarts portent un id : theme.css les stylait par #exploitation h3, qui bat
   n'importe quelle classe. On reprend la main avec le meme id. */
.pe-fp-bas #exploitation h3,.pe-fp-bas #exploitation2 h3{color:#151c64;font-size:13px;
	font-weight:700;text-transform:uppercase;letter-spacing:.07em;text-align:left;
	padding:0 0 10px;margin:0 0 12px;border-bottom:1px solid #edeff6}
.pe-fp-bas #exploitation h3:before,.pe-fp-bas #exploitation2 h3:before{display:none}
.pe-fp-bas #exploitation h3 span,.pe-fp-bas #exploitation2 h3 span{background:none;padding:0;display:inline}
.pe-fp-reassurance .pe-fp-carte h3:before{display:none}

/* les traits gris decoratifs du paragraphe d'agrement */
.pe-fp-reassurance .pe-fp-agrement .separation{display:none}

/* le paragraphe d'agrement, au-dessus des encarts */
.pe-fp-agrement{font-size:15px;line-height:1.6;color:#4a4f63;margin-bottom:20px}

/* les colonnes gardent leur gouttiere de 15 px : les cartes ne se touchent pas */
.pe-fp-reassurance .cadre_droite{padding-left:26px;margin-bottom:26px}

/* ---- telephone et tablette ----
   Ces deux rangees portent hidden-xs comme avant : elles restent masquees sur
   telephone, exactement comme la colonne de droite qu'elles remplacent. */
@media screen and (max-width:991px){
	.pe-fp-contenu{padding:22px 18px}
	.pe-fp-contenu h1{font-size:24px}
	.pe-fp-contenu h2{font-size:20px}
	.pe-fp-bas .pe-fp-carte,.pe-fp-reassurance .pe-fp-carte{padding:18px 16px;margin-bottom:18px}
	/* sur tablette, les colonnes de Bootstrap ne donnent plus de largeur : dans une
	   rangee souple, les cartes se reduiraient a la largeur de leur texte. */
	.pe-fp-bas > div,.pe-fp-reassurance > div{width:100%}
}