/* ============================================================
   CLARTÉ — Feuille de style principale
   ------------------------------------------------------------
   Sommaire :
   1. Tokens (couleurs, typo, espacements)
   2. Reset & base
   3. Typographie
   4. Layout (header, footer, container, sections)
   5. Composants (boutons, cartes, badges, accordéon FAQ...)
   6. Motif signature (cercle / rayons / bulles)
   7. Utilitaires & animations
   8. Responsive
   ============================================================ */

/* -------------------- 1. TOKENS -------------------- */
:root {
  /* Couleurs officielles de la charte Clarté */
  --blue: #015673;          /* Bleu Clarté — couleur principale */
  --blue-dark: #013a4d;     /* dérivé plus sombre, pour dégradés/hover */
  --blue-soft: #9dd2e4;     /* Bleu Doux — secondaire */
  --blue-soft-15: rgba(157, 210, 228, 0.15);
  --yellow: #f8b84e;        /* Jaune Lumière — accent, toujours discret */
  --white: #ffffff;
  --cream: #fbfaf7;         /* blanc cassé très léger pour alterner les sections */
  --ink: #0b2530;           /* quasi-noir bleuté — texte, plus doux que #000 pur */
  --ink-soft: #4a6570;      /* texte secondaire / gris-bleu */
  --border: #e3ecef;

  /* Typographie */
  --font-display: "Quicksand", "Poppins", "Nunito Sans", sans-serif;
  --font-body: "Lato", "Nunito Sans", "Poppins", sans-serif;

  /* Rayons & ombres — cohérents avec l'esprit "cercle / rondeur" de la charte */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-full: 999px;
  --shadow-sm: 0 2px 10px rgba(1, 86, 115, 0.06);
  --shadow-md: 0 12px 32px rgba(1, 86, 115, 0.10);
  --shadow-lg: 0 20px 60px rgba(1, 86, 115, 0.14);

  /* Espacement vertical des sections */
  --section-pad: clamp(64px, 9vw, 120px);
}

/* -------------------- 2. RESET & BASE -------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

/* Focus clavier toujours visible (accessibilité) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -------------------- 3. TYPOGRAPHIE -------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--blue);
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); font-weight: 600; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p { margin: 0 0 1em; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-soft-15);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  margin-bottom: 18px;
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 60ch;
}

.section-head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.section-head.left { margin: 0 0 40px; text-align: left; }

strong { color: var(--blue); }

/* -------------------- 4. LAYOUT -------------------- */
.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: var(--section-pad) 0; }
.bg-cream { background: var(--cream); }
.bg-blue {
  background: linear-gradient(160deg, var(--blue) 0%, var(--blue-dark) 100%);
  color: var(--white);
}
.bg-blue h1, .bg-blue h2, .bg-blue h3 { color: var(--white); }
.bg-blue .lede { color: rgba(255,255,255,0.85); }

/* Une carte blanche posée dans une section bleue doit garder un texte
   normal (sombre), pas le blanc hérité de la section : sans cette
   règle, le texte devient invisible (blanc sur fond blanc). */
.bg-blue .card { color: var(--ink); }
.bg-blue .card h1, .bg-blue .card h2, .bg-blue .card h3 { color: var(--blue); }

/* --- Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--blue);
}
.brand img { width: 42px; height: 42px; }

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  padding: 10px 16px;
  border-radius: var(--radius-full);
  transition: background 0.2s ease, color 0.2s ease;
}
.main-nav a:hover { background: var(--blue-soft-15); color: var(--blue); }
.main-nav a.active { background: var(--blue); color: var(--white); }

.header-actions { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--blue);
  position: relative;
  transition: background 0.2s ease;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--blue);
  transition: transform 0.25s ease;
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* --- Footer --- */
.site-footer {
  background: var(--blue-dark);
  color: rgba(255,255,255,0.82);
  padding: 64px 0 28px;
  font-size: 0.95rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--white);
  margin-bottom: 14px;
}
.footer-brand img { width: 36px; height: 36px; }
.footer-col h4 {
  color: var(--white);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.footer-col ul li { margin-bottom: 10px; }
.footer-col a:hover { color: var(--yellow); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 22px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
}

/* -------------------- 5. COMPOSANTS -------------------- */

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--blue);
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { background: var(--blue-dark); box-shadow: var(--shadow-lg); }
.btn-ghost {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}
.btn-ghost:hover { background: rgba(255,255,255,0.12); }
.btn-outline {
  background: transparent;
  border-color: var(--blue);
  color: var(--blue);
}
.btn-outline:hover { background: var(--blue); color: var(--white); }
.btn-sm { padding: 10px 20px; font-size: 0.88rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Cartes */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }

.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Liste à puce ronde (cohérente avec le motif "cercle") */
.dot-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
}
.dot-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--yellow);
}

/* Badges / tags */
.tag {
  display: inline-flex;
  align-items: center;
  background: var(--blue-soft-15);
  color: var(--blue);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 10px 18px;
  border-radius: var(--radius-full);
}

/* Bandeau confiance */
.trust-bar {
  background: var(--cream);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.trust-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.trust-bar .trust-note {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-weight: 600;
}
.trust-bar .trust-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Bloc citation / témoignage */
.quote-card {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 48px;
}
.quote-card .quote-mark {
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--blue-soft);
  line-height: 1;
  margin-bottom: -10px;
}
.quote-card p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 600;
  color: var(--blue);
}

/* Comparatif avant / après */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.compare-col {
  border-radius: var(--radius-lg);
  padding: 36px;
}
.compare-col.before {
  background: var(--cream);
  border: 1px dashed var(--border);
}
.compare-col.after {
  background: var(--white);
  border: 2px solid var(--blue-soft);
  box-shadow: var(--shadow-md);
}
.compare-col h3 { display: flex; align-items: center; gap: 10px; }
.compare-col ul li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  color: var(--ink-soft);
}
.compare-col ul li:last-child { border-bottom: none; }
.compare-col.after ul li { color: var(--ink); }

/* Placeholder image (zone à remplacer par vos futures photos) */
.photo-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--blue-soft-15), var(--blue-soft));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.photo-placeholder span {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--blue);
  font-size: 0.9rem;
  text-align: center;
  padding: 0 20px;
  opacity: 0.7;
}

/* Accordéon FAQ */
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-question {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  padding: 24px 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--blue);
}
.faq-question .icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blue-soft-15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background 0.3s ease;
}
.faq-question[aria-expanded="true"] .icon {
  background: var(--yellow);
  transform: rotate(135deg);
}
.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}
.faq-answer-inner {
  padding: 0 4px 26px;
  color: var(--ink-soft);
}
.faq-answer-inner p { margin-bottom: 0.9em; }

/* Formulaires */
.form-field { margin-bottom: 20px; }
.form-field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--blue);
  margin-bottom: 8px;
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  transition: border-color 0.2s ease;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--blue-soft);
  outline: none;
}
.form-field textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: 0.85rem; color: var(--ink-soft); }
.form-success {
  display: none;
  background: var(--blue-soft-15);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  color: var(--blue);
  font-weight: 600;
  margin-top: 20px;
}
.form-success.visible { display: block; }

.form-error {
  display: none;
  background: rgba(248, 184, 78, 0.18);
  border: 1px solid var(--yellow);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  color: var(--ink);
  font-weight: 600;
  margin-top: 20px;
}
.form-error.visible { display: block; }

/* -------------------- 6. MOTIF SIGNATURE : cercle / rayons / bulles -------------------- */
/*
  Élément graphique central du site : un cercle relié à de petites bulles,
  qui illustre littéralement "les ponts entre les personnes" évoqués par la
  charte (cercle = interconnexion, rayons = lumière/compréhension).
  Décliné en grand format animé dans le hero, et en petit format statique
  comme séparateur / puce d'icône dans le reste du site.
*/
.constellation {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.constellation svg { width: 100%; height: 100%; }
.constellation .ray {
  transform-origin: center;
  animation: spin 60s linear infinite;
}
.constellation .core {
  animation: pulse 4s ease-in-out infinite;
  transform-origin: center;
}
.constellation .bubble {
  animation: float 6s ease-in-out infinite;
  transform-origin: center;
}
.constellation .bubble:nth-child(2) { animation-delay: -1s; }
.constellation .bubble:nth-child(3) { animation-delay: -2.4s; }
.constellation .bubble:nth-child(4) { animation-delay: -3.6s; }
.constellation .bubble:nth-child(5) { animation-delay: -5s; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Petit motif décoratif réutilisable (puce ronde à rayons) devant un titre de section */
.mini-mark {
  display: inline-flex;
  width: 34px;
  height: 34px;
  margin-right: 10px;
}

/* -------------------- 7. UTILITAIRES & ANIMATIONS -------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.center { text-align: center; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-sm { gap: 12px; }
.gap-md { gap: 20px; }
.mt-lg { margin-top: 48px; }

.hero-cta-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; }

.pill-list { display: flex; flex-wrap: wrap; gap: 12px; }

/* Grille "pôles du réseau" en cercle */
.poles-wrap {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}
.poles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pole-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 18px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pole-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pole-item .pole-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--blue-soft-15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.pole-item h4 {
  font-family: var(--font-display);
  color: var(--blue);
  font-size: 0.98rem;
  margin-bottom: 4px;
}
.pole-item p { font-size: 0.86rem; color: var(--ink-soft); margin: 0; }

/* -------------------- 7bis. PHOTOS & VIDÉOS -------------------- */
/*
  Traitement photo unifié : la photothèque fournie est volontairement
  variée (couleurs, ambiances), donc chaque image passe par un même
  gabarit (coins arrondis cohérents avec le motif "cercle", ombre douce)
  pour que l'ensemble reste homogène avec la charte.
*/
.photo-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-frame.ratio-square { aspect-ratio: 1 / 1; }
.photo-frame.ratio-portrait { aspect-ratio: 3 / 4; }
.photo-frame.ratio-landscape { aspect-ratio: 4 / 3; }
.photo-frame.ratio-wide { aspect-ratio: 16 / 9; }

/* Sur fond bleu foncé, on ajoute un voile bleu pour que les photos
   (aux couleurs parfois très variées) restent cohérentes avec la marque */
.photo-frame.on-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(1, 58, 77, 0.55), rgba(1, 86, 115, 0.25));
  mix-blend-mode: multiply;
}
.photo-frame.on-dark img { filter: saturate(0.9); }

.photo-caption {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 10px;
  font-style: italic;
}

/* Hero de l'accueil */
.hero-accueil {
  position: relative;
}

/* Bande vidéo d'ambiance (témoignage) */
.ambient-video-section {
  position: relative;
  overflow: hidden;
  color: var(--white);
}
.ambient-video-section video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.ambient-video-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(1, 58, 77, 0.88), rgba(1, 86, 115, 0.72));
  z-index: 1;
}
.ambient-video-section .container { position: relative; z-index: 2; }

/* Vidéo intégrée dans une carte (animation ampoules) */
.card-video {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--cream);
  aspect-ratio: 16/10;
}
.card-video video { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (prefers-reduced-motion: reduce) {
  .ambient-video-section video, .card-video video { display: none; }
  .ambient-video-section::before { background: linear-gradient(160deg, var(--blue-dark), var(--blue)); }
}

/* -------------------- 8. RESPONSIVE -------------------- */
@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 780px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .site-header.nav-open .main-nav {
    display: flex;
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 24px 24px;
    box-shadow: var(--shadow-md);
    gap: 6px;
  }
  .site-header.nav-open .main-nav a { padding: 14px 16px; }
  .header-actions .btn span.long { display: none; }
  .compare-grid { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; }
  .poles-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .poles-grid { grid-template-columns: 1fr 1fr; }
  h1 { font-size: 2rem; }
}