/* =====================================================================
   PIED-DE-PAGE.CSS — pied de page commun de fredpeuriere.com
   Importé par pages-cours.css ; chargé seul par index.html :
   <link rel="stylesheet" href="pied-de-page.css">
   Variante informatique : <body class="info">
   Fonctionne avec <footer class="w3-center w3-black …">fredpeuriere.com</footer>
   (classes w3-black / w3-gray annulées) et avec <footer id="myFooter">.
   ===================================================================== */

footer,
footer[class] {   /* [class] : passe devant .w3-black / .w3-gray */
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 16px;
  margin: 50px 0 20px;
  padding: 13px 20px !important;
  text-align: center;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #ffffff !important;
  opacity: 1 !important;
  background-color: #0b2239 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(ellipse 50% 160% at 50% 100%, rgba(84, 140, 200, 0.30) 0%, rgba(84, 140, 200, 0) 70%),
    linear-gradient(90deg, #0b2239 0%, #163a5c 50%, #0b2239 100%) !important;
  background-size: 28px 28px, 28px 28px, 100% 100%, 100% 100% !important;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(244, 197, 66, 0.22);
}

/* ornement à gauche du nom : trait – losange */
footer::before {
  content: "";
  width: 44px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='12'%3E%3Cpath d='M0 6 H30' stroke='%23f4c542' stroke-width='2' stroke-linecap='round' opacity='.85'/%3E%3Cpath d='M38 0 L44 6 L38 12 L32 6 Z' fill='%23f4c542'/%3E%3C/svg%3E") center / 44px 12px no-repeat;
}

/* pied de page placé directement dans <body> (index.html) : toute la largeur, collé en bas */
body > footer,
body > footer[class] {
  margin: 50px 0 0;
  border-radius: 0;
  box-shadow: inset 0 1px 0 rgba(244, 197, 66, 0.35);   /* filet doré en haut seulement */
}

/* description à droite du nom, après un filet vertical */
footer::after {
  content: "Cours · TP · Devoirs corrigés";
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* anciens pieds de page (spe.html, ts2.html) : bloc intérieur transparent */
footer#myFooter > div {
  padding: 0 !important;
  background: none !important;
  color: inherit !important;
}
footer#myFooter h4 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* variante informatique */
body.info footer,
body.info footer[class] {
  background-color: #11161d !important;
  background-image:
    radial-gradient(rgba(169, 188, 207, 0.16) 1px, transparent 1.4px),
    radial-gradient(ellipse 50% 160% at 50% 100%, rgba(169, 188, 207, 0.22) 0%, rgba(169, 188, 207, 0) 70%),
    linear-gradient(90deg, #11161d 0%, #232c38 50%, #11161d 100%) !important;
  background-size: 18px 18px, 100% 100%, 100% 100% !important;
  box-shadow: inset 0 0 0 1px rgba(169, 188, 207, 0.28);
}

body.info footer::before {
  width: 50px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='14'%3E%3Cpath d='M0 7 H26' stroke='%23a9bccf' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M33 2 L39 7 L33 12' fill='none' stroke='%23a9bccf' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='41' y='10' width='9' height='2.5' fill='%23a9bccf'/%3E%3C/svg%3E") center / 50px 14px no-repeat;
}

@media (max-width: 600px) {
  footer {
    margin: 36px 0 14px;
    padding: 10px 12px !important;
    gap: 2px 12px;
    font-size: 15px;
    border-radius: 10px;
  }
  footer::before {
    display: none;
  }
  footer::after {
    display: none;   /* sur téléphone : le nom du site seul, sur une ligne */
  }
}


/* =====================================================================
   Décors repris des bandeaux de parties (pages-cours.css) :
   ondes / atome et losanges dorés ; variante informatique : circuit,
   binaire, police « code » et chevrons « < … /> ».
   ===================================================================== */
footer,
footer[class] {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='120' viewBox='0 0 360 120'%3E%3Cdefs%3E%3ClinearGradient id='f'%3E%3Cstop offset='0' stop-color='%23f4c542'/%3E%3Cstop offset='.55' stop-color='%23f4c542'/%3E%3Cstop offset='1' stop-color='%23f4c542' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23f)' stroke-width='1.5'%3E%3Cpath opacity='.35' d='M0 60 Q22.5 20 45 60 T90 60 T135 60 T180 60 T225 60 T270 60 T315 60 T360 60'/%3E%3Cpath opacity='.18' d='M0 60 Q30 5 60 60 T120 60 T180 60 T240 60 T300 60 T360 60'/%3E%3Cpath opacity='.12' d='M0 60 Q15 40 30 60 T60 60 T90 60 T120 60 T150 60 T180 60 T210 60 T240 60 T270 60 T300 60 T330 60 T360 60'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='120' viewBox='0 0 360 120'%3E%3Cg fill='none' stroke='%23ffffff'%3E%3Ccircle cx='300' cy='60' r='14' opacity='.10'/%3E%3Cellipse cx='300' cy='60' rx='70' ry='26' opacity='.10' transform='rotate(-20 300 60)'/%3E%3Cellipse cx='300' cy='60' rx='70' ry='26' opacity='.10' transform='rotate(40 300 60)'/%3E%3Cellipse cx='300' cy='60' rx='70' ry='26' opacity='.10' transform='rotate(100 300 60)'/%3E%3C/g%3E%3Ccircle cx='300' cy='60' r='5' fill='%23f4c542' opacity='.45'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 50% 160% at 50% 100%, rgba(84, 140, 200, 0.30) 0%, rgba(84, 140, 200, 0) 70%),
    linear-gradient(90deg, #0b2239 0%, #163a5c 50%, #0b2239 100%) !important;
  background-repeat: no-repeat !important;
  background-position: left -40px center, right -20px center, center, center !important;
  background-size: 180px 60px, 180px 60px, 100% 100%, 100% 100% !important;
}

/* losanges dorés de part et d'autre, comme les titres de parties */
footer::before {
  width: 52px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='10'%3E%3Cpath d='M0 5 H40' stroke='%23f4c542' stroke-width='2'/%3E%3Cpath d='M46 1 L50 5 L46 9 L42 5 Z' fill='%23f4c542'/%3E%3C/svg%3E") center / 52px 10px no-repeat;
}
footer::after {
  padding-right: 66px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='10'%3E%3Cpath d='M12 5 H52' stroke='%23f4c542' stroke-width='2'/%3E%3Cpath d='M6 1 L10 5 L6 9 L2 5 Z' fill='%23f4c542'/%3E%3C/svg%3E") right center / 52px 10px no-repeat;
}

/* ----- variante informatique ----- */
body.info footer,
body.info footer[class] {
  font-family: Consolas, Menlo, "Courier New", monospace;
  letter-spacing: 0.08em;
  color: #dde6ef !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='120' viewBox='0 0 360 120'%3E%3Cdefs%3E%3ClinearGradient id='f'%3E%3Cstop offset='0' stop-color='%23a9bccf'/%3E%3Cstop offset='.5' stop-color='%23a9bccf'/%3E%3Cstop offset='1' stop-color='%23a9bccf' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23f)' stroke-width='1.5' opacity='.45'%3E%3Cpath d='M0 30 H80 L110 60 H220 L240 40 H330'/%3E%3Cpath d='M0 90 H60 L80 70 H170 L190 90 H300'/%3E%3C/g%3E%3Cg fill='%23a9bccf' opacity='.5'%3E%3Ccircle cx='110' cy='60' r='3.5'/%3E%3Ccircle cx='80' cy='70' r='3.5'/%3E%3Ccircle cx='190' cy='90' r='3.5'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='120' viewBox='0 0 360 120'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.5' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg font-family='Consolas,Menlo,monospace' font-size='14' fill='url(%23g)' letter-spacing='3' text-anchor='end'%3E%3Ctext x='350' y='38' opacity='.16'%3E1001 0011 1010%3C/text%3E%3Ctext x='350' y='66' opacity='.10'%3E0010 1110 0101%3C/text%3E%3Ctext x='350' y='94' opacity='.16'%3E1100 1001 0110%3C/text%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 50% 160% at 50% 100%, rgba(169, 188, 207, 0.22) 0%, rgba(169, 188, 207, 0) 70%),
    linear-gradient(90deg, #11161d 0%, #232c38 50%, #11161d 100%) !important;
  background-position: left 0 center, right 0 center, center, center !important;
  background-size: 180px 60px, 180px 60px, 100% 100%, 100% 100% !important;
}

body.info footer::before {
  width: 52px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='14'%3E%3Cpath d='M0 7 H34' stroke='%23a9bccf' stroke-width='2'/%3E%3Cpath d='M48 2 L41 7 L48 12' fill='none' stroke='%23a9bccf' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 52px 14px no-repeat;
}
body.info footer::after {
  font-family: Consolas, Menlo, "Courier New", monospace;
  letter-spacing: 0.14em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='14'%3E%3Cpath d='M6 12 L11 2' stroke='%23a9bccf' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M14 2 L21 7 L14 12' fill='none' stroke='%23a9bccf' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M26 7 H52' stroke='%23a9bccf' stroke-width='2'/%3E%3C/svg%3E") right center / 52px 14px no-repeat;
}

@media (max-width: 600px) {
  footer, footer[class], body.info footer, body.info footer[class] {
    background-size: 120px 40px, 120px 40px, 100% 100%, 100% 100% !important;
  }
}