/* ==========================================================================
   La vache aux yeux bleus - look 2026
   Chargé après w3.css : les !important sont nécessaires pour passer
   au-dessus des classes w3 qui en utilisent elles-mêmes.
   ========================================================================== */

:root
{
   --sky:        #85D7EC;
   --sky-soft:   #EAF8FC;
   --ink:        #1D4F6E;
   --text:       #4B5B67;
   --muted:      #7A8894;
   --grass:      #8CCB6A;
   --grass-soft: #DDF1D0;
   --orange:     #F6A33B;
   --orange-soft:#FFE1B8;
   --pink:       #D46BA0;
   --cream:      #FFFBF3;
   --radius:     24px;
   --shadow:     0 12px 32px rgba(29, 79, 110, 0.10);
}

html
{
   scroll-behavior: smooth;
   scroll-padding-top: 70px;
}

body
{
   margin: 0;
   background: #fff;
   color: var(--text);
   font-family: "Nunito", "Segoe UI", Arial, sans-serif;
   font-size: 18px;
   line-height: 1.7;
}

img
{
   max-width: 100%;
}

a
{
   color: var(--ink);
}

/* Typographie ------------------------------------------------------------ */

.w3-xxlarge,
.w3-xlarge
{
   font-family: "Fredoka", "Nunito", sans-serif !important;
   font-weight: 600;
   line-height: 1.25;
}

.w3-xxlarge
{
   font-size: 2.4rem !important;
}

.w3-xlarge
{
   font-size: 1.6rem !important;
}

.w3-large
{
   font-size: 1.25rem !important;
}

.w3-medium
{
   font-size: 1.12rem !important;
}

.w3-text-blue
{
   color: var(--ink) !important;
}

.w3-text-gray,
.w3-text-grey
{
   color: var(--text) !important;
}

/* Petit trait coloré sous les titres de section */
p.w3-xxlarge.w3-center::after
{
   content: "";
   display: block;
   width: 72px;
   height: 6px;
   margin: 14px auto 0;
   border-radius: 6px;
   background: linear-gradient(90deg, var(--grass), var(--orange), var(--pink));
}

table p.w3-xxlarge.w3-center::after,
p.calendar-year::after
{
   display: none;
}

/* Couleurs de fond ------------------------------------------------------- */

.w3-blue
{
   background-color: var(--sky) !important;
}

.w3-blue .w3-text-gray,
.w3-blue .w3-text-grey,
.w3-blue .w3-text-white
{
   color: var(--ink) !important;
}

/* Menu ordinateur -------------------------------------------------------- */

.w3-top
{
   position: sticky !important;
   top: 0;
   z-index: 10;
}

.w3-top .w3-bar
{
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 4px;
   padding: 8px 16px !important;
   background: rgba(255, 255, 255, 0.94) !important;
   backdrop-filter: blur(8px);
   box-shadow: 0 2px 16px rgba(29, 79, 110, 0.10);
}

.w3-top .w3-bar-item
{
   float: none !important;
   padding: 8px 14px !important;
   border-radius: 999px;
   color: var(--ink) !important;
   font-weight: 700;
   font-size: 0.85rem;
   letter-spacing: 0.02em;
   transition: background-color 0.2s, color 0.2s;
}

.w3-top .w3-bar-item:hover
{
   background: var(--sky-soft) !important;
   color: var(--ink) !important;
}

.w3-top .fa-2x
{
   font-size: 1.15em;
   vertical-align: -1px;
   color: var(--sky);
}

.nav-phone
{
   margin-left: auto;
   padding: 6px 16px;
   border-radius: 999px;
   background: var(--orange);
   color: #fff;
   font-weight: 800;
   font-size: 0.85rem;
   white-space: nowrap;
}

.nav-phone a
{
   color: #fff;
   text-decoration: none;
}

.nav-phone a:hover
{
   text-decoration: underline;
}

/* Menu mobile ------------------------------------------------------------ */

.mobile-nav
{
   position: sticky;
   top: 0;
   z-index: 10;
   background: rgba(255, 255, 255, 0.96);
   box-shadow: 0 2px 16px rgba(29, 79, 110, 0.12);
}

.mobile-nav-bar
{
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 16px;
}

.mobile-nav-brand
{
   font-family: "Fredoka", sans-serif;
   font-weight: 600;
   font-size: 1.2rem;
   color: var(--ink);
   text-decoration: none;
}

.mobile-nav-toggle
{
   width: 44px;
   height: 44px;
   border: none;
   border-radius: 14px;
   background: var(--sky);
   color: #fff;
   font-size: 1.3rem;
   cursor: pointer;
}

.mobile-nav-links
{
   display: none;
   padding: 4px 16px 16px;
}

.mobile-nav-links.open
{
   display: block;
}

.mobile-nav-links a
{
   display: block;
   padding: 10px 14px;
   border-radius: 14px;
   color: var(--ink);
   font-weight: 700;
   text-decoration: none;
}

.mobile-nav-links a:hover
{
   background: var(--sky-soft);
}

.mobile-nav-links .fa
{
   width: 28px;
   color: var(--sky);
}

.mobile-nav-links .nav-phone
{
   display: block;
   margin: 10px 0 0;
   text-align: center;
}

.mobile-nav-links .nav-phone a
{
   display: inline;
   padding: 0;
   color: #fff;
}

/* Bannière --------------------------------------------------------------- */

.banner
{
   padding: 0 !important;
   line-height: 0;
}

.mobile-logo
{
   text-align: center;
   padding: 24px 0 0 !important;
}

.mobile-logo img
{
   width: 60%;
   max-width: 240px;
}

/* Accueil ---------------------------------------------------------------- */

.welcome
{
   padding-top: 56px !important;
   padding-bottom: 24px !important;
}

.welcome-facts
{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 16px;
   margin: 8px 0 48px;
}

.welcome-fact
{
   flex: 1 1 160px;
   max-width: 200px;
   padding: 22px 12px;
   border-radius: var(--radius);
   text-align: center;
   color: var(--ink);
   font-weight: 700;
   line-height: 1.3;
}

.welcome-fact .fa
{
   display: block;
   margin-bottom: 10px;
   font-size: 2rem;
}

.welcome-fact b
{
   display: block;
   font-family: "Fredoka", sans-serif;
   font-size: 1.6rem;
   font-weight: 600;
}

.welcome-fact:nth-child(1) { background: var(--sky-soft); }
.welcome-fact:nth-child(2) { background: var(--grass-soft); }
.welcome-fact:nth-child(3) { background: var(--orange-soft); }
.welcome-fact:nth-child(4) { background: #F8DDEB; }

/* Bandeaux photos -------------------------------------------------------- */

.photo-band
{
   min-height: 380px !important;
}

@media screen and (max-width: 660px)
{
   .photo-band
   {
      min-height: 220px !important;
      background-attachment: scroll !important;
   }
}

/* Projet pédagogique ----------------------------------------------------- */

#project
{
   padding-top: 56px;
   padding-bottom: 32px;
   background: var(--cream) !important;
}

#project .w3-card-4
{
   position: relative;
   margin: 0 0 8px;
   padding: 24px 32px !important;
   border-radius: var(--radius) !important;
   border-top: 8px solid var(--grass);
   background: #fff;
   box-shadow: var(--shadow) !important;
   overflow: hidden;
}

#project .w3-content > .w3-card-4:nth-of-type(2)
{
   border-top-color: var(--orange);
}

#project .w3-content > .w3-card-4:nth-of-type(3)
{
   border-top-color: var(--pink);
}

#project .w3-card-4 p.w3-xlarge
{
   color: var(--ink) !important;
}

#project .w3-card-4 p.w3-medium
{
   text-align: left !important;
}

#project .w3-card-4 img
{
   margin: 8px 16px 16px;
   border-radius: 20px !important;
}

#project .w3-card-4 i
{
   display: block;
   margin: 4px 0 8px;
   padding: 14px 20px;
   border-left: 4px solid var(--sky);
   border-radius: 0 14px 14px 0;
   background: var(--sky-soft);
   color: var(--ink);
}

#project .w3-card-4 .w3-card-4
{
   border-top: none;
   background: var(--sky-soft);
   box-shadow: none !important;
}

/* Éphémérides ------------------------------------------------------------ */

.calendar-zone .w3-half
{
   padding: 12px !important;
}

p.calendar-year
{
   display: inline-block;
   margin: 24px auto 0;
   padding: 4px 28px;
   border-radius: 999px;
   background: #fff;
   color: var(--ink) !important;
}

.calendar-legend
{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 12px 28px;
   margin: 0 0 8px;
   color: var(--ink);
   font-weight: 700;
}

.w3-half > table
{
   width: 100% !important;
   max-width: 460px;
   margin: 0 auto;
   padding: 12px 14px 16px;
   border: none !important;
   border-collapse: separate;
   border-spacing: 4px;
   border-radius: var(--radius);
   background: #fff;
   box-shadow: var(--shadow);
}

.w3-half > table p.w3-xxlarge
{
   margin: 4px 0 8px;
   color: var(--ink) !important;
   font-size: 1.6rem !important;
}

.w3-half > table td
{
   border: none !important;
   border-radius: 12px;
   text-align: center;
}

.w3-half > table h4,
.w3-half > table h5
{
   margin: 0;
   font-size: 0.95rem;
   font-weight: 700;
}

.w3-half > table td[bgcolor="lightgray"]
{
   background: transparent;
   color: var(--muted);
   font-size: 0.8rem;
   text-transform: uppercase;
}

.w3-half > table td[height]
{
   height: 38px;
   color: var(--text);
}

.w3-half > table td[bgcolor="white"]
{
   background: var(--sky-soft);
}

.w3-half > table td[bgcolor="lightgrey"]
{
   background: #F2F4F6;
   color: #A3AEB7;
}

.w3-half > table td[bgcolor="orange"],
.calendar-dot-orange
{
   background: var(--orange-soft);
   color: #8A4B00;
}

.w3-half > table td[bgcolor="green"],
.calendar-dot-green
{
   background: var(--grass-soft);
   color: #2F6B12;
}

.calendar-dot
{
   display: inline-block;
   width: 14px;
   height: 14px;
   margin-right: 8px;
   border-radius: 5px;
   vertical-align: -2px;
}

.calendar-dot-orange { background: var(--orange); }
.calendar-dot-green  { background: var(--grass); }

td.calendar-events
{
   padding-top: 10px;
   text-align: left !important;
   font-size: 0.95rem;
   line-height: 1.5;
}

td.calendar-events ul
{
   margin: 0;
   padding: 0;
   list-style: none;
}

td.calendar-events li
{
   margin: 4px 0;
}

td.calendar-events b
{
   color: var(--ink);
}

.w3-half > table p.w3-text-gray
{
   margin: 8px 0 0;
   font-size: 0.9rem !important;
   line-height: 1.5;
}

/* Équipe ----------------------------------------------------------------- */

#team
{
   padding-top: 56px !important;
}

#team img
{
   border-radius: var(--radius) !important;
   box-shadow: var(--shadow);
}

#team .team-member img
{
   width: 220px;
   height: 220px;
   object-fit: cover;
   border-radius: 50% !important;
   border: 6px solid var(--sky-soft);
}

#team .team-member .w3-large
{
   margin-bottom: 0;
   font-family: "Fredoka", sans-serif;
   font-size: 1.5rem !important;
   font-weight: 600;
   color: var(--ink) !important;
}

/* Contact / Facebook ----------------------------------------------------- */

#contact
{
   padding-top: 56px !important;
}

#contact a
{
   color: var(--ink);
   font-weight: 800;
}

.w3-button.w3-round-large
{
   padding: 12px 28px !important;
   border-radius: 999px !important;
   font-weight: 800;
   color: var(--ink) !important;
   box-shadow: 0 6px 18px rgba(29, 79, 110, 0.15);
   transition: transform 0.2s;
}

.w3-button.w3-round-large:hover
{
   transform: translateY(-2px);
}

.w3-button.w3-round-large .fa
{
   color: #1877F2;
   font-size: 1.4em;
   vertical-align: -3px;
}

/* Carte ------------------------------------------------------------------ */

#where
{
   padding-top: 56px !important;
}

#where iframe
{
   max-width: 100%;
   border-radius: var(--radius);
   box-shadow: var(--shadow);
}

/* Pied de page ----------------------------------------------------------- */

.site-footer
{
   padding: 48px 16px;
   background: var(--ink);
   color: rgba(255, 255, 255, 0.8);
   text-align: center;
   font-size: 0.95rem;
}

.site-footer a
{
   color: #fff;
}

.site-footer .w3-button
{
   margin-bottom: 16px;
   border-radius: 999px;
   background: #fff;
   color: var(--ink) !important;
   font-weight: 800;
   text-decoration: none;
}

/* Affichage tablettes et téléphones -------------------------------------- */

@media screen and (min-width: 0px) and (max-width: 660px)
{
   .mobile-hide { display: none !important; }
   .mobile-show { display: block !important; }

   body { font-size: 17px; }
   .w3-medium { font-size: 1.06rem !important; }
   .w3-large  { font-size: 1.15rem !important; }
   .w3-xxlarge { font-size: 1.9rem !important; }
   .w3-xlarge  { font-size: 1.35rem !important; }

   #project .w3-card-4
   {
      padding: 20px 18px !important;
   }

   #project .w3-card-4 img
   {
      float: none !important;
      display: block;
      margin: 8px auto 16px;
   }

   .welcome-fact
   {
      flex: 1 1 40%;
   }

   .w3-button.w3-round-large
   {
      white-space: normal;
      line-height: 1.4;
   }

   #where iframe
   {
      width: 100%;
      height: 320px !important;
   }
}

@media screen and (min-width: 661px)
{
   .mobile-show { display: none !important; }
}