/*
Theme Name: Ecole d'Art Amilly
Theme URI: https://lestanneries.fr/
Author: Ecole municipale d'art d'Amilly
Description: Theme sur mesure pour le site de l'ecole municipale d'art d'Amilly. Menu lateral fixe, module d'actualite modulable, nuancier de couleurs par section.
Version: 1.0
Requires PHP: 7.4
Text Domain: ecole-art-amilly
*/

:root{
  --paper:#FAF7F0;
  --ink:#211D18;
  --line:rgba(33,29,24,0.14);
  --orange:#E1531F;
  --blue:#28588F;
  --yellow:#E8A600;
  --yellow-dark:#7A5600;
  --green:#28714B;
  --violet:#75447F;

  /* Couleurs vives des pastilles de menu (plus saturées que les teintes de texte
     ci-dessus, pensees pour se rapprocher d'un logo d'ecole d'art multicolore).
     Si vous avez les couleurs exactes du logo, remplacez-les ici : elles sont
     utilisees UNIQUEMENT pour les pastilles et les blocs colores, jamais pour
     du texte, donc le contraste texte/fond n'est pas concerne. */
  --orange-dot:#E1552E;
  --blue-dot:#3E6FB0;
  --yellow-dot:#E8B23A;
  --green-dot:#2AB6A5;
  --violet-dot:#7B4FA0;
  --pink-dot:#E14F92;
  --pink:#B23568;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:15px;
  line-height:1.6;
}

.disp,h1,h2,h3{
  font-family:'Archivo Black',Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:1.05;
  margin:0;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.eyebrow{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.card{
  background:#fff;
  border:0.5px solid var(--line);
  border-radius:10px;
}

/* Logos, cote a cote, dans un bandeau qui suit le meme centrage que le
   reste du site (max-width 1200px) : sur un grand ecran, les logos
   demarrent exactement a l'aplomb du menu lateral, pas au bord de l'ecran. */
.site-topbar{
  border-bottom:0.5px solid var(--line);
  display:flex;
  justify-content:center;
}
.site-topbar-inner{
  width:100%;
  max-width:1200px;
  display:flex;
  align-items:center;
  gap:28px;
  padding:22px 24px;
}
.site-topbar .logo-slot{
  display:flex;
  align-items:center;
}
/* Logo ecole : le plus grand des deux, c'est la signature du bandeau */
.site-topbar .logo-slot-ecole img{max-height:220px;max-width:440px;width:auto;object-fit:contain;}
.site-topbar .logo-slot-ecole .logo-placeholder{
  width:220px;height:170px;
}
/* Logo ville : plus petit que le logo ecole, mais bien visible */
.site-topbar .logo-slot-ville img{max-height:100px;max-width:220px;width:auto;object-fit:contain;}
.site-topbar .logo-slot-ville .logo-placeholder{
  width:180px;height:100px;
}
.site-topbar .logo-placeholder{
  border:1px dashed rgba(33,29,24,0.3);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:600;text-transform:uppercase;
  opacity:0.45;letter-spacing:0.02em;text-align:center;line-height:1.2;
}
/* Sur mobile, on reduit un peu les deux pour ne pas ecraser le bandeau,
   en gardant le meme rapport (ecole nettement plus grand que ville) */
@media (max-width:768px){
  .site-topbar .logo-slot-ecole img{max-height:130px;max-width:260px;}
  .site-topbar .logo-slot-ecole .logo-placeholder{width:170px;height:130px;}
  .site-topbar .logo-slot-ville img{max-height:70px;max-width:150px;}
  .site-topbar .logo-slot-ville .logo-placeholder{width:130px;height:70px;}
}

/* Structure a deux colonnes */
.site-body{
  display:flex;
  align-items:stretch;
  max-width:1200px;
  margin:0 auto;
}

/* Menu lateral */
.site-sidebar{
  width:240px;
  flex-shrink:0;
  border-right:0.5px solid var(--line);
  display:flex;
  flex-direction:column;
}
/* Le menu ne commence plus en haut de la colonne : il demarre desormais a
   hauteur des vignettes de l'accueil (sous le grand titre + son espacement),
   plutot qu'a hauteur du titre lui-meme. La barre laterale et la position du
   titre restent inchangees : seul ce padding change. */
.site-sidebar nav{padding:110px 0 18px;}
.site-sidebar ul{list-style:none;margin:0;padding:0;}
.site-sidebar a{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 22px;
  font-size:14px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.03em;
  border-left:2px solid transparent;
}
.site-sidebar a:hover{background:rgba(33,29,24,0.04);}
.site-sidebar li.current-menu-item > a,
.site-sidebar a.active{
  border-left-color:var(--ink);
  background:#fff;
}
/* align-self:stretch plutot qu'une hauteur fixe : le trait s'etire alors
   automatiquement sur toute la hauteur de son lien, que le libelle tienne
   sur une ligne ou se replie sur deux (ex. "Les ateliers de l'ecole d'art"),
   sans valeur magique a ajuster au cas par cas. */
.dotc{width:3px;border-radius:1px;flex-shrink:0;align-self:stretch;background:var(--ink);opacity:0.35;}
/* couleurs de section assignees via classes sur les items de menu (voir functions.php) */
.dotc.c-histoire{background:var(--orange-dot);opacity:1;}
.dotc.c-equipe{background:var(--violet-dot);opacity:1;}
.dotc.c-ateliers-ecole{background:var(--yellow-dot);opacity:1;}
.dotc.c-ateliers-maison{background:var(--blue-dot);opacity:1;}
.dotc.c-inscription{background:var(--green-dot);opacity:1;}
.dotc.c-galerie{background:var(--pink-dot);opacity:1;}
.dotc.c-accueil{background:var(--ink);opacity:1;}

/* Sous-menus deroulants (ex: "Cours" > Cours enfants / Cours adultes / A la maison) */
.site-sidebar li.menu-item-has-children > a{justify-content:space-between;}
/* Zone cliquable agrandie autour de la fleche (pas seulement le glyphe) pour
   qu'elle soit facile a toucher/cliquer precisement, notamment sur mobile. */
.site-sidebar .submenu-caret{
  margin-left:auto;
  margin-right:-10px;
  font-size:16px;
  opacity:0.75;
  transition:transform 0.15s ease;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 10px;
}
.site-sidebar li.menu-item-has-children.open > a .submenu-caret{transform:rotate(90deg);}
.site-sidebar .sub-menu{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;}
.site-sidebar li.menu-item-has-children.open .sub-menu{max-height:400px;}
.site-sidebar .sub-menu a{padding-left:40px;font-size:13px;}

.sidebar-search{
  padding:16px 22px;
  border-top:0.5px solid var(--line);
}

/* Bloc liens reseaux sociaux / sites partenaires, sous la recherche.
   Pas de bulle/fond : le visuel (PNG fourni) ou l'icone doit rester lisible
   tel quel, en petit format, sans etre recadre ni masque par un cercle.
   Chaque lien porte aussi un court libelle texte (ex: "Les Tanneries") pour
   qu'on sache toujours vers quel site on va, meme quand deux icones se
   ressemblent - liste empilee plutot que rangee de pastilles, comme un
   petit sommaire de liens sobre. */
.sidebar-social{
  padding:14px 22px 18px;
  border-top:0.5px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sidebar-social a{
  display:flex;
  align-items:center;
  gap:9px;
  /* Remet a zero le padding et la bordure herites de la regle generique
     ".site-sidebar a" (menu principal) : sans ce reset, chaque lien reseau
     social recevait un padding et une bordure supplementaires en plus de
     ceux du bloc ".sidebar-social", d'ou le decalage et les libelles
     qui semblaient disparaitre (poussees hors de la largeur visible). */
  padding:0;
  border-left:none;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.03em;
  color:var(--ink);
  opacity:0.72;
  transition:opacity 0.15s ease;
}
.sidebar-social a:hover{opacity:1;}
.sidebar-social .social-icon{
  width:16px;height:16px;
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
}
.sidebar-social .social-icon img{
  width:100%;height:100%;
  object-fit:contain; /* jamais "cover" : on veut voir tout le visuel, pas le recadrer */
  display:block;
}
.sidebar-social .social-label{white-space:nowrap;}
.sidebar-search form{
  display:flex;
  align-items:center;
  gap:6px;
  background:#fff;
  border:0.5px solid var(--line);
  border-radius:20px;
  padding:7px 12px;
}
.sidebar-search input[type=search]{
  border:none;
  background:transparent;
  font-size:12px;
  outline:none;
  width:100%;
  color:var(--ink);
  font-family:inherit;
}

/* Menu mobile (replie sous 768px) */
.menu-toggle{display:none;}

/* Contenu principal */
.site-main{
  flex:1;
  min-width:0;
  padding:28px 24px 40px;
}
.site-main .eyebrow{margin-bottom:6px;}
.site-main h1{font-size:28px;margin:0 0 10px;max-width:460px;}
/* Titre de la page d'accueil : typo moins grasse et moins ecrasee que le
   h1 generique (Archivo Black en line-height 1.05), plus respirante puisque
   c'est une longue phrase et non un court intitule de rubrique. */
.site-main .accueil-titre{
  font-family:'Inter',sans-serif;
  font-weight:600;
  letter-spacing:0.01em;
  line-height:1.35;
  font-size:32px;
  max-width:520px;
}
.site-main .intro{font-size:14px;opacity:0.75;max-width:460px;margin:0 0 22px;}

/* Bouton pilule */
.btn-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  background:var(--ink);
  color:var(--paper);
  padding:10px 18px;
  border-radius:20px;
  border:none;
  cursor:pointer;
}

/* Grille de decouverte / cartes generiques */
.grid-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
}
.grid-cards .card{padding:16px;}
.grid-cards .card .dot-lg{width:10px;height:10px;border-radius:50%;margin-bottom:10px;}

/* Grille de vignettes "a la une" - autant de vignettes que necessaire,
   deux formats fixes : carre 210x210px, ou large 420x315px (= 2 carres
   + l'ecart de 15px de large, meme hauteur). Disposition en flux (flex-wrap)
   pour respecter des dimensions exactes en pixels plutot que proportionnelles. */
.vignettes-grid{
  display:flex;
  flex-wrap:wrap;
  gap:0;
}
.vignette{
  position:relative;
  display:block;
  border-radius:0;
  overflow:hidden;
  background-color:var(--line);
  background-size:cover;
  background-position:center;
  border:0.5px solid var(--line);
  flex-shrink:0;
}
.vignette-carre{width:210px;height:210px;}
.vignette-large{width:420px;height:315px;}
/* Espace vide : reserve la meme place qu'une vraie vignette (210x210 ou
   420x315) mais reste totalement invisible, pour creer un ecart plus grand
   dans la grille sans casser son alignement en pixels fixes. */
.vignette-espace{background-color:transparent;border-color:transparent;pointer-events:none;}
@media (max-width:500px){
  .vignette-carre{width:100%;max-width:210px;}
  .vignette-large{width:100%;max-width:420px;height:auto;aspect-ratio:4/3;}
}
/* Plus de degrade derriere le titre : uniquement la photo, sans surcouche. */
.vignette-scrim{display:none;}
.vignette-text{
  position:absolute;left:0;right:0;bottom:0;
  padding:12px 14px;
  display:flex;flex-direction:column;gap:2px;
}
.vignette-fonce .vignette-text{color:#fff;}
.vignette-clair .vignette-text{color:#000;}
.vignette-surtitre{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;opacity:0.85;}
.vignette-titre{font-family:'Inter',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:0.01em;font-size:14px;line-height:1.2;}
.vignette-large .vignette-titre{font-size:20px;}
.vignette-soustitre{font-size:11px;opacity:0.8;margin-top:1px;}

/* Version "hero" plein format de la vignette, utilisee sur la page d'une
   actualite ouverte individuellement (single-actualite.php). */
.vignette-hero{width:100%;height:auto;aspect-ratio:16/8;min-height:260px;}
.vignette-hero .vignette-text{padding:22px 26px;gap:4px;}
.vignette-hero .vignette-surtitre{font-size:12px;}
.vignette-hero .vignette-titre{font-size:30px;}
.vignette-hero .vignette-soustitre{font-size:14px;}
@media (max-width:600px){
  .vignette-hero{aspect-ratio:4/3;min-height:200px;}
  .vignette-hero .vignette-titre{font-size:22px;}
}


/* Frise chronologique (page Histoire) */
.timeline-item{display:flex;gap:14px;padding:13px 0;border-top:0.5px solid var(--line);}
.timeline-item:first-child{border-top:none;}
.timeline-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:5px;background:var(--orange);}

/* Mediatheque photo */
.mediatheque-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
  gap:10px;
}
.mediatheque-grid a{
  aspect-ratio:1;
  border-radius:8px;
  overflow:hidden;
  background:var(--green);
  display:block;
}
.mediatheque-grid img{width:100%;height:100%;object-fit:cover;}
.mediatheque-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.mediatheque-filters a{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.03em;
  padding:6px 12px;border:0.5px solid var(--line);border-radius:16px;background:#fff;
}
.mediatheque-filters a.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* Formulaire natif WordPress pour les pages protegees par code
   (Ateliers enfants / Ateliers adultes) */
.post-password-form p{margin:0 0 10px;font-size:13px;}
.post-password-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;}
.post-password-form input[type=password]{
  border:0.5px solid var(--line);border-radius:6px;padding:9px 10px;
  font-size:13px;font-family:inherit;background:#fff;color:var(--ink);
}
.post-password-form input[type=submit]{
  margin-top:10px;display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;
  background:var(--ink);color:var(--paper);padding:9px 16px;border-radius:20px;border:none;cursor:pointer;
}

/* Fiches equipe (page Equipe) : grille de cartes cliquables */
.membres-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:14px;
}
.membre-card{
  background:#fff;border:0.5px solid var(--line);border-radius:10px;
  padding:12px;text-align:left;font-family:inherit;cursor:pointer;
  display:flex;flex-direction:column;gap:8px;color:var(--ink);
}
.membre-card:hover{border-color:var(--violet-dot,var(--violet));}
.membre-photo{
  width:100%;aspect-ratio:1;border-radius:8px;
  background-color:var(--violet-dot,var(--violet));background-size:cover;background-position:center;
}
.membre-nom{font-size:13px;font-weight:600;}
.membre-fonction{font-size:11px;opacity:0.6;}

/* Fenetre agrandie : fond plein (pas d'ombre, coherent avec la charte),
   fermeture au clic exterieur, sur Echap, ou via le bouton croix. */
.membre-overlay{
  position:fixed;inset:0;background:rgba(33,29,24,0.55);
  display:none;align-items:center;justify-content:center;padding:20px;z-index:1000;
}
.membre-overlay.open{display:flex;}
.membre-modal{
  position:relative;max-width:420px;width:100%;max-height:85vh;overflow:auto;padding:22px;
}
.membre-close{
  position:absolute;top:10px;right:12px;background:none;border:none;
  font-size:24px;line-height:1;cursor:pointer;color:var(--ink);
}
.membre-photo-large{
  display:block;width:100%;aspect-ratio:4/3;border-radius:8px;
  background-color:var(--violet-dot,var(--violet));background-size:cover;background-position:center;margin-bottom:14px;
}
.membre-nom-large{
  display:block;font-family:'Archivo Black',Arial,sans-serif;text-transform:uppercase;font-size:19px;
}
.membre-fonction-large{
  display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;
  color:var(--violet);margin:5px 0 12px;
}
.membre-bio{font-size:13px;line-height:1.65;opacity:0.85;}
.membre-bio p{margin:0 0 10px;}

/* Frise chronologique (modele "Histoire (frise)") */
.frise-item{display:flex;gap:14px;padding:13px 0;border-top:0.5px solid var(--line);}
.frise-item:first-child{border-top:none;}
.frise-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:5px;}
.frise-annee{font-family:'Archivo Black',Arial,sans-serif;text-transform:uppercase;font-size:16px;}
.frise-texte{font-size:12.5px;opacity:0.75;margin-top:2px;}

/* Grille horaire / tarifs (modeles "Ateliers (grille horaire)" et "Tarifs") */
.planning-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:0.5px solid var(--line);}
.planning-row:first-child{border-top:none;}
.planning-nom{font-size:13px;font-weight:600;}
.planning-horaire{font-size:11px;opacity:0.6;margin-top:2px;}
.planning-public{font-size:11px;font-weight:600;opacity:0.7;white-space:nowrap;}

/* Formulaire de contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.contact-grid .card{padding:16px;}
.contact-grid label{font-size:11px;font-weight:600;opacity:0.7;display:block;margin-bottom:4px;}
.contact-grid input,.contact-grid textarea{
  width:100%;border:0.5px solid var(--line);border-radius:6px;padding:9px 10px;
  font-size:13px;font-family:inherit;background:#fff;margin-bottom:10px;color:var(--ink);
}

/* Responsive */
@media (max-width:768px){
  .site-body{flex-direction:column;}
  .site-sidebar{
    width:100%;
    border-right:none;
    border-bottom:0.5px solid var(--line);
    min-height:0;
  }
  .site-sidebar nav{display:none;padding:8px 0;}
  .site-sidebar.open nav{display:block;}
  .menu-toggle{
    display:flex;align-items:center;gap:8px;
    width:100%;padding:12px 22px;border:none;background:none;
    font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.03em;color:var(--ink);cursor:pointer;
  }
  .contact-grid{grid-template-columns:1fr;}
}