/* ==========================================================================
   Corrections de mise en page
   ==========================================================================
   Chargée APRÈS css/nova-7385cd.webflow.css, qu'elle surcharge sans le
   modifier. Retirer le <link> revient à l'état d'origine.

   PÉRIMÈTRE STRICT : uniquement ce qui déborde de la fenêtre ou ce qui est
   décentré. Rien n'est déplacé, redimensionné ni réorganisé par choix
   esthétique — les blocs restent là où l'export les met.
   ========================================================================== */

/* --------------------------------------------------- 1. site décentré ---
   La feuille Webflow pose `padding-left: 38px` et `margin-right: 14px` sur
   le body. Tout le site est décalé de 24 px vers la droite, à toutes les
   largeurs. Sur une carte talent, les marges valaient 532 à gauche pour
   508 à droite. */

body {
  padding-left: 0;
  margin-right: 0;
}

/* ------------------------------------------- 2. barre de navigation ---
   `.navbar` avait une largeur FIXE de 1480 px, et ses trois blocs étaient
   espacés par des marges en dur (`margin-left: 391px` sur le menu, `260px`
   sur le bouton) calibrées pour ce canevas.

   Sous 1480 px, la barre débordait de la fenêtre et emportait le bouton
   d'appel. Sur un MacBook — 1470 px de large sur un Air 13", 1512 sur un
   Pro 14" — « JE RÉSERVE MON APPEL » était coupé. C'est le bouton de
   conversion principal.

   La largeur devient fluide et plafonnée, et les trois blocs se
   répartissent au lieu d'être calés à des positions absolues. */

.navbar {
  width: 100%;
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 992px) {
  .navbar {
    justify-content: space-between;
  }

  /* Sous 992 px le menu devient un panneau déroulant : ses marges ont un
     autre rôle, on n'y touche pas. */
  .navbar > .logo-link-wrapper,
  .navbar > .nav-menu,
  .navbar > .button-wrapper {
    margin-left: 0;
    margin-right: 0;
  }

  /* `space-between` repartit l'espace libre en parts egales entre les blocs :
     le menu n'est donc centre que si le logo et le bouton ont la meme
     largeur. Ils font 85 et 250 px, ce qui decalait le menu de 82 px vers la
     gauche — centre a 653 pour une fenetre de 1470.

     Les deux blocs lateraux prennent des parts egales de l'espace restant :
     le menu se cale alors exactement au milieu, sans sortir du flux. */
  .navbar > .logo-link-wrapper,
  .navbar > .button-wrapper {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: row;   /* le bloc du logo etait en colonne : `align-items`
                              y recentrait l'image horizontalement */
    align-items: center;
  }

  .navbar > .logo-link-wrapper { justify-content: flex-start; }
  .navbar > .button-wrapper { justify-content: flex-end; }
  .navbar > .nav-menu { flex: 0 0 auto; }

  /* Le bouton porte des marges horizontales automatiques qui le recentraient
     dans son bloc une fois celui-ci elargi. */
  .navbar > .button-wrapper > .w-button {
    margin-left: 0;
    margin-right: 0;
  }

  /* Meme chose pour l'image du logo. */
  .navbar > .logo-link-wrapper > img {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ----------------------------------------------- 3. blocs décentrés ---
   Trois blocs dont les marges gauche et droite ne se répondaient pas. Seul
   le centrage est corrigé : ni la taille, ni l'ordre, ni le contenu. */

/* `max-width: 145%` sortait ce bloc du gabarit : 1920 px de large au lieu
   de 1440. */
.container-8.works-sticky {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

/* `margin-left: 24px` décalait toute la rangée de cartes services. */
.collection-list-wrapper-3 {
  margin-left: 0;
}

/* `padding-left: 80px` sans contrepartie à droite : le carrousel d'avis
   était décalé de 80 px. */
.eneen.slide-up-animation-copy {
  padding-left: 0;
  padding-right: 0;
}

/* ------------------------------------------------- 4. pied de page ---
   `.footer-footer-bottom` n'avait aucune mise en page : un simple bloc, dont
   les trois enfants — logo, contacts, copyright — s'empilaient dans une
   colonne de 242 px au centre, sous un filet rouge large de 1440 px.

   Il reprend la largeur du filet : logo à gauche, contacts à droite,
   copyright en dessous. Aucun contenu n'est modifié ni déplacé d'un bloc à
   l'autre, seule la disposition change. */

.footer-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  grid-column-gap: 48px;
  grid-row-gap: 28px;
  width: 100%;
  margin: 0;
  padding-top: 48px;
  padding-bottom: 48px;
}

/* `min-height: 100px` et `max-height: 20px` se contredisaient. */
.footer-footer-bottom .logo {
  flex: none;
  width: auto;
  height: 64px;
  min-width: 0;
  min-height: 0;
  max-height: none;
  margin: 0;
}

.footer-footer-bottom .paragraph-5-copy {
  margin: 0;
  text-align: right;
  line-height: 1.75;
}

.footer-footer-bottom .paragraph-5 {
  flex: 1 0 100%;
  margin: 0;
  text-align: left;
  opacity: .55;
  font-size: 13px;
}

/* Les coordonnées étaient des liens sans aucune marque visuelle. */
.footer-footer-bottom a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}

.footer-footer-bottom a:hover {
  color: var(--primary);
}

@media screen and (max-width: 991px) {
  .footer-footer-bottom {
    justify-content: center;
    text-align: center;
  }

  .footer-footer-bottom .paragraph-5-copy,
  .footer-footer-bottom .paragraph-5 {
    margin: 0;
    text-align: center;
  }
}

/* ------------------------------------- 5. defilement horizontal a vide ---
   La section services etait haute de 200vh (3320 px) pour un contenu de
   439 px : une interaction Webflow faisait defiler la rangee de cartes
   horizontalement pendant qu'on scrollait. Elle avait ete concue pour une
   rangee plus large que l'ecran. Avec trois cartes qui tiennent deja dans
   1440 px, elle ne faisait que les pousser hors champ — jusqu'a -1711 px —
   en laissant un vide a droite et pres de 2900 px de defilement inutile.

   Le declencheur est retire du HTML (data-w-id sur la section) et la hauteur
   revient au contenu. */

.section-2._200vh {
  height: auto;
}

.container-8.works-sticky {
  position: static;
  top: auto;
}

/* --------------------------------- 6. cartes qui se chevauchaient ---
   Les trois cartes de la section « ce qu'on fait » portaient des decalages
   verticaux en dur — margin-top de +217 px, +321 px et -165 px — poses a la
   main dans le canevas Webflow. Dans une grille de 512 px, elles se
   recouvraient sur 174 px puis 133 px. Seuls ces decalages sont annules :
   la grille, les largeurs et la position de l'illustration ne bougent pas. */

.awards-card,
.awards-card-copy,
.ll {
  margin-top: 0;
  margin-bottom: 0;
}

/* La rangee elle-meme remontait de 150 px sur le paragraphe d'introduction.
   Les decalages des cartes compensaient ce chevauchement ; une fois annules,
   les cartes recouvraient le texte. */
.awards-flex {
  margin-top: 0;
}

/* ------------------------------------------ 7. conteneurs non centres ---
   `.container` est plafonne a 1440 px mais n'a pas de marges automatiques :
   des que la fenetre est plus large, il se cale a gauche. Sur une fenetre de
   1470 px, tout le contenu de services.html etait decale de 30 px, ce qui se
   voyait sur les textes centres. Les variantes qui doivent rester callees a
   gauche (works-sticky) portent deux classes et gagnent sur cette regle. */

.container,
.container-copy,
.container-3,
.container-3-copy,
.container-7,
.container-7-copy,
.ndnd {
  margin-left: auto;
  margin-right: auto;
}

/* `.container.padding-72px` remet explicitement `margin-left: 0` avec deux
   classes : il faut la meme specificite pour le recentrer. */
.container.padding-72px,
.container-copy.padding-72px,
.container-3.padding-72px,
.container-3-copy.padding-72px,
.ndnd.padding-72px {
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------- 8. marge negative sur tous les h5 ---
   La regle de base `h5` de l'export porte `margin-bottom: -28px`. Comme les
   surtitres du site sont tous des h5, chacun tirait l'element suivant de
   28 px vers le haut. Sur about.html, « NOTRE AGENCE » recouvrait le titre
   « À propos » sur 12 px ; ailleurs, les blocs se touchaient.

   La marge revient a zero et l'espacement redevient celui des conteneurs. */

h5 {
  margin-bottom: 0;
}

/* Le meme h5 est aussi `justify-content: center`, ce qui centrait le surtitre
   au-dessus d'un titre aligne a gauche. */
.about-title-wrapper .heading-20 {
  justify-content: flex-start;
}

/* ------------------------------------------ 9. libelles de boutons ---
   Les libelles etaient enveloppes dans un <strong> qui portait
   `margin-top: 13px` et `padding-bottom: 100px` — les restes du <br> qui
   precedait le texte dans l'export. Resultat : le texte se posait a 13 px
   du haut du bouton pour 29 px en dessous, soit 16 px trop haut.

   Ces enveloppes portent aussi `height: 100px` et `min-height: 100px`, la
   place que prenait la ligne vide. Le bouton centre desormais son contenu
   sur les deux axes, et l'enveloppe ne force plus ni hauteur, ni marge, ni
   remplissage. */

a.w-button,
input.w-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

a.w-button > strong,
a.w-button > div {
  display: block;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  line-height: 1.25;
  vertical-align: baseline;
}

a.w-button > strong > br {
  display: none;
}

/* ------------------------------------------ 10. cartes services ---
   `.services-link-wrapper` (accueil) et `.portfolio` (page services) etaient
   figes a 488 px de large avec un remplissage de 48 px sur 64. Trois cartes
   plus deux ecarts de 32 px font 1528 px dans un conteneur de 1440 : la
   troisieme depassait de 88 px, et la rangee etait callee a gauche.

   `.portfolio` portait en plus `margin-right: 299px` et `.services-card-copy`
   `margin-right: -287px`, deux valeurs qui se compensaient a peu pres.

   Les cartes se partagent desormais la largeur disponible, avec un
   remplissage et un titre ramenes a une echelle de carte. */

.services-cards-flex-2 {
  justify-content: center;
}

.services-card-3 {
  flex: 1 1 0;
  min-width: 0;
}

.services-cards-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: none;
}

.services-card-copy {
  margin-right: 0;
  min-width: 0;
}

.services-link-wrapper,
.portfolio {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: 32px 34px;
}

.portfolio.w--current {
  margin-left: 0;
}

/* 40 px pour un titre de carte : il occupait deux lignes a lui seul. */
.services-row-title-2,
.services-row-title {
  margin-right: 0;
  margin-bottom: 0;
  font-size: 26px;
  line-height: 1.12;
}

/* L'image etait bornee a 360 px, plus large que le contenu des cartes une
   fois celles-ci ramenees a leur juste taille. */
.services-row-image-2,
.services-row-image {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  max-height: 132px;
  object-fit: cover;
}

@media screen and (max-width: 991px) {
  .services-cards-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .services-row-title-2,
  .services-row-title {
    font-size: 28px;
  }
}

/* ------------------------------------------- 11. avis clients ---
   Composition symetrique de temoignage : guillemet, citation et signature
   centres sur le meme axe, la fleche du carrousel ramenee pres du bloc.

   Dans l'export, les trois elements etaient calles au bord gauche (x80) et
   le guillemet, en position absolue, recouvrait le debut du texte de 10 px.
   Ma feuille typographique avait ensuite centre la citation toute seule, en
   la desalignant du reste. */

.reviews-slide {
  width: 100%;
  max-width: 746px;
  margin-left: auto;
  margin-right: auto;
  /* Le guillemet et la signature se calent a gauche de la colonne, la
     citation reste centree. */
  align-items: flex-start;
  text-align: center;
}

/* Sorti du flux, le guillemet se posait par-dessus la citation. */
.reviews-slide > img {
  position: static;
  margin: 0 0 12px;
}

.reviews-slide .reviews-text,
.reviews-slide .reviews-text-copy,
.reviews-slide .ff-copy {
  max-width: none;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

.reviews-slide .flex-copy,
.reviews-slide .flex {
  justify-content: flex-start;
}

/* La fleche restait plaquee a l'extreme droite du slider, ce qui tirait
   visuellement tout l'ensemble vers la gauche. */
.reviews-arrow.right {
  right: 48px;
}

/* --------------------------------- 12. fond clair de Calendly ---
   Le widget Calendly dessine sa propre page a l'interieur de l'iframe : une
   carte blanche centree sur un fond clair qui remplit tout le reste. Ce fond
   est servi depuis calendly.com, aucune regle CSS d'ici ne peut l'atteindre,
   et les parametres background_color de leur URL sont reserves aux offres
   payantes.

   Il est donc rogne : l'iframe garde la taille dont Calendly a besoin pour
   afficher sa carte sur deux colonnes (1200 x 900 ; en dessous d'environ
   1000 px il bascule en colonne unique et la carte deborde), et un conteneur
   en `overflow: hidden` n'en laisse voir que la carte.

   Mesures relevees a l'ecran : carte de 798 x 697, a 201 px du bord gauche
   de l'iframe et 66 px du haut. */

.nv-cal-crop {
  width: 798px;
  max-width: 100%;
  height: 697px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 8px;
}

.nv-cal-crop .calendly-inline-widget {
  width: 1200px;
  height: 900px;
  margin-left: -201px;
  margin-top: -66px;
}

/* Sous 900 px, la carte occupe presque toute la largeur de l'iframe : le
   rognage n'a plus d'objet et ses decalages fixes deborderaient. */
@media screen and (max-width: 900px) {
  .nv-cal-crop {
    width: 100%;
    height: auto;
  }

  .nv-cal-crop .calendly-inline-widget {
    width: 100%;
    height: 1020px;
    margin-left: 0;
    margin-top: 0;
  }
}

/* ------------------------------------ 13. rythme vertical des sections ---
   Les ecarts entre blocs allaient de 10 a 290 px, sans logique. Deux valeurs
   sortaient franchement :

   - le bandeau « TALENTS » portait `margin-top: -90px` et venait se coller a
     10 px du bloc d'avis qui le precede ;
   - le bandeau « SERVICES » n'avait que 40 px d'air apres la section qui le
     precede.

   Les deux sont ramenes autour de 80-100 px, la valeur des autres transitions
   de la page. Les ecarts vont desormais de 57 a 167 px. */

.section-2.relative-overflow-hidden {
  margin-top: 0;
}

.section-2-copy.relative-overflow-hidden {
  margin-top: 40px;
}

/* --------------------- 14. section « ce qu'on fait » : alignements ---
   L'illustration portait `margin-top: 304px`, un calage a la main dans le
   canevas Webflow : elle tombait 162 px sous le centre des cartes alors que
   la rangee est deja en `align-items: center`. La marge est annulee, le
   centrage vertical reprend la main.

   La troisieme carte, seule sur sa ligne dans une grille a deux colonnes,
   restait callee dans la colonne de gauche. Elle occupe desormais les deux
   colonnes et se centre sous les deux du dessus. */

.awards-image {
  margin-top: 0;
}

/* Webflow ecrit le placement de chaque enfant de grille dans une regle
   basee sur son id — `grid-area: span 1 / span 1 / span 1 / span 1` — qui
   l'emporte sur une regle de classe. Il faut donc viser le meme id. */
#w-node-_19f24383-2818-6567-7ebc-dc341f71a28c-90dce1c1 {
  grid-area: auto / 1 / auto / -1;
  justify-self: center;
}


/* --- 15. cartes de chiffres : libelles centres et contenus ------------
   Deux defauts, sans toucher aux dimensions de l'export (colonnes de 160 px,
   cartes de 160x160, hauteur du bloc figee a 352 px) :

   - la carte etait en `text-align: start`, donc les libelles qui tiennent sur
     deux lignes (« partenariats signes ») s'alignaient a gauche ;
   - about.html utilise `.metrics-text-wrapper-copy` pour trois blocs sur
     quatre : sans la meme regle, le quatrieme tombait 9 px plus bas ;
   - « de revenus en plus » etait en `white-space: nowrap` : 168 px dans une
     carte de 160, il sortait de part et d'autre du fond arrondi. */

.metrics-text-wrapper,
.metrics-text-wrapper-copy {
  text-align: center;
}

/* Le chiffre portait un `margin-top: -19px` regle a la main : la carte est
   pourtant en `justify-content: center`, et cette marge remontait le couple
   chiffre + libelle de 10 px au-dessus du centre. */
.metrics-text-wrapper > .font-primary,
.metrics-text-wrapper-copy > .font-primary {
  margin-top: 0;
}

.metrics-text-wrapper p,
.metrics-text-wrapper-copy p,
.metrics-text-wrapper .paragraph-7,
.metrics-text-wrapper .paragraph-8 {
  white-space: normal;
  margin-left: 0;
  margin-right: 0;
}

/* --- 16. cartes « ce qu'on fait » : titres alignes entre eux -----------
   Les trois cartes sont identiques sauf la premiere, restee en
   `align-items: center` alors que les deux autres sont en `flex-start` :
   « Partenariats » etait centre dans la carte tandis que son paragraphe
   occupait toute la largeur, soit 15 px de decalage entre le titre et le
   texte, et un titre qui ne tombait pas au meme endroit que ceux des cartes
   voisines. */

.awards-card {
  align-items: flex-start;
}

/* Le titre portait en plus un `margin-left: -40px` regle a la main : il
   sortait de 8 px a gauche de la carte, 40 px avant son propre paragraphe. */
.awards-card > .outline-white-copy {
  margin-left: 0;
}


/* --- 17. bouton sous les cartes de services : respiration --------------
   Le bouton n'avait que 20 px sous les cartes, contre 70 px sous lui : il
   paraissait colle au bloc du dessus. Ecart repris a 72 px, symetrique. */

.ejej .button-3 {
  margin-top: 72px;
}


/* --- 18. avis clients : texte un peu plus grand ------------------------
   Le temoignage etait ramene a 21 px. Il remonte a 25 px, et la colonne
   passe de 746 a 780 px pour garder une longueur de ligne confortable —
   au-dela, elle viendrait toucher la fleche de droite, qui commence a
   1136 px. */

/* La fleche de droite commence toujours a 319 px du bord droit du slider :
   une largeur fixe de 780 px passait a 1470 mais mordait dessus a 1366. La
   colonne suit donc la fenetre, avec 11 px de marge avant la fleche. */
@media screen and (min-width: 992px) {
  .reviews-slide {
    max-width: min(780px, calc(100vw - 660px));
  }
}

.reviews-slide .reviews-text,
.reviews-slide .reviews-text-copy,
.reviews-slide .ff-copy {
  font-size: clamp(19px, 1.8vw, 25px);
  line-height: 1.5;
}


/* --- 19. page « a propos » : rangee de chiffres reguliere --------------
   Les quatre blocs se dimensionnaient sur leur libelle — 160, 168, 175 et
   160 px — donc les chiffres ne tombaient pas a intervalles reguliers. Ils
   se partagent maintenant la largeur a parts egales. */

.metrics-wrapper > * {
  flex: 1 1 0;
  min-width: 0;
}


/* --- 20. page « a propos » : bloc mission ------------------------------
   Le bloc portait une hauteur figee de 480 px pour un paragraphe de 135 px,
   sans marge interieure verticale : un carre presque vide, avec 173 px de
   vide au-dessus du texte et autant en dessous. La hauteur suit desormais le
   contenu, avec une marge interieure franche. */

.story-content-wrapper-2 {
  height: auto;
  min-height: 0;
  padding: 48px 40px;
}


/* --- 21. page « a propos » : bloc FAQ ----------------------------------
   Le bloc de gauche portait une hauteur figee de 480 px et un
   `justify-content: space-between` : ses trois elements — le surtitre, le
   titre « FAQ » et la phrase de presentation — etaient repartis sur toute la
   hauteur, le titre a 200 px du surtitre et la phrase 250 px plus bas. Ils
   forment maintenant un bloc, cale en haut, en face de la premiere question.

   Les questions etaient en `text-transform: capitalize`, qui met une
   majuscule a chaque mot : « Combien De Temps Faut-Il Pour Voir Des
   Resultats ? ». En francais la majuscule ne va qu'au premier mot. */

.faq-text-wrapper {
  height: auto;
  min-height: 0;
  justify-content: flex-start;
  row-gap: 16px;
}

.faq-question {
  text-transform: none;
}


/* --- 22. titres : capitale au premier mot seulement --------------------
   L'export pose `text-transform: capitalize` sur h1 a h4. En anglais c'est
   l'usage ; en francais la majuscule ne va qu'au premier mot. D'ou
   « Lancez-Vous », « A Propos », « Des Resultats Mesurables », et surtout
   « Contact@nova-prod.fr » sur la page contact, ou le procede transforme une
   adresse e-mail.

   Les regles de classe qui mettent un titre en capitales (`.big-letter-2` et
   consorts) l'emportent toujours : elles ne sont pas touchees. Les quatre
   titres reellement ecrits en minuscules dans la source ont ete repris a la
   main. */

h1, h2, h3, h4 {
  text-transform: none;
}


/* --- 23. fonds : du noir, pas du gris ---------------------------------
   L'export definit `--black: #1c1c1c`, un gris fonce, et pose sur le body
   un voile `linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5))` qui le ramene a
   #0e0e0e. Les sections, elles, n'ont pas ce voile : elles restaient a
   #1c1c1c et se detachaient en bandes claires sur toute la largeur.

   La variable passe au noir reel ; le voile n'a plus lieu d'etre. Toute la
   page est desormais d'un seul noir.

   Les blocs qui se lisaient comme des cartes grace a ce gris — le bloc
   mission, les cartes de chiffres et de services — recoivent un filet
   discret pour garder leur forme sur fond noir.

   Deux variables portaient ce gris : `--black` et `--secondary` (33 fonds a
   elle seule). Cinq selecteurs l'ecrivaient en plus en dur, et les vignettes
   de realisation le posaient en degrade. Tout est ramene au noir. */

:root {
  --black: #000;
  --secondary: #000;
}

.badge-2,
.badge-3,
.badge-3-copy,
.story-content-wrapper-2,
.services-link-wrapper {
  background-color: #000;
}

.projects-details-flex,
.projects-details-flex-2,
.projects-details-flex-3,
.projects-details-flex-3-copy,
.projects-details-flex-3-copy-copy,
.projects-details-flex-4 {
  background-image: linear-gradient(#0000, #000);
}

body,
.navbar {
  background-color: #000;
  background-image: none;
}

.story-content-wrapper-2,
.metrics-text-wrapper,
.metrics-text-wrapper-copy,
.services-link-wrapper,
.awards-card,
.awards-card-copy,
.ll {
  border: 1px solid #202020;
}


/* --- 24. page « a propos » : rythme vertical ---------------------------
   Les ecarts entre blocs etaient de 20, 15, 60, 60 et 50 px : la rangee de
   chiffres touchait presque le bloc du dessus et celui du dessous, alors que
   le reste de la page respirait a 60. Les deux ecarts serres sont ramenes au
   meme rythme. Regle limitee a cette page (body.body-4). */

.body-4 .metrics-wrapper {
  margin-top: 40px;
  margin-bottom: 45px;
}


/* --- 25. avis clients : bloc centre, fleche au bord ---------------------
   Le temoignage est centre sur l'axe (345 -> 1125 pour une fenetre de 1470,
   soit 345 px de marge de chaque cote). Ce qui le faisait paraitre decale,
   c'est la fleche : posee a 1136 px, elle se collait au texte et n'avait pas
   d'equivalent a gauche.

   Elle est repoussee contre le bord du bloc : elle se lit comme une commande
   du carrousel, plus comme un element de la composition. Une seule fleche,
   comme dans l'export. Le texte, le guillemet et la photo ne bougent pas. */

.w-slider .reviews-arrow.right {
  left: auto;
  right: 24px;
  margin-top: 0;
  margin-bottom: 0;
}


/* --- 26. page contact : colonne de gauche et bouton --------------------
   La colonne de gauche portait une hauteur figee de 300 px pour 376 px de
   contenu (deux titres a 48 px plus 128 px de marge interieure) : le texte
   debordait par le haut, 12 px au-dessus de son bloc, et retombait sur la
   capture d'ecran posee en fond — illisible.

   La hauteur suit le contenu, le fond est retire, et les deux titres passent
   a une echelle de lecture : la question en 32 px, l'adresse en 24 px. La
   grille gagne une gouttiere et une marge laterale, le texte ne touchait
   plus le bord de la fenetre. Le bouton, echoue en bas a gauche, revient
   sous les deux colonnes. */

/* Limitee au desktop : en dessous, l'export empile les deux colonnes et
   deux colonnes de 191 et 142 px seraient inutilisables. */
@media screen and (min-width: 992px) {
  .grid-7 {
    grid-template-columns: 1fr 1fr;
    column-gap: 72px;
    align-items: start;
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* En dessous, l'export gardait deux colonnes : le formulaire tombait a
   142 px de large sur un telephone. Elles s'empilent. */
@media screen and (max-width: 991px) {
  .grid-7 {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
}

.contact-image {
  height: auto;
  min-height: 0;
  max-height: none;   /* l'export la bridait a 300 px */
  padding: 0;
  background-image: none;
  justify-content: flex-start;
  row-gap: 20px;
}


.contact-image .heading-23 {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.22;
}


/* Le <strong> portait `padding: 10px`, qui decalait la premiere ligne de
   chaque titre vers la droite. */
.contact-image .heading-23 strong {
  padding: 0;
}


.llll .button-3 {
  display: flex;
  width: max-content;
  margin: 56px auto 0;
}

/* Le bouton d'envoi du formulaire etait a 30 px quand tous les autres
   boutons du site sont a 16-17 px : il ecrasait le reste de la page. */



/* --- 27. page contact : « ce qui se passe ensuite » --------------------
   La colonne de gauche ne tenait plus que sur 169 px en face d'un
   formulaire de 505 : elle paraissait vide. Aucune image du projet ne
   convenait — celle d'origine etait une capture d'After Effects, les autres
   sont des avatars de talents ou une illustration violette qui jure avec le
   noir et le rouge.

   A la place, ce que le visiteur veut savoir avant d'ecrire : le delai de
   reponse et la suite. La numerotation /01 /02 /03 reprend celle des cartes
   de services. */

.nv-etapes {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid #202020;
}

.nv-etapes-titre {
  margin: 0 0 20px;
  color: #f00;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.nv-etapes-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nv-etapes-liste li {
  display: flex;
  align-items: baseline;
  column-gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid #171717;
}

.nv-etapes-liste li:last-child {
  border-bottom: 0;
}

.nv-etapes-num {
  flex: 0 0 auto;
  color: #f00;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
}

.nv-etapes-liste p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}


/* --- 28. page contact : coordonnees a la place du formulaire -----------
   Le formulaire est retire ; la colonne de droite porte les deux moyens de
   contact directs, sous forme de liens. Meme rythme que les etapes en face. */

.nv-coordonnees {
  display: flex;
  flex-direction: column;
  row-gap: 40px;
  padding-top: 8px;
}

.nv-coord-label {
  display: block;
  margin-bottom: 10px;
  color: #f00;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.nv-coord-valeur {
  /* l'export colore les liens en rouge : ici c'est le libelle qui porte
     l'accent, la valeur doit rester lisible */
  color: #eee;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  text-decoration-color: rgba(238, 238, 238, .3);
}

.nv-coord-valeur:hover {
  text-decoration-color: #f00;
}

.nv-coord-note {
  margin-left: 10px;
  color: rgba(238, 238, 238, .55);
  font-size: 16px;
  white-space: nowrap;
}