/* ==========================================================================
   NOVADEV — DESIGN SYSTEM
   --------------------------------------------------------------------------
   Couche sémantique unifiée, chargée APRÈS novadev.css.
   - Tous les tokens de marque vivent ici : c'est la SOURCE UNIQUE DE VÉRITÉ.
   - Les anciennes variables Webflow au nommage trompeur (ex. --color--gray-1
     qui valait en réalité le bleu de marque) sont rebranchées sur les tokens
     --ds-* plus bas (§ PONT). Valeurs identiques => aucun changement visuel,
     mais changer la marque = éditer UN seul token ici.
   - Pour construire une nouvelle page, n'utilise que les tokens --ds-* et les
     classes .ds-* (voir design-system/DESIGN-SYSTEM.md).
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- COULEURS
     Marque (famille bleu/teal) --------------------------------------------- */
  --ds-brand:            #214f59;  /* bleu de marque — titres, boutons, liens  */
  --ds-brand-600:        #356268;  /* teal moyen                               */
  --ds-brand-500:        #4a6b6c;  /* teal doux — texte courant                */
  --ds-brand-300:        #a7b9b6;  /* teal grisé — texte discret / disabled    */

  /* Accent (or/sable) — hérité de l'ancien primary-1, usage ponctuel -------- */
  --ds-accent:           #b9966a;

  /* Surfaces (famille crème) ----------------------------------------------- */
  --ds-surface:          #f4efe7;  /* fond de page par défaut                  */
  --ds-surface-raised:   #ffffff;  /* cartes / éléments surélevés              */
  --ds-surface-sand:     #f1ece2;  /* section alternée claire                  */
  --ds-surface-sand-2:   #efe9dd;  /* section alternée (variante)              */
  --ds-surface-sand-3:   #f2ece1;
  --ds-surface-tan:      #e8dcc6;  /* bloc accentué chaud                      */

  /* Bordures & lignes ------------------------------------------------------ */
  --ds-border:           #e4ddd0;

  /* Texte ------------------------------------------------------------------ */
  --ds-text:             #4a6b6c;  /* corps de texte                          */
  --ds-text-strong:      #214f59;  /* titres / emphase                        */
  --ds-text-muted:       #a7b9b6;  /* légendes, méta                          */
  --ds-text-on-brand:    #ffffff;  /* texte sur fond bleu                     */

  /* Neutres bruts ---------------------------------------------------------- */
  --ds-white:            #ffffff;
  --ds-black:            #000000;

  /* États / feedback (dérivés de la marque) -------------------------------- */
  --ds-focus-ring:       #35626880;

  /* --------------------------------------------------------------- TYPO
     Familles ---------------------------------------------------------------- */
  --ds-font-heading: "Golos Text", sans-serif;
  --ds-font-body:    "Golos Text", sans-serif;
  --ds-font-alt:     "Merriweather", serif;   /* citations / éditorial        */

  /* Échelle de tailles (desktop) — réutilise l'échelle existante ----------- */
  --ds-text-h1:   4.375rem;  /* 70px */
  --ds-text-h2:   3.125rem;  /* 50px */
  --ds-text-h3:   2.875rem;  /* 46px */
  --ds-text-h4:   2.375rem;  /* 38px */
  --ds-text-h5:   1.875rem;  /* 30px */
  --ds-text-h6:   1.625rem;  /* 26px */
  --ds-text-lg:   1.25rem;   /* 20px — chapô / intro                          */
  --ds-text-base: 1rem;      /* 16px — corps                                  */
  --ds-text-sm:   0.9375rem; /* 15px                                          */
  --ds-text-xs:   0.75rem;   /* 12px — méta / eyebrow                         */

  --ds-weight-regular: 400;
  --ds-weight-medium:  500;
  --ds-weight-semibold: 600;

  --ds-leading-tight: 1.2;
  --ds-leading-body:  1.5;

  /* -------------------------------------------------------------- ESPACEMENTS
     Échelle rationalisée (base 8) — mappe sur les gaps réels du site -------- */
  --ds-space-1:   0.375rem;  /* 6px  */
  --ds-space-2:   0.625rem;  /* 10px */
  --ds-space-3:   0.9375rem; /* 15px */
  --ds-space-4:   1.25rem;   /* 20px */
  --ds-space-5:   1.875rem;  /* 30px */
  --ds-space-6:   2.5rem;    /* 40px */
  --ds-space-7:   3.75rem;   /* 60px */
  --ds-space-8:   5rem;      /* 80px */
  --ds-space-9:   6.25rem;   /* 100px */

  /* Rythme vertical des sections ------------------------------------------- */
  --ds-section-y:        8rem;    /* desktop                                   */
  --ds-section-y-mobile: 6.25rem; /* < 992px                                   */

  /* --------------------------------------------------------------- LAYOUT */
  --ds-container:        1500px;
  --ds-container-md:     1260px;
  --ds-container-sm:     950px;
  --ds-container-inner:  800px;  /* colonne de lecture (articles)             */
  --ds-gutter:           1.875rem;
  --ds-gutter-mobile:    1.25rem;

  /* --------------------------------------------------------------- RADIUS */
  --ds-radius-sm:   0.313rem; /* 5px  — boutons, inputs                       */
  --ds-radius-md:   0.625rem; /* 10px — cartes                               */
  --ds-radius-lg:   1.25rem;  /* 20px — grands blocs / médias                */
  --ds-radius-full: 999px;

  /* --------------------------------------------------------------- OMBRES */
  --ds-shadow-sm: 0 1px 2px rgba(33, 79, 89, 0.06);
  --ds-shadow-md: 0 8px 24px rgba(33, 79, 89, 0.08);
  --ds-shadow-lg: 0 20px 50px rgba(33, 79, 89, 0.12);

  /* --------------------------------------------------------------- MOTION */
  --ds-ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ds-duration: 0.35s;
}

/* ==========================================================================
   PONT — rebranche les variables Webflow (nommage trompeur) sur --ds-*.
   Valeurs identiques : aucun changement visuel. Effet : éditer un token
   --ds-* ci-dessus met à jour TOUT le site existant, pas seulement les
   nouvelles pages. Retire ce bloc si tu préfères garder les deux systèmes
   indépendants.
   ========================================================================== */
:root {
  --color--gray-1:      var(--ds-text-strong);   /* #214f59 */
  --color--gray-2:      var(--ds-brand-600);      /* #356268 */
  --color--gray-3:      var(--ds-text);           /* #4a6b6c */
  --color--gray-4:      var(--ds-text-muted);     /* #a7b9b6 */
  --color--gray-5:      var(--ds-border);         /* #e4ddd0 */
  --color--gray-6:      var(--ds-surface-sand);   /* #f1ece2 */
  --color--primary-1:   var(--ds-accent);         /* #b9966a */
  --color--secondary-1: var(--ds-surface-tan);    /* #e8dcc6 */
  --color--secondary-2: var(--ds-surface-sand-3); /* #f2ece1 */
  --color--secondary-3: var(--ds-surface);        /* #f4efe7 */
  --color--secondary-4: var(--ds-surface-sand-2); /* #efe9dd */
}

/* ==========================================================================
   COMPOSANTS UTILITAIRES  (.ds-*)
   Pour construire de nouvelles pages sans dépendre des classes Webflow.
   ========================================================================== */

/* --- Rythme & conteneurs -------------------------------------------------- */
.ds-section {
  padding-top: var(--ds-section-y);
  padding-bottom: var(--ds-section-y);
}
/* Première section d'une page : son fond remonte DERRIÈRE la navbar
   (transparente, z-index 1000), comme .feature-hero-section sur l'original.
   -7.813rem = hauteur de la navbar desktop ; le padding compense pour que le
   contenu démarre 2.5rem sous la navbar (même écart que le héros de la home). */
.ds-section.ds-section--hero {
  margin-top: -7.813rem;
  padding-top: calc(7.813rem + 2.5rem);
}

.ds-section--sand   { background: var(--ds-surface-sand); }
.ds-section--brand  { background: var(--ds-brand); color: var(--ds-text-on-brand); }
.ds-section--brand :is(h1,h2,h3,h4,h5,h6) { color: var(--ds-text-on-brand); }

.ds-container {
  width: 100%;
  max-width: var(--ds-container);
  margin-inline: auto;
  padding-inline: var(--ds-gutter);
}
.ds-container--md    { max-width: var(--ds-container-md); }
.ds-container--sm    { max-width: var(--ds-container-sm); }
.ds-container--read  { max-width: var(--ds-container-inner); }

/* --- Titre de section ----------------------------------------------------- */
.ds-eyebrow {
  display: inline-block;
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-brand-600);
  margin-bottom: var(--ds-space-3);
}
.ds-lead {
  font-size: var(--ds-text-lg);
  line-height: var(--ds-leading-body);
  color: var(--ds-text);
  max-width: 42rem;
}

/* --- Boutons -------------------------------------------------------------- */
.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 0.75rem 1.5rem;
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-medium);
  line-height: 1;
  border-radius: var(--ds-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ds-duration) var(--ds-ease),
              color var(--ds-duration) var(--ds-ease),
              border-color var(--ds-duration) var(--ds-ease);
}
.ds-btn--primary {
  background: var(--ds-brand);
  color: var(--ds-text-on-brand);
}
.ds-btn--primary:hover { background: var(--ds-brand-600); }
.ds-btn--ghost {
  background: transparent;
  color: var(--ds-brand);
  border-color: var(--ds-border);
}
.ds-btn--ghost:hover {
  border-color: var(--ds-brand);
  background: var(--ds-surface-raised);
}
.ds-btn:focus-visible {
  outline: 3px solid var(--ds-focus-ring);
  outline-offset: 2px;
}

/* --- Cartes --------------------------------------------------------------- */
.ds-card {
  background: var(--ds-surface-raised);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-5);
  box-shadow: var(--ds-shadow-sm);
}
.ds-card--flat { box-shadow: none; }

/* --- Grille --------------------------------------------------------------- */
.ds-grid {
  display: grid;
  gap: var(--ds-space-5);
  grid-template-columns: repeat(var(--ds-cols, 3), minmax(0, 1fr));
}
.ds-grid--2 { --ds-cols: 2; }
.ds-grid--4 { --ds-cols: 4; }

/* --- Média (images) ------------------------------------------------------- */
.ds-media {
  position: relative;
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  box-shadow: var(--ds-shadow-md);
  background: var(--ds-surface-sand);
}
.ds-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ds-media--ar-4-3  { aspect-ratio: 4 / 3; }
.ds-media--ar-3-2  { aspect-ratio: 3 / 2; }
.ds-media--ar-1-1  { aspect-ratio: 1 / 1; }
.ds-media--ar-16-9 { aspect-ratio: 16 / 9; }
.ds-media--ar-4-5  { aspect-ratio: 4 / 5; }

/* Petite étiquette flottante sur une image (ex. « Le centre à Paris 17e »). */
.ds-media__tag {
  position: absolute;
  left: var(--ds-space-4);
  bottom: var(--ds-space-4);
  background: rgba(33, 79, 89, 0.9);
  color: var(--ds-text-on-brand);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: 0.03em;
  padding: 0.45rem 0.85rem;
  border-radius: var(--ds-radius-full);
  backdrop-filter: blur(4px);
}

/* --- Placeholder « image à venir » (façon mockup) ------------------------- */
/* À utiliser DANS un .ds-media : le conteneur garde son ratio, on affiche un
   cadre neutre avec une icône d'image + un libellé, en attendant la photo
   définitive. Remplacer ensuite le bloc .ds-placeholder par un <img>. */
.ds-media--placeholder { background: var(--ds-surface-tan); box-shadow: var(--ds-shadow-sm); }
.ds-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--ds-space-2);
  color: var(--ds-brand-300);
  text-align: center; padding: var(--ds-space-4);
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.35) 25%, transparent 25%, transparent 50%,
                    rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.35) 75%, transparent 75%);
  background-size: 22px 22px;
}
.ds-placeholder svg { width: clamp(38px, 12%, 64px); height: auto; opacity: .75; }
.ds-placeholder span {
  font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold);
  letter-spacing: 0.1em; text-transform: uppercase;
}
/* Variante sur fond de marque (bannières / sections teal). */
.ds-placeholder--on-brand { color: rgba(255,255,255,0.72);
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.10) 25%, transparent 25%, transparent 50%,
                    rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.10) 75%, transparent 75%); }

/* --- Split média + texte (colonne image à côté du texte) ------------------ */
.ds-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-space-8);
  align-items: center;
}
.ds-split--media-first .ds-split__media { order: -1; }

/* --- Bannière image plein cadre avec voile + texte ------------------------ */
.ds-banner {
  position: relative;
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  isolation: isolate;
}
.ds-banner > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.ds-banner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(33,79,89,0.92) 0%, rgba(33,79,89,0.72) 45%, rgba(33,79,89,0.28) 100%);
  z-index: -1;
}
.ds-banner__inner {
  padding: clamp(2rem, 5vw, 4.5rem);
  color: var(--ds-text-on-brand);
  max-width: 40rem;
}
.ds-banner__inner :is(h1,h2,h3) { color: var(--ds-text-on-brand); }

/* --- Feature avec icône (petite pastille de marque) ----------------------- */
.ds-feature { display: flex; gap: var(--ds-space-3); align-items: flex-start; }
.ds-feature__icon {
  flex: none;
  width: 46px; height: 46px;
  border-radius: var(--ds-radius-md);
  background: var(--ds-brand);
  display: flex; align-items: center; justify-content: center;
}
.ds-feature__icon img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
.ds-feature__title { font-size: var(--ds-text-h6); margin: 0 0 var(--ds-space-1); }

/* Eyebrow sur fond sombre (meilleur contraste que le teal par défaut). */
.ds-eyebrow--on-brand { color: var(--ds-surface-tan); }

/* --- Carte formulaire mise en avant + badge (réutilisable) ---------------- */
.ds-badge {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: var(--ds-radius-full);
  background: var(--ds-brand);
  color: var(--ds-text-on-brand);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ds-form-card {
  background: var(--ds-surface-raised);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.ds-form-title {
  color: var(--ds-text-strong);
  font-size: var(--ds-text-h5);
  margin: var(--ds-space-3) 0 var(--ds-space-2);
}
.ds-form-lead { color: var(--ds-text); margin-bottom: var(--ds-space-4); }

/* Formulaires Webflow réutilisés sur fond clair : les placeholders par défaut
   sont beige (illisibles). Ajouter .ds-form au conteneur les repasse en teal. */
.ds-form .form-input.contact-input::placeholder { color: var(--ds-brand-500); opacity: 1; }

/* --------------------------------------------------------------- RESPONSIVE */

/* Anti-débordement : sans min-width:0, un enfant de grid/flex ne peut pas
   descendre sous sa largeur « min-content » — un mot long (ex. « neuro-
   développement ») en gros titre force alors la colonne à dépasser l'écran. */
.ds-split > *,
.ds-grid > * { min-width: 0; }
.ds-section :is(h1, h2, h3, h4) { overflow-wrap: break-word; }

@media screen and (max-width: 991px) {
  /* Échelle typographique mobile : les pages utilisent les tokens --ds-text-*,
     il suffit de les redéfinir ici pour réadapter TOUTES les pages d'un coup. */
  :root {
    --ds-text-h1:   2.75rem;   /* 70px → 44px */
    --ds-text-h2:   2.25rem;   /* 50px → 36px */
    --ds-text-h3:   2rem;      /* 46px → 32px */
    --ds-text-h4:   1.75rem;   /* 38px → 28px */
    --ds-text-h5:   1.5rem;    /* 30px → 24px */
    --ds-text-h6:   1.25rem;   /* 26px → 20px */
    --ds-text-lg:   1.125rem;  /* 20px → 18px */
  }

  .ds-section   { padding-top: var(--ds-section-y-mobile);
                  padding-bottom: var(--ds-section-y-mobile); }
  .ds-container { padding-inline: var(--ds-gutter-mobile); }
  .ds-split { grid-template-columns: 1fr; gap: var(--ds-space-6); }
  /* Sur mobile, l'image passe toujours au-dessus du texte. */
  .ds-split .ds-split__media { order: -1; }
}

@media screen and (max-width: 600px) {
  /* Petits écrans (iPhone & co) : on resserre encore. */
  :root {
    --ds-text-h1:   2.125rem;  /* 34px */
    --ds-text-h2:   1.875rem;  /* 30px */
    --ds-text-h3:   1.75rem;   /* 28px */
    --ds-text-h4:   1.5rem;    /* 24px */
    --ds-text-h5:   1.3125rem; /* 21px */
    --ds-text-h6:   1.125rem;  /* 18px */
    --ds-text-lg:   1.0625rem; /* 17px */
    --ds-section-y-mobile: 4.5rem;
  }
  /* Les contraintes de largeur en « ch » (ex. max-width:20ch sur un titre)
     n'ont plus de sens sous 600px : on laisse le texte occuper la colonne. */
  .ds-section :is(h1, h2) { max-width: none; }
}

@media screen and (max-width: 767px) {
  .ds-grid { grid-template-columns: 1fr; }
}