/* ===========================================================================
   PAGE « FRÉDÉRIC LE GUEN » (/frederic-le-guen/, page WP 15386)
   Fichier : /wp-content/themes/infinite-child/css/page-fred.css
   Version : v1.2.0 — 07/10/2026 (v1.2.0 : les <br> et <p></p> ajoutés par le Builder sont neutralisés — la frise était écrasée
            · v1.1.0 : cartes « secteurs » en vert pâle de la charte, avec ombre)
   Enqueue : sites/excel-exercice.com/snippets/152-page-fred.php (cette page seule)
   Contenu : sites/excel-exercice.com/projets/page-fred/page-fred-contenu-v1.html
             (collé par Fred dans un module « Plain Text » du Builder)
   Maquette validée par Fred le 07/10/2026 à 15 h 44 :
             sites/excel-exercice.com/projets/page-fred/maquette-page-fred-v2.html

   Tout est rangé sous `.ee-fred` : rien ne déborde sur le reste du site.
   `html body .ee-fred …` : la feuille concaténée de Themify arrive en fin de
   <head> — on gagne par la spécificité, sans !important (même règle
   qu'articles.css).
   =========================================================================== */

/* La page : fond blanc, et le titre du gabarit masqué (la page porte son
   propre H1, dans l'en-tête). */
html body.page-id-15386{ background-color: #fff; }
html body.page-id-15386 .module-post-title{ display: none; }

html body .ee-fred{
  --f-ink: var(--c-ink, #0e1814);
  --f-text: var(--c-text, #36443e);
  --f-muted: var(--c-muted, #677571);
  --f-line: #e3e8e5;
  --f-green: var(--c-brand, #107C41);
  --f-green-dark: var(--c-brand-dark, #19683d);
  --f-soft: #f6f7f8;
  --f-mint: var(--c-brand-tint, #eaf4ee);
  font-family: var(--font-text, 'Inter', system-ui, sans-serif);
  color: var(--f-text);
}
html body .ee-fred *,
html body .ee-fred *::before,
html body .ee-fred *::after{ box-sizing: border-box; }
html body .ee-fred img{ max-width: 100%; height: auto; display: block; padding: 0; }
html body .ee-fred a{ color: var(--f-green-dark); }

/* v1.2.0 — CE QUE WORDPRESS AJOUTE AU CODE COLLÉ (constaté en ligne le 07/10).
   Le module du Builder transforme chaque retour à la ligne du HTML en <br>, et
   glisse des <p></p> vides. Dans une grille, chacun devient une case : dans la
   frise, le <br> prenait la 2e colonne et le texte tombait dans celle de
   l'année (80 px) — d'où la frise écrasée. Neutralisés ici, et pas dans le
   texte : Fred le retouchera dans le Builder, qui les remettra. */
html body .ee-fred :is(li, .f-hero, .f-badges, .f-cta, .f-stats, .f-two, .f-sectors, .f-books, .f-book, .f-final, .f-acts, .f-photo) > br,
html body .ee-fred p:empty{
  display: none;
}
html body .ee-fred p{ text-align: left; }

/* 1. En-tête */
html body .ee-fred .f-hero{
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center;
  padding: 40px 0 56px;
}
html body .ee-fred .f-eyebrow{
  font-size: 13px; font-weight: 600; color: var(--f-green);
  text-transform: uppercase; letter-spacing: .08em; margin: 0 0 14px;
}
html body .ee-fred h1{
  font-size: 52px; line-height: 1.05; letter-spacing: -.03em;
  color: var(--f-ink); font-weight: 800; margin: 0 0 20px; padding: 0;
}
html body .ee-fred .f-lede{ font-size: 20px; line-height: 1.55; margin: 0 0 24px; }
html body .ee-fred .f-lede strong{ color: var(--f-ink); font-weight: 600; }
html body .ee-fred .f-badges{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
html body .ee-fred .f-badge{
  font-size: 13.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px;
  background: var(--f-soft); color: var(--f-ink); border: 1px solid var(--f-line);
}
html body .ee-fred .f-badge.mvp{ background: var(--f-mint); border-color: #c6e3d1; color: var(--f-green-dark); }
html body .ee-fred .f-cta{ display: flex; flex-wrap: wrap; gap: 12px; }
html body .ee-fred a.f-btn{
  display: inline-block; text-decoration: none; font-weight: 600; font-size: 15px;
  padding: 13px 20px; border-radius: 10px;
}
html body .ee-fred a.f-btn.dark{ background: var(--f-ink); color: #fff; }
html body .ee-fred a.f-btn.dark:hover{ background: var(--f-green-dark); }
html body .ee-fred a.f-btn.light{ border: 1px solid var(--f-line); color: var(--f-ink); }
html body .ee-fred .f-photo{ position: relative; margin: 0; }
html body .ee-fred .f-photo img{ width: 100%; border-radius: 20px; box-shadow: 0 20px 50px rgba(14,24,20,.14); }
html body .ee-fred .f-photo figcaption{
  position: absolute; left: 18px; bottom: 18px; background: rgba(255,255,255,.94);
  border-radius: 12px; padding: 10px 14px; font-size: 13.5px; line-height: 1.35;
  color: var(--f-ink); box-shadow: 0 4px 14px rgba(0,0,0,.08); text-align: left;
}
html body .ee-fred .f-photo figcaption strong{ display: block; font-size: 15px; }

/* 2. Chiffres */
html body .ee-fred .f-stats{
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--f-line); border-bottom: 1px solid var(--f-line); background: #fcfcfb;
}
html body .ee-fred .f-stat{ padding: 30px 22px; border-left: 1px solid var(--f-line); }
html body .ee-fred .f-stat:first-child{ border-left: 0; }
html body .ee-fred .f-stat b{
  display: block; font-size: 34px; font-weight: 800; color: var(--f-ink);
  letter-spacing: -.02em; line-height: 1.1;
}
html body .ee-fred .f-stat span{ display: block; font-size: 14.5px; line-height: 1.4; color: var(--f-muted); margin-top: 6px; }

/* Sections */
html body .ee-fred .f-block{ padding: 72px 0 0; }
html body .ee-fred h2{
  font-size: 32px; line-height: 1.2; letter-spacing: -.02em; color: var(--f-ink);
  font-weight: 800; margin: 0 0 12px; padding: 0;
}
html body .ee-fred .f-intro{ font-size: 18px; line-height: 1.5; max-width: 720px; margin: 0 0 32px; }
html body .ee-fred .f-two{ display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 20px; }
html body .ee-fred .f-two p{ font-size: 17.5px; line-height: 1.55; margin: 0; }

/* 3. Secteurs */
html body .ee-fred .f-sectors{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* v1.1.0 — demande de Fred (07/10, 15 h 49) : un fond vert pâle et une ombre.
   Le vert pâle est celui de la charte, --c-brand-tint (#eaf4ee), et l'ombre
   est --shadow (00-tokens-charte.css § 7). L'icône passe sur fond blanc pour
   rester visible sur le vert. */
html body .ee-fred .f-sector{
  border: 1px solid #cfe6d8; border-radius: 14px; padding: 22px;
  background: var(--f-mint);
  box-shadow: var(--shadow, 0 6px 18px rgba(14,24,20,.10));
}
html body .ee-fred .f-ico{
  width: 42px; height: 42px; border-radius: 11px; background: #fff;
  display: grid; place-items: center; font-size: 20px; margin-bottom: 14px;
}
html body .ee-fred h3{ margin: 0 0 6px; padding: 0; font-size: 17px; line-height: 1.3; color: var(--f-ink); font-weight: 700; }
html body .ee-fred .f-sector p{ margin: 0; font-size: 15.5px; line-height: 1.5; }

/* 4. Frise */
html body .ee-fred ol.f-timeline{ list-style: none; margin: 0; padding: 0; position: relative; max-width: 820px; }
html body .ee-fred ol.f-timeline::before{
  content: ""; position: absolute; left: 39px; top: 8px; bottom: 8px; width: 2px; background: var(--f-line);
}
html body .ee-fred ol.f-timeline li{
  display: grid; grid-template-columns: 80px 1fr; gap: 22px;
  margin: 0; padding: 0 0 26px; position: relative; font-size: 17px;
}
html body .ee-fred ol.f-timeline li::marker{ content: ""; }
html body .ee-fred .f-y{
  justify-self: center; position: relative; z-index: 1; background: #fff;
  border: 2px solid var(--f-green); color: var(--f-green-dark); font-weight: 800; font-size: 14px;
  border-radius: 999px; padding: 5px 10px; height: fit-content; line-height: 1.3;
}
html body .ee-fred li.hi .f-y{ background: var(--f-green); color: #fff; }
html body .ee-fred .f-t{ font-size: 17px; line-height: 1.5; padding-top: 3px; }
html body .ee-fred .f-t strong{ color: var(--f-ink); }

/* 5. Livres */
html body .ee-fred .f-books{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
html body .ee-fred .f-book{
  display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: center;
  border: 1px solid var(--f-line); border-radius: 16px; padding: 22px; background: var(--f-soft);
}
html body .ee-fred .f-book img{ border-radius: 6px; box-shadow: 0 10px 24px rgba(14,24,20,.18); }
html body .ee-fred .f-book small{
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--f-muted);
}
html body .ee-fred .f-book h3{ margin: 6px 0 8px; font-size: 20px; line-height: 1.25; }
html body .ee-fred .f-book p{ margin: 0; font-size: 15.5px; line-height: 1.5; }

/* 6. Fin de page */
html body .ee-fred .f-final{
  margin: 80px 0 40px; border-radius: 20px; background: var(--f-ink); color: #fff;
  padding: 44px; display: flex; gap: 28px; align-items: center;
}
html body .ee-fred .f-final h2{ color: #fff; margin: 0 0 8px; font-size: 28px; }
html body .ee-fred .f-final p{ margin: 0; color: #c5d0ca; font-size: 17px; line-height: 1.5; }
html body .ee-fred .f-acts{ margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }
html body .ee-fred a.f-btn.ex{ background: #fff; color: var(--f-ink); }
html body .ee-fred a.f-btn.qz{ border: 1px solid rgba(255,255,255,.35); color: #fff; }

/* Tablette et téléphone */
@media (max-width: 900px){
  html body .ee-fred .f-hero{ grid-template-columns: 1fr; gap: 36px; padding-top: 24px; }
  html body .ee-fred h1{ font-size: 40px; }
  html body .ee-fred .f-stats{ grid-template-columns: 1fr 1fr; }
  html body .ee-fred .f-stat:nth-child(3){ border-left: 0; }
  html body .ee-fred .f-stat{ border-top: 1px solid var(--f-line); }
  html body .ee-fred .f-two,
  html body .ee-fred .f-books{ grid-template-columns: 1fr; }
  html body .ee-fred .f-sectors{ grid-template-columns: 1fr 1fr; }
  html body .ee-fred .f-final{ flex-direction: column; align-items: flex-start; }
  html body .ee-fred .f-acts{ margin-left: 0; }
}
@media (max-width: 560px){
  html body .ee-fred h1{ font-size: 34px; }
  html body .ee-fred .f-lede{ font-size: 18px; }
  html body .ee-fred .f-sectors{ grid-template-columns: 1fr; }
  html body .ee-fred .f-book{ grid-template-columns: 100px 1fr; gap: 16px; }
  html body .ee-fred .f-stat b{ font-size: 28px; }
  html body .ee-fred .f-final{ padding: 30px; }
}