/* ==========================================================================
   OFFICEVIBE — LAYOUTS DE SECTIONS
   Couche STRICTEMENT ADDITIVE : n'utilise que des tokens de tokens.css et
   les composants de components.css. Aucune valeur brute nouvelle.

   Provenance de chaque pattern : voir ../../PATTERNS.md
     [ATTESTÉ]   observé sur les captures/vidéo Refero ou décrit dans la spec
     [EXTENSION] non attesté — composé à partir des règles documentées
   ========================================================================== */

/* ==========================================================================
   A. CHROME & NAVIGATION
   ========================================================================== */

/* Barre d'annonce — [EXTENSION] */
.announce {
  background: var(--color-ink-navy);
  color: var(--color-paper-white);
  font-size: var(--text-body-sm);
}
.announce__inner {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-12); flex-wrap: wrap;
  padding-block: 10px;
  text-align: center;
}
.announce a { color: var(--color-lavender-mist); text-decoration: underline; text-underline-offset: 3px; }

/* Panneau méga-menu — [EXTENSION] */
.mega {
  background: var(--surface-1);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-card);
  padding: var(--space-32);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-32);
}
.mega__col h4 {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-stone);
  margin: 0 0 var(--space-16);
}
.mega__item {
  display: flex; gap: var(--space-12);
  padding: var(--space-8); margin-inline: calc(var(--space-8) * -1);
  border-radius: var(--radius-cards);
  text-decoration: none; color: inherit;
  transition: background-color var(--motion-base) var(--ease-standard);
}
.mega__item:hover { background: var(--color-warm-canvas); }
.mega__item svg { flex: 0 0 20px; margin-top: 2px; color: var(--color-electric-cobalt); }
.mega__item b { display: block; font-size: var(--text-body-sm); font-weight: var(--weight-medium); }
.mega__item span { font-size: var(--text-caption); color: var(--color-graphite); line-height: 1.45; }
.mega__promo { background: var(--color-warm-canvas); border-radius: var(--radius-cards); padding: var(--space-24); }
@media (max-width: 900px) { .mega { grid-template-columns: minmax(0, 1fr); } }

/* Sous-navigation d'ancres — [EXTENSION] */
.anchornav { border-block: var(--border-hairline); background: var(--surface-0); }
.anchornav__inner { display: flex; gap: var(--space-8); overflow-x: auto; scrollbar-width: none; }
.anchornav__inner::-webkit-scrollbar { display: none; }
.anchornav a {
  white-space: nowrap;
  padding: var(--space-16) var(--space-12);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-graphite);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.anchornav a[aria-current="true"] { color: var(--color-electric-cobalt); border-bottom-color: var(--color-electric-cobalt); }

/* Fil d'Ariane — [EXTENSION] */
.breadcrumb { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; font-size: var(--text-body-sm); }
.breadcrumb a { color: var(--color-graphite); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-electric-cobalt); }
.breadcrumb span[aria-current] { color: var(--color-charcoal); }
.breadcrumb svg { color: var(--color-smoke); }

/* ==========================================================================
   B. HEROES
   ========================================================================== */

/* Hero centré — [EXTENSION] */
.hero-centered {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-24); text-align: center;
  max-width: 46rem; margin-inline: auto;
}
.hero-centered .lead { text-align: center; max-width: 60ch; }

/* En-tête de page interne — [EXTENSION] */
.page-header { display: flex; flex-direction: column; gap: var(--space-16); max-width: 44rem; }

/* Hero avec formulaire — [EXTENSION] */
.hero-form { background: var(--surface-1); border-radius: var(--radius-images); padding: var(--space-40); box-shadow: var(--shadow-card); }

/* ==========================================================================
   C. PREUVE SOCIALE
   ========================================================================== */

/* Mur de logos — [EXTENSION] */
.logo-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--border-hairline); border-left: var(--border-hairline); }
.logo-wall > span {
  display: grid; place-items: center;
  padding: var(--space-32) var(--space-16);
  border-right: var(--border-hairline); border-bottom: var(--border-hairline);
  font-family: var(--font-geometric);
  font-size: var(--text-subheading);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--color-charcoal);
  opacity: .85;
}
@media (max-width: 900px) { .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Citation unique en grand — [EXTENSION] */
.bigquote { max-width: 52rem; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-24); }
.bigquote blockquote {
  margin: 0;
  font-family: var(--font-geometric);
  font-size: clamp(24px, 3.2vw, var(--text-heading));
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--color-ink-navy);
}
.bigquote figcaption { display: flex; align-items: center; gap: var(--space-12); font-size: var(--text-body-sm); color: var(--color-graphite); }

/* ==========================================================================
   D. FONCTIONNALITÉS
   ========================================================================== */

/* Splits alternés — [EXTENSION] : répétition du pattern documenté */
.alternating { display: flex; flex-direction: column; gap: var(--space-80); }
.alternating > .split:nth-child(even) > *:first-child { order: 2; }
.alternating > .split:nth-child(even) > *:last-child { order: 1; }
@media (max-width: 900px) {
  .alternating { gap: var(--space-48); }
  .alternating > .split:nth-child(even) > *:first-child,
  .alternating > .split:nth-child(even) > *:last-child { order: 0; }
}

/* Grille bento — [EXTENSION] */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--element-gap); }
.bento > .bento__wide { grid-column: span 2; }
.bento > .bento__tall { grid-row: span 2; }
.bento .card { display: flex; flex-direction: column; gap: var(--space-12); justify-content: flex-start; }
/* Un badge n'a pas de largeur propre : sans cela il s'étire dans la colonne flex */
.bento .card > .badge { align-self: flex-start; }
/* Les maquettes du bento sont bornées en hauteur : l'aspect-ratio seul produit
   des aplats démesurés sur la cellule large. */
.bento .ph { aspect-ratio: auto; min-height: 150px; }
.bento .bento__tall .ph { min-height: 200px; }
@media (max-width: 900px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento > .bento__wide, .bento > .bento__tall { grid-column: auto; grid-row: auto; }
}

/* Grille d'icônes — [EXTENSION] */
.icongrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-40) var(--element-gap); }
.icongrid__item { display: flex; flex-direction: column; gap: var(--space-12); }
.icon-tile {
  width: 44px; height: 44px;
  border-radius: var(--radius-cards);
  background: var(--color-lavender-mist);
  color: var(--color-electric-cobalt);
  display: grid; place-items: center;
}
.icon-tile--ink { background: var(--color-ink-navy); color: var(--color-paper-white); }
@media (max-width: 900px) { .icongrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .icongrid { grid-template-columns: minmax(0, 1fr); } }

/* Liste de fonctionnalités en 2 colonnes — [EXTENSION] */
.featurelist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-32) var(--space-48); }
.featurelist__item { display: flex; flex-direction: column; gap: var(--space-8); padding-top: var(--space-20); border-top: var(--border-hairline); }
@media (max-width: 620px) { .featurelist { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   E. STORYTELLING
   ========================================================================== */

/* Timeline verticale — [EXTENSION] */
.timeline { display: flex; flex-direction: column; gap: var(--space-32); position: relative; padding-left: var(--space-40); }
.timeline::before {
  content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px;
  width: 2px; background: var(--color-cream-border);
}
.timeline__item { position: relative; display: flex; flex-direction: column; gap: var(--space-8); }
.timeline__item::before {
  content: ""; position: absolute; left: calc(var(--space-40) * -1 + 5px); top: 5px;
  width: 14px; height: 14px; border-radius: var(--radius-buttons);
  background: var(--color-paper-white); border: 2px solid var(--color-electric-cobalt);
}
.timeline__year { font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-stone); }

/* Bloc éditorial long — [EXTENSION] */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--space-24); }
.prose h3 { font-family: var(--font-geometric); font-size: var(--text-heading-sm); line-height: var(--lh-heading-sm); letter-spacing: var(--ls-heading-sm); color: var(--color-ink-navy); font-weight: var(--weight-regular); margin-bottom: 0; }
.prose p { font-size: var(--text-body); line-height: var(--lh-body); margin: 0; }
.prose blockquote {
  margin: 0; padding-left: var(--space-24);
  border-left: 2px solid var(--color-electric-cobalt);
  font-family: var(--font-display); font-style: italic;
  font-size: var(--text-subheading); line-height: 1.5; color: var(--color-ink-navy);
}
.prose ul { margin: 0; padding-left: var(--space-20); display: flex; flex-direction: column; gap: var(--space-8); }

/* Grille d'équipe — [EXTENSION] */
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--element-gap); }
.team__card { display: flex; flex-direction: column; gap: var(--space-12); }
/* Portrait = placeholder géométrique : l'imagery documentée exclut la photo */
.team__avatar { aspect-ratio: 1; border-radius: var(--radius-cards); display: grid; place-items: center; font-family: var(--font-geometric); font-size: var(--text-heading); color: var(--color-ink-navy); }
@media (max-width: 900px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   F. TÉMOIGNAGES & CAS CLIENTS
   ========================================================================== */

/* Témoignage mis en avant — [EXTENSION] */
.testimonial-feature { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-48); align-items: center; }
.testimonial-feature__metrics { display: flex; flex-direction: column; gap: var(--space-24); }
@media (max-width: 900px) { .testimonial-feature { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); } }

/* Carte d'étude de cas — [EXTENSION] */
.case-card { display: flex; flex-direction: column; gap: var(--space-16); text-decoration: none; color: inherit; }
.case-card__cover { aspect-ratio: 16 / 10; border-radius: var(--radius-images); }
.case-card__logo { font-family: var(--font-geometric); font-weight: var(--weight-bold); font-size: var(--text-subheading); letter-spacing: -0.02em; }

/* ==========================================================================
   G. TARIFICATION
   ========================================================================== */

/* Paliers — [EXTENSION] */
.pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--element-gap); align-items: start; }
.tier { display: flex; flex-direction: column; gap: var(--space-20); border-radius: var(--radius-cards); padding: var(--card-padding); background: var(--surface-1); border: var(--border-hairline); }
.tier--accent { border: var(--border-accent); }
.tier--ink { background: var(--surface-2); border-color: var(--color-ink-navy); color: var(--color-paper-white); }
.tier--ink .tier__desc, .tier--ink .tier__period { color: var(--color-lavender-mist); }
.tier--ink .checklist svg { color: var(--color-lavender-mist); }
.tier__name { font-family: var(--font-geometric); font-size: var(--text-subheading); letter-spacing: var(--ls-subheading); margin: 0; font-weight: var(--weight-regular); }
.tier__price { display: flex; align-items: baseline; gap: var(--space-8); }
.tier__amount { font-family: var(--font-geometric); font-size: var(--text-heading-lg); line-height: 1; letter-spacing: var(--ls-heading-lg); }
.tier__period { font-size: var(--text-body-sm); color: var(--color-graphite); }
.tier__desc { font-size: var(--text-body-sm); line-height: var(--lh-body-sm); color: var(--color-graphite); margin: 0; }
.tier .btn { width: 100%; }
@media (max-width: 900px) { .pricing { grid-template-columns: minmax(0, 1fr); } }

/* Matrice de comparaison — [EXTENSION] */
.matrix-wrap { overflow-x: auto; }
.matrix { width: 100%; border-collapse: collapse; min-width: 640px; }
.matrix th, .matrix td { text-align: left; padding: var(--space-16) var(--space-12); border-bottom: var(--border-hairline); font-size: var(--text-body-sm); }
.matrix thead th { font-weight: var(--weight-medium); color: var(--color-ink-navy); font-size: var(--text-body); }
.matrix thead th:not(:first-child) { text-align: center; }
/* Un montant textuel ("Sur devis") ne doit pas peser autant qu'un chiffre */
.tier__amount--text { font-size: var(--text-heading-sm); letter-spacing: var(--ls-heading-sm); }
.matrix tbody th { font-weight: var(--weight-regular); color: var(--color-charcoal); }
.matrix td { text-align: center; color: var(--color-graphite); }
.matrix td svg { color: var(--color-electric-cobalt); }
.matrix caption { text-align: left; font-size: var(--text-caption); color: var(--color-stone); padding-bottom: var(--space-12); }
.matrix tbody tr:hover { background: var(--color-warm-canvas); }

/* ==========================================================================
   H. CONVERSION
   ========================================================================== */

/* CTA en ligne dans le flux — [EXTENSION] */
.cta-inline {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-32); flex-wrap: wrap;
  background: var(--color-warm-canvas);
  border: var(--border-hairline);
  border-radius: var(--radius-cards);
  padding: var(--space-32);
}

/* Capture email — [EXTENSION] */
.newsletter { display: flex; gap: var(--space-12); flex-wrap: wrap; }
.newsletter .input { flex: 1 1 16rem; }

/* ==========================================================================
   I. CONTENU & RESSOURCES
   ========================================================================== */

/* Liste d'articles en lignes — [EXTENSION] */
.postlist { border-top: var(--border-hairline); }
.postlist__row {
  display: grid; grid-template-columns: 8rem minmax(0, 1fr) 10rem;
  gap: var(--space-24); align-items: center;
  padding-block: var(--space-24);
  border-bottom: var(--border-hairline);
  text-decoration: none; color: inherit;
}
.postlist__row:hover .postlist__title { color: var(--color-electric-cobalt); }
.postlist__title { font-size: var(--text-subheading); font-family: var(--font-geometric); font-weight: var(--weight-regular); letter-spacing: var(--ls-subheading); color: var(--color-ink-navy); margin: 0; transition: color var(--motion-base) var(--ease-standard); }
@media (max-width: 900px) { .postlist__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } }

/* Article à la une — [EXTENSION] */
.featured { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--space-48); align-items: center; }
@media (max-width: 900px) { .featured { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); } }

/* Pagination — [EXTENSION] */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-8); }
.pagination a {
  min-width: 40px; height: 40px; padding-inline: var(--space-12);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-buttons);
  font-size: var(--text-body-sm); color: var(--color-graphite); text-decoration: none;
  transition: background-color var(--motion-base) var(--ease-standard);
}
.pagination a:hover { background: var(--color-warm-canvas); }
.pagination a[aria-current="page"] { background: var(--color-electric-cobalt); color: var(--color-paper-white); }

/* ==========================================================================
   J. FAQ EN GRILLE — [EXTENSION]
   ========================================================================== */
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-32) var(--space-48); }
.faq-grid__item { display: flex; flex-direction: column; gap: var(--space-8); }
.faq-grid__q { font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--color-charcoal); margin: 0; }
@media (max-width: 620px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   K. PIED & UTILITAIRES
   ========================================================================== */

/* Footer minimal — [EXTENSION] */
.footer-min { background: var(--surface-0); border-top: var(--border-hairline); padding-block: var(--space-32); }
.footer-min__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); flex-wrap: wrap; font-size: var(--text-body-sm); color: var(--color-graphite); }
.footer-min__links { display: flex; gap: var(--space-24); flex-wrap: wrap; }
.footer-min__links a { color: var(--color-graphite); text-decoration: none; }
.footer-min__links a:hover { color: var(--color-electric-cobalt); }

/* Pastille de consentement bas-gauche — [OBSERVÉ] sur les captures Refero */
.cookie-dot {
  width: 44px; height: 44px; border-radius: var(--radius-buttons);
  background: var(--surface-1); border: var(--border-hairline);
  box-shadow: var(--shadow-card);
  display: grid; place-items: center;
  color: var(--color-electric-cobalt);
  cursor: pointer;
}

/* État vide / 404 — [EXTENSION] */
.state { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); text-align: center; max-width: 34rem; margin-inline: auto; padding-block: var(--space-64); }
.state__code { font-family: var(--font-geometric); font-size: clamp(56px, 9vw, 96px); line-height: 1; letter-spacing: var(--ls-display-lg); color: var(--color-ink-navy); }

/* ==========================================================================
   L. PLACEHOLDERS MÉDIA
   L'imagery documentée exclut photo et banque d'images : les médias de
   démonstration sont des aplats géométriques pris dans la palette.
   ========================================================================== */
.ph { border-radius: var(--radius-images); display: grid; place-items: center; }
.ph--canvas   { background: var(--color-warm-canvas); border: var(--border-hairline); }
.ph--lavender { background: var(--color-lavender-mist); }
.ph--ink      { background: var(--color-ink-navy); }
.ph--cobalt   { background: var(--color-electric-cobalt); }
.ph--gradient { background: var(--gradient-blob); }
.ph--cream    { background: var(--color-cream-border); }
.ph__label { font-size: var(--text-caption); color: var(--color-stone); }
.ph--ink .ph__label, .ph--cobalt .ph__label, .ph--gradient .ph__label { color: rgba(255,255,255,.75); }
.ph--16-10 { aspect-ratio: 16 / 10; }
.ph--4-3   { aspect-ratio: 4 / 3; }
.ph--1-1   { aspect-ratio: 1; }