/* ═══════════════════════════════════════════════════════════════════════════
   DIRECTION ARTISTIQUE — inspirée de brevo.com/fr
   ═══════════════════════════════════════════════════════════════════════════

   CE QUI A ÉTÉ RELEVÉ CHEZ BREVO, PAR MESURE
   Leur page d'accueil a été capturée et analysée par zones :

     héros        #C0FFA5 sur 88 % de la surface, barre de navigation COMPRISE
     titres       #1B1B1B — presque noir
     bouton       #1B1B1B — presque noir, jamais la couleur de marque
     sous le bloc #FFFFFF pur

   La signature n'est donc pas la couleur : c'est la STRUCTURE. Un aplat franc,
   un bord net, du blanc pur en dessous, et des boutons sombres qui tranchent.
   Sur erekio, le héros était un dégradé diffus où aucune teinte ne dépassait
   4 % de la surface — l'exact inverse.

   CE QUI EST TRANSPOSÉ
   La structure, pas la palette. Reprendre le vert citron de Brevo aurait donné
   une copie ; l'aplat est donc construit dans la teinte d'erekio (134°), à la
   luminosité de Brevo (82 %) et à forte saturation.

   Contraste du texte sur l'aplat : 14,1 pour 1. Le seuil est à 4,5.

   Ce fichier est chargé en dernier et ne fait que surcharger. Retirer sa balise
   dans les pages suffit à revenir à la direction artistique d'origine.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --da-bloc: #D8EFD2;   /* l'aplat du héros — rgb(216,239,210), choisi le 2026-08-20 */
  --da-encre: #171918;  /* le noir des boutons et des titres */
}

/* ── 1. Le bloc d'accroche ───────────────────────────────────────────────── */

/* ÉCART ASSUMÉ AVEC BREVO : chez eux la barre de navigation est DANS l'aplat.
   Ici elle reste blanche, à la demande — y compris en haut de page, avant tout
   défilement. Le bloc vert commence donc sous elle.
   
   Elle est collante et passe au-dessus du vert : un filet clair en bas la
   sépare du bloc, sans quoi le blanc semblerait flotter. */
.topbar {
  background: #fff !important;
  border-bottom: 1px solid rgba(23, 25, 24, 0.08) !important;
  box-shadow: none !important;
}

.hero {
  background: var(--da-bloc) !important;
  border-radius: 0 !important;
}

/* Les voiles et halos qui adoucissaient le dégradé n'ont plus lieu d'être :
   c'est leur diffusion même qui empêchait la couleur de s'imposer. */
.hero::before,
.hero::after,
.hero .hero-glow,
.hero .dot-field,
.hero .video-ornament { display: none !important; }

/* Relevé après coup : la trame de points et les deux ornements de la vidéo
   subsistaient, et mouchetaient l'aplat de verts à un ou deux points d'écart
   (#D7EED1, #D6EDD0, #D4ECCE…). Invisibles isolément, ils suffisaient à faire
   paraître la couleur plus terne que l'échantillon choisi. */

/* ── 2. Les boutons ──────────────────────────────────────────────────────── */

/* Chez Brevo l'action principale n'est JAMAIS de la couleur de marque : elle
   est presque noire. Le vert reste à l'arrière-plan, le noir appelle au clic. */
.btn-primary {
  background: var(--da-encre) !important;
  border-color: var(--da-encre) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn-primary:hover { background: #000 !important; border-color: #000 !important; }

/* Le bouton fantôme de la barre est de nouveau sur blanc : son filet peut
   rester discret. Celui du héros, lui, est bien sur l'aplat vert et a besoin
   d'un contour plus affirmé pour ne pas s'y dissoudre. */
.topbar .btn-ghost {
  border-color: rgba(23, 25, 24, 0.18) !important;
  color: var(--da-encre) !important;
}
.hero .btn-ghost {
  border-color: rgba(23, 25, 24, 0.3) !important;
  color: var(--da-encre) !important;
  background: transparent !important;
}

/* ── 3. Le blanc entre les blocs ─────────────────────────────────────────── */

/* Brevo enchaîne un aplat saturé et du blanc PUR, sans transition. Les lavis
   vert pâle d'erekio brouillaient cette respiration : chaque section semblait
   teintée, donc aucune ne ressortait. */
body { background: #fff !important; }

.proof-band,
.story-features,
.capabilities,
.audiences,
.responsible,
.use-cases,
.integrations,
.faq {
  background: #fff !important;
}

.proof-band::before, .story-features::before, .capabilities::before,
.audiences::before, .responsible::before, .use-cases::before,
.integrations::before, .faq::before,
.proof-band::after, .story-features::after, .capabilities::after,
.audiences::after, .responsible::after, .use-cases::after,
.integrations::after, .faq::after { display: none !important; }

/* ── 4. Les deux blocs sombres ───────────────────────────────────────────── */

/* Ils sont conservés : Brevo alterne aussi ses aplats clairs avec des sections
   sombres. On leur retire seulement leur dégradé, pour la même raison qu'au
   héros — un aplat s'impose, un dégradé se dilue. */
.intelligence,
.final-cta {
  background: #0F2E1D !important;
  border-radius: 0 !important;
}

/* ── 5. Bords francs ─────────────────────────────────────────────────────── */

/* Les sections s'arrêtaient sur des coins arrondis, qui font flotter les blocs.
   Chez Brevo la coupe est nette, d'un bord à l'autre de l'écran. */
.hero, .intelligence, .final-cta,
.proof-band, .capabilities, .audiences { border-radius: 0 !important; }

/* ── 6. Les flèches des menus déroulants ─────────────────────────────────── */

/* L'ancien chevron texte était dessiné bas dans sa boîte : mesuré à
   l'échelle 4, son encre occupait y 186-200 quand les lettres du libellé
   tenaient en 167-197 — soit 2,75 px trop bas une fois ramené à l'échelle
   réelle.
   
   Un simple décalage vers le haut n'aurait pas suffi : à l'ouverture du menu,
   la flèche pivote de 180°, et une encre décentrée devient alors trop HAUTE.
   Le glyphe est donc remplacé par un chevron tracé en CSS, symétrique dans sa
   boîte — il reste centré quel que soit l'angle. */

.topbar .nav-trigger small {
  font-size: 0 !important;          /* le caractère d'origine disparaît */
  width: 9px;
  height: 9px;
  position: relative;
  display: inline-block;
  flex: none;
}

.topbar .nav-trigger small::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  /* La pointe du chevron est en bas à droite du carré : après rotation de 45°,
     son centre optique est décalé d'un quart de sa diagonale. Le -60 % vertical
     compense ce décalage et ramène la pointe sur l'axe du texte. */
  transform: translate(-50%, -60%) rotate(45deg);
}

/* ── 7. Le poids des boutons ─────────────────────────────────────────────── */

/* Mesuré dans le navigateur : la police est la MÊME partout — Hanken Grotesk.
   Ce qui différait, c'était le poids.

     liens de navigation   600
     boutons               750

   Un écart de 150 suffit à faire lire deux typographies là où il n'y en a
   qu'une. Les boutons rejoignent le poids de la navigation.

   Les tailles, elles, ne bougent pas : 14 px dans la barre et 17 px dans le
   héros correspondent à des rôles différents, et les uniformiser déplacerait
   la mise en page. */
.btn,
.btn-primary,
.btn-ghost,
.btn-small,
.btn-large { font-weight: 600 !important; }

/* ── 8. Les angles des boutons ───────────────────────────────────────────── */

/* Le site déclarait 13 px sur les boutons et 11 px sur les petits, avec six
   variantes éparpillées dans autant de feuilles (10 px sur les tarifs, 11 px
   sur les ressources et les solutions…). L'arrondi est réduit ET unifié :
   une seule valeur pour les petits, une pour les grands. */
.btn,
.btn-small,
.company-actions .btn,
.resource-actions .btn,
.solution-actions .btn,
.free-offer-actions .btn,
.dfy-actions .btn,
.pricing-final .btn { border-radius: 6px !important; }

.btn-large,
.hero .btn-primary { border-radius: 7px !important; }

/* ─── Respiration du titre de la hero ────────────────────────────────────────
   La source réglait ce titre comme une affiche : interlignage 1,01 et crénage
   à -2,8px (soit -0,053em). Sur UNE ligne c'est percutant ; sur TROIS, les
   jambages de « transformez » viennent toucher les accents de « idéales », et
   le pavé se lit comme un bloc plein.

   On ne touche pas à la graisse (800) : c'est elle qui donne l'accroche. On
   redonne de l'air là où il manque — entre les lignes, et un peu entre les
   lettres. Le crénage passe en `em` pour rester proportionnel aux tailles
   réduites des paliers mobiles, ce que les -2,8px fixes ne faisaient pas. */
.hero h1 {
  line-height: 1.13 !important;
  letter-spacing: -0.028em !important;
  margin-bottom: 26px !important;
}

/* Le soulignement de l'accent suit la ligne de base du mot ; l'interlignage
   plus large l'éloignait du texte. On le remonte d'autant. */
.hero h1 span:after { bottom: 0.06em !important; }

/* ─── Retour au clic ─────────────────────────────────────────────────────────
   AUDIT : le site a 38 règles :hover et 41 transitions — le survol est bien
   traité — mais PAS UNE SEULE règle :active. Rien ne se passe entre l'instant
   où l'on presse et celui où la page répond.

   C'est le détail qui sépare une interface qui « réagit » d'une interface qui
   « charge ». Un enfoncement d'un pixel suffit : le bouton se comporte comme
   un objet physique, et sur une connexion lente il confirme que le clic a été
   reçu avant même que la navigation démarre.

   Le retrait de l'ombre accompagne la descente — un objet qui s'enfonce se
   rapproche de sa surface, donc son ombre se resserre. Sans ça, le bouton
   semble glisser plutôt que s'enfoncer. */
.btn:active,
.btn-primary:active,
.btn-ghost:active,
.btn-small:active,
.btn-large:active {
  transform: translateY(1px) !important;
  box-shadow: none !important;
  transition-duration: 60ms !important;   /* l'enfoncement doit être instantané */
}

/* Le bouton de lecture est rond et centré : une descente le décalerait de son
   cercle. On l'enfonce par l'échelle, qui garde son centre. */
.video-play:active { transform: scale(0.96) !important; transition-duration: 60ms !important; }

/* Les cartes cliquables sont grandes : 1 px se verrait à peine, et un
   changement d'échelle sur un grand bloc paraît mou. On passe par la teinte. */
.topbar .nav-trigger:active { opacity: 0.72 !important; }

/* Rappel : le bloc prefers-reduced-motion plus haut neutralise déjà ces
   transitions pour qui demande moins d'animation. Le retour visuel demeure,
   seule sa durée tombe à zéro — on ne prive personne du signal. */

/* ─── Hauteur de fenêtre sur mobile ──────────────────────────────────────────
   La fenêtre modale de démonstration se dimensionne en `100vh`. Sur Safari iOS,
   `vh` compte la hauteur SANS la barre d'adresse : la modale dépasse donc de
   l'écran tant que la barre est visible, et son bas — là où se trouvent les
   boutons — reste inatteignable. `dvh` suit la hauteur réellement affichée.
   On garde `vh` en repli pour les navigateurs qui ignorent `dvh`. */
.demo-modal { max-height: 100vh; max-height: 100dvh; }
@media (max-width: 820px) {
  .demo-modal-panel { max-height: calc(100dvh - 24px) !important; }
}

/* ─── « Connexion » dans la barre de navigation ─────────────────────────────
   Remplace l'ancien bouton « Démo ». Deux boutons côte à côte se disputaient
   l'attention alors qu'un seul est l'action recherchée : l'inscription. La
   connexion s'adresse à quelqu'un qui est déjà client — il la cherche, il n'a
   pas besoin qu'on la lui vende. Un lien texte la rend disponible sans lui
   donner le poids d'un appel à l'action.

   Placé ici plutôt que dans da-taste.css : cette feuille est chargée par 25
   pages, l'autre par une seule, et le lien existe sur onze d'entre elles. */
.navright .nav-login {
  color: #171918;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: underline;
  /* Le soulignement colle aux jambages sans ce décalage ; 1,5 px lui donne
     assez de corps pour se voir sans peser comme une bordure. */
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: #171918;
  padding: 6px 4px;
  transition: text-decoration-color 140ms ease, color 140ms ease;
}
/* Au survol, le trait vient à la rencontre du texte : le lien se referme
   plutôt que de changer de couleur. */
.navright .nav-login:hover {
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.navright .nav-login:active { opacity: 0.7; }
.navright .nav-login:focus-visible {
  outline: 2px solid #171918;
  outline-offset: 3px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .navright .nav-login { transition: none; }
}