/* =========================================================
   Childéric Entreprises — custom.css
   Charte : #24699E (bleu) · #A6D8ED (bleu clair) · #183B56 (bleu nuit)
   ========================================================= */

/* ---------- Police Sansation (freeware, Bernd Montag) ---------- */
@font-face {
  font-family: 'Sansation';
  src: url('../fonts/Sansation_Regular.woff2') format('woff2'),
       url('../fonts/Sansation_Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sansation';
  src: url('../fonts/Sansation_Bold.woff2') format('woff2'),
       url('../fonts/Sansation_Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sansation';
  src: url('../fonts/Sansation_Italic.woff2') format('woff2'),
       url('../fonts/Sansation_Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Sansation';
  src: url('../fonts/Sansation_Bold_Italic.woff2') format('woff2'),
       url('../fonts/Sansation_Bold_Italic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Sansation';
  src: url('../fonts/Sansation_Light.woff2') format('woff2'),
       url('../fonts/Sansation_Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}

:root {
  --bleu:      #24699E;
  --bleu-clair:#A6D8ED;
  --nuit:      #183B56;
  --texte:     #5B6770;
  --gris-bg:   #F4F7F9;
}

* { box-sizing: border-box; }

body {
  font-family: 'Sansation', 'Open Sans', -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--texte);
  background: #ffffff;
  line-height: 1.6;
  margin: 0;
}

h1, h2, h3 { color: var(--nuit); font-weight: 300; margin: 0 0 .5em; }
h1, h2, h3, h4, h5, h6, p, li, a, span, div, button, input, textarea, select {
  font-family: 'Sansation', 'Open Sans', -apple-system, Segoe UI, Roboto, sans-serif;
}
a { color: var(--bleu); }

.container {
  width: 90%;
  max-width: 1280px;
  margin: auto;
}

/* ---------- Boutons ---------- */
.btn-primary {
  background: var(--bleu);
  color: #fff;
  padding: 15px 28px;
  border-radius: 14px;
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  transition: background .2s ease;
}
.btn-primary:hover { background: var(--nuit); color:#fff; }

/* ---------- Header / navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(120%) blur(6px);
  box-shadow: 0 1px 0 rgba(24,59,86,.08);
}
.header-inner {
  display: flex; align-items: center; gap: 24px;
  padding: 14px 0;
}
.brand {
  font-weight: 700; font-size: 20px; color: var(--nuit);
  text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center;
}
.brand-logo {
  height: 56px; width: auto; display: block;
}
.main-nav { margin-left: auto; }
.main-nav ul {
  list-style: none; display: flex; gap: 22px; margin: 0; padding: 0;
}
.main-nav a {
  text-decoration: none; color: var(--nuit); font-weight: 600;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.main-nav a:hover,
.main-nav .current a,
.main-nav .active a { border-bottom-color: var(--bleu); color: var(--bleu); }

.btn-rdv { padding: 10px 20px; }
.nav-toggle {
  display: none; background: none; border: 0; font-size: 26px;
  color: var(--nuit); cursor: pointer;
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--nuit) 0%, var(--bleu) 55%, var(--bleu-clair) 100%);
  color: #fff;
  padding: 140px 0 90px;
  min-height: 100vh;
  display: flex; align-items: center;
}
.hero h1 { color:#fff; font-size: 52px; line-height: 1.1; }
.hero p  { font-size: 20px; max-width: 640px; margin: 18px 0 32px; }

/* Bandeau fin (pages internes) */
.hero--slim {
  min-height: 0;
  padding: 120px 0 40px;
  display: block;
}
.hero--slim h1 { font-size: 40px; margin: 0; }

/* ---------- Sections génériques ---------- */
.section { padding: 80px 0; }
.section:nth-of-type(even) { background: var(--gris-bg); }
.section-heading { color: var(--nuit); font-size: 46px; font-weight: 300; margin-bottom: 32px; }
.dark-section { background: var(--nuit); color: #fff; }
.dark-section h1, .dark-section h2, .dark-section h3 { color: #fff; }

/* Grilles de cartes (expertise, secteurs, références) */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  background: #fff; border: 1px solid rgba(24,59,86,.08);
  border-radius: 16px; padding: 28px;
  box-shadow: 0 6px 24px rgba(24,59,86,.05);
}
.card h3 { font-size: 22px; }

/* ---------- Contenu d'article (pages internes) ---------- */
.page-content { padding: 40px 0 80px; }
.page-content h2 { font-size: 32px; margin-top: 1.4em; }
.page-content img { max-width: 100%; height: auto; border-radius: 12px; }

/* ---------- Page À propos : texte + photo ---------- */
.about-layout {
  display: flex; gap: 48px; align-items: flex-start;
}
.about-layout .about-text { flex: 1 1 auto; }
.about-layout .about-photo { flex: 0 0 auto; }
.about-photo img {
  width: 260px; height: 260px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(24,59,86,.18);
  border: 5px solid #fff;
}
@media (max-width: 720px) {
  .about-layout { flex-direction: column-reverse; align-items: center; text-align: left; gap: 28px; }
  .about-photo img { width: 200px; height: 200px; }
}

/* ---------- Footer ---------- */
.site-footer { padding: 64px 0 24px; }
.footer-grid {
  display: grid; grid-template-columns: 1fr 1fr auto;
  gap: 32px; align-items: start;
}
.footer-legal { margin-top: 32px; opacity: .8; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nav-toggle { display: block; margin-left: auto; }
  .btn-rdv { display: none; }
  .main-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; display: none; padding: 12px 5%;
    box-shadow: 0 8px 24px rgba(24,59,86,.12);
  }
  body.nav-open .main-nav { display: block; }
  .main-nav ul { flex-direction: column; gap: 8px; }
  .hero h1 { font-size: 36px; }
  .cards { grid-template-columns: 1fr; }
  .brand-logo { height: 44px; }
}
/* ---------- Correctif : la section « Parcours » gardait le fond gris ---------- */
.section.dark-section { background: var(--nuit); }

/* ---------- Hero accueil : photo de la cathédrale ---------- */
.is-home .hero:not(.hero--slim) {
  background: #505F7A url('../images/hero-rouen.webp') right center / cover no-repeat;
  min-height: 80vh;
}
.hero .accent { color: var(--bleu-clair); }

/* Écrans intermédiaires (tablette, petit portable) : le texte ne doit pas recouvrir la cathédrale */
@media (max-width: 1100px) and (min-width: 721px) {
  .is-home .hero .container > div { max-width: 48%; }
  .is-home .hero h1 { font-size: 40px; }
  .is-home .hero p  { font-size: 18px; }
}

/* Téléphone : photo verticale, titre dans le ciel, texte en dessous sur bleu nuit */
@media (max-width: 720px) {
  .is-home .hero:not(.hero--slim) {
    position: relative;
    display: block;
    min-height: 0;
    padding: calc(125vw + 28px) 0 44px;   /* 125vw = hauteur de la photo 4:5 */
    background: var(--nuit) url('../images/hero-rouen-mobile.webp') top center / 100% auto no-repeat;
  }
  .is-home .hero h1 {
    position: absolute; top: 36px; left: 5%;
    width: 52%; margin: 0;
    font-size: 30px; line-height: 1.12;
  }
  .is-home .hero p { margin-top: 0; font-size: 17px; }
}

/* ---------- Section Parcours : texte + portrait (réutilise .about-layout) ---------- */
.dark-section .about-layout { align-items: center; }
.link-light {
  display: inline-block; margin-top: 12px;
  color: var(--bleu-clair); font-weight: 700; text-decoration: none;
  border-bottom: 2px solid var(--bleu-clair); padding-bottom: 2px;
}
.link-light:hover { color: #fff; border-bottom-color: #fff; }
@media (min-width: 721px) {
  .dark-section .about-photo img { width: 300px; height: 300px; }
}

/* ---------- Bloc « Échangeons » : bouton + petit portrait ---------- */
.cta-row { display: inline-flex; align-items: center; gap: 20px; }
.cta-avatar {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
  border: 3px solid #fff; box-shadow: 0 6px 18px rgba(24,59,86,.18);
}
.page-content img.icon { border-radius: 0; }