/*
Theme Name:   Denain Mediafolio 2016
Theme URI:    
Description:  Child theme de Twenty Sixteen pour le site de Jean-Pierre Denain, architecte. Construit pour le plugin Mediafolio (grille de projets, overlay au survol, fiche projet plein écran).
Author:       
Template:     twentysixteen
Version:      1.1.0
Text Domain:  denain-mediafolio-2016
*/

/* =========================================================================
   LOT 1 — FONDATION : police Inter + système + typographie globale
   =========================================================================
   Ce fichier porte l'identité visuelle du site (ce qui n'est pas spécifique
   aux projets Mediafolio). Le CSS des projets vit dans assets/css/projects.css.

   Tout est construit sur des VARIABLES : les valeurs sont définies une seule
   fois ci-dessous (:root), puis réutilisées partout. Pour changer une couleur
   ou un espacement dans tout le site, il suffit de modifier UNE ligne ici.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Chargement de la police Inter (fichiers locaux, dossier /fonts)
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;                /* Regular */
  font-display: swap;              /* affiche le texte tout de suite, échange la police une fois chargée */
  src: url('fonts/Inter-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;                /* Bold */
  font-display: swap;
  src: url('fonts/Inter-Bold.woff2') format('woff2');
}

/* Archivo Narrow — utilisée uniquement pour la barre de filtres des projets
   (choix de design Figma). Chargée ici (acte global) ; appliquée dans
   projects.css (composant du portfolio). */
@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 700;                /* Bold */
  font-display: swap;
  src: url('fonts/ArchivoNarrow-Bold.woff2') format('woff2');
}


/* -------------------------------------------------------------------------
   2. Variables du système (le coeur : peu de valeurs, réutilisées partout)
   ------------------------------------------------------------------------- */

:root {

  /* Palette (issue du cahier de style) */
  --couleur-texte:        #1E1E1E;   /* texte principal */
  --couleur-texte-2:      #7C7C7C;   /* texte secondaire : labels, metadata */
  --couleur-accent:       #B8FC62;   /* vert Denain */
  --couleur-fond:         #FFFFFF;   /* fond de page */
  --couleur-sur-image:    #FFFFFF;   /* texte sur image : overlay, menu sur couverture */

  /* Familles */
  --police-titre:    'Inter', sans-serif;
  --police-corps:    'Inter', sans-serif;
  --police-filtres:  'Archivo Narrow', sans-serif;   /* barre de filtres des projets */

  /* Échelle typographique : base 16px, ratio 1.25.
     Chaque cran = le précédent x 1.25. On obtient une hiérarchie cohérente
     sans choisir chaque taille à la main. */
  --taille-base:   1rem;        /* 16px — corps de texte */
  --taille-sm:     0.8rem;      /* ~13px — petits labels */
  --taille-lg:     1.25rem;     /* 20px */
  --taille-xl:     1.5rem;      /* 24px — menu, titres de projet dans la grille */
  --taille-2xl:    2rem;        /* 32px — H1, titres de projet */

  /* Espacement : pas de base 8px. Toutes les marges sont des multiples. */
  --pas:      8px;
  --pas-2:    16px;
  --pas-3:    24px;
  --pas-5:    40px;
  --pas-10:   80px;
  --pas-15:   120px;

  /* Interlignage */
  --interligne-corps:  1.6;
  --interligne-titre:  1.2;

  /* Vignette de référence (galerie + pagination) */
  --vignette-largeur: 280px;
  --vignette-hauteur: 200px;

  /* Points de bascule (pour référence ; les media queries les reprennent) */
  --bascule-mobile:   600px;
  --bascule-desktop:  1024px;
}


/* -------------------------------------------------------------------------
   3. Typographie globale
   -------------------------------------------------------------------------
   Inter s'applique déjà à la plupart des éléments par simple ordre de
   chargement (notre style.css passe après le thème parent). Restent quelques
   endroits où le parent utilise des sélecteurs de CLASSE (.entry-title,
   .main-navigation) plus prioritaires que de simples h1/body. On les vise
   donc par les MÊMES classes : à priorité égale, le dernier fichier chargé
   gagne — c'est nous. Aucune surcharge forcée (!important) nécessaire.
   ------------------------------------------------------------------------- */

/* Base : corps de texte et éléments de formulaire */
body,
button,
input,
select,
textarea {
  font-family: var(--police-corps);
  font-size: var(--taille-base);
  line-height: var(--interligne-corps);
  color: var(--couleur-texte);
}

/* Titres (éléments + classes de titre du thème parent) */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.comments-title,
.site-title {
  font-family: var(--police-titre);
  font-weight: 700;
  line-height: var(--interligne-titre);
  color: var(--couleur-texte);
}

h1, .entry-title, .page-title { font-size: var(--taille-2xl); }   /* 32px */
h2 { font-size: var(--taille-xl); }                               /* 24px */
h3 { font-size: var(--taille-lg); }                               /* 20px */

/* Menu principal du thème parent */
.main-navigation,
.main-navigation a {
  font-family: var(--police-corps);
}

p {
  line-height: var(--interligne-corps);
}

a {
  color: var(--couleur-texte);
}

a:hover,
a:focus {
  color: var(--couleur-texte-2);
}


/* =========================================================================
   LOT 2 — EN-TÊTE (logo, titre/sous-titre, menu)
   =========================================================================
   Éléments globaux du site (présents sur toutes les pages), donc gérés ici.
   On cible les classes réelles du thème parent Twenty Sixteen ; notre fichier
   se charge après le sien, donc à priorité égale nous gagnons — sans forcer.
   Le comportement flottant de l'en-tête sur les fiches projet est géré à part
   dans projects.css (car spécifique aux projets).
   ========================================================================= */

/* Logo à 120px */
.custom-logo {
  width: 120px;
  height: auto;
}

/* Masquer le titre et le sous-titre du site (on ne garde que le logo). Attention: ceci affecte aussi le footer */
.site-title,
.site-description {
  display: none;
}

/* =========================================================================
   Footer
   ========================================================================= */

/* Masquer la mention "Fièrement propulsé par WordPress" (imprint) */
.site-footer .imprint {
  display: none;
}

/* Espacement avant le footer (120px) et après son contenu, avant le bas de
   la page (120px). Deux intentions distinctes, deux réglages distincts. */
.site-footer {
  margin-top: var(--pas-15);      /* 120px : séparation avec ce qui précède */
  padding-bottom: var(--pas-15);  /* 120px : respiration avant le bas de page */
}

/* Menu principal : 24px Bold, items espacés de 40px.
   États (cahier) :
   - default        : gris #7C7C7C
   - default:hover   : soulignement 2px #7C7C7C
   - selected (page courante) : noir #1E1E1E
   - selected:hover : soulignement 2px #1E1E1E
   Le soulignement est une bordure basse transparente réservée d'avance, pour
   qu'elle n'apparaisse au survol sans provoquer de saut de mise en page. */
.main-navigation a {
  font-size: var(--taille-xl);       /* 24px */
  font-weight: 700;
  color: var(--couleur-texte-2);     /* #7C7C7C — état par défaut */
  border-bottom: 2px solid transparent;
}

.main-navigation a:hover,
.main-navigation a:focus {
  color: var(--couleur-texte-2);
  border-bottom-color: var(--couleur-texte-2);   /* soulignement gris */
}

/* Page courante (WordPress ajoute .current-menu-item sur le <li>) */
.main-navigation .current-menu-item > a {
  color: var(--couleur-texte);       /* #1E1E1E — sélectionné */
}

.main-navigation .current-menu-item > a:hover,
.main-navigation .current-menu-item > a:focus {
  border-bottom-color: var(--couleur-texte);     /* soulignement noir */
}

/* Espacement de 40px entre les items du menu.
   On l'applique en marge à gauche à partir du 2e item, pour ne pas décaler
   le premier. */
.main-navigation li + li {
  margin-left: var(--pas-5);         /* 40px */
}


/* =========================================================================
   LOT « finitions » — hauteur de page + titres de page masqués
   ========================================================================= */

/* Forcer le contenu à remplir l'écran.
   Sur une page à peu de projets, le contenu s'arrête haut et le fond du site
   apparaît en dessous (bande disgracieuse). On impose au conteneur de page une
   hauteur minimale égale à celle de l'écran : le fond blanc descend alors
   jusqu'en bas quel que soit le nombre de projets. */
#page.site {
  min-height: 100vh;
}

/* Masquer le titre des PAGES (Projets, Contact) : dans le design, c'est l'état
   du menu qui indique où l'on se trouve. Les FICHES PROJET, elles, gardent leur
   titre — on exclut donc body.single-project. */
body:not(.single-project) .page-title,
body:not(.single-project) .entry-title {
  display: none;
}


/* =========================================================================
   Menu mobile — overlay plein écran, en-tête cohérent
   =========================================================================
   Bascule au point du thème parent (~910px). Un SEUL bouton (mobile-menu.js)
   qui alterne hamburger/croix : ouverture et fermeture au même endroit.
   L'en-tête (logo + bouton) reste visible AU-DESSUS de l'overlay, pour une
   cohérence parfaite entre les états ouvert et fermé.
   ========================================================================= */

/* Notre bouton unique : caché par défaut (desktop) */
.denain-menu-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--couleur-texte);
}

@media ( max-width: 910px ) {

  /* Masquer le bouton du thème parent pour éviter le doublon */
  #masthead .menu-toggle {
    display: none;
  }

  /* Afficher notre bouton, poussé à droite de l'en-tête */
  .denain-menu-toggle {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
  }

  /* Bouton blanc sur les couvertures de projet (en-tête sur image), état fermé */
  body.single-project .denain-menu-toggle {
    color: var(--couleur-sur-image);
  }

  /* Menu ouvert : overlay plein écran blanc, liens centrés */
  body.denain-menu-open .site-header-menu {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: #ffffff;            /* opacité 100 % */
    align-items: center;
    justify-content: center;
  }

  body.denain-menu-open .main-navigation .primary-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pas-3);             /* 24px */
  }

  body.denain-menu-open .main-navigation li + li {
    margin-left: 0;
  }

  /* Liens de l'overlay : couleurs normales (fond blanc), même sur fiche projet */
  body.denain-menu-open .main-navigation a {
    color: var(--couleur-texte-2);
  }

  body.denain-menu-open .main-navigation .current-menu-item > a {
    color: var(--couleur-texte);
  }

  /* En-tête maintenu AU-DESSUS de l'overlay : logo + bouton restent visibles
     et à leur place. Le bouton (devenu croix) est donc pile là où était le
     hamburger — ouverture et fermeture au même endroit. */
  body.denain-menu-open .site-branding,
  body.denain-menu-open .denain-menu-toggle {
    position: relative;
    z-index: 70;
  }

  /* Ouvert = overlay blanc : le bouton (croix) repasse en sombre pour rester
     lisible, y compris sur une fiche projet où il était blanc en état fermé. */
  body.denain-menu-open .denain-menu-toggle {
    color: var(--couleur-texte);
  }
}


/* =========================================================================
   Page Contact (gabarit page-contact.php)
   =========================================================================
   Photo à gauche (image mise en avant), infos à droite alignées en bas.
   Empilement vertical sous le point de bascule mobile (910px).
   ========================================================================= */

.contact-page {
  display: flex;
  align-items: flex-end;        /* infos alignées en bas de la photo */
  gap: var(--pas-10);           /* 80px entre photo et infos */
  margin: var(--pas-10) 0;      /* respiration haut/bas */
}

.contact-photo {
  flex: 0 0 40%;                /* la photo occupe ~40% de la largeur */
  max-width: 40%;
}

.contact-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.contact-info {
  flex: 1;
}

/* Espacement vertical entre les lignes d'infos (nom, qualité, email, tél.) */
.contact-info > * {
  margin: 0 0 var(--pas-2);     /* 16px */
}

.contact-info > *:last-child {
  margin-bottom: 0;
}

/* Mobile : photo au-dessus, infos en dessous */
@media ( max-width: 910px ) {
  .contact-page {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-photo {
    flex: 0 0 auto;
    max-width: 100%;
  }
}