/*
 * MAIN.CSS — Styles globaux Camier Avocat
 * Dépend de charte.css (chargé avant via functions.php)
 */

/* ════════════════════════════
   RESET & BASE
════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: var(--text-base);
}

body {
  font-family: var(--font-sans);
  background: var(--white);
  color: var(--text);
  line-height: var(--line-base);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }

/* ════════════════════════════
   TYPOGRAPHIE GLOBALE
════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--line-tight);
  color: var(--ink);
}

p { margin-bottom: 14px; }
p:last-child { margin-bottom: 0; }

/* ════════════════════════════
   ANIMATIONS
════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleInX {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .7; transform: scale(1.15); }
}

/* Classes d'animation hero (chargement initial) */
.a1 { animation: fadeUp .75s .05s ease both; }
.a2 { animation: fadeUp .75s .18s ease both; }
.a3 { animation: fadeUp .75s .30s ease both; }
.a4 { animation: fadeUp .75s .42s ease both; }
.a5 { animation: fadeUp .75s .55s ease both; }

/* Scroll reveal — état initial */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.rd1 { transition-delay: .08s; }
.rd2 { transition-delay: .18s; }
.rd3 { transition-delay: .28s; }
.rd4 { transition-delay: .38s; }

/* ════════════════════════════
   BOUTONS — SYSTÈME COMPLET
════════════════════════════ */

/* Primaire jaune */
.btn-y {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 38px;
  border-radius: var(--radius-btn);
  background: var(--y);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .05em;
  transition: var(--transition);
  cursor: pointer;
  border: none;
}
.btn-y:hover {
  background: var(--y-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-y);
}

/* Outline blanc (sur fond sombre) */
.btn-outline-w {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 38px;
  border-radius: var(--radius-btn);
  border: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  font-weight: 300;
  transition: var(--transition);
  background: transparent;
  cursor: pointer;
}
.btn-outline-w:hover {
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}

/* Plein marine (sur fond jaune) */
.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 42px;
  border-radius: var(--radius-btn);
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .05em;
  transition: var(--transition);
  cursor: pointer;
  border: none;
}
.btn-dark:hover {
  background: var(--ink-soft);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(26, 31, 46, .22);
}

/* Ghost marine (sur fond jaune) */
.btn-ghost-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 38px;
  border-radius: var(--radius-btn);
  border: 1.5px solid rgba(26, 31, 46, .32);
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  transition: var(--transition);
  background: transparent;
  cursor: pointer;
}
.btn-ghost-dark:hover {
  border-color: var(--ink);
  background: rgba(26, 31, 46, .06);
}

/* Lien texte souligné */
.btn-txt {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1.5px solid var(--y-deep);
  padding-bottom: 2px;
  transition: gap .2s, color .2s;
}
.btn-txt:hover { color: var(--y-deep); gap: 12px; }
.btn-txt::after { content: '→'; }

/* Header CTA téléphone */
.hdr-tel {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 40px;
  border: 1px solid rgba(245, 216, 74, .35);
  color: var(--y);
  font-size: 13px;
  font-weight: 500;
  transition: var(--transition);
}
.hdr-tel:hover {
  background: rgba(245, 216, 74, .1);
  border-color: var(--y);
}

/* Header CTA RDV */
.hdr-rdv {
  padding: 9px 22px;
  border-radius: 40px;
  background: var(--y);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  transition: var(--transition);
}
.hdr-rdv:hover {
  background: var(--y-deep);
  box-shadow: 0 6px 22px rgba(245, 216, 74, .45);
  transform: translateY(-1px);
}

/* ════════════════════════════
   COMPOSANTS RÉCURRENTS
════════════════════════════ */

/* Eyebrow de section */
.sec-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.sec-eyebrow-bar {
  width: 28px;
  height: 2px;
  background: var(--y-deep);
  flex-shrink: 0;
}
.sec-eyebrow-txt {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--y-deep);
}

/* Titre de section H2 */
.sec-h2 {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 52px;
  max-width: 580px;
}
.sec-h2 em {
  font-style: italic;
  color: var(--ink-soft);
  opacity: .65;
}

/* Version claire sur fond sombre */
.sec-h2--light { color: #fff; }
.sec-h2--light em { color: var(--y); opacity: 1; }

/* Citation encadrée */
.blockquote-y {
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.4vw, 26px);
  font-style: italic;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.5;
  padding-left: 24px;
  border-left: 3px solid var(--y-deep);
  margin: 0 0 28px;
}

/* Encart info fond jaune pâle */
.info-band {
  background: var(--y-pale);
  border-left: 3px solid var(--y-deep);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 22px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.65;
}

/* Checklist réassurance */
.check-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-bottom: 48px;
}
.check-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.check-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(26, 31, 46, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0;
}

/* ════════════════════════════
   LAYOUT UTILITAIRES
════════════════════════════ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 72px;
}

@media (max-width: 860px) {
  .container { padding: 0 28px; }
}
@media (max-width: 600px) {
  .container { padding: 0 20px; }
}

/* ════════════════════════════
   WORDPRESS GUTENBERG RESET
   (évite que les styles WP
   cassent notre mise en page)
════════════════════════════ */
.wp-block-group { margin: 0; padding: 0; }
.wp-block-paragraph { margin-bottom: 14px; }
.wp-block-heading { margin-bottom: 16px; }

/* Retire les marges WP par défaut sur les sections */
.entry-content > * + * { margin-top: 0; }