/* =================================================================
   GLOBAL.CSS — CLIC Digital
   Source unique de vérité pour tout le thème generatepress-child
   ─────────────────────────────────────────────────────────────────
   Ordre de lecture :
     1. Surcharges framework (GeneratePress)
     2. Variables CSS (:root)
     3. Polices (@font-face)
     4. Typographie de base
     5. Mise en page globale
     6. Accessibilité (focus-visible)
     7. Boutons
     8. Composants système de design
     9. Section témoignages (partial global)
    10. Styles non utilisés / à vérifier (commentés)
================================================================= */


/* ================================================================
   1. SURCHARGES FRAMEWORK — GeneratePress
   Suppression des contraintes de largeur et de padding
   pour permettre des sections en pleine largeur
================================================================ */

html {
  scroll-behavior: smooth;
}

.grid-container {
  max-width: 100% !important;
  padding-left: 0;
  padding-right: 0;
}

.header-container {
  max-width: 100% !important;
  padding-left: 0;
  padding-right: 0;
}


/* ================================================================
   2. VARIABLES CSS — SOURCE DE VÉRITÉ
   ⚠️ Ne jamais redéfinir ces valeurs dans les CSS de page.
      Modifier ici pour impacter tout le site.
================================================================ */

:root {

  /* ── 2.1 PALETTE ─────────────────────────────────────── */

  --couleur-fond:              #f5f5f5;  /* Fond clair de section */
  --couleur-accentuation:      #1AAB77;  /* Vert principal — CTA, icônes, accents */
  --couleur-principale:        #1A2E4A;  /* Bleu marine — header, footer, zones sombres */
  --couleur-carte:             #FFFFFF;  /* Fond blanc — cartes, panneaux */
  --couleur-titre:             #0a0a0a;  /* Titres sur fond clair */
  --couleur-texte:             #333333;  /* Corps de texte */
  --couleur-titre-secondaire:  #FFFFFF;  /* Titres sur fond sombre */
  --couleur-texte-secondaire:  #f5f5f5;  /* Texte secondaire sur fond sombre */
  --couleur-bordure:           #DCE3EA;  /* Bordures (cartes, séparateurs) */

  /* ── 2.2 ÉCHELLE TYPOGRAPHIQUE ───────────────────────── */
  /* Source unique — utiliser ces variables dans toutes les pages */

  --fs-h1:     clamp(2.8rem, 3.4vw, 4.2rem);  /* Héros, titres de page */
  --fs-h2:     clamp(1.8rem, 2.6vw, 2.6rem);  /* Titres de section */
  --fs-h3:     clamp(1.2rem, 1.6vw, 1.6rem);  /* Titres de carte / bloc */
  --fs-h4:     clamp(0.9rem, 1.2vw, 1.15rem); /* Sous-titres, labels nav */
  --fs-body:   1.125rem;                       /* 18px — paragraphes, intro */
  --fs-card:   1rem;                           /* 16px — texte dans les cartes */
  --fs-small:  0.875rem;                       /* 14px — meta, auteurs, noms */
  --fs-xsmall: 0.8125rem;                      /* 13px — eyebrows, table des matières */
  --fs-tag:    0.8125rem;                      /* 13px — tags, badges, pills */
  --fs-label:  0.72rem;                        /* 11.5px — catégories, petits labels */
  --fs-btn:    1rem;                           /* 16px — boutons principaux, CTA */
  --fs-btn-sm: 0.875rem;                       /* 14px — liens CTA dans cartes */
  --fs-num-sm: 1.8rem;                         /* numéros d'étapes petits */
  --fs-num-md: 2.4rem;                         /* prix, montants */
  --fs-num-lg: 2.6rem;                         /* numéros décoratifs grands */

  /* ── 2.3 HAUTEURS DE LIGNE ──────────────────────────── */
  /* Source unique — utiliser ces variables dans toutes les pages */

  --lh-h1:      1.1;    /* h1 uniquement */
  --lh-heading: 1.2;    /* h2, h3, h4, h5, h6 */
  --lh-body:    1.55;   /* paragraphes */
  --lh-other:   1.4;    /* tout le reste — nav, cartes, labels */

  /* ── 2.4 ESPACEMENT TYPOGRAPHIQUE ───────────────────── */
  /* Marges sous les titres — modifier ici pour tout le site */

  --space-h1:  1.75rem;   /* marge sous h1 */
  --space-h2:  1.5rem;    /* marge sous h2 */
  --space-h3:  1rem;      /* marge sous h3 */
  --space-h4:  0.75rem;   /* marge sous h4/h5/h6 */

  /* ── 2.4 HOVER CARTES — 3 patterns standardisés ─────── */
  /*
     A = carte #FFF    sur fond clair  (#f5f5f5 / #FFF)
     B = carte #1A2E4A sur fond clair  (#f5f5f5 / #FFF)
     C = carte #FFF    sur fond marine (#1A2E4A)
  */

  --hover-lift:     0 -4px;
  --hover-shadow-a: 0 0 30px rgba(0, 0, 0, 0.30);        /* blanc sur fond clair  */
  --hover-shadow-b: 0 0 30px rgba(0, 0, 0, 0.65);        /* marine sur fond clair */
  --hover-shadow-c: 0 0 30px rgba(255, 255, 255, 0.70);  /* blanc sur fond marine */
}


/* ================================================================
   3. POLICES (@font-face)
================================================================ */

/* ── Exo 2 — corps de texte ─────────────────────────────────── */

@font-face {
  font-family: 'Exo2';
  src: url('../typo/Exo2-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Exo2';
  src: url('../typo/Exo2-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Exo2';
  src: url('../typo/Exo2-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Exo2';
  src: url('../typo/Exo2-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ── Orbitron — titres ──────────────────────────────────────── */

@font-face {
  font-family: 'orbitron';
  src: url('../typo/Orbitron-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'orbitron';
  src: url('../typo/Orbitron-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'orbitron';
  src: url('../typo/Orbitron-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'orbitron';
  src: url('../typo/Orbitron-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'orbitron';
  src: url('../typo/Orbitron-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


/* ================================================================
   4. TYPOGRAPHIE DE BASE
   Styles globaux appliqués sur toutes les pages.
   Les tailles sont définies via les variables --fs-* du :root.
================================================================ */

body {
  font-family: 'Exo2', sans-serif !important;
  font-weight: 400 !important;
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
  color: var(--couleur-texte);
  background: var(--couleur-carte);
  position: relative;
  overflow-x: hidden;
}

h1 {
  font-family: 'orbitron', sans-serif !important;
  font-weight: 800 !important;
  margin: 0 0 var(--space-h1) !important;
  line-height: var(--lh-h1) !important;
  font-size: var(--fs-h1) !important;
  color: var(--couleur-titre);
  letter-spacing: -0.03em !important;
  text-transform: none;
}

h2 {
  font-family: 'orbitron', sans-serif !important;
  font-weight: 700 !important;
  margin: 0 0 var(--space-h2) !important;
  line-height: var(--lh-heading) !important;
  font-size: var(--fs-h2) !important;
  color: var(--couleur-titre);
  letter-spacing: 0.01em !important;
}

h3 {
  font-family: 'Exo2', sans-serif !important;
  font-weight: 600 !important;
  margin: 0 0 var(--space-h3) !important;
  line-height: var(--lh-heading) !important;
  font-size: var(--fs-h3) !important;
  color: var(--couleur-titre);
  letter-spacing: 0.01em !important;
}

h4, h5, h6 {
  font-family: 'Exo2', sans-serif !important;
  font-weight: 600 !important;
  margin: 0 0 var(--space-h4) !important;
  font-size: var(--fs-h4) !important;
  color: var(--couleur-titre);
  letter-spacing: 0.01em !important;
}

strong {
  font-weight: 600 !important;
}

p {
  margin-bottom: var(--fs-body) !important;
}

/* Couleur d'accentuation sur les <span> dans les titres */
span {
  color: var(--couleur-accentuation);
}


/* ================================================================
   5. MISE EN PAGE GLOBALE
================================================================ */

html,
body {
  min-height: 100%;
}


/* ================================================================
   6. ACCESSIBILITÉ — FOCUS VISIBLE
   Outline personnalisé pour la navigation clavier.
   L'outline par défaut est supprimé ; un style cohérent
   avec la charte graphique est appliqué via :focus-visible.
================================================================ */

/* Supprime l'outline navigateur par défaut */
*:focus {
  outline: none;
}

/* Outline visible uniquement en navigation clavier */
*:focus-visible {
  outline: 2px solid var(--couleur-accentuation);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Boutons */
.btn:focus-visible {
  outline: 2px solid var(--couleur-accentuation);
  outline-offset: 4px;
  box-shadow:
    0 0 0 4px rgba(26, 171, 119, 0.2),
    0 10px 24px rgba(46, 204, 154, 0.28);
}

/* Cartes cliquables (home) */
.service-card:focus-visible,
.seo-card:focus-visible,
.accompagnement-card:focus-visible,
.maintenance-item:focus-visible {
  outline: 2px solid var(--couleur-accentuation);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px rgba(26, 171, 119, 0.15);
}

/* Liens texte */
a:focus-visible {
  outline: 2px solid var(--couleur-accentuation);
  outline-offset: 2px;
  border-radius: 3px;
}


/* ================================================================
   7. BOUTONS
   Deux variantes : .btn-primary (vert plein) / .btn-secondary (outline)
================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 14px;
  font-size: var(--fs-btn);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.05em;
  transition:
    background-color  0.2s ease,
    border-color      0.2s ease,
    translate         0.22s ease-out,
    box-shadow        0.22s ease-out;
}

/* ── Bouton principal — vert plein ───────────────────────────── */

.btn-primary {
  background: #0f7a55;
  color: var(--couleur-titre-secondaire);
  border: 1px solid transparent;
  padding: 4px 28px;
  overflow: hidden;
  box-shadow:
    0 10px 24px rgba(46, 204, 154, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.25) inset;
  transition:
    translate   0.25s ease-out,
    box-shadow  0.25s ease-out,
    background  0.25s ease;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: #0a5c3f;
  color: var(--couleur-titre-secondaire);
  translate: 0 -2px;
  box-shadow:
    0 18px 34px rgba(46, 204, 154, 0.34),
    0 0 24px rgba(46, 204, 154, 0.18);
}

/* ── Bouton secondaire — outline marine ──────────────────────── */

.btn-secondary {
  background: var(--couleur-fond);
  color: var(--couleur-titre);
  border: 1px solid var(--couleur-principale);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.25) inset;
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--couleur-carte);
  color: var(--couleur-titre);
  border-color: var(--couleur-principale);
  translate: 0 -2px;
}


/* ================================================================
   8. COMPOSANTS — SYSTÈME DE DESIGN
   Classes réutilisables sur toutes les pages.
   Toujours préférer ces classes aux styles inline.
================================================================ */

/* ── 8.1 BADGES DE CONFIANCE ─────────────────────────────────
   Usage : <span class="trust-badge">✓ Texte</span>
────────────────────────────────────────────────────────────── */

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(26, 171, 119, 0.1);
  border: 1px solid rgba(26, 171, 119, 0.28);
  border-radius: 30px;
  color: var(--couleur-accentuation);
  font-size: var(--fs-tag);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
}


/* ── 8.2 BADGE PRIX FLOTTANT ─────────────────────────────────
   Usage : <span class="pricing-badge">Le plus demandé</span>
   Positionner dans un parent position: relative
────────────────────────────────────────────────────────────── */

.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--couleur-accentuation);
  color: var(--couleur-titre-secondaire);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 18px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(26, 171, 119, 0.35);
}


/* ── 8.3 TAGS / PILLS ────────────────────────────────────────
   Usage : <span class="tag">Épinal</span>
   Variante sombre (sur fond marine) : <span class="tag tag--dark">
────────────────────────────────────────────────────────────── */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  background: rgba(26, 171, 119, 0.25)!important;
  border: 1px solid rgba(26, 171, 119, 0.2);
  border-radius: 20px;
  color: var(--couleur-titre)!important;
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.tag:hover {
  background: rgba(26, 171, 119, 0.15);
  border-color: var(--couleur-accentuation);
}

/* Variante sur fond marine — utilisée sur les hero de page service */
.tag--dark {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.75);
}

.tag--dark:hover {
  background: rgba(26, 171, 119, 0.15);
  border-color: var(--couleur-accentuation);
  color: var(--couleur-titre-secondaire);
}


/* ── 8.4 EYEBROW — LABEL DE SECTION ─────────────────────────
   Usage : <p class="eyebrow">Notre méthode</p>
   Variantes :
     .eyebrow--underline       → trait centré sous le texte
     .eyebrow--underline-left  → trait aligné à gauche
────────────────────────────────────────────────────────────── */

.eyebrow {
  display: inline-block;
  margin: 0 0 1.25rem !important;
  color: var(--couleur-accentuation);
  font-size: var(--fs-xsmall) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1;
}

/* Soulignement centré */
.eyebrow--underline {
  position: relative;
  padding-bottom: 14px;
}

.eyebrow--underline::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 40px;
  height: 2px;
  border-radius: 30px;
  background: var(--couleur-accentuation);
  transform: translateX(-50%);
}

/* Soulignement aligné à gauche */
.eyebrow--underline-left {
  position: relative;
  padding-bottom: 14px;
}

.eyebrow--underline-left::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  border-radius: 30px;
  background: var(--couleur-accentuation);
}


/* ── 8.5 EN-TÊTES DE SECTION ─────────────────────────────────
   Modificateurs de couleur selon le fond de la section.
     --on-dark  → titres blancs sur fond marine (#1A2E4A)
     --on-light → titres foncés sur fond clair (#f5f5f5 / #FFF)
────────────────────────────────────────────────────────────── */

/* Sur fond marine */
.eyebrow--on-dark,
.service-section__eyebrow--on-dark  { color: var(--couleur-accentuation) !important; }

h2.title--on-dark,
h2.service-section__title--on-dark  { color: var(--couleur-titre-secondaire) !important; }

h2.title--on-dark span,
h2.service-section__title--on-dark span { color: var(--couleur-accentuation) !important; }

p.intro--on-dark,
p.service-section__intro--on-dark   { color: rgba(255, 255, 255, 0.72) !important; }

/* Sur fond clair */
.eyebrow--on-light,
.service-section__eyebrow--on-light { color: var(--couleur-accentuation) !important; }

h2.title--on-light,
h2.service-section__title--on-light { color: var(--couleur-titre) !important; }

h2.title--on-light span,
h2.service-section__title--on-light span { color: var(--couleur-accentuation) !important; }

p.intro--on-light,
p.service-section__intro--on-light  { color: var(--couleur-texte) !important; }


/* ── 8.6 NUMÉRO D'ÉTAPE CIRCULAIRE ──────────────────────────
   Usage : <div class="step-num">01</div>
────────────────────────────────────────────────────────────── */

.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: var(--couleur-accentuation);
  color: var(--couleur-titre-secondaire);
  border-radius: 50%;
  font-family: 'Exo2', sans-serif;
  font-size: var(--fs-h3);
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(26, 171, 119, 0.4);
  transition: scale 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  z-index: 1;
}

*:hover > .step-num {
  scale: 1.08;
  box-shadow: 0 10px 28px rgba(26, 171, 119, 0.55);
}


/* ── 8.7 LIEN AVEC FLÈCHE ────────────────────────────────────
   Usage : <a class="link-arrow" href="#">Voir plus</a>
────────────────────────────────────────────────────────────── */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-btn-sm);
  font-weight: 700;
  color: var(--couleur-accentuation);
  text-decoration: none;
  transition: color 0.2s ease, gap 0.2s ease;
}

.link-arrow::after {
  content: "→";
  transition: translate 0.2s ease-out;
}

.link-arrow:hover {
  gap: 10px;
}

.link-arrow:hover::after {
  translate: 3px 0;
}


/* ── 8.8 CHECKLIST ───────────────────────────────────────────
   Usage :
   <ul class="checklist">
     <li>Élément</li>
   </ul>
────────────────────────────────────────────────────────────── */

.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-card);
  color: var(--couleur-texte);
  line-height: var(--lh-body);
}

.checklist li::before {
  content: "✓";
  color: var(--couleur-accentuation);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.0625rem;
}


/* ── 8.9 ANNEAUX DÉCORATIFS (signature visuelle) ─────────────
   Pattern deux anneaux concentriques en arrière-plan.
   Usage : ajouter .deco-rings sur la section parente.
────────────────────────────────────────────────────────────── */

.deco-rings {
  position: relative;
  overflow: hidden;
}

.deco-rings::before {
  content: "";
  position: absolute;
  left: -180px;
  top: 80px;
  width: 620px;
  height: 620px;
  border: 1px solid rgba(26, 171, 119, 0.12);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.deco-rings::after {
  content: "";
  position: absolute;
  left: -80px;
  top: 180px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(26, 171, 119, 0.08);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}


/* ── 8.10 ICÔNE CARRÉE ───────────────────────────────────────
   Usage : <div class="icon-box">🔒</div>
────────────────────────────────────────────────────────────── */

.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: rgba(26, 171, 119, 0.1);
  border: 1px solid rgba(26, 171, 119, 0.2);
  border-radius: 14px;
  font-size: var(--fs-h2);
  flex-shrink: 0;
  transition: background 0.2s ease, scale 0.2s ease;
}

*:hover > .icon-box {
  background: rgba(26, 171, 119, 0.16);
}


/* ================================================================
   9. SECTION TÉMOIGNAGES — Partial global
   Injecté via partials/section-temoignages.php
   Présent sur : home, creation-site-internet, creation-site-vitrine,
                 creation-site-wordpress
================================================================ */

.section-temoignages {
  position: relative;
  padding: 80px 40px;
  overflow: hidden;
}

.section-temoignages__container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-temoignages__header {
  max-width: 720px;
  margin: 0 auto 3.75rem;
  text-align: center;
}

.section-temoignages__eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  color: var(--couleur-accentuation);
  font-size: var(--fs-xsmall);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.section-temoignages__title {
  margin-bottom: 1.125rem;
  color: var(--couleur-titre);
}

.section-temoignages__title span {
  color: var(--couleur-accentuation);
}

.section-temoignages__intro {
  color: var(--couleur-texte);
  font-size: var(--fs-body);
}

/* Grille */

.temoignages__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}

/* Wrapper AOS — les cartes s'étirent pour égaliser la hauteur */
.temoignages__grid > [data-aos] {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.temoignages__grid > [data-aos] > .temoignage-card {
  flex: 1;
}

/* Carte témoignage */

.temoignage-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 28px;
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bordure);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
  transition:
    translate     0.28s ease-out,
    box-shadow    0.28s ease,
    border-color  0.28s ease;
}

/* Border-radius asymétriques — signature visuelle Clic Digital */
.temoignages__grid > [data-aos]:nth-child(1) > .temoignage-card { border-radius: 80px 18px 18px 18px; }
.temoignages__grid > [data-aos]:nth-child(2) > .temoignage-card { border-radius: 18px 18px 18px 18px; }
.temoignages__grid > [data-aos]:nth-child(3) > .temoignage-card { border-radius: 18px 80px 18px 18px; }

/* TYPE A — carte blanche sur fond clair */
.temoignage-card:hover {
  translate: var(--hover-lift);
  box-shadow: var(--hover-shadow-a);
}

/* Étoiles */
.temoignage-card__stars {
  font-size: var(--fs-body);
  color: #f59e0b;
  letter-spacing: 0.125em;
}

/* Texte */
.temoignage-card__text {
  font-size: 1rem;
  line-height: var(--lh-body);
  color: var(--couleur-texte);
  font-style: italic;
  margin: 0;
  flex: 1;
  border-left: 3px solid var(--couleur-accentuation);
  padding-left: 16px;
}

/* Auteur */
.temoignage-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--couleur-bordure);
}

.temoignage-card__avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: var(--couleur-principale);
  color: #ffffff;
  font-family: 'orbitron', sans-serif;
  font-weight: 700;
  font-size: var(--fs-label);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.05em;
}

.temoignage-card__name {
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--couleur-titre);
  margin: 0 !important;
}

.temoignage-card__role {
  font-size: var(--fs-label);
  color: var(--couleur-texte);
  margin: 0 !important;
}

/* Carte Google */

.temoignage-card--google {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  gap: 10px;
}

.temoignage-card--google:hover {
  border-color: #4285F4;
}

.temoignage-google__logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.temoignage-google__stars {
  font-size: var(--fs-h3);
  color: #FBBC05;
  letter-spacing: 0.125em;
  line-height: 1;
}

.temoignage-google__note {
  font-family: 'Exo2', sans-serif;
  font-size: var(--fs-num-md);
  font-weight: 800;
  color: var(--couleur-titre);
  line-height: 1;
}

.temoignage-google__count {
  font-size: 1rem;
  font-weight: 600;
  color: var(--couleur-texte);
  letter-spacing: 0.02em;
}

.temoignage-google__cta {
  margin-top: 0.5rem;
  font-size: var(--fs-btn-sm);
  font-weight: 700;
  color: #4285F4;
  letter-spacing: 0.04em;
}

/* Responsive */

@media (max-width: 991px) {
  .section-temoignages {
    padding: 60px 30px;
  }

  .temoignages__grid {
    grid-template-columns: 1fr;
  }

  .temoignages__grid > [data-aos]:nth-child(1) > .temoignage-card,
  .temoignages__grid > [data-aos]:nth-child(2) > .temoignage-card,
  .temoignages__grid > [data-aos]:nth-child(3) > .temoignage-card {
    border-radius: 18px;
  }
}

@media (max-width: 767px) {
  .section-temoignages {
    padding: 40px 16px;
  }

  .section-temoignages__header {
    margin-bottom: 2.5rem;
  }

  .temoignage-card {
    padding: 24px 20px;
  }
}

/* ----- Variantes de couleur (par page) ----- */

/* CARTE — fond blanc */
.section-temoignages--carte {
  background: var(--couleur-carte);
}

/* FOND — fond gris clair */
.section-temoignages--fond {
  background: var(--couleur-fond);
}

/* PRINCIPALE — fond bleu marine (sombre) */
.section-temoignages--principale {
  background: var(--couleur-principale);
}
.section-temoignages--principale .section-temoignages__title,
.section-temoignages--principale .section-temoignages__intro {
  color: var(--couleur-titre-secondaire);
}
.section-temoignages--principale .section-temoignages__title span {
  color: var(--couleur-accentuation);
}
.section-temoignages--principale .temoignage-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}


/* ================================================================
   10. SECTION RÉALISATIONS / ÉTUDES DE CAS — Partial global
   Injecté via partials/section-realisations.php
================================================================ */

.section-etudes-cas {
  position: relative;
  padding: 80px 40px 60px;
  overflow: hidden;
  background: var(--couleur-fond);
}

.section-creation__header {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto 5rem;
}

p.section-creation__intro {
  color: var(--couleur-texte);
}

.case-study__but {
  margin-bottom: 0.625rem;
}

.case-study {
  position: relative;
  z-index: 1;
  max-width: 1500px;
  margin: 0 auto 4rem;
  display: flex;
  flex-direction: row-reverse;
  column-gap: 48px;
  align-items: center;
}

.case-study:nth-child(even) .case-study__media {
  order: -1;
}

.case-study__text {
  display: flex;
  flex-direction: column;
  width: 55%;
  background: var(--couleur-carte);
  border-radius: 18px 80px 18px 18px;
  padding: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
  border: 1px solid var(--couleur-bordure);
}

h3.case-study__client {
  color: var(--couleur-titre);
  max-width: 720px;
}

h3.case-study__client span {
  color: var(--couleur-accentuation);
}

p.section-creation__intro.aos-init.aos-animate, p.case-study__subtitle {
    font-size: var(--fs-body);
}

.case-study__media {
  width: 45%;
  line-height: 0;
}

.case-study__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 25px 60px rgba(0,0,0,0.25);
}

.case-study__image:hover {
  transition: 0.3s ease;
}

@media (max-width: 991px) {
  .section-etudes-cas { padding: 60px 30px 40px; }
}

@media (max-width: 768px) {
  .case-study {
    flex-direction: column;
    gap: 32px;
  }
  .case-study__text {
    width: 100%;
    border-radius: 16px;
  }
  .case-study__media {
    width: 100%;
    order: -1;
  }
  .case-study:nth-child(even) .case-study__media {
    order: -1;
  }
}

@media (max-width: 767px) {
  .section-etudes-cas { padding: 40px 16px 30px; }
}

/* ----- Variantes de couleur (par page) ----- */

/* CARTE — fond blanc */
.section-etudes-cas--carte {
  background: var(--couleur-carte);
}
.section-etudes-cas--carte .section-creation__title,
.section-etudes-cas--carte h3.case-study__client {
  color: var(--couleur-titre);
}
.section-etudes-cas--carte p.section-creation__intro,
.section-etudes-cas--carte .case-study__subtitle,
.section-etudes-cas--carte .case-study__description,
.section-etudes-cas--carte .case-study__text ul {
  color: var(--couleur-texte);
}

/* FOND — fond gris clair */
.section-etudes-cas--fond {
  background: var(--couleur-fond);
}
.section-etudes-cas--fond .section-creation__title,
.section-etudes-cas--fond h3.case-study__client {
  color: var(--couleur-titre);
}
.section-etudes-cas--fond p.section-creation__intro,
.section-etudes-cas--fond .case-study__subtitle,
.section-etudes-cas--fond .case-study__description,
.section-etudes-cas--fond .case-study__text ul {
  color: var(--couleur-texte);
}

/* PRINCIPALE — fond bleu marine (sombre) */
.section-etudes-cas--principale {
  background: var(--couleur-principale);
}
.section-etudes-cas--principale .section-creation__title,
.section-etudes-cas--principale h3.case-study__client {
  color: var(--couleur-titre-secondaire);
}
.section-etudes-cas--principale .section-creation__title span {
  color: var(--couleur-accentuation);
}
.section-etudes-cas--principale h3.case-study__client span {
  color: var(--couleur-accentuation);
}
.section-etudes-cas--principale p.section-creation__intro {
  color: var(--couleur-texte-secondaire);
}

.section-etudes-cas--principale .case-study__subtitle,
.section-etudes-cas--principale .case-study__description,
.section-etudes-cas--principale .case-study__text ul {
  color: var(--couleur-texte-secondaire);
}
.section-etudes-cas--principale .case-study__text {
  border-color: rgba(255, 255, 255, 0.12);
}
/* Carte blanche sur fond sombre : forcer texte foncé à l'intérieur */
.section-etudes-cas--principale .case-study__text h3.case-study__client {
  color: var(--couleur-titre);
}
.section-etudes-cas--principale .case-study__text h3.case-study__client span {
  color: var(--couleur-accentuation);
}
.section-etudes-cas--principale .case-study__text .case-study__subtitle,
.section-etudes-cas--principale .case-study__text .case-study__description,
.section-etudes-cas--principale .case-study__text ul {
  color: var(--couleur-texte);
}


/* ================================================================
   11. STYLES NON UTILISÉS — À VÉRIFIER AVANT SUPPRESSION
   ─────────────────────────────────────────────────────────────────
   Ces classes n'ont aucune référence dans les templates PHP actuels.
   Elles sont conservées commentées en cas de besoin futur.
   Pour les réactiver : décommenter le bloc concerné.
================================================================ */

/*

── .trust-badge--dark ──────────────────────────────────────────
   Variante trust badge sur fond marine.
   Non utilisée — .tag--dark est utilisé à la place dans les hero.

.trust-badge--dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--couleur-texte-secondaire);
}


── .link-arrow--light ──────────────────────────────────────────
   Variante lien flèche sur fond sombre.

.link-arrow--light {
  color: var(--couleur-titre-secondaire);
}

.link-arrow--light:hover {
  color: var(--couleur-accentuation);
}


── .checklist--light ───────────────────────────────────────────
   Checklist texte clair sur fond marine.

.checklist--light li {
  color: rgba(255, 255, 255, 0.85);
}


── .icon-box--lg / .icon-box--round ────────────────────────────
   Variantes de la boîte icône (grande taille / ronde).

.icon-box--lg {
  width: 72px;
  height: 72px;
  font-size: 2rem;
  border-radius: 18px;
}

.icon-box--round {
  border-radius: 50%;
}


── .deco-rings--right ──────────────────────────────────────────
   Anneaux décoratifs positionnés à droite.

.deco-rings--right::before {
  left: auto;
  right: -180px;
}

.deco-rings--right::after {
  left: auto;
  right: -80px;
}


── .bg-grid ────────────────────────────────────────────────────
   Motif grille en overlay (lignes fines blanches).

.bg-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(circle at 80% 50%, black 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}


── .deco-glow ──────────────────────────────────────────────────
   Tache lumineuse radiale décorative.

.deco-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 70%, rgba(26, 171, 119, 0.08) 0%, transparent 34%),
    radial-gradient(circle at 82% 28%, rgba(26, 46, 74, 0.08) 0%, transparent 36%);
  pointer-events: none;
  z-index: 0;
}


── .step-num--connector ────────────────────────────────────────
   Connecteur vertical sous le badge d'étape.

.step-num--connector::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 16px;
  background: rgba(26, 171, 119, 0.4);
}


── .card-shape--* ──────────────────────────────────────────────
   Border-radius asymétriques (coin arrondi 80px = signature visuelle).
   Non utilisées en classe directe ; les arrrondis sont appliqués
   via les sélecteurs nth-child de la section témoignages.
   Décommenter si usage direct prévu sur d'autres sections.

.card-shape--tl { border-radius: 80px 18px 18px 18px; }
.card-shape--tr { border-radius: 18px 80px 18px 18px; }
.card-shape--br { border-radius: 18px 18px 80px 18px; }
.card-shape--bl { border-radius: 18px 18px 18px 80px; }


── .card (carte générique et variantes) ────────────────────────
   Jamais utilisé directement dans les templates.
   Chaque section utilise ses propres classes
   (service-card, vitrine-cible-card, wp-args__card…).

.card {
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: translate 0.25s ease-out, box-shadow 0.25s ease-out;
}

.card:hover {
  translate: var(--hover-lift);
  box-shadow: var(--hover-shadow-a);
}

.card--dark {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.card--dark:hover {
  translate: var(--hover-lift);
  box-shadow: var(--hover-shadow-c);
}

.card--featured {
  background: var(--couleur-principale);
  border-color: var(--couleur-accentuation);
  box-shadow: 0 16px 48px rgba(26, 46, 74, 0.22);
}

*/