/* da.css — direction artistique d'Entreprise et Marketing.
   Déclinée de la signature du thème flow-blog : cartes blanches bordées rounded-lg,
   ombre douce, un seul accent, la famille de vert du thème poussée vers l'émeraude.
   Light mode forcé. Aucune ombre dure, aucun rayon 0 ni 28px, aucune police serif. */

:root {
  /* Typographie : Unbounded pour les titres, Rubik pour le texte. */
  --f-titre: 'Unbounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-texte: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-graisse-titre: 600;
  --f-casse-kicker: none;
  --fm: 0.8125rem;
  --tm: 0.875rem;
  --t1: 1rem;
  --t2: 1.25rem;
  --t3: 1.5rem;
  --t4: 1.875rem;
  --t5: 2.25rem;
  --t6: 3rem;
  --t7: 3.75rem;
  --t-hero: clamp(2.2rem, 5vw, 3.4rem);

  /* Espacements */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4rem;

  /* Formes : celles du thème (rounded-lg partout, ombre douce). */
  --r-carte: 0.5rem;
  --r-bouton: 0.5rem;
  --r-image: 0.5rem;
  --largeur: 1200px;
  --ico-trait: 2;
  /* --header-h = le header collant entier, bandeau d’actualités compris
     (bandeau 38 px + barre de navigation 64 px + 1 px de bordure basse = 103 px).
     Le script du header remet cette valeur à la hauteur réelle mesurée. */
  --header-h: 103px;
  --bandeau-h: 38px;

  /* Couleurs : une seule famille, l'émeraude. */
  --c-fond: #ffffff;
  --c-fond-2: #f8fafc;
  --c-surface: #ffffff;
  --c-texte: #111827;
  --c-texte-2: #4b5563;
  --c-primaire: #047857;
  --c-sur-primaire: #ffffff;
  --c-secondaire: #059669;
  --c-sur-secondaire: #ffffff;
  --c-primaire-texte: #047857;
  --c-secondaire-texte: #065f46;
  --c-doux: #ecfdf5;
  --c-sur-doux: #065f46;
  --c-bord: #e5e7eb;
  --c-voile: #111827;
  --c-sur-voile: #ffffff;
  --c-ombre: rgba(17, 24, 39, 0.08);
  --o-carte: 0 1px 2px rgba(17, 24, 39, 0.06);
  --o-survol: 0 4px 12px rgba(17, 24, 39, 0.08);
  --carte-fond: #ffffff;
  --carte-encre: #111827;
  --carte-encre-2: #4b5563;
  --carte-lien: #047857;
  --carte-bord: 1px solid #e5e7eb;
  --btn-fond: #047857;
  --btn-texte: #ffffff;
  --btn-bord: 1px solid transparent;
  --btn-ombre: none;
  --btn-deco: none;
  --lien-couleur: #047857;
  --lien-deco: underline;
  --lien-epaisseur: 1px;
  --lien-fond: #ecfdf5;
  --lien-fond-encre: #065f46;
}

body {
  font-family: var(--f-texte);
  color: var(--c-texte);
  background: var(--c-fond);
  font-size: 1.05rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--f-titre);
  font-weight: var(--f-graisse-titre);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Kicker de rubrique au-dessus des titres. */
.kicker {
  font-family: var(--f-texte);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--c-primaire);
}

/* Conteneur du thème : 1200 px, marges px-4. */
.emp-conteneur { max-width: var(--largeur); margin-inline: auto; padding-inline: 1rem; }
.emp-lecture { max-width: 34em; }

/* Le hero occupe l'écran sous le header collant (bandeau compris) : sa hauteur
   est exactement la hauteur de l'écran moins le header, sans plafond, à toutes
   les largeurs. Le texte, la photo (flex-1 min-h-0) et la bande de logos se
   partagent cette hauteur, le bas du hero tombant au bas de l'écran. */
.emp-hero { height: calc(100svh - var(--header-h)); }
.emp-hero > .emp-hero-tete,
.emp-hero > .emp-hero-logos { flex: none; }

/* Deux formulations de la même promesse : la longue au bureau, la courte sous
   640 px, où les 80 caractères du titre ne tiendraient pas en trois lignes. Une
   seule est rendue à l’écran, l’autre est retirée du rendu (pas de doublon lu). */
.emp-h1-court { display: none; }

@media (max-width: 639px) {
  :root { --t-hero: clamp(1.6rem, 7vw, 2.2rem); }
  .emp-hero h1 { line-height: 1.15; }
  .emp-h1-long { display: none; }
  .emp-h1-court { display: inline; }
  /* Le hero fait exactement l’écran moins le header, bandeau compris (--header-h
     est la hauteur mesurée du header entier, bandeau dedans). Sous 640 px on
     resserre les respirations du texte, la légende et la bande de logos : la
     photo garde la place restante (flex-1 min-h-0) et le bas de la bande de
     logos tombe au bas de l’écran, sans vignette tronquée. */
  .emp-hero > .emp-hero-tete { padding-top: 1rem; }
  .emp-hero .emp-hero-cta { margin-top: 1.25rem; }
  .emp-hero > .emp-hero-photo { margin-top: 0.75rem; }
  .emp-hero > .emp-hero-logos {
    margin-top: auto;
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
  }
  /* Vignettes de logos à hauteur fixe, plus basses qu’au bureau. */
  .emp-hero-logos [data-defile] img { height: 28px; }
}

/* Une grille d'apparition qui porte une photo ne reste jamais invisible : si
   l'observateur n'a pas encore tourné (capture pleine page, JS lent, impression),
   l'image apparaîtrait comme une boîte blanche. Les blocs sans photo gardent le
   fondu ; les blocs à photo sont visibles d'emblée. */
.kv-js [data-apparait]:has(img) { opacity: 1; transform: none; transition: none; }

/* Les ancres ne passent pas sous le header collant. */
:target, [id] { scroll-margin-top: calc(var(--header-h) + var(--bandeau-h) + 1rem); }

/* Le bandeau du haut : collé en haut et aux deux bords, refermable. */
[data-bandeau] { position: relative; background: var(--c-voile); color: var(--c-sur-voile); }
[data-bandeau] a { color: var(--c-sur-voile); text-decoration: underline; text-underline-offset: 2px; }
[data-bandeau] .emp-bandeau-defile { display: flex; align-items: center; height: var(--bandeau-h); overflow: hidden; }
[data-bandeau] [data-fermer] {
  position: absolute; right: 0.25rem; top: 0; height: var(--bandeau-h);
  width: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--c-sur-voile); cursor: pointer;
}
[data-bandeau].emp-bandeau-ferme { display: none; }
/* Le bandeau est dans le header collant : il garde exactement --bandeau-h de haut
   (aucun padding vertical qui le ferait grandir et décalerait le hero), et son
   aplat sombre reste sombre dans les deux modes (--c-voile). */
header [data-bandeau] {
  position: relative;
  padding: 0;
  display: block;
  background: var(--c-voile);
  color: var(--c-sur-voile);
  font-weight: 400;
}
/* Refermé, il disparaît vraiment (l’attribut hidden ou la classe du site). */
header [data-bandeau][hidden] { display: none; }

/* Titres de section : titre centré + séparateur w-1/5 du thème. */
.emp-titre-section { font-size: var(--t4); }

/* Lisibilité : les corps de texte de page interne restent en colonne mesurée. */
.emp-texte p { margin-bottom: 1rem; }
.emp-texte ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1rem; }
.emp-texte h2 { font-size: var(--t3); margin: 1.75rem 0 0.75rem; }
.emp-texte h3 { font-size: var(--t2); margin: 1.25rem 0 0.5rem; }

/* Traitement constant des portraits : désaturation légère, contraste doux. */
.emp-portrait { filter: saturate(0.92) contrast(0.98); }

/* Les étapes photo : la colonne de gauche est une colonne (photo + panneau de
   l’étape active), pas une image collante qui recouvrirait le panneau. */
section[data-usine-bloc="etapes-photo"] img[data-etapes-visuel] { position: static; }

/* Survol des cartes du thème : forme inchangée, ombre qui monte. */
.emp-carte { transition: box-shadow 0.2s ease, border-color 0.2s ease; }
.emp-carte:hover { box-shadow: var(--o-survol); border-color: #a7f3d0; }

@media (prefers-reduced-motion: reduce) {
  .emp-carte { transition: none; }
}

/* Aucun débordement horizontal, aucune image plus large que sa colonne. */
img { max-width: 100%; }