/* ═══════════════════════════════════════════════════════════
   CONFIGURATION DU SITE AUPHYS — Fichier de personnalisation
   ───────────────────────────────────────────────────────────
   Ouvrez ce fichier avec le Bloc-notes.
   Modifiez les chiffres, sauvegardez, rechargez le navigateur.
   Les unités :  px = pixels   %  = pourcentage
   ═══════════════════════════════════════════════════════════ */




/* ╔═══════════════════════════════════════════════════════════╗
   ║  1. BARRE DE NAVIGATION (bandeau haut)                    ║
   ║                                                           ║
   ║  L'ÉPAISSEUR du bandeau dépend de DEUX choses :           ║
   ║    a) le padding (espace autour du logo)                  ║
   ║    b) la hauteur du logo (section 2 ci-dessous)           ║
   ║                                                           ║
   ║  → Pour un bandeau PLUS ÉPAIS  : augmentez padding OU     ║
   ║    augmentez la hauteur du logo                           ║
   ║  → Pour un bandeau PLUS FIN    : réduisez padding ET      ║
   ║    réduisez la hauteur du logo (section 2)                ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* Espace autour du logo dans la barre (avant scroll) */
nav {
  padding-top:    10px;   /* ↑ augmentez pour épaissir le bandeau */
  padding-bottom: 10px;   /* ↓ même valeur recommandée */
}

/* Même chose après scroll (version compacte) */
nav.scrolled {
  padding-top:    10px;
  padding-bottom: 10px;
}

/* Couleur de fond de la barre après scroll */
nav.scrolled {
  background: rgba(247, 248, 252, 0.96);
}

/* Taille du texte des liens de navigation */
nav ul a {
  font-size: 0.875rem;    /* ← augmentez ex: 1rem  ou réduisez ex: 0.8rem */
}

/* Espacement entre les liens de la nav */
nav ul {
  gap: 28px;              /* ← distance entre chaque lien */
}


/* ╔══════════════════════════════╗
   ║  2. LOGOS                   ║
   ╚══════════════════════════════╝ */

/* Logo AUPHYS dans la barre de navigation */
nav .logo img {
  height:     80px;      /* ← hauteur du logo */
  margin-top:   0px;      /* ← décale vers le bas (+) ou vers le haut (-) */
}

/* Logo AUPHYS dans le footer (bas de page) */
footer img.footer-logo {
  height: 120px;
}

/* Logo Power Auphys — grand (en haut de sa page) */
.page-hero-logo {
  height:     150px;
  margin-top:   0px;
}

/* Logo Power Auphys — petit (carte sur l'accueil) */
.pole-logo {
  height: 130px;
}

/* Logo Formasys — grand (en haut de sa page) */
.formasys-hero-logo {
  height: 130px;        /* ← changez la hauteur */
  margin-bottom: 28px;
}

/* Logo Formasys — petit (carte sur l'accueil) */
.formasys-logo {
  height: 100px;         /* ← changez la hauteur */
}


/* ╔══════════════════════════════════════╗
   ║  3. SECTION HERO (grande bannière)   ║
   ╚══════════════════════════════════════╝ */

/* Espace au-dessus du texte du hero (pour ne pas être caché par la nav) */
.hero-content {
  padding-top:    10px;  /* ← augmentez si le titre est caché par la barre */
  padding-bottom:  10px;
}

/* Même chose pour les pages secondaires (Formasys, Power, Carrières) */
.page-hero {
  padding-top:    170px;  /* ← ajustez si le titre est caché */
  padding-bottom: 100px;
}

/* Taille du grand titre du hero (accueil) */
.hero-title {
  font-size: clamp(2.4rem, 5.5vw, 4.8rem);  /* ← changez les 3 nombres : min, adaptatif, max */
}

/* Taille du sous-titre du hero */
.hero-sub {
  font-size: 1.15rem;
}


/* ╔══════════════════════════════════════╗
   ║  4. TITRES DES SECTIONS              ║
   ╚══════════════════════════════════════╝ */

/* Taille des grands titres de section ("Ce que nous faisons", etc.) */
.section-title {
  font-size: clamp(1.9rem, 4vw, 3rem);   /* min, adaptatif, max */
}

/* Taille du texte d'introduction sous les titres */
.section-sub {
  font-size: 1.05rem;
}

/* Taille des petites étiquettes vertes ("NOS MÉTIERS", "CONTACT"...) */
.tag {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}


/* ╔══════════════════════════════════════╗
   ║  5. CARTES DE SERVICES & PHOTOS      ║
   ╚══════════════════════════════════════╝ */

/* HAUTEUR de la bannière photo dans toutes les cartes
   (quand vous déposez une photo ex: formation.jpg)     */
.card-img {
  height: 180px;          /* ← changez : 140 (petite)  220 (grande)  280 (très grande) */
  border-radius: 10px;
}

/* HAUTEUR INDIVIDUELLE par carte — retirez les barres
   obliques  /*  */  pour activer la ligne souhaitée :  */
/* .metiers-grid .card:nth-child(1) .card-img { height: 200px; } */ /* Électricité   */
/* .metiers-grid .card:nth-child(2) .card-img { height: 200px; } */ /* Instrumentation */
/* .metiers-grid .card:nth-child(3) .card-img { height: 200px; } */ /* Mécanique     */
/* .metiers-grid .card:nth-child(4) .card-img { height: 200px; } */ /* BIM           */
/* .metiers-grid .card:nth-child(5) .card-img { height: 200px; } */ /* Énergie       */
/* .metiers-grid .card:nth-child(6) .card-img { height: 200px; } */ /* Formation     */

/* Espace intérieur des cartes */
.card {
  padding: 32px 28px;
  border-radius: 16px;
}

/* Taille du titre et texte des cartes */
.card h3 { font-size: 1.05rem; }
.card p  { font-size: 0.9rem;  }


/* ╔══════════════════════════════════════╗
   ║  6. BOUTONS                          ║
   ╚══════════════════════════════════════╝ */

/* Bouton vert principal */
.btn-primary {
  font-size:      0.95rem;
  padding:        13px 28px;   /* haut/bas   gauche/droite */
  border-radius:  8px;
}

/* Bouton secondaire (contour) */
.btn-secondary {
  font-size:      0.95rem;
  padding:        13px 26px;
  border-radius:  8px;
}


/* ╔══════════════════════════════════════╗
   ║  7. ESPACEMENTS DES SECTIONS         ║
   ╚══════════════════════════════════════╝ */

/* Espace vertical de la section "Nos métiers" */
#metiers {
  padding-top:    110px;
  padding-bottom: 110px;
}

/* Espace vertical de la section "Valeurs" */
#valeurs {
  padding-top:    110px;
  padding-bottom: 110px;
}

/* Espace vertical de la section "Contact" */
#contact {
  padding-top:    110px;
  padding-bottom: 110px;
}


/* ╔══════════════════════════════════════╗
   ║  8. FOOTER (pied de page)            ║
   ╚══════════════════════════════════════╝ */

footer {
  padding-top:    36px;
  padding-bottom: 36px;
}

/* Taille du texte du footer */
footer p {
  font-size: 0.82rem;
}

/* Taille des liens du footer */
footer nav ul a {
  font-size: 0.82rem;
}


/* ╔══════════════════════════════════════╗
   ║  9. COULEURS PRINCIPALES             ║
   ╚══════════════════════════════════════╝
   Attention : changer une couleur ici
   l'applique sur TOUT le site.           */

:root {
  --green:      #00C495;   /* vert principal (boutons, accents) */
  --green-d:    #00a87e;   /* vert foncé (hover) */
  --bg:         #f7f8fc;   /* fond clair des pages */
  --bg-alt:     #eef1f7;   /* fond des sections alternées */
  --text:       #1e2130;   /* couleur du texte principal */
  --muted:      #6b7a94;   /* couleur du texte secondaire (gris) */
  --border:     #e2e6ef;   /* couleur des bordures */
}


/* ╔══════════════════════════════════════╗
   ║  10. PHOTO D'ÉQUIPE                  ║
   ╚══════════════════════════════════════╝ */

.about-img-wrap img {
  border-radius: 16px;     /* arrondi des coins (0 = carré parfait) */
}