/* =============================================================================
   formation.css — permis-de-exploitation.com
   Samy 08/09/2026 : habillage de la zone redactionnelle des 4 pages de formation
   (`<id>-formation-<slug>.html`, servies par recherche.php).

   FEUILLE ADDITIONNELLE, chargee UNIQUEMENT quand `$is_rech == 1`.
   recherche.php pose cette variable en ligne 2, avant l'include de header.php.

   Ne remplace aucune feuille, ne redefinit aucune classe existante.
   Prefixe `fo-` verifie libre dans theme.css, themeindex.css, main.css,
   wizard.css et bootstrap.min.css.

   Retour arriere : retirer la ligne <link> de header.php.

   POURQUOI ELLE EXISTE — trois defauts mesures au navigateur le 08/09 :
     1. l'image se posait SUR le texte. `align="right"` (attribut supprime de
        HTML5) produisait un flottant, avec `margin:0` : le texte venait la
        toucher. Et la classe `img-region` du balisage n'existait dans AUCUNE
        feuille du site — elle ne faisait rien.
     2. le corps etait a 20 px sur 84 caracteres de large, sans mesure bornee.
     3. la page demandait la police Lato, qui n'etait jamais chargee (seul
        Oswald l'est). Tout s'affichait dans la police par defaut du navigateur.
        On assume donc la pile systeme, comme sur les pages statiques.
   ============================================================================= */

.fo{
  --fo-accent:#e62117;        /* rouge de marque, inchange */
  --fo-lien:#3b5998;          /* bleu de marque, inchange */
  --fo-encre:#111827;
  --fo-encre-2:#4B5566;
  --fo-encre-3:#7A8496;
  --fo-bord:#E8EAF0;
  --fo-fond:#F7F8FA;
  /* 56ch rend ~70 caracteres reels : l'unite `ch` vaut la largeur du zero,
     sensiblement plus large que la moyenne des minuscules. Mesure faite au
     navigateur — 68ch donnait 84 caracteres par ligne, trop long. */
  --fo-mesure:56ch;

  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.75;
  color:var(--fo-encre-2);
  -webkit-font-smoothing:antialiased;
}

/* FILET. theme.css porte des regles d'ELEMENT nues, ecrites pour les
   formulaires et le fil d'Ariane : `label{float:left}`, `ol li{float:left}`.
   Elles valent (0,0,1) et frappent tout composant neuf. Cette ligne vaut
   (0,1,0) et les neutralise, quelle que soit la feuille chargee ensuite.
   L'illustration, elle, reflotte explicitement plus bas en (0,2,0). */
.fo,
.fo *{
  float:none;
  box-sizing:border-box;
}

/* --- l'illustration ------------------------------------------------------
   Elle reflotte a droite, mais avec une marge — c'est elle qui manquait. */
.fo .fo-illustration{
  float:right;
  width:350px;
  max-width:45%;
  margin:4px 0 22px 30px;
}
.fo .fo-illustration img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--fo-bord);
  border-radius:10px;
}

/* --- le corps redactionnel -----------------------------------------------
   Le contenu vient de la base et n'est pas maitrise balise par balise : on
   style donc les elements, pas des classes. C'est enferme sous .fo-corps.

   La mesure est posee sur CHAQUE bloc, pas sur le conteneur : un conteneur
   etroit repousserait l'illustration hors de la colonne, alors qu'un bloc
   borne laisse le flottant raccourcir ses lignes normalement. */
.fo-corps > p,
.fo-corps > ul,
.fo-corps > ol,
.fo-corps > div,
.fo-corps > h2,
.fo-corps > h3,
.fo-corps > h4{
  max-width:var(--fo-mesure);
}
/* Le bloc de reperes n'est pas du texte courant : la mesure ne s'y applique
   pas. (0,2,0) bat la regle ci-dessus (0,1,1). */
.fo-corps > .fo-cle{max-width:none;}

.fo-corps h2{
  font-size:20px;
  font-weight:600;
  line-height:1.3;
  color:var(--fo-encre);
  margin:34px 0 12px;
  padding-top:20px;
  border-top:1px solid var(--fo-bord);
  text-wrap:balance;
}
.fo-corps > h2:first-child{margin-top:0;padding-top:0;border-top:0;}
.fo-corps h3{
  font-size:17px;
  font-weight:600;
  line-height:1.4;
  color:var(--fo-lien);
  margin:26px 0 8px;
  text-wrap:balance;
}
.fo-corps h4{
  font-size:16px;
  font-weight:600;
  color:var(--fo-encre);
  margin:20px 0 6px;
}
.fo-corps p{
  margin:0 0 14px;
  color:var(--fo-encre-2);
  font-weight:400;      /* theme.css met les <p> en 300 : trop maigre a 16 px */
  font-size:16px;
  line-height:1.75;
}
.fo-corps ul,
.fo-corps ol{
  margin:12px 0 18px;
  padding-left:22px;
  color:var(--fo-encre-2);
  font-size:16px;
  line-height:1.75;
}
.fo-corps li{margin-bottom:7px;}
/* garde-fou : `ol li{float:left}` du fil d'Ariane casserait toute liste
   numerotee du contenu. Le filet plus haut le couvre deja, celui-ci le dit. */
.fo-corps ol li,
.fo-corps ul li{float:none;}
/* pas de gras dans le corps du texte, demande de Samy : une mise en avant se
   fait par la structure, pas en epaississant un mot au milieu d'un paragraphe */
.fo-corps strong,
.fo-corps b{color:var(--fo-encre);font-weight:600;}
.fo-corps a{color:var(--fo-lien);}

/* --- l'encart : l'information qui decide, sortie du corps du texte --- */
.fo-encart{
  background:var(--fo-fond);
  border-left:3px solid var(--fo-accent);
  border-radius:0 10px 10px 0;
  padding:16px 20px;
  margin:22px 0;
}
.fo-encart-titre{
  display:block;
  font-size:15px;
  font-weight:600;
  color:var(--fo-accent);
  margin-bottom:5px;
}
.fo-corps .fo-encart p{margin:0;color:var(--fo-encre);}
.fo-corps .fo-encart p + p{margin-top:10px;}

/* --- les reperes de la formation ------------------------------------------
   Premiere version : quatre boites a cadre et libelles en capitales. Retour de
   Samy : « trop impersonnel ». Refait en fiche de caracteristiques — pas de
   cadre, pas de capitales, un filet rouge de marque a gauche et quatre lignes
   courtes. Plus fin, deux fois moins haut, et ça ressemble au site plutot qu'a
   un tableau de bord. */
.fo-cle{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0 32px;
  margin:20px 0 26px;
  padding:2px 0 2px 18px;
  border-left:2px solid var(--fo-accent);
}
.fo-cle-item{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:5px 0;
}
.fo-cle-valeur{
  font-size:16px;
  font-weight:700;
  color:var(--fo-encre);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.fo-cle-libelle{
  font-size:15px;
  color:var(--fo-encre-3);
}

/* --- un tableau dans le corps : les quatre durees du permis en un jour --- */
.fo-corps .fo-tableau{overflow-x:auto;max-width:var(--fo-mesure);margin:16px 0 20px;}
.fo-corps table{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
}
.fo-corps th,
.fo-corps td{
  border:1px solid var(--fo-bord);
  padding:9px 12px;
  text-align:left;
  vertical-align:top;
  line-height:1.5;
}
.fo-corps th{background:var(--fo-fond);font-weight:600;color:var(--fo-encre);}
.fo-corps td:last-child{white-space:nowrap;font-weight:600;color:var(--fo-encre);}

.fo-note{
  margin-top:22px;
  padding-top:14px;
  border-top:1px solid var(--fo-bord);
  font-size:15px;
  color:var(--fo-encre-3);
  max-width:var(--fo-mesure);
}

/* --- petits ecrans --- */
@media (max-width:767px){
  /* l'image cesse de flotter : sur un telephone, elle prenait 343 px sur 390
     et ne laissait plus de place au texte a cote */
  .fo .fo-illustration{
    float:none;
    width:100%;
    max-width:100%;
    margin:0 0 20px;
  }
  .fo{font-size:16px;line-height:1.72;}
  .fo-corps h2{font-size:19px;margin-top:28px;padding-top:18px;}
  .fo-corps h3{font-size:17px;margin-top:22px;}
  .fo-cle{grid-template-columns:1fr;gap:0;padding-left:15px;}
}

/* =============================================================================
   PISTE 3 — LE BANDEAU CLAIR
   Samy 09/09/2026, piste retenue par Samy parmi les trois proposees.

   RETOUR ARRIERE : recherche.php porte un interrupteur, `$fo_gabarit`. Le
   remettre a 'origine' restitue EXACTEMENT la presentation d'avant, sans
   toucher ni a cette feuille ni au contenu. Prevu pour que Nicolas puisse
   trancher apres coup.

   Ce que le bandeau change : le fil d'Ariane, le titre, le chapo et les
   reperes sont rassembles en tete, et le moteur de recherche passe sur une
   ligne compacte. Aujourd'hui le moteur occupe la meilleure place de la page
   et son intitule est le PREMIER <h2> : Google lit un formulaire comme sujet
   principal de la page.
   ============================================================================= */
.fo-bandeau{
  background:#F4F6FA;
  border:1px solid #E1E6EF;
  border-radius:10px;
  padding:20px 22px;
  margin:0 0 16px;
}
.fo-bandeau h1{
  color:var(--fo-lien);
  font-size:30px;
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 8px;
  text-wrap:balance;
}
.fo-chapo{
  font-size:16.5px;
  line-height:1.6;
  color:var(--fo-encre-2);
  font-weight:400;
  margin:0;
  max-width:62ch;
}
.fo-pastilles{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:16px 0 0;
}
.fo-pastille{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  background:#fff;
  border:1px solid #DFE4ED;
  border-radius:99px;
  padding:6px 14px;
  font-size:14px;
  line-height:1.4;
  color:var(--fo-encre-2);
}
.fo-pastille strong{
  color:var(--fo-encre);
  font-weight:700;
  font-size:14.5px;
  font-variant-numeric:tabular-nums;
}

/* --- le moteur de recherche ----------------------------------------------
   Retour de Samy : garder le bleu d'origine. Le bandeau reste sur une seule
   ligne, mais sur le fond bleu de marque, comme avant. Le formulaire n'est pas
   duplique : c'est le MEME balisage que dans le gabarit d'origine, seule son
   enveloppe change. Les divs internes portent des classes Bootstrap qui
   flottent : on les remet en ligne ici. */
.fo-moteur{
  background:var(--fo-lien);
  border-radius:10px;
  padding:13px 14px 15px;
  margin:0 0 24px;
}
.fo-moteur,
.fo-moteur *{float:none;}
.fo-moteur-titre{
  display:block;
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
  opacity:.86;
  margin:0 0 10px;
  padding:0 2px;
}
.fo-moteur form{
  display:flex;
  align-items:flex-end;
  gap:9px;
  flex-wrap:wrap;
  margin:0;
}
.fo-moteur .padd5{
  padding:0;
  width:auto;
  flex:1 1 170px;
  font-size:12.5px;
  color:#fff;
  opacity:.86;
  line-height:1.6;
}
.fo-moteur .padd5:last-of-type{flex:0 0 auto;opacity:1;}
.fo-moteur select{
  width:100%;
  font-size:14px;
  height:38px;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:7px;
  background:#fff;
  color:var(--fo-encre);
}
.fo-moteur br{display:none;}
/* Bootstrap pose `.input-group-btn{width:1%}` (0,1,0) : sur telephone le bouton
   restait large de 38 px malgre son `width:100%`. (0,2,0) reprend la main. */
.fo-moteur .input-group-btn{display:block;width:auto;}

/* Le bouton : une loupe DESSINEE, pas une police d'icones.
   Font Awesome est declare par le balisage du site mais n'est charge par
   AUCUNE feuille : les trois `<i class="fa fa-arrow-right">` de la colonne de
   droite ne dessinent rien du tout. Meme piege que la police Lato. */
.fo-moteur .cadre_butt{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:38px;
  width:44px;
  padding:0;
  border:1px solid var(--fo-accent);
  border-radius:7px;
  font-weight:600;
  font-size:14px;
  color:#fff;
  background:var(--fo-accent);
}
.fo-moteur .cadre_butt:hover{filter:brightness(.93);}
.fo-moteur .cadre_butt:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.fo-loupe{
  width:17px;
  height:17px;
  flex:0 0 auto;
  display:block;
}
/* Le bouton n'affiche que la loupe, a la demande de Samy : « pas besoin
   d'ecrire rechercher si il y a la loupe ». Le mot reste dans le balisage,
   simplement retire de l'affichage : sans lui, un lecteur d'ecran annonce
   « bouton » sans dire lequel. Il redevient visible sur telephone, ou le
   bouton occupe toute la largeur et meriterait d'etre nomme. */
.fo-cache-visuel{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

@media (max-width:767px){
  .fo-bandeau{padding:16px 15px;}
  .fo-bandeau h1{font-size:23px;}
  /* les pastilles tombaient une par ligne sur 343 px : on resserre pour en
     mettre deux, sinon elles repoussent le moteur de 130 px vers le bas */
  .fo-pastilles{gap:6px;}
  .fo-pastille{padding:5px 10px;font-size:13px;}
  .fo-pastille strong{font-size:13.5px;}
  .fo-chapo{font-size:16px;}
  .fo-moteur{padding:12px 12px 14px;}
  .fo-moteur .padd5{flex:1 1 100%;}
  .fo-moteur .padd5:last-of-type{flex:1 1 100%;}
  .fo-moteur .input-group-btn{width:100%;}
  .fo-moteur .cadre_butt{width:100%;padding:0 18px;}
  /* le libelle revient : le bouton fait toute la largeur, une loupe seule au
     milieu d'une bande de 320 px serait deroutante */
  .fo-moteur .fo-cache-visuel{
    position:static;width:auto;height:auto;margin:0;
    overflow:visible;clip:auto;clip-path:none;
  }
}

/* =============================================================================
   LA COLONNE DE DROITE
   Samy 09/09/2026, retour de Samy : « tu m'as pas proposé ce qui se passe sur
   le côté ». Trois defauts y ont ete mesures :
     1. les trois `<i class="fa fa-arrow-right">` ne dessinaient RIEN : Font
        Awesome est appele par le balisage mais charge par aucune feuille ;
     2. le bloc PayPal etait enveloppe dans un `<a href="#">` — un lien mort ;
     3. les six entrees melangeaient trois formations et trois cas particuliers
        du permis en un jour, sans distinction.
   ============================================================================= */
.fo-cote{margin-bottom:22px;}
.fo-cote-bloc{
  background:#fff;
  border:1px solid var(--fo-bord);
  border-radius:12px;
  padding:16px 18px;
  margin-bottom:14px;
}
.fo-cote-titre{
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--fo-encre-3);
  margin:0 0 10px;
  padding-bottom:9px;
  border-bottom:1px solid var(--fo-bord);
}
.fo-cote-liste{
  list-style:none;
  margin:0;
  padding:0;
}
.fo-cote-liste li{margin:0;padding:0;float:none;}
.fo-cote-liste a{
  display:block;
  position:relative;
  padding:9px 0 9px 15px;
  font-size:15px;
  line-height:1.45;
  color:var(--fo-encre-2);
  text-decoration:none;
  border-bottom:1px solid var(--fo-bord);
}
.fo-cote-liste li:last-child a{border-bottom:0;padding-bottom:0;}
.fo-cote-liste a:hover{color:var(--fo-lien);}
/* le chevron remplace la fleche Font Awesome qui ne se dessinait pas */
.fo-cote-liste a::before{
  content:"";
  position:absolute;
  left:1px; top:1.05em;
  width:5px; height:5px;
  border-right:1.5px solid var(--fo-accent);
  border-bottom:1.5px solid var(--fo-accent);
  transform:rotate(-45deg);
}

/* --- le bloc d'aide : les coordonnees sont celles de l'en-tete, a
   l'identique. Rien de nouveau n'est invente ici. --- */
.fo-cote-aide{background:var(--fo-fond);}
.fo-cote-tel{
  margin:0 0 4px;
  font-size:19px;
  font-weight:700;
  line-height:1.4;
  color:var(--fo-accent);
  font-variant-numeric:tabular-nums;
}
.fo-cote-tel a{color:inherit;text-decoration:none;}
.fo-cote-horaires{
  margin:0;
  font-size:14px;
  color:var(--fo-encre-3);
  line-height:1.5;
}

/* --- le paiement en plusieurs fois --- */
.fo-cote-paypal{text-align:center;}
.fo-cote-paypal img{
  display:block;
  max-width:170px;
  height:auto;
  margin:2px auto 10px;
}
.fo-cote-paypal span{
  display:block;
  font-size:13.5px;
  color:var(--fo-encre-3);
  line-height:1.45;
}

@media (max-width:991px){
  .fo-cote{margin-top:26px;}
}

/* =============================================================================
   LE BLOC D'INSCRIPTION — lot D
   Samy 09/09/2026. Aucune des quatre pages n'avait de prix affiche ni de lien
   vers l'inscription, alors que le prix etait declare a Google dans les donnees
   structurees. Verifie avant de l'ecrire : `trouve_prix()` prend le prix du site
   en PREMIER, et quatre sessions reelles facturent bien 349, 499, 399 et 799 EUR,
   soit exactement ce que le JSON-LD annonce. (La variante `trouve_prix2()`, qui
   prend `stage.prix` d'abord, n'est appelee nulle part.)
   ============================================================================= */
.fo-cote-prix{
  background:var(--fo-fond);
  border-color:var(--fo-bord);
  text-align:center;
}
.fo-prix{
  display:block;
  font-size:34px;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--fo-encre);
  font-variant-numeric:tabular-nums;
}
.fo-prix-mention{
  display:block;
  margin-top:4px;
  font-size:13.5px;
  color:var(--fo-encre-3);
  line-height:1.45;
}
.fo-inscrire{
  display:block;
  margin-top:14px;
  padding:12px 16px;
  border-radius:9px;
  background:var(--fo-accent);
  border:1px solid var(--fo-accent);
  color:#fff;
  font-weight:600;
  font-size:15.5px;
  text-align:center;
  text-decoration:none;
}
.fo-inscrire:hover{filter:brightness(.93);color:#fff;text-decoration:none;}
.fo-inscrire:focus-visible{outline:2px solid var(--fo-lien);outline-offset:2px;}
.fo-cote-prix .fo-cote-titre{text-align:left;}