/* =============================================================================
   entete.css — permis-de-exploitation.com
   Samy 08/09/2026 : blocs communs a TOUTES les pages — l'en-tete ET le pied.
   Le nom du fichier ne dit que la moitie : il a d'abord servi a l'en-tete, la
   partie pied a ete ajoutee le meme jour. A renommer si l'occasion se presente.
   Piste 1 retenue par Samy — on repare, on ne redessine pas.

   FEUILLE ADDITIONNELLE, chargee sur TOUTES les pages (le bloc de contact
   apparait aussi hors accueil). Ne remplace aucune feuille, ne redefinit aucune
   classe existante. Prefixe `entete-` verifie libre dans theme.css,
   themeindex.css, styles/main.css et bootstrap.min.css.

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

   LE LOGO N'EST PAS CONCERNE. Aucune regle de cette feuille ne le touche.

   Quatre defauts repares, aucun autre changement :
     1. les horaires se decalaient — le <span> etait EN LIGNE, il coule donc sur
        la meme ligne que les numeros et se coupe ou il peut ;
     2. les numeros n'etaient pas cliquables ;
     3. le bloc etait en `hidden-sm hidden-xs` : invisible sur mobile et tablette,
        sans rien pour le remplacer ;
     4. l'icone etait un <svg> avec des classes Font Awesome mortes (`fa fa-phone
        fa-2x`, la bibliotheque n'est pas chargee) et un `</i>` orphelin.
        Elle passe en fond CSS : c'est de l'habillage, pas du contenu.
   ============================================================================= */

.entete-contact{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:4px;
  min-height:115px;
  padding:10px 0;
  /* Samy 08/09/2026 : meme pile systeme que la zone des onglets. L'en-tete etait le
     seul bloc reste en Arial pur, ce qui se voyait juste au-dessus des onglets.
     Zero requete reseau : c'est la police deja installee chez le visiteur. */
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  text-align:right;
}

.entete-tel{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:0 6px;
  font-size:20px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.012em;
  /* les chiffres prennent tous la meme chasse : les deux numeros s'alignent */
  font-variant-numeric:tabular-nums;
  color:#1F2A44;
}
/* L'icone vient de la feuille, plus du balisage. Pastille arrondie discrete :
   c'est le meme vocabulaire que les icones des onglets, l'en-tete et la zone
   du dessous parlent donc la meme langue. */
.entete-tel::before{
  content:"";
  width:34px;height:34px;
  flex:none;
  border-radius:10px;
  background-color:#EEF3FA;
  background-size:19px 19px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%233b5998%22%3E%3Cpath%20d%3D%22M6.62%2010.79a15.053%2015.053%200%20006.59%206.59l2.2-2.2a1%201%200%20011.01-.24c1.12.37%202.33.57%203.58.57a1%201%200%20011%201v3.5a1%201%200%2001-1%201C10.07%2022%202%2013.93%202%204.5A1%201%200%20013%203.5h3.5a1%201%200%20011%201c0%201.25.2%202.46.57%203.58a1%201%200%2001-.24%201.01l-2.2%202.2z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat;
  background-position:center;
}
.entete-tel a{
  color:inherit;
  text-decoration:none;
  white-space:nowrap;
  transition:color .16s ease;
}
.entete-tel a:hover,
.entete-tel a:focus{
  color:#3b5998;
  text-decoration:underline;
  text-underline-offset:3px;
}
/* le tiret separateur recule : il separe, il n'informe pas */
.entete-tel .sep{color:#C2C9D6;font-weight:400;padding:0 1px;}

/* LE defaut d'origine : cette ligne doit etre un BLOC, sinon elle coule a la
   suite des numeros et se coupe au milieu. */
.entete-horaires{
  display:block;
  width:100%;
  font-size:13px;
  line-height:1.45;
  letter-spacing:.005em;
  color:#77808F;
}

/* Sur grand ecran, on garde EXACTEMENT la disposition d'aujourd'hui : le bloc
   flotte a droite du logo, sur 40 % de la largeur. Piste 1 = on ne redessine pas. */
@media (min-width:992px){
  .entete-contact{float:right;width:40%;}
}

/* Le bloc etait masque en dessous de 992 px. Il ne l'est plus : il se centre,
   prend toute la largeur et passe sous le logo, les numeros restant des cibles
   tactiles confortables. */
@media (max-width:991px){
  .entete-contact{float:none;width:100%;clear:both;}
  .entete-contact{
    align-items:center;
    text-align:center;
    min-height:0;
    padding:4px 15px 14px;
  }
  .entete-tel{justify-content:center;font-size:19px;}
  .entete-contact{gap:5px;}
  .entete-tel a{padding:4px 2px;}
  .entete-horaires{font-size:13px;}
}
@media (max-width:480px){
  .entete-tel{font-size:18px;gap:0 5px;}
  .entete-tel::before{width:30px;height:30px;background-size:17px 17px;}
}

/* =============================================================================
   PIED DE PAGE
   Samy 08/09/2026 : les espacements etaient faits de <br /><br /> — six paires
   dans le seul pied. Ils sont remplaces par des marges, ce qui donne un rythme
   regulier au lieu d'une hauteur de ligne heritee de la police.
   Prefixe `pied-` verifie libre.
   ============================================================================= */
.pied-liens{
  list-style:none;
  margin:0 0 18px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.pied-liens a{color:#fff;}

.pied-paypal{margin:0 0 14px;}

.pied-credits{
  margin:0 0 18px;
  font-variant-numeric:tabular-nums;
}

/* le pied ouvrait un <style> au milieu de son corps : la regle est ici */
@media (max-width:1000px){
  .footer-logo-container{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
  }
}

.pied-tel{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0 6px;
  font-weight:600;
  letter-spacing:-.012em;
  font-variant-numeric:tabular-nums;
}
.pied-tel a{
  color:inherit;
  text-decoration:none;
  white-space:nowrap;
  transition:color .16s ease;
}
.pied-tel a:hover,
.pied-tel a:focus{text-decoration:underline;text-underline-offset:3px;}
.pied-tel .sep{opacity:.55;font-weight:400;}
.pied-horaires{
  display:block;
  margin-top:4px;
  font-size:14px;
  opacity:.85;
}
.pied-bloc{margin-bottom:16px;}